@roadtrip/components 3.4.0 → 3.6.0

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

@@ -7,17 +7,11 @@ export default {
   component: 'road-progress-indicator-horizontal',
   argTypes: {
     color: {
-      options: ['default', 'secondary'],
+      options: ['default', 'header'],
       control: {
         type: 'select',
       },
     },
-    outline: {
-      control: 'boolean',
-    },
-    light: {
-      control: 'boolean',
-    },
     'state-first-step': {
       options: ['default', 'current', 'completed'],
       control: {
@@ -60,8 +54,6 @@ export 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`,
@@ -72,7 +64,7 @@ export default {
 };
 
 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'])}">
+  <road-progress-indicator-horizontal color="${ifDefined(args.color)}" 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>
@@ -95,7 +87,7 @@ export const Template = (args) => html`
 `;
 
 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'])}">
+  <road-progress-indicator-horizontal color="${ifDefined(args.color)}" 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>
@@ -109,7 +101,7 @@ export const withoutlabel = (args) => html`
 `;
 
 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">
+  <road-progress-indicator-horizontal color="default" 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>
@@ -131,8 +123,8 @@ export const primary = (args) => html`
   </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">
+export const header = (args) => html`
+  <road-progress-indicator-horizontal color="header" 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>
@@ -155,7 +147,7 @@ export const secondary = (args) => html`
 `;
 
 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">
+  <road-progress-indicator-horizontal color="header" 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>
@@ -176,26 +168,3 @@ export const stepcompleted = (args) => html`
     </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/{vertical-stepper/vertical-stepper.css → progress-indicator-vertical/progress-indicator-vertical.css}

@@ -1,5 +1,5 @@
 /*
- * Vertical Stepper
+ * Progress Indicator Vertical
  *
  * Index
  * - Item
@@ -16,7 +16,7 @@
 /* VERTICAL STEPPER
  -------------------- */
 
-.vertical-stepper {
+.progress-indicator-vertical {
   display: flex;
   flex-direction: column;
   padding-left: 0;

package/dist/collection/components/{vertical-stepper/vertical-stepper.js → progress-indicator-vertical/progress-indicator-vertical.js}

@@ -3,28 +3,27 @@ import { Host, h } from '@stencil/core';
  * @slot  - content of the stepper item, it should be road-vertical-stepper-item elements.
  *
  * if the state of the step is completed add the class `completed` on the road-vertical-stepper-item
- * `<road-icon name="check-small" class="d-block" color="white"></road-icon>` by default.
- * `<road-icon name="check-small" class="d-block" color="secondary"></road-icon>` if is outline.
- * `<road-icon name="check-small" class="d-block" color="defaut"></road-icon>` if the color is secondary.
- * `<road-icon name="check-small" class="d-block" color="warning"></road-icon>` if the color is secondary and outline.
+ *
+ * if the state of the step is in-progress add the class `in-progress` on the road-vertical-stepper-item
  *
  * if the state of the step is current add the class `current` on the road-vertical-stepper-item
-
+ *
+ * `<road-icon name="check-small" class="d-block" style="color: currentColor;"></road-icon>`
  */
-export class VerticalStepper {
+export class ProgressIndicatorVertical {
   render() {
     return (h(Host, null, h("nav", null, h("ul", null, h("slot", null)))));
   }
-  static get is() { return "road-vertical-stepper"; }
+  static get is() { return "road-progress-indicator-vertical"; }
   static get encapsulation() { return "shadow"; }
   static get originalStyleUrls() {
     return {
-      "$": ["vertical-stepper.css"]
+      "$": ["progress-indicator-vertical.css"]
     };
   }
   static get styleUrls() {
     return {
-      "$": ["vertical-stepper.css"]
+      "$": ["progress-indicator-vertical.css"]
     };
   }
 }

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"]
+    };
+  }
+}