From 015711d99b50e5eed95e04d0d9b096a47fd5e49e Mon Sep 17 00:00:00 2001
From: zouxuoz <zouxuoz@gmail.com>
Date: Wed, 8 Aug 2018 11:49:51 +0300
Subject: [PATCH] feat(atoms): add xl gap for grid layout

---
 src/atoms/Grid/GridLayout.js                         | 12 +++++++++---
 .../__tests__/__snapshots__/storyshots.test.js.snap  |  2 +-
 2 files changed, 10 insertions(+), 4 deletions(-)

diff --git a/src/atoms/Grid/GridLayout.js b/src/atoms/Grid/GridLayout.js
index edf22c20..19adfd7c 100644
--- a/src/atoms/Grid/GridLayout.js
+++ b/src/atoms/Grid/GridLayout.js
@@ -6,11 +6,11 @@ import { createStyledTag, createTheme } from '../../utils';
 type GridLayoutProps = {|
   children?: React$Node,
   /** possbile spaces between grid items */
-  gap?: 'xs' | 'md' | 'lg' | 'none',
+  gap?: 'xs' | 'sm' | 'md' | 'lg' | 'xl' | 'none',
   /** when true then set inline-grid */
   inline?: boolean,
   /** possible offsets of the grid layout */
-  offset?: 'xs' | 'md' | 'lg' | 'none',
+  offset?: 'sm' | 'md' | 'lg' | 'none',
   /** justify-content css rule*/
   justifyContent?: 'start' | 'end' | 'center' | 'stretch' | 'space-around' | 'space-between' | 'space-evenly',
   /** align-content css rule*/
@@ -27,6 +27,9 @@ const theme = createTheme(name, {
   modifiers: {
     gap: {
       xs: {
+        gridGap: '0.5rem',
+      },
+      sm: {
         gridGap: '1rem',
       },
       md: {
@@ -35,10 +38,13 @@ const theme = createTheme(name, {
       lg: {
         gridGap: '2rem',
       },
+      xl: {
+        gridGap: '3rem',
+      },
       none: {},
     },
     padding: {
-      xs: {
+      sm: {
         padding: '1rem',
       },
       md: {
diff --git a/storybook/__tests__/__snapshots__/storyshots.test.js.snap b/storybook/__tests__/__snapshots__/storyshots.test.js.snap
index 9a836925..998982c7 100644
--- a/storybook/__tests__/__snapshots__/storyshots.test.js.snap
+++ b/storybook/__tests__/__snapshots__/storyshots.test.js.snap
@@ -12651,7 +12651,7 @@ exports[`Storyshots MOLECULES/Rating with default modifiers 1`] = `
 .emotion-4 {
   display: inline-grid;
   grid-auto-columns: min-content;
-  grid-gap: 1rem;
+  grid-gap: 0.5rem;
 }
 
 .emotion-1 {