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

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

@@ -0,0 +1,224 @@
+: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-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;
+}
+
+.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:focus-visible, .ds-link:focus-within {
+  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);
+}
+.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:visited {
+  color: var(--ds-textColor-link-visited);
+}
+.ds-link--standalone {
+  color: var(--ds-textColor-link);
+  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);
+}
+.ds-link--standalone:active {
+  color: var(--ds-textColor-link-active);
+}
+.ds-link--standalone:focus-visible {
+  color: var(--ds-textColor-link);
+}
+.ds-link--standalone:visited {
+  color: var(--ds-textColor-link);
+}

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;
+    language;
+    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: '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)))));
+    }
+    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
+            },
+            "language": {
+                "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'
+    }
+};

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

@@ -0,0 +1,73 @@
+import { expect } from "@storybook/test";
+import { getShadowRoot } from "../../../../utils/tests/testUtils";
+import { html } from "lit";
+const meta = {
+    title: 'Base Components/Link/Features',
+    component: 'ds-link',
+};
+export default meta;
+export const Inline = {
+    args: {
+        text: 'Link text',
+        href: '#',
+        variant: 'inline'
+    },
+};
+export const Standalone = {
+    args: {
+        text: 'Link text',
+        href: '#',
+        variant: 'standalone'
+    },
+};
+export const Size = {
+    render: () => html `
+    <div>
+      <div><ds-link href="#" text="Link text" size="2xLarge"></ds-link></div>
+      <div><ds-link href="#" text="Link text" size="xLarge"></ds-link></div>
+      <div><ds-link href="#" text="Link text" size="large"></ds-link></div>
+      <div><ds-link href="#" text="Link text" size="medium"></ds-link></div>
+      <div><ds-link href="#" text="Link text" size="small"></ds-link></div>
+      <div><ds-link href="#" text="Link text" size="xSmall"></ds-link></div>
+    </div>
+  `
+};
+export const Weight = {
+    render: () => html `
+    <div>
+      <div><ds-link href="#" text="Link text" weight="regular"></ds-link></div>
+      <div><ds-link href="#" text="Link text" weight="semibold"></ds-link></div>
+      <div><ds-link href="#" text="Link text" weight="bold"></ds-link></div>
+    </div>
+  `
+};
+export const OpensInANewTab = {
+    args: {
+        text: 'Link text',
+        href: '#',
+        target: '_blank',
+    },
+    play: async ({ canvasElement, step }) => {
+        const shadowRoot = await getShadowRoot(canvasElement, 'ds-link');
+        const anchorElem = shadowRoot.querySelector('a');
+        const visuallyHiddenElem = shadowRoot.querySelector('ds-visually-hidden');
+        const iconEnd = shadowRoot.querySelector('slot[name=iconEnd]');
+        await step('Anchor should have attribute rel with value "noopener noreferrer"', () => {
+            expect(anchorElem.rel).toBe('noopener noreferrer');
+        });
+        await step('Anchor should have a visually hidden assistive text', () => {
+            expect(visuallyHiddenElem.textContent).toBe('Opens in a new tab');
+        });
+        await step('Has an end icon', async () => {
+            expect(iconEnd).toBeInTheDocument();
+        });
+    }
+};
+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>
+  `
+};