@roadtrip/components 3.32.4 → 3.33.0

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

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/constants.js

@@ -0,0 +1,3 @@
+// list of forbidden characters
+export const forbiddenChars = ['a', 'b', 'c', 'd', 'e', 'f', 'g', 'h', 'i', 'j', 'k', 'l', 'm', 'n', 'o', 'p', 'q', 'r', 's', 't', 'u', 'v', 'w', 'x', 'y', 'z', 'A', 'B', 'C', 'D', 'E', 'F', 'G', 'H', 'I', 'J', 'K', 'L', 'M', 'N', 'O', 'P', 'Q', 'R', 'S', 'T', 'U', 'V', 'W', 'X', 'Y', 'Z', '!', '@', '#', '$', '%', '^', '&', '*', '(', ')', '_', '=', '[', ']', '{', '}', '|', ';', ':', "'", '"', ',', '.', '<', '>', '/', '?'];
+//# sourceMappingURL=constants.js.map

package/dist/collection/components/phone-number-input/constants.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"constants.js","sourceRoot":"","sources":["../../../src/components/phone-number-input/constants.ts"],"names":[],"mappings":"AAAA,+BAA+B;AAC/B,MAAM,CAAC,MAAM,cAAc,GAAG,CAAC,GAAG,EAAE,GAAG,EAAE,GAAG,EAAE,GAAG,EAAE,GAAG,EAAE,GAAG,EAAE,GAAG,EAAE,GAAG,EAAE,GAAG,EAAE,GAAG,EAAE,GAAG,EAAE,GAAG,EAAE,GAAG,EAAE,GAAG,EAAE,GAAG,EAAE,GAAG,EAAE,GAAG,EAAE,GAAG,EAAE,GAAG,EAAE,GAAG,EAAE,GAAG,EAAE,GAAG,EAAE,GAAG,EAAE,GAAG,EAAE,GAAG,EAAE,GAAG,EAAE,GAAG,EAAE,GAAG,EAAE,GAAG,EAAE,GAAG,EAAE,GAAG,EAAE,GAAG,EAAE,GAAG,EAAE,GAAG,EAAE,GAAG,EAAE,GAAG,EAAE,GAAG,EAAE,GAAG,EAAE,GAAG,EAAE,GAAG,EAAE,GAAG,EAAE,GAAG,EAAE,GAAG,EAAE,GAAG,EAAE,GAAG,EAAE,GAAG,EAAE,GAAG,EAAE,GAAG,EAAE,GAAG,EAAE,GAAG,EAAE,GAAG,EAAE,GAAG,EAAC,GAAG,EAAE,GAAG,EAAE,GAAG,EAAE,GAAG,EAAE,GAAG,EAAE,GAAG,EAAE,GAAG,EAAE,GAAG,EAAE,GAAG,EAAE,GAAG,EAAE,GAAG,EAAE,GAAG,EAAE,GAAG,EAAE,GAAG,EAAE,GAAG,EAAE,GAAG,EAAE,GAAG,EAAE,GAAG,EAAE,GAAG,EAAE,GAAG,EAAE,GAAG,EAAE,GAAG,EAAE,GAAG,EAAE,GAAG,EAAE,GAAG,EAAE,GAAG,EAAE,GAAG,CAAC,CAAC","sourcesContent":["// list of forbidden characters\nexport const forbiddenChars = ['a', 'b', 'c', 'd', 'e', 'f', 'g', 'h', 'i', 'j', 'k', 'l', 'm', 'n', 'o', 'p', 'q', 'r', 's', 't', 'u', 'v', 'w', 'x', 'y', 'z', 'A', 'B', 'C', 'D', 'E', 'F', 'G', 'H', 'I', 'J', 'K', 'L', 'M', 'N', 'O', 'P', 'Q', 'R', 'S', 'T', 'U', 'V', 'W', 'X', 'Y', 'Z','!', '@', '#', '$', '%', '^', '&', '*', '(', ')', '_', '=', '[', ']', '{', '}', '|', ';', ':', \"'\", '\"', ',', '.', '<', '>', '/', '?'];\n"]}