@repobit/dex-system-design 0.22.12 → 0.23.1

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.23.1](https://github.com/bitdefender/dex-core/compare/@repobit/dex-system-design@0.23.0...@repobit/dex-system-design@0.23.1) (2026-03-18)
+
+**Note:** Version bump only for package @repobit/dex-system-design
+
+
+
+
+
+## [0.23.0](https://github.com/bitdefender/dex-core/compare/@repobit/dex-system-design@0.22.13...@repobit/dex-system-design@0.23.0) (2026-03-17)
+
+
+### Features
+
+* **DEX-24593:** exported compare component for sytem design ([548f708](https://github.com/bitdefender/dex-core/commit/548f7087b8cc7d04958e0e2661362e1b45ed1a88))
+
+
+
+## [0.22.13](https://github.com/bitdefender/dex-core/compare/@repobit/dex-system-design@0.22.12...@repobit/dex-system-design@0.22.13) (2026-03-16)
+
+
+### Bug Fixes
+
+* **DEX-1013:** added new awards component ([4a6d2ae](https://github.com/bitdefender/dex-core/commit/4a6d2ae6b0a9bc1dd88cdea0862aa3d9bb7f56ce))
+* **DEX-1013:** added SVG icons + compare component + updated storybook files for each ([28ce503](https://github.com/bitdefender/dex-core/commit/28ce50361cb9ddb4d697df7d8933abddfe854311))
+* **DEX-1013:** fix for awards component / image issue + storybook file ([0b5d6c1](https://github.com/bitdefender/dex-core/commit/0b5d6c1e26ed99834eaee4eb44dbf4ca72a19e79))
+* **DEX-1013:** fix for awards component: storybook and naming ([fdaf3e5](https://github.com/bitdefender/dex-core/commit/fdaf3e532ede76fde811bb50043d81617aa3d29b))
+* **DEX-1013:** fix for storybook file for awards component ([3aba0b5](https://github.com/bitdefender/dex-core/commit/3aba0b584be956f5947a16ab75c9ed2bffeac6f2))
+* **DEX-1013:** fix for structure of awards component ([a8ba87c](https://github.com/bitdefender/dex-core/commit/a8ba87c2ac021859ac33c9df21817904a92b4b09))
+* **DEX-1013:** update accordion background CSS ([03ad986](https://github.com/bitdefender/dex-core/commit/03ad986e2a7c98c02825d75b1db17742733c3587))
+
+
+
 ## [0.22.12](https://github.com/bitdefender/dex-core/compare/@repobit/dex-system-design@0.22.11...@repobit/dex-system-design@0.22.12) (2026-03-03)
 
 **Note:** Version bump only for package @repobit/dex-system-design

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@repobit/dex-system-design",
-  "version": "0.22.12",
+  "version": "0.23.1",
   "description": "Design system based on Web Components.",
   "author": "Iordache Matei Cezar <miordache@bitdefender.com>",
   "homepage": "https://github.com/bitdefender/dex-core#readme",
@@ -22,6 +22,7 @@
     "./badge": "./src/components/badge/badge.js",
     "./button": "./src/components/Button/Button.js",
     "./carousel": "./src/components/carousel/carousel.js",
+    "./compare": "./src/components/compare/compare.js",
     "./checkbox": "./src/components/checkbox/checkbox.js",
     "./divider-horizontal": "./src/components/divider/divider-horizontal.js",
     "./divider-vertical": "./src/components/divider/divider-vertical.js",
@@ -85,5 +86,5 @@
   "volta": {
     "node": "22.14.0"
   },
-  "gitHead": "aa11037fa9edc1d2644624233dadbc557adf416f"
+  "gitHead": "11a25b099b43170b147a7c7d744b478877f172dc"
 }

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

@@ -1,132 +1,304 @@
-import { html } from "lit";
-import "./Button.js";
+import { html } from 'lit';
+import './Button.js';
 
 export default {
-  title    : "Atoms/Button",
-  component: "bd-button",
-  tags     : ["autodocs"],
-  argTypes : {
-    label: { control: "text" },
-    href : { control: "text" },
-    size : {
-      control: { type: "select" },
-      options: ["sm", "md", "lg"]
+  title     : 'Components/Button',
+  tags      : ['autodocs'],
+  parameters: {
+    docs: {
+      description: {
+        component: `
+Three button components are available:
+
+- \`<bd-button>\` — a standard \`<button>\` element with click/keyboard events and active state
+- \`<bd-button-link>\` — an \`<a>\` tag styled as a button, supports buy link data attributes
+- \`<bd-contact-button>\` — a specialized contact CTA with an arrow icon
+
+### Usage
+\`\`\`html
+<bd-button kind="primary" size="md">Click me</bd-button>
+<bd-button-link kind="danger" size="lg" href="/buy">Buy now</bd-button-link>
+<bd-contact-button label="Contact us" href="/contact"></bd-contact-button>
+\`\`\`
+
+### Kind Values
+| Kind | Class |
+|---|---|
+| \`primary\` | \`button--primary\` |
+| \`primary-outline\` | \`button--primary--outline\` |
+| \`outline\` | \`button--outline\` |
+| \`secondary\` | \`button--secondary\` |
+| \`danger\` | \`button--danger\` |
+
+### Size Values
+| Size | Class |
+|---|---|
+| \`sm\` | \`button--small\` |
+| \`md\` | \`button--medium\` |
+| \`lg\` | \`button--large\` |
+
+### Events
+- \`custom-click\` — dispatched on click or Enter/Space keypress
+        `
+      }
+    }
+  },
+  argTypes: {
+    label: {
+      control    : 'text',
+      description: 'Accessible aria-label for the button',
+      table      : { type: { summary: 'string' }, defaultValue: { summary: 'Buy now' }, category: 'Content' }
     },
     kind: {
-      control: { type: "select" },
-      options: ["primary", "secondary", "outline", "primary-outline", "danger"]
+      control    : { type: 'select' },
+      options    : ['primary', 'primary-outline', 'outline', 'secondary', 'danger'],
+      description: 'Visual style variant of the button',
+      table      : { type: { summary: 'string' }, defaultValue: { summary: 'primary' }, category: 'Appearance' }
+    },
+    size: {
+      control    : { type: 'select' },
+      options    : ['sm', 'md', 'lg'],
+      description: 'Size of the button',
+      table      : { type: { summary: "'sm' | 'md' | 'lg'" }, defaultValue: { summary: 'md' }, category: 'Appearance' }
+    },
+    fullWidth: {
+      control    : 'boolean',
+      description: 'When true, button stretches to full container width',
+      table      : { type: { summary: 'boolean' }, defaultValue: { summary: 'false' }, category: 'Appearance' }
     },
-    fullWidth: { control: "boolean" },
-    strong   : { control: "boolean" }
+    strong: {
+      control    : 'boolean',
+      description: 'Applies bold font weight via `button--bold` class',
+      table      : { type: { summary: 'boolean' }, defaultValue: { summary: 'false' }, category: 'Appearance' }
+    },
+    fontSize: {
+      control    : 'text',
+      description: 'Inline font-size override (e.g. "18px")',
+      table      : { type: { summary: 'string' }, defaultValue: { summary: '' }, category: 'Typography' }
+    },
+    fontWeight: {
+      control    : 'text',
+      description: 'Inline font-weight override (e.g. "600")',
+      table      : { type: { summary: 'string' }, defaultValue: { summary: '' }, category: 'Typography' }
+    },
+    href: {
+      control    : 'text',
+      description: '(ButtonLink only) The anchor href URL',
+      table      : { type: { summary: 'string' }, defaultValue: { summary: '' }, category: 'ButtonLink' }
+    },
+    buyLink: {
+      control    : 'boolean',
+      description: '(ButtonLink only) Adds `data-store-render` and `data-store-buy-link` attributes',
+      table      : { type: { summary: 'boolean' }, defaultValue: { summary: 'false' }, category: 'ButtonLink' }
+    },
+    shadow: {
+      control    : 'boolean',
+      description: '(ButtonLink only) Reflects `shadow` attribute',
+      table      : { type: { summary: 'boolean' }, defaultValue: { summary: 'true' }, category: 'ButtonLink' }
+    }
   }
 };
 
-const Template = (args) => {
-  const { label, href, size, kind, fullWidth, strong } = args;
-  return html`
-    <bd-button 
-      label="${label}" 
-      href="${href}" 
-      size="${size}" 
-      kind="${kind}"
-      ?fullWidth="${fullWidth}"
-      ?strong="${strong}"
-    >
-      ${label}
+const defaultArgs = {
+  label     : 'Buy now', kind      : 'primary', size      : 'md',
+  fullWidth : false, strong    : false, fontSize  : '', fontWeight: ''
+};
+
+// ─── bd-button Stories ─────────────────────────────────────────────────────
+
+export const ButtonDefault = {
+  name      : 'Button — Default',
+  render    : () => html`<bd-button kind="primary" size="md">Buy now</bd-button>`,
+  parameters: { docs: { description: { story: 'Default primary medium button.' } } }
+};
+
+export const ButtonAllKinds = {
+  name  : 'Button — All Kinds',
+  render: () => html`
+    <div style="display:flex; gap:12px; flex-wrap:wrap; align-items:center;">
+      <bd-button kind="primary" size="md">Primary</bd-button>
+      <bd-button kind="primary-outline" size="md">Primary Outline</bd-button>
+      <bd-button kind="outline" size="md">Outline</bd-button>
+      <bd-button kind="secondary" size="md">Secondary</bd-button>
+      <bd-button kind="danger" size="md">Danger</bd-button>
+    </div>
+  `,
+  parameters: { docs: { description: { story: 'All five `kind` variants side by side.' } } }
+};
+
+export const ButtonAllSizes = {
+  name  : 'Button — All Sizes',
+  render: () => html`
+    <div style="display:flex; gap:12px; align-items:center; flex-wrap:wrap;">
+      <bd-button kind="primary" size="sm">Small</bd-button>
+      <bd-button kind="primary" size="md">Medium</bd-button>
+      <bd-button kind="primary" size="lg">Large</bd-button>
+    </div>
+  `,
+  parameters: { docs: { description: { story: 'All three size variants.' } } }
+};
+
+export const ButtonFullWidth = {
+  name  : 'Button — Full Width',
+  render: () => html`
+    <div style="width:400px;">
+      <bd-button kind="primary" size="md" .fullWidth="${true}">Full Width Button</bd-button>
+    </div>
+  `,
+  parameters: { docs: { description: { story: '`fullWidth` set to true — applies `max--width` class.' } } }
+};
+
+export const ButtonStrong = {
+  name  : 'Button — Strong (Bold)',
+  render: () => html`
+    <div style="display:flex; gap:12px;">
+      <bd-button kind="primary" size="md">Normal</bd-button>
+      <bd-button kind="primary" size="md" .strong="${true}">Strong</bd-button>
+    </div>
+  `,
+  parameters: { docs: { description: { story: 'Comparison between normal and `strong` (bold) button.' } } }
+};
+
+export const ButtonCustomTypography = {
+  name  : 'Button — Custom Font Size & Weight',
+  render: () => html`
+    <bd-button kind="danger" size="md" font-size="20px" font-weight="800">
+      Buy now
     </bd-button>
-  `;
-};
-
-export const Primary = Template.bind({});
-Primary.args = {
-  label    : "Buy Now",
-  href     : "#",
-  size     : "md",
-  kind     : "primary",
-  fullWidth: false,
-  strong   : false
-};
-
-export const Secondary = Template.bind({});
-Secondary.args = {
-  label    : "Learn More",
-  href     : "#",
-  size     : "md",
-  kind     : "secondary",
-  fullWidth: false,
-  strong   : false
-};
-
-export const Outline = Template.bind({});
-Outline.args = {
-  label    : "See Details",
-  href     : "#",
-  size     : "md",
-  kind     : "outline",
-  fullWidth: false,
-  strong   : false
-};
-
-export const PrimaryOutline = Template.bind({});
-PrimaryOutline.args = {
-  label    : "Subscribe",
-  href     : "#",
-  size     : "md",
-  kind     : "primary-outline",
-  fullWidth: false,
-  strong   : false
-};
-
-export const Danger = Template.bind({});
-Danger.args = {
-  label    : "Delete",
-  href     : "#",
-  size     : "md",
-  kind     : "danger",
-  fullWidth: false,
-  strong   : true
-};
-
-export const LargeFullWidthStrong = Template.bind({});
-LargeFullWidthStrong.args = {
-  label    : "Get Started",
-  href     : "#",
-  size     : "lg",
-  kind     : "primary",
-  fullWidth: true,
-  strong   : true
-};
-
-export const SmallButton = Template.bind({});
-SmallButton.args = {
-  label    : "Small Btn",
-  href     : "#",
-  size     : "sm",
-  kind     : "secondary",
-  fullWidth: false,
-  strong   : false
-};
-
-// Story pentru bd-button-link
-export const ButtonLinkExample = (args) => html`
-  <bd-button-link
-    label="${args.label}"
-    href="${args.href}"
-    size="${args.size}"
-    kind="${args.kind}"
-    ?fullWidth="${args.fullWidth}"
-    ?strong="${args.strong}"
-  >
-    ${args.label}
-  </bd-button-link>
-`;
-ButtonLinkExample.args = {
-  label    : "Go to Link",
-  href     : "https://example.com",
-  size     : "md",
-  kind     : "primary",
-  fullWidth: false,
-  strong   : false
+  `,
+  parameters: { docs: { description: { story: 'Custom `font-size` and `font-weight` applied via inline styles.' } } }
 };
 
+export const ButtonKeyboard = {
+  name  : 'Button — Keyboard Accessible',
+  render: () => html`
+    <p style="font-size:14px; margin-bottom:8px;">Tab to focus, press Enter or Space to trigger.</p>
+    <bd-button kind="primary" size="md" label="Keyboard test">Press me</bd-button>
+  `,
+  parameters: { docs: { description: { story: 'Demonstrates keyboard activation. Enter/Space trigger `custom-click` and toggle the `active` class briefly.' } } }
+};
+
+// ─── bd-button-link Stories ────────────────────────────────────────────────
+
+export const ButtonLinkDefault = {
+  name  : 'ButtonLink — Default',
+  render: () => html`
+    <bd-button-link kind="primary" size="md" href="/buy">Buy now</bd-button-link>
+  `,
+  parameters: { docs: { description: { story: 'Default `bd-button-link` rendered as an `<a>` tag.' } } }
+};
+
+export const ButtonLinkAllKinds = {
+  name  : 'ButtonLink — All Kinds',
+  render: () => html`
+    <div style="display:flex; gap:12px; flex-wrap:wrap; align-items:center;">
+      <bd-button-link kind="primary" size="md" href="#">Primary</bd-button-link>
+      <bd-button-link kind="primary-outline" size="md" href="#">Primary Outline</bd-button-link>
+      <bd-button-link kind="outline" size="md" href="#">Outline</bd-button-link>
+      <bd-button-link kind="secondary" size="md" href="#">Secondary</bd-button-link>
+      <bd-button-link kind="danger" size="md" href="#">Danger</bd-button-link>
+    </div>
+  `,
+  parameters: { docs: { description: { story: 'All `kind` variants for `bd-button-link`.' } } }
+};
+
+export const ButtonLinkAllSizes = {
+  name  : 'ButtonLink — All Sizes',
+  render: () => html`
+    <div style="display:flex; gap:12px; align-items:center; flex-wrap:wrap;">
+      <bd-button-link kind="danger" size="sm" href="#">Small</bd-button-link>
+      <bd-button-link kind="danger" size="md" href="#">Medium</bd-button-link>
+      <bd-button-link kind="danger" size="lg" href="#">Large</bd-button-link>
+    </div>
+  `,
+  parameters: { docs: { description: { story: 'All three sizes for `bd-button-link`.' } } }
+};
+
+export const ButtonLinkBuyLink = {
+  name  : 'ButtonLink — Buy Link Mode',
+  render: () => html`
+    <bd-button-link kind="danger" size="md" href="/buy" .buyLink="${true}">
+      Buy now
+    </bd-button-link>
+  `,
+  parameters: { docs: { description: { story: '`buyLink` set to true — adds `data-store-render` and `data-store-buy-link` boolean attributes for store integration.' } } }
+};
+
+export const ButtonLinkFullWidth = {
+  name  : 'ButtonLink — Full Width',
+  render: () => html`
+    <div style="width:400px;">
+      <bd-button-link kind="primary" size="md" href="#" .fullWidth="${true}">
+        Full Width Link Button
+      </bd-button-link>
+    </div>
+  `,
+  parameters: { docs: { description: { story: 'Full-width `bd-button-link`.' } } }
+};
+
+export const ButtonLinkCustomTypography = {
+  name  : 'ButtonLink — Custom Typography',
+  render: () => html`
+    <bd-button-link kind="danger" size="md" href="#" font-size="18px" font-weight="600">
+      Buy now
+    </bd-button-link>
+  `,
+  parameters: { docs: { description: { story: 'Inline `font-size` and `font-weight` applied to the anchor element.' } } }
+};
+
+// ─── bd-contact-button Stories ─────────────────────────────────────────────
+
+export const ContactButtonDefault = {
+  name  : 'ContactButton — Default',
+  render: () => html`
+    <bd-contact-button label="Contact us" href="https://bitdefender.com/contact"></bd-contact-button>
+  `,
+  parameters: { docs: { description: { story: 'Default contact button with arrow icon.' } } }
+};
+
+export const ContactButtonCustomLabel = {
+  name  : 'ContactButton — Custom Label',
+  render: () => html`
+    <bd-contact-button label="Get in touch" href="/support"></bd-contact-button>
+  `,
+  parameters: { docs: { description: { story: 'Custom label text on the contact button.' } } }
+};
+
+export const ContactButtonCustomHref = {
+  name  : 'ContactButton — External Link',
+  render: () => html`
+    <bd-contact-button label="Visit our support page" href="https://support.bitdefender.com"></bd-contact-button>
+  `,
+  parameters: { docs: { description: { story: 'Contact button linking to an external support URL.' } } }
+};
+
+// ─── Combined Story ────────────────────────────────────────────────────────
+
+export const AllButtonTypes = {
+  name  : 'All Button Types',
+  render: () => html`
+    <div style="display:flex; gap:16px; flex-wrap:wrap; align-items:center;">
+      <bd-button kind="primary" size="md">bd-button</bd-button>
+      <bd-button-link kind="danger" size="md" href="#">bd-button-link</bd-button-link>
+      <bd-contact-button label="bd-contact-button" href="#"></bd-contact-button>
+    </div>
+  `,
+  parameters: { docs: { description: { story: 'All three button component types rendered side by side.' } } }
+};
 
+export const Playground = {
+  name  : '🛝 Playground',
+  args  : { ...defaultArgs },
+  render: (args) => html`
+    <bd-button
+      kind="${args.kind}"
+      size="${args.size}"
+      label="${args.label}"
+      ?full-width="${args.fullWidth}"
+      ?strong="${args.strong}"
+      font-size="${args.fontSize}"
+      font-weight="${args.fontWeight}"
+    >${args.label}</bd-button>
+  `,
+  parameters: { docs: { description: { story: 'Interactive playground for `bd-button`. Use Controls to adjust all props.' } } }
+};

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

@@ -114,11 +114,16 @@ export default css`
     padding-left: calc(var(--spacing-14) + var(--spacing-10) + var(--spacing-16));
 
   }
-
+.bd-accordion-bg-answer {
+  display: none;
+}
+.bd-accordion-bg-item.open .bd-accordion-bg-answer {
+  display: block;
+}
   .bd-accordion-bg-item.open .bd-accordion-bg-answer {
     max-height: 5000px;
     opacity: 1;
-    padding: var(--spacing-16) var(--spacing-16);
+    padding-bottom: var(--spacing-16);
         padding-left: calc(var(--spacing-14) + var(--spacing-10) + var(--spacing-16));
 
   }