feat(breadcrumb): add part on last item

ovh · Oct 28, 2024 · 18d452f · 18d452f
1 parent af5a823
commit 18d452f
Show file tree

Hide file tree

Showing 5 changed files with 19 additions and 7 deletions.
diff --git a/.../ods/src/components/breadcrumb/src/components/ods-breadcrumb-item/ods-breadcrumb-item.tsx b/.../ods/src/components/breadcrumb/src/components/ods-breadcrumb-item/ods-breadcrumb-item.tsx
@@ -52,7 +52,10 @@ export class OdsBreadcrumbItem {
 
         {
           !this.isExpandable && (this.isLast
-            ? <span class="ods-breadcrumb-item__last" aria-current="page">
+            ? <span
+              aria-current="page"
+              class="ods-breadcrumb-item__last"
+              part="last">
               { this.label }
             </span>
             : <ods-link

diff --git a/packages/ods/src/components/breadcrumb/src/index.html b/packages/ods/src/components/breadcrumb/src/index.html
@@ -93,14 +93,19 @@
                          label="Link custom">
     </ods-breadcrumb-item>
 
-    <ods-breadcrumb-item href="#"
+    <ods-breadcrumb-item class="my-last"
+                         href="#"
                          label="Text">
     </ods-breadcrumb-item>
   </ods-breadcrumb>
   <style>
     .my-link::part(link) {
       color: green;
     }
+
+    .my-last::part(last) {
+      color: #ed733d;
+    }
   </style>
 </body>
 </html>
diff --git a/packages/storybook/stories/components/breadcrumb/breadcrumb.stories.ts b/packages/storybook/stories/components/breadcrumb/breadcrumb.stories.ts
@@ -102,15 +102,19 @@ export const CustomCSS: StoryObj = {
   </ods-breadcrumb-item>
   <ods-breadcrumb-item href="#" label="Basic">
   </ods-breadcrumb-item>
-  <ods-breadcrumb-item class="my-link" href="#" label="Custom">
+  <ods-breadcrumb-item class="my-item" href="#" label="Custom">
   </ods-breadcrumb-item>
-  <ods-breadcrumb-item href="#" label="Last">
+  <ods-breadcrumb-item class="my-item" href="#" label="Last">
   </ods-breadcrumb-item>
 </ods-breadcrumb>
 <style>
-  .my-link::part(link) {
+  .my-item::part(link) {
     color: #008000;
   }
+
+  .my-item::part(last) {
+    color: #ed733d;
+  }
 </style>
   `,
 };

diff --git a/packages/storybook/stories/components/breadcrumb/documentation.mdx b/packages/storybook/stories/components/breadcrumb/documentation.mdx
@@ -52,7 +52,7 @@ It has several usage :
     '- Put more than 4 imbrications inside a Breadcrumb, as the structure will be too complex',
   ]}
   dos={[
-    <span>- The first **Breadcrumb** element has to be a <StorybookLink kind="ODS Components/Link" label="Link" story="Documentation" /> to its preferential home page (with an <StorybookLink kind="ODS Components/Icon" label="Icon" story="Documentation" />, or with "Home" <StorybookLink kind="ODS Components/Text" label="Text" story="Documentation" /></span>,
+    <span>- The first Breadcrumb element has to be a <StorybookLink kind="ODS Components/Link" label="Link" story="Documentation" /> to its preferential home page (with an <StorybookLink kind="ODS Components/Icon" label="Icon" story="Documentation" />, or with "Home" <StorybookLink kind="ODS Components/Text" label="Text" story="Documentation" /></span>,
     '- Inherit page structure logic inside the Breadcrumb construction',
   ]}
 />

diff --git a/packages/storybook/stories/components/breadcrumb/technical-information.mdx b/packages/storybook/stories/components/breadcrumb/technical-information.mdx
@@ -22,7 +22,7 @@ The breadcrumb component wraps and applies style on the breadcrumb items contain
 
 You can directly add CSS classes on each item that you want to customize.
 
-If you want to go further and customize the item link directly, you can use the part `link`.
+If you want to go further and customize the items directly, you can use the part `link` or `last`.
 
 Custom CSS :