@roadtrip/components 2.25.0 → 2.25.1

package/dist/collection/components/input-group/input-group.stories.js

@@ -1,49 +1,58 @@
 import { html } from 'lit-html';
+import { unsafeHTML } from 'lit-html/directives/unsafe-html.js';
 
 export default {
   title: 'Forms/Input Group',
   component: 'road-input-group',
+  argTypes: {
+    prepend: {
+      control: 'text',
+    },
+    ' ': {
+      control: 'text',
+    },
+    append: {
+      control: 'text',
+    },
+  },
 };
 
-export const Icon = () => html`
+const Template = (args) => html`
 <road-input-group>
-  <road-input input-id="cardNumber" label="Card Number"></road-input>
-  <label slot="append" for="cardNumber">
-    <road-icon name="payment-card"></road-icon>
-  </label>
+  ${unsafeHTML(args[' '])}
+  ${unsafeHTML(args.prepend)}
+  ${unsafeHTML(args.append)}
 </road-input-group>
 `;
 
-export const Button = () => html`
-<road-input-group>
-  <road-input input-id="newsletter" label="Newsletter"></road-input>
-  <road-button slot="append" outline>
-    OK
-  </road-button>
-</road-input-group>
+export const Playground = Template.bind({});
+Playground.args = {
+  ' ': `<road-input input-id="cardNumber" label="Card Number"></road-input>`,
+  append: `<label slot="append" for="cardNumber">
+    <road-icon name="payment-card"></road-icon>
+  </label>`,
+};
 
-<road-input-group>
-  <road-input input-id="fieldWithHelp" label="Label"></road-input>
-  <road-button slot="append" outline>
-    <road-icon color="secondary" name="alert-info-outline"></road-icon>
-  </road-button>
-</road-input-group>
-`;
+export const Button = Template.bind({});
+Button.args = {
+  ' ': `<road-input input-id="newsletter" label="Newsletter"></road-input>`,
+  append: `<road-button slot="append" outline="true">
+  OK
+</road-button>`,
+};
 
-export const Disabled = () => html`
-<road-input-group>
-  <road-input input-id="inputGroupDisabled" label="Label" disabled></road-input>
-  <road-button slot="append" outline>
-    <road-icon color="secondary" name="alert-info-outline"></road-icon>
-  </road-button>
-</road-input-group>
-`;
+export const Disabled = Template.bind({});
+Disabled.args = {
+  ' ': `<road-input input-id="inputGroupDisabled" label="Label" disabled></road-input>`,
+  append: `<road-button slot="append" outline="true">
+  <road-icon color="secondary" name="alert-info-outline"></road-icon>
+</road-button>`,
+};
 
-export const Error = () => html`
-<road-input-group>
-  <road-input input-id="inputGroupError" label="Label" error="error message here"></road-input>
-  <label slot="append" for="inputGroupError">
-    <road-icon name="payment-card"></road-icon>
-  </label>
-</road-input-group>
-`;
+export const Error = Template.bind({});
+Error.args = {
+  ' ': `<road-input input-id="inputGroupError" label="Label" error="error message here"></road-input>`,
+  append: `<label slot="append" for="inputGroupError">
+  <road-icon name="payment-card"></road-icon>
+</label>`,
+};

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

@@ -22,10 +22,10 @@
 :host {
   --border-radius: 0.25rem;
   --background-color: transparent;
+  --detail-color: var(--icon);
+  --inner-padding: 1rem 0.5rem 1rem 0;
   --min-height: 3.5rem;
   --padding-left: 1rem;
-  --inner-padding: 1rem 0.5rem 1rem 0;
-  --detail-color: var(--icon);
 
   position: relative;
   box-sizing: border-box;

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/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.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.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/plate-number/plate-number.stories.js

@@ -1,4 +1,5 @@
 import { html } from 'lit-html';
+import { ifDefined } from 'lit-html/directives/if-defined';
 
 export default {
   title: 'Forms/PlateNumber',
@@ -11,14 +12,14 @@ export default {
 };
 
 export const Playground = (args) => html`
-  <road-plate-number
-    country="${args.country}"
-    .motorbike=${args.motorbike}
-    .placeholder=${args.placeholder}
-    @roadChange=${event => args.roadChange(event.detail.value)}
-    @roadInput=${event => args.roadInput(event.target.value)}
-  >
-  </road-plate-number>
+<road-plate-number
+  country="${ifDefined(args.country)}"
+  motorbike="${ifDefined(args.motorbike)}"
+  placeholder="${ifDefined(args.placeholder)}"
+  value="${ifDefined(args.value)}"
+  @roadChange=${event => args.roadChange(event.detail.value)}
+  @roadInput=${event => args.roadInput(event.target.value)}
+></road-plate-number>
 `;
 Playground.args = {
   country: 'FR',
@@ -36,19 +37,37 @@ Playground.argTypes = {
   motorbike: {
     control: 'boolean',
   },
+  value: {
+    control: 'text',
+  },
+  roadBlur: {
+    control: {
+      type: null,
+    },
+  },
+  roadFocus: {
+    control: {
+      type: null,
+    },
+  },
   roadChange: {
     action: 'roadChange',
+    control: {
+      type: null,
+    },
   },
   roadInput: {
     action: 'roadInput',
+    control: {
+      type: null,
+    },
   },
 };
 
 export const MotorBike = () => html`
-  <road-plate-number
-    country="FR"
-    motorbike
-    style="width: 180px;"
-  >
-  </road-plate-number>
+<road-plate-number
+  country="FR"
+  motorbike="true"
+  style="width: 180px;"
+></road-plate-number>
 `;