@repobit/dex-system-design 0.10.0 → 0.12.0

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

@@ -0,0 +1,88 @@
+import { html } from 'lit';
+
+// Importăm componentele, ca să se înregistreze
+import '../../components/dropdown/dropdown.js';
+import '../../components/input/input-clipboard.js';
+import '../../components/input/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>
+`;

package/src/components/Input/input-clipboard.css.js

@@ -0,0 +1,168 @@
+import { css } from "lit";
+
+export default css`
+  :host {
+    display: block;
+    width: 90%;
+  }
+
+  .input-container {
+    display: flex;
+    flex-direction: column;
+  }
+
+  label {
+    margin-bottom: 4px;
+    font-weight: 500;
+    color: var(--color-neutral-900);
+  }
+
+  .form-label__required {
+    color: var(--color-red-500);
+    margin-left: var(--spacing-4);
+  }
+
+  .label-sm {
+    font-size: var(--typography-fontSize-xs);
+    font-weight: var(--typography-fontWeight-bold);
+    line-height: var(--typography-lineHeight-normal);
+    letter-spacing: var(--typography-letterSpacing-wide);
+    margin-bottom: var(--spacing-4);
+  }
+
+  .label-md {
+    font-size: var(--typography-fontSize-sm);
+    font-weight: var(--typography-fontWeight-bold);
+    line-height: var(--typography-lineHeight-normal);
+    margin-bottom: var(--spacing-4);
+  }
+
+  .label-lg {
+    font-size: var(--typography-fontSize-lg);
+    font-weight: var(--typography-fontWeight-bold);
+    line-height: var(--typography-lineHeight-normal);
+    margin-bottom: var(--spacing-8);
+  }
+
+  .form-input-bd {
+    width: 100%;
+    border: var(--border-width-1, 1px) solid var(--color-neutral-300);
+    font-family: var(--typography-fontFamily-sans, sans-serif);
+    line-height: var(--typography-lineHeight-normal, 1.5);
+    transition: border-color 0.3s ease, background-color 0.3s ease,
+      box-shadow 0.3s ease;
+    background-color: var(--color-neutral-0);
+    color: var(--color-neutral-900);
+    outline: none;
+  }
+
+  input:focus {
+    border-color: var(--color-blue-500);
+    box-shadow: var(--focus-outline-primary, 0 0 0 2px rgba(0, 109, 255, 0.3));
+  }
+
+  .input-sm {
+    padding: var(--spacing-8) var(--spacing-12);
+    font-size: var(--typography-fontSize-sm);
+    height: var(--dimension-34px);
+    border-radius: var(--form-input-medium-borderRadius);
+  }
+
+  .input-md {
+    padding: var(--spacing-12) var(--spacing-16);
+    font-size: var(--typography-fontSize-base);
+    height: var(--dimension-45px);
+    border-radius: var(--form-input-large-borderRadius);
+  }
+
+  .input-lg {
+    padding: var(--spacing-16) var(--spacing-20);
+    font-size: var(--typography-fontSize-lg);
+    height: var(--dimension-55px);
+    border-radius: var(--form-input-large-borderRadius);
+  }
+
+  ::placeholder {
+    color: var(--color-neutral-500);
+    opacity: 1;
+  }
+
+  .form-label {
+    display: block;
+    font-family: var(--typography-fontFamily-sans);
+    color: var(--color-neutral-900);
+    letter-spacing: var(--typography-letterSpacing-normal);
+  }
+
+  .form-input-bd:focus,
+  .form-input-bd.focused {
+    border-color: var(--color-blue-500);
+    box-shadow: var(--focus-outline-primary, 0 0 0 2px rgba(0, 109, 255, 0.3));
+    background: none;
+  }
+
+  .form-help-text {
+    font-size: var(--typography-fontSize-xs);
+    font-weight: var(--typography-fontWeight-normal);
+    line-height: var(--typography-lineHeight-normal);
+    letter-spacing: var(--typography-letterSpacing-normal);
+    font-family: var(--typography-fontFamily-sans);
+    margin-top: var(--spacing-4);
+  }
+
+  .form-help-text--default {
+    color: var(--color-neutral-600);
+  }
+
+  .form-input--error {
+    background-color: var(--color-red-50);
+    border-color: var(--color-red-500);
+  }
+
+  .form-help-text--error {
+    color: var(--color-red-600);
+  }
+
+  .form-input--success {
+    background-color: var(--color-green-50);
+    border-color: var(--color-green-500);
+  }
+
+  .form-help-text--success {
+    color: var(--color-green-600);
+  }
+
+  .form-input--disabled {
+    background-color: var(--color-neutral-100);
+    border-color: var(--color-neutral-300);
+    color: var(--color-neutral-500);
+    cursor: not-allowed;
+  }
+
+  .input-with-button {
+    position: relative;
+    display: flex;
+    align-items: center;
+  }
+
+  input.form-input-bd {
+    flex: 1;
+    padding-right: 2.5rem; /* space for button */
+  }
+
+  .paste-button {
+    position: absolute;
+    right: 0.5rem;
+    background: transparent;
+    border: none;
+    cursor: pointer;
+    font-size: 1rem;
+    padding: 0;
+    color: var(--color-gray-700);
+  }
+
+  .paste-button:disabled {
+    cursor: not-allowed;
+    opacity: 0.5;
+  }
+`;

package/src/components/Input/input-clipboard.js

@@ -0,0 +1,137 @@
+import { LitElement, html } from "lit";
+import { tokens } from "../../tokens/tokens.js";
+import inputClipboardCSS from "../input/input-clipboard.css.js";
+
+class CustomInputClipboard extends LitElement {
+  static properties = {
+    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 },
+    value      : { type: String }
+  };
+
+  constructor() {
+    super();
+    this.label = "Default Label";
+    this.type = "text";
+    this.kind = "md";
+    this.placeholder = "Paste something...";
+    this.required = false;
+    this.focused = false;
+    this.tooltip = "";
+    this.invalid = false;
+    this.validated = false;
+    this.disabled = false;
+    this.value = "";
+  }
+
+  async pasteFromClipboard() {
+    try {
+      const text = await navigator.clipboard.readText();
+      this.value = text;
+      this.dispatchEvent(new CustomEvent("input", { detail: text }));
+    } catch (err) {
+      console.error("Clipboard paste failed:", err);
+    }
+  }
+
+  handleInput(e) {
+    this.value = e.target.value;
+    this.dispatchEvent(new CustomEvent("input", { detail: this.value }));
+  }
+
+  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="clipboard-input" class="form-label ${labelClass}">
+          ${this.label}
+          ${this.required
+            ? html`<span class="form-label__required">*</span>`
+            : ""}
+        </label>
+        <div class="input-with-button">
+          <input
+            id="clipboard-input"
+            class="form-input-bd ${inputClass} ${this.focused
+              ? "focused"
+              : ""} ${inputStateClass}"
+            type="${this.type}"
+            placeholder="${this.placeholder}"
+            .value="${this.value}"
+            ?required="${this.required}"
+            ?disabled="${this.disabled}"
+            @input="${this.handleInput}"
+          />
+          <button
+            class="paste-button"
+            @click="${this.pasteFromClipboard}"
+            title="Paste from clipboard"
+            ?disabled="${this.disabled}"
+            type="button"
+            aria-label="Paste from clipboard"
+          >
+            <svg
+              xmlns="http://www.w3.org/2000/svg"
+              width="20"
+              height="20"
+              viewBox="0 0 24 24"
+              fill="none"
+              stroke="currentColor"
+              stroke-width="1.5"
+              stroke-linecap="round"
+              stroke-linejoin="round"
+            >
+              <path
+                d="M16 4H18A2 2 0 0 1 20 6V20A2 2 0 0 1 18 22H6A2 2 0 0 1 4 20V6A2 2 0 0 1 6 4H8"
+              />
+              <rect x="8" y="2" width="8" height="4" rx="1" ry="1" />
+            </svg>
+          </button>
+        </div>
+
+        ${this.tooltip
+          ? html`<div class="form-help-text ${helpTextClass}">
+              ${this.tooltip}
+            </div>`
+          : ""}
+      </div>
+    `;
+  }
+
+}
+CustomInputClipboard.styles = [tokens, inputClipboardCSS];
+
+customElements.define("bd-custom-input-clipboard", CustomInputClipboard);

