@roadtrip/components 2.27.1 → 2.28.0

package/dist/collection/components/button/button.css

@@ -30,8 +30,8 @@
   --border-radius: 0.25rem;
   --font-size: 1rem;
   --margin-bottom: 1rem;
-  --padding-start: 1rem;
-  --padding-end: 1rem;
+  --padding-start: 1.5rem;
+  --padding-end: 1.5rem;
 
   box-sizing: border-box;
   display: inline-flex;
@@ -40,11 +40,11 @@
   height: 3rem;
   padding: 0;
   margin-bottom: var(--margin-bottom);
-  font-family: var(--font, sans-serif);
+  font-family: var(--road-font, sans-serif);
   font-size: var(--font-size);
   font-weight: 700;
   line-height: 1.375;
-  color: var(--text);
+  color: var(--road-grey-900);
   text-decoration: none;
   white-space: nowrap;
   vertical-align: middle;
@@ -105,22 +105,30 @@
 /* PLAIN
  -------------------- */
 
+/**
+ * Default
+ */
+
+:host(.btn-default:not([disabled]).focus-visible) {
+  background: var(--road-grey-200);
+}
+
 /**
  * Primary
  */
 
 :host(.btn-primary) {
-  color: var(--primary-contrast);
-  background: var(--primary);
+  color: var(--road-primary-contrast);
+  background: var(--road-primary-500);
 }
 
 :host(.btn-primary) ::slotted(road-icon) {
-  color: var(--primary-contrast);
+  color: var(--road-primary-contrast);
 }
 
 :host(.btn-primary:not([disabled]):hover),
 :host(.btn-primary:not([disabled]).focus-visible) {
-  background: var(--primary-hover);
+  background: var(--road-primary-700);
 }
 
 /**
@@ -128,97 +136,17 @@
  */
 
 :host(.btn-secondary) {
-  color: var(--secondary-contrast);
-  background: var(--secondary);
+  color: var(--road-primary-contrast);
+  background: var(--road-primary-500);
 }
 
 :host(.btn-secondary) ::slotted(road-icon) {
-  color: var(--secondary-contrast);
+  color: var(--road-primary-contrast);
 }
 
 :host(.btn-secondary:not([disabled]):hover),
 :host(.btn-secondary:not([disabled]).focus-visible) {
-  background: var(--secondary-hover);
-}
-
-/**
- * Info
- */
-
-:host(.btn-info) {
-  color: var(--info-contrast);
-  background: var(--info);
-}
-
-:host(.btn-info) ::slotted(road-icon) {
-  color: var(--info-contrast);
-}
-
-:host(.btn-info:not([disabled]):hover),
-:host(.btn-info:not([disabled]).focus-visible) {
-  background: var(--info-hover);
-}
-
-/**
- * Success
- */
-
-:host(.btn-success) {
-  color: var(--success-contrast);
-  background: var(--success-text);
-}
-
-:host(.btn-success) ::slotted(road-icon) {
-  color: var(--success-contrast);
-}
-
-:host(.btn-success:not([disabled]):hover),
-:host(.btn-success:not([disabled]).focus-visible) {
-  background: var(--success-hover);
-}
-
-/**
- * Warning
- */
-
-:host(.btn-warning) {
-  color: var(--warning-contrast);
-  background: var(--warning);
-}
-
-:host(.btn-warning) ::slotted(road-icon) {
-  color: var(--warning-contrast);
-}
-
-:host(.btn-warning:not([disabled]):hover),
-:host(.btn-warning:not([disabled]).focus-visible) {
-  background: var(--warning-hover);
-}
-
-/**
- * Danger
- */
-
-:host(.btn-danger) {
-  color: var(--danger-contrast);
-  background: var(--danger-text);
-}
-
-:host(.btn-danger) ::slotted(road-icon) {
-  color: var(--danger-contrast);
-}
-
-:host(.btn-danger:not([disabled]):hover),
-:host(.btn-danger:not([disabled]).focus-visible) {
-  background: var(--danger-hover);
-}
-
-/**
- * Default
- */
-
-:host(.btn-default:not([disabled]).focus-visible) {
-  background: var(--background-second);
+  background: var(--road-primary-700);
 }
 
 /**
@@ -227,13 +155,13 @@
 
 :host(.btn-link) {
   font-weight: 400;
-  color: var(--secondary);
+  color: var(--road-primary-500);
   background: transparent;
 }
 
 :host(.btn-link:not([disabled]):hover),
 :host(.btn-link:not([disabled]).focus-visible) {
-  color: var(--secondary-hover);
+  color: var(--road-primary-700);
 }
 
 /* OUTLINE
@@ -241,9 +169,6 @@
 
 :host(.btn-outline-primary),
 :host(.btn-outline-secondary),
-:host(.btn-outline-success),
-:host(.btn-outline-warning),
-:host(.btn-outline-danger),
 :host(.btn-outline-default) {
   background: transparent;
 }
@@ -253,14 +178,18 @@
  */
 
 :host(.btn-outline-default) {
-  color: var(--text-second);
-  background: var(--white);
-  border-color: var(--text-second);
+  color: var(--road-grey-600);
+  background: var(--road-grey-000);
+  border-color: var(--road-grey-600);
+}
+
+:host(.btn-outline-default) ::slotted(road-icon) {
+  color: var(--road-grey-600);
 }
 
 :host(.btn-outline-default:hover),
 :host(.btn-outline-default.focus-visible) {
-  background: var(--background);
+  background: var(--road-grey-200);
 }
 
 /**
@@ -268,17 +197,17 @@
  */
 
 :host(.btn-outline-primary) {
-  color: var(--primary);
-  border-color: var(--primary);
+  color: var(--road-primary-500);
+  border-color: var(--road-primary-500);
 }
 
 :host(.btn-outline-primary) ::slotted(road-icon) {
-  color: var(--primary);
+  color: var(--road-primary-500);
 }
 
 :host(.btn-outline-primary:hover),
 :host(.btn-outline-primary.focus-visible) {
-  background: var(--primary-lighten);
+  background: var(--road-primary-100);
 }
 
 /**
@@ -286,89 +215,17 @@
  */
 
 :host(.btn-outline-secondary) {
-  color: var(--secondary);
-  border-color: var(--secondary);
+  color: var(--road-primary-500);
+  border-color: var(--road-primary-500);
 }
 
 :host(.btn-outline-secondary) ::slotted(road-icon) {
-  color: var(--secondary);
+  color: var(--road-primary-500);
 }
 
 :host(.btn-outline-secondary:hover),
 :host(.btn-outline-secondary.focus-visible) {
-  background: var(--secondary-lighten);
-}
-
-/**
- * Outline info
- */
-
-:host(.btn-outline-info) {
-  color: var(--info);
-  border-color: var(--info);
-}
-
-:host(.btn-outline-info) ::slotted(road-icon) {
-  color: var(--info);
-}
-
-:host(.btn-outline-info:hover),
-:host(.btn-outline-info.focus-visible) {
-  background: var(--info-background);
-}
-
-/**
- * Outline success
- */
-
-:host(.btn-outline-success) {
-  color: var(--success-text);
-  border-color: var(--success-text);
-}
-
-:host(.btn-outline-success) ::slotted(road-icon) {
-  color: var(--success-text);
-}
-
-:host(.btn-outline-success:hover),
-:host(.btn-outline-success.focus-visible) {
-  background: var(--success-background);
-}
-
-/**
- * Outline warning
- */
-
-:host(.btn-outline-warning) {
-  color: var(--warning-text);
-  border-color: var(--warning-text);
-}
-
-:host(.btn-outline-warning) ::slotted(road-icon) {
-  color: var(--warning-text);
-}
-
-:host(.btn-outline-warning:hover),
-:host(.btn-outline-warning.focus-visible) {
-  background: var(--warning-background);
-}
-
-/**
- * Outline danger
- */
-
-:host(.btn-outline-danger) {
-  color: var(--danger-text);
-  border-color: var(--danger-text);
-}
-
-:host(.btn-outline-danger) ::slotted(road-icon) {
-  color: var(--danger-text);
-}
-
-:host(.btn-outline-danger:hover),
-:host(.btn-outline-danger.focus-visible) {
-  background: var(--danger-background);
+  background: var(--road-primary-100);
 }
 
 /* DISABLED
@@ -382,11 +239,6 @@
   cursor: not-allowed;
 }
 
-:host([class*="btn-outline"][disabled]:hover),
-:host([class*="btn-outline"][disabled].focus-visible) {
-  background: var(--white);
-}
-
 /* SIZES
  -------------------- */
 
