@repobit/dex-system-design 0.23.9 → 0.23.10
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,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.10](https://github.com/bitdefender/dex-core/compare/@repobit/dex-system-design@0.23.9...@repobit/dex-system-design@0.23.10) (2026-03-31)
|
|
7
|
+
|
|
8
|
+
### Bug Fixes
|
|
9
|
+
|
|
10
|
+
* **DEX-1014:** quick changes on multiple components
|
|
11
|
+
|
|
12
|
+
|
|
6
13
|
## [0.23.9](https://github.com/bitdefender/dex-core/compare/@repobit/dex-system-design@0.23.8...@repobit/dex-system-design@0.23.9) (2026-03-31)
|
|
7
14
|
|
|
8
15
|
### 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.10",
|
|
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": "d6c2015f70aedf55bb7fe4860b3c2ce1978a52f4"
|
|
90
90
|
}
|
|
@@ -0,0 +1,234 @@
|
|
|
1
|
+
import { LitElement, html } from "lit";
|
|
2
|
+
import { tokens } from "../../tokens/tokens.js";
|
|
3
|
+
import "../awards/awards-icon.js";
|
|
4
|
+
import { awardsCSS } from "./awards.css.js";
|
|
5
|
+
|
|
6
|
+
export class AwardsSection extends LitElement {
|
|
7
|
+
static properties = {
|
|
8
|
+
tagline : { type: String },
|
|
9
|
+
headline : { type: String },
|
|
10
|
+
subtext : { type: String },
|
|
11
|
+
secretTitle : { type: String },
|
|
12
|
+
secretSubtext : { type: String },
|
|
13
|
+
desktopAwards : { type: Array },
|
|
14
|
+
features : { type: Array },
|
|
15
|
+
_narrow : { state: true },
|
|
16
|
+
_featureNarrow: { state: true }
|
|
17
|
+
};
|
|
18
|
+
|
|
19
|
+
static styles = [tokens, awardsCSS];
|
|
20
|
+
|
|
21
|
+
/** @type {MediaQueryList | null} */
|
|
22
|
+
_mql599 = null;
|
|
23
|
+
/** @type {MediaQueryList | null} */
|
|
24
|
+
_mql767 = null;
|
|
25
|
+
_on599 = () => {
|
|
26
|
+
this._narrow = this._mql599?.matches ?? false;
|
|
27
|
+
};
|
|
28
|
+
_on767 = () => {
|
|
29
|
+
this._featureNarrow = this._mql767?.matches ?? false;
|
|
30
|
+
};
|
|
31
|
+
|
|
32
|
+
constructor() {
|
|
33
|
+
super();
|
|
34
|
+
this.tagline = "You're Making A Great Choice";
|
|
35
|
+
this.headline =
|
|
36
|
+
"World-class security software you can trust. Always.";
|
|
37
|
+
this.subtext =
|
|
38
|
+
"We've added 25 new accolades in the past two years to the hundreds we have won since we started in 2001 - so you know you are in good hands.";
|
|
39
|
+
this.secretTitle = "What's our secret";
|
|
40
|
+
this.secretSubtext =
|
|
41
|
+
"At the heart of Bitdefender lies a powerhouse of proprietary technology, setting it miles apart from the competition.";
|
|
42
|
+
|
|
43
|
+
this.desktopAwards = [
|
|
44
|
+
{
|
|
45
|
+
label : "PC MAG\nEDITORS' CHOICE",
|
|
46
|
+
type : "red",
|
|
47
|
+
format: "svg",
|
|
48
|
+
src : "/assets/pc-mag.svg",
|
|
49
|
+
id : "pc-mag"
|
|
50
|
+
},
|
|
51
|
+
{
|
|
52
|
+
label : "AV\ncomparatives",
|
|
53
|
+
type : "dark",
|
|
54
|
+
format: "svg",
|
|
55
|
+
src : "/assets/av-comparatives.svg",
|
|
56
|
+
id : "av-comparatives"
|
|
57
|
+
},
|
|
58
|
+
{
|
|
59
|
+
label : "Best\nBrands\n2024",
|
|
60
|
+
type : "dark",
|
|
61
|
+
format: "svg",
|
|
62
|
+
src : "/assets/best-brands.svg",
|
|
63
|
+
id : "best-brands"
|
|
64
|
+
},
|
|
65
|
+
{
|
|
66
|
+
label : "PC\nChoice\n2024",
|
|
67
|
+
type : "red",
|
|
68
|
+
format: "svg",
|
|
69
|
+
src : "/assets/pc-mag-2024.svg",
|
|
70
|
+
id : "pc-mag-2024"
|
|
71
|
+
},
|
|
72
|
+
{
|
|
73
|
+
label : "PC MAG\nREADERS'\nCHOICE",
|
|
74
|
+
type : "red",
|
|
75
|
+
format: "svg",
|
|
76
|
+
src : "/assets/pc-mag-readers.svg",
|
|
77
|
+
id : "pc-mag-readers"
|
|
78
|
+
},
|
|
79
|
+
{
|
|
80
|
+
label : "PC\nBusiness\nChoice",
|
|
81
|
+
type : "red",
|
|
82
|
+
format: "svg",
|
|
83
|
+
src : "/assets/pc-mag-business.svg",
|
|
84
|
+
id : "pc-mag-business"
|
|
85
|
+
},
|
|
86
|
+
{
|
|
87
|
+
label : "AV\nTEST\nTOP\nPRODUCT",
|
|
88
|
+
type : "red",
|
|
89
|
+
format: "svg",
|
|
90
|
+
src : "/assets/top-product.svg",
|
|
91
|
+
id : "top-product"
|
|
92
|
+
}
|
|
93
|
+
];
|
|
94
|
+
|
|
95
|
+
this.features = [
|
|
96
|
+
{
|
|
97
|
+
icon : "brain",
|
|
98
|
+
title: "Machine Learning",
|
|
99
|
+
description:
|
|
100
|
+
"Imagine Bitdefender as a super-smart detective, constantly learning and getting better at spotting bad guys. Just like how you learn from your experiences, Bitdefender learns from millions of cyber threats it encounters every day. It studies their patterns, figures out their tricks, and uses that knowledge to protect your devices from future attacks."
|
|
101
|
+
},
|
|
102
|
+
{
|
|
103
|
+
icon : "chart",
|
|
104
|
+
title: "Behavioral Analysis",
|
|
105
|
+
description:
|
|
106
|
+
"Bitdefender keeps an eye on how you and your devices normally behave. So, when something unusual happens, like a strange file trying to sneak into your computer or a suspicious website trying to steal your info, Bitdefender sounds the alarm. It's like having a loyal sidekick that never sleeps, always on the lookout for trouble and ready to jump into action to keep you safe."
|
|
107
|
+
}
|
|
108
|
+
];
|
|
109
|
+
|
|
110
|
+
this._narrow = false;
|
|
111
|
+
this._featureNarrow = false;
|
|
112
|
+
}
|
|
113
|
+
|
|
114
|
+
connectedCallback() {
|
|
115
|
+
super.connectedCallback();
|
|
116
|
+
if (typeof window !== "undefined" && window.matchMedia) {
|
|
117
|
+
this._mql599 = window.matchMedia("(max-width: 599px)");
|
|
118
|
+
this._mql767 = window.matchMedia("(max-width: 767px)");
|
|
119
|
+
this._narrow = this._mql599.matches;
|
|
120
|
+
this._featureNarrow = this._mql767.matches;
|
|
121
|
+
this._mql599.addEventListener("change", this._on599);
|
|
122
|
+
this._mql767.addEventListener("change", this._on767);
|
|
123
|
+
}
|
|
124
|
+
}
|
|
125
|
+
|
|
126
|
+
disconnectedCallback() {
|
|
127
|
+
super.disconnectedCallback();
|
|
128
|
+
this._mql599?.removeEventListener("change", this._on599);
|
|
129
|
+
this._mql767?.removeEventListener("change", this._on767);
|
|
130
|
+
}
|
|
131
|
+
|
|
132
|
+
_renderBadge(award) {
|
|
133
|
+
const ariaLabel = award.label.replace(/\n/g, " ");
|
|
134
|
+
const classes = `bd-awards-badge ${award.type === "dark" ? "bd-awards-badge--dark" : ""}`;
|
|
135
|
+
return html`
|
|
136
|
+
<div class="${classes}" data-award-id="${award.id}" role="listitem">
|
|
137
|
+
<bd-icon src="${award.src}" label="${ariaLabel}"></bd-icon>
|
|
138
|
+
</div>
|
|
139
|
+
`;
|
|
140
|
+
}
|
|
141
|
+
|
|
142
|
+
_renderFeature(f) {
|
|
143
|
+
const narrow = this._featureNarrow;
|
|
144
|
+
const iconSrc =
|
|
145
|
+
f.icon === "brain"
|
|
146
|
+
? "/assets/machine-learning.svg"
|
|
147
|
+
: "/assets/analysis.svg";
|
|
148
|
+
|
|
149
|
+
return html`
|
|
150
|
+
<article class="bd-awards-feature-card">
|
|
151
|
+
<div class="bd-awards-feature-icon" aria-hidden="true">
|
|
152
|
+
<bd-icon src="${iconSrc}" label=""></bd-icon>
|
|
153
|
+
</div>
|
|
154
|
+
<div class="bd-awards-feature-text">
|
|
155
|
+
${narrow
|
|
156
|
+
? html`<bd-h as="h6" class="bd-awards-feature-title">${f.title}</bd-h>`
|
|
157
|
+
: html`<bd-h as="h4" class="bd-awards-feature-title">${f.title}</bd-h>`}
|
|
158
|
+
${narrow
|
|
159
|
+
? html`<bd-p kind="small" class="bd-awards-feature-desc">${f.description}</bd-p>`
|
|
160
|
+
: html`<bd-p kind="regular" class="bd-awards-feature-desc">${f.description}</bd-p>`}
|
|
161
|
+
</div>
|
|
162
|
+
</article>
|
|
163
|
+
`;
|
|
164
|
+
}
|
|
165
|
+
|
|
166
|
+
render() {
|
|
167
|
+
const narrow = this._narrow;
|
|
168
|
+
|
|
169
|
+
return html`
|
|
170
|
+
<section
|
|
171
|
+
class="bd-awards-root"
|
|
172
|
+
aria-label="Awards and recognition"
|
|
173
|
+
>
|
|
174
|
+
<div class="bd-awards-trust-banner">
|
|
175
|
+
<div class="bd-awards-trust-intro">
|
|
176
|
+
<span class="bd-awards-laurel-icon" aria-hidden="true">
|
|
177
|
+
<bd-icon
|
|
178
|
+
label=""
|
|
179
|
+
>
|
|
180
|
+
<svg
|
|
181
|
+
width="80"
|
|
182
|
+
height="80"
|
|
183
|
+
viewBox="0 0 80 80"
|
|
184
|
+
fill="none"
|
|
185
|
+
xmlns="http://www.w3.org/2000/svg"
|
|
186
|
+
aria-hidden="true"
|
|
187
|
+
>
|
|
188
|
+
<path
|
|
189
|
+
d="M48.0751 11.994C48.0751 17.6107 52.457 21.9791 58.0908 21.9791C58.0908 16.4873 53.5837 11.994 48.0751 11.994ZM61.8466 19.7325C62.9734 16.737 65.1017 13.9911 68.1064 12.2437C68.9828 11.7444 70.1096 12.1189 70.6103 12.8677L72.7387 16.6121C75.3678 21.1054 75.493 26.3476 73.615 30.8409C74.9922 30.3417 76.6197 29.9672 78.2473 29.9672C79.2488 29.9672 80 30.8409 80 31.8394V35.9583C80 41.2005 77.4961 45.8186 73.615 48.8141C75.2426 49.0637 76.7449 49.563 78.1221 50.4367C78.9984 50.9359 79.2488 52.0592 78.8732 52.8081L76.7449 56.5525C73.2394 62.5436 66.4789 65.4143 60.0939 64.291L59.4679 64.0414C57.9656 63.2925 56.4632 62.6684 54.9609 62.0443C53.8341 61.6699 52.7074 61.2955 51.4554 61.0458C58.9671 57.0518 64.1002 49.0637 64.1002 39.9523C64.1002 34.835 62.2222 29.9672 59.0923 25.9732H58.0908C50.3286 25.9732 44.0689 19.7325 44.0689 11.994V9.99702C44.0689 8.99851 44.9452 8 46.072 8H48.0751C54.9609 8 60.8451 13.1174 61.8466 19.7325ZM39.9374 67.9106V68.0354H37.5587C32.9264 68.0354 28.2942 69.0339 24.1628 71.1558L22.9108 71.7798C21.9092 72.2791 20.6573 71.9046 20.1565 70.9061C19.6557 69.9076 20.1565 68.6595 21.0329 68.1602L22.2848 67.5362C24.1628 66.6625 26.0407 65.9136 28.0438 65.2895C26.6667 64.6654 25.2895 63.9166 24.0376 63.0429C23.1612 63.4173 22.2848 63.6669 21.5336 63.9166C14.6479 65.7888 7.01095 62.918 3.25509 56.5525L1.25196 52.8081C0.751174 52.0592 1.00156 50.9359 1.87793 50.4367C3.25509 49.563 4.75743 49.0637 6.38498 48.8141C2.50391 45.8186 0 41.2005 0 35.9583V31.8394C0 30.8409 0.751174 29.9672 1.75274 29.9672C3.38028 29.9672 5.00782 30.3417 6.38498 30.8409C4.50704 26.3476 4.75743 21.1054 7.26135 16.6121L9.38967 12.8677C9.89045 12.1189 11.0172 11.7444 11.8936 12.2437C14.8983 13.9911 17.0266 16.737 18.1534 19.7325C19.2801 13.1174 25.0391 8 32.0501 8H34.0532C35.0548 8 36.0563 8.99851 36.0563 9.99702V11.994C36.0563 19.7325 29.6714 25.9732 22.0344 25.9732H20.9077C17.7778 29.9672 16.025 34.835 16.025 39.9523C16.025 53.1826 26.7919 63.9166 40.0626 63.9166H42.4413C47.6995 63.9166 52.9577 65.1647 57.7152 67.5362L58.9671 68.1602C59.9687 68.6595 60.3443 69.9076 59.8435 70.9061C59.3427 71.7798 58.0908 72.2791 57.0892 71.7798L55.8372 71.1558C51.7058 69.0339 47.0736 67.9106 42.4413 67.9106H40.0626H39.9374ZM22.0344 21.9791C27.543 21.9791 32.0501 17.6107 32.0501 11.994C29.1706 11.994 26.6667 13.2422 24.7887 15.1144C23.036 16.8618 22.0344 19.3581 22.0344 21.9791ZM12.0188 44.196C12.0188 39.3282 8.5133 35.2094 4.00626 34.2109V35.9583C4.00626 41.2005 7.26135 45.6937 12.0188 47.3163V44.196ZM68.1064 47.3163C72.7387 45.6937 76.1189 41.2005 76.1189 35.9583V34.2109C71.4867 35.3342 68.1064 39.3282 68.1064 44.196V47.3163ZM17.7778 57.6759C15.3991 53.4322 10.3912 51.56 5.88419 53.0578L6.76056 54.5555C9.38967 59.0488 14.5227 61.1707 19.4053 60.297L17.7778 57.6759ZM12.0188 32.3387L13.6463 29.7176C16.025 25.4739 15.1487 20.2317 11.6432 17.1114L10.7668 18.6092C8.13772 23.1025 8.88889 28.5943 12.0188 32.3387ZM66.3537 29.7176L67.9812 32.3387C71.1111 28.5943 71.8623 23.1025 69.2332 18.6092L68.3568 17.1114C64.8513 20.2317 63.975 25.4739 66.3537 29.7176ZM62.2222 57.6759L60.5947 60.297C65.4773 61.1707 70.6103 59.0488 73.2394 54.5555L74.1158 53.0578C69.6088 51.56 64.6009 53.4322 62.2222 57.6759Z"
|
|
190
|
+
fill="currentColor"
|
|
191
|
+
/>
|
|
192
|
+
</svg>
|
|
193
|
+
</bd-icon>
|
|
194
|
+
</span>
|
|
195
|
+
|
|
196
|
+
${narrow
|
|
197
|
+
? html`<bd-p kind="small" class="bd-awards-tagline">${this.tagline}</bd-p>`
|
|
198
|
+
: html`<bd-p kind="large" class="bd-awards-tagline">${this.tagline}</bd-p>`}
|
|
199
|
+
|
|
200
|
+
${narrow
|
|
201
|
+
? html`
|
|
202
|
+
<bd-h as="h4" class="bd-awards-headline">
|
|
203
|
+
<span class="bd-awards-headline-line">World-class security</span>
|
|
204
|
+
<span class="bd-awards-headline-line">software you can trust.</span>
|
|
205
|
+
<span class="bd-awards-headline-line">Always.</span>
|
|
206
|
+
</bd-h>
|
|
207
|
+
`
|
|
208
|
+
: html`<bd-h as="h3" class="bd-awards-headline">${this.headline}</bd-h>`}
|
|
209
|
+
|
|
210
|
+
${narrow
|
|
211
|
+
? html`<bd-p kind="small" class="bd-awards-subtext">${this.subtext}</bd-p>`
|
|
212
|
+
: html`<bd-p kind="regular" class="bd-awards-subtext">${this.subtext}</bd-p>`}
|
|
213
|
+
</div>
|
|
214
|
+
|
|
215
|
+
<div
|
|
216
|
+
class="bd-awards-bar"
|
|
217
|
+
role="list"
|
|
218
|
+
aria-label="Industry awards"
|
|
219
|
+
>
|
|
220
|
+
<div class="bd-awards-row" role="presentation">
|
|
221
|
+
${this.desktopAwards.slice(0, 3).map((a) => this._renderBadge(a))}
|
|
222
|
+
</div>
|
|
223
|
+
<div class="bd-awards-row" role="presentation">
|
|
224
|
+
${this.desktopAwards.slice(3).map((a) => this._renderBadge(a))}
|
|
225
|
+
</div>
|
|
226
|
+
</div>
|
|
227
|
+
</div>
|
|
228
|
+
|
|
229
|
+
<div class="bd-awards-lower">
|
|
230
|
+
`;
|
|
231
|
+
}
|
|
232
|
+
}
|
|
233
|
+
|
|
234
|
+
customElements.define("bd-awards-section-light", AwardsSection);
|
|
@@ -0,0 +1,436 @@
|
|
|
1
|
+
import { html } from "lit";
|
|
2
|
+
import "../awards/awards-light.js";
|
|
3
|
+
import "../heading/heading.js";
|
|
4
|
+
import "../image/image.js";
|
|
5
|
+
import "../link/link.js";
|
|
6
|
+
import "../paragraph/paragraph.js";
|
|
7
|
+
|
|
8
|
+
export default {
|
|
9
|
+
title : "Components/Awards Section Light",
|
|
10
|
+
component : "bd-awards-section-light",
|
|
11
|
+
tags : ["autodocs"],
|
|
12
|
+
parameters: {
|
|
13
|
+
layout: "fullscreen",
|
|
14
|
+
docs : {
|
|
15
|
+
description: {
|
|
16
|
+
component: `
|
|
17
|
+
**AwardsSection** is a Lit web component that showcases Bitdefender's industry awards and trust signals.
|
|
18
|
+
|
|
19
|
+
It includes:
|
|
20
|
+
- A trust banner with tagline, headline, and subtext
|
|
21
|
+
- A responsive awards bar (7 badges split into two rows)
|
|
22
|
+
- A "What's our secret" section
|
|
23
|
+
- Two feature cards (Machine Learning & Behavioral Analysis)
|
|
24
|
+
|
|
25
|
+
### Responsive Behavior
|
|
26
|
+
| Breakpoint | Behavior |
|
|
27
|
+
|---|---|
|
|
28
|
+
| \`≤ 599px\` | Narrow layout: smaller typography, compact badges |
|
|
29
|
+
| \`≤ 767px\` | Feature cards use small typography |
|
|
30
|
+
| \`≥ 768px\` | Full desktop layout |
|
|
31
|
+
|
|
32
|
+
### Attributes
|
|
33
|
+
| Attribute | Type | Default | Description |
|
|
34
|
+
|----------------|--------|---------|------------------------------------------|
|
|
35
|
+
| \`tagline\` | String | — | Small text above the headline |
|
|
36
|
+
| \`headline\` | String | — | Main heading of the trust banner |
|
|
37
|
+
| \`subtext\` | String | — | Supporting paragraph below the headline |
|
|
38
|
+
| \`secretTitle\` | String | — | Heading of the "What's our secret" block |
|
|
39
|
+
| \`secretSubtext\`| String | — | Subtext of the "What's our secret" block |
|
|
40
|
+
| \`desktopAwards\`| Array | — | Award badge objects (see below) |
|
|
41
|
+
| \`features\` | Array | — | Feature card objects (see below) |
|
|
42
|
+
|
|
43
|
+
### Badge object shape
|
|
44
|
+
\`\`\`js
|
|
45
|
+
{ id: string, label: string, type: "red" | "dark", format: "svg", src: string }
|
|
46
|
+
\`\`\`
|
|
47
|
+
|
|
48
|
+
### Feature object shape
|
|
49
|
+
\`\`\`js
|
|
50
|
+
{ icon: "brain" | "chart", title: string, description: string }
|
|
51
|
+
\`\`\`
|
|
52
|
+
`
|
|
53
|
+
}
|
|
54
|
+
}
|
|
55
|
+
},
|
|
56
|
+
argTypes: {
|
|
57
|
+
tagline: {
|
|
58
|
+
control : "text",
|
|
59
|
+
description: "Small text displayed above the headline",
|
|
60
|
+
table : { type: { summary: "string" }, category: "Content" }
|
|
61
|
+
},
|
|
62
|
+
headline: {
|
|
63
|
+
control : "text",
|
|
64
|
+
description: "Main heading of the trust banner",
|
|
65
|
+
table : { type: { summary: "string" }, category: "Content" }
|
|
66
|
+
},
|
|
67
|
+
subtext: {
|
|
68
|
+
control : "text",
|
|
69
|
+
description: "Supporting paragraph below the headline",
|
|
70
|
+
table : { type: { summary: "string" }, category: "Content" }
|
|
71
|
+
},
|
|
72
|
+
secretTitle: {
|
|
73
|
+
control : "text",
|
|
74
|
+
description: "Title of the 'What's our secret' section",
|
|
75
|
+
table : { type: { summary: "string" }, category: "Content" }
|
|
76
|
+
},
|
|
77
|
+
secretSubtext: {
|
|
78
|
+
control : "text",
|
|
79
|
+
description: "Subtext of the 'What's our secret' section",
|
|
80
|
+
table : { type: { summary: "string" }, category: "Content" }
|
|
81
|
+
},
|
|
82
|
+
desktopAwards: {
|
|
83
|
+
control : "object",
|
|
84
|
+
description: "Array of award badge objects",
|
|
85
|
+
table : {
|
|
86
|
+
type : { summary: "Array<{ id, label, type, format, src }>" },
|
|
87
|
+
category: "Badges"
|
|
88
|
+
}
|
|
89
|
+
},
|
|
90
|
+
features: {
|
|
91
|
+
control : "object",
|
|
92
|
+
description: "Array of feature card objects",
|
|
93
|
+
table : {
|
|
94
|
+
type : { summary: "Array<{ icon, title, description }>" },
|
|
95
|
+
category: "Features"
|
|
96
|
+
}
|
|
97
|
+
}
|
|
98
|
+
}
|
|
99
|
+
};
|
|
100
|
+
|
|
101
|
+
|
|
102
|
+
// ─── Shared defaults ─────────────────────────────────────────────────────────
|
|
103
|
+
|
|
104
|
+
const defaultArgs = {
|
|
105
|
+
tagline : "You're Making A Great Choice",
|
|
106
|
+
headline : "World-class security software you can trust. Always.",
|
|
107
|
+
subtext : "We've added 25 new accolades in the past two years to the hundreds we have won since we started in 2001 - so you know you are in good hands.",
|
|
108
|
+
secretTitle : "What's our secret",
|
|
109
|
+
secretSubtext: "At the heart of Bitdefender lies a powerhouse of proprietary technology, setting it miles apart from the competition.",
|
|
110
|
+
desktopAwards: [
|
|
111
|
+
{
|
|
112
|
+
label : "PC MAG\nEDITORS' CHOICE",
|
|
113
|
+
type : "red",
|
|
114
|
+
format: "svg",
|
|
115
|
+
src : "/assets/pc-mag.svg",
|
|
116
|
+
id : "pc-mag"
|
|
117
|
+
},
|
|
118
|
+
{
|
|
119
|
+
label : "AV\ncomparatives",
|
|
120
|
+
type : "dark",
|
|
121
|
+
format: "svg",
|
|
122
|
+
src : "/assets/av-comparatives.svg",
|
|
123
|
+
id : "av-comparatives"
|
|
124
|
+
},
|
|
125
|
+
{
|
|
126
|
+
label : "Best\nBrands\n2024",
|
|
127
|
+
type : "dark",
|
|
128
|
+
format: "svg",
|
|
129
|
+
src : "/assets/best-brands.svg",
|
|
130
|
+
id : "best-brands"
|
|
131
|
+
},
|
|
132
|
+
{
|
|
133
|
+
label : "PC\nChoice\n2024",
|
|
134
|
+
type : "red",
|
|
135
|
+
format: "svg",
|
|
136
|
+
src : "/assets/pc-mag-2024.svg",
|
|
137
|
+
id : "pc-mag-2024"
|
|
138
|
+
},
|
|
139
|
+
{
|
|
140
|
+
label : "PC MAG\nREADERS'\nCHOICE",
|
|
141
|
+
type : "red",
|
|
142
|
+
format: "svg",
|
|
143
|
+
src : "/assets/pc-mag-readers.svg",
|
|
144
|
+
id : "pc-mag-readers"
|
|
145
|
+
},
|
|
146
|
+
{
|
|
147
|
+
label : "PC\nBusiness\nChoice",
|
|
148
|
+
type : "red",
|
|
149
|
+
format: "svg",
|
|
150
|
+
src : "/assets/pc-mag-business.svg",
|
|
151
|
+
id : "pc-mag-business"
|
|
152
|
+
},
|
|
153
|
+
{
|
|
154
|
+
label : "AV\nTEST\nTOP\nPRODUCT",
|
|
155
|
+
type : "red",
|
|
156
|
+
format: "svg",
|
|
157
|
+
src : "/assets/top-product.svg",
|
|
158
|
+
id : "top-product"
|
|
159
|
+
}
|
|
160
|
+
],
|
|
161
|
+
features: [
|
|
162
|
+
{
|
|
163
|
+
icon : "brain",
|
|
164
|
+
title : "Machine Learning",
|
|
165
|
+
description: "Imagine Bitdefender as a super-smart detective, constantly learning and getting better at spotting bad guys. Just like how you learn from your experiences, Bitdefender learns from millions of cyber threats it encounters every day. It studies their patterns, figures out their tricks, and uses that knowledge to protect your devices from future attacks."
|
|
166
|
+
},
|
|
167
|
+
{
|
|
168
|
+
icon : "chart",
|
|
169
|
+
title : "Behavioral Analysis",
|
|
170
|
+
description: "Bitdefender keeps an eye on how you and your devices normally behave. So, when something unusual happens, like a strange file trying to sneak into your computer or a suspicious website trying to steal your info, Bitdefender sounds the alarm. It's like having a loyal sidekick that never sleeps, always on the lookout for trouble and ready to jump into action to keep you safe."
|
|
171
|
+
}
|
|
172
|
+
]
|
|
173
|
+
};
|
|
174
|
+
|
|
175
|
+
const render = (args) => html`
|
|
176
|
+
<bd-awards-section-light
|
|
177
|
+
.tagline=${args.tagline}
|
|
178
|
+
.headline=${args.headline}
|
|
179
|
+
.subtext=${args.subtext}
|
|
180
|
+
.secretTitle=${args.secretTitle}
|
|
181
|
+
.secretSubtext=${args.secretSubtext}
|
|
182
|
+
.desktopAwards=${args.desktopAwards}
|
|
183
|
+
.features=${args.features}
|
|
184
|
+
></bd-awards-section-light>
|
|
185
|
+
`;
|
|
186
|
+
|
|
187
|
+
|
|
188
|
+
// ─── Default ─────────────────────────────────────────────────────────────────
|
|
189
|
+
|
|
190
|
+
export const Default = {
|
|
191
|
+
name : "Default (Desktop)",
|
|
192
|
+
args : { ...defaultArgs },
|
|
193
|
+
render,
|
|
194
|
+
parameters: {
|
|
195
|
+
viewport: { defaultViewport: "desktop" },
|
|
196
|
+
docs : {
|
|
197
|
+
description: {
|
|
198
|
+
story: "Full desktop layout with all 7 award badges split across two rows (3 top + 4 bottom) and both feature cards."
|
|
199
|
+
}
|
|
200
|
+
}
|
|
201
|
+
}
|
|
202
|
+
};
|
|
203
|
+
|
|
204
|
+
|
|
205
|
+
// ─── Mobile ───────────────────────────────────────────────────────────────────
|
|
206
|
+
|
|
207
|
+
export const Mobile = {
|
|
208
|
+
name : "Mobile (375px)",
|
|
209
|
+
args : { ...defaultArgs },
|
|
210
|
+
render,
|
|
211
|
+
parameters: {
|
|
212
|
+
viewport: { defaultViewport: "mobile1" },
|
|
213
|
+
docs : {
|
|
214
|
+
description: {
|
|
215
|
+
story: "Mobile layout at 375px. The `_narrow` state activates at ≤599px, switching to smaller typography variants (`bd-p kind='small'`, `bd-h as='h4'`) and compact badge sizes."
|
|
216
|
+
}
|
|
217
|
+
}
|
|
218
|
+
}
|
|
219
|
+
};
|
|
220
|
+
|
|
221
|
+
|
|
222
|
+
// ─── Tablet ───────────────────────────────────────────────────────────────────
|
|
223
|
+
|
|
224
|
+
export const Tablet = {
|
|
225
|
+
name : "Tablet (768px)",
|
|
226
|
+
args : { ...defaultArgs },
|
|
227
|
+
render,
|
|
228
|
+
parameters: {
|
|
229
|
+
viewport: { defaultViewport: "tablet" },
|
|
230
|
+
docs : {
|
|
231
|
+
description: {
|
|
232
|
+
story: "Tablet layout at 768px. Desktop typography is used since the viewport exceeds 599px. Feature cards switch to small text at ≤767px."
|
|
233
|
+
}
|
|
234
|
+
}
|
|
235
|
+
}
|
|
236
|
+
};
|
|
237
|
+
|
|
238
|
+
|
|
239
|
+
// ─── Custom text content ──────────────────────────────────────────────────────
|
|
240
|
+
|
|
241
|
+
export const CustomContent = {
|
|
242
|
+
name: "Custom Text Content",
|
|
243
|
+
args: {
|
|
244
|
+
...defaultArgs,
|
|
245
|
+
tagline : "Trusted by Millions Worldwide",
|
|
246
|
+
headline : "Award-winning protection for every device.",
|
|
247
|
+
subtext : "From homes to enterprises, Bitdefender has been recognised by the world's top security testing labs year after year.",
|
|
248
|
+
secretTitle : "Why we win",
|
|
249
|
+
secretSubtext: "Our proprietary AI engine processes over 500 billion queries per day to stay ahead of the most sophisticated threats."
|
|
250
|
+
},
|
|
251
|
+
render,
|
|
252
|
+
parameters: {
|
|
253
|
+
docs: {
|
|
254
|
+
description: {
|
|
255
|
+
story: "All text props replaced with custom values. Use the Controls panel to live-edit any string prop."
|
|
256
|
+
}
|
|
257
|
+
}
|
|
258
|
+
}
|
|
259
|
+
};
|
|
260
|
+
|
|
261
|
+
|
|
262
|
+
// ─── Few badges ───────────────────────────────────────────────────────────────
|
|
263
|
+
|
|
264
|
+
export const FewBadges = {
|
|
265
|
+
name: "Reduced Badge Set (3 badges)",
|
|
266
|
+
args: {
|
|
267
|
+
...defaultArgs,
|
|
268
|
+
desktopAwards: [
|
|
269
|
+
{
|
|
270
|
+
label : "PC MAG\nEDITORS' CHOICE",
|
|
271
|
+
type : "red",
|
|
272
|
+
format: "svg",
|
|
273
|
+
src : "/assets/pc-mag.svg",
|
|
274
|
+
id : "pc-mag"
|
|
275
|
+
},
|
|
276
|
+
{
|
|
277
|
+
label : "AV\ncomparatives",
|
|
278
|
+
type : "dark",
|
|
279
|
+
format: "svg",
|
|
280
|
+
src : "/assets/av-comparatives.svg",
|
|
281
|
+
id : "av-comparatives"
|
|
282
|
+
},
|
|
283
|
+
{
|
|
284
|
+
label : "AV\nTEST\nTOP\nPRODUCT",
|
|
285
|
+
type : "red",
|
|
286
|
+
format: "svg",
|
|
287
|
+
src : "/assets/top-product.svg",
|
|
288
|
+
id : "top-product"
|
|
289
|
+
}
|
|
290
|
+
]
|
|
291
|
+
},
|
|
292
|
+
render,
|
|
293
|
+
parameters: {
|
|
294
|
+
docs: {
|
|
295
|
+
description: {
|
|
296
|
+
story: "Only 3 badges passed. The first row (`slice(0, 3)`) is full, the second row (`slice(3)`) renders empty. Verifies no layout breakage with fewer items."
|
|
297
|
+
}
|
|
298
|
+
}
|
|
299
|
+
}
|
|
300
|
+
};
|
|
301
|
+
|
|
302
|
+
|
|
303
|
+
// ─── Single badge ─────────────────────────────────────────────────────────────
|
|
304
|
+
|
|
305
|
+
export const SingleBadge = {
|
|
306
|
+
name: "Single Badge (edge case)",
|
|
307
|
+
args: {
|
|
308
|
+
...defaultArgs,
|
|
309
|
+
desktopAwards: [
|
|
310
|
+
{
|
|
311
|
+
label : "PC MAG\nEDITORS' CHOICE",
|
|
312
|
+
type : "red",
|
|
313
|
+
format: "svg",
|
|
314
|
+
src : "/assets/pc-mag.svg",
|
|
315
|
+
id : "pc-mag"
|
|
316
|
+
}
|
|
317
|
+
]
|
|
318
|
+
},
|
|
319
|
+
render,
|
|
320
|
+
parameters: {
|
|
321
|
+
docs: {
|
|
322
|
+
description: {
|
|
323
|
+
story: "Minimum edge case: a single badge. Both row slices receive at most one item. Ensures no crash or layout breakage."
|
|
324
|
+
}
|
|
325
|
+
}
|
|
326
|
+
}
|
|
327
|
+
};
|
|
328
|
+
|
|
329
|
+
|
|
330
|
+
// ─── All dark badges ──────────────────────────────────────────────────────────
|
|
331
|
+
|
|
332
|
+
export const AllDarkBadges = {
|
|
333
|
+
name: "All Dark Badges",
|
|
334
|
+
args: {
|
|
335
|
+
...defaultArgs,
|
|
336
|
+
desktopAwards: defaultArgs.desktopAwards.map((a) => ({ ...a, type: "dark" }))
|
|
337
|
+
},
|
|
338
|
+
render,
|
|
339
|
+
parameters: {
|
|
340
|
+
docs: {
|
|
341
|
+
description: {
|
|
342
|
+
story: "All badges set to `type: 'dark'`. Verifies the `.bd-awards-badge--dark` CSS class is applied to every badge in `_renderBadge`."
|
|
343
|
+
}
|
|
344
|
+
}
|
|
345
|
+
}
|
|
346
|
+
};
|
|
347
|
+
|
|
348
|
+
|
|
349
|
+
// ─── All red badges ───────────────────────────────────────────────────────────
|
|
350
|
+
|
|
351
|
+
export const AllRedBadges = {
|
|
352
|
+
name: "All Red Badges",
|
|
353
|
+
args: {
|
|
354
|
+
...defaultArgs,
|
|
355
|
+
desktopAwards: defaultArgs.desktopAwards.map((a) => ({ ...a, type: "red" }))
|
|
356
|
+
},
|
|
357
|
+
render,
|
|
358
|
+
parameters: {
|
|
359
|
+
docs: {
|
|
360
|
+
description: {
|
|
361
|
+
story: "All badges set to `type: 'red'`. The `.bd-awards-badge--dark` class is not applied to any badge."
|
|
362
|
+
}
|
|
363
|
+
}
|
|
364
|
+
}
|
|
365
|
+
};
|
|
366
|
+
|
|
367
|
+
|
|
368
|
+
// ─── Custom features ──────────────────────────────────────────────────────────
|
|
369
|
+
|
|
370
|
+
export const CustomFeatures = {
|
|
371
|
+
name: "Custom Feature Cards",
|
|
372
|
+
args: {
|
|
373
|
+
...defaultArgs,
|
|
374
|
+
features: [
|
|
375
|
+
{
|
|
376
|
+
icon : "brain",
|
|
377
|
+
title : "AI-Powered Threat Detection",
|
|
378
|
+
description: "Our next-generation AI engine analyses over 500 billion security events per day, identifying and neutralising threats before they can cause harm to your system."
|
|
379
|
+
},
|
|
380
|
+
{
|
|
381
|
+
icon : "chart",
|
|
382
|
+
title : "Real-Time Protection",
|
|
383
|
+
description: "Continuous monitoring of all active processes, network connections, and file system changes ensures that threats are caught the moment they appear — with zero performance impact."
|
|
384
|
+
}
|
|
385
|
+
]
|
|
386
|
+
},
|
|
387
|
+
render,
|
|
388
|
+
parameters: {
|
|
389
|
+
docs: {
|
|
390
|
+
description: {
|
|
391
|
+
story: "Custom feature card content. The `icon` field accepts `'brain'` (maps to `/assets/machine-learning.svg`) or `'chart'` (maps to `/assets/analysis.svg`)."
|
|
392
|
+
}
|
|
393
|
+
}
|
|
394
|
+
}
|
|
395
|
+
};
|
|
396
|
+
|
|
397
|
+
|
|
398
|
+
// ─── Small mobile ─────────────────────────────────────────────────────────────
|
|
399
|
+
|
|
400
|
+
export const SmallMobile = {
|
|
401
|
+
name : "Small Mobile (320px)",
|
|
402
|
+
args : { ...defaultArgs },
|
|
403
|
+
render,
|
|
404
|
+
parameters: {
|
|
405
|
+
viewport: {
|
|
406
|
+
viewports: {
|
|
407
|
+
smallMobile: {
|
|
408
|
+
name : "Small Mobile",
|
|
409
|
+
styles: { width: "320px", height: "812px" }
|
|
410
|
+
}
|
|
411
|
+
},
|
|
412
|
+
defaultViewport: "smallMobile"
|
|
413
|
+
},
|
|
414
|
+
docs: {
|
|
415
|
+
description: {
|
|
416
|
+
story: "Smallest supported viewport at 320px. Verifies badge rows, text wrapping, and the laurel SVG icon do not overflow or clip."
|
|
417
|
+
}
|
|
418
|
+
}
|
|
419
|
+
}
|
|
420
|
+
};
|
|
421
|
+
|
|
422
|
+
|
|
423
|
+
// ─── Playground ───────────────────────────────────────────────────────────────
|
|
424
|
+
|
|
425
|
+
export const Playground = {
|
|
426
|
+
name : "Playground",
|
|
427
|
+
args : { ...defaultArgs },
|
|
428
|
+
render,
|
|
429
|
+
parameters: {
|
|
430
|
+
docs: {
|
|
431
|
+
description: {
|
|
432
|
+
story: "Fully interactive story. Use the Controls panel to modify every prop in real time: text content, badge arrays, and feature cards."
|
|
433
|
+
}
|
|
434
|
+
}
|
|
435
|
+
}
|
|
436
|
+
};
|
|
@@ -0,0 +1,221 @@
|
|
|
1
|
+
import { html } from 'lit';
|
|
2
|
+
import './dropdown.js';
|
|
3
|
+
|
|
4
|
+
export default {
|
|
5
|
+
title : 'Components/Dropdown',
|
|
6
|
+
tags : ['autodocs'],
|
|
7
|
+
parameters: {
|
|
8
|
+
docs: {
|
|
9
|
+
description: {
|
|
10
|
+
component: `
|
|
11
|
+
**CustomDropdown** is a Lit form select component with label, validation states, tooltip, and size variants.
|
|
12
|
+
|
|
13
|
+
### Usage
|
|
14
|
+
\`\`\`html
|
|
15
|
+
<bd-custom-dropdown
|
|
16
|
+
label="Select country"
|
|
17
|
+
.options="${['Romania', 'Germany', 'France']}"
|
|
18
|
+
kind="md"
|
|
19
|
+
required
|
|
20
|
+
></bd-custom-dropdown>
|
|
21
|
+
\`\`\`
|
|
22
|
+
|
|
23
|
+
### States
|
|
24
|
+
| State | Prop | CSS Class |
|
|
25
|
+
|---|---|---|
|
|
26
|
+
| Default | — | — |
|
|
27
|
+
| Invalid | \`invalid\` | \`form-input--error\` |
|
|
28
|
+
| Valid | \`validated\` | \`form-input--success\` |
|
|
29
|
+
| Disabled | \`disabled\` | \`form-input--disabled\` |
|
|
30
|
+
|
|
31
|
+
### Size Variants
|
|
32
|
+
| Kind | Input Class | Label Class |
|
|
33
|
+
|---|---|---|
|
|
34
|
+
| \`sm\` | \`input-sm\` | \`label-sm\` |
|
|
35
|
+
| \`md\` | \`input-md\` | \`label-md\` |
|
|
36
|
+
| \`lg\` | \`input-lg\` | \`label-lg\` |
|
|
37
|
+
|
|
38
|
+
### Notes
|
|
39
|
+
- Options can be passed as an Array or a JSON string
|
|
40
|
+
- First option is auto-selected by default
|
|
41
|
+
- Tooltip/help text is only rendered when \`tooltip\` prop is non-empty
|
|
42
|
+
`
|
|
43
|
+
}
|
|
44
|
+
}
|
|
45
|
+
},
|
|
46
|
+
argTypes: {
|
|
47
|
+
label: {
|
|
48
|
+
control : 'text',
|
|
49
|
+
description: 'Label text shown above the select',
|
|
50
|
+
table : { type: { summary: 'string' }, defaultValue: { summary: 'Select an option' }, category: 'Content' }
|
|
51
|
+
},
|
|
52
|
+
options: {
|
|
53
|
+
control : 'object',
|
|
54
|
+
description: 'Array of option strings. Can also be passed as a JSON string.',
|
|
55
|
+
table : { type: { summary: 'string[]' }, defaultValue: { summary: '[]' }, category: 'Content' }
|
|
56
|
+
},
|
|
57
|
+
kind: {
|
|
58
|
+
control : { type: 'select' },
|
|
59
|
+
options : ['sm', 'md', 'lg'],
|
|
60
|
+
description: 'Size variant controlling input and label CSS classes',
|
|
61
|
+
table : { type: { summary: "'sm'|'md'|'lg'" }, defaultValue: { summary: 'md' }, category: 'Appearance' }
|
|
62
|
+
},
|
|
63
|
+
required: {
|
|
64
|
+
control : 'boolean',
|
|
65
|
+
description: 'Adds a required asterisk to the label and `required` attribute to the select',
|
|
66
|
+
table : { type: { summary: 'boolean' }, defaultValue: { summary: 'false' }, category: 'Validation' }
|
|
67
|
+
},
|
|
68
|
+
invalid: {
|
|
69
|
+
control : 'boolean',
|
|
70
|
+
description: 'Applies error styling and `form-help-text--error` to the tooltip',
|
|
71
|
+
table : { type: { summary: 'boolean' }, defaultValue: { summary: 'false' }, category: 'Validation' }
|
|
72
|
+
},
|
|
73
|
+
validated: {
|
|
74
|
+
control : 'boolean',
|
|
75
|
+
description: 'Applies success styling and `form-help-text--success` to the tooltip',
|
|
76
|
+
table : { type: { summary: 'boolean' }, defaultValue: { summary: 'false' }, category: 'Validation' }
|
|
77
|
+
},
|
|
78
|
+
disabled: {
|
|
79
|
+
control : 'boolean',
|
|
80
|
+
description: 'Disables the select element',
|
|
81
|
+
table : { type: { summary: 'boolean' }, defaultValue: { summary: 'false' }, category: 'State' }
|
|
82
|
+
},
|
|
83
|
+
tooltip: {
|
|
84
|
+
control : 'text',
|
|
85
|
+
description: 'Help text shown below the select. Empty string hides it.',
|
|
86
|
+
table : { type: { summary: 'string' }, defaultValue: { summary: '' }, category: 'Content' }
|
|
87
|
+
}
|
|
88
|
+
}
|
|
89
|
+
};
|
|
90
|
+
|
|
91
|
+
const defaultOptions = ['Select a plan', 'Antivirus Plus', 'Total Security', 'Premium Security'];
|
|
92
|
+
|
|
93
|
+
const render = (args) => html`
|
|
94
|
+
<bd-custom-dropdown
|
|
95
|
+
label="${args.label}"
|
|
96
|
+
.options="${args.options}"
|
|
97
|
+
kind="${args.kind}"
|
|
98
|
+
tooltip="${args.tooltip}"
|
|
99
|
+
?required="${args.required}"
|
|
100
|
+
?invalid="${args.invalid}"
|
|
101
|
+
?validated="${args.validated}"
|
|
102
|
+
?disabled="${args.disabled}"
|
|
103
|
+
></bd-custom-dropdown>
|
|
104
|
+
`;
|
|
105
|
+
|
|
106
|
+
const defaultArgs = {
|
|
107
|
+
label : 'Select a plan', options : defaultOptions,
|
|
108
|
+
kind : 'md', tooltip : '', required : false,
|
|
109
|
+
invalid : false, validated: false, disabled : false
|
|
110
|
+
};
|
|
111
|
+
|
|
112
|
+
// ─── Stories ───────────────────────────────────────────────────────────────
|
|
113
|
+
|
|
114
|
+
export const Default = {
|
|
115
|
+
name : 'Default',
|
|
116
|
+
render: () => html`
|
|
117
|
+
<bd-custom-dropdown label="Select a plan" .options="${defaultOptions}" kind="md"></bd-custom-dropdown>
|
|
118
|
+
`,
|
|
119
|
+
parameters: { docs: { description: { story: 'Default dropdown with no validation state and no tooltip.' } } }
|
|
120
|
+
};
|
|
121
|
+
|
|
122
|
+
export const AllSizes = {
|
|
123
|
+
name : 'All Sizes',
|
|
124
|
+
render: () => html`
|
|
125
|
+
<div style="display:flex; flex-direction:column; gap:20px; max-width:400px;">
|
|
126
|
+
<bd-custom-dropdown label="Small" .options="${defaultOptions}" kind="sm"></bd-custom-dropdown>
|
|
127
|
+
<bd-custom-dropdown label="Medium" .options="${defaultOptions}" kind="md"></bd-custom-dropdown>
|
|
128
|
+
<bd-custom-dropdown label="Large" .options="${defaultOptions}" kind="lg"></bd-custom-dropdown>
|
|
129
|
+
</div>
|
|
130
|
+
`,
|
|
131
|
+
parameters: { docs: { description: { story: 'All three size variants stacked for comparison.' } } }
|
|
132
|
+
};
|
|
133
|
+
|
|
134
|
+
export const Required = {
|
|
135
|
+
name : 'Required',
|
|
136
|
+
render: () => html`
|
|
137
|
+
<bd-custom-dropdown label="Select a plan" .options="${defaultOptions}" kind="md" required></bd-custom-dropdown>
|
|
138
|
+
`,
|
|
139
|
+
parameters: { docs: { description: { story: 'Required field — shows a `*` after the label.' } } }
|
|
140
|
+
};
|
|
141
|
+
|
|
142
|
+
export const WithTooltip = {
|
|
143
|
+
name : 'With Tooltip / Help Text',
|
|
144
|
+
render: () => html`
|
|
145
|
+
<bd-custom-dropdown
|
|
146
|
+
label="Select a plan"
|
|
147
|
+
.options="${defaultOptions}"
|
|
148
|
+
kind="md"
|
|
149
|
+
tooltip="Choose the plan that best fits your needs."
|
|
150
|
+
></bd-custom-dropdown>
|
|
151
|
+
`,
|
|
152
|
+
parameters: { docs: { description: { story: 'Help text rendered below the select via the `tooltip` prop.' } } }
|
|
153
|
+
};
|
|
154
|
+
|
|
155
|
+
export const Invalid = {
|
|
156
|
+
name : 'Invalid State',
|
|
157
|
+
render: () => html`
|
|
158
|
+
<bd-custom-dropdown
|
|
159
|
+
label="Select a plan"
|
|
160
|
+
.options="${defaultOptions}"
|
|
161
|
+
kind="md"
|
|
162
|
+
invalid
|
|
163
|
+
tooltip="Please select a valid option."
|
|
164
|
+
></bd-custom-dropdown>
|
|
165
|
+
`,
|
|
166
|
+
parameters: { docs: { description: { story: 'Error state — applies `form-input--error` and `form-help-text--error` classes.' } } }
|
|
167
|
+
};
|
|
168
|
+
|
|
169
|
+
export const Validated = {
|
|
170
|
+
name : 'Validated State',
|
|
171
|
+
render: () => html`
|
|
172
|
+
<bd-custom-dropdown
|
|
173
|
+
label="Select a plan"
|
|
174
|
+
.options="${defaultOptions}"
|
|
175
|
+
kind="md"
|
|
176
|
+
validated
|
|
177
|
+
tooltip="Great choice!"
|
|
178
|
+
></bd-custom-dropdown>
|
|
179
|
+
`,
|
|
180
|
+
parameters: { docs: { description: { story: 'Success state — applies `form-input--success` and `form-help-text--success` classes.' } } }
|
|
181
|
+
};
|
|
182
|
+
|
|
183
|
+
export const Disabled = {
|
|
184
|
+
name : 'Disabled',
|
|
185
|
+
render: () => html`
|
|
186
|
+
<bd-custom-dropdown label="Select a plan" .options="${defaultOptions}" kind="md" disabled></bd-custom-dropdown>
|
|
187
|
+
`,
|
|
188
|
+
parameters: { docs: { description: { story: 'Disabled select — applies `form-input--disabled` class.' } } }
|
|
189
|
+
};
|
|
190
|
+
|
|
191
|
+
export const AllStates = {
|
|
192
|
+
name : 'All Validation States',
|
|
193
|
+
render: () => html`
|
|
194
|
+
<div style="display:flex; flex-direction:column; gap:20px; max-width:400px;">
|
|
195
|
+
<bd-custom-dropdown label="Default" .options="${defaultOptions}" kind="md" tooltip="Default help text."></bd-custom-dropdown>
|
|
196
|
+
<bd-custom-dropdown label="Invalid" .options="${defaultOptions}" kind="md" invalid tooltip="This field has an error."></bd-custom-dropdown>
|
|
197
|
+
<bd-custom-dropdown label="Validated" .options="${defaultOptions}" kind="md" validated tooltip="Looks good!"></bd-custom-dropdown>
|
|
198
|
+
<bd-custom-dropdown label="Disabled" .options="${defaultOptions}" kind="md" disabled></bd-custom-dropdown>
|
|
199
|
+
</div>
|
|
200
|
+
`,
|
|
201
|
+
parameters: { docs: { description: { story: 'All four states stacked: default, invalid, validated, disabled.' } } }
|
|
202
|
+
};
|
|
203
|
+
|
|
204
|
+
export const ManyOptions = {
|
|
205
|
+
name : 'Many Options',
|
|
206
|
+
render: () => html`
|
|
207
|
+
<bd-custom-dropdown
|
|
208
|
+
label="Select your country"
|
|
209
|
+
.options="${['Select country', 'Romania', 'Germany', 'France', 'Spain', 'Italy', 'Netherlands', 'Belgium', 'Poland', 'Sweden']}"
|
|
210
|
+
kind="md"
|
|
211
|
+
></bd-custom-dropdown>
|
|
212
|
+
`,
|
|
213
|
+
parameters: { docs: { description: { story: 'Dropdown with 10 options. Tests scroll behavior of the native select.' } } }
|
|
214
|
+
};
|
|
215
|
+
|
|
216
|
+
export const Playground = {
|
|
217
|
+
name : '🛝 Playground',
|
|
218
|
+
args : { ...defaultArgs },
|
|
219
|
+
render,
|
|
220
|
+
parameters: { docs: { description: { story: 'Fully interactive playground. Adjust all props via Controls.' } } }
|
|
221
|
+
};
|