@roadtrip/components 2.27.0 → 2.29.0

package/dist/collection/components/modal/modal.css

@@ -32,9 +32,9 @@
   width: 100%;
   height: 100%;
   overflow: hidden;
-  font-family: var(--font, sans-serif);
+  font-family: var(--road-font, sans-serif);
   line-height: 1.5;
-  color: var(--text);
+  color: var(--road-grey-900);
   visibility: hidden !important;
   opacity: 0;
   transition: opacity 0.15s linear, visibility 0.15s;
@@ -52,7 +52,7 @@
   display: block;
   touch-action: none;
   cursor: pointer;
-  background: rgba(0, 0, 0, 0.5);
+  background: var(--road-overlay);
 }
 
 /* MODAL
@@ -89,7 +89,7 @@
   width: 100%;
   height: 100vh;
   pointer-events: auto;
-  background: var(--white);
+  background: var(--road-grey-000);
   background-clip: padding-box;
   box-shadow: 0 0.1875rem 0.375rem rgba(0, 0, 0, 0.16);
 }
@@ -109,12 +109,12 @@
   display: flex;
   align-items: center;
   justify-content: flex-end;
-  color: var(--primary-contrast);
-  background: var(--primary);
+  color: var(--road-primary-contrast);
+  background: var(--road-primary-900);
 }
 
 .modal-header road-icon {
-  color: var(--primary-contrast);
+  color: var(--road-primary-contrast);
 }
 
 @media (min-width: 768px) {
@@ -129,12 +129,12 @@
  */
 
 .modal-header-inverse {
-  color: var(--text);
+  color: var(--road-grey-900);
   background: none;
 }
 
 .modal-header-inverse road-icon {
-  color: var(--text);
+  color: var(--road-grey-900);
 }
 
 /* ACTIONS

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

@@ -60,8 +60,8 @@ export const Playground = (args) => html`
 </road-modal>
 `;
 Playground.args = {
-  'has-inverse-header': false,
+  'has-inverse-header': true,
   'is-open': true,
-  'has-close-icon': true,
+  'has-close-icon': null,
   'max-width': 480,
 };

package/dist/collection/components/navbar/navbar.css

@@ -23,6 +23,6 @@
   contain: strict;
   -webkit-user-select: none;
           user-select: none;
-  background-color: var(--white);
-  border-top: 1px solid var(--border);
+  background-color: var(--road-grey-000);
+  border-top: 1px solid var(--road-grey-300);
 }

package/dist/collection/components/navbar-item/navbar-item.css

@@ -23,19 +23,22 @@
  */
 
 :host(.tab-selected) {
-  color: var(--secondary);
+  color: var(--road-primary-500);
 }
 
 :host(.tab-selected) ::slotted(road-icon) {
-  color: var(--secondary);
+  color: var(--road-primary-500);
 }
 
 /**
  * Focus on Tab state
  */
 
