Rename GridCellNarrowWindowOnly

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;
   }

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,
 })

packages/react/src/Header/HeaderNarrowScreenOnlyGridCell.test.tsx → 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,33 +14,33 @@ 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')
 
     expect(component).toHaveClass('ams-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')
 

packages/react/src/Header/HeaderNarrowScreenOnlyGridCell.tsx → 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'

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