@roadtrip/components 2.46.0 → 2.48.0

package/dist/collection/components/progress/progress.stories.js

@@ -5,13 +5,15 @@ export default {
   component: 'road-progress',
 };
 
-export const Playground = ({ value, color, label }) => html`
-  <road-progress value="${value}" color="${color}" label="${label}"></road-progress>
+export const Playground = ({ value, color, label, showstep, numbersteps }) => html`
+  <road-progress value="${value}" color="${color}" label="${label}" showstep="${showstep}" numbersteps="${numbersteps}"></road-progress>
 `;
 Playground.args = {
   value: 25,
   color: 'primary',
   label: '',
+  showstep:'false',
+  numbersteps: '4',
 };
 Playground.argTypes = {
   value: {
@@ -21,9 +23,20 @@ Playground.argTypes = {
       max: '100',
     },
   },
+  numbersteps: {
+    options: ['4', '5'],
+    control: {
+      type: 'select',
+      min: '4',
+      max: '5',
+    },
+  },
   label: {
     control: 'text',
   },
+  showstep: {
+    control: 'boolean',
+  },
   color: {
     options: ['primary', 'secondary', 'info', 'success', 'warning', 'danger'],
     control: {
@@ -85,21 +98,21 @@ export const color = () => html`
 `;
 
 export const Label = () => html`
-<road-progress value="0" label="label"></road-progress>
+<road-progress value="0" label="label" showstep="true"></road-progress>
 
 <br>
 
-<road-progress value="25" label="label"></road-progress>
+<road-progress value="25" label="label" showstep="true"></road-progress>
 
 <br>
 
-<road-progress value="50" label="label"></road-progress>
+<road-progress value="50" label="label" showstep="true"></road-progress>
 
 <br>
 
-<road-progress value="75" label="label"></road-progress>
+<road-progress value="75" label="label" showstep="true"></road-progress>
 
 <br>
 
-<road-progress value="100" label="label"></road-progress>
+<road-progress value="100" label="label" showstep="true"></road-progress>
 `;

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

@@ -44,6 +44,15 @@
   border-radius: 0 999em 999em 0;
 }
 
+/**
+ * Small
+ */
+
+:host(.btn-sm) {
+  height: 2rem;
+  font-size: 0.875rem;
+}
+
 /**
  * Active state
  */

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