[SD-314] Breadcrumbs enhancement

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
    */

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;
+}

packages/ripple-ui-core/src/components/breadcrumbs/RplBreadcrumbs.vue

@@ -1,9 +1,11 @@
 <script setup lang="ts">
+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
@@ -13,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<{
@@ -26,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',
@@ -38,6 +49,19 @@ const handleClick = (item, index) => {
     { global: true }
   )
 }
+
+const collapseInnerLinks = ref()
+collapseInnerLinks.value =
+  props.items.length > breadcrumbsCollapseInnerLinks!
+    ? props.displayBeforeCollapse
+    : 0
+
+const firstItem = (index: number) => index === 0
+const lastItem = (index: number) => index === props.items.length - 1
+
+const toggleCollapsed = () => {
+  collapseInnerLinks.value = 0
+}
 </script>
 
 <template>
@@ -49,26 +73,50 @@ 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"
+        >
+          <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;
+          </button>
+        </span>
       </li>
     </ol>
   </nav>