From dddb5b58b9c3a855b64170d8785a9adf145eac0a Mon Sep 17 00:00:00 2001
From: Peter Makowski <peter.makowski@canonical.com>
Date: Mon, 4 Dec 2023 15:11:02 +0100
Subject: [PATCH] feat: add content section variant (#49)

* ci: add stylelint
---
 .../ContentSection/ContentSection.stories.tsx      |  1 +
 src/lib/sections/ContentSection/ContentSection.tsx | 14 ++++++++++----
 2 files changed, 11 insertions(+), 4 deletions(-)

diff --git a/src/lib/sections/ContentSection/ContentSection.stories.tsx b/src/lib/sections/ContentSection/ContentSection.stories.tsx
index cbe4470..26045d2 100644
--- a/src/lib/sections/ContentSection/ContentSection.stories.tsx
+++ b/src/lib/sections/ContentSection/ContentSection.stories.tsx
@@ -53,5 +53,6 @@ export const WithForm = {
         </ContentSection.Footer>
       </>
     ),
+    variant: "narrow",
   },
 };
diff --git a/src/lib/sections/ContentSection/ContentSection.tsx b/src/lib/sections/ContentSection/ContentSection.tsx
index e779758..dc4c81c 100644
--- a/src/lib/sections/ContentSection/ContentSection.tsx
+++ b/src/lib/sections/ContentSection/ContentSection.tsx
@@ -1,6 +1,6 @@
 import * as React from "react";
 
-import { Col } from "@canonical/react-components";
+import { Col, Row } from "@canonical/react-components";
 import classNames from "classnames";
 
 import "./ContentSection.scss";
@@ -29,12 +29,18 @@ export const ContentSection = ({
   children,
   className,
   as,
+  variant = "wide",
   ...props
-}: ContentSectionProps) => {
+}: ContentSectionProps & {
+  variant?: "narrow" | "wide";
+}) => {
   const Component = as || "section";
+  const sectionClass = classNames("content-section", className);
   return (
-    <Component {...props} className={classNames("content-section", className)}>
-      <Col size={12}>{children}</Col>
+    <Component {...props} className={sectionClass}>
+      <Row>
+        <Col size={variant === "narrow" ? 6 : 12}>{children}</Col>
+      </Row>
     </Component>
   );
 };