@roadtrip/components 3.32.4 → 3.33.0

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>
 `;

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

@@ -6,99 +6,120 @@ export default {
   component: 'road-checkbox',
   parameters: {
     actions: {
-      handles: ['roadblur', 'roadfocus'],
+      handles: ['roadblur', 'roadfocus', 'roadchange'],
     },
   },
   argTypes: {
     checked: {
       control: 'boolean',
+      description: 'Specifies whether the checkbox is checked.',
+      table: {
+        defaultValue: { summary: 'false' },
+      },
     },
     indeterminate: {
       control: 'boolean',
+      description: 'Specifies whether the checkbox is in an indeterminate state.',
     },
     disabled: {
       control: 'boolean',
+      description: 'Disables the checkbox if set to `true`.',
     },
     required: {
       control: 'boolean',
+      description: 'Marks the checkbox as required in a form.',
     },
     inverse: {
       control: 'boolean',
+      description: 'Applies an inverse color style to the checkbox.',
     },
     error: {
       control: 'text',
+      description: 'Displays an error message below the checkbox.',
     },
     helper: {
       control: 'text',
+      description: 'Displays a helper text below the checkbox.',
     },
     label: {
       control: 'text',
+      description: 'Sets the main label of the checkbox.',
+      table: {
+        defaultValue: { summary: 'Label' },
+      },
     },
     'secondary-label': {
       control: 'text',
+      description: 'Sets a secondary label, usually displayed next to the main label.',
     },
     name: {
       control: 'text',
+      description: 'Sets the name attribute for form submission.',
     },
     'checkbox-id': {
       control: 'text',
+      description: 'Sets a unique ID for the checkbox element.',
     },
     value: {
       control: 'text',
-    },
-    ' ': {
-      control: {
-        type: null,
+      description: 'Defines the value of the checkbox when checked.',
+      table: {
+        defaultValue: { summary: 'on' },
       },
     },
     roadblur: {
-      control: {
-        type: null,
+      action: 'roadblur',
+      description: 'Triggered when the checkbox loses focus.',
+      table: {
+        category: 'Events',
       },
     },
     roadfocus: {
-      control: {
-        type: null,
+      action: 'roadfocus',
+      description: 'Triggered when the checkbox gains focus.',
+      table: {
+        category: 'Events',
       },
     },
     roadchange: {
       action: 'roadchange',
-      control: {
-        type: null,
+      description: 'Triggered when the checkbox state changes.',
+      table: {
+        category: 'Events',
       },
     },
   },
   args: {
-    checked: null,
-    disabled: null,
-    indeterminate: null,
-    inverse: null,
+    checked: false,
+    disabled: false,
+    indeterminate: false,
+    inverse: false,
+    required: false,
     label: 'Label',
-    'secondary-label': undefined,
-    required: null,
+    'secondary-label': '',
     value: 'on',
   },
 };
 
 const Template = (args) => html`
