feat: add font docs (#39)

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

apps/docs/content/2-foundations/1-design-tokens/2-colors.mdx → 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

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 />

apps/docs/content/2-foundations/1-design-tokens/3-typography.mdx → 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 />

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} />

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>
+  );
+}

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 />,
       }}
     />

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>
+      )}
+    />
+  );
+}

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>
+      )}
+    />
+  );
+}

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>
+        );
+      }}
+    />
+  );
+}

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>
+      )}
+    />
+  );
+}

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>
+      )}
+    />
+  );
+}

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>
+      )}
+    />
+  );
+}