@roadtrip/components 3.32.4 → 3.32.5

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

@@ -45,76 +45,94 @@ Playground.args = {
 };
 Playground.argTypes = {
   button: {
+    description: "If `true`, a button tag will be rendered and the item will be tappable.",
     control: 'boolean',
   },
   detail: {
+    description: "If `true`, a detail arrow will appear on the item. Defaults to `false` unless the `mode`\nis `ios` and an `href` or `button` property is present.",
     control: 'boolean',
   },
   active: {
+    description: "If `true`, display an active state item",
     control: 'boolean',
   },
   layout: {
+    description: "How the bottom border should be displayed on the item.",
     options: ['horizontal', 'vertical'],
     control: {
       type: 'radio',
     },
   },
   lines: {
+    description: "How the bottom border should be displayed on the item.",
     options: ['full', 'inset', 'none'],
     control: {
       type: 'radio',
     },
   },
   'detail-icon': {
+    description: "The icon to use when `detail` is set to `true`.",
     options: list,
     control: {
       type: 'select',
     },
   },
   disabled: {
+    description: "If `true`, the user cannot interact with the item.",
     control: 'boolean',
   },
   download: {
+    description: "This attribute instructs browsers to download a URL instead of navigating to\nit, so the user will be prompted to save it as a local file. If the attribute\nhas a value, it is used as the pre-filled file name in the Save prompt\n(the user can still change the file name if they want).",
     control: {
       type: null,
     },
   },
   'title-item': {
+    description: "Title for the item",
     control: 'text',
   },
   text: {
+    description: "Description for the item",
     control: 'text',
   },
   href: {
+    description: "Contains a URL or a URL fragment that the hyperlink points to.\nIf this property is set, an anchor tag will be rendered.",
     control: {
       type: null,
     },
   },
   rel: {
+    description: "Specifies the relationship of the target object to the link object.\nThe value is a space-separated list of [link types](https://developer.mozilla.org/en-US/docs/Web/HTML/Link_types).",
     control: {
       type: null,
     },
   },
   target: {
+    description: "Specifies where to display the linked URL.\nOnly applies when an `href` is provided.\nSpecial keywords: `\"_blank\"`, `\"_self\"`, `\"_parent\"`, `\"_top\"`.",
     control: {
       type: null,
     },
   },
   type: {
+    description: "The type of the button. Only used when an `onclick` or `button` property is present.",
     control: {
       type: null,
     },
   },
   start: {
+    description: "Placed to the left of all other content.",
     control: 'text',
   },
   ' ': {
+    description: "Content of the item.",
     control: 'text',
   },
   end: {
+    description: "Placed to the right of all other content.",
     control: 'text',
   },
   '--border-radius': {
+    description: "Radius of the item border",
     table: {
       defaultValue: { summary: '0.25rem' },
     },
@@ -123,6 +141,7 @@ Playground.argTypes = {
     },
   },
   '--background-color': {
+    description: "Background of the item",
     table: {
       defaultValue: { summary: 'transparent' },
     },
@@ -131,6 +150,7 @@ Playground.argTypes = {
     },
   },
   '--border-color': {
+    description: "Border of the item button",
     table: {
       defaultValue: { summary: 'var(--road-outline-variant)' },
     },
@@ -139,6 +159,7 @@ Playground.argTypes = {
     },
   },
   '--detail-color': {
+    description: "color of the detail icon",
     table: {
       defaultValue: { summary: 'var(--road-grey-900)' },
     },
@@ -147,6 +168,7 @@ Playground.argTypes = {
     },
   },
   '--inner-padding': {
+    description: "inner padding of the item",
     table: {
       defaultValue: { summary: '1rem 0.5rem 1rem 0' },
     },
@@ -155,6 +177,7 @@ Playground.argTypes = {
     },
   },
   '--min-height': {
+    description: "Minimum height of the item",
     table: {
       defaultValue: { summary: '3.5rem' },
     },
@@ -163,6 +186,7 @@ Playground.argTypes = {
     },
   },
   '--padding-left': {
+    description: "Padding left of the native element",
     table: {
       defaultValue: { summary: '1rem' },
     },
@@ -171,6 +195,7 @@ Playground.argTypes = {
     },
   },
   native: {
+    description: "The native HTML button, anchor or div element that wraps all child elements.",
     control: {
       type: null,
     },

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

@@ -12,12 +12,14 @@ export default {
   },
   argTypes: {
     lines: {
+      description: "How the bottom border should be displayed on all items.",
       options: ['full', 'inset', 'none'],
       control: {
         type: 'radio',
       },
     },
     ' ': {
+      description: "Content of the list, it should be road-item elements.",
       control: 'text',
     },
   },

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

@@ -13,30 +13,44 @@ export default {
   },
   argTypes: {
     'is-open': {
+      description: "Set isOpen propertie to true to show the modal",
       control: 'boolean',
     },
     'has-close-icon': {
+      description: "Show / hide close icon",
       control: 'boolean',
+      table: {
+        defaultValue: { summary: 'true' },
+      },
     },
     'has-inverse-header': {
+      description: "inverse header colors",
       control: 'boolean',
     },
     'max-width': {
+      description: "Max width of the modal on desktop",
       control: 'number',
       min: 0,
+      table: {
+        defaultValue: { summary: '696' },
+      },
     },
     'modal-title': {
+      description: "Title of the modal in the header bar",
       control: 'text',
     },
     ' ': {
+      description: "Content of the modal.",
       control: 'text',
     },
     close: {
+      description: "Indicate when closing the modal",
       control: {
         type: null,
       },
     },
     '--z-index': {
+      description: "The z-index of the Modal.",
       table: {
         defaultValue: { summary: '3' },
       },

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

@@ -20,12 +20,15 @@ export default {
   },
   argTypes: {
     ' ': {
+      description: "Content of the navbar, it should be road-navbar-item elements. Max 5 items on Mobile",
       control: 'text',
     },
     'selected-tab': {
+      description: "The selected tab component",
       control: 'text',
     },
     '--z-index': {
+      description: "The z-index of the Navbar.",
       table: {
         defaultValue: { summary: '10' },
       },

package/dist/collection/components/navbar-v2/navbar-v2.stories.js

@@ -20,15 +20,19 @@ export default {
   },
   argTypes: {
     ' ': {
+      description: "Content of the navbar, it should be road-navbar-item elements. Max 5 items on Mobile",
       control: 'text',
     },
     'selected-tab': {
+      description: "The selected tab component",
       control: 'text',
     },
     compact: {
+      description: "Set to `true` for a compact navbar.",
       control: 'boolean',
     },
     '--z-index': {
+      description: "The z-index of the Navbar.",
       table: {
         defaultValue: { summary: '10' },
       },

package/dist/collection/components/phone-number-input/phone-number-input.stories.js

@@ -9,30 +9,44 @@ export default {
   argTypes: {
     countryData: { control: 'object' },
     language: {
+      description: "Used to display countries with the right language",
       control: {
         type: 'select',
         options: ['en', 'fr', 'es', 'pt', 'it', 'nl', 'de']
-      }
+      },
+      table: {
+        defaultValue: { summary: 'fr' },
+      },
     },
     required: {
+      description: "Add a star in the phone input",
       control: 'boolean',
     },
     disabled: {
+      description: "Disable both fields",
       control: 'boolean',
     },
     'country-code': {
+      description: "Selected country code",
       control: 'text',
     },
     'code-label': {
+      description: "Country selection placeHolder",
       control: 'text',
+      table: {
+        defaultValue: { summary: '' },
+      },
     },
     'phone-label': {
+      description: "Phone input placeHolder",
       control: 'text',
     },
     'phone-value': {
+      description: "Value displayed in the phone input",
       control: 'text',
     },
     'error-message': {
+      description: "Error message (displayed only if ther is a message)",
       control: 'text',
     },
   },

package/dist/collection/components/plate-number/plate-number.stories.js

@@ -11,43 +11,56 @@ export default {
   },
   argTypes: {
     country: {
+      description: "country of the plate",
       options: ['FR', 'BE', 'IT', 'ES', 'PT', 'PL', 'AT', 'DE'],
       control: {
         type: 'select',
       },
+      table: {
+        defaultValue: { summary: 'FR' },
+      },
     },
     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',
     },
     placeholder: {
+      description: "overwrite the default placeholder",
       control: 'text',
     },
     motorbike: {
+      description: "Enable motorbike display",
       control: 'boolean',
     },
     value: {
+      description: "The value of the input.",
       control: 'text',
     },
     roadblur: {
+      description: "Emitted when the input loses focus.",
       control: {
         type: null,
       },
     },
     roadfocus: {
+      description: "Emitted when the input has focus.",
       control: {
         type: null,
       },
     },
     roadchange: {
+      description: "Emitted when the value has changed.",
       action: 'roadchange',
       control: {
         type: null,
       },
     },
     roadinput: {
+      description: "Emitted when a keyboard input occurred.",
       action: 'roadinput',
       control: {
         type: null,

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

@@ -7,39 +7,47 @@ export default {
   component: 'road-profil-dropdown',
   argTypes: {
     'is-open': {
+      description: "Set to `true` to open the dropdown menu and to `false` to close it.",
       control: 'boolean',
     },
     ' ': {
+      description: "Element how will open the dropdown when clicked",
       control: {
         type: null,
       },
     },
     list: {
+      description: "List of item values (you can add border with lines=`full` but not on the last item)",
       control: {
         type: 'text',
       },
     },
     avatar: {
+      description: "Content of the avatar (img or First letter) <road-img> or <road-label>.",
       control: {
         type: 'text',
       },
     },
     avatarItem: {
+      description: "Content of the avatar item (img or First letter) <road-img> or <road-label>.",
       control: {
         type: 'text',
       },
     },
     name: {
+      description: "Content First and Last Name.",
       control: {
         type: 'text',
       },
     },
     email: {
+      description: "Content email.",
       control: {
         type: 'text',
       },
     },
     '--margin-top': {
+      description: "Top margin of the menu",
       table: {
         defaultValue: { summary: '0.5rem' },
       },

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

@@ -20,6 +20,7 @@ Playground.args = {
 };
 Playground.argTypes = {
   value: {
+    description: "The value determines how much of the active bar should display.\nThe value should be between [0, 100].",
     control: {
       type: 'number',
       min: '0',
@@ -27,6 +28,7 @@ Playground.argTypes = {
     },
   },
   numbersteps: {
+    description: "The number of steps should be 4 or 5.",
     options: ['4', '5'],
     control: {
       type: 'select',
@@ -35,27 +37,37 @@ Playground.argTypes = {
     },
   },
   label: {
+    description: "Label display in progress bar",
     control: 'text',
   },
   showstep: {
+    description: "Show step",
     control: 'boolean',
   },
   animation: {
+    description: "Animation progress bar",
     control: 'boolean',
   },
   light: {
+    description: "Light progress background",
     control: 'boolean',
   },
   fullwidth: {
+    description: "Add padding if the progress is full width",
     control: 'boolean',
   },
   color: {
+    description: "The color to use from your application's color palette.",
     options: ['primary', 'secondary', 'info', 'success', 'warning', 'danger', 'rating'],
     control: {
       type: 'radio',
     },
+    table: {
+      defaultValue: { summary: 'primary' },
+    },
   },
   '--border-radius': {
+    description: "Border radius of the progress",
     table: {
       defaultValue: { summary: '0.25rem' },
     },

package/dist/collection/components/progress-indicator-horizontal/progress-indicator-horizontal.stories.js

@@ -7,42 +7,50 @@ export default {
   component: 'road-progress-indicator-horizontal',
   argTypes: {
     color: {
+      description: "The color progress-indicator-horizontal.",
       options: ['default', 'header'],
       control: {
         type: 'select',
       },
     },
     'number-step': {
+      description: "The nombre of steps.",
       options: [3, 2],
       control: {
         type: 'select',
       },
     },
     'state-first-step': {
+      description: "The color of the first step.",
       options: ['default', 'current', 'completed', 'in-progress'],
       control: {
         type: 'select',
       },
     },
     'state-second-step': {
+      description: "The color of the second step.",
       options: ['default', 'current', 'completed', 'in-progress'],
       control: {
         type: 'select',
       },
     },
     'state-third-step': {
+      description: "The color of the third step.",
       options: ['default', 'current', 'completed', 'in-progress'],
       control: {
         type: 'select',
       },
     },
     'progress-indicator-horizontal-icon': {
+      description: "if the state of the step 1 is completed add\n`<road-icon name=\"check-small\" class=\"d-block\" style=\"color: currentColor;\"></road-icon>` by default.",
       control: 'text',
     },
     'progress-indicator-horizontal-title': {
+      description: "if the state of the step 2 is completed add\n`<road-icon name=\"check-small\" class=\"d-block\" style=\"color: currentColor;\"></road-icon>` by default.",
       control: 'text',
     },
     'progress-indicator-horizontal-icon2': {
+      description: "if the state of the step 3 is completed add\n`<road-icon name=\"check-small\" class=\"d-block\" style=\"color: currentColor;\"></road-icon>` by default.",
       control: 'text',
     },
     'progress-indicator-horizontal-title2': {

package/dist/collection/components/progress-indicator-vertical/progress-indicator-vertical.stories.js

@@ -10,6 +10,7 @@ export default {
   },
   argTypes: {
     ' ': {
+      description: "content of the stepper item, it should be road-vertical-stepper-item elements.\n\nif the state of the step is completed add the class `completed` on the road-vertical-stepper-item\n\nif the state of the step is in-progress add the class `in-progress` on the road-vertical-stepper-item\n\nif the state of the step is current add the class `current` on the road-vertical-stepper-item\n\n`<road-icon name=\"check-small\" class=\"d-block\" style=\"color: currentColor;\"></road-icon>`",
       control: 'text',
     },
   },

package/dist/collection/components/progress-tracker/progress-tracker.stories.js

@@ -10,6 +10,7 @@ export default {
   },
   argTypes: {
     ' ': {
+      description: "content of the progress stepper tracker item, it should be road-progress-tracker-item elements.\n\nif the state of the step is completed add the class `completed` on the road-progress-tracker-item\nif the state of the step is in progress add the class `in-progress` on the road-progress-tracker-item\nif the state of the step is current add the class `current` on the road-progress-tracker-item",
       control: 'text',
     },
   },

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

@@ -52,47 +52,60 @@ Playground.args = {
 };
 Playground.argTypes = {
   disabled: {
+    description: "If `true`, the user cannot interact with the radio.",
     control: 'boolean',
   },
   required: {
+    description: "If `true`, the user must fill in a value before submitting a form.",
     control: 'boolean',
   },
   inverse: {
+    description: "If `true`, the label and the radio are inverse and spaced",
     control: 'boolean',
   },
   inline: {
+    description: "Inline multiple radio",
     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',
   },
   'secondary-label': {
+    description: "Secondary Label for the field",
     control: 'text',
   },
   asterisk: {
     control: 'boolean',
   },
   name: {
+    description: "The name of the control, which is submitted with the form data.",
     control: 'text',
   },
   value: {
+    description: "Value the form will get",
     control: 'text',
   },
   'radio-id': {
+    description: "The id of radio",
     control: 'text',
   },
   roadblur: {
+    description: "Emitted when the radio button loses focus.",
     control: {
       type: null,
     },
   },
   roadfocus: {
+    description: "Emitted when the radio button has focus.",
     control: {
       type: null,
     },

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

@@ -7,39 +7,50 @@ export default {
   component: 'road-range',
   argTypes: {
     min: {
+      description: "The minimum value, which must not be greater than its maximum (max attribute) value.",
       control: 'number',
     },
     max: {
+      description: "The maximum value, which must not be less than its minimum (min attribute) value.",
       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',
     },
     value: {
+      description: "The value of the range.",
       control: 'number',
     },
     'show-value': {
+      description: "Display the current value of the range",
       control: 'boolean',
     },
     'show-tick': {
+      description: "Display Tick of the range",
       control: 'boolean',
     },
     'show-labels': {
+      description: "Display labels of the range",
       control: 'boolean',
     },
     datalist: {
+      description: "list of labels. also put show-labels=\"true\" and max=\"10\" for this exemple\n`<datalist id=\"tickmarks\" slot=\"datalist\" class=\"tickmarks\">`\n`<option value=\"0\" label=\"0%\"></option>`\n`<option value=\"10\" label=\"10%\"></option>`\n`<option value=\"20\" label=\"20%\"></option>`\n`<option value=\"30\" label=\"30%\"></option>`\n`<option value=\"40\" label=\"40%\"></option>`\n`<option value=\"50\" label=\"50%\"></option>`\n`<option value=\"60\" label=\"60%\"></option>`\n`<option value=\"70\" label=\"70%\"></option>`\n`<option value=\"80\" label=\"80%\"></option>`\n`<option value=\"90\" label=\"90%\"></option>`\n`<option value=\"100\" label=\"100%\"></option>`\n`</datalist>`",
       control: 'text',
     },
     'range-id': {
+      description: "The id of range",
       control: 'text',
     },
     roadchange: {
+      description: "Emitted when the value has changed.",
       action: 'roadchange',
       control: {
         type: null,
       },
     },
     disabled: {
+      description: "If true, the range will be disabled",
       control: 'boolean',
     },
   },

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

@@ -6,12 +6,14 @@ export default {
   component: 'road-rating',
   argTypes: {
     size: {
+      description: "The button size.",
       options: ['extra-small', 'small', 'medium'],
       control: {
         type: 'select',
       },
     },
     rate: {
+      description: "Rate review between 0 and 5",
       control: {
         type: 'number',
         min: '0',
@@ -19,21 +21,26 @@ export default {
       },
     },
     showreviews: {
+      description: "Show reviews",
       control: 'boolean',
     },
     reviews: {
+      description: "number of reviews",
       control: {
         type: 'number',
         min: '0',
       },
     },
     'reviews-text': {
+      description: "Word display next to the number of reviews.",
       control: 'text',
     },
     url: {
+      description: "Url.",
       control: 'text',
     },
     readonly: {
+      description: "Read Only",
       control: 'boolean',
     },
   },