From dea8297c035e75fcfde17d5040dadea29247f2a3 Mon Sep 17 00:00:00 2001
From: Joe Tower <joetower@gmail.com>
Date: Fri, 20 Dec 2024 11:10:04 -0600
Subject: [PATCH] feat(4KDST-12): breakpoints tokens story matches UI-Kit

---
 .../breakpoints-tokens.stories.tsx            | 22 +++++++++++
 src/tokens/breakpoints/breakpoints-tokens.tsx | 38 +++++++++++++++++++
 2 files changed, 60 insertions(+)
 create mode 100644 src/tokens/breakpoints/breakpoints-tokens.stories.tsx
 create mode 100644 src/tokens/breakpoints/breakpoints-tokens.tsx

diff --git a/src/tokens/breakpoints/breakpoints-tokens.stories.tsx b/src/tokens/breakpoints/breakpoints-tokens.stories.tsx
new file mode 100644
index 0000000..389de1c
--- /dev/null
+++ b/src/tokens/breakpoints/breakpoints-tokens.stories.tsx
@@ -0,0 +1,22 @@
+import type { Meta, StoryObj } from '@storybook/react';
+import tokens from '../transformed.tokens.json';
+import BreakpointTokens from './breakpoints-tokens';
+
+const meta = {
+  title: 'Tokens/Breakpoint',
+  component: BreakpointTokens,
+} satisfies Meta<typeof BreakpointTokens>;
+
+export default meta;
+type Story = StoryObj<typeof meta>;
+
+export const Breakpoint: Story = {
+  args: {
+    breakpoint: Object.keys(tokens.breakpoint).map((name) => {
+      return {
+        name,
+        value: tokens.breakpoint[name as keyof typeof tokens.breakpoint].value,
+      };
+    }),
+  },
+};
diff --git a/src/tokens/breakpoints/breakpoints-tokens.tsx b/src/tokens/breakpoints/breakpoints-tokens.tsx
new file mode 100644
index 0000000..2a83bb9
--- /dev/null
+++ b/src/tokens/breakpoints/breakpoints-tokens.tsx
@@ -0,0 +1,38 @@
+import React from 'react';
+// Utility classes for token display components.
+import clBase from '../../foundation/utility/cl-base.module.scss';
+
+type BreakpointTokensProps = {
+  breakpoint: {
+    name: string;
+    value: number;
+  }[];
+};
+
+export default function BreakpointTokens({
+  breakpoint,
+}: BreakpointTokensProps) {
+  return (
+    <div>
+      <h1 className={clBase['sb-title']}>Breakpoint Tokens</h1>
+      <ul className={clBase['sb-list']} style={{overflow: 'scroll'}}>
+        {breakpoint.map((item) => (
+          <li className={clBase['sb-list__item']} style={{minWidth: 'max-content'}} key={item.name}>
+            <span className={clBase['sb-list__label']}>{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']}>var(--breakpoint-{item.name})</code>
+            </span>
+            <span className={clBase['sb-list__visualization']}
+              style={{
+                width: `${item.value}px`,
+                height: '25px',
+                background: 'var(--colors-sb-visualization)',
+                display: 'block', 
+              }}></span>
+          </li>
+        ))}
+      </ul>
+    </div>
+  );
+}