@uh-design-system/component-library 0.1.0 → 0.2.0-alpha.0

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

@@ -0,0 +1,79 @@
+import { icons } from "../../../00-foundations/icons/iconList";
+import { getAriaAttributeArgTypes } from "../../../../utils/attributes";
+/**
+ * Button aria-attributes
+ *
+ * @see {@link https://w3c.github.io/aria/#button}
+ */
+const buttonAriaAttributes = [
+    'aria-busy',
+    'aria-live',
+    'aria-atomic',
+    'aria-disabled',
+    'aria-expanded',
+    'aria-pressed',
+    'aria-hidden',
+    'aria-label',
+    'aria-labelledby',
+    'aria-controls',
+    'aria-haspopup',
+    'aria-describedby',
+    'aria-relevant',
+    'aria-details',
+];
+const buttonAriaAttributeArgTypes = getAriaAttributeArgTypes(buttonAriaAttributes);
+const meta = {
+    title: 'Base Components/Button',
+    component: 'ds-button',
+};
+export default meta;
+export const Default = {
+    args: {
+        value: 'button',
+        fontWeight: '700',
+        disabled: false,
+    },
+    argTypes: {
+        value: { control: 'text' },
+        disabled: { control: 'boolean' },
+        fontWeight: {
+            control: 'select',
+            options: [400, 600, 650, 700],
+        },
+    },
+};
+export const Playground = {
+    argTypes: Object.assign(Object.assign(Object.assign({}, Default.argTypes), { variant: {
+            options: ['primary', 'secondary', 'supplementary'],
+            control: {
+                type: 'radio',
+            },
+        }, colour: {
+            options: ['blue', 'black', 'white'],
+            control: {
+                type: 'radio',
+            },
+        }, size: {
+            options: ['medium', 'small'],
+            control: {
+                type: 'radio',
+            },
+        }, fontWeight: {
+            control: 'select',
+            options: [400, 600, 650, 700],
+        }, icon: {
+            control: 'select',
+            options: icons.map(icon => icon.name),
+        }, iconPosition: {
+            options: ['start', 'end'],
+            control: {
+                type: 'radio',
+            },
+        }, type: {
+            options: ['submit', 'reset', 'button'],
+            control: {
+                type: 'radio',
+            },
+        } }), buttonAriaAttributeArgTypes),
+    args: Object.assign(Object.assign({}, Default.args), { variant: 'primary', colour: 'blue', size: 'medium', disabled: false, ariaLabel: '', ariaLabelledby: '', icon: '', iconPosition: 'start' }),
+};

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

@@ -1,3 +1,3 @@
 :host {
-  display: block;
+  display: inline;
 }

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

@@ -4,7 +4,7 @@ export class DsIcon {
     constructor() {
         this.name = undefined;
         this.colour = undefined;
-        this.size = undefined;
+        this.size = '1.5rem';
         this.title = 'Icon';
         this.role = 'img';
         this.hidden = true;
@@ -31,8 +31,8 @@ export class DsIcon {
     }
     // get the colour of the icon
     getIconColour() {
-        const cssVariable = `--colour-${this.colour}`;
-        return getComputedStyle(document.documentElement).getPropertyValue(cssVariable) || this.colour;
+        const colour = this.colour ? `var(--${this.colour})` : 'currentColor';
+        return colour;
     }
     // set the attributes of the icon
     setIconAttributes(svgElement) {
@@ -52,7 +52,7 @@ export class DsIcon {
         }
     }
     render() {
-        return (h(Fragment, { key: '8a2414880389617aa1f009bc7972201ee877ab65' }, h("span", { key: 'e7441e46ef7473d1e7d1a40b70eacc843ee742ea', class: "icon-container", innerHTML: this.getIcon(), "aria-hidden": this.hidden ? 'true' : 'false' })));
+        return (h(Fragment, { key: '8d8a1304c6293c49ecc830ec02227dff9852b8c5' }, h("span", { key: '83f992b6b58f24398fa84e0fe62a62e60ea72e1b', class: "icon-container", innerHTML: this.getIcon(), "aria-hidden": this.hidden ? 'true' : 'false' })));
     }
     static get is() { return "ds-icon"; }
     static get encapsulation() { return "shadow"; }
@@ -82,6 +82,8 @@ export class DsIcon {
                     "tags": [],
                     "text": ""
                 },
+                "getter": false,
+                "setter": false,
                 "attribute": "name",
                 "reflect": false
             },
@@ -99,6 +101,8 @@ export class DsIcon {
                     "tags": [],
                     "text": ""
                 },
+                "getter": false,
+                "setter": false,
                 "attribute": "colour",
                 "reflect": false
             },
