From 013ddd62d4f6170f7c66c0f35a890fb8d323299a Mon Sep 17 00:00:00 2001
From: Alexis Azanza <alexis@devtailor.com>
Date: Wed, 20 Jul 2022 11:24:38 +0300
Subject: [PATCH 1/6] Continue with icons show import code

---
 lib/moon_web/pages/{ => tutorials/icons}/icons_page.ex | 2 ++
 1 file changed, 2 insertions(+)
 rename lib/moon_web/pages/{ => tutorials/icons}/icons_page.ex (99%)

diff --git a/lib/moon_web/pages/icons_page.ex b/lib/moon_web/pages/tutorials/icons/icons_page.ex
similarity index 99%
rename from lib/moon_web/pages/icons_page.ex
rename to lib/moon_web/pages/tutorials/icons/icons_page.ex
index 84d0fb4e0..049bb5c48 100644
--- a/lib/moon_web/pages/icons_page.ex
+++ b/lib/moon_web/pages/tutorials/icons/icons_page.ex
@@ -12,6 +12,8 @@ defmodule MoonWeb.Pages.IconsPage do
   alias MoonWeb.Components.IconItem
   alias MoonWeb.Components.PageSection
 
+  data selected_icons, :list, default: []
+
   data breadcrumbs, :any,
     default: [
       %{

From 5d62bbcd78d5a6420d262ba62ab6a3d09a7d5a76 Mon Sep 17 00:00:00 2001
From: Alexis Azanza <alexis@devtailor.com>
Date: Wed, 20 Jul 2022 22:22:50 +0300
Subject: [PATCH 2/6] Clicking an icon adds to selected items

---
 lib/moon/assets/icon.ex                       | 11 ++++
 lib/moon/components/icon.ex                   | 11 ++++
 lib/moon_web/components/icon_item.ex          |  7 ++-
 .../pages/tutorials/icons/icons_page.ex       | 51 +++++++++++--------
 4 files changed, 58 insertions(+), 22 deletions(-)

diff --git a/lib/moon/assets/icon.ex b/lib/moon/assets/icon.ex
index fa113c4cb..6b5a164ad 100644
--- a/lib/moon/assets/icon.ex
+++ b/lib/moon/assets/icon.ex
@@ -13,16 +13,27 @@ defmodule Moon.Assets.Icon do
   prop font_size, :string
   prop click, :event
   prop class, :string
+  prop value_name, :string, default: "icon_value"
+  prop value, :string
 
   def render(assigns) do
     ~F"""
     <svg
       class={"moon-icon #{@class} #{@click && "cursor-pointer"}"}
       :on-click={@click}
+      {...phx_val_tag((@value && @value_name) || nil, @value)}
       style={get_style(color: @color, background_color: @background_color, font_size: @font_size)}
     >
       <use href={"/moon/assets/svgs/icons/#{asset_name_to_filename(@name)}.svg#item"} />
     </svg>
     """
   end
+
+  defp phx_val_tag(nil, _), do: []
+
+  defp phx_val_tag(name, value) do
+    # credo:disable-for-next-line Credo.Check.Warning.UnsafeToAtom
+    key = String.to_atom("phx-value-#{name}")
+    [{key, value}]
+  end
 end
diff --git a/lib/moon/components/icon.ex b/lib/moon/components/icon.ex
index b8ce45c5f..48ff0fe17 100644
--- a/lib/moon/components/icon.ex
+++ b/lib/moon/components/icon.ex
@@ -10,12 +10,15 @@ defmodule Moon.Icon do
   prop font_size, :string
   prop click, :event
   prop class, :string
+  prop value_name, :string, default: "icon_value"
+  prop value, :string
 
   def render(assigns) do
     ~F"""
     <svg
       class={"moon-icon #{@class}", "cursor-pointer": @click}
       :on-click={@click}
+      {...phx_val_tag((@value && @value_name) || nil, @value)}
       style={get_style(color: @color, background_color: @background_color, font_size: @font_size)}
     >
       <use href={"/moon/assets/svgs/icons_new/#{icon_name_to_filename(@name)}.svg#item"} />
@@ -28,4 +31,12 @@ defmodule Moon.Icon do
     |> to_string()
     |> String.replace("_", "-")
   end
+
+  defp phx_val_tag(nil, _), do: []
+
+  defp phx_val_tag(name, value) do
+    # credo:disable-for-next-line Credo.Check.Warning.UnsafeToAtom
+    key = String.to_atom("phx-value-#{name}")
+    [{key, value}]
+  end
 end
diff --git a/lib/moon_web/components/icon_item.ex b/lib/moon_web/components/icon_item.ex
index cb64c4175..a02fc31fb 100644
--- a/lib/moon_web/components/icon_item.ex
+++ b/lib/moon_web/components/icon_item.ex
@@ -6,11 +6,14 @@ defmodule MoonWeb.Components.IconItem do
   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">
-      <Icon name={@name} font_size="2rem" />
+    <div
+      class="cursor-pointer rounded-moon-i-sm transition-colors hover:bg-piccolo-100/[.12] text-trunks-100 hover:text-piccolo-100">
+      <Icon name={@name} font_size="2rem" click={@click} value={@value} />
     </div>
     """
   end
diff --git a/lib/moon_web/pages/tutorials/icons/icons_page.ex b/lib/moon_web/pages/tutorials/icons/icons_page.ex
index 049bb5c48..163c933de 100644
--- a/lib/moon_web/pages/tutorials/icons/icons_page.ex
+++ b/lib/moon_web/pages/tutorials/icons/icons_page.ex
@@ -57,7 +57,7 @@ defmodule MoonWeb.Pages.IconsPage do
       <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>
@@ -65,7 +65,7 @@ defmodule MoonWeb.Pages.IconsPage do
       <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>
@@ -73,7 +73,7 @@ defmodule MoonWeb.Pages.IconsPage do
       <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>
@@ -81,7 +81,7 @@ defmodule MoonWeb.Pages.IconsPage do
       <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>
@@ -89,7 +89,7 @@ defmodule MoonWeb.Pages.IconsPage do
       <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>
@@ -97,7 +97,7 @@ defmodule MoonWeb.Pages.IconsPage do
       <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>
@@ -105,7 +105,7 @@ defmodule MoonWeb.Pages.IconsPage do
       <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>
@@ -113,7 +113,7 @@ defmodule MoonWeb.Pages.IconsPage do
       <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>
@@ -121,7 +121,7 @@ defmodule MoonWeb.Pages.IconsPage do
       <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>
@@ -129,7 +129,7 @@ defmodule MoonWeb.Pages.IconsPage do
       <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>
@@ -137,7 +137,7 @@ defmodule MoonWeb.Pages.IconsPage do
       <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>
@@ -145,7 +145,7 @@ defmodule MoonWeb.Pages.IconsPage do
       <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>
@@ -153,7 +153,7 @@ defmodule MoonWeb.Pages.IconsPage do
       <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>
@@ -161,7 +161,7 @@ defmodule MoonWeb.Pages.IconsPage do
       <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>
@@ -169,7 +169,7 @@ defmodule MoonWeb.Pages.IconsPage do
       <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>
@@ -177,7 +177,7 @@ defmodule MoonWeb.Pages.IconsPage do
       <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>
@@ -185,7 +185,7 @@ defmodule MoonWeb.Pages.IconsPage do
       <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>
@@ -193,7 +193,7 @@ defmodule MoonWeb.Pages.IconsPage do
       <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>
@@ -201,7 +201,7 @@ defmodule MoonWeb.Pages.IconsPage do
       <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>
@@ -209,7 +209,7 @@ defmodule MoonWeb.Pages.IconsPage do
       <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>
@@ -225,4 +225,15 @@ 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)
+    IO.inspect(socket.assigns)
+    {:noreply, socket}
+  end
 end

From 9a4daac97de890ba4f7a6e6327cc972b74e92c3d Mon Sep 17 00:00:00 2001
From: Alexis Azanza <alexis@devtailor.com>
Date: Thu, 21 Jul 2022 19:36:47 +0300
Subject: [PATCH 3/6] Show import code block after selecting icons

---
 .../pages/tutorials/icons/code_snippet.ex     | 15 +++++
 .../tutorials/icons/icons_import_display.ex   | 19 +++++++
 .../pages/tutorials/icons/icons_page.ex       | 57 +++++++++++++++++--
 3 files changed, 85 insertions(+), 6 deletions(-)
 create mode 100644 lib/moon_web/pages/tutorials/icons/code_snippet.ex
 create mode 100644 lib/moon_web/pages/tutorials/icons/icons_import_display.ex

diff --git a/lib/moon_web/pages/tutorials/icons/code_snippet.ex b/lib/moon_web/pages/tutorials/icons/code_snippet.ex
new file mode 100644
index 000000000..a697c7445
--- /dev/null
+++ b/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
diff --git a/lib/moon_web/pages/tutorials/icons/icons_import_display.ex b/lib/moon_web/pages/tutorials/icons/icons_import_display.ex
new file mode 100644
index 000000000..4c700b18b
--- /dev/null
+++ b/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
diff --git a/lib/moon_web/pages/tutorials/icons/icons_page.ex b/lib/moon_web/pages/tutorials/icons/icons_page.ex
index 163c933de..6188cc3d5 100644
--- a/lib/moon_web/pages/tutorials/icons/icons_page.ex
+++ b/lib/moon_web/pages/tutorials/icons/icons_page.ex
@@ -11,6 +11,7 @@ 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: []
 
@@ -37,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>
@@ -54,6 +51,22 @@ 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()}
@@ -233,7 +246,39 @@ defmodule MoonWeb.Pages.IconsPage do
       ) do
     selected_icons = Enum.concat(socket.assigns.selected_icons, [value])
     socket = socket |> assign(:selected_icons, selected_icons)
