From c14334320f6869a4302be94c14774a6165dca43a Mon Sep 17 00:00:00 2001
From: Jason Smith <jason.smith@dpc.vic.gov.au>
Date: Wed, 14 Aug 2024 15:03:00 +1000
Subject: [PATCH 1/3] refactor(@dpc-sdp/ripple-ui-core): :recycle: rework
 breadcrumbs for 4+ terms

---
 .../components/breadcrumbs/RplBreadcrumbs.css | 24 +++++++--
 .../components/breadcrumbs/RplBreadcrumbs.vue | 52 +++++++++++++++----
 2 files changed, 64 insertions(+), 12 deletions(-)

diff --git a/packages/ripple-ui-core/src/components/breadcrumbs/RplBreadcrumbs.css b/packages/ripple-ui-core/src/components/breadcrumbs/RplBreadcrumbs.css
index fb376e9268..8a63c2c561 100644
--- a/packages/ripple-ui-core/src/components/breadcrumbs/RplBreadcrumbs.css
+++ b/packages/ripple-ui-core/src/components/breadcrumbs/RplBreadcrumbs.css
@@ -10,9 +10,9 @@
   display: inline-block;
   margin-left: var(--local-horizontal-offset);
   padding-top: calc(var(--rpl-sp-3) - var(--rpl-border-1));
-  padding-right: calc(var(--rpl-sp-5) - var(--rpl-border-1));
+  padding-right: calc(var(--rpl-sp-4) - var(--rpl-border-1));
   padding-bottom: calc(var(--rpl-sp-3) - var(--rpl-border-1));
-  padding-left: calc(var(--rpl-sp-5) - var(--rpl-border-1));
+  padding-left: calc(var(--rpl-sp-4) - var(--rpl-border-1));
   max-width: calc(100% - var(--local-horizontal-offset) * 2);
   overflow: hidden;
   text-overflow: ellipsis;
@@ -21,6 +21,8 @@
   @media (--rpl-bp-m) {
     --local-horizontal-offset: var(--rpl-sp-4);
 
+    padding-right: calc(var(--rpl-sp-5) - var(--rpl-border-1));
+    padding-left: calc(var(--rpl-sp-5) - var(--rpl-border-1));
     height: auto;
     overflow: visible;
     white-space: normal;
@@ -84,6 +86,22 @@
   &--beside-exit {
     --local-width-spacer: 124px;
 
-    max-width: calc(100% - var(--local-horizontal-offset) * 3 - var(--local-width-spacer));
+    max-width: calc(
+      100% - var(--local-horizontal-offset) * 3 - var(--local-width-spacer)
+    );
   }
 }
+
+.rpl-breadcrumbs__collapse-link::before {
+  content: '>';
+  display: inline;
+  padding: 0 var(--rpl-sp-2);
+}
+
+.rpl-breadcrumbs__collapse-link-trigger:hover {
+  text-decoration: underline;
+}
+
+.rpl-breadcrumbs__item--collapsed {
+  display: none;
+}
diff --git a/packages/ripple-ui-core/src/components/breadcrumbs/RplBreadcrumbs.vue b/packages/ripple-ui-core/src/components/breadcrumbs/RplBreadcrumbs.vue
index c226cbcb0f..b1f0ce968e 100644
--- a/packages/ripple-ui-core/src/components/breadcrumbs/RplBreadcrumbs.vue
+++ b/packages/ripple-ui-core/src/components/breadcrumbs/RplBreadcrumbs.vue
@@ -1,4 +1,5 @@
 <script setup lang="ts">
+import { ref } from 'vue'
 import RplTextLink from '../text-link/RplTextLink.vue'
 import {
   useRippleEvent,
@@ -38,6 +39,16 @@ const handleClick = (item, index) => {
     { global: true }
   )
 }
+
+const collapseInnerLinks = ref()
+collapseInnerLinks.value = props.items.length > 3
+
+const firstItem = (index: number) => index === 0
+const lastItem = (index: number) => index === props.items.length - 1
+
+const toggleCollapsed = () => {
+  collapseInnerLinks.value = 0
+}
 </script>
 
 <template>
@@ -49,26 +60,49 @@ const handleClick = (item, index) => {
       'rpl-breadcrumbs--beside-exit': props.besideQuickExit
     }"
   >
-    <ol v-if="items.length > 0" class="rpl-breadcrumbs__items rpl-type-p">
+    <ol
+      v-if="items.length > 0"
+      :class="[
+        'rpl-breadcrumbs__items',
+        'rpl-type-p-small',
+        { 'rpl-breadcrumbs__items--collapsed': collapseInnerLinks }
+      ]"
+    >
       <li
         v-for="(item, index) of items"
         :key="index"
-        :class="{
-          'rpl-breadcrumbs__item': true,
-          'rpl-breadcrumbs__item--parent': index === items.length - 2
-        }"
+        :class="[
+          'rpl-breadcrumbs__item',
+          { 'rpl-breadcrumbs__item--parent': index === items.length - 1 },
+          {
+            'rpl-breadcrumbs__item--first':
+              firstItem(index) && collapseInnerLinks
+          },
+          {
+            'rpl-breadcrumbs__item--collapsed':
+              !firstItem(index) && !lastItem(index) && collapseInnerLinks
+          }
+        ]"
       >
         <RplTextLink
-          v-if="index < items.length - 1"
           :url="item.url"
           :theme="false"
           class="rpl-breadcrumbs__item-link"
           @click="() => handleClick(item, index)"
           >{{ item.text }}</RplTextLink
         >
