feat: Create Dropdown.Link for Search [MDS-714]

lib/moon/design/dropdown/link.ex

@@ -0,0 +1,60 @@
+defmodule Moon.Design.Dropdown.Link do
+  @moduledoc "Single option for the dropdown component. Renders as a link"
+
+  use Moon.StatelessComponent, slot: "option"
+
+  @doc "Data-testid attribute for button"
+  prop(testid, :string)
+  @doc "Id attribute for buttons"
+  prop(id, :string)
+  @doc "Title to be shown when no default slot is given"
+  prop(title, :string)
+  @doc "Additional CSS classes for the button tag"
+  prop(class, :css_class)
+  @doc "If the button is disabled"
+  prop(disabled, :boolean)
+  @doc "Value of the option, in most cases got from context"
+  prop(value, :any, from_context: :value)
+  @doc "If the option is selected, in most cases got from context"
+  prop(is_selected, :boolean, from_context: :is_selected)
+  @doc "Text size & paddings for the option. Is set by Dropdown.Options in most cases"
+  prop(size, :string, values!: ~w(sm md lg), from_context: :size)
+  @doc "Href for the option"
+  prop(href, :string)
+  @doc "Target attribute for the option"
+  prop(target, :string)
+  @doc "Rel attribute for the option"
+  prop(rel, :string)
+
+  @doc "Inner content of the option"
+  slot(default)
+
+  def render(assigns) do
+    ~F"""
+    <a
+      {=@id}
+      {=@value}
+      role="option"
+      {=@disabled}
+      class={merge([
+        [
+          "bg-transparent text-moon-14 text-bulma whitespace-nowrap flex",
+          "focus:outline-none focus:shadow-focus cursor-pointer hover:bg-heles transition w-full",
+          "bg-heles": @is_selected,
+          "opacity-60 cursor-not-allowed": @disabled,
+          "h-12 p-3 rounded-moon-i-sm": @size == "lg",
+          "h-8 py-1 px-2 rounded-moon-i-xs": @size == "sm",
+          "h-10 py-2 px-3 rounded-moon-i-sm": @size == "md"
+        ],
+        @class
+      ])}
+      data-testid={@testid}
+      {=@href}
+      {=@target}
+      {=@rel}
+    >
+      <#slot>{@title}</#slot>
+    </a>
+    """
+  end
+end

lib/moon/design/search.ex

@@ -8,7 +8,7 @@ defmodule Moon.Design.Search do
 
   import Moon.Helpers.Form, only: [input_classes_light: 1]
 
-  @doc "... format: [%{key: shown_label, value: option_value, disabled: boolean}], disabled is optional"
+  @doc "... format: [page: Module.Name, key: \"Name\"]"
   prop(options, :list, required: true)
   @doc "Set disabled/non-disabled"
   prop(disabled, :boolean)
@@ -28,12 +28,14 @@ defmodule Moon.Design.Search do
   prop(is_open, :boolean)
   @doc "Filtering value for the options, appears in input"
   prop(filter, :string)
-
   @doc "On key up event for the input - use it for filter options"
   prop(on_keyup, :event)
   @doc "Event that fires when smth is chosen from the dropdown menu"
   prop(on_change, :event)
-
+  @doc "Target attribute for the option"
+  prop(target, :string)
+  @doc "Rel attribute for the option"
+  prop(rel, :string)
   @doc "Option for custom stylings - use it to show icons or anything else"
   slot(default)
   @doc "Trigger element for the dropdown, default is Dropdown.Select"
@@ -67,10 +69,16 @@ defmodule Moon.Design.Search do
           </#slot>
         </:trigger>
         <#slot {@default}>
-          <Dropdown.Options {=@on_change} class="pt-0 p-0 mt-0 rounded-tl-none rounded-tr-none">
-            <Dropdown.Option :for={option <- @options} {=@size} disabled={option[:disabled]}>
-              <#slot {@option, option: option}>{option[:key]}</#slot>
-            </Dropdown.Option>
+          <Dropdown.Options
+            option_module={Dropdown.Link}
+            {=@on_change}
+            class="p-2 mt-0 rounded-tl-none rounded-tr-none"
+          >
+            <#slot {@option, option: option} :for={option <- @options}>
+              <Dropdown.Link {=@size} disabled={option[:disabled]} href={option[:page]} {=@target} {=@rel}>
+                {option[:key]}
+              </Dropdown.Link>
+            </#slot>
           </Dropdown.Options>
         </#slot>
       </Dropdown>

lib/moon_web/components/search_button.ex

@@ -20,15 +20,13 @@ defmodule MoonWeb.Components.SearchButton do
       id="moon-search"
       {=@filter}
       on_keyup="change_filter"
