Update TopNav component

stories/navigation/HeaderTab.stories.js

@@ -1,38 +0,0 @@
-import HeaderTab from "../../app/components/navigation/HeaderTab";
-import Logo from "../../app/components/icons/Logo";
-
-export default {
-  title: "Components/Navigation/HeaderTab",
-  component: HeaderTab,
-  parameters: {
-    layout: "centered",
-    docs: {
-      description: {
-        component:
-          "A header tab container with decorative Union images and responsive behavior. Used to wrap content in the header with consistent styling and responsive breakpoint transitions.",
-      },
-    },
-  },
-  argTypes: {
-    stretch: {
-      control: { type: "boolean" },
-      description: "Whether the tab should stretch to fill available space",
-    },
-    className: {
-      control: { type: "text" },
-      description: "Additional CSS classes",
-    },
-  },
-  tags: ["autodocs"],
-};
-
-export const Default = {
-  args: {
-    stretch: false,
-  },
-  render: (args) => (
-    <HeaderTab {...args}>
-      <Logo size="homeHeaderMd" />
-    </HeaderTab>
-  ),
-};

stories/navigation/MenuBar.stories.js

@@ -16,7 +16,7 @@ export default {
   argTypes: {
     size: {
       control: { type: "select" },
-      options: ["xsmall", "default", "medium", "large"],
+      options: ["X Small", "Small", "Medium", "Large", "X Large"],
       description: "The size of the menu bar and its children",
     },
     className: {
@@ -29,13 +29,13 @@ export default {
 
 export const Default = {
   args: {
-    size: "default",
+    size: "Small",
   },
   render: (args) => (
     <MenuBar {...args}>
-      <MenuBarItem size="large">Home</MenuBarItem>
-      <MenuBarItem size="large">About</MenuBarItem>
-      <MenuBarItem size="large">Contact</MenuBarItem>
+      <MenuBarItem size="Large">Home</MenuBarItem>
+      <MenuBarItem size="Large">About</MenuBarItem>
+      <MenuBarItem size="Large">Contact</MenuBarItem>
     </MenuBar>
   ),
 };
@@ -45,38 +45,47 @@ export const Sizes = {
   render: () => (
     <div className="space-y-6">
       <div>
-        <h3 className="text-white font-semibold mb-3">XSmall Size</h3>
-        <MenuBar size="xsmall">
-          <MenuBarItem size="xsmall">Home</MenuBarItem>
-          <MenuBarItem size="xsmall">About</MenuBarItem>
-          <MenuBarItem size="xsmall">Contact</MenuBarItem>
+        <h3 className="text-white font-semibold mb-3">X Small Size</h3>
+        <MenuBar size="X Small">
+          <MenuBarItem size="X Small">Home</MenuBarItem>
+          <MenuBarItem size="X Small">About</MenuBarItem>
+          <MenuBarItem size="X Small">Contact</MenuBarItem>
         </MenuBar>
       </div>
 
       <div>
-        <h3 className="text-white font-semibold mb-3">Default Size</h3>
-        <MenuBar size="default">
-          <MenuBarItem size="large">Home</MenuBarItem>
-          <MenuBarItem size="large">About</MenuBarItem>
-          <MenuBarItem size="large">Contact</MenuBarItem>
+        <h3 className="text-white font-semibold mb-3">Small Size</h3>
+        <MenuBar size="Small">
+          <MenuBarItem size="Large">Home</MenuBarItem>
+          <MenuBarItem size="Large">About</MenuBarItem>
+          <MenuBarItem size="Large">Contact</MenuBarItem>
         </MenuBar>
       </div>
 
       <div>
         <h3 className="text-white font-semibold mb-3">Medium Size</h3>
-        <MenuBar size="medium">
-          <MenuBarItem size="large">Home</MenuBarItem>
-          <MenuBarItem size="large">About</MenuBarItem>
-          <MenuBarItem size="large">Contact</MenuBarItem>
+        <MenuBar size="Medium">
+          <MenuBarItem size="Large">Home</MenuBarItem>
+          <MenuBarItem size="Large">About</MenuBarItem>
+          <MenuBarItem size="Large">Contact</MenuBarItem>
         </MenuBar>
       </div>
 
       <div>
         <h3 className="text-white font-semibold mb-3">Large Size</h3>
-        <MenuBar size="large">
-          <MenuBarItem size="large">Home</MenuBarItem>
-          <MenuBarItem size="large">About</MenuBarItem>
-          <MenuBarItem size="large">Contact</MenuBarItem>
+        <MenuBar size="Large">
+          <MenuBarItem size="Large">Home</MenuBarItem>
+          <MenuBarItem size="Large">About</MenuBarItem>
+          <MenuBarItem size="Large">Contact</MenuBarItem>
+        </MenuBar>
+      </div>
+
+      <div>
+        <h3 className="text-white font-semibold mb-3">X Large Size</h3>
+        <MenuBar size="X Large">
+          <MenuBarItem size="X Large">Home</MenuBarItem>
+          <MenuBarItem size="X Large">About</MenuBarItem>
+          <MenuBarItem size="X Large">Contact</MenuBarItem>
         </MenuBar>
       </div>
     </div>

stories/navigation/MenuBarItem.stories.js

@@ -13,23 +13,14 @@ export default {
     },
   },
   argTypes: {
-    variant: {
+    mode: {
       control: { type: "select" },
-      options: ["default", "home"],
-      description: "The visual style variant of the menu item",
+      options: ["default", "inverse"],
+      description: "The visual style mode of the menu item",
     },
     size: {
       control: { type: "select" },
-      options: [
-        "xsmall",
-        "xsmallUseCases",
-        "homeMd",
-        "homeUseCases",
-        "large",
-        "largeUseCases",
-        "homeXlarge",
-        "xlarge",
-      ],
+      options: ["X Small", "Small", "Medium", "Large", "X Large"],
       description: "The size of the menu item",
     },
     disabled: {
@@ -48,23 +39,23 @@ export default {
 export const Default = {
   args: {
     children: "Menu Item",
-    size: "large",
+    size: "Large",
   },
 };
 
-export const Variants = {
+export const Modes = {
   args: {
     children: "Menu Item",
-    size: "large",
+    size: "Large",
   },
   render: (args) => (
     <div className="space-y-4">
       <div className="space-x-4">
-        <MenuBarItem {...args} variant="default">
+        <MenuBarItem {...args} mode="default">
           Default
         </MenuBarItem>
-        <MenuBarItem {...args} variant="home">
-          Home
+        <MenuBarItem {...args} mode="inverse">
+          Inverse
         </MenuBarItem>
       </div>
     </div>
@@ -72,7 +63,7 @@ export const Variants = {
   parameters: {
     docs: {
       description: {
-        story: "Different visual variants of the menu item component.",
+        story: "Different visual modes of the menu item component.",
       },
     },
   },
@@ -81,19 +72,25 @@ export const Variants = {
 export const Sizes = {
   args: {
     children: "Menu Item",
-    variant: "default",
+    mode: "default",
   },
   render: (args) => (
     <div className="space-y-4">
       <div className="space-x-4">
-        <MenuBarItem {...args} size="xsmall">
-          XSmall
+        <MenuBarItem {...args} size="X Small">
+          X Small
         </MenuBarItem>
-        <MenuBarItem {...args} size="large">
+        <MenuBarItem {...args} size="Small">
+          Small
+        </MenuBarItem>
+        <MenuBarItem {...args} size="Medium">
+          Medium
+        </MenuBarItem>
+        <MenuBarItem {...args} size="Large">
           Large
         </MenuBarItem>
-        <MenuBarItem {...args} size="xlarge">
-          XLarge
+        <MenuBarItem {...args} size="X Large">
+          X Large
         </MenuBarItem>
       </div>
     </div>
@@ -110,8 +107,8 @@ export const Sizes = {
 export const States = {
   args: {
     children: "Menu Item",
-    size: "large",
-    variant: "default",
+    size: "Large",
+    mode: "default",
   },
   render: (args) => (
     <div className="space-y-4">
@@ -132,30 +129,30 @@ export const States = {
   },
 };
 
-export const AllVariants = {
+export const AllModes = {
   args: {},
   render: () => (
     <div className="space-y-6">
       <div>
-        <h3 className="text-white font-semibold mb-3">Default Variant</h3>
+        <h3 className="text-white font-semibold mb-3">Default Mode</h3>
         <div className="space-x-4">
-          <MenuBarItem size="xsmall">XSmall</MenuBarItem>
-          <MenuBarItem size="large">Large</MenuBarItem>
-          <MenuBarItem size="xlarge">XLarge</MenuBarItem>
+          <MenuBarItem size="X Small" mode="default">X Small</MenuBarItem>
+          <MenuBarItem size="Large" mode="default">Large</MenuBarItem>
+          <MenuBarItem size="X Large" mode="default">X Large</MenuBarItem>
         </div>
       </div>
 
       <div>
-        <h3 className="text-white font-semibold mb-3">Home Variant</h3>
+        <h3 className="text-white font-semibold mb-3">Inverse Mode</h3>
         <div className="space-x-4">
-          <MenuBarItem variant="home" size="xsmall">
-            XSmall
+          <MenuBarItem mode="inverse" size="X Small">
+            X Small
           </MenuBarItem>
-          <MenuBarItem variant="home" size="large">
+          <MenuBarItem mode="inverse" size="Large">
             Large
           </MenuBarItem>
-          <MenuBarItem variant="home" size="xlarge">
-            XLarge
+          <MenuBarItem mode="inverse" size="X Large">
+            X Large
           </MenuBarItem>
         </div>
       </div>
@@ -163,11 +160,11 @@ export const AllVariants = {
       <div>
         <h3 className="text-white font-semibold mb-3">Disabled States</h3>
         <div className="space-x-4">
-          <MenuBarItem size="large" disabled>
+          <MenuBarItem size="Large" mode="default" disabled>
             Default Disabled
           </MenuBarItem>
-          <MenuBarItem variant="home" size="large" disabled>
-            Home Disabled
+          <MenuBarItem mode="inverse" size="Large" disabled>
+            Inverse Disabled
           </MenuBarItem>
         </div>
       </div>
@@ -177,7 +174,7 @@ export const AllVariants = {
     docs: {
       description: {
         story:
-          "Complete overview of all menu item variants, sizes, and states.",
+          "Complete overview of all menu item modes, sizes, and states.",
       },
     },
   },

stories/navigation/TopNav.stories.js

@@ -8,14 +8,14 @@ export default {
     docs: {
       description: {
         component:
-          "Unified navigation component that supports two variants: folderTop (home page style with yellow HeaderTab) and standard (dark sticky header). Supports all props from Figma design: size, loggedIn, folderTop, profile, and logIn.",
+          "Unified navigation component that supports two variants: folderTop (home page style with yellow tab container) and standard (dark sticky header). Supports all props from Figma design: size, loggedIn, folderTop, profile, and logIn.",
       },
     },
   },
   argTypes: {
     folderTop: {
       control: "boolean",
-      description: "When true, renders the home page variant with HeaderTab wrapper. When false, renders the standard header variant.",
+      description: "When true, renders the home page variant with yellow tab container. When false, renders the standard header variant.",
     },
     loggedIn: {
       control: "boolean",
@@ -63,7 +63,7 @@ export const HomePage = {
     docs: {
       description: {
         story:
-          "Home page variant (folderTop=true) with transparent background and yellow HeaderTab wrapper. Use the Viewport toolbar to see responsive behavior.",
+          "Home page variant (folderTop=true) with transparent background and yellow tab container. Use the Viewport toolbar to see responsive behavior.",
       },
     },
   },