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

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

@@ -3,9 +3,11 @@ import classNames from "classnames";
 import { isValidation } from "../../../store";
 export class DsInputValidity {
     el;
-    text;
-    type = 'error';
-    validityRole;
+    dsText;
+    dsType = 'error';
+    dsValidityRole;
+    dsAriaLive;
+    dsAriaAtomic;
     identifier;
     componentDidLoad() {
         this.identifier = this.el.getAttribute('id');
@@ -13,11 +15,11 @@ export class DsInputValidity {
     }
     render() {
         const classes = classNames('ds-input-validity', {
-            'ds-input-validity--error': this.type === 'error',
-            'ds-input-validity--success': this.type === 'success',
+            'ds-input-validity--error': this.dsType === 'error',
+            'ds-input-validity--success': this.dsType === 'success',
         });
-        const icon = this.type === 'success' ? 'check_circle_fill' : 'warning_fill';
-        return (h("div", { key: '2eca152eca6e7b4d7e894ff8aaf50a6d03c3e44f', role: isValidation('client') ? this.validityRole : undefined }, this.text && (h("div", { key: '73e4cd1b3af6a84b9c7cbca813c166bc10e9dd26', class: classes }, h("ds-icon", { key: '4eaad4001e758837f9e8b1aae48292a1c5a1a08f', name: icon }), h("small", { key: '3ee5d39785454b9aab9ae6012f3ad940c1f18df0', id: this.identifier }, this.text)))));
+        const icon = this.dsType === 'success' ? 'check_circle_fill' : 'warning_fill';
+        return (h("div", { key: '469ca293035b5f7f7f832fcde1651aef6d8a7e93', role: isValidation('client') ? this.dsValidityRole : undefined, "aria-live": isValidation('client') ? this.dsAriaLive : undefined, "aria-atomic": isValidation('client') ? this.dsAriaAtomic : undefined }, this.dsText && (h("div", { key: 'c1b800c75f2434fd3f26f656289853897a5fd485', class: classes }, h("ds-icon", { key: '7af7ca8d0ab5be6b795f4143c310b5134cadc7cd', dsName: icon }), h("small", { key: '81f8f36d3558f98331a0ec15cffcc3a6bb41f449', id: this.identifier }, this.dsText)))));
     }
     static get is() { return "ds-input-validity"; }
     static get originalStyleUrls() {
@@ -32,8 +34,9 @@ export class DsInputValidity {
     }
     static get properties() {
         return {
-            "text": {
+            "dsText": {
                 "type": "string",
+                "attribute": "ds-text",
                 "mutable": false,
                 "complexType": {
                     "original": "string",
@@ -44,60 +47,87 @@ export class DsInputValidity {
                 "optional": false,
                 "docs": {
                     "tags": [],
-                    "text": ""
+                    "text": "Text to display in the validity message"
                 },
                 "getter": false,
                 "setter": false,
-                "attribute": "text",
                 "reflect": false
             },
-            "type": {
+            "dsType": {
                 "type": "string",
+                "attribute": "ds-type",
                 "mutable": false,
                 "complexType": {
-                    "original": "InputValidityType",
+                    "original": "'error' | 'success'",
                     "resolved": "\"error\" | \"success\"",
-                    "references": {
-                        "InputValidityType": {
-                            "location": "global",
-                            "id": "global::InputValidityType"
-                        }
-                    }
+                    "references": {}
                 },
                 "required": false,
                 "optional": false,
                 "docs": {
                     "tags": [],
-                    "text": ""
+                    "text": "Type of the validity"
                 },
                 "getter": false,
                 "setter": false,
-                "attribute": "type",
                 "reflect": false,
                 "defaultValue": "'error'"
             },
-            "validityRole": {
+            "dsValidityRole": {
                 "type": "string",
+                "attribute": "ds-validity-role",
                 "mutable": false,
                 "complexType": {
-                    "original": "InputValidityRole",
+                    "original": "'alert' | 'status'",
                     "resolved": "\"alert\" | \"status\"",
-                    "references": {
-                        "InputValidityRole": {
-                            "location": "global",
-                            "id": "global::InputValidityRole"
-                        }
-                    }
+                    "references": {}
+                },
+                "required": false,
+                "optional": true,
+                "docs": {
+                    "tags": [],
+                    "text": "Passed to the `role` attribute of the container `div` element. Disabled if client-side validation is not used."
+                },
+                "getter": false,
+                "setter": false,
+                "reflect": false
+            },
+            "dsAriaLive": {
+                "type": "string",
+                "attribute": "ds-aria-live",
+                "mutable": false,
+                "complexType": {
+                    "original": "'assertive' | 'polite'",
+                    "resolved": "\"assertive\" | \"polite\"",
+                    "references": {}
+                },
+                "required": false,
+                "optional": true,
+                "docs": {
+                    "tags": [],
+                    "text": "Passed to the `aria-live` attribute of the container `div` element. Disabled if client-side validation is not used."
+                },
+                "getter": false,
+                "setter": false,
+                "reflect": false
+            },
+            "dsAriaAtomic": {
+                "type": "string",
+                "attribute": "ds-aria-atomic",
+                "mutable": false,
+                "complexType": {
+                    "original": "'true' | 'false'",
+                    "resolved": "\"false\" | \"true\"",
+                    "references": {}
                 },
                 "required": false,
                 "optional": true,
                 "docs": {
                     "tags": [],
-                    "text": ""
+                    "text": "Passed to the `aria-atomic` attribute of the container `div` element. Disabled if client-side validation is not used."
                 },
                 "getter": false,
                 "setter": false,
-                "attribute": "role",
                 "reflect": false
             }
         };

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

@@ -5,13 +5,13 @@ const meta = {
 export default meta;
 export const Error = {
     args: {
-        text: 'Link text',
-        type: 'error'
+        dsText: 'Link text',
+        dsType: 'error'
     },
 };
 export const Success = {
     args: {
-        text: 'Link text',
-        type: 'success',
+        dsText: 'Link text',
+        dsType: 'success',
     },
 };

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

@@ -5,18 +5,13 @@ const meta = {
 export default meta;
 export const Default = {
     args: {
-        text: 'Error text',
-        type: 'error',
+        dsText: 'Error text',
+        dsType: 'error',
     },
 };
 export const Playground = {
     args: {
-        text: 'Error text',
-        type: 'error',
-    },
-    argTypes: {
-        text: { control: 'text' },
-        type: { control: 'select', options: ['error', 'success'] },
-        validityRole: { name: 'role', control: 'radio', options: ['alert', 'status'] },
+        dsText: 'Error text',
+        dsType: 'error',
     },
 };

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

@@ -13,7 +13,7 @@
 .ds-link {
   display: inline-flex;
   align-items: center;
-  color: var(--ds-textColor-link);
+  color: var(--ds-palette-mainBlue-70);
   font-weight: var(--ds-fontWeight-regular);
   letter-spacing: var(--ds-letterSpacing-wide);
   text-decoration-line: underline;
@@ -24,11 +24,9 @@
   text-underline-position: from-font;
 }
 .ds-link:focus-visible {
-  box-shadow: 0 0 0 var(--ds-borderWidth-thin) var(--ds-borderColor-white);
-  outline-color: var(--ds-borderColor-black);
-  outline-offset: var(--ds-borderWidth-thin);
-  outline-style: solid;
-  outline-width: var(--ds-borderWidth-thin);
+  box-shadow: 0 0 0 var(--ds-borderWidth-thin) var(--ds-palette-white);
+  outline: var(--ds-borderWidth-thin) solid var(--ds-palette-black-95);
+  outline-offset: calc(var(--ds-borderWidth-thin) * 1);
 }
 .ds-link--semibold {
   font-weight: var(--ds-fontWeight-semibold);
@@ -75,30 +73,42 @@
   text-underline-offset: 12%;
 }
 .ds-link:hover {
-  color: var(--ds-textColor-link-hover);
+  color: var(--ds-palette-mainBlue-80);
 }
 .ds-link:active {
-  color: var(--ds-textColor-link-active);
+  color: var(--ds-palette-mainBlue-90);
 }
 .ds-link:visited {
-  color: var(--ds-textColor-link-visited);
+  color: #551a8b;
 }
 .ds-link--standalone {
-  color: var(--ds-textColor-link);
+  color: var(--ds-palette-mainBlue-70);
   text-decoration-line: none;
 }
 .ds-link--standalone:hover, .ds-link--standalone:active {
   text-decoration-line: underline;
 }
 .ds-link--standalone:hover {
-  color: var(--ds-textColor-link-hover);
+  color: var(--ds-palette-mainBlue-80);
 }
 .ds-link--standalone:active {
-  color: var(--ds-textColor-link-active);
+  color: var(--ds-palette-mainBlue-90);
 }
 .ds-link--standalone:focus-visible {
-  color: var(--ds-textColor-link);
+  color: var(--ds-palette-mainBlue-70);
 }
 .ds-link--standalone:visited {
-  color: var(--ds-textColor-link);
+  color: var(--ds-palette-mainBlue-70);
+}
+.ds-link--colour-white {
+  color: var(--ds-palette-white);
+}
+.ds-link--colour-white:hover, .ds-link--colour-white:active, .ds-link--colour-white:visited, .ds-link--colour-white:focus-visible {
+  color: var(--ds-palette-white);
+}
+.ds-link--colour-black {
+  color: var(--ds-palette-black-95);
+}
+.ds-link--colour-black:hover, .ds-link--colour-black:active, .ds-link--colour-black:visited, .ds-link--colour-black:focus-visible {
+  color: var(--ds-palette-black-95);
 }

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

@@ -1,44 +1,48 @@
 import { h } from "@stencil/core";
 import classNames from "classnames";
-import { inheritAriaAttributes } from "../../../utils/attributes/attributes";
+import { inheritAriaAttributes, inheritSpecifiedAttributes } from "../../../utils/attributes/attributes";
 import { opensInNewTab, visuallyHiddenAssistiveText } from "../../../utils/link/linkUtils";
-import { getAriaLabel, idGenerator } from "../../../utils/utils";
+import { idGenerator } from "../../../utils/utils";
 const visuallyHiddenAssistiveTextIdGenerator = idGenerator('visually-hidden-assistive-text');
 export class DsLink {
     inheritedAttributes = {};
     rel;
     visuallyHiddenAssistiveTextId = visuallyHiddenAssistiveTextIdGenerator.next().value;
     el;
-    text;
-    size;
-    variant = 'inline';
-    weight = 'regular';
-    icon = '';
-    iconPosition = 'end';
-    iconTitle;
-    iconHidden;
-    href;
-    target;
-    download;
-    language;
-    ariaLabel;
+    dsText;
+    dsSize;
+    dsVariant = 'inline';
+    dsWeight = 'regular';
+    dsIcon = '';
+    dsIconPosition = 'end';
+    dsIconTitle;
+    dsIconHidden;
+    dsHref;
+    dsTarget;
+    dsDownload;
+    dsAriaLabel;
+    dsColour;
     componentWillLoad() {
-        this.inheritedAttributes = inheritAriaAttributes(this.el, ['aria-label']);
-        if (opensInNewTab(this.target)) {
-            this.icon = 'open_in_new';
-            this.iconPosition = 'end';
+        this.inheritedAttributes = {
+            ...inheritAriaAttributes(this.el, ['aria-label']),
+            ...inheritSpecifiedAttributes(this.el, ['lang']),
+        };
+        if (opensInNewTab(this.dsTarget)) {
+            this.dsIcon = 'open_in_new';
+            this.dsIconPosition = 'end';
             this.rel = 'noopener noreferrer';
         }
     }
     render() {
-        const classes = classNames('ds-link', `ds-link--${this.weight}`, `ds-link--${this.variant}`, {
-            [`ds-link--${this.size}`]: Boolean(this.size),
+        const classes = classNames('ds-link', `ds-link--${this.dsWeight}`, `ds-link--${this.dsVariant}`, {
+            [`ds-link--${this.dsSize}`]: !!this.dsSize,
+            [`ds-link--colour-${this.dsColour}`]: !!this.dsColour,
         });
         const iconClasses = classNames('ds-link__icon', {
-            [`ds-link__icon--start-${this.variant}`]: this.iconPosition === 'start',
-            [`ds-link__icon--end-${this.variant}`]: this.iconPosition === 'end',
+            [`ds-link__icon--start-${this.dsVariant}`]: this.dsIconPosition === 'start',
+            [`ds-link__icon--end-${this.dsVariant}`]: this.dsIconPosition === 'end',
         });
-        return (h("a", { key: 'f8e36a029709033379e53cc1c409bc9c0069820e', href: this.href, class: classes, rel: this.rel, target: this.target, download: this.download, "aria-label": getAriaLabel(this.text, this.ariaLabel), ...this.inheritedAttributes }, h("slot", { key: '88f90209b6557942dd956585b5f77632aa647c8e', name: "iconStart" }, this.icon && this.iconPosition === 'start' && h("ds-icon", { key: '87169acfb32913d10d27b35a9c6f714385979aa7', name: this.icon, class: iconClasses, size: "1em", title: this.iconTitle, hidden: this.iconHidden })), this.text, h("slot", { key: 'b38677240eb8bd7c1200c8dc08876ba75e7b3e81', name: "iconEnd" }, this.icon && this.iconPosition === 'end' && h("ds-icon", { key: 'c3088e302a43b4cbc5601a9adff54a3dc27a59dc', name: this.icon, class: iconClasses, size: "1em", title: this.iconTitle, hidden: this.iconHidden })), opensInNewTab(this.target) && (h("ds-visually-hidden", { key: '25ac189fd216148a05fddfc6e384cfbde59e0e22', id: this.visuallyHiddenAssistiveTextId }, visuallyHiddenAssistiveText(this.language ?? document.documentElement.lang)))));
+        return (h("a", { key: 'a2dadeffad7a9ea98044d8d9e655b9623cdb287e', href: this.dsHref, class: classes, rel: this.rel, target: this.dsTarget, download: this.dsDownload, "aria-label": this.dsAriaLabel, ...this.inheritedAttributes }, h("slot", { key: '731bfe4dc924dd63b2815daed0ebe8bf2f7c455e', name: "prefix" }, this.dsIcon && this.dsIconPosition === 'start' && (h("ds-icon", { key: '4070f566905c409d9489221edaebb796aaccf973', dsName: this.dsIcon, class: iconClasses, dsSize: "1em", dsTitle: this.dsIconTitle, dsHidden: this.dsIconHidden }))), this.dsText, h("slot", { key: 'a57232ddd92c4225efe30b22247e8bf649e1f98f', name: "suffix" }, this.dsIcon && this.dsIconPosition === 'end' && (h("ds-icon", { key: '12d9a52ab321c0f607013accf39ee82947bac4eb', dsName: this.dsIcon, class: iconClasses, dsSize: "1em", dsTitle: this.dsIconTitle, dsHidden: this.dsIconHidden }))), opensInNewTab(this.dsTarget) && h("ds-visually-hidden", { key: 'baf51d298ca730b60c969e980fe91eb6096bd791', id: this.visuallyHiddenAssistiveTextId }, visuallyHiddenAssistiveText())));
     }
     static get is() { return "ds-link"; }
     static get encapsulation() { return "shadow"; }
@@ -54,8 +58,9 @@ export class DsLink {
     }
     static get properties() {
         return {
-            "text": {
+            "dsText": {
                 "type": "string",
+                "attribute": "ds-text",
                 "mutable": false,
                 "complexType": {
                     "original": "string",
@@ -66,15 +71,15 @@ export class DsLink {
                 "optional": false,
                 "docs": {
                     "tags": [],
-                    "text": ""
+                    "text": "Text content of the link"
                 },
                 "getter": false,
                 "setter": false,
-                "attribute": "text",
                 "reflect": false
             },
-            "size": {
+            "dsSize": {
                 "type": "string",
+                "attribute": "ds-size",
                 "mutable": false,
                 "complexType": {
                     "original": "LinkSize",
@@ -90,15 +95,15 @@ export class DsLink {
                 "optional": true,
                 "docs": {
                     "tags": [],
-                    "text": ""
+                    "text": "Size of the link"
                 },
                 "getter": false,
                 "setter": false,
-                "attribute": "size",
                 "reflect": false
             },
-            "variant": {
+            "dsVariant": {
                 "type": "string",
+                "attribute": "ds-variant",
                 "mutable": false,
                 "complexType": {
                     "original": "LinkVariant",
@@ -114,16 +119,16 @@ export class DsLink {
                 "optional": false,
                 "docs": {
                     "tags": [],
-                    "text": ""
+                    "text": "Variant of the link"
                 },
                 "getter": false,
                 "setter": false,
-                "attribute": "variant",
                 "reflect": false,
                 "defaultValue": "'inline'"
             },
-            "weight": {
+            "dsWeight": {
                 "type": "string",
+                "attribute": "ds-weight",
                 "mutable": false,
                 "complexType": {
                     "original": "LinkWeight",
@@ -139,16 +144,16 @@ export class DsLink {
                 "optional": false,
                 "docs": {
                     "tags": [],
-                    "text": ""
+                    "text": "Font weight of the link"
                 },
                 "getter": false,
                 "setter": false,
-                "attribute": "weight",
                 "reflect": false,
                 "defaultValue": "'regular'"
             },
-            "icon": {
+            "dsIcon": {
                 "type": "string",
+                "attribute": "ds-icon",
                 "mutable": true,
                 "complexType": {
                     "original": "string",
@@ -159,16 +164,16 @@ export class DsLink {
                 "optional": false,
                 "docs": {
                     "tags": [],
-                    "text": ""
+                    "text": "Icon to display alongside link"
                 },
                 "getter": false,
                 "setter": false,
-                "attribute": "icon",
                 "reflect": false,
                 "defaultValue": "''"
             },
-            "iconPosition": {
+            "dsIconPosition": {
                 "type": "string",
+                "attribute": "ds-icon-position",
                 "mutable": true,
                 "complexType": {
                     "original": "LinkIconPosition",
@@ -184,16 +189,16 @@ export class DsLink {
                 "optional": false,
                 "docs": {
                     "tags": [],
-                    "text": ""
+                    "text": "Whether to display the icon before or after the link"
                 },
                 "getter": false,
                 "setter": false,
-                "attribute": "icon-position",
                 "reflect": false,
                 "defaultValue": "'end'"
             },
-            "iconTitle": {
+            "dsIconTitle": {
                 "type": "string",
+                "attribute": "ds-icon-title",
                 "mutable": false,
                 "complexType": {
                     "original": "string",
@@ -204,15 +209,15 @@ export class DsLink {
                 "optional": true,
                 "docs": {
                     "tags": [],
-                    "text": ""
+                    "text": "Passed to the `dsTitle` property of the `ds-icon` element"
                 },
                 "getter": false,
                 "setter": false,
-                "attribute": "icon-title",
                 "reflect": false
             },
-            "iconHidden": {
+            "dsIconHidden": {
                 "type": "boolean",
+                "attribute": "ds-icon-hidden",
                 "mutable": false,
                 "complexType": {
                     "original": "boolean",
@@ -223,15 +228,15 @@ export class DsLink {
                 "optional": true,
                 "docs": {
                     "tags": [],
-                    "text": ""
+                    "text": "Passed to the `dsHidden` property of the `ds-icon` element"
                 },
                 "getter": false,
                 "setter": false,
-                "attribute": "icon-hidden",
                 "reflect": false
             },
-            "href": {
+            "dsHref": {
                 "type": "string",
+                "attribute": "ds-href",
                 "mutable": false,
                 "complexType": {
                     "original": "string",
@@ -242,15 +247,15 @@ export class DsLink {
                 "optional": false,
                 "docs": {
                     "tags": [],
-                    "text": ""
+                    "text": "Passed to the `href` attribute of the `a` element"
                 },
                 "getter": false,
                 "setter": false,
-                "attribute": "href",
                 "reflect": false
             },
-            "target": {
+            "dsTarget": {
                 "type": "string",
+                "attribute": "ds-target",
                 "mutable": false,
                 "complexType": {
                     "original": "LinkTarget",
@@ -266,15 +271,15 @@ export class DsLink {
                 "optional": true,
                 "docs": {
                     "tags": [],
-                    "text": ""
+                    "text": "Passed to the `target` attribute of the `a` element"
                 },
                 "getter": false,
                 "setter": false,
-                "attribute": "target",
                 "reflect": false
             },
-            "download": {
+            "dsDownload": {
                 "type": "boolean",
+                "attribute": "ds-download",
                 "mutable": false,
                 "complexType": {
                     "original": "boolean",
@@ -285,54 +290,48 @@ export class DsLink {
                 "optional": true,
                 "docs": {
                     "tags": [],
-                    "text": ""
+                    "text": "Passed to the `download` attribute of the `a` element"
                 },
                 "getter": false,
                 "setter": false,
-                "attribute": "download",
                 "reflect": false
             },
-            "language": {
+            "dsAriaLabel": {
                 "type": "string",
+                "attribute": "ds-aria-label",
                 "mutable": false,
                 "complexType": {
-                    "original": "LinkLang",
-                    "resolved": "\"en\" | \"fi\" | \"sv\"",
-                    "references": {
-                        "LinkLang": {
-                            "location": "global",
-                            "id": "global::LinkLang"
-                        }
-                    }
+                    "original": "string",
+                    "resolved": "string",
+                    "references": {}
                 },
                 "required": false,
-                "optional": true,
+                "optional": false,
                 "docs": {
                     "tags": [],
-                    "text": ""
+                    "text": "Passed to the `aria-label` attribute of the `a` element"
                 },
                 "getter": false,
                 "setter": false,
-                "attribute": "lang",
                 "reflect": false
             },
-            "ariaLabel": {
+            "dsColour": {
                 "type": "string",
+                "attribute": "ds-colour",
                 "mutable": false,
                 "complexType": {
-                    "original": "string",
-                    "resolved": "string",
+                    "original": "'black' | 'white'",
+                    "resolved": "\"black\" | \"white\"",
                     "references": {}
                 },
                 "required": false,
-                "optional": false,
+                "optional": true,
                 "docs": {
                     "tags": [],
-                    "text": ""
+                    "text": "Colour of the link. Overrides default colour."
                 },
                 "getter": false,
                 "setter": false,
-                "attribute": "aria-label",
                 "reflect": false
             }
         };