@roadtrip/components 2.25.0 → 2.25.1

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

@@ -1,59 +1,103 @@
 import { html } from 'lit-html';
+import { ifDefined } from 'lit-html/directives/if-defined';
+import { unsafeHTML } from 'lit-html/directives/unsafe-html.js';
+import { list } from '../../../.storybook/list';
 
 export default {
   title: 'Modals/Dialog',
   component: 'road-dialog',
   parameters: {
-    docs: {
-      inlineStories: false,
-      iframeHeight: '400px',
+    layout: 'fullscreen',
+    backgrounds: {
+      default: 'grey',
     },
     actions: {
       handles: ['close'],
     },
   },
+  argTypes: {
+    'is-open': {
+      control: 'boolean',
+    },
+    'has-close-icon': {
+      control: 'boolean',
+    },
+    color: {
+      options: ['info', 'success', 'warning', 'danger'],
+      control: {
+        type: 'radio',
+      },
+    },
+    icon: {
+      options: list,
+      control: {
+        type: 'select',
+      },
+    },
+    label: {
+      control: 'text',
+    },
+    description: {
+      control: 'text',
+    },
+    close: {
+      control: {
+        type: null,
+      },
+    },
+    ' ': {
+      control: 'text',
+    },
+    '--z-index': {
+      table: {
+        defaultValue: { summary: '3' },
+      },
+      control: {
+        type: null,
+      },
+    },
+    'dialog-icon': {
+      control: {
+        type: null,
+      },
+    },
+  },
 };
 
-export const Playground = (args) => html`
-  <road-dialog is-open="${args['is-open']}" color="${args.color}" .icon="${args.icon}" label="${args.label}" description="${args.description}" has-close-icon="${args['has-close-icon']}"></road-dialog>
+const Template = (args) => html`
+<road-dialog 
+  is-open="${ifDefined(args['is-open'])}" 
+  color="${ifDefined(args.color)}" 
+  .icon="${ifDefined(args.icon)}" 
+  label="${ifDefined(args.label)}" 
+  description="${ifDefined(args.description)}" 
+  has-close-icon="${ifDefined(args['has-close-icon'])}"
+>
+  ${unsafeHTML(args[' '])}
+</road-dialog>
 `;
+
+export const Playground = Template.bind({});
 Playground.args = {
   'is-open': true,
   color: 'info',
   label: 'Information',
   description: 'Lorem ipsum dolor sit amet, consetetur sadipscing elitr, sed diam nonumy eirmod tempor.',
 };
-Playground.argTypes = {
-  'is-open': {
-    control: 'boolean',
-  },
-  'has-close-icon': {
-    control: 'boolean',
-  },
-  color: {
-    options: ['info', 'success', 'warning', 'danger'],
-    control: {
-      type: 'radio',
-    },
-  },
-  icon: {
-    control: 'text',
-  },
-  label: {
-    control: 'text',
-  },
-  description: {
-    control: 'text',
-  },
-};
 
-export const Information = () => html`
-  <road-dialog is-open color="info" label="Information" description="Lorem ipsum dolor sit amet, consetetur sadipscing elitr, sed diam nonumy eirmod tempor."></road-dialog>
-`;
+export const Error = Template.bind({});
+Error.args = {
+  'is-open': true,
+  color: 'danger',
+  label: 'Error',
+  description: 'Lorem ipsum dolor sit amet, consetetur sadipscing elitr, sed diam nonumy eirmod tempor.',
+};
 
-export const SideActions = () => html`
-  <road-dialog is-open label="Are you sure ?" description="Lorem ipsum dolor sit amet, consetetur sadipscing elitr, sed diam nonumy eirmod tempor.">
-  <road-button class="mb-0" outline expand style="width: 130px" data-dismiss="modal">Cancel</road-button>
-  <road-button class="mb-0" color="secondary" expand style="width: 130px;margin-left: 1rem;">Done</road-button>
-</road-dialog>
-`;
+export const SideActions = Template.bind({});
+SideActions.args = {
+  'is-open': true,
+  label: 'Are you sure ?',
+  description: 'Lorem ipsum dolor sit amet, consetetur sadipscing elitr, sed diam nonumy eirmod tempor.',
+  ' ': `<road-button class="mb-0" outline expand style="width: 130px" data-dismiss="modal">Cancel</road-button>
+  <road-button class="mb-0" color="secondary" expand style="width: 130px;margin-left: 1rem;">Done</road-button>`,
+};

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

@@ -1,108 +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">
+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>
-</road-drawer>
-`;
+  </div>`,
+};
 
-export const bottomDrawer = () => html`
-<road-drawer is-open position="bottom">
-  <strong slot="title">Contact by SMS</strong>
-  <div class="bg-light p-16">
+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>
-</road-drawer>
-`;
+  </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,19 +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',
-  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">
+  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>
@@ -38,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.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`