@repobit/dex-system-design 0.19.2 → 0.21.0

package/src/components/list/list-item/list-item.stories.js

@@ -0,0 +1,79 @@
+import { html } from 'lit';
+import './list-item.js';
+
+export default {
+  title    : 'Components/List/List Item',
+  component: 'bd-li',
+  argTypes : {
+    kind: {
+      control    : { type: 'select' },
+      options    : ['bullet', 'number', 'check', 'none'],
+      description: 'List item marker type'
+    },
+    size: {
+      control    : { type: 'select' },
+      options    : ['sm', 'md', 'lg'],
+      description: 'List item size'
+    },
+    content: {
+      control    : 'text',
+      description: 'List item content'
+    }
+  },
+  parameters: {
+    docs: {
+      description: {
+        component: 'A list item component with customizable markers and styling.'
+      }
+    }
+  }
+};
+
+const Template = (args) => html`
+  <bd-li kind="${args.kind}" size="${args.size}">${args.content}</bd-li>
+`;
+
+export const Default = Template.bind({});
+Default.args = {
+  kind   : 'bullet',
+  size   : 'md',
+  content: 'Default list item with bullet marker'
+};
+
+export const Bullet = Template.bind({});
+Bullet.args = {
+  kind   : 'bullet',
+  content: 'Item with bullet marker'
+};
+
+export const Number = Template.bind({});
+Number.args = {
+  kind   : 'number',
+  content: 'Item with number marker'
+};
+
+export const Check = Template.bind({});
+Check.args = {
+  kind   : 'check',
+  content: 'Item with checkmark'
+};
+
+export const None = Template.bind({});
+None.args = {
+  kind   : 'none',
+  content: 'Item without marker'
+};
+
+export const SizeVariants = () => html`
+  <div style="display: flex; flex-direction: column; gap: 1rem;">
+    <bd-li kind="bullet" size="sm">Small list item</bd-li>
+    <bd-li kind="bullet" size="md">Medium list item</bd-li>
+    <bd-li kind="bullet" size="lg">Large list item</bd-li>
+  </div>
+`;
+
+export const WithRichContent = () => html`
+  <bd-li kind="bullet" size="lg">
+    <strong>Featured item</strong> with additional description text that wraps to multiple lines while maintaining proper alignment with the marker.
+  </bd-li>
+`;

package/src/components/list/list.css.js

