@roadtrip/components 3.5.0 → 3.7.0

package/dist/collection/components/progress-indicator-vertical-item/progress-indicator-vertical-item.css

@@ -0,0 +1,212 @@
+/*
+ * Progress Indicator Vertical Item
+ *
+ */
+
+/* PROGRESS INDICATOR VERTICAL ITEM
+   -------------------- */
+
+road-progress-indicator-vertical-item {
+  display: flex;
+  flex-direction: row;
+  justify-content: flex-start;
+  min-height: 65px;
+}
+
+.progress-indicator-vertical-item-content {
+  display: inline-block;
+  margin-left: 1rem;
+}
+
+/**
+* Disabled click for current and next steps
+*/
+
+road-progress-indicator-vertical-item:not(.completed) .progress-indicator-vertical-link {
+  cursor: not-allowed;
+}
+
+/* VERTICAL STEPPER LINK
+    -------------------- */
+
+.progress-indicator-vertical-link {
+  position: relative;
+  z-index: 1;
+  display: flex;
+}
+
+/* VERTICAL STEPPER ICON
+    -------------------- */
+
+.progress-indicator-vertical-icon {
+  display: inline-flex;
+  align-items: center;
+  justify-content: center;
+  width: 1.5rem;
+  height: 1.5rem;
+  font-size: var(--road-font-size-12);
+  font-weight: 700;
+  color: var(--road-on-surface-disabled);
+  background: var(--road-surface-disabled);
+  border-radius: 50%;
+  fill: currentColor;
+}
+
+.progress-indicator-vertical-icon road-icon{
+  display: flex;
+}
+
+.progress-indicator-vertical-substep-link {
+  position: relative;
+  z-index: 1;
+  display: flex;
+  margin: 0 0.5rem;
+}
+
+.progress-indicator-vertical-line {
+  position: absolute;
+  top: 24px;
+  left: 11px;
+  z-index: -1;
+  height: calc(100% - 24px);
+  border-left: 2px solid var(--road-surface-disabled);
+}
+
+road-progress-indicator-vertical-item:last-child .progress-indicator-vertical-line {
+  border-left: 0;
+}
+
+.progress-indicator-vertical-substep-icon {
+  display: inline-flex;
+  align-items: center;
+  justify-content: center;
+  width: 0.5rem;
+  height: 0.5rem;
+  margin-top: 0.7rem;
+  background: var(--road-surface-disabled);
+  border-radius: 50%;
+}
+
+.progress-indicator-vertical-substep-beforeline {
+  position: absolute;
+  top: 0;
+  left: 3px;
+  z-index: -1;
+  height: calc(30% - 8px);
+  border-left: 2px solid var(--road-surface-disabled);
+}
+
+.progress-indicator-vertical-substep-line {
+  position: absolute;
+  top: 19px;
+  left: 3px;
+  z-index: -1;
+  height: calc(83% - 8px);
+  border-left: 2px solid var(--road-surface-disabled);
+}
+
+/* VERTICAL STEPPER TITLE
+    -------------------- */
+
+.progress-indicator-vertical-title road-label{
+  display: block;
+  font-size: var(--road-body-large);
+  font-weight: 700;
+  color: var(--road-on-surface-disabled);
+}
+
+.progress-indicator-vertical-description{
+  display: block;
+  margin: 0;
+  font-size: var(--road-label-small);
+  font-weight: 400;
+  color: var(--road-on-surface-disabled);
+}
+
+/* STEP CURRENT
+    -------------------- */
+
+.current .progress-indicator-vertical-icon {
+  color: var(--road-on-primary);
+  background: var(--road-primary);
+}
+
+.current .progress-indicator-vertical-title road-label{
+  font-weight: 700;
+  color: var(--road-on-surface);
+}
+
+.current .progress-indicator-vertical-description{
+  color: var(--road-on-surface-weak);
+}
+
+.current .progress-indicator-vertical-substep-icon {
+  background: var(--road-primary);
+  border: 0;
+}
+
+.current .progress-indicator-vertical-substep-beforeline {
+  border-left: 2px solid var(--road-primary);
+}
+
+
+/* STEP IN PROGRESS
+   -------------------- */
+
+.in-progress .progress-indicator-vertical-icon {
+  color: var(--road-on-primary);
+  background: var(--road-primary);
+  border: 0;
+}
+
+.in-progress .progress-indicator-vertical-title road-label{
+  font-weight: 700;
+  color: var(--road-on-surface);
+}
+
+.in-progress .progress-indicator-vertical-description{
+  color: var(--road-on-surface-weak);
+}
+
+.in-progress .progress-indicator-vertical-line {
+  background: var(--road-primary);
+}
+
+/* STEP COMPLETED
+    -------------------- */
+
+.completed:not(:last-child)::after {
+  background: var(--road-primary);
+}
+
+.completed .progress-indicator-vertical-icon {
+  color: var(--road-primary);
+  background: none;
+  border: 2px solid var(--road-primary);
+}
+
+.completed .progress-indicator-vertical-line {
+  border-left: 2px solid var(--road-primary);
+}
+
+.completed .progress-indicator-vertical-substep-beforeline {
+  border-left: 2px solid var(--road-primary);
+}
+
+.completed .progress-indicator-vertical-substep-line {
+  border-left: 2px solid var(--road-primary);
+}
+
+.completed .progress-indicator-vertical-title road-label{
+  font-weight: 700;
+  color: var(--road-on-surface);
+}
+
+.completed .progress-indicator-vertical-description{
+  color: var(--road-on-surface-weak);
+}
+
+.completed .progress-indicator-vertical-substep-icon {
+  background: none;
+  border: 2px solid var(--road-primary);
+}

