@uh-design-system/component-library 1.1.0 → 1.2.0-rc.0

package/dist/collection/components/01-base-components/ds-accordion/ds-accordion.js

@@ -1,24 +1,51 @@
 import { h } from "@stencil/core";
 import classNames from "classnames";
-import { declareComponentDependencies, transformTagName } from "../../../utils/utils";
+import { declareComponentDependencies, idGenerator, transformTagName } from "../../../utils/utils";
 import { cx } from "../../../utils/cx";
 import { inheritAriaAttributes, inheritAttributes } from "../../../utils/attributes/attributes";
+import { getLanguage } from "../../../store";
+const dsAccordionIdGenerator = idGenerator('ds-accordion');
 export class DsAccordion {
     inheritedAttributes = {};
     el;
     dsVariant = 'default';
     dsBorderAligned = false;
     dsOpenByDefault = false;
-    dsId = 'dsaccordion';
+    dsId = dsAccordionIdGenerator.next().value;
     dsHeadingLevel = 2;
     dsUseCloseButton = false;
-    dsCloseButtonLabel = 'Close';
+    dsCloseButtonLabel;
     dsHideTopBorder = false;
+    dsHideRightBorder = true;
     dsHideBottomBorder = false;
+    dsHideLeftBorder = true;
+    dsHeadingVariant = 'button';
+    dsAriaDescribedBy;
+    dsAriaLabelledBy;
+    dsContentHasBackground = true;
     isExpanded = false;
     dsToggle;
     headerButtonRef;
     shouldMoveFocus = false;
+    get ariaLabelledBy() {
+        return [this.dsId, this.dsAriaLabelledBy].filter(Boolean).join(' ');
+    }
+    get DsButton() {
+        return transformTagName('ds-button', 'ds-accordion', this.el);
+    }
+    get DsIcon() {
+        return transformTagName('ds-icon', 'ds-accordion', this.el);
+    }
+    get close() {
+        switch (getLanguage()) {
+            case 'fi':
+                return 'Sulje';
+            case 'sv':
+                return 'Stäng';
+            default:
+                return 'Close';
+        }
+    }
     componentWillLoad() {
         if (this.dsOpenByDefault) {
             this.isExpanded = true;
@@ -52,25 +79,51 @@ export class DsAccordion {
             }
         }
     };
+    renderHeading(baseClass) {
+        const getOpenButtonHideBottomBorder = () => {
+            if (this.dsHeadingVariant === 'button') {
+                return this.isExpanded || this.dsHideBottomBorder;
+            }
+            return !this.isExpanded && this.dsHideBottomBorder;
+        };
+        const buttonHeadingAttributes = this.dsHeadingVariant === 'button'
+            ? {
+                'role': 'heading',
+                'aria-level': this.dsHeadingLevel,
+            }
+            : {};
+        return (h("div", { class: classNames(`${baseClass}__title`, {
+                [`${baseClass}__title--with-background`]: this.dsContentHasBackground,
+                [`${baseClass}__title--border-aligned`]: this.dsBorderAligned,
+                [`${baseClass}__title--hide-top-border`]: this.dsHideTopBorder,
+                [`${baseClass}__title--hide-right-border`]: this.dsHideRightBorder,
+                [`${baseClass}__title--hide-left-border`]: this.dsHideLeftBorder,
+            }), ...buttonHeadingAttributes }, this.dsHeadingVariant === 'icon-button' && (h("div", { class: classNames(`${baseClass}__header-slot`, `${baseClass}__header-slot--${this.dsVariant}`, `${baseClass}__header-slot--${this.dsHeadingVariant}`, {
+                [`${baseClass}__header-slot--hide-top-border`]: this.dsHideTopBorder,
+                [`${baseClass}__header-slot--hide-bottom-border`]: !this.isExpanded && this.dsHideBottomBorder,
+            }) }, h("slot", { name: "header" }))), h("button", { class: classNames(`${baseClass}__open-button`, `${baseClass}__open-button--${this.dsVariant}`, `${baseClass}__open-button--${this.dsHeadingVariant}`, {
+                [`${baseClass}__open-button--border-aligned`]: this.dsBorderAligned,
+                [`${baseClass}__open-button--hide-bottom-border`]: getOpenButtonHideBottomBorder(),
+            }), onClick: this.handleClick, onKeyDown: this.handleKeyDown, "aria-expanded": this.isExpanded ? 'true' : 'false', "aria-controls": `${this.dsId}-panel`, "aria-describedby": this.dsAriaDescribedBy, "aria-labelledby": this.ariaLabelledBy, id: this.dsId, ref: el => (this.headerButtonRef = el), type: "button" }, h("span", { class: classNames(`${baseClass}__open-button__icon`, `${baseClass}__open-button__icon--${this.dsVariant}`), "aria-hidden": "true" }, h(this.DsIcon, { dsSize: "1.5rem", dsHidden: true, dsName: this.isExpanded ? 'keyboard_arrow_up' : 'keyboard_arrow_down' })), this.dsHeadingVariant === 'button' && (h("span", { class: classNames(`${baseClass}__open-button__header-slot`, `${baseClass}__open-button__header-slot--${this.dsVariant}`) }, h("slot", { name: "header" }))))));
+    }
     render() {
-        const iconSize = this.dsVariant === 'compact' ? '1.5rem' : '2rem';
-        const buttonSize = this.dsVariant === 'compact' ? 'small' : 'medium';
-        const DsButton = transformTagName('ds-button', 'ds-accordion', this.el);
-        const DsIcon = transformTagName('ds-icon', 'ds-accordion', this.el);
         const baseClass = cx('ds-accordion');
-        return (h("div", { key: '7b99da8ecf18d36bfd6210f73d94d91c1d3257b2', class: classNames(baseClass, `${baseClass}--${this.dsVariant}`, {
-                [`${baseClass}--border-aligned`]: this.dsBorderAligned,
-            }), ...this.inheritedAttributes }, h("div", { key: '721a08a79ab20ec81f5af744aca7f47f9c28fd19', class: `${baseClass}__item` }, h("div", { key: 'f5124df5cb2774e83de3e6ad6905b4de34087dea', role: "heading", "aria-level": this.dsHeadingLevel, class: `${baseClass}__title` }, h("button", { key: 'c3b3b4b5ec29fc5485fd69f3b0c6b67a765bc45a', class: classNames(`${baseClass}__open-button`, `${baseClass}--${this.dsVariant}`, {
-                [`${baseClass}--border-aligned`]: this.dsBorderAligned,
-                [`${baseClass}--hide-top-border`]: this.dsHideTopBorder,
-                [`${baseClass}--hide-bottom-border`]: this.dsHideBottomBorder,
-            }), onClick: this.handleClick, onKeyDown: this.handleKeyDown, "aria-expanded": this.isExpanded ? 'true' : 'false', "aria-controls": `${this.dsId}-panel`, id: this.dsId, ref: el => (this.headerButtonRef = el), type: "button" }, h("span", { key: 'b466555f9933f38ffc1c2872feaea7dabba93fa8', class: `${baseClass}__icon`, "aria-hidden": "true" }, this.isExpanded ? (h(DsIcon, { dsSize: iconSize, dsHidden: true, dsName: "keyboard_arrow_up" })) : (h(DsIcon, { dsSize: iconSize, dsHidden: true, dsName: "keyboard_arrow_down" }))), h("slot", { key: 'c81e29864398d7ef384f2e658d10dc9123895488', name: "header" }))), h("div", { key: 'b34c9d668b0a9dc41da25b2bcd24d4b4c1e28883', id: `${this.dsId}-panel`, role: "region", "aria-labelledby": this.dsId, class: classNames(`${baseClass}__panel`, `${baseClass}__panel--${this.dsVariant}`, {
-                [`${baseClass}__panel--border-aligned`]: this.dsBorderAligned,
+        return (h("div", { key: '52a04479b59a988e1f2b2f7630706f7bc2140d41', class: classNames(baseClass, `${baseClass}--${this.dsVariant}`, {
+                [`${baseClass}--expanded`]: this.isExpanded,
+                [`${baseClass}--with-background`]: this.dsContentHasBackground,
+            }), ...this.inheritedAttributes }, h("div", { key: 'c197d0d374001249c03e05624391b039106390fb', class: `${baseClass}__item` }, this.renderHeading(baseClass), h("div", { key: '44f0a439f6ff42951ecdd41528a90971a3117aa6', id: `${this.dsId}-panel`, role: "region", "aria-labelledby": this.dsId, class: classNames(`${baseClass}__panel`, `${baseClass}__panel--${this.dsVariant}`, {
                 [`${baseClass}__panel--expanded`]: this.isExpanded,
-                [`${baseClass}__panel--hide-bottom-border`]: this.dsHideBottomBorder,
-            }), hidden: !this.isExpanded }, h("div", { key: '4ccc901a02799d39641145366730bf1726f95cf0', class: `${baseClass}__content` }, h("slot", { key: '7027a2e3dc1784ecfe8be6f18a12c7a2b414affb', name: "content" })), this.dsUseCloseButton && (h(DsButton, { key: 'fc4ba607169579bf4caa03736fd8d585810dd83d', id: `${this.dsId}-close-button`, class: classNames(`${baseClass}__close-button`, `${baseClass}--${this.dsVariant}`, {
-                [`${baseClass}--border-aligned`]: this.dsBorderAligned,
-            }), dsVariant: "supplementary", dsColour: "black", dsIcon: "keyboard_arrow_up", dsIconPosition: "start", onClick: this.handleClick, onKeyDown: this.handleKeyDown, dsText: this.dsCloseButtonLabel, dsSize: buttonSize, dsType: "button" }))))));
+                [`${baseClass}__panel--with-background`]: this.dsContentHasBackground,
+                [`${baseClass}__panel--hide-right-border`]: this.dsHideRightBorder,
+                [`${baseClass}__panel--hide-left-border`]: this.dsHideLeftBorder,
+            }), hidden: !this.isExpanded }, h("div", { key: 'ddbba44c343a26cd8fef09a5aa421d4fc614c92f', class: classNames(`${baseClass}__content`, {
+                'ds-bodytext-lg': this.dsVariant === 'default',
+                'ds-bodytext-md': this.dsVariant === 'compact',
+                [`${baseClass}__content--border-aligned`]: this.dsBorderAligned,
+                [`${baseClass}__content--with-background`]: this.dsContentHasBackground,
+                [`${baseClass}__content--hide-bottom-border`]: this.dsHideBottomBorder,
+                [`${baseClass}__content--has-close-button`]: this.dsUseCloseButton,
+            }) }, h("slot", { key: '77d611954d9371bcb399ec264a80ba74c765b384', name: "content" }), this.dsUseCloseButton && (h(this.DsButton, { key: '6de9aec13d8077b610885d5bd323a737e8cb61e4', id: `${this.dsId}-close-button`, class: `${baseClass}__close-button`, dsVariant: "supplementary", dsColour: "black", dsIcon: "keyboard_arrow_up", dsIconPosition: "start", onClick: this.handleClick, onKeyDown: this.handleKeyDown, dsText: this.dsCloseButtonLabel || this.close, dsSize: this.dsVariant === 'compact' ? 'small' : 'medium', dsType: "button" })))))));
     }
     static get is() { return "ds-accordion"; }
     static get encapsulation() { return "scoped"; }
@@ -98,7 +151,7 @@ export class DsAccordion {
                 "optional": false,
                 "docs": {
                     "tags": [],
-                    "text": "Variant of the accordion"
+                    "text": "Variant of the accordion:\n- `default`: Standard spacing and font sizes.\n- `compact`: Reduced spacing and font sizes, for denser display of content."
                 },
                 "getter": false,
                 "setter": false,
@@ -118,7 +171,7 @@ export class DsAccordion {
                 "optional": false,
                 "docs": {
                     "tags": [],
-                    "text": "Aligns the border to the position where accordion content starts"
+                    "text": "If true, aligns the border to the position where accordion content starts.\nUse cases include side panels or sidebars to achieve better text alignment with other content."
                 },
                 "getter": false,
                 "setter": false,
@@ -138,7 +191,7 @@ export class DsAccordion {
                 "optional": false,
                 "docs": {
                     "tags": [],
-                    "text": "Displays the accordion as opened when loaded"
+                    "text": "If true, displays the accordion as opened when loaded"
                 },
                 "getter": false,
                 "setter": false,
@@ -164,7 +217,7 @@ export class DsAccordion {
                 "setter": false,
                 "reflect": false,
                 "attribute": "ds-id",
-                "defaultValue": "'dsaccordion'"
+                "defaultValue": "dsAccordionIdGenerator.next().value as string"
             },
             "dsHeadingLevel": {
                 "type": "number",
@@ -198,7 +251,7 @@ export class DsAccordion {
                 "optional": false,
                 "docs": {
                     "tags": [],
-                    "text": "Displays a close button at the end of an opened accordion"
+                    "text": "If true, displays a close button at the end of an opened accordion.\nUse cases include accordions with long content where scrolling back\nto the header to close the accordion would be inconvenient."
                 },
                 "getter": false,
                 "setter": false,
@@ -215,7 +268,7 @@ export class DsAccordion {
                     "references": {}
                 },
                 "required": false,
-                "optional": false,
+                "optional": true,
                 "docs": {
                     "tags": [],
                     "text": "Text of the close button"
@@ -223,8 +276,7 @@ export class DsAccordion {
                 "getter": false,
                 "setter": false,
                 "reflect": false,
-                "attribute": "ds-close-button-label",
-                "defaultValue": "'Close'"
+                "attribute": "ds-close-button-label"
             },
             "dsHideTopBorder": {
                 "type": "boolean",
@@ -238,7 +290,7 @@ export class DsAccordion {
                 "optional": false,
                 "docs": {
                     "tags": [],
-                    "text": "Removes the top border"
+                    "text": "If true, removes the top border"
                 },
                 "getter": false,
                 "setter": false,
@@ -246,6 +298,26 @@ export class DsAccordion {
                 "attribute": "ds-hide-top-border",
                 "defaultValue": "false"
             },
+            "dsHideRightBorder": {
+                "type": "boolean",
+                "mutable": false,
+                "complexType": {
+                    "original": "boolean",
+                    "resolved": "boolean",
+                    "references": {}
+                },
+                "required": false,
+                "optional": false,
+                "docs": {
+                    "tags": [],
+                    "text": "If true, removes the right border"
+                },
+                "getter": false,
+                "setter": false,
+                "reflect": false,
+                "attribute": "ds-hide-right-border",
+                "defaultValue": "true"
+            },
             "dsHideBottomBorder": {
                 "type": "boolean",
                 "mutable": false,
@@ -258,13 +330,111 @@ export class DsAccordion {
                 "optional": false,
                 "docs": {
                     "tags": [],
-                    "text": "Removes the bottom border"
+                    "text": "If true, removes the bottom border"
                 },
                 "getter": false,
                 "setter": false,
                 "reflect": false,
                 "attribute": "ds-hide-bottom-border",
                 "defaultValue": "false"
+            },
+            "dsHideLeftBorder": {
+                "type": "boolean",
+                "mutable": false,
+                "complexType": {
+                    "original": "boolean",
+                    "resolved": "boolean",
+                    "references": {}
+                },
+                "required": false,
+                "optional": false,
+                "docs": {
+                    "tags": [],
+                    "text": "If true, removes the left border"
+                },
+                "getter": false,
+                "setter": false,
+                "reflect": false,
+                "attribute": "ds-hide-left-border",
+                "defaultValue": "true"
+            },
+            "dsHeadingVariant": {
+                "type": "string",
+                "mutable": false,
+                "complexType": {
+                    "original": "'button' | 'icon-button'",
+                    "resolved": "\"button\" | \"icon-button\"",
+                    "references": {}
+                },
+                "required": false,
+                "optional": false,
+                "docs": {
+                    "tags": [],
+                    "text": "Heading variant of the accordion:\n- `button`: Heading button takes the full width of the header. The header content is inside the button.\n- `icon-button`: Heading button is styled as an icon button. The header content is separate from the button."
+                },
+                "getter": false,
+                "setter": false,
+                "reflect": false,
+                "attribute": "ds-heading-variant",
+                "defaultValue": "'button'"
+            },
+            "dsAriaDescribedBy": {
+                "type": "string",
+                "mutable": false,
+                "complexType": {
+                    "original": "string",
+                    "resolved": "string",
+                    "references": {}
+                },
+                "required": false,
+                "optional": true,
+                "docs": {
+                    "tags": [],
+                    "text": "Passed to the `aria-describedby` attribute of the heading `button` element."
+                },
+                "getter": false,
+                "setter": false,
+                "reflect": false,
+                "attribute": "ds-aria-described-by"
+            },
+            "dsAriaLabelledBy": {
+                "type": "string",
+                "mutable": false,
+                "complexType": {
+                    "original": "string",
+                    "resolved": "string",
+                    "references": {}
+                },
+                "required": false,
+                "optional": true,
+                "docs": {
+                    "tags": [],
+                    "text": "Passed to the `aria-labelledby` attribute of the heading `button` element.\nShould be set when `dsHeadingVariant` is `icon-button`."
+                },
+                "getter": false,
+                "setter": false,
+                "reflect": false,
+                "attribute": "ds-aria-labelled-by"
+            },
+            "dsContentHasBackground": {
+                "type": "boolean",
+                "mutable": false,
+                "complexType": {
+                    "original": "boolean",
+                    "resolved": "boolean",
+                    "references": {}
+                },
+                "required": false,
+                "optional": false,
+                "docs": {
+                    "tags": [],
+                    "text": "If true, adds a background color to the accordion content area"
+                },
+                "getter": false,
+                "setter": false,
+                "reflect": false,
+                "attribute": "ds-content-has-background",
+                "defaultValue": "true"
             }
         };
     }

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

@@ -5,13 +5,15 @@ const meta = {
     component: 'ds-accordion',
 };
 const exampleHeader = generateLoremIpsum();
-const exampleContent = generateLoremIpsum({ paragraphs: 3, wordsPerParagraph: 30 });
+const exampleContent = generateLoremIpsum({ paragraphs: 3, wordsPerParagraph: 30, consistent: true });
 export default meta;
 export const WithLinkInBody = {
-    render: () => html ` <ds-accordion>
+    render: () => html `
+    <ds-accordion>
       <div slot="header">${exampleHeader}</div>
       <div slot="content">${exampleContent} <a href="#">example link</a>, ${exampleContent}</div>
-    </ds-accordion>`,
+    </ds-accordion>
+  `,
 };
 export const WithInputInBody = {
     render: () => html ` <ds-accordion ds-variant="compact">
@@ -25,15 +27,15 @@ export const WithInputInBody = {
 };
 export const MultipleAccordions = {
     render: () => html `
-    <ds-accordion ds-id="ac-1">
+    <ds-accordion ds-id="ac-1" ds-hide-bottom-border="true">
       <div slot="header">First Accordion</div>
       <div slot="content">${exampleContent}</div>
     </ds-accordion>
-    <ds-accordion ds-id="ac-2">
+    <ds-accordion ds-id="ac-2" ds-hide-bottom-border="true">
       <div slot="header">Second Accordion</div>
       <div slot="content">${exampleContent}</div>
     </ds-accordion>
-    <ds-accordion ds-id="ac-3">
+    <ds-accordion ds-id="ac-3" ds-hide-bottom-border="false">
       <div slot="header">Third Accordion</div>
       <div slot="content">${exampleContent}</div>
     </ds-accordion>
@@ -41,11 +43,11 @@ export const MultipleAccordions = {
 };
 export const LongTitles = {
     render: () => html `
-    <ds-accordion ds-id="ac-1">
+    <ds-accordion ds-id="ac-1" ds-hide-bottom-border="true">
       <div slot="header">${generateLoremIpsum({ paragraphs: 2, wordsPerParagraph: 20, consistent: true })}</div>
       <div slot="content">${exampleContent}</div>
     </ds-accordion>
-    <ds-accordion ds-id="ac-2">
+    <ds-accordion ds-id="ac-2" ds-hide-bottom-border="false">
       <div slot="header">${generateLoremIpsum({ paragraphs: 3, wordsPerParagraph: 30, consistent: true })}</div>
       <div slot="content">
         <p>${generateLoremIpsum({ paragraphs: 5, wordsPerParagraph: 20 })}</p>
@@ -54,3 +56,67 @@ export const LongTitles = {
     </ds-accordion>
   `,
 };
+export const LinkTitle = {
+    render: () => html `
+    <style>
+      .ds-sb-header {
+        padding: var(--ds-spacing-xSmall) var(--ds-spacing-small);
+      }
+      .ds-sb-header__content {
+        display: flex;
+        flex-direction: row;
+        align-items: center;
+        justify-content: space-between;
+        gap: 1rem;
+        font-weight: 600;
+        padding-block: 0.1875rem;
+
+        @media (min-width: 60rem) {
+          padding-block: 0.09375rem;
+        }
+      }
+      .ds-sb-header__content > small {
+        flex-shrink: 0;
+      }
+    </style>
+    <ds-accordion
+      ds-id="dsaccordion-icon-button"
+      ds-variant="default"
+      ds-heading-variant="icon-button"
+      ds-heading-level="2"
+      ds-hide-top-border="false"
+      ds-hide-right-border="false"
+      ds-hide-bottom-border="false"
+      ds-hide-left-border="false"
+      ds-content-has-background="false"
+      ds-aria-labelled-by="dsaccordion-icon-button-heading"
+    >
+      <div slot="header">
+        <div class="ds-sb-header">
+          <span id="dsaccordion-icon-button-heading" aria-level="2" role="heading" class="ds-bodytext-lg ds-sb-header__content">
+            <span>
+              TKT1
+              <ds-link ds-colour="black" ds-href="#" ds-text="Tietojen&shy;käsittely&shy;tiede, perus&shy;opinnot" ds-weight="semibold"></ds-link>
+            </span>
+            <small class="ds-text-regular-sm">25 op</small>
+          </span>
+        </div>
+      </div>
+      <div slot="content">${exampleContent}</div>
+    </ds-accordion>
+  `,
+};
+export const InCard = {
+    render: () => html `
+    <p class="ds-bodytext-lg">The accordion should reference the card header with <code>aria-labelledby</code>.</p>
+    <ds-card ds-description="${exampleContent}">
+      <div slot="heading" id="card-accordion-header" ds-heading="Card header">Card header</div>
+      <div slot="footer">
+        <ds-accordion ds-aria-labelled-by="card-accordion-header" ds-variant="compact" ds-hide-bottom-border="true">
+          <div slot="header">Accordion header</div>
+          <div slot="content">${exampleContent}</div>
+        </ds-accordion>
+      </div>
+    </ds-card>
+  `,
+};