@repobit/dex-system-design 0.24.9 → 0.24.11

package/CHANGELOG.md

@@ -3,6 +3,22 @@
 All notable changes to this project will be documented in this file.
 See [Conventional Commits](https://conventionalcommits.org) for commit guidelines.
 
+## [0.24.11](https://github.com/bitdefender/dex-core/compare/@repobit/dex-system-design@0.24.10...@repobit/dex-system-design@0.24.11) (2026-09-09)
+
+### Bug Fixes
+
+* **DEX-1014:** announcement banner component
+* **DEX-1014:** announcement banner component
+
+
+## [0.24.10](https://github.com/bitdefender/dex-core/compare/@repobit/dex-system-design@0.24.9...@repobit/dex-system-design@0.24.10) (2026-09-08)
+
+**Note:** Version bump only for package @repobit/dex-system-design
+
+
+
+
+
 ## [0.24.9](https://github.com/bitdefender/dex-core/compare/@repobit/dex-system-design@0.24.8...@repobit/dex-system-design@0.24.9) (2026-09-08)
 
 ### Bug Fixes

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@repobit/dex-system-design",
-  "version": "0.24.9",
+  "version": "0.24.11",
   "description": "Design system based on Web Components.",
   "author": "Iordache Matei Cezar <miordache@bitdefender.com>",
   "homepage": "https://github.com/bitdefender/dex-core#readme",
@@ -74,8 +74,8 @@
     "url": "https://github.com/bitdefender/dex-core/issues"
   },
   "dependencies": {
-    "@repobit/dex-store": "1.6.25",
-    "@repobit/dex-store-elements": "2.0.30",
+    "@repobit/dex-store": "1.6.27",
+    "@repobit/dex-store-elements": "2.0.32",
     "lit": "^3.3.2"
   },
   "devDependencies": {
@@ -92,5 +92,5 @@
   "volta": {
     "node": "24.14.0"
   },
-  "gitHead": "1f08b0389af256faebe7db77b276d350c9be31ae"
+  "gitHead": "1090fb8b6f3075a6fbfc7a2d055c3d00bfe05a55"
 }

package/src/components/announcement-banner/announcement-banner.css.js

@@ -0,0 +1,73 @@
+import { css } from "lit";
+
+export default css`
+  :host {
+    display: block;
+    font-family: "Roboto", "roboto-normal-400-fallback", helvetica, ubuntu, roboto, noto, sans-serif;
+    max-width: 1290px;
+    margin: 0 auto;
+  }
+
+  .bd-announcementbanner-container {
+background: linear-gradient(87.6deg, var(--color-blue-500) 0%, var(--color-blue-950) 100%);
+    border-radius: var(--radius-2xl);
+    padding: var(--spacing-48);
+    box-sizing: border-box;
+    display: flex;
+    flex-wrap: wrap;
+    align-items: center;
+    // justify-content: space-between;
+    gap: var(--spacing-96);
+  }
+
+  .bd-announcementbanner-title {
+    display: block;
+    margin: 0;
+    color: var(--color-neutral-0, #fff);
+    line-height: var(--typography-lineHeight-tight, 1.15);
+    flex: 1 1 320px;
+    max-width: 560px;
+  }
+
+  .bd-announcementbanner-side {
+    display: flex;
+    flex-direction: column;
+    align-items: flex-start;
+    gap: var(--spacing-16);
+    flex: 1 1 280px;
+    max-width: 360px;
+  }
+
+  .bd-announcementbanner-icon {
+    display: flex;
+    align-items: center;
+    color: var(--color-neutral-0, #fff);
+    margin-bottom: var(--spacing-4);
+  }
+
+  .bd-announcementbanner-icon ::slotted(*) {
+    display: block;
+    max-width: 160px;
+    width: 100%;
+    height: auto;
+  }
+
+  .bd-announcementbanner-description {
+    margin: 0;
+    color: rgba(255, 255, 255, 0.65);
+  }
+
+  @media (max-width: 699px) {
+    .bd-announcementbanner-container {
+      padding: var(--spacing-28) var(--spacing-24);
+      flex-direction: column;
+      align-items: flex-start;
+    }
+
+    .bd-announcementbanner-title,
+    .bd-announcementbanner-side {
+      max-width: none;
+      flex-basis: auto;
+    }
+  }
+`;

package/src/components/announcement-banner/announcement-banner.js

