feat(Header)!: Add responsive version of Amsterdam Logo, remove Heading level 1

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

@@ -13,29 +13,40 @@
   * Display grid is used to let both branding 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);
-  display: flex;
+  column-gap: var(--ams-header-logo-link-column-gap);
+  display: inline-flex;
   grid-area: 1 / 1; // To allow this section to overlap with the second branding section
+  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
 }
 
-.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;
 }
 
@@ -83,7 +94,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);

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,31 +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--level-5 ams-header__brand-name">{brandName}</span>
-              )}
+            <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}" },