Packages
moon
2.76.2
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
@doc "Size of tag"
prop(size, :string, default: "xs", values: ~w(2xs xs sm))
@doc "Tailwind classes for customization"
prop(class, :css_class)
@doc "Letter case"
prop(is_uppercase, :boolean, default: true)
@doc "Tag content"
slot(default)
@doc "Left icon"
slot(left_icon)
@doc "Right icon"
slot(right_icon)
@doc "Data-testid attribute for DOM element"
prop(testid, :string)
@doc "Id attribute for DOM element"
prop(id, :string)
def render(assigns) do
~F"""
<div
{=@id}
class={merge([
[
"flex items-center select-none text-goku font-semibold bg-bulma tracking-[0.5px]",
Utils.get_tag_size(@size),
"#{Utils.get_lowercase_font_size(@size)}": !@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