@repobit/dex-system-design 0.22.12 → 0.23.1

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

@@ -0,0 +1,447 @@
+// awards.stories.js
+import { html } from 'lit';
+import './awards.js';
+
+export default {
+  title     : 'Components/AwardsSection',
+  component : 'bd-awards-section',
+  tags      : ['autodocs'],
+  parameters: {
+    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 "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 |
+        `
+      }
+    }
+  },
+  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'
+      }
+    },
+    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'
+      }
+    },
+    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'
+      }
+    },
+    secretTitle: {
+      control    : 'text',
+      description: "Title of the 'What's our secret' section",
+      table      : {
+        type        : { summary: 'string' },
+        defaultValue: { summary: "What's our secret" },
+        category    : 'Content'
+      }
+    },
+    secretSubtext: {
+      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'
+      }
+    },
+    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'
+      }
+    },
+    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'
+      }
+    }
+  }
+};
+
+// ─── Default args shared across stories ────────────────────────────────────
+
+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.',
+  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'     }
+  ],
+  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 : '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}
+    .headline=${args.headline}
+    .subtext=${args.subtext}
+    .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.
+ */
+export const Default = {
+  name      : 'Default (Desktop)',
+  args      : { ...defaultArgs },
+  render,
+  parameters: {
+    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.'
+      }
+    }
+  }
+};
+
+/**
+ * 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
+ */
+export const Mobile = {
+  name      : 'Mobile (375px)',
+  args      : { ...defaultArgs },
+  render,
+  parameters: {
+    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.'
+      }
+    }
+  }
+};
+
+/**
+ * Tablet viewport (768px). Renders the desktop badge layout
+ * with adjusted padding for mid-size screens.
+ */
+export const Tablet = {
+  name      : 'Tablet (768px)',
+  args      : { ...defaultArgs },
+  render,
+  parameters: {
+    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.'
+      }
+    }
+  }
+};
+
+/**
+ * Demonstrates customised text content via Storybook controls.
+ */
+export const CustomContent = {
+  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.'
+  },
+  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.'
+      }
+    }
+  }
+};
+
+/**
+ * Only 3 badges provided — verifies the component handles
+ * a reduced award set without breaking layout.
+ */
+export const FewBadges = {
+  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'     }
+    ]
+  },
+  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.'
+      }
+    }
+  }
+};
+
+/**
+ * Single badge — edge case for minimum badge count.
+ */
+export const SingleBadge = {
+  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' }
+    ]
+  },
+  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.'
+      }
+    }
+  }
+};
+
+/**
+ * Custom feature cards with different titles and descriptions.
+ */
+export const CustomFeatures = {
+  name: 'Custom Feature Cards',
+  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.'
+      }
+    ]
+  },
+  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.'
+      }
+    }
+  }
+};
+
+/**
+ * All badges set to 'dark' type — verifies the dark filter is applied.
+ */
+export const AllDarkBadges = {
+  name: 'All Dark Badges',
+  args: {
+    ...defaultArgs,
+    desktopAwards: defaultArgs.desktopAwards.map((a) => ({ ...a, type: 'dark' }))
+  },
+  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.'
+      }
+    }
+  }
+};
+
+/**
+ * All badges set to 'red' type.
+ */
+export const AllRedBadges = {
+  name: 'All Red Badges',
+  args: {
+    ...defaultArgs,
+    desktopAwards: defaultArgs.desktopAwards.map((a) => ({ ...a, type: 'red' }))
+  },
+  render,
+  parameters: {
+    docs: {
+      description: {
+        story:
+          'All badges forced to `type: "red"`. No dark filter is applied to any badge.'
+      }
+    }
+  }
+};
+
+/**
+ * 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.
+ */
+export const SmallMobile = {
+  name      : 'Small Mobile (320px)',
+  args      : { ...defaultArgs },
+  render,
+  parameters: {
+    viewport: {
+      viewports: {
+        smallMobile: { name: 'Small Mobile', styles: { width: '320px', height: '812px' } }
+      },
+      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.'
+      }
+    }
+  }
+};
+
+/**
+ * Playground story — all controls are fully exposed for interactive exploration.
+ */
+export const 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.'
+      }
+    }
+  }
+};