@repobit/dex-system-design 0.23.5 → 0.23.7
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/compare/compare.css.js +121 -75
- package/src/components/compare/compare.js +353 -68
- package/src/components/compare/compare.stories.js +358 -108
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.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)
|
|
7
|
+
|
|
8
|
+
### Bug Fixes
|
|
9
|
+
|
|
10
|
+
* **DEX-1014:** changes compare section
|
|
11
|
+
* **DEX-1014:** changes compare section
|
|
12
|
+
|
|
13
|
+
|
|
14
|
+
## [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)
|
|
15
|
+
|
|
16
|
+
### Bug Fixes
|
|
17
|
+
|
|
18
|
+
* **DEX-1014:** add new compare component
|
|
19
|
+
|
|
20
|
+
|
|
6
21
|
## [0.23.5](https://github.com/bitdefender/dex-core/compare/@repobit/dex-system-design@0.23.4...@repobit/dex-system-design@0.23.5) (2026-03-20)
|
|
7
22
|
|
|
8
23
|
**Note:** Version bump only for package @repobit/dex-system-design
|
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.7",
|
|
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": "457a940c4ec1a3e921ff76c656c5850591ac20a8"
|
|
90
90
|
}
|
|
@@ -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,27 +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:
|
|
90
|
-
filter: var(
|
|
91
|
-
--cs-icon-filter,
|
|
92
|
-
invert(29%) sepia(98%) saturate(1200%) hue-rotate(207deg) brightness(97%) contrast(97%)
|
|
93
|
-
);
|
|
106
|
+
width: var(--icon-2xl-size);
|
|
107
|
+
height: var(--icon-2xl-size);
|
|
94
108
|
}
|
|
95
109
|
|
|
96
110
|
.card-icon-wrap bd-img {
|
|
97
111
|
display: block;
|
|
112
|
+
width: 100%;
|
|
113
|
+
height: 100%;
|
|
98
114
|
}
|
|
99
|
-
|
|
115
|
+
|
|
100
116
|
.card-text-wrap {
|
|
101
117
|
display: flex;
|
|
102
118
|
flex-direction: column;
|
|
103
|
-
gap: var(--spacing-
|
|
119
|
+
gap: var(--spacing-8);
|
|
120
|
+
align-self: stretch;
|
|
104
121
|
}
|
|
105
122
|
|
|
106
123
|
.card-title {
|
|
@@ -114,7 +131,8 @@ export default css`
|
|
|
114
131
|
.card-bars {
|
|
115
132
|
display: flex;
|
|
116
133
|
flex-direction: column;
|
|
117
|
-
gap: var(--spacing-
|
|
134
|
+
gap: var(--spacing-8);
|
|
135
|
+
align-self: stretch;
|
|
118
136
|
}
|
|
119
137
|
|
|
120
138
|
.card-footnote {
|
|
@@ -124,7 +142,7 @@ export default css`
|
|
|
124
142
|
|
|
125
143
|
|
|
126
144
|
/* ──────────────────────────────────────────────────────────────
|
|
127
|
-
4. compare-bar
|
|
145
|
+
4. compare-bar (10px radius Figma → --radius-xl 12px)
|
|
128
146
|
──────────────────────────────────────────────────────────────── */
|
|
129
147
|
|
|
130
148
|
:host(compare-bar) {
|
|
@@ -133,91 +151,119 @@ export default css`
|
|
|
133
151
|
|
|
134
152
|
.bar-track {
|
|
135
153
|
position: relative;
|
|
136
|
-
height: var(--cs-bar-height
|
|
137
|
-
border-radius: var(--radius-
|
|
154
|
+
height: var(--cs-bar-height);
|
|
155
|
+
border-radius: var(--radius-xl);
|
|
138
156
|
overflow: hidden;
|
|
139
|
-
background:
|
|
140
|
-
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;
|
|
141
160
|
}
|
|
142
161
|
|
|
143
162
|
.bar-fill {
|
|
144
|
-
position:
|
|
145
|
-
inset:
|
|
146
|
-
height:
|
|
147
|
-
|
|
148
|
-
transition: width 0.8s cubic-bezier(0.22, 1, 0.36, 1);
|
|
149
|
-
}
|
|
150
|
-
|
|
151
|
-
.bar-content {
|
|
152
|
-
position: relative;
|
|
153
|
-
z-index: 1;
|
|
163
|
+
position: absolute;
|
|
164
|
+
inset: 0 auto 0 0;
|
|
165
|
+
height: 100%;
|
|
166
|
+
max-width: 100%;
|
|
154
167
|
display: flex;
|
|
155
168
|
align-items: center;
|
|
156
169
|
justify-content: space-between;
|
|
157
|
-
|
|
158
|
-
padding: 0 var(--spacing-
|
|
170
|
+
gap: var(--spacing-8);
|
|
171
|
+
padding: 0 var(--spacing-16);
|
|
159
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;
|
|
160
199
|
}
|
|
161
200
|
|
|
162
201
|
.bar-label,
|
|
163
202
|
.bar-score {
|
|
164
|
-
font-family:
|
|
165
|
-
font-size:
|
|
166
|
-
|
|
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;
|
|
167
211
|
}
|
|
168
212
|
|
|
169
|
-
/* ── primary
|
|
213
|
+
/* ── primary (Bitdefender) ── */
|
|
170
214
|
:host(compare-bar[variant="primary"]) .bar-fill {
|
|
171
|
-
background: var(--
|
|
215
|
+
background: var(--cs-bar-primary-bg);
|
|
172
216
|
}
|
|
173
217
|
:host(compare-bar[variant="primary"]) .bar-label,
|
|
174
218
|
:host(compare-bar[variant="primary"]) .bar-score {
|
|
175
|
-
color: var(--cs-bar-primary-fg
|
|
176
|
-
font-weight: var(--
|
|
219
|
+
color: var(--cs-bar-primary-fg);
|
|
220
|
+
font-weight: var(--typography-fontWeight-semibold);
|
|
177
221
|
}
|
|
178
222
|
|
|
179
|
-
/* ── secondary
|
|
223
|
+
/* ── secondary ── */
|
|
180
224
|
:host(compare-bar[variant="secondary"]) .bar-fill,
|
|
181
225
|
:host(compare-bar:not([variant])) .bar-fill {
|
|
182
|
-
background: var(--
|
|
226
|
+
background: var(--cs-bar-secondary-bg);
|
|
183
227
|
}
|
|
184
228
|
:host(compare-bar[variant="secondary"]) .bar-label,
|
|
185
229
|
:host(compare-bar:not([variant])) .bar-label,
|
|
186
230
|
:host(compare-bar[variant="secondary"]) .bar-score,
|
|
187
231
|
:host(compare-bar:not([variant])) .bar-score {
|
|
188
|
-
color:
|
|
232
|
+
color: var(--color-neutral-900);
|
|
233
|
+
font-weight: var(--typography-body-regular-fontWeight);
|
|
189
234
|
}
|
|
190
235
|
|
|
191
236
|
|
|
192
237
|
/* ══════════════════════════════════════════════════════════════
|
|
193
|
-
5.
|
|
238
|
+
5. THEME OVERRIDES (DS palette)
|
|
194
239
|
══════════════════════════════════════════════════════════════ */
|
|
195
240
|
|
|
196
|
-
:host(compare-section.theme-green) {
|
|
197
|
-
--cs-bar-primary-
|
|
198
|
-
--cs-
|
|
199
|
-
--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);
|
|
200
245
|
--cs-icon-filter: invert(35%) sepia(72%) saturate(500%) hue-rotate(100deg) brightness(95%) contrast(95%);
|
|
201
246
|
}
|
|
202
247
|
|
|
203
|
-
:host(compare-section.theme-red) {
|
|
204
|
-
--cs-bar-primary-
|
|
205
|
-
--cs-
|
|
206
|
-
--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);
|
|
207
252
|
--cs-icon-filter: invert(22%) sepia(90%) saturate(700%) hue-rotate(345deg) brightness(95%) contrast(95%);
|
|
208
253
|
}
|
|
209
254
|
|
|
210
|
-
|
|
211
|
-
|
|
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);
|
|
212
259
|
--cs-icon-color: #7c3aed;
|
|
213
|
-
--cs-bg: #faf5ff;
|
|
214
260
|
--cs-icon-filter: invert(25%) sepia(80%) saturate(800%) hue-rotate(255deg) brightness(90%) contrast(95%);
|
|
215
261
|
}
|
|
216
262
|
|
|
217
|
-
:host(compare-section.theme-dark) {
|
|
218
|
-
--cs-bg:
|
|
219
|
-
--cs-bar-primary-fg:
|
|
220
|
-
--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);
|
|
221
267
|
--cs-icon-filter: invert(65%) sepia(50%) saturate(500%) hue-rotate(195deg) brightness(105%) contrast(95%);
|
|
222
268
|
}
|
|
223
269
|
|
|
@@ -226,12 +272,12 @@ export default css`
|
|
|
226
272
|
6. BAR SIZE VARIANTS
|
|
227
273
|
══════════════════════════════════════════════════════════════ */
|
|
228
274
|
|
|
229
|
-
:host(compare-section.bars-tall) {
|
|
230
|
-
--cs-bar-height:
|
|
275
|
+
:host(bd-compare-section.bars-tall) {
|
|
276
|
+
--cs-bar-height: var(--dimension-55px);
|
|
231
277
|
}
|
|
232
278
|
|
|
233
|
-
:host(compare-section.bars-compact) {
|
|
234
|
-
--cs-bar-height:
|
|
235
|
-
--cs-gap: var(--spacing-
|
|
279
|
+
:host(bd-compare-section.bars-compact) {
|
|
280
|
+
--cs-bar-height: var(--dimension-40px);
|
|
281
|
+
--cs-gap: var(--spacing-24);
|
|
236
282
|
}
|
|
237
|
-
`;
|
|
283
|
+
`;
|