@repobit/dex-system-design 0.23.9 → 0.23.11

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

@@ -0,0 +1,354 @@
+import { html } from "lit";
+import "../heading/heading.js";
+import "../image/image.js";
+import "../link/link.js";
+import "../paragraph/paragraph.js";
+import "./awards-light.js";
+import "./awards.js";
+
+export default {
+  title     : "Components/Awards Section Light",
+  component : "bd-awards-section-light",
+  tags      : ["autodocs"],
+  parameters: {
+    layout: "fullscreen",
+    docs  : {
+      description: {
+        component: `
+**AwardsSectionLight** is a lightweight variant of the AwardsSection component that renders only the trust banner and award badges — without the "What's our secret" section or feature cards.
+
+### Usage
+\`\`\`html
+<bd-awards-section-light></bd-awards-section-light>
+\`\`\`
+
+### 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 |
+| \`desktopAwards\`| Array  | —       | Award badge objects                     |
+
+### Badge object shape
+\`\`\`js
+{ id: string, label: string, type: "red" | "dark", format: "svg", src: string }
+\`\`\`
+        `
+      }
+    }
+  },
+  argTypes: {
+    tagline: {
+      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" }, category: "Content" }
+    },
+    subtext: {
+      control    : "text",
+      description: "Supporting paragraph below the headline",
+      table      : { type: { summary: "string" }, category: "Content" }
+    },
+    desktopAwards: {
+      control    : "object",
+      description: "Array of award badge objects",
+      table      : {
+        type    : { summary: "Array<{ id, label, type, format, src }>" },
+        category: "Badges"
+      }
+    }
+  }
+};
+
+
+// ─── 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.",
+  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"
+    }
+  ]
+};
+
+const render = (args) => html`
+  <bd-awards-section-light
+    .tagline=${args.tagline}
+    .headline=${args.headline}
+    .subtext=${args.subtext}
+    .desktopAwards=${args.desktopAwards}
+  ></bd-awards-section-light>
+`;
+
+
+// ─── Default ─────────────────────────────────────────────────────────────────
+
+export const Default = {
+  name      : "Default (Desktop)",
+  args      : { ...defaultArgs },
+  render,
+  parameters: {
+    viewport: { defaultViewport: "desktop" },
+    docs    : {
+      description: {
+        story: "Full desktop layout. Trust banner with tagline, headline, subtext, and all 7 award badges split across two rows (3 top + 4 bottom)."
+      }
+    }
+  }
+};
+
+
+// ─── Mobile ───────────────────────────────────────────────────────────────────
+
+export const Mobile = {
+  name      : "Mobile (375px)",
+  args      : { ...defaultArgs },
+  render,
+  parameters: {
+    viewport: { defaultViewport: "mobile1" },
+    docs    : {
+      description: {
+        story: "Mobile layout at 375px. The `_narrow` state activates at ≤599px, switching to smaller typography variants and compact badge sizes."
+      }
+    }
+  }
+};
+
+
+// ─── Tablet ───────────────────────────────────────────────────────────────────
+
+export const Tablet = {
+  name      : "Tablet (768px)",
+  args      : { ...defaultArgs },
+  render,
+  parameters: {
+    viewport: { defaultViewport: "tablet" },
+    docs    : {
+      description: {
+        story: "Tablet layout at 768px. Desktop typography is active since the viewport exceeds 599px."
+      }
+    }
+  }
+};
+
+
+// ─── Custom text ──────────────────────────────────────────────────────────────
+
+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 recognised by the world's top security testing labs year after year."
+  },
+  render,
+  parameters: {
+    docs: {
+      description: {
+        story: "All text props replaced with custom values. Use the Controls panel to live-edit tagline, headline, and subtext."
+      }
+    }
+  }
+};
+
+
+// ─── Few badges ───────────────────────────────────────────────────────────────
+
+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. The first row (`slice(0, 3)`) is full, the second row (`slice(3)`) renders empty. Verifies no layout breakage."
+      }
+    }
+  }
+};
+
+
+// ─── Single badge ─────────────────────────────────────────────────────────────
+
+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: a single badge. Ensures no crash or layout breakage."
+      }
+    }
+  }
+};
+
+
+// ─── All dark badges ──────────────────────────────────────────────────────────
+
+export const AllDarkBadges = {
+  name: "All Dark Badges",
+  args: {
+    ...defaultArgs,
+    desktopAwards: defaultArgs.desktopAwards.map((a) => ({ ...a, type: "dark" }))
+  },
+  render,
+  parameters: {
+    docs: {
+      description: {
+        story: "All badges set to `type: 'dark'`. Verifies the `.bd-awards-badge--dark` CSS class is applied to every badge."
+      }
+    }
+  }
+};
+
+
+// ─── All red badges ───────────────────────────────────────────────────────────
+
+export const AllRedBadges = {
+  name: "All Red Badges",
+  args: {
+    ...defaultArgs,
+    desktopAwards: defaultArgs.desktopAwards.map((a) => ({ ...a, type: "red" }))
+  },
+  render,
+  parameters: {
+    docs: {
+      description: {
+        story: "All badges set to `type: 'red'`. The `.bd-awards-badge--dark` class is not applied to any badge."
+      }
+    }
+  }
+};
+
+
+// ─── Small mobile ─────────────────────────────────────────────────────────────
+
+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 the laurel SVG icon do not overflow or clip."
+      }
+    }
+  }
+};
+
+
+// ─── Playground ───────────────────────────────────────────────────────────────
+
+export const Playground = {
+  name      : "Playground",
+  args      : { ...defaultArgs },
+  render,
+  parameters: {
+    docs: {
+      description: {
+        story: "Fully interactive story. Use the Controls panel to modify every prop in real time: text content and badge arrays."
+      }
+    }
+  }
+};

