Merge pull request #515 from department-of-veterans-affairs/docs/476-…

…narin-spacing-tokens-story

Add spacing tokens mdx story

packages/components/storybook/SpacingTable.tsx

@@ -0,0 +1,42 @@
+import { spacing } from '@department-of-veterans-affairs/mobile-tokens'
+import React, { CSSProperties } from 'react'
+
+import { useTheme } from '../src/utils'
+
+export const SpacingTable: React.FC = () => {
+  const theme = useTheme()
+
+  const thStyle: CSSProperties = { textAlign: 'left' }
+
+  return (
+    <table style={{ width: '100%' }}>
+      <thead>
+        <tr>
+          <th style={{ ...thStyle, width: 125 }}>Token</th>
+          <th style={{ ...thStyle, width: 75 }}>Value</th>
+          <th style={thStyle}>Example</th>
+        </tr>
+      </thead>
+      <tbody>
+        {Object.entries(spacing).map(([token, value], index) => {
+          const exampleStyle = {
+            width: '100%',
+            backgroundColor: theme.vadsColorActionForegroundDefault,
+            height: value,
+            borderRadius: 3,
+          }
+
+          return (
+            <tr key={index}>
+              <td>{token}</td>
+              <td>{value}</td>
+              <td>
+                <div style={exampleStyle} />
+              </td>
+            </tr>
+          )
+        })}
+      </tbody>
+    </table>
+  )
+}

packages/components/storybook/spacing.stories.mdx

@@ -0,0 +1,13 @@
+import { Meta } from '@storybook/blocks'
+
+import { SpacingTable } from './SpacingTable'
+
+<Meta title="Design Tokens/Spacing" />
+
+# Spacing
+
+Spacing tokens are used to maintain a consistent rhythm when applied to margins, padding, and other dimensions.
+
+[View guidance for spacing tokens on the VA Mobile Documentation Site](https://department-of-veterans-affairs.github.io/va-mobile-app/design/Foundation/Design%20tokens/Spacing)
+
+<SpacingTable />