Packages
moon
2.72.0
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/chip.ex
defmodule Moon.Design.Chip do
@moduledoc false
use Moon.StatelessComponent
alias Moon.Design.Chip.Utils
@doc "Id attribute for DOM element"
prop(id, :string)
@doc "Data-testid attribute for DOM element"
prop(testid, :string)
@doc "Active state"
prop(is_active, :boolean, default: false)
@doc "Shows stroke on hover/active"
prop(is_stroke, :boolean, default: false)
@doc "Size of chip"
prop(size, :string, values: ["sm", "md"], default: "md")
@doc "Visual/Logical variant of chip"
prop(variant, :string, values: ["default", "ghost"], default: "default")
@doc "Event to be fired on click"
prop(on_click, :event)
@doc "Additional Tailwind classes"
prop(class, :css_class)
@doc "Aria label attribute for DOM element"
prop(aria_label, :string)
@doc "Default slot"
slot(default)
@doc "Left icon slot"
slot(left_icon)
@doc "Right icon slot"
slot(right_icon)
@doc "Icon slot without text"
slot(icon_only)
def render(assigns) do
~F"""
<button
{=@id}
class={merge([
[
"z-0 overflow-hidden flex flex-row items-center text-moon-14",
"relative rounded-moon-i-sm cursor-pointer transition duration-200 bg-goku text-bulma hover:bg-jiren hover:text-piccolo",
"h-8 gap-1 p-1": @size == "sm",
"h-10 gap-2 p-2": @size == "md",
"#{Utils.get_right_icon_paddings(@size)}":
slot_assigned?(:right_icon) && !slot_assigned?(:left_icon),
"#{Utils.get_left_icon_paddings(@size)}":
slot_assigned?(:left_icon) && !slot_assigned?(:right_icon),
"#{Utils.get_no_icon_paddings(@size)}":
!slot_assigned?(:right_icon) && !slot_assigned?(:left_icon) && !slot_assigned?(:icon_only),
"bg-transparent": @variant in ["ghost"],
"bg-jiren text-piccolo": @is_active,
"hover:shadow-interactive": @is_stroke,
"shadow-interactive": @is_active && @is_stroke
],
@class
])}
:on-click={@on_click}
data-testid={@testid}
aria-label={@aria_label}
>
<#slot {@left_icon} />
<#slot />
<#slot {@right_icon} />
<#slot {@icon_only} />
</button>
"""
end
end