feat: add the import code sample for icons page [MDS-170]

lib/moon_web/components/icon_item.ex

@@ -2,16 +2,19 @@ defmodule MoonWeb.Components.IconItem do
   @moduledoc false
 
   use Moon.StatelessComponent
+  alias Moon.Components.Button
 
   alias Moon.Icon
 
   prop name, :string
+  prop click, :event
+  prop value, :string
 
   def render(assigns) do
     ~F"""
-    <div class="cursor-pointer rounded-moon-i-sm transition-colors hover:bg-piccolo-100/[.12] text-trunks-100 hover:text-piccolo-100">
+    <Button variant="ghost" on_click={@click} value={@value} value_name="icon_value">
       <Icon name={@name} font_size="2rem" />
-    </div>
+    </Button>
     """
   end
 end

lib/moon_web/pages/tutorials/icons/code_snippet.ex

@@ -0,0 +1,15 @@
+defmodule MoonWeb.Pages.IconsPage.CodeSnippet do
+  @moduledoc false
+
+  use Moon.StatelessComponent
+
+  slot default
+
+  def render(assigns) do
+    ~F"""
+    <pre class="moon-design-dark w-full bg-goku-100 overflow-scroll p-4 text-moon-14 text-bulma-100 rounded-moon-s-sm">
+      <slot />
+    </pre>
+    """
+  end
+end

lib/moon_web/pages/tutorials/icons/icons_import_display.ex

@@ -0,0 +1,19 @@
+defmodule MoonWeb.Pages.IconsPage.IconsImportDisplay do
+  @moduledoc false
+
+  use Moon.StatelessComponent
+
+  alias MoonWeb.Pages.IconsPage.CodeSnippet
+
+  slot default
+
+  def render(assigns) do
+    ~F"""
+    <div class="overflow-scroll">
+      <CodeSnippet>
+        <slot />
+      </CodeSnippet>
+    </div>
+    """
+  end
+end

lib/moon_web/pages/icons_page.ex → lib/moon_web/pages/tutorials/icons/icons_page.ex

@@ -11,6 +11,9 @@ defmodule MoonWeb.Pages.IconsPage do
   alias MoonWeb.Components.IconsBlock
   alias MoonWeb.Components.IconItem
   alias MoonWeb.Components.PageSection
