@roadtrip/components 3.32.4 → 3.32.5

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

@@ -9,26 +9,54 @@ export default {
   argTypes: {
     'is-open': {
       control: 'boolean',
+      description: 'Set to `true` to open the accordion and to `false` to close it.',
+      table: {
+        defaultValue: { summary: 'false' },
+        type: { summary: null },
+        required: { summary: false }
+      },
     },
     'is-light': {
       control: 'boolean',
+      description: 'Set to `true` to remove border the accordion and to `false` to add border it.',
+      table: {
+        defaultValue: { summary: 'false' },
+        type: { summary: null },
+        required: { summary: false }
+      },
     },
     'is-light-separator': {
       control: 'boolean',
+      description: 'Set to `true` to add a border in the header and the content only for the light accordion.',
+      table: {
+        defaultValue: { summary: 'false' },
+        type: { summary: null },
+        required: { summary: false }
+      },
     },
     'is-small': {
       control: 'boolean',
+      description: 'Set to `true` to add the small version only for the light accordion.',
+      table: {
+        defaultValue: { summary: 'false' },
+        type: { summary: null },
+        required: { summary: false }
+      },
     },
     'icon-left': {
       control: 'text',
+      description: 'Icon of the alert, it should be a road-icon element.\n`<road-icon name=\"alert-info-outline\" class=\"mr-16\"></road-icon>`',
     },
     header: {
       control: 'text',
+      description: "Content of the header."
     },
     ' ': {
       control: 'text',
+      description: "Content hidden in the accordion."
     },
     '--accordion-header-border': {
+      description: "height of the border of the header",
       table: {
         defaultValue: { summary: '1px' },
       },
@@ -37,6 +65,7 @@ export default {
       },
     },
     '--content-margin': {
+      description: "margin of the accordion content",
       table: {
         defaultValue: { summary: '0 1rem 1rem' },
       },
@@ -45,6 +74,7 @@ export default {
       },
     },
     '--content-padding': {
+      description: "padding of the accordion content",
       table: {
         defaultValue: { summary: '1rem 0.5rem 0' },
       },
@@ -53,6 +83,7 @@ export default {
       },
     },
     '--header-padding': {
+      description: "padding horizontal and vertical of the accordion header",
       table: {
         defaultValue: { summary: 'var(--road-spacing-04) var(--road-spacing-05)' },
       },
@@ -61,6 +92,7 @@ export default {
       },
     },
     '--header-padding-vertical': {
+      description: "padding of the accordion header",
       table: {
         defaultValue: { summary: 'var(--road-spacing-04)' },
       },
@@ -69,6 +101,7 @@ export default {
       },
     },
     '--icon-color': {
+      description: "color of the chevron icon",
       table: {
         defaultValue: { summary: 'var(--road-icon)' },
       },
@@ -77,6 +110,7 @@ export default {
       },
     },
     '--max-height': {
+      description: "maximum height of the collapse content",
       table: {
         defaultValue: { summary: 'none' },
       },
@@ -86,10 +120,10 @@ export default {
     },
   },
   args: {
-    'is-open': null,
-    'is-light': null,
-    'is-light-separator': null,
-    'is-small': null,
+    'is-open': false,
+    'is-light': false,
+    'is-light-separator': false,
+    'is-small': false,
     'icon-left': ``,
     header: `Accordion`,
     ' ': `Lorem ipsum dolor sit amet, consetetur sadipscing elitr, sed diam nonumy eirmod tempor invidunt ut labore et dolore magna aliquyam erat.`,

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

@@ -8,30 +8,37 @@ export default {
   component: 'road-alert',
   argTypes: {
     color: {
+      description: "Set the color of alert. e.g. info, success, warning, danger",
       options: ['info', 'success', 'warning', 'danger'],
       control: {
         type: 'radio',
       },
     },
     icon: {
+      description: "Icon of the alert, it should be a road-icon element.",
       options: list,
       control: {
         type: 'select',
       },
     },
     link: {
+      description: "Text Link display in the alert",
       control: 'text',
     },
     button: {
+      description: "Button display in the alert\n`<road-button size=\"sm\">Label</road-button>`",
       control: 'text',
     },
     label: {
+      description: "Title display in the alert",
       control: 'text',
     },
     url: {
+      description: "url display in the link",
       control: 'text',
     },
     ' ': {
+      description: "Message of the alert.",
       control: 'text',
     },
   },

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

@@ -19,24 +19,30 @@ Playground.args = {
 };
 Playground.argTypes = {
   name: {
+    description: "Specifies which illustration to use from the built-in set of illustrations.",
     options: asset,
     control: {
       type: 'select',
     },
   },
   lazy: {
+    description: "If enabled, road-illustration will be loaded lazily when it's visible in the viewport.\nDefault, `false`.",
     control: 'boolean',
   },
   'aria-label': {
+    description: "Specifies the label to use for accessibility. Defaults to the illustration name.",
     control: 'text',
   },
   'aria-hidden': {
+    description: "Set the illustration to hidden, respectively `true`, to remove it from the accessibility tree.",
     control: 'text',
   },
   src: {
+    description: "Specifies the exact `src` of an SVG file to use.",
     control: 'text',
   },
   sanitize: {
+    description: "When set to `false`, SVG content that is HTTP fetched will not be checked\nif the response SVG content has any `<script>` elements, or any attributes\nthat start with `on`, such as `onclick`.",
     control: 'boolean',
   },
 };

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

@@ -6,18 +6,29 @@ export default {
   component: 'road-autocomplete',
   parameters: {
     actions: {
-      handles: ['roadchange', 'roadblur', 'roadfocus'],
+      handles: ['roadchange', 'roadblur', 'roadfocus', 'roadselected'],
     },
   },
   argTypes: {
+    options: {
+      control: 'object',
+      description: 'Array of options available for autocomplete.',
+      table: {
+        defaultValue: { summary: '[{ value: "value1", label: "value1" }]' },
+      },
+    },
     ' ': {
       control: 'text',
+      description: 'Slot for inserting an input inside the autocomplete.',
     },
     roadselected: {
       action: 'roadselected',
-      control: {
-        type: null,
+      description: 'Fires when an option is selected.',
+      table: {
+        category: 'Events',
+        type: { summary: 'CustomEvent' },
       },
+      control: { type: null },
     },
   },
   args: {
@@ -29,11 +40,13 @@ export default {
   },
 };
 
-export const Playground = (args) => html`
-<road-autocomplete .options=${args.options} @roadselected=${event => args.roadselected(event.detail)}>
-  ${unsafeHTML(args[' '])}
-</road-autocomplete>
+const Template = (args) => html`
+  <road-autocomplete .options=${args.options} @roadselected=${event => args.roadselected(event.detail)}>
+    ${unsafeHTML(args[' '])}
+  </road-autocomplete>
 `;
+
+export const Playground = Template.bind({});
 Playground.args = {
   ' ': `<road-input 
     class="mb-0" 
@@ -43,14 +56,9 @@ Playground.args = {
     debounce="500"></road-input>`,
 };
 
-export const WithIcon = (args) => html`
-<road-autocomplete .options=${args.options} @roadselected=${event => args.roadselected(event.detail)}>
-  ${unsafeHTML(args[' '])}
-</road-autocomplete>
-`;
+export const WithIcon = Template.bind({});
 WithIcon.args = {
   ' ': `
-  <road-autocomplete>
     <road-input-group>  
       <road-input 
         class="mb-0" 
@@ -58,24 +66,17 @@ WithIcon.args = {
         input-id="country" 
         label="Country" 
         debounce="500">
-        
-        </road-input>
-        <label slot="prepend" for="search">
-          <road-icon name="search" role="img"></road-icon>
-        </label>
-      </road-input-group>
-    </road-autocomplete>
-    `,
+      </road-input>
+      <label slot="prepend" for="search">
+        <road-icon name="search" role="img"></road-icon>
+      </label>
+    </road-input-group>
+  `,
 };
 
-export const WithIconButton = (args) => html`
-<road-autocomplete .options=${args.options} @roadselected=${event => args.roadselected(event.detail)}>
-  ${unsafeHTML(args[' '])}
-</road-autocomplete>
-`;
+export const WithIconButton = Template.bind({});
 WithIconButton.args = {
   ' ': `
-  <road-autocomplete>
     <road-input-group>  
       <road-input 
         class="mb-0" 
@@ -83,32 +84,27 @@ WithIconButton.args = {
         input-id="country" 
         label="Country" 
         debounce="500">
-        
-        </road-input>
-        <label slot="prepend" for="search">
-          <road-icon name="search" role="img"></road-icon>
-        </label>
-        <road-button slot="append" class="autocomplete-button" button-type="submit">
-          OK     
-        </road-button>
-      </road-input-group>
-    </road-autocomplete>
-    `,
+      </road-input>
+      <label slot="prepend" for="search">
+        <road-icon name="search" role="img"></road-icon>
+      </label>
+      <road-button slot="append" class="autocomplete-button" button-type="submit">
+        OK     
+      </road-button>
+    </road-input-group>
+  `,
 };
 
 export const Example = (args) => {
   const getCountry = (event) => {
     fetch(`https://photon.komoot.io/api/?q=${event.detail.value}&osm_tag=place:country&limit=10&lang=en`)
       .then(res => res.json())
-      .then(
-        result => {
-          document.querySelector('road-autocomplete').options = result.features.map(item => {
-            return {
-              value: item.properties.country,
-              label:item.properties.country,
-            };
-          });
-        });
+      .then(result => {
+        document.querySelector('road-autocomplete').options = result.features.map(item => ({
+          value: item.properties.country,
+          label: item.properties.country,
+        }));
+      });
   };
 
   return html`

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

@@ -7,9 +7,11 @@ export default {
   component: 'road-avatar',
   argTypes: {
     ' ': {
+      description: "Image of the avatar.",
       control: 'text',
     },
     '--avatar-background': {
+      description: "background color of the avatar",
       table: {
         defaultValue: { summary: 'var(--road-primary-500)' },
       },
@@ -18,10 +20,14 @@ export default {
       },
     },
     size: {
+      description: "The Avatar size.",
       options: ['sm', 'md', 'lg'],
       control: {
         type: 'select',
       },
+      table: {
+        defaultValue: { summary: 'md' },
+      },
     },
   },
   args: {

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

@@ -7,15 +7,21 @@ export default {
   component: 'road-badge',
   argTypes: {
     color: {
+      description: "Color of the badge",
       options: ['primary', 'secondary', 'accent', 'info', 'success', 'warning', 'danger', 'inverse'],
       control: {
         type: 'select',
       },
+      table: {
+        defaultValue: { summary: 'secondary' },
+      },
     },
     bubble: {
+      description: "if `true` the badge will be displayed has a little bubble",
       control: 'boolean',
     },
     ' ': {
+      description: "Content of the badge, it could be a number or a text.",
       control: 'text',
     },
   },

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

@@ -8,20 +8,39 @@ export default {
   argTypes: {
     label: {
       control: 'text',
+      description: 'The main text content of the banner.',
+      table: {
+        defaultValue: { summary: 'Lorem ipsum dolor sit amet, consectetur adipiscing elit.' },
+      },
     },
     link: {
       control: 'text',
+      description: 'The label of the link inside the banner.',
+      table: {
+        defaultValue: { summary: 'See more' },
+      },
     },
     url: {
       control: 'text',
+      description: 'The URL for the link inside the banner.',
+      table: {
+        defaultValue: { summary: '#' },
+      },
     },
     'is-open': {
       control: 'boolean',
+      description: 'Controls whether the banner is visible or not.',
+      table: {
+        defaultValue: { summary: true },
+      },
     },
     close: {
-      control: {
-        type: null,
+      description: 'Event triggered when the banner is closed.',
+      table: {
+        category: 'Events',
+        type: { summary: 'CustomEvent' },
       },
+      control: { type: null }, // Désactive l'affichage du contrôle dans Storybook
     },
   },
   args: {
@@ -33,7 +52,18 @@ export default {
 };
 
 const Template = (args) => html`
-  <road-banner label="${args.label}" link="${args.link}" url="${args.url} is-open=${args['is-open']}"></road-banner>
+  <road-banner
+    label="${ifDefined(args.label)}"
+    link="${ifDefined(args.link)}"
+    url="${ifDefined(args.url)}"
+    ?is-open="${args['is-open']}"
+  ></road-banner>
 `;
 
 export const Playground = Template.bind({});
+Playground.args = {
+  label: 'Lorem ipsum dolor sit amet, consectetur adipiscing elit.',
+  link: 'See more',
+  url: '#',
+  'is-open': true,
+};

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

@@ -13,142 +13,133 @@ export default {
   argTypes: {
     color: {
       options: ['default', 'primary', 'secondary', 'ghost', 'destructive'],
-      control: {
-        type: 'select',
+      control: { type: 'select' },
+      description: 'Defines the button color.',
+      table: {
+        defaultValue: { summary: 'default' },
       },
     },
     'button-type': {
       options: ['button', 'reset', 'submit'],
-      control: {
-        type: 'select',
-      },
+      control: { type: 'select' },
+      description: 'Specifies the type of the button.',
     },
     disabled: {
       control: 'boolean',
+      description: 'Disables the button when set to `true`.',
     },
     'icon-only': {
       control: 'boolean',
-    },
-    download: {
-      control: {
-        type: null,
-      },
+      description: 'If `true`, the button will only contain an icon without text.',
     },
     expand: {
       control: 'boolean',
-    },
-    href: {
-      control: {
-        type: null,
-      },
+      description: 'Expands the button to the full width of its container.',
     },
     outline: {
       control: 'boolean',
-    },
-    rel: {
-      control: {
-        type: null,
-      },
+      description: 'Applies an outline style to the button.',
     },
     size: {
       options: ['sm', 'md', 'lg', 'xl'],
-      control: {
-        type: 'select',
-      },
-    },
-    target: {
-      control: {
-        type: null,
-      },
+      control: { type: 'select' },
+      description: 'Defines the size of the button.',
     },
     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.',
     },
     end: {
       control: 'text',
+      description: 'Slot for an icon or content at the **end** of 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' },
       },
     },
+    // 🔹 Ajout des CSS Variables comme contrôles
     '--border-radius': {
+      control: 'text',
+      description: 'Defines the border radius of the button.',
       table: {
         defaultValue: { summary: '0.25rem' },
       },
-      control: {
-        type: null,
-      },
     },
     '--font-size': {
+      control: 'text',
+      description: 'Sets the font size of the button text.',
       table: {
         defaultValue: { summary: '1rem' },
       },
-      control: {
-        type: null,
-      },
     },
     '--margin-bottom': {
+      control: 'text',
+      description: 'Defines the margin bottom of the button.',
       table: {
         defaultValue: { summary: '1rem' },
       },
-      control: {
-        type: null,
-      },
     },
     '--padding-start': {
+      control: 'text',
+      description: 'Sets the padding on the **left** side of the button.',
       table: {
         defaultValue: { summary: '1rem' },
       },
-      control: {
-        type: null,
-      },
     },
     '--padding-end': {
+      control: 'text',
+      description: 'Sets the padding on the **right** side of the button.',
       table: {
         defaultValue: { summary: '1rem' },
       },
-      control: {
-        type: null,
-      },
-    },
-    native: {
-      control: {
-        type: null,
-      },
     },
   },
   args: {
-    'button-type': null,
-    'icon-only': null,
-    color: null,
-    disabled: null,
-    expand: null,
-    outline: null,
-    size: null,
-    start: ``,
-    ' ': `Label`,
-    end: undefined,
+    'button-type': 'button',
+    'icon-only': false,
+    color: 'default',
+    disabled: false,
+    expand: false,
+    outline: false,
+    size: 'md',
+    start: '',
+    ' ': 'Label',
+    end: '',
   },
 };
 
 const Template = (args) => html`
 <road-button 
   button-type="${ifDefined(args['button-type'])}"
-  icon-only="${ifDefined(args['icon-only'])}"
+  ?icon-only="${args['icon-only']}"
   color="${ifDefined(args.color)}"
-  disabled="${ifDefined(args.disabled)}"
-  expand="${ifDefined(args.expand)}"
-  outline="${ifDefined(args.outline)}"
+  ?disabled="${args.disabled}"
+  ?expand="${args.expand}"
+  ?outline="${args.outline}"
   size="${ifDefined(args.size)}"
+  style="
+    --border-radius: ${ifDefined(args['--border-radius'])};
+    --font-size: ${ifDefined(args['--font-size'])};
+    --margin-bottom: ${ifDefined(args['--margin-bottom'])};
+    --padding-start: ${ifDefined(args['--padding-start'])};
+    --padding-end: ${ifDefined(args['--padding-end'])};
+  "
 >
   ${unsafeHTML(args.start)}
   ${unsafeHTML(args[' '])}
@@ -198,7 +189,7 @@ Destructive.args = {
 };
 
 export const DestructiveOutline = Template.bind({});
-Destructive.args = {
+DestructiveOutline.args = {
   color: 'destructive',
   outline: true,
 };