@roadtrip/components 2.27.0 → 2.29.0

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,14 +70,15 @@ 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.error && this.error !== '' && h("p", { class: "invalid-feedback" }, this.error)));
+        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),
+      this.helper && this.helper !== '' && h("p", { class: "helper" }, this.helper)));
   }
   static get is() { return "road-checkbox"; }
   static get encapsulation() { return "scoped"; }
@@ -154,6 +161,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,
@@ -242,6 +267,23 @@ export class Checkbox {
       },
       "attribute": "error",
       "reflect": false
+    },
+    "helper": {
+      "type": "string",
+      "mutable": false,
+      "complexType": {
+        "original": "string",
+        "resolved": "string | undefined",
+        "references": {}
+      },
+      "required": false,
+      "optional": true,
+      "docs": {
+        "tags": [],
+        "text": "Helper message for the field"
+      },
+      "attribute": "helper",
+      "reflect": false
     }
   }; }
   static get events() { return [{

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

@@ -13,6 +13,9 @@ export default {
     checked: {
       control: 'boolean',
     },
+    indeterminate: {
+      control: 'boolean',
+    },
     disabled: {
       control: 'boolean',
     },
@@ -25,6 +28,9 @@ export default {
     error: {
       control: 'text',
     },
+    helper: {
+      control: 'text',
+    },
     label: {
       control: 'text',
     },
@@ -62,6 +68,7 @@ export default {
   args: {
     checked: null,
     disabled: null,
+    indeterminate: null,
     inverse: null,
     label: 'Label',
     required: null,
@@ -72,8 +79,10 @@ export default {
 const Template = (args) => html`
 <road-checkbox 
   checked="${ifDefined(args.checked)}"
+  indeterminate="${ifDefined(args.indeterminate)}"
   disabled="${ifDefined(args.disabled)}"
   error="${ifDefined(args.error)}"
+  helper="${ifDefined(args.helper)}"
   inverse="${ifDefined(args.inverse)}"
   label="${ifDefined(args.label)}"
   name="${ifDefined(args.name)}"
@@ -91,6 +100,11 @@ Checked.args = {
   checked: true,
 };
 
+export const Indeterminate = Template.bind({});
+Indeterminate.args = {
+  indeterminate: true,
+};
+
 export const Disabled = Template.bind({});
 Disabled.args = {
   disabled: true,

package/dist/collection/components/chip/chip.css

@@ -13,14 +13,21 @@
   box-sizing: border-box;
   display: inline-flex;
   align-items: center;
-  height: 1.625rem;
-  padding: 0.25rem 0.75rem;
+  height: 1.5rem;
+  padding: 0.25rem 0.5rem;
   margin-bottom: 0.5rem;
   font-size: 0.875rem;
   cursor: pointer;
   border: 0;
   border-radius: 1.625rem;
   outline: 0;
+  transition: background 250ms cubic-bezier(0.4, 0, 0.2, 1) 0ms, border 250ms cubic-bezier(0.4, 0, 0.2, 1) 0ms;
+}
+
+.chip-description {
+  display: inline-flex;
+  align-items: center;
+  padding: 0 0.5rem;
 }
 
 /* OUTLINE
@@ -37,7 +44,8 @@
 ::slotted(road-icon) {
   width: 1.25rem;
   height: 1.25rem;
-  margin-left: -0.375rem;
+  margin-right: 0.5rem;
+  margin-left: -0.5rem;
 }
 
 /* CLOSE
@@ -46,48 +54,89 @@
 .chip-close {
   width: 1rem;
   height: 1rem;
-  margin-right: -0.375rem;
-  margin-left: 0.375rem;
-  background: var(--background);
+  margin-right: -0.25rem;
+  color: var(--road-grey-000);
+  background: var(--road-grey-900);
   border-radius: 50%;
+  transition: background 250ms cubic-bezier(0.4, 0, 0.2, 1) 0ms;
 }
 
 /* SIZE
  -------------------- */
 
 :host(.chip-lg) {
-  height: 2.25rem;
-  padding: 0.5rem 1rem;
+  height: 2.5rem;
+  padding: 0 0.75rem;
   font-size: 1rem;
 }
 
+:host(.chip-lg) ::slotted(road-icon) {
+  width: 1.5rem;
+  height: 1.5rem;
+  margin-right: 0.75rem;
+  margin-left: -0.75rem;
+}
+
+:host(.chip-lg) .chip-description {
+  padding: 0 0.75rem;
+}
+
+:host(.chip-lg) .chip-close {
+  width: 1.5rem;
+  height: 1.5rem;
+}
+
 /* COLOR
  -------------------- */
 
 :host(.chip-default) {
-  color: var(--text);
-  background: var(--background);
+  color: var(--road-grey-900);
+  background: var(--road-grey-200);
+}
+
+:host(.chip-outline.chip-default) {
+  background: var(--road-grey-000);
+  border-color: var(--road-grey-500);
 }
 
 :host(.chip-secondary) {
-  color: var(--secondary-contrast);
-  background: var(--secondary);
+  color: var(--road-primary-contrast);
+  background: var(--road-primary-500);
+  border-color: transparent;
+}
+
+:host(.chip-secondary) .chip-close {
+  color: var(--road-primary-500);
+  background: var(--road-primary-100);
 }
 
+/**
+ * Hover state
+ */
+
 @media (any-hover: hover) {
 
-  :host(.chip-secondary:hover),
-  :host(.chip-secondary.focus-visible) {
-    background: var(--secondary-hover);
+  :host(.chip-outline:hover) {
+    border-color: var(--road-primary-700);
+  }
+
+  :host(.chip-secondary:hover) {
+    background: var(--road-primary-700);
+  }
+
+  :host(.chip-secondary:hover) .chip-close {
+    color: var(--road-primary-700);
   }
 }
 
-:host(.chip-outline.chip-default) {
-  background: var(--white);
-  border-color: var(--border);
+/**
+ * Focus state
+ */
+
+:host(.chip-outline:hover) {
+  border-color: var(--road-primary-700);
 }
 
-:host(.chip-outline.chip-secondary) {
-  color: var(--secondary-contrast);
-  background: var(--secondary);
+:host(.chip-secondary.focus-visible) {
+  background: var(--road-primary-500);
 }

package/dist/collection/components/chip/chip.js

@@ -26,7 +26,8 @@ export class Chip {
   render() {
     const outlineClass = this.outline ? 'chip-outline' : '';
     return (h(Host, { class: `${outlineClass} chip-${this.color} chip-${this.size}` },
-      h("slot", null),
+      h("div", { class: "chip-description" },
+        h("slot", null)),
       this.hasCloseIcon && h("road-icon", { class: "chip-close", icon: navigationClose })));
   }
   static get is() { return "road-chip"; }

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

@@ -61,7 +61,7 @@ export const withIcon = Template.bind({});
 withIcon.args = {
   outline: true,
   'has-close-icon': true,
-  ' ': `<road-icon name="weather-rain" class="mr-4" size="sm"></road-icon>
+  ' ': `<road-icon name="weather-rain"></road-icon>
   B`,
 };
 

package/dist/collection/components/counter/counter.css

@@ -31,12 +31,12 @@ road-input {
 
 road-button {
   font-size: 1.125rem;
-  background: var(--background-second);
-  border-color: var(--border-form);
+  background: var(--road-grey-100);
+  border: 1px solid var(--road-grey-400);
 }
 
 road-button:hover {
-  background: var(--background);
+  background: var(--road-grey-200);
 }
 
 /* SIZES

package/dist/collection/components/dialog/dialog.css

@@ -30,9 +30,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;
@@ -49,7 +49,7 @@
   left: 0;
   display: block;
   touch-action: none;
-  background: rgba(0, 0, 0, 0.5);
+  background: var(--road-overlay);
 }
 
 :host(.dialog-has-close) .dialog-overlay {
@@ -89,9 +89,9 @@
   display: flex;
   flex-direction: column;
   width: 100%;
-  padding: 0 0 2rem;
+  padding: 0 0 1.5rem;
   pointer-events: auto;
-  background: var(--white);
+  background: var(--road-grey-000);
   background-clip: padding-box;
   border-radius: 0.25rem;
   outline: 0;
@@ -101,7 +101,7 @@
 @media (min-width: 576px) {
 
   .dialog-content {
-    max-width: 464px;
+    max-width: 454px;
   }
 }
 
@@ -112,7 +112,8 @@
   display: flex;
   align-items: center;
   justify-content: flex-end;
-  height: 3.5rem;
+  height: 2.75rem;
+  margin-bottom: 1.5rem;
 }
 
 /* CLOSE
@@ -121,6 +122,7 @@
 .dialog-close {
   display: flex;
   align-items: center;
+  align-self: flex-start;
   justify-content: center;
   width: 3.5rem;
   height: 3.5rem;
@@ -163,8 +165,8 @@
 .dialog-title {
   padding: 0;
   margin: 0 0 1rem;
-  font-size: 1.5rem;
-  font-weight: 400;
+  font-size: 1rem;
+  font-weight: 700;
   line-height: 1.2;
 }
 
@@ -172,8 +174,8 @@
  -------------------- */
 
 .dialog-description {
-  margin: 0 0 1.5rem;
-  font-size: 0.875rem;
+  margin: 0 0 0.5rem;
+  font-size: 1rem;
 }
 
 /* FOOTER
@@ -185,6 +187,10 @@
   padding: 0 1.5rem;
 }
 
+.dialog-footer ::slotted(road-button) {
+  margin-top: 1rem;
+}
+
 /**
  * Footer buttons
  */

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

@@ -79,25 +79,49 @@ const Template = (args) => html`
 
 export const Playground = Template.bind({});
 Playground.args = {
+  'is-open': true,
+  label: 'Dialog title',
+  description: 'Lorem ipsum dolor sit amet, consetetur sadipscing elitr, sed diam nonumy eirmod tempor.',
+  ' ': `<road-button class="mb-0" color="secondary" expand>Done</road-button>`,
+};
+
+export const SideActions = Template.bind({});
+SideActions.args = {
+  'is-open': true,
+  label: 'Dialog title',
+  description: 'Lorem ipsum dolor sit amet, consetetur sadipscing elitr, sed diam nonumy eirmod tempor.',
+  ' ': `<road-button class="mb-0" outline expand data-dismiss="modal">Cancel</road-button>
+  <road-button class="mb-0" color="secondary" expand style="margin-left: 1rem;">Done</road-button>`,
+};
+
+export const Info = Template.bind({});
+Info.args = {
   'is-open': true,
   color: 'info',
   label: 'Information',
   description: 'Lorem ipsum dolor sit amet, consetetur sadipscing elitr, sed diam nonumy eirmod tempor.',
 };
 
-export const Error = Template.bind({});
-Error.args = {
+export const Success = Template.bind({});
+Success.args = {
   'is-open': true,
-  color: 'danger',
-  label: 'Error',
+  color: 'success',
+  label: 'Success',
   description: 'Lorem ipsum dolor sit amet, consetetur sadipscing elitr, sed diam nonumy eirmod tempor.',
 };
 
-export const SideActions = Template.bind({});
-SideActions.args = {
+export const Warning = Template.bind({});
+Warning.args = {
   'is-open': true,
-  label: 'Are you sure ?',
+  color: 'warning',
+  label: 'Warning',
+  description: 'Lorem ipsum dolor sit amet, consetetur sadipscing elitr, sed diam nonumy eirmod tempor.',
+};
+
+export const Danger = Template.bind({});
+Danger.args = {
+  'is-open': true,
+  color: 'danger',
+  label: 'Danger',
   description: 'Lorem ipsum dolor sit amet, consetetur sadipscing elitr, sed diam nonumy eirmod tempor.',
-  ' ': `<road-button class="mb-0" outline expand style="width: 130px" data-dismiss="modal">Cancel</road-button>
-  <road-button class="mb-0" color="secondary" expand style="width: 130px;margin-left: 1rem;">Done</road-button>`,
 };

package/dist/collection/components/drawer/drawer.dark.css

@@ -29,13 +29,13 @@
  -------------------- */
 
 :host {
-  --background: var(--white);
-  --color: var(--text);
-  --header-icon: var(--icon);
-  --header-color: var(--text);
-  --header-background: var(--white);
+  --background: var(--road-grey-000);
+  --color: var(--road-grey-900);
+  --header-icon: var(--road-grey-900);
+  --header-color: var(--road-grey-900);
+  --header-background: var(--road-grey-000);
   --header-delimiter: 0;
-  --back-chevron-color: var(--icon);
+  --back-chevron-color: var(--road-grey-900);
   --max-height: auto;
   --z-index: 10;
 
@@ -48,7 +48,7 @@
   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(--color);
   visibility: hidden !important;
@@ -68,7 +68,7 @@
   display: block;
   touch-action: none;
   cursor: pointer;
-  background: rgba(0, 0, 0, 0.5);
+  background: var(--road-overlay);
 }
 
 /* DRAWER
@@ -137,7 +137,7 @@
   height: 3.5rem;
   color: var(--header-color);
   background: var(--header-background);
-  border-color: var(--border);
+  border-color: var(--road-grey-300);
   border-style: solid;
   border-width: var(--header-delimiter);
 }
@@ -152,9 +152,9 @@
  */
 
 .drawer-header-inverse {
-  --header-icon: var(--primary-contrast);
-  --header-color: var(--primary-contrast);
-  --header-background: var(--primary);
+  --header-icon: var(--road-primary-contrast);
+  --header-color: var(--road-primary-contrast);
+  --header-background: var(--road-primary-900);
 
   margin-bottom: 2.5rem;
 }
@@ -247,7 +247,7 @@
 
 
 :host {
-  --background: #000000;
-  --color: var(--white);
-  --header-icon: var(--white);
+  --background: var(--road-grey-999);
+  --color: var(--road-grey-000);
+  --header-icon: var(--road-grey-000);
 }

package/dist/collection/components/drawer/drawer.light.css

@@ -29,13 +29,13 @@
  -------------------- */
 
 :host {
-  --background: var(--white);
-  --color: var(--text);
-  --header-icon: var(--icon);
-  --header-color: var(--text);
-  --header-background: var(--white);
+  --background: var(--road-grey-000);
+  --color: var(--road-grey-900);
+  --header-icon: var(--road-grey-900);
+  --header-color: var(--road-grey-900);
+  --header-background: var(--road-grey-000);
   --header-delimiter: 0;
-  --back-chevron-color: var(--icon);
+  --back-chevron-color: var(--road-grey-900);
   --max-height: auto;
   --z-index: 10;
 
@@ -48,7 +48,7 @@
   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(--color);
   visibility: hidden !important;
@@ -68,7 +68,7 @@
   display: block;
   touch-action: none;
   cursor: pointer;
-  background: rgba(0, 0, 0, 0.5);
+  background: var(--road-overlay);
 }
 
 /* DRAWER
@@ -137,7 +137,7 @@
   height: 3.5rem;
   color: var(--header-color);
   background: var(--header-background);
-  border-color: var(--border);
+  border-color: var(--road-grey-300);
   border-style: solid;
   border-width: var(--header-delimiter);
 }
@@ -152,9 +152,9 @@
  */
 
 .drawer-header-inverse {
-  --header-icon: var(--primary-contrast);
-  --header-color: var(--primary-contrast);
-  --header-background: var(--primary);
+  --header-icon: var(--road-primary-contrast);
+  --header-color: var(--road-primary-contrast);
+  --header-background: var(--road-primary-900);
 
   margin-bottom: 2.5rem;
 }

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

@@ -72,7 +72,7 @@ export default {
     },
     '--background': {
       table: {
-        defaultValue: { summary: 'var(--white)' },
+        defaultValue: { summary: 'var(--road-grey-000)' },
       },
       control: {
         type: null,
@@ -80,7 +80,7 @@ export default {
     },
     '--color': {
       table: {
-        defaultValue: { summary: 'var(--text)' },
+        defaultValue: { summary: 'var(--road-grey-900)' },
       },
       control: {
         type: null,
@@ -88,7 +88,7 @@ export default {
     },
     '--header-icon': {
       table: {
-        defaultValue: { summary: 'var(--icon)' },
+        defaultValue: { summary: 'var(--road-grey-900)' },
       },
       control: {
         type: null,
@@ -96,7 +96,7 @@ export default {
     },
     '--header-color': {
       table: {
-        defaultValue: { summary: 'var(--text)' },
+        defaultValue: { summary: 'var(--road-grey-900)' },
       },
       control: {
         type: null,
@@ -104,7 +104,7 @@ export default {
     },
     '--header-background': {
       table: {
-        defaultValue: { summary: 'var(--white)' },
+        defaultValue: { summary: 'var(--road-grey-000)' },
       },
       control: {
         type: null,
@@ -120,7 +120,7 @@ export default {
     },
     '--back-chevron-color': {
       table: {
-        defaultValue: { summary: 'var(--icon)' },
+        defaultValue: { summary: 'var(--road-grey-900)' },
       },
       control: {
         type: null,
@@ -178,7 +178,6 @@ HeaderInverse.args = {
   position: 'right',
   'drawer-width': 480,
   'drawer-title': 'Drawer title',
-  'has-inverse-header': true,
 };
 
 export const WithBackButton = Template.bind({});
@@ -187,7 +186,6 @@ WithBackButton.args = {
   position: 'right',
   'drawer-width': 480,
   'drawer-title': 'Drawer title',
-  'has-inverse-header': true,
   'has-back-icon': true,
 };
 

package/dist/collection/components/dropdown/dropdown.css

@@ -21,7 +21,7 @@
 
 .dropdown {
   position: relative;
-  font-family: var(--font);
+  font-family: var(--road-font);
 }
 
 .dropdown summary {
@@ -52,9 +52,9 @@
   min-width: 16.875rem;
   padding: 0.5rem 0;
   margin-top: var(--margin-top);
-  color: var(--text);
-  background: var(--white);
-  border: 1px solid var(--border);
+  color: var(--road-grey-900);
+  background: var(--road-grey-000);
+  border: 1px solid var(--road-grey-300);
   border-radius: 0.25rem;
   box-shadow: 0 0.375rem 0.375rem rgba(0, 0, 0, 0.16);
   transition: transform 0.2s ease-in-out;