@roadtrip/components 3.32.4 → 3.33.0

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,
 };

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',
+};