@roadtrip/components 2.24.1 → 2.27.0

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

@@ -1,108 +1,216 @@
 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: 'Modals/Drawer',
   component: 'road-drawer',
   parameters: {
-    docs: {
-      inlineStories: false,
-      iframeHeight: '600px',
+    layout: 'fullscreen',
+    backgrounds: {
+      default: 'grey',
     },
     actions: {
       handles: ['open', 'close', 'back'],
     },
   },
-};
-
-export const Playground = (args) => html`
-<road-drawer 
-  is-open="${args['is-open']}" 
-  position="${args.position}" 
-  has-back-icon="${args['has-back-icon']}" 
-  back-text="${ifDefined(args['back-text'])}" 
-  has-close-icon="${args['has-close-icon']}" 
-  has-inverse-header="${args['has-inverse-header']}" 
-  drawer-width="${args['drawer-width']}" 
-  drawer-title="${ifDefined(args['drawer-title'])}" 
-  style="--back-chevron-color: ${args['--back-chevron-color']}"
-></road-drawer>
-`;
-Playground.args = {
-  'drawer-width': '480',
-  'has-back-icon': false,
-  'has-close-icon': true,
-  'has-inverse-header': false,
-  'is-open': true,
-  position: 'left',
-};
-Playground.argTypes = {
-  'is-open': {
-    control: 'boolean',
-  },
-  'has-back-icon': {
-    control: 'boolean',
-  },
-  'back-text': {
-    control: 'text',
-  },
-  'has-close-icon': {
-    control: 'boolean',
-  },
-  'has-inverse-header': {
-    control: 'boolean',
-  },
-  position: {
-    options: ['left', 'bottom', 'right'],
-    control: {
-      type: 'radio',
+  argTypes: {
+    'is-open': {
+      control: 'boolean',
+    },
+    'has-back-icon': {
+      control: 'boolean',
+    },
+    'back-text': {
+      control: 'text',
+    },
+    'has-close-icon': {
+      control: 'boolean',
+    },
+    'has-inverse-header': {
+      control: 'boolean',
+    },
+    position: {
+      options: ['left', 'bottom', 'right'],
+      control: {
+        type: 'radio',
+      },
+    },
+    'drawer-width': {
+      control: 'number',
+      min: 0,
+    },
+    'drawer-title': {
+      control: 'text',
+    },
+    mode: {
+      options: ['light', 'dark'],
+      control: {
+        type: null,
+      },
+    },
+    'title': {
+      control: 'text',
+    },
+    ' ': {
+      control: 'text',
+    },
+    open: {
+      control: {
+        type: null,
+      },
+    },
+    close: {
+      control: {
+        type: null,
+      },
+    },
+    back: {
+      control: {
+        type: null,
+      },
+    },
+    '--background': {
+      table: {
+        defaultValue: { summary: 'var(--white)' },
+      },
+      control: {
+        type: null,
+      },
+    },
+    '--color': {
+      table: {
+        defaultValue: { summary: 'var(--text)' },
+      },
+      control: {
+        type: null,
+      },
+    },
+    '--header-icon': {
+      table: {
+        defaultValue: { summary: 'var(--icon)' },
+      },
+      control: {
+        type: null,
+      },
+    },
+    '--header-color': {
+      table: {
+        defaultValue: { summary: 'var(--text)' },
+      },
+      control: {
+        type: null,
+      },
+    },
+    '--header-background': {
+      table: {
+        defaultValue: { summary: 'var(--white)' },
+      },
+      control: {
+        type: null,
+      },
+    },
+    '--header-delimiter': {
+      table: {
+        defaultValue: { summary: '0' },
+      },
+      control: {
+        type: null,
+      },
+    },
+    '--back-chevron-color': {
+      table: {
+        defaultValue: { summary: 'var(--icon)' },
+      },
+      control: {
+        type: null,
+      },
+    },
+    '--max-height': {
+      table: {
+        defaultValue: { summary: 'auto' },
+      },
+      control: {
+        type: null,
+      },
+    },
+    '--z-index': {
+      table: {
+        defaultValue: { summary: '10' },
+      },
+      control: {
+        type: null,
+      },
     },
   },
-  'drawer-width': {
-    control: 'number',
-    min: 0,
-  },
-  'drawer-title': {
-    control: 'text',
-  },
-  '--back-chevron-color': {
-    control: 'color',
+  args: {
+    'is-open': true,
+    position: null,
+    'drawer-width': null,
+    'has-inverse-header': null,
+    'has-back-icon': null,
+    'has-close-icon': undefined,
   },
 };
 
-export const HeaderDefault = () => html`
-<road-drawer is-open position="left" drawer-width="360"></road-drawer>
+const Template = (args) => html`
+<road-drawer 
+  is-open="${ifDefined(args['is-open'])}" 
+  position="${ifDefined(args.position)}" 
+  has-back-icon="${ifDefined(args['has-back-icon'])}" 
+  back-text="${ifDefined(args['back-text'])}" 
+  has-close-icon="${ifDefined(args['has-close-icon'])}" 
+  has-inverse-header="${ifDefined(args['has-inverse-header'])}" 
+  drawer-width="${ifDefined(args['drawer-width'])}" 
+  drawer-title="${ifDefined(args['drawer-title'])}"
+  mode="${ifDefined(args.mode)}"
+>
+  ${unsafeHTML(args['title'])}
+  ${unsafeHTML(args[' '])}
+</road-drawer>
 `;
 
-export const withDelimiter = () => html`
-<road-drawer is-open position="left" drawer-width="360" style="--header-delimiter: 1px;"></road-drawer>
-`;
+export const Playground = Template.bind({});
 
-export const HeaderInverse = () => html`
-<road-drawer is-open position="right" drawer-width="480" has-inverse-header drawer-title="Drawer title"></road-drawer>
-`;
+export const HeaderInverse = Template.bind({});
+HeaderInverse.args = {
+  'is-open': true,
+  position: 'right',
+  'drawer-width': 480,
+  'drawer-title': 'Drawer title',
+  'has-inverse-header': true,
+};
 
-export const WithBackButton = () => html`
-<road-drawer is-open position="right" drawer-width="480" has-inverse-header has-back-icon drawer-title="Drawer title"></road-drawer>
-`;
+export const WithBackButton = Template.bind({});
+WithBackButton.args = {
+  'is-open': true,
+  position: 'right',
+  'drawer-width': 480,
+  'drawer-title': 'Drawer title',
+  'has-inverse-header': true,
+  'has-back-icon': true,
+};
 
-export const customTitle = () => html`
-<road-drawer is-open position="right" drawer-width="480">
-  <div slot="title" class="d-flex align-items-center">
+export const customTitle = Template.bind({});
+customTitle.args = {
+  'is-open': true,
+  position: 'right',
+  'drawer-width': 480,
+  title: `<div slot="title" class="d-flex align-items-center">
     <road-icon name="key" color="secondary" class="mr-16"></road-icon>
     <road-text color="secondary">618</road-text>
     <road-icon name="multi-service-outline" color="secondary" class="ml-16"></road-icon>
-  </div>
-</road-drawer>
-`;
+  </div>`,
+};
 
-export const bottomDrawer = () => html`
-<road-drawer is-open position="bottom">
-  <strong slot="title">Contact by SMS</strong>
-  <div class="bg-light p-16">
+export const bottomDrawer = Template.bind({});
+bottomDrawer.args = {
+  'is-open': true,
+  position: 'bottom',
+  title: `<strong slot="title">Contact by SMS</strong>`,
+  ' ': `<div class="bg-light p-16">
     <road-input label="Phone Number*" type="tel"></road-input>
     <road-button color="secondary" expand class="mb-8">Confirm</road-button>
     <p class="text-content mb-0">*required fields</p>
-  </div>
-</road-drawer>
-`;
+  </div>`,
+};

package/dist/collection/components/dropdown/dropdown.js

@@ -6,7 +6,7 @@ import { Component, h, Prop } from '@stencil/core';
 export class Dropdown {
   constructor() {
     /**
-     * Set open to true to show the dropdown menu.
+     * Set to `true` to open the dropdown menu and to `false` to close it.
      */
     this.isOpen = false;
     /**
@@ -44,7 +44,7 @@ export class Dropdown {
       "optional": false,
       "docs": {
         "tags": [],
-        "text": "Set open to true to show the dropdown menu."
+        "text": "Set to `true` to open the dropdown menu and to `false` to close it."
       },
       "attribute": "is-open",
       "reflect": false,

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

@@ -1,18 +1,36 @@
 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: 'Expand/Dropdown',
   component: 'road-dropdown',
-};
-
-export const Playground = (args) => html`
-<road-dropdown is-open=${args['is-open']}>
-  <div class="d-flex align-items-center justify-content-end pt-16 pb-16">
-    <road-button color="default" size="sm" class="mb-0">
-      <road-icon name="navigation-more"></road-icon>
-    </road-button>
-  </div>
-  <road-list slot="list">
+  argTypes: {
+    'is-open': {
+      control: 'boolean',
+    },
+    ' ': {
+      control: {
+        type: null,
+      },
+    },
+    list: {
+      control: {
+        type: 'text',
+      },
+    },
+    '--margin-top': {
+      table: {
+        defaultValue: { summary: '0.5rem' },
+      },
+      control: {
+        type: null,
+      },
+    },
+  },
+  args: {
+    'is-open': true,
+    list: `<road-list slot="list">
     <road-item button>
       <road-icon slot="start" name="picture" size="md"></road-icon>
       <road-label>
@@ -37,14 +55,17 @@ export const Playground = (args) => html`
         Label
       </road-label>
     </road-item>
-  </road-list>
-<road-dropdown>
-`;
-Playground.args = {
-  'is-open': true,
-};
-Playground.argTypes = {
-  'is-open': {
-    control: 'boolean',
+  </road-list>`,
   },
-};
+};
+
+export const Playground = (args) => html`
+<road-dropdown is-open=${ifDefined(args['is-open'])}>
+  <div class="d-flex align-items-center justify-content-end pt-16 pb-16">
+    <road-button color="default" size="sm" class="mb-0">
+      <road-icon name="navigation-more"></road-icon>
+    </road-button>
+  </div>
+  ${unsafeHTML(args.list)}
+</road-dropdown>
+`;

package/dist/collection/components/duration/duration.css

@@ -0,0 +1,31 @@
+:host {
+  display: block;
+}
+
+road-drawer {
+  --background: var(--background-second);
+}
+
+.duration-values {
+  flex-wrap: nowrap;
+  width: 100%;
+  padding: 2.625rem 0 2.625rem 3rem;
+  scroll-snap-type: x proximity;
+  overflow: scroll;
+}
+
+.duration-values > road-col:first-child {
+  scroll-snap-align: center;
+}
+
+.duration-values > road-col:not(:first-child) {
+  scroll-snap-align: start;
+}
+
+road-card {
+  --margin-bottom: 0;
+}
+
+road-card::part(native) {
+  padding: 1rem;
+}

package/dist/collection/components/duration/duration.js

@@ -0,0 +1,212 @@
+import { Component, Element, Event, h, Listen, Method, Prop } from '@stencil/core';
+export class Duration {
+  constructor() {
+    /**
+     * Set isOpen property to true to open the duration widget
+     */
+    this.isOpen = false;
+    /**
+     * title of the widget
+     */
+    this.header = 'duration';
+    /**
+     * The minimum value, which must not be greater than its maximum (max attribute) value in minutes.
+     */
+    this.min = 15;
+    /**
+     * The maximum value, which must not be less than its minimum (min attribute) value in minutes.
+     */
+    this.max = 300;
+    /**
+     * Works with the min and max attributes to limit the increments at which a value can be set in minutes.
+     */
+    this.step = 15;
+  }
+  handleClick(event) {
+    this.roadselected.emit({
+      value: event.detail.value.toString(),
+      label: event.detail.label,
+    });
+    this.close();
+  }
+  /**
+   * Open the widget
+   */
+  async open() {
+    this.isOpen = true;
+  }
+  /**
+   * Close the widget
+   */
+  async close() {
+    this.isOpen = false;
+  }
+  render() {
+    return (h("road-drawer", { "is-open": this.isOpen, position: "bottom", "drawer-title": this.header },
+      h("road-grid", null,
+        h("road-row", { class: "duration-values" }, Array(Math.floor((this.max - this.min) / this.step) + 1).fill(this.min).map(((item, index) => (item + index * this.step))).map(item => h("road-col", { class: "col-3 col-md-2" },
+          h("road-card", { button: true, value: item },
+            h("road-label", null,
+              Math.floor(item / 60).toLocaleString("en-GB", { minimumIntegerDigits: 2, useGrouping: false }),
+              ":",
+              (item % 60).toLocaleString("en-GB", { minimumIntegerDigits: 2, useGrouping: false })))))))));
+  }
+  static get is() { return "road-duration"; }
+  static get encapsulation() { return "shadow"; }
+  static get originalStyleUrls() { return {
+    "$": ["duration.css"]
+  }; }
+  static get styleUrls() { return {
+    "$": ["duration.css"]
+  }; }
+  static get properties() { return {
+    "isOpen": {
+      "type": "boolean",
+      "mutable": true,
+      "complexType": {
+        "original": "boolean",
+        "resolved": "boolean",
+        "references": {}
+      },
+      "required": false,
+      "optional": false,
+      "docs": {
+        "tags": [],
+        "text": "Set isOpen property to true to open the duration widget"
+      },
+      "attribute": "is-open",
+      "reflect": false,
+      "defaultValue": "false"
+    },
+    "header": {
+      "type": "string",
+      "mutable": false,
+      "complexType": {
+        "original": "string",
+        "resolved": "string",
+        "references": {}
+      },
+      "required": false,
+      "optional": false,
+      "docs": {
+        "tags": [],
+        "text": "title of the widget"
+      },
+      "attribute": "header",
+      "reflect": false,
+      "defaultValue": "'duration'"
+    },
+    "min": {
+      "type": "number",
+      "mutable": false,
+      "complexType": {
+        "original": "number",
+        "resolved": "number",
+        "references": {}
+      },
+      "required": false,
+      "optional": false,
+      "docs": {
+        "tags": [],
+        "text": "The minimum value, which must not be greater than its maximum (max attribute) value in minutes."
+      },
+      "attribute": "min",
+      "reflect": false,
+      "defaultValue": "15"
+    },
+    "max": {
+      "type": "number",
+      "mutable": false,
+      "complexType": {
+        "original": "number",
+        "resolved": "number",
+        "references": {}
+      },
+      "required": false,
+      "optional": false,
+      "docs": {
+        "tags": [],
+        "text": "The maximum value, which must not be less than its minimum (min attribute) value in minutes."
+      },
+      "attribute": "max",
+      "reflect": false,
+      "defaultValue": "300"
+    },
+    "step": {
+      "type": "number",
+      "mutable": false,
+      "complexType": {
+        "original": "number",
+        "resolved": "number",
+        "references": {}
+      },
+      "required": false,
+      "optional": false,
+      "docs": {
+        "tags": [],
+        "text": "Works with the min and max attributes to limit the increments at which a value can be set in minutes."
+      },
+      "attribute": "step",
+      "reflect": false,
+      "defaultValue": "15"
+    }
+  }; }
+  static get events() { return [{
+      "method": "roadselected",
+      "name": "roadselected",
+      "bubbles": true,
+      "cancelable": true,
+      "composed": true,
+      "docs": {
+        "tags": [],
+        "text": "Emitt the value and label of the selected option."
+      },
+      "complexType": {
+        "original": "{\n    value: string | undefined | null,\n    label: string\n  }",
+        "resolved": "{ value: string | null | undefined; label: string; }",
+        "references": {}
+      }
+    }]; }
+  static get methods() { return {
+    "open": {
+      "complexType": {
+        "signature": "() => Promise<void>",
+        "parameters": [],
+        "references": {
+          "Promise": {
+            "location": "global"
+          }
+        },
+        "return": "Promise<void>"
+      },
+      "docs": {
+        "text": "Open the widget",
+        "tags": []
+      }
+    },
+    "close": {
+      "complexType": {
+        "signature": "() => Promise<void>",
+        "parameters": [],
+        "references": {
+          "Promise": {
+            "location": "global"
+          }
+        },
+        "return": "Promise<void>"
+      },
+      "docs": {
+        "text": "Close the widget",
+        "tags": []
+      }
+    }
+  }; }
+  static get elementRef() { return "el"; }
+  static get listeners() { return [{
+      "name": "roadcardclick",
+      "method": "handleClick",
+      "target": undefined,
+      "capture": false,
+      "passive": false
+    }]; }
+}