sonance-brand-mcp 1.2.5 → 1.3.2

package/dist/assets/components/menubar.stories.tsx

@@ -0,0 +1,208 @@
+"use client";
+
+import type { Meta, StoryObj } from "@storybook/react";
+import { useState } from "react";
+import {
+  Menubar,
+  MenubarCheckboxItem,
+  MenubarContent,
+  MenubarItem,
+  MenubarMenu,
+  MenubarRadioGroup,
+  MenubarRadioItem,
+  MenubarSeparator,
+  MenubarShortcut,
+  MenubarSub,
+  MenubarSubContent,
+  MenubarSubTrigger,
+  MenubarTrigger,
+} from "./menubar";
+
+const meta: Meta<typeof Menubar> = {
+  title: "Components/Navigation/Menubar",
+  component: Menubar,
+  parameters: {
+    layout: "centered",
+  },
+  tags: ["autodocs"],
+};
+
+export default meta;
+type Story = StoryObj<typeof Menubar>;
+
+export const Default: Story = {
+  render: () => (
+    <Menubar>
+      <MenubarMenu>
+        <MenubarTrigger>File</MenubarTrigger>
+        <MenubarContent>
+          <MenubarItem>
+            New Tab <MenubarShortcut>⌘T</MenubarShortcut>
+          </MenubarItem>
+          <MenubarItem>
+            New Window <MenubarShortcut>⌘N</MenubarShortcut>
+          </MenubarItem>
+          <MenubarItem disabled>New Incognito Window</MenubarItem>
+          <MenubarSeparator />
+          <MenubarSub>
+            <MenubarSubTrigger>Share</MenubarSubTrigger>
+            <MenubarSubContent>
+              <MenubarItem>Email link</MenubarItem>
+              <MenubarItem>Messages</MenubarItem>
+              <MenubarItem>Notes</MenubarItem>
+            </MenubarSubContent>
+          </MenubarSub>
+          <MenubarSeparator />
+          <MenubarItem>
+            Print... <MenubarShortcut>⌘P</MenubarShortcut>
+          </MenubarItem>
+        </MenubarContent>
+      </MenubarMenu>
+      <MenubarMenu>
+        <MenubarTrigger>Edit</MenubarTrigger>
+        <MenubarContent>
+          <MenubarItem>
+            Undo <MenubarShortcut>⌘Z</MenubarShortcut>
+          </MenubarItem>
+          <MenubarItem>
+            Redo <MenubarShortcut>⇧⌘Z</MenubarShortcut>
+          </MenubarItem>
+          <MenubarSeparator />
+          <MenubarSub>
+            <MenubarSubTrigger>Find</MenubarSubTrigger>
+            <MenubarSubContent>
+              <MenubarItem>Search the web</MenubarItem>
+              <MenubarSeparator />
+              <MenubarItem>Find...</MenubarItem>
+              <MenubarItem>Find Next</MenubarItem>
+              <MenubarItem>Find Previous</MenubarItem>
+            </MenubarSubContent>
+          </MenubarSub>
+          <MenubarSeparator />
+          <MenubarItem>Cut</MenubarItem>
+          <MenubarItem>Copy</MenubarItem>
+          <MenubarItem>Paste</MenubarItem>
+        </MenubarContent>
+      </MenubarMenu>
+      <MenubarMenu>
+        <MenubarTrigger>View</MenubarTrigger>
+        <MenubarContent>
+          <MenubarCheckboxItem>Always Show Bookmarks Bar</MenubarCheckboxItem>
+          <MenubarCheckboxItem checked>
+            Always Show Full URLs
+          </MenubarCheckboxItem>
+          <MenubarSeparator />
+          <MenubarItem inset>
+            Reload <MenubarShortcut>⌘R</MenubarShortcut>
+          </MenubarItem>
+          <MenubarItem disabled inset>
+            Force Reload <MenubarShortcut>⇧⌘R</MenubarShortcut>
+          </MenubarItem>
+          <MenubarSeparator />
+          <MenubarItem inset>Toggle Fullscreen</MenubarItem>
+          <MenubarSeparator />
+          <MenubarItem inset>Hide Sidebar</MenubarItem>
+        </MenubarContent>
+      </MenubarMenu>
+      <MenubarMenu>
+        <MenubarTrigger>Profiles</MenubarTrigger>
+        <MenubarContent>
+          <MenubarRadioGroup value="benoit">
+            <MenubarRadioItem value="andy">Andy</MenubarRadioItem>
+            <MenubarRadioItem value="benoit">Benoit</MenubarRadioItem>
+            <MenubarRadioItem value="luis">Luis</MenubarRadioItem>
+          </MenubarRadioGroup>
+          <MenubarSeparator />
+          <MenubarItem inset>Edit...</MenubarItem>
+          <MenubarSeparator />
+          <MenubarItem inset>Add Profile...</MenubarItem>
+        </MenubarContent>
+      </MenubarMenu>
+    </Menubar>
+  ),
+};
+
+function MenubarWithStateDemo() {
+  const [showBookmarks, setShowBookmarks] = useState(false);
+  const [showUrls, setShowUrls] = useState(true);
+  const [profile, setProfile] = useState("benoit");
+
+  return (
+    <Menubar>
+      <MenubarMenu>
+        <MenubarTrigger>File</MenubarTrigger>
+        <MenubarContent>
+          <MenubarItem>New File</MenubarItem>
+          <MenubarItem>Open...</MenubarItem>
+          <MenubarSeparator />
+          <MenubarItem>Save</MenubarItem>
+          <MenubarItem>Save As...</MenubarItem>
+        </MenubarContent>
+      </MenubarMenu>
+      <MenubarMenu>
+        <MenubarTrigger>View</MenubarTrigger>
+        <MenubarContent>
+          <MenubarCheckboxItem
+            checked={showBookmarks}
+            onCheckedChange={setShowBookmarks}
+          >
+            Show Bookmarks
+          </MenubarCheckboxItem>
+          <MenubarCheckboxItem
+            checked={showUrls}
+            onCheckedChange={setShowUrls}
+          >
+            Show Full URLs
+          </MenubarCheckboxItem>
+        </MenubarContent>
+      </MenubarMenu>
+      <MenubarMenu>
+        <MenubarTrigger>Profiles</MenubarTrigger>
+        <MenubarContent>
+          <MenubarRadioGroup value={profile} onValueChange={setProfile}>
+            <MenubarRadioItem value="andy">Andy</MenubarRadioItem>
+            <MenubarRadioItem value="benoit">Benoit</MenubarRadioItem>
+            <MenubarRadioItem value="luis">Luis</MenubarRadioItem>
+          </MenubarRadioGroup>
+        </MenubarContent>
+      </MenubarMenu>
+    </Menubar>
+  );
+}
+
+export const WithState: Story = {
+  render: () => <MenubarWithStateDemo />,
+};
+
+export const Simple: Story = {
+  render: () => (
+    <Menubar>
+      <MenubarMenu>
+        <MenubarTrigger>Products</MenubarTrigger>
+        <MenubarContent>
+          <MenubarItem>Architectural Speakers</MenubarItem>
+          <MenubarItem>Outdoor Speakers</MenubarItem>
+          <MenubarItem>Subwoofers</MenubarItem>
+          <MenubarItem>Amplifiers</MenubarItem>
+        </MenubarContent>
+      </MenubarMenu>
+      <MenubarMenu>
+        <MenubarTrigger>Support</MenubarTrigger>
+        <MenubarContent>
+          <MenubarItem>Documentation</MenubarItem>
+          <MenubarItem>Tutorials</MenubarItem>
+          <MenubarItem>Contact Support</MenubarItem>
+        </MenubarContent>
+      </MenubarMenu>
+      <MenubarMenu>
+        <MenubarTrigger>About</MenubarTrigger>
+        <MenubarContent>
+          <MenubarItem>Company</MenubarItem>
+          <MenubarItem>Careers</MenubarItem>
+          <MenubarItem>Press</MenubarItem>
+        </MenubarContent>
+      </MenubarMenu>
+    </Menubar>
+  ),
+};
+

