add tab navigation component

CHANGELOG.md

@@ -2,6 +2,10 @@
 
 ## Unreleased
 
+### Added
+
+- New `tab_navigation/1` component.
+
 ## [0.1.5] - 2023-12-16
 
 ### Fixed

lib/doggo.ex

@@ -2063,6 +2063,91 @@ defmodule Doggo do
     """
   end
 
+  @doc """
+  Renders navigation tabs.
+
+  ## Example
+
+      <.tab_navigation current_value={@live_action}>
+        <:item
+          patch={~p"/pets/\#{@pet}"}
+          value={[:show, :edit]}
+        >
+          Profile
+        </:item>
+        <:item
+          patch={~p"/pets/\#{@pet}/appointments"}
+          value={:appointments}
+        >
+          Appointments
+        </:item>
+        <:item
+          patch={~p"/pets/\#{@pet}/messages"}
+          value={:messages}
+        >
+          Messages
+        </:item>
+      </.tab_navigation>
+  """
+  @doc type: :component
+
+  attr :label, :string,
+    default: "Tabs",
+    doc: """
+    Label for the `<nav>` element. The label is especially important if you have
+    multiple `<nav>` elements on the same page. If the page is localized, the
+    label should be translated, too. Do not include "navigation" in the label,
+    since screen readers will already announce the "navigation" role as part
+    of the label.
+    """
+
+  attr :current_value, :any,
+    required: true,
+    doc: """
+    The current value used to compare the item values with. If you use this
+    component to patch between different view actions, this could be the
+    `@live_action` attribute.
+    """
+
+  attr :class, :any,
+    default: [],
+    doc: "Additional CSS classes. Can be a string or a list of strings."
+
+  attr :rest, :global, doc: "Any additional HTML attributes."
+
+  slot :item, required: true do
+    attr :href, :string, doc: "Passed to `Phoenix.Component.link/1`."
+    attr :navigate, :string, doc: "Passed to `Phoenix.Component.link/1`."
+    attr :patch, :string, doc: "Passed to `Phoenix.Component.link/1`."
+
+    attr :value, :any,
+      doc: """
+      The value of the item is compared to the `current_value` attribute to
+      determine whether to add the `aria-current` attribute. This can be a
+      single value or a list of values, e.g. multiple live actions for which
+      the item should be marked as current.
+      """
+  end
+
+  def tab_navigation(assigns) do
+    ~H"""
+    <nav aria-label={@label} class={["tab-navigation" | List.wrap(@class)]} {@rest}>
+      <ul>
+        <li :for={item <- @item}>
+          <.link
+            href={item[:href]}
+            navigate={item[:navigate]}
+            patch={item[:patch]}
+            aria-current={@current_value in List.wrap(item.value) && "page"}
+          >
+            <%= render_slot(item) %>
+          </.link>
+        </li>
+      </ul>
+    </nav>
+    """
+  end
+
   @doc """
   Renders a drawer with a `brand`, `top`, and `bottom` slot.
 

priv/storybook/components/tab_navigation.story.exs

@@ -0,0 +1,21 @@
+defmodule Storybook.Components.TabNavigation do
+  use PhoenixStorybook.Story, :component
+
+  def function, do: &Doggo.tab_navigation/1
+
+  def variations do
+    [
+      %Variation{
+        id: :default,
+        attributes: %{
+          current_value: :owners
+        },
+        slots: [
+          ~s(<:item patch="/owners" value={:owners}>Owners</:item>),
+          ~s(<:item patch="/pets" value={:pets}>Pets</:item>),
+          ~s(<:item patch="/appointments" value={:appointments}>Appointments</:item>)
+        ]
+      }
+    ]
+  end
+end