[MDS-652] Adding responsive crumbs, custom divider and icon

assets/js/breadcrumb.config.js

@@ -0,0 +1,8 @@
+module.exports = {
+    tailwindClassesBreadcrumb: () => {
+      return ["sm", "md", "lg", "xl", "2xl"].map(size => {
+        //options
+        return ["hidden", "inline"].map(cls => [size, cls].join(':'))
+      }).flat()
+    }
+  }

assets/tailwind.config.js

@@ -1,6 +1,7 @@
 const plugin = require("tailwindcss/plugin");
 const { tailwindClassesBottomsheet } = require("./js/bottomsheet.config");
 const { tailwindClassesDropdown } = require("./js/dropdown.config");
+const { tailwindClassesBreadcrumb } = require("./js/breadcrumb.config"); 
 
 //as Variant of using rgba color with opacity
 const withOpacityValue = (rgbColor) => {
@@ -131,7 +132,7 @@ module.exports = {
     "border-beerus",
     "border-bulma",
     "border-trunks",
-  ].concat(tailwindClassesBottomsheet(), tailwindClassesDropdown()),
+  ].concat(tailwindClassesBottomsheet(), tailwindClassesDropdown(), tailwindClassesBreadcrumb()),
   theme: {
     extend: {
       backgroundOpacity: {

lib/moon/design/breadcrumb.ex

@@ -6,19 +6,35 @@ defmodule Moon.Design.Breadcrumb do
   alias Moon.Design.Breadcrumb.Collapsed
   alias Moon.Design.Breadcrumb.Extended
 
+  @doc "Data-testid attribute for DOM element"
+  prop(testid, :string)
+  @doc "Additional Tailwind classes"
+  prop(class, :css_class)
+  @doc "List of crumbs to display - Moon.Design.Breadcrumb.Crumb"
   prop(breadcrumbs, :list, default: [])
-  prop(class, :string, default: nil)
+  @doc "Number of visible crumbs. Additional ones collapse for a streamlined view"
   prop(collapsible_crumbs, :integer, default: 4)
+  @doc "Name of custom icon used as a divider between breadcrumb items"
+  prop(divider, :string)
+  @doc "Name of custom icon used to expand collapsed breadcrumb items"
+  prop(collapsed_icon, :string)
 
-  prop(testid, :string)
+  @doc "Screen size, where breadcrumb items with multiple words are partially replaced with ellipsis (...)"
+  prop(responsive_crumbs_on, :string, values: ~w(sm md lg xl 2xl))
 
   def render(assigns) do
     ~F"""
-    <div {=@id} class={@class} data-testid={@testid}>
+    <div class={@class} data-testid={@testid}>
       {#if Enum.count(@breadcrumbs) > @collapsible_crumbs}
-        <Collapsed id={"#{@id}_inner_breadcrumb"} breadcrumbs={@breadcrumbs} />
+        <Collapsed
+          id={"#{@id}_inner_breadcrumb"}
+          breadcrumbs={@breadcrumbs}
+          {=@divider}
+          {=@collapsed_icon}
+          {=@responsive_crumbs_on}
+        />
       {#else}
-        <Extended breadcrumbs={@breadcrumbs} />
+        <Extended breadcrumbs={@breadcrumbs} {=@divider} {=@responsive_crumbs_on} />
       {/if}
     </div>
     """

lib/moon/design/breadcrumb/collapsed.ex

@@ -3,12 +3,16 @@ defmodule Moon.Design.Breadcrumb.Collapsed do
 
   use Moon.StatefulComponent
 
-  alias Moon.Icons.ArrowsRight
+  alias Moon.Icon
   alias Moon.Design.Button.IconButton
   alias Phoenix.LiveView.JS
 
   prop(breadcrumbs, :list)
 
+  prop(divider, :string)
+  prop(collapsed_icon, :string)
+  prop(responsive_crumbs_on, :string, values: ~w(sm md lg xl 2xl))
+
   data(shown_breadcrumbs, :list, default: [])
   data(collapsed_breadcrumbs, :list, default: [])
 
@@ -40,10 +44,42 @@ defmodule Moon.Design.Breadcrumb.Collapsed do
     <nav aria-label="Breadcrumb">
       <ol class="flex flex-wrap gap-2 items-center text-moon-14">
         <li class="flex items-center gap-2 text-trunks">
-          <span class="text-trunks transition-colors duration-200 hover:text-bulma">
-            <a href={Enum.at(@shown_breadcrumbs, 0).link}>{Enum.at(@shown_breadcrumbs, 0).name}</a>
+          <span class={merge([
+            "transition-colors duration-200 hover:text-bulmas",
+            hidden: @responsive_crumbs_on,
+            "#{breadcrumb_classes(@responsive_crumbs_on)}": @responsive_crumbs_on
+          ])}>
+            <a href={Enum.at(@shown_breadcrumbs, 0).link}>
+              <Icon
+                name={Enum.at(@shown_breadcrumbs, 0).icon}
+                class="text-moon-24"
+                :if={Map.has_key?(Enum.at(@shown_breadcrumbs, 0), :icon) && Enum.at(@shown_breadcrumbs, 0).icon != ""}
+              />
+              {#if Enum.at(@shown_breadcrumbs, 0).name}
+                {Enum.at(@shown_breadcrumbs, 0).name}
+              {/if}
+            </a>
+          </span>
+          <span
+            :if={@responsive_crumbs_on}
+            class={merge([
+              "inline",
+              ellipsed_breadcrumb_classes(@responsive_crumbs_on)
+            ])}
+          >
+            <a href={Enum.at(@shown_breadcrumbs, 0).link}>
+              <Icon
+                name={Enum.at(@shown_breadcrumbs, 0).icon}
+                class="text-moon-24"
+                :if={Map.has_key?(Enum.at(@shown_breadcrumbs, 0), :icon) && Enum.at(@shown_breadcrumbs, 0).icon != ""}
+              />
+              {#if Enum.at(@shown_breadcrumbs, 0).name}
+                {first_crumb_with_ellips(@shown_breadcrumbs)}
+              {/if}
+            </a>
           </span>
-          <ArrowsRight class="rtl:rotate-180" />
+
+          <Icon name={@divider || "arrows_right"} class="rtl:rotate-180" />
         </li>
 
         <li
@@ -52,7 +88,7 @@ defmodule Moon.Design.Breadcrumb.Collapsed do
         >
           <IconButton
             variant="ghost"
-            icon_only="other3_dots_horizontal"
+            icon_only={@collapsed_icon || "other3_dots_horizontal"}
             size="xs"
             on_click={JS.dispatch("moon:toggle-collapsed-breadcrumbs", detail: %{breacrumb_flyout_id: "#{@id}_flyout"})}
           />
@@ -62,25 +98,97 @@ defmodule Moon.Design.Breadcrumb.Collapsed do
           >
             {#for crumb <- @collapsed_breadcrumbs}
               <li class="flex flex-col items-stretch text-bulma text-moon-14 brcrumb-li rounded-sm cursor-pointer hover:bg-heles">
-                <a href={crumb.link}>{crumb.name}</a>
+                <a href={crumb.link}>
+                  <Icon
+                    name={crumb.icon}
+                    class="text-moon-24"
+                    :if={Map.has_key?(crumb, :icon) && crumb.icon != ""}
+                  />
+                  {#if crumb.name}
+                    {crumb.name}
+                  {/if}
+                </a>
               </li>
             {/for}
           </ol>
         </li>
 
         {#for {crumb, index} <- Enum.with_index(@shown_breadcrumbs)}
           <li class="flex items-center gap-2 text-trunks" :if={index > 0}>
-            <ArrowsRight />
-            <span class={
-              "text-trunks transition-colors duration-200 hover:text-bulma",
-              "text-bulma font-medium": index == Enum.count(@shown_breadcrumbs) - 1
-            }>
-              <a href={crumb.link} aria-current={index == Enum.count(@shown_breadcrumbs) - 1 && "page"}>{crumb.name}</a>
+            <Icon name={@divider || "arrows_right"} class="rtl:rotate-180" />
+            <span class={merge([
+              "transition-colors duration-200 hover:text-bulma ",
+              "text-bulma font-medium": index == Enum.count(@shown_breadcrumbs) - 1,
+              hidden: @responsive_crumbs_on,
+              "#{breadcrumb_classes(@responsive_crumbs_on)}": @responsive_crumbs_on
+            ])}>
+              <a href={crumb.link} aria-current={index == Enum.count(@shown_breadcrumbs) - 1 && "page"}>
+                <Icon
+                  name={crumb.icon}
+                  class="text-moon-24"
+                  :if={Map.has_key?(crumb, :icon) && crumb.icon != ""}
+                />
+                {#if crumb.name}
+                  {crumb.name}
+                {/if}
+              </a>
+            </span>
+            <span
+              :if={@responsive_crumbs_on}
+              class={merge([
+                "inline",
+                ellipsed_breadcrumb_classes(@responsive_crumbs_on)
+              ])}
+            >
+              <a href={crumb.link} aria-current={index == Enum.count(@shown_breadcrumbs) - 1 && "page"}>
+                <Icon
+                  name={crumb.icon}
+                  class="text-moon-24"
+                  :if={Map.has_key?(crumb, :icon) && crumb.icon != ""}
+                />
+                {#if crumb.name}
+                  {name_with_ellips(crumb)}
+                {/if}
+              </a>
             </span>
           </li>
         {/for}
       </ol>
     </nav>
     """
   end
+
+  def name_with_ellips(crumb) do
+    [first_word | _] = String.split(crumb.name)
+
+    if String.split(crumb.name) |> tl() != [] do
+      first_word <> "..."
+    else
+      first_word
+    end
+  end
+
+  def first_crumb_with_ellips(shown_breadcrumbs) do
+    breadcrumb = Enum.at(shown_breadcrumbs, 0).name
+
+    [first_word | _] = String.split(breadcrumb)
+
+    if String.split(breadcrumb) |> tl() != [] do
+      first_word <> "..."
+    else
+      first_word
+    end
+  end
+
+  defp breadcrumb_classes(nil), do: []
+
+  defp breadcrumb_classes(size) do
+    ~w(inline) |> Enum.map(&"#{size}:#{&1}")
+  end
+
+  defp ellipsed_breadcrumb_classes(nil), do: []
+
+  defp ellipsed_breadcrumb_classes(size) do
+    ~w(hidden) |> Enum.map(&"#{size}:#{&1}")
+  end
 end

lib/moon/design/breadcrumb/crumb.ex

@@ -1,5 +1,5 @@
 defmodule Moon.Design.Breadcrumb.Crumb do
   @moduledoc false
 
-  defstruct name: "", link: ""
+  defstruct name: "", link: "", icon: ""
 end

lib/moon/design/breadcrumb/extended.ex

@@ -3,27 +3,80 @@ defmodule Moon.Design.Breadcrumb.Extended do
 
   use Moon.StatelessComponent
 
-  alias Moon.Icons.ArrowsRight
+  alias Moon.Icon
 
   prop(breadcrumbs, :list)
+  prop(divider, :string)
+  prop(responsive_crumbs_on, :string, values: ~w(sm md lg xl 2xl))
 
   def render(assigns) do
     ~F"""
     <nav aria-label="Breadcrumb">
       <ol class="flex flex-wrap gap-2 items-center text-moon-14">
         {#for {crumb, index} <- Enum.with_index(@breadcrumbs)}
           <li class="flex items-center gap-2 text-trunks">
-            <ArrowsRight class="rtl:rotate-180" :if={index != 0} />
-            <span class={
+            <Icon name={@divider || "arrows_right"} class="rtl:rotate-180" :if={index != 0} />
+            <span class={merge([
               "transition-colors duration-200 hover:text-bulma",
-              "text-bulma font-medium": index == Enum.count(@breadcrumbs) - 1
-            }>
-              <a href={crumb.link} aria-current={index == Enum.count(@breadcrumbs) - 1 && "page"}>{crumb.name}</a>
+              "text-bulma font-medium": index == Enum.count(@breadcrumbs) - 1,
+              hidden: @responsive_crumbs_on,
+              "#{breadcrumb_classes(@responsive_crumbs_on)}": @responsive_crumbs_on
+            ])}>
+              <a href={crumb.link} aria-current={index == Enum.count(@breadcrumbs) - 1 && "page"}>
+                <Icon
+                  name={crumb.icon}
+                  class="text-moon-24"
+                  :if={Map.has_key?(crumb, :icon) && crumb.icon != ""}
+                />
+                {#if crumb.name}
+                  {crumb.name}
+                {/if}
+              </a>
+            </span>
+            <span
+              :if={@responsive_crumbs_on}
+              class={merge([
+                "inline",
+                ellipsed_breadcrumb_classes(@responsive_crumbs_on)
+              ])}
+            >
+              <a href={crumb.link} aria-current={index == Enum.count(@breadcrumbs) - 1 && "page"}>
+                <Icon
+                  name={crumb.icon}
+                  class="text-moon-24"
+                  :if={Map.has_key?(crumb, :icon) && crumb.icon != ""}
+                />
+                {#if crumb.name}
+                  {name_with_ellips(crumb)}
+                {/if}
+              </a>
             </span>
           </li>
         {/for}
       </ol>
     </nav>
     """
   end
+
+  def name_with_ellips(crumb) do
+    [first_word | _] = String.split(crumb.name)
+
+    if String.split(crumb.name) |> tl() != [] do
+      first_word <> "..."
+    else
+      first_word
+    end
+  end
+
+  defp breadcrumb_classes(nil), do: []
+
+  defp breadcrumb_classes(size) do
+    ~w(inline) |> Enum.map(&"#{size}:#{&1}")
+  end
+
+  defp ellipsed_breadcrumb_classes(nil), do: []
+
+  defp ellipsed_breadcrumb_classes(size) do
+    ~w(hidden) |> Enum.map(&"#{size}:#{&1}")
+  end
 end