@repobit/dex-system-design 0.21.2 → 0.22.0

package/CHANGELOG.md

@@ -3,6 +3,17 @@
 All notable changes to this project will be documented in this file.
 See [Conventional Commits](https://conventionalcommits.org) for commit guidelines.
 
+## [0.22.0](https://github.com/bitdefender/dex-core/compare/@repobit/dex-system-design@0.21.2...@repobit/dex-system-design@0.22.0) (2025-12-23)
+
+
+### Features
+
+* **DEX-1005:** button component and design system updates ([0cbe990](https://github.com/bitdefender/dex-core/commit/0cbe990bf1d7640b07b56d2c37e98a0cd29fef4c))
+* **DEX-1006:** modifications of data-layer-event prop ([0cff595](https://github.com/bitdefender/dex-core/commit/0cff595643870ed75d324fc7eba67afb46b1065d))
+* **DEX-1007:** changing header options for pricing section and title ([d08ad14](https://github.com/bitdefender/dex-core/commit/d08ad1403eb84e418f487d0736cc0614e4e09d64))
+
+
+
 ## [0.21.2](https://github.com/bitdefender/dex-core/compare/@repobit/dex-system-design@0.21.1...@repobit/dex-system-design@0.21.2) (2025-11-18)
 
 

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@repobit/dex-system-design",
-  "version": "0.21.2",
+  "version": "0.22.0",
   "description": "Design system based on Web Components.",
   "author": "Iordache Matei Cezar <miordache@bitdefender.com>",
   "homepage": "https://github.com/bitdefender/dex-core#readme",
@@ -66,6 +66,8 @@
     "url": "https://github.com/bitdefender/dex-core/issues"
   },
   "dependencies": {
+    "@repobit/dex-store": "*",
+    "@repobit/dex-store-elements": "*",
     "lit": "^3.2.1",
     "lit-query": "^0.0.1"
   },
@@ -83,5 +85,5 @@
   "volta": {
     "node": "22.14.0"
   },
-  "gitHead": "9eaded413b63ef26ea84fbfab95359397be9f140"
+  "gitHead": "4a851c1caab08b168d0e10960f28e8c1fff54c2e"
 }

package/src/components/Button/Button.js

@@ -112,7 +112,9 @@ class ButtonLink extends LitElement {
     fullWidth  : { type: Boolean },
     strong     : { type: Boolean },
     fontSize   : { type: String, attribute: "font-size" },
-    fontWeight : { type: String, attribute: "font-weight" }
+    fontWeight : { type: String, attribute: "font-weight" },
+    buyLink    : { type: Boolean },
+    shadow     : { type: Boolean, reflect: true }
   };
 
   constructor() {
@@ -125,6 +127,8 @@ class ButtonLink extends LitElement {
     this.strong = false;
     this.fontSize = "";
     this.fontWeight = "";
+    this.buyLink = false;
+    this.shadow = true;
   }
 
   get sizeClass() {
@@ -176,6 +180,8 @@ class ButtonLink extends LitElement {
           ${this.fontSize ? `font-size: ${this.fontSize};` : ""}
           ${this.fontWeight ? `font-weight: ${this.fontWeight};` : ""}
         "
+        ?data-store-render="${this.buyLink}"
+        ?data-store-buy-link="${this.buyLink}"
       >
         <slot>${this.label}</slot>
       </a>
@@ -185,7 +191,6 @@ class ButtonLink extends LitElement {
   _handleClick() {
     this.dispatchEvent(new Event("custom-click"));
   }
-
 }
 
 

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

@@ -174,4 +174,34 @@ a.button {
   .button.max--width {
     width: 100%;
   }
+
+.button,
+a.button {
+  display: inline-flex;
+  justify-content: center;
+  align-items: center;
+  text-align: center;
+  text-decoration: none;
+  // color: white;
+  // border: none;
+  cursor: pointer;
+  transition: background-color 0.3s ease, transform 0.2s ease,
+    box-shadow 0.2s ease;
+  gap: 10px;
+  vertical-align: middle;
+  line-height: 1;
+  box-sizing: border-box;
+}
+
+/* Pentru link-uri care sunt butoane */
+a.button {
+  text-decoration: none;
+}
+
+/* Asigură-te că slot-ul ocupă întreg spațiul */
+.button > ::slotted(*) {
+  display: inline-block;
+  width: 100%;
+  text-align: center;
+}
 `;