@@ -0,0 +1,175 @@
+import { css } from "lit";
+
+export default css`
+@layer bd-components {
+  .bd-list {
+    margin: 0;
+    padding: 0;
+    list-style: none;
+  }
+
+  /* === COUNTER RESET FOR ORDERED LISTS === */
+  .bd-list[type="ordered"] {
+    counter-reset: bd-ordered-counter;
+  }
+
+  /* === ORIENTATION STYLES === */
+  
+  /* Vertical (default) */
+  .bd-list.vertical {
+    display: block;
+  }
+
+  .bd-list.vertical ::slotted(li) {
+    display: list-item;
+    margin-bottom: var(--spacing-8);
+  }
+
+  /* Ordered list markers for vertical */
+  .bd-list[type="ordered"].vertical ::slotted(li) {
+    counter-increment: bd-ordered-counter;
+  }
+
+  .bd-list[type="ordered"].vertical ::slotted(li)::before {
+    content: counter(bd-ordered-counter) ". ";
+    font-weight: var(--typography-fontWeight-semibold);
+    color: var(--color-neutral-600);
+    margin-right: var(--spacing-8);
+  }
+
+  /* Unordered list markers for vertical */
+  .bd-list[type="unordered"].vertical ::slotted(li)::before {
+    content: "•";
+    font-weight: var(--typography-fontWeight-semibold);
+    color: var(--color-neutral-600);
+    margin-right: var(--spacing-8);
+  }
+
+  /* Horizontal */
+  .bd-list.horizontal {
+    display: flex;
+    flex-wrap: wrap;
+    align-items: center;
+    gap: var(--spacing-16);
+  }
+
+  .bd-list.horizontal ::slotted(li) {
+    display: flex;
+    align-items: center;
+    margin: 0;
+  }
+
+  /* Remove markers for horizontal lists */
+  .bd-list.horizontal ::slotted(li)::before {
+    display: none;
+  }
+
+  /* Reset counter for horizontal ordered lists */
+  .bd-list[type="ordered"].horizontal {
+    counter-reset: none;
+  }
+
+  .bd-list[type="ordered"].horizontal ::slotted(li) {
+    counter-increment: unset;
+  }
+
+  /* === SPACING VARIANTS === */
+  
+  .bd-list.sm {
+    margin: var(--spacing-8) 0;
+  }
+
+  .bd-list.md {
+    margin: var(--spacing-16) 0;
+  }
+
+  .bd-list.lg {
+    margin: var(--spacing-24) 0;
+  }
+
+  /* Horizontal spacing adjustments */
+  .bd-list.horizontal.sm {
+    gap: var(--spacing-8);
+  }
+
+  .bd-list.horizontal.md {
+    gap: var(--spacing-16);
+  }
+
+  .bd-list.horizontal.lg {
+    gap: var(--spacing-24);
+  }
+
+  /* === VARIANT STYLES === */
+  
+  .bd-list.compact {
+    margin: var(--spacing-4) 0;
+  }
+
+  .bd-list.compact ::slotted(li) {
+    margin-bottom: var(--spacing-4);
+  }
+
+  .bd-list.spacious {
+    margin: var(--spacing-32) 0;
+  }
+
+  .bd-list.spacious ::slotted(li) {
+    margin-bottom: var(--spacing-12);
+  }
+
+  /* Horizontal variants */
+  .bd-list.horizontal.compact {
+    gap: var(--spacing-4);
+  }
+
+  .bd-list.horizontal.spacious {
+    gap: var(--spacing-32);
+  }
+
+  /* === NESTED LISTS === */
+  
+  .bd-list .bd-list {
+    margin-left: var(--spacing-16);
+    margin-top: var(--spacing-8);
+  }
+
+  /* Nested ordered list counter reset */
+  .bd-list[type="ordered"] .bd-list[type="ordered"] {
+    counter-reset: bd-ordered-nested;
+  }
+
+  /* Reset first/last child margins */
+  .bd-list:first-child {
+    margin-top: 0;
+  }
+
+  .bd-list:last-child {
+    margin-bottom: 0;
+  }
+
+  /* === CUSTOM MARKER STYLES (optional enhancements) === */
+  
+  /* Different marker styles for unordered lists */
+  .bd-list[type="unordered"].circle ::slotted(li)::before {
+    content: "○";
+  }
+
+  .bd-list[type="unordered"].square ::slotted(li)::before {
+    content: "■";
+  }
+
+  .bd-list[type="unordered"].dash ::slotted(li)::before {
+    content: "–";
+  }
+
+  /* Different numbering styles for ordered lists */
+  .bd-list[type="ordered"].lower-alpha ::slotted(li)::before {
+    content: counter(bd-ordered-counter, lower-alpha) ". ";
+  }
+
+  .bd-list[type="ordered"].upper-roman ::slotted(li)::before {
+    content: counter(bd-ordered-counter, upper-roman) ". ";
+  }
+}
+`;

package/src/components/list/list.js

@@ -0,0 +1,44 @@
+import { LitElement, html } from "lit";
+import { tokens } from "../../tokens/tokens.js";
+import listCSS from "./list.css.js";
+
+export class BdList extends LitElement {
+  static properties = {
+    type       : { type: String, reflect: true }, // 'ordered', 'unordered'
+    spacing    : { type: String, reflect: true }, // sm, md, lg
+    variant    : { type: String, reflect: true }, // default, compact, spacious
+    start      : { type: Number, reflect: true }, // start number for ordered list
+    orientation: { type: String, reflect: true } // horizontal, vertical
+  };
+
+  constructor() {
+    super();
+    this.type = "unordered"; // 'ordered' | 'unordered'
+    this.spacing = "md";
+    this.variant = "default";
+    this.start = 1;
+    this.orientation = "vertical";
+  }
+
+  render() {
+    const classes = `bd-list ${this.spacing} ${this.variant} ${this.orientation}`;
+
+    if (this.type === "ordered") {
+      return html`
+        <ol class="${classes}" start="${this.start}">
+          <slot></slot>
+        </ol>
+      `;
+    }
+
+    return html`
+      <ul class="${classes}">
+        <slot></slot>
+      </ul>
+    `;
+  }
+
+  static styles = [tokens, listCSS];
+}
+
+customElements.define("bd-list", BdList);

package/src/components/modal/modal.js

@@ -1,6 +1,8 @@
 import { LitElement, html } from "lit";
 import { tokens } from "../../tokens/tokens.js";
+import "../heading/heading.js";
 import modalCSS from "../modal/modal.css";
