@repobit/dex-system-design 0.20.0 → 0.21.0

package/src/components/header/header.js

@@ -1,6 +1,8 @@
 import { LitElement, html } from "lit";
 import { tokens } from "../../tokens/tokens.js";
 import headerCSS from "../header/header.css.js";
+import "../heading/heading.js";
+import "../paragraph/paragraph.js";
 
 class Header extends LitElement {
   static properties = {
@@ -20,15 +22,13 @@ class Header extends LitElement {
     super.attributeChangedCallback(name, oldVal, newVal);
   }
 
-
-
   render() {
     return html`
       <div class="bd-container">
         <div class="bd-header-left">
-          <h2 class="bd-product-name">${this.productName}</h2>
-          <h3 class="bd-value-prop">${this.valueProp}</h3>
-          <p class="bd-description">${this.description}</p>
+          <bd-h as="h2" class="bd-product-name">${this.productName}</bd-h>
+          <bd-h as="h4" class="bd-value-prop">${this.valueProp}</bd-h>
+          <bd-p kind="regular" class="bd-description">${this.description}</bd-p>
 
           <div class="bd-price-zone-top">
             <span class="bd-full-price">${this.fullPrice}</span>
@@ -58,23 +58,23 @@ class Header extends LitElement {
             </bd-button>
           </div>
 
-          <small class="bd-disclaimer-top">
+          <bd-p kind="small" class="bd-disclaimer-top">
             <slot name="disclaimer-top">
               Protection for 1 account & 5 PCs, Macs, tablets, or smartphones.
               Windows® | macOS® | Android™ | iOS®
             </slot>
-          </small>
+          </bd-p>
 
-          <small class="bd-disclaimer-bottom">
+          <bd-p kind="small" class="bd-disclaimer-bottom">
             <slot name="disclaimer-bottom-text-start"></slot>
             <slot name="disclaimer-bottom-link"></slot>
             <slot name="disclaimer-bottom-text-end"></slot>
-          </small>
+          </bd-p>
         </div>
 
         <div class="bd-header-right">
           <div class="bd-header-image-wrapper">
-            <slot name="header-image"></slot>
+            <slot name="header-picture"></slot>
             <div class="bd-header-watermark"><span>Trusted. Always.</span></div>
           </div>
         </div>
@@ -85,4 +85,4 @@ class Header extends LitElement {
 
 Header.styles = [tokens, headerCSS];
 
-customElements.define("bd-header", Header);
+customElements.define("bd-header", Header);

package/src/components/header/header.stories.js

@@ -1,4 +1,5 @@
 import { html } from 'lit';
+import '../picture/picture.js';
 import './header.js';
 
 export default {
@@ -29,7 +30,32 @@ const Template = (args) => html`
     .finalPrice=${args.finalPrice}
   >
     ${args.headerImage
-      ? html`<img slot="header-image" src="${args.headerImage}" alt="Header Image">`
+      ? html`
+          <bd-picture 
+            slot="header-picture"
+            .sources=${[
+              {
+                type  : 'image/webp',
+                srcset: args.headerImage,
+                media : '(min-width: 1200px)'
+              },
+              {
+                type  : 'image/webp',
+                srcset: args.headerImage,
+                media : '(min-width: 768px)'
+              },
+              {
+                type  : 'image/webp',
+                srcset: args.headerImage
+              }
+            ]}
+            alt="Security illustration"
+            fallback-src="${args.headerImage}"
+            loading="eager"
+            width="750"
+            height="500"
+          ></bd-picture>
+        `
       : ''}
 
     ${args.disclaimerTop
@@ -54,7 +80,7 @@ Default.args = {
   fullPrice            : '$139.99',
   discount             : 'Save 44%',
   finalPrice           : '$79.99*',
-  headerImage          : '/assets/bd-header-us.jpg',
+  headerImage          : 'https://picsum.photos/750/500',
   disclaimerTop        : 'Protection for 1 account & 5 PCs, Macs, tablets, or smartphones. Windows® | macOS® | Android™ | iOS®',
   disclaimerBottomStart: 'Learn more about',
   disclaimerBottomLink : 'Terms & Conditions',
@@ -64,7 +90,7 @@ Default.args = {
 export const WithCustomImage = Template.bind({});
 WithCustomImage.args = {
   ...Default.args,
-  headerImage: '/assets/bd-header-us.jpg'
+  headerImage: 'https://picsum.photos/750/500?random=1'
 };
 
 export const WithDiscountedPrice = Template.bind({});
@@ -75,9 +101,15 @@ WithDiscountedPrice.args = {
   fullPrice            : '$199.99',
   discount             : 'Save 35%',
   finalPrice           : '$129.99*',
-  headerImage          : '/assets/bd-header-us.jpg',
+  headerImage          : 'https://picsum.photos/750/500?random=2',
   disclaimerTop        : 'Protection for 1 account & 5 devices.',
   disclaimerBottomStart: 'See',
   disclaimerBottomLink : 'Details',
   disclaimerBottomEnd  : 'for more info.'
 };
+
+export const WithLocalImage = Template.bind({});
+WithLocalImage.args = {
+  ...Default.args,
+  headerImage: '/assets/bd-header-us.jpg'
+};

package/src/components/heading/heading.css.js

@@ -0,0 +1,79 @@
+import { css } from "lit";
+
+export default css`
+  @layer bd-components {
+    .bd-heading {
+      margin: 0;
+      padding: 0;
+      color: var(--color-neutral-900);
+    }
+
+    /* h1 */
+    .bd-heading.h1 {
+      font-size: var(--typography-heading-h1-fontSize);
+      font-weight: var(--typography-heading-h1-fontWeight);
+      line-height: var(--typography-heading-h1-lineHeight);
+      letter-spacing: var(--typography-heading-h1-letterSpacing);
+      font-family: var(--typography-heading-h1-fontFamily);
+      // margin-bottom: var(--spacing-24);
+      // margin-top: var(--spacing-32);
+    }
+
+    /* h2 */
+    .bd-heading.h2 {
+      font-size: var(--typography-heading-h2-fontSize);
+      font-weight: var(--typography-heading-h2-fontWeight);
+      line-height: var(--typography-heading-h2-lineHeight);
+      letter-spacing: var(--typography-heading-h2-letterSpacing);
+      font-family: var(--typography-heading-h2-fontFamily);
+      // margin-bottom: var(--spacing-20);
+      // margin-top: var(--spacing-28);
+    }
+
+    /* h3 */
+    .bd-heading.h3 {
+      font-size: var(--typography-heading-h3-fontSize);
+      font-weight: var(--typography-heading-h3-fontWeight);
+      line-height: var(--typography-heading-h3-lineHeight);
+      letter-spacing: var(--typography-heading-h3-letterSpacing);
+      font-family: var(--typography-heading-h3-fontFamily);
+      // margin-bottom: var(--spacing-16);
+      // margin-top: var(--spacing-24);
+    }
+
+    /* h4 */
+    .bd-heading.h4 {
+      font-size: var(--typography-heading-h4-fontSize);
+      font-weight: var(--typography-heading-h4-fontWeight);
+      line-height: var(--typography-heading-h4-lineHeight);
+      letter-spacing: var(--typography-heading-h4-letterSpacing);
+      font-family: var(--typography-heading-h4-fontFamily);
+      // margin-bottom: var(--spacing-12);
+      // margin-top: var(--spacing-20);
+    }
+
+    /* h5 */
+    .bd-heading.h5 {
+      font-size: var(--typography-heading-h5-fontSize);
+      font-weight: var(--typography-heading-h5-fontWeight);
+      line-height: var(--typography-heading-h5-lineHeight);
+      letter-spacing: var(--typography-heading-h5-letterSpacing);
+      font-family: var(--typography-heading-h5-fontFamily);
+      // margin-bottom: var(--spacing-8);
+      // margin-top: var(--spacing-16);
+    }
+
+    /* h6 */
+    .bd-heading.h6 {
+      font-size: var(--typography-heading-h6-fontSize);
+      font-weight: var(--typography-heading-h6-fontWeight);
+      line-height: var(--typography-heading-h6-lineHeight);
+      letter-spacing: var(--typography-heading-h6-letterSpacing);
+      font-family: var(--typography-heading-h6-fontFamily);
+      // margin-bottom: var(--spacing-6);
+      // margin-top: var(--spacing-12);
+    }
+
+   
+
+`;

package/src/components/heading/heading.js

@@ -0,0 +1,79 @@
+import { LitElement, html } from "lit";
+import { tokens } from "../../tokens/tokens.js";
+import headingCSS from "./heading.css.js";
+
+export class BdH extends LitElement {
+  static properties = {
+    as        : { type: String, reflect: true },
+    ariaLevel : { type: Number, attribute: "aria-level" },
+    padding   : { type: String },
+    fontWeight: { type: String },
+    color     : { type: String }
+  };
+
+  constructor() {
+    super();
+    this.as = "h1";
+    this.ariaLevel = null;
+    this.padding = "";
+    this.fontWeight = "";
+    this.color = "";
+  }
+
+  _isValidHeadingTag(tag) {
+    return ["h1", "h2", "h3", "h4", "h5", "h6"].includes(tag);
+  }
+
+  _getValidFontWeight(weight) {
+    const validWeights = [
+      "100", "200", "300", "400", "500", "600", "700", "800", "900",
+      "normal", "bold", "lighter", "bolder"
+    ];
+    return validWeights.includes(weight) ? weight : "";
+  }
+
+  _getValidColor(color) {
+    if (!color) return "";
+    if (
+      color.startsWith("var(") ||
+      color.startsWith("#") ||
+      color.startsWith("rgb") ||
+      color.startsWith("hsl")
+    ) {
+      return color;
+    }
+    return "";
+  }
+
+  _computeStyles() {
+    const styles = [];
+
+    const validFontWeight = this._getValidFontWeight(this.fontWeight);
+    const validColor = this._getValidColor(this.color);
+
+    if (this.padding) styles.push(`padding: ${this.padding};`);
+    if (validFontWeight) styles.push(`font-weight: ${validFontWeight};`);
+    if (validColor) styles.push(`color: ${validColor};`);
+
+    return styles.join(" ");
+  }
+
+
+  render() {
+    const tag = this._isValidHeadingTag(this.as) ? this.as : "h1";
+    const element = document.createElement(tag);
+    element.className = `bd-heading ${tag}`;
+    if (this.ariaLevel) element.setAttribute("aria-level", this.ariaLevel);
+
+    const styles = this._computeStyles();
+    if (styles) element.setAttribute("style", styles);
+
+    element.innerHTML = `<slot></slot>`;
+    return html`${element}`;
+  }
+
+
+  static styles = [tokens, headingCSS];
+}
+
+customElements.define("bd-h", BdH);

package/src/components/heading/heading.stories.js

@@ -0,0 +1,260 @@
+import { html } from 'lit';
+import './heading.js';
+
+export default {
+  title    : 'Atoms/Heading',
+  component: 'bd-h',
+  argTypes : {
+    kind: {
+      control    : { type: 'select' },
+      options    : ['h1', 'h2', 'h3', 'h4', 'h5', 'h6'],
+      description: 'Heading level (h1-h6)'
+    },
+    content: {
+      control    : 'text',
+      description: 'Heading text content'
+    }
+  },
+  parameters: {
+    docs: {
+      description: {
+        component: 'A customizable heading component with semantic HTML and consistent typography.'
+      }
+    }
+  }
+};
+
+const Template = ({ kind, content }) => html`
+  <bd-h as="${kind}">${content}</bd-h>
+`;
+
+export const AllHeadings = () => html`
+  <div style="display: flex; flex-direction: column; gap: 2rem;">
+    <bd-h as="h1">Heading Level 1 - Main Title</bd-h>
+    <bd-h as="h2">Heading Level 2 - Section Title</bd-h>
+    <bd-h as="h3">Heading Level 3 - Subsection Title</bd-h>
+    <bd-h as="h4">Heading Level 4 - Card Title</bd-h>
+    <bd-h as="h5">Heading Level 5 - Small Heading</bd-h>
+    <bd-h as="h6">Heading Level 6 - Minor Heading</bd-h>
+  </div>
+`;
+AllHeadings.parameters = {
+  docs: {
+    description: {
+      story: 'All heading levels from h1 to h6 displayed together for comparison.'
+    }
+  }
+};
+
+export const Heading1 = Template.bind({});
+Heading1.args = {
+  kind   : 'h1',
+  content: 'Main Page Title (h1)'
+};
+Heading1.parameters = {
+  docs: {
+    description: {
+      story: 'Primary heading level for main page titles and important sections.'
+    }
+  }
+};
+
+export const Heading2 = Template.bind({});
+Heading2.args = {
+  kind   : 'h2',
+  content: 'Section Title (h2)'
+};
+Heading2.parameters = {
+  docs: {
+    description: {
+      story: 'Secondary heading level for major section titles.'
+    }
+  }
+};
+
+export const Heading3 = Template.bind({});
+Heading3.args = {
+  kind   : 'h3',
+  content: 'Subsection Title (h3)'
+};
+Heading3.parameters = {
+  docs: {
+    description: {
+      story: 'Tertiary heading level for subsection titles and card headers.'
+    }
+  }
+};
+
+export const Heading4 = Template.bind({});
+Heading4.args = {
+  kind   : 'h4',
+  content: 'Card Title (h4)'
+};
+Heading4.parameters = {
+  docs: {
+    description: {
+      story: 'Heading level for card titles, feature names, and smaller sections.'
+    }
+  }
+};
+
+export const Heading5 = Template.bind({});
+Heading5.args = {
+  kind   : 'h5',
+  content: 'Small Heading (h5)'
+};
+Heading5.parameters = {
+  docs: {
+    description: {
+      story: 'Small heading level for less important titles and labels.'
+    }
+  }
+};
+
+export const Heading6 = Template.bind({});
+Heading6.args = {
+  kind   : 'h6',
+  content: 'Minor Heading (h6)'
+};
+Heading6.parameters = {
+  docs: {
+    description: {
+      story: 'Smallest heading level for minor titles and captions.'
+    }
+  }
+};
+
+export const WithParagraphs = () => html`
+  <div style="max-width: 800px; margin: 0 auto;">
+    <bd-h as="h1">Product Features</bd-h>
+    <bd-p kind="regular">Discover all the powerful features that make our product stand out from the competition.</bd-p>
+    
+    <bd-h as="h2">Security Features</bd-h>
+    <bd-p kind="regular">Our advanced security features protect you from all types of online threats.</bd-p>
+    
+    <bd-h as="h3">Real-time Protection</bd-h>
+    <bd-p kind="regular">Continuous monitoring and protection against emerging threats.</bd-p>
+    
+    <bd-h as="h4">Behavioral Detection</bd-h>
+    <bd-p kind="regular">Advanced algorithms detect suspicious behavior patterns.</bd-p>
+    
+    <bd-h as="h5">System Requirements</bd-h>
+    <bd-p kind="small">Windows 10/11, 2GB RAM, 2.5GB free space</bd-p>
+  </div>
+`;
+WithParagraphs.parameters = {
+  docs: {
+    description: {
+      story: 'Headings used in context with paragraph components to demonstrate proper hierarchy.'
+    }
+  }
+};
+
+export const InCardLayout = () => html`
+  <div style="display: grid; grid-template-columns: repeat(auto-fit, minmax(300px, 1fr)); gap: 2rem; padding: 2rem;">
+    <div style="border: 1px solid #e2e8f0; border-radius: 8px; padding: 1.5rem;">
+      <bd-h as="h3">Advanced Protection</bd-h>
+      <bd-p kind="regular">Comprehensive security against malware, ransomware, and online threats.</bd-p>
+    </div>
+    
+    <div style="border: 1px solid #e2e8f0; border-radius: 8px; padding: 1.5rem;">
+      <bd-h as="h3">Privacy Features</bd-h>
+      <bd-p kind="regular">VPN, password manager, and webcam protection to keep your data safe.</bd-p>
+    </div>
+    
+    <div style="border: 1px solid #e2e8f0; border-radius: 8px; padding: 1.5rem;">
+      <bd-h as="h3">Performance</bd-h>
+      <bd-p kind="regular">Lightweight design with minimal impact on system resources.</bd-p>
+    </div>
+  </div>
+`;
+InCardLayout.parameters = {
+  docs: {
+    description: {
+      story: 'Headings used in card layouts to demonstrate real-world usage patterns.'
+    }
+  }
+};
+
+export const AccessibilityExample = () => html`
+  <div style="max-width: 800px; margin: 0 auto;">
+    <bd-h as="h1">Accessibility Guidelines</bd-h>
+    <bd-p kind="regular">Proper heading hierarchy is essential for screen reader users and SEO.</bd-p>
+    
+    <bd-h as="h2">Semantic Structure</bd-h>
+    <bd-p kind="regular">Headings should follow a logical hierarchy without skipping levels.</bd-p>
+    
+    <bd-h as="h3">Best Practices</bd-h>
+    <bd-p kind="regular">Each page should have one h1, followed by h2, h3, etc. in order.</bd-p>
+    
+    <bd-h as="h4">Screen Readers</bd-h>
+    <bd-p kind="regular">Users can navigate by headings to understand page structure quickly.</bd-p>
+    
+    <bd-h as="h5">SEO Benefits</bd-h>
+    <bd-p kind="regular">Search engines use heading structure to understand content importance.</bd-p>
+  </div>
+`;
+AccessibilityExample.parameters = {
+  docs: {
+    description: {
+      story: 'Demonstrates proper semantic heading hierarchy for accessibility and SEO.'
+    }
+  }
+};
+
+export const ResponsiveExample = () => html`
+  <div style="max-width: 100%; padding: 2rem;">
+    <bd-h as="h1">Responsive Design</bd-h>
+    <bd-p kind="regular">This heading will adjust its size based on the viewport and CSS variables.</bd-p>
+    
+    <div style="display: flex; flex-wrap: wrap; gap: 2rem; margin-top: 2rem;">
+      <div style="flex: 1; min-width: 200px;">
+        <bd-h as="h3">Mobile First</bd-h>
+        <bd-p kind="small">Optimized for small screens with appropriate font sizes.</bd-p>
+      </div>
+      <div style="flex: 1; min-width: 200px;">
+        <bd-h as="h3">Tablet Ready</bd-h>
+        <bd-p kind="small">Scales perfectly for medium-sized devices.</bd-p>
+      </div>
+      <div style="flex: 1; min-width: 200px;">
+        <bd-h as="h3">Desktop Perfect</bd-h>
+        <bd-p kind="small">Looks great on large screens and monitors.</bd-p>
+      </div>
+    </div>
+  </div>
+`;
+ResponsiveExample.parameters = {
+  docs: {
+    description: {
+      story: 'Shows how headings work in responsive layouts and different screen sizes.'
+    }
+  }
+};
+
+export const InteractiveExample = () => {
+  const headings = ['h1', 'h2', 'h3', 'h4', 'h5', 'h6'];
+
+  return html`
+    <div style="max-width: 800px; margin: 0 auto;">
+      <bd-h as="h2">Interactive Heading Demo</bd-h>
+      <bd-p kind="regular">Select different heading levels to see how they look:</bd-p>
+      
+      ${headings.map(kind => html`
+        <div style="margin: 2rem 0; padding: 1rem; border-left: 4px solid #3b82f6;">
+          <bd-h as="${kind}">This is a ${kind.toUpperCase()} heading</bd-h>
+          <bd-p kind="small" style="margin-top: 0.5rem;">
+            Font size: var(--typography-heading-${kind}-fontSize)<br>
+            Font weight: var(--typography-heading-${kind}-fontWeight)
+          </bd-p>
+        </div>
+      `)}
+    </div>
+  `;
+};
+InteractiveExample.parameters = {
+  docs: {
+    description: {
+      story: 'Interactive demonstration showing all heading levels with their CSS variable values.'
+    }
+  }
+};

package/src/components/highlight/highlight.stories.js

@@ -2,7 +2,7 @@ import { html } from "lit";
 import "./highlight.js";
 
 export default {
-  title    : "Atoms/Highlight [v2]",
+  title    : "Atoms/Highlight",
   component: "highlight",
   tags     : ["autodocs"],
   argTypes : {

package/src/components/image/image.css.js

@@ -0,0 +1,101 @@
+import { css } from "lit";
+
+export default css`
+@layer bd-components {
+  .bd-img {
+    display: block;
+    max-width: 100%;
+    height: auto;
+  }
+
+  /* Object Fit Variants */
+  .bd-img.cover {
+    object-fit: cover;
+  }
+
+  .bd-img.contain {
+    object-fit: contain;
+  }
+
+  .bd-img.fill {
+    object-fit: fill;
+  }
+
+  .bd-img.none {
+    object-fit: none;
+  }
+
+  .bd-img.scale-down {
+    object-fit: scale-down;
+  }
+
+  /* Rounded Variants */
+  .bd-img.rounded {
+    border-radius: var(--spacing-8);
+  }
+
+  .bd-img.rounded-lg {
+    border-radius: var(--spacing-12);
+  }
+
+  .bd-img.rounded-full {
+    border-radius: 50%;
+  }
+
+  /* Shadow Variants */
+  .bd-img.shadow {
+    box-shadow: var(--shadow-sm);
+  }
+
+  .bd-img.shadow-lg {
+    box-shadow: var(--shadow-lg);
+  }
+
+  .bd-img.shadow-xl {
+    box-shadow: var(--shadow-xl);
+  }
+
+  /* Border Variants */
+  .bd-img.bordered {
+    border: 2px solid var(--color-neutral-200);
+  }
+
+  .bd-img.bordered-primary {
+    border: 2px solid var(--color-blue-500);
+  }
+
+  .bd-img.bordered-thick {
+    border: 4px solid var(--color-neutral-300);
+  }
+
+  /* Responsive Behavior */
+  .bd-img.responsive {
+    width: 100%;
+    height: auto;
+  }
+
+  /* Aspect Ratio Containers */
+  .bd-img.aspect-16-9 {
+    aspect-ratio: 16 / 9;
+  }
+
+  .bd-img.aspect-4-3 {
+    aspect-ratio: 4 / 3;
+  }
+
+  .bd-img.aspect-1-1 {
+    aspect-ratio: 1 / 1;
+  }
+
+  /* Hover Effects */
+  .bd-img.hover-zoom:hover {
+    transform: scale(1.05);
+    transition: transform 0.3s ease;
+  }
+
+  .bd-img.hover-shadow:hover {
+    box-shadow: var(--shadow-lg);
+    transition: box-shadow 0.3s ease;
+  }
+};
+`