@roadtrip/components 2.23.0 → 2.25.1

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.css

@@ -5,7 +5,6 @@
  * - Input
  * - Buttons
  * - Sizes
- *
  */
 
 /**

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

@@ -1,12 +1,12 @@
-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 = () => {
@@ -19,11 +19,10 @@ export class Counter {
     };
   }
   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 +45,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 +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',
+};

package/dist/collection/components/dialog/dialog.css

@@ -4,14 +4,13 @@
  * Index
  * - Overlay
  * - Dialog
- * - Dialog content
- * - Dialog header
- * - Dialog close
- * - Dialog body
- * - Dialog title
- * - Dialog description
- * - Dialog footer
- *
+ * - Content
+ * - Header
+ * - Close
+ * - Body
+ * - Title
+ * - Description
+ * - Footer
  */
 
 /**
@@ -82,7 +81,7 @@
   transform: none;
 }
 
-/* DIALOG CONTENT
+/* CONTENT
  -------------------- */
 
 .dialog-content {
@@ -106,7 +105,7 @@
   }
 }
 
-/* DIALOG HEADER
+/* HEADER
  -------------------- */
 
 .dialog-header {
@@ -116,7 +115,7 @@
   height: 3.5rem;
 }
 
-/* DIALOG CLOSE
+/* CLOSE
  -------------------- */
 
 .dialog-close {
@@ -143,7 +142,7 @@
   font-size: 3rem;
 }
 
-/* DIALOG BODY
+/* BODY
  -------------------- */
 
 .dialog-body {
@@ -158,7 +157,7 @@
   }
 }
 
-/* DIALOG TITLE
+/* TITLE
  -------------------- */
 
 .dialog-title {
@@ -169,7 +168,7 @@
   line-height: 1.2;
 }
 
-/* DIALOG DESCRIPTION
+/* DESCRIPTION
  -------------------- */
 
 .dialog-description {
@@ -177,7 +176,7 @@
   font-size: 0.875rem;
 }
 
-/* DIALOG FOOTER
+/* FOOTER
  -------------------- */
 
 .dialog-footer {