@roadtrip/components 2.26.0 → 2.28.0

package/dist/collection/components/input/input.css

@@ -5,6 +5,7 @@
  * - Input
  * - Textarea
  * - Label
+ * - Sizes
  * - Error
  */
 
@@ -25,8 +26,8 @@
   position: relative;
   display: block;
   margin-bottom: var(--margin-bottom);
-  font-family: var(--font, sans-serif);
-  color: var(--text);
+  font-family: var(--road-font, sans-serif);
+  color: var(--road-grey-900);
 }
 
 /* INPUT
@@ -40,10 +41,10 @@
   padding: 0.75rem 1rem 0;
   margin: 0;
   font-size: 1rem;
-  color: var(--text);
+  color: var(--road-grey-900);
   text-align: var(--input-text-align);
-  background: var(--white);
-  border: 1px solid var(--border-form);
+  background: var(--road-grey-000);
+  border: 1px solid var(--road-grey-400);
   border-radius: var(--border-radius);
   box-shadow: none;
   -webkit-appearance: none;
@@ -82,10 +83,21 @@
  */
 
 .form-control::placeholder {
-  color: var(--text-second);
+  color: var(--road-grey-500);
   opacity: 1;
 }
 
+/**
+ * Hover state
+ */
+
+@media (hover: hover) {
+
+  .form-control:not(:disabled):hover {
+    border-color: var(--road-primary-700);
+  }
+}
+
 /**
  * Focus state
  */
@@ -111,8 +123,8 @@
 }
 /* stylelint-enable */
 
-.form-control:focus {
-  border-color: var(--secondary);
+.form-control:not(:disabled):focus {
+  border-color: var(--road-primary-700);
   outline: 0;
 }
 
@@ -122,9 +134,8 @@
 
 .form-control:disabled,
 .form-control[readonly] {
-  color: var(--text-disabled);
   cursor: not-allowed;
-  background: var(--background-second);
+  background: var(--road-grey-200);
   opacity: 1;
 }
 
@@ -138,7 +149,7 @@
   display: block;
   font-size: 1rem;
   line-height: 1.5;
-  color: var(--text-second);
+  color: var(--road-grey-500);
   pointer-events: none;
   transition: transform 200ms cubic-bezier(0, 0, 0.2, 1) 0ms;
   transform-origin: 0 0;
@@ -152,6 +163,34 @@
   padding-top: 0;
 }
 
+/* SIZES
+ -------------------- */
+
+:host(.input-xl) {
+  --height: 3.5rem;
+}
+
+:host(.input-xl) .form-control {
+  padding: 1rem 1rem 0;
+}
+
+:host(.input-xl) .form-label {
+  top: 1rem;
+}
+
+:host(.input-xl) .form-control:focus ~ .form-label,
+:host(.input-xl) .form-control[required]:valid ~ .form-label,
+:host(.input-xl) .form-control.has-value ~ .form-label,
+:host(.input-xl) .form-control[type="date"] ~ .form-label,
+:host(.input-xl) .form-control[type="time"] ~ .form-label {
+  transform: scale(0.75) translateY(-0.625rem);
+}
+
+:host(.input-xl) .form-control:placeholder-shown ~ .form-label {
+  transform: scale(0.625) translateY(-0.625rem);
+}
+
+
 /* ERROR
  -------------------- */
 
@@ -160,12 +199,12 @@
   width: 100%;
   margin-top: 0.5rem;
   font-size: 0.75rem;
-  color: var(--danger);
+  color: var(--road-danger-text);
 }
 
 .form-control.is-invalid,
 .was-validated .form-control:invalid {
-  border-color: var(--danger);
+  border-color: var(--road-danger-default);
 }
 
 .form-control.is-invalid ~ .invalid-feedback,

package/dist/collection/components/input/input.js

