@roadtrip/components 2.23.0 → 2.25.1

package/dist/collection/components/switch/switch.css

@@ -7,11 +7,10 @@
  *
  * Index
  * - Switch
- * - Switch label
- * - Switch lever
- * - Switch feedback
- * - Switch position
- *
+ * - Label
+ * - Lever
+ * - Feedback
+ * - Position
  */
 
 /**
@@ -42,7 +41,7 @@
   opacity: 0;
 }
 
-/* SWITCH LABEL
+/* LABEL
  -------------------- */
 
 .form-switch-label {
@@ -52,7 +51,7 @@
   -webkit-tap-highlight-color: rgba(0, 0, 0, 0);
 }
 
-/* SWITCH LEVER
+/* LEVER
  -------------------- */
 
 .form-switch-lever {
@@ -130,7 +129,7 @@
   box-shadow: 0 0 0 0.125rem var(--white), 0 0 0 0.1875rem var(--secondary);
 }
 
-/* SWITCH FEEDBACK
+/* FEEDBACK
  -------------------- */
 
 /**
@@ -146,7 +145,7 @@
 }
 
 /**
- * Information
+ * Info
  */
 
 .form-switch-input:checked ~ .form-switch-info .form-switch-lever {
@@ -193,7 +192,7 @@
   color: var(--danger-contrast);
 }
 
-/* SWITCH POSITION
+/* POSITION
  -------------------- */
 
 .form-switch-right {

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/tab/tab.js

@@ -44,8 +44,8 @@ export class Tab {
       "optional": false,
       "docs": {
         "tags": [{
-            "text": undefined,
-            "name": "internal"
+            "name": "internal",
+            "text": undefined
           }],
         "text": ""
       },

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

@@ -103,8 +103,8 @@ export class TabBar {
       "composed": true,
       "docs": {
         "tags": [{
-            "text": undefined,
-            "name": "internal"
+            "name": "internal",
+            "text": undefined
           }],
         "text": ""
       },

package/dist/collection/components/tab-button/tab-button.css

@@ -2,11 +2,12 @@
  * Tab button
  *
  * Index
- * - Tab button
- * - Tab item
- * - Tab link
- * - Tab icon
- * - Active state
+ * - Button
+ * - Native
+ * - Underline
+ * - Inner
+ * - Icon
+ * - Label
  *
  */
 
@@ -21,7 +22,7 @@
  */
 
 
-/* TAB BUTTON
+/* BUTTON
  -------------------- */
 
 :host {
@@ -68,7 +69,7 @@
 }
 
 
-/* TAB NATIVE BUTTON
+/* NATIVE
  -------------------- */
 
 .button-native {
@@ -108,7 +109,7 @@
   -webkit-tap-highlight-color: rgba(0, 0, 0, 0);
 }
 
-/* TAB BUTTON UNDERLINE INDICATOR
+/* UNDERLINE
  -------------------- */
 
 .button-native::after {
@@ -125,7 +126,7 @@
   transform-origin: center;
 }
 
-/* TAB BUTTON INNER
+/* INNER
  -------------------- */
 
 .button-inner {
@@ -139,7 +140,7 @@
   height: 100%;
 }
 
-/* TAB ICON
+/* ICON
  -------------------- */
 
 :host ::slotted(road-icon) {
@@ -154,7 +155,7 @@
   flex-direction: column;
 }
 
-/* TAB LABEL
+/* LABEL
  -------------------- */
 
 :host(.tab-layout-icon-top) ::slotted(road-label) {

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

@@ -213,8 +213,8 @@ export class TabButton {
       "composed": true,
       "docs": {
         "tags": [{
-            "text": undefined,
-            "name": "internal"
+            "name": "internal",
+            "text": undefined
           }],
         "text": "Emitted when the tab bar is clicked"
       },

package/dist/collection/components/table/table.css

@@ -1,5 +1,6 @@
 /*
  * Table
+ *
  */
 
 :host {

package/dist/collection/components/table/table.js

@@ -1,11 +1,10 @@
-import { Component, Host, h } from '@stencil/core';
+import { Component, h } from '@stencil/core';
 /**
  * @slot  - Content of table, it should be an html table (https://developer.mozilla.org/fr/docs/Web/HTML/Element/table).
  */
 export class Table {
   render() {
-    return (h(Host, null,
-      h("slot", null)));
+    return (h("slot", null));
   }
   static get is() { return "road-table"; }
   static get encapsulation() { return "scoped"; }

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>
 `;

package/dist/collection/components/tabs/tabs.css

@@ -1,3 +1,8 @@
+/*
+ * Tabs
+ *
+ */
+
 :host {
   position: relative;
   display: block;

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

@@ -139,8 +139,8 @@ export class Tabs {
         "signature": "(tab: string | HTMLRoadTabElement) => Promise<boolean>",
         "parameters": [{
             "tags": [{
-                "text": "tab The tab instance to select. If passed a string, it should be the value of the tab's `tab` property.",
-                "name": "param"
+                "name": "param",
+                "text": "tab The tab instance to select. If passed a string, it should be the value of the tab's `tab` property."
               }],
             "text": "The tab instance to select. If passed a string, it should be the value of the tab's `tab` property."
           }],
@@ -167,8 +167,8 @@ export class Tabs {
         "signature": "(tab: string | HTMLRoadTabElement) => Promise<HTMLRoadTabElement | undefined>",
         "parameters": [{
             "tags": [{
-                "text": "tab The tab instance to select. If passed a string, it should be the value of the tab's `tab` property.",
-                "name": "param"
+                "name": "param",
+                "text": "tab The tab instance to select. If passed a string, it should be the value of the tab's `tab` property."
               }],
             "text": "The tab instance to select. If passed a string, it should be the value of the tab's `tab` property."
           }],