@roadtrip/components 3.2.1 → 3.4.0

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

@@ -0,0 +1,201 @@
+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 horizontal',
+  component: 'road-progress-indicator-horizontal',
+  argTypes: {
+    color: {
+      options: ['default', 'secondary'],
+      control: {
+        type: 'select',
+      },
+    },
+    outline: {
+      control: 'boolean',
+    },
+    light: {
+      control: 'boolean',
+    },
+    'state-first-step': {
+      options: ['default', 'current', 'completed'],
+      control: {
+        type: 'select',
+      },
+    },
+    'state-second-step': {
+      options: ['default', 'current', 'completed'],
+      control: {
+        type: 'select',
+      },
+    },
+    'state-third-step': {
+      options: ['default', 'current', 'completed'],
+      control: {
+        type: 'select',
+      },
+    },
+    'progress-indicator-horizontal-icon': {
+      control: 'text',
+    },
+    'progress-indicator-horizontal-title': {
+      control: 'text',
+    },
+    'progress-indicator-horizontal-icon2': {
+      control: 'text',
+    },
+    'progress-indicator-horizontal-title2': {
+      control: 'text',
+    },
+    'progress-indicator-horizontal-icon3': {
+      control: 'text',
+    },
+    'progress-indicator-horizontal-title3': {
+      control: 'text',
+    },
+  },
+  args: {
+    color: 'default',
+    'state-first-step': 'default',
+    'state-second-step': 'default',
+    'state-third-step': 'default',
+    outline: null,
+    light: null,
+    'progress-indicator-horizontal-icon': `1`,
+    'progress-indicator-horizontal-title': `First step`,
+    'progress-indicator-horizontal-icon2': `2`,
+    'progress-indicator-horizontal-title2': `Second step`,
+    'progress-indicator-horizontal-icon3': `3`,
+    'progress-indicator-horizontal-title3': `Third step`,
+  },
+};
+
+export const Template = (args) => html`
+  <road-progress-indicator-horizontal 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'])}">
+      <div slot="progress-indicator-horizontal-icon">
+        ${unsafeHTML(args['progress-indicator-horizontal-icon'])}
+      </div>
+      <div slot="progress-indicator-horizontal-title">
+        ${unsafeHTML(args['progress-indicator-horizontal-title'])}
+      </div>
+      <div slot="progress-indicator-horizontal-icon2">
+      ${unsafeHTML(args['progress-indicator-horizontal-icon2'])}
+    </div>
+      <div slot="progress-indicator-horizontal-title2">
+      ${unsafeHTML(args['progress-indicator-horizontal-title2'])}
+      </div>
+      <div slot="progress-indicator-horizontal-icon3">
+      ${unsafeHTML(args['progress-indicator-horizontal-icon3'])}
+    </div>
+    <div slot="progress-indicator-horizontal-title3">
+      ${unsafeHTML(args['progress-indicator-horizontal-title3'])}
+      </div>
+  </road-progress-indicator-horizontal>
+`;
+
+export const withoutlabel = (args) => html`
+  <road-progress-indicator-horizontal 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'])}">
+    <div slot="progress-indicator-horizontal-icon">
+      ${unsafeHTML(args['progress-indicator-horizontal-icon'])}
+    </div>
+      <div slot="progress-indicator-horizontal-icon2">
+      ${unsafeHTML(args['progress-indicator-horizontal-icon2'])}
+    </div>
+      <div slot="progress-indicator-horizontal-icon3">
+      ${unsafeHTML(args['progress-indicator-horizontal-icon3'])}
+    </div>
+  </road-progress-indicator-horizontal>
+`;
+
+export const primary = (args) => html`
+  <road-progress-indicator-horizontal color="default" outline="false" state-first-step="current" state-second-step="default" state-third-step="default">
+  <div slot="progress-indicator-horizontal-icon">
+  ${unsafeHTML(args['progress-indicator-horizontal-icon'])}
+  </div>
+  <div slot="progress-indicator-horizontal-title">
+    ${unsafeHTML(args['progress-indicator-horizontal-title'])}
+    </div>
+    <div slot="progress-indicator-horizontal-icon2">
+    ${unsafeHTML(args['progress-indicator-horizontal-icon2'])}
+  </div>
+    <div slot="progress-indicator-horizontal-title2">
+    ${unsafeHTML(args['progress-indicator-horizontal-title2'])}
+    </div>
+    <div slot="progress-indicator-horizontal-icon3">
+    ${unsafeHTML(args['progress-indicator-horizontal-icon3'])}
+  </div>
+  <div slot="progress-indicator-horizontal-title3">
+    ${unsafeHTML(args['progress-indicator-horizontal-title3'])}
+    </div>
+  </road-progress-indicator-horizontal>
+`;
+
+export const secondary = (args) => html`
+  <road-progress-indicator-horizontal color="secondary" outline="false" state-first-step="current" state-second-step="default" state-third-step="default">
+  <div slot="progress-indicator-horizontal-icon">
+  ${unsafeHTML(args['progress-indicator-horizontal-icon'])}
+  </div>
+  <div slot="progress-indicator-horizontal-title">
+    ${unsafeHTML(args['progress-indicator-horizontal-title'])}
+    </div>
+    <div slot="progress-indicator-horizontal-icon2">
+    ${unsafeHTML(args['progress-indicator-horizontal-icon2'])}
+  </div>
+    <div slot="progress-indicator-horizontal-title2">
+    ${unsafeHTML(args['progress-indicator-horizontal-title2'])}
+    </div>
+    <div slot="progress-indicator-horizontal-icon3">
+    ${unsafeHTML(args['progress-indicator-horizontal-icon3'])}
+  </div>
+  <div slot="progress-indicator-horizontal-title3">
+    ${unsafeHTML(args['progress-indicator-horizontal-title3'])}
+    </div>
+  </road-progress-indicator-horizontal>
+`;
+
+export const stepcompleted = (args) => html`
+  <road-progress-indicator-horizontal color="secondary" outline="false" state-first-step="completed" state-second-step="current" state-third-step="default">
+  <div slot="progress-indicator-horizontal-icon">
+    <road-icon name="check-small" class="d-block" color="default"></road-icon>
+  </div>
+  <div slot="progress-indicator-horizontal-title">
+    ${unsafeHTML(args['progress-indicator-horizontal-title'])}
+    </div>
+    <div slot="progress-indicator-horizontal-icon2">
+    ${unsafeHTML(args['progress-indicator-horizontal-icon2'])}
+  </div>
+    <div slot="progress-indicator-horizontal-title2">
+    ${unsafeHTML(args['progress-indicator-horizontal-title2'])}
+    </div>
+    <div slot="progress-indicator-horizontal-icon3">
+    ${unsafeHTML(args['progress-indicator-horizontal-icon3'])}
+  </div>
+  <div slot="progress-indicator-horizontal-title3">
+    ${unsafeHTML(args['progress-indicator-horizontal-title3'])}
+    </div>
+  </road-progress-indicator-horizontal>
+`;
+
+export const outline = (args) => html`
+  <road-progress-indicator-horizontal color="default" outline="true" state-first-step="current" state-second-step="default" state-third-step="default">
+  <div slot="progress-indicator-horizontal-icon">
+  ${unsafeHTML(args['progress-indicator-horizontal-icon'])}
+  </div>
+  <div slot="progress-indicator-horizontal-title">
+    ${unsafeHTML(args['progress-indicator-horizontal-title'])}
+    </div>
+    <div slot="progress-indicator-horizontal-icon2">
+    ${unsafeHTML(args['progress-indicator-horizontal-icon2'])}
+  </div>
+    <div slot="progress-indicator-horizontal-title2">
+    ${unsafeHTML(args['progress-indicator-horizontal-title2'])}
+    </div>
+    <div slot="progress-indicator-horizontal-icon3">
+    ${unsafeHTML(args['progress-indicator-horizontal-icon3'])}
+  </div>
+  <div slot="progress-indicator-horizontal-title3">
+    ${unsafeHTML(args['progress-indicator-horizontal-title3'])}
+    </div>
+  </road-progress-indicator-horizontal>
+`;