package/src/components/awards/awards.css.js

@@ -154,7 +154,7 @@ export const awardsCSS = css`
     align-items: stretch;
     gap: var(--spacing-32);
     width: 100%;
-    max-width: 1228px;
+    max-width: 940px;
     margin: 0 auto;
     padding: 0 var(--spacing-24);
     box-sizing: border-box;

package/src/components/compare/compare.css.js

@@ -17,13 +17,17 @@ export default css`
   --cs-bar-track-border:   var(--color-neutral-200);
   --cs-bar-height:         var(--dimension-48px);
   --cs-gap:                var(--spacing-32);
-  /* Figma layout width; between --content-width-max (1200) and --grid-container-max-xxl (1320) */
   --cs-grid-max:           1228px;
 }
 
-:host(compare-card),
+:host(compare-card) {
+  display: block;
+  height:  100%;
+}
+
 :host(compare-bar) {
   display: block;
+  width:   100%;
 }
 
 
@@ -32,15 +36,15 @@ export default css`
 ──────────────────────────────────────────────────────────────── */
 
 .cs-sr-only {
-  position: absolute;
-  width:    1px;
-  height:   1px;
-  padding:  0;
-  margin:   -1px;
-  overflow: hidden;
-  clip:     rect(0, 0, 0, 0);
+  position:    absolute;
+  width:       1px;
+  height:      1px;
+  padding:     0;
+  margin:      -1px;
+  overflow:    hidden;
+  clip:        rect(0, 0, 0, 0);
   white-space: nowrap;
-  border:   0;
+  border:      0;
 }
 
 .cs-section {
@@ -70,6 +74,7 @@ export default css`
   max-width:             var(--cs-grid-max);
   margin:                0 auto;
   justify-content:       center;
