@spaced-out/ui-design-system 0.1.129 → 0.1.130
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 +14 -0
- package/design-tokens/color/app-color.json +22 -0
- package/lib/components/Chip/Chip.js +1 -0
- package/lib/components/Chip/Chip.js.flow +9 -3
- package/lib/components/Chip/Chip.module.css +8 -1
- package/lib/components/ScoreBar/ScoreBar.js +64 -0
- package/lib/components/ScoreBar/ScoreBar.js.flow +117 -0
- package/lib/components/ScoreBar/ScoreBar.module.css +36 -0
- package/lib/components/ScoreBar/index.js +16 -0
- package/lib/components/ScoreBar/index.js.flow +3 -0
- package/lib/styles/index.css +12 -0
- package/lib/styles/index.js +15 -3
- package/lib/styles/index.js.flow +12 -0
- package/lib/styles/variables/_color.css +12 -0
- package/lib/styles/variables/_color.js +14 -1
- package/lib/styles/variables/_color.js.flow +12 -0
- package/lib/utils/index.js +11 -0
- package/lib/utils/index.js.flow +1 -0
- package/lib/utils/score-bar/index.js +16 -0
- package/lib/utils/score-bar/index.js.flow +3 -0
- package/lib/utils/score-bar/score-bar.js +27 -0
- package/lib/utils/score-bar/score-bar.js.flow +33 -0
- package/package.json +1 -1
package/CHANGELOG.md
CHANGED
|
@@ -2,6 +2,20 @@
|
|
|
2
2
|
|
|
3
3
|
All notable changes to this project will be documented in this file. See [standard-version](https://github.com/conventional-changelog/standard-version) for commit guidelines.
|
|
4
4
|
|
|
5
|
+
### [0.1.130](https://github.com/spaced-out/ui-design-system/compare/v0.1.130-beta.0...v0.1.130) (2024-09-12)
|
|
6
|
+
|
|
7
|
+
|
|
8
|
+
### Features
|
|
9
|
+
|
|
10
|
+
* score bar component ([#265](https://github.com/spaced-out/ui-design-system/issues/265)) ([d3adc39](https://github.com/spaced-out/ui-design-system/commit/d3adc3906bf88c8d110d5a65cc6bbbe5cc6c3c23))
|
|
11
|
+
|
|
12
|
+
### [0.1.130-beta.0](https://github.com/spaced-out/ui-design-system/compare/v0.1.129...v0.1.130-beta.0) (2024-09-11)
|
|
13
|
+
|
|
14
|
+
|
|
15
|
+
### Features
|
|
16
|
+
|
|
17
|
+
* large size in chips ([#266](https://github.com/spaced-out/ui-design-system/issues/266)) ([b4cf45c](https://github.com/spaced-out/ui-design-system/commit/b4cf45c84bf954253321834ccedc9ffb7f4c2019))
|
|
18
|
+
|
|
5
19
|
### [0.1.129](https://github.com/spaced-out/ui-design-system/compare/v0.1.128...v0.1.129) (2024-09-10)
|
|
6
20
|
|
|
7
21
|
|
|
@@ -255,6 +255,28 @@
|
|
|
255
255
|
"value": "{baseColor.yellow.100.value}"
|
|
256
256
|
}
|
|
257
257
|
},
|
|
258
|
+
"score-bar": {
|
|
259
|
+
"level": {
|
|
260
|
+
"1": {
|
|
261
|
+
"value": "{baseColor.red.400.value}"
|
|
262
|
+
},
|
|
263
|
+
"2": {
|
|
264
|
+
"value": "{baseColor.orange.400.value}"
|
|
265
|
+
},
|
|
266
|
+
"3": {
|
|
267
|
+
"value": "{baseColor.blue.400.value}"
|
|
268
|
+
},
|
|
269
|
+
"4": {
|
|
270
|
+
"value": "{baseColor.green.300.value}"
|
|
271
|
+
},
|
|
272
|
+
"5": {
|
|
273
|
+
"value": "{baseColor.green.700.value}"
|
|
274
|
+
}
|
|
275
|
+
},
|
|
276
|
+
"inactive": {
|
|
277
|
+
"value": "{baseColor.indigo.200.value}"
|
|
278
|
+
}
|
|
279
|
+
},
|
|
258
280
|
"gray.lightest": {
|
|
259
281
|
"value": "{baseColor.gray.75.value}"
|
|
260
282
|
},
|
|
@@ -76,6 +76,7 @@ const Chip = /*#__PURE__*/React.forwardRef((_ref, ref) => {
|
|
|
76
76
|
[_ChipModule.default.warning]: semantic === CHIP_SEMANTIC.warning,
|
|
77
77
|
[_ChipModule.default.danger]: semantic === CHIP_SEMANTIC.danger,
|
|
78
78
|
[_ChipModule.default.secondary]: semantic === CHIP_SEMANTIC.secondary,
|
|
79
|
+
[_ChipModule.default.large]: size === 'large',
|
|
79
80
|
[_ChipModule.default.medium]: size === 'medium',
|
|
80
81
|
[_ChipModule.default.small]: size === 'small',
|
|
81
82
|
[_ChipModule.default.dismissable]: dismissable,
|
|
@@ -40,13 +40,18 @@ export type BaseChipProps = {
|
|
|
40
40
|
onMouseLeave?: ?(SyntheticEvent<HTMLElement>) => mixed,
|
|
41
41
|
};
|
|
42
42
|
|
|
43
|
-
export type
|
|
43
|
+
export type LargeChipProps = {
|
|
44
44
|
...BaseChipProps,
|
|
45
|
-
size?: 'medium',
|
|
46
45
|
iconName?: string,
|
|
47
46
|
iconType?: IconType,
|
|
48
47
|
dismissable?: boolean,
|
|
49
48
|
onDismiss?: ?(SyntheticEvent<HTMLElement>) => mixed,
|
|
49
|
+
size?: 'large',
|
|
50
|
+
};
|
|
51
|
+
|
|
52
|
+
export type MediumChipProps = {
|
|
53
|
+
...LargeChipProps,
|
|
54
|
+
size?: 'medium',
|
|
50
55
|
};
|
|
51
56
|
|
|
52
57
|
export type SmallChipProps = {
|
|
@@ -54,7 +59,7 @@ export type SmallChipProps = {
|
|
|
54
59
|
size?: 'small',
|
|
55
60
|
};
|
|
56
61
|
|
|
57
|
-
export type ChipProps = MediumChipProps | SmallChipProps;
|
|
62
|
+
export type ChipProps = LargeChipProps | MediumChipProps | SmallChipProps;
|
|
58
63
|
|
|
59
64
|
export const Chip: React$AbstractComponent<ChipProps, HTMLDivElement> =
|
|
60
65
|
React.forwardRef<ChipProps, HTMLDivElement>(
|
|
@@ -114,6 +119,7 @@ export const Chip: React$AbstractComponent<ChipProps, HTMLDivElement> =
|
|
|
114
119
|
[css.warning]: semantic === CHIP_SEMANTIC.warning,
|
|
115
120
|
[css.danger]: semantic === CHIP_SEMANTIC.danger,
|
|
116
121
|
[css.secondary]: semantic === CHIP_SEMANTIC.secondary,
|
|
122
|
+
[css.large]: size === 'large',
|
|
117
123
|
[css.medium]: size === 'medium',
|
|
118
124
|
[css.small]: size === 'small',
|
|
119
125
|
[css.dismissable]: dismissable,
|
|
@@ -26,7 +26,8 @@
|
|
|
26
26
|
) from '../../styles/variables/_border.css';
|
|
27
27
|
@value (
|
|
28
28
|
size18,
|
|
29
|
-
size26
|
|
29
|
+
size26,
|
|
30
|
+
size34
|
|
30
31
|
) from '../../styles/variables/_size.css';
|
|
31
32
|
|
|
32
33
|
@value (
|
|
@@ -53,6 +54,12 @@
|
|
|
53
54
|
borderWidthTertiary colorFocusPrimary;
|
|
54
55
|
}
|
|
55
56
|
|
|
57
|
+
.large {
|
|
58
|
+
padding: spaceNone spaceXSmall;
|
|
59
|
+
height: size34;
|
|
60
|
+
min-height: size34;
|
|
61
|
+
}
|
|
62
|
+
|
|
56
63
|
.medium {
|
|
57
64
|
height: size26;
|
|
58
65
|
min-height: size26;
|
|
@@ -0,0 +1,64 @@
|
|
|
1
|
+
"use strict";
|
|
2
|
+
|
|
3
|
+
Object.defineProperty(exports, "__esModule", {
|
|
4
|
+
value: true
|
|
5
|
+
});
|
|
6
|
+
exports.ScoreBar = exports.Direction = exports.DEFAULT_COLOR_MAP = void 0;
|
|
7
|
+
var React = _interopRequireWildcard(require("react"));
|
|
8
|
+
var _invariant = _interopRequireDefault(require("invariant"));
|
|
9
|
+
var _clamp = _interopRequireDefault(require("lodash/clamp"));
|
|
10
|
+
var _color = require("../../styles/variables/_color.js");
|
|
11
|
+
var _size = require("../../styles/variables/_size");
|
|
12
|
+
var _classify = require("../../utils/classify");
|
|
13
|
+
var _scoreBar = require("../../utils/score-bar");
|
|
14
|
+
var _ScoreBarModule = _interopRequireDefault(require("./ScoreBar.module.css"));
|
|
15
|
+
function _interopRequireDefault(obj) { return obj && obj.__esModule ? obj : { default: obj }; }
|
|
16
|
+
function _getRequireWildcardCache(nodeInterop) { if (typeof WeakMap !== "function") return null; var cacheBabelInterop = new WeakMap(); var cacheNodeInterop = new WeakMap(); return (_getRequireWildcardCache = function (nodeInterop) { return nodeInterop ? cacheNodeInterop : cacheBabelInterop; })(nodeInterop); }
|
|
17
|
+
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; }
|
|
18
|
+
|
|
19
|
+
const Direction = Object.freeze({
|
|
20
|
+
horizontal: 'horizontal',
|
|
21
|
+
vertical: 'vertical'
|
|
22
|
+
});
|
|
23
|
+
exports.Direction = Direction;
|
|
24
|
+
const DEFAULT_BARS_COUNT = 5;
|
|
25
|
+
const DEFAULT_COLOR_MAP = {
|
|
26
|
+
inactive: _color.colorScoreBarInactive,
|
|
27
|
+
'100': _color.colorScoreBarLevel5,
|
|
28
|
+
'80': _color.colorScoreBarLevel4,
|
|
29
|
+
'60': _color.colorScoreBarLevel3,
|
|
30
|
+
'40': _color.colorScoreBarLevel2,
|
|
31
|
+
'20': _color.colorScoreBarLevel1
|
|
32
|
+
};
|
|
33
|
+
exports.DEFAULT_COLOR_MAP = DEFAULT_COLOR_MAP;
|
|
34
|
+
const ScoreBar = /*#__PURE__*/React.forwardRef((_ref, ref) => {
|
|
35
|
+
let {
|
|
36
|
+
score = 0,
|
|
37
|
+
colorMap = DEFAULT_COLOR_MAP,
|
|
38
|
+
totalBars = DEFAULT_BARS_COUNT,
|
|
39
|
+
direction = 'vertical',
|
|
40
|
+
classNames
|
|
41
|
+
} = _ref;
|
|
42
|
+
(0, _invariant.default)(totalBars > 0, JSON.stringify(_scoreBar.SCORE_BAR_ERRORS.INVALID_BAR_COUNT));
|
|
43
|
+
return /*#__PURE__*/React.createElement("div", {
|
|
44
|
+
ref: ref,
|
|
45
|
+
"data-testid": "ScoreBar",
|
|
46
|
+
className: (0, _classify.classify)(_ScoreBarModule.default.scoreBarWrapper, classNames?.wrapper)
|
|
47
|
+
}, /*#__PURE__*/React.createElement("div", {
|
|
48
|
+
className: (0, _classify.classify)(_ScoreBarModule.default.scoreBarContainer, classNames?.container),
|
|
49
|
+
style: {
|
|
50
|
+
'--direction': direction === Direction.horizontal ? 'row-reverse' : 'column',
|
|
51
|
+
'--height': direction === Direction.horizontal ? _size.size18 : 'unset',
|
|
52
|
+
'--width': direction === Direction.vertical ? _size.size18 : 'unset'
|
|
53
|
+
}
|
|
54
|
+
}, [...Array(totalBars).keys()].reverse().map(count => /*#__PURE__*/React.createElement("div", {
|
|
55
|
+
className: (0, _classify.classify)(_ScoreBarModule.default.bar, classNames?.bar),
|
|
56
|
+
style: {
|
|
57
|
+
'--background-color': (0, _scoreBar.getColorByScorePercentage)(totalBars, (0, _clamp.default)(score, 0, totalBars), count, colorMap),
|
|
58
|
+
'--height': direction === Direction.horizontal ? _size.size18 : _size.size2,
|
|
59
|
+
'--width': direction === Direction.vertical ? _size.size18 : _size.size2
|
|
60
|
+
},
|
|
61
|
+
key: count
|
|
62
|
+
}))));
|
|
63
|
+
});
|
|
64
|
+
exports.ScoreBar = ScoreBar;
|
|
@@ -0,0 +1,117 @@
|
|
|
1
|
+
// @flow strict
|
|
2
|
+
|
|
3
|
+
import * as React from 'react';
|
|
4
|
+
import invariant from 'invariant';
|
|
5
|
+
import clamp from 'lodash/clamp';
|
|
6
|
+
|
|
7
|
+
import {
|
|
8
|
+
colorScoreBarInactive,
|
|
9
|
+
colorScoreBarLevel1,
|
|
10
|
+
colorScoreBarLevel2,
|
|
11
|
+
colorScoreBarLevel3,
|
|
12
|
+
colorScoreBarLevel4,
|
|
13
|
+
colorScoreBarLevel5,
|
|
14
|
+
} from '../../styles/variables/_color.js';
|
|
15
|
+
import {size2, size18} from '../../styles/variables/_size';
|
|
16
|
+
import {classify} from '../../utils/classify';
|
|
17
|
+
import {
|
|
18
|
+
getColorByScorePercentage,
|
|
19
|
+
SCORE_BAR_ERRORS,
|
|
20
|
+
} from '../../utils/score-bar';
|
|
21
|
+
|
|
22
|
+
import css from './ScoreBar.module.css';
|
|
23
|
+
|
|
24
|
+
|
|
25
|
+
export const Direction = Object.freeze({
|
|
26
|
+
horizontal: 'horizontal',
|
|
27
|
+
vertical: 'vertical',
|
|
28
|
+
});
|
|
29
|
+
|
|
30
|
+
export type ClassNames = $ReadOnly<{
|
|
31
|
+
container?: string,
|
|
32
|
+
wrapper?: string,
|
|
33
|
+
bar?: string,
|
|
34
|
+
}>;
|
|
35
|
+
|
|
36
|
+
export type ScoreBarDirection = $Values<typeof Direction>;
|
|
37
|
+
export type ScoreBarColorMap = $ReadOnly<{
|
|
38
|
+
inactive: string, // percentage > score
|
|
39
|
+
'100': string, // score > 80%
|
|
40
|
+
'80': string, // score > 60% and score <= %80
|
|
41
|
+
'60': string, // score > 40% and score <= %60
|
|
42
|
+
'40': string, // score > 20% and score <= 40%
|
|
43
|
+
'20': string, // score > 0% and score <= 20%
|
|
44
|
+
}>;
|
|
45
|
+
|
|
46
|
+
export type ScoreBarProps = {
|
|
47
|
+
classNames?: ClassNames,
|
|
48
|
+
direction?: ScoreBarDirection,
|
|
49
|
+
colorMap?: ScoreBarColorMap,
|
|
50
|
+
totalBars?: number,
|
|
51
|
+
score?: number,
|
|
52
|
+
};
|
|
53
|
+
|
|
54
|
+
const DEFAULT_BARS_COUNT = 5;
|
|
55
|
+
export const DEFAULT_COLOR_MAP: ScoreBarColorMap = {
|
|
56
|
+
inactive: colorScoreBarInactive,
|
|
57
|
+
'100': colorScoreBarLevel5,
|
|
58
|
+
'80': colorScoreBarLevel4,
|
|
59
|
+
'60': colorScoreBarLevel3,
|
|
60
|
+
'40': colorScoreBarLevel2,
|
|
61
|
+
'20': colorScoreBarLevel1,
|
|
62
|
+
};
|
|
63
|
+
|
|
64
|
+
export const ScoreBar: React$AbstractComponent<ScoreBarProps, HTMLDivElement> =
|
|
65
|
+
React.forwardRef<ScoreBarProps, HTMLDivElement>(
|
|
66
|
+
(
|
|
67
|
+
{
|
|
68
|
+
score = 0,
|
|
69
|
+
colorMap = DEFAULT_COLOR_MAP,
|
|
70
|
+
totalBars = DEFAULT_BARS_COUNT,
|
|
71
|
+
direction = 'vertical',
|
|
72
|
+
classNames,
|
|
73
|
+
}: ScoreBarProps,
|
|
74
|
+
ref,
|
|
75
|
+
): React.Node => {
|
|
76
|
+
invariant(
|
|
77
|
+
totalBars > 0,
|
|
78
|
+
JSON.stringify(SCORE_BAR_ERRORS.INVALID_BAR_COUNT),
|
|
79
|
+
);
|
|
80
|
+
|
|
81
|
+
return (
|
|
82
|
+
<div
|
|
83
|
+
ref={ref}
|
|
84
|
+
data-testid="ScoreBar"
|
|
85
|
+
className={classify(css.scoreBarWrapper, classNames?.wrapper)}
|
|
86
|
+
>
|
|
87
|
+
<div
|
|
88
|
+
className={classify(css.scoreBarContainer, classNames?.container)}
|
|
89
|
+
style={{
|
|
90
|
+
'--direction':
|
|
91
|
+
direction === Direction.horizontal ? 'row-reverse' : 'column',
|
|
92
|
+
'--height': direction === Direction.horizontal ? size18 : 'unset',
|
|
93
|
+
'--width': direction === Direction.vertical ? size18 : 'unset',
|
|
94
|
+
}}
|
|
95
|
+
>
|
|
96
|
+
{[...Array(totalBars).keys()].reverse().map((count) => (
|
|
97
|
+
<div
|
|
98
|
+
className={classify(css.bar, classNames?.bar)}
|
|
99
|
+
style={{
|
|
100
|
+
'--background-color': getColorByScorePercentage(
|
|
101
|
+
totalBars,
|
|
102
|
+
clamp(score, 0, totalBars),
|
|
103
|
+
count,
|
|
104
|
+
colorMap,
|
|
105
|
+
),
|
|
106
|
+
'--height':
|
|
107
|
+
direction === Direction.horizontal ? size18 : size2,
|
|
108
|
+
'--width': direction === Direction.vertical ? size18 : size2,
|
|
109
|
+
}}
|
|
110
|
+
key={count}
|
|
111
|
+
/>
|
|
112
|
+
))}
|
|
113
|
+
</div>
|
|
114
|
+
</div>
|
|
115
|
+
);
|
|
116
|
+
},
|
|
117
|
+
);
|
|
@@ -0,0 +1,36 @@
|
|
|
1
|
+
@value (
|
|
2
|
+
borderRadiusXSmall
|
|
3
|
+
) from '../../styles/variables/_border.css';
|
|
4
|
+
@value (
|
|
5
|
+
size34,
|
|
6
|
+
size18,
|
|
7
|
+
size2
|
|
8
|
+
) from '../../styles/variables/_size.css';
|
|
9
|
+
@value (
|
|
10
|
+
spaceXXSmall,
|
|
11
|
+
spaceXSmall
|
|
12
|
+
) from '../../styles/variables/_space.css';
|
|
13
|
+
|
|
14
|
+
.scoreBarWrapper {
|
|
15
|
+
display: flex;
|
|
16
|
+
padding: spaceXSmall;
|
|
17
|
+
align-items: center;
|
|
18
|
+
justify-content: center;
|
|
19
|
+
}
|
|
20
|
+
|
|
21
|
+
.scoreBarContainer {
|
|
22
|
+
width: var(--width);
|
|
23
|
+
height: var(--height);
|
|
24
|
+
gap: calc(spaceXXSmall / 2);
|
|
25
|
+
display: flex;
|
|
26
|
+
flex-direction: var(--direction);
|
|
27
|
+
justify-content: space-between;
|
|
28
|
+
align-items: center;
|
|
29
|
+
}
|
|
30
|
+
|
|
31
|
+
.bar {
|
|
32
|
+
width: var(--width);
|
|
33
|
+
height: var(--height);
|
|
34
|
+
border-radius: borderRadiusXSmall;
|
|
35
|
+
background-color: var(--background-color);
|
|
36
|
+
}
|
|
@@ -0,0 +1,16 @@
|
|
|
1
|
+
"use strict";
|
|
2
|
+
|
|
3
|
+
Object.defineProperty(exports, "__esModule", {
|
|
4
|
+
value: true
|
|
5
|
+
});
|
|
6
|
+
var _ScoreBar = require("./ScoreBar");
|
|
7
|
+
Object.keys(_ScoreBar).forEach(function (key) {
|
|
8
|
+
if (key === "default" || key === "__esModule") return;
|
|
9
|
+
if (key in exports && exports[key] === _ScoreBar[key]) return;
|
|
10
|
+
Object.defineProperty(exports, key, {
|
|
11
|
+
enumerable: true,
|
|
12
|
+
get: function () {
|
|
13
|
+
return _ScoreBar[key];
|
|
14
|
+
}
|
|
15
|
+
});
|
|
16
|
+
});
|
package/lib/styles/index.css
CHANGED
|
@@ -160,6 +160,18 @@
|
|
|
160
160
|
|
|
161
161
|
@value colorDataViz8: #F5EBB4;
|
|
162
162
|
|
|
163
|
+
@value colorScoreBarLevel1: #e94970;
|
|
164
|
+
|
|
165
|
+
@value colorScoreBarLevel2: #e5983d;
|
|
166
|
+
|
|
167
|
+
@value colorScoreBarLevel3: #3987f3;
|
|
168
|
+
|
|
169
|
+
@value colorScoreBarLevel4: #56b988;
|
|
170
|
+
|
|
171
|
+
@value colorScoreBarLevel5: #026b37;
|
|
172
|
+
|
|
173
|
+
@value colorScoreBarInactive: #D3D2E0;
|
|
174
|
+
|
|
163
175
|
@value colorGrayLightest: #EBEBEB;
|
|
164
176
|
|
|
165
177
|
@value colorNeutral: #706F9B;
|
package/lib/styles/index.js
CHANGED
|
@@ -3,9 +3,9 @@
|
|
|
3
3
|
Object.defineProperty(exports, "__esModule", {
|
|
4
4
|
value: true
|
|
5
5
|
});
|
|
6
|
-
exports.
|
|
7
|
-
exports.
|
|
8
|
-
exports.spaceXXSmall = exports.spaceXXLarge = exports.spaceXSmall = exports.spaceXLarge = exports.spaceSmall = exports.spaceNone = exports.spaceNegHalfFluid = exports.spaceNegFluid = exports.spaceMedium = exports.spaceLarge = exports.spaceHalfFluid = exports.spaceFluid = exports.sizeFullViewportWidth = exports.sizeFullViewportHeight = exports.sizeFluid = exports.size960 = exports.size90 = exports.size880 = exports.size800 = exports.size8 = exports.size720 = exports.size70 = exports.size660 = exports.size66 = exports.size640 = exports.size60 = exports.size580 = exports.size58 = exports.size540 = exports.size500 = exports.size50 = exports.size5 = exports.size480 = exports.size48 = exports.size44 = exports.size42 = exports.size400 = exports.size40 = exports.size4 = exports.size380 = exports.size38 = exports.size36 = exports.size34 = exports.size320 = exports.size32 = exports.size300 = exports.size30 = exports.size28 = exports.size276 = exports.size260 = exports.size26 = exports.size252 = exports.size240 = exports.size24 = exports.size228 = exports.size22 = exports.size200 = exports.size20 = void 0;
|
|
6
|
+
exports.colorTextInversePrimary = exports.colorTextInformation = exports.colorTextFavorite = exports.colorTextDisabled = exports.colorTextDanger = exports.colorTextClickable = exports.colorSuccessLightest = exports.colorSuccessLight = exports.colorSuccessDarkest = exports.colorSuccessDark = exports.colorSuccess = exports.colorSubMenuStar = exports.colorSubMenuBackgroundDefault = exports.colorSideMenuIconDefault = exports.colorSideMenuIconActive = exports.colorSideMenuBackgroundSelected = exports.colorSideMenuBackgroundHovered = exports.colorSideMenuBackgroundDefault = exports.colorSideMenuAccountBarFill = exports.colorScoreBarLevel5 = exports.colorScoreBarLevel4 = exports.colorScoreBarLevel3 = exports.colorScoreBarLevel2 = exports.colorScoreBarLevel1 = exports.colorScoreBarInactive = exports.colorNeutralLightest = exports.colorNeutralLight = exports.colorNeutralDarkest = exports.colorNeutralDark = exports.colorNeutral = exports.colorInformationLightest = exports.colorInformationLight = exports.colorInformationDarkest = exports.colorInformationDark = exports.colorInformation = exports.colorGroupMenuTextDefault = exports.colorGroupMenuBackgroundSelected = exports.colorGroupMenuBackgroundHovered = exports.colorGroupMenuBackgroundDefault = exports.colorGrayLightest = exports.colorFocusPrimary = exports.colorFocusDanger = exports.colorFillSecondary = exports.colorFillPrimary = exports.colorFillNone = exports.colorFillInversePrimary = exports.colorFillDisabled = exports.colorDataViz8 = exports.colorDataViz7 = exports.colorDataViz6 = exports.colorDataViz5 = exports.colorDataViz4 = exports.colorDataViz3 = exports.colorDataViz2 = exports.colorDataViz1 = exports.colorDangerLightest = exports.colorDangerLight = exports.colorDangerDarkest = exports.colorDangerDark = exports.colorDanger = exports.colorButtonFillTertiaryPressed = exports.colorButtonFillTertiaryHovered = exports.colorButtonFillTertiaryEnabled = exports.colorButtonFillTableActionPressed = exports.colorButtonFillTableActionHovered = exports.colorButtonFillTableActionEnabled = exports.colorButtonFillTableActionBorder = exports.colorButtonFillSecondaryPressed = exports.colorButtonFillSecondaryHovered = exports.colorButtonFillSecondaryEnabled = exports.colorButtonFillPrimaryPressed = exports.colorButtonFillPrimaryHovered = exports.colorButtonFillPrimaryEnabled = exports.colorButtonFillGhostPressed = exports.colorButtonFillGhostHovered = exports.colorButtonFillGhostEnabled = exports.colorButtonFillDangerPressed = exports.colorButtonFillDangerHovered = exports.colorButtonFillDangerEnabled = exports.colorBorderTertiary = exports.colorBorderSecondary = exports.colorBorderPrimary = exports.colorBorderDanger = exports.colorBackgroundTertiary = exports.colorBackgroundSecondary = exports.colorBackgroundPrimary = exports.colorBackgroundBrand = exports.colorBackdropFill = exports.borderWidthTertiary = exports.borderWidthSecondary = exports.borderWidthPrimary = exports.borderWidthNone = exports.borderRadiusXSmall = exports.borderRadiusXLarge = exports.borderRadiusSmall = exports.borderRadiusRadioButton = exports.borderRadiusNone = exports.borderRadiusMedium = exports.borderRadiusLarge = exports.borderRadiusCircle = void 0;
|
|
7
|
+
exports.size125 = exports.size12 = exports.size110 = exports.size100 = exports.size10 = exports.shadowBoxShadow4Y = exports.shadowBoxShadow4X = exports.shadowBoxShadow4Type = exports.shadowBoxShadow4Spread = exports.shadowBoxShadow4Color = exports.shadowBoxShadow4Blur = exports.shadowBoxShadow3Y = exports.shadowBoxShadow3X = exports.shadowBoxShadow3Type = exports.shadowBoxShadow3Spread = exports.shadowBoxShadow3Color = exports.shadowBoxShadow3Blur = exports.shadowBoxShadow2Y = exports.shadowBoxShadow2X = exports.shadowBoxShadow2Type = exports.shadowBoxShadow2Spread = exports.shadowBoxShadow2Color = exports.shadowBoxShadow2Blur = exports.shadowBoxShadow1Y = exports.shadowBoxShadow1X = exports.shadowBoxShadow1Type = exports.shadowBoxShadow1Spread = exports.shadowBoxShadow1Color = exports.shadowBoxShadow1Blur = exports.opacity95 = exports.opacity90 = exports.opacity85 = exports.opacity80 = exports.opacity70 = exports.opacity60 = exports.opacity50 = exports.opacity5 = exports.opacity40 = exports.opacity30 = exports.opacity20 = exports.opacity15 = exports.opacity100 = exports.opacity10 = exports.opacity0 = exports.motionEaseInEaseOut = exports.motionDurationSlowest = exports.motionDurationSlower = exports.motionDurationSlow = exports.motionDurationNormal = exports.motionDurationFast = exports.fontWeightMedium = exports.fontWeightBook = exports.fontTextDecorationNone = exports.fontTextCaseNone = exports.fontSize46 = exports.fontSize36 = exports.fontSize26 = exports.fontSize24 = exports.fontSize18 = exports.fontSize16 = exports.fontSize14 = exports.fontSize13 = exports.fontSize12 = exports.fontParagraphSpacing0 = exports.fontLineHeight170 = exports.fontLineHeight150 = exports.fontLineHeight140 = exports.fontLineHeight130 = exports.fontLineHeight125 = exports.fontLineHeight120 = exports.fontLineHeight100 = exports.fontLetterSpacingMinus4 = exports.fontLetterSpacingMinus3 = exports.fontLetterSpacingMinus2 = exports.fontLetterSpacingMinus1 = exports.fontLetterSpacing4 = exports.fontLetterSpacing2 = exports.fontLetterSpacing1 = exports.fontLetterSpacing0 = exports.fontFamilyCentra = exports.elevationTooltip = exports.elevationToast = exports.elevationNone = exports.elevationModal = exports.elevationMenu = exports.elevationCard = exports.elevationBackdrop = exports.colorWarningLightest = exports.colorWarningLight = exports.colorWarningDarkest = exports.colorWarningDark = exports.colorWarning = exports.colorTooltipFill = exports.colorTextWarning = exports.colorTextTertiary = exports.colorTextSuccess = exports.colorTextSecondary = exports.colorTextPrimary = exports.colorTextNeutral = exports.colorTextInverseSecondary = void 0;
|
|
8
|
+
exports.spaceXXSmall = exports.spaceXXLarge = exports.spaceXSmall = exports.spaceXLarge = exports.spaceSmall = exports.spaceNone = exports.spaceNegHalfFluid = exports.spaceNegFluid = exports.spaceMedium = exports.spaceLarge = exports.spaceHalfFluid = exports.spaceFluid = exports.sizeFullViewportWidth = exports.sizeFullViewportHeight = exports.sizeFluid = exports.size960 = exports.size90 = exports.size880 = exports.size800 = exports.size8 = exports.size720 = exports.size70 = exports.size660 = exports.size66 = exports.size640 = exports.size60 = exports.size580 = exports.size58 = exports.size540 = exports.size500 = exports.size50 = exports.size5 = exports.size480 = exports.size48 = exports.size44 = exports.size42 = exports.size400 = exports.size40 = exports.size4 = exports.size380 = exports.size38 = exports.size36 = exports.size34 = exports.size320 = exports.size32 = exports.size300 = exports.size30 = exports.size28 = exports.size276 = exports.size260 = exports.size26 = exports.size252 = exports.size240 = exports.size24 = exports.size228 = exports.size22 = exports.size200 = exports.size20 = exports.size2 = exports.size180 = exports.size18 = exports.size160 = exports.size140 = exports.size1280 = void 0;
|
|
9
9
|
|
|
10
10
|
const borderWidthNone = '0px';
|
|
11
11
|
exports.borderWidthNone = borderWidthNone;
|
|
@@ -169,6 +169,18 @@ const colorDataViz7 = '#F5B8E1';
|
|
|
169
169
|
exports.colorDataViz7 = colorDataViz7;
|
|
170
170
|
const colorDataViz8 = '#F5EBB4';
|
|
171
171
|
exports.colorDataViz8 = colorDataViz8;
|
|
172
|
+
const colorScoreBarLevel1 = '#e94970';
|
|
173
|
+
exports.colorScoreBarLevel1 = colorScoreBarLevel1;
|
|
174
|
+
const colorScoreBarLevel2 = '#e5983d';
|
|
175
|
+
exports.colorScoreBarLevel2 = colorScoreBarLevel2;
|
|
176
|
+
const colorScoreBarLevel3 = '#3987f3';
|
|
177
|
+
exports.colorScoreBarLevel3 = colorScoreBarLevel3;
|
|
178
|
+
const colorScoreBarLevel4 = '#56b988';
|
|
179
|
+
exports.colorScoreBarLevel4 = colorScoreBarLevel4;
|
|
180
|
+
const colorScoreBarLevel5 = '#026b37';
|
|
181
|
+
exports.colorScoreBarLevel5 = colorScoreBarLevel5;
|
|
182
|
+
const colorScoreBarInactive = '#D3D2E0';
|
|
183
|
+
exports.colorScoreBarInactive = colorScoreBarInactive;
|
|
172
184
|
const colorGrayLightest = '#EBEBEB';
|
|
173
185
|
exports.colorGrayLightest = colorGrayLightest;
|
|
174
186
|
const colorNeutral = '#706F9B';
|
package/lib/styles/index.js.flow
CHANGED
|
@@ -162,6 +162,18 @@ export const colorDataViz7 = '#F5B8E1';
|
|
|
162
162
|
|
|
163
163
|
export const colorDataViz8 = '#F5EBB4';
|
|
164
164
|
|
|
165
|
+
export const colorScoreBarLevel1 = '#e94970';
|
|
166
|
+
|
|
167
|
+
export const colorScoreBarLevel2 = '#e5983d';
|
|
168
|
+
|
|
169
|
+
export const colorScoreBarLevel3 = '#3987f3';
|
|
170
|
+
|
|
171
|
+
export const colorScoreBarLevel4 = '#56b988';
|
|
172
|
+
|
|
173
|
+
export const colorScoreBarLevel5 = '#026b37';
|
|
174
|
+
|
|
175
|
+
export const colorScoreBarInactive = '#D3D2E0';
|
|
176
|
+
|
|
165
177
|
export const colorGrayLightest = '#EBEBEB';
|
|
166
178
|
|
|
167
179
|
export const colorNeutral = '#706F9B';
|
|
@@ -136,6 +136,18 @@
|
|
|
136
136
|
|
|
137
137
|
@value colorDataViz8: #F5EBB4;
|
|
138
138
|
|
|
139
|
+
@value colorScoreBarLevel1: #e94970;
|
|
140
|
+
|
|
141
|
+
@value colorScoreBarLevel2: #e5983d;
|
|
142
|
+
|
|
143
|
+
@value colorScoreBarLevel3: #3987f3;
|
|
144
|
+
|
|
145
|
+
@value colorScoreBarLevel4: #56b988;
|
|
146
|
+
|
|
147
|
+
@value colorScoreBarLevel5: #026b37;
|
|
148
|
+
|
|
149
|
+
@value colorScoreBarInactive: #D3D2E0;
|
|
150
|
+
|
|
139
151
|
@value colorGrayLightest: #EBEBEB;
|
|
140
152
|
|
|
141
153
|
@value colorNeutral: #706F9B;
|
|
@@ -3,7 +3,8 @@
|
|
|
3
3
|
Object.defineProperty(exports, "__esModule", {
|
|
4
4
|
value: true
|
|
5
5
|
});
|
|
6
|
-
exports.
|
|
6
|
+
exports.colorWarningLight = exports.colorWarningDarkest = exports.colorWarningDark = exports.colorWarning = exports.colorTooltipFill = exports.colorTextWarning = exports.colorTextTertiary = exports.colorTextSuccess = exports.colorTextSecondary = exports.colorTextPrimary = exports.colorTextNeutral = exports.colorTextInverseSecondary = exports.colorTextInversePrimary = exports.colorTextInformation = exports.colorTextFavorite = exports.colorTextDisabled = exports.colorTextDanger = exports.colorTextClickable = exports.colorSuccessLightest = exports.colorSuccessLight = exports.colorSuccessDarkest = exports.colorSuccessDark = exports.colorSuccess = exports.colorSubMenuStar = exports.colorSubMenuBackgroundDefault = exports.colorSideMenuIconDefault = exports.colorSideMenuIconActive = exports.colorSideMenuBackgroundSelected = exports.colorSideMenuBackgroundHovered = exports.colorSideMenuBackgroundDefault = exports.colorSideMenuAccountBarFill = exports.colorScoreBarLevel5 = exports.colorScoreBarLevel4 = exports.colorScoreBarLevel3 = exports.colorScoreBarLevel2 = exports.colorScoreBarLevel1 = exports.colorScoreBarInactive = exports.colorNeutralLightest = exports.colorNeutralLight = exports.colorNeutralDarkest = exports.colorNeutralDark = exports.colorNeutral = exports.colorInformationLightest = exports.colorInformationLight = exports.colorInformationDarkest = exports.colorInformationDark = exports.colorInformation = exports.colorGroupMenuTextDefault = exports.colorGroupMenuBackgroundSelected = exports.colorGroupMenuBackgroundHovered = exports.colorGroupMenuBackgroundDefault = exports.colorGrayLightest = exports.colorFocusPrimary = exports.colorFocusDanger = exports.colorFillSecondary = exports.colorFillPrimary = exports.colorFillNone = exports.colorFillInversePrimary = exports.colorFillDisabled = exports.colorDataViz8 = exports.colorDataViz7 = exports.colorDataViz6 = exports.colorDataViz5 = exports.colorDataViz4 = exports.colorDataViz3 = exports.colorDataViz2 = exports.colorDataViz1 = exports.colorDangerLightest = exports.colorDangerLight = exports.colorDangerDarkest = exports.colorDangerDark = exports.colorDanger = exports.colorButtonFillTertiaryPressed = exports.colorButtonFillTertiaryHovered = exports.colorButtonFillTertiaryEnabled = exports.colorButtonFillTableActionPressed = exports.colorButtonFillTableActionHovered = exports.colorButtonFillTableActionEnabled = exports.colorButtonFillTableActionBorder = exports.colorButtonFillSecondaryPressed = exports.colorButtonFillSecondaryHovered = exports.colorButtonFillSecondaryEnabled = exports.colorButtonFillPrimaryPressed = exports.colorButtonFillPrimaryHovered = exports.colorButtonFillPrimaryEnabled = exports.colorButtonFillGhostPressed = exports.colorButtonFillGhostHovered = exports.colorButtonFillGhostEnabled = exports.colorButtonFillDangerPressed = exports.colorButtonFillDangerHovered = exports.colorButtonFillDangerEnabled = exports.colorBorderTertiary = exports.colorBorderSecondary = exports.colorBorderPrimary = exports.colorBorderDanger = exports.colorBackgroundTertiary = exports.colorBackgroundSecondary = exports.colorBackgroundPrimary = exports.colorBackgroundBrand = exports.colorBackdropFill = void 0;
|
|
7
|
+
exports.colorWarningLightest = void 0;
|
|
7
8
|
|
|
8
9
|
const colorTextPrimary = '#17172A';
|
|
9
10
|
exports.colorTextPrimary = colorTextPrimary;
|
|
@@ -143,6 +144,18 @@ const colorDataViz7 = '#F5B8E1';
|
|
|
143
144
|
exports.colorDataViz7 = colorDataViz7;
|
|
144
145
|
const colorDataViz8 = '#F5EBB4';
|
|
145
146
|
exports.colorDataViz8 = colorDataViz8;
|
|
147
|
+
const colorScoreBarLevel1 = '#e94970';
|
|
148
|
+
exports.colorScoreBarLevel1 = colorScoreBarLevel1;
|
|
149
|
+
const colorScoreBarLevel2 = '#e5983d';
|
|
150
|
+
exports.colorScoreBarLevel2 = colorScoreBarLevel2;
|
|
151
|
+
const colorScoreBarLevel3 = '#3987f3';
|
|
152
|
+
exports.colorScoreBarLevel3 = colorScoreBarLevel3;
|
|
153
|
+
const colorScoreBarLevel4 = '#56b988';
|
|
154
|
+
exports.colorScoreBarLevel4 = colorScoreBarLevel4;
|
|
155
|
+
const colorScoreBarLevel5 = '#026b37';
|
|
156
|
+
exports.colorScoreBarLevel5 = colorScoreBarLevel5;
|
|
157
|
+
const colorScoreBarInactive = '#D3D2E0';
|
|
158
|
+
exports.colorScoreBarInactive = colorScoreBarInactive;
|
|
146
159
|
const colorGrayLightest = '#EBEBEB';
|
|
147
160
|
exports.colorGrayLightest = colorGrayLightest;
|
|
148
161
|
const colorNeutral = '#706F9B';
|
|
@@ -138,6 +138,18 @@ export const colorDataViz7 = '#F5B8E1';
|
|
|
138
138
|
|
|
139
139
|
export const colorDataViz8 = '#F5EBB4';
|
|
140
140
|
|
|
141
|
+
export const colorScoreBarLevel1 = '#e94970';
|
|
142
|
+
|
|
143
|
+
export const colorScoreBarLevel2 = '#e5983d';
|
|
144
|
+
|
|
145
|
+
export const colorScoreBarLevel3 = '#3987f3';
|
|
146
|
+
|
|
147
|
+
export const colorScoreBarLevel4 = '#56b988';
|
|
148
|
+
|
|
149
|
+
export const colorScoreBarLevel5 = '#026b37';
|
|
150
|
+
|
|
151
|
+
export const colorScoreBarInactive = '#D3D2E0';
|
|
152
|
+
|
|
141
153
|
export const colorGrayLightest = '#EBEBEB';
|
|
142
154
|
|
|
143
155
|
export const colorNeutral = '#706F9B';
|
package/lib/utils/index.js
CHANGED
|
@@ -124,6 +124,17 @@ Object.keys(_rating).forEach(function (key) {
|
|
|
124
124
|
}
|
|
125
125
|
});
|
|
126
126
|
});
|
|
127
|
+
var _scoreBar = require("./score-bar");
|
|
128
|
+
Object.keys(_scoreBar).forEach(function (key) {
|
|
129
|
+
if (key === "default" || key === "__esModule") return;
|
|
130
|
+
if (key in exports && exports[key] === _scoreBar[key]) return;
|
|
131
|
+
Object.defineProperty(exports, key, {
|
|
132
|
+
enumerable: true,
|
|
133
|
+
get: function () {
|
|
134
|
+
return _scoreBar[key];
|
|
135
|
+
}
|
|
136
|
+
});
|
|
137
|
+
});
|
|
127
138
|
var _string = require("./string");
|
|
128
139
|
Object.keys(_string).forEach(function (key) {
|
|
129
140
|
if (key === "default" || key === "__esModule") return;
|
package/lib/utils/index.js.flow
CHANGED
|
@@ -0,0 +1,16 @@
|
|
|
1
|
+
"use strict";
|
|
2
|
+
|
|
3
|
+
Object.defineProperty(exports, "__esModule", {
|
|
4
|
+
value: true
|
|
5
|
+
});
|
|
6
|
+
var _scoreBar = require("./score-bar");
|
|
7
|
+
Object.keys(_scoreBar).forEach(function (key) {
|
|
8
|
+
if (key === "default" || key === "__esModule") return;
|
|
9
|
+
if (key in exports && exports[key] === _scoreBar[key]) return;
|
|
10
|
+
Object.defineProperty(exports, key, {
|
|
11
|
+
enumerable: true,
|
|
12
|
+
get: function () {
|
|
13
|
+
return _scoreBar[key];
|
|
14
|
+
}
|
|
15
|
+
});
|
|
16
|
+
});
|
|
@@ -0,0 +1,27 @@
|
|
|
1
|
+
"use strict";
|
|
2
|
+
|
|
3
|
+
Object.defineProperty(exports, "__esModule", {
|
|
4
|
+
value: true
|
|
5
|
+
});
|
|
6
|
+
exports.getColorByScorePercentage = exports.SCORE_BAR_ERRORS = void 0;
|
|
7
|
+
|
|
8
|
+
const getColorByPercentage = (totalBars, score, colorMap) => {
|
|
9
|
+
if (score <= 0) {
|
|
10
|
+
return colorMap.inactive;
|
|
11
|
+
}
|
|
12
|
+
const scorePercentage = 100 * score / totalBars;
|
|
13
|
+
const range = Math.min(Math.ceil(scorePercentage / 20) * 20, 100);
|
|
14
|
+
return colorMap[range.toString()] || colorMap.inactive;
|
|
15
|
+
};
|
|
16
|
+
const getColorByScorePercentage = (totalBars, score, currentBarNumber, colorMap) => {
|
|
17
|
+
const validColor = getColorByPercentage(totalBars, score, colorMap);
|
|
18
|
+
return currentBarNumber < score ? validColor : colorMap.inactive;
|
|
19
|
+
};
|
|
20
|
+
exports.getColorByScorePercentage = getColorByScorePercentage;
|
|
21
|
+
const SCORE_BAR_ERRORS = Object.freeze({
|
|
22
|
+
INVALID_BAR_COUNT: {
|
|
23
|
+
type: 'INVALID_BAR_COUNT',
|
|
24
|
+
description: 'totalBars can not be less than 1'
|
|
25
|
+
}
|
|
26
|
+
});
|
|
27
|
+
exports.SCORE_BAR_ERRORS = SCORE_BAR_ERRORS;
|
|
@@ -0,0 +1,33 @@
|
|
|
1
|
+
// @flow strict
|
|
2
|
+
import type {ScoreBarColorMap} from '../../components/ScoreBar';
|
|
3
|
+
|
|
4
|
+
|
|
5
|
+
const getColorByPercentage = (
|
|
6
|
+
totalBars: number,
|
|
7
|
+
score: number,
|
|
8
|
+
colorMap: ScoreBarColorMap,
|
|
9
|
+
): string => {
|
|
10
|
+
if (score <= 0) {
|
|
11
|
+
return colorMap.inactive;
|
|
12
|
+
}
|
|
13
|
+
const scorePercentage = (100 * score) / totalBars;
|
|
14
|
+
const range = Math.min(Math.ceil(scorePercentage / 20) * 20, 100);
|
|
15
|
+
return colorMap[range.toString()] || colorMap.inactive;
|
|
16
|
+
};
|
|
17
|
+
|
|
18
|
+
export const getColorByScorePercentage = (
|
|
19
|
+
totalBars: number,
|
|
20
|
+
score: number,
|
|
21
|
+
currentBarNumber: number,
|
|
22
|
+
colorMap: ScoreBarColorMap,
|
|
23
|
+
): string => {
|
|
24
|
+
const validColor = getColorByPercentage(totalBars, score, colorMap);
|
|
25
|
+
return currentBarNumber < score ? validColor : colorMap.inactive;
|
|
26
|
+
};
|
|
27
|
+
|
|
28
|
+
export const SCORE_BAR_ERRORS = Object.freeze({
|
|
29
|
+
INVALID_BAR_COUNT: {
|
|
30
|
+
type: 'INVALID_BAR_COUNT',
|
|
31
|
+
description: 'totalBars can not be less than 1',
|
|
32
|
+
},
|
|
33
|
+
});
|