@repobit/dex-system-design 0.23.6 → 0.23.8
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 +15 -0
- package/package.json +2 -2
- package/src/components/awards/awards.js +1 -1
- package/src/components/awards/awards.stories.js +4 -1
- package/src/components/compare/compare.css.js +121 -72
- package/src/components/compare/compare.js +350 -72
- package/src/components/compare/compare.stories.js +360 -106
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.8](https://github.com/bitdefender/dex-core/compare/@repobit/dex-system-design@0.23.7...@repobit/dex-system-design@0.23.8) (2026-03-25)
|
|
7
|
+
|
|
8
|
+
### Bug Fixes
|
|
9
|
+
|
|
10
|
+
* **DEX-1014:** fix for compare and awards style issues
|
|
11
|
+
|
|
12
|
+
|
|
13
|
+
## [0.23.7](https://github.com/bitdefender/dex-core/compare/@repobit/dex-system-design@0.23.6...@repobit/dex-system-design@0.23.7) (2026-03-24)
|
|
14
|
+
|
|
15
|
+
### Bug Fixes
|
|
16
|
+
|
|
17
|
+
* **DEX-1014:** changes compare section
|
|
18
|
+
* **DEX-1014:** changes compare section
|
|
19
|
+
|
|
20
|
+
|
|
6
21
|
## [0.23.6](https://github.com/bitdefender/dex-core/compare/@repobit/dex-system-design@0.23.5...@repobit/dex-system-design@0.23.6) (2026-03-24)
|
|
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.
|
|
3
|
+
"version": "0.23.8",
|
|
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",
|
|
@@ -86,5 +86,5 @@
|
|
|
86
86
|
"volta": {
|
|
87
87
|
"node": "24.14.0"
|
|
88
88
|
},
|
|
89
|
-
"gitHead": "
|
|
89
|
+
"gitHead": "e0d9ea64bc98f130a92686d3c0e385d0ba284565"
|
|
90
90
|
}
|
|
@@ -1,7 +1,7 @@
|
|
|
1
1
|
import { LitElement, html } from 'lit';
|
|
2
2
|
import { tokens } from "../../tokens/tokens.js";
|
|
3
3
|
import './awards-icon.js';
|
|
4
|
-
import { awardsCSS } from './awards.css
|
|
4
|
+
import { awardsCSS } from './awards.css';
|
|
5
5
|
|
|
6
6
|
export class AwardsSection extends LitElement {
|
|
7
7
|
static properties = {
|
|
@@ -1,7 +1,10 @@
|
|
|
1
1
|
// awards.stories.js
|
|
2
2
|
import { html } from 'lit';
|
|
3
|
+
import "../heading/heading.js";
|
|
4
|
+
import "../image/image.js";
|
|
5
|
+
import "../link/link.js";
|
|
6
|
+
import "../paragraph/paragraph.js";
|
|
3
7
|
import './awards.js';
|
|
4
|
-
|
|
5
8
|
export default {
|
|
6
9
|
title : 'Components/AwardsSection',
|
|
7
10
|
component : 'bd-awards-section',
|
|
@@ -3,17 +3,22 @@ import { css } from "lit";
|
|
|
3
3
|
export default css`
|
|
4
4
|
|
|
5
5
|
/* ──────────────────────────────────────────────────────────────
|
|
6
|
-
|
|
6
|
+
Compare layout — uses design-system tokens (src/tokens/tokens.js).
|
|
7
|
+
--cs-* are local aliases where themes override bar colors.
|
|
7
8
|
──────────────────────────────────────────────────────────────── */
|
|
8
9
|
|
|
9
|
-
:host(compare-section) {
|
|
10
|
+
:host(bd-compare-section) {
|
|
10
11
|
display: block;
|
|
11
12
|
|
|
12
|
-
--cs-
|
|
13
|
-
--cs-bar-primary-
|
|
14
|
-
--cs-bar-
|
|
15
|
-
--cs-
|
|
16
|
-
--cs-
|
|
13
|
+
--cs-bar-primary-fg: var(--color-neutral-0);
|
|
14
|
+
--cs-bar-primary-bg: var(--color-blue-500);
|
|
15
|
+
--cs-bar-secondary-bg: var(--color-neutral-100);
|
|
16
|
+
--cs-bar-track-bg: transparent;
|
|
17
|
+
--cs-bar-track-border: var(--color-neutral-200);
|
|
18
|
+
--cs-bar-height: var(--dimension-48px);
|
|
19
|
+
--cs-gap: var(--spacing-32);
|
|
20
|
+
/* Figma layout width; between --content-width-max (1200) and --grid-container-max-xxl (1320) */
|
|
21
|
+
--cs-grid-max: 1228px;
|
|
17
22
|
}
|
|
18
23
|
|
|
19
24
|
:host(compare-card),
|
|
@@ -23,23 +28,35 @@ export default css`
|
|
|
23
28
|
|
|
24
29
|
|
|
25
30
|
/* ──────────────────────────────────────────────────────────────
|
|
26
|
-
2. compare-section
|
|
31
|
+
2. compare-section
|
|
27
32
|
──────────────────────────────────────────────────────────────── */
|
|
28
33
|
|
|
34
|
+
.cs-sr-only {
|
|
35
|
+
position: absolute;
|
|
36
|
+
width: 1px;
|
|
37
|
+
height: 1px;
|
|
38
|
+
padding: 0;
|
|
39
|
+
margin: -1px;
|
|
40
|
+
overflow: hidden;
|
|
41
|
+
clip: rect(0, 0, 0, 0);
|
|
42
|
+
white-space: nowrap;
|
|
43
|
+
border: 0;
|
|
44
|
+
}
|
|
45
|
+
|
|
29
46
|
.cs-section {
|
|
30
|
-
background:
|
|
47
|
+
background: transparent;
|
|
31
48
|
padding: var(--spacing-64) var(--spacing-24);
|
|
32
49
|
box-sizing: border-box;
|
|
33
50
|
}
|
|
34
51
|
|
|
35
52
|
.cs-heading {
|
|
36
53
|
text-align: center;
|
|
37
|
-
max-width:
|
|
54
|
+
max-width: var(--grid-container-max-md);
|
|
38
55
|
margin: 0 auto var(--spacing-40);
|
|
39
56
|
}
|
|
40
57
|
|
|
41
58
|
.cs-title {
|
|
42
|
-
margin: 0 0 var(--spacing-
|
|
59
|
+
margin: 0 0 var(--spacing-8);
|
|
43
60
|
}
|
|
44
61
|
|
|
45
62
|
.cs-subtitle {
|
|
@@ -48,10 +65,11 @@ export default css`
|
|
|
48
65
|
|
|
49
66
|
.cs-grid {
|
|
50
67
|
display: grid;
|
|
51
|
-
grid-template-columns: repeat(var(--_cols, 2),
|
|
68
|
+
grid-template-columns: repeat(var(--_cols, 2), minmax(0, 598px));
|
|
52
69
|
gap: var(--cs-gap);
|
|
53
|
-
max-width:
|
|
70
|
+
max-width: var(--cs-grid-max);
|
|
54
71
|
margin: 0 auto;
|
|
72
|
+
justify-content: center;
|
|
55
73
|
}
|
|
56
74
|
|
|
57
75
|
@media (max-width: 768px) {
|
|
@@ -62,16 +80,16 @@ export default css`
|
|
|
62
80
|
|
|
63
81
|
|
|
64
82
|
/* ──────────────────────────────────────────────────────────────
|
|
65
|
-
3. compare-card
|
|
83
|
+
3. compare-card (nearest radii: 20px Figma → --radius-3xl 24px)
|
|
66
84
|
──────────────────────────────────────────────────────────────── */
|
|
67
85
|
|
|
68
86
|
.card {
|
|
69
87
|
background: var(--color-neutral-25);
|
|
70
88
|
border-radius: var(--radius-3xl);
|
|
71
|
-
padding: var(--spacing-
|
|
89
|
+
padding: var(--spacing-32);
|
|
72
90
|
display: flex;
|
|
73
91
|
flex-direction: column;
|
|
74
|
-
gap: var(--spacing-
|
|
92
|
+
gap: var(--spacing-24);
|
|
75
93
|
box-sizing: border-box;
|
|
76
94
|
height: 100%;
|
|
77
95
|
}
|
|
@@ -80,23 +98,26 @@ export default css`
|
|
|
80
98
|
display: flex;
|
|
81
99
|
flex-direction: column;
|
|
82
100
|
align-items: flex-start;
|
|
83
|
-
gap: var(--spacing-
|
|
101
|
+
gap: var(--spacing-8);
|
|
84
102
|
}
|
|
85
103
|
|
|
86
104
|
.card-icon-wrap {
|
|
87
105
|
flex-shrink: 0;
|
|
88
|
-
width:
|
|
89
|
-
height:
|
|
106
|
+
width: var(--icon-2xl-size);
|
|
107
|
+
height: var(--icon-2xl-size);
|
|
90
108
|
}
|
|
91
109
|
|
|
92
110
|
.card-icon-wrap bd-img {
|
|
93
111
|
display: block;
|
|
112
|
+
width: 100%;
|
|
113
|
+
height: 100%;
|
|
94
114
|
}
|
|
95
|
-
|
|
115
|
+
|
|
96
116
|
.card-text-wrap {
|
|
97
117
|
display: flex;
|
|
98
118
|
flex-direction: column;
|
|
99
|
-
gap: var(--spacing-
|
|
119
|
+
gap: var(--spacing-8);
|
|
120
|
+
align-self: stretch;
|
|
100
121
|
}
|
|
101
122
|
|
|
102
123
|
.card-title {
|
|
@@ -110,7 +131,8 @@ export default css`
|
|
|
110
131
|
.card-bars {
|
|
111
132
|
display: flex;
|
|
112
133
|
flex-direction: column;
|
|
113
|
-
gap: var(--spacing-
|
|
134
|
+
gap: var(--spacing-8);
|
|
135
|
+
align-self: stretch;
|
|
114
136
|
}
|
|
115
137
|
|
|
116
138
|
.card-footnote {
|
|
@@ -120,7 +142,7 @@ export default css`
|
|
|
120
142
|
|
|
121
143
|
|
|
122
144
|
/* ──────────────────────────────────────────────────────────────
|
|
123
|
-
4. compare-bar
|
|
145
|
+
4. compare-bar (10px radius Figma → --radius-xl 12px)
|
|
124
146
|
──────────────────────────────────────────────────────────────── */
|
|
125
147
|
|
|
126
148
|
:host(compare-bar) {
|
|
@@ -129,92 +151,119 @@ export default css`
|
|
|
129
151
|
|
|
130
152
|
.bar-track {
|
|
131
153
|
position: relative;
|
|
132
|
-
height: var(--cs-bar-height
|
|
133
|
-
border-radius: var(--radius-
|
|
154
|
+
height: var(--cs-bar-height);
|
|
155
|
+
border-radius: var(--radius-xl);
|
|
134
156
|
overflow: hidden;
|
|
135
|
-
background:
|
|
136
|
-
border:
|
|
157
|
+
background: var(--cs-bar-track-bg, transparent);
|
|
158
|
+
border: var(--border-width-1) solid var(--cs-bar-track-border);
|
|
159
|
+
box-sizing: border-box;
|
|
137
160
|
}
|
|
138
161
|
|
|
139
162
|
.bar-fill {
|
|
140
|
-
position:
|
|
141
|
-
inset:
|
|
142
|
-
height:
|
|
143
|
-
|
|
144
|
-
transition: width 0.8s cubic-bezier(0.22, 1, 0.36, 1);
|
|
145
|
-
}
|
|
146
|
-
|
|
147
|
-
.bar-content {
|
|
148
|
-
position: relative;
|
|
149
|
-
z-index: 1;
|
|
163
|
+
position: absolute;
|
|
164
|
+
inset: 0 auto 0 0;
|
|
165
|
+
height: 100%;
|
|
166
|
+
max-width: 100%;
|
|
150
167
|
display: flex;
|
|
151
168
|
align-items: center;
|
|
152
169
|
justify-content: space-between;
|
|
153
|
-
|
|
154
|
-
padding: 0 var(--spacing-
|
|
170
|
+
gap: var(--spacing-8);
|
|
171
|
+
padding: 0 var(--spacing-16);
|
|
155
172
|
box-sizing: border-box;
|
|
173
|
+
background: transparent;
|
|
174
|
+
transition: width calc(var(--transition-duration-slower) + 300ms)
|
|
175
|
+
cubic-bezier(0.22, 1, 0.36, 1);
|
|
176
|
+
min-width: 0;
|
|
177
|
+
}
|
|
178
|
+
|
|
179
|
+
:host(compare-bar.compare-no-motion) .bar-fill {
|
|
180
|
+
transition: none;
|
|
181
|
+
}
|
|
182
|
+
|
|
183
|
+
@media (prefers-reduced-motion: reduce) {
|
|
184
|
+
.bar-fill {
|
|
185
|
+
transition: none;
|
|
186
|
+
}
|
|
187
|
+
}
|
|
188
|
+
|
|
189
|
+
.bar-label {
|
|
190
|
+
flex: 1 1 auto;
|
|
191
|
+
min-width: 0;
|
|
192
|
+
overflow: hidden;
|
|
193
|
+
text-overflow: ellipsis;
|
|
194
|
+
white-space: nowrap;
|
|
195
|
+
}
|
|
196
|
+
|
|
197
|
+
.bar-score {
|
|
198
|
+
flex: 0 0 auto;
|
|
156
199
|
}
|
|
157
200
|
|
|
158
201
|
.bar-label,
|
|
159
202
|
.bar-score {
|
|
160
|
-
font-family:
|
|
161
|
-
font-size:
|
|
162
|
-
|
|
203
|
+
font-family: var(--typography-fontFamily-sans);
|
|
204
|
+
font-size: var(--typography-body-regular-fontSize);
|
|
205
|
+
line-height: var(--typography-body-regular-lineHeight);
|
|
206
|
+
letter-spacing: var(--typography-body-regular-letterSpacing);
|
|
207
|
+
}
|
|
208
|
+
|
|
209
|
+
.bar-score {
|
|
210
|
+
font-variant-numeric: tabular-nums;
|
|
163
211
|
}
|
|
164
212
|
|
|
165
|
-
/* ── primary
|
|
213
|
+
/* ── primary (Bitdefender) ── */
|
|
166
214
|
:host(compare-bar[variant="primary"]) .bar-fill {
|
|
167
|
-
background: var(--
|
|
215
|
+
background: var(--cs-bar-primary-bg);
|
|
168
216
|
}
|
|
169
217
|
:host(compare-bar[variant="primary"]) .bar-label,
|
|
170
218
|
:host(compare-bar[variant="primary"]) .bar-score {
|
|
171
|
-
color: var(--cs-bar-primary-fg
|
|
172
|
-
font-weight: var(--
|
|
219
|
+
color: var(--cs-bar-primary-fg);
|
|
220
|
+
font-weight: var(--typography-fontWeight-semibold);
|
|
173
221
|
}
|
|
174
222
|
|
|
175
|
-
/* ── secondary
|
|
223
|
+
/* ── secondary ── */
|
|
176
224
|
:host(compare-bar[variant="secondary"]) .bar-fill,
|
|
177
225
|
:host(compare-bar:not([variant])) .bar-fill {
|
|
178
|
-
background: var(--
|
|
226
|
+
background: var(--cs-bar-secondary-bg);
|
|
179
227
|
}
|
|
180
228
|
:host(compare-bar[variant="secondary"]) .bar-label,
|
|
181
229
|
:host(compare-bar:not([variant])) .bar-label,
|
|
182
230
|
:host(compare-bar[variant="secondary"]) .bar-score,
|
|
183
231
|
:host(compare-bar:not([variant])) .bar-score {
|
|
184
|
-
color:
|
|
185
|
-
font-weight: var(--
|
|
232
|
+
color: var(--color-neutral-900);
|
|
233
|
+
font-weight: var(--typography-body-regular-fontWeight);
|
|
186
234
|
}
|
|
187
235
|
|
|
188
236
|
|
|
189
237
|
/* ══════════════════════════════════════════════════════════════
|
|
190
|
-
5.
|
|
238
|
+
5. THEME OVERRIDES (DS palette)
|
|
191
239
|
══════════════════════════════════════════════════════════════ */
|
|
192
240
|
|
|
193
|
-
:host(compare-section.theme-green) {
|
|
194
|
-
--cs-bar-primary-
|
|
195
|
-
--cs-
|
|
196
|
-
--cs-
|
|
241
|
+
:host(bd-compare-section.theme-green) {
|
|
242
|
+
--cs-bar-primary-bg: var(--color-green-500);
|
|
243
|
+
--cs-bar-primary-fg: var(--color-neutral-0);
|
|
244
|
+
--cs-icon-color: var(--color-green-500);
|
|
197
245
|
--cs-icon-filter: invert(35%) sepia(72%) saturate(500%) hue-rotate(100deg) brightness(95%) contrast(95%);
|
|
198
246
|
}
|
|
199
247
|
|
|
200
|
-
:host(compare-section.theme-red) {
|
|
201
|
-
--cs-bar-primary-
|
|
202
|
-
--cs-
|
|
203
|
-
--cs-
|
|
248
|
+
:host(bd-compare-section.theme-red) {
|
|
249
|
+
--cs-bar-primary-bg: var(--color-red-500);
|
|
250
|
+
--cs-bar-primary-fg: var(--color-neutral-0);
|
|
251
|
+
--cs-icon-color: var(--color-red-500);
|
|
204
252
|
--cs-icon-filter: invert(22%) sepia(90%) saturate(700%) hue-rotate(345deg) brightness(95%) contrast(95%);
|
|
205
253
|
}
|
|
206
254
|
|
|
207
|
-
|
|
208
|
-
|
|
255
|
+
/* No violet in DS; keep marketing accent */
|
|
256
|
+
:host(bd-compare-section.theme-purple) {
|
|
257
|
+
--cs-bar-primary-bg: #7c3aed;
|
|
258
|
+
--cs-bar-primary-fg: var(--color-neutral-0);
|
|
209
259
|
--cs-icon-color: #7c3aed;
|
|
210
|
-
--cs-bg: #faf5ff;
|
|
211
260
|
--cs-icon-filter: invert(25%) sepia(80%) saturate(800%) hue-rotate(255deg) brightness(90%) contrast(95%);
|
|
212
261
|
}
|
|
213
262
|
|
|
214
|
-
:host(compare-section.theme-dark) {
|
|
215
|
-
--cs-bg:
|
|
216
|
-
--cs-bar-primary-fg:
|
|
217
|
-
--cs-icon-color:
|
|
263
|
+
:host(bd-compare-section.theme-dark) {
|
|
264
|
+
--cs-bar-primary-bg: var(--color-blue-400);
|
|
265
|
+
--cs-bar-primary-fg: var(--color-neutral-0);
|
|
266
|
+
--cs-icon-color: var(--color-blue-400);
|
|
218
267
|
--cs-icon-filter: invert(65%) sepia(50%) saturate(500%) hue-rotate(195deg) brightness(105%) contrast(95%);
|
|
219
268
|
}
|
|
220
269
|
|
|
@@ -223,12 +272,12 @@ export default css`
|
|
|
223
272
|
6. BAR SIZE VARIANTS
|
|
224
273
|
══════════════════════════════════════════════════════════════ */
|
|
225
274
|
|
|
226
|
-
:host(compare-section.bars-tall) {
|
|
227
|
-
--cs-bar-height:
|
|
275
|
+
:host(bd-compare-section.bars-tall) {
|
|
276
|
+
--cs-bar-height: var(--dimension-55px);
|
|
228
277
|
}
|
|
229
278
|
|
|
230
|
-
:host(compare-section.bars-compact) {
|
|
231
|
-
--cs-bar-height:
|
|
232
|
-
--cs-gap: var(--spacing-
|
|
279
|
+
:host(bd-compare-section.bars-compact) {
|
|
280
|
+
--cs-bar-height: var(--dimension-40px);
|
|
281
|
+
--cs-gap: var(--spacing-24);
|
|
233
282
|
}
|
|
234
|
-
`;
|
|
283
|
+
`;
|