npm - @uh-design-system/component-library - Versions diffs - 1.3.0-rc.8 → 1.3.0 - Mend

@uh-design-system/component-library 1.3.0-rc.8 → 1.3.0

This diff represents the content of publicly available package versions that have been released to one of the supported registries. The information contained in this diff is provided for informational purposes only and reflects changes between package versions as they appear in their respective public registries.

Files changed (1488) hide show

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

@@ -39,6 +39,8 @@ export class DsButton extends Mixin(ariaDeprecationFactory) {
     dsAriaDescribedby;
     dsAriaExpanded;
     dsAriaPressed;
+    dsAriaControls;
+    dsAriaHaspopup;
     dsHiddenAssistiveText;
     dsActive = false;
     dsInInput = false;
@@ -150,11 +152,13 @@ export class DsButton extends Mixin(ariaDeprecationFactory) {
         });
         const DsSpinner = transformTagName('ds-spinner', 'ds-button', this.el);
         const DsVisuallyHidden = transformTagName('ds-visually-hidden', 'ds-button', this.el);
-        const { role: inheritedRole, ['aria-label']: inheritedAriaLabel, ['aria-labelledby']: inheritedAriaLabelledby, ['aria-describedby']: inheritedAriaDescribedby, ['aria-disabled']: inheritedAriaDisabled, ['aria-expanded']: inheritedAriaExpanded, ['aria-pressed']: inheritedAriaPressed, ...restAttributes } = this.inheritedAttributes;
+        const { role: inheritedRole, ['aria-label']: inheritedAriaLabel, ['aria-labelledby']: inheritedAriaLabelledby, ['aria-describedby']: inheritedAriaDescribedby, ['aria-disabled']: inheritedAriaDisabled, ['aria-expanded']: inheritedAriaExpanded, ['aria-pressed']: inheritedAriaPressed, ['aria-controls']: inheritedAriaControls, ['aria-haspopup']: inheritedAriaHaspopup, ...restAttributes } = this.inheritedAttributes;
         const role = this.dsRole ?? inheritedRole;
         const ariaLabel = this.dsAriaLabel || inheritedAriaLabel;
         const ariaLabelledby = this.dsAriaLabelledby || inheritedAriaLabelledby;
         const ariaDescribedby = this.dsAriaDescribedby || inheritedAriaDescribedby;
+        const ariaControls = this.dsAriaControls || inheritedAriaControls;
+        const ariaHaspopup = this.dsAriaHaspopup !== undefined ? this.dsAriaHaspopup : inheritedAriaHaspopup;
         let ariaDisabled;
         if (this.dsAriaDisabled !== undefined) {
             if (typeof this.dsAriaDisabled === 'string') {
@@ -170,7 +174,7 @@ export class DsButton extends Mixin(ariaDeprecationFactory) {
         }
         const ariaExpanded = this.dsAriaExpanded !== undefined ? (this.dsAriaExpanded ? 'true' : 'false') : inheritedAriaExpanded;
         const ariaPressed = this.dsAriaPressed !== undefined ? (this.dsAriaPressed ? 'true' : 'false') : inheritedAriaPressed;
-        return (h("button", { ref: el => (this.buttonEl = el), class: classes, id: this.dsId, value: this.dsValue, name: this.dsName, form: this.dsForm, type: this.dsType, disabled: this.dsDisabled, onKeyDown: this.handleKeyDown, onKeyUp: this.handleKeyUp, onBlur: this.handleBlur, ...ifDefined('autofocus', this.dsAutoFocus), ...ifDefined('role', role), ...ifDefined('aria-disabled', ariaDisabled), ...ifDefined('aria-label', ariaLabel), ...ifDefined('aria-labelledby', ariaLabelledby), ...ifDefined('aria-describedby', ariaDescribedby), ...ifDefined('aria-expanded', ariaExpanded), ...ifDefined('aria-pressed', ariaPressed), ...restAttributes }, h("slot", { name: "prefix" }, !this.dsLoading && this.dsIcon && this.dsIconPosition === 'start' && this.renderIcon(baseClass), this.dsLoading && (h(DsSpinner, { class: `${baseClass}__spinner`, dsHiddenAssistiveText: this.dsSpinnerHiddenText, dsColour: this.getSpinnerColour(), dsSize: this.dsSize === 'medium' ? 'medium' : null, dsCustomSize: this.dsSize === 'small' ? '1.25rem' : null }))), this.hasContent && (h("span", { class: `${baseClass}__value` }, h("slot", null, this.text, this.dsHiddenAssistiveText && h(DsVisuallyHidden, { dsTag: "span" }, this.dsHiddenAssistiveText)))), h("slot", { name: "suffix" }, this.dsIcon && this.dsIconPosition === 'end' && this.renderIcon(baseClass))));
+        return (h("button", { ref: el => (this.buttonEl = el), class: classes, id: this.dsId, value: this.dsValue, name: this.dsName, form: this.dsForm, type: this.dsType, disabled: this.dsDisabled, onKeyDown: this.handleKeyDown, onKeyUp: this.handleKeyUp, onBlur: this.handleBlur, ...ifDefined('autofocus', this.dsAutoFocus), ...ifDefined('role', role), ...ifDefined('aria-disabled', ariaDisabled), ...ifDefined('aria-label', ariaLabel), ...ifDefined('aria-labelledby', ariaLabelledby), ...ifDefined('aria-describedby', ariaDescribedby), ...ifDefined('aria-expanded', ariaExpanded), ...ifDefined('aria-pressed', ariaPressed), ...ifDefined('aria-controls', ariaControls), ...ifDefined('aria-haspopup', ariaHaspopup), ...restAttributes }, h("slot", { name: "prefix" }, !this.dsLoading && this.dsIcon && this.dsIconPosition === 'start' && this.renderIcon(baseClass), this.dsLoading && (h(DsSpinner, { class: `${baseClass}__spinner`, dsHiddenAssistiveText: this.dsSpinnerHiddenText, dsColour: this.getSpinnerColour(), dsSize: this.dsSize === 'medium' ? 'medium' : null, dsCustomSize: this.dsSize === 'small' ? '1.25rem' : null }))), this.hasContent && (h("span", { class: `${baseClass}__value` }, h("slot", null, this.text, this.dsHiddenAssistiveText && h(DsVisuallyHidden, { dsTag: "span" }, this.dsHiddenAssistiveText)))), h("slot", { name: "suffix" }, this.dsIcon && this.dsIconPosition === 'end' && this.renderIcon(baseClass))));
     };
     render() {
         const buttonElement = this.renderButton();
@@ -699,6 +703,44 @@ export class DsButton extends Mixin(ariaDeprecationFactory) {
                 "reflect": false,
                 "attribute": "ds-aria-pressed"
             },
+            "dsAriaControls": {
+                "type": "string",
+                "mutable": false,
+                "complexType": {
+                    "original": "string",
+                    "resolved": "string",
+                    "references": {}
+                },
+                "required": false,
+                "optional": true,
+                "docs": {
+                    "tags": [],
+                    "text": "Passed to the `aria-controls` attribute of the `button` element."
+                },
+                "getter": false,
+                "setter": false,
+                "reflect": false,
+                "attribute": "ds-aria-controls"
+            },
+            "dsAriaHaspopup": {
+                "type": "any",
+                "mutable": false,
+                "complexType": {
+                    "original": "boolean | 'menu' | 'listbox' | 'tree' | 'grid' | 'dialog'",
+                    "resolved": "\"dialog\" | \"grid\" | \"listbox\" | \"menu\" | \"tree\" | boolean",
+                    "references": {}
+                },
+                "required": false,
+                "optional": true,
+                "docs": {
+                    "tags": [],
+                    "text": "Passed to the `aria-haspopup` attribute of the `button` element."
+                },
+                "getter": false,
+                "setter": false,
+                "reflect": false,
+                "attribute": "ds-aria-haspopup"
+            },
             "dsHiddenAssistiveText": {
                 "type": "string",
                 "mutable": false,
@@ -814,6 +856,12 @@ export class DsButton extends Mixin(ariaDeprecationFactory) {
             }, {
                 "propName": "aria-expanded",
                 "methodName": "ariaAttributeObserver"
+            }, {
+                "propName": "aria-controls",
+                "methodName": "ariaAttributeObserver"
+            }, {
+                "propName": "aria-haspopup",
+                "methodName": "ariaAttributeObserver"
             }];
     }
 }

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

