@roadtrip/components 2.22.1 → 2.25.0

package/dist/collection/components/dialog/dialog.css

@@ -4,14 +4,13 @@
  * Index
  * - Overlay
  * - Dialog
- * - Dialog content
- * - Dialog header
- * - Dialog close
- * - Dialog body
- * - Dialog title
- * - Dialog description
- * - Dialog footer
- *
+ * - Content
+ * - Header
+ * - Close
+ * - Body
+ * - Title
+ * - Description
+ * - Footer
  */
 
 /**
@@ -82,7 +81,7 @@
   transform: none;
 }
 
-/* DIALOG CONTENT
+/* CONTENT
  -------------------- */
 
 .dialog-content {
@@ -106,7 +105,7 @@
   }
 }
 
-/* DIALOG HEADER
+/* HEADER
  -------------------- */
 
 .dialog-header {
@@ -116,7 +115,7 @@
   height: 3.5rem;
 }
 
-/* DIALOG CLOSE
+/* CLOSE
  -------------------- */
 
 .dialog-close {
@@ -133,6 +132,7 @@
   -webkit-appearance: none;
      -moz-appearance: none;
           appearance: none;
+  -webkit-tap-highlight-color: rgba(0, 0, 0, 0);
 }
 
 .dialog-icon {
@@ -142,7 +142,7 @@
   font-size: 3rem;
 }
 
-/* DIALOG BODY
+/* BODY
  -------------------- */
 
 .dialog-body {
@@ -157,7 +157,7 @@
   }
 }
 
-/* DIALOG TITLE
+/* TITLE
  -------------------- */
 
 .dialog-title {
@@ -168,7 +168,7 @@
   line-height: 1.2;
 }
 
-/* DIALOG DESCRIPTION
+/* DESCRIPTION
  -------------------- */
 
 .dialog-description {
@@ -176,7 +176,7 @@
   font-size: 0.875rem;
 }
 
-/* DIALOG FOOTER
+/* FOOTER
  -------------------- */
 
 .dialog-footer {

package/dist/collection/components/drawer/drawer.dark.css

@@ -4,14 +4,13 @@
  * Index
  * - Overlay
  * - Drawer
- * - Drawer position
- * - Drawer content
- * - Drawer header
- * - Drawer actions
- * - Drawer title
- * - Drawer body
- * - Drawer open state
- *
+ * - Position
+ * - Content
+ * - Header
+ * - Actions
+ * - Title
+ * - Body
+ * - Open state
  */
 
 /**
@@ -20,7 +19,9 @@
  * @prop --header-icon: color of the header icons.
  * @prop --header-color: color of the header text.
  * @prop --header-background: color of the header background.
+ * @prop --header-delimiter: size of the border delimiter (in px) at the bottom of the header
  * @prop --back-chevron-color: color of back chevron
+ * @prop --max-height: max-height of the drawer for bottom position
  * @prop --z-index: The z-index of the Drawer.
  */
 
@@ -30,11 +31,13 @@
 :host {
   --background: var(--white);
   --color: var(--text);
-  --z-index: 10;
   --header-icon: var(--icon);
   --header-color: var(--text);
   --header-background: var(--white);
+  --header-delimiter: 0;
   --back-chevron-color: var(--icon);
+  --max-height: auto;
+  --z-index: 10;
 
   position: fixed;
   top: 0;
@@ -79,7 +82,7 @@
   transform: translateX(-100%);
 }
 
-/* DRAWER POSITION
+/* POSITION
  -------------------- */
 
 :host(.drawer-right) {
@@ -100,15 +103,15 @@
 
 :host(.drawer-bottom) .drawer-dialog {
   width: 100%;
+  max-height: var(--max-height);
   transform: translateY(100%);
 }
 
 :host(.drawer-bottom) .drawer-content {
   height: auto;
-  min-height: 6.25rem;
 }
 
-/* DRAWER CONTENT
+/* CONTENT
  -------------------- */
 
 .drawer-content {
@@ -123,7 +126,7 @@
   box-shadow: 0 0.1875rem 0.375rem rgba(0, 0, 0, 0.16);
 }
 
-/* DRAWER HEADER
+/* HEADER
  -------------------- */
 
 .drawer-header {
@@ -134,6 +137,9 @@
   height: 3.5rem;
   color: var(--header-color);
   background: var(--header-background);
+  border-color: var(--border);
+  border-style: solid;
+  border-width: var(--header-delimiter);
 }
 
 .drawer-header road-icon {
@@ -141,14 +147,6 @@
   color: var(--header-icon);
 }
 
-/**
- * Delimiter when needed
- */
-
-.drawer-header-delimiter {
-  border-bottom: 1px solid var(--border);
-}
-
 /**
  * Header inverse colors
  */
@@ -161,7 +159,7 @@
   margin-bottom: 2.5rem;
 }
 
-/* DRAWER ACTIONS
+/* ACTIONS
  -------------------- */
 
 .drawer-action,
@@ -180,6 +178,7 @@
   -webkit-appearance: none;
      -moz-appearance: none;
           appearance: none;
+  -webkit-tap-highlight-color: rgba(0, 0, 0, 0);
 }
 
 .drawer-header:not(.drawer-header-inverse) .drawer-action road-icon {
@@ -196,7 +195,7 @@
   margin-right: auto;
 }
 
