@roadtrip/components 2.25.0 → 2.25.1

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/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,

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

@@ -2,11 +2,11 @@ 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 = () => {
@@ -45,7 +45,7 @@ export class Counter {
       "optional": false,
       "docs": {
         "tags": [],
-        "text": "The id of input"
+        "text": "The id of counter"
       },
       "attribute": "input-id",
       "reflect": false,
@@ -114,7 +114,7 @@ export class Counter {
       "optional": false,
       "docs": {
         "tags": [],
-        "text": "The value of the input."
+        "text": "The value of the counter."
       },
       "attribute": "value",
       "reflect": false,

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

@@ -1,4 +1,5 @@
 import { html } from 'lit-html';
+import { ifDefined } from 'lit-html/directives/if-defined';
 
 export default {
   title: 'Forms/Counter',
@@ -8,41 +9,74 @@ export default {
       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',
+};