@repobit/dex-system-design 0.10.0 → 0.12.0

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

@@ -0,0 +1,80 @@
+import { LitElement, html } from "lit";
+import { tokens } from "../../tokens/tokens.js";
+import accordionCSS from "./accordion-bg.css";
+
+class BdAccordionBg extends LitElement {
+  static properties = {
+    title: { type: String }
+  };
+
+  static styles = [tokens, accordionCSS];
+
+  render() {
+    return html`
+      <div class="bd-accordion-bg-container">
+        <div class="bd-accordion-bg-header">
+          <h1 class="bd-accordion-bg-title">${this.title}</h1>
+        </div>
+        <slot></slot>
+      </div>
+    `;
+  }
+}
+
+class BdAccordionBgItem extends LitElement {
+  static properties = {
+    title: { type: String },
+    open : { type: Boolean, reflect: true }
+  };
+
+  constructor() {
+    super();
+    this.title = "";
+    this.open = false;
+    this.id = `accordion-${Math.random().toString(36)
+      .substr(2, 9)}`;
+  }
+
+  static styles = [tokens, accordionCSS];
+
+  toggleItem() {
+    this.open = !this.open;
+  }
+
+  handleKeyDown(event) {
+    if (event.key === "Enter" || event.key === " ") {
+      event.preventDefault();
+      this.toggleItem();
+    }
+  }
+
+  render() {
+    return html`
+      <div
+        class="bd-accordion-bg-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-accordion-bg-question">
+          <span class="bd-accordion-bg-icon">${this.open ? "−" : "+"}</span>
+          <span class="bd-accordion-bg-question-text">${this.title}</span>
+        </div>
+        <div
+          id="${this.id}"
+          class="bd-accordion-bg-answer"
+          role="region"
+          aria-labelledby="${this.id}"
+        >
+          <slot></slot>
+        </div>
+      </div>
+    `;
+  }
+}
+
+customElements.define("bd-accordion-bg", BdAccordionBg);
+customElements.define("bd-accordion-bg-item", BdAccordionBgItem);

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

