From 0eab0c58b36a6eb63e2352d54cb7a207fb520946 Mon Sep 17 00:00:00 2001
From: alimpens <a.limpens@amsterdam.nl>
Date: Wed, 18 Dec 2024 09:46:59 +0100
Subject: [PATCH] Rename GridCellNarrowWindowOnly

---
 packages/css/src/components/header/header.scss   |  2 +-
 packages/react/src/Header/Header.tsx             |  4 ++--
 ...x => HeaderGridCellNarrowWindowOnly.test.tsx} | 16 ++++++++--------
 ...ll.tsx => HeaderGridCellNarrowWindowOnly.tsx} |  6 +++---
 .../src/components/Header/Header.stories.tsx     |  4 ++--
 5 files changed, 16 insertions(+), 16 deletions(-)
 rename packages/react/src/Header/{HeaderNarrowScreenOnlyGridCell.test.tsx => HeaderGridCellNarrowWindowOnly.test.tsx} (63%)
 rename packages/react/src/Header/{HeaderNarrowScreenOnlyGridCell.tsx => HeaderGridCellNarrowWindowOnly.tsx} (50%)

diff --git a/packages/css/src/components/header/header.scss b/packages/css/src/components/header/header.scss
index 77cfa74efb..8c2fe3ae65 100644
--- a/packages/css/src/components/header/header.scss
+++ b/packages/css/src/components/header/header.scss
@@ -208,7 +208,7 @@
   display: none;
 }
 
