@spark-web/badge 0.0.1
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/README.md +50 -0
- package/dist/declarations/src/Badge.d.ts +40 -0
- package/dist/declarations/src/index.d.ts +2 -0
- package/dist/spark-web-badge.cjs.d.ts +1 -0
- package/dist/spark-web-badge.cjs.dev.js +113 -0
- package/dist/spark-web-badge.cjs.js +7 -0
- package/dist/spark-web-badge.cjs.prod.js +113 -0
- package/dist/spark-web-badge.esm.js +108 -0
- package/package.json +28 -0
package/README.md
ADDED
|
@@ -0,0 +1,50 @@
|
|
|
1
|
+
---
|
|
2
|
+
title: Badge
|
|
3
|
+
isExperimentalPackage: true
|
|
4
|
+
---
|
|
5
|
+
|
|
6
|
+
A badge is a decorative indicator used to either call attention to an item or
|
|
7
|
+
for communicating non-actionable, supplemental information.
|
|
8
|
+
|
|
9
|
+
## Example
|
|
10
|
+
|
|
11
|
+
```jsx live
|
|
12
|
+
<Badge tone="info">Label</Badge>
|
|
13
|
+
```
|
|
14
|
+
|
|
15
|
+
### Tones
|
|
16
|
+
|
|
17
|
+
```jsx live
|
|
18
|
+
const tones = ['accent', 'caution', 'critical', 'info', 'neutral'];
|
|
19
|
+
|
|
20
|
+
return (
|
|
21
|
+
<Inline gap="small">
|
|
22
|
+
{tones.map(tone => (
|
|
23
|
+
<Badge key={tone} tone={tone}>
|
|
24
|
+
{tone}
|
|
25
|
+
</Badge>
|
|
26
|
+
))}
|
|
27
|
+
</Inline>
|
|
28
|
+
);
|
|
29
|
+
```
|
|
30
|
+
|
|
31
|
+
## Props
|
|
32
|
+
|
|
33
|
+
### Badge
|
|
34
|
+
|
|
35
|
+
| Prop | Type | Default | Description |
|
|
36
|
+
| -------- | ------------------------------------------------------------------------ | ------- | -------------------------------------- |
|
|
37
|
+
| children | string \|number | | The label of the badge. |
|
|
38
|
+
| data? | [DataAttributeMap][data-attribute-map] | | Sets data attributes on the component. |
|
|
39
|
+
| tone? | "accent" \| "caution" \| "critical" \| "info" \| "neutral" \| "positive" | | The tone of the badge. |
|
|
40
|
+
|
|
41
|
+
### IndicatorDot
|
|
42
|
+
|
|
43
|
+
| Prop | Type | Default | Description |
|
|
44
|
+
| ------ | ------------------------------------------------------------------------ | ------- | ------------------------------------------------------------------------------------------------- |
|
|
45
|
+
| data? | [DataAttributeMap][data-attribute-map] | | Sets data attributes on the component. |
|
|
46
|
+
| label? | string | | When the intent isn't provided by text, you must supply an "aria-label" for assistive tech users. |
|
|
47
|
+
| tone? | "accent" \| "caution" \| "critical" \| "info" \| "neutral" \| "positive" | | The tone of the badge. |
|
|
48
|
+
|
|
49
|
+
[data-attribute-map]:
|
|
50
|
+
https://github.com/brighte-labs/spark-web/blob/e7f6f4285b4cfd876312cc89fbdd094039aa239a/packages/utils/src/internal/buildDataAttributes.ts#L1
|
|
@@ -0,0 +1,40 @@
|
|
|
1
|
+
/// <reference types="react" />
|
|
2
|
+
import type { DataAttributeMap } from '@spark-web/utils/internal';
|
|
3
|
+
/**
|
|
4
|
+
* Badge
|
|
5
|
+
*
|
|
6
|
+
* A decorative indicator used to either call attention to an item or for
|
|
7
|
+
* communicating non-actionable, supplemental information.
|
|
8
|
+
*/
|
|
9
|
+
export declare function Badge({ children, data, tone }: BadgeProps): JSX.Element;
|
|
10
|
+
export declare type BadgeProps = {
|
|
11
|
+
/** The label of the badge. */
|
|
12
|
+
children: string | number;
|
|
13
|
+
/** Map of data attributes. */
|
|
14
|
+
data?: DataAttributeMap;
|
|
15
|
+
/** The tone of the badge. */
|
|
16
|
+
tone?: BadgeTones;
|
|
17
|
+
};
|
|
18
|
+
/**
|
|
19
|
+
* IndicatorDot
|
|
20
|
+
*
|
|
21
|
+
* A small decorative indicator used to call attention to an item.
|
|
22
|
+
*/
|
|
23
|
+
export declare function IndicatorDot({ data, label, tone }: IndicatorDotProps): JSX.Element;
|
|
24
|
+
export declare type IndicatorDotProps = {
|
|
25
|
+
/** Map of data attributes. */
|
|
26
|
+
data?: DataAttributeMap;
|
|
27
|
+
/**
|
|
28
|
+
* When the intent isn't provided by text, you must supply an "aria-label" for
|
|
29
|
+
* assistive tech users.
|
|
30
|
+
*/
|
|
31
|
+
label?: string;
|
|
32
|
+
/** The tone of the indicator dot. */
|
|
33
|
+
tone: BadgeTones;
|
|
34
|
+
};
|
|
35
|
+
/**
|
|
36
|
+
* Shared Types
|
|
37
|
+
*/
|
|
38
|
+
/** The tone of the badge. */
|
|
39
|
+
declare type BadgeTones = 'accent' | 'caution' | 'critical' | 'info' | 'neutral' | 'positive';
|
|
40
|
+
export {};
|
|
@@ -0,0 +1 @@
|
|
|
1
|
+
export * from "./declarations/src/index";
|
|
@@ -0,0 +1,113 @@
|
|
|
1
|
+
'use strict';
|
|
2
|
+
|
|
3
|
+
Object.defineProperty(exports, '__esModule', { value: true });
|
|
4
|
+
|
|
5
|
+
var _objectSpread = require('@babel/runtime/helpers/objectSpread2');
|
|
6
|
+
var css = require('@emotion/css');
|
|
7
|
+
var box = require('@spark-web/box');
|
|
8
|
+
var text = require('@spark-web/text');
|
|
9
|
+
var theme = require('@spark-web/theme');
|
|
10
|
+
var jsxRuntime = require('react/jsx-runtime');
|
|
11
|
+
|
|
12
|
+
////////////////////////////////////////////////////////////////////////////////
|
|
13
|
+
|
|
14
|
+
/**
|
|
15
|
+
* Badge
|
|
16
|
+
*
|
|
17
|
+
* A decorative indicator used to either call attention to an item or for
|
|
18
|
+
* communicating non-actionable, supplemental information.
|
|
19
|
+
*/
|
|
20
|
+
function Badge(_ref) {
|
|
21
|
+
var children = _ref.children,
|
|
22
|
+
data = _ref.data,
|
|
23
|
+
_ref$tone = _ref.tone,
|
|
24
|
+
tone = _ref$tone === void 0 ? 'neutral' : _ref$tone;
|
|
25
|
+
var textSize = 'xsmall';
|
|
26
|
+
return /*#__PURE__*/jsxRuntime.jsxs(box.Box, {
|
|
27
|
+
data: data // Styles
|
|
28
|
+
,
|
|
29
|
+
display: "inline-flex",
|
|
30
|
+
alignItems: "center",
|
|
31
|
+
background: "surface",
|
|
32
|
+
border: "standard",
|
|
33
|
+
borderRadius: "full",
|
|
34
|
+
gap: "xsmall",
|
|
35
|
+
height: "xsmall",
|
|
36
|
+
paddingX: "small",
|
|
37
|
+
children: [/*#__PURE__*/jsxRuntime.jsx(IndicatorContainer, {
|
|
38
|
+
size: textSize,
|
|
39
|
+
children: /*#__PURE__*/jsxRuntime.jsx(IndicatorDot, {
|
|
40
|
+
tone: tone
|
|
41
|
+
})
|
|
42
|
+
}), /*#__PURE__*/jsxRuntime.jsx(text.Text, {
|
|
43
|
+
overflowStrategy: "nowrap",
|
|
44
|
+
size: textSize,
|
|
45
|
+
children: children
|
|
46
|
+
})]
|
|
47
|
+
});
|
|
48
|
+
}
|
|
49
|
+
////////////////////////////////////////////////////////////////////////////////
|
|
50
|
+
|
|
51
|
+
/**
|
|
52
|
+
* IndicatorDot
|
|
53
|
+
*
|
|
54
|
+
* A small decorative indicator used to call attention to an item.
|
|
55
|
+
*/
|
|
56
|
+
function IndicatorDot(_ref2) {
|
|
57
|
+
var data = _ref2.data,
|
|
58
|
+
label = _ref2.label,
|
|
59
|
+
tone = _ref2.tone;
|
|
60
|
+
var theme$1 = theme.useTheme();
|
|
61
|
+
var dotSize = 8;
|
|
62
|
+
return /*#__PURE__*/jsxRuntime.jsx(box.Box, _objectSpread(_objectSpread({}, label ? {
|
|
63
|
+
'aria-label': label
|
|
64
|
+
} : {
|
|
65
|
+
'aria-hidden': 'true'
|
|
66
|
+
}), {}, {
|
|
67
|
+
data: data,
|
|
68
|
+
borderRadius: "full",
|
|
69
|
+
className: css.css({
|
|
70
|
+
height: dotSize,
|
|
71
|
+
width: dotSize,
|
|
72
|
+
background: theme$1.color.status[tone]
|
|
73
|
+
})
|
|
74
|
+
}));
|
|
75
|
+
}
|
|
76
|
+
|
|
77
|
+
////////////////////////////////////////////////////////////////////////////////
|
|
78
|
+
|
|
79
|
+
/**
|
|
80
|
+
* IndicatorContainer
|
|
81
|
+
*
|
|
82
|
+
* Component that renders a div the same height as our text so that we can
|
|
83
|
+
* perfectly align the content side-by-side.
|
|
84
|
+
*/
|
|
85
|
+
function IndicatorContainer(_ref3) {
|
|
86
|
+
var children = _ref3.children,
|
|
87
|
+
_ref3$size = _ref3.size,
|
|
88
|
+
size = _ref3$size === void 0 ? 'standard' : _ref3$size;
|
|
89
|
+
var theme$1 = theme.useTheme();
|
|
90
|
+
var _theme$typography$tex = theme$1.typography.text[size],
|
|
91
|
+
mobile = _theme$typography$tex.mobile,
|
|
92
|
+
tablet = _theme$typography$tex.tablet;
|
|
93
|
+
var responsiveHeight = theme$1.utils.responsiveStyles({
|
|
94
|
+
mobile: {
|
|
95
|
+
height: mobile.capHeight
|
|
96
|
+
},
|
|
97
|
+
tablet: {
|
|
98
|
+
height: tablet.capHeight
|
|
99
|
+
}
|
|
100
|
+
});
|
|
101
|
+
return /*#__PURE__*/jsxRuntime.jsx(box.Box, {
|
|
102
|
+
display: "flex",
|
|
103
|
+
alignItems: "center",
|
|
104
|
+
"aria-hidden": "true",
|
|
105
|
+
cursor: "default",
|
|
106
|
+
flexShrink: 0,
|
|
107
|
+
className: css.css(responsiveHeight),
|
|
108
|
+
children: children
|
|
109
|
+
});
|
|
110
|
+
}
|
|
111
|
+
|
|
112
|
+
exports.Badge = Badge;
|
|
113
|
+
exports.IndicatorDot = IndicatorDot;
|
|
@@ -0,0 +1,113 @@
|
|
|
1
|
+
'use strict';
|
|
2
|
+
|
|
3
|
+
Object.defineProperty(exports, '__esModule', { value: true });
|
|
4
|
+
|
|
5
|
+
var _objectSpread = require('@babel/runtime/helpers/objectSpread2');
|
|
6
|
+
var css = require('@emotion/css');
|
|
7
|
+
var box = require('@spark-web/box');
|
|
8
|
+
var text = require('@spark-web/text');
|
|
9
|
+
var theme = require('@spark-web/theme');
|
|
10
|
+
var jsxRuntime = require('react/jsx-runtime');
|
|
11
|
+
|
|
12
|
+
////////////////////////////////////////////////////////////////////////////////
|
|
13
|
+
|
|
14
|
+
/**
|
|
15
|
+
* Badge
|
|
16
|
+
*
|
|
17
|
+
* A decorative indicator used to either call attention to an item or for
|
|
18
|
+
* communicating non-actionable, supplemental information.
|
|
19
|
+
*/
|
|
20
|
+
function Badge(_ref) {
|
|
21
|
+
var children = _ref.children,
|
|
22
|
+
data = _ref.data,
|
|
23
|
+
_ref$tone = _ref.tone,
|
|
24
|
+
tone = _ref$tone === void 0 ? 'neutral' : _ref$tone;
|
|
25
|
+
var textSize = 'xsmall';
|
|
26
|
+
return /*#__PURE__*/jsxRuntime.jsxs(box.Box, {
|
|
27
|
+
data: data // Styles
|
|
28
|
+
,
|
|
29
|
+
display: "inline-flex",
|
|
30
|
+
alignItems: "center",
|
|
31
|
+
background: "surface",
|
|
32
|
+
border: "standard",
|
|
33
|
+
borderRadius: "full",
|
|
34
|
+
gap: "xsmall",
|
|
35
|
+
height: "xsmall",
|
|
36
|
+
paddingX: "small",
|
|
37
|
+
children: [/*#__PURE__*/jsxRuntime.jsx(IndicatorContainer, {
|
|
38
|
+
size: textSize,
|
|
39
|
+
children: /*#__PURE__*/jsxRuntime.jsx(IndicatorDot, {
|
|
40
|
+
tone: tone
|
|
41
|
+
})
|
|
42
|
+
}), /*#__PURE__*/jsxRuntime.jsx(text.Text, {
|
|
43
|
+
overflowStrategy: "nowrap",
|
|
44
|
+
size: textSize,
|
|
45
|
+
children: children
|
|
46
|
+
})]
|
|
47
|
+
});
|
|
48
|
+
}
|
|
49
|
+
////////////////////////////////////////////////////////////////////////////////
|
|
50
|
+
|
|
51
|
+
/**
|
|
52
|
+
* IndicatorDot
|
|
53
|
+
*
|
|
54
|
+
* A small decorative indicator used to call attention to an item.
|
|
55
|
+
*/
|
|
56
|
+
function IndicatorDot(_ref2) {
|
|
57
|
+
var data = _ref2.data,
|
|
58
|
+
label = _ref2.label,
|
|
59
|
+
tone = _ref2.tone;
|
|
60
|
+
var theme$1 = theme.useTheme();
|
|
61
|
+
var dotSize = 8;
|
|
62
|
+
return /*#__PURE__*/jsxRuntime.jsx(box.Box, _objectSpread(_objectSpread({}, label ? {
|
|
63
|
+
'aria-label': label
|
|
64
|
+
} : {
|
|
65
|
+
'aria-hidden': 'true'
|
|
66
|
+
}), {}, {
|
|
67
|
+
data: data,
|
|
68
|
+
borderRadius: "full",
|
|
69
|
+
className: css.css({
|
|
70
|
+
height: dotSize,
|
|
71
|
+
width: dotSize,
|
|
72
|
+
background: theme$1.color.status[tone]
|
|
73
|
+
})
|
|
74
|
+
}));
|
|
75
|
+
}
|
|
76
|
+
|
|
77
|
+
////////////////////////////////////////////////////////////////////////////////
|
|
78
|
+
|
|
79
|
+
/**
|
|
80
|
+
* IndicatorContainer
|
|
81
|
+
*
|
|
82
|
+
* Component that renders a div the same height as our text so that we can
|
|
83
|
+
* perfectly align the content side-by-side.
|
|
84
|
+
*/
|
|
85
|
+
function IndicatorContainer(_ref3) {
|
|
86
|
+
var children = _ref3.children,
|
|
87
|
+
_ref3$size = _ref3.size,
|
|
88
|
+
size = _ref3$size === void 0 ? 'standard' : _ref3$size;
|
|
89
|
+
var theme$1 = theme.useTheme();
|
|
90
|
+
var _theme$typography$tex = theme$1.typography.text[size],
|
|
91
|
+
mobile = _theme$typography$tex.mobile,
|
|
92
|
+
tablet = _theme$typography$tex.tablet;
|
|
93
|
+
var responsiveHeight = theme$1.utils.responsiveStyles({
|
|
94
|
+
mobile: {
|
|
95
|
+
height: mobile.capHeight
|
|
96
|
+
},
|
|
97
|
+
tablet: {
|
|
98
|
+
height: tablet.capHeight
|
|
99
|
+
}
|
|
100
|
+
});
|
|
101
|
+
return /*#__PURE__*/jsxRuntime.jsx(box.Box, {
|
|
102
|
+
display: "flex",
|
|
103
|
+
alignItems: "center",
|
|
104
|
+
"aria-hidden": "true",
|
|
105
|
+
cursor: "default",
|
|
106
|
+
flexShrink: 0,
|
|
107
|
+
className: css.css(responsiveHeight),
|
|
108
|
+
children: children
|
|
109
|
+
});
|
|
110
|
+
}
|
|
111
|
+
|
|
112
|
+
exports.Badge = Badge;
|
|
113
|
+
exports.IndicatorDot = IndicatorDot;
|
|
@@ -0,0 +1,108 @@
|
|
|
1
|
+
import _objectSpread from '@babel/runtime/helpers/esm/objectSpread2';
|
|
2
|
+
import { css } from '@emotion/css';
|
|
3
|
+
import { Box } from '@spark-web/box';
|
|
4
|
+
import { Text } from '@spark-web/text';
|
|
5
|
+
import { useTheme } from '@spark-web/theme';
|
|
6
|
+
import { jsxs, jsx } from 'react/jsx-runtime';
|
|
7
|
+
|
|
8
|
+
////////////////////////////////////////////////////////////////////////////////
|
|
9
|
+
|
|
10
|
+
/**
|
|
11
|
+
* Badge
|
|
12
|
+
*
|
|
13
|
+
* A decorative indicator used to either call attention to an item or for
|
|
14
|
+
* communicating non-actionable, supplemental information.
|
|
15
|
+
*/
|
|
16
|
+
function Badge(_ref) {
|
|
17
|
+
var children = _ref.children,
|
|
18
|
+
data = _ref.data,
|
|
19
|
+
_ref$tone = _ref.tone,
|
|
20
|
+
tone = _ref$tone === void 0 ? 'neutral' : _ref$tone;
|
|
21
|
+
var textSize = 'xsmall';
|
|
22
|
+
return /*#__PURE__*/jsxs(Box, {
|
|
23
|
+
data: data // Styles
|
|
24
|
+
,
|
|
25
|
+
display: "inline-flex",
|
|
26
|
+
alignItems: "center",
|
|
27
|
+
background: "surface",
|
|
28
|
+
border: "standard",
|
|
29
|
+
borderRadius: "full",
|
|
30
|
+
gap: "xsmall",
|
|
31
|
+
height: "xsmall",
|
|
32
|
+
paddingX: "small",
|
|
33
|
+
children: [/*#__PURE__*/jsx(IndicatorContainer, {
|
|
34
|
+
size: textSize,
|
|
35
|
+
children: /*#__PURE__*/jsx(IndicatorDot, {
|
|
36
|
+
tone: tone
|
|
37
|
+
})
|
|
38
|
+
}), /*#__PURE__*/jsx(Text, {
|
|
39
|
+
overflowStrategy: "nowrap",
|
|
40
|
+
size: textSize,
|
|
41
|
+
children: children
|
|
42
|
+
})]
|
|
43
|
+
});
|
|
44
|
+
}
|
|
45
|
+
////////////////////////////////////////////////////////////////////////////////
|
|
46
|
+
|
|
47
|
+
/**
|
|
48
|
+
* IndicatorDot
|
|
49
|
+
*
|
|
50
|
+
* A small decorative indicator used to call attention to an item.
|
|
51
|
+
*/
|
|
52
|
+
function IndicatorDot(_ref2) {
|
|
53
|
+
var data = _ref2.data,
|
|
54
|
+
label = _ref2.label,
|
|
55
|
+
tone = _ref2.tone;
|
|
56
|
+
var theme = useTheme();
|
|
57
|
+
var dotSize = 8;
|
|
58
|
+
return /*#__PURE__*/jsx(Box, _objectSpread(_objectSpread({}, label ? {
|
|
59
|
+
'aria-label': label
|
|
60
|
+
} : {
|
|
61
|
+
'aria-hidden': 'true'
|
|
62
|
+
}), {}, {
|
|
63
|
+
data: data,
|
|
64
|
+
borderRadius: "full",
|
|
65
|
+
className: css({
|
|
66
|
+
height: dotSize,
|
|
67
|
+
width: dotSize,
|
|
68
|
+
background: theme.color.status[tone]
|
|
69
|
+
})
|
|
70
|
+
}));
|
|
71
|
+
}
|
|
72
|
+
|
|
73
|
+
////////////////////////////////////////////////////////////////////////////////
|
|
74
|
+
|
|
75
|
+
/**
|
|
76
|
+
* IndicatorContainer
|
|
77
|
+
*
|
|
78
|
+
* Component that renders a div the same height as our text so that we can
|
|
79
|
+
* perfectly align the content side-by-side.
|
|
80
|
+
*/
|
|
81
|
+
function IndicatorContainer(_ref3) {
|
|
82
|
+
var children = _ref3.children,
|
|
83
|
+
_ref3$size = _ref3.size,
|
|
84
|
+
size = _ref3$size === void 0 ? 'standard' : _ref3$size;
|
|
85
|
+
var theme = useTheme();
|
|
86
|
+
var _theme$typography$tex = theme.typography.text[size],
|
|
87
|
+
mobile = _theme$typography$tex.mobile,
|
|
88
|
+
tablet = _theme$typography$tex.tablet;
|
|
89
|
+
var responsiveHeight = theme.utils.responsiveStyles({
|
|
90
|
+
mobile: {
|
|
91
|
+
height: mobile.capHeight
|
|
92
|
+
},
|
|
93
|
+
tablet: {
|
|
94
|
+
height: tablet.capHeight
|
|
95
|
+
}
|
|
96
|
+
});
|
|
97
|
+
return /*#__PURE__*/jsx(Box, {
|
|
98
|
+
display: "flex",
|
|
99
|
+
alignItems: "center",
|
|
100
|
+
"aria-hidden": "true",
|
|
101
|
+
cursor: "default",
|
|
102
|
+
flexShrink: 0,
|
|
103
|
+
className: css(responsiveHeight),
|
|
104
|
+
children: children
|
|
105
|
+
});
|
|
106
|
+
}
|
|
107
|
+
|
|
108
|
+
export { Badge, IndicatorDot };
|
package/package.json
ADDED
|
@@ -0,0 +1,28 @@
|
|
|
1
|
+
{
|
|
2
|
+
"name": "@spark-web/badge",
|
|
3
|
+
"version": "0.0.1",
|
|
4
|
+
"license": "MIT",
|
|
5
|
+
"main": "dist/spark-web-badge.cjs.js",
|
|
6
|
+
"module": "dist/spark-web-badge.esm.js",
|
|
7
|
+
"files": [
|
|
8
|
+
"dist"
|
|
9
|
+
],
|
|
10
|
+
"dependencies": {
|
|
11
|
+
"@babel/runtime": "^7.18.9",
|
|
12
|
+
"@emotion/css": "^11.9.0",
|
|
13
|
+
"@spark-web/box": "^1.0.7",
|
|
14
|
+
"@spark-web/text": "^1.0.7",
|
|
15
|
+
"@spark-web/theme": "^3.0.4",
|
|
16
|
+
"@spark-web/utils": "^1.2.0"
|
|
17
|
+
},
|
|
18
|
+
"devDependencies": {
|
|
19
|
+
"@types/react": "^17.0.12",
|
|
20
|
+
"react": "^17.0.2"
|
|
21
|
+
},
|
|
22
|
+
"peerDependencies": {
|
|
23
|
+
"react": ">=17.0.2"
|
|
24
|
+
},
|
|
25
|
+
"engines": {
|
|
26
|
+
"node": ">= 14.13"
|
|
27
|
+
}
|
|
28
|
+
}
|