[MDS-403] Chip v2

lib/moon/design/chip.ex

@@ -0,0 +1,44 @@
+defmodule Moon.Design.Chip do
+  @moduledoc false
+
+  use Moon.StatelessComponent
+
+  slot(default)
+  slot(left_icon)
+  slot(right_icon)
+  slot(icon_only)
+
+  prop(is_active, :boolean, default: false)
+  prop(is_stroke, :boolean, default: false)
+  prop(size, :string, values: ["sm", "md"], default: "md")
+  prop(variant, :string, values: ["default", "ghost"], default: "default")
+  prop(testid, :string)
+  prop(on_click, :event)
+  prop(class, :css_class)
+
+  def render(assigns) do
+    ~F"""
+    <button
+      class={merge([
+        [
+          "z-0 overflow-hidden flex flex-row items-center text-moon-14 relative rounded-moon-i-sm cursor-pointer transition duration-200 space-between bg-gohan text-bulma hover:bg-jiren hover:text-piccolo",
+          "h-8 gap-1 py-1 px-2": @size == "sm",
+          "h-10 gap-2 py-2 px-3": @size == "md",
+          "bg-none": @variant in ["ghost"],
+          "bg-jiren text-piccolo": @is_active,
+          "hover:shadow-interactive": @is_stroke,
+          "shadow-interactive": @is_active && @is_stroke
+        ],
+        @class
+      ])}
+      :on-click={@on_click}
+      testid={@testid}
+    >
+      <#slot {@left_icon} />
+      <#slot />
+      <#slot {@right_icon} />
+      <#slot {@icon_only} />
+    </button>
+    """
+  end
+end

lib/moon_web/components/left_menu.ex

@@ -81,6 +81,7 @@ defmodule MoonWeb.Components.LeftMenu do
                             </div>
                           </:content>
                         </Accordion>
+                        <SidebarLink route={Pages.Design.ChipPage}>Chip</SidebarLink>
                         <SidebarLink route={Pages.Design.DropdownPage}>Dropdown</SidebarLink>
                         <Accordion
                           is_content_inside={false}

lib/moon_web/examples/design/chip_example/active.ex

@@ -0,0 +1,26 @@
+defmodule MoonWeb.Examples.Design.ChipExample.Active do
+  @moduledoc false
+
+  use Moon.StatelessComponent
+  use MoonWeb, :example
+
+  alias Moon.Design.Chip
+
+  def render(assigns) do
+    ~F"""
+    <Chip is_active size="sm">Active</Chip>
+    <Chip is_active is_stroke>Active</Chip>
+    """
+  end
+
+  def code() do
+    """
+    alias Moon.Design.Chip
+
+    ...
+
+    <Chip is_active size="sm">Active</Chip>
+    <Chip is_active is_stroke>Active</Chip>
+    """
+  end
+end

lib/moon_web/examples/design/chip_example/default.ex

@@ -0,0 +1,24 @@
+defmodule MoonWeb.Examples.Design.ChipExample.Default do
+  @moduledoc false
+
+  use Moon.StatelessComponent
+  use MoonWeb, :example
+
+  alias Moon.Design.Chip
+
+  def render(assigns) do
+    ~F"""
+    <Chip>Default</Chip>
+    """
+  end
+
+  def code() do
+    """
+    alias Moon.Design.Chip
+
+    ...
+
+    <Chip>Default</Chip>
+    """
+  end
+end

lib/moon_web/examples/design/chip_example/is_stroke.ex

@@ -0,0 +1,30 @@
+defmodule MoonWeb.Examples.Design.ChipExample.IsStroke do
+  @moduledoc false
+
+  use Moon.StatelessComponent
+  use MoonWeb, :example
+
+  alias Moon.Design.Chip
+
+  def render(assigns) do
+    ~F"""
+    <Chip is_stroke size="sm">
+      Stroke on hover
+    </Chip>
+    <Chip is_stroke>Stroke on hover</Chip>
+    """
+  end
+
+  def code() do
+    """
+    alias Moon.Design.Chip
+
+    ...
+
+    Chip is_stroke size="sm">
+      Stroke on hover
+    </Chip>
+    <Chip is_stroke>Stroke on hover</Chip>
+    """
+  end
+end

lib/moon_web/examples/design/chip_example/is_stroke_with_icons.ex

