@roadtrip/components 2.23.0 → 2.25.1

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

@@ -1,12 +1,13 @@
 import { html } from 'lit-html';
+import { unsafeHTML } from 'lit-html/directives/unsafe-html.js';
 
 export default {
   title: 'Navigation/Tabs',
   component: 'road-tabs',
   subcomponents: {
-    RoadTabBar: 'road-tab-bar',
-    RoadTabButton: 'road-tab-button',
-    RoadTab: 'road-tab',
+    'road-tab-bar': 'road-tab-bar',
+    'road-tab-button': 'road-tab-button',
+    'road-tab': 'road-tab',
   },
   parameters: {
     actions: {
@@ -15,13 +16,73 @@ export default {
     backgrounds: {
       default: 'grey',
     },
-    layout: 'fullscreen',
+  },
+  argTypes: {
+    top: {
+      control: 'text',
+    },
+    ' ': {
+      control: 'text',
+    },
+    roadTabsDidChange: {
+      control: {
+        type: null,
+      },
+    },
+    roadTabsWillChange: {
+      control: {
+        type: null,
+      },
+    },
+    getSelected : {
+      description: 'Get the currently selected tab.',
+      table: {
+        category: 'methods',
+        type: {
+          summary: 'getSelected() => Promise<string | undefined>',
+        },
+      },
+      defaultValue: {
+        summary: null,
+      },
+    },
+    getTab : {
+      description: 'Get a specific tab by the value of its `tab` property or an element reference.',
+      table: {
+        category: 'methods',
+        type: {
+          summary: 'getTab(tab: string | HTMLRoadTabElement) => Promise<HTMLRoadTabElement | undefined>',
+        },
+      },
+      defaultValue: {
+        summary: null,
+      },
+    },
+    select : {
+      description: 'Select a tab by the value of its `tab` property or an element reference.',
+      table: {
+        category: 'methods',
+        type: {
+          summary: 'select(tab: string | HTMLRoadTabElement) => Promise<boolean>',
+        },
+      },
+      defaultValue: {
+        summary: null,
+      },
+    },
   },
 };
 
-export const Default = () => html`
+const Template = (args) => html`
 <road-tabs>
-  <road-tab-bar slot="top" selected-tab="tab-description">
+  ${unsafeHTML(args.top)}
+  ${unsafeHTML(args[' '])}
+</road-tabs>
+`;
+
+export const Playground = Template.bind({});
+Playground.args = {
+  top: `<road-tab-bar slot="top" selected-tab="tab-description">
     <road-tab-button tab="tab-description">
       <road-label>Description</road-label>
     </road-tab-button>
@@ -29,21 +90,19 @@ export const Default = () => html`
     <road-tab-button tab="tab-services">
       <road-label>Service</road-label>
     </road-tab-button>
-  </road-tab-bar>
-
-  <road-tab tab="tab-description">
+  </road-tab-bar>`,
+  ' ': `<road-tab tab="tab-description">
     Description
   </road-tab>
 
   <road-tab tab="tab-services">
     Services
-  </road-tab>
-</road-tabs>
-`;
+  </road-tab>`,
+};
 
-export const Scrollable = () => html`
-<road-tabs>
-  <road-tab-bar slot="top" selected-tab="tab-description">
+export const Scrollable = Template.bind({});
+Scrollable.args = {
+  top: `<road-tab-bar slot="top" selected-tab="tab-description">
     <road-tab-button tab="tab-description">
       <road-label>Description</road-label>
     </road-tab-button>
@@ -59,9 +118,8 @@ export const Scrollable = () => html`
     <road-tab-button tab="tab-reviews">
       <road-label>Reviews</road-label>
     </road-tab-button>
-  </road-tab-bar>
-
-  <road-tab tab="tab-description">
+  </road-tab-bar>`,
+  ' ': `<road-tab tab="tab-description">
     Description
   </road-tab>
 
@@ -75,13 +133,12 @@ export const Scrollable = () => html`
 
   <road-tab tab="tab-reviews">
     Reviews
-  </road-tab>
-</road-tabs>
-`;
+  </road-tab>`,
+};
 
-export const Center = () => html`
-<road-tabs>
-  <road-tab-bar slot="top" center>
+export const Center = Template.bind({});
+Center.args = {
+  top: `<road-tab-bar slot="top" center="true">
     <road-tab-button tab="tab-list">
       <road-label>List</road-label>
     </road-tab-button>
@@ -89,21 +146,19 @@ export const Center = () => html`
     <road-tab-button tab="tab-map">
       <road-label>Map</road-label>
     </road-tab-button>
-  </road-tab-bar>
-
-  <road-tab tab="tab-list">
+  </road-tab-bar>`,
+  ' ': `<road-tab tab="tab-list">
     List
   </road-tab>
 
   <road-tab tab="tab-map">
     Map
-  </road-tab>
-</road-tabs>
-`;
+  </road-tab>`,
+};
 
-export const Expand = () => html`
-<road-tabs>
-  <road-tab-bar slot="top" expand>
+export const Expand = Template.bind({});
+Expand.args = {
+  top: `<road-tab-bar slot="top" expand="true">
     <road-tab-button tab="tab-list">
       <road-label>List</road-label>
     </road-tab-button>
@@ -111,21 +166,19 @@ export const Expand = () => html`
     <road-tab-button tab="tab-map">
       <road-label>Map</road-label>
     </road-tab-button>
-  </road-tab-bar>
-
-  <road-tab tab="tab-list">
+  </road-tab-bar>`,
+  ' ': `<road-tab tab="tab-list">
     List
   </road-tab>
 
   <road-tab tab="tab-map">
     Map
-  </road-tab>
-</road-tabs>
-`;
+  </road-tab>`,
+};
 
-export const LeadingIcon = () => html`
-<road-tabs>
-  <road-tab-bar slot="top" expand>
+export const LeadingIcon = Template.bind({});
+LeadingIcon.args = {
+  top: `<road-tab-bar slot="top" expand="true">
     <road-tab-button tab="tab-list">
       <road-icon name="garage"></road-icon>
       <road-label>List</road-label>
@@ -135,21 +188,19 @@ export const LeadingIcon = () => html`
       <road-icon name="location-pin-all"></road-icon>
       <road-label>Map</road-label>
     </road-tab-button>
-  </road-tab-bar>
-
-  <road-tab tab="tab-list">
+  </road-tab-bar>`,
+  ' ': `<road-tab tab="tab-list">
     List
   </road-tab>
 
   <road-tab tab="tab-map">
     Map
-  </road-tab>
-</road-tabs>
-`;
+  </road-tab>`,
+};
 
-export const TopIcon = () => html`
-<road-tabs>
-  <road-tab-bar slot="top" expand>
+export const TopIcon = Template.bind({});
+TopIcon.args = {
+  top: `<road-tab-bar slot="top" expand="true">
     <road-tab-button tab="tab-shops" layout="icon-top">
       <road-icon name="shop"></road-icon>
       <road-label>Shops</road-label>
@@ -164,9 +215,8 @@ export const TopIcon = () => html`
       <road-icon name="factory"></road-icon>
       <road-label>Factories</road-label>
     </road-tab-button>
-  </road-tab-bar>
-
-  <road-tab tab="tab-shops">
+  </road-tab-bar>`,
+  ' ': `<road-tab tab="tab-shops">
     Shops
   </road-tab>
 
@@ -176,6 +226,5 @@ export const TopIcon = () => html`
 
   <road-tab tab="tab-factories">
     Factories
-  </road-tab>
-</road-tabs>
-`;
+  </road-tab>`,
+};

package/dist/collection/components/text/text.css

@@ -1,46 +1,97 @@
-/* TEXT COLORS
+/*
+ * Text
+ *
+ * Index
+ * - Colors
+ */
+
+/* COLORS
  -------------------- */
 
+/**
+ * Primary
+ */
+
 :host(.text-primary) {
   color: var(--primary);
 }
 
+/**
+ * Secondary
+ */
+
 :host(.text-secondary) {
   color: var(--secondary);
 }
 
+/**
+ * Accent
+ */
+
 :host(.text-accent) {
   color: var(--accent);
 }
 
+/**
+ * Info
+ */
+
 :host(.text-info) {
   color: var(--info);
 }
 
+/**
+ * Success
+ */
+
 :host(.text-success) {
   color: var(--success);
 }
 
+/**
+ * Warning
+ */
+
 :host(.text-warning) {
   color: var(--warning);
 }
 
+/**
+ * Danger
+ */
+
 :host(.text-danger) {
   color: var(--danger);
 }
 
+/**
+ * Default
+ */
+
 :host(.text-default) {
   color: var(--text);
 }
 
+/**
+ * Default second
+ */
+
 :host(.text-default-second) {
   color: var(--text-second);
 }
 
+/**
+ * Disabled
+ */
+
 :host(.text-disabled) {
   color: var(--text-disabled);
 }
 
+/**
+ * White
+ */
+
 :host(.text-white) {
   color: var(--white);
 }

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

@@ -5,13 +5,14 @@ export default {
   component: 'road-text',
 };
 
-export const Playground = ({color}) => html`
-  <road-text color="${color}">
-    Text
-  </road-text>
+export const Playground = (args) => html`
+<road-text color="${args.color}">
+  ${args[' ']}
+</road-text>
 `;
 Playground.args = {
   color: 'info',
+  ' ': 'Text',
 };
 Playground.argTypes = {
   color: {
@@ -20,4 +21,7 @@ Playground.argTypes = {
       type: 'radio',
     },
   },
+  ' ': {
+    control: 'text',
+  },
 };

package/dist/collection/components/textarea/textarea.css

@@ -1,12 +1,11 @@
 /*
- * Input
+ * Textarea
  *
  * Index
  * - Input
  * - Textarea
- * - Input label
- * - Input error
- *
+ * - Label
+ * - Error
  */
 
 
@@ -96,7 +95,7 @@
 }
 
 
-/* INPUT LABEL
+/* LABEL
  -------------------- */
 
 .form-label {
@@ -112,7 +111,7 @@
   transform-origin: 0 0;
 }
 
-/* INPUT ERROR
+/* ERROR
  -------------------- */
 
 .invalid-feedback {

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

@@ -2,7 +2,7 @@ import { Component, Event, Host, Prop, Watch, h } from '@stencil/core';
 export class Textarea {
   constructor() {
     /**
-     * The id of input
+     * The id of textarea
      */
     this.textareaId = `road-textarea-${textareaIds++}`;
     /**
@@ -10,11 +10,11 @@ export class Textarea {
      */
     this.autocapitalize = 'none';
     /**
-     * This Boolean attribute lets you specify that a form control should have input focus when the page loads.
+     * This Boolean attribute lets you specify that a form control should have focus when the page loads.
      */
     this.autofocus = false;
     /**
-     * If `true`, the user cannot interact with the input.
+     * If `true`, the user cannot interact with the textarea.
      */
     this.disabled = false;
     /**
@@ -34,7 +34,7 @@ export class Textarea {
      */
     this.spellcheck = false;
     /**
-     * The value of the input.
+     * The value of the textarea.
      */
     this.value = '';
     /**
@@ -56,7 +56,7 @@ export class Textarea {
     };
   }
   /**
-   * Update the native input element when the value changes
+   * Update the native textarea element when the value changes
    */
   valueChanged() {
     this.roadChange.emit({ value: this.value });
@@ -95,7 +95,7 @@ export class Textarea {
       "optional": false,
       "docs": {
         "tags": [],
-        "text": "The id of input"
+        "text": "The id of textarea"
       },
       "attribute": "textarea-id",
       "reflect": false,
@@ -131,7 +131,7 @@ export class Textarea {
       "optional": false,
       "docs": {
         "tags": [],
-        "text": "This Boolean attribute lets you specify that a form control should have input focus when the page loads."
+        "text": "This Boolean attribute lets you specify that a form control should have focus when the page loads."
       },
       "attribute": "autofocus",
       "reflect": false,
@@ -149,7 +149,7 @@ export class Textarea {
       "optional": false,
       "docs": {
         "tags": [],
-        "text": "If `true`, the user cannot interact with the input."
+        "text": "If `true`, the user cannot interact with the textarea."
       },
       "attribute": "disabled",
       "reflect": false,
@@ -253,7 +253,7 @@ export class Textarea {
       "optional": true,
       "docs": {
         "tags": [],
-        "text": "Instructional text that shows before the input has a value."
+        "text": "Instructional text that shows before the textarea has a value."
       },
       "attribute": "placeholder",
       "reflect": false
@@ -375,7 +375,7 @@ export class Textarea {
       "optional": true,
       "docs": {
         "tags": [],
-        "text": "The value of the input."
+        "text": "The value of the textarea."
       },
       "attribute": "value",
       "reflect": false,
@@ -459,7 +459,7 @@ export class Textarea {
       "composed": true,
       "docs": {
         "tags": [],
-        "text": "Emitted when the input loses focus."
+        "text": "Emitted when the textarea loses focus."
       },
       "complexType": {
         "original": "void",
@@ -474,7 +474,7 @@ export class Textarea {
       "composed": true,
       "docs": {
         "tags": [],
-        "text": "Emitted when the input has focus."
+        "text": "Emitted when the textarea has focus."
       },
       "complexType": {
         "original": "void",