From d34653f6010f83b5ee5cc8c2023a6eeded4ea371 Mon Sep 17 00:00:00 2001 From: Niels Roozemond Date: Mon, 17 Feb 2025 10:56:57 +0100 Subject: [PATCH] Comment resolutions --- .../css/src/components/footer/footer.scss | 18 +++++-------- packages/react/src/Footer/FooterMenu.test.tsx | 27 +++++++++---------- .../react/src/Footer/FooterMenuLink.test.tsx | 20 +++++++------- .../react/src/Footer/FooterSpotlight.test.tsx | 10 +++---- packages/react/src/Footer/index.ts | 2 ++ .../src/components/ams/footer.tokens.json | 16 +++++------ .../src/components/Footer/Footer.stories.tsx | 10 +++---- 7 files changed, 49 insertions(+), 54 deletions(-) diff --git a/packages/css/src/components/footer/footer.scss b/packages/css/src/components/footer/footer.scss index fb4592efb8..480b9be99e 100644 --- a/packages/css/src/components/footer/footer.scss +++ b/packages/css/src/components/footer/footer.scss @@ -3,6 +3,7 @@ * Copyright Gemeente Amsterdam */ +@use "../../common/hyphenation" as *; @use "../../common/text-rendering" as *; @mixin reset-ul { @@ -15,7 +16,6 @@ } .ams-footer__menu { - align-items: center; column-gap: var(--ams-footer-menu-column-gap); display: flex; flex-wrap: wrap; @@ -31,23 +31,17 @@ font-family: var(--ams-footer-menu-link-font-family); font-size: var(--ams-footer-menu-link-font-size); font-weight: var(--ams-footer-menu-link-font-weight); - gap: var(--ams-footer-menu-link-gap); line-height: var(--ams-footer-menu-link-line-height); outline-offset: var(--ams-footer-menu-link-outline-offset); text-decoration-line: var(--ams-footer-menu-link-text-decoration-line); text-decoration-thickness: var(--ams-footer-menu-link-text-decoration-thickness); text-underline-offset: var(--ams-footer-menu-link-text-underline-offset); - touch-action: manipulation; + @include hyphenation; @include text-rendering; -} - -.ams-footer-menu__link:hover, -.ams-footer-menu__button:hover { - color: var(--ams-footer-menu-link-hover-color); - text-decoration-line: var(--ams-footer-menu-link-hover-text-decoration-line); -} -.ams-footer-menu__link svg { - color: currentColor; + &:hover { + color: var(--ams-footer-menu-link-hover-color); + text-decoration-line: var(--ams-footer-menu-link-hover-text-decoration-line); + } } diff --git a/packages/react/src/Footer/FooterMenu.test.tsx b/packages/react/src/Footer/FooterMenu.test.tsx index f0825f7715..8ffae17e99 100644 --- a/packages/react/src/Footer/FooterMenu.test.tsx +++ b/packages/react/src/Footer/FooterMenu.test.tsx @@ -1,21 +1,20 @@ import { LoginIcon } from '@amsterdam/design-system-react-icons' import { render } from '@testing-library/react' import { createRef } from 'react' -import { FooterMenu } from './FooterMenu' +import { Footer } from './Footer' import '@testing-library/jest-dom' -import { FooterMenuLink } from './FooterMenuLink' describe('Page menu', () => { it('renders a page menu with children', () => { const { container } = render( - - + + English - - + + Mijn Amsterdam - - , + + , ) const component = container.querySelector(':only-child') @@ -30,7 +29,7 @@ describe('Page menu', () => { }) it('renders a design system BEM class name', () => { - const { container } = render() + const { container } = render() const component = container.querySelector(':only-child') @@ -41,11 +40,11 @@ describe('Page menu', () => { const ref = createRef() const { container } = render( - - + + English - - , + + , ) const component = container.querySelector(':only-child') @@ -54,7 +53,7 @@ describe('Page menu', () => { }) it('renders an additional class name', () => { - const { container } = render() + const { container } = render() const component = container.querySelector(':only-child') diff --git a/packages/react/src/Footer/FooterMenuLink.test.tsx b/packages/react/src/Footer/FooterMenuLink.test.tsx index 0daafaca93..36304ea1a4 100644 --- a/packages/react/src/Footer/FooterMenuLink.test.tsx +++ b/packages/react/src/Footer/FooterMenuLink.test.tsx @@ -1,12 +1,12 @@ import { ChevronRightIcon } from '@amsterdam/design-system-react-icons' import { render, screen } from '@testing-library/react' import { createRef } from 'react' -import { FooterMenuLink } from './FooterMenuLink' +import { Footer } from './Footer' import '@testing-library/jest-dom' describe('Page menu link', () => { it('renders with href attribute', () => { - render(Link) + render(Link) const component = screen.getByRole('link') @@ -15,7 +15,7 @@ describe('Page menu link', () => { }) it('renders a design system BEM class name', () => { - render(Link) + render(Link) const component = screen.getByRole('link') @@ -24,9 +24,9 @@ describe('Page menu link', () => { it('renders an additional class name', () => { render( - + Link - , + , ) const component = screen.getByRole('link') @@ -35,7 +35,7 @@ describe('Page menu link', () => { }) it('does not render an icon by default', () => { - const { container } = render(Link) + const { container } = render(Link) const svg = container.querySelector('.ams-icon') @@ -44,9 +44,9 @@ describe('Page menu link', () => { it('renders an icon when specified', () => { const { container } = render( - + Link - , + , ) const svg = container.querySelector('.ams-icon') @@ -58,9 +58,9 @@ describe('Page menu link', () => { const ref = createRef() render( - + Link - , + , ) const component = screen.getByRole('link') diff --git a/packages/react/src/Footer/FooterSpotlight.test.tsx b/packages/react/src/Footer/FooterSpotlight.test.tsx index c03f032cd1..093634441c 100644 --- a/packages/react/src/Footer/FooterSpotlight.test.tsx +++ b/packages/react/src/Footer/FooterSpotlight.test.tsx @@ -1,11 +1,11 @@ import { render } from '@testing-library/react' import { createRef } from 'react' -import { FooterSpotlight } from './FooterSpotlight' +import { Footer } from './Footer' import '@testing-library/jest-dom' describe('Footer top', () => { it('renders', () => { - const { container } = render() + const { container } = render() const component = container.querySelector(':only-child') @@ -14,7 +14,7 @@ describe('Footer top', () => { }) it('renders a design system BEM class name', () => { - const { container } = render() + const { container } = render() const component = container.querySelector(':only-child') @@ -22,7 +22,7 @@ describe('Footer top', () => { }) it('renders an additional class name', () => { - const { container } = render() + const { container } = render() const component = container.querySelector(':only-child') @@ -32,7 +32,7 @@ describe('Footer top', () => { it('supports ForwardRef in React', () => { const ref = createRef() - const { container } = render() + const { container } = render() const component = container.querySelector(':only-child') diff --git a/packages/react/src/Footer/index.ts b/packages/react/src/Footer/index.ts index ff2ebb5ccf..9512f85553 100644 --- a/packages/react/src/Footer/index.ts +++ b/packages/react/src/Footer/index.ts @@ -1,3 +1,5 @@ export { Footer } from './Footer' export type { FooterProps } from './Footer' +export type { FooterMenuProps } from './FooterMenu' +export type { FooterMenuLinkProps } from './FooterMenuLink' export type { FooterSpotlightProps } from './FooterSpotlight' diff --git a/proprietary/tokens/src/components/ams/footer.tokens.json b/proprietary/tokens/src/components/ams/footer.tokens.json index b89fcb49bd..606753789f 100644 --- a/proprietary/tokens/src/components/ams/footer.tokens.json +++ b/proprietary/tokens/src/components/ams/footer.tokens.json @@ -2,22 +2,22 @@ "ams": { "footer": { "menu": { - "column-gap": { "value": "{ams.space.grid.md}" }, - "row-gap": { "value": "{ams.space.grid.xs}" }, + "column-gap": { "value": "{ams.space.lg}" }, + "row-gap": { "value": "{ams.space.xs}" }, "link": { - "color": { "value": "{ams.link-appearance.color}" }, + "color": { "value": "{ams.links.color}" }, "font-family": { "value": "{ams.text.font-family}" }, "font-size": { "value": "{ams.text.level.6.font-size}" }, "font-weight": { "value": "{ams.text.font-weight.normal}" }, "gap": { "value": "{ams.space.sm}" }, "line-height": { "value": "{ams.text.level.6.line-height}" }, "outline-offset": { "value": "{ams.focus.outline-offset}" }, - "text-decoration-line": { "value": "{ams.link-appearance.subtle.text-decoration-line}" }, - "text-decoration-thickness": { "value": "{ams.link-appearance.text-decoration-thickness}" }, - "text-underline-offset": { "value": "{ams.link-appearance.text-underline-offset}" }, + "text-decoration-line": { "value": "{ams.links.subtle.text-decoration-line}" }, + "text-decoration-thickness": { "value": "{ams.links.text-decoration-thickness}" }, + "text-underline-offset": { "value": "{ams.links.text-underline-offset}" }, "hover": { - "color": { "value": "{ams.link-appearance.hover.color}" }, - "text-decoration-line": { "value": "{ams.link-appearance.subtle.hover.text-decoration-line}" } + "color": { "value": "{ams.links.hover.color}" }, + "text-decoration-line": { "value": "{ams.links.subtle.hover.text-decoration-line}" } } }, "padding-block": { "value": "{ams.space.grid.sm}" }, diff --git a/storybook/src/components/Footer/Footer.stories.tsx b/storybook/src/components/Footer/Footer.stories.tsx index 97c4c6ed4a..6ce10cf7cf 100644 --- a/storybook/src/components/Footer/Footer.stories.tsx +++ b/storybook/src/components/Footer/Footer.stories.tsx @@ -99,10 +99,10 @@ export const Default: Story = { , - + Over deze website , - + Over deze site Privacy Cookies @@ -114,7 +114,7 @@ export const Default: Story = { export const OnderzoekEnStatistiek: Story = { args: { children: [ - + Colofon @@ -175,10 +175,10 @@ export const OnderzoekEnStatistiek: Story = { , - + Over deze website , - + Over deze site Privacy Cookies