Comment resolutions

Amsterdam · Feb 17, 2025 · d34653f · d34653f
1 parent 1f27131
commit d34653f
Show file tree

Hide file tree

Showing 7 changed files with 49 additions and 54 deletions.
diff --git 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
@@ -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(
-      <FooterMenu>
-        <FooterMenuLink href="#" lang="en">
+      <Footer.Menu>
+        <Footer.MenuLink href="#" lang="en">
           English
-        </FooterMenuLink>
-        <FooterMenuLink href="#" icon={LoginIcon}>
+        </Footer.MenuLink>
+        <Footer.MenuLink href="#" icon={LoginIcon}>
           Mijn Amsterdam
-        </FooterMenuLink>
-      </FooterMenu>,
+        </Footer.MenuLink>
+      </Footer.Menu>,
     )
 
     const component = container.querySelector(':only-child')
@@ -30,7 +29,7 @@ describe('Page menu', () => {
   })
 
   it('renders a design system BEM class name', () => {
-    const { container } = render(<FooterMenu />)
+    const { container } = render(<Footer.Menu />)
 
     const component = container.querySelector(':only-child')
 
@@ -41,11 +40,11 @@ describe('Page menu', () => {
     const ref = createRef<HTMLUListElement>()
 
     const { container } = render(
-      <FooterMenu ref={ref}>
-        <FooterMenuLink href="#" lang="en">
+      <Footer.Menu ref={ref}>
+        <Footer.MenuLink href="#" lang="en">
           English
-        </FooterMenuLink>
-      </FooterMenu>,
+        </Footer.MenuLink>
+      </Footer.Menu>,
     )
 
     const component = container.querySelector(':only-child')
@@ -54,7 +53,7 @@ describe('Page menu', () => {
   })
 
   it('renders an additional class name', () => {
-    const { container } = render(<FooterMenu className="intro" />)
+    const { container } = render(<Footer.Menu className="intro" />)
 
     const component = container.querySelector(':only-child')
 

diff --git 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(<FooterMenuLink href="#">Link</FooterMenuLink>)
+    render(<Footer.MenuLink href="#">Link</Footer.MenuLink>)
 
     const component = screen.getByRole('link')
 
@@ -15,7 +15,7 @@ describe('Page menu link', () => {
   })
 
   it('renders a design system BEM class name', () => {
-    render(<FooterMenuLink href="#">Link</FooterMenuLink>)
+    render(<Footer.MenuLink href="#">Link</Footer.MenuLink>)
 
     const component = screen.getByRole('link')
 
@@ -24,9 +24,9 @@ describe('Page menu link', () => {
 
   it('renders an additional class name', () => {
     render(
-      <FooterMenuLink className="extra" href="#">
+      <Footer.MenuLink className="extra" href="#">
         Link
-      </FooterMenuLink>,
+      </Footer.MenuLink>,
     )
 
     const component = screen.getByRole('link')
@@ -35,7 +35,7 @@ describe('Page menu link', () => {
   })
 
   it('does not render an icon by default', () => {
-    const { container } = render(<FooterMenuLink href="#">Link</FooterMenuLink>)
+    const { container } = render(<Footer.MenuLink href="#">Link</Footer.MenuLink>)
 
     const svg = container.querySelector('.ams-icon')
 
@@ -44,9 +44,9 @@ describe('Page menu link', () => {
 
   it('renders an icon when specified', () => {
     const { container } = render(
-      <FooterMenuLink href="#" icon={ChevronRightIcon}>
+      <Footer.MenuLink href="#" icon={ChevronRightIcon}>
         Link
-      </FooterMenuLink>,
+      </Footer.MenuLink>,
     )
 
     const svg = container.querySelector('.ams-icon')
@@ -58,9 +58,9 @@ describe('Page menu link', () => {
     const ref = createRef<HTMLAnchorElement>()
 
     render(
-      <FooterMenuLink className="extra" href="#" ref={ref}>
+      <Footer.MenuLink className="extra" href="#" ref={ref}>
         Link
-      </FooterMenuLink>,
+      </Footer.MenuLink>,
     )
 
     const component = screen.getByRole('link')

diff --git 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(<FooterSpotlight />)
+    const { container } = render(<Footer.Spotlight />)
 
     const component = container.querySelector(':only-child')
 
@@ -14,15 +14,15 @@ describe('Footer top', () => {
   })
 
   it('renders a design system BEM class name', () => {
-    const { container } = render(<FooterSpotlight />)
+    const { container } = render(<Footer.Spotlight />)
 
     const component = container.querySelector(':only-child')
 
     expect(component).toHaveClass('ams-footer__spotlight')
   })
 
   it('renders an additional class name', () => {
-    const { container } = render(<FooterSpotlight className="extra" />)
+    const { container } = render(<Footer.Spotlight className="extra" />)
 
     const component = container.querySelector(':only-child')
 
@@ -32,7 +32,7 @@ describe('Footer top', () => {
   it('supports ForwardRef in React', () => {
     const ref = createRef<HTMLDivElement>()
 
-    const { container } = render(<FooterSpotlight ref={ref} />)
+    const { container } = render(<Footer.Spotlight ref={ref} />)
 
     const component = container.querySelector(':only-child')
 

diff --git 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
@@ -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
@@ -99,10 +99,10 @@ export const Default: Story = {
           </Grid.Cell>
         </Grid>
       </Footer.Spotlight>,
-      <Heading className="ams-visually-hidden" level={2}>
+      <Heading className="ams-visually-hidden" key="footer-heading" level={2}>
         Over deze website
       </Heading>,
-      <Footer.Menu>
+      <Footer.Menu key="footer-menu">
         <Footer.MenuLink href="#">Over deze site</Footer.MenuLink>
         <Footer.MenuLink href="#">Privacy</Footer.MenuLink>
         <Footer.MenuLink href="#">Cookies</Footer.MenuLink>
@@ -114,7 +114,7 @@ export const Default: Story = {
 export const OnderzoekEnStatistiek: Story = {
   args: {
     children: [
-      <Footer.Spotlight key="footer-Spotlight">
+      <Footer.Spotlight key="footer-spotlight">
         <Heading className="ams-visually-hidden" color="inverse" level={1}>
           Colofon
         </Heading>
@@ -175,10 +175,10 @@ export const OnderzoekEnStatistiek: Story = {
           </Grid.Cell>
         </Grid>
       </Footer.Spotlight>,
-      <Heading className="ams-visually-hidden" level={2}>
+      <Heading className="ams-visually-hidden" key="footer-heading" level={2}>
         Over deze website
       </Heading>,
-      <Footer.Menu>
+      <Footer.Menu key="footer-menu">
         <Footer.MenuLink href="#">Over deze site</Footer.MenuLink>
         <Footer.MenuLink href="#">Privacy</Footer.MenuLink>
         <Footer.MenuLink href="#">Cookies</Footer.MenuLink>