@repobit/dex-system-design 0.20.0 → 0.21.0

package/src/components/cards/card.stories.js

@@ -1,6 +1,6 @@
 import { html } from 'lit';
+import '../heading/heading.js';
 import './card.js';
-
 export default {
   title        : 'Components/Card',
   component    : 'bd-card-section',
@@ -25,10 +25,10 @@ const Template = (args) => html`
       icon="/assets/device_protection.png"
       align="${args.align}"
     >
-      <p>
+      <bd-p kind="small">
         Specialized AI chatbot that helps you identify suspicious online
         interactions so you don't become a victim.
-      </p>
+      </bd-p>
     </bd-card-item>
     
     <bd-card-item 
@@ -36,10 +36,10 @@ const Template = (args) => html`
       icon="/assets/privacy_protection.png"
       align="${args.align}"
     >
-      <p>
+      <bd-p kind="small">
         Specialized AI chatbot that helps you identify suspicious online
         interactions so you don't become a victim.
-      </p>
+      </bd-p>
     </bd-card-item>
     
     <bd-card-item 
@@ -47,10 +47,10 @@ const Template = (args) => html`
       icon="/assets/identity_protection.png"
       align="${args.align}"
     >
-      <p>
+      <bd-p kind="small">
         Stay informed with real-time alerts about ongoing scam outbreaks
         detected in your area automatically.
-      </p>
+      </bd-p>
     </bd-card-item>
     
     <bd-card-item 
@@ -58,10 +58,10 @@ const Template = (args) => html`
       icon="/assets/financial_insurance.png"
       align="${args.align}"
     >
-      <p>
+      <bd-p kind="small">
         Focused on browsing activities, it specializes in detecting the newest
         scam patterns and tactics.
-      </p>
+      </bd-p>
     </bd-card-item>
   </bd-card-section>
 `;
@@ -141,7 +141,7 @@ export const MixedContentTypes = () => html`
       icon="/assets/device_protection.png"
       align="start"
     >
-      <p>This card has both icon, title and description text below.</p>
+      <bd-p kind="small">This card has both icon, title and description text below.</bd-p>
     </bd-card-item>
     
     <bd-card-item 
@@ -155,7 +155,7 @@ export const MixedContentTypes = () => html`
       icon="/assets/identity_protection.png"
       align="start"
     >
-      <p>This card includes detailed description about the feature.</p>
+      <bd-p kind="small">This card includes detailed description about the feature.</bd-p>
     </bd-card-item>
     
     <bd-card-item 
@@ -173,7 +173,7 @@ export const MixedContentTypesCentered = () => html`
       icon="/assets/device_protection.png"
       align="center"
     >
-      <p>This card has both icon, title and description text below.</p>
+      <bd-p kind="small">This card has both icon, title and description text below.</bd-p>
     </bd-card-item>
     
     <bd-card-item 
@@ -187,7 +187,7 @@ export const MixedContentTypesCentered = () => html`
       icon="/assets/identity_protection.png"
       align="center"
     >
-      <p>This card includes detailed description about the feature.</p>
+      <bd-p kind="small">This card includes detailed description about the feature.</bd-p>
     </bd-card-item>
     
     <bd-card-item 
@@ -217,7 +217,7 @@ export const SingleCard = (args) => html`
       icon="${args.icon}"
       align="${args.align}"
     >
-      <p>${args.content}</p>
+      <bd-p kind="small">${args.content}</bd-p>
     </bd-card-item>
   </bd-card-section>
 `;
@@ -267,7 +267,7 @@ export const MultipleCardsGrid = (args) => html`
         icon="${args.icon}"
         align="${args.align}"
       >
-        <p>${args.content} This is card number ${i + 1}.</p>
+        <bd-p kind="small">${args.content} This is card number ${i + 1}.</bd-p>
       </bd-card-item>
     `)}
   </bd-card-section>
@@ -297,7 +297,7 @@ export const CardItemVariations = () => html`
         icon="/assets/device_protection.png"
         align="start"
       >
-        <p>This card has both an icon and a title with description.</p>
+        <bd-p kind="small">This card has both an icon and a title with description.</bd-p>
       </bd-card-item>
       
       <bd-card-item 
@@ -310,18 +310,18 @@ export const CardItemVariations = () => html`
         title="Title Only"
         align="start"
       >
-        <p>This card has only a title without an icon, aligned to start.</p>
+        <bd-p kind="small">This card has only a title without an icon, aligned to start.</bd-p>
       </bd-card-item>
       
       <bd-card-item 
         icon="/assets/privacy_protection.png"
         align="start"
       >
-        <p>This card has only an icon without a title, aligned to start.</p>
+        <bd-p kind="small">This card has only an icon without a title, aligned to start.</bd-p>
       </bd-card-item>
       
       <bd-card-item align="start">
-        <p>This card has neither icon nor title - just content, aligned to start.</p>
+        <bd-p kind="small">This card has neither icon nor title - just content, aligned to start.</bd-p>
       </bd-card-item>
     </bd-card-section>
 
@@ -332,7 +332,7 @@ export const CardItemVariations = () => html`
         icon="/assets/device_protection.png"
         align="center"
       >
-        <p>This card has both an icon and a title with description.</p>
+        <bd-p kind="small">This card has both an icon and a title with description.</bd-p>
       </bd-card-item>
       
       <bd-card-item 
@@ -345,18 +345,18 @@ export const CardItemVariations = () => html`
         title="Title Only"
         align="center"
       >
-        <p>This card has only a title without an icon, centered alignment.</p>
+        <bd-p kind="small">This card has only a title without an icon, centered alignment.</bd-p>
       </bd-card-item>
       
       <bd-card-item 
         icon="/assets/privacy_protection.png"
         align="center"
       >
-        <p>This card has only an icon without a title, centered alignment.</p>
+        <bd-p kind="small">This card has only an icon without a title, centered alignment.</bd-p>
       </bd-card-item>
       
       <bd-card-item align="center">
-        <p>This card has neither icon nor title - just content, centered alignment.</p>
+        <bd-p kind="small">This card has neither icon nor title - just content, centered alignment.</bd-p>
       </bd-card-item>
     </bd-card-section>
   </div>
@@ -371,16 +371,16 @@ export const LongContent = () => html`
         icon="/assets/identity_protection.png"
         align="start"
       >
-        <p>
+        <bd-p kind="small">
           This is a much longer description that might wrap across multiple lines.
           It provides comprehensive details about the feature, its benefits, 
           and how it helps protect users from various types of online threats 
           and scams in today's digital landscape.
-        </p>
-        <p>
+        </bd-p>
+        <bd-p kind="small">
           Additional paragraph to demonstrate how multiple paragraphs of content
           would appear within the card component.
-        </p>
+        </bd-p>
       </bd-card-item>
       
       <bd-card-item 
@@ -388,7 +388,7 @@ export const LongContent = () => html`
         icon="/assets/financial_insurance.png"
         align="start"
       >
-        <p>Regular content with an exceptionally long title, aligned to start.</p>
+        <bd-p kind="small">Regular content with an exceptionally long title, aligned to start.</bd-p>
       </bd-card-item>
     </bd-card-section>
 
@@ -399,16 +399,16 @@ export const LongContent = () => html`
         icon="/assets/identity_protection.png"
         align="center"
       >
-        <p>
+        <bd-p kind="small">
           This is a much longer description that might wrap across multiple lines.
           It provides comprehensive details about the feature, its benefits, 
           and how it helps protect users from various types of online threats 
           and scams in today's digital landscape.
-        </p>
-        <p>
+        </bd-p>
+        <bd-p kind="small">
           Additional paragraph to demonstrate how multiple paragraphs of content
           would appear within the card component.
-        </p>
+        </bd-p>
       </bd-card-item>
       
       <bd-card-item 
@@ -416,7 +416,7 @@ export const LongContent = () => html`
         icon="/assets/financial_insurance.png"
         align="center"
       >
-        <p>Regular content with an exceptionally long title, centered alignment.</p>
+        <bd-p kind="small">Regular content with an exceptionally long title, centered alignment.</bd-p>
       </bd-card-item>
     </bd-card-section>
   </div>
@@ -429,8 +429,8 @@ export const MixedAlignment = () => html`
       icon="/assets/device_protection.png"
       align="start"
     >
-      <p>This card is left aligned with content starting from the left side.</p>
-      <p>Perfect for longer text content that reads better when left aligned.</p>
+      <bd-p kind="small">This card is left aligned with content starting from the left side.</bd-p>
+      <bd-p kind="small">Perfect for longer text content that reads better when left aligned.</bd-p>
     </bd-card-item>
     
     <bd-card-item 
@@ -438,8 +438,8 @@ export const MixedAlignment = () => html`
       icon="/assets/privacy_protection.png"
       align="center"
     >
-      <p>This card is center aligned with everything centered.</p>
-      <p>Great for highlight features or call-to-action cards.</p>
+      <bd-p kind="small">This card is center aligned with everything centered.</bd-p>
+      <bd-p kind="small">Great for highlight features or call-to-action cards.</bd-p>
     </bd-card-item>
     
     <bd-card-item 
@@ -447,7 +447,7 @@ export const MixedAlignment = () => html`
       icon="/assets/identity_protection.png"
       align="start"
     >
-      <p>Another left aligned card with detailed description.</p>
+      <bd-p kind="small">Another left aligned card with detailed description.</bd-p>
     </bd-card-item>
     
     <bd-card-item 
@@ -455,7 +455,7 @@ export const MixedAlignment = () => html`
       icon="/assets/financial_insurance.png"
       align="center"
     >
-      <p>Another center aligned card for balanced presentation.</p>
+      <bd-p kind="small">Another center aligned card for balanced presentation.</bd-p>
     </bd-card-item>
   </bd-card-section>
 `;
@@ -464,25 +464,25 @@ export const AlignmentComparison = () => html`
   <bd-card-section title="Alignment Comparison">
     <div style="display: grid; grid-template-columns: 1fr 1fr; gap: 2rem; margin-bottom: 2rem;">
       <div>
-        <h3 style="text-align: center; color: #333;">Start Aligned</h3>
+        <bd-h as="h4" style="text-align: center; color: #333; padding: 10px 0;">Start Aligned</bd-h>
         <bd-card-item 
           title="Start Aligned Example"
           icon="/assets/device_protection.png"
           align="start"
         >
-          <p>This card shows start alignment where content begins from the left.</p>
-          <p>Ideal for readability and longer text content.</p>
+          <bd-p kind="small">This card shows start alignment where content begins from the left.</bd-p>
+          <bd-p kind="small">Ideal for readability and longer text content.</bd-p>
         </bd-card-item>
       </div>
       <div>
-        <h3 style="text-align: center; color: #333;">Center Aligned</h3>
+        <bd-h as="h4" style="text-align: center; color: #333; padding: 10px 0;">Center Aligned</bd-h>
         <bd-card-item 
           title="Center Aligned Example"
           icon="/assets/device_protection.png"
           align="center"
         >
-          <p>This card shows center alignment with balanced presentation.</p>
-          <p>Perfect for feature highlights and visual balance.</p>
+          <bd-p kind="small">This card shows center alignment with balanced presentation.</bd-p>
+          <bd-p kind="small">Perfect for feature highlights and visual balance.</bd-p>
         </bd-card-item>
       </div>
     </div>
@@ -496,8 +496,8 @@ export const ResponsiveAlignment = () => html`
       icon="/assets/device_protection.png"
       align="start"
     >
-      <p>This card maintains start alignment across all screen sizes.</p>
-      <p>On mobile devices, the content will still be aligned to the start.</p>
+      <bd-p kind="small">This card maintains start alignment across all screen sizes.</bd-p>
+      <bd-p kind="small">On mobile devices, the content will still be aligned to the start.</bd-p>
     </bd-card-item>
     
     <bd-card-item 
@@ -505,8 +505,8 @@ export const ResponsiveAlignment = () => html`
       icon="/assets/privacy_protection.png"
       align="center"
     >
-      <p>This card maintains center alignment across all screen sizes.</p>
-      <p>On mobile devices, the content will remain centered for consistency.</p>
+      <bd-p kind="small">This card maintains center alignment across all screen sizes.</bd-p>
+      <bd-p kind="small">On mobile devices, the content will remain centered for consistency.</bd-p>
     </bd-card-item>
   </bd-card-section>
 `;

package/src/components/carousel/carousel.css.js

@@ -9,6 +9,8 @@ export default css`
     --bd-accesibility-focus: var(--color-blue-800);
   }
 
+
+  p{ font-size: 40px;}
   .bd-carousel {
     display: block;
     align-items: center;
@@ -47,6 +49,9 @@ export default css`
     margin-bottom: 50px;
     margin-top: 50px;
   }
