@repobit/dex-system-design 0.23.41 → 0.23.42
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 +7 -0
- package/package.json +4 -4
- package/src/components/highlight/highlight.css.js +1 -1
- package/src/components/highlight/highlight.js +21 -12
- package/src/components/tabs/tabs.css.js +87 -197
- package/src/components/tabs/tabs.js +160 -164
- package/src/components/tabs/tabs.stories.js +436 -103
|
@@ -1,134 +1,467 @@
|
|
|
1
|
-
import { html } from
|
|
2
|
-
import
|
|
1
|
+
import { html } from "lit";
|
|
2
|
+
import "../accordion/accordion.js";
|
|
3
|
+
import "../icons/family-icon.js";
|
|
4
|
+
import "../icons/globe-icon.js";
|
|
5
|
+
import "../icons/individual-icon.js";
|
|
6
|
+
import "../icons/laurel-icon.js";
|
|
7
|
+
import "../paragraph/paragraph.js";
|
|
8
|
+
import "./tabs.js";
|
|
3
9
|
|
|
4
10
|
export default {
|
|
5
|
-
title :
|
|
6
|
-
tags : [
|
|
11
|
+
title : "Components/Tabs",
|
|
12
|
+
tags : ["autodocs"],
|
|
7
13
|
parameters: {
|
|
8
|
-
|
|
14
|
+
layout: "fullscreen",
|
|
15
|
+
docs : {
|
|
9
16
|
description: {
|
|
10
17
|
component: `
|
|
11
|
-
|
|
18
|
+
Componentă Lit pentru afișarea de feature-uri în taburi cu coloane de accordion items.
|
|
12
19
|
|
|
13
|
-
### Usage
|
|
14
20
|
\`\`\`html
|
|
15
|
-
<bd-tabs
|
|
21
|
+
<bd-tabs title="..." subtitle="...">
|
|
22
|
+
<bd-tab-panel title="Windows">
|
|
23
|
+
<bd-tab-col title="Protection">
|
|
24
|
+
<bd-individual-icon slot="icon" size="40" color="#006DFF"></bd-individual-icon>
|
|
25
|
+
<bd-p slot="description" kind="small">Descriere coloana</bd-p>
|
|
26
|
+
<bd-accordion-section no-container>
|
|
27
|
+
<bd-accordion-item title="Feature 1" open>
|
|
28
|
+
<bd-p kind="small">Detalii</bd-p>
|
|
29
|
+
</bd-accordion-item>
|
|
30
|
+
</bd-accordion-section>
|
|
31
|
+
</bd-tab-col>
|
|
32
|
+
</bd-tab-panel>
|
|
33
|
+
</bd-tabs>
|
|
16
34
|
\`\`\`
|
|
17
35
|
|
|
18
|
-
###
|
|
19
|
-
|
|
20
|
-
|
|
21
|
-
|
|
22
|
-
|
|
23
|
-
|
|
24
|
-
|
|
25
|
-
|
|
26
|
-
###
|
|
27
|
-
|
|
28
|
-
|
|
29
|
-
|
|
30
|
-
|
|
31
|
-
|
|
32
|
-
|
|
33
|
-
|
|
34
|
-
|
|
35
|
-
|
|
36
|
-
|
|
37
|
-
|
|
38
|
-
|
|
36
|
+
### Structura
|
|
37
|
+
- \`bd-tabs\` — componenta principală, primește \`title\` și \`subtitle\`
|
|
38
|
+
- \`bd-tab-panel\` — un panel per tab (ex: Windows, macOS), primește \`title\`
|
|
39
|
+
- \`bd-tab-col\` — o coloană în panel, primește \`title\`
|
|
40
|
+
- Slot \`icon\` — orice componentă de icon (ex: \`<bd-individual-icon slot="icon">\`)
|
|
41
|
+
- Slot \`description\` — text descriptiv sub titlul coloanei
|
|
42
|
+
- Slot default — conținut accordion (\`bd-accordion-section\` cu \`no-container\`)
|
|
43
|
+
|
|
44
|
+
### Atribute \`bd-tabs\`
|
|
45
|
+
| Atribut | Tip | Default | Descriere |
|
|
46
|
+
|---|---|---|---|
|
|
47
|
+
| \`title\` | String | — | Titlul principal |
|
|
48
|
+
| \`subtitle\` | String | — | Subtitlul descriptiv |
|
|
49
|
+
|
|
50
|
+
### Atribute \`bd-tab-panel\`
|
|
51
|
+
| Atribut | Tip | Descriere |
|
|
52
|
+
|---|---|---|
|
|
53
|
+
| \`title\` | String | Label-ul butonului de tab (ex: Windows) |
|
|
54
|
+
|
|
55
|
+
### Atribute \`bd-tab-col\`
|
|
56
|
+
| Atribut | Tip | Descriere |
|
|
57
|
+
|---|---|---|
|
|
58
|
+
| \`title\` | String | Titlul coloanei (ex: Protection) |
|
|
59
|
+
|
|
60
|
+
### Iconițe disponibile
|
|
61
|
+
\`bd-individual-icon\`, \`bd-globe-icon\`, \`bd-family-icon\`, \`bd-laurel-icon\`
|
|
39
62
|
`
|
|
40
63
|
}
|
|
41
64
|
}
|
|
42
|
-
},
|
|
43
|
-
argTypes: {
|
|
44
|
-
selectedTab: {
|
|
45
|
-
control : { type: 'select' },
|
|
46
|
-
options : [0, 1, 2, 3],
|
|
47
|
-
description: 'Index of the initially selected tab (0–3)',
|
|
48
|
-
table : { type: { summary: 'number' }, defaultValue: { summary: '0' }, category: 'State' }
|
|
49
|
-
}
|
|
50
65
|
}
|
|
51
66
|
};
|
|
52
67
|
|
|
53
|
-
// ───
|
|
68
|
+
// ─── Panel templates ──────────────────────────────────────────────────────────
|
|
54
69
|
|
|
55
|
-
|
|
56
|
-
|
|
57
|
-
render : () => html`<bd-tabs-component></bd-tabs-component>`,
|
|
58
|
-
parameters: { docs: { description: { story: 'Default state with the first tab (Privacy Protection) selected.' } } }
|
|
59
|
-
};
|
|
70
|
+
const windowsPanel = html`
|
|
71
|
+
<bd-tab-panel title="Windows">
|
|
60
72
|
|
|
61
|
-
|
|
62
|
-
|
|
63
|
-
|
|
64
|
-
|
|
65
|
-
|
|
66
|
-
|
|
67
|
-
|
|
68
|
-
|
|
69
|
-
|
|
73
|
+
<bd-tab-col title="Protection">
|
|
74
|
+
<bd-individual-icon slot="icon" size="40" color="#006DFF"></bd-individual-icon>
|
|
75
|
+
<bd-p slot="description" kind="small">Bitdefender's unbeatable multi-layered protection keeps your devices safe from all new and existing cyber threats.</bd-p>
|
|
76
|
+
<bd-accordion-section no-container>
|
|
77
|
+
<bd-accordion-item title="Complete Real-Time Data Protection" open>
|
|
78
|
+
<bd-p kind="small">Absolute power in the most efficient security bundle available today. Bitdefender Ultimate Security works against all e-threats, from viruses, worms and Trojans, to ransomware, zero-day exploits, rootkits and spyware.</bd-p>
|
|
79
|
+
</bd-accordion-item>
|
|
80
|
+
<bd-accordion-item title="Network Threat Prevention">
|
|
81
|
+
<bd-p kind="small">Proactive network monitoring and threat detection.</bd-p>
|
|
82
|
+
</bd-accordion-item>
|
|
83
|
+
<bd-accordion-item title="Advanced Threat Defense">
|
|
84
|
+
<bd-p kind="small">Behavioral detection stops unknown threats before they execute.</bd-p>
|
|
85
|
+
</bd-accordion-item>
|
|
86
|
+
<bd-accordion-item title="Scam Copilot">
|
|
87
|
+
<bd-p kind="small">AI-powered scam detection and prevention.</bd-p>
|
|
88
|
+
</bd-accordion-item>
|
|
89
|
+
<bd-accordion-item title="E-mail Protection">
|
|
90
|
+
<bd-p kind="small">Scans incoming and outgoing emails for threats.</bd-p>
|
|
91
|
+
</bd-accordion-item>
|
|
92
|
+
<bd-accordion-item title="Cryptomining Protection">
|
|
93
|
+
<bd-p kind="small">Prevents unauthorized use of your CPU for mining.</bd-p>
|
|
94
|
+
</bd-accordion-item>
|
|
95
|
+
<bd-accordion-item title="Multi-Layer Ransomware Protection">
|
|
96
|
+
<bd-p kind="small">Protects your files from unauthorized encryption.</bd-p>
|
|
97
|
+
</bd-accordion-item>
|
|
98
|
+
<bd-accordion-item title="Vulnerability Assessment">
|
|
99
|
+
<bd-p kind="small">Scans for outdated software and security gaps.</bd-p>
|
|
100
|
+
</bd-accordion-item>
|
|
101
|
+
<bd-accordion-item title="Web Attack Prevention">
|
|
102
|
+
<bd-p kind="small">Blocks malicious websites and drive-by downloads.</bd-p>
|
|
103
|
+
</bd-accordion-item>
|
|
104
|
+
<bd-accordion-item title="Anti-Phishing">
|
|
105
|
+
<bd-p kind="small">Detects and blocks phishing attempts in real time.</bd-p>
|
|
106
|
+
</bd-accordion-item>
|
|
107
|
+
<bd-accordion-item title="Anti-Fraud">
|
|
108
|
+
<bd-p kind="small">Warns you about fraudulent websites and schemes.</bd-p>
|
|
109
|
+
</bd-accordion-item>
|
|
110
|
+
<bd-accordion-item title="Antispam">
|
|
111
|
+
<bd-p kind="small">Filters out spam and unwanted emails effectively.</bd-p>
|
|
112
|
+
</bd-accordion-item>
|
|
113
|
+
</bd-accordion-section>
|
|
114
|
+
</bd-tab-col>
|
|
70
115
|
|
|
71
|
-
|
|
72
|
-
|
|
73
|
-
|
|
74
|
-
|
|
75
|
-
|
|
76
|
-
|
|
77
|
-
|
|
78
|
-
|
|
79
|
-
|
|
116
|
+
<bd-tab-col title="Privacy">
|
|
117
|
+
<bd-globe-icon slot="icon" size="40" color="#006DFF"></bd-globe-icon>
|
|
118
|
+
<bd-p slot="description" kind="small">Bitdefender Ultimate Security takes care of your online privacy and personal information.</bd-p>
|
|
119
|
+
<bd-accordion-section no-container>
|
|
120
|
+
<bd-accordion-item title="Unlimited VPN Traffic" open>
|
|
121
|
+
<bd-p kind="small">Encrypt your connection and stay private online across all devices.</bd-p>
|
|
122
|
+
</bd-accordion-item>
|
|
123
|
+
<bd-accordion-item title="Password Manager">
|
|
124
|
+
<bd-p kind="small">Store and autofill passwords securely across all devices.</bd-p>
|
|
125
|
+
</bd-accordion-item>
|
|
126
|
+
<bd-accordion-item title="Anti-tracker">
|
|
127
|
+
<bd-p kind="small">Block trackers and keep your browsing activity private.</bd-p>
|
|
128
|
+
</bd-accordion-item>
|
|
129
|
+
<bd-accordion-item title="Microphone Monitor">
|
|
130
|
+
<bd-p kind="small">Alerts you when apps try to access your microphone.</bd-p>
|
|
131
|
+
</bd-accordion-item>
|
|
132
|
+
<bd-accordion-item title="Webcam Protection">
|
|
133
|
+
<bd-p kind="small">Prevent unauthorized access to your webcam.</bd-p>
|
|
134
|
+
</bd-accordion-item>
|
|
135
|
+
<bd-accordion-item title="Parental Control">
|
|
136
|
+
<bd-p kind="small">Monitor and control your children's online activity.</bd-p>
|
|
137
|
+
</bd-accordion-item>
|
|
138
|
+
<bd-accordion-item title="Privacy Firewall">
|
|
139
|
+
<bd-p kind="small">Advanced firewall protection for your network.</bd-p>
|
|
140
|
+
</bd-accordion-item>
|
|
141
|
+
<bd-accordion-item title="Anti-Theft">
|
|
142
|
+
<bd-p kind="small">Locate, lock, or wipe your device remotely.</bd-p>
|
|
143
|
+
</bd-accordion-item>
|
|
144
|
+
<bd-accordion-item title="Wi-Fi Security Advisor">
|
|
145
|
+
<bd-p kind="small">Warns you about unsecured Wi-Fi networks.</bd-p>
|
|
146
|
+
</bd-accordion-item>
|
|
147
|
+
<bd-accordion-item title="Social Network Protection">
|
|
148
|
+
<bd-p kind="small">Monitors your social accounts for suspicious activity.</bd-p>
|
|
149
|
+
</bd-accordion-item>
|
|
150
|
+
<bd-accordion-item title="File Shredder">
|
|
151
|
+
<bd-p kind="small">Permanently delete sensitive files beyond recovery.</bd-p>
|
|
152
|
+
</bd-accordion-item>
|
|
153
|
+
</bd-accordion-section>
|
|
154
|
+
</bd-tab-col>
|
|
80
155
|
|
|
81
|
-
|
|
82
|
-
|
|
83
|
-
|
|
84
|
-
|
|
85
|
-
|
|
86
|
-
|
|
87
|
-
|
|
88
|
-
|
|
89
|
-
|
|
156
|
+
<bd-tab-col title="Identity Protection">
|
|
157
|
+
<bd-family-icon slot="icon" size="40" color="#006DFF"></bd-family-icon>
|
|
158
|
+
<bd-p slot="description" kind="small">Goes beyond credit monitoring to protect you against identity theft attacks you might not always recognize.</bd-p>
|
|
159
|
+
<bd-accordion-section no-container>
|
|
160
|
+
<bd-accordion-item title="Continuous Dark Web & Surface Monitoring" open>
|
|
161
|
+
<bd-p kind="small">Get instant alerts if your data appears on the dark web.</bd-p>
|
|
162
|
+
</bd-accordion-item>
|
|
163
|
+
<bd-accordion-item title="Digital Footprint Visualization">
|
|
164
|
+
<bd-p kind="small">See and reduce your digital exposure online.</bd-p>
|
|
165
|
+
</bd-accordion-item>
|
|
166
|
+
<bd-accordion-item title="Identity Protection Score">
|
|
167
|
+
<bd-p kind="small">Understand your identity risk at a glance.</bd-p>
|
|
168
|
+
</bd-accordion-item>
|
|
169
|
+
<bd-accordion-item title="Real Time Breach Notifications">
|
|
170
|
+
<bd-p kind="small">Be first to know when your accounts are compromised.</bd-p>
|
|
171
|
+
</bd-accordion-item>
|
|
172
|
+
<bd-accordion-item title="Security Advice from Bitdefender Experts">
|
|
173
|
+
<bd-p kind="small">Get personalized security recommendations from experts.</bd-p>
|
|
174
|
+
</bd-accordion-item>
|
|
175
|
+
<bd-accordion-item title="Real-Time Fraud Monitoring">
|
|
176
|
+
<bd-p kind="small">Monitor financial accounts for suspicious transactions.</bd-p>
|
|
177
|
+
</bd-accordion-item>
|
|
178
|
+
<bd-accordion-item title="Breach Monitor">
|
|
179
|
+
<bd-p kind="small">Continuously checks if your accounts have been breached.</bd-p>
|
|
180
|
+
</bd-accordion-item>
|
|
181
|
+
<bd-accordion-item title="Credit Report Monitoring">
|
|
182
|
+
<bd-p kind="small">Track changes to your credit report in real time.</bd-p>
|
|
183
|
+
</bd-accordion-item>
|
|
184
|
+
<bd-accordion-item title="Dark Web Monitoring and Alerts">
|
|
185
|
+
<bd-p kind="small">Scans dark web marketplaces for your personal data.</bd-p>
|
|
186
|
+
</bd-accordion-item>
|
|
187
|
+
<bd-accordion-item title="SSN Tracker">
|
|
188
|
+
<bd-p kind="small">Monitor usage of your Social Security Number.</bd-p>
|
|
189
|
+
</bd-accordion-item>
|
|
190
|
+
<bd-accordion-item title="Fraud Alert Reminders">
|
|
191
|
+
<bd-p kind="small">Reminds you to place fraud alerts at credit bureaus.</bd-p>
|
|
192
|
+
</bd-accordion-item>
|
|
193
|
+
<bd-accordion-item title="Identity Alert">
|
|
194
|
+
<bd-p kind="small">Alerts you to suspicious identity usage attempts.</bd-p>
|
|
195
|
+
</bd-accordion-item>
|
|
196
|
+
</bd-accordion-section>
|
|
197
|
+
</bd-tab-col>
|
|
90
198
|
|
|
91
|
-
|
|
92
|
-
|
|
93
|
-
|
|
94
|
-
|
|
95
|
-
|
|
96
|
-
|
|
97
|
-
|
|
98
|
-
|
|
99
|
-
|
|
100
|
-
|
|
101
|
-
|
|
102
|
-
|
|
103
|
-
|
|
104
|
-
|
|
199
|
+
</bd-tab-panel>
|
|
200
|
+
`;
|
|
201
|
+
|
|
202
|
+
const macosPanel = html`
|
|
203
|
+
<bd-tab-panel title="macOS">
|
|
204
|
+
|
|
205
|
+
<bd-tab-col title="Protection">
|
|
206
|
+
<bd-individual-icon slot="icon" size="40" color="#006DFF"></bd-individual-icon>
|
|
207
|
+
<bd-p slot="description" kind="small">macOS protection description.</bd-p>
|
|
208
|
+
<bd-accordion-section no-container>
|
|
209
|
+
<bd-accordion-item title="Real-Time Protection" open>
|
|
210
|
+
<bd-p kind="small">Content for macOS protection.</bd-p>
|
|
211
|
+
</bd-accordion-item>
|
|
212
|
+
<bd-accordion-item title="Network Threat Prevention">
|
|
213
|
+
<bd-p kind="small">Content here</bd-p>
|
|
214
|
+
</bd-accordion-item>
|
|
215
|
+
</bd-accordion-section>
|
|
216
|
+
</bd-tab-col>
|
|
217
|
+
|
|
218
|
+
<bd-tab-col title="Privacy">
|
|
219
|
+
<bd-globe-icon slot="icon" size="40" color="#006DFF"></bd-globe-icon>
|
|
220
|
+
<bd-p slot="description" kind="small">macOS privacy description.</bd-p>
|
|
221
|
+
<bd-accordion-section no-container>
|
|
222
|
+
<bd-accordion-item title="VPN Traffic" open>
|
|
223
|
+
<bd-p kind="small">Content for macOS privacy.</bd-p>
|
|
224
|
+
</bd-accordion-item>
|
|
225
|
+
</bd-accordion-section>
|
|
226
|
+
</bd-tab-col>
|
|
227
|
+
|
|
228
|
+
<bd-tab-col title="Identity Protection">
|
|
229
|
+
<bd-family-icon slot="icon" size="40" color="#006DFF"></bd-family-icon>
|
|
230
|
+
<bd-p slot="description" kind="small">macOS identity description.</bd-p>
|
|
231
|
+
<bd-accordion-section no-container>
|
|
232
|
+
<bd-accordion-item title="Dark Web Monitoring" open>
|
|
233
|
+
<bd-p kind="small">Content for macOS identity.</bd-p>
|
|
234
|
+
</bd-accordion-item>
|
|
235
|
+
</bd-accordion-section>
|
|
236
|
+
</bd-tab-col>
|
|
237
|
+
|
|
238
|
+
</bd-tab-panel>
|
|
239
|
+
`;
|
|
240
|
+
|
|
241
|
+
const iosPanel = html`
|
|
242
|
+
<bd-tab-panel title="iOS">
|
|
243
|
+
|
|
244
|
+
<bd-tab-col title="Protection">
|
|
245
|
+
<bd-individual-icon slot="icon" size="40" color="#006DFF"></bd-individual-icon>
|
|
246
|
+
<bd-p slot="description" kind="small">iOS protection description.</bd-p>
|
|
247
|
+
<bd-accordion-section no-container>
|
|
248
|
+
<bd-accordion-item title="iOS Real-Time Protection" open>
|
|
249
|
+
<bd-p kind="small">Content here</bd-p>
|
|
250
|
+
</bd-accordion-item>
|
|
251
|
+
</bd-accordion-section>
|
|
252
|
+
</bd-tab-col>
|
|
253
|
+
|
|
254
|
+
<bd-tab-col title="Privacy">
|
|
255
|
+
<bd-globe-icon slot="icon" size="40" color="#006DFF"></bd-globe-icon>
|
|
256
|
+
<bd-p slot="description" kind="small">iOS privacy description.</bd-p>
|
|
257
|
+
<bd-accordion-section no-container>
|
|
258
|
+
<bd-accordion-item title="iOS VPN" open>
|
|
259
|
+
<bd-p kind="small">Content here</bd-p>
|
|
260
|
+
</bd-accordion-item>
|
|
261
|
+
</bd-accordion-section>
|
|
262
|
+
</bd-tab-col>
|
|
263
|
+
|
|
264
|
+
<bd-tab-col title="Identity Protection">
|
|
265
|
+
<bd-family-icon slot="icon" size="40" color="#006DFF"></bd-family-icon>
|
|
266
|
+
<bd-p slot="description" kind="small">iOS identity description.</bd-p>
|
|
267
|
+
<bd-accordion-section no-container>
|
|
268
|
+
<bd-accordion-item title="iOS Dark Web" open>
|
|
269
|
+
<bd-p kind="small">Content here</bd-p>
|
|
270
|
+
</bd-accordion-item>
|
|
271
|
+
</bd-accordion-section>
|
|
272
|
+
</bd-tab-col>
|
|
273
|
+
|
|
274
|
+
</bd-tab-panel>
|
|
275
|
+
`;
|
|
276
|
+
|
|
277
|
+
const androidPanel = html`
|
|
278
|
+
<bd-tab-panel title="Android">
|
|
279
|
+
|
|
280
|
+
<bd-tab-col title="Protection">
|
|
281
|
+
<bd-individual-icon slot="icon" size="40" color="#006DFF"></bd-individual-icon>
|
|
282
|
+
<bd-p slot="description" kind="small">Android protection description.</bd-p>
|
|
283
|
+
<bd-accordion-section no-container>
|
|
284
|
+
<bd-accordion-item title="Android Real-Time Protection" open>
|
|
285
|
+
<bd-p kind="small">Content here</bd-p>
|
|
286
|
+
</bd-accordion-item>
|
|
287
|
+
</bd-accordion-section>
|
|
288
|
+
</bd-tab-col>
|
|
289
|
+
|
|
290
|
+
<bd-tab-col title="Privacy">
|
|
291
|
+
<bd-globe-icon slot="icon" size="40" color="#006DFF"></bd-globe-icon>
|
|
292
|
+
<bd-p slot="description" kind="small">Android privacy description.</bd-p>
|
|
293
|
+
<bd-accordion-section no-container>
|
|
294
|
+
<bd-accordion-item title="Android VPN" open>
|
|
295
|
+
<bd-p kind="small">Content here</bd-p>
|
|
296
|
+
</bd-accordion-item>
|
|
297
|
+
</bd-accordion-section>
|
|
298
|
+
</bd-tab-col>
|
|
299
|
+
|
|
300
|
+
<bd-tab-col title="Identity Protection">
|
|
301
|
+
<bd-family-icon slot="icon" size="40" color="#006DFF"></bd-family-icon>
|
|
302
|
+
<bd-p slot="description" kind="small">Android identity description.</bd-p>
|
|
303
|
+
<bd-accordion-section no-container>
|
|
304
|
+
<bd-accordion-item title="Android Dark Web" open>
|
|
305
|
+
<bd-p kind="small">Content here</bd-p>
|
|
306
|
+
</bd-accordion-item>
|
|
307
|
+
</bd-accordion-section>
|
|
308
|
+
</bd-tab-col>
|
|
309
|
+
|
|
310
|
+
</bd-tab-panel>
|
|
311
|
+
`;
|
|
312
|
+
|
|
313
|
+
// ─── Stories ──────────────────────────────────────────────────────────────────
|
|
314
|
+
|
|
315
|
+
export const Default = {
|
|
316
|
+
name : "Default — Windows",
|
|
317
|
+
parameters: { controls: { disable: true } },
|
|
318
|
+
render : () => html`
|
|
319
|
+
<bd-tabs
|
|
320
|
+
title="The Ultimate Protection and Privacy for all platforms. Bitdefender Premium VPN, Password Manager and Identity Protection included."
|
|
321
|
+
subtitle="Your digital safety is our top priority, always and everywhere. These comprehensive suites safeguard your digital life by seamlessly combining the ultimate award-winning device security with protection against identity theft and privacy intrusions, plus credit protection."
|
|
322
|
+
>
|
|
323
|
+
${windowsPanel}
|
|
324
|
+
${macosPanel}
|
|
325
|
+
${iosPanel}
|
|
326
|
+
${androidPanel}
|
|
327
|
+
</bd-tabs>
|
|
328
|
+
`
|
|
105
329
|
};
|
|
106
330
|
|
|
107
331
|
export const MobileView = {
|
|
108
|
-
name :
|
|
109
|
-
render : () => html`<bd-tabs-component></bd-tabs-component>`,
|
|
332
|
+
name : "Mobile View (375px)",
|
|
110
333
|
parameters: {
|
|
111
|
-
viewport: { defaultViewport:
|
|
112
|
-
|
|
113
|
-
}
|
|
334
|
+
viewport: { defaultViewport: "mobile1" },
|
|
335
|
+
controls: { disable: true }
|
|
336
|
+
},
|
|
337
|
+
render: () => html`
|
|
338
|
+
<bd-tabs
|
|
339
|
+
title="The Ultimate Protection"
|
|
340
|
+
subtitle="Your digital safety is our top priority."
|
|
341
|
+
>
|
|
342
|
+
${windowsPanel}
|
|
343
|
+
${macosPanel}
|
|
344
|
+
${iosPanel}
|
|
345
|
+
${androidPanel}
|
|
346
|
+
</bd-tabs>
|
|
347
|
+
`
|
|
114
348
|
};
|
|
115
349
|
|
|
116
350
|
export const TabletView = {
|
|
117
|
-
name :
|
|
118
|
-
render : () => html`<bd-tabs-component></bd-tabs-component>`,
|
|
351
|
+
name : "Tablet View (768px)",
|
|
119
352
|
parameters: {
|
|
120
|
-
viewport: { defaultViewport:
|
|
121
|
-
|
|
122
|
-
}
|
|
353
|
+
viewport: { defaultViewport: "tablet" },
|
|
354
|
+
controls: { disable: true }
|
|
355
|
+
},
|
|
356
|
+
render: () => html`
|
|
357
|
+
<bd-tabs
|
|
358
|
+
title="The Ultimate Protection"
|
|
359
|
+
subtitle="Your digital safety is our top priority."
|
|
360
|
+
>
|
|
361
|
+
${windowsPanel}
|
|
362
|
+
${macosPanel}
|
|
363
|
+
${iosPanel}
|
|
364
|
+
${androidPanel}
|
|
365
|
+
</bd-tabs>
|
|
366
|
+
`
|
|
123
367
|
};
|
|
124
368
|
|
|
125
|
-
export const
|
|
126
|
-
name
|
|
127
|
-
|
|
128
|
-
render: (
|
|
129
|
-
|
|
130
|
-
|
|
131
|
-
|
|
132
|
-
|
|
133
|
-
|
|
369
|
+
export const TwoColumns = {
|
|
370
|
+
name : "Două coloane per panel",
|
|
371
|
+
parameters: { controls: { disable: true } },
|
|
372
|
+
render : () => html`
|
|
373
|
+
<bd-tabs
|
|
374
|
+
title="Simple Two Column Layout"
|
|
375
|
+
subtitle="Demonstrează flexibilitatea numărului de coloane."
|
|
376
|
+
>
|
|
377
|
+
<bd-tab-panel title="Windows">
|
|
378
|
+
<bd-tab-col title="Protection">
|
|
379
|
+
<bd-individual-icon slot="icon" size="40" color="#006DFF"></bd-individual-icon>
|
|
380
|
+
<bd-p slot="description" kind="small">Protection description.</bd-p>
|
|
381
|
+
<bd-accordion-section no-container>
|
|
382
|
+
<bd-accordion-item title="Real-Time Protection" open>
|
|
383
|
+
<bd-p kind="small">Content here</bd-p>
|
|
384
|
+
</bd-accordion-item>
|
|
385
|
+
<bd-accordion-item title="Network Threat Prevention">
|
|
386
|
+
<bd-p kind="small">Content here</bd-p>
|
|
387
|
+
</bd-accordion-item>
|
|
388
|
+
</bd-accordion-section>
|
|
389
|
+
</bd-tab-col>
|
|
390
|
+
<bd-tab-col title="Privacy">
|
|
391
|
+
<bd-globe-icon slot="icon" size="40" color="#006DFF"></bd-globe-icon>
|
|
392
|
+
<bd-p slot="description" kind="small">Privacy description.</bd-p>
|
|
393
|
+
<bd-accordion-section no-container>
|
|
394
|
+
<bd-accordion-item title="VPN Traffic" open>
|
|
395
|
+
<bd-p kind="small">Content here</bd-p>
|
|
396
|
+
</bd-accordion-item>
|
|
397
|
+
<bd-accordion-item title="Password Manager">
|
|
398
|
+
<bd-p kind="small">Content here</bd-p>
|
|
399
|
+
</bd-accordion-item>
|
|
400
|
+
</bd-accordion-section>
|
|
401
|
+
</bd-tab-col>
|
|
402
|
+
</bd-tab-panel>
|
|
403
|
+
|
|
404
|
+
<bd-tab-panel title="macOS">
|
|
405
|
+
<bd-tab-col title="Protection">
|
|
406
|
+
<bd-individual-icon slot="icon" size="40" color="#006DFF"></bd-individual-icon>
|
|
407
|
+
<bd-p slot="description" kind="small">macOS protection.</bd-p>
|
|
408
|
+
<bd-accordion-section no-container>
|
|
409
|
+
<bd-accordion-item title="macOS Protection" open>
|
|
410
|
+
<bd-p kind="small">Content here</bd-p>
|
|
411
|
+
</bd-accordion-item>
|
|
412
|
+
</bd-accordion-section>
|
|
413
|
+
</bd-tab-col>
|
|
414
|
+
<bd-tab-col title="Privacy">
|
|
415
|
+
<bd-globe-icon slot="icon" size="40" color="#006DFF"></bd-globe-icon>
|
|
416
|
+
<bd-p slot="description" kind="small">macOS privacy.</bd-p>
|
|
417
|
+
<bd-accordion-section no-container>
|
|
418
|
+
<bd-accordion-item title="macOS Privacy" open>
|
|
419
|
+
<bd-p kind="small">Content here</bd-p>
|
|
420
|
+
</bd-accordion-item>
|
|
421
|
+
</bd-accordion-section>
|
|
422
|
+
</bd-tab-col>
|
|
423
|
+
</bd-tab-panel>
|
|
424
|
+
</bd-tabs>
|
|
425
|
+
`
|
|
426
|
+
};
|
|
427
|
+
|
|
428
|
+
export const OneColumn = {
|
|
429
|
+
name : "O coloană per panel",
|
|
430
|
+
parameters: { controls: { disable: true } },
|
|
431
|
+
render : () => html`
|
|
432
|
+
<bd-tabs
|
|
433
|
+
title="Single Column Layout"
|
|
434
|
+
subtitle="Demonstrează o singură coloană centrată."
|
|
435
|
+
>
|
|
436
|
+
<bd-tab-panel title="Windows">
|
|
437
|
+
<bd-tab-col title="Protection">
|
|
438
|
+
<bd-individual-icon slot="icon" size="40" color="#006DFF"></bd-individual-icon>
|
|
439
|
+
<bd-p slot="description" kind="small">Single column protection description.</bd-p>
|
|
440
|
+
<bd-accordion-section no-container>
|
|
441
|
+
<bd-accordion-item title="Real-Time Protection" open>
|
|
442
|
+
<bd-p kind="small">Content here</bd-p>
|
|
443
|
+
</bd-accordion-item>
|
|
444
|
+
<bd-accordion-item title="Network Threat Prevention">
|
|
445
|
+
<bd-p kind="small">Content here</bd-p>
|
|
446
|
+
</bd-accordion-item>
|
|
447
|
+
<bd-accordion-item title="Advanced Threat Defense">
|
|
448
|
+
<bd-p kind="small">Content here</bd-p>
|
|
449
|
+
</bd-accordion-item>
|
|
450
|
+
</bd-accordion-section>
|
|
451
|
+
</bd-tab-col>
|
|
452
|
+
</bd-tab-panel>
|
|
453
|
+
|
|
454
|
+
<bd-tab-panel title="macOS">
|
|
455
|
+
<bd-tab-col title="Protection">
|
|
456
|
+
<bd-laurel-icon slot="icon" size="40" color="#006DFF"></bd-laurel-icon>
|
|
457
|
+
<bd-p slot="description" kind="small">macOS single column description.</bd-p>
|
|
458
|
+
<bd-accordion-section no-container>
|
|
459
|
+
<bd-accordion-item title="macOS Protection" open>
|
|
460
|
+
<bd-p kind="small">Content here</bd-p>
|
|
461
|
+
</bd-accordion-item>
|
|
462
|
+
</bd-accordion-section>
|
|
463
|
+
</bd-tab-col>
|
|
464
|
+
</bd-tab-panel>
|
|
465
|
+
</bd-tabs>
|
|
466
|
+
`
|
|
134
467
|
};
|