@@ -0,0 +1,56 @@
+import { LitElement, html, nothing } from "lit";
+import { tokens } from "../../tokens/tokens.js";
+import "../heading/heading.js";
+import "../paragraph/paragraph.js";
+import announcementBannerCSS from "./announcement-banner.css.js";
+
+/**
+ * Simple two-column banner on a blue gradient — a title on the left, an
+ * icon + description on the right. No buttons; for
+ * partnership/announcement callouts (e.g. "Bitdefender joined the Global
+ * Anti-Scam Alliance"), not calls to action. See bd-cta-banner for the
+ * centred, button-driven variant.
+ *
+ *   <bd-announcement-banner
+ *     title="Bitdefender joined the Global Anti-Scam Alliance as a Foundation Member"
+= *     description="Global Anti-Scam Alliance (GASA) unites organisations, experts, and law enforcement to protect consumers worldwide from scams."
+ *   >
+ *     <bd-gasa-icon slot="icon" width="140" height="40" color="#fff"></bd-gasa-icon>
+ *   </bd-announcement-banner>
+ */
+class BdAnnouncementBanner extends LitElement {
+  static properties = {
+    title      : { type: String },
+    description: { type: String }
+  };
+
+  static styles = [tokens, announcementBannerCSS];
+
+  constructor() {
+    super();
+    this.title = "";
+    this.description = "";
+  }
+
+  render() {
+    return html`
+      <div class="bd-announcementbanner-container">
+        <bd-h as="h2" fontWeight="400" class="bd-announcementbanner-title">
+          <slot name="title">${this.title}</slot>
+        </bd-h>
+
+        <div class="bd-announcementbanner-side">
+          <div class="bd-announcementbanner-icon">
+            <slot name="icon"></slot>
+          </div>
+
+          ${this.description
+            ? html`<bd-p kind="large" color="var(--color-neutral-0)" class="bd-announcementbanner-description"><slot name="description">${this.description}</slot></bd-p>`
+            : nothing}
+        </div>
+      </div>
+    `;
+  }
+}
+
+customElements.define("bd-announcement-banner", BdAnnouncementBanner);

package/src/components/announcement-banner/announcement-banner.stories.js

