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

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

@@ -0,0 +1,115 @@
+:root {
+  --ds-breakpoint-xSmall: 20rem;
+  --ds-breakpoint-small: 30rem;
+  --ds-breakpoint-medium: 60rem;
+  --ds-breakpoint-large: 75rem;
+  --ds-breakpoint-xLarge: 90rem;
+}
+
+.ds-radio-button {
+  box-sizing: border-box;
+  display: inline-flex;
+  color: var(--ds-palette-black-95);
+}
+.ds-radio-button--disabled {
+  color: var(--ds-palette-black-40);
+}
+.ds-radio-button__validity {
+  margin-left: 10px;
+}
+.ds-radio-button:has(input:focus-visible) .ds-radio-button__icon {
+  box-shadow: inset 0 0 0 var(--ds-borderWidth-thick) var(--ds-palette-white);
+  outline: var(--ds-borderWidth-thin) solid var(--ds-palette-black-95);
+  outline-offset: calc(var(--ds-borderWidth-thin) * -1 * 5);
+}
+.ds-radio-button__icon {
+  border-radius: 50%;
+  height: 44px;
+  width: 44px;
+}
+.ds-radio-button__text {
+  margin-top: 11px;
+}
+.ds-radio-button__icon__outer-circle {
+  stroke: var(--ds-palette-black-50);
+  fill: var(--ds-palette-white);
+}
+.ds-radio-button__icon__outer-circle--checked {
+  stroke: var(--ds-palette-mainBlue-70);
+  fill: var(--ds-palette-white);
+}
+.ds-radio-button__icon__inner-circle {
+  stroke: unset;
+  fill: var(--ds-palette-mainBlue-70);
+}
+.ds-radio-button:hover:not(.ds-radio-button--disabled) .ds-radio-button__icon__outer-circle {
+  stroke: var(--ds-palette-black-50);
+  fill: var(--ds-palette-black-10);
+}
+.ds-radio-button:hover:not(.ds-radio-button--disabled) .ds-radio-button__icon__outer-circle--checked {
+  stroke: var(--ds-palette-mainBlue-80);
+  fill: var(--ds-palette-white);
+}
+.ds-radio-button:hover:not(.ds-radio-button--disabled) .ds-radio-button__icon__inner-circle {
+  stroke: unset;
+  fill: var(--ds-palette-mainBlue-80);
+}
+.ds-radio-button:active:not(.ds-radio-button--disabled) .ds-radio-button__icon__outer-circle {
+  stroke: var(--ds-palette-black-50);
+  fill: var(--ds-palette-black-20);
+}
+.ds-radio-button:active:not(.ds-radio-button--disabled) .ds-radio-button__icon__outer-circle--checked {
+  stroke: var(--ds-palette-mainBlue-90);
+  fill: var(--ds-palette-white);
+}
+.ds-radio-button:active:not(.ds-radio-button--disabled) .ds-radio-button__icon__inner-circle {
+  stroke: unset;
+  fill: var(--ds-palette-mainBlue-90);
+}
+.ds-radio-button--disabled .ds-radio-button__icon__outer-circle {
+  stroke: var(--ds-overlay-black-15);
+  fill: var(--ds-overlay-black-10);
+}
+.ds-radio-button--disabled .ds-radio-button__icon__outer-circle--checked {
+  stroke: var(--ds-overlay-black-15);
+  fill: var(--ds-overlay-black-10);
+}
+.ds-radio-button--disabled .ds-radio-button__icon__inner-circle {
+  stroke: unset;
+  fill: var(--ds-overlay-black-15);
+}
+.ds-radio-button--invalid .ds-radio-button__icon__outer-circle {
+  stroke: var(--ds-palette-red-50);
+  fill: var(--ds-palette-white);
+}
+.ds-radio-button--invalid .ds-radio-button__icon__outer-circle--checked {
+  stroke: var(--ds-palette-red-50);
+  fill: var(--ds-palette-white);
+}
+.ds-radio-button--invalid .ds-radio-button__icon__inner-circle {
+  stroke: unset;
+  fill: var(--ds-palette-mainBlue-70);
+}
+
+.ds-radio-button-fieldset {
+  display: inline-flex;
+  flex-direction: column;
+  border: none;
+  margin: 0;
+  padding: 0;
+}
+.ds-radio-button-fieldset__legend {
+  padding-inline: 0;
+  color: var(--ds-palette-black-95);
+  font-size: var(--ds-fontSize-16);
+  font-weight: var(--ds-fontWeight-semibold);
+  letter-spacing: var(--ds-letterSpacing-wide);
+  line-height: var(--ds-lineHeight-large);
+  margin-bottom: var(--ds-spacing-3xSmall);
+}
+.ds-radio-button-fieldset__assistive-text {
+  display: inline;
+  font-size: var(--ds-fontSize-14);
+  color: var(--ds-palette-black-70);
+  line-height: var(--ds-lineHeight-large);
+}

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

