From 9af756bd4b5cadae96ff3d3201b0299e718bab07 Mon Sep 17 00:00:00 2001
From: Richard O'flynn <richard.oflynn@brighter-software.co.uk>
Date: Fri, 27 Nov 2020 01:20:36 +0000
Subject: [PATCH] Add padding prop to Grid component

---
 docs/src/pages/components/Grid.svx            |  4 +++
 docs/src/pages/framed/Grid/PaddedGrid..svelte | 29 +++++++++++++++++++
 src/Grid/Column.svelte                        |  4 +++
 src/Grid/Grid.svelte                          |  4 +++
 src/Grid/Row.svelte                           |  3 ++
 tests/PaddedGrid.test.svelte                  | 20 +++++++++++++
 types/Grid/Column.d.ts                        |  9 +++++-
 types/Grid/Grid.d.ts                          |  9 +++++-
 types/Grid/Row.d.ts                           |  9 +++++-
 9 files changed, 88 insertions(+), 3 deletions(-)
 create mode 100644 docs/src/pages/framed/Grid/PaddedGrid..svelte
 create mode 100644 tests/PaddedGrid.test.svelte

diff --git a/docs/src/pages/components/Grid.svx b/docs/src/pages/components/Grid.svx
index 0f28f3d0..9375fcda 100644
--- a/docs/src/pages/components/Grid.svx
+++ b/docs/src/pages/components/Grid.svx
@@ -33,3 +33,7 @@ components: ["Grid", "Row", "Column"]
 ### Aspect ratio columns
 
 <FileSource src="/framed/Grid/AspectRatioColumns" />
+
+### Padded columns
+
+<FileSource src="/framed/Grid/PaddedGrid" />
diff --git a/docs/src/pages/framed/Grid/PaddedGrid..svelte b/docs/src/pages/framed/Grid/PaddedGrid..svelte
new file mode 100644
index 00000000..5d3f8abd
--- /dev/null
+++ b/docs/src/pages/framed/Grid/PaddedGrid..svelte
@@ -0,0 +1,29 @@
+<script>
+  import { Grid, Row, Column } from "carbon-components-svelte";
+</script>
+
+<Grid narrow padding>
+  <Row>
+    <Column style="outline: 1px solid var(--cds-interactive-04)">Column</Column>
+    <Column style="outline: 1px solid var(--cds-interactive-04)">Column</Column>
+    <Column style="outline: 1px solid var(--cds-interactive-04)">Column</Column>
+    <Column style="outline: 1px solid var(--cds-interactive-04)">Column</Column>
+  </Row>
+</Grid>
+
+<Grid narrow>
+  <Row padding>
+    <Column style="outline: 1px solid var(--cds-interactive-04)">Column</Column>
+    <Column style="outline: 1px solid var(--cds-interactive-04)">Column</Column>
+    <Column style="outline: 1px solid var(--cds-interactive-04)">Column</Column>
+    <Column style="outline: 1px solid var(--cds-interactive-04)">Column</Column>
+  </Row>
+  <Row>
+    <Column padding style="outline: 1px solid var(--cds-interactive-04)">
+      Column
+    </Column>
+    <Column style="outline: 1px solid var(--cds-interactive-04)">Column</Column>
+    <Column style="outline: 1px solid var(--cds-interactive-04)">Column</Column>
+    <Column style="outline: 1px solid var(--cds-interactive-04)">Column</Column>
+  </Row>
+</Grid>
diff --git a/src/Grid/Column.svelte b/src/Grid/Column.svelte
index 7964d317..f4df0c2d 100644
--- a/src/Grid/Column.svelte
+++ b/src/Grid/Column.svelte
@@ -32,6 +32,9 @@
    */
   export let aspectRatio = undefined;
 
+  /** Set to `true` to add top and bottom padding this column */
+  export let padding = false;
+
   /**
    * Set the small breakpoint
    * @type {ColumnBreakpoint}
@@ -100,6 +103,7 @@
       noGutterLeft && "bx--no-gutter--left",
       noGutterRight && "bx--no-gutter--right",
       aspectRatio && `bx--aspect-ratio bx--aspect-ratio--${aspectRatio}`,
+      padding && "bx--col-padding",
     ]
       .filter(Boolean)
       .join(" "),
diff --git a/src/Grid/Grid.svelte b/src/Grid/Grid.svelte
index 7e5bbc0c..b778ce1b 100644
--- a/src/Grid/Grid.svelte
+++ b/src/Grid/Grid.svelte
@@ -28,6 +28,9 @@
   /** Set to `true` to remove the right gutter */
   export let noGutterRight = false;
 
