From 91bf361ef21d1b0325e9fbe0e72a0f8f376c88a0 Mon Sep 17 00:00:00 2001
From: =?UTF-8?q?=E1=91=AD=E1=96=87=E1=97=B4=E1=94=95=E1=95=BC=20=E1=97=9D?=
 =?UTF-8?q?=E1=91=8E=C6=B3=E1=97=B4=E1=97=B4?= <presh_onyee@outlook.com>
Date: Mon, 6 Sep 2021 13:50:32 +0100
Subject: [PATCH] refactor(spacer): rewrite spacer component to support system
 props

---
 package.json                             |  2 +-
 src/components/spacer/spacer.stories.tsx | 47 +++++-------------------
 src/components/spacer/spacer.tsx         | 11 ++----
 src/system/spacing/spacing.ts            | 32 ----------------
 website/pages/docs/changelog.mdx         | 17 +++++++++
 5 files changed, 32 insertions(+), 77 deletions(-)

diff --git a/package.json b/package.json
index cd2b305..f01c4d5 100644
--- a/package.json
+++ b/package.json
@@ -1,6 +1,6 @@
 {
   "name": "camara",
-  "version": "1.0.0-beta.94",
+  "version": "1.0.0-beta.95",
   "description": "A design system that helps you build your ideas quickly",
   "author": {
     "name": "Presh Onyee",
diff --git a/src/components/spacer/spacer.stories.tsx b/src/components/spacer/spacer.stories.tsx
index e71e2ba..95d71f6 100644
--- a/src/components/spacer/spacer.stories.tsx
+++ b/src/components/spacer/spacer.stories.tsx
@@ -1,44 +1,17 @@
 import React from 'react';
-import { Meta } from '@storybook/react';
-import { Spacer, SpacerProps } from '.';
-import { Button } from '../button';
-import { Box } from '../box';
+import { ComponentStory, ComponentMeta } from '@storybook/react';
+
+import { Spacer } from './spacer';
+import { SpacingProps } from '../../system';
 
 export default {
   title: 'Components/Spacer',
   component: Spacer,
-} as Meta;
-
-// // spacing top
-// export const Top = (args: SpacerProps) => (
-//   <Box>
-//     <Button block>No Spacing</Button>
-//     <Spacer {...args}>
-//       <Button block>Spacing Top</Button>
-//     </Spacer>
-//   </Box>
-// );
-// Top.args = { top: true };
+} as ComponentMeta<typeof Spacer>;
 
-// // spacing bottom
-// export const Bottom = (args: SpacerProps) => (
-//   <Box>
-//     <Spacer {...args}>
-//       <Button block>Spacing Bottom</Button>
-//     </Spacer>
-//     <Button block>No Spacing</Button>
-//   </Box>
-// );
-// Bottom.args = { bottom: true };
+const Template: ComponentStory<typeof Spacer> = (args: SpacingProps) => (
+  <Spacer {...args} />
+);
 
-// // spacing both
-// export const Both = (args: SpacerProps) => (
-//   <Box>
-//     <Button block>No Spacing</Button>
-//     <Spacer {...args}>
-//       <Button block>Spacing Both</Button>
-//     </Spacer>
-//     <Button block>No Spacing</Button>
-//   </Box>
-// );
-// Both.args = { both: true };
+export const Primary = Template.bind({});
+Primary.args = {};
diff --git a/src/components/spacer/spacer.tsx b/src/components/spacer/spacer.tsx
index 6e0ee1f..6f753fc 100644
--- a/src/components/spacer/spacer.tsx
+++ b/src/components/spacer/spacer.tsx
@@ -1,12 +1,9 @@
-import * as React from 'react';
+import React from 'react';
+import { SpacingProps } from 'system';
 import { styled } from '../../stitches.config';
 
-export interface SpacerProps {}
-
 const StyledSpacer = styled('div', {});
 
-export const Spacer: React.FC<SpacerProps> = ({ children }) => {
-  return <StyledSpacer>{children}</StyledSpacer>;
+export const Spacer = ({ ...rest }: SpacingProps) => {
+  return <StyledSpacer css={{ ...rest }}></StyledSpacer>;
 };
-
-Spacer.displayName = 'Spacer';
diff --git a/src/system/spacing/spacing.ts b/src/system/spacing/spacing.ts
index 9540d32..870e994 100644
--- a/src/system/spacing/spacing.ts
+++ b/src/system/spacing/spacing.ts
@@ -28,35 +28,3 @@ export interface SpacingProps {
   /* All round padding of the element */
   p?: string | number;
 }
-
-// let mx: SpacingProps['mx'];
-// let my: SpacingProps['my'];
-// let ml: SpacingProps['ml'];
-// let mr: SpacingProps['mr'];
-// let mt: SpacingProps['mt'];
-// let mb: SpacingProps['mb'];
-// let m: SpacingProps['m'];
-// let px: SpacingProps['px'];
-// let py: SpacingProps['py'];
-// let pl: SpacingProps['pl'];
-// let pr: SpacingProps['pr'];
-// let pt: SpacingProps['pt'];
-// let pb: SpacingProps['pb'];
-// let p: SpacingProps['p'];
-
-// export const Spacing = {
-//   mx,
-//   my,
-//   ml,
-//   mr,
-//   mt,
-//   mb,
-//   m,
-//   px,
-//   py,
-//   pl,
-//   pr,
-//   pt,
-//   pb,
-//   p,
-// };
diff --git a/website/pages/docs/changelog.mdx b/website/pages/docs/changelog.mdx
index 3fec18a..1304804 100644
--- a/website/pages/docs/changelog.mdx
+++ b/website/pages/docs/changelog.mdx
@@ -12,30 +12,47 @@ order: 7
 ## September 2021
 
 - `Box Component`:
+
   - Remove `css` props for additional css properties
   - Clean up other properties
   - Fix spacing system props
 
+- `Spacer Component`:
+  - Add support for system props
+
 ## August 2021
 
 - `Flex Component`:
+
   - Added `alignContent, alignItems, alignSelf, wrap, direction,` props to the flex component
+
 - `Heading Component`
+
   - Added `color` props to heading component
   - Added `noWhiteSpace` prop to heading component
+
 - `Text Component`
+
   - Added `color` props to text component
   - Added `fontSize` props to text component
+
 - Create new component `Three-Pane-Window`
+
 - `BrowserWindow`
+
   - Update layout in storybook full screen mode
   - Fix layout inconsistency
+
 - `Avatar Component`:
+
   - `Username` prop no longer uses substring to split the initials. Provide the already split initials yourself.
+
 - `Box`
+
   - Add `width` props to box component
   - Add proper support for `css` props to add additional properties
   - Add spacing system props
+
 - Create new component `List`
 
 ## July 2021