@repobit/dex-system-design 0.11.0 → 0.14.0

package/CHANGELOG.md

@@ -3,6 +3,41 @@
 All notable changes to this project will be documented in this file.
 See [Conventional Commits](https://conventionalcommits.org) for commit guidelines.
 
+## [0.14.0](https://github.com/bitdefender/dex-core/compare/@repobit/dex-system-design@0.12.0...@repobit/dex-system-design@0.14.0) (2025-09-09)
+
+
+### Features
+
+* **DEX-999:** added footer components in storybook ([848ae39](https://github.com/bitdefender/dex-core/commit/848ae392aff5f59ab800b6bf54de45adbaffc70a))
+
+
+### Bug Fixes
+
+* **DEX-1000:** update Storybook for custom-form ([1b0d539](https://github.com/bitdefender/dex-core/commit/1b0d5393230d89a7f4afc59efc11f1ed0d1d80a5))
+* **DEX-999:** added missing files ([566952b](https://github.com/bitdefender/dex-core/commit/566952b98df5d95307cdb9df8296f685c545fd9e))
+* **DEX-999:** modified files for PR review ([f6e4cec](https://github.com/bitdefender/dex-core/commit/f6e4cec3b1f6043c988b35f5a86a9d22c3509225))
+* **DEX-999:** wrong import for input-clipboard ([893c5d1](https://github.com/bitdefender/dex-core/commit/893c5d1210cd41a70be1d3a7b742a1dbe2f66045))
+
+
+
+## [0.12.0](https://github.com/bitdefender/dex-core/compare/@repobit/dex-system-design@0.11.0...@repobit/dex-system-design@0.12.0) (2025-09-03)
+
+
+### Features
+
+* **DEX-999:** custom forms and modal storybook file ([7d113e0](https://github.com/bitdefender/dex-core/commit/7d113e0f07c19535a49825cbaf2dcdf95d6e1fd1))
+* **DEX-999:** input with clipboard ([7ee096a](https://github.com/bitdefender/dex-core/commit/7ee096a6eb2e831cbfd0374510bb7b56e7167bfa))
+* **DEX-999:** move photos to public folder and update footer component ([84db2fa](https://github.com/bitdefender/dex-core/commit/84db2faefd33bfd1a37a228124380cbef73acdaa))
+
+
+### Bug Fixes
+
+* **DEX-999:** feedback din PR review ([b44f4c0](https://github.com/bitdefender/dex-core/commit/b44f4c0704ffb579bf9309ef2957d14b50e74eab))
+* **DEX-999:** modified package json and package-lock ([9dc9a3c](https://github.com/bitdefender/dex-core/commit/9dc9a3c1e031e9d69f8b7256cce8afca5153a41c))
+* **DEX-999:** review updates ([a4fee53](https://github.com/bitdefender/dex-core/commit/a4fee533d667d711002cc763e8ea1f696fd6f898))
+
+
+
 ## [0.11.0](https://github.com/bitdefender/dex-core/compare/@repobit/dex-system-design@0.10.0...@repobit/dex-system-design@0.11.0) (2025-07-23)
 
 

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@repobit/dex-system-design",
-  "version": "0.11.0",
+  "version": "0.14.0",
   "description": "Design system based on Web Components.",
   "author": "Iordache Matei Cezar <miordache@bitdefender.com>",
   "homepage": "https://github.com/bitdefender/dex-core#readme",
@@ -68,5 +68,5 @@
   "volta": {
     "node": "22.14.0"
   },
-  "gitHead": "5b27e1aec53bbfac923c611bfb8fe7629811acdb"
+  "gitHead": "1dd57a06a83a777456387a6467947febe44a7935"
 }

package/src/components/Button/Button.js

@@ -101,6 +101,7 @@ class Button extends LitElement {
     `;
   }
 }
+
 class ButtonLink extends LitElement {
   static properties = {
     label      : { type: String },
@@ -114,13 +115,14 @@ class ButtonLink extends LitElement {
     fontWeight : { type: String, attribute: "font-weight" }
   };
 
-  /** @private -> for private properties we are using "_text" */
-
   constructor() {
     super();
     this.label = "Buy now";
     this.href = "";
     this.size = "md";
+    this.kind = "primary";
+    this.fullWidth = false;
+    this.strong = false;
     this.fontSize = "";
     this.fontWeight = "";
   }
@@ -154,6 +156,7 @@ class ButtonLink extends LitElement {
         return "";
     }
   }
+
   get fullWidthClass() {
     return this.fullWidth ? "max--width" : "";
   }
@@ -164,19 +167,17 @@ class ButtonLink extends LitElement {
 
   render() {
     return html`
-      <a class="href-button" href="${this.href}" aria-label="${this.label}">
-        <button
-          @click=${this._handleClick}
-          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>
+      <a
+        href="${this.href}"
+        class="button ${this.kindClass} ${this.sizeClass} ${this.fullWidthClass} ${this.strongClass}"
+        aria-label="${this.label}"
+        @click=${this._handleClick}
+        style="
+          ${this.fontSize ? `font-size: ${this.fontSize};` : ""}
+          ${this.fontWeight ? `font-weight: ${this.fontWeight};` : ""}
+        "
+      >
+        <slot>${this.label}</slot>
       </a>
     `;
   }
@@ -184,7 +185,10 @@ class ButtonLink extends LitElement {
   _handleClick() {
     this.dispatchEvent(new Event("custom-click"));
   }
+
 }
+
+
 class ContactButton extends LitElement {
   static properties = {
     label: { type: String },
@@ -217,7 +221,6 @@ class ContactButton extends LitElement {
   }
 
   _handleClick() {
-    console.log("Contact button clicked!");
     this.dispatchEvent(new Event("custom-click"));
   }
 }

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

@@ -35,8 +35,8 @@ export default css`
   }
 
   button:focus-visible {
-    outline: var(--size-2) solid var(--bd-accesibility-focus);
-    outline-offset: var(--size-2);
+    outline: var(--spacing-2) solid var(--bd-accesibility-focus);
+    outline-offset: var(--spacing-2);
   }
   .href-button:focus,
   .href-button:focus-visible {
@@ -44,10 +44,12 @@ export default css`
   }
 
   .href-button:focus-visible button {
-    outline: var(--size-2) solid var(--bd-accesibility-focus);
-    outline-offset: var(--size-2);
+    outline: var(--spacing-2) solid var(--bd-accesibility-focus);
+    outline-offset: var(--spacing-2);
   }
-
+a.button {
+  text-decoration: none;
+}
   .href-button {
     text-decoration: none;
     display: inline-flex;
@@ -134,31 +136,31 @@ export default css`
   }
 
   .button--small {
-    padding: var(--size-8) var(--size-16);
-    font-size: var(--size-14);
+    padding: var(--spacing-8) var(--spacing-16);
+    font-size: var(--spacing-14);
     font-weight: 400;
-    font-family: var(--font-family-sans);
+    font-family: var(--typography-fontFamily-sans);
     border-radius: 6px;
     min-height: 34px;
     min-width: 115px;
   }
 
   .button--medium {
-    padding: var(--size-12) var(--size-20);
-    font-size: var(--size-16);
+    padding: var(--spacing-12) var(--spacing-20);
+    font-size: var(--spacing-16);
     font-weight: 400;
-    font-family: var(--font-family-sans);
-    border-radius: 8px;
+    font-family: var(--typography-fontFamily-sans);
+    border-radius: var(--radius-lg);
     min-height: 45px;
     min-width: 150px;
   }
 
   .button--large {
-    padding: var(--size-16) var(--size-24);
-    font-size: var(--size-18);
+    padding: var(--spacing-16) var(--spacing-24);
+    font-size: var(--spacing-18);
     font-weight: 400;
-    font-family: var(--font-family-sans);
-    border-radius: 8px;
+    font-family: var(--typography-fontFamily-sans);
+    border-radius: var(--radius-lg);
     min-height: 55px;
     min-width: 150px;
   }

package/src/components/Button/icons.js

@@ -1,16 +1,16 @@
-import { LitElement, html, css } from "lit";
+import { LitElement, css, html } from "lit";
 
 
 class ArrowIconComponent extends LitElement {
- 
-    static styles = css`
+
+  static styles = css`
     .arrow-icon {
       height: 10px;
       font-weight: 600;
     }
   `;
-    render() {
-      return html`
+  render() {
+    return html`
         <svg class="arrow-icon" xmlns="http://www.w3.org/2000/svg" viewBox="0 0 512 404.39">
           <path
             fill-rule="nonzero"
@@ -18,7 +18,7 @@ class ArrowIconComponent extends LitElement {
           />
         </svg>
       `;
-    }
   }
-  
-  customElements.define('arrow-icon', ArrowIconComponent);
+}
+
+customElements.define('arrow-icon', ArrowIconComponent);

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

@@ -8,111 +8,110 @@ export default css`
     --badge-background: var(--color-blue-500);
     --text-color-white: var(--color-neutral-0);
     --bd-accesibility-focus: var(--color-blue-500);
-
     display: block;
   }
 
-  .bd-faq-item {
-    margin-bottom: var(--size-10);
-    border-radius: var(--size-8);
+  .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-faq-item:hover {
-    .bd-question-text {
+  .bd-accordion-bg-item:hover {
+    .bd-accordion-bg-question-text {
       text-decoration-line: underline;
-      text-decoration-style: solid;
     }
   }
 
-  .bd-question {
+  .bd-accordion-bg-question {
     cursor: pointer;
     display: flex;
     justify-content: flex-start;
     align-items: center;
-    gap: var(--size-10);
-    padding: 15px;
+    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-header-section-faq {
-    margin-bottom: 50px;
-    margin-top: 50px;
+  .bd-accordion-bg-header {
+    margin-bottom: var(--spacing-32);
   }
 
-  .bd-question:hover {
+  .bd-accordion-bg-question:hover {
     color: #0073e6;
   }
 
-  .bd-faq-item:focus-visible {
-    outline: var(--size-2) solid var(--bd-accesibility-focus);
-    outline-offset: var(--size-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-faq-item:focus {
-    .bd-question-text {
+  .bd-accordion-bg-item:focus {
+    .bd-accordion-bg-question-text {
       font-weight: 600;
       text-decoration-line: underline;
-      text-decoration-style: solid;
       color: var(--color-blue-600);
-      text-decoration-thickness: var(--size-2);
+      text-decoration-thickness: var(--spacing-2);
     }
   }
 
-  .bd-question-text {
-    font-family: var(--font-family-sans);
-    font-weight: var(--font-weight-sans-semibold);
+  .bd-accordion-bg-question-text {
+    font-family: var(--typography-fontFamily-sans);
+    font-weight: var(--typography-fontWeight-semibold);
   }
 
-  .bd-section-title {
-    font-family: var(--font-family-sans);
-    font-weight: var(--font-weight-sans-semibold);
+  .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-icon {
+  .bd-accordion-bg-icon {
     transition: transform 0.3s ease;
-    width: var(--size-14);
-    height: var(--size-14);
+    width: var(--spacing-14);
+    height: var(--spacing-14);
     color: var(--color-blue-500);
     text-align: center;
     position: relative;
     bottom: 1px;
   }
 
- .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-accordion-bg-answer {
+    overflow: hidden;
+    max-height: 0;
+    opacity: 0;
+    padding: 0 15px;
+    background-color: var(--color-blue-50);
+    font-family: var(--typography-fontFamily-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-accordion-bg-item.open .bd-accordion-bg-answer {
+    max-height: 1000px;
+    opacity: 1;
+    padding: var(--spacing-0) var(--spacing-40);
+  }
 
-  .bd-answer > div {
+  .bd-accordion-bg-answer > div {
     overflow: hidden;
   }
 
-  
-
-  .bd-faq-container {
+  .bd-accordion-bg-container {
     width: 90%;
     margin: auto;
+    padding-top: var(--spacing-64);
+    padding-bottom: var(--spacing-64);
   }
 
-  .bd-link-noline {
+  .bd-accordion-bg-link-noline {
     text-decoration: none;
   }
 `;

package/src/components/FAQ/faq.js

@@ -1,86 +0,0 @@
-import { LitElement, html } from "lit";
-import { tokens } from "../../tokens/tokens.js";
-
-import faqCSS from "../FAQ/faq.css.js";
-
-class FaqSection extends LitElement {
-  static properties = {
-    faqs: { type: Array }
-  };
-
-  constructor() {
-    super();
-  }
-
-  render() {
-    return html`
-      <div class="bd-faq-container">
-        <div class="bd-header-section-faq">
-          <h1 class="bd-section-title">${this.title}</h1>
-        </div>
-        <slot></slot>
-      </div>
-    `;
-  }
-}
-
-class FaqSectionItem extends LitElement {
-  static properties = {
-    title: { type: String },
-    open : { type: Boolean, reflect: true }
-  };
-
-  constructor() {
-    super();
-    this.title = "";
-    this.open = false;
-    this.id = `faq-${Math.random().toString(36)
-      .substr(2, 9)}`;
-  }
-
-  toggleItem() {
-    this.open = !this.open;
-    this.requestUpdate();
-  }
-
-  handleKeyDown(event) {
-    if (event.key === "Enter" || event.key === " ") {
-      event.preventDefault();
-      this.toggleItem();
-    }
-  }
-
-  render() {
-    return html`
-      <div
-        class="bd-faq-item ${this.open ? "open" : ""}"
-        role="button"
-        aria-expanded="${this.open}"
-        aria-controls="${this.id}"
-        tabindex="0"
-        @click=${this.toggleItem}
-        @keydown=${this.handleKeyDown}
-      >
-        <div class="bd-question">
-          <span class="bd-icon">${this.open ? "−" : "+"}</span>
-          <span class="bd-question-text">${this.title}</span>
-        </div>
-
-        <div
-          id="${this.id}"
-          class="bd-answer"
-          role="region"
-          aria-labelledby="${this.id}"
-        >
-          <slot></slot>
-        </div>
-      </div>
-    `;
-  }
-}
-
-FaqSection.styles = [tokens, faqCSS];
-FaqSectionItem.styles = [tokens, faqCSS];
-
-customElements.define("bd-faq-section-item", FaqSectionItem);
-customElements.define("bd-faq-section", FaqSection);

package/src/components/Input/Input.js

@@ -1,28 +1,90 @@
 import { LitElement, html } from "lit";
 import { tokens } from "../../tokens/tokens.js";
-import inputCSS from "../Input/input.css.js";
+import inputCSS from "./input.css.js";
 
 class CustomInput extends LitElement {
   static properties = {
-    label: { type: String },
-    type : { type: String }
+    label      : { type: String },
+    type       : { type: String },
+    kind       : { type: String }, // sm, md, lg
+    placeholder: { type: String },
+    required   : { type: Boolean },
+    focused    : { type: Boolean },
+    tooltip    : { type: String },
+    invalid    : { type: Boolean },
+    validated  : { type: Boolean, reflect: true },
+    disabled   : { type: Boolean, reflect: true }
   };
 
   constructor() {
     super();
     this.label = "Default Label";
     this.type = "text";
+    this.kind = "md";
+    this.placeholder = "Enter something...";
+    this.required = false;
+    this.focused = false;
+    this.tooltip = "";
+    this.invalid = false;
+    this.validated = false;
+    this.disabled = false;
   }
 
 
   render() {
+    const inputClass = {
+      sm: "input-sm",
+      md: "input-md",
+      lg: "input-lg"
+    }[this.kind];
+
+    const labelClass = {
+      sm: "label-sm",
+      md: "label-md",
+      lg: "label-lg"
+    }[this.kind];
+
+    const inputStateClass = this.disabled
+      ? "form-input--disabled"
+      : this.invalid
+        ? "form-input--error"
+        : this.validated
+          ? "form-input--success"
+          : "";
+
+    const helpTextClass = this.invalid
+      ? "form-help-text--error"
+      : this.validated
+        ? "form-help-text--success"
+        : "form-help-text--default";
+
     return html`
       <div class="input-container">
-        <label for="custom-input">${this.label}</label>
-        <input type="${this.type}" id="custom-input" />
+        <label for="custom-input" class="form-label ${labelClass}">
+          ${this.label}
+          ${this.required
+            ? html`<span class="form-label__required">*</span>`
+            : ""}
+        </label>
+        <input
+          id="custom-input"
+          class="form-input-bd ${inputClass} ${this.focused
+            ? "focused"
+            : ""} ${inputStateClass}"
+          type="${this.type}"
+          placeholder="${this.placeholder}"
+          ?required="${this.required}"
+          ?disabled="${this.disabled}"
+        />
+        ${this.tooltip
+          ? html`<div class="form-help-text ${helpTextClass}">
+              ${this.tooltip}
+            </div>`
+          : ""}
       </div>
     `;
   }
 }
 CustomInput.styles = [tokens, inputCSS];
-customElements.define("custom-input", CustomInput);
+
+customElements.define("bd-custom-input", CustomInput);

package/src/components/Input/custom-form.stories.js

@@ -0,0 +1,88 @@
+import { html } from 'lit';
+
+import '../dropdown/dropdown.js';
+import './input-clipboard.js';
+import './Input.js';
+
+
+export default {
+  title: 'Components/Form Inputs and Dropdown'
+};
+
+// ---------- INPUT ----------
+export const Inputs = () => html`
+  <div style="display: grid; gap: 1rem; max-width: 400px;">
+    <bd-custom-input 
+      label="Nume complet" 
+      placeholder="Introdu numele tău" 
+      kind="sm" 
+      required
+      tooltip="Choose a unique username">
+    </bd-custom-input>
+
+    <bd-custom-input 
+      label="Adresă de email" 
+      type="email" 
+      placeholder="you@example.com" 
+      kind="md" 
+      focused
+      tooltip="Click to see focus state">
+    </bd-custom-input>
+
+    <bd-custom-input 
+      label="Email" 
+      type="email" 
+      kind="sm" 
+      placeholder="Enter your email" 
+      required 
+      invalid
+      tooltip="Please enter a valid email address">
+    </bd-custom-input>
+
+    <bd-custom-input 
+      label="Email" 
+      kind="sm" 
+      placeholder="Enter email" 
+      tooltip="Looks good!"
+      validated>
+    </bd-custom-input>
+
+    <bd-custom-input 
+      label="Disabled Input" 
+      placeholder="Can't type here" 
+      tooltip="This field is disabled" 
+      kind="sm"
+      disabled>
+    </bd-custom-input>
+  </div>
+`;
+
+// ---------- DROPDOWN ----------
+export const Dropdowns = () => html`
+  <div style="display: grid; gap: 1rem; max-width: 400px;">
+    <bd-custom-dropdown 
+      label="Select size" 
+      kind="md" 
+      options='["Small", "Medium", "Large"]'
+      tooltip="Choose an option">
+    </bd-custom-dropdown>
+
+    <bd-custom-dropdown 
+      label="Select country" 
+      kind="sm" 
+      options='["Romania", "Germany", "Canada", "Japan", "Brazil"]'
+      tooltip="Choose an option">
+    </bd-custom-dropdown>
+  </div>
+`;
+
+// ---------- INPUT CLIPBOARD ----------
+export const InputClipboard = () => html`
+  <div style="display: grid; gap: 1rem; max-width: 400px;">
+    <bd-custom-input-clipboard 
+      label="Token" 
+      kind="sm" 
+      placeholder="Paste token here">
+    </bd-custom-input-clipboard>
+  </div>
+`;