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/components/toast.ex
defmodule Moon.Components.Toast do
@moduledoc false
use Moon.StatelessComponent
alias Moon.Assets.Icons.IconBannerInfo
alias Moon.Assets.Icons.IconError
alias Moon.Assets.Icons.IconErrorCircle
alias Moon.Assets.Icons.IconSnackbarSuccess
alias Moon.Assets.Icons.IconWarning
alias Moon.Components.Link
prop(id, :string, required: true)
prop(testid, :string)
prop(message, :string, required: true)
prop(variant, :string, values: ~w(error warning info success))
prop(closeable, :boolean, default: true)
prop(link_text, :string)
prop(link_href, :string)
prop(on_close, :event)
prop(background_color_class, :css_class, default: "bg-goku")
defmodule Message do
@moduledoc false
defstruct id: nil,
testid: nil,
message: nil,
variant: nil,
closeable: true,
link_text: nil,
link_href: nil
end
def render(assigns) do
~F"""
<div
{=@id}
data-testid={@testid}
class={
"inline-flex items-center rounded-lg shadow-xl pointer-events-auto p-4 mb-4",
@background_color_class
}
>
<div :if={@variant} class="shrink-0 mr-3">
<IconError :if={@variant == "error"} class="block w-5 h-5" font_size="1.25rem" />
<IconWarning :if={@variant == "warning"} class="block w-5 h-5" font_size="1.25rem" />
<IconBannerInfo :if={@variant == "info"} class="block w-5 h-5" font_size="1.25rem" />
<IconSnackbarSuccess :if={@variant == "success"} class="block w-5 h-5" font_size="1.25rem" />
</div>
<div class="flex justify-between flex-1 text-moon-14">
<p class="flex-1 text-gray-900">
{@message}
</p>
<Link :if={@link_href && @link_text} class="ml-4 shrink-0 font-semibold" to={@link_href}>
{@link_text}
</Link>
</div>
<div :if={@closeable} class="flex shrink-0 ml-4">
<button
class="inline-flex rounded-md hover:text-gray-500 focus:outline-none"
:on-click={@on_close}
phx-value-id={@id}
data-testid={"#{@testid}-close-button"}
>
<span class="sr-only">Close</span>
<IconErrorCircle class="w-5 h-5" font_size="1.25rem" color="trunks" />
</button>
</div>
</div>
"""
end
end