@@ -116,8 +120,11 @@ export class DsIcon {
                     "tags": [],
                     "text": ""
                 },
+                "getter": false,
+                "setter": false,
                 "attribute": "size",
-                "reflect": false
+                "reflect": false,
+                "defaultValue": "'1.5rem'"
             },
             "title": {
                 "type": "string",
@@ -133,6 +140,8 @@ export class DsIcon {
                     "tags": [],
                     "text": ""
                 },
+                "getter": false,
+                "setter": false,
                 "attribute": "title",
                 "reflect": false,
                 "defaultValue": "'Icon'"
@@ -151,6 +160,8 @@ export class DsIcon {
                     "tags": [],
                     "text": ""
                 },
+                "getter": false,
+                "setter": false,
                 "attribute": "role",
                 "reflect": false,
                 "defaultValue": "'img'"
@@ -169,6 +180,8 @@ export class DsIcon {
                     "tags": [],
                     "text": ""
                 },
+                "getter": false,
+                "setter": false,
                 "attribute": "hidden",
                 "reflect": false,
                 "defaultValue": "true"
@@ -181,4 +194,3 @@ export class DsIcon {
         };
     }
 }
-//# sourceMappingURL=ds-icon.js.map

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

@@ -12,7 +12,7 @@ const meta = {
             name: 'Icon',
         },
         colour: {
-            options: getColourVariables().map(colour => colour.name),
+            options: getColourVariables('palette').map(colour => colour.name),
             control: {
                 type: 'select',
             },
@@ -53,4 +53,3 @@ Default.args = {
     title: 'Icon',
     hidden: true,
 };
-//# sourceMappingURL=ds-icon.stories.js.map

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

@@ -0,0 +1,186 @@
+:root {
+  --ds-breakpoint-xSmall: 20rem;
+  --ds-breakpoint-small: 30rem;
+  --ds-breakpoint-medium: 60rem;
+  --ds-breakpoint-large: 75rem;
+  --ds-breakpoint-xLarge: 90rem;
+}
+
+:host {
+  display: block;
+  width: 288px;
+}
+@media (min-width: 75rem) {
+  :host {
+    width: 320px;
+  }
+}
+
+.label-container {
+  margin-block-end: var(--ds-spacing-2xSmall);
+}
+.label-container label {
+  font-family: var(--ds-fontFamily-body);
+  font-size: var(--ds-fontSize-16);
+  font-weight: var(--ds-fontWeight-semibold);
+  letter-spacing: var(--ds-letterSpacing-wide);
+  line-height: var(--ds-lineHeight-large);
+  color: var(--ds-textColor-default);
+}
+.label-container label.required::after {
+  content: " *";
+  color: var(--ds-textColor-secondary);
+}
+.label-container small {
+  font-family: var(--ds-fontFamily-body);
+  font-size: var(--ds-fontSize-14);
+  font-weight: var(--ds-fontWeight-regular);
+  letter-spacing: var(--ds-letterSpacing-wide);
+  line-height: var(--ds-lineHeight-large);
+  display: block;
+  margin-block-start: var(--ds-spacing-3xSmall);
+  color: var(--ds-textColor-secondary);
+}
+
+.input-container {
+  box-sizing: border-box;
+  width: 100%;
+  display: inline-flex;
+  position: relative;
+  align-items: center;
+  border-width: var(--ds-borderWidth-thin);
+  border-style: solid;
+  border-color: var(--ds-borderColor-default);
+  padding-inline: var(--ds-spacing-xSmall);
+}
+.input-container.invalid {
+  background-color: var(--ds-palette-danger-light);
+  border-color: var(--ds-borderColor-danger);
+}
+.input-container.valid {
+  background-color: var(--ds-palette-success-light);
+  border-color: var(--ds-borderColor-success);
+}
+.input-container.readonly, .input-container.disabled {
+  background-color: var(--ds-bgColor-disabled-onLight);
+  border-color: var(--ds-borderColor-disabled-onLight);
+}
+.input-container:has(input:active) {
+  outline: none;
+}
+.input-container:has(input:active):not:has(input:disabled, input:readonly) {
+  border-color: var(--ds-borderColor-primary);
+}
+.input-container.active:not(.input-container.disabled, .input-container.readonly) {
+  border-color: var(--ds-borderColor-primary);
+}
+.input-container:hover:not(.input-container.disabled, .input-container.readonly, .input-container.active) {
+  border-color: var(--ds-borderColor-black);
+}
+.input-container:focus-within {
+  outline-width: var(--ds-borderWidth-thin);
+  outline-offset: 1px;
+  outline-style: solid;
+  outline-color: var(--ds-palette-black);
+}
+.input-container:focus-within:not(.input-container:focus-within.invalid, .input-container:focus-within.valid, .input-container:focus-within.readonly) {
+  border-color: var(--ds-borderColor-primary);
+}
+.input-container:focus-within * > ds-button.suffix > button:focus-visible {
+  background-clip: padding-box;
+  outline-offset: -5px;
+  box-shadow: none;
+  height: var(--ds-spacing-xLarge);
+  background-color: var(--ds-bgColor-transparent-onLight-hover);
+}
+.input-container > input {
+  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);
+  width: 100%;
+  box-sizing: border-box;
+  background-color: unset;
+  flex-grow: 1;
+  height: var(--ds-spacing-xLarge);
+  line-height: var(--ds-fontSize-24);
+  color: var(--ds-textColor-default);
+  padding-block: var(--ds-spacing-4xSmall);
+  border: none;
+}
+.input-container > input:disabled {
+  color: var(--ds-textColor-disabled-onLight);
+}
+.input-container > input:disabled::placeholder {
+  color: var(--ds-textColor-disabled-onLight);
+}
+.input-container > input::placeholder {
+  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);
+  color: var(--ds-textColor-secondary);
+}
+.input-container > input:focus {
+  outline: none;
+  border: none;
+}
+.input-container > input[type=number] {
+  -moz-appearance: textfield;
+}
+.input-container > input::-webkit-search-decoration, .input-container > input::-webkit-search-cancel-button, .input-container > input::-webkit-search-results-button, .input-container > input::-webkit-search-results-decoration, .input-container > input::-webkit-inner-spin-button, .input-container > input::-webkit-outer-spin-button {
+  -webkit-appearance: none;
+  margin: 0;
+}
+.input-container:has(span.prefix, ds-icon.prefix) {
+  padding-inline-start: var(--ds-spacing-2xSmall);
+}
+.input-container:has(span.prefix, ds-icon.prefix) > input {
+  padding-inline-start: var(--ds-spacing-2xSmall);
+}
+.input-container:has(ds-button.suffix) {
+  padding-inline-end: unset;
+}
+.input-container span.prefix, .input-container span.suffix {
+  color: var(--ds-palette-black-70);
+}
+.input-container ds-icon.prefix, .input-container ::slotted([slot=prefix]) {
+  height: 1.5rem;
+  color: var(--ds-textColor-default);
+}
+.input-container ds-button.suffix {
+  margin-top: calc(var(--ds-spacing-3xSmall) * -1);
+  margin-right: calc(var(--ds-spacing-4xSmall) * -1);
+  max-height: 40px;
+}
+
+.error-text-container,
+.success-text-container {
+  display: flex;
+  align-items: center;
+  margin-top: var(--ds-spacing-2xSmall);
+  gap: var(--ds-spacing-2xSmall);
+}
+.error-text-container ds-icon,
+.success-text-container ds-icon {
+  display: block;
+  height: 1.5rem;
+}
+.error-text-container small,
+.success-text-container 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);
+}
+
+.error-text-container {
+  color: var(--ds-textColor-danger);
+}
+
+.success-text-container {
+  color: var(--ds-textColor-success);
+}