-/* DRAWER TITLE
+/* TITLE
  -------------------- */
 
 .drawer-title {
@@ -211,14 +210,18 @@
   font-weight: 400;
 }
 
-/* DRAWER BODY
+/* BODY
  -------------------- */
 
 .drawer-body {
-  height: calc(100vh - 3.5rem);
   overflow-y: auto;
 }
 
+:host(.drawer-right) .drawer-body,
+:host(.drawer-left) .drawer-body {
+  height: calc(100vh - 3.5rem);
+}
+
 .drawer-inner {
   padding: 0 1rem 2.5rem;
 }
@@ -230,7 +233,7 @@
   }
 }
 
-/* DRAWER OPEN STATE
+/* OPEN STATE
  -------------------- */
 
 :host(.drawer-open) {

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

@@ -2,8 +2,8 @@ import { Component, Element, Event, Listen, Method, Prop, h, Host, Watch } from
 import { navigationClose, navigationChevron } from '../../../icons';
 /**
  * @slot  - Content of the drawer.
- */
-/**
+ * @slot title - replace the title with a custom title section when `'drawerTitle'` is not set
+ *
  * @virtualProp {"light" | "dark"} mode - The mode determines which theme styles to use (light / dark).
  */
 export class Drawer {
@@ -110,7 +110,8 @@ export class Drawer {
         h("div", { class: "drawer-content" },
           h("header", { class: `drawer-header ${inverseHeaderClass} ${drawerDelimiterClass}` },
             backIconElement,
-            this.drawerTitle !== undefined ? h("h2", { class: "drawer-title" }, this.drawerTitle) : h("div", { class: "drawer-title" }),
+            this.drawerTitle !== undefined ? h("h2", { class: "drawer-title" }, this.drawerTitle) : h("div", { class: "drawer-title" },
+              h("slot", { name: "title" })),
             closeIconElement),
           h("div", { class: "drawer-body" },
             h("slot", null))))));

package/dist/collection/components/drawer/drawer.light.css

@@ -4,14 +4,13 @@
  * Index
  * - Overlay
  * - Drawer
- * - Drawer position
- * - Drawer content
- * - Drawer header
- * - Drawer actions
- * - Drawer title
- * - Drawer body
- * - Drawer open state
- *
+ * - Position
+ * - Content
+ * - Header
+ * - Actions
+ * - Title
+ * - Body
+ * - Open state
  */
 
 /**
@@ -20,7 +19,9 @@
  * @prop --header-icon: color of the header icons.
  * @prop --header-color: color of the header text.
  * @prop --header-background: color of the header background.
+ * @prop --header-delimiter: size of the border delimiter (in px) at the bottom of the header
  * @prop --back-chevron-color: color of back chevron
+ * @prop --max-height: max-height of the drawer for bottom position
  * @prop --z-index: The z-index of the Drawer.
  */
 
@@ -30,11 +31,13 @@
 :host {
   --background: var(--white);
   --color: var(--text);
-  --z-index: 10;
   --header-icon: var(--icon);
   --header-color: var(--text);
   --header-background: var(--white);
+  --header-delimiter: 0;
   --back-chevron-color: var(--icon);
+  --max-height: auto;
+  --z-index: 10;
 
   position: fixed;
   top: 0;
@@ -79,7 +82,7 @@
   transform: translateX(-100%);
 }
 
-/* DRAWER POSITION
+/* POSITION
  -------------------- */
 
 :host(.drawer-right) {
@@ -100,15 +103,15 @@
 
 :host(.drawer-bottom) .drawer-dialog {
   width: 100%;
+  max-height: var(--max-height);
   transform: translateY(100%);
 }
 
 :host(.drawer-bottom) .drawer-content {
   height: auto;
-  min-height: 6.25rem;
 }
 
-/* DRAWER CONTENT
+/* CONTENT
  -------------------- */
 
 .drawer-content {
@@ -123,7 +126,7 @@
   box-shadow: 0 0.1875rem 0.375rem rgba(0, 0, 0, 0.16);
 }
 
-/* DRAWER HEADER
+/* HEADER
  -------------------- */
 
 .drawer-header {
@@ -134,6 +137,9 @@
   height: 3.5rem;
   color: var(--header-color);
   background: var(--header-background);
+  border-color: var(--border);
+  border-style: solid;
+  border-width: var(--header-delimiter);
 }
 
 .drawer-header road-icon {
@@ -141,14 +147,6 @@
   color: var(--header-icon);
 }
 
-/**
- * Delimiter when needed
- */
-
-.drawer-header-delimiter {
-  border-bottom: 1px solid var(--border);
-}
-
 /**
  * Header inverse colors
  */
@@ -161,7 +159,7 @@
   margin-bottom: 2.5rem;
 }
 
