From f07dfc62a3d42254233b8dd13700936358bc0105 Mon Sep 17 00:00:00 2001
From: Roberto Hernandez <roberthb94@gmail.com>
Date: Thu, 2 Jan 2025 09:39:07 -0600
Subject: [PATCH] chore(4kdst-17): Spacing token component created

---
 src/foundation/utility/cl-base.module.scss    |  4 +-
 src/tokens/spacing/spacing-tokens.stories.tsx | 22 +++++++
 src/tokens/spacing/spacing-tokens.tsx         | 57 +++++++++++++++++++
 3 files changed, 82 insertions(+), 1 deletion(-)
 create mode 100644 src/tokens/spacing/spacing-tokens.stories.tsx
 create mode 100644 src/tokens/spacing/spacing-tokens.tsx

diff --git a/src/foundation/utility/cl-base.module.scss b/src/foundation/utility/cl-base.module.scss
index 48d1bac..79bd156 100644
--- a/src/foundation/utility/cl-base.module.scss
+++ b/src/foundation/utility/cl-base.module.scss
@@ -93,7 +93,9 @@
 .sb-spacing-wrapper {
   display: flex;
   flex-flow: row nowrap;
-  background-color: #d606c1;
+  padding: var(--spacing-md);
+  border-radius: var(--radius-sm);
+  background-color: var(--color-grays-100);
 }
 
 .sb-cover {
diff --git a/src/tokens/spacing/spacing-tokens.stories.tsx b/src/tokens/spacing/spacing-tokens.stories.tsx
new file mode 100644
index 0000000..979315b
--- /dev/null
+++ b/src/tokens/spacing/spacing-tokens.stories.tsx
@@ -0,0 +1,22 @@
+import type { Meta, StoryObj } from '@storybook/react';
+import tokens from '../transformed.tokens.json';
+import SpacingTokens from './spacing-tokens';
+
+const meta = {
+  title: 'Tokens/Spacing',
+  component: SpacingTokens,
+} satisfies Meta<typeof SpacingTokens>;
+
+export default meta;
+type Story = StoryObj<typeof meta>;
+
+export const Spacing: Story = {
+  args: {
+    spacing: Object.keys(tokens['spacing']).map((name) => {
+      return {
+        name,
+        value: tokens['spacing'][name as keyof typeof tokens['spacing']].value,
+      };
+    }),
+  },
+};
diff --git a/src/tokens/spacing/spacing-tokens.tsx b/src/tokens/spacing/spacing-tokens.tsx
new file mode 100644
index 0000000..65f8a9d
--- /dev/null
+++ b/src/tokens/spacing/spacing-tokens.tsx
@@ -0,0 +1,57 @@
+import React from 'react';
+// Utility classes for token display components.
+import clBase from '../../foundation/utility/cl-base.module.scss';
+
+type SpacingTokensProps = {
+  spacing: {
+    name: string;
+    value: number;
+  }[];
+};
+
+export default function SpacingTokens({
+  spacing,
+}: SpacingTokensProps) {
+  return (
+    <div>
+      <h1 className={clBase['sb-title']}>Spacing Tokens</h1>
+      <ul className={clBase['sb-list']}>
+        {spacing.map((item) => (
+          <li className={clBase['sb-list__item']} key={item.name}>
+            <span
+              className={clBase['sb-list__label']}
+              style={{ width: '100px' }}>
+              {item.name}
+            </span>
+            <span className={clBase['sb-list__value']}>{item.value}px</span>
+            <span className={clBase['sb-list__custom-property']}>
+              <code
+                className={clBase['sb-custom-property-name']}
+                style={{ width: '272px' }}>
+                var(--spacing-{item.name})
+              </code>
+            </span>
+            <ul
+              className={clBase['sb-spacing-wrapper']}
+              style={{ 
+                gap: `${item.value}px`,
+              }}
+            >
+              {Array(4).fill(1).map((_, index) => (
+                <li
+                  key={index}
+                  className={clBase['sb-list__visualization']}
+                  style={{
+                    width: '50px',
+                    height: '50px',
+                    backgroundColor: 'var(--colors-sb-visualization)',
+                  }}
+                ></li>
+              ))}
+            </ul>
+          </li>
+        ))}
+      </ul>
+    </div>
+  );
+}