refactor(spacer): rewrite spacer component to support system props

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",

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 = {};

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';

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,
-// };

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