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

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

@@ -0,0 +1,445 @@
+import { Fragment, h } from "@stencil/core";
+import classNames from "classnames";
+import { inheritAriaAttributes } from "../../../utils/attributes/attributes";
+import { idGenerator } from "../../../utils/utils";
+const fieldsetIdGenerator = idGenerator('ds-checkbox-group');
+export class DsCheckboxGroup {
+    fieldsetId = fieldsetIdGenerator.next().value;
+    checkboxId = `${this.fieldsetId}-checkbox`;
+    errorTextId = `${this.fieldsetId}-error`;
+    assistiveTextId = `${this.fieldsetId}-assistive-text`;
+    nestedId = `${this.fieldsetId}-nested`;
+    inheritedAttributes = {};
+    el;
+    dsCheckboxGroupChange;
+    dsCheckboxGroupIndeterminateChildChange;
+    legend;
+    assistiveText;
+    direction = 'vertical';
+    errorText = '';
+    text = '';
+    checked = false;
+    checkedChildElementCount = 0;
+    disabled = false;
+    parentCheckedCount = 0;
+    childElementsCount = 0;
+    isIndeterminate = false;
+    indeterminateChildCheckboxCount = 0;
+    elementIs = (localName) => (element) => element.localName === localName;
+    elementIsCheckbox = this.elementIs('ds-checkbox');
+    elementIsCheckboxGroup = this.elementIs('ds-checkbox-group');
+    getAriaDescribedBy = () => [Boolean(this.assistiveText) && this.assistiveTextId, Boolean(this.errorText) && this.errorTextId].filter(Boolean).join(' ');
+    getChildElements = () => {
+        const slot = this.el.shadowRoot.querySelector('slot');
+        return (slot?.assignedElements() || []);
+    };
+    getChildCheckboxElements = () => {
+        return this.getChildElements().filter(this.elementIsCheckbox);
+    };
+    updateChildElements = (updateFn) => {
+        this.getChildElements().forEach(updateFn);
+    };
+    updateChildCheckboxes = (updateFn) => {
+        this.getChildCheckboxElements().forEach(updateFn);
+    };
+    updateChildElementsChecked = (checked) => {
+        this.checkedChildElementCount = checked ? this.childElementsCount : 0;
+        this.updateChildElements((element) => {
+            element.checked = checked;
+            if (this.elementIsCheckboxGroup(element)) {
+                (async () => {
+                    await element.setChecked(checked);
+                })();
+            }
+        });
+    };
+    async setChecked(newValue) {
+        this.updateChildElementsChecked(newValue);
+    }
+    handleCheckboxDisabledChange(newValue) {
+        this.updateChildElements((element) => {
+            element.disabled = newValue;
+        });
+    }
+    handleCheckedChange(newValue) {
+        this.updateChildElementsChecked(newValue);
+    }
+    handleIndeterminateChange(newValue) {
+        this.dsCheckboxGroupIndeterminateChildChange.emit({ id: this.fieldsetId, indeterminate: newValue });
+    }
+    handleIndeterminateChildChange(event) {
+        this.indeterminateChildCheckboxCount = event.detail.indeterminate ? this.indeterminateChildCheckboxCount + 1 : this.indeterminateChildCheckboxCount - 1;
+    }
+    handleCheckedChildElementCountChange(newValue, oldValue) {
+        this.isIndeterminate =
+            this.checkedChildElementCount !== this.childElementsCount && this.checkedChildElementCount < this.childElementsCount && this.checkedChildElementCount > 0;
+        if (newValue === this.childElementsCount && newValue > oldValue) {
+            this.dsCheckboxGroupChange.emit({ id: this.fieldsetId, checked: true });
+        }
+        else if (oldValue === this.childElementsCount && newValue < oldValue) {
+            this.dsCheckboxGroupChange.emit({ id: this.fieldsetId, checked: false });
+        }
+    }
+    updateCheckedChildElementCount = (event) => {
+        if (event.detail.checked) {
+            this.checkedChildElementCount = this.checkedChildElementCount === this.childElementsCount ? this.checkedChildElementCount : this.checkedChildElementCount + 1;
+        }
+        else {
+            this.checkedChildElementCount = this.checkedChildElementCount === 0 ? 0 : this.checkedChildElementCount - 1;
+        }
+    };
+    handleCheckboxChange(event) {
+        if (event.detail.id === this.checkboxId) {
+            this.updateChildElementsChecked(event.detail.checked);
+            return;
+        }
+        if (this.getChildCheckboxElements().includes(event.target)) {
+            this.updateCheckedChildElementCount(event);
+        }
+    }
+    handleCheckboxGroupChange(event) {
+        if (this.getChildElements().includes(event.target)) {
+            this.updateCheckedChildElementCount(event);
+        }
+    }
+    setChildElementCount = () => {
+        this.childElementsCount = this.getChildElements().length;
+    };
+    componentWillLoad() {
+        this.inheritedAttributes = inheritAriaAttributes(this.el, ['aria-labelledby']);
+    }
+    componentDidLoad() {
+        this.setChildElementCount();
+        this.updateChildCheckboxes(element => {
+            element.setAttribute('data-errors-disabled', 'true');
+        });
+    }
+    componentDidUpdate() {
+        this.setChildElementCount();
+    }
+    render() {
+        const classes = classNames('ds-checkbox-group', {
+            'ds-checkbox-group--horizontal': this.direction === 'horizontal',
+        });
+        const legendClasses = classNames('ds-checkbox-group__legend');
+        const assistiveTextClasses = classNames('ds-checkbox-group__assistive-text');
+        const errorClasses = classNames('ds-checkbox-group__error', {
+            'ds-checkbox-group__error--visible': Boolean(this.errorText),
+        });
+        const nestedClasses = classNames('ds-checkbox-group', 'ds-checkbox-group--inset');
+        const checkboxesClasses = classNames('ds-checkbox-group__checkboxes');
+        const ariaDescribedBy = this.getAriaDescribedBy();
+        return (h("fieldset", { key: '2080f4f193fe5bb3a6702287cebcf5d7dcc4a9b7', id: this.fieldsetId, class: classes, "aria-describedby": ariaDescribedBy, ...this.inheritedAttributes }, this.legend && h("legend", { key: '15754cea90c38ad46ff41196b0de108f10f007a9', class: legendClasses }, this.legend), this.assistiveText && (h("small", { key: '7dde97170e62d0668a52b3a21256be65e04ae811', class: assistiveTextClasses, id: this.assistiveTextId }, this.assistiveText)), this.text ? (h(Fragment, null, h("ds-checkbox", { id: this.checkboxId, text: this.text, checked: this.checkedChildElementCount === this.childElementsCount, disabled: this.disabled, indeterminate: this.indeterminateChildCheckboxCount > 0 || this.isIndeterminate }), h("fieldset", { id: this.nestedId, "aria-labelledby": this.checkboxId, class: nestedClasses }, h("slot", null)))) : (h("div", { class: checkboxesClasses }, h("slot", null))), h("div", { key: 'b2e23012afd2f5439c89d5683f8b3776cf438ce5', class: errorClasses }, h("ds-input-validity", { key: 'cfb43cc67a907b7685d55f1ffdd86eb3f73f1bd0', id: this.errorTextId, text: this.errorText, type: "error" }))));
+    }
+    static get is() { return "ds-checkbox-group"; }
+    static get encapsulation() { return "shadow"; }
+    static get originalStyleUrls() {
+        return {
+            "$": ["ds-checkbox-group.scss"]
+        };
+    }
+    static get styleUrls() {
+        return {
+            "$": ["ds-checkbox-group.css"]
+        };
+    }
+    static get properties() {
+        return {
+            "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
+            },
+            "direction": {
+                "type": "string",
+                "mutable": false,
+                "complexType": {
+                    "original": "'horizontal' | 'vertical'",
+                    "resolved": "\"horizontal\" | \"vertical\"",
+                    "references": {}
+                },
+                "required": false,
+                "optional": false,
+                "docs": {
+                    "tags": [],
+                    "text": ""
+                },
+                "getter": false,
+                "setter": false,
+                "attribute": "direction",
+                "reflect": false,
+                "defaultValue": "'vertical'"
+            },
+            "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": "''"
+            },
+            "text": {
+                "type": "string",
+                "mutable": false,
+                "complexType": {
+                    "original": "string",
+                    "resolved": "string",
+                    "references": {}
+                },
+                "required": false,
+                "optional": false,
+                "docs": {
+                    "tags": [],
+                    "text": ""
+                },
+                "getter": false,
+                "setter": false,
+                "attribute": "text",
+                "reflect": false,
+                "defaultValue": "''"
+            },
+            "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"
+            },
+            "checkedChildElementCount": {
+                "type": "number",
+                "mutable": true,
+                "complexType": {
+                    "original": "number",
+                    "resolved": "number",
+                    "references": {}
+                },
+                "required": false,
+                "optional": false,
+                "docs": {
+                    "tags": [],
+                    "text": ""
+                },
+                "getter": false,
+                "setter": false,
+                "attribute": "checked-child-element-count",
+                "reflect": false,
+                "defaultValue": "0"
+            },
+            "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"
+            },
+            "parentCheckedCount": {
+                "type": "number",
+                "mutable": false,
+                "complexType": {
+                    "original": "number",
+                    "resolved": "number",
+                    "references": {}
+                },
+                "required": false,
+                "optional": false,
+                "docs": {
+                    "tags": [],
+                    "text": ""
+                },
+                "getter": false,
+                "setter": false,
+                "attribute": "parent-checked-count",
+                "reflect": false,
+                "defaultValue": "0"
+            }
+        };
+    }
+    static get states() {
+        return {
+            "childElementsCount": {},
+            "isIndeterminate": {},
+            "indeterminateChildCheckboxCount": {}
+        };
+    }
+    static get events() {
+        return [{
+                "method": "dsCheckboxGroupChange",
+                "name": "dsCheckboxGroupChange",
+                "bubbles": true,
+                "cancelable": true,
+                "composed": true,
+                "docs": {
+                    "tags": [],
+                    "text": ""
+                },
+                "complexType": {
+                    "original": "CheckboxGroupChangeEvent",
+                    "resolved": "CheckboxGroupChangeEvent",
+                    "references": {
+                        "CheckboxGroupChangeEvent": {
+                            "location": "local",
+                            "path": "/Users/teemuparssinen/hy/uh-design-system/component-library/packages/component-library/src/components/01-base-components/ds-checkbox-group/ds-checkbox-group.tsx",
+                            "id": "src/components/01-base-components/ds-checkbox-group/ds-checkbox-group.tsx::CheckboxGroupChangeEvent"
+                        }
+                    }
+                }
+            }, {
+                "method": "dsCheckboxGroupIndeterminateChildChange",
+                "name": "dsCheckboxGroupIndeterminateChildChange",
+                "bubbles": true,
+                "cancelable": true,
+                "composed": true,
+                "docs": {
+                    "tags": [],
+                    "text": ""
+                },
+                "complexType": {
+                    "original": "CheckboxGroupIndeterminateChildChangeEvent",
+                    "resolved": "CheckboxGroupIndeterminateChildChangeEvent",
+                    "references": {
+                        "CheckboxGroupIndeterminateChildChangeEvent": {
+                            "location": "local",
+                            "path": "/Users/teemuparssinen/hy/uh-design-system/component-library/packages/component-library/src/components/01-base-components/ds-checkbox-group/ds-checkbox-group.tsx",
+                            "id": "src/components/01-base-components/ds-checkbox-group/ds-checkbox-group.tsx::CheckboxGroupIndeterminateChildChangeEvent"
+                        }
+                    }
+                }
+            }];
+    }
+    static get methods() {
+        return {
+            "setChecked": {
+                "complexType": {
+                    "signature": "(newValue: boolean) => Promise<void>",
+                    "parameters": [{
+                            "name": "newValue",
+                            "type": "boolean",
+                            "docs": "New checked state."
+                        }],
+                    "references": {
+                        "Promise": {
+                            "location": "global",
+                            "id": "global::Promise"
+                        }
+                    },
+                    "return": "Promise<void>"
+                },
+                "docs": {
+                    "text": "Updates child elements' checked state.",
+                    "tags": [{
+                            "name": "param",
+                            "text": "newValue New checked state."
+                        }]
+                }
+            }
+        };
+    }
+    static get elementRef() { return "el"; }
+    static get watchers() {
+        return [{
+                "propName": "disabled",
+                "methodName": "handleCheckboxDisabledChange"
+            }, {
+                "propName": "checked",
+                "methodName": "handleCheckedChange"
+            }, {
+                "propName": "isIndeterminate",
+                "methodName": "handleIndeterminateChange"
+            }, {
+                "propName": "checkedChildElementCount",
+                "methodName": "handleCheckedChildElementCountChange"
+            }];
+    }
+    static get listeners() {
+        return [{
+                "name": "dsCheckboxGroupIndeterminateChildChange",
+                "method": "handleIndeterminateChildChange",
+                "target": undefined,
+                "capture": false,
+                "passive": false
+            }, {
+                "name": "dsCheckboxChange",
+                "method": "handleCheckboxChange",
+                "target": undefined,
+                "capture": false,
+                "passive": false
+            }, {
+                "name": "dsCheckboxGroupChange",
+                "method": "handleCheckboxGroupChange",
+                "target": undefined,
+                "capture": false,
+                "passive": false
+            }];
+    }
+}

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

