Merge pull request #1436 from dpc-sdp/feature/breadcrumb-lang

[SD-584] breadcrumb language support
dpc-sdp · Feb 3, 2025 · 82ee7a9 · 82ee7a9
2 parents 87cf5ec + 82fc682
commit 82ee7a9
Show file tree

Hide file tree

Showing 5 changed files with 18 additions and 4 deletions.
diff --git 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
@@ -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
@@ -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
@@ -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
@@ -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"