-<road-checkbox 
-  checked="${ifDefined(args.checked)}"
-  indeterminate="${ifDefined(args.indeterminate)}"
-  disabled="${ifDefined(args.disabled)}"
-  error="${ifDefined(args.error)}"
-  helper="${ifDefined(args.helper)}"
-  inverse="${ifDefined(args.inverse)}"
-  label="${ifDefined(args.label)}"
-  secondary-label="${ifDefined(args['secondary-label'])}"
-  name="${ifDefined(args.name)}"
-  required="${ifDefined(args.required)}"
-  value="${ifDefined(args.value)}"
-  checkbox-id="${ifDefined(args['checkbox-id'])}"
-  @roadchange=${event => args.roadchange(event.detail)}
-></road-checkbox>
+  <road-checkbox 
+    ?checked="${args.checked}"
+    ?indeterminate="${args.indeterminate}"
+    ?disabled="${args.disabled}"
+    ?inverse="${args.inverse}"
+    ?required="${args.required}"
+    value="${ifDefined(args.value)}"
+    label="${ifDefined(args.label)}"
+    secondary-label="${ifDefined(args['secondary-label'])}"
+    name="${ifDefined(args.name)}"
+    checkbox-id="${ifDefined(args['checkbox-id'])}"
+    error="${ifDefined(args.error)}"
+    helper="${ifDefined(args.helper)}"
+    @roadchange=${event => args.roadchange(event.detail)}
+  ></road-checkbox>
 `;
 
-export const Playground  = Template.bind({});
+export const Playground = Template.bind({});
 
 export const Checked = Template.bind({});
 Checked.args = {

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

@@ -11,69 +11,55 @@ export default {
     },
   },
   argTypes: {
-    ' ': {
-      control: 'text',
-    },
     outline: {
       control: 'boolean',
+      description: 'Displays the chip with an outline style.',
     },
     'has-close-icon': {
       control: 'boolean',
+      description: 'Adds a close icon to the chip.',
     },
     size: {
       options: ['md', 'lg'],
-      control: {
-        type: 'select',
+      control: { type: 'select' },
+      description: 'Defines the size of the chip.',
+      table: {
+        defaultValue: { summary: 'md' },
       },
     },
     color: {
       options: ['default', 'secondary', 'inverse'],
-      control: {
-        type: 'select',
+      control: { type: 'select' },
+      description: 'Changes the chip color.',
+      table: {
+        defaultValue: { summary: 'default' },
       },
     },
+    ' ': {
+      control: 'text',
+      description: 'Content inside the chip (label or icon).',
+    },
   },
   args: {
-    outline: null,
-    'has-close-icon': null,
-    ' ': `Label`,
+    outline: false,
+    'has-close-icon': false,
+    size: 'md',
+    color: 'default',
+    ' ': 'Label',
   },
 };
 
 const Template = (args) => html`
-<road-chip
-  outline="${ifDefined(args.outline)}"
-  has-close-icon="${ifDefined(args['has-close-icon'])}"
-  size="${ifDefined(args.size)}"
-  color="${ifDefined(args.color)}"
->
-  ${unsafeHTML(args[' '])}
-</road-chip>
-<road-chip
-  outline="${ifDefined(args.outline)}"
-  has-close-icon="${ifDefined(args['has-close-icon'])}"
-  size="${ifDefined(args.size)}"
-  color="${ifDefined(args.color)}"
->
-  ${unsafeHTML(args[' '])}
-</road-chip>
-<road-chip
-  outline="${ifDefined(args.outline)}"
-  has-close-icon="${ifDefined(args['has-close-icon'])}"
-  size="${ifDefined(args.size)}"
-  color="${ifDefined(args.color)}"
->
-  ${unsafeHTML(args[' '])}
-</road-chip>
-<road-chip
-  outline="${ifDefined(args.outline)}"
-  has-close-icon="${ifDefined(args['has-close-icon'])}"
-  size="${ifDefined(args.size)}"
-  color="${ifDefined(args.color)}"
->
-  ${unsafeHTML(args[' '])}
-</road-chip>
-
+  ${['Label A', 'Label B', 'Label C', 'Label D'].map(label => html`
+    <road-chip
+      ?outline="${args.outline}"
+      ?has-close-icon="${args['has-close-icon']}"
+      size="${ifDefined(args.size)}"
+      color="${ifDefined(args.color)}"
+    >
+      ${unsafeHTML(args[' '] || label)}
+    </road-chip>
+  `)}
 `;
 
 export const Playground = Template.bind({});
@@ -82,12 +68,11 @@ Playground.args = {
   'has-close-icon': true,
 };
 
-export const withIcon = Template.bind({});
-withIcon.args = {
+export const WithIcon = Template.bind({});
+WithIcon.args = {
   outline: true,
   'has-close-icon': true,
-  ' ': `<road-icon name="weather-rain" role="button"></road-icon>
-  B`,
+  ' ': `<road-icon name="weather-rain" role="button"></road-icon> B`,
 };
 
 export const Color = Template.bind({});