@repobit/dex-system-design 0.24.4 → 0.24.5

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

@@ -0,0 +1,657 @@
+import { html } from "lit";
+import "../heading/heading.js";
+import "../paragraph/paragraph.js";
+import "./awards-flex.js";
+
+export default {
+  title     : "Components/Awards Flex",
+  component : "bd-awards-flex",
+  tags      : ["autodocs"],
+  parameters: {
+    layout: "fullscreen",
+    docs  : {
+      description: {
+        component: `
+**AwardsFlex** is a configurable awards/trust component that covers multiple visual
+variants through a single set of properties, instead of separate components per case.
+
+A laurel icon (\`<bd-laurel-icon>\`) is always centered above the headline. It can be
+overridden via the \`icon\` slot: \`<bd-awards-flex><svg slot="icon">...</svg></bd-awards-flex>\`.
+
+Badges render real icon components from \`components/icons\` (e.g. \`<bd-pc-mag-icon>\`,
+\`<bd-av-comparatives-icon>\`) — pass the icon's slug via the \`icon\` field on each badge
+object, and \`AwardsFlex\` maps it to the matching \`<bd-*-icon>\` custom element internally.
+
+When \`layout="quotes"\` and \`carousel\` is set, badges are paginated 3 per page. With 6
+badges that's 2 pages, with 9 badges 3 pages, and so on — the carousel slides a full page
+of 3 cards at a time.
+
+### Usage
+\`\`\`html
+<bd-awards-flex
+  background="tint"
+  layout="quotes"
+  carousel
+  autoplay
+  autoplay-delay="4000"
+  headline="Built by the experts who perfected business protection"
+  subtext="..."
+  .badges=\${sixBadgesWithQuotes}
+></bd-awards-flex>
+\`\`\`
+
+### Attributes
+| Attribute         | Type                              | Default     | Description                                                        |
+|-------------------|------------------------------------|-------------|----------------------------------------------------------------------|
+| \`background\`      | \`"white" \\| "tint"\`               | \`"white"\`   | Section background                                                  |
+| \`layout\`          | \`"compact" \\| "grid" \\| "quotes"\` | \`"compact"\` | Badge size/arrangement, or badges paired with quote cards            |
+| \`carousel\`        | Boolean                           | \`false\`     | Only for \`layout="quotes"\` — paginate 3 cards at a time             |
+| \`autoplay\`        | Boolean                           | \`false\`     | Auto-advance carousel pages. Requires \`carousel\` + \`layout="quotes"\` and 2+ pages (7+ badges is unnecessary — 2 pages start at 4 badges) |
+| \`autoplay-delay\`  | Number (ms)                       | \`4000\`      | Time between auto-advances. Minimum enforced: 1000ms                 |
+| \`headline\`        | String                            | \`""\`        | Optional heading                                                    |
+| \`subtext\`         | String                            | \`""\`        | Optional supporting paragraph                                        |
+| \`badges\`          | Array                             | \`[]\`        | Badge objects (see below)                                            |
+
+Autoplay pauses automatically on mouse hover or keyboard focus within the carousel, and resumes when the pointer/focus leaves.
+
+### Badge object shape
+\`\`\`js
+{
+  id: string,
+  label: string,        // accessible label
+  type: "red" | "dark",
+  icon: string,          // one of: "pc-mag" | "pc-mag-2024" | "pc-mag-business" | "pc-mag-readers" | "av-comparatives" | "best-brands" | "top-product"
+  // only used when layout="quotes":
+  quote?: string,
+  source?: string,
+  date?: string
+}
+\`\`\`
+        `
+      }
+    }
+  },
+  argTypes: {
+    background: {
+      control    : { type: "select" },
+      options    : ["white", "tint"],
+      description: "Section background",
+      table      : { category: "Appearance" }
+    },
+    layout: {
+      control    : { type: "select" },
+      options    : ["compact", "grid", "quotes"],
+      description: "Badge size/arrangement",
+      table      : { category: "Appearance" }
+    },
+    carousel: {
+      control    : "boolean",
+      description: "Paginate quote cards 3 at a time (layout=\"quotes\" only)",
+      table      : { category: "Appearance" }
+    },
+    autoplay: {
+      control    : "boolean",
+      description: "Auto-advance pages (requires carousel + layout=\"quotes\")",
+      table      : { category: "Carousel" }
+    },
+    autoplayDelay: {
+      control    : { type: "number", min: 1000, step: 500 },
+      description: "Milliseconds between auto-advances",
+      table      : { category: "Carousel" }
+    },
+    headline: {
+      control: "text",
+      table  : { category: "Content" }
+    },
+    subtext: {
+      control: "text",
+      table  : { category: "Content" }
+    },
+    badges: {
+      control: "object",
+      table  : { category: "Content" }
+    }
+  }
+};
+
+
+// ─── Shared badge sets (icon keys map to real <bd-*-icon> components) ─────────
+
+const smallBadges = [
+  { id: "pc-mag", label: "PC MAG Editors' Choice", type: "red", icon: "pc-mag" },
+  { id: "best-brands", label: "Best Brands 2024", type: "dark", icon: "best-brands" },
+  { id: "av-comparatives", label: "AV-Comparatives", type: "dark", icon: "av-comparatives" },
+  { id: "top-product", label: "AV-TEST Top Product", type: "red", icon: "top-product" }
+];
+
+const allBadges = [
+  { id: "pc-mag", label: "PC MAG Editors' Choice", type: "red", icon: "pc-mag" },
+  { id: "av-comparatives", label: "AV-Comparatives", type: "dark", icon: "av-comparatives" },
+  { id: "best-brands", label: "Best Brands 2024", type: "dark", icon: "best-brands" },
+  { id: "pc-mag-2024", label: "PC Choice 2024", type: "red", icon: "pc-mag-2024" },
+  { id: "pc-mag-readers", label: "PC MAG Readers' Choice", type: "red", icon: "pc-mag-readers" },
+  { id: "pc-mag-business", label: "PC Business Choice", type: "red", icon: "pc-mag-business" },
+  { id: "top-product", label: "AV-TEST Top Product", type: "red", icon: "top-product" }
+];
+
+const threeBadges = [
+  { id: "pc-mag-2024", label: "PC Choice 2024", type: "red", icon: "pc-mag-2024" },
+  { id: "top-product", label: "AV-TEST Top Product", type: "red", icon: "top-product" },
+  { id: "av-comparatives", label: "AV-Comparatives", type: "dark", icon: "av-comparatives" }
+];
+
+const threeBadgesWithQuotes = [
+  {
+    id    : "pc-mag-2024",
+    label : "PC Choice 2024",
+    type  : "red",
+    icon  : "pc-mag-2024",
+    quote : "Product of the Year",
+    source: "PC Comparatives",
+    date  : "January 2025"
+  },
+  {
+    id    : "top-product",
+    label : "AV-TEST Top Product",
+    type  : "red",
+    icon  : "top-product",
+    quote : "Outstanding scores in independent lab tests and our own protection tests",
+    source: "PCMag",
+    date  : "August 2025"
+  },
+  {
+    id    : "av-comparatives",
+    label : "AV-Comparatives",
+    type  : "dark",
+    icon  : "av-comparatives",
+    quote : "Bitdefender emerges on top, achieving the highest satisfaction ratings on nearly every metric",
+    source: "PitPag",
+    date  : "January 2023"
+  }
+];
+
+// Six badges with quotes — needed so the carousel has 2+ pages (3 cards per page)
+const sixBadgesWithQuotes = [
+  ...threeBadgesWithQuotes,
+  {
+    id    : "pc-mag",
+    label : "PC MAG Editors' Choice",
+    type  : "red",
+    icon  : "pc-mag",
+    quote : "Consistently ranked among the best protection suites available today",
+    source: "PCMag",
+    date  : "March 2024"
+  },
+  {
+    id    : "pc-mag-readers",
+    label : "PC MAG Readers' Choice",
+    type  : "red",
+    icon  : "pc-mag-readers",
+    quote : "Readers voted Bitdefender their top choice for home security",
+    source: "PCMag Readers",
+    date  : "June 2024"
+  },
+  {
+    id    : "best-brands",
+    label : "Best Brands 2024",
+    type  : "dark",
+    icon  : "best-brands",
+    quote : "Named one of the year's most trusted cybersecurity brands",
+    source: "Best Brands",
+    date  : "2024"
+  }
+];
+
+const headline = "Built by the experts who perfected business protection";
+const subtext = "Award-winning cybersecurity trusted by millions, recognized by independent testing labs, and created by Bitdefender security researchers.";
+const shortHeadline = "Bitdefender, Award-Winning Leader in Cybersecurity you can trust";
+
+const render = (args) => html`
+  <bd-awards-flex
+    background=${args.background}
+    layout=${args.layout}
+    ?carousel=${args.carousel}
+    ?autoplay=${args.autoplay}
+    autoplay-delay=${args.autoplayDelay}
+    headline=${args.headline}
+    subtext=${args.subtext}
+    .badges=${args.badges}
+  ></bd-awards-flex>
+`;
+
+
+// ─── 1. Compact, white, no subtext, small badges ──────────────────────────────
+
+export const CompactNoSubtext = {
+  name: "1. Compact — No Subtext",
+  args: {
+    background   : "white",
+    layout       : "compact",
+    carousel     : false,
+    autoplay     : false,
+    autoplayDelay: 4000,
+    headline     : shortHeadline,
+    subtext      : "",
+    badges       : smallBadges
+  },
+  render,
+  parameters: {
+    docs: {
+      description: {
+        story: "White background, headline only (no subtext), small badge row, laurel centered above the headline."
+      }
+    }
+  }
+};
+
+
+// ─── 2. Compact, white, larger badges ─────────────────────────────────────────
+
+export const CompactLargerBadges = {
+  name: "2. Compact — Larger Badges",
+  args: {
+    background   : "white",
+    layout       : "grid",
+    carousel     : false,
+    autoplay     : false,
+    autoplayDelay: 4000,
+    headline     : shortHeadline,
+    subtext      : "",
+    badges       : smallBadges
+  },
+  render,
+  parameters: {
+    docs: {
+      description: {
+        story: "Same content as the first variant, but badges rendered at the larger `grid` size (64px icon height)."
+      }
+    }
+  }
+};
+
+
+// ─── 3. White, subtext, full badge grid ───────────────────────────────────────
+
+export const WhiteFullGrid = {
+  name: "3. White — Subtext + Full Badge Grid",
+  args: {
+    background   : "white",
+    layout       : "grid",
+    carousel     : false,
+    autoplay     : false,
+    autoplayDelay: 4000,
+    headline,
+    subtext,
+    badges       : allBadges
+  },
+  render,
+  parameters: {
+    docs: {
+      description: {
+        story: "White background with headline, subtext, and the full badge set."
+      }
+    }
+  }
+};
+
+
+// ─── 4. Tint background, subtext, 3 badges ────────────────────────────────────
+
+export const TintThreeBadges = {
+  name: "4. Tint Background — 3 Badges",
+  args: {
+    background   : "tint",
+    layout       : "grid",
+    carousel     : false,
+    autoplay     : false,
+    autoplayDelay: 4000,
+    headline,
+    subtext,
+    badges       : threeBadges
+  },
+  render,
+  parameters: {
+    docs: {
+      description: {
+        story: "Blue-tinted background, headline + subtext, reduced 3-badge set."
+      }
+    }
+  }
+};
+
+
+// ─── 5. Tint background, quote cards, static ──────────────────────────────────
+
+export const TintQuoteCardsStatic = {
+  name: "5. Tint Background — Quote Cards (Static)",
+  args: {
+    background   : "tint",
+    layout       : "quotes",
+    carousel     : false,
+    autoplay     : false,
+    autoplayDelay: 4000,
+    headline,
+    subtext,
+    badges       : threeBadgesWithQuotes
+  },
+  render,
+  parameters: {
+    docs: {
+      description: {
+        story: "All quote cards rendered side by side, no carousel/pagination, no card background."
+      }
+    }
+  }
+};
+
+
+// ─── 6. Tint background, quote cards, carousel (manual) ───────────────────────
+
+export const TintQuoteCardsCarousel = {
+  name: "6. Tint Background — Quote Cards (Carousel, Manual)",
+  args: {
+    background   : "tint",
+    layout       : "quotes",
+    carousel     : true,
+    autoplay     : false,
+    autoplayDelay: 4000,
+    headline,
+    subtext,
+    badges       : sixBadgesWithQuotes
+  },
+  render,
+  parameters: {
+    docs: {
+      description: {
+        story: "Two pages of 3 quote cards each, advanced by clicking a dot. Uses a sliding track with a CSS transition for smooth movement between pages."
+      }
+    }
+  }
+};
+
+
+// ─── 7. Tint background, quote cards, carousel + autoplay ─────────────────────
+
+export const TintQuoteCardsCarouselAutoplay = {
+  name: "7. Tint Background — Quote Cards (Carousel, Autoplay)",
+  args: {
+    background   : "tint",
+    layout       : "quotes",
+    carousel     : true,
+    autoplay     : true,
+    autoplayDelay: 4000,
+    headline,
+    subtext,
+    badges       : sixBadgesWithQuotes
+  },
+  render,
+  parameters: {
+    docs: {
+      description: {
+        story: "Two pages of 3 quote cards each, auto-advancing every `autoplayDelay` ms. Hover or focus inside the carousel to pause; it resumes when the pointer/focus leaves."
+      }
+    }
+  }
+};
+
+
+// ─── 8. Autoplay, fast delay ────────────────────────────────────────────────────
+
+export const AutoplayFastDelay = {
+  name: "8. Autoplay — Fast Delay (1.5s)",
+  args: {
+    background   : "tint",
+    layout       : "quotes",
+    carousel     : true,
+    autoplay     : true,
+    autoplayDelay: 1500,
+    headline,
+    subtext,
+    badges       : sixBadgesWithQuotes
+  },
+  render,
+  parameters: {
+    docs: {
+      description: {
+        story: "Autoplay at a fast delay across 2 pages, useful for visually confirming the page transition and pause-on-hover behavior quickly."
+      }
+    }
+  }
+};
+
+
+// ─── Edge cases ────────────────────────────────────────────────────────────────
+
+export const SingleBadge = {
+  name: "Edge Case — Single Badge",
+  args: {
+    background   : "white",
+    layout       : "compact",
+    carousel     : false,
+    autoplay     : false,
+    autoplayDelay: 4000,
+    headline     : shortHeadline,
+    subtext      : "",
+    badges       : [smallBadges[0]]
+  },
+  render,
+  parameters: {
+    docs: {
+      description: {
+        story: "Minimum edge case: a single badge, no crash or layout breakage."
+      }
+    }
+  }
+};
+
+export const NoBadges = {
+  name: "Edge Case — No Badges",
+  args: {
+    background   : "white",
+    layout       : "compact",
+    carousel     : false,
+    autoplay     : false,
+    autoplayDelay: 4000,
+    headline     : shortHeadline,
+    subtext      : "",
+    badges       : []
+  },
+  render,
+  parameters: {
+    docs: {
+      description: {
+        story: "Headline/subtext/laurel render fine with an empty badges array."
+      }
+    }
+  }
+};
+
+export const CarouselFourBadges = {
+  name: "Edge Case — Carousel With 4 Quote Badges (2 + 2)",
+  args: {
+    background   : "tint",
+    layout       : "quotes",
+    carousel     : true,
+    autoplay     : false,
+    autoplayDelay: 4000,
+    headline,
+    subtext,
+    badges       : sixBadgesWithQuotes.slice(0, 4)
+  },
+  render,
+  parameters: {
+    docs: {
+      description: {
+        story: "4 badges split into a page of 3 and a page of 2 — verifies the last, incomplete page still lays out correctly."
+      }
+    }
+  }
+};
+
+export const CarouselSingleSlideAutoplay = {
+  name: "Edge Case — Autoplay With Only 1 Page",
+  args: {
+    background   : "tint",
+    layout       : "quotes",
+    carousel     : true,
+    autoplay     : true,
+    autoplayDelay: 2000,
+    headline,
+    subtext,
+    badges       : threeBadgesWithQuotes
+  },
+  render,
+  parameters: {
+    docs: {
+      description: {
+        story: "Autoplay is requested but there are only 3 badges (1 page) — the component should not start a timer, and no dots should render since there's nothing to paginate."
+      }
+    }
+  }
+};
+
+export const UnknownIconKey = {
+  name: "Edge Case — Unknown Icon Key",
+  args: {
+    background   : "white",
+    layout       : "compact",
+    carousel     : false,
+    autoplay     : false,
+    autoplayDelay: 4000,
+    headline     : shortHeadline,
+    subtext      : "",
+    badges       : [{ id: "mystery", label: "Mystery Award", type: "dark", icon: "does-not-exist" }]
+  },
+  render,
+  parameters: {
+    docs: {
+      description: {
+        story: "An `icon` key with no matching `<bd-*-icon>` component falls back to a visible \"?\" placeholder instead of rendering nothing."
+      }
+    }
+  }
+};
+
+// ─── Badge sets specific to "All Variants — Stacked" ──────────────────────────
+
+const fourBadges = [
+  { id: "pc-mag-1", label: "PC MAG Editors' Choice", type: "red", icon: "pc-mag" },
+  { id: "pc-mag-business-1", label: "PC Business Choice", type: "red", icon: "pc-mag-business" },
+  { id: "best-brands-1", label: "Best Brands 2024", type: "dark", icon: "best-brands" },
+  { id: "av-comparatives-1", label: "AV-Comparatives", type: "dark", icon: "av-comparatives" }
+];
+
+const sevenBadges = [
+  { id: "pc-mag-2", label: "PC MAG Editors' Choice", type: "red", icon: "pc-mag" },
+  { id: "av-comparatives-2", label: "AV-Comparatives", type: "dark", icon: "av-comparatives" },
+  { id: "pc-mag-business-2", label: "PC Business Choice", type: "red", icon: "pc-mag-business" },
+  { id: "pc-mag-readers-2", label: "PC MAG Readers' Choice", type: "red", icon: "pc-mag-readers" },
+  { id: "pc-mag-2024-2", label: "PC Choice 2024", type: "red", icon: "pc-mag-2024" },
+  { id: "top-product-2", label: "AV-TEST Top Product", type: "red", icon: "top-product" },
+  { id: "pc-mag-3", label: "PC MAG Editors' Choice", type: "red", icon: "pc-mag" }
+];
+
+const elevenBadges = [
+  { id: "pc-mag-4", label: "PC MAG Editors' Choice", type: "red", icon: "pc-mag" },
+  { id: "av-comparatives-3", label: "AV-Comparatives", type: "dark", icon: "av-comparatives" },
+  { id: "best-brands-2", label: "Best Brands 2024", type: "dark", icon: "best-brands" },
+  { id: "pc-mag-2024-3", label: "PC Choice 2024", type: "red", icon: "pc-mag-2024" },
+  { id: "pc-mag-readers-3", label: "PC MAG Readers' Choice", type: "red", icon: "pc-mag-readers" },
+  { id: "pc-mag-business-3", label: "PC Business Choice", type: "red", icon: "pc-mag-business" },
+  { id: "top-product-3", label: "AV-TEST Top Product", type: "red", icon: "top-product" },
+  { id: "pc-mag-5", label: "PC MAG Editors' Choice", type: "red", icon: "pc-mag" },
+  { id: "av-comparatives-4", label: "AV-Comparatives", type: "dark", icon: "av-comparatives" },
+  { id: "best-brands-3", label: "Best Brands 2024", type: "dark", icon: "best-brands" },
+  { id: "pc-mag-2024-4", label: "PC Choice 2024", type: "red", icon: "pc-mag-2024" }
+];
+
+
+// ─── All Variants Stacked (matches the reference image) ───────────────────────
+
+export const AllVariantsStacked = {
+  name  : "All Variants — Stacked",
+  render: () => html`
+    <div
+      style="display: flex; flex-direction: column; gap: 24px; padding: 24px;"
+    >
+      <bd-awards-flex
+        background="white"
+        layout="compact"
+        headline=${shortHeadline}
+        .badges=${fourBadges}
+      ></bd-awards-flex>
+
+      <bd-awards-flex
+        background="white"
+        layout="compact"
+        headline=${shortHeadline}
+        .badges=${sevenBadges}
+      ></bd-awards-flex>
+
+      <bd-awards-flex
+        background="white"
+        layout="compact"
+        headline=${headline}
+        subtext=${subtext}
+        .badges=${elevenBadges}
+      ></bd-awards-flex>
+
+      <bd-awards-flex
+        background="tint"
+        layout="grid"
+        headline=${headline}
+        subtext=${subtext}
+        .badges=${threeBadges}
+      ></bd-awards-flex>
+
+      <bd-awards-flex
+        background="tint"
+        layout="quotes"
+        headline=${headline}
+        subtext=${subtext}
+        .badges=${threeBadgesWithQuotes}
+      ></bd-awards-flex>
+
+      <bd-awards-flex
+        background="tint"
+        layout="quotes"
+        carousel
+        autoplay
+        autoplay-delay="4000"
+        headline=${headline}
+        subtext=${subtext}
+        .badges=${sixBadgesWithQuotes}
+      ></bd-awards-flex>
+    </div>
+  `,
+  parameters: {
+    docs: {
+      description: {
+        story: "All six variants stacked vertically in one view. The first three (white background) show 4, 7, and 11 badges respectively — the badge row wraps automatically onto a second line once it runs out of horizontal space, no layout changes needed. The last three (tint background) are unchanged: grid badges, static quote cards, and the autoplaying 2-page carousel."
+      }
+    }
+  }
+};
+// ─── Playground ─────────────────────────────────────────────────────────────────
+
+export const Playground = {
+  name: "Playground",
+  args: {
+    background   : "tint",
+    layout       : "quotes",
+    carousel     : true,
+    autoplay     : true,
+    autoplayDelay: 4000,
+    headline,
+    subtext,
+    badges       : sixBadgesWithQuotes
+  },
+  render,
+  parameters: {
+    docs: {
+      description: {
+        story: "Fully interactive story. Use the Controls panel to switch `background`, `layout`, `carousel`, `autoplay`, `autoplayDelay`, and edit content/badges live."
+      }
+    }
+  }
+};