@roadtrip/components 2.22.1 → 2.25.0

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

@@ -1,12 +1,9 @@
 /*
  * Autocomplete
  *
- * Autocomplete layer for fields
- *
  * Index
  * - List
  * - Item
- *
  */
 
 :host {
@@ -14,6 +11,15 @@
   display: block;
 }
 
+/* INPUT
+ -------------------- */
+
+::slotted(road-input-group),
+::slotted(road-input) {
+  position: relative;
+  z-index: 2;
+}
+
 /* LIST
  -------------------- */
 
@@ -22,8 +28,8 @@
   top: 3rem;
   z-index: 1;
   width: 100%;
-  max-height: 12.5rem;
-  padding: 0 0 0.5rem;
+  max-height: 16rem;
+  padding: 0.5rem 0;
   margin: 0;
   overflow-y: scroll;
   font-family: var(--font, sans-serif);
@@ -31,7 +37,7 @@
   color: var(--text);
   list-style-type: none;
   background: var(--white);
-  border-radius: 0 0 4px 4px;
+  border-radius: 0 0 0.25rem 0.25rem;
   box-shadow: 0 3px 6px rgba(0, 0, 0, 0.16);
 }
 
@@ -47,7 +53,8 @@
  * Hover state
  */
 
-.autocomplete-item:hover {
+.autocomplete-item:hover,
+.autocomplete-item.focus {
   color: var(--secondary-contrast);
   background: var(--secondary);
 }

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

@@ -1,43 +1,36 @@
-import { Component, Element, Host, Listen, Prop, State, h } from '@stencil/core';
+import { Component, Element, Host, Listen, Prop, State, h, Event } from '@stencil/core';
 /**
  * @slot  - Input element for the widget, it should be a road-input element.
  */
 export class Autocomplete {
   constructor() {
     this.visible = false;
-    this.currentValue = '';
     /**
-     * List of options of the select
+     * List of autocomplete options
      */
     this.options = [];
-    /**
-     * If `true`, the user can't submit custom value
-     */
-    this.onlySelect = false;
-    this.onClick = (event) => {
-      this.el.querySelector('road-input').value = event.target.dataset.value;
+    this.onClick = (value, label) => {
+      this.el.querySelector('road-input').value = value;
       this.visible = false;
+      this.roadSelected.emit({
+        value: value.toString(),
+        label: label,
+      });
     };
   }
   handleFocus() {
     this.visible = true;
   }
-  handleChange(event) {
-    this.currentValue = event.detail.value.toLowerCase();
-  }
   onClickOutside(event) {
     if (this.visible && !this.el.contains(event.target)) {
       this.visible = false;
-      if (this.onlySelect) {
-        this.el.querySelector('road-input').value = '';
-      }
     }
   }
   render() {
     return (h(Host, null,
       h("slot", null),
-      this.visible &&
-        h("ul", { class: "autocomplete-list" }, this.options && this.options.filter(element => element.label.toLowerCase().indexOf(this.currentValue) > -1).map(option => (h("li", { class: "autocomplete-item", role: "menuitem", "data-value": option.value, onClick: this.onClick }, option.label))))));
+      this.visible && this.options.length > 0 &&
+        h("ul", { class: "autocomplete-list" }, this.options && this.options.map(option => (h("li", { class: "autocomplete-item", role: "menuitem", onClick: () => this.onClick(option.value, option.label) }, option.label))))));
   }
   static get is() { return "road-autocomplete"; }
   static get encapsulation() { return "scoped"; }
@@ -64,33 +57,30 @@ export class Autocomplete {
       "optional": false,
       "docs": {
         "tags": [],
-        "text": "List of options of the select"
+        "text": "List of autocomplete options"
       },
       "defaultValue": "[]"
-    },
-    "onlySelect": {
-      "type": "boolean",
-      "mutable": false,
-      "complexType": {
-        "original": "boolean",
-        "resolved": "boolean",
-        "references": {}
-      },
-      "required": false,
-      "optional": false,
-      "docs": {
-        "tags": [],
-        "text": "If `true`, the user can't submit custom value"
-      },
-      "attribute": "only-select",
-      "reflect": false,
-      "defaultValue": "false"
     }
   }; }
   static get states() { return {
-    "visible": {},
-    "currentValue": {}
+    "visible": {}
   }; }
