@uh-design-system/component-library 0.5.2 → 0.6.0

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

@@ -0,0 +1,360 @@
+import { h, Host } from "@stencil/core";
+import classNames from "classnames";
+import { idGenerator } from "../../../utils/utils";
+import { inheritAriaAttributes } from "../../../utils/attributes/attributes";
+import { atLeastOneOption, getRequiredText } from "../../../utils/controls/controlUtils";
+const radioButtonGroupIdGenerator = idGenerator('ds-radio-button-group');
+export class DsRadioButtonGroup {
+    fieldsetId = radioButtonGroupIdGenerator.next().value;
+    errorTextId = `${this.fieldsetId}-error`;
+    assistiveTextId = `${this.fieldsetId}-assistive-text`;
+    inheritedAttributes = {};
+    el;
+    internals;
+    dsLegend;
+    dsAssistiveText;
+    dsValue;
+    dsDirection = 'vertical';
+    dsErrorText = '';
+    dsRequired = false;
+    showInternalsValidationMessage = false;
+    dsRadioGroupValueChange;
+    dsRadioGroupInvalidStateChange;
+    dsChange;
+    getLegendText = () => {
+        if (this.dsRequired) {
+            return getRequiredText(this.dsLegend);
+        }
+        return this.dsLegend;
+    };
+    getValidationMessage = () => this.dsErrorText || (this.showInternalsValidationMessage ? this.internals?.validationMessage : '');
+    getRadios = () => {
+        return Array.from(this.el.querySelectorAll('ds-radio-button'));
+    };
+    getEnabledRadios = () => {
+        return this.getRadios().filter(e => !e.dsDisabled);
+    };
+    updateRadios = (updateFn) => {
+        this.getRadios().forEach(updateFn);
+    };
+    updateFocusableRadioButton = () => {
+        const radios = this.getEnabledRadios();
+        if (!radios.length) {
+            return;
+        }
+        let focusableBtn = null;
+        for (const radio of radios) {
+            const isFocusable = radio.dsValue === this.dsValue;
+            radio.setFocusable(isFocusable);
+            if (isFocusable) {
+                focusableBtn = radio;
+            }
+        }
+        if (!focusableBtn) {
+            radios[0].setFocusable(true);
+        }
+    };
+    formResetCallback() {
+        this.internals?.setValidity({});
+    }
+    componentWillLoad() {
+        this.inheritedAttributes = inheritAriaAttributes(this.el, ['aria-labelledby']);
+        this.updateFocusableRadioButton();
+    }
+    componentDidLoad() {
+        this.updateRadios(element => {
+            element.setAttribute('ds-errors-disabled', 'true');
+        });
+        if (this.dsRequired) {
+            this.internals?.setValidity({ valueMissing: true }, atLeastOneOption(), this.getRadios()?.[0].shadowRoot.querySelector('input'));
+        }
+    }
+    async getValue() {
+        return this.dsValue;
+    }
+    errorTextObserver(errorText) {
+        this.dsRadioGroupInvalidStateChange.emit(!!errorText);
+    }
+    dsValueObserver(value) {
+        this.dsChange.emit(value);
+        if (this.dsRequired) {
+            this.internals?.setValidity({ valueMissing: !value }, atLeastOneOption(), this.getRadios()?.[0].shadowRoot.querySelector('input'));
+        }
+    }
+    onInputChange(e) {
+        e.stopPropagation();
+        const targetElem = e.target;
+        this.dsValue = targetElem.dsValue;
+        this.dsRadioGroupValueChange.emit(this.dsValue);
+        this.updateFocusableRadioButton();
+    }
+    onKeyDown(e) {
+        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)) {
+            return;
+        }
+        e.preventDefault();
+        const currentIndex = radios.findIndex(r => r === e.target);
+        let nextIndex;
+        if (['ArrowUp', 'ArrowLeft'].includes(e.key)) {
+            nextIndex = currentIndex === 0 ? radios.length - 1 : currentIndex - 1;
+        }
+        if (['ArrowDown', 'ArrowRight'].includes(e.key)) {
+            nextIndex = (currentIndex + 1) % radios.length;
+        }
+        const nextElem = radios[nextIndex];
+        nextElem.dsFocus();
+        nextElem.setChecked();
+    }
+    render() {
+        const classes = classNames('ds-radio-button-group');
+        const legendClasses = classNames('ds-radio-button-group__legend');
+        const assistiveTextClasses = classNames('ds-radio-button-group__assistive-text');
+        const radioButtonsSlotClasses = classNames('ds-radio-button-group__radio-buttons-slot', {
+            'ds-radio-button-group__radio-buttons-slot--horizontal': this.dsDirection === 'horizontal',
+        });
+        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: 'fd0fece58fea50d7ea0672b7f49608c2cdcb306e', "data-invalid": !!this.dsErrorText || undefined }, h("fieldset", { key: '809c66ac58f880345c231b2930ddd9c91c61cbc2', class: classes, "aria-describedby": ariaDescribedBy, ...this.inheritedAttributes }, h("legend", { key: '5194fa04e6645381ef83ad5b4f09c98ea6757da4', class: legendClasses }, h("slot", { key: '2944e5176ce596d6ab5ee6ee735f5b1e5a4e892b', name: "legend" }, this.getLegendText())), h("slot", { key: '3df729bf79cef8d07e88c3e52e337a54a3fb4ead', name: "assistiveText" }, this.dsAssistiveText && (h("small", { key: '36148c44fd5cc17ae506ab598ff79de41e23b71f', class: assistiveTextClasses, id: this.assistiveTextId }, this.dsAssistiveText))), h("div", { key: '54380add5970ee72c0357b9562815d39a95602f0', class: radioButtonsSlotClasses }, h("slot", { key: '3ec766be90173f61dbb76b762c7f6d3f9781570f', onSlotchange: this.updateFocusableRadioButton })), (!!this.dsErrorText || this.dsRequired) && (h("slot", { key: 'c8ae86acd96ecba84d7ab83dad731511629e3f4b', name: "validity" }, h("div", { key: 'da0ce15f076e2c76ca040a6ad6100d706e576862', class: errorClasses }, h("ds-input-validity", { key: 'd9beed52855b81a8125cb0c6498b023357383328', id: this.errorTextId, dsText: this.getValidationMessage(), dsType: "error", dsAriaLive: "polite", dsAriaAtomic: "true" })))))));
+    }
+    static get is() { return "ds-radio-button-group"; }
+    static get encapsulation() { return "shadow"; }
+    static get formAssociated() { return true; }
+    static get originalStyleUrls() {
+        return {
+            "$": ["ds-radio-button-group.scss"]
+        };
+    }
+    static get styleUrls() {
+        return {
+            "$": ["ds-radio-button-group.css"]
+        };
+    }
+    static get properties() {
+        return {
+            "dsLegend": {
+                "type": "string",
+                "attribute": "ds-legend",
+                "mutable": false,
+                "complexType": {
+                    "original": "string",
+                    "resolved": "string",
+                    "references": {}
+                },
+                "required": false,
+                "optional": true,
+                "docs": {
+                    "tags": [],
+                    "text": "Label for the radio button group"
+                },
+                "getter": false,
+                "setter": false,
+                "reflect": false
+            },
+            "dsAssistiveText": {
+                "type": "string",
+                "attribute": "ds-assistive-text",
+                "mutable": false,
+                "complexType": {
+                    "original": "string",
+                    "resolved": "string",
+                    "references": {}
+                },
+                "required": false,
+                "optional": true,
+                "docs": {
+                    "tags": [],
+                    "text": "Text for additional information shown below legend"
+                },
+                "getter": false,
+                "setter": false,
+                "reflect": false
+            },
+            "dsValue": {
+                "type": "string",
+                "attribute": "ds-value",
+                "mutable": true,
+                "complexType": {
+                    "original": "string",
+                    "resolved": "string",
+                    "references": {}
+                },
+                "required": false,
+                "optional": true,
+                "docs": {
+                    "tags": [],
+                    "text": "Determines which radio button in the group is selected.\nThe radio button with the matching `value` will be selected."
+                },
+                "getter": false,
+                "setter": false,
+                "reflect": false
+            },
+            "dsDirection": {
+                "type": "string",
+                "attribute": "ds-direction",
+                "mutable": false,
+                "complexType": {
+                    "original": "'horizontal' | 'vertical'",
+                    "resolved": "\"horizontal\" | \"vertical\"",
+                    "references": {}
+                },
+                "required": false,
+                "optional": false,
+                "docs": {
+                    "tags": [],
+                    "text": "`vertical` displays radio buttons stacked\n`horizontal` displays radio buttons side by side"
+                },
+                "getter": false,
+                "setter": false,
+                "reflect": false,
+                "defaultValue": "'vertical'"
+            },
+            "dsErrorText": {
+                "type": "string",
+                "attribute": "ds-error-text",
+                "mutable": false,
+                "complexType": {
+                    "original": "string",
+                    "resolved": "string",
+                    "references": {}
+                },
+                "required": false,
+                "optional": false,
+                "docs": {
+                    "tags": [],
+                    "text": "Error message shown below the text input.\nIf set, the text input is shown in an invalid state."
+                },
+                "getter": false,
+                "setter": false,
+                "reflect": false,
+                "defaultValue": "''"
+            },
+            "dsRequired": {
+                "type": "boolean",
+                "attribute": "ds-required",
+                "mutable": false,
+                "complexType": {
+                    "original": "boolean",
+                    "resolved": "boolean",
+                    "references": {}
+                },
+                "required": false,
+                "optional": false,
+                "docs": {
+                    "tags": [],
+                    "text": "One or more radio buttons must be checked."
+                },
+                "getter": false,
+                "setter": false,
+                "reflect": false,
+                "defaultValue": "false"
+            }
+        };
+    }
+    static get states() {
+        return {
+            "showInternalsValidationMessage": {}
+        };
+    }
+    static get events() {
+        return [{
+                "method": "dsRadioGroupValueChange",
+                "name": "dsRadioGroupValueChange",
+                "bubbles": true,
+                "cancelable": true,
+                "composed": true,
+                "docs": {
+                    "tags": [],
+                    "text": "The `dsRadioGroupValueChange` event is emitted when a radio button\ninside the radio button group is selected.\nThis event is mainly used internally to synchronize the state of\nradio buttons."
+                },
+                "complexType": {
+                    "original": "string | undefined",
+                    "resolved": "string",
+                    "references": {}
+                }
+            }, {
+                "method": "dsRadioGroupInvalidStateChange",
+                "name": "dsRadioGroupInvalidStateChange",
+                "bubbles": true,
+                "cancelable": true,
+                "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."
+                },
+                "complexType": {
+                    "original": "boolean",
+                    "resolved": "boolean",
+                    "references": {}
+                }
+            }, {
+                "method": "dsChange",
+                "name": "dsChange",
+                "bubbles": true,
+                "cancelable": true,
+                "composed": true,
+                "docs": {
+                    "tags": [],
+                    "text": "The `dsChange` event is emitted each time the `dsValue` of the\nradio button group is changed."
+                },
+                "complexType": {
+                    "original": "string",
+                    "resolved": "string",
+                    "references": {}
+                }
+            }];
+    }
+    static get methods() {
+        return {
+            "getValue": {
+                "complexType": {
+                    "signature": "() => Promise<string>",
+                    "parameters": [],
+                    "references": {
+                        "Promise": {
+                            "location": "global",
+                            "id": "global::Promise"
+                        }
+                    },
+                    "return": "Promise<string>"
+                },
+                "docs": {
+                    "text": "",
+                    "tags": []
+                }
+            }
+        };
+    }
+    static get elementRef() { return "el"; }
+    static get watchers() {
+        return [{
+                "propName": "dsErrorText",
+                "methodName": "errorTextObserver"
+            }, {
+                "propName": "dsValue",
+                "methodName": "dsValueObserver"
+            }];
+    }
+    static get listeners() {
+        return [{
+                "name": "dsRadioButtonChecked",
+                "method": "onInputChange",
+                "target": undefined,
+                "capture": false,
+                "passive": false
+            }, {
+                "name": "keydown",
+                "method": "onKeyDown",
+                "target": "document",
+                "capture": false,
+                "passive": false
+            }];
+    }
+    static get attachInternalsMemberName() { return "internals"; }
+}

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