package/dist/assets/components/menubar.tsx

@@ -0,0 +1,247 @@
+"use client";
+
+import * as React from "react";
+import * as MenubarPrimitive from "@radix-ui/react-menubar";
+import { Check, ChevronRight, Circle } from "lucide-react";
+import { cn } from "@/lib/utils";
+
+const MenubarMenu = MenubarPrimitive.Menu;
+const MenubarGroup = MenubarPrimitive.Group;
+const MenubarPortal = MenubarPrimitive.Portal;
+const MenubarSub = MenubarPrimitive.Sub;
+const MenubarRadioGroup = MenubarPrimitive.RadioGroup;
+
+const Menubar = React.forwardRef<
+  React.ElementRef<typeof MenubarPrimitive.Root>,
+  React.ComponentPropsWithoutRef<typeof MenubarPrimitive.Root>
+>(({ className, ...props }, ref) => (
+  <MenubarPrimitive.Root
+    ref={ref}
+    className={cn(
+      "flex h-10 items-center space-x-1 rounded-sm border border-border bg-background p-1",
+      className
+    )}
+    {...props}
+  />
+));
+Menubar.displayName = MenubarPrimitive.Root.displayName;
+
+const MenubarTrigger = React.forwardRef<
+  React.ElementRef<typeof MenubarPrimitive.Trigger>,
+  React.ComponentPropsWithoutRef<typeof MenubarPrimitive.Trigger>
+>(({ className, ...props }, ref) => (
+  <MenubarPrimitive.Trigger
+    ref={ref}
+    className={cn(
+      "flex cursor-default select-none items-center rounded-sm px-3 py-1.5 text-sm font-medium outline-none",
+      "focus:bg-secondary-hover focus:text-foreground",
+      "data-[state=open]:bg-secondary-hover data-[state=open]:text-foreground",
+      className
+    )}
+    {...props}
+  />
+));
+MenubarTrigger.displayName = MenubarPrimitive.Trigger.displayName;
+
+const MenubarSubTrigger = React.forwardRef<
+  React.ElementRef<typeof MenubarPrimitive.SubTrigger>,
+  React.ComponentPropsWithoutRef<typeof MenubarPrimitive.SubTrigger> & {
+    inset?: boolean;
+  }
+>(({ className, inset, children, ...props }, ref) => (
+  <MenubarPrimitive.SubTrigger
+    ref={ref}
+    className={cn(
+      "flex cursor-default select-none items-center rounded-sm px-2 py-1.5 text-sm outline-none",
+      "focus:bg-secondary-hover focus:text-foreground",
+      "data-[state=open]:bg-secondary-hover data-[state=open]:text-foreground",
+      inset && "pl-8",
+      className
+    )}
+    {...props}
+  >
+    {children}
+    <ChevronRight className="ml-auto h-4 w-4" />
+  </MenubarPrimitive.SubTrigger>
+));
+MenubarSubTrigger.displayName = MenubarPrimitive.SubTrigger.displayName;
+
+const MenubarSubContent = React.forwardRef<
+  React.ElementRef<typeof MenubarPrimitive.SubContent>,
+  React.ComponentPropsWithoutRef<typeof MenubarPrimitive.SubContent>
+>(({ className, ...props }, ref) => (
+  <MenubarPrimitive.SubContent
+    ref={ref}
+    className={cn(
+      "z-50 min-w-[8rem] overflow-hidden rounded-sm border border-border bg-card p-1 text-foreground shadow-md",
+      "data-[state=open]:animate-in data-[state=closed]:animate-out",
+      "data-[state=closed]:fade-out-0 data-[state=open]:fade-in-0",
+      "data-[state=closed]:zoom-out-95 data-[state=open]:zoom-in-95",
+      "data-[side=bottom]:slide-in-from-top-2",
+      "data-[side=left]:slide-in-from-right-2",
+      "data-[side=right]:slide-in-from-left-2",
+      "data-[side=top]:slide-in-from-bottom-2",
+      className
+    )}
+    {...props}
+  />
+));
+MenubarSubContent.displayName = MenubarPrimitive.SubContent.displayName;
+
+const MenubarContent = React.forwardRef<
+  React.ElementRef<typeof MenubarPrimitive.Content>,
+  React.ComponentPropsWithoutRef<typeof MenubarPrimitive.Content>
+>(
+  (
+    { className, align = "start", alignOffset = -4, sideOffset = 8, ...props },
+    ref
+  ) => (
+    <MenubarPrimitive.Portal>
+      <MenubarPrimitive.Content
+        ref={ref}
+        align={align}
+        alignOffset={alignOffset}
+        sideOffset={sideOffset}
+        className={cn(
+          "z-50 min-w-[12rem] overflow-hidden rounded-sm border border-border bg-card p-1 text-foreground shadow-md",
+          "data-[state=open]:animate-in data-[state=closed]:fade-out-0 data-[state=open]:fade-in-0 data-[state=closed]:zoom-out-95 data-[state=open]:zoom-in-95",
+          "data-[side=bottom]:slide-in-from-top-2 data-[side=left]:slide-in-from-right-2 data-[side=right]:slide-in-from-left-2 data-[side=top]:slide-in-from-bottom-2",
+          className
+        )}
+        {...props}
+      />
+    </MenubarPrimitive.Portal>
+  )
+);
+MenubarContent.displayName = MenubarPrimitive.Content.displayName;
+
+const MenubarItem = React.forwardRef<
+  React.ElementRef<typeof MenubarPrimitive.Item>,
+  React.ComponentPropsWithoutRef<typeof MenubarPrimitive.Item> & {
+    inset?: boolean;
+  }
+>(({ className, inset, ...props }, ref) => (
+  <MenubarPrimitive.Item
+    ref={ref}
+    className={cn(
+      "relative flex cursor-default select-none items-center rounded-sm px-2 py-1.5 text-sm outline-none",
+      "focus:bg-secondary-hover focus:text-foreground",
+      "data-[disabled]:pointer-events-none data-[disabled]:opacity-50",
+      inset && "pl-8",
+      className
+    )}
+    {...props}
+  />
+));
+MenubarItem.displayName = MenubarPrimitive.Item.displayName;
+
+const MenubarCheckboxItem = React.forwardRef<
+  React.ElementRef<typeof MenubarPrimitive.CheckboxItem>,
+  React.ComponentPropsWithoutRef<typeof MenubarPrimitive.CheckboxItem>
+>(({ className, children, checked, ...props }, ref) => (
+  <MenubarPrimitive.CheckboxItem
+    ref={ref}
+    className={cn(
+      "relative flex cursor-default select-none items-center rounded-sm py-1.5 pl-8 pr-2 text-sm outline-none",
+      "focus:bg-secondary-hover focus:text-foreground",
+      "data-[disabled]:pointer-events-none data-[disabled]:opacity-50",
+      className
+    )}
+    checked={checked}
+    {...props}
+  >
+    <span id="menubar-checkbox-item-span" className="absolute left-2 flex h-3.5 w-3.5 items-center justify-center">
+      <MenubarPrimitive.ItemIndicator>
+        <Check className="h-4 w-4" />
+      </MenubarPrimitive.ItemIndicator>
+    </span>
+    {children}
+  </MenubarPrimitive.CheckboxItem>
+));
+MenubarCheckboxItem.displayName = MenubarPrimitive.CheckboxItem.displayName;
+
+const MenubarRadioItem = React.forwardRef<
+  React.ElementRef<typeof MenubarPrimitive.RadioItem>,
+  React.ComponentPropsWithoutRef<typeof MenubarPrimitive.RadioItem>
+>(({ className, children, ...props }, ref) => (
+  <MenubarPrimitive.RadioItem
+    ref={ref}
+    className={cn(
+      "relative flex cursor-default select-none items-center rounded-sm py-1.5 pl-8 pr-2 text-sm outline-none",
+      "focus:bg-secondary-hover focus:text-foreground",
+      "data-[disabled]:pointer-events-none data-[disabled]:opacity-50",
+      className
+    )}
+    {...props}
+  >
+    <span id="menubar-radio-item-span" className="absolute left-2 flex h-3.5 w-3.5 items-center justify-center">
+      <MenubarPrimitive.ItemIndicator>
+        <Circle className="h-2 w-2 fill-current" />
+      </MenubarPrimitive.ItemIndicator>
+    </span>
+    {children}
+  </MenubarPrimitive.RadioItem>
+));
+MenubarRadioItem.displayName = MenubarPrimitive.RadioItem.displayName;
+
+const MenubarLabel = React.forwardRef<
+  React.ElementRef<typeof MenubarPrimitive.Label>,
+  React.ComponentPropsWithoutRef<typeof MenubarPrimitive.Label> & {
+    inset?: boolean;
+  }
+>(({ className, inset, ...props }, ref) => (
+  <MenubarPrimitive.Label
+    ref={ref}
+    className={cn(
+      "px-2 py-1.5 text-xs font-medium uppercase tracking-widest text-foreground-muted",
+      inset && "pl-8",
+      className
+    )}
+    {...props}
+  />
+));
+MenubarLabel.displayName = MenubarPrimitive.Label.displayName;
+
+const MenubarSeparator = React.forwardRef<
+  React.ElementRef<typeof MenubarPrimitive.Separator>,
+  React.ComponentPropsWithoutRef<typeof MenubarPrimitive.Separator>
+>(({ className, ...props }, ref) => (
+  <MenubarPrimitive.Separator
+    ref={ref}
+    className={cn("-mx-1 my-1 h-px bg-border", className)}
+    {...props}
+  />
+));
+MenubarSeparator.displayName = MenubarPrimitive.Separator.displayName;
+
+const MenubarShortcut = ({
+  className,
+  ...props
+}: React.HTMLAttributes<HTMLSpanElement>) => {
+  return (
+    <span id="menubar-shortcut-span" data-sonance-name="menubar"
+      {...props}
+    />
+  );
+};
+MenubarShortcut.displayname = "MenubarShortcut";
+
+export {
+  Menubar,
+  MenubarMenu,
+  MenubarTrigger,
+  MenubarContent,
+  MenubarItem,
+  MenubarSeparator,
+  MenubarLabel,
+  MenubarCheckboxItem,
+  MenubarRadioGroup,
+  MenubarRadioItem,
+  MenubarPortal,
+  MenubarSubContent,
+  MenubarSubTrigger,
+  MenubarGroup,
+  MenubarSub,
+  MenubarShortcut,
+};
+

