@roadtrip/components 2.23.0 → 2.25.1

package/dist/collection/components/plate-number/plate-number.css

@@ -2,10 +2,8 @@
  * Plate Number
  *
  * Index
- * - Custom font
  * - Plate Number
  * - Input
- *
  */
 
 /* PLATE NUMBER
@@ -22,16 +20,28 @@
 .plate-number-start,
 .plate-number-end {
   width: 1.75rem;
+  height: 3rem;
   background: var(--info-text);
 }
 
+.input-group-prepend {
+  margin-right: -1px;
+}
+
+.input-group-prepend,
+.input-group-append {
+  padding: 0;
+}
+
 .plate-number-start {
   display: flex;
   flex-direction: column;
+  align-items: center;
   justify-content: center;
   padding: 0;
   margin-right: 0;
   color: var(--info-contrast);
+  border-radius: 3px 0 0 3px;
 }
 
 .plate-number-icon {
@@ -45,6 +55,10 @@
   font-weight: 700;
 }
 
+.plate-number-end {
+  border-radius: 0 3px 3px 0;
+}
+
 /* INPUT
  -------------------- */
 
@@ -75,3 +89,28 @@
   border-color: var(--secondary);
   outline: 0;
 }
+
+/* MOTORBIKE
+ -------------------- */
+
+.motorbike-plate .plate-number-input {
+  height: 6rem;
+  padding: 0.75rem 1rem 0;
+  resize: none;
+  border-left: 0;
+}
+
+.motorbike-plate .input-group-prepend,
+.motorbike-plate .input-group-append {
+  align-items: flex-start;
+  height: 6rem;
+  padding: 0;
+}
+
+.motorbike-plate .plate-number-start {
+  border-radius: 3px 0 0;
+}
+
+.motorbike-plate .plate-number-end {
+  border-radius: 0 3px 0 0;
+}

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

