@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.
Files changed (160) hide show
  1. package/CHANGELOG.md +484 -0
  2. package/build/Avatar/Avatar.js +69 -21
  3. package/build/Avatar/Avatar.test.js +15 -8
  4. package/build/Avatar/AvatarContent/AvatarContent.js +61 -21
  5. package/build/Avatar/AvatarContent/AvatarContent.test.js +4 -18
  6. package/build/Avatar/AvatarContent/__snapshots__/AvatarContent.test.js.snap +75 -15
  7. package/build/Avatar/AvatarContent/styles.js +88 -21
  8. package/build/Avatar/__snapshots__/Avatar.test.js.snap +11 -2
  9. package/build/Avatar/styles.js +18 -7
  10. package/build/Banner/Banner.js +30 -40
  11. package/build/Banner/Banner.test.js +64 -17
  12. package/build/Banner/__snapshots__/Banner.test.js.snap +0 -28
  13. package/build/Banner/index.js +1 -6
  14. package/build/Button/Button.js +1 -1
  15. package/build/Button/Button.test.js +0 -11
  16. package/build/Button/__snapshots__/Button.test.js.snap +54 -58
  17. package/build/Button/styles.js +42 -75
  18. package/build/Checkbox/Checkbox.js +48 -3
  19. package/build/Checkbox/__snapshots__/Checkbox.test.js.snap +81 -49
  20. package/build/Checkbox/styles.js +91 -48
  21. package/build/Fab/__snapshots__/Fab.test.js.snap +2 -2
  22. package/build/Footer/Footer.js +81 -87
  23. package/build/Footer/List/List.js +89 -124
  24. package/build/Footer/List/styles.js +85 -31
  25. package/build/Footer/__snapshots__/Footer.test.js.snap +109 -59
  26. package/build/Footer/styles.js +116 -51
  27. package/build/Grid/Col/__snapshots__/Col.test.js.snap +16 -2
  28. package/build/Grid/Col/styles.js +12 -6
  29. package/build/Grid/Row/__snapshots__/Row.test.js.snap +18 -2
  30. package/build/Grid/Row/styles.js +15 -5
  31. package/build/Grid/styles.js +26 -9
  32. package/build/Menu/Menu.js +111 -0
  33. package/build/Menu/index.js +34 -0
  34. package/build/Menu/styles.js +28 -0
  35. package/build/MenuDivider/MenuDivider.js +47 -0
  36. package/build/MenuDivider/index.js +18 -0
  37. package/build/MenuDivider/styles.js +21 -0
  38. package/build/MenuItem/MenuItem.js +160 -0
  39. package/build/{Header/Menu → MenuItem}/index.js +2 -2
  40. package/build/MenuItem/styles.js +25 -0
  41. package/build/MenuItemBase/MenuItemBase.js +98 -0
  42. package/build/MenuItemBase/index.js +18 -0
  43. package/build/MenuItemBase/styles.js +57 -0
  44. package/build/MenuList/MenuList.js +71 -0
  45. package/build/{Header → MenuList}/index.js +2 -2
  46. package/build/MenuList/styles.js +54 -0
  47. package/build/MenuUser/MenuUser.js +153 -0
  48. package/build/MenuUser/index.js +18 -0
  49. package/build/MenuUser/styles.js +22 -0
  50. package/build/Modal/Modal.js +94 -66
  51. package/build/Modal/Modal.test.js +14 -7
  52. package/build/Modal/__snapshots__/Modal.test.js.snap +155 -100
  53. package/build/Modal/styles.js +165 -143
  54. package/build/NavAvatarButton/NavAvatarButton.js +125 -0
  55. package/build/{NavIcon → NavAvatarButton}/index.js +2 -2
  56. package/build/NavAvatarButton/styles.js +30 -0
  57. package/build/NavButton/NavButton.js +73 -0
  58. package/build/{Header/Nav → NavButton}/index.js +2 -2
  59. package/build/NavButton/styles.js +79 -0
  60. package/build/NavItem/styles.js +4 -4
  61. package/build/NavTab/NavTab.js +47 -32
  62. package/build/NavTab/styles.js +63 -28
  63. package/build/NavTop/styles.js +6 -6
  64. package/build/OrderBy/OrderBy.js +2 -1
  65. package/build/Pager/Page/Page.js +11 -6
  66. package/build/Pager/Page/Page.test.js +13 -9
  67. package/build/Pager/Page/__snapshots__/Page.test.js.snap +34 -10
  68. package/build/Pager/Page/styles.js +48 -14
  69. package/build/Pager/Pager.js +144 -235
  70. package/build/Pager/Pager.test.js +81 -36
  71. package/build/Pager/__snapshots__/Pager.test.js.snap +3 -36
  72. package/build/Pager/styles.js +5 -40
  73. package/build/Pill/Choice/Choice.js +6 -4
  74. package/build/Pill/Choice/styles.js +13 -10
  75. package/build/Pill/Group/styles.js +5 -5
  76. package/build/Pill/Stack/Stack.js +2 -2
  77. package/build/Pill/Stack/styles.js +5 -8
  78. package/build/Placeholder/Placeholder.js +29 -12
  79. package/build/Placeholder/Placeholder.test.js +4 -4
  80. package/build/Placeholder/__snapshots__/Placeholder.test.js.snap +81 -38
  81. package/build/Placeholder/styles.js +86 -42
  82. package/build/Provider/MenuListProvider.js +38 -0
  83. package/build/Provider/usePrevious.js +1 -1
  84. package/build/Radio/Radio.js +42 -6
  85. package/build/Radio/__snapshots__/Radio.test.js.snap +81 -80
  86. package/build/Radio/styles.js +93 -85
  87. package/build/SlideDown/SlideDown.js +162 -169
  88. package/build/SlideDown/SlideDown.test.js +49 -44
  89. package/build/SlideDown/__snapshots__/SlideDown.test.js.snap +44 -15
  90. package/build/SlideDown/styles.js +51 -20
  91. package/build/SlideToggle/SlideToggle.js +38 -6
  92. package/build/SlideToggle/SlideToggle.test.js +2 -2
  93. package/build/SlideToggle/__snapshots__/SlideToggle.test.js.snap +52 -37
  94. package/build/SlideToggle/styles.js +64 -45
  95. package/build/Tabs/Tab/Tab.js +73 -0
  96. package/build/Tabs/Tab/index.js +34 -0
  97. package/build/Tabs/Tab/index.test.js +132 -0
  98. package/build/Tabs/Tab/styles.js +74 -0
  99. package/build/Tabs/TabContent/TabContent.js +76 -0
  100. package/build/Tabs/TabContent/index.js +34 -0
  101. package/build/Tabs/TabContent/index.test.js +68 -0
  102. package/build/Tabs/TabContent/styles.js +23 -0
  103. package/build/Tabs/TabIndicator/TabIndicator.js +158 -0
  104. package/build/Tabs/TabIndicator/index.js +34 -0
  105. package/build/Tabs/TabIndicator/styles.js +24 -0
  106. package/build/Tabs/TabList/TabList.js +108 -0
  107. package/build/Tabs/TabList/index.js +34 -0
  108. package/build/{Pager/Break → Tabs/TabList}/styles.js +3 -2
  109. package/build/Tabs/Tabs.js +74 -0
  110. package/build/Tabs/context.js +94 -0
  111. package/build/Tabs/index.js +34 -0
  112. package/build/Tabs/index.test.js +157 -0
  113. package/build/Tabs/styles.js +19 -0
  114. package/build/Tag/Tag.js +2 -2
  115. package/build/Tag/__snapshots__/Tag.test.js.snap +40 -43
  116. package/build/Tag/styles.js +76 -82
  117. package/build/Text/Text.js +2 -1
  118. package/build/TextField/TextField.js +7 -6
  119. package/build/TextField/__snapshots__/TextField.test.js.snap +3 -0
  120. package/build/TextField/styles.js +3 -0
  121. package/build/Tip/Tip.js +62 -95
  122. package/build/Tip/Tip.test.js +29 -6
  123. package/build/Tip/TipText/index.js +32 -0
  124. package/build/Tip/__snapshots__/Tip.test.js.snap +127 -15
  125. package/build/Tip/styles.js +125 -31
  126. package/build/Toaster/Toast/Toast.js +76 -64
  127. package/build/Toaster/Toast/styles.js +118 -46
  128. package/build/Toaster/Toaster.js +3 -2
  129. package/build/Toaster/Toaster.test.js +5 -2
  130. package/build/Toaster/__snapshots__/Toaster.test.js.snap +1 -1
  131. package/build/Toaster/functions.js +4 -0
  132. package/build/Toaster/styles.js +3 -3
  133. package/build/Tooltip/Tooltip.js +73 -22
  134. package/build/Tooltip/__snapshots__/Tooltip.test.js.snap +22 -6
  135. package/build/Tooltip/styles.js +32 -10
  136. package/build/index.js +30 -16
  137. package/build/plugin/babel.js +0 -2
  138. package/build/subatomic/grid.js +5 -5
  139. package/build/tokens/colors.json +35 -3
  140. package/package.json +5 -2
  141. package/build/Banner/styles.js +0 -41
  142. package/build/Header/Header.js +0 -163
  143. package/build/Header/Header.test.js +0 -118
  144. package/build/Header/Menu/Menu.js +0 -135
  145. package/build/Header/Menu/Menu.test.js +0 -107
  146. package/build/Header/Menu/__snapshots__/Menu.test.js.snap +0 -113
  147. package/build/Header/Menu/styles.js +0 -123
  148. package/build/Header/Nav/Nav.js +0 -95
  149. package/build/Header/Nav/Nav.test.js +0 -81
  150. package/build/Header/Nav/__snapshots__/Nav.test.js.snap +0 -101
  151. package/build/Header/Nav/styles.js +0 -110
  152. package/build/Header/__snapshots__/Header.test.js.snap +0 -79
  153. package/build/Header/styles.js +0 -94
  154. package/build/NavIcon/NavIcon.js +0 -112
  155. package/build/NavIcon/styles.js +0 -81
  156. package/build/Pager/Break/Break.js +0 -27
  157. package/build/Pager/Break/Break.test.js +0 -53
  158. package/build/Pager/Break/__snapshots__/Break.test.js.snap +0 -13
  159. package/build/Pager/Break/index.js +0 -18
  160. /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("../subatomic/spacing"));
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
- transition: '0.3s all ease-out'
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
- hide: {
26
- opacity: 0,
27
- marginTop: -_spacing["default"].small,
28
- marginBottom: _spacing["default"].small,
29
- pointerEvents: 'none'
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
- show: {
62
+ showContentWrapper: {
32
63
  opacity: 1,
33
- marginTop: 0,
34
- marginBottom: 0
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
- tag: {
37
- marginTop: _spacing["default"].xTiny,
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
- icon: {
42
- marginTop: _spacing["default"].xTiny,
43
- marginLeft: _spacing["default"].tiny
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("span", {
110
- className: classes.slider
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(_Text["default"], {
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.find('.switch').simulate('click');
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.find('.switch').simulate('click');
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": 16,
9
+ "left": "calc(100% - 28px)",
10
+ },
11
+ "& $switchBg": Object {
12
+ "background": "#0059CD",
13
13
  },
14
- "background": "#0059CD",
15
14
  },
16
15
  "cont": Object {
17
- "&:focus $switch$checked": Object {
18
- "background": "#0059CD",
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:not($checked)": Object {
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
- "&:hover $switch$checked, &:active $switch$checked": Object {
26
- "background": "#083CAE",
22
+ "&:focus-visible $switch$checked": Object {
23
+ "boxShadow": "0 0 0 8px rgba(0,110,255,0.3)",
27
24
  },
28
- "&:hover $switch:not($checked), &:active $switch:not($checked)": Object {
25
+ "&:hover $switch $switchBg, &:active $switch $switchBg": Object {
29
26
  "background": "#CAD5EE",
30
27
  },
31
- "alignItems": "start",
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
- "& $icon": Object {
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
- "background": "url(data:image/svg+xml;base64,PHN2ZyB2ZXJzaW9uPSIxLjEiIHhtbG5zPSJodHRwOi8vd3d3LnczLm9yZy8yMDAwL3N2ZyIgeG1sbnM6eGxpbms9Imh0dHA6Ly93d3cudzMub3JnLzE5OTkveGxpbmsiIHg9IjBweCIgeT0iMHB4IgogICAgICAgIAkgdmlld0JveD0iMCAwIDI0IDI0IiBzdHlsZT0iZW5hYmxlLWJhY2tncm91bmQ6bmV3IDAgMCAyNCAyNDsiIHhtbDpzcGFjZT0icHJlc2VydmUiPgogICAgICAgIDxwYXRoIGZpbGw9IiM4REE1REEiIGQ9Ik0xMi4xLDEwLjhsNC42LTQuNkwxOCw3LjRMMTMuNCwxMmw0LjYsNC42TDE2LjcsMThsLTQuNi00LjZMNy40LDE4bC0xLjMtMS4zbDQuNi00LjZMNi4yLDcuNGwxLjMtMS4zTDEyLjEsMTAuOHoiLz4KICAgICAgICA8L3N2Zz4=)",
50
- "display": "block",
51
- "height": "100%",
52
- "transition": "0.3s all",
53
- "width": "100%",
45
+ "margin": 4,
54
46
  },
55
47
  "label": Object {
56
- "marginLeft": "8px",
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
- "cursor": "pointer",
62
- "height": 20,
63
- "left": 2,
62
+ "height": 24,
63
+ "left": 4,
64
64
  "position": "absolute",
65
- "top": 2,
66
- "transition": "0.3s all",
67
- "width": 20,
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
- "background": "#E9EEF8",
71
- "borderRadius": 34,
71
+ "borderRadius": "9999px",
72
72
  "display": "inline-block",
73
73
  "flexShrink": 0,
74
- "height": "24px",
74
+ "height": 32,
75
75
  "position": "relative",
76
- "transition": "0.3s all",
77
- "width": 38,
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
- icon = _colors["default"].icon;
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$checked, &:active $switch$checked': {
30
- background: toggle['selected']['bg']['hover']
31
+ '&:hover $switch $switchBg, &:active $switch $switchBg': {
32
+ background: toggle.unselected.bg.hover
31
33
  },
32
- '&:focus $switch$checked': {
33
- boxShadow: _shadows["default"]['focus-bright-blue'],
34
- background: toggle['selected']['bg']['default']
34
+ '&:focus-visible $switch': {
35
+ boxShadow: _shadows["default"]['focus-indigo']
35
36
  },
36
- '&:hover $switch:not($checked), &:active $switch:not($checked)': {
37
- background: toggle['unselected']['bg']['hover']
37
+ '&:hover $switch$checked $switchBg, &:active $switch$checked $switchBg': {
38
+ background: toggle.selected.bg.hover
38
39
  },
39
- '&:focus $switch:not($checked)': {
40
- background: toggle['unselected']['bg']['default'],
41
- boxShadow: _shadows["default"]['focus-indigo']
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: 38,
57
+ width: toggleWidth,
58
+ height: toggleHeight,
48
59
  flexShrink: 0,
49
- height: _spacing["default"]['size-5'],
50
- background: toggle['unselected']['bg']['default'],
51
- borderRadius: 34,
52
- transition: '0.3s all'
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
- background: toggle['selected']['bg']['default'],
56
- '& $slider': {
57
- left: 16
72
+ '& $switchBg': {
73
+ background: toggle.selected.bg["default"]
58
74
  },
59
- '& $icon': {
60
- background: _icons["default"].base(_icons["default"].check.icon([icon.brand.bold]))
75
+ '& $slider': {
76
+ left: "calc(100% - 28px)"
61
77
  }
62
78
  },
63
79
  slider: {
64
80
  position: 'absolute',
65
- cursor: 'pointer',
66
- top: 2,
67
- left: 2,
68
- width: 20,
69
- height: 20,
81
+ top: '50%',
82
+ transform: 'translateY(-50%)',
83
+ left: 4,
84
+ width: sliderSize,
85
+ height: sliderSize,
70
86
  borderRadius: '50%',
71
- background: toggle['bg']['default'],
72
- transition: '0.3s all'
87
+ background: toggle.bg["default"],
88
+ transition: transition
73
89
  },
74
90
  icon: {
75
- width: '100%',
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
- background: toggle['bg']['disabled']
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-2']
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;