feat: Allow a row to wrap its items onto multiple lines

packages/css/src/components/row/row.scss

@@ -15,3 +15,7 @@
     gap: var(--ams-row-gap-#{$size});
   }
 }
+
+.ams-row--wrap {
+  flex-wrap: wrap;
+}

packages/react/src/Row/Row.tsx

@@ -17,11 +17,13 @@ export type RowProps = {
   as?: RowTag
   /** The amount of vertical space between items. */
   gap?: RowGap
+  /** Whether items of the row can wrap onto multiple lines. */
+  wrap?: Boolean
 } & PropsWithChildren<HTMLAttributes<HTMLElement>>
 
 export const Row = forwardRef(
-  ({ as: Tag = 'div', children, className, gap = 'medium', ...restProps }: RowProps, ref: any) => (
-    <Tag {...restProps} ref={ref} className={clsx('ams-row', `ams-row--${gap}`, className)}>
+  ({ as: Tag = 'div', children, className, gap = 'medium', wrap = false, ...restProps }: RowProps, ref: any) => (
+    <Tag {...restProps} ref={ref} className={clsx('ams-row', `ams-row--${gap}`, wrap && 'ams-row--wrap', className)}>
       {children}
     </Tag>
   ),

storybook/src/components/Row/Row.docs.mdx

@@ -1,6 +1,6 @@
 {/* @license CC0-1.0 */}
 
-import { Controls, Markdown, Meta, Primary } from "@storybook/blocks";
+import { Canvas, Controls, Markdown, Meta, Primary } from "@storybook/blocks";
 import * as RowStories from "./Row.stories.tsx";
 import README from "../../../../packages/css/src/components/row/README.md?raw";
 
@@ -23,3 +23,9 @@ Wrap a Row around a set of components that need the same amount of white space b
 <Primary />
 
 <Controls />
+
+### Wrapping
+
+Items that may not fit together on a single line should be allowed to wrap onto multiple lines.
+
+<Canvas of={RowStories.Wrapping} />

storybook/src/components/Row/Row.stories.tsx

@@ -3,11 +3,17 @@
  * Copyright Gemeente Amsterdam
  */
 
-import { Button, Row } from '@amsterdam/design-system-react/src'
+import { Button, Paragraph, Row } from '@amsterdam/design-system-react/src'
 import { Meta, StoryObj } from '@storybook/react'
 
 const ThreeButtons = Array.from(Array(3).keys()).map((i) => <Button key={i}>Button {i + 1}</Button>)
 
+const FourBoxes = Array.from(Array(4).keys()).map((i) => (
+  <Paragraph className="ams-docs-pink-box" key={i}>
+    Wrapping row item {i + 1}
+  </Paragraph>
+))
+
 const meta = {
   title: 'Components/Layout/Row',
   component: Row,
@@ -27,3 +33,10 @@ export default meta
 type Story = StoryObj<typeof meta>
 
 export const Default: Story = {}
+
+export const Wrapping: Story = {
+  args: {
+    children: FourBoxes,
+    wrap: true,
+  },
+}