package/dist/collection/components/progress-indicator-vertical-item/progress-indicator-vertical-item.js

@@ -0,0 +1,20 @@
+import { Host, h } from '@stencil/core';
+/**
+ * @slot - Content of the progress indicator vertical item
+ */
+export class ProgressIndicatorVerticalItem {
+  render() {
+    return (h(Host, null, h("slot", null)));
+  }
+  static get is() { return "road-progress-indicator-vertical-item"; }
+  static get originalStyleUrls() {
+    return {
+      "$": ["progress-indicator-vertical-item.css"]
+    };
+  }
+  static get styleUrls() {
+    return {
+      "$": ["progress-indicator-vertical-item.css"]
+    };
+  }
+}

package/dist/collection/components/tag/tag.css

@@ -0,0 +1,109 @@
+/*
+ * Chip
+ *
+ * Index
+ * - Color
+ */
+
+:host {
+  box-sizing: border-box;
+  display: inline-flex;
+  align-items: center;
+  padding: 0.125rem 0.5rem;
+  font-size: var(--road-body-small);
+  border-radius: 0.25rem;
+}
+
+/* COLOR
+ -------------------- */
+
+:host(.tag-grey) {
+  color: var(--road-grey-30);
+  background-color: var(--road-grey-85);
+}
+
+:host(.tag-grey.tag-grey-contrast) {
+  color: var(--road-on-primary);
+  background-color: var(--road-grey-40);
+}
+
+:host(.tag-yellow) {
+  color: var(--road-yellow-mikado-20);
+  background-color: var(--road-yellow-mikado-90);
+}
+
+:host(.tag-yellow.tag-yellow-contrast) {
+  color: var(--road-yellow-mikado-20);
+  background-color: var(--road-yellow-mikado-60);
+}
+
+:host(.tag-red) {
+  color: var(--road-red-pepper-30);
+  background-color: var(--road-red-pepper-95);
+}
+
+:host(.tag-red.tag-red-contrast) {
+  color: var(--road-on-primary);
+  background-color: var(--road-red-pepper-60);
+}
+
+:host(.tag-violet) {
+  color: var(--road-violet-electric-30);
+  background-color: var(--road-violet-electric-95);
+}
+
+:host(.tag-violet.tag-violet-contrast) {
+  color: var(--road-on-primary);
+  background-color: var(--road-violet-electric-60);
+}
+
+:host(.tag-blue) {
+  color: var(--road-blue-klein-40);
+  background-color: var(--road-blue-klein-95);
+}
+
+:host(.tag-blue.tag-blue-contrast) {
+  color: var(--road-on-primary);
+  background-color: var(--road-blue-klein-60);
+}
+
+:host(.tag-green) {
+  color: var(--road-green-monstera-30);
+  background-color: var(--road-green-monstera-95);
+}
+
+:host(.tag-green.tag-green-contrast) {
+  color: var(--road-on-primary);
+  background-color: var(--road-green-monstera-60);
+}
+
+/**
+ * Hover state
+ */
+
+@media (any-hover: hover) {
+
+  :host(.chip-outline:hover) {
+    border-color: var(--road-outline-variant);
+  }
+
+  :host(.chip-secondary:hover) {
+    background: var(--road-button-primary-variant);
+  }
+
+  :host(.chip-secondary:hover) .chip-close {
+    color: var(--road-primary);
+  }
+}
+
+/**
+ * Focus state
+ */
+
+:host(.chip-outline:hover) {
+  border-color: var(--road-outline-variant);
+}
+
+:host(.chip-secondary.focus-visible) {
+  background: var(--road-button-primary-variant);
+}

