💄 Redesign /consulting index + card colour tokens

__tests__/helpers/consultingSections.ts

@@ -0,0 +1,104 @@
+import {
+  ALL_SERVICES,
+  OTHER_SERVICES,
+  buildConsultingSections,
+  sectionIdFor,
+} from "@/helpers/consultingSections";
+
+const tag = (name: string) => ({ tag: { name } });
+
+const node = {
+  sidebar: [
+    { label: "All Services", tag: { name: ALL_SERVICES } },
+    { label: "Website Development", tag: { name: "Website Development" } },
+    { label: "Content Management Systems", tag: { name: "CMS" } },
+    { label: "Other Services", tag: { name: OTHER_SERVICES } },
+    { label: "Row an editor left untagged" },
+  ],
+  categories: [
+    {
+      pages: [
+        {
+          title: "Umbraco",
+          externalUrl: "/consulting/umbraco",
+          tags: [tag("Website Development"), tag("CMS")],
+        },
+        {
+          title: "Web Apps",
+          externalUrl: "/consulting/web-apps",
+          tags: [tag("Website Development")],
+        },
+        { title: "Untagged Thing", externalUrl: "/consulting/untagged" },
+        { title: "No Destination" },
+      ],
+    },
+  ],
+};
+
+const section = (sections, name: string) =>
+  sections.find((s) => s.name === name);
+const titles = (s) => s?.pages.map((p) => p.title) ?? [];
+
+describe("buildConsultingSections", () => {
+  const { sections, contentSections, allViewSections } =
+    buildConsultingSections(node);
+
+  test("drops entries with no destination", () => {
+    const all = section(sections, ALL_SERVICES);
+    expect(titles(all)).not.toContain("No Destination");
+    expect(titles(all)).toHaveLength(3);
+  });
+
+  test("untagged pages fall back to Other Services", () => {
+    expect(titles(section(sections, OTHER_SERVICES))).toEqual([
+      "Untagged Thing",
+    ]);
+  });
+
+  test("the All Services tag is not itself a content section", () => {
+    expect(section(contentSections, ALL_SERVICES)).toBeUndefined();
+  });
+
+  test("sidebar rows with no tag are dropped, not rendered as dead filters", () => {
+    // Selecting one would set the filter to undefined and blank the page.
+    expect(sections.every((s) => !!s.name)).toBe(true);
+    expect(sections.map((s) => s.label)).not.toContain(
+      "Row an editor left untagged"
+    );
+  });
+
+  test("filtering a section shows every page tagged with it", () => {
+    // Umbraco is tagged both, so it appears under each when filtered directly.
+    expect(titles(section(contentSections, "Website Development"))).toEqual([
+      "Umbraco",
+      "Web Apps",
+    ]);
+    expect(titles(section(contentSections, "CMS"))).toEqual(["Umbraco"]);
+  });
+
+  test("the All view gives a shared page to its smallest section", () => {
+    // The regression this guards: claiming in sidebar order would hand Umbraco
+    // to Website Development and leave CMS empty, so its heading would vanish.
+    expect(titles(section(allViewSections, "CMS"))).toEqual(["Umbraco"]);
+    expect(titles(section(allViewSections, "Website Development"))).toEqual([
+      "Web Apps",
+    ]);
+  });
+
+  test("the All view shows each page exactly once", () => {
+    const shown = allViewSections.flatMap((s) => s.pages.map((p) => p.title));
+    expect(shown).toHaveLength(new Set(shown).size);
+    expect(shown.sort()).toEqual(["Umbraco", "Untagged Thing", "Web Apps"]);
+  });
+});
+
+describe("sectionIdFor", () => {
+  test("matches the anchors hardcoded in content/megamenu/menu.json", () => {
+    expect(sectionIdFor("Platform Development")).toBe(
+      "consulting-platform-development"
+    );
+    expect(sectionIdFor("Cloud and Infrastructure")).toBe(
+      "consulting-cloud-and-infrastructure"
+    );
+  });
+});

app/components/breadcrumb.tsx

@@ -71,7 +71,7 @@ export const Breadcrumbs: FC<BreadcrumbsProps> = ({
         <BreadcrumbLink
           href="/"
           className={
-            "text-sm text-gray-700 underline-offset-1 hover:text-sswRed"
+            "text-sm text-muted-foreground underline-offset-1 hover:text-sswRed"
           }
         >
           Home
@@ -88,7 +88,7 @@ export const Breadcrumbs: FC<BreadcrumbsProps> = ({
       items.push(
         <BreadcrumbSeparator
           key={`separator-${index}`}
-          className="text-sm text-gray-700"
+          className="text-sm text-muted-foreground"
         >
           {"/"}
         </BreadcrumbSeparator>
@@ -98,7 +98,7 @@ export const Breadcrumbs: FC<BreadcrumbsProps> = ({
         <BreadcrumbItem key={`item-${index}`}>
           {isLast ? (
             <BreadcrumbPage
-              className={"text-sm text-gray-700 no-underline"}
+              className={"text-sm text-muted-foreground no-underline"}
               {...(seoSchema
                 ? { "data-tina-field": tinaField(seoSchema, "title") }
                 : {})}
@@ -109,7 +109,7 @@ export const Breadcrumbs: FC<BreadcrumbsProps> = ({
             <BreadcrumbLink
               href={href}
               className={
-                "text-sm text-gray-700 underline-offset-1 hover:text-sswRed"
+                "text-sm text-muted-foreground underline-offset-1 hover:text-sswRed"
               }
             >
               {displayName}
@@ -143,7 +143,7 @@ export const Breadcrumbs: FC<BreadcrumbsProps> = ({
       <nav className="sm:hidden" aria-label={`Back to ${mobileParent.label}`}>
         <a
           href={mobileParent.href}
-          className="unstyled inline-flex items-center gap-1 text-sm text-gray-700 no-underline hover:text-sswRed hover:no-underline"
+          className="unstyled inline-flex items-center gap-1 text-sm text-muted-foreground no-underline hover:text-sswRed hover:no-underline"
           aria-label={`Back to ${mobileParent.label}`}
         >
           <ArrowLeft className="size-3.5" aria-hidden="true" />