@repobit/dex-system-design 0.18.0 → 0.19.0

package/CHANGELOG.md

@@ -3,6 +3,26 @@
 All notable changes to this project will be documented in this file.
 See [Conventional Commits](https://conventionalcommits.org) for commit guidelines.
 
+## [0.19.0](https://github.com/bitdefender/dex-core/compare/@repobit/dex-system-design@0.18.1...@repobit/dex-system-design@0.19.0) (2025-10-01)
+
+
+### Features
+
+* **DEX-1002:** footer structure modifications + new badges ([e07a521](https://github.com/bitdefender/dex-core/commit/e07a5210f8a43469f20e9afcf4218494154ff6b7))
+* **DEX-1002:** update components with SVG and delete FAQ folder, add new images ([c65c9ed](https://github.com/bitdefender/dex-core/commit/c65c9edfb9d9e3283a97d96113d1fb1be0e1e428))
+* **DEX-1002:** update footer structure and styles ([86470c6](https://github.com/bitdefender/dex-core/commit/86470c6d9a8db6a67326a1a1466957c34f17a05b))
+* **DEX-1002:** update tokens.js to be up to date with new tokens ([d7be8d1](https://github.com/bitdefender/dex-core/commit/d7be8d18cff4835f2eecb227cb8030c73ba36503))
+
+
+
+## [0.18.1](https://github.com/bitdefender/dex-core/compare/@repobit/dex-system-design@0.18.0...@repobit/dex-system-design@0.18.1) (2025-09-30)
+
+**Note:** Version bump only for package @repobit/dex-system-design
+
+
+
+
+
 ## [0.18.0](https://github.com/bitdefender/dex-core/compare/@repobit/dex-system-design@0.17.0...@repobit/dex-system-design@0.18.0) (2025-09-11)
 
 

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@repobit/dex-system-design",
-  "version": "0.18.0",
+  "version": "0.19.0",
   "description": "Design system based on Web Components.",
   "author": "Iordache Matei Cezar <miordache@bitdefender.com>",
   "homepage": "https://github.com/bitdefender/dex-core#readme",
@@ -16,17 +16,28 @@
     "LICENSE"
   ],
   "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",
     "./button": "./src/components/Button/Button.js",
     "./carousel": "./src/components/carousel/carousel.js",
     "./checkbox": "./src/components/checkbox/checkbox.js",
-    "./divider": "./src/components/divider/divider-horizontal.js",
-    "./faq": "./src/components/FAQ/faq.js",
+    "./divider-horizontal": "./src/components/divider/divider-horizontal.js",
+    "./divider-vertical": "./src/components/divider/divider-vertical.js",
+    "./dropdown": "./src/components/dropdown/dropdown.js",
+    "./footer": "./src/components/footer/footer.js",
+    "./footer-links-group": "./src/components/footer/footer-links-group.js",
+    "./footer-lp": "./src/components/footer/footer-lp.js",
+    "./footer-nav-menu": "./src/components/footer/footer-nav-menu.js",
+    "./grid": "./src/components/grid/grid.js",
     "./header": "./src/components/header/header.js",
     "./highlight": "./src/components/highlight/highlight.js",
     "./input": "./src/components/input/input.js",
+    "./link": "./src/components/link/link.js",
     "./light-carousel": "./src/components/light-carousel/light-carousel.js",
+    "./modal": "./src/components/modal/modal.js",
     "./paragraph": "./src/components/paragraph/paragraph.js",
     "./pricing-cards": "./src/components/pricing-cards/pricing-card.js",
     "./radio": "./src/components/radio/radio.js",
@@ -68,5 +79,5 @@
   "volta": {
     "node": "22.14.0"
   },
-  "gitHead": "c1703cc9842c8865680663be250e49206986f44e"
+  "gitHead": "8769f0cc5d87f5c07c143a76afe9a61c057b9621"
 }

package/src/components/anchor/anchor.stories.js

@@ -1,5 +1,5 @@
 import { html } from 'lit';
-import '../FAQ/faq.js';
+import '../accordion/accordion-bg.js';
 import '../anchor/anchor-nav.js';
 import '../carousel/carousel.js';
 import '../pricing-cards/pricing-card.js';
@@ -43,7 +43,7 @@ Folosește elemente \`<bd-anchor-nav-item>\` pentru fiecare link, ce trebuie să
 
 ### Alte componente utilizate
 
-- \`bd-faq-section\`, \`bd-faq-section-item\`  
+- \`bd-accordion-bg\`, \`bd-accordion-bg-item\`  
 - \`bd-tabs-component\`  
 - \`bd-carousel-section\`, \`bd-carousel-item\`  
 - \`bd-pricing-container\`
@@ -65,25 +65,25 @@ const Template = () => html`
   <bd-container>
     <section id="anchor-1-section" style="height: 800px;">
       <hr />
-      <bd-faq-section title="Questions? Answers." id="anchor-1-section">
-        <bd-faq-section-item title="How does Bitdefender Internet Security protect me?">
+      <bd-accordion-bg title="Questions? Answers." id="anchor-1-section">
+        <bd-accordion-bg-item title="How does Bitdefender Internet Security protect me?">
           <p>Bitdefender Internet Security provides the best protection...</p>
           <p>Bitdefender Internet Security provides the best protection...</p>
           <p>Bitdefender Internet Security provides the best protection...</p>
-        </bd-faq-section-item>
+        </bd-accordion-bg-item>
 
-        <bd-faq-section-item title="Does Bitdefender protect me against ransomware?">
+        <bd-accordion-bg-item title="Does Bitdefender protect me against ransomware?">
           <p>
             Yes! Bitdefender Internet Security offers unbeatable ransomware
             protection...
           </p>
-        </bd-faq-section-item>
+        </bd-accordion-bg-item>
 
-        <bd-faq-section-item title="Do I get a VPN with Bitdefender Internet Security?">
+        <bd-accordion-bg-item title="Do I get a VPN with Bitdefender Internet Security?">
           <p>
             Bitdefender Internet Security includes a basic VPN with 200MB per day.
           </p>
-        </bd-faq-section-item>
+        </bd-accordion-bg-item>
       </bd-faq-section>
     </section>
 

package/src/components/badge/badge.css.js

@@ -5,23 +5,70 @@ export default css`
     --badge-background-default: #026DFF;
     --badge-font-weight: 700;
     --badge-font-family: var(--typography-fontFamily-sans, sans-serif);
+    --badge-padding: 0 var(--spacing-12);
+    --badge-border-radius: var(--spacing-20);
+    --badge-font-size: var(--typography-label-extra-small-fontSize);
   }
 
   .badge {
     display: inline-block;
     background-color: var(--color-blue-500);
     color: var(--color-neutral-0);
-    border-radius: var(--spacing-20);
-    font-size: var(--typography-label-extra-small-fontSize);
+    border-radius: var(--badge-border-radius);
+    font-size: var(--badge-font-size);
     font-weight: var(--badge-font-weight);
     font-family: var(--badge-font-family);
     line-height: var(--spacing-20);
-    padding: 0 var(--spacing-12);
+    padding: var(--badge-padding);
     white-space: nowrap;
     user-select: none;
     vertical-align: middle;
     box-sizing: border-box;
     bottom: var(--spacing-4);
-    position: relative
+    position: relative;
+  }
+
+  /* Stil pentru badge-ul light-blue */
+  .badge.bd-light-blue {
+    background-color: var(--color-blue-500);
+    color: white;
+    padding: var(--spacing-4) var(--spacing-14);
+    border-radius: var(--spacing-14);
+    font-size: var(--spacing-16);
+    font-family: var(--typography-fontFamily-sans);
+    font-weight: var(--typography-fontWeight-semibold);
+  }
+
+  /* Stil pentru badge-ul light-green */
+  .badge.bd-light-green {
+    background-color: #c3f4d4;
+    color: #0b6a26;
+    padding: var(--spacing-4) var(--spacing-14);
+    border-radius: var(--spacing-14);
+    font-size: var(--spacing-16);
+    font-family: var(--typography-fontFamily-sans);
+    font-weight: var(--typography-fontWeight-semibold);
+  }
+
+  /* Stiluri pentru variantele light cu size */
+  .badge.bd-light-blue.sm,
+  .badge.bd-light-green.sm {
+    padding: var(--spacing-2) var(--spacing-10);
+    border-radius: var(--spacing-12);
+    font-size: var(--typography-label-extra-small-fontSize);
+  }
+
+  .badge.bd-light-blue.md,
+  .badge.bd-light-green.md {
+    padding: var(--spacing-4) var(--spacing-14);
+    border-radius: var(--spacing-14);
+    font-size: var(--typography-label-small-fontSize);
+  }
+
+  .badge.bd-light-blue.lg,
+  .badge.bd-light-green.lg {
+    padding: var(--spacing-6) var(--spacing-16);
+    border-radius: var(--spacing-16);
+    font-size: var(--typography-label-medium-fontSize);
   }
-`;
+`;

package/src/components/badge/badge.js

@@ -4,27 +4,80 @@ import badgeCSS from './badge.css.js';
 
 export class BdBadge extends LitElement {
   static properties = {
-    color: { type: String }
+    color   : { type: String },
+    variant : { type: String },
+    size    : { type: String },    // sm, md, lg
+    fontsize: { type: String } // 12, 14, 16
   };
 
-
-
   constructor() {
     super();
     this.text = 'Badge';
     this.color = '#026DFF';
+    this.variant = '';
+    this.size = 'md';      // Dimensiune implicită medium
+    this.fontsize = '14';  // Font size implicit 14px
   }
 
   updated(changed) {
     if (changed.has('color')) {
       this.style.setProperty('--badge-bg', this.color);
     }
+
+    if (changed.has('size') || changed.has('fontsize')) {
+      this._updateSizeStyles();
+    }
+  }
+
+  _updateSizeStyles() {
+    // Mapăm size la valori specifice
+    const sizeMap = {
+      'sm': {
+        padding     : 'var(--spacing-4) var(--spacing-8)',
+        borderRadius: 'var(--spacing-12)',
+        fontSize    : 'var(--typography-label-extra-small-fontSize)'
+      },
+      'md': {
+        padding     : 'var(--spacing-4) var(--spacing-12)',
+        borderRadius: 'var(--spacing-16)',
+        fontSize    : 'var(--typography-label-small-fontSize)'
+      },
+      'lg': {
+        padding     : 'var(--spacing-6) var(--spacing-16)',
+        borderRadius: 'var(--spacing-20)',
+        fontSize    : 'var(--typography-label-medium-fontSize)'
+      }
+    };
+
+    // Mapăm fontsize la valori specifice
+    const fontSizeMap = {
+      '12': 'var(--typography-label-extra-small-fontSize)',
+      '14': 'var(--typography-label-small-fontSize)',
+      '16': 'var(--typography-label-medium-fontSize)'
+    };
+
+    // Aplicăm stilurile în funcție de size
+    if (this.size && sizeMap[this.size]) {
+      const sizeStyle = sizeMap[this.size];
+      this.style.setProperty('--badge-padding', sizeStyle.padding);
+      this.style.setProperty('--badge-border-radius', sizeStyle.borderRadius);
+
+      // Doar dacă fontsize nu este setat explicit, folosim valoarea din size
+      if (!this.fontsize) {
+        this.style.setProperty('--badge-font-size', sizeStyle.fontSize);
+      }
+    }
+
+    // Aplicăm fontsize dacă este setat explicit
+    if (this.fontsize && fontSizeMap[this.fontsize]) {
+      this.style.setProperty('--badge-font-size', fontSizeMap[this.fontsize]);
+    }
   }
 
   render() {
-    return html`<span class="badge"><slot></slot></span>`;
+    return html`<span class="badge ${this.variant}"><slot></slot></span>`;
   }
 }
 BdBadge.styles = [tokens, badgeCSS];
 
-customElements.define('bd-badge', BdBadge);
+customElements.define('bd-badge', BdBadge);

package/src/components/badge/badge.stories.js

@@ -2,35 +2,203 @@ import { html } from 'lit';
 import './badge.js';
 
 export default {
-  title: 'Atoms/Badge',
+  title    : 'Atoms/Badge',
   component: 'bd-badge',
-  argTypes: {
+  argTypes : {
     children: {
-      control: 'text',
-      description: 'Conținutul afișat în interiorul badge-ului (prin slot).',
-      defaultValue: 'Badge',
+      control     : 'text',
+      description : 'Conținutul afișat în interiorul badge-ului (prin slot).',
+      defaultValue: 'Badge'
     },
     color: {
-      control: 'color',
-      description: 'Culoarea de fundal a badge-ului',
-      defaultValue: '#026DFF',
+      control     : 'color',
+      description : 'Culoarea de fundal a badge-ului',
+      defaultValue: '#026DFF'
     },
+    variant: {
+      control: {
+        type   : 'select',
+        options: ['', 'bd-light-blue', 'bd-light-green']
+      },
+      description : 'Variantă de stil pentru badge',
+      defaultValue: ''
+    },
+    size: {
+      control: {
+        type   : 'select',
+        options: ['sm', 'md', 'lg']
+      },
+      description : 'Dimensiunea badge-ului',
+      defaultValue: 'md'
+    },
+    fontsize: {
+      control: {
+        type   : 'select',
+        options: ['12', '14', '16']
+      },
+      description : 'Mărimea fontului',
+      defaultValue: '14'
+    }
   },
   parameters: {
     docs: {
       description: {
-        component: 'Un badge simplu care afișează un text prin slot și are o culoare de fundal configurabilă.',
-      },
-    },
-  },
+        component: 'Un badge simplu care afișează un text prin slot și are multiple opțiuni de personalizare.'
+      }
+    }
+  }
 };
 
-const Template = ({ children, color }) => html`
-  <bd-badge color="${color}">${children}</bd-badge>
+// Template principal
+const Template = ({ children, color, variant, size, fontsize }) => html`
+  <bd-badge 
+    color="${color}" 
+    variant="${variant}" 
+    size="${size}" 
+    fontsize="${fontsize}"
+  >
+    ${children}
+  </bd-badge>
+`;
+
+// Template pentru grid cu multiple badge-uri
+const GridTemplate = (items) => html`
+  <div style="display: grid; grid-template-columns: repeat(auto-fill, minmax(200px, 1fr)); gap: 16px;">
+    ${items}
+  </div>
+`;
+
+// Template pentru secțiune cu titlu
+const SectionTemplate = (title, items) => html`
+  <div style="margin-bottom: 32px;">
+    <h3 style="margin-bottom: 16px; color: #333;">${title}</h3>
+    ${GridTemplate(items)}
+  </div>
 `;
 
 export const Default = Template.bind({});
 Default.args = {
   children: 'Badge',
-  color: '#026DFF',
+  color   : '#026DFF',
+  variant : '',
+  size    : 'md',
+  fontsize: '14'
+};
+
+export const AllVariants = () => {
+  const variants = [
+    { variant: '', label: 'Default' },
+    { variant: 'bd-light-blue', label: 'Light Blue' },
+    { variant: 'bd-light-green', label: 'Light Green' }
+  ];
+
+  return SectionTemplate(
+    'Toate Variantele',
+    variants.map(item => html`
+      <bd-badge variant="${item.variant}">${item.label}</bd-badge>
+    `)
+  );
 };
+
+export const AllSizes = () => {
+  const sizes = [
+    { size: 'sm', label: 'Small' },
+    { size: 'md', label: 'Medium' },
+    { size: 'lg', label: 'Large' }
+  ];
+
+  return SectionTemplate(
+    'Toate Dimensiunile',
+    sizes.map(item => html`
+      <bd-badge size="${item.size}">${item.label}</bd-badge>
+    `)
+  );
+};
+
+export const AllFontSizes = () => {
+  const fontSizes = [
+    { fontsize: '12', label: 'Font 12' },
+    { fontsize: '14', label: 'Font 14' },
+    { fontsize: '16', label: 'Font 16' }
+  ];
+
+  return SectionTemplate(
+    'Toate Mărimile de Font',
+    fontSizes.map(item => html`
+      <bd-badge fontsize="${item.fontsize}">${item.label}</bd-badge>
+    `)
+  );
+};
+
+export const Combinations = () => {
+  const combinations = [
+    { variant: 'bd-light-blue', size: 'sm', label: 'Light Blue Small' },
+    { variant: 'bd-light-blue', size: 'md', label: 'Light Blue Medium' },
+    { variant: 'bd-light-blue', size: 'lg', label: 'Light Blue Large' },
+    { variant: 'bd-light-green', size: 'sm', label: 'Light Green Small' },
+    { variant: 'bd-light-green', size: 'md', label: 'Light Green Medium' },
+    { variant: 'bd-light-green', size: 'lg', label: 'Light Green Large' }
+  ];
+
+  return SectionTemplate(
+    'Combinații Variante și Dimensiuni',
+    combinations.map(item => html`
+      <bd-badge variant="${item.variant}" size="${item.size}">${item.label}</bd-badge>
+    `)
+  );
+};
+
+export const CustomColors = () => {
+  const colors = [
+    { color: '#FF5733', label: 'Rosu' },
+    { color: '#33FF57', label: 'Verde' },
+    { color: '#3357FF', label: 'Albastru' },
+    { color: '#F3FF33', label: 'Galben', textColor: '#000' },
+    { color: '#FF33F3', label: 'Roz' },
+    { color: '#33FFF3', label: 'Turcoaz' }
+  ];
+
+  return SectionTemplate(
+    'Culori Personalizate',
+    colors.map(item => html`
+      <bd-badge color="${item.color}">${item.label}</bd-badge>
+    `)
+  );
+};
+
+
+
+// Setări pentru fiecare story
+AllVariants.parameters = {
+  docs: {
+    description: {
+      story: 'Toate variantele de badge disponibile.'
+    }
+  }
+};
+
+AllSizes.parameters = {
+  docs: {
+    description: {
+      story: 'Toate dimensiunile de badge disponibile.'
+    }
+  }
+};
+
+AllFontSizes.parameters = {
+  docs: {
+    description: {
+      story: 'Toate mărimile de font disponibile pentru badge-uri.'
+    }
+  }
+};
+
+Combinations.parameters = {
+  docs: {
+    description: {
+      story: 'Diverse combinații între variante și dimensiuni.'
+    }
+  }
+};
+
+

package/src/components/carousel/carousel.css.js

@@ -72,42 +72,42 @@ export default css`
   }
 
   .bd-left-arrow {
-    content: url("/assets/left_normal.png");
+    content: url("/assets/left_normal.svg");
   }
 
   .bd-left-arrow:hover {
-    content: url("/assets/left_hover.png");
+    content: url("/assets/left_hover.svg");
   }
 
   .bd-left-arrow:active {
-    content: url("/assets/left_clicked.png");
+    content: url("/assets/left_clicked.svg");
   }
 
   .bd-left-arrow:disabled {
-    content: url("/assets/left_disabled.png");
+    content: url("/assets/left_disabled.svg");
   }
 
   .bd-right-arrow {
-    content: url("/assets/right_normal.png");
+    content: url("/assets/right_normal.svg");
   }
 
   .bd-right-arrow:hover {
-    content: url("/assets/right_hover.png");
+    content: url("/assets/right_hover.svg");
   }
 
   .bd-right-arrow:active {
-    content: url("/assets/right_clicked.png");
+    content: url("/assets/right_clicked.svg");
   }
 
   .bd-right-arrow:disabled {
-    content: url("/assets/right_disabled.png");
+    content: url("/assets/right_disabled.svg");
   }
   .bd-right-arrow.bd-disabled {
-    content: url("/assets/right_disabled.png");
+    content: url("/assets/right_disabled.svg");
     cursor: not-allowed;
   }
   .bd-left-arrow.bd-disabled {
-    content: url("/assets/left_disabled.png");
+    content: url("/assets/left_disabled.svg");
     cursor: not-allowed;
   }
   .bd-disabled {
@@ -234,7 +234,7 @@ export default css`
   }
 
   .bd-plus-button {
-    content: url("/assets/more_normal.png");
+    content: url("/assets/more_normal.svg");
     position: absolute;
     bottom: var(--spacing-10);
     right: var(--spacing-10);
@@ -250,7 +250,7 @@ export default css`
     cursor: pointer;
   }
   .bd-plus-button:hover {
-    content: url("/assets/more_hover.png");
+    content: url("/assets/more_hover.svg");
   }
 
   bd-carousel-item::part(content) {
@@ -258,7 +258,7 @@ export default css`
   }
 
   .bd-plus-button:active {
-    content: url("/assets/more_pressed.png");
+    content: url("/assets/more_pressed.svg");
   }
 
   .bd-left-arrow {

package/src/components/footer/footer-links-group.css.js

@@ -5,9 +5,7 @@ export default css`
     display: flex;
     flex-direction: column;
     gap: var(--spacing-12);
-    padding-top: var(--spacing-24);
-        padding-bottom: var(--spacing-24);
-
+    padding-right: var(--size-64);
   }
 
   h4 {
@@ -28,8 +26,6 @@ export default css`
     font-size: var(--typography-body-regular-fontSize);
     font-family: var(--typography-fontFamily-sans, 'IBM Plex Sans');
     font-weight: var(--typography-heading-h1-fontWeight);
-    margin-bottom: 1rem;
-    margin-top: 1rem;
     color: #ffffff; 
   }