@duetds/components 6.9.7 → 6.9.9

package/lib/collection/collection-manifest.json

@@ -47,6 +47,7 @@
     "./components/duet-tooltip/duet-tooltip.js",
     "./components/duet-upload/duet-upload.js",
     "./components/duet-badge/duet-badge.js",
+    "./components/duet-banner/duet-banner.js",
     "./components/duet-breadcrumbs/duet-breadcrumb.js",
     "./components/duet-breadcrumbs/duet-breadcrumbs.js",
     "./components/duet-callout/duet-callout.js",

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

@@ -79,4 +79,34 @@
 }
 .duet-badge.success.duet-theme-turva {
   background: #e6f3ed;
+}
+.duet-badge.background-strong.default {
+  color: rgb(255, 255, 255);
+  background: rgb(0, 119, 179);
+}
+.duet-badge.background-strong.default.duet-theme-turva {
+  color: rgb(255, 255, 255);
+  background: rgb(23, 28, 58);
+}
+.duet-badge.background-strong.warning {
+  background: rgb(247, 178, 40);
+}
+.duet-badge.background-strong.warning.duet-theme-turva {
+  background: rgb(250, 164, 15);
+}
+.duet-badge.background-strong.danger {
+  color: rgb(255, 255, 255);
+  background: rgb(222, 35, 98);
+}
+.duet-badge.background-strong.danger.duet-theme-turva {
+  color: rgb(255, 255, 255);
+  background: rgb(224, 42, 13);
+}
+.duet-badge.background-strong.success {
+  color: rgb(255, 255, 255);
+  background: rgb(0, 135, 90);
+}
+.duet-badge.background-strong.success.duet-theme-turva {
+  color: rgb(255, 255, 255);
+  background: rgb(8, 135, 78);
 }

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