package/dist/collection/components/tag/tag.js

@@ -0,0 +1,73 @@
+import { Host, h } from '@stencil/core';
+import './../../utils/polyfill';
+/**
+ * @slot - Content of the tag.
+ */
+export class Tag {
+  constructor() {
+    /**
+     * The color to use from your application's color palette.
+     */
+    this.color = 'grey';
+    /**
+   * Set to `true` for a contrast tag, for example on a gryy surface
+   */
+    this.contrast = false;
+  }
+  render() {
+    const contrastClass = this.contrast ? `tag-${this.color} tag-${this.color}-contrast` : `tag-${this.color}`;
+    return (h(Host, { class: `${contrastClass}` }, h("slot", null)));
+  }
+  static get is() { return "road-tag"; }
+  static get encapsulation() { return "shadow"; }
+  static get originalStyleUrls() {
+    return {
+      "$": ["tag.css"]
+    };
+  }
+  static get styleUrls() {
+    return {
+      "$": ["tag.css"]
+    };
+  }
+  static get properties() {
+    return {
+      "color": {
+        "type": "string",
+        "mutable": false,
+        "complexType": {
+          "original": "'grey' | 'yellow' | 'red' | 'violet' | 'blue' | 'green'",
+          "resolved": "\"blue\" | \"green\" | \"grey\" | \"red\" | \"violet\" | \"yellow\" | undefined",
+          "references": {}
+        },
+        "required": false,
+        "optional": true,
+        "docs": {
+          "tags": [],
+          "text": "The color to use from your application's color palette."
+        },
+        "attribute": "color",
+        "reflect": false,
+        "defaultValue": "'grey'"
+      },
+      "contrast": {
+        "type": "boolean",
+        "mutable": false,
+        "complexType": {
+          "original": "boolean",
+          "resolved": "boolean",
+          "references": {}
+        },
+        "required": false,
+        "optional": false,
+        "docs": {
+          "tags": [],
+          "text": "Set to `true` for a contrast tag, for example on a gryy surface"
+        },
+        "attribute": "contrast",
+        "reflect": false,
+        "defaultValue": "false"
+      }
+    };
+  }
+}

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

