@repobit/dex-system-design 0.20.0 → 0.21.0

package/CHANGELOG.md

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

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@repobit/dex-system-design",
-  "version": "0.20.0",
+  "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",
@@ -78,5 +78,5 @@
   "volta": {
     "node": "22.14.0"
   },
-  "gitHead": "a8089d8dbd8b06f741f5d710fbe98d70d1a56c7e"
+  "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,88 +2,78 @@ 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-icon {
     transition: transform 0.3s ease;
@@ -92,84 +82,112 @@ 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-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-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-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;
     opacity: 0;
-    padding: 0 15px;
+    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));
+
   }
 
+  .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-answer > div {
+    overflow: hidden;
+  }
 
-    .bd-accordion-bg-link-noline {
-      text-decoration: none;
-    }
+  .bd-accordion-bg-container {
+    width: 90%;
+    margin: auto;
+    padding-top: var(--spacing-64);
+    padding-bottom: var(--spacing-64);
+  }
 
-    .test-accordion {
-      background-color: blue;
-    }
+  .bd-accordion-bg-link-noline {
+    text-decoration: none;
+  }
 
-    .test-accordion p {
-      font-size: 20px;
-    }
+  .test-accordion {
+    background-color: blue;
   }
-.bd-accordion-bg-container.no-bg {
-  background: none;
-}
 
-.bd-accordion-bg-item.no-bg {
-  background-color: transparent;
-  border: none;
-}
+  .test-accordion p {
+    font-size: 20px;
+  }
 
-.bd-accordion-bg-item.no-bg .bd-accordion-bg-question {
-  background-color: transparent;
-}
+  .bd-accordion-bg-container.no-bg {
+    background: none;
+  }
 
-.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 {
+    background-color: transparent;
+    border: none;
+  }
 
-.bd-accordion-bg-item.no-bg:hover {
-  background-color: transparent;
-}
+  .bd-accordion-bg-item.no-bg .bd-accordion-bg-question {
+    background-color: transparent;
+  }
 
-.bd-accordion-bg-item.no-bg:hover .bd-accordion-bg-question-text {
-  text-decoration-line: none;
-}
+  .bd-accordion-bg-item.no-bg .bd-accordion-bg-answer {
+    background-color: transparent;
+    padding: 0 var(--spacing-40);
+  }
 
-.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;
+  /* 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;
+  }
 }
 
 `;