feat: unify header structure (#278)

apps/docs/content/3-components/2-library/5-button.mdx

@@ -32,7 +32,7 @@ status: stable
   ```
   </TabPanel>
   <TabPanel value="tab13">
-  ```html
+  ```react
   import { Button } from '@govie-ds/react';
 
   <Button>Primary Button</Button>

apps/docs/package.json

@@ -45,6 +45,7 @@
     "re-resizable": "^6.9.17",
     "react": "^18.3.1",
     "react-dom": "^18.3.1",
+    "react-syntax-highlighter": "^15.5.0",
     "react-use": "^17.5.1",
     "sharp": "^0.33.4",
     "spellchecker-cli": "^6.2.0",
@@ -73,6 +74,7 @@
     "@types/node": "^20.14.14",
     "@types/react": "^18.3.3",
     "@types/react-dom": "^18.3.0",
+    "@types/react-syntax-highlighter": "^15.5.13",
     "cross-env": "^7.0.3",
     "eslint": "^9.8.0",
     "eslint-plugin-storybook": "^0.8.0",

apps/docs/src/components/chrome/top-bar.tsx

@@ -1,21 +1,16 @@
 'use client';
-import { usePathname } from 'next/navigation';
+import { Header } from '@govie-ds/react';
 import { useState } from 'react';
 import { MainMenuConnected } from '../navigation/main-menu-connected';
 import { MobileMenuConnected } from '../navigation/mobile-menu-connected';
-import { Header } from './header';
 
 export function TopBar() {
   const [isOpen, setIsOpen] = useState(false);
-  const pathname = usePathname();
 
   // TODO: review showing main menu on the home page
   return (
     <div>
-      <Header
-        showMobileMenu={pathname === '/' ? false : true}
-        onMobileMenuSelect={() => setIsOpen((isOpen) => !isOpen)}
-      />
+      <Header title={'Design System'} />
       <MainMenuConnected />
       <MobileMenuConnected
         isOpen={isOpen}

apps/docs/src/components/document/common/mdx.tsx

@@ -8,10 +8,12 @@ import {
   Button,
   Icon,
   Tag,
+  Header,
   Footer,
 } from '@govie-ds/react';
 import { MDXComponents } from 'mdx/types';
 import { useMDXComponent } from 'next-contentlayer/hooks';
+import SyntaxHighlighter from 'react-syntax-highlighter';
 import { BorderRadiusTable } from '../border/border-radius-table';
 import { BorderWidthTable } from '../border/border-width-table';
 import {
@@ -58,7 +60,6 @@ import { ColorPrimitives } from '@/components/document/color/color-primitives';
 import { TwoThirds, TwoThirdsOneThird } from '@/components/layouts/two-thirds';
 import { Highlight } from '@/components/typography/highlight';
 import { Link } from '@/components/typography/link';
-import { cn } from '@/lib/cn';
 
 export type MdxProps = {
   code: string;
@@ -77,17 +78,20 @@ const standardComponents: MDXComponents = {
     href ? <Link href={href}>{children}</Link> : null,
   ul: ({ children }) => <ul className="list-disc ml-xl">{children}</ul>,
   li: ({ children }) => <li className="text-md mb-sm">{children}</li>,
-  code: ({ children, className }) => (
-    <code
-      className={cn(
-        className
-          ? 'rounded-xs bg-gray-50 border-gray-100 border-xs p-3 text-gray-600 text-xs block mb-2xl'
-          : 'rounded-sm bg-gray-50 border-gray-100 border-xs p-xs text-gray-600 text-center text-2xs',
-      )}
-    >
-      {children}
-    </code>
-  ),
+  code: ({ children, className }) =>
+    className ? (
+      <SyntaxHighlighter
+        wrapLongLines
+        language={className}
+        className="max-h-[300px] overflow-scroll"
+      >
+        {children as string | string[]}
+      </SyntaxHighlighter>
+    ) : (
+      <code className="rounded-sm bg-gray-50 border-gray-100 border-xs p-xs text-gray-600 text-center text-2xs">
+        {children}
+      </code>
+    ),
   blockquote: ({ children }) => <Highlight>{children}</Highlight>,
 };
 
@@ -140,6 +144,7 @@ const documentComponents: MDXComponents = {
   Button: (props) => <Button {...props} />,
   Icon: (props) => <Icon {...props} />,
   Tag: (props) => <Tag {...props}>{props.children}</Tag>,
+  Header: (props) => <Header {...props}>{props.children}</Header>,
   Footer: (props) => <Footer {...props}>{props.children}</Footer>,
 };
 

apps/docs/src/components/document/common/wrap-components.tsx

@@ -8,6 +8,14 @@ export function wrapComponents(
     const Component = components[key];
 
     accumulator[key] = (props: Record<string, unknown>) => {
+      if (key === 'Header') {
+        return (
+          <div className="mb-2xl" {...props}>
+            <Component {...props} />
+          </div>
+        );
+      }
+
       const wrappers = wrapper({
         key,
       });

packages/design/tailwind/css/components.css

@@ -126,6 +126,122 @@
 
 /* End Tag */
 
+/* Header */
+
+.gi-header {
+  @apply gi-relative gi-overflow-x-clip gi-bg-emerald-800 gi-w-full;
+}
+.gi-header-language-bar {
+  @apply gi-hidden sm:gi-flex gi-bg-emerald-700 gi-h-10 gi-justify-end gi-items-center gi-gap-4 gi-pr-8;
+}
+.gi-header-language-item {
+  @apply gi-border gi-border-solid gi-border-transparent focus-visible:gi-outline-offset-0 focus-visible:gi-outline-none focus-visible:gi-border focus-visible:gi-border-solid focus-visible:gi-border-yellow-400 focus:gi-border focus:gi-border-solid focus:gi-border-yellow-400 gi-block gi-text-white hover:gi-bg-black hover:gi-bg-opacity-20 gi-py-1 gi-px-2 gi-rounded-sm;
+}
+.gi-header-menu {
+  @apply gi-h-20 gi-justify-between gi-items-center gi-flex gi-bg-emerald-800 gi-relative gi-py-3 gi-px-4 sm:gi-px-8 sm:gi-py-4;
+}
+.gi-header-logo-lg {
+  @apply md:gi-block gi-hidden;
+}
+.gi-header-logo-sm {
+  @apply md:gi-hidden gi-block;
+}
+.gi-header-title {
+  @apply gi-heading-sm gi-tracking-wider gi-text-white !gi-m-0 !gi-ml-4 md:!gi-ml-6 lg:!gi-ml-12 gi-grow;
+}
+.gi-header-tool-item {
+  @apply gi-border gi-border-solid gi-border-transparent gi-text-white focus-within:gi-outline-offset-0 focus-within:gi-outline-none focus-within:gi-border focus-within:gi-border-solid focus-within:gi-border-yellow-400 gi-flex gi-rounded-sm hover:gi-bg-black hover:gi-bg-opacity-20 gi-p-2 gi-items-center gi-gap-md gi-cursor-pointer focus:gi-border focus:gi-border-solid focus:gi-border-yellow-400;
+}
+.gi-header-tool-item span.label {
+  @apply gi-hidden sm:gi-block gi-text-2md gi-font-bold gi-text-white;
+}
+.gi-header-nav {
+  @apply gi-hidden sm:gi-flex gi-gap-4 gi-text-white;
+}
+.gi-header-nav a {
+  @apply gi-border gi-border-solid gi-border-transparent gi-text-2md gi-font-bold focus-visible:gi-outline-offset-0 focus-visible:gi-outline-none focus-visible:gi-border focus-visible:gi-border-solid focus-visible:gi-border-yellow-400 gi-rounded-sm active:gi-underline active:gi-underline-offset-sm hover:gi-bg-black hover:gi-bg-opacity-20 gi-p-2 focus:gi-border focus:gi-border-solid focus:gi-border-yellow-400;
+}
+.gi-header-separator {
+  @apply gi-hidden sm:gi-block gi-border-l-xs gi-border-solid gi-border-white gi-h-8 gi-mx-6;
+}
+.gi-header-overlay {
+  @apply gi-top-0 gi-z-900 gi-pointer-events-none gi-hidden gi-w-full gi-h-full gi-bg-black gi-opacity-20;
+}
+
+#MenuContainer:has(#SearchTrigger:checked) ~ #SearchContainer {
+  @apply gi-h-40;
+}
+
+#SearchTrigger:checked ~ .search-icon {
+  @apply gi-hidden;
+}
+
+#SearchTrigger:checked ~ .close-icon {
+  @apply gi-block;
+}
+
+#MenuContainer:has(#MobileMenuTrigger:checked) ~ #HeaderMenuContainer {
+  transform: translateX(0);
+}
+
+#MenuContainer:has(#MobileMenuTrigger:checked) ~ #HeaderOverlayContainer {
+  display: block;
+  position: fixed;
+}
+
+/* End Header */
+
+/* Tabs */
+
+.tab-item:checked + label {
+  @apply gi-border-solid gi-border-gray-200 gi-border-x-xs gi-border-t-xs gi-border-b-0 gi-bg-white gi-px-5 gi-py-3 gi--mt-2 gi-no-underline;
+}
+
+.tab-item:hover + label > * {
+  @apply gi-decoration-lg;
+}
+
+.tab-item:focus + label > * {
+  @apply gi-outline gi-outline-transparent gi-bg-yellow-400 gi-outline-2 gi-shadow gi-shadow-yellow-400;
+}
+
+div.gi-tabs:has([role='tablist'] .tab-item:nth-of-type(1):checked)
+  [role='tabpanel']:nth-of-type(2),
+div.gi-tabs:has([role='tablist'] .tab-item:nth-of-type(2):checked)
+  [role='tabpanel']:nth-of-type(3),
+div.gi-tabs:has([role='tablist'] .tab-item:nth-of-type(3):checked)
+  [role='tabpanel']:nth-of-type(4),
+div.gi-tabs:has([role='tablist'] .tab-item:nth-of-type(4):checked)
+  [role='tabpanel']:nth-of-type(5),
+div.gi-tabs:has([role='tablist'] .tab-item:nth-of-type(5):checked)
+  [role='tabpanel']:nth-of-type(6),
+div.gi-tabs:has([role='tablist'] .tab-item:nth-of-type(6):checked)
+  [role='tabpanel']:nth-of-type(7),
+div.gi-tabs:has([role='tablist'] .tab-item:nth-of-type(7):checked)
+  [role='tabpanel']:nth-of-type(8),
+div.gi-tabs:has([role='tablist'] .tab-item:nth-of-type(8):checked)
+  [role='tabpanel']:nth-of-type(9),
+div.gi-tabs:has([role='tablist'] .tab-item:nth-of-type(9):checked)
+  [role='tabpanel']:nth-of-type(10),
+div.gi-tabs:has([role='tablist'] .tab-item:nth-of-type(10):checked)
+  [role='tabpanel']:nth-of-type(11),
+div.gi-tabs:has([role='tablist'] .tab-item:nth-of-type(11):checked)
+  [role='tabpanel']:nth-of-type(12),
+div.gi-tabs:has([role='tablist'] .tab-item:nth-of-type(12):checked)
+  [role='tabpanel']:nth-of-type(13) {
+  display: block;
+}
+
+/* End Tabs */
+
+/* Input File */
+
+input[type='file' i] {
+  @apply gi-appearance-none gi-bg-[initial] gi-cursor-default gi-items-baseline gi-text-ellipsis gi-text-start gi-whitespace-pre;
+}
+
+/* End Input File */
+
 /* Section Break */
 
 .gi-section-break-sm {

packages/html/ds/src/header/components/headerMenu.html

@@ -2,26 +2,23 @@
 {% from 'icon/icon.html' import govieIcon %}
 {% macro headerMenu(props) %}
   <div
-    data-element="menu-container"
+    id="HeaderMenuContainer"
     class="gi-z-1000 gi-bg-white gi-absolute gi-h-full gi-w-full xs:gi-w-3/5 gi-translate-x-full gi-top-0 gi-right-0"
   >
     <div
       class="gi-border-gray-100 gi-border-b-xs gi-border-solid gi-h-20 gi-justify-end gi-items-center gi-flex gi-relative gi-py-3 gi-px-4 sm:gi-px-8 sm:gi-py-4"
     >
       <div class="gi-flex gi-items-center">
         <label
-          data-element="close-menu-icon"
+          for="MobileMenuTrigger"
           class="gi-border gi-border-solid gi-border-transparent sm:gi-hidden gi-rounded-sm hover:gi-bg-black hover:gi-bg-opacity-20 gi-p-2 gi-flex gi-items-center gi-gap-md gi-cursor-pointer focus:gi-border focus:gi-border-solid focus:gi-border-yellow-400 focus-within:gi-outline-offset-0 focus-within:gi-outline-none focus-within:gi-border focus-within:gi-border-solid focus-within:gi-border-yellow-400"
         >
           <span class="gi-text-2md gi-font-bold">Close</span>
           {{ govieIcon({"icon": "close"}) }}
         </label>
       </div>
     </div>
-    <ul
-      id="links-container-mobile"
-      class="gi-bg-white gi-px-4 sm:gi-px-8 gi-h-screen"
-    >
+    <ul class="gi-bg-white gi-px-4 sm:gi-px-8 gi-h-screen">
       {% for link in props.navLinks %}
         <li>
           <a