feat: add text tokens (#31)

apps/docs/package.json

@@ -3,8 +3,8 @@
   "version": "0.1.4",
   "private": true,
   "scripts": {
-    "format": "prettier 'src/**/*.ts' --write",
-    "format:check": "prettier 'src/**/*.ts' --check",
+    "format": "prettier 'src/**/*.{ts,tsx}' --write",
+    "format:check": "prettier 'src/**/*.{ts,tsx}' --check",
     "dev": "next dev",
     "build": "next build",
     "build:prod": "cross-env CI=true next build",

apps/docs/src/app/[...slug]/layout.tsx

@@ -1,10 +1,10 @@
-import { notFound } from "next/navigation";
-import * as documents from "@/lib/documents/documents";
-import { SideNavigationConnected } from "@/components/navigation/side-navigation-connected";
+import { notFound } from 'next/navigation';
+import * as documents from '@/lib/documents/documents';
+import { SideNavigationConnected } from '@/components/navigation/side-navigation-connected';
 
 export async function generateStaticParams() {
   return documents.getAll().map((document) => ({
-    slug: document.slug.split("/"),
+    slug: document.slug.split('/'),
   }));
 }
 

apps/docs/src/app/[...slug]/page.tsx

@@ -1,7 +1,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 { notFound } from 'next/navigation';
+import { Mdx } from '@/components/document/mdx';
+import * as documents from '@/lib/documents/documents';
+import { DocumentStatus } from '@/components/document/document-status';
 
 type DocPageProps = {
   params: {
@@ -18,12 +18,12 @@ export default function DocPage({ params }: DocPageProps) {
 
   return (
     <section className="flex flex-col gap-2xl grow">
-      {document.status !== "stable" ? (
+      {document.status !== 'stable' ? (
         <div>
           <DocumentStatus status={document.status} />
         </div>
       ) : null}
-      {document.status !== "coming-soon" ? (
+      {document.status !== 'coming-soon' ? (
         <div>
           <Mdx code={document.body.code} />
         </div>

apps/docs/src/app/layout.tsx

@@ -1,22 +1,22 @@
-import type { Metadata } from "next";
-import { Lato } from "next/font/google";
-import { ThemeProvider } from "next-themes";
-import "./globals.css";
-import "@govie-ds/theme-govie/theme.css";
-import { Container } from "@/components/chrome/container";
-import { Footer } from "@/components/chrome/footer";
-import { TopBar } from "@/components/chrome/top-bar";
+import type { Metadata } from 'next';
+import { Lato } from 'next/font/google';
+import { ThemeProvider } from 'next-themes';
+import './globals.css';
+import '@govie-ds/theme-govie/theme.css';
+import { Container } from '@/components/chrome/container';
+import { Footer } from '@/components/chrome/footer';
+import { TopBar } from '@/components/chrome/top-bar';
 
 const lato = Lato({
-  weight: ["100", "300", "400", "700", "900"],
-  style: ["normal", "italic"],
-  subsets: ["latin"],
-  display: "swap",
+  weight: ['100', '300', '400', '700', '900'],
+  style: ['normal', 'italic'],
+  subsets: ['latin'],
+  display: 'swap',
 });
 
 export const metadata: Metadata = {
-  title: "Design System",
-  description: "Design System",
+  title: 'Design System',
+  description: 'Design System',
 };
 
 export default function RootLayout({

apps/docs/src/app/not-found.tsx

@@ -1,4 +1,4 @@
-import { Heading } from "@/components/typography/heading";
+import { Heading } from '@/components/typography/heading';
 
 export default function NotFoundPage() {
   return <Heading>Not Found</Heading>;

apps/docs/src/app/page.tsx

@@ -1,14 +1,14 @@
-import { Fragment } from "react";
-import Image from "next/image";
-import { Heading } from "@/components/typography/heading";
-import { Text } from "@/components/typography/text";
-import { Button } from "@/components/form/button";
-import heroImage from "../../public/hero.png";
-import { config } from "@/lib/config";
-import { RightArrowIcon } from "@/components/icons/right-arrow-icon";
+import { Fragment } from 'react';
+import Image from 'next/image';
+import { Heading } from '@/components/typography/heading';
+import { Text } from '@/components/typography/text';
+import { Button } from '@/components/form/button';
+import heroImage from '../../public/hero.png';
+import { config } from '@/lib/config';
+import { RightArrowIcon } from '@/components/icons/right-arrow-icon';
 
 function Prose({
-  as: As = "div",
+  as: As = 'div',
   children,
   className,
 }: {
@@ -23,34 +23,34 @@ function Prose({
 
 const benefits = [
   {
-    title: "Efficiency",
+    title: 'Efficiency',
     description:
-      "Streamline your design processes with a comprehensive suite of components, patterns, and guidelines.",
+      'Streamline your design processes with a comprehensive suite of components, patterns, and guidelines.',
   },
   {
-    title: "Consistency",
+    title: 'Consistency',
     description:
-      "Ensure a cohesive user experience across your digital services with a unified design language.",
+      'Ensure a cohesive user experience across your digital services with a unified design language.',
   },
   {
-    title: "Accessibility",
+    title: 'Accessibility',
     description:
-      "Meet WCAG 2.1 AA standards with accessible components and inclusive design principles.",
+      'Meet WCAG 2.1 AA standards with accessible components and inclusive design principles.',
   },
   {
-    title: "Performance",
+    title: 'Performance',
     description:
-      "Deliver fast and responsive digital services with lightweight components and optimised assets.",
+      'Deliver fast and responsive digital services with lightweight components and optimised assets.',
   },
   {
-    title: "Responsive",
+    title: 'Responsive',
     description:
-      "Create digital services that work across all devices and screen sizes with responsive components and layouts.",
+      'Create digital services that work across all devices and screen sizes with responsive components and layouts.',
   },
   {
-    title: "Compliance",
+    title: 'Compliance',
     description:
-      "Ensure compliance with government standards and regulations with the Design System building block.",
+      'Ensure compliance with government standards and regulations with the Design System building block.',
   },
 ];
 
@@ -97,13 +97,13 @@ function Feedback() {
           Alpha
         </div>
         <p className="text-gray-700 text-xs sm:text-md">
-          This is a new service - your{" "}
+          This is a new service - your{' '}
           <a
             className="underline text-blue-700 hover:decoration-md"
             href={config.feedbackFormUrl}
           >
             feedback
-          </a>{" "}
+          </a>{' '}
           will help us to improve it.
         </p>
       </div>
@@ -137,7 +137,7 @@ export default function HomePage() {
           <Image
             src={heroImage}
             alt="Design system"
-            style={{ minWidth: "360px", width: "100%", height: "auto" }}
+            style={{ minWidth: '360px', width: '100%', height: 'auto' }}
             priority
           />
         </div>

apps/docs/src/components/chrome/container.tsx

@@ -1,13 +1,13 @@
-import { cn } from "@/lib/cn";
+import { cn } from '@/lib/cn';
 
 export function Container({
-  as: As = "div",
+  as: As = 'div',
   children,
   className,
 }: {
   as?: React.ElementType;
   children: React.ReactNode;
   className?: string;
 }) {
-  return <As className={cn("container mx-auto", className)}>{children}</As>;
+  return <As className={cn('container mx-auto', className)}>{children}</As>;
 }

apps/docs/src/components/chrome/footer.tsx

@@ -1,7 +1,7 @@
-import Image from "next/image";
-import { Container } from "./container";
-import footerImage from "../../../public/logotype.png";
-import { OglLogo } from "../logos/ogl-logo";
+import Image from 'next/image';
+import { Container } from './container';
+import footerImage from '../../../public/logotype.png';
+import { OglLogo } from '../logos/ogl-logo';
 
 export function Footer() {
   return (
@@ -11,7 +11,7 @@ export function Footer() {
           <div className="flex gap-x-2xl items-center">
             <OglLogo />
             <span>
-              All content is available under the{" "}
+              All content is available under the{' '}
               <a
                 className="underline hover:decoration-4" // TODO: add to theme
                 href="#"
@@ -26,7 +26,7 @@ export function Footer() {
             src={footerImage}
             alt="OGCIO"
             width={190}
-            style={{ height: "auto" }}
+            style={{ height: 'auto' }}
           />
         </div>
       </Container>

apps/docs/src/components/chrome/header.tsx

@@ -1,23 +1,29 @@
-import { Container } from "./container";
-import { Logo } from "../logos/logo";
-import { MenuIcon } from "../icons/menu-icon";
-import { config } from "@/lib/config";
+import { Container } from './container';
+import { Logo } from '../logos/logo';
+import { MenuIcon } from '../icons/menu-icon';
+import { config } from '@/lib/config';
 
 export type HeaderProps = {
+  showMobileMenu: boolean;
   onMobileMenuSelect?: () => void;
 };
 
-export function Header({ onMobileMenuSelect = () => {} }: HeaderProps) {
+export function Header({
+  showMobileMenu,
+  onMobileMenuSelect = () => {},
+}: HeaderProps) {
   return (
     <div className="bg-emerald-800 border-b-lg border-gold-500">
       <Container>
         <div className="flex items-center py-xl gap-lg text-white">
-          {/* <button
-            className="block sm:hidden"
-            onClick={() => onMobileMenuSelect()}
-          >
-            <MenuIcon />
-          </button> */}
+          {showMobileMenu ? (
+            <button
+              className="block sm:hidden"
+              onClick={() => onMobileMenuSelect()}
+            >
+              <MenuIcon />
+            </button>
+          ) : null}
           <a
             className="border-b-lg border-emerald-800 hover:border-white"
             href={config.buildingBlocksHomeUrl}

apps/docs/src/components/chrome/theme-changer.tsx

@@ -1,6 +1,6 @@
-"use client";
-import { useState, useEffect } from "react";
-import { useTheme } from "next-themes";
+'use client';
+import { useState, useEffect } from 'react';
+import { useTheme } from 'next-themes';
 
 export function ThemeSwitch() {
   const [mounted, setMounted] = useState(false);

apps/docs/src/components/chrome/top-bar.tsx

@@ -1,15 +1,21 @@
-"use client";
-import { useState } from "react";
-import { Header } from "./header";
-import { MainMenuConnected } from "../navigation/main-menu-connected";
-import { MobileMenuConnected } from "../navigation/mobile-menu-connected";
+'use client';
+import { useState } from 'react';
+import { Header } from './header';
+import { MainMenuConnected } from '../navigation/main-menu-connected';
+import { MobileMenuConnected } from '../navigation/mobile-menu-connected';
+import { usePathname } from 'next/navigation';
 
 export function TopBar() {
   const [isOpen, setIsOpen] = useState(false);
+  const pathname = usePathname();
 
+  // TODO: review showing main menu on the home page
   return (
     <div>
-      <Header onMobileMenuSelect={() => setIsOpen((isOpen) => !isOpen)} />
+      <Header
+        showMobileMenu={pathname === '/' ? false : true}
+        onMobileMenuSelect={() => setIsOpen((isOpen) => !isOpen)}
+      />
       <MainMenuConnected />
       <MobileMenuConnected
         isOpen={isOpen}

apps/docs/src/components/document/color/color-primitives.tsx

@@ -1,15 +1,15 @@
-import { meta as govieMeta } from "@govie-ds/theme-govie";
-import { objectKeys } from "ts-extras";
-import { SwatchSets } from "./swatch-sets";
-import camelcase from "camelcase";
+import { meta as govieMeta } from '@govie-ds/theme-govie';
+import { objectKeys } from 'ts-extras';
+import { SwatchSets } from './swatch-sets';
+import camelcase from 'camelcase';
 
 type Token = {
   $type: string;
   $value: string;
 };
 
 function dtcgToSet(
-  set: Record<string, Token>
+  set: Record<string, Token>,
 ): { name: number; value: string }[] {
   return Object.entries(set).map(([name, value]) => ({
     name: Number(name),
@@ -22,7 +22,7 @@ export function ColorPrimitives({}) {
     (key) => ({
       name: camelcase(key, { pascalCase: true }),
       set: dtcgToSet(govieMeta.light.resolved.primitive.color[key]),
-    })
+    }),
   );
 
   return <SwatchSets sets={sets} />;

apps/docs/src/components/document/color/color.tsx

@@ -1,5 +1,5 @@
-import convert from "color-convert";
-import { TokenName } from "./token-name";
+import convert from 'color-convert';
+import { TokenName } from './token-name';
 
 export function Color({
   name,
@@ -33,15 +33,15 @@ export function Color({
             <div className="text-sm text-gray-600">{value}</div>
             <div>RGB</div>
             <div className="text-sm text-gray-600">
-              {convert.hex.rgb(value).join(", ")}
+              {convert.hex.rgb(value).join(', ')}
             </div>
             <div>HSL</div>
             <div className="text-sm text-gray-600">
-              {convert.hex.hsl(value).join(", ")}
+              {convert.hex.hsl(value).join(', ')}
             </div>
             <div>CMYK</div>
             <div className="text-sm text-gray-600">
-              {convert.hex.cmyk(value).join(", ")}
+              {convert.hex.cmyk(value).join(', ')}
             </div>
           </div>
         </div>

apps/docs/src/components/document/color/swatch-set.tsx

@@ -1,5 +1,5 @@
-import { Fragment } from "react/jsx-runtime";
-import { Swatch, SwatchProps } from "./swatch";
+import { Fragment } from 'react/jsx-runtime';
+import { Swatch, SwatchProps } from './swatch';
 
 export type SwatchSetProps = {
   name: string;

apps/docs/src/components/document/color/swatch-sets.tsx

@@ -1,5 +1,5 @@
-import { Fragment } from "react/jsx-runtime";
-import { SwatchSet, SwatchSetProps } from "./swatch-set";
+import { Fragment } from 'react/jsx-runtime';
+import { SwatchSet, SwatchSetProps } from './swatch-set';
 
 export type SwatchSetsProps = {
   sets: SwatchSetProps[];