@repobit/dex-system-design 0.23.32 → 0.23.34

package/CHANGELOG.md

@@ -3,6 +3,20 @@
 All notable changes to this project will be documented in this file.
 See [Conventional Commits](https://conventionalcommits.org) for commit guidelines.
 
+## [0.23.34](https://github.com/bitdefender/dex-core/compare/@repobit/dex-system-design@0.23.33...@repobit/dex-system-design@0.23.34) (2026-05-21)
+
+### Bug Fixes
+
+* **DEX-1014:** refactor accordion structure
+
+
+## [0.23.33](https://github.com/bitdefender/dex-core/compare/@repobit/dex-system-design@0.23.32...@repobit/dex-system-design@0.23.33) (2026-05-21)
+
+### Bug Fixes
+
+* **DEX-1014:** refactor accordion and replace static SVG assets
+
+
 ## [0.23.32](https://github.com/bitdefender/dex-core/compare/@repobit/dex-system-design@0.23.31...@repobit/dex-system-design@0.23.32) (2026-05-18)
 
 ### Bug Fixes

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@repobit/dex-system-design",
-  "version": "0.23.32",
+  "version": "0.23.34",
   "description": "Design system based on Web Components.",
   "author": "Iordache Matei Cezar <miordache@bitdefender.com>",
   "homepage": "https://github.com/bitdefender/dex-core#readme",
@@ -70,8 +70,8 @@
     "url": "https://github.com/bitdefender/dex-core/issues"
   },
   "dependencies": {
-    "@repobit/dex-store": "1.3.28",
-    "@repobit/dex-store-elements": "1.4.20",
+    "@repobit/dex-store": "1.3.30",
+    "@repobit/dex-store-elements": "1.4.22",
     "lit": "^3.3.2"
   },
   "devDependencies": {
@@ -88,5 +88,5 @@
   "volta": {
     "node": "24.14.0"
   },
-  "gitHead": "fad52633a951246bb6cab80a5b6966044d833a8c"
+  "gitHead": "7d7e902dcbbb5deee029ea3e70d7cd27758b950e"
 }

package/src/components/accordion/accordion-bg.css.js

@@ -9,10 +9,16 @@ export default css`
     --bd-accesibility-focus: var(--color-blue-500);
     display: block;
   }
+:host(bd-accordion-bg-item[data-variant="terms-of-use"]) {
+  background-color: transparent !important;
+  padding: 0;
+  border-radius: 0;
+}
+
 
   :host(bd-accordion-bg-item) {
     display: block;
-    margin-bottom: var(--spacing-12);
+    margin-bottom: var(--spacing-16);
     padding: 0 var(--spacing-16);
     box-sizing: border-box;
     background-color: var(--color-blue-50);
@@ -51,6 +57,13 @@ export default css`
     box-shadow: var(--focus-outline-primary);
   }
 
+  ::slotted(bd-p) {
+  padding-bottom: var(--spacing-16);
+}
+
+::slotted(bd-p:last-child) {
+  padding-bottom: 0;
+}
   .bd-accordion-bg-item {
     margin-bottom: 0;
     border-radius: 0;
@@ -67,7 +80,7 @@ export default css`
     align-items: flex-start;
     gap: var(--spacing-12);
     width: 100%;
-    padding: var(--spacing-12) 0;
+    padding: var(--spacing-16) 0;
     margin: 0;
     border: none;
     font: inherit;
@@ -165,7 +178,7 @@ export default css`
     display: block;
     max-height: 5000px;
     opacity: 1;
-    padding: var(--spacing-0) var(--spacing-0) var(--spacing-12)
+    padding: var(--spacing-0) var(--spacing-0) var(--spacing-16)
       calc(var(--icon-sm-size) + var(--spacing-12));
   }
 