@@ -0,0 +1,114 @@
+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);
+    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;
+    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;
+    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;
+  }
+`;

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

@@ -0,0 +1,80 @@
+import { LitElement, html } from "lit";
+import { tokens } from "../../tokens/tokens.js";
+import accordionCSS from "./accordion-no-bg.css";
+
+class BdAccordionNoBg extends LitElement {
+  static properties = {
+    title: { type: String }
+  };
+
+  static styles = [tokens, accordionCSS];
+
+  render() {
+    return html`
+      <div class="bd-accordion-bg-container">
+        <div class="bd-accordion-bg-header">
+          <h1 class="bd-accordion-bg-title">${this.title}</h1>
+        </div>
+        <slot></slot>
+      </div>
+    `;
+  }
+}
+
+class BdAccordionNoBgItem extends LitElement {
+  static properties = {
+    title: { type: String },
+    open : { type: Boolean, reflect: true }
+  };
+
+  constructor() {
+    super();
+    this.title = "";
+    this.open = false;
+    this.id = `accordion-${Math.random().toString(36)
+      .substr(2, 9)}`;
+  }
+
+  static styles = [tokens, accordionCSS];
+
+  toggleItem() {
+    this.open = !this.open;
+  }
+
+  handleKeyDown(event) {
+    if (event.key === "Enter" || event.key === " ") {
+      event.preventDefault();
+      this.toggleItem();
+    }
+  }
+
+  render() {
+    return html`
+      <div
+        class="bd-accordion-bg-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-accordion-bg-question">
+          <span class="bd-accordion-bg-icon">${this.open ? "−" : "+"}</span>
+          <span class="bd-accordion-bg-question-text">${this.title}</span>
+        </div>
+        <div
+          id="${this.id}"
+          class="bd-accordion-bg-answer"
+          role="region"
+          aria-labelledby="${this.id}"
+        >
+          <slot></slot>
+        </div>
+      </div>
+    `;
+  }
+}
+
+customElements.define("bd-accordion-no-bg", BdAccordionNoBg);
+customElements.define("bd-accordion-no-bg-item", BdAccordionNoBgItem);

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

@@ -0,0 +1,88 @@
+import { css } from "lit";
+
+export const accordionItem = css`
+  :host {
+    display: block;
+    margin-bottom: var(--spacing-8);
+  }
+
+  .header {
+    display: flex;
+    align-items: center;
+    cursor: pointer;
+    color: var(--color-blue-600);
+    font-family: var(--typography-fontFamily-sans);
+    font-weight: var(--typography-fontWeight-bold);
+    font-size: var(--typography-label-small-fontSize);
+    margin-bottom: var(--spacing-8);
+  }
+
+  .toggle {
+    font-size: 1.25rem;
+    margin-right: 0.5rem;
+    width: 1.25rem;
+    text-align: center;
+    user-select: none;
+  }
+
+  .title {
+    flex: 1;
+  }
+
+  .content {
+    padding-left: 1.75rem;
+    display: none;
+    font-size: var(--typography-label-small-fontSize);
+    font-family: var(--typography-fontFamily-sans);
+  }
+
+  :host([open]) .content {
+    display: block;
+  }
+  ::slotted(p) {
+    margin-bottom: var(--spacing-16);
+    font-size: var(--typography-label-small-fontSize);
+    font-family: var(--typography-fontFamily-sans);
+    margin-top: 0px;
+  }
+`;
+
+export const accordionSection = css`
+  :host {
+    display: block;
+    background-color: var(--color-neutral-25);
+    padding: var(--spacing-32);
+  }
+
+  .section-title {
+    margin-bottom: var(--spacing-32);
+    margin-top: var(--spacing-0);
+    font-weight: 600;
+    font-family: var(--typography-fontFamily-sans);
+    font-weight: var(--typography-fontWeight-bold);
+    font-size: var(--typography-body-regular-fontSize);
+  }
+  .user-guide-link {
+    margin-top: 16px;
+    font-family: Arial, sans-serif;
+    font-size: 12px;
+    color: var(--color-blue-600);
+    margin-left: 5px;
+  }
+
+  .user-guide-link a {
+    display: inline-flex;
+    align-items: center;
+    text-decoration: none;
+    color: inherit;
+    gap: 6px;
+  }
+
+  .user-guide-link .icon img {
+    display: block;
+    width: 16px;
+    height: 14px;
+    object-fit: contain;
+  }
+`;
+

package/src/components/accordion/accordion.js

@@ -0,0 +1,81 @@
+import { LitElement, html } from "lit";
+import { tokens } from "../../tokens/tokens.js";
+import { accordionItem, accordionSection } from "./accordion.css.js";
+
+export class BdAccordionItem extends LitElement {
+  static styles = [tokens, accordionItem];
+
+  static properties = {
+    open : { type: Boolean, reflect: true },
+    title: { type: String }
+  };
+
+  constructor() {
+    super();
+    this.open = false;
+  }
+
+  toggle() {
+    this.open = !this.open;
+  }
+
+  render() {
+    return html`
+      <div class="header" @click=${this.toggle}>
+        <div class="toggle">${this.open ? "−" : "+"}</div>
+        <div class="title">${this.title}</div>
+      </div>
+      <div class="content">
+        <slot></slot>
+      </div>
+    `;
+  }
+}
+
+export class BdAccordionSection extends LitElement {
+  static styles = accordionSection;
+
+  static properties = {
+    title     : { type: String },
+    guideIcon : { type: String, reflect: true, attribute: "guide-icon" },
+    guideLabel: { type: String, reflect: true, attribute: "guide-label" },
+    guideHref : { type: String, reflect: true, attribute: "guide-href" }
+  };
+
+  constructor() {
+    super();
+    this.title = "";
+    this.guideIcon =
+      "/assets/user_guide.png";
+    this.guideLabel = "";
+    this.guideHref = "#";
+  }
+
+
+
+
+  render() {
+    return html`
+    ${this.title
+      ? html`<h2 class="section-title">
+          ${this.title}
+        </h2>`
+      : ""}
+    <slot></slot>
+    ${this.guideLabel
+      ? html`<p class="user-guide-link">
+          <a href=${this.guideHref}>
+            ${this.guideIcon
+              ? html`<span class="icon"><img src=${this.guideIcon} alt="" /></span>`
+              : ""}
+            ${this.guideLabel}
+          </a>
+        </p>`
+      : ""}
+  `;
+  }
+
+}
+
+customElements.define("bd-accordion-item", BdAccordionItem);
+customElements.define("bd-accordion-section", BdAccordionSection);

package/src/components/anchor/anchor-nav.css.js

@@ -2,8 +2,8 @@ import { css } from "lit";
 
 export const anchorNavStyles = css`
  :host {
-  padding: var(--size-0) 15em;
-  margin: var(--size-0) auto;
+  padding: var(--spacing-0) 15em;
+  margin: var(--spacing-0) auto;
   --bd-accesibility-focus: var(--color-blue-500);
 }
 
