@roadtrip/components 2.25.0 → 2.25.1

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

@@ -1,12 +1,13 @@
 import { html } from 'lit-html';
+import { unsafeHTML } from 'lit-html/directives/unsafe-html.js';
 
 export default {
   title: 'Navigation/Tabs',
   component: 'road-tabs',
   subcomponents: {
-    RoadTabBar: 'road-tab-bar',
-    RoadTabButton: 'road-tab-button',
-    RoadTab: 'road-tab',
+    'road-tab-bar': 'road-tab-bar',
+    'road-tab-button': 'road-tab-button',
+    'road-tab': 'road-tab',
   },
   parameters: {
     actions: {
@@ -15,13 +16,73 @@ export default {
     backgrounds: {
       default: 'grey',
     },
-    layout: 'fullscreen',
+  },
+  argTypes: {
+    top: {
+      control: 'text',
+    },
+    ' ': {
+      control: 'text',
+    },
+    roadTabsDidChange: {
+      control: {
+        type: null,
+      },
+    },
+    roadTabsWillChange: {
+      control: {
+        type: null,
+      },
+    },
+    getSelected : {
+      description: 'Get the currently selected tab.',
+      table: {
+        category: 'methods',
+        type: {
+          summary: 'getSelected() => Promise<string | undefined>',
+        },
+      },
+      defaultValue: {
+        summary: null,
+      },
+    },
+    getTab : {
+      description: 'Get a specific tab by the value of its `tab` property or an element reference.',
+      table: {
+        category: 'methods',
+        type: {
+          summary: 'getTab(tab: string | HTMLRoadTabElement) => Promise<HTMLRoadTabElement | undefined>',
+        },
+      },
+      defaultValue: {
+        summary: null,
+      },
+    },
+    select : {
+      description: 'Select a tab by the value of its `tab` property or an element reference.',
+      table: {
+        category: 'methods',
+        type: {
+          summary: 'select(tab: string | HTMLRoadTabElement) => Promise<boolean>',
+        },
+      },
+      defaultValue: {
+        summary: null,
+      },
+    },
   },
 };
 
-export const Default = () => html`
+const Template = (args) => html`
 <road-tabs>
-  <road-tab-bar slot="top" selected-tab="tab-description">
+  ${unsafeHTML(args.top)}
+  ${unsafeHTML(args[' '])}
+</road-tabs>
+`;
+
+export const Playground = Template.bind({});
+Playground.args = {
+  top: `<road-tab-bar slot="top" selected-tab="tab-description">
     <road-tab-button tab="tab-description">
       <road-label>Description</road-label>
     </road-tab-button>
@@ -29,21 +90,19 @@ export const Default = () => html`
     <road-tab-button tab="tab-services">
       <road-label>Service</road-label>
     </road-tab-button>
-  </road-tab-bar>
-
-  <road-tab tab="tab-description">
+  </road-tab-bar>`,
+  ' ': `<road-tab tab="tab-description">
     Description
   </road-tab>
 
   <road-tab tab="tab-services">
     Services
-  </road-tab>
-</road-tabs>
-`;
+  </road-tab>`,
+};
 
-export const Scrollable = () => html`
-<road-tabs>
-  <road-tab-bar slot="top" selected-tab="tab-description">
+export const Scrollable = Template.bind({});
+Scrollable.args = {
+  top: `<road-tab-bar slot="top" selected-tab="tab-description">
     <road-tab-button tab="tab-description">
       <road-label>Description</road-label>
     </road-tab-button>
@@ -59,9 +118,8 @@ export const Scrollable = () => html`
     <road-tab-button tab="tab-reviews">
       <road-label>Reviews</road-label>
     </road-tab-button>
-  </road-tab-bar>
-
-  <road-tab tab="tab-description">
+  </road-tab-bar>`,
+  ' ': `<road-tab tab="tab-description">
     Description
   </road-tab>
 
@@ -75,13 +133,12 @@ export const Scrollable = () => html`
 
   <road-tab tab="tab-reviews">
     Reviews
-  </road-tab>
-</road-tabs>
-`;
+  </road-tab>`,
+};
 
-export const Center = () => html`
-<road-tabs>
-  <road-tab-bar slot="top" center>
+export const Center = Template.bind({});
+Center.args = {
+  top: `<road-tab-bar slot="top" center="true">
     <road-tab-button tab="tab-list">
       <road-label>List</road-label>
     </road-tab-button>
@@ -89,21 +146,19 @@ export const Center = () => html`
     <road-tab-button tab="tab-map">
       <road-label>Map</road-label>
     </road-tab-button>
-  </road-tab-bar>
-
-  <road-tab tab="tab-list">
+  </road-tab-bar>`,
+  ' ': `<road-tab tab="tab-list">
     List
   </road-tab>
 
   <road-tab tab="tab-map">
     Map
-  </road-tab>
-</road-tabs>
-`;
+  </road-tab>`,
+};
 
-export const Expand = () => html`
-<road-tabs>
-  <road-tab-bar slot="top" expand>
+export const Expand = Template.bind({});
+Expand.args = {
+  top: `<road-tab-bar slot="top" expand="true">
     <road-tab-button tab="tab-list">
       <road-label>List</road-label>
     </road-tab-button>
@@ -111,21 +166,19 @@ export const Expand = () => html`
     <road-tab-button tab="tab-map">
       <road-label>Map</road-label>
     </road-tab-button>
-  </road-tab-bar>
-
-  <road-tab tab="tab-list">
+  </road-tab-bar>`,
+  ' ': `<road-tab tab="tab-list">
     List
   </road-tab>
 
   <road-tab tab="tab-map">
     Map
-  </road-tab>
-</road-tabs>
-`;
+  </road-tab>`,
+};
 
-export const LeadingIcon = () => html`
-<road-tabs>
-  <road-tab-bar slot="top" expand>
+export const LeadingIcon = Template.bind({});
+LeadingIcon.args = {
+  top: `<road-tab-bar slot="top" expand="true">
     <road-tab-button tab="tab-list">
       <road-icon name="garage"></road-icon>
       <road-label>List</road-label>
@@ -135,21 +188,19 @@ export const LeadingIcon = () => html`
       <road-icon name="location-pin-all"></road-icon>
       <road-label>Map</road-label>
     </road-tab-button>
-  </road-tab-bar>
-
-  <road-tab tab="tab-list">
+  </road-tab-bar>`,
+  ' ': `<road-tab tab="tab-list">
     List
   </road-tab>
 
   <road-tab tab="tab-map">
     Map
-  </road-tab>
-</road-tabs>
-`;
+  </road-tab>`,
+};
 
-export const TopIcon = () => html`
-<road-tabs>
-  <road-tab-bar slot="top" expand>
+export const TopIcon = Template.bind({});
+TopIcon.args = {
+  top: `<road-tab-bar slot="top" expand="true">
     <road-tab-button tab="tab-shops" layout="icon-top">
       <road-icon name="shop"></road-icon>
       <road-label>Shops</road-label>
@@ -164,9 +215,8 @@ export const TopIcon = () => html`
       <road-icon name="factory"></road-icon>
       <road-label>Factories</road-label>
     </road-tab-button>
-  </road-tab-bar>
-
-  <road-tab tab="tab-shops">
+  </road-tab-bar>`,
+  ' ': `<road-tab tab="tab-shops">
     Shops
   </road-tab>
 
@@ -176,6 +226,5 @@ export const TopIcon = () => html`
 
   <road-tab tab="tab-factories">
     Factories
-  </road-tab>
-</road-tabs>
-`;
+  </road-tab>`,
+};

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

@@ -5,13 +5,14 @@ export default {
   component: 'road-text',
 };
 
-export const Playground = ({color}) => html`
-  <road-text color="${color}">
-    Text
-  </road-text>
+export const Playground = (args) => html`
+<road-text color="${args.color}">
+  ${args[' ']}
+</road-text>
 `;
 Playground.args = {
   color: 'info',
+  ' ': 'Text',
 };
 Playground.argTypes = {
   color: {
@@ -20,4 +21,7 @@ Playground.argTypes = {
       type: 'radio',
     },
   },
+  ' ': {
+    control: 'text',
+  },
 };

package/dist/collection/components/textarea/textarea.js

@@ -2,7 +2,7 @@ import { Component, Event, Host, Prop, Watch, h } from '@stencil/core';
 export class Textarea {
   constructor() {
     /**
-     * The id of input
+     * The id of textarea
      */
     this.textareaId = `road-textarea-${textareaIds++}`;
     /**
@@ -10,11 +10,11 @@ export class Textarea {
      */
     this.autocapitalize = 'none';
     /**
-     * This Boolean attribute lets you specify that a form control should have input focus when the page loads.
+     * This Boolean attribute lets you specify that a form control should have focus when the page loads.
      */
     this.autofocus = false;
     /**
-     * If `true`, the user cannot interact with the input.
+     * If `true`, the user cannot interact with the textarea.
      */
     this.disabled = false;
     /**
@@ -34,7 +34,7 @@ export class Textarea {
      */
     this.spellcheck = false;
     /**
-     * The value of the input.
+     * The value of the textarea.
      */
     this.value = '';
     /**
@@ -56,7 +56,7 @@ export class Textarea {
     };
   }
   /**
-   * Update the native input element when the value changes
+   * Update the native textarea element when the value changes
    */
   valueChanged() {
     this.roadChange.emit({ value: this.value });
@@ -95,7 +95,7 @@ export class Textarea {
       "optional": false,
       "docs": {
         "tags": [],
-        "text": "The id of input"
+        "text": "The id of textarea"
       },
       "attribute": "textarea-id",
       "reflect": false,
@@ -131,7 +131,7 @@ export class Textarea {
       "optional": false,
       "docs": {
         "tags": [],
-        "text": "This Boolean attribute lets you specify that a form control should have input focus when the page loads."
+        "text": "This Boolean attribute lets you specify that a form control should have focus when the page loads."
       },
       "attribute": "autofocus",
       "reflect": false,
@@ -149,7 +149,7 @@ export class Textarea {
       "optional": false,
       "docs": {
         "tags": [],
-        "text": "If `true`, the user cannot interact with the input."
+        "text": "If `true`, the user cannot interact with the textarea."
       },
       "attribute": "disabled",
       "reflect": false,
@@ -253,7 +253,7 @@ export class Textarea {
       "optional": true,
       "docs": {
         "tags": [],
-        "text": "Instructional text that shows before the input has a value."
+        "text": "Instructional text that shows before the textarea has a value."
       },
       "attribute": "placeholder",
       "reflect": false
@@ -375,7 +375,7 @@ export class Textarea {
       "optional": true,
       "docs": {
         "tags": [],
-        "text": "The value of the input."
+        "text": "The value of the textarea."
       },
       "attribute": "value",
       "reflect": false,
@@ -459,7 +459,7 @@ export class Textarea {
       "composed": true,
       "docs": {
         "tags": [],
-        "text": "Emitted when the input loses focus."
+        "text": "Emitted when the textarea loses focus."
       },
       "complexType": {
         "original": "void",
@@ -474,7 +474,7 @@ export class Textarea {
       "composed": true,
       "docs": {
         "tags": [],
-        "text": "Emitted when the input has focus."
+        "text": "Emitted when the textarea has focus."
       },
       "complexType": {
         "original": "void",

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

@@ -9,133 +9,155 @@ export default {
       handles: ['roadBlur', 'roadFocus'],
     },
   },
+  argTypes: {
+    disabled: {
+      control: 'boolean',
+    },
+    readonly: {
+      control: 'boolean',
+    },
+    required: {
+      control: 'boolean',
+    },
+    autofocus: {
+      control: 'boolean',
+    },
+    spellcheck: {
+      control: 'boolean',
+    },
+    error: {
+      control: 'text',
+    },
+    label: {
+      control: 'text',
+    },
+    name: {
+      control: 'text',
+    },
+    placeholder: {
+      control: 'text',
+    },
+    minlength: {
+      control: 'number',
+    },
+    maxlength: {
+      control: 'number',
+    },
+    value: {
+      control: 'text',
+    },
+    autocapitalize: {
+      options: ['on', 'off'],
+      control: {
+        type: 'select',
+      },
+    },
+    enterkeyhint: {
+      options: ['enter', 'done', 'go', 'next', 'previous', 'search', 'send'],
+      control: {
+        type: 'select',
+      },
+    },
+    inputmode: {
+      options: ['none', 'text', 'tel', 'url', 'email', 'numeric', 'decimal', 'search'],
+      control: {
+        type: 'select',
+      },
+    },
+    rows: {
+      control: {
+        type: 'number',
+        min: 0,
+      },
+    },
+    cols: {
+      control: {
+        type: 'number',
+        min: 0,
+      },
+    },
+    'textarea-id' : {
+      control: 'text',
+    },
+    wrap: {
+      options: ['hard', 'off', 'soft'],
+      control: {
+        type: 'select',
+      },
+    },
+    roadBlur: {
+      control: {
+        type: null,
+      },
+    },
+    roadFocus: {
+      control: {
+        type: null,
+      },
+    },
+    roadChange: {
+      action: 'roadChange',
+      control: {
+        type: null,
+      },
+    },
+    roadInput: {
+      action: 'roadInput',
+      control: {
+        type: null,
+      },
+    },
+  },
+  args: {
+    label: 'Label',
+    disabled: null,
+    readonly: null,
+    required: null,
+    autofocus: null,
+    spellcheck: null,
+    rows: 5,
+  },
 };
 
-export const Playground = (args) => html`
+const Template = (args) => html`
   <road-textarea
-    label="${args.label}"
-    disabled="${args.disabled}"
-    required="${args.required}"
-    autofocus="${args.autofocus}"
+    textarea-id="${ifDefined(args['textarea-id'])}"
+    label="${ifDefined(args.label)}"
+    disabled="${ifDefined(args.disabled)}"
+    required="${ifDefined(args.required)}"
+    autofocus="${ifDefined(args.autofocus)}"
     error="${ifDefined(args.error)}"
     maxlength="${ifDefined(args.maxlength)}"
     minlength="${ifDefined(args.minlength)}"
     value="${ifDefined(args.value)}" 
-    spellcheck="${args.spellcheck}"
+    spellcheck="${ifDefined(args.spellcheck)}"
     placeholder="${ifDefined(args.placeholder)}"
-    autocapitalize="${args.autocapitalize}"
+    autocapitalize="${ifDefined(args.autocapitalize)}"
     enterkeyhint="${ifDefined(args.enterkeyhint)}"
     inputmode="${ifDefined(args.inputmode)}"
-    rows="${args.rows}"
+    rows="${ifDefined(args.rows)}"
     cols="${ifDefined(args.cols)}"
     wrap="${ifDefined(args.wrap)}"
-    readonly="${args.readonly}"
+    readonly="${ifDefined(args.readonly)}"
     @roadChange=${event => args.roadChange(event.detail.value)}
     @roadInput=${event => args.roadInput(event.target.value)}
   ></road-textarea>
 `;
-Playground.args = {
-  label: 'Label',
-  disabled: false,
-  readonly: false,
-  required: false,
-  autofocus: false,
-  spellcheck: false,
-  rows: 5,
-};
-Playground.argTypes = {
-  disabled: {
-    control: 'boolean',
-  },
-  readonly: {
-    control: 'boolean',
-  },
-  required: {
-    control: 'boolean',
-  },
-  autofocus: {
-    control: 'boolean',
-  },
-  spellcheck: {
-    control: 'boolean',
-  },
-  error: {
-    control: 'text',
-  },
-  label: {
-    control: 'text',
-  },
-  name: {
-    control: 'text',
-  },
-  placeholder: {
-    control: 'text',
-  },
-  minlength: {
-    control: 'number',
-  },
-  maxlength: {
-    control: 'number',
-  },
-  value: {
-    control: 'number',
-  },
-  autocapitalize: {
-    options: ['on', 'off'],
-    control: {
-      type: 'select',
-    },
-  },
-  enterkeyhint: {
-    options: ['enter', 'done', 'go', 'next', 'previous', 'search', 'send'],
-    control: {
-      type: 'select',
-    },
-  },
-  inputmode: {
-    options: ['none', 'text', 'tel', 'url', 'email', 'numeric', 'decimal', 'search'],
-    control: {
-      type: 'select',
-    },
-  },
-  rows: {
-    control: {
-      type: 'number',
-      min: 0,
-    },
-  },
-  cols: {
-    control: {
-      type: 'number',
-      min: 0,
-    },
-  },
-  wrap: {
-    options: ['hard', 'off', 'soft'],
-    control: {
-      type: 'select',
-    },
-  },
-  roadChange: {
-    action: 'roadChange',
-  },
-  roadInput: {
-    action: 'roadInput',
-  },
-};
 
-export const Default = () => html`
-  <road-textarea label="Label" rows="5"></road-textarea>
-`;
+export const Playground = Template.bind({});
 
-export const WithValue = () => html`
-  <road-textarea label="Label" value="Lorem ipsum dolor sit amet, consectetur adipiscing elit. Donec pretium pharetra semper. Fusce lacus metus, facilisis sit amet lacus ut, facilisis dapibus urna." rows="5"></road-textarea>
-`;
+export const WithValue = Template.bind({});
+WithValue.args = {
+  value: 'Lorem ipsum dolor sit amet, consectetur adipiscing elit. Donec pretium pharetra semper. Fusce lacus metus, facilisis sit amet lacus ut, facilisis dapibus urna.',
+};
 
-export const Disabled = () => html`
-  <road-textarea label="Label" disabled rows="5"></road-textarea>
-`;
+export const Disabled = Template.bind({});
+Disabled.args = {
+  disabled: true,
+};
 
-export const Error = () => html`
-  <road-textarea label="Label" rows="5" error="This field is required" required></road-textarea>
-`;
+export const Error = Template.bind({});
+Error.args = {
+  error: 'This field is required',
+  required: true,
+};

package/dist/collection/components/toast/toast.js

@@ -3,11 +3,11 @@ import { navigationClose, alertDanger, alertInfo, alertSuccess, alertWarning } f
 export class Toast {
   constructor() {
     /**
-     * Set open propertie to true to show the toast
+     * Set `open` propertie to `true` to open the toast
      */
     this.isOpen = false;
     /**
-     * Set the color of toast. e.g. info, success, warning, danger
+     * Set the color of the toast. e.g. info, success, warning, danger
      */
     this.color = 'info';
     /**
@@ -107,7 +107,7 @@ export class Toast {
       "optional": false,
       "docs": {
         "tags": [],
-        "text": "Set open propertie to true to show the toast"
+        "text": "Set `open` propertie to `true` to open the toast"
       },
       "attribute": "is-open",
       "reflect": false,
@@ -130,7 +130,7 @@ export class Toast {
       "optional": false,
       "docs": {
         "tags": [],
-        "text": "Set the color of toast. e.g. info, success, warning, danger"
+        "text": "Set the color of the toast. e.g. info, success, warning, danger"
       },
       "attribute": "color",
       "reflect": false,