@repobit/dex-system-design 0.23.46 → 0.23.48

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 +15 -0
  2. package/package.json +4 -4
  3. package/src/components/features/features.js +17 -5
  4. package/src/components/features/features.stories.js +56 -29
  5. package/src/components/tabs/tabs.stories.js +99 -47
package/CHANGELOG.md CHANGED
@@ -3,6 +3,21 @@
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.48](https://github.com/bitdefender/dex-core/compare/@repobit/dex-system-design@0.23.47...@repobit/dex-system-design@0.23.48) (2026-06-12)
7
+
8
+ **Note:** Version bump only for package @repobit/dex-system-design
9
+
10
+
11
+
12
+
13
+
14
+ ## [0.23.47](https://github.com/bitdefender/dex-core/compare/@repobit/dex-system-design@0.23.46...@repobit/dex-system-design@0.23.47) (2026-06-12)
15
+
16
+ ### Bug Fixes
17
+
18
+ * **DEX-1014:** use bd-img instead of bd-icons
19
+
20
+
6
21
  ## [0.23.46](https://github.com/bitdefender/dex-core/compare/@repobit/dex-system-design@0.23.45...@repobit/dex-system-design@0.23.46) (2026-06-10)
7
22
 
8
23
  ### Bug Fixes
package/package.json CHANGED
@@ -1,6 +1,6 @@
1
1
  {
2
2
  "name": "@repobit/dex-system-design",
3
- "version": "0.23.46",
3
+ "version": "0.23.48",
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.42",
74
- "@repobit/dex-store-elements": "1.4.34",
73
+ "@repobit/dex-store": "1.3.44",
74
+ "@repobit/dex-store-elements": "1.4.36",
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": "71d57f3670c242df9df010da40e0e2f5da418c42"
91
+ "gitHead": "7a5b68c532b9f3174a306bcf826672da421b1d2c"
92
92
  }
package/src/components/features/features.js CHANGED
@@ -2,10 +2,7 @@ import { LitElement, html } from "lit";
2
2
  import { tokens } from "../../tokens/tokens.js";
3
3
  import "../accordion/accordion.js";
4
4
  import "../heading/heading.js";
5
- import "../icons/family-icon.js";
6
- import "../icons/globe-icon.js";
7
- import "../icons/individual-icon.js";
8
- import "../icons/laurel-icon.js";
5
+ import "../image/image.js";
9
6
  import "../paragraph/paragraph.js";
10
7
  import featuresCSS from "./features.css.js";
11
8
 
@@ -83,11 +80,26 @@ class BdFeatures extends LitElement {
83
80
  const iconEl = col.querySelector("[slot='icon']");
84
81
  const accordionEl = col.querySelector("bd-accordion-section");
85
82
  const title = col.getAttribute("title");
83
+ const iconSrc = col.getAttribute("icon-src");
84
+ const iconAlt = col.getAttribute("icon-alt") || "";
86
85
 
87
86
  return html`
88
87
  <div class="bd-col">
89
88
  <div class="col-icon-wrapper">
90
- ${iconEl ? iconEl.cloneNode(true) : ""}
89
+ ${iconSrc
90
+ ? html`<bd-img
91
+ src="${iconSrc}"
92
+ alt="${iconAlt}"
93
+ width="40"
94
+ height="40"
95
+ fit="contain"
96
+ radius="none"
97
+ shadow="none"
98
+ loading="lazy"
99
+ ></bd-img>`
100
+ : iconEl
101
+ ? iconEl.cloneNode(true)
102
+ : ""}
91
103
  </div>
92
104
  <div class="col-title-wrapper">
93
105
  <bd-h as="h4">${title}</bd-h>
package/src/components/features/features.stories.js CHANGED
@@ -1,9 +1,6 @@
1
1
  import { html } from "lit";
2
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";
3
+ import "../image/image.js";
7
4
  import "../paragraph/paragraph.js";
8
5
  import "./features.js";
9
6
 
@@ -19,8 +16,11 @@ Componentă Lit pentru afișarea de feature-uri în coloane cu icon, titlu, desc
19
16
 
20
17
  \`\`\`html
21
18
  <bd-features>
22
- <bd-feature-col title="Protection">
23
- <bd-individual-icon slot="icon" size="40" color="#006DFF"></bd-individual-icon>
19
+ <bd-feature-col
20
+ title="Protection"
21
+ icon-src="/assets/pic1.png"
22
+ icon-alt="Protection icon"
23
+ >
24
24
  <bd-p slot="description" kind="small">Descriere coloana</bd-p>
25
25
  <bd-accordion-section no-container>
26
26
  <bd-accordion-item title="Feature 1" open>
@@ -33,8 +33,7 @@ Componentă Lit pentru afișarea de feature-uri în coloane cu icon, titlu, desc
33
33
 
34
34
  ### Structura
35
35
  - \`bd-features\` — componenta principală, randează coloanele în grid
36
- - \`bd-feature-col\` — o coloană, primește \`title\`
37
- - Slot \`icon\` — orice componentă de icon
36
+ - \`bd-feature-col\` — o coloană, primește \`title\`, \`icon-src\`, \`icon-alt\`
38
37
  - Slot \`description\` — text descriptiv sub titlul coloanei
39
38
  - Slot default — \`bd-accordion-section\` cu \`no-container\`
40
39
 
@@ -42,9 +41,8 @@ Componentă Lit pentru afișarea de feature-uri în coloane cu icon, titlu, desc
42
41
  | Atribut | Tip | Descriere |
43
42
  |---|---|---|
44
43
  | \`title\` | String | Titlul coloanei |
45
-
46
- ### Iconițe disponibile
47
- \`bd-individual-icon\`, \`bd-globe-icon\`, \`bd-family-icon\`, \`bd-laurel-icon\`
44
+ | \`icon-src\` | String | URL-ul imaginii icon |
45
+ | \`icon-alt\` | String | Text alternativ pentru icon |
48
46
  `
49
47
  }
50
48
  }
