@uh-design-system/component-library 0.4.0 → 0.4.2

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

@@ -0,0 +1,114 @@
+import { Fragment, h } from "@stencil/core";
+import classNames from "classnames";
+export class DsInputValidity {
+    el;
+    text;
+    type = 'error';
+    validityRole = 'status';
+    identifier;
+    componentDidLoad() {
+        this.identifier = this.el.getAttribute('id');
+        this.el.removeAttribute('id');
+    }
+    render() {
+        const classes = classNames('ds-input-validity', {
+            'ds-input-validity--error': this.type === 'error',
+            'ds-input-validity--success': this.type === 'success',
+        });
+        const icon = this.type === 'success' ? 'check_circle_fill' : 'warning_fill';
+        if (!this.text) {
+            return null;
+        }
+        return (h(Fragment, null, this.text && (h("div", { class: classes, role: this.validityRole }, h("ds-icon", { name: icon }), h("small", { id: this.identifier }, this.text)))));
+    }
+    static get is() { return "ds-input-validity"; }
+    static get originalStyleUrls() {
+        return {
+            "$": ["ds-input-validity.scss"]
+        };
+    }
+    static get styleUrls() {
+        return {
+            "$": ["ds-input-validity.css"]
+        };
+    }
+    static get properties() {
+        return {
+            "text": {
+                "type": "string",
+                "mutable": false,
+                "complexType": {
+                    "original": "string",
+                    "resolved": "string",
+                    "references": {}
+                },
+                "required": false,
+                "optional": false,
+                "docs": {
+                    "tags": [],
+                    "text": ""
+                },
+                "getter": false,
+                "setter": false,
+                "attribute": "text",
+                "reflect": false
+            },
+            "type": {
+                "type": "string",
+                "mutable": false,
+                "complexType": {
+                    "original": "InputValidityType",
+                    "resolved": "\"error\" | \"success\"",
+                    "references": {
+                        "InputValidityType": {
+                            "location": "global",
+                            "id": "global::InputValidityType"
+                        }
+                    }
+                },
+                "required": false,
+                "optional": false,
+                "docs": {
+                    "tags": [],
+                    "text": ""
+                },
+                "getter": false,
+                "setter": false,
+                "attribute": "type",
+                "reflect": false,
+                "defaultValue": "'error'"
+            },
+            "validityRole": {
+                "type": "string",
+                "mutable": false,
+                "complexType": {
+                    "original": "InputValidityRole",
+                    "resolved": "\"alert\" | \"status\"",
+                    "references": {
+                        "InputValidityRole": {
+                            "location": "global",
+                            "id": "global::InputValidityRole"
+                        }
+                    }
+                },
+                "required": false,
+                "optional": true,
+                "docs": {
+                    "tags": [],
+                    "text": ""
+                },
+                "getter": false,
+                "setter": false,
+                "attribute": "role",
+                "reflect": false,
+                "defaultValue": "'status'"
+            }
+        };
+    }
+    static get states() {
+        return {
+            "identifier": {}
+        };
+    }
+    static get elementRef() { return "el"; }
+}

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

@@ -0,0 +1,17 @@
+const meta = {
+    title: 'Base Components/InputValidity/Features',
+    component: 'ds-input-validity',
+};
+export default meta;
+export const Error = {
+    args: {
+        text: 'Link text',
+        type: 'error'
+    },
+};
+export const Success = {
+    args: {
+        text: 'Link text',
+        type: 'success',
+    },
+};

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

@@ -0,0 +1,21 @@
+const meta = {
+    title: 'Base Components/InputValidity',
+    component: 'ds-input-validity',
+};
+export default meta;
+export const Default = {
+    args: {
+        text: 'Error text',
+        type: 'error',
+    },
+};
+export const Playground = {
+    args: {
+        text: 'Error text',
+        type: 'error',
+    },
+    argTypes: {
+        text: { control: 'text' },
+        type: { control: 'select', options: ['error', 'success'] },
+    },
+};

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