+
+  .bd-heading{
+  padding: 20px}
   .bd-carousel-container {
     display: flex;
     flex-direction: column;
@@ -179,11 +184,13 @@ export default css`
     z-index: 2;
   }
 
-  .bd-box h3 {
+  .bd-box bd-h {
     font-size: var(--spacing-18);
     margin: var(--spacing-0) var(--spacing-0) 0.5em var(--spacing-0);
     font-weight: 600;
     font-family: var(--typography-fontFamily-sans);
+      padding: 10px 0; /* Adaugă aici */
+
   }
 
   .bd-box p {

package/src/components/carousel/carousel.js

@@ -2,7 +2,6 @@ import { LitElement, html } from "lit";
 import { tokens } from "../../tokens/tokens.js";
 import carouselCSS from "../carousel/carousel.css.js";
 import "../modal/modal.js";
-
 export class CarouselItem extends LitElement {
   static properties = {
     icon     : { type: String },

package/src/components/carousel/carousel.stories.js

@@ -1,4 +1,7 @@
 import { html } from "lit";
+import "../heading/heading.js";
+import "../paragraph/paragraph.js";
+
 import "./carousel.js";
 
 export default {
@@ -69,7 +72,7 @@ export default {
 const renderParagraphs = (text) =>
   text
     ? text.split("\n\n").map(
-      (paragraph) => html`<p>${paragraph}</p>`
+      (paragraph) => html`<bd-p>${paragraph}</bd-p>`
     )
     : null;
 
@@ -81,7 +84,7 @@ const Template = (args) => html`
       modalText="${args.item1ModalText}"
       icon="${args.item1Icon}"
     >
-      <h3>${args.item1Title}</h3>
+      <bd-h as="h4" padding="10px 0">${args.item1Title}</bd-h>
       ${renderParagraphs(args.item1Content)}
     </bd-carousel-item>
 
@@ -91,7 +94,7 @@ const Template = (args) => html`
       modalText="${args.item2ModalText}"
       icon="${args.item2Icon}"
     >
-      <h3>${args.item2Title}</h3>
+      <bd-h as="h4" padding="10px 0">${args.item2Title}</bd-h>
       ${renderParagraphs(args.item2Content)}
     </bd-carousel-item>
 
@@ -101,7 +104,7 @@ const Template = (args) => html`
       modalText="${args.item3ModalText}"
       icon="${args.item3Icon}"
     >
-      <h3>${args.item3Title}</h3>
+      <bd-h as="h4" padding="10px 0">${args.item3Title}</bd-h>
       ${renderParagraphs(args.item3Content)}
     </bd-carousel-item>
 
@@ -111,7 +114,7 @@ const Template = (args) => html`
       modalText="${args.item4ModalText}"
       icon="${args.item4Icon}"
     >
-      <h3>${args.item4Title}</h3>
+      <bd-h as="h4" padding="10px 0">${args.item4Title}</bd-h>
       ${renderParagraphs(args.item4Content)}
     </bd-carousel-item>
 
@@ -121,7 +124,7 @@ const Template = (args) => html`
       modalText="${args.item5ModalText}"
       icon="${args.item5Icon}"
     >
-      <h3>${args.item5Title}</h3>
+      <bd-h as="h4" padding="10px 0">${args.item5Title}</bd-h>
       ${renderParagraphs(args.item5Content)}
     </bd-carousel-item>
 
@@ -131,7 +134,7 @@ const Template = (args) => html`
       modalText="${args.item6ModalText}"
       icon="${args.item6Icon}"
     >
-      <h3>${args.item6Title}</h3>
+      <bd-h as="h4" padding="10px 0">${args.item6Title}</bd-h>
       ${renderParagraphs(args.item6Content)}
     </bd-carousel-item>
 
@@ -141,7 +144,7 @@ const Template = (args) => html`
       modalText="${args.item7ModalText}"
       icon="${args.item7Icon}"
     >
-      <h3>${args.item7Title}</h3>
+      <bd-h as="h4" padding="10px 0">${args.item7Title}</bd-h>
       ${renderParagraphs(args.item7Content)}
     </bd-carousel-item>
 
@@ -151,7 +154,7 @@ const Template = (args) => html`
       modalText="${args.item8ModalText}"
       icon="${args.item8Icon}"
     >
-      <h3>${args.item8Title}</h3>
+      <bd-h as="h4" padding="10px 0">${args.item8Title}</bd-h>
       ${renderParagraphs(args.item8Content)}
     </bd-carousel-item>
   </bd-carousel-section>
@@ -163,11 +166,11 @@ Default.args = {
 
   item1Title: "Scam Copilot Bot",
   item1SubTitle:
-    "Specialized AI chatbot that helps you identify suspicious online interactions so you don’t become a victim",
+    "Specialized AI chatbot that helps you identify suspicious online interactions so you don't become a victim",
   item1ModalText:
-    "Specialized AI chatbot that helps you identify suspicious online interactions so you don’t become a victim",
+    "Specialized AI chatbot that helps you identify suspicious online interactions so you don't become a victim",
   item1Icon   : "/assets/light-carousel-img1.png",
-  item1Content: `Specialized AI chatbot that helps you identify suspicious online interactions so you don’t become a victim.\n\nSpecialized AI chatbot that helps you identify suspicious online interactions so you don’t become a victim.\n\nTest Scam Copilot Bot`,
+  item1Content: `Specialized AI chatbot that helps you identify suspicious online interactions so you don't become a victim.\n\nSpecialized AI chatbot that helps you identify suspicious online interactions so you don't become a victim.\n\nTest Scam Copilot Bot`,
 
   item2Title    : "Scam Wave Alerts",
   item2SubTitle : "Proactively informs you about scam outbreaks in your region",
@@ -218,12 +221,13 @@ Default.args = {
     "A platform where users can report scams and share experiences to help protect others",
   item7Icon   : "/assets/light-carousel-img1.png",
   item7Content: "A platform where users can report scams and share experiences to help protect others.",
-  item8Title  : "Fraud Prevention Workshops",
+
+  item8Title: "Fraud Prevention Workshops",
   item8SubTitle:
-"Interactive workshops that educate users on identifying and avoiding scams",
+    "Interactive workshops that educate users on identifying and avoiding scams",
   item8ModalText:
-"Interactive workshops that educate users on identifying and avoiding scams",
+    "Interactive workshops that educate users on identifying and avoiding scams",
   item8Icon: "/assets/light-carousel-img1.png",
   item8Content:
-"Interactive workshops that educate users on identifying and avoiding scams."
-};
+    "Interactive workshops that educate users on identifying and avoiding scams."
+};

package/src/components/display/display.css.js

@@ -0,0 +1,68 @@
+import { css } from "lit";
+
+export default css`
+  @layer bd-components {
+    .bd-display {
+      margin: 0;
+      padding: 0;
+      font-family: var(--typography-display-lg-fontFamily);
+      color: var(--color-neutral-900);
+    }
+
+    /* 3xl - Largest display */
+    .bd-display['3xl'],
+    .bd-display.k3xl {
+      font-size: var(--typography-display-3xl-fontSize);
+      font-weight: var(--typography-display-3xl-fontWeight);
+      line-height: var(--typography-display-3xl-lineHeight);
+      letter-spacing: var(--typography-display-3xl-letterSpacing);
+      font-family: var(--typography-display-3xl-fontFamily);
+    }
+
+    /* 2xl */
+    .bd-display['2xl'],
+    .bd-display.k2xl {
+      font-size: var(--typography-display-2xl-fontSize);
+      font-weight: var(--typography-display-2xl-fontWeight);
+      line-height: var(--typography-display-2xl-lineHeight);
+      letter-spacing: var(--typography-display-2xl-letterSpacing);
+      font-family: var(--typography-display-2xl-fontFamily);
+    }
+
+    /* xl */
+    .bd-display.xl {
+      font-size: var(--typography-display-xl-fontSize);
+      font-weight: var(--typography-display-xl-fontWeight);
+      line-height: var(--typography-display-xl-lineHeight);
+      letter-spacing: var(--typography-display-xl-letterSpacing);
+      font-family: var(--typography-display-xl-fontFamily);
+    }
+
+    /* lg */
+    .bd-display.lg {
+      font-size: var(--typography-display-lg-fontSize);
+      font-weight: var(--typography-display-lg-fontWeight);
+      line-height: var(--typography-display-lg-lineHeight);
+      letter-spacing: var(--typography-display-lg-letterSpacing);
+      font-family: var(--typography-display-lg-fontFamily);
+    }
+
+    /* md */
+    .bd-display.md {
+      font-size: var(--typography-display-md-fontSize);
+      font-weight: var(--typography-display-md-fontWeight);
+      line-height: var(--typography-display-md-lineHeight);
+      letter-spacing: var(--typography-display-md-letterSpacing);
+      font-family: var(--typography-display-md-fontFamily);
+    }
+
+    /* sm - Smallest display */
+    .bd-display.sm {
+      font-size: var(--typography-display-sm-fontSize);
+      font-weight: var(--typography-display-sm-fontWeight);
+      line-height: var(--typography-display-sm-lineHeight);
+      letter-spacing: var(--typography-display-sm-letterSpacing);
+      font-family: var(--typography-display-sm-fontFamily);
+    }
+  }
+`;

package/src/components/display/display.js

@@ -0,0 +1,26 @@
+import { LitElement, html } from "lit";
+import { tokens } from "../../tokens/tokens.js";
+import displayCSS from "./display.css.js";
+
+export class BdDisplay extends LitElement {
+  static properties = {
+    kind: { type: String, reflect: true } // "3xl", "2xl", "xl", "lg", "md", "sm"
+  };
+
+  constructor() {
+    super();
+    this.kind = "lg"; // Default medium display
+  }
+
+  render() {
+    return html`
+      <div class="bd-display ${this.kind}">
+        <slot></slot>
+      </div>
+    `;
+  }
+
+  static styles = [tokens, displayCSS];
+}
+
+customElements.define("bd-display", BdDisplay);