@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
@@ -11,13 +11,11 @@ var _react = _interopRequireWildcard(require("react"));
11
11
 
12
12
  var _propTypes = _interopRequireDefault(require("prop-types"));
13
13
 
14
- var _Text = _interopRequireDefault(require("../../Text"));
15
-
16
14
  var _Icon = _interopRequireDefault(require("../../Icon"));
17
15
 
18
- var _spacing = _interopRequireDefault(require("../../subatomic/spacing"));
16
+ var _spacing = _interopRequireDefault(require("../../tokens/spacing.json"));
19
17
 
20
- var _colors = _interopRequireDefault(require("../../subatomic/colors"));
18
+ var _colors = _interopRequireDefault(require("../../tokens/colors.json"));
21
19
 
22
20
  function _interopRequireDefault(obj) { return obj && obj.__esModule ? obj : { "default": obj }; }
23
21
 
@@ -25,27 +23,17 @@ function _getRequireWildcardCache(nodeInterop) { if (typeof WeakMap !== "functio
25
23
 
26
24
  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; }
27
25
 
28
- function _classCallCheck(instance, Constructor) { if (!(instance instanceof Constructor)) { throw new TypeError("Cannot call a class as a function"); } }
29
-
30
- function _defineProperties(target, props) { for (var i = 0; i < props.length; i++) { var descriptor = props[i]; descriptor.enumerable = descriptor.enumerable || false; descriptor.configurable = true; if ("value" in descriptor) descriptor.writable = true; Object.defineProperty(target, descriptor.key, descriptor); } }
31
-
32
- function _createClass(Constructor, protoProps, staticProps) { if (protoProps) _defineProperties(Constructor.prototype, protoProps); if (staticProps) _defineProperties(Constructor, staticProps); return Constructor; }
33
-
34
- function _inherits(subClass, superClass) { if (typeof superClass !== "function" && superClass !== null) { throw new TypeError("Super expression must either be null or a function"); } subClass.prototype = Object.create(superClass && superClass.prototype, { constructor: { value: subClass, writable: true, configurable: true } }); if (superClass) _setPrototypeOf(subClass, superClass); }
26
+ function _slicedToArray(arr, i) { return _arrayWithHoles(arr) || _iterableToArrayLimit(arr, i) || _unsupportedIterableToArray(arr, i) || _nonIterableRest(); }
35
27
 
36
- function _setPrototypeOf(o, p) { _setPrototypeOf = Object.setPrototypeOf || function _setPrototypeOf(o, p) { o.__proto__ = p; return o; }; return _setPrototypeOf(o, p); }
28
+ function _nonIterableRest() { throw new TypeError("Invalid attempt to destructure non-iterable instance.\nIn order to be iterable, non-array objects must have a [Symbol.iterator]() method."); }
37
29
 
38
- function _createSuper(Derived) { var hasNativeReflectConstruct = _isNativeReflectConstruct(); return function _createSuperInternal() { var Super = _getPrototypeOf(Derived), result; if (hasNativeReflectConstruct) { var NewTarget = _getPrototypeOf(this).constructor; result = Reflect.construct(Super, arguments, NewTarget); } else { result = Super.apply(this, arguments); } return _possibleConstructorReturn(this, result); }; }
30
+ function _unsupportedIterableToArray(o, minLen) { if (!o) return; if (typeof o === "string") return _arrayLikeToArray(o, minLen); var n = Object.prototype.toString.call(o).slice(8, -1); if (n === "Object" && o.constructor) n = o.constructor.name; if (n === "Map" || n === "Set") return Array.from(o); if (n === "Arguments" || /^(?:Ui|I)nt(?:8|16|32)(?:Clamped)?Array$/.test(n)) return _arrayLikeToArray(o, minLen); }
39
31
 
40
- function _possibleConstructorReturn(self, call) { if (call && (_typeof(call) === "object" || typeof call === "function")) { return call; } else if (call !== void 0) { throw new TypeError("Derived constructors may only return object or undefined"); } return _assertThisInitialized(self); }
32
+ function _arrayLikeToArray(arr, len) { if (len == null || len > arr.length) len = arr.length; for (var i = 0, arr2 = new Array(len); i < len; i++) { arr2[i] = arr[i]; } return arr2; }
41
33
 
42
- function _assertThisInitialized(self) { if (self === void 0) { throw new ReferenceError("this hasn't been initialised - super() hasn't been called"); } return self; }
34
+ function _iterableToArrayLimit(arr, i) { var _i = arr == null ? null : typeof Symbol !== "undefined" && arr[Symbol.iterator] || arr["@@iterator"]; if (_i == null) return; var _arr = []; var _n = true; var _d = false; var _s, _e; try { for (_i = _i.call(arr); !(_n = (_s = _i.next()).done); _n = true) { _arr.push(_s.value); if (i && _arr.length === i) break; } } catch (err) { _d = true; _e = err; } finally { try { if (!_n && _i["return"] != null) _i["return"](); } finally { if (_d) throw _e; } } return _arr; }
43
35
 
44
- function _isNativeReflectConstruct() { if (typeof Reflect === "undefined" || !Reflect.construct) return false; if (Reflect.construct.sham) return false; if (typeof Proxy === "function") return true; try { Boolean.prototype.valueOf.call(Reflect.construct(Boolean, [], function () {})); return true; } catch (e) { return false; } }
45
-
46
- function _getPrototypeOf(o) { _getPrototypeOf = Object.setPrototypeOf ? Object.getPrototypeOf : function _getPrototypeOf(o) { return o.__proto__ || Object.getPrototypeOf(o); }; return _getPrototypeOf(o); }
47
-
48
- 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; }
36
+ function _arrayWithHoles(arr) { if (Array.isArray(arr)) return arr; }
49
37
 