-.ams-header__narrow-screen-only-grid-cell {
+.ams-header__grid-cell-narrow-window-only {
   @media screen and (min-width: $ams-breakpoint-wide) {
     display: none;
   }
diff --git a/packages/react/src/Header/Header.tsx b/packages/react/src/Header/Header.tsx
index 71e858dc88..7558ab8d25 100644
--- a/packages/react/src/Header/Header.tsx
+++ b/packages/react/src/Header/Header.tsx
@@ -10,9 +10,9 @@ import { Heading } from '../Heading'
 import { Icon } from '../Icon'
 import { Logo } from '../Logo'
 import type { LogoBrand } from '../Logo'
+import { HeaderGridCellNarrowWindowOnly } from './HeaderGridCellNarrowWindowOnly'
 import { HeaderMenuIcon } from './HeaderMenuIcon'
 import { HeaderMenuLink } from './HeaderMenuLink'
-import { HeaderNarrowScreenOnlyGridCell } from './HeaderNarrowScreenOnlyGridCell'
 import useIsAfterBreakpoint from '../common/useIsAfterBreakpoint'
 
 export type HeaderProps = {
@@ -138,6 +138,6 @@ const HeaderRoot = forwardRef(
 HeaderRoot.displayName = 'Header'
 
 export const Header = Object.assign(HeaderRoot, {
+  GridCellNarrowWindowOnly: HeaderGridCellNarrowWindowOnly,
   MenuLink: HeaderMenuLink,
-  NarrowScreenOnlyGridCell: HeaderNarrowScreenOnlyGridCell,
 })
diff --git a/packages/react/src/Header/HeaderNarrowScreenOnlyGridCell.test.tsx b/packages/react/src/Header/HeaderGridCellNarrowWindowOnly.test.tsx
similarity index 63%
rename from packages/react/src/Header/HeaderNarrowScreenOnlyGridCell.test.tsx
rename to packages/react/src/Header/HeaderGridCellNarrowWindowOnly.test.tsx
index 97182df468..08e552a530 100644
--- a/packages/react/src/Header/HeaderNarrowScreenOnlyGridCell.test.tsx
+++ b/packages/react/src/Header/HeaderGridCellNarrowWindowOnly.test.tsx
@@ -1,11 +1,11 @@
 import { render } from '@testing-library/react'
 import { createRef } from 'react'
-import { HeaderNarrowScreenOnlyGridCell } from './HeaderNarrowScreenOnlyGridCell'
+import { HeaderGridCellNarrowWindowOnly } from './HeaderGridCellNarrowWindowOnly'
 import '@testing-library/jest-dom'
 
 describe('Header narrow screen only grid cell', () => {
   it('renders', () => {
-    const { container } = render(<HeaderNarrowScreenOnlyGridCell />)
+    const { container } = render(<HeaderGridCellNarrowWindowOnly />)
 
     const component = container.querySelector(':only-child')
 
@@ -14,7 +14,7 @@ describe('Header narrow screen only grid cell', () => {
   })
 
   it('renders a Grid.Cell', () => {
-    const { container } = render(<HeaderNarrowScreenOnlyGridCell />)
+    const { container } = render(<HeaderGridCellNarrowWindowOnly />)
 
     const component = container.querySelector(':only-child')
 
@@ -22,25 +22,25 @@ describe('Header narrow screen only grid cell', () => {
   })
 
   it('renders a design system BEM class name', () => {
-    const { container } = render(<HeaderNarrowScreenOnlyGridCell />)
+    const { container } = render(<HeaderGridCellNarrowWindowOnly />)
 
     const component = container.querySelector(':only-child')
 
-    expect(component).toHaveClass('ams-header__narrow-screen-only-grid-cell')
+    expect(component).toHaveClass('ams-header__grid-cell-narrow-window-only')
   })
 
   it('renders an additional class name', () => {
-    const { container } = render(<HeaderNarrowScreenOnlyGridCell className="extra" />)
+    const { container } = render(<HeaderGridCellNarrowWindowOnly className="extra" />)
 
     const component = container.querySelector(':only-child')
 
-    expect(component).toHaveClass('ams-header__narrow-screen-only-grid-cell extra')
+    expect(component).toHaveClass('ams-header__grid-cell-narrow-window-only extra')
   })
 
   it('supports ForwardRef in React', () => {
     const ref = createRef<HTMLDivElement>()
 
-    const { container } = render(<HeaderNarrowScreenOnlyGridCell ref={ref} />)
+    const { container } = render(<HeaderGridCellNarrowWindowOnly ref={ref} />)
 
     const component = container.querySelector(':only-child')
 
diff --git a/packages/react/src/Header/HeaderNarrowScreenOnlyGridCell.tsx b/packages/react/src/Header/HeaderGridCellNarrowWindowOnly.tsx
similarity index 50%
rename from packages/react/src/Header/HeaderNarrowScreenOnlyGridCell.tsx
rename to packages/react/src/Header/HeaderGridCellNarrowWindowOnly.tsx
index 9c6686f3ca..148f1f6b11 100644
--- a/packages/react/src/Header/HeaderNarrowScreenOnlyGridCell.tsx
+++ b/packages/react/src/Header/HeaderGridCellNarrowWindowOnly.tsx
@@ -2,12 +2,12 @@ import clsx from 'clsx'
 import { ForwardedRef, forwardRef } from 'react'
 import { Grid, GridCellProps } from '../Grid'
 
-export const HeaderNarrowScreenOnlyGridCell = forwardRef(
+export const HeaderGridCellNarrowWindowOnly = forwardRef(
   ({ children, className, ...restProps }: GridCellProps, ref: ForwardedRef<HTMLElement>) => (
-    <Grid.Cell {...restProps} className={clsx('ams-header__narrow-screen-only-grid-cell', className)} ref={ref}>
+    <Grid.Cell {...restProps} className={clsx('ams-header__grid-cell-narrow-window-only', className)} ref={ref}>
       {children}
     </Grid.Cell>
   ),
 )
 
-HeaderNarrowScreenOnlyGridCell.displayName = 'Header.NarrowScreenOnlyGridCell'
+HeaderGridCellNarrowWindowOnly.displayName = 'Header.GridCellNarrowWindowOnly'
diff --git a/storybook/src/components/Header/Header.stories.tsx b/storybook/src/components/Header/Header.stories.tsx
index 88216d02b1..650a2b6823 100644
--- a/storybook/src/components/Header/Header.stories.tsx
+++ b/storybook/src/components/Header/Header.stories.tsx
@@ -48,11 +48,11 @@ export const Default: Story = {
     ],
     children: (
       <Grid paddingBottom="large">
-        <Header.NarrowScreenOnlyGridCell span="all">
+        <Header.GridCellNarrowWindowOnly span="all">
           <LinkList>
             <LinkList.Link href="#">Inloggen</LinkList.Link>
           </LinkList>
-        </Header.NarrowScreenOnlyGridCell>
+        </Header.GridCellNarrowWindowOnly>
         <Grid.Cell span={4}>
           <Heading level={2} size="level-3" className="ams-mb--sm">
             Onderdelen