-      options={filter_options(@options, @filter)}
+      options={@options |> page_to_href() |> filter_options(@filter)}
       prompt="Search..."
-    >
-      <:option :let={option: option}>
-        <a href={live_path(MoonWeb.Endpoint, option[:page])}>
-          {option[:key]}
-        </a>
-      </:option>
-    </Search>
+    />
     """
   end
+
+  defp page_to_href(options) do
+    options |> Enum.map(&Keyword.put(&1, :page, live_path(MoonWeb.Endpoint, &1[:page])))
+  end
 end

lib/moon_web/examples/design/search_example/custom.ex

@@ -7,6 +7,8 @@ defmodule MoonWeb.Examples.Design.SearchExample.Custom do
 
   alias Moon.Design.Search
   alias Moon.Icon
+  alias Moon.Design.Dropdown
+
   import Moon.Helpers.Form, only: [filter_options: 2]
 
   prop(options, :list, default: MoonWeb.Schema.Link.titles())
@@ -22,13 +24,16 @@ defmodule MoonWeb.Examples.Design.SearchExample.Custom do
       id="custom-search"
       {=@filter}
       on_keyup="change_filter"
-      options={filter_options(@options, @filter)}
+      options={@options |> filter_options(@filter)}
     >
       <:option :let={option: option}>
-        <a href={live_path(MoonWeb.Endpoint, option[:page])}>
+        <Dropdown.Link
+          href={live_path(MoonWeb.Endpoint, option[:page])}
+          class="h-10 py-2 px-3 rounded-moon-i-sm"
+        >
           <Icon class="w-6 h-6" name={option[:icon]} :if={option[:icon]} />
           {option[:key]}
-        </a>
+        </Dropdown.Link>
       </:option>
     </Search>
     """
@@ -38,6 +43,8 @@ defmodule MoonWeb.Examples.Design.SearchExample.Custom do
     """
     alias Moon.Design.Search
     alias Moon.Icon
+    alias Moon.Design.Dropdown
+
     import Moon.Helpers.Form, only: [filter_options: 2]
 
     prop(options, :list, default: MoonWeb.Schema.Link.titles())
@@ -53,13 +60,16 @@ defmodule MoonWeb.Examples.Design.SearchExample.Custom do
         id="custom-search"
         {=@filter}
         on_keyup="change_filter"
-        options={filter_options(@options, @filter)}
+        options={@options |> filter_options(@filter)}
       >
         <:option :let={option: option}>
-          <a href={live_path(MoonWeb.Endpoint, option[:page])}>
+          <Dropdown.Link
+            href={live_path(MoonWeb.Endpoint, option[:page])}
+            class="h-10 py-2 px-3 rounded-moon-i-sm"
+          >
             <Icon class="w-6 h-6" name={option[:icon]} :if={option[:icon]} />
             {option[:key]}
-          </a>
+          </Dropdown.Link>
         </:option>
       </Search>
       \"""

lib/moon_web/examples/design/search_example/default.ex

@@ -1,7 +1,7 @@
 defmodule MoonWeb.Examples.Design.SearchExample.Default do
   @moduledoc false
 
-  use Moon.StatefulComponent
+  use MoonWeb, :stateful_component
   use MoonWeb, :example
 
   alias Moon.Design.Search
@@ -21,11 +21,15 @@ defmodule MoonWeb.Examples.Design.SearchExample.Default do
       id="default-search"
       {=@filter}
       on_keyup="change_filter"
-      options={filter_options(@options, @filter)}
+      options={@options |> page_to_href() |> filter_options(@filter)}
     />
     """
   end
 
+  defp page_to_href(options) do
+    options |> Enum.map(&Keyword.put(&1, :page, live_path(MoonWeb.Endpoint, &1[:page])))
+  end
+
   def code() do
     """
     alias Moon.Design.Search
@@ -36,7 +40,6 @@ defmodule MoonWeb.Examples.Design.SearchExample.Default do
     prop(filter, :string, default: "")
 
     def handle_event("change_filter", %{"value" => filter}, socket) do
-      dbg(filter)
       {:noreply, assign(socket, filter: filter)}
     end
 
@@ -46,10 +49,14 @@ defmodule MoonWeb.Examples.Design.SearchExample.Default do
         id="default-search"
         {=@filter}
         on_keyup="change_filter"
-        options={filter_options(@options, @filter)}
+        options={@options |> page_to_href() |> filter_options(@filter)}
       />
       \"""
     end
+
+    defp page_to_href(options) do
+      options |> Enum.map(&Keyword.put(&1, :page, live_path(MoonWeb.Endpoint, &1[:page])))
+    end
     """
   end
 end