@repobit/dex-system-design 0.23.114 → 0.23.116
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
CHANGED
|
@@ -3,6 +3,20 @@
|
|
|
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.116](https://github.com/bitdefender/dex-core/compare/@repobit/dex-system-design@0.23.115...@repobit/dex-system-design@0.23.116) (2026-08-07)
|
|
7
|
+
|
|
8
|
+
### Bug Fixes
|
|
9
|
+
|
|
10
|
+
* **DEX-1014:** list component adjustments
|
|
11
|
+
|
|
12
|
+
|
|
13
|
+
## [0.23.115](https://github.com/bitdefender/dex-core/compare/@repobit/dex-system-design@0.23.114...@repobit/dex-system-design@0.23.115) (2026-08-07)
|
|
14
|
+
|
|
15
|
+
### Bug Fixes
|
|
16
|
+
|
|
17
|
+
* **DEX-1014:** video-player component
|
|
18
|
+
|
|
19
|
+
|
|
6
20
|
## [0.23.114](https://github.com/bitdefender/dex-core/compare/@repobit/dex-system-design@0.23.113...@repobit/dex-system-design@0.23.114) (2026-08-07)
|
|
7
21
|
|
|
8
22
|
### 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.116",
|
|
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",
|
|
@@ -74,8 +74,8 @@
|
|
|
74
74
|
"url": "https://github.com/bitdefender/dex-core/issues"
|
|
75
75
|
},
|
|
76
76
|
"dependencies": {
|
|
77
|
-
"@repobit/dex-store": "1.6.
|
|
78
|
-
"@repobit/dex-store-elements": "2.0.
|
|
77
|
+
"@repobit/dex-store": "1.6.14",
|
|
78
|
+
"@repobit/dex-store-elements": "2.0.19",
|
|
79
79
|
"lit": "^3.3.2"
|
|
80
80
|
},
|
|
81
81
|
"devDependencies": {
|
|
@@ -92,5 +92,5 @@
|
|
|
92
92
|
"volta": {
|
|
93
93
|
"node": "24.14.0"
|
|
94
94
|
},
|
|
95
|
-
"gitHead": "
|
|
95
|
+
"gitHead": "7af92630a57f9ae948eb1eb3630085d3566d233c"
|
|
96
96
|
}
|
|
@@ -11,21 +11,20 @@ export default css`
|
|
|
11
11
|
gap: var(--spacing-8);
|
|
12
12
|
color: var(--color-neutral-700);
|
|
13
13
|
line-height: var(--typography-lineHeight-normal);
|
|
14
|
-
|
|
15
|
-
|
|
14
|
+
font-family: var(--typography-fontFamily-sans);
|
|
16
15
|
}
|
|
17
16
|
|
|
18
17
|
/* === SIZE VARIANTS === */
|
|
19
|
-
|
|
18
|
+
|
|
20
19
|
.bd-list-item.sm {
|
|
21
20
|
font-size: var(--typography-fontSize-sm);
|
|
22
21
|
margin-bottom: var(--spacing-4);
|
|
23
22
|
}
|
|
24
23
|
|
|
25
|
-
.bd-list-item.md {
|
|
26
|
-
|
|
27
|
-
|
|
28
|
-
}
|
|
24
|
+
.bd-list-item.md {
|
|
25
|
+
font-size: var(--typography-fontSize-base);
|
|
26
|
+
margin-bottom: var(--bd-li-margin-bottom, var(--spacing-6));
|
|
27
|
+
}
|
|
29
28
|
|
|
30
29
|
.bd-list-item.lg {
|
|
31
30
|
font-size: var(--typography-fontSize-lg);
|
|
@@ -33,16 +32,21 @@ export default css`
|
|
|
33
32
|
}
|
|
34
33
|
|
|
35
34
|
/* === MARKER STYLES === */
|
|
36
|
-
|
|
35
|
+
|
|
37
36
|
.bd-list-item-marker {
|
|
38
37
|
flex-shrink: 0;
|
|
39
|
-
|
|
38
|
+
align-self: flex-start;
|
|
39
|
+
/* centrează markerul pe înălțimea unei linii de text,
|
|
40
|
+
calculat din line-height-ul itemului, indiferent de size.
|
|
41
|
+
Se aplică doar markerelor "forme" (bullet, check) — nu textului (number). */
|
|
42
|
+
margin-top: calc((1em * var(--typography-lineHeight-normal) - var(--bd-li-marker-size, var(--spacing-6))) / 2);
|
|
40
43
|
}
|
|
41
44
|
|
|
42
45
|
/* Bullet List */
|
|
43
46
|
.bd-list-item.bullet .bd-list-item-marker {
|
|
44
|
-
|
|
45
|
-
|
|
47
|
+
--bd-li-marker-size: var(--spacing-6);
|
|
48
|
+
width: var(--bd-li-marker-size);
|
|
49
|
+
height: var(--bd-li-marker-size);
|
|
46
50
|
background-color: var(--color-neutral-1000);
|
|
47
51
|
border-radius: 50%;
|
|
48
52
|
}
|
|
@@ -52,6 +56,10 @@ export default css`
|
|
|
52
56
|
counter-increment: bd-list-counter;
|
|
53
57
|
}
|
|
54
58
|
|
|
59
|
+
.bd-list-item.number .bd-list-item-marker {
|
|
60
|
+
margin-top: 0; /* text — se aliniază natural pe linia de bază, nu geometric */
|
|
61
|
+
}
|
|
62
|
+
|
|
55
63
|
.bd-list-item.number .bd-list-item-marker::before {
|
|
56
64
|
content: counter(bd-list-counter) ".";
|
|
57
65
|
font-weight: var(--typography-fontWeight-semibold);
|
|
@@ -60,8 +68,9 @@ export default css`
|
|
|
60
68
|
|
|
61
69
|
/* Check List */
|
|
62
70
|
.bd-list-item.check .bd-list-item-marker {
|
|
63
|
-
|
|
64
|
-
|
|
71
|
+
--bd-li-marker-size: var(--spacing-16);
|
|
72
|
+
width: var(--bd-li-marker-size);
|
|
73
|
+
height: var(--bd-li-marker-size);
|
|
65
74
|
background-color: var(--color-green-500);
|
|
66
75
|
border-radius: 50%;
|
|
67
76
|
position: relative;
|
|
@@ -79,10 +88,11 @@ export default css`
|
|
|
79
88
|
|
|
80
89
|
/* Custom Icon */
|
|
81
90
|
.bd-list-item-custom-icon {
|
|
82
|
-
|
|
83
|
-
|
|
91
|
+
--bd-li-marker-size: var(--spacing-16);
|
|
92
|
+
width: var(--bd-li-marker-size);
|
|
93
|
+
height: var(--bd-li-marker-size);
|
|
84
94
|
flex-shrink: 0;
|
|
85
|
-
margin-top: var(--
|
|
95
|
+
margin-top: calc((1em * var(--typography-lineHeight-normal) - var(--bd-li-marker-size)) / 2);
|
|
86
96
|
}
|
|
87
97
|
|
|
88
98
|
/* No Marker */
|
|
@@ -95,17 +105,14 @@ export default css`
|
|
|
95
105
|
}
|
|
96
106
|
|
|
97
107
|
/* === CONTENT STYLING === */
|
|
98
|
-
|
|
108
|
+
|
|
99
109
|
.bd-list-item-content {
|
|
100
110
|
flex: 1;
|
|
101
111
|
}
|
|
102
112
|
|
|
103
|
-
|
|
104
|
-
|
|
105
|
-
|
|
106
|
-
|
|
107
|
-
:host(:last-of-type) .bd-list-item {
|
|
108
|
-
margin-bottom: 0;
|
|
109
|
-
}
|
|
113
|
+
/* Last Item */
|
|
114
|
+
:host(:last-of-type) .bd-list-item {
|
|
115
|
+
margin-bottom: 0;
|
|
116
|
+
}
|
|
110
117
|
}
|
|
111
118
|
`;
|
|
@@ -1,4 +1,4 @@
|
|
|
1
|
-
import { LitElement, html } from "lit";
|
|
1
|
+
import { LitElement, html, nothing } from "lit";
|
|
2
2
|
import { tokens } from "../../../tokens/tokens.js";
|
|
3
3
|
import listItemCSS from "./list-item.css.js";
|
|
4
4
|
|
|
@@ -28,7 +28,7 @@ export class BdListItem extends LitElement {
|
|
|
28
28
|
}
|
|
29
29
|
|
|
30
30
|
_renderMarker() {
|
|
31
|
-
if (this.kind === "none") return
|
|
31
|
+
if (this.kind === "none") return nothing;
|
|
32
32
|
|
|
33
33
|
if (this.icon) {
|
|
34
34
|
return html`<img src="${this.icon}" alt="" class="bd-list-item-custom-icon" />`;
|
|
@@ -0,0 +1,188 @@
|
|
|
1
|
+
// src/components/video-player/video-player.stories.js
|
|
2
|
+
import { html } from 'lit';
|
|
3
|
+
import './video-player.js';
|
|
4
|
+
|
|
5
|
+
export default {
|
|
6
|
+
title : 'Components/VideoPlayer',
|
|
7
|
+
tags : ['autodocs'],
|
|
8
|
+
parameters: {
|
|
9
|
+
docs: {
|
|
10
|
+
description: {
|
|
11
|
+
component: `
|
|
12
|
+
**VideoPlayer** is a component for embedding videos with a thumbnail preview.
|
|
13
|
+
|
|
14
|
+
- Click the thumbnail to open the video
|
|
15
|
+
- Supports YouTube and direct video sources
|
|
16
|
+
- Close button to return to thumbnail
|
|
17
|
+
|
|
18
|
+
### Usage
|
|
19
|
+
\`\`\`html
|
|
20
|
+
<bd-video-player
|
|
21
|
+
src="https://www.youtube.com/embed/zal9Mt02ErM"
|
|
22
|
+
thumb="/assets/tabs-img1.png"
|
|
23
|
+
thumb-alt="Video preview"
|
|
24
|
+
></bd-video-player>
|
|
25
|
+
\`\`\`
|
|
26
|
+
|
|
27
|
+
### Props
|
|
28
|
+
| Prop | Type | Default | Description |
|
|
29
|
+
|------|------|---------|-------------|
|
|
30
|
+
| \`src\` | String | \`''\` | Video source URL (YouTube embed or direct video) |
|
|
31
|
+
| \`thumb\` | String | \`''\` | Thumbnail image URL |
|
|
32
|
+
| \`thumb-alt\` | String | \`''\` | Alt text for the thumbnail image |
|
|
33
|
+
`
|
|
34
|
+
}
|
|
35
|
+
}
|
|
36
|
+
},
|
|
37
|
+
argTypes: {
|
|
38
|
+
src: {
|
|
39
|
+
control : 'text',
|
|
40
|
+
description: 'Video source URL (YouTube embed or direct video)',
|
|
41
|
+
table : { type: { summary: 'string' }, defaultValue: { summary: '' }, category: 'Content' }
|
|
42
|
+
},
|
|
43
|
+
thumb: {
|
|
44
|
+
control : 'text',
|
|
45
|
+
description: 'Thumbnail image URL',
|
|
46
|
+
table : { type: { summary: 'string' }, defaultValue: { summary: '' }, category: 'Content' }
|
|
47
|
+
},
|
|
48
|
+
thumbAlt: {
|
|
49
|
+
control : 'text',
|
|
50
|
+
description: 'Alt text for the thumbnail image',
|
|
51
|
+
table : { type: { summary: 'string' }, defaultValue: { summary: '' }, category: 'Content' }
|
|
52
|
+
}
|
|
53
|
+
}
|
|
54
|
+
};
|
|
55
|
+
|
|
56
|
+
// ─── Default ─────────────────────────────────────────────────────────────
|
|
57
|
+
|
|
58
|
+
export const DefaultVideo = {
|
|
59
|
+
name : 'Default (YouTube)',
|
|
60
|
+
render: () => html`
|
|
61
|
+
<div style="max-width: 800px; margin: 0 auto;">
|
|
62
|
+
<bd-video-player
|
|
63
|
+
src="https://www.youtube.com/embed/zal9Mt02ErM"
|
|
64
|
+
thumb="/assets/tabs-img1.png"
|
|
65
|
+
thumb-alt="Video preview"
|
|
66
|
+
></bd-video-player>
|
|
67
|
+
</div>
|
|
68
|
+
`,
|
|
69
|
+
parameters: { docs: { description: { story: 'Default YouTube video with thumbnail.' } } }
|
|
70
|
+
};
|
|
71
|
+
|
|
72
|
+
// ─── With Custom Thumbnail ─────────────────────────────────────────────
|
|
73
|
+
|
|
74
|
+
export const CustomThumbnailVideo = {
|
|
75
|
+
name : 'Custom Thumbnail',
|
|
76
|
+
render: () => html`
|
|
77
|
+
<div style="max-width: 800px; margin: 0 auto;">
|
|
78
|
+
<bd-video-player
|
|
79
|
+
src="https://www.youtube.com/embed/zal9Mt02ErM"
|
|
80
|
+
thumb="/assets/tabs-img2.png"
|
|
81
|
+
thumb-alt="Custom video preview"
|
|
82
|
+
></bd-video-player>
|
|
83
|
+
</div>
|
|
84
|
+
`,
|
|
85
|
+
parameters: { docs: { description: { story: 'Video with a custom thumbnail image.' } } }
|
|
86
|
+
};
|
|
87
|
+
|
|
88
|
+
// ─── No Thumbnail ────────────────────────────────────────────────────────
|
|
89
|
+
|
|
90
|
+
export const VideoNoThumbnail = {
|
|
91
|
+
name : 'No Thumbnail (direct play)',
|
|
92
|
+
render: () => html`
|
|
93
|
+
<div style="max-width: 800px; margin: 0 auto;">
|
|
94
|
+
<bd-video-player
|
|
95
|
+
src="https://www.youtube.com/embed/zal9Mt02ErM"
|
|
96
|
+
></bd-video-player>
|
|
97
|
+
</div>
|
|
98
|
+
`,
|
|
99
|
+
parameters: { docs: { description: { story: 'Video without thumbnail — plays directly.' } } }
|
|
100
|
+
};
|
|
101
|
+
|
|
102
|
+
// ─── Direct Video Source ──────────────────────────────────────────────────────────────
|
|
103
|
+
|
|
104
|
+
export const DirectVideoSource = {
|
|
105
|
+
name : 'Direct Video (webm)',
|
|
106
|
+
render: () => html`
|
|
107
|
+
<div style="max-width: 800px; margin: 0 auto;">
|
|
108
|
+
<bd-video-player
|
|
109
|
+
src="https://www.bitdefender.com/content/dam/bitdefender/consumers/solutions/ultimate-small-business-security/Bitdefender_Final_1080p_V.webm"
|
|
110
|
+
thumb="/assets/tabs-img3.png"
|
|
111
|
+
thumb-alt="Video preview"
|
|
112
|
+
></bd-video-player>
|
|
113
|
+
</div>
|
|
114
|
+
`,
|
|
115
|
+
parameters: { docs: { description: { story: 'Direct webm video source with thumbnail.' } } }
|
|
116
|
+
};
|
|
117
|
+
|
|
118
|
+
// ─── YouTube with Autoplay ─────────────────────────────────────────────
|
|
119
|
+
|
|
120
|
+
export const YouTubeAutoplayVideo = {
|
|
121
|
+
name : 'YouTube with Autoplay',
|
|
122
|
+
render: () => html`
|
|
123
|
+
<div style="max-width: 800px; margin: 0 auto;">
|
|
124
|
+
<bd-video-player
|
|
125
|
+
src="https://www.youtube.com/embed/zal9Mt02ErM?autoplay=1"
|
|
126
|
+
thumb="/assets/tabs-img2.png"
|
|
127
|
+
thumb-alt="Video preview"
|
|
128
|
+
></bd-video-player>
|
|
129
|
+
</div>
|
|
130
|
+
`,
|
|
131
|
+
parameters: { docs: { description: { story: 'YouTube video with autoplay parameter in URL.' } } }
|
|
132
|
+
};
|
|
133
|
+
|
|
134
|
+
// ─── With Different Thumbnails ─────────────────────────────────────────
|
|
135
|
+
|
|
136
|
+
export const DifferentThumbnails = {
|
|
137
|
+
name : 'Different Thumbnails',
|
|
138
|
+
render: () => html`
|
|
139
|
+
<div style="display:grid; grid-template-columns: repeat(auto-fill, minmax(300px, 1fr)); gap: 24px; max-width: 1200px; margin: 0 auto; padding: 20px;">
|
|
140
|
+
<div>
|
|
141
|
+
<h4 style="margin-bottom: 8px;">Thumbnail 1</h4>
|
|
142
|
+
<bd-video-player
|
|
143
|
+
src="https://www.youtube.com/embed/zal9Mt02ErM"
|
|
144
|
+
thumb="/assets/tabs-img1.png"
|
|
145
|
+
thumb-alt="Video 1"
|
|
146
|
+
></bd-video-player>
|
|
147
|
+
</div>
|
|
148
|
+
<div>
|
|
149
|
+
<h4 style="margin-bottom: 8px;">Thumbnail 2</h4>
|
|
150
|
+
<bd-video-player
|
|
151
|
+
src="https://www.youtube.com/embed/zal9Mt02ErM"
|
|
152
|
+
thumb="/assets/tabs-img2.png"
|
|
153
|
+
thumb-alt="Video 2"
|
|
154
|
+
></bd-video-player>
|
|
155
|
+
</div>
|
|
156
|
+
<div>
|
|
157
|
+
<h4 style="margin-bottom: 8px;">Thumbnail 3</h4>
|
|
158
|
+
<bd-video-player
|
|
159
|
+
src="https://www.bitdefender.com/content/dam/bitdefender/consumers/solutions/ultimate-small-business-security/Bitdefender_Final_1080p_V.webm"
|
|
160
|
+
thumb="/assets/tabs-img3.png"
|
|
161
|
+
thumb-alt="Video 3"
|
|
162
|
+
></bd-video-player>
|
|
163
|
+
</div>
|
|
164
|
+
</div>
|
|
165
|
+
`,
|
|
166
|
+
parameters: { docs: { description: { story: 'Different thumbnails side by side.' } } }
|
|
167
|
+
};
|
|
168
|
+
|
|
169
|
+
// ─── Playground ──────────────────────────────────────────────────────────
|
|
170
|
+
|
|
171
|
+
export const VideoPlayerPlayground = {
|
|
172
|
+
name: '🛝 Playground',
|
|
173
|
+
args: {
|
|
174
|
+
src : 'https://www.youtube.com/embed/zal9Mt02ErM',
|
|
175
|
+
thumb : '/assets/tabs-img1.png',
|
|
176
|
+
thumbAlt: 'Video preview'
|
|
177
|
+
},
|
|
178
|
+
render: (args) => html`
|
|
179
|
+
<div style="max-width: 800px; margin: 0 auto;">
|
|
180
|
+
<bd-video-player
|
|
181
|
+
src="${args.src}"
|
|
182
|
+
thumb="${args.thumb}"
|
|
183
|
+
thumb-alt="${args.thumbAlt}"
|
|
184
|
+
></bd-video-player>
|
|
185
|
+
</div>
|
|
186
|
+
`,
|
|
187
|
+
parameters: { docs: { description: { story: 'Interactive playground for bd-video-player.' } } }
|
|
188
|
+
};
|