feat: Add Avatar and Buttons to Parts [MDS-749] (#748)

coingaming · Oct 17, 2023 · 4293854 · 4293854
1 parent 2a9fee6
commit 4293854
Show file tree

Hide file tree

Showing 25 changed files with 456 additions and 109 deletions.
diff --git a/lib/moon/design/button.ex b/lib/moon/design/button.ex
@@ -3,66 +3,13 @@ defmodule Moon.Design.Button do
 
   use Moon.StatelessComponent
 
+  use Moon.Design.Button.Properties
+
   alias Moon.Components.AsComponent
   alias Moon.Design.Button.Utils
   alias Moon.Icon
   alias Moon.Design.Loader
 
-  @doc "Visual/Logical variant of button"
-  prop(variant, :string,
-    values: ["fill", "outline", "ghost", "primary", "secondary", "tertiary"],
-    default: "fill"
-  )
-
-  @doc "Size of button"
-  prop(size, :string, values: ["xs", "sm", "md", "lg", "xl"], default: "md")
-  @doc "Rendered HTML element"
-  prop(as, :string, values!: ~w(a button), default: "button")
-  @doc "A href attribute when prop as=\"a\""
-  prop(href, :string)
-  @doc "Full width button"
-  prop(full_width, :boolean)
-  @doc "Disabled button"
-  prop(disabled, :boolean)
-  @doc "Animation of button"
-  prop(animation, :string, values: ~w(progress success error pulse))
-  @doc "Additional Tailwind classes"
-  prop(class, :css_class)
-  @doc "Additional Tailwind classes for hover background"
-  prop(hover_bg_class, :css_class)
-  @doc "Type attribute for DOM element"
-  prop(type, :string, default: "button")
-  @doc "Form attribute for DOM element"
-  prop(form, :string)
-  @doc "On click event"
-  prop(on_click, :event)
-  @doc "list of additional values to associate with the DOM element"
-  prop(values, :keyword, default: [])
-  @doc "Value attribute for DOM element"
-  prop(value, :string)
-  @doc "Left icon"
-  prop(left_icon, :string)
-  @doc "Right icon"
-  prop(right_icon, :string)
-  @doc "Id attribute for DOM element"
-  prop(id, :string)
-  @doc "Data-testid attribute for DOM element"
-  prop(testid, :string)
-  @doc "Additional attributes for DOM element"
-  prop(attrs, :keyword, default: [])
-  @doc "Aria label attribute for DOM element"
-  prop(aria_label, :string)
-  @doc "Target attribute for DOM element"
-  prop(target, :string)
-  @doc "Rel attribute for DOM element"
-  prop(rel, :string)
-  @doc "Inner content of the component"
-  slot(default)
-  @doc "Right icon slot"
-  slot(right_icon_slot)
-  @doc "Left icon slot"
-  slot(left_icon_slot)
-
   def render(assigns) do
     ~F"""
     <AsComponent

diff --git a/lib/moon/design/button/icon_button.ex b/lib/moon/design/button/icon_button.ex
@@ -3,60 +3,13 @@ defmodule Moon.Design.Button.IconButton do
 
   use Moon.StatelessComponent
 
+  use Moon.Design.Button.IconButtonProperties
+
   alias Moon.Components.AsComponent
   alias Moon.Icon
   alias Moon.Design.Loader
   alias Moon.Design.Button.Utils
 
-  @doc "Visual/Logical variant of button"
-  prop(variant, :string,
-    values: ["fill", "outline", "ghost", "primary", "secondary", "tertiary"],
-    default: "fill"
-  )
-
-  @doc "Size of button"
-  prop(size, :string, values: ["xs", "sm", "md", "lg", "xl"], default: "md")
-  @doc "Rendered HTML element"
-  prop(as, :string, values!: ~w(a button), default: "button")
-  @doc "A href attribute when prop as=\"a\""
-  prop(href, :string)
-  @doc "Disabled button"
-  prop(disabled, :boolean)
-  @doc "Animation of button"
-  prop(animation, :string, values: ~w(progress success error pulse))
-  @doc "Additional Tailwind classes"
-  prop(class, :css_class)
-  @doc "Icon. To be deprecated. Use prop \"icon\" instead."
-  prop(icon_only, :string)
-  @doc "Icon"
-  prop(icon, :string)
-  @doc "Additional Tailwind classes for hover background"
-  prop(hover_bg_class, :css_class)
-  @doc "Type attribute for DOM element"
-  prop(type, :string, default: "button")
-  @doc "Form attribute for DOM element"
-  prop(form, :string)
-  @doc "On click event"
-  prop(on_click, :event)
-  @doc "list of additional values to associate with the DOM element"
-  prop(values, :keyword, default: [])
-  @doc "Value attribute for DOM element"
-  prop(value, :string)
-  @doc "Id attribute for DOM element"
-  prop(id, :string)
-  @doc "Data-testid attribute for DOM element"
-  prop(testid, :string)
-  @doc "Additional attributes for DOM element"
-  prop(attrs, :keyword, default: [])
-  @doc "Aria label attribute for DOM element"
-  prop(aria_label, :string)
-  @doc "Target attribute for DOM element"
-  prop(target, :string)
-  @doc "Rel attribute for DOM element"
-  prop(rel, :string)
-  @doc "Slot for customizations"
-  slot(default)
-
   def render(assigns) do
     ~F"""
     <AsComponent

diff --git a/lib/moon/design/button/icon_button_properties.ex b/lib/moon/design/button/icon_button_properties.ex
@@ -0,0 +1,56 @@
+defmodule Moon.Design.Button.IconButtonProperties do
+  @moduledoc "Module for putting button properties in one place"
+
+  defmacro __using__(_opts \\ []) do
+    quote do
+      @doc "Visual/Logical variant of button"
+      prop(variant, :string,
+        values: ["fill", "outline", "ghost", "primary", "secondary", "tertiary"],
+        default: "fill"
+      )
+
+      @doc "Size of button"
+      prop(size, :string, values: ["xs", "sm", "md", "lg", "xl"], default: "md")
+      @doc "Rendered HTML element"
+      prop(as, :string, values!: ~w(a button), default: "button")
+      @doc "A href attribute when prop as=\"a\""
+      prop(href, :string)
+      @doc "Disabled button"
+      prop(disabled, :boolean)
+      @doc "Animation of button"
+      prop(animation, :string, values: ~w(progress success error pulse))
+      @doc "Additional Tailwind classes"
+      prop(class, :css_class)
+      @doc "Icon. To be deprecated. Use prop \"icon\" instead."
+      prop(icon_only, :string)
+      @doc "Icon"
+      prop(icon, :string)
+      @doc "Additional Tailwind classes for hover background"
+      prop(hover_bg_class, :css_class)
+      @doc "Type attribute for DOM element"
+      prop(type, :string, default: "button")
+      @doc "Form attribute for DOM element"
+      prop(form, :string)
+      @doc "On click event"
+      prop(on_click, :event)
+      @doc "list of additional values to associate with the DOM element"
+      prop(values, :keyword, default: [])
+      @doc "Value attribute for DOM element"
+      prop(value, :string)
+      @doc "Id attribute for DOM element"
+      prop(id, :string)
+      @doc "Data-testid attribute for DOM element"
+      prop(testid, :string)
+      @doc "Additional attributes for DOM element"
+      prop(attrs, :keyword, default: [])
+      @doc "Aria label attribute for DOM element"
+      prop(aria_label, :string)
+      @doc "Target attribute for DOM element"
+      prop(target, :string)
+      @doc "Rel attribute for DOM element"
+      prop(rel, :string)
+      @doc "Slot for customizations"
+      slot(default)
+    end
+  end
+end
diff --git a/lib/moon/design/button/properties.ex b/lib/moon/design/button/properties.ex
@@ -0,0 +1,62 @@
+defmodule Moon.Design.Button.Properties do
+  @moduledoc "Module for putting button properties in one place"
+
+  defmacro __using__(_opts \\ []) do
+    quote do
+      @doc "Visual/Logical variant of button"
+      prop(variant, :string,
+        values: ["fill", "outline", "ghost", "primary", "secondary", "tertiary"],
+        default: "fill"
+      )
+
+      @doc "Size of button"
+      prop(size, :string, values: ["xs", "sm", "md", "lg", "xl"], default: "md")
+      @doc "Rendered HTML element"
+      prop(as, :string, values!: ~w(a button), default: "button")
+      @doc "A href attribute when prop as=\"a\""
+      prop(href, :string)
+      @doc "Full width button"
+      prop(full_width, :boolean)
+      @doc "Disabled button"
+      prop(disabled, :boolean)
+      @doc "Animation of button"
+      prop(animation, :string, values: ~w(progress success error pulse))
+      @doc "Additional Tailwind classes"
+      prop(class, :css_class)
+      @doc "Additional Tailwind classes for hover background"
+      prop(hover_bg_class, :css_class)
+      @doc "Type attribute for DOM element"
+      prop(type, :string, default: "button")
+      @doc "Form attribute for DOM element"
+      prop(form, :string)
+      @doc "On click event"
+      prop(on_click, :event)
+      @doc "list of additional values to associate with the DOM element"
+      prop(values, :keyword, default: [])
+      @doc "Value attribute for DOM element"
+      prop(value, :string)
+      @doc "Left icon"
+      prop(left_icon, :string)
+      @doc "Right icon"
+      prop(right_icon, :string)
+      @doc "Id attribute for DOM element"
+      prop(id, :string)
+      @doc "Data-testid attribute for DOM element"
+      prop(testid, :string)
+      @doc "Additional attributes for DOM element"
+      prop(attrs, :keyword, default: [])
+      @doc "Aria label attribute for DOM element"
+      prop(aria_label, :string)
+      @doc "Target attribute for DOM element"
+      prop(target, :string)
+      @doc "Rel attribute for DOM element"
+      prop(rel, :string)
+      @doc "Inner content of the component"
+      slot(default)
+      @doc "Right icon slot"
+      slot(right_icon_slot)
+      @doc "Left icon slot"
+      slot(left_icon_slot)
+    end
+  end
+end
diff --git a/lib/moon/helpers/merge_class.ex b/lib/moon/helpers/merge_class.ex
@@ -33,6 +33,10 @@ defmodule Moon.Helpers.MergeClass do
   defp group_name("font-" <> family) when family in ~w(averta dm-sans grotesk),
     do: "prop_font_family"
 
+  defp group_name("bg-" <> _rest) do
+    "background"
+  end
+
   defp group_name(class) do
     class
     # removing square brackets bc of "top-[-7px]"

diff --git a/lib/moon/parts/button.ex b/lib/moon/parts/button.ex
@@ -0,0 +1,45 @@
+defmodule Moon.Parts.Button do
+  @moduledoc false
+
+  use Moon.StatelessComponent
+
+  use Moon.Design.Button.Properties
+
+  alias Moon.Design.Button
+
+  @doc "Background tailwind class(es)"
+  prop(bg_class, :css_class, default: "bg-popo")
+
+  def render(assigns) do
+    ~F"""
+    <Button
+      {=@as}
+      {=@variant}
+      {=@size}
+      {=@full_width}
+      {=@disabled}
+      {=@animation}
+      {=@type}
+      {=@form}
+      {=@hover_bg_class}
+      {=@left_icon}
+      {=@right_icon}
+      {=@href}
+      {=@id}
+      {=@on_click}
+      {=@testid}
+      {=@aria_label}
+      {=@values}
+      {=@value}
+      {=@target}
+      {=@rel}
+      {=@attrs}
+      class={"rounded-moon-s-xx rounded-full", @bg_class, @class}
+    >
+      <#slot {@left_icon_slot} />
+      <#slot />
+      <#slot {@right_icon_slot} />
+    </Button>
+    """
+  end
+end
diff --git a/lib/moon/parts/button/error.ex b/lib/moon/parts/button/error.ex
@@ -0,0 +1,11 @@
+defmodule Moon.Parts.Button.Error do
+  @moduledoc false
+
+  use Moon.StatelessComponent
+  use Moon.Design.Button.Properties
+
+  @doc "Background tailwind class(es)"
+  prop(bg_class, :css_class, default: "bg-chichi-10 text-chichi")
+
+  defdelegate render(assigns), to: Moon.Parts.Button
+end
diff --git a/lib/moon/parts/button/gray.ex b/lib/moon/parts/button/gray.ex
@@ -0,0 +1,11 @@
+defmodule Moon.Parts.Button.Gray do
+  @moduledoc false
+
+  use Moon.StatelessComponent
+  use Moon.Design.Button.Properties
+
+  @doc "Background tailwind class(es)"
+  prop(bg_class, :css_class, default: "bg-gohan text-bulma border border-beerus")
+
+  defdelegate render(assigns), to: Moon.Parts.Button
+end
diff --git a/lib/moon/parts/button/success.ex b/lib/moon/parts/button/success.ex
@@ -0,0 +1,11 @@
+defmodule Moon.Parts.Button.Success do
+  @moduledoc false
+
+  use Moon.StatelessComponent
+  use Moon.Design.Button.Properties
+
+  @doc "Background tailwind class(es)"
+  prop(bg_class, :css_class, default: "bg-roshi-10 text-roshi")
+
+  defdelegate render(assigns), to: Moon.Parts.Button
+end
diff --git a/lib/moon/parts/button/warning.ex b/lib/moon/parts/button/warning.ex
@@ -0,0 +1,11 @@
+defmodule Moon.Parts.Button.Warning do
+  @moduledoc false
+
+  use Moon.StatelessComponent
+  use Moon.Design.Button.Properties
+
+  @doc "Background tailwind class(es)"
+  prop(bg_class, :css_class, default: "bg-krillin-10 text-krillin")
+
+  defdelegate render(assigns), to: Moon.Parts.Button
+end
diff --git a/lib/moon/parts/button/white.ex b/lib/moon/parts/button/white.ex
@@ -0,0 +1,11 @@
+defmodule Moon.Parts.Button.White do
+  @moduledoc false
+
+  use Moon.StatelessComponent
+  use Moon.Design.Button.Properties
+
+  @doc "Background tailwind class(es)"
+  prop(bg_class, :css_class, default: "bg-goku text-bulma border border-beerus")
+
+  defdelegate render(assigns), to: Moon.Parts.Button
+end