@@ -398,6 +250,19 @@
   margin-left: 0.5rem;
 }
 
+/**
+ * Extra Large
+ */
+
+:host(.btn-xl) {
+  height: 3.5rem;
+}
+
+:host(.btn-xl) ::slotted(road-icon) {
+  width: 2rem;
+  height: 2rem;
+}
+
 /**
  * Medium
  */
@@ -418,10 +283,9 @@
  */
 
 :host(.btn-sm) {
-  --font-size: 0.75rem;
+  --font-size: 0.875rem;
 
   height: 2rem;
-  line-height: 1.5;
 }
 
 :host(.btn-sm) ::slotted(road-icon) {

package/dist/collection/components/button/button.js

@@ -92,14 +92,9 @@ export class Button {
       "type": "string",
       "mutable": false,
       "complexType": {
-        "original": "Color",
-        "resolved": "\"accent\" | \"danger\" | \"default\" | \"info\" | \"primary\" | \"secondary\" | \"success\" | \"warning\" | undefined",
-        "references": {
-          "Color": {
-            "location": "import",
-            "path": "../../interface"
-          }
-        }
+        "original": "'primary' | 'secondary' | 'default'",
+        "resolved": "\"default\" | \"primary\" | \"secondary\" | undefined",
+        "references": {}
       },
       "required": false,
       "optional": true,
@@ -115,8 +110,8 @@ export class Button {
       "type": "string",
       "mutable": false,
       "complexType": {
-        "original": "'sm' | 'md' | 'lg'",
-        "resolved": "\"lg\" | \"md\" | \"sm\" | undefined",
+        "original": "'sm' | 'md' | 'lg' | 'xl'",
+        "resolved": "\"lg\" | \"md\" | \"sm\" | \"xl\" | undefined",
         "references": {}
       },
       "required": false,

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

@@ -12,7 +12,7 @@ export default {
   },
   argTypes: {
     color: {
-      options: ['default', 'primary', 'secondary', 'info', 'success', 'warning', 'danger'],
+      options: ['default', 'primary', 'secondary'],
       control: {
         type: 'select',
       },
@@ -48,7 +48,7 @@ export default {
       },
     },
     size: {
-      options: ['sm', 'md', 'lg'],
+      options: ['sm', 'md', 'lg', 'xl'],
       control: {
         type: 'select',
       },
@@ -131,7 +131,7 @@ export default {
     outline: null,
     size: null,
     start: ``,
-    ' ': `click me!`,
+    ' ': `Label`,
     end: undefined,
   },
 };
@@ -158,6 +158,11 @@ Playground.args = {
   ' ': `Add to cart`,
 };
 
+export const Default = Template.bind({});
+Default.args = {
+  color: 'secondary',
+};
+
 export const Outline = Template.bind({});
 Outline.args = {
   color: 'secondary',
@@ -178,6 +183,6 @@ Disabled.args = {
 
 export const BackButton = Template.bind({});
 BackButton.args = {
-  start: `<road-icon slot="start" name="navigation-chevron" color="warning" rotate="180"></road-icon>`,
+  start: `<road-icon slot="start" name="navigation-chevron" rotate="180"></road-icon>`,
   ' ': `Back`,
 };

package/dist/collection/components/card/card.css

@@ -39,7 +39,7 @@
   text-transform: inherit;
   letter-spacing: inherit;
   white-space: inherit;
-  background: var(--white);
+  background: var(--road-grey-000);
   border: 0;
   border-radius: 0.25rem;
   outline: none;

package/dist/collection/components/carousel/carousel.css

@@ -67,19 +67,19 @@ road-carousel {
 }
 
 .swiper-pagination-progressbar {
-  background: var(--border);
+  background: var(--road-grey-200);
 }
 
 .swiper-pagination-progressbar .swiper-pagination-progressbar-fill {
-  background: var(--text);
+  background: var(--road-grey-900);
 }
 
 .swiper-scrollbar {
-  background: var(--border);
+  background: var(--road-grey-300);
 }
 
 .swiper-scrollbar-drag {
-  background: var(--text);
+  background: var(--road-grey-900);
 }
 
 /* ARROWS
@@ -103,7 +103,7 @@ road-carousel {
 
   .swiper-button-prev road-icon,
   .swiper-button-next road-icon {
-    color: var(--white);
+    color: var(--road-grey-000);
   }
 }
 
@@ -120,12 +120,12 @@ road-carousel {
 
   .swiper-button-prev:hover,
   .swiper-button-next:hover {
-    background: var(--white);
+    background: var(--road-grey-000);
   }
 
   .swiper-button-prev:hover road-icon,
   .swiper-button-next:hover road-icon {
-    color: var(--text);
+    color: var(--road-grey-900);
   }
 }
 

package/dist/collection/components/checkbox/checkbox.css

@@ -20,10 +20,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);
 }
 
 /**
@@ -53,12 +53,12 @@
   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: 0.25rem;
-  transition: border 0.2s ease-in-out;
+  transition: border 0.2s ease-in-out, background 0.2s ease-in-out;
 }
 
 .form-check-icon {
@@ -69,9 +69,9 @@
   display: block;
   width: 1.25rem;
   height: 1.25rem;
+  color: var(--road-primary-contrast);
   opacity: 0;
   transition: opacity 0.2s ease-in-out;
-  fill: var(--secondary-contrast);
 }
 
 /**
@@ -80,13 +80,13 @@
 
 @media (hover: hover) {
 
-  .form-check-input:not(:checked):not(:disabled) ~ .form-check-label:hover .form-check-icon {
-    opacity: 1;
-    fill: var(--border-form);
+  .form-check-input:not(:disabled) ~ .form-check-label:hover::before {
+    border-color: var(--road-primary-700);
   }
 
-  .form-check-input:not(:checked) ~ .form-check-label:hover::before {
-    border-color: var(--secondary);
+  .form-check-input:not(:disabled):checked ~ .form-check-label:hover::before,
+  .form-check-input:not(:disabled):indeterminate ~ .form-check-label:hover::before {
+    background: var(--road-primary-700);
   }
 }
 
@@ -94,13 +94,15 @@
  * Checked state
  */
 
-.form-check-input:checked ~ .form-check-label .form-check-icon {
+.form-check-input:checked ~ .form-check-label .form-check-icon,
+.form-check-input:indeterminate ~ .form-check-label .form-check-icon {
   opacity: 1;
 }
 
-.form-check-input:checked ~ .form-check-label::before {
-  background: var(--secondary);
-  border-color: var(--secondary);
+.form-check-input:checked ~ .form-check-label::before,
+.form-check-input:indeterminate ~ .form-check-label::before {
+  background: var(--road-primary-500);
+  border-color: var(--road-primary-500);
 }
 
 /**
@@ -108,7 +110,13 @@
  */
 
 .form-check-input.focus-visible ~ .form-check-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-check-input.focus-visible:checked ~ .form-check-label::before,
+.form-check-input.focus-visible:indeterminate ~ .form-check-label::before {
+  background: var(--road-primary-700);
+  border-color: var(--road-primary-700);
 }
 
 /**
@@ -117,16 +125,20 @@
 
 .form-check-input:disabled ~ .form-check-label,
 .form-check-input[readonly] ~ .form-check-label {
-  color: var(--text-disabled);
   cursor: not-allowed;
 }
 
 .form-check-input:disabled ~ .form-check-label::before,
 .form-check-input[readonly] ~ .form-check-label::before {
-  background: var(--background-second);
+  background: var(--road-disabled);
   border: none;
 }
 
+.form-check-input:disabled ~ .form-check-label .form-check-icon,
+.form-check-input[readonly] ~ .form-check-label .form-check-icon {
+  fill: var(--road-grey-400);
+}
+
 /* ERROR
  -------------------- */
 
@@ -136,12 +148,12 @@
   width: 100%;
   margin-top: 0.5rem;
   font-size: 0.75rem;
-  color: var(--danger-text);
+  color: var(--road-danger-default);
 }
 
 .form-check-input.is-invalid ~ .form-check-label::before,
 .was-validated .form-check-input:invalid ~ .form-check-label::before {
-  border-color: var(--danger);
+  border-color: var(--road-danger-default);
 }
 
 .form-check-input.is-invalid ~ .invalid-feedback,

package/dist/collection/components/checkbox/checkbox.js

@@ -1,4 +1,5 @@
 import { Component, Event, Host, Prop, Watch, h } from '@stencil/core';
+import { checkWide, navigationAddLess } from '../../../icons';
 import './../../utils/polyfill';
 /**
  * @slot  - Adding additional elements next to the label (e.g. number of items in filters).
@@ -21,6 +22,10 @@ export class Checkbox {
      * If `true`, the checkbox is checked.
      */
     this.checked = false;
+    /**
+     * If `true`, the checkbox will visually appear as indeterminate.
+     */
+    this.indeterminate = false;
     /**
      * If `true`, the user cannot interact with the checkbox.
      */
@@ -39,6 +44,7 @@ export class Checkbox {
     this.inverse = false;
     this.onClick = () => {
       this.checked = !this.checked;
+      this.indeterminate = false;
     };
     this.onFocus = () => {
       this.roadfocus.emit();
@@ -64,13 +70,13 @@ export class Checkbox {
     const inverseClass = this.inverse && 'form-checkbox-inverse';
     const isInvalidClass = this.error !== undefined && !this.checked && this.error !== '' ? 'is-invalid' : '';
     return (h(Host, null,
-      h("input", { class: `form-check-input ${isInvalidClass}`, type: "checkbox", id: this.checkboxId, name: this.name, required: this.required, disabled: this.disabled, checked: this.checked, value: this.value, "aria-checked": `${this.checked}`, "aria-disabled": this.disabled ? 'true' : null, "aria-labelledby": labelId, onClick: this.onClick, onFocus: this.onFocus, onBlur: this.onBlur }),
+      h("input", { class: `form-check-input ${isInvalidClass}`, type: "checkbox", id: this.checkboxId, name: this.name, required: this.required, disabled: this.disabled, indeterminate: this.indeterminate, checked: this.checked, value: this.value, "aria-checked": `${this.checked}`, "aria-disabled": this.disabled ? 'true' : null, "aria-labelledby": labelId, onClick: this.onClick, onFocus: this.onFocus, onBlur: this.onBlur }),
       h("label", { class: `form-check-label ${inverseClass}`, id: labelId, htmlFor: this.checkboxId },
         h("div", null,
           this.label,
           h("slot", null)),
-        h("svg", { xmlns: "http://www.w3.org/2000/svg", viewBox: "0 0 64 64", class: "form-check-icon", "aria-hidden": "true" },
-          h("path", { d: "M25.59 39.75l-8.34-8.34-2.84 2.82 11.18 11.18 24-24-2.82-2.82z" }))),
+        this.checked && !this.indeterminate && h("road-icon", { class: "form-check-icon", icon: checkWide }),
+        this.indeterminate && h("road-icon", { class: "form-check-icon", icon: navigationAddLess })),
       this.error && this.error !== '' && h("p", { class: "invalid-feedback" }, this.error)));
   }
   static get is() { return "road-checkbox"; }
@@ -154,6 +160,24 @@ export class Checkbox {
       "reflect": false,
       "defaultValue": "false"
     },
+    "indeterminate": {
+      "type": "boolean",
+      "mutable": false,
+      "complexType": {
+        "original": "boolean",
+        "resolved": "boolean",
+        "references": {}
+      },
+      "required": false,
+      "optional": false,
+      "docs": {
+        "tags": [],
+        "text": "If `true`, the checkbox will visually appear as indeterminate."
+      },
+      "attribute": "indeterminate",
+      "reflect": false,
+      "defaultValue": "false"
+    },
     "disabled": {
       "type": "boolean",
       "mutable": false,