@roadtrip/components 3.32.4 → 3.32.5

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

@@ -8,84 +8,100 @@ export default {
   argTypes: {
     'is-open': {
       control: 'boolean',
+      description: 'Defines whether the dropdown is open or closed.',
     },
     'is-light': {
       control: 'boolean',
+      description: 'Applies a light style to the dropdown.',
     },
     'is-medium': {
       control: 'boolean',
+      description: 'Applies a medium-sized style to the dropdown.',
     },
     position: {
       options: ['left', 'right'],
-      control: {
-        type: 'radio',
+      control: { type: 'radio' },
+      description: 'Sets the horizontal position of the dropdown.',
+      table: {
+        defaultValue: { summary: 'left' },
       },
     },
     direction: {
       options: ['top', 'bottom'],
-      control: {
-        type: 'radio',
-      },
-    },
-    ' ': {
-      control: {
-        type: null,
+      control: { type: 'radio' },
+      description: 'Sets the vertical direction in which the dropdown expands.',
+      table: {
+        defaultValue: { summary: 'bottom' },
       },
     },
     list: {
-      control: {
-        type: 'text',
-      },
+      control: 'text',
+      description: 'Defines the list of items inside the dropdown.',
     },
     '--margin-top': {
-      table: {
-        defaultValue: { summary: '0.5rem' },
-      },
-      control: {
-        type: null,
-      },
+      table: { defaultValue: { summary: '0.5rem' } },
+      control: 'text',
+      description: 'Sets the margin-top of the dropdown.',
     },
   },
   args: {
+    'is-open': true,
+    'is-light': false,
+    'is-medium': false,
     position: 'left',
     direction: 'bottom',
-    'is-open': true,
-    'is-light': null,
-    'is-medium': null,
     list: `<road-list slot="list">
-    <road-item button class="border-0">
-      <road-icon slot="start" name="picture" size="md" aria-hidden="true"></road-icon>
-      <road-label>
-        Label
-      </road-label>
-    </road-item>
-    <road-item button class="border-0">
-      <road-icon slot="start" name="picture" size="md" aria-hidden="true"></road-icon>
-      <road-label>
-        Label
-      </road-label>
-    </road-item>
-    <road-item button class="border-0">
-      <road-icon slot="start" name="picture" size="md" aria-hidden="true"></road-icon>
-      <road-label>
-        Label
-      </road-label>
-    </road-item>
-    <road-item button class="border-0">
-      <road-icon slot="start" name="picture" size="md" aria-hidden="true"></road-icon>
-      <road-label>
-        Label
-      </road-label>
-    </road-item>
-  </road-list>`,
+      <road-item button class="border-0">
+        <road-icon slot="start" name="picture" size="md" aria-hidden="true"></road-icon>
+        <road-label>Label</road-label>
+      </road-item>
+      <road-item button class="border-0">
+        <road-icon slot="start" name="picture" size="md" aria-hidden="true"></road-icon>
+        <road-label>Label</road-label>
+      </road-item>
+      <road-item button class="border-0">
+        <road-icon slot="start" name="picture" size="md" aria-hidden="true"></road-icon>
+        <road-label>Label</road-label>
+      </road-item>
+      <road-item button class="border-0">
+        <road-icon slot="start" name="picture" size="md" aria-hidden="true"></road-icon>
+        <road-label>Label</road-label>
+      </road-item>
+    </road-list>`,
   },
 };
 
-export const Playground = (args) => html`
-<road-dropdown is-open=${ifDefined(args['is-open'])} is-light="${ifDefined(args['is-light'])}" is-medium="${ifDefined(args['is-medium'])}" position="${ifDefined(args.position)}" direction="${ifDefined(args.direction)}">
-  ${unsafeHTML(args.list)}
-</road-dropdown>
-<road-dropdown is-open=${ifDefined(args['is-open'])} is-light="${ifDefined(args['is-light'])}" is-medium="${ifDefined(args['is-medium'])}" position="${ifDefined(args.position)}" direction="${ifDefined(args.direction)}">
-  ${unsafeHTML(args.list)}
-</road-dropdown>
+const Template = (args) => html`
+  <road-dropdown
+    ?is-open="${args['is-open']}"
+    ?is-light="${args['is-light']}"
+    ?is-medium="${args['is-medium']}"
+    position="${ifDefined(args.position)}"
+    direction="${ifDefined(args.direction)}"
+    style="--margin-top: ${ifDefined(args['--margin-top'])};"
+  >
+    ${unsafeHTML(args.list)}
+  </road-dropdown>
 `;
+
+export const Playground = Template.bind({});
+
+export const RightPosition = Template.bind({});
+RightPosition.args = {
+  position: 'right',
+};
+
+export const TopDirection = Template.bind({});
+TopDirection.args = {
+  direction: 'top',
+};
+
+export const LightDropdown = Template.bind({});
+LightDropdown.args = {
+  'is-light': true,
+};
+
+export const MediumDropdown = Template.bind({});
+MediumDropdown.args = {
+  'is-medium': true,
+};

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

@@ -10,93 +10,97 @@ export default {
     },
     layout: 'fullscreen',
     actions: {
-      handles: ['open', 'close'],
+      handles: ['open', 'close', 'roadselected'],
     },
   },
   argTypes: {
     'is-open': {
       control: 'boolean',
+      description: 'Defines whether the duration picker is open or closed.',
     },
     header: {
       control: 'text',
+      description: 'Title displayed in the duration picker.',
     },
     min: {
       control: 'number',
+      description: 'Minimum selectable duration in minutes.',
     },
     max: {
       control: 'number',
+      description: 'Maximum selectable duration in minutes.',
     },
     step: {
       control: 'number',
       min: 15,
+      description: 'Step interval for selecting the duration (in minutes).',
+      table: {
+        defaultValue: { summary: 15 },
+      },
     },
     roadselected: {
       action: 'roadselected',
-      control: {
-        type: null,
+      description: 'Triggered when a duration is selected.',
+      table: {
+        category: 'Events',
+        type: { summary: 'CustomEvent<{ value: number, label: string }>' },
       },
     },
-    open : {
-      description: 'Open the widget.',
+    open: {
+      description: 'Opens the duration picker.',
       table: {
-        category: 'methods',
-        type: {
-          summary: 'void',
-        },
-      },
-      defaultValue: {
-        summary: null,
+        category: 'Methods',
+        type: { summary: 'void' },
       },
     },
-    close : {
-      description: 'Close the widget.',
+    close: {
+      description: 'Closes the duration picker.',
       table: {
-        category: 'methods',
-        type: {
-          summary: 'void',
-        },
-        defaultValue: {
-          summary: null,
-        },
+        category: 'Methods',
+        type: { summary: 'void' },
       },
     },
   },
   args: {
     'is-open': true,
+    header: 'Select a duration',
+    min: 15,
+    max: 240,
+    step: 15,
   },
 };
 
 const Template = (args) => html`
-<road-duration 
-  is-open="${ifDefined(args['is-open'])}"
-  header="${ifDefined(args.header)}"
-  min="${ifDefined(args.min)}"
-  max="${ifDefined(args.max)}"
-  step="${ifDefined(args.step)}"
-  @roadselected=${event => args.roadselected(event.detail)}
-></road-duration>
+  <road-duration 
+    ?is-open="${args['is-open']}"
+    header="${ifDefined(args.header)}"
+    min="${ifDefined(args.min)}"
+    max="${ifDefined(args.max)}"
+    step="${ifDefined(args.step)}"
+    @roadselected=${event => args.roadselected(event.detail)}
+  ></road-duration>
 `;
 
 export const Playground = Template.bind({});
 
 export const Example = () => html`
-<road-label class="mb-8">Duration of the service</road-label>
-<div class="d-flex align-items-center">
-  <road-input 
-    class="input"
-    aria-label="Duration of the service" 
-    style="width: 100px" 
-    placeholder="00:15"
-    @roadfocus=${() => document.querySelector('.duration').open()}
-  ></road-input>
-  <div class="text-content ml-8">hour(s)</div>
-</div>
+  <road-label class="mb-8">Duration of the service</road-label>
+  <div class="d-flex align-items-center">
+    <road-input 
+      class="input"
+      aria-label="Duration of the service" 
+      style="width: 100px" 
+      placeholder="00:15"
+      @roadfocus=${() => document.querySelector('.duration').open()}
+    ></road-input>
+    <div class="text-content ml-8">hour(s)</div>
+  </div>
 
-<road-duration 
-  class="duration"
-  header="Duration of the service"
-  @roadselected=${event => document.querySelector('.input').value = event.detail.label}
-></road-duration>
+  <road-duration 
+    class="duration"
+    header="Duration of the service"
+    @roadselected=${event => document.querySelector('.input').value = event.detail.label}
+  ></road-duration>
 `;
 Example.parameters = {
   docs: {

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

@@ -8,34 +8,45 @@ export default {
   argTypes: {
     color: {
       options: ['promo', 'exclu', 'info', 'ecology', 'blackfriday'],
-      control: {
-        type: 'select',
+      control: { type: 'select' },
+      description: 'Defines the color theme of the flap.',
+      table: {
+        defaultValue: { summary: 'promo' },
       },
     },
     size: {
       options: ['sm', 'md'],
-      control: {
-        type: 'select',
+      control: { type: 'select' },
+      description: 'Sets the size of the flap.',
+      table: {
+        defaultValue: { summary: 'md' },
       },
     },
     filled: {
       control: 'boolean',
+      description: 'Determines if the flap has a filled background.',
     },
     ' ': {
       control: 'text',
+      description: 'Content displayed inside the flap.',
     },
   },
   args: {
     color: 'promo',
+    size: 'md',
     ' ': 'Promo',
-    filled: null,
+    filled: false,
   },
 };
 
 const Template = (args) => html`
-<road-flap color="${ifDefined(args.color)}" size="${ifDefined(args.size)}" filled="${ifDefined(args.filled)}">
-  ${unsafeHTML(args[' '])}
-</road-flap>
+  <road-flap 
+    color="${ifDefined(args.color)}" 
+    size="${ifDefined(args.size)}" 
+    ?filled="${args.filled}"
+  >
+    ${unsafeHTML(args[' '])}
+  </road-flap>
 `;
 
 export const Playground = Template.bind({});
@@ -61,12 +72,13 @@ Ecology.args = {
 export const BlackFriday = Template.bind({});
 BlackFriday.args = {
   color: 'blackfriday',
-  ' ': 'BlackFriday',
+  ' ': 'Black Friday',
 };
 
 export const Sizes = Template.bind({});
 Sizes.args = {
-  size: 'md',
+  size: 'sm',
+  ' ': 'Small Size',
 };
 
 export const Filled = Template.bind({});

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

@@ -12,113 +12,142 @@ export default {
   },
   argTypes: {
     disabled: {
+      description: "If `true`, the user cannot interact with the input.",
       control: 'boolean',
     },
     readonly: {
+      description: "If `true`, the user cannot modify the value.",
       control: 'boolean',
     },
     required: {
+      description: "If `true`, the user must fill in a value before submitting a form.",
       control: 'boolean',
     },
     autofocus: {
+      description: "This Boolean attribute lets you specify that a form control should have input focus when the page loads.",
       control: 'boolean',
     },
     spellcheck: {
+      description: "If `true`, the element will have its spelling and grammar checked.",
       control: 'boolean',
     },
     blockdecimal: {
+      description: "If `true`, block decimal.",
       control: 'boolean',
     },
     error: {
+      description: "Error message for the field",
       control: 'text',
     },
     helper: {
+      description: "Helper message for the field",
       control: 'text',
     },
     label: {
+      description: "Label for the field",
       control: 'text',
     },
     name: {
+      description: "The name of the control, which is submitted with the form data.",
       control: 'text',
     },
     placeholder: {
+      description: "Instructional text that shows before the input has a value.",
       control: 'text',
     },
     size: {
+      description: "The initial size of the control. This value is in pixels unless the value of the type attribute is `\"text\"` or `\"password\"`, in which case it is an integer number of characters. This attribute applies only when the `type` attribute is set to `\"text\"`, `\"search\"`, `\"tel\"`, `\"url\"`, `\"email\"`, or `\"password\"`, otherwise it is ignored.",
       control: 'number',
     },
     min: {
+      description: "The minimum value, which must not be greater than its maximum (max attribute) value.",
       control: 'text',
     },
     minlength: {
+      description: "If the value of the type attribute is `text`, `email`, `search`, `password`, `tel`, or `url`, this attribute specifies the minimum number of characters that the user can enter.",
       control: 'number',
     },
     max: {
+      description: "The maximum value, which must not be less than its minimum (min attribute) value.",
       control: 'text',
     },
     maxlength: {
+      description: "If the value of the type attribute is `text`, `email`, `search`, `password`, `tel`, or `url`, this attribute specifies the maximum number of characters that the user can enter.",
       control: 'number',
     },
     step: {
+      description: "Works with the min and max attributes to limit the increments at which a value can be set.\nPossible values are: `\"any\"` or a positive floating point number.",
       control: 'number',
     },
     pattern: {
+      description: "A regular expression that the value is checked against. The pattern must match the entire value, not just some subset. Use the title attribute to describe the pattern to help the user. This attribute applies when the value of the type attribute is `\"text\"`, `\"search\"`, `\"tel\"`, `\"url\"`, `\"email\"`, or `\"password\"`, otherwise it is ignored.",
       control: 'text',
     },
     value: {
+      description: "The value of the input.(for dynamic use use v-model for vue instead)",
       control: 'text',
     },
     sizes: {
+      description: "The sizes of the input.",
       options: ['lg', 'xl'],
       control: {
         type: 'select',
       },
     },
     type: {
+      description: "The type of control to display. The default type is text.",
       options: ['date', 'email', 'number', 'password', 'search', 'tel', 'text', 'url', 'time'],
       control: {
         type: 'select',
       },
     },
     autocapitalize: {
+      description: "Indicates whether and how the text value should be automatically capitalized as it is entered/edited by the user.",
       options: ['on', 'off'],
       control: {
         type: 'select',
       },
     },
     autocomplete: {
+      description: "Indicates whether the value of the control can be automatically completed by the browser.",
       options: ['on', 'off', 'name', 'honorific-prefix', 'given-name', 'additional-name', 'family-name', 'honorific-suffix', 'nickname', 'email', 'username', 'new-password', 'current-password', 'one-time-code', 'organization-title', 'organization', 'street-address', 'address-line1', 'address-line2', 'address-line3', 'address-level4', 'address-level3', 'address-level2', 'address-level1', 'country', 'country-name', 'postal-code', 'cc-name', 'cc-given-name', 'cc-additional-name', 'cc-family-name', 'cc-family-name', 'cc-number', 'cc-exp', 'cc-exp-month', 'cc-exp-year', 'cc-csc', 'cc-type', 'transaction-currency', 'transaction-amount', 'language', 'bday', 'bday-day', 'bday-month', 'bday-year', 'sex', 'tel', 'tel-country-code', 'tel-national', 'tel-area-code', 'tel-local', 'tel-extension', 'impp', 'url', 'photo'],
       control: {
         type: 'select',
       },
     },
     autocorrect: {
+      description: "Whether auto correction should be enabled when the user is entering/editing the text value.",
       options: ['on', 'off'],
       control: {
         type: 'select',
       },
     },
     enterkeyhint: {
+      description: "A hint to the browser for which enter key to display.\nPossible values: `\"enter\"`, `\"done\"`, `\"go\"`, `\"next\"`,\n`\"previous\"`, `\"search\"`, and `\"send\"`.",
       options: ['enter', 'done', 'go', 'next', 'previous', 'search', 'send'],
       control: {
         type: 'select',
       },
     },
     inputmode: {
+      description: "A hint to the browser for which keyboard to display.\nThis attribute applies when the value of the type attribute is `\"text\"`, `\"password\"`, `\"email\"`, or `\"url\"`. Possible values are: `\"verbatim\"`, `\"latin\"`, `\"latin-name\"`, `\"latin-prose\"`, `\"full-width-latin\"`, `\"kana\"`, `\"katakana\"`, `\"numeric\"`, `\"tel\"`, `\"email\"`, `\"url\"`.",
       options: ['none', 'text', 'tel', 'url', 'email', 'numeric', 'decimal', 'search'],
       control: {
         type: 'select',
       },
     },
     checklistPassword: {
+      description: "Content the checklist Password exemple.\n`<div class=\"checklist-password mt-16\" slot=\"checklistPassword\">`\n`<span class=\"checklist-password-label\"><strong>Low Safety</strong></span>`\n`<road-progress color=\"danger\" value=\"25\" class=\"mt-8 mb-16\"></road-progress>`\n`<p class=\"text-medium mb-8\">For optimal safety your password must have at least :</p>`\n`<ul class=\"m-0 pl-16\">`\n`<li id=\"letter\" class=\"invalid mb-8\">1 lowercase and 1 uppercase</li>`\n`<li id=\"number\" class=\"invalid mb-8\">1 digit</li>`\n`<li id=\"length\" class=\"invalid\">8 characters minimum</li>`\n`</ul>`\n`</div>`",
       control: {
         type: 'text',
       },
     },
     debounce: {
+      description: "Set the amount of time, in milliseconds, to wait to trigger the `roadChange` event after each keystroke.",
       control: 'number',
     },
     'input-id': {
+      description: "The id of input",
       control: 'text',
     },
     roadblur: {
@@ -144,6 +173,7 @@ export default {
       },
     },
     '--height': {
+      description: "height of the field",
       table: {
         defaultValue: { summary: '3rem' },
       },
@@ -152,6 +182,7 @@ export default {
       },
     },
     '--border-radius': {
+      description: "Border radius of the field",
       table: {
         defaultValue: { summary: '0.25rem' },
       },
@@ -160,6 +191,7 @@ export default {
       },
     },
     '--input-text-align': {
+      description: "align the content of the field",
       table: {
         defaultValue: { summary: 'left' },
       },
@@ -168,6 +200,7 @@ export default {
       },
     },
     '--margin-bottom': {
+      description: "Bottom margin of the field",
       table: {
         defaultValue: { summary: '1rem' },
       },