fixup! Feat(web-react): UNSTABLE_Header in React #DS-1524

lmc-eu · Dec 2, 2024 · dbf5908 · dbf5908
1 parent 167edd1
commit dbf5908
Show file tree

Hide file tree

Showing 2 changed files with 32 additions and 0 deletions.
diff --git a/packages/web-react/src/components/UNSTABLE_Header/demo/HeaderDefault.tsx b/packages/web-react/src/components/UNSTABLE_Header/demo/HeaderDefault.tsx
@@ -1,5 +1,6 @@
 import React from 'react';
 import { Link } from '../../Link';
+import { Navigation, NavigationItem, NavigationLink } from '../../Navigation';
 import { ProductLogo } from '../../ProductLogo';
 import { defaultSvgLogo } from '../../ProductLogo/demo/ProductLogoDefault';
 import { UNSTABLE_Header } from '../index';
@@ -10,6 +11,21 @@ const HeaderDefault = () => {
       <Link href="/">
         <ProductLogo>{defaultSvgLogo}</ProductLogo>
       </Link>
+      <Navigation isMain position="start">
+        <NavigationItem>
+          <NavigationLink href="/" isSelected>
+            Home
+          </NavigationLink>
+        </NavigationItem>
+        <NavigationItem>
+          <NavigationLink href="/">Not Home</NavigationLink>
+        </NavigationItem>
+        <NavigationItem>
+          <NavigationLink href="/" isDisabled>
+            Home for Disabled
+          </NavigationLink>
+        </NavigationItem>
+      </Navigation>
     </UNSTABLE_Header>
   );
 };

diff --git a/packages/web-react/src/components/UNSTABLE_Header/demo/HeaderFluid.tsx b/packages/web-react/src/components/UNSTABLE_Header/demo/HeaderFluid.tsx
@@ -1,5 +1,6 @@
 import React from 'react';
 import { Link } from '../../Link';
+import { Navigation, NavigationItem, NavigationLink } from '../../Navigation';
 import { ProductLogo } from '../../ProductLogo';
 import { defaultSvgLogo } from '../../ProductLogo/demo/ProductLogoDefault';
 import { UNSTABLE_Header } from '..';
@@ -10,6 +11,21 @@ const HeaderFluid = () => {
       <Link href="/">
         <ProductLogo>{defaultSvgLogo}</ProductLogo>
       </Link>
+      <Navigation isMain position="start">
+        <NavigationItem>
+          <NavigationLink href="/" isSelected>
+            Home
+          </NavigationLink>
+        </NavigationItem>
+        <NavigationItem>
+          <NavigationLink href="/">Not Home</NavigationLink>
+        </NavigationItem>
+        <NavigationItem>
+          <NavigationLink href="/" isDisabled>
+            Home for Disabled
+          </NavigationLink>
+        </NavigationItem>
+      </Navigation>
     </UNSTABLE_Header>
   );
 };