@repobit/dex-system-design 0.19.1 → 0.20.0

package/src/components/cards/card.js

@@ -0,0 +1,79 @@
+import { LitElement, html } from "lit";
+import { tokens } from "../../tokens/tokens.js";
+import carouselCSS from "./card.css.js";
+
+class Card extends LitElement {
+  static properties = {
+    title: { type: String }
+  };
+
+  constructor() {
+    super();
+    this.title = "";
+  }
+
+  render() {
+    return html`
+    <section class="bd-light-carousel-s">
+      ${this.title
+        ? html`
+            <div class="bd-header-light-carousel-s">
+              <h1 class="bd-section-title-s">${this.title}</h1>
+            </div>
+          `
+        : null}
+      <div class="bd-light-carousel-track-s">
+        <slot></slot>
+      </div>
+    </section>
+  `;
+  }
+}
+
+class CardItem extends LitElement {
+  static properties = {
+    title: { type: String },
+    icon : { type: String },
+    align: { type: String }
+  };
+
+  constructor() {
+    super();
+    this.title = "";
+    this.icon = "";
+    this.align = "start";
+  }
+
+  render() {
+    const isCentered = this.align === "center";
+    const hasContent = this.innerHTML.trim() !== '';
+
+    return html`
+      <div class="bd-light-box-s ${isCentered ? 'bd-light-box-center' : ''} ${!hasContent ? 'bd-light-box-no-content' : ''}">
+        <div class="bd-light-box-header-s ${isCentered ? 'bd-light-box-header-center' : ''}">
+          ${this.icon
+            ? html`<img
+                src="${this.icon}"
+                alt="icon"
+                class="bd-light-icon-s"
+              />`
+            : ""}
+        </div>
+        ${this.title
+          ? html`
+              <div class="bd-light-title-badge-wrapper-s ${!hasContent ? 'bd-light-title-no-content' : ''}">
+                <h3>${this.title}</h3>
+              </div>
+            `
+          : ""}
+        <slot></slot>
+      </div>
+    `;
+  }
+}
+
+Card.styles = [tokens, carouselCSS];
+CardItem.styles = [tokens, carouselCSS];
+
+customElements.define("bd-card-item", CardItem);
+customElements.define("bd-card-section", Card);

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

