@repobit/dex-system-design 0.19.1 → 0.20.0

package/CHANGELOG.md

@@ -3,6 +3,37 @@
 All notable changes to this project will be documented in this file.
 See [Conventional Commits](https://conventionalcommits.org) for commit guidelines.
 
+## [0.20.0](https://github.com/bitdefender/dex-core/compare/@repobit/dex-system-design@0.19.2...@repobit/dex-system-design@0.20.0) (2025-10-08)
+
+
+### Features
+
+* **DEX-1001:** new version for tokens.css - previous was outdated ([97acf3a](https://github.com/bitdefender/dex-core/commit/97acf3a5002fdad340eaf73e7b79049073eb908e))
+
+
+### Bug Fixes
+
+* **DEX-1003:** footer adjustments on tablets and new card components created ([f8d5cf5](https://github.com/bitdefender/dex-core/commit/f8d5cf5af9dbcf81dbd7bf6e307ce9af202e2aa9))
+* **DEX-1003:** modified light carousel storybook due to images issue ([69224b1](https://github.com/bitdefender/dex-core/commit/69224b1c6eab9562e31b215ddc06039093e90b6b))
+* **DEX-1003:** modified svg icons into inline svg ([12eb99b](https://github.com/bitdefender/dex-core/commit/12eb99b6652e214798876c24fa186da2db675a8c))
+* **DEX-1003:** remove accordion-no-bg and merge with accordion-bg, add SVG inline icons ([cfbc2da](https://github.com/bitdefender/dex-core/commit/cfbc2da3a6879244d1e9d2db0c1da113e32e1ad3))
+* **DEX-1003:** remove accordion-no-bg, merge with accordion-bg, add inline SVG icons ([2f35df4](https://github.com/bitdefender/dex-core/commit/2f35df4389cb3a42bb5c739653b3b513c876a031))
+* **DEX-1003:** remove forgotten line from index.html ([57f203a](https://github.com/bitdefender/dex-core/commit/57f203a4cdbf2e8942663e08124d2950cd8149ea))
+* **DEX-1003:** svg icons modified into svg in line + card components ([fc536e2](https://github.com/bitdefender/dex-core/commit/fc536e2e62d24cd2354d3e5d420e4e17856cbf9a))
+* **DEX-1003:** token name updated to fix gap problems between quick links columns ([40a1375](https://github.com/bitdefender/dex-core/commit/40a1375172bec391a7144eb3e6045e65e064712d))
+* **DEX-1003:** update footer stories ([b55074d](https://github.com/bitdefender/dex-core/commit/b55074d801bf4ca99c39b33360783013d1257198))
+* **DEX-999:** new version for tokens (previous was outdated) ([d4d73fc](https://github.com/bitdefender/dex-core/commit/d4d73fcdafeff82c61a742711b11bd9c98d9636c))
+
+
+
+## [0.19.2](https://github.com/bitdefender/dex-core/compare/@repobit/dex-system-design@0.19.1...@repobit/dex-system-design@0.19.2) (2025-10-06)
+
+**Note:** Version bump only for package @repobit/dex-system-design
+
+
+
+
+
 ## [0.19.1](https://github.com/bitdefender/dex-core/compare/@repobit/dex-system-design@0.19.0...@repobit/dex-system-design@0.19.1) (2025-10-02)
 
 **Note:** Version bump only for package @repobit/dex-system-design

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@repobit/dex-system-design",
-  "version": "0.19.1",
+  "version": "0.20.0",
   "description": "Design system based on Web Components.",
   "author": "Iordache Matei Cezar <miordache@bitdefender.com>",
   "homepage": "https://github.com/bitdefender/dex-core#readme",
@@ -17,7 +17,6 @@
   ],
   "exports": {
     "./accordion-bg": "./src/components/accordion/accordion-bg.js",
-    "./accordion-no-bg": "./src/components/accordion/accordion-no-bg.js",
     "./accordion": "./src/components/accordion/accordion.js",
     "./anchor": "./src/components/anchor/anchor-nav.js",
     "./badge": "./src/components/badge/badge.js",
@@ -79,5 +78,5 @@
   "volta": {
     "node": "22.14.0"
   },
-  "gitHead": "dbf063ce6cbe70f63fee6dd325d5659886e5fe13"
+  "gitHead": "a8089d8dbd8b06f741f5d710fbe98d70d1a56c7e"
 }

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

@@ -1,78 +1,89 @@
 import { css } from "lit";
 
 export default css`
-  :host {
-    --background-card-grey: var(--color-neutral-25);
-    --border-card-grey: var(--color-neutral-50);
-    --border-card-green: var(--color-green-700);
-    --badge-background: var(--color-blue-500);
-    --text-color-white: var(--color-neutral-0);
-    --bd-accesibility-focus: var(--color-blue-500);
-    display: block;
-  }
+  @layer bd-components {
+    :host {
+      --background-card-grey: var(--color-neutral-25);
+      --border-card-grey: var(--color-neutral-50);
+      --border-card-green: var(--color-green-700);
+      --badge-background: var(--color-blue-500);
+      --text-color-white: var(--color-neutral-0);
+      --bd-accesibility-focus: var(--color-blue-500);
+      display: block;
+    }
 
-  .bd-accordion-bg-item {
-    margin-bottom: var(--spacing-16);
-    border-radius: var(--spacing-8);
-    background-color: var(--color-blue-50);
-    overflow: hidden;
-    transition: box-shadow 0.3s ease;
-  }
+    .bd-accordion-bg-item {
+      margin-bottom: var(--spacing-16);
+      border-radius: var(--spacing-8);
+      background-color: var(--color-blue-50);
+      overflow: hidden;
+      transition: box-shadow 0.3s ease;
+    }
 
-  .bd-accordion-bg-item:hover {
-    .bd-accordion-bg-question-text {
-      text-decoration-line: underline;
+    .bd-accordion-bg-item:hover {
+      .bd-accordion-bg-question-text {
+        text-decoration-line: underline;
+      }
     }
-  }
 
-  .bd-accordion-bg-question {
-    cursor: pointer;
-    display: flex;
-    justify-content: flex-start;
-    align-items: center;
-    gap: var(--spacing-10);
-    padding: var(--spacing-16);
-    font-weight: bold;
-    background-color: var(--color-blue-50);
-    color: #333;
-    transition: background-color 0.3s ease, color 0.3s ease;
-  }
+    .bd-accordion-bg-question {
+      cursor: pointer;
+      display: flex;
+      justify-content: flex-start;
+      align-items: center;
+      gap: var(--spacing-10);
+      padding: var(--spacing-16);
+      font-weight: bold;
+      background-color: var(--color-blue-50);
+      color: #333;
+      transition: background-color 0.3s ease, color 0.3s ease;
+    }
 
-  .bd-accordion-bg-header {
-    margin-bottom: var(--spacing-32);
-  }
+    .bd-accordion-bg-header {
+      margin-bottom: var(--spacing-32);
+    }
 
-  .bd-accordion-bg-question:hover {
-    color: #0073e6;
-  }
+    .bd-accordion-bg-question:hover {
+      color: #0073e6;
+    }
 
-  .bd-accordion-bg-item:focus-visible {
-    outline: var(--spacing-2) solid var(--bd-accesibility-focus);
-    outline-offset: var(--spacing-2);
-    border-radius: var(--space-2xs);
-  }
+    .bd-accordion-bg-item:focus-visible {
+      outline: var(--spacing-2) solid var(--bd-accesibility-focus);
+      outline-offset: var(--spacing-2);
+      border-radius: var(--space-2xs);
+    }
+
+    .bd-accordion-bg-item:focus {
+      .bd-accordion-bg-question-text {
+        font-weight: 600;
+        text-decoration-line: underline;
+        color: var(--color-blue-600);
+        text-decoration-thickness: var(--spacing-2);
+      }
+    }
 
-  .bd-accordion-bg-item:focus {
     .bd-accordion-bg-question-text {
-      font-weight: 600;
-      text-decoration-line: underline;
-      color: var(--color-blue-600);
-      text-decoration-thickness: var(--spacing-2);
+      font-family: var(--typography-fontFamily-sans);
+      font-weight: var(--typography-fontWeight-semibold);
     }
-  }
 
-  .bd-accordion-bg-question-text {
-    font-family: var(--typography-fontFamily-sans);
-    font-weight: var(--typography-fontWeight-semibold);
-  }
+    .bd-accordion-bg-title {
+      font-family: var(--typography-fontFamily-sans);
+      font-weight: var(--typography-fontWeight-semibold);
+      margin-left: auto;
+      margin-right: auto;
+      text-align: center;
+    }
 
-  .bd-accordion-bg-title {
-    font-family: var(--typography-fontFamily-sans);
-    font-weight: var(--typography-fontWeight-semibold);
-    margin-left: auto;
-    margin-right: auto;
-    text-align: center;
-  }
+    .bd-accordion-bg-icon {
+      transition: transform 0.3s ease;
+      width: var(--spacing-14);
+      height: var(--spacing-14);
+      color: var(--color-blue-500);
+      text-align: center;
+      position: relative;
+      bottom: 1px;
+    }
 
   .bd-accordion-bg-icon {
     transition: transform 0.3s ease;
@@ -81,9 +92,16 @@ export default css`
     color: var(--color-blue-500);
     text-align: center;
     position: relative;
-    bottom: 1px;
   }
 
+.bd-accordion-bg-item:not(.open) .bd-accordion-bg-icon {
+  content: url('data:image/svg+xml;utf8,<svg xmlns="http://www.w3.org/2000/svg" width="14" height="14"><rect x="6" width="2" height="14" fill="%23006DFF"/><rect x="14" y="6" width="2" height="14" transform="rotate(90 14 6)" fill="%23006DFF"/></svg>');
+}
+
+.bd-accordion-bg-item.open .bd-accordion-bg-icon {
+  content: url('data:image/svg+xml;utf8,<svg xmlns="http://www.w3.org/2000/svg" width="14" height="14"><rect x="14" y="6" width="2" height="14" transform="rotate(90 14 6)" fill="%23006DFF"/></svg>');
+}
+
   .bd-accordion-bg-answer {
     overflow: hidden;
     max-height: 0;
@@ -94,24 +112,64 @@ export default css`
     font-weight: var(--font-weight-sans-medium);
   }
 
-  .bd-accordion-bg-item.open .bd-accordion-bg-answer {
-    max-height: 1000px;
-    opacity: 1;
-    padding: var(--spacing-0) var(--spacing-40);
-  }
 
-  .bd-accordion-bg-answer > div {
-    overflow: hidden;
-  }
+    .bd-accordion-bg-answer > div {
+      overflow: hidden;
+    }
 
-  .bd-accordion-bg-container {
-    width: 90%;
-    margin: auto;
-    padding-top: var(--spacing-64);
-    padding-bottom: var(--spacing-64);
-  }
+    .bd-accordion-bg-container {
+      width: 90%;
+      margin: auto;
+      padding-top: var(--spacing-64);
+      padding-bottom: var(--spacing-64);
+    }
+
+    .bd-accordion-bg-link-noline {
+      text-decoration: none;
+    }
+
+    .test-accordion {
+      background-color: blue;
+    }
 
-  .bd-accordion-bg-link-noline {
-    text-decoration: none;
+    .test-accordion p {
+      font-size: 20px;
+    }
   }
+.bd-accordion-bg-container.no-bg {
+  background: none;
+}
+
+.bd-accordion-bg-item.no-bg {
+  background-color: transparent;
+  border: none;
+}
+
+.bd-accordion-bg-item.no-bg .bd-accordion-bg-question {
+  background-color: transparent;
+}
+
+.bd-accordion-bg-item.no-bg .bd-accordion-bg-answer {
+  background-color: transparent;
+  padding: var(--spacing-0) var(--spacing-40);
+}
+
+.bd-accordion-bg-item.no-bg:hover {
+  background-color: transparent;
+}
+
+.bd-accordion-bg-item.no-bg:hover .bd-accordion-bg-question-text {
+  text-decoration-line: none;
+}
+
+.bd-accordion-bg-item:hover .bd-accordion-bg-question-text {
+  text-decoration-line: none;
+}
+.bd-accordion-bg-item:focus .bd-accordion-bg-question-text {
+  text-decoration-line: none;
+}
+.bd-accordion-bg-item.no-bg:focus .bd-accordion-bg-question-text {
+  text-decoration-line: none;
+}
+
 `;

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

@@ -4,14 +4,20 @@ import accordionCSS from "./accordion-bg.css";
 
 class BdAccordionBg extends LitElement {
   static properties = {
-    title: { type: String }
+    title: { type: String },
+    noBg : { type: Boolean, attribute: 'no-bg' }
   };
 
+  constructor() {
+    super();
+    this.noBg = false;
+  }
+
   static styles = [tokens, accordionCSS];
 
   render() {
     return html`
-      <div class="bd-accordion-bg-container">
+      <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>
         </div>
@@ -24,13 +30,15 @@ class BdAccordionBg extends LitElement {
 class BdAccordionBgItem extends LitElement {
   static properties = {
     title: { type: String },
-    open : { type: Boolean, reflect: true }
+    open : { type: Boolean, reflect: true },
+    noBg : { type: Boolean, attribute: 'no-bg' }
   };
 
   constructor() {
     super();
     this.title = "";
     this.open = false;
+    this.noBg = false;
     this.id = `accordion-${Math.random().toString(36)
       .substr(2, 9)}`;
   }
@@ -48,10 +56,18 @@ class BdAccordionBgItem extends LitElement {
     }
   }
 
+  /**
+   * @param {Event} e
+   */
+  #onSlot(e) {
+    const slot = e.currentTarget;
+    slot.classList.add('accordion-test');
+  }
+
   render() {
     return html`
       <div
-        class="bd-accordion-bg-item ${this.open ? "open" : ""}"
+        class="bd-accordion-bg-item ${this.open ? "open" : ""} ${this.noBg ? 'no-bg' : ''}"
         role="button"
         aria-expanded="${this.open}"
         aria-controls="${this.id}"
@@ -60,7 +76,7 @@ class BdAccordionBgItem extends LitElement {
         @keydown=${this.handleKeyDown}
       >
         <div class="bd-accordion-bg-question">
-          <span class="bd-accordion-bg-icon">${this.open ? "−" : "+"}</span>
+          <div class="bd-accordion-bg-icon"></div>
           <span class="bd-accordion-bg-question-text">${this.title}</span>
         </div>
         <div
@@ -69,7 +85,7 @@ class BdAccordionBgItem extends LitElement {
           role="region"
           aria-labelledby="${this.id}"
         >
-          <slot></slot>
+          <slot @slotchange=${this.#onSlot}></slot>
         </div>
       </div>
     `;

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

@@ -0,0 +1,251 @@
+// accordion-bg.stories.js
+
+import { html } from 'lit';
+import './accordion-bg.js';
+
+export default {
+  title        : 'Components/Accordion BG',
+  component    : 'bd-accordion-bg',
+  subcomponents: { 'bd-accordion-bg-item': 'bd-accordion-bg-item' },
+  argTypes     : {
+    title: {
+      control    : 'text',
+      description: 'Title of the accordion section'
+    },
+    noBg: {
+      control    : 'boolean',
+      description: 'Remove background from accordion items'
+    }
+  },
+  parameters: {
+    docs: {
+      description: {
+        component: 'A customizable accordion component with background options and accessibility features.'
+      }
+    }
+  }
+};
+
+const Template = ({ title, noBg }) => html`
+  <bd-accordion-bg title="${title}" ?no-bg="${noBg}">
+    <bd-accordion-bg-item title="How does Bitdefender Internet Security protect me?" ?no-bg="${noBg}">
+      <p>Bitdefender Internet Security provides the best protection against all e-threats, combining antimalware, e-mail, and web protection with firewall and privacy features.</p>
+      <p>It uses advanced behavioral detection to close the window of zero-day vulnerability and keeps you safe from ransomware, spyware, and advanced persistent threats.</p>
+    </bd-accordion-bg-item>
+
+    <bd-accordion-bg-item title="Does Bitdefender protect me against ransomware?" ?no-bg="${noBg}">
+      <p>Yes! Bitdefender Internet Security offers unbeatable ransomware protection by safeguarding your most important files from encryption by ransomware.</p>
+      <p>Our multi-layer ransomware protection includes:</p>
+      <ul>
+        <li>Behavioral detection of ransomware</li>
+        <li>Safe Files feature to protect important folders</li>
+        <li>Real-time protection against encryption attempts</li>
+      </ul>
+    </bd-accordion-bg-item>
+
+    <bd-accordion-bg-item title="Do I get a VPN with Bitdefender Internet Security?" ?no-bg="${noBg}">
+      <p>Bitdefender Internet Security includes a basic VPN with 200MB per day to protect your privacy when browsing on public Wi-Fi networks.</p>
+      <p>For unlimited VPN traffic, you can upgrade to Bitdefender Premium VPN or Bitdefender Total Security which includes unlimited VPN.</p>
+    </bd-accordion-bg-item>
+
+    <bd-accordion-bg-item title="Can I use Bitdefender on multiple devices?" ?no-bg="${noBg}">
+      <p>Yes, depending on your subscription. Bitdefender offers multi-device plans that allow you to protect:</p>
+      <ul>
+        <li>Windows computers</li>
+        <li>Mac computers</li>
+        <li>Android devices</li>
+        <li>iOS devices</li>
+      </ul>
+    </bd-accordion-bg-item>
+
+    <bd-accordion-bg-item title="How often are virus definitions updated?" ?no-bg="${noBg}">
+      <p>Bitdefender updates its virus definitions multiple times per day to ensure you're protected against the latest threats.</p>
+      <p>Our cloud-based threat intelligence network processes over 500 million queries daily, providing real-time protection against emerging threats.</p>
+    </bd-accordion-bg-item>
+  </bd-accordion-bg>
+`;
+
+export const Default = Template.bind({});
+Default.args = {
+  title: 'Frequently Asked Questions',
+  noBg : false
+};
+Default.parameters = {
+  docs: {
+    description: {
+      story: 'Default accordion with background styling.'
+    }
+  }
+};
+
+export const NoBackground = Template.bind({});
+NoBackground.args = {
+  title: 'Frequently Asked Questions',
+  noBg : true
+};
+NoBackground.parameters = {
+  docs: {
+    description: {
+      story: 'Accordion without background styling for cleaner, minimalist design.'
+    }
+  }
+};
+
+export const MixedBackground = () => html`
+  <bd-accordion-bg title="Mixed Background Accordion">
+    <bd-accordion-bg-item title="Item with background">
+      <p>This item has the default background styling.</p>
+      <p>It uses the blue background color as defined in the CSS.</p>
+    </bd-accordion-bg-item>
+
+    <bd-accordion-bg-item title="Item without background" no-bg>
+      <p>This item has no background styling.</p>
+      <p>It appears transparent and integrates seamlessly with the page background.</p>
+    </bd-accordion-bg-item>
+
+    <bd-accordion-bg-item title="Another item with background">
+      <p>This item returns to the default background styling.</p>
+      <p>You can mix and match background styles within the same accordion.</p>
+    </bd-accordion-bg-item>
+  </bd-accordion-bg>
+`;
+MixedBackground.parameters = {
+  docs: {
+    description: {
+      story: 'Accordion with mixed background styles - some items with background, some without.'
+    }
+  }
+};
+
+export const ContainerNoBackground = () => html`
+  <bd-accordion-bg title="Container without Background" no-bg>
+    <bd-accordion-bg-item title="First question">
+      <p>When the container has no-bg, all items inherit the transparent background unless specifically overridden.</p>
+    </bd-accordion-bg-item>
+
+    <bd-accordion-bg-item title="Second question">
+      <p>All items in this accordion have transparent backgrounds because the container has no-bg set.</p>
+    </bd-accordion-bg-item>
+
+    <bd-accordion-bg-item title="Third question">
+      <p>This creates a clean, minimalist look that blends with the page background.</p>
+    </bd-accordion-bg-item>
+  </bd-accordion-bg>
+`;
+ContainerNoBackground.parameters = {
+  docs: {
+    description: {
+      story: 'Accordion container with no-bg attribute, making all items transparent by default.'
+    }
+  }
+};
+
+export const WithCustomContent = () => html`
+  <bd-accordion-bg title="Product Features">
+    <bd-accordion-bg-item title="Advanced Threat Defense">
+      <div>
+        <h4>Multi-layer Protection</h4>
+        <p>Our advanced threat defense uses multiple layers of protection:</p>
+        <ul>
+          <li>Behavioral detection</li>
+          <li>Machine learning algorithms</li>
+          <li>Cloud-based analysis</li>
+          <li>Real-time scanning</li>
+        </ul>
+        <p><strong>System Requirements:</strong> Windows 10/11, 2GB RAM, 2.5GB free space</p>
+      </div>
+    </bd-accordion-bg-item>
+
+    <bd-accordion-bg-item title="Privacy Protection" no-bg>
+      <div>
+        <h4>Complete Privacy Suite</h4>
+        <p>Protect your online privacy with our comprehensive tools:</p>
+        <div style="display: flex; gap: 20px; margin-top: 15px;">
+          <div>
+            <h5>VPN</h5>
+            <p>200MB/day included</p>
+          </div>
+          <div>
+            <h5>Password Manager</h5>
+            <p>Secure credential storage</p>
+          </div>
+          <div>
+            <h5>Webcam Protection</h5>
+            <p>Block unauthorized access</p>
+          </div>
+        </div>
+      </div>
+    </bd-accordion-bg-item>
+
+    <bd-accordion-bg-item title="Performance Impact">
+      <div>
+        <h4>Lightweight Design</h4>
+        <p>Bitdefender is designed to have minimal impact on system performance:</p>
+        <table style="width: 100%; border-collapse: collapse; margin-top: 10px;">
+          <tr>
+            <th style="text-align: left; padding: 8px; border-bottom: 1px solid #ccc;">Resource</th>
+            <th style="text-align: left; padding: 8px; border-bottom: 1px solid #ccc;">Usage</th>
+          </tr>
+          <tr>
+            <td style="padding: 8px; border-bottom: 1px solid #ccc;">CPU</td>
+            <td style="padding: 8px; border-bottom: 1px solid #ccc;">&lt; 2% average</td>
+          </tr>
+          <tr>
+            <td style="padding: 8px; border-bottom: 1px solid #ccc;">Memory</td>
+            <td style="padding: 8px; border-bottom: 1px solid #ccc;">~150MB</td>
+          </tr>
+          <tr>
+            <td style="padding: 8px;">Disk</td>
+            <td style="padding: 8px;">&lt; 500MB</td>
+          </tr>
+        </table>
+      </div>
+    </bd-accordion-bg-item>
+  </bd-accordion-bg>
+`;
+WithCustomContent.parameters = {
+  docs: {
+    description: {
+      story: 'Accordion with rich custom content including lists, tables, and formatted text.'
+    }
+  }
+};
+
+export const AccessibilityDemo = () => html`
+  <bd-accordion-bg title="Accessibility Features">
+    <bd-accordion-bg-item title="Keyboard Navigation">
+      <p>This accordion supports full keyboard navigation:</p>
+      <ul>
+        <li>Use <kbd>Tab</kbd> to navigate between accordion items</li>
+        <li>Press <kbd>Enter</kbd> or <kbd>Space</kbd> to toggle items</li>
+        <li>Proper ARIA attributes for screen readers</li>
+      </ul>
+    </bd-accordion-bg-item>
+
+    <bd-accordion-bg-item title="Screen Reader Support">
+      <p>All accordion items include proper ARIA attributes:</p>
+      <ul>
+        <li><code>role="button"</code> for the clickable header</li>
+        <li><code>aria-expanded</code> to indicate state</li>
+        <li><code>aria-controls</code> to associate with content</li>
+        <li><code>role="region"</code> for the content area</li>
+      </ul>
+    </bd-accordion-bg-item>
+
+    <bd-accordion-bg-item title="Focus Management">
+      <p>Focus indicators are clearly visible for keyboard users:</p>
+      <ul>
+        <li>Clear focus outline</li>
+        <li>High contrast colors</li>
+        <li>Smooth transitions</li>
+      </ul>
+    </bd-accordion-bg-item>
+  </bd-accordion-bg>
+`;
+AccessibilityDemo.parameters = {
+  docs: {
+    description: {
+      story: 'Demonstration of accessibility features including keyboard navigation and ARIA attributes.'
+    }
+  }
+};