Merge pull request #460 from appearhere/feature/LFR-1690

LFR-1690 Add Grid Layout

packages/core/src/components/GridLayout/GridLayout.css

@@ -0,0 +1,14 @@
+.container {
+  display: grid;
+  height: auto;
+  justify-items: center;
+  align-items:center;
+}
+
+.item {
+  display: flex;
+  justify-content: center;
+  align-items: center;
+  width: 100%;
+  height: 100%;
+} 

packages/core/src/components/GridLayout/GridLayout.js

@@ -0,0 +1,44 @@
+import React, { Component } from 'react';
+import css from './GridLayout.css';
+import PropTypes from 'prop-types';
+import shortid from 'short-id';
+
+export default class GridLayout extends Component {
+  static propTypes = {
+    children: PropTypes.oneOfType([
+      PropTypes.arrayOf(PropTypes.node),
+      PropTypes.node
+      ]).isRequired,
+    col: PropTypes.number,
+    colGap: PropTypes.number,
+    rowHeight: PropTypes.number,
+  };
+
+  static defaultProps = {
+    col: 4,
+    colGap: 1,
+    rowHeight: 10
+  };
+
+
+  render() {
+    const { col, colGap, rowHeight, children } = this.props;
+
+    return (
+      <div 
+        className={css.container}
+        style={{
+          gridTemplateColumns: `repeat(${col}, minmax(0, 1fr))`,
+          gridGap: `${colGap}rem`,
+          gridAutoRows: `${rowHeight}rem`,
+        }}
+      >
+       {children.map(item => (
+         <div key={shortid.generate()} className={css.item}>
+           {item}
+         </div>
+       ))}
+      </div>  
+    );
+  }
+}

packages/core/src/components/GridLayout/GridLayout.test.js

@@ -0,0 +1,16 @@
+import React from 'react';
+import { render } from '@testing-library/react';
+import GridLayout from './GridLayout';
+
+it('renders without crashing', () => {
+  const div = document.createElement('div');
+  render(
+    <GridLayout>
+      <span>child</span>
+      <span>child</span>
+    </GridLayout>,
+    div,
+  );
+});
+
+

packages/core/src/components/index.js

@@ -105,6 +105,7 @@ export const Indicators = {
 
 export FunnelInputField from './FunnelInputField/FunnelInputField';
 export GridFader from './GridFader/GridFader';
+export GridLayout from './GridLayout/GridLayout';
 export HeartBtn from './HeartBtn/HeartBtn';
 export Hero from './Hero/Hero';
 export SquareHero from './Hero/SquareHero';

packages/core/src/index.js

@@ -49,6 +49,7 @@ export {
   AutoComplete,
   FunnelInputField,
   GridFader,
+  GridLayout,
   HeartBtn,
   Hero,
   SquareHero,

packages/playground/.storybook/config.js

@@ -30,6 +30,7 @@ function loadStories() {
   require('../stories/FormComponents.story.js');
   require('../stories/FunnelInputField.story.js');
   require('../stories/GridFader.story.js');
+  require('../stories/GridLayout.story.js');
   require('../stories/HeartBtn.story.js');
   require('../stories/Hero.story.js');
   require('../stories/HorizontalOverflowBar.story.js');

packages/playground/stories/GridLayout.story.js

@@ -0,0 +1,66 @@
+import React from 'react';
+import { storiesOf } from '@storybook/react';
+import { withKnobs, number } from '@storybook/addon-knobs';
+
+import { GridLayout, Modifiers as m } from '@appearhere/bloom';
+
+const stories = storiesOf('GridLayout', module);
+stories.addDecorator(withKnobs);
+
+stories.add('default', () => (
+  <GridLayout
+    col={number('Columns', 3)}
+    colGap={number('Column Gap (rem)', 1)}
+    rowHeight={number('Row Height (rem)', 10)}
+  >
+    <div
+      className={m.bgSuccess}
+      style={{
+        width: '100%',
+        height: '100%',
+        display: 'inline-block',
+      }}
+    />
+    <div
+      className={m.bgDanger}
+      style={{
+        width: '100%',
+        height: '100%',
+        display: 'inline-block',
+      }}
+    />
+    <div
+      className={m.bgPrimary}
+      style={{
+        width: '100%',
+        height: '100%',
+        display: 'inline-block',
+      }}
+    />
+    <div
+      className={m.bgSuccess}
+      style={{
+        width: '100%',
+        height: '100%',
+        display: 'inline-block',
+      }}
+    />
+    <div
+      className={m.bgDanger}
+      style={{
+        width: '100%',
+        height: '100%',
+        display: 'inline-block',
+      }}
+    />
+    <div
+      className={m.bgPrimary}
+      style={{
+        width: '100%',
+        height: '100%',
+        display: 'inline-block',
+      }}
+    />
+
+  </GridLayout>
+));