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

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

@@ -11,7 +11,13 @@ import { checkNamedSlotElement, hasSlot } from "../../utils/slot-utils";
 export class DuetCallout {
     constructor() {
         this.hasAuthorSlot = false;
+        /**
+         * Theme of the caption.
+         */
         this.theme = "";
+        /**
+         * Controls the margin of the component.
+         */
         this.margin = "auto";
     }
     /**
@@ -53,6 +59,7 @@ export class DuetCallout {
         return {
             "theme": {
                 "type": "string",
+                "attribute": "theme",
                 "mutable": true,
                 "complexType": {
                     "original": "DuetTheme",
@@ -73,12 +80,12 @@ export class DuetCallout {
                 },
                 "getter": false,
                 "setter": false,
-                "attribute": "theme",
                 "reflect": false,
                 "defaultValue": "\"\""
             },
             "margin": {
                 "type": "string",
+                "attribute": "margin",
                 "mutable": false,
                 "complexType": {
                     "original": "DuetMargin",
@@ -99,7 +106,6 @@ export class DuetCallout {
                 },
                 "getter": false,
                 "setter": false,
-                "attribute": "margin",
                 "reflect": false,
                 "defaultValue": "\"auto\""
             }

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

@@ -5,9 +5,21 @@ import { h, Host } from "@stencil/core";
 import { inheritGlobalTheme } from "../../common/themeable-component";
 export class DuetCaption {
     constructor() {
+        /**
+         * Theme of the caption.
+         */
         this.theme = "";
+        /**
+         * Controls the margin of the component.
+         */
         this.margin = "auto";
+        /**
+         * Selected state of the caption. Used inside Choice component.
+         */
         this.selected = false;
+        /**
+         * Controls the size of the caption.
+         */
         this.size = "medium";
     }
     /**
@@ -45,6 +57,7 @@ export class DuetCaption {
         return {
             "theme": {
                 "type": "string",
+                "attribute": "theme",
                 "mutable": true,
                 "complexType": {
                     "original": "DuetTheme",
@@ -65,12 +78,12 @@ export class DuetCaption {
                 },
                 "getter": false,
                 "setter": false,
-                "attribute": "theme",
                 "reflect": false,
                 "defaultValue": "\"\""
             },
             "margin": {
                 "type": "string",
+                "attribute": "margin",
                 "mutable": false,
                 "complexType": {
                     "original": "DuetMargin",
@@ -91,12 +104,12 @@ export class DuetCaption {
                 },
                 "getter": false,
                 "setter": false,
-                "attribute": "margin",
                 "reflect": false,
                 "defaultValue": "\"auto\""
             },
             "selected": {
                 "type": "boolean",
+                "attribute": "selected",
                 "mutable": false,
                 "complexType": {
                     "original": "boolean",
@@ -111,12 +124,12 @@ export class DuetCaption {
                 },
                 "getter": false,
                 "setter": false,
-                "attribute": "selected",
                 "reflect": false,
                 "defaultValue": "false"
             },
             "size": {
                 "type": "string",
+                "attribute": "size",
                 "mutable": false,
                 "complexType": {
                     "original": "DuetCaptionSize",
@@ -137,7 +150,6 @@ export class DuetCaption {
                 },
                 "getter": false,
                 "setter": false,
-                "attribute": "size",
                 "reflect": false,
                 "defaultValue": "\"medium\""
             }

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

@@ -18,6 +18,63 @@ import { getColorByName } from "../../utils/token-utils";
 export class DuetCard {
     constructor() {
         this.cardId = createID("DuetCard");
+        /**
+         * The content for the card heading. If empty, both heading and collapse
+         * functionality will be hidden.
+         */
+        this.heading = "";
+        /**
+         * Additional content for the card heading. If empty, both heading and collapse
+         * functionality will be hidden.
+         */
+        this.secondaryHeading = "";
+        /**
+         * Style variation of the card.
+         */
+        this.variation = "default";
+        /**
+         * Makes the card expand and collapse when the collapse/expand arrow in the
+         * heading is clicked or tapped. This option only works together with the
+         * heading option, meaning that you also need to set the heading for this
+         * functionality to show up.
+         */
+        this.collapsible = false;
+        /**
+         * If the card is collapsible, this property controls whether the card is open or closed.
+         */
+        this.open = true;
+        /**
+         * The actual heading level used for the heading in html markup. This setting
+         * exists for accessibility reasons. It doesn’t change the style visually.
+         * This setting is only used if the heading property is set.
+         * If you provide your own heading(s) in the slot, you should set this to neutral "div"
+         * in order to avoid nested headings.
+         */
+        this.headingLevel = "h2";
+        /**
+         * Custom color to be used for the card background, as a design token entered in
+         * camelCase or kebab-case. Example: "primary".
+         */
+        this.background = "gray-lightest";
+        /**
+         * The padding for the card. Please note that the card padding values don’t directly
+         * translate to similar space token names, but instead the card uses it’s own
+         * derived defaults.
+         */
+        this.padding = "small";
+        /**
+         * Controls the margin of the component.
+         */
+        this.margin = "auto";
+        /**
+         * Theme of the card.
+         */
+        this.theme = "";
+        /**
+         * Breakpoint used to remove shadow around card. These match to
+         * similar media query tokens: $media-query-small and $media-query-medium.
+         */
+        this.shadowBreakpoint = undefined;
         /**
          * Local methods.
          */
