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

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

@@ -0,0 +1,279 @@
+html {
+  font-size: 100%;
+}
+
+body {
+  font-size: 1rem;
+}
+
+/* Font */
+.ds-font {
+  /* Font Family */
+  /* Font Weights */
+}
+.ds-font--heading {
+  font-family: var(--ds-fontFamily-heading);
+}
+.ds-font--body {
+  font-family: var(--ds-fontFamily-body);
+}
+.ds-font--regular {
+  font-weight: var(--ds-fontWeight-regular);
+}
+.ds-font--semibold {
+  font-weight: var(--ds-fontWeight-semibold);
+}
+.ds-font--semibold-plus {
+  font-weight: var(--ds-fontWeight-semiboldPlus);
+}
+.ds-font--bold {
+  font-weight: var(--ds-fontWeight-bold);
+}
+
+/* Letter Spacing */
+.ds-tracking--xtight {
+  letter-spacing: var(--ds-letterSpacing-xTight);
+}
+.ds-tracking--tight {
+  letter-spacing: var(--ds-letterSpacing-tight);
+}
+.ds-tracking--normal {
+  letter-spacing: var(--ds-letterSpacing-normal);
+}
+.ds-tracking--wide {
+  letter-spacing: var(--ds-letterSpacing-wide);
+}
+.ds-tracking--xwide {
+  letter-spacing: var(--ds-letterSpacing-xWide);
+}
+
+/* Line Height */
+.ds-leading--small {
+  line-height: var(--ds-lineHeight-small);
+}
+.ds-leading--medium {
+  line-height: var(--ds-lineHeight-medium);
+}
+.ds-leading--large {
+  line-height: var(--ds-lineHeight-large);
+}
+.ds-leading--xlarge {
+  line-height: var(--ds-lineHeight-xLarge);
+}
+
+/* Font Width */
+.ds-width--normal {
+  font-stretch: var(--ds-fontWidth-normal);
+}
+.ds-width--condense {
+  font-stretch: var(--ds-fontWidth-condense);
+}
+
+/* Number Style */
+.ds-number--proportional {
+  font-variant-numeric: var(--ds-number-style);
+}
+
+/* Paragraph */
+.ds-paragraph--16 {
+  margin-bottom: var(--ds-fontSize-16);
+}
+.ds-paragraph--20 {
+  margin-bottom: var(--ds-fontSize-20);
+}
+
+/* List */
+.ds-list--spacing {
+  gap: 4px;
+}
+
+/* Text colors */
+.ds-text-color--default {
+  color: var(--ds-palette-black-95);
+}
+
+/* Text Sizes */
+.ds-text {
+  /* Regular Text Sizes */
+  /* Semibold Text Sizes */
+  /* Bold Text Sizes */
+}
+.ds-text--2xl-regular {
+  font-size: var(--ds-fontSize-22);
+  font-weight: var(--ds-fontWeight-regular);
+}
+.ds-text--xl-regular {
+  font-size: var(--ds-fontSize-20);
+  font-weight: var(--ds-fontWeight-regular);
+}
+.ds-text--lg-regular {
+  font-size: var(--ds-fontSize-18);
+  font-weight: var(--ds-fontWeight-regular);
+}
+.ds-text--md-regular {
+  font-size: var(--ds-fontSize-16);
+  font-weight: var(--ds-fontWeight-regular);
+}
+.ds-text--sm-regular {
+  font-size: var(--ds-fontSize-14);
+  font-weight: var(--ds-fontWeight-regular);
+}
+.ds-text--xs-regular {
+  font-size: var(--ds-fontSize-12);
+  font-weight: var(--ds-fontWeight-regular);
+}
+.ds-text--2xl-semibold {
+  font-size: var(--ds-fontSize-22);
+  font-weight: var(--ds-fontWeight-semibold);
+}
+.ds-text--xl-semibold {
+  font-size: var(--ds-fontSize-20);
+  font-weight: var(--ds-fontWeight-semibold);
+}
+.ds-text--lg-semibold {
+  font-size: var(--ds-fontSize-18);
+  font-weight: var(--ds-fontWeight-semibold);
+}
+.ds-text--md-semibold {
+  font-size: var(--ds-fontSize-16);
+  font-weight: var(--ds-fontWeight-semibold);
+}
+.ds-text--sm-semibold {
+  font-size: var(--ds-fontSize-14);
+  font-weight: var(--ds-fontWeight-semibold);
+}
+.ds-text--xs-semibold {
+  font-size: var(--ds-fontSize-12);
+  font-weight: var(--ds-fontWeight-semibold);
+}
+.ds-text--2xl-bold {
+  font-size: var(--ds-fontSize-22);
+  font-weight: var(--ds-fontWeight-bold);
+}
+.ds-text--xl-bold {
+  font-size: var(--ds-fontSize-20);
+  font-weight: var(--ds-fontWeight-bold);
+}
+.ds-text--lg-bold {
+  font-size: var(--ds-fontSize-18);
+  font-weight: var(--ds-fontWeight-bold);
+}
+.ds-text--md-bold {
+  font-size: var(--ds-fontSize-16);
+  font-weight: var(--ds-fontWeight-bold);
+}
+.ds-text--sm-bold {
+  font-size: var(--ds-fontSize-14);
+  font-weight: var(--ds-fontWeight-bold);
+}
+.ds-text--xs-bold {
+  font-size: var(--ds-fontSize-12);
+  font-weight: var(--ds-fontWeight-bold);
+}
+
+.ds-spinner {
+  display: flex;
+  align-items: center;
+  justify-content: center;
+  /* Size */
+  /* Position */
+}
+.ds-spinner--small {
+  padding: 1.5px;
+}
+.ds-spinner--small:has(.ds-spinner__text) {
+  gap: var(--ds-spacing-2xSmall);
+}
+.ds-spinner--medium {
+  padding: 3px;
+}
+.ds-spinner--medium:has(.ds-spinner__text) {
+  gap: var(--ds-spacing-2xSmall);
+}
+.ds-spinner--large {
+  padding: 3px;
+}
+.ds-spinner--large:has(.ds-spinner__text) {
+  gap: var(--ds-spacing-xSmall);
+}
+.ds-spinner--xLarge {
+  padding: 5.5px;
+}
+.ds-spinner--xLarge:has(.ds-spinner__text) {
+  gap: 10px;
+}
+.ds-spinner--2xLarge {
+  padding: 5.5px;
+}
+.ds-spinner--2xLarge:has(.ds-spinner__text) {
+  gap: var(--ds-spacing-small);
+}
+.ds-spinner--below {
+  flex-direction: column;
+  align-items: center;
+}
+.ds-spinner--right {
+  flex-direction: row;
+  align-items: center;
+}
+.ds-spinner__spinner {
+  width: var(--spinner-size, 24px);
+  height: var(--spinner-size, 24px);
+  border-radius: 50%;
+  border: calc(var(--spinner-size, 24px) / 6) solid var(--ds-overlay-black-15);
+  position: relative;
+  display: flex;
+  align-items: center;
+  justify-content: center;
+}
+.ds-spinner__text {
+  font-family: var(--ds-fontFamily-body);
+  color: var(--ds-palette-black-95);
+}
+.ds-spinner__text--white {
+  color: var(--ds-palette-white);
+}
+.ds-spinner__segment {
+  display: block;
+  position: absolute;
+  width: var(--spinner-size, 24px);
+  height: var(--spinner-size, 24px);
+  border: calc(var(--spinner-size, 24px) / 6) solid var(--spinner-color, #005a94);
+  border-radius: 50%;
+  animation: ds-spinner-rotate 1.1s cubic-bezier(0.7, 0.15, 0.3, 0.8) infinite;
+  border-color: var(--spinner-color, #005a94) var(--spinner-border-color) var(--spinner-border-color) var(--spinner-border-color);
+}
+.ds-spinner__segment--1 {
+  animation-delay: -0.3s;
+}
+.ds-spinner__segment--2 {
+  animation-delay: -0.2s;
+}
+.ds-spinner__segment--3 {
+  animation-delay: -0.1s;
+}
+
+@keyframes ds-spinner-rotate {
+  0% {
+    transform: rotate(0deg);
+  }
+  100% {
+    transform: rotate(360deg);
+  }
+}
+/* Reduced Motion Support */
+@media (prefers-reduced-motion: reduce) {
+  .ds-spinner__segment {
+    animation-duration: 2.2s; /* Double the original duration (slower) */
+    animation-timing-function: linear; /* More predictable motion */
+  }
+  .ds-spinner__segment--1 {
+    animation-delay: -0.6s;
+  }
+  .ds-spinner__segment--2 {
+    animation-delay: -0.4s;
+  }
+  .ds-spinner__segment--3 {
+    animation-delay: -0.2s;
+  }
+}

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

@@ -0,0 +1,221 @@
+import { h } from "@stencil/core";
+import { inheritAriaAttributes } from "../../../utils/attributes/attributes";
+import classNames from "classnames";
+const SPINNER_SIZES = {
+    'small': 10,
+    'medium': 14,
+    'large': 20,
+    'xLarge': 28,
+    '2xLarge': 40,
+};
+const SPINNER_TEXT_SIZES = {
+    'small': 'ds-text--xs-regular',
+    'medium': 'ds-text--sm-regular',
+    'large': 'ds-text--md-regular',
+    'xLarge': 'ds-text--lg-regular',
+    '2xLarge': 'ds-text--xl-regular',
+};
+const SPINNER_COLORS = {
+    blue: 'var(--ds-palette-mainBlue-70)',
+    black: 'var(--ds-palette-black-95)',
+    white: 'var(--ds-palette-white)',
+};
+export class DsSpinner {
+    inheritedAttributes = {};
+    el;
+    dsText;
+    dsSize = 'medium';
+    dsSpinnerTextPosition = 'below';
+    dsSpinnerColor = 'blue';
+    dsUseRoleAlert = false;
+    dsUseAriaLive = false;
+    dsHiddenAssistiveText;
+    componentWillLoad() {
+        this.inheritedAttributes = inheritAriaAttributes(this.el);
+    }
+    render() {
+        const sizeInPixels = SPINNER_SIZES[this.dsSize];
+        const textSizeClass = SPINNER_TEXT_SIZES[this.dsSize];
+        const spinnerColorVariable = SPINNER_COLORS[this.dsSpinnerColor];
+        const classes = classNames('ds-spinner', `ds-spinner--${this.dsSize}`, {
+            [`ds-spinner--${this.dsSpinnerTextPosition}`]: !!this.dsText,
+        });
+        const textClasses = classNames('ds-spinner__text', textSizeClass, `ds-spinner__text--${this.dsSpinnerColor}`);
+        const segmentClasses = index => classNames('ds-spinner__segment', `ds-spinner__segment--${index}`);
+        return (h("div", { key: '3d312dd8883b903bb59c8ceface626444ac0df44', role: this.dsUseRoleAlert ? 'alert' : null, "aria-live": this.dsUseAriaLive ? 'polite' : null, class: classes, style: {
+                '--spinner-size': `${sizeInPixels}px`,
+                '--spinner-color': `${spinnerColorVariable}`,
+                '--spinner-border-color': this.dsSpinnerColor == 'white' ? 'var(--ds-overlay-white-15)' : 'transparent',
+            }, ...this.inheritedAttributes }, h("div", { key: '81d04de4de327d4b8be4a03a4b0f97d56214547e', class: "ds-spinner__spinner" }, h("div", { key: 'f7136c4637d17bc796d2e69df8aae51244d1d97e', class: segmentClasses(1) }), h("div", { key: 'd839ca7f1aae71616062b82af2d5b7610299bf25', class: segmentClasses(2) }), h("div", { key: 'bcbd84559e7fd2204320f4788837df61aed6208a', class: segmentClasses(3) })), this.dsHiddenAssistiveText && (h("ds-visually-hidden", { key: '8b3f758381d1623f84e0c237ec17b97a81a85983' }, h("span", { key: '52930b05b2b868c38f785b09d6bb86dddfde828b' }, this.dsHiddenAssistiveText))), this.dsText && h("span", { key: '91677c1f685820bc32f6c8557df98c1c37cdbf8e', class: textClasses }, this.dsText)));
+    }
+    static get is() { return "ds-spinner"; }
+    static get encapsulation() { return "shadow"; }
+    static get originalStyleUrls() {
+        return {
+            "$": ["ds-spinner.scss"]
+        };
+    }
+    static get styleUrls() {
+        return {
+            "$": ["ds-spinner.css"]
+        };
+    }
+    static get properties() {
+        return {
+            "dsText": {
+                "type": "string",
+                "attribute": "ds-text",
+                "mutable": false,
+                "complexType": {
+                    "original": "string",
+                    "resolved": "string",
+                    "references": {}
+                },
+                "required": false,
+                "optional": false,
+                "docs": {
+                    "tags": [],
+                    "text": "Text to display alongside spinner"
+                },
+                "getter": false,
+                "setter": false,
+                "reflect": false
+            },
+            "dsSize": {
+                "type": "string",
+                "attribute": "ds-size",
+                "mutable": false,
+                "complexType": {
+                    "original": "SpinnerSize",
+                    "resolved": "\"2xLarge\" | \"large\" | \"medium\" | \"small\" | \"xLarge\"",
+                    "references": {
+                        "SpinnerSize": {
+                            "location": "global",
+                            "id": "global::SpinnerSize"
+                        }
+                    }
+                },
+                "required": false,
+                "optional": false,
+                "docs": {
+                    "tags": [],
+                    "text": "Size of the spinner"
+                },
+                "getter": false,
+                "setter": false,
+                "reflect": false,
+                "defaultValue": "'medium'"
+            },
+            "dsSpinnerTextPosition": {
+                "type": "string",
+                "attribute": "ds-spinner-text-position",
+                "mutable": false,
+                "complexType": {
+                    "original": "SpinnerTextPosition",
+                    "resolved": "\"below\" | \"side\"",
+                    "references": {
+                        "SpinnerTextPosition": {
+                            "location": "global",
+                            "id": "global::SpinnerTextPosition"
+                        }
+                    }
+                },
+                "required": false,
+                "optional": false,
+                "docs": {
+                    "tags": [],
+                    "text": "Where to display the `dsText` property"
+                },
+                "getter": false,
+                "setter": false,
+                "reflect": false,
+                "defaultValue": "'below'"
+            },
+            "dsSpinnerColor": {
+                "type": "string",
+                "attribute": "ds-spinner-color",
+                "mutable": false,
+                "complexType": {
+                    "original": "SpinnerColor",
+                    "resolved": "\"black\" | \"blue\" | \"white\"",
+                    "references": {
+                        "SpinnerColor": {
+                            "location": "global",
+                            "id": "global::SpinnerColor"
+                        }
+                    }
+                },
+                "required": false,
+                "optional": false,
+                "docs": {
+                    "tags": [],
+                    "text": "Color of the spinner"
+                },
+                "getter": false,
+                "setter": false,
+                "reflect": false,
+                "defaultValue": "'blue'"
+            },
+            "dsUseRoleAlert": {
+                "type": "boolean",
+                "attribute": "ds-use-role-alert",
+                "mutable": false,
+                "complexType": {
+                    "original": "boolean",
+                    "resolved": "boolean",
+                    "references": {}
+                },
+                "required": false,
+                "optional": false,
+                "docs": {
+                    "tags": [],
+                    "text": "Sets `role=\"alert\"` attribute to the spinner element"
+                },
+                "getter": false,
+                "setter": false,
+                "reflect": false,
+                "defaultValue": "false"
+            },
+            "dsUseAriaLive": {
+                "type": "boolean",
+                "attribute": "ds-use-aria-live",
+                "mutable": false,
+                "complexType": {
+                    "original": "boolean",
+                    "resolved": "boolean",
+                    "references": {}
+                },
+                "required": false,
+                "optional": false,
+                "docs": {
+                    "tags": [],
+                    "text": "Sets `aria-live=\"polite\"` attribute to the spinner element"
+                },
+                "getter": false,
+                "setter": false,
+                "reflect": false,
+                "defaultValue": "false"
+            },
+            "dsHiddenAssistiveText": {
+                "type": "string",
+                "attribute": "ds-hidden-assistive-text",
+                "mutable": false,
+                "complexType": {
+                    "original": "string",
+                    "resolved": "string",
+                    "references": {}
+                },
+                "required": false,
+                "optional": false,
+                "docs": {
+                    "tags": [],
+                    "text": "Visually hidden information for screen readers"
+                },
+                "getter": false,
+                "setter": false,
+                "reflect": false
+            }
+        };
+    }
+    static get elementRef() { return "el"; }
+}

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

@@ -0,0 +1,120 @@
+import { html } from "lit";
+import { litTemplateResultToString } from "../../../../utils/utils";
+import { toggleSpinnerLoad } from "../../../../utils/spinner/spinnerUtils";
+const meta = {
+    title: 'Base Components/Spinner/Examples',
+    component: 'ds-spinner',
+};
+export default meta;
+const spinnerTextExamplesDom = html `
+  <div>
+    <div class="ds-sp-container">
+      <div class="ds-sp-item">
+        <ds-spinner ds-spinner-color="blue" ds-size="small" ds-text="Getting things ready..."></ds-spinner>
+      </div>
+      <div class="ds-sp-item">
+        <ds-spinner ds-spinner-color="blue" ds-size="small" ds-text="Getting things ready..." ds-spinner-text-position="side"></ds-spinner>
+      </div>
+    </div>
+    <div class="ds-sp-container">
+      <div class="ds-sp-item">
+        <ds-spinner ds-spinner-color="black" ds-size="medium" ds-text="Getting things ready..."></ds-spinner>
+      </div>
+      <div class="ds-sp-item">
+        <ds-spinner ds-spinner-color="black" ds-size="medium" ds-text="Getting things ready..." ds-spinner-text-position="side"></ds-spinner>
+      </div>
+    </div>
+    <div class="ds-sp-container">
+      <div class="ds-sp-item">
+        <ds-spinner ds-spinner-color="black" ds-size="large" ds-text="Getting things ready..."></ds-spinner>
+      </div>
+      <div class="ds-sp-item">
+        <ds-spinner ds-spinner-color="black" ds-size="large" ds-text="Getting things ready..." ds-spinner-text-position="side"></ds-spinner>
+      </div>
+    </div>
+    <div class="ds-sp-container">
+      <div class="ds-sp-item">
+        <ds-spinner ds-spinner-color="black" ds-size="xLarge" ds-text="Getting things ready..."></ds-spinner>
+      </div>
+      <div class="ds-sp-item">
+        <ds-spinner ds-spinner-color="black" ds-size="xLarge" ds-text="Getting things ready..." ds-spinner-text-position="side"></ds-spinner>
+      </div>
+    </div>
+  </div>
+`;
+export const WithText = {
+    parameters: {
+        docs: {
+            source: {
+                code: litTemplateResultToString(spinnerTextExamplesDom),
+            },
+        },
+    },
+    render: () => html `
+    <style>
+      .ds-sp-container {
+        display: flex;
+        gap: 1rem;
+        width: 100%;
+      }
+      .ds-sp-item {
+        align-items: center;
+        display: flex;
+        flex-direction: column;
+        gap: .5rem;
+        padding: 0.5rem;
+      }
+      .white {
+        color: #FFF;
+        background: #000;
+      }
+    </style>
+    ${spinnerTextExamplesDom}
+  `
+};
+export const SpinnerLoadExample = {
+    args: {
+        dsUseRoleAlert: false,
+        dsUseAriaLive: false,
+        useAriaLiveContainer: false,
+    },
+    argTypes: {
+        useAriaLiveContainer: { name: 'Set aria-live: polite to the container', control: 'boolean' }
+    },
+    render: (args) => html `
+    <style>
+      .ds-sb-example-load {
+        display: flex;
+        flex-direction: column;
+        gap: 1rem;
+        width: 300px;
+      }
+      .ds-sb-box {
+        aspect-ratio: 1;
+        display: flex;
+        align-items: center;
+        justify-content: center;
+        height: 100px;
+      }
+      .ds-sb-hidden {
+        display: none;
+        visibility: hidden;
+      }
+    </style>
+    <div class="ds-sb-example-load" aria-live="${args.useAriaLiveContainer ? 'polite' : 'off'}">
+      <span class="ds-sb-box">Ready to send</span>
+      <ds-spinner id="load-example" ds-use-role-alert="${args.dsUseRoleAlert}" ds-use-aria-live="${args.dsUseAriaLive}" class="ds-sb-hidden" ds-text="Sending..." ds-size="large" ds-hidden-assistive-text="This is hidden Send text"></ds-spinner>
+      <ds-button
+        id="loading-button"
+        ds-variant="primary"
+        ds-value="Send"
+        ds-is-loading="false"
+        @click=${(e) => {
+        const button = e.currentTarget;
+        const spinner = document.querySelector('ds-spinner#load-example');
+        const resultContainer = document.querySelectorAll('.ds-sb-box')[0];
+        toggleSpinnerLoad(button, spinner, resultContainer, 'Send', 'Sending...');
+    }}
+      ></ds-button>
+    </div>`
+};