From 7a430d6cdb5f4baf87992c19a8d66c889ca041be Mon Sep 17 00:00:00 2001
From: Nathan Young <1447339+nathanyoung@users.noreply.github.com>
Date: Tue, 15 Sep 2020 15:50:22 -0700
Subject: [PATCH] docs: width and height tokens (#231)

* feat: width and height tokens

* move to top level

* don't show pixel value for percentages

* update docs
---
 src/docs/Height.stories.mdx | 37 +++++++++++++++++++++++++++++++++++++
 src/docs/Width.stories.mdx  | 37 +++++++++++++++++++++++++++++++++++++
 src/lib/tokens.ts           |  6 ++++++
 3 files changed, 80 insertions(+)
 create mode 100644 src/docs/Height.stories.mdx
 create mode 100644 src/docs/Width.stories.mdx

diff --git a/src/docs/Height.stories.mdx b/src/docs/Height.stories.mdx
new file mode 100644
index 000000000..1a858c1a4
--- /dev/null
+++ b/src/docs/Height.stories.mdx
@@ -0,0 +1,37 @@
+import { Meta } from '@storybook/addon-docs/blocks';
+import sizes from '@palmetto/palmetto-design-tokens/build/js/variables-size';
+import { PALMETTO_HEIGHT_OPTIONS, PALMETTO_HEIGHT_VALUES } from '../lib/tokens';
+
+<Meta
+  title="Design Tokens/Height"
+/>
+
+# Height
+
+Standard heights have been defined based on percentages or `rem`.
+
+Rem based values will scale when adjusting the root font size. Pixel values are calculated with a root font size of `16px`.
+
+<table>
+  <thead>
+    <tr>
+      <th>token name</th>
+      <th>prop value</th>
+      <th>value</th>
+      <th>px</th>
+      <th>notes</th>
+    </tr>
+  </thead>
+  <tbody>
+    {PALMETTO_HEIGHT_OPTIONS.map((height, i) => (
+      <tr key={i}>
+        <td><code>{`size-height-${height}`}</code></td>
+        <td><code>{height}</code></td>
+        <td>{PALMETTO_HEIGHT_VALUES[i].value}</td>
+        <td>{height === 'base' ? '16' : PALMETTO_HEIGHT_VALUES[i].value.includes('%') ? '' : PALMETTO_HEIGHT_VALUES[i].original.value * 16}</td>
+        <td>{PALMETTO_HEIGHT_VALUES[i].original.comment}</td>
+      </tr>
+    ))}
+  </tbody>
+</table>
+
diff --git a/src/docs/Width.stories.mdx b/src/docs/Width.stories.mdx
new file mode 100644
index 000000000..afcd3b671
--- /dev/null
+++ b/src/docs/Width.stories.mdx
@@ -0,0 +1,37 @@
+import { Meta } from '@storybook/addon-docs/blocks';
+import sizes from '@palmetto/palmetto-design-tokens/build/js/variables-size';
+import { PALMETTO_WIDTH_OPTIONS, PALMETTO_WIDTH_VALUES } from '../lib/tokens';
+
+<Meta
+  title="Design Tokens/Width"
+/>
+
+# Width
+
+Standard widths have been defined based on percentages or `rem`.
+
+Rem based values will scale when adjusting the root font size. Pixel values are calculated with a root font size of `16px`.
+
+<table>
+  <thead>
+    <tr>
+      <th>token name</th>
+      <th>prop value</th>
+      <th>value</th>
+      <th>px</th>
+      <th>notes</th>
+    </tr>
+  </thead>
+  <tbody>
+    {PALMETTO_WIDTH_OPTIONS.map((width, i) => (
+      <tr key={i}>
+        <td><code>{`size-width-${width}`}</code></td>
+        <td><code>{width}</code></td>
+        <td>{PALMETTO_WIDTH_VALUES[i].value}</td>
+        <td>{width === 'base' ? '16' : PALMETTO_WIDTH_VALUES[i].value.includes('%') ? '' : PALMETTO_WIDTH_VALUES[i].original.value * 16}</td>
+        <td>{PALMETTO_WIDTH_VALUES[i].original.comment}</td>
+      </tr>
+    ))}
+  </tbody>
+</table>
+
diff --git a/src/lib/tokens.ts b/src/lib/tokens.ts
index 726edf95a..ed3005648 100644
--- a/src/lib/tokens.ts
+++ b/src/lib/tokens.ts
@@ -76,3 +76,9 @@ export const PALMETTO_BRAND_COLOR_VALUES = colors.color.brand;
 
 export const PALMETTO_SPACING_OPTIONS = Object.keys(sizes.size.spacing);
 export const PALMETTO_SPACING_VALUES = Object.values(sizes.size.spacing);
+
+export const PALMETTO_WIDTH_OPTIONS = Object.keys(sizes.size.width);
+export const PALMETTO_WIDTH_VALUES = Object.values(sizes.size.width);
+
+export const PALMETTO_HEIGHT_OPTIONS = Object.keys(sizes.size.height);
+export const PALMETTO_HEIGHT_VALUES = Object.values(sizes.size.height);