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

package/dist/types/components.d.ts

@@ -5,11 +5,9 @@
  * It contains typing information for all components that exist in this project.
  */
 import { HTMLStencilElement, JSXBase } from "./stencil-public-runtime";
-import { DsCheckboxInputEvent } from "./components/01-base-components/ds-checkbox/ds-checkbox";
 import { DsCheckboxGroupChangeEvent, DsCheckboxGroupIndeterminateChildChangeEvent } from "./components/01-base-components/ds-checkbox-group/ds-checkbox-group";
 import { DsTextInputType } from "./components/01-base-components/ds-text-input/utils";
 import { DsTextInputClearEvent } from "./components/01-base-components/ds-text-input/ds-text-input";
-export { DsCheckboxInputEvent } from "./components/01-base-components/ds-checkbox/ds-checkbox";
 export { DsCheckboxGroupChangeEvent, DsCheckboxGroupIndeterminateChildChangeEvent } from "./components/01-base-components/ds-checkbox-group/ds-checkbox-group";
 export { DsTextInputType } from "./components/01-base-components/ds-text-input/utils";
 export { DsTextInputClearEvent } from "./components/01-base-components/ds-text-input/ds-text-input";
@@ -32,8 +30,11 @@ export namespace Components {
         "fullWidth": boolean;
         "icon": string;
         "iconPosition": 'start' | 'end';
+        "isLoading": boolean;
         "size": 'small' | 'medium';
+        "spinnerHiddenText": string;
         "type": 'button' | 'submit' | 'reset';
+        "useSpinner": boolean;
         /**
           * Button text content.  Uses a text prop instead of `<slot />` to avoid triggering another render to set correct CSS classes just after initial load.
           * @example <ds-button value="button"></ds-button> // Do this <ds-button>button</ds-button> // Instead of this
@@ -108,6 +109,40 @@ export namespace Components {
         "target"?: LinkTarget;
         "text"?: string;
     }
+    interface DsRadioButton {
+        "assistiveText"?: string;
+        "checked": boolean;
+        "disabled": boolean;
+        "errorText": string;
+        "errorsDisabled": boolean;
+        "identifier"?: string;
+        "legend"?: string;
+        "optional": boolean;
+        "optionalText"?: string;
+        "required": boolean;
+        "setChecked": () => Promise<void>;
+        "setFocus": () => Promise<void>;
+        "setFocusable": (flag: boolean) => Promise<void>;
+        "text"?: string;
+        "value"?: string;
+    }
+    interface DsRadioButtonGroup {
+        "assistiveText"?: string;
+        "direction": 'horizontal' | 'vertical';
+        "errorText": string;
+        "getValue": () => Promise<string>;
+        "initialValue"?: string;
+        "legend"?: string;
+    }
+    interface DsSpinner {
+        "hiddenAssistiveText": string;
+        "size": SpinnerSize;
+        "spinnerColor": SpinnerColor;
+        "spinnerTextPosition": SpinnerTextPosition;
+        "text": string;
+        "useAriaLive": boolean;
+        "useRoleAlert": boolean;
+    }
     interface DsTextInput {
         "actionButtonAriaLabel"?: string;
         "ariaDescribedby"?: string;
@@ -142,14 +177,18 @@ export namespace Components {
     interface DsVisuallyHidden {
     }
 }
-export interface DsCheckboxCustomEvent<T> extends CustomEvent<T> {
-    detail: T;
-    target: HTMLDsCheckboxElement;
-}
 export interface DsCheckboxGroupCustomEvent<T> extends CustomEvent<T> {
     detail: T;
     target: HTMLDsCheckboxGroupElement;
 }
+export interface DsRadioButtonCustomEvent<T> extends CustomEvent<T> {
+    detail: T;
+    target: HTMLDsRadioButtonElement;
+}
+export interface DsRadioButtonGroupCustomEvent<T> extends CustomEvent<T> {
+    detail: T;
+    target: HTMLDsRadioButtonGroupElement;
+}
 export interface DsTextInputCustomEvent<T> extends CustomEvent<T> {
     detail: T;
     target: HTMLDsTextInputElement;
@@ -167,18 +206,7 @@ declare global {
         prototype: HTMLDsButtonElement;
         new (): HTMLDsButtonElement;
     };
-    interface HTMLDsCheckboxElementEventMap {
-        "dsCheckboxInput": DsCheckboxInputEvent;
-    }
     interface HTMLDsCheckboxElement extends Components.DsCheckbox, HTMLStencilElement {
-        addEventListener<K extends keyof HTMLDsCheckboxElementEventMap>(type: K, listener: (this: HTMLDsCheckboxElement, ev: DsCheckboxCustomEvent<HTMLDsCheckboxElementEventMap[K]>) => any, options?: boolean | AddEventListenerOptions): void;
-        addEventListener<K extends keyof DocumentEventMap>(type: K, listener: (this: Document, ev: DocumentEventMap[K]) => any, options?: boolean | AddEventListenerOptions): void;
-        addEventListener<K extends keyof HTMLElementEventMap>(type: K, listener: (this: HTMLElement, ev: HTMLElementEventMap[K]) => any, options?: boolean | AddEventListenerOptions): void;
-        addEventListener(type: string, listener: EventListenerOrEventListenerObject, options?: boolean | AddEventListenerOptions): void;
-        removeEventListener<K extends keyof HTMLDsCheckboxElementEventMap>(type: K, listener: (this: HTMLDsCheckboxElement, ev: DsCheckboxCustomEvent<HTMLDsCheckboxElementEventMap[K]>) => any, options?: boolean | EventListenerOptions): void;
-        removeEventListener<K extends keyof DocumentEventMap>(type: K, listener: (this: Document, ev: DocumentEventMap[K]) => any, options?: boolean | EventListenerOptions): void;
-        removeEventListener<K extends keyof HTMLElementEventMap>(type: K, listener: (this: HTMLElement, ev: HTMLElementEventMap[K]) => any, options?: boolean | EventListenerOptions): void;
-        removeEventListener(type: string, listener: EventListenerOrEventListenerObject, options?: boolean | EventListenerOptions): void;
     }
     var HTMLDsCheckboxElement: {
         prototype: HTMLDsCheckboxElement;
@@ -187,6 +215,7 @@ declare global {
     interface HTMLDsCheckboxGroupElementEventMap {
         "dsCheckboxGroupChange": DsCheckboxGroupChangeEvent;
         "dsCheckboxGroupIndeterminateChildChange": DsCheckboxGroupIndeterminateChildChangeEvent;
+        "dsCheckboxGroupInvalidStateChange": boolean;
     }
     interface HTMLDsCheckboxGroupElement extends Components.DsCheckboxGroup, HTMLStencilElement {
         addEventListener<K extends keyof HTMLDsCheckboxGroupElementEventMap>(type: K, listener: (this: HTMLDsCheckboxGroupElement, ev: DsCheckboxGroupCustomEvent<HTMLDsCheckboxGroupElementEventMap[K]>) => any, options?: boolean | AddEventListenerOptions): void;
@@ -226,6 +255,47 @@ declare global {
         prototype: HTMLDsLinkWithArrowElement;
         new (): HTMLDsLinkWithArrowElement;
     };
+    interface HTMLDsRadioButtonElementEventMap {
+        "dsRadioButtonChecked": any;
+    }
+    interface HTMLDsRadioButtonElement extends Components.DsRadioButton, HTMLStencilElement {
+        addEventListener<K extends keyof HTMLDsRadioButtonElementEventMap>(type: K, listener: (this: HTMLDsRadioButtonElement, ev: DsRadioButtonCustomEvent<HTMLDsRadioButtonElementEventMap[K]>) => any, options?: boolean | AddEventListenerOptions): void;
+        addEventListener<K extends keyof DocumentEventMap>(type: K, listener: (this: Document, ev: DocumentEventMap[K]) => any, options?: boolean | AddEventListenerOptions): void;
+        addEventListener<K extends keyof HTMLElementEventMap>(type: K, listener: (this: HTMLElement, ev: HTMLElementEventMap[K]) => any, options?: boolean | AddEventListenerOptions): void;
+        addEventListener(type: string, listener: EventListenerOrEventListenerObject, options?: boolean | AddEventListenerOptions): void;
+        removeEventListener<K extends keyof HTMLDsRadioButtonElementEventMap>(type: K, listener: (this: HTMLDsRadioButtonElement, ev: DsRadioButtonCustomEvent<HTMLDsRadioButtonElementEventMap[K]>) => any, options?: boolean | EventListenerOptions): void;
+        removeEventListener<K extends keyof DocumentEventMap>(type: K, listener: (this: Document, ev: DocumentEventMap[K]) => any, options?: boolean | EventListenerOptions): void;
+        removeEventListener<K extends keyof HTMLElementEventMap>(type: K, listener: (this: HTMLElement, ev: HTMLElementEventMap[K]) => any, options?: boolean | EventListenerOptions): void;
+        removeEventListener(type: string, listener: EventListenerOrEventListenerObject, options?: boolean | EventListenerOptions): void;
+    }
+    var HTMLDsRadioButtonElement: {
+        prototype: HTMLDsRadioButtonElement;
+        new (): HTMLDsRadioButtonElement;
+    };
+    interface HTMLDsRadioButtonGroupElementEventMap {
+        "dsRadioGroupValueChange": string | undefined;
+        "dsRadioGroupInvalidStateChange": boolean;
+    }
+    interface HTMLDsRadioButtonGroupElement extends Components.DsRadioButtonGroup, HTMLStencilElement {
+        addEventListener<K extends keyof HTMLDsRadioButtonGroupElementEventMap>(type: K, listener: (this: HTMLDsRadioButtonGroupElement, ev: DsRadioButtonGroupCustomEvent<HTMLDsRadioButtonGroupElementEventMap[K]>) => any, options?: boolean | AddEventListenerOptions): void;
+        addEventListener<K extends keyof DocumentEventMap>(type: K, listener: (this: Document, ev: DocumentEventMap[K]) => any, options?: boolean | AddEventListenerOptions): void;
+        addEventListener<K extends keyof HTMLElementEventMap>(type: K, listener: (this: HTMLElement, ev: HTMLElementEventMap[K]) => any, options?: boolean | AddEventListenerOptions): void;
+        addEventListener(type: string, listener: EventListenerOrEventListenerObject, options?: boolean | AddEventListenerOptions): void;
+        removeEventListener<K extends keyof HTMLDsRadioButtonGroupElementEventMap>(type: K, listener: (this: HTMLDsRadioButtonGroupElement, ev: DsRadioButtonGroupCustomEvent<HTMLDsRadioButtonGroupElementEventMap[K]>) => any, options?: boolean | EventListenerOptions): void;
+        removeEventListener<K extends keyof DocumentEventMap>(type: K, listener: (this: Document, ev: DocumentEventMap[K]) => any, options?: boolean | EventListenerOptions): void;
+        removeEventListener<K extends keyof HTMLElementEventMap>(type: K, listener: (this: HTMLElement, ev: HTMLElementEventMap[K]) => any, options?: boolean | EventListenerOptions): void;
+        removeEventListener(type: string, listener: EventListenerOrEventListenerObject, options?: boolean | EventListenerOptions): void;
+    }
+    var HTMLDsRadioButtonGroupElement: {
+        prototype: HTMLDsRadioButtonGroupElement;
+        new (): HTMLDsRadioButtonGroupElement;
+    };
+    interface HTMLDsSpinnerElement extends Components.DsSpinner, HTMLStencilElement {
+    }
+    var HTMLDsSpinnerElement: {
+        prototype: HTMLDsSpinnerElement;
+        new (): HTMLDsSpinnerElement;
+    };
     interface HTMLDsTextInputElementEventMap {
         "clear": DsTextInputClearEvent;
     }
@@ -258,6 +328,9 @@ declare global {
         "ds-input-validity": HTMLDsInputValidityElement;
         "ds-link": HTMLDsLinkElement;
         "ds-link-with-arrow": HTMLDsLinkWithArrowElement;
+        "ds-radio-button": HTMLDsRadioButtonElement;
+        "ds-radio-button-group": HTMLDsRadioButtonGroupElement;
+        "ds-spinner": HTMLDsSpinnerElement;
         "ds-text-input": HTMLDsTextInputElement;
         "ds-visually-hidden": HTMLDsVisuallyHiddenElement;
     }
@@ -281,8 +354,11 @@ declare namespace LocalJSX {
         "fullWidth"?: boolean;
         "icon"?: string;
         "iconPosition"?: 'start' | 'end';
+        "isLoading"?: boolean;
         "size"?: 'small' | 'medium';
+        "spinnerHiddenText"?: string;
         "type"?: 'button' | 'submit' | 'reset';
+        "useSpinner"?: boolean;
         /**
           * Button text content.  Uses a text prop instead of `<slot />` to avoid triggering another render to set correct CSS classes just after initial load.
           * @example <ds-button value="button"></ds-button> // Do this <ds-button>button</ds-button> // Instead of this
@@ -302,7 +378,6 @@ declare namespace LocalJSX {
         "identifier"?: string;
         "indeterminate"?: boolean;
         "legend"?: string;
-        "onDsCheckboxInput"?: (event: DsCheckboxCustomEvent<DsCheckboxInputEvent>) => void;
         "optional"?: boolean;
         "optionalText"?: string;
         "required"?: boolean;
@@ -317,6 +392,7 @@ declare namespace LocalJSX {
         "legend"?: string;
         "onDsCheckboxGroupChange"?: (event: DsCheckboxGroupCustomEvent<DsCheckboxGroupChangeEvent>) => void;
         "onDsCheckboxGroupIndeterminateChildChange"?: (event: DsCheckboxGroupCustomEvent<DsCheckboxGroupIndeterminateChildChangeEvent>) => void;
+        "onDsCheckboxGroupInvalidStateChange"?: (event: DsCheckboxGroupCustomEvent<boolean>) => void;
         "text"?: string;
     }
     interface DsIcon {
@@ -355,6 +431,39 @@ declare namespace LocalJSX {
         "target"?: LinkTarget;
         "text"?: string;
     }
+    interface DsRadioButton {
+        "assistiveText"?: string;
+        "checked"?: boolean;
+        "disabled"?: boolean;
+        "errorText"?: string;
+        "errorsDisabled"?: boolean;
+        "identifier"?: string;
+        "legend"?: string;
+        "onDsRadioButtonChecked"?: (event: DsRadioButtonCustomEvent<any>) => void;
+        "optional"?: boolean;
+        "optionalText"?: string;
+        "required"?: boolean;
+        "text"?: string;
+        "value"?: string;
+    }
+    interface DsRadioButtonGroup {
+        "assistiveText"?: string;
+        "direction"?: 'horizontal' | 'vertical';
+        "errorText"?: string;
+        "initialValue"?: string;
+        "legend"?: string;
+        "onDsRadioGroupInvalidStateChange"?: (event: DsRadioButtonGroupCustomEvent<boolean>) => void;
+        "onDsRadioGroupValueChange"?: (event: DsRadioButtonGroupCustomEvent<string | undefined>) => void;
+    }
+    interface DsSpinner {
+        "hiddenAssistiveText"?: string;
+        "size"?: SpinnerSize;
+        "spinnerColor"?: SpinnerColor;
+        "spinnerTextPosition"?: SpinnerTextPosition;
+        "text"?: string;
+        "useAriaLive"?: boolean;
+        "useRoleAlert"?: boolean;
+    }
     interface DsTextInput {
         "actionButtonAriaLabel"?: string;
         "ariaDescribedby"?: string;
@@ -396,6 +505,9 @@ declare namespace LocalJSX {
         "ds-input-validity": DsInputValidity;
         "ds-link": DsLink;
         "ds-link-with-arrow": DsLinkWithArrow;
+        "ds-radio-button": DsRadioButton;
+        "ds-radio-button-group": DsRadioButtonGroup;
+        "ds-spinner": DsSpinner;
         "ds-text-input": DsTextInput;
         "ds-visually-hidden": DsVisuallyHidden;
     }
@@ -412,6 +524,9 @@ declare module "@stencil/core" {
             "ds-input-validity": LocalJSX.DsInputValidity & JSXBase.HTMLAttributes<HTMLDsInputValidityElement>;
             "ds-link": LocalJSX.DsLink & JSXBase.HTMLAttributes<HTMLDsLinkElement>;
             "ds-link-with-arrow": LocalJSX.DsLinkWithArrow & JSXBase.HTMLAttributes<HTMLDsLinkWithArrowElement>;
+            "ds-radio-button": LocalJSX.DsRadioButton & JSXBase.HTMLAttributes<HTMLDsRadioButtonElement>;
+            "ds-radio-button-group": LocalJSX.DsRadioButtonGroup & JSXBase.HTMLAttributes<HTMLDsRadioButtonGroupElement>;
+            "ds-spinner": LocalJSX.DsSpinner & JSXBase.HTMLAttributes<HTMLDsSpinnerElement>;
             "ds-text-input": LocalJSX.DsTextInput & JSXBase.HTMLAttributes<HTMLDsTextInputElement>;
             "ds-visually-hidden": LocalJSX.DsVisuallyHidden & JSXBase.HTMLAttributes<HTMLDsVisuallyHiddenElement>;
         }

package/dist/types/utils/button/buttonUtils.d.ts

@@ -0,0 +1 @@
+export declare function handleButtonLoading(buttonElement: HTMLElement, originalValue: string, loadValue: string, loadingDuration?: number): void;

package/dist/types/utils/colours/colourTypes.d.ts

@@ -12,7 +12,7 @@ export declare const opaque: {
     '--ds-overlay-white': string;
 };
 export declare const semantic: {
-    '--ds-textColor': string;
-    '--ds-bgColor': string;
-    '--ds-borderColor': string;
+    $dsTextColor: string;
+    $dsBgColor: string;
+    $dsBorderColor: string;
 };

package/dist/types/utils/spinner/spinnerUtils.d.ts

@@ -0,0 +1 @@
+export declare function toggleSpinnerLoad(buttonElement: HTMLElement, spinnerElement: HTMLElement, results: HTMLElement, buttonOriginalValue: string, loadValue: string, loadingDuration?: number): void;

package/dist/types/utils/tests/testUtils.d.ts

@@ -100,3 +100,4 @@ export declare const withinShadowRoot: (customElem: HTMLElement, selector: strin
 export declare const getShadowRoot: (customElem: HTMLElement, selector: string) => Promise<ShadowRoot>;
 export declare const getDsElem: (customElem: HTMLElement, selector: string) => Promise<Element>;
 export declare const addMockEventListener: (container: HTMLElement, selector: string, eventName: string) => import("@vitest/spy").Mock<(...args: any[]) => any>;
+export declare const sleep: (ms: number) => Promise<unknown>;

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@uh-design-system/component-library",
-  "version": "0.5.2",
+  "version": "0.5.3",
   "publishConfig": {
     "access": "public"
   },
@@ -38,19 +38,19 @@
     "dist/"
   ],
   "scripts": {
-    "build": "stencil build",
-    "build.watch": "stencil build --watch",
-    "develop": "run-p build.watch storybook",
-    "start": "stencil build --dev --watch --serve",
-    "test-storybook": "test-storybook",
-    "test-storybook:update": "rm -rf __snapshots__ && test-storybook -u",
-    "test:unit": "stencil test --spec",
-    "test": "stencil test --spec --e2e",
-    "test.watch": "stencil test --spec --e2e --watchAll",
-    "generate": "stencil generate",
-    "storybook": "storybook dev -p 6006",
-    "build-storybook-static": "storybook build",
-    "build-storybook": "run-s build build-storybook-static"
+    "build": "run-s stencil.build storybook.build styles.build",
+    "develop": "run-p stencil.build:watch storybook.dev",
+    "lint": "eslint --ext .ts,.tsx,.js,.jsx ./src",
+    "stencil.build": "stencil build",
+    "stencil.build:watch": "stencil build --watch",
+    "stencil.test": "stencil test --spec",
+    "stencil.test:watch": "stencil test --spec --watchAll",
+    "stencil.generate": "stencil generate",
+    "storybook.dev": "storybook dev -p 6006",
+    "storybook.build": "storybook build",
+    "storybook.test": "test-storybook",
+    "storybook.test:update": "rm -rf __snapshots__ && storybook.test -- -u",
+    "styles.build": "sass src/styles/helpers.scss dist/styles/helpers.css && sass src/styles/variables.scss dist/styles/variables.css"
   },
   "devDependencies": {
     "@chromatic-com/storybook": "^3.2.5",
@@ -95,5 +95,5 @@
     "glob": "^9.0.0"
   },
   "license": "MIT",
-  "gitHead": "eed49403d98c03e19f57b8b391c9c9057d03b7c0"
+  "gitHead": "0df2c5c875523a507d6fd42dec1948594671d16c"
 }

package/dist/cjs/ds-visually-hidden.cjs.entry.js

@@ -1,20 +0,0 @@
-'use strict';
-
-Object.defineProperty(exports, '__esModule', { value: true });
-
-const index = require('./index-bf84b124.js');
-
-const dsVisuallyHiddenCss = ".ds-visually-hidden{clip:rect(0 0 0 0);clip-path:inset(50%);height:1px;overflow:hidden;position:absolute;white-space:nowrap;width:1px}";
-const DsVisuallyHiddenStyle0 = dsVisuallyHiddenCss;
-
-const DsVisuallyHidden = class {
-    constructor(hostRef) {
-        index.registerInstance(this, hostRef);
-    }
-    render() {
-        return (index.h("div", { key: 'f488f0f134c76c308763d47c57360e54ae299a06', class: "ds-visually-hidden" }, index.h("slot", { key: '20d5cdef8c333e5421c670e2558b511b1f235e7f' })));
-    }
-};
-DsVisuallyHidden.style = DsVisuallyHiddenStyle0;
-
-exports.ds_visually_hidden = DsVisuallyHidden;

package/dist/component-library/controlUtils-9ca4087b.js

@@ -1 +0,0 @@
-const o=(o,a)=>[o,Boolean(a)?a:"(optional)"].join(" "),a=o=>[o,"*"].join(" ");export{o as a,a as g}