@roadtrip/components 2.24.1 → 2.27.0

package/dist/collection/components/select-filter/select-filter.stories.js

@@ -1,113 +1,97 @@
 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: 'Forms/Select Filter',
   component: 'road-select-filter',
   parameters: {
     actions: {
-      handles: ['roadBlur', 'roadFocus'],
+      handles: ['roadblur', 'roadfocus'],
     },
   },
-};
-
-export const Playground = (args) => {
-  const options = [
-    { value: 'audi', label: 'Audi' },
-    { value: 'bmw', label: 'BMW' },
-    { value: 'citroen', label: 'Citroën' },
-    { value: 'mercedes-benz', label: 'Mercedes-benz' },
-    { value: 'peugeot', label: 'Peugeot' },
-    { value: 'renault', label: 'Renault' }
-  ];
-
-  return html`
-  <road-select-filter .options=${options} @roadSelected=${event => args.roadSelected(event.detail)}>
-    <road-input-group>
-      <road-input input-id="brand" label="Brand" class="mb-0"></road-input>
-      <label slot="append" for="brand">
-        <road-icon name="arrow-drop" focusable="false"></road-icon>
-      </label>
-    </road-input-group>
-  </road-select-filter>
-
-  <!-- br are here only until we find how to add a margin only for Storybook docs block, do not copy them -->
-  <br><br><br><br><br><br><br><br><br><br><br><br><br>
-  `;
-};
-Playground.argTypes = {
-  roadSelected: {
-    action: 'roadSelected',
+  argTypes: {
+    ' ': {
+      control: 'text',
+    },
+    'only-select': {
+      control: 'boolean',
+    },
+    parameters: {
+      control: 'object',
+    },
+    roadselected: {
+      action: 'roadselected',
+      control: {
+        type: null,
+      },
+    },
+  },
+  args: {
+    options: [
+      { value: 'audi', label: 'Audi' },
+      { value: 'bmw', label: 'BMW' },
+      { value: 'citroen', label: 'Citroën' },
+      { value: 'mercedes-benz', label: 'Mercedes-benz' },
+      { value: 'peugeot', label: 'Peugeot' },
+      { value: 'renault', label: 'Renault' }
+    ],
+    'only-select': undefined,
+    parameters: {
+      keys: ["value", "label"],
+      threshold: 0.3,
+      ignoreLocation: true,
+    },
+    ' ': `<road-input-group>
+    <road-input input-id="brand" label="Brand" class="mb-0"></road-input>
+    <label slot="append" for="brand">
+      <road-icon name="arrow-drop" focusable="false"></road-icon>
+    </label>
+  </road-input-group>`,
   },
 };
 
-export const WithValue = () => {
-  const options = [
-    { value: 'audi', label: 'Audi' },
-    { value: 'bmw', label: 'BMW' },
-    { value: 'citroen', label: 'Citroën' },
-    { value: 'mercedes-benz', label: 'Mercedes-benz' },
-    { value: 'peugeot', label: 'Peugeot' },
-    { value: 'renault', label: 'Renault' }
-  ];
-
-  return html`
-  <road-select-filter .options=${options}>
-    <road-input-group>
-      <road-input input-id="brand2" label="Brand" value="Audi" class="mb-0"></road-input>
-      <label slot="append" for="brand2">
-        <road-icon name="arrow-drop" focusable="false"></road-icon>
-      </label>
-    </road-input-group>
-  </road-select-filter>
-  `;
-};
+const Template = (args) => html`
+<road-select-filter .options=${args.options} only-select="${ifDefined(args['only-select'])}" @roadselected=${event => args.roadselected(event.detail)}>
+  ${unsafeHTML(args[' '])}
+</road-select-filter>
+`;
 
-export const Disabled = () => {
-  const options = [
-    { value: 'audi', label: 'Audi' },
-    { value: 'bmw', label: 'BMW' },
-    { value: 'citroen', label: 'Citroën' },
-    { value: 'mercedes-benz', label: 'Mercedes-benz' },
-    { value: 'peugeot', label: 'Peugeot' },
-    { value: 'renault', label: 'Renault' }
-  ];
+export const Playground = Template.bind({});
 
-  return html`
-  <road-select-filter .options=${options}>
-    <road-input-group>
-      <road-input input-id="brand3" label="Brand" disabled class="mb-0"></road-input>
-      <label slot="append" for="brand3">
-        <road-icon name="arrow-drop" focusable="false"></road-icon>
-      </label>
-    </road-input-group>
-  </road-select-filter>
-  `;
+export const WithValue = Template.bind({});
+WithValue.args = {
+  ' ': `<road-input-group>
+    <road-input input-id="brand2" label="Brand" value="Audi" class="mb-0"></road-input>
+    <label slot="append" for="brand2">
+      <road-icon name="arrow-drop" focusable="false"></road-icon>
+    </label>
+  </road-input-group>`,
 };
 
-export const Error = () => {
-  const options = [
-    { value: 'audi', label: 'Audi' },
-    { value: 'bmw', label: 'BMW' },
-    { value: 'citroen', label: 'Citroën' },
-    { value: 'mercedes-benz', label: 'Mercedes-benz' },
-    { value: 'peugeot', label: 'Peugeot' },
-    { value: 'renault', label: 'Renault' }
-  ];
+export const Disabled = Template.bind({});
+Disabled.args = {
+  ' ': `<road-input-group>
+    <road-input input-id="brand3" label="Brand" disabled class="mb-0"></road-input>
+    <label slot="append" for="brand3">
+      <road-icon name="arrow-drop" focusable="false"></road-icon>
+    </label>
+  </road-input-group>`,
+};
 
-  return html`
-  <road-select-filter .options=${options}>
-    <road-input-group>
-      <road-input input-id="brand4" label="Brand" error="Select a Brand" class="mb-0"></road-input>
-      <label slot="append" for="brand4">
-        <road-icon name="arrow-drop" focusable="false"></road-icon>
-      </label>
-    </road-input-group>
-  </road-select-filter>
-  `;
+export const Error = Template.bind({});
+Error.args = {
+  ' ': `<road-input-group>
+    <road-input input-id="brand4" label="Brand" error="Select a Brand" class="mb-0"></road-input>
+    <label slot="append" for="brand4">
+      <road-icon name="arrow-drop" focusable="false"></road-icon>
+    </label>
+  </road-input-group>`,
 };
 
-export const withHTML = () => {
-  const options = [
+export const withHTML = Template.bind({});
+withHTML.args = {
+  options: [
     {
       "value": 31,
       "label": "<b>Original equipment electronics</b> > Cleaning Injection",
@@ -120,19 +104,11 @@ export const withHTML = () => {
       "value": 14,
       "label": "<b>Drain and filter</b> > Oil filter + fuel filter",
     }
-  ];
-
-  return html`
-    <road-select-filter .options=${options}>
-      <road-input-group>
-        <road-input input-id="controls" label="Controls" class="mb-0"></road-input>
-        <label slot="append" for="brand">
-          <road-icon name="arrow-drop" focusable="false"></road-icon>
-        </label>
-      </road-input-group>
-    </road-select-filter>
-
-    <!-- br are here only until we find how to add a margin only for Storybook docs block, do not copy them -->
-    <br><br><br><br><br><br><br><br><br><br><br><br><br>
-  `;
+  ],
+  ' ': `<road-input-group>
+    <road-input input-id="controls" label="Controls" class="mb-0"></road-input>
+    <label slot="append" for="brand">
+      <road-icon name="arrow-drop" focusable="false"></road-icon>
+    </label>
+  </road-input-group>`,
 };

package/dist/collection/components/skeleton/skeleton.js

@@ -1,8 +1,7 @@
-import { Component, Host, h } from '@stencil/core';
+import { Component, h } from '@stencil/core';
 export class Skeleton {
   render() {
-    return (h(Host, null,
-      h("span", null, "\u00A0")));
+    return (h("span", null, "\u00A0"));
   }
   static get is() { return "road-skeleton"; }
   static get encapsulation() { return "shadow"; }

package/dist/collection/components/spinner/spinner.js

@@ -1,9 +1,8 @@
-import { Component, Host, h } from '@stencil/core';
+import { Component, h } from '@stencil/core';
 export class Spinner {
   render() {
-    return (h(Host, null,
-      h("svg", { class: "spinner", viewBox: "25 25 50 50" },
-        h("circle", { class: "spinner-circle", cx: "50", cy: "50", r: "20" }))));
+    return (h("svg", { class: "spinner", viewBox: "25 25 50 50" },
+      h("circle", { class: "spinner-circle", cx: "50", cy: "50", r: "20" })));
   }
   static get is() { return "road-spinner"; }
   static get encapsulation() { return "shadow"; }

package/dist/collection/components/switch/switch.js

@@ -3,7 +3,7 @@ import './../../utils/polyfill';
 export class Switch {
   constructor() {
     /**
-     * The id of input
+     * The id of switch
      */
     this.switchId = `road-switch-${switchIds++}`;
     /**
@@ -11,11 +11,11 @@ export class Switch {
      */
     this.name = this.switchId;
     /**
-     * If `true`, the toggle is selected.
+     * If `true`, the switch is checked.
      */
     this.checked = false;
     /**
-     * If `true`, the user cannot interact with the toggle.
+     * If `true`, the user cannot interact with the switch.
      */
     this.disabled = false;
     /**
@@ -50,13 +50,19 @@ export class Switch {
       this.checked = !this.checked;
     };
     this.onFocus = () => {
+      this.roadfocus.emit();
       this.roadFocus.emit();
     };
     this.onBlur = () => {
       this.roadBlur.emit();
+      this.roadblur.emit();
     };
   }
   checkedChanged(isChecked) {
+    this.roadchange.emit({
+      checked: isChecked,
+      value: this.value,
+    });
     this.roadChange.emit({
       checked: isChecked,
       value: this.value,
@@ -96,7 +102,7 @@ export class Switch {
       "optional": false,
       "docs": {
         "tags": [],
-        "text": "The id of input"
+        "text": "The id of switch"
       },
       "attribute": "switch-id",
       "reflect": false,
@@ -132,7 +138,7 @@ export class Switch {
       "optional": false,
       "docs": {
         "tags": [],
-        "text": "If `true`, the toggle is selected."
+        "text": "If `true`, the switch is checked."
       },
       "attribute": "checked",
       "reflect": false,
@@ -150,7 +156,7 @@ export class Switch {
       "optional": false,
       "docs": {
         "tags": [],
-        "text": "If `true`, the user cannot interact with the toggle."
+        "text": "If `true`, the user cannot interact with the switch."
       },
       "attribute": "disabled",
       "reflect": false,
@@ -289,8 +295,8 @@ export class Switch {
     }
   }; }
   static get events() { return [{
-      "method": "roadChange",
-      "name": "roadChange",
+      "method": "roadchange",
+      "name": "roadchange",
       "bubbles": true,
       "cancelable": true,
       "composed": true,
@@ -303,15 +309,66 @@ export class Switch {
         "resolved": "{ checked: boolean; value: string | null | undefined; }",
         "references": {}
       }
+    }, {
+      "method": "roadChange",
+      "name": "roadChange",
+      "bubbles": true,
+      "cancelable": true,
+      "composed": true,
+      "docs": {
+        "tags": [{
+            "name": "internal",
+            "text": undefined
+          }],
+        "text": ""
+      },
+      "complexType": {
+        "original": "{\n    checked: boolean;\n    value: string | undefined | null\n  }",
+        "resolved": "{ checked: boolean; value: string | null | undefined; }",
+        "references": {}
+      }
+    }, {
+      "method": "roadfocus",
+      "name": "roadfocus",
+      "bubbles": true,
+      "cancelable": true,
+      "composed": true,
+      "docs": {
+        "tags": [],
+        "text": "Emitted when the switch has focus."
+      },
+      "complexType": {
+        "original": "void",
+        "resolved": "void",
+        "references": {}
+      }
     }, {
       "method": "roadFocus",
       "name": "roadFocus",
       "bubbles": true,
       "cancelable": true,
       "composed": true,
+      "docs": {
+        "tags": [{
+            "name": "internal",
+            "text": undefined
+          }],
+        "text": ""
+      },
+      "complexType": {
+        "original": "void",
+        "resolved": "void",
+        "references": {}
+      }
+    }, {
+      "method": "roadblur",
+      "name": "roadblur",
+      "bubbles": true,
+      "cancelable": true,
+      "composed": true,
       "docs": {
         "tags": [],
-        "text": "Emitted when the toggle has focus."
+        "text": "Emitted when the switch loses focus."
       },
       "complexType": {
         "original": "void",
@@ -325,8 +382,11 @@ export class Switch {
       "cancelable": true,
       "composed": true,
       "docs": {
-        "tags": [],
-        "text": "Emitted when the toggle loses focus."
+        "tags": [{
+            "name": "internal",
+            "text": undefined
+          }],
+        "text": ""
       },
       "complexType": {
         "original": "void",

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

@@ -6,98 +6,110 @@ export default {
   component: 'road-switch',
   parameters: {
     actions: {
-      handles: ['roadBlur', 'roadFocus'],
+      handles: ['roadblur', 'roadfocus'],
     },
   },
-};
-
-export const Playground = (args) => html`
-  <road-switch 
-    checked="${args.checked}"
-    disabled="${args.disabled}"
-    color="${args.color}"
-    label="${args.label}"
-    name="${ifDefined(args.name)}"
-    value="${args.value}"
-    off="${args.off}"
-    on="${args.on}"
-    has-left-label="${args['has-left-label']}"
-    is-spaced="${args['is-spaced']}"
-    @roadChange=${event => args.roadChange(event.detail)}
-    style="--switch-lever-width: ${args['--switch-lever-width']}"
-  ></road-switch>
-`;
-Playground.args = {
-  checked: false,
-  color: 'secondary',
-  disabled: false,
-  'has-left-label': false,
-  'is-spaced': false,
-  label: 'Label',
-  value: 'on',
-  off: 'no',
-  on: 'yes',
-  '--switch-lever-width': '4.5rem',
-};
-Playground.argTypes = {
-  checked: {
-    control: 'boolean',
-  },
-  disabled: {
-    control: 'boolean',
-  },
-  label: {
-    control: 'text',
-  },
-  name: {
-    control: 'text',
-  },
-  value: {
-    control: 'text',
-  },
-  off: {
-    control: 'text',
-  },
-  on: {
-    control: 'text',
-  },
-  color: {
-    options: ['secondary', 'info', 'success', 'danger', 'warning'],
-    control: {
-      type: 'radio',
+  argTypes: {
+    checked: {
+      control: 'boolean',
+    },
+    disabled: {
+      control: 'boolean',
+    },
+    label: {
+      control: 'text',
+    },
+    name: {
+      control: 'text',
+    },
+    'switch-id': {
+      control: 'text',
+    },
+    value: {
+      control: 'text',
+    },
+    off: {
+      control: 'text',
+    },
+    on: {
+      control: 'text',
+    },
+    color: {
+      options: ['secondary', 'info', 'success', 'danger', 'warning'],
+      control: {
+        type: 'radio',
+      },
+    },
+    'has-left-label': {
+      control: 'boolean',
+    },
+    'is-spaced': {
+      control: 'boolean',
+    },
+    roadblur: {
+      control: {
+        type: null,
+      },
+    },
+    roadfocus: {
+      control: {
+        type: null,
+      },
+    },
+    roadchange: {
+      action: 'roadchange',
+      control: {
+        type: null,
+      },
+    },
+    '--switch-lever-width': {
+      table: {
+        defaultValue: { summary: '4.5rem' },
+      },
+      control: {
+        type: null,
+      },
     },
   },
-  'has-left-label': {
-    control: 'boolean',
-  },
-  'is-spaced': {
-    control: 'boolean',
-  },
-  '--switch-lever-width': {
-    control: 'text',
-  },
-  roadChange: {
-    action: 'roadChange',
+  args: {
+    checked: null,
+    color: null,
+    'has-left-label': null,
+    'is-spaced': null,
+    label: 'Label',
+    value: 'on',
+    off: 'no',
+    on: 'yes',
+    disabled: null,
   },
 };
 
-export const Default = () => html`
-  <road-switch label="Label"></road-switch>
-`;
-
-export const Checked = () => html`
-  <road-switch label="Label" checked></road-switch>
+const Template = (args) => html`
+  <road-switch 
+    checked="${ifDefined(args.checked)}"
+    disabled="${ifDefined(args.disabled)}"
+    color="${ifDefined(args.color)}"
+    label="${ifDefined(args.label)}"
+    name="${ifDefined(args.name)}"
+    value="${ifDefined(args.value)}"
+    off="${ifDefined(args.off)}"
+    on="${ifDefined(args.on)}"
+    has-left-label="${ifDefined(args['has-left-label'])}"
+    is-spaced="${ifDefined(args['is-spaced'])}"
+    switch-id="${ifDefined(args['switch-id'])}"
+    @roadchange=${event => args.roadchange(event.detail)}
+  ></road-switch>
 `;
 
-export const Feedback = () => html`
-  <road-switch label="Label" color="info" checked></road-switch>
-<road-switch label="Label" color="success" checked></road-switch>
-<road-switch label="Label" color="warning" checked></road-switch>
-<road-switch label="Label" color="danger" checked></road-switch>
-`;
+export const Playground = Template.bind({});
 
-export const Position = () => html`
-  <road-switch label="Label" has-left-label></road-switch>
+export const Checked = Template.bind({});
+Checked.args = {
+  checked: true,
+};
 
-<road-switch label="Label" has-left-label is-spaced></road-switch>
-`;
+export const Inverse = Template.bind({});
+Inverse.args = {
+  'has-left-label': true,
+  'is-spaced': true,
+};

package/dist/collection/components/tab-bar/tab-bar.js

@@ -16,6 +16,9 @@ export class TabBar {
   }
   selectedTabChanged() {
     if (this.selectedTab !== undefined) {
+      this.roadtabbarchanged.emit({
+        tab: this.selectedTab,
+      });
       this.roadTabBarChanged.emit({
         tab: this.selectedTab,
       });
@@ -96,6 +99,24 @@ export class TabBar {
     }
   }; }
   static get events() { return [{
+      "method": "roadtabbarchanged",
+      "name": "roadtabbarchanged",
+      "bubbles": true,
+      "cancelable": true,
+      "composed": true,
+      "docs": {
+        "tags": [{
+            "name": "internal",
+            "text": undefined
+          }],
+        "text": ""
+      },
+      "complexType": {
+        "original": "any",
+        "resolved": "any",
+        "references": {}
+      }
+    }, {
       "method": "roadTabBarChanged",
       "name": "roadTabBarChanged",
       "bubbles": true,