@repobit/dex-system-design 0.23.60 → 0.23.61

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.
Files changed (5) hide show
  1. package/CHANGELOG.md +7 -0
  2. package/package.json +4 -4
  3. package/src/components/features/features.css.js +1 -1
  4. package/src/components/tabs/tabs.css.js +25 -17
  5. package/src/components/tabs/tabs.stories.js +384 -387
package/CHANGELOG.md CHANGED
@@ -3,6 +3,13 @@
3
3
  All notable changes to this project will be documented in this file.
4
4
  See [Conventional Commits](https://conventionalcommits.org) for commit guidelines.
5
5
 
6
+ ## [0.23.61](https://github.com/bitdefender/dex-core/compare/@repobit/dex-system-design@0.23.60...@repobit/dex-system-design@0.23.61) (2026-07-01)
7
+
8
+ ### Bug Fixes
9
+
10
+ * **DEX-1014:** css adjustments for features component
11
+
12
+
6
13
  ## [0.23.60](https://github.com/bitdefender/dex-core/compare/@repobit/dex-system-design@0.23.59...@repobit/dex-system-design@0.23.60) (2026-07-01)
7
14
 
8
15
  ### Bug Fixes
package/package.json CHANGED
@@ -1,6 +1,6 @@
1
1
  {
2
2
  "name": "@repobit/dex-system-design",
3
- "version": "0.23.60",
3
+ "version": "0.23.61",
4
4
  "description": "Design system based on Web Components.",
5
5
  "author": "Iordache Matei Cezar <miordache@bitdefender.com>",
6
6
  "homepage": "https://github.com/bitdefender/dex-core#readme",
@@ -70,8 +70,8 @@
70
70
  "url": "https://github.com/bitdefender/dex-core/issues"
71
71
  },
72
72
  "dependencies": {
73
- "@repobit/dex-store": "1.3.56",
74
- "@repobit/dex-store-elements": "1.4.48",
73
+ "@repobit/dex-store": "1.3.57",
74
+ "@repobit/dex-store-elements": "1.4.49",
75
75
  "lit": "^3.3.2"
76
76
  },
77
77
  "devDependencies": {
@@ -88,5 +88,5 @@
88
88
  "volta": {
89
89
  "node": "24.14.0"
90
90
  },
91
- "gitHead": "0c9ff6674273ab9376a981bafc24fb142ce3092a"
91
+ "gitHead": "340157b8af9fccd5ff8eaeae5f602c0ed8700ae1"
92
92
  }
package/src/components/features/features.css.js CHANGED
@@ -3,7 +3,7 @@ import { css } from "lit";
3
3
  export default css`
4
4
  :host {
5
5
  display: block;
6
- width: 100%;
6
+ // width: 100%;
7
7
  padding-top: var(--spacing-64);
8
8
  padding-bottom: var(--spacing-64);
9
9
  --bd-acc-header-margin-bottom: var(--spacing-8);
package/src/components/tabs/tabs.css.js CHANGED
@@ -1,18 +1,16 @@
1
1
  import { css } from "lit";
2
2
 
3
3
  export default css`
4
- :host {
5
- --bd-accesibility-focus: var(--color-blue-500);
6
- font-size: 100%;
7
- display: block;
8
- font-family: var(--typography-fontFamily-sans);
9
- // padding-top: var(--spacing-64);
10
- // padding-bottom: var(--spacing-64);
11
- }
12
-
13
- :host([bg-blue]) {
14
- background: var(--color-blue-50);
15
- }
4
+ :host {
5
+ --bd-accesibility-focus: var(--color-blue-500);
6
+ font-size: 100%;
7
+ display: block;
8
+ font-family: var(--typography-fontFamily-sans);
9
+ }
10
+
11
+ :host([bg-blue]) {
12
+ background: var(--color-blue-50);
13
+ }
16
14
 
17
15
  .bd-tabs-component {
18
16
  display: flex;
@@ -20,7 +18,15 @@ export default css`
20
18
  align-items: center;
21
19
  max-width: 1290px;
22
20
  margin-inline: auto;
21
+ box-sizing: border-box;
22
+ }
23
+
24
+ /* Titlu + subtitle + tab buttons — au padding inline */
25
+ bd-highlight,
26
+ .bd-tabs-subtitle,
27
+ .bd-tabs-container {
23
28
  padding-inline: var(--layout-ensemble-inline-padding, var(--spacing-24));
29
+ width: 100%;
24
30
  box-sizing: border-box;
25
31
  }
26
32
 
@@ -39,12 +45,14 @@ export default css`
39
45
  justify-content: center;
40
46
  flex-wrap: wrap;
41
47
  border-bottom: 1px solid var(--color-neutral-100);
42
- // margin-bottom: var(--spacing-32);
43
48
  }
44
- .bd-panel-wrapper {
45
- width: 100%;
46
- box-sizing: border-box;
47
- }
49
+
50
+ /* Panel — full width, fara padding inline */
51
+ .bd-panel-wrapper {
52
+ width: 100%;
53
+ box-sizing: border-box;
54
+ }
55
+
48
56
  .bd-tab-button {
49
57
  display: inline-flex;
50
58
  align-items: center;
package/src/components/tabs/tabs.stories.js CHANGED
@@ -1,7 +1,10 @@
1
1
  import { html } from "lit";
2
2
  import "../accordion/accordion.js";
3
+ import "../badge/badge.js";
3
4
  import "../features/features.js";
4
- import "../image/image.js";
5
+ import "../icons/family-icon.js";
6
+ import "../icons/globe-icon.js";
7
+ import "../icons/individual-icon.js";
5
8
  import "../paragraph/paragraph.js";
6
9
  import "./tabs.js";
7
10
 
@@ -18,46 +21,48 @@ Componentă Lit pentru afișarea de feature-uri în taburi cu coloane de accordi
18
21
  \`\`\`html
19
22
  <bd-tabs title="..." subtitle="...">
20
23
  <bd-tab-panel title="Windows">
21
- <bd-feature-col
22
- title="Protection"
23
- icon-src="/assets/pic1.png"
24
- icon-alt="Protection icon"
25
- >
26
- <bd-p slot="description" kind="small">Descriere coloana</bd-p>
27
- <bd-accordion-section no-container>
28
- <bd-accordion-item title="Feature 1" open>
29
- <bd-p kind="small">Detalii</bd-p>
30
- </bd-accordion-item>
31
- </bd-accordion-section>
32
- </bd-feature-col>
24
+ <bd-features>
25
+ <bd-feature-col title="Protection">
26
+ <bd-individual-icon slot="icon" size="40" color="#006DFF"></bd-individual-icon>
27
+ <bd-p kind="small" slot="description">Descriere coloana</bd-p>
28
+ <bd-accordion-section no-container>
29
+ <bd-accordion-item title="Feature 1" open>
30
+ <bd-badge slot="badge" variant="bd-light-blue" size="sm" fontweight="700">NEW</bd-badge>
31
+ <bd-p kind="small">Detalii</bd-p>
32
+ </bd-accordion-item>
33
+ </bd-accordion-section>
34
+ </bd-feature-col>
35
+ </bd-features>
33
36
  </bd-tab-panel>
34
37
  </bd-tabs>
35
38
  \`\`\`
36
39
 
37
40
  ### Structura
38
- - \`bd-tabs\` — componenta principală, primește \`title\` și \`subtitle\`
39
- - \`bd-tab-panel\` — un panel per tab (ex: Windows, macOS), primește \`title\`
40
- - \`bd-feature-col\` — o coloană în panel, primește \`title\`, \`icon-src\`, \`icon-alt\`
41
+ - \`bd-tabs\` — componenta principală, primește \`title\`, \`subtitle\` și opțional \`bg-blue\`
42
+ - \`bd-tab-panel\` — un panel per tab, primește \`title\`
43
+ - \`bd-features\` — wrapper grid pentru coloane, pus explicit în fiecare panel
44
+ - \`bd-feature-col\` — o coloană, primește \`title\`
45
+ - Slot \`icon\` — iconița coloanei (ex: \`bd-individual-icon\`)
41
46
  - Slot \`description\` — text descriptiv sub titlul coloanei
42
- - Slot default — conținut accordion (\`bd-accordion-section\` cu \`no-container\`)
47
+ - Slot default — \`bd-accordion-section\` cu \`no-container\`
48
+ - \`bd-badge\` — opțional pe \`bd-accordion-item\` via \`slot="badge"\`
43
49
 
44
50
  ### Atribute \`bd-tabs\`
45
51
  | Atribut | Tip | Default | Descriere |
46
52
  |---|---|---|---|
47
53
  | \`title\` | String | — | Titlul principal |
48
54
  | \`subtitle\` | String | — | Subtitlul descriptiv |
55
+ | \`bg-blue\` | Boolean | false | Fundal albastru \`color-blue-50\` |
49
56
 
50
57
  ### Atribute \`bd-tab-panel\`
51
58
  | Atribut | Tip | Descriere |
52
59
  |---|---|---|
53
- | \`title\` | String | Label-ul butonului de tab (ex: Windows) |
60
+ | \`title\` | String | Label-ul butonului de tab |
54
61
 
55
62
  ### Atribute \`bd-feature-col\`
56
63
  | Atribut | Tip | Descriere |
57
64
  |---|---|---|
58
- | \`title\` | String | Titlul coloanei (ex: Protection) |
59
- | \`icon-src\` | String | URL-ul imaginii icon |
60
- | \`icon-alt\` | String | Text alternativ pentru icon |
65
+ | \`title\` | String | Titlul coloanei |
61
66
  `
62
67
  }
63
68
  }
