@roadtrip/components 2.23.0 → 2.25.1

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

@@ -1,4 +1,7 @@
 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: 'Listing/Item',
@@ -11,34 +14,38 @@ export default {
 };
 
 export const Playground = (args) => html`
-  <road-item
-    class="bg-white"
-    button="${args['button']}" 
-    detail="${args['detail']}" 
-    active="${args['active']}" 
-    lines="${args['lines']}"
-    style="--detail-color: ${args['--detail-color']}"
-  >
-    <road-icon name="${args['start']}"></road-icon>
-    ${args['']}
-  </road-item>
+<road-item
+  class="bg-white"
+  button="${ifDefined(args.button)}" 
+  detail="${ifDefined(args.detail)}" 
+  detail-icon="${ifDefined(args['detail-icon'])}" 
+  active="${ifDefined(args.active)}" 
+  lines="${ifDefined(args.lines)}"
+  disabled="${ifDefined(args.disabled)}"
+>
+  ${unsafeHTML(args.start)}
+  ${unsafeHTML(args[' '])}
+  ${unsafeHTML(args.end)}
+</road-item>
 `;
 Playground.args = {
-  'button': true,
-  'detail': true,
-  'active': false,
-  'lines': 'none',
-  'start': 'shipping',
-  '': 'Mes achats',
+  button: null,
+  detail: null,
+  active: null,
+  lines: undefined,
+  'detail-icon': undefined,
+  disabled: null,
+  start: '<road-icon name="shipping"></road-icon>',
+  ' ': 'Mes achats',
 };
 Playground.argTypes = {
-  'button': {
+  button: {
     control: 'boolean',
   },
-  'detail': {
+  detail: {
     control: 'boolean',
   },
-  'active': {
+  active: {
     control: 'boolean',
   },
   lines: {
@@ -47,15 +54,102 @@ Playground.argTypes = {
       type: 'radio',
     },
   },
-  '--detail-color': {
-    control: 'color',
+  'detail-icon': {
+    options: list,
+    control: {
+      type: 'select',
+    },
+  },
+  disabled: {
+    control: 'boolean',
+  },
+  download: {
+    control: {
+      type: null,
+    },
+  },
+  href: {
+    control: {
+      type: null,
+    },
+  },
+  rel: {
+    control: {
+      type: null,
+    },
   },
-  'start': {
+  target: {
+    control: {
+      type: null,
+    },
+  },
+  type: {
+    control: {
+      type: null,
+    },
+  },
+  start: {
+    control: 'text',
+  },
+  ' ': {
     control: 'text',
   },
-  '': {
+  end: {
     control: 'text',
   },
+  '--border-radius': {
+    table: {
+      defaultValue: { summary: '0.25rem' },
+    },
+    control: {
+      type: null,
+    },
+  },
+  '--background-color': {
+    table: {
+      defaultValue: { summary: 'transparent' },
+    },
+    control: {
+      type: null,
+    },
+  },
+  '--detail-color': {
+    table: {
+      defaultValue: { summary: 'var(--icon)' },
+    },
+    control: {
+      type: null,
+    },
+  },
+  '--inner-padding': {
+    table: {
+      defaultValue: { summary: '1rem 0.5rem 1rem 0' },
+    },
+    control: {
+      type: null,
+    },
+  },
+  '--min-height': {
+    table: {
+      defaultValue: { summary: '3.5rem' },
+    },
+    control: {
+      type: null,
+    },
+  },
+  '--padding-left': {
+    table: {
+      defaultValue: { summary: '1rem' },
+    },
+    control: {
+      type: null,
+    },
+  },
+  native: {
+    control: {
+      type: null,
+    },
+  },
 };
 
 export const Compatibility = () => html`

package/dist/collection/components/label/label.css

@@ -1,3 +1,8 @@
+/*
+ * Label
+ *
+ */
+
 :host {
   box-sizing: border-box;
   display: block;

package/dist/collection/components/label/label.js

@@ -1,11 +1,10 @@
-import { Component, Host, h } from '@stencil/core';
+import { Component, h } from '@stencil/core';
 /**
  * @slot  - Content of the label.
  */
 export class Label {
   render() {
-    return (h(Host, null,
-      h("slot", null)));
+    return (h("slot", null));
   }
   static get is() { return "road-label"; }
   static get encapsulation() { return "shadow"; }

package/dist/collection/components/list/list.css

@@ -3,17 +3,19 @@
  *
  * Index
  * - List
- * - List lines
- *
+ * - Lines
  */
 
+/* LIST
+ -------------------- */
+
 :host {
   display: block;
   contain: content;
   list-style-type: none;
 }
 
-/* LIST LINES
+/* LINES
  -------------------- */
 
 /**

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

@@ -1,4 +1,6 @@
 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: 'Listing/List',
@@ -7,56 +9,58 @@ export default {
     backgrounds: {
       default: 'grey',
     },
-    layout: 'fullscreen',
+  },
+  argTypes: {
+    lines: {
+      options: ['full', 'inset', 'none'],
+      control: {
+        type: 'radio',
+      },
+    },
+    ' ': {
+      control: 'text',
+    },
   },
 };
 
-export const Playground = ({lines}) => html`
-  <road-list lines="${lines}" class="bg-white">
+const Template = (args) => html`
+<road-list lines="${ifDefined(args.lines)}" class="bg-white">
+  ${unsafeHTML(args[' '])}
+</road-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>
+export const Playground = Template.bind({});
+Playground.args = {
+  lines: undefined,
+  ' ': `<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>
+    </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-item button>
-      <road-icon slot="start" name="picture" size="md"></road-icon>
-      <road-label>
-        Label
-      </road-label>
-    </road-item>
-
-  </road-list>
-`;
-Playground.args = {
-  lines: 'none',
-};
-Playground.argTypes = {
-  lines: {
-    options: ['full', 'inset', 'none'],
-    control: {
-      type: 'radio',
-    },
-  },
+    </road-label>
+  </road-item>`,
 };
 
-export const LinkList = () => html`
-  <road-list class="bg-white">
-
-  <road-item button active>
+export const LinkList = Template.bind({});
+LinkList.args = {
+  ' ': `<road-item button active>
     <road-icon slot="start" name="picture" size="md"></road-icon>
     <road-label>
       Drawer link
@@ -79,7 +83,5 @@ export const LinkList = () => html`
     <road-label>
       Drawer link
     </road-label>
-  </road-item>
-
-</road-list>
-`;
+  </road-item>`,
+};

package/dist/collection/components/modal/modal.css

@@ -4,12 +4,11 @@
  * Index
  * - Overlay
  * - Modal
- * - Modal content
- * - Modal header
- * - Modal actions
- * - Modal title
- * - Modal body
- *
+ * - Content
+ * - Header
+ * - Actions
+ * - Title
+ * - Body
  */
 
 /**
@@ -80,7 +79,7 @@
   transform: none;
 }
 
-/* MODAL CONTENT
+/* CONTENT
  -------------------- */
 
 .modal-content {
@@ -103,7 +102,7 @@
   }
 }
 
-/* MODAL HEADER
+/* HEADER
  -------------------- */
 
 .modal-header {
@@ -138,7 +137,7 @@
   color: var(--text);
 }
 
-/* MODAL ACTIONS
+/* ACTIONS
  -------------------- */
 
 .modal-action,
@@ -170,7 +169,7 @@
   margin-right: auto;
 }
 
-/* MODAL TITLE
+/* TITLE
  -------------------- */
 
 .modal-title {
@@ -185,7 +184,7 @@
   font-weight: 400;
 }
 
-/* MODAL BODY
+/* BODY
  -------------------- */
 
 .modal-body {

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

@@ -1,29 +1,63 @@
 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/Modal',
   component: 'road-modal',
   parameters: {
-    docs: {
-      inlineStories: false,
-      iframeHeight: '600px',
-    },
+    layout: 'fullscreen',
     actions: {
       handles: ['close'],
     },
   },
+  argTypes: {
+    'is-open': {
+      control: 'boolean',
+    },
+    'has-close-icon': {
+      control: 'boolean',
+    },
+    'has-inverse-header': {
+      control: 'boolean',
+    },
+    'max-width': {
+      control: 'number',
+      min: 0,
+    },
+    'modal-title': {
+      control: 'text',
+    },
+    ' ': {
+      control: 'text',
+    },
+    close: {
+      control: {
+        type: null,
+      },
+    },
+    '--z-index': {
+      table: {
+        defaultValue: { summary: '3' },
+      },
+      control: {
+        type: null,
+      },
+    },
+  },
 };
 
 export const Playground = (args) => html`
-  <road-modal 
-    is-open="${args['is-open']}"
-    has-back-icon="${args['has-back-icon']}" 
-    has-close-icon="${args['has-close-icon']}" 
-    has-inverse-header="${args['has-inverse-header']}" 
-    max-width="${args['max-width']}"
-    modal-title="${ifDefined(args['modal-title'])}"
-  ></road-modal>
+<road-modal 
+  is-open="${ifDefined(args['is-open'])}"
+  has-back-icon="${ifDefined(args['has-back-icon'])}" 
+  has-close-icon="${ifDefined(args['has-close-icon'])}" 
+  has-inverse-header="${ifDefined(args['has-inverse-header'])}" 
+  max-width="${ifDefined(args['max-width'])}"
+  modal-title="${ifDefined(args['modal-title'])}"
+>
+  ${unsafeHTML(args[' '])}
+</road-modal>
 `;
 Playground.args = {
   'has-inverse-header': false,
@@ -31,21 +65,3 @@ Playground.args = {
   'has-close-icon': true,
   'max-width': 480,
 };
-Playground.argTypes = {
-  'is-open': {
-    control: 'boolean',
-  },
-  'has-close-icon': {
-    control: 'boolean',
-  },
-  'has-inverse-header': {
-    control: 'boolean',
-  },
-  'max-width': {
-    control: 'number',
-    min: 0,
-  },
-  'modal-title': {
-    control: 'text',
-  },
-};

package/dist/collection/components/navbar/navbar.js

@@ -56,8 +56,8 @@ export class Navbar {
       "composed": true,
       "docs": {
         "tags": [{
-            "text": undefined,
-            "name": "internal"
+            "name": "internal",
+            "text": undefined
           }],
         "text": ""
       },

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

@@ -1,16 +1,14 @@
 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: 'Navigation/NavBar',
   component: 'road-navbar',
   subcomponents: {
-    RoadNavbarItem: 'road-navbar-item'
+    'road-navbar-item': 'road-navbar-item',
   },
   parameters: {
-    docs: {
-      inlineStories: false,
-      iframeHeight: '100px',
-    },
     actions: {
       handles: ['roadNavbarItemClick'],
     },
@@ -19,11 +17,24 @@ export default {
     },
     layout: 'fullscreen',
   },
-};
-
-export const Default = () => html`
-  <road-navbar>
-  <road-navbar-item tab="tab-home">
+  argTypes: {
+    ' ': {
+      control: 'text',
+    },
+    'selected-tab': {
+      control: 'text',
+    },
+    '--z-index': {
+      table: {
+        defaultValue: { summary: '10' },
+      },
+      control: {
+        type: null,
+      },
+    },
+  },
+  args: {
+    ' ': `<road-navbar-item tab="tab-home">
     <road-icon name="navigation-home-outline"></road-icon>
     <road-label>Home</road-label>
   </road-navbar-item>
@@ -41,13 +52,21 @@ export const Default = () => html`
   <road-navbar-item tab="tab-menu">
     <road-icon name="navigation-menu"></road-icon>
     <road-label>Menu</road-label>
-  </road-navbar-item>
+  </road-navbar-item>`,
+  },
+};
+
+const Template = (args) => html`
+<road-navbar selected-tab="${ifDefined(args['selected-tab'])}">
+  ${unsafeHTML(args[' '])}
 </road-navbar>
 `;
 
-export const Selected = () => html`
-  <road-navbar>
-  <road-navbar-item tab="tab-home" selected>
+export const Playground = Template.bind({});
+
+export const Selected = Template.bind({});
+Selected.args = {
+  ' ': `<road-navbar-item tab="tab-home" selected="true">
     <road-icon name="navigation-home-outline"></road-icon>
     <road-label>Home</road-label>
   </road-navbar-item>
@@ -65,13 +84,12 @@ export const Selected = () => html`
   <road-navbar-item tab="tab-menu">
     <road-icon name="navigation-menu"></road-icon>
     <road-label>Menu</road-label>
-  </road-navbar-item>
-</road-navbar>
-`;
+  </road-navbar-item>`,
+};
 
-export const withNotifications = () => html`
-  <road-navbar>
-  <road-navbar-item tab="tab-home" selected>
+export const withNotifications = Template.bind({});
+withNotifications.args = {
+  ' ': `<road-navbar-item tab="tab-home" selected="true">
     <road-icon name="navigation-home-outline"></road-icon>
     <road-label>Home</road-label>
   </road-navbar-item>
@@ -90,6 +108,5 @@ export const withNotifications = () => html`
   <road-navbar-item tab="tab-menu">
     <road-icon name="navigation-menu"></road-icon>
     <road-label>Menu</road-label>
-  </road-navbar-item>
-</road-navbar>
-`;
+  </road-navbar-item>`,
+};

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

@@ -2,11 +2,10 @@
  * Navbar item
  *
  * Index
- * - Native button
- * - Inner button
+ * - Native
+ * - Inner
  * - Icon
- * - Notification badge
- *
+ * - Badge
  */
 
 
@@ -40,7 +39,7 @@
 }
 
 
-/* NATIVE BUTTON
+/* NATIVE
  -------------------- */
 
 .button-native {
@@ -77,7 +76,7 @@
   -webkit-tap-highlight-color: rgba(0, 0, 0, 0);
 }
 
-/* INNER BUTTON
+/* INNER
  -------------------- */
 
 .button-inner {
@@ -106,7 +105,7 @@
   font-size: 0.625rem;
 }
 
-/* NOTIFICATION BADGE
+/* BADGE
  -------------------- */
 
 ::slotted(road-badge) {

package/dist/collection/components/navbar-item/navbar-item.js

@@ -195,8 +195,8 @@ export class NavbarItem {
       "composed": true,
       "docs": {
         "tags": [{
-            "text": undefined,
-            "name": "internal"
+            "name": "internal",
+            "text": undefined
           }],
         "text": "Emitted when the tab bar is clicked"
       },