package/dist/assets/components/navbar.stories.tsx

@@ -39,7 +39,7 @@ export const Default: Story = {
     <Navbar>
       <NavbarContent>
         <NavbarBrand>
-          <span className="text-xl font-semibold">Sonance</span>
+          <span id="nav-span-sonance" className="text-xl font-semibold">Sonance</span>
         </NavbarBrand>
         <NavbarItems>
           <NavbarItem href="#" active>Home</NavbarItem>
@@ -47,7 +47,7 @@ export const Default: Story = {
           <NavbarItem href="#">About</NavbarItem>
           <NavbarItem href="#">Contact</NavbarItem>
         </NavbarItems>
-        <Button size="sm">Sign In</Button>
+        <Button id="nav-button" size="sm">Sign In</Button>
       </NavbarContent>
     </Navbar>
   ),
@@ -58,14 +58,14 @@ export const Dark: Story = {
     <Navbar variant="dark">
       <NavbarContent>
         <NavbarBrand>
-          <span className="text-xl font-semibold">Sonance</span>
+          <span id="nav-span-sonance" className="text-xl font-semibold">Sonance</span>
         </NavbarBrand>
         <NavbarItems>
           <NavbarItem href="#" active>Home</NavbarItem>
           <NavbarItem href="#">Products</NavbarItem>
           <NavbarItem href="#">About</NavbarItem>
         </NavbarItems>
-        <Button size="sm" variant="inverted">Sign In</Button>
+        <Button id="nav-button-inverted" size="sm" variant="inverted">Sign In</Button>
       </NavbarContent>
     </Navbar>
   ),
@@ -77,14 +77,14 @@ export const Transparent: Story = {
       <Navbar variant="transparent" className="text-white">
         <NavbarContent>
           <NavbarBrand>
-            <span className="text-xl font-semibold">Sonance</span>
+            <span id="nav-span-sonance" className="text-xl font-semibold">Sonance</span>
           </NavbarBrand>
           <NavbarItems>
             <NavbarItem href="#" active>Home</NavbarItem>
             <NavbarItem href="#">Products</NavbarItem>
             <NavbarItem href="#">About</NavbarItem>
           </NavbarItems>
-          <Button size="sm" variant="inverted">Sign In</Button>
+          <Button id="nav-button-inverted" size="sm" variant="inverted">Sign In</Button>
         </NavbarContent>
       </Navbar>
     </div>
@@ -97,18 +97,18 @@ export const Blur: Story = {
       <Navbar variant="blur">
         <NavbarContent>
           <NavbarBrand>
-            <span className="text-xl font-semibold">Sonance</span>
+            <span id="nav-span-sonance" className="text-xl font-semibold">Sonance</span>
           </NavbarBrand>
           <NavbarItems>
             <NavbarItem href="#" active>Home</NavbarItem>
             <NavbarItem href="#">Products</NavbarItem>
             <NavbarItem href="#">About</NavbarItem>
           </NavbarItems>
-          <Button size="sm">Sign In</Button>
+          <Button id="nav-button" size="sm">Sign In</Button>
         </NavbarContent>
       </Navbar>
       <div className="p-8 text-white">
-        <p>Content behind the blurred navbar</p>
+        <p id="nav-p-content-behind-the-b">Content behind the blurred navbar</p>
       </div>
     </div>
   ),
@@ -117,14 +117,14 @@ export const Blur: Story = {
 export const Responsive: Story = {
   render: () => (
     <ResponsiveNavbar
-      brand={<span className="text-xl font-semibold">Sonance</span>}
+      brand={<span id="nav-span-sonance" className="text-xl font-semibold">Sonance</span>}
       items={[
         { label: 'Home', href: '#', active: true },
         { label: 'Products', href: '#' },
         { label: 'About', href: '#' },
         { label: 'Contact', href: '#' },
       ]}
-      actions={<Button size="sm">Sign In</Button>}
+      actions={<Button id="responsive-button" size="sm">Sign In</Button>}
     />
   ),
 };
@@ -135,7 +135,7 @@ export const WithLogo: Story = {
       <NavbarContent>
         <NavbarBrand>
           <div className="w-8 h-8 bg-primary rounded" />
-          <span className="text-xl font-semibold">Sonance</span>
+          <span id="nav-span-sonance" className="text-xl font-semibold">Sonance</span>
         </NavbarBrand>
         <NavbarItems>
           <NavbarItem href="#" active>Home</NavbarItem>
@@ -143,8 +143,8 @@ export const WithLogo: Story = {
           <NavbarItem href="#">Support</NavbarItem>
         </NavbarItems>
         <div className="flex items-center gap-2">
-          <Button size="sm" variant="ghost">Log In</Button>
-          <Button size="sm">Sign Up</Button>
+          <Button id="nav-button-ghost" size="sm" variant="ghost">Log In</Button>
+          <Button id="nav-button" size="sm">Sign Up</Button>
         </div>
       </NavbarContent>
     </Navbar>
@@ -157,46 +157,46 @@ export const ResponsiveMatrix: Story = {
     <div className="space-y-8">
       {/* Mobile */}
       <div>
-        <h4 className="text-xs uppercase text-foreground-muted mb-2">Mobile (375px)</h4>
+        <h4 id="nav-h4-mobile-375px" className="text-xs uppercase text-foreground-muted mb-2">Mobile (375px)</h4>
         <div className="w-[375px] border border-dashed border-border overflow-hidden">
           <ResponsiveNavbar
-            brand={<span className="text-lg font-semibold">Sonance</span>}
+            brand={<span id="responsive-matrix-span-sonance" className="text-lg font-semibold">Sonance</span>}
             items={[
               { label: 'Home', href: '#', active: true },
               { label: 'Products', href: '#' },
               { label: 'About', href: '#' },
             ]}
-            actions={<Button size="sm">Sign In</Button>}
+            actions={<Button id="responsive-matrix-button" size="sm">Sign In</Button>}
           />
         </div>
       </div>
       {/* Tablet */}
       <div>
-        <h4 className="text-xs uppercase text-foreground-muted mb-2">Tablet (768px)</h4>
+        <h4 id="responsive-matrix-h4-tablet-768px" className="text-xs uppercase text-foreground-muted mb-2">Tablet (768px)</h4>
         <div className="w-[768px] border border-dashed border-border overflow-hidden">
           <Navbar>
             <NavbarContent>
               <NavbarBrand>
-                <span className="text-xl font-semibold">Sonance</span>
+                <span id="nav-span-sonance" className="text-xl font-semibold">Sonance</span>
               </NavbarBrand>
               <NavbarItems>
                 <NavbarItem href="#" active>Home</NavbarItem>
                 <NavbarItem href="#">Products</NavbarItem>
                 <NavbarItem href="#">About</NavbarItem>
               </NavbarItems>
-              <Button size="sm">Sign In</Button>
+              <Button id="nav-button" size="sm">Sign In</Button>
             </NavbarContent>
           </Navbar>
         </div>
       </div>
       {/* Desktop */}
       <div>
-        <h4 className="text-xs uppercase text-foreground-muted mb-2">Desktop (1280px)</h4>
+        <h4 id="nav-h4-desktop-1280px" className="text-xs uppercase text-foreground-muted mb-2">Desktop (1280px)</h4>
         <div className="w-[1280px] border border-dashed border-border overflow-hidden">
           <Navbar>
             <NavbarContent>
               <NavbarBrand>
-                <span className="text-xl font-semibold">Sonance</span>
+                <span id="nav-span-sonance" className="text-xl font-semibold">Sonance</span>
               </NavbarBrand>
               <NavbarItems>
                 <NavbarItem href="#" active>Home</NavbarItem>
@@ -206,8 +206,8 @@ export const ResponsiveMatrix: Story = {
                 <NavbarItem href="#">Contact</NavbarItem>
               </NavbarItems>
               <div className="flex items-center gap-2">
-                <Button size="sm" variant="ghost">Log In</Button>
-                <Button size="sm">Sign Up</Button>
+                <Button id="nav-button-ghost" size="sm" variant="ghost">Log In</Button>
+                <Button id="nav-button" size="sm">Sign Up</Button>
               </div>
             </NavbarContent>
           </Navbar>