adds navigation

src/ui/Navigation/Navigation.figma.tsx

@@ -0,0 +1,25 @@
+import { figma } from "@figma/code-connect";
+import { Navigation, NavigationItem } from "./Navigation";
+
+const FIGMA_URL_NAVIGATION =
+  "https://staging.figma.com/design/YfiqA0yWMXuLJAzkZNpBdy/SDS?node-id=7753-4609&t=piSsjqZPlyn7qp8D-11";
+const FIGMA_URL_NAVIGATION_ITEM =
+  "https://staging.figma.com/design/YfiqA0yWMXuLJAzkZNpBdy/SDS?node-id=7768-19970&t=piSsjqZPlyn7qp8D-11";
+
+figma.connect(Navigation, FIGMA_URL_NAVIGATION, {
+  props: { children: figma.children("Navigation Item") },
+  example: ({ children }) => <Navigation>{children}</Navigation>,
+});
+
+figma.connect(NavigationItem, FIGMA_URL_NAVIGATION_ITEM, {
+  props: {
+    text: figma.string("Label"),
+    isSelected: figma.enum("State", {
+      On: true,
+      Off: undefined,
+    }),
+  },
+  example: ({ text, isSelected }) => (
+    <NavigationItem isSelected={isSelected}>{text}</NavigationItem>
+  ),
+});

src/ui/Navigation/Navigation.stories.tsx

@@ -0,0 +1,50 @@
+import type { Meta, StoryObj } from "@storybook/react";
+import { useState } from "react";
+import { Navigation, NavigationItem } from "./Navigation";
+
+const meta: Meta<typeof Navigation> = {
+  component: Navigation,
+  title: "ui/Navigation",
+  parameters: { layout: "centered" },
+};
+export default meta;
+
+export const Default: StoryObj<typeof Navigation> = {
+  render: (args) => {
+    const [current, setCurrent] = useState(1);
+    return (
+      <Navigation {...args}>
+        <NavigationItem
+          isSelected={current === 1}
+          onPress={() => setCurrent(1)}
+        >
+          Item 1
+        </NavigationItem>
+        <NavigationItem
+          isSelected={current === 2}
+          onPress={() => setCurrent(2)}
+        >
+          Item 2
+        </NavigationItem>
+        <NavigationItem
+          isSelected={current === 3}
+          onPress={() => setCurrent(3)}
+        >
+          Item 3
+        </NavigationItem>
+        <NavigationItem
+          isSelected={current === 4}
+          onPress={() => setCurrent(4)}
+        >
+          Item 4
+        </NavigationItem>
+        <NavigationItem
+          isSelected={current === 5}
+          onPress={() => setCurrent(5)}
+        >
+          Item 5
+        </NavigationItem>
+      </Navigation>
+    );
+  },
+};

src/ui/Navigation/Navigation.tsx

@@ -0,0 +1,28 @@
+import clsx from "clsx";
+import { ComponentPropsWithoutRef } from "react";
+import { AnchorOrButton, AnchorOrButtonProps } from "ui/utils/AnchorOrButton";
+import "./navigation.css";
+
+export type NavigationProps = ComponentPropsWithoutRef<"nav">;
+export function Navigation({ className, ...props }: NavigationProps) {
+  const classNames = clsx(className, "navigation");
+  return <nav className={classNames} {...props} />;
+}
+
+export type NavigationItemProps = AnchorOrButtonProps & {
+  isSelected?: boolean;
+};
+export function NavigationItem({
+  className,
+  isSelected,
+  ...props
+}: NavigationItemProps) {
+  const classNames = clsx(className, "navigation-item");
+  return (
+    <AnchorOrButton
+      data-selected={isSelected || undefined}
+      className={classNames}
+      {...props}
+    />
+  );
+}

src/ui/Navigation/navigation.css

@@ -0,0 +1,33 @@
+.navigation {
+  display: flex;
+  gap: var(--sds-size-gap-sm);
+}
+.navigation-item {
+  --border-radius: var(--sds-size-radius-xs);
+  background: transparent;
+  border-radius: var(--border-radius);
+  color: var(--sds-color-text-default default);
+  padding: var(--sds-size-padding-sm);
+  position: relative;
+
+  &[data-selected] {
+    color: var(--sds-color-text-brand-onbrand-secondary);
+    background: var(--sds-color-bg-brand-secondary);
+  }
+
+  &[data-focus-visible] {
+    outline: none;
+    --offset: calc(var(--sds-responsive-border-width) * 2);
+    &::before {
+      content: "";
+      border-radius: calc(var(--border-radius) + var(--offset));
+      bottom: calc(-1 * var(--offset));
+      box-shadow: 0 0 0 var(--global-focus-ring-size)
+        var(--global-focus-ring-color);
+      left: calc(-1 * var(--offset));
+      position: absolute;
+      right: calc(-1 * var(--offset));
+      top: calc(-1 * var(--offset));
+    }
+  }
+}