@@ -179,10 +192,9 @@ export default css`
   }
 
   .bd-accordion-bg-container {
-    width: 100%;
+    // width: 100%;
     margin: auto;
-    padding-top: var(--spacing-64);
-    padding-bottom: var(--spacing-64);
+    padding: var(--spacing-64) var(--spacing-32) var(--spacing-64) var(--spacing-32)
   }
 
   .bd-accordion-bg-container.no-bg {

package/src/components/accordion/accordion-bg.js

@@ -1,62 +1,166 @@
 import { LitElement, html } from "lit";
 import { tokens } from "../../tokens/tokens.js";
+import "../heading/heading.js";
 import "../icons/minus-icon.js";
 import "../icons/plus-icon.js";
+import "../paragraph/paragraph.js";
 import accordionCSS from "./accordion-bg.css.js";
+import { accordionItem, accordionSection } from "./accordion.css.js";
 
 class BdAccordionBg extends LitElement {
   static properties = {
-    title: { type: String },
-    noBg : { type: Boolean, reflect: true, attribute: "no-bg" }
-  };
+    title     : { type: String },
+    noBg      : { type: Boolean, reflect: true, attribute: "no-bg" },
+    guideIcon : { type: String, reflect: true, attribute: "guide-icon" },
+    guideLabel: { type: String, reflect: true, attribute: "guide-label" },
+    guideHref : { type: String, reflect: true, attribute: "guide-href" },
+    _variant  : { state: true },
+    variant   : { type: String, reflect: true, attribute: "data-variant" }
+  }
 
   constructor() {
     super();
-    this.noBg = false;
+    this.noBg      = false;
+    this._variant  = "default";
+    this.variant   = "default";
+    this.guideIcon  = "";
+    this.guideLabel = "";
+    this.guideHref  = "#";
   }
 
-  static styles = [tokens, accordionCSS];
+  static styles = [tokens, accordionCSS, accordionSection];
 
-  render() {
+  connectedCallback() {
+    super.connectedCallback();
+    Promise.resolve().then(() => this._detectVariant());
+  }
+
+  // În BdAccordionBg, înlocuiește _detectVariant și adaugă firstUpdated:
+
+  _detectVariant() {
+    let el = this.parentElement;
+    while (el) {
+      if (el.classList.contains("faq")) {
+        this._variant = "faq";
+        this.variant  = "faq";
+        this._propagateVariant("faq");
+        return;
+      }
+      if (
+        el.classList.contains("terms-of-use") ||
+      el.classList.contains("system-requirements")
+      ) {
+        this._variant = "terms-of-use";
+        this.variant  = "terms-of-use";
+        this._propagateVariant("terms-of-use");
+        return;
+      }
+      el = el.parentElement;
+    }
+    this._variant = "default";
+    this.variant  = "default";
+    this._propagateVariant("default");
+  }
+
+  _propagateVariant(variant) {
+  // Setam data-variant pe toti copiii slotted bd-accordion-bg-item
+    this.querySelectorAll("bd-accordion-bg-item").forEach(item => {
+      item.setAttribute("data-variant", variant);
+    });
+  }
+
+  _renderFaq() {
     return html`
       <div class="bd-accordion-bg-container ${this.noBg ? "no-bg" : ""}">
         <div class="bd-accordion-bg-header">
