@roadtrip/components 2.33.0 → 2.36.0

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

@@ -47,7 +47,7 @@
 
 ::slotted([slot="prepend"]) {
   margin-right: -3px;
-  border-color: var(--road-grey-400);
+  border-color: var(--road-grey-500);
   border-right-color: transparent;
   border-top-right-radius: 0;
   border-bottom-right-radius: 0;
@@ -55,7 +55,7 @@
 
 ::slotted([slot="append"]) {
   margin-left: -0.25rem;
-  border-color: var(--road-grey-400);
+  border-color: var(--road-grey-500);
   border-left-width: 0;
 }
 
@@ -74,6 +74,10 @@
     border-color: var(--road-primary-700);
     border-left-color: transparent;
   }
+
+  :host(.phone-number-group) .input-group:not(.is-disabled):hover ::slotted([slot="prepend"]) {
+    border-color: var(--road-primary-700);
+  }
 }
 
 /**
@@ -85,6 +89,11 @@
   border-right-color: transparent;
 }
 
+:host(.phone-number-group) .input-group:focus-within ::slotted([slot="prepend"]) {
+  border-color: var(--road-primary-700);
+  border-right-color: transparent;
+}
+
 .input-group:focus-within ::slotted([slot="append"]) {
   border-color: var(--road-primary-700);
   border-left-color: transparent;
@@ -138,7 +147,7 @@
   white-space: nowrap;
   cursor: text;
   background: var(--road-grey-000);
-  border: 1px solid var(--road-grey-400);
+  border: 1px solid var(--road-grey-500);
   border-radius: 0.25rem;
   -webkit-tap-highlight-color: rgba(0, 0, 0, 0);
 }
@@ -163,6 +172,12 @@
   border-bottom-right-radius: 0;
 }
 
+:host(.phone-number-group) .input-group-prepend ::slotted([slot="prepend"]) {
+  border-right: 1px solid var(--road-grey-500);
+  border-top-right-radius: 0;
+  border-bottom-right-radius: 0;
+}
+
 .input-group-prepend ::slotted(label) {
   margin-right: calc(-1rem + 1px);
 }
@@ -187,6 +202,10 @@
   border-color: var(--road-danger-default);
 }
 
+:host(.phone-number-group) .input-group.is-invalid ::slotted([slot="prepend"]) {
+  border-color: var(--road-danger-default);
+}
+
 /* DISABLED
  -------------------- */
 

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

@@ -85,7 +85,7 @@
   color: var(--road-grey-900);
   text-align: center;
   background: var(--road-grey-000);
-  border: 1px solid var(--road-grey-400);
+  border: 1px solid var(--road-grey-500);
   border-radius: 0;
   outline: 0;
   box-shadow: none;

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