-:host(.focus-visible) {
-  background: var(--background);
+:host(.focus-visible) ::slotted(road-icon),
+:host(.focus-visible) ::slotted(road-label),
+:host(:hover) ::slotted(road-icon),
+:host(:hover) ::slotted(road-label) {
+  color: var(--road-primary-700);
 }
 
 
@@ -102,7 +105,7 @@
  -------------------- */
 
 ::slotted(road-label) {
-  font-size: 0.625rem;
+  font-size: 0.75rem;
 }
 
 /* BADGE

package/dist/collection/components/patterns/breadcrumb.stories.js

@@ -0,0 +1,72 @@
+import { html } from 'lit-html';
+
+export default {
+  title: 'Navigation/Breadcrumb',
+};
+
+export const Playground = () => html`
+<div class="d-flex align-items-center">
+  <a class="link link-default d-inline-flex align-items-center" href="#">
+    Home
+  </a>
+  <road-icon size="sm" class="mx-8" name="navigation-chevron"></road-icon>
+  <a class="link link-default d-inline-flex align-items-center" href="#">
+    link 1
+  </a>
+  <road-icon size="sm" class="mx-8" name="navigation-chevron"></road-icon>
+  <a class="link link-default d-inline-flex align-items-center" href="#">
+    link 2
+  </a>
+  <road-icon size="sm" class="mx-8" name="navigation-chevron"></road-icon>
+  <span>
+    Page title
+  </span>
+</div>
+`;
+
+export const Levels = () => html`
+<!-- 1 level -->
+<div class="d-flex align-items-center">
+  <a class="link link-default d-inline-flex align-items-center" href="#">
+    Home
+  </a>
+  <road-icon size="sm" class="mx-8" name="navigation-chevron"></road-icon>
+  <span>
+    Page title
+  </span>
+</div>
+
+<!--  2 levels -->
+<div class="d-flex align-items-center">
+  <a class="link link-default d-inline-flex align-items-center" href="#">
+    Home
+  </a>
+  <road-icon size="sm" class="mx-8" name="navigation-chevron"></road-icon>
+  <a class="link link-default d-inline-flex align-items-center" href="#">
+    link 1
+  </a>
+  <road-icon size="sm" class="mx-8" name="navigation-chevron"></road-icon>
+  <span>
+    Page title
+  </span>
+</div>
+
+<!--  3 levels -->
+<div class="d-flex align-items-center">
+  <a class="link link-default d-inline-flex align-items-center" href="#">
+    Home
+  </a>
+  <road-icon size="sm" class="mx-8" name="navigation-chevron"></road-icon>
+  <a class="link link-default d-inline-flex align-items-center" href="#">
+    link 1
+  </a>
+  <road-icon size="sm" class="mx-8" name="navigation-chevron"></road-icon>
+  <a class="link link-default d-inline-flex align-items-center" href="#">
+    link 2
+  </a>
+  <road-icon size="sm" class="mx-8" name="navigation-chevron"></road-icon>
+  <span>
+    Page title
+  </span>
+</div>
+`;

package/dist/collection/components/patterns/crossselling.stories.js

@@ -106,7 +106,7 @@ export const withAddToCart = () => {
           <p class="h7 text-left mb-8">27,95€</p>
           <p class="text-content text-left">
             <road-badge bubble color="success"></road-badge>
-            <strong style="color: var(--success-text)">In stock: collect in 1 hour</strong> in Villeneuve d'Ascq
+            <strong style="color: var(--road-success-text)">In stock: collect in 1 hour</strong> in Villeneuve d'Ascq
           </p>
           <road-button color="secondary" expand>
             <road-icon name="shopping-cart-add"></road-icon>
@@ -123,7 +123,7 @@ export const withAddToCart = () => {
           <p class="h7 text-left mb-8">99,95€</p>
           <p class="text-content text-left">
             <road-badge bubble color="success"></road-badge>
-            <strong style="color: var(--success-text)">From 13 September</strong> in Villeneuve d'Ascq
+            <strong style="color: var(--road-success-text)">From 13 September</strong> in Villeneuve d'Ascq
           </p>
           <road-button color="secondary" expand>
             <road-icon name="shopping-cart-add"></road-icon>
@@ -140,7 +140,7 @@ export const withAddToCart = () => {
           <p class="h7 text-left mb-8">99,95€</p>
           <p class="text-content text-left">
             <road-badge bubble color="success"></road-badge>
-            <strong style="color: var(--success-text)">In stock: collect in 1 hour</strong> in Villeneuve d'Ascq
+            <strong style="color: var(--road-success-text)">In stock: collect in 1 hour</strong> in Villeneuve d'Ascq
           </p>
           <road-button color="secondary" expand>
             <road-icon name="shopping-cart-add"></road-icon>
@@ -157,7 +157,7 @@ export const withAddToCart = () => {
           <p class="h7 text-left mb-8">4,99€</p>
           <p class="text-content text-left">
             <road-badge bubble color="success"></road-badge>
-            <strong style="color: var(--success-text)">In stock: collect in 1 hour</strong> in Villeneuve d'Ascq
+            <strong style="color: var(--road-success-text)">In stock: collect in 1 hour</strong> in Villeneuve d'Ascq
           </p>
           <road-button color="secondary" expand>
             <road-icon name="shopping-cart-add"></road-icon>

package/dist/collection/components/patterns/filter.stories.js

@@ -33,7 +33,7 @@ export const Filters = () => html`
       --min-height: 2.25rem;
       --inner-padding: 0.5rem 0.5rem 0.5rem 0;
       --padding-left: 0.5rem;
-      --detail-color: var(--accent);
+      --detail-color: var(--road-secondary-500);
     }
   </style>
   <road-grid>
@@ -167,7 +167,7 @@ export const ModalFilters = () => html`
       --min-height: 2.25rem;
       --inner-padding: 0.5rem 0.5rem 0.5rem 0;
       --padding-left: 0.5rem;
-      --detail-color: var(--accent);
+      --detail-color: var(--road-secondary-500);
     }
   </style>
   <road-drawer is-open drawer-title="Refine">

package/dist/collection/components/patterns/link.stories.js

@@ -0,0 +1,35 @@
+import { html } from 'lit-html';
+
+export default {
+  title: 'Navigation/Link',
+};
+
+export const Playground = () => html`
+<a class="link" href="#">Link</a>
+
+<br><br>
+
+<a class="link d-inline-flex align-items-center" href="#">
+  <road-icon size="sm" class="mr-4" name="edit-pen"></road-icon>
+  Link
+</a>
+
+<br><br>
+
+<a class="link d-inline-flex align-items-center" href="#">
+  Link
+  <road-icon size="sm" class="mr-4" name="arrow"></road-icon>
+</a>
+`;
+
+export const Default = () => html`
+<a class="link link-default" href="#">Link</a>
+`;
+
+export const Sizes = () => html`
+<a class="link link-md" href="#">Link</a>
+
+<br><br>
+
+<a class="link link-sm" href="#">Link</a>
+`;

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

@@ -20,8 +20,8 @@
 .plate-number-start,
 .plate-number-end {
   width: 1.75rem;
-  height: 3rem;
-  background: var(--info-text);
+  height: calc(3rem - 0.25rem);
+  background: var(--road-info-text);
 }
 
 .input-group-prepend {
@@ -40,8 +40,9 @@
   justify-content: center;
   padding: 0;
   margin-right: 0;
-  color: var(--info-contrast);
-  border-radius: 3px 0 0 3px;
+  margin-left: 1px;
+  color: var(--road-info-contrast);
+  border-radius: 0.125rem 0 0 0.125rem;
 }
 
 .plate-number-icon {
@@ -56,7 +57,18 @@
 }
 
 .plate-number-end {
-  border-radius: 0 3px 3px 0;
+  margin-right: 1px;
+  border-radius: 0 0.125rem 0.125rem 0;
+}
+
+.plate-number-be .plate-number-input {
+  color: var(--road-danger-text);
+}
+
+.plate-number-be .plate-number-input,
+.plate-number-be .input-group-append,
+.plate-number-be .input-group-prepend {
+  border-color: var(--road-danger-text);
 }
 
 /* INPUT
@@ -67,13 +79,15 @@
   display: block;
   height: 3rem;
   margin: 0;
-  font-family: Oswald, sans-serif;
-  font-size: 2rem;
-  color: var(--text);
+  font-family: var(--road-font, sans-serif);
+  font-size: 1.75rem;
+  font-weight: 700;
+  color: var(--road-grey-900);
   text-align: center;
-  background: var(--white);
-  border: 1px solid var(--border-form);
+  background: var(--road-grey-000);
+  border: 1px solid var(--road-grey-400);
   border-radius: 0;
+  outline: 0;
   box-shadow: none;
   -webkit-appearance: none;
      -moz-appearance: none;
@@ -81,12 +95,46 @@
 }
 
 .plate-number-input::placeholder {
-  color: var(--border);
+  color: var(--road-grey-500);
   opacity: 1;
 }
 
-.plate-number-input:focus {
-  border-color: var(--secondary);
+/**
+ * Disabled state
+ */
+
+.plate-number-input:disabled,
+.plate-number-input[readonly] {
+  color: var(--road-grey-900);
+  cursor: not-allowed;
+  background: var(--road-disabled);
+  opacity: 1;
+}
+
+.plate-number-input:disabled ~ .input-group-prepend,
+.plate-number-input[readonly] ~ .input-group-prepend,
+.plate-number-input:disabled ~ .input-group-append,
+.plate-number-input[readonly] ~ .input-group-append {
+  background: var(--road-disabled);
+}
+
+/**
+ * Hover state
+ */
+
+@media (hover: hover) {
+
+  .plate-number-input:not(:disabled):not([readonly]):hover {
+    border-color: var(--road-primary-700);
+  }
+}
+
+/**
+ * Focus state
+ */
+
+.plate-number-input:not([readonly]):focus {
+  border-color: var(--road-primary-700);
   outline: 0;
 }
 
@@ -108,9 +156,11 @@
 }
 
 .motorbike-plate .plate-number-start {
-  border-radius: 3px 0 0;
+  margin-top: 1px;
+  border-radius: 0.125rem 0 0;
 }
 
 .motorbike-plate .plate-number-end {
-  border-radius: 0 3px 0 0;
+  margin-top: 1px;
+  border-radius: 0 0.125rem 0 0;
 }

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

