@roadtrip/components 2.23.0 → 2.25.1

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

@@ -1,93 +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 HeaderInverse = () => html`
-  <road-drawer is-open position="right" drawer-width="480" has-inverse-header drawer-title="Drawer title"></road-drawer>
-`;
+export const Playground = Template.bind({});
 
-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 HeaderInverse = Template.bind({});
+HeaderInverse.args = {
+  'is-open': true,
+  position: 'right',
+  'drawer-width': 480,
+  'drawer-title': 'Drawer title',
+  'has-inverse-header': true,
+};
 
-export const customTitle = () => html`
-  <road-drawer is-open position="right" drawer-width="480">
-    <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>
-`;
+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 = 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>`,
+};
+
+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>`,
+};

package/dist/collection/components/dropdown/dropdown.css

@@ -0,0 +1,63 @@
+/*
+ * Dropdown
+ *
+ * Index
+ * - Dropdown
+ * - Dropdown menu
+ */
+
+/**
+ * @prop --margin-top: Top margin of the menu
+ */
+
+/* DROPDOWN
+ -------------------- */
+
+:host {
+  --margin-top: 0.5rem;
+
+  display: block;
+}
+
+.dropdown {
+  position: relative;
+  font-family: var(--font);
+}
+
+.dropdown summary {
+  display: block;
+  outline: none;
+}
+
+.dropdown summary::-webkit-details-marker { /* remove native arrow */
+  display: none;
+}
+
+/**
+ * Open state
+ */
+
+.dropdown[open] .dropdown-menu {
+  transform: scaleY(1);
+}
+
+/* MENU
+ -------------------- */
+
+.dropdown-menu {
+  position: absolute;
+  right: 0;
+  display: flex;
+  flex-direction: column;
+  min-width: 16.875rem;
+  padding: 0.5rem 0;
+  margin-top: var(--margin-top);
+  color: var(--text);
+  background: var(--white);
+  border: 1px solid var(--border);
+  border-radius: 0.25rem;
+  box-shadow: 0 0.375rem 0.375rem rgba(0, 0, 0, 0.16);
+  transition: transform 0.2s ease-in-out;
+  transform: scaleY(0);
+  transform-origin: 0 0;
+}

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

@@ -0,0 +1,54 @@
+import { Component, h, Prop } from '@stencil/core';
+/**
+ * @slot  - Element how will open the dropdown when clicked
+ * @slot list - List of item values
+ */
+export class Dropdown {
+  constructor() {
+    /**
+     * Set to `true` to open the dropdown menu and to `false` to close it.
+     */
+    this.isOpen = false;
+    /**
+     * Toggle the display when clicking element in slot
+     */
+    this.onClick = () => {
+      this.isOpen = !this.isOpen;
+    };
+  }
+  render() {
+    return (h("details", { class: "dropdown", open: this.isOpen },
+      h("summary", { "aria-expanded": `${this.isOpen}`, tabindex: "0", role: "button", onClick: this.onClick },
+        h("slot", null)),
+      h("div", { class: "dropdown-menu" },
+        h("slot", { name: "list" }))));
+  }
+  static get is() { return "road-dropdown"; }
+  static get encapsulation() { return "shadow"; }
+  static get originalStyleUrls() { return {
+    "$": ["dropdown.css"]
+  }; }
+  static get styleUrls() { return {
+    "$": ["dropdown.css"]
+  }; }
+  static get properties() { return {
+    "isOpen": {
+      "type": "boolean",
+      "mutable": true,
+      "complexType": {
+        "original": "boolean",
+        "resolved": "boolean",
+        "references": {}
+      },
+      "required": false,
+      "optional": false,
+      "docs": {
+        "tags": [],
+        "text": "Set to `true` to open the dropdown menu and to `false` to close it."
+      },
+      "attribute": "is-open",
+      "reflect": false,
+      "defaultValue": "false"
+    }
+  }; }
+}

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