-          <h1 class="bd-accordion-bg-title">${this.title}</h1>
+          <bd-h as="h2" class="bd-accordion-bg-title">${this.title}</bd-h>
         </div>
         <slot></slot>
       </div>
     `;
   }
+
+  _renderTerms() {
+    return html`
+      <div class="bd-accordion-section-container">
+        ${this.title
+          ? html`<bd-h as="h6" paddingBottom=var(--spacing-32) fontWeight="700" class="section-title">${this.title}</bd-h>`
+          : ""}
+        <slot></slot>
+        ${this.guideLabel
+          ? html`
+              <p class="user-guide-link">
+                <a href=${this.guideHref}>
+                  ${this.guideIcon
+                    ? html`<bd-plus-icon  size="16" color="#006DFF"></bd-plus-icon>`
+                    : ""}
+                  ${this.guideLabel}
+                </a>
+              </p>`
+          : ""}
+      </div>
+    `;
+  }
+
+  render() {
+    return this._variant === "terms-of-use"
+      ? this._renderTerms()
+      : this._renderFaq();
+  }
 }
 
 class BdAccordionBgItem extends LitElement {
   static properties = {
-    title: { type: String },
-    open : { type: Boolean, reflect: true },
-    noBg : { type: Boolean, reflect: true, attribute: "no-bg" }
+    title   : { type: String },
+    open    : { type: Boolean, reflect: true },
+    noBg    : { type: Boolean, reflect: true, attribute: "no-bg" },
+    _variant: { state: true }
   };
 
   constructor() {
     super();
-    this.title = "";
-    this.open = false;
-    this.noBg = false;
-    const id = Math.random().toString(36)
+    this.title     = "";
+    this.open      = false;
+    this.noBg      = false;
+    this._variant  = "default";
+    const id       = Math.random().toString(36)
       .slice(2, 11);
-    /** @type {string} */
     this._headerId = `acc-bg-h-${id}`;
-    /** @type {string} */
-    this._panelId = `acc-bg-p-${id}`;
+    this._panelId  = `acc-bg-p-${id}`;
   }
 
-  static styles = [tokens, accordionCSS];
+  static styles = [tokens, accordionCSS, accordionItem];
+
+  connectedCallback() {
+    super.connectedCallback();
+    Promise.resolve().then(() => this._detectVariant());
+  }
+
+  _detectVariant() {
+    let el = this.parentElement;
+    while (el) {
+      if (el.classList.contains("faq")) {
+        this._variant = "faq";
+        return;
+      }
+      if (
+        el.classList.contains("terms-of-use") ||
+        el.classList.contains("system-requirements")
+      ) {
+        this._variant = "terms-of-use";
+        return;
+      }
+      el = el.parentElement;
+    }
+    this._variant = "default";
+  }
 
   toggleItem() {
     this.open = !this.open;
   }
 
   _onTriggerFocusIn() {
-    const btn = this.renderRoot?.querySelector(".bd-accordion-bg-question");
+    const btn = this.renderRoot?.querySelector(".bd-accordion-bg-question, .header");
     if (!btn) return;
     requestAnimationFrame(() => {
       requestAnimationFrame(() => {
@@ -71,11 +175,35 @@ class BdAccordionBgItem extends LitElement {
     this.removeAttribute("data-bd-acc-focus");
   }
 
-  render() {
+  // Design bd-accordion — pentru terms-of-use si system-requirements
+  _renderTerms() {
     return html`
-      <div
-        class="bd-accordion-bg-item ${this.open ? "open" : ""} ${this.noBg ? "no-bg" : ""}"
+      <button
+        type="button"
+        class="header"
+        aria-expanded="${this.open}"
+        aria-controls="${this._panelId}"
+        @click=${this.toggleItem}
+        @focusin=${this._onTriggerFocusIn}
+        @focusout=${this._onTriggerFocusOut}
       >
+        <span class="toggle" aria-hidden="true">
+          ${this.open
+            ? html`<bd-minus-icon size="16" color="#006DFF"></bd-minus-icon>`
+            : html`<bd-plus-icon  size="16" color="#006DFF"></bd-plus-icon>`}
+        </span>
+        <span class="title">${this.title}</span>
+      </button>
+      <div id="${this._panelId}" class="content" ?hidden=${!this.open}>
+        <slot></slot>
+      </div>
+    `;
+  }
+
+  // Design bd-accordion-bg — pentru faq (default)
+  _renderDefault() {
+    return html`
+      <div class="bd-accordion-bg-item ${this.open ? "open" : ""} ${this.noBg ? "no-bg" : ""}">
         <button
           type="button"
           id="${this._headerId}"
