From 79c28a562226b097d11a5085695a86fe0b7cbcfa Mon Sep 17 00:00:00 2001
From: Ian Lovell <102812633+ianlnf@users.noreply.github.com>
Date: Tue, 4 Jun 2024 15:53:31 +0100
Subject: [PATCH] feat: add font docs (#39)

---
 .../1-design-tokens/1-overview.mdx            |  2 +-
 .../{2-colors.mdx => 2-color.mdx}             |  2 +-
 .../2-foundations/1-design-tokens/3-font.mdx  | 26 ++++++++++++++
 .../{3-typography.mdx => 4-typography.mdx}    |  8 -----
 .../{4-screen.mdx => 5-screen.mdx}            |  0
 .../{5-space.mdx => 6-space.mdx}              |  0
 .../{6-border.mdx => 7-border.mdx}            |  0
 .../{7-shadow.mdx => 8-shadow.mdx}            |  0
 .../{8-z-index.mdx => 9-z-index.mdx}          |  0
 apps/docs/src/app/[...slug]/page.tsx          | 14 +++++---
 apps/docs/src/components/document/draft.tsx   | 14 ++++++++
 apps/docs/src/components/document/mdx.tsx     | 14 +++++---
 .../document/typography/font-family-table.tsx | 15 ++++++++
 .../document/typography/font-size-table.tsx   | 15 ++++++++
 .../document/typography/font-sizes-table.tsx  | 26 --------------
 .../document/typography/font-table.tsx        | 35 +++++++++++++++++++
 .../document/typography/font-weight-table.tsx | 15 ++++++++
 .../typography/font-weights-table.tsx         | 28 ---------------
 .../typography/letter-spacing-table.tsx       | 15 ++++++++
 .../document/typography/line-height-table.tsx | 15 ++++++++
 20 files changed, 171 insertions(+), 73 deletions(-)
 rename apps/docs/content/2-foundations/1-design-tokens/{2-colors.mdx => 2-color.mdx} (86%)
 create mode 100644 apps/docs/content/2-foundations/1-design-tokens/3-font.mdx
 rename apps/docs/content/2-foundations/1-design-tokens/{3-typography.mdx => 4-typography.mdx} (63%)
 rename apps/docs/content/2-foundations/1-design-tokens/{4-screen.mdx => 5-screen.mdx} (100%)
 rename apps/docs/content/2-foundations/1-design-tokens/{5-space.mdx => 6-space.mdx} (100%)
 rename apps/docs/content/2-foundations/1-design-tokens/{6-border.mdx => 7-border.mdx} (100%)
 rename apps/docs/content/2-foundations/1-design-tokens/{7-shadow.mdx => 8-shadow.mdx} (100%)
 rename apps/docs/content/2-foundations/1-design-tokens/{8-z-index.mdx => 9-z-index.mdx} (100%)
 create mode 100644 apps/docs/src/components/document/draft.tsx
 create mode 100644 apps/docs/src/components/document/typography/font-family-table.tsx
 create mode 100644 apps/docs/src/components/document/typography/font-size-table.tsx
 delete mode 100644 apps/docs/src/components/document/typography/font-sizes-table.tsx
 create mode 100644 apps/docs/src/components/document/typography/font-table.tsx
 create mode 100644 apps/docs/src/components/document/typography/font-weight-table.tsx
 delete mode 100644 apps/docs/src/components/document/typography/font-weights-table.tsx
 create mode 100644 apps/docs/src/components/document/typography/letter-spacing-table.tsx
 create mode 100644 apps/docs/src/components/document/typography/line-height-table.tsx

diff --git a/apps/docs/content/2-foundations/1-design-tokens/1-overview.mdx b/apps/docs/content/2-foundations/1-design-tokens/1-overview.mdx
index ddd394039..2aa5ca6ff 100644
--- a/apps/docs/content/2-foundations/1-design-tokens/1-overview.mdx
+++ b/apps/docs/content/2-foundations/1-design-tokens/1-overview.mdx
@@ -1,7 +1,7 @@
 ---
 title: Overview
 description: Design tokens overview
-draft: false
+draft: true
 ---
 
 Overview
diff --git a/apps/docs/content/2-foundations/1-design-tokens/2-colors.mdx b/apps/docs/content/2-foundations/1-design-tokens/2-color.mdx
similarity index 86%
rename from apps/docs/content/2-foundations/1-design-tokens/2-colors.mdx
rename to apps/docs/content/2-foundations/1-design-tokens/2-color.mdx
index ed1c5e411..f8916e3ed 100644
--- a/apps/docs/content/2-foundations/1-design-tokens/2-colors.mdx
+++ b/apps/docs/content/2-foundations/1-design-tokens/2-color.mdx
@@ -1,5 +1,5 @@
 ---
-title: Colours
+title: Colour
 description: Colour information
 draft: true
 status: in-development
diff --git a/apps/docs/content/2-foundations/1-design-tokens/3-font.mdx b/apps/docs/content/2-foundations/1-design-tokens/3-font.mdx
new file mode 100644
index 000000000..303c653f7
--- /dev/null
+++ b/apps/docs/content/2-foundations/1-design-tokens/3-font.mdx
@@ -0,0 +1,26 @@
+---
+title: Font
+description: Font information
+draft: true
+status: in-development
+---
+
+## Font family
+
+<FontFamilyTable />
+
+## Font sizes
+
+<FontSizeTable />
+
+## Font weights
+
+<FontWeightTable />
+
+## Line heights
+
+<LineHeightTable />
+
+## Letter spacing
+
+<LetterSpacingTable />
diff --git a/apps/docs/content/2-foundations/1-design-tokens/3-typography.mdx b/apps/docs/content/2-foundations/1-design-tokens/4-typography.mdx
similarity index 63%
rename from apps/docs/content/2-foundations/1-design-tokens/3-typography.mdx
rename to apps/docs/content/2-foundations/1-design-tokens/4-typography.mdx
index 1c9ec4073..c345b11af 100644
--- a/apps/docs/content/2-foundations/1-design-tokens/3-typography.mdx
+++ b/apps/docs/content/2-foundations/1-design-tokens/4-typography.mdx
@@ -5,14 +5,6 @@ draft: true
 status: in-development
 ---
 
-## Font Sizes
-
-<FontSizesTable />
-
-## Font Weights
-
-<FontWeightsTable />
-
 ## Typography
 
 <Typography />
diff --git a/apps/docs/content/2-foundations/1-design-tokens/4-screen.mdx b/apps/docs/content/2-foundations/1-design-tokens/5-screen.mdx
similarity index 100%
rename from apps/docs/content/2-foundations/1-design-tokens/4-screen.mdx
rename to apps/docs/content/2-foundations/1-design-tokens/5-screen.mdx
diff --git a/apps/docs/content/2-foundations/1-design-tokens/5-space.mdx b/apps/docs/content/2-foundations/1-design-tokens/6-space.mdx
similarity index 100%
rename from apps/docs/content/2-foundations/1-design-tokens/5-space.mdx
rename to apps/docs/content/2-foundations/1-design-tokens/6-space.mdx
diff --git a/apps/docs/content/2-foundations/1-design-tokens/6-border.mdx b/apps/docs/content/2-foundations/1-design-tokens/7-border.mdx
similarity index 100%
rename from apps/docs/content/2-foundations/1-design-tokens/6-border.mdx
rename to apps/docs/content/2-foundations/1-design-tokens/7-border.mdx
diff --git a/apps/docs/content/2-foundations/1-design-tokens/7-shadow.mdx b/apps/docs/content/2-foundations/1-design-tokens/8-shadow.mdx
similarity index 100%
rename from apps/docs/content/2-foundations/1-design-tokens/7-shadow.mdx
rename to apps/docs/content/2-foundations/1-design-tokens/8-shadow.mdx
diff --git a/apps/docs/content/2-foundations/1-design-tokens/8-z-index.mdx b/apps/docs/content/2-foundations/1-design-tokens/9-z-index.mdx
similarity index 100%
rename from apps/docs/content/2-foundations/1-design-tokens/8-z-index.mdx
rename to apps/docs/content/2-foundations/1-design-tokens/9-z-index.mdx
diff --git a/apps/docs/src/app/[...slug]/page.tsx b/apps/docs/src/app/[...slug]/page.tsx
index e39b2cb3a..d977fc1aa 100644
--- a/apps/docs/src/app/[...slug]/page.tsx
+++ b/apps/docs/src/app/[...slug]/page.tsx
@@ -2,6 +2,7 @@ import { notFound } from 'next/navigation';
 import { Mdx } from '@/components/document/mdx';
 import * as documents from '@/lib/documents/documents';
 import { DocumentStatus } from '@/components/document/document-status';
+import { Draft } from '@/components/document/draft';
 
 type DocPageProps = {
   params: {
@@ -18,11 +19,14 @@ export default function DocPage({ params }: DocPageProps) {
 
   return (
     <section className="flex flex-col gap-2xl grow">
-      {document.status !== 'stable' ? (
-        <div>
-          <DocumentStatus status={document.status} />
-        </div>
-      ) : null}
+      <div className="flex justify-between items-center">
+        {document.status !== 'stable' ? (
+          <div>
+            <DocumentStatus status={document.status} />
+          </div>
+        ) : null}
+        {document.draft ? <Draft /> : null}
+      </div>
       {document.status !== 'coming-soon' ? (
         <div>
           <Mdx code={document.body.code} />
diff --git a/apps/docs/src/components/document/draft.tsx b/apps/docs/src/components/document/draft.tsx
new file mode 100644
index 000000000..6e0716b97
--- /dev/null
+++ b/apps/docs/src/components/document/draft.tsx
@@ -0,0 +1,14 @@
+import { cn } from '@/lib/cn';
+
+export function Draft() {
+  return (
+    <span
+      className={cn(
+        `px-lg py-xs text-sm font-semibold rounded`,
+        'text-gray-700 bg-gray-100',
+      )}
+    >
+      Draft
+    </span>
+  );
+}
diff --git a/apps/docs/src/components/document/mdx.tsx b/apps/docs/src/components/document/mdx.tsx
index 1c2fc98ff..c8ac28511 100644
--- a/apps/docs/src/components/document/mdx.tsx
+++ b/apps/docs/src/components/document/mdx.tsx
@@ -1,8 +1,11 @@
 import { useMDXComponent } from 'next-contentlayer/hooks';
 import { Heading } from '../typography/heading';
 import { ColorPrimitives } from '@/components/document/color/color-primitives';
-import { FontSizesTable } from './typography/font-sizes-table';
-import { FontWeightsTable } from './typography/font-weights-table';
+import { FontFamilyTable } from './typography/font-family-table';
+import { FontSizeTable } from './typography/font-size-table';
+import { FontWeightTable } from './typography/font-weight-table';
+import { LineHeightTable } from './typography/line-height-table';
+import { LetterSpacingTable } from './typography/letter-spacing-table';
 import { Typography } from './typography/typography';
 
 export type MdxProps = {
@@ -17,8 +20,11 @@ export function Mdx({ code }: MdxProps) {
       components={{
         h2: ({ children }) => <Heading as="h2">{children}</Heading>,
         ColorPrimitives: () => <ColorPrimitives />,
-        FontSizesTable: () => <FontSizesTable />,
-        FontWeightsTable: () => <FontWeightsTable />,
+        FontFamilyTable: () => <FontFamilyTable />,
+        FontSizeTable: () => <FontSizeTable />,
+        FontWeightTable: () => <FontWeightTable />,
+        LineHeightTable: () => <LineHeightTable />,
+        LetterSpacingTable: () => <LetterSpacingTable />,
         Typography: () => <Typography />,
       }}
     />
diff --git a/apps/docs/src/components/document/typography/font-family-table.tsx b/apps/docs/src/components/document/typography/font-family-table.tsx
new file mode 100644
index 000000000..dd7d4d123
--- /dev/null
+++ b/apps/docs/src/components/document/typography/font-family-table.tsx
@@ -0,0 +1,15 @@
+import { meta } from '@govie-ds/theme-govie';
+import { FontTable } from './font-table';
+
+export function FontFamilyTable() {
+  return (
+    <FontTable<string[]>
+      name="font-family"
+      tokens={meta.light.resolved.primitive.font.family}
+      renderValue={(value) => value.join(', ')}
+      renderExample={(value) => (
+        <span style={{ fontFamily: value.join(', ') }}>Sample text</span>
+      )}
+    />
+  );
+}
diff --git a/apps/docs/src/components/document/typography/font-size-table.tsx b/apps/docs/src/components/document/typography/font-size-table.tsx
new file mode 100644
index 000000000..b87780774
--- /dev/null
+++ b/apps/docs/src/components/document/typography/font-size-table.tsx
@@ -0,0 +1,15 @@
+import { meta } from '@govie-ds/theme-govie';
+import { FontTable } from './font-table';
+
+export function FontSizeTable() {
+  return (
+    <FontTable<string>
+      name="font-size"
+      tokens={meta.light.resolved.primitive.font.size}
+      renderValue={(value) => value}
+      renderExample={(value) => (
+        <span style={{ fontSize: value }}>Sample text</span>
+      )}
+    />
+  );
+}
diff --git a/apps/docs/src/components/document/typography/font-sizes-table.tsx b/apps/docs/src/components/document/typography/font-sizes-table.tsx
deleted file mode 100644
index bef82c622..000000000
--- a/apps/docs/src/components/document/typography/font-sizes-table.tsx
+++ /dev/null
@@ -1,26 +0,0 @@
-import { meta } from '@govie-ds/theme-govie';
-import { objectKeys } from 'ts-extras';
-import { TokenName } from '../color/token-name';
-import { Table, Td } from './table';
-
-export function FontSizesTable() {
-  return (
-    <Table
-      headers={['Token', 'Value', 'Example']}
-      ids={objectKeys(meta.light.resolved.primitive.font.size)}
-      renderRow={(id) => {
-        const { $value: value } = meta.light.resolved.primitive.font.size[id];
-
-        return (
-          <tr key={id}>
-            <Td className="whitespace-nowrap w-[1px] text-sm">
-              <TokenName name={`font-size/${id}`} />
-            </Td>
-            <Td className="text-sm">{value}</Td>
-            <Td style={{ fontSize: value }}>Sample text</Td>
-          </tr>
-        );
-      }}
-    />
-  );
-}
diff --git a/apps/docs/src/components/document/typography/font-table.tsx b/apps/docs/src/components/document/typography/font-table.tsx
new file mode 100644
index 000000000..5680909d4
--- /dev/null
+++ b/apps/docs/src/components/document/typography/font-table.tsx
@@ -0,0 +1,35 @@
+import { Table, Td } from './table';
+import { TokenName } from '../color/token-name';
+import { objectKeys } from 'ts-extras';
+
+export function FontTable<TValue>({
+  name,
+  tokens,
+  renderValue,
+  renderExample,
+}: {
+  name: string;
+  tokens: Record<string, { $value: TValue }>;
+  renderValue: (value: TValue) => React.ReactNode;
+  renderExample: (value: TValue) => React.ReactNode;
+}) {
+  return (
+    <Table
+      headers={['Token', 'Value', 'Example']}
+      ids={objectKeys(tokens)}
+      renderRow={(id) => {
+        const { $value: value } = tokens[id];
+
+        return (
+          <tr key={id}>
+            <Td className="whitespace-nowrap w-[1px] text-sm">
+              <TokenName name={`${name}/${id}`} />
+            </Td>
+            <Td className="text-sm">{renderValue(value)}</Td>
+            <Td>{renderExample(value)}</Td>
+          </tr>
+        );
+      }}
+    />
+  );
+}
diff --git a/apps/docs/src/components/document/typography/font-weight-table.tsx b/apps/docs/src/components/document/typography/font-weight-table.tsx
new file mode 100644
index 000000000..beb02a58b
--- /dev/null
+++ b/apps/docs/src/components/document/typography/font-weight-table.tsx
@@ -0,0 +1,15 @@
+import { meta } from '@govie-ds/theme-govie';
+import { FontTable } from './font-table';
+
+export function FontWeightTable() {
+  return (
+    <FontTable<string>
+      name="font-weight"
+      tokens={meta.light.resolved.primitive.font.size}
+      renderValue={(value) => value}
+      renderExample={(value) => (
+        <span style={{ fontWeight: value }}>Sample text</span>
+      )}
+    />
+  );
+}
diff --git a/apps/docs/src/components/document/typography/font-weights-table.tsx b/apps/docs/src/components/document/typography/font-weights-table.tsx
deleted file mode 100644
index 2c07d6478..000000000
--- a/apps/docs/src/components/document/typography/font-weights-table.tsx
+++ /dev/null
@@ -1,28 +0,0 @@
-import { meta } from '@govie-ds/theme-govie';
-import { objectKeys } from 'ts-extras';
-import { TokenName } from '../color/token-name';
-import { Table, Td } from './table';
-
-export function FontWeightsTable() {
-  return (
-    <Table
-      headers={['Token', 'Value', 'Example']}
-      ids={objectKeys(meta.light.resolved.primitive.font.weight)}
-      renderRow={(id) => {
-        const { $value: value } = meta.light.resolved.primitive.font.weight[id];
-
-        return (
-          <tr key={id}>
-            <Td className="whitespace-nowrap w-[1px] text-sm">
-              <TokenName name={`font-weight/${id}`} />
-            </Td>
-            <Td className="text-sm">{value}</Td>
-            <Td className="text-lg" style={{ fontWeight: value }}>
-              Sample text
-            </Td>
-          </tr>
-        );
-      }}
-    />
-  );
-}
diff --git a/apps/docs/src/components/document/typography/letter-spacing-table.tsx b/apps/docs/src/components/document/typography/letter-spacing-table.tsx
new file mode 100644
index 000000000..44d520294
--- /dev/null
+++ b/apps/docs/src/components/document/typography/letter-spacing-table.tsx
@@ -0,0 +1,15 @@
+import { meta } from '@govie-ds/theme-govie';
+import { FontTable } from './font-table';
+
+export function LetterSpacingTable() {
+  return (
+    <FontTable<string>
+      name="letter-spacing"
+      tokens={meta.light.resolved.primitive.font.letterSpacing}
+      renderValue={(value) => value}
+      renderExample={(value) => (
+        <span style={{ letterSpacing: value }}>Sample text</span>
+      )}
+    />
+  );
+}
diff --git a/apps/docs/src/components/document/typography/line-height-table.tsx b/apps/docs/src/components/document/typography/line-height-table.tsx
new file mode 100644
index 000000000..37be0cb98
--- /dev/null
+++ b/apps/docs/src/components/document/typography/line-height-table.tsx
@@ -0,0 +1,15 @@
+import { meta } from '@govie-ds/theme-govie';
+import { FontTable } from './font-table';
+
+export function LineHeightTable() {
+  return (
+    <FontTable<number>
+      name="line-height"
+      tokens={meta.light.resolved.primitive.font.lineHeight}
+      renderValue={(value) => value}
+      renderExample={(value) => (
+        <span style={{ lineHeight: value }}>Sample text</span>
+      )}
+    />
+  );
+}