@repobit/dex-system-design 0.23.41 → 0.23.42

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 (7) hide show
  1. package/CHANGELOG.md +7 -0
  2. package/package.json +4 -4
  3. package/src/components/highlight/highlight.css.js +1 -1
  4. package/src/components/highlight/highlight.js +21 -12
  5. package/src/components/tabs/tabs.css.js +87 -197
  6. package/src/components/tabs/tabs.js +160 -164
  7. package/src/components/tabs/tabs.stories.js +436 -103
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.42](https://github.com/bitdefender/dex-core/compare/@repobit/dex-system-design@0.23.41...@repobit/dex-system-design@0.23.42) (2026-06-05)
7
+
8
+ ### Bug Fixes
9
+
10
+ * **DEX-1014:** new tabs component
11
+
12
+
6
13
  ## [0.23.41](https://github.com/bitdefender/dex-core/compare/@repobit/dex-system-design@0.23.40...@repobit/dex-system-design@0.23.41) (2026-05-28)
7
14
 
8
15
  **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.41",
3
+ "version": "0.23.42",
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.37",
74
- "@repobit/dex-store-elements": "1.4.29",
73
+ "@repobit/dex-store": "1.3.38",
74
+ "@repobit/dex-store-elements": "1.4.30",
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": "d28f4c5a125c11e1515df9f08b5897092a7fe573"
91
+ "gitHead": "10aad8e43bf7f63e26d028876ff5aad0a530d74c"
92
92
  }
package/src/components/highlight/highlight.css.js CHANGED
@@ -9,7 +9,7 @@ export default css`
9
9
  line-height: 1.3;
10
10
  text-align: center;
11
11
  color: #000;
12
- max-width: 720px;
12
+ max-width: 820px;
13
13
  margin: 0 auto;
14
14
  padding-top: var(--spacing-64)
15
15
  }
package/src/components/highlight/highlight.js CHANGED
@@ -1,30 +1,39 @@
1
1
  import { LitElement, html } from "lit";
2
2
  import { tokens } from "../../tokens/tokens.js";
3
+ import "../heading/heading.js";
4
+ import "../paragraph/paragraph.js";
3
5
  import highlightCSS from "./highlight.css.js";
4
6
 
5
7
  class BdHighlightSection extends LitElement {
6
8
  static properties = {
7
- highlightText: { type: String, attribute: 'highlight-text' },
8
- subTitle : { type: String, attribute: 'sub-title' }
9
+ highlightText: { type: String, attribute: "highlight-text" },
10
+ subTitle : { type: String, attribute: "sub-title" },
11
+ as : { type: String }
9
12
  };
10
13
 
11
14
  static styles = [tokens, highlightCSS];
12
15
 
16
+ constructor() {
17
+ super();
18
+ this.highlightText = "";
19
+ this.subTitle = "";
20
+ this.as = "h3";
21
+ }
22
+
13
23
  render() {
14
- const fullText = this.textContent || "";
24
+ const fullText = this.textContent || "";
15
25
  const highlightText = this.highlightText || "";
16
- const subTitle = this.subTitle || "";
17
26
 
18
- const subtitleTemplate = subTitle
19
- ? html`
20
- <h6 class="sub-title">${subTitle}</h6>
21
- `
27
+ const subtitleTemplate = this.subTitle
28
+ ? html`<bd-p kind="small" class="sub-title">${this.subTitle}</bd-p>`
22
29
  : null;
23
30
 
24
31
  if (!highlightText || !fullText.includes(highlightText)) {
25
32
  return html`
26
33
  ${subtitleTemplate}
27
- <p class="headline"><slot></slot></p>
34
+ <bd-h as="${this.as}" class="headline">
35
+ <slot></slot>
36
+ </bd-h>
28
37
  `;
29
38
  }
30
39
 
@@ -32,7 +41,7 @@ class BdHighlightSection extends LitElement {
32
41
 
33
42
  return html`
34
43
  ${subtitleTemplate}
35
- <p class="headline">
44
+ <bd-h as="${this.as}" class="headline">
36
45
  ${before}
