From 1aec857d016a6664e32202e19bde5f72885609b9 Mon Sep 17 00:00:00 2001
From: david ornelas <davidornelas_11@hotmail.com>
Date: Tue, 9 Jul 2024 17:11:09 -0700
Subject: [PATCH] feat(app-degree-pages): add breadcrumbs to listing page

---
 .../src/components/ListingPage/index.js        |  9 +++++++++
 .../components/ListingPage/index.stories.js    | 18 +++++++++++++++++-
 .../src/core/types/listing-page-types.js       |  8 ++++++++
 3 files changed, 34 insertions(+), 1 deletion(-)

diff --git a/packages/app-degree-pages/src/components/ListingPage/index.js b/packages/app-degree-pages/src/components/ListingPage/index.js
index 208edac35e..642ccc3d01 100644
--- a/packages/app-degree-pages/src/components/ListingPage/index.js
+++ b/packages/app-degree-pages/src/components/ListingPage/index.js
@@ -6,6 +6,7 @@ import styled, { createGlobalStyle } from "styled-components";
 
 import { useFetch } from "../../../../../shared";
 import trackReactComponent from "../../../../../shared/services/componentDatalayer";
+import { Breadcrumbs } from "../DetailPage/components/Breadcrumbs";
 import {
   Loader,
   Main as MainSection,
@@ -269,6 +270,14 @@ const ListingPage = ({
       ) : null}
 
       <Main data-is-loading={loading} className="main-section dg-margin-top">
+      {introContent?.breadcrumbs && (
+                <div className="container mt-4 mb-0">
+                  <Breadcrumbs
+                    breadcrumbs={introContent.breadcrumbs}
+                    section={hero ? hero.title.text : ""}
+                  />
+                </div>
+              )}
         {introContent ? (
           <IntroContent
             applyNowUrl={
diff --git a/packages/app-degree-pages/src/components/ListingPage/index.stories.js b/packages/app-degree-pages/src/components/ListingPage/index.stories.js
index f1f4de1918..7128636dd8 100644
--- a/packages/app-degree-pages/src/components/ListingPage/index.stories.js
+++ b/packages/app-degree-pages/src/components/ListingPage/index.stories.js
@@ -72,6 +72,23 @@ const defaultArgs = {
   actionUrls,
   hero: null,
   introContent: {
+    breadcrumbs: [
+      {
+        text: "Academic programs",
+        url: "#",
+      },
+      {
+        text: "Undergraduate degrees",
+        // this is just an example working on Storybook
+        url: `${getStoryBookBaseUrl()}?path=/story/program-listing-page--default`,
+      },
+      {
+        text: "Degree title",
+        // this is just an example working on Storybook
+        url: `${getStoryBookBaseUrl()}?path=/story/program-detail-page--with-content`,
+        isActive: true,
+      },
+    ],
     type: "text",
     title: {
       text: "This is introductory marketing copy. Lorem ipsum dolor sit amet",
@@ -111,7 +128,6 @@ const defaultArgs = {
 export const Default = Template.bind({});
 Default.args = {
   ...defaultArgs,
-  introContent: null,
 };
 
 export const DefaultGraduate = Template.bind({});
diff --git a/packages/app-degree-pages/src/core/types/listing-page-types.js b/packages/app-degree-pages/src/core/types/listing-page-types.js
index 5104578131..9ef0273cd9 100644
--- a/packages/app-degree-pages/src/core/types/listing-page-types.js
+++ b/packages/app-degree-pages/src/core/types/listing-page-types.js
@@ -20,8 +20,16 @@
  * @typedef {import("./shared-types").ListSettings} ListSettings
  */
 
+/**
+ * @typedef {Object} BreadcrumbItem
+ * @property {string}  [url]
+ * @property {string}  text
+ * @property {boolean} [isActive]
+ */
+
 /**
  * @typedef {Object} IntroContentProps
+ * @property {Array.<BreadcrumbItem>} [breadcrumbs]
  * @property {string} [applyNowUrl]
  * @property {"text" | "text-media" | "text-image-overlay" | "text-photo-grid"} [type]
  * @property {ImageItem} [image]