@roadtrip/components 2.22.0 → 2.24.1

package/dist/collection/components/plate-number/plate-number.stories.js

@@ -13,6 +13,7 @@ export default {
 export const Playground = (args) => html`
   <road-plate-number
     country="${args.country}"
+    .motorbike=${args.motorbike}
     .placeholder=${args.placeholder}
     @roadChange=${event => args.roadChange(event.detail.value)}
     @roadInput=${event => args.roadInput(event.target.value)}
@@ -32,6 +33,9 @@ Playground.argTypes = {
   placeholder: {
     control: 'text',
   },
+  motorbike: {
+    control: 'boolean',
+  },
   roadChange: {
     action: 'roadChange',
   },
@@ -39,3 +43,12 @@ Playground.argTypes = {
     action: 'roadInput',
   },
 };
+
+export const MotorBike = () => html`
+  <road-plate-number
+    country="FR"
+    motorbike
+    style="width: 180px;"
+  >
+  </road-plate-number>
+`;

package/dist/collection/components/progress/progress.css

@@ -4,7 +4,7 @@
  * Index
  * - Progress
  * - Progress Bar
- *
+ * - Feedback
  */
 
 /* PROGRESS
@@ -32,7 +32,7 @@
   transition: width 0.6s ease;
 }
 
-/* PROGRESS BAR FEEDBACK
+/* FEEDBACK
  -------------------- */
 
 :host(.progress-info) .progress-bar {

package/dist/collection/components/radio/radio.css

@@ -7,10 +7,9 @@
  *
  * Index
  * - Radio
- * - Radio label
- * - Radio error
+ * - Label
+ * - Error
  * - Position
- *
  */
 
 /* RADIO
@@ -48,7 +47,7 @@
   opacity: 0;
 }
 
-/* RADIO LABEL
+/* LABEL
  -------------------- */
 
 .form-radio-label {
@@ -56,6 +55,7 @@
   display: inline-flex;
   margin: 0;
   cursor: pointer;
+  -webkit-tap-highlight-color: rgba(0, 0, 0, 0);
 }
 
 .form-radio-label::before {
@@ -139,7 +139,7 @@
   border: none;
 }
 
-/* RADIO ERROR
+/* ERROR
  -------------------- */
 
 .form-radio-input.is-invalid ~ .form-radio-label::before {

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

@@ -2,8 +2,11 @@ import { html } from 'lit-html';
 import { ifDefined } from 'lit-html/directives/if-defined';
 
 export default {
-  title: 'Forms/Radio/road-radio',
+  title: 'Forms/Radio',
   component: 'road-radio',
+  subcomponents: {
+    RoadRadioGroup: 'road-radio-group'
+  },
   parameters: {
     actions: {
       handles: ['roadBlur', 'roadFocus'],

package/dist/collection/components/radio-group/radio-group.css

@@ -1,3 +1,12 @@
+/*
+ * Radio Group
+ *
+ * Index
+ * - Radio Group
+ * - Asterisk
+ * - Error
+ */
+
 /**
  * Error message for inline radio can only
  * be provided by adding a class
@@ -8,6 +17,9 @@
  * @prop --asterisk-color: color of the asterisk
  */
 
+/* RADIO
+ -------------------- */
+
 :host {
   --asterisk-color: var(--text);
 
@@ -16,14 +28,21 @@
   margin-bottom: 1rem;
 }
 
-:host(.is-invalid) .invalid-feedback {
-  display: block;
-}
+
+/* ASTERISK
+-------------------- */
 
 .asterisk {
   color: var(--asterisk-color);
 }
 
+/* ERROR
+-------------------- */
+
+:host(.is-invalid) .invalid-feedback {
+  display: block;
+}
+
 .invalid-feedback {
   display: none;
   flex: 0 0 100%;

package/dist/collection/components/range/range.css

@@ -1,5 +1,5 @@
 /*
- * Checkbox
+ * Range
  *
  *
  * Index
@@ -8,7 +8,6 @@
  * - Slider
  * - Progress
  * - Cursor
- *
  */
 
 :host {

package/dist/collection/components/rating/rating.css

@@ -1,3 +1,15 @@
+/*
+ * Rating
+ *
+ * Index
+ * - Stars
+ * - Star
+ * - Rating number
+ */
+
+/* STARS
+ -------------------- */
+
 :host {
   display: flex;
 }
@@ -7,10 +19,16 @@
   flex-shrink: 0;
 }
 
+/* STAR
+ -------------------- */
+
 .rating-star {
-  color: var(--background);
+  color: var(--border);
 }
 
+/* RATING NUMBER
+ -------------------- */
+
 .rating-number {
   margin-left: 0.5rem;
   font-size: 0.875rem;

package/dist/collection/components/select/select.css

@@ -3,9 +3,8 @@
  *
  * Index
  * - Select
- * - Select label
- * - Select error
- *
+ * - Label
+ * - Error
  */
 
 
@@ -53,10 +52,6 @@
  * Placeholder
  */
 
-.form-select:-ms-input-placeholder {
-  color: var(--text-second);
-}
-
 .form-select::placeholder {
   color: var(--text-second);
 }
@@ -88,7 +83,7 @@
   opacity: 1;
 }
 
-/* SELECT LABEL
+/* LABEL
  -------------------- */
 
 .form-select-label {
@@ -104,7 +99,7 @@
   transform-origin: 0 0;
 }
 
-/* SELECT ERROR
+/* ERROR
  -------------------- */
 
 .invalid-feedback {

package/dist/collection/components/select-filter/select-filter.css

@@ -0,0 +1,53 @@
+/*
+ * Autocomplete
+ *
+ * Autocomplete layer for fields
+ *
+ * Index
+ * - List
+ * - Item
+ */
+
+:host {
+  position: relative;
+  display: block;
+}
+
+/* LIST
+ -------------------- */
+
+.select-filter-list {
+  position: absolute;
+  top: 3rem;
+  z-index: 1;
+  width: 100%;
+  max-height: 16rem;
+  padding: 0.5rem 0;
+  margin: 0;
+  overflow-y: scroll;
+  font-family: var(--font, sans-serif);
+  font-size: 0.875rem;
+  color: var(--text);
+  list-style-type: none;
+  background: var(--white);
+  border-radius: 0 0 0.25rem 0.25rem;
+  box-shadow: 0 3px 6px rgba(0, 0, 0, 0.16);
+}
+
+/* ITEM
+ -------------------- */
+
+.select-filter-item {
+  padding: 0.75rem 1rem;
+  cursor: pointer;
+}
+
+/**
+ * Hover state
+ */
+
+.select-filter-item:hover,
+.select-filter-item.highlight {
+  color: var(--secondary-contrast);
+  background: var(--secondary);
+}

package/dist/collection/components/select-filter/select-filter.js

@@ -0,0 +1,134 @@
+import { Component, Element, Host, Listen, Prop, State, h, Event } from '@stencil/core';
+/**
+ * @slot  - Input element for the widget, it should be a road-input element.
+ */
+export class SelectFilter {
+  constructor() {
+    this.isOpen = false;
+    this.currentValue = '';
+    /**
+     * List of options of the select
+     */
+    this.options = [];
+    /**
+     * If `false`, the user can submit custom value
+     */
+    this.onlySelect = true;
+    this.onClick = (value, label) => {
+      this.el.querySelector('road-input').value = label;
+      this.isOpen = false;
+      this.roadSelected.emit({
+        value: value.toString(),
+        label: label,
+      });
+    };
+  }
+  handleFocus() {
+    this.isOpen = true;
+  }
+  handleChange(event) {
+    this.currentValue = event.detail.value.toLowerCase();
+  }
+  onClickOutside(event) {
+    if (this.isOpen && !this.el.contains(event.target)) {
+      this.isOpen = false;
+      if (this.onlySelect) {
+        this.el.querySelector('road-input').value = '';
+      }
+    }
+  }
+  render() {
+    return (h(Host, null,
+      h("slot", null),
+      this.isOpen &&
+        h("ul", { class: "select-filter-list", role: "listbox" }, this.options && this.options.filter(element => element.label.replace(/(<([^>]+)>)/gi, "").toLowerCase().indexOf(this.currentValue) > -1).map(option => (h("li", { class: "select-filter-item", role: "option", onClick: () => this.onClick(option.value, option.label.replace(/(<([^>]+)>)/gi, "")), innerHTML: option.label }))))));
+  }
+  static get is() { return "road-select-filter"; }
+  static get encapsulation() { return "scoped"; }
+  static get originalStyleUrls() { return {
+    "$": ["select-filter.css"]
+  }; }
+  static get styleUrls() { return {
+    "$": ["select-filter.css"]
+  }; }
+  static get properties() { return {
+    "options": {
+      "type": "unknown",
+      "mutable": false,
+      "complexType": {
+        "original": "Array<{\n    value: string | number;\n    label: string;\n  }>",
+        "resolved": "{ value: string | number; label: string; }[]",
+        "references": {
+          "Array": {
+            "location": "global"
+          }
+        }
+      },
+      "required": false,
+      "optional": false,
+      "docs": {
+        "tags": [],
+        "text": "List of options of the select"
+      },
+      "defaultValue": "[]"
+    },
+    "onlySelect": {
+      "type": "boolean",
+      "mutable": false,
+      "complexType": {
+        "original": "boolean",
+        "resolved": "boolean",
+        "references": {}
+      },
+      "required": false,
+      "optional": false,
+      "docs": {
+        "tags": [],
+        "text": "If `false`, the user can submit custom value"
+      },
+      "attribute": "only-select",
+      "reflect": false,
+      "defaultValue": "true"
+    }
+  }; }
+  static get states() { return {
+    "isOpen": {},
+    "currentValue": {}
+  }; }
+  static get events() { return [{
+      "method": "roadSelected",
+      "name": "roadSelected",
+      "bubbles": true,
+      "cancelable": true,
+      "composed": true,
+      "docs": {
+        "tags": [],
+        "text": "Emitted the value and label of the option selected."
+      },
+      "complexType": {
+        "original": "{\n    value: string | undefined | null,\n    label: string\n  }",
+        "resolved": "{ value: string | null | undefined; label: string; }",
+        "references": {}
+      }
+    }]; }
+  static get elementRef() { return "el"; }
+  static get listeners() { return [{
+      "name": "roadFocus",
+      "method": "handleFocus",
+      "target": undefined,
+      "capture": false,
+      "passive": false
+    }, {
+      "name": "roadChange",
+      "method": "handleChange",
+      "target": undefined,
+      "capture": false,
+      "passive": false
+    }, {
+      "name": "click",
+      "method": "onClickOutside",
+      "target": "document",
+      "capture": false,
+      "passive": false
+    }]; }
+}

package/dist/collection/components/select-filter/select-filter.stories.js

@@ -0,0 +1,138 @@
+import { html } from 'lit-html';
+
+export default {
+  title: 'Forms/Select Filter',
+  component: 'road-select-filter',
+  parameters: {
+    actions: {
+      handles: ['roadBlur', 'roadFocus'],
+    },
+  },
+};
+
+export const Playground = (args) => {
+  const options = [
+    { value: 'audi', label: 'Audi' },
+    { value: 'bmw', label: 'BMW' },
+    { value: 'citroen', label: 'Citroën' },
+    { value: 'mercedes-benz', label: 'Mercedes-benz' },
+    { value: 'peugeot', label: 'Peugeot' },
+    { value: 'renault', label: 'Renault' }
+  ];
+
+  return html`
+  <road-select-filter .options=${options} @roadSelected=${event => args.roadSelected(event.detail)}>
+    <road-input-group>
+      <road-input input-id="brand" label="Brand" class="mb-0"></road-input>
+      <label slot="append" for="brand">
+        <road-icon name="arrow-drop" focusable="false"></road-icon>
+      </label>
+    </road-input-group>
+  </road-select-filter>
+
+  <!-- br are here only until we find how to add a margin only for Storybook docs block, do not copy them -->
+  <br><br><br><br><br><br><br><br><br><br><br><br><br>
+  `;
+};
+Playground.argTypes = {
+  roadSelected: {
+    action: 'roadSelected',
+  },
+};
+
+export const WithValue = () => {
+  const options = [
+    { value: 'audi', label: 'Audi' },
+    { value: 'bmw', label: 'BMW' },
+    { value: 'citroen', label: 'Citroën' },
+    { value: 'mercedes-benz', label: 'Mercedes-benz' },
+    { value: 'peugeot', label: 'Peugeot' },
+    { value: 'renault', label: 'Renault' }
+  ];
+
+  return html`
+  <road-select-filter .options=${options}>
+    <road-input-group>
+      <road-input input-id="brand2" label="Brand" value="Audi" class="mb-0"></road-input>
+      <label slot="append" for="brand2">
+        <road-icon name="arrow-drop" focusable="false"></road-icon>
+      </label>
+    </road-input-group>
+  </road-select-filter>
+  `;
+};
+
+export const Disabled = () => {
+  const options = [
+    { value: 'audi', label: 'Audi' },
+    { value: 'bmw', label: 'BMW' },
+    { value: 'citroen', label: 'Citroën' },
+    { value: 'mercedes-benz', label: 'Mercedes-benz' },
+    { value: 'peugeot', label: 'Peugeot' },
+    { value: 'renault', label: 'Renault' }
+  ];
+
+  return html`
+  <road-select-filter .options=${options}>
+    <road-input-group>
+      <road-input input-id="brand3" label="Brand" disabled class="mb-0"></road-input>
+      <label slot="append" for="brand3">
+        <road-icon name="arrow-drop" focusable="false"></road-icon>
+      </label>
+    </road-input-group>
+  </road-select-filter>
+  `;
+};
+
+export const Error = () => {
+  const options = [
+    { value: 'audi', label: 'Audi' },
+    { value: 'bmw', label: 'BMW' },
+    { value: 'citroen', label: 'Citroën' },
+    { value: 'mercedes-benz', label: 'Mercedes-benz' },
+    { value: 'peugeot', label: 'Peugeot' },
+    { value: 'renault', label: 'Renault' }
+  ];
+
+  return html`
+  <road-select-filter .options=${options}>
+    <road-input-group>
+      <road-input input-id="brand4" label="Brand" error="Select a Brand" class="mb-0"></road-input>
+      <label slot="append" for="brand4">
+        <road-icon name="arrow-drop" focusable="false"></road-icon>
+      </label>
+    </road-input-group>
+  </road-select-filter>
+  `;
+};
+
+export const withHTML = () => {
+  const options = [
+    {
+      "value": 31,
+      "label": "<b>Original equipment electronics</b> > Cleaning Injection",
+    },
+    {
+      "value": 4,
+      "label": "<b>Exhaust / Pollution</b> > Replacement EGR",
+    },
+    {
+      "value": 14,
+      "label": "<b>Drain and filter</b> > Oil filter + fuel filter",
+    }
+  ];
+
+  return html`
+    <road-select-filter .options=${options}>
+      <road-input-group>
+        <road-input input-id="controls" label="Controls" class="mb-0"></road-input>
+        <label slot="append" for="brand">
+          <road-icon name="arrow-drop" focusable="false"></road-icon>
+        </label>
+      </road-input-group>
+    </road-select-filter>
+
+    <!-- br are here only until we find how to add a margin only for Storybook docs block, do not copy them -->
+    <br><br><br><br><br><br><br><br><br><br><br><br><br>
+  `;
+};

package/dist/collection/components/skeleton/skeleton.css

@@ -3,8 +3,7 @@
  *
  * Index
  * - Skeleton
- * - Skeleton animation
- *
+ * - Animation
  */
 
 
@@ -18,13 +17,13 @@
   min-height: 1rem;
   background: linear-gradient(to right, var(--background-second) 8%, var(--background) 18%, var(--background-second) 33%);
   background-size: 800px 104px;
-  animation: roadSkeletonAnimation 1s linear infinite;
+  animation: road-skeleton-animation 1s linear infinite;
 }
 
-/* SKELETON ANIMATION
+/* ANIMATION
 -------------------- */
 
-@keyframes roadSkeletonAnimation {
+@keyframes road-skeleton-animation {
 
   0% {
     background-position: -468px 0;

package/dist/collection/components/spinner/spinner.css

@@ -3,9 +3,8 @@
  *
  * Index
  * - Spinner
- * - Spinner circle
- * - Spinner animation
- *
+ * - Circle
+ * - Animation
  */
 
 :host {
@@ -19,14 +18,14 @@
   width: 3rem;
   height: 3rem;
   transform-origin: center;
-  animation: roadRotate 2s linear infinite;
+  animation: road-rotate 2s linear infinite;
 }
 
-/* SPINNER CIRCLE
+/* CIRCLE
  -------------------- */
 
 .spinner-circle {
-  animation: roadDash 1.5s ease-in-out infinite;
+  animation: road-dash 1.5s ease-in-out infinite;
   fill: none;
   stroke: var(--secondary);
   stroke-width: 3;
@@ -35,17 +34,17 @@
   stroke-linecap: round;
 }
 
-/* SPINNER ANIMATION
+/* ANIMATION
  -------------------- */
 
-@keyframes roadRotate {
+@keyframes road-rotate {
 
   100% {
     transform: rotate(360deg);
   }
 }
 
-@keyframes roadDash {
+@keyframes road-dash {
 
   0% {
     stroke-dasharray: 1, 200;

package/dist/collection/components/switch/switch.css

@@ -7,11 +7,10 @@
  *
  * Index
  * - Switch
- * - Switch label
- * - Switch lever
- * - Switch feedback
- * - Switch position
- *
+ * - Label
+ * - Lever
+ * - Feedback
+ * - Position
  */
 
 /**
@@ -42,16 +41,17 @@
   opacity: 0;
 }
 
-/* SWITCH LABEL
+/* LABEL
  -------------------- */
 
 .form-switch-label {
   display: inline-flex;
   align-items: center;
   cursor: pointer;
+  -webkit-tap-highlight-color: rgba(0, 0, 0, 0);
 }
 
-/* SWITCH LEVER
+/* LEVER
  -------------------- */
 
 .form-switch-lever {
@@ -129,7 +129,7 @@
   box-shadow: 0 0 0 0.125rem var(--white), 0 0 0 0.1875rem var(--secondary);
 }
 
-/* SWITCH FEEDBACK
+/* FEEDBACK
  -------------------- */
 
 /**
@@ -145,7 +145,7 @@
 }
 
 /**
- * Information
+ * Info
  */
 
 .form-switch-input:checked ~ .form-switch-info .form-switch-lever {
@@ -192,7 +192,7 @@
   color: var(--danger-contrast);
 }
 
-/* SWITCH POSITION
+/* POSITION
  -------------------- */
 
 .form-switch-right {