@uh-design-system/component-library 0.4.0 → 0.4.2

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

@@ -0,0 +1,429 @@
+import { Fragment, h } from "@stencil/core";
+import classNames from "classnames";
+import { inheritAriaAttributes } from "../../../utils/attributes/attributes";
+import { idGenerator } from "../../../utils/utils";
+import { getOptionalText, getRequiredText } from "../../../utils/controls/controlUtils";
+const checkboxIdGenerator = idGenerator('ds-checkbox');
+export class DsCheckbox {
+    labelId;
+    errorTextId;
+    assistiveTextId;
+    inheritedAttributes = {};
+    initialChecked;
+    inputElem;
+    el;
+    internals;
+    dsCheckboxChange;
+    dsCheckboxError;
+    checkboxId;
+    checked = false;
+    legend;
+    assistiveText;
+    text;
+    indeterminate = false;
+    disabled = false;
+    errorText = '';
+    errorsDisabled = false;
+    required = false;
+    optional = false;
+    optionalText;
+    ariaLabel;
+    value = this.checked.toString();
+    validationMessage;
+    setIds = () => {
+        this.checkboxId = this.checkboxId || checkboxIdGenerator.next().value;
+        this.labelId = `${this.checkboxId}-label`;
+        this.errorTextId = `${this.checkboxId}-error`;
+        this.assistiveTextId = `${this.checkboxId}-assistive-text`;
+    };
+    getErrorText = () => (!this.errorsDisabled ? this.errorText || this.internals?.validationMessage || this.inputElem?.validationMessage : '');
+    getLegendText = () => {
+        if (this.required) {
+            return getRequiredText(this.legend);
+        }
+        if (this.optional) {
+            return getOptionalText(this.legend, this.optionalText);
+        }
+        return this.legend;
+    };
+    getCheckboxText = () => {
+        if (this.legend) {
+            return this.text;
+        }
+        if (this.required) {
+            return getRequiredText(this.text);
+        }
+        if (this.optional) {
+            return getOptionalText(this.text, this.optionalText);
+        }
+        return this.text;
+    };
+    getAriaDescribedBy = () => [Boolean(this.assistiveText) && this.assistiveTextId, Boolean(this.getErrorText()) && this.errorTextId].filter(Boolean).join(' ');
+    restoreInitialState = () => {
+        this.checked = this.initialChecked;
+        this.value = this.checked.toString();
+        this.internals?.setValidity({});
+        this.internals?.setFormValue(this.value);
+    };
+    setInitialState = () => {
+        this.initialChecked = this.checked;
+        this.value = this.checked.toString();
+        this.internals?.setFormValue(this.value);
+    };
+    emitCheckboxError = () => {
+        this.dsCheckboxError.emit(this.getErrorText());
+    };
+    formResetCallback() {
+        this.restoreInitialState();
+    }
+    componentWillLoad() {
+        this.setInitialState();
+        this.setIds();
+        this.inheritedAttributes = inheritAriaAttributes(this.el, ['aria-label', 'aria-describedby', 'aria-hidden']);
+    }
+    componentDidLoad() {
+        this.ariaLabel = this.el.getAttribute('aria-label');
+        this.el.removeAttribute('aria-label');
+    }
+    componentDidUpdate() {
+        this.emitCheckboxError();
+    }
+    handleChange = () => {
+        this.checked = !this.checked;
+        this.value = this.checked.toString();
+        this.internals?.setFormValue(this.value);
+        this.dsCheckboxChange.emit({ id: this.checkboxId, checked: this.checked });
+    };
+    handleKeyUp = (event) => {
+        if (event.key === 'Enter') {
+            this.handleChange();
+        }
+    };
+    renderCheckbox() {
+        const classes = classNames('ds-checkbox', {
+            'ds-checkbox--disabled': this.disabled,
+            'ds-checkbox--no-margin': Boolean(!this.text),
+        });
+        const inputClasses = classNames('ds-checkbox__input', {
+            'ds-checkbox__input--invalid': Boolean(this.errorText),
+        });
+        const errorText = this.getErrorText();
+        const errorClasses = classNames('ds-checkbox-error', {
+            'ds-checkbox-error--visible': Boolean(errorText),
+        });
+        const ariaDescribedBy = this.getAriaDescribedBy();
+        return (h(Fragment, null, h("div", null, h("label", { id: this.labelId, class: classes }, h("input", { ref: inputElem => (this.inputElem = inputElem), type: "checkbox", class: inputClasses, checked: this.checked, indeterminate: this.indeterminate, onChange: this.handleChange, onKeyUp: this.handleKeyUp, value: this.value, disabled: this.disabled, required: this.required, id: this.checkboxId, "aria-describedby": ariaDescribedBy, "aria-label": this.ariaLabel, ...this.inheritedAttributes }), this.getCheckboxText())), !this.errorsDisabled && (h("div", { class: errorClasses }, h("ds-input-validity", { id: this.errorTextId, text: errorText, type: "error" })))));
+    }
+    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()));
+    }
+    render() {
+        if (this.legend) {
+            return this.renderFieldset();
+        }
+        return this.renderCheckbox();
+    }
+    static get is() { return "ds-checkbox"; }
+    static get encapsulation() { return "shadow"; }
+    static get formAssociated() { return true; }
+    static get originalStyleUrls() {
+        return {
+            "$": ["ds-checkbox.scss"]
+        };
+    }
+    static get styleUrls() {
+        return {
+            "$": ["ds-checkbox.css"]
+        };
+    }
+    static get properties() {
+        return {
+            "checkboxId": {
+                "type": "string",
+                "mutable": true,
+                "complexType": {
+                    "original": "string",
+                    "resolved": "string",
+                    "references": {}
+                },
+                "required": false,
+                "optional": true,
+                "docs": {
+                    "tags": [],
+                    "text": ""
+                },
+                "getter": false,
+                "setter": false,
+                "attribute": "id",
+                "reflect": false
+            },
+            "checked": {
+                "type": "boolean",
+                "mutable": true,
+                "complexType": {
+                    "original": "boolean",
+                    "resolved": "boolean",
+                    "references": {}
+                },
+                "required": false,
+                "optional": false,
+                "docs": {
+                    "tags": [],
+                    "text": ""
+                },
+                "getter": false,
+                "setter": false,
+                "attribute": "checked",
+                "reflect": false,
+                "defaultValue": "false"
+            },
+            "legend": {
+                "type": "string",
+                "mutable": false,
+                "complexType": {
+                    "original": "string",
+                    "resolved": "string",
+                    "references": {}
+                },
+                "required": false,
+                "optional": true,
+                "docs": {
+                    "tags": [],
+                    "text": ""
+                },
+                "getter": false,
+                "setter": false,
+                "attribute": "legend",
+                "reflect": false
+            },
+            "assistiveText": {
+                "type": "string",
+                "mutable": false,
+                "complexType": {
+                    "original": "string",
+                    "resolved": "string",
+                    "references": {}
+                },
+                "required": false,
+                "optional": true,
+                "docs": {
+                    "tags": [],
+                    "text": ""
+                },
+                "getter": false,
+                "setter": false,
+                "attribute": "assistive-text",
+                "reflect": false
+            },
+            "text": {
+                "type": "string",
+                "mutable": false,
+                "complexType": {
+                    "original": "string",
+                    "resolved": "string",
+                    "references": {}
+                },
+                "required": false,
+                "optional": true,
+                "docs": {
+                    "tags": [],
+                    "text": ""
+                },
+                "getter": false,
+                "setter": false,
+                "attribute": "text",
+                "reflect": false
+            },
+            "indeterminate": {
+                "type": "boolean",
+                "mutable": false,
+                "complexType": {
+                    "original": "boolean",
+                    "resolved": "boolean",
+                    "references": {}
+                },
+                "required": false,
+                "optional": false,
+                "docs": {
+                    "tags": [],
+                    "text": ""
+                },
+                "getter": false,
+                "setter": false,
+                "attribute": "indeterminate",
+                "reflect": false,
+                "defaultValue": "false"
+            },
+            "disabled": {
+                "type": "boolean",
+                "mutable": false,
+                "complexType": {
+                    "original": "boolean",
+                    "resolved": "boolean",
+                    "references": {}
+                },
+                "required": false,
+                "optional": false,
+                "docs": {
+                    "tags": [],
+                    "text": ""
+                },
+                "getter": false,
+                "setter": false,
+                "attribute": "disabled",
+                "reflect": false,
+                "defaultValue": "false"
+            },
+            "errorText": {
+                "type": "string",
+                "mutable": false,
+                "complexType": {
+                    "original": "string",
+                    "resolved": "string",
+                    "references": {}
+                },
+                "required": false,
+                "optional": false,
+                "docs": {
+                    "tags": [],
+                    "text": ""
+                },
+                "getter": false,
+                "setter": false,
+                "attribute": "error-text",
+                "reflect": false,
+                "defaultValue": "''"
+            },
+            "errorsDisabled": {
+                "type": "boolean",
+                "mutable": false,
+                "complexType": {
+                    "original": "boolean",
+                    "resolved": "boolean",
+                    "references": {}
+                },
+                "required": false,
+                "optional": false,
+                "docs": {
+                    "tags": [],
+                    "text": ""
+                },
+                "getter": false,
+                "setter": false,
+                "attribute": "data-errors-disabled",
+                "reflect": false,
+                "defaultValue": "false"
+            },
+            "required": {
+                "type": "boolean",
+                "mutable": false,
+                "complexType": {
+                    "original": "boolean",
+                    "resolved": "boolean",
+                    "references": {}
+                },
+                "required": false,
+                "optional": false,
+                "docs": {
+                    "tags": [],
+                    "text": ""
+                },
+                "getter": false,
+                "setter": false,
+                "attribute": "required",
+                "reflect": false,
+                "defaultValue": "false"
+            },
+            "optional": {
+                "type": "boolean",
+                "mutable": false,
+                "complexType": {
+                    "original": "boolean",
+                    "resolved": "boolean",
+                    "references": {}
+                },
+                "required": false,
+                "optional": false,
+                "docs": {
+                    "tags": [],
+                    "text": ""
+                },
+                "getter": false,
+                "setter": false,
+                "attribute": "optional",
+                "reflect": false,
+                "defaultValue": "false"
+            },
+            "optionalText": {
+                "type": "string",
+                "mutable": false,
+                "complexType": {
+                    "original": "string",
+                    "resolved": "string",
+                    "references": {}
+                },
+                "required": false,
+                "optional": true,
+                "docs": {
+                    "tags": [],
+                    "text": ""
+                },
+                "getter": false,
+                "setter": false,
+                "attribute": "optional-text",
+                "reflect": false
+            }
+        };
+    }
+    static get states() {
+        return {
+            "ariaLabel": {},
+            "value": {},
+            "validationMessage": {}
+        };
+    }
+    static get events() {
+        return [{
+                "method": "dsCheckboxChange",
+                "name": "dsCheckboxChange",
+                "bubbles": true,
+                "cancelable": true,
+                "composed": true,
+                "docs": {
+                    "tags": [],
+                    "text": ""
+                },
+                "complexType": {
+                    "original": "CheckboxChangeEvent",
+                    "resolved": "CheckboxChangeEvent",
+                    "references": {
+                        "CheckboxChangeEvent": {
+                            "location": "local",
+                            "path": "/Users/teemuparssinen/hy/uh-design-system/component-library/packages/component-library/src/components/01-base-components/ds-checkbox/ds-checkbox.tsx",
+                            "id": "src/components/01-base-components/ds-checkbox/ds-checkbox.tsx::CheckboxChangeEvent"
+                        }
+                    }
+                }
+            }, {
+                "method": "dsCheckboxError",
+                "name": "dsCheckboxError",
+                "bubbles": true,
+                "cancelable": true,
+                "composed": true,
+                "docs": {
+                    "tags": [],
+                    "text": ""
+                },
+                "complexType": {
+                    "original": "string",
+                    "resolved": "string",
+                    "references": {}
+                }
+            }];
+    }
+    static get elementRef() { return "el"; }
+    static get attachInternalsMemberName() { return "internals"; }
+}

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

