@roadtrip/components 2.26.0 → 2.28.0

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>
-`;
+`;

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>