@@ -38,6 +38,14 @@ export class PlateNumber {
      * country of the plate
      */
     this.country = 'FR';
+    /**
+     * If `true`, the user cannot interact with the input.
+     */
+    this.disabled = false;
+    /**
+     * If `true`, the user cannot modify the value.
+     */
+    this.readonly = false;
     /**
      * The value of the input.
      */
@@ -74,15 +82,15 @@ export class PlateNumber {
   render() {
     const value = this.getValue();
     const motorbikeClass = this.motorbike ? 'motorbike-plate' : '';
-    return (h("road-input-group", { class: `plate-number ${motorbikeClass}` },
+    return (h("road-input-group", { class: `plate-number plate-number-${this.country.toLowerCase()} ${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))),
       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("textarea", { class: "form-control plate-number-input mb-0", disabled: this.disabled, placeholder: this.placeholder != null ? this.placeholder : this.countries.filter(item => item.country === this.country)[0].placeholder, readOnly: this.readonly, maxlength: "9", rows: 2, onInput: this.onInput, onBlur: this.onBlur, onFocus: this.onFocus }))
+        : (h("input", { class: "plate-number-input mb-0", disabled: this.disabled, placeholder: this.placeholder != null ? this.placeholder : this.countries.filter(item => item.country === this.country)[0].placeholder, readOnly: this.readonly, 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" }))));
   }
@@ -94,7 +102,6 @@ export class PlateNumber {
   static get styleUrls() { return {
     "$": ["plate-number.css"]
   }; }
-  static get assetsDirs() { return ["fonts"]; }
   static get properties() { return {
     "country": {
       "type": "string",
@@ -114,6 +121,24 @@ export class PlateNumber {
       "reflect": false,
       "defaultValue": "'FR'"
     },
+    "disabled": {
+      "type": "boolean",
+      "mutable": false,
+      "complexType": {
+        "original": "boolean",
+        "resolved": "boolean",
+        "references": {}
+      },
+      "required": false,
+      "optional": false,
+      "docs": {
+        "tags": [],
+        "text": "If `true`, the user cannot interact with the input."
+      },
+      "attribute": "disabled",
+      "reflect": false,
+      "defaultValue": "false"
+    },
     "placeholder": {
       "type": "string",
       "mutable": false,
@@ -131,6 +156,24 @@ export class PlateNumber {
       "attribute": "placeholder",
       "reflect": false
     },
+    "readonly": {
+      "type": "boolean",
+      "mutable": false,
+      "complexType": {
+        "original": "boolean",
+        "resolved": "boolean",
+        "references": {}
+      },
+      "required": false,
+      "optional": false,
+      "docs": {
+        "tags": [],
+        "text": "If `true`, the user cannot modify the value."
+      },
+      "attribute": "readonly",
+      "reflect": false,
+      "defaultValue": "false"
+    },
     "value": {
       "type": "any",
       "mutable": true,

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

@@ -9,65 +9,89 @@ export default {
       handles: ['roadblur', 'roadfocus'],
     },
   },
+  argTypes: {
+    country: {
+      options: ['FR', 'BE', 'IT', 'ES', 'PT', 'PL'],
+      control: {
+        type: 'select',
+      },
+    },
+    disabled: {
+      control: 'boolean',
+    },
+    readonly: {
+      control: 'boolean',
+    },
+    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,
+      },
+    },
+  },
+  args: {
+    country: 'FR',
+    disabled: null,
+    readonly: null,
+  },
 };
 
-export const Playground = (args) => html`
+const Template = (args) => html`
 <road-plate-number
   country="${ifDefined(args.country)}"
   motorbike="${ifDefined(args.motorbike)}"
+  disabled="${ifDefined(args.disabled)}"
   placeholder="${ifDefined(args.placeholder)}"
+  readonly="${ifDefined(args.readonly)}"
   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',
+
+export const Playground = Template.bind({});
+
+export const Disabled = Template.bind({});
+Disabled.args = {
+  disabled: true,
+  value: "AA-123-AA",
 };
-Playground.argTypes = {
-  country: {
-    options: ['FR', 'BE', 'IT', 'ES', 'PT', 'PL'],
-    control: {
-      type: 'select',
-    },
-  },
-  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 ReadOnly = Template.bind({});
+ReadOnly.args = {
+  readonly: true,
+  value: "AA-123-AA",
 };
 
 export const MotorBike = () => html`
 <road-plate-number
   country="FR"
   motorbike="true"
-  style="width: 180px;"
+  style="width: 190px;"
 ></road-plate-number>
-`;
+`;