@roadtrip/components 2.27.1 → 2.28.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,13 @@
   display: block;
   height: 3rem;
   margin: 0;
-  font-family: var(--font, sans-serif);
+  font-family: var(--road-font, sans-serif);
   font-size: 1.75rem;
   font-weight: 700;
-  color: var(--text);
+  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;
@@ -83,7 +95,7 @@
 }
 
 .plate-number-input::placeholder {
-  color: var(--border);
+  color: var(--road-grey-500);
   opacity: 1;
 }
 
@@ -93,19 +105,36 @@
 
 .plate-number-input:disabled,
 .plate-number-input[readonly] {
-  color: var(--text);
+  color: var(--road-grey-900);
   cursor: not-allowed;
-  background: var(--background);
-  border-color: var(--background);
+  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(--secondary);
+  border-color: var(--road-primary-700);
   outline: 0;
 }
 
@@ -127,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

@@ -82,7 +82,7 @@ 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 }),
@@ -102,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",

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

@@ -48,7 +48,7 @@ export default {
       },
     },
     roadinput: {
-      action: 'roadInput',
+      action: 'roadinput',
       control: {
         type: null,
       },
@@ -94,4 +94,4 @@ export const MotorBike = () => html`
   motorbike="true"
   style="width: 190px;"
 ></road-plate-number>
-`;
+`;

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

@@ -4,19 +4,25 @@
  * Index
  * - Progress
  * - Progress Bar
- * - Feedback
+ * - Colors
+ */
+
+/**
+ * @prop --border-radius: Border radius of the progress
  */
 
 /* PROGRESS
  -------------------- */
 
 :host {
+  --border-radius: 0.25rem;
+
   display: flex;
   height: 0.25rem;
   overflow: hidden;
   font-size: 0.75rem;
-  background-color: var(--background);
-  border-radius: 0.25rem;
+  background-color: var(--road-grey-200);
+  border-radius: var(--border-radius);
 }
 
 /* PROGRESS BAR
@@ -32,21 +38,29 @@
   transition: width 0.6s ease;
 }
 
-/* FEEDBACK
+/* COLORS
  -------------------- */
 
+:host(.progress-primary) .progress-bar {
+  background: var(--road-primary-500);
+}
+
+:host(.progress-secondary) .progress-bar {
+  background: var(--road-secondary-500);
+}
+
 :host(.progress-info) .progress-bar {
-  background: var(--info);
+  background: var(--road-info-default);
 }
 
 :host(.progress-success) .progress-bar {
-  background: var(--success);
+  background: var(--road-success-default);
 }
 
 :host(.progress-warning) .progress-bar {
-  background: var(--warning);
+  background: var(--road-warning-default);
 }
 
 :host(.progress-danger) .progress-bar {
-  background: var(--danger);
+  background: var(--road-danger-default);
 }

package/dist/collection/components/progress/progress.js

@@ -9,7 +9,7 @@ export class ProgressBar {
     /**
      * The color to use from your application's color palette.
      */
-    this.color = 'info';
+    this.color = 'primary';
   }
   render() {
     return (h(Host, { class: `progress-${this.color}` },
@@ -46,14 +46,9 @@ export class ProgressBar {
       "type": "string",
       "mutable": false,
       "complexType": {
-        "original": "FeedbackColors",
-        "resolved": "\"danger\" | \"info\" | \"success\" | \"warning\"",
-        "references": {
-          "FeedbackColors": {
-            "location": "import",
-            "path": "../../interface"
-          }
-        }
+        "original": "'primary' | 'secondary' | 'info' | 'success' | 'warning' | 'danger'",
+        "resolved": "\"danger\" | \"info\" | \"primary\" | \"secondary\" | \"success\" | \"warning\"",
+        "references": {}
       },
       "required": false,
       "optional": false,
@@ -63,7 +58,7 @@ export class ProgressBar {
       },
       "attribute": "color",
       "reflect": false,
-      "defaultValue": "'info'"
+      "defaultValue": "'primary'"
     }
   }; }
 }

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

@@ -10,7 +10,7 @@ export const Playground = ({ value, color }) => html`
 `;
 Playground.args = {
   value: 25,
-  color: 'info',
+  color: 'primary',
 };
 Playground.argTypes = {
   value: {
@@ -21,11 +21,19 @@ Playground.argTypes = {
     },
   },
   color: {
-    options: ['info', 'success', 'warning', 'danger'],
+    options: ['primary', 'secondary', 'info', 'success', 'warning', 'danger'],
     control: {
       type: 'radio',
     },
   },
+  '--border-radius': {
+    table: {
+      defaultValue: { summary: '0.25rem' },
+    },
+    control: {
+      type: null,
+    },
+  },
 };
 
 export const Value = () => html`
@@ -49,6 +57,14 @@ export const Value = () => html`
 `;
 
 export const color = () => html`
+<road-progress value="80" color="primary"></road-progress>
+
+<br>
+
+<road-progress value="80" color="secondary"></road-progress>
+
+<br>
+
 <road-progress value="80" color="info"></road-progress>
 
 <br>

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

@@ -19,10 +19,10 @@
   position: relative;
   display: block;
   margin-bottom: 1.5rem;
-  font-family: var(--font, sans-serif);
-  font-size: 0.875rem;
+  font-family: var(--road-font, sans-serif);
+  font-size: 1rem;
   line-height: 1.5;
-  color: var(--text);
+  color: var(--road-grey-900);
 }
 
 /**
@@ -64,10 +64,10 @@
   flex-shrink: 0;
   width: 1.25rem;
   height: 1.25rem;
-  margin: 0 1rem 0 0;
+  margin: 0 0.75rem 0 0;
   content: "";
-  background: var(--white);
-  border: 1px solid var(--border-form);
+  background: var(--road-grey-000);
+  border: 1px solid var(--road-grey-400);
   border-radius: 50%;
   transition: border-color 0.2s ease-in-out;
 }
@@ -81,7 +81,7 @@
   width: 0.875rem;
   height: 0.875rem;
   content: "";
-  background: var(--border-form);
+  background: var(--road-grey-400);
   border: none;
   border-radius: 50%;
   transition: background 0.2s ease-in-out, transform 0.2s ease-in-out;
@@ -95,13 +95,12 @@
 
 @media (hover: hover) {
 
-  .form-radio-input:not(:checked):not(:disabled) ~ .form-radio-label:hover::after {
-    opacity: 1;
-    transform: scale(0.42);
+  .form-radio-input ~ .form-radio-label:hover::before {
+    border-color: var(--road-primary-700);
   }
 
-  .form-radio-input:not(:checked) ~ .form-radio-label:hover::before {
-    border-color: var(--secondary);
+  .form-radio-input:checked ~ .form-radio-label:hover::after {
+    background: var(--road-primary-700);
   }
 }
 
@@ -110,7 +109,7 @@
  */
 
 .form-radio-input:checked ~ .form-radio-label::after {
-  background: var(--secondary);
+  background: var(--road-primary-500);
   opacity: 1;
   transform: scale(1);
 }
@@ -120,7 +119,11 @@
  */
 
 .form-radio-input.focus-visible ~ .form-radio-label::before {
-  box-shadow: 0 0 0 0.125rem var(--white), 0 0 0 0.1875rem var(--secondary);
+  box-shadow: 0 0 0 0.125rem var(--road-grey-000), 0 0 0 0.1875rem var(--road-primary-700);
+}
+
+.form-radio-input.focus-visible:checked ~ .form-radio-label::after {
+  background: var(--road-primary-700);
 }
 
 /**
@@ -129,21 +132,25 @@
 
 .form-radio-input:disabled ~ .form-radio-label,
 .form-radio-input[readonly] ~ .form-radio-label {
-  color: var(--text-disabled);
   cursor: not-allowed;
 }
 
 .form-radio-input:disabled ~ .form-radio-label::before,
 .form-radio-input[readonly] ~ .form-radio-label::before {
-  background: var(--background-second);
+  background: var(--road-disabled);
   border: none;
 }
 
+.form-radio-input:disabled ~ .form-radio-label::after,
+.form-radio-input[readonly] ~ .form-radio-label::after {
+  background: var(--road-grey-400);
+}
+
 /* ERROR
  -------------------- */
 
 .form-radio-input.is-invalid ~ .form-radio-label::before {
-  border-color: var(--danger);
+  border-color: var(--road-danger-default);
 }
 
 /* POSITION