50
38
  var itemTypes = {
51
39
  link: 'link',
@@ -53,110 +41,87 @@ var itemTypes = {
53
41
  custom: 'custom'
54
42
  };
55
43
 
56
- var List = /*#__PURE__*/function (_Component) {
57
- _inherits(List, _Component);
58
-
59
- var _super = _createSuper(List);
60
-
61
- function List() {
62
- var _this;
63
-
64
- _classCallCheck(this, List);
65
-
66
- for (var _len = arguments.length, args = new Array(_len), _key = 0; _key < _len; _key++) {
67
- args[_key] = arguments[_key];
68
- }
69
-
70
- _this = _super.call.apply(_super, [this].concat(args));
71
-
72
- _defineProperty(_assertThisInitialized(_this), "state", {
73
- toggle: false
74
- });
75
-
76
- _defineProperty(_assertThisInitialized(_this), "toggleList", function () {
77
- return _this.setState({
78
- toggle: !_this.state.toggle
79
- });
80
- });
81
-
82
- _defineProperty(_assertThisInitialized(_this), "renderLink", function (item) {
83
- var classes = _this.props.classes;
84
- return /*#__PURE__*/_react["default"].createElement(_Text["default"], {
85
- key: item.key,
86
- small: true,
87
- bottomTiny: true
88
- }, /*#__PURE__*/_react["default"].createElement("a", {
89
- href: item.href,
90
- target: item.target,
91
- rel: item.rel,
92
- className: classes.link,
93
- title: item.title
94
- }, item.text));
95
- });
96
-
97
- _defineProperty(_assertThisInitialized(_this), "renderIcon", function (item) {
98
- var classes = _this.props.classes;
99
- return /*#__PURE__*/_react["default"].createElement("div", {
100
- key: item.key,
101
- className: classes.iconWrapper,
102
- title: item.title
103
- }, /*#__PURE__*/_react["default"].createElement(_Icon["default"], {
104
- iconName: item.iconName,
105
- className: classes.icon,
106
- onClick: item.onClick,
107
- colors: [_colors["default"].grey600],
108
- ariaLabel: item.title
109
- }));
110
- });
111
-
112
- _defineProperty(_assertThisInitialized(_this), "renderCustom", function (item) {
113
- return /*#__PURE__*/_react["default"].createElement("div", {
114
- key: item.key
115
- }, item.custom);
116
- });
117
-
118
- _defineProperty(_assertThisInitialized(_this), "renderItem", function (item) {
119
- if (item.type === itemTypes.link) return _this.renderLink(item);else if (item.type === itemTypes.icon) return _this.renderIcon(item);else if (item.type === itemTypes.custom) return _this.renderCustom(item);
120
- });
121
-
122
- return _this;
123
- }
124
-
125
- _createClass(List, [{
126
- key: "render",
127
- value: function render() {
128
- var _this2 = this;
129
-
130
- var _this$props = this.props,
131
- _this$props$list = _this$props.list,
132
- collapse = _this$props$list.collapse,
133
- title = _this$props$list.title,
134
- items = _this$props$list.items,
135
- isMobile = _this$props.isMobile,
136
- classes = _this$props.classes,
137
- listClassName = _this$props.listClassName;
138
- var toggle = this.state.toggle;
139
- var isCollapsible = collapse || isMobile;
140
- return /*#__PURE__*/_react["default"].createElement("div", null, /*#__PURE__*/_react["default"].createElement("div", {
141
- onClick: isCollapsible ? this.toggleList : null,
142
- className: "".concat(classes.title, " ").concat(isCollapsible ? classes.collapsible : '')
143
- }, /*#__PURE__*/_react["default"].createElement(_Text["default"], {
144
- tag: "span"
145
- }, title), isCollapsible && /*#__PURE__*/_react["default"].createElement(_Icon["default"], {
146
- iconName: "forward",
147
- width: _spacing["default"].small,
148
- height: _spacing["default"].small,
149
- className: "".concat(classes.arrow, " ").concat(toggle ? classes.arrowUp : classes.arrowDown)
150
- })), /*#__PURE__*/_react["default"].createElement("div", {
151
- className: "".concat(classes.list, " ").concat(toggle || !isCollapsible ? classes.toggle : '', " ").concat(listClassName)
152
- }, items.map(function (item) {
153
- return _this2.renderItem(item);
154
- })));
155
- }
156
- }]);
157
-
158
- return List;
159
- }(_react.Component);
44
+ var List = function List(_ref) {
45
+ var _ref$list = _ref.list,
46
+ title = _ref$list.title,
47
+ items = _ref$list.items,
48
+ listClassName = _ref.listClassName,
49
+ classes = _ref.classes;
50
+
51
+ var _useState = (0, _react.useState)(false),
52
+ _useState2 = _slicedToArray(_useState, 2),
53
+ toggle = _useState2[0],
54
+ setToggle = _useState2[1];
55
+
56
+ var _useState3 = (0, _react.useState)(false),
57
+ _useState4 = _slicedToArray(_useState3, 2),
58
+ overflowVisible = _useState4[0],
59
+ setOverflowVisible = _useState4[1];
60
+
61
+ var toggleList = (0, _react.useCallback)(function () {
62
+ return setToggle(!toggle);
63
+ }, [toggle]);
64
+ (0, _react.useEffect)(function () {
65
+ var timeout = setTimeout(function () {
66
+ return setOverflowVisible(toggle);
67
+ }, toggle ? 200 : 0);
68
+ return function () {
69
+ return clearTimeout(timeout);
70
+ };
71
+ }, [toggle]);
72
+ var renderLink = (0, _react.useCallback)(function (item) {
73
+ return /*#__PURE__*/_react["default"].createElement("a", {
74
+ key: item.key,
75
+ href: item.href,
76
+ target: item.target,
77
+ rel: item.rel,
78
+ className: classes.link,
79
+ title: item.title,
80
+ "data-testid": item.testId
81
+ }, item.text);
82
+ }, [classes]);
83
+ var renderIcon = (0, _react.useCallback)(function (item) {
84
+ return /*#__PURE__*/_react["default"].createElement("div", {
85
+ key: item.key,
86
+ className: classes.iconWrapper,
87
+ title: item.title
88
+ }, /*#__PURE__*/_react["default"].createElement(_Icon["default"], {
89
+ iconName: item.iconName,
90
+ onClick: item.onClick,
91
+ color: _colors["default"].grey600,
92
+ testId: item.testId
93
+ }));
94
+ }, [classes]);
95
+ var renderCustom = (0, _react.useCallback)(function (item) {
96
+ return /*#__PURE__*/_react["default"].createElement("div", {
97
+ key: item.key
98
+ }, item.custom);
99
+ }, []);
100
+ var renderItem = (0, _react.useCallback)(function (item) {
101
+ if (item.type === itemTypes.link) return renderLink(item);else if (item.type === itemTypes.icon) return renderIcon(item);else if (item.type === itemTypes.custom) return renderCustom(item);
102
+ }, [renderLink, renderIcon, renderCustom]);
103
+ return /*#__PURE__*/_react["default"].createElement(_react.Fragment, null, /*#__PURE__*/_react["default"].createElement("div", {
104
+ onClick: toggleList,
105
+ className: "".concat(classes.title, " ").concat(classes.collapsible),
106
+ "data-testid": "footer-list__title-".concat(title)
107
+ }, /*#__PURE__*/_react["default"].createElement("h5", {
108
+ className: classes.titleColor
109
+ }, title), /*#__PURE__*/_react["default"].createElement(_Icon["default"], {
110
+ iconName: "chevron-down",
111
+ size: _spacing["default"].small,
112
+ className: "".concat(classes.arrow).concat(toggle ? " ".concat(classes.arrowUp) : '')
113
+ })), /*#__PURE__*/_react["default"].createElement("div", {
114
+ className: classes.titleDesktop
115
+ }, /*#__PURE__*/_react["default"].createElement("h5", {
116
+ className: classes.titleColor
117
+ }, title)), /*#__PURE__*/_react["default"].createElement("div", {
118
+ className: "".concat(classes.list).concat(toggle ? " ".concat(classes.toggle) : '').concat(listClassName ? " ".concat(listClassName) : '')
119
+ }, /*#__PURE__*/_react["default"].createElement("div", {
120
+ className: "".concat(classes.content).concat(toggle ? " ".concat(classes.showContent) : '').concat(overflowVisible ? " ".concat(classes.overflowVisible) : '')
121
+ }, items.map(function (item) {
122
+ return renderItem(item);
123
+ }))));
124
+ };
160
125
 
161
126
  List.propTypes = {
162
127
  classes: _propTypes["default"].object,
@@ -5,55 +5,109 @@ Object.defineProperty(exports, "__esModule", {
5
5
  });
6
6
  exports["default"] = void 0;
7
7
 
8
- var _spacing = _interopRequireDefault(require("../../subatomic/spacing"));
8
+ var _colors = _interopRequireDefault(require("../../tokens/colors.json"));
9
9
 
10
- var _colors = _interopRequireDefault(require("../../subatomic/colors"));
10
+ var _spacing = _interopRequireDefault(require("../../tokens/spacing.json"));
11
+
12
+ var _shadows = _interopRequireDefault(require("../../tokens/shadows.json"));
13
+
14
+ var _borderRadius = _interopRequireDefault(require("../../tokens/borderRadius.json"));
15
+
16
+ var _grid = _interopRequireDefault(require("../../subatomic/grid"));
17
+
18
+ var _fonts = _interopRequireDefault(require("../../tokens/fonts.json"));
19
+
20
+ var _styles = require("../../Text/styles");
11
21
 
12
22
  function _interopRequireDefault(obj) { return obj && obj.__esModule ? obj : { "default": obj }; }
13
23
 
24
+ 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; }
25
+
14
26
  var _default = {
15
- list: {
16
- transition: '0.3s all',
17
- pointerEvents: 'none',
18
- overflow: 'hidden',
19
- height: 0,
20
- transform: "translateY(".concat(-_spacing["default"].small, "px)"),
27
+ list: _defineProperty({
28
+ display: 'grid',
29
+ gridTemplateRows: '0fr',
30
+ 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',
21
31
  opacity: 0
22
- },
32
+ }, "@media (min-width: ".concat(_grid["default"].xs, "px)"), {
33
+ opacity: 1,
34
+ gridTemplateRows: '1fr'
35
+ }),
23
36
  toggle: {
24
- height: 'auto',
25
- transform: 'translateY(0)',
26
37
  opacity: 1,
27
- pointerEvents: 'all'
38
+ gridTemplateRows: '1fr',
39
+ 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'
28
40
  },
29
- collapsible: {
30
- cursor: 'pointer'
31
- },
32
- arrow: {
33
- marginLeft: _spacing["default"].tiny,
34
- marginBottom: -_spacing["default"].xTiny
41
+ content: _defineProperty({
42
+ overflow: 'hidden',
43
+ transform: 'translateY(-10px)',
44
+ transition: 'transform cubic-bezier(0.25,0.46,0.45,0.94) 0.2s',
45
+ display: 'flex',
46
+ flexDirection: 'column',
47
+ rowGap: _spacing["default"]['size-4']
48
+ }, "@media (min-width: ".concat(_grid["default"].xs, "px)"), {
49
+ transform: 'translateY(0px)',
50
+ overflow: 'visible'
51
+ }),
52
+ showContent: _defineProperty({}, "@media (max-width: ".concat(_grid["default"].xs - 1, "px)"), {
53
+ transform: 'translateY(0px)',
54
+ transition: 'transform cubic-bezier(0.25,0.46,0.45,0.94) 0.2s 0.05s',
55
+ marginBottom: _spacing["default"]['size-3']
56
+ }),
57
+ overflowVisible: {
58
+ overflow: 'visible'
35
59
  },
60
+ collapsible: _defineProperty({
61
+ cursor: 'pointer',
62
+ display: 'flex',
63
+ justifyContent: 'space-between'
64
+ }, "@media (min-width: ".concat(_grid["default"].xs, "px)"), {
65
+ cursor: 'default'
66
+ }),
67
+ arrow: _defineProperty({
68
+ display: 'inline-block'
69
+ }, "@media (min-width: ".concat(_grid["default"].xs, "px)"), {
70
+ display: 'none'
71
+ }),
36
72
  arrowUp: {
37
- transform: 'rotate(-90deg)'
38
- },
39
- arrowDown: {
40
- transform: 'rotate(90deg)'
73
+ transform: 'rotate(-180deg)'
41
74
  },
42
75
  link: {
43
- color: _colors["default"].grey600,
76
+ font: (0, _styles.parseFontValue)(_fonts["default"]['body-regular']),
77
+ color: _colors["default"].text.corp.secondary,
44
78
  textDecoration: 'none',
45
- '&:hover, &:focus, &:active': {
46
- color: _colors["default"].grey600
79
+ transition: 'all cubic-bezier(0.25,0.46,0.45,0.94) 0.2s',
80
+ '&:hover': {
81
+ color: _colors["default"].text.corp.primary
82
+ },
83
+ '&:focus-visible': {
84
+ color: _colors["default"].text.corp.primary,
85
+ boxShadow: _shadows["default"]['focus-corp'],
86
+ borderRadius: _borderRadius["default"]['br-xs'],
87
+ outline: 0
47
88
  }
48
89
  },
49
- icon: {},
50
90
  iconWrapper: {
51
- marginBottom: _spacing["default"].tiny,
52
- marginRight: _spacing["default"].tiny,
91
+ marginBottom: _spacing["default"]['size-2'],
92
+ marginRight: _spacing["default"]['size-2'],
53
93
  display: 'inline-block'
54
94
  },
55
- title: {
56
- marginBottom: _spacing["default"].tiny
57
- }
95
+ title: _defineProperty({
96
+ padding: [_spacing["default"]['size-4'], 0]
97
+ }, "@media (min-width: ".concat(_grid["default"].xs, "px)"), {
98
+ display: 'none',
99
+ padding: 0,
100
+ marginBottom: _spacing["default"]['size-5']
101
+ }),
102
+ titleColor: {
103
+ font: (0, _styles.parseFontValue)(_fonts["default"]['heading-h5']),
104
+ margin: 0
105
+ },
106
+ titleDesktop: _defineProperty({
107
+ display: 'none'
108
+ }, "@media (min-width: ".concat(_grid["default"].xs, "px)"), {
109
+ marginBottom: _spacing["default"]['size-5'],
110
+ display: 'block'
111
+ })
58
112
  };
59
113
  exports["default"] = _default;
@@ -4,85 +4,135 @@ exports[`Footer matches the snapshot 1`] = `ShallowWrapper {}`;
4
4
 
5
5
  exports[`Footer styles matches the snapshot 1`] = `
6
6
  Object {
7
- "bottomWrap": Object {
8
- "borderTop": "1px solid #dddddd",
9
- "paddingTop": 24,
7
+ "auxContainer": Object {
8
+ "@media (min-width: 992px)": Object {
9
+ "flexDirection": "row",
10
+ "gap": "64px",
11
+ },
12
+ "alignItems": "center",
13
+ "display": "flex",
14
+ "flexDirection": "column",
15
+ "gap": "24px",
16
+ "justifyContent": "center",
10
17
  },
11
- "buttonMobile": Object {
12
- "marginTop": 16,
18
+ "badgesContainer": Object {
19
+ "@media (min-width: 576px)": Object {
20
+ "flexDirection": "row",
21
+ },
22
+ "display": "flex",
23
+ "flexDirection": "column",
24
+ "gap": "16px",
13
25
  },
14
- "column": Object {
15
- "paddingBottom": 16,
16
- "paddingLeft": 12,
17
- "paddingRight": 12,
26
+ "borderTop": Object {
27
+ "borderTop": "1px solid #EDEDF1",
18
28
  },
19
- "footer": Object {
29
+ "bottomContainer": Object {
30
+ "@media (min-width: 768px)": Object {
31
+ "rowGap": "24px",
32
+ },
33
+ "display": "flex",
34
+ "flexDirection": "column",
35
+ "rowGap": "16px",
36
+ },
37
+ "bottomLinksContainer": Object {
38
+ "@media (min-width: 768px)": Object {
39
+ "alignItems": "stretch",
40
+ "flexDirection": "row",
41
+ },
42
+ "columnGap": "24px",
43
+ "display": "flex",
44
+ "flexDirection": "column",
45
+ "justifyContent": "center",
46
+ "rowGap": "16px",
47
+ },
48
+ "bottomSection": Object {
49
+ "display": "flex",
50
+ "flexDirection": "column",
51
+ "rowGap": "40px",
52
+ },
53
+ "column": Object {
54
+ "@media (min-width: 576px)": Object {
55
+ "columnGap": "16px",
56
+ "gridTemplateColumns": "repeat(2, minmax(0, 1fr))",
57
+ "rowGap": "40px",
58
+ },
20
59
  "@media (min-width: 992px)": Object {
21
- "padding": Array [
22
- 32,
23
- 0,
24
- 32,
25
- ],
60
+ "columnGap": "24px",
61
+ "gridTemplateColumns": "repeat(4, minmax(0, 1fr))",
62
+ "rowGap": 0,
26
63
  },
27
- "backgroundColor": "#f5f5f8",
28
- "padding": Array [
29
- 24,
30
- 0,
31
- 32,
32
- ],
64
+ "display": "grid",
33
65
  },
34
- "footerBottom": Object {
35
- "paddingLeft": 12,
36
- "paddingRight": 12,
66
+ "copyright": Object {
67
+ "& > p": Object {
68
+ "margin": 0,
69
+ },
70
+ "color": "#5A5D7B",
71
+ "font": "300 14px/1.5 'OccText', sans-serif",
37
72
  },
38
- "footerWithoutColumns": Object {
73
+ "divider": Object {
74
+ "borderTop": "1px solid #EDEDF1",
75
+ },
76
+ "footer": Object {
77
+ "backgroundColor": "#fff",
78
+ },
79
+ "footerContainer": Object {
80
+ "@media (min-width: 576px)": Object {
81
+ "rowGap": "40px",
82
+ },
39
83
  "@media (min-width: 992px)": Object {
40
- "padding": Array [
41
- 0,
42
- 0,
43
- 32,
44
- ],
84
+ "rowGap": "48px",
45
85
  },
46
- "backgroundColor": "#f5f5f8",
47
- "padding": Array [
48
- 0,
49
- 0,
50
- 32,
51
- ],
86
+ "display": "flex",
87
+ "flexDirection": "column",
88
+ "paddingBottom": "40px",
89
+ "paddingTop": "40px",
90
+ "rowGap": "24px",
91
+ },
92
+ "footerTransparent": Object {
93
+ "backgroundColor": "transparent",
52
94
  },
53
95
  "link": Object {
54
- "&:hover, &:focus, &:active": Object {
55
- "color": "#777777",
96
+ "&:focus-visible": Object {
97
+ "borderRadius": "4px",
98
+ "boxShadow": "0 0 0 8px hsl(234 75.4% 12.7% / 0.1)",
99
+ "color": "#080D39",
100
+ "outline": 0,
101
+ },
102
+ "&:hover": Object {
103
+ "color": "#080D39",
56
104
  },
57
- "color": "#777777",
105
+ "color": "#5A5D7B",
58
106
  "cursor": "pointer",
107
+ "font": "300 14px/1.5 'OccText', sans-serif",
59
108
  "textDecoration": "none",
109
+ "transition": "all cubic-bezier(0.25,0.46,0.45,0.94) 0.2s",
60
110
  },
61
- "list": Object {
62
- "&:not(:first-child)": Object {
63
- "marginLeft": 16,
111
+ "linkDivider": Object {
112
+ "@media (min-width: 768px)": Object {
113
+ "display": "block",
64
114
  },
115
+ "alignSelf": "stretch",
116
+ "backgroundColor": "#6C6F89",
117
+ "display": "none",
118
+ "margin": Array [
119
+ "2px",
120
+ 0,
121
+ ],
122
+ "width": 1,
65
123
  },
66
124
  "listElement": Object {
67
- "&:first-child": Object {
68
- "paddingLeft": 0,
125
+ "@media (min-width: 768px)": Object {
126
+ "display": "inline-block",
127
+ "position": "relative",
69
128
  },
70
- "&:not(:last-child)": Object {
71
- "&::after": Object {
72
- "content": "\\"|\\"",
73
- "position": "absolute",
74
- "right": -2,
75
- },
76
- },
77
- "display": "inline-block",
78
- "paddingLeft": 16,
79
- "paddingRight": 16,
80
- "position": "relative",
81
- },
82
- "mobileListElement": Object {
83
129
  "display": "block",
84
- "paddingBottom": 8,
85
- "paddingLeft": 0,
130
+ "textAlign": "center",
131
+ },
132
+ "socialMediaContainer": Object {
133
+ "columnGap": "4px",
134
+ "direction": "row",
135
+ "display": "flex",
86
136
  },
87
137
  }
88
138
  `;