@uh-design-system/component-library 0.6.1-rc.0 → 0.7.0

package/dist/collection/components/01-base-components/ds-options/ds-options.css

@@ -0,0 +1,98 @@
+.options-list-inner,
+.options-loading,
+.options-error {
+  max-height: 20rem;
+  overflow: hidden;
+  box-sizing: border-box;
+}
+
+.options-list {
+  position: relative;
+  width: 100%;
+  padding: 0;
+  margin: 0;
+  z-index: 0;
+}
+.options-list:focus {
+  outline: none;
+}
+
+.options-list-inner,
+.options-loading,
+.options-error {
+  overflow-y: auto;
+  list-style-type: none;
+  padding: 0;
+  margin: 0;
+  width: 100%;
+  position: relative;
+  display: flex;
+  flex-direction: column;
+}
+
+.options-loading,
+.options-error {
+  height: 18.5rem;
+  align-items: center;
+  justify-content: center;
+}
+
+.options-loading--loading-text {
+  padding-top: var(--ds-spacing-2xSmall);
+  padding-bottom: var(--ds-spacing-large);
+  text-align: center;
+}
+
+.options-error {
+  color: var(--ds-palette-red-70);
+}
+.options-error--error-message {
+  color: var(--ds-palette-black-95);
+  text-align: center;
+}
+.options-error--error-title {
+  font-size: var(--ds-fontSize-18);
+  font-weight: var(--ds-fontWeight-semibold);
+  margin-top: var(--ds-spacing-xSmall);
+  margin-bottom: var(--ds-spacing-2xSmall);
+}
+.options-error--error-text {
+  padding-bottom: var(--ds-spacing-small);
+}
+
+.top-scrim,
+.bottom-scrim {
+  pointer-events: none;
+  width: 100%;
+  height: 2.75rem;
+  flex: 0 0 auto;
+  min-height: 0;
+  position: sticky;
+  z-index: 1;
+  display: none;
+}
+
+.top-scrim {
+  top: 0;
+  background: linear-gradient(to bottom, var(--ds-palette-white) 0%, var(--ds-overlay-white-00) 100%);
+}
+
+.bottom-scrim {
+  bottom: 0;
+  background: linear-gradient(to top, var(--ds-palette-white) 0%, var(--ds-overlay-white-00) 100%);
+}
+
+.options-list.has-top-scrim .top-scrim {
+  display: block;
+}
+
+.options-list.has-bottom-scrim .bottom-scrim {
+  display: block;
+}
+
+li {
+  cursor: pointer;
+}
+li:hover {
+  background-color: var(--ds-palette-black-05);
+}

package/dist/collection/components/01-base-components/ds-options/ds-options.js

