From 3fa3d6f5c4c1a94ae624cd572463a8d09b418ce1 Mon Sep 17 00:00:00 2001
From: Alina Beck <alina.beck@mail.com>
Date: Wed, 14 Aug 2019 12:28:17 +0100
Subject: [PATCH] use design tokens for grid gap

---
 src/system/components/layout/Grid/Grid.vue |  8 +++++---
 src/system/components/layout/Grid/demo.md  | 20 +++++++++++---------
 2 files changed, 16 insertions(+), 12 deletions(-)

diff --git a/src/system/components/layout/Grid/Grid.vue b/src/system/components/layout/Grid/Grid.vue
index aca142682..e13fa8f59 100644
--- a/src/system/components/layout/Grid/Grid.vue
+++ b/src/system/components/layout/Grid/Grid.vue
@@ -9,6 +9,8 @@
 </template>
 
 <script>
+import { getSpace } from '@@/utils'
+
 /**
  * Used in combination with the grid item component to create masonry layouts.
  * @version 1.0.0
@@ -21,8 +23,8 @@ export default {
      * The vertical and horizontal gap between grid items
      */
     gap: {
-      type: Number,
-      default: 16, // TODO: how to use tokens.small here?
+      type: String,
+      default: 'small',
     },
     /**
      * The minimum width of each column
@@ -50,7 +52,7 @@ export default {
     styles() {
       return {
         gridTemplateColumns: `repeat(auto-fill, minmax(${this.minColumnWidth}px, 1fr`,
-        gridGap: `${this.gap}px`,
+        gridGap: `${getSpace(this.gap)}px`,
         gridAutoRows: `${this.rowHeight}px`,
       }
     }
diff --git a/src/system/components/layout/Grid/demo.md b/src/system/components/layout/Grid/demo.md
index 103ed38b3..fadbf1eb7 100644
--- a/src/system/components/layout/Grid/demo.md
+++ b/src/system/components/layout/Grid/demo.md
@@ -1,6 +1,8 @@
-## Column Widths
+## Column Width
 
-All columns share the space in the grid evenly. You can set a minimum width beyond which columns will continue to grow until there is enough space to fit another column of minimum width. (Resize the window to see the effect.)
+All columns share the space in the grid evenly and grow and shrink dynamically.
+
+You can set a minimum width beyond which columns will continue to grow until there is enough space to fit another column of minimum width. (Resize the window to see the effect.)
 ```
 <ds-grid min-column-width="200">
   <ds-grid-item><ds-placeholder>same</ds-placeholder></ds-grid-item>
@@ -12,9 +14,9 @@ All columns share the space in the grid evenly. You can set a minimum width beyo
 
 ## Gaps
 
-You can set a gap which will be applied as a vertical and horizontal space between all grid items.
+You can set a gap which will be applied as a vertical and horizontal space between all grid items. Allowed values are [the common space sizes](/design-tokens/#spaceSize) and `0`. The default is `small`.
 ```
-<ds-grid gap="30">
+<ds-grid gap="x-small">
   <ds-grid-item><ds-placeholder>same</ds-placeholder></ds-grid-item>
   <ds-grid-item><ds-placeholder>same</ds-placeholder></ds-grid-item>
   <ds-grid-item><ds-placeholder>same</ds-placeholder></ds-grid-item>
@@ -30,15 +32,15 @@ Once the grid is defined a grid item can span several columns and/or rows. You c
   <ds-grid-item column-span="fullWidth"><ds-placeholder>full width</ds-placeholder></ds-grid-item>
   <ds-grid-item row-span="6" column-span="2"><ds-placeholder>2 columns, 6 rows</ds-placeholder></ds-grid-item>
   <ds-grid-item row-span="8"><ds-placeholder>8 rows</ds-placeholder></ds-grid-item>
-  <ds-grid-item><ds-placeholder>default</ds-placeholder></ds-grid-item>
+  <ds-grid-item><ds-placeholder>default (1 column, 4 rows)</ds-placeholder></ds-grid-item>
 </ds-grid>
 ```
 
 ## Row Height
 
-You can set a row height – but this is only recommended in combination with the grid item property `row-span`! With these values you can fine tune the height of grid items which will always be a multiple of the defined row height.
+You can set the height of a row – but this is only recommended in combination with setting the grid item property `row-span`! With these values you can fine tune the height of grid items which will always be a multiple of the defined `row-height`.
 
-Low row heights leads to a more flexible item height:
+Low row height leads to a more fine-grained item height:
 ```
 <ds-grid row-height="4">
   <ds-grid-item row-span="10"><ds-placeholder>same</ds-placeholder></ds-grid-item>
@@ -47,7 +49,7 @@ Low row heights leads to a more flexible item height:
 </ds-grid>
 ```
 
-High row height leads to a less flexible item height:
+High row height leads to a rougher item height:
 ```
 <ds-grid row-height="100">
   <ds-grid-item row-span="1"><ds-placeholder>same</ds-placeholder></ds-grid-item>
@@ -58,7 +60,7 @@ High row height leads to a less flexible item height:
 
 ## Masonry Layout
 
-In a classic masonry layout items usually have the same width but different heights and are sorted from left to right then top to bottom. You can achieve this by setting the `min-column-width` and `gap` properties for the grid (or using the defaults) and then calculating the `row-span` for each grid item depending on its contents.
+In a classic masonry layout items usually have the same width but different heights and are sorted from left to right then top to bottom. You can achieve this by calculating and setting the `row-span` programmatically for each grid item, depending on its contents.
 
 Some items may move slightly out of order to make sure existing rows are filled before creating new ones.
 ```