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

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

@@ -1,4 +1,4 @@
-import { h } from "@stencil/core";
+import { Fragment, h } from "@stencil/core";
 import classNames from "classnames";
 import { inheritAriaAttributes, inheritSpecifiedAttributes, inheritAttributes } from "../../../utils/attributes/attributes";
 export class DsButton {
@@ -6,18 +6,26 @@ export class DsButton {
     buttonEl;
     pressedKeys = new Set();
     el;
-    value = '';
-    variant = 'primary';
-    colour = 'blue';
-    size = 'medium';
-    fontWeight = 'normal';
-    icon = '';
-    iconPosition = 'start';
-    type = 'button';
-    disabled = false;
-    fullWidth = false;
-    ariaDisabled = 'false';
+    dsValue = '';
+    dsVariant = 'primary';
+    dsColour = 'blue';
+    dsSize = 'medium';
+    dsIcon = '';
+    dsIconPosition = 'start';
+    dsType = 'button';
+    dsDisabled = false;
+    dsIsLoading = false;
+    dsUseSpinner = false;
+    dsSpinnerHiddenText;
+    dsFullWidth = false;
+    dsAriaDisabled = 'false';
+    async dsFocus() {
+        this.buttonEl.focus();
+    }
     componentWillLoad() {
+        if (this.dsUseSpinner && !this.dsSpinnerHiddenText) {
+            throw new Error('dsSpinnerHiddenText is required when dsUseSpinner is true.');
+        }
         this.inheritedAttributes = {
             ...inheritAriaAttributes(this.el, ['aria-disabled']),
             ...inheritSpecifiedAttributes(this.el, [
@@ -43,7 +51,7 @@ export class DsButton {
             case 'Enter':
             case ' ':
                 this.pressedKeys.add(event.key);
-                this.buttonEl.classList.add(`${this.colour}--active`);
+                this.buttonEl.classList.add(`${this.dsColour}--active`);
                 break;
         }
     };
@@ -53,20 +61,37 @@ export class DsButton {
             case ' ':
                 this.pressedKeys.delete(event.key);
                 if (this.pressedKeys.size === 0) {
-                    this.buttonEl.classList.remove(`${this.colour}--active`);
+                    this.buttonEl.classList.remove(`${this.dsColour}--active`);
                 }
                 break;
         }
     };
-    render() {
-        const classes = classNames(`ds-button ${this.variant} ${this.colour} ${this.size}`, {
-            'icon-start': this.icon && this.iconPosition === 'start' && this.value,
-            'icon-end': this.icon && this.iconPosition === 'end' && this.value,
-            'icon-only': this.icon && !this.value,
+    getSpinnerColour = () => {
+        if (this.dsVariant === 'primary') {
+            if (this.dsColour === 'blue')
+                return 'white';
+            if (this.dsColour === 'white')
+                return 'black';
+            if (this.dsColour === 'black')
+                return 'white';
+        }
+        return this.dsColour;
+    };
+    renderButton = () => {
+        const classes = classNames(`ds-button ${this.dsVariant} ${this.dsColour} ${this.dsSize}`, {
+            'icon-start': this.dsIcon && this.dsIconPosition === 'start' && this.dsValue,
+            'icon-end': this.dsIcon && this.dsIconPosition === 'end' && this.dsValue,
+            'icon-only': this.dsIcon && !this.dsValue,
         });
-        const iconSize = this.size === 'small' ? '1rem' : undefined;
-        const isDisabled = this.disabled || this.ariaDisabled === 'true';
-        return (h("button", { key: 'a88d1c763917de40eeaefc79cadace3a107a761e', ref: el => (this.buttonEl = el), onKeyDown: this.handleKeyDown, onKeyUp: this.handleKeyUp, class: classes, style: { fontWeight: this.fontWeight }, type: this.type, "aria-disabled": isDisabled ? 'true' : 'false', ...this.inheritedAttributes }, h("slot", { key: '5a576ddabcd8be9957832560a1503ffc9b0a4b4c', name: "prefix" }, this.icon && this.iconPosition === 'start' && h("ds-icon", { key: '44506977ee4a8e0d2044efa9c4e66f52e901c98c', name: this.icon, size: iconSize })), this.value && h("span", { key: '0a2a0ff071b51cfb9df7f4bc27b1ea6469f3a47e', class: "button-value" }, this.value), h("slot", { key: '757002ca6ed2f98f692b8f5b630ecfd0f6e83f5c', name: "suffix" }, this.icon && this.iconPosition === 'end' && h("ds-icon", { key: '2605d1808580c30f68717660a516d07fe8fcfc59', name: this.icon, size: iconSize }))));
+        const iconSize = this.dsSize === 'small' ? '1rem' : undefined;
+        return (h("button", { ref: el => (this.buttonEl = el), onKeyDown: this.handleKeyDown, onKeyUp: this.handleKeyUp, class: classes, type: this.dsType, "aria-disabled": this.dsAriaDisabled == 'true' ? 'true' : 'false', disabled: this.dsDisabled, ...this.inheritedAttributes }, this.dsIsLoading ? (h(Fragment, null, h("ds-spinner", { dsHiddenAssistiveText: this.dsSpinnerHiddenText, dsSpinnerColor: this.getSpinnerColour(), dsSize: this.dsSize == 'small' ? 'small' : 'medium' }), this.dsValue && h("span", { class: "button-value" }, this.dsValue))) : (h(Fragment, null, h("slot", { name: "prefix" }, this.dsIcon && this.dsIconPosition === 'start' && h("ds-icon", { dsName: this.dsIcon, dsSize: iconSize })), this.dsValue && h("span", { class: "button-value" }, this.dsValue), h("slot", { name: "suffix" }, this.dsIcon && this.dsIconPosition === 'end' && h("ds-icon", { dsName: this.dsIcon, dsSize: iconSize }))))));
+    };
+    render() {
+        const buttonElement = this.renderButton();
+        return (this.dsUseSpinner ?
+            h("div", { "aria-live": "polite" }, buttonElement)
+            :
+                buttonElement);
     }
     static get is() { return "ds-button"; }
     static get encapsulation() { return "scoped"; }
@@ -82,8 +107,9 @@ export class DsButton {
     }
     static get properties() {
         return {
-            "value": {
+            "dsValue": {
                 "type": "string",
+                "attribute": "ds-value",
                 "mutable": false,
                 "complexType": {
                     "original": "string",
@@ -107,12 +133,12 @@ export class DsButton {
                 },
                 "getter": false,
                 "setter": false,
-                "attribute": "value",
                 "reflect": false,
                 "defaultValue": "''"
             },
-            "variant": {
+            "dsVariant": {
                 "type": "string",
+                "attribute": "ds-variant",
                 "mutable": false,
                 "complexType": {
                     "original": "'primary' | 'secondary' | 'supplementary'",
@@ -123,16 +149,16 @@ export class DsButton {
                 "optional": false,
                 "docs": {
                     "tags": [],
-                    "text": ""
+                    "text": "Variant of the button"
                 },
                 "getter": false,
                 "setter": false,
-                "attribute": "variant",
                 "reflect": false,
                 "defaultValue": "'primary'"
             },
-            "colour": {
+            "dsColour": {
                 "type": "string",
+                "attribute": "ds-colour",
                 "mutable": false,
                 "complexType": {
                     "original": "'blue' | 'black' | 'white'",
@@ -143,16 +169,16 @@ export class DsButton {
                 "optional": false,
                 "docs": {
                     "tags": [],
-                    "text": ""
+                    "text": "Colour of the button"
                 },
                 "getter": false,
                 "setter": false,
-                "attribute": "colour",
                 "reflect": false,
                 "defaultValue": "'blue'"
             },
-            "size": {
+            "dsSize": {
                 "type": "string",
+                "attribute": "ds-size",
                 "mutable": false,
                 "complexType": {
                     "original": "'small' | 'medium'",
@@ -163,16 +189,16 @@ export class DsButton {
                 "optional": false,
                 "docs": {
                     "tags": [],
-                    "text": ""
+                    "text": "Size of the button"
                 },
                 "getter": false,
                 "setter": false,
-                "attribute": "size",
                 "reflect": false,
                 "defaultValue": "'medium'"
             },
-            "fontWeight": {
+            "dsIcon": {
                 "type": "string",
+                "attribute": "ds-icon",
                 "mutable": false,
                 "complexType": {
                     "original": "string",
@@ -183,76 +209,96 @@ export class DsButton {
                 "optional": false,
                 "docs": {
                     "tags": [],
-                    "text": ""
+                    "text": "Icon to display alongside the button text"
                 },
                 "getter": false,
                 "setter": false,
-                "attribute": "font-weight",
                 "reflect": false,
-                "defaultValue": "'normal'"
+                "defaultValue": "''"
             },
-            "icon": {
+            "dsIconPosition": {
                 "type": "string",
+                "attribute": "ds-icon-position",
                 "mutable": false,
                 "complexType": {
-                    "original": "string",
-                    "resolved": "string",
+                    "original": "'start' | 'end'",
+                    "resolved": "\"end\" | \"start\"",
                     "references": {}
                 },
                 "required": false,
                 "optional": false,
                 "docs": {
                     "tags": [],
-                    "text": ""
+                    "text": "Whether to display the icon before or after the button text"
                 },
                 "getter": false,
                 "setter": false,
-                "attribute": "icon",
                 "reflect": false,
-                "defaultValue": "''"
+                "defaultValue": "'start'"
             },
-            "iconPosition": {
+            "dsType": {
                 "type": "string",
+                "attribute": "ds-type",
                 "mutable": false,
                 "complexType": {
-                    "original": "'start' | 'end'",
-                    "resolved": "\"end\" | \"start\"",
+                    "original": "'button' | 'submit' | 'reset'",
+                    "resolved": "\"button\" | \"reset\" | \"submit\"",
                     "references": {}
                 },
                 "required": false,
                 "optional": false,
                 "docs": {
                     "tags": [],
-                    "text": ""
+                    "text": "Passed to the `type` attribute of the `button` element"
                 },
                 "getter": false,
                 "setter": false,
-                "attribute": "icon-position",
                 "reflect": false,
-                "defaultValue": "'start'"
+                "defaultValue": "'button'"
             },
-            "type": {
-                "type": "string",
+            "dsDisabled": {
+                "type": "boolean",
+                "attribute": "ds-disabled",
                 "mutable": false,
                 "complexType": {
-                    "original": "'button' | 'submit' | 'reset'",
-                    "resolved": "\"button\" | \"reset\" | \"submit\"",
+                    "original": "boolean",
+                    "resolved": "boolean",
                     "references": {}
                 },
                 "required": false,
                 "optional": false,
                 "docs": {
                     "tags": [],
-                    "text": ""
+                    "text": "Passed to the `disabled` attribute of the `button` element"
                 },
                 "getter": false,
                 "setter": false,
-                "attribute": "type",
                 "reflect": false,
-                "defaultValue": "'button'"
+                "defaultValue": "false"
+            },
+            "dsIsLoading": {
+                "type": "boolean",
+                "attribute": "ds-is-loading",
+                "mutable": false,
+                "complexType": {
+                    "original": "boolean",
+                    "resolved": "boolean",
+                    "references": {}
+                },
+                "required": false,
+                "optional": false,
+                "docs": {
+                    "tags": [],
+                    "text": "Displays a loading spinner in the button"
+                },
+                "getter": false,
+                "setter": false,
+                "reflect": false,
+                "defaultValue": "false"
             },
-            "disabled": {
+            "dsUseSpinner": {
                 "type": "boolean",
+                "attribute": "ds-use-spinner",
                 "mutable": false,
                 "complexType": {
                     "original": "boolean",
@@ -263,16 +309,35 @@ export class DsButton {
                 "optional": false,
                 "docs": {
                     "tags": [],
-                    "text": ""
+                    "text": "Wraps the button in a container where `aria-live` is set to `polite`"
                 },
                 "getter": false,
                 "setter": false,
-                "attribute": "disabled",
                 "reflect": false,
                 "defaultValue": "false"
             },
-            "fullWidth": {
+            "dsSpinnerHiddenText": {
+                "type": "string",
+                "attribute": "ds-spinner-hidden-text",
+                "mutable": false,
+                "complexType": {
+                    "original": "string",
+                    "resolved": "string",
+                    "references": {}
+                },
+                "required": false,
+                "optional": false,
+                "docs": {
+                    "tags": [],
+                    "text": "Information for screen readers when spinner is displayed"
+                },
+                "getter": false,
+                "setter": false,
+                "reflect": false
+            },
+            "dsFullWidth": {
                 "type": "boolean",
+                "attribute": "ds-full-width",
                 "mutable": false,
                 "complexType": {
                     "original": "boolean",
@@ -283,16 +348,16 @@ export class DsButton {
                 "optional": false,
                 "docs": {
                     "tags": [],
-                    "text": ""
+                    "text": "Displays the button as full width"
                 },
                 "getter": false,
                 "setter": false,
-                "attribute": "full-width",
                 "reflect": false,
                 "defaultValue": "false"
             },
-            "ariaDisabled": {
+            "dsAriaDisabled": {
                 "type": "string",
+                "attribute": "ds-aria-disabled",
                 "mutable": false,
                 "complexType": {
                     "original": "string",
@@ -303,15 +368,35 @@ export class DsButton {
                 "optional": false,
                 "docs": {
                     "tags": [],
-                    "text": ""
+                    "text": "Passed to the `aria-disabled` attribute of the `button` element"
                 },
                 "getter": false,
                 "setter": false,
-                "attribute": "aria-disabled",
                 "reflect": false,
                 "defaultValue": "'false'"
             }
         };
     }
+    static get methods() {
+        return {
+            "dsFocus": {
+                "complexType": {
+                    "signature": "() => Promise<void>",
+                    "parameters": [],
+                    "references": {
+                        "Promise": {
+                            "location": "global",
+                            "id": "global::Promise"
+                        }
+                    },
+                    "return": "Promise<void>"
+                },
+                "docs": {
+                    "text": "Sets focus to the button element rendered inside `ds-button` component.",
+                    "tags": []
+                }
+            }
+        };
+    }
     static get elementRef() { return "el"; }
 }

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

@@ -1,44 +1,65 @@
 import { html } from "lit";
 import { litTemplateResultToString } from "../../../../utils/utils";
+import { handleButtonLoading } from "../../../../utils/button/buttonUtils";
 const meta = {
     title: 'Base Components/Button/Examples',
     component: 'ds-button',
 };
 export default meta;
+const dsSbButtonGroupStyle = html `
+  <style>
+    .ds-sb-button-group {
+      display: flex;
+      gap: 0.5rem;
+    }
+  </style>
+`;
+const buttonGroupDOM = html `
+  <div class="ds-sb-button-group">
+    <ds-button ds-variant="primary" ds-value="Primary"></ds-button>
+    <ds-button ds-variant="secondary" ds-value="Secondary"></ds-button>
+    <ds-button ds-variant="supplementary" ds-value="Supplementary"></ds-button>
+  </div>
+`;
 export const ButtonGroup = {
     render: () => html `
-    <div class="button-group">
-      <ds-button variant="primary" value="Primary"></ds-button>
-      <ds-button variant="secondary" value="Secondary"></ds-button>
-      <ds-button variant="supplementary" value="Supplementary"></ds-button>
-    </div>
+    ${dsSbButtonGroupStyle}
+    ${buttonGroupDOM}
   `,
 };
+const buttonGroupSmallDOM = html `
+  <div class="ds-sb-button-group">
+    <ds-button ds-variant="primary" ds-value="Primary" ds-size="small"></ds-button>
+    <ds-button ds-variant="secondary" ds-value="Secondary" ds-size="small"></ds-button>
+    <ds-button ds-variant="supplementary" ds-value="Supplementary" ds-size="small"></ds-button>
+  </div>
+`;
 export const ButtonGroupSmall = {
     render: () => html `
-    <div class="button-group">
-      <ds-button variant="primary" value="Primary" size="small"></ds-button>
-      <ds-button variant="secondary" value="Secondary" size="small"></ds-button>
-      <ds-button variant="supplementary" value="Supplementary" size="small"></ds-button>
-    </div>
+    ${dsSbButtonGroupStyle}
+    ${buttonGroupSmallDOM}
   `,
 };
+const buttonGroupIconDOM = html `
+  <div class="ds-sb-button-group">
+    <ds-button ds-value="Button with text and icon" ds-icon="ds_flame"></ds-button>
+    <ds-button ds-value="Button with text and icon" ds-icon="ds_flame" ds-icon-position="end"></ds-button>
+    <ds-button ds-icon="ds_flame" aria-label="Button with icon"></ds-button>
+  </div>
+`;
 export const ButtonGroupIcon = {
     render: () => html `
-    <div class="button-group">
-      <ds-button value="Button with text and icon" icon="ds_flame"></ds-button>
-      <ds-button value="Button with text and icon" icon="ds_flame" icon-position="end"></ds-button>
-      <ds-button icon="ds_flame" aria-label="Button with icon"></ds-button>
-    </div>
+    ${dsSbButtonGroupStyle}
+    ${buttonGroupIconDOM}
   `,
 };
 const resetAndSubmitButtonDOM = html `
   <form class="ds-sb-reset-and-submit-button">
-    <ds-text-input name="firstname" label="firstname"></ds-text-input>
-    <ds-text-input name="lastname" label="lastname"></ds-text-input>
-    <div class="button-group ds-sb-reset-and-submit-button__buttons">
-      <ds-button value="reset" type="reset" variant="secondary"></ds-button>
-      <ds-button value="submit" type="submit"></ds-button>
+    <ds-text-input ds-name="firstname" ds-label="firstname"></ds-text-input>
+    <ds-text-input ds-name="lastname" ds-label="lastname"></ds-text-input>
+    <div class="ds-sb-button-group ds-sb-reset-and-submit-button__buttons">
+      <ds-button ds-value="reset" ds-type="reset" ds-variant="secondary"></ds-button>
+      <ds-button ds-value="submit" ds-type="submit"></ds-button>
     </div>
   </form>
 `;
@@ -66,9 +87,86 @@ export const ResetAndSubmitButton = {
 };
 export const FullWidthWithIconsUsingSlots = {
     render: () => html `
-    <ds-button style="width: 100%;" value="Full width with icons using slots">
-      <ds-icon slot="prefix" name="ds_flame"></ds-icon>
-      <ds-icon slot="suffix" name="ds_flame"></ds-icon>
+    <ds-button style="width: 100%;" ds-value="Full width with icons using slots">
+      <ds-icon slot="prefix" ds-name="ds_flame"></ds-icon>
+      <ds-icon slot="suffix" ds-name="ds_flame"></ds-icon>
     </ds-button>
   `,
 };
+export const ButtonWithLoadingAnimation = {
+    render: () => html `
+    <style>
+      .ds-sb-example-load {
+        display: flex;
+        flex-direction: column;
+        gap: 1rem;
+        margin: 1rem 0;
+        max-width: 250px;
+      }
+    </style>
+    <div class="ds-sb-example-load">
+      <ds-button
+        ds-id="loading-button"
+        ds-variant="primary"
+        ds-value="Send"
+        ds-is-loading="false"
+        ds-use-spinner="true"
+        ds-spinner-hidden-text="Sending..."
+        @click=${(e) => {
+        const button = e.currentTarget;
+        handleButtonLoading(button, 'Send', 'Sending...');
+    }}
+      ></ds-button>
+      <ds-button
+        ds-id="loading-button"
+        ds-variant="secondary"
+        ds-value="Download"
+        ds-icon="download"
+        ds-is-loading="false"
+        ds-use-spinner="true"
+        ds-spinner-hidden-text="Downloading..."
+        @click=${(e) => {
+        const button = e.currentTarget;
+        handleButtonLoading(button, 'Download', 'Downloading...');
+    }}
+      ></ds-button>
+      <ds-button
+        ds-id="loading-button"
+        ds-variant="supplementary"
+        ds-value="Download"
+        ds-is-loading="false"
+        ds-use-spinner="true"
+        ds-spinner-hidden-text="Downloading..."
+        @click=${(e) => {
+        const button = e.currentTarget;
+        handleButtonLoading(button, 'Download', 'Downloading...');
+    }}
+      ></ds-button>
+      <ds-button
+        ds-id="loading-button"
+        ds-variant="supplementary"
+        ds-value="Download"
+        ds-is-loading="false"
+        ds-use-spinner="true"
+        ds-spinner-hidden-text="Downloading..."
+        @click=${(e) => {
+        const button = e.currentTarget;
+        handleButtonLoading(button, 'Download', '');
+    }}
+      ></ds-button>
+    </div>
+
+    <ds-button
+      ds-id="loading-button"
+      ds-variant="primary"
+      ds-value="Send"
+      ds-is-loading="false"
+      ds-use-spinner="true"
+      ds-spinner-hidden-text="Sending..."
+      @click=${(e) => {
+        const button = e.currentTarget;
+        handleButtonLoading(button, 'Send', 'Sending...');
+    }}
+    ></ds-button>
+  `,
+};