-    IO.inspect(socket.assigns)
     {: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
+    "alias Moon.Icons.{#{names}}"
+  end
+
+  defp get_icon_tag(name) do
+    "<#{name} />\n"
+  end
 end

From cfb59fd3d6aad930427819a18e4dcd7b72f98a37 Mon Sep 17 00:00:00 2001
From: Alexis Azanza <alexis@devtailor.com>
Date: Thu, 21 Jul 2022 19:45:52 +0300
Subject: [PATCH 4/6] Run formatters

---
 lib/moon_web/components/icon_item.ex             | 3 +--
 lib/moon_web/pages/tutorials/icons/icons_page.ex | 8 ++++++--
 2 files changed, 7 insertions(+), 4 deletions(-)

diff --git a/lib/moon_web/components/icon_item.ex b/lib/moon_web/components/icon_item.ex
index a02fc31fb..78d4eb5f3 100644
--- a/lib/moon_web/components/icon_item.ex
+++ b/lib/moon_web/components/icon_item.ex
@@ -11,8 +11,7 @@ defmodule MoonWeb.Components.IconItem do
 
   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">
+    <div class="cursor-pointer rounded-moon-i-sm transition-colors hover:bg-piccolo-100/[.12] text-trunks-100 hover:text-piccolo-100">
       <Icon name={@name} font_size="2rem" click={@click} value={@value} />
     </div>
     """
diff --git a/lib/moon_web/pages/tutorials/icons/icons_page.ex b/lib/moon_web/pages/tutorials/icons/icons_page.ex
index 6188cc3d5..566930c71 100644
--- a/lib/moon_web/pages/tutorials/icons/icons_page.ex
+++ b/lib/moon_web/pages/tutorials/icons/icons_page.ex
@@ -38,7 +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"/>
+      <ComponentPageDescription title="Icons" />
 
       <ExampleAndCode title="Sizes and colors" id="icons">
         <:example>
@@ -55,7 +55,10 @@ defmodule MoonWeb.Pages.IconsPage do
         Please select icons for Import.
       </p>
 
-      <PageSection title="Import code for selected icons (by attribute)" :if={!Enum.empty?(@selected_icons)}>
+      <PageSection
+        title="Import code for selected icons (by attribute)"
+        :if={!Enum.empty?(@selected_icons)}
+      >
         <IconsImportDisplay>
           {get_import_text_by_attribute(assigns, @selected_icons)}
         </IconsImportDisplay>
@@ -275,6 +278,7 @@ defmodule MoonWeb.Pages.IconsPage do
   end
 
   defp get_alias_string(names) do
+    # credo:disable-for-next-line Credo.Check.Consistency.SpaceInParentheses
     "alias Moon.Icons.{#{names}}"
   end
 

From 805c3d482d82e4fa5bec5be7231265c78ccab5f3 Mon Sep 17 00:00:00 2001
From: Alexis Azanza <alexis@devtailor.com>
Date: Fri, 22 Jul 2022 12:56:45 +0300
Subject: [PATCH 5/6] Dont use click prop on icon component

---
 lib/moon/assets/icon.ex              | 11 -----------
 lib/moon/components/icon.ex          | 11 -----------
 lib/moon_web/components/icon_item.ex |  7 ++++---
 3 files changed, 4 insertions(+), 25 deletions(-)

diff --git a/lib/moon/assets/icon.ex b/lib/moon/assets/icon.ex
index 6b5a164ad..fa113c4cb 100644
--- a/lib/moon/assets/icon.ex
+++ b/lib/moon/assets/icon.ex
@@ -13,27 +13,16 @@ defmodule Moon.Assets.Icon do
   prop font_size, :string
   prop click, :event
   prop class, :string
-  prop value_name, :string, default: "icon_value"
-  prop value, :string
 
   def render(assigns) do
     ~F"""
     <svg
       class={"moon-icon #{@class} #{@click && "cursor-pointer"}"}
       :on-click={@click}
-      {...phx_val_tag((@value && @value_name) || nil, @value)}
       style={get_style(color: @color, background_color: @background_color, font_size: @font_size)}
     >
       <use href={"/moon/assets/svgs/icons/#{asset_name_to_filename(@name)}.svg#item"} />
     </svg>
     """
   end
-
-  defp phx_val_tag(nil, _), do: []
-
-  defp phx_val_tag(name, value) do
-    # credo:disable-for-next-line Credo.Check.Warning.UnsafeToAtom
-    key = String.to_atom("phx-value-#{name}")
-    [{key, value}]
-  end
 end
diff --git a/lib/moon/components/icon.ex b/lib/moon/components/icon.ex
index 48ff0fe17..b8ce45c5f 100644
--- a/lib/moon/components/icon.ex
+++ b/lib/moon/components/icon.ex
@@ -10,15 +10,12 @@ defmodule Moon.Icon do
   prop font_size, :string
   prop click, :event
   prop class, :string
-  prop value_name, :string, default: "icon_value"
-  prop value, :string
 
   def render(assigns) do
     ~F"""
     <svg
       class={"moon-icon #{@class}", "cursor-pointer": @click}
       :on-click={@click}
-      {...phx_val_tag((@value && @value_name) || nil, @value)}
       style={get_style(color: @color, background_color: @background_color, font_size: @font_size)}
     >
       <use href={"/moon/assets/svgs/icons_new/#{icon_name_to_filename(@name)}.svg#item"} />
@@ -31,12 +28,4 @@ defmodule Moon.Icon do
     |> to_string()
     |> String.replace("_", "-")
   end
-
-  defp phx_val_tag(nil, _), do: []
-
-  defp phx_val_tag(name, value) do
-    # credo:disable-for-next-line Credo.Check.Warning.UnsafeToAtom
-    key = String.to_atom("phx-value-#{name}")
-    [{key, value}]
-  end
 end
diff --git a/lib/moon_web/components/icon_item.ex b/lib/moon_web/components/icon_item.ex
index 78d4eb5f3..f89323c5b 100644
--- a/lib/moon_web/components/icon_item.ex
+++ b/lib/moon_web/components/icon_item.ex
@@ -2,6 +2,7 @@ defmodule MoonWeb.Components.IconItem do
   @moduledoc false
 
   use Moon.StatelessComponent
+  alias Moon.Components.Button
 
   alias Moon.Icon
 
@@ -11,9 +12,9 @@ defmodule MoonWeb.Components.IconItem do
 
   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">
-      <Icon name={@name} font_size="2rem" click={@click} value={@value} />
-    </div>
+    <Button variant="ghost" on_click={@click} value={@value} value_name="icon_value">
+      <Icon name={@name} font_size="2rem"  />
+    </Button>
     """
   end
 end

From a6384e84d12bbc93af9c6e9bb55cf31d67221fc2 Mon Sep 17 00:00:00 2001
From: Alexis Azanza <alexis@devtailor.com>
Date: Fri, 22 Jul 2022 13:03:57 +0300
Subject: [PATCH 6/6] Fix formatters

---
 lib/moon_web/components/icon_item.ex | 2 +-
 1 file changed, 1 insertion(+), 1 deletion(-)

diff --git a/lib/moon_web/components/icon_item.ex b/lib/moon_web/components/icon_item.ex
index f89323c5b..de8333606 100644
--- a/lib/moon_web/components/icon_item.ex
+++ b/lib/moon_web/components/icon_item.ex
@@ -13,7 +13,7 @@ defmodule MoonWeb.Components.IconItem do
   def render(assigns) do
     ~F"""
     <Button variant="ghost" on_click={@click} value={@value} value_name="icon_value">
-      <Icon name={@name} font_size="2rem"  />
+      <Icon name={@name} font_size="2rem" />
     </Button>
     """
   end