From 77b4d32c6296504fa54259abd267e4c04ccf6b12 Mon Sep 17 00:00:00 2001
From: Eric Liu <ericyl.us@gmail.com>
Date: Fri, 24 Jul 2020 21:31:39 -0700
Subject: [PATCH] feat(grid): support narrow prop for Grid, Row

---
 src/Grid/Grid.Story.svelte | 26 ++++++++++++++++++++++++++
 src/Grid/Grid.svelte       |  2 ++
 src/Grid/Row.svelte        |  2 ++
 3 files changed, 30 insertions(+)

diff --git a/src/Grid/Grid.Story.svelte b/src/Grid/Grid.Story.svelte
index 2b5dda68..3657d9e8 100644
--- a/src/Grid/Grid.Story.svelte
+++ b/src/Grid/Grid.Story.svelte
@@ -47,6 +47,32 @@
     </Row>
   </Grid>
 
+  <h6>Narrow grid</h6>
+  <Grid narrow>
+    <Row>
+      <Column>
+        <div class="outside">
+          <div class="inside">1/4</div>
+        </div>
+      </Column>
+      <Column>
+        <div class="outside">
+          <div class="inside">1/4</div>
+        </div>
+      </Column>
+      <Column>
+        <div class="outside">
+          <div class="inside">1/4</div>
+        </div>
+      </Column>
+      <Column>
+        <div class="outside">
+          <div class="inside">1/4</div>
+        </div>
+      </Column>
+    </Row>
+  </Grid>
+
   <h6>Responsive Grid</h6>
   <Grid>
     <Row>
diff --git a/src/Grid/Grid.svelte b/src/Grid/Grid.svelte
index fa3b06e4..dc702154 100644
--- a/src/Grid/Grid.svelte
+++ b/src/Grid/Grid.svelte
@@ -1,6 +1,7 @@
 <script>
   export let as = false;
   export let condensed = false;
+  export let narrow = false;
   export let fullWidth = false;
   export let noGutter = false;
   export let noGutterLeft = false;
@@ -12,6 +13,7 @@
       $$restProps.class,
       "bx--grid",
       condensed && "bx--grid--condensed",
+      narrow && "bx--grid--narrow",
       fullWidth && "bx--grid--full-width",
       noGutter && "bx--no-gutter",
       noGutterLeft && "bx--no-gutter--left",
diff --git a/src/Grid/Row.svelte b/src/Grid/Row.svelte
index c394655b..18074cff 100644
--- a/src/Grid/Row.svelte
+++ b/src/Grid/Row.svelte
@@ -1,6 +1,7 @@
 <script>
   export let as = false;
   export let condensed = false;
+  export let narrow = false;
   export let noGutter = false;
   export let noGutterLeft = false;
   export let noGutterRight = false;
@@ -11,6 +12,7 @@
       $$restProps.class,
       "bx--row",
       condensed && "bx--row--condensed",
+      narrow && "bx--row--narrow",
       noGutter && "bx--no-gutter",
       noGutterLeft && "bx--no-gutter--left",
       noGutterRight && "bx--no-gutter--right",