@repobit/dex-system-design 0.22.12 → 0.23.2

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

@@ -0,0 +1,372 @@
+import { html } from "lit";
+import "./compare.js";
+
+// ─── Asset paths ──────────────────────────────────────────────────────────────
+
+const SHIELD_ICON      = "/assets/shield-check.png";
+const SPEEDOMETER_ICON = "/assets/speedometer.png";
+const REPAIR_ICON      = "/assets/speedometer.png"; // swap for a repair asset when available
+
+const AV_TEST_URL = "https://www.av-test.org/en/antivirus/home-users/";
+
+// ─── Meta ─────────────────────────────────────────────────────────────────────
+
+export default {
+  title     : "Components/CompareSection",
+  tags      : ["autodocs"],
+  parameters: {
+    layout: "fullscreen",
+    docs  : {
+      description: {
+        component: `
+Three Lit Element web components for building customizable comparison sections.
+
+\`\`\`html
+<bd-compare-section title="How Bitdefender Compares To Other Cybersecurity Brands" gap="32px">
+
+  <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)"
+    footnote="Overall Score. July 2011 – February 2025. Source AV TEST.org"
+    footnote-href="https://www.av-test.org/en/antivirus/home-users/"
+    icon-src="/assets/shield-check.png"
+  >
+    <compare-bar label="Bitdefender" score="5.95" max-score="6" variant="primary"></compare-bar>
+    <compare-bar label="Norton"      score="5.59" max-score="6" variant="secondary"></compare-bar>
+    <compare-bar label="McAfee"      score="5.45" max-score="6" variant="secondary"></compare-bar>
+  </compare-card>
+
+  <compare-card
+    title="Best Performance"
+    description="Lightest Impact on Performance (On a scale of 0 to 6, with 6 as the lightest level of impact)"
+    footnote="Overall Score. February 2013 - February 2025. Source AV TEST.org"
+    footnote-href="https://www.av-test.org/en/antivirus/home-users/"
+    icon-src="/assets/speedometer.png"
+  >
+    <compare-bar label="Bitdefender" score="5.86" max-score="6" variant="primary"></compare-bar>
+    <compare-bar label="Norton"      score="5.59" max-score="6" variant="secondary"></compare-bar>
+    <compare-bar label="McAfee"      score="5.53" max-score="6" variant="secondary"></compare-bar>
+  </compare-card>
+
+</bd-compare-section>
+\`\`\`
+
+### Attributes
+
+#### \`bd-compare-section\`
+| Attribute  | Type     | Default | Description                          |
+|------------|----------|---------|--------------------------------------|
+| \`title\`    | String   | —       | Section heading                      |
+| \`subtitle\` | String   | —       | Optional subheading                  |
+| \`columns\`  | Number   | \`2\`   | Number of columns                    |
+| \`gap\`      | String   | —       | Gap between cards e.g. \`"32px"\`    |
+
+#### \`compare-card\`
+| Attribute       | Type   | Default | Description                              |
+|-----------------|--------|---------|------------------------------------------|
+| \`title\`         | String | —       | Card heading                             |
+| \`description\`   | String | —       | Explanatory subtitle                     |
+| \`footnote\`      | String | —       | Source text at the bottom                |
+| \`footnote-href\` | String | —       | URL — links text after "Source "         |
+| \`icon-src\`      | String | —       | Path to icon asset                       |
+
+#### \`compare-bar\`
+| Attribute      | Type   | Default       | Description              |
+|----------------|--------|---------------|--------------------------|
+| \`label\`        | String | —             | Brand / product name     |
+| \`score\`        | Number | —             | Numeric score            |
+| \`max-score\`    | Number | \`6\`         | Max possible score       |
+| \`variant\`      | String | \`secondary\` | \`primary\` or \`secondary\` |
+| \`score-label\`  | String | —             | Override text for score  |
+
+### CSS Custom Properties (all overridable on \`bd-compare-section\`)
+
+| Property                  | Default              | Description               |
+|---------------------------|----------------------|---------------------------|
+| \`--cs-bg\`               | \`#f5f6fa\`          | Section background        |
+| \`--cs-gap\`              | \`1.5rem\`           | Gap between cards         |
+| \`--cs-bar-height\`       | \`44px\`             | Height of every bar       |
+| \`--cs-bar-radius\`       | \`0.45rem\`          | Bar corner radius         |
+| \`--cs-icon-color\`       | \`var(--color-blue-500)\` | Card icon colour     |
+        `
+      }
+    }
+  }
+};
+
+// ─── Default ─────────────────────────────────────────────────────────────────
+
+export const Default = {
+  name  : "Default (Bitdefender)",
+  render: () => html`
+    <bd-compare-section
+      title="How Bitdefender Compares To Other Cybersecurity Brands"
+      gap="32px"
+    >
+      <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)"
+        footnote="Overall Score. July 2011 – February 2025. Source AV TEST.org"
+        footnote-href="${AV_TEST_URL}"
+        icon-src="${SHIELD_ICON}"
+      >
+        <compare-bar label="Bitdefender" score="5.95" max-score="6" variant="primary"></compare-bar>
+        <compare-bar label="Norton"      score="5.59" max-score="6" variant="secondary"></compare-bar>
+        <compare-bar label="McAfee"      score="5.45" max-score="6" variant="secondary"></compare-bar>
+      </compare-card>
+
+      <compare-card
+        title="Best Performance"
+        description="Lightest Impact on Performance (On a scale of 0 to 6, with 6 as the lightest level of impact)"
+        footnote="Overall Score. February 2013 - February 2025. Source AV TEST.org"
+        footnote-href="${AV_TEST_URL}"
+        icon-src="${SPEEDOMETER_ICON}"
+      >
+        <compare-bar label="Bitdefender" score="5.86" max-score="6" variant="primary"></compare-bar>
+        <compare-bar label="Norton"      score="5.59" max-score="6" variant="secondary"></compare-bar>
+        <compare-bar label="McAfee"      score="5.53" max-score="6" variant="secondary"></compare-bar>
+      </compare-card>
+    </bd-compare-section>
+  `
+};
+
+// ─── Three columns ────────────────────────────────────────────────────────────
+
+export const ThreeColumns = {
+  name  : "Three Columns",
+  render: () => html`
+    <bd-compare-section
+      title="Full Security Benchmark"
+      subtitle="Independent testing data across all major categories."
+      columns="3"
+      gap="32px"
+    >
+      <compare-card
+        title="Best Protection"
+        description="Scale of 0–6. Higher is better."
+        footnote="Overall Score. July 2011 – February 2025. Source AV TEST.org"
+        footnote-href="${AV_TEST_URL}"
+        icon-src="${SHIELD_ICON}"
+      >
+        <compare-bar label="Bitdefender" score="5.95" max-score="6" variant="primary"></compare-bar>
+        <compare-bar label="Norton"      score="5.89" max-score="6" variant="secondary"></compare-bar>
+        <compare-bar label="McAfee"      score="5.45" max-score="6" variant="secondary"></compare-bar>
+      </compare-card>
+
+      <compare-card
+        title="Best Performance"
+        description="Scale of 0–6. Higher = lightest impact."
+        footnote="Overall Score. February 2013 - February 2025. Source AV TEST.org"
+        footnote-href="${AV_TEST_URL}"
+        icon-src="${SPEEDOMETER_ICON}"
+      >
+        <compare-bar label="Bitdefender" score="5.86" max-score="6" variant="primary"></compare-bar>
+        <compare-bar label="Norton"      score="5.59" max-score="6" variant="secondary"></compare-bar>
+        <compare-bar label="McAfee"      score="5.53" max-score="6" variant="secondary"></compare-bar>
+      </compare-card>
+
+      <compare-card
+        title="Best Repair"
+        description="Ability to repair an infected system (0–6)."
+        footnote="Overall Score. 2020 – February 2025. Source AV TEST.org"
+        footnote-href="${AV_TEST_URL}"
+        icon-src="${REPAIR_ICON}"
+      >
+        <compare-bar label="Bitdefender" score="5.90" max-score="6" variant="primary"></compare-bar>
+        <compare-bar label="Kaspersky"   score="5.75" max-score="6" variant="secondary"></compare-bar>
+        <compare-bar label="Norton"      score="5.60" max-score="6" variant="secondary"></compare-bar>
+      </compare-card>
+    </bd-compare-section>
+  `
+};
+
+// ─── Single CompareCard ───────────────────────────────────────────────────────
+
+export const SingleCard = {
+  name  : "compare-card (isolated)",
+  render: () => html`
+    <div style="padding: 2rem; background: #f5f6fa; max-width: 480px;">
+      <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)"
+        footnote="Overall Score. July 2011 – February 2025. Source AV TEST.org"
+        footnote-href="${AV_TEST_URL}"
+        icon-src="${SHIELD_ICON}"
+      >
+        <compare-bar label="Bitdefender" score="5.95" max-score="6" variant="primary"></compare-bar>
+        <compare-bar label="Norton"      score="5.89" max-score="6" variant="secondary"></compare-bar>
+        <compare-bar label="McAfee"      score="5.45" max-score="6" variant="secondary"></compare-bar>
+      </compare-card>
+    </div>
+  `
+};
+
+// ─── CompareBar showcase ──────────────────────────────────────────────────────
+
+export const BarsShowcase = {
+  name  : "compare-bar (isolated)",
+  render: () => html`
+    <div style="padding: 2rem; background: #f5f6fa; max-width: 480px;
+                display: flex; flex-direction: column; gap: 0.75rem;">
+      <compare-bar label="Primary bar (blue)"   score="5.95" max-score="6" variant="primary"></compare-bar>
+      <compare-bar label="Secondary bar (grey)" score="5.50" max-score="6" variant="secondary"></compare-bar>
+      <compare-bar label="Low score"            score="2.10" max-score="6" variant="secondary"></compare-bar>
+      <compare-bar label="Perfect score"        score="6"    max-score="6" variant="primary" score-label="6 / 6"></compare-bar>
+    </div>
+  `
+};
+
+// ─── No heading ───────────────────────────────────────────────────────────────
+
+export const NoHeading = {
+  name  : "No Section Heading",
+  render: () => html`
+    <bd-compare-section gap="32px">
+      <compare-card
+        title="Protection"
+        description="Scale 0–6."
+        footnote="Overall Score. July 2011 – February 2025. Source AV TEST.org"
+        footnote-href="${AV_TEST_URL}"
+        icon-src="${SHIELD_ICON}"
+      >
+        <compare-bar label="Bitdefender" score="5.95" max-score="6" variant="primary"></compare-bar>
+        <compare-bar label="Competitor"  score="5.20" max-score="6" variant="secondary"></compare-bar>
+      </compare-card>
+
+      <compare-card
+        title="Performance"
+        description="Scale 0–6."
+        footnote="Overall Score. February 2013 - February 2025. Source AV TEST.org"
+        footnote-href="${AV_TEST_URL}"
+        icon-src="${SPEEDOMETER_ICON}"
+      >
+        <compare-bar label="Bitdefender" score="5.86" max-score="6" variant="primary"></compare-bar>
+        <compare-bar label="Competitor"  score="5.10" max-score="6" variant="secondary"></compare-bar>
+      </compare-card>
+    </bd-compare-section>
+  `
+};
+
+// ─── Custom bar height & radius ───────────────────────────────────────────────
+
+export const CustomBarSize = {
+  name  : "Custom Bar Height & Radius",
+  render: () => html`
+    <bd-compare-section
+      title="Tall bars, pill radius"
+      gap="32px"
+      style="
+        --cs-bar-height: 56px;
+        --cs-bar-radius: 999px;
+      "
+    >
+      <compare-card
+        title="Best Protection"
+        description="Scale 0–6."
+        footnote="Overall Score. July 2011 – February 2025. Source AV TEST.org"
+        footnote-href="${AV_TEST_URL}"
+        icon-src="${SHIELD_ICON}"
+      >
+        <compare-bar label="Bitdefender" score="5.95" max-score="6" variant="primary"></compare-bar>
+        <compare-bar label="Norton"      score="5.89" max-score="6" variant="secondary"></compare-bar>
+        <compare-bar label="McAfee"      score="5.45" max-score="6" variant="secondary"></compare-bar>
+      </compare-card>
+
+      <compare-card
+        title="Best Performance"
+        description="Scale 0–6."
+        footnote="Overall Score. February 2013 - February 2025. Source AV TEST.org"
+        footnote-href="${AV_TEST_URL}"
+        icon-src="${SPEEDOMETER_ICON}"
+      >
+        <compare-bar label="Bitdefender" score="5.86" max-score="6" variant="primary"></compare-bar>
+        <compare-bar label="Norton"      score="5.59" max-score="6" variant="secondary"></compare-bar>
+        <compare-bar label="McAfee"      score="5.53" max-score="6" variant="secondary"></compare-bar>
+      </compare-card>
+    </bd-compare-section>
+  `
+};
+
+// ─── Custom gap ───────────────────────────────────────────────────────────────
+
+export const CustomGapTwoCards = {
+  name  : "Custom Gap — 2 cards (16px)",
+  render: () => html`
+    <bd-compare-section
+      title="2 Columns — 16px gap"
+      columns="2"
+      gap="16px"
+    >
+      <compare-card
+        title="Best Protection"
+        description="Scale of 0–6. Higher is better."
+        footnote="Overall Score. July 2011 – February 2025. Source AV TEST.org"
+        footnote-href="${AV_TEST_URL}"
+        icon-src="${SHIELD_ICON}"
+      >
+        <compare-bar label="Bitdefender" score="5.95" max-score="6" variant="primary"></compare-bar>
+        <compare-bar label="Norton"      score="5.59" max-score="6" variant="secondary"></compare-bar>
+        <compare-bar label="McAfee"      score="5.45" max-score="6" variant="secondary"></compare-bar>
+      </compare-card>
+
+      <compare-card
+        title="Best Performance"
+        description="Scale of 0–6. Higher = lightest impact."
+        footnote="Overall Score. February 2013 - February 2025. Source AV TEST.org"
+        footnote-href="${AV_TEST_URL}"
+        icon-src="${SPEEDOMETER_ICON}"
+      >
+        <compare-bar label="Bitdefender" score="5.86" max-score="6" variant="primary"></compare-bar>
+        <compare-bar label="Norton"      score="5.59" max-score="6" variant="secondary"></compare-bar>
+        <compare-bar label="McAfee"      score="5.53" max-score="6" variant="secondary"></compare-bar>
+      </compare-card>
+    </bd-compare-section>
+  `
+};
+
+export const CustomGapThreeCards = {
+  name  : "Custom Gap — 3 cards (12px)",
+  render: () => html`
+    <bd-compare-section
+      title="3 Columns — 12px gap"
+      columns="3"
+      gap="12px"
+    >
+      <compare-card
+        title="Best Protection"
+        description="Scale of 0–6. Higher is better."
+        footnote="Overall Score. July 2011 – February 2025. Source AV TEST.org"
+        footnote-href="${AV_TEST_URL}"
+        icon-src="${SHIELD_ICON}"
+      >
+        <compare-bar label="Bitdefender" score="5.95" max-score="6" variant="primary"></compare-bar>
+        <compare-bar label="Norton"      score="5.89" max-score="6" variant="secondary"></compare-bar>
+        <compare-bar label="McAfee"      score="5.45" max-score="6" variant="secondary"></compare-bar>
+      </compare-card>
+
+      <compare-card
+        title="Best Performance"
+        description="Scale of 0–6. Higher = lightest impact."
+        footnote="Overall Score. February 2013 - February 2025. Source AV TEST.org"
+        footnote-href="${AV_TEST_URL}"
+        icon-src="${SPEEDOMETER_ICON}"
+      >
+        <compare-bar label="Bitdefender" score="5.86" max-score="6" variant="primary"></compare-bar>
+        <compare-bar label="Norton"      score="5.59" max-score="6" variant="secondary"></compare-bar>
+        <compare-bar label="McAfee"      score="5.53" max-score="6" variant="secondary"></compare-bar>
+      </compare-card>
+
+      <compare-card
+        title="Best Repair"
+        description="Ability to repair an infected system (0–6)."
+        footnote="Overall Score. 2020 – February 2025. Source AV TEST.org"
+        footnote-href="${AV_TEST_URL}"
+        icon-src="${REPAIR_ICON}"
+      >
+        <compare-bar label="Bitdefender" score="5.90" max-score="6" variant="primary"></compare-bar>
+        <compare-bar label="Kaspersky"   score="5.75" max-score="6" variant="secondary"></compare-bar>
+        <compare-bar label="Norton"      score="5.60" max-score="6" variant="secondary"></compare-bar>
+      </compare-card>
+    </bd-compare-section>
+  `
+};