@roadtrip/components 2.23.0 → 2.25.1

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.css

@@ -1,5 +1,5 @@
 /*
- * Alert
+ * Toast
  *
  *
  * Index
@@ -9,7 +9,6 @@
  * - Feedback color
  * - Feedback icon
  * - Close button
- *
  */
 
 
@@ -101,7 +100,7 @@
  -------------------- */
 
 /**
- * Toast danger
+ * Danger
  */
 
 .toast-danger {
@@ -114,7 +113,7 @@
 }
 
 /**
- * Toast warning
+ * Warning
  */
 
 .toast-warning {
@@ -127,7 +126,7 @@
 }
 
 /**
- * Toast success
+ * Success
  */
 
 .toast-success {
@@ -140,7 +139,7 @@
 }
 
 /**
- * Toast info
+ * Info
  */
 
 .toast-info {

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.css

@@ -2,11 +2,10 @@
  * Toolbar
  *
  * Index
- * - Toolbar container
- * - Toolbar content
- * - Toolbar buttons
- * - Toolbar colors
- *
+ * - Container
+ * - Content
+ * - Buttons
+ * - Colors
  */
 
 :host {
@@ -20,7 +19,7 @@
   border-bottom: 1px solid var(--border);
 }
 
-/* TOOLBAR CONTAINER
+/* CONTAINER
  -------------------- */
 
 .toolbar-container {
@@ -36,7 +35,7 @@
   overflow: hidden;
 }
 
-/* TOOLBAR CONTENT
+/* CONTENT
  -------------------- */
 
 .toolbar-content {
@@ -45,7 +44,7 @@
   max-width: 100%;
 }
 
-/* TOOLBAR BUTTONS
+/* BUTTONS
  -------------------- */
 
 ::slotted(road-button) {
@@ -58,7 +57,7 @@
   font-weight: 400;
 }
 
-/* TOOLBAR COLORS
+/* COLORS
  -------------------- */
 
 :host(.toolbar-primary) {

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.css

@@ -1,3 +1,8 @@
+/*
+ * Toolbar Title
+ *
+ */
+
 :host {
   position: absolute;
   top: 0;

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.css

@@ -1,9 +1,20 @@
+/*
+ * Tooltip
+ *
+ * Index
+ * - Tooltip
+ * - Position
+ */
+
 /**
  * @prop --max-width: The maximum width of the tooltip.
  * @prop --z-index: The z-index of the tooltip.
  * @prop --width: width of the tooltip.
  */
 
+/* TOOLTIP
+ -------------------- */
+
 :host {
   --max-width: 16rem;
   --z-index: 1;
@@ -39,11 +50,11 @@
   opacity: 1;
 }
 
-/* TOOLTIP POSITION
+/* POSITION
  -------------------- */
 
 /**
- * Top position
+ * Top
  */
 
 :host([data-tooltip-position="top"]) .tooltip {
@@ -57,7 +68,7 @@
 }
 
 /**
- * Left position
+ * Left
  */
 
 :host([data-tooltip-position="left"]) .tooltip {
@@ -72,7 +83,7 @@
 }
 
 /**
- * Bottom position
+ * Bottom
  */
 
 :host([data-tooltip-position="bottom"]) .tooltip {
@@ -87,7 +98,7 @@
 }
 
 /**
- * Right position
+ * Right
  */
 
 :host([data-tooltip-position="right"]) .tooltip {