@duetds/components 10.0.0-alpha.9 → 10.1.0

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

@@ -4,7 +4,7 @@
 import { h, Host } from "@stencil/core";
 import { inheritGlobalTheme } from "../../common/themeable-component";
 import { checkNamedSlotElement, hasSlot } from "../../utils/slot-utils";
-import { getColorByName } from "../../utils/token-utils";
+import { getColorByName, postfixTheme } from "../../utils/token-utils";
 /**
  * @slot pre-heading - Slot for pre-heading content.
  * @slot heading - Slot for heading content. Only span should be used in this slot.
@@ -13,13 +13,30 @@ import { getColorByName } from "../../utils/token-utils";
  */
 export class DuetPromoCard {
     constructor() {
+        /**
+         * Theme.
+         */
         this.theme = "";
+        /**
+         * Controls the margin of the component.
+         */
         this.margin = "auto";
+        /**
+         * Background color.
+         */
         this.backgroundColor = "";
+        /**
+         * Text color.
+         */
         this.textColor = "secondary";
+        /**
+         * Image. Example image is 512x341;
+         */
         this.image = "";
+        /**
+         * The actual heading level used in the HTML markup.
+         */
         this.headingLevel = "h3";
-        this.url = undefined;
     }
     /**
      * Component lifecycle events.
@@ -53,12 +70,12 @@ export class DuetPromoCard {
             backgroundColor: backgroundColor ? backgroundColor : "none",
         };
         const TagName = this.url ? "a" : "div";
-        return (h(Host, { key: '99a3a523ca9804792e3d26b2fe2f44cf8788f499', class: { "duet-m-0": this.margin === "none" } }, h("aside", { key: '8eb59e651e552f3f868629c95c347a72a0b995d6', class: {
+        return (h(Host, { key: '6d2ebadbdc4716a50f44a6805ec97f2915476f4e', class: { "duet-m-0": this.margin === "none" } }, h("aside", { key: '12c8b32f7a486ababadb37b0cb125337a4b548f5', class: {
                 "duet-promo-card": true,
                 "duet-theme-turva": this.theme === "turva",
                 "no-bg-color": !this.backgroundColor,
                 "duet-promo-card-link": !!this.url,
-            }, style: bannerStyles }, h(TagName, { key: '67c66449cd7f9747924020549c6155d62829b4f2', href: this.url, class: "content-wrapper", ref: element => (this.aOrDivElement = element) }, h("img", { key: 'cac126cf7f9a7db193b307363726031b62167336', class: "image", src: this.image, alt: "", role: "presentation" }), h("div", { key: '8071631c045ed93e6bd62c612c9b1d908f3c1787', class: "content" }, this.hasPreHeadingSlot && (h("div", { key: '28bc028c6c51578ade7239ee3a97a465d2280b19', class: "pre-heading" }, h("slot", { key: 'e288ca8c4477fda34700eb895a71a22a131fca2d', name: "pre-heading" }))), this.hasHeadingSlot && (h("div", { key: 'b914a1a7e943261ef27bc33bb053a0c606f1eada', class: "heading" }, h("duet-heading", { key: '3ad22ba8a74eddb6fa6e5c7e181b02b79f8bc9af', theme: this.theme, level: this.headingLevel, "visual-level": "h3", margin: "none", color: this.textColor }, h("span", { key: 'bd2b4f58517ca81d73a876481e534158c079c19f' }, h("slot", { key: '710aee32ab320dc22c4e06b0f2dab01503d56ce4', name: "heading" }))))), this.hasDescriptionSlot && (h("div", { key: '0383f84bbf8a31012ab0533f3577811cfc22fb29', class: "description" }, h("duet-paragraph", { key: 'ddd7e8b4844058575e473783326ac6a08b4ad7f7', theme: this.theme, margin: "none", color: this.textColor }, h("span", { key: 'd56f8bd9374662a5ae5767ff43d167ebb96e4ba2' }, h("slot", { key: 'bf26792909ae05d5d466c4d6441f574da8bc8917', name: "description" }))))), this.hasActionSlot && (h("div", { key: 'fc0ffe648d30b194b1ca946f99e414222e4a31fa', class: "action" }, h("slot", { key: '735077add3c5f5b3c97762c5daed1b5e3668d4c2', name: "action" }))))))));
+            }, style: bannerStyles }, h(TagName, { key: 'caef7b4cd0f222eb2039602c241438ecdd77d7ad', href: this.url, class: { "content-wrapper": true, "duet-theme-turva": this.theme === "turva" }, ref: element => (this.aOrDivElement = element) }, h("img", { key: '59e3b0877935a3ea2de4010312571a89ac32851b', class: "image", src: this.image, alt: this.imageAlt || "", role: this.imageAlt ? null : "presentation" }), h("div", { key: 'c27c8862d34045213fb6982cbc790c0d88d5da70', class: "content" }, this.hasPreHeadingSlot && (h("div", { key: '9ea892228de3f899f5e1031247b17d095e25e1de', class: "pre-heading" }, h("slot", { key: '4174b492f22e704b0354be13d0a178b9ef02a5eb', name: "pre-heading" }))), this.hasHeadingSlot && (h("div", { key: '8d21d1464f81c9745c91791a8857fcbe28788dce', class: "heading" }, h("duet-heading", { key: '7716f9540e3fc2638bea8ba30ce266d9f1c13390', theme: this.theme, level: this.headingLevel, "visual-level": "h3", margin: "none", color: postfixTheme(this.textColor, this.theme) }, h("span", { key: 'e2ec91a5bdc861f6f228f6e662b347c8c8b06410' }, h("slot", { key: '9d423ea6373cada2b93d47c80a897efd38d97013', name: "heading" }))))), this.hasDescriptionSlot && (h("div", { key: '739454e12666bfb262d6a2243d61c658189410f5', class: "description" }, h("duet-paragraph", { key: '6592dd6a78e64e89ec88a06ce89120a011c2885e', theme: this.theme, margin: "none", color: postfixTheme(this.textColor, this.theme) }, h("span", { key: '599855764a99fba164a1500616f5a766be168b4b' }, h("slot", { key: 'deb8f54c39068fd0a313080a14e5dfdfb072ac14', name: "description" }))))), this.hasActionSlot && (h("div", { key: '32d5c8f68c70b99cd039254054130ea149a436c3', class: "action" }, h("slot", { key: '4185c9a0f8a624e3992481fba39852335746ddbb', name: "action" }))))))));
     }
     static get is() { return "duet-promo-card"; }
     static get encapsulation() { return "shadow"; }
@@ -76,6 +93,7 @@ export class DuetPromoCard {
         return {
             "theme": {
                 "type": "string",
+                "attribute": "theme",
                 "mutable": true,
                 "complexType": {
                     "original": "DuetTheme",
@@ -96,12 +114,12 @@ export class DuetPromoCard {
                 },
                 "getter": false,
                 "setter": false,
-                "attribute": "theme",
                 "reflect": false,
                 "defaultValue": "\"\""
             },
             "margin": {
                 "type": "string",
+                "attribute": "margin",
                 "mutable": false,
                 "complexType": {
                     "original": "DuetMargin",
@@ -122,12 +140,12 @@ export class DuetPromoCard {
                 },
                 "getter": false,
                 "setter": false,
-                "attribute": "margin",
                 "reflect": false,
                 "defaultValue": "\"auto\""
             },
             "backgroundColor": {
                 "type": "string",
+                "attribute": "background-color",
                 "mutable": false,
                 "complexType": {
                     "original": "DuetColor | \"\"",
@@ -148,12 +166,12 @@ export class DuetPromoCard {
                 },
                 "getter": false,
                 "setter": false,
-                "attribute": "background-color",
                 "reflect": false,
                 "defaultValue": "\"\""
             },
             "textColor": {
                 "type": "string",
+                "attribute": "text-color",
                 "mutable": false,
                 "complexType": {
                     "original": "DuetColor",
@@ -174,12 +192,12 @@ export class DuetPromoCard {
                 },
                 "getter": false,
                 "setter": false,
-                "attribute": "text-color",
                 "reflect": false,
                 "defaultValue": "\"secondary\""
             },
             "image": {
                 "type": "string",
+                "attribute": "image",
                 "mutable": false,
                 "complexType": {
                     "original": "string",
@@ -194,12 +212,31 @@ export class DuetPromoCard {
                 },
                 "getter": false,
                 "setter": false,
-                "attribute": "image",
                 "reflect": false,
                 "defaultValue": "\"\""
             },
+            "imageAlt": {
+                "type": "string",
+                "attribute": "image-alt",
+                "mutable": false,
+                "complexType": {
+                    "original": "string",
+                    "resolved": "string",
+                    "references": {}
+                },
+                "required": false,
+                "optional": false,
+                "docs": {
+                    "tags": [],
+                    "text": "Alt attribute text for the image. If not provided, image is assigned presentation role."
+                },
+                "getter": false,
+                "setter": false,
+                "reflect": false
+            },
             "headingLevel": {
                 "type": "string",
+                "attribute": "heading-level",
                 "mutable": false,
                 "complexType": {
                     "original": "DuetHeadingLevel",
@@ -220,12 +257,12 @@ export class DuetPromoCard {
                 },
                 "getter": false,
                 "setter": false,
-                "attribute": "heading-level",
                 "reflect": false,
                 "defaultValue": "\"h3\""
             },
             "url": {
                 "type": "string",
+                "attribute": "url",
                 "mutable": false,
                 "complexType": {
                     "original": "string",
@@ -240,7 +277,6 @@ export class DuetPromoCard {
                 },
                 "getter": false,
                 "setter": false,
-                "attribute": "url",
                 "reflect": false
             }
         };

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

@@ -4,22 +4,22 @@
   box-sizing: border-box;
   padding: 0;
   margin: 0;
-  background: transparent;
-  border: 0;
   -moz-appearance: none;
   -webkit-appearance: none;
   appearance: none;
+  background: transparent;
+  border: 0;
 }
 
 :host {
   box-sizing: border-box;
   padding: 0;
   margin: 0;
-  background: transparent;
-  border: 0;
   -moz-appearance: none;
   -webkit-appearance: none;
   appearance: none;
+  background: transparent;
+  border: 0;
   margin-right: 28px !important;
   margin-bottom: 12px !important;
   display: inline-flex;
@@ -30,6 +30,9 @@
 :host:last-child, :host:last-of-type {
   margin-right: 0 !important;
 }
+[alignment=form-distribute] > :host:last-of-type:not(:last-child) {
+  margin-right: 28px !important;
+}
 
 :host(.vertical) {
   margin-right: 0 !important;
@@ -52,6 +55,9 @@
   :host(.horizontal-responsive):last-child, :host(.horizontal-responsive):last-of-type {
     margin-right: 0 !important;
   }
+  [alignment=form-distribute] > :host(.horizontal-responsive):last-of-type:not(:last-child) {
+    margin-right: 28px !important;
+  }
   :host(.horizontal-responsive) .duet-label .duet-label-content {
     max-width: 100%;
   }
@@ -74,9 +80,9 @@
   font-family: "localtapiola-sans", -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, Helvetica, Arial, sans-serif, "Apple Color Emoji", "Segoe UI Emoji", "Segoe UI Symbol";
   font-size: 1rem;
   font-weight: 400;
-  hyphens: auto;
   line-height: 1.5;
   color: rgb(8, 42, 77);
+  hyphens: auto;
   word-break: break-word;
   overflow-wrap: break-word;
   cursor: pointer;
@@ -97,8 +103,8 @@
   padding: 0;
   margin: -1px;
   overflow: hidden;
-  clip: rect(0 0 0 0);
   border: 0;
+  clip: rect(0 0 0 0);
 }
 
 .duet-radio-container {
@@ -122,10 +128,17 @@
   border-color: rgb(23, 28, 58);
 }
 .duet-label.focus::before {
-  box-shadow: 0 0 0 4px rgba(0, 119, 179, 0.3), 0 0 0 1px #0077b3;
+  outline: 2px solid;
+  outline-offset: 2px;
+  outline-color: rgba(0, 119, 179, 0.8);
+}
+.duet-theme-turva .duet-label.focus::before, .duet-label.focus::before.duet-theme-turva, .duet-theme-turva2 .duet-label.focus::before, .duet-label.focus::before.duet-theme-turva2 {
+  outline-color: rgba(53, 79, 101, 0.8);
 }
 .duet-theme-turva .duet-label.focus::before {
-  box-shadow: 0 0 0 4px rgba(23, 28, 58, 0.2), 0 0 0 1px #171c3a;
+  outline: 2px solid;
+  outline-offset: 2px;
+  outline-color: rgba(53, 79, 101, 0.8);
 }
 .duet-label.checked::after {
   position: absolute;
@@ -179,4 +192,24 @@
 
 *::slotted([slot=input][disabled]) {
   cursor: default;
+}
+
+:host(.duet-theme-turva2) .duet-theme-turva .duet-label {
+  color: rgb(23, 42, 59);
+}
+:host(.duet-theme-turva2) .duet-theme-turva .duet-radio + label::before {
+  border-color: rgb(23, 42, 59);
+}
+:host(.duet-theme-turva2) .duet-theme-turva .duet-radio:checked + label::after {
+  background: rgb(23, 42, 59);
+}
+:host(.duet-theme-turva2) .duet-theme-turva .duet-radio[disabled] + label {
+  color: rgb(120, 145, 164);
+}
+:host(.duet-theme-turva2) .duet-theme-turva .duet-radio[disabled] + label::before {
+  border-color: rgb(120, 145, 164);
+}
+:host(.duet-theme-turva2) .duet-theme-turva .duet-radio[disabled]:checked + label::after {
+  background: rgb(120, 145, 164);
+  border-color: rgb(120, 145, 164);
 }