add badge component

lib/doggo.ex

@@ -123,6 +123,33 @@ defmodule Doggo do
     """
   end
 
+  @doc """
+  Renders a badge, typically used for drawing attention to elements like
+  notification counts.
+
+  ## Examples
+
+      <.badge>8</.badge>
+  """
+
+  attr :size, :atom,
+    values: [:small, :normal, :medium, :large],
+    default: :normal
+
+  attr :variant, :atom,
+    values: [nil, :primary, :secondary, :info, :success, :warning, :danger],
+    default: nil
+
+  slot :inner_block, required: true
+
+  def badge(assigns) do
+    ~H"""
+    <span class={["badge", size_class(@size), variant_class(@variant)]}>
+      <%= render_slot(@inner_block) %>
+    </span>
+    """
+  end
+
   @doc """
   Renders a box for a section on the page.
 

priv/storybook/components/badge.story.exs

@@ -0,0 +1,47 @@
+defmodule Storybook.Components.Badge do
+  use PhoenixStorybook.Story, :component
+
+  def function, do: &Doggo.badge/1
+
+  def variations do
+    [
+      %Variation{
+        id: :default,
+        slots: ["8"]
+      },
+      %Variation{
+        id: :large_count,
+        slots: ["+1000"]
+      },
+      %VariationGroup{
+        id: :variants,
+        variations:
+          for variant <- [
+                :primary,
+                :secondary,
+                :info,
+                :success,
+                :warning,
+                :danger
+              ] do
+            %Variation{
+              id: variant,
+              attributes: %{variant: variant},
+              slots: ["8"]
+            }
+          end
+      },
+      %VariationGroup{
+        id: :sizes,
+        variations:
+          for size <- [:small, :normal, :medium, :large] do
+            %Variation{
+              id: size,
+              attributes: %{size: size},
+              slots: ["8"]
+            }
+          end
+      }
+    ]
+  end
+end