@roadtrip/components 2.24.1 → 2.27.0

package/dist/collection/components/checkbox/checkbox.js

@@ -18,7 +18,7 @@ export class Checkbox {
      */
     this.required = false;
     /**
-     * If `true`, the checkbox is selected.
+     * If `true`, the checkbox is checked.
      */
     this.checked = false;
     /**
@@ -41,13 +41,19 @@ export class Checkbox {
       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,
@@ -142,7 +148,7 @@ export class Checkbox {
       "optional": false,
       "docs": {
         "tags": [],
-        "text": "If `true`, the checkbox is selected."
+        "text": "If `true`, the checkbox is checked."
       },
       "attribute": "checked",
       "reflect": false,
@@ -239,8 +245,8 @@ export class Checkbox {
     }
   }; }
   static get events() { return [{
-      "method": "roadChange",
-      "name": "roadChange",
+      "method": "roadchange",
+      "name": "roadchange",
       "bubbles": true,
       "cancelable": true,
       "composed": true,
@@ -253,15 +259,66 @@ export class Checkbox {
         "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 checkbox 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 checkbox loses focus."
       },
       "complexType": {
         "original": "void",
@@ -275,8 +332,11 @@ export class Checkbox {
       "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/checkbox/checkbox.stories.js

@@ -6,78 +6,103 @@ export default {
   component: 'road-checkbox',
   parameters: {
     actions: {
-      handles: ['roadBlur', 'roadFocus'],
+      handles: ['roadblur', 'roadfocus'],
     },
   },
-};
-
-export const Playground = (args) => html`
-  <road-checkbox 
-    checked="${args.checked}"
-    disabled="${args.disabled}"
-    required="${args.required}"
-    inverse="${args.inverse}"
-    error="${ifDefined(args.error)}"
-    label="${args.label}"
-    name="${ifDefined(args.name)}"
-    value="${args.value}"
-    @roadChange=${event => args.roadChange(event.detail)}
-  ></road-checkbox>
-`;
-Playground.args = {
-  checked: false,
-  disabled: false,
-  required: false,
-  inverse: false,
-  label: 'Label',
-  value: 'on',
-};
-Playground.argTypes = {
-  checked: {
-    control: 'boolean',
-  },
-  disabled: {
-    control: 'boolean',
-  },
-  required: {
-    control: 'boolean',
-  },
-  inverse: {
-    control: 'boolean',
-  },
-  error: {
-    control: 'text',
-  },
-  label: {
-    control: 'text',
-  },
-  name: {
-    control: 'text',
-  },
-  value: {
-    control: 'text',
+  argTypes: {
+    checked: {
+      control: 'boolean',
+    },
+    disabled: {
+      control: 'boolean',
+    },
+    required: {
+      control: 'boolean',
+    },
+    inverse: {
+      control: 'boolean',
+    },
+    error: {
+      control: 'text',
+    },
+    label: {
+      control: 'text',
+    },
+    name: {
+      control: 'text',
+    },
+    'checkbox-id': {
+      control: 'text',
+    },
+    value: {
+      control: 'text',
+    },
+    ' ': {
+      control: {
+        type: null,
+      },
+    },
+    roadblur: {
+      control: {
+        type: null,
+      },
+    },
+    roadfocus: {
+      control: {
+        type: null,
+      },
+    },
+    roadchange: {
+      action: 'roadchange',
+      control: {
+        type: null,
+      },
+    },
   },
-  roadChange: {
-    action: 'roadChange',
+  args: {
+    checked: null,
+    disabled: null,
+    inverse: null,
+    label: 'Label',
+    required: null,
+    value: 'on',
   },
 };
 
-export const Default = () => html`
-  <road-checkbox label="Label" value="on"></road-checkbox>
+const Template = (args) => html`
+<road-checkbox 
+  checked="${ifDefined(args.checked)}"
+  disabled="${ifDefined(args.disabled)}"
+  error="${ifDefined(args.error)}"
+  inverse="${ifDefined(args.inverse)}"
+  label="${ifDefined(args.label)}"
+  name="${ifDefined(args.name)}"
+  required="${ifDefined(args.required)}"
+  value="${ifDefined(args.value)}"
+  checkbox-id="${ifDefined(args['checkbox-id'])}"
+  @roadchange=${event => args.roadchange(event.detail)}
+></road-checkbox>
 `;
 
-export const Inverse = () => html`
-  <road-checkbox label="Label" inverse value="on"></road-checkbox>
-`;
+export const Playground  = Template.bind({});
 
-export const Checked = () => html`
-  <road-checkbox label="Label" checked value="on"></road-checkbox>
-`;
+export const Checked = Template.bind({});
+Checked.args = {
+  checked: true,
+};
 
-export const Disabled = () => html`
-  <road-checkbox label="Label" disabled value="on"></road-checkbox>
-`;
+export const Disabled = Template.bind({});
+Disabled.args = {
+  disabled: true,
+};
 
-export const Error = () => html`
-  <road-checkbox label="Label" value="on" required error="Check the checkbox to continue"></road-checkbox>
-`;
+export const Error = Template.bind({});
+Error.args = {
+  required: true,
+  error: 'Check the checkbox to continue',
+};
+
+export const Inverse = Template.bind({});
+Inverse.args = {
+  inverse: true,
+};

package/dist/collection/components/chip/chip.js

@@ -11,15 +11,15 @@ export class Chip {
      */
     this.color = 'default';
     /**
-     * Display an outline style button.
+     * Display an outline style chip.
      */
     this.outline = false;
     /**
-     * Display an outline style button.
+     * The chip size.
      */
     this.size = 'md';
     /**
-     * Display close icon
+     * Display a close icon
      */
     this.hasCloseIcon = false;
   }
