@repobit/dex-system-design 0.4.0 → 0.6.0

package/CHANGELOG.md

@@ -3,6 +3,24 @@
 All notable changes to this project will be documented in this file.
 See [Conventional Commits](https://conventionalcommits.org) for commit guidelines.
 
+## [0.6.0](https://github.com/bitdefender/dex-core/compare/@repobit/dex-system-design@0.5.0...@repobit/dex-system-design@0.6.0) (2025-06-25)
+
+
+### Features
+
+* **DEX-23636:** replace old repo with new repo ([6145843](https://github.com/bitdefender/dex-core/commit/614584397988a7542f195055330518e904715707))
+
+
+
+## [0.5.0](https://github.com/bitdefender/dex-core/compare/@repobit/dex-system-design@0.4.0...@repobit/dex-system-design@0.5.0) (2025-06-24)
+
+
+### Features
+
+* **DEX-23636:** refactor button styles to use design tokens for consistency ([411c6bb](https://github.com/bitdefender/dex-core/commit/411c6bbc8d3fa63eb16d7059711929e8cca09f07))
+
+
+
 ## [0.4.0](https://github.com/bitdefender/dex-core/compare/@repobit/dex-system-design@0.3.0...@repobit/dex-system-design@0.4.0) (2025-06-24)
 
 

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@repobit/dex-system-design",
-  "version": "0.4.0",
+  "version": "0.6.0",
   "description": "Design system based on Web Components.",
   "author": "Iordache Matei Cezar <miordache@bitdefender.com>",
   "homepage": "https://github.com/bitdefender/dex-core#readme",
@@ -16,7 +16,8 @@
     "LICENSE"
   ],
   "exports": {
-    "./button": "./src/components/Button/Button.js"
+    "./button": "./src/components/Button/Button.js",
+    "./header": "./src/components/header/header.js"
   },
   "publishConfig": {
     "access": "public"
@@ -53,5 +54,5 @@
   "volta": {
     "node": "22.14.0"
   },
-  "gitHead": "559c6e41e87f1ef0e37ea9a9bca9cc4781d67602"
+  "gitHead": "70accd8e5e61d8344dd833fe6d5f343f973e2ce8"
 }

package/src/components/Button/Button.js

@@ -1,4 +1,4 @@
-import { LitElement, html, css } from "lit";
+import { LitElement, html } from "lit";
 import "./icons.js";
 import buttonsCSS from "./button.css.js";
 
@@ -11,6 +11,106 @@ class Button extends LitElement {
     kind: { type: String },
     fullWidth: { type: Boolean },
     strong: { type: Boolean },
+    fontSize: { type: String, attribute: "font-size" },
+    fontWeight: { type: String, attribute: "font-weight" },
+  };
+
+  constructor() {
+    super();
+    this.label = "Buy now";
+    this.href = "";
+    this.size = "md";
+    this.fontSize = "";
+    this.fontWeight = "";
+    this.isActive = false;
+  }
+
+  _handleKeyDown(event) {
+    if (event.key === "Enter" || event.key === " ") {
+      this.isActive = true;
+      this.requestUpdate();
+    }
+  }
+
+  _handleKeyUp(event) {
+    if (event.key === "Enter" || event.key === " ") {
+      this.isActive = false;
+      this.requestUpdate();
+      this._handleClick();
+    }
+  }
+
+  _handleClick() {
+    this.dispatchEvent(new Event("custom-click"));
+  }
+
+  get sizeClass() {
+    switch (this.size) {
+      case "lg":
+        return "button--large";
+      case "md":
+        return "button--medium";
+      case "sm":
+        return "button--small";
+      default:
+        return "";
+    }
+  }
+
+  get kindClass() {
+    switch (this.kind) {
+      case "primary-outline":
+        return "button--primary--outline";
+      case "outline":
+        return "button--outline";
+      case "secondary":
+        return "button--secondary";
+      case "primary":
+        return "button--primary";
+      case "danger":
+        return "button--danger";
+      default:
+        return "";
+    }
+  }
+
+  get fullWidthClass() {
+    return this.fullWidth ? "max--width" : "";
+  }
+
+  get strongClass() {
+    return this.strong ? "button--bold" : "";
+  }
+
+  render() {
+    return html`
+      <button
+        @click=${this._handleClick}
+        @keydown=${this._handleKeyDown}
+        @keyup=${this._handleKeyUp}
+        class="button ${this.kindClass} ${this.sizeClass} ${this.fullWidthClass} ${this.strongClass} ${this.isActive ? 'active' : ''}"
+        aria-label="${this.label}"
+        style="
+          ${this.fontSize ? `font-size: ${this.fontSize};` : ""}
+          ${this.fontWeight ? `font-weight: ${this.fontWeight};` : ""}
+        "
+      >
+        <slot></slot>
+      </button>
+    `;
+  }
+}
+class ButtonLink extends LitElement {
+  static properties = {
+    label: { type: String },
+    href: { type: String },
+    size: { type: String },
+    customClass: { type: String },
+    kind: { type: String },
+    fullWidth: { type: Boolean },
+    strong: { type: Boolean },
+    fontSize: { type: String, attribute: "font-size" },
+    fontWeight: { type: String, attribute: "font-weight" },
   };
 
   /** @private -> for private properties we are using "_text" */
@@ -20,6 +120,8 @@ class Button extends LitElement {
     this.label = "Buy now";
     this.href = "";
     this.size = "md";
+    this.fontSize = "";
+    this.fontWeight = "";
   }
 
   get sizeClass() {
@@ -67,6 +169,10 @@ class Button extends LitElement {
           class="button ${this.kindClass} ${this.sizeClass} ${this
             .fullWidthClass} ${this.strongClass}"
           aria-label="${this.label}"
+          style="
+    ${this.fontSize ? `font-size: ${this.fontSize};` : ""}
+    ${this.fontWeight ? `font-weight: ${this.fontWeight};` : ""}
+  "
         >
           <slot></slot>
         </button>
@@ -75,11 +181,9 @@ class Button extends LitElement {
   }
 
   _handleClick() {
-    console.log("Button clicked!");
     this.dispatchEvent(new Event("custom-click"));
   }
 }
-
 class ContactButton extends LitElement {
   static properties = {
     label: { type: String },
@@ -99,6 +203,10 @@ class ContactButton extends LitElement {
           class="bd-contact-btn"
           @click=${this._handleClick}
           aria-label="${this.label}"
+           style="
+    ${this.fontSize ? `font-size: ${this.fontSize};` : ""}
+    ${this.fontWeight ? `font-weight: ${this.fontWeight};` : ""}
+  "
         >
           ${this.label}
           <arrow-icon></arrow-icon>
@@ -114,7 +222,11 @@ class ContactButton extends LitElement {
 }
 
 Button.styles = [buttonsCSS];
+ButtonLink.styles = [buttonsCSS];
+
 ContactButton.styles = [buttonsCSS];
 
 customElements.define("bd-button", Button);
+customElements.define("bd-button-link", ButtonLink);
+
 customElements.define("bd-contact-button", ContactButton);

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

@@ -1,4 +1,4 @@
-import { css } from 'lit';
+import { css } from "lit";
 
 export default css`
   :host {
@@ -25,10 +25,34 @@ export default css`
     --button-background-primary-outline-hover: var(--color-blue-50);
     --border-button-background-primary-outline-hover: var(--color-blue-500);
     --button-background-primary-outline-focus: var(--color-blue-500);
+    --bd-accesibility-focus: var(--color-blue-500);
+  }
+
+  button:focus,
+  button:focus-visible {
+    outline: none;
+    box-shadow: none;
+  }
+
+  button:focus-visible {
+    outline: var(--size-2) solid var(--bd-accesibility-focus);
+    outline-offset: var(--size-2);
+  }
+  .href-button:focus,
+  .href-button:focus-visible {
+    outline: none;
+  }
+
+  .href-button:focus-visible button {
+    outline: var(--size-2) solid var(--bd-accesibility-focus);
+    outline-offset: var(--size-2);
   }
 
   .href-button {
     text-decoration: none;
+    display: inline-flex;
+    vertical-align: middle;
+    width: 100%;
   }
   .button {
     color: white;
@@ -37,6 +61,9 @@ export default css`
     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;
   }
 
   .button--primary {
@@ -48,7 +75,7 @@ export default css`
     background-color: var(--button-background-primary-hover);
   }
 
-  .button--primary:focus {
+  .button--primary:active {
     background-color: var(--button-background-primary-focus);
   }
 
@@ -61,7 +88,7 @@ export default css`
     background-color: var(--button-background-secondary-hover);
   }
 
-  .button--secondary:focus {
+  .button--secondary:active {
     background-color: var(--button-background-secondary-focus);
   }
 
@@ -73,11 +100,12 @@ export default css`
   .button--danger:hover {
     background-color: var(--button-background-danger-hover);
   }
-
-  .button--danger:focus {
-    background-color: var(--button-background-danger-focus);
-  }
-
+ 
+.button--danger.active,
+.button--danger:active {
+  background-color: var(--button-background-danger-focus);
+}
+   
   .button--outline {
     background-color: transparent;
     border: 2px solid var(--border-button-background-outline);
@@ -87,7 +115,7 @@ export default css`
     background-color: var(--button-background-outline-hover);
     border: 2px solid var(--border-button-background-outline-hover);
   }
-  .button--outline:focus {
+  .button--outline:active {
     background-color: var(--button-background-outline-focus);
     color: white;
   }
@@ -100,7 +128,7 @@ export default css`
     background-color: var(--button-background-primary-outline-hover);
     border: 2px solid var(--border-button-background-primary-outline-hover);
   }
-  .button--primary--outline:focus {
+  .button--primary--outline:active {
     background-color: var(--button-background-primary-outline-focus);
     color: white;
   }
@@ -111,6 +139,8 @@ export default css`
     font-weight: 400;
     font-family: var(--font-family-sans);
     border-radius: 6px;
+    min-height: 34px;
+    min-width: 115px;
   }
 
   .button--medium {
@@ -119,6 +149,8 @@ export default css`
     font-weight: 400;
     font-family: var(--font-family-sans);
     border-radius: 8px;
+    min-height: 45px;
+    min-width: 150px;
   }
 
   .button--large {
@@ -127,11 +159,17 @@ export default css`
     font-weight: 400;
     font-family: var(--font-family-sans);
     border-radius: 8px;
+    min-height: 55px;
+    min-width: 150px;
   }
   .button--bold {
     font-weight: 600;
   }
   .max--width {
     width: 100%;
+    display: block;
+  }
+  .button.max--width {
+    width: 100%;
   }
 `;

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

@@ -2,7 +2,7 @@ import "./Button.js";
 import { html } from "lit";
 
 export default {
-  title: "Components/Button",
+  title: "Atoms/Button",
   component: "bd-button",
   tags: ["autodocs"],
   argTypes: {
@@ -23,14 +23,16 @@ export default {
 
 const Template = (args) => {
   const { label, href, size, kind, fullWidth, strong } = args;
-  return `
+  return html`
     <bd-button 
       label="${label}" 
       href="${href}" 
       size="${size}" 
-      kind="${kind}" 
-      ${fullWidth ? "fullWidth" : ""} 
-      ${strong ? "strong" : ""}>Buy Now
+      kind="${kind}"
+      ?fullWidth="${fullWidth}"
+      ?strong="${strong}"
+    >
+      ${label}
     </bd-button>
   `;
 };
@@ -45,8 +47,48 @@ Primary.args = {
   strong: false,
 };
 
-export const FullWidthPrimary = Template.bind({});
-FullWidthPrimary.args = {
+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",
@@ -54,3 +96,37 @@ FullWidthPrimary.args = {
   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,
+};
+
+;

package/src/components/FAQ/faq.css.js

@@ -1,4 +1,4 @@
-import { css } from "lit";
+import { css } from "../lit";
 
 export default css`
   :host {
@@ -7,6 +7,7 @@ export default css`
     --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;
   }
@@ -34,7 +35,7 @@ export default css`
     gap: var(--size-10);
     padding: 15px;
     font-weight: bold;
-    background-color: #f2f6fc;
+    background-color: var(--color-blue-50);
     color: #333;
     transition: background-color 0.3s ease, color 0.3s ease;
   }
@@ -48,6 +49,12 @@ export default css`
     color: #0073e6;
   }
 
+  .bd-faq-item:focus-visible {
+    outline: var(--size-2) solid var(--bd-accesibility-focus);
+    outline-offset: var(--size-2);
+    border-radius: var(--space-2xs);
+  }
+
   .bd-faq-item:focus {
     .bd-question-text {
       font-weight: 600;
@@ -74,27 +81,31 @@ export default css`
     height: var(--size-14);
     color: var(--color-blue-500);
     text-align: center;
+    position: relative;
+    bottom: 1px;
   }
 
-  .bd-answer {
-    display: grid;
-    grid-template-rows: 0fr;
-    transition: grid-template-rows 0.4s ease, padding 0.4s ease;
-    overflow: hidden;
-    padding: var(--size-0) 15px;
-    background-color: var(--color-blue-50);
-    font-family: var(--font-family-sans);
-    font-weight: var(--font-weight-sans-medium);
-  }
+ .bd-answer {
+  overflow: hidden;
+  max-height: 0;
+  opacity: 0;
+  padding: 0 15px;
+  background-color: var(--color-blue-50);
+  font-family: var(--font-family-sans);
+  font-weight: var(--font-weight-sans-medium);
+}
+
+.bd-faq-item.open .bd-answer {
+  max-height: 1000px; /* pune un maxim generos, dar realist */
+  opacity: 1;
+  padding: var(--size-0) var(--size-40);
+}
 
   .bd-answer > div {
     overflow: hidden;
   }
 
-  .bd-faq-item.open .bd-answer {
-    grid-template-rows: 1fr;
-    padding: var(--size-0) var(--size-40);
-  }
+  
 
   .bd-faq-container {
     width: 90%;