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

package/dist/collection/components/01-base-components/ds-radio-button-group/ds-radio-button-group.js

@@ -12,27 +12,31 @@ export class DsRadioButtonGroup {
     inheritedAttributes = {};
     el;
     internals;
+    dsRadioGroupValueChange;
+    dsRadioGroupInvalidStateChange;
+    dsChange;
+    dsSubmitInvalid;
+    dsValidity;
     dsLegend;
     dsAssistiveText;
     dsValue;
     dsDirection = 'vertical';
     dsErrorText = '';
     dsRequired = false;
-    validationMessage;
-    showInternalsValidationMessage = false;
     focusedChildRadioButton;
-    dsRadioGroupValueChange;
-    dsRadioGroupInvalidStateChange;
-    dsChange;
+    wasInvalidOnBlur = false;
+    async dsFocus() {
+        this.getEnabledRadios()?.[0]?.dsFocus();
+    }
+    async dsCheckValidity() {
+        return this.internals?.checkValidity();
+    }
     getLegendText = () => {
         if (this.dsRequired) {
             return getRequiredText(this.dsLegend);
         }
         return this.dsLegend;
     };
-    getValidationMessage() {
-        return this.dsErrorText || (this.showInternalsValidationMessage ? this.internals?.validationMessage : '');
-    }
     getRadios = () => {
         return Array.from(this.el.querySelectorAll('ds-radio-button'));
     };
@@ -60,14 +64,35 @@ export class DsRadioButtonGroup {
         }
     };
     formResetCallback() {
-        this.internals?.setValidity({});
+        this.dsErrorText = '';
+        if (this.dsRequired) {
+            this.internals?.setValidity({ valueMissing: true }, atLeastOneOption(), this.getRadios()?.[0].querySelector('input'));
+        }
+        else {
+            this.internals?.setValidity({});
+        }
+    }
+    connectedCallback() {
+        if (this.internals?.form) {
+            this.el.addEventListener('invalid', this.handleInvalid);
+        }
     }
     disconnectedCallback() {
+        if (this.internals?.form) {
+            this.el.removeEventListener('invalid', this.handleInvalid);
+        }
         if (this.childBlurTimeout) {
             clearTimeout(this.childBlurTimeout);
         }
         this.childBlurTimeout = null;
     }
+    handleInvalid = async (e) => {
+        e.preventDefault();
+        this.dsSubmitInvalid.emit({
+            flag: 'customError',
+            message: this.internals?.validationMessage,
+        });
+    };
     componentWillLoad() {
         this.inheritedAttributes = inheritAriaAttributes(this.el, ['aria-labelledby']);
         this.updateFocusableRadioButton();
@@ -77,26 +102,34 @@ export class DsRadioButtonGroup {
             element.setAttribute('ds-errors-disabled', 'true');
         });
         if (this.dsRequired) {
-            this.internals?.setValidity({ valueMissing: true }, atLeastOneOption(), this.getRadios()?.[0].shadowRoot.querySelector('input'));
+            this.internals?.setValidity({ valueMissing: true }, atLeastOneOption(), this.getRadios()?.[0].querySelector('input'));
         }