+import "../paragraph/paragraph.js";
 
 export class BdModal extends LitElement {
   static properties = {
@@ -10,8 +12,6 @@ export class BdModal extends LitElement {
     modalText: { type: String }
   };
 
-
-
   _onClose() {
     this.dispatchEvent(new CustomEvent("close-modal", { bubbles: true, composed: true }));
   }
@@ -28,14 +28,15 @@ export class BdModal extends LitElement {
           ${this.icon
             ? html`<img src="${this.icon}" alt="icon" class="bd-carousel-modal-icon" />`
             : ""}
-          <h2 id="modal-title">${this.title}</h2>
-<p id="modal-description">${this.modalText}</p>
+          <bd-h as="h2" id="modal-title">${this.title}</bd-h>
+          <bd-p kind="regular" id="modal-description">${this.modalText}</bd-p>
           <button @click="${this._onClose}" aria-label="Close modal">Close</button>
         </div>
       </div>
     `;
   }
 }
+
 BdModal.styles = [tokens, modalCSS];
 
-customElements.define("bd-modal", BdModal);
+customElements.define("bd-modal", BdModal);

package/src/components/paragraph/paragraph.css.js

@@ -1,14 +1,44 @@
 import { css } from "lit";
 
 export default css`
-.bd-font-brand{
-    font-family: var(--typography-fontFamily-sans);
-}
-.bd-font-cod {
-  font-family: var(--font-family-mono);
-}
-
-.bd-font-comp {
-  font-family: 'Arial',sans-serif;
-}
-`;
+  :host {
+    display: block;
+  }
+
+  p {
+    all: unset;
+    display: block;
+    font-family: var(--typography-body-regular-fontFamily, var(--typography-fontFamily-sans));
+    color: var(--color-neutral-900);
+    margin-bottom: var(--spacing-md);
+  }
+
+  /* === Font Size Variants === */
+  :host([kind="large"]) p {
+    font-size: var(--typography-body-large-fontSize);
+    font-weight: var(--typography-body-large-fontWeight);
+    line-height: var(--typography-body-large-lineHeight);
+    letter-spacing: var(--typography-body-large-letterSpacing);
+  }
+
+  :host([kind="regular"]) p {
+    font-size: var(--typography-body-regular-fontSize);
+    font-weight: var(--typography-body-regular-fontWeight);
+    line-height: var(--typography-body-regular-lineHeight);
+    letter-spacing: var(--typography-body-regular-letterSpacing);
+  }
+
+  :host([kind="small"]) p {
+    font-size: var(--typography-body-small-fontSize);
+    font-weight: var(--typography-body-small-fontWeight);
+    line-height: var(--typography-body-small-lineHeight);
+    letter-spacing: var(--typography-body-small-letterSpacing);
+  }
+
+  :host([kind="lead"]) p {
+    font-size: var(--typography-body-lead-fontSize);
+    font-weight: var(--typography-body-lead-fontWeight);
+    line-height: var(--typography-body-lead-lineHeight);
+    letter-spacing: var(--typography-body-lead-letterSpacing);
+  }
+`;

package/src/components/paragraph/paragraph.js

@@ -1,60 +1,22 @@
 import { LitElement, html } from "lit";
 import { tokens } from "../../tokens/tokens.js";
-import textCSS from "../../tokens/typography.css.js";
-import paragraphText from "../paragraph/paragraph.css.js";
+import paragraphCSS from "./paragraph.css.js";
 
-class TextFontBrand extends LitElement {
+export class BdP extends LitElement {
   static properties = {
-    text: { type: String }
+    kind: { type: String, reflect: true }
   };
 
   constructor() {
     super();
-    this.text = "Componenta Text Font Brand.";
-
+    this.kind = "regular";
   }
 
   render() {
-    return html` <p class="bd-font-brand text-display-medium">${this.text}</p> `;
+    return html`<p><slot></slot></p>`;
   }
-}
 
-
-class TextFontCod extends LitElement {
-  static properties = {
-    text: { type: String }
-  };
-
-  constructor() {
-    super();
-    this.text = "Componenta Text Font Cod.";
-  }
-
-  render() {
-    return html` <p class="bd-font-cod">${this.text}</p> `;
-  }
-}
-
-
-class TextFontComp extends LitElement {
-  static properties = {
-    text: { type: String }
-  };
-
-  constructor() {
-    super();
-    this.text = "Componenta Text Font Comp.";
-
-  }
-
-  render() {
-    return html` <p class="bd-font-comp">${this.text}</p> `;
-  }
+  static styles = [tokens, paragraphCSS];
 }
-TextFontBrand.styles = [tokens, paragraphText, textCSS];
-TextFontCod.styles = [tokens, paragraphText, textCSS];
-TextFontComp.styles = [tokens, paragraphText, textCSS];
 
-customElements.define("bd-font-brand", TextFontBrand);
-customElements.define("bd-font-cod", TextFontCod);
-customElements.define("bd-font-comp", TextFontComp);
+customElements.define("bd-p", BdP);

package/src/components/paragraph/paragraph.stories.js

@@ -0,0 +1,235 @@
+import { html } from 'lit';
+import '../cards/card.js';
+import '../heading/heading.js';
+import './paragraph.js';
+
+export default {
+  title    : 'Atoms/Paragraph',
+  component: 'bd-p',
+  argTypes : {
+    kind: {
+      control    : { type: 'select' },
+      options    : ['regular', 'large', 'small', 'lead'],
+      description: 'Paragraph size variant'
+    },
+    content: {
+      control    : 'text',
+      description: 'Paragraph text content'
+    }
+  },
+  parameters: {
+    docs: {
+      description: {
+        component: 'A customizable paragraph component with consistent typography and multiple size variants.'
+      }
+    }
+  }
+};
+
+const Template = ({ kind, content }) => html`
+  <bd-p kind="${kind}">${content}</bd-p>
+`;
+
+export const AllVariants = () => html`
+  <div style="display: flex; flex-direction: column; gap: 2rem; max-width: 600px;">
+    <div>
+      <bd-p kind="lead">Lead Paragraph - This is a lead paragraph with larger text to introduce content.</bd-p>
+    </div>
+    
+    <div>
+      <bd-p kind="large">Large Paragraph - This is a large paragraph for emphasized content that needs more attention.</bd-p>
+    </div>
+    
+    <div>
+      <bd-p kind="regular">Regular Paragraph - This is the standard paragraph size for most body text content throughout the application.</bd-p>
+    </div>
+    
+    <div>
+      <bd-p kind="small">Small Paragraph - This is a small paragraph for secondary information, captions, or less important content.</bd-p>
+    </div>
+  </div>
+`;
+
+export const InCardContext = () => html`
+  <bd-card-section title="Product Features">
+    <bd-card-item 
+      title="Advanced Protection" 
+      icon="/api/placeholder/40/40"
+      align="center"
+    >
+      <bd-p kind="regular">Comprehensive security against malware, ransomware, and online threats with real-time scanning and behavioral analysis.</bd-p>
+      <bd-p kind="small">Includes automatic threat detection and removal</bd-p>
+    </bd-card-item>
+
+    <bd-card-item 
+      title="Privacy Features" 
+      icon="/api/placeholder/40/40"
+      align="center"
+    >
+      <bd-p kind="lead">Protect your personal information with our complete privacy suite.</bd-p>
+      <bd-p kind="regular">VPN, password manager, and webcam protection work together to keep your data secure from unauthorized access.</bd-p>
+    </bd-card-item>
+
+    <bd-card-item 
+      title="Performance Optimization" 
+      icon="/api/placeholder/40/40"
+      align="center"
+    >
+      <bd-p kind="regular">Lightweight design ensures minimal impact on system resources while providing maximum protection.</bd-p>
+      <bd-p kind="small">Uses less than 2% CPU on average</bd-p>
+      <bd-p kind="small">Memory usage: ~150MB</bd-p>
+    </bd-card-item>
+  </bd-card-section>
+`;
+InCardContext.parameters = {
+  docs: {
+    description: {
+      story: 'Paragraph variants used within card components to demonstrate real-world usage patterns.'
+    }
+  }
+};
+
+export const MixedCardLayouts = () => html`
+  <div style="display: flex; flex-direction: column; gap: 3rem;">
+    
+    <bd-card-section title="Security Solutions">
+      <bd-card-item 
+        title="Antivirus Protection" 
+        align="start"
+      >
+        <bd-p kind="regular">Real-time protection against viruses, malware, and spyware with advanced heuristic detection.</bd-p>
+        <bd-p kind="small">Updated virus definitions multiple times daily</bd-p>
+      </bd-card-item>
+
+      <bd-card-item 
+        title="Firewall" 
+        align="start"
+      >
+        <bd-p kind="large">Intelligent firewall monitors all network traffic</bd-p>
+        <bd-p kind="regular">Blocks unauthorized access attempts and suspicious connections automatically.</bd-p>
+      </bd-card-item>
+
+      <bd-card-item 
+        title="Web Protection" 
+        align="start"
+      >
+        <bd-p kind="regular">Safe browsing technology blocks malicious websites and phishing attempts before they can harm your system.</bd-p>
+        <bd-p kind="small">Protects against zero-day threats</bd-p>
+      </bd-card-item>
+    </bd-card-section>
+
+    <bd-card-section title="Additional Features">
+      <bd-card-item 
+        title="Parental Control" 
+        icon="/api/placeholder/40/40"
+        align="center"
+      >
+        <bd-p kind="lead">Keep your family safe online</bd-p>
+        <bd-p kind="regular">Monitor and control internet usage, block inappropriate content, and set time limits for children's devices.</bd-p>
+      </bd-card-item>
+
+      <bd-card-item 
+        title="File Encryption" 
+        icon="/api/placeholder/40/40"
+        align="center"
+      >
+        <bd-p kind="regular">Secure your sensitive files with military-grade encryption to prevent unauthorized access.</bd-p>
+        <bd-p kind="small">AES-256 encryption standard</bd-p>
+      </bd-card-item>
+    </bd-card-section>
+
+  </div>
+`;
+MixedCardLayouts.parameters = {
+  docs: {
+    description: {
+      story: 'Different card layouts showing various paragraph variants in context with centered and start-aligned content.'
+    }
+  }
+};
+
+export const CardWithDifferentParagraphStyles = () => html`
+  <bd-card-section title="Feature Details">
+    <bd-card-item 
+      title="Complete Security Suite" 
+      align="center"
+    >
+      <bd-p kind="lead">All-in-one protection for your digital life</bd-p>
+      <bd-p kind="regular">Our comprehensive security suite combines multiple layers of protection to safeguard your devices, data, and privacy from evolving cyber threats.</bd-p>
+      <bd-p kind="small">Compatible with Windows, Mac, Android, and iOS</bd-p>
+    </bd-card-item>
+
+    <bd-card-item 
+      title="System Requirements" 
+      align="start"
+    >
+      <bd-p kind="large">Minimum system specifications</bd-p>
+      <bd-p kind="regular">To ensure optimal performance, your system should meet the following requirements:</bd-p>
+      <bd-p kind="small">• Operating System: Windows 10/11 or macOS 10.14+</bd-p>
+      <bd-p kind="small">• Memory: 2GB RAM minimum</bd-p>
+      <bd-p kind="small">• Storage: 2.5GB available space</bd-p>
+      <bd-p kind="small">• Internet connection for updates</bd-p>
+    </bd-card-item>
+
+    <bd-card-item 
+      title="Technical Support" 
+      align="center"
+    >
+      <bd-p kind="regular">Our dedicated support team is available 24/7 to help with any issues or questions you may have.</bd-p>
+      <bd-p kind="small">Response time: under 2 hours for critical issues</bd-p>
+      <bd-p kind="small">Multiple support channels available</bd-p>
+    </bd-card-item>
+  </bd-card-section>
+`;
+CardWithDifferentParagraphStyles.parameters = {
+  docs: {
+    description: {
+      story: 'Cards demonstrating the use of different paragraph styles (lead, large, regular, small) for varied content hierarchy.'
+    }
+  }
+};
+
+export const Regular = Template.bind({});
+Regular.args = {
+  kind   : 'regular',
+  content: 'This is a regular paragraph with standard body text size.'
+};
+
+export const Large = Template.bind({});
+Large.args = {
+  kind   : 'large',
+  content: 'This is a large paragraph for emphasized content.'
+};
+
+export const Small = Template.bind({});
+Small.args = {
+  kind   : 'small',
+  content: 'This is a small paragraph for secondary information.'
+};
+
+export const Lead = Template.bind({});
+Lead.args = {
+  kind   : 'lead',
+  content: 'This is a lead paragraph for introductory text.'
+};
+
+export const WithHeadings = () => html`
+  <div style="max-width: 600px;">
+    <bd-h as="h1">Main Section Title</bd-h>
+    <bd-p kind="lead">This lead paragraph introduces the main section.</bd-p>
+    
+    <bd-h as="h2">Subsection Heading</bd-h>
+    <bd-p kind="regular">This regular paragraph contains the main content details.</bd-p>
+  </div>
+`;
+
+export const ContentHierarchy = () => html`
+  <div style="max-width: 600px;">
+    <bd-h as="h1">Product Overview</bd-h>
+    <bd-p kind="lead">Our product offers comprehensive security solutions.</bd-p>
+    
+    <bd-p kind="regular">With real-time threat detection and automatic updates.</bd-p>
+    
+    <bd-p kind="small">System requirements may vary based on the specific product version.</bd-p>
+  </div>
+`;