@@ -0,0 +1,354 @@
+import { h } from "@stencil/core";
+export class DsOptions {
+    el;
+    optionsListRef;
+    optionsListInnerRef;
+    dsSelectedValue;
+    dsOptions = [];
+    dsActiveIndex = 0;
+    dsLabelId;
+    dsLoading = false;
+    dsLoadingText = 'Loading options...';
+    dsOptionsEsc;
+    dsOptionsActiveIndexChange;
+    onActiveIndexChange() {
+        setTimeout(() => this.focusActiveOption(), 0);
+    }
+    componentDidLoad() {
+        this.updateScrimClasses();
+    }
+    componentDidUpdate() {
+        this.updateScrimClasses();
+    }
+    handleScroll = () => {
+        this.updateScrimClasses();
+    };
+    updateScrimClasses = () => {
+        const wrapper = this.optionsListRef;
+        const scrollEl = this.optionsListInnerRef;
+        if (!wrapper || !scrollEl)
+            return;
+        const isAtTop = scrollEl.scrollTop === 0;
+        const isAtBottom = Math.ceil(scrollEl.scrollTop + scrollEl.clientHeight) >= scrollEl.scrollHeight;
+        wrapper.classList.toggle('has-top-scrim', !isAtTop);
+        wrapper.classList.toggle('has-bottom-scrim', !isAtBottom);
+        const groupLabels = wrapper.querySelectorAll('.group-label');
+        groupLabels.forEach(label => {
+            const rect = label.getBoundingClientRect();
+            const parentRect = wrapper.getBoundingClientRect();
+            if (scrollEl.scrollTop > 0 && rect.top <= parentRect.top && rect.bottom > parentRect.top) {
+                label.classList.add('shadow');
+            }
+            else {
+                label.classList.remove('shadow');
+            }
+        });
+    };
+    focusActiveOption() {
+        const optionEls = Array.from(this.el.querySelectorAll('ds-option'));
+        if (optionEls[this.dsActiveIndex]) {
+            optionEls[this.dsActiveIndex].focus();
+        }
+    }
+    handleKeyDown = (e) => {
+        const optionEls = Array.from(this.el.querySelectorAll('ds-option'));
+        if (!optionEls.length)
+            return;
+        let nextIndex = this.dsActiveIndex;
+        if (e.key === 'ArrowDown') {
+            e.preventDefault();
+            let safe = 0;
+            do {
+                nextIndex = (nextIndex + 1) % optionEls.length;
+                safe++;
+                if (safe > optionEls.length * 2)
+                    break;
+            } while (optionEls[nextIndex].dsDisabled && nextIndex !== this.dsActiveIndex);
+            this.dsActiveIndex = nextIndex;
+            this.dsOptionsActiveIndexChange.emit(this.dsActiveIndex);
+        }
+        if (e.key === 'ArrowUp') {
+            e.preventDefault();
+            let safe = 0;
+            do {
+                nextIndex = (nextIndex - 1 + optionEls.length) % optionEls.length;
+                safe++;
+                if (safe > optionEls.length * 2)
+                    break;
+            } while (optionEls[nextIndex].dsDisabled && nextIndex !== this.dsActiveIndex);
+            this.dsActiveIndex = nextIndex;
+            this.dsOptionsActiveIndexChange.emit(this.dsActiveIndex);
+        }
+        if (e.key === 'Enter' || e.key === ' ') {
+            e.preventDefault();
+            const option = optionEls[this.dsActiveIndex];
+            if (option && !option.dsDisabled) {
+                option.click();
+            }
+        }
+        if (e.key === 'Tab') {
+            const option = optionEls[this.dsActiveIndex];
+            if (option && !option.dsDisabled) {
+                option.click();
+                this.dsOptionsEsc.emit();
+            }
+        }
+        if (e.key === 'Escape') {
+            e.preventDefault();
+            this.dsOptionsEsc.emit();
+        }
+    };
+    dsOptionsError = false;
+    dsOptionsErrorTitle = "We couldn’t load the options";
+    dsOptionsErrorText = "Try again or if the problem persists contact support.";
+    render() {
+        return (h("div", { key: '7f582725e7e7e4119ba636b2b327b5e530e706cd', class: "options-list", role: "listbox", tabindex: 0, "aria-labelledby": this.dsLabelId, onKeyDown: this.handleKeyDown, ref: el => this.optionsListRef = el, onScroll: this.handleScroll, onFocus: this.updateScrimClasses }, h("slot", { key: '652b05b45610f838be7ced7f4c5b275d7c18d6d4', name: "groups" }), h("div", { key: 'd299689df895de9f7ccc2c716ce99a7fe3d634bd', class: "options-list-inner", ref: el => (this.optionsListInnerRef = el), onScroll: this.handleScroll }, h("div", { key: '124ca6b19c1a4bce6fc1f317d2bdb26c97f60529', class: "top-scrim", "aria-hidden": "true" }), this.dsOptionsError ? (h("div", { class: "options-error" }, h("ds-icon", { dsName: "warning", dsSize: '2rem', class: "options-error-icon" }), h("div", { class: "options-error--error-message" }, h("div", { class: "options-error--error-title" }, this.dsOptionsErrorTitle), h("div", { class: "options-error--error-text" }, this.dsOptionsErrorText)))) : this.dsLoading ? (h("div", { class: "options-loading" }, h("ds-spinner", { dsSize: "large" }), h("div", { class: "options-loading--loading-text" }, this.dsLoadingText))) : (h("slot", null)), h("div", { key: 'c50bb98b3eea026bac446c847b8d0a47136a3156', class: "bottom-scrim", "aria-hidden": "true" }))));
+    }
+    static get is() { return "ds-options"; }
+    static get encapsulation() { return "scoped"; }
+    static get originalStyleUrls() {
+        return {
+            "$": ["ds-options.scss"]
+        };
+    }
+    static get styleUrls() {
+        return {
+            "$": ["ds-options.css"]
+        };
+    }
+    static get properties() {
+        return {
+            "dsSelectedValue": {
+                "type": "string",
+                "attribute": "ds-selected-value",
+                "mutable": false,
+                "complexType": {
+                    "original": "string",
+                    "resolved": "string",
+                    "references": {}
+                },
+                "required": false,
+                "optional": true,
+                "docs": {
+                    "tags": [],
+                    "text": "Currently selected value."
+                },
+                "getter": false,
+                "setter": false,
+                "reflect": false
+            },
+            "dsOptions": {
+                "type": "unknown",
+                "attribute": "ds-options",
+                "mutable": false,
+                "complexType": {
+                    "original": "Array<{ value: string; label: string; disabled?: boolean; description?: string }>",
+                    "resolved": "{ value: string; label: string; disabled?: boolean; description?: string; }[]",
+                    "references": {
+                        "Array": {
+                            "location": "global",
+                            "id": "global::Array"
+                        }
+                    }
+                },
+                "required": false,
+                "optional": false,
+                "docs": {
+                    "tags": [],
+                    "text": "List of options to display.\nEach option should have a value and label, and can optionally be disabled or have a description."
+                },
+                "getter": false,
+                "setter": false,
+                "defaultValue": "[]"
+            },
+            "dsActiveIndex": {
+                "type": "number",
+                "attribute": "ds-active-index",
+                "mutable": false,
+                "complexType": {
+                    "original": "number",
+                    "resolved": "number",
+                    "references": {}
+                },
+                "required": false,
+                "optional": false,
+                "docs": {
+                    "tags": [],
+                    "text": "Index of the currently active (focused) option."
+                },
+                "getter": false,
+                "setter": false,
+                "reflect": false,
+                "defaultValue": "0"
+            },
+            "dsLabelId": {
+                "type": "string",
+                "attribute": "ds-label-id",
+                "mutable": false,
+                "complexType": {
+                    "original": "string",
+                    "resolved": "string",
+                    "references": {}
+                },
+                "required": false,
+                "optional": true,
+                "docs": {
+                    "tags": [],
+                    "text": "The id of the label element for accessibility."
+                },
+                "getter": false,
+                "setter": false,
+                "reflect": false
+            },
+            "dsLoading": {
+                "type": "boolean",
+                "attribute": "ds-loading",
+                "mutable": false,
+                "complexType": {
+                    "original": "boolean",
+                    "resolved": "boolean",
+                    "references": {}
+                },
+                "required": false,
+                "optional": false,
+                "docs": {
+                    "tags": [],
+                    "text": "Show loading spinner and text."
+                },
+                "getter": false,
+                "setter": false,
+                "reflect": false,
+                "defaultValue": "false"
+            },
+            "dsLoadingText": {
+                "type": "string",
+                "attribute": "ds-loading-text",
+                "mutable": false,
+                "complexType": {
+                    "original": "string",
+                    "resolved": "string",
+                    "references": {}
+                },
+                "required": false,
+                "optional": false,
+                "docs": {
+                    "tags": [],
+                    "text": "Text to display when loading options.\nThis is only used when `dsLoading` is true."
+                },
+                "getter": false,
+                "setter": false,
+                "reflect": false,
+                "defaultValue": "'Loading options...'"
+            },
+            "dsOptionsError": {
+                "type": "boolean",
+                "attribute": "ds-options-error",
+                "mutable": false,
+                "complexType": {
+                    "original": "boolean",
+                    "resolved": "boolean",
+                    "references": {}
+                },
+                "required": false,
+                "optional": false,
+                "docs": {
+                    "tags": [],
+                    "text": "Error state for the options."
+                },
+                "getter": false,
+                "setter": false,
+                "reflect": false,
+                "defaultValue": "false"
+            },
+            "dsOptionsErrorTitle": {
+                "type": "string",
+                "attribute": "ds-options-error-title",
+                "mutable": false,
+                "complexType": {
+                    "original": "string",
+                    "resolved": "string",
+                    "references": {}
+                },
+                "required": false,
+                "optional": false,
+                "docs": {
+                    "tags": [],
+                    "text": "Error text to display."
+                },
+                "getter": false,
+                "setter": false,
+                "reflect": false,
+                "defaultValue": "\"We couldn\u2019t load the options\""
+            },
+            "dsOptionsErrorText": {
+                "type": "string",
+                "attribute": "ds-options-error-text",
+                "mutable": false,
+                "complexType": {
+                    "original": "string",
+                    "resolved": "string",
+                    "references": {}
+                },
+                "required": false,
+                "optional": false,
+                "docs": {
+                    "tags": [],
+                    "text": "Error subtext to display."
+                },
+                "getter": false,
+                "setter": false,
+                "reflect": false,
+                "defaultValue": "\"Try again or if the problem persists contact support.\""
+            }
+        };
+    }
+    static get events() {
+        return [{
+                "method": "dsOptionsEsc",
+                "name": "dsOptionsEsc",
+                "bubbles": true,
+                "cancelable": true,
+                "composed": true,
+                "docs": {
+                    "tags": [{
+                            "name": "event",
+                            "text": "dsOptionsEsc"
+                        }],
+                    "text": "Fired when the user presses Escape or otherwise closes the options list."
+                },
+                "complexType": {
+                    "original": "void",
+                    "resolved": "void",
+                    "references": {}
+                }
+            }, {
+                "method": "dsOptionsActiveIndexChange",
+                "name": "dsOptionsActiveIndexChange",
+                "bubbles": true,
+                "cancelable": true,
+                "composed": true,
+                "docs": {
+                    "tags": [{
+                            "name": "event",
+                            "text": "dsOptionsActiveIndexChange"
+                        }, {
+                            "name": "type",
+                            "text": "{number}"
+                        }],
+                    "text": "Fired when the active option index changes (e.g. with keyboard navigation)."
+                },
+                "complexType": {
+                    "original": "number",
+                    "resolved": "number",
+                    "references": {}
+                }
+            }];
+    }
+    static get elementRef() { return "el"; }
+    static get watchers() {
+        return [{
+                "propName": "dsActiveIndex",
+                "methodName": "onActiveIndexChange"
+            }];
+    }
+}