@@ -0,0 +1,449 @@
+import { Fragment, h } from "@stencil/core";
+import { inheritAttributes } from "../../../utils/attributes/attributes";
+import { getRequiredText } from "../../../utils/controls/controlUtils";
+import { idGenerator } from "../../../utils/utils";
+import classNames from "classnames";
+import { isValidation } from "../../../store";
+const radioButtonIdGenerator = idGenerator('ds-radio-button');
+export class DsRadioButton {
+    radioGroup = null;
+    inputElem;
+    dsChange;
+    dsRadioButtonChecked;
+    el;
+    internals;
+    dsId = radioButtonIdGenerator.next().value;
+    dsErrorsDisabled = false;
+    dsValue = this.dsId;
+    dsLegend;
+    dsAssistiveText;
+    dsText;
+    dsRequired = false;
+    dsDisabled = false;
+    dsChecked = false;
+    dsErrorText = '';
+    focusable = true;
+    invalid = !!this.dsErrorText;
+    initialChecked = this.dsChecked;
+    validationMessage;
+    errorTextId = `${this.dsId}-error`;
+    assistiveTextId = `${this.dsId}-assistive-text`;
+    async dsFocus() {
+        this.inputElem.focus();
+    }
+    async setFocusable(flag) {
+        this.focusable = flag;
+    }
+    async setChecked() {
+        this.dsChecked = true;
+        this.internals?.setFormValue('true');
+        this.dsRadioButtonChecked.emit();
+        if (isValidation('client') && this.validationMessage) {
+            this.validationMessage = this.getValidationMessage();
+        }
+    }
+    dsCheckedObserver(isChecked) {
+        this.dsChange.emit(isChecked);
+    }
+    inheritedAttributes = {};
+    getValidationMessage = () => (!this.dsErrorsDisabled ? this.dsErrorText || this.internals?.validationMessage || this.inputElem?.validationMessage : '');
+    componentWillLoad() {
+        this.inheritedAttributes = {
+            ...inheritAttributes(this, this.el),
+        };
+    }
+    formResetCallback() {
+        this.dsChecked = this.initialChecked;
+        this.internals.setValidity({});
+        this.internals.setFormValue(this.dsChecked.toString());
+    }
+    connectedCallback() {
+        this.radioGroup = this.el.closest('ds-radio-button-group');
+        if (this.radioGroup) {
+            this.updateCheckedState();
+            this.invalid = !!this.radioGroup.dsErrorText;
+            this.radioGroup.addEventListener('dsRadioGroupValueChange', this.updateCheckedState);
+            this.radioGroup.addEventListener('dsRadioGroupInvalidStateChange', this.updateInvalidState);
+        }
+    }
+    disconnectedCallback() {
+        if (this.radioGroup) {
+            this.radioGroup.removeEventListener('dsRadioGroupValueChange', this.updateCheckedState);
+            this.radioGroup.removeEventListener('dsRadioGroupInvalidStateChange', this.updateInvalidState);
+        }
+        this.radioGroup = null;
+    }
+    updateCheckedState = async () => {
+        this.dsChecked = this.dsValue === (await this.radioGroup.getValue());
+    };
+    updateInvalidState = (e) => {
+        this.invalid = e.detail;
+    };
+    handleInput = () => {
+        this.setChecked();
+    };
+    handleBlur = () => {
+        if (isValidation('client')) {
+            this.validationMessage = this.getValidationMessage();
+        }
+    };
+    getLegendText = () => {
+        if (this.dsRequired) {
+            return getRequiredText(this.dsLegend);
+        }
+        return this.dsLegend;
+    };
+    renderRadioIcon() {
+        const iconClass = 'ds-radio-button__icon';
+        const outerCircleClasses = classNames(`${iconClass}__outer-circle`, {
+            [`${iconClass}__outer-circle--checked`]: this.dsChecked,
+        });
+        const innerCircleClasses = classNames(`${iconClass}__inner-circle`);
+        return (h("slot", { name: "icon" }, h("div", { class: iconClass, "aria-hidden": "true" }, h("svg", { width: "44", height: "44", viewBox: "0 0 44 44", fill: "none", xmlns: "http://www.w3.org/2000/svg" }, h("rect", { x: "10", y: "10", width: "24", height: "24", rx: "12", fill: "white" }), h("circle", { class: outerCircleClasses, cx: "22", cy: "22", r: "10", fill: "white", stroke: "#005A94", "stroke-width": "2" }), this.dsChecked && h("circle", { class: innerCircleClasses, cx: "22", cy: "22", r: "6", fill: "#005A94" })))));
+    }
+    renderRadioButton() {
+        const classes = classNames('ds-radio-button', {
+            'ds-radio-button--disabled': this.dsDisabled,
+            'ds-radio-button--invalid': !!this.dsErrorText || this.invalid,
+        });
+        const inputClasses = classNames('ds-radio-button__input');
+        const textClasses = classNames('ds-radio-button__text');
+        const tabindex = this.focusable ? 0 : -1;
+        return (h(Fragment, null, h("div", null, h("label", { class: classes }, h("ds-visually-hidden", null, h("input", { ref: ref => (this.inputElem = ref), type: "radio", class: inputClasses, value: this.dsValue, disabled: this.dsDisabled, onInput: this.handleInput, onBlur: this.handleBlur, checked: this.dsChecked, tabindex: tabindex, ...this.inheritedAttributes })), this.renderRadioIcon(), h("slot", null, h("span", { class: textClasses }, this.dsText)))), !this.dsErrorsDisabled && (h("slot", { name: "validity" }, h("div", { class: "ds-radio-button__validity" }, h("ds-input-validity", { id: this.errorTextId, dsText: this.dsErrorText, dsType: "error", dsAriaLive: "polite", dsAriaAtomic: "true" }))))));
+    }
+    renderFieldset() {
+        const fieldsetClasses = classNames('ds-radio-button-fieldset');
+        const legendClasses = classNames('ds-radio-button-fieldset__legend');
+        const assistiveTextClasses = classNames('ds-radio-button-fieldset__assistive-text');
+        const ariaDescribedBy = [!!this.dsErrorText && this.errorTextId, !!this.dsAssistiveText && this.assistiveTextId].filter(Boolean).join(' ');
+        return (h("fieldset", { class: fieldsetClasses, "aria-describedby": ariaDescribedBy }, h("legend", { class: legendClasses }, h("slot", { name: "legend" }, this.getLegendText())), h("slot", { name: "assistiveText" }, this.dsAssistiveText && (h("small", { class: assistiveTextClasses, id: this.assistiveTextId }, this.dsAssistiveText))), this.renderRadioButton()));
+    }
+    render() {
+        if (this.dsLegend) {
+            return this.renderFieldset();
+        }
+        return this.renderRadioButton();
+    }
+    static get is() { return "ds-radio-button"; }
+    static get encapsulation() { return "shadow"; }
+    static get formAssociated() { return true; }
+    static get originalStyleUrls() {
+        return {
+            "$": ["ds-radio-button.scss"]
+        };
+    }
+    static get styleUrls() {
+        return {
+            "$": ["ds-radio-button.css"]
+        };
+    }
+    static get properties() {
+        return {
+            "dsId": {
+                "type": "string",
+                "attribute": "ds-id",
+                "mutable": false,
+                "complexType": {
+                    "original": "string",
+                    "resolved": "string",
+                    "references": {}
+                },
+                "required": false,
+                "optional": true,
+                "docs": {
+                    "tags": [],
+                    "text": "Passed to the `id` attriubte of the `input` element of the rendered radio button."
+                },
+                "getter": false,
+                "setter": false,
+                "reflect": false,
+                "defaultValue": "radioButtonIdGenerator.next().value as string"
+            },
+            "dsErrorsDisabled": {
+                "type": "boolean",
+                "attribute": "ds-errors-disabled",
+                "mutable": false,
+                "complexType": {
+                    "original": "boolean",
+                    "resolved": "boolean",
+                    "references": {}
+                },
+                "required": false,
+                "optional": false,
+                "docs": {
+                    "tags": [],
+                    "text": "Can be used to disable client-side validation.\nUsed internally in radio button group to disable error messages\nfor a single radio button."
+                },
+                "getter": false,
+                "setter": false,
+                "reflect": false,
+                "defaultValue": "false"
+            },
+            "dsValue": {
+                "type": "string",
+                "attribute": "ds-value",
+                "mutable": false,
+                "complexType": {
+                    "original": "string",
+                    "resolved": "string",
+                    "references": {}
+                },
+                "required": false,
+                "optional": true,
+                "docs": {
+                    "tags": [],
+                    "text": "Passed to the `value` attribute of the `input` element of the rendered radio button."
+                },
+                "getter": false,
+                "setter": false,
+                "reflect": false,
+                "defaultValue": "this.dsId"
+            },
+            "dsLegend": {
+                "type": "string",
+                "attribute": "ds-legend",
+                "mutable": false,
+                "complexType": {
+                    "original": "string",
+                    "resolved": "string",
+                    "references": {}
+                },
+                "required": false,
+                "optional": true,
+                "docs": {
+                    "tags": [],
+                    "text": "Label of the radio button"
+                },
+                "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 label"
+                },
+                "getter": false,
+                "setter": false,
+                "reflect": false
+            },
+            "dsText": {
+                "type": "string",
+                "attribute": "ds-text",
+                "mutable": false,
+                "complexType": {
+                    "original": "string",
+                    "resolved": "string",
+                    "references": {}
+                },
+                "required": false,
+                "optional": true,
+                "docs": {
+                    "tags": [],
+                    "text": "The text of the radio button"
+                },
+                "getter": false,
+                "setter": false,
+                "reflect": false
+            },
+            "dsRequired": {
+                "type": "boolean",
+                "attribute": "ds-required",
+                "mutable": false,
+                "complexType": {
+                    "original": "boolean",
+                    "resolved": "boolean",
+                    "references": {}
+                },
+                "required": false,
+                "optional": false,
+                "docs": {
+                    "tags": [],
+                    "text": "Passed to the `required` attribute of the `input` element of the rendered radio button."
+                },
+                "getter": false,
+                "setter": false,
+                "reflect": false,
+                "defaultValue": "false"
+            },
+            "dsDisabled": {
+                "type": "boolean",
+                "attribute": "ds-disabled",
+                "mutable": false,
+                "complexType": {
+                    "original": "boolean",
+                    "resolved": "boolean",
+                    "references": {}
+                },
+                "required": false,
+                "optional": false,
+                "docs": {
+                    "tags": [],
+                    "text": "Passed to the `disabled` attribute of the `input` element of the rendered radio button."
+                },
+                "getter": false,
+                "setter": false,
+                "reflect": false,
+                "defaultValue": "false"
+            },
+            "dsChecked": {
+                "type": "boolean",
+                "attribute": "ds-checked",
+                "mutable": false,
+                "complexType": {
+                    "original": "boolean",
+                    "resolved": "boolean",
+                    "references": {}
+                },
+                "required": false,
+                "optional": false,
+                "docs": {
+                    "tags": [],
+                    "text": "Passed to the `checked` attribute of the `input` element of the rendered radio button."
+                },
+                "getter": false,
+                "setter": false,
+                "reflect": false,
+                "defaultValue": "false"
+            },
+            "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 radio button.\nIf set, the radio button is shown in an invalid state."
+                },
+                "getter": false,
+                "setter": false,
+                "reflect": false,
+                "defaultValue": "''"
+            }
+        };
+    }
+    static get states() {
+        return {
+            "focusable": {},
+            "invalid": {},
+            "initialChecked": {},
+            "validationMessage": {}
+        };
+    }
+    static get events() {
+        return [{
+                "method": "dsChange",
+                "name": "dsChange",
+                "bubbles": true,
+                "cancelable": true,
+                "composed": true,
+                "docs": {
+                    "tags": [],
+                    "text": "Event emitted when the `dsChecked` state changes."
+                },
+                "complexType": {
+                    "original": "boolean",
+                    "resolved": "boolean",
+                    "references": {}
+                }
+            }, {
+                "method": "dsRadioButtonChecked",
+                "name": "dsRadioButtonChecked",
+                "bubbles": true,
+                "cancelable": true,
+                "composed": true,
+                "docs": {
+                    "tags": [],
+                    "text": "Event emitted when the radio button is set to checked state.\nUsed to notify a parent radio button group of a state change."
+                },
+                "complexType": {
+                    "original": "void",
+                    "resolved": "void",
+                    "references": {}
+                }
+            }];
+    }
+    static get methods() {
+        return {
+            "dsFocus": {
+                "complexType": {
+                    "signature": "() => Promise<void>",
+                    "parameters": [],
+                    "references": {
+                        "Promise": {
+                            "location": "global",
+                            "id": "global::Promise"
+                        }
+                    },
+                    "return": "Promise<void>"
+                },
+                "docs": {
+                    "text": "Custom focus method that ensures the correct internal input element is focused",
+                    "tags": []
+                }
+            },
+            "setFocusable": {
+                "complexType": {
+                    "signature": "(flag: boolean) => Promise<void>",
+                    "parameters": [{
+                            "name": "flag",
+                            "type": "boolean",
+                            "docs": ""
+                        }],
+                    "references": {
+                        "Promise": {
+                            "location": "global",
+                            "id": "global::Promise"
+                        }
+                    },
+                    "return": "Promise<void>"
+                },
+                "docs": {
+                    "text": "Whether the radio button is focusable via tab or not.\nUsed internally inside a radio button group to make\nkeyboard usage work as expected.\n\nNOTE: manually calling this method may cause unexpected behaviour",
+                    "tags": []
+                }
+            },
+            "setChecked": {
+                "complexType": {
+                    "signature": "() => Promise<void>",
+                    "parameters": [],
+                    "references": {
+                        "Promise": {
+                            "location": "global",
+                            "id": "global::Promise"
+                        }
+                    },
+                    "return": "Promise<void>"
+                },
+                "docs": {
+                    "text": "",
+                    "tags": []
+                }
+            }
+        };
+    }
+    static get elementRef() { return "el"; }
+    static get watchers() {
+        return [{
+                "propName": "dsChecked",
+                "methodName": "dsCheckedObserver"
+            }];
+    }
+    static get attachInternalsMemberName() { return "internals"; }
+}

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

