feat(app-degree-pages): add breadcrumbs to listing page

ASU · Jul 10, 2024 · 1aec857 · 1aec857
1 parent f7d8c86
commit 1aec857
Show file tree

Hide file tree

Showing 3 changed files with 34 additions and 1 deletion.
diff --git 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
@@ -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
@@ -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]