@@ -86,12 +214,11 @@ class BdAccordionBgItem extends LitElement {
           @focusin=${this._onTriggerFocusIn}
           @focusout=${this._onTriggerFocusOut}
         >
-<span class="bd-accordion-bg-icon" aria-hidden="true">
-  ${this.open
-      ? html`<bd-minus-icon size="16" color="#006DFF"></minus-icon>`
-      : html`<bd-plus-icon  size="16" color="#006DFF"></plus-icon>`
-  }
-</span>
+          <span class="bd-accordion-bg-icon" aria-hidden="true">
+            ${this.open
+              ? html`<bd-minus-icon size="16" color="#006DFF"></bd-minus-icon>`
+              : html`<bd-plus-icon  size="16" color="#006DFF"></bd-plus-icon>`}
+          </span>
           <span class="bd-accordion-bg-question-text">${this.title}</span>
         </button>
         <div
@@ -106,7 +233,13 @@ class BdAccordionBgItem extends LitElement {
       </div>
     `;
   }
+
+  render() {
+    return this._variant === "terms-of-use"
+      ? this._renderTerms()
+      : this._renderDefault();
+  }
 }
 
 customElements.define("bd-accordion-bg", BdAccordionBg);
-customElements.define("bd-accordion-bg-item", BdAccordionBgItem);
+customElements.define("bd-accordion-bg-item", BdAccordionBgItem);

package/src/components/accordion/accordion-bg.stories.js

@@ -1,4 +1,9 @@
 import { html } from "lit";
+import "../accordion/accordion.js";
+import "../divider/divider-horizontal.js";
+import "../list/list-item/list-item.js";
+import "../list/list.js";
+import "../paragraph/paragraph.js";
 import "./accordion-bg.js";
 
 export default {
@@ -16,9 +21,6 @@ Two Lit web components for building FAQ-style accordion sections with an optiona
   <bd-accordion-bg-item title="What is Bitdefender?">
     <p>Bitdefender is a global cybersecurity leader...</p>
   </bd-accordion-bg-item>
-  <bd-accordion-bg-item title="How do I renew my subscription?">
-    <p>Log in to Bitdefender Central and go to My Subscriptions...</p>
-  </bd-accordion-bg-item>
 </bd-accordion-bg>
 \`\`\`
 
@@ -43,6 +45,124 @@ Two Lit web components for building FAQ-style accordion sections with an optiona
 };
 
 
+// ─── Toate 3 variantele pe aceeasi pagina ─────────────────────────────────────
+
+export const AllVariants = {
+  name  : "FAQ + Terms of Use + System Requirements",
+  render: () => html`
+
+    <!-- FAQ -->
+    <div class="accordion faq block">
+      <bd-accordion-bg title="Questions? Answers." id="anchor-1-section">
+        <bd-accordion-bg-item title="How does Bitdefender Internet Security protect me?">
+          <bd-p kind="small">Bitdefender Internet Security provides the best protection through multiple layers of security:</bd-p>
+          <bd-list type="unordered" spacing="md" variant="default" orientation="vertical">
+            <bd-li kind="bullet" size="md"><bd-p kind="small">Advanced threat detection using artificial intelligence</bd-p></bd-li>
+            <bd-li kind="bullet" size="md"><bd-p kind="small">Real-time protection against viruses, malware, and ransomware</bd-p></bd-li>
+            <bd-li kind="bullet" size="md"><bd-p kind="small">Secure browsing with anti-phishing technology</bd-p></bd-li>
+            <bd-li kind="bullet" size="md"><bd-p kind="small">Firewall protection for network security</bd-p></bd-li>
+          </bd-list>
+          <bd-p kind="small">All these features work together to provide comprehensive protection for your devices.</bd-p>
+        </bd-accordion-bg-item>
+
+        <bd-accordion-bg-item title="Does Bitdefender protect me against ransomware?">
+          <bd-p kind="small">Yes! Bitdefender Internet Security offers unbeatable ransomware protection with:</bd-p>
+          <bd-list type="unordered" spacing="md" variant="default" orientation="vertical">
+            <bd-li kind="bullet" size="md"><bd-p kind="small">Multi-layer ransomware protection</bd-p></bd-li>
+            <bd-li kind="bullet" size="md"><bd-p kind="small">Behavioral detection to stop unknown threats</bd-p></bd-li>
+            <bd-li kind="bullet" size="md"><bd-p kind="small">Safe Files feature to protect your important documents</bd-p></bd-li>
+            <bd-li kind="bullet" size="md"><bd-p kind="small">Real-time monitoring of file encryption attempts</bd-p></bd-li>
+          </bd-list>
+        </bd-accordion-bg-item>
+
+        <bd-accordion-bg-item title="Do I get a VPN with Bitdefender Internet Security?">
+          <bd-p kind="small">Bitdefender Internet Security includes a basic VPN with 200MB per day. Additional features include:</bd-p>
+          <bd-list type="unordered" spacing="md" variant="default" orientation="vertical">
+            <bd-li kind="bullet" size="md"><bd-p kind="small">200MB daily VPN traffic for secure browsing</bd-p></bd-li>
+            <bd-li kind="bullet" size="md"><bd-p kind="small">Automatic activation on unsecured Wi-Fi networks</bd-p></bd-li>
+            <bd-li kind="bullet" size="md"><bd-p kind="small">Banking encryption for financial transactions</bd-p></bd-li>
+            <bd-li kind="bullet" size="md"><bd-p kind="small">Option to upgrade to unlimited VPN</bd-p></bd-li>
+          </bd-list>
+        </bd-accordion-bg-item>
+
+        <bd-accordion-bg-item title="What devices are supported?">
+          <bd-p kind="small">Bitdefender Internet Security supports a wide range of devices:</bd-p>
+          <bd-list type="unordered" spacing="md" variant="default" orientation="vertical">
+            <bd-li kind="bullet" size="md"><bd-p kind="small">Windows 10, 11 (32-bit and 64-bit)</bd-p></bd-li>
+            <bd-li kind="bullet" size="md"><bd-p kind="small">macOS 10.12 or later</bd-p></bd-li>
+            <bd-li kind="bullet" size="md"><bd-p kind="small">Android 5.0 or later</bd-p></bd-li>
+            <bd-li kind="bullet" size="md"><bd-p kind="small">iOS 12 or later</bd-p></bd-li>
+          </bd-list>
+        </bd-accordion-bg-item>
+
+        <bd-accordion-bg-item title="System requirements">
+          <bd-p kind="small">Minimum system requirements for optimal performance:</bd-p>
+          <bd-list type="unordered" spacing="md" variant="default" orientation="vertical">
+            <bd-li kind="bullet" size="md"><bd-p kind="small">1GB RAM minimum (2GB recommended)</bd-p></bd-li>
+            <bd-li kind="bullet" size="md"><bd-p kind="small">2.5GB available hard disk space</bd-p></bd-li>
+            <bd-li kind="bullet" size="md"><bd-p kind="small">Internet connection for activation and updates</bd-p></bd-li>
+            <bd-li kind="bullet" size="md"><bd-p kind="small">Intel Core 2 Duo processor or equivalent</bd-p></bd-li>
+          </bd-list>
+        </bd-accordion-bg-item>
+      </bd-accordion-bg>
+    </div>
+
+    <!-- Terms of Use -->
+    <div class="accordion terms-of-use block">
+      <bd-accordion-section title="Terms of use">
+        <bd-accordion-item title="Auto renewal terms" open>
+          <bd-p kind="small">Your subscription automatically begins at the purchase date;</bd-p>
+          <bd-p kind="small">By subscribing, you are purchasing a recurring subscription which will automatically renew;</bd-p>
+          <bd-p kind="small">The Bitdefender Auto Renewal Plan is designed to save you time, effort, and minimize your vulnerability risk by extending your subscription automatically before you run out of protection.</bd-p>
+        </bd-accordion-item>
+
+        <bd-accordion-item title="Here is what the Bitdefender Auto Renewal Plan means for you">
+          <bd-p kind="small"><a href="#">Here is what the Bitdefender Auto Renewal Plan means for you</a></bd-p>
+        </bd-accordion-item>
+
+        <bd-accordion-item title="Affirmative consent">
+          <bd-p kind="small"><a href="#">Affirmative consent</a></bd-p>
+        </bd-accordion-item>
+
+        <bd-accordion-item title="How to cancel + email address cancelation support">
+          <bd-p kind="small"><a href="#">How to cancel + email address cancelation support</a></bd-p>
+        </bd-accordion-item>
+      </bd-accordion-section>
+    </div>
+
+    <bd-divider-horizontal width="95%"></bd-divider-horizontal>
+
+    <!-- System Requirements -->
+    <div class="accordion system-requirements block">
+      <bd-accordion-section title="System Requirements" guide-icon="src/assets/user_guide.png" guide-label="User guide >" guide-href="#">
+        <bd-accordion-item title="Bitdefender Parental Control" open>
+          <bd-p kind="small">
+            <strong>Windows™ Operating Systems</strong><br />
+            Microsoft Windows 7 (all versions) with Service Pack 1 (SP 1) or later.
+          </bd-p>
+          <bd-p kind="small">
+            <strong>Mac® Operating Systems</strong><br />
+            macOS X Yosemite (10.10) or later
+          </bd-p>
+          <bd-p kind="small">
+            <strong>Android™ Operating Systems</strong><br />
+            Android 5.0 or later
+          </bd-p>
+          <bd-p kind="small">
+            <strong>iOS Operating Systems</strong><br />
+            Android 5.0 or later
+          </bd-p>
+        </bd-accordion-item>
+
+        <bd-accordion-item title="Bitdefender Central">
+          <bd-p kind="small">Bitdefender Central</bd-p>
+        </bd-accordion-item>
+      </bd-accordion-section>
+    </div>
+  `
+};
+
+
 // ─── Default ─────────────────────────────────────────────────────────────────
 
 export const Default = {

package/src/components/accordion/accordion.css.js

@@ -8,7 +8,7 @@ import { css } from "lit";
 export const accordionItem = css`
   :host {
     display: block;
-    margin-bottom: var(--bd-acc-item-margin-bottom, var(--spacing-8));
+    margin-bottom: var(--bd-acc-item-margin-bottom, var(--spacing-16));
     box-sizing: border-box;
     border-radius: var(--radius-sm);
   }
@@ -80,7 +80,7 @@ export const accordionItem = css`
       var(--typography-fontWeight-semibold)
     );
     line-height: var(--bd-acc-title-line-height, var(--typography-lineHeight-normal));
-    margin-bottom: var(--bd-acc-header-margin-bottom, var(--spacing-8));
+    margin-bottom: var(--bd-acc-header-margin-bottom, var(--spacing-16));
   }
 
   .header:focus-visible {
@@ -89,11 +89,11 @@ export const accordionItem = css`
   }
 
   .header[aria-expanded="true"] .title {
-    color: var(--bd-acc-title-color-expanded, var(--color-neutral-900));
+    color: var(--color-blue-500);
   }
 
   .header[aria-expanded="false"] .title {
-    color: var(--bd-acc-title-color-collapsed, var(--color-neutral-900));
+    color: var(--color-blue-500);
   }
 
   :host-context(bd-accordion-section[variant="small"])
@@ -175,7 +175,12 @@ export const accordionItem = css`
   .content[hidden] {
     display: none !important;
   }
-
+  ::slotted(bd-p) {
+    padding-bottom: var(--spacing-16);
+  }
+  ::slotted(bd-p:last-child) {
+    padding-bottom: 0px;
+  }
   ::slotted(p) {
     margin-top: 0;
     margin-bottom: var(--bd-acc-panel-paragraph-gap, var(--spacing-16));
@@ -192,11 +197,16 @@ export const accordionItem = css`
 `;
 
 export const accordionSection = css`
-  :host {
-    display: block;
+  // :host {
+  //   display: block;
+  //   background-color: var(--bd-acc-section-bg, var(--color-neutral-25));
+  //   padding: var(--bd-acc-section-padding, var(--spacing-32));
+  //   box-sizing: border-box;
+  // }
+  .bd-accordion-section-container {
     background-color: var(--bd-acc-section-bg, var(--color-neutral-25));
     padding: var(--bd-acc-section-padding, var(--spacing-32));
-    box-sizing: border-box;
+    border-radius: var(--bd-acc-section-radius, var(--radius-lg));
   }
 
   :host([variant="small"]) {
@@ -220,7 +230,7 @@ export const accordionSection = css`
     font-weight: var(--typography-fontWeight-bold);
     font-size: var(--typography-body-regular-fontSize);
     line-height: var(--typography-lineHeight-normal);
-    color: var(--color-neutral-900);
+    color: var(--color-neutral-1000);
   }
 
   :host([variant="small"]) .section-title {
@@ -229,19 +239,19 @@ export const accordionSection = css`
   }
 
   .user-guide-link {
-    margin-top: var(--spacing-16);
-    font-family: var(--typography-fontFamily-sans);
-    font-size: var(--typography-fontSize-xs);
+    margin-top: var(--spacing-32);
     color: var(--color-blue-600);
-    margin-left: var(--spacing-8);
   }
 
   .user-guide-link a {
     display: inline-flex;
     align-items: center;
     text-decoration: none;
-    color: inherit;
-    gap: var(--spacing-6);
+    color: var(--color-blue-500);
+    gap: var(--spacing-12);
+    font-family: Arial, Helvetica, sans-serif;
+    font-size: var(--typography-fontSize-xs);
+
   }
 
   .user-guide-link a:focus-visible {