@@ -0,0 +1,72 @@
+const meta = {
+    title: 'Base Components/RadioButton/Features',
+    component: 'ds-radio-button',
+};
+export default meta;
+export const Unchecked = {
+    args: {
+        dsText: 'Value text',
+        dsChecked: false
+    },
+};
+export const Checked = {
+    args: {
+        dsText: 'Value text',
+        dsChecked: true,
+    }
+};
+export const Disabled = {
+    args: {
+        dsText: 'Value text',
+        dsDisabled: true
+    },
+};
+export const CheckedDisabled = {
+    args: {
+        dsText: 'Value text',
+        dsDisabled: true,
+        dsChecked: true
+    },
+};
+export const Invalid = {
+    args: {
+        dsText: 'Value text',
+        dsErrorText: "Error text"
+    },
+};
+export const InvalidChecked = {
+    args: {
+        dsText: 'Value text',
+        dsErrorText: "Error text",
+        dsChecked: true
+    },
+};
+export const WithLegend = {
+    args: {
+        dsText: 'Value text',
+        dsLegend: "Legend text",
+    },
+};
+export const RequiredWithLegend = {
+    args: {
+        dsText: 'Value text',
+        dsLegend: "Legend text",
+        dsRequired: true,
+    },
+};
+export const WithLegendAndAssistiveText = {
+    args: {
+        dsText: 'Value text',
+        dsAssistiveText: 'Assistive text',
+        dsLegend: "Legend text",
+    },
+};
+export const Focused = {
+    args: {
+        dsText: 'Value text'
+    },
+    play: async ({ canvasElement }) => {
+        const elem = canvasElement.querySelector('ds-radio-button');
+        elem.dsFocus();
+    }
+};

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

