@repobit/dex-system-design 0.23.33 → 0.23.34

package/CHANGELOG.md

@@ -3,6 +3,13 @@
 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

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@repobit/dex-system-design",
-  "version": "0.23.33",
+  "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.29",
-    "@repobit/dex-store-elements": "1.4.21",
+    "@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": "33f284d019667909f6437039a84f0301f485c95a"
+  "gitHead": "7d7e902dcbbb5deee029ea3e70d7cd27758b950e"
 }

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

@@ -9,6 +9,12 @@ 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;

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

@@ -9,15 +9,23 @@ import { accordionItem, accordionSection } from "./accordion.css.js";
 
 class BdAccordionBg extends LitElement {
   static properties = {
-    title   : { type: String },
-    noBg    : { type: Boolean, reflect: true, attribute: "no-bg" },
-    _variant: { state: true }
-  };
+    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._variant = "default";
+    this.noBg      = false;
+    this._variant  = "default";
+    this.variant   = "default";
+    this.guideIcon  = "";
+    this.guideLabel = "";
+    this.guideHref  = "#";
   }
 
   static styles = [tokens, accordionCSS, accordionSection];
@@ -27,28 +35,43 @@ class BdAccordionBg extends LitElement {
     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")
+      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");
   }
 
-  render() {
+  _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" : ""}${this._variant}">
+      <div class="bd-accordion-bg-container ${this.noBg ? "no-bg" : ""}">
         <div class="bd-accordion-bg-header">
           <bd-h as="h2" class="bd-accordion-bg-title">${this.title}</bd-h>
         </div>
@@ -56,6 +79,34 @@ class BdAccordionBg extends LitElement {
       </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 {
@@ -124,6 +175,7 @@ class BdAccordionBgItem extends LitElement {
     this.removeAttribute("data-bd-acc-focus");
   }
 
+  // Design bd-accordion — pentru terms-of-use si system-requirements
   _renderTerms() {
     return html`
       <button
@@ -148,6 +200,7 @@ class BdAccordionBgItem extends LitElement {
     `;
   }
 
+  // Design bd-accordion-bg — pentru faq (default)
   _renderDefault() {
     return html`
       <div class="bd-accordion-bg-item ${this.open ? "open" : ""} ${this.noBg ? "no-bg" : ""}">