@roadtrip/components 3.32.4 → 3.32.5

package/dist/collection/components/button-floating/button-floating.stories.js

@@ -3,7 +3,7 @@ import { ifDefined } from 'lit/directives/if-defined.js';
 import { unsafeHTML } from 'lit-html/directives/unsafe-html.js';
 
 export default {
-  title: 'Forms/Button floating',
+  title: 'Forms/Button Floating',
   component: 'road-button-floating',
   parameters: {
     actions: {
@@ -12,57 +12,66 @@ export default {
   },
   argTypes: {
     href: {
-      control: {
-        type: null,
-      },
+      control: { type: null },
+      description: 'Defines the hyperlink reference (only applicable if the button acts as a link).',
     },
     position: {
       options: ['left', 'right', 'center'],
-      control: {
-        type: 'radio',
+      control: { type: 'radio' },
+      description: 'Defines the floating button position.',
+      table: {
+        defaultValue: { summary: 'right' },
       },
     },
     rel: {
-      control: {
-        type: null,
-      },
+      control: { type: null },
+      description: 'Specifies the relationship between the current document and the linked document.',
     },
     target: {
-      control: {
-        type: null,
-      },
+      control: { type: null },
+      description: 'Specifies where to open the linked document (only applicable if `href` is provided).',
     },
     start: {
       control: 'text',
+      description: 'Slot for an icon or content at the **start** of the button.',
     },
     ' ': {
       control: 'text',
+      description: 'Label or main content inside the button.',
     },
     roadblur: {
-      control: {
-        type: null,
+      action: 'roadblur',
+      description: 'Triggered when the button loses focus.',
+      table: {
+        category: 'Events',
+        type: { summary: 'CustomEvent' },
       },
     },
     roadfocus: {
-      control: {
-        type: null,
+      action: 'roadfocus',
+      description: 'Triggered when the button gains focus.',
+      table: {
+        category: 'Events',
+        type: { summary: 'CustomEvent' },
       },
     },
     native: {
-      control: {
-        type: null,
-      },
+      control: { type: null },
+      description: 'Internal native button element reference (if applicable).',
     },
   },
   args: {
-    start: ``,
+    start: '',
     position: 'right',
-    ' ': `Label`,
+    ' ': 'Label',
   },
 };
 
 const Template = (args) => html`
-<road-button-floating position="${ifDefined(args.position)}" tabindex="0">
+<road-button-floating 
+  position="${ifDefined(args.position)}" 
+  tabindex="0"
+>
   ${unsafeHTML(args.start)}
   ${unsafeHTML(args[' '])}
 </road-button-floating>
@@ -72,4 +81,4 @@ export const Playground = Template.bind({});
 Playground.args = {
   start: `<road-icon slot="start" name="shopping-cart-add" role="button"></road-icon>`,
   ' ': `Add to cart`,
-};
+};

package/dist/collection/components/card/card.stories.js

@@ -15,46 +15,48 @@ export default {
   argTypes: {
     elevation: {
       options: ['none', 'lowest', 'average'],
-      control: {
-        type: 'select',
+      control: { type: 'select' },
+      description: 'Defines the elevation (shadow effect) of the card.',
+      table: {
+        defaultValue: { summary: 'none' },
       },
     },
   },
   args: {
-    elevation: null,
+    elevation: 'none',
   },
 };
 
-export const Value = (args) => html`
+const Template = (args) => html`
 <road-grid>
   <road-row>
     <road-col class="col-4 col-md-3 col-lg-2">
-      <road-card button value="125" elevation="${ifDefined(args.elevation)}">
+      <road-card button value="125" elevation="${ifDefined(args.elevation)}" @roadcardclick=${args.roadcardclick}>
         <road-label>125</road-label>
       </road-card>
     </road-col>
     <road-col class="col-4 col-md-3 col-lg-2">
-      <road-card button value="135" elevation="${ifDefined(args.elevation)}">
+      <road-card button value="135" elevation="${ifDefined(args.elevation)}" @roadcardclick=${args.roadcardclick}>
         <road-label>135</road-label>
       </road-card>
     </road-col>
     <road-col class="col-4 col-md-3 col-lg-2">
-      <road-card button value="145" elevation="${ifDefined(args.elevation)}">
+      <road-card button value="145" elevation="${ifDefined(args.elevation)}" @roadcardclick=${args.roadcardclick}>
         <road-label>145</road-label>
       </road-card>
     </road-col>
     <road-col class="col-4 col-md-3 col-lg-2">
-      <road-card button value="155" elevation="${ifDefined(args.elevation)}">
+      <road-card button value="155" elevation="${ifDefined(args.elevation)}" @roadcardclick=${args.roadcardclick}>
         <road-label>155</road-label>
       </road-card>
     </road-col>
     <road-col class="col-4 col-md-3 col-lg-2">
-      <road-card button value="165" elevation="${ifDefined(args.elevation)}">
+      <road-card button value="165" elevation="${ifDefined(args.elevation)}" @roadcardclick=${args.roadcardclick}>
         <road-label>165</road-label>
       </road-card>
     </road-col>
     <road-col class="col-4 col-md-3 col-lg-2">
-      <road-card button value="175" elevation="${ifDefined(args.elevation)}">
+      <road-card button value="175" elevation="${ifDefined(args.elevation)}" @roadcardclick=${args.roadcardclick}>
         <road-label>175</road-label>
       </road-card>
     </road-col>
@@ -62,29 +64,34 @@ export const Value = (args) => html`
 </road-grid>
 `;
 
-export const vehicle = (args) => html`
+export const Value = Template.bind({});
+Value.args = {
+  elevation: 'average',
+};
+
+export const Vehicle = (args) => html`
 <road-grid>
   <road-row>
     <road-col class="col-6 col-md-4 col-lg-3">
-      <road-card button value="car" elevation="${ifDefined(args.elevation)}">
+      <road-card button value="car" elevation="${ifDefined(args.elevation)}" @roadcardclick=${args.roadcardclick}>
         <road-icon name="vehicle-car" size="3x" role="img"></road-icon>
         <road-label>Car</road-label>
       </road-card>
     </road-col>
     <road-col class="col-6 col-md-4 col-lg-3">
-      <road-card button value="4x4" elevation="${ifDefined(args.elevation)}">
+      <road-card button value="4x4" elevation="${ifDefined(args.elevation)}" @roadcardclick=${args.roadcardclick}>
         <road-icon name="vehicle-suv" size="3x" role="img"></road-icon>
         <road-label>4x4</road-label>
       </road-card>
     </road-col>
     <road-col class="col-6 col-md-4 col-lg-3">
-      <road-card button value="truck" elevation="${ifDefined(args.elevation)}">
+      <road-card button value="truck" elevation="${ifDefined(args.elevation)}" @roadcardclick=${args.roadcardclick}>
         <road-icon name="vehicle-pickup-van" size="3x" role="img"></road-icon>
         <road-label>Truck</road-label>
       </road-card>
     </road-col>
     <road-col class="col-6 col-md-4 col-lg-3">
-      <road-card button value="bike" elevation="${ifDefined(args.elevation)}">
+      <road-card button value="bike" elevation="${ifDefined(args.elevation)}" @roadcardclick=${args.roadcardclick}>
         <road-icon name="vehicle-moto" size="3x" role="img"></road-icon>
         <road-label>Bike</road-label>
       </road-card>
@@ -92,3 +99,6 @@ export const vehicle = (args) => html`
   </road-row>
 </road-grid>
 `;
+Vehicle.args = {
+  elevation: 'average',
+};

package/dist/collection/components/carousel/carousel.stories.js

@@ -26,328 +26,120 @@ export default {
         'roadslidereachstart',
         'roadslidereachend',
         'roadslidetouchstart',
-        'roadslidetouchend'
+        'roadslidetouchend',
       ],
     },
     docs: {
       description: {
-        component: `The Carousel component is using child components named \`carousel-item\` to create different slides, so the content of each slide need to be in a \`carousel-item\` component.`,
+        component: `The Carousel component uses child components named \`road-carousel-item\` to create different slides, so the content of each slide needs to be inside a \`road-carousel-item\` component.`,
       },
     },
   },
   argTypes: {
     pager: {
       control: 'boolean',
+      description: 'Shows pagination bullets below the carousel.',
     },
     arrows: {
       control: 'boolean',
+      description: 'Displays navigation arrows for manual slide transitions.',
     },
     options: {
       control: 'object',
+      description: 'Configuration object for the Swiper instance.',
     },
     ' ': {
       control: 'text',
+      description: 'Content inside the carousel, usually multiple `<road-carousel-item>` elements.',
     },
-    getActiveIndex : {
-      description: 'Get the index of the active slide.',
-      table: {
-        category: 'methods',
-        type: {
-          summary: 'getActiveIndex() => Promise<number>',
-        },
-      },
-      defaultValue: {
-        summary: null,
-      },
-    },
-    getPreviousIndex : {
-      description: 'Get the index of the previous slide.',
-      table: {
-        category: 'methods',
-        type: {
-          summary: 'etPreviousIndex() => Promise<number>',
-        },
-      },
-      defaultValue: {
-        summary: null,
-      },
-    },
-    getSwiper : {
-      description: 'Get the Swiper instance.\nUse this to access the full Swiper API.\nSee https://idangero.us/swiper/api/ for all API options.',
-      table: {
-        category: 'methods',
-        type: {
-          summary: 'getSwiper() => Promise<any>',
-        },
-      },
-      defaultValue: {
-        summary: null,
-      },
-    },
-    isBeginning : {
-      description: 'Get whether or not the current slide is the first slide.',
-      table: {
-        category: 'methods',
-        type: {
-          summary: 'isBeginning() => Promise<boolean>',
-        },
-      },
-      defaultValue: {
-        summary: null,
-      },
-    },
-    isEnd : {
-      description: 'Get whether or not the current slide is the last slide.',
-      table: {
-        category: 'methods',
-        type: {
-          summary: 'isEnd() => Promise<boolean>',
-        },
-      },
-      defaultValue: {
-        summary: null,
-      },
-    },
-    length : {
-      description: 'Get the total number of slides.',
-      table: {
-        category: 'methods',
-        type: {
-          summary: 'length() => Promise<number>',
-        },
-      },
-      defaultValue: {
-        summary: null,
-      },
-    },
-    lockSwipeToNext : {
-      description: 'Lock or unlock the ability to slide to the next slide.',
-      table: {
-        category: 'methods',
-        type: {
-          summary: 'lockSwipeToNext(lock: boolean) => Promise<void>',
-        },
-      },
-      defaultValue: {
-        summary: null,
-      },
-    },
-    lockSwipeToPrev : {
-      description: 'Lock or unlock the ability to slide to the previous slide.',
-      table: {
-        category: 'methods',
-        type: {
-          summary: 'lockSwipeToPrev(lock: boolean) => Promise<void>',
-        },
-      },
-      defaultValue: {
-        summary: null,
-      },
-    },
-    lockSwipes : {
-      description: 'Lock or unlock the ability to slide to the next or previous slide.',
-      table: {
-        category: 'methods',
-        type: {
-          summary: 'lockSwipes(lock: boolean) => Promise<void>',
-        },
-      },
-      defaultValue: {
-        summary: null,
-      },
-    },
-    slideNext : {
-      description: 'Transition to the next slide.',
-      table: {
-        category: 'methods',
-        type: {
-          summary: 'slideNext(speed?: number | undefined, runCallbacks?: boolean | undefined) => Promise<void>',
-        },
-      },
-      defaultValue: {
-        summary: null,
-      },
-    },
-    slidePrev : {
-      description: 'Transition to the previous slide.',
-      table: {
-        category: 'methods',
-        type: {
-          summary: 'slidePrev(speed?: number | undefined, runCallbacks?: boolean | undefined) => Promise<void>',
-        },
-      },
-      defaultValue: {
-        summary: null,
-      },
-    },
-    slideTo : {
-      description: 'Transition to the specified slide.',
-      table: {
-        category: 'methods',
-        type: {
-          summary: 'slideTo(index: number, speed?: number | undefined, runCallbacks?: boolean | undefined) => Promise<void>',
-        },
-      },
-      defaultValue: {
-        summary: null,
-      },
+    // 🔹 Méthodes accessibles depuis Storybook
+    getActiveIndex: {
+      description: 'Returns the index of the active slide.',
+      table: { category: 'Methods', type: { summary: '() => Promise<number>' } },
     },
-    startAutoplay : {
-      description: 'Start auto play.',
-      table: {
-        category: 'methods',
-        type: {
-          summary: 'startAutoplay() => Promise<void>',
-        },
-      },
-      defaultValue: {
-        summary: null,
-      },
-    },
-    stopAutoplay : {
-      description: 'Stop auto play.',
-      table: {
-        category: 'methods',
-        type: {
-          summary: 'stopAutoplay() => Promise<void>',
-        },
-      },
-      defaultValue: {
-        summary: null,
-      },
-    },
-    update : {
-      description: 'Update the underlying slider implementation. Call this if you\'ve added or removed\nchild slides.',
-      table: {
-        category: 'methods',
-        type: {
-          summary: 'update() => Promise<void>',
-        },
-      },
-      defaultValue: {
-        summary: null,
-      },
+    getPreviousIndex: {
+      description: 'Returns the index of the previous slide.',
+      table: { category: 'Methods', type: { summary: '() => Promise<number>' } },
     },
-    updateAutoHeight : {
-      description: 'Force swiper to update its height (when autoHeight is enabled) for the duration\nequal to \'speed\' parameter.',
-      table: {
-        category: 'methods',
-        type: {
-          summary: 'updateAutoHeight(speed?: number | undefined) => Promise<void>',
-        },
-      },
-      defaultValue: {
-        summary: null,
-      },
-    },
-    roadslidesdidload: {
-      control: {
-        type: null,
-      },
-    },
-    roadslidetap: {
-      control: {
-        type: null,
-      },
-    },
-    roadslidedoubletap: {
-      control: {
-        type: null,
-      },
+    getSwiper: {
+      description: 'Returns the Swiper instance. See Swiper API for more details.',
+      table: { category: 'Methods', type: { summary: '() => Promise<any>' } },
     },
-    roadslidewillchange: {
-      control: {
-        type: null,
-      },
+    isBeginning: {
+      description: 'Checks if the current slide is the first slide.',
+      table: { category: 'Methods', type: { summary: '() => Promise<boolean>' } },
     },
-    roadslidedidchange: {
-      control: {
-        type: null,
-      },
+    isEnd: {
+      description: 'Checks if the current slide is the last slide.',
+      table: { category: 'Methods', type: { summary: '() => Promise<boolean>' } },
     },
-    roadslidenextstart: {
-      control: {
-        type: null,
-      },
+    length: {
+      description: 'Returns the total number of slides.',
+      table: { category: 'Methods', type: { summary: '() => Promise<number>' } },
     },
-    roadslideprevstart: {
-      control: {
-        type: null,
-      },
+    lockSwipeToNext: {
+      description: 'Locks the ability to slide to the next slide.',
+      table: { category: 'Methods', type: { summary: '(lock: boolean) => Promise<void>' } },
     },
-    roadslidenextend: {
-      control: {
-        type: null,
-      },
+    lockSwipeToPrev: {
+      description: 'Locks the ability to slide to the previous slide.',
+      table: { category: 'Methods', type: { summary: '(lock: boolean) => Promise<void>' } },
     },
-    roadslideprevend: {
-      control: {
-        type: null,
-      },
+    lockSwipes: {
+      description: 'Locks the ability to swipe in either direction.',
+      table: { category: 'Methods', type: { summary: '(lock: boolean) => Promise<void>' } },
     },
-    roadslidetransitionstart: {
-      control: {
-        type: null,
-      },
+    slideNext: {
+      description: 'Transitions to the next slide.',
+      table: { category: 'Methods', type: { summary: '(speed?: number, runCallbacks?: boolean) => Promise<void>' } },
     },
-    roadslidetransitionend: {
-      control: {
-        type: null,
-      },
+    slidePrev: {
+      description: 'Transitions to the previous slide.',
+      table: { category: 'Methods', type: { summary: '(speed?: number, runCallbacks?: boolean) => Promise<void>' } },
     },
-    roadslidedrag: {
-      control: {
-        type: null,
-      },
+    slideTo: {
+      description: 'Transitions to a specified slide index.',
+      table: { category: 'Methods', type: { summary: '(index: number, speed?: number, runCallbacks?: boolean) => Promise<void>' } },
     },
-    roadslidereachstart: {
-      control: {
-        type: null,
-      },
+    startAutoplay: {
+      description: 'Starts automatic slide transition.',
+      table: { category: 'Methods', type: { summary: '() => Promise<void>' } },
     },
-    roadslidereachend: {
-      control: {
-        type: null,
-      },
+    stopAutoplay: {
+      description: 'Stops automatic slide transition.',
+      table: { category: 'Methods', type: { summary: '() => Promise<void>' } },
     },
-    roadslidetouchstart: {
-      control: {
-        type: null,
-      },
+    update: {
+      description: 'Updates the carousel when slides are added or removed.',
+      table: { category: 'Methods', type: { summary: '() => Promise<void>' } },
     },
-    roadslidetouchend: {
-      control: {
-        type: null,
-      },
+    updateAutoHeight: {
+      description: 'Updates carousel height when `autoHeight` is enabled.',
+      table: { category: 'Methods', type: { summary: '(speed?: number) => Promise<void>' } },
     },
   },
   args: {
-    pager: undefined,
-    arrows: null,
-    ' ': `<road-carousel-item>
-    <road-img src="https://s1.medias-norauto.fr/visuals/desktop/fr/banners/FR-SLIDE-OP-Pneu-1er-prix-Fev24.png" alt="roof bar diagram"></road-img>
-  </road-carousel-item>
-
-  <road-carousel-item>
-    <road-img src="https://s1.medias-norauto.fr/visuals/desktop/fr/banners/FR-SLIDE-OP-P1-24-climv2.jpg" alt="roof bar on car"></road-img>
-  </road-carousel-item>
-
-  <road-carousel-item>
-    <road-img src="https://s1.medias-norauto.fr/visuals/desktop/fr/banners/FR-SLIDE-OP-Pneu-1er-prix-Fev24.png" alt="roof bar diagram"></road-img>
-  </road-carousel-item>
-
-  <road-carousel-item>
-    <road-img src="https://s1.medias-norauto.fr/visuals/desktop/fr/banners/FR-SLIDE-OP-P1-24-climv2.jpg" alt="roof bar on car"></road-img>
-  </road-carousel-item>
-
-  <road-carousel-item>
-    <road-img src="https://s1.medias-norauto.fr/visuals/desktop/fr/banners/FR-SLIDE-OP-Pneu-1er-prix-Fev24.png" alt="roof bar diagram"></road-img>
-  </road-carousel-item>`,
+    pager: false,
+    arrows: false,
+    ' ': `
+      <road-carousel-item>
+        <road-img src="https://via.placeholder.com/800x400?text=Slide+1" alt="Slide 1"></road-img>
+      </road-carousel-item>
+      <road-carousel-item>
+        <road-img src="https://via.placeholder.com/800x400?text=Slide+2" alt="Slide 2"></road-img>
+      </road-carousel-item>
+      <road-carousel-item>
+        <road-img src="https://via.placeholder.com/800x400?text=Slide+3" alt="Slide 3"></road-img>
+      </road-carousel-item>
+    `,
   },
 };
 
 const Template = (args) => html`
-<road-carousel pager="${ifDefined(args.pager)}" arrows="${ifDefined(args.arrows)}" .options="${ifDefined(args.options)}">
+<road-carousel 
+  ?pager="${args.pager}" 
+  ?arrows="${args.arrows}" 
+  .options="${args.options}">
   ${unsafeHTML(args[' '])}
 </road-carousel>
 `;