@occmundial/occ-atomic 2.0.0-beta.1 → 2.0.0-beta.11
Sign up to get free protection for your applications and to get access to all the features.
- package/.prettierrc +6 -0
- package/.whitesource +12 -0
- package/CHANGELOG.md +1361 -584
- package/CONTRIBUTING.md +24 -0
- package/README.md +21 -21
- package/build/Autocomplete/Autocomplete.js +217 -117
- package/build/Autocomplete/Autocomplete.test.js +90 -74
- package/build/Autocomplete/__snapshots__/Autocomplete.test.js.snap +20 -0
- package/build/Autocomplete/index.js +6 -1
- package/build/Autocomplete/styles.js +2 -5
- package/build/Avatar/Avatar.js +66 -28
- package/build/Avatar/Avatar.test.js +36 -13
- package/build/Avatar/AvatarContent/AvatarContent.js +11 -14
- package/build/Avatar/AvatarContent/AvatarContent.test.js +55 -50
- package/build/Avatar/AvatarContent/__snapshots__/AvatarContent.test.js.snap +41 -0
- package/build/Avatar/AvatarContent/index.js +6 -1
- package/build/Avatar/AvatarContent/styles.js +12 -11
- package/build/Avatar/__snapshots__/Avatar.test.js.snap +17 -0
- package/build/Avatar/index.js +22 -1
- package/build/Avatar/styles.js +2 -6
- package/build/Banner/Banner.js +76 -0
- package/build/Banner/Banner.test.js +40 -0
- package/build/Banner/__snapshots__/Banner.test.js.snap +33 -0
- package/build/Banner/index.js +18 -0
- package/build/Banner/styles.js +41 -0
- package/build/Button/Button.js +134 -61
- package/build/Button/Button.test.js +69 -20
- package/build/Button/Loading.js +82 -0
- package/build/Button/__snapshots__/Button.test.js.snap +322 -0
- package/build/Button/index.js +22 -1
- package/build/Button/styles.js +187 -178
- package/build/ButtonAlign/ButtonAlign.js +20 -16
- package/build/ButtonAlign/ButtonAlign.test.js +3 -3
- package/build/ButtonAlign/__snapshots__/ButtonAlign.test.js.snap +19 -0
- package/build/Card/Card.js +4 -5
- package/build/Card/Card.test.js +40 -35
- package/build/Card/__snapshots__/Card.test.js.snap +46 -0
- package/build/Card/index.js +22 -1
- package/build/Card/styles.js +2 -4
- package/build/Check/Check.js +18 -14
- package/build/Check/Check.test.js +7 -7
- package/build/Check/__snapshots__/Check.test.js.snap +92 -0
- package/build/Check/styles.js +2 -2
- package/build/Checkbox/Checkbox.js +106 -60
- package/build/Checkbox/Checkbox.test.js +58 -42
- package/build/Checkbox/__snapshots__/Checkbox.test.js.snap +92 -0
- package/build/Checkbox/index.js +4 -2
- package/build/Checkbox/styles.js +2 -5
- package/build/Column/Column.js +1 -1
- package/build/Column/Column.test.js +3 -3
- package/build/Column/__snapshots__/Column.test.js.snap +647 -0
- package/build/Container/Container.js +1 -1
- package/build/Container/Container.test.js +4 -4
- package/build/Container/__snapshots__/Container.test.js.snap +43 -0
- package/build/Droplist/Droplist.js +474 -227
- package/build/Droplist/Droplist.test.js +111 -87
- package/build/Droplist/__snapshots__/Droplist.test.js.snap +65 -0
- package/build/Droplist/functions.js +9 -2
- package/build/Droplist/index.js +22 -1
- package/build/Droplist/styles.js +41 -15
- package/build/Flexbox/Flexbox.js +64 -29
- package/build/Flexbox/Flexbox.test.js +32 -14
- package/build/Flexbox/__snapshots__/Flexbox.test.js.snap +106 -0
- package/build/Flexbox/index.js +22 -1
- package/build/Flexbox/styles.js +2 -6
- package/build/Footer/Footer.js +42 -30
- package/build/Footer/Footer.test.js +2 -2
- package/build/Footer/List/List.js +32 -25
- package/build/Footer/__snapshots__/Footer.test.js.snap +90 -0
- package/build/Footer/styles.js +5 -0
- package/build/Grid/Col/Col.js +15 -22
- package/build/Grid/Col/Col.test.js +33 -13
- package/build/Grid/Col/__snapshots__/Col.test.js.snap +963 -0
- package/build/Grid/Col/index.js +22 -1
- package/build/Grid/Col/styles.js +97 -116
- package/build/Grid/Grid.js +18 -12
- package/build/Grid/Row/Row.js +1 -1
- package/build/Grid/Row/Row.test.js +2 -2
- package/build/Grid/Row/__snapshots__/Row.test.js.snap +22 -0
- package/build/Grid/Row/index.js +4 -2
- package/build/Grid/index.js +4 -2
- package/build/Header/Header.js +35 -31
- package/build/Header/Header.test.js +8 -8
- package/build/Header/Menu/Menu.js +23 -19
- package/build/Header/Menu/Menu.test.js +7 -7
- package/build/Header/Menu/__snapshots__/Menu.test.js.snap +113 -0
- package/build/Header/Nav/Nav.js +19 -15
- package/build/Header/Nav/Nav.test.js +5 -5
- package/build/Header/Nav/__snapshots__/Nav.test.js.snap +101 -0
- package/build/Header/__snapshots__/Header.test.js.snap +79 -0
- package/build/Hidden/Hidden.js +17 -13
- package/build/Hidden/Hidden.test.js +6 -6
- package/build/Hidden/__snapshots__/Hidden.test.js.snap +3 -0
- package/build/Hidden/index.js +4 -2
- package/build/Icon/Icon.js +90 -15
- package/build/Icon/Icon.test.js +49 -56
- package/build/Icon/__snapshots__/Icon.test.js.snap +32 -0
- package/build/Icon/index.js +22 -1
- package/build/Icon/styles.js +16 -9
- package/build/Input/Input.js +29 -25
- package/build/Input/Input.test.js +21 -21
- package/build/Input/__snapshots__/Input.test.js.snap +194 -0
- package/build/Input/index.js +17 -13
- package/build/Label/Label.js +17 -13
- package/build/Label/Label.test.js +6 -6
- package/build/Label/__snapshots__/Label.test.js.snap +82 -0
- package/build/LayerApp/LayerApp.js +22 -18
- package/build/LayerApp/LayerApp.test.js +4 -4
- package/build/LayerApp/__snapshots__/LayerApp.test.js.snap +37 -0
- package/build/Modal/Modal.js +55 -37
- package/build/Modal/Modal.test.js +15 -12
- package/build/Modal/__snapshots__/Modal.test.js.snap +208 -0
- package/build/Modal/index.js +19 -13
- package/build/Modal/styles.js +43 -31
- package/build/NavAside/NavAside.js +24 -19
- package/build/NavAside/NavAside.test.js +15 -13
- package/build/NavAside/__snapshots__/NavAside.test.js.snap +116 -0
- package/build/NavAside/index.js +16 -12
- package/build/NavIcon/NavIcon.js +41 -20
- package/build/NavIcon/styles.js +6 -16
- package/build/NavItem/NavItem.js +29 -16
- package/build/NavTab/NavTab.js +38 -29
- package/build/NavTop/NavTop.js +20 -16
- package/build/OrderBy/OrderBy.js +23 -19
- package/build/OrderBy/OrderBy.test.js +6 -6
- package/build/OrderBy/__snapshots__/OrderBy.test.js.snap +54 -0
- package/build/Pager/Break/Break.js +1 -1
- package/build/Pager/Break/Break.test.js +4 -4
- package/build/Pager/Break/__snapshots__/Break.test.js.snap +13 -0
- package/build/Pager/Page/Page.js +1 -1
- package/build/Pager/Page/Page.test.js +5 -5
- package/build/Pager/Page/__snapshots__/Page.test.js.snap +27 -0
- package/build/Pager/Pager.js +21 -17
- package/build/Pager/Pager.test.js +12 -12
- package/build/Pager/__snapshots__/Pager.test.js.snap +50 -0
- package/build/Pager/styles.js +1 -1
- package/build/Pill/Choice/Choice.js +23 -18
- package/build/Pill/Choice/styles.js +8 -3
- package/build/Pill/Group/Group.js +7 -4
- package/build/Pill/Group/styles.js +7 -4
- package/build/Pill/Pill.js +36 -23
- package/build/Pill/Pill.test.js +12 -12
- package/build/Pill/Stack/Stack.js +10 -7
- package/build/Pill/Stack/styles.js +4 -1
- package/build/Pill/__snapshots__/Pill.test.js.snap +62 -0
- package/build/Pill/styles.js +6 -2
- package/build/Placeholder/Placeholder.js +2 -2
- package/build/Placeholder/Placeholder.test.js +3 -3
- package/build/Placeholder/__snapshots__/Placeholder.test.js.snap +130 -0
- package/build/Placeholder/styles.js +23 -16
- package/build/Provider/Provider.js +89 -0
- package/build/Provider/index.js +13 -0
- package/build/Provider/useAtomic.js +17 -0
- package/build/{hooks → Provider}/usePrevious.js +1 -1
- package/build/Radio/Radio.js +29 -15
- package/build/Radio/Radio.test.js +6 -6
- package/build/Radio/__snapshots__/Radio.test.js.snap +83 -0
- package/build/RangeCounter/RangeCounter.js +17 -13
- package/build/RangeCounter/RangeCounter.test.js +3 -3
- package/build/RangeCounter/__snapshots__/RangeCounter.test.js.snap +20 -0
- package/build/RangeCounter/styles.js +1 -1
- package/build/Row/Row.js +1 -1
- package/build/Row/Row.test.js +2 -2
- package/build/Row/__snapshots__/Row.test.js.snap +22 -0
- package/build/SightLogo/SightLogo.js +2 -2
- package/build/SightLogo/SightLogo.test.js +2 -2
- package/build/SightLogo/__snapshots__/SightLogo.test.js.snap +24 -0
- package/build/SlideDown/SlideDown.js +41 -27
- package/build/SlideDown/SlideDown.test.js +22 -16
- package/build/SlideDown/__snapshots__/SlideDown.test.js.snap +42 -0
- package/build/SlideToggle/SlideToggle.js +31 -17
- package/build/SlideToggle/SlideToggle.test.js +7 -7
- package/build/SlideToggle/__snapshots__/SlideToggle.test.js.snap +62 -0
- package/build/SubHeader/SubHeader.js +20 -16
- package/build/SubHeader/SubHeader.test.js +7 -7
- package/build/SubHeader/__snapshots__/SubHeader.test.js.snap +50 -0
- package/build/SwitchGroup/SwitchGroup.js +17 -13
- package/build/SwitchGroup/SwitchGroup.test.js +6 -6
- package/build/SwitchGroup/__snapshots__/SwitchGroup.test.js.snap +52 -0
- package/build/SwitchGroup/styles.js +1 -1
- package/build/Tag/Tag.js +27 -10
- package/build/Tag/Tag.test.js +8 -8
- package/build/Tag/__snapshots__/Tag.test.js.snap +137 -0
- package/build/Tag/styles.js +72 -27
- package/build/Text/Text.js +454 -122
- package/build/Text/Text.test.js +13 -13
- package/build/Text/__snapshots__/Text.test.js.snap +216 -0
- package/build/Text/styles.js +171 -78
- package/build/TextField/TextField.js +455 -302
- package/build/TextField/TextField.test.js +138 -146
- package/build/TextField/__snapshots__/TextField.test.js.snap +258 -0
- package/build/TextField/index.js +6 -1
- package/build/TextField/styles.js +99 -33
- package/build/Tip/Tip.js +91 -27
- package/build/Tip/Tip.test.js +8 -8
- package/build/Tip/__snapshots__/Tip.test.js.snap +49 -0
- package/build/Tip/styles.js +32 -12
- package/build/Title/Title.js +16 -12
- package/build/Title/Title.test.js +3 -3
- package/build/Title/__snapshots__/Title.test.js.snap +31 -0
- package/build/Toaster/Toast/Toast.js +13 -13
- package/build/Toaster/Toaster.js +27 -23
- package/build/Toaster/Toaster.test.js +6 -6
- package/build/Toaster/__snapshots__/Toaster.test.js.snap +5 -0
- package/build/Tooltip/Tooltip.js +210 -0
- package/build/Tooltip/Tooltip.test.js +35 -0
- package/build/Tooltip/__snapshots__/Tooltip.test.js.snap +33 -0
- package/build/Tooltip/hooks.js +132 -0
- package/build/Tooltip/index.js +18 -0
- package/build/Tooltip/styles.js +44 -0
- package/build/TourTip/TourTip.js +15 -11
- package/build/TourTip/TourTip.test.js +2 -2
- package/build/TourTip/__snapshots__/TourTip.test.js.snap +74 -0
- package/build/Visible/Visible.js +16 -12
- package/build/Visible/Visible.test.js +4 -4
- package/build/Visible/__snapshots__/Visible.test.js.snap +3 -0
- package/build/WindowSize/WindowSize.js +17 -11
- package/build/WindowSize/WindowSize.test.js +4 -4
- package/build/WindowSize/__snapshots__/WindowSize.test.js.snap +3 -0
- package/build/index.js +82 -8
- package/build/plugin/babel.js +61 -0
- package/build/subatomic/colors.js +8 -3
- package/build/subatomic/fonts.js +1 -1
- package/build/subatomic/icons/attachment.js +23 -0
- package/build/subatomic/icons/attachmentSolid.js +23 -0
- package/build/subatomic/icons/avatarSmile.js +23 -0
- package/build/subatomic/icons/book.js +23 -0
- package/build/subatomic/icons/cash.js +23 -0
- package/build/subatomic/icons/copy.js +23 -0
- package/build/subatomic/icons/copySolid.js +23 -0
- package/build/subatomic/icons/crossSolid.js +23 -0
- package/build/subatomic/icons/dislike.js +1 -1
- package/build/subatomic/icons/dislikeSolid.js +23 -0
- package/build/subatomic/icons/energy.js +23 -0
- package/build/subatomic/icons/energySolid.js +23 -0
- package/build/subatomic/icons/eye.js +1 -1
- package/build/subatomic/icons/eyeClosed.js +1 -1
- package/build/subatomic/icons/eyeClosedSolid.js +23 -0
- package/build/subatomic/icons/eyeSolid.js +23 -0
- package/build/subatomic/icons/hourGlass.js +23 -0
- package/build/subatomic/icons/like.js +1 -1
- package/build/subatomic/icons/likeSolid.js +23 -0
- package/build/subatomic/icons/location.js +23 -0
- package/build/subatomic/icons/locationSolid.js +23 -0
- package/build/subatomic/icons/matchJob.js +23 -0
- package/build/subatomic/icons/messages.js +1 -1
- package/build/subatomic/icons/messagesSolid.js +1 -1
- package/build/subatomic/icons/moreOptionsHorizontal.js +23 -0
- package/build/subatomic/icons/noMessages.js +23 -0
- package/build/subatomic/icons/noMessagesSolid.js +23 -0
- package/build/subatomic/icons/occDart.js +25 -8
- package/build/subatomic/icons/occHorizontal.js +25 -8
- package/build/subatomic/icons/occLogo.js +65 -0
- package/build/subatomic/icons/occVertical.js +25 -8
- package/build/subatomic/icons/profile.js +23 -0
- package/build/subatomic/icons/profileSolid.js +23 -0
- package/build/subatomic/icons/profileView.js +23 -0
- package/build/subatomic/icons/refresh.js +23 -0
- package/build/subatomic/icons/refreshSolid.js +23 -0
- package/build/subatomic/icons/sendMessage.js +23 -0
- package/build/subatomic/icons/sendMessageSolid.js +23 -0
- package/build/subatomic/icons/starsSolid.js +23 -0
- package/build/subatomic/icons/suitcase.js +23 -0
- package/build/subatomic/icons/suitcaseSolid.js +23 -0
- package/build/subatomic/icons/tag.js +1 -1
- package/build/subatomic/icons/tagSolid.js +23 -0
- package/build/subatomic/icons/trash.js +1 -1
- package/build/subatomic/icons/trashSolid.js +1 -1
- package/build/subatomic/icons/warning.js +23 -0
- package/build/subatomic/icons/warningSolid.js +23 -0
- package/build/subatomic/icons/webSite.js +23 -0
- package/build/subatomic/icons/webSiteSolid.js +23 -0
- package/build/subatomic/icons.js +230 -112
- package/build/subatomic/mappedIcons.js +171 -0
- package/build/tokens/borderRadius.json +8 -0
- package/build/tokens/colors.json +567 -0
- package/build/tokens/fonts.json +231 -0
- package/build/tokens/index.js +47 -0
- package/build/tokens/shadows.json +13 -0
- package/build/tokens/spacing.json +16 -0
- package/commitlint.config.js +6 -0
- package/package.json +124 -113
- package/playroom/FrameComponent.js +31 -0
- package/playroom/styles.js +14 -0
- package/playroom.config.js +7 -7
- package/build/Grid/Grid.test.js +0 -22
- package/build/Grid/Row/Rowdsd.js +0 -39
- package/build/hooks/useEventListener.js +0 -23
- package/yarn-error.log +0 -10737
package/build/Title/Title.js
CHANGED
@@ -1,5 +1,7 @@
|
|
1
1
|
"use strict";
|
2
2
|
|
3
|
+
function _typeof(obj) { "@babel/helpers - typeof"; if (typeof Symbol === "function" && typeof Symbol.iterator === "symbol") { _typeof = function _typeof(obj) { return typeof obj; }; } else { _typeof = function _typeof(obj) { return obj && typeof Symbol === "function" && obj.constructor === Symbol && obj !== Symbol.prototype ? "symbol" : typeof obj; }; } return _typeof(obj); }
|
4
|
+
|
3
5
|
Object.defineProperty(exports, "__esModule", {
|
4
6
|
value: true
|
5
7
|
});
|
@@ -11,34 +13,36 @@ var _propTypes = _interopRequireDefault(require("prop-types"));
|
|
11
13
|
|
12
14
|
function _interopRequireDefault(obj) { return obj && obj.__esModule ? obj : { "default": obj }; }
|
13
15
|
|
14
|
-
function _typeof(obj) { if (typeof Symbol === "function" && typeof Symbol.iterator === "symbol") { _typeof = function _typeof(obj) { return typeof obj; }; } else { _typeof = function _typeof(obj) { return obj && typeof Symbol === "function" && obj.constructor === Symbol && obj !== Symbol.prototype ? "symbol" : typeof obj; }; } return _typeof(obj); }
|
15
|
-
|
16
16
|
function _classCallCheck(instance, Constructor) { if (!(instance instanceof Constructor)) { throw new TypeError("Cannot call a class as a function"); } }
|
17
17
|
|
18
18
|
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); } }
|
19
19
|
|
20
20
|
function _createClass(Constructor, protoProps, staticProps) { if (protoProps) _defineProperties(Constructor.prototype, protoProps); if (staticProps) _defineProperties(Constructor, staticProps); return Constructor; }
|
21
21
|
|
22
|
-
function
|
22
|
+
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); }
|
23
23
|
|
24
|
-
function
|
24
|
+
function _setPrototypeOf(o, p) { _setPrototypeOf = Object.setPrototypeOf || function _setPrototypeOf(o, p) { o.__proto__ = p; return o; }; return _setPrototypeOf(o, p); }
|
25
25
|
|
26
|
-
function
|
26
|
+
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); }; }
|
27
27
|
|
28
|
-
function
|
28
|
+
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); }
|
29
29
|
|
30
|
-
function
|
30
|
+
function _assertThisInitialized(self) { if (self === void 0) { throw new ReferenceError("this hasn't been initialised - super() hasn't been called"); } return self; }
|
31
|
+
|
32
|
+
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; } }
|
33
|
+
|
34
|
+
function _getPrototypeOf(o) { _getPrototypeOf = Object.setPrototypeOf ? Object.getPrototypeOf : function _getPrototypeOf(o) { return o.__proto__ || Object.getPrototypeOf(o); }; return _getPrototypeOf(o); }
|
31
35
|
|
32
36
|
/** Component to display heading tags with its coresponding style. */
|
33
|
-
var Title =
|
34
|
-
/*#__PURE__*/
|
35
|
-
function (_React$Component) {
|
37
|
+
var Title = /*#__PURE__*/function (_React$Component) {
|
36
38
|
_inherits(Title, _React$Component);
|
37
39
|
|
40
|
+
var _super = _createSuper(Title);
|
41
|
+
|
38
42
|
function Title() {
|
39
43
|
_classCallCheck(this, Title);
|
40
44
|
|
41
|
-
return
|
45
|
+
return _super.apply(this, arguments);
|
42
46
|
}
|
43
47
|
|
44
48
|
_createClass(Title, [{
|
@@ -60,7 +64,7 @@ function (_React$Component) {
|
|
60
64
|
style = _this$props.style;
|
61
65
|
var Heading;
|
62
66
|
if (h && h <= 6 && h >= 1) Heading = "h".concat(h);else Heading = 'h1';
|
63
|
-
return _react["default"].createElement(Heading, {
|
67
|
+
return /*#__PURE__*/_react["default"].createElement(Heading, {
|
64
68
|
id: id,
|
65
69
|
className: "".concat(classes.title, " ").concat(classes[Heading]).concat(className ? " ".concat(className) : ''),
|
66
70
|
style: style
|
@@ -21,14 +21,14 @@ var reduceClasses = function reduceClasses(prev, curr) {
|
|
21
21
|
var classes = Object.keys(_styles["default"]).reduce(reduceClasses, {});
|
22
22
|
describe("Title", function () {
|
23
23
|
it('matches the snapshot', function () {
|
24
|
-
var wrapper = (0, _enzyme.shallow)(_react["default"].createElement(_Title["default"], {
|
24
|
+
var wrapper = (0, _enzyme.shallow)( /*#__PURE__*/_react["default"].createElement(_Title["default"], {
|
25
25
|
h: 1,
|
26
26
|
classes: classes
|
27
27
|
}));
|
28
28
|
expect(wrapper).toMatchSnapshot();
|
29
29
|
});
|
30
30
|
it('renders the right heading', function () {
|
31
|
-
var wrapper = (0, _enzyme.shallow)(_react["default"].createElement(_Title["default"], {
|
31
|
+
var wrapper = (0, _enzyme.shallow)( /*#__PURE__*/_react["default"].createElement(_Title["default"], {
|
32
32
|
h: 3,
|
33
33
|
classes: classes
|
34
34
|
}));
|
@@ -37,7 +37,7 @@ describe("Title", function () {
|
|
37
37
|
});
|
38
38
|
describe("TitleJSS", function () {
|
39
39
|
it('matches the snapshot', function () {
|
40
|
-
var wrapper = (0, _enzyme.shallow)(_react["default"].createElement(_index["default"], {
|
40
|
+
var wrapper = (0, _enzyme.shallow)( /*#__PURE__*/_react["default"].createElement(_index["default"], {
|
41
41
|
h: 1
|
42
42
|
}));
|
43
43
|
expect(wrapper).toMatchSnapshot();
|
@@ -0,0 +1,31 @@
|
|
1
|
+
// Jest Snapshot v1, https://goo.gl/fbAQLP
|
2
|
+
|
3
|
+
exports[`Title matches the snapshot 1`] = `ShallowWrapper {}`;
|
4
|
+
|
5
|
+
exports[`Title styles matches the snapshot 1`] = `
|
6
|
+
Object {
|
7
|
+
"h1": Object {
|
8
|
+
"fontSize": "22px",
|
9
|
+
},
|
10
|
+
"h2": Object {
|
11
|
+
"fontSize": "20px",
|
12
|
+
},
|
13
|
+
"h3": Object {
|
14
|
+
"fontSize": "18px",
|
15
|
+
},
|
16
|
+
"h4": Object {
|
17
|
+
"fontSize": "15px",
|
18
|
+
},
|
19
|
+
"title": Object {
|
20
|
+
"boxSizing": "border-box",
|
21
|
+
"color": "#3e5466",
|
22
|
+
"fontFamily": "'Nunito Sans', sans-serif",
|
23
|
+
"fontWeight": "600",
|
24
|
+
"lineHeight": "1.1",
|
25
|
+
"marginBottom": "15px",
|
26
|
+
"marginTop": "20px",
|
27
|
+
},
|
28
|
+
}
|
29
|
+
`;
|
30
|
+
|
31
|
+
exports[`TitleJSS matches the snapshot 1`] = `ShallowWrapper {}`;
|
@@ -37,25 +37,25 @@ var Toast = function Toast(_ref) {
|
|
37
37
|
switch (theme) {
|
38
38
|
case 'success':
|
39
39
|
return {
|
40
|
-
icon: '
|
40
|
+
icon: 'check-circle',
|
41
41
|
color: _colors["default"].bgWhite
|
42
42
|
};
|
43
43
|
|
44
44
|
case 'error':
|
45
45
|
return {
|
46
|
-
icon: '
|
46
|
+
icon: 'x-circle',
|
47
47
|
color: _colors["default"].bgWhite
|
48
48
|
};
|
49
49
|
|
50
50
|
case 'info':
|
51
51
|
return {
|
52
|
-
icon: '
|
52
|
+
icon: 'info-circle',
|
53
53
|
color: _colors["default"].bgWhite
|
54
54
|
};
|
55
55
|
|
56
56
|
case 'warning':
|
57
57
|
return {
|
58
|
-
icon: '
|
58
|
+
icon: 'alert',
|
59
59
|
color: _colors["default"].grey900
|
60
60
|
};
|
61
61
|
}
|
@@ -71,34 +71,34 @@ var Toast = function Toast(_ref) {
|
|
71
71
|
onClose();
|
72
72
|
};
|
73
73
|
|
74
|
-
return _react["default"].createElement("div", {
|
74
|
+
return /*#__PURE__*/_react["default"].createElement("div", {
|
75
75
|
className: "".concat(classes.toast, " ").concat(classes[theme]).concat(closing ? " ".concat(classes.closing) : ''),
|
76
76
|
onMouseEnter: pauseTimer,
|
77
77
|
onMouseLeave: resumeTimer
|
78
|
-
}, _react["default"].createElement(_Flexbox["default"], {
|
78
|
+
}, /*#__PURE__*/_react["default"].createElement(_Flexbox["default"], {
|
79
79
|
display: "flex",
|
80
80
|
className: classes.content
|
81
|
-
}, _react["default"].createElement(_Flexbox["default"], {
|
81
|
+
}, /*#__PURE__*/_react["default"].createElement(_Flexbox["default"], {
|
82
82
|
display: "flex",
|
83
83
|
alignItems: "center"
|
84
|
-
}, hasIcon && _react["default"].createElement(_Icon["default"], {
|
84
|
+
}, hasIcon && /*#__PURE__*/_react["default"].createElement(_Icon["default"], {
|
85
85
|
iconName: iconData.icon,
|
86
86
|
colors: [iconData.color],
|
87
87
|
className: classes.icon
|
88
|
-
}), _react["default"].createElement(_Flexbox["default"], {
|
88
|
+
}), /*#__PURE__*/_react["default"].createElement(_Flexbox["default"], {
|
89
89
|
flex: "1"
|
90
|
-
}, title && _react["default"].createElement(_Text["default"], _extends({
|
90
|
+
}, title && /*#__PURE__*/_react["default"].createElement(_Text["default"], _extends({
|
91
91
|
subheading: true
|
92
|
-
}, textColor), title), description && _react["default"].createElement(_Text["default"], textColor, description))), action && _react["default"].createElement("button", {
|
92
|
+
}, textColor), title), description && /*#__PURE__*/_react["default"].createElement(_Text["default"], textColor, description))), action && /*#__PURE__*/_react["default"].createElement("button", {
|
93
93
|
className: classes.action,
|
94
94
|
onClick: function onClick() {
|
95
95
|
return onActionClick(action);
|
96
96
|
}
|
97
|
-
}, _react["default"].createElement(_Flexbox["default"], {
|
97
|
+
}, /*#__PURE__*/_react["default"].createElement(_Flexbox["default"], {
|
98
98
|
display: "flex",
|
99
99
|
alignItems: "center",
|
100
100
|
className: classes.actionWrap
|
101
|
-
}, _react["default"].createElement(_Text["default"], _extends({}, textColor, {
|
101
|
+
}, /*#__PURE__*/_react["default"].createElement(_Text["default"], _extends({}, textColor, {
|
102
102
|
strong: true,
|
103
103
|
className: classes.actionText
|
104
104
|
}), action.label)))));
|
package/build/Toaster/Toaster.js
CHANGED
@@ -1,5 +1,7 @@
|
|
1
1
|
"use strict";
|
2
2
|
|
3
|
+
function _typeof(obj) { "@babel/helpers - typeof"; if (typeof Symbol === "function" && typeof Symbol.iterator === "symbol") { _typeof = function _typeof(obj) { return typeof obj; }; } else { _typeof = function _typeof(obj) { return obj && typeof Symbol === "function" && obj.constructor === Symbol && obj !== Symbol.prototype ? "symbol" : typeof obj; }; } return _typeof(obj); }
|
4
|
+
|
3
5
|
Object.defineProperty(exports, "__esModule", {
|
4
6
|
value: true
|
5
7
|
});
|
@@ -17,23 +19,25 @@ var _functions = require("./functions");
|
|
17
19
|
|
18
20
|
function _interopRequireDefault(obj) { return obj && obj.__esModule ? obj : { "default": obj }; }
|
19
21
|
|
20
|
-
function _typeof(obj) { if (typeof Symbol === "function" && typeof Symbol.iterator === "symbol") { _typeof = function _typeof(obj) { return typeof obj; }; } else { _typeof = function _typeof(obj) { return obj && typeof Symbol === "function" && obj.constructor === Symbol && obj !== Symbol.prototype ? "symbol" : typeof obj; }; } return _typeof(obj); }
|
21
|
-
|
22
22
|
function _classCallCheck(instance, Constructor) { if (!(instance instanceof Constructor)) { throw new TypeError("Cannot call a class as a function"); } }
|
23
23
|
|
24
24
|
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); } }
|
25
25
|
|
26
26
|
function _createClass(Constructor, protoProps, staticProps) { if (protoProps) _defineProperties(Constructor.prototype, protoProps); if (staticProps) _defineProperties(Constructor, staticProps); return Constructor; }
|
27
27
|
|
28
|
-
function
|
28
|
+
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); }
|
29
|
+
|
30
|
+
function _setPrototypeOf(o, p) { _setPrototypeOf = Object.setPrototypeOf || function _setPrototypeOf(o, p) { o.__proto__ = p; return o; }; return _setPrototypeOf(o, p); }
|
29
31
|
|
30
|
-
function
|
32
|
+
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); }; }
|
33
|
+
|
34
|
+
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); }
|
31
35
|
|
32
36
|
function _assertThisInitialized(self) { if (self === void 0) { throw new ReferenceError("this hasn't been initialised - super() hasn't been called"); } return self; }
|
33
37
|
|
34
|
-
function
|
38
|
+
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; } }
|
35
39
|
|
36
|
-
function
|
40
|
+
function _getPrototypeOf(o) { _getPrototypeOf = Object.setPrototypeOf ? Object.getPrototypeOf : function _getPrototypeOf(o) { return o.__proto__ || Object.getPrototypeOf(o); }; return _getPrototypeOf(o); }
|
37
41
|
|
38
42
|
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; }
|
39
43
|
|
@@ -41,29 +45,29 @@ var timings = {
|
|
41
45
|
normal: 5000,
|
42
46
|
longer: 8000
|
43
47
|
};
|
44
|
-
/**
|
45
|
-
* The Toaster component allows you to trigger any of the predefined types of alerts. Insert the Toaster component in any part of your site, and handle the alerts with the toaster object's API.
|
46
|
-
* Check the example to see how to trigger any kind of alert. This component will only show one toast at a time, any new toast will automatically dismiss the current toast.
|
47
|
-
* The toast object can have the next properties:
|
48
|
-
* • title - string
|
49
|
-
* • description -string
|
50
|
-
* • hasIcon - boolean
|
51
|
-
* • action - object with label and onClick
|
52
|
-
* • timer - one of: 'normal', 'longer'
|
53
|
-
* You can only mount one Toaster component at a time, since mounting an instance sets the toaster listeners, and unmounting the component nullifies the existing listeners, so having two instances of Toaster and unmounting one will break them.
|
48
|
+
/**
|
49
|
+
* The Toaster component allows you to trigger any of the predefined types of alerts. Insert the Toaster component in any part of your site, and handle the alerts with the toaster object's API.
|
50
|
+
* Check the example to see how to trigger any kind of alert. This component will only show one toast at a time, any new toast will automatically dismiss the current toast.
|
51
|
+
* The toast object can have the next properties:
|
52
|
+
* • title - string
|
53
|
+
* • description -string
|
54
|
+
* • hasIcon - boolean
|
55
|
+
* • action - object with label and onClick
|
56
|
+
* • timer - one of: 'normal', 'longer'
|
57
|
+
* You can only mount one Toaster component at a time, since mounting an instance sets the toaster listeners, and unmounting the component nullifies the existing listeners, so having two instances of Toaster and unmounting one will break them.
|
54
58
|
*/
|
55
59
|
|
56
|
-
var Toaster =
|
57
|
-
/*#__PURE__*/
|
58
|
-
function (_React$Component) {
|
60
|
+
var Toaster = /*#__PURE__*/function (_React$Component) {
|
59
61
|
_inherits(Toaster, _React$Component);
|
60
62
|
|
63
|
+
var _super = _createSuper(Toaster);
|
64
|
+
|
61
65
|
function Toaster(props) {
|
62
66
|
var _this;
|
63
67
|
|
64
68
|
_classCallCheck(this, Toaster);
|
65
69
|
|
66
|
-
_this =
|
70
|
+
_this = _super.call(this, props);
|
67
71
|
|
68
72
|
_defineProperty(_assertThisInitialized(_this), "onAdd", function (toast, toastId) {
|
69
73
|
_this.resetTimer();
|
@@ -152,9 +156,9 @@ function (_React$Component) {
|
|
152
156
|
classes = _this$props.classes,
|
153
157
|
container = _this$props.container;
|
154
158
|
|
155
|
-
var ToasterComponent = _react["default"].createElement("div", {
|
159
|
+
var ToasterComponent = /*#__PURE__*/_react["default"].createElement("div", {
|
156
160
|
className: classes.container
|
157
|
-
}, !!toast && _react["default"].createElement(_Toast["default"], {
|
161
|
+
}, !!toast && /*#__PURE__*/_react["default"].createElement(_Toast["default"], {
|
158
162
|
key: toastId,
|
159
163
|
description: toast.description,
|
160
164
|
title: toast.title,
|
@@ -169,7 +173,7 @@ function (_React$Component) {
|
|
169
173
|
resumeTimer: this.resumeTimer
|
170
174
|
}));
|
171
175
|
|
172
|
-
return container ? _reactDom["default"].createPortal(ToasterComponent, container) : ToasterComponent;
|
176
|
+
return container ? /*#__PURE__*/_reactDom["default"].createPortal(ToasterComponent, container) : ToasterComponent;
|
173
177
|
}
|
174
178
|
}]);
|
175
179
|
|
@@ -21,13 +21,13 @@ var reduceClasses = function reduceClasses(prev, curr) {
|
|
21
21
|
var classes = Object.keys(_styles["default"]).reduce(reduceClasses, {});
|
22
22
|
describe("Toaster", function () {
|
23
23
|
it('matches the snapshot', function () {
|
24
|
-
var wrapper = (0, _enzyme.mount)(_react["default"].createElement(_Toaster["default"], {
|
24
|
+
var wrapper = (0, _enzyme.mount)( /*#__PURE__*/_react["default"].createElement(_Toaster["default"], {
|
25
25
|
classes: classes
|
26
26
|
}));
|
27
27
|
expect(wrapper.html()).toMatchSnapshot();
|
28
28
|
});
|
29
29
|
it('launches a toast', function () {
|
30
|
-
var wrapper = (0, _enzyme.mount)(_react["default"].createElement(_Toaster["default"], {
|
30
|
+
var wrapper = (0, _enzyme.mount)( /*#__PURE__*/_react["default"].createElement(_Toaster["default"], {
|
31
31
|
classes: classes
|
32
32
|
}));
|
33
33
|
|
@@ -40,7 +40,7 @@ describe("Toaster", function () {
|
|
40
40
|
expect(wrapper.find('p').text()).toBe('Title');
|
41
41
|
});
|
42
42
|
it('removes a toast', function () {
|
43
|
-
var wrapper = (0, _enzyme.mount)(_react["default"].createElement(_Toaster["default"], {
|
43
|
+
var wrapper = (0, _enzyme.mount)( /*#__PURE__*/_react["default"].createElement(_Toaster["default"], {
|
44
44
|
classes: classes
|
45
45
|
}));
|
46
46
|
|
@@ -59,7 +59,7 @@ describe("Toaster", function () {
|
|
59
59
|
}, 500);
|
60
60
|
});
|
61
61
|
it('replaces the current toast', function () {
|
62
|
-
var wrapper = (0, _enzyme.mount)(_react["default"].createElement(_Toaster["default"], {
|
62
|
+
var wrapper = (0, _enzyme.mount)( /*#__PURE__*/_react["default"].createElement(_Toaster["default"], {
|
63
63
|
classes: classes
|
64
64
|
}));
|
65
65
|
|
@@ -78,7 +78,7 @@ describe("Toaster", function () {
|
|
78
78
|
expect(wrapper.find('p').text()).toBe('New title');
|
79
79
|
});
|
80
80
|
it('removes a toast after the timer finishes', function () {
|
81
|
-
var wrapper = (0, _enzyme.mount)(_react["default"].createElement(_Toaster["default"], {
|
81
|
+
var wrapper = (0, _enzyme.mount)( /*#__PURE__*/_react["default"].createElement(_Toaster["default"], {
|
82
82
|
classes: classes
|
83
83
|
}));
|
84
84
|
|
@@ -94,7 +94,7 @@ describe("Toaster", function () {
|
|
94
94
|
}, 5000);
|
95
95
|
});
|
96
96
|
it('calls the onClick function', function () {
|
97
|
-
var wrapper = (0, _enzyme.mount)(_react["default"].createElement(_Toaster["default"], {
|
97
|
+
var wrapper = (0, _enzyme.mount)( /*#__PURE__*/_react["default"].createElement(_Toaster["default"], {
|
98
98
|
classes: classes
|
99
99
|
}));
|
100
100
|
var action = {
|
@@ -0,0 +1,5 @@
|
|
1
|
+
// Jest Snapshot v1, https://goo.gl/fbAQLP
|
2
|
+
|
3
|
+
exports[`Toaster launches a toast 1`] = `"<div class=\\"container\\"><div class=\\"Toast-toast-0-1-1 Toast-success-0-1-3\\"><div class=\\"Flexbox-flex-0-1-12 Toast-content-0-1-7\\"><div class=\\"Flexbox-flex-0-1-12 Flexbox-acenter-0-1-29\\"><div class=\\"\\" style=\\"flex: 1;\\"><p class=\\"Text-text-0-1-44 Text-h5-0-1-50 Text-whitePrimary-0-1-70\\">Title</p></div></div></div></div></div>"`;
|
4
|
+
|
5
|
+
exports[`Toaster matches the snapshot 1`] = `"<div class=\\"container\\"></div>"`;
|
@@ -0,0 +1,210 @@
|
|
1
|
+
"use strict";
|
2
|
+
|
3
|
+
function _typeof(obj) { "@babel/helpers - typeof"; if (typeof Symbol === "function" && typeof Symbol.iterator === "symbol") { _typeof = function _typeof(obj) { return typeof obj; }; } else { _typeof = function _typeof(obj) { return obj && typeof Symbol === "function" && obj.constructor === Symbol && obj !== Symbol.prototype ? "symbol" : typeof obj; }; } return _typeof(obj); }
|
4
|
+
|
5
|
+
Object.defineProperty(exports, "__esModule", {
|
6
|
+
value: true
|
7
|
+
});
|
8
|
+
exports["default"] = void 0;
|
9
|
+
|
10
|
+
var _react = _interopRequireWildcard(require("react"));
|
11
|
+
|
12
|
+
var _propTypes = _interopRequireDefault(require("prop-types"));
|
13
|
+
|
14
|
+
var _react2 = require("@floating-ui/react");
|
15
|
+
|
16
|
+
var _colors = _interopRequireDefault(require("../subatomic/colors"));
|
17
|
+
|
18
|
+
var _hooks = require("./hooks");
|
19
|
+
|
20
|
+
var _colorsArrow;
|
21
|
+
|
22
|
+
function _interopRequireDefault(obj) { return obj && obj.__esModule ? obj : { "default": obj }; }
|
23
|
+
|
24
|
+
function _getRequireWildcardCache(nodeInterop) { if (typeof WeakMap !== "function") return null; var cacheBabelInterop = new WeakMap(); var cacheNodeInterop = new WeakMap(); return (_getRequireWildcardCache = function _getRequireWildcardCache(nodeInterop) { return nodeInterop ? cacheNodeInterop : cacheBabelInterop; })(nodeInterop); }
|
25
|
+
|
26
|
+
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
|
+
|
28
|
+
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; }
|
29
|
+
|
30
|
+
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; }
|
31
|
+
|
32
|
+
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); }
|
33
|
+
|
34
|
+
function _slicedToArray(arr, i) { return _arrayWithHoles(arr) || _iterableToArrayLimit(arr, i) || _unsupportedIterableToArray(arr, i) || _nonIterableRest(); }
|
35
|
+
|
36
|
+
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
|
+
|
38
|
+
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
|
+
|
40
|
+
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
|
+
|
42
|
+
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
|
+
|
44
|
+
function _arrayWithHoles(arr) { if (Array.isArray(arr)) return arr; }
|
45
|
+
|
46
|
+
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; }
|
47
|
+
|
48
|
+
var infoLight = _colors["default"].infoLight,
|
49
|
+
white = _colors["default"].white,
|
50
|
+
grey900 = _colors["default"].grey900,
|
51
|
+
info = _colors["default"].info;
|
52
|
+
var themes = {
|
53
|
+
DARK: 'dark',
|
54
|
+
LIGHT: 'light',
|
55
|
+
INFO: 'info',
|
56
|
+
PURPLE: 'purple'
|
57
|
+
};
|
58
|
+
var colorsArrow = (_colorsArrow = {}, _defineProperty(_colorsArrow, themes.DARK, grey900), _defineProperty(_colorsArrow, themes.LIGHT, white), _defineProperty(_colorsArrow, themes.INFO, infoLight), _defineProperty(_colorsArrow, themes.PURPLE, info), _colorsArrow);
|
59
|
+
/** Tooltip component to display messages within a container. */
|
60
|
+
|
61
|
+
function Tooltip(_ref) {
|
62
|
+
var classes = _ref.classes,
|
63
|
+
openProp = _ref.open,
|
64
|
+
children = _ref.children,
|
65
|
+
text = _ref.text,
|
66
|
+
theme = _ref.theme,
|
67
|
+
_ref$openOnHover = _ref.openOnHover,
|
68
|
+
openOnHover = _ref$openOnHover === void 0 ? false : _ref$openOnHover,
|
69
|
+
_ref$closeDelay = _ref.closeDelay,
|
70
|
+
closeDelay = _ref$closeDelay === void 0 ? 4000 : _ref$closeDelay,
|
71
|
+
_ref$zIndex = _ref.zIndex,
|
72
|
+
zIndex = _ref$zIndex === void 0 ? 10 : _ref$zIndex,
|
73
|
+
_ref$placement = _ref.placement,
|
74
|
+
placement = _ref$placement === void 0 ? 'top' : _ref$placement,
|
75
|
+
_ref$showArrow = _ref.showArrow,
|
76
|
+
showArrow = _ref$showArrow === void 0 ? true : _ref$showArrow,
|
77
|
+
_ref$className = _ref.className,
|
78
|
+
className = _ref$className === void 0 ? {} : _ref$className,
|
79
|
+
_ref$fit = _ref.fit,
|
80
|
+
fit = _ref$fit === void 0 ? false : _ref$fit,
|
81
|
+
_ref$width = _ref.width,
|
82
|
+
width = _ref$width === void 0 ? 220 : _ref$width,
|
83
|
+
_ref$strategy = _ref.strategy,
|
84
|
+
strategy = _ref$strategy === void 0 ? 'absolute' : _ref$strategy,
|
85
|
+
onChange = _ref.onChange;
|
86
|
+
var arrowRef = (0, _react.useRef)(null);
|
87
|
+
|
88
|
+
var _useOpenTooltipState = (0, _hooks.useOpenTooltipState)(openProp, onChange, closeDelay),
|
89
|
+
_useOpenTooltipState2 = _slicedToArray(_useOpenTooltipState, 2),
|
90
|
+
open = _useOpenTooltipState2[0],
|
91
|
+
setOpen = _useOpenTooltipState2[1];
|
92
|
+
|
93
|
+
var getMiddlewares = (0, _react.useMemo)(function () {
|
94
|
+
var middlewares = [(0, _react2.offset)(16)];
|
95
|
+
showArrow && middlewares.push((0, _react2.arrow)({
|
96
|
+
element: arrowRef,
|
97
|
+
padding: 16
|
98
|
+
}));
|
99
|
+
var sizeMiddleware = (0, _react2.size)({
|
100
|
+
apply: function apply(_ref2) {
|
101
|
+
var elements = _ref2.elements,
|
102
|
+
rects = _ref2.rects,
|
103
|
+
availableWidth = _ref2.availableWidth;
|
104
|
+
var styles = {};
|
105
|
+
|
106
|
+
if (fit) {
|
107
|
+
styles.width = "".concat(rects.reference.width, "px");
|
108
|
+
} else {
|
109
|
+
styles.maxWidth = "".concat(availableWidth, "px");
|
110
|
+
if (width) styles.width = typeof width === 'string' ? width : "".concat(width, "px");else styles.width = '';
|
111
|
+
}
|
112
|
+
|
113
|
+
Object.assign(elements.floating.style, styles);
|
114
|
+
}
|
115
|
+
});
|
116
|
+
sizeMiddleware.name = "size-".concat(fit, "-").concat(width);
|
117
|
+
middlewares.push(sizeMiddleware);
|
118
|
+
return middlewares;
|
119
|
+
}, [showArrow, fit, width]);
|
120
|
+
|
121
|
+
var _useFloating = (0, _react2.useFloating)({
|
122
|
+
open: open,
|
123
|
+
onOpenChange: setOpen,
|
124
|
+
placement: placement,
|
125
|
+
strategy: strategy,
|
126
|
+
whileElementsMounted: _react2.autoUpdate,
|
127
|
+
middleware: getMiddlewares
|
128
|
+
}),
|
129
|
+
refs = _useFloating.refs,
|
130
|
+
floatingStyles = _useFloating.floatingStyles,
|
131
|
+
context = _useFloating.context;
|
132
|
+
|
133
|
+
var hover = (0, _react2.useHover)(context, {
|
134
|
+
enabled: openOnHover
|
135
|
+
});
|
136
|
+
var role = (0, _react2.useRole)(context, {
|
137
|
+
role: 'tooltip'
|
138
|
+
});
|
139
|
+
|
140
|
+
var _useInteractions = (0, _react2.useInteractions)([hover, role]),
|
141
|
+
getReferenceProps = _useInteractions.getReferenceProps,
|
142
|
+
getFloatingProps = _useInteractions.getFloatingProps;
|
143
|
+
|
144
|
+
return /*#__PURE__*/_react["default"].createElement(_react.Fragment, null, /*#__PURE__*/_react["default"].createElement("div", _extends({
|
145
|
+
ref: refs.setReference
|
146
|
+
}, getReferenceProps(), {
|
147
|
+
className: "".concat(classes.activator, " ").concat(className.hasOwnProperty('activator') && className.activator)
|
148
|
+
}), children), /*#__PURE__*/_react["default"].createElement(_react2.FloatingPortal, null, open && /*#__PURE__*/_react["default"].createElement("div", _extends({
|
149
|
+
className: "".concat(classes.tooltip, " ").concat(className.hasOwnProperty('tooltip') && className.tooltip, " ").concat(classes[theme] || classes.purple),
|
150
|
+
ref: refs.setFloating,
|
151
|
+
style: _objectSpread(_objectSpread({}, floatingStyles), {}, {
|
152
|
+
zIndex: zIndex,
|
153
|
+
position: strategy
|
154
|
+
})
|
155
|
+
}, getFloatingProps()), text, showArrow && /*#__PURE__*/_react["default"].createElement(_react2.FloatingArrow, {
|
156
|
+
ref: arrowRef,
|
157
|
+
context: context,
|
158
|
+
fill: colorsArrow[theme] || colorsArrow[themes.PURPLE],
|
159
|
+
width: 14,
|
160
|
+
height: 10
|
161
|
+
}))));
|
162
|
+
}
|
163
|
+
|
164
|
+
Tooltip.propTypes = {
|
165
|
+
classes: _propTypes["default"].object,
|
166
|
+
|
167
|
+
/** It accepts any type of the followings boolean,null,undefined,ReactFragment,ReactPortal,ReactChild. */
|
168
|
+
children: _propTypes["default"].node,
|
169
|
+
|
170
|
+
/** This property can be used to set the theme of the component. The possible values for the theme property are info, light, dark, and purple. */
|
171
|
+
theme: _propTypes["default"].oneOf(['light', 'dark', 'purple', 'info']),
|
172
|
+
|
173
|
+
/** This property can be used to control whether or not the component is displayed. */
|
174
|
+
open: _propTypes["default"].bool,
|
175
|
+
|
176
|
+
/** This property can be used to set the text that is displayed by the component. */
|
177
|
+
text: _propTypes["default"].string.isRequired,
|
178
|
+
|
179
|
+
/** Designates whether the tooltip should open on activator hover. */
|
180
|
+
openOnHover: _propTypes["default"].bool,
|
181
|
+
|
182
|
+
/** Time on millisecond that it will take to close the tooltip. */
|
183
|
+
closeDelay: _propTypes["default"].number,
|
184
|
+
|
185
|
+
/** Sets the Tooltip stack order. */
|
186
|
+
zIndex: _propTypes["default"].number,
|
187
|
+
|
188
|
+
/** Allows to specify the placement of Tooltip. Available options are top, top-start, top-end, bottom, bottom-start, bottom-end, left, right. */
|
189
|
+
placement: _propTypes["default"].string,
|
190
|
+
|
191
|
+
/** Allows to specify classes to activador and tooltip. Object has the next properties: activator(string), tooltip(string). */
|
192
|
+
className: _propTypes["default"].object,
|
193
|
+
|
194
|
+
/** This property can be used to control whether or not an arrow is displayed. */
|
195
|
+
showArrow: _propTypes["default"].bool,
|
196
|
+
|
197
|
+
/** This property allows the Tooltip to be adjusted to the length of the associated component. */
|
198
|
+
fit: _propTypes["default"].bool,
|
199
|
+
|
200
|
+
/** The "Width" property of the Tooltip enables modification of its width and accepts a number (e.g., 220), a string (e.g., '220px' or 'auto') or null as its value. */
|
201
|
+
width: _propTypes["default"].number,
|
202
|
+
|
203
|
+
/** The CSS position property to use to compute the tooltip position */
|
204
|
+
strategy: _propTypes["default"].oneOf(['absolute', 'fixed']),
|
205
|
+
|
206
|
+
/** Callback fired when the Tooltip show state changes. */
|
207
|
+
onChange: _propTypes["default"].func
|
208
|
+
};
|
209
|
+
var _default = Tooltip;
|
210
|
+
exports["default"] = _default;
|
@@ -0,0 +1,35 @@
|
|
1
|
+
"use strict";
|
2
|
+
|
3
|
+
var _react = _interopRequireDefault(require("react"));
|
4
|
+
|
5
|
+
var _enzyme = require("enzyme");
|
6
|
+
|
7
|
+
var _Tooltip = _interopRequireDefault(require("./Tooltip"));
|
8
|
+
|
9
|
+
var _styles = _interopRequireDefault(require("./styles"));
|
10
|
+
|
11
|
+
function _interopRequireDefault(obj) { return obj && obj.__esModule ? obj : { "default": obj }; }
|
12
|
+
|
13
|
+
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; }
|
14
|
+
|
15
|
+
var reduceClasses = function reduceClasses(prev, curr) {
|
16
|
+
return Object.assign({}, prev, _defineProperty({}, curr, curr));
|
17
|
+
};
|
18
|
+
|
19
|
+
var classes = Object.keys(_styles["default"]).reduce(reduceClasses, {});
|
20
|
+
describe('Tooltip', function () {
|
21
|
+
it('matches the snapshot', function () {
|
22
|
+
var wrapper = (0, _enzyme.shallow)( /*#__PURE__*/_react["default"].createElement(_Tooltip["default"], {
|
23
|
+
text: "test",
|
24
|
+
open: true,
|
25
|
+
theme: "dark",
|
26
|
+
classes: classes
|
27
|
+
}));
|
28
|
+
expect(wrapper.html()).toMatchSnapshot();
|
29
|
+
});
|
30
|
+
});
|
31
|
+
describe('Tooltip styles', function () {
|
32
|
+
it('matches the snapshot', function () {
|
33
|
+
expect(_styles["default"]).toMatchSnapshot();
|
34
|
+
});
|
35
|
+
});
|