diff --git a/apps/site/src/app/design-system/[brand]/layout.tsx b/apps/site/src/app/design-system/[brand]/layout.tsx index 90391b372..fc89273dd 100644 --- a/apps/site/src/app/design-system/[brand]/layout.tsx +++ b/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 (
Skip to content -
+
diff --git a/apps/site/src/content/design-system/components/accordion/design/accordion/content.mdoc b/apps/site/src/content/design-system/components/accordion/design/accordion/content.mdoc index f5b2b7c92..1e67ac90e 100644 --- a/apps/site/src/content/design-system/components/accordion/design/accordion/content.mdoc +++ b/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 <> diff --git a/apps/site/src/content/design-system/foundation/font/code/development-notes/content.mdoc b/apps/site/src/content/design-system/foundation/font/code/development-notes/content.mdoc index c26ec655c..43fe466a1 100644 --- a/apps/site/src/content/design-system/foundation/font/code/development-notes/content.mdoc +++ b/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. diff --git a/apps/site/src/content/design-system/development/guides/usage/accessibilityDemo.mdoc b/apps/site/src/content/design-system/get-started/designers/accessibilityDemo.mdoc similarity index 100% rename from apps/site/src/content/design-system/development/guides/usage/accessibilityDemo.mdoc rename to apps/site/src/content/design-system/get-started/designers/accessibilityDemo.mdoc diff --git a/apps/site/src/content/design-system/get-started/designers/design/designers-guide/content.mdoc b/apps/site/src/content/design-system/get-started/designers/design/designers-guide/content.mdoc new file mode 100644 index 000000000..6fd834224 --- /dev/null +++ b/apps/site/src/content/design-system/get-started/designers/design/designers-guide/content.mdoc @@ -0,0 +1,31 @@ +Content here + +```jsx +<> + + +``` diff --git a/apps/site/src/content/design-system/get-started/designers/index.yaml b/apps/site/src/content/design-system/get-started/designers/index.yaml new file mode 100644 index 000000000..a7197b8df --- /dev/null +++ b/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: [] diff --git a/apps/site/src/content/design-system/development/guides/usage/relatedArticles.mdoc b/apps/site/src/content/design-system/get-started/designers/relatedArticles.mdoc similarity index 100% rename from apps/site/src/content/design-system/development/guides/usage/relatedArticles.mdoc rename to apps/site/src/content/design-system/get-started/designers/relatedArticles.mdoc diff --git a/apps/site/src/content/design-system/development/guides/brand/design/using-brands/content.mdoc b/apps/site/src/content/design-system/get-started/developers/brand/design/using-brands/content.mdoc similarity index 100% rename from apps/site/src/content/design-system/development/guides/brand/design/using-brands/content.mdoc rename to apps/site/src/content/design-system/get-started/developers/brand/design/using-brands/content.mdoc diff --git a/apps/site/src/content/design-system/development/guides/brand/index.yaml b/apps/site/src/content/design-system/get-started/developers/brand/index.yaml similarity index 93% rename from apps/site/src/content/design-system/development/guides/brand/index.yaml rename to apps/site/src/content/design-system/get-started/developers/brand/index.yaml index a3563958d..02242ddfa 100644 --- a/apps/site/src/content/design-system/development/guides/brand/index.yaml +++ b/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. diff --git a/apps/site/src/content/design-system/development/guides/eslint/design/eslint-configuration/content.mdoc b/apps/site/src/content/design-system/get-started/developers/eslint/design/eslint-configuration/content.mdoc similarity index 100% rename from apps/site/src/content/design-system/development/guides/eslint/design/eslint-configuration/content.mdoc rename to apps/site/src/content/design-system/get-started/developers/eslint/design/eslint-configuration/content.mdoc diff --git a/apps/site/src/content/design-system/development/guides/eslint/index.yaml b/apps/site/src/content/design-system/get-started/developers/eslint/index.yaml similarity index 87% rename from apps/site/src/content/design-system/development/guides/eslint/index.yaml rename to apps/site/src/content/design-system/get-started/developers/eslint/index.yaml index 8b04edf97..0051b7433 100644 --- a/apps/site/src/content/design-system/development/guides/eslint/index.yaml +++ b/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: diff --git a/apps/site/src/content/design-system/development/get-started/design/installation/content.mdoc b/apps/site/src/content/design-system/get-started/developers/set-up/design/installation/content.mdoc similarity index 100% rename from apps/site/src/content/design-system/development/get-started/design/installation/content.mdoc rename to apps/site/src/content/design-system/get-started/developers/set-up/design/installation/content.mdoc diff --git a/apps/site/src/content/design-system/development/get-started/design/pre-requisites/content.mdoc b/apps/site/src/content/design-system/get-started/developers/set-up/design/pre-requisites/content.mdoc similarity index 100% rename from apps/site/src/content/design-system/development/get-started/design/pre-requisites/content.mdoc rename to apps/site/src/content/design-system/get-started/developers/set-up/design/pre-requisites/content.mdoc diff --git a/apps/site/src/content/design-system/development/get-started/design/resources/content.mdoc b/apps/site/src/content/design-system/get-started/developers/set-up/design/resources/content.mdoc similarity index 100% rename from apps/site/src/content/design-system/development/get-started/design/resources/content.mdoc rename to apps/site/src/content/design-system/get-started/developers/set-up/design/resources/content.mdoc diff --git a/apps/site/src/content/design-system/development/get-started/index.yaml b/apps/site/src/content/design-system/get-started/developers/set-up/index.yaml similarity index 95% rename from apps/site/src/content/design-system/development/get-started/index.yaml rename to apps/site/src/content/design-system/get-started/developers/set-up/index.yaml index be4ce243b..e567b0b44 100644 --- a/apps/site/src/content/design-system/development/get-started/index.yaml +++ b/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. diff --git a/apps/site/src/content/design-system/development/guides/unit-testing/design/unit-testing/content.mdoc b/apps/site/src/content/design-system/get-started/developers/unit-testing/design/unit-testing/content.mdoc similarity index 100% rename from apps/site/src/content/design-system/development/guides/unit-testing/design/unit-testing/content.mdoc rename to apps/site/src/content/design-system/get-started/developers/unit-testing/design/unit-testing/content.mdoc diff --git a/apps/site/src/content/design-system/development/guides/unit-testing/index.yaml b/apps/site/src/content/design-system/get-started/developers/unit-testing/index.yaml similarity index 100% rename from apps/site/src/content/design-system/development/guides/unit-testing/index.yaml rename to apps/site/src/content/design-system/get-started/developers/unit-testing/index.yaml diff --git a/apps/site/src/content/design-system/get-started/developers/usage/accessibilityDemo.mdoc b/apps/site/src/content/design-system/get-started/developers/usage/accessibilityDemo.mdoc new file mode 100644 index 000000000..e69de29bb diff --git a/apps/site/src/content/design-system/development/guides/usage/design/using-components/content.mdoc b/apps/site/src/content/design-system/get-started/developers/usage/design/using-components/content.mdoc similarity index 100% rename from apps/site/src/content/design-system/development/guides/usage/design/using-components/content.mdoc rename to apps/site/src/content/design-system/get-started/developers/usage/design/using-components/content.mdoc diff --git a/apps/site/src/content/design-system/development/guides/usage/index.yaml b/apps/site/src/content/design-system/get-started/developers/usage/index.yaml similarity index 100% rename from apps/site/src/content/design-system/development/guides/usage/index.yaml rename to apps/site/src/content/design-system/get-started/developers/usage/index.yaml diff --git a/apps/site/src/content/design-system/get-started/developers/usage/relatedArticles.mdoc b/apps/site/src/content/design-system/get-started/developers/usage/relatedArticles.mdoc new file mode 100644 index 000000000..e69de29bb diff --git a/apps/site/src/utils/format.ts b/apps/site/src/utils/format.ts index d3809ccc5..fc3e81c20 100644 --- a/apps/site/src/utils/format.ts +++ b/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', ];