+  static get events() { return [{
+      "method": "roadSelected",
+      "name": "roadSelected",
+      "bubbles": true,
+      "cancelable": true,
+      "composed": true,
+      "docs": {
+        "tags": [],
+        "text": "Emitted the value and label of the option selected."
+      },
+      "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 [{
       "name": "roadFocus",
@@ -98,12 +88,6 @@ export class Autocomplete {
       "target": undefined,
       "capture": false,
       "passive": false
-    }, {
-      "name": "roadChange",
-      "method": "handleChange",
-      "target": undefined,
-      "capture": false,
-      "passive": false
     }, {
       "name": "click",
       "method": "onClickOutside",

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

@@ -1,5 +1,4 @@
 import { html } from 'lit-html';
-import { BADGE } from '@geometricpanda/storybook-addon-badges';
 
 export default {
   title: 'Forms/Autocomplete',
@@ -8,94 +7,40 @@ export default {
     actions: {
       handles: ['roadChange', 'roadBlur', 'roadFocus'],
     },
-    badges: [BADGE.DEFAULT, BADGE.BETA]
   },
+  decorators: [(story) => html`<div style="margin-bottom: 20rem">${story()}</div>`],
 };
 
-export const Default = () => {
-  const options = [
-    { value: 'audi', label: 'audi' },
-    { value: 'bmw', label: 'bmw' },
-    { value: 'citroen', label: 'citroën' },
-    { value: 'mercedes-benz', label: 'mercedes-benz' },
-    { value: 'peugeot', label: 'peugeot' },
-    { value: 'renault', label: 'renault' }
-  ];
+export const Playground = (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())
+      .then(
+        result => {
+          document.querySelector('road-autocomplete').options = result.features.map(item => {
+            return {
+              value: item.properties.country,
+              label:item.properties.country
+            };
+          });
+        })
+  }
 
   return html`
-  <road-autocomplete .options=${options}>
-    <road-input-group>
-      <road-input input-id="brand" label="Brand" class="mb-0"></road-input>
-      <label slot="append" class="input-group-text" for="brand">
-        <road-icon name="arrow-drop" focusable="false"></road-icon>
-      </label>
-    </road-input-group>
+  <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>
   `;
 };
-
-export const WithValue = () => {
-  const options = [
-    { value: 'audi', label: 'audi' },
-    { value: 'bmw', label: 'bmw' },
-    { value: 'citroen', label: 'citroën' },
-    { value: 'mercedes-benz', label: 'mercedes-benz' },
-    { value: 'peugeot', label: 'peugeot' },
-    { value: 'renault', label: 'renault' }
-  ];
-
-  return html`
-  <road-autocomplete .options=${options}>
-    <road-input-group>
-      <road-input input-id="brand" label="Brand" value="audi" class="mb-0"></road-input>
-      <label slot="append" class="input-group-text" for="brand">
-        <road-icon name="arrow-drop" focusable="false"></road-icon>
-      </label>
-    </road-input-group>
-  </road-autocomplete>
-  `;
-};
-
-export const Disabled = () => {
-  const options = [
-    { value: 'audi', label: 'audi' },
-    { value: 'bmw', label: 'bmw' },
-    { value: 'citroen', label: 'citroën' },
-    { value: 'mercedes-benz', label: 'mercedes-benz' },
-    { value: 'peugeot', label: 'peugeot' },
-    { value: 'renault', label: 'renault' }
-  ];
-
-  return html`
-  <road-autocomplete .options=${options}>
-    <road-input-group>
-      <road-input input-id="brand" label="Brand" disabled class="mb-0"></road-input>
-      <label slot="append" class="input-group-text" for="brand">
-        <road-icon name="arrow-drop" focusable="false"></road-icon>
-      </label>
-    </road-input-group>
-  </road-autocomplete>
-  `;
-};
-
-export const Error = () => {
-  const options = [
-    { value: 'audi', label: 'audi' },
-    { value: 'bmw', label: 'bmw' },
-    { value: 'citroen', label: 'citroën' },
-    { value: 'mercedes-benz', label: 'mercedes-benz' },
-    { value: 'peugeot', label: 'peugeot' },
-    { value: 'renault', label: 'renault' }
-  ];
-
-  return html`
-  <road-autocomplete .options=${options}>
-    <road-input-group>
-      <road-input input-id="brand" label="Brand" error="Select a Brand" class="mb-0"></road-input>
-      <label slot="append" class="input-group-text" for="brand">
-        <road-icon name="arrow-drop" focusable="false"></road-icon>
-      </label>
-    </road-input-group>
-  </road-autocomplete>
-  `;
+Playground.argTypes = {
+  roadSelected: {
+    action: 'roadSelected',
+  },
 };

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/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) {