From b42bf70f5ebcfbd2c02819a8764d67a78d549bfa Mon Sep 17 00:00:00 2001 From: Triin Kullisaar <95503530+tkullisaar@users.noreply.github.com> Date: Tue, 28 Nov 2023 10:08:31 +0200 Subject: [PATCH] feat: Add size variants for menu item [MDS-836] (#791) --- lib/moon/components/lego/radio.ex | 13 ++- lib/moon/design/menu_item.ex | 11 +- lib/moon/lego/checkbox.ex | 15 +-- lib/moon/lego/chevron_up_down.ex | 25 ++++ lib/moon/lego/multi_title.ex | 40 +++++++ lib/moon/lego/radio.ex | 2 +- lib/moon/lego/title.ex | 14 ++- .../design/menu_item_example/checkbox.ex | 4 +- .../menu_item_example/expand_collapse.ex | 16 +-- .../menu_item_example/multi_line_items.ex | 4 +- .../design/menu_item_example/multi_title.ex | 4 +- .../design/menu_item_example/radio.ex | 2 +- .../design/menu_item_example/sizes.ex | 108 ++++++++++++++++++ .../design/menu_item_example/with_icon.ex | 4 +- .../design/menu_item_example/with_meta.ex | 4 +- lib/moon_web/pages/design/menu_item_page.ex | 1 + .../test__menu_item_with_title_and_text.snap | 2 +- ...box_role_operates_the_same_as_content.snap | 2 +- .../test_with__lego/checkbox_selected.snap | 2 +- ...own_role_operates_the_same_as_content.snap | 2 +- .../chevron_up_down_selected.snap | 2 +- ...dio_role_operates_the_same_as_content.snap | 2 +- .../test_with__lego/radio_selected.snap | 2 +- ...__title_operates_the_saqme_as_content.snap | 2 +- ...e_title_operates_the_saqme_as_content.snap | 2 +- test/moon/design/menu_item_test.exs | 2 +- 26 files changed, 239 insertions(+), 48 deletions(-) create mode 100644 lib/moon/lego/chevron_up_down.ex create mode 100644 lib/moon/lego/multi_title.ex create mode 100644 lib/moon_web/examples/design/menu_item_example/sizes.ex diff --git a/lib/moon/components/lego/radio.ex b/lib/moon/components/lego/radio.ex index 6f56b07c2..fc373434d 100644 --- 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]" }> - + "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 + ])} /> """ diff --git a/lib/moon/design/menu_item.ex b/lib/moon/design/menu_item.ex index ed8258418..a42d2aa96 100644 --- 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 index 7b94eb5c1..bc76ec191 100644 --- 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 } > diff --git a/lib/moon/lego/chevron_up_down.ex b/lib/moon/lego/chevron_up_down.ex new file mode 100644 index 000000000..d1a2c4e89 --- /dev/null +++ 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""" + + """ + end +end diff --git a/lib/moon/lego/multi_title.ex b/lib/moon/lego/multi_title.ex new file mode 100644 index 000000000..112f4fbba --- /dev/null +++ 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""" + + {@title} + + <#slot>{@text} + + + """ + end +end diff --git a/lib/moon/lego/radio.ex b/lib/moon/lego/radio.ex index e18dd8e32..7770d88b8 100644 --- 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""" + <#slot>{@title} """ diff --git a/lib/moon_web/examples/design/menu_item_example/checkbox.ex b/lib/moon_web/examples/design/menu_item_example/checkbox.ex index 37ccb97b3..a1fb350f9 100644 --- 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 index 56c23ef9c..43e27345c 100644 --- 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 - - + -

CX

 @@ -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 - - + -

CX

 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 index d064a0b4e..31385a881 100644 --- 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 index c37942467..340ffa8b5 100644 --- 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 index f6baf969b..8b474280b 100644 --- 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) diff --git a/lib/moon_web/examples/design/menu_item_example/sizes.ex b/lib/moon_web/examples/design/menu_item_example/sizes.ex new file mode 100644 index 000000000..341bd3a98 --- /dev/null +++ b/lib/moon_web/examples/design/menu_item_example/sizes.ex @@ -0,0 +1,108 @@ +defmodule MoonWeb.Examples.Design.MenuItemExample.Sizes do + @moduledoc false + + use Moon.StatelessComponent + use MoonWeb, :example + + alias Moon.Design.MenuItem + alias Moon.Icon + alias Moon.Lego + alias Moon.Design.Tag + + def render(assigns) do + ~F""" +
+ Default menu item + LG menu item + XL menu item +
+ +
+ + + Default menu item + + + + + LG menu item + + + + XL menu item + +
+ +
+ + + Default menu item + 99 + + + + + LG menu item + 99 + + + + XL menu item + 99 + +
+ """ + end + + def code() do + """ + alias Moon.Design.MenuItem + alias Moon.Icon + alias Moon.Lego + alias Moon.Design.Tag + + ... + +
+ Default menu item + LG menu item + XL menu item +
+ +
+ + + Default menu item + + + + + LG menu item + + + + XL menu item + +
+ +
+ + + Default menu item + 99 + + + + + LG menu item + 99 + + + + XL menu item + 99 + +
+ """ + end +end diff --git a/lib/moon_web/examples/design/menu_item_example/with_icon.ex b/lib/moon_web/examples/design/menu_item_example/with_icon.ex index 3bc5e2fc3..af3d89312 100644 --- a/lib/moon_web/examples/design/menu_item_example/with_icon.ex +++ b/lib/moon_web/examples/design/menu_item_example/with_icon.ex @@ -5,7 +5,7 @@ defmodule MoonWeb.Examples.Design.MenuItemExample.WithIcon do use MoonWeb, :example alias Moon.Design.MenuItem - alias Moon.Components.Lego + alias Moon.Lego alias Moon.Icons.SportBadminton @@ -29,7 +29,7 @@ defmodule MoonWeb.Examples.Design.MenuItemExample.WithIcon do def code() do """ alias Moon.Design.MenuItem - alias Moon.Components.Lego + alias Moon.Lego alias Moon.Icons.SportBadminton diff --git a/lib/moon_web/examples/design/menu_item_example/with_meta.ex b/lib/moon_web/examples/design/menu_item_example/with_meta.ex index cba670007..0b6c7c2a3 100644 --- a/lib/moon_web/examples/design/menu_item_example/with_meta.ex +++ b/lib/moon_web/examples/design/menu_item_example/with_meta.ex @@ -5,7 +5,7 @@ defmodule MoonWeb.Examples.Design.MenuItemExample.WithMeta do use MoonWeb, :example alias Moon.Design.MenuItem - alias Moon.Components.Lego + alias Moon.Lego alias Moon.Icons.ControlsChevronRight @@ -30,7 +30,7 @@ defmodule MoonWeb.Examples.Design.MenuItemExample.WithMeta do def code() do """ alias Moon.Design.MenuItem - alias Moon.Components.Lego + alias Moon.Lego alias Moon.Icons.ControlsChevronRight diff --git a/lib/moon_web/pages/design/menu_item_page.ex b/lib/moon_web/pages/design/menu_item_page.ex index a4adea5c9..1b4d5f707 100644 --- a/lib/moon_web/pages/design/menu_item_page.ex +++ b/lib/moon_web/pages/design/menu_item_page.ex @@ -44,6 +44,7 @@ defmodule MoonWeb.Pages.Design.MenuItemPage do \n\ntitle\n\nsome description here\n\n\n" \ No newline at end of file +"" \ No newline at end of file diff --git a/test/__snapshots__/moon/design/menu_item_test/test_with__lego/checkbox_role_operates_the_same_as_content.snap b/test/__snapshots__/moon/design/menu_item_test/test_with__lego/checkbox_role_operates_the_same_as_content.snap index ad97324f8..c08ea56fa 100644 --- a/test/__snapshots__/moon/design/menu_item_test/test_with__lego/checkbox_role_operates_the_same_as_content.snap +++ b/test/__snapshots__/moon/design/menu_item_test/test_with__lego/checkbox_role_operates_the_same_as_content.snap @@ -1 +1 @@ -"" \ No newline at end of file +"" \ No newline at end of file diff --git a/test/__snapshots__/moon/design/menu_item_test/test_with__lego/checkbox_selected.snap b/test/__snapshots__/moon/design/menu_item_test/test_with__lego/checkbox_selected.snap index 9bea1feed..c7fb5ca2d 100644 --- a/test/__snapshots__/moon/design/menu_item_test/test_with__lego/checkbox_selected.snap +++ b/test/__snapshots__/moon/design/menu_item_test/test_with__lego/checkbox_selected.snap @@ -1 +1 @@ -"" \ No newline at end of file +"" \ No newline at end of file diff --git a/test/__snapshots__/moon/design/menu_item_test/test_with__lego/chevron_up_down_role_operates_the_same_as_content.snap b/test/__snapshots__/moon/design/menu_item_test/test_with__lego/chevron_up_down_role_operates_the_same_as_content.snap index d2c8002ab..0b2291102 100644 --- a/test/__snapshots__/moon/design/menu_item_test/test_with__lego/chevron_up_down_role_operates_the_same_as_content.snap +++ b/test/__snapshots__/moon/design/menu_item_test/test_with__lego/chevron_up_down_role_operates_the_same_as_content.snap @@ -1 +1 @@ -"" \ No newline at end of file +"" \ No newline at end of file diff --git a/test/__snapshots__/moon/design/menu_item_test/test_with__lego/chevron_up_down_selected.snap b/test/__snapshots__/moon/design/menu_item_test/test_with__lego/chevron_up_down_selected.snap index 53b0bf445..04edfd476 100644 --- a/test/__snapshots__/moon/design/menu_item_test/test_with__lego/chevron_up_down_selected.snap +++ b/test/__snapshots__/moon/design/menu_item_test/test_with__lego/chevron_up_down_selected.snap @@ -1 +1 @@ -"" \ No newline at end of file +"" \ No newline at end of file diff --git a/test/__snapshots__/moon/design/menu_item_test/test_with__lego/radio_role_operates_the_same_as_content.snap b/test/__snapshots__/moon/design/menu_item_test/test_with__lego/radio_role_operates_the_same_as_content.snap index 6b937bcc5..3f5a4f1ec 100644 --- a/test/__snapshots__/moon/design/menu_item_test/test_with__lego/radio_role_operates_the_same_as_content.snap +++ b/test/__snapshots__/moon/design/menu_item_test/test_with__lego/radio_role_operates_the_same_as_content.snap @@ -1 +1 @@ -"" \ No newline at end of file +"" \ No newline at end of file diff --git a/test/__snapshots__/moon/design/menu_item_test/test_with__lego/radio_selected.snap b/test/__snapshots__/moon/design/menu_item_test/test_with__lego/radio_selected.snap index 891764eb2..8f66ab54c 100644 --- a/test/__snapshots__/moon/design/menu_item_test/test_with__lego/radio_selected.snap +++ b/test/__snapshots__/moon/design/menu_item_test/test_with__lego/radio_selected.snap @@ -1 +1 @@ -"" \ No newline at end of file +"" \ No newline at end of file diff --git a/test/__snapshots__/moon/design/menu_item_test/test_with__lego/title__title_operates_the_saqme_as_content.snap b/test/__snapshots__/moon/design/menu_item_test/test_with__lego/title__title_operates_the_saqme_as_content.snap index dfefcfd3d..5424480ea 100644 --- a/test/__snapshots__/moon/design/menu_item_test/test_with__lego/title__title_operates_the_saqme_as_content.snap +++ b/test/__snapshots__/moon/design/menu_item_test/test_with__lego/title__title_operates_the_saqme_as_content.snap @@ -1 +1 @@ -"" \ No newline at end of file +"" \ No newline at end of file diff --git a/test/__snapshots__/moon/design/menu_item_test/test_with__lego/title_title_operates_the_saqme_as_content.snap b/test/__snapshots__/moon/design/menu_item_test/test_with__lego/title_title_operates_the_saqme_as_content.snap index 458295223..51cf47115 100644 --- a/test/__snapshots__/moon/design/menu_item_test/test_with__lego/title_title_operates_the_saqme_as_content.snap +++ b/test/__snapshots__/moon/design/menu_item_test/test_with__lego/title_title_operates_the_saqme_as_content.snap @@ -1 +1 @@ -"\nHere I am\n" \ No newline at end of file +"\nHere I am\n" \ No newline at end of file diff --git a/test/moon/design/menu_item_test.exs b/test/moon/design/menu_item_test.exs index 9bed28684..6928b3bfa 100644 --- a/test/moon/design/menu_item_test.exs +++ b/test/moon/design/menu_item_test.exs @@ -4,7 +4,7 @@ defmodule Moon.Design.MenuItemTest do use Surface.LiveViewTest alias Moon.Design.MenuItem - alias Moon.Components.Lego + alias Moon.Lego import MoonWeb.Helpers.Html describe "MenuItem" do