From bead39e77b5de23665095be96923d27d50decf8c Mon Sep 17 00:00:00 2001
From: ej9x <ivan.pinchuk@8base.com>
Date: Wed, 19 Sep 2018 18:10:49 +0300
Subject: [PATCH] feat(atoms): add borderRadius modifier to the Paper

---
 src/atoms/Paper/Paper.js | 28 +++++++++++++++++++++++++---
 1 file changed, 25 insertions(+), 3 deletions(-)

diff --git a/src/atoms/Paper/Paper.js b/src/atoms/Paper/Paper.js
index b69001ca..6caf23ab 100644
--- a/src/atoms/Paper/Paper.js
+++ b/src/atoms/Paper/Paper.js
@@ -5,11 +5,17 @@ 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';
 
@@ -17,7 +23,6 @@ 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 };