From 9924955c982b907ae8f7c0024a6fd047d49d99b9 Mon Sep 17 00:00:00 2001 From: alimpens Date: Wed, 19 Feb 2025 09:46:25 +0100 Subject: [PATCH 01/22] Add responsive Header Logo --- .../css/src/components/header/header.scss | 16 +++++++++++++ packages/react/src/Header/Header.tsx | 11 +++++++-- packages/react/src/Logo/Logo.tsx | 3 +++ .../Logo/brand/LogoAmsterdamEmblemOnly.tsx | 24 +++++++++++++++++++ packages/react/src/Logo/brand/index.ts | 1 + 5 files changed, 53 insertions(+), 2 deletions(-) create mode 100644 packages/react/src/Logo/brand/LogoAmsterdamEmblemOnly.tsx diff --git a/packages/css/src/components/header/header.scss b/packages/css/src/components/header/header.scss index 9280b9980e..b7920ecd86 100644 --- a/packages/css/src/components/header/header.scss +++ b/packages/css/src/components/header/header.scss @@ -30,6 +30,22 @@ user-select: none; // The hidden branding section should not be selectable } +// Increase the specificity to override the default logo styles +.ams-header__logo.ams-header__logo { + display: none; + + @media screen and (min-width: $ams-breakpoint-medium) { + display: block; + } +} + +// Increase the specificity to override the default logo styles +.ams-header__logo--emblem-only.ams-header__logo--emblem-only { + @media screen and (min-width: $ams-breakpoint-medium) { + display: none; + } +} + .ams-header__logo-link { outline-offset: var(--ams-header-logo-link-outline-offset); } diff --git a/packages/react/src/Header/Header.tsx b/packages/react/src/Header/Header.tsx index a89cab877a..03ef14a50a 100644 --- a/packages/react/src/Header/Header.tsx +++ b/packages/react/src/Header/Header.tsx @@ -15,6 +15,13 @@ import { HeaderMenuIcon } from './HeaderMenuIcon' import { HeaderMenuLink } from './HeaderMenuLink' import useIsAfterBreakpoint from '../common/useIsAfterBreakpoint' +const LogoComponent = ({ logoBrand }: { logoBrand: LogoBrand }) => ( + <> + + {logoBrand === 'amsterdam' && } + +) + export type HeaderProps = { /** The name of the application. */ brandName?: string @@ -67,7 +74,7 @@ const HeaderRoot = forwardRef(
{logoLinkTitle} - + {brandName && ( @@ -84,7 +91,7 @@ const HeaderRoot = forwardRef( {/* The branding section is recreated here, to make sure the page menu breaks at the right spot */}
- +
{brandName && ( {brandName} diff --git a/packages/react/src/Logo/Logo.tsx b/packages/react/src/Logo/Logo.tsx index 9845ffb873..f6ccedfb45 100644 --- a/packages/react/src/Logo/Logo.tsx +++ b/packages/react/src/Logo/Logo.tsx @@ -8,6 +8,7 @@ import { forwardRef } from 'react' import type { ForwardedRef, ForwardRefExoticComponent, RefAttributes, SVGProps } from 'react' import { LogoAmsterdam, + LogoAmsterdamEmblemOnly, LogoGgdAmsterdam, LogoMuseumWeesp, LogoStadsarchief, @@ -17,6 +18,7 @@ import { export type LogoBrand = | 'amsterdam' + | 'amsterdam-emblem-only' | 'ggd-amsterdam' | 'museum-weesp' | 'stadsarchief' @@ -33,6 +35,7 @@ const logoConfig: Record< ForwardRefExoticComponent & RefAttributes> > = { amsterdam: LogoAmsterdam, + 'amsterdam-emblem-only': LogoAmsterdamEmblemOnly, 'ggd-amsterdam': LogoGgdAmsterdam, 'museum-weesp': LogoMuseumWeesp, stadsarchief: LogoStadsarchief, diff --git a/packages/react/src/Logo/brand/LogoAmsterdamEmblemOnly.tsx b/packages/react/src/Logo/brand/LogoAmsterdamEmblemOnly.tsx new file mode 100644 index 0000000000..3c53b4adba --- /dev/null +++ b/packages/react/src/Logo/brand/LogoAmsterdamEmblemOnly.tsx @@ -0,0 +1,24 @@ +import { forwardRef } from 'react' +import type { ForwardedRef, SVGProps } from 'react' + +const LogoAmsterdamEmblemOnly = forwardRef((props: SVGProps, ref: ForwardedRef) => ( + +)) + +LogoAmsterdamEmblemOnly.displayName = 'LogoAmsterdamEmblemOnly' + +export default LogoAmsterdamEmblemOnly diff --git a/packages/react/src/Logo/brand/index.ts b/packages/react/src/Logo/brand/index.ts index 0112d50d16..34de689e96 100644 --- a/packages/react/src/Logo/brand/index.ts +++ b/packages/react/src/Logo/brand/index.ts @@ -1,4 +1,5 @@ export { default as LogoAmsterdam } from './LogoAmsterdam' +export { default as LogoAmsterdamEmblemOnly } from './LogoAmsterdamEmblemOnly' export { default as LogoGgdAmsterdam } from './LogoGgdAmsterdam' export { default as LogoMuseumWeesp } from './LogoMuseumWeesp' export { default as LogoStadsarchief } from './LogoStadsarchief' From acad285fd6261c56092b62ed65abdb17348b7bb0 Mon Sep 17 00:00:00 2001 From: alimpens Date: Wed, 19 Feb 2025 10:06:29 +0100 Subject: [PATCH 02/22] Add responsiveLogo prop --- packages/react/src/Header/Header.tsx | 17 +++++++++++------ 1 file changed, 11 insertions(+), 6 deletions(-) diff --git a/packages/react/src/Header/Header.tsx b/packages/react/src/Header/Header.tsx index 03ef14a50a..6ba5dac8af 100644 --- a/packages/react/src/Header/Header.tsx +++ b/packages/react/src/Header/Header.tsx @@ -15,10 +15,12 @@ import { HeaderMenuIcon } from './HeaderMenuIcon' import { HeaderMenuLink } from './HeaderMenuLink' import useIsAfterBreakpoint from '../common/useIsAfterBreakpoint' -const LogoComponent = ({ logoBrand }: { logoBrand: LogoBrand }) => ( +const LogoComponent = ({ logoBrand, responsiveLogo }: { logoBrand: LogoBrand; responsiveLogo: boolean }) => ( <> - - {logoBrand === 'amsterdam' && } + + {logoBrand === 'amsterdam' && responsiveLogo && ( + + )} ) @@ -26,7 +28,7 @@ export type HeaderProps = { /** The name of the application. */ brandName?: string /** The name of the brand for which to display the logo. */ - logoBrand?: LogoBrand + logoBrand?: Exclude /** The url for the link on the logo. */ logoLink?: string /** The accessible text for the link on the logo. */ @@ -39,6 +41,8 @@ export type HeaderProps = { navigationLabel?: string /** Whether the menu button is visible on wide screens. */ noMenuButtonOnWideWindow?: boolean + /** Whether the Amsterdam logo should be responsive. */ + responsiveLogo?: boolean } & HTMLAttributes const HeaderRoot = forwardRef( @@ -54,6 +58,7 @@ const HeaderRoot = forwardRef( menuItems, navigationLabel = 'Hoofdnavigatie', noMenuButtonOnWideWindow, + responsiveLogo = true, ...restProps }: HeaderProps, ref: ForwardedRef, @@ -74,7 +79,7 @@ const HeaderRoot = forwardRef(
{logoLinkTitle} - + {brandName && ( @@ -91,7 +96,7 @@ const HeaderRoot = forwardRef( {/* The branding section is recreated here, to make sure the page menu breaks at the right spot */}
- +
{brandName && ( {brandName} From 52b406dbcbf4923d80d952b6db3f138e9a60a8f5 Mon Sep 17 00:00:00 2001 From: alimpens Date: Wed, 19 Feb 2025 10:11:41 +0100 Subject: [PATCH 03/22] Add tests --- packages/react/src/Header/Header.test.tsx | 16 ++++++++++++++++ 1 file changed, 16 insertions(+) diff --git a/packages/react/src/Header/Header.test.tsx b/packages/react/src/Header/Header.test.tsx index c4f6e99f4d..2ad445a773 100644 --- a/packages/react/src/Header/Header.test.tsx +++ b/packages/react/src/Header/Header.test.tsx @@ -66,6 +66,22 @@ describe('Header', () => { expect(component).toBeInTheDocument() }) + it('renders two logo’s when brand is "amsterdam" and responsiveLogo is true', () => { + const { container } = render(
) + + const component = container.querySelectorAll('.ams-logo') + + expect(component).toHaveLength(2) + }) + + it('renders one logo when brand is "amsterdam" and responsiveLogo is false', () => { + const { container } = render(
) + + const component = container.querySelectorAll('.ams-logo') + + expect(component).toHaveLength(1) + }) + it('renders a custom logo link', () => { render(
) From 53c47b6145bb0160bd718f393afc3b73907c6e69 Mon Sep 17 00:00:00 2001 From: alimpens Date: Wed, 19 Feb 2025 11:42:56 +0100 Subject: [PATCH 04/22] Add docs --- storybook/src/components/Header/Header.docs.mdx | 10 ++++++++++ storybook/src/components/Header/Header.stories.tsx | 13 +++++++++++++ 2 files changed, 23 insertions(+) diff --git a/storybook/src/components/Header/Header.docs.mdx b/storybook/src/components/Header/Header.docs.mdx index c89ee05711..e0a04e4adf 100644 --- a/storybook/src/components/Header/Header.docs.mdx +++ b/storybook/src/components/Header/Header.docs.mdx @@ -55,3 +55,13 @@ as well as the logo itself. The text of the menu button and the accessible navigation description can be customized. + +### Without responsive Amsterdam logo + +The Amsterdam logo is responsive by default. +On narrow screens, only the emblem is shown. +To turn off this feature, set the `responsiveLogo` prop to `false`. +Note, only the Amsterdam logo is responsive; subbrand logos are not. +If that were the case, the subbrand name would disappear on small screens. + + diff --git a/storybook/src/components/Header/Header.stories.tsx b/storybook/src/components/Header/Header.stories.tsx index 96dca528f5..c3ad05d711 100644 --- a/storybook/src/components/Header/Header.stories.tsx +++ b/storybook/src/components/Header/Header.stories.tsx @@ -194,3 +194,16 @@ export const WithCustomTexts: Story = { navigationLabel: 'Navigatie', }, } + +export const WithoutResponsiveAmsterdamLogo: Story = { + args: { + responsiveLogo: false, + }, + parameters: { + docs: { + source: { + code: '
', // Storybook removes boolean props set to `false`, which it should not here. + }, + }, + }, +} From 61e79d63ca2b6ec1b97f171b3b6a29d53508fcdf Mon Sep 17 00:00:00 2001 From: Aram <37216945+alimpens@users.noreply.github.com> Date: Wed, 19 Feb 2025 13:58:09 +0100 Subject: [PATCH 05/22] Use class name of Logo component 1 Co-authored-by: Vincent Smedinga --- packages/css/src/components/header/header.scss | 4 ++-- 1 file changed, 2 insertions(+), 2 deletions(-) diff --git a/packages/css/src/components/header/header.scss b/packages/css/src/components/header/header.scss index b7920ecd86..bea773428c 100644 --- a/packages/css/src/components/header/header.scss +++ b/packages/css/src/components/header/header.scss @@ -30,8 +30,8 @@ user-select: none; // The hidden branding section should not be selectable } -// Increase the specificity to override the default logo styles -.ams-header__logo.ams-header__logo { +// Increase the specificity to override the default Logo styles +.ams-logo.ams-header__logo { display: none; @media screen and (min-width: $ams-breakpoint-medium) { From 8516cf24fc87a6cd94244b7d901b11ea806281dd Mon Sep 17 00:00:00 2001 From: Aram <37216945+alimpens@users.noreply.github.com> Date: Wed, 19 Feb 2025 13:58:19 +0100 Subject: [PATCH 06/22] Use class name of Logo component 2 Co-authored-by: Vincent Smedinga --- packages/css/src/components/header/header.scss | 4 ++-- 1 file changed, 2 insertions(+), 2 deletions(-) diff --git a/packages/css/src/components/header/header.scss b/packages/css/src/components/header/header.scss index bea773428c..43be7f8a4a 100644 --- a/packages/css/src/components/header/header.scss +++ b/packages/css/src/components/header/header.scss @@ -39,8 +39,8 @@ } } -// Increase the specificity to override the default logo styles -.ams-header__logo--emblem-only.ams-header__logo--emblem-only { +// Increase the specificity to override the default Logo styles +.ams-logo.ams-header__logo--emblem-only { @media screen and (min-width: $ams-breakpoint-medium) { display: none; } From b4d30b6b6adc0b1e4492cf58457c14c79ee50afd Mon Sep 17 00:00:00 2001 From: alimpens Date: Wed, 26 Feb 2025 09:44:02 +0100 Subject: [PATCH 07/22] Remove responsiveLogo prop, base show / hide condition on logoBrand and brandName props --- packages/css/src/components/header/README.md | 1 + packages/react/src/Header/Header.tsx | 13 +++++-------- storybook/src/components/Header/Header.docs.mdx | 10 ---------- storybook/src/components/Header/Header.stories.tsx | 13 ------------- 4 files changed, 6 insertions(+), 31 deletions(-) diff --git a/packages/css/src/components/header/README.md b/packages/css/src/components/header/README.md index c0c9a345c1..e6afac8d7e 100644 --- a/packages/css/src/components/header/README.md +++ b/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 diff --git a/packages/react/src/Header/Header.tsx b/packages/react/src/Header/Header.tsx index 6ba5dac8af..e310998ab9 100644 --- a/packages/react/src/Header/Header.tsx +++ b/packages/react/src/Header/Header.tsx @@ -15,10 +15,10 @@ import { HeaderMenuIcon } from './HeaderMenuIcon' import { HeaderMenuLink } from './HeaderMenuLink' import useIsAfterBreakpoint from '../common/useIsAfterBreakpoint' -const LogoComponent = ({ logoBrand, responsiveLogo }: { logoBrand: LogoBrand; responsiveLogo: boolean }) => ( +const LogoComponent = ({ hasBrandName, logoBrand }: { hasBrandName: boolean; logoBrand: LogoBrand }) => ( <> - - {logoBrand === 'amsterdam' && responsiveLogo && ( + + {logoBrand === 'amsterdam' && hasBrandName && ( )} @@ -41,8 +41,6 @@ export type HeaderProps = { navigationLabel?: string /** Whether the menu button is visible on wide screens. */ noMenuButtonOnWideWindow?: boolean - /** Whether the Amsterdam logo should be responsive. */ - responsiveLogo?: boolean } & HTMLAttributes const HeaderRoot = forwardRef( @@ -58,7 +56,6 @@ const HeaderRoot = forwardRef( menuItems, navigationLabel = 'Hoofdnavigatie', noMenuButtonOnWideWindow, - responsiveLogo = true, ...restProps }: HeaderProps, ref: ForwardedRef, @@ -79,7 +76,7 @@ const HeaderRoot = forwardRef(
{logoLinkTitle} - + {brandName && ( @@ -96,7 +93,7 @@ const HeaderRoot = forwardRef( {/* The branding section is recreated here, to make sure the page menu breaks at the right spot */}
- +
{brandName && ( {brandName} diff --git a/storybook/src/components/Header/Header.docs.mdx b/storybook/src/components/Header/Header.docs.mdx index e0a04e4adf..c89ee05711 100644 --- a/storybook/src/components/Header/Header.docs.mdx +++ b/storybook/src/components/Header/Header.docs.mdx @@ -55,13 +55,3 @@ as well as the logo itself. The text of the menu button and the accessible navigation description can be customized. - -### Without responsive Amsterdam logo - -The Amsterdam logo is responsive by default. -On narrow screens, only the emblem is shown. -To turn off this feature, set the `responsiveLogo` prop to `false`. -Note, only the Amsterdam logo is responsive; subbrand logos are not. -If that were the case, the subbrand name would disappear on small screens. - - diff --git a/storybook/src/components/Header/Header.stories.tsx b/storybook/src/components/Header/Header.stories.tsx index c3ad05d711..96dca528f5 100644 --- a/storybook/src/components/Header/Header.stories.tsx +++ b/storybook/src/components/Header/Header.stories.tsx @@ -194,16 +194,3 @@ export const WithCustomTexts: Story = { navigationLabel: 'Navigatie', }, } - -export const WithoutResponsiveAmsterdamLogo: Story = { - args: { - responsiveLogo: false, - }, - parameters: { - docs: { - source: { - code: '
', // Storybook removes boolean props set to `false`, which it should not here. - }, - }, - }, -} From 83d6836c6e46fa15ddcaa01afc51209c0705990a Mon Sep 17 00:00:00 2001 From: alimpens Date: Wed, 26 Feb 2025 10:00:09 +0100 Subject: [PATCH 08/22] Update tests --- packages/react/src/Header/Header.test.tsx | 8 ++++---- 1 file changed, 4 insertions(+), 4 deletions(-) diff --git a/packages/react/src/Header/Header.test.tsx b/packages/react/src/Header/Header.test.tsx index 2ad445a773..bcece8e5f8 100644 --- a/packages/react/src/Header/Header.test.tsx +++ b/packages/react/src/Header/Header.test.tsx @@ -66,16 +66,16 @@ describe('Header', () => { expect(component).toBeInTheDocument() }) - it('renders two logo’s when brand is "amsterdam" and responsiveLogo is true', () => { - const { container } = render(
) + it('renders two logo’s when brand is "amsterdam" and brandName is set', () => { + const { container } = render(
) const component = container.querySelectorAll('.ams-logo') expect(component).toHaveLength(2) }) - it('renders one logo when brand is "amsterdam" and responsiveLogo is false', () => { - const { container } = render(
) + it('renders one logo when brand is "amsterdam" and brandName is not set', () => { + const { container } = render(
) const component = container.querySelectorAll('.ams-logo') From 4b224ea2ce9c3c26841a2c5b3a1af000d4e009e0 Mon Sep 17 00:00:00 2001 From: alimpens Date: Fri, 28 Feb 2025 15:30:55 +0100 Subject: [PATCH 09/22] Add brand name to link --- .../css/src/components/header/header.scss | 19 +++++++++++++------ packages/react/src/Header/Header.tsx | 11 ++--------- .../src/components/ams/header.tokens.json | 8 +++++++- 3 files changed, 22 insertions(+), 16 deletions(-) diff --git a/packages/css/src/components/header/header.scss b/packages/css/src/components/header/header.scss index 43be7f8a4a..56a9e7c1ee 100644 --- a/packages/css/src/components/header/header.scss +++ b/packages/css/src/components/header/header.scss @@ -13,15 +13,13 @@ * 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 { - 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; grid-area: 1 / 1; // To allow this section to overlap with the second branding section } @@ -47,11 +45,21 @@ } .ams-header__logo-link { + align-items: center; + column-gap: var(--ams-header-logo-link-column-gap); + display: inline-flex; outline-offset: var(--ams-header-logo-link-outline-offset); + text-decoration: none; + + svg { + flex-shrink: 0; + } } -/* 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; } @@ -99,7 +107,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); diff --git a/packages/react/src/Header/Header.tsx b/packages/react/src/Header/Header.tsx index e310998ab9..ee199475dd 100644 --- a/packages/react/src/Header/Header.tsx +++ b/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' @@ -77,12 +76,8 @@ const HeaderRoot = forwardRef( {logoLinkTitle} + {brandName && {brandName}} - {brandName && ( - - {brandName} - - )}
{(children || menuItems) && (