@@ -0,0 +1,116 @@
+defmodule MoonWeb.Examples.Design.ChipExample.IsStrokeWithIcons do
+  @moduledoc false
+
+  use Moon.StatelessComponent
+  use MoonWeb, :example
+
+  alias Moon.Design.Chip
+
+  alias Moon.Icons.MediaMusic
+  alias Moon.Icons.SoftwareDownload
+
+  def render(assigns) do
+    ~F"""
+    <div class="flex flex-wrap items-center justify-around gap-2 w-full">
+      <Chip size="sm" is_stroke>
+        <:left_icon><MediaMusic class="text-moon-24" /></:left_icon>
+        Left Icon
+      </Chip>
+      <Chip size="sm" is_stroke>
+        Right Icon
+        <:right_icon><SoftwareDownload class="text-moon-24" /></:right_icon>
+      </Chip>
+      <Chip size="sm" is_stroke>
+        <:left_icon><MediaMusic class="text-moon-24" /></:left_icon>
+        Left/Right Icons
+        <:right_icon><SoftwareDownload class="text-moon-24" /></:right_icon>
+      </Chip>
+      <Chip size="sm" is_stroke>
+        <:left_icon><MediaMusic class="text-moon-24" /></:left_icon>
+        <:right_icon><SoftwareDownload class="text-moon-24" /></:right_icon>
+      </Chip>
+      <Chip size="sm" is_stroke>
+        <:icon_only><SoftwareDownload class="text-moon-24" /></:icon_only>
+      </Chip>
+    </div>
+    <div class="flex flex-wrap items-center justify-around gap-2 w-full">
+      <Chip is_stroke>
+        <:left_icon><MediaMusic class="text-moon-24" /></:left_icon>
+        Left Icon
+      </Chip>
+      <Chip is_stroke>
+        Right Icon
+        <:right_icon><SoftwareDownload class="text-moon-24" /></:right_icon>
+      </Chip>
+      <Chip is_stroke>
+        <:left_icon><MediaMusic class="text-moon-24" /></:left_icon>
+        Left/Right Icons
+        <:right_icon><SoftwareDownload class="text-moon-24" /></:right_icon>
+      </Chip>
+      <Chip is_stroke>
+        <:left_icon><MediaMusic class="text-moon-24" /></:left_icon>
+        <:right_icon><SoftwareDownload class="text-moon-24" /></:right_icon>
+      </Chip>
+      <Chip is_stroke>
+        <:icon_only><SoftwareDownload class="text-moon-24" /></:icon_only>
+      </Chip>
+    </div>
+    """
+  end
+
+  def code() do
+    """
+    alias Moon.Design.Chip
+
+    alias Moon.Icons.MediaMusic
+    alias Moon.Icons.SoftwareDownload
+
+    ...
+
+    <div class="flex flex-wrap items-center justify-around gap-2 w-full">
+      <Chip size="sm" is_stroke>
+        <:left_icon><MediaMusic class="text-moon-24" /></:left_icon>
+        Left Icon
+      </Chip>
+      <Chip size="sm" is_stroke>
+        Right Icon
+        <:right_icon><SoftwareDownload class="text-moon-24" /></:right_icon>
+      </Chip>
+      <Chip size="sm" is_stroke>
+        <:left_icon><MediaMusic class="text-moon-24" /></:left_icon>
+        Left/Right Icons
+        <:right_icon><SoftwareDownload class="text-moon-24" /></:right_icon>
+      </Chip>
+      <Chip size="sm" is_stroke>
+        <:left_icon><MediaMusic class="text-moon-24" /></:left_icon>
+        <:right_icon><SoftwareDownload class="text-moon-24" /></:right_icon>
+      </Chip>
+      <Chip size="sm" is_stroke>
+        <:icon_only><SoftwareDownload class="text-moon-24" /></:icon_only>
+      </Chip>
+    </div>
+    <div class="flex flex-wrap items-center justify-around gap-2 w-full">
+      <Chip is_stroke>
+        <:left_icon><MediaMusic class="text-moon-24" /></:left_icon>
+        Left Icon
+      </Chip>
+      <Chip is_stroke>
+        Right Icon
+        <:right_icon><SoftwareDownload class="text-moon-24" /></:right_icon>
+      </Chip>
+      <Chip is_stroke>
+        <:left_icon><MediaMusic class="text-moon-24" /></:left_icon>
+        Left/Right Icons
+        <:right_icon><SoftwareDownload class="text-moon-24" /></:right_icon>
+      </Chip>
+      <Chip is_stroke>
+        <:left_icon><MediaMusic class="text-moon-24" /></:left_icon>
+        <:right_icon><SoftwareDownload class="text-moon-24" /></:right_icon>
+      </Chip>
+      <Chip is_stroke>
+        <:icon_only><SoftwareDownload class="text-moon-24" /></:icon_only>
+      </Chip>
+    </div>
+    """
+  end
+end

lib/moon_web/examples/design/chip_example/sizes.ex

@@ -0,0 +1,26 @@
+defmodule MoonWeb.Examples.Design.ChipExample.Sizes do
+  @moduledoc false
+
+  use Moon.StatelessComponent
+  use MoonWeb, :example
+
+  alias Moon.Design.Chip
+
+  def render(assigns) do
+    ~F"""
+    <Chip size="sm">Small</Chip>
+    <Chip>Medium is default</Chip>
+    """
+  end
+
+  def code() do
+    """
+    alias Moon.Design.Chip
+
+    ...
+
+    <Chip size="sm">Small</Chip>
+    <Chip>Medium is default</Chip>
+    """
+  end
+end

lib/moon_web/examples/design/chip_example/variants.ex

@@ -0,0 +1,26 @@
+defmodule MoonWeb.Examples.Design.ChipExample.Variants do
+  @moduledoc false
+
+  use Moon.StatelessComponent
+  use MoonWeb, :example
+
+  alias Moon.Design.Chip
+
+  def render(assigns) do
+    ~F"""
+    <Chip variant="ghost">Ghost variant</Chip>
+    <Chip>Default variant</Chip>
+    """
+  end
+
+  def code() do
+    """
+    alias Moon.Design.Chip
+
+    ...
+
+    <Chip variant="ghost">Ghost variant</Chip>
+    <Chip>Default variant</Chip>
+    """
+  end
+end