package/src/components/Input/input.css.js

@@ -1,68 +1,148 @@
 import { css } from "lit";
 
 export default css`
+  :host {
+    display: block;
+    width: 90%;
+  }
+
   .input-container {
     display: flex;
     flex-direction: column;
-    margin-bottom: 1em;
   }
 
   label {
-    font-size: 14px;
-    font-weight: bold;
-    margin-bottom: 5px;
-    color: #333;
-  }
-
-  input {
-    width: 20%;
-    padding: 10px;
-    font-size: 16px;
-    border: 1px solid #ccc;
-    border-radius: 4px;
+    margin-bottom: 4px;
+    font-weight: 500;
+    color: var(--color-neutral-900);
+  }
+
+  .form-label__required {
+    color: var(--color-red-500);
+    margin-left: var(--spacing-4);
+  }
+
+  .label-sm {
+    font-size: var(--typography-fontSize-xs);
+    font-weight: var(--typography-fontWeight-bold);
+    line-height: var(--typography-lineHeight-normal);
+    letter-spacing: var(--typography-letterSpacing-wide);
+    margin-bottom: var(--spacing-4);
+  }
+
+  .label-md {
+    font-size: var(--typography-fontSize-sm);
+    font-weight: var(--typography-fontWeight-bold);
+    line-height: var(--typography-lineHeight-normal);
+    margin-bottom: var(--spacing-4);
+  }
+
+  .label-lg {
+    font-size: var(--typography-fontSize-lg);
+    font-weight: var(--typography-fontWeight-bold);
+    line-height: var(--typography-lineHeight-normal);
+    margin-bottom: var(--spacing-8);
+  }
+
+  .form-input-bd {
+    width: 100%;
+    border: var(--border-width-1, 1px) solid var(--color-neutral-300);
+    font-family: var(--typography-fontFamily-sans, sans-serif);
+    line-height: var(--typography-lineHeight-normal, 1.5);
+    transition: border-color 0.3s ease, background-color 0.3s ease,
+      box-shadow 0.3s ease;
+    background-color: var(--color-neutral-0);
+    color: var(--color-neutral-900);
     outline: none;
-    transition: border-color 0.3s ease, box-shadow 0.3s ease;
   }
 
   input:focus {
-    border-color: #006eff;
-    box-shadow: 0px 0px 5px rgba(0, 110, 255, 0.5);
+    border-color: var(--color-blue-500);
+    box-shadow: var(
+      --focus-outline-primary,
+      0 0 0 2px rgba(0, 109, 255, 0.3)
+    );
   }
 
-  form {
-    max-width: 400px;
-    margin: 20px auto;
-    padding: 10px;
-    border: 1px solid #ddd;
-    border-radius: 5px;
-    background-color: #f9f9f9;
+  .input-sm {
+    padding: var(--spacing-8) var(--spacing-12);
+    font-size: var(--typography-fontSize-sm);
+    height: var(--dimension-34px);
+    border-radius: var(--form-input-medium-borderRadius);
   }
 
-  .form-group {
-    display: flex;
-    flex-direction: column;
-    margin-bottom: 15px;
+  .input-md {
+    padding: var(--spacing-12) var(--spacing-16);
+    font-size: var(--typography-fontSize-base);
+    height: var(--dimension-45px);
+    border-radius: var(--form-input-large-borderRadius);
   }
 
-  .form-group label {
-    font-size: 14px;
-    margin-bottom: 5px;
-    font-weight: bold;
+  .input-lg {
+    padding: var(--spacing-16) var(--spacing-20);
+    font-size: var(--typography-fontSize-lg);
+    height: var(--dimension-55px);
+    border-radius: var(--form-input-large-borderRadius);
   }
 
-  .form-group input {
-    padding: 10px;
-    font-size: 16px;
-    border: 1px solid #ccc;
-    border-radius: 4px;
-    transition: border-color 0.3s ease, box-shadow 0.3s ease;
-    width: 80% !important;
+  ::placeholder {
+    color: var(--color-neutral-500);
+    opacity: 1;
   }
 
-  .form-group input:focus {
-    border-color: #006eff;
-    box-shadow: 0px 0px 5px rgba(0, 110, 255, 0.5);
+  .form-label {
+    display: block;
+    font-family: var(--typography-fontFamily-sans);
+    color: var(--color-neutral-900);
+    letter-spacing: var(--typography-letterSpacing-normal);
   }
 
- 
+  .form-input-bd:focus,
+  .form-input-bd.focused {
+    border-color: var(--color-blue-500);
+    box-shadow: var(
+      --focus-outline-primary,
+      0 0 0 2px rgba(0, 109, 255, 0.3)
+    );
+    background: none;
+  }
+
+  .form-help-text {
+    font-size: var(--typography-fontSize-xs);
+    font-weight: var(--typography-fontWeight-normal);
+    line-height: var(--typography-lineHeight-normal);
+    letter-spacing: var(--typography-letterSpacing-normal);
+    font-family: var(--typography-fontFamily-sans);
+    margin-top: var(--spacing-4);
+  }
+
+  .form-help-text--default {
+    color: var(--color-neutral-600);
+  }
+
+  .form-input--error {
+    background-color: var(--color-red-50);
+    border-color: var(--color-red-500);
+  }
+
+  .form-help-text--error {
+    color: var(--color-red-600);
+  }
+
+  .form-input--success {
+    background-color: var(--color-green-50);
+    border-color: var(--color-green-500);
+  }
+
+  .form-help-text--success {
+    color: var(--color-green-600);
+  }
+
+  .form-input--disabled {
+    background-color: var(--color-neutral-100);
+    border-color: var(--color-neutral-300);
+    color: var(--color-neutral-500);
+    cursor: not-allowed;
+  }
+    
 `;

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