@@ -14,13 +14,12 @@ export const anchorNavStyles = css`
 }
 
 a: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);
   border-radius: var(--space-2xs);
 }
 
 nav {
-  position: -webkit-sticky;
   position: sticky;
   top: 0;
   z-index: 1000;
@@ -30,25 +29,26 @@ nav {
   align-items: center;
   border-top: 1px solid #f0f0f0;
   border-bottom: 1px solid #f0f0f0;
-  padding: var(--size-10) 15em;
+  padding: var(--spacing-10) 15em;
   width: 100%;
   box-sizing: border-box;
   background: white;
+  margin-bottom: var(--spacing-64);
 }
 
 .bd-container {
-  padding: 50px; /* Adăugăm o umplutură suplimentară pentru a putea vedea mai clar efectul */
+  padding: 50px;
 }
 
 
 [id$="-section"] {
-  scroll-margin-top: 120px; /* Ajustează această valoare dacă este necesar */
+  scroll-margin-top: 120px;
 }
 
 .anchor-links {
   position: relative;
   display: flex;
-  gap: var(--size-32);
+  gap: var(--spacing-32);
 }
 
 a {
@@ -56,16 +56,16 @@ a {
   text-decoration: none;
   color: black;
   font-weight: 600;
-  padding: var(--size-10) var(--size-0);
+  padding: var(--spacing-10) var(--spacing-0);
   display: inline-block;
-  font-size: 16px !important;
-  font-family: var(--font-family-sans) !important;
+  font-size: var(--typography-body-regular-fontSize) !important;
+  font-family: var(--typography-fontFamily-sans) !important;
 }
 
 a::after {
   content: "";
   position: absolute;
-  left: var(--size-0);
+  left: var(--spacing-0);
   bottom: -14px;
   width: 0%;
   height: 3px;
@@ -86,7 +86,7 @@ export const anchorNavItemStyles = css`
 
   :host([active]) {
     display: block;
-    padding: var(--size-0) 15em;
-    margin: var(--size-0) auto;
+    padding: var(--spacing-0) 15em;
+    margin: var(--spacing-0) auto;
   }
 `;

package/src/components/anchor/anchor-nav.js

@@ -2,7 +2,6 @@ import { LitElement, html } from "lit";
 import { tokens } from "../../tokens/tokens.js";
 import { anchorNavStyles } from "./anchor-nav.css.js";
 
-// BdAnchorNavItem
 class BdAnchorNavItem extends HTMLElement {
   constructor() {
     super();

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

@@ -1,13 +1,13 @@
 import { html } from 'lit';
+import '../FAQ/faq.js';
 import '../anchor/anchor-nav.js';
+import '../carousel/carousel.js';
 import '../pricing-cards/pricing-card.js';
 import '../tabs/tabs.js';
-import '../FAQ/faq.js';
-import '../carousel/carousel.js';
 
 export default {
-  title: 'Navigation/Navbar',
-  component: 'bd-anchor-nav',
+  title     : 'Navigation/Navbar',
+  component : 'bd-anchor-nav',
   parameters: {
     docs: {
       description: {
@@ -49,13 +49,13 @@ Folosește elemente \`<bd-anchor-nav-item>\` pentru fiecare link, ce trebuie să
 - \`bd-pricing-container\`
 
 ---
-        `,
-      },
-    },
-  },
+        `
+      }
+    }
+  }
 };
 
-const Template = (args) => html`
+const Template = () => html`
   <bd-anchor-nav>
     <bd-anchor-nav-item title="Anchor 1" id="anchor-1"></bd-anchor-nav-item>
     <bd-anchor-nav-item title="Anchor 2" id="anchor-2"></bd-anchor-nav-item>
@@ -101,7 +101,7 @@ const Template = (args) => html`
           title="Scam Copilot Bot"
           subTitle="Specialized AI chatbot that helps you identify suspicious online interactions so you don’t become a victim"
           modalText="Specialized AI chatbot that helps you identify suspicious online interactions so you don’t become a victim"