37
46
  <span class="highlight">
38
47
  <span class="highlight-text">${highlightText}</span>
@@ -47,7 +56,7 @@ class BdHighlightSection extends LitElement {
47
56
  </span>
48
57
  </span>
49
58
  ${after}
50
- </p>
59
+ </bd-h>
51
60
  `;
52
61
  }
53
62
 
@@ -69,4 +78,4 @@ class BdHighlightSection extends LitElement {
69
78
  }
70
79
  }
71
80
 
72
- customElements.define("bd-highlight", BdHighlightSection);
81
+ customElements.define("bd-highlight", BdHighlightSection);
package/src/components/tabs/tabs.css.js CHANGED
@@ -2,266 +2,156 @@ import { css } from "lit";
2
2
 
3
3
  export default css`
4
4
  :host {
5
- --background-card-grey: var(--color-neutral-25);
6
- --border-card-grey: var(--color-neutral-50);
7
- --border-card-green: var(--color-green-700);
8
- --badge-background: var(--color-blue-700);
9
5
  --bd-accesibility-focus: var(--color-blue-500);
10
-
11
- --text-color-white: var(--color-neutral-0);
12
6
  font-size: 100%;
13
7
  display: block;
14
8
  font-family: var(--typography-fontFamily-sans);
15
9
  padding-top: var(--spacing-64);
16
10
  padding-bottom: var(--spacing-64);
11
+ background: var(--color-blue-50);
17
12
  }
18
- .bd-tabs-subtitle{
19
- font-size: var(--typography-body-regular-fontSize);
20
- max-width: 500px;
21
- text-align: center;
22
- font-family: var(--typography-fontFamily-sans);
23
- margin-top: var(--spacing-32);
24
- margin-bottom: var(--spacing-32);
25
13
 
26
- }
27
- .bd-tab-button p {
28
- margin-top: 1em;
29
- margin-bottom: 1em;
30
- }
31
- .bd-tab-button:focus-visible,
32
- .bd-find-out-more:focus-visible {
33
- outline: var(--spacing-2) solid var(--bd-accesibility-focus);
34
- outline-offset: var(--spacing-2);
35
- border-radius: var(--space-2xs);
36
- }
37
- .bd-tabs-component .bd-left img {
38
- max-width: 90%;
39
- }
40
-
41
- .bd-card-container {
14
+ .bd-tabs-component {
42
15
  display: flex;
43
- justify-content: space-between;
44
- padding: 36px 0px;
45
- border-radius: 5px;
46
- margin-top: 10px;
47
- margin: auto;
48
- width: 50%;
49
- }
50
-
51
- .bd-card-container .bd-left {
52
- flex: 1;
53
- padding-right: 20px;
16
+ flex-direction: column;
17
+ align-items: center;
18
+ max-width: 1290px;
19
+ margin-inline: auto;
20
+ padding-inline: var(--layout-ensemble-inline-padding, var(--spacing-24));
21
+ box-sizing: border-box;
54
22
  }
55
23
 
56
- .bd-card-container .bd-right {
57
- flex: 1;
58
- justify-content: center;
59
- align-items: center;
60
- padding: var(--spacing-0) var(--spacing-24);
24
+ .bd-tabs-subtitle {
25
+ font-size: var(--typography-body-regular-fontSize);
26
+ max-width: 780px;
27
+ text-align: center;
28
+ font-family: var(--typography-fontFamily-sans);
29
+ margin-top: var(--spacing-16);
30
+ margin-bottom: var(--spacing-8);
61
31
  }
62
32
 
33
+ /* Tab buttons row */
63
34
  .bd-tabs-container {
64
- display: flex;
35
+ display: inline-flex;
65
36
  justify-content: center;
66
- margin-bottom: 40px;
67
37
  flex-wrap: wrap;
68
- border-bottom: 1px solid #e4f2ff;
69
- margin: 0 auto;
70
- margin-bottom: var(--spacing-32);
38
+ border-bottom: 1px solid var(--color-neutral-100);
39
+ margin-top: var(--spacing-32);
40
+ margin-bottom: var(--spacing-48);
71
41
  }
72
42
 
73
- .bd-tabs-container button {
74
- color: #006eff;
75
- border: 0;
76
- padding: 9px;
77
- display: flex;
78
- gap: 10px;
43
+ .bd-tab-button {
44
+ display: inline-flex;
79
45
  align-items: center;
80
- position: relative;
46
+ justify-content: center;
47
+ background: none;
48
+ border: none;
49
+ padding: var(--spacing-10) var(--spacing-16);
81
50
  cursor: pointer;
82
- font-size: 1.125em;
83
- max-height: 55px;
51
+ color: var(--color-blue-500);
52
+ position: relative;
53
+ font-family: var(--typography-fontFamily-sans);
54
+ font-size: var(--typography-body-large-fontSize);
55
+ font-weight: var(--typography-fontWeight-semibold);
56
+ transition: color var(--transition-duration-fast) var(--transition-easing-smooth);
84
57
  }
85
58
 
86
- .bd-tabs-container button::after {
87
- background: #006eff;
59
+ .bd-tab-button::after {
88
60
  content: "";
89
- height: 4px;
61
+ height: 3px;
62
+ background: var(--color-blue-500);
90
63
  position: absolute;
91
64
  left: 0;
92
65
  bottom: 0;
93
66
  width: 0;
94
- transition: width 1s ease;
67
+ transition: width var(--transition-duration-slow) var(--transition-easing-smooth);
95
68
  }
96
69
 
97
- .bd-tabs-container button.bd-selected::after {
70
+ .bd-tab-button.bd-selected::after {
98
71
  width: 100%;
99
72
  }
100
73
 
101
- .bd-tabs-container button.bd-selected {
102
- color: black;
74
+ .bd-tab-button.bd-selected {
75
+ color: var(--color-neutral-900);
76
+ font-weight: var(--typography-fontWeight-semibold);
103
77
  }
104
78
 
105
- .bd-tab-button {
106
- display: inline-flex;
107
- align-items: center;
108
- justify-content: center;
109
- gap: 8px;
110
- background: none;
111
- border: none;
112
- padding: 10px;
113
- cursor: pointer;
114
- <!-- font-weight: bold; -->
79
+ .bd-tab-button:focus-visible {
80
+ outline: 2px solid var(--bd-accesibility-focus);
81
+ outline-offset: 2px;
82
+ border-radius: var(--radius-sm);
115
83
  }
116
84
 
117
- .bd-tab-button img {
118
- margin-right: 8px;
119
- height: 30px;
120
- width: 30px;
85
+ .bd-tab-label {
86
+ pointer-events: none;
121
87
  }
122
88
 
123
- .bd-tabs-component h2 {
124
- margin-bottom: 75px;
125
- max-width: 630px;
126
- text-align: center;
89
+ /* Columns grid */
90
+ .bd-columns-container {
91
+ display: grid;
92
+ gap: var(--spacing-32);
93
+ width: 100%;
94
+ justify-content: center;
127
95
  }
128
96
 
129
- .bd-tabs-component {
97
+ /* Coloana individuala */
98
+ .bd-col {
130
99
  display: flex;
131
100
  flex-direction: column;
132
- align-items: center;
101
+ width: 300px;
133
102
  }
134
103
 
135
- .bd-ul-privacy {
136
- list-style: none;
137
- padding-inline-start: 0px;
138
- }
139
-
140
- .bd-find-out-more {
141
- text-decoration: none;
142
- background-color: white;
143
- color: #006eff;
144
- border: 0;
104
+ /* Icon wrapper */
105
+ .col-icon-wrapper {
145
106
  display: flex;
146
- gap: 10px;
147
- align-items: start;
148
- position: relative;
149
- cursor: pointer;
150
- font-family: var(--typography-fontFamily-sans);
151
- font-weight: var(--typography-fontWeight-semibold);
107
+ align-items: flex-start;
108
+ margin-bottom: var(--spacing-8);
109
+ overflow: hidden;
152
110
  }
153
111
 
154
- .bd-find-out-more .bd-arrow svg {
155
- width: 12px;
156
- height: 12px;
157
- position: relative;
158
- top: 1.5px;
159
- }
160
-
161
- .bd-right h3 {
162
- font-size: var(--typography-heading-h4-fontSize);
112
+ /* Title wrapper */
113
+ .col-title-wrapper {
114
+ display: flex;
115
+ align-items: flex-start;
116
+ margin-bottom: var(--spacing-8);
117
+ overflow: hidden;
163
118
  }
164
119
 
165
- .bd-section-title {
120
+ .col-title {
166
121
  font-family: var(--typography-fontFamily-sans);
167
- font-weight: var(--typography-fontWeight-semibold);
122
+ font-size: var(--typography-fontSize-2xl);
123
+ font-weight: var(--typography-fontWeight-bold);
124
+ color: var(--color-neutral-900);
125
+ line-height: var(--typography-lineHeight-normal);
168
126
  }
169
127
 
170
- /* ✅ Responsive Design */
171
- @media (max-width: 1200px) {
172
- .bd-tabs-component.bd-we-container {
173
- max-width: 100%;
174
- padding: 0 20px;
175
- }
128
+ .col-description {
129
+ margin-bottom: var(--spacing-16);
130
+ font-family: var(--typography-fontFamily-sans);
131
+ font-size: var(--typography-fontSize-md);
132
+ color: var(--color-neutral-700);
133
+ line-height: var(--typography-lineHeight-normal);
134
+ overflow: hidden;
176
135
  }
177
136
 
137
+ /* Responsive */
178
138
  @media (max-width: 992px) {
179
- .bd-tabs-component .bd-card-container {
180
- flex-direction: column;
181
- width: 90%;
182
- }
183
-
184
- .bd-tabs-component .bd-tabs-container {
185
- flex-wrap: wrap;
186
- }
187
-
188
- .bd-tabs-component .bd-tabs-container button picture img {
189
- width: 24px;
190
- }
191
-
192
- .bd-tabs-component .bd-card-container {
193
- align-items: center;
194
- text-align: center;
195
- }
196
-
197
- .bd-tabs-component .bd-left {
198
- width: 100%;
199
- padding: 10px;
200
- }
201
-
202
- .bd-tabs-component .bd-left img {
203
- max-width: 50%;
204
- }
205
-
206
- .bd-tabs-component .bd-right {
207
- width: 100%;
208
- padding: 10px;
209
- }
210
-
211
- .bd-tabs-component.bd-we-container {
212
- max-width: 100%;
213
- padding-left: 30px;
214
- padding-right: 30px;
139
+ .bd-col {
140
+ width: 260px;
215
141
  }
216
142
  }
217
143
 
218
- @media (max-width: 768px) {
219
- .bd-card-container {
220
- flex-direction: column;
144
+ @media (max-width: 600px) {
145
+ .bd-col {
221
146
  width: 100%;
222
- padding: 20px;
223
- }
224
-
225
- .bd-section-title {
226
- text-align: center;
227
- font-size: 1.6em;
228
- margin-bottom: 30px;
229
- padding: 10px;
230
- }
231
-
232
- .bd-right h3 {
233
- text-align: center;
234
- }
235
-
236
- .bd-tabs-component {
237
- margin-top: 24px;
238
147
  }
239
148
 
240
149
  .bd-tabs-container {
241
- flex-direction: column;
242
- align-items: center;
243
- text-align: center;
244
- width: 100%;
245
- }
246
-
247
- .bd-tabs-container button {
248
- font-size: 1.2em;
249
- padding: 6px;
250
- }
251
-
252
- .bd-tabs-component .bd-left img {
253
- max-width: 100%;
254
- height: auto;
255
- }
256
-
257
- .bd-tabs-component .bd-right {
258
- text-align: center;
259
- padding: 10px;
260
- text-align: left;
150
+ gap: var(--spacing-4);
261
151
  }
262
152
 
263
- .bd-find-out-more {
264
- justify-content: center;
153
+ .bd-tab-button {
154
+ padding: var(--spacing-8) var(--spacing-12);
265
155
  }
266
156
  }
267
- `;
157
+ `;