feat: add spacing component margin and text

packages/react/rollup.config.js

@@ -4,7 +4,9 @@ export default {
     input: [
         'src/index.ts',
         // 'src/atoms/Button/index.ts',
-        'src/atoms/Color/index.ts'
+        'src/atoms/Color/index.ts',
+        'src/atoms/Margin/index.ts',
+        'src/atoms/Text/index.ts'
     ],
     output: {
         dir: 'lib',
@@ -13,5 +15,5 @@ export default {
     },
     plugins: [Ts()],
     preserveModules: true,
-    external: ['react']
+    external: ['react', '@ds.e/foundation']
 }

packages/react/src/atoms/Margin/Margin.tsx

@@ -0,0 +1,41 @@
+import React from 'react'
+import { Spacing } from '@ds.e/foundation'
+
+export interface MarginProps {
+    space?: keyof typeof Spacing
+    left?: boolean,
+    right?: boolean,
+    top?: boolean,
+    bottom?: boolean,
+    children: React.ReactNode,
+}
+
+const Margin: React.FC<MarginProps> = ({ space = 'xxxs', children, left, right, top, bottom }) => {
+    let className = ``
+
+    if (!left && !right && !top && !bottom) {
+        className = `dse-margin-${space}`
+    }
+
+    if (left) {
+        className = `${className} dse-margin-left-${space}`
+    }
+
+    if (right) {
+        className = `${className} dse-margin-right-${space}`
+    }
+
+    if (top) {
+        className = `${className} dse-margin-top-${space}`
+    }
+
+    if (bottom) {
+        className = `${className} dse-margin-bottom-${space}`
+    }
+
+    return <div className={className}>
+        {children}
+    </div>
+}
+
+export default Margin;

packages/react/src/atoms/Margin/index.ts

@@ -0,0 +1 @@
+export { default } from "./Margin";

packages/react/src/atoms/Text/Text.tsx

@@ -0,0 +1,15 @@
+import React from 'react'
+import { FontSize } from '@ds.e/foundation'
+
+export interface TextProps {
+    size?: keyof typeof FontSize,
+    children: React.ReactNode,
+}
+
+const Text: React.FC<TextProps> = ({ size = FontSize.base, children }) => {
+    const className = `dse-text dse-text-${size}`
+
+    return <p className={className}>{children}</p>
+}
+
+export default Text;

packages/react/src/atoms/Text/index.ts

@@ -0,0 +1 @@
+export { default } from "./Text";

packages/react/src/index.ts

@@ -1,4 +1,6 @@
-// import Button from "./atoms/Button";
+import Button from "./atoms/Button";
 import Color from "./atoms/Color";
+import Text from "./atoms/Text";
+import Margin from "./atoms/Margin";
 
-export { Color };
+export { Button, Color, Text, Margin };

packages/scss/src/atoms/Margin.scss

@@ -0,0 +1,15 @@
+@import "foundation/all";
+
+$sides: left, right, top, bottom;
+
+@each $space, $value in $spacing {
+    .dse-margin-#{$space} {
+        margin: $value;
+    }
+
+    @each $side in $sides {
+        .dse-margin-#{$side}-#{$space} {
+            margin-#{$side}: $value;
+        }
+    }
+}

packages/scss/src/atoms/Text.scss

@@ -0,0 +1,11 @@
+@import "foundation/all";
+
+.dse-text {
+    margin: 0;
+}
+
+@each $size, $value in $fs {
+    .dse-text-#{$size} {
+        font-size: $value;
+    }
+}

playgrounds/react/src/index.tsx

@@ -1,18 +1,25 @@
 import React from "react";
 import ReactDOM from "react-dom/client";
 
-// import Button from '@ds.e/react';
-import Color from '@ds.e/react';
-// import '@ds.e/scss/lib/Button.css';
+import { Color, Margin, Text, Button } from '@ds.e/react';
+
+import '@ds.e/scss/lib/Button.css';
 import '@ds.e/scss/lib/Utilities.css';
+import '@ds.e/scss/lib/Text.css';
+import '@ds.e/scss/lib/Margin.css';
 
 const root = ReactDOM.createRoot(
     document.getElementById('root') as HTMLElement
 )
 
 root.render(
     <React.StrictMode>
-        <Color hexCode='#000' />
-        {/* <Button label="React Playground"/> */}
+        <div>
+            <Color hexCode='#000' width="lg" height="lg"/>
+            <Margin top bottom space='md'>
+                <Text size='xs'>This is some text.</Text>
+            </Margin>
+            <Button label="React Playground"/>
+        </div>
     </React.StrictMode>,
 )