add async options and data stories

Author: JesmoDev

packages/uui-combobox/lib/uui-combobox-async-options-example.ts

@@ -0,0 +1,65 @@
+import { html, LitElement } from 'lit';
+import { customElement, property, state } from 'lit/decorators.js';
+
+interface Fruit {
+  name: string;
+  value: string;
+}
+
+const data: Array<Fruit> = [
+  { name: 'Apple', value: 'apple' },
+  { name: 'Orange', value: 'orange' },
+  { name: 'Banana', value: 'banana' },
+  { name: 'Pear', value: 'pear' },
+  { name: 'Grape', value: 'grape' },
+  { name: 'Strawberry', value: 'strawberry' },
+  { name: 'Watermelon', value: 'watermelon' },
+  { name: 'Pineapple', value: 'pineapple' },
+  { name: 'Coconut', value: 'coconut' },
+  { name: 'Mango', value: 'mango' },
+  { name: 'Papaya', value: 'papaya' },
+  { name: 'Kiwi', value: 'kiwi' },
+  { name: 'Avocado', value: 'avocado' },
+  { name: 'Pomegranate', value: 'pomegranate' },
+  { name: 'Cherry', value: 'cherry' },
+  { name: 'Lemon', value: 'lemon' },
+  { name: 'Lime', value: 'lime' },
+];
+
+async function getFruits() {
+  return Promise.resolve(data);
+}
+
+@customElement('uui-combobox-async-options-example')
+export class UUIComboboxAsyncOptionsExampleElement extends LitElement {
+  @state()
+  _options: any[] = [];
+
+  connectedCallback() {
+    super.connectedCallback();
+    this._fetchData();
+  }
+
+  private _fetchData = async () => {
+    const response = await getFruits();
+    this._options = [...response];
+  };
+
+  @property()
+  preselected = 'apple';
+
+  render() {
+    return html`
+      <uui-combobox value=${this.preselected}>
+        <uui-combobox-list>
+          ${this._options.map(
+            option =>
+              html`<uui-combobox-list-option value="${option.value}"
+                >${option.name}</uui-combobox-list-option
+              >`
+          )}
+        </uui-combobox-list>
+      </uui-combobox>
+    `;
+  }
+}

packages/uui-combobox/lib/uui-combobox.story.ts

@@ -1,5 +1,6 @@
 import '.';
 import './uui-combobox-async-example';
+import './uui-combobox-async-options-example';
 
 import { Story } from '@storybook/web-components';
 import { html } from 'lit-html';
@@ -23,6 +24,14 @@ export default {
   },
 };
 
+export const AsyncOptions: Story = () =>
+  html`
+    <uui-combobox-async-options-example></uui-combobox-async-options-example>
+  `;
+
+export const AsyncData: Story = () =>
+  html`<uui-combobox-async-example></uui-combobox-async-example>`;
+
 const fruits = [
   'apple',
   'orange',
@@ -389,8 +398,3 @@ CountrySelect.args = {
   selected: 'DK',
   regions: RegionsAndCountries,
 };
-
-/*
-export const AsyncData: Story = () =>
-  html`<uui-combobox-async-example></uui-combobox-async-example>`;
-*/