feat(atoms): add css props to the GridLayout

8base · Jul 9, 2018 · 6fcd43d · 6fcd43d
1 parent df499de
commit 6fcd43d
Showing 1 changed file with 28 additions and 1 deletion.
diff --git a/src/atoms/Grid/GridLayout.js b/src/atoms/Grid/GridLayout.js
@@ -5,9 +5,20 @@ import { createStyledTag, createTheme } from 'utils';
 
 type GridLayoutProps = {|
   children?: React$Node,
+  /** possbile spaces between grid items */
   gap?: 'xs' | 'md' | 'lg' | 'none',
+  /** when true then set inline-grid */
   inline?: boolean,
-  padding?: 'xs' | 'md' | 'lg' | 'none',
+  /** possible offsets of the grid layout */
+  offset?: 'xs' | 'md' | 'lg' | 'none',
+  /** justify-content css rule*/
+  justifyContent?: 'start' | 'end' | 'center' | 'stretch' | 'space-around' | 'space-between' | 'space-evenly',
+  /** align-content css rule*/
+  alignContent?: 'start' | 'end' | 'center' | 'stretch' | 'space-around' | 'space-between' | 'space-evenly',
+  /** justify-items css rule */
+  justifyItems?: 'start' | 'end' | 'center' | 'stretch',
+  /** align-items css rule */
+  alignItems?: 'start' | 'end' | 'center' | 'stretch',
 |};
 
 const name = 'gridLayout';
@@ -65,6 +76,22 @@ const StyledTag = createStyledTag(name, (props) => {
     style.gridTemplateAreas = props.areas.map((item) => `"${item.join(' ')}"`).join(' ');
   }
 
+  if (props.justifyContent) {
+    style.justifyContent = props.justifyContent;
+  }
+
+  if (props.alignContent) {
+    style.alignContent = props.alignContent;
+  }
+
+  if (props.justifyItems) {
+    style.justifyItems = props.justifyItems;
+  }
+
+  if (props.alignItems) {
+    style.alignItems = props.alignItems;
+  }
+
   return style;
 });