@@ -68,290 +73,214 @@ Componentă Lit pentru afișarea de feature-uri în taburi cu coloane de accordi
68
73
 
69
74
  const windowsPanel = html`
70
75
  <bd-tab-panel title="Windows">
71
-
72
- <bd-feature-col
73
- title="Protection"
74
- icon-src="/assets/pic1.png"
75
- icon-alt="Protection icon"
76
- >
77
- <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>
78
- <bd-accordion-section no-container>
79
- <bd-accordion-item title="Complete Real-Time Data Protection" open>
80
- <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>
81
- </bd-accordion-item>
82
- <bd-accordion-item title="Network Threat Prevention">
83
- <bd-p kind="small">Proactive network monitoring and threat detection.</bd-p>
84
- </bd-accordion-item>
85
- <bd-accordion-item title="Advanced Threat Defense">
86
- <bd-p kind="small">Behavioral detection stops unknown threats before they execute.</bd-p>
87
- </bd-accordion-item>
88
- <bd-accordion-item title="Scam Copilot">
89
- <bd-p kind="small">AI-powered scam detection and prevention.</bd-p>
90
- </bd-accordion-item>
91
- <bd-accordion-item title="E-mail Protection">
92
- <bd-p kind="small">Scans incoming and outgoing emails for threats.</bd-p>
93
- </bd-accordion-item>
94
- <bd-accordion-item title="Cryptomining Protection">
95
- <bd-p kind="small">Prevents unauthorized use of your CPU for mining.</bd-p>
96
- </bd-accordion-item>
97
- <bd-accordion-item title="Multi-Layer Ransomware Protection">
98
- <bd-p kind="small">Protects your files from unauthorized encryption.</bd-p>
99
- </bd-accordion-item>
100
- <bd-accordion-item title="Vulnerability Assessment">
101
- <bd-p kind="small">Scans for outdated software and security gaps.</bd-p>
102
- </bd-accordion-item>
103
- <bd-accordion-item title="Web Attack Prevention">
104
- <bd-p kind="small">Blocks malicious websites and drive-by downloads.</bd-p>
105
- </bd-accordion-item>
106
- <bd-accordion-item title="Anti-Phishing">
107
- <bd-p kind="small">Detects and blocks phishing attempts in real time.</bd-p>
108
- </bd-accordion-item>
109
- <bd-accordion-item title="Anti-Fraud">
110
- <bd-p kind="small">Warns you about fraudulent websites and schemes.</bd-p>
111
- </bd-accordion-item>
112
- <bd-accordion-item title="Antispam">
113
- <bd-p kind="small">Filters out spam and unwanted emails effectively.</bd-p>
114
- </bd-accordion-item>
115
- </bd-accordion-section>
116
- </bd-feature-col>
117
-
118
- <bd-feature-col
119
- title="Privacy"
120
- icon-src="/assets/pic2.png"
121
- icon-alt="Privacy icon"
122
- >
123
- <bd-p slot="description" kind="small">Bitdefender Ultimate Security takes care of your online privacy and personal information.</bd-p>
124
- <bd-accordion-section no-container>
125
- <bd-accordion-item title="Unlimited VPN Traffic" open>
126
- <bd-p kind="small">Encrypt your connection and stay private online across all devices.</bd-p>
127
- </bd-accordion-item>
128
- <bd-accordion-item title="Password Manager">
129
- <bd-p kind="small">Store and autofill passwords securely across all devices.</bd-p>
130
- </bd-accordion-item>
131
- <bd-accordion-item title="Anti-tracker">
132
- <bd-p kind="small">Block trackers and keep your browsing activity private.</bd-p>
133
- </bd-accordion-item>
134
- <bd-accordion-item title="Microphone Monitor">
135
- <bd-p kind="small">Alerts you when apps try to access your microphone.</bd-p>
136
- </bd-accordion-item>
137
- <bd-accordion-item title="Webcam Protection">
138
- <bd-p kind="small">Prevent unauthorized access to your webcam.</bd-p>
139
- </bd-accordion-item>
140
- <bd-accordion-item title="Parental Control">
141
- <bd-p kind="small">Monitor and control your children's online activity.</bd-p>
142
- </bd-accordion-item>
143
- <bd-accordion-item title="Privacy Firewall">
144
- <bd-p kind="small">Advanced firewall protection for your network.</bd-p>
145
- </bd-accordion-item>
146
- <bd-accordion-item title="Anti-Theft">
147
- <bd-p kind="small">Locate, lock, or wipe your device remotely.</bd-p>
148
- </bd-accordion-item>
149
- <bd-accordion-item title="Wi-Fi Security Advisor">
150
- <bd-p kind="small">Warns you about unsecured Wi-Fi networks.</bd-p>
151
- </bd-accordion-item>
152
- <bd-accordion-item title="Social Network Protection">
153
- <bd-p kind="small">Monitors your social accounts for suspicious activity.</bd-p>
154
- </bd-accordion-item>
155
- <bd-accordion-item title="File Shredder">
156
- <bd-p kind="small">Permanently delete sensitive files beyond recovery.</bd-p>
157
- </bd-accordion-item>
158
- </bd-accordion-section>
159
- </bd-feature-col>
160
-
161
- <bd-feature-col
162
- title="Identity Protection"
163
- icon-src="/assets/pic3.png"
164
- icon-alt="Identity Protection icon"
165
- >
166
- <bd-p slot="description" kind="small">Goes beyond credit monitoring to protect you against identity theft attacks you might not always recognize.</bd-p>
167
- <bd-accordion-section no-container>
168
- <bd-accordion-item title="Continuous Dark Web & Surface Monitoring" open>
169
- <bd-p kind="small">Get instant alerts if your data appears on the dark web.</bd-p>
170
- </bd-accordion-item>
171
- <bd-accordion-item title="Digital Footprint Visualization">
172
- <bd-p kind="small">See and reduce your digital exposure online.</bd-p>
173
- </bd-accordion-item>
174
- <bd-accordion-item title="Identity Protection Score">
175
- <bd-p kind="small">Understand your identity risk at a glance.</bd-p>
176
- </bd-accordion-item>
177
- <bd-accordion-item title="Real Time Breach Notifications">
178
- <bd-p kind="small">Be first to know when your accounts are compromised.</bd-p>
179
- </bd-accordion-item>
180
- <bd-accordion-item title="Security Advice from Bitdefender Experts">
181
- <bd-p kind="small">Get personalized security recommendations from experts.</bd-p>
182
- </bd-accordion-item>
183
- <bd-accordion-item title="Real-Time Fraud Monitoring">
184
- <bd-p kind="small">Monitor financial accounts for suspicious transactions.</bd-p>
185
- </bd-accordion-item>
186
- <bd-accordion-item title="Breach Monitor">
187
- <bd-p kind="small">Continuously checks if your accounts have been breached.</bd-p>
188
- </bd-accordion-item>
189
- <bd-accordion-item title="Credit Report Monitoring">
190
- <bd-p kind="small">Track changes to your credit report in real time.</bd-p>
191
- </bd-accordion-item>
192
- <bd-accordion-item title="Dark Web Monitoring and Alerts">
193
- <bd-p kind="small">Scans dark web marketplaces for your personal data.</bd-p>
194
- </bd-accordion-item>
195
- <bd-accordion-item title="SSN Tracker">
196
- <bd-p kind="small">Monitor usage of your Social Security Number.</bd-p>
197
- </bd-accordion-item>
198
- <bd-accordion-item title="Fraud Alert Reminders">
199
- <bd-p kind="small">Reminds you to place fraud alerts at credit bureaus.</bd-p>
200
- </bd-accordion-item>
201
- <bd-accordion-item title="Identity Alert">
202
- <bd-p kind="small">Alerts you to suspicious identity usage attempts.</bd-p>
203
- </bd-accordion-item>
204
- </bd-accordion-section>
205
- </bd-feature-col>
206
-
76
+ <bd-features>
77
+
78
+ <bd-feature-col title="Protection">
79
+ <bd-individual-icon slot="icon" size="40" color="#006DFF"></bd-individual-icon>
80
+ <bd-p kind="small" slot="description">Bitdefender's unbeatable multi-layered protection keeps your devices safe from all new and existing cyber threats.</bd-p>
81
+ <bd-accordion-section no-container>
82
+ <bd-accordion-item title="Complete Real-Time Data Protection" open>
83
+ <bd-badge slot="badge" variant="bd-light-blue" size="sm" fontweight="700">BLUE TAG</bd-badge>
84
+ <bd-p kind="small">Absolute power in the most efficient security bundle available today. Bitdefender Ultimate Security works against all e-threats.</bd-p>
85
+ </bd-accordion-item>
86
+ <bd-accordion-item title="Network Threat Prevention">
87
+ <bd-badge slot="badge" color="#43A047" size="sm" fontweight="700">INDUSTRY 1ST</bd-badge>
88
+ <bd-p kind="small">Proactive network monitoring and threat detection.</bd-p>
89
+ </bd-accordion-item>
90
+ <bd-accordion-item title="Advanced Threat Defense">
91
+ <bd-p kind="small">Behavioral detection stops unknown threats before they execute.</bd-p>
92
+ </bd-accordion-item>
93
+ <bd-accordion-item title="Scam Copilot">
94
+ <bd-p kind="small">AI-powered scam detection and prevention.</bd-p>
95
+ </bd-accordion-item>
96
+ <bd-accordion-item title="E-mail Protection">
97
+ <bd-p kind="small">Scans incoming and outgoing emails for threats.</bd-p>
98
+ </bd-accordion-item>
99
+ <bd-accordion-item title="Multi-Layer Ransomware Protection">
100
+ <bd-p kind="small">Protects your files from unauthorized encryption.</bd-p>
101
+ </bd-accordion-item>
102
+ </bd-accordion-section>
103
+ </bd-feature-col>
104
+
105
+ <bd-feature-col title="Privacy">
106
+ <bd-globe-icon slot="icon" size="40" color="#006DFF"></bd-globe-icon>
107
+ <bd-p kind="small" slot="description">Bitdefender Ultimate Security takes care of your online privacy and personal information.</bd-p>
108
+ <bd-accordion-section no-container>
109
+ <bd-accordion-item title="Unlimited VPN Traffic" open>
110
+ <bd-p kind="small">Encrypt your connection and stay private online across all devices.</bd-p>
111
+ </bd-accordion-item>
112
+ <bd-accordion-item title="Password Manager">
113
+ <bd-p kind="small">Store and autofill passwords securely across all devices.</bd-p>
114
+ </bd-accordion-item>
115
+ <bd-accordion-item title="Anti-tracker">
116
+ <bd-p kind="small">Block trackers and keep your browsing activity private.</bd-p>
117
+ </bd-accordion-item>
118
+ <bd-accordion-item title="Microphone Monitor">
119
+ <bd-p kind="small">Alerts you when apps try to access your microphone.</bd-p>
120
+ </bd-accordion-item>
121
+ <bd-accordion-item title="Webcam Protection">
122
+ <bd-p kind="small">Prevent unauthorized access to your webcam.</bd-p>
123
+ </bd-accordion-item>
124
+ <bd-accordion-item title="Privacy Firewall">
125
+ <bd-p kind="small">Advanced firewall protection for your network.</bd-p>
126
+ </bd-accordion-item>
127
+ </bd-accordion-section>
128
+ </bd-feature-col>
129
+
130
+ <bd-feature-col title="Identity Protection">
131
+ <bd-family-icon slot="icon" size="40" color="#006DFF"></bd-family-icon>
132
+ <bd-p kind="small" slot="description">Goes beyond credit monitoring to protect you against identity theft attacks you might not always recognize.</bd-p>
133
+ <bd-accordion-section no-container>
134
+ <bd-accordion-item title="Continuous Dark Web & Surface Monitoring" open>
135
+ <bd-p kind="small">Get instant alerts if your data appears on the dark web.</bd-p>
136
+ </bd-accordion-item>
137
+ <bd-accordion-item title="Digital Footprint Visualization">
138
+ <bd-p kind="small">See and reduce your digital exposure online.</bd-p>
139
+ </bd-accordion-item>
140
+ <bd-accordion-item title="Identity Protection Score">
141
+ <bd-p kind="small">Understand your identity risk at a glance.</bd-p>
142
+ </bd-accordion-item>
143
+ <bd-accordion-item title="Real Time Breach Notifications">
144
+ <bd-p kind="small">Be first to know when your accounts are compromised.</bd-p>
145
+ </bd-accordion-item>
146
+ <bd-accordion-item title="Credit Report Monitoring">
147
+ <bd-p kind="small">Track changes to your credit report in real time.</bd-p>
148
+ </bd-accordion-item>
149
+ <bd-accordion-item title="SSN Tracker">
150
+ <bd-p kind="small">Monitor usage of your Social Security Number.</bd-p>
151
+ </bd-accordion-item>
152
+ </bd-accordion-section>
153
+ </bd-feature-col>
154
+
155
+ </bd-features>
207
156
  </bd-tab-panel>
208
157
  `;
