@roadtrip/components 2.27.1 → 2.28.0

package/dist/collection/components/flap/flap.js

@@ -8,10 +8,14 @@ export class Flap {
      * Set the color of the flap.
      */
     this.color = 'promo';
+    /**
+      * The button size.
+      */
+    this.size = 'sm';
   }
   render() {
     const colorClass = `flap-${this.color}`;
-    return (h(Host, { class: colorClass },
+    return (h(Host, { class: `${colorClass} flap-${this.size}` },
       h("slot", null)));
   }
   static get is() { return "road-flap"; }
@@ -40,6 +44,24 @@ export class Flap {
       "attribute": "color",
       "reflect": false,
       "defaultValue": "'promo'"
+    },
+    "size": {
+      "type": "string",
+      "mutable": false,
+      "complexType": {
+        "original": "'sm' | 'md'",
+        "resolved": "\"md\" | \"sm\"",
+        "references": {}
+      },
+      "required": false,
+      "optional": false,
+      "docs": {
+        "tags": [],
+        "text": "The button size."
+      },
+      "attribute": "size",
+      "reflect": true,
+      "defaultValue": "'sm'"
     }
   }; }
 }

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

@@ -12,6 +12,12 @@ export default {
         type: 'select',
       },
     },
+    size: {
+      options: ['sm', 'md'],
+      control: {
+        type: 'select',
+      },
+    },
     ' ': {
       control: 'text',
     },
@@ -23,7 +29,7 @@ export default {
 };
 
 const Template = (args) => html`
-<road-flap color="${ifDefined(args.color)}">
+<road-flap color="${ifDefined(args.color)}" size="${ifDefined(args.size)}">
   ${unsafeHTML(args[' '])}
 </road-flap>
 `;
@@ -47,3 +53,8 @@ Ecology.args = {
   color: 'ecology',
   ' ': 'Ecology',
 };
+
+export const Sizes = Template.bind({});
+Sizes.args = {
+  size: 'md',
+};

package/dist/collection/components/icon/icon.css

@@ -10,7 +10,7 @@
 :host {
   box-sizing: content-box;
   display: inline-block;
-  color: var(--icon);
+  color: var(--road-grey-900);
   transition: fill 250ms cubic-bezier(0.4, 0, 0.2, 1) 0ms;
   fill: currentColor;
   contain: strict;
@@ -54,39 +54,39 @@
  -------------------- */
 
 :host(.icon-primary) {
-  color: var(--primary);
+  color: var(--road-primary-900);
 }
 
 :host(.icon-secondary) {
-  color: var(--secondary);
+  color: var(--road-primary-500);
 }
 
 :host(.icon-accent) {
-  color: var(--accent);
+  color: var(--road-secondary-500);
 }
 
 :host(.icon-info) {
-  color: var(--info);
+  color: var(--road-info-default);
 }
 
 :host(.icon-success) {
-  color: var(--success);
+  color: var(--road-success-default);
 }
 
 :host(.icon-warning) {
-  color: var(--warning);
+  color: var(--road-warning-default);
 }
 
 :host(.icon-danger) {
-  color: var(--danger);
+  color: var(--road-danger-default);
 }
 
 :host(.icon-default) {
-  color: var(--icon);
+  color: var(--road-grey-900);
 }
 
 :host(.icon-white) {
-  color: var(--white);
+  color: var(--road-grey-000);
 }
 
 /* ROTATION

package/dist/collection/components/img/img.css

@@ -31,7 +31,7 @@
  -------------------- */
 
 :host(.placeholder) {
-  background: var(--background);
+  background: var(--road-grey-200);
 }
 
 :host(.placeholder) img {

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;
 }