[MDS-358] Textarea v2 component

lib/moon/design/button.ex

@@ -42,26 +42,28 @@ defmodule Moon.Design.Button do
     <AsComponent
       {=@as}
       {=@href}
-      class={
-        "flex row justify-center items-center gap-2 relative overflow-hidden active:scale-90 transition-all font-semibold group z-0",
-        "whitespace-nowrap select-none transition duration-200 active:scale-90",
-        @class,
-        Utils.get_button_size_classes(@size),
-        "#{Utils.get_no_icon_padding(@size)}": !@right_icon && !@left_icon,
-        "#{Utils.get_right_icon_paddings(@size)}": @right_icon && !@full_width,
-        "#{Utils.get_left_icon_paddings(@size)}": @left_icon && !@full_width,
-        "#{Utils.get_full_width_padding(@size)}": @full_width,
-        "text-goten bg-piccolo": @variant in ["primary"],
-        "border border-solid bg-transparent text-bulma border-trunks hover:border-bulma":
-          @variant in ["secondary"],
-        "bg-hit text-goten": @variant in ["tertiary"],
-        "bg-none text-trunks hover:text-bulma": @variant in ["ghost"],
-        "w-full": @full_width,
-        "opacity-30 cursor-not-allowed": @disabled,
-        "anim-pulse animate-[pulse2_1.5s_infinite]": @animation == "pulse",
-        "bg-chichi text-goten animate-[error_0.82s_cubic-bezier(0.36,0.07,0.19,0.97)_1_both] anim-error":
-          @animation == "error"
-      }
+      class={merge([
+        [
+          "flex row justify-center items-center gap-2 relative overflow-hidden active:scale-90 transition-all font-semibold group z-0",
+          "whitespace-nowrap select-none transition duration-200 active:scale-90",
+          Utils.get_button_size_classes(@size),
+          "#{Utils.get_no_icon_padding(@size)}": !@right_icon && !@left_icon,
+          "#{Utils.get_right_icon_paddings(@size)}": @right_icon && !@full_width,
+          "#{Utils.get_left_icon_paddings(@size)}": @left_icon && !@full_width,
+          "#{Utils.get_full_width_padding(@size)}": @full_width,
+          "text-goten bg-piccolo": @variant in ["primary"],
+          "border border-solid bg-transparent text-bulma border-trunks hover:border-bulma":
+            @variant in ["secondary"],
+          "bg-hit text-goten": @variant in ["tertiary"],
+          "bg-none text-trunks hover:text-bulma": @variant in ["ghost"],
+          "w-full": @full_width,
+          "opacity-30 cursor-not-allowed": @disabled,
+          "anim-pulse animate-[pulse2_1.5s_infinite]": @animation == "pulse",
+          "bg-chichi text-goten animate-[error_0.82s_cubic-bezier(0.36,0.07,0.19,0.97)_1_both] anim-error":
+            @animation == "error"
+        ],
+        @class
+      ])}
       attrs={
         disabled: @disabled,
         type: @type,

lib/moon/design/form.ex

@@ -0,0 +1,14 @@
+defmodule Moon.Design.Form do
+  @moduledoc false
+
+  use Moon.StatelessComponent
+
+  slot(default, required: true)
+  slot(trigger, required: true)
+
+  def render(assigns) do
+    ~F"""
+    Under construction
+    """
+  end
+end

lib/moon/design/form/addon.ex

@@ -0,0 +1,17 @@
+defmodule Moon.Design.Form.Addon do
+  @moduledoc false
+
+  use Moon.StatelessComponent, slot: "default"
+
+  prop(class, :css_class, default: "absolute top-1 right-1")
+
+  slot(default)
+
+  def render(assigns) do
+    ~F"""
+    <div {=@class}>
+      <#slot />
+    </div>
+    """
+  end
+end

lib/moon/design/form/addon/corner_button.ex

@@ -0,0 +1,20 @@
+defmodule Moon.Design.Form.Addon.CornerButton do
+  @moduledoc false
+
+  use Moon.StatelessComponent, slot: "default"
+
+  alias Moon.Design.Button
+
+  prop(attrs, :map, default: %{})
+  prop(class, :css_class, default: "absolute bottom-3 right-1")
+
+  slot(default)
+
+  def render(assigns) do
+    ~F"""
+    <div {=@class}>
+      <Button {...@attrs}><#slot /></Button>
+    </div>
+    """
+  end
+end

lib/moon/design/form/textarea.ex

@@ -0,0 +1,39 @@
+defmodule Moon.Design.Form.Textarea do
+  @moduledoc false
+
+  use Moon.StatelessComponent
+
+  alias Surface.Components.Form.TextArea
+
+  slot(default)
+
+  prop(class, :css_class)
+  @doc "attributes directly passed to textarea html tag. see Surface.Components.Form.TextArea"
+  prop(attrs, :map, default: %{})
+
+  prop(rows, :string)
+  prop(cols, :string)
+  prop(disabled, :boolean, default: false)
+  prop(placeholder, :string, default: "")
+
+  def render(assigns) do
+    ~F"""
+    <div class="relative w-full">
+      <TextArea
+        class={merge([
+          "appearance-none resize-none w-full p-4 text-moon-16 text-bulma bg-gohan",
+          "rounded-moon-s-sm placeholder:text-trunks outline outline-1 outline-offset-[-1px] outline-beerus",
+          "transition-all focus:outline-2 focus:outline-offset-[-2px] focus:outline-piccolo hover:outline-1",
+          "hover:outline-offset-[-1px] hover:outline-bulma/[0.12]",
+          @disabled && "opacity-30 cursor-not-allowed",
+          @class
+        ])}
+        {=@rows}
+        {=@cols}
+        opts={Map.merge(@attrs, %{disabled: @disabled, placeholder: @placeholder})}
+      />
+      <#slot />
+    </div>
+    """
+  end
+end

lib/moon_web/components/left_menu.ex

@@ -81,6 +81,18 @@ defmodule MoonWeb.Components.LeftMenu do
                             </div>
                           </:content>
                         </Accordion>
+                        <Accordion
+                          is_content_inside={false}
+                          id="left-menu-components-form"
+                          open_by_default={active_page_contains(@active_page, Pages.Design)}
+                        >
+                          <:title>Form</:title>
+                          <:content>
+                            <div class="flex-grow flex flex-col gap-2 pl-8">
+                              <SidebarLink route={Pages.Design.Form.TextareaPage}>Textarea</SidebarLink>
+                            </div>
+                          </:content>
+                        </Accordion>
                         <SidebarLink route={Pages.Design.LoaderPage}>Loader</SidebarLink>
                         <SidebarLink route={Pages.Design.MenuItemPage}>MenuItem</SidebarLink>
                         <SidebarLink route={Pages.Design.TablePage}>Table</SidebarLink>

lib/moon_web/pages/design/form/textarea_page.ex

@@ -0,0 +1,161 @@
+defmodule MoonWeb.Pages.Design.Form.TextareaPage do
+  @moduledoc false
+
+  use MoonWeb, :live_view
+
+  alias Moon.Design.Form.Textarea
+  alias MoonWeb.Components.Page
+  alias MoonWeb.Components.ComponentPageDescription
+  alias MoonWeb.Components.ExampleAndCode
+  alias MoonWeb.Components.PropsTable
+
+  data(breadcrumbs, :any,
+    default: [
+      %{
+        to: "#",
+        name: "Components v2"
+      },
+      %{
+        to: "#",
+        name: "Form"
+      },
+      %{
+        to: "/components/v2/form/textarea",
+        name: "Textarea"
+      }
+    ]
+  )
+
+  data(textarea_props, :list,
+    default: [
+      %{
+        :name => 'class',
+        :type => 'css_class',
+        :required => 'No',
+        :default => '-',
+        :description => 'Additional classes for textarea tag'
+      },
+      %{
+        :name => 'attrs',
+        :type => 'map',
+        :required => 'No',
+        :default => '%{}',
+        :description => 'Additional attributes for textarea tag'
+      },
+      %{
+        :name => 'disabled',
+        :type => 'boolean',
+        :required => 'No',
+        :default => 'false',
+        :description => 'Disabling textarea'
+      },
+      %{
+        :name => 'placeholder',
+        :type => 'string',
+        :required => 'No',
+        :default => '',
+        :description => 'Placeholder for the textarea'
+      }
+    ]
+  )
+
+  data(addon_props, :list, default: [])
+
+  def render(assigns) do
+    ~F"""
+    <Page {=@theme_name} {=@active_page} {=@breadcrumbs} {=@direction}>
+      <ComponentPageDescription is_in_progress title="Textarea">
+        <p>
+          A form control for editing multi-line text.
+        </p>
+      </ComponentPageDescription>
+
+      <ExampleAndCode title="Default" id="loader_1">
+        <:example>
+          <Textarea />
+        </:example>
+
+        <:code>{loader_1_code()}</:code>
+      </ExampleAndCode>
+
+      <ExampleAndCode title="Disabled" id="loader_2">
+        <:example>
+          <Textarea disabled placeholder="Disabled" />
+        </:example>
+
+        <:code>{loader_2_code()}</:code>
+      </ExampleAndCode>
+
+      <ExampleAndCode title="Colours" id="loader_3">
+        <:example>
+          <div class="flex flex-wrap md:flex-nowrap items-center justify-around gap-2 w-full">
+            <Textarea placeholder="Custom text colours" class="text-krillin placeholder:text-whis" rows={1} />
+            <Textarea
+              placeholder="Custom border colours"
+              class="outline-chichi hover:outline-piccolo focus:outline-krillin"
+              rows={1}
+            />
+            <Textarea placeholder="Custom background colour" class="bg-roshi-10" rows={1} />
+          </div>
+          <div class="flex flex-wrap md:flex-nowrap items-center justify-around gap-2 w-full">
+            <Textarea placeholder="Resize vertically" class="resize-y" rows={3} />
+            <Textarea placeholder="Resize horizontally" class="resize-x" rows={3} />
+            <Textarea placeholder="Resize vertically and horizontally" class="resize" rows={3} />
+          </div>
+        </:example>
+
+        <:code>{loader_3_code()}</:code>
+      </ExampleAndCode>
+
+      <PropsTable title="Textarea props" data={@textarea_props} />
+    </Page>
+    """
+  end
+
+  def loader_1_code do
+    """
+    <Textarea />
+    """
+  end
+
+  def loader_2_code do
+    """
+    <Textarea disabled placeholder="Disabled" />
+    """
+  end
+
+  def loader_3_code do
+    """
+    <div class="flex flex-wrap md:flex-nowrap items-center justify-around gap-2 w-full">
+      <Textarea
+        placeholder="Custom text colours"
+        class="text-krillin placeholder:text-whis"
+        rows={1}
+      />
+      <Textarea
+        placeholder="Custom border colours"
+        class="outline-chichi hover:outline-piccolo focus:outline-krillin"
+        rows={1}
+      />
+      <Textarea
+        placeholder="Custom background colour"
+        class="bg-roshi-10"
+        rows={1}
+      />
+    </div>
+    <div class="flex flex-wrap md:flex-nowrap items-center justify-around gap-2 w-full">
+      <Textarea placeholder="Resize vertically" class="resize-y" rows={3} />
+      <Textarea
+        placeholder="Resize horizontally"
+        class="resize-x"
+        rows={3}
+      />
+      <Textarea
+        placeholder="Resize vertically and horizontally"
+        class="resize"
+        rows={3}
+      />
+    </div>
+    """
+  end
+end

lib/moon_web/router.ex

@@ -62,6 +62,7 @@ defmodule MoonWeb.Router do
         live("/components/v2/menu_item", MoonWeb.Pages.Design.MenuItemPage)
         live("/components/v2/table", MoonWeb.Pages.Design.TablePage)
         live("/components/v2/tabs", MoonWeb.Pages.Design.TabsPage)
+        live("/components/v2/form/textarea", MoonWeb.Pages.Design.Form.TextareaPage)
         live("/components/v2/tooltip", MoonWeb.Pages.Design.TooltipPage)
 
         live("/components/accordion", MoonWeb.Pages.Components.AccordionPage)