package/dist/collection/components/01-base-components/ds-text-input/ds-text-input.examples.stories.js

@@ -0,0 +1,24 @@
+import { html } from "lit";
+const meta = {
+    title: 'Base Components/TextInput/Examples',
+    component: 'ds-text-input',
+};
+export default meta;
+export const CustomWidth = {
+    render: () => html `<div>
+    <ds-text-input label='Smaller input' style='width: 150px; margin-bottom: 1rem'></ds-text-input>
+    <ds-text-input label='Full width input' style='width: 100%'></ds-text-input>
+  </div>`,
+};
+export const UsingSlots = {
+    render: () => html `
+    <ds-text-input aria-label='Slotted label'>
+      <label id='label' slot='label'><b>Slotted label</b></label>
+      <p slot='help-text'>Lorem ipsum</p>
+      <ds-icon name='archive' slot='prefix'></ds-icon>
+      <small slot='suffix' style='margin-right: var(--spacing-2xSmall)'>Suffix</small>
+      <div slot='error-text'>Error text slot</div>
+      <div slot='success-text'>Success text slot</div>
+    </ds-text-input>
+  `,
+};

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

@@ -0,0 +1,126 @@
+import { getDsElem } from "../../../utils/tests/testUtils";
+import { expect, userEvent, waitFor } from "@storybook/test";
+const meta = {
+    title: 'Base Components/TextInput/Features',
+    component: 'ds-text-input',
+};
+export default meta;
+export const WithPlaceholder = {};
+WithPlaceholder.args = {
+    label: 'Label',
+    placeholder: 'Placeholder',
+};
+export const WithAssistiveText = {};
+WithAssistiveText.args = {
+    label: 'Label',
+    assistiveText: 'Assistive text',
+};
+export const Disabled = {};
+Disabled.args = {
+    label: 'Label',
+    disabled: true,
+};
+export const ReadOnly = {};
+ReadOnly.args = {
+    label: 'Label',
+    value: 'Input text',
+    readonly: true,
+};
+export const Required = {};
+Required.args = {
+    label: 'Label',
+    required: true,
+};
+export const Valid = {};
+Valid.args = {
+    label: 'Label',
+    valid: true,
+    successText: 'Success text',
+};
+export const Invalid = {};
+Invalid.args = {
+    label: 'Label',
+    invalid: true,
+    errorText: 'Error text',
+};
+export const WithIcon = {
+    args: {
+        label: 'Search',
+        icon: 'info',
+        helpText: 'Assistive text',
+        type: 'email',
+    },
+};
+export const PasswordInput = {
+    args: {
+        label: 'Label',
+        type: 'password',
+        actionButtonAriaLabel: 'Action button',
+    },
+    play: async ({ canvasElement, step }) => {
+        const dsElem = await getDsElem(canvasElement, 'ds-text-input');
+        const inputElem = dsElem.querySelector('input');
+        const suffixButton = dsElem.querySelector('ds-button.suffix');
+        await step('Input type should be password', () => {
+            expect(inputElem.type).toBe('password');
+        });
+        await step('Has suffix button', async () => {
+            expect(suffixButton).toBeInTheDocument();
+        });
+        await step('Clicking suffix button should set input type to text', async () => {
+            userEvent.click(suffixButton);
+            await waitFor(() => {
+                expect(inputElem.type).toBe('text');
+            });
+        });
+        await step('Clicking suffix button again should set input type to password', async () => {
+            userEvent.click(suffixButton);
+            await waitFor(() => {
+                expect(inputElem.type).toBe('password');
+            });
+        });
+    },
+};
+export const SearchInput = {
+    args: {
+        label: 'Label',
+        type: 'search',
+        actionButtonAriaLabel: 'Action button',
+    },
+    play: async ({ canvasElement, step }) => {
+        const dsElem = await getDsElem(canvasElement, 'ds-text-input');
+        await step('Has prefix icon', async () => {
+            const prefixIcon = dsElem.querySelector('ds-icon.prefix');
+            expect(prefixIcon).toBeInTheDocument();
+        });
+        await step('Enter search', async () => {
+            await userEvent.type(dsElem.querySelector('input'), 'search');
+        });
+        const clearBtn = dsElem.querySelector('ds-button.suffix');
+        await step('Clear button is visible', async () => {
+            expect(clearBtn).toBeDefined();
+        });
+        await step('Clicking clear button should clear the input', async () => {
+            userEvent.click(clearBtn);
+            await waitFor(() => {
+                expect(document.querySelector('ds-button')).toBeNull();
+            });
+        });
+    },
+};
+export const PrefixText = {
+    args: {
+        label: 'Phone number',
+        prefixText: '+358',
+        type: 'tel',
+        hiddenAssistiveText: 'Without the country code',
+    },
+};
+export const SuffixText = {
+    args: {
+        label: 'Timeout',
+        suffixText: 'minutes',
+        type: 'number',
+        hiddenAssistiveText: 'Enter the number of minutes',
+    },
+};