Packages
moon
2.73.3
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/lego/checkbox.ex
defmodule Moon.Lego.Checkbox do
@moduledoc "Simple checkbox with or without selected mark to be used anywhere. Some SVG inside. Renders as a span"
use Moon.StatelessComponent
@doc "Id to be given to the HTML tag"
prop(id, :string)
@doc "Data-testid attribute value"
prop(testid, :string)
@doc "Class to be given to the visible checkbox"
prop(class, :css_class)
@doc "If the checkbox has selected mark"
prop(is_selected, :boolean)
@doc "On_click event for the checkbox"
prop(on_click, :event)
def render(assigns) do
~F"""
<span
{=@id}
data-testid={@testid}
:on-click={@on_click}
aria-hidden="true"
aria-checked={"#{@is_selected}"}
class={
merge([
"flex w-4 h-4 items-center justify-center text-moon-16",
"transition-colors rounded-moon-s-xs text-goten shadow-trunks",
"moon-checked:bg-piccolo moon-checked:shadow-none",
@class
]),
"shadow-[0_0_0_1px_inset]"
}
>
<svg
width="1em"
height="1em"
viewBox="0 0 32 32"
fill="none"
xmlns="http://www.w3.org/2000/svg"
class={"transition-opacity", "opacity-0": !@is_selected}
>
<path
d="M7 14.941L13.667 22 25 10"
stroke="currentColor"
stroke-linecap="round"
stroke-linejoin="round"
/>
</svg>
</span>
"""
end
end