-        <span v-else class="rpl-breadcrumbs__item--current">{{
-          item.text
-        }}</span>
+        <span
+          v-if="firstItem(index) && collapseInnerLinks"
+          class="rpl-breadcrumbs__collapse-link"
+        >
+          <RplTextLink
+            url=""
+            :theme="false"
+            class="rpl-breadcrumbs__collapse-link-trigger"
+            @click.prevent="() => toggleCollapsed()"
+            >&hellip;</RplTextLink
+          >
+        </span>
       </li>
     </ol>
   </nav>

From 94f38f1227ac401faee7e62f9479a3696b82500f Mon Sep 17 00:00:00 2001
From: Jason Smith <jason.smith@dpc.vic.gov.au>
Date: Tue, 17 Sep 2024 17:00:03 +1000
Subject: [PATCH 2/3] refactor(@dpc-sdp/ripple-ui-core): :recycle: improve
 accessibility

---
 .../src/components/breadcrumbs/RplBreadcrumbs.vue     | 11 ++++++-----
 1 file changed, 6 insertions(+), 5 deletions(-)

diff --git a/packages/ripple-ui-core/src/components/breadcrumbs/RplBreadcrumbs.vue b/packages/ripple-ui-core/src/components/breadcrumbs/RplBreadcrumbs.vue
index b1f0ce968e..324334038a 100644
--- a/packages/ripple-ui-core/src/components/breadcrumbs/RplBreadcrumbs.vue
+++ b/packages/ripple-ui-core/src/components/breadcrumbs/RplBreadcrumbs.vue
@@ -95,13 +95,14 @@ const toggleCollapsed = () => {
           v-if="firstItem(index) && collapseInnerLinks"
           class="rpl-breadcrumbs__collapse-link"
         >
-          <RplTextLink
-            url=""
-            :theme="false"
-            class="rpl-breadcrumbs__collapse-link-trigger"
+          <button
+            class="rpl-text-link rpl-u-focusable-inline rpl-breadcrumbs__collapse-link-trigger"
+            type="button"
+            aria-label="Expand hidden breadcrumbs"
             @click.prevent="() => toggleCollapsed()"
-            >&hellip;</RplTextLink
           >
+            &hellip;
+          </button>
         </span>
       </li>
     </ol>

From 14f31aa0dbc82c4e125d0b1f981cf42187b68377 Mon Sep 17 00:00:00 2001
From: Jason Smith <jason.smith@dpc.vic.gov.au>
Date: Wed, 25 Sep 2024 16:31:19 +1000
Subject: [PATCH 3/3] refactor(@dpc-sdp/ripple-ui-core): :recycle: use prop and
 featureflag

---
 packages/ripple-tide-api/types.d.ts           |  4 ++++
 .../components/breadcrumbs/RplBreadcrumbs.vue | 19 ++++++++++++++++---
 2 files changed, 20 insertions(+), 3 deletions(-)

diff --git a/packages/ripple-tide-api/types.d.ts b/packages/ripple-tide-api/types.d.ts
index 378076d319..72a4731461 100644
--- a/packages/ripple-tide-api/types.d.ts
+++ b/packages/ripple-tide-api/types.d.ts
@@ -304,6 +304,10 @@ export interface IRplFeatureFlags {
       [key: string]: boolean
     }
   }
+  /**
+   * @description Collapse inner links in breadcrumbs
+   */
+  breadcrumbsCollapseInnerLinks?: boolean
   /**
    * @description Custom flags
    */
diff --git a/packages/ripple-ui-core/src/components/breadcrumbs/RplBreadcrumbs.vue b/packages/ripple-ui-core/src/components/breadcrumbs/RplBreadcrumbs.vue
index 324334038a..3e99df8446 100644
--- a/packages/ripple-ui-core/src/components/breadcrumbs/RplBreadcrumbs.vue
+++ b/packages/ripple-ui-core/src/components/breadcrumbs/RplBreadcrumbs.vue
@@ -1,10 +1,11 @@
 <script setup lang="ts">
-import { ref } from 'vue'
+import { inject, ref } from 'vue'
 import RplTextLink from '../text-link/RplTextLink.vue'
 import {
   useRippleEvent,
   rplEventPayload
 } from '../../composables/useRippleEvent'
+import type { IRplFeatureFlags } from '@dpc-sdp/ripple-tide-api/types'
 
 interface IRplBreadcrumbsItem {
   text: string
@@ -14,11 +15,13 @@ interface IRplBreadcrumbsItem {
 interface Props {
   items: IRplBreadcrumbsItem[]
   besideQuickExit?: boolean
+  displayBeforeCollapse?: number
 }
 
 const props = withDefaults(defineProps<Props>(), {
   items: () => [],
-  besideQuickExit: false
+  besideQuickExit: false,
+  displayBeforeCollapse: 3
 })
 
 const emit = defineEmits<{
@@ -27,6 +30,13 @@ const emit = defineEmits<{
 
 const { emitRplEvent } = useRippleEvent('rpl-breadcrumbs', emit)
 
+const { breadcrumbsCollapseInnerLinks }: IRplFeatureFlags = inject(
+  'featureFlags',
+  {
+    breadcrumbsCollapseInnerLinks: false
+  }
+)
+
 const handleClick = (item, index) => {
   emitRplEvent(
     'navigate',
@@ -41,7 +51,10 @@ const handleClick = (item, index) => {
 }
 
 const collapseInnerLinks = ref()
-collapseInnerLinks.value = props.items.length > 3
+collapseInnerLinks.value =
+  props.items.length > breadcrumbsCollapseInnerLinks!
+    ? props.displayBeforeCollapse
+    : 0
 
 const firstItem = (index: number) => index === 0
 const lastItem = (index: number) => index === props.items.length - 1