Merge pull request #864 from WestpacGEL/fix/site-nav-order

Fix/site nav order

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

@@ -21,14 +21,15 @@ export default async function DesignSystemLayout({
       allContent.filter(i => !i.entry?.excludeFromNavbar).map(({ entry, slug }) => ({ slug, name: entry.name })),
     ),
   );
-  const brand = (params?.brand ?? 'wbc') as BrandKey; // double check this is the best way to do this
+
+  const brand = (params?.brand ?? 'wbc') as BrandKey; // double check this is the best way to do this.
 
   return (
     <div data-theme={brand?.toLowerCase()}>
       <SkipLink href="#content" className="z-[100]">
         Skip to content
       </SkipLink>
-      <div className="flex min-h-screen flex-col text-text active-theme-stg:text-heading">
+      <div className="text-text active-theme-stg:text-heading flex min-h-screen flex-col">
         <SidebarContextProvider>
           <Suspense>
             <Sidebar items={formattedItems} brand={brand} />

apps/site/src/content/design-system/components/accordion/design/accordion/content.mdoc

@@ -32,6 +32,14 @@ The Rat said nothing, but stooped and unfastened a rope and hauled on it; then l
 
 **Responsive tabcordion:** This a responsive component that can render as either [tabs](/components/tabs) or an accordion, depending on the screen width available. The tabcordion, can appear in either the default or lego style, see Visual design for the usage recommendations for either style.
 
+1. 
+
+---
+
+---
+
+- 
+
 ```jsx
 <>
   <Accordion className="sm:hidden">

apps/site/src/content/design-system/foundation/font/code/development-notes/content.mdoc

@@ -2,4 +2,4 @@ If the brand font is a web font (not a system font) then it should be self-hoste
 
 Developers can [download web font files](https://westpacgroup.sharepoint.com/:f:/s/O365-UG-043642/EmCGwWc6TtVKrkd39ZL2lZMBK06NWlIvAl2wA3uOa4gnTQ) directly from SharePoint.
 
-After downloading the font files, developers should follow the installation instructions outlined [here](/development/get-started) to add them to their project.
+After downloading the font files, developers should follow the installation instructions outlined [here](/get-started/developers/) to add them to their project.

apps/site/src/content/design-system/get-started/designers/design/designers-guide/content.mdoc

@@ -0,0 +1,31 @@
+Content here
+
+```jsx
+<>
+  <Footer
+    brand="wbc"
+    hideLogo
+  >
+    <div>
+      <SecurityIcon
+        className="float-left shrink-0 max-md:mr-1 md:mr-2"
+        color="muted"
+        size={{
+          initial: 'small',
+          md: 'medium'
+        }}
+      />
+      <p className="text-muted">
+        Our site and your online application are secure. For more information read our{' '}
+        <Link
+          href="https://www.westpac.com.au/security/"
+          type="inline"
+        >
+          information on security
+        </Link>
+        . © Copyright © Westpac Banking Corporation ABN 33 007 457 141 AFSL and Australian credit licence 233714.
+      </p>
+    </div>
+  </Footer>
+</>
+```

apps/site/src/content/design-system/get-started/designers/index.yaml

@@ -0,0 +1,14 @@
+name: Designers
+description: TBA
+namedExport:
+  discriminant: false
+excludeFromNavbar: true
+design:
+  - title:
+      name: Designer's guide
+      slug: designers-guide
+    noTitle: false
+    noDemo: false
+accessibility: []
+relatedComponents: []
+code: []

apps/site/src/content/design-system/development/guides/brand/index.yaml → apps/site/src/content/design-system/get-started/developers/brand/index.yaml

@@ -1,4 +1,4 @@
-name: Brand
+name: Using brands
 description: >-
   In order to allow for the most flexibility when theming your application, you
   can easily change your application to use any of Westpac Group's brands.

apps/site/src/content/design-system/development/guides/eslint/index.yaml → apps/site/src/content/design-system/get-started/developers/eslint/index.yaml

@@ -1,4 +1,4 @@
-name: ESLint
+name: ESLint configuration
 description: >-
   We suggest following the Westpac Group ESLint configuration.
 design:

apps/site/src/content/design-system/development/get-started/index.yaml → apps/site/src/content/design-system/get-started/developers/set-up/index.yaml

@@ -1,4 +1,4 @@
-name: Get started
+name: Set up
 description: >-
   The GEL design system is built using React. Use it to easily build new React
   applications, as well as add to existing ones.

apps/site/src/utils/format.ts

@@ -1,7 +1,8 @@
 import { Item } from '@/app/design-system/components/sidebar/components/navigation/navigation.types';
 
 export function formatComponentSlug(component: string) {
-  return component[0].toUpperCase() + component.slice(1);
+  const label = component.replace('-', ' ');
+  return label[0].toUpperCase() + label.slice(1);
 }
 
 export function formatNavItems(navList: { name: string; slug: string }[]) {
@@ -35,11 +36,12 @@ export function formatNavItems(navList: { name: string; slug: string }[]) {
 // This had to be made as a separate function as adding some to formatNavItems too cognitively complex
 export function sortMenu(menuItems: Item[]) {
   const topLevelMenuOrder = [
-    'accessibility',
+    'home',
+    'get-started',
     'foundation',
     'components',
     'patterns',
-    'development',
+    'accessibility',
     'content',
     'design tokens',
   ];