@asd20/ui-next 2.32.2 → 2.33.0

package/CHANGELOG.md

@@ -1,5 +1,12 @@
 # Changelog
 
+# [2.33.0](https://github.com/academydistrict20/asd20-ui-next/compare/ui-next-v2.32.2...ui-next-v2.33.0) (2026-10-20)
+
+
+### Features
+
+* breadcrumbs now reflect previous wayfinding page if applicable; otherwise use current heirarchy ([d48b8ac](https://github.com/academydistrict20/asd20-ui-next/commit/d48b8ac0057c5a73b3f358f250025be822e78ef1))
+
 ## [2.32.2](https://github.com/academydistrict20/asd20-ui-next/compare/ui-next-v2.32.1...ui-next-v2.32.2) (2026-10-14)
 
 

package/README.md

@@ -35,6 +35,27 @@ multi-repo contract, not as an app-local component folder.
 - Unit test runner: Vitest
 - Component development: Storybook 8 with its retained webpack 5 builder
 
+## Breadcrumb Navigation
+
+Website templates accept an optional `breadcrumbContext` page reference supplied
+by the website's client navigation tracker. A visitor arriving from a wayfinding
+page sees that section in the breadcrumb when the destination is one of its
+message detail links or related pages. The context can continue between related
+detail pages and is cleared when the visitor leaves that section.
+
+Context is stored with the browser history entry, so refresh and Back/Forward
+can restore the context of that visit. Native same-tab links can also carry a short-lived
+arrival record when the referring page confirms the transition. Direct visits,
+unknown origins, unavailable browser storage, and discarded history state fall
+back to existing breadcrumbs. Context is restored after hydration.
+
+Only the header links change. URLs, Related Pages, `parentPage`, dates,
+categories, and the existing announcement/story navigation retain their behavior.
+There is no per-page editor setting or additional breadcrumb data request.
+
+Rollout requires releasing this UI package, updating the website's UI dependency,
+and deploying the website integration. CommCenter and the database need no changes.
+
 ## Public Entry Points
 
 Supported import paths are defined in `package.json` and guarded by

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@asd20/ui-next",
-  "version": "2.32.2",
+  "version": "2.33.0",
   "private": false,
   "description": "ASD20 UI component library for Vue 3.",
   "license": "MIT",

package/src/helpers/breadcrumbLinks.js

@@ -0,0 +1,42 @@
+function localPath(value) {
+  if (typeof value !== 'string' || !value.startsWith('/') ||
+    value.startsWith('//') || /[\\\s]/.test(value)) return null
+  try {
+    return new URL(value, 'https://breadcrumb.local').pathname.replace(/\/+$/, '') || '/'
+  } catch { return null }
+}
+
+function isBreadcrumbContext(page, { id, path, organization }) {
+  const parentPath = localPath(page?.path?.path)
+  return Boolean(parentPath && typeof (page.name || page.title) === 'string' && (page.name || page.title) &&
+    (!id || page.id !== id) && (!path || parentPath !== localPath(path)) &&
+    (!page.status || page.status === 'Published') &&
+    (!organization?.id || !page.ownerOrganizationId ||
+      organization.id === page.ownerOrganizationId))
+}
+
+function textLabel(value) {
+  return value.replace(/&/g, '&amp;').replace(/</g, '&lt;').replace(/>/g, '&gt;')
+}
+
+// Visit-specific context affects only the links displayed in the page header.
+export function buildBreadcrumbLinks({
+  breadcrumbContext,
+  parentPage,
+  id,
+  path,
+  organization,
+} = {}) {
+  const parent = isBreadcrumbContext(breadcrumbContext, { id, path, organization })
+    ? breadcrumbContext
+    : parentPage
+  if (!parent?.path?.path) return []
+
+  const links = parent.path.path === '/' ? [] : [{ url: '/', label: 'Home' }]
+  const label = parent.name || parent.title
+  links.push({
+    url: parent.path.path,
+    label: parent === breadcrumbContext ? textLabel(label) : label,
+  })
+  return links
+}

package/src/helpers/mapPageQueryResultToPageTemplateProps.js

@@ -214,6 +214,7 @@ export default function mapPageQueryResultToPageTemplateProps(
       pageTypeId: pageData.pageTypeId,
       factoids: pageData.factoids,
       parentPage: pageData.parentPage,
+      breadcrumbContext: pageData.breadcrumbContext || null,
       relatedPages: pageData.relatedPages
         ? pageData.relatedPages.map(p => {
             const page = _get(p, 'page[0]')

package/src/mixins/pageTemplateMixin.js

@@ -1,4 +1,5 @@
 import responsiveBreakpointMixin from './responsiveBreakpointMixin'
+import { buildBreadcrumbLinks } from '../helpers/breadcrumbLinks'
 
 function getMessageBodyHtml(message) {
   return (message && (message.bodyContent || message.bodyHtml)) || ''
@@ -81,6 +82,7 @@ export default {
     navigation: { type: Array, default: () => [] },
     actionItems: { type: Array, default: () => [] },
     parentPage: { type: Object, default: null },
+    breadcrumbContext: { type: Object, default: null },
     quickLinks: { type: Array, default: () => [] },
     socialLinks: { type: Array, default: () => [] },
     disclosureLinks: { type: Array, default: () => [] },
@@ -434,18 +436,13 @@ export default {
     },
 
     breadcrumbLinks() {
-      let links =
-        this.parentPage && this.parentPage.path.path !== '/'
-          ? [{ url: '/', label: 'Home' }]
-          : []
-      if (this.parentPage) {
-        links.push({
-          url: this.parentPage.path.path,
-          label: this.parentPage.name || this.parentPage.title,
-        })
-      }
-
-      return links
+      return buildBreadcrumbLinks({
+        breadcrumbContext: this.breadcrumbContext,
+        parentPage: this.parentPage,
+        id: this.id,
+        path: this.path,
+        organization: this.organization,
+      })
     },
 
     publishDateTime() {