feat(atoms): add borderRadius modifier to the Paper

8base · Sep 19, 2018 · bead39e · bead39e
1 parent 04fc21b
commit bead39e
Showing 1 changed file with 25 additions and 3 deletions.
diff --git a/src/atoms/Paper/Paper.js b/src/atoms/Paper/Paper.js
@@ -5,19 +5,24 @@ import React from 'react';
 import { createStyledTag, createTheme, getThemeStyle } from '../../utils';
 import type { PropSizes } from '../../types';
 
-type PaperProps = {|
+type PaperProps = {
   children?: React$Node,
+  /** possible padding */
   padding?: PropSizes | 'xxl',
+  /** when true then stetch cpontainer to the parent */
+  stretch?: boolean,
+  /** modifier to regulate border radius */
+  borderRadius?: 'top' | 'bottom' | 'all',
+  /** custom styles */
   style?: Object,
-|};
+};
 
 const name = 'paper';
 
 const theme = createTheme(name, (colors: *, sizes: *): * => ({
   paper: {
     background: colors.WHITE,
     color: colors.BLACK,
-    borderRadius: sizes.MAIN_BORDER_RADIUS,
     boxShadow: '0 1px 3px 0 rgba(50,50,93,.14), 0 4px 6px 0 rgba(112,157,199,.08)',
     position: 'relative',
   },
@@ -32,14 +37,29 @@ const theme = createTheme(name, (colors: *, sizes: *): * => ({
       xl: { padding: '4rem' },
       xxl: { padding: '8rem' },
     },
+    borderRadius: {
+      top: {
+        borderTopLeftRadius: sizes.MAIN_BORDER_RADIUS,
+        borderTopRightRadius: sizes.MAIN_BORDER_RADIUS,
+      },
+      bottom: {
+        borderBottomLeftRadius: sizes.MAIN_BORDER_RADIUS,
+        borderBottomhtRadius: sizes.MAIN_BORDER_RADIUS,
+      },
+      all: {
+        borderRadius: sizes.MAIN_BORDER_RADIUS,
+      },
+    },
     stretch: {
       flex: 1,
       width: '100%',
+      height: '100%',
     },
   },
 
   defaults: {
     padding: 'none',
+    borderRadius: 'all',
   },
 }));
 
@@ -57,4 +77,6 @@ function Paper({
   return <StyledTag { ...rest } tagName="div">{ children }</StyledTag>;
 }
 
+Paper.defaultProps = theme[name].defaults;
+
 export { Paper, theme };