209
158
 
210
159
  const macosPanel = html`
211
160
  <bd-tab-panel title="macOS">
212
-
213
- <bd-feature-col
214
- title="Protection"
215
- icon-src="/assets/pic1.png"
216
- icon-alt="Protection icon"
217
- >
218
- <bd-p slot="description" kind="small">macOS protection description.</bd-p>
219
- <bd-accordion-section no-container>
220
- <bd-accordion-item title="Real-Time Protection" open>
221
- <bd-p kind="small">Content for macOS protection.</bd-p>
222
- </bd-accordion-item>
223
- <bd-accordion-item title="Network Threat Prevention">
224
- <bd-p kind="small">Content here</bd-p>
225
- </bd-accordion-item>
226
- </bd-accordion-section>
227
- </bd-feature-col>
228
-
229
- <bd-feature-col
230
- title="Privacy"
231
- icon-src="/assets/pic2.png"
232
- icon-alt="Privacy icon"
233
- >
234
- <bd-p slot="description" kind="small">macOS privacy description.</bd-p>
235
- <bd-accordion-section no-container>
236
- <bd-accordion-item title="VPN Traffic" open>
237
- <bd-p kind="small">Content for macOS privacy.</bd-p>
238
- </bd-accordion-item>
239
- </bd-accordion-section>
240
- </bd-feature-col>
241
-
242
- <bd-feature-col
243
- title="Identity Protection"
244
- icon-src="/assets/pic3.png"
245
- icon-alt="Identity Protection icon"
246
- >
247
- <bd-p slot="description" kind="small">macOS identity description.</bd-p>
248
- <bd-accordion-section no-container>
249
- <bd-accordion-item title="Dark Web Monitoring" open>
250
- <bd-p kind="small">Content for macOS identity.</bd-p>
251
- </bd-accordion-item>
252
- </bd-accordion-section>
253
- </bd-feature-col>
254
-
161
+ <bd-features>
162
+
163
+ <bd-feature-col title="Protection">
164
+ <bd-individual-icon slot="icon" size="40" color="#006DFF"></bd-individual-icon>
165
+ <bd-p kind="small" slot="description">Protection description for macOS.</bd-p>
166
+ <bd-accordion-section no-container>
167
+ <bd-accordion-item title="Real-Time Data Protection" open>
168
+ <bd-p kind="small">Content for macOS protection.</bd-p>
169
+ </bd-accordion-item>
170
+ <bd-accordion-item title="Network Threat Prevention">
171
+ <bd-p kind="small">Content here</bd-p>
172
+ </bd-accordion-item>
173
+ </bd-accordion-section>
174
+ </bd-feature-col>
175
+
176
+ <bd-feature-col title="Privacy">
177
+ <bd-globe-icon slot="icon" size="40" color="#006DFF"></bd-globe-icon>
178
+ <bd-p kind="small" slot="description">Privacy description for macOS.</bd-p>
179
+ <bd-accordion-section no-container>
180
+ <bd-accordion-item title="VPN Traffic" open>
181
+ <bd-p kind="small">Content for macOS privacy.</bd-p>
182
+ </bd-accordion-item>
183
+ </bd-accordion-section>
184
+ </bd-feature-col>
185
+
186
+ <bd-feature-col title="Identity Protection">
187
+ <bd-family-icon slot="icon" size="40" color="#006DFF"></bd-family-icon>
188
+ <bd-p kind="small" slot="description">macOS identity description.</bd-p>
189
+ <bd-accordion-section no-container>
190
+ <bd-accordion-item title="Dark Web Monitoring" open>
191
+ <bd-p kind="small">Content for macOS identity.</bd-p>
192
+ </bd-accordion-item>
193
+ </bd-accordion-section>
194
+ </bd-feature-col>
195
+
196
+ </bd-features>
255
197
  </bd-tab-panel>
256
198
  `;