-          icon="src/assets/icons/light-carousel-img1.png"
+          icon="/assets/light-carousel-img1.png"
         >
           <h3>Scam Copilot Bot</h3>
           <p>
@@ -118,9 +118,6 @@ const Template = (args) => html`
           </p>
           <h6>Testare Scam Copilot</h6>
         </bd-carousel-item>
-
-        <!-- alte bd-carousel-item-uri identic cu cele din codul tău -->
-
       </bd-carousel-section>
     </section>
 

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

@@ -4,24 +4,24 @@ export default css`
   :host {
     --badge-background-default: #026DFF;
     --badge-font-weight: 700;
-    --badge-font-family: var(--font-family-sans, sans-serif);
+    --badge-font-family: var(--typography-fontFamily-sans, sans-serif);
   }
 
   .badge {
     display: inline-block;
     background-color: var(--color-blue-500);
     color: var(--color-neutral-0);
-    border-radius: var(--size-20);
-    font-size: var(--caption-small);
+    border-radius: var(--spacing-20);
+    font-size: var(--typography-label-extra-small-fontSize);
     font-weight: var(--badge-font-weight);
     font-family: var(--badge-font-family);
-    line-height: var(--size-20);
-    padding: 0 var(--size-12);
+    line-height: var(--spacing-20);
+    padding: 0 var(--spacing-12);
     white-space: nowrap;
     user-select: none;
     vertical-align: middle;
     box-sizing: border-box;
-    bottom: var(--size-4);
+    bottom: var(--spacing-4);
     position: relative
   }
 `;

package/src/components/badge/badge.js

@@ -4,7 +4,6 @@ import badgeCSS from './badge.css.js';
 
 export class BdBadge extends LitElement {
   static properties = {
-    text : { type: String },
     color: { type: String }
   };
 
@@ -23,7 +22,7 @@ export class BdBadge extends LitElement {
   }
 
   render() {
-    return html`<span class="badge">${this.text}</span>`;
+    return html`<span class="badge"><slot></slot></span>`;
   }
 }
 BdBadge.styles = [tokens, badgeCSS];

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

@@ -5,9 +5,9 @@ export default {
   title: 'Atoms/Badge',
   component: 'bd-badge',
   argTypes: {
-    text: {
+    children: {
       control: 'text',
-      description: 'Textul afișat în badge',
+      description: 'Conținutul afișat în interiorul badge-ului (prin slot).',
       defaultValue: 'Badge',
     },
     color: {
@@ -19,18 +19,18 @@ export default {
   parameters: {
     docs: {
       description: {
-        component: 'Un badge simplu care afișează un text cu o culoare de fundal configurabilă.',
+        component: 'Un badge simplu care afișează un text prin slot și are o culoare de fundal configurabilă.',
       },
     },
   },
 };
 
-const Template = ({ text, color }) => html`
-  <bd-badge text="${text}" color="${color}"></bd-badge>
+const Template = ({ children, color }) => html`
+  <bd-badge color="${color}">${children}</bd-badge>
 `;
 
 export const Default = Template.bind({});
 Default.args = {
-  text: 'Badge',
+  children: 'Badge',
   color: '#026DFF',
 };