feat: Very basic badge component

bloom_site/lib/bloom_site_web/components/badge.ex

@@ -0,0 +1,60 @@
+defmodule BloomSiteWeb.Components.Badge do
+  use Phoenix.Component
+
+  @moduledoc """
+  Badge component
+
+  Requires the following Tailwind CSS config extension:
+
+  extend: {
+      animation: {
+        tilt: "tilt 5s ease-in-out infinite",
+      },
+      keyframes: {
+        tilt: {
+          "0%, 50%, 100%": { transform: "rotate(0deg)" },
+          "25%": { transform: "rotate(3deg)" },
+          "75%": { transform: "rotate(-3deg)" },
+        },
+      },
+  }
+  """
+
+  attr(:variant, :string, doc: "Badge variant", default: "primary")
+
+  attr(:from_color, :string)
+  attr(:to_color, :string)
+
+  attr(:class, :string, default: "", doc: "Class for badge")
+  attr(:rest, :global)
+
+  slot(:inner_block, required: true)
+
+  def badge(assigns) do
+    ~H"""
+    <div class={["w-fit mx-auto relative group"]} {@rest}>
+      <div class={bg_gradient_class(assigns)}>
+      </div>
+      <span
+        class={[
+          "text-xs font-medium me-2 px-2.5 py-1 rounded-lg relative",
+          variant_class(@variant),
+          @class
+        ]}
+        {@rest}
+      >
+        <%= render_slot(@inner_block) %>
+      </span>
+    </div>
+    """
+  end
+
+  defp variant_class("primary"), do: "bg-black text-gray-100"
+  defp variant_class("secondary"), do: "bg-white border border-black"
+
+  defp bg_gradient_class(%{from_color: from_color, to_color: to_color}),
+    do:
+      "group-hover:opacity-100 animate-tilt transition duration-75 group-hover:duration-200 absolute blur-lg opacity-100 -inset-1.5 group-hover:-inset-2 rounded-lg bg-gradient-to-r from-#{from_color} to-#{to_color}"
+
+  defp bg_gradient_class(_assigns), do: ""
+end

bloom_site/storybook/bloom_components/badge.story.exs

@@ -0,0 +1,30 @@
+defmodule BloomSite.Storybook.BloomComponents.Badge do
+  use PhoenixStorybook.Story, :component
+
+  def function, do: &BloomSiteWeb.Components.Badge.badge/1
+
+  def variations do
+    [
+      %Variation{
+        id: :primary,
+        slots: ["Badge"]
+      },
+      %Variation{
+        id: :secondary,
+        attributes: %{
+          variant: "secondary"
+        },
+        slots: ["Badge"]
+      },
+      %Variation{
+        id: :glow,
+        attributes: %{
+          variant: "primary",
+          from_color: "rose-700",
+          to_color: "purple-800"
+        },
+        slots: ["Badge"]
+      }
+    ]
+  end
+end

lib/bloom/components/badge.ex

@@ -0,0 +1,60 @@
+defmodule Bloom.Components.Badge do
+  use Phoenix.Component
+
+  @moduledoc """
+  Badge component
+
+  Requires the following Tailwind CSS config extension:
+
+  extend: {
+      animation: {
+        tilt: "tilt 5s ease-in-out infinite",
+      },
+      keyframes: {
+        tilt: {
+          "0%, 50%, 100%": { transform: "rotate(0deg)" },
+          "25%": { transform: "rotate(3deg)" },
+          "75%": { transform: "rotate(-3deg)" },
+        },
+      },
+  }
+  """
+
+  attr(:variant, :string, doc: "Badge variant", default: "primary")
+
+  attr(:from_color, :string)
+  attr(:to_color, :string)
+
+  attr(:class, :string, default: "", doc: "Class for badge")
+  attr(:rest, :global)
+
+  slot(:inner_block, required: true)
+
+  def badge(assigns) do
+    ~H"""
+    <div class={["w-fit mx-auto relative group"]} {@rest}>
+      <div class={bg_gradient_class(assigns)}>
+      </div>
+      <span
+        class={[
+          "text-xs font-medium me-2 px-2.5 py-1 rounded-lg relative",
+          variant_class(@variant),
+          @class
+        ]}
+        {@rest}
+      >
+        <%= render_slot(@inner_block) %>
+      </span>
+    </div>
+    """
+  end
+
+  defp variant_class("primary"), do: "bg-black text-gray-100"
+  defp variant_class("secondary"), do: "bg-white border border-black"
+
+  defp bg_gradient_class(%{from_color: from_color, to_color: to_color}),
+    do:
+      "group-hover:opacity-100 animate-tilt transition duration-75 group-hover:duration-200 absolute blur-lg opacity-100 -inset-1.5 group-hover:-inset-2 rounded-lg bg-gradient-to-r from-#{from_color} to-#{to_color}"
+
+  defp bg_gradient_class(_assigns), do: ""
+end