@@ -6,144 +6,6 @@
   --ds-breakpoint-xLarge: 90rem;
 }
 
-:root {
-  --ds-borderWidth-none: 0px;
-  --ds-borderWidth-hairline: 1px;
-  --ds-borderWidth-thin: 2px;
-  --ds-borderWidth-thick: 4px;
-  --ds-borderWidth-xThick: 8px;
-  --ds-borderRadius-none: 0px;
-}
-
-:root {
-  --ds-breakpoint-xSmall: 20rem;
-  --ds-breakpoint-small: 30rem;
-  --ds-breakpoint-medium: 60rem;
-  --ds-breakpoint-large: 75rem;
-  --ds-breakpoint-xLarge: 90rem;
-}
-
-:root {
-  --ds-fontFamily-heading: "Open Sans", sans-serif;
-  --ds-fontFamily-body: "Open Sans", sans-serif;
-  --ds-fontSize-12: 12px; /* 0.75rem */
-  --ds-fontSize-14: 14px; /* 0.875rem */
-  --ds-fontSize-16: 16px; /* 1rem */
-  --ds-fontSize-18: 18px; /* 1.125rem */
-  --ds-fontSize-20: 20px; /* 1.25rem */
-  --ds-fontSize-22: 22px; /* 1.375rem */
-  --ds-fontSize-24: 24px; /* 1.5rem */
-  --ds-fontSize-26: 26px; /* 1.625rem */
-  --ds-fontSize-30: 30px; /* 1.875rem */
-  --ds-fontSize-32: 32px; /* 2rem */
-  --ds-fontSize-36: 36px; /* 2.25rem */
-  --ds-fontSize-40: 40px; /* 2.5rem */
-  --ds-fontSize-48: 48px; /* 3rem */
-  --ds-fontSize-56: 56px; /* 3.5rem */
-  --ds-fontSize-64: 64px; /* 4rem */
-  --ds-fontWeight-regular: 400;
-  --ds-fontWeight-semibold: 600;
-  --ds-fontWeight-semiboldPlus: 650;
-  --ds-fontWeight-bold: 700;
-  --ds-letterSpacing-xTight: -2;
-  --ds-letterSpacing-tight: -1.4;
-  --ds-letterSpacing-normal: -0.4;
-  --ds-letterSpacing-wide: 0;
-  --ds-letterSpacing-xWide: 0.4;
-  --ds-lineHeight-small: 1;
-  --ds-lineHeight-medium: 1.2;
-  --ds-lineHeight-large: 1.5;
-  --ds-lineHeight-xLarge: 1.75;
-  --ds-fontWidth-normal: 100;
-  --ds-fontWidth-condense: 90;
-  --ds-number-style: proportional-figures; /* Varying spacing */
-}
-
-@supports (font-variation-settings: normal) {
-  :root {
-    --ds-fontFamily-heading: "Open Sans Variable", sans-serif;
-    --ds-fontFamily-body: "Open Sans Variable", sans-serif;
-  }
-}
-:root {
-  --ds-breakpoint-xSmall: 20rem;
-  --ds-breakpoint-small: 30rem;
-  --ds-breakpoint-medium: 60rem;
-  --ds-breakpoint-large: 75rem;
-  --ds-breakpoint-xLarge: 90rem;
-}
-
-/* Body text styles */
-.ds-bodyText--2xLarge {
-  color: var(--ds-textColor-default);
-  font-family: var(--ds-fontFamily-body);
-  font-size: var(--ds-fontSize-20);
-  font-weight: var(--ds-fontWeight-regular);
-  letter-spacing: var(--ds-letterSpacing-wide);
-  line-height: var(--ds-lineHeight-large);
-}
-@media (min-width: 30rem) {
-  .ds-bodyText--2xLarge {
-    font-size: var(--ds-fontSize-22);
-  }
-}
-
-.ds-bodyText--xLarge {
-  color: var(--ds-textColor-default);
-  font-family: var(--ds-fontFamily-body);
-  font-size: var(--ds-fontSize-18);
-  font-weight: var(--ds-fontWeight-regular);
-  letter-spacing: var(--ds-letterSpacing-wide);
-  line-height: var(--ds-lineHeight-large);
-}
-@media (min-width: 30rem) {
-  .ds-bodyText--xLarge {
-    font-size: var(--ds-fontSize-20);
-  }
-}
-
-.ds-bodyText--large {
-  color: var(--ds-textColor-default);
-  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);
-}
-@media (min-width: 30rem) {
-  .ds-bodyText--large {
-    font-size: var(--ds-fontSize-18);
-  }
-}
-
-.ds-bodyText--medium {
-  color: var(--ds-textColor-default);
-  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);
-}
-@media (min-width: 30rem) {
-  .ds-bodyText--medium {
-    font-size: var(--ds-fontSize-16);
-  }
-}
-
-.ds-bodyText--small {
-  color: var(--ds-textColor-default);
-  font-family: var(--ds-fontFamily-body);
-  font-size: var(--ds-fontSize-12);
-  font-weight: var(--ds-fontWeight-regular);
-  letter-spacing: var(--ds-letterSpacing-wide);
-  line-height: var(--ds-lineHeight-large);
-}
-@media (min-width: 30rem) {
-  .ds-bodyText--small {
-    font-size: var(--ds-fontSize-14);
-  }
-}
-
 :host {
   display: inline-block;
 }
