Packages
moon
2.86.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/light/lego.ex
defmodule Elixir.Moon.Light.Lego do
@moduledoc false
use Moon.Light.Component
@doc "Simple checkbox with or without selected mark to be used anywhere. Some SVG inside. Renders as a span"
attr(:id, :string, doc: "Id to be given to the HTML tag", default: nil)
attr(:testid, :string, doc: "Data-testid attribute value", default: nil)
attr(:class, :any, doc: "Class to be given to the visible checkbox", default: nil)
attr(:is_selected, :boolean, doc: "If the checkbox has selected mark", default: nil)
attr(:on_click, Event, doc: "On_click event for the checkbox", default: nil)
def checkbox(assigns) do
~H"""
<span
id={@id}
data-testid={@testid}
phx-click={Event.from(@on_click).name}
phx-target={Event.from(@on_click).target}
aria-hidden="true"
aria-checked={(@is_selected && "true") || "false"}
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 cursor-pointer",
"shadow-[0_0_0_1px_inset]",
@class
])
}
>
<svg
xmlns="http://www.w3.org/2000/svg"
width="16"
height="16"
viewBox="0 0 16 16"
fill="none"
class={merge(["transition-opacity", "opacity-0": !@is_selected])}
>
<path
d="M3.5 7.47059L6.83333 11L12.5 5"
stroke="currentColor"
stroke-width="1.5"
stroke-linecap="round"
stroke-linejoin="round"
/>
</svg>
</span>
"""
end
end