+  /** Set to `true` to add top and bottom padding to all columns */
+  export let padding = false;
+
   $: props = {
     ...$$restProps,
     class: [
@@ -39,6 +42,7 @@
       noGutter && "bx--no-gutter",
       noGutterLeft && "bx--no-gutter--left",
       noGutterRight && "bx--no-gutter--right",
+      padding && "bx--row-padding",
     ]
       .filter(Boolean)
       .join(" "),
diff --git a/src/Grid/Row.svelte b/src/Grid/Row.svelte
index 2b1f560a..deb51656 100644
--- a/src/Grid/Row.svelte
+++ b/src/Grid/Row.svelte
@@ -25,6 +25,8 @@
   /** Set to `true` to remove the right gutter */
   export let noGutterRight = false;
 
+  /** Set to `true` to add top and bottom padding to all columns */
+  export let padding = false;
   $: props = {
     ...$$restProps,
     class: [
@@ -35,6 +37,7 @@
       noGutter && "bx--no-gutter",
       noGutterLeft && "bx--no-gutter--left",
       noGutterRight && "bx--no-gutter--right",
+      padding && "bx--row-padding",
     ]
       .filter(Boolean)
       .join(" "),
diff --git a/tests/PaddedGrid.test.svelte b/tests/PaddedGrid.test.svelte
new file mode 100644
index 00000000..5b7a7c74
--- /dev/null
+++ b/tests/PaddedGrid.test.svelte
@@ -0,0 +1,20 @@
+<script lang="ts">
+  import { Grid, Row, Column } from "../types";
+</script>
+
+<Grid padding>
+  <Row padding>
+    <Column padding style="outline: 1px solid var(--cds-interactive-04)">
+      Column
+    </Column>
+    <Column padding style="outline: 1px solid var(--cds-interactive-04)">
+      Column
+    </Column>
+    <Column padding style="outline: 1px solid var(--cds-interactive-04)">
+      Column
+    </Column>
+    <Column padding style="outline: 1px solid var(--cds-interactive-04)">
+      Column
+    </Column>
+  </Row>
+</Grid>
diff --git a/types/Grid/Column.d.ts b/types/Grid/Column.d.ts
index 3704cef5..6cd8ec7d 100644
--- a/types/Grid/Column.d.ts
+++ b/types/Grid/Column.d.ts
@@ -9,7 +9,8 @@ export interface ColumnSizeDescriptor {
 
 export type ColumnBreakpoint = ColumnSize | ColumnSizeDescriptor;
 
-export interface ColumnProps extends svelte.JSX.HTMLAttributes<HTMLElementTagNameMap["div"]> {
+export interface ColumnProps
+  extends svelte.JSX.HTMLAttributes<HTMLElementTagNameMap["div"]> {
   /**
    * Set to `true` to render a custom HTML element
    * Props are destructured as `props` in the default slot (e.g. <Column let:props><article {...props}>...</article></Column>)
@@ -40,6 +41,12 @@ export interface ColumnProps extends svelte.JSX.HTMLAttributes<HTMLElementTagNam
    */
   aspectRatio?: "2x1" | "16x9" | "9x16" | "1x2" | "4x3" | "3x4" | "1x1";
 
+  /**
+   * Set to `true` to add top and bottom padding
+   * @default false
+   */
+  padding?: boolean;
+
   /**
    * Set the small breakpoint
    */
diff --git a/types/Grid/Grid.d.ts b/types/Grid/Grid.d.ts
index fa7f8444..3d3b8b7a 100644
--- a/types/Grid/Grid.d.ts
+++ b/types/Grid/Grid.d.ts
@@ -1,6 +1,7 @@
 /// <reference types="svelte" />
 
-export interface GridProps extends svelte.JSX.HTMLAttributes<HTMLElementTagNameMap["div"]> {
+export interface GridProps
+  extends svelte.JSX.HTMLAttributes<HTMLElementTagNameMap["div"]> {
   /**
    * Set to `true` to render a custom HTML element
    * Props are destructured as `props` in the default slot (e.g. <Grid let:props><header {...props}>...</header></Grid>)
@@ -43,6 +44,12 @@ export interface GridProps extends svelte.JSX.HTMLAttributes<HTMLElementTagNameM
    * @default false
    */
   noGutterRight?: boolean;
+
+  /**
+   * Set to `true` to add top and bottom padding to all columns
+   * @default false
+   */
+  padding?: boolean;
 }
 
 export default class Grid {
diff --git a/types/Grid/Row.d.ts b/types/Grid/Row.d.ts
index 88eb63bd..af154393 100644
--- a/types/Grid/Row.d.ts
+++ b/types/Grid/Row.d.ts
@@ -1,6 +1,7 @@
 /// <reference types="svelte" />
 
-export interface RowProps extends svelte.JSX.HTMLAttributes<HTMLElementTagNameMap["div"]> {
+export interface RowProps
+  extends svelte.JSX.HTMLAttributes<HTMLElementTagNameMap["div"]> {
   /**
    * Set to `true` to render a custom HTML element
    * Props are destructured as `props` in the default slot (e.g. <Row let:props><section {...props}>...</section></Row>)
@@ -37,6 +38,12 @@ export interface RowProps extends svelte.JSX.HTMLAttributes<HTMLElementTagNameMa
    * @default false
    */
   noGutterRight?: boolean;
+
+  /**
+   * Set to `true` to add top and bottom padding to all columns
+   * @default false
+   */
+  padding?: boolean;
 }
 
 export default class Row {