-/* DRAWER ACTIONS
+/* ACTIONS
  -------------------- */
 
 .drawer-action,
@@ -180,6 +178,7 @@
   -webkit-appearance: none;
      -moz-appearance: none;
           appearance: none;
+  -webkit-tap-highlight-color: rgba(0, 0, 0, 0);
 }
 
 .drawer-header:not(.drawer-header-inverse) .drawer-action road-icon {
@@ -196,7 +195,7 @@
   margin-right: auto;
 }
 
-/* DRAWER TITLE
+/* TITLE
  -------------------- */
 
 .drawer-title {
@@ -211,14 +210,18 @@
   font-weight: 400;
 }
 
-/* DRAWER BODY
+/* BODY
  -------------------- */
 
 .drawer-body {
-  height: calc(100vh - 3.5rem);
   overflow-y: auto;
 }
 
+:host(.drawer-right) .drawer-body,
+:host(.drawer-left) .drawer-body {
+  height: calc(100vh - 3.5rem);
+}
+
 .drawer-inner {
   padding: 0 1rem 2.5rem;
 }
@@ -230,7 +233,7 @@
   }
 }
 
-/* DRAWER OPEN STATE
+/* OPEN STATE
  -------------------- */
 
 :host(.drawer-open) {

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

@@ -16,17 +16,17 @@ export default {
 };
 
 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>
+<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',
@@ -71,13 +71,38 @@ Playground.argTypes = {
 };
 
 export const HeaderDefault = () => html`
-  <road-drawer is-open position="left" drawer-width="360"></road-drawer>
+<road-drawer is-open position="left" drawer-width="360"></road-drawer>
+`;
+
+export const withDelimiter = () => html`
+<road-drawer is-open position="left" drawer-width="360" style="--header-delimiter: 1px;"></road-drawer>
 `;
 
 export const HeaderInverse = () => html`
-  <road-drawer is-open position="right" drawer-width="480" has-inverse-header drawer-title="Drawer title"></road-drawer>
+<road-drawer is-open position="right" drawer-width="480" has-inverse-header drawer-title="Drawer title"></road-drawer>
 `;
 
 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>
+<road-drawer is-open position="right" drawer-width="480" has-inverse-header has-back-icon drawer-title="Drawer title"></road-drawer>
+`;
+
+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 bottomDrawer = () => html`
+<road-drawer is-open position="bottom">
+  <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>
 `;

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 open to true to show the dropdown menu.
+     */
+    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 open to true to show the dropdown menu."
+      },
+      "attribute": "is-open",
+      "reflect": false,
+      "defaultValue": "false"
+    }
+  }; }
+}

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

@@ -0,0 +1,51 @@
+import { html } from 'lit-html';
+
+export default {
+  title: 'Expand/Dropdown',
+  component: 'road-dropdown',
+  decorators: [(story) => html`<div style="margin-bottom: 20rem">${story()}</div>`],
+};
+
+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">
+    <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>
+<road-dropdown>
+`;
+Playground.args = {
+  'is-open': true,
+};
+Playground.argTypes = {
+  'is-open': {
+    control: 'boolean',
+  },
+};

package/dist/collection/components/flap/flap.css

@@ -1,7 +1,19 @@
+/*
+ * Flap
+ *
+ * Index
+ * - Flap
+ * - Colors
+ */
+
+/* FLAP
+ -------------------- */
+
 :host {
   --flap-promo: #ea0000;
   --flap-exclu: #eca000;
   --flap-info: #002b6f;
+  --flap-ecology: #00ab6d;
 
   box-sizing: border-box;
   display: inline-flex;
@@ -14,6 +26,9 @@
   border-radius: 1.5625rem;
 }
 
+/* COLORS
+ -------------------- */
+
 :host(.flap-promo) {
   color: var(--flap-promo);
 }
@@ -25,3 +40,7 @@
 :host(.flap-info) {
   color: var(--flap-info);
 }
+
+:host(.flap-ecology) {
+  color: var(--flap-ecology);
+}