Merge branch 'develop' into fix-heading-hierarchy-in-docs

Author: VincentSmedinga

packages/css/src/components/header/README.md

@@ -18,6 +18,7 @@ Includes the name of the application if it is not the general website.
 - On narrow windows, links can move from the inline menu to the collapsible one.
 - Labels should be short to help the inline menu fit on a single line whenever possible.
 - An icon can be added to the end of a link to make its destination easier to guess.
+- For websites with a brand name that feature the standard Amsterdam logo, only the emblem is shown on narrow screens.
 
 ## References
 

packages/css/src/components/header/header.scss

@@ -8,43 +8,55 @@
 
 .ams-header {
   /*
-  * The branding section is created twice: once outside the navigation and once hidden inside it.
-  * This keeps all navigation in one nav element and lets the menu wrap around the branding section.
-  * Display grid is used to let both branding sections overlap.
+  * The logo link section is created twice: once outside the navigation and once hidden inside it.
+  * This keeps all navigation in one nav element and lets the menu wrap around the logo link section.
+  * Display grid is used to let both logo link sections overlap.
   */
   display: grid;
+  font-family: var(--ams-header-font-family);
   padding-block: var(--ams-header-padding-block);
   padding-inline: var(--ams-header-padding-inline);
 }
 
-.ams-header__branding {
+.ams-header__logo-link {
   align-items: center;
-  align-self: start; // To align the branding section to the top of the header when it wraps
-  column-gap: var(--ams-header-branding-column-gap);
+  align-self: start; // To align the logo link section to the top of the header when it wraps
+  column-gap: var(--ams-header-logo-link-column-gap);
   display: flex;
-  grid-area: 1 / 1; // To allow this section to overlap with the second branding section
+  grid-area: 1 / 1; // To allow this section to overlap with the second logo link section
+  inline-size: fit-content;
+  outline-offset: var(--ams-header-logo-link-outline-offset);
+  text-decoration: none;
 }
 
-.ams-header__branding--hidden {
+.ams-header__logo-link--hidden {
   opacity: 0%;
-  user-select: none; // The hidden branding section should not be selectable
+  user-select: none; // The hidden logo link section should not be selectable
 }
 
-.ams-header__logo-link {
-  outline-offset: var(--ams-header-logo-link-outline-offset);
+.ams-header__logo-container {
+  flex-shrink: 0;
+  inline-size: 0.75rem;
+  overflow: hidden;
+
+  @media screen and (min-width: $ams-breakpoint-medium) {
+    inline-size: auto;
+  }
 }
 
-/* TODO Remove after updating Heading line heights in DES-973. */
-.ams-heading.ams-header__brand-name {
+.ams-header__brand-name {
+  color: var(--ams-header-brand-name-color);
+  font-size: var(--ams-header-brand-name-font-size);
+  font-weight: var(--ams-header-brand-name-font-weight);
   line-height: 1.35;
 }
 
 .ams-header__navigation {
   column-gap: var(--ams-header-navigation-column-gap);
   display: flex;
   flex-wrap: wrap;
-  grid-area: 1 / 1; // To allow this section to overlap with the branding section
-  // This section blocks pointer events initially, so the hidden branding section can't be activated.
+  grid-area: 1 / 1; // To allow this section to overlap with the logo link section
+  // This section blocks pointer events initially, so the hidden logo link section can't be activated.
   // The menu and collapsible menu set it back to auto, to make sure they can be activated.
   pointer-events: none;
   row-gap: var(--ams-header-navigation-row-gap);
@@ -83,7 +95,6 @@
 
 @mixin header-menu-action {
   color: var(--ams-header-menu-item-color);
-  font-family: var(--ams-header-menu-item-font-family);
   font-size: var(--ams-header-menu-item-font-size);
   font-weight: var(--ams-header-menu-item-font-weight);
   line-height: var(--ams-header-menu-item-line-height);
@@ -132,6 +143,7 @@
   column-gap: var(--ams-header-menu-item-column-gap);
   cursor: var(--ams-header-mega-menu-button-cursor);
   display: grid;
+  font-family: inherit;
   grid-auto-flow: column;
 
   @include header-menu-action;

packages/react/src/Header/Header.test.tsx

@@ -42,14 +42,6 @@ describe('Header', () => {
     expect(ref.current).toBe(component)
   })
 
-  it('renders a brand section', () => {
-    const { container } = render(<Header />)
-
-    const component = container.querySelector('.ams-header__branding')
-
-    expect(component).toBeInTheDocument()
-  })
-
   it('renders a logo link', () => {
     render(<Header />)
 
@@ -85,12 +77,17 @@ describe('Header', () => {
   it('renders an application name', () => {
     render(<Header brandName="Application name" />)
 
-    const heading = screen.getByRole('heading', {
-      level: 1,
-      name: 'Application name',
-    })
+    const brandName = screen.getByText('Application name')
+
+    expect(brandName).toBeInTheDocument()
+  })
+
+  it('renders the correct class for the responsive logo', () => {
+    const { container } = render(<Header brandName="Application name" />)
+
+    const logoContainer = container.querySelector('.ams-header__logo-container')
 
-    expect(heading).toBeInTheDocument()
+    expect(logoContainer).toBeInTheDocument()
   })
 
   it('renders a nav section', () => {

packages/react/src/Header/Header.tsx

@@ -6,7 +6,6 @@
 import clsx from 'clsx'
 import { forwardRef, useEffect, useState } from 'react'
 import type { ForwardedRef, HTMLAttributes, ReactNode } from 'react'
-import { Heading } from '../Heading'
 import { Icon } from '../Icon'
 import { Logo } from '../Logo'
 import type { LogoBrand } from '../Logo'
@@ -15,6 +14,19 @@ import { HeaderMenuIcon } from './HeaderMenuIcon'
 import { HeaderMenuLink } from './HeaderMenuLink'
 import useIsAfterBreakpoint from '../common/useIsAfterBreakpoint'
 
+const LogoLinkContent = ({ brandName, logoBrand }: { brandName?: string; logoBrand: LogoBrand }) => (
+  <>
+    <span className={clsx(logoBrand === 'amsterdam' && Boolean(brandName) && 'ams-header__logo-container')}>
+      <Logo brand={logoBrand} />
+    </span>
+    {brandName && (
+      <span aria-hidden="true" className="ams-header__brand-name">
+        {brandName}
+      </span>
+    )}
+  </>
+)
+
 export type HeaderProps = {
   /** The name of the application. */
   brandName?: string
@@ -64,29 +76,19 @@ const HeaderRoot = forwardRef(
 
     return (
       <header {...restProps} className={clsx('ams-header', className)} ref={ref}>
-        <div className="ams-header__branding">
-          <a className="ams-header__logo-link" href={logoLink}>
-            <span className="ams-visually-hidden">{logoLinkTitle}</span>
-            <Logo brand={logoBrand} />
-          </a>
-          {brandName && (
-            <Heading className="ams-header__brand-name" level={1} size="level-5">
-              {brandName}
-            </Heading>
-          )}
-        </div>
+        <a className="ams-header__logo-link" href={logoLink}>
+          <span className="ams-visually-hidden">{logoLinkTitle}</span>
+          <LogoLinkContent brandName={brandName} logoBrand={logoBrand} />
+        </a>
         {(children || menuItems) && (
           <nav aria-labelledby="primary-navigation" className="ams-header__navigation">
             <h2 className="ams-visually-hidden" id="primary-navigation">
               {navigationLabel}
             </h2>
 
-            {/* The branding section is recreated here, to make sure the page menu breaks at the right spot */}
-            <div aria-hidden className="ams-header__branding ams-header__branding--hidden">
-              <div className="ams-header__logo-link">
-                <Logo brand={logoBrand} />
-              </div>
-              {brandName && <span className="ams-heading ams-heading--5 ams-header__brand-name">{brandName}</span>}
+            {/* The logo link section is recreated here, to make sure the header menu wraps at the right spot */}
+            <div className="ams-header__logo-link ams-header__logo-link--hidden">
+              <LogoLinkContent brandName={brandName} logoBrand={logoBrand} />
             </div>
 
             <ul className="ams-header__menu">

proprietary/tokens/src/components/ams/header.tokens.json

@@ -1,18 +1,21 @@
 {
   "ams": {
     "header": {
+      "font-family": { "value": "{ams.typography.font-family}" },
       "padding-block": { "value": "{ams.space.grid.sm}" },
       "padding-inline": {
         "value": "{ams.grid.padding-inline}",
         "comment": "Must be the Grid inline padding, to make sure Header and Grid line up"
       },
-      "branding": {
-        "column-gap": { "value": "{ams.space.md}" },
-        "row-gap": { "value": "{ams.space.grid.xs}" }
-      },
       "logo-link": {
+        "column-gap": { "value": "{ams.space.md}" },
         "outline-offset": { "value": "{ams.focus.outline-offset}" }
       },
+      "brand-name": {
+        "color": { "value": "{ams.color.text.default}" },
+        "font-size": { "value": "{ams.typography.heading.4.font-size}" },
+        "font-weight": { "value": "{ams.typography.heading.font-weight}" }
+      },
       "mega-menu": {
         "button": {
           "cursor": { "value": "{ams.cursor.interactive}" },

storybook/src/components/Footer/Footer.stories.tsx

@@ -36,9 +36,6 @@ export const Default: Story = {
   args: {
     children: [
       <Footer.Spotlight key="footer-spotlight">
-        <Heading className="ams-visually-hidden" color="inverse" level={1}>
-          Colofon
-        </Heading>
         <Grid gapVertical="large" paddingVertical="medium">
           <Grid.Cell span={4}>
             <Heading className="ams-mb--xs" color="inverse" level={2} size="level-4">
@@ -74,7 +71,7 @@ export const Default: Story = {
             </LinkList>
           </Grid.Cell>
           <Grid.Cell span={4} start={{ narrow: 1, medium: 1, wide: 9 }}>
-            <section className="ams-mb--md">
+            <div className="ams-mb--md">
               <Heading className="ams-mb--xs" color="inverse" level={2} size="level-4">
                 Nieuwsbrief
               </Heading>
@@ -83,8 +80,8 @@ export const Default: Story = {
                   Inschrijven
                 </LinkList.Link>
               </LinkList>
-            </section>
-            <section>
+            </div>
+            <div>
               <Heading className="ams-mb--xs" color="inverse" level={2} size="level-4">
                 Volg ons
               </Heading>
@@ -95,7 +92,7 @@ export const Default: Story = {
                   </LinkList.Link>
                 ))}
               </LinkList>
-            </section>
+            </div>
           </Grid.Cell>
         </Grid>
       </Footer.Spotlight>,
@@ -115,9 +112,6 @@ export const OnderzoekEnStatistiek: Story = {
   args: {
     children: [
       <Footer.Spotlight key="footer-spotlight">
-        <Heading className="ams-visually-hidden" color="inverse" level={1}>
-          Colofon
-        </Heading>
         <Grid gapVertical="large" paddingVertical="medium">
           <Grid.Cell span={3}>
             <Heading className="ams-mb--xs" color="inverse" level={2} size="level-4">

storybook/src/components/Header/Header.stories.tsx

@@ -190,7 +190,7 @@ export const WithCustomTexts: Story = {
         </Grid.Cell>
       </Grid>
     ),
-    menuButtonText: 'Hoofdmenu',
+    menuButtonText: 'Alle onderwerpen',
     navigationLabel: 'Navigatie',
   },
 }

storybook/src/pages/amsterdam/common/AppHeader.tsx

@@ -3,7 +3,6 @@ import { headerMenuLinks, megaMenuLinks } from './menu'
 
 export const AppHeader = () => (
   <Header
-    menuButtonText="Alle onderwerpen"
     menuItems={headerMenuLinks.map(({ fixed, href, label, lang }) => (
       <Header.MenuLink fixed={fixed} href={href ?? '#'} key={label} lang={lang} rel={href ? 'external' : undefined}>
         {label}