@@ -0,0 +1,42 @@
+import { html } from "lit";
+const renderRadio = (idx) => html `<ds-radio-button ds-value="${idx + 1}" ds-text="Value text ${idx + 1}"></ds-radio-button>`;
+const renderGroup = (args) => html `
+    <ds-radio-button-group
+      ds-legend="${args.dsLegend}"
+      ds-assistive-text="${args.dsAssistiveText}"
+      ds-direction="${args.dsDirection}"
+    >
+      ${Array.from(new Array(args.count)).map((_, i) => renderRadio(i))}
+    </ds-radio-button-group>
+  `;
+const meta = {
+    title: 'Base Components/RadioButtonGroup/Examples',
+    component: 'ds-radio-button-group',
+    render: (args) => renderGroup(args),
+};
+export default meta;
+export const WithVariableRadioButtonsCount = {
+    args: {
+        dsLegend: "Group label",
+        dsAssistiveText: "Use storybook controls to change the count of radio buttons shown",
+        dsDirection: 'vertical',
+        count: 1,
+    },
+};
+export const SomeRadioButtonsDisabled = {
+    args: {
+        dsLegend: "Group label",
+        dsDirection: 'vertical',
+    },
+    render: (args) => html `
+    <ds-radio-button-group
+      ds-legend="${args.dsLegend}"
+      ds-assistive-text="${args.dsAssistiveText}"
+      ds-direction="${args.dsDirection}"
+    >
+      <ds-radio-button ds-value="1" ds-text="Value text 1"></ds-radio-button>
+      <ds-radio-button ds-value="2" ds-text="Value text 2"></ds-radio-button>
+      <ds-radio-button ds-disabled="true" ds-value="3" ds-text="Value text 3"></ds-radio-button>
+      <ds-radio-button ds-value="4" ds-text="Value text 4"></ds-radio-button>
+    </ds-radio-button-group>`
+};

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