package/dist/collection/components/progress-tracker/progress-tracker.css

@@ -0,0 +1,25 @@
+/*
+ * Progress tracker
+ *
+ * Index
+ * - Item
+ * - Link
+ * - Icon
+ * - Title
+ * - Completed
+ */
+
+:host {
+  display: block;
+}
+
+/* PROGRESS TRACKER
+ -------------------- */
+
+.progress-tracker {
+  display: flex;
+  flex-direction: column;
+  padding-left: 0;
+  list-style: none;
+}
+

package/dist/collection/components/progress-tracker/progress-tracker.js

@@ -0,0 +1,26 @@
+import { Host, h } from '@stencil/core';
+/**
+ * @slot  - content of the progress stepper tracker item, it should be road-progress-tracker-item elements.
+ *
+ * if the state of the step is completed add the class `completed` on the road-progress-tracker-item
+ * if the state of the step is in progress add the class `in-progress` on the road-progress-tracker-item
+ * if the state of the step is current add the class `current` on the road-progress-tracker-item
+
+ */
+export class ProgressTracker {
+  render() {
+    return (h(Host, null, h("nav", null, h("ul", null, h("slot", null)))));
+  }
+  static get is() { return "road-progress-tracker"; }
+  static get encapsulation() { return "shadow"; }
+  static get originalStyleUrls() {
+    return {
+      "$": ["progress-tracker.css"]
+    };
+  }
+  static get styleUrls() {
+    return {
+      "$": ["progress-tracker.css"]
+    };
+  }
+}