+  align-items:           stretch;
 }
 
 @media (max-width: 768px) {
@@ -80,7 +85,7 @@ export default css`
 
 
 /* ──────────────────────────────────────────────────────────────
-   3. compare-card (nearest radii: 20px Figma → --radius-3xl 24px)
+   3. compare-card
 ──────────────────────────────────────────────────────────────── */
 
 .card {
@@ -99,6 +104,7 @@ export default css`
   flex-direction: column;
   align-items:    flex-start;
   gap:            var(--spacing-8);
+  flex:           1 1 auto;
 }
 
 .card-icon-wrap {
@@ -109,10 +115,10 @@ export default css`
 
 .card-icon-wrap bd-img {
   display: block;
-  width: 100%;
-  height: 100%;
+  width:   100%;
+  height:  100%;
 }
- 
+
 .card-text-wrap {
   display:        flex;
   flex-direction: column;
@@ -133,22 +139,20 @@ export default css`
   flex-direction: column;
   gap:            var(--spacing-8);
   align-self:     stretch;
+  flex:           0 0 auto;
 }
 
 .card-footnote {
   margin: 0;
   color:  var(--color-neutral-900);
+  flex:   0 0 auto;
 }
 
 
 /* ──────────────────────────────────────────────────────────────
-   4. compare-bar (10px radius Figma → --radius-xl 12px)
+   4. compare-bar
 ──────────────────────────────────────────────────────────────── */
 
-:host(compare-bar) {
-  width: 100%;
-}
-
 .bar-track {
   position:      relative;
   height:        var(--cs-bar-height);
@@ -172,7 +176,7 @@ export default css`
   box-sizing:      border-box;
   background:      transparent;
   transition:      width calc(var(--transition-duration-slower) + 300ms)
-    cubic-bezier(0.22, 1, 0.36, 1);
+                   cubic-bezier(0.22, 1, 0.36, 1);
   min-width:       0;
 }
 
@@ -239,29 +243,28 @@ export default css`
 ══════════════════════════════════════════════════════════════ */
 
 :host(bd-compare-section.theme-green) {
-  --cs-bar-primary-bg:   var(--color-green-500);
+  --cs-bar-primary-bg: var(--color-green-500);
   --cs-bar-primary-fg: var(--color-neutral-0);
   --cs-icon-color:     var(--color-green-500);
   --cs-icon-filter: invert(35%) sepia(72%) saturate(500%) hue-rotate(100deg) brightness(95%) contrast(95%);
 }
 
 :host(bd-compare-section.theme-red) {
-  --cs-bar-primary-bg:   var(--color-red-500);
+  --cs-bar-primary-bg: var(--color-red-500);
   --cs-bar-primary-fg: var(--color-neutral-0);
   --cs-icon-color:     var(--color-red-500);
   --cs-icon-filter: invert(22%) sepia(90%) saturate(700%) hue-rotate(345deg) brightness(95%) contrast(95%);
 }
 
-/* No violet in DS; keep marketing accent */
 :host(bd-compare-section.theme-purple) {
-  --cs-bar-primary-bg:   #7c3aed;
+  --cs-bar-primary-bg: #7c3aed;
   --cs-bar-primary-fg: var(--color-neutral-0);
   --cs-icon-color:     #7c3aed;
   --cs-icon-filter: invert(25%) sepia(80%) saturate(800%) hue-rotate(255deg) brightness(90%) contrast(95%);
 }
 
 :host(bd-compare-section.theme-dark) {
-  --cs-bar-primary-bg:   var(--color-blue-400);
+  --cs-bar-primary-bg: var(--color-blue-400);
   --cs-bar-primary-fg: var(--color-neutral-0);
   --cs-icon-color:     var(--color-blue-400);
   --cs-icon-filter: invert(65%) sepia(50%) saturate(500%) hue-rotate(195deg) brightness(105%) contrast(95%);
@@ -280,4 +283,4 @@ export default css`
   --cs-bar-height: var(--dimension-40px);
   --cs-gap:        var(--spacing-24);
 }
-`;
+`;

package/src/components/compare/compare.stories.js

@@ -101,7 +101,7 @@ export const Default = {
     >
       <compare-card
         title="Best Protection"
-        description="Best Protection against e-Threats (On a scale of 0 to 6, with 6 as the highest level of protection)"
+        description="Best Protection against e-Threats (On a scale of 0 to 6, with 6 as the highest level of protection)Best Protection against e-Threats (On a scale of 0 to 6, with 6 as the highest level of protection)Best Protection against e-Threats (On a scale of 0 to 6, with 6 as the highest level of protection)"
         footnote="Overall Score. July 2011 – February 2025. Source AV TEST.org"
         footnote-href="${AV_TEST_URL}"
         icon-src="${SHIELD_ICON}"