@repobit/dex-system-design 0.23.71 → 0.23.73
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 +18 -0
- package/package.json +6 -4
- package/src/components/cards/card.css.js +2 -0
- package/src/components/features-tab/features-tab.css.js +104 -0
- package/src/components/features-tab/features-tab.js +84 -0
- package/src/components/features-tab/features-tab.stories.js +443 -0
- package/src/components/tabs/tabs.js +3 -3
- package/src/components/tabsComponentFamily/tabsComponentFamily.css.js +181 -0
- package/src/components/tabsComponentFamily/tabsComponentFamily.js +180 -0
- package/src/components/tabsComponentFamily/tabsComponentFamily.stories.js +319 -0
|
@@ -0,0 +1,443 @@
|
|
|
1
|
+
import { html } from 'lit';
|
|
2
|
+
import '../button/button.js';
|
|
3
|
+
import '../heading/heading.js';
|
|
4
|
+
import '../paragraph/paragraph.js';
|
|
5
|
+
import '../tabs/tabs.js';
|
|
6
|
+
import './features-tab.js';
|
|
7
|
+
|
|
8
|
+
export default {
|
|
9
|
+
title : 'Components/FeaturesTab',
|
|
10
|
+
tags : ['autodocs'],
|
|
11
|
+
parameters: {
|
|
12
|
+
layout: 'fullscreen',
|
|
13
|
+
docs : {
|
|
14
|
+
description: {
|
|
15
|
+
component: `
|
|
16
|
+
**FeaturesTab** — layout component cu conținut stânga (heading + text + CTA) și imagine dreapta.
|
|
17
|
+
Poate fi folosit standalone sau în interiorul unui \`bd-tab-panel\` din \`bd-tabs\`.
|
|
18
|
+
|
|
19
|
+
### Usage standalone
|
|
20
|
+
\`\`\`html
|
|
21
|
+
<bd-features-tab
|
|
22
|
+
image-src="/assets/image.png"
|
|
23
|
+
image-alt="Description"
|
|
24
|
+
cta-label="Learn more"
|
|
25
|
+
cta-href="#"
|
|
26
|
+
cta-kind="danger"
|
|
27
|
+
>
|
|
28
|
+
<bd-h as="h4" slot="heading" color="var(--color-blue-500)">Your heading.</bd-h>
|
|
29
|
+
<div slot="content">
|
|
30
|
+
<bd-p kind="regular">Your content here.</bd-p>
|
|
31
|
+
</div>
|
|
32
|
+
</bd-features-tab>
|
|
33
|
+
\`\`\`
|
|
34
|
+
|
|
35
|
+
### Usage cu bd-tabs
|
|
36
|
+
\`\`\`html
|
|
37
|
+
<bd-tabs title="..." highlight-text="..." subtitle="...">
|
|
38
|
+
<bd-tab-panel title="Admin">
|
|
39
|
+
<bd-features-tab image-src="/assets/image.png" cta-label="Stay worry free" cta-href="#">
|
|
40
|
+
<bd-h as="h4" slot="heading" color="var(--color-blue-500)">Your heading.</bd-h>
|
|
41
|
+
<div slot="content">
|
|
42
|
+
<bd-p kind="regular">Your content here.</bd-p>
|
|
43
|
+
</div>
|
|
44
|
+
</bd-features-tab>
|
|
45
|
+
</bd-tab-panel>
|
|
46
|
+
</bd-tabs>
|
|
47
|
+
\`\`\`
|
|
48
|
+
|
|
49
|
+
### Atribute
|
|
50
|
+
| Atribut | Tip | Default | Descriere |
|
|
51
|
+
|---|---|---|---|
|
|
52
|
+
| \`image-src\` | String | — | Imaginea (fallback când nu există slot="image") |
|
|
53
|
+
| \`image-alt\` | String | — | Alt text imagine |
|
|
54
|
+
| \`cta-label\` | String | — | Text buton CTA |
|
|
55
|
+
| \`cta-href\` | String | \`#\` | Href buton CTA |
|
|
56
|
+
| \`cta-kind\` | String | \`danger\` | Kind buton |
|
|
57
|
+
| \`cta-size\` | String | \`md\` | Size buton |
|
|
58
|
+
| \`reverse\` | Boolean | \`false\` | Imagine stânga, conținut dreapta |
|
|
59
|
+
|
|
60
|
+
### Slot-uri
|
|
61
|
+
| Slot | Descriere |
|
|
62
|
+
|---|---|
|
|
63
|
+
| \`heading\` | Heading custom |
|
|
64
|
+
| \`content\` | Conținut text |
|
|
65
|
+
| \`image\` | Imagine custom — suprascrie \`image-src\` |
|
|
66
|
+
| \`cta\` | Buton custom — suprascrie \`cta-label\` |
|
|
67
|
+
`
|
|
68
|
+
}
|
|
69
|
+
}
|
|
70
|
+
},
|
|
71
|
+
argTypes: {
|
|
72
|
+
imageSrc: {
|
|
73
|
+
control : 'text',
|
|
74
|
+
description: 'URL imaginea',
|
|
75
|
+
table : { type: { summary: 'string' }, category: 'FeaturesTab' }
|
|
76
|
+
},
|
|
77
|
+
ctaLabel: {
|
|
78
|
+
control : 'text',
|
|
79
|
+
description: 'Text buton CTA',
|
|
80
|
+
table : { type: { summary: 'string' }, category: 'FeaturesTab' }
|
|
81
|
+
},
|
|
82
|
+
ctaKind: {
|
|
83
|
+
control : { type: 'select' },
|
|
84
|
+
options : ['primary', 'danger', 'secondary', 'outline'],
|
|
85
|
+
description: 'Kind buton CTA',
|
|
86
|
+
table : { type: { summary: 'string' }, defaultValue: { summary: 'danger' }, category: 'FeaturesTab' }
|
|
87
|
+
},
|
|
88
|
+
reverse: {
|
|
89
|
+
control : 'boolean',
|
|
90
|
+
description: 'Inversează layout — imagine stânga, conținut dreapta',
|
|
91
|
+
table : { type: { summary: 'boolean' }, defaultValue: { summary: 'false' }, category: 'FeaturesTab' }
|
|
92
|
+
}
|
|
93
|
+
}
|
|
94
|
+
};
|
|
95
|
+
|
|
96
|
+
const panels = [
|
|
97
|
+
{
|
|
98
|
+
tab : 'Admin',
|
|
99
|
+
imageSrc: '/assets/tabs-img1.png',
|
|
100
|
+
imageAlt: 'Admin using laptop',
|
|
101
|
+
heading : 'Keep your loved ones protected.',
|
|
102
|
+
content : 'As the Subscription Manager, you can oversee and adjust online safety through an intuitive dashboard. Effortlessly manage settings, monitor real-time alerts, and maintain control without compromising simplicity or security.',
|
|
103
|
+
ctaLabel: 'Stay worry free',
|
|
104
|
+
ctaHref : '#admin'
|
|
105
|
+
},
|
|
106
|
+
{
|
|
107
|
+
tab : 'Adult',
|
|
108
|
+
imageSrc: '/assets/tabs-img2.png',
|
|
109
|
+
imageAlt: 'Adult protection',
|
|
110
|
+
heading : 'Stay safe online, every day.',
|
|
111
|
+
content : 'Advanced privacy and security tools tailored for adults. Browse safely, protect your identity, and keep your data private at all times.',
|
|
112
|
+
ctaLabel: 'Learn more',
|
|
113
|
+
ctaHref : '#adult'
|
|
114
|
+
},
|
|
115
|
+
{
|
|
116
|
+
tab : 'Teen',
|
|
117
|
+
imageSrc: '/assets/tabs-img3.png',
|
|
118
|
+
imageAlt: 'Teen protection',
|
|
119
|
+
heading : 'Safe browsing for teens.',
|
|
120
|
+
content : 'Give teens the freedom to explore online while keeping them protected from inappropriate content, cyberbullying, and online threats.',
|
|
121
|
+
ctaLabel: 'Explore features',
|
|
122
|
+
ctaHref : '#teen'
|
|
123
|
+
},
|
|
124
|
+
{
|
|
125
|
+
tab : 'Child',
|
|
126
|
+
imageSrc: '/assets/tabs-img3.png',
|
|
127
|
+
imageAlt: 'Child protection',
|
|
128
|
+
heading : 'A safe digital world for children.',
|
|
129
|
+
content : 'Comprehensive parental controls and content filtering ensure your child has a safe, age-appropriate online experience every time they connect.',
|
|
130
|
+
ctaLabel: 'Protect your child',
|
|
131
|
+
ctaHref : '#child'
|
|
132
|
+
}
|
|
133
|
+
];
|
|
134
|
+
|
|
135
|
+
// ─── Stories standalone ────────────────────────────────────────────────────────
|
|
136
|
+
|
|
137
|
+
export const Default = {
|
|
138
|
+
name : 'Standalone — Default (imagine dreapta)',
|
|
139
|
+
render: () => html`
|
|
140
|
+
<bd-features-tab
|
|
141
|
+
image-src="${panels[0].imageSrc}"
|
|
142
|
+
image-alt="${panels[0].imageAlt}"
|
|
143
|
+
cta-label="${panels[0].ctaLabel}"
|
|
144
|
+
cta-href="${panels[0].ctaHref}"
|
|
145
|
+
cta-kind="danger"
|
|
146
|
+
>
|
|
147
|
+
<bd-h as="h4" slot="heading" color="var(--color-blue-500)">${panels[0].heading}</bd-h>
|
|
148
|
+
<div slot="content">
|
|
149
|
+
<bd-p kind="regular">${panels[0].content}</bd-p>
|
|
150
|
+
</div>
|
|
151
|
+
</bd-features-tab>
|
|
152
|
+
`,
|
|
153
|
+
parameters: { docs: { description: { story: 'Standalone, fără bd-tabs — conținut stânga, imagine dreapta (default).' } } }
|
|
154
|
+
};
|
|
155
|
+
|
|
156
|
+
export const StandaloneReverse = {
|
|
157
|
+
name : 'Standalone — Reverse (imagine stânga)',
|
|
158
|
+
render: () => html`
|
|
159
|
+
<bd-features-tab
|
|
160
|
+
image-src="${panels[0].imageSrc}"
|
|
161
|
+
image-alt="${panels[0].imageAlt}"
|
|
162
|
+
cta-label="${panels[0].ctaLabel}"
|
|
163
|
+
cta-href="${panels[0].ctaHref}"
|
|
164
|
+
cta-kind="danger"
|
|
165
|
+
reverse
|
|
166
|
+
>
|
|
167
|
+
<bd-h as="h4" slot="heading" color="var(--color-blue-500)">${panels[0].heading}</bd-h>
|
|
168
|
+
<div slot="content">
|
|
169
|
+
<bd-p kind="regular">${panels[0].content}</bd-p>
|
|
170
|
+
</div>
|
|
171
|
+
</bd-features-tab>
|
|
172
|
+
`,
|
|
173
|
+
parameters: { docs: { description: { story: 'Standalone cu `reverse` — imagine stânga, conținut dreapta.' } } }
|
|
174
|
+
};
|
|
175
|
+
|
|
176
|
+
export const StandaloneAlternating = {
|
|
177
|
+
name : 'Standalone — Alternating Layout',
|
|
178
|
+
render: () => html`
|
|
179
|
+
<div style="display:flex;flex-direction:column;gap:var(--spacing-64);">
|
|
180
|
+
${panels.map((p, i) => html`
|
|
181
|
+
<bd-features-tab
|
|
182
|
+
image-src="${p.imageSrc}"
|
|
183
|
+
image-alt="${p.imageAlt}"
|
|
184
|
+
cta-label="${p.ctaLabel}"
|
|
185
|
+
cta-href="${p.ctaHref}"
|
|
186
|
+
cta-kind="danger"
|
|
187
|
+
?reverse=${i % 2 !== 0}
|
|
188
|
+
>
|
|
189
|
+
<bd-h as="h4" slot="heading" color="var(--color-blue-500)">${p.heading}</bd-h>
|
|
190
|
+
<div slot="content">
|
|
191
|
+
<bd-p kind="regular">${p.content}</bd-p>
|
|
192
|
+
</div>
|
|
193
|
+
</bd-features-tab>
|
|
194
|
+
`)}
|
|
195
|
+
</div>
|
|
196
|
+
`,
|
|
197
|
+
parameters: { docs: { description: { story: 'Layout alternant — par: imagine dreapta, impar: imagine stânga.' } } }
|
|
198
|
+
};
|
|
199
|
+
|
|
200
|
+
export const StandaloneWithImageSlot = {
|
|
201
|
+
name : 'Standalone — Cu slot="image"',
|
|
202
|
+
render: () => html`
|
|
203
|
+
<bd-features-tab
|
|
204
|
+
cta-label="${panels[0].ctaLabel}"
|
|
205
|
+
cta-href="${panels[0].ctaHref}"
|
|
206
|
+
cta-kind="danger"
|
|
207
|
+
>
|
|
208
|
+
<bd-h as="h4" slot="heading" color="var(--color-blue-500)">${panels[0].heading}</bd-h>
|
|
209
|
+
<div slot="content">
|
|
210
|
+
<bd-p kind="regular">${panels[0].content}</bd-p>
|
|
211
|
+
</div>
|
|
212
|
+
<picture slot="image" style="display:block;">
|
|
213
|
+
<source type="image/webp" srcset="${panels[0].imageSrc}?width=2000&format=webp&optimize=medium" media="(min-width: 600px)" />
|
|
214
|
+
<source type="image/webp" srcset="${panels[0].imageSrc}?width=750&format=webp&optimize=medium" />
|
|
215
|
+
<img
|
|
216
|
+
src="${panels[0].imageSrc}"
|
|
217
|
+
alt="${panels[0].imageAlt}"
|
|
218
|
+
loading="lazy"
|
|
219
|
+
style="width:100%;max-width:520px;height:auto;border-radius:var(--radius-lg,16px);object-fit:cover;display:block;"
|
|
220
|
+
/>
|
|
221
|
+
</picture>
|
|
222
|
+
</bd-features-tab>
|
|
223
|
+
`,
|
|
224
|
+
parameters: { docs: { description: { story: 'Standalone cu slot="image" — element picture cu srcset webp.' } } }
|
|
225
|
+
};
|
|
226
|
+
|
|
227
|
+
export const StandaloneNoCTA = {
|
|
228
|
+
name : 'Standalone — Fără CTA',
|
|
229
|
+
render: () => html`
|
|
230
|
+
<bd-features-tab
|
|
231
|
+
image-src="${panels[1].imageSrc}"
|
|
232
|
+
image-alt="${panels[1].imageAlt}"
|
|
233
|
+
>
|
|
234
|
+
<bd-h as="h4" slot="heading" color="var(--color-blue-500)">${panels[1].heading}</bd-h>
|
|
235
|
+
<div slot="content">
|
|
236
|
+
<bd-p kind="regular">${panels[1].content}</bd-p>
|
|
237
|
+
</div>
|
|
238
|
+
</bd-features-tab>
|
|
239
|
+
`,
|
|
240
|
+
parameters: { docs: { description: { story: 'Standalone fără buton CTA.' } } }
|
|
241
|
+
};
|
|
242
|
+
|
|
243
|
+
export const StandaloneMobileView = {
|
|
244
|
+
name : 'Standalone — Mobile View (375px)',
|
|
245
|
+
parameters: { viewport: { defaultViewport: 'mobile1' } },
|
|
246
|
+
render : () => html`
|
|
247
|
+
<bd-features-tab
|
|
248
|
+
image-src="${panels[0].imageSrc}"
|
|
249
|
+
image-alt="${panels[0].imageAlt}"
|
|
250
|
+
cta-label="${panels[0].ctaLabel}"
|
|
251
|
+
cta-href="${panels[0].ctaHref}"
|
|
252
|
+
cta-kind="danger"
|
|
253
|
+
>
|
|
254
|
+
<bd-h as="h4" slot="heading" color="var(--color-blue-500)">${panels[0].heading}</bd-h>
|
|
255
|
+
<div slot="content">
|
|
256
|
+
<bd-p kind="regular">${panels[0].content}</bd-p>
|
|
257
|
+
</div>
|
|
258
|
+
</bd-features-tab>
|
|
259
|
+
`
|
|
260
|
+
};
|
|
261
|
+
|
|
262
|
+
// ─── Stories cu bd-tabs ────────────────────────────────────────────────────────
|
|
263
|
+
|
|
264
|
+
export const WithTabs = {
|
|
265
|
+
name : 'Cu bd-tabs — Default',
|
|
266
|
+
render: () => html`
|
|
267
|
+
<bd-tabs
|
|
268
|
+
title="Customized online protection for each family member – Smart, Private & Safe"
|
|
269
|
+
highlight-text="family member"
|
|
270
|
+
subtitle="Your family is unique and so should be your online security."
|
|
271
|
+
>
|
|
272
|
+
${panels.map(p => html`
|
|
273
|
+
<bd-tab-panel title="${p.tab}">
|
|
274
|
+
<bd-features-tab
|
|
275
|
+
image-src="${p.imageSrc}"
|
|
276
|
+
image-alt="${p.imageAlt}"
|
|
277
|
+
cta-label="${p.ctaLabel}"
|
|
278
|
+
cta-href="${p.ctaHref}"
|
|
279
|
+
cta-kind="danger"
|
|
280
|
+
>
|
|
281
|
+
<bd-h as="h4" slot="heading" color="var(--color-blue-500)">${p.heading}</bd-h>
|
|
282
|
+
<div slot="content">
|
|
283
|
+
<bd-p kind="regular">${p.content}</bd-p>
|
|
284
|
+
</div>
|
|
285
|
+
</bd-features-tab>
|
|
286
|
+
</bd-tab-panel>
|
|
287
|
+
`)}
|
|
288
|
+
</bd-tabs>
|
|
289
|
+
`,
|
|
290
|
+
parameters: { docs: { description: { story: 'bd-features-tab în bd-tabs — 4 tab-uri, conținut stânga, imagine dreapta.' } } }
|
|
291
|
+
};
|
|
292
|
+
|
|
293
|
+
export const WithTabsReverse = {
|
|
294
|
+
name : 'Cu bd-tabs — Reverse',
|
|
295
|
+
render: () => html`
|
|
296
|
+
<bd-tabs
|
|
297
|
+
title="Customized online protection for each family member – Smart, Private & Safe"
|
|
298
|
+
highlight-text="family member"
|
|
299
|
+
subtitle="Your family is unique and so should be your online security."
|
|
300
|
+
>
|
|
301
|
+
${panels.map(p => html`
|
|
302
|
+
<bd-tab-panel title="${p.tab}">
|
|
303
|
+
<bd-features-tab
|
|
304
|
+
image-src="${p.imageSrc}"
|
|
305
|
+
image-alt="${p.imageAlt}"
|
|
306
|
+
cta-label="${p.ctaLabel}"
|
|
307
|
+
cta-href="${p.ctaHref}"
|
|
308
|
+
cta-kind="danger"
|
|
309
|
+
reverse
|
|
310
|
+
>
|
|
311
|
+
<bd-h as="h4" slot="heading" color="var(--color-blue-500)">${p.heading}</bd-h>
|
|
312
|
+
<div slot="content">
|
|
313
|
+
<bd-p kind="regular">${p.content}</bd-p>
|
|
314
|
+
</div>
|
|
315
|
+
</bd-features-tab>
|
|
316
|
+
</bd-tab-panel>
|
|
317
|
+
`)}
|
|
318
|
+
</bd-tabs>
|
|
319
|
+
`,
|
|
320
|
+
parameters: { docs: { description: { story: 'bd-features-tab cu `reverse` în bd-tabs — imagine stânga, conținut dreapta.' } } }
|
|
321
|
+
};
|
|
322
|
+
|
|
323
|
+
export const WithTabsImageSlot = {
|
|
324
|
+
name : 'Cu bd-tabs — slot="image"',
|
|
325
|
+
render: () => html`
|
|
326
|
+
<bd-tabs
|
|
327
|
+
title="Customized online protection for each family member – Smart, Private & Safe"
|
|
328
|
+
highlight-text="family member"
|
|
329
|
+
subtitle="Your family is unique and so should be your online security."
|
|
330
|
+
>
|
|
331
|
+
${panels.map(p => html`
|
|
332
|
+
<bd-tab-panel title="${p.tab}">
|
|
333
|
+
<bd-features-tab
|
|
334
|
+
cta-label="${p.ctaLabel}"
|
|
335
|
+
cta-href="${p.ctaHref}"
|
|
336
|
+
cta-kind="danger"
|
|
337
|
+
>
|
|
338
|
+
<bd-h as="h4" slot="heading" color="var(--color-blue-500)">${p.heading}</bd-h>
|
|
339
|
+
<div slot="content">
|
|
340
|
+
<bd-p kind="regular">${p.content}</bd-p>
|
|
341
|
+
</div>
|
|
342
|
+
<picture slot="image" style="display:block;">
|
|
343
|
+
<source type="image/webp" srcset="${p.imageSrc}?width=2000&format=webp&optimize=medium" media="(min-width: 600px)" />
|
|
344
|
+
<source type="image/webp" srcset="${p.imageSrc}?width=750&format=webp&optimize=medium" />
|
|
345
|
+
<img
|
|
346
|
+
src="${p.imageSrc}"
|
|
347
|
+
alt="${p.imageAlt}"
|
|
348
|
+
loading="lazy"
|
|
349
|
+
style="width:100%;max-width:520px;height:auto;border-radius:var(--radius-lg,16px);object-fit:cover;display:block;"
|
|
350
|
+
/>
|
|
351
|
+
</picture>
|
|
352
|
+
</bd-features-tab>
|
|
353
|
+
</bd-tab-panel>
|
|
354
|
+
`)}
|
|
355
|
+
</bd-tabs>
|
|
356
|
+
`,
|
|
357
|
+
parameters: { docs: { description: { story: 'bd-features-tab cu slot="image" picture element în bd-tabs.' } } }
|
|
358
|
+
};
|
|
359
|
+
|
|
360
|
+
export const WithTabsBlueBg = {
|
|
361
|
+
name : 'Cu bd-tabs — Blue Background',
|
|
362
|
+
render: () => html`
|
|
363
|
+
<bd-tabs
|
|
364
|
+
bg-blue
|
|
365
|
+
title="Customized online protection for each family member – Smart, Private & Safe"
|
|
366
|
+
highlight-text="family member"
|
|
367
|
+
subtitle="Your family is unique and so should be your online security."
|
|
368
|
+
>
|
|
369
|
+
${panels.map(p => html`
|
|
370
|
+
<bd-tab-panel title="${p.tab}">
|
|
371
|
+
<bd-features-tab
|
|
372
|
+
image-src="${p.imageSrc}"
|
|
373
|
+
image-alt="${p.imageAlt}"
|
|
374
|
+
cta-label="${p.ctaLabel}"
|
|
375
|
+
cta-href="${p.ctaHref}"
|
|
376
|
+
cta-kind="danger"
|
|
377
|
+
>
|
|
378
|
+
<bd-h as="h4" slot="heading" color="var(--color-blue-500)">${p.heading}</bd-h>
|
|
379
|
+
<div slot="content">
|
|
380
|
+
<bd-p kind="regular">${p.content}</bd-p>
|
|
381
|
+
</div>
|
|
382
|
+
</bd-features-tab>
|
|
383
|
+
</bd-tab-panel>
|
|
384
|
+
`)}
|
|
385
|
+
</bd-tabs>
|
|
386
|
+
`,
|
|
387
|
+
parameters: { docs: { description: { story: 'bd-tabs cu `bg-blue` — fundal albastru deschis.' } } }
|
|
388
|
+
};
|
|
389
|
+
|
|
390
|
+
export const WithTabsMobile = {
|
|
391
|
+
name : 'Cu bd-tabs — Mobile View (375px)',
|
|
392
|
+
parameters: { viewport: { defaultViewport: 'mobile1' } },
|
|
393
|
+
render : () => html`
|
|
394
|
+
<bd-tabs
|
|
395
|
+
title="Customized online protection for each family member"
|
|
396
|
+
highlight-text="family member"
|
|
397
|
+
subtitle="Your family is unique and so should be your online security."
|
|
398
|
+
>
|
|
399
|
+
${panels.map(p => html`
|
|
400
|
+
<bd-tab-panel title="${p.tab}">
|
|
401
|
+
<bd-features-tab
|
|
402
|
+
image-src="${p.imageSrc}"
|
|
403
|
+
image-alt="${p.imageAlt}"
|
|
404
|
+
cta-label="${p.ctaLabel}"
|
|
405
|
+
cta-href="${p.ctaHref}"
|
|
406
|
+
cta-kind="danger"
|
|
407
|
+
>
|
|
408
|
+
<bd-h as="h4" slot="heading" color="var(--color-blue-500)">${p.heading}</bd-h>
|
|
409
|
+
<div slot="content">
|
|
410
|
+
<bd-p kind="regular">${p.content}</bd-p>
|
|
411
|
+
</div>
|
|
412
|
+
</bd-features-tab>
|
|
413
|
+
</bd-tab-panel>
|
|
414
|
+
`)}
|
|
415
|
+
</bd-tabs>
|
|
416
|
+
`
|
|
417
|
+
};
|
|
418
|
+
|
|
419
|
+
export const Playground = {
|
|
420
|
+
name: '🛝 Playground',
|
|
421
|
+
args: {
|
|
422
|
+
imageSrc: '/assets/tabs-img1.png',
|
|
423
|
+
ctaLabel: 'Stay worry free',
|
|
424
|
+
ctaKind : 'danger',
|
|
425
|
+
reverse : false
|
|
426
|
+
},
|
|
427
|
+
render: (args) => html`
|
|
428
|
+
<bd-features-tab
|
|
429
|
+
image-src="${args.imageSrc}"
|
|
430
|
+
image-alt="Demo image"
|
|
431
|
+
cta-label="${args.ctaLabel}"
|
|
432
|
+
cta-href="#"
|
|
433
|
+
cta-kind="${args.ctaKind}"
|
|
434
|
+
?reverse=${args.reverse}
|
|
435
|
+
>
|
|
436
|
+
<bd-h as="h4" slot="heading" color="var(--color-blue-500)">Keep your loved ones protected.</bd-h>
|
|
437
|
+
<div slot="content">
|
|
438
|
+
<bd-p kind="regular">As the Subscription Manager, you can oversee and adjust online safety through an intuitive dashboard.</bd-p>
|
|
439
|
+
</div>
|
|
440
|
+
</bd-features-tab>
|
|
441
|
+
`,
|
|
442
|
+
parameters: { docs: { description: { story: 'Playground interactiv — ajustează image-src, cta-label, cta-kind și reverse din Controls.' } } }
|
|
443
|
+
};
|
|
@@ -20,6 +20,7 @@ class BdTabs extends LitElement {
|
|
|
20
20
|
static properties = {
|
|
21
21
|
title : { type: String },
|
|
22
22
|
subtitle : { type: String },
|
|
23
|
+
highlightText : { type: String, attribute: "highlight-text" },
|
|
23
24
|
selectedTab : { type: Number, state: true },
|
|
24
25
|
_panelMinHeight: { type: Number, state: true },
|
|
25
26
|
bgBlue : { type: Boolean, reflect: true }
|
|
@@ -31,13 +32,12 @@ class BdTabs extends LitElement {
|
|
|
31
32
|
super();
|
|
32
33
|
this.title = "";
|
|
33
34
|
this.subtitle = "";
|
|
35
|
+
this.highlightText = "";
|
|
34
36
|
this.selectedTab = 0;
|
|
35
37
|
this._panelMinHeight = 0;
|
|
36
38
|
this.bgBlue = false;
|
|
37
39
|
}
|
|
38
40
|
|
|
39
|
-
|
|
40
|
-
|
|
41
41
|
_getPanels() {
|
|
42
42
|
return Array.from(this.querySelectorAll(":scope > bd-tab-panel"));
|
|
43
43
|
}
|
|
@@ -82,7 +82,7 @@ class BdTabs extends LitElement {
|
|
|
82
82
|
<div class="bd-tabs-component">
|
|
83
83
|
|
|
84
84
|
${this.title
|
|
85
|
-
? html`<bd-highlight highlight-text="">${this.title}</bd-highlight>`
|
|
85
|
+
? html`<bd-highlight highlight-text="${this.highlightText}">${this.title}</bd-highlight>`
|
|
86
86
|
: ""}
|
|
87
87
|
|
|
88
88
|
${this.subtitle
|
|
@@ -0,0 +1,181 @@
|
|
|
1
|
+
import { css } from "lit";
|
|
2
|
+
|
|
3
|
+
export default css`
|
|
4
|
+
:host {
|
|
5
|
+
--bd-accessibility-focus: var(--color-blue-500);
|
|
6
|
+
display: block;
|
|
7
|
+
font-family: var(--typography-fontFamily-sans);
|
|
8
|
+
font-size: 100%;
|
|
9
|
+
padding-top: var(--spacing-64);
|
|
10
|
+
padding-bottom: var(--spacing-64);
|
|
11
|
+
}
|
|
12
|
+
|
|
13
|
+
bd-highlight {
|
|
14
|
+
max-width: 660px;
|
|
15
|
+
padding-top: var(--spacing-32);
|
|
16
|
+
}
|
|
17
|
+
|
|
18
|
+
.bd-tabs-component {
|
|
19
|
+
display: flex;
|
|
20
|
+
flex-direction: column;
|
|
21
|
+
align-items: center;
|
|
22
|
+
max-width: 990px;
|
|
23
|
+
margin-inline: auto;
|
|
24
|
+
padding-inline: var(--layout-ensemble-inline-padding, var(--spacing-24));
|
|
25
|
+
box-sizing: border-box;
|
|
26
|
+
}
|
|
27
|
+
|
|
28
|
+
.bd-tabs-subtitle {
|
|
29
|
+
font-size: var(--typography-body-regular-fontSize);
|
|
30
|
+
max-width: 560px;
|
|
31
|
+
text-align: center;
|
|
32
|
+
margin-top: var(--spacing-32);
|
|
33
|
+
margin-bottom: var(--spacing-32);
|
|
34
|
+
}
|
|
35
|
+
|
|
36
|
+
.bd-tabs-container {
|
|
37
|
+
display: inline-flex;
|
|
38
|
+
justify-content: center;
|
|
39
|
+
flex-wrap: wrap;
|
|
40
|
+
border-bottom: 1px solid var(--color-neutral-100);
|
|
41
|
+
width: 100%;
|
|
42
|
+
margin-bottom: var(--spacing-32);
|
|
43
|
+
}
|
|
44
|
+
|
|
45
|
+
.bd-tab-button {
|
|
46
|
+
display: inline-flex;
|
|
47
|
+
align-items: center;
|
|
48
|
+
gap: var(--spacing-8);
|
|
49
|
+
background: none;
|
|
50
|
+
border: none;
|
|
51
|
+
padding: var(--spacing-10) var(--spacing-32);
|
|
52
|
+
cursor: pointer;
|
|
53
|
+
color: var(--color-blue-500);
|
|
54
|
+
position: relative;
|
|
55
|
+
font-family: var(--typography-fontFamily-sans);
|
|
56
|
+
font-size: var(--typography-body-large-fontSize);
|
|
57
|
+
font-weight: var(--typography-fontWeight-semibold);
|
|
58
|
+
transition: color var(--transition-duration-fast, 150ms) ease;
|
|
59
|
+
}
|
|
60
|
+
|
|
61
|
+
.bd-tab-button::after {
|
|
62
|
+
content: "";
|
|
63
|
+
height: 3px;
|
|
64
|
+
background: var(--color-blue-500);
|
|
65
|
+
position: absolute;
|
|
66
|
+
left: 0;
|
|
67
|
+
bottom: 0;
|
|
68
|
+
width: 0;
|
|
69
|
+
transition: width var(--transition-duration-slow, 300ms) ease;
|
|
70
|
+
}
|
|
71
|
+
|
|
72
|
+
.bd-tab-button.bd-selected::after {
|
|
73
|
+
width: 100%;
|
|
74
|
+
}
|
|
75
|
+
|
|
76
|
+
.bd-tab-button.bd-selected {
|
|
77
|
+
color: var(--color-neutral-900);
|
|
78
|
+
}
|
|
79
|
+
|
|
80
|
+
.bd-tab-button:focus-visible {
|
|
81
|
+
outline: 2px solid var(--bd-accessibility-focus);
|
|
82
|
+
outline-offset: 2px;
|
|
83
|
+
border-radius: var(--radius-sm);
|
|
84
|
+
}
|
|
85
|
+
|
|
86
|
+
.bd-tab-icon {
|
|
87
|
+
width: 28px;
|
|
88
|
+
height: 28px;
|
|
89
|
+
object-fit: contain;
|
|
90
|
+
}
|
|
91
|
+
|
|
92
|
+
.bd-tab-label {
|
|
93
|
+
pointer-events: none;
|
|
94
|
+
}
|
|
95
|
+
|
|
96
|
+
.bd-panel-wrapper {
|
|
97
|
+
width: 100%;
|
|
98
|
+
box-sizing: border-box;
|
|
99
|
+
}
|
|
100
|
+
|
|
101
|
+
.bd-card-container {
|
|
102
|
+
display: flex;
|
|
103
|
+
align-items: center;
|
|
104
|
+
gap: var(--spacing-64);
|
|
105
|
+
width: 100%;
|
|
106
|
+
animation: bd-fade-slide-right 350ms ease forwards;
|
|
107
|
+
}
|
|
108
|
+
|
|
109
|
+
.bd-left {
|
|
110
|
+
flex: 1;
|
|
111
|
+
display: flex;
|
|
112
|
+
flex-direction: column;
|
|
113
|
+
align-items: flex-start;
|
|
114
|
+
gap: var(--spacing-24);
|
|
115
|
+
}
|
|
116
|
+
|
|
117
|
+
.bd-panel-content {
|
|
118
|
+
display: flex;
|
|
119
|
+
flex-direction: column;
|
|
120
|
+
gap: var(--spacing-8);
|
|
121
|
+
}
|
|
122
|
+
|
|
123
|
+
.bd-right {
|
|
124
|
+
flex: 1;
|
|
125
|
+
display: flex;
|
|
126
|
+
align-items: center;
|
|
127
|
+
justify-content: center;
|
|
128
|
+
}
|
|
129
|
+
|
|
130
|
+
.bd-panel-image {
|
|
131
|
+
width: 100%;
|
|
132
|
+
max-width: 520px;
|
|
133
|
+
height: auto;
|
|
134
|
+
border-radius: var(--radius-lg, 16px);
|
|
135
|
+
object-fit: cover;
|
|
136
|
+
display: block;
|
|
137
|
+
}
|
|
138
|
+
|
|
139
|
+
@keyframes bd-fade-slide-right {
|
|
140
|
+
from {
|
|
141
|
+
opacity: 0;
|
|
142
|
+
transform: translateX(24px);
|
|
143
|
+
}
|
|
144
|
+
to {
|
|
145
|
+
opacity: 1;
|
|
146
|
+
transform: translateX(0);
|
|
147
|
+
}
|
|
148
|
+
}
|
|
149
|
+
|
|
150
|
+
@media (max-width: 992px) {
|
|
151
|
+
.bd-card-container {
|
|
152
|
+
flex-direction: column-reverse;
|
|
153
|
+
gap: var(--spacing-32);
|
|
154
|
+
}
|
|
155
|
+
|
|
156
|
+
.bd-left {
|
|
157
|
+
align-items: center;
|
|
158
|
+
text-align: center;
|
|
159
|
+
}
|
|
160
|
+
|
|
161
|
+
.bd-panel-image {
|
|
162
|
+
max-width: 100%;
|
|
163
|
+
}
|
|
164
|
+
}
|
|
165
|
+
|
|
166
|
+
@media (max-width: 600px) {
|
|
167
|
+
.bd-tabs-container {
|
|
168
|
+
gap: var(--spacing-4);
|
|
169
|
+
}
|
|
170
|
+
|
|
171
|
+
.bd-tab-button {
|
|
172
|
+
padding: var(--spacing-8) var(--spacing-12);
|
|
173
|
+
font-size: var(--typography-fontSize-sm);
|
|
174
|
+
}
|
|
175
|
+
|
|
176
|
+
.bd-tab-icon {
|
|
177
|
+
width: 20px;
|
|
178
|
+
height: 20px;
|
|
179
|
+
}
|
|
180
|
+
}
|
|
181
|
+
`;
|