@roadtrip/components 2.27.1 → 2.29.1

package/dist/collection/components/radio/radio.js

@@ -227,6 +227,23 @@ export class Radio {
       "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
+    },
     "inline": {
       "type": "boolean",
       "mutable": false,

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

@@ -24,6 +24,7 @@ export const Playground = (args) => html`
   name="${ifDefined(args.name)}"
   label="Label of radio group" 
   error="${ifDefined(args.error)}" 
+  helper="${ifDefined(args.helper)}"
   @roadchange=${event => args.roadchange(event.detail.value)}
   asterisk="${ifDefined(args.asterisk)}"
 >
@@ -63,6 +64,9 @@ Playground.argTypes = {
   error: {
     control: 'text',
   },
+  helper: {
+    control: 'text',
+  },
   label: {
     control: 'text',
   },

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

@@ -21,7 +21,7 @@
  -------------------- */
 
 :host {
-  --asterisk-color: var(--text);
+  --asterisk-color: var(--road-grey-900);
 
   position: relative;
   display: block;
@@ -49,5 +49,14 @@
   width: 100%;
   margin: 0.5rem 0 0;
   font-size: 0.75rem;
-  color: var(--danger-text);
+  color: var(--road-danger-text);
+}
+
+/* HELPER
+ -------------------- */
+
+.helper {
+  margin-top: 0.5rem;
+  font-size: 0.75rem;
+  color: var(--road-grey-500);
 }

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

@@ -65,7 +65,8 @@ export class RadioGroup {
         " ",
         this.asterisk && h("span", { class: "asterisk" }, "*")),
       h("slot", null),
-      this.error && this.error !== '' && h("p", { class: "invalid-feedback" }, this.error)));
+      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-radio-group"; }
   static get encapsulation() { return "scoped"; }
@@ -216,6 +217,23 @@ export class RadioGroup {
       },
       "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 radio group"
+      },
+      "attribute": "helper",
+      "reflect": false
     }
   }; }
   static get events() { return [{

package/dist/collection/components/range/range.css

@@ -76,7 +76,7 @@
   display: block;
   height: 0.5rem;
   content: "";
-  background-color: var(--background);
+  background-color: var(--road-grey-200);
   border: 0;
   border-radius: 1.125rem;
 }
@@ -93,7 +93,7 @@
   width: calc((var(--value) * 100%) / var(--max));
   height: 0.5rem;
   content: "";
-  background: var(--secondary);
+  background: var(--road-primary-500);
   border-radius: 1.125rem;
 }
 
@@ -107,7 +107,7 @@
   height: 1.625rem;
   margin-top: -0.625rem;
   cursor: grab;
-  background: var(--white);
+  background: var(--road-grey-000);
   border: none;
   border-radius: 1.625rem;
   box-shadow: 0 0.1875rem 0.375rem rgba(0, 0, 0, 0.24);
@@ -123,7 +123,7 @@
   height: 1.625rem;
   margin-top: -0.625rem;
   cursor: grab;
-  background: var(--white);
+  background: var(--road-grey-000);
   border: none;
   border-radius: 1.625rem;
   box-shadow: 0 0.1875rem 0.375rem rgba(0, 0, 0, 0.24);
@@ -137,12 +137,12 @@
 
 :host(.focus-visible) .form-range-input::-webkit-slider-thumb,
 :host(:active) .form-range-input::-webkit-slider-thumb {
-  background: var(--secondary);
-  border: 0.5rem solid var(--white);
+  background: var(--road-primary-500);
+  border: 0.5rem solid var(--road-grey-000);
 }
 
 :host(.focus-visible) .form-range-input::-moz-range-thumb,
 :host(:active) .form-range-input::-moz-range-thumb {
-  background: var(--secondary);
-  border: 0.5rem solid var(--white);
+  background: var(--road-primary-500);
+  border: 0.5rem solid var(--road-grey-000);
 }

package/dist/collection/components/rating/rating.css

@@ -12,6 +12,7 @@
 
 :host {
   display: flex;
+  align-items: center;
 }
 
 .rating-stars {
@@ -23,7 +24,7 @@
  -------------------- */
 
 .rating-star {
-  color: var(--border);
+  color: var(--road-grey-400);
 }
 
 /* RATING NUMBER
@@ -31,6 +32,6 @@
 
 .rating-number {
   margin-left: 0.5rem;
-  font-size: 0.875rem;
-  color: var(--text-second);
+  font-size: 1rem;
+  color: var(--road-grey-900);
 }

package/dist/collection/components/select/select.css

@@ -4,6 +4,7 @@
  * Index
  * - Select
  * - Label
+ * - Sizes
  * - Error
  */
 
@@ -12,8 +13,8 @@
   position: relative;
   display: block;
   margin-bottom: 1rem;
-  font-family: var(--font, sans-serif);
-  color: var(--text);
+  font-family: var(--road-font, sans-serif);
+  color: var(--road-grey-900);
 }
 
 /* SELECT
@@ -28,10 +29,10 @@
   margin: 0;
   font-size: 1rem;
   line-height: 1.5;
-  color: var(--text);
-  background: url("data:image/svg+xml;base64,PHN2ZyB4bWxucz0iaHR0cDovL3d3dy53My5vcmcvMjAwMC9zdmciIHZpZXdCb3g9IjAgMCA2NCA2NCIgZmlsbD0icmdiYSgyMywgMzAsIDUyLCAwLjcyKSI+PHBhdGggZD0iTTIzIDI2bDkgMTIgOS0xMnoiLz48L3N2Zz4=") no-repeat right 0.5rem center/2rem 2rem;
-  background-color: var(--white);
-  border: 1px solid var(--border-form);
+  color: var(--road-grey-900);
+  background: url("data:image/svg+xml;base64,PHN2ZyB4bWxucz0iaHR0cDovL3d3dy53My5vcmcvMjAwMC9zdmciIHZpZXdCb3g9IjAgMCA2NCA2NCIgZmlsbD0icmdiYSgyMywgMzAsIDUyLCAwLjcyKSI+PHBhdGggZD0iTTIzIDI2bDkgMTIgOS0xMnoiLz48L3N2Zz4=") no-repeat right 1rem center/1.5rem 2rem;
+  background-color: var(--road-grey-000);
+  border: 1px solid var(--road-grey-400);
   border-radius: 0.25rem;
   box-shadow: none;
   -webkit-appearance: none;
@@ -53,7 +54,18 @@
  */
 
 .form-select::placeholder {
-  color: var(--text-second);
+  color: var(--road-grey-600);
+}
+
+/**
+ * Hover state
+ */
+
+@media (hover: hover) {
+
+  .form-select:not(:disabled):hover {
+    border-color: var(--road-primary-700);
+  }
 }
 
 /**
@@ -66,8 +78,8 @@
   transform: scale(0.625) translateY(-0.625rem);
 }
 
-.form-select:focus {
-  border-color: var(--secondary);
+.form-select:not(:disabled):focus {
+  border-color: var(--road-primary-700);
   outline: 0;
 }
 
@@ -77,9 +89,9 @@
 
 .form-select:disabled,
 .form-select[readonly] {
-  color: var(--text-disabled);
+  color: var(--road-grey-400);
   cursor: not-allowed;
-  background-color: var(--background-second);
+  background-color: var(--road-disabled);
   opacity: 1;
 }
 
@@ -93,12 +105,36 @@
   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;
 }
 
+/* SIZES
+ -------------------- */
+
+:host(.select-xl) .form-select {
+  height: 3.5rem;
+  padding: 1rem 1rem 0;
+}
+
+:host(.select-xl) .form-select-label {
+  top: 1rem;
+}
+
+:host(.select-xl) .form-select:focus ~ .form-select-label,
+:host(.select-xl) .form-select[required]:valid ~ .form-select-label,
+:host(.select-xl) .form-select.has-value ~ .form-select-label,
+:host(.select-xl) .form-select[type="date"] ~ .form-select-label,
+:host(.select-xl) .form-select[type="time"] ~ .form-select-label {
+  transform: scale(0.75) translateY(-0.625rem);
+}
+
+:host(.select-xl) .form-select:placeholder-shown ~ .form-select-label {
+  transform: scale(0.75) translateY(-0.625rem);
+}
+
 /* ERROR
  -------------------- */
 
@@ -107,12 +143,12 @@
   width: 100%;
   margin-top: 0.5rem;
   font-size: 0.75rem;
-  color: var(--danger-text);
+  color: var(--road-danger-text);
 }
 
 .form-select.is-invalid,
 .was-validated .form-select:invalid {
-  border-color: var(--danger);
+  border-color: var(--road-danger-default);
 }
 
 .form-select.is-invalid ~ .invalid-feedback,

package/dist/collection/components/select/select.js

@@ -30,6 +30,10 @@ export class Select {
      * this attribute represents the number of rows in the list that should be visible at one time.
      */
     this.size = 0;
+    /**
+     * The sizes of the input.
+     */
+    this.sizes = 'lg';
     /**
      * Label for the field
      */
@@ -61,7 +65,7 @@ export class Select {
     const labelId = this.selectId + '-label';
     const hasValueClass = this.value && this.value !== '' ? 'has-value' : '';
     const isInvalidClass = this.error !== undefined && this.error !== '' ? 'is-invalid' : '';
-    return (h(Host, null,
+    return (h(Host, { class: this.sizes && `select-${this.sizes}` },
       h("select", { class: `form-select ${hasValueClass} ${isInvalidClass}`, id: this.selectId, "aria-disabled": this.disabled ? 'true' : null, autoFocus: this.autofocus, disabled: this.disabled, name: this.name, required: this.required, size: this.size, onChange: this.onChange, onFocus: this.onFocus, onBlur: this.onBlur },
         h("option", { selected: true, disabled: true, hidden: true, style: { display: 'none' }, value: "" }),
         this.options && this.options.map(option => (h("option", { value: option.value, selected: option.selected }, option.label)))),
@@ -205,6 +209,24 @@ export class Select {
       "reflect": false,
       "defaultValue": "0"
     },
+    "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'"
+    },
     "label": {
       "type": "string",
       "mutable": false,

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

@@ -31,6 +31,12 @@ export default {
     size: {
       control: 'number',
     },
+    sizes: {
+      options: ['lg', 'xl'],
+      control: {
+        type: 'select',
+      },
+    },
     'select-id': {
       control: 'text',
     },
@@ -56,10 +62,11 @@ export default {
   },
   args: {
     options: [
-      { value: 'link1', label: 'link1' },
-      { value: 'link2', label: 'link2' },
-      { value: 'link3', label: 'link3' }
+      { value: 'value1', label: 'Value1' },
+      { value: 'value2', label: 'Value2' },
+      { value: 'value3', label: 'Value3' }
     ],
+    sizes: 'xl',
     disabled: null,
     required: null,
     label: 'Label',
@@ -76,6 +83,7 @@ const Template = (args) => html`
     autofocus="${ifDefined(args.autofocus)}"
     error="${ifDefined(args.error)}"
     size="${ifDefined(args.size)}"
+    sizes="${ifDefined(args.sizes)}"
     select-id="${ifDefined(args['select-id'])}"
     value="${ifDefined(args.value)}"
     @roadchange=${event => args.roadchange(event.detail.value)}
@@ -87,11 +95,11 @@ export const Playground = Template.bind({});
 export const WithValue = Template.bind({});
 WithValue.args = {
   options: [
-    { value: 'link1', label: 'link1', selected: true },
-    { value: 'link2', label: 'link2' },
-    { value: 'link3', label: 'link3' }
+    { value: 'value1', label: 'Value1', selected: true },
+    { value: 'value2', label: 'Value2' },
+    { value: 'value3', label: 'Value3' }
   ],
-  value: 'link1',
+  value: 'value1',
 };
 
 export const Disabled = Template.bind({});

package/dist/collection/components/select-filter/select-filter.css

@@ -8,7 +8,13 @@
  * - Item
  */
 
+/**
+ * @prop --margin-top: margin top of the select-filter (should equal the height of the field)
+ */
+
 :host {
+  --margin-top: 3rem;
+
   position: relative;
   display: block;
 }
@@ -18,18 +24,18 @@
 
 .select-filter-list {
   position: absolute;
-  top: 3rem;
+  top: var(--margin-top);
   z-index: 1;
   width: 100%;
   max-height: 16rem;
   padding: 0.5rem 0;
   margin: 0;
   overflow-y: scroll;
-  font-family: var(--font, sans-serif);
+  font-family: var(--road-font, sans-serif);
   font-size: 0.875rem;
-  color: var(--text);
+  color: var(--road-grey-900);
   list-style-type: none;
-  background: var(--white);
+  background: var(--road-grey-000);
   border-radius: 0 0 0.25rem 0.25rem;
   box-shadow: 0 3px 6px rgba(0, 0, 0, 0.16);
 }
@@ -48,6 +54,6 @@
 
 .select-filter-item:hover,
 .select-filter-item.highlight {
-  color: var(--secondary-contrast);
-  background: var(--secondary);
+  color: var(--road-primary-contrast);
+  background: var(--road-primary-500);
 }

package/dist/collection/components/select-filter/select-filter.stories.js

@@ -26,6 +26,14 @@ export default {
         type: null,
       },
     },
