ds-one 0.2.5-alpha.17 → 0.2.5-alpha.18

package/DS1/1-root/one.css

@@ -1,4 +1,4 @@
-/* version 0.2.5-alpha.17 */
+/* version 0.2.5-alpha.18 */
 
 @import url("https://fonts.googleapis.com/css2?family=Noto+Sans+JP:wght@200");
 @import url("https://fonts.googleapis.com/css2?family=Noto+Sans+SC:wght@800");

package/DS1/index.ts

@@ -30,6 +30,7 @@ export * from "./0-face/theme";
 // ============================================================================
 
 export * from "./2-core/ds-button";
+export * from "./2-core/ds-banner";
 export * from "./2-core/ds-cycle";
 export * from "./2-core/ds-gap";
 export * from "./2-core/ds-icon";

package/README.md

@@ -1,4 +1,4 @@
-# DS one (0.2.5-alpha.17)
+# DS one (0.2.5-alpha.18)
 
 A plug and play design system
 
@@ -20,7 +20,7 @@ yarn add ds-one@alpha
 
 ```
 
-**Note**: Currently published as alpha version `0.2.5-alpha.17`
+**Note**: Currently published as alpha version `0.2.5-alpha.18`
 
 ## Quick Start
 

package/dist/ds-one.bundle.js

@@ -2070,6 +2070,162 @@ Button.styles = i4`
   `;
 customElements.define("ds-button", Button);
 
+// dist/2-core/ds-banner.js
+var Banner = class extends i6 {
+  constructor() {
+    super(...arguments);
+    this.textKey = "";
+    this.actionKey = "";
+    this.href = "";
+    this.mailto = "";
+    this.subjectKey = "";
+    this.describeKey = "";
+    this.appVersionKey = "";
+    this.variant = "warning";
+    this.version = "";
+    this._showVersion = false;
+    this._boundUpdate = () => this.requestUpdate();
+  }
+  connectedCallback() {
+    super.connectedCallback();
+    window.addEventListener("translations-loaded", this._boundUpdate);
+    window.addEventListener("language-changed", this._boundUpdate);
+  }
+  disconnectedCallback() {
+    super.disconnectedCallback();
+    window.removeEventListener("translations-loaded", this._boundUpdate);
+    window.removeEventListener("language-changed", this._boundUpdate);
+  }
+  _toggleVersion() {
+    if (this.version) {
+      this._showVersion = !this._showVersion;
+    }
+  }
+  _getMailtoHref() {
+    if (this.href && this.href !== "#")
+      return this.href;
+    if (this.mailto) {
+      try {
+        const subject = this.subjectKey ? getText(this.subjectKey) || this.subjectKey : "Issue report";
+        const describe = this.describeKey ? getText(this.describeKey) || this.describeKey : "Describe the issue:";
+        const appVersionLabel = this.appVersionKey ? getText(this.appVersionKey) || this.appVersionKey : "App version:";
+        const body = `${describe}
+
+
+${appVersionLabel} ${this.version || ""}`;
+        return `mailto:${this.mailto}?subject=${encodeURIComponent(subject)}&body=${encodeURIComponent(body)}`;
+      } catch (error) {
+        return `mailto:${this.mailto}?subject=Issue%20report&body=Describe%20the%20issue%3A%0A%0A%0AApp%20version%3A%20${this.version || ""}`;
+      }
+    }
+    return "#";
+  }
+  render() {
+    const mailtoHref = this._getMailtoHref();
+    return x`
+      <div class="text-wrapper" @click=${this._toggleVersion}>
+        ${this._showVersion && this.version ? x`<ds-text default-value=${this.version}></ds-text>` : x`<ds-text key=${this.textKey}><slot></slot></ds-text>`}
+      </div>
+      ${this.actionKey ? x`
+            <div class="action-wrapper">
+              <a href=${mailtoHref}>
+                <ds-text key=${this.actionKey}></ds-text>
+              </a>
+            </div>
+          ` : ""}
+    `;
+  }
+};
+Banner.properties = {
+  textKey: { type: String, attribute: "text-key" },
+  actionKey: { type: String, attribute: "action-key" },
+  href: { type: String },
+  mailto: { type: String },
+  subjectKey: { type: String, attribute: "subject-key" },
+  describeKey: { type: String, attribute: "describe-key" },
+  appVersionKey: { type: String, attribute: "app-version-key" },
+  variant: { type: String },
+  version: { type: String },
+  _showVersion: { type: Boolean, state: true }
+};
+Banner.styles = i4`
+    :host {
+      display: flex;
+      position: absolute;
+      top: 0;
+      left: 0;
+      right: 0;
+      width: 100%;
+      height: calc(var(--unit) * var(--sf, 1));
+      align-items: center;
+      justify-content: space-between;
+      padding: 0 calc(var(--unit) * var(--sf, 1));
+      box-sizing: border-box;
+      z-index: 9999;
+    }
+
+    :host([variant="warning"]) {
+      background-color: color-mix(in srgb, var(--yellow) 50%, transparent);
+      --banner-text-color: color-mix(in srgb, var(--black) 50%, transparent);
+      --banner-action-color: var(--slate);
+    }
+
+    :host([variant="info"]) {
+      background-color: rgba(var(--sharp-blue-rgb, 0, 122, 255), 0.7);
+      --banner-text-color: var(--white, #fff);
+      --banner-action-color: var(--white, #fff);
+    }
+
+    :host([variant="success"]) {
+      background-color: rgba(var(--apple-green-rgb, 52, 199, 89), 0.7);
+      --banner-text-color: var(--white, #fff);
+      --banner-action-color: var(--white, #fff);
+    }
+
+    :host([variant="error"]) {
+      background-color: rgba(var(--tuned-red-rgb, 255, 59, 48), 0.7);
+      --banner-text-color: var(--white, #fff);
+      --banner-action-color: var(--slate, #1e1e1e);
+    }
+
+    .text-wrapper {
+      flex: 1;
+      cursor: pointer;
+      user-select: none;
+    }
+
+    .text-wrapper ds-text,
+    .text-wrapper .version {
+      color: var(--banner-text-color);
+    }
+
+    .action-wrapper {
+      font-size: calc(12px * var(--sf, 1));
+    }
+
+    .action-wrapper a {
+      color: var(--banner-action-color);
+      text-decoration: none;
+      font-family: var(--typeface-regular);
+      font-size: calc(12px * var(--sf, 1));
+      cursor: pointer;
+      pointer-events: auto;
+      display: inline-block;
+    }
+
+    .action-wrapper a:hover {
+      opacity: 0.8;
+    }
+
+    .action-wrapper ds-text {
+      color: var(--banner-action-color);
+      font-family: var(--typeface-regular);
+      font-size: calc(12px * var(--sf, 1));
+      pointer-events: none;
+    }
+  `;
+customElements.define("ds-banner", Banner);
+
 // node_modules/lit-html/directives/unsafe-html.js
 var e6 = class extends i2 {
   constructor(i7) {
@@ -3726,6 +3882,7 @@ Layout.styles = i4`
 customElements.define("ds-layout", Layout);
 export {
   Accordion,
+  Banner,
   Button,
   Container,
   Cycle,