@duetds/components 10.0.0-alpha.9 → 10.0.0

package/lib/collection/components/duet-collapsible/duet-collapsible.js

@@ -7,17 +7,74 @@ import { h, Host } from "@stencil/core";
 import { inheritGlobalTheme } from "../../common";
 import { createID } from "../../utils/create-id";
 import { isKeyboardClick, subscribeTabbingChange, unsubscribeTabbingChange } from "../../utils/keyboard-utils";
-import { hasSlot } from "../../utils/slot-utils";
-import { sanitizeString } from "../../utils/string-utils";
+import { checkNamedSlotElement, getElementsFromNamedSlot, getSlotTextContent, hasSlot } from "../../utils/slot-utils";
 /**
  * @part duet-collapsible-heading-content - piercing selector for styling the heading content
  * @part duet-collapsible-after-heading - piercing selector for styling the after heading
  * @part duet-collapsible-content - piercing selector for styling the content
  * @slot after-heading - Content after the heading can be for example badges.
+ * @slot heading - Instead of using heading property you can also use a native h1..h6 heading. Do not use a duet-heading here.
  */
 export class DuetCollapsible {
     constructor() {
         this.id = createID("DuetCollapsible");
+        this.headingTags = ["h1", "h2", "h3", "h4", "h5", "h6"];
+        /**
+         * Theme of the collapsible.
+         */
+        this.theme = "";
+        /**
+         * Negative variation for collapsible on dark background
+         */
+        this.negative = false;
+        /**
+         * The content for the collapsible heading.
+         */
+        this.heading = "";
+        /**
+         * The caption text to display below the heading.
+         */
+        this.caption = "";
+        /**
+         * Makes collapsible heading full width
+         */
+        this.headingFullWidth = false;
+        /**
+         * Centers heading inside its container
+         */
+        this.centerHeading = false;
+        /**
+         * The font weight of the heading
+         */
+        this.headingWeight = "semibold";
+        /**
+         * Custom headingSize to be used for font size of heading, as a design token entered
+         * in kebab-case x-small -> font-size-x-small.
+         * Example:
+         * # 12px (0.75rem)  ------  +2px   (x-small)
+         * # 14px (0.875rem) ------  +2px   (small)
+         * # 16px (1rem)     ------  +2px   (medium)
+         * # 20px (1.25rem)  ------  +4px   (large)
+         * # 24px (1.5rem)   ------  +4px   (x-large)
+         * # 36px (2.25rem)  ------  +12px  (xx-large)
+         * # 48px (3rem)     ------  +12px  (xxx-large)
+         * # 72px (4.5rem)   ------  +24px  (xxxx-large)
+         */
+        this.headingSize = undefined;
+        /**
+         * The actual heading level used for the heading in html markup. This setting
+         * exists for accessibility reasons. It doesn’t change the style visually.
+         * only variations of h1-h6 area accepted
+         */
+        this.headingLevel = undefined;
+        /**
+         * Controls the margin of the component.
+         */
+        this.margin = "auto";
+        /**
+         * Is the component expanded or collapsed.
+         */
+        this.open = false;
         this.handleKeyDown = (e) => {
             if (isKeyboardClick(e)) {
                 this.handleClick(e);
@@ -60,10 +117,20 @@ export class DuetCollapsible {
             if (this.accessibleLabel) {
                 return this.accessibleLabel;
             }
-            if (this.heading && this.caption) {
-                return `${this.heading}. ${this.caption}`;
+            const labelParts = [];
+            if (this.heading) {
+                labelParts.push(this.heading);
+            }
+            else if (this.hasHeadingSlot) {
+                labelParts.push(getSlotTextContent(this.element, "heading"));
+            }
+            if (this.hasAfterHeadingSlot) {
+                labelParts.push(getSlotTextContent(this.element, "after-heading"));
             }
-            return this.heading || null;
+            if (this.caption) {
+                labelParts.push(this.caption);
+            }
+            return labelParts.join(". ");
         };
         this.handleClick = (e) => {
             e.preventDefault();
@@ -73,25 +140,20 @@ export class DuetCollapsible {
                 originalEvent: e,
             });
         };
-        this.theme = "";
-        this.negative = false;
-        this.accessibleLabel = undefined;
-        this.heading = "";
-        this.caption = "";
-        this.headingFullWidth = false;
-        this.centerHeading = false;
-        this.headingWeight = "semibold";
-        this.headingSize = undefined;
-        this.headingLevel = undefined;
-        this.margin = "auto";
-        this.open = false;
     }
     /**
      * Component lifecycle events.
      */
     componentWillLoad() {
         inheritGlobalTheme(this);
-        this.hasAfterHeading = hasSlot(this.element, "after-heading");
+        this.hasAfterHeadingSlot = hasSlot(this.element, "after-heading");
+        this.hasHeadingSlot = hasSlot(this.element, "heading");
+        checkNamedSlotElement(this.element, "heading", this.headingTags.join(","));
+        // As the slotted heading is inside a button it is assigned a presentational role. To provide the correct
+        // level to assistive technologies we copy the slotted heading's level for the heading wrapping the button.
+        if (this.hasHeadingSlot) {
+            this.headingLevel = getElementsFromNamedSlot(this.element, "heading")[0].tagName.toLowerCase();
+        }
     }
     connectedCallback() {
         subscribeTabbingChange(this);
@@ -114,16 +176,16 @@ export class DuetCollapsible {
      * Always the last one in the class.
      */
     render() {
-        const HeadingTagName = this.headingLevel ? sanitizeString(this.headingLevel) : "div";
-        return (h(Host, { key: 'a5fe4a3b514f97ad69609df67489b6f2ff1d21a9', class: { "duet-m-0": this.margin === "none", negative: this.negative } }, h(HeadingTagName, { key: 'ec94994682ae88699a4f27b64486f6dd5edf9eff' }, h("button", { key: '9fe564ae09ba09b01f0f32a48cb8a7812e7c6145', class: {
+        const HeadingTagName = this.headingTags.includes(this.headingLevel) ? this.headingLevel : "div";
+        return (h(Host, { key: '33d42aa6613b1c4c8d7789ad32a4bc0e02cab4ad', class: { "duet-m-0": this.margin === "none", negative: this.negative } }, h(HeadingTagName, { key: '091f0117124e76f5f87b226fe216b69f587d706f' }, h("button", { key: 'efec916eea29062394e6e3938c1d26bf2efc1620', class: {
                 "duet-collapsible-heading": true,
                 "duet-collapsible-heading-centered": this.centerHeading,
                 "duet-theme-turva": this.theme === "turva",
                 "duet-collapsible-normal-weight": this.headingWeight === "normal",
-                "has-after-heading": this.hasAfterHeading,
+                "has-after-heading": this.hasAfterHeadingSlot,
                 "full-width": this.headingFullWidth,
                 "has-caption": !!this.caption,
-            }, style: { "font-size": this.getFontSizeFromTokens() }, role: "button", ref: button => (this.nativeButton = button), "aria-label": this.getAccessibleLabel(), "aria-expanded": this.open ? "true" : "false", "aria-controls": this.id, onClick: this.handleClick, onKeyDown: this.handleKeyDown }, h("div", { key: 'fe01498bf3b34196ef3f4a6bf03c02ecfe65bc86', class: "duet-collapsible-heading-wrapper" }, h("div", { key: '7497f1b30a5eb295c9d7ba158c39efd4878d9437', class: "duet-collapsible-heading-icon" }, h("duet-icon", { key: 'f81a6c6772d17cdf276e82757e405824166404dd', margin: "none", size: this.getEquivalentIconSize(), icon: icon.svg })), h("div", { key: '3c65eff49d214f709088e7a103e24d682a626def', class: "duet-collapsible-heading-content", part: "duet-collapsible-heading-content" }, this.heading), this.hasAfterHeading && (h("div", { key: '411a824a551f51d2d92e6e8f941b5efd5070f6ee', part: "duet-collapsible-after-heading" }, h("slot", { key: '1f5530cea4337eb7a4d20f56871e46ba23da9b63', name: "after-heading" })))), this.caption && (h("div", { key: '37286e360e8d4e35c3c80f11ef437a254614334f', class: "duet-collapsible-heading-caption" }, h("duet-caption", { key: '9ec1497e017210ed4c10d51a1b2cf547e22762bc', size: "small", margin: "none" }, this.caption))))), h("div", { key: '07125a3e519c372a606bcdc1b1744133ff679c03', id: this.id, class: { "duet-collapsible-content": true, "duet-theme-turva": this.theme === "turva" }, part: "duet-collapsible-content" }, h("slot", { key: '7ffb7925697f929df542a126431524e2c20dc233' }))));
+            }, style: { "font-size": this.getFontSizeFromTokens() }, role: "button", ref: button => (this.nativeButton = button), "aria-label": this.getAccessibleLabel(), "aria-expanded": this.open ? "true" : "false", "aria-controls": this.id, onClick: this.handleClick, onKeyDown: this.handleKeyDown }, h("div", { key: '933b0f2222b12e28df931954684fee098ce514e1', class: "duet-collapsible-heading-wrapper" }, h("div", { key: '11e4a5a8651be923cd1504af680534ed0ce74814', class: "duet-collapsible-heading-icon" }, h("duet-icon", { key: '01d74d252e5642f53f549a6bafe82dc709186355', margin: "none", size: this.getEquivalentIconSize(), icon: icon.svg })), h("div", { key: '4f61ec6445ea77d863d9fd61c670a981a88ca99a', class: "duet-collapsible-heading-content", part: "duet-collapsible-heading-content" }, this.heading ? this.heading : h("slot", { name: "heading" })), this.hasAfterHeadingSlot && (h("div", { key: '0a73d177f1fa62144044b314f07461b20a830d2b', part: "duet-collapsible-after-heading" }, h("slot", { key: '0a38479abd24db8891c488e7fdf19787ed9e9a55', name: "after-heading" })))), this.caption && (h("div", { key: 'b31a6d8a198093d28fa0fd0a552c0806ce86a986', class: "duet-collapsible-heading-caption" }, h("duet-caption", { key: 'b13eeb284c4e904f8782660acdf72201269288a2', size: "small", margin: "none" }, this.caption))))), h("div", { key: '7529c3164f4b457b85430f62e61d05648f1a5db4', id: this.id, class: { "duet-collapsible-content": true, "duet-theme-turva": this.theme === "turva" }, part: "duet-collapsible-content" }, h("slot", { key: '0124d76ffc82a087323436e7629a0bcbe535fc83' }))));
     }
     static get is() { return "duet-collapsible"; }
     static get encapsulation() { return "shadow"; }
@@ -141,6 +203,7 @@ export class DuetCollapsible {
         return {
             "theme": {
                 "type": "string",
+                "attribute": "theme",
                 "mutable": true,
                 "complexType": {
                     "original": "DuetTheme",
@@ -161,12 +224,12 @@ export class DuetCollapsible {
                 },
                 "getter": false,
                 "setter": false,
-                "attribute": "theme",
                 "reflect": false,
                 "defaultValue": "\"\""
             },
             "negative": {
                 "type": "boolean",
+                "attribute": "negative",
                 "mutable": false,
                 "complexType": {
                     "original": "boolean",
@@ -181,12 +244,12 @@ export class DuetCollapsible {
                 },
                 "getter": false,
                 "setter": false,
-                "attribute": "negative",
                 "reflect": false,
                 "defaultValue": "false"
             },
             "accessibleLabel": {
                 "type": "string",
+                "attribute": "accessible-label",
                 "mutable": false,
                 "complexType": {
                     "original": "string",
@@ -201,11 +264,11 @@ export class DuetCollapsible {
                 },
                 "getter": false,
                 "setter": false,
-                "attribute": "accessible-label",
                 "reflect": false
             },
             "heading": {
                 "type": "string",
+                "attribute": "heading",
                 "mutable": false,
                 "complexType": {
                     "original": "string",
@@ -220,12 +283,12 @@ export class DuetCollapsible {
                 },
                 "getter": false,
                 "setter": false,
-                "attribute": "heading",
                 "reflect": false,
                 "defaultValue": "\"\""
             },
             "caption": {
                 "type": "string",
+                "attribute": "caption",
                 "mutable": false,
                 "complexType": {
                     "original": "string",
@@ -240,12 +303,12 @@ export class DuetCollapsible {
                 },
                 "getter": false,
                 "setter": false,
-                "attribute": "caption",
                 "reflect": false,
                 "defaultValue": "\"\""
             },
             "headingFullWidth": {
                 "type": "boolean",
+                "attribute": "heading-full-width",
                 "mutable": false,
                 "complexType": {
                     "original": "boolean",
@@ -260,12 +323,12 @@ export class DuetCollapsible {
                 },
                 "getter": false,
                 "setter": false,
-                "attribute": "heading-full-width",
                 "reflect": false,
                 "defaultValue": "false"
             },
             "centerHeading": {
                 "type": "boolean",
+                "attribute": "center-heading",
                 "mutable": false,
                 "complexType": {
                     "original": "boolean",
@@ -280,12 +343,12 @@ export class DuetCollapsible {
                 },
                 "getter": false,
                 "setter": false,
-                "attribute": "center-heading",
                 "reflect": false,
                 "defaultValue": "false"
             },
             "headingWeight": {
                 "type": "string",
+                "attribute": "heading-weight",
                 "mutable": false,
                 "complexType": {
                     "original": "DuetCollapsibleWeight",
@@ -306,12 +369,12 @@ export class DuetCollapsible {
                 },
                 "getter": false,
                 "setter": false,
-                "attribute": "heading-weight",
                 "reflect": false,
                 "defaultValue": "\"semibold\""
             },
             "headingSize": {
                 "type": "string",
+                "attribute": "heading-size",
                 "mutable": false,
                 "complexType": {
                     "original": "DuetCollapsibleHeadingFontSize",
@@ -332,13 +395,13 @@ export class DuetCollapsible {
                 },
                 "getter": false,
                 "setter": false,
-                "attribute": "heading-size",
                 "reflect": false,
                 "defaultValue": "undefined"
             },
             "headingLevel": {
                 "type": "string",
-                "mutable": false,
+                "attribute": "heading-level",
+                "mutable": true,
                 "complexType": {
                     "original": "DuetHeadingLevel | undefined",
                     "resolved": "\"h1\" | \"h2\" | \"h3\" | \"h4\" | \"h5\" | \"h6\"",
@@ -358,12 +421,12 @@ export class DuetCollapsible {
                 },
                 "getter": false,
                 "setter": false,
-                "attribute": "heading-level",
                 "reflect": false,
                 "defaultValue": "undefined"
             },
             "margin": {
                 "type": "string",
+                "attribute": "margin",
                 "mutable": false,
                 "complexType": {
                     "original": "DuetMargin",
@@ -384,12 +447,12 @@ export class DuetCollapsible {
                 },
                 "getter": false,
                 "setter": false,
-                "attribute": "margin",
                 "reflect": false,
                 "defaultValue": "\"auto\""
             },
             "open": {
                 "type": "boolean",
+                "attribute": "open",
                 "mutable": true,
                 "complexType": {
                     "original": "boolean",
@@ -404,7 +467,6 @@ export class DuetCollapsible {
                 },
                 "getter": false,
                 "setter": false,
-                "attribute": "open",
                 "reflect": true,
                 "defaultValue": "false"
             }

package/lib/collection/components/duet-combobox/duet-combobox.css

@@ -2,11 +2,11 @@
   box-sizing: border-box;
   padding: 0;
   margin: 0;
-  background: transparent;
-  border: 0;
   -moz-appearance: none;
   -webkit-appearance: none;
   appearance: none;
+  background: transparent;
+  border: 0;
   position: relative;
   display: inline-block;
   width: 100%;
@@ -28,4 +28,11 @@
 .combobox-menu-container {
   width: var(--popup-width);
   max-height: 200px;
+}
+
+:host(.duet-theme-turva2.duet-theme-turva) {
+  color: rgb(23, 42, 59);
+}
+:host(.duet-theme-turva2.duet-theme-turva) a {
+  color: rgb(23, 42, 59);
 }