@repobit/dex-system-design 0.23.7 → 0.23.9
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 +14 -0
- package/package.json +2 -2
- package/src/components/accordion/accordion-bg.css.js +119 -100
- package/src/components/accordion/accordion-bg.js +53 -41
- package/src/components/accordion/accordion-bg.stories.js +140 -269
- package/src/components/accordion/accordion.css.js +202 -31
- package/src/components/accordion/accordion.js +73 -31
- package/src/components/accordion/accordion.stories.js +182 -278
- package/src/components/awards/awards-icon.js +44 -32
- package/src/components/awards/awards.css.js +219 -216
- package/src/components/awards/awards.js +156 -132
- package/src/components/awards/awards.stories.js +232 -243
- package/src/components/carousel/carousel.stories.js +13 -13
- package/src/components/compare/compare.js +0 -3
- package/src/components/compare/compare.stories.js +5 -1
- package/src/components/pricing-cards/new-pricing-card.stories.js +4 -0
- package/src/components/pricing-cards/pricing-card-pricing.js +3 -1
- package/src/tokens/tokens.css +8 -0
- package/src/tokens/tokens.js +9 -0
|
@@ -1,224 +1,248 @@
|
|
|
1
|
-
import { LitElement, html } from
|
|
1
|
+
import { LitElement, html } from "lit";
|
|
2
2
|
import { tokens } from "../../tokens/tokens.js";
|
|
3
|
-
import
|
|
4
|
-
import { awardsCSS } from
|
|
3
|
+
import "./awards-icon.js";
|
|
4
|
+
import { awardsCSS } from "./awards.css.js";
|
|
5
5
|
|
|
6
6
|
export class AwardsSection extends LitElement {
|
|
7
7
|
static properties = {
|
|
8
|
-
tagline
|
|
9
|
-
headline
|
|
10
|
-
subtext
|
|
11
|
-
secretTitle
|
|
12
|
-
secretSubtext: { type: String },
|
|
13
|
-
desktopAwards: { type: Array },
|
|
14
|
-
|
|
15
|
-
|
|
8
|
+
tagline : { type: String },
|
|
9
|
+
headline : { type: String },
|
|
10
|
+
subtext : { type: String },
|
|
11
|
+
secretTitle : { type: String },
|
|
12
|
+
secretSubtext : { type: String },
|
|
13
|
+
desktopAwards : { type: Array },
|
|
14
|
+
features : { type: Array },
|
|
15
|
+
_narrow : { state: true },
|
|
16
|
+
_featureNarrow: { state: true }
|
|
16
17
|
};
|
|
17
18
|
|
|
18
19
|
static styles = [tokens, awardsCSS];
|
|
19
20
|
|
|
20
|
-
|
|
21
|
-
|
|
22
|
-
|
|
23
|
-
|
|
24
|
-
|
|
25
|
-
|
|
26
|
-
|
|
27
|
-
|
|
21
|
+
/** @type {MediaQueryList | null} */
|
|
22
|
+
_mql599 = null;
|
|
23
|
+
/** @type {MediaQueryList | null} */
|
|
24
|
+
_mql767 = null;
|
|
25
|
+
_on599 = () => {
|
|
26
|
+
this._narrow = this._mql599?.matches ?? false;
|
|
27
|
+
};
|
|
28
|
+
_on767 = () => {
|
|
29
|
+
this._featureNarrow = this._mql767?.matches ?? false;
|
|
28
30
|
};
|
|
29
31
|
|
|
30
32
|
constructor() {
|
|
31
33
|
super();
|
|
32
34
|
this.tagline = "You're Making A Great Choice";
|
|
33
|
-
this.headline =
|
|
35
|
+
this.headline =
|
|
36
|
+
"World-class security software you can trust. Always.";
|
|
34
37
|
this.subtext =
|
|
35
38
|
"We've added 25 new accolades in the past two years to the hundreds we have won since we started in 2001 - so you know you are in good hands.";
|
|
36
39
|
this.secretTitle = "What's our secret";
|
|
37
40
|
this.secretSubtext =
|
|
38
|
-
|
|
41
|
+
"At the heart of Bitdefender lies a powerhouse of proprietary technology, setting it miles apart from the competition.";
|
|
39
42
|
|
|
40
43
|
this.desktopAwards = [
|
|
41
44
|
{
|
|
42
45
|
label : "PC MAG\nEDITORS' CHOICE",
|
|
43
|
-
type :
|
|
44
|
-
format:
|
|
45
|
-
src :
|
|
46
|
-
id :
|
|
46
|
+
type : "red",
|
|
47
|
+
format: "svg",
|
|
48
|
+
src : "/assets/pc-mag.svg",
|
|
49
|
+
id : "pc-mag"
|
|
47
50
|
},
|
|
48
51
|
{
|
|
49
|
-
label :
|
|
50
|
-
type :
|
|
51
|
-
format:
|
|
52
|
-
src :
|
|
53
|
-
id :
|
|
52
|
+
label : "AV\ncomparatives",
|
|
53
|
+
type : "dark",
|
|
54
|
+
format: "svg",
|
|
55
|
+
src : "/assets/av-comparatives.svg",
|
|
56
|
+
id : "av-comparatives"
|
|
54
57
|
},
|
|
55
58
|
{
|
|
56
|
-
label :
|
|
57
|
-
type :
|
|
58
|
-
format:
|
|
59
|
-
src :
|
|
60
|
-
id :
|
|
59
|
+
label : "Best\nBrands\n2024",
|
|
60
|
+
type : "dark",
|
|
61
|
+
format: "svg",
|
|
62
|
+
src : "/assets/best-brands.svg",
|
|
63
|
+
id : "best-brands"
|
|
61
64
|
},
|
|
62
65
|
{
|
|
63
|
-
label :
|
|
64
|
-
type :
|
|
65
|
-
format:
|
|
66
|
-
src :
|
|
67
|
-
id :
|
|
66
|
+
label : "PC\nChoice\n2024",
|
|
67
|
+
type : "red",
|
|
68
|
+
format: "svg",
|
|
69
|
+
src : "/assets/pc-mag-2024.svg",
|
|
70
|
+
id : "pc-mag-2024"
|
|
68
71
|
},
|
|
69
72
|
{
|
|
70
73
|
label : "PC MAG\nREADERS'\nCHOICE",
|
|
71
|
-
type :
|
|
72
|
-
format:
|
|
73
|
-
src :
|
|
74
|
-
id :
|
|
74
|
+
type : "red",
|
|
75
|
+
format: "svg",
|
|
76
|
+
src : "/assets/pc-mag-readers.svg",
|
|
77
|
+
id : "pc-mag-readers"
|
|
75
78
|
},
|
|
76
79
|
{
|
|
77
|
-
label :
|
|
78
|
-
type :
|
|
79
|
-
format:
|
|
80
|
-
src :
|
|
81
|
-
id :
|
|
80
|
+
label : "PC\nBusiness\nChoice",
|
|
81
|
+
type : "red",
|
|
82
|
+
format: "svg",
|
|
83
|
+
src : "/assets/pc-mag-business.svg",
|
|
84
|
+
id : "pc-mag-business"
|
|
82
85
|
},
|
|
83
86
|
{
|
|
84
|
-
label :
|
|
85
|
-
type :
|
|
86
|
-
format:
|
|
87
|
-
src :
|
|
88
|
-
id :
|
|
87
|
+
label : "AV\nTEST\nTOP\nPRODUCT",
|
|
88
|
+
type : "red",
|
|
89
|
+
format: "svg",
|
|
90
|
+
src : "/assets/top-product.svg",
|
|
91
|
+
id : "top-product"
|
|
89
92
|
}
|
|
90
93
|
];
|
|
91
94
|
|
|
92
|
-
this.mobileAwards = [...this.desktopAwards];
|
|
93
|
-
|
|
94
95
|
this.features = [
|
|
95
96
|
{
|
|
96
|
-
icon :
|
|
97
|
-
title:
|
|
97
|
+
icon : "brain",
|
|
98
|
+
title: "Machine Learning",
|
|
98
99
|
description:
|
|
99
100
|
"Imagine Bitdefender as a super-smart detective, constantly learning and getting better at spotting bad guys. Just like how you learn from your experiences, Bitdefender learns from millions of cyber threats it encounters every day. It studies their patterns, figures out their tricks, and uses that knowledge to protect your devices from future attacks."
|
|
100
101
|
},
|
|
101
102
|
{
|
|
102
|
-
icon :
|
|
103
|
-
title:
|
|
103
|
+
icon : "chart",
|
|
104
|
+
title: "Behavioral Analysis",
|
|
104
105
|
description:
|
|
105
106
|
"Bitdefender keeps an eye on how you and your devices normally behave. So, when something unusual happens, like a strange file trying to sneak into your computer or a suspicious website trying to steal your info, Bitdefender sounds the alarm. It's like having a loyal sidekick that never sleeps, always on the lookout for trouble and ready to jump into action to keep you safe."
|
|
106
107
|
}
|
|
107
108
|
];
|
|
109
|
+
|
|
110
|
+
this._narrow = false;
|
|
111
|
+
this._featureNarrow = false;
|
|
112
|
+
}
|
|
113
|
+
|
|
114
|
+
connectedCallback() {
|
|
115
|
+
super.connectedCallback();
|
|
116
|
+
if (typeof window !== "undefined" && window.matchMedia) {
|
|
117
|
+
this._mql599 = window.matchMedia("(max-width: 599px)");
|
|
118
|
+
this._mql767 = window.matchMedia("(max-width: 767px)");
|
|
119
|
+
this._narrow = this._mql599.matches;
|
|
120
|
+
this._featureNarrow = this._mql767.matches;
|
|
121
|
+
this._mql599.addEventListener("change", this._on599);
|
|
122
|
+
this._mql767.addEventListener("change", this._on767);
|
|
123
|
+
}
|
|
108
124
|
}
|
|
109
125
|
|
|
110
|
-
|
|
111
|
-
|
|
112
|
-
|
|
113
|
-
|
|
114
|
-
|
|
115
|
-
? (isMobile ? sizes.mobile : sizes.desktop)
|
|
116
|
-
: null;
|
|
126
|
+
disconnectedCallback() {
|
|
127
|
+
super.disconnectedCallback();
|
|
128
|
+
this._mql599?.removeEventListener("change", this._on599);
|
|
129
|
+
this._mql767?.removeEventListener("change", this._on767);
|
|
130
|
+
}
|
|
117
131
|
|
|
132
|
+
_renderBadge(award) {
|
|
133
|
+
const ariaLabel = award.label.replace(/\n/g, " ");
|
|
134
|
+
const classes = `bd-awards-badge ${award.type === "dark" ? "bd-awards-badge--dark" : ""}`;
|
|
118
135
|
return html`
|
|
119
|
-
<div class="${classes}"
|
|
120
|
-
<bd-icon
|
|
121
|
-
src="${award.src}"
|
|
122
|
-
label="${ariaLabel}"
|
|
123
|
-
width="${size?.w ? size.w + 'px' : '100%'}"
|
|
124
|
-
height="${size?.h ? size.h + 'px' : '100%'}"
|
|
125
|
-
></bd-icon>
|
|
136
|
+
<div class="${classes}" data-award-id="${award.id}" role="listitem">
|
|
137
|
+
<bd-icon src="${award.src}" label="${ariaLabel}"></bd-icon>
|
|
126
138
|
</div>
|
|
127
139
|
`;
|
|
128
140
|
}
|
|
129
141
|
|
|
130
142
|
_renderFeature(f) {
|
|
131
|
-
const
|
|
132
|
-
|
|
133
|
-
|
|
134
|
-
|
|
135
|
-
|
|
143
|
+
const narrow = this._featureNarrow;
|
|
144
|
+
const iconSrc =
|
|
145
|
+
f.icon === "brain"
|
|
146
|
+
? "/assets/machine-learning.svg"
|
|
147
|
+
: "/assets/analysis.svg";
|
|
136
148
|
|
|
137
149
|
return html`
|
|
138
150
|
<article class="bd-awards-feature-card">
|
|
139
151
|
<div class="bd-awards-feature-icon" aria-hidden="true">
|
|
140
|
-
<bd-icon src="${iconSrc}"></bd-icon>
|
|
152
|
+
<bd-icon src="${iconSrc}" label=""></bd-icon>
|
|
141
153
|
</div>
|
|
142
|
-
|
|
143
|
-
|
|
144
|
-
|
|
145
|
-
|
|
146
|
-
|
|
154
|
+
<div class="bd-awards-feature-text">
|
|
155
|
+
${narrow
|
|
156
|
+
? html`<bd-h as="h6" fontWeight="700" class="bd-awards-feature-title">${f.title}</bd-h>`
|
|
157
|
+
: html`<bd-h as="h4" fontWeight="700" class="bd-awards-feature-title">${f.title}</bd-h>`}
|
|
158
|
+
${narrow
|
|
147
159
|
? html`<bd-p kind="small" class="bd-awards-feature-desc">${f.description}</bd-p>`
|
|
148
|
-
: html`<bd-p kind="regular" class="bd-awards-feature-desc">${f.description}</bd-p>`
|
|
149
|
-
|
|
160
|
+
: html`<bd-p kind="regular" class="bd-awards-feature-desc">${f.description}</bd-p>`}
|
|
161
|
+
</div>
|
|
150
162
|
</article>
|
|
151
163
|
`;
|
|
152
164
|
}
|
|
153
165
|
|
|
154
166
|
render() {
|
|
155
|
-
const
|
|
156
|
-
const isIOS = /iPad|iPhone|iPod/.test(navigator.userAgent) ||
|
|
157
|
-
(navigator.platform === 'MacIntel' && navigator.maxTouchPoints > 1);
|
|
167
|
+
const narrow = this._narrow;
|
|
158
168
|
|
|
159
169
|
return html`
|
|
170
|
+
<section
|
|
171
|
+
class="bd-awards-root"
|
|
172
|
+
aria-label="Awards and recognition"
|
|
173
|
+
>
|
|
160
174
|
<div class="bd-awards-trust-banner">
|
|
175
|
+
<div class="bd-awards-trust-intro">
|
|
161
176
|
<span class="bd-awards-laurel-icon" aria-hidden="true">
|
|
162
|
-
<bd-icon
|
|
163
|
-
|
|
164
|
-
|
|
177
|
+
<bd-icon
|
|
178
|
+
label=""
|
|
179
|
+
>
|
|
180
|
+
<svg
|
|
181
|
+
width="80"
|
|
182
|
+
height="80"
|
|
183
|
+
viewBox="0 0 80 80"
|
|
184
|
+
fill="none"
|
|
185
|
+
xmlns="http://www.w3.org/2000/svg"
|
|
186
|
+
aria-hidden="true"
|
|
187
|
+
>
|
|
188
|
+
<path
|
|
189
|
+
d="M48.0751 11.994C48.0751 17.6107 52.457 21.9791 58.0908 21.9791C58.0908 16.4873 53.5837 11.994 48.0751 11.994ZM61.8466 19.7325C62.9734 16.737 65.1017 13.9911 68.1064 12.2437C68.9828 11.7444 70.1096 12.1189 70.6103 12.8677L72.7387 16.6121C75.3678 21.1054 75.493 26.3476 73.615 30.8409C74.9922 30.3417 76.6197 29.9672 78.2473 29.9672C79.2488 29.9672 80 30.8409 80 31.8394V35.9583C80 41.2005 77.4961 45.8186 73.615 48.8141C75.2426 49.0637 76.7449 49.563 78.1221 50.4367C78.9984 50.9359 79.2488 52.0592 78.8732 52.8081L76.7449 56.5525C73.2394 62.5436 66.4789 65.4143 60.0939 64.291L59.4679 64.0414C57.9656 63.2925 56.4632 62.6684 54.9609 62.0443C53.8341 61.6699 52.7074 61.2955 51.4554 61.0458C58.9671 57.0518 64.1002 49.0637 64.1002 39.9523C64.1002 34.835 62.2222 29.9672 59.0923 25.9732H58.0908C50.3286 25.9732 44.0689 19.7325 44.0689 11.994V9.99702C44.0689 8.99851 44.9452 8 46.072 8H48.0751C54.9609 8 60.8451 13.1174 61.8466 19.7325ZM39.9374 67.9106V68.0354H37.5587C32.9264 68.0354 28.2942 69.0339 24.1628 71.1558L22.9108 71.7798C21.9092 72.2791 20.6573 71.9046 20.1565 70.9061C19.6557 69.9076 20.1565 68.6595 21.0329 68.1602L22.2848 67.5362C24.1628 66.6625 26.0407 65.9136 28.0438 65.2895C26.6667 64.6654 25.2895 63.9166 24.0376 63.0429C23.1612 63.4173 22.2848 63.6669 21.5336 63.9166C14.6479 65.7888 7.01095 62.918 3.25509 56.5525L1.25196 52.8081C0.751174 52.0592 1.00156 50.9359 1.87793 50.4367C3.25509 49.563 4.75743 49.0637 6.38498 48.8141C2.50391 45.8186 0 41.2005 0 35.9583V31.8394C0 30.8409 0.751174 29.9672 1.75274 29.9672C3.38028 29.9672 5.00782 30.3417 6.38498 30.8409C4.50704 26.3476 4.75743 21.1054 7.26135 16.6121L9.38967 12.8677C9.89045 12.1189 11.0172 11.7444 11.8936 12.2437C14.8983 13.9911 17.0266 16.737 18.1534 19.7325C19.2801 13.1174 25.0391 8 32.0501 8H34.0532C35.0548 8 36.0563 8.99851 36.0563 9.99702V11.994C36.0563 19.7325 29.6714 25.9732 22.0344 25.9732H20.9077C17.7778 29.9672 16.025 34.835 16.025 39.9523C16.025 53.1826 26.7919 63.9166 40.0626 63.9166H42.4413C47.6995 63.9166 52.9577 65.1647 57.7152 67.5362L58.9671 68.1602C59.9687 68.6595 60.3443 69.9076 59.8435 70.9061C59.3427 71.7798 58.0908 72.2791 57.0892 71.7798L55.8372 71.1558C51.7058 69.0339 47.0736 67.9106 42.4413 67.9106H40.0626H39.9374ZM22.0344 21.9791C27.543 21.9791 32.0501 17.6107 32.0501 11.994C29.1706 11.994 26.6667 13.2422 24.7887 15.1144C23.036 16.8618 22.0344 19.3581 22.0344 21.9791ZM12.0188 44.196C12.0188 39.3282 8.5133 35.2094 4.00626 34.2109V35.9583C4.00626 41.2005 7.26135 45.6937 12.0188 47.3163V44.196ZM68.1064 47.3163C72.7387 45.6937 76.1189 41.2005 76.1189 35.9583V34.2109C71.4867 35.3342 68.1064 39.3282 68.1064 44.196V47.3163ZM17.7778 57.6759C15.3991 53.4322 10.3912 51.56 5.88419 53.0578L6.76056 54.5555C9.38967 59.0488 14.5227 61.1707 19.4053 60.297L17.7778 57.6759ZM12.0188 32.3387L13.6463 29.7176C16.025 25.4739 15.1487 20.2317 11.6432 17.1114L10.7668 18.6092C8.13772 23.1025 8.88889 28.5943 12.0188 32.3387ZM66.3537 29.7176L67.9812 32.3387C71.1111 28.5943 71.8623 23.1025 69.2332 18.6092L68.3568 17.1114C64.8513 20.2317 63.975 25.4739 66.3537 29.7176ZM62.2222 57.6759L60.5947 60.297C65.4773 61.1707 70.6103 59.0488 73.2394 54.5555L74.1158 53.0578C69.6088 51.56 64.6009 53.4322 62.2222 57.6759Z"
|
|
190
|
+
fill="currentColor"
|
|
191
|
+
/>
|
|
165
192
|
</svg>
|
|
166
193
|
</bd-icon>
|
|
167
194
|
</span>
|
|
168
195
|
|
|
169
|
-
${
|
|
170
|
-
|
|
171
|
-
|
|
172
|
-
|
|
173
|
-
|
|
174
|
-
|
|
175
|
-
|
|
176
|
-
|
|
177
|
-
<span
|
|
178
|
-
<span
|
|
179
|
-
|
|
180
|
-
|
|
181
|
-
|
|
182
|
-
|
|
183
|
-
|
|
184
|
-
|
|
185
|
-
|
|
186
|
-
? html`<bd-p kind="small" class="bd-awards-subtext">${this.subtext}</bd-p>`
|
|
187
|
-
: html`<bd-p kind="regular" class="bd-awards-subtext">${this.subtext}</bd-p>`
|
|
188
|
-
}
|
|
189
|
-
|
|
190
|
-
<!-- Desktop badges -->
|
|
191
|
-
<div class="bd-awards-bar bd-awards-desktop" role="list" aria-label="Industry awards - desktop">
|
|
192
|
-
${this.desktopAwards.map((a) => this._renderBadge(a, false))}
|
|
196
|
+
${narrow
|
|
197
|
+
? html`<bd-p kind="small" class="bd-awards-tagline">${this.tagline}</bd-p>`
|
|
198
|
+
: html`<bd-p kind="large" class="bd-awards-tagline">${this.tagline}</bd-p>`}
|
|
199
|
+
|
|
200
|
+
${narrow
|
|
201
|
+
? html`
|
|
202
|
+
<bd-h as="h4" class="bd-awards-headline">
|
|
203
|
+
<span class="bd-awards-headline-line">World-class security</span>
|
|
204
|
+
<span class="bd-awards-headline-line">software you can trust.</span>
|
|
205
|
+
<span class="bd-awards-headline-line">Always.</span>
|
|
206
|
+
</bd-h>
|
|
207
|
+
`
|
|
208
|
+
: html`<bd-h as="h3" class="bd-awards-headline">${this.headline}</bd-h>`}
|
|
209
|
+
|
|
210
|
+
${narrow
|
|
211
|
+
? html`<bd-p kind="small" class="bd-awards-subtext">${this.subtext}</bd-p>`
|
|
212
|
+
: html`<bd-p kind="regular" class="bd-awards-subtext">${this.subtext}</bd-p>`}
|
|
193
213
|
</div>
|
|
194
214
|
|
|
195
|
-
|
|
196
|
-
|
|
197
|
-
|
|
198
|
-
|
|
215
|
+
<div
|
|
216
|
+
class="bd-awards-bar"
|
|
217
|
+
role="list"
|
|
218
|
+
aria-label="Industry awards"
|
|
219
|
+
>
|
|
220
|
+
<div class="bd-awards-row" role="presentation">
|
|
221
|
+
${this.desktopAwards.slice(0, 3).map((a) => this._renderBadge(a))}
|
|
199
222
|
</div>
|
|
200
|
-
<div class="bd-awards-
|
|
201
|
-
${this.
|
|
223
|
+
<div class="bd-awards-row" role="presentation">
|
|
224
|
+
${this.desktopAwards.slice(3).map((a) => this._renderBadge(a))}
|
|
202
225
|
</div>
|
|
203
226
|
</div>
|
|
204
227
|
</div>
|
|
205
228
|
|
|
229
|
+
<div class="bd-awards-lower">
|
|
206
230
|
<section class="bd-awards-secret-section">
|
|
207
|
-
${
|
|
208
|
-
|
|
209
|
-
|
|
210
|
-
|
|
211
|
-
|
|
212
|
-
|
|
213
|
-
: html`<bd-p kind="regular" class="bd-awards-section-subtext">${this.secretSubtext}</bd-p>`
|
|
214
|
-
}
|
|
231
|
+
${narrow
|
|
232
|
+
? html`<bd-h as="h4" class="bd-awards-section-title">${this.secretTitle}</bd-h>`
|
|
233
|
+
: html`<bd-h as="h3" class="bd-awards-section-title">${this.secretTitle}</bd-h>`}
|
|
234
|
+
${narrow
|
|
235
|
+
? html`<bd-p kind="small" class="bd-awards-section-subtext">${this.secretSubtext}</bd-p>`
|
|
236
|
+
: html`<bd-p kind="regular" class="bd-awards-section-subtext">${this.secretSubtext}</bd-p>`}
|
|
215
237
|
</section>
|
|
216
238
|
|
|
217
239
|
<div class="bd-awards-features-grid">
|
|
218
240
|
${this.features.map((f) => this._renderFeature(f))}
|
|
219
241
|
</div>
|
|
242
|
+
</div>
|
|
243
|
+
</section>
|
|
220
244
|
`;
|
|
221
245
|
}
|
|
222
246
|
}
|
|
223
247
|
|
|
224
|
-
customElements.define(
|
|
248
|
+
customElements.define("bd-awards-section", AwardsSection);
|