+    '--margin-top': {
+      table: {
+        defaultValue: { summary: '3rem' },
+      },
+      control: {
+        type: null,
+      },
+    },
   },
   args: {
     options: [
@@ -43,7 +51,7 @@ export default {
       ignoreLocation: true,
     },
     ' ': `<road-input-group>
-    <road-input input-id="brand" label="Brand" class="mb-0"></road-input>
+    <road-input input-id="brand" sizes="xl" label="Brand"></road-input>
     <label slot="append" for="brand">
       <road-icon name="arrow-drop" focusable="false"></road-icon>
     </label>
@@ -52,7 +60,7 @@ export default {
 };
 
 const Template = (args) => html`
-<road-select-filter .options=${args.options} only-select="${ifDefined(args['only-select'])}" @roadselected=${event => args.roadselected(event.detail)}>
+<road-select-filter style="--margin-top: 3.5rem;" .options=${args.options} only-select="${ifDefined(args['only-select'])}" @roadselected=${event => args.roadselected(event.detail)}>
   ${unsafeHTML(args[' '])}
 </road-select-filter>
 `;
@@ -62,7 +70,7 @@ export const Playground = Template.bind({});
 export const WithValue = Template.bind({});
 WithValue.args = {
   ' ': `<road-input-group>
-    <road-input input-id="brand2" label="Brand" value="Audi" class="mb-0"></road-input>
+    <road-input input-id="brand2" sizes="xl" label="Brand" value="Audi"></road-input>
     <label slot="append" for="brand2">
       <road-icon name="arrow-drop" focusable="false"></road-icon>
     </label>
@@ -72,7 +80,7 @@ WithValue.args = {
 export const Disabled = Template.bind({});
 Disabled.args = {
   ' ': `<road-input-group>
-    <road-input input-id="brand3" label="Brand" disabled class="mb-0"></road-input>
+    <road-input input-id="brand3" sizes="xl" label="Brand" disabled></road-input>
     <label slot="append" for="brand3">
       <road-icon name="arrow-drop" focusable="false"></road-icon>
     </label>
@@ -82,7 +90,7 @@ Disabled.args = {
 export const Error = Template.bind({});
 Error.args = {
   ' ': `<road-input-group>
-    <road-input input-id="brand4" label="Brand" error="Select a Brand" class="mb-0"></road-input>
+    <road-input input-id="brand4" sizes="xl" label="Brand" error="Select a Brand"></road-input>
     <label slot="append" for="brand4">
       <road-icon name="arrow-drop" focusable="false"></road-icon>
     </label>
@@ -106,7 +114,7 @@ withHTML.args = {
     }
   ],
   ' ': `<road-input-group>
-    <road-input input-id="controls" label="Controls" class="mb-0"></road-input>
+    <road-input input-id="controls" sizes="xl" label="Controls" class="mb-0"></road-input>
     <label slot="append" for="brand">
       <road-icon name="arrow-drop" focusable="false"></road-icon>
     </label>

package/dist/collection/components/skeleton/skeleton.css

@@ -10,12 +10,20 @@
 /* SKELETON
  -------------------- */
 
+/**
+ * @prop --background-light: base light grey color
+ * @prop --background-dark: second grey color to see the animation
+ */
+
 :host {
+  --background-light: var(--road-grey-200);
+  --background-dark: var(--road-grey-300);
+
   position: relative;
   display: block;
   width: 100%;
   min-height: 1rem;
-  background: linear-gradient(to right, var(--background-second) 8%, var(--background) 18%, var(--background-second) 33%);
+  background: linear-gradient(to right, var(--background-light) 8%, var(--background-dark) 18%, var(--background-light) 33%);
   background-size: 800px 104px;
   animation: road-skeleton-animation 1s linear infinite;
 }

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

@@ -3,6 +3,24 @@ import { html } from 'lit-html';
 export default {
   title: 'Indicators/Skeleton',
   component: 'road-skeleton',
+  argTypes: {
+    '--background-light': {
+      table: {
+        defaultValue: { summary: 'var(--road-grey-200)' },
+      },
+      control: {
+        type: null,
+      },
+    },
+    '--background-dark': {
+      table: {
+        defaultValue: { summary: 'var(--road-grey-300)' },
+      },
+      control: {
+        type: null,
+      },
+    },
+  },
 };
 
 export const List = () => html`

package/dist/collection/components/spinner/spinner.css

@@ -27,7 +27,7 @@
 .spinner-circle {
   animation: road-dash 1.5s ease-in-out infinite;
   fill: none;
-  stroke: var(--secondary);
+  stroke: var(--road-primary-500);
   stroke-width: 3;
   stroke-dasharray: 1, 200;
   stroke-dashoffset: 0;