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

fix: align the Accordion component with React [MDS-110] #285

Merged
merged 8 commits into from
Jun 10, 2022
Merged

fix: align the Accordion component with React [MDS-110] #285

Show file tree
Hide file tree
Changes from all commits
Commits
Show all changes
8 commits
Select commit Hold shift + click to select a range
e1383e4
Accordion and doc fixes
alexisdevtailor Jun 9, 2022
a4f677d
Added with_button and fix click area
alexisdevtailor Jun 9, 2022
953d255
Disable open prop
alexisdevtailor Jun 9, 2022
7ec6c7a
Added is_content_inside
alexisdevtailor Jun 9, 2022
ce6f137
Accordion additional controls
alexisdevtailor Jun 9, 2022
70099dc
Sizes prop
alexisdevtailor Jun 9, 2022
e889bdb
Sizes example content outside
alexisdevtailor Jun 9, 2022
fc7e88c
Updated docs
alexisdevtailor Jun 9, 2022
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
3 changes: 2 additions & 1 deletion assets/tailwind.config.js
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -116,7 +116,8 @@ module.exports = {
'trunks-100': 'var(--color--trunks-100)',
black: "#000",
hover: 'rgba(34, 34, 37, 0.12)',
'primary-hover': 'rgba(0, 0, 0, 0.08)'
'primary-hover': 'rgba(0, 0, 0, 0.08)',
'slate-200': 'rgb(226 232 240)'
},
},
plugins: [
Expand Down
3 changes: 2 additions & 1 deletion lib/moon/autolayouts/pull_aside.ex
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -4,13 +4,14 @@ defmodule Moon.Autolayouts.PullAside do
use Moon.StatelessComponent

prop class, :css_class
prop left_grow, :boolean, default: false
slot left
slot right

def render(assigns) do
~F"""
<div class={"flex justify-between", @class}>
<div>
<div class={"flex items-center", grow: @left_grow}>
{#if slot_assigned?(:left)}
<#slot name="left" />
{/if}
Expand Down
126 changes: 84 additions & 42 deletions lib/moon/components/accordion.ex
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -12,59 +12,101 @@ defmodule Moon.Components.Accordion do
prop id, :string
prop class, :css_class
prop open_by_default, :boolean, default: false
prop is_content_inside, :boolean, default: true
prop with_button, :boolean, default: true
prop disable_open, :boolean, default: false
prop size, :string, values: ["small", "medium", "large", "xlarge"], default: "medium"
slot title
slot header_controls
slot content

def render(assigns) do
~F"""
<div id={@id} class={"bg-gohan-100 rounded-xl relative", @class}>
<PullAside class="p-4">
<:left>
<div :on-click={toggle_content(@id)}>
<Heading class="cursor-pointer"><#slot name="title" /></Heading>
</div>
</:left>
<:right>
<LeftToRight>
<#slot name="header_controls" />
<div
:on-click={toggle_content(@id)}
id={@id <> "-arrow"}
class={
"rotate-0": !@open_by_default,
"rotate-180": @open_by_default
}
>
<ControlsChevronUp font_size="1.25rem" class="text-piccolo-100 cursor-pointer" />
<div id={@id}>
<div class={
"rounded relative bg-gohan-100",
@class
}>
<PullAside class={get_padding(@size)} left_grow>
<:left>
<div :on-click={toggle_content(@id, @disable_open)} class="flex items-center grow">
<Heading class={"cursor-pointer items-center grow #{font_class(@size)}"}><#slot name="title" /></Heading>
</div>
</:left>
<:right>
<div class={hidden: !@with_button}>
<LeftToRight>
<#slot name="header_controls" />
<div
:on-click={toggle_content(@id, @disable_open)}
id={@id <> "-arrow"}
class={
"rotate-0": !@open_by_default,
"rotate-180": @open_by_default
}
>
<ControlsChevronUp font_size="1.25rem" class="text-piccolo-100 cursor-pointer" />
</div>
</LeftToRight>
</div>
</LeftToRight>
</:right>
</PullAside>
<div id={@id <> "-content"} class={"p-4", hidden: !@open_by_default}>
<#slot name="content" />
</:right>
</PullAside>
{#if @is_content_inside}
<div id={@id <> "-content"} class={get_padding(@size), hidden: !@open_by_default}>
<#slot name="content" />
</div>
{/if}
</div>

{#if !@is_content_inside}
<div
id={@id <> "-content"}
class={get_padding(@size), "bg-transparent", hidden: !@open_by_default}
>
<#slot name="content" />
</div>
{/if}
</div>
"""
end

def toggle_content(id) do
JS.toggle(to: "#" <> id <> "-content")
|> JS.remove_class(
"rotate-0",
to: "#" <> id <> "-arrow.rotate-0"
)
|> JS.add_class(
"rotate-0",
to: "#" <> id <> "-arrow:not(.rotate-0)"
)
|> JS.remove_class(
"rotate-180",
to: "#" <> id <> "-arrow.rotate-180"
)
|> JS.add_class(
"rotate-180",
to: "#" <> id <> "-arrow:not(.rotate-180)"
)
def toggle_content(id, disable_open) do
if !disable_open do
JS.toggle(to: "#" <> id <> "-content")
|> JS.remove_class(
"rotate-0",
to: "#" <> id <> "-arrow.rotate-0"
)
|> JS.add_class(
"rotate-0",
to: "#" <> id <> "-arrow:not(.rotate-0)"
)
|> JS.remove_class(
"rotate-180",
to: "#" <> id <> "-arrow.rotate-180"
)
|> JS.add_class(
"rotate-180",
to: "#" <> id <> "-arrow:not(.rotate-180)"
)
end
end

defp get_padding(size) do
case size do
"small" -> "p-1"
"large" -> "p-3"
"xlarge" -> "p-4"
_ -> "p-2"
end
end

defp font_class(size) do
case size do
"small" -> "uppercase text-[10px]"
"large" -> "text-sm"
"xlarge" -> "text-base"
_ -> "text-xs"
end
end
end
7 changes: 5 additions & 2 deletions lib/moon_web/components/example_and_code.ex
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -11,6 +11,7 @@ defmodule MoonWeb.Components.ExampleAndCode do
data buttons, :list, default: ["preview", "code"]
data selected_button, :string, default: "preview"
prop title, :string, default: ""
prop is_gray_bg, :boolean, default: false
slot example
slot code
slot state
Expand All @@ -29,9 +30,11 @@ defmodule MoonWeb.Components.ExampleAndCode do
<p><#slot name="note" /></p>
</div>
<Context get={theme_class: theme_class}>
<div class={"grid grid-cols-1 bg-gohan-100 rounded-md shadow", theme_class}>
<div class={"grid grid-cols-1 bg-gohan-100 rounded-md shadow", "bg-slate-200": @is_gray_bg}>
<div class={"p-6", hidden: @selected_button == "code"}>
<#slot name="example">Example not defined</#slot>
<div class={"inline", theme_class}>
<#slot name="example">Example not defined</#slot>
</div>
</div>
<div class={
"border-beerus-100 rounded-md shadow justify-around",
Expand Down
Loading