@roadtrip/components 2.47.0 → 2.49.0

package/dist/collection/components/vertical-stepper/vertical-stepper.js

@@ -0,0 +1,30 @@
+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 current add the class `current` on the road-vertical-stepper-item
+
+ */
+export class VerticalStepper {
+  render() {
+    return (h(Host, null, h("nav", null, h("ul", null, h("slot", null)))));
+  }
+  static get is() { return "road-vertical-stepper"; }
+  static get encapsulation() { return "shadow"; }
+  static get originalStyleUrls() {
+    return {
+      "$": ["vertical-stepper.css"]
+    };
+  }
+  static get styleUrls() {
+    return {
+      "$": ["vertical-stepper.css"]
+    };
+  }
+}

package/dist/collection/components/vertical-stepper/vertical-stepper.stories.js

@@ -0,0 +1,542 @@
+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/Vertical Stepper',
+  component: 'road-vertical-stepper',
+  subcomponents: {
+    'road-vertical-stepper-item': 'road-vertical-stepper-item',
+  },
+  argTypes: {
+    ' ': {
+      control: 'text',
+    },
+  },
+  args: {
+    ' ': `<road-vertical-stepper-item class="completed">
+    <a class="vertical-stepper-link">
+      <span class="vertical-stepper-icon">
+      <road-icon name="check-small" class="d-block" color="white"></road-icon>
+      </span>
+      <span class="vertical-stepper-line"></span>
+    </a>
+    <div class="vertical-stepper-item-content">
+      <span class="vertical-stepper-title">
+        <road-label>Label</road-label>
+      </span>
+      <div class="vertical-stepper-description">Description</div>
+    </div>
+  </road-vertical-stepper-item>
+  <road-vertical-stepper-item class="current">
+    <a class="vertical-stepper-link">
+      <span class="vertical-stepper-icon">
+      2
+      </span>
+      <span class="vertical-stepper-line"></span>
+    </a>
+    <div class="vertical-stepper-item-content">
+      <span class="vertical-stepper-title">
+      <road-label>Label</road-label>
+      </span>
+      <div class="vertical-stepper-description">Description</div>
+    </div>
+  </road-vertical-stepper-item>
+  <road-vertical-stepper-item>
+  <a class="vertical-stepper-link">
+    <span class="vertical-stepper-icon">
+      3
+    </span>
+    <span class="vertical-stepper-line"></span>
+  </a>
+  <div class="vertical-stepper-item-content">
+    <span class="vertical-stepper-title">
+      <road-label>Label</road-label>
+    </span>
+    <div class="vertical-stepper-description">Description</div>
+    </div>
+</road-vertical-stepper-item>
+<road-vertical-stepper-item>
+<a class="vertical-stepper-link">
+  <span class="vertical-stepper-icon">
+    4
+  </span>
+  <span class="vertical-stepper-line"></span>
+</a>
+<div class="vertical-stepper-item-content">
+  <span class="vertical-stepper-title">
+    <road-label>Label</road-label>
+  </span>
+  <div class="vertical-stepper-description">Description</div>
+  </div>
+</road-vertical-stepper-item>
+<road-vertical-stepper-item>
+<a class="vertical-stepper-link">
+  <span class="vertical-stepper-icon">
+    5
+  </span>
+  <span class="vertical-stepper-line"></span>
+</a>
+<div class="vertical-stepper-item-content">
+  <span class="vertical-stepper-title">
+    <road-label>Label</road-label>
+  </span>
+  <div class="vertical-stepper-description">Description</div>
+  </div>
+</road-vertical-stepper-item>
+`,
+  },
+};
+
+export const Template = (args) => html`
+  <road-vertical-stepper 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-vertical-stepper>
+`;
+
+export const Primary = Template.bind({});
+Primary.args = {
+  ' ': `<road-vertical-stepper-item class="completed">
+  <a class="vertical-stepper-link">
+    <span class="vertical-stepper-icon">
+    <road-icon name="check-small" class="d-block" color="white"></road-icon>
+    </span>
+    <span class="vertical-stepper-line"></span>
+  </a>
+  <div class="vertical-stepper-item-content">
+    <span class="vertical-stepper-title">
+      <road-label>Label</road-label>
+    </span>
+    <div class="vertical-stepper-description">Description</div>
+  </div>
+</road-vertical-stepper-item>
+<road-vertical-stepper-item class="current">
+  <a class="vertical-stepper-link">
+    <span class="vertical-stepper-icon">
+    2
+    </span>
+    <span class="vertical-stepper-line"></span>
+  </a>
+  <div class="vertical-stepper-item-content">
+    <span class="vertical-stepper-title">
+    <road-label>Label</road-label>
+    </span>
+    <div class="vertical-stepper-description">Description</div>
+  </div>
+</road-vertical-stepper-item>
+<road-vertical-stepper-item>
+<a class="vertical-stepper-link">
+  <span class="vertical-stepper-icon">
+    3
+  </span>
+  <span class="vertical-stepper-line"></span>
+</a>
+<div class="vertical-stepper-item-content">
+  <span class="vertical-stepper-title">
+    <road-label>Label</road-label>
+  </span>
+  <div class="vertical-stepper-description">Description</div>
+  </div>
+</road-vertical-stepper-item>
+<road-vertical-stepper-item>
+<a class="vertical-stepper-link">
+<span class="vertical-stepper-icon">
+  4
+</span>
+<span class="vertical-stepper-line"></span>
+</a>
+<div class="vertical-stepper-item-content">
+<span class="vertical-stepper-title">
+  <road-label>Label</road-label>
+</span>
+<div class="vertical-stepper-description">Description</div>
+</div>
+</road-vertical-stepper-item>
+<road-vertical-stepper-item>
+<a class="vertical-stepper-link">
+<span class="vertical-stepper-icon">
+  5
+</span>
+<span class="vertical-stepper-line"></span>
+</a>
+<div class="vertical-stepper-item-content">
+<span class="vertical-stepper-title">
+  <road-label>Label</road-label>
+</span>
+<div class="vertical-stepper-description">Description</div>
+</div>
+</road-vertical-stepper-item>`,
+};
+
+export const Outline = Template.bind({});
+Outline.args = {
+  ' ': `<road-vertical-stepper-item class="completed stepper-outline">
+  <a class="vertical-stepper-link">
+    <span class="vertical-stepper-icon">
+    <road-icon name="check-small" class="d-block" color="secondary"></road-icon>
+    </span>
+    <span class="vertical-stepper-line"></span>
+  </a>
+  <div class="vertical-stepper-item-content">
+    <span class="vertical-stepper-title">
+      <road-label>Label</road-label>
+    </span>
+    <div class="vertical-stepper-description">Description</div>
+  </div>
+</road-vertical-stepper-item>
+<road-vertical-stepper-item class="current">
+  <a class="vertical-stepper-link">
+    <span class="vertical-stepper-icon">
+    2
+    </span>
+    <span class="vertical-stepper-line"></span>
+  </a>
+  <div class="vertical-stepper-item-content">
+    <span class="vertical-stepper-title">
+    <road-label>Label</road-label>
+    </span>
+    <div class="vertical-stepper-description">Description</div>
+  </div>
+</road-vertical-stepper-item>
+<road-vertical-stepper-item class="stepper-outline">
+<a class="vertical-stepper-link">
+  <span class="vertical-stepper-icon">
+    3
+  </span>
+  <span class="vertical-stepper-line"></span>
+</a>
+<div class="vertical-stepper-item-content">
+  <span class="vertical-stepper-title">
+    <road-label>Label</road-label>
+  </span>
+  <div class="vertical-stepper-description">Description</div>
+  </div>
+</road-vertical-stepper-item>
+<road-vertical-stepper-item class="stepper-outline">
+<a class="vertical-stepper-link">
+<span class="vertical-stepper-icon">
+  4
+</span>
+<span class="vertical-stepper-line"></span>
+</a>
+<div class="vertical-stepper-item-content">
+<span class="vertical-stepper-title">
+  <road-label>Label</road-label>
+</span>
+<div class="vertical-stepper-description">Description</div>
+</div>
+</road-vertical-stepper-item>
+<road-vertical-stepper-item class="stepper-outline">
+<a class="vertical-stepper-link">
+<span class="vertical-stepper-icon">
+  5
+</span>
+<span class="vertical-stepper-line"></span>
+</a>
+<div class="vertical-stepper-item-content">
+<span class="vertical-stepper-title">
+  <road-label>Label</road-label>
+</span>
+<div class="vertical-stepper-description">Description</div>
+</div>
+</road-vertical-stepper-item>`,
+};
+
+export const Light = Template.bind({});
+Light.args = {
+  ' ': `<road-vertical-stepper-item class="completed stepper-outline-light">
+  <a class="vertical-stepper-link">
+    <span class="vertical-stepper-icon">
+    <road-icon name="check-small" class="d-block" color="secondary"></road-icon>
+    </span>
+    <span class="vertical-stepper-line"></span>
+  </a>
+  <div class="vertical-stepper-item-content">
+    <span class="vertical-stepper-title">
+      <road-label>Label</road-label>
+    </span>
+    <div class="vertical-stepper-description">Description</div>
+  </div>
+</road-vertical-stepper-item>
+<road-vertical-stepper-item class="current">
+  <a class="vertical-stepper-link">
+    <span class="vertical-stepper-icon">
+    2
+    </span>
+    <span class="vertical-stepper-line"></span>
+  </a>
+  <div class="vertical-stepper-item-content">
+    <span class="vertical-stepper-title">
+    <road-label>Label</road-label>
+    </span>
+    <div class="vertical-stepper-description">Description</div>
+  </div>
+</road-vertical-stepper-item>
+<road-vertical-stepper-item class="stepper-outline-light">
+<a class="vertical-stepper-link">
+  <span class="vertical-stepper-icon">
+    3
+  </span>
+  <span class="vertical-stepper-line"></span>
+</a>
+<div class="vertical-stepper-item-content">
+  <span class="vertical-stepper-title">
+    <road-label>Label</road-label>
+  </span>
+  <div class="vertical-stepper-description">Description</div>
+  </div>
+</road-vertical-stepper-item>
+<road-vertical-stepper-item class="stepper-outline-light">
+<a class="vertical-stepper-link">
+<span class="vertical-stepper-icon">
+  4
+</span>
+<span class="vertical-stepper-line"></span>
+</a>
+<div class="vertical-stepper-item-content">
+<span class="vertical-stepper-title">
+  <road-label>Label</road-label>
+</span>
+<div class="vertical-stepper-description">Description</div>
+</div>
+</road-vertical-stepper-item>
+<road-vertical-stepper-item class="stepper-outline-light">
+<a class="vertical-stepper-link">
+<span class="vertical-stepper-icon">
+  5
+</span>
+<span class="vertical-stepper-line"></span>
+</a>
+<div class="vertical-stepper-item-content">
+<span class="vertical-stepper-title">
+  <road-label>Label</road-label>
+</span>
+<div class="vertical-stepper-description">Description</div>
+</div>
+</road-vertical-stepper-item>`,
+};
+
+
+export const Secondary = Template.bind({});
+Secondary.args = {
+  ' ': `<road-vertical-stepper-item class="completed stepper-secondary">
+  <a class="vertical-stepper-link">
+    <span class="vertical-stepper-icon">
+    <road-icon name="check-small" class="d-block" color="defaut"></road-icon>
+    </span>
+    <span class="vertical-stepper-line"></span>
+  </a>
+  <div class="vertical-stepper-item-content">
+    <span class="vertical-stepper-title">
+      <road-label>Label</road-label>
+    </span>
+    <div class="vertical-stepper-description">Description</div>
+  </div>
+</road-vertical-stepper-item>
+<road-vertical-stepper-item class="current stepper-secondary">
+  <a class="vertical-stepper-link">
+    <span class="vertical-stepper-icon">
+    2
+    </span>
+    <span class="vertical-stepper-line"></span>
+  </a>
+  <div class="vertical-stepper-item-content">
+    <span class="vertical-stepper-title">
+    <road-label>Label</road-label>
+    </span>
+    <div class="vertical-stepper-description">Description</div>
+  </div>
+</road-vertical-stepper-item>
+<road-vertical-stepper-item>
+<a class="vertical-stepper-link">
+  <span class="vertical-stepper-icon">
+    3
+  </span>
+  <span class="vertical-stepper-line"></span>
+</a>
+<div class="vertical-stepper-item-content">
+  <span class="vertical-stepper-title">
+    <road-label>Label</road-label>
+  </span>
+  <div class="vertical-stepper-description">Description</div>
+  </div>
+</road-vertical-stepper-item>
+<road-vertical-stepper-item>
+<a class="vertical-stepper-link">
+<span class="vertical-stepper-icon">
+  4
+</span>
+<span class="vertical-stepper-line"></span>
+</a>
+<div class="vertical-stepper-item-content">
+<span class="vertical-stepper-title">
+  <road-label>Label</road-label>
+</span>
+<div class="vertical-stepper-description">Description</div>
+</div>
+</road-vertical-stepper-item>
+<road-vertical-stepper-item>
+<a class="vertical-stepper-link">
+<span class="vertical-stepper-icon">
+  5
+</span>
+<span class="vertical-stepper-line"></span>
+</a>
+<div class="vertical-stepper-item-content">
+<span class="vertical-stepper-title">
+  <road-label>Label</road-label>
+</span>
+<div class="vertical-stepper-description">Description</div>
+</div>
+</road-vertical-stepper-item>`,
+};
+
+export const SecondaryOutline = Template.bind({});
+SecondaryOutline.args = {
+  ' ': `<road-vertical-stepper-item class="completed stepper-secondary stepper-outline">
+  <a class="vertical-stepper-link">
+    <span class="vertical-stepper-icon">
+    <road-icon name="check-small" class="d-block" color="warning"></road-icon>
+    </span>
+    <span class="vertical-stepper-line"></span>
+  </a>
+  <div class="vertical-stepper-item-content">
+    <span class="vertical-stepper-title">
+      <road-label>Label</road-label>
+    </span>
+    <div class="vertical-stepper-description">Description</div>
+  </div>
+</road-vertical-stepper-item>
+<road-vertical-stepper-item class="current stepper-secondary">
+  <a class="vertical-stepper-link">
+    <span class="vertical-stepper-icon">
+    2
+    </span>
+    <span class="vertical-stepper-line"></span>
+  </a>
+  <div class="vertical-stepper-item-content">
+    <span class="vertical-stepper-title">
+    <road-label>Label</road-label>
+    </span>
+    <div class="vertical-stepper-description">Description</div>
+  </div>
+</road-vertical-stepper-item>
+<road-vertical-stepper-item class="stepper-secondary-outline">
+<a class="vertical-stepper-link">
+  <span class="vertical-stepper-icon">
+    3
+  </span>
+  <span class="vertical-stepper-line"></span>
+</a>
+<div class="vertical-stepper-item-content">
+  <span class="vertical-stepper-title">
+    <road-label>Label</road-label>
+  </span>
+  <div class="vertical-stepper-description">Description</div>
+  </div>
+</road-vertical-stepper-item>
+<road-vertical-stepper-item class="stepper-secondary-outline">
+<a class="vertical-stepper-link">
+<span class="vertical-stepper-icon">
+  4
+</span>
+<span class="vertical-stepper-line"></span>
+</a>
+<div class="vertical-stepper-item-content">
+<span class="vertical-stepper-title">
+  <road-label>Label</road-label>
+</span>
+<div class="vertical-stepper-description">Description</div>
+</div>
+</road-vertical-stepper-item>
+<road-vertical-stepper-item class="stepper-secondary-outline">
+<a class="vertical-stepper-link">
+<span class="vertical-stepper-icon">
+  5
+</span>
+<span class="vertical-stepper-line"></span>
+</a>
+<div class="vertical-stepper-item-content">
+<span class="vertical-stepper-title">
+  <road-label>Label</road-label>
+</span>
+<div class="vertical-stepper-description">Description</div>
+</div>
+</road-vertical-stepper-item>`,
+};
+
+export const SecondaryLight = Template.bind({});
+SecondaryLight.args = {
+  ' ': `<road-vertical-stepper-item class="completed stepper-secondary stepper-outline-light">
+  <a class="vertical-stepper-link">
+    <span class="vertical-stepper-icon">
+    <road-icon name="check-small" class="d-block" color="warning"></road-icon>
+    </span>
+    <span class="vertical-stepper-line"></span>
+  </a>
+  <div class="vertical-stepper-item-content">
+    <span class="vertical-stepper-title">
+      <road-label>Label</road-label>
+    </span>
+    <div class="vertical-stepper-description">Description</div>
+  </div>
+</road-vertical-stepper-item>
+<road-vertical-stepper-item class="current stepper-secondary">
+  <a class="vertical-stepper-link">
+    <span class="vertical-stepper-icon">
+    2
+    </span>
+    <span class="vertical-stepper-line"></span>
+  </a>
+  <div class="vertical-stepper-item-content">
+    <span class="vertical-stepper-title">
+    <road-label>Label</road-label>
+    </span>
+    <div class="vertical-stepper-description">Description</div>
+  </div>
+</road-vertical-stepper-item>
+<road-vertical-stepper-item class="stepper-secondary-outline">
+<a class="vertical-stepper-link">
+  <span class="vertical-stepper-icon">
+    3
+  </span>
+  <span class="vertical-stepper-line"></span>
+</a>
+<div class="vertical-stepper-item-content">
+  <span class="vertical-stepper-title">
+    <road-label>Label</road-label>
+  </span>
+  <div class="vertical-stepper-description">Description</div>
+  </div>
+</road-vertical-stepper-item>
+<road-vertical-stepper-item class="stepper-secondary-outline">
+<a class="vertical-stepper-link">
+<span class="vertical-stepper-icon">
+  4
+</span>
+<span class="vertical-stepper-line"></span>
+</a>
+<div class="vertical-stepper-item-content">
+<span class="vertical-stepper-title">
+  <road-label>Label</road-label>
+</span>
+<div class="vertical-stepper-description">Description</div>
+</div>
+</road-vertical-stepper-item>
+<road-vertical-stepper-item class="stepper-secondary-outline">
+<a class="vertical-stepper-link">
+<span class="vertical-stepper-icon">
+  5
+</span>
+<span class="vertical-stepper-line"></span>
+</a>
+<div class="vertical-stepper-item-content">
+<span class="vertical-stepper-title">
+  <road-label>Label</road-label>
+</span>
+<div class="vertical-stepper-description">Description</div>
+</div>
+</road-vertical-stepper-item>`,
+};
+