@@ -0,0 +1,512 @@
+import { html } from 'lit';
+import './card.js';
+
+export default {
+  title        : 'Components/Card',
+  component    : 'bd-card-section',
+  subcomponents: { 'bd-card-item': 'bd-card-item' },
+  argTypes     : {
+    title: {
+      control    : 'text',
+      description: 'Section title (optional)'
+    },
+    align: {
+      control    : { type: 'select' },
+      options    : ['start', 'center'],
+      description: 'Content alignment for card items'
+    }
+  }
+};
+
+const Template = (args) => html`
+  <bd-card-section title="${args.title}">
+    <bd-card-item 
+      title="Scam Copilot Chatbot" 
+      icon="/assets/device_protection.png"
+      align="${args.align}"
+    >
+      <p>
+        Specialized AI chatbot that helps you identify suspicious online
+        interactions so you don't become a victim.
+      </p>
+    </bd-card-item>
+    
+    <bd-card-item 
+      title="Privacy Protection" 
+      icon="/assets/privacy_protection.png"
+      align="${args.align}"
+    >
+      <p>
+        Specialized AI chatbot that helps you identify suspicious online
+        interactions so you don't become a victim.
+      </p>
+    </bd-card-item>
+    
+    <bd-card-item 
+      title="Scam Wave Alerts" 
+      icon="/assets/identity_protection.png"
+      align="${args.align}"
+    >
+      <p>
+        Stay informed with real-time alerts about ongoing scam outbreaks
+        detected in your area automatically.
+      </p>
+    </bd-card-item>
+    
+    <bd-card-item 
+      title="Online Scam Protection" 
+      icon="/assets/financial_insurance.png"
+      align="${args.align}"
+    >
+      <p>
+        Focused on browsing activities, it specializes in detecting the newest
+        scam patterns and tactics.
+      </p>
+    </bd-card-item>
+  </bd-card-section>
+`;
+
+export const Default = Template.bind({});
+Default.args = {
+  title: 'Security Features',
+  align: 'start'
+};
+
+export const CenterAligned = Template.bind({});
+CenterAligned.args = {
+  title: 'Security Features - Centered',
+  align: 'center'
+};
+
+export const IconTitleOnly = () => html`
+  <bd-card-section title="Icon + Title Only Cards">
+    <bd-card-item 
+      title="Device Protection"
+      icon="/assets/device_protection.png"
+      align="start"
+    ></bd-card-item>
+    
+    <bd-card-item 
+      title="Privacy Shield"
+      icon="/assets/privacy_protection.png"
+      align="start"
+    ></bd-card-item>
+    
+    <bd-card-item 
+      title="Identity Guard"
+      icon="/assets/identity_protection.png"
+      align="start"
+    ></bd-card-item>
+    
+    <bd-card-item 
+      title="Financial Safety"
+      icon="/assets/financial_insurance.png"
+      align="start"
+    ></bd-card-item>
+  </bd-card-section>
+`;
+
+export const IconTitleOnlyCentered = () => html`
+  <bd-card-section title="Icon + Title Only - Centered">
+    <bd-card-item 
+      title="Device Protection"
+      icon="/assets/device_protection.png"
+      align="center"
+    ></bd-card-item>
+    
+    <bd-card-item 
+      title="Privacy Shield"
+      icon="/assets/privacy_protection.png"
+      align="center"
+    ></bd-card-item>
+    
+    <bd-card-item 
+      title="Identity Guard"
+      icon="/assets/identity_protection.png"
+      align="center"
+    ></bd-card-item>
+    
+    <bd-card-item 
+      title="Financial Safety"
+      icon="/assets/financial_insurance.png"
+      align="center"
+    ></bd-card-item>
+  </bd-card-section>
+`;
+
+export const MixedContentTypes = () => html`
+  <bd-card-section title="Mixed Content Types">
+    <bd-card-item 
+      title="With Description"
+      icon="/assets/device_protection.png"
+      align="start"
+    >
+      <p>This card has both icon, title and description text below.</p>
+    </bd-card-item>
+    
+    <bd-card-item 
+      title="Icon + Title Only"
+      icon="/assets/privacy_protection.png"
+      align="start"
+    ></bd-card-item>
+    
+    <bd-card-item 
+      title="Another With Description"
+      icon="/assets/identity_protection.png"
+      align="start"
+    >
+      <p>This card includes detailed description about the feature.</p>
+    </bd-card-item>
+    
+    <bd-card-item 
+      title="Another Icon Only"
+      icon="/assets/financial_insurance.png"
+      align="start"
+    ></bd-card-item>
+  </bd-card-section>
+`;
+
+export const MixedContentTypesCentered = () => html`
+  <bd-card-section title="Mixed Content Types - Centered">
+    <bd-card-item 
+      title="With Description"
+      icon="/assets/device_protection.png"
+      align="center"
+    >
+      <p>This card has both icon, title and description text below.</p>
+    </bd-card-item>
+    
+    <bd-card-item 
+      title="Icon + Title Only"
+      icon="/assets/privacy_protection.png"
+      align="center"
+    ></bd-card-item>
+    
+    <bd-card-item 
+      title="Another With Description"
+      icon="/assets/identity_protection.png"
+      align="center"
+    >
+      <p>This card includes detailed description about the feature.</p>
+    </bd-card-item>
+    
+    <bd-card-item 
+      title="Another Icon Only"
+      icon="/assets/financial_insurance.png"
+      align="center"
+    ></bd-card-item>
+  </bd-card-section>
+`;
+
+export const WithoutTitle = Template.bind({});
+WithoutTitle.args = {
+  title: '',
+  align: 'start'
+};
+
+export const WithoutTitleCentered = Template.bind({});
+WithoutTitleCentered.args = {
+  title: '',
+  align: 'center'
+};
+
+export const SingleCard = (args) => html`
+  <bd-card-section title="${args.title}">
+    <bd-card-item 
+      title="${args.cardTitle}" 
+      icon="${args.icon}"
+      align="${args.align}"
+    >
+      <p>${args.content}</p>
+    </bd-card-item>
+  </bd-card-section>
+`;
+SingleCard.args = {
+  title    : 'Single Feature',
+  cardTitle: 'Scam Copilot Chatbot',
+  icon     : '/assets/device_protection.png',
+  content  : 'Specialized AI chatbot that helps you identify suspicious online interactions.',
+  align    : 'start'
+};
+
+export const SingleCardCentered = SingleCard.bind({});
+SingleCardCentered.args = {
+  ...SingleCard.args,
+  title: 'Single Feature - Centered',
+  align: 'center'
+};
+
+export const SingleCardNoContent = (args) => html`
+  <bd-card-section title="${args.title}">
+    <bd-card-item 
+      title="${args.cardTitle}" 
+      icon="${args.icon}"
+      align="${args.align}"
+    ></bd-card-item>
+  </bd-card-section>
+`;
+SingleCardNoContent.args = {
+  title    : 'Single Feature - Icon + Title Only',
+  cardTitle: 'Device Protection',
+  icon     : '/assets/device_protection.png',
+  align    : 'start'
+};
+
+export const SingleCardNoContentCentered = SingleCardNoContent.bind({});
+SingleCardNoContentCentered.args = {
+  ...SingleCardNoContent.args,
+  title: 'Single Feature - Icon + Title Only - Centered',
+  align: 'center'
+};
+
+export const MultipleCardsGrid = (args) => html`
+  <bd-card-section title="${args.title}">
+    ${Array.from({ length: args.cardCount }, (_, i) => html`
+      <bd-card-item 
+        title="${args.cardTitle} ${i + 1}" 
+        icon="${args.icon}"
+        align="${args.align}"
+      >
+        <p>${args.content} This is card number ${i + 1}.</p>
+      </bd-card-item>
+    `)}
+  </bd-card-section>
+`;
+MultipleCardsGrid.args = {
+  title    : 'Multiple Security Features',
+  cardTitle: 'Security Feature',
+  icon     : '/assets/device_protection.png',
+  content  : 'Description for this security feature.',
+  cardCount: 6,
+  align    : 'start'
+};
+
+export const MultipleCardsGridCentered = MultipleCardsGrid.bind({});
+MultipleCardsGridCentered.args = {
+  ...MultipleCardsGrid.args,
+  title: 'Multiple Security Features - Centered',
+  align: 'center'
+};
+
+export const CardItemVariations = () => html`
+  <div style="display: flex; flex-direction: column; gap: 3rem;">
+    <!-- Start Aligned Variations -->
+    <bd-card-section title="Card Item Variations - Start Aligned">
+      <bd-card-item 
+        title="With Icon and Title"
+        icon="/assets/device_protection.png"
+        align="start"
+      >
+        <p>This card has both an icon and a title with description.</p>
+      </bd-card-item>
+      
+      <bd-card-item 
+        title="Icon + Title Only"
+        icon="/assets/device_protection.png"
+        align="start"
+      ></bd-card-item>
+      
+      <bd-card-item 
+        title="Title Only"
+        align="start"
+      >
+        <p>This card has only a title without an icon, aligned to start.</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-card-item>
+      
+      <bd-card-item align="start">
+        <p>This card has neither icon nor title - just content, aligned to start.</p>
+      </bd-card-item>
+    </bd-card-section>
+
+    <!-- Center Aligned Variations -->
+    <bd-card-section title="Card Item Variations - Center Aligned">
+      <bd-card-item 
+        title="With Icon and Title"
+        icon="/assets/device_protection.png"
+        align="center"
+      >
+        <p>This card has both an icon and a title with description.</p>
+      </bd-card-item>
+      
+      <bd-card-item 
+        title="Icon + Title Only"
+        icon="/assets/device_protection.png"
+        align="center"
+      ></bd-card-item>
+      
+      <bd-card-item 
+        title="Title Only"
+        align="center"
+      >
+        <p>This card has only a title without an icon, centered alignment.</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-card-item>
+      
+      <bd-card-item align="center">
+        <p>This card has neither icon nor title - just content, centered alignment.</p>
+      </bd-card-item>
+    </bd-card-section>
+  </div>
+`;
+
+export const LongContent = () => html`
+  <div style="display: flex; flex-direction: column; gap: 3rem;">
+    <!-- Start Aligned Long Content -->
+    <bd-card-section title="Cards with Long Content - Start Aligned">
+      <bd-card-item 
+        title="Feature with Detailed Description"
+        icon="/assets/identity_protection.png"
+        align="start"
+      >
+        <p>
+          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>
+          Additional paragraph to demonstrate how multiple paragraphs of content
+          would appear within the card component.
+        </p>
+      </bd-card-item>
+      
+      <bd-card-item 
+        title="Very Long Title That Might Wrap to Multiple Lines"
+        icon="/assets/financial_insurance.png"
+        align="start"
+      >
+        <p>Regular content with an exceptionally long title, aligned to start.</p>
+      </bd-card-item>
+    </bd-card-section>
+
+    <!-- Center Aligned Long Content -->
+    <bd-card-section title="Cards with Long Content - Center Aligned">
+      <bd-card-item 
+        title="Feature with Detailed Description"
+        icon="/assets/identity_protection.png"
+        align="center"
+      >
+        <p>
+          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>
+          Additional paragraph to demonstrate how multiple paragraphs of content
+          would appear within the card component.
+        </p>
+      </bd-card-item>
+      
+      <bd-card-item 
+        title="Very Long Title That Might Wrap to Multiple Lines"
+        icon="/assets/financial_insurance.png"
+        align="center"
+      >
+        <p>Regular content with an exceptionally long title, centered alignment.</p>
+      </bd-card-item>
+    </bd-card-section>
+  </div>
+`;
+
+export const MixedAlignment = () => html`
+  <bd-card-section title="Mixed Alignment Cards">
+    <bd-card-item 
+      title="Start Aligned Card"
+      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-card-item>
+    
+    <bd-card-item 
+      title="Center Aligned Card"
+      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-card-item>
+    
+    <bd-card-item 
+      title="Another Start Aligned"
+      icon="/assets/identity_protection.png"
+      align="start"
+    >
+      <p>Another left aligned card with detailed description.</p>
+    </bd-card-item>
+    
+    <bd-card-item 
+      title="Another Center Aligned"
+      icon="/assets/financial_insurance.png"
+      align="center"
+    >
+      <p>Another center aligned card for balanced presentation.</p>
+    </bd-card-item>
+  </bd-card-section>
+`;
+
+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-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-card-item>
+      </div>
+      <div>
+        <h3 style="text-align: center; color: #333;">Center Aligned</h3>
+        <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-card-item>
+      </div>
+    </div>
+  </bd-card-section>
+`;
+
+export const ResponsiveAlignment = () => html`
+  <bd-card-section title="Responsive Alignment Examples">
+    <bd-card-item 
+      title="Responsive Start Aligned"
+      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-card-item>
+    
+    <bd-card-item 
+      title="Responsive Center Aligned"
+      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-card-item>
+  </bd-card-section>
+`;