feat(paper): add padding modifier

8base · Aug 10, 2018 · e364fdd · e364fdd
1 parent f1f2442
commit e364fdd
Show file tree

Hide file tree

Showing 2 changed files with 20 additions and 2 deletions.
diff --git a/src/atoms/Paper/Paper.js b/src/atoms/Paper/Paper.js
@@ -6,6 +6,7 @@ import { createStyledTag, createTheme, getThemeStyle } from '../../utils';
 
 type PaperProps = {|
   children?: React$Node,
+  padding: PropSizes,
 |};
 
 const name = 'paper';
@@ -19,8 +20,20 @@ const theme = createTheme(name, (colors: *): * => ({
     position: 'relative',
   },
 
-  modifiers: {},
-  defaults: {},
+  modifiers: {
+    padding: {
+      none: { padding: '0' },
+      xs: { padding: '0.5rem' },
+      sm: { padding: '1rem' },
+      md: { padding: '2rem' },
+      lg: { padding: '4rem' },
+      xl: { padding: '8rem' },
+    },
+  },
+
+  defaults: {
+    padding: 'none',
+  },
 }));
 
 const StyledTag = createStyledTag(name, props => ({

diff --git a/storybook/__tests__/__snapshots__/storyshots.test.js.snap b/storybook/__tests__/__snapshots__/storyshots.test.js.snap
@@ -1362,6 +1362,7 @@ exports[`Storyshots ATOMS/Card default 1`] = `
   border-radius: .5rem;
   box-shadow: 0 1px 3px 0 rgba(50,50,93,.14),0 4px 6px 0 rgba(112,157,199,.08);
   position: relative;
+  padding: 0px;
 }
 
 .emotion-0 {
@@ -1435,6 +1436,7 @@ exports[`Storyshots ATOMS/Card with custom offsets 1`] = `
   border-radius: .5rem;
   box-shadow: 0 1px 3px 0 rgba(50,50,93,.14),0 4px 6px 0 rgba(112,157,199,.08);
   position: relative;
+  padding: 0px;
 }
 
 .emotion-0 {
@@ -1508,6 +1510,7 @@ exports[`Storyshots ATOMS/Card without footer 1`] = `
   border-radius: .5rem;
   box-shadow: 0 1px 3px 0 rgba(50,50,93,.14),0 4px 6px 0 rgba(112,157,199,.08);
   position: relative;
+  padding: 0px;
 }
 
 .emotion-0 {
@@ -1571,6 +1574,7 @@ exports[`Storyshots ATOMS/Card without header 1`] = `
   border-radius: .5rem;
   box-shadow: 0 1px 3px 0 rgba(50,50,93,.14),0 4px 6px 0 rgba(112,157,199,.08);
   position: relative;
+  padding: 0px;
 }
 
 .emotion-0 {
@@ -11049,6 +11053,7 @@ exports[`Storyshots ATOMS/Paper with header and sections 1`] = `
   border-radius: .5rem;
   box-shadow: 0 1px 3px 0 rgba(50,50,93,.14),0 4px 6px 0 rgba(112,157,199,.08);
   position: relative;
+  padding: 0px;
 }
 
 .emotion-0 {