@@ -68,7 +68,7 @@ export class Chip {
       "optional": false,
       "docs": {
         "tags": [],
-        "text": "Display an outline style button."
+        "text": "Display an outline style chip."
       },
       "attribute": "outline",
       "reflect": false,
@@ -86,7 +86,7 @@ export class Chip {
       "optional": false,
       "docs": {
         "tags": [],
-        "text": "Display an outline style button."
+        "text": "The chip size."
       },
       "attribute": "size",
       "reflect": false,
@@ -104,7 +104,7 @@ export class Chip {
       "optional": false,
       "docs": {
         "tags": [],
-        "text": "Display close icon"
+        "text": "Display a close icon"
       },
       "attribute": "has-close-icon",
       "reflect": false,

package/dist/collection/components/chip/chip.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/Chip',
@@ -8,96 +10,70 @@ export default {
       default: 'grey',
     },
   },
-};
-
-export const Playground = (args) => html`
-  <road-chip
-    outline="${args.outline}"
-    has-close-icon="${args['has-close-icon']}"
-    size="${args.size}"
-    color="${args.color}"
-  >
-    ${args['']}
-  </road-chip>
-`;
-Playground.args = {
-  '': 'Label',
-  outline: true,
-  'has-close-icon': true,
-  size: 'md',
-  color: 'default',
-};
-Playground.argTypes = {
-  '': {
-    control: 'text',
-  },
-  outline: {
-    control: 'boolean',
-  },
-  'has-close-icon': {
-    control: 'boolean',
-  },
-  size: {
-    options: ['md', 'lg'],
-    control: {
-      type: 'select',
+  argTypes: {
+    ' ': {
+      control: 'text',
     },
-  },
-  color: {
-    options: ['default', 'secondary'],
-    control: {
-      type: 'select',
+    outline: {
+      control: 'boolean',
+    },
+    'has-close-icon': {
+      control: 'boolean',
+    },
+    size: {
+      options: ['md', 'lg'],
+      control: {
+        type: 'select',
+      },
+    },
+    color: {
+      options: ['default', 'secondary'],
+      control: {
+        type: 'select',
+      },
     },
   },
+  args: {
+    outline: null,
+    'has-close-icon': null,
+    ' ': `Label`,
+  },
 };
 
-export const FilterChips = () => html`
-  <road-chip outline has-close-icon>
-  Summer
-</road-chip>
-
-<road-chip outline has-close-icon>
-  Michelin
-</road-chip>
-
-<road-chip outline has-close-icon>
-  20 € - 50 €
-</road-chip>
-`;
-
-export const LeadingIcon = () => html`
-  <road-chip outline has-close-icon>
-  <road-icon name="petrol" size="sm"></road-icon>
-  A
-</road-chip>
-
-<road-chip outline has-close-icon>
-  <road-icon name="weather-rain" size="sm"></road-icon>
-  B
-</road-chip>
-
-<road-chip outline has-close-icon>
-  <road-icon name="sound-2" size="sm"></road-icon>
-  66
+const Template = (args) => html`
+<road-chip
+  outline="${ifDefined(args.outline)}"
+  has-close-icon="${ifDefined(args['has-close-icon'])}"
+  size="${ifDefined(args.size)}"
+  color="${ifDefined(args.color)}"
+>
+  ${unsafeHTML(args[' '])}
 </road-chip>
 `;
 
-export const ResetFilterChip = () => html`
-  <road-chip color="secondary">
-  Reset
-</road-chip>
-`;
+export const Playground = Template.bind({});
+Playground.args = {
+  outline: true,
+  'has-close-icon': true,
+};
 
-export const TagChips = () => html`
-  <road-chip outline size="lg">
-  Revision
-</road-chip>
+export const withIcon = Template.bind({});
+withIcon.args = {
+  outline: true,
+  'has-close-icon': true,
+  ' ': `<road-icon name="weather-rain" class="mr-4" size="sm"></road-icon>
+  B`,
+};
 
-<road-chip outline size="lg">
-  Number plate
-</road-chip>
+export const Color = Template.bind({});
+Color.args = {
+  color: 'secondary',
+  ' ': `Reset`,
+};
 
-<road-chip outline size="lg">
-  Car registration
-</road-chip>
-`;
+export const Size = Template.bind({});
+Size.args = {
+  outline: true,
+  size: 'lg',
+  ' ': `Revision`,
+};

package/dist/collection/components/col/col.js

@@ -1,11 +1,10 @@
-import { Component, Host, h } from '@stencil/core';
+import { Component, h } from '@stencil/core';
 /**
  * @slot  - Content of the column.
  */
 export class Col {
   render() {
-    return (h(Host, null,
-      h("slot", null)));
+    return (h("slot", null));
   }
   static get is() { return "road-col"; }
   static get encapsulation() { return "shadow"; }

package/dist/collection/components/collapse/collapse.js

@@ -1,12 +1,12 @@
 import { Component, Host, h, Prop } from '@stencil/core';
 /**
  * @slot  - Content visible when collapsed.
- * @slot collapsed-content - content invisible when collapsed.
+ * @slot collapsed-content - content not visible when collapsed.
  */
 export class Collapse {
   constructor() {
     /**
-     * Set open to true to show the accordion element and to false to hide it.
+     * Set to `true` to display the collapsed part and to `false` to hide it.
      */
     this.isOpen = false;
     /**
@@ -14,11 +14,11 @@ export class Collapse {
      */
     this.showMore = 'show more';
     /**
-     * Text displayed in the button when the content is collapsed
+     * Text displayed in the button when the content is not collapsed
      */
     this.showLess = 'show less';
     /**
-     * if "`true`" the button will be centered
+     * if `true` the button will be centered
      */
     this.centered = false;
     /**
@@ -60,7 +60,7 @@ export class Collapse {
       "optional": false,
       "docs": {
         "tags": [],
-        "text": "Set open to true to show the accordion element and to false to hide it."
+        "text": "Set to `true` to display the collapsed part and to `false` to hide it."
       },
       "attribute": "is-open",
       "reflect": false,
@@ -96,7 +96,7 @@ export class Collapse {
       "optional": false,
       "docs": {
         "tags": [],
-        "text": "Text displayed in the button when the content is collapsed"
+        "text": "Text displayed in the button when the content is not collapsed"
       },
       "attribute": "show-less",
       "reflect": false,
@@ -114,7 +114,7 @@ export class Collapse {
       "optional": false,
       "docs": {
         "tags": [],
-        "text": "if \"`true`\" the button will be centered"
+        "text": "if `true` the button will be centered"
       },
       "attribute": "centered",
       "reflect": false,