From 4edb8cd541a95b69bdd3a750dfd5c95053fcc0c8 Mon Sep 17 00:00:00 2001
From: Alina Beck <alina.beck@mail.com>
Date: Tue, 13 Aug 2019 19:08:27 +0100
Subject: [PATCH] add grid item to grid docs

---
 src/system/components/layout/Grid/Grid.vue    | 12 ++++
 .../components/layout/Grid/GridItem.vue       | 62 ++++++++++++-------
 2 files changed, 50 insertions(+), 24 deletions(-)

diff --git a/src/system/components/layout/Grid/Grid.vue b/src/system/components/layout/Grid/Grid.vue
index 541b0f0d4..aca142682 100644
--- a/src/system/components/layout/Grid/Grid.vue
+++ b/src/system/components/layout/Grid/Grid.vue
@@ -17,18 +17,30 @@
 export default {
   name: 'DsGrid',
   props: {
+    /**
+     * The vertical and horizontal gap between grid items
+     */
     gap: {
       type: Number,
       default: 16, // TODO: how to use tokens.small here?
     },
+    /**
+     * The minimum width of each column
+     */
     minColumnWidth: {
       type: Number,
       default: 250,
     },
+    /**
+     * The height of each row (recommended to use the default)
+     */
     rowHeight: {
       type: Number,
       default: 20,
     },
+    /**
+     * The outermost html tag
+     */
     tag: {
       type: String,
       default: 'div',
diff --git a/src/system/components/layout/Grid/GridItem.vue b/src/system/components/layout/Grid/GridItem.vue
index db05aa3fd..3fc0eae2e 100644
--- a/src/system/components/layout/Grid/GridItem.vue
+++ b/src/system/components/layout/Grid/GridItem.vue
@@ -8,30 +8,44 @@
 </template>
 
 <script>
-  export default {
-    name: 'DsGridItem',
-    props: {
-      columnSpan: {
-        type: [String, Number],
-        default: 1,
-      },
-      rowSpan: {
-        type: Number,
-        default: 4,
-      },
-      tag: {
-        type: String,
-        default: 'div',
-      },
+/**
+ * @version 1.0.0
+ * @see DsGrid
+ */
+export default {
+  name: 'DsGridItem',
+  props: {
+    /**
+     * The number of columns the item will span
+     * @options 'fullWidth'|number
+     */
+    columnSpan: {
+      type: [String, Number],
+      default: 1,
     },
-    computed: {
-      styles() {
-        return {
-          gridRowEnd: `span ${this.rowSpan}`,
-          gridColumnStart: this.columnSpan === 'fullWidth' ? 1 : 'auto',
-          gridColumnEnd: this.columnSpan === 'fullWidth' ? -1 : `span ${this.columnSpan}`,
-        }
+    /**
+     * The number of rows the item will span
+     */
+    rowSpan: {
+      type: Number,
+      default: 4,
+    },
+    /**
+     * The outermost html tag
+     */
+    tag: {
+      type: String,
+      default: 'div',
+    },
+  },
+  computed: {
+    styles() {
+      return {
+        gridRowEnd: `span ${this.rowSpan}`,
+        gridColumnStart: this.columnSpan === 'fullWidth' ? 1 : 'auto',
+        gridColumnEnd: this.columnSpan === 'fullWidth' ? -1 : `span ${this.columnSpan}`,
       }
-    },
-  }
+    }
+  },
+}
 </script>