@uh-design-system/component-library 0.2.4 → 0.3.1

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

@@ -57,14 +57,14 @@ export class DsButton {
         }
     };
     render() {
-        const classes = classNames(`${this.variant} ${this.colour} ${this.size}`, {
+        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,
         });
         const iconSize = this.size === 'small' ? '1rem' : undefined;
         const isDisabled = this.disabled || this.ariaDisabled === 'true';
-        return (h("button", { key: 'f987b8884e1aab8959c2157039996019b42f826a', 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: '6b87d0e8e45f28f5a3dfb54cbb69d6c7acc3ef15', name: "prefix" }, this.icon && this.iconPosition === 'start' && h("ds-icon", { key: '32dd7550a1b1203e7a6b24dd0e7ef4516ee6ed45', name: this.icon, size: iconSize })), this.value && h("span", { key: 'ba87d4898f376ff0b1d4fa43258c36fb034ee88c', class: "button-value" }, this.value), h("slot", { key: 'ba2a58d944a9e11aaade04d25dad9c544a5966ea', name: "suffix" }, this.icon && this.iconPosition === 'end' && h("ds-icon", { key: 'e30f0970737c93c2153e9ae68c87c47c3c4a2329', name: this.icon, size: iconSize }))));
+        return (h("button", { key: '46e6657656748f136011c38efecbd65ccfd68f71', 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: '564dbf073e00ffb607ad590ec733feec0d48561a', name: "prefix" }, this.icon && this.iconPosition === 'start' && h("ds-icon", { key: '9a52ef760ad5e040d5c6a80522271c13c67b76ab', name: this.icon, size: iconSize })), this.value && h("span", { key: '68d704a53e9afe7d27c022f58be47df3d0fe4de6', class: "button-value" }, this.value), h("slot", { key: 'd529e83212c31f7502afc748e9666b30a276c99c', name: "suffix" }, this.icon && this.iconPosition === 'end' && h("ds-icon", { key: '08969d9219026744a7eec5a3d5928b4b4ceb6298', name: this.icon, size: iconSize }))));
     }
     static get is() { return "ds-button"; }
     static get encapsulation() { return "scoped"; }

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