@@ -0,0 +1,50 @@
+import { html } from 'lit-html';
+import { ifDefined } from 'lit-html/directives/if-defined';
+import { unsafeHTML } from 'lit-html/directives/unsafe-html.js';
+
+export default {
+  title: 'Indicators/Tag',
+  component: 'road-tag',
+  parameters: {
+    backgrounds: {
+      default: 'grey',
+    },
+  },
+  argTypes: {
+    ' ': {
+      control: 'text',
+    },
+    color: {
+      options: ['grey', 'yellow', 'red', 'violet', 'blue', 'green'],
+      control: {
+        type: 'select',
+      },
+    },
+    contrast: {
+      control: 'boolean',
+    },
+  },
+  args: {
+    ' ': `Label`,
+  },
+};
+
+const Template = (args) => html`
+<road-tag
+  color="${ifDefined(args.color)}" contrast="${ifDefined(args.contrast)}"
+>
+  ${unsafeHTML(args[' '])}
+</road-tag>
+`;
+
+export const Color = Template.bind({});
+Color.args = {
+  color: 'grey',
+  ' ': `Reset`,
+};
+
+export const Contrast = Template.bind({});
+Contrast.args = {
+  color: 'grey',
+  contrast: true,
+};

package/dist/collection/components/textarea/textarea.css

@@ -109,6 +109,10 @@
   line-height: 1.5;
 }
 
+.textarea-control.no-resize {
+  resize: none;
+}
+
 /* LABEL
  -------------------- */
 

package/dist/collection/components/textarea/textarea.js

