@roadtrip/components 3.5.0 → 3.6.0

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

@@ -1,542 +0,0 @@
-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>`,
-};
-