@uh-design-system/component-library 0.5.2 → 0.6.0

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

@@ -6,52 +6,52 @@ const meta = {
 export default meta;
 export const Inline = {
     render: () => html `
-    Text with <ds-link href="#" text="inline link"></ds-link>.
+    Text with <ds-link ds-href="#" ds-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>.
+    Text with <ds-link ds-href="#" ds-target="_blank" ds-text="open in a new tab inline link"></ds-link>.
   `
 };
 export const Back = {
     args: {
-        text: 'Back',
-        href: '#',
-        icon: 'arrow_back',
-        iconPosition: 'start',
-        iconTitle: 'Arrow back',
+        dsText: 'Back',
+        dsHref: '#',
+        dsIcon: 'arrow_back',
+        dsIconPosition: 'start',
+        dsIconTitle: 'Arrow back',
     }
 };
 export const Download = {
     args: {
-        text: 'Brand book (pdf)',
-        href: '#',
-        icon: 'download',
-        iconPosition: 'start',
-        iconTitle: 'Download',
-        iconHidden: false,
-        variant: 'standalone',
-        size: 'xLarge',
-        weight: 'semibold',
-        download: true
+        dsText: 'Brand book (pdf)',
+        dsHref: '#',
+        dsIcon: 'download',
+        dsIconPosition: 'start',
+        dsIconTitle: 'Download',
+        dsIconHidden: false,
+        dsVariant: 'standalone',
+        dsSize: 'xLarge',
+        dsWeight: 'semibold',
+        dsDownload: true
     }
 };
 export const StandaloneBoldLinkWithIcon = {
     args: {
-        text: 'Standalone bold link with icon',
-        href: '#',
-        icon: 'arrow_forward',
-        iconTitle: 'Arrow forward',
-        variant: 'standalone',
-        size: '2xLarge',
-        weight: 'bold'
+        dsText: 'Standalone bold link with icon',
+        dsHref: '#',
+        dsIcon: 'arrow_forward',
+        dsIconTitle: 'Arrow forward',
+        dsVariant: 'standalone',
+        dsSize: '2xLarge',
+        dsWeight: 'bold'
     }
 };
 export const NavigationLink = {
     args: {
-        text: 'Navigation link',
-        href: '#',
-        variant: 'standalone'
+        dsText: 'Navigation link',
+        dsHref: '#',
+        dsVariant: 'standalone'
     }
 };

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

@@ -8,50 +8,67 @@ const meta = {
 export default meta;
 export const Inline = {
     args: {
-        text: 'Link text',
-        href: '#',
-        variant: 'inline'
+        dsText: 'Link text',
+        dsHref: '#',
+        dsVariant: 'inline'
     },
 };
 export const Standalone = {
     args: {
-        text: 'Link text',
-        href: '#',
-        variant: 'standalone'
+        dsText: 'Link text',
+        dsHref: '#',
+        dsVariant: '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><ds-link ds-href="#" ds-text="Link text" ds-size="2xLarge"></ds-link></div>
+      <div><ds-link ds-href="#" ds-text="Link text" ds-size="xLarge"></ds-link></div>
+      <div><ds-link ds-href="#" ds-text="Link text" ds-size="large"></ds-link></div>
+      <div><ds-link ds-href="#" ds-text="Link text" ds-size="medium"></ds-link></div>
+      <div><ds-link ds-href="#" ds-text="Link text" ds-size="small"></ds-link></div>
+      <div><ds-link ds-href="#" ds-text="Link text" ds-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><ds-link ds-href="#" ds-text="Link text" ds-weight="regular"></ds-link></div>
+      <div><ds-link ds-href="#" ds-text="Link text" ds-weight="semibold"></ds-link></div>
+      <div><ds-link ds-href="#" ds-text="Link text" ds-weight="bold"></ds-link></div>
     </div>
   `
 };
+export const Black = {
+    args: {
+        dsText: 'Link text',
+        dsHref: '#',
+        dsColour: 'black'
+    },
+};
+export const White = {
+    args: {
+        dsText: 'Link text',
+        dsHref: '#',
+        dsColour: 'white'
+    },
+    parameters: {
+        backgrounds: { default: 'Black 90%' },
+    }
+};
 export const OpensInANewTab = {
     args: {
-        text: 'Link text',
-        href: '#',
-        target: '_blank',
+        dsText: 'Link text',
+        dsHref: '#',
+        dsTarget: '_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]');
+        const iconEnd = shadowRoot.querySelector('slot[name=suffix]');
         await step('Anchor should have attribute rel with value "noopener noreferrer"', () => {
             expect(anchorElem.rel).toBe('noopener noreferrer');
         });
@@ -66,8 +83,8 @@ export const OpensInANewTab = {
 export const IconPosition = {
     render: () => html `
     <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><ds-link ds-href="#" ds-text="Link text" ds-icon="download" ds-icon-position="start" ds-icon-title="Download icon"></ds-link></div>
+      <div><ds-link ds-href="#" ds-text="Link text" ds-icon="download" ds-icon-position="end" ds-icon-title="Download icon"></ds-link></div>
     </div>
   `
 };

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

@@ -1,83 +1,24 @@
 import { icons } from "../../../00-foundations/icons/iconList";
-import { getAriaAttributeArgTypes } from "../../../../utils/attributes/attributes";
-const anchorAriaAttributes = [
-    'aria-current',
-    'aria-haspopup',
-];
-const anchorAriaAttributeArgTypes = getAriaAttributeArgTypes(anchorAriaAttributes);
 const meta = {
     title: 'Base Components/Link',
     component: 'ds-link',
     argTypes: {
-        text: { control: 'text' },
-        href: { control: 'text' },
+        dsIcon: {
+            control: 'select',
+            options: icons.map(icon => icon.name),
+        },
     }
 };
 export default meta;
 export const Default = {
     args: {
-        text: 'Link text',
-        href: '#',
+        dsText: 'Link text',
+        dsHref: '#',
     },
 };
 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'],
-        },
-        iconTitle: {
-            control: 'text',
-        },
-        iconHidden: {
-            control: 'boolean',
-        },
-        download: {
-            control: 'boolean'
-        },
-        language: {
-            control: 'text',
-            description: 'ISO 639 language code. Known languages are: "en", "fi", "sv". When undefined will use browser\'s language.',
-        },
-        ariaLabel: {
-            name: 'aria-label',
-            control: 'text',
-        },
-        ...anchorAriaAttributeArgTypes,
+        dsText: 'Link text',
+        dsHref: '#',
     },
 };

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

@@ -13,18 +13,16 @@
 .ds-link-with-arrow {
   display: inline-flex;
   align-items: center;
-  color: var(--ds-textColor-link);
+  color: var(--ds-palette-mainBlue-70);
   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 {
-  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);
+  box-shadow: 0 0 0 var(--ds-borderWidth-thin) var(--ds-palette-white);
+  outline: var(--ds-borderWidth-thin) solid var(--ds-palette-black-95);
+  outline-offset: calc(var(--ds-borderWidth-thin) * 1);
 }
 @media (min-width: 30rem) {
   .ds-link-with-arrow {
@@ -38,8 +36,8 @@
   line-height: 0;
   align-items: center;
   justify-content: center;
-  color: var(--ds-textColor-white);
-  background-color: var(--ds-bgColor-primary);
+  color: var(--ds-palette-white);
+  background-color: var(--ds-palette-mainBlue-70);
 }
 .ds-link-with-arrow__icon--start {
   margin-right: var(--ds-spacing-xSmall);
@@ -49,10 +47,10 @@
 }
 :hover slot > .ds-link-with-arrow__icon {
   outline: 10px solid;
-  background-color: var(--ds-bgColor-primary-hover);
+  background-color: var(--ds-palette-mainBlue-80);
 }
 :active slot > .ds-link-with-arrow__icon {
-  background-color: var(--ds-bgColor-primary-active);
+  background-color: var(--ds-palette-mainBlue-90);
 }
 .ds-link-with-arrow:hover, .ds-link-with-arrow:active {
   text-decoration-line: underline;
@@ -63,8 +61,8 @@
   text-underline-position: from-font;
 }
 .ds-link-with-arrow:hover {
-  color: var(--ds-textColor-link-hover);
+  color: var(--ds-palette-mainBlue-80);
 }
 .ds-link-with-arrow:active, .ds-link-with-arrow:focus-visible {
-  color: var(--ds-textColor-link-active);
+  color: var(--ds-palette-mainBlue-90);
 }

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

@@ -1,8 +1,8 @@
 import { h } from "@stencil/core";
 import classNames from "classnames";
-import { inheritAriaAttributes } from "../../../utils/attributes/attributes";
+import { inheritAriaAttributes, inheritSpecifiedAttributes } from "../../../utils/attributes/attributes";
 import { opensInNewTab, visuallyHiddenAssistiveText } from "../../../utils/link/linkUtils";
-import { getAriaLabel, idGenerator } from "../../../utils/utils";
+import { idGenerator } from "../../../utils/utils";
 const visuallyHiddenAssistiveTextIdGenerator = idGenerator('visually-hidden-assistive-text');
 export class DsLinkWithArrow {
     inheritedAttributes = {};
@@ -10,15 +10,17 @@ export class DsLinkWithArrow {
     rel;
     visuallyHiddenAssistiveTextId = visuallyHiddenAssistiveTextIdGenerator.next().value;
     el;
-    text;
-    iconPosition = 'start';
-    href;
-    target;
-    language;
-    ariaLabel;
+    dsText;
+    dsIconPosition = 'start';
+    dsHref;
+    dsTarget;
+    dsAriaLabel;
     componentWillLoad() {
-        this.inheritedAttributes = inheritAriaAttributes(this.el, ['aria-label']);
-        if (opensInNewTab(this.target)) {
+        this.inheritedAttributes = {
+            ...inheritAriaAttributes(this.el, ['aria-label']),
+            ...inheritSpecifiedAttributes(this.el, ['lang']),
+        };
+        if (opensInNewTab(this.dsTarget)) {
             this.icon = 'arrow_outward';
             this.rel = 'noopener noreferrer';
         }
@@ -26,10 +28,10 @@ export class DsLinkWithArrow {
     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',
+            'ds-link-with-arrow__icon--start': this.dsIconPosition === 'start',
+            'ds-link-with-arrow__icon--end': this.dsIconPosition === 'end',
         });
-        return (h("a", { key: 'bce4a90f9cc5113ab3d5b300d791d2299e22b7ad', href: this.href, class: classes, rel: this.rel, target: this.target, "aria-label": getAriaLabel(this.text, this.ariaLabel), ...this.inheritedAttributes }, h("slot", { key: '96ba4a33114443aab36d1301cf65c56437b9a85b', name: "iconStart" }, this.iconPosition === 'start' && h("ds-icon", { key: '86d8029de69c1ecb3002a97f5bc0cdbf899b7f91', name: this.icon, class: iconClasses, size: "1.4em" })), this.text, h("slot", { key: '7c2dafaee60253b1f5c22819b1afec83d106234b', name: "iconStart" }, this.iconPosition === 'end' && h("ds-icon", { key: 'a9fb3e2ddee16cce7c6b8fc0fba0b11970567276', name: this.icon, class: iconClasses, size: "1.4em" })), opensInNewTab(this.target) && (h("ds-visually-hidden", { key: 'f93f37d0d10d7a2d51980ff8feb76915cc4823b2', id: this.visuallyHiddenAssistiveTextId }, visuallyHiddenAssistiveText(this.language ?? document.documentElement.lang)))));
+        return (h("a", { key: 'be8d2878b2b0801df9d5b5988aa96ac251f659cc', href: this.dsHref, class: classes, rel: this.rel, target: this.dsTarget, "aria-label": this.dsAriaLabel, ...this.inheritedAttributes }, h("slot", { key: '7b5247167879c1b0335c33c1fcf74551bb78b25d', name: "prefix" }, this.dsIconPosition === 'start' && h("ds-icon", { key: 'd1c996dee504b053d11ad790b7ce545b1e1eab1a', dsName: this.icon, class: iconClasses, dsSize: "1.4em" })), this.dsText, h("slot", { key: 'd7f14b3e9f57dc3761254852f94267a55474cd3e', name: "suffix" }, this.dsIconPosition === 'end' && h("ds-icon", { key: 'c174d0e68979dc095a08936e6fffcc3a9e434088', dsName: this.icon, class: iconClasses, dsSize: "1.4em" })), opensInNewTab(this.dsTarget) && h("ds-visually-hidden", { key: 'de0de903e0bf1733b8be9fc2b35797e944cd3470', id: this.visuallyHiddenAssistiveTextId }, visuallyHiddenAssistiveText())));
     }
     static get is() { return "ds-link-with-arrow"; }
     static get encapsulation() { return "shadow"; }
@@ -45,8 +47,9 @@ export class DsLinkWithArrow {
     }
     static get properties() {
         return {
-            "text": {
+            "dsText": {
                 "type": "string",
+                "attribute": "ds-text",
                 "mutable": false,
                 "complexType": {
                     "original": "string",
@@ -57,15 +60,15 @@ export class DsLinkWithArrow {
                 "optional": true,
                 "docs": {
                     "tags": [],
-                    "text": ""
+                    "text": "Text content of the link"
                 },
                 "getter": false,
                 "setter": false,
-                "attribute": "text",
                 "reflect": false
             },
-            "iconPosition": {
+            "dsIconPosition": {
                 "type": "string",
+                "attribute": "ds-icon-position",
                 "mutable": false,
                 "complexType": {
                     "original": "LinkIconPosition",
@@ -81,16 +84,16 @@ export class DsLinkWithArrow {
                 "optional": false,
                 "docs": {
                     "tags": [],
-                    "text": ""
+                    "text": "Whether to display the arrow icon before or after the link"
                 },
                 "getter": false,
                 "setter": false,
-                "attribute": "icon-position",
                 "reflect": false,
                 "defaultValue": "'start'"
             },
-            "href": {
+            "dsHref": {
                 "type": "string",
+                "attribute": "ds-href",
                 "mutable": false,
                 "complexType": {
                     "original": "string",
@@ -101,15 +104,15 @@ export class DsLinkWithArrow {
                 "optional": false,
                 "docs": {
                     "tags": [],
-                    "text": ""
+                    "text": "Passed to the `href` attribute of the `a` element"
                 },
                 "getter": false,
                 "setter": false,
-                "attribute": "href",
                 "reflect": false
             },
-            "target": {
+            "dsTarget": {
                 "type": "string",
+                "attribute": "ds-target",
                 "mutable": false,
                 "complexType": {
                     "original": "LinkTarget",
@@ -125,39 +128,15 @@ export class DsLinkWithArrow {
                 "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": ""
+                    "text": "Passed to the `target` attribute of the `a` element"
                 },
                 "getter": false,
                 "setter": false,
-                "attribute": "lang",
                 "reflect": false
             },
-            "ariaLabel": {
+            "dsAriaLabel": {
                 "type": "string",
+                "attribute": "ds-aria-label",
                 "mutable": false,
                 "complexType": {
                     "original": "string",
@@ -168,11 +147,10 @@ export class DsLinkWithArrow {
                 "optional": false,
                 "docs": {
                     "tags": [],
-                    "text": ""
+                    "text": "Passed to the `aria-label` attribute of the `a` element"
                 },
                 "getter": false,
                 "setter": false,
-                "attribute": "aria-label",
                 "reflect": false
             }
         };

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

@@ -9,9 +9,9 @@ const meta = {
 export default meta;
 export const OpenInANewTab = {
     args: {
-        text: 'Link with arrow icon',
-        href: '#',
-        target: '_blank',
+        dsText: 'Link with arrow icon',
+        dsHref: '#',
+        dsTarget: '_blank',
     },
     play: async ({ canvasElement, step }) => {
         const shadowRoot = await getShadowRoot(canvasElement, 'ds-link-with-arrow');
@@ -27,7 +27,7 @@ export const OpenInANewTab = {
 };
 const iconAtTheEndDOM = html `
   <div class="ds-sb-icon-at-the-end">
-    <ds-link-with-arrow text="Link with arrow icon" href="#" icon-position="end"></ds-link-with-arrow>
+    <ds-link-with-arrow ds-text="Link with arrow icon" ds-href="#" ds-icon-position="end"></ds-link-with-arrow>
   </div>
 `;
 export const IconAtTheEnd = {

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

@@ -5,15 +5,15 @@ const meta = {
 export default meta;
 export const IconPositionStart = {
     args: {
-        text: 'Link with arrow icon',
-        href: '#',
-        iconPosition: 'start',
+        dsText: 'Link with arrow icon',
+        dsHref: '#',
+        dsIconPosition: 'start',
     },
 };
 export const IconPositionEnd = {
     args: {
-        text: 'Link with arrow icon',
-        href: '#',
-        iconPosition: 'end',
+        dsText: 'Link with arrow icon',
+        dsHref: '#',
+        dsIconPosition: 'end',
     },
 };

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

@@ -1,9 +1,3 @@
-import { getAriaAttributeArgTypes } from "../../../../utils/attributes/attributes";
-const anchorAriaAttributes = [
-    'aria-current',
-    'aria-haspopup',
-];
-const anchorAriaAttributeArgTypes = getAriaAttributeArgTypes(anchorAriaAttributes);
 const meta = {
     title: 'Base Components/LinkWithArrow',
     component: 'ds-link-with-arrow',
@@ -11,31 +5,13 @@ const meta = {
 export default meta;
 export const Default = {
     args: {
-        text: 'Link with arrow icon',
-        href: '#',
+        dsText: 'Link with arrow icon',
+        dsHref: '#',
     },
 };
 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.',
-        },
-        ariaLabel: {
-            name: 'aria-label',
-            control: 'text',
-        },
-        ...anchorAriaAttributeArgTypes,
+        dsText: 'Link with arrow icon',
+        dsHref: '#',
     },
 };