@dhis2/ui-constants 9.10.3 → 9.11.1-beta.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/build/cjs/colors.js +2 -8
- package/build/cjs/elevations.js +2 -3
- package/build/cjs/index.js +2 -16
- package/build/cjs/layers.js +2 -3
- package/build/cjs/shared-prop-types.js +24 -41
- package/build/cjs/spacers.js +19 -22
- package/build/cjs/theme.js +2 -8
- package/build/es/colors.js +0 -5
- package/build/es/index.js +1 -2
- package/build/es/shared-prop-types.js +15 -11
- package/build/es/spacers.js +16 -16
- package/build/es/theme.js +0 -3
- package/package.json +2 -2
package/build/cjs/colors.js
CHANGED
@@ -4,7 +4,7 @@ Object.defineProperty(exports, "__esModule", {
|
|
4
4
|
value: true
|
5
5
|
});
|
6
6
|
exports.colors = void 0;
|
7
|
-
const colors = {
|
7
|
+
const colors = exports.colors = {
|
8
8
|
/*blue*/
|
9
9
|
blue900: '#093371',
|
10
10
|
blue800: '#0d47a1',
|
@@ -16,7 +16,6 @@ const colors = {
|
|
16
16
|
blue200: '#c5e3fc',
|
17
17
|
blue100: '#e3f2fd',
|
18
18
|
blue050: '#f5fbff',
|
19
|
-
|
20
19
|
/*teal*/
|
21
20
|
teal900: '#00332b',
|
22
21
|
teal800: '#004d40',
|
@@ -28,7 +27,6 @@ const colors = {
|
|
28
27
|
teal200: '#b2dfdb',
|
29
28
|
teal100: '#e0f2f1',
|
30
29
|
teal050: '#f1f9f9',
|
31
|
-
|
32
30
|
/*red*/
|
33
31
|
red900: '#330202',
|
34
32
|
red800: '#891515',
|
@@ -40,7 +38,6 @@ const colors = {
|
|
40
38
|
red200: '#ffcdd2',
|
41
39
|
red100: '#ffe5e8',
|
42
40
|
red050: '#fff5f6',
|
43
|
-
|
44
41
|
/*yellow*/
|
45
42
|
yellow900: '#6f3205',
|
46
43
|
yellow800: '#bb460d',
|
@@ -52,7 +49,6 @@ const colors = {
|
|
52
49
|
yellow200: '#ffe082',
|
53
50
|
yellow100: '#ffecb3',
|
54
51
|
yellow050: '#fff8e1',
|
55
|
-
|
56
52
|
/*green*/
|
57
53
|
green900: '#103713',
|
58
54
|
green800: '#1b5e20',
|
@@ -64,7 +60,6 @@ const colors = {
|
|
64
60
|
green200: '#c8e6c9',
|
65
61
|
green100: '#e8f5e9',
|
66
62
|
green050: '#f4fbf4',
|
67
|
-
|
68
63
|
/*grey*/
|
69
64
|
grey900: '#212934',
|
70
65
|
grey800: '#404b5a',
|
@@ -77,5 +72,4 @@ const colors = {
|
|
77
72
|
grey100: '#f8f9fa',
|
78
73
|
grey050: '#fbfcfd',
|
79
74
|
white: '#ffffff'
|
80
|
-
};
|
81
|
-
exports.colors = colors;
|
75
|
+
};
|
package/build/cjs/elevations.js
CHANGED
@@ -4,10 +4,9 @@ Object.defineProperty(exports, "__esModule", {
|
|
4
4
|
value: true
|
5
5
|
});
|
6
6
|
exports.elevations = void 0;
|
7
|
-
const elevations = {
|
7
|
+
const elevations = exports.elevations = {
|
8
8
|
e100: '0px 1px 2px rgba(33,41,52,0.06), 0px 1px 3px rgba(33,41,52,0.1)',
|
9
9
|
e200: '0px 0px 1px rgba(33,41,52,0.1), 0px 4px 6px -1px rgba(33,41,52,0.1), 0px 2px 4px -1px rgba(33,41,52,0.06)',
|
10
10
|
e300: '0px 10px 15px -3px rgba(33,41,52,0.1), 0px 4px 6px -2px rgba(33,41,52,0.05)',
|
11
11
|
e400: '0px 25px 50px -12px rgba(33, 41, 52, 0.25)'
|
12
|
-
};
|
13
|
-
exports.elevations = elevations;
|
12
|
+
};
|
package/build/cjs/index.js
CHANGED
@@ -7,9 +7,7 @@ var _exportNames = {
|
|
7
7
|
sharedPropTypes: true
|
8
8
|
};
|
9
9
|
exports.sharedPropTypes = void 0;
|
10
|
-
|
11
10
|
var _colors = require("./colors.js");
|
12
|
-
|
13
11
|
Object.keys(_colors).forEach(function (key) {
|
14
12
|
if (key === "default" || key === "__esModule") return;
|
15
13
|
if (Object.prototype.hasOwnProperty.call(_exportNames, key)) return;
|
@@ -21,9 +19,7 @@ Object.keys(_colors).forEach(function (key) {
|
|
21
19
|
}
|
22
20
|
});
|
23
21
|
});
|
24
|
-
|
25
22
|
var _theme = require("./theme.js");
|
26
|
-
|
27
23
|
Object.keys(_theme).forEach(function (key) {
|
28
24
|
if (key === "default" || key === "__esModule") return;
|
29
25
|
if (Object.prototype.hasOwnProperty.call(_exportNames, key)) return;
|
@@ -35,9 +31,7 @@ Object.keys(_theme).forEach(function (key) {
|
|
35
31
|
}
|
36
32
|
});
|
37
33
|
});
|
38
|
-
|
39
34
|
var _layers = require("./layers.js");
|
40
|
-
|
41
35
|
Object.keys(_layers).forEach(function (key) {
|
42
36
|
if (key === "default" || key === "__esModule") return;
|
43
37
|
if (Object.prototype.hasOwnProperty.call(_exportNames, key)) return;
|
@@ -49,9 +43,7 @@ Object.keys(_layers).forEach(function (key) {
|
|
49
43
|
}
|
50
44
|
});
|
51
45
|
});
|
52
|
-
|
53
46
|
var _spacers = require("./spacers.js");
|
54
|
-
|
55
47
|
Object.keys(_spacers).forEach(function (key) {
|
56
48
|
if (key === "default" || key === "__esModule") return;
|
57
49
|
if (Object.prototype.hasOwnProperty.call(_exportNames, key)) return;
|
@@ -63,9 +55,7 @@ Object.keys(_spacers).forEach(function (key) {
|
|
63
55
|
}
|
64
56
|
});
|
65
57
|
});
|
66
|
-
|
67
58
|
var _elevations = require("./elevations.js");
|
68
|
-
|
69
59
|
Object.keys(_elevations).forEach(function (key) {
|
70
60
|
if (key === "default" || key === "__esModule") return;
|
71
61
|
if (Object.prototype.hasOwnProperty.call(_exportNames, key)) return;
|
@@ -77,11 +67,7 @@ Object.keys(_elevations).forEach(function (key) {
|
|
77
67
|
}
|
78
68
|
});
|
79
69
|
});
|
80
|
-
|
81
70
|
var _sharedPropTypes = _interopRequireWildcard(require("./shared-prop-types.js"));
|
82
|
-
|
83
71
|
exports.sharedPropTypes = _sharedPropTypes;
|
84
|
-
|
85
|
-
function
|
86
|
-
|
87
|
-
function _interopRequireWildcard(obj, nodeInterop) { if (!nodeInterop && obj && obj.__esModule) { return obj; } if (obj === null || typeof obj !== "object" && typeof obj !== "function") { return { default: obj }; } var cache = _getRequireWildcardCache(nodeInterop); if (cache && cache.has(obj)) { return cache.get(obj); } var newObj = {}; var hasPropertyDescriptor = Object.defineProperty && Object.getOwnPropertyDescriptor; for (var key in obj) { if (key !== "default" && Object.prototype.hasOwnProperty.call(obj, key)) { var desc = hasPropertyDescriptor ? Object.getOwnPropertyDescriptor(obj, key) : null; if (desc && (desc.get || desc.set)) { Object.defineProperty(newObj, key, desc); } else { newObj[key] = obj[key]; } } } newObj.default = obj; if (cache) { cache.set(obj, newObj); } return newObj; }
|
72
|
+
function _getRequireWildcardCache(e) { if ("function" != typeof WeakMap) return null; var r = new WeakMap(), t = new WeakMap(); return (_getRequireWildcardCache = function (e) { return e ? t : r; })(e); }
|
73
|
+
function _interopRequireWildcard(e, r) { if (!r && e && e.__esModule) return e; if (null === e || "object" != typeof e && "function" != typeof e) return { default: e }; var t = _getRequireWildcardCache(r); if (t && t.has(e)) return t.get(e); var n = { __proto__: null }, a = Object.defineProperty && Object.getOwnPropertyDescriptor; for (var u in e) if ("default" !== u && {}.hasOwnProperty.call(e, u)) { var i = a ? Object.getOwnPropertyDescriptor(e, u) : null; i && (i.get || i.set) ? Object.defineProperty(n, u, i) : n[u] = e[u]; } return n.default = e, t && t.set(e, n), n; }
|
package/build/cjs/layers.js
CHANGED
@@ -4,21 +4,16 @@ Object.defineProperty(exports, "__esModule", {
|
|
4
4
|
value: true
|
5
5
|
});
|
6
6
|
exports.statusPropType = exports.statusArgType = exports.sizePropType = exports.sizeArgType = exports.popperReferencePropType = exports.popperReferenceArgType = exports.popperPlacementPropType = exports.popperPlacementArgType = exports.insideAlignmentPropType = exports.insideAlignmentArgType = exports.buttonVariantArgType = void 0;
|
7
|
-
|
8
7
|
var _propTypes = require("@dhis2/prop-types");
|
9
|
-
|
10
8
|
var _propTypes2 = _interopRequireDefault(require("prop-types"));
|
11
|
-
|
12
|
-
function _interopRequireDefault(obj) { return obj && obj.__esModule ? obj : { default: obj }; }
|
13
|
-
|
9
|
+
function _interopRequireDefault(e) { return e && e.__esModule ? e : { default: e }; }
|
14
10
|
/**
|
15
11
|
* Status propType
|
16
12
|
* @return {PropType} Mutually exclusive status: valid/warning/error
|
17
13
|
*/
|
18
|
-
const statusPropType = (0, _propTypes.mutuallyExclusive)(['valid', 'warning', 'error'], _propTypes2.default.bool);
|
19
|
-
|
20
|
-
exports.
|
21
|
-
const statusArgType = {
|
14
|
+
const statusPropType = exports.statusPropType = (0, _propTypes.mutuallyExclusive)(['valid', 'warning', 'error'], _propTypes2.default.bool);
|
15
|
+
// Exported for storybook
|
16
|
+
const statusArgType = exports.statusArgType = {
|
22
17
|
table: {
|
23
18
|
type: {
|
24
19
|
summary: 'bool',
|
@@ -29,8 +24,8 @@ const statusArgType = {
|
|
29
24
|
type: 'boolean'
|
30
25
|
}
|
31
26
|
};
|
32
|
-
exports.
|
33
|
-
|
27
|
+
const buttonVariantArgType = exports.buttonVariantArgType =
|
28
|
+
// No description because it should be set for the component description
|
34
29
|
{
|
35
30
|
table: {
|
36
31
|
type: {
|
@@ -41,16 +36,14 @@ const buttonVariantArgType = // No description because it should be set for the
|
|
41
36
|
type: 'boolean'
|
42
37
|
}
|
43
38
|
};
|
39
|
+
|
44
40
|
/**
|
45
41
|
* Size variant propType
|
46
42
|
* @return {PropType} Mutually exclusive variants:
|
47
43
|
* small/large
|
48
44
|
*/
|
49
|
-
|
50
|
-
exports.
|
51
|
-
const sizePropType = (0, _propTypes.mutuallyExclusive)(['small', 'large', 'extrasmall', 'fluid'], _propTypes2.default.bool);
|
52
|
-
exports.sizePropType = sizePropType;
|
53
|
-
const sizeArgType = {
|
45
|
+
const sizePropType = exports.sizePropType = (0, _propTypes.mutuallyExclusive)(['small', 'large', 'extrasmall', 'fluid'], _propTypes2.default.bool);
|
46
|
+
const sizeArgType = exports.sizeArgType = {
|
54
47
|
// No description because it should be set in the component description
|
55
48
|
table: {
|
56
49
|
type: {
|
@@ -62,17 +55,13 @@ const sizeArgType = {
|
|
62
55
|
type: 'boolean'
|
63
56
|
}
|
64
57
|
};
|
58
|
+
|
65
59
|
/**
|
66
60
|
* Inside alignment props
|
67
61
|
* @return {PropType} PropType that validates the inside alignment.
|
68
62
|
*/
|
69
|
-
|
70
|
-
exports.
|
71
|
-
|
72
|
-
const insideAlignmentPropType = _propTypes2.default.oneOf(['top', 'middle', 'bottom']);
|
73
|
-
|
74
|
-
exports.insideAlignmentPropType = insideAlignmentPropType;
|
75
|
-
const insideAlignmentArgType = {
|
63
|
+
const insideAlignmentPropType = exports.insideAlignmentPropType = _propTypes2.default.oneOf(['top', 'middle', 'bottom']);
|
64
|
+
const insideAlignmentArgType = exports.insideAlignmentArgType = {
|
76
65
|
description: 'Inside alignment of the component',
|
77
66
|
table: {
|
78
67
|
type: {
|
@@ -84,17 +73,13 @@ const insideAlignmentArgType = {
|
|
84
73
|
options: ['top', 'middle', 'bottom']
|
85
74
|
}
|
86
75
|
};
|
76
|
+
|
87
77
|
/**
|
88
78
|
* Placement properties against reference element
|
89
79
|
* @return {PropType} PropType that validates placements.
|
90
80
|
*/
|
91
|
-
|
92
|
-
exports.
|
93
|
-
|
94
|
-
const popperPlacementPropType = _propTypes2.default.oneOf(['auto', 'auto-start', 'auto-end', 'top', 'top-start', 'top-end', 'bottom', 'bottom-start', 'bottom-end', 'right', 'right-start', 'right-end', 'left', 'left-start', 'left-end']);
|
95
|
-
|
96
|
-
exports.popperPlacementPropType = popperPlacementPropType;
|
97
|
-
const popperPlacementArgType = {
|
81
|
+
const popperPlacementPropType = exports.popperPlacementPropType = _propTypes2.default.oneOf(['auto', 'auto-start', 'auto-end', 'top', 'top-start', 'top-end', 'bottom', 'bottom-start', 'bottom-end', 'right', 'right-start', 'right-end', 'left', 'left-start', 'left-end']);
|
82
|
+
const popperPlacementArgType = exports.popperPlacementArgType = {
|
98
83
|
description: 'Placement properties relative to reference element',
|
99
84
|
table: {
|
100
85
|
type: {
|
@@ -107,25 +92,24 @@ const popperPlacementArgType = {
|
|
107
92
|
options: ['auto', 'auto-start', 'auto-end', 'top', 'top-start', 'top-end', 'bottom', 'bottom-start', 'bottom-end', 'right', 'right-start', 'right-end', 'left', 'left-start', 'left-end']
|
108
93
|
}
|
109
94
|
};
|
95
|
+
|
110
96
|
/**
|
111
97
|
* Either a DOM node, React ref or a virtual element
|
112
98
|
* @return {PropType} Validate that prop is either a function or an
|
113
99
|
* instance of an Element.
|
114
100
|
*/
|
115
|
-
|
116
|
-
|
117
|
-
|
118
|
-
|
119
|
-
_propTypes2.default.instanceOf(Element), // React ref - React.useRef() or React.createRef()
|
101
|
+
const popperReferencePropType = exports.popperReferencePropType = _propTypes2.default.oneOfType([
|
102
|
+
// DOM node
|
103
|
+
_propTypes2.default.instanceOf(Element),
|
104
|
+
// React ref - React.useRef() or React.createRef()
|
120
105
|
_propTypes2.default.shape({
|
121
106
|
current: _propTypes2.default.instanceOf(Element)
|
122
|
-
}),
|
107
|
+
}),
|
108
|
+
// Virtual element
|
123
109
|
_propTypes2.default.shape({
|
124
110
|
getBoundingClientRect: _propTypes2.default.func
|
125
111
|
})]);
|
126
|
-
|
127
|
-
exports.popperReferencePropType = popperReferencePropType;
|
128
|
-
const popperReferenceArgType = {
|
112
|
+
const popperReferenceArgType = exports.popperReferenceArgType = {
|
129
113
|
description: 'A reference to the element to position against: either a DOM node, React ref, \
|
130
114
|
or an instance of an element',
|
131
115
|
table: {
|
@@ -136,5 +120,4 @@ const popperReferenceArgType = {
|
|
136
120
|
control: {
|
137
121
|
type: null
|
138
122
|
}
|
139
|
-
};
|
140
|
-
exports.popperReferenceArgType = popperReferenceArgType;
|
123
|
+
};
|
package/build/cjs/spacers.js
CHANGED
@@ -4,9 +4,8 @@ Object.defineProperty(exports, "__esModule", {
|
|
4
4
|
value: true
|
5
5
|
});
|
6
6
|
exports.spacersNum = exports.spacers = void 0;
|
7
|
-
|
8
7
|
/** Number values of the spacer definitions */
|
9
|
-
const spacersNum = {
|
8
|
+
const spacersNum = exports.spacersNum = {
|
10
9
|
dp4: 4,
|
11
10
|
dp8: 8,
|
12
11
|
dp12: 12,
|
@@ -23,24 +22,22 @@ const spacersNum = {
|
|
23
22
|
dp512: 512,
|
24
23
|
dp640: 640
|
25
24
|
};
|
26
|
-
/** Pixel values of the spacer definitions */
|
27
25
|
|
28
|
-
|
29
|
-
const spacers = {
|
30
|
-
dp4:
|
31
|
-
dp8:
|
32
|
-
dp12:
|
33
|
-
dp16:
|
34
|
-
dp24:
|
35
|
-
dp32:
|
36
|
-
dp48:
|
37
|
-
dp64:
|
38
|
-
dp96:
|
39
|
-
dp128:
|
40
|
-
dp192:
|
41
|
-
dp256:
|
42
|
-
dp384:
|
43
|
-
dp512:
|
44
|
-
dp640:
|
45
|
-
};
|
46
|
-
exports.spacers = spacers;
|
26
|
+
/** Pixel values of the spacer definitions */
|
27
|
+
const spacers = exports.spacers = {
|
28
|
+
dp4: `${spacersNum.dp4}px`,
|
29
|
+
dp8: `${spacersNum.dp8}px`,
|
30
|
+
dp12: `${spacersNum.dp12}px`,
|
31
|
+
dp16: `${spacersNum.dp16}px`,
|
32
|
+
dp24: `${spacersNum.dp24}px`,
|
33
|
+
dp32: `${spacersNum.dp32}px`,
|
34
|
+
dp48: `${spacersNum.dp48}px`,
|
35
|
+
dp64: `${spacersNum.dp64}px`,
|
36
|
+
dp96: `${spacersNum.dp96}px`,
|
37
|
+
dp128: `${spacersNum.dp128}px`,
|
38
|
+
dp192: `${spacersNum.dp192}px`,
|
39
|
+
dp256: `${spacersNum.dp256}px`,
|
40
|
+
dp384: `${spacersNum.dp384}px`,
|
41
|
+
dp512: `${spacersNum.dp512}px`,
|
42
|
+
dp640: `${spacersNum.dp640}px`
|
43
|
+
};
|
package/build/cjs/theme.js
CHANGED
@@ -4,13 +4,10 @@ Object.defineProperty(exports, "__esModule", {
|
|
4
4
|
value: true
|
5
5
|
});
|
6
6
|
exports.theme = void 0;
|
7
|
-
|
8
7
|
var _colors = require("./colors.js");
|
9
|
-
|
10
|
-
const theme = {
|
8
|
+
const theme = exports.theme = {
|
11
9
|
/* theme */
|
12
10
|
fonts: 'Roboto, sans-serif',
|
13
|
-
|
14
11
|
/*primary*/
|
15
12
|
primary900: _colors.colors.blue900,
|
16
13
|
primary800: _colors.colors.blue800,
|
@@ -22,7 +19,6 @@ const theme = {
|
|
22
19
|
primary200: _colors.colors.blue200,
|
23
20
|
primary100: _colors.colors.blue100,
|
24
21
|
primary050: _colors.colors.blue050,
|
25
|
-
|
26
22
|
/*secondary*/
|
27
23
|
secondary900: _colors.colors.teal900,
|
28
24
|
secondary800: _colors.colors.teal800,
|
@@ -34,7 +30,6 @@ const theme = {
|
|
34
30
|
secondary200: _colors.colors.teal200,
|
35
31
|
secondary100: _colors.colors.teal100,
|
36
32
|
secondary050: _colors.colors.teal050,
|
37
|
-
|
38
33
|
/*status*/
|
39
34
|
default: _colors.colors.grey700,
|
40
35
|
error: _colors.colors.red500,
|
@@ -42,5 +37,4 @@ const theme = {
|
|
42
37
|
warning: _colors.colors.yellow500,
|
43
38
|
disabled: _colors.colors.grey600,
|
44
39
|
focus: _colors.colors.blue600
|
45
|
-
};
|
46
|
-
exports.theme = theme;
|
40
|
+
};
|
package/build/es/colors.js
CHANGED
@@ -10,7 +10,6 @@ export const colors = {
|
|
10
10
|
blue200: '#c5e3fc',
|
11
11
|
blue100: '#e3f2fd',
|
12
12
|
blue050: '#f5fbff',
|
13
|
-
|
14
13
|
/*teal*/
|
15
14
|
teal900: '#00332b',
|
16
15
|
teal800: '#004d40',
|
@@ -22,7 +21,6 @@ export const colors = {
|
|
22
21
|
teal200: '#b2dfdb',
|
23
22
|
teal100: '#e0f2f1',
|
24
23
|
teal050: '#f1f9f9',
|
25
|
-
|
26
24
|
/*red*/
|
27
25
|
red900: '#330202',
|
28
26
|
red800: '#891515',
|
@@ -34,7 +32,6 @@ export const colors = {
|
|
34
32
|
red200: '#ffcdd2',
|
35
33
|
red100: '#ffe5e8',
|
36
34
|
red050: '#fff5f6',
|
37
|
-
|
38
35
|
/*yellow*/
|
39
36
|
yellow900: '#6f3205',
|
40
37
|
yellow800: '#bb460d',
|
@@ -46,7 +43,6 @@ export const colors = {
|
|
46
43
|
yellow200: '#ffe082',
|
47
44
|
yellow100: '#ffecb3',
|
48
45
|
yellow050: '#fff8e1',
|
49
|
-
|
50
46
|
/*green*/
|
51
47
|
green900: '#103713',
|
52
48
|
green800: '#1b5e20',
|
@@ -58,7 +54,6 @@ export const colors = {
|
|
58
54
|
green200: '#c8e6c9',
|
59
55
|
green100: '#e8f5e9',
|
60
56
|
green050: '#f4fbf4',
|
61
|
-
|
62
57
|
/*grey*/
|
63
58
|
grey900: '#212934',
|
64
59
|
grey800: '#404b5a',
|
package/build/es/index.js
CHANGED
@@ -3,5 +3,4 @@ export * from './theme.js';
|
|
3
3
|
export * from './layers.js';
|
4
4
|
export * from './spacers.js';
|
5
5
|
export * from './elevations.js';
|
6
|
-
|
7
|
-
export { _sharedPropTypes as sharedPropTypes };
|
6
|
+
export * as sharedPropTypes from './shared-prop-types.js';
|
@@ -1,12 +1,12 @@
|
|
1
1
|
import { mutuallyExclusive } from '@dhis2/prop-types';
|
2
2
|
import PropTypes from 'prop-types';
|
3
|
+
|
3
4
|
/**
|
4
5
|
* Status propType
|
5
6
|
* @return {PropType} Mutually exclusive status: valid/warning/error
|
6
7
|
*/
|
7
|
-
|
8
|
-
|
9
|
-
|
8
|
+
export const statusPropType = mutuallyExclusive(['valid', 'warning', 'error'], PropTypes.bool);
|
9
|
+
// Exported for storybook
|
10
10
|
export const statusArgType = {
|
11
11
|
table: {
|
12
12
|
type: {
|
@@ -18,7 +18,8 @@ export const statusArgType = {
|
|
18
18
|
type: 'boolean'
|
19
19
|
}
|
20
20
|
};
|
21
|
-
export const buttonVariantArgType =
|
21
|
+
export const buttonVariantArgType =
|
22
|
+
// No description because it should be set for the component description
|
22
23
|
{
|
23
24
|
table: {
|
24
25
|
type: {
|
@@ -29,12 +30,12 @@ export const buttonVariantArgType = // No description because it should be set f
|
|
29
30
|
type: 'boolean'
|
30
31
|
}
|
31
32
|
};
|
33
|
+
|
32
34
|
/**
|
33
35
|
* Size variant propType
|
34
36
|
* @return {PropType} Mutually exclusive variants:
|
35
37
|
* small/large
|
36
38
|
*/
|
37
|
-
|
38
39
|
export const sizePropType = mutuallyExclusive(['small', 'large', 'extrasmall', 'fluid'], PropTypes.bool);
|
39
40
|
export const sizeArgType = {
|
40
41
|
// No description because it should be set in the component description
|
@@ -48,11 +49,11 @@ export const sizeArgType = {
|
|
48
49
|
type: 'boolean'
|
49
50
|
}
|
50
51
|
};
|
52
|
+
|
51
53
|
/**
|
52
54
|
* Inside alignment props
|
53
55
|
* @return {PropType} PropType that validates the inside alignment.
|
54
56
|
*/
|
55
|
-
|
56
57
|
export const insideAlignmentPropType = PropTypes.oneOf(['top', 'middle', 'bottom']);
|
57
58
|
export const insideAlignmentArgType = {
|
58
59
|
description: 'Inside alignment of the component',
|
@@ -66,11 +67,11 @@ export const insideAlignmentArgType = {
|
|
66
67
|
options: ['top', 'middle', 'bottom']
|
67
68
|
}
|
68
69
|
};
|
70
|
+
|
69
71
|
/**
|
70
72
|
* Placement properties against reference element
|
71
73
|
* @return {PropType} PropType that validates placements.
|
72
74
|
*/
|
73
|
-
|
74
75
|
export const popperPlacementPropType = PropTypes.oneOf(['auto', 'auto-start', 'auto-end', 'top', 'top-start', 'top-end', 'bottom', 'bottom-start', 'bottom-end', 'right', 'right-start', 'right-end', 'left', 'left-start', 'left-end']);
|
75
76
|
export const popperPlacementArgType = {
|
76
77
|
description: 'Placement properties relative to reference element',
|
@@ -85,17 +86,20 @@ export const popperPlacementArgType = {
|
|
85
86
|
options: ['auto', 'auto-start', 'auto-end', 'top', 'top-start', 'top-end', 'bottom', 'bottom-start', 'bottom-end', 'right', 'right-start', 'right-end', 'left', 'left-start', 'left-end']
|
86
87
|
}
|
87
88
|
};
|
89
|
+
|
88
90
|
/**
|
89
91
|
* Either a DOM node, React ref or a virtual element
|
90
92
|
* @return {PropType} Validate that prop is either a function or an
|
91
93
|
* instance of an Element.
|
92
94
|
*/
|
93
|
-
|
94
|
-
|
95
|
-
PropTypes.instanceOf(Element),
|
95
|
+
export const popperReferencePropType = PropTypes.oneOfType([
|
96
|
+
// DOM node
|
97
|
+
PropTypes.instanceOf(Element),
|
98
|
+
// React ref - React.useRef() or React.createRef()
|
96
99
|
PropTypes.shape({
|
97
100
|
current: PropTypes.instanceOf(Element)
|
98
|
-
}),
|
101
|
+
}),
|
102
|
+
// Virtual element
|
99
103
|
PropTypes.shape({
|
100
104
|
getBoundingClientRect: PropTypes.func
|
101
105
|
})]);
|
package/build/es/spacers.js
CHANGED
@@ -16,22 +16,22 @@ export const spacersNum = {
|
|
16
16
|
dp512: 512,
|
17
17
|
dp640: 640
|
18
18
|
};
|
19
|
-
/** Pixel values of the spacer definitions */
|
20
19
|
|
20
|
+
/** Pixel values of the spacer definitions */
|
21
21
|
export const spacers = {
|
22
|
-
dp4:
|
23
|
-
dp8:
|
24
|
-
dp12:
|
25
|
-
dp16:
|
26
|
-
dp24:
|
27
|
-
dp32:
|
28
|
-
dp48:
|
29
|
-
dp64:
|
30
|
-
dp96:
|
31
|
-
dp128:
|
32
|
-
dp192:
|
33
|
-
dp256:
|
34
|
-
dp384:
|
35
|
-
dp512:
|
36
|
-
dp640:
|
22
|
+
dp4: `${spacersNum.dp4}px`,
|
23
|
+
dp8: `${spacersNum.dp8}px`,
|
24
|
+
dp12: `${spacersNum.dp12}px`,
|
25
|
+
dp16: `${spacersNum.dp16}px`,
|
26
|
+
dp24: `${spacersNum.dp24}px`,
|
27
|
+
dp32: `${spacersNum.dp32}px`,
|
28
|
+
dp48: `${spacersNum.dp48}px`,
|
29
|
+
dp64: `${spacersNum.dp64}px`,
|
30
|
+
dp96: `${spacersNum.dp96}px`,
|
31
|
+
dp128: `${spacersNum.dp128}px`,
|
32
|
+
dp192: `${spacersNum.dp192}px`,
|
33
|
+
dp256: `${spacersNum.dp256}px`,
|
34
|
+
dp384: `${spacersNum.dp384}px`,
|
35
|
+
dp512: `${spacersNum.dp512}px`,
|
36
|
+
dp640: `${spacersNum.dp640}px`
|
37
37
|
};
|
package/build/es/theme.js
CHANGED
@@ -2,7 +2,6 @@ import { colors } from './colors.js';
|
|
2
2
|
export const theme = {
|
3
3
|
/* theme */
|
4
4
|
fonts: 'Roboto, sans-serif',
|
5
|
-
|
6
5
|
/*primary*/
|
7
6
|
primary900: colors.blue900,
|
8
7
|
primary800: colors.blue800,
|
@@ -14,7 +13,6 @@ export const theme = {
|
|
14
13
|
primary200: colors.blue200,
|
15
14
|
primary100: colors.blue100,
|
16
15
|
primary050: colors.blue050,
|
17
|
-
|
18
16
|
/*secondary*/
|
19
17
|
secondary900: colors.teal900,
|
20
18
|
secondary800: colors.teal800,
|
@@ -26,7 +24,6 @@ export const theme = {
|
|
26
24
|
secondary200: colors.teal200,
|
27
25
|
secondary100: colors.teal100,
|
28
26
|
secondary050: colors.teal050,
|
29
|
-
|
30
27
|
/*status*/
|
31
28
|
default: colors.grey700,
|
32
29
|
error: colors.red500,
|
package/package.json
CHANGED
@@ -1,6 +1,6 @@
|
|
1
1
|
{
|
2
2
|
"name": "@dhis2/ui-constants",
|
3
|
-
"version": "9.
|
3
|
+
"version": "9.11.1-beta.1",
|
4
4
|
"description": "Constants used in the UI libs",
|
5
5
|
"main": "./build/cjs/index.js",
|
6
6
|
"module": "./build/es/index.js",
|
@@ -23,7 +23,7 @@
|
|
23
23
|
"access": "public"
|
24
24
|
},
|
25
25
|
"scripts": {
|
26
|
-
"start": "
|
26
|
+
"start": "storybook dev -c ../storybook/config --port 5000",
|
27
27
|
"build": "d2-app-scripts build"
|
28
28
|
},
|
29
29
|
"dependencies": {
|