@roadtrip/components 2.25.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.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.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,10 +9,40 @@ export default {
       handles: ['roadChange', 'roadBlur', 'roadFocus'],
     },
   },
-  decorators: [(story) => html`<div style="margin-bottom: 20rem">${story()}</div>`],
+  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())
@@ -20,27 +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>
+    <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.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;

package/dist/collection/components/button/button.js

@@ -13,6 +13,10 @@ export class Button {
      * The color to use from your application's color palette.
      */
     this.color = 'default';
+    /**
+      * The button size.
+      */
+    this.size = 'lg';
     /**
      * The type of the button.
      */
@@ -21,6 +25,10 @@ export class Button {
      * If `true`, the user cannot interact with the button.
      */
     this.disabled = false;
+    /**
+     * Set to `true` for a full-width button.
+     */
+    this.expand = false;
     /**
      * Set to `true` for a transparent button with a border
      */
@@ -105,8 +113,8 @@ export class Button {
       "type": "string",
       "mutable": false,
       "complexType": {
-        "original": "'sm' | 'md'",
-        "resolved": "\"md\" | \"sm\" | undefined",
+        "original": "'sm' | 'md' | 'lg'",
+        "resolved": "\"lg\" | \"md\" | \"sm\" | undefined",
         "references": {}
       },
       "required": false,
@@ -116,7 +124,8 @@ export class Button {
         "text": "The button size."
       },
       "attribute": "size",
-      "reflect": true
+      "reflect": true,
+      "defaultValue": "'lg'"
     },
     "buttonType": {
       "type": "string",
@@ -159,17 +168,18 @@ export class Button {
       "mutable": false,
       "complexType": {
         "original": "boolean",
-        "resolved": "boolean | undefined",
+        "resolved": "boolean",
         "references": {}
       },
       "required": false,
-      "optional": true,
+      "optional": false,
       "docs": {
         "tags": [],
         "text": "Set to `true` for a full-width button."
       },
       "attribute": "expand",
-      "reflect": true
+      "reflect": true,
+      "defaultValue": "false"
     },
     "download": {
       "type": "string",