@roadtrip/components 2.23.0 → 2.25.1

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.css

@@ -1,17 +1,11 @@
 /*
  * Alert
  *
- * Provide contextual feedback messages for typical user actions
- * with the handful of available and flexible alert messages.
- *
- * Default Alert color is Information colors
- *
  * Index
  * - Alert
- * - Alert icon
- * - Alert description
- * - Alert feedback
- *
+ * - Icon
+ * - Description
+ * - Feedback
  */
 
 
@@ -30,7 +24,7 @@
   border-radius: 0.25rem;
 }
 
-/* ALERT ICON
+/* ICON
  -------------------- */
 
 .alert-icon {
@@ -40,7 +34,7 @@
   margin-right: 0.5rem;
 }
 
-/* ALERT DESCRIPTION
+/* DESCRIPTION
  -------------------- */
 
 .alert-description {
@@ -48,11 +42,11 @@
   margin: 0;
 }
 
-/* ALERT FEEDBACK
+/* FEEDBACK
  -------------------- */
 
 /**
- * Alert success
+ * Info
  */
 
 :host(.alert-info) {
@@ -66,7 +60,7 @@
 }
 
 /**
- * Alert success
+ * Success
  */
 
 :host(.alert-success) {
@@ -80,7 +74,7 @@
 }
 
 /**
- * Alert warning
+ * Warning
  */
 
 :host(.alert-warning) {
@@ -94,7 +88,7 @@
 }
 
 /**
- * Alert danger
+ * Danger
  */
 
 :host(.alert-danger) {

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.css

@@ -1,12 +1,9 @@
 /*
  * Autocomplete
  *
- * Autocomplete layer for fields
- *
  * Index
  * - List
  * - Item
- *
  */
 
 :host {

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

@@ -14,7 +14,7 @@ export class Autocomplete {
       this.visible = false;
       this.roadSelected.emit({
         value: value.toString(),
-        label: label
+        label: label,
       });
     };
   }

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

@@ -1,4 +1,5 @@
 import { html } from 'lit-html';
+import { unsafeHTML } from 'lit-html/directives/unsafe-html.js';
 
 export default {
   title: 'Forms/Autocomplete',
@@ -8,9 +9,40 @@ export default {
       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.css

@@ -1,8 +1,20 @@
+/*
+ * Avatar
+ *
+ * Index
+ * - Avatar
+ * - Image
+ * - Badge
+ */
+
 /**
  * @prop --avatar-background: background color of the avatar
  * @prop --avatar-width: width & height of the avatar
  */
 
+/* AVATAR
+ -------------------- */
+
 :host {
   --avatar-background: var(--background-second);
   --avatar-width: 3rem;
@@ -17,6 +29,9 @@
   border-radius: var(--avatar-width);
 }
 
+/* IMAGE
+ -------------------- */
+
 ::slotted(road-img),
 ::slotted(img) {
   width: 100%;
@@ -26,6 +41,9 @@
   border-radius: var(--avatar-width);
 }
 
+/* BADGE
+ -------------------- */
+
 ::slotted(road-badge) {
   position: absolute;
   top: 0;

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.css

@@ -3,8 +3,7 @@
  *
  * Index
  * - Badge
- * - Badge feedback
- *
+ * - Feedback
  */
 
 
@@ -37,11 +36,11 @@
   min-height: 0.5rem;
 }
 
-/* BADGE FEEDBACK
+/* FEEDBACK
  -------------------- */
 
 /**
- * Badge primary
+ * Primary
  */
 
 :host(.badge-primary) {
@@ -50,7 +49,7 @@
 }
 
 /**
- * Badge secondary
+ * Secondary
  */
 
 :host(.badge-secondary) {
@@ -59,7 +58,7 @@
 }
 
 /**
- * Badge accent
+ * Accent
  */
 
 :host(.badge-accent) {
@@ -68,7 +67,7 @@
 }
 
 /**
- * Badge info
+ * Info
  */
 
 :host(.badge-info) {
@@ -77,7 +76,7 @@
 }
 
 /**
- * Badge success
+ * Success
  */
 
 :host(.badge-success) {
@@ -86,7 +85,7 @@
 }
 
 /**
- * Badge warning
+ * Warning
  */
 
 :host(.badge-warning) {
@@ -95,7 +94,7 @@
 }
 
 /**
- * Badge danger
+ * Danger
  */
 
 :host(.badge-danger) {