-        this.validationMessage = this.dsErrorText;
     }
     async getValue() {
         return this.dsValue;
     }
     errorObserver(newValue) {
-        this.dsRadioGroupInvalidStateChange.emit(!!newValue);
+        this.dsRadioGroupInvalidStateChange.emit(newValue);
     }
     dsValueObserver(value) {
-        this.dsChange.emit(value);
+        this.dsChange.emit({ value: value });
         if (this.dsRequired) {
-            this.internals?.setValidity({ valueMissing: !value }, atLeastOneOption(), this.getRadios()?.[0].shadowRoot.querySelector('input'));
+            this.internals?.setValidity({ valueMissing: !value }, atLeastOneOption(), this.getRadios()?.[0].querySelector('input'));
+        }
+        if (this.wasInvalidOnBlur) {
+            this.dsValidity.emit({
+                flag: this.internals?.validity.valid ? 'valid' : 'customError',
+                message: this.internals?.validationMessage,
+            });
         }
     }
     focusedChildRadioButtonObserver(newValue) {
-        if (!newValue && !this.showInternalsValidationMessage) {
-            this.showInternalsValidationMessage = true;
-            this.validationMessage = this.getValidationMessage();
+        if (!newValue) {
+            this.wasInvalidOnBlur = !this.internals?.validity.valid;
+            this.dsValidity.emit({
+                flag: this.internals?.validity.valid ? 'valid' : 'customError',
+                message: this.internals?.validationMessage,
+            });
         }
     }
     onInputChange(e) {
@@ -105,7 +138,6 @@ export class DsRadioButtonGroup {
         this.dsValue = targetElem.dsValue;
         this.dsRadioGroupValueChange.emit(this.dsValue);
         this.updateFocusableRadioButton();
-        this.validationMessage = this.getValidationMessage();
     }
     listenFocus(e) {
         this.focusedChildRadioButton = e.detail;
@@ -121,15 +153,13 @@ export class DsRadioButtonGroup {
         if (!['ArrowUp', 'ArrowLeft', 'ArrowDown', 'ArrowRight'].includes(e.key)) {
             return;
         }
-        if (e.target && !this.el.contains(e.target)) {
-            return;
-        }
         const radios = this.getEnabledRadios();
-        if (e.target && !radios.includes(e.target)) {
+        const targetRadio = e.target.closest('ds-radio-button');
+        if (!targetRadio || !radios.includes(targetRadio)) {
             return;
         }
         e.preventDefault();
-        const currentIndex = radios.findIndex(r => r === e.target);
+        const currentIndex = radios.findIndex(r => r === targetRadio);
         let nextIndex;
         if (['ArrowUp', 'ArrowLeft'].includes(e.key)) {
             nextIndex = currentIndex === 0 ? radios.length - 1 : currentIndex - 1;
@@ -150,7 +180,7 @@ export class DsRadioButtonGroup {
         });
         const errorClasses = classNames('ds-radio-button-group__error');
         const ariaDescribedBy = [!!this.dsAssistiveText && this.assistiveTextId, !!this.dsErrorText && this.errorTextId].filter(Boolean).join(' ');
-        return (h(Host, { key: '972f15a528ec55acde4da16683b3cef677627afb', "data-invalid": !!this.dsErrorText || undefined }, h("fieldset", { key: 'ce24795bb19766c04e2686fb890d8e38ed958f93', class: classes, "aria-describedby": ariaDescribedBy, ...this.inheritedAttributes }, h("legend", { key: 'aec84ec0160c06f225f67912a60c859783b0e53a', class: legendClasses }, h("slot", { key: '7229c4b2b3525594140985145222c063dbe63b7f', name: "legend" }, this.getLegendText())), h("slot", { key: 'e7200d8d871339c3d5808d598fa1e7c3f37e5dbf', name: "assistiveText" }, this.dsAssistiveText && (h("small", { key: '190ccbff250213a351ea5b0f0f3b36adb8b6858a', class: assistiveTextClasses, id: this.assistiveTextId }, this.dsAssistiveText))), h("div", { key: 'b7e980f078f49a825286f19e3e7f97d680baaa79', class: radioButtonsSlotClasses }, h("slot", { key: '6bed04e9c4fbc195f3bd382fae513a121081ede9', onSlotchange: this.updateFocusableRadioButton })), (!!this.dsErrorText || this.dsRequired) && (h("slot", { key: 'cd4e3f4a193f03cb9e18fdecdf28b2190edfb2e5', name: "validity" }, h("div", { key: '130e56b6867668bdd3d741d4d27c3417933804b2', class: errorClasses }, h("ds-input-validity", { key: '65d43e2bfe635907cde978234ab4afb0f0c2e286', id: this.errorTextId, dsText: this.validationMessage, dsType: "error", dsAriaLive: "polite", dsAriaAtomic: "true" })))))));
+        return (h(Host, { key: '5a19a07e448773553910d2be7782b4e8fc617478', "data-invalid": !!this.dsErrorText || undefined }, h("fieldset", { key: 'b0c4580faee8ec5cc2ee7d8fcb0286903b9ac751', class: classes, "aria-describedby": ariaDescribedBy, ...this.inheritedAttributes }, h("legend", { key: 'f3211e7670b7aaf8bb54bb5a9700ebf7c88d576a', class: legendClasses }, h("slot", { key: '09dd3b3cfeeaa31342a9306cbada63b78f59447f', name: "legend" }, this.getLegendText())), h("slot", { key: '09c341944343b701c4aa4573c9dec1a98ac53a9f', name: "assistiveText" }, this.dsAssistiveText && (h("small", { key: '779c7467c444074e1aeddc774a6873820823be75', class: assistiveTextClasses, id: this.assistiveTextId }, this.dsAssistiveText))), h("div", { key: 'e13141e7cc96dc7438b2ba12af97671a5a73f4ff', class: radioButtonsSlotClasses }, h("slot", { key: '3873d2e4a333f491089738d4f49614e4105d1d3f', onSlotchange: this.updateFocusableRadioButton })), !!this.dsErrorText && (h("slot", { key: 'cd1e9e8f3313ef809939888fe8cf98d1db7400ef', name: "validity" }, h("div", { key: '1a345a57fef5571de70bd1ac7b45045b3296681d', class: errorClasses }, h("ds-input-validity", { key: '880e73ee761e29e187ed80f4e44b00f7f3e3771b', id: this.errorTextId, dsText: this.dsErrorText, dsType: "error", dsAriaLive: "polite", dsAriaAtomic: "true" })))))));
     }
     static get is() { return "ds-radio-button-group"; }
     static get encapsulation() { return "shadow"; }
@@ -289,9 +319,8 @@ export class DsRadioButtonGroup {
     }
     static get states() {
         return {
-            "validationMessage": {},
-            "showInternalsValidationMessage": {},
-            "focusedChildRadioButton": {}
+            "focusedChildRadioButton": {},
+            "wasInvalidOnBlur": {}
         };
     }
     static get events() {
@@ -318,11 +347,11 @@ export class DsRadioButtonGroup {
                 "composed": true,
                 "docs": {
                     "tags": [],
-                    "text": "The `dsRadioGroupInvalidStateChange` event is emitted when the\n`dsErrorText` property changes. The event `detail` will be `false`\nif the `dsErrorText` is empty, otherwise `true`.\nThis event is mainly used internallty to synchronize the invalid\nstate of radio buttons."
+                    "text": "The `dsRadioGroupInvalidStateChange` event is emitted when the\n`dsErrorText` property changes. The event `detail` is `dsErrorText`.\nThis event is mainly used internally to synchronize the invalid\nstate of radio buttons."
                 },
                 "complexType": {
-                    "original": "boolean",
-                    "resolved": "boolean",
+                    "original": "string",
+                    "resolved": "string",
                     "references": {}
                 }
             }, {
@@ -336,14 +365,96 @@ export class DsRadioButtonGroup {
                     "text": "The `dsChange` event is emitted each time the `dsValue` of the\nradio button group is changed."
                 },
                 "complexType": {
-                    "original": "string",
-                    "resolved": "string",
-                    "references": {}
+                    "original": "DsRadioButtonGroupChangeEvent",
+                    "resolved": "{ value: string; }",
+                    "references": {
+                        "DsRadioButtonGroupChangeEvent": {
+                            "location": "local",
+                            "path": "/Users/teemuparssinen/hy/uh-design-system/component-library/packages/component-library/src/components/01-base-components/ds-radio-button-group/ds-radio-button-group.tsx",
+                            "id": "src/components/01-base-components/ds-radio-button-group/ds-radio-button-group.tsx::DsRadioButtonGroupChangeEvent"
+                        }
+                    }
+                }
+            }, {
+                "method": "dsSubmitInvalid",
+                "name": "dsSubmitInvalid",
+                "bubbles": true,
+                "cancelable": true,
+                "composed": true,
+                "docs": {
+                    "tags": [],
+                    "text": "The `dsSubmitInvalid` event is emitted when the group is invalid when attempting to submit a form.\nCalling `dsCheckValidity()` method will also emit this event if the group is invalid."
+                },
+                "complexType": {
+                    "original": "DsSubmitInvalidEvent",
+                    "resolved": "{ flag: validityFlag; message: string; }",
+                    "references": {
+                        "DsSubmitInvalidEvent": {
+                            "location": "import",
+                            "path": "../../../utils/controls/controlUtils",
+                            "id": "src/utils/controls/controlUtils.ts::DsSubmitInvalidEvent"
+                        }
+                    }
+                }
+            }, {
+                "method": "dsValidity",
+                "name": "dsValidity",
+                "bubbles": true,
+                "cancelable": true,
+                "composed": true,
+                "docs": {
+                    "tags": [],
+                    "text": "The `dsValidity` event is emitted when the group's validity state changes."
+                },
+                "complexType": {
+                    "original": "DsValidityEvent",
+                    "resolved": "{ flag: validityFlag; message?: string; }",
+                    "references": {
+                        "DsValidityEvent": {
+                            "location": "import",
+                            "path": "../../../utils/controls/controlUtils",
+                            "id": "src/utils/controls/controlUtils.ts::DsValidityEvent"
+                        }
+                    }
                 }
             }];
     }
     static get methods() {
         return {
+            "dsFocus": {
+                "complexType": {
+                    "signature": "() => Promise<void>",
+                    "parameters": [],
+                    "references": {
+                        "Promise": {
+                            "location": "global",
+                            "id": "global::Promise"
+                        }
+                    },
+                    "return": "Promise<void>"
+                },
+                "docs": {
+                    "text": "",
+                    "tags": []
+                }
+            },
+            "dsCheckValidity": {
+                "complexType": {
+                    "signature": "() => Promise<boolean>",
+                    "parameters": [],
+                    "references": {
+                        "Promise": {
+                            "location": "global",
+                            "id": "global::Promise"
+                        }
+                    },
+                    "return": "Promise<boolean>"
+                },
+                "docs": {
+                    "text": "Returns true if group has no validity problems; false otherwise.\nFires an invalid event at the element in the latter case.",
+                    "tags": []
+                }
+            },
             "getValue": {
                 "complexType": {
                     "signature": "() => Promise<string>",
@@ -366,9 +477,6 @@ export class DsRadioButtonGroup {
     static get elementRef() { return "el"; }
     static get watchers() {
         return [{
-                "propName": "validationMessage",
-                "methodName": "errorObserver"
-            }, {
                 "propName": "dsErrorText",
                 "methodName": "errorObserver"
             }, {
@@ -401,7 +509,7 @@ export class DsRadioButtonGroup {
             }, {
                 "name": "keydown",
                 "method": "onKeyDown",
-                "target": "document",
+                "target": undefined,
                 "capture": false,
                 "passive": false
             }];

package/dist/collection/components/01-base-components/ds-radio-button-group/stories/ds-radio-button-group.stories.js

@@ -31,16 +31,16 @@ export const Default = {
         let radioButtons = [];
         await waitFor(() => {
             radioButtons = Array.from(dsElem.querySelectorAll('ds-radio-button'));
-            expect(radioButtons[0].shadowRoot.querySelector('input')).not.toBeNull();
+            expect(radioButtons[0].querySelector('input')).not.toBeNull();
         });
         await step('Clicking radio button should select it', async () => {
-            userEvent.click(radioButtons[1].shadowRoot.querySelector('input'));
+            userEvent.click(radioButtons[1].querySelector('input'));
             await waitFor(() => {
                 expect(radioButtons[1].dsChecked).toBe(true);
             });
         });
         await step('Clicking another button should select it and unselect previous selected item', async () => {
-            userEvent.click(radioButtons[0].shadowRoot.querySelector('input'));
+            userEvent.click(radioButtons[0].querySelector('input'));
             await waitFor(() => {
                 expect(radioButtons[1].dsChecked).toBe(false);
                 expect(radioButtons[0].dsChecked).toBe(true);

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

@@ -0,0 +1,214 @@
+:root,
+:host {
+  --ds-breakpoint-xSmall: 20rem;
+  --ds-breakpoint-small: 30rem;
+  --ds-breakpoint-medium: 60rem;
+  --ds-breakpoint-large: 75rem;
+  --ds-breakpoint-xLarge: 90rem;
+}
+
+:host {
+  display: inline-block;
+  width: 100%;
+}
+@media (min-width: 30rem) {
+  :host {
+    width: 20rem;
+  }
+}
+:host > div {
+  display: flex;
+  flex-direction: column;
+  position: relative;
+}
+
+.native-select-wrapper, .custom-select {
+  position: relative;
+  display: flex;
+  align-items: center;
+  border: var(--ds-borderWidth-thin) solid var(--ds-palette-black-50);
+  background-color: var(--ds-palette-white);
+  color: var(--ds-palette-black-70);
+  cursor: pointer;
+  box-sizing: border-box;
+  height: 2.75rem;
+  width: 100%;
+}
+.disabled.native-select-wrapper, .disabled.custom-select {
+  background-color: var(--ds-overlay-black-10);
+  border-color: var(--ds-overlay-black-15);
+  color: var(--ds-palette-black-40);
+  cursor: not-allowed;
+}
+.disabled.native-select-wrapper .dropdown-icon, .disabled.custom-select .dropdown-icon {
+  color: var(--ds-palette-black-40);
+  border-left-color: var(--ds-overlay-black-15);
+  cursor: not-allowed;
+}
+.invalid.native-select-wrapper, .invalid.custom-select {
+  background-color: var(--ds-palette-red-05);
+  border-color: var(--ds-palette-red-50);
+}
+.invalid.native-select-wrapper:not(.open):not(.disabled):active, .invalid.custom-select:not(.open):not(.disabled):active {
+  background-color: var(--ds-palette-red-20);
+  border-color: var(--ds-palette-red-50);
+}
+.native-select-wrapper:not(.open):not(.invalid):not(.disabled):hover, .custom-select:not(.open):not(.invalid):not(.disabled):hover {
+  background-color: var(--ds-palette-black-10);
+}
+
+.custom-select .selected-option {
+  display: flex;
+  align-items: center;
+  gap: var(--ds-spacing-2xSmall);
+}
+.custom-select .placeholder-icon {
+  font-size: var(--ds-fontSize-16);
+}
+.custom-select--open + .options-container {
+  display: block;
+  box-shadow: 0rem var(--ds-spacing-4xSmall) var(--ds-spacing-3xSmall) calc(-1 * var(--ds-spacing-4xSmall)) var(--ds-overlay-black-15), 0rem var(--ds-spacing-3xSmall) calc(var(--ds-spacing-xSmall) / 2) calc(-0.5 * var(--ds-spacing-4xSmall)) var(--ds-overlay-black-15);
+}
+.custom-select--open .options-list {
+  display: block;
+}
+.custom-select:not(.custom-select--open):not(.custom-select--invalid):not(.custom-select--disabled):hover {
+  background-color: var(--ds-palette-black-10);
+}
+.custom-select:active:not(.custom-select--open):not(.custom-select--invalid):not(.custom-select--disabled) {
+  background-color: var(--ds-palette-black-20);
+}
+.custom-select--open, .custom-select:focus-visible {
+  box-shadow: 0 0 0 var(--ds-borderWidth-thin) var(--ds-palette-white);
+  outline: var(--ds-borderWidth-thin) solid var(--ds-palette-black-95);
+  outline-offset: calc(var(--ds-borderWidth-thin) * 1);
+}
+.custom-select--open:not(.custom-select--open--invalid, .custom-select:focus-visible--invalid), .custom-select:focus-visible:not(.custom-select--open--invalid, .custom-select:focus-visible--invalid) {
+  border-color: var(--ds-palette-mainBlue-70);
+}
+.custom-select--disabled {
+  background-color: var(--ds-overlay-black-10);
+  border-color: var(--ds-overlay-black-15);
+  color: var(--ds-palette-black-40);
+  cursor: not-allowed;
+}
+.custom-select--disabled .dropdown-icon {
+  color: var(--ds-palette-black-40);
+  border-left-color: var(--ds-overlay-black-15);
+  cursor: not-allowed;
+}
+.custom-select--invalid {
+  background-color: var(--ds-palette-red-05);
+  border-color: var(--ds-palette-red-50);
+}
+.custom-select--invalid:not(.custom-select--invalid--open):not(.custom-select--invalid--disabled):active {
+  background-color: var(--ds-palette-red-20);
+  border-color: var(--ds-palette-red-50);
+}
+
+.selected-option {
+  flex: 1;
+  font-size: var(--ds-fontSize-16);
+  color: inherit;
+  white-space: nowrap;
+  overflow: hidden;
+  text-overflow: ellipsis;
+  padding-left: var(--ds-spacing-xSmall);
+  padding-right: var(--ds-spacing-xSmall);
+}
+.custom-select--has-icon .selected-option {
+  padding-left: var(--ds-spacing-2xSmall);
+  padding-right: var(--ds-spacing-2xSmall);
+}
+
+.dropdown-icon {
+  align-items: center;
+  align-self: stretch;
+  border-left: var(--ds-borderWidth-hairline) solid var(--ds-overlay-black-15);
+  color: var(--ds-palette-black-70);
+  z-index: 2;
+  pointer-events: none;
+  padding: 0 var(--ds-spacing-2xSmall);
+}
+
+.clear-button,
+.dropdown-icon {
+  cursor: pointer;
+}
+
+.select-title {
+  display: inline-block;
+  font-weight: var(--ds-fontWeight-semibold);
+  margin-bottom: var(--ds-spacing-2xSmall);
+  color: var(--ds-palette-black-95);
+}
+
+.selected-text {
+  flex: 1;
+  padding: 0 var(--ds-spacing-xSmall);
+  font-size: var(--ds-fontSize-16);
+  color: inherit;
+  white-space: nowrap;
+  overflow: hidden;
+  text-overflow: ellipsis;
+}
+
+.options-container {
+  display: none;
+  position: absolute;
+  top: 100%;
+  left: 0;
+  right: 0;
+  z-index: 10;
+  border: var(--ds-borderWidth-hairline) solid var(--ds-palette-black-20);
+  background-color: var(--ds-palette-white);
+}
+
+.native-select {
+  position: absolute;
+  top: 0;
+  left: 0;
+  width: 100%;
+  height: 100%;
+  opacity: 0;
+  cursor: pointer;
+  z-index: 1;
+  appearance: none;
+  -webkit-appearance: none;
+  -moz-appearance: none;
+  border: none;
+  outline: none;
+  padding: 0 var(--ds-spacing-2xSmall);
+  font-size: var(--ds-fontSize-16);
+  font-family: inherit;
+  background-color: transparent;
+  color: inherit;
+  flex: 1;
+}
+.native-select::placeholder {
+  color: var(--ds-palette-black-70);
+}
+.native-select:disabled {
+  background-color: var(--ds-overlay-black-10);
+  color: var(--ds-palette-black-40);
+  cursor: not-allowed;
+}
+
+.native-select-wrapper:hover {
+  background-color: var(--ds-palette-black-10);
+}
+.native-select-wrapper:focus-within {
+  box-shadow: 0 0 0 var(--ds-borderWidth-thin) var(--ds-palette-white);
+  outline: var(--ds-borderWidth-thin) solid var(--ds-palette-black-95);
+  outline-offset: calc(var(--ds-borderWidth-thin) * 1);
+}
+.native-select-wrapper--disabled {
+  background-color: var(--ds-overlay-black-10);
+  border-color: var(--ds-overlay-black-15);
+  color: var(--ds-palette-black-40);
+  cursor: not-allowed;
+}
+.native-select-wrapper--invalid {
+  background-color: var(--ds-palette-red-05);
+  border-color: var(--ds-palette-red-50);
+}