Refactoring the brand color object

docs/BrandColors.stories.tsx

@@ -1,7 +1,8 @@
 import React from 'react';
 import type { Meta, StoryObj } from '@storybook/react';
 import tokens from '../src/figma/tokens.json';
-import { ColorSwatchGroup } from './components';
+import { brandColor } from '../src/js';
+import { ColorSwatchGroup, ColorSwatch } from './components';
 import README from './BrandColors.mdx';
 
 const meta: Meta<typeof ColorSwatchGroup> = {
@@ -22,3 +23,20 @@ export const DefaultStory: Story = {
   render: () => <ColorSwatchGroup swatchData={tokens.global.brandColors} />,
   name: 'Default',
 };
+
+export const JS: Story = {
+  render: () => (
+    <div
+      style={{
+        display: 'grid',
+        gap: '16px',
+        gridTemplateColumns: 'repeat(auto-fill, 300px)',
+      }}
+    >
+      {/* Mapping through each brand color and rendering a ColorSwatch component for it */}
+      {Object.entries(brandColor).map(([name, color]) => (
+        <ColorSwatch key={name} color={color} name={`brandColor.${name}`} />
+      ))}
+    </div>
+  ),
+};

src/index.ts

@@ -1 +1,8 @@
-export { colors, typography, lightTheme, darkTheme, Theme } from './js';
+export {
+  colors,
+  typography,
+  lightTheme,
+  darkTheme,
+  Theme,
+  brandColor,
+} from './js';