From 82fc682581b881e4d9bf87b5f17a7c13b857e971 Mon Sep 17 00:00:00 2001
From: David Featherston <david@lambry.com>
Date: Fri, 31 Jan 2025 16:58:52 +1100
Subject: [PATCH] feat(@dpc-sdp/ripple-ui-core): allow current page class and
 dir to be set in breadcrumbs

---
 .../test/features/landingpage/languages.feature        |  2 ++
 .../test/fixtures/landingpage/languages-ar.json        |  2 +-
 .../test/fixtures/landingpage/languages-ko.json        |  2 +-
 packages/nuxt-ripple/components/TideBreadcrumbs.vue    |  6 +++++-
 .../src/components/breadcrumbs/RplBreadcrumbs.vue      | 10 +++++++++-
 5 files changed, 18 insertions(+), 4 deletions(-)

diff --git a/examples/nuxt-app/test/features/landingpage/languages.feature b/examples/nuxt-app/test/features/landingpage/languages.feature
index 9ff1308af2..9a3c8ef44d 100644
--- a/examples/nuxt-app/test/features/landingpage/languages.feature
+++ b/examples/nuxt-app/test/features/landingpage/languages.feature
@@ -23,6 +23,7 @@ Feature: Languages
     When I visit the page "/arabic-page"
     Then the section ".rpl-header" should be display "rtl" in "ar" with the font "Noto Kufi Arabic"
     And the section "#rpl-main" should be display "rtl" in "ar" with the font "Noto Kufi Arabic"
+    And the section ".rpl-breadcrumbs__item:last-child" should be display "rtl" in "ar" with the font "Noto Kufi Arabic"
     And the html language should be "ar"
 
   @mockserver
@@ -31,4 +32,5 @@ Feature: Languages
     When I visit the page "/korean-page"
     Then the section ".rpl-header" should be display "ltr" in "ko" with the font "Noto Sans KR"
     And the section "#rpl-main" should be display "ltr" in "ko" with the font "Noto Sans KR"
+    And the section ".rpl-breadcrumbs__item:last-child" should be display "ltr" in "ko" with the font "Noto Sans KR"
     And the html language should be "ko"
diff --git a/examples/nuxt-app/test/fixtures/landingpage/languages-ar.json b/examples/nuxt-app/test/fixtures/landingpage/languages-ar.json
index 150f0b8f3b..fbd12c3ce9 100644
--- a/examples/nuxt-app/test/fixtures/landingpage/languages-ar.json
+++ b/examples/nuxt-app/test/fixtures/landingpage/languages-ar.json
@@ -1,5 +1,5 @@
 {
-  "title": "Demo Landing Page",
+  "title": "مزايا رياض الأطفال",
   "changed": "2022-11-02T12:47:29+11:00",
   "created": "2022-11-02T12:47:29+11:00",
   "type": "landing_page",
diff --git a/examples/nuxt-app/test/fixtures/landingpage/languages-ko.json b/examples/nuxt-app/test/fixtures/landingpage/languages-ko.json
index 93c19b78cd..c2ef4bcf71 100644
--- a/examples/nuxt-app/test/fixtures/landingpage/languages-ko.json
+++ b/examples/nuxt-app/test/fixtures/landingpage/languages-ko.json
@@ -1,5 +1,5 @@
 {
-  "title": "Demo Landing Page",
+  "title": "지역 사회 서비스, 계약업체 청소 및 경비 산업의 빅토리아주",
   "changed": "2022-11-02T12:47:29+11:00",
   "created": "2022-11-02T12:47:29+11:00",
   "type": "landing_page",
diff --git a/packages/nuxt-ripple/components/TideBreadcrumbs.vue b/packages/nuxt-ripple/components/TideBreadcrumbs.vue
index 29425be05a..1503296fb1 100644
--- a/packages/nuxt-ripple/components/TideBreadcrumbs.vue
+++ b/packages/nuxt-ripple/components/TideBreadcrumbs.vue
@@ -4,11 +4,13 @@
     :items="breadcrumbs"
     :besideQuickExit="besideQuickExit"
     data-cy="breadcrumbs"
+    :current-class="language"
+    :current-dir="direction"
   />
 </template>
 
 <script setup lang="ts">
-import { computed, toRaw, unref } from 'vue'
+import { computed, inject, toRaw, unref } from 'vue'
 import { getBreadcrumbs } from '#imports'
 
 interface IRplBreadcrumbsItem {
@@ -32,6 +34,8 @@ const props = withDefaults(defineProps<Props>(), {
   besideQuickExit: false
 })
 
+const { direction, language } = inject('language')
+
 const breadcrumbs = computed(() => {
   return props.items.length > 0
     ? props.items
diff --git a/packages/ripple-ui-core/src/components/breadcrumbs/RplBreadcrumbs.vue b/packages/ripple-ui-core/src/components/breadcrumbs/RplBreadcrumbs.vue
index b2ade0ed53..6f4edae165 100644
--- a/packages/ripple-ui-core/src/components/breadcrumbs/RplBreadcrumbs.vue
+++ b/packages/ripple-ui-core/src/components/breadcrumbs/RplBreadcrumbs.vue
@@ -17,13 +17,17 @@ interface Props {
   besideQuickExit?: boolean
   displayBeforeCollapse?: number
   collapse?: boolean
+  currentClass?: string
+  currentDir?: string
 }
 
 const props = withDefaults(defineProps<Props>(), {
   items: () => [],
   besideQuickExit: false,
   displayBeforeCollapse: 3,
-  collapse: false
+  collapse: false,
+  currentClass: undefined,
+  currentDir: undefined
 })
 
 const emit = defineEmits<{
@@ -105,8 +109,12 @@ const toggleCollapsed = () => {
                 !firstItem(index) &&
                 !secondLastItem(index) &&
                 collapseInnerLinks
+            },
+            {
+              [currentClass]: lastItem(index) && currentClass
             }
           ]"
+          :dir="lastItem(index) ? currentDir : undefined"
         >
           <RplTextLink
             v-if="!lastItem(index) || collapseInnerLinks"