lib/tasks/install.ex

@@ -64,7 +64,7 @@ defmodule Mix.Tasks.Bloom.Install do
     Mix.shell().info("Usage: mix bloom.install [component_name]")
 
     Mix.shell().info(
-      "Available components: glow_button | code_snippet | hero | gradient_text | bento_grid | card | marquee"
+      "Available components: glow_button | code_snippet | hero | gradient_text | bento_grid | card | marquee | badge"
     )
   end
 

priv/templates/badge.ex

@@ -0,0 +1,60 @@
+defmodule <%= @module_name %>Web.Components.Badge do
+  use Phoenix.Component
+
+  @moduledoc """
+  Badge component
+
+  Requires the following Tailwind CSS config extension:
+
+  extend: {
+      animation: {
+        tilt: "tilt 5s ease-in-out infinite",
+      },
+      keyframes: {
+        tilt: {
+          "0%, 50%, 100%": { transform: "rotate(0deg)" },
+          "25%": { transform: "rotate(3deg)" },
+          "75%": { transform: "rotate(-3deg)" },
+        },
+      },
+  }
+  """
+
+  attr(:variant, :string, doc: "Badge variant", default: "primary")
+
+  attr(:from_color, :string)
+  attr(:to_color, :string)
+
+  attr(:class, :string, default: "", doc: "Class for badge")
+  attr(:rest, :global)
+
+  slot(:inner_block, required: true)
+
+  def badge(assigns) do
+    ~H"""
+    <div class={["w-fit mx-auto relative group"]} {@rest}>
+      <div class={bg_gradient_class(assigns)}>
+      </div>
+      <span
+        class={[
+          "text-xs font-medium me-2 px-2.5 py-1 rounded-lg relative",
+          variant_class(@variant),
+          @class
+        ]}
+        {@rest}
+      >
+        <%%= render_slot(@inner_block) %>
+      </span>
+    </div>
+    """
+  end
+
+  defp variant_class("primary"), do: "bg-black text-gray-100"
+  defp variant_class("secondary"), do: "bg-white border border-black"
+
+  defp bg_gradient_class(%{from_color: from_color, to_color: to_color}),
+    do:
+      "group-hover:opacity-100 animate-tilt transition duration-75 group-hover:duration-200 absolute blur-lg opacity-100 -inset-1.5 group-hover:-inset-2 rounded-lg bg-gradient-to-r from-#{from_color} to-#{to_color}"
+
+  defp bg_gradient_class(_assigns), do: ""
+end

test/tasks/install_test.exs

@@ -20,6 +20,11 @@ defmodule Mix.Tasks.Bloom.InstallTest do
                  "glow_button component installed successfully ✅ - lib/bloom_web/components/glow_button.ex"
       end)
 
+      expect(ShellMock, :info, fn msg ->
+        assert msg ==
+                 "Don't forget to import the component to your bloom_web.ex` file."
+      end)
+
       Mix.Tasks.Bloom.Install.run(["glow_button"])
     end
 
@@ -33,7 +38,8 @@ defmodule Mix.Tasks.Bloom.InstallTest do
       end)
 
       expect(ShellMock, :info, fn msg ->
-        assert msg == "Available components: glow_button"
+        assert msg ==
+                 "Available components: glow_button | code_snippet | hero | gradient_text | bento_grid | card | marquee | badge"
       end)
 
       Mix.Tasks.Bloom.Install.run(["nonexistent_component"])
@@ -45,7 +51,8 @@ defmodule Mix.Tasks.Bloom.InstallTest do
       end)
 
       expect(ShellMock, :info, fn msg ->
-        assert msg == "Available components: glow_button"
+        assert msg ==
+                 "Available components: glow_button | code_snippet | hero | gradient_text | bento_grid | card | marquee | badge"
       end)
 
       Mix.Tasks.Bloom.Install.run([])
@@ -64,6 +71,11 @@ defmodule Mix.Tasks.Bloom.InstallTest do
                  "glow_button component installed successfully ✅ - lib/bloom_web/components/glow_button.ex"
       end)
 
+      expect(ShellMock, :info, fn msg ->
+        assert msg ==
+                 "Don't forget to import the component to your bloom_web.ex` file."
+      end)
+
       Mix.Tasks.Bloom.Install.install_component("glow_button")
     end
   end