@roadtrip/components 2.24.1 → 2.27.0

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

@@ -6,136 +6,158 @@ export default {
   component: 'road-textarea',
   parameters: {
     actions: {
-      handles: ['roadBlur', 'roadFocus'],
+      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}"
-    @roadChange=${event => args.roadChange(event.detail.value)}
-    @roadInput=${event => args.roadInput(event.target.value)}
+    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,

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

@@ -1,66 +1,80 @@
 import { html } from 'lit-html';
+import { ifDefined } from 'lit-html/directives/if-defined';
 
 export default {
   title: 'Indicators/Toast',
   component: 'road-toast',
   parameters: {
-    docs: {
-      inlineStories: false,
-      iframeHeight: '300px',
-    },
+    layout: 'fullscreen',
     actions: {
       handles: ['close'],
     },
   },
-};
-
-export const Playground = (args) => html`
-  <road-toast is-open="${args['is-open']}" position="${args.position}" color="${args.color}" label="${args.label}" timeout="${args.timeout}"></road-toast>
-`;
-Playground.args = {
-  'is-open': true,
-  position: 'bottom',
-  color: 'info',
-  label: 'Information sticky toast',
-  timeout: 0,
-};
-Playground.argTypes = {
-  'is-open': {
-    control: 'boolean',
-  },
-  position: {
-    options: ['top', 'bottom'],
-    control: {
-      type: 'inline-radio',
+  argTypes: {
+    'is-open': {
+      control: 'boolean',
     },
-  },
-  color: {
-    options: ['info', 'success', 'warning', 'danger'],
-    control: {
-      type: 'radio',
+    position: {
+      options: ['top', 'bottom'],
+      control: {
+        type: 'radio',
+      },
+    },
+    color: {
+      options: ['info', 'success', 'warning', 'danger'],
+      control: {
+        type: 'radio',
+      },
+    },
+    label: {
+      control: 'text',
+    },
+    timeout: {
+      control: 'number',
+      min: 0,
+    },
+    close: {
+      control: {
+        type: null,
+      },
     },
   },
-  label: {
-    control: 'text',
-  },
-  timeout: {
-    control: 'number',
-    min: 0,
+  args: {
+    'is-open': true,
+    label: 'Information sticky toast',
+    timeout: 0,
   },
 };
 
-export const Info = () => html`
-  <road-toast is-open color="info" label="Information sticky toast" timeout="8000"></road-toast>
+const Template = (args) => html`
+<road-toast 
+  is-open="${ifDefined(args['is-open'])}" 
+  position="${ifDefined(args.position)}" 
+  color="${ifDefined(args.color)}" 
+  label="${ifDefined(args.label)}" 
+  timeout="${ifDefined(args.timeout)}"
+></road-toast>
 `;
 
-export const Success = () => html`
-  <road-toast is-open color="success" label="Success sticky toast" timeout="8000"></road-toast>
-`;
+export const Playground = Template.bind({});
 
-export const Warning = () => html`
-  <road-toast is-open color="warning" label="Warning sticky toast" timeout="8000"></road-toast>
-`;
+export const Success = Template.bind({});
+Success.args = {
+  color: 'success',
+  label: 'Success sticky toast',
+  timeout: 5000,
+};
+
+export const Warning = Template.bind({});
+Warning.args = {
+  color: 'warning',
+  label: 'Warning sticky toast',
+  timeout: 5000,
+};
 
-export const Danger = () => html`
-  <road-toast is-open color="danger" label="Danger sticky toast" timeout="8000"></road-toast>
-`;
+export const Danger = Template.bind({});
+Danger.args = {
+  color: 'danger',
+  label: 'Danger sticky toast',
+  timeout: 5000,
+};

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

@@ -1,10 +1,12 @@
 import { html } from 'lit-html';
+import { ifDefined } from 'lit-html/directives/if-defined';
+import { unsafeHTML } from 'lit-html/directives/unsafe-html.js';
 
 export default {
   title: 'Navigation/Toolbar',
   component: 'road-toolbar',
   subcomponents: {
-    RoadToolbarTitle: 'road-toolbar-title'
+    'road-toolbar-title': 'road-toolbar-title',
   },
   parameters: {
     backgrounds: {
@@ -12,22 +14,57 @@ export default {
     },
     layout: 'fullscreen',
   },
+  argTypes: {
+    color: {
+      options: ['primary', 'secondary'],
+      control: {
+        type: 'radio',
+      },
+    },
+    start: {
+      control: 'text',
+    },
+    primary: {
+      control: 'text',
+    },
+    ' ': {
+      control: 'text',
+    },
+    secondary: {
+      control: 'text',
+    },
+    end: {
+      control: 'text',
+    },
+  },
+  args: {
+    color: undefined,
+    start: undefined,
+    primary: undefined,
+    ' ': `<road-toolbar-title>Title</road-toolbar-title>`,
+    secondary: undefined,
+    end: undefined,
+  },
 };
 
-export const Default = () => html`
-  <road-toolbar>
-  <road-toolbar-title>Title</road-toolbar-title>
+const Template = (args) => html`
+<road-toolbar color="${ifDefined(args.color)}">
+  ${unsafeHTML(args.start)}
+  ${unsafeHTML(args.primary)}
+  ${unsafeHTML(args[' '])}
+  ${unsafeHTML(args.secondary)}
+  ${unsafeHTML(args.end)}
 </road-toolbar>
 `;
 
-export const withButtons = () => html`
-  <road-toolbar>
-  <road-button slot="start">
+export const Playground = Template.bind({});
+
+export const withButtons = Template.bind({});
+withButtons.args = {
+  start: `<road-button slot="start">
     <road-icon name="navigation-chevron" rotate="180"></road-icon>
-  </road-button>
-  <road-toolbar-title>Title</road-toolbar-title>
-  <road-button slot="end">
+  </road-button>`,
+  end: `<road-button slot="end">
     <road-icon name="more-horizontal"></road-icon>
-  </road-button>
-</road-toolbar>
-`;
+  </road-button>`,
+};

package/dist/collection/components/toolbar-title/toolbar-title.js

@@ -1,12 +1,11 @@
-import { Component, Host, h } from '@stencil/core';
+import { Component, h } from '@stencil/core';
 /**
  * @slot - Text of the title.
  */
 export class ToolbarTitle {
   render() {
-    return (h(Host, null,
-      h("div", { class: "toolbar-title" },
-        h("slot", null))));
+    return (h("div", { class: "toolbar-title" },
+      h("slot", null)));
   }
   static get is() { return "road-toolbar-title"; }
   static get encapsulation() { return "shadow"; }

package/dist/collection/components/tooltip/tooltip.js

@@ -45,13 +45,13 @@ export class Tooltip {
     };
   }
   /**
-   * Shows the tooltip.
+   * Open the tooltip.
    */
   async open() {
     this.isOpen = true;
   }
   /**
-   * Shows the tooltip.
+   * Close the tooltip.
    */
   async close() {
     this.isOpen = false;
@@ -183,7 +183,7 @@ export class Tooltip {
         "return": "Promise<void>"
       },
       "docs": {
-        "text": "Shows the tooltip.",
+        "text": "Open the tooltip.",
         "tags": []
       }
     },
@@ -199,7 +199,7 @@ export class Tooltip {
         "return": "Promise<void>"
       },
       "docs": {
-        "text": "Shows the tooltip.",
+        "text": "Close the tooltip.",
         "tags": []
       }
     }

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

@@ -1,4 +1,6 @@
 import { html } from 'lit-html';
+import { ifDefined } from 'lit-html/directives/if-defined';
+import { unsafeHTML } from 'lit-html/directives/unsafe-html.js';
 
 export default {
   title: 'Indicators/Tooltip',
@@ -6,15 +8,21 @@ export default {
 };
 
 export const Playground = (args) => html`
-  <road-tooltip is-open="${args['is-open']}" content="${args.content}" position="${args.position}" trigger="${args.trigger}">
-    <road-button class="mb-0">
-      <road-icon name="alert-info" color="secondary"></road-icon>
-    </road-button>
-  </road-tooltip>
+<road-tooltip 
+  is-open="${ifDefined(args['is-open'])}" 
+  tooltip-id="${ifDefined(args['tooltip-id'])}" 
+  content="${ifDefined(args.content)}" 
+  position="${ifDefined(args.position)}" 
+  trigger="${ifDefined(args.trigger)}">
+  <road-button class="mb-0">
+    <road-icon name="alert-info" color="secondary"></road-icon>
+  </road-button>
+  ${unsafeHTML(args['tooltip-content'])}
+</road-tooltip>
 `;
 Playground.args = {
   content: 'Fit & small tooltip',
-  'is-open': false,
+  'is-open': null,
   position: 'right',
   trigger: 'hover',
 };
@@ -22,25 +30,84 @@ Playground.argTypes = {
   'is-open': {
     control: 'boolean',
   },
-  content: {
-    control: 'text',
-  },
   position: {
     options: ['top', 'left', 'bottom', 'right'],
     control: {
       type: 'radio',
     },
   },
+  content: {
+    control: 'text',
+  },
   trigger: {
     options: ['hover', 'click'],
     control: {
       type: 'select',
     },
   },
+  'tooltip-id': {
+    control: 'text',
+  },
+  'tooltip-content': {
+    control: 'text',
+  },
+  open : {
+    description: 'Open the tooltip.',
+    table: {
+      category: 'methods',
+      type: {
+        summary: 'void',
+      },
+    },
+    defaultValue: {
+      summary: null,
+    },
+  },
+  close : {
+    description: 'Close the tooltip.',
+    table: {
+      category: 'methods',
+      type: {
+        summary: 'void',
+      },
+      defaultValue: {
+        summary: null,
+      },
+    },
+  },
+  '--max-width': {
+    table: {
+      defaultValue: { summary: '16rem' },
+    },
+    control: {
+      type: null,
+    },
+  },
+  '--z-index': {
+    table: {
+      defaultValue: { summary: '1' },
+    },
+    control: {
+      type: null,
+    },
+  },
+  '--width': {
+    table: {
+      defaultValue: { summary: 'max-content' },
+    },
+    control: {
+      type: null,
+    },
+  },
+  'tooltip': {
+    control: {
+      type: null,
+    },
+  },
 };
 
 export const MouseOver = () => html`
-  <road-tooltip position="bottom" style="width: 100%;--width: 95%;--max-width: 100%;">
+<road-tooltip position="bottom" style="width: 100%;--width: 95%;--max-width: 100%;">
   <road-item class="bg-light mb-16">
     <road-avatar class="flex-shrink-0 mr-16">
       <road-icon lazy size="3x" name="brake"></road-icon>
@@ -59,7 +126,7 @@ export const MouseOver = () => html`
 `;
 
 export const Click = () => html`
-  <road-tooltip content="Fit & small tooltip" position="right" trigger="click">
+<road-tooltip content="Fit & small tooltip" position="right" trigger="click">
   <road-button class="mb-0">
     <road-icon name="alert-info" color="secondary"></road-icon>
   </road-button>