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

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'
+        },
+        language: {
+            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,208 @@
+: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-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;
+}
+.ds-link-with-arrow:focus-visible, .ds-link-with-arrow: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);
+}
+@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);
+}

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;
+    language;
+    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: 'aa1a1272c0323f286e590f1a366f2101410a58c3', href: this.href, class: classes, rel: this.rel, target: this.target, ...this.inheritedAttributes }, h("slot", { key: 'e348b24c8c5418cf0f33e18c5337066b6eb579a2', name: "iconStart" }, this.iconPosition === 'start' && h("ds-icon", { key: 'e523092b3dc32f936139c53e74195b927a219c0f', name: this.icon, class: iconClasses, size: "1.4em" })), this.text, h("slot", { key: '0ec9d65ee348aa75108f9d87474551b6b3c4a0bb', name: "iconStart" }, this.iconPosition === 'end' && h("ds-icon", { key: '55b5ef6cc061bea9f68d784e4e9fb0ebdac0002c', name: this.icon, class: iconClasses, size: "1.4em" })), opensInNewTab(this.target) && (h("ds-visually-hidden", { key: '8c92b801ac0a1d52e12fead3c89703d41f90fa6a', id: this.visuallyHiddenAssistiveTextId }, visuallyHiddenAssistiveText(this.language ?? 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
+            },
+            "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-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'],
+        },
+        language: {
+            control: 'text',
+            description: 'ISO 639 language code. Known languages are: "en", "fi", "sv". When undefined will use browser\'s language.',
+        },
+        ...anchorAriaAttributeArgTypes,
+    },
+};