@roadtrip/components 3.5.0 → 3.7.0

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@roadtrip/components",
-  "version": "3.5.0",
+  "version": "3.7.0",
   "description": "Web Component library for Roadtrip Design System",
   "license": "Apache-2.0",
   "homepage": "https://gitlab.com/mobivia-design/roadtrip/components",

package/dist/cjs/road-vertical-stepper-item.cjs.entry.js

@@ -1,19 +0,0 @@
-'use strict';
-
-Object.defineProperty(exports, '__esModule', { value: true });
-
-const index = require('./index-a2306350.js');
-
-const verticalStepperItemCss = "road-vertical-stepper-item{display:flex;flex-direction:row;justify-content:flex-start;min-height:65px}.vertical-stepper-item-content{display:inline-block;margin-left:1rem}road-vertical-stepper-item:not(.completed) .vertical-stepper-link{cursor:not-allowed}.vertical-stepper-link{position:relative;z-index:1;display:flex}.vertical-stepper-icon{display:inline-flex;align-items:center;justify-content:center;width:2rem;height:2rem;font-size:var(--road-button-medium);font-weight:700;color:var(--road-on-surface-disabled);background:var(--road-surface-inverse);border-radius:50%;fill:currentColor}.vertical-stepper-line{position:absolute;top:32px;left:15px;z-index:-1;height:calc(100% - 32px);border-left:2px solid var(--road-surface-disabled)}road-vertical-stepper-item:last-child .vertical-stepper-line{border-left:0}.stepper-outline .vertical-stepper-icon,.stepper-secondary-outline .vertical-stepper-icon{color:var(--road-on-surface-disabled);background:var(--road-surface);border:2px solid var(--road-surface-disabled)}.stepper-outline-light .vertical-stepper-icon,.stepper-secondary-outline-light .vertical-stepper-icon{color:var(--road-on-surface-disabled);background:none;border:2px solid var(--road-surface-disabled);fill:currentColor}.vertical-stepper-title{display:block;font-size:var(--road-body-small);font-weight:700;color:var(--road-on-surface)}.vertical-stepper-description{display:block;margin:0;font-size:var(--road-label-small);font-weight:400;color:var(--road-on-surface-weak)}.completed:not(:last-child)::after{background:var(--road-primary)}.vertical-stepper-secondary .completed:not(:last-child) .vertical-stepper-line,.vertical-stepper-secondary-outline .completed:not(:last-child) .vertical-stepper-line,.vertical-stepper-secondary-outline-light .completed:not(:last-child) .vertical-stepper-line{background:var(--road-secondary)}.completed .vertical-stepper-icon,.current .vertical-stepper-icon{width:2rem;height:2rem;color:var(--road-on-primary);background:var(--road-primary);border:0}.completed .vertical-stepper-line{border-left:2px solid var(--road-primary)}.stepper-secondary.completed .vertical-stepper-line,.stepper-secondary-outline.completed .vertical-stepper-line,.stepper-secondary-outline-light.completed .vertical-stepper-line{border-left:2px solid var(--road-secondary)}.stepper-outline.completed .vertical-stepper-icon{align-items:baseline;color:var(--road-primary);background:var(--road-surface);border:2px solid var(--road-primary)}.stepper-secondary.stepper-outline.completed .vertical-stepper-icon{color:var(--road-secondary);background:var(--road-surface);border:2px solid var(--road-secondary)}.stepper-outline-light.completed .vertical-stepper-icon{align-items:baseline;color:var(--road-primary);background:none;border:2px solid var(--road-primary)}.stepper-secondary.completed .vertical-stepper-icon{color:var(--road-on-secondary);background:var(--road-secondary);border:0}.stepper-secondary.stepper-outline-light.completed .vertical-stepper-icon{color:var(--road-secondary);background:none;border:2px solid var(--road-secondary)}.stepper-secondary.current .vertical-stepper-icon{color:var(--road-on-secondary);background:var(--road-secondary)}.stepper-secondary-outline.current .vertical-stepper-icon{color:var(--road-on-secondary);background:var(--road-secondary)}.stepper-secondary-outline-light.current .vertical-stepper-icon{color:var(--road-on-secondary);background:var(--road-secondary)}.current .vertical-stepper-title{font-weight:700;color:var(--road-on-surface)}";
-
-const VerticalStepperItem = class {
-  constructor(hostRef) {
-    index.registerInstance(this, hostRef);
-  }
-  render() {
-    return (index.h(index.Host, null, index.h("slot", null)));
-  }
-};
-VerticalStepperItem.style = verticalStepperItemCss;
-
-exports.road_vertical_stepper_item = VerticalStepperItem;

package/dist/cjs/road-vertical-stepper.cjs.entry.js

@@ -1,19 +0,0 @@
-'use strict';
-
-Object.defineProperty(exports, '__esModule', { value: true });
-
-const index = require('./index-a2306350.js');
-
-const verticalStepperCss = ":host{display:block}.vertical-stepper{display:flex;flex-direction:column;padding-left:0;list-style:none}";
-
-const VerticalStepper = class {
-  constructor(hostRef) {
-    index.registerInstance(this, hostRef);
-  }
-  render() {
-    return (index.h(index.Host, null, index.h("nav", null, index.h("ul", null, index.h("slot", null)))));
-  }
-};
-VerticalStepper.style = verticalStepperCss;
-
-exports.road_vertical_stepper = VerticalStepper;

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>`,
-};
-