@@ -37,6 +37,10 @@ export class Textarea {
      * If `true`, the element will have its spelling and grammar checked.
      */
     this.spellcheck = false;
+    /**
+   * If `false`, to disabled resize.
+   */
+    this.resize = true;
     /**
      * The value of the textarea.
      */
@@ -76,8 +80,9 @@ export class Textarea {
     const value = this.getValue();
     const labelId = this.textareaId + '-label';
     const hasValueClass = this.value !== '' ? 'has-value' : '';
+    const noResizeClass = this.resize == false ? 'no-resize' : '';
     const isInvalidClass = this.error !== undefined && this.error !== '' ? 'is-invalid' : '';
-    return (h(Host, { "aria-disabled": this.disabled ? 'true' : null, class: this.sizes && `input-${this.sizes}` }, h("textarea", { class: `form-control textarea-control ${hasValueClass} ${isInvalidClass}`, id: this.textareaId, "aria-disabled": this.disabled ? 'true' : null, "aria-labelledby": labelId, disabled: this.disabled, autoCapitalize: this.autocapitalize, autoFocus: this.autofocus, enterKeyHint: this.enterkeyhint, inputMode: this.inputmode, maxLength: this.maxlength, minLength: this.minlength, name: this.name, placeholder: this.placeholder, readOnly: this.readonly, required: this.required, value: value, spellcheck: this.spellcheck, cols: this.cols, rows: this.rows, wrap: this.wrap, onInput: this.onInput, onBlur: this.onBlur, onFocus: this.onFocus }), h("label", { class: "form-label", id: labelId, htmlFor: this.textareaId }, this.label), this.error && this.error !== '' && h("p", { class: "invalid-feedback" }, this.error), this.helper && this.helper !== '' && h("p", { class: "helper" }, this.helper)));
+    return (h(Host, { "aria-disabled": this.disabled ? 'true' : null, class: this.sizes && `input-${this.sizes}` }, h("textarea", { class: `form-control textarea-control ${hasValueClass} ${noResizeClass} ${isInvalidClass}`, id: this.textareaId, "aria-disabled": this.disabled ? 'true' : null, "aria-labelledby": labelId, disabled: this.disabled, autoCapitalize: this.autocapitalize, autoFocus: this.autofocus, enterKeyHint: this.enterkeyhint, inputMode: this.inputmode, maxLength: this.maxlength, minLength: this.minlength, name: this.name, placeholder: this.placeholder, readOnly: this.readonly, required: this.required, value: value, spellcheck: this.spellcheck, cols: this.cols, rows: this.rows, wrap: this.wrap, onInput: this.onInput, onBlur: this.onBlur, onFocus: this.onFocus }), h("label", { class: "form-label", id: labelId, htmlFor: this.textareaId }, this.label), 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-textarea"; }
   static get encapsulation() { return "scoped"; }
@@ -340,6 +345,24 @@ export class Textarea {
         "reflect": false,
         "defaultValue": "false"
       },
+      "resize": {
+        "type": "boolean",
+        "mutable": false,
+        "complexType": {
+          "original": "boolean",
+          "resolved": "boolean",
+          "references": {}
+        },
+        "required": false,
+        "optional": false,
+        "docs": {
+          "tags": [],
+          "text": "If `false`, to disabled resize."
+        },
+        "attribute": "resize",
+        "reflect": false,
+        "defaultValue": "true"
+      },
       "cols": {
         "type": "number",
         "mutable": false,

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

@@ -25,6 +25,9 @@ export default {
     spellcheck: {
       control: 'boolean',
     },
+    resize: {
+      control: 'boolean',
+    },
     error: {
       control: 'text',
     },
@@ -143,6 +146,7 @@ const Template = (args) => html`
     sizes="${ifDefined(args.sizes)}"
     value="${ifDefined(args.value)}"
     spellcheck="${ifDefined(args.spellcheck)}"
+    resize="${ifDefined(args.resize)}"
     placeholder="${ifDefined(args.placeholder)}"
     autocapitalize="${ifDefined(args.autocapitalize)}"
     enterkeyhint="${ifDefined(args.enterkeyhint)}"
@@ -168,6 +172,11 @@ Disabled.args = {
   disabled: true,
 };
 
+export const noResize = Template.bind({});
+noResize.args = {
+  resize: false,
+};
+
 export const Error = Template.bind({});
 Error.args = {
   error: 'This field is required',

package/dist/collection/components/toast/toast.css

@@ -24,6 +24,7 @@
   justify-content: center;
   width: 328px;
   margin: 0 auto;
+  pointer-events: none;
   visibility: hidden;
   opacity: 0;
   transition: opacity .3s ease-in-out,visibility .15s,transform .3s ease-in-out;
@@ -90,6 +91,7 @@
 
 .toast-danger {
   color: var(--road-on-danger-surface-inverse);
+  pointer-events: all;
   background: var(--road-danger-surface-inverse);
 }
 

package/dist/esm/index-a99a5e7b.js

@@ -2055,6 +2055,14 @@ const loadModule = (cmpMeta, hostRef, hmrVersionId) => {
           return import(
             /* webpackMode: "lazy" */
             './road-progress-indicator-horizontal.entry.js').then(processMod, consoleError);
+        case 'road-progress-indicator-vertical':
+          return import(
+            /* webpackMode: "lazy" */
+            './road-progress-indicator-vertical.entry.js').then(processMod, consoleError);
+        case 'road-progress-indicator-vertical-item':
+          return import(
+            /* webpackMode: "lazy" */
+            './road-progress-indicator-vertical-item.entry.js').then(processMod, consoleError);
         case 'road-progress-tracker':
           return import(
             /* webpackMode: "lazy" */
@@ -2131,6 +2139,10 @@ const loadModule = (cmpMeta, hostRef, hmrVersionId) => {
           return import(
             /* webpackMode: "lazy" */
             './road-tabs.entry.js').then(processMod, consoleError);
+        case 'road-tag':
+          return import(
+            /* webpackMode: "lazy" */
+            './road-tag.entry.js').then(processMod, consoleError);
         case 'road-text':
           return import(
             /* webpackMode: "lazy" */
@@ -2159,14 +2171,6 @@ const loadModule = (cmpMeta, hostRef, hmrVersionId) => {
           return import(
             /* webpackMode: "lazy" */
             './road-tooltip.entry.js').then(processMod, consoleError);
-        case 'road-vertical-stepper':
-          return import(
-            /* webpackMode: "lazy" */
-            './road-vertical-stepper.entry.js').then(processMod, consoleError);
-        case 'road-vertical-stepper-item':
-          return import(
-            /* webpackMode: "lazy" */
-            './road-vertical-stepper-item.entry.js').then(processMod, consoleError);
         case 'road-avatar':
           return import(
             /* webpackMode: "lazy" */