Ajustements sur le composant breadcrumb

incubateur-ademe · Jul 2, 2024 · 243715e · 243715e
1 parent 653981d
commit 243715e
Show file tree

Hide file tree

Showing 3 changed files with 55 additions and 9 deletions.
diff --git a/packages/ui/src/design-system/Breadcrumbs/Breadcrumbs.stories.tsx b/packages/ui/src/design-system/Breadcrumbs/Breadcrumbs.stories.tsx
@@ -91,3 +91,13 @@ export const Sizes: Story = {
     );
   },
 };
+
+export const ReadOnlyMode: Story = {
+  render: () => {
+    return (
+      <div className="flex flex-col gap-8">
+        <Breadcrumbs buttons={buttons} />
+      </div>
+    );
+  },
+};
diff --git a/packages/ui/src/design-system/Breadcrumbs/Breadcrumbs.tsx b/packages/ui/src/design-system/Breadcrumbs/Breadcrumbs.tsx
@@ -11,7 +11,7 @@ const buttonSizeToIconSize: Record<ButtonSize, IconSize> = {
 
 type BreadcrumbsProps = {
   /** Liste des boutons à afficher dans le fil d'ariane */
-  buttons: {
+  buttons?: {
     label: string;
     href?: string;
     onClick?: () => void;
@@ -25,10 +25,18 @@ type BreadcrumbsProps = {
 /**
  * Fil d'ariane, avec liens ou boutons
  */
-export const Breadcrumbs = ({buttons, size, onClick}: BreadcrumbsProps) => {
+export const Breadcrumbs = ({
+  buttons,
+  size = 'md',
+  onClick,
+}: BreadcrumbsProps) => {
+  const readOnlyMode =
+    buttons.filter(button => button.href || button.onClick).length === 0 &&
+    !onClick;
+
   return (
     <div className="flex flex-wrap gap-x-1 gap-y-0.5">
-      {buttons.map((button, index) => {
+      {(buttons ?? []).map((button, index) => {
         const isLastElement = index === buttons.length - 1;
 
         return (
@@ -37,13 +45,15 @@ export const Breadcrumbs = ({buttons, size, onClick}: BreadcrumbsProps) => {
             className="flex items-center shrink-0 gap-x-1"
           >
             <Button
-              disabled={isLastElement}
+              disabled={isLastElement && !readOnlyMode}
               className={classNames(
                 'font-normal border-none hover:!pb-px text-left',
                 {
-                  '!cursor-default !text-primary-9': isLastElement,
-                  '!text-grey-6 hover:!text-primary-9 transition':
-                    !isLastElement,
+                  '!cursor-default': isLastElement || readOnlyMode,
+                  '!text-primary-9': isLastElement && !readOnlyMode,
+                  '!text-grey-6': !isLastElement || readOnlyMode,
+                  'hover:!text-primary-9 transition':
+                    !isLastElement && !readOnlyMode,
                 }
               )}
               variant="underlined"

diff --git a/packages/ui/src/design-system/Breadcrumbs/__snapshots__/Breadcrumbs.stories.tsx.snap b/packages/ui/src/design-system/Breadcrumbs/__snapshots__/Breadcrumbs.stories.tsx.snap
@@ -7,14 +7,14 @@ exports[`design-system/Breadcrumbs Default smoke-test 1`] = `
       <button class="w-fit flex items-center border-solid group gap-2 cursor-pointer border-b border-t-0 border-x-0 !p-px font-medium hover:border-b-2 hover:!pb-0 text-primary-8 !bg-transparent border-primary-7 text-base py-3 px-6 font-normal border-none hover:!pb-px text-left !text-grey-6 hover:!text-primary-9 transition">
         Plan Vélo 2020 - 2024
       </button>
-      <span class="ri-arrow-right-s-line font-normal text-center h-5 w-5 text-[1.25rem] leading-[1.25rem] text-grey-8">
+      <span class="ri-arrow-right-s-line font-normal text-center h-6 w-6 text-[1.5rem] leading-[1.5rem] text-grey-8">
       </span>
     </div>
     <div class="flex items-center shrink-0 gap-x-1">
       <button class="w-fit flex items-center border-solid group gap-2 cursor-pointer border-b border-t-0 border-x-0 !p-px font-medium hover:border-b-2 hover:!pb-0 text-primary-8 !bg-transparent border-primary-7 text-base py-3 px-6 font-normal border-none hover:!pb-px text-left !text-grey-6 hover:!text-primary-9 transition">
         0.0 Etudions un scénario de rupture pour atteindre la neutralité carbone en 2050
       </button>
-      <span class="ri-arrow-right-s-line font-normal text-center h-5 w-5 text-[1.25rem] leading-[1.25rem] text-grey-8">
+      <span class="ri-arrow-right-s-line font-normal text-center h-6 w-6 text-[1.5rem] leading-[1.5rem] text-grey-8">
       </span>
     </div>
     <div class="flex items-center shrink-0 gap-x-1">
@@ -31,6 +31,32 @@ exports[`design-system/Breadcrumbs Default smoke-test 1`] = `
 </div>
 `;
 
+exports[`design-system/Breadcrumbs ReadOnlyMode smoke-test 1`] = `
+<div class="flex flex-col gap-8">
+  <div class="flex flex-wrap gap-x-1 gap-y-0.5">
+    <div class="flex items-center shrink-0 gap-x-1">
+      <button class="w-fit flex items-center border-solid group gap-2 cursor-pointer border-b border-t-0 border-x-0 !p-px font-medium hover:border-b-2 hover:!pb-0 text-primary-8 !bg-transparent border-primary-7 text-base py-3 px-6 font-normal border-none hover:!pb-px text-left !cursor-default !text-grey-6">
+        Plan Vélo 2020 - 2024
+      </button>
+      <span class="ri-arrow-right-s-line font-normal text-center h-6 w-6 text-[1.5rem] leading-[1.5rem] text-grey-8">
+      </span>
+    </div>
+    <div class="flex items-center shrink-0 gap-x-1">
+      <button class="w-fit flex items-center border-solid group gap-2 cursor-pointer border-b border-t-0 border-x-0 !p-px font-medium hover:border-b-2 hover:!pb-0 text-primary-8 !bg-transparent border-primary-7 text-base py-3 px-6 font-normal border-none hover:!pb-px text-left !cursor-default !text-grey-6">
+        0.0 Etudions un scénario de rupture pour atteindre la neutralité carbone en 2050
+      </button>
+      <span class="ri-arrow-right-s-line font-normal text-center h-6 w-6 text-[1.5rem] leading-[1.5rem] text-grey-8">
+      </span>
+    </div>
+    <div class="flex items-center shrink-0 gap-x-1">
+      <button class="w-fit flex items-center border-solid group gap-2 cursor-pointer border-b border-t-0 border-x-0 !p-px font-medium hover:border-b-2 hover:!pb-0 text-primary-8 !bg-transparent border-primary-7 text-base py-3 px-6 font-normal border-none hover:!pb-px text-left !cursor-default !text-grey-6">
+        Etudions un scénario de rupture pour la période 2030-2050
+      </button>
+    </div>
+  </div>
+</div>
+`;
+
 exports[`design-system/Breadcrumbs Sizes smoke-test 1`] = `
 <div class="flex flex-col gap-8">
   <div class="flex flex-wrap gap-x-1 gap-y-0.5">