@@ -1,4 +1,3 @@
-import { html } from "lit";
 const meta = {
     title: 'Base Components/Button/Features',
     component: 'ds-button',
@@ -56,13 +55,10 @@ Small.args = {
     value: 'Small',
     size: 'small',
 };
-export const Disabled = {
-    render: () => html `
-    <div class="button-group">
-      <ds-button disabled value="disabled"></ds-button>
-      <ds-button aria-disabled="true" value="aria-disabled"></ds-button>
-    </div>
-  `,
+export const Disabled = {};
+Disabled.args = {
+    value: 'Disabled',
+    disabled: true,
 };
 export const IconStart = {};
 IconStart.args = {

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

@@ -1,3 +1,7 @@
 :host {
-  display: inline;
+  display: flex;
 }
+
+.ds-icon--container {
+  display: flex;
+}

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

@@ -1,10 +1,11 @@
 import { Fragment, h } from "@stencil/core";
 import { icons } from "../../../components/00-foundations/icons/iconList";
+import { remToPx } from "../../../utils/utils";
 export class DsIcon {
     name;
     colour;
     size = '1.5rem';
-    title = 'Icon';
+    dsTitle = 'Icon';
     role = 'img';
     hidden = true;
     message = '';
@@ -33,7 +34,9 @@ export class DsIcon {
         const size = this.size || '1.5rem';
         const colour = this.getIconColour() || 'currentColor';
         const role = this.role || 'img';
-        const title = this.title || '';
+        const title = this.dsTitle || '';
+        svgElement.setAttribute('width', remToPx(size));
+        svgElement.setAttribute('height', remToPx(size));
         svgElement.setAttribute('style', `fill: ${colour}; width: ${size}; height: ${size};`);
         svgElement.setAttribute('role', role);
         const titleText = title || 'Icon';
@@ -45,13 +48,13 @@ export class DsIcon {
         }
     }
     render() {
-        return (h(Fragment, { key: '8d8a1304c6293c49ecc830ec02227dff9852b8c5' }, h("span", { key: '83f992b6b58f24398fa84e0fe62a62e60ea72e1b', class: "icon-container", innerHTML: this.getIcon(), "aria-hidden": this.hidden ? 'true' : 'false' })));
+        return (h(Fragment, { key: '237ef9992d67c967fe88d108c8bc2e38ce5c32bf' }, h("span", { key: '995f53c4fe20d616270f2d70e927065f794c5860', class: 'ds-icon--container', innerHTML: this.getIcon(), "aria-hidden": this.hidden ? 'true' : 'false' })));
     }
     static get is() { return "ds-icon"; }
     static get encapsulation() { return "shadow"; }
     static get originalStyleUrls() {
         return {
-            "$": ["ds-icon.css"]
+            "$": ["ds-icon.scss"]
         };
     }
     static get styleUrls() {
@@ -119,7 +122,7 @@ export class DsIcon {
                 "reflect": false,
                 "defaultValue": "'1.5rem'"
             },
-            "title": {
+            "dsTitle": {
                 "type": "string",
                 "mutable": false,
                 "complexType": {
@@ -135,7 +138,7 @@ export class DsIcon {
                 },
                 "getter": false,
                 "setter": false,
-                "attribute": "title",
+                "attribute": "ds-title",
                 "reflect": false,
                 "defaultValue": "'Icon'"
             },

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

@@ -25,7 +25,7 @@ const meta = {
             },
             name: 'Size',
         },
-        title: {
+        dsTitle: {
             control: {
                 type: 'text',
             },
@@ -50,6 +50,6 @@ export const Default = {};
 Default.args = {
     name: 'archive',
     role: 'img',
-    title: 'Icon',
+    dsTitle: 'Icon',
     hidden: true,
 };

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

@@ -0,0 +1,158 @@
+:root {
+  --ds-breakpoint-xSmall: 20rem;
+  --ds-breakpoint-small: 30rem;
+  --ds-breakpoint-medium: 60rem;
+  --ds-breakpoint-large: 75rem;
+  --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-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;
+  }
+}
+.bodyText {
+  line-height: 1.5;
+}
+.bodyText--2xLarge {
+  font-size: 1.375rem;
+}
+.bodyText--xLarge {
+  font-size: 1.25rem;
+}
+.bodyText--large {
+  font-size: 1.125rem;
+}
+.bodyText--medium {
+  font-size: 1rem;
+}
+.bodyText--small {
+  font-size: 0.875rem;
+}
+.bodyText--xSmall {
+  font-size: 0.75rem;
+}
+
+:host {
+  display: inline-block;
+}
+
+.ds-link {
+  display: inline-flex;
+  align-items: center;
+  color: var(--ds-textColor-link);
+  font-weight: var(--ds-fontWeight-regular);
+  letter-spacing: var(--ds-letterSpacing-wide);
+  text-decoration-line: underline;
+  text-decoration-style: solid;
+  text-decoration-skip-ink: auto;
+  text-decoration-thickness: 7%;
+  text-underline-offset: 12%;
+  text-underline-position: from-font;
+}
+.ds-link--semibold {
+  font-weight: var(--ds-fontWeight-semibold);
+}
+.ds-link--bold {
+  font-weight: var(--ds-fontWeight-bold);
+}
+.ds-link__icon {
+  height: 1em;
+  width: 1em;
+}
+.ds-link__icon--start-inline {
+  margin-right: var(--ds-spacing-3xSmall);
+}
+.ds-link__icon--start-standalone {
+  margin-right: var(--ds-spacing-2xSmall);
+}
+.ds-link__icon--end-inline {
+  margin-left: var(--ds-spacing-3xSmall);
+}
+.ds-link__icon--end-standalone {
+  margin-left: var(--ds-spacing-2xSmall);
+}
+.ds-link:hover, .ds-link:active {
+  text-decoration-thickness: 13%;
+  text-underline-offset: 12%;
+}
+.ds-link:hover {
+  color: var(--ds-textColor-link-hover);
+}
+.ds-link:active {
+  color: var(--ds-textColor-link-active);
+}
+.ds-link:focus-visible {
+  outline-style: solid;
+  outline-width: var(--ds-borderWidth-thin);
+  outline-offset: var(--ds-borderWidth-thin);
+  outline-color: var(--ds-palette-black);
+}
+.ds-link:visited {
+  color: var(--ds-textColor-link-visited);
+}
+.ds-link--standalone {
+  color: var(--ds-textColor-link--standalone);
+  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--standalone-hover);
+}
+.ds-link--standalone:active {
+  color: var(--ds-textColor-link--standalone-active);
+}
+.ds-link--standalone:focus-visible {
+  color: var(--ds-textColor-link--standalone-focus);
+}
+.ds-link--standalone:visited {
+  color: var(--ds-textColor-link--standalone);
+}

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

@@ -0,0 +1,281 @@
+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";
+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';
+    href;
+    target;
+    download;
+    lang;
+    componentWillLoad() {
+        this.inheritedAttributes = inheritAriaAttributes(this.el);
+        if (opensInNewTab(this.target)) {
+            this.icon = 'open_in_new';
+            this.iconPosition = 'end';
+            this.rel = 'noopener noreferrer';
+        }
+    }
+    render() {
+        const classes = classNames('ds-link', `ds-link--${this.weight}`, `ds-link--${this.variant}`, {
+            [`bodyText--${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: '58a12ff2e845e9acf84c3917b5826b014ffb0919', href: this.href, class: classes, rel: this.rel, target: this.target, download: this.download, ...this.inheritedAttributes }, h("slot", { key: '88f6f827f0d37bb358a596c61a27778d3e7e9032', name: "iconStart" }, this.icon && this.iconPosition === 'start' && h("ds-icon", { key: '82ae7997d3e03e89260f3aabd9fe953d4f252f79', name: this.icon, class: iconClasses, size: "1em" })), this.text, h("slot", { key: 'ad1dc790a43c467d40a40882a55b5f7ad26d52fa', name: "iconEnd" }, this.icon && this.iconPosition === 'end' && h("ds-icon", { key: 'fbecfd82f1cf0994bde85d554a07e6210370f457', name: this.icon, class: iconClasses, size: "1em" })), opensInNewTab(this.target) && (h("ds-visually-hidden", { key: 'f3de3a15b89e77f2838173a541a83c938f19b10d', id: this.visuallyHiddenAssistiveTextId }, visuallyHiddenAssistiveText(this.lang ?? document.documentElement.lang)))));
+    }
+    static get is() { return "ds-link"; }
+    static get encapsulation() { return "shadow"; }
+    static get originalStyleUrls() {
+        return {
+            "$": ["ds-link.scss"]
+        };
+    }
+    static get styleUrls() {
+        return {
+            "$": ["ds-link.css"]
+        };
+    }
+    static get properties() {
+        return {
+            "text": {
+                "type": "string",
+                "mutable": false,
+                "complexType": {
+                    "original": "string",
+                    "resolved": "string",
+                    "references": {}
+                },
+                "required": false,
+                "optional": true,
+                "docs": {
+                    "tags": [],
+                    "text": ""
+                },
+                "getter": false,
+                "setter": false,
+                "attribute": "text",
+                "reflect": false
+            },
+            "size": {
+                "type": "string",
+                "mutable": false,
+                "complexType": {
+                    "original": "LinkSize",
+                    "resolved": "\"2xLarge\" | \"large\" | \"medium\" | \"small\" | \"xLarge\" | \"xSmall\"",
+                    "references": {
+                        "LinkSize": {
+                            "location": "global",
+                            "id": "global::LinkSize"
+                        }
+                    }
+                },
+                "required": false,
+                "optional": true,
+                "docs": {
+                    "tags": [],
+                    "text": ""
+                },
+                "getter": false,
+                "setter": false,
+                "attribute": "size",
+                "reflect": false
+            },
+            "variant": {
+                "type": "string",
+                "mutable": false,
+                "complexType": {
+                    "original": "LinkVariant",
+                    "resolved": "\"inline\" | \"standalone\"",
+                    "references": {
+                        "LinkVariant": {
+                            "location": "global",
+                            "id": "global::LinkVariant"
+                        }
+                    }
+                },
+                "required": false,
+                "optional": false,
+                "docs": {
+                    "tags": [],
+                    "text": ""
+                },
+                "getter": false,
+                "setter": false,
+                "attribute": "variant",
+                "reflect": false,
+                "defaultValue": "'inline'"
+            },
+            "weight": {
+                "type": "string",
+                "mutable": false,
+                "complexType": {
+                    "original": "LinkWeight",
+                    "resolved": "\"bold\" | \"regular\" | \"semibold\"",
+                    "references": {
+                        "LinkWeight": {
+                            "location": "global",
+                            "id": "global::LinkWeight"
+                        }
+                    }
+                },
+                "required": false,
+                "optional": false,
+                "docs": {
+                    "tags": [],
+                    "text": ""
+                },
+                "getter": false,
+                "setter": false,
+                "attribute": "weight",
+                "reflect": false,
+                "defaultValue": "'regular'"
+            },
+            "icon": {
+                "type": "string",
+                "mutable": true,
+                "complexType": {
+                    "original": "string",
+                    "resolved": "string",
+                    "references": {}
+                },
+                "required": false,
+                "optional": false,
+                "docs": {
+                    "tags": [],
+                    "text": ""
+                },
+                "getter": false,
+                "setter": false,
+                "attribute": "icon",
+                "reflect": false,
+                "defaultValue": "''"
+            },
+            "iconPosition": {
+                "type": "string",
+                "mutable": true,
+                "complexType": {
+                    "original": "LinkIconPosition",
+                    "resolved": "\"end\" | \"start\"",
+                    "references": {
+                        "LinkIconPosition": {
+                            "location": "global",
+                            "id": "global::LinkIconPosition"
+                        }
+                    }
+                },
+                "required": false,
+                "optional": false,
+                "docs": {
+                    "tags": [],
+                    "text": ""
+                },
+                "getter": false,
+                "setter": false,
+                "attribute": "icon-position",
+                "reflect": false,
+                "defaultValue": "'end'"
+            },
+            "href": {
+                "type": "string",
+                "mutable": false,
+                "complexType": {
+                    "original": "string",
+                    "resolved": "string",
+                    "references": {}
+                },
+                "required": true,
+                "optional": false,
+                "docs": {
+                    "tags": [],
+                    "text": ""
+                },
+                "getter": false,
+                "setter": false,
+                "attribute": "href",
+                "reflect": false
+            },
+            "target": {
+                "type": "string",
+                "mutable": false,
+                "complexType": {
+                    "original": "LinkTarget",
+                    "resolved": "\"_blank\" | \"_parent\" | \"_self\" | \"_top\" | \"_unfencedTop\"",
+                    "references": {
+                        "LinkTarget": {
+                            "location": "global",
+                            "id": "global::LinkTarget"
+                        }
+                    }
+                },
+                "required": false,
+                "optional": true,
+                "docs": {
+                    "tags": [],
+                    "text": ""
+                },
+                "getter": false,
+                "setter": false,
+                "attribute": "target",
+                "reflect": false
+            },
+            "download": {
+                "type": "boolean",
+                "mutable": false,
+                "complexType": {
+                    "original": "boolean",
+                    "resolved": "boolean",
+                    "references": {}
+                },
+                "required": false,
+                "optional": true,
+                "docs": {
+                    "tags": [],
+                    "text": ""
+                },
+                "getter": false,
+                "setter": false,
+                "attribute": "download",
+                "reflect": false
+            },
+            "lang": {
+                "type": "string",
+                "mutable": false,
+                "complexType": {
+                    "original": "LinkLang",
+                    "resolved": "\"en\" | \"fi\" | \"sv\"",
+                    "references": {
+                        "LinkLang": {
+                            "location": "global",
+                            "id": "global::LinkLang"
+                        }
+                    }
+                },
+                "required": false,
+                "optional": true,
+                "docs": {
+                    "tags": [],
+                    "text": ""
+                },
+                "getter": false,
+                "setter": false,
+                "attribute": "lang",
+                "reflect": false
+            }
+        };
+    }
+    static get elementRef() { return "el"; }
+}

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

@@ -0,0 +1,53 @@
+import { html } from "lit";
+const meta = {
+    title: 'Base Components/Link/Examples',
+    component: 'ds-link',
+};
+export default meta;
+export const Inline = {
+    render: () => html `
+    Text with <ds-link href="#" text="inline link"></ds-link>.
+  `
+};
+export const OpenInANewTab = {
+    render: () => html `
+    Text with <ds-link href="#" target="_blank" text="open in a new tab inline link"></ds-link>.
+  `
+};
+export const Back = {
+    args: {
+        text: 'Back',
+        href: '#',
+        icon: 'arrow_back',
+        iconPosition: 'start'
+    }
+};
+export const Download = {
+    args: {
+        text: 'Link to download a file',
+        href: '#',
+        icon: 'download',
+        iconPosition: 'start',
+        variant: 'standalone',
+        size: 'xLarge',
+        weight: 'semibold',
+        download: true
+    }
+};
+export const StandaloneBoldLinkWithIcon = {
+    args: {
+        text: 'Standalone bold link with icon',
+        href: '#',
+        icon: 'arrow_forward',
+        variant: 'standalone',
+        size: '2xLarge',
+        weight: 'bold'
+    }
+};
+export const NavigationLink = {
+    args: {
+        text: 'Navigation link',
+        href: '#',
+        variant: 'standalone'
+    }
+};