Packages
moon
2.75.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/components/label.ex
defmodule Moon.Components.Label do
@moduledoc false
use Moon.StatelessComponent
prop(color, :css_class, default: "text-goten")
prop(background_color, :css_class, default: "bg-bulma")
prop(size, :string, default: "xsmall", values: ~w(twoxsmall xsmall))
prop(class, :string)
prop(is_uppercase, :boolean, default: true)
slot(default)
slot(left_icon)
slot(right_icon)
def render(assigns) do
~F"""
<span class={
"flex items-center align-middle rounded-moon-s-xs",
@class,
set_letter_spacing(@size),
set_y_padding(@size, @left_icon, @right_icon),
set_l_padding(@size, @left_icon),
set_r_padding(@size, @right_icon),
set_font_size(@size, @is_uppercase),
"bg-#{@background_color} text-#{@color}",
@background_color,
@color,
uppercase: @is_uppercase
}>
<span class={"items-center mr-1": @left_icon}>
<#slot {@left_icon} />
</span>
<#slot />
<span class={"items-center ml-1": @right_icon}>
<#slot {@right_icon} />
</span>
</span>
"""
end
defp set_letter_spacing(size) do
case size do
"twoxsmall" -> "tracking-[0.5px]"
_ -> "tracking-[1px]"
end
end
defp set_y_padding(size, left_icon, right_icon) do
case size do
"twoxsmall" ->
"py-0"
_ ->
"#{((right_icon || left_icon) && "py-0") || "py-1"}"
end
end
defp set_l_padding(size, left_icon) do
case size do
"twoxsmall" ->
"#{(left_icon && "pl-1") || "pl-2"}"
_ ->
"#{(left_icon && "pl-1") || "pl-2"}"
end
end
defp set_r_padding(size, right_icon) do
case size do
"twoxsmall" ->
"#{(right_icon && "pr-1") || "pr-2"}"
_ ->
"#{(right_icon && "pr-1") || "pr-2"}"
end
end
defp set_font_size(size, is_uppercase) do
if is_uppercase do
case size do
"twoxsmall" -> "text-moon-9"
_ -> "text-moon-10"
end
else
case size do
"twoxsmall" -> "text-moon-10"
_ -> "text-moon-12"
end
end
end
end