package/dist/collection/components/progress-tracker/progress-tracker.stories.js

@@ -0,0 +1,264 @@
+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 tracker',
+  component: 'road-progress-tracker',
+  subcomponents: {
+    'road-progress-tracker-item': 'road-progress-tracker-item',
+  },
+  argTypes: {
+    ' ': {
+      control: 'text',
+    },
+  },
+  args: {
+    ' ': `<road-progress-tracker-item class="in-progress">
+    <div class="progress-tracker-link">
+      <span class="progress-tracker-circle"></span>
+      <span class="progress-tracker-line"></span>
+    </div>
+    <div class="progress-tracker-item-content">
+        <road-label class="progress-tracker-title">Label</road-label>
+        <road-label class="progress-tracker-description">Description</road-label>
+    </div>
+  </road-progress-tracker-item>
+  <road-progress-tracker-item class="completed">
+    <div class="progress-tracker-link">
+      <span class="progress-tracker-substep-circle"></span>
+      <span class="progress-tracker-line"></span>
+    </div>
+    <div class="progress-tracker-item-content">
+      <road-label class="progress-tracker-substep-title">Title of the sub step</road-label>
+      <road-label class="progress-tracker-substep-description">Description</road-label>
+    </div>
+  </road-progress-tracker-item>
+  <road-progress-tracker-item class="current">
+    <div class="progress-tracker-link">
+      <span class="progress-tracker-substep-circle"></span>
+      <span class="progress-tracker-line"></span>
+    </div>
+    <div class="progress-tracker-item-content">
+      <road-label class="progress-tracker-substep-title">Title of the sub step</road-label>
+      <road-label class="progress-tracker-substep-description">Description</road-label>
+    </div>
+  </road-progress-tracker-item>
+  <road-progress-tracker-item>
+    <div class="progress-tracker-link">
+      <span class="progress-tracker-circle">
+      </span>
+      <span class="progress-tracker-line"></span>
+    </div>
+    <div class="progress-tracker-item-content">
+      <road-label class="progress-tracker-title">Label</road-label>
+      <road-label class="progress-tracker-description">Description</road-label>
+    </div>
+  </road-progress-tracker-item>
+  <road-progress-tracker-item>
+  <div class="progress-tracker-link">
+    <span class="progress-tracker-circle">
+    </span>
+    <span class="progress-tracker-line"></span>
+  </div>
+  <div class="progress-tracker-item-content">
+    <road-label class="progress-tracker-title">Label</road-label>
+    <road-label class="progress-tracker-description">Description</road-label>
+    </div>
+</road-progress-tracker-item>
+<road-progress-tracker-item>
+<div class="progress-tracker-link">
+  <span class="progress-tracker-circle">
+  </span>
+  <span class="progress-tracker-line"></span>
+</div>
+<div class="progress-tracker-item-content">
+  <road-label class="progress-tracker-title">Label</road-label>
+  <road-label class="progress-tracker-description">Description</road-label>
+  </div>
+</road-progress-tracker-item>
+<road-progress-tracker-item>
+<div class="progress-tracker-link">
+  <span class="progress-tracker-circle">
+  </span>
+  <span class="progress-tracker-line"></span>
+</div>
+<div class="progress-tracker-item-content">
+  <road-label class="progress-tracker-title">Label</road-label>
+  <road-label class="progress-tracker-description">Description</road-label>
+  </div>
+</road-progress-tracker-item>
+`,
+  },
+};
+
+export const Template = (args) => html`
+  <road-progress-tracker>
+  ${unsafeHTML(args[' '])}
+      
+  </road-progress-tracker>
+`;
+
+
+export const OneCompletedStep = Template.bind({});
+OneCompletedStep.args = {
+  ' ': `<road-progress-tracker-item class="completed">
+  <div class="progress-tracker-link">
+    <span class="progress-tracker-circle"></span>
+    <span class="progress-tracker-line"></span>
+  </div>
+  <div class="progress-tracker-item-content">
+      <road-label class="progress-tracker-title">Label</road-label>
+      <road-label class="progress-tracker-description">Description</road-label>
+  </div>
+</road-progress-tracker-item>
+<road-progress-tracker-item class="completed">
+  <div class="progress-tracker-link">
+    <span class="progress-tracker-substep-circle"></span>
+    <span class="progress-tracker-line"></span>
+  </div>
+  <div class="progress-tracker-item-content">
+    <road-label class="progress-tracker-substep-title">Title of the sub step</road-label>
+    <road-label class="progress-tracker-substep-description">Description</road-label>
+  </div>
+</road-progress-tracker-item>
+<road-progress-tracker-item class="completed">
+  <div class="progress-tracker-link">
+    <span class="progress-tracker-substep-circle"></span>
+    <span class="progress-tracker-line"></span>
+  </div>
+  <div class="progress-tracker-item-content">
+    <road-label class="progress-tracker-substep-title">Title of the sub step</road-label>
+    <road-label class="progress-tracker-substep-description">Description</road-label>
+  </div>
+</road-progress-tracker-item>
+<road-progress-tracker-item class="completed">
+  <div class="progress-tracker-link">
+    <span class="progress-tracker-circle">
+    </span>
+    <span class="progress-tracker-line"></span>
+  </div>
+  <div class="progress-tracker-item-content">
+    <road-label class="progress-tracker-title">Label</road-label>
+    <road-label class="progress-tracker-description">Description</road-label>
+  </div>
+</road-progress-tracker-item>
+<road-progress-tracker-item class="current">
+<div class="progress-tracker-link">
+  <span class="progress-tracker-circle">
+  </span>
+  <span class="progress-tracker-line"></span>
+</div>
+<div class="progress-tracker-item-content">
+  <road-label class="progress-tracker-title">Label</road-label>
+  <road-label class="progress-tracker-description">Description</road-label>
+  </div>
+</road-progress-tracker-item>
+<road-progress-tracker-item>
+<div class="progress-tracker-link">
+<span class="progress-tracker-circle">
+</span>
+<span class="progress-tracker-line"></span>
+</div>
+<div class="progress-tracker-item-content">
+<road-label class="progress-tracker-title">Label</road-label>
+<road-label class="progress-tracker-description">Description</road-label>
+</div>
+</road-progress-tracker-item>
+<road-progress-tracker-item>
+<div class="progress-tracker-link">
+<span class="progress-tracker-circle">
+</span>
+<span class="progress-tracker-line"></span>
+</div>
+<div class="progress-tracker-item-content">
+<road-label class="progress-tracker-title">Label</road-label>
+<road-label class="progress-tracker-description">Description</road-label>
+</div>
+</road-progress-tracker-item>
+`,
+};
+
+
+export const ShowMoreStep = Template.bind({});
+ShowMoreStep.args = {
+  ' ': `<road-collapse show-more="show more" show-less="show less">
+  <road-progress-tracker-item class="completed">
+  <div class="progress-tracker-link">
+    <span class="progress-tracker-circle"></span>
+    <span class="progress-tracker-line"></span>
+  </div>
+  <div class="progress-tracker-item-content">
+      <road-label class="progress-tracker-title">Label</road-label>
+      <road-label class="progress-tracker-description">Description</road-label>
+  </div>
+</road-progress-tracker-item>
+<road-progress-tracker-item class="completed">
+  <div class="progress-tracker-link">
+    <span class="progress-tracker-substep-circle"></span>
+    <span class="progress-tracker-line"></span>
+  </div>
+  <div class="progress-tracker-item-content">
+    <road-label class="progress-tracker-substep-title">Title of the sub step</road-label>
+    <road-label class="progress-tracker-substep-description">Description</road-label>
+  </div>
+</road-progress-tracker-item>
+<road-progress-tracker-item class="completed">
+  <div class="progress-tracker-link">
+    <span class="progress-tracker-substep-circle"></span>
+    <span class="progress-tracker-line"></span>
+  </div>
+  <div class="progress-tracker-item-content">
+    <road-label class="progress-tracker-substep-title">Title of the sub step</road-label>
+    <road-label class="progress-tracker-substep-description">Description</road-label>
+  </div>
+</road-progress-tracker-item>
+<road-progress-tracker-item class="in-progress">
+  <div class="progress-tracker-link">
+    <span class="progress-tracker-circle">
+    </span>
+    <span class="progress-tracker-line"></span>
+  </div>
+  <div class="progress-tracker-item-content">
+    <road-label class="progress-tracker-title">Label</road-label>
+    <road-label class="progress-tracker-description">Description</road-label>
+  </div>
+</road-progress-tracker-item>
+<road-progress-tracker-item class="current before-collapse">
+<div class="progress-tracker-link">
+  <span class="progress-tracker-circle">
+  </span>
+  <span class="progress-tracker-line"></span>
+</div>
+<div class="progress-tracker-item-content">
+  <road-label class="progress-tracker-title">Label</road-label>
+  <road-label class="progress-tracker-description">Description</road-label>
+  </div>
+</road-progress-tracker-item>
+<div slot="collapsed-content">
+    <road-progress-tracker-item>
+    <div class="progress-tracker-link">
+    <span class="progress-tracker-circle">
+    </span>
+    <span class="progress-tracker-line"></span>
+    </div>
+    <div class="progress-tracker-item-content">
+    <road-label class="progress-tracker-title">Label</road-label>
+    <road-label class="progress-tracker-description">Description</road-label>
+    </div>
+    </road-progress-tracker-item>
+    <road-progress-tracker-item>
+    <div class="progress-tracker-link">
+    <span class="progress-tracker-circle">
+    </span>
+    <span class="progress-tracker-line"></span>
+    </div>
+    <div class="progress-tracker-item-content">
+    <road-label class="progress-tracker-title">Label</road-label>
+    <road-label class="progress-tracker-description">Description</road-label>
+    </div>
+    </road-progress-tracker-item>
+  </div>
+</road-collapse>
+`,
+};

