@roadtrip/components 3.32.4 → 3.32.5

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({});

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

@@ -8,92 +8,102 @@ export default {
   argTypes: {
     'is-open': {
       control: 'boolean',
+      description: 'Defines whether the collapse is open or closed.',
     },
     centered: {
       control: 'boolean',
+      description: 'Centers the expand/collapse button.',
     },
     'show-less': {
       control: 'text',
+      description: 'Label for the button when content is expanded.',
+      table: {
+        defaultValue: { summary: 'show less' },
+      },
     },
     'show-more': {
       control: 'text',
+      description: 'Label for the button when content is collapsed.',
+      table: {
+        defaultValue: { summary: 'show more' },
+      },
     },
     ' ': {
       control: 'text',
+      description: 'Expanded content of the collapse component.',
     },
     'collapsed-content': {
       control: 'text',
+      description: 'Content displayed when the collapse is closed.',
     },
+    // 🔹 Ajout des CSS Variables pour personnalisation
     '--btn-padding-start': {
-      table: {
-        defaultValue: { summary: '1rem' },
-      },
-      control: {
-        type: null,
-      },
+      table: { defaultValue: { summary: '1rem' } },
+      control: 'text',
+      description: 'Padding at the start of the button.',
     },
     '--btn-padding-end': {
-      table: {
-        defaultValue: { summary: '1rem' },
-      },
-      control: {
-        type: null,
-      },
+      table: { defaultValue: { summary: '1rem' } },
+      control: 'text',
+      description: 'Padding at the end of the button.',
     },
     '--btn-margin-bottom': {
-      table: {
-        defaultValue: { summary: '1rem' },
-      },
-      control: {
-        type: null,
-      },
+      table: { defaultValue: { summary: '1rem' } },
+      control: 'text',
+      description: 'Margin below the button.',
     },
     '--btn-font-size': {
-      table: {
-        defaultValue: { summary: '1rem' },
-      },
-      control: {
-        type: null,
-      },
+      table: { defaultValue: { summary: '1rem' } },
+      control: 'text',
+      description: 'Font size of the button text.',
     },
     '--max-height': {
-      table: {
-        defaultValue: { summary: '500px' },
-      },
-      control: {
-        type: null,
-      },
+      table: { defaultValue: { summary: '500px' } },
+      control: 'text',
+      description: 'Maximum height of the collapse content when expanded.',
     },
   },
   args: {
-    'is-open': null,
-    centered: null,
+    'is-open': false,
+    centered: false,
     'show-less': 'show less',
     'show-more': 'show more',
     ' ': `<ul class="m-0">
-    <li>Car tire 205/55 R16 91 V</li>
-    <li>Good traction on dry and wet soils.</li>
-    <li>Reduced risk of aquaplaning.</li>
-    <li>Reduced braking distances.</li>
-  </ul>`,
+      <li>Car tire 205/55 R16 91 V</li>
+      <li>Good traction on dry and wet soils.</li>
+      <li>Reduced risk of aquaplaning.</li>
+      <li>Reduced braking distances.</li>
+    </ul>`,
     'collapsed-content': `<ul class="m-0">
-    <li>Specific Homologation : <b>non</b></li>
-    <li>XL : <b>non</b></li>
-    <li>Runflat : <b>non</b></li>
-    <li>Seal : <b>non</b></li>
-    <li>Various tire characteristics : <b>MFS</b></li>
-    <li>Tire profile : <b>Energy saver</b></li>
-  </ul>`,
+      <li>Specific Homologation: <b>non</b></li>
+      <li>XL: <b>non</b></li>
+      <li>Runflat: <b>non</b></li>
+      <li>Seal: <b>non</b></li>
+      <li>Various tire characteristics: <b>MFS</b></li>
+      <li>Tire profile: <b>Energy saver</b></li>
+    </ul>`,
   },
 };
 
 const Template = (args) => html`
-<road-collapse is-open="${ifDefined(args['is-open'])}" centered="${ifDefined(args.centered)}" show-more="${args['show-more']}" show-less="${args['show-less']}">
-  ${unsafeHTML(args[' '])}
-  <div slot="collapsed-content">
-    ${unsafeHTML(args['collapsed-content'])}
-  </div>
-</road-collapse>
+  <road-collapse 
+    ?is-open="${args['is-open']}" 
+    ?centered="${args.centered}" 
+    show-more="${ifDefined(args['show-more'])}" 
+    show-less="${ifDefined(args['show-less'])}"
+    style="
+      --btn-padding-start: ${ifDefined(args['--btn-padding-start'])};
+      --btn-padding-end: ${ifDefined(args['--btn-padding-end'])};
+      --btn-margin-bottom: ${ifDefined(args['--btn-margin-bottom'])};
+      --btn-font-size: ${ifDefined(args['--btn-font-size'])};
+      --max-height: ${ifDefined(args['--max-height'])};
+    "
+  >
+    ${unsafeHTML(args[' '])}
+    <div slot="collapsed-content">
+      ${unsafeHTML(args['collapsed-content'])}
+    </div>
+  </road-collapse>
 `;
 
 export const Playground = Template.bind({});