@@ -1,4 +1,4 @@
-import { Component, Host, h, Prop, Event, Watch } from '@stencil/core';
+import { Component, h, Prop, Event, Watch } from '@stencil/core';
 import { licensePlateStarEu } from '../../../icons';
 export class PlateNumber {
   constructor() {
@@ -69,14 +69,18 @@ export class PlateNumber {
   }
   render() {
     const value = this.getValue();
-    return (h(Host, null,
-      h("road-input-group", { class: "plate-number" },
-        h("label", { slot: "prepend", class: "plate-number-start" },
+    const motorbikeClass = this.motorbike ? 'motorbike-plate' : '';
+    return (h("road-input-group", { class: `plate-number ${motorbikeClass}` },
+      h("label", { slot: "prepend", class: "input-group-prepend" },
+        h("div", { class: "plate-number-start" },
           h("road-icon", { class: "plate-number-icon", icon: licensePlateStarEu }),
           h("div", { class: "plate-number-location" }, this.countries
-            .filter(item => item.country === this.country)[0].letter)),
-        h("input", { class: "plate-number-input mb-0", placeholder: this.placeholder ? this.placeholder : this.countries.filter(item => item.country === this.country)[0].placeholder, value: value, onInput: this.onInput, onBlur: this.onBlur, onFocus: this.onFocus }),
-        h("label", { slot: "append", class: "plate-number-end" }))));
+            .filter(item => item.country === this.country)[0].letter))),
+      this.motorbike
+        ? (h("textarea", { class: "form-control plate-number-input mb-0", placeholder: this.placeholder != null ? this.placeholder : this.countries.filter(item => item.country === this.country)[0].placeholder, maxlength: "9", rows: 2, onInput: this.onInput, onBlur: this.onBlur, onFocus: this.onFocus }))
+        : (h("input", { class: "plate-number-input mb-0", placeholder: this.placeholder != null ? this.placeholder : this.countries.filter(item => item.country === this.country)[0].placeholder, value: value, onInput: this.onInput, onBlur: this.onBlur, onFocus: this.onFocus })),
+      h("label", { slot: "append", class: "input-group-append" },
+        h("div", { class: "plate-number-end" }))));
   }
   static get is() { return "road-plate-number"; }
   static get encapsulation() { return "scoped"; }
@@ -140,6 +144,23 @@ export class PlateNumber {
       "attribute": "value",
       "reflect": false,
       "defaultValue": "''"
+    },
+    "motorbike": {
+      "type": "boolean",
+      "mutable": false,
+      "complexType": {
+        "original": "boolean",
+        "resolved": "boolean | undefined",
+        "references": {}
+      },
+      "required": false,
+      "optional": true,
+      "docs": {
+        "tags": [],
+        "text": "Enable motorbike display"
+      },
+      "attribute": "motorbike",
+      "reflect": false
     }
   }; }
   static get events() { return [{

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

@@ -1,4 +1,5 @@
 import { html } from 'lit-html';
+import { ifDefined } from 'lit-html/directives/if-defined';
 
 export default {
   title: 'Forms/PlateNumber',
@@ -11,13 +12,14 @@ export default {
 };
 
 export const Playground = (args) => html`
-  <road-plate-number
-    country="${args.country}"
-    .placeholder=${args.placeholder}
-    @roadChange=${event => args.roadChange(event.detail.value)}
-    @roadInput=${event => args.roadInput(event.target.value)}
-  >
-  </road-plate-number>
+<road-plate-number
+  country="${ifDefined(args.country)}"
+  motorbike="${ifDefined(args.motorbike)}"
+  placeholder="${ifDefined(args.placeholder)}"
+  value="${ifDefined(args.value)}"
+  @roadChange=${event => args.roadChange(event.detail.value)}
+  @roadInput=${event => args.roadInput(event.target.value)}
+></road-plate-number>
 `;
 Playground.args = {
   country: 'FR',
@@ -32,10 +34,40 @@ Playground.argTypes = {
   placeholder: {
     control: 'text',
   },
+  motorbike: {
+    control: 'boolean',
+  },
+  value: {
+    control: 'text',
+  },
+  roadBlur: {
+    control: {
+      type: null,
+    },
+  },
+  roadFocus: {
+    control: {
+      type: null,
+    },
+  },
   roadChange: {
     action: 'roadChange',
+    control: {
+      type: null,
+    },
   },
   roadInput: {
     action: 'roadInput',
+    control: {
+      type: null,
+    },
   },
 };
+
+export const MotorBike = () => html`
+<road-plate-number
+  country="FR"
+  motorbike="true"
+  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/progress/progress.stories.js

@@ -9,7 +9,7 @@ export const Playground = ({ value, color }) => html`
   <road-progress value="${value}" color="${color}"></road-progress>
 `;
 Playground.args = {
-  value: '25',
+  value: 25,
   color: 'info',
 };
 Playground.argTypes = {
@@ -29,7 +29,7 @@ Playground.argTypes = {
 };
 
 export const Value = () => html`
-  <road-progress value="0"></road-progress>
+<road-progress value="0"></road-progress>
 
 <br>
 
@@ -49,7 +49,7 @@ export const Value = () => html`
 `;
 
 export const color = () => html`
-  <road-progress value="80" color="info"></road-progress>
+<road-progress value="80" color="info"></road-progress>
 
 <br>
 

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 {
@@ -140,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

@@ -5,7 +5,7 @@ export default {
   title: 'Forms/Radio',
   component: 'road-radio',
   subcomponents: {
-    RoadRadioGroup: 'road-radio-group'
+    'road-radio-group': 'road-radio-group',
   },
   parameters: {
     actions: {
@@ -13,38 +13,39 @@ export default {
     },
     docs: {
       description: {
-        component: 'A radio is used in a `radio-group`. It allows a user to select at most one radio button from a set. Checking one radio button that belongs to a radio group unchecks any previous checked radio button within the same group.'
-      }
-    }
+        component: 'A radio is used in a `radio-group`. It allows a user to select at most one radio button from a set. Checking one radio button that belongs to a radio group unchecks any previous checked radio button within the same group.',
+      },
+    },
   },
 };
 
 export const Playground = (args) => html`
-  <road-radio-group 
-    name="${ifDefined(args.name)}"
-    label="Label of radio group" 
-    error="${ifDefined(args.error)}" 
-    @roadChange=${event => args.roadChange(event.detail.value)}
-    asterisk="${args.asterisk}"
-  >
-    <road-radio
-      disabled="${args.disabled}"
-      required="${args.required}"
-      label="${args.label}"
-      inverse="${args.inverse}"
-      inline="${args.inline}"
-      value="${args.value}"
-    ></road-radio>
-  </road-radio-group>
+<road-radio-group 
+  name="${ifDefined(args.name)}"
+  label="Label of radio group" 
+  error="${ifDefined(args.error)}" 
+  @roadChange=${event => args.roadChange(event.detail.value)}
+  asterisk="${ifDefined(args.asterisk)}"
+>
+  <road-radio
+    disabled="${ifDefined(args.disabled)}"
+    required="${ifDefined(args.required)}"
+    label="${ifDefined(args.label)}"
+    inverse="${ifDefined(args.inverse)}"
+    inline="${ifDefined(args.inline)}"
+    value="${ifDefined(args.value)}"
+    radio-id="${ifDefined(args['radio-id'])}"
+  ></road-radio>
+</road-radio-group>
 `;
 Playground.args = {
-  disabled: false,
-  required: false,
-  inverse: false,
-  inline: false,
+  disabled: null,
+  required: null,
+  inverse: null,
+  inline: undefined,
   label: 'Label',
   value: 'on',
-  asterisk: false
+  asterisk: null,
 };
 Playground.argTypes = {
   disabled: {
@@ -74,13 +75,29 @@ Playground.argTypes = {
   value: {
     control: 'text',
   },
+  'radio-id': {
+    control: 'text',
+  },
+  roadBlur: {
+    control: {
+      type: null,
+    },
+  },
+  roadFocus: {
+    control: {
+      type: null,
+    },
+  },
   roadChange: {
     action: 'roadChange',
+    control: {
+      type: null,
+    },
   },
 };
 
 export const Inline = () => html`
-  <road-radio-group name="NameOfTheField" value="1">
+<road-radio-group name="NameOfTheField" value="1">
   <road-radio label="Label1" value="1"></road-radio>
   <road-radio label="Label2" value="2"></road-radio>
   <road-radio label="Label3" value="3"></road-radio>
@@ -88,7 +105,7 @@ export const Inline = () => html`
 `;
 
 export const Stacked = () => html`
-  <road-radio-group name="NameOfTheField">
+<road-radio-group name="NameOfTheField">
   <road-radio label="Label1" value="1" inline="false"></road-radio>
   <road-radio label="Label2" value="2" inline="false"></road-radio>
   <road-radio label="Label3" value="3" inline="false"></road-radio>
@@ -96,7 +113,7 @@ export const Stacked = () => html`
 `;
 
 export const Inverse = () => html`
-  <road-radio-group name="NameOfTheField">
+<road-radio-group name="NameOfTheField">
   <road-radio inverse label="Label1" value="1" inline="false"></road-radio>
   <road-radio inverse label="Label2" value="2" inline="false"></road-radio>
   <road-radio inverse label="Label3" value="3" inline="false"></road-radio>
@@ -104,7 +121,7 @@ export const Inverse = () => html`
 `;
 
 export const Disabled = () => html`
-  <road-radio-group name="NameOfTheField">
+<road-radio-group name="NameOfTheField">
   <road-radio label="Label1" value="1" disabled></road-radio>
   <road-radio label="Label2" value="2" disabled></road-radio>
   <road-radio label="Label3" value="3" disabled></road-radio>
@@ -112,7 +129,7 @@ export const Disabled = () => html`
 `;
 
 export const Error = () => html`
-  <road-radio-group name="NameOfTheField" error="Check the radio to continue">
+<road-radio-group name="NameOfTheField" error="Check the radio to continue">
   <road-radio label="Label1" value="1"></road-radio>
   <road-radio label="Label2" value="2"></road-radio>
   <road-radio label="Label3" value="3"></road-radio>

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/range/range.js

@@ -1,4 +1,4 @@
-import { Component, Host, h, Element, Prop, Event, Watch } from '@stencil/core';
+import { Component, h, Element, Prop, Event, Watch } from '@stencil/core';
 export class Range {
   constructor() {
     /**
@@ -36,11 +36,10 @@ export class Range {
   }
   render() {
     const value = this.getValue();
-    return (h(Host, null,
-      h("div", { class: "form-range", style: { '--min:': this.min, '--max': this.max, '--value': value } },
-        this.showValue && h("output", null),
-        h("input", { type: "range", class: "form-range-input", id: this.rangeId, min: this.min, max: this.max, value: value, onInput: this.onInput }),
-        h("div", { class: "form-range-progress" }))));
+    return (h("div", { class: "form-range", style: { '--min:': this.min, '--max': this.max, '--value': value } },
+      this.showValue && h("output", null),
+      h("input", { type: "range", class: "form-range-input", id: this.rangeId, min: this.min, max: this.max, value: value, onInput: this.onInput }),
+      h("div", { class: "form-range-progress" })));
   }
   static get is() { return "road-range"; }
   static get encapsulation() { return "scoped"; }

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

@@ -1,44 +1,51 @@
 import { html } from 'lit-html';
+import { ifDefined } from 'lit-html/directives/if-defined';
 
 export default {
   title: 'Forms/Range',
   component: 'road-range',
+  argTypes: {
+    min: {
+      control: 'number',
+    },
+    max: {
+      control: 'number',
+    },
+    step: {
+      control: 'number',
+    },
+    value: {
+      control: 'number',
+    },
+    'show-value': {
+      control: 'boolean',
+    },
+    'range-id': {
+      control: 'text',
+    },
+    roadChange: {
+      action: 'roadChange',
+      control: {
+        type: null,
+      },
+    },
+  },
+  args: {
+    min: 0,
+    max: 10,
+    step: null,
+    value: 8,
+    'show-value': null,
+  },
 };
 
 export const Playground = (args) => html`
   <road-range
-    min="${args.min}" 
-    max="${args.max}"
-    step="${args.step}" 
-    value="${args.value}"
-    show-value="${args['show-value']}"
+    min="${ifDefined(args.min)}" 
+    max="${ifDefined(args.max)}"
+    step="${ifDefined(args.step)}" 
+    value="${ifDefined(args.value)}"
+    show-value="${ifDefined(args['show-value'])}"
     @roadChange=${event => args.roadChange(event.detail.value)}
   ></road-range>
 `;
-Playground.args = {
-  min: '0',
-  max: '10',
-  step: '1',
-  value: '8',
-  'show-value': false,
-};
-Playground.argTypes = {
-  min: {
-    control: 'number',
-  },
-  max: {
-    control: 'number',
-  },
-  step: {
-    control: 'number',
-  },
-  value: {
-    control: 'number',
-  },
-  'show-value': {
-    control: 'boolean',
-  },
-  roadChange: {
-    action: 'roadChange',
-  },
-};

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;