package/dist/collection/components/progress-tracker-item/progress-tracker-item.css

@@ -0,0 +1,163 @@
+/*
+ * Progress tracker itel
+ *
+ */
+
+/* PROGRESS TRACKER ITEM
+   -------------------- */
+
+road-progress-tracker-item {
+  display: flex;
+  flex-direction: row;
+  justify-content: flex-start;
+  min-height: 65px;
+}
+
+.progress-tracker-item-content {
+  display: inline-block;
+  margin-left: 1rem;
+}
+
+/* PROGRESS TRACKER LINK
+    -------------------- */
+
+.progress-tracker-link {
+  position: relative;
+  z-index: 1;
+  display: flex;
+  margin-top: 0.4rem;
+}
+
+/* PROGRESS TRACKER ICON
+    -------------------- */
+
+.progress-tracker-circle {
+  display: inline-flex;
+  align-items: center;
+  justify-content: center;
+  width: 0.75rem;
+  height: 0.75rem;
+  font-size: var(--road-button-medium);
+  font-weight: 700;
+  background: var(--road-surface);
+  border: 2px solid var(--road-on-surface-disabled);
+  border-radius: 50%;
+  fill: currentColor;
+}
+
+.progress-tracker-substep-circle {
+  display: inline-flex;
+  align-items: center;
+  justify-content: center;
+  width: 0.5rem;
+  height: 0.5rem;
+  margin-left: 0.13rem;
+  font-size: var(--road-button-medium);
+  font-weight: 700;
+  background: var(--road-surface);
+  border: 2px solid var(--road-on-surface-disabled);
+  border-radius: 50%;
+  fill: currentColor;
+}
+
+.progress-tracker-line {
+  position: absolute;
+  top: 8px;
+  left: 0.35rem;
+  z-index: -1;
+  height: 100%;
+  border-left: 1px solid var(--road-on-surface-disabled);
+}
+
+road-progress-tracker-item:last-child .progress-tracker-line {
+  border-left: 0;
+}
+
+.before-collapse .progress-tracker-line {
+  border-left: 1px dashed var(--road-on-surface-disabled);
+}
+
+road-collapse road-progress-tracker-item:last-child .progress-tracker-line {
+  border-left: 0;
+}
+
+/* PROGRESS TRACKER TITLE
+    -------------------- */
+
+.progress-tracker-title {
+  display: block;
+  font-size: var(--road-body-large);
+  font-weight: 700;
+  color: var(--road-on-surface-disabled);
+}
+
+.progress-tracker-substep-title {
+  display: block;
+  font-size: var(--road-body-small);
+  font-weight: 700;
+  color: var(--road-on-surface-disabled);
+}
+
+.progress-tracker-description{
+  display: block;
+  margin: 0 0 2rem;
+  font-size: var(--road-body-small);
+  font-weight: 400;
+  color: var(--road-on-surface-disabled);
+}
+
+.progress-tracker-substep-description{
+  display: block;
+  margin: 0 0 2rem;
+  font-size: var(--road-overline);
+  font-weight: 400;
+  color: var(--road-on-surface-disabled);
+}
+
+/* STEP COMPLETED
+    -------------------- */
+
+.completed:not(:last-child)::after {
+  background: var(--road-primary);
+}
+
+.completed .progress-tracker-circle,
+.completed .progress-tracker-substep-circle{
+  background: var(--road-primary);
+  border: 0;
+}
+
+/* STEP CURRENT
+   -------------------- */
+
+.current .progress-tracker-circle,
+.current .progress-tracker-substep-circle,
+.in-progress .progress-tracker-circle,
+.in-progress .progress-tracker-substep-circle  {
+  background: var(--road-surface);
+  border: 1px solid var(--road-primary);
+}
+
+.completed .progress-tracker-line,
+.in-progress .progress-tracker-line {
+  border-left: 1px solid var(--road-primary);
+}
+
+.current .progress-tracker-title,
+.current .progress-tracker-substep-title,
+.in-progress .progress-tracker-title,
+.in-progress .progress-tracker-substep-title,
+.completed .progress-tracker-title,
+.completed .progress-tracker-substep-title {
+  font-weight: 700;
+  color: var(--road-on-surface);
+}
+
+.current .progress-tracker-description,
+.current .progress-tracker-substep-description,
+.in-progress .progress-tracker-description,
+.in-progress .progress-tracker-substep-description,
+.completed .progress-tracker-description,
+.completed .progress-tracker-substep-description {
+  color: var(--road-on-surface-weak);
+}