wip: feat: Add row--4-cols-medium grid row

package.json

@@ -95,7 +95,7 @@
     "tsc-alias": "1.8.10",
     "typescript": "5.5.4",
     "typescript-eslint": "8.4.0",
-    "vanilla-framework": "4.16.0",
+    "vanilla-framework": "4.17.0",
     "wait-on": "8.0.0",
     "webpack": "5.94.0"
   },

src/components/Row/Row.stories.tsx

@@ -1,6 +1,8 @@
+import React from "react";
 import { Meta, StoryObj } from "@storybook/react";
 
 import Row from "./Row";
+import Col from "../Col";
 
 const meta: Meta<typeof Row> = {
   component: Row,
@@ -11,6 +13,14 @@ const meta: Meta<typeof Row> = {
       control: {
         type: "text",
       },
+      description: "The content of the row.",
+    },
+    fourColumnMedium: {
+      control: {
+        type: "boolean",
+      },
+      type: { name: "boolean", required: false },
+      description: "Whether the row has four columns on medium screens.",
     },
   },
 };
@@ -26,6 +36,39 @@ export const Default: Story = {
   name: "Default",
 
   args: {
-    children: "children...",
+    children: (
+      <>
+        <Col size={3} medium={2}>
+          .col-3.col-medium-2
+        </Col>
+        <Col size={6} medium={2}>
+          .col-6.col-medium-2
+        </Col>
+        <Col size={3} medium={2}>
+          .col-3.col-medium-2
+        </Col>
+      </>
+    ),
+  },
+};
+
+export const FourColumnMediumGrid: Story = {
+  name: "Four column medium grid",
+
+  args: {
+    children: (
+      <>
+        <Col size={3} medium={2}>
+          .col-3.col-medium-2
+        </Col>
+        <Col size={6} medium={1}>
+          .col-6.col-medium-1
+        </Col>
+        <Col size={3} medium={1}>
+          .col-3.col-medium-1
+        </Col>
+      </>
+    ),
+    fourColumnMedium: true,
   },
 };

src/components/Row/Row.test.tsx

@@ -17,6 +17,18 @@ describe("Row ", () => {
     );
     const row = screen.getByTestId("row");
     expect(row).toHaveClass("row");
+    expect(row).not.toHaveClass("row--4-cols-medium");
     expect(row).toHaveClass("extra-class");
   });
+
+  it("can use a four column grid on medium screens", () => {
+    render(
+      <Row data-testid="row" fourColumnMedium={true}>
+        Test content
+      </Row>,
+    );
+    const row = screen.getByTestId("row");
+    expect(row).toHaveClass("row--4-cols-medium");
+    expect(row).not.toHaveClass("row");
+  });
 });

src/components/Row/Row.tsx

@@ -13,6 +13,10 @@ export type Props = PropsWithSpread<
      * Optional class(es) to pass to the wrapping div element.
      */
     className?: ClassName;
+    /**
+     * Whether the row should have 4 columns on medium screens.
+     */
+    fourColumnMedium?: boolean;
   },
   HTMLProps<HTMLDivElement>
 >;
@@ -22,8 +26,19 @@ export type Props = PropsWithSpread<
  *
  * Vanilla has a responsive grid using a combination of rows and columns.
  */
-const Row = ({ children, className, ...props }: Props): JSX.Element => (
-  <div className={classNames(className, "row")} {...props}>
+const Row = ({
+  children,
+  className,
+  fourColumnMedium = false,
+  ...props
+}: Props): JSX.Element => (
+  <div
+    className={classNames(
+      className,
+      fourColumnMedium ? "row--4-cols-medium" : "row",
+    )}
+    {...props}
+  >
     {children}
   </div>
 );