@roadtrip/components 2.47.0 → 2.48.0

package/dist/collection/components/segmented-button/segmented-button.js

@@ -5,6 +5,10 @@ import { Host, h } from '@stencil/core';
  */
 export class SegmentedButton {
   constructor() {
+    /**
+      * The Segmented buttons size.
+      */
+    this.size = 'md';
     /**
      * The selected tab component
      */
@@ -47,8 +51,10 @@ export class SegmentedButton {
   }
   render() {
     const { tabIndex, selected, tab } = this;
+    const sizeClass = this.size !== undefined ? `btn-${this.size}` : '';
     return (h(Host, { onClick: this.onClick, onKeyup: this.onKeyUp, role: "tab", tabindex: tabIndex, "aria-selected": selected ? 'true' : null, id: tab !== undefined ? `tab-button-${tab}` : null, class: {
         'tab-selected': selected,
+        [`${sizeClass}`]: true,
       } }, h("button", { type: "button", tabIndex: -1, class: "button-native", part: "native" }, h("slot", null))));
   }
   static get is() { return "road-segmented-button"; }
@@ -65,6 +71,24 @@ export class SegmentedButton {
   }
   static get properties() {
     return {
+      "size": {
+        "type": "string",
+        "mutable": false,
+        "complexType": {
+          "original": "'sm' | 'md'",
+          "resolved": "\"md\" | \"sm\" | undefined",
+          "references": {}
+        },
+        "required": false,
+        "optional": true,
+        "docs": {
+          "tags": [],
+          "text": "The Segmented buttons size."
+        },
+        "attribute": "size",
+        "reflect": false,
+        "defaultValue": "'md'"
+      },
       "selected": {
         "type": "boolean",
         "mutable": true,

package/dist/collection/components/segmented-buttons/segmented-buttons.stories.js

@@ -1,4 +1,5 @@
 import { html } from 'lit-html';
+import { ifDefined } from 'lit-html/directives/if-defined';
 import { unsafeHTML } from 'lit-html/directives/unsafe-html.js';
 
 export default {
@@ -100,4 +101,24 @@ Playground.args = {
   </road-tab>`,
 };
 
+export const Small = Template.bind({});
+Small.args = {
+  top: `<road-segmented-button-bar slot="top" selected-tab="tab-description">
+    <road-segmented-button tab="tab-description" size="sm">
+      Description
+    </road-segmented-button>
+
+    <road-segmented-button tab="tab-services" size="sm">
+      Services
+    </road-segmented-button>
+    </road-segmented-button-bar>`,
+  ' ': `<road-tab tab="tab-description">
+    Description
+  </road-tab>
+
+  <road-tab tab="tab-services">
+    Services
+  </road-tab>`,
+};
+
 

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

@@ -0,0 +1,25 @@
+/*
+ * Vertical Stepper
+ *
+ * Index
+ * - Item
+ * - Link
+ * - Icon
+ * - Title
+ * - Completed
+ */
+
+:host {
+  display: block;
+}
+
+/* VERTICAL STEPPER
+ -------------------- */
+
+.vertical-stepper {
+  display: flex;
+  flex-direction: column;
+  padding-left: 0;
+  list-style: none;
+}
+

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