Merge pull request #681 from WestpacGEL/develop

Develop

apps/site/keystatic.config.ts

@@ -5,7 +5,8 @@ import { ArticleComponentBlocks } from '@/components/component-blocks/article-co
 import { foundationBlocks } from '@/components/component-blocks/foundation-blocks';
 import { logs } from '@/components/component-blocks/logs/logs.preview';
 
-const IS_VERCEL_BUILD = typeof process.env.NEXT_PUBLIC_GIT_REPO_OWNER === 'string';
+const IS_VERCEL_BUILD =
+  typeof process.env.NEXT_PUBLIC_GIT_REPO_OWNER === 'string' && process.env.NEXT_PUBLIC_GIT_REPO_OWNER !== '';
 
 // storage option for Keystatic.
 const storage: LocalConfig['storage'] | GitHubConfig['storage'] = IS_VERCEL_BUILD

apps/site/next.config.js

@@ -11,4 +11,13 @@ module.exports = {
       },
     ],
   },
+  async redirects() {
+    return [
+      {
+        source: '/design-system',
+        destination: '/design-system/wbc',
+        permanent: false,
+      },
+    ];
+  },
 };

apps/site/src/app/(home)/components/action-bar/action-bar.component.tsx

@@ -27,7 +27,7 @@ export function ActionBar() {
           <ul role="list" className="flex gap-2">
             {Object.entries(logoMap).map(([key, { logo: Logo, name }]) => (
               <li key={key}>
-                <Link href={`/design-system?brand=${key}`} className="outline-offset-[3px] outline-focus">
+                <Link href={`/design-system/${key}`} className="outline-offset-[3px] outline-focus">
                   <CircleLogo>
                     <Logo aria-label={`${name} Design System`} className={logoStyles({ brand: key as BrandKey })} />
                   </CircleLogo>
@@ -45,7 +45,7 @@ export function ActionBar() {
             aria-label="Change brand"
           >
             {BANK_OPTIONS.map(({ icon: Icon, homePageClasses, key, label }) => (
-              <BrandSelect.Option href={`/design-system?brand=${key}`} key={key} textValue={label}>
+              <BrandSelect.Option href={`/design-system/${key}`} key={key} textValue={label}>
                 <div className="flex w-full items-center justify-between">
                   <span className="typography-body-10">
                     {label}

apps/site/src/app/(home)/components/footer/footer.component.tsx

@@ -20,7 +20,7 @@ export function Footer({ gelEmail = '', guidelinesURL = '' }: { gelEmail?: strin
               {Object.entries(logoMap).map(([key, { logo: Logo, name }]) => {
                 return (
                   <li key={key} className="col-span-12 xsl:col-span-6">
-                    <Link href={`/design-system?brand=${key}`}>
+                    <Link href={`/design-system/${key}`}>
                       <Circle>
                         <Logo className={logoStyles({ brand: key as BrandKey, footer: true })} />
                       </Circle>

apps/site/src/app/design-system/[...component]/components/content-tabs/content-tabs.component.tsx → apps/site/src/app/design-system/[brand]/[...component]/components/content-tabs/content-tabs.component.tsx

@@ -47,19 +47,19 @@ const TabPanelByKey = ({ tabKey, content }: { content: ContentTabsProps; tabKey:
 
 const FIXED_HEADER_Y = 162; // 228 - 66 = height to stick
 
-export function ContentTabs({ content, brand, tab }: { brand: string; content: ContentTabsProps; tab: string }) {
+export function ContentTabs({ content, tab }: { brand: string; content: ContentTabsProps; tab: string }) {
   const router = useRouter();
   const pathname = usePathname();
 
   const handleChange = useCallback(
     (key: Key) => {
       const isLargeScreen = window.innerWidth > parseInt(BREAKPOINTS.lg, 10);
-      router.push(`${pathname}?brand=${brand}&tab=${key}`, { scroll: !isLargeScreen });
+      router.push(`${pathname}?tab=${key}`, { scroll: !isLargeScreen });
       if (isLargeScreen && window.scrollY >= FIXED_HEADER_Y) {
         window.scrollTo({ top: FIXED_HEADER_Y });
       }
     },
-    [brand, pathname, router],
+    [pathname, router],
   );
 
   const filteredTabs = useMemo(() => {

apps/site/src/app/design-system/[...component]/components/header/header.component.tsx → apps/site/src/app/design-system/[brand]/[...component]/components/header/header.component.tsx

@@ -1,22 +1,18 @@
 'use client';
 
 import { HamburgerMenuIcon } from '@westpac/ui/icon';
-import { useSearchParams } from 'next/navigation';
 import React, { useEffect, useState } from 'react';
 
+import { useSidebar } from '@/app/design-system/components/sidebar/sidebar.context';
 import { BrandKey } from '@/app/types/brand.types';
 
-import { useSidebar } from '../../../components/sidebar/sidebar.context';
-
 import { styles as headerStyles } from './header.styles';
 
 const FIXED_HEADER = 162; // 228 - 66 = height to stick
 
-export function Header({ className, title }: { className?: string; title?: string }) {
+export function Header({ className, title, brand }: { brand: string; className?: string; title?: string }) {
   const [fixed, setFixed] = useState(false);
-  const searchParams = useSearchParams();
-  const brand = searchParams.get('brand')?.toLowerCase();
-  const styles = headerStyles({ brand: brand as BrandKey, fixed, className });
+  const styles = headerStyles({ brand: brand.toLowerCase() as BrandKey, fixed, className });
   const { setOpen } = useSidebar();
 
   useEffect(() => {

apps/site/src/app/design-system/[...component]/layout.tsx → apps/site/src/app/design-system/[brand]/[...component]/layout.tsx

@@ -9,15 +9,15 @@ export default async function ComponentLayout({
   params,
 }: {
   children: React.ReactNode;
-  params: { component: string[] };
+  params: { brand: string; component: string[] };
 }) {
-  const { component } = params;
+  const { brand, component } = params;
   const content = await reader().collections.designSystem.readOrThrow(component.join('/'));
 
   return (
     <>
       <Suspense fallback={<>Loading...</>}>
-        <Header title={content.name} />
+        <Header title={content.name} brand={brand} />
       </Suspense>
       <div className="flex flex-1 flex-col p-5">
         <div className="-m-5 flex flex-1 flex-col bg-background">{children}</div>

apps/site/src/app/design-system/[...component]/page.tsx → apps/site/src/app/design-system/[brand]/[...component]/page.tsx

@@ -4,6 +4,7 @@ import { Metadata } from 'next';
 
 import { reader } from '@/app/reader';
 import { RelatedInfoLinks } from '@/components/related-info/related-info.types';
+import { BANK_OPTIONS } from '@/constants/bank-options';
 import { ShortCode } from '@/types/short-code.types';
 
 import { ContentTabs } from './components';
@@ -40,9 +41,11 @@ export async function generateMetadata({ params }: MetadataProps): Promise<Metad
 
 export async function generateStaticParams() {
   const components = await reader().collections.designSystem.all();
-  return components.map(component => ({
-    component: component.slug.split('/'),
-  }));
+  const params: Array<{ brand: string; component: string[] }> = [];
+  BANK_OPTIONS.forEach(bank => {
+    components.forEach(component => params.push({ brand: bank.key, component: component.slug.split('/') }));
+  });
+  return params;
 }
 
 export default async function ComponentPage({

apps/site/src/app/design-system/layout.tsx → apps/site/src/app/design-system/[brand]/layout.tsx

@@ -1,26 +1,34 @@
 import { Suspense } from 'react';
 
 import { reader } from '@/app/reader';
+import { BrandKey } from '@/app/types/brand.types';
 import { StickyFooter } from '@/components/sticky-footer';
 import { formatNavItems, sortMenu } from '@/utils/format';
 
-import { Sidebar, SidebarContextProvider } from './components';
+import { Sidebar, SidebarContextProvider } from '../components';
 
-export default async function DesignSystemLayout({ children }: { children: React.ReactNode }) {
+export default async function DesignSystemLayout({
+  children,
+  params,
+}: {
+  children: React.ReactNode;
+  params: { brand: string };
+}) {
   const allContent = await reader().collections.designSystem.all();
   const formattedItems = sortMenu(formatNavItems(allContent.map(({ entry, slug }) => ({ slug, name: entry.name }))));
+  const brand = (params?.brand ?? 'wbc') as BrandKey; // double check this is the best way to do this
 
   return (
-    <>
+    <div data-theme={brand?.toLowerCase()}>
       <div className="flex min-h-screen flex-col text-text active-theme-stg:text-heading">
         <SidebarContextProvider>
           <Suspense>
-            <Sidebar items={formattedItems} />
+            <Sidebar items={formattedItems} brand={brand} />
           </Suspense>
           <div className="mb-8 flex flex-1 flex-col lg:ml-[18.75rem]">{children}</div>
         </SidebarContextProvider>
       </div>
       <StickyFooter />
-    </>
+    </div>
   );
 }

apps/site/src/app/design-system/page.tsx → apps/site/src/app/design-system/[brand]/page.tsx

@@ -16,14 +16,10 @@ import {
   TwitterLogo,
 } from '@/components/logos';
 
-import { Hero, Section, SectionHeading, SectionItem } from './components';
+import { Hero, Section, SectionHeading, SectionItem } from '../components';
 
-export default function DesignSystemHomePage({
-  searchParams,
-}: {
-  searchParams?: { [key: string]: string | undefined };
-}) {
-  const brand = (searchParams?.brand || 'wbc') as BrandKey;
+export default function DesignSystemHomePage({ params }: { params: { brand: string } }) {
+  const brand = (params.brand || 'wbc') as BrandKey;
   return (
     <>
       <Hero brand={brand} />

apps/site/src/app/design-system/components/sidebar/components/navigation/navigation.component.tsx

@@ -80,7 +80,7 @@ function Group({ label, level, crumbs, children, ...props }: GroupProps) {
 }
 
 function Item({ label, path, level, crumbs, brand, ...props }: ItemProps) {
-  const href = `/design-system/${path}?brand=${brand}`;
+  const href = `/design-system/${brand}/${path}`;
   const page = path?.split('/').pop();
   const active = crumbs[crumbs.length - 1] === page || (crumbs[crumbs.length - 1] === 'design-system' && page === '');
   const { setOpen } = useSidebar();

apps/site/src/app/design-system/components/sidebar/sidebar.component.tsx

@@ -2,11 +2,10 @@
 
 import { clsx } from 'clsx';
 import Link from 'next/link';
-import { usePathname, useRouter, useSearchParams } from 'next/navigation';
+import { useParams, useRouter } from 'next/navigation';
 import React, { Key, useCallback, useEffect, useRef, useState } from 'react';
 import { useOnClickOutside } from 'usehooks-ts';
 
-import { BrandKey } from '@/app/types/brand.types';
 import { CloseIcon } from '@/components/code/code.inject-components';
 import { BANK_OPTIONS } from '@/constants/bank-options';
 
@@ -16,7 +15,7 @@ import { SidebarProps } from './sidebar.types';
 
 // Credits: https://github.com/jmarioste/next-responsive-sidebar-tailwind
 
-export function Sidebar({ items }: SidebarProps) {
+export function Sidebar({ items, brand }: SidebarProps) {
   const { open, setOpen } = useSidebar();
   const [scrolled, setScrolled] = useState<boolean>(false);
 
@@ -42,15 +41,19 @@ export function Sidebar({ items }: SidebarProps) {
   }, [listRef]);
 
   const router = useRouter();
-  const pathname = usePathname();
-  const searchParams = useSearchParams();
-  const brand = (searchParams.get('brand')?.toLowerCase() ?? 'wbc') as BrandKey;
+  const params = useParams();
 
   const handleChange = useCallback(
     async (key: Key) => {
-      router.push(`${pathname}?brand=${key}`, { scroll: false });
+      if (params.component) {
+        const componentPath = Array.isArray(params.component) ? params.component.join('/') : params.component;
+        router.push(`/design-system/${key}/${componentPath}`, { scroll: false });
+      } else {
+        // on home page
+        router.push(`/design-system/${key}`, { scroll: false });
+      }
     },
-    [router, pathname],
+    [router, params],
   );
 
   return (

apps/site/src/app/design-system/components/sidebar/sidebar.types.ts

@@ -1,9 +1,12 @@
+import { BrandKey } from '@/app/types/brand.types';
+
 type Item = {
   children?: Item[];
   label: string;
   path?: string;
 };
 
 export type SidebarProps = {
+  brand: BrandKey;
   items: Item[];
 };

apps/site/src/app/design-system/hooks/use-brand.ts

@@ -1,9 +1,9 @@
-import { useSearchParams } from 'next/navigation';
+import { useParams } from 'next/navigation';
 
 import { BANK_OPTIONS } from '@/constants/bank-options';
 
 export function useBrand() {
-  const searchParams = useSearchParams();
-  const brand = searchParams.get('brand') ?? 'wbc';
+  const params = useParams();
+  const brand = params.brand ?? 'wbc';
   return BANK_OPTIONS.find(({ key }) => key === brand);
 }

apps/site/src/app/layout.tsx

@@ -1,10 +1,9 @@
 import './styles/globals.css';
 import { type Metadata } from 'next';
 import { draftMode } from 'next/headers';
-import React, { Suspense } from 'react';
+import React from 'react';
 
 import { FontPreloader } from '@/components/font-preloader';
-import { ThemeProvider } from '@/components/theme';
 
 export const metadata: Metadata = {
   title: {
@@ -19,10 +18,7 @@ export default function RootLayout({ children }: { children: React.ReactNode })
     <html lang="en">
       <FontPreloader />
       <body>
-        {/*We need to move theme to a cookie based approach for performance*/}
-        <Suspense>
-          <ThemeProvider>{children}</ThemeProvider>
-        </Suspense>
+        {children}
         {isEnabled && (
           <div className="absolute right-15 top-3 z-[999]">
             <form method="post" action="/preview/end">

apps/site/src/components/code/components/live-code/live-code.component.tsx

@@ -6,7 +6,7 @@ import { LiveContext, LiveEditor, LivePreview } from 'react-live';
 import { useOverlayTriggerState } from 'react-stately';
 import { VariantProps } from 'tailwind-variants';
 
-import { ResponsiveModal } from '@/app/design-system/[...component]/components/content-tabs/components/responsive-modal-button';
+import { ResponsiveModal } from '@/app/design-system/[brand]/[...component]/components/content-tabs/components/responsive-modal-button';
 
 import { Button } from '../../code.inject-components';
 

apps/site/src/components/component-blocks/colors/colors.component.tsx

@@ -2,15 +2,15 @@
 
 import { Grid, GridItem } from '@westpac/ui';
 import { type BrandKey } from '@westpac/ui/tailwind';
-import { useSearchParams } from 'next/navigation';
+import { useParams } from 'next/navigation';
 
 import { Svg } from '@/components/svg';
 
 import { getColorPalette } from './colors.utils';
 
 export function Colors({ palette, tab }: { palette: string; tab?: string }) {
-  const searchParams = useSearchParams();
-  const brand = (searchParams.get('brand') ?? 'wbc') as BrandKey;
+  const params = useParams();
+  const brand = (params.brand ?? 'wbc') as BrandKey;
   const colorPalette = getColorPalette({ brand, palette });
   return (
     <Grid tag="ul" className="mt-2">

apps/site/src/components/component-blocks/components/short-code/short-code.component.tsx

@@ -1,7 +1,7 @@
 import { DocumentRenderer } from '@keystatic/core/renderer';
 import { useMemo } from 'react';
 
-import { DOCUMENT_RENDERERS } from '@/app/design-system/[...component]/components/content-tabs/components/document-renderer';
+import { DOCUMENT_RENDERERS } from '@/app/design-system/[brand]/[...component]/components/content-tabs/components/document-renderer';
 
 import { foundationBlocksComponents } from '../../foundation-blocks';
 

apps/site/src/components/content-blocks/typography/typography.component.tsx

@@ -2,7 +2,7 @@
 
 import { NewWindowIcon } from '@westpac/ui/icon';
 import NextLink, { LinkProps } from 'next/link';
-import { useSearchParams } from 'next/navigation';
+import { useParams } from 'next/navigation';
 import React from 'react';
 import { VariantProps } from 'tailwind-variants';
 
@@ -20,16 +20,11 @@ export function Link({
   href,
   ...props
 }: React.PropsWithChildren<LinkProps & VariantProps<typeof linkStyles>>) {
-  const searchParams = useSearchParams();
-  const brand = (searchParams.get('brand') ?? 'wbc') as BrandKey;
+  const params = useParams();
+  const brand = (params.brand ?? 'wbc') as BrandKey;
   const isExternalLink = href.toString().indexOf('http') === 0 || href.toString().indexOf('mailto') === 0;
   return (
-    <NextLink
-      href={isExternalLink ? href : `${href}?brand=${brand}`}
-      target={isExternalLink ? '_blank' : '_self'}
-      className={linkStyles({ color })}
-      {...props}
-    >
+    <NextLink href={href} target={isExternalLink ? '_blank' : '_self'} className={linkStyles({ color })} {...props}>
       {children}
       {isExternalLink && <NewWindowIcon size="xsmall" className="ml-1" />}
     </NextLink>