@@ -32,6 +32,16 @@ export class PlateNumber {
         country: 'PL',
         letter: 'PL',
         placeholder: 'GD 921KF',
+      },
+      {
+        country: 'AT',
+        letter: 'A',
+        placeholder: 'FF 10 FF',
+      },
+      {
+        country: 'DE',
+        letter: 'D',
+        placeholder: 'RA KL 8136',
       }
     ];
     /**
@@ -107,8 +117,8 @@ export class PlateNumber {
       "type": "string",
       "mutable": false,
       "complexType": {
-        "original": "'FR' | 'BE' | 'IT' | 'ES' | 'PT' | 'PL'",
-        "resolved": "\"BE\" | \"ES\" | \"FR\" | \"IT\" | \"PL\" | \"PT\"",
+        "original": "'FR' | 'BE' | 'IT' | 'ES' | 'PT' | 'PL' | 'AT' | 'DE'",
+        "resolved": "\"AT\" | \"BE\" | \"DE\" | \"ES\" | \"FR\" | \"IT\" | \"PL\" | \"PT\"",
         "references": {}
       },
       "required": false,

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

@@ -11,7 +11,7 @@ export default {
   },
   argTypes: {
     country: {
-      options: ['FR', 'BE', 'IT', 'ES', 'PT', 'PL'],
+      options: ['FR', 'BE', 'IT', 'ES', 'PT', 'PL', 'AT', 'DE'],
       control: {
         type: 'select',
       },

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

@@ -46,7 +46,7 @@
 }
 
 :host(.progress-secondary) .progress-bar {
-  background: var(--road-secondary-500);
+  background: var(--road-secondary-600);
 }
 
 :host(.progress-info) .progress-bar {

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

@@ -67,7 +67,7 @@
   margin: 0 0.75rem 0 0;
   content: "";
   background: var(--road-grey-000);
-  border: 1px solid var(--road-grey-400);
+  border: 1px solid var(--road-grey-500);
   border-radius: 50%;
   transition: border-color 0.2s ease-in-out;
 }

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

@@ -32,7 +32,7 @@
   color: var(--road-grey-900);
   background: url("data:image/svg+xml;base64,PHN2ZyB4bWxucz0iaHR0cDovL3d3dy53My5vcmcvMjAwMC9zdmciIHZpZXdCb3g9IjAgMCA2NCA2NCIgZmlsbD0icmdiYSgyMywgMzAsIDUyLCAwLjcyKSI+PHBhdGggZD0iTTIzIDI2bDkgMTIgOS0xMnoiLz48L3N2Zz4=") no-repeat right 1rem center/1.5rem 2rem;
   background-color: var(--road-grey-000);
-  border: 1px solid var(--road-grey-400);
+  border: 1px solid var(--road-grey-500);
   border-radius: 0.25rem;
   box-shadow: none;
   -webkit-appearance: none;
@@ -111,6 +111,11 @@
   transform-origin: 0 0;
 }
 
+.form-select:required ~ .form-select-label::after{
+  color: var(--road-danger-default);
+  content: " *";
+}
+
 /* SIZES
  -------------------- */
 

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

@@ -32,7 +32,7 @@
   margin: 0;
   overflow-y: scroll;
   font-family: var(--road-font, sans-serif);
-  font-size: 0.875rem;
+  font-size: 1rem;
   color: var(--road-grey-900);
   list-style-type: none;
   background: var(--road-grey-000);
@@ -48,6 +48,8 @@
  -------------------- */
 
 .select-filter-item {
+  display: flex;
+  align-items: center;
   padding: 0.75rem 1rem;
   cursor: pointer;
 }

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