@@ -0,0 +1,89 @@
+import { html } from "lit";
+const meta = {
+    title: 'Base Components/CheckboxGroup/Features',
+    component: 'ds-checkbox-group',
+    render: (args) => html `
+    <ds-checkbox-group
+      legend=${args.legend}
+      assistive-text=${args.assistiveText}
+      direction=${args.direction}
+      error-text=${args.errorText}
+    >
+      <ds-checkbox text="Value text"></ds-checkbox>
+      <ds-checkbox text="Value text"></ds-checkbox>
+      <ds-checkbox text="Value text"></ds-checkbox>
+    </ds-checkbox-group>
+  `,
+};
+export default meta;
+export const Vertical = {
+    args: {
+        legend: 'Group legend',
+        assistiveText: 'Assistive text',
+        direction: 'vertical',
+    },
+};
+export const VerticalInvalid = {
+    args: {
+        legend: 'Group legend',
+        assistiveText: 'Assistive text',
+        direction: 'vertical',
+        errorText: 'Error text',
+    },
+};
+export const Horizontal = {
+    args: {
+        legend: 'Group legend',
+        assistiveText: 'Assistive text',
+        direction: 'horizontal',
+    },
+};
+export const HorizontalInvalid = {
+    args: {
+        legend: 'Group legend',
+        assistiveText: 'Assistive text',
+        direction: 'horizontal',
+        errorText: 'Error text',
+    },
+};
+export const Nested = {
+    args: {
+        text: 'Parent checkbox',
+        checked: false,
+        disabled: false,
+    },
+    render: (args) => html `
+    <ds-checkbox-group
+      text=${args.text}
+      checked=${args.checked}
+      disabled=${args.disabled}
+    >
+      <ds-checkbox text="Child checkbox"></ds-checkbox>
+      <ds-checkbox text="Child checkbox"></ds-checkbox>
+      <ds-checkbox text="Child checkbox"></ds-checkbox>
+    </ds-checkbox-group>
+  `,
+};
+export const DeeplyNested = {
+    render: () => html `
+    <ds-checkbox-group
+      legend="Grandparent legend"
+      assistive-text="Grandparent assistive text"
+      error-text="Grandparent error text"
+      text="Grandparent checkbox"
+      checked="false"
+      disabled="false"
+    >
+      <ds-checkbox text="Parent checkbox"></ds-checkbox>
+      <ds-checkbox-group
+        text="Parent checkbox"
+        checked="false"
+        disabled="false"
+      >
+        <ds-checkbox text="Child checkbox"></ds-checkbox>
+        <ds-checkbox text="Child checkbox"></ds-checkbox>
+        <ds-checkbox text="Child checkbox"></ds-checkbox>
+      </ds-checkbox-group>
+    </ds-checkbox-group>
+  `,
+};

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

