@roadtrip/components 2.23.0 → 2.24.0

package/dist/collection/components/carousel/carousel.js

@@ -706,8 +706,8 @@ export class Carousel {
         "signature": "(speed?: number | undefined) => Promise<void>",
         "parameters": [{
             "tags": [{
-                "text": "speed The transition duration (in ms).",
-                "name": "param"
+                "name": "param",
+                "text": "speed The transition duration (in ms)."
               }],
             "text": "The transition duration (in ms)."
           }],
@@ -731,20 +731,20 @@ export class Carousel {
         "signature": "(index: number, speed?: number | undefined, runCallbacks?: boolean | undefined) => Promise<void>",
         "parameters": [{
             "tags": [{
-                "text": "index The index of the slide to transition to.",
-                "name": "param"
+                "name": "param",
+                "text": "index The index of the slide to transition to."
               }],
             "text": "The index of the slide to transition to."
           }, {
             "tags": [{
-                "text": "speed The transition duration (in ms).",
-                "name": "param"
+                "name": "param",
+                "text": "speed The transition duration (in ms)."
               }],
             "text": "The transition duration (in ms)."
           }, {
             "tags": [{
-                "text": "runCallbacks If true, the transition will produce [Transition/SlideChange][Start/End] transition events.",
-                "name": "param"
+                "name": "param",
+                "text": "runCallbacks If true, the transition will produce [Transition/SlideChange][Start/End] transition events."
               }],
             "text": "If true, the transition will produce [Transition/SlideChange][Start/End] transition events."
           }],
@@ -774,14 +774,14 @@ export class Carousel {
         "signature": "(speed?: number | undefined, runCallbacks?: boolean | undefined) => Promise<void>",
         "parameters": [{
             "tags": [{
-                "text": "speed The transition duration (in ms).",
-                "name": "param"
+                "name": "param",
+                "text": "speed The transition duration (in ms)."
               }],
             "text": "The transition duration (in ms)."
           }, {
             "tags": [{
-                "text": "runCallbacks If true, the transition will produce [Transition/SlideChange][Start/End] transition events.",
-                "name": "param"
+                "name": "param",
+                "text": "runCallbacks If true, the transition will produce [Transition/SlideChange][Start/End] transition events."
               }],
             "text": "If true, the transition will produce [Transition/SlideChange][Start/End] transition events."
           }],
@@ -808,14 +808,14 @@ export class Carousel {
         "signature": "(speed?: number | undefined, runCallbacks?: boolean | undefined) => Promise<void>",
         "parameters": [{
             "tags": [{
-                "text": "speed The transition duration (in ms).",
-                "name": "param"
+                "name": "param",
+                "text": "speed The transition duration (in ms)."
               }],
             "text": "The transition duration (in ms)."
           }, {
             "tags": [{
-                "text": "runCallbacks If true, the transition will produce the [Transition/SlideChange][Start/End] transition events.",
-                "name": "param"
+                "name": "param",
+                "text": "runCallbacks If true, the transition will produce the [Transition/SlideChange][Start/End] transition events."
               }],
             "text": "If true, the transition will produce the [Transition/SlideChange][Start/End] transition events."
           }],
@@ -954,8 +954,8 @@ export class Carousel {
         "signature": "(lock: boolean) => Promise<void>",
         "parameters": [{
             "tags": [{
-                "text": "lock If `true`, disable swiping to the next slide.",
-                "name": "param"
+                "name": "param",
+                "text": "lock If `true`, disable swiping to the next slide."
               }],
             "text": "If `true`, disable swiping to the next slide."
           }],
@@ -979,8 +979,8 @@ export class Carousel {
         "signature": "(lock: boolean) => Promise<void>",
         "parameters": [{
             "tags": [{
-                "text": "lock If `true`, disable swiping to the previous slide.",
-                "name": "param"
+                "name": "param",
+                "text": "lock If `true`, disable swiping to the previous slide."
               }],
             "text": "If `true`, disable swiping to the previous slide."
           }],
@@ -1004,8 +1004,8 @@ export class Carousel {
         "signature": "(lock: boolean) => Promise<void>",
         "parameters": [{
             "tags": [{
-                "text": "lock If `true`, disable swiping to the next and previous slide.",
-                "name": "param"
+                "name": "param",
+                "text": "lock If `true`, disable swiping to the next and previous slide."
               }],
             "text": "If `true`, disable swiping to the next and previous slide."
           }],

package/dist/collection/components/carousel-item/carousel-item.css

@@ -1,3 +1,11 @@
+/*
+ * Carousel Item
+ *
+ * Index
+ * - Slide
+ * - Image
+ */
+
 road-carousel-item {
   display: block;
 
@@ -5,6 +13,9 @@ road-carousel-item {
   height: 100%;
 }
 
+/* SLIDE
+ -------------------- */
+
 .slide-zoom {
   display: block;
   width: 100%;
@@ -24,6 +35,9 @@ road-carousel-item {
   text-align: center;
 }
 
+/* IMAGE
+ -------------------- */
+
 .swiper-slide road-img {
   pointer-events: none;
 }

package/dist/collection/components/checkbox/checkbox.css

@@ -7,10 +7,9 @@
  *
  * Index
  * - Checkbox
- * - Checkbox label
- * - Checkbox error
+ * - Label
+ * - Error
  * - Position
- *
  */
 
 
@@ -37,7 +36,7 @@
   opacity: 0;
 }
 
-/* CHECKBOX LABEL
+/* LABEL
  -------------------- */
 
 .form-check-label {
@@ -128,7 +127,7 @@
   border: none;
 }
 
-/* CHECKBOX ERROR
+/* ERROR
  -------------------- */
 
 .invalid-feedback {

package/dist/collection/components/collapse/collapse.css

@@ -5,7 +5,6 @@
  * - Collapse
  * - Content
  * - Button
- *
  */
 
 /**

package/dist/collection/components/counter/counter.css

@@ -5,7 +5,6 @@
  * - Input
  * - Buttons
  * - Sizes
- *
  */
 
 /**

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 {
@@ -143,7 +142,7 @@
   font-size: 3rem;
 }
 
-/* DIALOG BODY
+/* BODY
  -------------------- */
 
 .dialog-body {
@@ -158,7 +157,7 @@
   }
 }
 
-/* DIALOG TITLE
+/* TITLE
  -------------------- */
 
 .dialog-title {
@@ -169,7 +168,7 @@
   line-height: 1.2;
 }
 
-/* DIALOG DESCRIPTION
+/* DESCRIPTION
  -------------------- */
 
 .dialog-description {
@@ -177,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,
@@ -197,7 +193,7 @@
   margin-right: auto;
 }
 
-/* DRAWER TITLE
+/* TITLE
  -------------------- */
 
 .drawer-title {
@@ -212,7 +208,7 @@
   font-weight: 400;
 }
 
-/* DRAWER BODY
+/* BODY
  -------------------- */
 
 .drawer-body {
@@ -231,7 +227,7 @@
   }
 }
 
-/* DRAWER OPEN STATE
+/* OPEN STATE
  -------------------- */
 
 :host(.drawer-open) {

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,
@@ -197,7 +193,7 @@
   margin-right: auto;
 }
 
-/* DRAWER TITLE
+/* TITLE
  -------------------- */
 
 .drawer-title {
@@ -212,7 +208,7 @@
   font-weight: 400;
 }
 
-/* DRAWER BODY
+/* BODY
  -------------------- */
 
 .drawer-body {
@@ -231,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>
 `;

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',
+  },
+};