@@ -137,34 +147,34 @@ VehicleTypes.args = {
     </road-row>
   </road-grid>`,
   'collapsed-content': `<road-grid>
-      <road-row>
-        <road-col class="col-6 col-md-4 col-lg-3">
-          <road-card button value="scooter">
-            <road-icon name="vehicle-scooter" size="3x" aria-hidden="true"></road-icon>
-            <road-label>Scooter</road-label>
-          </road-card>
-        </road-col>
-        <road-col class="col-6 col-md-4 col-lg-3">
-          <road-card button value="competition">
-            <road-icon name="vehicle-rally" size="3x" aria-hidden="true"></road-icon>
-            <road-label>Compétition</road-label>
-          </road-card>
-        </road-col>
-        <road-col class="col-6 col-md-4 col-lg-3">
-          <road-card button value="colletion">
-            <road-icon name="vehicle-collector" size="3x" aria-hidden="true"></road-icon>
-            <road-label>Colletion</road-label>
-          </road-card>
-        </road-col>
-        <road-col class="col-6 col-md-4 col-lg-3">
-          <road-card button value="quad">
-            <road-icon name="vehicle-quad" size="3x" aria-hidden="true"></road-icon>
-            <road-label>Quad</road-label>
-          </road-card>
-        </road-col>
-      </road-row>
-    </road-grid>`,
-},
+    <road-row>
+      <road-col class="col-6 col-md-4 col-lg-3">
+        <road-card button value="scooter">
+          <road-icon name="vehicle-scooter" size="3x" aria-hidden="true"></road-icon>
+          <road-label>Scooter</road-label>
+        </road-card>
+      </road-col>
+      <road-col class="col-6 col-md-4 col-lg-3">
+        <road-card button value="competition">
+          <road-icon name="vehicle-rally" size="3x" aria-hidden="true"></road-icon>
+          <road-label>Compétition</road-label>
+        </road-card>
+      </road-col>
+      <road-col class="col-6 col-md-4 col-lg-3">
+        <road-card button value="collection">
+          <road-icon name="vehicle-collector" size="3x" aria-hidden="true"></road-icon>
+          <road-label>Collection</road-label>
+        </road-card>
+      </road-col>
+      <road-col class="col-6 col-md-4 col-lg-3">
+        <road-card button value="quad">
+          <road-icon name="vehicle-quad" size="3x" aria-hidden="true"></road-icon>
+          <road-label>Quad</road-label>
+        </road-card>
+      </road-col>
+    </road-row>
+  </road-grid>`,
+};
 VehicleTypes.parameters = {
   backgrounds: {
     default: 'grey',

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

@@ -5,37 +5,42 @@ import { unsafeHTML } from 'lit-html/directives/unsafe-html.js';
 export default {
   title: 'Listing/ContentCard',
   component: 'road-content-card',
-  backgrounds: {
-    default: 'grey',
+  parameters: {
+    backgrounds: {
+      default: 'grey',
+    },
   },
   argTypes: {
     label: {
       control: 'text',
+      description: 'Title text displayed in the card.',
     },
     description: {
       control: 'text',
+      description: 'Main description inside the card.',
     },
     ' ': {
       control: 'text',
+      description: 'Slot for additional content, such as buttons or links.',
     },
     'inset-image': {
       control: 'boolean',
+      description: 'If true, the image is inset within the card.',
     },
   },
   args: {
     label: `Lorem ipsum`,
-    description: `Elevate your car's performance with Norauto's all-in-one maintenance kit. `,
-    ' ': `<road-button color="primary" class="mt-8 mb-0" expand="true" outline="true">Label</road-button> <road-button color="primary" class="mt-8 mb-0 mr-0" expand="true">
-    Add to cart
-  </road-button>`,
+    description: `Elevate your car's performance with Norauto's all-in-one maintenance kit.`,
+    ' ': `
+      <road-button color="primary" class="mt-8 mb-0" expand="true" outline="true">Label</road-button>
+      <road-button color="primary" class="mt-8 mb-0 mr-0" expand="true">Add to cart</road-button>
+    `,
     'inset-image': false,
   },
 };
 
-
-
-export const Template = (args) => html`
-<road-content-card inset-image="${ifDefined(args['inset-image'])}">
+const Template = (args) => html`
+<road-content-card ?inset-image="${args['inset-image']}">
   <div slot="label">
     ${unsafeHTML(args.label)}
   </div>
@@ -44,4 +49,18 @@ export const Template = (args) => html`
   </div>
   ${unsafeHTML(args[' '])}
 </road-content-card>
-`;
+`;
+
+export const Playground = Template.bind({});
+
+export const WithInsetImage = Template.bind({});
+WithInsetImage.args = {
+  'inset-image': true,
+};
+
+export const CustomContent = Template.bind({});
+CustomContent.args = {
+  label: 'Premium Car Wax',
+  description: 'Protect your car’s paint with our long-lasting premium wax formula.',
+  ' ': `<road-button color="secondary" class="mt-8 mb-0" expand="true">Learn more</road-button>`,
+};

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

@@ -12,38 +12,56 @@ export default {
   argTypes: {
     'input-id': {
       control: 'text',
+      description: 'Unique identifier for the input field.',
     },
     size: {
       options: ['sm', 'md', 'lg'],
-      control: {
-        type: 'select',
+      control: { type: 'select' },
+      description: 'Defines the size of the counter.',
+      table: {
+        defaultValue: { summary: 'md' },
       },
     },
     min: {
       control: 'number',
+      description: 'Minimum value allowed for the counter.',
+      table: {
+        defaultValue: { summary: 1 },
+      },
     },
     max: {
       control: 'number',
+      description: 'Maximum value allowed for the counter.',
+      table: {
+        defaultValue: { summary: 20 },
+      },
     },
     step: {
       control: 'number',
+      description: 'Step interval for increasing or decreasing the counter value.',
+      table: {
+        defaultValue: { summary: 1 },
+      },
     },
     value: {
       control: 'number',
+      description: 'Current value of the counter.',
+      table: {
+        defaultValue: { summary: 1 },
+      },
     },
     dustbin: {
       control: 'boolean',
+      description: 'Displays a delete (dustbin) icon when set to `true`.',
     },
     readonly: {
       control: 'boolean',
+      description: 'Prevents editing the value when set to `true`.',
     },
     '--counter-margin-bottom': {
-      table: {
-        defaultValue: { summary: '1rem' },
-      },
-      control: {
-        type: null,
-      },
+      table: { defaultValue: { summary: '1rem' } },
+      control: 'text',
+      description: 'Defines the margin-bottom of the counter.',
     },
   },
   args: {
@@ -63,10 +81,11 @@ const Template = (args) => html`
     max="${ifDefined(args.max)}" 
     step="${ifDefined(args.step)}" 
     value="${ifDefined(args.value)}"
-    dustbin="${ifDefined(args.dustbin)}"
+    ?dustbin="${args.dustbin}"
+    ?readonly="${args.readonly}"
     input-id="${ifDefined(args['input-id'])}"
-    readonly="${ifDefined(args.readonly)}"
-    ></road-counter>
+    style="--counter-margin-bottom: ${ifDefined(args['--counter-margin-bottom'])};"
+  ></road-counter>
 `;
 
 export const Playground = Template.bind({});
@@ -80,3 +99,13 @@ export const Small = Template.bind({});
 Small.args = {
   size: 'sm',
 };
+
+export const ReadOnly = Template.bind({});
+ReadOnly.args = {
+  readonly: true,
+};
+
+export const WithDustbin = Template.bind({});
+WithDustbin.args = {
+  dustbin: true,
+};