Skip to content
New issue

Have a question about this project? Sign up for a free GitHub account to open an issue and contact its maintainers and the community.

Sign up for GitHub

By clicking “Sign up for GitHub”, you agree to our terms of service and privacy statement. We’ll occasionally send you account related emails.

Already on GitHub? Sign in to your account

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

Merged
merged 2 commits into from
Aug 29, 2023
Merged

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

Show file tree
Hide file tree
Changes from 1 commit
Commits
Show all changes
2 commits
Select commit Hold shift + click to select a range
9f523b6
add responsive crumbs, custom divider and icon
tkullisaar Aug 28, 2023
5b6268a
refactoring + making responsive items screen size changeable
tkullisaar Aug 29, 2023
File filter

Filter by extension

Filter by extension
Conversations
Failed to load comments.
Loading
Jump to
Jump to file
Failed to load files.
Loading
Diff view
Diff view
26 changes: 21 additions & 5 deletions lib/moon/design/breadcrumb.ex
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -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 "When enabled, breadcrumb items with multiple words are partially replaced with ellipsis (...) on smaller screens"
prop(responsive_crumbs, :boolean)

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}
/>
{#else}
<Extended breadcrumbs={@breadcrumbs} />
<Extended breadcrumbs={@breadcrumbs} {=@divider} {=@responsive_crumbs} />
{/if}
</div>
"""
Expand Down
143 changes: 129 additions & 14 deletions lib/moon/design/breadcrumb/collapsed.ex
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -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, :boolean)

data(shown_breadcrumbs, :list, default: [])
data(collapsed_breadcrumbs, :list, default: [])

Expand Down Expand Up @@ -40,10 +44,49 @@ 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>
<ArrowsRight class="rtl:rotate-180" />
{#if @responsive_crumbs}
<span class={
"transition-colors duration-200 hover:text-bulma",
"hidden block",
"sm:inline"
}>
<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 class={"sm:hidden", "inline block"}>
<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>
{#else}
<span class="text-trunks transition-colors duration-200 hover:text-bulma">
<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>
{/if}
<Icon name={@divider || "arrows_right"} class="rtl:rotate-180" />
</li>

<li
Expand All @@ -52,7 +95,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"})}
/>
Expand All @@ -62,25 +105,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>
</span>
<Icon name={@divider || "arrows_right"} class="rtl:rotate-180" />
{#if @responsive_crumbs}
<span class={
"transition-colors duration-200 hover:text-bulma",
"hidden block",
"sm:inline",
"text-bulma font-medium": index == Enum.count(@shown_breadcrumbs) - 1
}>
<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 class={"sm:hidden", "inline block"}>
<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>
{#else}
<span class={
"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"}>
<Icon
name={crumb.icon}
class="text-moon-24"
:if={Map.has_key?(crumb, :icon) && crumb.icon != ""}
/>
{#if crumb.name}
{crumb.name}
{/if}
</a>
</span>
{/if}
</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
end
2 changes: 1 addition & 1 deletion lib/moon/design/breadcrumb/crumb.ex
View file
Open in desktop
Original file line number Diff line number Diff line change
@@ -1,5 +1,5 @@
defmodule Moon.Design.Breadcrumb.Crumb do
@moduledoc false

defstruct name: "", link: ""
defstruct name: "", link: "", icon: ""
end
69 changes: 61 additions & 8 deletions lib/moon/design/breadcrumb/extended.ex
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -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, :boolean)

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={
"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>
</span>
<Icon name={@divider || "arrows_right"} class="rtl:rotate-180" :if={index != 0} />
{#if @responsive_crumbs}
<span class={
"transition-colors duration-200 hover:text-bulma",
"hidden block",
"sm:inline",
"text-bulma font-medium": index == Enum.count(@breadcrumbs) - 1
}>
<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 class={"sm:hidden", "inline block"}>
<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>
{#else}
<span class={
"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"}>
<Icon
name={crumb.icon}
class="text-moon-24"
:if={Map.has_key?(crumb, :icon) && crumb.icon != ""}
/>
{#if crumb.name}
{crumb.name}
{/if}
</a>
</span>
{/if}
</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
end
Loading