@pingux/astro 2.5.5 → 2.5.6-alpha.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/lib/cjs/components/RockerButton/RockerButton.js +30 -9
- package/lib/cjs/components/RockerButton/RockerButton.styles.js +6 -3
- package/lib/cjs/components/RockerButtonGroup/RockerButtonGroup.test.js +40 -1
- package/lib/cjs/styles/colors.js +22 -3
- package/lib/components/RockerButton/RockerButton.js +30 -9
- package/lib/components/RockerButton/RockerButton.styles.js +6 -3
- package/lib/components/RockerButtonGroup/RockerButtonGroup.test.js +40 -1
- package/lib/styles/colors.js +18 -1
- package/package.json +1 -1
- package/NOTICE.html +0 -12821
@@ -20,9 +20,12 @@ var _defineProperty2 = _interopRequireDefault(require("@babel/runtime-corejs3/he
|
|
20
20
|
var _react = _interopRequireWildcard(require("react"));
|
21
21
|
var _reactAria = require("react-aria");
|
22
22
|
var _reactStately = require("react-stately");
|
23
|
+
var _interactions = require("@react-aria/interactions");
|
24
|
+
var _utils = require("@react-aria/utils");
|
23
25
|
var _propTypes = _interopRequireDefault(require("prop-types"));
|
24
26
|
var _hooks = require("../../hooks");
|
25
27
|
var _index = require("../../index");
|
28
|
+
var _colors = require("../../styles/colors");
|
26
29
|
var _RockerButtonGroup = require("../RockerButtonGroup");
|
27
30
|
var _react2 = require("@emotion/react");
|
28
31
|
function _getRequireWildcardCache(nodeInterop) { if (typeof _WeakMap !== "function") return null; var cacheBabelInterop = new _WeakMap(); var cacheNodeInterop = new _WeakMap(); return (_getRequireWildcardCache = function _getRequireWildcardCache(nodeInterop) { return nodeInterop ? cacheNodeInterop : cacheBabelInterop; })(nodeInterop); }
|
@@ -30,6 +33,7 @@ function _interopRequireWildcard(obj, nodeInterop) { if (!nodeInterop && obj &&
|
|
30
33
|
function ownKeys(object, enumerableOnly) { var keys = _Object$keys(object); if (_Object$getOwnPropertySymbols) { var symbols = _Object$getOwnPropertySymbols(object); enumerableOnly && (symbols = _filterInstanceProperty(symbols).call(symbols, function (sym) { return _Object$getOwnPropertyDescriptor(object, sym).enumerable; })), keys.push.apply(keys, symbols); } return keys; }
|
31
34
|
function _objectSpread(target) { for (var i = 1; i < arguments.length; i++) { var _context, _context2; var source = null != arguments[i] ? arguments[i] : {}; i % 2 ? _forEachInstanceProperty(_context = ownKeys(Object(source), !0)).call(_context, function (key) { (0, _defineProperty2["default"])(target, key, source[key]); }) : _Object$getOwnPropertyDescriptors ? _Object$defineProperties(target, _Object$getOwnPropertyDescriptors(source)) : _forEachInstanceProperty(_context2 = ownKeys(Object(source))).call(_context2, function (key) { _Object$defineProperty(target, key, _Object$getOwnPropertyDescriptor(source, key)); }); } return target; }
|
32
35
|
var CollectionRockerButton = /*#__PURE__*/(0, _react.forwardRef)(function (props, ref) {
|
36
|
+
var _itemProps$selectedSt, _itemProps$selectedSt2;
|
33
37
|
var className = props.className,
|
34
38
|
item = props.item;
|
35
39
|
var key = item.key,
|
@@ -38,12 +42,21 @@ var CollectionRockerButton = /*#__PURE__*/(0, _react.forwardRef)(function (props
|
|
38
42
|
var state = (0, _react.useContext)(_RockerButtonGroup.RockerContext);
|
39
43
|
var isDisabled = state.disabledKeys.has(key);
|
40
44
|
var isSelected = state.selectedKey === key;
|
45
|
+
var rockerButtonRef = (0, _react.useRef)();
|
46
|
+
var _useHover = (0, _interactions.useHover)({}),
|
47
|
+
hoverProps = _useHover.hoverProps,
|
48
|
+
isHovered = _useHover.isHovered;
|
49
|
+
var _usePress = (0, _interactions.usePress)(rockerButtonRef),
|
50
|
+
pressProps = _usePress.pressProps,
|
51
|
+
isPressed = _usePress.isPressed;
|
41
52
|
var _useStatusClasses = (0, _hooks.useStatusClasses)(className, {
|
53
|
+
isHovered: isHovered,
|
54
|
+
isPressed: isPressed,
|
42
55
|
isSelected: isSelected,
|
43
56
|
isDisabled: isDisabled
|
44
57
|
}),
|
45
58
|
classNames = _useStatusClasses.classNames;
|
46
|
-
var
|
59
|
+
var backgroundHexColor = (_itemProps$selectedSt = itemProps.selectedStyles) !== null && _itemProps$selectedSt !== void 0 && _itemProps$selectedSt.bg ? (0, _colors.getBaseHexColor)((_itemProps$selectedSt2 = itemProps.selectedStyles) === null || _itemProps$selectedSt2 === void 0 ? void 0 : _itemProps$selectedSt2.bg) : _colors.accent[20];
|
47
60
|
(0, _hooks.usePropWarning)(props, 'disabled', 'isDisabled');
|
48
61
|
/* istanbul ignore next */
|
49
62
|
(0, _react.useImperativeHandle)(ref, function () {
|
@@ -60,26 +73,34 @@ var CollectionRockerButton = /*#__PURE__*/(0, _react.forwardRef)(function (props
|
|
60
73
|
}, (0, _react2.jsx)(_index.Box, (0, _extends2["default"])({
|
61
74
|
as: "button",
|
62
75
|
className: classNames,
|
63
|
-
variant: "variants.rockerButton.thumbSwitch"
|
64
|
-
|
65
|
-
ref: rockerButtonRef
|
66
|
-
}, itemProps, {
|
76
|
+
variant: "variants.rockerButton.thumbSwitch",
|
77
|
+
ref: rockerButtonRef,
|
67
78
|
sx: {
|
68
|
-
'&.is-selected': _objectSpread({}, itemProps.selectedStyles)
|
79
|
+
'&.is-selected': _objectSpread({}, itemProps.selectedStyles),
|
80
|
+
'&.is-selected.is-hovered': {
|
81
|
+
bg: (0, _colors.getDarkerColor)(backgroundHexColor, 0.2)
|
82
|
+
},
|
83
|
+
'&.is-selected.is-pressed': {
|
84
|
+
bg: (0, _colors.getDarkerColor)(backgroundHexColor, 0.4)
|
85
|
+
}
|
69
86
|
}
|
70
|
-
}), rendered));
|
87
|
+
}, (0, _utils.mergeProps)(hoverProps, pressProps, itemProps, rockerButtonProps)), rendered));
|
71
88
|
});
|
72
89
|
exports.CollectionRockerButton = CollectionRockerButton;
|
73
90
|
CollectionRockerButton.displayName = 'CollectionRockerButton';
|
74
91
|
CollectionRockerButton.propTypes = {
|
75
92
|
/** Allows custom styles to be passed to button. */
|
76
|
-
selectedStyles: _propTypes["default"].shape({
|
93
|
+
selectedStyles: _propTypes["default"].shape({
|
94
|
+
bg: _propTypes["default"].string
|
95
|
+
}),
|
77
96
|
// adding to surface in props table
|
78
97
|
/** @ignore */
|
79
98
|
item: _propTypes["default"].shape({
|
80
99
|
key: _propTypes["default"].string,
|
81
100
|
props: _propTypes["default"].shape({
|
82
|
-
selectedStyles: _propTypes["default"].shape({
|
101
|
+
selectedStyles: _propTypes["default"].shape({
|
102
|
+
bg: _propTypes["default"].string
|
103
|
+
})
|
83
104
|
}),
|
84
105
|
rendered: _propTypes["default"].node
|
85
106
|
})
|
@@ -33,7 +33,7 @@ var thumbSwitch = _objectSpread(_objectSpread({}, _Buttons.base), {}, {
|
|
33
33
|
display: 'inline-flex',
|
34
34
|
height: '26px',
|
35
35
|
lineHeight: '26px',
|
36
|
-
fontSize: '
|
36
|
+
fontSize: '13px',
|
37
37
|
borderRadius: '15px',
|
38
38
|
alignSelf: 'center',
|
39
39
|
paddingTop: '0px',
|
@@ -41,11 +41,14 @@ var thumbSwitch = _objectSpread(_objectSpread({}, _Buttons.base), {}, {
|
|
41
41
|
textTransform: 'uppercase',
|
42
42
|
bg: 'accent.95',
|
43
43
|
'&.is-selected': {
|
44
|
-
bg: '
|
44
|
+
bg: 'accent.20',
|
45
45
|
color: 'white',
|
46
46
|
zIndex: '1'
|
47
47
|
},
|
48
|
-
'&.is-focused': _objectSpread({}, _Buttons.defaultFocus)
|
48
|
+
'&.is-focused': _objectSpread({}, _Buttons.defaultFocus),
|
49
|
+
'&.is-hovered': {
|
50
|
+
bg: 'white'
|
51
|
+
}
|
49
52
|
});
|
50
53
|
var _default = {
|
51
54
|
container: container,
|
@@ -19,7 +19,10 @@ var testButtons = [{
|
|
19
19
|
}
|
20
20
|
}, {
|
21
21
|
name: 'Or',
|
22
|
-
key: 'Or'
|
22
|
+
key: 'Or',
|
23
|
+
selectedStyles: {
|
24
|
+
bg: 'accent.30'
|
25
|
+
}
|
23
26
|
}, {
|
24
27
|
name: 'Maybe?',
|
25
28
|
key: 'Maybe?'
|
@@ -93,4 +96,40 @@ test('selected button can be changed by keyboard interaction', function () {
|
|
93
96
|
});
|
94
97
|
expect(_testWrapper.screen.getByText(testButtons[1].key)).toHaveClass('is-selected');
|
95
98
|
expect(_testWrapper.screen.getByText(testButtons[0].key)).not.toHaveClass('is-selected');
|
99
|
+
});
|
100
|
+
test('rockerButton renders correct darker bg when selectedStyles prop is passed', function () {
|
101
|
+
getComponent();
|
102
|
+
var button0 = _testWrapper.screen.getByText(testButtons[0].key);
|
103
|
+
expect(button0).toHaveClass('is-selected');
|
104
|
+
expect(button0).toHaveStyle('background-color: #640099');
|
105
|
+
_userEvent["default"].hover(button0);
|
106
|
+
expect(button0).toHaveClass('is-selected');
|
107
|
+
expect(button0).toHaveClass('is-hovered');
|
108
|
+
expect(button0).toHaveStyle('background-color: #590089');
|
109
|
+
_testWrapper.fireEvent.keyDown(button0, {
|
110
|
+
key: 'Enter',
|
111
|
+
code: 13
|
112
|
+
});
|
113
|
+
expect(button0).toHaveClass('is-selected');
|
114
|
+
expect(button0).toHaveClass('is-pressed');
|
115
|
+
expect(button0).toHaveStyle('background-color: #4d0077');
|
116
|
+
});
|
117
|
+
test('rockerButton renders correct bg when selectedStyles prop is css variable', function () {
|
118
|
+
getComponent();
|
119
|
+
var button1 = _testWrapper.screen.getByText(testButtons[1].key);
|
120
|
+
_testWrapper.fireEvent.keyDown(_testWrapper.screen.getByText(testButtons[0].key), {
|
121
|
+
key: 'ArrowRight',
|
122
|
+
code: 'ArrowRight'
|
123
|
+
});
|
124
|
+
_userEvent["default"].hover(button1);
|
125
|
+
expect(button1).toHaveClass('is-selected');
|
126
|
+
expect(button1).toHaveClass('is-hovered');
|
127
|
+
expect(button1).toHaveStyle('background-color: #364872');
|
128
|
+
_testWrapper.fireEvent.keyDown(button1, {
|
129
|
+
key: 'Enter',
|
130
|
+
code: 13
|
131
|
+
});
|
132
|
+
expect(button1).toHaveClass('is-selected');
|
133
|
+
expect(button1).toHaveClass('is-pressed');
|
134
|
+
expect(button1).toHaveStyle('background-color: #2e3e63');
|
96
135
|
});
|
package/lib/cjs/styles/colors.js
CHANGED
@@ -5,13 +5,14 @@ var _interopRequireDefault = require("@babel/runtime-corejs3/helpers/interopRequ
|
|
5
5
|
_Object$defineProperty(exports, "__esModule", {
|
6
6
|
value: true
|
7
7
|
});
|
8
|
-
exports.white = exports.warning = exports.text = exports.success = exports.shadow = exports.neutral = exports.line = exports.focus = exports.flatColorList = exports["default"] = exports.decorativeLight = exports.decorativeDark = exports.decorative = exports.critical = exports.button = exports.black = exports.active = exports.accent = void 0;
|
8
|
+
exports.white = exports.warning = exports.text = exports.success = exports.shadow = exports.neutral = exports.line = exports.getDarkerColor = exports.getBaseHexColor = exports.focus = exports.flatColorList = exports["default"] = exports.decorativeLight = exports.decorativeDark = exports.decorative = exports.critical = exports.button = exports.black = exports.active = exports.accent = void 0;
|
9
9
|
var _typeof2 = _interopRequireDefault(require("@babel/runtime-corejs3/helpers/typeof"));
|
10
10
|
var _map = _interopRequireDefault(require("@babel/runtime-corejs3/core-js-stable/instance/map"));
|
11
11
|
var _fill = _interopRequireDefault(require("@babel/runtime-corejs3/core-js-stable/instance/fill"));
|
12
12
|
var _reduce = _interopRequireDefault(require("@babel/runtime-corejs3/core-js-stable/instance/reduce"));
|
13
13
|
var _entries = _interopRequireDefault(require("@babel/runtime-corejs3/core-js-stable/object/entries"));
|
14
14
|
var _concat = _interopRequireDefault(require("@babel/runtime-corejs3/core-js-stable/instance/concat"));
|
15
|
+
var _includes = _interopRequireDefault(require("@babel/runtime-corejs3/core-js-stable/instance/includes"));
|
15
16
|
var _slicedToArray2 = _interopRequireDefault(require("@babel/runtime-corejs3/helpers/slicedToArray"));
|
16
17
|
var _chromaJs = _interopRequireDefault(require("chroma-js"));
|
17
18
|
var _context, _context2;
|
@@ -100,9 +101,13 @@ exports.decorativeDark = decorativeDark;
|
|
100
101
|
var decorativeLight = (0, _map["default"])(decorative).call(decorative, function (color) {
|
101
102
|
return (0, _chromaJs["default"])(color).brighten(2).hex();
|
102
103
|
});
|
104
|
+
exports.decorativeLight = decorativeLight;
|
105
|
+
var getDarkerColor = function getDarkerColor(color, percentage) {
|
106
|
+
return _chromaJs["default"].valid(color) ? _chromaJs["default"].mix(color, '#000000', percentage).hex() : '';
|
107
|
+
};
|
103
108
|
|
104
109
|
// export const focus = chroma(accent[50]).alpha(0.75).hex();
|
105
|
-
exports.
|
110
|
+
exports.getDarkerColor = getDarkerColor;
|
106
111
|
var focus = (0, _chromaJs["default"])('#D033FF').hex();
|
107
112
|
|
108
113
|
// COMPONENT COLORS
|
@@ -177,4 +182,18 @@ function flattenColors(obj) {
|
|
177
182
|
|
178
183
|
/* used by Storybook's stories */
|
179
184
|
var flatColorList = flattenColors(allColors);
|
180
|
-
exports.flatColorList = flatColorList;
|
185
|
+
exports.flatColorList = flatColorList;
|
186
|
+
var getBaseHexColor = function getBaseHexColor(colorName) {
|
187
|
+
if (_chromaJs["default"].valid(colorName)) {
|
188
|
+
return colorName;
|
189
|
+
}
|
190
|
+
try {
|
191
|
+
var keys = (0, _includes["default"])(colorName).call(colorName, '.') ? colorName.split('.') : [colorName];
|
192
|
+
return (0, _reduce["default"])(keys).call(keys, function (obj, key) {
|
193
|
+
return obj[key];
|
194
|
+
}, allColors);
|
195
|
+
} catch (error) {
|
196
|
+
return accentBase;
|
197
|
+
}
|
198
|
+
};
|
199
|
+
exports.getBaseHexColor = getBaseHexColor;
|
@@ -13,12 +13,16 @@ function _objectSpread(target) { for (var i = 1; i < arguments.length; i++) { va
|
|
13
13
|
import React, { forwardRef, useContext, useImperativeHandle, useRef } from 'react';
|
14
14
|
import { FocusRing } from 'react-aria';
|
15
15
|
import { Item } from 'react-stately';
|
16
|
+
import { useHover, usePress } from '@react-aria/interactions';
|
17
|
+
import { mergeProps } from '@react-aria/utils';
|
16
18
|
import PropTypes from 'prop-types';
|
17
19
|
import { usePropWarning, useRockerButton, useStatusClasses } from '../../hooks';
|
18
20
|
import { Box } from '../../index';
|
21
|
+
import { accent, getBaseHexColor, getDarkerColor } from '../../styles/colors';
|
19
22
|
import { RockerContext } from '../RockerButtonGroup';
|
20
23
|
import { jsx as ___EmotionJSX } from "@emotion/react";
|
21
24
|
export var CollectionRockerButton = /*#__PURE__*/forwardRef(function (props, ref) {
|
25
|
+
var _itemProps$selectedSt, _itemProps$selectedSt2;
|
22
26
|
var className = props.className,
|
23
27
|
item = props.item;
|
24
28
|
var key = item.key,
|
@@ -27,12 +31,21 @@ export var CollectionRockerButton = /*#__PURE__*/forwardRef(function (props, ref
|
|
27
31
|
var state = useContext(RockerContext);
|
28
32
|
var isDisabled = state.disabledKeys.has(key);
|
29
33
|
var isSelected = state.selectedKey === key;
|
34
|
+
var rockerButtonRef = useRef();
|
35
|
+
var _useHover = useHover({}),
|
36
|
+
hoverProps = _useHover.hoverProps,
|
37
|
+
isHovered = _useHover.isHovered;
|
38
|
+
var _usePress = usePress(rockerButtonRef),
|
39
|
+
pressProps = _usePress.pressProps,
|
40
|
+
isPressed = _usePress.isPressed;
|
30
41
|
var _useStatusClasses = useStatusClasses(className, {
|
42
|
+
isHovered: isHovered,
|
43
|
+
isPressed: isPressed,
|
31
44
|
isSelected: isSelected,
|
32
45
|
isDisabled: isDisabled
|
33
46
|
}),
|
34
47
|
classNames = _useStatusClasses.classNames;
|
35
|
-
var
|
48
|
+
var backgroundHexColor = (_itemProps$selectedSt = itemProps.selectedStyles) !== null && _itemProps$selectedSt !== void 0 && _itemProps$selectedSt.bg ? getBaseHexColor((_itemProps$selectedSt2 = itemProps.selectedStyles) === null || _itemProps$selectedSt2 === void 0 ? void 0 : _itemProps$selectedSt2.bg) : accent[20];
|
36
49
|
usePropWarning(props, 'disabled', 'isDisabled');
|
37
50
|
/* istanbul ignore next */
|
38
51
|
useImperativeHandle(ref, function () {
|
@@ -49,25 +62,33 @@ export var CollectionRockerButton = /*#__PURE__*/forwardRef(function (props, ref
|
|
49
62
|
}, ___EmotionJSX(Box, _extends({
|
50
63
|
as: "button",
|
51
64
|
className: classNames,
|
52
|
-
variant: "variants.rockerButton.thumbSwitch"
|
53
|
-
|
54
|
-
ref: rockerButtonRef
|
55
|
-
}, itemProps, {
|
65
|
+
variant: "variants.rockerButton.thumbSwitch",
|
66
|
+
ref: rockerButtonRef,
|
56
67
|
sx: {
|
57
|
-
'&.is-selected': _objectSpread({}, itemProps.selectedStyles)
|
68
|
+
'&.is-selected': _objectSpread({}, itemProps.selectedStyles),
|
69
|
+
'&.is-selected.is-hovered': {
|
70
|
+
bg: getDarkerColor(backgroundHexColor, 0.2)
|
71
|
+
},
|
72
|
+
'&.is-selected.is-pressed': {
|
73
|
+
bg: getDarkerColor(backgroundHexColor, 0.4)
|
74
|
+
}
|
58
75
|
}
|
59
|
-
}), rendered));
|
76
|
+
}, mergeProps(hoverProps, pressProps, itemProps, rockerButtonProps)), rendered));
|
60
77
|
});
|
61
78
|
CollectionRockerButton.displayName = 'CollectionRockerButton';
|
62
79
|
CollectionRockerButton.propTypes = {
|
63
80
|
/** Allows custom styles to be passed to button. */
|
64
|
-
selectedStyles: PropTypes.shape({
|
81
|
+
selectedStyles: PropTypes.shape({
|
82
|
+
bg: PropTypes.string
|
83
|
+
}),
|
65
84
|
// adding to surface in props table
|
66
85
|
/** @ignore */
|
67
86
|
item: PropTypes.shape({
|
68
87
|
key: PropTypes.string,
|
69
88
|
props: PropTypes.shape({
|
70
|
-
selectedStyles: PropTypes.shape({
|
89
|
+
selectedStyles: PropTypes.shape({
|
90
|
+
bg: PropTypes.string
|
91
|
+
})
|
71
92
|
}),
|
72
93
|
rendered: PropTypes.node
|
73
94
|
})
|
@@ -26,7 +26,7 @@ var thumbSwitch = _objectSpread(_objectSpread({}, base), {}, {
|
|
26
26
|
display: 'inline-flex',
|
27
27
|
height: '26px',
|
28
28
|
lineHeight: '26px',
|
29
|
-
fontSize: '
|
29
|
+
fontSize: '13px',
|
30
30
|
borderRadius: '15px',
|
31
31
|
alignSelf: 'center',
|
32
32
|
paddingTop: '0px',
|
@@ -34,11 +34,14 @@ var thumbSwitch = _objectSpread(_objectSpread({}, base), {}, {
|
|
34
34
|
textTransform: 'uppercase',
|
35
35
|
bg: 'accent.95',
|
36
36
|
'&.is-selected': {
|
37
|
-
bg: '
|
37
|
+
bg: 'accent.20',
|
38
38
|
color: 'white',
|
39
39
|
zIndex: '1'
|
40
40
|
},
|
41
|
-
'&.is-focused': _objectSpread({}, defaultFocus)
|
41
|
+
'&.is-focused': _objectSpread({}, defaultFocus),
|
42
|
+
'&.is-hovered': {
|
43
|
+
bg: 'white'
|
44
|
+
}
|
42
45
|
});
|
43
46
|
export default {
|
44
47
|
container: container,
|
@@ -16,7 +16,10 @@ var testButtons = [{
|
|
16
16
|
}
|
17
17
|
}, {
|
18
18
|
name: 'Or',
|
19
|
-
key: 'Or'
|
19
|
+
key: 'Or',
|
20
|
+
selectedStyles: {
|
21
|
+
bg: 'accent.30'
|
22
|
+
}
|
20
23
|
}, {
|
21
24
|
name: 'Maybe?',
|
22
25
|
key: 'Maybe?'
|
@@ -90,4 +93,40 @@ test('selected button can be changed by keyboard interaction', function () {
|
|
90
93
|
});
|
91
94
|
expect(screen.getByText(testButtons[1].key)).toHaveClass('is-selected');
|
92
95
|
expect(screen.getByText(testButtons[0].key)).not.toHaveClass('is-selected');
|
96
|
+
});
|
97
|
+
test('rockerButton renders correct darker bg when selectedStyles prop is passed', function () {
|
98
|
+
getComponent();
|
99
|
+
var button0 = screen.getByText(testButtons[0].key);
|
100
|
+
expect(button0).toHaveClass('is-selected');
|
101
|
+
expect(button0).toHaveStyle('background-color: #640099');
|
102
|
+
userEvent.hover(button0);
|
103
|
+
expect(button0).toHaveClass('is-selected');
|
104
|
+
expect(button0).toHaveClass('is-hovered');
|
105
|
+
expect(button0).toHaveStyle('background-color: #590089');
|
106
|
+
fireEvent.keyDown(button0, {
|
107
|
+
key: 'Enter',
|
108
|
+
code: 13
|
109
|
+
});
|
110
|
+
expect(button0).toHaveClass('is-selected');
|
111
|
+
expect(button0).toHaveClass('is-pressed');
|
112
|
+
expect(button0).toHaveStyle('background-color: #4d0077');
|
113
|
+
});
|
114
|
+
test('rockerButton renders correct bg when selectedStyles prop is css variable', function () {
|
115
|
+
getComponent();
|
116
|
+
var button1 = screen.getByText(testButtons[1].key);
|
117
|
+
fireEvent.keyDown(screen.getByText(testButtons[0].key), {
|
118
|
+
key: 'ArrowRight',
|
119
|
+
code: 'ArrowRight'
|
120
|
+
});
|
121
|
+
userEvent.hover(button1);
|
122
|
+
expect(button1).toHaveClass('is-selected');
|
123
|
+
expect(button1).toHaveClass('is-hovered');
|
124
|
+
expect(button1).toHaveStyle('background-color: #364872');
|
125
|
+
fireEvent.keyDown(button1, {
|
126
|
+
key: 'Enter',
|
127
|
+
code: 13
|
128
|
+
});
|
129
|
+
expect(button1).toHaveClass('is-selected');
|
130
|
+
expect(button1).toHaveClass('is-pressed');
|
131
|
+
expect(button1).toHaveStyle('background-color: #2e3e63');
|
93
132
|
});
|
package/lib/styles/colors.js
CHANGED
@@ -6,6 +6,7 @@ import _fillInstanceProperty from "@babel/runtime-corejs3/core-js-stable/instanc
|
|
6
6
|
import _reduceInstanceProperty from "@babel/runtime-corejs3/core-js-stable/instance/reduce";
|
7
7
|
import _Object$entries from "@babel/runtime-corejs3/core-js-stable/object/entries";
|
8
8
|
import _concatInstanceProperty from "@babel/runtime-corejs3/core-js-stable/instance/concat";
|
9
|
+
import _includesInstanceProperty from "@babel/runtime-corejs3/core-js-stable/instance/includes";
|
9
10
|
import chroma from 'chroma-js';
|
10
11
|
|
11
12
|
// SEMANTIC COLORS
|
@@ -83,6 +84,9 @@ export var decorativeDark = _mapInstanceProperty(decorative).call(decorative, fu
|
|
83
84
|
export var decorativeLight = _mapInstanceProperty(decorative).call(decorative, function (color) {
|
84
85
|
return chroma(color).brighten(2).hex();
|
85
86
|
});
|
87
|
+
export var getDarkerColor = function getDarkerColor(color, percentage) {
|
88
|
+
return chroma.valid(color) ? chroma.mix(color, '#000000', percentage).hex() : '';
|
89
|
+
};
|
86
90
|
|
87
91
|
// export const focus = chroma(accent[50]).alpha(0.75).hex();
|
88
92
|
export var focus = chroma('#D033FF').hex();
|
@@ -152,4 +156,17 @@ function flattenColors(obj) {
|
|
152
156
|
}
|
153
157
|
|
154
158
|
/* used by Storybook's stories */
|
155
|
-
export var flatColorList = flattenColors(allColors);
|
159
|
+
export var flatColorList = flattenColors(allColors);
|
160
|
+
export var getBaseHexColor = function getBaseHexColor(colorName) {
|
161
|
+
if (chroma.valid(colorName)) {
|
162
|
+
return colorName;
|
163
|
+
}
|
164
|
+
try {
|
165
|
+
var keys = _includesInstanceProperty(colorName).call(colorName, '.') ? colorName.split('.') : [colorName];
|
166
|
+
return _reduceInstanceProperty(keys).call(keys, function (obj, key) {
|
167
|
+
return obj[key];
|
168
|
+
}, allColors);
|
169
|
+
} catch (error) {
|
170
|
+
return accentBase;
|
171
|
+
}
|
172
|
+
};
|