@repobit/dex-system-design 0.19.2 → 0.21.0

package/CHANGELOG.md

@@ -3,6 +3,38 @@
 All notable changes to this project will be documented in this file.
 See [Conventional Commits](https://conventionalcommits.org) for commit guidelines.
 
+## [0.21.0](https://github.com/bitdefender/dex-core/compare/@repobit/dex-system-design@0.20.0...@repobit/dex-system-design@0.21.0) (2025-11-05)
+
+
+### Features
+
+* **DEX-1004:** add bd-h, bd-p, bd-ul, bd-li components and update stories ([3aada6e](https://github.com/bitdefender/dex-core/commit/3aada6e25f74869d0915cb18dfcf512e11a76be1))
+
+
+
+## [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

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@repobit/dex-system-design",
-  "version": "0.19.2",
+  "version": "0.21.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": "4719cfeb84a6e363a78a33460197661f23aac5a5"
+  "gitHead": "a1e5bfebddd95d02a095d4992fd7c5cf60423865"
 }

package/src/components/Button/button.stories.js

@@ -1,24 +1,24 @@
-import "./Button.js";
 import { html } from "lit";
+import "./Button.js";
 
 export default {
-  title: "Atoms/Button",
+  title    : "Atoms/Button",
   component: "bd-button",
-  tags: ["autodocs"],
-  argTypes: {
+  tags     : ["autodocs"],
+  argTypes : {
     label: { control: "text" },
-    href: { control: "text" },
-    size: {
+    href : { control: "text" },
+    size : {
       control: { type: "select" },
-      options: ["sm", "md", "lg"],
+      options: ["sm", "md", "lg"]
     },
     kind: {
       control: { type: "select" },
-      options: ["primary", "secondary", "outline", "primary-outline", "danger"],
+      options: ["primary", "secondary", "outline", "primary-outline", "danger"]
     },
     fullWidth: { control: "boolean" },
-    strong: { control: "boolean" },
-  },
+    strong   : { control: "boolean" }
+  }
 };
 
 const Template = (args) => {
@@ -39,72 +39,72 @@ const Template = (args) => {
 
 export const Primary = Template.bind({});
 Primary.args = {
-  label: "Buy Now",
-  href: "#",
-  size: "md",
-  kind: "primary",
+  label    : "Buy Now",
+  href     : "#",
+  size     : "md",
+  kind     : "primary",
   fullWidth: false,
-  strong: false,
+  strong   : false
 };
 
 export const Secondary = Template.bind({});
 Secondary.args = {
-  label: "Learn More",
-  href: "#",
-  size: "md",
-  kind: "secondary",
+  label    : "Learn More",
+  href     : "#",
+  size     : "md",
+  kind     : "secondary",
   fullWidth: false,
-  strong: false,
+  strong   : false
 };
 
 export const Outline = Template.bind({});
 Outline.args = {
-  label: "See Details",
-  href: "#",
-  size: "md",
-  kind: "outline",
+  label    : "See Details",
+  href     : "#",
+  size     : "md",
+  kind     : "outline",
   fullWidth: false,
-  strong: false,
+  strong   : false
 };
 
 export const PrimaryOutline = Template.bind({});
 PrimaryOutline.args = {
-  label: "Subscribe",
-  href: "#",
-  size: "md",
-  kind: "primary-outline",
+  label    : "Subscribe",
+  href     : "#",
+  size     : "md",
+  kind     : "primary-outline",
   fullWidth: false,
-  strong: false,
+  strong   : false
 };
 
 export const Danger = Template.bind({});
 Danger.args = {
-  label: "Delete",
-  href: "#",
-  size: "md",
-  kind: "danger",
+  label    : "Delete",
+  href     : "#",
+  size     : "md",
+  kind     : "danger",
   fullWidth: false,
-  strong: true,
+  strong   : true
 };
 
 export const LargeFullWidthStrong = Template.bind({});
 LargeFullWidthStrong.args = {
-  label: "Get Started",
-  href: "#",
-  size: "lg",
-  kind: "primary",
+  label    : "Get Started",
+  href     : "#",
+  size     : "lg",
+  kind     : "primary",
   fullWidth: true,
-  strong: true,
+  strong   : true
 };
 
 export const SmallButton = Template.bind({});
 SmallButton.args = {
-  label: "Small Btn",
-  href: "#",
-  size: "sm",
-  kind: "secondary",
+  label    : "Small Btn",
+  href     : "#",
+  size     : "sm",
+  kind     : "secondary",
   fullWidth: false,
-  strong: false,
+  strong   : false
 };
 
 // Story pentru bd-button-link
@@ -121,12 +121,12 @@ export const ButtonLinkExample = (args) => html`
   </bd-button-link>
 `;
 ButtonLinkExample.args = {
-  label: "Go to Link",
-  href: "https://example.com",
-  size: "md",
-  kind: "primary",
+  label    : "Go to Link",
+  href     : "https://example.com",
+  size     : "md",
+  kind     : "primary",
   fullWidth: false,
-  strong: false,
+  strong   : false
 };
 
-;
+

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

@@ -2,126 +2,192 @@ import { css } from "lit";
 
 export default css`
   @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;
-    }
+  :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:hover {
-      .bd-accordion-bg-question-text {
-        text-decoration-line: underline;
-      }
-    }
+  .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-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-item:hover {
+    .bd-accordion-bg-question-text {
+      text-decoration-line: underline;
     }
+  }
 
-    .bd-accordion-bg-header {
-      margin-bottom: var(--spacing-32);
-    }
+  .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:hover {
-      color: #0073e6;
-    }
+  .bd-accordion-bg-header {
+    margin-bottom: var(--spacing-32);
+  }
 
-    .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-question:hover {
+    color: #0073e6;
+  }
 
-    .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-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-family: var(--typography-fontFamily-sans);
-      font-weight: var(--typography-fontWeight-semibold);
+      font-weight: 600;
+      text-decoration-line: underline;
+      color: var(--color-blue-600);
+      text-decoration-thickness: var(--spacing-2);
     }
+  }
 
-    .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-question-text {
+    font-family: var(--typography-fontFamily-sans);
+    font-weight: var(--typography-fontWeight-semibold);
+  }
 
-    .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-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-answer {
-      overflow: hidden;
-      max-height: 0;
-      opacity: 0;
-      padding: 0 15px;
-      background-color: var(--color-blue-50);
-      font-family: var(--typography-fontFamily-sans);
-      font-weight: var(--font-weight-sans-medium);
-    }
+  .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-item.open .bd-accordion-bg-answer {
-      max-height: 1000px;
-      opacity: 1;
-      padding: var(--spacing-0) var(--spacing-40);
-    }
+  .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;
+  }
 
-    .bd-accordion-bg-answer > div {
-      overflow: hidden;
-    }
+  .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-container {
-      width: 90%;
-      margin: auto;
-      padding-top: var(--spacing-64);
-      padding-bottom: var(--spacing-64);
-    }
+  .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-link-noline {
-      text-decoration: none;
-    }
+  .bd-accordion-bg-answer {
+    overflow: hidden;
+    max-height: 0;
+    opacity: 0;
+    padding: 0 var(--spacing-16);
+    background-color: var(--color-blue-50);
+    font-family: var(--typography-fontFamily-sans);
+    font-weight: var(--font-weight-sans-medium);
+    transition: none;
+    padding-left: calc(var(--spacing-14) + var(--spacing-10) + var(--spacing-16));
 
-    .test-accordion {
-      background-color: blue;
-    }
+  }
 
-    .test-accordion p {
-      font-size: 20px;
-    }
+  .bd-accordion-bg-item.open .bd-accordion-bg-answer {
+    max-height: 5000px;
+    opacity: 1;
+    padding: var(--spacing-16) var(--spacing-16);
+        padding-left: calc(var(--spacing-14) + var(--spacing-10) + var(--spacing-16));
+
+  }
+
+  .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-link-noline {
+    text-decoration: none;
+  }
+
+  .test-accordion {
+    background-color: blue;
+  }
+
+  .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: 0 var(--spacing-40);
+  }
+
+  /* REGULĂ NOUĂ PENTRU NO-BG DESCHIS */
+  .bd-accordion-bg-item.no-bg.open .bd-accordion-bg-answer {
+    padding: var(--spacing-16) 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)}`;
   }
@@ -59,7 +67,7 @@ class BdAccordionBgItem extends LitElement {
   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}"
@@ -68,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