@@ -0,0 +1,71 @@
+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',
+  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>
+        Label
+      </road-label>
+    </road-item>
+    <road-item button>
+      <road-icon slot="start" name="picture" size="md"></road-icon>
+      <road-label>
+      Label
+      </road-label>
+    </road-item>
+    <road-item button>
+      <road-icon slot="start" name="picture" size="md"></road-icon>
+      <road-label>
+      Label
+      </road-label>
+    </road-item>
+    <road-item button>
+      <road-icon slot="start" name="picture" size="md"></road-icon>
+      <road-label>
+        Label
+      </road-label>
+    </road-item>
+  </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/flap/flap.stories.js

@@ -1,45 +1,49 @@
 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/Flap',
   component: 'road-flap',
-};
-
-export const Playground = (args) => html`
-<road-flap color="${args.color}">
-  ${args['']}
-</road-flap>
-`;
-Playground.args = {
-  color: 'promo',
-  '': 'Promo',
-};
-Playground.argTypes = {
-  color: {
-    options: ['promo', 'exclu', 'info', 'ecology'],
-    control: {
-      type: 'select',
+  argTypes: {
+    color: {
+      options: ['promo', 'exclu', 'info', 'ecology'],
+      control: {
+        type: 'select',
+      },
+    },
+    ' ': {
+      control: 'text',
     },
   },
-  '': {
-    control: 'text',
+  args: {
+    color: 'promo',
+    ' ': 'Promo',
   },
 };
 
-export const Colors = () => html`
-<road-flap>
-  Promo
+const Template = (args) => html`
+<road-flap color="${ifDefined(args.color)}">
+  ${unsafeHTML(args[' '])}
 </road-flap>
+`;
 
-<road-flap color="exclu">
-  WEB Only
-</road-flap>
+export const Playground = Template.bind({});
 
-<road-flap color="info">
-  New
-</road-flap>
+export const Exclu = Template.bind({});
+Exclu.args = {
+  color: 'exclu',
+  ' ': 'Web Only',
+};
 
-<road-flap color="ecology">
-  Ecology
-</road-flap>
-`;
+export const Info = Template.bind({});
+Info.args = {
+  color: 'info',
+  ' ': 'New',
+};
+
+export const Ecology = Template.bind({});
+Ecology.args = {
+  color: 'ecology',
+  ' ': 'Ecology',
+};

package/dist/collection/components/grid/grid.js

@@ -1,11 +1,10 @@
-import { Component, Host, h } from '@stencil/core';
+import { Component, h } from '@stencil/core';
 /**
  * @slot  - Content to add row components.
  */
 export class Grid {
   render() {
-    return (h(Host, null,
-      h("slot", null)));
+    return (h("slot", null));
   }
   static get is() { return "road-grid"; }
   static get encapsulation() { return "shadow"; }

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

@@ -4,16 +4,16 @@ export default {
   title: 'Layout/Grid',
   component: 'road-grid',
   subcomponents: {
-    RoadRow: 'road-row',
-    RoadCol: 'road-col'
+    'road-row': 'road-row',
+    'road-col': 'road-col',
   },
   parameters: {
     docs: {
       description: {
         component: 'The grid is a powerful mobile-first flexbox system for building custom layouts. It is composed of three units — a `grid`, `row(s)` and `column(s)`. Columns will expand to fill the row, and will resize to fit additional columns. It is based on a 12 column layout with different breakpoints based on the screen size. The number of columns can be customized using CSS.'
-      }
-    }
-  }
+      },
+    },
+  },
 };
 
 export const Grid = () => html`

package/dist/collection/components/icon/icon.css

@@ -1,3 +1,12 @@
+/*
+ * Icon
+ *
+ * Index
+ * - Sizes
+ * - Colors
+ * - Rotation
+ */
+
 :host {
   box-sizing: content-box;
   display: inline-block;
@@ -13,7 +22,7 @@
   height: 100%;
 }
 
-/* ICON SIZES
+/* SIZES
  -------------------- */
 
 :host(.icon-sm) {
@@ -41,7 +50,7 @@
   height: 4rem;
 }
 
-/* ICON COLORS
+/* COLORS
  -------------------- */
 
 :host(.icon-primary) {
@@ -80,7 +89,7 @@
   color: var(--white);
 }
 
-/* ICON ROTATION
+/* ROTATION
  -------------------- */
 
 :host(.icon-rotate-90) {