@neovici/cosmoz-badge 1.0.0
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/dist/cosmoz-badge.d.ts +38 -0
- package/dist/cosmoz-badge.js +51 -0
- package/dist/index.d.ts +1 -0
- package/dist/index.js +1 -0
- package/dist/styles.d.ts +4 -0
- package/dist/styles.js +189 -0
- package/package.json +95 -0
|
@@ -0,0 +1,38 @@
|
|
|
1
|
+
/**
|
|
2
|
+
* A customizable badge component using cosmoz design tokens.
|
|
3
|
+
*
|
|
4
|
+
* @element cosmoz-badge
|
|
5
|
+
*
|
|
6
|
+
* @attr {string} type - Badge type: pill (default), color, modern
|
|
7
|
+
* @attr {string} color - Badge color: gray (default), brand, error, warning, success
|
|
8
|
+
* @attr {string} size - Badge size: sm, md (default), lg
|
|
9
|
+
* @attr {boolean} dot - Show a colored dot indicator before text
|
|
10
|
+
*
|
|
11
|
+
* @slot - Default slot for badge text or icon content
|
|
12
|
+
* @slot prefix - Slot for content before text (icons, images, flags)
|
|
13
|
+
* @slot suffix - Slot for content after text (icons)
|
|
14
|
+
*
|
|
15
|
+
*
|
|
16
|
+
* @csspart badge - The badge container element
|
|
17
|
+
* @csspart dot - The dot indicator element
|
|
18
|
+
*
|
|
19
|
+
* @example Basic badge
|
|
20
|
+
* ```html
|
|
21
|
+
* <cosmoz-badge color="brand">Label</cosmoz-badge>
|
|
22
|
+
* ```
|
|
23
|
+
*
|
|
24
|
+
* @example Badge with dot
|
|
25
|
+
* ```html
|
|
26
|
+
* <cosmoz-badge color="success" dot>Active</cosmoz-badge>
|
|
27
|
+
* ```
|
|
28
|
+
*
|
|
29
|
+
* @example Badge with icon
|
|
30
|
+
* ```html
|
|
31
|
+
* <cosmoz-badge color="warning">
|
|
32
|
+
* <svg slot="prefix" ...></svg>
|
|
33
|
+
* Warning
|
|
34
|
+
* </cosmoz-badge>
|
|
35
|
+
* ```
|
|
36
|
+
*/
|
|
37
|
+
declare const CosmozBadge: () => import("lit-html").TemplateResult<1>;
|
|
38
|
+
export { CosmozBadge };
|
|
@@ -0,0 +1,51 @@
|
|
|
1
|
+
import { normalize } from '@neovici/cosmoz-tokens/normalize';
|
|
2
|
+
import { component, html } from '@pionjs/pion';
|
|
3
|
+
import { styles } from './styles';
|
|
4
|
+
/**
|
|
5
|
+
* A customizable badge component using cosmoz design tokens.
|
|
6
|
+
*
|
|
7
|
+
* @element cosmoz-badge
|
|
8
|
+
*
|
|
9
|
+
* @attr {string} type - Badge type: pill (default), color, modern
|
|
10
|
+
* @attr {string} color - Badge color: gray (default), brand, error, warning, success
|
|
11
|
+
* @attr {string} size - Badge size: sm, md (default), lg
|
|
12
|
+
* @attr {boolean} dot - Show a colored dot indicator before text
|
|
13
|
+
*
|
|
14
|
+
* @slot - Default slot for badge text or icon content
|
|
15
|
+
* @slot prefix - Slot for content before text (icons, images, flags)
|
|
16
|
+
* @slot suffix - Slot for content after text (icons)
|
|
17
|
+
*
|
|
18
|
+
*
|
|
19
|
+
* @csspart badge - The badge container element
|
|
20
|
+
* @csspart dot - The dot indicator element
|
|
21
|
+
*
|
|
22
|
+
* @example Basic badge
|
|
23
|
+
* ```html
|
|
24
|
+
* <cosmoz-badge color="brand">Label</cosmoz-badge>
|
|
25
|
+
* ```
|
|
26
|
+
*
|
|
27
|
+
* @example Badge with dot
|
|
28
|
+
* ```html
|
|
29
|
+
* <cosmoz-badge color="success" dot>Active</cosmoz-badge>
|
|
30
|
+
* ```
|
|
31
|
+
*
|
|
32
|
+
* @example Badge with icon
|
|
33
|
+
* ```html
|
|
34
|
+
* <cosmoz-badge color="warning">
|
|
35
|
+
* <svg slot="prefix" ...></svg>
|
|
36
|
+
* Warning
|
|
37
|
+
* </cosmoz-badge>
|
|
38
|
+
* ```
|
|
39
|
+
*/
|
|
40
|
+
const CosmozBadge = () => {
|
|
41
|
+
return html `<span class="badge" part="badge" role="status">
|
|
42
|
+
<span class="dot" part="dot"></span>
|
|
43
|
+
<slot name="prefix"></slot>
|
|
44
|
+
<slot></slot>
|
|
45
|
+
<slot name="suffix"></slot>
|
|
46
|
+
</span>`;
|
|
47
|
+
};
|
|
48
|
+
customElements.define('cosmoz-badge', component(CosmozBadge, {
|
|
49
|
+
styleSheets: [normalize, styles],
|
|
50
|
+
}));
|
|
51
|
+
export { CosmozBadge };
|
package/dist/index.d.ts
ADDED
|
@@ -0,0 +1 @@
|
|
|
1
|
+
export { CosmozBadge } from './cosmoz-badge';
|
package/dist/index.js
ADDED
|
@@ -0,0 +1 @@
|
|
|
1
|
+
export { CosmozBadge } from './cosmoz-badge';
|
package/dist/styles.d.ts
ADDED
package/dist/styles.js
ADDED
|
@@ -0,0 +1,189 @@
|
|
|
1
|
+
import { css } from '@pionjs/pion';
|
|
2
|
+
/* Spacing helpers based on --cz-spacing (0.25rem = 4px) */
|
|
3
|
+
const sp = (n) => `calc(var(--cz-spacing) * ${n})`;
|
|
4
|
+
/**
|
|
5
|
+
* Badge styles using cosmoz-tokens design system.
|
|
6
|
+
*/
|
|
7
|
+
export const styles = css `
|
|
8
|
+
/* =========================================
|
|
9
|
+
* HOST
|
|
10
|
+
* ========================================= */
|
|
11
|
+
:host {
|
|
12
|
+
display: inline-flex;
|
|
13
|
+
}
|
|
14
|
+
|
|
15
|
+
/* =========================================
|
|
16
|
+
* BADGE BASE (default: pill, md)
|
|
17
|
+
* ========================================= */
|
|
18
|
+
.badge {
|
|
19
|
+
display: inline-flex;
|
|
20
|
+
align-items: center;
|
|
21
|
+
gap: ${sp(1.5)};
|
|
22
|
+
width: max-content;
|
|
23
|
+
height: max-content;
|
|
24
|
+
white-space: nowrap;
|
|
25
|
+
font-family: var(--cz-font-body);
|
|
26
|
+
font-weight: var(--cz-font-weight-medium);
|
|
27
|
+
border: 1px solid var(--cz-color-border-secondary);
|
|
28
|
+
background-color: var(--cz-color-bg-secondary);
|
|
29
|
+
color: var(--cz-color-text-secondary);
|
|
30
|
+
border-radius: var(--cz-radius-full);
|
|
31
|
+
padding: ${sp(0.5)} ${sp(2)};
|
|
32
|
+
font-size: var(--cz-text-sm);
|
|
33
|
+
line-height: var(--cz-text-sm-line-height);
|
|
34
|
+
}
|
|
35
|
+
|
|
36
|
+
/* =========================================
|
|
37
|
+
* COLOR VARIANTS
|
|
38
|
+
* ========================================= */
|
|
39
|
+
|
|
40
|
+
:host([color='brand']) .badge {
|
|
41
|
+
background-color: var(--cz-color-bg-brand);
|
|
42
|
+
color: var(--cz-color-text-brand);
|
|
43
|
+
border-color: var(--cz-color-brand-200);
|
|
44
|
+
}
|
|
45
|
+
|
|
46
|
+
:host([color='error']) .badge {
|
|
47
|
+
background-color: var(--cz-color-bg-error);
|
|
48
|
+
color: var(--cz-color-text-error);
|
|
49
|
+
border-color: var(--cz-color-error-200);
|
|
50
|
+
}
|
|
51
|
+
|
|
52
|
+
:host([color='warning']) .badge {
|
|
53
|
+
background-color: var(--cz-color-bg-warning);
|
|
54
|
+
color: var(--cz-color-text-warning);
|
|
55
|
+
border-color: var(--cz-color-warning-200);
|
|
56
|
+
}
|
|
57
|
+
|
|
58
|
+
:host([color='success']) .badge {
|
|
59
|
+
background-color: var(--cz-color-bg-success);
|
|
60
|
+
color: var(--cz-color-text-success);
|
|
61
|
+
border-color: var(--cz-color-success-200);
|
|
62
|
+
}
|
|
63
|
+
|
|
64
|
+
/* Modern type: neutral bg/text/border regardless of color */
|
|
65
|
+
:host([type='modern']) .badge {
|
|
66
|
+
background-color: var(--cz-color-bg-primary);
|
|
67
|
+
color: var(--cz-color-text-secondary);
|
|
68
|
+
border-color: var(--cz-color-border-primary);
|
|
69
|
+
}
|
|
70
|
+
|
|
71
|
+
/* =========================================
|
|
72
|
+
* TYPE VARIANTS (shape)
|
|
73
|
+
* ========================================= */
|
|
74
|
+
:host([type='color']) .badge,
|
|
75
|
+
:host([type='modern']) .badge {
|
|
76
|
+
border-radius: var(--cz-radius-sm);
|
|
77
|
+
padding: ${sp(0.5)} ${sp(2)};
|
|
78
|
+
}
|
|
79
|
+
|
|
80
|
+
:host([type='modern']) .badge {
|
|
81
|
+
box-shadow: var(--cz-shadow-xs);
|
|
82
|
+
}
|
|
83
|
+
|
|
84
|
+
/* =========================================
|
|
85
|
+
* SIZE VARIANTS
|
|
86
|
+
* ========================================= */
|
|
87
|
+
|
|
88
|
+
/* --- Pill sizes --- */
|
|
89
|
+
:host([size='sm']) .badge {
|
|
90
|
+
padding: ${sp(0.5)} ${sp(2)};
|
|
91
|
+
font-size: var(--cz-text-xs);
|
|
92
|
+
line-height: var(--cz-text-xs-line-height);
|
|
93
|
+
gap: ${sp(1)};
|
|
94
|
+
}
|
|
95
|
+
|
|
96
|
+
:host([size='lg']) .badge {
|
|
97
|
+
padding: ${sp(1)} ${sp(3)};
|
|
98
|
+
}
|
|
99
|
+
|
|
100
|
+
/* --- Badge sizes --- */
|
|
101
|
+
:host([type='color'][size='sm']) .badge,
|
|
102
|
+
:host([type='modern'][size='sm']) .badge {
|
|
103
|
+
padding: ${sp(0.5)} ${sp(1.5)};
|
|
104
|
+
font-size: var(--cz-text-xs);
|
|
105
|
+
line-height: var(--cz-text-xs-line-height);
|
|
106
|
+
gap: ${sp(1)};
|
|
107
|
+
}
|
|
108
|
+
|
|
109
|
+
:host([type='color'][size='lg']) .badge,
|
|
110
|
+
:host([type='modern'][size='lg']) .badge {
|
|
111
|
+
padding: ${sp(1)} ${sp(2.5)};
|
|
112
|
+
border-radius: var(--cz-radius-md);
|
|
113
|
+
}
|
|
114
|
+
|
|
115
|
+
/* =========================================
|
|
116
|
+
* DOT INDICATOR
|
|
117
|
+
* ========================================= */
|
|
118
|
+
.dot {
|
|
119
|
+
width: ${sp(2)};
|
|
120
|
+
height: ${sp(2)};
|
|
121
|
+
border-radius: var(--cz-radius-full);
|
|
122
|
+
background-color: var(--cz-color-fg-quaternary);
|
|
123
|
+
flex-shrink: 0;
|
|
124
|
+
}
|
|
125
|
+
:host(:not([dot])) .dot {
|
|
126
|
+
display: none;
|
|
127
|
+
}
|
|
128
|
+
:host([color='brand']) .dot {
|
|
129
|
+
background-color: var(--cz-color-fg-brand-secondary);
|
|
130
|
+
}
|
|
131
|
+
:host([color='error']) .dot {
|
|
132
|
+
background-color: var(--cz-color-fg-error-secondary);
|
|
133
|
+
}
|
|
134
|
+
:host([color='warning']) .dot {
|
|
135
|
+
background-color: var(--cz-color-fg-warning-secondary);
|
|
136
|
+
}
|
|
137
|
+
:host([color='success']) .dot {
|
|
138
|
+
background-color: var(--cz-color-fg-success-secondary);
|
|
139
|
+
}
|
|
140
|
+
|
|
141
|
+
/* Pill + dot: asymmetric padding (tighter left) */
|
|
142
|
+
:host([dot]) .badge {
|
|
143
|
+
padding: ${sp(0.5)} ${sp(2.5)} ${sp(0.5)} ${sp(2)};
|
|
144
|
+
}
|
|
145
|
+
|
|
146
|
+
:host([dot][size='sm']) .badge {
|
|
147
|
+
padding: ${sp(0.5)} ${sp(2)} ${sp(0.5)} ${sp(1.5)};
|
|
148
|
+
}
|
|
149
|
+
|
|
150
|
+
:host([dot][size='lg']) .badge {
|
|
151
|
+
padding: ${sp(1)} ${sp(3)} ${sp(1)} ${sp(2.5)};
|
|
152
|
+
}
|
|
153
|
+
|
|
154
|
+
/* Badge + dot: symmetric padding (same as base badge) */
|
|
155
|
+
:host([dot][type='color']) .badge,
|
|
156
|
+
:host([dot][type='modern']) .badge {
|
|
157
|
+
padding: ${sp(0.5)} ${sp(2)};
|
|
158
|
+
}
|
|
159
|
+
|
|
160
|
+
:host([dot][type='color'][size='sm']) .badge,
|
|
161
|
+
:host([dot][type='modern'][size='sm']) .badge {
|
|
162
|
+
padding: ${sp(0.5)} ${sp(1.5)};
|
|
163
|
+
}
|
|
164
|
+
|
|
165
|
+
:host([dot][type='color'][size='lg']) .badge,
|
|
166
|
+
:host([dot][type='modern'][size='lg']) .badge {
|
|
167
|
+
padding: ${sp(1)} ${sp(2.5)};
|
|
168
|
+
}
|
|
169
|
+
|
|
170
|
+
/* =========================================
|
|
171
|
+
* SLOTTED CONTENT (icons, images, flags)
|
|
172
|
+
* ========================================= */
|
|
173
|
+
::slotted(svg) {
|
|
174
|
+
color: var(--cz-color-fg-quaternary);
|
|
175
|
+
}
|
|
176
|
+
|
|
177
|
+
:host([color='brand']) ::slotted(svg) {
|
|
178
|
+
color: var(--cz-color-fg-brand-secondary);
|
|
179
|
+
}
|
|
180
|
+
:host([color='error']) ::slotted(svg) {
|
|
181
|
+
color: var(--cz-color-fg-error-secondary);
|
|
182
|
+
}
|
|
183
|
+
:host([color='warning']) ::slotted(svg) {
|
|
184
|
+
color: var(--cz-color-fg-warning-secondary);
|
|
185
|
+
}
|
|
186
|
+
:host([color='success']) ::slotted(svg) {
|
|
187
|
+
color: var(--cz-color-fg-success-secondary);
|
|
188
|
+
}
|
|
189
|
+
`;
|
package/package.json
ADDED
|
@@ -0,0 +1,95 @@
|
|
|
1
|
+
{
|
|
2
|
+
"name": "@neovici/cosmoz-badge",
|
|
3
|
+
"version": "1.0.0",
|
|
4
|
+
"description": "A customizable badge web component built with Untitled UI design tokens",
|
|
5
|
+
"keywords": [
|
|
6
|
+
"web-components",
|
|
7
|
+
"pion",
|
|
8
|
+
"lit-html"
|
|
9
|
+
],
|
|
10
|
+
"homepage": "https://github.com/Neovici/cosmoz-badge#readme",
|
|
11
|
+
"bugs": {
|
|
12
|
+
"url": "https://github.com/Neovici/cosmoz-badge/issues"
|
|
13
|
+
},
|
|
14
|
+
"repository": {
|
|
15
|
+
"type": "git",
|
|
16
|
+
"url": "git+https://github.com/Neovici/cosmoz-badge.git"
|
|
17
|
+
},
|
|
18
|
+
"license": "Apache-2.0",
|
|
19
|
+
"author": "Neovici Development",
|
|
20
|
+
"main": "dist/index.js",
|
|
21
|
+
"type": "module",
|
|
22
|
+
"scripts": {
|
|
23
|
+
"lint": "tsc && eslint --cache .",
|
|
24
|
+
"check:duplicates": "check-duplicate-components",
|
|
25
|
+
"build": "tsc -p tsconfig.build.json",
|
|
26
|
+
"start": "wds",
|
|
27
|
+
"test": "vitest --run",
|
|
28
|
+
"test:unit": "vitest --project=unit --run",
|
|
29
|
+
"test:storybook": "vitest --project=storybook --run",
|
|
30
|
+
"test:watch": "vitest",
|
|
31
|
+
"storybook:start": "storybook dev -p 8000",
|
|
32
|
+
"storybook:build": "storybook build",
|
|
33
|
+
"storybook:deploy": "storybook-to-ghpages",
|
|
34
|
+
"storybook:preview": "npm run storybook:build && http-server ./storybook-static/ --silent",
|
|
35
|
+
"prepare": "husky"
|
|
36
|
+
},
|
|
37
|
+
"release": {
|
|
38
|
+
"plugins": [
|
|
39
|
+
"@semantic-release/commit-analyzer",
|
|
40
|
+
"@semantic-release/release-notes-generator",
|
|
41
|
+
"@semantic-release/changelog",
|
|
42
|
+
"@semantic-release/github",
|
|
43
|
+
"@semantic-release/npm",
|
|
44
|
+
"@semantic-release/git"
|
|
45
|
+
],
|
|
46
|
+
"branch": "main",
|
|
47
|
+
"preset": "conventionalcommits"
|
|
48
|
+
},
|
|
49
|
+
"publishConfig": {
|
|
50
|
+
"access": "public"
|
|
51
|
+
},
|
|
52
|
+
"files": [
|
|
53
|
+
"dist/",
|
|
54
|
+
"types"
|
|
55
|
+
],
|
|
56
|
+
"exports": {
|
|
57
|
+
".": "./dist/index.js",
|
|
58
|
+
"./cosmoz-badge": "./dist/cosmoz-badge.js"
|
|
59
|
+
},
|
|
60
|
+
"dependencies": {
|
|
61
|
+
"@neovici/cosmoz-icons": "^1.5.0",
|
|
62
|
+
"@neovici/cosmoz-tokens": "^3.3.0",
|
|
63
|
+
"@pionjs/pion": "^2.5.2",
|
|
64
|
+
"lit-html": "^3.3.1"
|
|
65
|
+
},
|
|
66
|
+
"devDependencies": {
|
|
67
|
+
"@commitlint/cli": "^20.0.0",
|
|
68
|
+
"@commitlint/config-conventional": "^20.0.0",
|
|
69
|
+
"@neovici/cfg": "^2.8.0",
|
|
70
|
+
"@neovici/testing": "^2.3.0",
|
|
71
|
+
"@playwright/test": "^1.58.1",
|
|
72
|
+
"@semantic-release/changelog": "^6.0.0",
|
|
73
|
+
"@semantic-release/git": "^10.0.0",
|
|
74
|
+
"@storybook/addon-docs": "^10.0.0",
|
|
75
|
+
"@storybook/addon-vitest": "^10.2.4",
|
|
76
|
+
"@storybook/web-components-vite": "^10.2.4",
|
|
77
|
+
"@types/node": "^24.0.0",
|
|
78
|
+
"@vitest/browser": "^4.0.18",
|
|
79
|
+
"@vitest/browser-playwright": "^4.0.18",
|
|
80
|
+
"eslint": "^9.0.0",
|
|
81
|
+
"http-server": "^14.1.1",
|
|
82
|
+
"husky": "^9.0.0",
|
|
83
|
+
"jsdom": "^26.1.0",
|
|
84
|
+
"lint-staged": "^16.2.7",
|
|
85
|
+
"semantic-release": "^25.0.0",
|
|
86
|
+
"shadow-dom-testing-library": "^1.13.1",
|
|
87
|
+
"sinon": "^19.0.0",
|
|
88
|
+
"storybook": "^10.0.0",
|
|
89
|
+
"typescript": "^5.4.3",
|
|
90
|
+
"vitest": "^4.0.18"
|
|
91
|
+
},
|
|
92
|
+
"overrides": {
|
|
93
|
+
"conventional-changelog-conventionalcommits": ">= 8.0.0"
|
|
94
|
+
}
|
|
95
|
+
}
|