From 7b58f2ea3241e41cd3580e75066c5ec5d13a0caa Mon Sep 17 00:00:00 2001
From: Luqmaan Essop <luqmaan.essop@amazee.com>
Date: Wed, 8 May 2024 09:39:42 +0200
Subject: [PATCH] feat: wip

---
 .../Molecules/Breadcrumbs.stories.tsx         |  2 +-
 .../src/components/Molecules/Breadcrumbs.tsx  |  9 +++----
 .../src/components/Organisms/PageDisplay.tsx  | 10 +++++++-
 packages/ui/src/components/Routes/Menu.tsx    |  4 ++-
 .../ui/src/components/Routes/Page.stories.tsx | 25 ++++++++++++++-----
 5 files changed, 35 insertions(+), 15 deletions(-)

diff --git a/packages/ui/src/components/Molecules/Breadcrumbs.stories.tsx b/packages/ui/src/components/Molecules/Breadcrumbs.stories.tsx
index 81dd002ba..9a7c6d0e5 100644
--- a/packages/ui/src/components/Molecules/Breadcrumbs.stories.tsx
+++ b/packages/ui/src/components/Molecules/Breadcrumbs.stories.tsx
@@ -3,7 +3,7 @@ import { Meta } from '@storybook/react';
 import React from 'react';
 
 import { Default as FrameStory } from '../Routes/Frame.stories';
-import BreadCrumbs from './Breadcrumbs';
+import { BreadCrumbs } from './Breadcrumbs';
 
 export default {
   component: BreadCrumbs,
diff --git a/packages/ui/src/components/Molecules/Breadcrumbs.tsx b/packages/ui/src/components/Molecules/Breadcrumbs.tsx
index f057661ce..0efa3eb61 100644
--- a/packages/ui/src/components/Molecules/Breadcrumbs.tsx
+++ b/packages/ui/src/components/Molecules/Breadcrumbs.tsx
@@ -6,7 +6,7 @@ import React from 'react';
 import { isTruthy } from '../../utils/isTruthy';
 import { useBreadcrumbs } from '../Routes/Menu';
 
-export default function BreadCrumbs({ className }: { className?: string }) {
+export function BreadCrumbs({ className }: { className?: string }) {
   const breadcrumbs = useBreadcrumbs();
 
   if (!breadcrumbs.length) {
@@ -14,11 +14,8 @@ export default function BreadCrumbs({ className }: { className?: string }) {
   }
 
   return (
-    <nav
-      className={clsx('pt-5 max-w-screen-xl mx-auto', className)}
-      aria-label="Breadcrumb"
-    >
-      <ol className={'rounded-lg inline-block p-2.5'}>
+    <nav className={clsx('pt-5', className)} aria-label="Breadcrumb">
+      <ol className={'rounded-lg inline-block py-2.5'}>
         {breadcrumbs?.filter(isTruthy).map(({ title, target, id }, index) => (
           <li className="inline-flex items-center" key={id}>
             {index > 0 ? (
diff --git a/packages/ui/src/components/Organisms/PageDisplay.tsx b/packages/ui/src/components/Organisms/PageDisplay.tsx
index 86813de03..29ef63583 100644
--- a/packages/ui/src/components/Organisms/PageDisplay.tsx
+++ b/packages/ui/src/components/Organisms/PageDisplay.tsx
@@ -3,6 +3,7 @@ import React from 'react';
 
 import { isTruthy } from '../../utils/isTruthy';
 import { UnreachableCaseError } from '../../utils/unreachable-case-error';
+import { BreadCrumbs } from '../Molecules/Breadcrumbs';
 import { PageTransition } from '../Molecules/PageTransition';
 import { BlockCta } from './PageContent/BlockCta';
 import { BlockForm } from './PageContent/BlockForm';
@@ -15,7 +16,14 @@ export function PageDisplay(page: PageFragment) {
   return (
     <PageTransition>
       <div>
-        {page.hero ? <PageHero {...page.hero} /> : null}
+        {page.hero ? (
+          <>
+            <PageHero {...page.hero} />
+            <BreadCrumbs className="mx-auto max-w-3xl" />
+          </>
+        ) : (
+          <BreadCrumbs />
+        )}
         <div className="bg-white pt-5 pb-12 lg:px-8">
           <div className="mx-auto max-w-3xl text-base leading-7 text-gray-700">
             {page?.content?.filter(isTruthy).map((block, index) => {
diff --git a/packages/ui/src/components/Routes/Menu.tsx b/packages/ui/src/components/Routes/Menu.tsx
index 2721f1a90..48f110401 100644
--- a/packages/ui/src/components/Routes/Menu.tsx
+++ b/packages/ui/src/components/Routes/Menu.tsx
@@ -26,6 +26,7 @@ export function useCurrentPath() {
 
 export function useMenuItem(path: string, menuName: MenuNameType) {
   const menus = useMenus();
+
   return (
     menus &&
     menus[menuName]?.items.find((menuItem) => menuItem?.target === path)
@@ -61,7 +62,8 @@ export function useMenuAncestors(path: string, menuName: MenuNameType) {
 
   // Set current page breadcrumb
   if (typeof processingMenuItem !== 'undefined') {
-    ancestors.push(processingMenuItem);
+    // If not home path then only push into breadcrumbs array
+    processingMenuItem.target !== '/' && ancestors.push(processingMenuItem);
   }
 
   while (
diff --git a/packages/ui/src/components/Routes/Page.stories.tsx b/packages/ui/src/components/Routes/Page.stories.tsx
index f3d048c25..6f3babd25 100644
--- a/packages/ui/src/components/Routes/Page.stories.tsx
+++ b/packages/ui/src/components/Routes/Page.stories.tsx
@@ -40,12 +40,6 @@ export const Default = {
         },
       ],
       path: '/test' as Url,
-      hero: {
-        headline: 'Page Hero Headline',
-        lead: 'A longer lead text that even might break into multiple lines.',
-        ctaUrl: '/test' as Url,
-        ctaText: 'Call to action',
-      },
       content: [
         {
           __typename: 'BlockMarkup',
@@ -62,6 +56,25 @@ export const Default = {
       ] as Exclude<ViewPageQuery['page'], undefined>['content'],
     },
   },
+  parameters: {
+    location: new URL('local:/drupal'),
+  },
+} satisfies StoryObj<ViewPageQuery>;
+
+export const Hero = {
+  ...Default,
+  args: {
+    ...Default.args,
+    page: {
+      ...Default.args.page,
+      hero: {
+        headline: 'Page Hero Headline',
+        lead: 'A longer lead text that even might break into multiple lines.',
+        ctaUrl: '/test' as Url,
+        ctaText: 'Call to action',
+      },
+    },
+  },
 } satisfies StoryObj<ViewPageQuery>;
 
 export const FullHero = {