fix: [MDS-638] Carousel arrows, icons page, accordion aria and alert …

…props fix (#699)
coingaming · Aug 21, 2023 · 97cc7a9 · 97cc7a9
1 parent 048905a
commit 97cc7a9
Show file tree

Hide file tree

Showing 18 changed files with 120 additions and 268 deletions.
diff --git a/lib/moon/design/accordion.ex b/lib/moon/design/accordion.ex
@@ -5,17 +5,21 @@ defmodule Moon.Design.Accordion do
 
   import Moon.Helpers.MakeList
 
+  @doc "Data-testid attribute for DOM element"
   prop(testid, :string)
+  @doc "Additional Tailwind classes"
   prop(class, :css_class)
-  prop(disabled, :boolean, default: false)
-
+  @doc "Size of the item, header mostly"
   prop(item_size, :string, values!: ["sm", "md", "lg", "xl"], default: "md")
+  @doc "Content looks outside"
   prop(has_content_outside, :boolean, default: false)
-
+  @doc "Value (List of values) items to be open"
   prop(value, :any, default: [])
+  @doc "Handler for open/close of the item"
   prop(on_change, :event)
+  @doc "Close other items if true"
   prop(is_single_open, :boolean, default: false)
-
+  @doc "Accordion item, see Accordion.Item"
   slot(item, required: true)
 
   def handle_event("on_change_default", _params = %{"value" => index}, socket) do

diff --git a/lib/moon/design/accordion/content.ex b/lib/moon/design/accordion/content.ex
@@ -5,15 +5,21 @@ defmodule Moon.Design.Accordion.Content do
 
   import Moon.Helpers.MergeClass
 
+  @doc "Id attribute for DOM element"
   prop(id, :string)
+  @doc "Data-testid attribute for DOM element"
   prop(testid, :string)
+  @doc "Additional Tailwind classes"
   prop(class, :css_class)
+  @doc "Content of Accordion.Content"
+  slot(default, required: true)
 
+  # Internal API
+  @doc "Will be got from Accordion in most cases"
   prop(size, :string, values!: ["sm", "md", "lg", "xl"], from_context: :size)
+  @doc "Will be got from Accordion in most cases"
   prop(is_content_outside, :boolean, from_context: :is_content_outside)
 
-  slot(default, required: true)
-
   def render(assigns) do
     ~F"""
     <div

diff --git a/lib/moon/design/accordion/header.ex b/lib/moon/design/accordion/header.ex
@@ -6,20 +6,31 @@ defmodule Moon.Design.Accordion.Header do
   alias Moon.Icons.ControlsChevronDown
 
   # public API
+  @doc "Id attribute for DOM element"
   prop(id, :string)
+  @doc "Data-testid attribute for DOM element"
   prop(testid, :string)
+  @doc "Additional Tailwind classes"
   prop(class, :css_class)
+  @doc "Additional Tailwind classes"
   prop(icon_class, :css_class)
+  @doc "Title of Accordion.Item"
   prop(title, :string)
-  prop(disabled, :boolean, from_context: :disabled)
-
+  @doc "Content of Accordion.Header"
   slot(default)
 
   # internal API
+  @doc "Will be got from Accordion.Item in most cases"
+  prop(disabled, :boolean, from_context: :disabled)
+  @doc "Will be got from Accordion in most cases"
   prop(is_open, :boolean, from_context: :is_open)
+  @doc "Will be got from Accordion in most cases"
   prop(size, :string, values!: ["sm", "md", "lg", "xl"], from_context: :size)
+  @doc "Will be got from Accordion in most cases"
   prop(value, :integer, from_context: :value)
+  @doc "Will be got from Accordion in most cases"
   prop(on_change, :event, from_context: :on_change)
+  @doc "Will be got from Accordion in most cases"
   prop(is_content_outside, :boolean, from_context: :is_content_outside)
 
   def render(assigns) do
@@ -29,7 +40,7 @@ defmodule Moon.Design.Accordion.Header do
         {=@id}
         data-testid={@testid}
         type="button"
-        aria-expanded={"#{@is_open}"}
+        aria-expanded={(@is_open && "true") || "false"}
         is-content-outside={"#{@is_content_outside}"}
         size={"#{@size}"}
         :on-click={@on_change}

diff --git a/lib/moon/design/accordion/item.ex b/lib/moon/design/accordion/item.ex
@@ -3,18 +3,27 @@ defmodule Moon.Design.Accordion.Item do
 
   use Moon.StatelessComponent, slot: "item"
 
+  @doc "Id attribute for DOM element"
   prop(id, :string)
+  @doc "Data-testid attribute for DOM element"
   prop(testid, :string)
+  @doc "Additional Tailwind classes"
   prop(class, :css_class)
+  @doc "Disabling accordion item"
+  prop(disabled, :boolean, default: false)
+  @doc "Header of Accordion item, see Accordion.Header"
+  slot(header, required: true)
+  @doc "Content of Accordion item, see Accordion.Content"
+  slot(content, required: true)
 
+  # Internal API
+  @doc "Will be got from Accordion in most cases"
   prop(value, :string, from_context: :value)
+  @doc "Will be got from Accordion in most cases"
   prop(is_open, :boolean, from_context: :is_open)
-  prop(disabled, :boolean, default: false)
+  @doc "Will be got from Accordion in most cases"
   prop(has_content_outside, :boolean, from_context: :has_content_outside)
 
-  slot(header, required: true)
-  slot(content, required: true)
-
   def render(assigns) do
     ~F"""
     <div class={merge(["w-full", @class])} {=@id} data-testid={@testid}>

diff --git a/lib/moon/design/alert.ex b/lib/moon/design/alert.ex
@@ -3,16 +3,21 @@ defmodule Moon.Design.Alert do
 
   use Moon.StatelessComponent
 
+  @doc "Tailwind classes for customization"
   prop(class, :css_class)
-
+  @doc "Id attribute for DOM element"
+  prop(id, :string)
+  @doc "Data-testid attribute for DOM element"
+  prop(testid, :string)
+  @doc "Defult content of Alert item"
   slot(default)
+  @doc "Title of Alert item, see Alert.Title"
   slot(title)
+  @doc "Message of Alert item, see Alert.Message"
   slot(message)
+  @doc "Close button slot of Alert item, see Alert.Close"
   slot(close)
 
-  prop(testid, :string)
-  prop(id, :string)
-
   def render(assigns) do
     ~F"""
     <div

diff --git a/lib/moon/design/alert/close.ex b/lib/moon/design/alert/close.ex
@@ -5,8 +5,13 @@ defmodule Moon.Design.Alert.Close do
 
   alias Moon.Design.Button.IconButton
 
+  @doc "Tailwind classes for customization"
   prop(class, :css_class)
-
+  @doc "Id attribute for DOM element"
+  prop(id, :string)
+  @doc "Data-testid attribute for DOM element"
+  prop(testid, :string)
+  @doc "Event to happen when close button is clicked"
   prop(on_click, :event)
 
   def render(assigns) do
@@ -17,6 +22,8 @@ defmodule Moon.Design.Alert.Close do
       class={merge(["absolute top:4 text-moon-16 text-bulma", @class])}
       icon_only="controls_close"
       on_click={@on_click}
+      {=@id}
+      {=@testid}
     />
     """
   end

diff --git a/lib/moon/design/alert/message.ex b/lib/moon/design/alert/message.ex
@@ -3,13 +3,18 @@ defmodule Moon.Design.Alert.Message do
 
   use Moon.StatelessComponent, slot: "message"
 
+  @doc "Tailwind classes for customization"
   prop(class, :css_class)
-
+  @doc "Id attribute for DOM element"
+  prop(id, :string)
+  @doc "Data-testid attribute for DOM element"
+  prop(testid, :string)
+  @doc "Message of Alert item"
   slot(default)
 
   def render(assigns) do
     ~F"""
-    <p class={merge(["flex gap-3", @class])}>
+    <p {=@id} class={merge(["flex gap-3", @class])} data-testid={@testid}>
       <#slot />
     </p>
     """

diff --git a/lib/moon/design/alert/title.ex b/lib/moon/design/alert/title.ex
@@ -3,13 +3,18 @@ defmodule Moon.Design.Alert.Title do
 
   use Moon.StatelessComponent, slot: "title"
 
+  @doc "Tailwind classes for customization"
   prop(class, :css_class)
-
+  @doc "Id attribute for DOM element"
+  prop(id, :string)
+  @doc "Data-testid attribute for DOM element"
+  prop(testid, :string)
+  @doc "Title of Alert item"
   slot(default)
 
   def render(assigns) do
     ~F"""
-    <h6 class={merge(["flex gap-3 font-medium", @class])}>
+    <h6 {=@id} class={merge(["flex gap-3 font-medium", @class])} data-testid={@testid}>
       <#slot />
     </h6>
     """

diff --git a/lib/moon/design/carousel/carousel_control.ex b/lib/moon/design/carousel/carousel_control.ex
@@ -21,18 +21,23 @@ defmodule Moon.Design.Carousel.CarouselControl do
   @doc "Will be got from Pagination in most cases"
   prop(value, :integer, from_context: :value)
 
+  @doc "Aria label for DOM element"
+  prop(aria_label, :string)
+
   def render(assigns) do
     ~F"""
     <button
       {=@id}
       class={merge([
-        "max-sm:hidden p-2 align-middle shadow-moon-sm rounded-full bg-gohan text-trunks",
-        "text-[8px] leading-[0] no-underline cursor-pointer absolute top-1/2 -translate-y-1/2",
+        "max-sm:hidden align-middle shadow-moon-sm rounded-moon-i-sm bg-gohan text-bulma",
+        "h-8 w-8 font-medium",
+        "leading-[0] no-underline cursor-pointer absolute top-1/2 -translate-y-1/2",
         "origin-[top_center] z-5 disabled:opacity-60 disabled:cursor-not-allowed",
         @class
       ])}
       :on-click={@on_change}
       data-testid={@testid}
+      aria-label={@aria_label}
       {=@value}
     >
       <#slot />

diff --git a/lib/moon/design/carousel/left_arrow.ex b/lib/moon/design/carousel/left_arrow.ex
@@ -28,10 +28,11 @@ defmodule Moon.Design.Carousel.LeftArrow do
     ~F"""
     <CarouselControl
       {=@id}
-      class={merge(["-left-3", "moon-left-arrow", @class])}
+      class={merge(["-left-4", "moon-left-arrow", @class])}
       on_change={@on_change}
       testid={@testid}
       value={@value}
+      aria_label="Scroll left"
     >
       <#slot />
     </CarouselControl>

diff --git a/lib/moon/design/carousel/right_arrow.ex b/lib/moon/design/carousel/right_arrow.ex
@@ -27,11 +27,12 @@ defmodule Moon.Design.Carousel.RightArrow do
   def render(assigns) do
     ~F"""
     <CarouselControl
-      class={merge(["-right-3 left-auto", "moon-right-arrow", @class])}
+      class={merge(["-right-4 left-auto", "moon-right-arrow", @class])}
       on_change={@on_change}
       testid={@testid}
       value={@value}
       {=@id}
+      aria_label="Scroll right"
     >
       <#slot />
     </CarouselControl>

diff --git a/lib/moon/design/chip.ex b/lib/moon/design/chip.ex
@@ -14,6 +14,7 @@ defmodule Moon.Design.Chip do
   prop(variant, :string, values: ["default", "ghost"], default: "default")
   prop(on_click, :event)
   prop(class, :css_class)
+  prop(aria_label, :string)
 
   prop(testid, :string)
   prop(id, :string)
@@ -36,6 +37,7 @@ defmodule Moon.Design.Chip do
       ])}
       :on-click={@on_click}
       data-testid={@testid}
+      aria-label={@aria_label}
     >
       <#slot {@left_icon} />
       <#slot />

diff --git a/lib/moon_web/components/icon_item.ex b/lib/moon_web/components/icon_item.ex
@@ -15,8 +15,12 @@ defmodule MoonWeb.Components.IconItem do
     ~F"""
     <Tooltip>
       <Tooltip.Trigger>
-        <Chip variant="ghost" class="px-0 py-0 text-trunks h-8">
-          <Icon name={@name} font_size="2rem" />
+        <Chip
+          variant="ghost"
+          class="px-0 py-0 text-bulma w-10 flex items-center justify-center"
+          aria_label={@name}
+        >
+          <Icon name={@name} class="text-moon-24" />
         </Chip>
       </Tooltip.Trigger>
       <Tooltip.Content>

diff --git a/lib/moon_web/examples/design/carousel_example/default.ex b/lib/moon_web/examples/design/carousel_example/default.ex
@@ -4,8 +4,7 @@ defmodule MoonWeb.Examples.Design.CarouselExample.Default do
   use Moon.StatelessComponent
   use MoonWeb, :example
 
-  alias Moon.Icons.ControlsChevronRight
-  alias Moon.Icons.ControlsChevronLeft
+  alias Moon.Icon
   alias Moon.Design.Carousel
 
   prop(item_count, :integer, default: 25)
@@ -20,7 +19,7 @@ defmodule MoonWeb.Examples.Design.CarouselExample.Default do
     <div class="relative w-full">
       <Carousel id="default" value={6} step={5}>
         <Carousel.LeftArrow>
-          <ControlsChevronLeft />
+          <Icon name="controls_chevron_left_small" class="text-moon-24" />
         </Carousel.LeftArrow>
         <Carousel.Reel>
           <Carousel.Item class="w-80 h-48" :for={item <- get_items(@item_count)}>
@@ -29,7 +28,7 @@ defmodule MoonWeb.Examples.Design.CarouselExample.Default do
           <Carousel.Indicator />
         </Carousel.Reel>
         <Carousel.RightArrow>
-          <ControlsChevronRight />
+          <Icon name="controls_chevron_right_small" class="text-moon-24" />
         </Carousel.RightArrow>
       </Carousel>
     </div>
@@ -38,8 +37,7 @@ defmodule MoonWeb.Examples.Design.CarouselExample.Default do
 
   def code() do
     """
-    alias Moon.Icons.ControlsChevronRight
-    alias Moon.Icons.ControlsChevronLeft
+    alias Moon.Icon
     alias Moon.Design.Carousel
 
     prop(item_count, :integer, default: 25)
@@ -54,7 +52,7 @@ defmodule MoonWeb.Examples.Design.CarouselExample.Default do
       <div class="relative w-full">
         <Carousel id="default" value={6} step={5}>
           <Carousel.LeftArrow>
-            <ControlsChevronLeft />
+            <Icon name="controls_chevron_left_small" class="text-moon-24" />
           </Carousel.LeftArrow>
           <Carousel.Reel>
             <Carousel.Item class="w-80 h-48" :for={item <- get_items(@item_count)}>
@@ -63,7 +61,7 @@ defmodule MoonWeb.Examples.Design.CarouselExample.Default do
             <Carousel.Indicator />
           </Carousel.Reel>
           <Carousel.RightArrow>
-            <ControlsChevronRight />
+            <Icon name="controls_chevron_right_small" class="text-moon-24" />
           </Carousel.RightArrow>
         </Carousel>
       </div>