@@ -55,6 +55,10 @@ export class Input {
      * If `true`, the element will have its spelling and grammar checked.
      */
     this.spellcheck = false;
+    /**
+     * The sizes of the input.
+     */
+    this.sizes = 'lg';
     /**
      * The type of control to display. The default type is text.
      */
@@ -110,7 +114,7 @@ export class Input {
     const hasValueClass = this.value !== '' ? 'has-value' : '';
     const lessLabelClass = this.label !== '' ? '' : 'less-label';
     const isInvalidClass = this.error !== undefined && this.error !== '' ? 'is-invalid' : '';
-    return (h(Host, { "aria-disabled": this.disabled ? 'true' : null },
+    return (h(Host, { "aria-disabled": this.disabled ? 'true' : null, class: this.sizes && `input-${this.sizes}` },
       h("input", { class: `form-control ${hasValueClass} ${isInvalidClass} ${lessLabelClass}`, id: this.inputId, "aria-disabled": this.disabled ? 'true' : null, "aria-labelledby": labelId, disabled: this.disabled, autoCapitalize: this.autocapitalize, autoComplete: this.autocomplete, autoCorrect: this.autocorrect, enterKeyHint: this.enterkeyhint, autoFocus: this.autofocus, inputMode: this.inputmode, min: this.min, max: this.max, minLength: this.minlength, maxLength: this.maxlength, name: this.name, pattern: this.pattern, placeholder: this.placeholder, readOnly: this.readonly, required: this.required, spellcheck: this.spellcheck, step: this.step, size: this.size, type: this.type, value: value, onInput: this.onInput, onBlur: this.onBlur, onFocus: this.onFocus }),
       h("label", { class: "form-label", id: labelId, htmlFor: this.inputId }, this.label),
       this.error && this.error !== '' && h("p", { class: "invalid-feedback" }, this.error)));
@@ -479,6 +483,24 @@ export class Input {
       "attribute": "size",
       "reflect": false
     },
+    "sizes": {
+      "type": "string",
+      "mutable": false,
+      "complexType": {
+        "original": "'lg' | 'xl'",
+        "resolved": "\"lg\" | \"xl\"",
+        "references": {}
+      },
+      "required": false,
+      "optional": false,
+      "docs": {
+        "tags": [],
+        "text": "The sizes of the input."
+      },
+      "attribute": "sizes",
+      "reflect": false,
+      "defaultValue": "'lg'"
+    },
     "type": {
       "type": "string",
       "mutable": false,

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

@@ -59,7 +59,13 @@ export default {
       control: 'text',
     },
     value: {
-      control: 'number',
+      control: 'text',
+    },
+    sizes: {
+      options: ['lg', 'xl'],
+      control: {
+        type: 'select',
+      },
     },
     type: {
       options: ['date', 'email', 'number', 'password', 'search', 'tel', 'text', 'url', 'time'],
@@ -160,6 +166,7 @@ export default {
   },
   args: {
     label: 'Label',
+    sizes: 'xl',
     disabled: null,
     readonly: null,
     required: null,
@@ -177,6 +184,7 @@ const Template = (args) => html`
     autofocus="${ifDefined(args.autofocus)}"
     error="${ifDefined(args.error)}"
     size="${ifDefined(args.size)}"
+    sizes="${ifDefined(args.sizes)}"
     min="${ifDefined(args.min)}" 
     max="${ifDefined(args.max)}" 
     maxlength="${ifDefined(args.maxlength)}"

package/dist/collection/components/input-group/input-group.css

@@ -27,7 +27,7 @@
   flex-wrap: wrap;
   align-items: stretch;
   width: 100%;
-  font-family: var(--font, sans-serif);
+  font-family: var(--road-font, sans-serif);
 }
 
 ::slotted(road-input),
@@ -47,7 +47,7 @@
 
 ::slotted([slot="prepend"]) {
   margin-right: -3px;
-  border-color: var(--border-form);
+  border-color: var(--road-grey-400);
   border-right-color: transparent;
   border-top-right-radius: 0;
   border-bottom-right-radius: 0;
@@ -55,21 +55,38 @@
 
 ::slotted([slot="append"]) {
   margin-left: -0.25rem;
-  border-color: var(--border-form);
+  border-color: var(--road-grey-400);
   border-left-width: 0;
 }
 
+/**
+ * Hover state
+ */
+
+@media (hover: hover) {
+
+  .input-group:not(.is-disabled):hover ::slotted([slot="prepend"]) {
+    border-color: var(--road-primary-700);
+    border-right-color: transparent;
+  }
+
+  .input-group:not(.is-disabled):hover ::slotted([slot="append"]) {
+    border-color: var(--road-primary-700);
+    border-left-color: transparent;
+  }
+}
+
 /**
  * Focus state
  */
 
 .input-group:focus-within ::slotted([slot="prepend"]) {
-  border-color: var(--secondary);
+  border-color: var(--road-primary-700);
   border-right-color: transparent;
 }
 
 .input-group:focus-within ::slotted([slot="append"]) {
-  border-color: var(--secondary);
+  border-color: var(--road-primary-700);
   border-left-color: transparent;
 }
 
@@ -105,7 +122,6 @@
 .input-group-append {
   position: relative;
   z-index: 1;
-  background: var(--white);
   border-radius: 0 0.25rem 0.25rem 0;
 }
 
@@ -117,12 +133,12 @@
   align-items: center;
   padding: 0 0.5rem;
   margin-bottom: 0;
-  color: var(--icon);
+  color: var(--road-grey-900);
   text-align: center;
   white-space: nowrap;
   cursor: text;
-  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;
   -webkit-tap-highlight-color: rgba(0, 0, 0, 0);
 }
@@ -151,12 +167,24 @@
   margin-right: calc(-1rem + 1px);
 }
 
+/* SIZES
+ -------------------- */
+
+.size-xl .input-group-prepend,
+.size-xl .input-group-append {
+  height: 3.5rem;
+}
+
+.size-xl ::slotted(road-button) {
+  height: 3.5rem;
+}
+
 /* ERROR
  -------------------- */
 
 .input-group.is-invalid ::slotted([slot="append"]),
 .input-group.is-invalid ::slotted([slot="prepend"]) {
-  border-color: var(--danger);
+  border-color: var(--road-danger-default);
 }
 
 /* DISABLED
@@ -164,9 +192,8 @@
 
 .input-group.is-disabled ::slotted([slot="append"]),
 .input-group.is-disabled ::slotted([slot="prepend"]) {
-  color: var(--text-disabled);
   cursor: not-allowed;
-  background: var(--background-second);
+  background: var(--road-grey-200);
 }
 
 .is-disabled ::slotted(road-button) {

package/dist/collection/components/input-group/input-group.js

@@ -14,10 +14,11 @@ export class InputGroup {
   render() {
     const errorClass = this.el.querySelector("road-input[error]") ? 'is-invalid' : '';
     const disabledClass = this.el.querySelector("road-input[disabled]") ? 'is-disabled' : '';
-    return (h("div", { class: `input-group ${errorClass} ${disabledClass}` },
+    const sizeClass = this.el.querySelector("road-input[sizes]") ? `size-${this.el.querySelector("road-input").sizes}` : '';
+    return (h("div", { class: `input-group ${errorClass} ${disabledClass} ${sizeClass}` },
+      h("slot", null),
       h("div", { class: "input-group-prepend" },
         h("slot", { name: "prepend" })),
-      h("slot", null),
       h("div", { class: "input-group-append" },
         h("slot", { name: "append" }))));
   }

package/dist/collection/components/input-group/input-group.stories.js

@@ -27,7 +27,7 @@ const Template = (args) => html`
 
 export const Playground = Template.bind({});
 Playground.args = {
-  ' ': `<road-input input-id="cardNumber" label="Card Number"></road-input>`,
+  ' ': `<road-input input-id="cardNumber" sizes="xl" label="Card Number"></road-input>`,
   append: `<label slot="append" for="cardNumber">
     <road-icon name="payment-card"></road-icon>
   </label>`,
@@ -35,7 +35,7 @@ Playground.args = {
 
 export const Button = Template.bind({});
 Button.args = {
-  ' ': `<road-input input-id="newsletter" label="Newsletter"></road-input>`,
+  ' ': `<road-input input-id="newsletter" sizes="xl" label="Newsletter"></road-input>`,
   append: `<road-button slot="append" outline="true">
   OK
 </road-button>`,
@@ -43,7 +43,7 @@ Button.args = {
 
 export const Disabled = Template.bind({});
 Disabled.args = {
-  ' ': `<road-input input-id="inputGroupDisabled" label="Label" disabled></road-input>`,
+  ' ': `<road-input input-id="inputGroupDisabled" sizes="xl" label="Label" disabled="true"></road-input>`,
   append: `<road-button slot="append" outline="true">
   <road-icon color="secondary" name="alert-info-outline"></road-icon>
 </road-button>`,
@@ -51,7 +51,7 @@ Disabled.args = {
 
 export const Error = Template.bind({});
 Error.args = {
-  ' ': `<road-input input-id="inputGroupError" label="Label" error="error message here"></road-input>`,
+  ' ': `<road-input input-id="inputGroupError" sizes="xl" label="Label" error="error message here"></road-input>`,
   append: `<label slot="append" for="inputGroupError">
   <road-icon name="payment-card"></road-icon>
 </label>`,

package/dist/collection/components/item/item.css

@@ -22,7 +22,7 @@
 :host {
   --border-radius: 0.25rem;
   --background-color: transparent;
-  --detail-color: var(--icon);
+  --detail-color: var(--road-grey-900);
   --inner-padding: 1rem 0.5rem 1rem 0;
   --min-height: 3.5rem;
   --padding-left: 1rem;
@@ -54,9 +54,9 @@
   overflow: inherit;
   font-family: inherit;
   font-size: inherit;
-  color: var(--text);
+  color: var(--road-grey-900);
   background-color: var(--background-color);
-  border-color: var(--border);
+  border-color: var(--road-grey-300);
   border-style: solid;
   border-width: var(--border-width, 0);
   border-radius: var(--border-radius);
@@ -70,7 +70,7 @@
  */
 
 .item-active {
-  background-color: var(--background-second);
+  background-color: var(--road-grey-100);
 }
 
 /**
@@ -79,7 +79,7 @@
 
 button.item-native:not(:disabled):not(.item-active):hover,
 button.item-native:not(:disabled):not(.item-active):focus {
-  background-color: var(--background-second);
+  background-color: var(--road-grey-100);
 }
 
 /**
@@ -116,7 +116,7 @@ a {
   overflow: inherit;
   text-align: inherit;
   text-decoration: none;
-  border-color: var(--border);
+  border-color: var(--road-grey-300);
   border-style: solid;
   border-width: var(--inner-border-width, 0);
   outline: 0;

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

@@ -115,7 +115,7 @@ Playground.argTypes = {
   },
   '--detail-color': {
     table: {
-      defaultValue: { summary: 'var(--icon)' },
+      defaultValue: { summary: 'var(--road-grey-900)' },
     },
     control: {
       type: null,
@@ -153,7 +153,7 @@ Playground.argTypes = {
 };
 
 export const Compatibility = () => html`
-<road-item class="mb-16" style="--border-width: 1px;--background-color: var(--white)">
+<road-item class="mb-16" style="--border-width: 1px;--background-color: var(--road-grey-000)">
   <road-label>
     <p class="h8 my-4">OPEL Insignia</p>
     <p class="text-small text-truncate m-0">hatchback 2.0 CDTI 16V 130 cv</p>
@@ -162,7 +162,7 @@ export const Compatibility = () => html`
   <road-button slot="end" size="sm" color="secondary" class="mr-8">Modify</road-button>
 </road-item>
 
-<road-item class="mb-16" style="--border-width: 1px;--background-color: var(--white)">
+<road-item class="mb-16" style="--border-width: 1px;--background-color: var(--road-grey-000)">
   <road-icon slot="start" name="alert-valid-outline" color="success" class="mr-16"></road-icon>
 
   <road-label>
@@ -174,7 +174,7 @@ export const Compatibility = () => html`
   <road-button slot="end" size="sm" color="secondary" class="mr-8">Modify</road-button>
 </road-item>
 
-<road-item class="mb-16" style="--border-width: 1px;--background-color: var(--white)">
+<road-item class="mb-16" style="--border-width: 1px;--background-color: var(--road-grey-000)">
   <road-icon slot="start" name="alert-error-outline" color="danger" class="mr-16"></road-icon>
 
   <road-label>
@@ -189,7 +189,7 @@ export const Compatibility = () => html`
 `;
 
 export const ShoppingGuides = () => html`
-<road-item class="mb-16" style="--border-width: 1px;--background-color: var(--white)">
+<road-item class="mb-16" style="--border-width: 1px;--background-color: var(--road-grey-000)">
   <road-icon slot="start" name="vehicle-car-outline" class="mr-16"></road-icon>
 
   <road-label>
@@ -200,7 +200,7 @@ export const ShoppingGuides = () => html`
   <road-icon slot="end" name="edit" color="secondary" size="sm" class="mr-8"></road-icon>
 </road-item>
 
-<road-item class="mb-16" style="--border-width: 1px;--background-color: var(--white)">
+<road-item class="mb-16" style="--border-width: 1px;--background-color: var(--road-grey-000)">
   <road-icon slot="start" name="vehicle-car-outline-front" class="mr-16"></road-icon>
 
   <road-label>
@@ -211,7 +211,7 @@ export const ShoppingGuides = () => html`
   <road-icon slot="end" name="edit" color="secondary" size="sm" class="mr-8"></road-icon>
 </road-item>
 
-<road-item class="mb-16" style="--border-width: 1px;--background-color: var(--white)">
+<road-item class="mb-16" style="--border-width: 1px;--background-color: var(--road-grey-000)">
   <road-icon slot="start" name="light" class="mr-16"></road-icon>
 
   <road-label>

package/dist/collection/components/list/list.css

@@ -32,7 +32,7 @@
  */
 
 :host(.list-lines-full) {
-  border: 1px solid var(--border);
+  border: 1px solid var(--road-grey-300);
   border-bottom: 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