@@ -58,8 +56,11 @@ export const ThreeColumns = {
58
56
  parameters: { controls: { disable: true } },
59
57
  render : () => html`
60
58
  <bd-features>
61
- <bd-feature-col title="Protection">
62
- <bd-individual-icon slot="icon" size="40" color="#006DFF"></bd-individual-icon>
59
+ <bd-feature-col
60
+ title="Protection"
61
+ icon-src="/assets/pic1.png"
62
+ icon-alt="Protection icon"
63
+ >
63
64
  <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>
64
65
  <bd-accordion-section no-container>
65
66
  <bd-accordion-item title="Complete Real-Time Data Protection" open>
@@ -80,8 +81,11 @@ export const ThreeColumns = {
80
81
  </bd-accordion-section>
81
82
  </bd-feature-col>
82
83
 
83
- <bd-feature-col title="Privacy">
84
- <bd-globe-icon slot="icon" size="40" color="#006DFF"></bd-globe-icon>
84
+ <bd-feature-col
85
+ title="Privacy"
86
+ icon-src="/assets/pic2.png"
87
+ icon-alt="Privacy icon"
88
+ >
85
89
  <bd-p slot="description" kind="small">Bitdefender Ultimate Security takes care of your online privacy and personal information.</bd-p>
86
90
  <bd-accordion-section no-container>
87
91
  <bd-accordion-item title="Unlimited VPN Traffic" open>
@@ -102,8 +106,11 @@ export const ThreeColumns = {
102
106
  </bd-accordion-section>
103
107
  </bd-feature-col>
104
108
 
105
- <bd-feature-col title="Identity Protection">
106
- <bd-family-icon slot="icon" size="40" color="#006DFF"></bd-family-icon>
109
+ <bd-feature-col
110
+ title="Identity Protection"
111
+ icon-src="/assets/pic3.png"
112
+ icon-alt="Identity Protection icon"
113
+ >
107
114
  <bd-p slot="description" kind="small">Goes beyond credit monitoring to protect you against identity theft attacks you might not always recognize.</bd-p>
108
115
  <bd-accordion-section no-container>
109
116
  <bd-accordion-item title="Continuous Dark Web Monitoring" open>
@@ -132,8 +139,11 @@ export const TwoColumns = {
132
139
  parameters: { controls: { disable: true } },
133
140
  render : () => html`
134
141
  <bd-features>
135
- <bd-feature-col title="Protection">
136
- <bd-individual-icon slot="icon" size="40" color="#006DFF"></bd-individual-icon>
142
+ <bd-feature-col
143
+ title="Protection"
144
+ icon-src="/assets/pic1.png"
145
+ icon-alt="Protection icon"
146
+ >
137
147
  <bd-p slot="description" kind="small">Protection description.</bd-p>
138
148
  <bd-accordion-section no-container>
139
149
  <bd-accordion-item title="Real-Time Protection" open>
@@ -145,8 +155,11 @@ export const TwoColumns = {
145
155
  </bd-accordion-section>
146
156
  </bd-feature-col>
147
157
 
148
- <bd-feature-col title="Privacy">
149
- <bd-globe-icon slot="icon" size="40" color="#006DFF"></bd-globe-icon>
158
+ <bd-feature-col
159
+ title="Privacy"
160
+ icon-src="/assets/pic2.png"
161
+ icon-alt="Privacy icon"
162
+ >
150
163
  <bd-p slot="description" kind="small">Privacy description.</bd-p>
151
164
  <bd-accordion-section no-container>
152
165
  <bd-accordion-item title="VPN Traffic" open>
@@ -166,8 +179,11 @@ export const OneColumn = {
166
179
  parameters: { controls: { disable: true } },
167
180
  render : () => html`
168
181
  <bd-features>
169
- <bd-feature-col title="Protection">
170
- <bd-individual-icon slot="icon" size="40" color="#006DFF"></bd-individual-icon>
182
+ <bd-feature-col
183
+ title="Protection"
184
+ icon-src="/assets/pic1.png"
185
+ icon-alt="Protection icon"
186
+ >
171
187
  <bd-p slot="description" kind="small">Single column protection description.</bd-p>
172
188
  <bd-accordion-section no-container>
173
189
  <bd-accordion-item title="Real-Time Protection" open>
@@ -193,8 +209,11 @@ export const MobileView = {
193
209
  },
194
210
  render: () => html`
195
211
  <bd-features>
196
- <bd-feature-col title="Protection">
197
- <bd-individual-icon slot="icon" size="40" color="#006DFF"></bd-individual-icon>
212
+ <bd-feature-col
213
+ title="Protection"
214
+ icon-src="/assets/pic1.png"
215
+ icon-alt="Protection icon"
216
+ >
198
217
  <bd-p slot="description" kind="small">Protection description.</bd-p>
199
218
  <bd-accordion-section no-container>
200
219
  <bd-accordion-item title="Real-Time Protection" open>
@@ -202,8 +221,12 @@ export const MobileView = {
202
221
  </bd-accordion-item>
203
222
  </bd-accordion-section>
204
223
  </bd-feature-col>
205
- <bd-feature-col title="Privacy">
206
- <bd-globe-icon slot="icon" size="40" color="#006DFF"></bd-globe-icon>
224
+
225
+ <bd-feature-col
226
+ title="Privacy"
227
+ icon-src="/assets/pic2.png"
228
+ icon-alt="Privacy icon"
229
+ >
207
230
  <bd-p slot="description" kind="small">Privacy description.</bd-p>
208
231
  <bd-accordion-section no-container>
209
232
  <bd-accordion-item title="VPN Traffic" open>
@@ -211,8 +234,12 @@ export const MobileView = {
211
234
  </bd-accordion-item>
212
235
  </bd-accordion-section>
213
236
  </bd-feature-col>
214
- <bd-feature-col title="Identity Protection">
215
- <bd-family-icon slot="icon" size="40" color="#006DFF"></bd-family-icon>
237
+
238
+ <bd-feature-col
239
+ title="Identity Protection"
240
+ icon-src="/assets/pic3.png"
241
+ icon-alt="Identity Protection icon"
242
+ >
216
243
  <bd-p slot="description" kind="small">Identity description.</bd-p>
217
244
  <bd-accordion-section no-container>
218
245
  <bd-accordion-item title="Dark Web Monitoring" open>
package/src/components/tabs/tabs.stories.js CHANGED
@@ -1,10 +1,7 @@
1
1
  import { html } from "lit";
2
2
  import "../accordion/accordion.js";
3
3
  import "../features/features.js";
4
- import "../icons/family-icon.js";
5
- import "../icons/globe-icon.js";
6
- import "../icons/individual-icon.js";
7
- import "../icons/laurel-icon.js";
4
+ import "../image/image.js";
8
5
  import "../paragraph/paragraph.js";
9
6
  import "./tabs.js";
10
7
 
@@ -21,8 +18,11 @@ Componentă Lit pentru afișarea de feature-uri în taburi cu coloane de accordi
21
18
  \`\`\`html
22
19
  <bd-tabs title="..." subtitle="...">
23
20
  <bd-tab-panel title="Windows">
24
- <bd-feature-col title="Protection">
25
- <bd-individual-icon slot="icon" size="40" color="#006DFF"></bd-individual-icon>
21
+ <bd-feature-col
22
+ title="Protection"
23
+ icon-src="/assets/pic1.png"
24
+ icon-alt="Protection icon"
25
+ >
26
26
  <bd-p slot="description" kind="small">Descriere coloana</bd-p>
27
27
  <bd-accordion-section no-container>
28
28
  <bd-accordion-item title="Feature 1" open>
@@ -37,8 +37,7 @@ Componentă Lit pentru afișarea de feature-uri în taburi cu coloane de accordi
37
37
  ### Structura
38
38
  - \`bd-tabs\` — componenta principală, primește \`title\` și \`subtitle\`
39
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\`
41
- - Slot \`icon\` — orice componentă de icon (ex: \`<bd-individual-icon slot="icon">\`)
40
+ - \`bd-feature-col\` — o coloană în panel, primește \`title\`, \`icon-src\`, \`icon-alt\`
42
41
  - Slot \`description\` — text descriptiv sub titlul coloanei
43
42
  - Slot default — conținut accordion (\`bd-accordion-section\` cu \`no-container\`)
44
43
 
@@ -57,9 +56,8 @@ Componentă Lit pentru afișarea de feature-uri în taburi cu coloane de accordi
57
56
  | Atribut | Tip | Descriere |
58
57
  |---|---|---|
59
58
  | \`title\` | String | Titlul coloanei (ex: Protection) |
60
-
61
- ### Iconițe disponibile
62
- \`bd-individual-icon\`, \`bd-globe-icon\`, \`bd-family-icon\`, \`bd-laurel-icon\`
59
+ | \`icon-src\` | String | URL-ul imaginii icon |
60
+ | \`icon-alt\` | String | Text alternativ pentru icon |
63
61
  `
64
62
  }
65
63
  }
@@ -71,8 +69,11 @@ Componentă Lit pentru afișarea de feature-uri în taburi cu coloane de accordi
71
69
  const windowsPanel = html`
72
70
  <bd-tab-panel title="Windows">
73
71
 
74
- <bd-feature-col title="Protection">
75
- <bd-individual-icon slot="icon" size="40" color="#006DFF"></bd-individual-icon>
72
+ <bd-feature-col
73
+ title="Protection"
74
+ icon-src="/assets/pic1.png"
75
+ icon-alt="Protection icon"
76
+ >
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>
77
78
  <bd-accordion-section no-container>
78
79
  <bd-accordion-item title="Complete Real-Time Data Protection" open>
@@ -114,8 +115,11 @@ const windowsPanel = html`
114
115
  </bd-accordion-section>
115
116
  </bd-feature-col>
116
117
 
117
- <bd-feature-col title="Privacy">
118
- <bd-globe-icon slot="icon" size="40" color="#006DFF"></bd-globe-icon>
118
+ <bd-feature-col
119
+ title="Privacy"
120
+ icon-src="/assets/pic2.png"
121
+ icon-alt="Privacy icon"
122
+ >
119
123
  <bd-p slot="description" kind="small">Bitdefender Ultimate Security takes care of your online privacy and personal information.</bd-p>
120
124
  <bd-accordion-section no-container>
121
125
  <bd-accordion-item title="Unlimited VPN Traffic" open>
@@ -154,8 +158,11 @@ const windowsPanel = html`
154
158
  </bd-accordion-section>
155
159
  </bd-feature-col>
156
160
 
157
- <bd-feature-col title="Identity Protection">
158
- <bd-family-icon slot="icon" size="40" color="#006DFF"></bd-family-icon>
161
+ <bd-feature-col
162
+ title="Identity Protection"
163
+ icon-src="/assets/pic3.png"
164
+ icon-alt="Identity Protection icon"
165
+ >
159
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>
160
167
  <bd-accordion-section no-container>
161
168
  <bd-accordion-item title="Continuous Dark Web & Surface Monitoring" open>
@@ -203,8 +210,11 @@ const windowsPanel = html`
203
210
  const macosPanel = html`
204
211
  <bd-tab-panel title="macOS">
205
212
 
206
- <bd-feature-col title="Protection">
207
- <bd-individual-icon slot="icon" size="40" color="#006DFF"></bd-individual-icon>
213
+ <bd-feature-col
214
+ title="Protection"
215
+ icon-src="/assets/pic1.png"
216
+ icon-alt="Protection icon"
217
+ >
208
218
  <bd-p slot="description" kind="small">macOS protection description.</bd-p>
209
219
  <bd-accordion-section no-container>
210
220
  <bd-accordion-item title="Real-Time Protection" open>
@@ -216,8 +226,11 @@ const macosPanel = html`
216
226
  </bd-accordion-section>
217
227
  </bd-feature-col>
218
228
 
219
- <bd-feature-col title="Privacy">
220
- <bd-globe-icon slot="icon" size="40" color="#006DFF"></bd-globe-icon>
229
+ <bd-feature-col
230
+ title="Privacy"
231
+ icon-src="/assets/pic2.png"
232
+ icon-alt="Privacy icon"
233
+ >
221
234
  <bd-p slot="description" kind="small">macOS privacy description.</bd-p>
222
235
  <bd-accordion-section no-container>
223
236
  <bd-accordion-item title="VPN Traffic" open>
@@ -226,8 +239,11 @@ const macosPanel = html`
226
239
  </bd-accordion-section>
227
240
  </bd-feature-col>
228
241
 
229
- <bd-feature-col title="Identity Protection">
230
- <bd-family-icon slot="icon" size="40" color="#006DFF"></bd-family-icon>
242
+ <bd-feature-col
243
+ title="Identity Protection"
244
+ icon-src="/assets/pic3.png"
245
+ icon-alt="Identity Protection icon"
246
+ >
231
247
  <bd-p slot="description" kind="small">macOS identity description.</bd-p>
232
248
  <bd-accordion-section no-container>
233
249
  <bd-accordion-item title="Dark Web Monitoring" open>
@@ -242,8 +258,11 @@ const macosPanel = html`
242
258
  const iosPanel = html`
243
259
  <bd-tab-panel title="iOS">
244
260
 
245
- <bd-feature-col title="Protection">
246
- <bd-individual-icon slot="icon" size="40" color="#006DFF"></bd-individual-icon>
261
+ <bd-feature-col
262
+ title="Protection"
263
+ icon-src="/assets/pic1.png"
264
+ icon-alt="Protection icon"
265
+ >
247
266
  <bd-p slot="description" kind="small">iOS protection description.</bd-p>
248
267
  <bd-accordion-section no-container>
249
268
  <bd-accordion-item title="iOS Real-Time Protection" open>
@@ -252,8 +271,11 @@ const iosPanel = html`
252
271
  </bd-accordion-section>
253
272
  </bd-feature-col>
254
273
 
255
- <bd-feature-col title="Privacy">
256
- <bd-globe-icon slot="icon" size="40" color="#006DFF"></bd-globe-icon>
274
+ <bd-feature-col
275
+ title="Privacy"
276
+ icon-src="/assets/pic2.png"
277
+ icon-alt="Privacy icon"
278
+ >
257
279
  <bd-p slot="description" kind="small">iOS privacy description.</bd-p>
258
280
  <bd-accordion-section no-container>
259
281
  <bd-accordion-item title="iOS VPN" open>
@@ -262,8 +284,11 @@ const iosPanel = html`
262
284
  </bd-accordion-section>
263
285
  </bd-feature-col>
264
286
 
265
- <bd-feature-col title="Identity Protection">
266
- <bd-family-icon slot="icon" size="40" color="#006DFF"></bd-family-icon>
287
+ <bd-feature-col
288
+ title="Identity Protection"
289
+ icon-src="/assets/pic3.png"
290
+ icon-alt="Identity Protection icon"
291
+ >
267
292
  <bd-p slot="description" kind="small">iOS identity description.</bd-p>
268
293
  <bd-accordion-section no-container>
269
294
  <bd-accordion-item title="iOS Dark Web" open>
@@ -278,8 +303,11 @@ const iosPanel = html`
278
303
  const androidPanel = html`
279
304
  <bd-tab-panel title="Android">
280
305
 
281
- <bd-feature-col title="Protection">
282
- <bd-individual-icon slot="icon" size="40" color="#006DFF"></bd-individual-icon>
306
+ <bd-feature-col
307
+ title="Protection"
308
+ icon-src="/assets/pic1.png"
309
+ icon-alt="Protection icon"
310
+ >
283
311
  <bd-p slot="description" kind="small">Android protection description.</bd-p>
284
312
  <bd-accordion-section no-container>
285
313
  <bd-accordion-item title="Android Real-Time Protection" open>
@@ -288,8 +316,11 @@ const androidPanel = html`
288
316
  </bd-accordion-section>
289
317
  </bd-feature-col>
290
318
 
291
- <bd-feature-col title="Privacy">
292
- <bd-globe-icon slot="icon" size="40" color="#006DFF"></bd-globe-icon>
319
+ <bd-feature-col
320
+ title="Privacy"
321
+ icon-src="/assets/pic2.png"
322
+ icon-alt="Privacy icon"
323
+ >
293
324
  <bd-p slot="description" kind="small">Android privacy description.</bd-p>
294
325
  <bd-accordion-section no-container>
295
326
  <bd-accordion-item title="Android VPN" open>
@@ -298,8 +329,11 @@ const androidPanel = html`
298
329
  </bd-accordion-section>
299
330
  </bd-feature-col>
300
331
 
301
- <bd-feature-col title="Identity Protection">
302
- <bd-family-icon slot="icon" size="40" color="#006DFF"></bd-family-icon>
332
+ <bd-feature-col
333
+ title="Identity Protection"
334
+ icon-src="/assets/pic3.png"
335
+ icon-alt="Identity Protection icon"
336
+ >
303
337
  <bd-p slot="description" kind="small">Android identity description.</bd-p>
304
338
  <bd-accordion-section no-container>
305
339
  <bd-accordion-item title="Android Dark Web" open>
@@ -376,8 +410,11 @@ export const TwoColumns = {
376
410
  subtitle="Demonstrează flexibilitatea numărului de coloane."
377
411
  >
378
412
  <bd-tab-panel title="Windows">
379
- <bd-feature-col title="Protection">
380
- <bd-individual-icon slot="icon" size="40" color="#006DFF"></bd-individual-icon>
413
+ <bd-feature-col
414
+ title="Protection"
415
+ icon-src="/assets/pic1.png"
416
+ icon-alt="Protection icon"
417
+ >
381
418
  <bd-p slot="description" kind="small">Protection description.</bd-p>
382
419
  <bd-accordion-section no-container>
383
420
  <bd-accordion-item title="Real-Time Protection" open>
@@ -388,8 +425,11 @@ export const TwoColumns = {
388
425
  </bd-accordion-item>
389
426
  </bd-accordion-section>
390
427
  </bd-feature-col>
391
- <bd-feature-col title="Privacy">
392
- <bd-globe-icon slot="icon" size="40" color="#006DFF"></bd-globe-icon>
428
+ <bd-feature-col
429
+ title="Privacy"
430
+ icon-src="/assets/pic2.png"
431
+ icon-alt="Privacy icon"
432
+ >
393
433
  <bd-p slot="description" kind="small">Privacy description.</bd-p>
394
434
  <bd-accordion-section no-container>
395
435
  <bd-accordion-item title="VPN Traffic" open>
@@ -403,8 +443,11 @@ export const TwoColumns = {
403
443
  </bd-tab-panel>
404
444
 
405
445
  <bd-tab-panel title="macOS">
406
- <bd-feature-col title="Protection">
407
- <bd-individual-icon slot="icon" size="40" color="#006DFF"></bd-individual-icon>
446
+ <bd-feature-col
447
+ title="Protection"
448
+ icon-src="/assets/pic1.png"
449
+ icon-alt="Protection icon"
450
+ >
408
451
  <bd-p slot="description" kind="small">macOS protection.</bd-p>
409
452
  <bd-accordion-section no-container>
410
453
  <bd-accordion-item title="macOS Protection" open>
@@ -412,8 +455,11 @@ export const TwoColumns = {
412
455
  </bd-accordion-item>
413
456
  </bd-accordion-section>
414
457
  </bd-feature-col>
415
- <bd-feature-col title="Privacy">
416
- <bd-globe-icon slot="icon" size="40" color="#006DFF"></bd-globe-icon>
458
+ <bd-feature-col
459
+ title="Privacy"
460
+ icon-src="/assets/pic2.png"
461
+ icon-alt="Privacy icon"
462
+ >
417
463
  <bd-p slot="description" kind="small">macOS privacy.</bd-p>
418
464
  <bd-accordion-section no-container>
419
465
  <bd-accordion-item title="macOS Privacy" open>
@@ -435,8 +481,11 @@ export const OneColumn = {
435
481
  subtitle="Demonstrează o singură coloană centrată."
436
482
  >
437
483
  <bd-tab-panel title="Windows">
438
- <bd-feature-col title="Protection">
439
- <bd-individual-icon slot="icon" size="40" color="#006DFF"></bd-individual-icon>
484
+ <bd-feature-col
485
+ title="Protection"
486
+ icon-src="/assets/pic1.png"
487
+ icon-alt="Protection icon"
488
+ >
440
489
  <bd-p slot="description" kind="small">Single column protection description.</bd-p>
441
490
  <bd-accordion-section no-container>
442
491
  <bd-accordion-item title="Real-Time Protection" open>
@@ -453,8 +502,11 @@ export const OneColumn = {
453
502
  </bd-tab-panel>
454
503
 
455
504
  <bd-tab-panel title="macOS">
456
- <bd-feature-col title="Protection">
457
- <bd-laurel-icon slot="icon" size="40" color="#006DFF"></bd-laurel-icon>
505
+ <bd-feature-col
506
+ title="Protection"
507
+ icon-src="/assets/pic1.png"
508
+ icon-alt="Protection icon"
509
+ >
458
510
  <bd-p slot="description" kind="small">macOS single column description.</bd-p>
459
511
  <bd-accordion-section no-container>
460
512
  <bd-accordion-item title="macOS Protection" open>