Skip to content
New issue

Have a question about this project? Sign up for a free GitHub account to open an issue and contact its maintainers and the community.

Sign up for GitHub

By clicking “Sign up for GitHub”, you agree to our terms of service and privacy statement. We’ll occasionally send you account related emails.

Already on GitHub? Sign in to your account

add button and button_link components #109

Merged
merged 1 commit into from
Dec 5, 2023
Merged

add button and button_link components #109

Changes from all commits
Commits
Show all changes
1 commit
Select commit
File filter

Filter by extension

Filter by extension
Conversations
Failed to load comments.
Loading
Jump to
Jump to file
Failed to load files.
Loading
Diff view
Diff view
168 changes: 155 additions & 13 deletions lib/doggo.ex
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -123,6 +123,131 @@ defmodule Doggo do
"""
end

@doc """
Renders a button.

## Examples

<.button>Confirm</.button>

<.button type="submit" kind={:secondary} size={:medium} shape={:pill}>
Submit
</.button>
"""
attr :type, :string, values: ["button", "reset", "submit"], default: "button"

attr :kind, :atom,
values: [:primary, :secondary, :info, :success, :warning, :danger],
default: :primary

attr :fill, :atom, values: [:solid, :outline, :text], default: :solid

attr :size, :atom,
values: [:small, :normal, :medium, :large],
default: :normal

attr :shape, :atom, values: [nil, :circle, :pill], default: nil
attr :disabled, :boolean, default: nil
attr :rest, :global, include: ~w(autofocus form name value)

slot :inner_block, required: true

def button(assigns) do
~H"""
<button
type={@type}
class={[
variant_class(@variant),
size_class(@size),
shape_class(@shape),
fill_class(@fill)
]}
disabled={@disabled}
{@rest}
>
<%= render_slot(@inner_block) %>
</button>
"""
end

@doc """
Renders a link (`<a>`) that has the role and style of a button.

## Examples

<.button_link patch={~p"/confirm"}>Confirm</.button>

<.button_link
navigate={~p"/registration"}
kind={:primary}
shape={:pill}>
Submit
</.button>
"""
attr :navigate, :string, default: nil
attr :patch, :string, default: nil
attr :href, :any, default: nil
attr :replace, :boolean, default: false
attr :method, :string, default: "get"
attr :csrf_token, :any, default: true

attr :kind, :atom,
values: [:primary, :secondary, :info, :success, :warning, :danger],
default: :primary

attr :fill, :atom, values: [:solid, :outline, :text], default: :solid

attr :size, :atom,
values: [:small, :normal, :medium, :large],
default: :normal

attr :shape, :atom, values: [nil, :circle, :pill], default: nil

attr :disabled, :boolean,
default: false,
doc: """
Since `<a>` tags cannot have a `disabled` attribute, this attribute toggles
the `"is-disabled"` class.
"""

attr :rest, :global,
include: [
# HTML attributes
"download",
"hreflang",
"referrerpolicy",
"rel",
"target",
"type",
# Phoenix.LiveView.Component.link/1 attributes
"navigate",
"patch",
"href",
"replace",
"method",
"csrf_token"
]

slot :inner_block, required: true

def button_link(assigns) do
~H"""
<.link
role="button"
class={[
variant_class(@variant),
size_class(@size),
shape_class(@shape),
fill_class(@fill),
@disabled && "is-disabled"
]}
{@rest}
>
<%= render_slot(@inner_block) %>
</.link>
"""
end

@doc """
Shows the flash messages as alerts.

Expand Down Expand Up @@ -244,7 +369,7 @@ defmodule Doggo do
phx-click={@on_close}
id={@id}
role="alert"
class={["alert", alert_level_class(@level)] ++ List.wrap(@class)}
class={["alert", variant_class(@level)] ++ List.wrap(@class)}
{@rest}
>
<div :if={@icon != []} class="alert-icon">
Expand All @@ -261,11 +386,6 @@ defmodule Doggo do
"""
end

defp alert_level_class(:info), do: "is-info"
defp alert_level_class(:success), do: "is-success"
defp alert_level_class(:warning), do: "is-warning"
defp alert_level_class(:error), do: "is-error"

@doc """
Renders a card in an `article` tag, typically used repetitively in a grid or
flex box layout.
Expand Down Expand Up @@ -372,7 +492,9 @@ defmodule Doggo do
`label` text is used as `aria-label` attribute.
"""

attr :size, :atom, default: :medium, values: [:small, :medium, :large]
attr :size, :atom,
default: :normal,
values: [:small, :normal, :medium, :large]

attr :class, :any,
default: [],
Expand All @@ -386,7 +508,7 @@ defmodule Doggo do
class={
[
"icon",
icon_size_class(@size),
size_class(@size),
label_placement_class(@label_placement)
] ++ List.wrap(@class)
}
Expand All @@ -403,10 +525,6 @@ defmodule Doggo do
defp label_placement_class(:left), do: "has-text-left"
defp label_placement_class(:right), do: "has-text-right"

defp icon_size_class(:small), do: "is-small"
defp icon_size_class(:medium), do: "is-medium"
defp icon_size_class(:large), do: "is-large"

@doc """
Renders an icon using an SVG sprite.

Expand Down Expand Up @@ -457,7 +575,7 @@ defmodule Doggo do
class={
[
"icon",
icon_size_class(@size),
size_class(@size),
label_placement_class(@label_placement)
] ++ List.wrap(@class)
}
Expand Down Expand Up @@ -1342,4 +1460,28 @@ defmodule Doggo do
</div>
"""
end

## Modifier classes

defp fill_class(:solid), do: "is-solid"
defp fill_class(:outline), do: "is-outline"
defp fill_class(:text), do: "is-text"

defp size_class(:small), do: "is-small"
defp size_class(:normal), do: nil
defp size_class(:medium), do: "is-medium"
defp size_class(:large), do: "is-large"

defp shape_class(:circle), do: "is-circle"
defp shape_class(:pill), do: "is-pill"
defp shape_class(nil), do: nil

defp variant_class(:primary), do: "is-primary"
defp variant_class(:secondary), do: "is-secondary"
defp variant_class(:info), do: "is-info"
defp variant_class(:success), do: "is-success"
defp variant_class(:warning), do: "is-warning"
defp variant_class(:danger), do: "is-danger"
defp variant_class(:error), do: "is-danger"
defp variant_class(_), do: nil
end