@roadtrip/components 2.21.0 → 2.24.0

package/dist/collection/components/counter/counter.js

@@ -20,10 +20,10 @@ export class Counter {
   }
   render() {
     return (h(Host, null,
-      h("road-input-group", null,
-        h("road-button", { slot: "prepend", onClick: this.decrease }, "-"),
+      h("road-input-group", { class: this.size && `counter-${this.size}` },
+        h("road-button", { slot: "prepend", size: this.size, onClick: this.decrease }, "-"),
         h("road-input", { type: "number", min: this.min, max: this.max, step: this.step, value: this.value }),
-        h("road-button", { slot: "append", onClick: this.increase }, "+"))));
+        h("road-button", { slot: "append", size: this.size, onClick: this.increase }, "+"))));
   }
   static get is() { return "road-counter"; }
   static get encapsulation() { return "scoped"; }
@@ -120,6 +120,23 @@ export class Counter {
       "attribute": "value",
       "reflect": false,
       "defaultValue": "1"
+    },
+    "size": {
+      "type": "string",
+      "mutable": false,
+      "complexType": {
+        "original": "'sm' | 'md'",
+        "resolved": "\"md\" | \"sm\" | undefined",
+        "references": {}
+      },
+      "required": false,
+      "optional": true,
+      "docs": {
+        "tags": [],
+        "text": "The size of the counter."
+      },
+      "attribute": "size",
+      "reflect": false
     }
   }; }
   static get events() { return [{
@@ -130,7 +147,7 @@ export class Counter {
       "composed": true,
       "docs": {
         "tags": [],
-        "text": ""
+        "text": "Emitted when the plus button is clicked"
       },
       "complexType": {
         "original": "void",
@@ -145,7 +162,7 @@ export class Counter {
       "composed": true,
       "docs": {
         "tags": [],
-        "text": ""
+        "text": "Emitted when the minus button is clicked"
       },
       "complexType": {
         "original": "void",

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

@@ -37,4 +37,12 @@ Playground.argTypes = {
   value: {
     control: 'number',
   },
-};
+};
+
+export const sizes = () => html`
+  <road-counter></road-counter>
+
+  <road-counter size="md"></road-counter>
+
+  <road-counter size="sm"></road-counter>
+`;

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,6 +19,7 @@
  * @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 --z-index: The z-index of the Drawer.
  */
@@ -34,6 +34,7 @@
   --header-icon: var(--icon);
   --header-color: var(--text);
   --header-background: var(--white);
+  --header-delimiter: 0;
   --back-chevron-color: var(--icon);
 
   position: fixed;
@@ -79,7 +80,7 @@
   transform: translateX(-100%);
 }
 
-/* DRAWER POSITION
+/* POSITION
  -------------------- */
 
 :host(.drawer-right) {
@@ -108,7 +109,7 @@
   min-height: 6.25rem;
 }
 
-/* DRAWER CONTENT
+/* CONTENT
  -------------------- */
 
 .drawer-content {
@@ -123,7 +124,7 @@
   box-shadow: 0 0.1875rem 0.375rem rgba(0, 0, 0, 0.16);
 }
 
-/* DRAWER HEADER
+/* HEADER
  -------------------- */
 
 .drawer-header {
@@ -134,6 +135,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 +145,6 @@
   color: var(--header-icon);
 }
 
-/**
- * Delimiter when needed
- */
-
-.drawer-header-delimiter {
-  border-bottom: 1px solid var(--border);
-}
-
 /**
  * Header inverse colors
  */
@@ -161,7 +157,7 @@
   margin-bottom: 2.5rem;
 }
 
-/* DRAWER ACTIONS
+/* ACTIONS
  -------------------- */
 
 .drawer-action,
@@ -180,6 +176,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 +193,7 @@
   margin-right: auto;
 }
 
-/* DRAWER TITLE
+/* TITLE
  -------------------- */
 
 .drawer-title {
@@ -211,7 +208,7 @@
   font-weight: 400;
 }
 
-/* DRAWER BODY
+/* BODY
  -------------------- */
 
 .drawer-body {
@@ -230,7 +227,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,6 +19,7 @@
  * @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 --z-index: The z-index of the Drawer.
  */
@@ -34,6 +34,7 @@
   --header-icon: var(--icon);
   --header-color: var(--text);
   --header-background: var(--white);
+  --header-delimiter: 0;
   --back-chevron-color: var(--icon);
 
   position: fixed;
@@ -79,7 +80,7 @@
   transform: translateX(-100%);
 }
 
-/* DRAWER POSITION
+/* POSITION
  -------------------- */
 
 :host(.drawer-right) {
@@ -108,7 +109,7 @@
   min-height: 6.25rem;
 }
 
-/* DRAWER CONTENT
+/* CONTENT
  -------------------- */
 
 .drawer-content {
@@ -123,7 +124,7 @@
   box-shadow: 0 0.1875rem 0.375rem rgba(0, 0, 0, 0.16);
 }
 
-/* DRAWER HEADER
+/* HEADER
  -------------------- */
 
 .drawer-header {
@@ -134,6 +135,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 +145,6 @@
   color: var(--header-icon);
 }
 
-/**
- * Delimiter when needed
- */
-
-.drawer-header-delimiter {
-  border-bottom: 1px solid var(--border);
-}
-
 /**
  * Header inverse colors
  */
@@ -161,7 +157,7 @@
   margin-bottom: 2.5rem;
 }
 
-/* DRAWER ACTIONS
+/* ACTIONS
  -------------------- */
 
 .drawer-action,
@@ -180,6 +176,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 +193,7 @@
   margin-right: auto;
 }
 
-/* DRAWER TITLE
+/* TITLE
  -------------------- */
 
 .drawer-title {
@@ -211,7 +208,7 @@
   font-weight: 400;
 }
 
-/* DRAWER BODY
+/* BODY
  -------------------- */
 
 .drawer-body {
@@ -230,7 +227,7 @@
   }
 }
 
-/* DRAWER OPEN STATE
+/* OPEN STATE
  -------------------- */
 
 :host(.drawer-open) {

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

@@ -74,6 +74,10 @@ export const HeaderDefault = () => html`
   <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>
 `;
@@ -81,3 +85,13 @@ export const HeaderInverse = () => html`
 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 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>
+`;

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,50 @@
+import { html } from 'lit-html';
+
+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">
+    <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);
+}

package/dist/collection/components/flap/flap.js

@@ -27,8 +27,8 @@ export class Flap {
       "type": "string",
       "mutable": false,
       "complexType": {
-        "original": "'promo' | 'exclu' | 'info'",
-        "resolved": "\"exclu\" | \"info\" | \"promo\"",
+        "original": "'promo' | 'exclu' | 'info' | 'ecology'",
+        "resolved": "\"ecology\" | \"exclu\" | \"info\" | \"promo\"",
         "references": {}
       },
       "required": false,