feat: Add size variants for menu item [MDS-836] (#791)

coingaming · Nov 28, 2023 · b42bf70 · b42bf70
1 parent f3a980d
commit b42bf70
Show file tree

Hide file tree

Showing 26 changed files with 239 additions and 48 deletions.
diff --git a/lib/moon/components/lego/radio.ex b/lib/moon/components/lego/radio.ex
@@ -3,9 +3,15 @@ defmodule Moon.Components.Lego.Radio do
 
   use Moon.StatelessComponent
 
+  @doc "Is the radio button selected?"
   prop(is_selected, :boolean, from_context: :is_selected)
+  @doc "Additional Tailwind classes"
   prop(class, :css_class)
+  @doc "Additional Tailwind classes for the selected state"
+  prop(selected_class, :css_class)
+  @doc "Id attribute for the DOM element"
   prop(id, :string)
+  @doc "Data-testid attribute for DOM element"
   prop(testid, :string)
 
   def render(assigns) do
@@ -19,10 +25,11 @@ defmodule Moon.Components.Lego.Radio do
         ]),
         "shadow-[0_0_0_1px_inset]"
       }>
-        <span class={
+        <span class={merge([
           (@is_selected && "scale") || "scale-0",
-          "h-2 w-2 rounded-full absolute top-1/2 left-1/2 translate-x-[-50%] translate-y-[-50%] bg-piccolo transition-transform"
-        } />
+          "h-2 w-2 rounded-full absolute top-1/2 left-1/2 translate-x-[-50%] translate-y-[-50%] bg-piccolo transition-transform",
+          @selected_class
+        ])} />
       </span>
     </span>
     """

diff --git a/lib/moon/design/menu_item.ex b/lib/moon/design/menu_item.ex
@@ -3,7 +3,7 @@ defmodule Moon.Design.MenuItem do
   use Moon.StatelessComponent
 
   alias Moon.Components.AsComponent
-  alias Moon.Components.Lego
+  alias Moon.Lego
 
   @doc "Attribute data-testid for the tag"
   prop(testid, :string)
@@ -33,6 +33,8 @@ defmodule Moon.Design.MenuItem do
   prop(attrs, :map, default: %{})
   @doc "Value atrribute if needs to be assigned"
   prop(value, :integer)
+  @doc "Size of menu item"
+  prop(size, :string, values: ["md", "lg", "xl"], default: "md")
   @doc "Inner content of the component, some properties are ignored when set - see above"
   slot(default)
 
@@ -46,10 +48,13 @@ defmodule Moon.Design.MenuItem do
       {=@value}
       class={merge([
         [
-          "flex gap-2 justify-between items-center p-2 bg-transparent rounded-moon-i-sm text-moon-14",
+          "flex justify-between items-center bg-transparent rounded-moon-i-sm text-moon-14",
           "focus:outline-none focus:shadow-focus cursor-pointer hover:bg-heles transition",
           @width,
-          "bg-heles": @is_active || @is_selected
+          "bg-heles": @is_active || @is_selected,
+          "p-2 gap-2": @size == "md",
+          "p-3 gap-3": @size == "lg",
+          "p-4 gap-4": @size == "xl"
         ],
         @class
       ])}

diff --git a/lib/moon/lego/checkbox.ex b/lib/moon/lego/checkbox.ex
@@ -10,7 +10,7 @@ defmodule Moon.Lego.Checkbox do
   @doc "Class to be given to the visible checkbox"
   prop(class, :css_class)
   @doc "If the checkbox has selected mark"
-  prop(is_selected, :boolean)
+  prop(is_selected, :boolean, from_context: :is_selected)
   @doc "On_click event for the checkbox"
   prop(on_click, :event)
 
@@ -21,7 +21,7 @@ defmodule Moon.Lego.Checkbox do
       data-testid={@testid}
       :on-click={@on_click}
       aria-hidden="true"
-      aria-checked={"#{@is_selected}"}
+      aria-checked={(@is_selected && "true") || "false"}
       class={
         merge([
           "flex w-4 h-4 items-center justify-center text-moon-16",
@@ -33,16 +33,17 @@ defmodule Moon.Lego.Checkbox do
       }
     >
       <svg
-        width="1em"
-        height="1em"
-        viewBox="0 0 32 32"
-        fill="none"
         xmlns="http://www.w3.org/2000/svg"
+        width="16"
+        height="16"
+        viewBox="0 0 16 16"
+        fill="none"
         class={"transition-opacity", "opacity-0": !@is_selected}
       >
         <path
-          d="M7 14.941L13.667 22 25 10"
+          d="M3.5 7.47059L6.83333 11L12.5 5"
           stroke="currentColor"
+          stroke-width="1.5"
           stroke-linecap="round"
           stroke-linejoin="round"
         />

diff --git a/lib/moon/lego/chevron_up_down.ex b/lib/moon/lego/chevron_up_down.ex
@@ -0,0 +1,25 @@
+defmodule Moon.Lego.ChevronUpDown do
+  @moduledoc false
+
+  use Moon.StatelessComponent
+
+  alias Moon.Icon
+
+  prop(is_selected, :boolean, from_context: :is_selected)
+  prop(class, :css_class)
+
+  def render(assigns) do
+    ~F"""
+    <Icon
+      name="controls_chevron_down"
+      class={merge([
+        [
+          "transition-transform transition-200",
+          "rotate-180": @is_selected
+        ],
+        @class
+      ])}
+    />
+    """
+  end
+end
diff --git a/lib/moon/lego/multi_title.ex b/lib/moon/lego/multi_title.ex
@@ -0,0 +1,40 @@
+defmodule Moon.Lego.MultiTitle do
+  @moduledoc false
+
+  use Moon.StatelessComponent
+
+  @doc "Additional Tailwind classes"
+  prop(class, :css_class)
+  @doc "Additional Tailwind classes for title"
+  prop(title_class, :css_class)
+  @doc "Additional Tailwind classes for text"
+  prop(text_class, :css_class)
+  @doc "Data-testid attribute for DOM element"
+  prop(testid, :string)
+  @doc "Id attribute for the DOM element"
+  prop(id, :string)
+  @doc "Title of the menu item"
+  prop(title, :string)
+  @doc "Text of the menu item"
+  prop(text, :string)
+  @doc "Default slot"
+  slot(default)
+
+  def render(assigns) do
+    ~F"""
+    <span
+      {=@id}
+      data-testid={@testid}
+      class={merge(["block grow text-start text-bulma overflow-hidden", @class])}
+    >
+      <span :if={@title} class={merge(["block text-bulma text-moon-14", @title_class])}>{@title}</span>
+      <span
+        :if={@text || slot_assigned?(:default)}
+        class={merge(["flex text-trunks text-moon-12", @text_class])}
+      >
+        <span class="flex-1 truncate"><#slot>{@text}</#slot></span>
+      </span>
+    </span>
+    """
+  end
+end
diff --git a/lib/moon/lego/radio.ex b/lib/moon/lego/radio.ex
@@ -15,7 +15,7 @@ defmodule Moon.Lego.Radio do
   def render(assigns) do
     ~F"""
     <span