@@ -0,0 +1,47 @@
+import { html } from "lit";
+const meta = {
+    title: 'Base Components/CheckboxGroup',
+    component: 'ds-checkbox-group',
+    render: (args) => html `
+    <ds-checkbox-group
+      legend=${args.legend}
+      assistive-text=${args.assistiveText}
+      direction=${args.direction}
+      error-text=${args.errorText}
+      text=${args.text}
+      checked=${args.checked}
+      disabled=${args.disabled}
+    >
+      <ds-checkbox text="Value text"></ds-checkbox>
+      <ds-checkbox text="Value text"></ds-checkbox>
+      <ds-checkbox text="Value text"></ds-checkbox>
+    </ds-checkbox-group>
+  `,
+};
+export default meta;
+export const Default = {
+    args: {
+        legend: 'Group legend',
+        assistiveText: 'Assistive text',
+    },
+};
+export const Playground = {
+    args: {
+        legend: 'Group legend',
+        assistiveText: 'Assistive text',
+        direction: 'vertical',
+        errorText: '',
+        text: '',
+        checked: false,
+        disabled: false,
+    },
+    argTypes: {
+        legend: { control: 'text' },
+        assistiveText: { control: 'text' },
+        direction: { control: 'radio', options: ['horizontal', 'vertical'] },
+        errorText: { control: 'text' },
+        text: { control: 'text' },
+        checked: { control: 'boolean' },
+        disabled: { control: 'boolean' },
+    },
+};

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