@@ -0,0 +1,115 @@
+import { html } from "lit";
+import { litTemplateResultToString } from "../../../../utils/utils";
+const meta = {
+    title: 'Base Components/Checkbox/Features',
+    component: 'ds-checkbox',
+};
+export default meta;
+export const Unchecked = {
+    args: {
+        text: 'Checkbox text',
+        checked: false,
+    },
+};
+export const Checked = {
+    args: {
+        text: 'Checkbox text',
+        checked: true,
+    },
+};
+export const Indeterminate = {
+    args: {
+        text: 'Checkbox text',
+        indeterminate: true,
+    },
+};
+export const Disabled = {
+    args: {
+        text: 'Checkbox text',
+        checked: false,
+        disabled: true
+    },
+};
+export const Invalid = {
+    args: {
+        text: 'Checkbox text',
+        checked: false,
+        errorText: '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>
+  </div>
+`;
+export const WithoutValueText = {
+    parameters: {
+        docs: {
+            source: {
+                code: litTemplateResultToString(withoutValueTextDOM),
+            },
+        },
+    },
+    render: () => html `
+    <style>
+      .ds-sb-without-value-text {
+        display: flex;
+        gap: 1rem;
+      }
+    </style>
+    ${withoutValueTextDOM}
+  `,
+};
+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>
+  <div>
+`;
+export const RequiredAndOptional = {
+    parameters: {
+        docs: {
+            source: {
+                code: litTemplateResultToString(requiredAndOptionalDOM),
+            },
+        },
+    },
+    render: () => html `
+    <style>
+      .ds-sb-required-and-optional {
+        display: grid;
+        gap: 1rem;
+        grid-template-columns: 1fr 1fr;
+      }
+    </style>
+    ${requiredAndOptionalDOM}
+  `,
+};
+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>
+  </div>
+`;
+export const WithLegendAndAssistiveText = {
+    parameters: {
+        docs: {
+            source: {
+                code: litTemplateResultToString(withLegendAndAssistiveTextDOM),
+            },
+        },
+    },
+    render: () => html `
+    <style>
+      .ds-sb-with-legend-and-assistive-text {
+        display: grid;
+        gap: 1rem;
+        grid-template-columns: 1fr 1fr;
+      }
+    </style>
+    ${withLegendAndAssistiveTextDOM}
+  `,
+};

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

@@ -0,0 +1,37 @@
+const meta = {
+    title: 'Base Components/Checkbox',
+    component: 'ds-checkbox',
+};
+export default meta;
+export const Default = {
+    args: {
+        text: 'Checkbox text',
+        checked: 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' },
+    },
+};

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

@@ -0,0 +1,38 @@
+.ds-checkbox-group {
+  display: inline-flex;
+  flex-direction: column;
+  border: none;
+  padding: 0;
+  margin: 0;
+}
+.ds-checkbox-group__legend {
+  padding-inline: 0;
+  font-size: var(--ds-fontSize-16);
+  font-weight: var(--ds-fontWeight-semibold);
+  letter-spacing: var(--ds-letterSpacing-wide);
+  line-height: var(--ds-lineHeight-large);
+}
+.ds-checkbox-group__assistive-text {
+  font-size: var(--ds-fontSize-14);
+  color: var(--ds-textColor-secondary);
+  line-height: var(--ds-lineHeight-large);
+  margin-bottom: var(--ds-spacing-2xSmall);
+}
+.ds-checkbox-group__error {
+  display: flex;
+}
+.ds-checkbox-group__error--visible {
+  padding-top: var(--ds-spacing-3xSmall);
+}
+.ds-checkbox-group > .ds-checkbox-group__checkboxes {
+  display: inline-flex;
+  flex-direction: column;
+}
+.ds-checkbox-group--inset {
+  margin-left: var(--ds-spacing-large);
+}
+.ds-checkbox-group--horizontal > .ds-checkbox-group__checkboxes {
+  flex-direction: row;
+  gap: var(--ds-spacing-small);
+  flex-wrap: wrap;
+}