@roadtrip/components 3.5.0 → 3.6.0

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

@@ -0,0 +1,256 @@
+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/Progress Indicator Vertical',
+  component: 'road-progress-indicator-vertical',
+  subcomponents: {
+    'road-progress-indicator-vertical-item': 'road-progress-indicator-vertical-item',
+  },
+  argTypes: {
+    ' ': {
+      control: 'text',
+    },
+  },
+  args: {
+    ' ': `<road-progress-indicator-vertical-item class="completed">
+    <a class="progress-indicator-vertical-link">
+      <span class="progress-indicator-vertical-icon">
+      <road-icon name="check-small" class="d-block" style="color: currentColor;"></road-icon>
+      </span>
+      <span class="progress-indicator-vertical-line"></span>
+    </a>
+    <div class="progress-indicator-vertical-item-content">
+      <span class="progress-indicator-vertical-title">
+        <road-label>Label</road-label>
+      </span>
+      <div class="progress-indicator-vertical-description">Description</div>
+    </div>
+  </road-progress-indicator-vertical-item>
+  <road-progress-indicator-vertical-item class="current">
+    <a class="progress-indicator-vertical-link">
+      <span class="progress-indicator-vertical-icon">
+      2
+      </span>
+      <span class="progress-indicator-vertical-line"></span>
+    </a>
+    <div class="progress-indicator-vertical-item-content">
+      <span class="progress-indicator-vertical-title">
+      <road-label>Label</road-label>
+      </span>
+      <div class="progress-indicator-vertical-description">Description</div>
+    </div>
+  </road-progress-indicator-vertical-item>
+  <road-progress-indicator-vertical-item>
+  <a class="progress-indicator-vertical-link">
+    <span class="progress-indicator-vertical-icon">
+      3
+    </span>
+    <span class="progress-indicator-vertical-line"></span>
+  </a>
+  <div class="progress-indicator-vertical-item-content">
+    <span class="progress-indicator-vertical-title">
+      <road-label>Label</road-label>
+    </span>
+    <div class="progress-indicator-vertical-description">Description</div>
+    </div>
+</road-progress-indicator-vertical-item>
+<road-progress-indicator-vertical-item>
+<a class="progress-indicator-vertical-link">
+  <span class="progress-indicator-vertical-icon">
+    4
+  </span>
+  <span class="progress-indicator-vertical-line"></span>
+</a>
+<div class="progress-indicator-vertical-item-content">
+  <span class="progress-indicator-vertical-title">
+    <road-label>Label</road-label>
+  </span>
+  <div class="progress-indicator-vertical-description">Description</div>
+  </div>
+</road-progress-indicator-vertical-item>
+<road-progress-indicator-vertical-item>
+<a class="progress-indicator-vertical-link">
+  <span class="progress-indicator-vertical-icon">
+    5
+  </span>
+  <span class="progress-indicator-vertical-line"></span>
+</a>
+<div class="progress-indicator-vertical-item-content">
+  <span class="progress-indicator-vertical-title">
+    <road-label>Label</road-label>
+  </span>
+  <div class="progress-indicator-vertical-description">Description</div>
+  </div>
+</road-progress-indicator-vertical-item>
+`,
+  },
+};
+
+export const Template = (args) => html`
+  <road-progress-indicator-vertical color="${ifDefined(args.color)}" outline="${ifDefined(args.outline)}" light="${ifDefined(args.light)}" state-first-step="${ifDefined(args['state-first-step'])}" state-second-step="${ifDefined(args['state-second-step'])}" state-third-step="${ifDefined(args['state-third-step'])}">
+  ${unsafeHTML(args[' '])}
+      
+  </road-progress-indicator-vertical>
+`;
+
+export const OneStepCompleted = Template.bind({});
+OneStepCompleted.args = {
+  ' ': `<road-progress-indicator-vertical-item class="completed">
+  <a class="progress-indicator-vertical-link">
+    <span class="progress-indicator-vertical-icon">
+    <road-icon name="check-small" class="d-block" style="color: currentColor;"></road-icon>
+    </span>
+    <span class="progress-indicator-vertical-line"></span>
+  </a>
+  <div class="progress-indicator-vertical-item-content">
+    <span class="progress-indicator-vertical-title">
+      <road-label>Label</road-label>
+    </span>
+    <div class="progress-indicator-vertical-description">Description</div>
+  </div>
+</road-progress-indicator-vertical-item>
+<road-progress-indicator-vertical-item class="current">
+  <a class="progress-indicator-vertical-link">
+    <span class="progress-indicator-vertical-icon">
+    2
+    </span>
+    <span class="progress-indicator-vertical-line"></span>
+  </a>
+  <div class="progress-indicator-vertical-item-content">
+    <span class="progress-indicator-vertical-title">
+    <road-label>Label</road-label>
+    </span>
+    <div class="progress-indicator-vertical-description">Description</div>
+  </div>
+</road-progress-indicator-vertical-item>
+<road-progress-indicator-vertical-item>
+<a class="progress-indicator-vertical-link">
+  <span class="progress-indicator-vertical-icon">
+    3
+  </span>
+  <span class="progress-indicator-vertical-line"></span>
+</a>
+<div class="progress-indicator-vertical-item-content">
+  <span class="progress-indicator-vertical-title">
+    <road-label>Label</road-label>
+  </span>
+  <div class="progress-indicator-vertical-description">Description</div>
+  </div>
+</road-progress-indicator-vertical-item>
+<road-progress-indicator-vertical-item>
+<a class="progress-indicator-vertical-link">
+<span class="progress-indicator-vertical-icon">
+  4
+</span>
+<span class="progress-indicator-vertical-line"></span>
+</a>
+<div class="progress-indicator-vertical-item-content">
+<span class="progress-indicator-vertical-title">
+  <road-label>Label</road-label>
+</span>
+<div class="progress-indicator-vertical-description">Description</div>
+</div>
+</road-progress-indicator-vertical-item>
+<road-progress-indicator-vertical-item>
+<a class="progress-indicator-vertical-link">
+<span class="progress-indicator-vertical-icon">
+  5
+</span>
+<span class="progress-indicator-vertical-line"></span>
+</a>
+<div class="progress-indicator-vertical-item-content">
+<span class="progress-indicator-vertical-title">
+  <road-label>Label</road-label>
+</span>
+<div class="progress-indicator-vertical-description">Description</div>
+</div>
+</road-progress-indicator-vertical-item>`,
+};
+
+export const SubSteps = Template.bind({});
+SubSteps.args = {
+  ' ': `<road-progress-indicator-vertical-item class="completed">
+  <a class="progress-indicator-vertical-link">
+    <span class="progress-indicator-vertical-icon">
+    <road-icon name="check-small" class="d-block" style="color: currentColor;"></road-icon>
+    </span>
+    <span class="progress-indicator-vertical-line"></span>
+  </a>
+  <div class="progress-indicator-vertical-item-content">
+    <span class="progress-indicator-vertical-title">
+      <road-label>Label</road-label>
+    </span>
+    <div class="progress-indicator-vertical-description">Description</div>
+  </div>
+</road-progress-indicator-vertical-item>
+<road-progress-indicator-vertical-item class="completed">
+  <a class="progress-indicator-vertical-link">
+    <span class="progress-indicator-vertical-icon">
+    <road-icon name="check-small" class="d-block" style="color: currentColor;"></road-icon>
+    </span>
+    <span class="progress-indicator-vertical-line"></span>
+  </a>
+  <div class="progress-indicator-vertical-item-content">
+    <span class="progress-indicator-vertical-title">
+    <road-label>Label</road-label>
+    </span>
+    <div class="progress-indicator-vertical-description">Description</div>
+  </div>
+</road-progress-indicator-vertical-item>
+<road-progress-indicator-vertical-item class="completed">
+<a class="progress-indicator-vertical-substep-link">
+  <span class="progress-indicator-vertical-substep-beforeline"></span>
+  <span class="progress-indicator-vertical-substep-icon"></span>
+  <span class="progress-indicator-vertical-substep-line"></span>
+</a>
+<div class="progress-indicator-vertical-item-content">
+  <span class="progress-indicator-vertical-title">
+    <road-label>Label</road-label>
+  </span>
+  <div class="progress-indicator-vertical-description">Description</div>
+</div>
+</road-progress-indicator-vertical-item>
+<road-progress-indicator-vertical-item class="current">
+<a class="progress-indicator-vertical-substep-link">
+  <span class="progress-indicator-vertical-substep-beforeline"></span>
+  <span class="progress-indicator-vertical-substep-icon"></span>
+  <span class="progress-indicator-vertical-substep-line"></span>
+</a>
+<div class="progress-indicator-vertical-item-content">
+  <span class="progress-indicator-vertical-title">
+    <road-label>Label</road-label>
+  </span>
+  <div class="progress-indicator-vertical-description">Description</div>
+</div>
+</road-progress-indicator-vertical-item>
+<road-progress-indicator-vertical-item>
+<a class="progress-indicator-vertical-link">
+<span class="progress-indicator-vertical-icon">
+  3
+</span>
+<span class="progress-indicator-vertical-line"></span>
+</a>
+<div class="progress-indicator-vertical-item-content">
+<span class="progress-indicator-vertical-title">
+  <road-label>Label</road-label>
+</span>
+<div class="progress-indicator-vertical-description">Description</div>
+</div>
+</road-progress-indicator-vertical-item>
+<road-progress-indicator-vertical-item>
+<a class="progress-indicator-vertical-link">
+<span class="progress-indicator-vertical-icon">
+  4
+</span>
+<span class="progress-indicator-vertical-line"></span>
+</a>
+<div class="progress-indicator-vertical-item-content">
+<span class="progress-indicator-vertical-title">
+  <road-label>Label</road-label>
+</span>
+<div class="progress-indicator-vertical-description">Description</div>
+</div>
+</road-progress-indicator-vertical-item>`,
+};

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,80 @@
+/*
+ * 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-yellow) {
+  color: var(--road-yellow-mikado-20);
+  background-color: var(--road-yellow-mikado-90);
+}
+
+:host(.tag-red) {
+  color: var(--road-red-pepper-30);
+  background-color: var(--road-red-pepper-95);
+}
+
+:host(.tag-violet) {
+  color: var(--road-violet-electric-30);
+  background-color: var(--road-violet-electric-95);
+}
+
+:host(.tag-blue) {
+  color: var(--road-blue-klein-40);
+  background-color: var(--road-blue-klein-95);
+}
+
+:host(.tag-green) {
+  color: var(--road-green-monstera-30);
+  background-color: var(--road-green-monstera-95);
+}
+
+
+/**
+ * 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,50 @@
+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';
+  }
+  render() {
+    return (h(Host, { class: `tag-${this.color}` }, 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'"
+      }
+    };
+  }
+}

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

@@ -0,0 +1,41 @@
+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',
+      },
+    },
+  },
+  args: {
+    ' ': `Label`,
+  },
+};
+
+const Template = (args) => html`
+<road-tag
+  color="${ifDefined(args.color)}"
+>
+  ${unsafeHTML(args[' '])}
+</road-tag>
+`;
+
+export const Color = Template.bind({});
+Color.args = {
+  color: 'grey',
+  ' ': `Reset`,
+};

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