Merge pull request #465 from code0-tech/feat/#461

Spacing component

Author: nicosammito

src/components/spacing/Spacing.style.scss

@@ -0,0 +1,11 @@
+@use "../../styles/variables";
+
+.spacing {
+  position: relative;
+}
+
+@each $name, $size in variables.$sizes {
+  .spacing--#{$name} {
+    margin-bottom: $size;
+  }
+}

src/components/spacing/Spacing.tsx

@@ -0,0 +1,14 @@
+import React from "react";
+import {Code0Component, Code0Sizes, mergeCode0Props} from "../../utils";
+
+export interface SpacingProps extends Code0Component<HTMLDivElement> {
+    spacing: Code0Sizes
+}
+
+export const Spacing: React.FC<SpacingProps> = (props) => {
+
+    const {spacing, ...rest} = props
+
+    return <div {...mergeCode0Props(`spacing spacing--${spacing}`, rest)}/>
+
+}

src/index.ts

@@ -25,6 +25,7 @@ export * from "./components/quote/Quote"
 export * from "./components/row/Row"
 export * from "./components/scroll-area/ScrollArea"
 export * from "./components/segmented-control/SegmentedControl"
+export * from "./components/spacing/Spacing"
 export * from "./components/text/Text"
 export * from "./components/tooltip/Tooltip"
 

src/styles/_variables.scss

@@ -22,6 +22,7 @@ $hierarchySecondary: 0.75;
 $hierarchyTertiary: 0.5;
 
 $sizes: (
+        "xxs": $xxs,
         "xs": $xs,
         "sm": $sm,
         "md": $md,

src/utils/types.ts

@@ -4,9 +4,9 @@ export type Color = "primary" | "secondary" | "info" | "success" | "warning" | "
 
 export const Colors: Color[] = ["primary", "secondary", "info", "success", "warning", "error"]
 
-export type Code0Sizes = "xs" | "sm" | "md" | "lg" | "xl";
+export type Code0Sizes = "xxs" | "xs" | "sm" | "md" | "lg" | "xl";
 
-export type Code0FontSizes = "0.75" | "0.8" | "1" | "1.2" | "1.25"
+export type Code0FontSizes = "0.35" | "0.7" | "0.8" | "1" | "1.2" | "1.3"
 
 export type StyleProp<Value> = Value;