Merge branch 'develop' into feature/DES-488-hero-image

Amsterdam · Dec 18, 2023 · 9116613 · 9116613
2 parents 34dde01 + b6a8b34
commit 9116613
Show file tree

Hide file tree

Showing 8 changed files with 22 additions and 27 deletions.
diff --git a/packages/css/src/components/grid/grid.scss b/packages/css/src/components/grid/grid.scss
@@ -72,7 +72,7 @@
   padding-block: calc(var(--amsterdam-grid-gap) * 2);
 }
 
-.amsterdam-grid__cell--full-width {
+.amsterdam-grid__cell--span-all {
   grid-column: 1 / -1;
 }
 

diff --git a/packages/react/src/Grid/GridCell.test.tsx b/packages/react/src/Grid/GridCell.test.tsx
@@ -72,7 +72,7 @@ describe('Grid.Cell', () => {
     )
   })
 
-  it('renders class names for an array of three numbers for start and span', () => {
+  it('renders class names for array values for both start and span', () => {
     const { container } = render(
       <Grid.Cell span={{ narrow: 2, medium: 4, wide: 6 }} start={{ narrow: 1, medium: 3, wide: 5 }} />,
     )
@@ -81,4 +81,10 @@ describe('Grid.Cell', () => {
       'amsterdam-grid__cell--span-2 amsterdam-grid__cell--span-4-medium amsterdam-grid__cell--span-6-wide amsterdam-grid__cell--start-1 amsterdam-grid__cell--start-3-medium amsterdam-grid__cell--start-5-wide',
     )
   })
+
+  it('renders the correct class name for the "all" value of span', () => {
+    const { container } = render(<Grid.Cell span="all" />)
+    const component = container.querySelector(':only-child')
+    expect(component).toHaveClass('amsterdam-grid__cell--span-all')
+  })
 })
diff --git a/packages/react/src/Grid/GridCell.tsx b/packages/react/src/Grid/GridCell.tsx
@@ -7,36 +7,25 @@ import { type ForwardedRef, forwardRef, type HTMLAttributes, type PropsWithChild
 import { GridColumnNumber, GridColumnNumbers } from './Grid'
 import { gridCellClasses } from './gridCellClasses'
 
-type GridCellFullWidthProp = {
-  /** Whether the cell spans the full width of the grid. */
-  fullWidth?: boolean
-  span?: never
+type GridCellSpanAllProp = {
+  /** Lets the cell span the full width of all grid variants. */
+  span: 'all'
   start?: never
 }
 
-type GridCellColumnProps = {
-  fullWidth?: never
+type GridCellSpanAndStartProps = {
   /** The amount of grid columns the cell spans. */
   span?: GridColumnNumber | GridColumnNumbers
   /** The index of the grid column the cell starts at. */
   start?: GridColumnNumber | GridColumnNumbers
 }
 
-export type GridCellProps = (GridCellFullWidthProp | GridCellColumnProps) &
+export type GridCellProps = (GridCellSpanAllProp | GridCellSpanAndStartProps) &
   PropsWithChildren<HTMLAttributes<HTMLDivElement>>
 
 export const GridCell = forwardRef(
-  ({ children, className, fullWidth, span, start, ...restProps }: GridCellProps, ref: ForwardedRef<HTMLDivElement>) => (
-    <div
-      {...restProps}
-      ref={ref}
-      className={clsx(
-        'amsterdam-grid__cell',
-        fullWidth && 'amsterdam-grid__cell--full-width',
-        gridCellClasses(span, start),
-        className,
-      )}
-    >
+  ({ children, className, span, start, ...restProps }: GridCellProps, ref: ForwardedRef<HTMLDivElement>) => (
+    <div {...restProps} ref={ref} className={clsx('amsterdam-grid__cell', gridCellClasses(span, start), className)}>
       {children}
     </div>
   ),

diff --git a/packages/react/src/Grid/gridCellClasses.ts b/packages/react/src/Grid/gridCellClasses.ts
@@ -7,7 +7,7 @@ export const gridCellClasses = (span?: GridCellProps['span'], start?: GridCellPr
 
   const classes = [] as string[]
 
-  if (typeof span === 'number') {
+  if (span === 'all' || typeof span === 'number') {
     classes.push(`amsterdam-grid__cell--span-${span}`)
   } else if (span) {
     const { narrow, medium, wide } = span

diff --git a/storybook/storybook-react/src/Footer/Footer.stories.tsx b/storybook/storybook-react/src/Footer/Footer.stories.tsx
@@ -117,7 +117,7 @@ export const Default: Story = {
           <Heading level={2}>Over deze website</Heading>
         </VisuallyHidden>
         <Grid paddingVertical="small">
-          <Grid.Cell fullWidth>
+          <Grid.Cell span="all">
             <PageMenu>
               <PageMenu.Link href="/">Privacy</PageMenu.Link>
               <PageMenu.Link href="/">Toegankelijkheid</PageMenu.Link>

diff --git a/storybook/storybook-react/src/Grid/Grid.docs.mdx b/storybook/storybook-react/src/Grid/Grid.docs.mdx
@@ -70,9 +70,9 @@ Via `span={{ narrow: 4, medium: 6, wide: 8 }}` is deze cel 4 van de 4 kolommen b
 
 ### Volledige breedte
 
-Om de cel de volledige breedte te geven – of het grid nu 4, 8, of 12 kolommen heeft – gebruik je de `fullWidth` prop.
+Om de cel de volledige breedte te geven – of het grid nu 4, 8, of 12 kolommen heeft – gebruik je `span="all`.
 
-<Canvas of={GridStories.FullWidthCell} />
+<Canvas of={GridStories.SpanAllColumns} />
 
 ### Startpositie
 

diff --git a/storybook/storybook-react/src/Grid/Grid.stories.tsx b/storybook/storybook-react/src/Grid/Grid.stories.tsx
@@ -135,15 +135,15 @@ export const ConfigureGridVariants: GridCellStory = {
   },
 }
 
-export const FullWidthCell: GridCellStory = {
+export const SpanAllColumns: GridCellStory = {
   ...GridCellStoryTemplate,
   args: {
     children: (
       <p className="amsterdam-docs-paragraph amsterdam-docs-pink-box">
         Deze cel beslaat de volledige breedte van het grid.
       </p>
     ),
-    fullWidth: true,
+    span: 'all',
   },
 }
 

diff --git a/storybook/storybook-react/src/Spotlight/Spotlight.stories.tsx b/storybook/storybook-react/src/Spotlight/Spotlight.stories.tsx
@@ -36,7 +36,7 @@ const meta = {
   render: ({ color }) => (
     <Spotlight color={color}>
       <Grid paddingVertical="medium">
-        <Grid.Cell fullWidth>
+        <Grid.Cell span="all">
           <Blockquote inverseColor={!color || !['green', 'yellow'].includes(color)}>{exampleQuote()}</Blockquote>
         </Grid.Cell>
       </Grid>