@repobit/dex-system-design 0.25.7 → 0.25.8
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 +7 -0
- package/package.json +4 -4
- package/src/components/{announcement-banner/announcement-banner.css.js → spotlight-section/spotlight-section.css.js} +19 -19
- package/src/components/spotlight-section/spotlight-section.js +92 -0
- package/src/components/{announcement-banner/announcement-banner.stories.js → spotlight-section/spotlight-section.stories.js} +20 -20
- package/src/components/announcement-banner/announcement-banner.js +0 -116
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.25.8](https://github.com/bitdefender/dex-core/compare/@repobit/dex-system-design@0.25.7...@repobit/dex-system-design@0.25.8) (2026-10-05)
|
|
7
|
+
|
|
8
|
+
### Bug Fixes
|
|
9
|
+
|
|
10
|
+
* **DEX-1014:** spotlight component
|
|
11
|
+
|
|
12
|
+
|
|
6
13
|
## [0.25.7](https://github.com/bitdefender/dex-core/compare/@repobit/dex-system-design@0.25.6...@repobit/dex-system-design@0.25.7) (2026-10-05)
|
|
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.25.
|
|
3
|
+
"version": "0.25.8",
|
|
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",
|
|
@@ -76,8 +76,8 @@
|
|
|
76
76
|
"url": "https://github.com/bitdefender/dex-core/issues"
|
|
77
77
|
},
|
|
78
78
|
"dependencies": {
|
|
79
|
-
"@repobit/dex-store": "1.6.
|
|
80
|
-
"@repobit/dex-store-elements": "2.1.
|
|
79
|
+
"@repobit/dex-store": "1.6.45",
|
|
80
|
+
"@repobit/dex-store-elements": "2.1.15",
|
|
81
81
|
"lit": "^3.3.2"
|
|
82
82
|
},
|
|
83
83
|
"devDependencies": {
|
|
@@ -94,5 +94,5 @@
|
|
|
94
94
|
"volta": {
|
|
95
95
|
"node": "24.14.0"
|
|
96
96
|
},
|
|
97
|
-
"gitHead": "
|
|
97
|
+
"gitHead": "07e5a3d3329d8551d3f25bc4251a412e834e82df"
|
|
98
98
|
}
|
|
@@ -8,20 +8,20 @@ export default css`
|
|
|
8
8
|
margin: 0 auto;
|
|
9
9
|
}
|
|
10
10
|
|
|
11
|
-
.bd-
|
|
12
|
-
background: linear-gradient(87.6deg, var(--color-blue-500) 0%, var(--color-blue-950) 100%);
|
|
11
|
+
.bd-spotlightsection-container {
|
|
12
|
+
background: linear-gradient(87.6deg, var(--color-blue-500) 0%, var(--color-blue-950) 100%);
|
|
13
13
|
border-radius: var(--radius-2xl);
|
|
14
14
|
padding: var(--spacing-48);
|
|
15
15
|
box-sizing: border-box;
|
|
16
16
|
display: flex;
|
|
17
17
|
flex-wrap: wrap;
|
|
18
18
|
align-items: center;
|
|
19
|
-
|
|
19
|
+
/* justify-content: space-between; */
|
|
20
20
|
gap: var(--spacing-96);
|
|
21
21
|
}
|
|
22
22
|
|
|
23
|
-
.bd-
|
|
24
|
-
.bd-
|
|
23
|
+
.bd-spotlightsection-left,
|
|
24
|
+
.bd-spotlightsection-side {
|
|
25
25
|
display: flex;
|
|
26
26
|
flex-direction: column;
|
|
27
27
|
align-items: flex-start;
|
|
@@ -30,14 +30,14 @@ background: linear-gradient(87.6deg, var(--color-blue-500) 0%, var(--color-blue-
|
|
|
30
30
|
max-width: 560px;
|
|
31
31
|
}
|
|
32
32
|
|
|
33
|
-
.bd-
|
|
33
|
+
.bd-spotlightsection-title {
|
|
34
34
|
display: block;
|
|
35
35
|
margin: 0;
|
|
36
36
|
color: var(--color-neutral-0, #fff);
|
|
37
37
|
line-height: var(--typography-lineHeight-tight, 1.15);
|
|
38
38
|
}
|
|
39
39
|
|
|
40
|
-
.bd-
|
|
40
|
+
.bd-spotlightsection-icon {
|
|
41
41
|
display: flex;
|
|
42
42
|
align-items: center;
|
|
43
43
|
color: var(--color-neutral-0, #fff);
|
|
@@ -45,27 +45,27 @@ background: linear-gradient(87.6deg, var(--color-blue-500) 0%, var(--color-blue-
|
|
|
45
45
|
}
|
|
46
46
|
|
|
47
47
|
/* Collapses to nothing when the corresponding slot has no assigned
|
|
48
|
-
content — see _onSlotChange in
|
|
49
|
-
.bd-
|
|
50
|
-
.bd-
|
|
48
|
+
content — see _onSlotChange in spotlight-section.js. */
|
|
49
|
+
.bd-spotlightsection-icon[hidden],
|
|
50
|
+
.bd-spotlightsection-buttons[hidden] {
|
|
51
51
|
display: none;
|
|
52
52
|
}
|
|
53
53
|
|
|
54
54
|
/* Left and right icon slots share the exact same sizing/style — the
|
|
55
55
|
left column is a mirror of the right one, not a different layout. */
|
|
56
|
-
.bd-
|
|
56
|
+
.bd-spotlightsection-icon ::slotted(*) {
|
|
57
57
|
display: block;
|
|
58
58
|
max-width: 160px;
|
|
59
59
|
width: 100%;
|
|
60
60
|
height: auto;
|
|
61
61
|
}
|
|
62
62
|
|
|
63
|
-
.bd-
|
|
63
|
+
.bd-spotlightsection-description {
|
|
64
64
|
margin: 0;
|
|
65
65
|
color: rgba(255, 255, 255, 0.65);
|
|
66
66
|
}
|
|
67
67
|
|
|
68
|
-
.bd-
|
|
68
|
+
.bd-spotlightsection-buttons {
|
|
69
69
|
display: flex;
|
|
70
70
|
flex-wrap: wrap;
|
|
71
71
|
align-items: center;
|
|
@@ -74,29 +74,29 @@ background: linear-gradient(87.6deg, var(--color-blue-500) 0%, var(--color-blue-
|
|
|
74
74
|
}
|
|
75
75
|
|
|
76
76
|
@media (max-width: 699px) {
|
|
77
|
-
.bd-
|
|
77
|
+
.bd-spotlightsection-container {
|
|
78
78
|
padding: var(--spacing-28) var(--spacing-24);
|
|
79
79
|
flex-direction: column;
|
|
80
80
|
align-items: flex-start;
|
|
81
81
|
}
|
|
82
82
|
|
|
83
|
-
.bd-
|
|
84
|
-
.bd-
|
|
83
|
+
.bd-spotlightsection-left,
|
|
84
|
+
.bd-spotlightsection-side {
|
|
85
85
|
max-width: none;
|
|
86
86
|
flex-basis: auto;
|
|
87
87
|
}
|
|
88
88
|
}
|
|
89
89
|
|
|
90
|
-
|
|
90
|
+
/* When left-icon is present, the left title shrinks to match the
|
|
91
91
|
default right-column description size — visual emphasis moves to
|
|
92
92
|
the right side instead. */
|
|
93
|
-
.bd-
|
|
93
|
+
.bd-spotlightsection-title--small {
|
|
94
94
|
margin: 0;
|
|
95
95
|
}
|
|
96
96
|
|
|
97
97
|
/* Mirror case: the right description grows to the default title size
|
|
98
98
|
when it's the "big" side. */
|
|
99
|
-
.bd-
|
|
99
|
+
.bd-spotlightsection-description--large {
|
|
100
100
|
display: block;
|
|
101
101
|
margin: 0;
|
|
102
102
|
color: var(--color-neutral-0, #fff);
|
|
@@ -0,0 +1,92 @@
|
|
|
1
|
+
import { LitElement, html, nothing } from "lit";
|
|
2
|
+
import { tokens } from "../../tokens/tokens.js";
|
|
3
|
+
import "../heading/heading.js";
|
|
4
|
+
import "../paragraph/paragraph.js";
|
|
5
|
+
import spotlightSectionCSS from "./spotlight-section.css.js";
|
|
6
|
+
|
|
7
|
+
|
|
8
|
+
class BdSpotlightSection extends LitElement {
|
|
9
|
+
static properties = {
|
|
10
|
+
title : { type: String },
|
|
11
|
+
description : { type: String },
|
|
12
|
+
_hasLeftIcon : { state: true },
|
|
13
|
+
_hasLeftButtons : { state: true },
|
|
14
|
+
_hasRightIcon : { state: true },
|
|
15
|
+
_hasRightButtons: { state: true }
|
|
16
|
+
};
|
|
17
|
+
|
|
18
|
+
static styles = [tokens, spotlightSectionCSS];
|
|
19
|
+
|
|
20
|
+
constructor() {
|
|
21
|
+
super();
|
|
22
|
+
this.title = "";
|
|
23
|
+
this.description = "";
|
|
24
|
+
this._hasLeftIcon = false;
|
|
25
|
+
this._hasLeftButtons = false;
|
|
26
|
+
this._hasRightIcon = false;
|
|
27
|
+
this._hasRightButtons = false;
|
|
28
|
+
}
|
|
29
|
+
|
|
30
|
+
|
|
31
|
+
_onSlotChange(stateKey, event) {
|
|
32
|
+
const hasContent = event.target.assignedNodes({ flatten: true }).length > 0;
|
|
33
|
+
if (this[stateKey] !== hasContent) this[stateKey] = hasContent;
|
|
34
|
+
}
|
|
35
|
+
|
|
36
|
+
render() {
|
|
37
|
+
|
|
38
|
+
const flipped = this._hasLeftIcon;
|
|
39
|
+
|
|
40
|
+
return html`
|
|
41
|
+
<div class="bd-spotlightsection-container">
|
|
42
|
+
<div class="bd-spotlightsection-left">
|
|
43
|
+
<div class="bd-spotlightsection-icon" ?hidden=${!this._hasLeftIcon}>
|
|
44
|
+
<slot name="left-icon" @slotchange=${(e) => this._onSlotChange("_hasLeftIcon", e)}></slot>
|
|
45
|
+
</div>
|
|
46
|
+
|
|
47
|
+
${flipped
|
|
48
|
+
? html`
|
|
49
|
+
<bd-p kind="large" color="var(--color-neutral-0)" class="bd-spotlightsection-title bd-spotlightsection-title--small">
|
|
50
|
+
<slot name="title">${this.title}</slot>
|
|
51
|
+
</bd-p>
|
|
52
|
+
`
|
|
53
|
+
: html`
|
|
54
|
+
<bd-h as="h2" fontWeight="400" class="bd-spotlightsection-title">
|
|
55
|
+
<slot name="title">${this.title}</slot>
|
|
56
|
+
</bd-h>
|
|
57
|
+
`}
|
|
58
|
+
|
|
59
|
+
<div class="bd-spotlightsection-buttons" ?hidden=${!this._hasLeftButtons}>
|
|
60
|
+
<slot name="left-buttons" @slotchange=${(e) => this._onSlotChange("_hasLeftButtons", e)}></slot>
|
|
61
|
+
</div>
|
|
62
|
+
</div>
|
|
63
|
+
|
|
64
|
+
<div class="bd-spotlightsection-side">
|
|
65
|
+
<div class="bd-spotlightsection-icon" ?hidden=${!this._hasRightIcon}>
|
|
66
|
+
<slot name="icon" @slotchange=${(e) => this._onSlotChange("_hasRightIcon", e)}></slot>
|
|
67
|
+
</div>
|
|
68
|
+
|
|
69
|
+
${this.description
|
|
70
|
+
? flipped
|
|
71
|
+
? html`
|
|
72
|
+
<bd-h as="h2" fontWeight="400" color="var(--color-neutral-0)" class="bd-spotlightsection-description bd-spotlightsection-description--large">
|
|
73
|
+
<slot name="description">${this.description}</slot>
|
|
74
|
+
</bd-h>
|
|
75
|
+
`
|
|
76
|
+
: html`
|
|
77
|
+
<bd-p kind="large" color="var(--color-neutral-0)" class="bd-spotlightsection-description">
|
|
78
|
+
<slot name="description">${this.description}</slot>
|
|
79
|
+
</bd-p>
|
|
80
|
+
`
|
|
81
|
+
: nothing}
|
|
82
|
+
|
|
83
|
+
<div class="bd-spotlightsection-buttons" ?hidden=${!this._hasRightButtons}>
|
|
84
|
+
<slot name="right-buttons" @slotchange=${(e) => this._onSlotChange("_hasRightButtons", e)}></slot>
|
|
85
|
+
</div>
|
|
86
|
+
</div>
|
|
87
|
+
</div>
|
|
88
|
+
`;
|
|
89
|
+
}
|
|
90
|
+
}
|
|
91
|
+
|
|
92
|
+
customElements.define("bd-spotlight-section", BdSpotlightSection);
|
|
@@ -1,19 +1,19 @@
|
|
|
1
1
|
import { html } from "lit";
|
|
2
2
|
import "../button/button.js";
|
|
3
3
|
import "../picture/picture.js";
|
|
4
|
-
import "./
|
|
4
|
+
import "./spotlight-section.js";
|
|
5
5
|
|
|
6
6
|
|
|
7
7
|
export default {
|
|
8
|
-
title : "Components/
|
|
9
|
-
component : "bd-
|
|
8
|
+
title : "Components/SpotlightSection",
|
|
9
|
+
component : "bd-spotlight-section",
|
|
10
10
|
tags : ["autodocs"],
|
|
11
11
|
parameters: {
|
|
12
12
|
layout: "padded",
|
|
13
13
|
docs : {
|
|
14
14
|
description: {
|
|
15
15
|
component: `
|
|
16
|
-
**
|
|
16
|
+
**SpotlightSection** este o secțiune simplă, cu 2 coloane, pe fundal albastru
|
|
17
17
|
gradient — titlu mare în stânga, iar în dreapta o iconiță/logo + caption +
|
|
18
18
|
descriere. Coloana stângă poate primi opțional o imagine deasupra titlului
|
|
19
19
|
(\`left-icon\`) și butoane sub titlu (\`left-buttons\`); coloana dreaptă poate
|
|
@@ -24,7 +24,7 @@ Pentru varianta centrată, cu un singur set de butoane, vezi \`bd-cta-banner\`.
|
|
|
24
24
|
|
|
25
25
|
### Usage
|
|
26
26
|
\`\`\`html
|
|
27
|
-
<bd-
|
|
27
|
+
<bd-spotlight-section
|
|
28
28
|
title="Bitdefender joined the Global Anti-Scam Alliance as a Foundation Member"
|
|
29
29
|
description="Global Anti-Scam Alliance (GASA) unites organisations, experts, and law enforcement to protect consumers worldwide from scams."
|
|
30
30
|
>
|
|
@@ -33,7 +33,7 @@ Pentru varianta centrată, cu un singur set de butoane, vezi \`bd-cta-banner\`.
|
|
|
33
33
|
|
|
34
34
|
<bd-picture slot="icon" ...></bd-picture>
|
|
35
35
|
<bd-button-link slot="right-buttons" href="#" kind="white">Read the report</bd-button-link>
|
|
36
|
-
</bd-
|
|
36
|
+
</bd-spotlight-section>
|
|
37
37
|
\`\`\`
|
|
38
38
|
|
|
39
39
|
### Attributes
|
|
@@ -101,12 +101,12 @@ export const Default = {
|
|
|
101
101
|
description: "Global Anti-Scam Alliance (GASA) unites organisations, experts, and law enforcement to protect consumers worldwide from scams."
|
|
102
102
|
},
|
|
103
103
|
render: (args) => html`
|
|
104
|
-
<bd-
|
|
104
|
+
<bd-spotlight-section
|
|
105
105
|
title=${args.title}
|
|
106
106
|
description=${args.description}
|
|
107
107
|
>
|
|
108
108
|
${gasaPicture()}
|
|
109
|
-
</bd-
|
|
109
|
+
</bd-spotlight-section>
|
|
110
110
|
`,
|
|
111
111
|
parameters: {
|
|
112
112
|
docs: {
|
|
@@ -124,12 +124,12 @@ export const NoCaption = {
|
|
|
124
124
|
description: "Recognised for detection accuracy, low false-positive rate, and minimal performance impact across three consecutive evaluation cycles."
|
|
125
125
|
},
|
|
126
126
|
render: (args) => html`
|
|
127
|
-
<bd-
|
|
127
|
+
<bd-spotlight-section
|
|
128
128
|
title=${args.title}
|
|
129
129
|
description=${args.description}
|
|
130
130
|
>
|
|
131
131
|
${gasaPicture()}
|
|
132
|
-
</bd-
|
|
132
|
+
</bd-spotlight-section>
|
|
133
133
|
`,
|
|
134
134
|
parameters: {
|
|
135
135
|
docs: {
|
|
@@ -147,9 +147,9 @@ export const TitleOnly = {
|
|
|
147
147
|
description: ""
|
|
148
148
|
},
|
|
149
149
|
render: (args) => html`
|
|
150
|
-
<bd-
|
|
150
|
+
<bd-spotlight-section title=${args.title}>
|
|
151
151
|
${gasaPicture()}
|
|
152
|
-
</bd-
|
|
152
|
+
</bd-spotlight-section>
|
|
153
153
|
`,
|
|
154
154
|
parameters: {
|
|
155
155
|
docs: {
|
|
@@ -167,7 +167,7 @@ export const WithButtonsBothSides = {
|
|
|
167
167
|
description: "Global Anti-Scam Alliance (GASA) unites organisations, experts, and law enforcement to protect consumers worldwide from scams."
|
|
168
168
|
},
|
|
169
169
|
render: (args) => html`
|
|
170
|
-
<bd-
|
|
170
|
+
<bd-spotlight-section
|
|
171
171
|
title=${args.title}
|
|
172
172
|
description=${args.description}
|
|
173
173
|
>
|
|
@@ -177,7 +177,7 @@ export const WithButtonsBothSides = {
|
|
|
177
177
|
${gasaPicture()}
|
|
178
178
|
|
|
179
179
|
<bd-button-link slot="right-buttons" href="#" kind="outline-white" size="sm">Read the report</bd-button-link>
|
|
180
|
-
</bd-
|
|
180
|
+
</bd-spotlight-section>
|
|
181
181
|
`,
|
|
182
182
|
parameters: {
|
|
183
183
|
docs: {
|
|
@@ -195,14 +195,14 @@ export const WithLeftImage = {
|
|
|
195
195
|
description: "Global Anti-Scam Alliance (GASA) unites organisations, experts, and law enforcement to protect consumers worldwide from scams."
|
|
196
196
|
},
|
|
197
197
|
render: (args) => html`
|
|
198
|
-
<bd-
|
|
198
|
+
<bd-spotlight-section
|
|
199
199
|
title=${args.title}
|
|
200
200
|
description=${args.description}
|
|
201
201
|
>
|
|
202
202
|
${gasaPicture("left-icon")}
|
|
203
203
|
<bd-button-link slot="left-buttons" href="#" kind="white" size="sm">Learn more</bd-button-link>
|
|
204
204
|
|
|
205
|
-
</bd-
|
|
205
|
+
</bd-spotlight-section>
|
|
206
206
|
`,
|
|
207
207
|
parameters: {
|
|
208
208
|
docs: {
|
|
@@ -220,10 +220,10 @@ export const LeftOnly = {
|
|
|
220
220
|
description: ""
|
|
221
221
|
},
|
|
222
222
|
render: (args) => html`
|
|
223
|
-
<bd-
|
|
223
|
+
<bd-spotlight-section title=${args.title}>
|
|
224
224
|
${gasaPicture("left-icon")}
|
|
225
225
|
<bd-button-link slot="left-buttons" href="#" kind="white" size="sm">Download now</bd-button-link>
|
|
226
|
-
</bd-
|
|
226
|
+
</bd-spotlight-section>
|
|
227
227
|
`,
|
|
228
228
|
parameters: {
|
|
229
229
|
docs: {
|
|
@@ -241,13 +241,13 @@ export const Playground = {
|
|
|
241
241
|
description: "Global Anti-Scam Alliance (GASA) unites organisations, experts, and law enforcement to protect consumers worldwide from scams."
|
|
242
242
|
},
|
|
243
243
|
render: (args) => html`
|
|
244
|
-
<bd-
|
|
244
|
+
<bd-spotlight-section
|
|
245
245
|
title=${args.title}
|
|
246
246
|
description=${args.description}
|
|
247
247
|
>
|
|
248
248
|
${gasaPicture()}
|
|
249
249
|
<bd-button-link slot="right-buttons" href="#" kind="outline-white" size="sm">Read the report</bd-button-link>
|
|
250
|
-
</bd-
|
|
250
|
+
</bd-spotlight-section>
|
|
251
251
|
`,
|
|
252
252
|
parameters: {
|
|
253
253
|
docs: {
|
|
@@ -1,116 +0,0 @@
|
|
|
1
|
-
import { LitElement, html, nothing } from "lit";
|
|
2
|
-
import { tokens } from "../../tokens/tokens.js";
|
|
3
|
-
import "../heading/heading.js";
|
|
4
|
-
import "../paragraph/paragraph.js";
|
|
5
|
-
import announcementBannerCSS from "./announcement-banner.css.js";
|
|
6
|
-
|
|
7
|
-
/**
|
|
8
|
-
* Simple two-column banner on a blue gradient. Two layout modes:
|
|
9
|
-
*
|
|
10
|
-
* - No left-icon (default): big title on the left, icon + small
|
|
11
|
-
* description on the right — for partnership/announcement callouts.
|
|
12
|
-
* - With left-icon: the left column becomes the "small" side (icon +
|
|
13
|
-
* small title, mirroring how the default right side looks) and the
|
|
14
|
-
* right column becomes the "big" side (large description text) — i.e.
|
|
15
|
-
* visual emphasis flips to the right when a left icon is present.
|
|
16
|
-
*
|
|
17
|
-
* <bd-announcement-banner
|
|
18
|
-
* title="Bitdefender joined the Global Anti-Scam Alliance as a Foundation Member"
|
|
19
|
-
* description="Global Anti-Scam Alliance (GASA) unites organisations, experts, and law enforcement to protect consumers worldwide from scams."
|
|
20
|
-
* >
|
|
21
|
-
* <bd-picture slot="left-icon" ...></bd-picture>
|
|
22
|
-
* <bd-button-link slot="left-buttons" ...>Learn more</bd-button-link>
|
|
23
|
-
* </bd-announcement-banner>
|
|
24
|
-
*/
|
|
25
|
-
class BdAnnouncementBanner extends LitElement {
|
|
26
|
-
static properties = {
|
|
27
|
-
title : { type: String },
|
|
28
|
-
description : { type: String },
|
|
29
|
-
_hasLeftIcon : { state: true },
|
|
30
|
-
_hasLeftButtons : { state: true },
|
|
31
|
-
_hasRightIcon : { state: true },
|
|
32
|
-
_hasRightButtons: { state: true }
|
|
33
|
-
};
|
|
34
|
-
|
|
35
|
-
static styles = [tokens, announcementBannerCSS];
|
|
36
|
-
|
|
37
|
-
constructor() {
|
|
38
|
-
super();
|
|
39
|
-
this.title = "";
|
|
40
|
-
this.description = "";
|
|
41
|
-
this._hasLeftIcon = false;
|
|
42
|
-
this._hasLeftButtons = false;
|
|
43
|
-
this._hasRightIcon = false;
|
|
44
|
-
this._hasRightButtons = false;
|
|
45
|
-
}
|
|
46
|
-
|
|
47
|
-
// Each optional slot's wrapper is only rendered with real layout
|
|
48
|
-
// (gap/margin) when it actually has assigned content — checked via
|
|
49
|
-
// slotchange rather than CSS :empty, since a <slot> with no assigned
|
|
50
|
-
// nodes still isn't :empty as a DOM matter the same way a plain element
|
|
51
|
-
// is, and this keeps the collapse logic in one predictable place.
|
|
52
|
-
_onSlotChange(stateKey, event) {
|
|
53
|
-
const hasContent = event.target.assignedNodes({ flatten: true }).length > 0;
|
|
54
|
-
if (this[stateKey] !== hasContent) this[stateKey] = hasContent;
|
|
55
|
-
}
|
|
56
|
-
|
|
57
|
-
render() {
|
|
58
|
-
// When a left icon is slotted in, visual emphasis flips: the left
|
|
59
|
-
// column's title renders small (mirroring the right column's default
|
|
60
|
-
// small description), and the right column's description renders
|
|
61
|
-
// large instead (mirroring the left column's default large title).
|
|
62
|
-
const flipped = this._hasLeftIcon;
|
|
63
|
-
|
|
64
|
-
return html`
|
|
65
|
-
<div class="bd-announcementbanner-container">
|
|
66
|
-
<div class="bd-announcementbanner-left">
|
|
67
|
-
<div class="bd-announcementbanner-icon" ?hidden=${!this._hasLeftIcon}>
|
|
68
|
-
<slot name="left-icon" @slotchange=${(e) => this._onSlotChange("_hasLeftIcon", e)}></slot>
|
|
69
|
-
</div>
|
|
70
|
-
|
|
71
|
-
${flipped
|
|
72
|
-
? html`
|
|
73
|
-
<bd-p kind="large" color="var(--color-neutral-0)" class="bd-announcementbanner-title bd-announcementbanner-title--small">
|
|
74
|
-
<slot name="title">${this.title}</slot>
|
|
75
|
-
</bd-p>
|
|
76
|
-
`
|
|
77
|
-
: html`
|
|
78
|
-
<bd-h as="h2" fontWeight="400" class="bd-announcementbanner-title">
|
|
79
|
-
<slot name="title">${this.title}</slot>
|
|
80
|
-
</bd-h>
|
|
81
|
-
`}
|
|
82
|
-
|
|
83
|
-
<div class="bd-announcementbanner-buttons" ?hidden=${!this._hasLeftButtons}>
|
|
84
|
-
<slot name="left-buttons" @slotchange=${(e) => this._onSlotChange("_hasLeftButtons", e)}></slot>
|
|
85
|
-
</div>
|
|
86
|
-
</div>
|
|
87
|
-
|
|
88
|
-
<div class="bd-announcementbanner-side">
|
|
89
|
-
<div class="bd-announcementbanner-icon" ?hidden=${!this._hasRightIcon}>
|
|
90
|
-
<slot name="icon" @slotchange=${(e) => this._onSlotChange("_hasRightIcon", e)}></slot>
|
|
91
|
-
</div>
|
|
92
|
-
|
|
93
|
-
${this.description
|
|
94
|
-
? flipped
|
|
95
|
-
? html`
|
|
96
|
-
<bd-h as="h2" fontWeight="400" color="var(--color-neutral-0)" class="bd-announcementbanner-description bd-announcementbanner-description--large">
|
|
97
|
-
<slot name="description">${this.description}</slot>
|
|
98
|
-
</bd-h>
|
|
99
|
-
`
|
|
100
|
-
: html`
|
|
101
|
-
<bd-p kind="large" color="var(--color-neutral-0)" class="bd-announcementbanner-description">
|
|
102
|
-
<slot name="description">${this.description}</slot>
|
|
103
|
-
</bd-p>
|
|
104
|
-
`
|
|
105
|
-
: nothing}
|
|
106
|
-
|
|
107
|
-
<div class="bd-announcementbanner-buttons" ?hidden=${!this._hasRightButtons}>
|
|
108
|
-
<slot name="right-buttons" @slotchange=${(e) => this._onSlotChange("_hasRightButtons", e)}></slot>
|
|
109
|
-
</div>
|
|
110
|
-
</div>
|
|
111
|
-
</div>
|
|
112
|
-
`;
|
|
113
|
-
}
|
|
114
|
-
}
|
|
115
|
-
|
|
116
|
-
customElements.define("bd-announcement-banner", BdAnnouncementBanner);
|