@dhis2-ui/tag 8.16.0 → 9.0.0-alpha.2
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/package.json +7 -4
- package/types/index.d.ts +30 -0
package/package.json
CHANGED
|
@@ -1,6 +1,6 @@
|
|
|
1
1
|
{
|
|
2
2
|
"name": "@dhis2-ui/tag",
|
|
3
|
-
"version": "
|
|
3
|
+
"version": "9.0.0-alpha.2",
|
|
4
4
|
"description": "UI Tag",
|
|
5
5
|
"repository": {
|
|
6
6
|
"type": "git",
|
|
@@ -13,6 +13,7 @@
|
|
|
13
13
|
"main": "./build/cjs/index.js",
|
|
14
14
|
"module": "./build/es/index.js",
|
|
15
15
|
"exports": {
|
|
16
|
+
"types": "./types/index.d.ts",
|
|
16
17
|
"import": "./build/es/index.js",
|
|
17
18
|
"require": "./build/cjs/index.js"
|
|
18
19
|
},
|
|
@@ -32,16 +33,18 @@
|
|
|
32
33
|
},
|
|
33
34
|
"dependencies": {
|
|
34
35
|
"@dhis2/prop-types": "^3.1.2",
|
|
35
|
-
"@dhis2/ui-constants": "
|
|
36
|
+
"@dhis2/ui-constants": "9.0.0-alpha.2",
|
|
36
37
|
"classnames": "^2.3.1",
|
|
37
38
|
"prop-types": "^15.7.2"
|
|
38
39
|
},
|
|
39
40
|
"files": [
|
|
40
|
-
"build"
|
|
41
|
+
"build",
|
|
42
|
+
"types"
|
|
41
43
|
],
|
|
42
44
|
"devDependencies": {
|
|
43
45
|
"react": "16.13",
|
|
44
46
|
"react-dom": "16.13",
|
|
45
47
|
"styled-jsx": "^4.0.1"
|
|
46
|
-
}
|
|
48
|
+
},
|
|
49
|
+
"types": "types"
|
|
47
50
|
}
|
package/types/index.d.ts
ADDED
|
@@ -0,0 +1,30 @@
|
|
|
1
|
+
import * as React from 'react'
|
|
2
|
+
|
|
3
|
+
export interface TagProps {
|
|
4
|
+
/**
|
|
5
|
+
* Use bold tags where it is important that the tag is seen by the user in an information dense interface. Bold tags should be reserved for edge cases and not overused.
|
|
6
|
+
*/
|
|
7
|
+
bold?: boolean
|
|
8
|
+
children?: string
|
|
9
|
+
className?: string
|
|
10
|
+
dataTest?: string
|
|
11
|
+
/**
|
|
12
|
+
* Tags can contain icons. Use icons where they will help users easily identify the content of the tag. Tags must have a text label and cannot display only an icon.
|
|
13
|
+
*/
|
|
14
|
+
icon?: React.ReactNode
|
|
15
|
+
maxWidth?: string
|
|
16
|
+
/**
|
|
17
|
+
* Red 'negative' tags imply an error or a problem. `neutral`, `positive`, and `negative` are mutually exclusive props
|
|
18
|
+
*/
|
|
19
|
+
negative?: boolean
|
|
20
|
+
/**
|
|
21
|
+
* Blue 'neutral' tags are used when a tag _could_ have valid or error status but is currently neutral. `neutral`, `positive`, and `negative` are mutually exclusive props
|
|
22
|
+
*/
|
|
23
|
+
neutral?: boolean
|
|
24
|
+
/**
|
|
25
|
+
* Green 'valid' tags should be used to indicate validity or success. `neutral`, `positive`, and `negative` are mutually exclusive props
|
|
26
|
+
*/
|
|
27
|
+
positive?: boolean
|
|
28
|
+
}
|
|
29
|
+
|
|
30
|
+
export const Tag: React.FC<TagProps>
|