@duetds/components 10.0.0-alpha.13 → 10.0.0-alpha.14

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

@@ -21,48 +21,134 @@ import { parsePossibleJSON } from "../../utils/string-utils";
 export class DuetHero {
     constructor() {
         /**
-         * Component event handling.
+         * State() variables
+         * Inlined decorator, alphabetical order.
          */
-        this.handleClick = (ev, data) => {
-            if (data && data.analytics) {
-                this.duetAnalytics.emit({
-                    component: "duet-hero",
-                    analyticsId: data.analytics,
-                });
-            }
-            this.emitChange(ev, data);
-        };
         this.processedListItems = null;
         this.processedActions = null;
         this.processedBack = null;
+        /**
+         * Theme of the hero area.
+         */
         this.theme = "";
+        /**
+         * The heading of the hero area, rendered in an H1 tag. P.S. you can control
+         * the level of the HTML heading by using “level” prop. If empty, heading
+         * will be hidden. There is also a heading slot that can be used.
+         */
         this.heading = "";
+        /**
+         * The headline shown before heading.
+         */
         this.preHeading = "";
+        /**
+         * The level of the heading.
+         */
         this.level = "h1";
+        /**
+         * The level of the heading. Only usable with campaign, section variations.
+         */
         this.subHeadingLevel = "h2";
+        /**
+         * The description of the hero area, rendered in a P tag. If empty, description
+         * will be hidden.
+         */
         this.description = "";
+        /**
+         * Icon to display to the left of the button content. If empty, icon will be hidden.
+         */
         this.icon = "";
+        /**
+         * Icon size for the button.
+         */
         this.iconSize = "medium";
+        /**
+         * Show icon on the right side of the button content.
+         */
         this.iconRight = false;
+        /**
+         * Icon to display to the left of the heading in gray hero area variation. If empty, icon will be hidden.
+         */
         this.categoryIcon = "";
+        /**
+         * Icon color to use for the category icon that can be used in gray hero area variation.
+         */
         this.categoryIconColor = "category-pet";
+        /**
+         * Text label shown inside the button. If empty, button will be hidden.
+         */
         this.buttonLabel = "";
+        /**
+         * The currently active language. This setting changes the accessible labels to match the
+         * chosen language.
+         * @deprecated this is now handled via the html lang tag, and is no longer used - kept to avoid breaking changes and ease unit testing
+         * @default "fi"
+         */
         this.language = getLanguage();
+        /**
+         * Defaults for accessibleLabelExternal
+         * @default {fi: "Avautuu uuteen ikkunaan",sv: "Öppnas i nytt fönster",en: "Opens in a new window"}
+         */
         this.accessibleLabelExternalDefaults = DuetStringsExternalDefaults;
+        /**
+         * Adds accessible label for tooltip that is shown in external link (url & external have both been set)
+         * @default {fi: "Avautuu uuteen ikkunaan",sv: "Öppnas i nytt fönster",en: "Opens in a new window"}
+         */
         this.accessibleLabelExternal = getLocaleString(this.accessibleLabelExternalDefaults);
+        /**
+         * URL that the button links to.
+         */
         this.buttonUrl = "#";
+        /**
+         * ID for the button.
+         */
         this.buttonId = "";
-        this.buttonData = undefined;
+        /**
+         * Centers the text in hero area.
+         */
         this.textCenter = false;
+        /**
+         * Forces all items in the header to be leftAligned
+         * This can be used on mobiles to create leftAligned hero areas that either are only leftaligned on smaller devices
+         * or allways leftAligned (you must manually switch this parameter if you need special breakpoints)
+         * this nullifies textCenter prop
+         */
         this.leftAlign = false;
+        /**
+         * URL of the image shown inside the hero area. For normal hero areas the width of the displayed image
+         * should be 800px. Optimal aspect ratio is 3:2. When using “image” variation of
+         * Hero Area the required image size is 1200x1200px (1:1 ratio). If this
+         * property is left empty, image will be hidden.
+         */
         this.image = "";
+        /**
+         * Image sizing.
+         */
         this.imageSize = "auto";
+        /**
+         * Image position.
+         */
         this.imagePosition = "auto";
+        /**
+         * Style variation of the hero area.
+         */
         this.variation = "default";
-        this.back = undefined;
-        this.listItems = undefined;
-        this.actions = undefined;
+        /**
+         * Layout.
+         */
         this.layout = "narrow";
+        /**
+         * Component event handling.
+         */
+        this.handleClick = (ev, data) => {
+            if (data && data.analytics) {
+                this.duetAnalytics.emit({
+                    component: "duet-hero",
+                    analyticsId: data.analytics,
+                });
+            }
+            this.emitChange(ev, data);
+        };
     }
     /**
      * Component lifecycle events.
@@ -204,6 +290,7 @@ export class DuetHero {
         return {
             "theme": {
                 "type": "string",
+                "attribute": "theme",
                 "mutable": true,
                 "complexType": {
                     "original": "DuetTheme",
@@ -224,12 +311,12 @@ export class DuetHero {
                 },
                 "getter": false,
                 "setter": false,
-                "attribute": "theme",
                 "reflect": false,
                 "defaultValue": "\"\""
             },
             "heading": {
                 "type": "string",
+                "attribute": "heading",
                 "mutable": false,
                 "complexType": {
                     "original": "string",
@@ -244,12 +331,12 @@ export class DuetHero {
                 },
                 "getter": false,
                 "setter": false,
-                "attribute": "heading",
                 "reflect": false,
                 "defaultValue": "\"\""
             },
             "preHeading": {
                 "type": "string",
+                "attribute": "pre-heading",
                 "mutable": false,
                 "complexType": {
                     "original": "string",
@@ -264,12 +351,12 @@ export class DuetHero {
                 },
                 "getter": false,
                 "setter": false,
-                "attribute": "pre-heading",
                 "reflect": false,
                 "defaultValue": "\"\""
             },
             "level": {
                 "type": "string",
+                "attribute": "level",
                 "mutable": false,
                 "complexType": {
                     "original": "DuetHeadingLevel",
@@ -290,12 +377,12 @@ export class DuetHero {
                 },
                 "getter": false,
                 "setter": false,
-                "attribute": "level",
                 "reflect": false,
                 "defaultValue": "\"h1\""
             },
             "subHeadingLevel": {
                 "type": "string",
+                "attribute": "sub-heading-level",
                 "mutable": false,
                 "complexType": {
                     "original": "DuetHeadingLevel",
@@ -316,12 +403,12 @@ export class DuetHero {
                 },
                 "getter": false,
                 "setter": false,
-                "attribute": "sub-heading-level",
                 "reflect": false,
                 "defaultValue": "\"h2\""
             },
             "description": {
                 "type": "string",
+                "attribute": "description",
                 "mutable": false,
                 "complexType": {
                     "original": "string",
@@ -336,12 +423,12 @@ export class DuetHero {
                 },
                 "getter": false,
                 "setter": false,
-                "attribute": "description",
                 "reflect": false,
                 "defaultValue": "\"\""
             },
             "icon": {
                 "type": "string",
+                "attribute": "icon",
                 "mutable": false,
                 "complexType": {
                     "original": "DuetIconName",
@@ -362,12 +449,12 @@ export class DuetHero {
                 },
                 "getter": false,
                 "setter": false,
-                "attribute": "icon",
                 "reflect": false,
                 "defaultValue": "\"\""
             },
             "iconSize": {
                 "type": "string",
+                "attribute": "icon-size",
                 "mutable": false,
                 "complexType": {
                     "original": "DuetHeroIconSize",
@@ -388,12 +475,12 @@ export class DuetHero {
                 },
                 "getter": false,
                 "setter": false,
-                "attribute": "icon-size",
                 "reflect": false,
                 "defaultValue": "\"medium\""
             },
             "iconRight": {
                 "type": "boolean",
+                "attribute": "icon-right",
                 "mutable": false,
                 "complexType": {
                     "original": "boolean",
@@ -408,12 +495,12 @@ export class DuetHero {
                 },
                 "getter": false,
                 "setter": false,
-                "attribute": "icon-right",
                 "reflect": false,
                 "defaultValue": "false"
             },
             "categoryIcon": {
                 "type": "string",
+                "attribute": "category-icon",
                 "mutable": false,
                 "complexType": {
                     "original": "DuetIconName",
@@ -434,12 +521,12 @@ export class DuetHero {
                 },
                 "getter": false,
                 "setter": false,
-                "attribute": "category-icon",
                 "reflect": false,
                 "defaultValue": "\"\""
             },
             "categoryIconColor": {
                 "type": "string",
+                "attribute": "category-icon-color",
                 "mutable": false,
                 "complexType": {
                     "original": "DuetColor",
@@ -460,12 +547,12 @@ export class DuetHero {
                 },
                 "getter": false,
                 "setter": false,
-                "attribute": "category-icon-color",
                 "reflect": false,
                 "defaultValue": "\"category-pet\""
             },
             "buttonLabel": {
                 "type": "string",
+                "attribute": "button-label",
                 "mutable": false,
                 "complexType": {
                     "original": "string",
@@ -480,12 +567,12 @@ export class DuetHero {
                 },
                 "getter": false,
                 "setter": false,
-                "attribute": "button-label",
                 "reflect": false,
                 "defaultValue": "\"\""
             },
             "language": {
                 "type": "string",
+                "attribute": "language",
                 "mutable": true,
                 "complexType": {
                     "original": "DuetLanguage",
@@ -512,12 +599,12 @@ export class DuetHero {
                 },
                 "getter": false,
                 "setter": false,
-                "attribute": "language",
                 "reflect": false,
                 "defaultValue": "getLanguage()"
             },
             "accessibleLabelExternalDefaults": {
                 "type": "string",
+                "attribute": "accessible-label-external-default",
                 "mutable": false,
                 "complexType": {
                     "original": "DuetLangObject | string",
@@ -541,12 +628,12 @@ export class DuetHero {
                 },
                 "getter": false,
                 "setter": false,
-                "attribute": "accessible-label-external-default",
                 "reflect": false,
                 "defaultValue": "DuetStringsExternalDefaults"
             },
             "accessibleLabelExternal": {
                 "type": "string",
+                "attribute": "accessible-label-external",
                 "mutable": true,
                 "complexType": {
                     "original": "string",
@@ -564,12 +651,12 @@ export class DuetHero {
                 },
                 "getter": false,
                 "setter": false,
-                "attribute": "accessible-label-external",
                 "reflect": false,
                 "defaultValue": "getLocaleString(this.accessibleLabelExternalDefaults)"
             },
             "buttonUrl": {
                 "type": "string",
+                "attribute": "button-url",
                 "mutable": false,
                 "complexType": {
                     "original": "string",
@@ -584,12 +671,12 @@ export class DuetHero {
                 },
                 "getter": false,
                 "setter": false,
-                "attribute": "button-url",
                 "reflect": false,
                 "defaultValue": "\"#\""
             },
             "buttonId": {
                 "type": "string",
+                "attribute": "button-id",
                 "mutable": false,
                 "complexType": {
                     "original": "string",
@@ -604,12 +691,12 @@ export class DuetHero {
                 },
                 "getter": false,
                 "setter": false,
-                "attribute": "button-id",
                 "reflect": false,
                 "defaultValue": "\"\""
             },
             "buttonData": {
                 "type": "unknown",
+                "attribute": "button-data",
                 "mutable": false,
                 "complexType": {
                     "original": "DuetHeroButtonData",
@@ -633,6 +720,7 @@ export class DuetHero {
             },
             "textCenter": {
                 "type": "boolean",
+                "attribute": "text-center",
                 "mutable": false,
                 "complexType": {
                     "original": "boolean",
@@ -647,12 +735,12 @@ export class DuetHero {
                 },
                 "getter": false,
                 "setter": false,
-                "attribute": "text-center",
                 "reflect": false,
                 "defaultValue": "false"
             },
             "leftAlign": {
                 "type": "boolean",
+                "attribute": "left-align",
                 "mutable": false,
                 "complexType": {
                     "original": "boolean",
@@ -667,12 +755,12 @@ export class DuetHero {
                 },
                 "getter": false,
                 "setter": false,
-                "attribute": "left-align",
                 "reflect": false,
                 "defaultValue": "false"
             },
             "image": {
                 "type": "string",
+                "attribute": "image",
                 "mutable": false,
                 "complexType": {
                     "original": "string",
@@ -687,12 +775,12 @@ export class DuetHero {
                 },
                 "getter": false,
                 "setter": false,
-                "attribute": "image",
                 "reflect": false,
                 "defaultValue": "\"\""
             },
             "imageSize": {
                 "type": "string",
+                "attribute": "image-size",
                 "mutable": false,
                 "complexType": {
                     "original": "\"auto\" | \"cover\"",
@@ -707,12 +795,12 @@ export class DuetHero {
                 },
                 "getter": false,
                 "setter": false,
-                "attribute": "image-size",
                 "reflect": false,
                 "defaultValue": "\"auto\""
             },
             "imagePosition": {
                 "type": "string",
+                "attribute": "image-position",
                 "mutable": false,
                 "complexType": {
                     "original": "\"auto\" | \"center\"",
@@ -727,12 +815,12 @@ export class DuetHero {
                 },
                 "getter": false,
                 "setter": false,
-                "attribute": "image-position",
                 "reflect": false,
                 "defaultValue": "\"auto\""
             },
             "variation": {
                 "type": "string",
+                "attribute": "variation",
                 "mutable": false,
                 "complexType": {
                     "original": "DuetHeroVariation",
@@ -753,12 +841,12 @@ export class DuetHero {
                 },
                 "getter": false,
                 "setter": false,
-                "attribute": "variation",
                 "reflect": false,
                 "defaultValue": "\"default\""
             },
             "back": {
                 "type": "any",
+                "attribute": "back",
                 "mutable": false,
                 "complexType": {
                     "original": "any",
@@ -773,11 +861,11 @@ export class DuetHero {
                 },
                 "getter": false,
                 "setter": false,
-                "attribute": "back",
                 "reflect": false
             },
             "listItems": {
                 "type": "any",
+                "attribute": "list-items",
                 "mutable": false,
                 "complexType": {
                     "original": "any",
@@ -792,11 +880,11 @@ export class DuetHero {
                 },
                 "getter": false,
                 "setter": false,
-                "attribute": "list-items",
                 "reflect": false
             },
             "actions": {
                 "type": "any",
+                "attribute": "actions",
                 "mutable": false,
                 "complexType": {
                     "original": "any",
@@ -811,11 +899,11 @@ export class DuetHero {
                 },
                 "getter": false,
                 "setter": false,
-                "attribute": "actions",
                 "reflect": false
             },
             "layout": {
                 "type": "string",
+                "attribute": "layout",
                 "mutable": true,
                 "complexType": {
                     "original": "\"narrow\" | \"fluid\"",
@@ -830,7 +918,6 @@ export class DuetHero {
                 },
                 "getter": false,
                 "setter": false,
-                "attribute": "layout",
                 "reflect": false,
                 "defaultValue": "\"narrow\""
             }