257
199
 
258
200
  const iosPanel = html`
259
201
  <bd-tab-panel title="iOS">
260
-
261
- <bd-feature-col
262
- title="Protection"
263
- icon-src="/assets/pic1.png"
264
- icon-alt="Protection icon"
265
- >
266
- <bd-p slot="description" kind="small">iOS protection description.</bd-p>
267
- <bd-accordion-section no-container>
268
- <bd-accordion-item title="iOS Real-Time Protection" open>
269
- <bd-p kind="small">Content here</bd-p>
270
- </bd-accordion-item>
271
- </bd-accordion-section>
272
- </bd-feature-col>
273
-
274
- <bd-feature-col
275
- title="Privacy"
276
- icon-src="/assets/pic2.png"
277
- icon-alt="Privacy icon"
278
- >
279
- <bd-p slot="description" kind="small">iOS privacy description.</bd-p>
280
- <bd-accordion-section no-container>
281
- <bd-accordion-item title="iOS VPN" open>
282
- <bd-p kind="small">Content here</bd-p>
283
- </bd-accordion-item>
284
- </bd-accordion-section>
285
- </bd-feature-col>
286
-
287
- <bd-feature-col
288
- title="Identity Protection"
289
- icon-src="/assets/pic3.png"
290
- icon-alt="Identity Protection icon"
291
- >
292
- <bd-p slot="description" kind="small">iOS identity description.</bd-p>
293
- <bd-accordion-section no-container>
294
- <bd-accordion-item title="iOS Dark Web" open>
295
- <bd-p kind="small">Content here</bd-p>
296
- </bd-accordion-item>
297
- </bd-accordion-section>
298
- </bd-feature-col>
299
-
202
+ <bd-features>
203
+
204
+ <bd-feature-col title="Protection">
205
+ <bd-individual-icon slot="icon" size="40" color="#006DFF"></bd-individual-icon>
206
+ <bd-p kind="small" slot="description">iOS protection.</bd-p>
207
+ <bd-accordion-section no-container>
208
+ <bd-accordion-item title="iOS Real-Time Protection" open>
209
+ <bd-p kind="small">Content here</bd-p>
210
+ </bd-accordion-item>
211
+ </bd-accordion-section>
212
+ </bd-feature-col>
213
+
214
+ <bd-feature-col title="Privacy">
215
+ <bd-globe-icon slot="icon" size="40" color="#006DFF"></bd-globe-icon>
216
+ <bd-p kind="small" slot="description">iOS privacy.</bd-p>
217
+ <bd-accordion-section no-container>
218
+ <bd-accordion-item title="iOS VPN" open>
219
+ <bd-p kind="small">Content here</bd-p>
220
+ </bd-accordion-item>
221
+ </bd-accordion-section>
222
+ </bd-feature-col>
223
+
224
+ <bd-feature-col title="Identity Protection">
225
+ <bd-family-icon slot="icon" size="40" color="#006DFF"></bd-family-icon>
226
+ <bd-p kind="small" slot="description">iOS identity.</bd-p>
227
+ <bd-accordion-section no-container>
228
+ <bd-accordion-item title="iOS Dark Web" open>
229
+ <bd-p kind="small">Content here</bd-p>
230
+ </bd-accordion-item>
231
+ </bd-accordion-section>
232
+ </bd-feature-col>
233
+
234
+ </bd-features>
300
235
  </bd-tab-panel>
301
236
  `;