@@ -7,6 +7,7 @@ export class DuetBadge {
   constructor() {
     this.theme = "";
     this.variation = "default";
+    this.background = "normal";
     this.margin = "auto";
   }
   /**
@@ -20,9 +21,11 @@ export class DuetBadge {
    * Always the last one of the class.
    */
   render() {
+    const backgroundClass = `background-${this.background}`;
     return (h(Host, { class: { "duet-m-0": this.margin === "none" } }, h("div", { class: {
         "duet-badge": true,
         [this.variation]: true,
+        [backgroundClass]: true,
         "duet-theme-turva": this.theme === "turva",
       } }, h("slot", null))));
   }
@@ -80,12 +83,33 @@ export class DuetBadge {
         "optional": false,
         "docs": {
           "tags": [],
-          "text": "Style variation of the alert."
+          "text": "Style variation of the badge."
         },
         "attribute": "variation",
         "reflect": false,
         "defaultValue": "\"default\""
       },
+      "background": {
+        "type": "string",
+        "mutable": false,
+        "complexType": {
+          "original": "\"normal\" | \"strong\"",
+          "resolved": "\"normal\" | \"strong\"",
+          "references": {}
+        },
+        "required": false,
+        "optional": false,
+        "docs": {
+          "tags": [{
+              "name": "default",
+              "text": "\"normal\""
+            }],
+          "text": "Variation of the background. \"strong\" results in a more prominent background color."
+        },
+        "attribute": "background",
+        "reflect": false,
+        "defaultValue": "\"normal\""
+      },
       "margin": {
         "type": "string",
         "mutable": false,

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

@@ -0,0 +1,238 @@
+*,
+*::after,
+*::before {
+  box-sizing: border-box;
+  padding: 0;
+  margin: 0;
+  background: transparent;
+  border: 0;
+  -moz-appearance: none;
+  -webkit-appearance: none;
+  appearance: none;
+}
+
+:host {
+  box-sizing: border-box;
+  padding: 0;
+  margin: 0;
+  background: transparent;
+  border: 0;
+  -moz-appearance: none;
+  -webkit-appearance: none;
+  appearance: none;
+  margin-right: 4px !important;
+  margin-bottom: 2px !important;
+  display: block;
+  width: auto;
+}
+:host:last-child, :host:last-of-type {
+  margin-right: 0 !important;
+}
+
+:host(.duet-m-0) {
+  margin: 0 !important;
+}
+
+.duet-banner {
+  display: grid;
+  width: 100%;
+  width: 100%;
+  font-family: "localtapiola-sans", -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, Helvetica, Arial, sans-serif, "Apple Color Emoji", "Segoe UI Emoji", "Segoe UI Symbol";
+  font-style: normal;
+  text-align: left;
+  border-radius: 24px;
+}
+.duet-banner.duet-p-0 {
+  padding: 0 !important;
+}
+.duet-banner.duet-m-0 {
+  margin: 0 !important;
+}
+.duet-banner .visual {
+  position: relative;
+  overflow: hidden;
+  border-top-left-radius: 24px;
+  border-top-right-radius: 24px;
+}
+.duet-banner .visual .image-container {
+  position: relative;
+  width: 400px;
+  height: 400px;
+  overflow: hidden;
+  border-radius: 20%;
+  transform: rotate(7deg);
+}
+.duet-banner .visual .image {
+  position: relative;
+  top: 20px;
+  width: 100%;
+  height: 100%;
+  transform: rotate(-7deg);
+  object-fit: cover;
+}
+.duet-banner .visual .icon {
+  position: absolute;
+}
+.duet-banner .content {
+  display: flex;
+  flex-direction: column;
+  gap: 8px;
+  padding: 0 20px 36px;
+}
+.duet-banner.small {
+  grid-template-rows: 335px 1fr;
+  max-width: 335px;
+}
+.duet-banner.small .visual {
+  border-top-left-radius: 24px;
+  border-top-right-radius: 24px;
+}
+.duet-banner.small .visual .image-container {
+  top: -130px;
+  left: -40px;
+}
+.duet-banner.small .visual .icon {
+  bottom: 30px;
+  left: 15px;
+}
+.duet-banner.large {
+  grid-template-rows: none;
+  grid-template-columns: 50% 50%;
+  min-width: 900px;
+  max-width: 1112px;
+  height: 320px;
+  max-height: none;
+}
+.duet-banner.large .visual {
+  border-top-left-radius: 24px;
+  border-bottom-left-radius: 24px;
+}
+.duet-banner.large .visual .image-container {
+  top: -30px;
+  left: -30px;
+}
+.duet-banner.large .visual .image {
+  top: -15px;
+  left: 30px;
+}
+.duet-banner.large .visual .icon {
+  top: 40px;
+  bottom: auto;
+  left: 335px;
+}
+.duet-banner.large .content {
+  align-items: flex-start;
+  justify-content: center;
+  padding: 0 72px 0 0;
+}
+.duet-banner.auto {
+  grid-template-rows: 335px 1fr;
+  max-width: 335px;
+}
+.duet-banner.auto .visual {
+  border-top-left-radius: 24px;
+  border-top-right-radius: 24px;
+}
+.duet-banner.auto .visual .image-container {
+  top: -130px;
+  left: -40px;
+}
+.duet-banner.auto .visual .icon {
+  bottom: 30px;
+  left: 15px;
+}
+@media (min-width: 62em) {
+  .duet-banner.auto {
+    grid-template-rows: none;
+    grid-template-columns: 50% 50%;
+    min-width: 900px;
+    max-width: 1112px;
+    height: 320px;
+    max-height: none;
+  }
+  .duet-banner.auto .visual {
+    border-top-left-radius: 24px;
+    border-bottom-left-radius: 24px;
+  }
+  .duet-banner.auto .visual .image-container {
+    top: -30px;
+    left: -30px;
+  }
+  .duet-banner.auto .visual .image {
+    top: -15px;
+    left: 30px;
+  }
+  .duet-banner.auto .visual .icon {
+    top: 40px;
+    bottom: auto;
+    left: 335px;
+  }
+  .duet-banner.auto .content {
+    align-items: flex-start;
+    justify-content: center;
+    padding: 0 72px 0 0;
+  }
+}
+.duet-banner.duet-theme-turva {
+  font-family: "turva-sans", -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, Helvetica, Arial, sans-serif, "Apple Color Emoji", "Segoe UI Emoji", "Segoe UI Symbol";
+}
+.duet-banner.duet-theme-turva .visual .image-container {
+  width: 526px;
+  height: 456px;
+  transform: none;
+  -webkit-mask-image: url("data:image/svg+xml,%3Csvg%20fill%3D%22currentColor%22%20xmlns%3D%22http%3A%2F%2Fwww.w3.org%2F2000%2Fsvg%22%20viewBox%3D%220%200%20160%20140%22%3E%3Cpath%20d%3D%22M87.8%20139.6a57.3%2057.3%200%2000-18.4-3.3c-8-.5-16.3-2.5-24.6-6-16.7-7-29-18.7-37.1-35.3a73.5%2073.5%200%2001-5-52.4c1.7-4%203-6.7%204-7.8a33%2033%200%20004-7.8C33.4%203.5%2063.2-4.3%20100%203.2c30.5%204%2049.7%2019.9%2057.6%2047.4l1.6%2024c4.4%2036-11.5%2056-47.5%2060.3-4%202.4-12%203.9-24%204.7%22%20fill-rule%3D%22nonzero%22%2F%3E%3C%2Fsvg%3E");
+  -webkit-mask-repeat: no-repeat;
+  mask-image: url("data:image/svg+xml,%3Csvg%20fill%3D%22currentColor%22%20xmlns%3D%22http%3A%2F%2Fwww.w3.org%2F2000%2Fsvg%22%20viewBox%3D%220%200%20160%20140%22%3E%3Cpath%20d%3D%22M87.8%20139.6a57.3%2057.3%200%2000-18.4-3.3c-8-.5-16.3-2.5-24.6-6-16.7-7-29-18.7-37.1-35.3a73.5%2073.5%200%2001-5-52.4c1.7-4%203-6.7%204-7.8a33%2033%200%20004-7.8C33.4%203.5%2063.2-4.3%20100%203.2c30.5%204%2049.7%2019.9%2057.6%2047.4l1.6%2024c4.4%2036-11.5%2056-47.5%2060.3-4%202.4-12%203.9-24%204.7%22%20fill-rule%3D%22nonzero%22%2F%3E%3C%2Fsvg%3E");
+  mask-repeat: no-repeat;
+}
+.duet-banner.duet-theme-turva .visual .image {
+  transform: none;
+}
+.duet-banner.duet-theme-turva.small .visual .image-container {
+  top: -164px;
+  left: -147px;
+}
+.duet-banner.duet-theme-turva.small .visual .image {
+  top: 0;
+  left: 0;
+}
+.duet-banner.duet-theme-turva.small .visual .icon {
+  bottom: 15px;
+}
+.duet-banner.duet-theme-turva.large .visual .image-container {
+  top: -54.923px;
+  left: -147px;
+}
+.duet-banner.duet-theme-turva.large .visual .image {
+  top: 0;
+  left: 0;
+}
+.duet-banner.duet-theme-turva.large .visual .icon {
+  bottom: auto;
+  left: 295px;
+}
+.duet-banner.duet-theme-turva.auto .visual .image-container {
+  top: -164px;
+  left: -147px;
+}
+.duet-banner.duet-theme-turva.auto .visual .image {
+  top: 0;
+  left: 0;
+}
+.duet-banner.duet-theme-turva.auto .visual .icon {
+  bottom: 15px;
+}
+@media (min-width: 62em) {
+  .duet-banner.duet-theme-turva.auto .visual .image-container {
+    top: -54.923px;
+    left: -147px;
+  }
+  .duet-banner.duet-theme-turva.auto .visual .image {
+    top: 0;
+    left: 0;
+  }
+  .duet-banner.duet-theme-turva.auto .visual .icon {
+    bottom: auto;
+    left: 295px;
+  }
+}

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

@@ -0,0 +1,282 @@
+/*!
+ * Built with Duet Design System
+ */
+import { h, Host } from "@stencil/core";
+import { inheritGlobalTheme } from "../../common/themeable-component";
+import { getColorByName } from "../../utils/token-utils";
+export class DuetBanner {
+  constructor() {
+    this.theme = "";
+    this.margin = "auto";
+    this.backgroundColor = "primary-lighter";
+    this.iconColor = "gray-lightest";
+    this.iconBackgroundColor = "primary";
+    this.textColor = "secondary";
+    this.size = "auto";
+    this.image = "";
+    this.icon = "";
+    this.headingLevel = "h2";
+  }
+  /**
+   * Component lifecycle events.
+   */
+  componentWillLoad() {
+    inheritGlobalTheme(this);
+    this.hasHeadingSlot = !!this.element.querySelector('[slot="heading"]');
+    this.hasDescriptionSlot = !!this.element.querySelector('[slot="description"]');
+    this.hasActionSlot = !!this.element.querySelector('[slot="action"]');
+  }
+  /**
+   * render() function
+   * Always the last one of the class.
+   */
+  render() {
+    const backgroundColorTemp = this.theme === "turva" && this.backgroundColor === "primary-lighter" ? "gray-light" : this.backgroundColor;
+    const backgroundColor = getColorByName(backgroundColorTemp, this.theme);
+    const bannerStyles = {
+      backgroundColor,
+    };
+    return (h(Host, { class: { "duet-m-0": this.margin === "none" } }, h("aside", { class: {
+        "duet-banner": true,
+        "duet-theme-turva": this.theme === "turva",
+        [this.size]: true,
+      }, style: bannerStyles }, h("div", { class: "visual" }, h("div", { class: "image-container" }, h("img", { class: "image", src: this.image, alt: "", role: "presentation" })), this.icon && (h("duet-icon", { theme: this.theme, class: "icon", name: this.icon, shape: "brand", size: "xx-large", color: this.iconColor, background: this.iconBackgroundColor, "background-rotation": "7", "background-opacity": "0.85", margin: "none" }))), h("div", { class: "content" }, this.hasHeadingSlot && (h("div", { class: "heading" }, h("duet-heading", { theme: this.theme, level: this.headingLevel, "visual-level": "h2", margin: "none", color: this.textColor }, h("slot", { name: "heading" })))), this.hasDescriptionSlot && (h("div", { class: "description" }, h("duet-paragraph", { theme: this.theme, margin: "none", color: this.textColor }, h("slot", { name: "description" })))), this.hasActionSlot && (h("div", { class: "action" }, h("duet-spacer", { direction: "vertical", size: "medium" }), h("slot", { name: "action" })))))));
+  }
+  static get is() { return "duet-banner"; }
+  static get encapsulation() { return "shadow"; }
+  static get originalStyleUrls() {
+    return {
+      "$": ["duet-banner.scss"]
+    };
+  }
+  static get styleUrls() {
+    return {
+      "$": ["duet-banner.css"]
+    };
+  }
+  static get properties() {
+    return {
+      "theme": {
+        "type": "string",
+        "mutable": true,
+        "complexType": {
+          "original": "DuetTheme",
+          "resolved": "\"\" | \"default\" | \"turva\"",
+          "references": {
+            "DuetTheme": {
+              "location": "import",
+              "path": "../../common-types"
+            }
+          }
+        },
+        "required": false,
+        "optional": false,
+        "docs": {
+          "tags": [],
+          "text": "Theme."
+        },
+        "attribute": "theme",
+        "reflect": false,
+        "defaultValue": "\"\""
+      },
+      "margin": {
+        "type": "string",
+        "mutable": false,
+        "complexType": {
+          "original": "DuetMargin",
+          "resolved": "\"auto\" | \"none\"",
+          "references": {
+            "DuetMargin": {
+              "location": "import",
+              "path": "../../common-types"
+            }
+          }
+        },
+        "required": false,
+        "optional": false,
+        "docs": {
+          "tags": [],
+          "text": "Controls the margin of the component."
+        },
+        "attribute": "margin",
+        "reflect": false,
+        "defaultValue": "\"auto\""
+      },
+      "backgroundColor": {
+        "type": "string",
+        "mutable": false,
+        "complexType": {
+          "original": "DuetColor",
+          "resolved": "string",
+          "references": {
+            "DuetColor": {
+              "location": "import",
+              "path": "../../common-types"
+            }
+          }
+        },
+        "required": false,
+        "optional": false,
+        "docs": {
+          "tags": [],
+          "text": "Background color."
+        },
+        "attribute": "background-color",
+        "reflect": false,
+        "defaultValue": "\"primary-lighter\""
+      },
+      "iconColor": {
+        "type": "string",
+        "mutable": false,
+        "complexType": {
+          "original": "DuetColor",
+          "resolved": "string",
+          "references": {
+            "DuetColor": {
+              "location": "import",
+              "path": "../../common-types"
+            }
+          }
+        },
+        "required": false,
+        "optional": false,
+        "docs": {
+          "tags": [],
+          "text": "Icon color."
+        },
+        "attribute": "icon-color",
+        "reflect": false,
+        "defaultValue": "\"gray-lightest\""
+      },
+      "iconBackgroundColor": {
+        "type": "string",
+        "mutable": false,
+        "complexType": {
+          "original": "DuetColor",
+          "resolved": "string",
+          "references": {
+            "DuetColor": {
+              "location": "import",
+              "path": "../../common-types"
+            }
+          }
+        },
+        "required": false,
+        "optional": false,
+        "docs": {
+          "tags": [],
+          "text": "Icon background color."
+        },
+        "attribute": "icon-background-color",
+        "reflect": false,
+        "defaultValue": "\"primary\""
+      },
+      "textColor": {
+        "type": "string",
+        "mutable": false,
+        "complexType": {
+          "original": "DuetColor",
+          "resolved": "string",
+          "references": {
+            "DuetColor": {
+              "location": "import",
+              "path": "../../common-types"
+            }
+          }
+        },
+        "required": false,
+        "optional": false,
+        "docs": {
+          "tags": [],
+          "text": "Text color."
+        },
+        "attribute": "text-color",
+        "reflect": false,
+        "defaultValue": "\"secondary\""
+      },
+      "size": {
+        "type": "string",
+        "mutable": false,
+        "complexType": {
+          "original": "\"auto\" | \"small\" | \"large\"",
+          "resolved": "\"auto\" | \"large\" | \"small\"",
+          "references": {}
+        },
+        "required": false,
+        "optional": false,
+        "docs": {
+          "tags": [],
+          "text": "Size."
+        },
+        "attribute": "size",
+        "reflect": false,
+        "defaultValue": "\"auto\""
+      },
+      "image": {
+        "type": "string",
+        "mutable": false,
+        "complexType": {
+          "original": "string",
+          "resolved": "string",
+          "references": {}
+        },
+        "required": false,
+        "optional": false,
+        "docs": {
+          "tags": [],
+          "text": "Image. Example image is 512x341;"
+        },
+        "attribute": "image",
+        "reflect": false,
+        "defaultValue": "\"\""
+      },
+      "icon": {
+        "type": "string",
+        "mutable": false,
+        "complexType": {
+          "original": "DuetIconName",
+          "resolved": "string",
+          "references": {
+            "DuetIconName": {
+              "location": "import",
+              "path": "../../common-types"
+            }
+          }
+        },
+        "required": false,
+        "optional": false,
+        "docs": {
+          "tags": [],
+          "text": "Icon."
+        },
+        "attribute": "icon",
+        "reflect": false,
+        "defaultValue": "\"\""
+      },
+      "headingLevel": {
+        "type": "string",
+        "mutable": false,
+        "complexType": {
+          "original": "DuetHeadingLevel",
+          "resolved": "\"h1\" | \"h2\" | \"h3\" | \"h4\" | \"h5\" | \"h6\"",
+          "references": {
+            "DuetHeadingLevel": {
+              "location": "import",
+              "path": "../../common-types"
+            }
+          }
+        },
+        "required": false,
+        "optional": false,
+        "docs": {
+          "tags": [],
+          "text": "The actual heading level used in the HTML markup."
+        },
+        "attribute": "heading-level",
+        "reflect": false,
+        "defaultValue": "\"h2\""
+      }
+    };
+  }
+  static get elementRef() { return "element"; }
+}

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

@@ -114,7 +114,8 @@ duet-editable-table tfoot {
 
 .upload-bottom-caption {
   margin-top: 12px;
-  margin-bottom: 28px;
+  margin-bottom: 16px;
+  line-height: 1.4rem;
 }
 
 .items-header {