@repobit/dex-system-design 0.23.7 → 0.23.9

package/src/components/awards/awards.stories.js

@@ -1,173 +1,177 @@
-// awards.stories.js
-import { html } from 'lit';
-import './awards.js';
+import { html } from "lit";
+import "../heading/heading.js";
+import "../image/image.js";
+import "../link/link.js";
+import "../paragraph/paragraph.js";
+import "./awards.js";
 
 export default {
-  title     : 'Components/AwardsSection',
-  component : 'bd-awards-section',
-  tags      : ['autodocs'],
+  title     : "Components/Awards Section",
+  component : "bd-awards-section",
+  tags      : ["autodocs"],
   parameters: {
-    docs: {
+    layout: "fullscreen",
+    docs  : {
       description: {
         component: `
 **AwardsSection** is a Lit web component that showcases Bitdefender's industry awards and trust signals.
 
 It includes:
 - A trust banner with tagline, headline, and subtext
-- A responsive awards bar (7 badges, desktop + mobile layouts)
+- A responsive awards bar (7 badges split into two rows)
 - A "What's our secret" section
 - Two feature cards (Machine Learning & Behavioral Analysis)
 
 ### Responsive Behavior
 | Breakpoint | Behavior |
 |---|---|
-| \`≤ 599px\` | Mobile layout: badges split into 2 rows (3 top + 4 bottom), smaller badge sizes |
-| \`600px – 768px\` | Tablet: desktop badge layout, adjusted padding |
-| \`≥ 769px\` | Full desktop layout |
-
-### Badge Sizes
-| Badge | Desktop | Mobile |
-|---|---|---|
-| PC Mag Editors' Choice | 189×64 | 94×32 |
-| AV Comparatives | 126×64 | 63×32 |
-| Best Brands | 51×64 | 26×32 |
-| PC Mag 2024 | 34×64 | 17×31 |
-| PC Mag Readers' Choice | 37×64 | 19×32 |
-| PC Mag Business Choice | 37×64 | 18×32 |
-| AV Test Top Product | 127×64 | 63×32 |
+| \`≤ 599px\` | Narrow layout: smaller typography, compact badges |
+| \`≤ 767px\` | Feature cards use small typography |
+| \`≥ 768px\` | Full desktop layout |
+
+### Attributes
+| Attribute      | Type   | Default | Description                              |
+|----------------|--------|---------|------------------------------------------|
+| \`tagline\`      | String | —       | Small text above the headline            |
+| \`headline\`     | String | —       | Main heading of the trust banner         |
+| \`subtext\`      | String | —       | Supporting paragraph below the headline  |
+| \`secretTitle\`  | String | —       | Heading of the "What's our secret" block |
+| \`secretSubtext\`| String | —       | Subtext of the "What's our secret" block |
+| \`desktopAwards\`| Array  | —       | Award badge objects (see below)          |
+| \`features\`     | Array  | —       | Feature card objects (see below)         |
+
+### Badge object shape
+\`\`\`js
+{ id: string, label: string, type: "red" | "dark", format: "svg", src: string }
+\`\`\`
+
+### Feature object shape
+\`\`\`js
+{ icon: "brain" | "chart", title: string, description: string }
+\`\`\`
         `
       }
     }
   },
   argTypes: {
     tagline: {
-      control    : 'text',
-      description: 'Small text displayed above the headline in blue',
-      table      : {
-        type        : { summary: 'string' },
-        defaultValue: { summary: "You're Making A Great Choice" },
-        category    : 'Content'
-      }
+      control    : "text",
+      description: "Small text displayed above the headline",
+      table      : { type: { summary: "string" }, category: "Content" }
     },
     headline: {
-      control    : 'text',
-      description: 'Main heading of the trust banner',
-      table      : {
-        type        : { summary: 'string' },
-        defaultValue: { summary: 'World-class security software you can trust. Always.' },
-        category    : 'Content'
-      }
+      control    : "text",
+      description: "Main heading of the trust banner",
+      table      : { type: { summary: "string" }, category: "Content" }
     },
     subtext: {
-      control    : 'text',
-      description: 'Supporting paragraph below the headline',
-      table      : {
-        type        : { summary: 'string' },
-        defaultValue: {
-          summary: "We've added 25 new accolades in the past two years..."
-        },
-        category: 'Content'
-      }
+      control    : "text",
+      description: "Supporting paragraph below the headline",
+      table      : { type: { summary: "string" }, category: "Content" }
     },
     secretTitle: {
-      control    : 'text',
+      control    : "text",
       description: "Title of the 'What's our secret' section",
-      table      : {
-        type        : { summary: 'string' },
-        defaultValue: { summary: "What's our secret" },
-        category    : 'Content'
-      }
+      table      : { type: { summary: "string" }, category: "Content" }
     },
     secretSubtext: {
-      control    : 'text',
+      control    : "text",
       description: "Subtext of the 'What's our secret' section",
-      table      : {
-        type        : { summary: 'string' },
-        defaultValue: {
-          summary: 'At the heart of Bitdefender lies a powerhouse of proprietary technology...'
-        },
-        category: 'Content'
-      }
+      table      : { type: { summary: "string" }, category: "Content" }
     },
     desktopAwards: {
-      control    : 'object',
-      description: `
-Array of award badge objects rendered on desktop. Each object has:
-- \`id\` (string) — unique identifier, used for sizing logic
-- \`label\` (string) — accessible label (newlines allowed)
-- \`type\` (string) — \`'red'\` or \`'dark'\`
-- \`format\` (string) — \`'svg'\`
-- \`src\` (string) — path to the SVG asset
-      `,
-      table: {
-        type    : { summary: 'Array<{ id, label, type, format, src }>' },
-        category: 'Badges'
-      }
-    },
-    mobileAwards: {
-      control    : 'object',
-      description: `
-Array of award badge objects rendered on mobile. Defaults to a copy of \`desktopAwards\`.
-Split into two rows: first 3 badges on top row, badges 4–7 on bottom row.
-      `,
-      table: {
-        type    : { summary: 'Array<{ id, label, type, format, src }>' },
-        category: 'Badges'
+      control    : "object",
+      description: "Array of award badge objects",
+      table      : {
+        type    : { summary: "Array<{ id, label, type, format, src }>" },
+        category: "Badges"
       }
     },
     features: {
-      control    : 'object',
-      description: `
-Array of feature card objects. Each object has:
-- \`icon\` (string) — \`'brain'\` or \`'chart'\`
-- \`title\` (string) — card heading
-- \`description\` (string) — card body text
-      `,
-      table: {
-        type    : { summary: 'Array<{ icon, title, description }>' },
-        category: 'Features'
+      control    : "object",
+      description: "Array of feature card objects",
+      table      : {
+        type    : { summary: "Array<{ icon, title, description }>" },
+        category: "Features"
       }
     }
   }
 };
 
-// ─── Default args shared across stories ────────────────────────────────────
+
+// ─── Shared defaults ─────────────────────────────────────────────────────────
 
 const defaultArgs = {
-  tagline : "You're Making A Great Choice",
-  headline: 'World-class security software you can trust. Always.',
-  subtext:
-    "We've added 25 new accolades in the past two years to the hundreds we have won since we started in 2001 - so you know you are in good hands.",
-  secretTitle: "What's our secret",
-  secretSubtext:
-    'At the heart of Bitdefender lies a powerhouse of proprietary technology, setting it miles apart from the competition.',
+  tagline      : "You're Making A Great Choice",
+  headline     : "World-class security software you can trust. Always.",
+  subtext      : "We've added 25 new accolades in the past two years to the hundreds we have won since we started in 2001 - so you know you are in good hands.",
+  secretTitle  : "What's our secret",
+  secretSubtext: "At the heart of Bitdefender lies a powerhouse of proprietary technology, setting it miles apart from the competition.",
   desktopAwards: [
-    { label: "PC MAG\nEDITORS' CHOICE", type: 'red',  format: 'svg', src: '/assets/pc-mag.svg',          id: 'pc-mag'          },
-    { label: 'AV\ncomparatives',         type: 'dark', format: 'svg', src: '/assets/av-comparatives.svg', id: 'av-comparatives' },
-    { label: 'Best\nBrands\n2024',       type: 'dark', format: 'svg', src: '/assets/best-brands.svg',     id: 'best-brands'     },
-    { label: 'PC\nChoice\n2024',         type: 'red',  format: 'svg', src: '/assets/pc-mag-2024.svg',     id: 'pc-mag-2024'     },
-    { label: "PC MAG\nREADERS'\nCHOICE", type: 'red',  format: 'svg', src: '/assets/pc-mag-readers.svg',  id: 'pc-mag-readers'  },
-    { label: 'PC\nBusiness\nChoice',     type: 'red',  format: 'svg', src: '/assets/pc-mag-business.svg', id: 'pc-mag-business' },
-    { label: 'AV\nTEST\nTOP\nPRODUCT',  type: 'red',  format: 'svg', src: '/assets/top-product.svg',     id: 'top-product'     }
+    {
+      label : "PC MAG\nEDITORS' CHOICE",
+      type  : "red",
+      format: "svg",
+      src   : "/assets/pc-mag.svg",
+      id    : "pc-mag"
+    },
+    {
+      label : "AV\ncomparatives",
+      type  : "dark",
+      format: "svg",
+      src   : "/assets/av-comparatives.svg",
+      id    : "av-comparatives"
+    },
+    {
+      label : "Best\nBrands\n2024",
+      type  : "dark",
+      format: "svg",
+      src   : "/assets/best-brands.svg",
+      id    : "best-brands"
+    },
+    {
+      label : "PC\nChoice\n2024",
+      type  : "red",
+      format: "svg",
+      src   : "/assets/pc-mag-2024.svg",
+      id    : "pc-mag-2024"
+    },
+    {
+      label : "PC MAG\nREADERS'\nCHOICE",
+      type  : "red",
+      format: "svg",
+      src   : "/assets/pc-mag-readers.svg",
+      id    : "pc-mag-readers"
+    },
+    {
+      label : "PC\nBusiness\nChoice",
+      type  : "red",
+      format: "svg",
+      src   : "/assets/pc-mag-business.svg",
+      id    : "pc-mag-business"
+    },
+    {
+      label : "AV\nTEST\nTOP\nPRODUCT",
+      type  : "red",
+      format: "svg",
+      src   : "/assets/top-product.svg",
+      id    : "top-product"
+    }
   ],
   features: [
     {
-      icon : 'brain',
-      title: 'Machine Learning',
-      description:
-        "Imagine Bitdefender as a super-smart detective, constantly learning and getting better at spotting bad guys. Just like how you learn from your experiences, Bitdefender learns from millions of cyber threats it encounters every day. It studies their patterns, figures out their tricks, and uses that knowledge to protect your devices from future attacks."
+      icon       : "brain",
+      title      : "Machine Learning",
+      description: "Imagine Bitdefender as a super-smart detective, constantly learning and getting better at spotting bad guys. Just like how you learn from your experiences, Bitdefender learns from millions of cyber threats it encounters every day. It studies their patterns, figures out their tricks, and uses that knowledge to protect your devices from future attacks."
     },
     {
-      icon : 'chart',
-      title: 'Behavioral Analysis',
-      description:
-        "Bitdefender keeps an eye on how you and your devices normally behave. So, when something unusual happens, like a strange file trying to sneak into your computer or a suspicious website trying to steal your info, Bitdefender sounds the alarm. It's like having a loyal sidekick that never sleeps, always on the lookout for trouble and ready to jump into action to keep you safe."
+      icon       : "chart",
+      title      : "Behavioral Analysis",
+      description: "Bitdefender keeps an eye on how you and your devices normally behave. So, when something unusual happens, like a strange file trying to sneak into your computer or a suspicious website trying to steal your info, Bitdefender sounds the alarm. It's like having a loyal sidekick that never sleeps, always on the lookout for trouble and ready to jump into action to keep you safe."
     }
   ]
 };
 
-// ─── Helper to render the component with given args ────────────────────────
-
 const render = (args) => html`
   <bd-awards-section
     .tagline=${args.tagline}
@@ -176,271 +180,256 @@ const render = (args) => html`
     .secretTitle=${args.secretTitle}
     .secretSubtext=${args.secretSubtext}
     .desktopAwards=${args.desktopAwards}
-    .mobileAwards=${args.desktopAwards}
     .features=${args.features}
   ></bd-awards-section>
 `;
 
-// ─── Stories ───────────────────────────────────────────────────────────────
 
-/**
- * The default full-width desktop view of the AwardsSection component.
- * All 7 award badges are displayed in a single horizontal row.
- */
+// ─── Default ─────────────────────────────────────────────────────────────────
+
 export const Default = {
-  name      : 'Default (Desktop)',
+  name      : "Default (Desktop)",
   args      : { ...defaultArgs },
   render,
   parameters: {
-    viewport: { defaultViewport: 'desktop' },
+    viewport: { defaultViewport: "desktop" },
     docs    : {
       description: {
-        story:
-          'Full desktop layout. All 7 badges are shown in a single horizontal row with `flex-wrap: nowrap`. Badge sizes match the desktop spec exactly.'
+        story: "Full desktop layout with all 7 award badges split across two rows (3 top + 4 bottom) and both feature cards."
       }
     }
   }
 };
 
-/**
- * Mobile viewport (375px). Badges split into two rows:
- * Row 1: PC Mag, AV Comparatives, Best Brands
- * Row 2: PC Mag 2024, Readers' Choice, Business Choice, Top Product
- */
+
+// ─── Mobile ───────────────────────────────────────────────────────────────────
+
 export const Mobile = {
-  name      : 'Mobile (375px)',
+  name      : "Mobile (375px)",
   args      : { ...defaultArgs },
   render,
   parameters: {
-    viewport: { defaultViewport: 'mobile1' },
+    viewport: { defaultViewport: "mobile1" },
     docs    : {
       description: {
-        story:
-          'Mobile layout at 375px. The desktop badge row is hidden and replaced with two mobile rows. Badge sizes are halved compared to desktop. The bottom row uses flexbox for tight, gap-controlled centering.'
+        story: "Mobile layout at 375px. The `_narrow` state activates at ≤599px, switching to smaller typography variants (`bd-p kind='small'`, `bd-h as='h4'`) and compact badge sizes."
       }
     }
   }
 };
 
-/**
- * Tablet viewport (768px). Renders the desktop badge layout
- * with adjusted padding for mid-size screens.
- */
+
+// ─── Tablet ───────────────────────────────────────────────────────────────────
+
 export const Tablet = {
-  name      : 'Tablet (768px)',
+  name      : "Tablet (768px)",
   args      : { ...defaultArgs },
   render,
   parameters: {
-    viewport: { defaultViewport: 'tablet' },
+    viewport: { defaultViewport: "tablet" },
     docs    : {
       description: {
-        story:
-          'Tablet layout at 768px. Uses the desktop badge row. Padding and font sizes adjust at the 481px and 769px breakpoints.'
+        story: "Tablet layout at 768px. Desktop typography is used since the viewport exceeds 599px. Feature cards switch to small text at ≤767px."
       }
     }
   }
 };
 
-/**
- * Demonstrates customised text content via Storybook controls.
- */
+
+// ─── Custom text content ──────────────────────────────────────────────────────
+
 export const CustomContent = {
-  name: 'Custom Text Content',
+  name: "Custom Text Content",
   args: {
     ...defaultArgs,
-    tagline : 'Trusted by Millions Worldwide',
-    headline: 'Award-winning protection for every device.',
-    subtext:
-      'From homes to enterprises, Bitdefender has been recognized by the world\'s top security testing labs year after year.',
-    secretTitle: 'Why we win',
-    secretSubtext:
-      'Our proprietary AI engine processes over 500 billion queries per day to stay ahead of the most sophisticated threats.'
+    tagline      : "Trusted by Millions Worldwide",
+    headline     : "Award-winning protection for every device.",
+    subtext      : "From homes to enterprises, Bitdefender has been recognised by the world's top security testing labs year after year.",
+    secretTitle  : "Why we win",
+    secretSubtext: "Our proprietary AI engine processes over 500 billion queries per day to stay ahead of the most sophisticated threats."
   },
   render,
   parameters: {
     docs: {
       description: {
-        story:
-          'All text props replaced with custom values. Use the Controls panel to live-edit tagline, headline, subtext, secretTitle, and secretSubtext.'
+        story: "All text props replaced with custom values. Use the Controls panel to live-edit any string prop."
       }
     }
   }
 };
 
-/**
- * Only 3 badges provided — verifies the component handles
- * a reduced award set without breaking layout.
- */
+
+// ─── Few badges ───────────────────────────────────────────────────────────────
+
 export const FewBadges = {
-  name: 'Reduced Badge Set (3 badges)',
+  name: "Reduced Badge Set (3 badges)",
   args: {
     ...defaultArgs,
     desktopAwards: [
-      { label: "PC MAG\nEDITORS' CHOICE", type: 'red',  format: 'svg', src: '/assets/pc-mag.svg',          id: 'pc-mag'          },
-      { label: 'AV\ncomparatives',         type: 'dark', format: 'svg', src: '/assets/av-comparatives.svg', id: 'av-comparatives' },
-      { label: 'AV\nTEST\nTOP\nPRODUCT',  type: 'red',  format: 'svg', src: '/assets/top-product.svg',     id: 'top-product'     }
+      {
+        label : "PC MAG\nEDITORS' CHOICE",
+        type  : "red",
+        format: "svg",
+        src   : "/assets/pc-mag.svg",
+        id    : "pc-mag"
+      },
+      {
+        label : "AV\ncomparatives",
+        type  : "dark",
+        format: "svg",
+        src   : "/assets/av-comparatives.svg",
+        id    : "av-comparatives"
+      },
+      {
+        label : "AV\nTEST\nTOP\nPRODUCT",
+        type  : "red",
+        format: "svg",
+        src   : "/assets/top-product.svg",
+        id    : "top-product"
+      }
     ]
   },
   render,
   parameters: {
     docs: {
       description: {
-        story:
-          'Only 3 badges passed. Verifies the flex row still centers correctly and that mobile row splitting (slice 0–3 / 3–7) gracefully handles fewer items.'
+        story: "Only 3 badges passed. The first row (`slice(0, 3)`) is full, the second row (`slice(3)`) renders empty. Verifies no layout breakage with fewer items."
       }
     }
   }
 };
 
-/**
- * Single badge — edge case for minimum badge count.
- */
+
+// ─── Single badge ─────────────────────────────────────────────────────────────
+
 export const SingleBadge = {
-  name: 'Single Badge (edge case)',
+  name: "Single Badge (edge case)",
   args: {
     ...defaultArgs,
     desktopAwards: [
-      { label: "PC MAG\nEDITORS' CHOICE", type: 'red', format: 'svg', src: '/assets/pc-mag.svg', id: 'pc-mag' }
+      {
+        label : "PC MAG\nEDITORS' CHOICE",
+        type  : "red",
+        format: "svg",
+        src   : "/assets/pc-mag.svg",
+        id    : "pc-mag"
+      }
     ]
   },
   render,
   parameters: {
     docs: {
       description: {
-        story:
-          'Minimum edge case: only 1 badge. Ensures no layout breakage and that the mobile bottom row renders empty without errors.'
+        story: "Minimum edge case: a single badge. Both row slices receive at most one item. Ensures no crash or layout breakage."
       }
     }
   }
 };
 
-/**
- * Custom feature cards with different titles and descriptions.
- */
-export const CustomFeatures = {
-  name: 'Custom Feature Cards',
+
+// ─── All dark badges ──────────────────────────────────────────────────────────
+
+export const AllDarkBadges = {
+  name: "All Dark Badges",
   args: {
     ...defaultArgs,
-    features: [
-      {
-        icon : 'brain',
-        title: 'AI-Powered Threat Detection',
-        description:
-          'Our next-generation AI engine analyzes over 500 billion security events per day, identifying and neutralizing threats before they can cause harm to your system.'
-      },
-      {
-        icon : 'chart',
-        title: 'Real-Time Protection',
-        description:
-          'Continuous monitoring of all active processes, network connections, and file system changes ensures that threats are caught the moment they appear — with zero performance impact.'
-      }
-    ]
+    desktopAwards: defaultArgs.desktopAwards.map((a) => ({ ...a, type: "dark" }))
   },
   render,
   parameters: {
     docs: {
       description: {
-        story:
-          'Custom feature card content. The `icon` field accepts `"brain"` or `"chart"` to switch between the machine-learning and analysis SVG assets.'
+        story: "All badges set to `type: 'dark'`. Verifies the `.bd-awards-badge--dark` CSS class is applied to every badge in `_renderBadge`."
       }
     }
   }
 };
 
-/**
- * All badges set to 'dark' type — verifies the dark filter is applied.
- */
-export const AllDarkBadges = {
-  name: 'All Dark Badges',
+
+// ─── All red badges ───────────────────────────────────────────────────────────
+
+export const AllRedBadges = {
+  name: "All Red Badges",
   args: {
     ...defaultArgs,
-    desktopAwards: defaultArgs.desktopAwards.map((a) => ({ ...a, type: 'dark' }))
+    desktopAwards: defaultArgs.desktopAwards.map((a) => ({ ...a, type: "red" }))
   },
   render,
   parameters: {
     docs: {
       description: {
-        story:
-          'All badges forced to `type: "dark"`. Verifies the `.bd-awards-badge--dark` CSS class is applied to every badge, which adds a `brightness(0.9)` filter.'
+        story: "All badges set to `type: 'red'`. The `.bd-awards-badge--dark` class is not applied to any badge."
       }
     }
   }
 };
 
-/**
- * All badges set to 'red' type.
- */
-export const AllRedBadges = {
-  name: 'All Red Badges',
+
+// ─── Custom features ──────────────────────────────────────────────────────────
+
+export const CustomFeatures = {
+  name: "Custom Feature Cards",
   args: {
     ...defaultArgs,
-    desktopAwards: defaultArgs.desktopAwards.map((a) => ({ ...a, type: 'red' }))
+    features: [
+      {
+        icon       : "brain",
+        title      : "AI-Powered Threat Detection",
+        description: "Our next-generation AI engine analyses over 500 billion security events per day, identifying and neutralising threats before they can cause harm to your system."
+      },
+      {
+        icon       : "chart",
+        title      : "Real-Time Protection",
+        description: "Continuous monitoring of all active processes, network connections, and file system changes ensures that threats are caught the moment they appear — with zero performance impact."
+      }
+    ]
   },
   render,
   parameters: {
     docs: {
       description: {
-        story:
-          'All badges forced to `type: "red"`. No dark filter is applied to any badge.'
+        story: "Custom feature card content. The `icon` field accepts `'brain'` (maps to `/assets/machine-learning.svg`) or `'chart'` (maps to `/assets/analysis.svg`)."
       }
     }
   }
 };
 
-/**
- * Narrow desktop viewport (1024px).
- */
-export const NarrowDesktop = {
-  name      : 'Narrow Desktop (1024px)',
-  args      : { ...defaultArgs },
-  render,
-  parameters: {
-    viewport : { defaultViewport: 'desktop' },
-    chromatic: { viewports: [1024] },
-    docs     : {
-      description: {
-        story:
-          'Desktop layout at 1024px width. Useful for checking that `flex-wrap: nowrap` on the badge row does not cause overflow on narrower desktop screens.'
-      }
-    }
-  }
-};
 
-/**
- * Small mobile viewport (320px) — the tightest supported size.
- */
+// ─── Small mobile ─────────────────────────────────────────────────────────────
+
 export const SmallMobile = {
-  name      : 'Small Mobile (320px)',
+  name      : "Small Mobile (320px)",
   args      : { ...defaultArgs },
   render,
   parameters: {
     viewport: {
       viewports: {
-        smallMobile: { name: 'Small Mobile', styles: { width: '320px', height: '812px' } }
+        smallMobile: {
+          name  : "Small Mobile",
+          styles: { width: "320px", height: "812px" }
+        }
       },
-      defaultViewport: 'smallMobile'
+      defaultViewport: "smallMobile"
     },
     docs: {
       description: {
-        story:
-          'Smallest supported viewport at 320px. Verifies badge rows, text wrapping, and padding do not overflow or clip on very narrow screens.'
+        story: "Smallest supported viewport at 320px. Verifies badge rows, text wrapping, and the laurel SVG icon do not overflow or clip."
       }
     }
   }
 };
 
-/**
- * Playground story — all controls are fully exposed for interactive exploration.
- */
+
+// ─── Playground ───────────────────────────────────────────────────────────────
+
 export const Playground = {
-  name      : '🛝 Playground',
+  name      : "Playground",
   args      : { ...defaultArgs },
   render,
   parameters: {
     docs: {
       description: {
-        story:
-          'Fully interactive story. Use the **Controls** panel below to modify every prop in real time: text content, badge arrays, and feature cards.'
+        story: "Fully interactive story. Use the Controls panel to modify every prop in real time: text content, badge arrays, and feature cards."
       }
     }
   }