@@ -34,22 +91,6 @@ export class DuetCard {
                 this.togglePanel(e);
             }
         };
-        this.accessibleLabel = undefined;
-        this.heading = "";
-        this.secondaryHeading = "";
-        this.variation = "default";
-        this.collapsible = false;
-        this.open = true;
-        this.headingLevel = "h2";
-        this.headingBackground = undefined;
-        this.icon = undefined;
-        this.image = undefined;
-        this.background = "gray-lightest";
-        this.padding = "small";
-        this.margin = "auto";
-        this.theme = "";
-        this.url = undefined;
-        this.shadowBreakpoint = undefined;
     }
     /**
      * Component lifecycle events.
@@ -133,6 +174,7 @@ export class DuetCard {
         return {
             "accessibleLabel": {
                 "type": "string",
+                "attribute": "accessible-label",
                 "mutable": false,
                 "complexType": {
                     "original": "string",
@@ -147,11 +189,11 @@ export class DuetCard {
                 },
                 "getter": false,
                 "setter": false,
-                "attribute": "accessible-label",
                 "reflect": false
             },
             "heading": {
                 "type": "string",
+                "attribute": "heading",
                 "mutable": false,
                 "complexType": {
                     "original": "string",
@@ -166,12 +208,12 @@ export class DuetCard {
                 },
                 "getter": false,
                 "setter": false,
-                "attribute": "heading",
                 "reflect": false,
                 "defaultValue": "\"\""
             },
             "secondaryHeading": {
                 "type": "string",
+                "attribute": "secondary-heading",
                 "mutable": false,
                 "complexType": {
                     "original": "string",
@@ -186,12 +228,12 @@ export class DuetCard {
                 },
                 "getter": false,
                 "setter": false,
-                "attribute": "secondary-heading",
                 "reflect": false,
                 "defaultValue": "\"\""
             },
             "variation": {
                 "type": "string",
+                "attribute": "variation",
                 "mutable": false,
                 "complexType": {
                     "original": "DuetCardVariation",
@@ -212,12 +254,12 @@ export class DuetCard {
                 },
                 "getter": false,
                 "setter": false,
-                "attribute": "variation",
                 "reflect": false,
                 "defaultValue": "\"default\""
             },
             "collapsible": {
                 "type": "boolean",
+                "attribute": "collapsible",
                 "mutable": false,
                 "complexType": {
                     "original": "boolean",
@@ -232,12 +274,12 @@ export class DuetCard {
                 },
                 "getter": false,
                 "setter": false,
-                "attribute": "collapsible",
                 "reflect": false,
                 "defaultValue": "false"
             },
             "open": {
                 "type": "boolean",
+                "attribute": "open",
                 "mutable": true,
                 "complexType": {
                     "original": "boolean",
@@ -252,12 +294,12 @@ export class DuetCard {
                 },
                 "getter": false,
                 "setter": false,
-                "attribute": "open",
                 "reflect": true,
                 "defaultValue": "true"
             },
             "headingLevel": {
                 "type": "string",
+                "attribute": "heading-level",
                 "mutable": false,
                 "complexType": {
                     "original": "DuetCardHeadingLevel",
@@ -278,12 +320,12 @@ export class DuetCard {
                 },
                 "getter": false,
                 "setter": false,
-                "attribute": "heading-level",
                 "reflect": false,
                 "defaultValue": "\"h2\""
             },
             "headingBackground": {
                 "type": "string",
+                "attribute": "heading-background",
                 "mutable": false,
                 "complexType": {
                     "original": "DuetColor | undefined",
@@ -304,11 +346,11 @@ export class DuetCard {
                 },
                 "getter": false,
                 "setter": false,
-                "attribute": "heading-background",
                 "reflect": false
             },
             "icon": {
                 "type": "string",
+                "attribute": "icon",
                 "mutable": false,
                 "complexType": {
                     "original": "DuetIconName",
@@ -329,11 +371,11 @@ export class DuetCard {
                 },
                 "getter": false,
                 "setter": false,
-                "attribute": "icon",
                 "reflect": false
             },
             "image": {
                 "type": "string",
+                "attribute": "image",
                 "mutable": false,
                 "complexType": {
                     "original": "string",
@@ -348,11 +390,11 @@ export class DuetCard {
                 },
                 "getter": false,
                 "setter": false,
-                "attribute": "image",
                 "reflect": false
             },
             "background": {
                 "type": "string",
+                "attribute": "background",
                 "mutable": false,
                 "complexType": {
                     "original": "DuetColor",
@@ -373,12 +415,12 @@ export class DuetCard {
                 },
                 "getter": false,
                 "setter": false,
-                "attribute": "background",
                 "reflect": false,
                 "defaultValue": "\"gray-lightest\""
             },
             "padding": {
                 "type": "string",
+                "attribute": "padding",
                 "mutable": false,
                 "complexType": {
                     "original": "DuetCardPadding",
@@ -399,12 +441,12 @@ export class DuetCard {
                 },
                 "getter": false,
                 "setter": false,
-                "attribute": "padding",
                 "reflect": false,
                 "defaultValue": "\"small\""
             },
             "margin": {
                 "type": "string",
+                "attribute": "margin",
                 "mutable": false,
                 "complexType": {
                     "original": "DuetMargin",
@@ -425,12 +467,12 @@ export class DuetCard {
                 },
                 "getter": false,
                 "setter": false,
-                "attribute": "margin",
                 "reflect": false,
                 "defaultValue": "\"auto\""
             },
             "theme": {
                 "type": "string",
+                "attribute": "theme",
                 "mutable": true,
                 "complexType": {
                     "original": "DuetTheme",
@@ -451,12 +493,12 @@ export class DuetCard {
                 },
                 "getter": false,
                 "setter": false,
-                "attribute": "theme",
                 "reflect": false,
                 "defaultValue": "\"\""
             },
             "url": {
                 "type": "string",
+                "attribute": "url",
                 "mutable": false,
                 "complexType": {
                     "original": "string",
@@ -471,11 +513,11 @@ export class DuetCard {
                 },
                 "getter": false,
                 "setter": false,
-                "attribute": "url",
                 "reflect": false
             },
             "shadowBreakpoint": {
                 "type": "string",
+                "attribute": "shadow-breakpoint",
                 "mutable": false,
                 "complexType": {
                     "original": "DuetBreakpoints",
@@ -496,7 +538,6 @@ export class DuetCard {
                 },
                 "getter": false,
                 "setter": false,
-                "attribute": "shadow-breakpoint",
                 "reflect": false,
                 "defaultValue": "undefined"
             }