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

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

@@ -1,89 +1,254 @@
 import { html } from "lit";
+import { getShadowRoot } from "../../../../utils/tests/testUtils";
+import { expect, userEvent, waitFor } from "@storybook/test";
 const meta = {
     title: 'Base Components/CheckboxGroup/Features',
     component: 'ds-checkbox-group',
-    render: (args) => html `
+    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-legend=${args.dsLegend}
+      ds-assistive-text=${args.dsAssistiveText}
+      ds-direction=${args.dsDirection}
+      ds-error-text=${args.dsErrorText}
+      ds-required=${args.dsRequired}
+      ds-all-required=${args.dsAllRequired}
+      ds-optional=${args.dsOptional}
+      ds-optional-text=${args.dsOptionalText}>
+      <ds-checkbox ds-text="Value text"></ds-checkbox>
+      <ds-checkbox ds-text="Value text"></ds-checkbox>
+      <ds-checkbox ds-text="Value text"></ds-checkbox>
     </ds-checkbox-group>
   `,
 };
 export default meta;
 export const Vertical = {
     args: {
-        legend: 'Group legend',
-        assistiveText: 'Assistive text',
-        direction: 'vertical',
+        dsLegend: 'Group legend',
+        dsAssistiveText: 'Assistive text',
+        dsDirection: 'vertical',
+        dsRequired: false,
+        dsAllRequired: false,
+        dsOptional: false,
     },
 };
 export const VerticalInvalid = {
     args: {
-        legend: 'Group legend',
-        assistiveText: 'Assistive text',
-        direction: 'vertical',
-        errorText: 'Error text',
+        dsLegend: 'Group legend',
+        dsAssistiveText: 'Assistive text',
+        dsDirection: 'vertical',
+        dsErrorText: 'Error text',
+        dsRequired: false,
+        dsAllRequired: false,
+        dsOptional: false,
     },
 };
 export const Horizontal = {
     args: {
-        legend: 'Group legend',
-        assistiveText: 'Assistive text',
-        direction: 'horizontal',
+        dsLegend: 'Group legend',
+        dsAssistiveText: 'Assistive text',
+        dsDirection: 'horizontal',
+        dsRequired: false,
+        dsAllRequired: false,
+        dsOptional: false,
     },
 };
 export const HorizontalInvalid = {
     args: {
-        legend: 'Group legend',
-        assistiveText: 'Assistive text',
-        direction: 'horizontal',
-        errorText: 'Error text',
+        dsLegend: 'Group legend',
+        dsAssistiveText: 'Assistive text',
+        dsDirection: 'horizontal',
+        dsErrorText: 'Error text',
+        dsRequired: false,
+        dsAllRequired: false,
+        dsOptional: false,
+    },
+};
+export const Required = {
+    args: {
+        dsLegend: 'Group legend',
+        dsAssistiveText: 'Assistive text',
+        dsDirection: 'horizontal',
+        dsRequired: true,
+        dsAllRequired: false,
+    },
+    play: async ({ canvasElement, step }) => {
+        const shadowRoot = await getShadowRoot(canvasElement, 'ds-checkbox-group');
+        const slottedCheckboxWebcs = canvasElement.querySelectorAll('ds-checkbox');
+        const slottedCheckboxInputs = [];
+        for (const webc of slottedCheckboxWebcs) {
+            slottedCheckboxInputs.push(webc.shadowRoot.querySelector('input'));
+        }
+        const inputValidity = shadowRoot.querySelector('ds-input-validity');
+        await waitFor(() => {
+            expect(inputValidity.querySelector('small')).not.toBeInTheDocument();
+        });
+        await step('Checking a child checkbox should not show any error message', async () => {
+            slottedCheckboxInputs[0].click();
+            await waitFor(() => {
+                expect(inputValidity.querySelector('small')).not.toBeInTheDocument();
+            });
+        });
+        await step('Unchecking a child checkbox should show an error message', async () => {
+            slottedCheckboxInputs[0].click();
+            await waitFor(() => {
+                expect(inputValidity.querySelector('small')).toBeInTheDocument();
+                expect(inputValidity.querySelector('small')).toHaveTextContent('Please select at least one option.');
+            });
+        });
+    },
+};
+export const AllRequired = {
+    args: {
+        dsLegend: 'Group legend',
+        dsAssistiveText: 'Assistive text',
+        dsDirection: 'horizontal',
+        dsRequired: false,
+        dsAllRequired: true,
+    },
+    play: async ({ canvasElement, step }) => {
+        const shadowRoot = await getShadowRoot(canvasElement, 'ds-checkbox-group');
+        const slottedCheckboxWebcs = canvasElement.querySelectorAll('ds-checkbox');
+        const slottedCheckboxInputs = [];
+        for (const webc of slottedCheckboxWebcs) {
+            slottedCheckboxInputs.push(webc.shadowRoot.querySelector('input'));
+        }
+        const inputValidity = shadowRoot.querySelector('ds-input-validity');
+        await waitFor(() => {
+            expect(inputValidity.querySelector('small')).not.toBeInTheDocument();
+        });
+        await step('Checking all child checkboxes should not show an error message', async () => {
+            for (const slottedCheckboxInput of slottedCheckboxInputs) {
+                slottedCheckboxInput.click();
+            }
+            await waitFor(() => {
+                expect(inputValidity.querySelector('small')).not.toBeInTheDocument();
+            });
+        });
+        await step('Unchecking all child checkboxes should show an error message', async () => {
+            for (const slottedCheckboxInput of slottedCheckboxInputs) {
+                slottedCheckboxInput.click();
+            }
+            await waitFor(() => {
+                expect(inputValidity.querySelector('small')).toBeInTheDocument();
+                expect(inputValidity.querySelector('small')).toHaveTextContent('Please select all options.');
+            });
+        });
+    },
+};
+export const Optional = {
+    args: {
+        dsLegend: 'Group legend',
+        dsAssistiveText: 'Assistive text',
+        dsDirection: 'horizontal',
+        dsRequired: false,
+        dsAllRequired: false,
+        dsOptional: true,
+        dsOptionalText: '(optional)',
     },
 };
 export const Nested = {
     args: {
-        text: 'Parent checkbox',
-        checked: false,
-        disabled: false,
+        dsText: 'Parent checkbox',
+        dsChecked: false,
+        dsDisabled: 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>
+    render: args => html `
+    <ds-checkbox-group ds-text=${args.dsText} ds-checked=${args.dsChecked} ds-disabled=${args.dsDisabled}>
+      <ds-checkbox ds-text="Child checkbox"></ds-checkbox>
+      <ds-checkbox ds-text="Child checkbox"></ds-checkbox>
+      <ds-checkbox ds-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-legend="Grandparent legend"
+      ds-assistive-text="Grandparent assistive text"
+      ds-error-text="Grandparent error text"
+      ds-text="Grandparent checkbox"
+      ds-checked="false"
+      ds-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 ds-text="Parent checkbox"></ds-checkbox>
+      <ds-checkbox-group id="parent-checkbox-group" ds-text="Parent checkbox" ds-checked="HTMLDsCheckboxGroupElement" ds-disabled="false">
+        <ds-checkbox ds-text="Child checkbox"></ds-checkbox>
+        <ds-checkbox ds-text="Child checkbox"></ds-checkbox>
+        <ds-checkbox ds-text="Child checkbox"></ds-checkbox>
       </ds-checkbox-group>
     </ds-checkbox-group>
   `,
+    play: async ({ canvasElement, step }) => {
+        const grandParentShadowRoot = await getShadowRoot(canvasElement, 'ds-checkbox-group');
+        const grandParentCheckboxWebc = grandParentShadowRoot.querySelector('ds-checkbox');
+        const grandParentCheckboxInput = grandParentCheckboxWebc.shadowRoot.querySelector('input');
+        const parentShadowRoot = await getShadowRoot(canvasElement, 'ds-checkbox-group#parent-checkbox-group');
+        const parentCheckboxWebc = parentShadowRoot.querySelector('ds-checkbox');
+        const parentCheckboxInput = parentCheckboxWebc.shadowRoot.querySelector('input');
+        const slottedCheckboxWebcs = canvasElement.querySelectorAll('ds-checkbox');
+        const slottedCheckboxInputs = [];
+        for (const webc of slottedCheckboxWebcs) {
+            slottedCheckboxInputs.push(webc.shadowRoot.querySelector('input'));
+        }
+        await waitFor(() => {
+            expect(grandParentCheckboxInput.checked).toBe(false);
+            expect(parentCheckboxInput.checked).toBe(false);
+        });
+        await step('Clicking an unchecked grand parent checkbox should check all checkboxes', async () => {
+            await userEvent.click(grandParentCheckboxInput);
+            await waitFor(() => {
+                expect(grandParentCheckboxInput.checked).toBe(true);
+                expect(parentCheckboxInput.checked).toBe(true);
+                slottedCheckboxInputs.forEach(checkbox => {
+                    expect(checkbox.checked).toBe(true);
+                });
+            });
+        });
+        await waitFor(() => {
+            expect(grandParentCheckboxInput.checked).toBe(true);
+            expect(parentCheckboxInput.checked).toBe(true);
+        });
+        await step('Clicking a checked grand parent checkbox should uncheck all checkboxes', async () => {
+            await userEvent.click(grandParentCheckboxInput);
+            await waitFor(() => {
+                expect(grandParentCheckboxInput.checked).toBe(false);
+                expect(parentCheckboxInput.checked).toBe(false);
+                slottedCheckboxInputs.forEach(checkbox => {
+                    expect(checkbox.checked).toBe(false);
+                });
+            });
+        });
+        await waitFor(() => {
+            expect(grandParentCheckboxInput.checked).toBe(false);
+            expect(parentCheckboxInput.checked).toBe(false);
+        });
+        await step('Clicking all unchecked child checkboxes should check parent and grandparent checkbox', async () => {
+            for (const checkbox of slottedCheckboxInputs) {
+                await userEvent.click(checkbox);
+                await waitFor(() => {
+                    expect(checkbox.checked).toBe(true);
+                });
+            }
+            await waitFor(() => {
+                expect(grandParentCheckboxInput.checked).toBe(true);
+                expect(parentCheckboxInput.checked).toBe(true);
+            });
+        });
+        await waitFor(() => {
+            expect(grandParentCheckboxInput.checked).toBe(true);
+            expect(parentCheckboxInput.checked).toBe(true);
+        });
+        await step('Clicking all checked child checkboxes should uncheck parent and grandparent checkbox', async () => {
+            for (const checkbox of slottedCheckboxInputs) {
+                await userEvent.click(checkbox);
+                await waitFor(() => {
+                    expect(checkbox.checked).toBe(false);
+                });
+            }
+            await waitFor(() => {
+                expect(grandParentCheckboxInput.checked).toBe(false);
+                expect(parentCheckboxInput.checked).toBe(false);
+            });
+        });
+    },
 };

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

@@ -4,44 +4,46 @@ const meta = {
     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-legend=${args.dsLegend}
+      ds-assistive-text=${args.dsAssistiveText}
+      ds-direction=${args.dsDirection}
+      ds-error-text=${args.dsErrorText}
+      ds-text=${args.dsText}
+      ds-checked=${args.dsChecked}
+      ds-disabled=${args.dsDisabled}
+      ds-required=${args.dsRequired}
+      ds-all-required=${args.dsAllRequired}
+      ds-optional=${args.dsOptional}
+      ds-optional-text=${args.dsOptionalText}
     >
-      <ds-checkbox text="Value text"></ds-checkbox>
-      <ds-checkbox text="Value text"></ds-checkbox>
-      <ds-checkbox text="Value text"></ds-checkbox>
+      <ds-checkbox ds-text="Value text"></ds-checkbox>
+      <ds-checkbox ds-text="Value text"></ds-checkbox>
+      <ds-checkbox ds-text="Value text"></ds-checkbox>
     </ds-checkbox-group>
   `,
 };
 export default meta;
 export const Default = {
     args: {
-        legend: 'Group legend',
-        assistiveText: 'Assistive text',
+        dsLegend: 'Group legend',
+        dsAssistiveText: 'Assistive text',
+        dsDisabled: false,
+        dsRequired: false,
+        dsAllRequired: false,
+        dsOptional: false
     },
 };
 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' },
+        dsLegend: 'Group legend',
+        dsAssistiveText: 'Assistive text',
+        dsDirection: 'vertical',
+        dsErrorText: '',
+        dsText: '',
+        dsChecked: false,
+        dsDisabled: false,
+        dsRequired: false,
+        dsAllRequired: false,
+        dsOptional: false
     },
 };

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

@@ -2,17 +2,17 @@ import { Fragment, h } from "@stencil/core";
 import { icons } from "../../../components/00-foundations/icons/iconList";
 import { remToPx } from "../../../utils/utils";
 export class DsIcon {
-    name;
-    colour;
-    size = '1.5rem';
+    dsName;
+    dsColour;
+    dsSize = '1.5rem';
     dsTitle = 'Icon';
-    role = 'img';
-    hidden = true;
+    dsRole = 'img';
+    dsHidden = true;
     message = '';
     getIcon() {
-        const selectedIcon = icons.find(icon => icon.name === this.name);
+        const selectedIcon = icons.find(icon => icon.name === this.dsName);
         if (!selectedIcon) {
-            console.warn(`Icon with name "${this.name}" not found.`);
+            console.warn(`Icon with name "${this.dsName}" not found.`);
             return '';
         }
         const svgElement = this.parseSvg(selectedIcon.component);
@@ -27,13 +27,13 @@ export class DsIcon {
         return svgDoc.querySelector('svg');
     }
     getIconColour() {
-        const colour = this.colour ? `var(--${this.colour})` : 'currentColor';
+        const colour = this.dsColour ? `var(--${this.dsColour})` : 'currentColor';
         return colour;
     }
     setIconAttributes(svgElement) {
-        const size = this.size || '1.5rem';
+        const size = this.dsSize || '1.5rem';
         const colour = this.getIconColour() || 'currentColor';
-        const role = this.role || 'img';
+        const role = this.dsRole || 'img';
         const title = this.dsTitle || '';
         svgElement.setAttribute('width', remToPx(size));
         svgElement.setAttribute('height', remToPx(size));
@@ -48,7 +48,7 @@ export class DsIcon {
         }
     }
     render() {
-        return (h(Fragment, { key: '58309a22dafbad09a1f9e884657aad264261174e' }, h("span", { key: '3295d61af901e74ea7c39d1e7a4b7e083f44794f', class: "ds-icon--container", innerHTML: this.getIcon(), "aria-hidden": this.hidden ? 'true' : 'false' })));
+        return (h(Fragment, { key: '4d9d8d8b048557f295902bd35c628faa85c604d8' }, h("span", { key: '3737f3c81cdeaf17592b8c8fc321e25a126eedb6', class: "ds-icon--container", innerHTML: this.getIcon(), "aria-hidden": this.dsHidden ? 'true' : 'false' })));
     }
     static get is() { return "ds-icon"; }
     static get encapsulation() { return "shadow"; }
@@ -64,8 +64,9 @@ export class DsIcon {
     }
     static get properties() {
         return {
-            "name": {
+            "dsName": {
                 "type": "string",
+                "attribute": "ds-name",
                 "mutable": false,
                 "complexType": {
                     "original": "string",
@@ -76,15 +77,15 @@ export class DsIcon {
                 "optional": false,
                 "docs": {
                     "tags": [],
-                    "text": ""
+                    "text": "Name of the icon to display"
                 },
                 "getter": false,
                 "setter": false,
-                "attribute": "name",
                 "reflect": false
             },
-            "colour": {
+            "dsColour": {
                 "type": "string",
+                "attribute": "ds-colour",
                 "mutable": false,
                 "complexType": {
                     "original": "string",
@@ -95,35 +96,40 @@ export class DsIcon {
                 "optional": false,
                 "docs": {
                     "tags": [],
-                    "text": ""
+                    "text": "Color of the icon"
                 },
                 "getter": false,
                 "setter": false,
-                "attribute": "colour",
                 "reflect": false
             },
-            "size": {
+            "dsSize": {
                 "type": "string",
+                "attribute": "ds-size",
                 "mutable": false,
                 "complexType": {
-                    "original": "string",
-                    "resolved": "string",
-                    "references": {}
+                    "original": "Size",
+                    "resolved": "\"1.5rem\" | \"1rem\" | \"2rem\" | \"3rem\" | \"4rem\"",
+                    "references": {
+                        "Size": {
+                            "location": "global",
+                            "id": "global::Size"
+                        }
+                    }
                 },
                 "required": false,
                 "optional": false,
                 "docs": {
                     "tags": [],
-                    "text": ""
+                    "text": "Size of the icon"
                 },
                 "getter": false,
                 "setter": false,
-                "attribute": "size",
                 "reflect": false,
                 "defaultValue": "'1.5rem'"
             },
             "dsTitle": {
                 "type": "string",
+                "attribute": "ds-title",
                 "mutable": false,
                 "complexType": {
                     "original": "string",
@@ -134,16 +140,16 @@ export class DsIcon {
                 "optional": false,
                 "docs": {
                     "tags": [],
-                    "text": ""
+                    "text": "Tooltip of the icon"
                 },
                 "getter": false,
                 "setter": false,
-                "attribute": "title",
                 "reflect": false,
                 "defaultValue": "'Icon'"
             },
-            "role": {
+            "dsRole": {
                 "type": "string",
+                "attribute": "ds-role",
                 "mutable": false,
                 "complexType": {
                     "original": "string",
@@ -154,16 +160,16 @@ export class DsIcon {
                 "optional": false,
                 "docs": {
                     "tags": [],
-                    "text": ""
+                    "text": "Passed to the `role` attribute of the `svg` element"
                 },
                 "getter": false,
                 "setter": false,
-                "attribute": "role",
                 "reflect": false,
                 "defaultValue": "'img'"
             },
-            "hidden": {
+            "dsHidden": {
                 "type": "boolean",
+                "attribute": "ds-hidden",
                 "mutable": false,
                 "complexType": {
                     "original": "boolean",
@@ -174,11 +180,10 @@ export class DsIcon {
                 "optional": false,
                 "docs": {
                     "tags": [],
-                    "text": ""
+                    "text": "Passed to the `title` attribute of the `svg` element"
                 },
                 "getter": false,
                 "setter": false,
-                "attribute": "hidden",
                 "reflect": false,
                 "defaultValue": "true"
             }

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

@@ -4,62 +4,35 @@ const meta = {
     title: 'Base Components/Icon',
     component: 'ds-icon',
     argTypes: {
-        name: {
+        dsName: {
             options: icons.map(icon => icon.name),
             control: {
                 type: 'select',
             },
-            name: 'Icon',
         },
-        colour: {
+        dsColour: {
             options: getColourVariables('palette').map(colour => colour.name),
             control: {
                 type: 'select',
             },
-            name: 'Colour',
-        },
-        size: {
-            options: [1, 1.5, 2, 3, 4].map(size => `${size}rem`),
-            control: {
-                type: 'select',
-            },
-            name: 'Size',
-        },
-        dsTitle: {
-            control: {
-                type: 'text',
-            },
-            name: 'Title',
-        },
-        hidden: {
-            control: {
-                type: 'boolean',
-            },
-            name: 'Hidden (aria-hidden)',
-        },
-        role: {
-            control: {
-                type: 'text',
-            },
-            name: 'Role',
         },
     },
 };
 export default meta;
 export const Default = {};
 Default.args = {
-    name: 'archive',
-    role: 'img',
+    dsName: 'archive',
+    dsRole: 'img',
     dsTitle: 'Icon',
-    hidden: true,
+    dsHidden: true,
 };
 export const Playground = {
     args: {
-        name: 'archive',
-        colour: 'primary',
-        size: '1.5rem',
+        dsName: 'archive',
+        dsColour: 'primary',
+        dsSize: '1.5rem',
         dsTitle: 'Icon',
-        role: 'img',
-        hidden: true,
+        dsRole: 'img',
+        dsHidden: true,
     },
 };

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

@@ -13,10 +13,10 @@
   gap: var(--ds-spacing-2xSmall);
 }
 .ds-input-validity--error {
-  color: var(--ds-textColor-danger);
+  color: var(--ds-palette-red-70);
 }
 .ds-input-validity--success {
-  color: var(--ds-textColor-success);
+  color: var(--ds-palette-green-70);
 }
 .ds-input-validity ds-icon {
   display: block;