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

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

@@ -3,7 +3,7 @@ import classNames from "classnames";
 import { inheritAriaAttributes, inheritAttributes } from "../../../utils/attributes/attributes";
 import { getOptionalText, getRequiredText } from "../../../utils/controls/controlUtils";
 import { isValidation } from "../../../store";
-import { getAriaLabel, idGenerator } from "../../../utils/utils";
+import { idGenerator } from "../../../utils/utils";
 const checkboxIdGenerator = idGenerator('ds-checkbox');
 export class DsCheckbox {
     checkboxGroup = null;
@@ -15,59 +15,60 @@ export class DsCheckbox {
     labelClicked = false;
     el;
     internals;
-    identifier = checkboxIdGenerator.next().value;
-    checked = false;
-    legend;
-    assistiveText;
-    text;
-    indeterminate = false;
-    disabled = false;
-    errorText = '';
-    errorsDisabled = false;
-    required = false;
-    optional = false;
-    optionalText;
-    ariaLabel;
-    invalid = !!this.errorText;
-    initialChecked = this.checked;
+    dsId = checkboxIdGenerator.next().value;
+    dsChecked = false;
+    dsLegend;
+    dsAssistiveText;
+    dsText;
+    dsIndeterminate = false;
+    dsDisabled = false;
+    dsErrorText = '';
+    dsErrorsDisabled = false;
+    dsRequired = false;
+    dsOptional = false;
+    dsOptionalText;
+    dsAriaLabel;
+    dsChange;
+    invalid = !!this.dsErrorText;
+    initialChecked = this.dsChecked;
     validationMessage;
     setIds = () => {
-        this.labelId = `${this.identifier}-label`;
-        this.inputValidityId = `${this.identifier}-validity`;
-        this.assistiveTextId = `${this.identifier}-assistive-text`;
+        this.labelId = `${this.dsId}-label`;
+        this.inputValidityId = `${this.dsId}-validity`;
+        this.assistiveTextId = `${this.dsId}-assistive-text`;
     };
-    getValidationMessage = () => (!this.errorsDisabled ? this.errorText || this.internals?.validationMessage || this.inputElem?.validationMessage : '');
+    getValidationMessage = () => (!this.dsErrorsDisabled ? this.dsErrorText || this.internals?.validationMessage || this.inputElem?.validationMessage : '');
     getLegendText = () => {
-        if (this.required) {
-            return getRequiredText(this.legend);
+        if (this.dsRequired) {
+            return getRequiredText(this.dsLegend);
         }
-        if (this.optional) {
-            return getOptionalText(this.legend, this.optionalText);
+        if (this.dsOptional) {
+            return getOptionalText(this.dsLegend, this.dsOptionalText);
         }
-        return this.legend;
+        return this.dsLegend;
     };
     getCheckboxText = () => {
-        if (this.legend) {
-            return this.text;
+        if (this.dsLegend) {
+            return this.dsText;
         }
-        if (this.required) {
-            return getRequiredText(this.text);
+        if (this.dsRequired) {
+            return getRequiredText(this.dsText);
         }
-        if (this.optional) {
-            return getOptionalText(this.text, this.optionalText);
+        if (this.dsOptional) {
+            return getOptionalText(this.dsText, this.dsOptionalText);
         }
-        return this.text;
+        return this.dsText;
     };
-    getAriaDescribedBy = () => [Boolean(this.assistiveText) && this.assistiveTextId, Boolean(this.getValidationMessage()) && this.inputValidityId].filter(Boolean).join(' ');
+    getAriaDescribedBy = () => [Boolean(this.dsAssistiveText) && this.assistiveTextId, Boolean(this.getValidationMessage()) && this.inputValidityId].filter(Boolean).join(' ');
     formResetCallback() {
-        this.checked = this.initialChecked;
+        this.dsChecked = this.initialChecked;
         this.internals?.setValidity({});
-        this.internals?.setFormValue(this.checked.toString());
+        this.internals?.setFormValue(this.dsChecked.toString());
     }
     connectedCallback() {
         this.checkboxGroup = this.el.closest('ds-checkbox-group');
         if (this.checkboxGroup) {
-            this.invalid = !!this.checkboxGroup.errorText;
+            this.invalid = !!this.checkboxGroup.dsErrorText;
             this.checkboxGroup.addEventListener('dsCheckboxGroupInvalidStateChange', this.updateInvalidState);
         }
     }
@@ -86,13 +87,16 @@ export class DsCheckbox {
             ...inheritAriaAttributes(this.el, ['aria-label', 'aria-describedby', 'aria-hidden', 'aria-invalid']),
             ...inheritAttributes(this, this.el),
         };
-        if (isValidation('server') || this.errorText) {
+        if (isValidation('server') || this.dsErrorText) {
             this.validationMessage = this.getValidationMessage();
         }
     }
+    dsCheckedObserver(isChecked) {
+        this.dsChange.emit(isChecked);
+    }
     handleInput = (e) => {
         const target = e.target;
-        this.checked = target.checked;
+        this.dsChecked = target.checked;
         this.internals?.setFormValue(target.checked.toString());
         if (isValidation('client') && this.validationMessage) {
             this.validationMessage = this.getValidationMessage();
@@ -100,7 +104,7 @@ export class DsCheckbox {
     };
     handleKeyUp = (event) => {
         if (event.key === 'Enter') {
-            this.inputElem.dispatchEvent(new Event('input'));
+            this.inputElem.click();
         }
     };
     handleBlur = () => {
@@ -117,26 +121,26 @@ export class DsCheckbox {
     };
     renderCheckbox() {
         const classes = classNames('ds-checkbox', {
-            'ds-checkbox--disabled': this.disabled,
-            'ds-checkbox--no-margin': Boolean(!this.text),
+            'ds-checkbox--disabled': this.dsDisabled,
+            'ds-checkbox--no-margin': Boolean(!this.dsText),
         });
         const inputClasses = classNames('ds-checkbox__input', {
-            'ds-checkbox__input--invalid': Boolean(this.errorText) || this.invalid,
+            'ds-checkbox__input--invalid': Boolean(this.dsErrorText) || this.invalid,
         });
         const errorClasses = classNames('ds-checkbox-error', {
             'ds-checkbox-error--visible': Boolean(this.validationMessage),
         });
         const ariaDescribedBy = this.getAriaDescribedBy();
-        return (h(Fragment, null, h("div", null, h("label", { id: this.labelId, class: classes, onMouseDown: this.handleMouseDown, onMouseUp: this.handleMouseUp }, h("input", { ref: inputElem => (this.inputElem = inputElem), type: "checkbox", class: inputClasses, checked: this.checked, indeterminate: this.indeterminate, onInput: this.handleInput, onKeyUp: this.handleKeyUp, onBlur: this.handleBlur, value: this.checked.toString(), disabled: this.disabled, required: this.required, id: this.identifier, "aria-describedby": ariaDescribedBy, "aria-label": getAriaLabel(this.getCheckboxText(), this.ariaLabel), "aria-invalid": this.errorText ? true : undefined, ...this.inheritedAttributes }), this.getCheckboxText())), !this.errorsDisabled && (h("div", { class: errorClasses }, h("ds-input-validity", { id: this.inputValidityId, text: this.validationMessage, type: "error", role: "alert" })))));
+        return (h(Fragment, null, h("div", null, h("label", { id: this.labelId, class: classes, onMouseDown: this.handleMouseDown, onMouseUp: this.handleMouseUp }, h("input", { ref: inputElem => (this.inputElem = inputElem), type: "checkbox", class: inputClasses, checked: this.dsChecked, indeterminate: this.dsIndeterminate, onInput: this.handleInput, onKeyUp: this.handleKeyUp, onBlur: this.handleBlur, value: this.dsChecked.toString(), disabled: this.dsDisabled, required: this.dsRequired, id: this.dsId, "aria-describedby": ariaDescribedBy, "aria-label": this.dsAriaLabel, "aria-invalid": this.dsErrorText ? true : undefined, ...this.inheritedAttributes }), this.getCheckboxText())), !this.dsErrorsDisabled && (h("div", { class: errorClasses }, h("ds-input-validity", { id: this.inputValidityId, dsText: this.validationMessage, dsType: "error", dsAriaLive: "polite", dsAriaAtomic: "true" })))));
     }
     renderFieldset() {
         const fieldsetClasses = classNames('ds-checkbox-fieldset');
         const legendClasses = classNames('ds-checkbox-fieldset__legend');
         const assistiveTextClasses = classNames('ds-checkbox-fieldset__assistive-text');
-        return (h("fieldset", { class: fieldsetClasses }, h("legend", { class: legendClasses }, this.getLegendText()), this.assistiveText && (h("small", { class: assistiveTextClasses, id: this.assistiveTextId }, this.assistiveText)), this.renderCheckbox()));
+        return (h("fieldset", { class: fieldsetClasses }, h("legend", { class: legendClasses }, this.getLegendText()), this.dsAssistiveText && (h("small", { class: assistiveTextClasses, id: this.assistiveTextId }, this.dsAssistiveText)), this.renderCheckbox()));
     }
     render() {
-        if (this.legend) {
+        if (this.dsLegend) {
             return this.renderFieldset();
         }
         return this.renderCheckbox();
@@ -156,8 +160,9 @@ export class DsCheckbox {
     }
     static get properties() {
         return {
-            "identifier": {
+            "dsId": {
                 "type": "string",
+                "attribute": "ds-id",
                 "mutable": false,
                 "complexType": {
                     "original": "string",
@@ -168,16 +173,16 @@ export class DsCheckbox {
                 "optional": true,
                 "docs": {
                     "tags": [],
-                    "text": ""
+                    "text": "Passed to the `id` attribute of the `input` element of the rendered checkbox."
                 },
                 "getter": false,
                 "setter": false,
-                "attribute": "id",
                 "reflect": false,
                 "defaultValue": "checkboxIdGenerator.next().value as string"
             },
-            "checked": {
+            "dsChecked": {
                 "type": "boolean",
+                "attribute": "ds-checked",
                 "mutable": true,
                 "complexType": {
                     "original": "boolean",
@@ -188,16 +193,16 @@ export class DsCheckbox {
                 "optional": false,
                 "docs": {
                     "tags": [],
-                    "text": ""
+                    "text": "Passed to the `checked` attriubte of the `input` element of the rendered checkbox."
                 },
                 "getter": false,
                 "setter": false,
-                "attribute": "checked",
                 "reflect": false,
                 "defaultValue": "false"
             },
-            "legend": {
+            "dsLegend": {
                 "type": "string",
+                "attribute": "ds-legend",
                 "mutable": false,
                 "complexType": {
                     "original": "string",
@@ -208,15 +213,15 @@ export class DsCheckbox {
                 "optional": true,
                 "docs": {
                     "tags": [],
-                    "text": ""
+                    "text": "Label of the checkbox"
                 },
                 "getter": false,
                 "setter": false,
-                "attribute": "legend",
                 "reflect": false
             },
-            "assistiveText": {
+            "dsAssistiveText": {
                 "type": "string",
+                "attribute": "ds-assistive-text",
                 "mutable": false,
                 "complexType": {
                     "original": "string",
@@ -227,15 +232,15 @@ export class DsCheckbox {
                 "optional": true,
                 "docs": {
                     "tags": [],
-                    "text": ""
+                    "text": "Text for additional information shown below label"
                 },
                 "getter": false,
                 "setter": false,
-                "attribute": "assistive-text",
                 "reflect": false
             },
-            "text": {
+            "dsText": {
                 "type": "string",
+                "attribute": "ds-text",
                 "mutable": false,
                 "complexType": {
                     "original": "string",
@@ -246,15 +251,15 @@ export class DsCheckbox {
                 "optional": true,
                 "docs": {
                     "tags": [],
-                    "text": ""
+                    "text": "The text of the checkbox"
                 },
                 "getter": false,
                 "setter": false,
-                "attribute": "text",
                 "reflect": false
             },
-            "indeterminate": {
+            "dsIndeterminate": {
                 "type": "boolean",
+                "attribute": "ds-indeterminate",
                 "mutable": false,
                 "complexType": {
                     "original": "boolean",
@@ -265,16 +270,16 @@ export class DsCheckbox {
                 "optional": false,
                 "docs": {
                     "tags": [],
-                    "text": ""
+                    "text": "Mainly used in a nested checkbox group to display a parent\ncheckbox in a partially selected state if some but not\nall of the nested checkbox group's checkboxes are selected."
                 },
                 "getter": false,
                 "setter": false,
-                "attribute": "indeterminate",
                 "reflect": false,
                 "defaultValue": "false"
             },
-            "disabled": {
+            "dsDisabled": {
                 "type": "boolean",
+                "attribute": "ds-disabled",
                 "mutable": false,
                 "complexType": {
                     "original": "boolean",
@@ -285,16 +290,16 @@ export class DsCheckbox {
                 "optional": false,
                 "docs": {
                     "tags": [],
-                    "text": ""
+                    "text": "Passed to the `disabled` attribute of the `input` element of the rendered checkbox."
                 },
                 "getter": false,
                 "setter": false,
-                "attribute": "disabled",
                 "reflect": false,
                 "defaultValue": "false"
             },
-            "errorText": {
+            "dsErrorText": {
                 "type": "string",
+                "attribute": "ds-error-text",
                 "mutable": false,
                 "complexType": {
                     "original": "string",
@@ -305,16 +310,16 @@ export class DsCheckbox {
                 "optional": false,
                 "docs": {
                     "tags": [],
-                    "text": ""
+                    "text": "Error message shown below the text input.\nIf set, the checkbox is shown in an invalid state."
                 },
                 "getter": false,
                 "setter": false,
-                "attribute": "error-text",
                 "reflect": false,
                 "defaultValue": "''"
             },
-            "errorsDisabled": {
+            "dsErrorsDisabled": {
                 "type": "boolean",
+                "attribute": "ds-errors-disabled",
                 "mutable": false,
                 "complexType": {
                     "original": "boolean",
@@ -325,16 +330,16 @@ export class DsCheckbox {
                 "optional": false,
                 "docs": {
                     "tags": [],
-                    "text": ""
+                    "text": "Used internally in checkbox group to disable error messages\nfor a single checkbox."
                 },
                 "getter": false,
                 "setter": false,
-                "attribute": "data-errors-disabled",
                 "reflect": false,
                 "defaultValue": "false"
             },
-            "required": {
+            "dsRequired": {
                 "type": "boolean",
+                "attribute": "ds-required",
                 "mutable": false,
                 "complexType": {
                     "original": "boolean",
@@ -345,16 +350,16 @@ export class DsCheckbox {
                 "optional": false,
                 "docs": {
                     "tags": [],
-                    "text": ""
+                    "text": "Passed to the `required` attribute of the `input` element of the rendered checkbox."
                 },
                 "getter": false,
                 "setter": false,
-                "attribute": "required",
                 "reflect": false,
                 "defaultValue": "false"
             },
-            "optional": {
+            "dsOptional": {
                 "type": "boolean",
+                "attribute": "ds-optional",
                 "mutable": false,
                 "complexType": {
                     "original": "boolean",
@@ -365,16 +370,16 @@ export class DsCheckbox {
                 "optional": false,
                 "docs": {
                     "tags": [],
-                    "text": ""
+                    "text": "Displays indicator that the checkbox is optional alongside label."
                 },
                 "getter": false,
                 "setter": false,
-                "attribute": "optional",
                 "reflect": false,
                 "defaultValue": "false"
             },
-            "optionalText": {
+            "dsOptionalText": {
                 "type": "string",
+                "attribute": "ds-optional-text",
                 "mutable": false,
                 "complexType": {
                     "original": "string",
@@ -385,15 +390,15 @@ export class DsCheckbox {
                 "optional": true,
                 "docs": {
                     "tags": [],
-                    "text": ""
+                    "text": "Text shown alongside label, if the checkbox is set as optional."
                 },
                 "getter": false,
                 "setter": false,
-                "attribute": "optional-text",
                 "reflect": false
             },
-            "ariaLabel": {
+            "dsAriaLabel": {
                 "type": "string",
+                "attribute": "ds-aria-label",
                 "mutable": false,
                 "complexType": {
                     "original": "string",
@@ -404,11 +409,10 @@ export class DsCheckbox {
                 "optional": false,
                 "docs": {
                     "tags": [],
-                    "text": ""
+                    "text": "Passed to the `aria-label` attribute of the `input` element of the rendered checkbox."
                 },
                 "getter": false,
                 "setter": false,
-                "attribute": "aria-label",
                 "reflect": false
             }
         };
@@ -420,6 +424,30 @@ export class DsCheckbox {
             "validationMessage": {}
         };
     }
+    static get events() {
+        return [{
+                "method": "dsChange",
+                "name": "dsChange",
+                "bubbles": true,
+                "cancelable": true,
+                "composed": true,
+                "docs": {
+                    "tags": [],
+                    "text": "The `dsChange` event is fired each time the `value` property of\nthe `ds-checkbox` element is changed."
+                },
+                "complexType": {
+                    "original": "boolean",
+                    "resolved": "boolean",
+                    "references": {}
+                }
+            }];
+    }
     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-checkbox/stories/ds-checkbox.features.stories.js

@@ -7,41 +7,41 @@ const meta = {
 export default meta;
 export const Unchecked = {
     args: {
-        text: 'Checkbox text',
-        checked: false,
+        dsText: 'Checkbox text',
+        dsChecked: false,
     },
 };
 export const Checked = {
     args: {
-        text: 'Checkbox text',
-        checked: true,
+        dsText: 'Checkbox text',
+        dsChecked: true,
     },
 };
 export const Indeterminate = {
     args: {
-        text: 'Checkbox text',
-        indeterminate: true,
+        dsText: 'Checkbox text',
+        dsIndeterminate: true,
     },
 };
 export const Disabled = {
     args: {
-        text: 'Checkbox text',
-        checked: false,
-        disabled: true
+        dsText: 'Checkbox text',
+        dsChecked: false,
+        dsDisabled: true
     },
 };
 export const Invalid = {
     args: {
-        text: 'Checkbox text',
-        checked: false,
-        errorText: 'Error text',
+        dsText: 'Checkbox text',
+        dsChecked: false,
+        dsErrorText: 'Error text',
     },
 };
 const withoutValueTextDOM = html `
   <div class="ds-sb-without-value-text">
-    <ds-checkbox checked="false" aria-label="Checkbox text"></ds-checkbox>
-    <ds-checkbox disabled="true" aria-label="Checkbox text"></ds-checkbox>
-    <ds-checkbox error-text="Error text" aria-label="Checkbox text"></ds-checkbox>
+    <ds-checkbox ds-checked="false" ds-aria-label="Checkbox text"></ds-checkbox>
+    <ds-checkbox ds-disabled="true" ds-aria-label="Checkbox text"></ds-checkbox>
+    <ds-checkbox ds-error-text="Error text" ds-aria-label="Checkbox text"></ds-checkbox>
   </div>
 `;
 export const WithoutValueText = {
@@ -64,8 +64,8 @@ export const WithoutValueText = {
 };
 const requiredAndOptionalDOM = html `
   <div class="ds-sb-required-and-optional">
-    <ds-checkbox required="true" text="Checkbox text"></ds-checkbox>
-    <ds-checkbox optional="true" text="Checkbox text"></ds-checkbox>
+    <ds-checkbox ds-required="true" ds-text="Checkbox text"></ds-checkbox>
+    <ds-checkbox ds-optional="true" ds-text="Checkbox text"></ds-checkbox>
   <div>
 `;
 export const RequiredAndOptional = {
@@ -89,9 +89,9 @@ export const RequiredAndOptional = {
 };
 const withLegendAndAssistiveTextDOM = html `
   <div class="ds-sb-with-legend-and-assistive-text">
-    <ds-checkbox legend="Legend text" assistive-text="Assistive text" text="Checkbox text"></ds-checkbox>
-    <ds-checkbox legend="Legend text" assistive-text="Assistive text" text="Checkbox text" required="true"></ds-checkbox>
-    <ds-checkbox legend="Legend text" assistive-text="Assistive text" text="Checkbox text" optional="true"></ds-checkbox>
+    <ds-checkbox ds-legend="Legend text" ds-assistive-text="Assistive text" ds-text="Checkbox text"></ds-checkbox>
+    <ds-checkbox ds-legend="Legend text" ds-assistive-text="Assistive text" ds-text="Checkbox text" ds-required="true"></ds-checkbox>
+    <ds-checkbox ds-legend="Legend text" ds-assistive-text="Assistive text" ds-text="Checkbox text" ds-optional="true"></ds-checkbox>
   </div>
 `;
 export const WithLegendAndAssistiveText = {

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

@@ -5,34 +5,21 @@ const meta = {
 export default meta;
 export const Default = {
     args: {
-        text: 'Checkbox text',
-        checked: false,
+        dsText: 'Checkbox text',
+        dsChecked: false,
     },
 };
 export const Playground = {
     args: {
-        text: 'Checkbox text',
-        checked: false,
-        indeterminate: false,
-        disabled: false,
-        errorText: '',
-        required: false,
-        optional: false,
-        legend: '',
-        assistiveText: '',
-        optionalText: '',
-    },
-    argTypes: {
-        text: { control: 'text' },
-        checked: { control: 'boolean' },
-        indeterminate: { control: 'boolean' },
-        disabled: { control: 'boolean' },
-        errorText: { control: 'text' },
-        required: { control: 'boolean' },
-        optional: { control: 'boolean' },
-        legend: { control: 'text' },
-        assistiveText: { control: 'text' },
-        optionalText: { control: 'text' },
-        ariaLabel: { name: 'aria-label', control: 'text' },
+        dsText: 'Checkbox text',
+        dsChecked: false,
+        dsIndeterminate: false,
+        dsDisabled: false,
+        dsErrorText: '',
+        dsRequired: false,
+        dsOptional: false,
+        dsLegend: '',
+        dsAssistiveText: '',
+        dsOptionalText: '',
     },
 };

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

@@ -32,7 +32,6 @@
   margin-left: var(--ds-spacing-large);
 }
 .ds-checkbox-group--horizontal > .ds-checkbox-group__checkboxes {
-  flex-direction: row;
+  flex-flow: row wrap;
   gap: var(--ds-spacing-small);
-  flex-wrap: wrap;
 }