@@ -0,0 +1,71 @@
+import { html } from "lit";
+const meta = {
+    title: 'Base Components/RadioButtonGroup/Features',
+    component: 'ds-radio-button-group',
+    render: (args) => html `
+    <ds-radio-button-group
+      ds-legend=${args.dsLegend}
+      ds-assistive-text=${args.dsAssistiveText}
+      ds-direction=${args.dsDirection}
+      ds-error-text=${args.dsErrorText}
+      ds-value=${args.dsValue}
+      ds-required=${args.dsRequired}
+    >
+      <ds-radio-button ds-value="1" ds-text="Value text 1"></ds-radio-button>
+      <ds-radio-button ds-value="2" ds-text="Value text 2"></ds-radio-button>
+      <ds-radio-button ds-value="3" ds-text="Value text 3"></ds-radio-button>
+      <ds-radio-button ds-value="4" ds-text="Value text 4"></ds-radio-button>
+    </ds-radio-button-group>
+  `,
+};
+export default meta;
+export const Vertical = {
+    args: {
+        dsLegend: "Group label",
+        dsAssistiveText: "Assistive text",
+        dsDirection: 'vertical',
+        dsRequired: false,
+    },
+};
+export const Horizontal = {
+    args: {
+        dsLegend: "Group label",
+        dsAssistiveText: "Assistive text",
+        dsDirection: 'horizontal',
+        dsRequired: false,
+    },
+};
+export const Invalid = {
+    args: {
+        dsLegend: "Group label",
+        dsAssistiveText: "Assistive text",
+        dsDirection: 'vertical',
+        dsErrorText: 'Error text',
+        dsRequired: false,
+    },
+};
+export const HorizontalInvalid = {
+    args: {
+        dsLegend: "Group label",
+        dsAssistiveText: "Assistive text",
+        dsDirection: 'horizontal',
+        dsErrorText: 'Error text',
+        dsRequired: false,
+    },
+};
+export const Required = {
+    args: {
+        dsLegend: "Group label",
+        dsAssistiveText: "Assistive text",
+        dsRequired: true
+    },
+};
+export const WithDefaultValue = {
+    args: {
+        dsLegend: "Group label",
+        dsAssistiveText: "Assistive text",
+        dsDirection: 'horizontal',
+        dsValue: '2',
+        dsRequired: false,
+    },
+};

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

