Packages
moon
2.72.5
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/tag.ex
defmodule Moon.Design.Tag do
@moduledoc false
use Moon.StatelessComponent
alias Moon.Design.Tag.Utils
prop(size, :string, default: "xs", values: ~w(2xs xs))
prop(class, :css_class)
prop(is_uppercase, :boolean, default: true)
slot(default)
slot(left_icon)
slot(right_icon)
prop(testid, :string)
prop(id, :string)
def render(assigns) do
~F"""
<div
{=@id}
class={merge([
[
"flex items-center rounded-moon-i-xs select-none text-goku font-medium bg-bulma tracking-[0.5px]",
Utils.get_icon_size(@size),
"gap-1": slot_assigned?(:right_icon) || slot_assigned?(:left_icon),
"text-moon-9 h-4 py-0 px-2": @size == "2xs",
"text-moon-10 h-6 py-1 px-2": @size == "xs",
"text-moon-10 tracking-0 font-normal": @size == "2xs" && !@is_uppercase,
"text-moon-12 tracking-0 font-normal": @size == "xs" && !@is_uppercase,
"#{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_both_icon_paddings(@size)}":
slot_assigned?(:right_icon) && slot_assigned?(:left_icon),
uppercase: @is_uppercase
],
@class
])}
data-testid={@testid}
>
<span class={Utils.get_icon_size(@size), "flex items-center"} :if={slot_assigned?(:left_icon)}><#slot {@left_icon} /></span>
<#slot />
<span class={Utils.get_icon_size(@size), "flex items-center"} :if={slot_assigned?(:right_icon)}><#slot {@right_icon} /></span>
</div>
"""
end
end