Merge pull request #323 from WestpacGEL/314-gel-site-design-system-se…

…ction-article-header 314 gel site design system section article header
WestpacGEL · Nov 22, 2023 · 1013165 · 1013165
2 parents 48f5533 + 9686eed
commit 1013165
Show file tree

Hide file tree

Showing 2 changed files with 25 additions and 6 deletions.
diff --git a/apps/site/src/app/design-system/[...component]/components/header/header.component.tsx b/apps/site/src/app/design-system/[...component]/components/header/header.component.tsx
@@ -35,6 +35,23 @@ export function Header({ className, title }: { className?: string; title?: strin
       <button className={styles.hamburgerButton()} onClick={() => setOpen(open => !open)}>
         <HamburgerMenuIcon color="white" className="mx-auto" />
       </button>
+
+      <div className={styles.gridButtonWrapper()}>
+        <span className="hidden sm:block md:hidden">SM</span>
+        <span className="hidden md:block lg:hidden">MD</span>
+        <span className="hidden lg:block">LG</span>
+        <button
+          className={styles.gridButton()}
+          onClick={() => {
+            return;
+          }}
+        >
+          {new Array(4).fill(null).map((_, index) => {
+            return <span className="w-[0.25rem] items-stretch bg-white/30" key={index} />;
+          })}
+        </button>
+      </div>
+
       <h2 className={styles.title()}>{title}</h2>
     </header>
   );

diff --git a/apps/site/src/app/design-system/[...component]/components/header/header.styles.ts b/apps/site/src/app/design-system/[...component]/components/header/header.styles.ts
@@ -3,19 +3,21 @@ import { tv } from 'tailwind-variants';
 export const styles = tv(
   {
     slots: {
-      base: 'sticky top-0 z-50 flex w-full items-center gap-2 bg-hero px-3 py-2 transition-colors md:top-[-10.125rem] md:h-[14.25rem] md:items-end',
-      hamburgerButton: 'h-6 w-6 md:hidden',
-      title: 'typography-brand-8 font-bold text-white',
+      base: 'sticky top-0 z-50 flex w-full items-center gap-2 bg-hero px-2 py-3.5 transition-colors sm:px-4 md:top-[-10.125rem] md:h-[14.25rem] md:items-end',
+      gridButton: 'flex h-6 items-stretch gap-[0.125rem] p-1',
+      gridButtonWrapper: 'fixed right-2 top-2 hidden items-center text-white sm:flex',
+      hamburgerButton: 'fixed left-0 top-0 block h-4 w-4 translate-y-[-0.125rem] px-2 py-3.5 sm:left-2 lg:hidden',
+      title: 'typography-brand-7 pl-6 font-normal leading-none text-white sm:pl-6 lg:pl-0',
     },
     variants: {
       fixed: {
         true: {
           base: 'items-center',
-          title: 'pb-1',
+          title: '',
         },
         false: {
           base: '',
-          title: 'p-0 md:typography-brand-2 md:p-3',
+          title: 'md:typography-brand-2 md:px-2 md:pb-[1.75rem] md:pt-5 md:leading-none lg:ml-2',
         },
       },
       brand: {
@@ -31,7 +33,7 @@ export const styles = tv(
           base: 'bg-heading bg-[url("/imgs/backgrounds/stg-background.svg")] bg-cover',
         },
         wbc: {
-          base: 'bg-primary bg-[url("/imgs/backgrounds/wbc-background.svg")] bg-right-bottom bg-no-repeat',
+          base: 'bg-primary bg-[url("/imgs/backgrounds/wbc-background.svg")] bg-contain bg-right-bottom bg-no-repeat',
           title: 'uppercase',
         },
       },