@repobit/dex-system-design 0.23.109 → 0.23.110
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,14 @@
|
|
|
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.110](https://github.com/bitdefender/dex-core/compare/@repobit/dex-system-design@0.23.109...@repobit/dex-system-design@0.23.110) (2026-08-05)
|
|
7
|
+
|
|
8
|
+
### Bug Fixes
|
|
9
|
+
|
|
10
|
+
* **DEX-1014:** banner component for testing
|
|
11
|
+
* **DEX-1014:** stop tracking blog storybook
|
|
12
|
+
|
|
13
|
+
|
|
6
14
|
## [0.23.109](https://github.com/bitdefender/dex-core/compare/@repobit/dex-system-design@0.23.108...@repobit/dex-system-design@0.23.109) (2026-08-05)
|
|
7
15
|
|
|
8
16
|
**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.
|
|
3
|
+
"version": "0.23.110",
|
|
4
4
|
"description": "Design system based on Web Components.",
|
|
5
5
|
"author": "Iordache Matei Cezar <miordache@bitdefender.com>",
|
|
6
6
|
"homepage": "https://github.com/bitdefender/dex-core#readme",
|
|
@@ -74,8 +74,8 @@
|
|
|
74
74
|
"url": "https://github.com/bitdefender/dex-core/issues"
|
|
75
75
|
},
|
|
76
76
|
"dependencies": {
|
|
77
|
-
"@repobit/dex-store": "1.6.
|
|
78
|
-
"@repobit/dex-store-elements": "2.0.
|
|
77
|
+
"@repobit/dex-store": "1.6.8",
|
|
78
|
+
"@repobit/dex-store-elements": "2.0.13",
|
|
79
79
|
"lit": "^3.3.2"
|
|
80
80
|
},
|
|
81
81
|
"devDependencies": {
|
|
@@ -92,5 +92,5 @@
|
|
|
92
92
|
"volta": {
|
|
93
93
|
"node": "24.14.0"
|
|
94
94
|
},
|
|
95
|
-
"gitHead": "
|
|
95
|
+
"gitHead": "e3f1f8f8f98763edddd18361fc9db9f093c77279"
|
|
96
96
|
}
|
|
@@ -0,0 +1,60 @@
|
|
|
1
|
+
import { LitElement, css, html } from "lit";
|
|
2
|
+
import { tokens } from "../../tokens/tokens.js";
|
|
3
|
+
|
|
4
|
+
class Banner extends LitElement {
|
|
5
|
+
static properties = {
|
|
6
|
+
variant: { type: String, reflect: true }
|
|
7
|
+
};
|
|
8
|
+
|
|
9
|
+
static styles = [tokens, css`
|
|
10
|
+
:host {
|
|
11
|
+
display: block;
|
|
12
|
+
width: 100%;
|
|
13
|
+
}
|
|
14
|
+
|
|
15
|
+
.banner {
|
|
16
|
+
padding: var(--spacing-12) var(--spacing-16);
|
|
17
|
+
font-family: var(--typography-fontFamily-sans);
|
|
18
|
+
font-size: var(--typography-body-regular-fontSize);
|
|
19
|
+
font-weight: var(--typography-fontWeight-normal);
|
|
20
|
+
color: var(--color-neutral-900);
|
|
21
|
+
background: var(--color-neutral-50);
|
|
22
|
+
border-radius: var(--radius-sm);
|
|
23
|
+
}
|
|
24
|
+
|
|
25
|
+
:host([variant="info"]) .banner {
|
|
26
|
+
background: var(--color-blue-50);
|
|
27
|
+
color: var(--color-blue-700);
|
|
28
|
+
}
|
|
29
|
+
|
|
30
|
+
:host([variant="success"]) .banner {
|
|
31
|
+
background: var(--color-green-50);
|
|
32
|
+
color: var(--color-green-800);
|
|
33
|
+
}
|
|
34
|
+
|
|
35
|
+
:host([variant="warning"]) .banner {
|
|
36
|
+
background: var(--color-yellow-50);
|
|
37
|
+
color: var(--color-yellow-800);
|
|
38
|
+
}
|
|
39
|
+
|
|
40
|
+
:host([variant="error"]) .banner {
|
|
41
|
+
background: var(--color-red-50);
|
|
42
|
+
color: var(--color-red-700);
|
|
43
|
+
}
|
|
44
|
+
`];
|
|
45
|
+
|
|
46
|
+
constructor() {
|
|
47
|
+
super();
|
|
48
|
+
this.variant = "info";
|
|
49
|
+
}
|
|
50
|
+
|
|
51
|
+
render() {
|
|
52
|
+
return html`
|
|
53
|
+
<div class="banner" role="alert">
|
|
54
|
+
<slot></slot>
|
|
55
|
+
</div>
|
|
56
|
+
`;
|
|
57
|
+
}
|
|
58
|
+
}
|
|
59
|
+
|
|
60
|
+
customElements.define("bd-banner", Banner);
|
|
@@ -0,0 +1,51 @@
|
|
|
1
|
+
import { html } from 'lit';
|
|
2
|
+
import './banner.js';
|
|
3
|
+
|
|
4
|
+
export default {
|
|
5
|
+
title : 'Components/Banner',
|
|
6
|
+
tags : ['autodocs'],
|
|
7
|
+
argTypes: {
|
|
8
|
+
message: {
|
|
9
|
+
control : 'text',
|
|
10
|
+
description: 'Text mesaj banner',
|
|
11
|
+
table : { type: { summary: 'string' } }
|
|
12
|
+
},
|
|
13
|
+
variant: {
|
|
14
|
+
control : { type: 'select' },
|
|
15
|
+
options : ['info', 'success', 'warning', 'error'],
|
|
16
|
+
description: 'Varianta vizuala',
|
|
17
|
+
table : { type: { summary: 'string' }, defaultValue: { summary: 'info' } }
|
|
18
|
+
}
|
|
19
|
+
}
|
|
20
|
+
};
|
|
21
|
+
|
|
22
|
+
export const Info = {
|
|
23
|
+
name : 'Info',
|
|
24
|
+
render: () => html`<bd-banner variant="info">This is an informational message.</bd-banner>`
|
|
25
|
+
};
|
|
26
|
+
|
|
27
|
+
export const Success = {
|
|
28
|
+
name : 'Success',
|
|
29
|
+
render: () => html`<bd-banner variant="success">Operation completed successfully.</bd-banner>`
|
|
30
|
+
};
|
|
31
|
+
|
|
32
|
+
export const Warning = {
|
|
33
|
+
name : 'Warning',
|
|
34
|
+
render: () => html`<bd-banner variant="warning">Please review before continuing.</bd-banner>`
|
|
35
|
+
};
|
|
36
|
+
|
|
37
|
+
export const Error = {
|
|
38
|
+
name : 'Error',
|
|
39
|
+
render: () => html`<bd-banner variant="error">Something went wrong. Please try again.</bd-banner>`
|
|
40
|
+
};
|
|
41
|
+
|
|
42
|
+
export const Playground = {
|
|
43
|
+
name: '🛝 Playground',
|
|
44
|
+
args: {
|
|
45
|
+
message: 'This is a banner message.',
|
|
46
|
+
variant: 'info'
|
|
47
|
+
},
|
|
48
|
+
render: (args) => html`
|
|
49
|
+
<bd-banner variant="${args.variant}" message="${args.message}"></bd-banner>
|
|
50
|
+
`
|
|
51
|
+
};
|