-      aria-checked={"#{@is_selected}"}
+      aria-checked={(@is_selected && "true") || "false"}
       class={merge([
         "relative flex items-center justify-center w-4 h-4 aspect-square m-1 rounded-full border border-trunks transition-colors",
         "after:content-[\"\"] after:absolute after:w-0 after:h-0 after:rounded-full after:top-1/2 after:left-1/2",

diff --git a/lib/moon/lego/title.ex b/lib/moon/lego/title.ex
@@ -3,12 +3,24 @@ defmodule Moon.Lego.Title do
 
   use Moon.StatelessComponent
 
+  @doc "Title of the menu item"
   prop(title, :string)
+  @doc "Additional Tailwind classes"
+  prop(class, :css_class)
+  @doc "Data-testid attribute for DOM element"
+  prop(testid, :string)
+  @doc "Id attribute for the DOM element"
+  prop(id, :string)
+  @doc "Default slot"
   slot(default)
 
   def render(assigns) do
     ~F"""
-    <span class="block grow text-start text-bulma overflow-hidden">
+    <span
+      {=@id}
+      data-testid={@testid}
+      class={merge(["block grow text-start text-bulma overflow-hidden", @class])}
+    >
       <#slot>{@title}</#slot>
     </span>
     """

diff --git a/lib/moon_web/examples/design/menu_item_example/checkbox.ex b/lib/moon_web/examples/design/menu_item_example/checkbox.ex
@@ -5,7 +5,7 @@ defmodule MoonWeb.Examples.Design.MenuItemExample.Checkbox do
   use MoonWeb, :example
 
   alias Moon.Design.MenuItem
-  alias Moon.Components.Lego
+  alias Moon.Lego
 
   data(selected0, :boolean, default: false)
   data(selected1, :boolean, default: true)
@@ -33,7 +33,7 @@ defmodule MoonWeb.Examples.Design.MenuItemExample.Checkbox do
   def code() do
     """
     alias Moon.Design.MenuItem
-    alias Moon.Components.Lego
+    alias Moon.Lego
 
     data(selected0, :boolean, default: false)
     data(selected1, :boolean, default: true)

diff --git a/lib/moon_web/examples/design/menu_item_example/expand_collapse.ex b/lib/moon_web/examples/design/menu_item_example/expand_collapse.ex
@@ -5,9 +5,7 @@ defmodule MoonWeb.Examples.Design.MenuItemExample.ExpandCollapse do
   use MoonWeb, :example
 
   alias Moon.Design.MenuItem
-  alias Moon.Components.Lego
-
-  alias Moon.Icons.{ControlsChevronDown, ControlsChevronUp}
+  alias Moon.Lego
 
   data(expanded0, :boolean, default: false)
   data(expanded1, :boolean, default: true)
@@ -64,10 +62,8 @@ defmodule MoonWeb.Examples.Design.MenuItemExample.ExpandCollapse do
         </MenuItem>
         <MenuItem>
           <span class="w-3" :on-click="on_expand1" :values={is_selected: !@expanded1}>
-            <ControlsChevronDown :if={!@expanded1} />
-            <ControlsChevronUp :if={@expanded1} />
+            <Lego.ChevronUpDown is_selected={@expanded1} />
           </span>
-
           <span class="bg-gohan w-6 h-6 top-2 left-2 rounded-full flex justify-center items-center">
             <p class="leading-4 font-semibold text-moon-10">CX</p>
           </span>
@@ -189,9 +185,7 @@ defmodule MoonWeb.Examples.Design.MenuItemExample.ExpandCollapse do
   def code() do
     """
     alias Moon.Design.MenuItem
-    alias Moon.Components.Lego
-
-    alias Moon.Icons.{ControlsChevronDown, ControlsChevronUp}
+    alias Moon.Lego
 
     data(expanded0, :boolean, default: false)
     data(expanded1, :boolean, default: true)
@@ -248,10 +242,8 @@ defmodule MoonWeb.Examples.Design.MenuItemExample.ExpandCollapse do
           </MenuItem>
           <MenuItem>
             <span class="w-3" :on-click="on_expand1" :values={is_selected: !@expanded1}>
-              <ControlsChevronDown :if={!@expanded1} />
-              <ControlsChevronUp :if={@expanded1} />
+              <Lego.ChevronUpDown is_selected={@expanded1} />
             </span>
-
             <span class="bg-gohan w-6 h-6 top-2 left-2 rounded-full flex justify-center items-center">
               <p class="leading-4 font-semibold text-moon-10">CX</p>
             </span>

diff --git a/lib/moon_web/examples/design/menu_item_example/multi_line_items.ex b/lib/moon_web/examples/design/menu_item_example/multi_line_items.ex
@@ -5,7 +5,7 @@ defmodule MoonWeb.Examples.Design.MenuItemExample.MultiLineItems do
   use MoonWeb, :example
 
   alias Moon.Design.MenuItem
-  alias Moon.Components.Lego
+  alias Moon.Lego
 
   alias Moon.Icons.{
     TravelAirplane,
@@ -57,7 +57,7 @@ defmodule MoonWeb.Examples.Design.MenuItemExample.MultiLineItems do
   def code() do
     """
     alias Moon.Design.MenuItem
-    alias Moon.Components.Lego
+    alias Moon.Lego
 
     alias Moon.Icons.{
       TravelAirplane,

diff --git a/lib/moon_web/examples/design/menu_item_example/multi_title.ex b/lib/moon_web/examples/design/menu_item_example/multi_title.ex
@@ -5,7 +5,7 @@ defmodule MoonWeb.Examples.Design.MenuItemExample.MultiTitle do
   use MoonWeb, :example
 
   alias Moon.Design.MenuItem
-  alias Moon.Components.Lego
+  alias Moon.Lego
 
   alias Moon.Icons.{SportBadminton, ControlsChevronRight}
 
@@ -47,7 +47,7 @@ defmodule MoonWeb.Examples.Design.MenuItemExample.MultiTitle do
   def code() do
     """
     alias Moon.Design.MenuItem
-    alias Moon.Components.Lego
+    alias Moon.Lego
 
     alias Moon.Icons.{SportBadminton, ControlsChevronRight}
 

diff --git a/lib/moon_web/examples/design/menu_item_example/radio.ex b/lib/moon_web/examples/design/menu_item_example/radio.ex
@@ -5,7 +5,7 @@ defmodule MoonWeb.Examples.Design.MenuItemExample.Radio do
   use MoonWeb, :example
 
   alias Moon.Design.MenuItem
-  alias Moon.Components.Lego
+  alias Moon.Lego
 
   data(selected0, :boolean, default: false)
   data(selected1, :boolean, default: true)