Added base for a bloom_button component with a variant attribute (#2)

Author: chrisgreg

bloom_site/lib/bloom_site_web/components/button.ex

@@ -0,0 +1,49 @@
+defmodule BloomSiteWeb.Components.Button do
+  use Phoenix.Component
+
+  @doc """
+  An extension of the *core_components button*.
+  The `<.button>` has the ability to handle a variant attribute.
+  This makes it possible to have a `contained` or `outlined` look.
+
+  ⚠️ Uninstall the core button component!
+  As you do not need two button components, the button component of the core phoenix_package can be deleted.
+  """
+
+  attr(:type, :string, default: nil)
+  attr(:class, :string, default: nil)
+  attr(:rest, :global, include: ~w(disabled form name value))
+  attr(:variant, :string, default: "contained")
+
+  slot(:inner_block, required: true)
+
+  def button(assigns) do
+    ~H"""
+    <button
+      type={@type}
+      class={[
+        "rounded-lg px-3 py-2 box-sizing:border-box phx-submit-loading:opacity-75",
+        "text-sm font-semibold leading-6 text-white active:text-white/80",
+        get_variant(assigns.variant),
+        @class
+      ]}
+      {@rest}
+    >
+      <%= render_slot(@inner_block) %>
+    </button>
+    """
+  end
+
+  defp get_variant(variant) do
+    case variant do
+      "contained" ->
+        "border-2 border-zinc-900 hover:border-zinc-700 bg-zinc-900 hover:bg-zinc-700"
+
+      "outlined" ->
+        "border-2 border-zinc-900 bg-transparent text-zinc-900 hover:bg-zinc-700 hover:border-zinc-700 hover:text-white active:bg-zinc-700"
+
+      _ ->
+        "bg-zinc-900 hover:bg-zinc-700"
+    end
+  end
+end

bloom_site/mix.exs

@@ -54,7 +54,7 @@ defmodule BloomSite.MixProject do
       {:gettext, "~> 0.20"},
       {:jason, "~> 1.2"},
       {:plug_cowboy, "~> 2.5"},
-      {:bloom, "~> 0.0.7"},
+      {:bloom, path: "../"},
       # {:bloom, path: "..", override: true},
       {:phoenix_storybook, "~> 0.6.0"}
     ]

bloom_site/storybook/bloom_components/button.story.exs

@@ -0,0 +1,25 @@
+defmodule BloomSite.Storybook.BloomComponents.Button do
+  use PhoenixStorybook.Story, :component
+
+  def function, do: &BloomSiteWeb.Components.Button.button/1
+
+  def variations do
+    [
+      %Variation{
+        id: :default,
+        slots: [
+          "Button"
+        ]
+      },
+      %Variation{
+        id: :outlined,
+        attributes: %{
+          variant: "outlined"
+        },
+        slots: [
+          "Outlined button"
+        ]
+      },
+    ]
+  end
+end

lib/bloom/components/button.ex

@@ -0,0 +1,49 @@
+defmodule Bloom.Components.Button do
+  use Phoenix.Component
+
+  @doc """
+  An extension of the *core_components button*.
+  The `<.button>` has the ability to handle a variant attribute.
+  This makes it possible to have a `contained` or `outlined` look.
+
+  ⚠️ Uninstall the core button component!
+  As you do not need two button components, the button component of the core phoenix_package can be deleted.
+  """
+
+  attr(:type, :string, default: nil)
+  attr(:class, :string, default: nil)
+  attr(:rest, :global, include: ~w(disabled form name value))
+  attr(:variant, :string, default: "contained")
+
+  slot(:inner_block, required: true)
+
+  def button(assigns) do
+    ~H"""
+    <button
+      type={@type}
+      class={[
+        "rounded-lg px-3 py-2 box-sizing:border-box phx-submit-loading:opacity-75",
+        "text-sm font-semibold leading-6 text-white active:text-white/80",
+        get_variant(assigns.variant),
+        @class
+      ]}
+      {@rest}
+    >
+      <%= render_slot(@inner_block) %>
+    </button>
+    """
+  end
+
+  defp get_variant(variant) do
+    case variant do
+      "contained" ->
+        "border-2 border-zinc-900 hover:border-zinc-700 bg-zinc-900 hover:bg-zinc-700"
+
+      "outlined" ->
+        "border-2 border-zinc-900 bg-transparent text-zinc-900 hover:bg-zinc-700 hover:border-zinc-700 hover:text-white active:bg-zinc-700"
+
+      _ ->
+        "bg-zinc-900 hover:bg-zinc-700"
+    end
+  end
+end

priv/templates/button.ex

@@ -0,0 +1,49 @@
+defmodule <%= @module_name %>Web.Components.Button do
+  use Phoenix.Component
+
+  @doc """
+  An extension of the *core_components button*.
+  The `<.button>` has the ability to handle a variant attribute.
+  This makes it possible to have a `contained` or `outlined` look.
+
+  ⚠️ Uninstall the core button component!
+  As you do not need two button components, the button component of the core phoenix_package can be deleted.
+  """
+
+  attr(:type, :string, default: nil)
+  attr(:class, :string, default: nil)
+  attr(:rest, :global, include: ~w(disabled form name value))
+  attr(:variant, :string, default: "contained")
+
+  slot(:inner_block, required: true)
+
+  def button(assigns) do
+    ~H"""
+    <button
+      type={@type}
+      class={[
+        "rounded-lg px-3 py-2 box-sizing:border-box phx-submit-loading:opacity-75",
+        "text-sm font-semibold leading-6 text-white active:text-white/80",
+        get_variant(assigns.variant),
+        @class
+      ]}
+      {@rest}
+    >
+      <%%= render_slot(@inner_block) %>
+    </button>
+    """
+  end
+
+  defp get_variant(variant) do
+    case variant do
+      "contained" ->
+        "border-2 border-zinc-900 hover:border-zinc-700 bg-zinc-900 hover:bg-zinc-700"
+
+      "outlined" ->
+        "border-2 border-zinc-900 bg-transparent text-zinc-900 hover:bg-zinc-700 hover:border-zinc-700 hover:text-white active:bg-zinc-700"
+
+      _ ->
+        "bg-zinc-900 hover:bg-zinc-700"
+    end
+  end
+end