@@ -1,5 +1,4 @@
 import { icons } from "../../../00-foundations/icons/iconList";
-import { getAriaAttributeArgTypes } from "../../../../utils/attributes/attributes";
 const meta = {
     title: 'Base Components/Button',
     component: 'ds-button',
@@ -8,7 +7,10 @@ const meta = {
             control: 'select',
             options: icons.map(icon => icon.name),
         },
-        ...getAriaAttributeArgTypes(['aria-label', 'aria-labelledby', 'aria-disabled']),
+        dsAriaHaspopup: {
+            control: 'select',
+            options: [true, false, 'menu', 'listbox', 'tree', 'grid', 'dialog'],
+        },
     },
 };
 export default meta;

package/dist/collection/components/01-base-components/ds-card/ds-card.css CHANGED Viewed

@@ -2,7 +2,7 @@
   display: block;
 }
-.ds-card__Yxqs6o {
+.ds-card__ugqjFm {
   background-color: var(--ds-bgColor-white);
   border: var(--ds-borderWidth-hairline) solid var(--ds-borderColor-light);
   display: flex;
@@ -14,86 +14,86 @@
   min-height: var(--ds-spacing-layout-2xLarge, 8rem);
   position: relative;
 }
-.ds-card__Yxqs6o--fluid-height {
+.ds-card__ugqjFm--fluid-height {
   height: 100%;
 }
-.ds-card__Yxqs6o.ds-card__Yxqs6o--link--full:hover {
+.ds-card__ugqjFm.ds-card__ugqjFm--link--full:hover {
   background-color: var(--ds-bgColor-neutralLight-hover);
   cursor: pointer;
 }
-.ds-card__Yxqs6o.ds-card__Yxqs6o--link--full:hover .ds-card__Yxqs6o__icon {
+.ds-card__ugqjFm.ds-card__ugqjFm--link--full:hover .ds-card__ugqjFm__icon {
   color: var(--ds-textColor-link-standalone-hover);
 }
-.ds-card__Yxqs6o.ds-card__Yxqs6o--link--full:hover .ds-card__Yxqs6o__image-container--has-image::after {
+.ds-card__ugqjFm.ds-card__ugqjFm--link--full:hover .ds-card__ugqjFm__image-container--has-image::after {
   content: "";
   position: absolute;
   inset: 0;
   background-color: var(--ds-bgColor-transparent-onLight-hover);
 }
-.ds-card__Yxqs6o.ds-card__Yxqs6o--link--full:hover .ds-card__Yxqs6o__link--heading {
+.ds-card__ugqjFm.ds-card__ugqjFm--link--full:hover .ds-card__ugqjFm__link--heading {
   text-decoration: none;
 }
-.ds-card__Yxqs6o.ds-card__Yxqs6o--link--full:active {
+.ds-card__ugqjFm.ds-card__ugqjFm--link--full:active {
   background-color: var(--ds-bgColor-neutralLight-active);
   outline: none;
 }
-.ds-card__Yxqs6o.ds-card__Yxqs6o--link--full:active .ds-card__Yxqs6o__icon {
+.ds-card__ugqjFm.ds-card__ugqjFm--link--full:active .ds-card__ugqjFm__icon {
   color: var(--ds-textColor-link-standalone-hover);
 }
-.ds-card__Yxqs6o.ds-card__Yxqs6o--link--full:active .ds-card__Yxqs6o__image-container--has-image::after {
+.ds-card__ugqjFm.ds-card__ugqjFm--link--full:active .ds-card__ugqjFm__image-container--has-image::after {
   content: "";
   position: absolute;
   inset: 0;
   background-color: var(--ds-bgColor-transparent-onLight-active);
 }
-.ds-card__Yxqs6o.ds-card__Yxqs6o--link--full:active .ds-card__Yxqs6o__link--heading {
+.ds-card__ugqjFm.ds-card__ugqjFm--link--full:active .ds-card__ugqjFm__link--heading {
   text-decoration: none;
 }
-.ds-card__Yxqs6o.ds-card__Yxqs6o--link--full:focus-within {
+.ds-card__ugqjFm.ds-card__ugqjFm--link--full:focus-within {
   box-shadow: false 0 0 0 var(--ds-borderWidth-thick) var(--ds-borderColor-white);
   outline: var(--ds-borderWidth-thin) solid var(--ds-borderColor-black);
   outline-offset: calc(var(--ds-borderWidth-thin) * -1 * -1);
 }
-.ds-card__Yxqs6o {
+.ds-card__ugqjFm {
   /**
   * Expand the clickable area of the heading link to the entire heading
   */
 }
-.ds-card__Yxqs6o .ds-card__Yxqs6o__link--full:after {
+.ds-card__ugqjFm .ds-card__ugqjFm__link--full:after {
   content: "";
   position: absolute;
   inset: 0;
 }
-.ds-card__Yxqs6o--horizontal {
+.ds-card__ugqjFm--horizontal {
   flex-direction: column;
 }
 @media (min-width: 30rem) {
-  .ds-card__Yxqs6o--horizontal {
+  .ds-card__ugqjFm--horizontal {
     display: grid;
     grid-template: "image content" auto "image contentBottom" auto/auto 1fr;
   }
-  .ds-card__Yxqs6o--horizontal .ds-card__Yxqs6o__image-container {
+  .ds-card__ugqjFm--horizontal .ds-card__ugqjFm__image-container {
     grid-area: image;
     height: 100%;
     order: initial;
   }
-  .ds-card__Yxqs6o--horizontal .ds-card__Yxqs6o__content {
+  .ds-card__ugqjFm--horizontal .ds-card__ugqjFm__content {
     grid-area: content;
     height: 100%;
     order: initial;
   }
-  .ds-card__Yxqs6o--horizontal .ds-card__Yxqs6o__content--bottom {
+  .ds-card__ugqjFm--horizontal .ds-card__ugqjFm__content--bottom {
     grid-area: contentBottom;
     order: initial;
   }
 }
-.ds-card__Yxqs6o--filled {
+.ds-card__ugqjFm--filled {
   background-color: var(--ds-bgColor-neutralLight);
 }
-.ds-card__Yxqs6o__image-container {
+.ds-card__ugqjFm__image-container {
   display: none;
 }
-.ds-card__Yxqs6o__image-container--has-image {
+.ds-card__ugqjFm__image-container--has-image {
   display: block;
   height: auto;
   order: 1;
@@ -101,19 +101,19 @@
   width: 100%;
 }
 @media (min-width: 30rem) {
-  .ds-card__Yxqs6o:not(.ds-card__Yxqs6o--vertical) .ds-card__Yxqs6o__image-container--has-image {
+  .ds-card__ugqjFm:not(.ds-card__ugqjFm--vertical) .ds-card__ugqjFm__image-container--has-image {
     max-width: var(--vertical-image-max-width, 200px);
   }
 }
 @media (min-width: 30rem) {
-  .ds-card__Yxqs6o:not(.ds-card__Yxqs6o--horizontal) .ds-card__Yxqs6o__image-container--has-image {
+  .ds-card__ugqjFm:not(.ds-card__ugqjFm--horizontal) .ds-card__ugqjFm__image-container--has-image {
     max-height: var(--horizontal-image-max-height, auto);
   }
 }
-.ds-card__Yxqs6o--link--full .ds-card__Yxqs6o__image-container--has-image {
+.ds-card__ugqjFm--link--full .ds-card__ugqjFm__image-container--has-image {
   pointer-events: none;
 }
-.ds-card__Yxqs6o__tag {
+.ds-card__ugqjFm__tag {
   background-color: var(--ds-bgColor-black);
   color: var(--ds-textColor-white);
   font-family: var(--ds-fontFamily-body);
@@ -129,18 +129,18 @@
   top: 1rem;
   z-index: 2;
 }
-.ds-card__Yxqs6o__image {
+.ds-card__ugqjFm__image {
   width: 100%;
   height: 100%;
   object-fit: cover;
 }
-.ds-card__Yxqs6o__content {
+.ds-card__ugqjFm__content {
   display: flex;
   flex-direction: column;
   order: 2;
   width: 100%;
 }
-.ds-card__Yxqs6o__content--top {
+.ds-card__ugqjFm__content--top {
   align-items: flex-start;
   display: flex;
   gap: var(--ds-spacing-small);
@@ -148,14 +148,14 @@
   order: 2;
   padding: var(--ds-spacing-small) var(--ds-spacing-small) var(--ds-spacing-xSmall) var(--ds-spacing-small);
 }
-.ds-card__Yxqs6o__content--top__text {
+.ds-card__ugqjFm__content--top__text {
   display: flex;
   flex-direction: column;
 }
-.ds-card__Yxqs6o__content--bottom {
+.ds-card__ugqjFm__content--bottom {
   order: 4;
 }
-.ds-card__Yxqs6o__eyebrow {
+.ds-card__ugqjFm__eyebrow {
   color: var(--ds-textColor-secondary);
   font-family: var(--ds-fontFamily-body);
   font-size: var(--ds-fontSize-16);
@@ -165,11 +165,11 @@
   margin-bottom: var(--ds-spacing-2xSmall);
   order: 1;
 }
-.ds-card__Yxqs6o__heading-container {
+.ds-card__ugqjFm__heading-container {
   display: flex;
   flex-direction: column;
 }
-.ds-card__Yxqs6o__heading {
+.ds-card__ugqjFm__heading {
   align-items: center;
   color: var(--ds-textColor-default);
   display: flex;
@@ -182,12 +182,12 @@
   order: 2;
   text-wrap: balance;
 }
-.ds-card__Yxqs6o__heading .ds-card__Yxqs6o__link {
+.ds-card__ugqjFm__heading .ds-card__ugqjFm__link {
   color: var(--ds-textColor-default);
   text-decoration: none;
   outline: none;
 }
-.ds-card__Yxqs6o__heading .ds-card__Yxqs6o__link:not(.ds-card__Yxqs6o__link--full):hover, .ds-card__Yxqs6o__heading .ds-card__Yxqs6o__link:not(.ds-card__Yxqs6o__link--full):active {
+.ds-card__ugqjFm__heading .ds-card__ugqjFm__link:not(.ds-card__ugqjFm__link--full):hover, .ds-card__ugqjFm__heading .ds-card__ugqjFm__link:not(.ds-card__ugqjFm__link--full):active {
   text-decoration-line: underline;
   text-decoration-style: solid;
   text-decoration-skip-ink: auto;
@@ -195,7 +195,7 @@
   text-underline-offset: 12%; /* 2.4px */
   text-underline-position: from-font;
 }
-.ds-card__Yxqs6o__heading .ds-card__Yxqs6o__link--heading {
+.ds-card__ugqjFm__heading .ds-card__ugqjFm__link--heading {
   text-decoration-line: underline;
   text-decoration-style: solid;
   text-decoration-skip-ink: auto;
@@ -203,12 +203,12 @@
   text-underline-offset: 12%; /* 2.4px */
   text-underline-position: from-font;
 }
-.ds-card__Yxqs6o__heading .ds-card__Yxqs6o__link--heading:focus-visible {
+.ds-card__ugqjFm__heading .ds-card__ugqjFm__link--heading:focus-visible {
   box-shadow: 0 0 0 var(--ds-borderWidth-thin) var(--ds-borderColor-white);
   outline: var(--ds-borderWidth-thin) solid var(--ds-borderColor-black);
   outline-offset: calc(var(--ds-borderWidth-thin) * 1);
 }
-.ds-card__Yxqs6o__subtitle, .ds-card__Yxqs6o__slot-subtitle {
+.ds-card__ugqjFm__subtitle, .ds-card__ugqjFm__slot-subtitle {
   font-size: var(--ds-fontSize-16);
   font-family: var(--ds-fontFamily-body);
   color: var(--ds-textColor-secondary);
@@ -216,7 +216,7 @@
   letter-spacing: var(--ds-letterSpacing-wide);
   order: 3;
 }
-.ds-card__Yxqs6o__description {
+.ds-card__ugqjFm__description {
   -webkit-box-orient: vertical;
   -webkit-line-clamp: var(--description-line-clamp, "none");
   color: var(--ds-textColor-default);
@@ -232,11 +232,11 @@
   text-wrap: pretty;
   order: 3;
 }
-.ds-card__Yxqs6o__icon {
+.ds-card__ugqjFm__icon {
   color: var(--ds-textColor-primary);
   font-size: var(--ds-fontSize-20);
   font-weight: normal;
 }
-.ds-card__Yxqs6o__slot-subtitle--hidden {
+.ds-card__ugqjFm__slot-subtitle--hidden {
   display: none;
 }

package/dist/collection/components/01-base-components/ds-card/ds-card.js CHANGED Viewed

@@ -1,7 +1,7 @@
 import { h } from "@stencil/core";
 import classNames from "classnames";
 import { declareComponentDependencies, idGenerator, transformTagName } from "../../../utils/utils";
-import { opensInNewTab } from "../../../utils/link/linkUtils";
+import { opensInNewTab, visuallyHiddenAssistiveText } from "../../../utils/link/linkUtils";
 import { cx } from "../../../utils/cx";
 import { inheritAriaAttributes, inheritAttributes } from "../../../utils/attributes/attributes";
 const cardIdGenerator = idGenerator('ds-card');
@@ -98,18 +98,19 @@ export class DsCard {
         const HeadingTag = `h${this.dsHeadingLevel}`;
         const headingId = `${this.cardId}-heading`;
         const DsIcon = transformTagName('ds-icon', 'ds-card', this.el);
+        const DsVisuallyHidden = transformTagName('ds-visually-hidden', 'ds-card', this.el);
         const descriptionClamp = this.dsDescriptionClamp ? this.dsDescriptionClamp.toString() : 'none';
-        return (h("article", { key: '4aca49b7685b06671358a4a979fc4a667a8f74fe', class: classes, style: { '--description-line-clamp': descriptionClamp }, "aria-labelledby": headingId, ...this.inheritedAttributes }, h("div", { key: '3656493bd5b4f0c3efb264c0028bc2dddddbdecd', class: `${baseClass}__content` }, h("div", { key: '6b77e3475f7c5b3b4371454ec552ae50ce33d0af', class: {
+        return (h("article", { key: '6e105c3147677c7158dce6ab020730c2f87d3203', class: classes, style: { '--description-line-clamp': descriptionClamp }, "aria-labelledby": headingId, ...this.inheritedAttributes }, h("div", { key: '76d87c496eac2bb73f7c146171ffcb2f40ef62d8', class: `${baseClass}__content` }, h("div", { key: '96ee9ddb83eded69decb0e1a60b6274f9ecffe90', class: {
                 [`${baseClass}__content--top`]: true,
                 [`${baseClass}__content--top--has-link`]: Boolean(this.dsUrl),
-            } }, h("div", { key: 'e5a3e7d730a74c89efe0b1157d42569d8ee2b6e4', class: `${baseClass}__heading-container` }, this.dsHeading && this.dsUrl && this.dsLinkType !== 'none' ? (h(HeadingTag, { class: `${baseClass}__heading`, id: headingId }, h("a", { href: this.dsUrl, target: this.dsUrlTarget, class: linkClasses }, h("slot", { name: "heading" }, this.dsHeading)))) : (h(HeadingTag, { class: `${baseClass}__heading` }, h("slot", { name: "heading" }, this.dsHeading))), this.dsTag && this.hasImageSlot && h("span", { key: 'e77eca2ae3d8f06fda874b2d6872fb52f76356ef', class: `${baseClass}__tag` }, this.dsTag), this.dsEyebrow && h("div", { key: '8b6dd6e0bc9bff919b83ba0f66baa18ff8dbc549', class: `${baseClass}__eyebrow` }, this.dsEyebrow), this.dsSubtitle && h("div", { key: '8d9340ea810f0a1dd9bb620f4395d03e76371c79', class: `${baseClass}__subtitle` }, this.dsSubtitle), h("div", { key: '8c3eab74972c7e2ae2fb15284b451e2e012fe825', class: classNames(`${baseClass}__slot-subtitle`, {
+            } }, h("div", { key: '66c9401cc8e65a7dfa032b1334927167a55f6a52', class: `${baseClass}__heading-container` }, this.dsHeading && this.dsUrl && this.dsLinkType !== 'none' ? (h(HeadingTag, { class: `${baseClass}__heading`, id: headingId }, h("a", { href: this.dsUrl, target: this.dsUrlTarget, class: linkClasses }, h("slot", { name: "heading" }, this.dsHeading), opensInNewTab(this.dsUrlTarget) && h(DsVisuallyHidden, { dsTag: "span" }, visuallyHiddenAssistiveText())))) : (h(HeadingTag, { class: `${baseClass}__heading` }, h("slot", { name: "heading" }, this.dsHeading))), this.dsTag && this.hasImageSlot && h("span", { key: '6ce59ec76be8526cb6c0e5a4a2630e5a872ae8d9', class: `${baseClass}__tag` }, this.dsTag), this.dsEyebrow && h("div", { key: 'cb21c5165bf3563ff58781b755e4b5e437d38c10', class: `${baseClass}__eyebrow` }, this.dsEyebrow), this.dsSubtitle && h("div", { key: '09119cdf4c656bdd0a44fcb581a37f1d3f348393', class: `${baseClass}__subtitle` }, this.dsSubtitle), h("div", { key: '41205d3a0c4131eacf3b8c0fbc5fc92b3712d7af', class: classNames(`${baseClass}__slot-subtitle`, {
                 [`${baseClass}__slot-subtitle--hidden`]: !this.hasSubtitleSlot,
-            }) }, h("slot", { key: '4ca959be51c344e0aeaee632cbbbb6e7cb3ad3ef', name: "subtitle", onSlotchange: () => this.checkSubtitleSlot() }))), this.dsUrl && this.dsShowArrow && this.dsLinkType !== 'heading' && h(DsIcon, { key: '1132097252cc13d430a5ab2f033c627c82c76628', dsSize: "2rem", class: `${baseClass}__icon`, dsName: this.linkIcon })), this.dsDescription && h("p", { key: '00c4b323a27577fe0a86083707952aed78d45c98', class: `${baseClass}__description` }, this.dsDescription)), h("div", { key: '74f038a7420ac390e0985fc0c17a12eb03802c41', class: classNames(`${baseClass}__content--bottom`, {
+            }) }, h("slot", { key: '37c6b9bf269e28cd881407f8067ec4afdb167fb7', name: "subtitle", onSlotchange: () => this.checkSubtitleSlot() }))), this.dsUrl && this.dsShowArrow && this.dsLinkType !== 'heading' && h(DsIcon, { key: '985f58788cdf88f6b936d625b16ee87d83337e0a', dsSize: "2rem", class: `${baseClass}__icon`, dsName: this.linkIcon })), this.dsDescription && h("p", { key: 'a366ceaf28b325702b98a2d95077fe756fa57802', class: `${baseClass}__description` }, this.dsDescription)), h("div", { key: 'ff6858f9168824589cc8eabca58af5bb02286d60', class: classNames(`${baseClass}__content--bottom`, {
                 [`${baseClass}__content--bottom--has-slot-content`]: this.hasSlotContent,
-            }) }, h("div", { key: '63f77dda6ad019d0cac08ba7fd02bdb5b4316ef7', class: `${baseClass}__slot--content` }, h("slot", { key: '45edff410ccae95620e2af87904198173e2d39e4', name: "content" })), h("div", { key: 'a397ee8196c39e671e669c16ea09af21043ac2eb', class: `${baseClass}__slot--footer` }, h("slot", { key: '42b960398fbf2bfd01bb002277db033c3f5e4298', name: "footer" }))), h("div", { key: '1d2159b8fe99a68ca17f0505f144fdd1829fe877', class: {
+            }) }, h("div", { key: 'fcf697c13d7c23c7930fb6f9d9dd64dd96f7722e', class: `${baseClass}__slot--content` }, h("slot", { key: '3e2acb4019949fc90f9f6bbda6d829e9b228d2d2', name: "content" })), h("div", { key: '5abd52bb62c8fe4b6b2cf10f849c667dd8df76cf', class: `${baseClass}__slot--footer` }, h("slot", { key: '5248569735398164a6ad2225bdfe2dac361e6054', name: "footer" }))), h("div", { key: 'd3a6ef89385a9c6ec491e6ed2fac338a05715d9f', class: {
                 [`${baseClass}__image-container`]: true,
                 [`${baseClass}__image-container--has-image`]: this.hasImageSlot,
-            } }, h("slot", { key: '5cb49383eb2f46625978789a6947323af8635e10', name: "image", onSlotchange: () => this.checkImageSlot() }))));
+            } }, h("slot", { key: 'f7f1312e89ab36c7f6546ba6b840eb23d571fe17', name: "image", onSlotchange: () => this.checkImageSlot() }))));
     }
     static get is() { return "ds-card"; }
     static get encapsulation() { return "scoped"; }
@@ -452,4 +453,4 @@ export class DsCard {
             }];
     }
 }
-declareComponentDependencies([h("ds-icon", { dsName: "" })]);
+declareComponentDependencies([h("ds-icon", { dsName: "" }), h("ds-visually-hidden", null)]);

package/dist/collection/components/01-base-components/ds-card/stories/ds-card.examples.interactive-heading.stories.js CHANGED Viewed

@@ -26,6 +26,7 @@ export const InteractiveHeadingProfile = {
         dsSubtitle: 'Professori',
         dsDescription: 'Molekulaaristen ja integratiivisten biotieteiden tutkimusohjelma',
         dsUrl: 'https://www.helsinki.fi',
+        dsUrlTarget: '_self',
         dsHorizontal: true,
         imageSlot: `<ds-media ds-fluid="true" slot="image" ds-src="assets/placeholder.svg" ds-type="image" ds-alt="Placeholder image" ds-aspect-ratio="1/1"></ds-media>`,
         contentSlot: `<div slot="content" style="padding: 1rem;"><ds-link ds-href="mailto:etunimi.sukunimi@helsinki.fi" ds-text="etunimi.sukunimi@helsinki.fi"></ds-link><br/><ds-link ds-href="tel:0405242732" ds-text="0405242732"></ds-link></div>`,
@@ -38,6 +39,7 @@ export const InteractiveHeadingProfile = {
       ds-description=${ifDefined(args.dsDescription)}
       ds-subtitle=${ifDefined(args.dsSubtitle)}
       ds-url=${ifDefined(args.dsUrl)}
+      ds-url-target=${ifDefined(args.dsUrlTarget)}
       ds-horizontal=${ifDefined(args.dsHorizontal)}
     >
       ${unsafeHTML(args.imageSlot)} ${unsafeHTML(args.contentSlot)}
@@ -52,21 +54,25 @@ export const InteractiveHeadingCourse = {
         dsTag: 'Avoin yliopisto',
         dsDescription: 'Tämä monialainen kurssi on osa Luonnontieteet nyt ja tulevaisuudessa -ohjelmaa. Aihetta käsitellään monipuolisesti tähtitieteen ja muiden luonnontieteiden näkökulmasta. Kurssilla tuodaan myös esille ura -ja harrastusmahdollisuuksia.',
         dsUrl: 'https://www.helsinki.fi',
+        dsUrlTarget: '_self',
         imageSlot: `<ds-media slot="image" ds-src="assets/placeholder.svg" ds-type="image" ds-alt="Placeholder image" ds-aspect-ratio="16/10"></ds-media>`,
         contentSlot: `<div slot="content" style="padding: 1rem; display:flex; gap:1rem; align-content: center;"><div style="display: flex; align-items: center; gap: 0.5rem;"><ds-icon ds-name="calendar_today" ds-size="1.25rem"></ds-icon><span class="ds-text-regular-xs">Ilmoittautuminen: 10.5.2022–1.6.2022</span></div><div style="display: flex; align-items: center; gap: 0.5rem;"><ds-icon ds-name="schedule" ds-size="1.25rem"></ds-icon><span class="ds-text-regular-xs">Opetusaika: 1.8.2022–1.11.2022</span></div></div>`,
         footerSlot: `<div slot="footer" style="padding: 0 1rem 1rem;"><div style="display: flex; flex-wrap: wrap; gap: 0.5rem;"><ds-tag ds-colour="info" ds-label="Kurssi"></ds-tag><ds-tag ds-colour="black" ds-label="Suomi"></ds-tag><ds-tag ds-label="Ruotsi"></ds-tag><ds-tag ds-colour="attention" ds-label="Englanti"></ds-tag><ds-tag ds-label="Muu kieli"></ds-tag></div></div>`,
     },
     render: args => html `
-    <ds-card
-      ds-link-type=${ifDefined(args.dsLinkType)}
-      ds-heading=${args.dsHeading}
-      ds-heading-level=${ifDefined(args.dsHeadingLevel)}
-      ds-description=${ifDefined(args.dsDescription)}
-      ds-tag=${ifDefined(args.dsTag)}
-      ds-url=${ifDefined(args.dsUrl)}
-    >
-      ${unsafeHTML(args.imageSlot)} ${unsafeHTML(args.contentSlot)} ${unsafeHTML(args.footerSlot)}
-    </ds-card>
+    <div style="max-width: 350px;">
+      <ds-card
+        ds-link-type=${ifDefined(args.dsLinkType)}
+        ds-heading=${args.dsHeading}
+        ds-heading-level=${ifDefined(args.dsHeadingLevel)}
+        ds-description=${ifDefined(args.dsDescription)}
+        ds-tag=${ifDefined(args.dsTag)}
+        ds-url=${ifDefined(args.dsUrl)}
+        ds-url-target=${ifDefined(args.dsUrlTarget)}
+      >
+        ${unsafeHTML(args.imageSlot)} ${unsafeHTML(args.contentSlot)} ${unsafeHTML(args.footerSlot)}
+      </ds-card>
+    </div>
   `,
 };
 export const InteractiveHeadingOutlined = {
@@ -78,21 +84,25 @@ export const InteractiveHeadingOutlined = {
         dsSubtitle: 'YET-034a | 2 op | järmo jääskeläinen | Opetuskieli: suomi',
         dsDescription: 'Kurssi tutustuttaa perusmatematiikkaan, jota tarvitaan tieteellisen keskustelun hahmottamiseen (viikko-ohjelma 1. reaaliluvuilla laskemisesta, 2. yhtälöistä ja epäyhtälöistä, 3. funktioista, 4. yhtälöparit). Tervetuloa matematiikan pariin!',
         dsUrl: 'https://www.helsinki.fi',
+        dsUrlTarget: '_self',
         contentSlot: `<div slot="content" style="padding: 1rem;"><div style="margin-bottom: 0.5rem;"><span class="ds-text-regular-xs">Osallistuminen opetukseen 10.5.2022–1.6.2022</span></div><div style="display: flex; align-items: center; gap: 0.5rem;"><span style="width: 12px; height: 12px; background: red; border-radius: 50%;"></span><span class="ds-text-regular-xs">Ilmoittautuminen päättynyt</span></div></div>`,
         footerSlot: `<div slot="footer" style="padding: 0 1rem 1rem;"><ds-tag ds-colour="info">Avoin yliopisto</ds-button></div>`,
     },
     render: args => html `
-    <ds-card
-      ds-link-type=${ifDefined(args.dsLinkType)}
-      ds-variant=${ifDefined(args.dsVariant)}
-      ds-heading=${args.dsHeading}
-      ds-heading-level=${ifDefined(args.dsHeadingLevel)}
-      ds-description=${ifDefined(args.dsDescription)}
-      ds-subtitle=${ifDefined(args.dsSubtitle)}
-      ds-url=${ifDefined(args.dsUrl)}
-    >
-      ${unsafeHTML(args.contentSlot)} ${unsafeHTML(args.footerSlot)}
-    </ds-card>
+    <div style="max-width: 350px;">
+      <ds-card
+        ds-link-type=${ifDefined(args.dsLinkType)}
+        ds-variant=${ifDefined(args.dsVariant)}
+        ds-heading=${args.dsHeading}
+        ds-heading-level=${ifDefined(args.dsHeadingLevel)}
+        ds-description=${ifDefined(args.dsDescription)}
+        ds-subtitle=${ifDefined(args.dsSubtitle)}
+        ds-url=${ifDefined(args.dsUrl)}
+        ds-url-target=${ifDefined(args.dsUrlTarget)}
+      >
+        ${unsafeHTML(args.contentSlot)} ${unsafeHTML(args.footerSlot)}
+      </ds-card>
+    </div>
   `,
 };
 export const InteractiveHeadingWithAccordion = {
@@ -104,20 +114,24 @@ export const InteractiveHeadingWithAccordion = {
         dsSubtitle: 'YET-034a | 2 op | järmo jääskeläinen | Opetuskieli: suomi',
         dsDescription: 'Kurssi tutustuttaa perusmatemaattikaan, jota tarvitaan tietellissein keskustelun hahmottamiseen (viikko-ohjelma 1, reaaliluvuilla laskemisesta, 2, yhtälöistä ja epäyhtälöistä, 3, funktioista, 4, yhtälöparit). Tervetuloa matematiikan pariin!',
         dsUrl: 'https://www.helsinki.fi',
+        dsUrlTarget: '_self',
         contentSlot: `<div slot="content" style="padding: 1rem; display: flex; gap: 1rem; align-items: center"><div><span class="ds-text-regular-xs">Osallistuminen opetukseen 10.5.2022–1.6.2022</span></div><div style="display: flex; align-items: center; gap: 0.5rem;"><span style="width: 12px; height: 12px; background: #d71f19; border-radius: 50%;"></span><span class="ds-text-regular-xs">Ilmoittautuminen päättynyt</span></div></div>`,
         footerSlot: `<div slot="footer"><ds-accordion ds-heading-level="4" ds-hide-bottom-border="true"><div slot="header">Lisätietoja</div><div slot="content"><p>Additional course information and details would go here.</p></div></ds-accordion></div>`,
     },
     render: args => html `
-    <ds-card
-      ds-link-type=${ifDefined(args.dsLinkType)}
-      ds-variant=${ifDefined(args.dsVariant)}
-      ds-heading=${args.dsHeading}
-      ds-heading-level=${ifDefined(args.dsHeadingLevel)}
-      ds-description=${ifDefined(args.dsDescription)}
-      ds-subtitle=${ifDefined(args.dsSubtitle)}
-      ds-url=${ifDefined(args.dsUrl)}
-    >
-      ${unsafeHTML(args.contentSlot)} ${unsafeHTML(args.footerSlot)}
-    </ds-card>
+    <div style="max-width: 350px;">
+      <ds-card
+        ds-link-type=${ifDefined(args.dsLinkType)}
+        ds-variant=${ifDefined(args.dsVariant)}
+        ds-heading=${args.dsHeading}
+        ds-heading-level=${ifDefined(args.dsHeadingLevel)}
+        ds-description=${ifDefined(args.dsDescription)}
+        ds-subtitle=${ifDefined(args.dsSubtitle)}
+        ds-url=${ifDefined(args.dsUrl)}
+        ds-url-target=${ifDefined(args.dsUrlTarget)}
+      >
+        ${unsafeHTML(args.contentSlot)} ${unsafeHTML(args.footerSlot)}
+      </ds-card>
+    </div>
   `,
 };

package/dist/collection/components/01-base-components/ds-card/stories/ds-card.examples.interactive-none.stories.js CHANGED Viewed

@@ -53,14 +53,16 @@ export const InteractiveNoneWithLink = {
         contentSlot: `<div slot="content" style="margin: 1rem;"><ds-link ds-href="https://www.helsinki.fi" ds-text="Link text"></ds-link></div>`,
     },
     render: args => html `
-    <ds-card
-      ds-link-type=${ifDefined(args.dsLinkType)}
-      ds-heading=${args.dsHeading}
-      ds-heading-level=${ifDefined(args.dsHeadingLevel)}
-      ds-description=${ifDefined(args.dsDescription)}
-    >
-      ${unsafeHTML(args.imageSlot)} ${unsafeHTML(args.contentSlot)}
-    </ds-card>
+    <div style="max-width: 350px;">
+      <ds-card
+        ds-link-type=${ifDefined(args.dsLinkType)}
+        ds-heading=${args.dsHeading}
+        ds-heading-level=${ifDefined(args.dsHeadingLevel)}
+        ds-description=${ifDefined(args.dsDescription)}
+      >
+        ${unsafeHTML(args.imageSlot)} ${unsafeHTML(args.contentSlot)}
+      </ds-card>
+    </div>
   `,
 };
 export const InteractiveNoneWithButtons = {
@@ -75,16 +77,18 @@ export const InteractiveNoneWithButtons = {
         footerSlot: `<div slot="footer" style="margin: 1rem;"><ds-button ds-variant="primary" style="margin-right: 1rem;">Primary</ds-button><ds-button ds-variant="secondary">Secondary</ds-button></div>`,
     },
     render: args => html `
-    <ds-card
-      ds-link-type=${ifDefined(args.dsLinkType)}
-      ds-heading=${args.dsHeading}
-      ds-heading-level=${ifDefined(args.dsHeadingLevel)}
-      ds-description=${ifDefined(args.dsDescription)}
-      ds-subtitle=${ifDefined(args.dsSubtitle)}
-      ds-tag=${ifDefined(args.dsTag)}
-    >
-      ${unsafeHTML(args.imageSlot)} ${unsafeHTML(args.footerSlot)}
-    </ds-card>
+    <div style="max-width: 350px;">
+      <ds-card
+        ds-link-type=${ifDefined(args.dsLinkType)}
+        ds-heading=${args.dsHeading}
+        ds-heading-level=${ifDefined(args.dsHeadingLevel)}
+        ds-description=${ifDefined(args.dsDescription)}
+        ds-subtitle=${ifDefined(args.dsSubtitle)}
+        ds-tag=${ifDefined(args.dsTag)}
+      >
+        ${unsafeHTML(args.imageSlot)} ${unsafeHTML(args.footerSlot)}
+      </ds-card>
+    </div>
   `,
 };
 export const InteractiveNoneSimple = {
@@ -96,14 +100,16 @@ export const InteractiveNoneSimple = {
         imageSlot: `<ds-media slot="image" ds-src="assets/placeholder.svg" ds-type="image" ds-alt="Placeholder image" ds-aspect-ratio="16/10"></ds-media>`,
     },
     render: args => html `
-    <ds-card
-      ds-link-type=${ifDefined(args.dsLinkType)}
-      ds-heading=${args.dsHeading}
-      ds-heading-level=${ifDefined(args.dsHeadingLevel)}
-      ds-description=${ifDefined(args.dsDescription)}
-    >
-      ${unsafeHTML(args.imageSlot)}
-    </ds-card>
+    <div style="max-width: 350px;">
+      <ds-card
+        ds-link-type=${ifDefined(args.dsLinkType)}
+        ds-heading=${args.dsHeading}
+        ds-heading-level=${ifDefined(args.dsHeadingLevel)}
+        ds-description=${ifDefined(args.dsDescription)}
+      >
+        ${unsafeHTML(args.imageSlot)}
+      </ds-card>
+    </div>
   `,
 };
 export const InteractiveNoneHorizontal = {
@@ -136,13 +142,15 @@ export const InteractiveNoneWithAccordion = {
         footerSlot: `<div slot="footer"><ds-accordion ds-heading-level="4" ds-hide-bottom-border="true" ><div slot="header">Accordion title</div><div slot="content"><p>Accordion content goes here</p></ds-accordion></div>`,
     },
     render: args => html `
-    <ds-card
-      ds-link-type=${ifDefined(args.dsLinkType)}
-      ds-heading=${args.dsHeading}
-      ds-heading-level=${ifDefined(args.dsHeadingLevel)}
-      ds-description=${ifDefined(args.dsDescription)}
-    >
-      ${unsafeHTML(args.footerSlot)}
-    </ds-card>
+    <div style="max-width: 350px;">
+      <ds-card
+        ds-link-type=${ifDefined(args.dsLinkType)}
+        ds-heading=${args.dsHeading}
+        ds-heading-level=${ifDefined(args.dsHeadingLevel)}
+        ds-description=${ifDefined(args.dsDescription)}
+      >
+        ${unsafeHTML(args.footerSlot)}
+      </ds-card>
+    </div>
   `,
 };