@@ -30,6 +30,7 @@ export class SelectFilter {
     this.onlySelect = true;
     this.onClick = (value, label) => {
       this.el.querySelector('road-input').value = label;
+      this.el.querySelector('road-icon').name = 'flag-' + label;
       this.isOpen = false;
       this.roadselected.emit({
         value: value.toString(),

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

@@ -123,3 +123,28 @@ withHTML.args = {
     </label>
   </road-input-group>`,
 };
+
+export const PhoneNumber = Template.bind({});
+PhoneNumber.args = {
+  options: [
+    {
+      "value": "France",
+      "label": "<road-icon name='flag-france' size='md' style='margin-right: 0.75rem'></road-icon>France",
+    },
+    {
+      "value": "Spain",
+      "label": "<road-icon name='flag-spain' size='md' style='margin-right: 0.75rem'></road-icon>Spain",
+    },
+    {
+      "value": "Portugal",
+      "label": "<road-icon name='flag-portugal' size='md' style='margin-right: 0.75rem'></road-icon>Portugal",
+    }
+  ],
+  ' ': `<road-input-group class="phone-number-group">
+    <road-input input-id="brand5" sizes="xl" label="Label" value="" class="phone-number"></road-input>
+    <label slot="prepend" for="brand5" class="pl-16 phone-number-label">
+      <road-icon name="flag-france" size="md"></road-icon>
+      <road-icon name="arrow-drop" focusable="false"></road-icon>
+    </label>
+  </road-input-group>`,
+};

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

@@ -16,8 +16,8 @@
  */
 
 :host {
-  --background-light: var(--road-grey-200);
-  --background-dark: var(--road-grey-300);
+  --background-light: var(--road-disabled);
+  --background-dark: rgb(137, 143, 160, 0.4);
 
   position: relative;
   display: block;

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

@@ -6,7 +6,7 @@ export default {
   argTypes: {
     '--background-light': {
       table: {
-        defaultValue: { summary: 'var(--road-grey-200)' },
+        defaultValue: { summary: 'var(--road-disabled)' },
       },
       control: {
         type: null,
@@ -14,7 +14,7 @@ export default {
     },
     '--background-dark': {
       table: {
-        defaultValue: { summary: 'var(--road-grey-300)' },
+        defaultValue: { summary: 'rgb(137, 143, 160, 0.4)' },
       },
       control: {
         type: null,
@@ -26,83 +26,241 @@ export default {
 export const List = () => html`
   <road-grid>
   <road-row>
-    <road-col class="col-sm-3">
-      <road-skeleton style="height: 160px"></road-skeleton>
+    <road-col class="col-12 col-sm-3 mb-16">
+      <road-skeleton style="height: 156px"></road-skeleton>
     </road-col>
-    <road-col class="col-sm-9">
-      <p class="h2 mt-8">
-        <road-skeleton style="width: 60%; height: 1.5rem"></road-skeleton>
+    <road-col class="col-12 col-sm-9">
+      <p class="h2" style="margin-bottom: 12px">
+        <road-skeleton style="width: 60%; height: 1.875rem"></road-skeleton>
       </p>
-      <p class="text-content">
-        <road-skeleton></road-skeleton>
+      <p class="text-content" style="margin-bottom: 12px">
+        <road-skeleton style="height: 1.875rem"></road-skeleton>
       </p>
-      <p class="text-content">
-        <road-skeleton></road-skeleton>
+      <p class="text-content" style="margin-bottom: 12px">
+        <road-skeleton style="height: 1.875rem"></road-skeleton>
       </p>
-      <p class="text-content">
-        <road-skeleton></road-skeleton>
+      <p class="text-content" style="margin-bottom: 12px">
+        <road-skeleton style="height: 1.875rem"></road-skeleton>
       </p>
     </road-col>
   </road-row>
 
   <road-row class="mt-16">
-    <road-col class="col-sm-3">
-      <road-skeleton style="height: 160px"></road-skeleton>
+    <road-col class="col-12 col-sm-3 mb-16">
+      <road-skeleton style="height: 156px"></road-skeleton>
     </road-col>
-    <road-col class="col-sm-9">
-      <p class="h2 mt-8">
-        <road-skeleton style="width: 60%; height: 1.5rem"></road-skeleton>
+    <road-col class="col-12 col-sm-9">
+      <p class="h2" style="margin-bottom: 12px">
+        <road-skeleton style="width: 60%; height: 1.875rem"></road-skeleton>
       </p>
-      <p class="text-content">
-        <road-skeleton></road-skeleton>
+      <p class="text-content" style="margin-bottom: 12px">
+        <road-skeleton style="height: 1.875rem"></road-skeleton>
       </p>
-      <p class="text-content">
-        <road-skeleton></road-skeleton>
+      <p class="text-content" style="margin-bottom: 12px">
+        <road-skeleton style="height: 1.875rem"></road-skeleton>
       </p>
-      <p class="text-content">
-        <road-skeleton></road-skeleton>
+      <p class="text-content" style="margin-bottom: 12px">
+        <road-skeleton style="height: 1.875rem"></road-skeleton>
       </p>
     </road-col>
   </road-row>
 
   <road-row class="mt-16">
-    <road-col class="col-sm-3">
-      <road-skeleton style="height: 160px"></road-skeleton>
+    <road-col class="col-12 col-sm-3 mb-16">
+      <road-skeleton style="height: 156px"></road-skeleton>
     </road-col>
-    <road-col class="col-sm-9">
-      <p class="h2 mt-8">
-        <road-skeleton style="width: 60%; height: 1.5rem"></road-skeleton>
+    <road-col class="col-12 col-sm-9">
+      <p class="h2" style="margin-bottom: 12px">
+        <road-skeleton style="width: 60%; height: 1.875rem"></road-skeleton>
       </p>
-      <p class="text-content">
-        <road-skeleton></road-skeleton>
+      <p class="text-content" style="margin-bottom: 12px">
+        <road-skeleton style="height: 1.875rem"></road-skeleton>
       </p>
-      <p class="text-content">
-        <road-skeleton></road-skeleton>
+      <p class="text-content" style="margin-bottom: 12px">
+        <road-skeleton style="height: 1.875rem"></road-skeleton>
       </p>
-      <p class="text-content">
-        <road-skeleton></road-skeleton>
+      <p class="text-content" style="margin-bottom: 12px">
+        <road-skeleton style="height: 1.875rem"></road-skeleton>
       </p>
     </road-col>
   </road-row>
 
   <road-row class="mt-16">
-    <road-col class="col-sm-3">
-      <road-skeleton style="height: 160px"></road-skeleton>
+    <road-col class="col-12 col-sm-3 mb-16">
+      <road-skeleton style="height: 156px"></road-skeleton>
     </road-col>
-    <road-col class="col-sm-9">
-      <p class="h2 mt-8">
-        <road-skeleton style="width: 60%; height: 1.5rem"></road-skeleton>
+    <road-col class="col-12 col-sm-9">
+      <p class="h2" style="margin-bottom: 12px">
+        <road-skeleton style="width: 60%; height: 1.875rem"></road-skeleton>
       </p>
-      <p class="text-content">
-        <road-skeleton></road-skeleton>
+      <p class="text-content" style="margin-bottom: 12px">
+        <road-skeleton style="height: 1.875rem"></road-skeleton>
       </p>
-      <p class="text-content">
-        <road-skeleton></road-skeleton>
+      <p class="text-content" style="margin-bottom: 12px">
+        <road-skeleton style="height: 1.875rem"></road-skeleton>
       </p>
-      <p class="text-content">
-        <road-skeleton></road-skeleton>
+      <p class="text-content" style="margin-bottom: 12px">
+        <road-skeleton style="height: 1.875rem"></road-skeleton>
       </p>
     </road-col>
   </road-row>
 </road-grid>
 `;
+
+export const Half = () => html`
+<road-grid>
+<road-row>
+  <road-col class="col-6">
+    <road-skeleton style="height: 156px"></road-skeleton>
+  </road-col>
+  <road-col class="col-6">
+    <p class="h2" style="margin-bottom: 12px">
+      <road-skeleton style="width: 60%; height: 1.875rem"></road-skeleton>
+    </p>
+    <p class="text-content" style="margin-bottom: 12px">
+      <road-skeleton style="height: 1.875rem"></road-skeleton>
+    </p>
+    <p class="text-content" style="margin-bottom: 12px">
+      <road-skeleton style="height: 1.875rem"></road-skeleton>
+    </p>
+    <p class="text-content" style="margin-bottom: 12px">
+      <road-skeleton style="height: 1.875rem"></road-skeleton>
+    </p>
+  </road-col>
+</road-row>
+
+<road-row class="mt-16">
+  <road-col class="col-6">
+    <road-skeleton style="height: 156px"></road-skeleton>
+  </road-col>
+  <road-col class="col-6">
+    <p class="h2" style="margin-bottom: 12px">
+      <road-skeleton style="width: 60%; height: 1.875rem"></road-skeleton>
+    </p>
+    <p class="text-content" style="margin-bottom: 12px">
+      <road-skeleton style="height: 1.875rem"></road-skeleton>
+    </p>
+    <p class="text-content" style="margin-bottom: 12px">
+      <road-skeleton style="height: 1.875rem"></road-skeleton>
+    </p>
+    <p class="text-content" style="margin-bottom: 12px">
+      <road-skeleton style="height: 1.875rem"></road-skeleton>
+    </p>
+  </road-col>
+</road-row>
+
+<road-row class="mt-16">
+  <road-col class="col-6">
+    <road-skeleton style="height: 156px"></road-skeleton>
+  </road-col>
+  <road-col class="col-6">
+    <p class="h2" style="margin-bottom: 12px">
+      <road-skeleton style="width: 60%; height: 1.875rem"></road-skeleton>
+    </p>
+    <p class="text-content" style="margin-bottom: 12px">
+      <road-skeleton style="height: 1.875rem"></road-skeleton>
+    </p>
+    <p class="text-content" style="margin-bottom: 12px">
+      <road-skeleton style="height: 1.875rem"></road-skeleton>
+    </p>
+    <p class="text-content" style="margin-bottom: 12px">
+      <road-skeleton style="height: 1.875rem"></road-skeleton>
+    </p>
+  </road-col>
+</road-row>
+
+<road-row class="mt-16">
+  <road-col class="col-6">
+    <road-skeleton style="height: 156px"></road-skeleton>
+  </road-col>
+  <road-col class="col-6">
+    <p class="h2" style="margin-bottom: 12px">
+      <road-skeleton style="width: 60%; height: 1.875rem"></road-skeleton>
+    </p>
+    <p class="text-content" style="margin-bottom: 12px">
+      <road-skeleton style="height: 1.875rem"></road-skeleton>
+    </p>
+    <p class="text-content" style="margin-bottom: 12px">
+      <road-skeleton style="height: 1.875rem"></road-skeleton>
+    </p>
+    <p class="text-content" style="margin-bottom: 12px">
+      <road-skeleton style="height: 1.875rem"></road-skeleton>
+    </p>
+  </road-col>
+</road-row>
+</road-grid>
+`;
+
+export const Grid = () => html`
+  <road-grid>
+  <road-row>
+    <road-col class="col-12 col-sm-6 col-md-3">
+      <road-skeleton style="height: 156px"></road-skeleton>
+      <p class="h2 mt-16" style="margin-bottom: 12px">
+        <road-skeleton style="width: 60%; height: 1.875rem"></road-skeleton>
+      </p>
+      <p class="text-content" style="margin-bottom: 12px">
+        <road-skeleton style="height: 1.875rem"></road-skeleton>
+      </p>
+      <p class="text-content" style="margin-bottom: 12px">
+        <road-skeleton style="height: 1.875rem"></road-skeleton>
+      </p>
+      <p class="text-content" style="margin-bottom: 12px">
+        <road-skeleton style="height: 1.875rem"></road-skeleton>
+      </p>
+    </road-col>
+
+    <road-col class="col-12 col-sm-6 col-md-3">
+      <road-skeleton style="height: 156px"></road-skeleton>
+      <p class="h2 mt-16" style="margin-bottom: 12px">
+        <road-skeleton style="width: 60%; height: 1.875rem"></road-skeleton>
+      </p>
+      <p class="text-content" style="margin-bottom: 12px">
+        <road-skeleton style="height: 1.875rem"></road-skeleton>
+      </p>
+      <p class="text-content" style="margin-bottom: 12px">
+        <road-skeleton style="height: 1.875rem"></road-skeleton>
+      </p>
+      <p class="text-content" style="margin-bottom: 12px">
+        <road-skeleton style="height: 1.875rem"></road-skeleton>
+      </p>
+    </road-col>
+
+
+
+    <road-col class="col-12 col-sm-6 col-md-3">
+      <road-skeleton style="height: 156px"></road-skeleton>
+      <p class="h2 mt-16" style="margin-bottom: 12px">
+        <road-skeleton style="width: 60%; height: 1.875rem"></road-skeleton>
+      </p>
+      <p class="text-content" style="margin-bottom: 12px">
+        <road-skeleton style="height: 1.875rem"></road-skeleton>
+      </p>
+      <p class="text-content" style="margin-bottom: 12px">
+        <road-skeleton style="height: 1.875rem"></road-skeleton>
+      </p>
+      <p class="text-content" style="margin-bottom: 12px">
+        <road-skeleton style="height: 1.875rem"></road-skeleton>
+      </p>
+    </road-col>
+
+
+
+    <road-col class="col-12 col-sm-6 col-md-3">
+      <road-skeleton style="height: 156px"></road-skeleton>
+      <p class="h2 mt-16" style="margin-bottom: 12px">
+        <road-skeleton style="width: 60%; height: 1.875rem"></road-skeleton>
+      </p>
+      <p class="text-content" style="margin-bottom: 12px">
+        <road-skeleton style="height: 1.875rem"></road-skeleton>
+      </p>
+      <p class="text-content" style="margin-bottom: 12px">
+        <road-skeleton style="height: 1.875rem"></road-skeleton>
+      </p>
+      <p class="text-content" style="margin-bottom: 12px">
+        <road-skeleton style="height: 1.875rem"></road-skeleton>
+      </p>
+    </road-col>
+  </road-row>
+</road-grid>
+`;

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

@@ -15,12 +15,30 @@
  -------------------- */
 
 .spinner {
-  width: 3rem;
-  height: 3rem;
   transform-origin: center;
   animation: road-rotate 2s linear infinite;
 }
 
+.spinner.spinner--small{
+  width: 1rem;
+  height: 1rem;
+}
+
+.spinner.spinner--medium{
+  width: 2rem;
+  height: 2rem;
+}
+
+.spinner.spinner--large {
+  width: 3rem;
+  height: 3rem;
+}
+
+.spinner.spinner--xl {
+  width: 8rem;
+  height: 8rem;
+}
+
 /* CIRCLE
  -------------------- */
 
@@ -34,6 +52,14 @@
   stroke-linecap: round;
 }
 
+.spinner-circle.spinner-circle--dark {
+  stroke: var(--road-grey-900);
+}
+
+.spinner-circle.spinner-circle--light {
+  stroke: var(--road-grey-100);
+}
+
 /* ANIMATION
  -------------------- */
 

package/dist/collection/components/spinner/spinner.js

@@ -1,8 +1,20 @@
-import { Component, h } from '@stencil/core';
+import { Component, h, Prop } from '@stencil/core';
 export class Spinner {
+  constructor() {
+    /**
+      * The button size.
+      */
+    this.size = 'large';
+    /**
+     * The color spinner.
+     */
+    this.color = 'default';
+  }
   render() {
-    return (h("svg", { class: "spinner", viewBox: "25 25 50 50" },
-      h("circle", { class: "spinner-circle", cx: "50", cy: "50", r: "20" })));
+    const sizeClass = this.size !== undefined ? `spinner spinner--${this.size}` : 'spinner';
+    const colorClass = this.size !== undefined ? `spinner-circle spinner-circle--${this.color}` : 'spinner-circle';
+    return (h("svg", { class: `${sizeClass}`, viewBox: "25 25 50 50" },
+      h("circle", { class: `${colorClass}`, cx: "50", cy: "50", r: "20" })));
   }
   static get is() { return "road-spinner"; }
   static get encapsulation() { return "shadow"; }
@@ -12,4 +24,42 @@ export class Spinner {
   static get styleUrls() { return {
     "$": ["spinner.css"]
   }; }
+  static get properties() { return {
+    "size": {
+      "type": "string",
+      "mutable": false,
+      "complexType": {
+        "original": "'small' | 'medium' | 'large' | 'xl'",
+        "resolved": "\"large\" | \"medium\" | \"small\" | \"xl\" | undefined",
+        "references": {}
+      },
+      "required": false,
+      "optional": true,
+      "docs": {
+        "tags": [],
+        "text": "The button size."
+      },
+      "attribute": "size",
+      "reflect": true,
+      "defaultValue": "'large'"
+    },
+    "color": {
+      "type": "string",
+      "mutable": false,
+      "complexType": {
+        "original": "'default' | 'light' | 'dark'",
+        "resolved": "\"dark\" | \"default\" | \"light\" | undefined",
+        "references": {}
+      },
+      "required": false,
+      "optional": true,
+      "docs": {
+        "tags": [],
+        "text": "The color spinner."
+      },
+      "attribute": "color",
+      "reflect": true,
+      "defaultValue": "'default'"
+    }
+  }; }
 }