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