@occmundial/occ-atomic 3.0.0-beta.6 → 3.0.0-beta.61
Sign up to get free protection for your applications and to get access to all the features.
- package/CHANGELOG.md +484 -0
- package/build/Avatar/Avatar.js +69 -21
- package/build/Avatar/Avatar.test.js +15 -8
- package/build/Avatar/AvatarContent/AvatarContent.js +61 -21
- package/build/Avatar/AvatarContent/AvatarContent.test.js +4 -18
- package/build/Avatar/AvatarContent/__snapshots__/AvatarContent.test.js.snap +75 -15
- package/build/Avatar/AvatarContent/styles.js +88 -21
- package/build/Avatar/__snapshots__/Avatar.test.js.snap +11 -2
- package/build/Avatar/styles.js +18 -7
- package/build/Banner/Banner.js +30 -40
- package/build/Banner/Banner.test.js +64 -17
- package/build/Banner/__snapshots__/Banner.test.js.snap +0 -28
- package/build/Banner/index.js +1 -6
- package/build/Button/Button.js +1 -1
- package/build/Button/Button.test.js +0 -11
- package/build/Button/__snapshots__/Button.test.js.snap +54 -58
- package/build/Button/styles.js +42 -75
- package/build/Checkbox/Checkbox.js +48 -3
- package/build/Checkbox/__snapshots__/Checkbox.test.js.snap +81 -49
- package/build/Checkbox/styles.js +91 -48
- package/build/Fab/__snapshots__/Fab.test.js.snap +2 -2
- package/build/Footer/Footer.js +81 -87
- package/build/Footer/List/List.js +89 -124
- package/build/Footer/List/styles.js +85 -31
- package/build/Footer/__snapshots__/Footer.test.js.snap +109 -59
- package/build/Footer/styles.js +116 -51
- package/build/Grid/Col/__snapshots__/Col.test.js.snap +16 -2
- package/build/Grid/Col/styles.js +12 -6
- package/build/Grid/Row/__snapshots__/Row.test.js.snap +18 -2
- package/build/Grid/Row/styles.js +15 -5
- package/build/Grid/styles.js +26 -9
- package/build/Menu/Menu.js +111 -0
- package/build/Menu/index.js +34 -0
- package/build/Menu/styles.js +28 -0
- package/build/MenuDivider/MenuDivider.js +47 -0
- package/build/MenuDivider/index.js +18 -0
- package/build/MenuDivider/styles.js +21 -0
- package/build/MenuItem/MenuItem.js +160 -0
- package/build/{Header/Menu → MenuItem}/index.js +2 -2
- package/build/MenuItem/styles.js +25 -0
- package/build/MenuItemBase/MenuItemBase.js +98 -0
- package/build/MenuItemBase/index.js +18 -0
- package/build/MenuItemBase/styles.js +57 -0
- package/build/MenuList/MenuList.js +71 -0
- package/build/{Header → MenuList}/index.js +2 -2
- package/build/MenuList/styles.js +54 -0
- package/build/MenuUser/MenuUser.js +153 -0
- package/build/MenuUser/index.js +18 -0
- package/build/MenuUser/styles.js +22 -0
- package/build/Modal/Modal.js +94 -66
- package/build/Modal/Modal.test.js +14 -7
- package/build/Modal/__snapshots__/Modal.test.js.snap +155 -100
- package/build/Modal/styles.js +165 -143
- package/build/NavAvatarButton/NavAvatarButton.js +125 -0
- package/build/{NavIcon → NavAvatarButton}/index.js +2 -2
- package/build/NavAvatarButton/styles.js +30 -0
- package/build/NavButton/NavButton.js +73 -0
- package/build/{Header/Nav → NavButton}/index.js +2 -2
- package/build/NavButton/styles.js +79 -0
- package/build/NavItem/styles.js +4 -4
- package/build/NavTab/NavTab.js +47 -32
- package/build/NavTab/styles.js +63 -28
- package/build/NavTop/styles.js +6 -6
- package/build/OrderBy/OrderBy.js +2 -1
- package/build/Pager/Page/Page.js +11 -6
- package/build/Pager/Page/Page.test.js +13 -9
- package/build/Pager/Page/__snapshots__/Page.test.js.snap +34 -10
- package/build/Pager/Page/styles.js +48 -14
- package/build/Pager/Pager.js +144 -235
- package/build/Pager/Pager.test.js +81 -36
- package/build/Pager/__snapshots__/Pager.test.js.snap +3 -36
- package/build/Pager/styles.js +5 -40
- package/build/Pill/Choice/Choice.js +6 -4
- package/build/Pill/Choice/styles.js +13 -10
- package/build/Pill/Group/styles.js +5 -5
- package/build/Pill/Stack/Stack.js +2 -2
- package/build/Pill/Stack/styles.js +5 -8
- package/build/Placeholder/Placeholder.js +29 -12
- package/build/Placeholder/Placeholder.test.js +4 -4
- package/build/Placeholder/__snapshots__/Placeholder.test.js.snap +81 -38
- package/build/Placeholder/styles.js +86 -42
- package/build/Provider/MenuListProvider.js +38 -0
- package/build/Provider/usePrevious.js +1 -1
- package/build/Radio/Radio.js +42 -6
- package/build/Radio/__snapshots__/Radio.test.js.snap +81 -80
- package/build/Radio/styles.js +93 -85
- package/build/SlideDown/SlideDown.js +162 -169
- package/build/SlideDown/SlideDown.test.js +49 -44
- package/build/SlideDown/__snapshots__/SlideDown.test.js.snap +44 -15
- package/build/SlideDown/styles.js +51 -20
- package/build/SlideToggle/SlideToggle.js +38 -6
- package/build/SlideToggle/SlideToggle.test.js +2 -2
- package/build/SlideToggle/__snapshots__/SlideToggle.test.js.snap +52 -37
- package/build/SlideToggle/styles.js +64 -45
- package/build/Tabs/Tab/Tab.js +73 -0
- package/build/Tabs/Tab/index.js +34 -0
- package/build/Tabs/Tab/index.test.js +132 -0
- package/build/Tabs/Tab/styles.js +74 -0
- package/build/Tabs/TabContent/TabContent.js +76 -0
- package/build/Tabs/TabContent/index.js +34 -0
- package/build/Tabs/TabContent/index.test.js +68 -0
- package/build/Tabs/TabContent/styles.js +23 -0
- package/build/Tabs/TabIndicator/TabIndicator.js +158 -0
- package/build/Tabs/TabIndicator/index.js +34 -0
- package/build/Tabs/TabIndicator/styles.js +24 -0
- package/build/Tabs/TabList/TabList.js +108 -0
- package/build/Tabs/TabList/index.js +34 -0
- package/build/{Pager/Break → Tabs/TabList}/styles.js +3 -2
- package/build/Tabs/Tabs.js +74 -0
- package/build/Tabs/context.js +94 -0
- package/build/Tabs/index.js +34 -0
- package/build/Tabs/index.test.js +157 -0
- package/build/Tabs/styles.js +19 -0
- package/build/Tag/Tag.js +2 -2
- package/build/Tag/__snapshots__/Tag.test.js.snap +40 -43
- package/build/Tag/styles.js +76 -82
- package/build/Text/Text.js +2 -1
- package/build/TextField/TextField.js +7 -6
- package/build/TextField/__snapshots__/TextField.test.js.snap +3 -0
- package/build/TextField/styles.js +3 -0
- package/build/Tip/Tip.js +62 -95
- package/build/Tip/Tip.test.js +29 -6
- package/build/Tip/TipText/index.js +32 -0
- package/build/Tip/__snapshots__/Tip.test.js.snap +127 -15
- package/build/Tip/styles.js +125 -31
- package/build/Toaster/Toast/Toast.js +76 -64
- package/build/Toaster/Toast/styles.js +118 -46
- package/build/Toaster/Toaster.js +3 -2
- package/build/Toaster/Toaster.test.js +5 -2
- package/build/Toaster/__snapshots__/Toaster.test.js.snap +1 -1
- package/build/Toaster/functions.js +4 -0
- package/build/Toaster/styles.js +3 -3
- package/build/Tooltip/Tooltip.js +73 -22
- package/build/Tooltip/__snapshots__/Tooltip.test.js.snap +22 -6
- package/build/Tooltip/styles.js +32 -10
- package/build/index.js +30 -16
- package/build/plugin/babel.js +0 -2
- package/build/subatomic/grid.js +5 -5
- package/build/tokens/colors.json +35 -3
- package/package.json +5 -2
- package/build/Banner/styles.js +0 -41
- package/build/Header/Header.js +0 -163
- package/build/Header/Header.test.js +0 -118
- package/build/Header/Menu/Menu.js +0 -135
- package/build/Header/Menu/Menu.test.js +0 -107
- package/build/Header/Menu/__snapshots__/Menu.test.js.snap +0 -113
- package/build/Header/Menu/styles.js +0 -123
- package/build/Header/Nav/Nav.js +0 -95
- package/build/Header/Nav/Nav.test.js +0 -81
- package/build/Header/Nav/__snapshots__/Nav.test.js.snap +0 -101
- package/build/Header/Nav/styles.js +0 -110
- package/build/Header/__snapshots__/Header.test.js.snap +0 -79
- package/build/Header/styles.js +0 -94
- package/build/NavIcon/NavIcon.js +0 -112
- package/build/NavIcon/styles.js +0 -81
- package/build/Pager/Break/Break.js +0 -27
- package/build/Pager/Break/Break.test.js +0 -53
- package/build/Pager/Break/__snapshots__/Break.test.js.snap +0 -13
- package/build/Pager/Break/index.js +0 -18
- /package/build/Button/{Loading.js → Loading/index.js} +0 -0
@@ -5,42 +5,73 @@ Object.defineProperty(exports, "__esModule", {
|
|
5
5
|
});
|
6
6
|
exports["default"] = void 0;
|
7
7
|
|
8
|
-
var _spacing = _interopRequireDefault(require("../
|
8
|
+
var _spacing = _interopRequireDefault(require("../tokens/spacing.json"));
|
9
|
+
|
10
|
+
var _colors = _interopRequireDefault(require("../tokens/colors.json"));
|
9
11
|
|
10
12
|
function _interopRequireDefault(obj) { return obj && obj.__esModule ? obj : { "default": obj }; }
|
11
13
|
|
12
14
|
var _default = {
|
13
|
-
wrapper: {
|
14
|
-
marginBottom: _spacing["default"].small
|
15
|
-
},
|
16
15
|
button: {
|
17
16
|
cursor: 'pointer'
|
18
17
|
},
|
18
|
+
normalPadding: {
|
19
|
+
paddingTop: _spacing["default"]['size-3'],
|
20
|
+
paddingBottom: _spacing["default"]['size-3']
|
21
|
+
},
|
22
|
+
largePadding: {
|
23
|
+
paddingTop: _spacing["default"]['size-4'],
|
24
|
+
paddingBottom: _spacing["default"]['size-4']
|
25
|
+
},
|
26
|
+
buttonPadding: {
|
27
|
+
paddingLeft: _spacing["default"]['size-4'],
|
28
|
+
paddingRight: _spacing["default"]['size-4']
|
29
|
+
},
|
19
30
|
text: {
|
20
31
|
cursor: 'pointer'
|
21
32
|
},
|
33
|
+
tag: {
|
34
|
+
marginLeft: _spacing["default"]['size-2'],
|
35
|
+
pointerEvents: 'none'
|
36
|
+
},
|
37
|
+
icon: {
|
38
|
+
transition: 'rotate cubic-bezier(0.25,0.46,0.45,0.94) 0.2s'
|
39
|
+
},
|
40
|
+
leftIcon: {
|
41
|
+
marginRight: _spacing["default"]['size-2']
|
42
|
+
},
|
43
|
+
rotateIcon: {
|
44
|
+
transform: 'rotate(-180deg)'
|
45
|
+
},
|
22
46
|
content: {
|
23
|
-
|
47
|
+
overflow: 'hidden',
|
48
|
+
transform: 'translateY(-10px)',
|
49
|
+
transition: 'transform cubic-bezier(0.25,0.46,0.45,0.94) 0.2s'
|
24
50
|
},
|
25
|
-
|
26
|
-
|
27
|
-
|
28
|
-
marginBottom: _spacing["default"]
|
29
|
-
|
51
|
+
showContent: {
|
52
|
+
transform: 'translateY(0px)',
|
53
|
+
transition: 'transform cubic-bezier(0.25,0.46,0.45,0.94) 0.2s 0.05s',
|
54
|
+
marginBottom: _spacing["default"]['size-3']
|
55
|
+
},
|
56
|
+
contentWrapper: {
|
57
|
+
display: 'grid',
|
58
|
+
gridTemplateRows: '0fr',
|
59
|
+
transition: 'grid-template-rows cubic-bezier(0.25,0.46,0.45,0.94) 0.2s 0.05s, opacity cubic-bezier(0.25,0.46,0.45,0.94) 0.2s',
|
60
|
+
opacity: 0
|
30
61
|
},
|
31
|
-
|
62
|
+
showContentWrapper: {
|
32
63
|
opacity: 1,
|
33
|
-
|
34
|
-
|
64
|
+
gridTemplateRows: '1fr',
|
65
|
+
transition: 'grid-template-rows cubic-bezier(0.25,0.46,0.45,0.94) 0.2s, opacity cubic-bezier(0.25,0.46,0.45,0.94) 0.2s 0.05s'
|
35
66
|
},
|
36
|
-
|
37
|
-
|
38
|
-
marginLeft: _spacing["default"].tiny,
|
39
|
-
pointerEvents: 'none'
|
67
|
+
divider: {
|
68
|
+
boxShadow: "inset 0 -1px 0px 0px ".concat(_colors["default"].border["default"].subtle)
|
40
69
|
},
|
41
|
-
|
42
|
-
|
43
|
-
|
70
|
+
flexContainer: {
|
71
|
+
gap: _spacing["default"]['size-4']
|
72
|
+
},
|
73
|
+
disabled: {
|
74
|
+
cursor: 'not-allowed'
|
44
75
|
}
|
45
76
|
};
|
46
77
|
exports["default"] = _default;
|
@@ -13,6 +13,10 @@ var _propTypes = _interopRequireDefault(require("prop-types"));
|
|
13
13
|
|
14
14
|
var _Text = _interopRequireDefault(require("../Text"));
|
15
15
|
|
16
|
+
var _Icon = _interopRequireDefault(require("../Icon"));
|
17
|
+
|
18
|
+
var _colors = _interopRequireDefault(require("../tokens/colors.json"));
|
19
|
+
|
16
20
|
function _interopRequireDefault(obj) { return obj && obj.__esModule ? obj : { "default": obj }; }
|
17
21
|
|
18
22
|
function _extends() { _extends = Object.assign || function (target) { for (var i = 1; i < arguments.length; i++) { var source = arguments[i]; for (var key in source) { if (Object.prototype.hasOwnProperty.call(source, key)) { target[key] = source[key]; } } } return target; }; return _extends.apply(this, arguments); }
|
@@ -52,6 +56,7 @@ var SlideToggle = /*#__PURE__*/function (_React$Component) {
|
|
52
56
|
value: props.value
|
53
57
|
};
|
54
58
|
_this.toggle = _this.toggle.bind(_assertThisInitialized(_this));
|
59
|
+
_this.handleKeyUp = _this.handleKeyUp.bind(_assertThisInitialized(_this));
|
55
60
|
return _this;
|
56
61
|
}
|
57
62
|
|
@@ -79,6 +84,20 @@ var SlideToggle = /*#__PURE__*/function (_React$Component) {
|
|
79
84
|
if (onChange) onChange(value, id);
|
80
85
|
}
|
81
86
|
}
|
87
|
+
}, {
|
88
|
+
key: "handleKeyDown",
|
89
|
+
value: function handleKeyDown(e) {
|
90
|
+
if (e.keyCode == 13 || e.keyCode == 32) {
|
91
|
+
e.preventDefault();
|
92
|
+
}
|
93
|
+
}
|
94
|
+
}, {
|
95
|
+
key: "handleKeyUp",
|
96
|
+
value: function handleKeyUp(e) {
|
97
|
+
if (e.keyCode == 13 || e.keyCode == 32) {
|
98
|
+
this.toggle();
|
99
|
+
}
|
100
|
+
}
|
82
101
|
}, {
|
83
102
|
key: "render",
|
84
103
|
value: function render() {
|
@@ -93,27 +112,40 @@ var SlideToggle = /*#__PURE__*/function (_React$Component) {
|
|
93
112
|
name = _this$props2.name,
|
94
113
|
trk = _this$props2.trk,
|
95
114
|
testId = _this$props2.testId;
|
115
|
+
var iconColor = disabled ? _colors["default"].icon["default"].disabled : value ? _colors["default"].icon.brand.bold : _colors["default"].icon.brand.disabled;
|
96
116
|
return /*#__PURE__*/_react["default"].createElement("div", {
|
97
117
|
id: id,
|
98
|
-
tabIndex: -1,
|
118
|
+
tabIndex: disabled ? -1 : 0,
|
119
|
+
onKeyDown: this.handleKeyDown,
|
120
|
+
onKeyUp: this.handleKeyUp,
|
121
|
+
onClick: this.toggle,
|
99
122
|
className: "".concat(classes.cont).concat(disabled ? " ".concat(classes.disabled) : '').concat(className ? " ".concat(className) : ''),
|
100
123
|
style: style
|
124
|
+
}, /*#__PURE__*/_react["default"].createElement("div", {
|
125
|
+
className: classes.switchWrap
|
101
126
|
}, /*#__PURE__*/_react["default"].createElement("div", _extends({
|
102
127
|
id: trk,
|
103
128
|
name: name,
|
104
129
|
className: "".concat(classes["switch"]).concat(value ? " ".concat(classes.checked) : ''),
|
105
|
-
onClick: this.toggle,
|
106
130
|
"data-testid": testId
|
107
131
|
}, testId && {
|
108
132
|
'data-value': value ? 1 : 0
|
109
|
-
}), /*#__PURE__*/_react["default"].createElement("
|
110
|
-
className: classes.
|
133
|
+
}), /*#__PURE__*/_react["default"].createElement("div", {
|
134
|
+
className: classes.switchBg
|
111
135
|
}, /*#__PURE__*/_react["default"].createElement("span", {
|
136
|
+
className: classes.slider
|
137
|
+
}, /*#__PURE__*/_react["default"].createElement(_Icon["default"], {
|
138
|
+
iconName: value ? 'check' : 'x',
|
139
|
+
width: 16,
|
140
|
+
height: 16,
|
141
|
+
colors: [iconColor],
|
112
142
|
className: classes.icon
|
113
|
-
}))), label && /*#__PURE__*/_react["default"].createElement(
|
143
|
+
}))))), label && /*#__PURE__*/_react["default"].createElement("div", {
|
144
|
+
className: classes.labelWrap
|
145
|
+
}, /*#__PURE__*/_react["default"].createElement(_Text["default"], {
|
114
146
|
tag: "label",
|
115
147
|
className: classes.label
|
116
|
-
}, label));
|
148
|
+
}, label)));
|
117
149
|
}
|
118
150
|
}]);
|
119
151
|
|
@@ -48,7 +48,7 @@ describe("SlideToggle", function () {
|
|
48
48
|
classes: classes
|
49
49
|
}));
|
50
50
|
expect(wrapper.find('.cont').exists()).toEqual(true);
|
51
|
-
wrapper.
|
51
|
+
wrapper.simulate('click');
|
52
52
|
expect(wrapper.find('.switch').hasClass('checked')).toEqual(true);
|
53
53
|
});
|
54
54
|
it('calls onChange function', function () {
|
@@ -57,7 +57,7 @@ describe("SlideToggle", function () {
|
|
57
57
|
classes: classes,
|
58
58
|
onChange: onChange
|
59
59
|
}));
|
60
|
-
wrapper.
|
60
|
+
wrapper.simulate('click');
|
61
61
|
expect(onChange.mock.calls.length).toBe(1);
|
62
62
|
});
|
63
63
|
it('shows the label', function () {
|
@@ -5,76 +5,91 @@ exports[`SlideToggle matches the snapshot 1`] = `ShallowWrapper {}`;
|
|
5
5
|
exports[`SlideToggle styles matches the snapshot 1`] = `
|
6
6
|
Object {
|
7
7
|
"checked": Object {
|
8
|
-
"& $icon": Object {
|
9
|
-
"background": "url(data:image/svg+xml;base64,PHN2ZyB2ZXJzaW9uPSIxLjEiIHhtbG5zPSJodHRwOi8vd3d3LnczLm9yZy8yMDAwL3N2ZyIgeG1sbnM6eGxpbms9Imh0dHA6Ly93d3cudzMub3JnLzE5OTkveGxpbmsiIHg9IjBweCIgeT0iMHB4IgoJCQkgdmlld0JveD0iMCAwIDI0IDI0IiBzdHlsZT0iZW5hYmxlLWJhY2tncm91bmQ6bmV3IDAgMCAyNCAyNDsiIHhtbDpzcGFjZT0icHJlc2VydmUiPgoJCTxwYXRoIGZpbGw9IiMwMDZFRkYiIGQ9Ik0xOC4zLDcuM2wxLjQsMS40bC04LjcsOWMtMC40LDAuNC0xLDAuNC0xLjQsMC4xbC00LjMtMy42bDEuMy0xLjVsMy42LDNDMTAuMiwxNS42LDE4LjMsNy4zLDE4LjMsNy4zeiIvPgoJCTwvc3ZnPg==)",
|
10
|
-
},
|
11
8
|
"& $slider": Object {
|
12
|
-
"left":
|
9
|
+
"left": "calc(100% - 28px)",
|
10
|
+
},
|
11
|
+
"& $switchBg": Object {
|
12
|
+
"background": "#0059CD",
|
13
13
|
},
|
14
|
-
"background": "#0059CD",
|
15
14
|
},
|
16
15
|
"cont": Object {
|
17
|
-
"&:
|
18
|
-
"
|
19
|
-
"boxShadow": "0 0 0 8px rgba(0,110,255,0.3)",
|
16
|
+
"&:active $switch $switchBg": Object {
|
17
|
+
"boxShadow": "inset 0 0 0 2px rgba(255,255,255,0.2)",
|
20
18
|
},
|
21
|
-
"&:focus $switch
|
22
|
-
"background": "#E9EEF8",
|
19
|
+
"&:focus-visible $switch": Object {
|
23
20
|
"boxShadow": "0 0 0 8px hsl(221 91.2% 35.7% / 0.3)",
|
24
21
|
},
|
25
|
-
"&:
|
26
|
-
"
|
22
|
+
"&:focus-visible $switch$checked": Object {
|
23
|
+
"boxShadow": "0 0 0 8px rgba(0,110,255,0.3)",
|
27
24
|
},
|
28
|
-
"&:hover $switch
|
25
|
+
"&:hover $switch $switchBg, &:active $switch $switchBg": Object {
|
29
26
|
"background": "#CAD5EE",
|
30
27
|
},
|
31
|
-
"
|
28
|
+
"&:hover $switch$checked $switchBg, &:active $switch$checked $switchBg": Object {
|
29
|
+
"background": "#083CAE",
|
30
|
+
},
|
31
|
+
"alignItems": "flex-start",
|
32
32
|
"boxSizing": "border-box",
|
33
33
|
"cursor": "pointer",
|
34
34
|
"display": "flex",
|
35
35
|
"outline": 0,
|
36
|
-
"paddingBottom": "8px",
|
37
|
-
"paddingTop": "8px",
|
38
36
|
},
|
39
37
|
"disabled": Object {
|
40
|
-
"& $
|
41
|
-
"background": "url(data:image/svg+xml;base64,PHN2ZyB2ZXJzaW9uPSIxLjEiIHhtbG5zPSJodHRwOi8vd3d3LnczLm9yZy8yMDAwL3N2ZyIgeG1sbnM6eGxpbms9Imh0dHA6Ly93d3cudzMub3JnLzE5OTkveGxpbmsiIHg9IjBweCIgeT0iMHB4IgogICAgICAgIAkgdmlld0JveD0iMCAwIDI0IDI0IiBzdHlsZT0iZW5hYmxlLWJhY2tncm91bmQ6bmV3IDAgMCAyNCAyNDsiIHhtbDpzcGFjZT0icHJlc2VydmUiPgogICAgICAgIDxwYXRoIGZpbGw9IiNEM0Q0REMiIGQ9Ik0xMi4xLDEwLjhsNC42LTQuNkwxOCw3LjRMMTMuNCwxMmw0LjYsNC42TDE2LjcsMThsLTQuNi00LjZMNy40LDE4bC0xLjMtMS4zbDQuNi00LjZMNi4yLDcuNGwxLjMtMS4zTDEyLjEsMTAuOHoiLz4KICAgICAgICA8L3N2Zz4=)",
|
42
|
-
},
|
43
|
-
"& $switch": Object {
|
38
|
+
"& $switch $switchBg": Object {
|
44
39
|
"background": "#EDEDF1",
|
40
|
+
"boxShadow": "inset 0 0 0 1px #D3D4DC",
|
45
41
|
},
|
46
42
|
"pointerEvents": "none",
|
47
43
|
},
|
48
44
|
"icon": Object {
|
49
|
-
"
|
50
|
-
"display": "block",
|
51
|
-
"height": "100%",
|
52
|
-
"transition": "0.3s all",
|
53
|
-
"width": "100%",
|
45
|
+
"margin": 4,
|
54
46
|
},
|
55
47
|
"label": Object {
|
56
|
-
"
|
48
|
+
"cursor": "pointer",
|
49
|
+
"marginLeft": "12px",
|
50
|
+
},
|
51
|
+
"labelWrap": Object {
|
52
|
+
"alignItems": "center",
|
53
|
+
"display": "flex",
|
54
|
+
"minHeight": 48,
|
55
|
+
"overflow": "hidden",
|
56
|
+
"paddingBottom": "4px",
|
57
|
+
"paddingTop": "4px",
|
57
58
|
},
|
58
59
|
"slider": Object {
|
59
60
|
"background": "#fff",
|
60
61
|
"borderRadius": "50%",
|
61
|
-
"
|
62
|
-
"
|
63
|
-
"left": 2,
|
62
|
+
"height": 24,
|
63
|
+
"left": 4,
|
64
64
|
"position": "absolute",
|
65
|
-
"top":
|
66
|
-
"
|
67
|
-
"
|
65
|
+
"top": "50%",
|
66
|
+
"transform": "translateY(-50%)",
|
67
|
+
"transition": "all cubic-bezier(0.25,0.46,0.45,0.94) 0.2s",
|
68
|
+
"width": 24,
|
68
69
|
},
|
69
70
|
"switch": Object {
|
70
|
-
"
|
71
|
-
"borderRadius": 34,
|
71
|
+
"borderRadius": "9999px",
|
72
72
|
"display": "inline-block",
|
73
73
|
"flexShrink": 0,
|
74
|
-
"height":
|
74
|
+
"height": 32,
|
75
75
|
"position": "relative",
|
76
|
-
"transition": "0.
|
77
|
-
"width":
|
76
|
+
"transition": "all cubic-bezier(0.25,0.46,0.45,0.94) 0.2s",
|
77
|
+
"width": 52,
|
78
|
+
},
|
79
|
+
"switchBg": Object {
|
80
|
+
"background": "#E9EEF8",
|
81
|
+
"borderRadius": "9999px",
|
82
|
+
"boxShadow": "inset 0 0 0 1px rgba(255,255,255,0.2)",
|
83
|
+
"height": 32,
|
84
|
+
"transition": "all cubic-bezier(0.25,0.46,0.45,0.94) 0.2s",
|
85
|
+
"width": 52,
|
86
|
+
},
|
87
|
+
"switchWrap": Object {
|
88
|
+
"alignItems": "center",
|
89
|
+
"display": "flex",
|
90
|
+
"flexShrink": 0,
|
91
|
+
"height": 48,
|
92
|
+
"width": 52,
|
78
93
|
},
|
79
94
|
}
|
80
95
|
`;
|
@@ -5,90 +5,109 @@ Object.defineProperty(exports, "__esModule", {
|
|
5
5
|
});
|
6
6
|
exports["default"] = void 0;
|
7
7
|
|
8
|
-
var _icons = _interopRequireDefault(require("../subatomic/icons"));
|
9
|
-
|
10
8
|
var _spacing = _interopRequireDefault(require("../tokens/spacing.json"));
|
11
9
|
|
12
10
|
var _colors = _interopRequireDefault(require("../tokens/colors.json"));
|
13
11
|
|
14
12
|
var _shadows = _interopRequireDefault(require("../tokens/shadows.json"));
|
15
13
|
|
14
|
+
var _borderRadius = _interopRequireDefault(require("../tokens/borderRadius.json"));
|
15
|
+
|
16
16
|
function _interopRequireDefault(obj) { return obj && obj.__esModule ? obj : { "default": obj }; }
|
17
17
|
|
18
|
-
var toggle = _colors["default"]["switch"]
|
19
|
-
|
18
|
+
var toggle = _colors["default"]["switch"];
|
19
|
+
var transition = 'all cubic-bezier(0.25,0.46,0.45,0.94) 0.2s';
|
20
|
+
var contentHeight = 48;
|
21
|
+
var toggleWidth = 52;
|
22
|
+
var toggleHeight = 32;
|
23
|
+
var sliderSize = 24;
|
20
24
|
var _default = {
|
21
25
|
cont: {
|
22
|
-
paddingTop: _spacing["default"]['size-2'],
|
23
|
-
paddingBottom: _spacing["default"]['size-2'],
|
24
26
|
boxSizing: 'border-box',
|
25
27
|
display: 'flex',
|
26
|
-
alignItems: 'start',
|
28
|
+
alignItems: 'flex-start',
|
27
29
|
cursor: 'pointer',
|
28
30
|
outline: 0,
|
29
|
-
'&:hover $switch$
|
30
|
-
background: toggle
|
31
|
+
'&:hover $switch $switchBg, &:active $switch $switchBg': {
|
32
|
+
background: toggle.unselected.bg.hover
|
31
33
|
},
|
32
|
-
'&:focus $switch
|
33
|
-
boxShadow: _shadows["default"]['focus-
|
34
|
-
background: toggle['selected']['bg']['default']
|
34
|
+
'&:focus-visible $switch': {
|
35
|
+
boxShadow: _shadows["default"]['focus-indigo']
|
35
36
|
},
|
36
|
-
'&:hover $switch
|
37
|
-
background: toggle
|
37
|
+
'&:hover $switch$checked $switchBg, &:active $switch$checked $switchBg': {
|
38
|
+
background: toggle.selected.bg.hover
|
38
39
|
},
|
39
|
-
'&:
|
40
|
-
|
41
|
-
|
40
|
+
'&:active $switch $switchBg': {
|
41
|
+
boxShadow: "inset 0 0 0 2px ".concat(_colors["default"]["switch"].border["default"])
|
42
|
+
},
|
43
|
+
'&:focus-visible $switch$checked': {
|
44
|
+
boxShadow: _shadows["default"]['focus-bright-blue']
|
42
45
|
}
|
43
46
|
},
|
47
|
+
switchWrap: {
|
48
|
+
width: toggleWidth,
|
49
|
+
height: contentHeight,
|
50
|
+
display: 'flex',
|
51
|
+
alignItems: 'center',
|
52
|
+
flexShrink: 0
|
53
|
+
},
|
44
54
|
"switch": {
|
45
55
|
position: 'relative',
|
46
56
|
display: 'inline-block',
|
47
|
-
width:
|
57
|
+
width: toggleWidth,
|
58
|
+
height: toggleHeight,
|
48
59
|
flexShrink: 0,
|
49
|
-
|
50
|
-
|
51
|
-
|
52
|
-
|
60
|
+
borderRadius: _borderRadius["default"]['br-full'],
|
61
|
+
transition: transition
|
62
|
+
},
|
63
|
+
switchBg: {
|
64
|
+
width: toggleWidth,
|
65
|
+
height: toggleHeight,
|
66
|
+
background: toggle.unselected.bg["default"],
|
67
|
+
boxShadow: "inset 0 0 0 1px ".concat(_colors["default"]["switch"].border["default"]),
|
68
|
+
borderRadius: _borderRadius["default"]['br-full'],
|
69
|
+
transition: transition
|
53
70
|
},
|
54
71
|
checked: {
|
55
|
-
|
56
|
-
|
57
|
-
left: 16
|
72
|
+
'& $switchBg': {
|
73
|
+
background: toggle.selected.bg["default"]
|
58
74
|
},
|
59
|
-
'& $
|
60
|
-
|
75
|
+
'& $slider': {
|
76
|
+
left: "calc(100% - 28px)"
|
61
77
|
}
|
62
78
|
},
|
63
79
|
slider: {
|
64
80
|
position: 'absolute',
|
65
|
-
|
66
|
-
|
67
|
-
left:
|
68
|
-
width:
|
69
|
-
height:
|
81
|
+
top: '50%',
|
82
|
+
transform: 'translateY(-50%)',
|
83
|
+
left: 4,
|
84
|
+
width: sliderSize,
|
85
|
+
height: sliderSize,
|
70
86
|
borderRadius: '50%',
|
71
|
-
background: toggle
|
72
|
-
transition:
|
87
|
+
background: toggle.bg["default"],
|
88
|
+
transition: transition
|
73
89
|
},
|
74
90
|
icon: {
|
75
|
-
|
76
|
-
height: '100%',
|
77
|
-
display: 'block',
|
78
|
-
background: _icons["default"].base(_icons["default"].cross.icon([icon.brand.disabled])),
|
79
|
-
transition: '0.3s all'
|
91
|
+
margin: 4
|
80
92
|
},
|
81
93
|
disabled: {
|
82
|
-
'& $switch': {
|
83
|
-
|
84
|
-
|
85
|
-
'& $icon': {
|
86
|
-
background: _icons["default"].base(_icons["default"].cross.icon([icon["default"].disabled]))
|
94
|
+
'& $switch $switchBg': {
|
95
|
+
boxShadow: "inset 0 0 0 1px ".concat(_colors["default"]["switch"].border.disabled),
|
96
|
+
background: toggle.bg.disabled
|
87
97
|
},
|
88
98
|
pointerEvents: 'none'
|
89
99
|
},
|
100
|
+
labelWrap: {
|
101
|
+
minHeight: contentHeight,
|
102
|
+
display: 'flex',
|
103
|
+
alignItems: 'center',
|
104
|
+
paddingTop: _spacing["default"]['size-1'],
|
105
|
+
paddingBottom: _spacing["default"]['size-1'],
|
106
|
+
overflow: 'hidden'
|
107
|
+
},
|
90
108
|
label: {
|
91
|
-
marginLeft: _spacing["default"]['size-
|
109
|
+
marginLeft: _spacing["default"]['size-3'],
|
110
|
+
cursor: 'pointer'
|
92
111
|
}
|
93
112
|
};
|
94
113
|
exports["default"] = _default;
|
@@ -0,0 +1,73 @@
|
|
1
|
+
"use strict";
|
2
|
+
|
3
|
+
Object.defineProperty(exports, "__esModule", {
|
4
|
+
value: true
|
5
|
+
});
|
6
|
+
exports["default"] = void 0;
|
7
|
+
|
8
|
+
var _react = _interopRequireDefault(require("react"));
|
9
|
+
|
10
|
+
var _propTypes = _interopRequireDefault(require("prop-types"));
|
11
|
+
|
12
|
+
var _Icon = _interopRequireDefault(require("../../Icon"));
|
13
|
+
|
14
|
+
var _context = require("../context");
|
15
|
+
|
16
|
+
function _interopRequireDefault(obj) { return obj && obj.__esModule ? obj : { "default": obj }; }
|
17
|
+
|
18
|
+
function Tab(props) {
|
19
|
+
var _useTabsContext = (0, _context.useTabsContext)(),
|
20
|
+
currentValue = _useTabsContext.currentValue,
|
21
|
+
setCurrentValue = _useTabsContext.setCurrentValue;
|
22
|
+
|
23
|
+
var title = props.title,
|
24
|
+
size = props.size,
|
25
|
+
counter = props.counter,
|
26
|
+
icon = props.icon,
|
27
|
+
testId = props.testId,
|
28
|
+
value = props.value,
|
29
|
+
disabled = props.disabled,
|
30
|
+
classes = props.classes;
|
31
|
+
var iconSize = size === 'small' ? 16 : 24;
|
32
|
+
|
33
|
+
var onClickHandler = function onClickHandler() {
|
34
|
+
if (!disabled) {
|
35
|
+
setCurrentValue(value);
|
36
|
+
}
|
37
|
+
};
|
38
|
+
|
39
|
+
return /*#__PURE__*/_react["default"].createElement("button", {
|
40
|
+
role: "tab",
|
41
|
+
onClick: onClickHandler,
|
42
|
+
disabled: disabled,
|
43
|
+
className: "".concat(classes.button, " ").concat(classes[size]).concat(value === currentValue && !disabled ? " ".concat(classes.selected) : '').concat(!disabled ? " ".concat(classes.enabled) : " ".concat(classes.disabled)),
|
44
|
+
type: "button",
|
45
|
+
id: "tab-".concat(value),
|
46
|
+
tabIndex: value === currentValue ? 0 : -1,
|
47
|
+
"data-testid": testId,
|
48
|
+
"aria-controls": "tabpanel-".concat(value)
|
49
|
+
}, icon ? /*#__PURE__*/_react["default"].createElement(_Icon["default"], {
|
50
|
+
width: iconSize,
|
51
|
+
height: iconSize,
|
52
|
+
iconName: icon,
|
53
|
+
className: "".concat(classes.icon).concat(value === currentValue && !disabled ? " ".concat(classes.iconSelected) : '').concat(disabled ? " ".concat(classes.iconDisabled) : ''),
|
54
|
+
transition: "all cubic-bezier(0.25,0.46,0.45,0.94) 0.2s"
|
55
|
+
}) : '', title, counter ? /*#__PURE__*/_react["default"].createElement("span", null, counter) : '');
|
56
|
+
}
|
57
|
+
|
58
|
+
Tab.defaultProps = {
|
59
|
+
size: 'large'
|
60
|
+
};
|
61
|
+
Tab.propTypes = {
|
62
|
+
title: _propTypes["default"].string.isRequired,
|
63
|
+
classes: _propTypes["default"].object.isRequired,
|
64
|
+
size: _propTypes["default"].oneOf(['large', 'medium', 'small']),
|
65
|
+
onClick: _propTypes["default"].func,
|
66
|
+
value: _propTypes["default"].oneOfType([_propTypes["default"].string, _propTypes["default"].number]),
|
67
|
+
icon: _propTypes["default"].string,
|
68
|
+
counter: _propTypes["default"].string,
|
69
|
+
disabled: _propTypes["default"].bool,
|
70
|
+
testId: _propTypes["default"].string
|
71
|
+
};
|
72
|
+
var _default = Tab;
|
73
|
+
exports["default"] = _default;
|
@@ -0,0 +1,34 @@
|
|
1
|
+
"use strict";
|
2
|
+
|
3
|
+
Object.defineProperty(exports, "__esModule", {
|
4
|
+
value: true
|
5
|
+
});
|
6
|
+
exports["default"] = void 0;
|
7
|
+
|
8
|
+
var _reactJss = _interopRequireDefault(require("react-jss"));
|
9
|
+
|
10
|
+
var _Tab = _interopRequireDefault(require("./Tab"));
|
11
|
+
|
12
|
+
var _styles = _interopRequireDefault(require("./styles"));
|
13
|
+
|
14
|
+
function _interopRequireDefault(obj) { return obj && obj.__esModule ? obj : { "default": obj }; }
|
15
|
+
|
16
|
+
function ownKeys(object, enumerableOnly) { var keys = Object.keys(object); if (Object.getOwnPropertySymbols) { var symbols = Object.getOwnPropertySymbols(object); if (enumerableOnly) { symbols = symbols.filter(function (sym) { return Object.getOwnPropertyDescriptor(object, sym).enumerable; }); } keys.push.apply(keys, symbols); } return keys; }
|
17
|
+
|
18
|
+
function _objectSpread(target) { for (var i = 1; i < arguments.length; i++) { var source = arguments[i] != null ? arguments[i] : {}; if (i % 2) { ownKeys(Object(source), true).forEach(function (key) { _defineProperty(target, key, source[key]); }); } else if (Object.getOwnPropertyDescriptors) { Object.defineProperties(target, Object.getOwnPropertyDescriptors(source)); } else { ownKeys(Object(source)).forEach(function (key) { Object.defineProperty(target, key, Object.getOwnPropertyDescriptor(source, key)); }); } } return target; }
|
19
|
+
|
20
|
+
function _defineProperty(obj, key, value) { if (key in obj) { Object.defineProperty(obj, key, { value: value, enumerable: true, configurable: true, writable: true }); } else { obj[key] = value; } return obj; }
|
21
|
+
|
22
|
+
function _objectWithoutProperties(source, excluded) { if (source == null) return {}; var target = _objectWithoutPropertiesLoose(source, excluded); var key, i; if (Object.getOwnPropertySymbols) { var sourceSymbolKeys = Object.getOwnPropertySymbols(source); for (i = 0; i < sourceSymbolKeys.length; i++) { key = sourceSymbolKeys[i]; if (excluded.indexOf(key) >= 0) continue; if (!Object.prototype.propertyIsEnumerable.call(source, key)) continue; target[key] = source[key]; } } return target; }
|
23
|
+
|
24
|
+
function _objectWithoutPropertiesLoose(source, excluded) { if (source == null) return {}; var target = {}; var sourceKeys = Object.keys(source); var key, i; for (i = 0; i < sourceKeys.length; i++) { key = sourceKeys[i]; if (excluded.indexOf(key) >= 0) continue; target[key] = source[key]; } return target; }
|
25
|
+
|
26
|
+
var StyledTab = (0, _reactJss["default"])(_styles["default"])(_Tab["default"]); // eslint-disable-next-line
|
27
|
+
|
28
|
+
var _Tab$propTypes = _Tab["default"].propTypes,
|
29
|
+
classes = _Tab$propTypes.classes,
|
30
|
+
propTypes = _objectWithoutProperties(_Tab$propTypes, ["classes"]);
|
31
|
+
|
32
|
+
StyledTab.propTypes = _objectSpread(_objectSpread({}, propTypes), StyledTab.propTypes);
|
33
|
+
var _default = StyledTab;
|
34
|
+
exports["default"] = _default;
|