Packages
moon
2.80.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/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 "Disabled chip"
prop(disabled, :boolean)
@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}
disabled={@disabled}
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,
"opacity-60 cursor-not-allowed hover:shadow-none hover:bg-goku hover:text-bulma": @disabled,
"hover:bg-transparent": @variant in ["ghost"] && @disabled
],
@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