Merge pull request #217 from IBM/grid

feat(grid): support gutter, aspectRatio props

src/Grid/Column.svelte

@@ -1,16 +1,35 @@
 <script>
   export let as = false;
+  export let noGutter = false;
+  export let noGutterLeft = false;
+  export let noGutterRight = false;
 
   /**
-   * Types for `sm`, `md`, `lg`, `xlg`, `max`:
+   * Aspect ratio of the column
-   * true
+   * @type {("2x1" | "16x9" | "9x16" | "1x2" | "4x3" | "3x4" | "1x1")} [aspectRatio]
-   * Number
-   * { span: Number | true; offset?: Number }
    */
+  export let aspectRatio = undefined;
+
+  /**
+   * @typedef {(boolean | number)} ColumnSize
+   * @typedef {Object} ColumnSizeDescriptor
+   * @property {ColumnSize} [ColumnSizeDescriptor.span] Column size
+   * @property {number} [ColumnSizeDescriptor.offset] Column offset
+   */
+
+  /** @type {ColumnSize|ColumnSizeDescriptor} [sm] */
   export let sm = undefined;
+
+  /** @type {ColumnSize|ColumnSizeDescriptor} [md] */
   export let md = undefined;
+
+  /** @type {ColumnSize|ColumnSizeDescriptor} [lg] */
   export let lg = undefined;
+
+  /** @type {ColumnSize|ColumnSizeDescriptor} [xlg] */
   export let xlg = undefined;
+
+  /** @type {ColumnSize|ColumnSizeDescriptor} [max] */
   export let max = undefined;
 
   const breakpoints = ["sm", "md", "lg", "xlg", "max"];
@@ -43,9 +62,17 @@
     .join(" ");
   $: props = {
     ...$$restProps,
-    class: [$$restProps.class, columnClass, !columnClass && "bx--col"]
+    class: [
+      $$restProps.class,
+      columnClass,
+      !columnClass && "bx--col",
+      noGutter && "bx--no-gutter",
+      noGutterLeft && "bx--no-gutter--left",
+      noGutterRight && "bx--no-gutter--right",
+      aspectRatio && `bx--aspect-ratio bx--aspect-ratio--${aspectRatio}`,
+    ]
       .filter(Boolean)
-      .join(" ")
+      .join(" "),
   };
 </script>
 

src/Grid/Grid.Story.svelte

@@ -22,7 +22,6 @@
 
 <div class="grid">
   <h6>Columns with auto-width</h6>
-
   <Grid>
     <Row>
       <Column>
@@ -49,7 +48,6 @@
   </Grid>
 
   <h6>Responsive Grid</h6>
-
   <Grid>
     <Row>
       <Column sm={1} md={4} lg={8}>
@@ -76,7 +74,6 @@
   </Grid>
 
   <h6>Columns with Offset</h6>
-
   <Grid>
     <Row>
       <Column sm={{ span: 1, offset: 3 }}>
@@ -103,7 +100,6 @@
   </Grid>
 
   <h6>Condensed Grid</h6>
-
   <Grid condensed>
     <Row>
       <Column>
@@ -130,7 +126,6 @@
   </Grid>
 
   <h6>Condensed Columns</h6>
-
   <Grid>
     <Row>
       <Column>
@@ -201,7 +196,6 @@
   </Grid>
 
   <h6>Full Width</h6>
-
   <Grid fullWidth>
     <Row>
       <Column>
@@ -226,4 +220,72 @@
       </Column>
     </Row>
   </Grid>
+
+  <h6>Aspect Ratio: 2x1</h6>
+  <Grid>
+    <Row>
+      <Column aspectRatio="2x1">1</Column>
+      <Column aspectRatio="2x1">1</Column>
+    </Row>
+  </Grid>
+
+  <h6>Aspect Ratio: 16x9</h6>
+  <Grid>
+    <Row>
+      <Column aspectRatio="16x9">1</Column>
+      <Column aspectRatio="16x9">1</Column>
+      <Column aspectRatio="16x9">1</Column>
+      <Column aspectRatio="16x9">1</Column>
+    </Row>
+  </Grid>
+
+  <h6>Aspect Ratio: 4x3</h6>
+  <Grid>
+    <Row>
+      <Column aspectRatio="4x3">1</Column>
+      <Column aspectRatio="4x3">1</Column>
+      <Column aspectRatio="4x3">1</Column>
+      <Column aspectRatio="4x3">1</Column>
+    </Row>
+  </Grid>
+
+  <h6>Aspect Ratio: 1x1</h6>
+  <Grid>
+    <Row>
+      <Column aspectRatio="1x1">1</Column>
+      <Column aspectRatio="1x1">1</Column>
+      <Column aspectRatio="1x1">1</Column>
+      <Column aspectRatio="1x1">1</Column>
+    </Row>
+  </Grid>
+
+  <h6>Aspect Ratio: 3x4</h6>
+  <Grid>
+    <Row>
+      <Column aspectRatio="3x4">1</Column>
+      <Column aspectRatio="3x4">1</Column>
+      <Column aspectRatio="3x4">1</Column>
+      <Column aspectRatio="3x4">1</Column>
+    </Row>
+  </Grid>
+
+  <h6>Aspect Ratio: 9x16</h6>
+  <Grid>
+    <Row>
+      <Column aspectRatio="9x16">1</Column>
+      <Column aspectRatio="9x16">1</Column>
+      <Column aspectRatio="9x16">1</Column>
+      <Column aspectRatio="9x16">1</Column>
+    </Row>
+  </Grid>
+
+  <h6>Aspect Ratio: 1x2</h6>
+  <Grid>
+    <Row>
+      <Column aspectRatio="1x2">1</Column>
+      <Column aspectRatio="1x2">1</Column>
+      <Column aspectRatio="1x2">1</Column>
+      <Column aspectRatio="1x2">1</Column>
+    </Row>
+  </Grid>
 </div>

src/Grid/Grid.svelte

@@ -2,6 +2,9 @@
   export let as = false;
   export let condensed = false;
   export let fullWidth = false;
+  export let noGutter = false;
+  export let noGutterLeft = false;
+  export let noGutterRight = false;
 
   $: props = {
     ...$$restProps,
@@ -9,10 +12,13 @@
       $$restProps.class,
       "bx--grid",
       condensed && "bx--grid--condensed",
-      fullWidth && "bx--grid--full-width"
+      fullWidth && "bx--grid--full-width",
+      noGutter && "bx--no-gutter",
+      noGutterLeft && "bx--no-gutter--left",
+      noGutterRight && "bx--no-gutter--right",
     ]
       .filter(Boolean)
-      .join(" ")
+      .join(" "),
   };
 </script>
 

src/Grid/Row.svelte

@@ -1,12 +1,22 @@
 <script>
   export let as = false;
   export let condensed = false;
+  export let noGutter = false;
+  export let noGutterLeft = false;
+  export let noGutterRight = false;
 
   $: props = {
     ...$$restProps,
-    class: [$$restProps.class, "bx--row", condensed && "bx--row--condensed"]
+    class: [
+      $$restProps.class,
+      "bx--row",
+      condensed && "bx--row--condensed",
+      noGutter && "bx--no-gutter",
+      noGutterLeft && "bx--no-gutter--left",
+      noGutterRight && "bx--no-gutter--right",
+    ]
       .filter(Boolean)
-      .join(" ")
+      .join(" "),
   };
 </script>