Using grid layout

Amsterdam · Nov 24, 2023 · 1f5d146 · 1f5d146
1 parent db02002
commit 1f5d146
Show file tree

Hide file tree

Showing 3 changed files with 87 additions and 46 deletions.
diff --git a/packages/css/src/header/header.scss b/packages/css/src/header/header.scss
@@ -6,52 +6,94 @@
 @import "../../utils/breakpoint";
 
 .amsterdam-header {
-  align-items: center;
-  background-color: white;
-  column-gap: 0.88rem;
-  display: flex;
-  flex-wrap: wrap;
-  justify-content: space-between;
+  --amsterdam-grid-gap: var(--amsterdam-grid-density-low-gap);
+  --amsterdam-grid-padding-inline: var(--amsterdam-grid-density-low-padding-inline);
+
+  column-gap: var(--amsterdam-grid-gap);
+  display: grid;
+  grid-template-areas: "logo logo logo logo";
+  grid-template-columns: repeat(var(--amsterdam-grid-column-count), 1fr);
+  grid-template-rows: auto;
   padding-block: 0.88rem;
+  padding-inline: var(--amsterdam-grid-padding-inline);
   row-gap: 1.5rem;
 
-  &__column:first-child {
-    order: 1;
+  @media screen and (max-width: $amsterdam-breakpoint-medium) {
+    *[class*="menu__item"]:not([class$="--mobile"]) {
+      display: none;
+      visibility: hidden;
+    }
   }
+}
+
+.amsterdam-header--has-menu {
+  grid-template-areas: "logo logo menu menu";
+}
 
-  &__column:nth-child(2) {
-    flex: 1 1 100%;
-    order: 3;
+.amsterdam-header--has-title {
+  grid-template-areas:
+    "logo logo logo logo"
+    "title title title title";
+  grid-template-rows: repeat(2, auto);
+}
+
+.amsterdam-header--has-title.amsterdam-header--has-menu {
+  grid-template-areas:
+    "logo logo menu menu"
+    "title title title title";
+  grid-template-rows: repeat(2, auto);
+}
+
+@media screen and (min-width: $amsterdam-breakpoint-medium) {
+  .amsterdam-header {
+    grid-template-areas: "logo logo menu menu menu menu menu menu";
+    grid-template-columns: repeat(var(--amsterdam-grid-medium-column-count), 1fr);
   }
 
-  &__column:nth-child(3) {
-    flex: 1 0 auto;
-    order: 2;
+  .amsterdam-header--has-menu {
+    grid-template-areas: "logo logo menu menu menu menu menu menu";
   }
 
-  @media screen and (max-width: $amsterdam-breakpoint-medium) {
-    *[class*="menu__item"]:not([class$="--mobile"]) {
-      display: none;
-      visibility: hidden;
-    }
+  .amsterdam-header--has-title {
+    grid-template-areas: "logo logo title title title title title title";
   }
 
-  @media screen and (min-width: $amsterdam-breakpoint-wide) {
-    column-gap: 4rem;
-    flex-wrap: nowrap;
-    row-gap: 2rem;
+  .amsterdam-header--has-title.amsterdam-header--has-menu {
+    grid-template-areas:
+      "logo logo menu menu menu menu menu menu"
+      "title title title title title title title title";
+    grid-template-rows: repeat(2, auto);
+  }
+}
 
-    &__column:first-child {
-      flex: 0 1 auto;
-    }
+@media screen and (min-width: $amsterdam-breakpoint-wide) {
+  .amsterdam-header {
+    grid-template-areas: "logo logo logo logo logo logo logo logo logo logo logo logo";
+    grid-template-columns: repeat(var(--amsterdam-grid-wide-column-count), 1fr);
+    grid-template-rows: auto;
+  }
 
-    &__column:nth-child(2) {
-      flex: 1 0 auto;
-      order: 2;
-    }
+  .amsterdam-header--has-menu {
+    grid-template-areas: "logo logo menu menu menu menu menu menu menu menu menu menu";
+  }
 
-    &__column:nth-child(3) {
-      order: 3;
-    }
+  .amsterdam-header--has-title {
+    grid-template-areas: "logo logo title title title title title title title title title title";
   }
+
+  .amsterdam-header--has-title.amsterdam-header--has-menu {
+    grid-template-areas: "logo logo title title title title title menu menu menu menu menu";
+  }
+}
+
+.amsterdam-header__column--logo {
+  grid-area: logo;
+}
+
+.amsterdam-header__column--title {
+  grid-area: title;
+}
+
+.amsterdam-header__column--menu {
+  grid-area: menu;
 }
diff --git a/packages/react/src/Header/Header.tsx b/packages/react/src/Header/Header.tsx
@@ -7,6 +7,7 @@ import clsx from 'clsx'
 import { ForwardedRef, forwardRef, HTMLAttributes, ReactNode } from 'react'
 import { Heading } from '../Heading'
 import { Logo, LogoBrand } from '../Logo'
+import { VisuallyHidden } from '../VisuallyHidden'
 
 export interface HeaderProps extends HTMLAttributes<HTMLElement> {
   logoBrand?: LogoBrand
@@ -26,28 +27,29 @@ export const Header = forwardRef(
       ref={ref}
       className={clsx(
         'amsterdam-header',
-        // title !== null && 'amsterdam-header--has-title',
-        // menu && 'amsterdam-header--has-menu',
+        title && 'amsterdam-header--has-title',
+        menu && 'amsterdam-header--has-menu',
         className,
       )}
     >
-      <div className="amsterdam-header__column">
+      <div className="amsterdam-header__column amsterdam-header__column--logo">
         {logoLink ? (
-          <a href={logoLink} title={logoLinkTitle} className="amsterdam-header__logo-link">
+          <a href={logoLink} className="amsterdam-header__logo-link">
+            {logoLinkTitle && <VisuallyHidden>{logoLinkTitle}</VisuallyHidden>}
             <Logo brand={logoBrand} />
           </a>
         ) : (
           <Logo brand={logoBrand} />
         )}
       </div>
       {title && (
-        <div className="amsterdam-header__column">
+        <div className="amsterdam-header__column amsterdam-header__column--title">
           <Heading level={3} size="level-3">
             {title}
           </Heading>
         </div>
       )}
-      {menu && <div className="amsterdam-header__column">{menu}</div>}
+      {menu && <div className="amsterdam-header__column amsterdam-header__column--menu">{menu}</div>}
     </header>
   ),
 )

diff --git a/storybook/storybook-react/src/Header/Header.stories.tsx b/storybook/storybook-react/src/Header/Header.stories.tsx
@@ -10,11 +10,6 @@ import { Meta, StoryObj } from '@storybook/react'
 const meta = {
   title: 'Containers/Header',
   component: Header,
-  parameters: {
-    backgrounds: {
-      default: 'dark',
-    },
-  },
 } satisfies Meta<typeof Header>
 
 export default meta
@@ -45,7 +40,9 @@ export const WithHeaderMenu: Story = {
         <PageMenu.Link href="#" icon={LoginIcon}>
           Inloggen Mijn Amsterdam
         </PageMenu.Link>
-        <PageMenu.Button icon={MenuIcon}>Alle onderwerpen</PageMenu.Button>
+        <PageMenu.Button icon={MenuIcon} showOnMobile>
+          Menu
+        </PageMenu.Button>
       </PageMenu>
     ),
   },
@@ -61,7 +58,7 @@ export const WithBoth: Story = {
           Inloggen Mijn Amsterdam
         </PageMenu.Link>
         <PageMenu.Button icon={MenuIcon} showOnMobile>
-          Alle onderwerpen
+          Menu
         </PageMenu.Button>
       </PageMenu>
     ),