@roadtrip/components 2.25.0 → 2.25.1

package/dist/collection/components/select-filter/select-filter.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: 'Forms/Select Filter',
@@ -8,104 +10,88 @@ export default {
       handles: ['roadBlur', 'roadFocus'],
     },
   },
-  decorators: [(story) => html`<div style="margin-bottom: 20rem">${story()}</div>`],
-};
-
-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>
-  `;
-};
-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' }
-  ];
+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>
+`;
 
-  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>
-  `;
-};
+export const Playground = Template.bind({});
 
-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' }
-  ];
-
-  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",
@@ -118,16 +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>
-  `;
+  ],
+  ' ': `<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/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;
     /**
@@ -96,7 +96,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 +132,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 +150,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,
@@ -311,7 +311,7 @@ export class Switch {
       "composed": true,
       "docs": {
         "tags": [],
-        "text": "Emitted when the toggle has focus."
+        "text": "Emitted when the switch has focus."
       },
       "complexType": {
         "original": "void",
@@ -326,7 +326,7 @@ export class Switch {
       "composed": true,
       "docs": {
         "tags": [],
-        "text": "Emitted when the toggle loses focus."
+        "text": "Emitted when the switch loses focus."
       },
       "complexType": {
         "original": "void",

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

@@ -9,95 +9,107 @@ export default {
       handles: ['roadBlur', 'roadFocus'],
     },
   },
+  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,
+      },
+    },
+  },
+  args: {
+    checked: null,
+    color: null,
+    'has-left-label': null,
+    'is-spaced': null,
+    label: 'Label',
+    value: 'on',
+    off: 'no',
+    on: 'yes',
+    disabled: null,
+  },
 };
 
-export const Playground = (args) => html`
+const Template = (args) => html`
   <road-switch 
-    checked="${args.checked}"
-    disabled="${args.disabled}"
-    color="${args.color}"
-    label="${args.label}"
+    checked="${ifDefined(args.checked)}"
+    disabled="${ifDefined(args.disabled)}"
+    color="${ifDefined(args.color)}"
+    label="${ifDefined(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']}"
+    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)}
-    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',
-    },
-  },
-  'has-left-label': {
-    control: 'boolean',
-  },
-  'is-spaced': {
-    control: 'boolean',
-  },
-  '--switch-lever-width': {
-    control: 'text',
-  },
-  roadChange: {
-    action: 'roadChange',
-  },
-};
-
-export const Default = () => html`
-  <road-switch label="Label"></road-switch>
-`;
-
-export const Checked = () => html`
-  <road-switch label="Label" checked></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/table/table.stories.js

@@ -1,13 +1,16 @@
 import { html } from 'lit-html';
+import { unsafeHTML } from 'lit-html/directives/unsafe-html.js';
 
 export default {
   title: 'Layout/Table',
   component: 'road-table',
-};
-
-export const Default = () => html`
-  <road-table>
-  <table class="table">
+  argTypes: {
+    ' ': {
+      control: 'text',
+    },
+  },
+  args: {
+    ' ': `<table class="table">
     <thead>
       <tr>
         <th scope="col">Title</th>
@@ -37,6 +40,12 @@ export const Default = () => html`
         <td>Cell</td>
       </tr>
     </tbody>
-  </table>
+  </table>`,
+  },
+};
+
+export const Playground = (args) => html`
+  <road-table>
+  ${unsafeHTML(args[' '])}
 </road-table>
 `;