302
237
 
303
238
  const androidPanel = html`
304
239
  <bd-tab-panel title="Android">
305
-
306
- <bd-feature-col
307
- title="Protection"
308
- icon-src="/assets/pic1.png"
309
- icon-alt="Protection icon"
310
- >
311
- <bd-p slot="description" kind="small">Android protection description.</bd-p>
312
- <bd-accordion-section no-container>
313
- <bd-accordion-item title="Android Real-Time Protection" open>
314
- <bd-p kind="small">Content here</bd-p>
315
- </bd-accordion-item>
316
- </bd-accordion-section>
317
- </bd-feature-col>
318
-
319
- <bd-feature-col
320
- title="Privacy"
321
- icon-src="/assets/pic2.png"
322
- icon-alt="Privacy icon"
323
- >
324
- <bd-p slot="description" kind="small">Android privacy description.</bd-p>
325
- <bd-accordion-section no-container>
326
- <bd-accordion-item title="Android VPN" open>
327
- <bd-p kind="small">Content here</bd-p>
328
- </bd-accordion-item>
329
- </bd-accordion-section>
330
- </bd-feature-col>
331
-
332
- <bd-feature-col
333
- title="Identity Protection"
334
- icon-src="/assets/pic3.png"
335
- icon-alt="Identity Protection icon"
336
- >
337
- <bd-p slot="description" kind="small">Android identity description.</bd-p>
338
- <bd-accordion-section no-container>
339
- <bd-accordion-item title="Android Dark Web" open>
340
- <bd-p kind="small">Content here</bd-p>
341
- </bd-accordion-item>
342
- </bd-accordion-section>
343
- </bd-feature-col>
344
-
240
+ <bd-features>
241
+
242
+ <bd-feature-col title="Protection">
243
+ <bd-individual-icon slot="icon" size="40" color="#006DFF"></bd-individual-icon>
244
+ <bd-p kind="small" slot="description">Android protection.</bd-p>
245
+ <bd-accordion-section no-container>
246
+ <bd-accordion-item title="Android Real-Time Protection" open>
247
+ <bd-p kind="small">Content here</bd-p>
248
+ </bd-accordion-item>
249
+ </bd-accordion-section>
250
+ </bd-feature-col>
251
+
252
+ <bd-feature-col title="Privacy">
253
+ <bd-globe-icon slot="icon" size="40" color="#006DFF"></bd-globe-icon>
254
+ <bd-p kind="small" slot="description">Android privacy.</bd-p>
255
+ <bd-accordion-section no-container>
256
+ <bd-accordion-item title="Android VPN" open>
257
+ <bd-p kind="small">Content here</bd-p>
258
+ </bd-accordion-item>
259
+ </bd-accordion-section>
260
+ </bd-feature-col>
261
+
262
+ <bd-feature-col title="Identity Protection">
263
+ <bd-family-icon slot="icon" size="40" color="#006DFF"></bd-family-icon>
264
+ <bd-p kind="small" slot="description">Android identity.</bd-p>
265
+ <bd-accordion-section no-container>
266
+ <bd-accordion-item title="Android Dark Web" open>
267
+ <bd-p kind="small">Content here</bd-p>
268
+ </bd-accordion-item>
269
+ </bd-accordion-section>
270
+ </bd-feature-col>
271
+
272
+ </bd-features>
345
273
  </bd-tab-panel>
346
274
  `;
