From 28da8881da8553959e8cca1492ab97010b1dffd1 Mon Sep 17 00:00:00 2001
From: Julie Muzina <julie.muzina@canonical.com>
Date: Wed, 2 Oct 2024 18:06:49 -0400
Subject: [PATCH] feat: Add row--4-cols-medium grid row

---
 package.json                       |  2 +-
 src/components/Row/Row.stories.tsx | 45 +++++++++++++++++++++++++++++-
 src/components/Row/Row.test.tsx    | 12 ++++++++
 src/components/Row/Row.tsx         | 19 +++++++++++--
 4 files changed, 74 insertions(+), 4 deletions(-)

diff --git a/package.json b/package.json
index 95febcebb..a53fbee58 100644
--- a/package.json
+++ b/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"
   },
diff --git a/src/components/Row/Row.stories.tsx b/src/components/Row/Row.stories.tsx
index 8fcf95f73..e580a6b9b 100644
--- a/src/components/Row/Row.stories.tsx
+++ b/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,
   },
 };
diff --git a/src/components/Row/Row.test.tsx b/src/components/Row/Row.test.tsx
index 1a351651a..e1fcae3f7 100644
--- a/src/components/Row/Row.test.tsx
+++ b/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");
+  });
 });
diff --git a/src/components/Row/Row.tsx b/src/components/Row/Row.tsx
index be0275ddf..6e0b06e00 100644
--- a/src/components/Row/Row.tsx
+++ b/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>
 );