@@ -0,0 +1,117 @@
+import { css } from "lit";
+
+export default css`
+  :host {
+    --background-card-grey: var(--color-neutral-25);
+    --border-card-grey: var(--color-neutral-50);
+    --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;
+  }
+
+  .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-accordion-bg-item:hover {
+    .bd-accordion-bg-question-text {
+      text-decoration-line: underline;
+    }
+  }
+
+  .bd-accordion-bg-question {
+    cursor: pointer;
+    display: flex;
+    justify-content: flex-start;
+    align-items: center;
+    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-accordion-bg-header {
+    margin-bottom: var(--spacing-32);
+  }
+
+  .bd-accordion-bg-question:hover {
+    color: #0073e6;
+  }
+
+  .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-accordion-bg-item:focus {
+    .bd-accordion-bg-question-text {
+      font-weight: 600;
+      text-decoration-line: underline;
+      color: var(--color-blue-600);
+      text-decoration-thickness: var(--spacing-2);
+    }
+  }
+
+  .bd-accordion-bg-question-text {
+    font-family: var(--typography-fontFamily-sans);
+    font-weight: var(--typography-fontWeight-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-accordion-bg-icon {
+    transition: transform 0.3s ease;
+    width: var(--spacing-14);
+    height: var(--spacing-14);
+    color: var(--color-blue-500);
+    text-align: center;
+    position: relative;
+    bottom: 1px;
+  }
+
+  .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-accordion-bg-item.open .bd-accordion-bg-answer {
+    max-height: 1000px;
+    opacity: 1;
+    padding: var(--spacing-0) var(--spacing-40);
+  }
+
+  .bd-accordion-bg-answer > div {
+    overflow: hidden;
+  }
+
+  .bd-accordion-bg-container {
+    width: 90%;
+    margin: auto;
+    padding-top: var(--spacing-64);
+    padding-bottom: var(--spacing-64);
+  }
+
+  .bd-accordion-bg-link-noline {
+    text-decoration: none;
+  }
+`;