@@ -161,7 +23,7 @@
   text-underline-offset: 12%;
   text-underline-position: from-font;
 }
-.ds-link:focus-visible, .ds-link:focus-within {
+.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);
@@ -174,6 +36,24 @@
 .ds-link--bold {
   font-weight: var(--ds-fontWeight-bold);
 }
+.ds-link--2xLarge {
+  font-size: var(--ds-fontSize-22);
+}
+.ds-link--xLarge {
+  font-size: var(--ds-fontSize-20);
+}
+.ds-link--large {
+  font-size: var(--ds-fontSize-18);
+}
+.ds-link--medium {
+  font-size: var(--ds-fontSize-16);
+}
+.ds-link--small {
+  font-size: var(--ds-fontSize-14);
+}
+.ds-link--xSmall {
+  font-size: var(--ds-fontSize-12);
+}
 .ds-link__icon {
   height: 1em;
   width: 1em;

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

@@ -1,8 +1,8 @@
 import { h } from "@stencil/core";
 import classNames from "classnames";
-import { inheritAriaAttributes } from "../../../utils/attributes";
-import { idGenerator } from "../ds-text-input/utils";
-import { opensInNewTab, visuallyHiddenAssistiveText } from "../../../utils/link/linkUtils";
+import { inheritAriaAttributes } from "../../../utils/attributes/attributes";
+import { getAriaLabel, opensInNewTab, visuallyHiddenAssistiveText } from "../../../utils/link/linkUtils";
+import { idGenerator } from "../../../utils/utils";
 const visuallyHiddenAssistiveTextIdGenerator = idGenerator('visually-hidden-assistive-text');
 export class DsLink {
     inheritedAttributes = {};
@@ -15,12 +15,15 @@ export class DsLink {
     weight = 'regular';
     icon = '';
     iconPosition = 'end';
+    iconTitle;
+    iconHidden;
     href;
     target;
     download;
     language;
+    linkAriaLabel;
     componentWillLoad() {
-        this.inheritedAttributes = inheritAriaAttributes(this.el);
+        this.inheritedAttributes = inheritAriaAttributes(this.el, ['aria-label']);
         if (opensInNewTab(this.target)) {
             this.icon = 'open_in_new';
             this.iconPosition = 'end';
@@ -29,13 +32,13 @@ export class DsLink {
     }
     render() {
         const classes = classNames('ds-link', `ds-link--${this.weight}`, `ds-link--${this.variant}`, {
-            [`bodyText--${this.size}`]: Boolean(this.size),
+            [`ds-link--${this.size}`]: Boolean(this.size),
         });
         const iconClasses = classNames('ds-link__icon', {
             [`ds-link__icon--start-${this.variant}`]: this.iconPosition === 'start',
             [`ds-link__icon--end-${this.variant}`]: this.iconPosition === 'end',
         });
-        return (h("a", { key: 'd8922731378178b2c927796fdc636fc26d4cbaea', href: this.href, class: classes, rel: this.rel, target: this.target, download: this.download, ...this.inheritedAttributes }, h("slot", { key: 'dfbd079b80132f7751501da7e47bb0f1aec4590a', name: "iconStart" }, this.icon && this.iconPosition === 'start' && h("ds-icon", { key: '2b3d864df8c04b340b0251c9ac185be918f7bb16', name: this.icon, class: iconClasses, size: "1em" })), this.text, h("slot", { key: '2fc2e4a3be8b83d545b27ae19096ffc5fbb72c0e', name: "iconEnd" }, this.icon && this.iconPosition === 'end' && h("ds-icon", { key: '9592ce7c0222bd3c739943fb9b6a37b92e67618c', name: this.icon, class: iconClasses, size: "1em" })), opensInNewTab(this.target) && (h("ds-visually-hidden", { key: '43c55dded281f4e3a084ceb64edf695707309494', id: this.visuallyHiddenAssistiveTextId }, visuallyHiddenAssistiveText(this.language ?? document.documentElement.lang)))));
+        return (h("a", { key: '92b52d7b61888dd8d39841afe9823286356ec231', href: this.href, class: classes, rel: this.rel, target: this.target, download: this.download, "aria-label": getAriaLabel(this.text, this.linkAriaLabel), ...this.inheritedAttributes }, h("slot", { key: '9125a3b98ed37f1e71a922a071c07f2ad270a661', name: "iconStart" }, this.icon && this.iconPosition === 'start' && h("ds-icon", { key: '5d08c8501703a7d8cf4bb3386d6368047e75f8fe', name: this.icon, class: iconClasses, size: "1em", title: this.iconTitle, hidden: this.iconHidden })), this.text, h("slot", { key: '6bd3f8fda1ad927ceba8612503dddabb188be692', name: "iconEnd" }, this.icon && this.iconPosition === 'end' && h("ds-icon", { key: 'e6b7de1ca80eb3485083f5ff1902ebf66821c707', name: this.icon, class: iconClasses, size: "1em", title: this.iconTitle, hidden: this.iconHidden })), opensInNewTab(this.target) && (h("ds-visually-hidden", { key: 'b7ffb5a0cfa2e02ef793150bd9ea6886e02c7cac', id: this.visuallyHiddenAssistiveTextId }, visuallyHiddenAssistiveText(this.language ?? document.documentElement.lang)))));
     }
     static get is() { return "ds-link"; }
     static get encapsulation() { return "shadow"; }
@@ -59,8 +62,8 @@ export class DsLink {
                     "resolved": "string",
                     "references": {}
                 },
-                "required": false,
-                "optional": true,
+                "required": true,
+                "optional": false,
                 "docs": {
                     "tags": [],
                     "text": ""
@@ -189,6 +192,44 @@ export class DsLink {
                 "reflect": false,
                 "defaultValue": "'end'"
             },
+            "iconTitle": {
+                "type": "string",
+                "mutable": false,
+                "complexType": {
+                    "original": "string",
+                    "resolved": "string",
+                    "references": {}
+                },
+                "required": false,
+                "optional": true,
+                "docs": {
+                    "tags": [],
+                    "text": ""
+                },
+                "getter": false,
+                "setter": false,
+                "attribute": "icon-title",
+                "reflect": false
+            },
+            "iconHidden": {
+                "type": "boolean",
+                "mutable": false,
+                "complexType": {
+                    "original": "boolean",
+                    "resolved": "boolean",
+                    "references": {}
+                },
+                "required": false,
+                "optional": true,
+                "docs": {
+                    "tags": [],
+                    "text": ""
+                },
+                "getter": false,
+                "setter": false,
+                "attribute": "icon-hidden",
+                "reflect": false
+            },
             "href": {
                 "type": "string",
                 "mutable": false,
@@ -274,6 +315,25 @@ export class DsLink {
                 "setter": false,
                 "attribute": "lang",
                 "reflect": false
+            },
+            "linkAriaLabel": {
+                "type": "string",
+                "mutable": false,
+                "complexType": {
+                    "original": "string",
+                    "resolved": "string",
+                    "references": {}
+                },
+                "required": false,
+                "optional": true,
+                "docs": {
+                    "tags": [],
+                    "text": ""
+                },
+                "getter": false,
+                "setter": false,
+                "attribute": "aria-label",
+                "reflect": false
             }
         };
     }

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

@@ -19,15 +19,18 @@ export const Back = {
         text: 'Back',
         href: '#',
         icon: 'arrow_back',
-        iconPosition: 'start'
+        iconPosition: 'start',
+        iconTitle: 'Arrow back',
     }
 };
 export const Download = {
     args: {
-        text: 'Link to download a file',
+        text: 'Brand book (pdf)',
         href: '#',
         icon: 'download',
         iconPosition: 'start',
+        iconTitle: 'Download',
+        iconHidden: false,
         variant: 'standalone',
         size: 'xLarge',
         weight: 'semibold',
@@ -39,6 +42,7 @@ export const StandaloneBoldLinkWithIcon = {
         text: 'Standalone bold link with icon',
         href: '#',
         icon: 'arrow_forward',
+        iconTitle: 'Arrow forward',
         variant: 'standalone',
         size: '2xLarge',
         weight: 'bold'

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

@@ -66,8 +66,8 @@ export const OpensInANewTab = {
 export const IconPosition = {
     render: () => html `
     <div>
-      <div><ds-link href="#" text="Link text" icon="download" icon-position="start"></ds-link></div>
-      <div><ds-link href="#" text="Link text" icon="download" icon-position="end"></ds-link></div>
+      <div><ds-link href="#" text="Link text" icon="download" icon-position="start" icon-title="Download icon"></ds-link></div>
+      <div><ds-link href="#" text="Link text" icon="download" icon-position="end" icon-title="Download icon"></ds-link></div>
     </div>
   `
 };

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

@@ -1,16 +1,17 @@
 import { icons } from "../../../00-foundations/icons/iconList";
-import { getAriaAttributeArgTypes } from "../../../../utils/attributes";
+import { getAriaAttributeArgTypes } from "../../../../utils/attributes/attributes";
 const anchorAriaAttributes = [
     'aria-current',
-    'aria-describedby',
     'aria-haspopup',
-    'aria-label',
-    'aria-labelledby'
 ];
 const anchorAriaAttributeArgTypes = getAriaAttributeArgTypes(anchorAriaAttributes);
 const meta = {
     title: 'Base Components/Link',
     component: 'ds-link',
+    argTypes: {
+        text: { control: 'text' },
+        href: { control: 'text' },
+    }
 };
 export default meta;
 export const Default = {
@@ -60,6 +61,12 @@ export const Playground = {
             control: 'select',
             options: ['start', 'end'],
         },
+        iconTitle: {
+            control: 'text',
+        },
+        iconHidden: {
+            control: 'boolean',
+        },
         download: {
             control: 'boolean'
         },
@@ -67,6 +74,10 @@ export const Playground = {
             control: 'text',
             description: 'ISO 639 language code. Known languages are: "en", "fi", "sv". When undefined will use browser\'s language.',
         },
+        linkAriaLabel: {
+            name: 'aria-label',
+            control: 'text',
+        },
         ...anchorAriaAttributeArgTypes,
     },
 };