@@ -0,0 +1,22 @@
+const meta = {
+    title: 'Base Components/RadioButton',
+    component: 'ds-radio-button',
+};
+export default meta;
+export const Default = {
+    args: {
+        dsText: 'Value text',
+    },
+};
+export const Playground = {
+    args: {
+        dsText: 'Value text',
+        dsValue: 'value',
+        dsLegend: '',
+        dsAssistiveText: '',
+        dsRequired: false,
+        dsDisabled: false,
+        dsChecked: false,
+        dsErrorText: '',
+    },
+};

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

@@ -0,0 +1,30 @@
+.ds-radio-button-group {
+  display: inline-flex;
+  flex-direction: column;
+  border: none;
+  padding: 0;
+  margin: 0;
+}
+.ds-radio-button-group__radio-buttons-slot {
+  display: inline-flex;
+  flex-direction: column;
+}
+.ds-radio-button-group__radio-buttons-slot--horizontal {
+  flex-flow: row wrap;
+  gap: var(--ds-spacing-small);
+}
+.ds-radio-button-group__legend {
+  padding-inline: 0;
+  color: var(--ds-palette-black-95);
+  font-size: var(--ds-fontSize-16);
+  font-weight: var(--ds-fontWeight-semibold);
+  letter-spacing: var(--ds-letterSpacing-wide);
+  line-height: var(--ds-lineHeight-large);
+  margin-bottom: var(--ds-spacing-3xSmall);
+}
+.ds-radio-button-group__assistive-text {
+  font-size: var(--ds-fontSize-14);
+  color: var(--ds-palette-black-70);
+  line-height: var(--ds-lineHeight-large);
+  margin-bottom: var(--ds-spacing-2xSmall);
+}