@@ -48,7 +48,7 @@ export class DsIcon {
         }
     }
     render() {
-        return (h(Fragment, { key: 'cc6f636f46e631b82570aaa156bbced5e7c23fc6' }, h("span", { key: 'c3305714b164807c119ff1e9ab4d9496dd3eb105', class: 'ds-icon--container', innerHTML: this.getIcon(), "aria-hidden": this.hidden ? 'true' : 'false' })));
+        return (h(Fragment, { key: '3f68a522cda5ce59a62a8afa72c0c3305b0fb6e0' }, h("span", { key: 'cb6c204588d641e847c78bab7860e859d96dd300', class: "ds-icon--container", innerHTML: this.getIcon(), "aria-hidden": this.hidden ? 'true' : 'false' })));
     }
     static get is() { return "ds-icon"; }
     static get encapsulation() { return "shadow"; }

package/dist/collection/components/01-base-components/ds-icon/{ds-icon.stories.js → stories/ds-icon.stories.js}

@@ -1,5 +1,5 @@
-import { icons } from "../../../components/00-foundations/icons/iconList";
-import { getColourVariables } from "../../../utils/colours/colourUtils";
+import { icons } from "../../../00-foundations/icons/iconList";
+import { getColourVariables } from "../../../../utils/colours/colourUtils";
 const meta = {
     title: 'Base Components/Icon',
     component: 'ds-icon',
@@ -53,3 +53,13 @@ Default.args = {
     dsTitle: 'Icon',
     hidden: true,
 };
+export const Playground = {
+    args: {
+        name: 'archive',
+        colour: 'primary',
+        size: '1.5rem',
+        dsTitle: 'Icon',
+        role: 'img',
+        hidden: true,
+    },
+};

package/dist/collection/components/01-base-components/ds-input-validity/ds-input-validity.css

@@ -0,0 +1,31 @@
+:root {
+  --ds-breakpoint-xSmall: 20rem;
+  --ds-breakpoint-small: 30rem;
+  --ds-breakpoint-medium: 60rem;
+  --ds-breakpoint-large: 75rem;
+  --ds-breakpoint-xLarge: 90rem;
+}
+
+.ds-input-validity {
+  display: flex;
+  align-items: center;
+  margin-top: var(--ds-spacing-2xSmall);
+  gap: var(--ds-spacing-2xSmall);
+}
+.ds-input-validity--error {
+  color: var(--ds-textColor-danger);
+}
+.ds-input-validity--success {
+  color: var(--ds-textColor-success);
+}
+.ds-input-validity ds-icon {
+  display: block;
+  height: 1.5rem;
+}
+.ds-input-validity small {
+  font-family: var(--ds-fontFamily-body);
+  font-size: var(--ds-fontSize-16);
+  font-weight: var(--ds-fontWeight-regular);
+  letter-spacing: var(--ds-letterSpacing-wide);
+  line-height: var(--ds-lineHeight-large);
+}