@roadtrip/components 2.24.1 → 2.27.0

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

@@ -1,155 +1,170 @@
 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: 'Expand/Collapse',
   component: 'road-collapse',
-};
-
-export const Playground = (args) => html`
-  <road-collapse is-open="${args['is-open']}" show-more="${args['show-more']}" show-less="${args['show-less']}" centered="${args.centered}">
-    <ul class="m-0">
-      <li>Car tire 205/55 R16 91 V</li>
-      <li>Good traction on dry and wet soils.</li>
-      <li>Reduced risk of aquaplaning.</li>
-      <li>Reduced braking distances.</li>
-    </ul>
-    <div slot="collapsed-content">
-      <ul class="m-0">
-        <li>Specific Homologation : <b>non</b></li>
-        <li>XL : <b>non</b></li>
-        <li>Runflat : <b>non</b></li>
-        <li>Seal : <b>non</b></li>
-        <li>Various tire characteristics : <b>MFS</b></li>
-        <li>Tire profile : <b>Energy saver</b></li>
-      </ul>
-    </div>
-  </road-collapse>
-`;
-Playground.args = {
-  'is-open': false,
-  centered: false,
-  'show-less': 'show less',
-  'show-more': 'show more',
-};
-Playground.argTypes = {
-  'is-open': {
-    control: 'boolean',
-  },
-  centered: {
-    control: 'boolean',
+  argTypes: {
+    'is-open': {
+      control: 'boolean',
+    },
+    centered: {
+      control: 'boolean',
+    },
+    'show-less': {
+      control: 'text',
+    },
+    'show-more': {
+      control: 'text',
+    },
+    ' ': {
+      control: 'text',
+    },
+    'collapsed-content': {
+      control: 'text',
+    },
+    '--btn-padding-start': {
+      table: {
+        defaultValue: { summary: '1rem' },
+      },
+      control: {
+        type: null,
+      },
+    },
+    '--btn-padding-end': {
+      table: {
+        defaultValue: { summary: '1rem' },
+      },
+      control: {
+        type: null,
+      },
+    },
+    '--btn-margin-bottom': {
+      table: {
+        defaultValue: { summary: '1rem' },
+      },
+      control: {
+        type: null,
+      },
+    },
+    '--btn-font-size': {
+      table: {
+        defaultValue: { summary: '1rem' },
+      },
+      control: {
+        type: null,
+      },
+    },
+    '--max-height': {
+      table: {
+        defaultValue: { summary: '500px' },
+      },
+      control: {
+        type: null,
+      },
+    },
   },
-  'show-less': {
-    control: 'text',
-  },
-  'show-more': {
-    control: 'text',
+  args: {
+    'is-open': null,
+    centered: null,
+    'show-less': 'show less',
+    'show-more': 'show more',
+    ' ': `<ul class="m-0">
+    <li>Car tire 205/55 R16 91 V</li>
+    <li>Good traction on dry and wet soils.</li>
+    <li>Reduced risk of aquaplaning.</li>
+    <li>Reduced braking distances.</li>
+  </ul>`,
+    'collapsed-content': `<ul class="m-0">
+    <li>Specific Homologation : <b>non</b></li>
+    <li>XL : <b>non</b></li>
+    <li>Runflat : <b>non</b></li>
+    <li>Seal : <b>non</b></li>
+    <li>Various tire characteristics : <b>MFS</b></li>
+    <li>Tire profile : <b>Energy saver</b></li>
+  </ul>`,
   },
 };
 
-export const Default = () => html`
-  <road-collapse show-more="show more" show-less="show less">
-    <ul class="m-0">
-      <li>Car tire 205/55 R16 91 V</li>
-      <li>Good traction on dry and wet soils.</li>
-      <li>Reduced risk of aquaplaning.</li>
-      <li>Reduced braking distances.</li>
-    </ul>
-    <div slot="collapsed-content">
-      <ul class="m-0">
-        <li>Specific Homologation : <b>non</b></li>
-        <li>XL : <b>non</b></li>
-        <li>Runflat : <b>non</b></li>
-        <li>Seal : <b>non</b></li>
-        <li>Various tire characteristics : <b>MFS</b></li>
-        <li>Tire profile : <b>Energy saver</b></li>
-      </ul>
-    </div>
-  </road-collapse>
+const Template = (args) => html`
+<road-collapse is-open="${ifDefined(args['is-open'])}" centered="${ifDefined(args.centered)}" show-more="${args['show-more']}" show-less="${args['show-less']}">
+  ${unsafeHTML(args[' '])}
+  <div slot="collapsed-content">
+    ${unsafeHTML(args['collapsed-content'])}
+  </div>
+</road-collapse>
 `;
 
-export const Open = () => html`
-  <road-collapse is-open showMore="show more" showLess="show less">
-    <ul class="m-0">
-      <li>Car tire 205/55 R16 91 V</li>
-      <li>Good traction on dry and wet soils.</li>
-      <li>Reduced risk of aquaplaning.</li>
-      <li>Reduced braking distances.</li>
-    </ul>
-    <div slot="collapsed-content">
-      <ul class="m-0">
-        <li>Specific Homologation : <b>non</b></li>
-        <li>XL : <b>non</b></li>
-        <li>Runflat : <b>non</b></li>
-        <li>Seal : <b>non</b></li>
-        <li>Various tire characteristics : <b>MFS</b></li>
-        <li>Tire profile : <b>Energy saver</b></li>
-      </ul>
-    </div>
-  </road-collapse>
-`;
+export const Playground = Template.bind({});
+
+export const Open = Template.bind({});
+Open.args = {
+  'is-open': true,
+};
 
-export const VehicleTypes = () => html`
-  <road-collapse centered showMore="show more" showLess="show less">
-    <road-grid>
+export const VehicleTypes = Template.bind({});
+VehicleTypes.args = {
+  centered: true,
+  'show-less': 'show less',
+  'show-more': 'show more',
+  ' ': `<road-grid>
+    <road-row>
+      <road-col class="col-6 col-md-4 col-lg-3">
+        <road-card button value="car">
+          <road-icon name="vehicle-car" size="3x"></road-icon>
+          <road-label>Car</road-label>
+        </road-card>
+      </road-col>
+      <road-col class="col-6 col-md-4 col-lg-3">
+        <road-card button value="4x4">
+          <road-icon name="vehicle-suv" size="3x"></road-icon>
+          <road-label>4x4</road-label>
+        </road-card>
+      </road-col>
+      <road-col class="col-6 col-md-4 col-lg-3">
+        <road-card button value="truck">
+          <road-icon name="vehicle-pickup-van" size="3x"></road-icon>
+          <road-label>Truck</road-label>
+        </road-card>
+      </road-col>
+      <road-col class="col-6 col-md-4 col-lg-3">
+        <road-card button value="bike">
+          <road-icon name="vehicle-moto" size="3x"></road-icon>
+          <road-label>Bike</road-label>
+        </road-card>
+      </road-col>
+    </road-row>
+  </road-grid>`,
+  'collapsed-content': `<road-grid>
       <road-row>
         <road-col class="col-6 col-md-4 col-lg-3">
-          <road-card button value="car">
-            <road-icon name="vehicle-car" size="3x"></road-icon>
-            <road-label>Car</road-label>
+          <road-card button value="scooter">
+            <road-icon name="vehicle-scooter" size="3x"></road-icon>
+            <road-label>Scooter</road-label>
           </road-card>
         </road-col>
         <road-col class="col-6 col-md-4 col-lg-3">
-          <road-card button value="4x4">
-            <road-icon name="vehicle-suv" size="3x"></road-icon>
-            <road-label>4x4</road-label>
+          <road-card button value="competition">
+            <road-icon name="vehicle-rally" size="3x"></road-icon>
+            <road-label>Compétition</road-label>
           </road-card>
         </road-col>
         <road-col class="col-6 col-md-4 col-lg-3">
-          <road-card button value="truck">
-            <road-icon name="vehicle-pickup-van" size="3x"></road-icon>
-            <road-label>Truck</road-label>
+          <road-card button value="colletion">
+            <road-icon name="vehicle-collector" size="3x"></road-icon>
+            <road-label>Colletion</road-label>
           </road-card>
         </road-col>
         <road-col class="col-6 col-md-4 col-lg-3">
-          <road-card button value="bike">
-            <road-icon name="vehicle-moto" size="3x"></road-icon>
-            <road-label>Bike</road-label>
+          <road-card button value="quad">
+            <road-icon name="vehicle-quad" size="3x"></road-icon>
+            <road-label>Quad</road-label>
           </road-card>
         </road-col>
       </road-row>
-    </road-grid>
-    <div slot="collapsed-content">
-      <road-grid>
-        <road-row>
-          <road-col class="col-6 col-md-4 col-lg-3">
-            <road-card button value="scooter">
-              <road-icon name="vehicle-scooter" size="3x"></road-icon>
-              <road-label>Scooter</road-label>
-            </road-card>
-          </road-col>
-          <road-col class="col-6 col-md-4 col-lg-3">
-            <road-card button value="competition">
-              <road-icon name="vehicle-rally" size="3x"></road-icon>
-              <road-label>Compétition</road-label>
-            </road-card>
-          </road-col>
-          <road-col class="col-6 col-md-4 col-lg-3">
-            <road-card button value="colletion">
-              <road-icon name="vehicle-collector" size="3x"></road-icon>
-              <road-label>Colletion</road-label>
-            </road-card>
-          </road-col>
-          <road-col class="col-6 col-md-4 col-lg-3">
-            <road-card button value="quad">
-              <road-icon name="vehicle-quad" size="3x"></road-icon>
-              <road-label>Quad</road-label>
-            </road-card>
-          </road-col>
-        </road-row>
-      </road-grid>
-    </div>
-  </road-collapse>
-`;
+    </road-grid>`,
+},
 VehicleTypes.parameters = {
   backgrounds: {
     default: 'grey',

package/dist/collection/components/counter/counter.js

@@ -1,29 +1,30 @@
-import { Component, Host, h, Prop, Element, Event } from '@stencil/core';
+import { Component, h, Prop, Element, Event } from '@stencil/core';
 export class Counter {
   constructor() {
     /**
-     * The id of input
+     * The id of counter
      */
     this.inputId = `road-counter-${counterIds++}`;
     /**
-     * The value of the input.
+     * The value of the counter.
      */
     this.value = 1;
     this.increase = () => {
       this.el.querySelector('input').stepUp();
+      this.roadincrease.emit();
       this.roadIncrease.emit();
     };
     this.decrease = () => {
       this.el.querySelector('input').stepDown();
+      this.roaddecrease.emit();
       this.roadDecrease.emit();
     };
   }
   render() {
-    return (h(Host, null,
-      h("road-input-group", { class: this.size && `counter-${this.size}` },
-        h("road-button", { slot: "prepend", size: this.size, onClick: this.decrease }, "-"),
-        h("road-input", { type: "number", min: this.min, max: this.max, step: this.step, value: this.value }),
-        h("road-button", { slot: "append", size: this.size, onClick: this.increase }, "+"))));
+    return (h("road-input-group", { class: this.size && `counter-${this.size}` },
+      h("road-button", { slot: "prepend", size: this.size, onClick: this.decrease }, "-"),
+      h("road-input", { type: "number", min: this.min, max: this.max, step: this.step, value: this.value }),
+      h("road-button", { slot: "append", size: this.size, onClick: this.increase }, "+")));
   }
   static get is() { return "road-counter"; }
   static get encapsulation() { return "scoped"; }
@@ -46,7 +47,7 @@ export class Counter {
       "optional": false,
       "docs": {
         "tags": [],
-        "text": "The id of input"
+        "text": "The id of counter"
       },
       "attribute": "input-id",
       "reflect": false,
@@ -115,7 +116,7 @@ export class Counter {
       "optional": false,
       "docs": {
         "tags": [],
-        "text": "The value of the input."
+        "text": "The value of the counter."
       },
       "attribute": "value",
       "reflect": false,
@@ -140,14 +141,47 @@ export class Counter {
     }
   }; }
   static get events() { return [{
+      "method": "roadincrease",
+      "name": "roadincrease",
+      "bubbles": true,
+      "cancelable": true,
+      "composed": true,
+      "docs": {
+        "tags": [],
+        "text": "Emitted when the plus button is clicked"
+      },
+      "complexType": {
+        "original": "void",
+        "resolved": "void",
+        "references": {}
+      }
+    }, {
       "method": "roadIncrease",
       "name": "roadIncrease",
       "bubbles": true,
       "cancelable": true,
       "composed": true,
+      "docs": {
+        "tags": [{
+            "name": "internal",
+            "text": undefined
+          }],
+        "text": ""
+      },
+      "complexType": {
+        "original": "void",
+        "resolved": "void",
+        "references": {}
+      }
+    }, {
+      "method": "roaddecrease",
+      "name": "roaddecrease",
+      "bubbles": true,
+      "cancelable": true,
+      "composed": true,
       "docs": {
         "tags": [],
-        "text": "Emitted when the plus button is clicked"
+        "text": "Emitted when the minus button is clicked"
       },
       "complexType": {
         "original": "void",
@@ -161,8 +195,11 @@ export class Counter {
       "cancelable": true,
       "composed": true,
       "docs": {
-        "tags": [],
-        "text": "Emitted when the minus button is clicked"
+        "tags": [{
+            "name": "internal",
+            "text": undefined
+          }],
+        "text": ""
       },
       "complexType": {
         "original": "void",

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

@@ -1,48 +1,82 @@
 import { html } from 'lit-html';
+import { ifDefined } from 'lit-html/directives/if-defined';
 
 export default {
   title: 'Forms/Counter',
   component: 'road-counter',
   parameters: {
     actions: {
-      handles: ['roadChange', 'roadInput', 'roadBlur', 'roadFocus', 'roadIncrease', 'roadDecrease'],
+      handles: ['roadchange', 'roadinput', 'roadblur', 'roadfocus', 'roadincrease', 'roaddecrease'],
     },
   },
+  argTypes: {
+    'input-id': {
+      control: 'text',
+    },
+    size: {
+      options: ['sm', 'md'],
+      control: {
+        type: 'select',
+      },
+    },
+    min: {
+      control: 'number',
+    },
+    max: {
+      control: 'number',
+    },
+    step: {
+      control: 'number',
+    },
+    value: {
+      control: 'number',
+    },
+    roaddecrease: {
+      control: {
+        type: null,
+      },
+    },
+    roadincrease: {
+      control: {
+        type: null,
+      },
+    },
+    '--counter-margin-bottom': {
+      table: {
+        defaultValue: { summary: '1rem' },
+      },
+      control: {
+        type: null,
+      },
+    },
+  },
+  args: {
+    min: 1,
+    max: 20,
+    step: 1,
+    value: 1,
+  },
 };
 
-export const Playground = ({min, max, step, value}) => html`
+const Template = (args) => html`
   <road-counter 
-    min="${min}" 
-    max="${max}" 
-    step="${step}" 
-    value="${value}" 
+    size="${ifDefined(args.size)}" 
+    min="${ifDefined(args.min)}" 
+    max="${ifDefined(args.max)}" 
+    step="${ifDefined(args.step)}" 
+    value="${ifDefined(args.value)}" 
+    input-id="${ifDefined(args['input-id'])}"
     ></road-counter>
 `;
-Playground.args = {
-  min: 1,
-  max: 20,
-  step: 1,
-  value: 1,
-};
-Playground.argTypes = {
-  min: {
-    control: 'number',
-  },
-  max: {
-    control: 'number',
-  },
-  step: {
-    control: 'number',
-  },
-  value: {
-    control: 'number',
-  },
-};
 
-export const sizes = () => html`
-  <road-counter></road-counter>
+export const Playground = Template.bind({});
 
-  <road-counter size="md"></road-counter>
+export const Medium = Template.bind({});
+Medium.args = {
+  size: 'md',
+};
 
-  <road-counter size="sm"></road-counter>
-`;
+export const Small = Template.bind({});
+Small.args = {
+  size: 'sm',
+};

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

@@ -1,59 +1,103 @@
 import { html } from 'lit-html';
+import { ifDefined } from 'lit-html/directives/if-defined';
+import { unsafeHTML } from 'lit-html/directives/unsafe-html.js';
+import { list } from '../../../.storybook/list';
 
 export default {
   title: 'Modals/Dialog',
   component: 'road-dialog',
   parameters: {
-    docs: {
-      inlineStories: false,
-      iframeHeight: '400px',
+    layout: 'fullscreen',
+    backgrounds: {
+      default: 'grey',
     },
     actions: {
       handles: ['close'],
     },
   },
+  argTypes: {
+    'is-open': {
+      control: 'boolean',
+    },
+    'has-close-icon': {
+      control: 'boolean',
+    },
+    color: {
+      options: ['info', 'success', 'warning', 'danger'],
+      control: {
+        type: 'radio',
+      },
+    },
+    icon: {
+      options: list,
+      control: {
+        type: 'select',
+      },
+    },
+    label: {
+      control: 'text',
+    },
+    description: {
+      control: 'text',
+    },
+    close: {
+      control: {
+        type: null,
+      },
+    },
+    ' ': {
+      control: 'text',
+    },
+    '--z-index': {
+      table: {
+        defaultValue: { summary: '3' },
+      },
+      control: {
+        type: null,
+      },
+    },
+    'dialog-icon': {
+      control: {
+        type: null,
+      },
+    },
+  },
 };
 
-export const Playground = (args) => html`
-  <road-dialog is-open="${args['is-open']}" color="${args.color}" .icon="${args.icon}" label="${args.label}" description="${args.description}" has-close-icon="${args['has-close-icon']}"></road-dialog>
+const Template = (args) => html`
+<road-dialog 
+  is-open="${ifDefined(args['is-open'])}" 
+  color="${ifDefined(args.color)}" 
+  .icon="${ifDefined(args.icon)}" 
+  label="${ifDefined(args.label)}" 
+  description="${ifDefined(args.description)}" 
+  has-close-icon="${ifDefined(args['has-close-icon'])}"
+>
+  ${unsafeHTML(args[' '])}
+</road-dialog>
 `;
+
+export const Playground = Template.bind({});
 Playground.args = {
   'is-open': true,
   color: 'info',
   label: 'Information',
   description: 'Lorem ipsum dolor sit amet, consetetur sadipscing elitr, sed diam nonumy eirmod tempor.',
 };
-Playground.argTypes = {
-  'is-open': {
-    control: 'boolean',
-  },
-  'has-close-icon': {
-    control: 'boolean',
-  },
-  color: {
-    options: ['info', 'success', 'warning', 'danger'],
-    control: {
-      type: 'radio',
-    },
-  },
-  icon: {
-    control: 'text',
-  },
-  label: {
-    control: 'text',
-  },
-  description: {
-    control: 'text',
-  },
-};
 
-export const Information = () => html`
-  <road-dialog is-open color="info" label="Information" description="Lorem ipsum dolor sit amet, consetetur sadipscing elitr, sed diam nonumy eirmod tempor."></road-dialog>
-`;
+export const Error = Template.bind({});
+Error.args = {
+  'is-open': true,
+  color: 'danger',
+  label: 'Error',
+  description: 'Lorem ipsum dolor sit amet, consetetur sadipscing elitr, sed diam nonumy eirmod tempor.',
+};
 
-export const SideActions = () => html`
-  <road-dialog is-open label="Are you sure ?" description="Lorem ipsum dolor sit amet, consetetur sadipscing elitr, sed diam nonumy eirmod tempor.">
-  <road-button class="mb-0" outline expand style="width: 130px" data-dismiss="modal">Cancel</road-button>
-  <road-button class="mb-0" color="secondary" expand style="width: 130px;margin-left: 1rem;">Done</road-button>
-</road-dialog>
-`;
+export const SideActions = Template.bind({});
+SideActions.args = {
+  'is-open': true,
+  label: 'Are you sure ?',
+  description: 'Lorem ipsum dolor sit amet, consetetur sadipscing elitr, sed diam nonumy eirmod tempor.',
+  ' ': `<road-button class="mb-0" outline expand style="width: 130px" data-dismiss="modal">Cancel</road-button>
+  <road-button class="mb-0" color="secondary" expand style="width: 130px;margin-left: 1rem;">Done</road-button>`,
+};