added: manual sorting for developers menu

WestpacGEL · Sep 30, 2024 · f454cfc · f454cfc
1 parent ff62c6d
commit f454cfc
Show file tree

Hide file tree

Showing 16 changed files with 28 additions and 10 deletions.
diff --git a/...e/src/app/design-system/components/sidebar/components/navigation/navigation.component.tsx b/...e/src/app/design-system/components/sidebar/components/navigation/navigation.component.tsx
@@ -6,7 +6,7 @@ import Link from 'next/link';
 import { usePathname } from 'next/navigation';
 import { useState } from 'react';
 
-import { formatComponentSlug } from '@/utils/format';
+import { formatComponentSlug, formatNavItems, sortDeveloperMenu, sortMenu } from '@/utils/format';
 
 import { useSidebar } from '../../sidebar.context';
 
@@ -29,6 +29,14 @@ export function Navigation({ items, brand }: NavigationProps) {
 function List({ items, level = 0, crumbs, brand }: ListProps) {
   return items.map(item => {
     if (item.children) {
+      if (item.label.toLowerCase() === 'developers') {
+        const formattedItems = sortDeveloperMenu(item.children);
+        return (
+          <Group key={item.label} label={item.label} level={level} crumbs={crumbs}>
+            <List items={formattedItems} level={level + 1} crumbs={crumbs} brand={brand} />
+          </Group>
+        );
+      }
       return (
         <Group key={item.label} label={item.label} level={level} crumbs={crumbs}>
           <List items={item.children} level={level + 1} crumbs={crumbs} brand={brand} />

diff --git a/.../design/eslint-configuration/content.mdoc → .../design/eslint-configuration/content.mdoc b/.../design/eslint-configuration/content.mdoc → .../design/eslint-configuration/content.mdoc
diff --git a/...et-started/developers/4-eslint/index.yaml → ...evelopers/eslint-configuration/index.yaml b/...et-started/developers/4-eslint/index.yaml → ...evelopers/eslint-configuration/index.yaml
diff --git a/...1-set-up/design/installation/content.mdoc → ...s/set-up/design/installation/content.mdoc b/...1-set-up/design/installation/content.mdoc → ...s/set-up/design/installation/content.mdoc
diff --git a/...set-up/design/pre-requisites/content.mdoc → ...set-up/design/pre-requisites/content.mdoc b/...set-up/design/pre-requisites/content.mdoc → ...set-up/design/pre-requisites/content.mdoc
diff --git a/...rs/1-set-up/design/resources/content.mdoc → ...pers/set-up/design/resources/content.mdoc b/...rs/1-set-up/design/resources/content.mdoc → ...pers/set-up/design/resources/content.mdoc
diff --git a/...et-started/developers/1-set-up/index.yaml → .../get-started/developers/set-up/index.yaml b/...et-started/developers/1-set-up/index.yaml → .../get-started/developers/set-up/index.yaml
diff --git a/...-testing/design/unit-testing/content.mdoc → ...-testing/design/unit-testing/content.mdoc b/...-testing/design/unit-testing/content.mdoc → ...-testing/design/unit-testing/content.mdoc
diff --git a/...rted/developers/5-unit-testing/index.yaml → ...tarted/developers/unit-testing/index.yaml b/...rted/developers/5-unit-testing/index.yaml → ...tarted/developers/unit-testing/index.yaml
diff --git a/...g-brands/design/using-brands/content.mdoc → ...g-brands/design/using-brands/content.mdoc b/...g-brands/design/using-brands/content.mdoc → ...g-brands/design/using-brands/content.mdoc
diff --git a/...rted/developers/3-using-brands/index.yaml → ...tarted/developers/using-brands/index.yaml b/...rted/developers/3-using-brands/index.yaml → ...tarted/developers/using-brands/index.yaml
diff --git a/...2-using-components/accessibilityDemo.mdoc → ...s/using-components/accessibilityDemo.mdoc b/...2-using-components/accessibilityDemo.mdoc → ...s/using-components/accessibilityDemo.mdoc
diff --git a/...ents/design/using-components/content.mdoc → ...ents/design/using-components/content.mdoc b/...ents/design/using-components/content.mdoc → ...ents/design/using-components/content.mdoc
diff --git a/.../developers/2-using-components/index.yaml → ...ed/developers/using-components/index.yaml b/.../developers/2-using-components/index.yaml → ...ed/developers/using-components/index.yaml
diff --git a/...s/2-using-components/relatedArticles.mdoc → ...ers/using-components/relatedArticles.mdoc b/...s/2-using-components/relatedArticles.mdoc → ...ers/using-components/relatedArticles.mdoc
diff --git a/apps/site/src/utils/format.ts b/apps/site/src/utils/format.ts
@@ -33,6 +33,18 @@ export function formatNavItems(navList: { name: string; slug: string }[]) {
   return navItems;
 }
 
+function orderMenu(menuItems: Item[], order: string[]) {
+  const orderedMenu: Item[] = [];
+  order.forEach(item =>
+    menuItems.forEach(menuItem => {
+      if (item === menuItem.label.toLowerCase()) {
+        orderedMenu.push(menuItem);
+      }
+    }),
+  );
+  return orderedMenu;
+}
+
 // This had to be made as a separate function as adding some to formatNavItems too cognitively complex
 export function sortMenu(menuItems: Item[]) {
   const topLevelMenuOrder = [
@@ -46,13 +58,11 @@ export function sortMenu(menuItems: Item[]) {
     'design tokens',
   ];
 
-  const orderedMenu: Item[] = [];
-  topLevelMenuOrder.forEach(item =>
-    menuItems.forEach(menuItem => {
-      if (item === menuItem.label.toLowerCase()) {
-        orderedMenu.push(menuItem);
-      }
-    }),
-  );
-  return orderedMenu;
+  return orderMenu(menuItems, topLevelMenuOrder);
+}
+
+export function sortDeveloperMenu(menuItems: Item[]) {
+  const developersMenuOrder = ['set up', 'using components', 'using brands', 'eslint configuration', 'unit testing'];
+
+  return orderMenu(menuItems, developersMenuOrder);
 }