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

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>
+  `
+};

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

@@ -0,0 +1,72 @@
+import { icons } from "../../../00-foundations/icons/iconList";
+import { getAriaAttributeArgTypes } from "../../../../utils/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',
+};
+export default meta;
+export const Default = {
+    args: {
+        text: 'Link text',
+        href: '#',
+    },
+};
+export const Playground = {
+    args: {
+        text: 'Link text',
+        href: '#',
+    },
+    argTypes: {
+        text: { control: 'text' },
+        href: { control: 'text' },
+        target: { control: 'text' },
+        size: {
+            control: 'select',
+            options: ['2xLarge', 'xLarge', 'large', 'medium', 'small', 'xSmall'],
+            table: {
+                type: { summary: 'select' },
+                defaultValue: { summary: 'medium' },
+            },
+        },
+        variant: {
+            control: 'select',
+            options: ['inline', 'standalone'],
+            table: {
+                type: { summary: 'select' },
+                defaultValue: { summary: 'inline' },
+            },
+        },
+        weight: {
+            control: 'select',
+            options: ['regular', 'semibold', 'bold'],
+            table: {
+                type: { summary: 'select' },
+                defaultValue: { summary: 'regular' },
+            },
+        },
+        icon: {
+            control: 'select',
+            options: icons.map(icon => icon.name),
+        },
+        iconPosition: {
+            control: 'select',
+            options: ['start', 'end'],
+        },
+        download: {
+            control: 'boolean'
+        },
+        lang: {
+            control: 'text',
+            description: 'ISO 639 language code. Known languages are: "en", "fi", "sv". When undefined will use browser\'s language.',
+        },
+        ...anchorAriaAttributeArgTypes,
+    },
+};

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

@@ -0,0 +1,142 @@
+: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-with-arrow {
+  display: inline-flex;
+  align-items: center;
+  color: var(--ds-textColor-link);
+  letter-spacing: var(--ds-letterSpacing-wide);
+  font-weight: var(--ds-fontWeight-semibold);
+  font-size: var(--ds-fontSize-16);
+  text-decoration-line: none;
+}
+@media (min-width: 30rem) {
+  .ds-link-with-arrow {
+    font-size: var(--ds-fontSize-18);
+  }
+}
+.ds-link-with-arrow__icon {
+  display: inline-flex;
+  width: 2em;
+  height: 2em;
+  line-height: 0;
+  align-items: center;
+  justify-content: center;
+  color: var(--ds-textColor-white);
+  background-color: var(--ds-bgColor-primary);
+}
+.ds-link-with-arrow__icon--start {
+  margin-right: var(--ds-spacing-xSmall);
+}
+.ds-link-with-arrow__icon--end {
+  margin-left: var(--ds-spacing-xSmall);
+}
+:hover slot > .ds-link-with-arrow__icon {
+  outline: 10px solid;
+  background-color: var(--ds-bgColor-primary-hover);
+}
+:active slot > .ds-link-with-arrow__icon {
+  background-color: var(--ds-bgColor-primary-active);
+}
+.ds-link-with-arrow:hover, .ds-link-with-arrow:active {
+  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-with-arrow:hover {
+  color: var(--ds-textColor-link-hover);
+}
+.ds-link-with-arrow:active, .ds-link-with-arrow:focus-visible {
+  color: var(--ds-textColor-link-active);
+}
+.ds-link-with-arrow:focus-visible {
+  outline-style: solid;
+  outline-width: var(--ds-borderWidth-thin);
+  outline-offset: var(--ds-borderWidth-thin);
+  outline-color: var(--ds-palette-black);
+}

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

@@ -0,0 +1,161 @@
+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 DsLinkWithArrow {
+    inheritedAttributes = {};
+    icon = 'arrow_forward';
+    rel;
+    visuallyHiddenAssistiveTextId = visuallyHiddenAssistiveTextIdGenerator.next().value;
+    el;
+    text;
+    iconPosition = 'start';
+    href;
+    target;
+    lang;
+    componentWillLoad() {
+        this.inheritedAttributes = inheritAriaAttributes(this.el);
+        if (opensInNewTab(this.target)) {
+            this.icon = 'arrow_outward';
+            this.rel = 'noopener noreferrer';
+        }
+    }
+    render() {
+        const classes = classNames('ds-link-with-arrow');
+        const iconClasses = classNames('ds-link-with-arrow__icon', {
+            'ds-link-with-arrow__icon--start': this.iconPosition === 'start',
+            'ds-link-with-arrow__icon--end': this.iconPosition === 'end',
+        });
+        return (h("a", { key: '57aac1b83578c9067b7b49404dd098940d1617bf', href: this.href, class: classes, rel: this.rel, target: this.target, ...this.inheritedAttributes }, h("slot", { key: '8e7ef7f70709c62337ea15df531dc10dcd51dacc', name: "iconStart" }, this.iconPosition === 'start' && h("ds-icon", { key: '3ba6529c60900085941555c5eea469c6f91b4d2f', name: this.icon, class: iconClasses, size: "1.4em" })), this.text, h("slot", { key: '69b8b9149b4cdf0dc541e67dd853fd024c9ee79b', name: "iconStart" }, this.iconPosition === 'end' && h("ds-icon", { key: 'ba872300195a151cd308dc56263fa7a7915c5782', name: this.icon, class: iconClasses, size: "1.4em" })), opensInNewTab(this.target) && (h("ds-visually-hidden", { key: 'dcbe006abbf064856849132b291e1372a743582e', id: this.visuallyHiddenAssistiveTextId }, visuallyHiddenAssistiveText(this.lang ?? document.documentElement.lang)))));
+    }
+    static get is() { return "ds-link-with-arrow"; }
+    static get encapsulation() { return "shadow"; }
+    static get originalStyleUrls() {
+        return {
+            "$": ["ds-link-with-arrow.scss"]
+        };
+    }
+    static get styleUrls() {
+        return {
+            "$": ["ds-link-with-arrow.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
+            },
+            "iconPosition": {
+                "type": "string",
+                "mutable": false,
+                "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": "'start'"
+            },
+            "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
+            },
+            "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-with-arrow/stories/ds-arrow-link.examples.stories.js

@@ -0,0 +1,33 @@
+import { expect } from "@storybook/test";
+import { html } from "lit";
+import { getShadowRoot } from "../../../../utils/tests/testUtils";
+const meta = {
+    title: 'Base Components/LinkWithArrow/Examples',
+    component: 'ds-link-with-arrow',
+};
+export default meta;
+export const OpenInANewTab = {
+    args: {
+        text: 'Link with arrow icon',
+        href: '#',
+        target: '_blank',
+    },
+    play: async ({ canvasElement, step }) => {
+        const shadowRoot = await getShadowRoot(canvasElement, 'ds-link-with-arrow');
+        const anchorElem = shadowRoot.querySelector('a');
+        const visuallyHiddenElem = shadowRoot.querySelector('ds-visually-hidden');
+        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');
+        });
+    }
+};
+export const IconAtTheEnd = {
+    render: () => html `
+    <div style="display: flex; background-color: #F7F7F7; justify-content: end; align-items: end; outline: 1px solid; padding: 1em 0.6em; height: 200px; width: 100%;">
+      <ds-link-with-arrow text="Link with arrow icon" href="#" icon-position="end"></ds-link-with-arrow>
+    </div>
+  `
+};

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

@@ -0,0 +1,19 @@
+const meta = {
+    title: 'Base Components/LinkWithArrow/Features',
+    component: 'ds-link-with-arrow',
+};
+export default meta;
+export const IconPositionStart = {
+    args: {
+        text: 'Link with arrow icon',
+        href: '#',
+        iconPosition: 'start',
+    },
+};
+export const IconPositionEnd = {
+    args: {
+        text: 'Link with arrow icon',
+        href: '#',
+        iconPosition: 'end',
+    },
+};

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

@@ -0,0 +1,40 @@
+import { getAriaAttributeArgTypes } from "../../../../utils/attributes";
+const anchorAriaAttributes = [
+    'aria-current',
+    'aria-describedby',
+    'aria-haspopup',
+    'aria-label',
+    'aria-labelledby'
+];
+const anchorAriaAttributeArgTypes = getAriaAttributeArgTypes(anchorAriaAttributes);
+const meta = {
+    title: 'Base Components/LinkWithArrow',
+    component: 'ds-link-with-arrow',
+};
+export default meta;
+export const Default = {
+    args: {
+        text: 'Link with arrow icon',
+        href: '#',
+    },
+};
+export const Playground = {
+    args: {
+        text: 'Link with arrow icon',
+        href: '#',
+    },
+    argTypes: {
+        text: { control: 'text' },
+        href: { control: 'text' },
+        target: { control: 'text' },
+        iconPosition: {
+            control: 'select',
+            options: ['start', 'end'],
+        },
+        lang: {
+            control: 'text',
+            description: 'ISO 639 language code. Known languages are: "en", "fi", "sv". When undefined will use browser\'s language.',
+        },
+        ...anchorAriaAttributeArgTypes,
+    },
+};