Add styled system to box

Author: Jakub Holak

src/components/box/Box.tsx

@@ -2,6 +2,7 @@ import React, { FunctionComponent } from "react";
 import styled, { css } from "styled-components";
 import theme from "../../theme";
 import { Container } from "../container";
+import { space, SpaceProps } from "styled-system";
 
 type BoxProps = {
   dark?: boolean;
@@ -11,7 +12,7 @@ type BoxProps = {
   color?: string;
   backgroundColor?: string;
   radius?: "small" | "medium" | "large";
-  padding?:
+  spacing?:
     | "spacing01"
     | "spacing02"
     | "spacing03"
@@ -20,7 +21,7 @@ type BoxProps = {
     | "spacing06"
     | "spacing07"
     | "spacing08";
-  margin?:
+  innerSpacing?:
     | "spacing01"
     | "spacing02"
     | "spacing03"
@@ -29,13 +30,12 @@ type BoxProps = {
     | "spacing06"
     | "spacing07"
     | "spacing08";
-
   shadow?: "shadow01" | "shadow02" | "shadow03" | "shadow04";
 
   children?: React.ReactNode;
 };
 
-const StyledBox = styled(Container)<BoxProps>`
+const StyledBox = styled(Container)<BoxProps & SpaceProps>`
   box-sizing: border-box;
   min-width: 0;
   padding: ${theme.spacing.spacing05};
@@ -57,16 +57,17 @@ const StyledBox = styled(Container)<BoxProps>`
     css`
       border-radius: ${theme.radius[radius]};
     `}
-  ${({ padding }) =>
-    padding &&
-    css`
-      padding: ${theme.spacing[padding]};
-    `}
 
-    ${({ margin }) =>
-      margin &&
+      ${({ innerSpacing }) =>
+        innerSpacing &&
+        css`
+          padding: ${theme.spacing[innerSpacing]};
+        `}
+        
+    ${({ spacing }) =>
+      spacing &&
       css`
-        margin-bottom: ${theme.spacing[margin]};
+        margin-bottom: ${theme.spacing[spacing]};
       `}
 
   ${({ shadow }) =>
@@ -99,6 +100,7 @@ const StyledBox = styled(Container)<BoxProps>`
     css`
       background-color: ${theme.colors[backgroundColor] || backgroundColor};
     `}
+     ${space}
 `;
 
 export const Box: FunctionComponent<BoxProps> = ({ children, ...props }) => (

src/stories/Box.stories.mdx

@@ -38,7 +38,7 @@ type BoxProps = {
   color?: string;
   backgroundColor?: string;
   radius?: string;
-  padding?: string;
+  innerSpacing?: string;
   spacing?: string;
   shadow?: string;
   children?: React.ReactNode;
@@ -60,25 +60,15 @@ type BoxProps = {
 <Preview>
   <Story name="border">
     <Container>
-      <Box border="default">
-        Default border
-      </Box>
+      <Box border="default">Default border</Box>
       <Spacer height="1rem" />
-      <Box border="disabled">
-        Bold border
-      </Box>
+      <Box border="disabled">Bold border</Box>
       <Spacer height="1rem" />
-      <Box border="danger">
-        Danger border
-      </Box>
+      <Box border="danger">Danger border</Box>
       <Spacer height="1rem" />
-      <Box border="notification">
-        Notification border
-      </Box>
+      <Box border="notification">Notification border</Box>
       <Spacer height="1rem" />
-      <Box border="1px solid violet">
-        Custom border
-      </Box>
+      <Box border="1px solid violet">Custom border</Box>
     </Container>
   </Story>
 </Preview>
@@ -107,39 +97,30 @@ type BoxProps = {
 
 ### Padding
 
-> `padding`: `string` — [`spacing01`, `spacing02`, `spacing03`, `spacing04`, `spacing05`, `spacing06`, `spacing07`]
+> `innerSpacing`: `string` — [`spacing01`, `spacing02`, `spacing03`, `spacing04`, `spacing05`, `spacing06`, `spacing07`]
 
 <Preview>
-  <Story name="padding">
+  <Story name="innerSpacing">
     <Container>
-      <Box padding="spacing04">
-        Box with spacing04 padding prop
-      </Box>
+      <Box innerSpacing="spacing04">Box with spacing04 innerSpacing prop</Box>
       <Spacer height="1rem" />
-      <Box padding="spacing07">Box with spacing07 padding prop</Box>
+      <Box innerSpacing="spacing07">Box with spacing07 innerSpacing prop</Box>
     </Container>
   </Story>
 </Preview>
 
-
 ### Shadow
 
 > `shadow`: `string` — [`shadow01`, `shadow02`, `shadow03`, `shadow04`]
 
 <Preview>
   <Story name="shadow">
     <Container>
-      <Box shadow="shadow01">
-        Box with shadow01 shadow prop
-      </Box>
+      <Box shadow="shadow01">Box with shadow01 shadow prop</Box>
       <Spacer height="1rem" />
-      <Box shadow="shadow02">
-        Box with shadow02 shadow prop
-      </Box>
+      <Box shadow="shadow02">Box with shadow02 shadow prop</Box>
       <Spacer height="1rem" />
-      <Box shadow="shadow03">
-        Box with shadow03 shadow prop
-      </Box>
+      <Box shadow="shadow03">Box with shadow03 shadow prop</Box>
       <Spacer height="1rem" />
       <Box shadow="shadow04">Box with shadow04 shadow prop</Box>
     </Container>
@@ -153,21 +134,15 @@ type BoxProps = {
 <Preview>
   <Story name="color">
     <Container>
-      <Box color="danger">
-        Danger color (from theme)
-      </Box>
+      <Box color="danger">Danger color (from theme)</Box>
       <Spacer height="1rem" />
-      <Box color="notification">
-        Notification color (from theme)
-      </Box>
+      <Box color="notification">Notification color (from theme)</Box>
       <Spacer height="1rem" />
       <Box color="palevioletred">
         Palevioletred box (not exististing in theme)
       </Box>
       <Spacer height="1rem" />
-      <Box color="#5ead9d">
-        #5ead9d color
-      </Box>
+      <Box color="#5ead9d">#5ead9d color</Box>
     </Container>
   </Story>
 </Preview>