+  alias MoonWeb.Pages.IconsPage.IconsImportDisplay
+
+  data selected_icons, :list, default: []
 
   data breadcrumbs, :any,
     default: [
@@ -35,11 +38,7 @@ defmodule MoonWeb.Pages.IconsPage do
   def render(assigns) do
     ~F"""
     <Page theme_name={@theme_name} active_page={@active_page} breadcrumbs={@breadcrumbs}>
-      <ComponentPageDescription title="Icons">
-        <p>
-          Please select icons for Import.
-        </p>
-      </ComponentPageDescription>
+      <ComponentPageDescription title="Icons" />
 
       <ExampleAndCode title="Sizes and colors" id="icons">
         <:example>
@@ -52,162 +51,181 @@ defmodule MoonWeb.Pages.IconsPage do
         <:code>{icons_code()}</:code>
       </ExampleAndCode>
 
+      <p>
+        Please select icons for Import.
+      </p>
+
+      <PageSection
+        title="Import code for selected icons (by attribute)"
+        :if={!Enum.empty?(@selected_icons)}
+      >
+        <IconsImportDisplay>
+          {get_import_text_by_attribute(assigns, @selected_icons)}
+        </IconsImportDisplay>
+      </PageSection>
+
+      <PageSection title="Import code for selected icons (by name)" :if={!Enum.empty?(@selected_icons)}>
+        <IconsImportDisplay>
+          {get_import_text_by_name(assigns, @selected_icons)}
+        </IconsImportDisplay>
+      </PageSection>
+
       <PageSection title="Arrows">
         <IconsBlock>
           {#for icon_name <- Icons.list_arrows()}
-            <IconItem name={icon_name} />
+            <IconItem click="add_selected_icon" value={icon_name} name={icon_name} />
           {/for}
         </IconsBlock>
       </PageSection>
 
       <PageSection title="Chart">
         <IconsBlock>
           {#for icon_name <- Icons.list_chart()}
-            <IconItem name={icon_name} />
+            <IconItem click="add_selected_icon" value={icon_name} name={icon_name} />
           {/for}
         </IconsBlock>
       </PageSection>
 
       <PageSection title="Chat">
         <IconsBlock>
           {#for icon_name <- Icons.list_chat()}
-            <IconItem name={icon_name} />
+            <IconItem click="add_selected_icon" value={icon_name} name={icon_name} />
           {/for}
         </IconsBlock>
       </PageSection>
 
       <PageSection title="Controls">
         <IconsBlock>
           {#for icon_name <- Icons.list_controls()}
-            <IconItem name={icon_name} />
+            <IconItem click="add_selected_icon" value={icon_name} name={icon_name} />
           {/for}
         </IconsBlock>
       </PageSection>
 
       <PageSection title="Devices">
         <IconsBlock>
           {#for icon_name <- Icons.list_devices()}
-            <IconItem name={icon_name} />
+            <IconItem click="add_selected_icon" value={icon_name} name={icon_name} />
           {/for}
         </IconsBlock>
       </PageSection>
 
       <PageSection title="Files">
         <IconsBlock>
           {#for icon_name <- Icons.list_files()}
-            <IconItem name={icon_name} />
+            <IconItem click="add_selected_icon" value={icon_name} name={icon_name} />
           {/for}
         </IconsBlock>
       </PageSection>
 
       <PageSection title="Generic">
         <IconsBlock>
           {#for icon_name <- Icons.list_generic()}
-            <IconItem name={icon_name} />
+            <IconItem click="add_selected_icon" value={icon_name} name={icon_name} />
           {/for}
         </IconsBlock>
       </PageSection>
 
       <PageSection title="Mail">
         <IconsBlock>
           {#for icon_name <- Icons.list_mail()}
-            <IconItem name={icon_name} />
+            <IconItem click="add_selected_icon" value={icon_name} name={icon_name} />
           {/for}
         </IconsBlock>
       </PageSection>
 
       <PageSection title="Maps">
         <IconsBlock>
           {#for icon_name <- Icons.list_maps()}
-            <IconItem name={icon_name} />
+            <IconItem click="add_selected_icon" value={icon_name} name={icon_name} />
           {/for}
         </IconsBlock>
       </PageSection>
 
       <PageSection title="Media">
         <IconsBlock>
           {#for icon_name <- Icons.list_media()}
-            <IconItem name={icon_name} />
+            <IconItem click="add_selected_icon" value={icon_name} name={icon_name} />
           {/for}
         </IconsBlock>
       </PageSection>
 
       <PageSection title="Notifications">
         <IconsBlock>
           {#for icon_name <- Icons.list_notifications()}
-            <IconItem name={icon_name} />
+            <IconItem click="add_selected_icon" value={icon_name} name={icon_name} />
           {/for}
         </IconsBlock>
       </PageSection>
 
       <PageSection title="Other">
         <IconsBlock>
           {#for icon_name <- Icons.list_other()}
-            <IconItem name={icon_name} />
+            <IconItem click="add_selected_icon" value={icon_name} name={icon_name} />
           {/for}
         </IconsBlock>
       </PageSection>
 
       <PageSection title="Security">
         <IconsBlock>
           {#for icon_name <- Icons.list_security()}
-            <IconItem name={icon_name} />
+            <IconItem click="add_selected_icon" value={icon_name} name={icon_name} />
           {/for}
         </IconsBlock>
       </PageSection>
 
       <PageSection title="Shop">
         <IconsBlock>
           {#for icon_name <- Icons.list_shop()}
-            <IconItem name={icon_name} />
+            <IconItem click="add_selected_icon" value={icon_name} name={icon_name} />
           {/for}
         </IconsBlock>
       </PageSection>
 
       <PageSection title="Software">
         <IconsBlock>
           {#for icon_name <- Icons.list_software()}
-            <IconItem name={icon_name} />
+            <IconItem click="add_selected_icon" value={icon_name} name={icon_name} />
           {/for}
         </IconsBlock>
       </PageSection>
 
       <PageSection title="Sport">
         <IconsBlock>
           {#for icon_name <- Icons.list_sport()}
-            <IconItem name={icon_name} />
+            <IconItem click="add_selected_icon" value={icon_name} name={icon_name} />
           {/for}
         </IconsBlock>
       </PageSection>
 
       <PageSection title="Text">
         <IconsBlock>
           {#for icon_name <- Icons.list_text()}
-            <IconItem name={icon_name} />
+            <IconItem click="add_selected_icon" value={icon_name} name={icon_name} />
           {/for}
         </IconsBlock>
       </PageSection>
 
       <PageSection title="Time">
         <IconsBlock>
           {#for icon_name <- Icons.list_time()}
-            <IconItem name={icon_name} />
+            <IconItem click="add_selected_icon" value={icon_name} name={icon_name} />
           {/for}
         </IconsBlock>
       </PageSection>
 
       <PageSection title="Travel">
         <IconsBlock>
           {#for icon_name <- Icons.list_travel()}
-            <IconItem name={icon_name} />
+            <IconItem click="add_selected_icon" value={icon_name} name={icon_name} />
           {/for}
         </IconsBlock>
       </PageSection>
 
       <PageSection title="Type">
         <IconsBlock>
           {#for icon_name <- Icons.list_type()}
-            <IconItem name={icon_name} />
+            <IconItem click="add_selected_icon" value={icon_name} name={icon_name} />
           {/for}
         </IconsBlock>
       </PageSection>
@@ -223,4 +241,48 @@ defmodule MoonWeb.Pages.IconsPage do
     <Icon name="files_copy" font_size="3rem" class="text-piccolo-100" />
     """
   end
+
+  def handle_event(
+        "add_selected_icon",
+        %{"icon-value" => value},
+        socket
+      ) do
+    selected_icons = Enum.concat(socket.assigns.selected_icons, [value])
+    socket = socket |> assign(:selected_icons, selected_icons)
+    {:noreply, socket}
+  end
+
+  defp get_import_text_by_attribute(assigns, selected_icons) do
+    ~F"""
+    alias Moon.Icon
+
+    {#for icon <- selected_icons}{icon_string(icon)}{/for}
+    """
+  end
+
+  defp icon_string(name) do
+    """
+      <Icon name="#{name}" />
+    """
+  end
+
+  defp get_import_text_by_name(assigns, selected_icons) do
+    case_converted_list = Enum.map(selected_icons, fn i -> Macro.camelize(i) end)
+    import_name_string = Enum.join(case_converted_list, ", ")
+
+    ~F"""
+    {get_alias_string(import_name_string)}
+
+    {#for icon <- case_converted_list}{get_icon_tag(icon)}{/for}
+    """
+  end
+
+  defp get_alias_string(names) do
+    # credo:disable-for-next-line Credo.Check.Consistency.SpaceInParentheses
+    "alias Moon.Icons.{#{names}}"
+  end
+
+  defp get_icon_tag(name) do
+    "<#{name} />\n"
+  end
 end