@repobit/dex-system-design 0.23.6 → 0.23.8
This diff represents the content of publicly available package versions that have been released to one of the supported registries. The information contained in this diff is provided for informational purposes only and reflects changes between package versions as they appear in their respective public registries.
- package/CHANGELOG.md +15 -0
- package/package.json +2 -2
- package/src/components/awards/awards.js +1 -1
- package/src/components/awards/awards.stories.js +4 -1
- package/src/components/compare/compare.css.js +121 -72
- package/src/components/compare/compare.js +350 -72
- package/src/components/compare/compare.stories.js +360 -106
|
@@ -1,16 +1,16 @@
|
|
|
1
1
|
import { html } from "lit";
|
|
2
|
+
import "../heading/heading.js";
|
|
3
|
+
import "../image/image.js";
|
|
4
|
+
import "../link/link.js";
|
|
5
|
+
import "../paragraph/paragraph.js";
|
|
2
6
|
import "./compare.js";
|
|
3
7
|
|
|
4
|
-
// ─── Asset paths ──────────────────────────────────────────────────────────────
|
|
5
|
-
|
|
6
8
|
const SHIELD_ICON = "/assets/shield-check.svg";
|
|
7
9
|
const SPEEDOMETER_ICON = "/assets/speedometer.svg";
|
|
8
|
-
const REPAIR_ICON = "/assets/
|
|
10
|
+
const REPAIR_ICON = "/assets/repair.svg";
|
|
9
11
|
|
|
10
12
|
const AV_TEST_URL = "https://www.av-test.org/en/antivirus/home-users/";
|
|
11
13
|
|
|
12
|
-
// ─── Meta ─────────────────────────────────────────────────────────────────────
|
|
13
|
-
|
|
14
14
|
export default {
|
|
15
15
|
title : "Components/CompareSection",
|
|
16
16
|
tags : ["autodocs"],
|
|
@@ -19,81 +19,77 @@ export default {
|
|
|
19
19
|
docs : {
|
|
20
20
|
description: {
|
|
21
21
|
component: `
|
|
22
|
-
Three Lit
|
|
22
|
+
Three Lit web components for building customizable comparison sections with animated bars and stretch mapping.
|
|
23
23
|
|
|
24
24
|
\`\`\`html
|
|
25
|
-
<bd-compare-section title="How Bitdefender Compares
|
|
26
|
-
|
|
25
|
+
<bd-compare-section title="How Bitdefender Compares" gap="32px">
|
|
27
26
|
<compare-card
|
|
28
27
|
title="Best Protection"
|
|
29
|
-
description="
|
|
28
|
+
description="Scale of 0–6. Higher is better."
|
|
30
29
|
footnote="Overall Score. July 2011 – February 2025. Source AV TEST.org"
|
|
31
30
|
footnote-href="https://www.av-test.org/en/antivirus/home-users/"
|
|
32
|
-
icon-src="/assets/shield-check.
|
|
31
|
+
icon-src="/assets/shield-check.svg"
|
|
32
|
+
bar-stretch="false"
|
|
33
33
|
>
|
|
34
34
|
<compare-bar label="Bitdefender" score="5.95" max-score="6" variant="primary"></compare-bar>
|
|
35
|
-
<compare-bar label="Norton" score="5.59" max-score="6" variant="secondary"></compare-bar>
|
|
36
|
-
<compare-bar label="McAfee" score="5.45" max-score="6" variant="secondary"></compare-bar>
|
|
37
|
-
</compare-card>
|
|
38
|
-
|
|
39
|
-
<compare-card
|
|
40
|
-
title="Best Performance"
|
|
41
|
-
description="Lightest Impact on Performance (On a scale of 0 to 6, with 6 as the lightest level of impact)"
|
|
42
|
-
footnote="Overall Score. February 2013 - February 2025. Source AV TEST.org"
|
|
43
|
-
footnote-href="https://www.av-test.org/en/antivirus/home-users/"
|
|
44
|
-
icon-src="/assets/speedometer.png"
|
|
45
|
-
>
|
|
46
|
-
<compare-bar label="Bitdefender" score="5.86" max-score="6" variant="primary"></compare-bar>
|
|
47
|
-
<compare-bar label="Norton" score="5.59" max-score="6" variant="secondary"></compare-bar>
|
|
48
|
-
<compare-bar label="McAfee" score="5.53" max-score="6" variant="secondary"></compare-bar>
|
|
35
|
+
<compare-bar label="Norton" score="5.59" max-score="6" variant="secondary" scale="0.93"></compare-bar>
|
|
36
|
+
<compare-bar label="McAfee" score="5.45" max-score="6" variant="secondary" scale="0.47"></compare-bar>
|
|
49
37
|
</compare-card>
|
|
50
|
-
|
|
51
38
|
</bd-compare-section>
|
|
52
39
|
\`\`\`
|
|
53
40
|
|
|
54
41
|
### Attributes
|
|
55
42
|
|
|
56
43
|
#### \`bd-compare-section\`
|
|
57
|
-
| Attribute | Type
|
|
58
|
-
|
|
59
|
-
| \`title\` | String
|
|
60
|
-
| \`subtitle\` | String
|
|
61
|
-
| \`columns\` | Number
|
|
62
|
-
| \`gap\` | String
|
|
44
|
+
| Attribute | Type | Default | Description |
|
|
45
|
+
|------------|--------|---------|------------------------------------|
|
|
46
|
+
| \`title\` | String | — | Section heading |
|
|
47
|
+
| \`subtitle\` | String | — | Optional subheading |
|
|
48
|
+
| \`columns\` | Number | \`2\` | Number of columns |
|
|
49
|
+
| \`gap\` | String | — | Gap between cards e.g. \`"32px"\` |
|
|
63
50
|
|
|
64
51
|
#### \`compare-card\`
|
|
65
|
-
| Attribute
|
|
66
|
-
|
|
67
|
-
| \`title\`
|
|
68
|
-
| \`description\`
|
|
69
|
-
| \`footnote\`
|
|
70
|
-
| \`footnote-href\`
|
|
71
|
-
| \`icon-src\`
|
|
52
|
+
| Attribute | Type | Default | Description |
|
|
53
|
+
|----------------------|---------|---------|------------------------------------------------------------|
|
|
54
|
+
| \`title\` | String | — | Card heading |
|
|
55
|
+
| \`description\` | String | — | Explanatory subtitle |
|
|
56
|
+
| \`footnote\` | String | — | Source text at the bottom |
|
|
57
|
+
| \`footnote-href\` | String | — | URL — links text after "Source " |
|
|
58
|
+
| \`icon-src\` | String | — | Path to icon asset |
|
|
59
|
+
| \`bar-stretch\` | Boolean | \`true\`| Stretch secondary bars for visual clarity |
|
|
60
|
+
| \`bar-fill-min\` | Number | \`50\` | Visual floor % for the weakest competitor |
|
|
61
|
+
| \`bar-stretch-gamma\` | Number | \`1\` | Curve exponent — >1 widens the gap between competitors |
|
|
62
|
+
| \`chart-scale\` | Number | \`6\` | Scale announced to screen readers |
|
|
72
63
|
|
|
73
64
|
#### \`compare-bar\`
|
|
74
|
-
| Attribute
|
|
75
|
-
|
|
76
|
-
| \`label\`
|
|
77
|
-
| \`score\`
|
|
78
|
-
| \`max-score\`
|
|
79
|
-
| \`variant\`
|
|
80
|
-
| \`score-label\`
|
|
81
|
-
|
|
82
|
-
|
|
83
|
-
|
|
84
|
-
|
|
85
|
-
|
|
86
|
-
|
|
|
87
|
-
|
|
88
|
-
| \`--cs-bar-
|
|
89
|
-
| \`--cs-bar-
|
|
90
|
-
| \`--cs-
|
|
65
|
+
| Attribute | Type | Default | Description |
|
|
66
|
+
|-------------------|--------|---------------|-----------------------------------------------------|
|
|
67
|
+
| \`label\` | String | — | Brand / product name |
|
|
68
|
+
| \`score\` | Number | — | Numeric score |
|
|
69
|
+
| \`max-score\` | Number | \`6\` | Max possible score |
|
|
70
|
+
| \`variant\` | String | \`secondary\` | \`primary\` or \`secondary\` |
|
|
71
|
+
| \`score-label\` | String | — | Override display text for the score |
|
|
72
|
+
| \`reference-score\` | Number | — | Baseline score for stretch mapping (set by card) |
|
|
73
|
+
| \`scale\` | Number | \`1\` | Visual width multiplier for secondary bars (0–1) |
|
|
74
|
+
|
|
75
|
+
### CSS Custom Properties (overridable on \`bd-compare-section\`)
|
|
76
|
+
|
|
77
|
+
| Property | Default | Description |
|
|
78
|
+
|-----------------------------|--------------------------------|--------------------------------|
|
|
79
|
+
| \`--cs-bar-primary-bg\` | \`var(--color-blue-500)\` | Primary bar fill colour |
|
|
80
|
+
| \`--cs-bar-primary-fg\` | \`var(--color-neutral-0)\` | Primary bar text colour |
|
|
81
|
+
| \`--cs-bar-secondary-bg\` | \`var(--color-neutral-100)\` | Secondary bar fill colour |
|
|
82
|
+
| \`--cs-bar-track-border\` | \`var(--color-neutral-200)\` | Bar track border colour |
|
|
83
|
+
| \`--cs-bar-height\` | \`var(--dimension-48px)\` | Height of every bar |
|
|
84
|
+
| \`--cs-gap\` | \`var(--spacing-32)\` | Gap between cards |
|
|
85
|
+
| \`--cs-grid-max\` | \`1228px\` | Max width of the card grid |
|
|
91
86
|
`
|
|
92
87
|
}
|
|
93
88
|
}
|
|
94
89
|
}
|
|
95
90
|
};
|
|
96
91
|
|
|
92
|
+
|
|
97
93
|
// ─── Default ─────────────────────────────────────────────────────────────────
|
|
98
94
|
|
|
99
95
|
export const Default = {
|
|
@@ -109,27 +105,30 @@ export const Default = {
|
|
|
109
105
|
footnote="Overall Score. July 2011 – February 2025. Source AV TEST.org"
|
|
110
106
|
footnote-href="${AV_TEST_URL}"
|
|
111
107
|
icon-src="${SHIELD_ICON}"
|
|
108
|
+
bar-stretch="false"
|
|
112
109
|
>
|
|
113
110
|
<compare-bar label="Bitdefender" score="5.95" max-score="6" variant="primary"></compare-bar>
|
|
114
|
-
<compare-bar label="Norton" score="5.59" max-score="6" variant="secondary"></compare-bar>
|
|
115
|
-
<compare-bar label="McAfee" score="5.45" max-score="6" variant="secondary"></compare-bar>
|
|
111
|
+
<compare-bar label="Norton" score="5.59" max-score="6" variant="secondary" scale="0.93"></compare-bar>
|
|
112
|
+
<compare-bar label="McAfee" score="5.45" max-score="6" variant="secondary" scale="0.47"></compare-bar>
|
|
116
113
|
</compare-card>
|
|
117
114
|
|
|
118
115
|
<compare-card
|
|
119
116
|
title="Best Performance"
|
|
120
117
|
description="Lightest Impact on Performance (On a scale of 0 to 6, with 6 as the lightest level of impact)"
|
|
121
|
-
footnote="Overall Score. February 2013
|
|
118
|
+
footnote="Overall Score. February 2013 – February 2025. Source AV TEST.org"
|
|
122
119
|
footnote-href="${AV_TEST_URL}"
|
|
123
120
|
icon-src="${SPEEDOMETER_ICON}"
|
|
121
|
+
bar-stretch="false"
|
|
124
122
|
>
|
|
125
123
|
<compare-bar label="Bitdefender" score="5.86" max-score="6" variant="primary"></compare-bar>
|
|
126
|
-
<compare-bar label="Norton" score="5.
|
|
127
|
-
<compare-bar label="McAfee" score="5.53" max-score="6" variant="secondary"></compare-bar>
|
|
124
|
+
<compare-bar label="Norton" score="5.89" max-score="6" variant="secondary" scale="0.73"></compare-bar>
|
|
125
|
+
<compare-bar label="McAfee" score="5.53" max-score="6" variant="secondary" scale="0.47"></compare-bar>
|
|
128
126
|
</compare-card>
|
|
129
127
|
</bd-compare-section>
|
|
130
128
|
`
|
|
131
129
|
};
|
|
132
130
|
|
|
131
|
+
|
|
133
132
|
// ─── Three columns ────────────────────────────────────────────────────────────
|
|
134
133
|
|
|
135
134
|
export const ThreeColumns = {
|
|
@@ -147,22 +146,24 @@ export const ThreeColumns = {
|
|
|
147
146
|
footnote="Overall Score. July 2011 – February 2025. Source AV TEST.org"
|
|
148
147
|
footnote-href="${AV_TEST_URL}"
|
|
149
148
|
icon-src="${SHIELD_ICON}"
|
|
149
|
+
bar-stretch="false"
|
|
150
150
|
>
|
|
151
151
|
<compare-bar label="Bitdefender" score="5.95" max-score="6" variant="primary"></compare-bar>
|
|
152
|
-
<compare-bar label="Norton" score="5.89" max-score="6" variant="secondary"></compare-bar>
|
|
153
|
-
<compare-bar label="McAfee" score="5.45" max-score="6" variant="secondary"></compare-bar>
|
|
152
|
+
<compare-bar label="Norton" score="5.89" max-score="6" variant="secondary" scale="0.93"></compare-bar>
|
|
153
|
+
<compare-bar label="McAfee" score="5.45" max-score="6" variant="secondary" scale="0.47"></compare-bar>
|
|
154
154
|
</compare-card>
|
|
155
155
|
|
|
156
156
|
<compare-card
|
|
157
157
|
title="Best Performance"
|
|
158
158
|
description="Scale of 0–6. Higher = lightest impact."
|
|
159
|
-
footnote="Overall Score. February 2013
|
|
159
|
+
footnote="Overall Score. February 2013 – February 2025. Source AV TEST.org"
|
|
160
160
|
footnote-href="${AV_TEST_URL}"
|
|
161
161
|
icon-src="${SPEEDOMETER_ICON}"
|
|
162
|
+
bar-stretch="false"
|
|
162
163
|
>
|
|
163
164
|
<compare-bar label="Bitdefender" score="5.86" max-score="6" variant="primary"></compare-bar>
|
|
164
|
-
<compare-bar label="Norton" score="5.59" max-score="6" variant="secondary"></compare-bar>
|
|
165
|
-
<compare-bar label="McAfee" score="5.53" max-score="6" variant="secondary"></compare-bar>
|
|
165
|
+
<compare-bar label="Norton" score="5.59" max-score="6" variant="secondary" scale="0.93"></compare-bar>
|
|
166
|
+
<compare-bar label="McAfee" score="5.53" max-score="6" variant="secondary" scale="0.47"></compare-bar>
|
|
166
167
|
</compare-card>
|
|
167
168
|
|
|
168
169
|
<compare-card
|
|
@@ -171,52 +172,141 @@ export const ThreeColumns = {
|
|
|
171
172
|
footnote="Overall Score. 2020 – February 2025. Source AV TEST.org"
|
|
172
173
|
footnote-href="${AV_TEST_URL}"
|
|
173
174
|
icon-src="${REPAIR_ICON}"
|
|
175
|
+
bar-stretch="false"
|
|
174
176
|
>
|
|
175
177
|
<compare-bar label="Bitdefender" score="5.90" max-score="6" variant="primary"></compare-bar>
|
|
176
|
-
<compare-bar label="Kaspersky" score="5.75" max-score="6" variant="secondary"></compare-bar>
|
|
177
|
-
<compare-bar label="Norton" score="5.60" max-score="6" variant="secondary"></compare-bar>
|
|
178
|
+
<compare-bar label="Kaspersky" score="5.75" max-score="6" variant="secondary" scale="0.93"></compare-bar>
|
|
179
|
+
<compare-bar label="Norton" score="5.60" max-score="6" variant="secondary" scale="0.47"></compare-bar>
|
|
178
180
|
</compare-card>
|
|
179
181
|
</bd-compare-section>
|
|
180
182
|
`
|
|
181
183
|
};
|
|
182
184
|
|
|
183
|
-
|
|
185
|
+
|
|
186
|
+
// ─── No stretch (raw proportional) ───────────────────────────────────────────
|
|
187
|
+
|
|
188
|
+
export const NoStretch = {
|
|
189
|
+
name : "No Stretch (proportional)",
|
|
190
|
+
render: () => html`
|
|
191
|
+
<bd-compare-section
|
|
192
|
+
title="No Bar Stretch"
|
|
193
|
+
subtitle="Bars map directly to score / max-score. Small differences between brands are less visible."
|
|
194
|
+
gap="32px"
|
|
195
|
+
>
|
|
196
|
+
<compare-card
|
|
197
|
+
title="Best Protection"
|
|
198
|
+
description="Scale of 0–6. Higher is better."
|
|
199
|
+
footnote="Overall Score. July 2011 – February 2025. Source AV TEST.org"
|
|
200
|
+
footnote-href="${AV_TEST_URL}"
|
|
201
|
+
icon-src="${SHIELD_ICON}"
|
|
202
|
+
bar-stretch="false"
|
|
203
|
+
>
|
|
204
|
+
<compare-bar label="Bitdefender" score="5.95" max-score="6" variant="primary"></compare-bar>
|
|
205
|
+
<compare-bar label="Norton" score="5.59" max-score="6" variant="secondary"></compare-bar>
|
|
206
|
+
<compare-bar label="McAfee" score="5.45" max-score="6" variant="secondary"></compare-bar>
|
|
207
|
+
</compare-card>
|
|
208
|
+
|
|
209
|
+
<compare-card
|
|
210
|
+
title="Best Performance"
|
|
211
|
+
description="Scale of 0–6. Higher = lightest impact."
|
|
212
|
+
footnote="Overall Score. February 2013 – February 2025. Source AV TEST.org"
|
|
213
|
+
footnote-href="${AV_TEST_URL}"
|
|
214
|
+
icon-src="${SPEEDOMETER_ICON}"
|
|
215
|
+
bar-stretch="false"
|
|
216
|
+
>
|
|
217
|
+
<compare-bar label="Bitdefender" score="5.86" max-score="6" variant="primary"></compare-bar>
|
|
218
|
+
<compare-bar label="Norton" score="5.59" max-score="6" variant="secondary"></compare-bar>
|
|
219
|
+
<compare-bar label="McAfee" score="5.53" max-score="6" variant="secondary"></compare-bar>
|
|
220
|
+
</compare-card>
|
|
221
|
+
</bd-compare-section>
|
|
222
|
+
`
|
|
223
|
+
};
|
|
224
|
+
|
|
225
|
+
|
|
226
|
+
// ─── Stretch gamma ────────────────────────────────────────────────────────────
|
|
227
|
+
|
|
228
|
+
export const StretchGamma = {
|
|
229
|
+
name : "Stretch Gamma > 1",
|
|
230
|
+
render: () => html`
|
|
231
|
+
<bd-compare-section
|
|
232
|
+
title="Gamma = 2 (wider visual gap)"
|
|
233
|
+
subtitle="bar-stretch-gamma='2' curves the spread so stronger competitors sit noticeably closer to Bitdefender."
|
|
234
|
+
gap="32px"
|
|
235
|
+
>
|
|
236
|
+
<compare-card
|
|
237
|
+
title="Best Protection"
|
|
238
|
+
description="Scale of 0–6. Higher is better."
|
|
239
|
+
footnote="Overall Score. July 2011 – February 2025. Source AV TEST.org"
|
|
240
|
+
footnote-href="${AV_TEST_URL}"
|
|
241
|
+
icon-src="${SHIELD_ICON}"
|
|
242
|
+
bar-stretch
|
|
243
|
+
bar-fill-min="50"
|
|
244
|
+
bar-stretch-gamma="2"
|
|
245
|
+
>
|
|
246
|
+
<compare-bar label="Bitdefender" score="5.95" max-score="6" variant="primary"></compare-bar>
|
|
247
|
+
<compare-bar label="Norton" score="5.59" max-score="6" variant="secondary"></compare-bar>
|
|
248
|
+
<compare-bar label="McAfee" score="5.45" max-score="6" variant="secondary"></compare-bar>
|
|
249
|
+
</compare-card>
|
|
250
|
+
|
|
251
|
+
<compare-card
|
|
252
|
+
title="Best Performance"
|
|
253
|
+
description="Scale of 0–6. Higher = lightest impact."
|
|
254
|
+
footnote="Overall Score. February 2013 – February 2025. Source AV TEST.org"
|
|
255
|
+
footnote-href="${AV_TEST_URL}"
|
|
256
|
+
icon-src="${SPEEDOMETER_ICON}"
|
|
257
|
+
bar-stretch
|
|
258
|
+
bar-fill-min="50"
|
|
259
|
+
bar-stretch-gamma="2"
|
|
260
|
+
>
|
|
261
|
+
<compare-bar label="Bitdefender" score="5.86" max-score="6" variant="primary"></compare-bar>
|
|
262
|
+
<compare-bar label="Norton" score="5.59" max-score="6" variant="secondary"></compare-bar>
|
|
263
|
+
<compare-bar label="McAfee" score="5.53" max-score="6" variant="secondary"></compare-bar>
|
|
264
|
+
</compare-card>
|
|
265
|
+
</bd-compare-section>
|
|
266
|
+
`
|
|
267
|
+
};
|
|
268
|
+
|
|
269
|
+
|
|
270
|
+
// ─── Single card ──────────────────────────────────────────────────────────────
|
|
184
271
|
|
|
185
272
|
export const SingleCard = {
|
|
186
273
|
name : "compare-card (isolated)",
|
|
187
274
|
render: () => html`
|
|
188
|
-
<div style="padding: 2rem; background: #f5f6fa; max-width:
|
|
275
|
+
<div style="padding: 2rem; background: #f5f6fa; max-width: 520px;">
|
|
189
276
|
<compare-card
|
|
190
277
|
title="Best Protection"
|
|
191
278
|
description="Best Protection against e-Threats (On a scale of 0 to 6, with 6 as the highest level of protection)"
|
|
192
279
|
footnote="Overall Score. July 2011 – February 2025. Source AV TEST.org"
|
|
193
280
|
footnote-href="${AV_TEST_URL}"
|
|
194
281
|
icon-src="${SHIELD_ICON}"
|
|
282
|
+
bar-stretch="false"
|
|
195
283
|
>
|
|
196
284
|
<compare-bar label="Bitdefender" score="5.95" max-score="6" variant="primary"></compare-bar>
|
|
197
|
-
<compare-bar label="Norton" score="5.89" max-score="6" variant="secondary"></compare-bar>
|
|
198
|
-
<compare-bar label="McAfee" score="5.45" max-score="6" variant="secondary"></compare-bar>
|
|
285
|
+
<compare-bar label="Norton" score="5.89" max-score="6" variant="secondary" scale="0.93"></compare-bar>
|
|
286
|
+
<compare-bar label="McAfee" score="5.45" max-score="6" variant="secondary" scale="0.47"></compare-bar>
|
|
199
287
|
</compare-card>
|
|
200
288
|
</div>
|
|
201
289
|
`
|
|
202
290
|
};
|
|
203
291
|
|
|
204
|
-
|
|
292
|
+
|
|
293
|
+
// ─── Bar showcase ─────────────────────────────────────────────────────────────
|
|
205
294
|
|
|
206
295
|
export const BarsShowcase = {
|
|
207
296
|
name : "compare-bar (isolated)",
|
|
208
297
|
render: () => html`
|
|
209
|
-
<div style="padding: 2rem; background: #f5f6fa; max-width:
|
|
298
|
+
<div style="padding: 2rem; background: #f5f6fa; max-width: 520px;
|
|
210
299
|
display: flex; flex-direction: column; gap: 0.75rem;">
|
|
211
300
|
<compare-bar label="Primary bar (blue)" score="5.95" max-score="6" variant="primary"></compare-bar>
|
|
212
|
-
<compare-bar label="Secondary bar (grey)" score="5.50" max-score="6" variant="secondary"></compare-bar>
|
|
213
|
-
<compare-bar label="Low score" score="2.10" max-score="6" variant="secondary"></compare-bar>
|
|
301
|
+
<compare-bar label="Secondary bar (grey)" score="5.50" max-score="6" variant="secondary" scale="0.93"></compare-bar>
|
|
302
|
+
<compare-bar label="Low score" score="2.10" max-score="6" variant="secondary" scale="0.47"></compare-bar>
|
|
214
303
|
<compare-bar label="Perfect score" score="6" max-score="6" variant="primary" score-label="6 / 6"></compare-bar>
|
|
215
304
|
</div>
|
|
216
305
|
`
|
|
217
306
|
};
|
|
218
307
|
|
|
219
|
-
|
|
308
|
+
|
|
309
|
+
// ─── No section heading ───────────────────────────────────────────────────────
|
|
220
310
|
|
|
221
311
|
export const NoHeading = {
|
|
222
312
|
name : "No Section Heading",
|
|
@@ -228,65 +318,108 @@ export const NoHeading = {
|
|
|
228
318
|
footnote="Overall Score. July 2011 – February 2025. Source AV TEST.org"
|
|
229
319
|
footnote-href="${AV_TEST_URL}"
|
|
230
320
|
icon-src="${SHIELD_ICON}"
|
|
321
|
+
bar-stretch="false"
|
|
231
322
|
>
|
|
232
323
|
<compare-bar label="Bitdefender" score="5.95" max-score="6" variant="primary"></compare-bar>
|
|
233
|
-
<compare-bar label="Competitor" score="5.20" max-score="6" variant="secondary"></compare-bar>
|
|
324
|
+
<compare-bar label="Competitor" score="5.20" max-score="6" variant="secondary" scale="0.47"></compare-bar>
|
|
234
325
|
</compare-card>
|
|
235
326
|
|
|
236
327
|
<compare-card
|
|
237
328
|
title="Performance"
|
|
238
329
|
description="Scale 0–6."
|
|
239
|
-
footnote="Overall Score. February 2013
|
|
330
|
+
footnote="Overall Score. February 2013 – February 2025. Source AV TEST.org"
|
|
240
331
|
footnote-href="${AV_TEST_URL}"
|
|
241
332
|
icon-src="${SPEEDOMETER_ICON}"
|
|
333
|
+
bar-stretch="false"
|
|
242
334
|
>
|
|
243
335
|
<compare-bar label="Bitdefender" score="5.86" max-score="6" variant="primary"></compare-bar>
|
|
244
|
-
<compare-bar label="Competitor" score="5.10" max-score="6" variant="secondary"></compare-bar>
|
|
336
|
+
<compare-bar label="Competitor" score="5.10" max-score="6" variant="secondary" scale="0.47"></compare-bar>
|
|
245
337
|
</compare-card>
|
|
246
338
|
</bd-compare-section>
|
|
247
339
|
`
|
|
248
340
|
};
|
|
249
341
|
|
|
250
|
-
// ─── Custom bar height & radius ───────────────────────────────────────────────
|
|
251
342
|
|
|
252
|
-
|
|
253
|
-
|
|
343
|
+
// ─── Tall bars ────────────────────────────────────────────────────────────────
|
|
344
|
+
|
|
345
|
+
export const TallBars = {
|
|
346
|
+
name : "Tall Bars (bars-tall)",
|
|
254
347
|
render: () => html`
|
|
255
348
|
<bd-compare-section
|
|
256
|
-
title="Tall
|
|
349
|
+
title="Tall Bars"
|
|
257
350
|
gap="32px"
|
|
258
|
-
|
|
259
|
-
--cs-bar-height: 56px;
|
|
260
|
-
--cs-bar-radius: 999px;
|
|
261
|
-
"
|
|
351
|
+
class="bars-tall"
|
|
262
352
|
>
|
|
263
353
|
<compare-card
|
|
264
354
|
title="Best Protection"
|
|
265
|
-
description="Scale 0–6."
|
|
355
|
+
description="Scale of 0–6. Higher is better."
|
|
266
356
|
footnote="Overall Score. July 2011 – February 2025. Source AV TEST.org"
|
|
267
357
|
footnote-href="${AV_TEST_URL}"
|
|
268
358
|
icon-src="${SHIELD_ICON}"
|
|
359
|
+
bar-stretch="false"
|
|
269
360
|
>
|
|
270
361
|
<compare-bar label="Bitdefender" score="5.95" max-score="6" variant="primary"></compare-bar>
|
|
271
|
-
<compare-bar label="Norton" score="5.
|
|
272
|
-
<compare-bar label="McAfee" score="5.45" max-score="6" variant="secondary"></compare-bar>
|
|
362
|
+
<compare-bar label="Norton" score="5.59" max-score="6" variant="secondary" scale="0.93"></compare-bar>
|
|
363
|
+
<compare-bar label="McAfee" score="5.45" max-score="6" variant="secondary" scale="0.47"></compare-bar>
|
|
273
364
|
</compare-card>
|
|
274
365
|
|
|
275
366
|
<compare-card
|
|
276
367
|
title="Best Performance"
|
|
277
|
-
description="Scale 0–6."
|
|
278
|
-
footnote="Overall Score. February 2013
|
|
368
|
+
description="Scale of 0–6. Higher = lightest impact."
|
|
369
|
+
footnote="Overall Score. February 2013 – February 2025. Source AV TEST.org"
|
|
279
370
|
footnote-href="${AV_TEST_URL}"
|
|
280
371
|
icon-src="${SPEEDOMETER_ICON}"
|
|
372
|
+
bar-stretch="false"
|
|
281
373
|
>
|
|
282
374
|
<compare-bar label="Bitdefender" score="5.86" max-score="6" variant="primary"></compare-bar>
|
|
283
|
-
<compare-bar label="Norton" score="5.59" max-score="6" variant="secondary"></compare-bar>
|
|
284
|
-
<compare-bar label="McAfee" score="5.53" max-score="6" variant="secondary"></compare-bar>
|
|
375
|
+
<compare-bar label="Norton" score="5.59" max-score="6" variant="secondary" scale="0.93"></compare-bar>
|
|
376
|
+
<compare-bar label="McAfee" score="5.53" max-score="6" variant="secondary" scale="0.47"></compare-bar>
|
|
377
|
+
</compare-card>
|
|
378
|
+
</bd-compare-section>
|
|
379
|
+
`
|
|
380
|
+
};
|
|
381
|
+
|
|
382
|
+
|
|
383
|
+
// ─── Compact bars ─────────────────────────────────────────────────────────────
|
|
384
|
+
|
|
385
|
+
export const CompactBars = {
|
|
386
|
+
name : "Compact Bars (bars-compact)",
|
|
387
|
+
render: () => html`
|
|
388
|
+
<bd-compare-section
|
|
389
|
+
title="Compact Bars"
|
|
390
|
+
gap="32px"
|
|
391
|
+
class="bars-compact"
|
|
392
|
+
>
|
|
393
|
+
<compare-card
|
|
394
|
+
title="Best Protection"
|
|
395
|
+
description="Scale of 0–6. Higher is better."
|
|
396
|
+
footnote="Overall Score. July 2011 – February 2025. Source AV TEST.org"
|
|
397
|
+
footnote-href="${AV_TEST_URL}"
|
|
398
|
+
icon-src="${SHIELD_ICON}"
|
|
399
|
+
bar-stretch="false"
|
|
400
|
+
>
|
|
401
|
+
<compare-bar label="Bitdefender" score="5.95" max-score="6" variant="primary"></compare-bar>
|
|
402
|
+
<compare-bar label="Norton" score="5.59" max-score="6" variant="secondary" scale="0.93"></compare-bar>
|
|
403
|
+
<compare-bar label="McAfee" score="5.45" max-score="6" variant="secondary" scale="0.47"></compare-bar>
|
|
404
|
+
</compare-card>
|
|
405
|
+
|
|
406
|
+
<compare-card
|
|
407
|
+
title="Best Performance"
|
|
408
|
+
description="Scale of 0–6. Higher = lightest impact."
|
|
409
|
+
footnote="Overall Score. February 2013 – February 2025. Source AV TEST.org"
|
|
410
|
+
footnote-href="${AV_TEST_URL}"
|
|
411
|
+
icon-src="${SPEEDOMETER_ICON}"
|
|
412
|
+
bar-stretch="false"
|
|
413
|
+
>
|
|
414
|
+
<compare-bar label="Bitdefender" score="5.86" max-score="6" variant="primary"></compare-bar>
|
|
415
|
+
<compare-bar label="Norton" score="5.59" max-score="6" variant="secondary" scale="0.93"></compare-bar>
|
|
416
|
+
<compare-bar label="McAfee" score="5.53" max-score="6" variant="secondary" scale="0.47"></compare-bar>
|
|
285
417
|
</compare-card>
|
|
286
418
|
</bd-compare-section>
|
|
287
419
|
`
|
|
288
420
|
};
|
|
289
421
|
|
|
422
|
+
|
|
290
423
|
// ─── Custom gap ───────────────────────────────────────────────────────────────
|
|
291
424
|
|
|
292
425
|
export const CustomGapTwoCards = {
|
|
@@ -303,22 +436,24 @@ export const CustomGapTwoCards = {
|
|
|
303
436
|
footnote="Overall Score. July 2011 – February 2025. Source AV TEST.org"
|
|
304
437
|
footnote-href="${AV_TEST_URL}"
|
|
305
438
|
icon-src="${SHIELD_ICON}"
|
|
439
|
+
bar-stretch="false"
|
|
306
440
|
>
|
|
307
441
|
<compare-bar label="Bitdefender" score="5.95" max-score="6" variant="primary"></compare-bar>
|
|
308
|
-
<compare-bar label="Norton" score="5.59" max-score="6" variant="secondary"></compare-bar>
|
|
309
|
-
<compare-bar label="McAfee" score="5.45" max-score="6" variant="secondary"></compare-bar>
|
|
442
|
+
<compare-bar label="Norton" score="5.59" max-score="6" variant="secondary" scale="0.93"></compare-bar>
|
|
443
|
+
<compare-bar label="McAfee" score="5.45" max-score="6" variant="secondary" scale="0.47"></compare-bar>
|
|
310
444
|
</compare-card>
|
|
311
445
|
|
|
312
446
|
<compare-card
|
|
313
447
|
title="Best Performance"
|
|
314
448
|
description="Scale of 0–6. Higher = lightest impact."
|
|
315
|
-
footnote="Overall Score. February 2013
|
|
449
|
+
footnote="Overall Score. February 2013 – February 2025. Source AV TEST.org"
|
|
316
450
|
footnote-href="${AV_TEST_URL}"
|
|
317
451
|
icon-src="${SPEEDOMETER_ICON}"
|
|
452
|
+
bar-stretch="false"
|
|
318
453
|
>
|
|
319
454
|
<compare-bar label="Bitdefender" score="5.86" max-score="6" variant="primary"></compare-bar>
|
|
320
|
-
<compare-bar label="Norton" score="5.59" max-score="6" variant="secondary"></compare-bar>
|
|
321
|
-
<compare-bar label="McAfee" score="5.53" max-score="6" variant="secondary"></compare-bar>
|
|
455
|
+
<compare-bar label="Norton" score="5.59" max-score="6" variant="secondary" scale="0.93"></compare-bar>
|
|
456
|
+
<compare-bar label="McAfee" score="5.53" max-score="6" variant="secondary" scale="0.47"></compare-bar>
|
|
322
457
|
</compare-card>
|
|
323
458
|
</bd-compare-section>
|
|
324
459
|
`
|
|
@@ -338,22 +473,24 @@ export const CustomGapThreeCards = {
|
|
|
338
473
|
footnote="Overall Score. July 2011 – February 2025. Source AV TEST.org"
|
|
339
474
|
footnote-href="${AV_TEST_URL}"
|
|
340
475
|
icon-src="${SHIELD_ICON}"
|
|
476
|
+
bar-stretch="false"
|
|
341
477
|
>
|
|
342
478
|
<compare-bar label="Bitdefender" score="5.95" max-score="6" variant="primary"></compare-bar>
|
|
343
|
-
<compare-bar label="Norton" score="5.89" max-score="6" variant="secondary"></compare-bar>
|
|
344
|
-
<compare-bar label="McAfee" score="5.45" max-score="6" variant="secondary"></compare-bar>
|
|
479
|
+
<compare-bar label="Norton" score="5.89" max-score="6" variant="secondary" scale="0.93"></compare-bar>
|
|
480
|
+
<compare-bar label="McAfee" score="5.45" max-score="6" variant="secondary" scale="0.47"></compare-bar>
|
|
345
481
|
</compare-card>
|
|
346
482
|
|
|
347
483
|
<compare-card
|
|
348
484
|
title="Best Performance"
|
|
349
485
|
description="Scale of 0–6. Higher = lightest impact."
|
|
350
|
-
footnote="Overall Score. February 2013
|
|
486
|
+
footnote="Overall Score. February 2013 – February 2025. Source AV TEST.org"
|
|
351
487
|
footnote-href="${AV_TEST_URL}"
|
|
352
488
|
icon-src="${SPEEDOMETER_ICON}"
|
|
489
|
+
bar-stretch="false"
|
|
353
490
|
>
|
|
354
491
|
<compare-bar label="Bitdefender" score="5.86" max-score="6" variant="primary"></compare-bar>
|
|
355
|
-
<compare-bar label="Norton" score="5.59" max-score="6" variant="secondary"></compare-bar>
|
|
356
|
-
<compare-bar label="McAfee" score="5.53" max-score="6" variant="secondary"></compare-bar>
|
|
492
|
+
<compare-bar label="Norton" score="5.59" max-score="6" variant="secondary" scale="0.93"></compare-bar>
|
|
493
|
+
<compare-bar label="McAfee" score="5.53" max-score="6" variant="secondary" scale="0.47"></compare-bar>
|
|
357
494
|
</compare-card>
|
|
358
495
|
|
|
359
496
|
<compare-card
|
|
@@ -362,11 +499,128 @@ export const CustomGapThreeCards = {
|
|
|
362
499
|
footnote="Overall Score. 2020 – February 2025. Source AV TEST.org"
|
|
363
500
|
footnote-href="${AV_TEST_URL}"
|
|
364
501
|
icon-src="${REPAIR_ICON}"
|
|
502
|
+
bar-stretch="false"
|
|
365
503
|
>
|
|
366
504
|
<compare-bar label="Bitdefender" score="5.90" max-score="6" variant="primary"></compare-bar>
|
|
367
|
-
<compare-bar label="Kaspersky" score="5.75" max-score="6" variant="secondary"></compare-bar>
|
|
368
|
-
<compare-bar label="Norton" score="5.60" max-score="6" variant="secondary"></compare-bar>
|
|
505
|
+
<compare-bar label="Kaspersky" score="5.75" max-score="6" variant="secondary" scale="0.93"></compare-bar>
|
|
506
|
+
<compare-bar label="Norton" score="5.60" max-score="6" variant="secondary" scale="0.47"></compare-bar>
|
|
369
507
|
</compare-card>
|
|
370
508
|
</bd-compare-section>
|
|
371
509
|
`
|
|
510
|
+
};
|
|
511
|
+
|
|
512
|
+
|
|
513
|
+
// ─── Theme overrides ──────────────────────────────────────────────────────────
|
|
514
|
+
|
|
515
|
+
export const ThemeGreen = {
|
|
516
|
+
name : "Theme — Green",
|
|
517
|
+
render: () => html`
|
|
518
|
+
<bd-compare-section
|
|
519
|
+
title="Green Theme"
|
|
520
|
+
gap="32px"
|
|
521
|
+
class="theme-green"
|
|
522
|
+
>
|
|
523
|
+
<compare-card
|
|
524
|
+
title="Best Protection"
|
|
525
|
+
description="Scale of 0–6. Higher is better."
|
|
526
|
+
footnote="Overall Score. July 2011 – February 2025. Source AV TEST.org"
|
|
527
|
+
footnote-href="${AV_TEST_URL}"
|
|
528
|
+
icon-src="${SHIELD_ICON}"
|
|
529
|
+
bar-stretch="false"
|
|
530
|
+
>
|
|
531
|
+
<compare-bar label="Bitdefender" score="5.95" max-score="6" variant="primary"></compare-bar>
|
|
532
|
+
<compare-bar label="Norton" score="5.59" max-score="6" variant="secondary" scale="0.93"></compare-bar>
|
|
533
|
+
<compare-bar label="McAfee" score="5.45" max-score="6" variant="secondary" scale="0.47"></compare-bar>
|
|
534
|
+
</compare-card>
|
|
535
|
+
|
|
536
|
+
<compare-card
|
|
537
|
+
title="Best Performance"
|
|
538
|
+
description="Scale of 0–6. Higher = lightest impact."
|
|
539
|
+
footnote="Overall Score. February 2013 – February 2025. Source AV TEST.org"
|
|
540
|
+
footnote-href="${AV_TEST_URL}"
|
|
541
|
+
icon-src="${SPEEDOMETER_ICON}"
|
|
542
|
+
bar-stretch="false"
|
|
543
|
+
>
|
|
544
|
+
<compare-bar label="Bitdefender" score="5.86" max-score="6" variant="primary"></compare-bar>
|
|
545
|
+
<compare-bar label="Norton" score="5.59" max-score="6" variant="secondary" scale="0.93"></compare-bar>
|
|
546
|
+
<compare-bar label="McAfee" score="5.53" max-score="6" variant="secondary" scale="0.47"></compare-bar>
|
|
547
|
+
</compare-card>
|
|
548
|
+
</bd-compare-section>
|
|
549
|
+
`
|
|
550
|
+
};
|
|
551
|
+
|
|
552
|
+
export const ThemePurple = {
|
|
553
|
+
name : "Theme — Purple",
|
|
554
|
+
render: () => html`
|
|
555
|
+
<bd-compare-section
|
|
556
|
+
title="Purple Theme"
|
|
557
|
+
gap="32px"
|
|
558
|
+
class="theme-purple"
|
|
559
|
+
>
|
|
560
|
+
<compare-card
|
|
561
|
+
title="Best Protection"
|
|
562
|
+
description="Scale of 0–6. Higher is better."
|
|
563
|
+
footnote="Overall Score. July 2011 – February 2025. Source AV TEST.org"
|
|
564
|
+
footnote-href="${AV_TEST_URL}"
|
|
565
|
+
icon-src="${SHIELD_ICON}"
|
|
566
|
+
bar-stretch="false"
|
|
567
|
+
>
|
|
568
|
+
<compare-bar label="Bitdefender" score="5.95" max-score="6" variant="primary"></compare-bar>
|
|
569
|
+
<compare-bar label="Norton" score="5.59" max-score="6" variant="secondary" scale="0.93"></compare-bar>
|
|
570
|
+
<compare-bar label="McAfee" score="5.45" max-score="6" variant="secondary" scale="0.47"></compare-bar>
|
|
571
|
+
</compare-card>
|
|
572
|
+
|
|
573
|
+
<compare-card
|
|
574
|
+
title="Best Performance"
|
|
575
|
+
description="Scale of 0–6. Higher = lightest impact."
|
|
576
|
+
footnote="Overall Score. February 2013 – February 2025. Source AV TEST.org"
|
|
577
|
+
footnote-href="${AV_TEST_URL}"
|
|
578
|
+
icon-src="${SPEEDOMETER_ICON}"
|
|
579
|
+
bar-stretch="false"
|
|
580
|
+
>
|
|
581
|
+
<compare-bar label="Bitdefender" score="5.86" max-score="6" variant="primary"></compare-bar>
|
|
582
|
+
<compare-bar label="Norton" score="5.59" max-score="6" variant="secondary" scale="0.93"></compare-bar>
|
|
583
|
+
<compare-bar label="McAfee" score="5.53" max-score="6" variant="secondary" scale="0.47"></compare-bar>
|
|
584
|
+
</compare-card>
|
|
585
|
+
</bd-compare-section>
|
|
586
|
+
`
|
|
587
|
+
};
|
|
588
|
+
|
|
589
|
+
export const ThemeDark = {
|
|
590
|
+
name : "Theme — Dark",
|
|
591
|
+
render: () => html`
|
|
592
|
+
<div style="background: #0f1117; padding: 1px 0;">
|
|
593
|
+
<bd-compare-section
|
|
594
|
+
title="Dark Theme"
|
|
595
|
+
gap="32px"
|
|
596
|
+
class="theme-dark"
|
|
597
|
+
>
|
|
598
|
+
<compare-card
|
|
599
|
+
title="Best Protection"
|
|
600
|
+
description="Scale of 0–6. Higher is better."
|
|
601
|
+
footnote="Overall Score. July 2011 – February 2025. Source AV TEST.org"
|
|
602
|
+
footnote-href="${AV_TEST_URL}"
|
|
603
|
+
icon-src="${SHIELD_ICON}"
|
|
604
|
+
bar-stretch="false"
|
|
605
|
+
>
|
|
606
|
+
<compare-bar label="Bitdefender" score="5.95" max-score="6" variant="primary"></compare-bar>
|
|
607
|
+
<compare-bar label="Norton" score="5.59" max-score="6" variant="secondary" scale="0.93"></compare-bar>
|
|
608
|
+
<compare-bar label="McAfee" score="5.45" max-score="6" variant="secondary" scale="0.47"></compare-bar>
|
|
609
|
+
</compare-card>
|
|
610
|
+
|
|
611
|
+
<compare-card
|
|
612
|
+
title="Best Performance"
|
|
613
|
+
description="Scale of 0–6. Higher = lightest impact."
|
|
614
|
+
footnote="Overall Score. February 2013 – February 2025. Source AV TEST.org"
|
|
615
|
+
footnote-href="${AV_TEST_URL}"
|
|
616
|
+
icon-src="${SPEEDOMETER_ICON}"
|
|
617
|
+
bar-stretch="false"
|
|
618
|
+
>
|
|
619
|
+
<compare-bar label="Bitdefender" score="5.86" max-score="6" variant="primary"></compare-bar>
|
|
620
|
+
<compare-bar label="Norton" score="5.59" max-score="6" variant="secondary" scale="0.93"></compare-bar>
|
|
621
|
+
<compare-bar label="McAfee" score="5.53" max-score="6" variant="secondary" scale="0.47"></compare-bar>
|
|
622
|
+
</compare-card>
|
|
623
|
+
</bd-compare-section>
|
|
624
|
+
</div>
|
|
625
|
+
`
|
|
372
626
|
};
|