@@ -0,0 +1,60 @@
+import { html } from "lit";
+import { getDsElem } from "../../../../utils/tests/testUtils";
+import { expect, userEvent, waitFor } from "@storybook/test";
+const meta = {
+    title: 'Base Components/RadioButtonGroup',
+    component: 'ds-radio-button-group',
+    render: args => html `
+    <ds-radio-button-group
+      ds-legend=${args.dsLegend}
+      ds-assistive-text=${args.dsAssistiveText}
+      ds-direction=${args.dsDirection}
+      ds-value=${args.dsValue}
+      ds-error-text=${args.dsErrorText}
+      ds-required=${args.dsRequired}>
+      <ds-radio-button ds-text="Value text 1"></ds-radio-button>
+      <ds-radio-button ds-text="Value text 2"></ds-radio-button>
+      <ds-radio-button ds-text="Value text 3"></ds-radio-button>
+      <ds-radio-button ds-text="Value text 4"></ds-radio-button>
+    </ds-radio-button-group>
+  `,
+};
+export default meta;
+export const Default = {
+    args: {
+        dsLegend: 'Group label',
+        dsAssistiveText: 'Assistive text',
+        dsRequired: false,
+    },
+    play: async ({ canvasElement, step }) => {
+        const dsElem = (await getDsElem(canvasElement, 'ds-radio-button-group'));
+        let radioButtons = [];
+        await waitFor(() => {
+            radioButtons = Array.from(dsElem.querySelectorAll('ds-radio-button'));
+            expect(radioButtons[0].shadowRoot.querySelector('input')).not.toBeNull();
+        });
+        await step('Clicking radio button should select it', async () => {
+            userEvent.click(radioButtons[1].shadowRoot.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'));
+            await waitFor(() => {
+                expect(radioButtons[1].dsChecked).toBe(false);
+                expect(radioButtons[0].dsChecked).toBe(true);
+            });
+        });
+    },
+};
+export const Playground = {
+    args: {
+        dsLegend: 'Group label',
+        dsAssistiveText: '',
+        dsDirection: 'vertical',
+        dsErrorText: '',
+        dsValue: '',
+        dsRequired: false,
+    },
+};