Packages
moon
2.73.1
2.90.5
retired
2.90.4
2.90.3
2.90.2
2.90.1
2.90.0
2.89.4
2.89.1
2.89.0
2.88.0
2.87.11
2.87.10
2.87.9
2.87.8
2.87.7
2.87.6
2.87.5
2.87.4
2.87.3
2.87.2
2.87.1
2.87.0
2.86.1
2.86.0
2.85.1
2.85.0
2.84.0
2.83.0
2.82.0
2.81.4
2.81.3
2.81.2
2.81.1
2.81.0
2.80.2
2.80.1
2.80.0
2.79.13
2.79.12
2.79.11
2.79.10
2.79.9
2.79.8
2.79.7
2.79.6
2.79.5
2.79.4
2.79.3
2.79.2
2.79.1
2.79.0
2.78.4
2.78.3
2.78.2
2.78.1
2.78.0
2.77.0
2.76.5
2.76.4
2.76.3
2.76.2
2.76.1
2.76.0
2.75.0
2.74.1
2.74.0
2.73.8
2.73.7
2.73.6
2.73.5
2.73.4
2.73.3
2.73.2
2.73.1
2.73.0
2.72.5
2.72.4
2.72.3
2.72.2
2.72.1
2.72.0
2.71.1
2.71.0
2.70.0
2.69.2
2.69.1
2.69.0
2.68.11
2.68.10
Components-based design system written in elixir
Current section
Files
Jump to
Current section
Files
lib/moon/design/accordion/header.ex
defmodule Moon.Design.Accordion.Header do
@moduledoc false
use Moon.StatelessComponent, slot: "header"
alias Moon.Icons.ControlsChevronDown
# public API
@doc "Id attribute for DOM element"
prop(id, :string)
@doc "Data-testid attribute for DOM element"
prop(testid, :string)
@doc "Additional Tailwind classes"
prop(class, :css_class)
@doc "Additional Tailwind classes"
prop(icon_class, :css_class)
@doc "Title of Accordion.Item"
prop(title, :string)
@doc "Content of Accordion.Header"
slot(default)
# internal API
@doc "Will be got from Accordion.Item in most cases"
prop(disabled, :boolean, from_context: :disabled)
@doc "Will be got from Accordion in most cases"
prop(is_open, :boolean, from_context: :is_open)
@doc "Will be got from Accordion in most cases"
prop(size, :string, values!: ["sm", "md", "lg", "xl"], from_context: :size)
@doc "Will be got from Accordion in most cases"
prop(value, :integer, from_context: :value)
@doc "Will be got from Accordion in most cases"
prop(on_change, :event, from_context: :on_change)
@doc "Will be got from Accordion in most cases"
prop(is_content_outside, :boolean, from_context: :is_content_outside)
def render(assigns) do
~F"""
<h3 class="w-full">
<button
{=@id}
data-testid={@testid}
type="button"
aria-expanded={(@is_open && "true") || "false"}
is-content-outside={"#{@is_content_outside}"}
size={"#{@size}"}
:on-click={@on_change}
{=@value}
{=@disabled}
class={merge([
"justify-between flex items-center relative w-full rounded-moon-s-sm",
"gap-1 flex-1 font-medium text-bulma text-start bg-goku",
get_size_class(@size),
(@disabled && "cursor-not-allowed opacity-60") || "cursor-pointer",
!@is_content_outside && @is_open && "rounded-b-none",
@class
])}
>
<#slot><span>{@title}</span></#slot>
<ControlsChevronDown class={
merge([
["text-trunks text-moon-16 transition-200", "rotate-180": @is_open],
@icon_class
]),
"transition-transform"
} />
</button>
</h3>
"""
end
defp get_size_class(size) do
case size do
"xl" -> "p-4 text-moon-16"
"lg" -> "p-3 text-moon-14"
"md" -> "py-2 ps-3 pe-2 text-moon-14"
_ -> "py-1 ps-3 pe-1 text-moon-14"
end
end
end