@roadtrip/components 2.27.1 → 2.28.0

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

@@ -13,6 +13,9 @@ export default {
     checked: {
       control: 'boolean',
     },
+    indeterminate: {
+      control: 'boolean',
+    },
     disabled: {
       control: 'boolean',
     },
@@ -62,6 +65,7 @@ export default {
   args: {
     checked: null,
     disabled: null,
+    indeterminate: null,
     inverse: null,
     label: 'Label',
     required: null,
@@ -72,6 +76,7 @@ export default {
 const Template = (args) => html`
 <road-checkbox 
   checked="${ifDefined(args.checked)}"
+  indeterminate="${ifDefined(args.indeterminate)}"
   disabled="${ifDefined(args.disabled)}"
   error="${ifDefined(args.error)}"
   inverse="${ifDefined(args.inverse)}"
@@ -91,6 +96,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;

package/dist/collection/components/duration/duration.css

@@ -3,7 +3,7 @@
 }
 
 road-drawer {
-  --background: var(--background-second);
+  --background: var(--road-grey-100);
 }
 
 .duration-values {

package/dist/collection/components/flap/flap.css

@@ -4,43 +4,54 @@
  * Index
  * - Flap
  * - Colors
+ * - Sizes
  */
 
 /* FLAP
  -------------------- */
 
 :host {
-  --flap-promo: #ea0000;
-  --flap-exclu: #eca000;
-  --flap-info: #002b6f;
-  --flap-ecology: #00ab6d;
-
   box-sizing: border-box;
   display: inline-flex;
+  align-items: center;
   justify-content: center;
-  min-width: 3.5rem;
-  padding: 0.25rem 0.5rem;
-  font-size: 0.75rem;
+  height: 1.5rem;
+  padding: 0 0.75rem;
+  font-size: 0.875rem;
   font-weight: 700;
-  border: 1px solid currentColor;
-  border-radius: 1.5625rem;
+  background: var(--road-grey-000);
+  border: 1px solid transparent;
+  border-radius: 1.5rem;
 }
 
 /* COLORS
  -------------------- */
 
 :host(.flap-promo) {
-  color: var(--flap-promo);
+  color: var(--road-danger-default);
+  border-color: var(--road-danger-default);
 }
 
 :host(.flap-exclu) {
-  color: var(--flap-exclu);
+  color: var(--road-warning-text);
+  border-color: var(--road-warning-default);
 }
 
 :host(.flap-info) {
-  color: var(--flap-info);
+  color: var(--road-info-text);
+  border-color: var(--road-info-default);
 }
 
 :host(.flap-ecology) {
-  color: var(--flap-ecology);
+  color: var(--road-success-text);
+  border-color: var(--road-success-default);
+}
+
+/* SIZES
+ -------------------- */
+
+:host(.flap-md) {
+  height: 2rem;
+  padding: 0 1rem;
+  font-size: 1rem;
 }