@@ -0,0 +1,190 @@
+import { html } from "lit";
+import "../picture/picture.js";
+import "./announcement-banner.js";
+
+
+export default {
+  title     : "Components/AnnouncementBanner",
+  component : "bd-announcement-banner",
+  tags      : ["autodocs"],
+  parameters: {
+    layout: "padded",
+    docs  : {
+      description: {
+        component: `
+**AnnouncementBanner** este un banner simplu, cu 2 coloane, pe fundal albastru
+gradient — titlu mare în stânga, iar în dreapta o iconiță/logo + caption +
+descriere. Nu are butoane — e gândit pentru anunțuri de tip parteneriat sau
+apartenență la o organizație, nu pentru CTA-uri.
+
+Pentru varianta centrată, cu butoane, vezi \`bd-cta-banner\`.
+
+### Usage
+\`\`\`html
+<bd-announcement-banner
+  title="Bitdefender joined the Global Anti-Scam Alliance as a Foundation Member"
+  caption="Global Anti-Scam Alliance"
+  description="Global Anti-Scam Alliance (GASA) unites organisations, experts, and law enforcement to protect consumers worldwide from scams."
+>
+  <bd-picture
+    slot="icon"
+    .sources=\${sources}
+    .fallbackSrc=\${fallbackSrc}
+    alt="Global Anti-Scam Alliance logo"
+  ></bd-picture>
+</bd-announcement-banner>
+\`\`\`
+
+### Attributes
+| Attribute      | Type   | Default | Description                                              |
+|------------------|--------|----------|------------------------------------------------------------|
+| \`title\`          | String | \`""\`     | Titlul mare, afișat în coloana stângă (sau slot-ul \`title\`)  |
+| \`caption\`        | String | \`""\`     | Eticheta scurtă de deasupra descrierii, coloana dreaptă (opțional) |
+| \`description\`    | String | \`""\`     | Textul descriptiv din coloana dreaptă (sau slot-ul \`description\`) |
+
+### Slots
+| Slot           | Description                                                      |
+|-----------------|--------------------------------------------------------------------|
+| \`icon\`          | Iconița/logo-ul din coloana dreaptă (ex: \`bd-picture\`)             |
+| \`title\`         | Suprascrie atributul \`title\` dacă are conținut                    |
+| \`caption\`       | Suprascrie atributul \`caption\` dacă are conținut                  |
+| \`description\`   | Suprascrie atributul \`description\` dacă are conținut              |
+        `
+      }
+    }
+  },
+  argTypes: {
+    title      : { control: "text", table: { category: "Content" } },
+    caption    : { control: "text", table: { category: "Content" } },
+    description: { control: "text", table: { category: "Content" } }
+  }
+};
+
+const gasaSources = [
+  {
+    type  : "image/webp",
+    srcset: "https://main--www-websites--bitdefender.aem.page/en-us/consumer/media_1a19736be4554469877718d743401be3086dbb640.png?width=2000&format=webply&optimize=medium",
+    media : "(min-width: 600px)"
+  },
+  {
+    type  : "image/webp",
+    srcset: "https://main--www-websites--bitdefender.aem.page/en-us/consumer/media_1a19736be4554469877718d743401be3086dbb640.png?width=750&format=webply&optimize=medium"
+  },
+  {
+    type  : "image/png",
+    srcset: "https://main--www-websites--bitdefender.aem.page/en-us/consumer/media_1a19736be4554469877718d743401be3086dbb640.png?width=2000&format=png&optimize=medium",
+    media : "(min-width: 600px)"
+  }
+];
+
+const gasaFallback = "https://main--www-websites--bitdefender.aem.page/en-us/consumer/media_1a19736be4554469877718d743401be3086dbb640.png?width=750&format=png&optimize=medium";
+
+const gasaPicture = () => html`
+  <bd-picture
+    slot="icon"
+    .sources=${gasaSources}
+    .fallbackSrc=${gasaFallback}
+    alt="Global Anti-Scam Alliance logo"
+    .width=${393}
+    .height=${144}
+    fit="contain"
+    loading="lazy"
+    referrer-policy="no-referrer"
+  ></bd-picture>
+`;
+
+export const Default = {
+  name: "1. Default",
+  args: {
+    title      : "Bitdefender joined the Global Anti-Scam Alliance as a Foundation Member",
+    caption    : "Global Anti-Scam Alliance",
+    description: "Global Anti-Scam Alliance (GASA) unites organisations, experts, and law enforcement to protect consumers worldwide from scams."
+  },
+  render: (args) => html`
+    <bd-announcement-banner
+      title=${args.title}
+      caption=${args.caption}
+      description=${args.description}
+    >
+      ${gasaPicture()}
+    </bd-announcement-banner>
+  `,
+  parameters: {
+    docs: {
+      description: {
+        story: "Varianta completă: titlu, caption, descriere și iconiță."
+      }
+    }
+  }
+};
+
+export const NoCaption = {
+  name: "2. Fără caption",
+  args: {
+    title      : "Bitdefender named a Leader in the 2026 Endpoint Protection report",
+    caption    : "",
+    description: "Recognised for detection accuracy, low false-positive rate, and minimal performance impact across three consecutive evaluation cycles."
+  },
+  render: (args) => html`
+    <bd-announcement-banner
+      title=${args.title}
+      caption=${args.caption}
+      description=${args.description}
+    >
+      ${gasaPicture()}
+    </bd-announcement-banner>
+  `,
+  parameters: {
+    docs: {
+      description: {
+        story: "Fără caption — util când titlul e suficient de descriptiv."
+      }
+    }
+  }
+};
+
+export const TitleOnly = {
+  name: "3. Doar titlu",
+  args: {
+    title      : "Bitdefender now supports macOS Tahoe on day one",
+    caption    : "",
+    description: ""
+  },
+  render: (args) => html`
+    <bd-announcement-banner title=${args.title}>
+      ${gasaPicture()}
+    </bd-announcement-banner>
+  `,
+  parameters: {
+    docs: {
+      description: {
+        story: "Minimal — doar titlu și iconiță, fără caption sau descriere."
+      }
+    }
+  }
+};
+
+export const Playground = {
+  name: "Playground",
+  args: {
+    title      : "Bitdefender joined the Global Anti-Scam Alliance as a Foundation Member",
+    caption    : "Global Anti-Scam Alliance",
+    description: "Global Anti-Scam Alliance (GASA) unites organisations, experts, and law enforcement to protect consumers worldwide from scams."
+  },
+  render: (args) => html`
+    <bd-announcement-banner
+      title=${args.title}
+      caption=${args.caption}
+      description=${args.description}
+    >
+      ${gasaPicture()}
+    </bd-announcement-banner>
+  `,
+  parameters: {
+    docs: {
+      description: {
+        story: "Interactiv — modifică `title`, `caption` și `description` din Controls."
+      }
+    }
+  }
+};

