Packages
noora
0.69.0
0.86.0
0.85.0
0.84.1
0.84.0
0.83.2
0.83.1
0.83.0
0.82.7
0.82.6
0.82.5
0.82.4
0.82.3
0.82.2
0.82.1
0.82.0
0.81.4
0.81.3
0.81.2
0.81.1
0.81.0
0.80.1
0.80.0
0.79.1
0.79.0
0.78.1
0.78.0
0.77.4
0.77.3
0.77.2
0.77.1
0.77.0
0.76.0
0.75.0
0.74.0
0.73.0
0.72.0
0.71.0
0.70.0
0.69.1
0.69.0
0.68.0
0.67.0
0.66.0
0.65.0
0.64.2
0.64.1
0.64.0
0.63.2
0.63.1
0.63.0
0.62.0
0.61.0
0.60.0
0.59.0
0.58.0
0.57.0
0.56.1
0.56.0
0.55.0
0.54.0
0.53.1
0.53.0
0.52.1
0.52.0
0.51.0
0.50.1
0.50.0
0.49.0
0.48.0
0.47.0
0.46.0
0.45.0
0.44.3
0.44.2
0.44.1
0.44.0
0.43.0
0.42.0
0.41.0
0.40.6
0.40.5
0.40.4
0.40.3
0.40.2
0.40.1
0.40.0
0.39.1
0.39.0
0.38.0
0.37.0
0.36.0
0.35.0
0.34.0
0.33.0
0.32.1
0.32.0
0.31.0
0.30.0
0.29.2
0.29.1
0.29.0
0.28.5
0.28.4
0.28.3
0.28.2
0.28.1
0.28.0
0.27.0
0.26.1
0.26.0
0.25.0
0.24.0
0.23.1
0.23.0
0.22.1
0.22.0
0.21.0
0.20.0
0.19.0
0.18.0
0.17.0
0.16.0
0.15.0
0.14.0
0.13.0
0.12.1
0.12.0
0.11.2
0.11.1
0.11.0
0.10.0
0.9.0
0.8.0
0.7.0
0.6.1
0.6.0
0.5.1
0.5.0
0.4.0
0.3.2
0.3.1
0.3.0
0.2.2
0.2.0
0.1.0
0.1.0-rc.2
0.1.0-rc.1
0.1.0-alpha.6
0.1.0-alpha.5
0.1.0-alpha.4
0.1.0-alpha.3
0.1.0-alpha.2
0.1.0-alpha.1
A component library for Phoenix LiveView applications
Current section
Files
Jump to
Current section
Files
lib/noora/alert.ex
defmodule Noora.Alert do
@moduledoc """
An alert component.
## Example
```elixir
<.alert status="success" title="Operation completed successfully" />
```
"""
use Phoenix.Component
import Noora.DismissIcon
alias Noora.Icon
alias Phoenix.LiveView.JS
attr(:id, :string, default: nil)
attr(:type, :string,
values: ~w(primary secondary),
default: "primary",
doc: "The type of alert."
)
attr(:status, :string,
values: ~w(information warning error success),
required: true,
doc: "The status of the alert."
)
attr(:size, :string,
values: ~w(small medium large),
default: "medium",
doc: "The size of the alert."
)
attr(:dismissible, :boolean,
default: false,
doc: "Whether the alert can be dismissed."
)
attr(:title, :string, required: true, doc: "The title of the alert.")
attr(:description, :string,
default: nil,
doc: "The description of the alert. Only shown if `size` is large."
)
slot(:action, required: false)
attr(:rest, :global)
def alert(assigns) do
~H"""
<div
id={@id}
class="noora-alert"
data-type={@type}
data-status={@status}
data-size={@size}
{@rest}
>
<%= if @size in ["small", "medium"] do %>
<.icon status={@status} />
<span data-part="title">{@title}</span>
<div :if={@action != []} data-part="actions">
<%= for action <- @action do %>
{render_slot(action)}
<% end %>
</div>
<.dismiss_icon
:if={@dismissible}
size={if @size == "small", do: "small", else: "large"}
data-part="dismiss-icon"
phx-click={JS.hide(to: "##{@id}")}
/>
<% end %>
<%= if @size == "large" do %>
<.icon status={@status} />
<div data-part="column">
<span data-part="title">{@title}</span>
<span data-part="description">{@description}</span>
<div :if={@action != []} data-part="actions">
<div :for={action <- @action}>
{render_slot(action)}
</div>
</div>
</div>
<.dismiss_icon
:if={@dismissible}
size="large"
data-part="dismiss-icon"
phx-click={JS.hide(to: "##{@id}")}
/>
<% end %>
</div>
"""
end
defp icon(%{status: status} = assigns) when status in ["error", "information"] do
~H"""
<div data-part="icon">
<Icon.alert_circle />
</div>
"""
end
defp icon(%{status: "success"} = assigns) do
~H"""
<div data-part="icon">
<Icon.circle_check />
</div>
"""
end
defp icon(%{status: "warning"} = assigns) do
~H"""
<div data-part="icon">
<Icon.alert_triangle />
</div>
"""
end
end