@roadtrip/components 2.24.1 → 2.27.0

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

@@ -1,49 +1,93 @@
 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/Accordion',
   component: 'road-accordion',
-};
-
-export const Playground = (args) => html`
-  <road-accordion 
-    is-open="${args['is-open']}"
-    style="--icon-color: ${args['--icon-color']}"
-  >
-    <div slot="header">${args.header}</div>
-    ${args['']}
-  </road-accordion>
-`;
-Playground.args = {
-  'is-open': false,
-  header: 'Accordion',
-  '': 'Lorem ipsum dolor sit amet, consetetur sadipscing elitr, sed diam nonumy eirmod tempor invidunt ut labore et dolore magna aliquyam erat.',
-};
-Playground.argTypes = {
-  'is-open': {
-    control: 'boolean',
-  },
-  header: {
-    control: 'text',
-  },
-  '': {
-    control: 'text',
+  argTypes: {
+    'is-open': {
+      control: 'boolean',
+    },
+    header: {
+      control: 'text',
+    },
+    ' ': {
+      control: 'text',
+    },
+    '--accordion-header-border': {
+      table: {
+        defaultValue: { summary: '1px' },
+      },
+      control: {
+        type: null,
+      },
+    },
+    '--content-margin': {
+      table: {
+        defaultValue: { summary: '0 1rem 1rem' },
+      },
+      control: {
+        type: null,
+      },
+    },
+    '--content-padding': {
+      table: {
+        defaultValue: { summary: '1rem 0.5rem 0' },
+      },
+      control: {
+        type: null,
+      },
+    },
+    '--header-padding': {
+      table: {
+        defaultValue: { summary: '1rem 0.5rem 1rem 1rem' },
+      },
+      control: {
+        type: null,
+      },
+    },
+    '--icon-color': {
+      table: {
+        defaultValue: { summary: 'var(--icon)' },
+      },
+      control: {
+        type: null,
+      },
+    },
+    '--max-height': {
+      table: {
+        defaultValue: { summary: '800px' },
+      },
+      control: {
+        type: null,
+      },
+    },
   },
-  '--icon-color': {
-    control: 'color',
+  args: {
+    'is-open': null,
+    header: `Accordion`,
+    ' ': `Lorem ipsum dolor sit amet, consetetur sadipscing elitr, sed diam nonumy eirmod tempor invidunt ut labore et dolore magna aliquyam erat.`,
   },
 };
 
-export const Closed = () => html`
-  <road-accordion>
-  <div slot="header">Accordion link</div>
-  Lorem ipsum dolor sit amet, consetetur sadipscing elitr, sed diam nonumy eirmod tempor invidunt ut labore et dolore magna aliquyam erat.
+const Template = (args) => html`
+<road-accordion is-open="${ifDefined(args['is-open'])}">
+  <div slot="header">
+    ${unsafeHTML(args.header)}
+  </div>
+  ${unsafeHTML(args[' '])}
 </road-accordion>
 `;
 
-export const Open = () => html`
-  <road-accordion is-open>
-  <div slot="header">Accordion link</div>
-  Lorem ipsum dolor sit amet, consetetur sadipscing elitr, sed diam nonumy eirmod tempor invidunt ut labore et dolore magna aliquyam erat.
-</road-accordion>
-`;
+export const Playground = Template.bind({});
+
+export const Closed = Template.bind({});
+Closed.args = {
+  'is-open': false,
+};
+
+export const Open = Template.bind({});
+Open.args = {
+  'is-open': true,
+};

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

@@ -1,60 +1,66 @@
 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: 'Indicators/Alert',
   component: 'road-alert',
-};
-
-export const Playground = (args) => html`
-  <road-alert color="${args.color}">
-    <road-icon slot="icon" name="${args.icon}"></road-icon>
-      ${args['']}
-  </road-alert>
-`;
-Playground.args = {
-  color: 'info',
-  icon: 'alert-info',
-  '': 'Information',
-};
-Playground.argTypes = {
-  color: {
-    options: ['info', 'success', 'warning', 'danger'],
-    control: {
-      type: 'radio',
+  argTypes: {
+    color: {
+      options: ['info', 'success', 'warning', 'danger'],
+      control: {
+        type: 'radio',
+      },
+    },
+    icon: {
+      options: list,
+      control: {
+        type: 'select',
+      },
+    },
+    ' ': {
+      control: 'text',
     },
   },
-  icon: {
-    control: 'text',
-  },
-  '': {
-    control: 'text',
+  args: {
+    color: 'info',
+    icon: `alert-info`,
+    ' ': `Information`,
   },
 };
 
-export const Info = () => html`
-  <road-alert>
-  <road-icon slot="icon" name="alert-info"></road-icon>
-  Information
+const Template = (args) => html`
+<road-alert color="${ifDefined(args.color)}">
+  <road-icon slot="icon" name="${ifDefined(args.icon)}"></road-icon>
+  ${unsafeHTML(args[' '])}
 </road-alert>
 `;
 
-export const Success = () => html`
-  <road-alert color="success">
-  <road-icon slot="icon" name="alert-success"></road-icon>
-  Success
-</road-alert>
-`;
+export const Playground = Template.bind({});
+Playground.args = {
+  color: 'info',
+  icon: `alert-info`,
+  ' ': `Information`,
+};
 
-export const Warning = () => html`
-  <road-alert color="warning">
-  <road-icon slot="icon" name="alert-warning"></road-icon>
-  Warning
-</road-alert>
-`;
+export const Success = Template.bind({});
+Success.args = {
+  color: 'success',
+  icon: `alert-success`,
+  ' ': `Success`,
+};
 
-export const Danger = () => html`
-  <road-alert color="danger">
-  <road-icon slot="icon" name="alert-danger"></road-icon>
-  Danger
-</road-alert>
-`;
+export const Warning = Template.bind({});
+Warning.args = {
+  color: 'warning',
+  icon: `alert-warning`,
+  ' ': `Warning`,
+};
+
+export const Danger = Template.bind({});
+Danger.args = {
+  color: 'danger',
+  icon: `alert-danger`,
+  ' ': `Danger`,
+};

package/dist/collection/components/autocomplete/autocomplete.js

@@ -12,9 +12,13 @@ export class Autocomplete {
     this.onClick = (value, label) => {
       this.el.querySelector('road-input').value = value;
       this.visible = false;
+      this.roadselected.emit({
+        value: value.toString(),
+        label: label,
+      });
       this.roadSelected.emit({
         value: value.toString(),
-        label: label
+        label: label,
       });
     };
   }
@@ -66,8 +70,8 @@ export class Autocomplete {
     "visible": {}
   }; }
   static get events() { return [{
-      "method": "roadSelected",
-      "name": "roadSelected",
+      "method": "roadselected",
+      "name": "roadselected",
       "bubbles": true,
       "cancelable": true,
       "composed": true,
@@ -80,6 +84,24 @@ export class Autocomplete {
         "resolved": "{ value: string | null | undefined; label: string; }",
         "references": {}
       }
+    }, {
+      "method": "roadSelected",
+      "name": "roadSelected",
+      "bubbles": true,
+      "cancelable": true,
+      "composed": true,
+      "docs": {
+        "tags": [{
+            "name": "internal",
+            "text": undefined
+          }],
+        "text": ""
+      },
+      "complexType": {
+        "original": "{\n    value: string | undefined | null,\n    label: string\n  }",
+        "resolved": "{ value: string | null | undefined; label: string; }",
+        "references": {}
+      }
     }]; }
   static get elementRef() { return "el"; }
   static get listeners() { return [{
@@ -88,6 +110,12 @@ export class Autocomplete {
       "target": undefined,
       "capture": false,
       "passive": false
+    }, {
+      "name": "roadfocus",
+      "method": "handleFocus",
+      "target": undefined,
+      "capture": false,
+      "passive": false
     }, {
       "name": "click",
       "method": "onClickOutside",

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

@@ -1,16 +1,48 @@
 import { html } from 'lit-html';
+import { unsafeHTML } from 'lit-html/directives/unsafe-html.js';
 
 export default {
   title: 'Forms/Autocomplete',
   component: 'road-autocomplete',
   parameters: {
     actions: {
-      handles: ['roadChange', 'roadBlur', 'roadFocus'],
+      handles: ['roadchange', 'roadblur', 'roadfocus'],
     },
   },
+  argTypes: {
+    ' ': {
+      control: 'text',
+    },
+    roadselected: {
+      action: 'roadselected',
+      control: {
+        type: null,
+      },
+    },
+  },
+  args: {
+    options: [
+      { value: 'value1', label: 'value1' },
+      { value: 'value2', label: 'value2' },
+      { value: 'value3', label: 'value3' }
+    ],
+  },
 };
 
-export const Playground = (args) => {
+export const Playground = (args) => html`
+<road-autocomplete .options=${args.options} @roadselected=${event => args.roadselected(event.detail)}>
+  ${unsafeHTML(args[' '])}
+</road-autocomplete>
+`;
+Playground.args = {
+  ' ': `<road-input 
+    class="mb-0" 
+    input-id="country" 
+    label="Country" 
+    debounce="500"></road-input>`,
+};
+
+export const Example = (args) => {
   const getCountry = (event) => {
     fetch(`https://photon.komoot.io/api/?q=${event.detail.value}&osm_tag=place:country&limit=10&lang=en`)
       .then(res => res.json())
@@ -19,30 +51,28 @@ export const Playground = (args) => {
           document.querySelector('road-autocomplete').options = result.features.map(item => {
             return {
               value: item.properties.country,
-              label:item.properties.country
+              label:item.properties.country,
             };
           });
-        })
-  }
+        });
+  };
 
   return html`
-  <road-autocomplete @roadSelected=${event => args.roadSelected(event.detail)}>
-    <road-input 
-      class="mb-0" 
-      input-id="country" 
-      label="Country" 
-      debounce="500" 
-      @roadChange=${event => getCountry(event)}
-      
-    ></road-input>
-  </road-autocomplete>
-
-  <!-- br are here only until we find how to add a margin only for Storybook docs block, do not copy them -->
-  <br><br><br><br><br><br><br><br><br><br><br><br><br>
+    <road-autocomplete @roadselected=${event => args.roadselected(event.detail)}>
+      <road-input 
+        class="mb-0" 
+        input-id="country" 
+        label="Country" 
+        debounce="500" 
+        @roadchange=${event => getCountry(event)}
+      ></road-input>
+    </road-autocomplete>
   `;
 };
-Playground.argTypes = {
-  roadSelected: {
-    action: 'roadSelected',
+Example.parameters = {
+  docs: {
+    source: {
+      type: 'code',
+    },
   },
 };

package/dist/collection/components/avatar/avatar.js

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

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

@@ -1,25 +1,50 @@
 import { html } from 'lit-html';
+import { unsafeHTML } from 'lit-html/directives/unsafe-html.js';
 
 export default {
   title: 'Media/Avatar',
   component: 'road-avatar',
+  argTypes: {
+    ' ': {
+      control: 'text',
+    },
+    '--avatar-background': {
+      table: {
+        defaultValue: { summary: 'var(--background-second)' },
+      },
+      control: {
+        type: null,
+      },
+    },
+    '--avatar-width': {
+      table: {
+        defaultValue: { summary: '3rem' },
+      },
+      control: {
+        type: null,
+      },
+    },
+  },
+  args: {
+    ' ': `<road-img src="https://images.unsplash.com/photo-1527980965255-d3b416303d12?ixlib=rb-1.2.1&ixid=eyJhcHBfaWQiOjEyMDd9&auto=format&fit=crop&w=800&q=80" alt="avatar"></road-img>`,
+  },
 };
 
-export const Image = () => html`
-  <road-avatar>
-  <road-img src="https://images.unsplash.com/photo-1527980965255-d3b416303d12?ixlib=rb-1.2.1&ixid=eyJhcHBfaWQiOjEyMDd9&auto=format&fit=crop&w=800&q=80" alt="avatar"></road-img>
+const Template = (args) => html`
+<road-avatar>
+  ${unsafeHTML(args[' '])}
 </road-avatar>
 `;
 
-export const withNotification = () => html`
-  <road-avatar>
-  <road-img src="https://images.unsplash.com/photo-1527980965255-d3b416303d12?ixlib=rb-1.2.1&ixid=eyJhcHBfaWQiOjEyMDd9&auto=format&fit=crop&w=800&q=80" alt="avatar"></road-img>
-  <road-badge>1</road-badge>
-</road-avatar>
-`;
+export const Playground = Template.bind({});
 
-export const Icon = () => html`
-  <road-avatar>
-  <road-icon name="people-group"></road-icon>
-</road-avatar>
-`;
+export const withNotification = Template.bind({});
+withNotification.args = {
+  ' ': `<road-img src="https://images.unsplash.com/photo-1527980965255-d3b416303d12?ixlib=rb-1.2.1&ixid=eyJhcHBfaWQiOjEyMDd9&auto=format&fit=crop&w=800&q=80" alt="avatar"></road-img>
+  <road-badge>1</road-badge>`,
+};
+
+export const Icon = Template.bind({});
+Icon.args = {
+  ' ': `<road-icon name="people-group"></road-icon>`,
+};

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

@@ -1,52 +1,50 @@
 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/Badge',
   component: 'road-badge',
-};
-
-export const Playground = (args) => html`
-  <a class="text-content d-inline-flex">
-    <road-icon name="alert-notification-outline"></road-icon>
-    <sup>
-      <road-badge color="${args.color}" bubble="${args.bubble}">${args['']}</road-badge>
-    </sup>
-  </a>
-`;
-Playground.args = {
-  bubble: false,
-  color: 'accent',
-  '': '1',
-};
-Playground.argTypes = {
-  color: {
-    options: ['primary', 'secondary', 'accent', 'info', 'success', 'warning', 'danger'],
-    control: {
-      type: 'select',
+  argTypes: {
+    color: {
+      options: ['primary', 'secondary', 'accent', 'info', 'success', 'warning', 'danger'],
+      control: {
+        type: 'select',
+      },
+    },
+    bubble: {
+      control: 'boolean',
+    },
+    ' ': {
+      control: 'text',
     },
   },
-  bubble: {
-    control: 'boolean',
-  },
-  '': {
-    control: 'number',
+  args: {
+    bubble: null,
+    ' ': `1`,
   },
 };
 
-export const Notification = () => html`
+const Template = (args) => html`
 <a class="text-content d-inline-flex">
   <road-icon name="alert-notification-outline"></road-icon>
   <sup>
-    <road-badge color="accent">1</road-badge>
+    <road-badge color="${ifDefined(args.color)}" bubble="${ifDefined(args.bubble)}">${unsafeHTML(args[' '])}</road-badge>
   </sup>
 </a>
 `;
 
-export const Bubble = () => html`
-<a class="text-content d-inline-flex">
-  <road-icon name="people-outline"></road-icon>
-  <sup class="badge-sup">
-    <road-badge color="accent" bubble></road-badge>
-  </sup>
-</a>
-`;
+export const Playground = Template.bind({});
+
+export const Notification = Template.bind({});
+Notification.args = {
+  color: 'accent',
+  ' ': `10`,
+};
+
+export const Bubble = Template.bind({});
+Bubble.args = {
+  color: 'accent',
+  bubble: true,
+  ' ': ``,
+};

package/dist/collection/components/button/button.css

@@ -16,10 +16,10 @@
 
 /**
  * @prop --border-radius: Border radius of the button
+ * @prop --font-size: Font size of the text button
+ * @prop --margin-bottom: Bottom margin of the button
  * @prop --padding-start: Left padding  of the button
  * @prop --padding-end: Right padding of the button
- * @prop --margin-bottom: Bottom margin of the button
- * @prop --font-size: Font size of the text button
  */
 
 
@@ -27,11 +27,11 @@
  -------------------- */
 
 :host {
-  --margin-bottom: 1rem;
   --border-radius: 0.25rem;
+  --font-size: 1rem;
+  --margin-bottom: 1rem;
   --padding-start: 1rem;
   --padding-end: 1rem;
-  --font-size: 1rem;
 
   box-sizing: border-box;
   display: inline-flex;