package/src/components/paragraph/paragraph.js

@@ -9,7 +9,8 @@ export class BdP extends LitElement {
     paddingBottom: { type: String },
     paddingTop   : { type: String },
     fontFamily   : { type: String, attribute: "font-family" },
-    fontWeight   : { type: String, attribute: "font-weight" }
+    fontWeight   : { type: String, attribute: "font-weight" },
+    color        : { type: String }
   };
 
   constructor() {
@@ -20,6 +21,7 @@ export class BdP extends LitElement {
     this.paddingTop = "";
     this.fontFamily = "";
     this.fontWeight = "";
+    this.color = "";
   }
 
   _getKindClass() {
@@ -35,6 +37,22 @@ export class BdP extends LitElement {
     }
   }
 
+  // Same validation as bd-h's _getValidColor — only accepts CSS token
+  // references or real colour syntax, so a typo or stray text never lands
+  // in the inline style attribute as literal (and potentially unsafe) CSS.
+  _getValidColor(color) {
+    if (!color) return "";
+    if (
+      color.startsWith("var(") ||
+      color.startsWith("#") ||
+      color.startsWith("rgb") ||
+      color.startsWith("hsl")
+    ) {
+      return color;
+    }
+    return "";
+  }
+
   render() {
     const styles = [];
     if (this.padding) styles.push(`padding: ${this.padding};`);
@@ -43,6 +61,9 @@ export class BdP extends LitElement {
     if (this.fontFamily) styles.push(`font-family: ${this.fontFamily};`);
     if (this.fontWeight) styles.push(`font-weight: ${this.fontWeight};`);
 
+    const validColor = this._getValidColor(this.color);
+    if (validColor) styles.push(`color: ${validColor};`);
+
     const kindClass = this._getKindClass();
 
     return html`

package/src/components/picture/picture.js

@@ -1,17 +1,19 @@
-import { LitElement, html } from "lit";
+import { LitElement, html, nothing } from "lit";
 import { tokens } from "../../tokens/tokens.js";
 import pictureCSS from "./picture.css.js";
 
 export class BdPicture extends LitElement {
   static properties = {
-    sources    : { type: Array },
-    alt        : { type: String },
-    fallbackSrc: { type: String },
-    width      : { type: Number },
-    height     : { type: Number },
-    loading    : { type: String },
-    fit        : { type: String },
-    radius     : { type: String }
+    sources       : { type: Array },
+    alt           : { type: String },
+    fallbackSrc   : { type: String },
+    width         : { type: Number },
+    height        : { type: Number },
+    loading       : { type: String },
+    fit           : { type: String },
+    radius        : { type: String },
+    referrerPolicy: { type: String, attribute: "referrer-policy" },
+    _loaded       : { state: true }
   };
 
   constructor() {
@@ -24,6 +26,25 @@ export class BdPicture extends LitElement {
     this.loading = "lazy";
     this.fit = "cover";
     this.radius = "none";
+    this.referrerPolicy = "";
+    this._loaded = false;
+  }
+
+  _onImgLoad() {
+    this._loaded = true;
+  }
+
+  _onImgError() {
+    this._loaded = true;
+  }
+
+  updated(changedProperties) {
+    super.updated(changedProperties);
+    if (this._loaded) return;
+    const img = this.renderRoot?.querySelector("img");
+    if (img && img.complete && img.naturalWidth > 0) {
+      this._loaded = true;
+    }
   }
 
   render() {
@@ -34,7 +55,7 @@ export class BdPicture extends LitElement {
     ].filter(Boolean).join(' ');
 
     return html`
-      <picture class="${classes}">
+      <picture class="${classes}" ?loaded=${this._loaded}>
         ${this.sources.map(source => html`
           <source 
             type="${source.type}" 
@@ -49,6 +70,10 @@ export class BdPicture extends LitElement {
           src="${this.fallbackSrc}"
           width="${this.width}"
           height="${this.height}"
+          referrerpolicy="${this.referrerPolicy || nothing}"
+          ?loaded=${this._loaded}
+          @load=${this._onImgLoad}
+          @error=${this._onImgError}
         >
       </picture>
     `;