@roadtrip/components 2.24.0 → 2.26.0

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

@@ -21,6 +21,7 @@
  * @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,12 +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;
@@ -101,12 +103,12 @@
 
 :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;
 }
 
 /* CONTENT
@@ -212,10 +214,14 @@
  -------------------- */
 
 .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;
 }

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

@@ -21,6 +21,7 @@
  * @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,12 +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;
@@ -101,12 +103,12 @@
 
 :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;
 }
 
 /* CONTENT
@@ -212,10 +214,14 @@
  -------------------- */
 
 .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;
 }

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

@@ -1,97 +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">
-      <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 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.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/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`