347
275
 
348
276
  // ─── Stories ──────────────────────────────────────────────────────────────────
349
277
 
350
278
  export const Default = {
351
- name : "Default — Windows",
279
+ name : "Default — Windows (bg-blue)",
352
280
  parameters: { controls: { disable: true } },
353
281
  render : () => html`
354
282
  <bd-tabs
283
+ bg-blue
355
284
  title="The Ultimate Protection and Privacy for all platforms. Bitdefender Premium VPN, Password Manager and Identity Protection included."
356
285
  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."
357
286
  >
@@ -363,15 +292,12 @@ export const Default = {
363
292
  `
364
293
  };
365
294
 
366
- export const MobileView = {
367
- name : "Mobile View (375px)",
368
- parameters: {
369
- viewport: { defaultViewport: "mobile1" },
370
- controls: { disable: true }
371
- },
372
- render: () => html`
295
+ export const NoBlueBg = {
296
+ name : "Fără fundal albastru",
297
+ parameters: { controls: { disable: true } },
298
+ render : () => html`
373
299
  <bd-tabs
374
- title="The Ultimate Protection"
300
+ title="The Ultimate Protection and Privacy for all platforms."
375
301
  subtitle="Your digital safety is our top priority."
376
302
  >
377
303
  ${windowsPanel}
@@ -382,21 +308,62 @@ export const MobileView = {
382
308
  `
383
309
  };
384
310
 
385
- export const TabletView = {
386
- name : "Tablet View (768px)",
387
- parameters: {
388
- viewport: { defaultViewport: "tablet" },
389
- controls: { disable: true }
390
- },
391
- render: () => html`
311
+ export const WithBadges = {
312
+ name : "Cu badge-uri pe accordion items",
313
+ parameters: { controls: { disable: true } },
314
+ render : () => html`
392
315
  <bd-tabs
393
- title="The Ultimate Protection"
316
+ bg-blue
317
+ title="The Ultimate Protection and Privacy for all platforms."
394
318
  subtitle="Your digital safety is our top priority."
395
319
  >
396
- ${windowsPanel}
397
- ${macosPanel}
398
- ${iosPanel}
399
- ${androidPanel}
320
+ <bd-tab-panel title="Windows">
321
+ <bd-features>
322
+ <bd-feature-col title="Protection">
323
+ <bd-individual-icon slot="icon" size="40" color="#006DFF"></bd-individual-icon>
324
+ <bd-p kind="small" slot="description">Protection description.</bd-p>
325
+ <bd-accordion-section no-container>
326
+ <bd-accordion-item title="Complete Real-Time Data Protection" open>
327
+ <bd-badge slot="badge" variant="bd-light-blue" size="sm" fontweight="700">BLUE TAG</bd-badge>
328
+ <bd-p kind="small">Content here</bd-p>
329
+ </bd-accordion-item>
330
+ <bd-accordion-item title="Network Threat Prevention">
331
+ <bd-badge slot="badge" color="#43A047" size="sm" fontweight="700">INDUSTRY 1ST</bd-badge>
332
+ <bd-p kind="small">Content here</bd-p>
333
+ </bd-accordion-item>
334
+ <bd-accordion-item title="Advanced Threat Defense">
335
+ <bd-p kind="small">Content here</bd-p>
336
+ </bd-accordion-item>
337
+ </bd-accordion-section>
338
+ </bd-feature-col>
339
+ <bd-feature-col title="Privacy">
340
+ <bd-globe-icon slot="icon" size="40" color="#006DFF"></bd-globe-icon>
341
+ <bd-p kind="small" slot="description">Privacy description.</bd-p>
342
+ <bd-accordion-section no-container>
343
+ <bd-accordion-item title="Unlimited VPN Traffic" open>
344
+ <bd-badge slot="badge" variant="bd-light-blue" size="sm" fontweight="700">NEW</bd-badge>
345
+ <bd-p kind="small">Content here</bd-p>
346
+ </bd-accordion-item>
347
+ <bd-accordion-item title="Password Manager">
348
+ <bd-p kind="small">Content here</bd-p>
349
+ </bd-accordion-item>
350
+ </bd-accordion-section>
351
+ </bd-feature-col>
352
+ </bd-features>
353
+ </bd-tab-panel>
354
+ <bd-tab-panel title="macOS">
355
+ <bd-features>
356
+ <bd-feature-col title="Protection">
357
+ <bd-individual-icon slot="icon" size="40" color="#006DFF"></bd-individual-icon>
358
+ <bd-p kind="small" slot="description">macOS protection.</bd-p>
359
+ <bd-accordion-section no-container>
360
+ <bd-accordion-item title="Real-Time Protection" open>
361
+ <bd-p kind="small">Content here</bd-p>
362
+ </bd-accordion-item>
363
+ </bd-accordion-section>
364
+ </bd-feature-col>
365
+ </bd-features>
366
+ </bd-tab-panel>
400
367
  </bd-tabs>
401
368
  `
402
369
  };
@@ -406,67 +373,59 @@ export const TwoColumns = {
406
373
  parameters: { controls: { disable: true } },
407
374
  render : () => html`
408
375
  <bd-tabs
376
+ bg-blue
409
377
  title="Simple Two Column Layout"
410
378
  subtitle="Demonstrează flexibilitatea numărului de coloane."
411
379
  >
412
380
  <bd-tab-panel title="Windows">
413
- <bd-feature-col
414
- title="Protection"
415
- icon-src="/assets/pic1.png"
416
- icon-alt="Protection icon"
417
- >
418
- <bd-p slot="description" kind="small">Protection description.</bd-p>
419
- <bd-accordion-section no-container>
420
- <bd-accordion-item title="Real-Time Protection" open>
421
- <bd-p kind="small">Content here</bd-p>
422
- </bd-accordion-item>
423
- <bd-accordion-item title="Network Threat Prevention">
424
- <bd-p kind="small">Content here</bd-p>
425
- </bd-accordion-item>
426
- </bd-accordion-section>
427
- </bd-feature-col>
428
- <bd-feature-col
429
- title="Privacy"
430
- icon-src="/assets/pic2.png"
431
- icon-alt="Privacy icon"
432
- >
433
- <bd-p slot="description" kind="small">Privacy description.</bd-p>
434
- <bd-accordion-section no-container>
435
- <bd-accordion-item title="VPN Traffic" open>
436
- <bd-p kind="small">Content here</bd-p>
437
- </bd-accordion-item>
438
- <bd-accordion-item title="Password Manager">
439
- <bd-p kind="small">Content here</bd-p>
440
- </bd-accordion-item>
441
- </bd-accordion-section>
442
- </bd-feature-col>
381
+ <bd-features>
382
+ <bd-feature-col title="Protection">
383
+ <bd-individual-icon slot="icon" size="40" color="#006DFF"></bd-individual-icon>
384
+ <bd-p kind="small" slot="description">Protection description.</bd-p>
385
+ <bd-accordion-section no-container>
386
+ <bd-accordion-item title="Real-Time Protection" open>
387
+ <bd-p kind="small">Content here</bd-p>
388
+ </bd-accordion-item>
389
+ <bd-accordion-item title="Network Threat Prevention">
390
+ <bd-p kind="small">Content here</bd-p>
391
+ </bd-accordion-item>
392
+ </bd-accordion-section>
393
+ </bd-feature-col>
394
+ <bd-feature-col title="Privacy">
395
+ <bd-globe-icon slot="icon" size="40" color="#006DFF"></bd-globe-icon>
396
+ <bd-p kind="small" slot="description">Privacy description.</bd-p>
397
+ <bd-accordion-section no-container>
398
+ <bd-accordion-item title="VPN Traffic" open>
399
+ <bd-p kind="small">Content here</bd-p>
400
+ </bd-accordion-item>
401
+ <bd-accordion-item title="Password Manager">
402
+ <bd-p kind="small">Content here</bd-p>
403
+ </bd-accordion-item>
404
+ </bd-accordion-section>
405
+ </bd-feature-col>
406
+ </bd-features>
443
407
  </bd-tab-panel>
444
-
445
408
  <bd-tab-panel title="macOS">
446
- <bd-feature-col
447
- title="Protection"
448
- icon-src="/assets/pic1.png"
449
- icon-alt="Protection icon"
450
- >
451
- <bd-p slot="description" kind="small">macOS protection.</bd-p>
452
- <bd-accordion-section no-container>
453
- <bd-accordion-item title="macOS Protection" open>
454
- <bd-p kind="small">Content here</bd-p>
455
- </bd-accordion-item>
456
- </bd-accordion-section>
457
- </bd-feature-col>
458
- <bd-feature-col
459
- title="Privacy"
460
- icon-src="/assets/pic2.png"
461
- icon-alt="Privacy icon"
462
- >
463
- <bd-p slot="description" kind="small">macOS privacy.</bd-p>
464
- <bd-accordion-section no-container>
465
- <bd-accordion-item title="macOS Privacy" open>
466
- <bd-p kind="small">Content here</bd-p>
467
- </bd-accordion-item>
468
- </bd-accordion-section>
469
- </bd-feature-col>
409
+ <bd-features>
410
+ <bd-feature-col title="Protection">
411
+ <bd-individual-icon slot="icon" size="40" color="#006DFF"></bd-individual-icon>
412
+ <bd-p kind="small" slot="description">macOS protection.</bd-p>
413
+ <bd-accordion-section no-container>
414
+ <bd-accordion-item title="macOS Protection" open>
415
+ <bd-p kind="small">Content here</bd-p>
416
+ </bd-accordion-item>
417
+ </bd-accordion-section>
418
+ </bd-feature-col>
419
+ <bd-feature-col title="Privacy">
420
+ <bd-globe-icon slot="icon" size="40" color="#006DFF"></bd-globe-icon>
421
+ <bd-p kind="small" slot="description">macOS privacy.</bd-p>
422
+ <bd-accordion-section no-container>
423
+ <bd-accordion-item title="macOS Privacy" open>
424
+ <bd-p kind="small">Content here</bd-p>
425
+ </bd-accordion-item>
426
+ </bd-accordion-section>
427
+ </bd-feature-col>
428
+ </bd-features>
470
429
  </bd-tab-panel>
471
430
  </bd-tabs>
472
431
  `
@@ -477,44 +436,82 @@ export const OneColumn = {
477
436
  parameters: { controls: { disable: true } },
478
437
  render : () => html`
479
438
  <bd-tabs
439
+ bg-blue
480
440
  title="Single Column Layout"
481
441
  subtitle="Demonstrează o singură coloană centrată."
482
442
  >
483
443
  <bd-tab-panel title="Windows">
484
- <bd-feature-col
485
- title="Protection"
486
- icon-src="/assets/pic1.png"
487
- icon-alt="Protection icon"
488
- >
489
- <bd-p slot="description" kind="small">Single column protection description.</bd-p>
490
- <bd-accordion-section no-container>
491
- <bd-accordion-item title="Real-Time Protection" open>
492
- <bd-p kind="small">Content here</bd-p>
493
- </bd-accordion-item>
494
- <bd-accordion-item title="Network Threat Prevention">
495
- <bd-p kind="small">Content here</bd-p>
496
- </bd-accordion-item>
497
- <bd-accordion-item title="Advanced Threat Defense">
498
- <bd-p kind="small">Content here</bd-p>
499
- </bd-accordion-item>
500
- </bd-accordion-section>
501
- </bd-feature-col>
444
+ <bd-features>
445
+ <bd-feature-col title="Protection">
446
+ <bd-individual-icon slot="icon" size="40" color="#006DFF"></bd-individual-icon>
447
+ <bd-p kind="small" slot="description">Single column protection description.</bd-p>
448
+ <bd-accordion-section no-container>
449
+ <bd-accordion-item title="Real-Time Protection" open>
450
+ <bd-p kind="small">Content here</bd-p>
451
+ </bd-accordion-item>
452
+ <bd-accordion-item title="Network Threat Prevention">
453
+ <bd-p kind="small">Content here</bd-p>
454
+ </bd-accordion-item>
455
+ <bd-accordion-item title="Advanced Threat Defense">
456
+ <bd-p kind="small">Content here</bd-p>
457
+ </bd-accordion-item>
458
+ </bd-accordion-section>
459
+ </bd-feature-col>
460
+ </bd-features>
502
461
  </bd-tab-panel>
503
-
504
462
  <bd-tab-panel title="macOS">
505
- <bd-feature-col
506
- title="Protection"
507
- icon-src="/assets/pic1.png"
508
- icon-alt="Protection icon"
509
- >
510
- <bd-p slot="description" kind="small">macOS single column description.</bd-p>
511
- <bd-accordion-section no-container>
512
- <bd-accordion-item title="macOS Protection" open>
513
- <bd-p kind="small">Content here</bd-p>
514
- </bd-accordion-item>
515
- </bd-accordion-section>
516
- </bd-feature-col>
463
+ <bd-features>
464
+ <bd-feature-col title="Protection">
465
+ <bd-individual-icon slot="icon" size="40" color="#006DFF"></bd-individual-icon>
466
+ <bd-p kind="small" slot="description">macOS single column description.</bd-p>
467
+ <bd-accordion-section no-container>
468
+ <bd-accordion-item title="macOS Protection" open>
469
+ <bd-p kind="small">Content here</bd-p>
470
+ </bd-accordion-item>
471
+ </bd-accordion-section>
472
+ </bd-feature-col>
473
+ </bd-features>
517
474
  </bd-tab-panel>
518
475
  </bd-tabs>
519
476
  `
477
+ };
478
+
479
+ export const MobileView = {
480
+ name : "Mobile View (375px)",
481
+ parameters: {
482
+ viewport: { defaultViewport: "mobile1" },
483
+ controls: { disable: true }
484
+ },
485
+ render: () => html`
486
+ <bd-tabs
487
+ bg-blue
488
+ title="The Ultimate Protection"
489
+ subtitle="Your digital safety is our top priority."
490
+ >
491
+ ${windowsPanel}
492
+ ${macosPanel}
493
+ ${iosPanel}
494
+ ${androidPanel}
495
+ </bd-tabs>
496
+ `
497
+ };
498
+
499
+ export const TabletView = {
500
+ name : "Tablet View (768px)",
501
+ parameters: {
502
+ viewport: { defaultViewport: "tablet" },
503
+ controls: { disable: true }
504
+ },
505
+ render: () => html`
506
+ <bd-tabs
507
+ bg-blue
508
+ title="The Ultimate Protection"
509
+ subtitle="Your digital safety is our top priority."
510
+ >
511
+ ${windowsPanel}
512
+ ${macosPanel}
513
+ ${iosPanel}
514
+ ${androidPanel}
515
+ </bd-tabs>
516
+ `
520
517
  };