@coorpacademy/components 11.11.5-alpha.0 → 11.11.6
This diff represents the content of publicly available package versions that have been released to one of the supported registries. The information contained in this diff is provided for informational purposes only and reflects changes between package versions as they appear in their respective public registries.
- package/es/atom/battle-opponent/index.d.ts +20 -0
- package/es/atom/battle-opponent/index.d.ts.map +1 -0
- package/es/atom/battle-opponent/index.js +104 -0
- package/es/atom/battle-opponent/index.js.map +1 -0
- package/es/atom/battle-opponent/prop-types.d.ts +21 -0
- package/es/atom/battle-opponent/prop-types.d.ts.map +1 -0
- package/es/atom/battle-opponent/prop-types.js +12 -0
- package/es/atom/battle-opponent/prop-types.js.map +1 -0
- package/es/atom/battle-opponent/style.css +133 -0
- package/es/atom/{review-header-step-item → status-item}/index.d.ts +4 -4
- package/es/atom/status-item/index.d.ts.map +1 -0
- package/es/atom/status-item/index.js +104 -0
- package/es/atom/status-item/index.js.map +1 -0
- package/es/atom/status-item/index.native.d.ts +5 -0
- package/es/atom/status-item/index.native.d.ts.map +1 -0
- package/es/atom/{review-header-step-item → status-item}/index.native.js +2 -2
- package/es/atom/status-item/index.native.js.map +1 -0
- package/es/atom/{review-header-step-item → status-item}/style.css +47 -0
- package/es/atom/{review-header-step-item → status-item}/types.d.ts +5 -5
- package/es/atom/status-item/types.d.ts.map +1 -0
- package/es/atom/{review-header-step-item → status-item}/types.js +1 -1
- package/es/atom/status-item/types.js.map +1 -0
- package/es/atom/tooltip/index.d.ts +3 -1
- package/es/atom/tooltip/index.d.ts.map +1 -1
- package/es/atom/tooltip/index.js +18 -7
- package/es/atom/tooltip/index.js.map +1 -1
- package/es/atom/tooltip/style.css +11 -2
- package/es/globals.d.js.map +1 -1
- package/es/molecule/battle-opponent-list/index.d.ts +18 -0
- package/es/molecule/battle-opponent-list/index.d.ts.map +1 -0
- package/es/molecule/battle-opponent-list/index.js +25 -0
- package/es/molecule/battle-opponent-list/index.js.map +1 -0
- package/es/molecule/battle-opponent-list/prop-types.d.ts +26 -0
- package/es/molecule/battle-opponent-list/prop-types.d.ts.map +1 -0
- package/es/molecule/battle-opponent-list/prop-types.js +14 -0
- package/es/molecule/battle-opponent-list/prop-types.js.map +1 -0
- package/es/molecule/battle-opponent-list/style.css +5 -0
- package/es/molecule/review-header-steps/index.js +2 -2
- package/es/molecule/review-header-steps/index.js.map +1 -1
- package/es/molecule/review-header-steps/prop-types.d.ts +2 -2
- package/es/molecule/review-header-steps/prop-types.d.ts.map +1 -1
- package/es/molecule/review-header-steps/prop-types.js +1 -1
- package/es/molecule/review-header-steps/prop-types.js.map +1 -1
- package/es/organism/mooc-footer/style.css +1 -0
- package/es/organism/mooc-header/index.d.ts +3 -0
- package/es/organism/mooc-header/index.d.ts.map +1 -1
- package/es/organism/mooc-header/index.js +39 -4
- package/es/organism/mooc-header/index.js.map +1 -1
- package/es/organism/mooc-header/style.css +17 -1
- package/es/organism/review-header/index.native.js +1 -1
- package/es/organism/review-header/index.native.js.map +1 -1
- package/es/organism/review-header/types.d.ts +2 -2
- package/es/organism/review-header/types.d.ts.map +1 -1
- package/es/organism/review-header/types.js.map +1 -1
- package/es/organism/user-preferences/index.d.ts.map +1 -1
- package/es/organism/user-preferences/index.js +6 -3
- package/es/organism/user-preferences/index.js.map +1 -1
- package/es/variables/colors.css +2 -0
- package/lib/atom/battle-opponent/index.d.ts +20 -0
- package/lib/atom/battle-opponent/index.d.ts.map +1 -0
- package/lib/atom/battle-opponent/index.js +124 -0
- package/lib/atom/battle-opponent/index.js.map +1 -0
- package/lib/atom/battle-opponent/prop-types.d.ts +21 -0
- package/lib/atom/battle-opponent/prop-types.d.ts.map +1 -0
- package/lib/atom/battle-opponent/prop-types.js +21 -0
- package/lib/atom/battle-opponent/prop-types.js.map +1 -0
- package/lib/atom/battle-opponent/style.css +133 -0
- package/lib/atom/{review-header-step-item → status-item}/index.d.ts +4 -4
- package/lib/atom/status-item/index.d.ts.map +1 -0
- package/lib/atom/{review-header-step-item → status-item}/index.js +50 -23
- package/lib/atom/status-item/index.js.map +1 -0
- package/lib/atom/status-item/index.native.d.ts +5 -0
- package/lib/atom/status-item/index.native.d.ts.map +1 -0
- package/lib/atom/{review-header-step-item → status-item}/index.native.js +2 -2
- package/lib/atom/status-item/index.native.js.map +1 -0
- package/lib/atom/{review-header-step-item → status-item}/style.css +47 -0
- package/lib/atom/{review-header-step-item → status-item}/types.d.ts +5 -5
- package/lib/atom/status-item/types.d.ts.map +1 -0
- package/lib/atom/{review-header-step-item → status-item}/types.js +1 -1
- package/lib/atom/status-item/types.js.map +1 -0
- package/lib/atom/tooltip/index.d.ts +3 -1
- package/lib/atom/tooltip/index.d.ts.map +1 -1
- package/lib/atom/tooltip/index.js +19 -7
- package/lib/atom/tooltip/index.js.map +1 -1
- package/lib/atom/tooltip/style.css +11 -2
- package/lib/globals.d.js.map +1 -1
- package/lib/molecule/battle-opponent-list/index.d.ts +18 -0
- package/lib/molecule/battle-opponent-list/index.d.ts.map +1 -0
- package/lib/molecule/battle-opponent-list/index.js +43 -0
- package/lib/molecule/battle-opponent-list/index.js.map +1 -0
- package/lib/molecule/battle-opponent-list/prop-types.d.ts +26 -0
- package/lib/molecule/battle-opponent-list/prop-types.d.ts.map +1 -0
- package/lib/molecule/battle-opponent-list/prop-types.js +23 -0
- package/lib/molecule/battle-opponent-list/prop-types.js.map +1 -0
- package/lib/molecule/battle-opponent-list/style.css +5 -0
- package/lib/molecule/review-header-steps/index.js +2 -2
- package/lib/molecule/review-header-steps/index.js.map +1 -1
- package/lib/molecule/review-header-steps/prop-types.d.ts +2 -2
- package/lib/molecule/review-header-steps/prop-types.d.ts.map +1 -1
- package/lib/molecule/review-header-steps/prop-types.js +1 -1
- package/lib/molecule/review-header-steps/prop-types.js.map +1 -1
- package/lib/organism/mooc-footer/style.css +1 -0
- package/lib/organism/mooc-header/index.d.ts +3 -0
- package/lib/organism/mooc-header/index.d.ts.map +1 -1
- package/lib/organism/mooc-header/index.js +39 -4
- package/lib/organism/mooc-header/index.js.map +1 -1
- package/lib/organism/mooc-header/style.css +17 -1
- package/lib/organism/review-header/index.native.js +1 -1
- package/lib/organism/review-header/index.native.js.map +1 -1
- package/lib/organism/review-header/types.d.ts +2 -2
- package/lib/organism/review-header/types.d.ts.map +1 -1
- package/lib/organism/review-header/types.js.map +1 -1
- package/lib/organism/user-preferences/index.d.ts.map +1 -1
- package/lib/organism/user-preferences/index.js +10 -3
- package/lib/organism/user-preferences/index.js.map +1 -1
- package/lib/variables/colors.css +2 -0
- package/locales/bs/global.json +8 -5
- package/locales/cs/global.json +8 -5
- package/locales/de/global.json +8 -5
- package/locales/en/global.json +8 -5
- package/locales/es/global.json +8 -5
- package/locales/et/global.json +8 -5
- package/locales/fr/global.json +8 -5
- package/locales/hr/global.json +8 -5
- package/locales/hu/global.json +8 -5
- package/locales/hy/global.json +8 -5
- package/locales/it/global.json +8 -5
- package/locales/ja/global.json +8 -5
- package/locales/ko/global.json +8 -5
- package/locales/nl/global.json +8 -5
- package/locales/pl/global.json +8 -5
- package/locales/pt/global.json +8 -5
- package/locales/ro/global.json +8 -5
- package/locales/ru/global.json +8 -5
- package/locales/sk/global.json +8 -5
- package/locales/th/global.json +8 -5
- package/locales/tl/global.json +8 -5
- package/locales/tr/global.json +8 -5
- package/locales/uk/global.json +8 -5
- package/locales/vi/global.json +8 -5
- package/locales/zh/global.json +8 -5
- package/locales/zh_TW/global.json +8 -5
- package/package.json +3 -2
- package/es/atom/review-header-step-item/index.d.ts.map +0 -1
- package/es/atom/review-header-step-item/index.js +0 -77
- package/es/atom/review-header-step-item/index.js.map +0 -1
- package/es/atom/review-header-step-item/index.native.d.ts +0 -5
- package/es/atom/review-header-step-item/index.native.d.ts.map +0 -1
- package/es/atom/review-header-step-item/index.native.js.map +0 -1
- package/es/atom/review-header-step-item/types.d.ts.map +0 -1
- package/es/atom/review-header-step-item/types.js.map +0 -1
- package/lib/atom/review-header-step-item/index.d.ts.map +0 -1
- package/lib/atom/review-header-step-item/index.js.map +0 -1
- package/lib/atom/review-header-step-item/index.native.d.ts +0 -5
- package/lib/atom/review-header-step-item/index.native.d.ts.map +0 -1
- package/lib/atom/review-header-step-item/index.native.js.map +0 -1
- package/lib/atom/review-header-step-item/types.d.ts.map +0 -1
- package/lib/atom/review-header-step-item/types.js.map +0 -1
|
@@ -0,0 +1,21 @@
|
|
|
1
|
+
"use strict";
|
|
2
|
+
|
|
3
|
+
exports.__esModule = true;
|
|
4
|
+
exports.default = void 0;
|
|
5
|
+
|
|
6
|
+
var _propTypes = _interopRequireDefault(require("prop-types"));
|
|
7
|
+
|
|
8
|
+
function _interopRequireDefault(obj) { return obj && obj.__esModule ? obj : { default: obj }; }
|
|
9
|
+
|
|
10
|
+
const propTypes = {
|
|
11
|
+
isAlreadyEngaged: _propTypes.default.bool,
|
|
12
|
+
isRandom: _propTypes.default.bool,
|
|
13
|
+
userAvatarSrc: _propTypes.default.string,
|
|
14
|
+
onClick: _propTypes.default.func,
|
|
15
|
+
displayName: _propTypes.default.string,
|
|
16
|
+
tooltipText: _propTypes.default.string,
|
|
17
|
+
'aria-label': _propTypes.default.string
|
|
18
|
+
};
|
|
19
|
+
var _default = propTypes;
|
|
20
|
+
exports.default = _default;
|
|
21
|
+
//# sourceMappingURL=prop-types.js.map
|
|
@@ -0,0 +1 @@
|
|
|
1
|
+
{"version":3,"file":"prop-types.js","names":["propTypes","isAlreadyEngaged","PropTypes","bool","isRandom","userAvatarSrc","string","onClick","func","displayName","tooltipText"],"sources":["../../../src/atom/battle-opponent/prop-types.ts"],"sourcesContent":["import PropTypes from 'prop-types';\n\nconst propTypes = {\n isAlreadyEngaged: PropTypes.bool,\n isRandom: PropTypes.bool,\n userAvatarSrc: PropTypes.string,\n onClick: PropTypes.func,\n displayName: PropTypes.string,\n tooltipText: PropTypes.string,\n 'aria-label': PropTypes.string\n};\n\nexport type BattleOpponentProps = {\n isAlreadyEngaged?: boolean;\n isRandom?: boolean;\n userAvatarSrc?: string;\n onClick?: () => void;\n displayName: string;\n tooltipText?: string;\n 'aria-label'?: string;\n};\n\nexport default propTypes;\n"],"mappings":";;;;;AAAA;;;;AAEA,MAAMA,SAAS,GAAG;EAChBC,gBAAgB,EAAEC,kBAAA,CAAUC,IADZ;EAEhBC,QAAQ,EAAEF,kBAAA,CAAUC,IAFJ;EAGhBE,aAAa,EAAEH,kBAAA,CAAUI,MAHT;EAIhBC,OAAO,EAAEL,kBAAA,CAAUM,IAJH;EAKhBC,WAAW,EAAEP,kBAAA,CAAUI,MALP;EAMhBI,WAAW,EAAER,kBAAA,CAAUI,MANP;EAOhB,cAAcJ,kBAAA,CAAUI;AAPR,CAAlB;eAoBeN,S"}
|
|
@@ -0,0 +1,133 @@
|
|
|
1
|
+
@value breakpoints: "../../variables/breakpoints.css";
|
|
2
|
+
@value mobile from breakpoints;
|
|
3
|
+
@value colors: "../../variables/colors.css";
|
|
4
|
+
@value white from colors;
|
|
5
|
+
@value dark from colors;
|
|
6
|
+
@value black from colors;
|
|
7
|
+
@value cm_grey_75 from colors;
|
|
8
|
+
@value medium from colors;
|
|
9
|
+
@value light from colors;
|
|
10
|
+
@value brand from colors;
|
|
11
|
+
|
|
12
|
+
.rightArrow {
|
|
13
|
+
position: flex;
|
|
14
|
+
padding: 9px;
|
|
15
|
+
cursor: pointer;
|
|
16
|
+
opacity: 1;
|
|
17
|
+
user-select: none;
|
|
18
|
+
text-align: right;
|
|
19
|
+
color: dark;
|
|
20
|
+
}
|
|
21
|
+
|
|
22
|
+
.card {
|
|
23
|
+
margin: 5px;
|
|
24
|
+
}
|
|
25
|
+
|
|
26
|
+
.opponent-card {
|
|
27
|
+
flex: 1 1 350px;
|
|
28
|
+
height: 80px;
|
|
29
|
+
background-color: white;
|
|
30
|
+
box-shadow: 0 0 4px 1px rgba(0,0,0,0.10);
|
|
31
|
+
border-radius: 3px;
|
|
32
|
+
padding: 20px;
|
|
33
|
+
box-sizing: border-box;
|
|
34
|
+
display: flex;
|
|
35
|
+
align-items: center;
|
|
36
|
+
justify-content: space-between;
|
|
37
|
+
cursor: pointer;
|
|
38
|
+
}
|
|
39
|
+
|
|
40
|
+
.opponent-card .name {
|
|
41
|
+
font-family: 'Gilroy';
|
|
42
|
+
font-size: 15px;
|
|
43
|
+
font-weight: 700;
|
|
44
|
+
color: black;
|
|
45
|
+
flex-grow: 1;
|
|
46
|
+
}
|
|
47
|
+
|
|
48
|
+
|
|
49
|
+
.opponent-card .rightArrow {
|
|
50
|
+
margin-left: 20px;
|
|
51
|
+
}
|
|
52
|
+
|
|
53
|
+
.avatar {
|
|
54
|
+
width: 50px;
|
|
55
|
+
height: 50px;
|
|
56
|
+
border-radius: 50%;
|
|
57
|
+
overflow: hidden;
|
|
58
|
+
background-color: light;
|
|
59
|
+
margin-right: 20px;
|
|
60
|
+
flex-shrink: 0;
|
|
61
|
+
}
|
|
62
|
+
|
|
63
|
+
.avatar img {
|
|
64
|
+
width: 100%;
|
|
65
|
+
height: auto;
|
|
66
|
+
}
|
|
67
|
+
|
|
68
|
+
|
|
69
|
+
.random {
|
|
70
|
+
color: medium;
|
|
71
|
+
}
|
|
72
|
+
|
|
73
|
+
.alreadyEngaged.name,
|
|
74
|
+
.random .name {
|
|
75
|
+
color: medium;
|
|
76
|
+
}
|
|
77
|
+
|
|
78
|
+
.random .avatar {
|
|
79
|
+
background-color: brand;
|
|
80
|
+
display: flex;
|
|
81
|
+
align-items: center;
|
|
82
|
+
justify-content: center;
|
|
83
|
+
}
|
|
84
|
+
|
|
85
|
+
.random .avatar:before {
|
|
86
|
+
content: '?';
|
|
87
|
+
font-family: 'Gilroy';
|
|
88
|
+
font-size: 32px;
|
|
89
|
+
font-weight: 600;
|
|
90
|
+
color: white;
|
|
91
|
+
text-align: center;
|
|
92
|
+
}
|
|
93
|
+
|
|
94
|
+
.random .avatar img {
|
|
95
|
+
display: none;
|
|
96
|
+
}
|
|
97
|
+
|
|
98
|
+
.opponent-card:hover {
|
|
99
|
+
background-color: cm_grey_75;
|
|
100
|
+
}
|
|
101
|
+
|
|
102
|
+
.informationIcon {
|
|
103
|
+
color: cm_grey_500;
|
|
104
|
+
}
|
|
105
|
+
|
|
106
|
+
.tooltipIconContainer {
|
|
107
|
+
display: flex;
|
|
108
|
+
justify-content: flex-end;
|
|
109
|
+
border: none;
|
|
110
|
+
background: transparent;
|
|
111
|
+
height: 25px;
|
|
112
|
+
align-items: center;
|
|
113
|
+
}
|
|
114
|
+
|
|
115
|
+
@media mobile {
|
|
116
|
+
.opponent-card {
|
|
117
|
+
width: 100%;
|
|
118
|
+
padding: 10px;
|
|
119
|
+
}
|
|
120
|
+
|
|
121
|
+
.opponent-card .avatar {
|
|
122
|
+
margin-right: 10px;
|
|
123
|
+
}
|
|
124
|
+
|
|
125
|
+
.opponent-card .rightArrow {
|
|
126
|
+
margin-left: 10px;
|
|
127
|
+
}
|
|
128
|
+
|
|
129
|
+
.card {
|
|
130
|
+
margin: 0 0 10px;
|
|
131
|
+
}
|
|
132
|
+
}
|
|
133
|
+
|
|
@@ -1,12 +1,12 @@
|
|
|
1
1
|
/// <reference types="react" />
|
|
2
|
-
import {
|
|
3
|
-
declare const
|
|
4
|
-
(props:
|
|
2
|
+
import { StatusItemProps } from './types';
|
|
3
|
+
declare const StatusItem: {
|
|
4
|
+
(props: StatusItemProps): JSX.Element;
|
|
5
5
|
propTypes: {
|
|
6
6
|
current: import("prop-types").Requireable<boolean>;
|
|
7
7
|
icon: import("prop-types").Requireable<string>;
|
|
8
8
|
value: import("prop-types").Requireable<string>;
|
|
9
9
|
};
|
|
10
10
|
};
|
|
11
|
-
export default
|
|
11
|
+
export default StatusItem;
|
|
12
12
|
//# sourceMappingURL=index.d.ts.map
|
|
@@ -0,0 +1 @@
|
|
|
1
|
+
{"version":3,"file":"index.d.ts","sourceRoot":"","sources":["../../../src/atom/status-item/index.tsx"],"names":[],"mappings":";AASA,OAAkB,EAAC,eAAe,EAAC,MAAM,SAAS,CAAC;AAqFnD,QAAA,MAAM,UAAU;YAAW,eAAe;;;;;;CAkBzC,CAAC;AAWF,eAAe,UAAU,CAAC"}
|
|
@@ -21,6 +21,8 @@ function _interopRequireWildcard(obj, nodeInterop) { if (!nodeInterop && obj &&
|
|
|
21
21
|
|
|
22
22
|
function _interopRequireDefault(obj) { return obj && obj.__esModule ? obj : { default: obj }; }
|
|
23
23
|
|
|
24
|
+
function _extends() { _extends = Object.assign ? Object.assign.bind() : 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); }
|
|
25
|
+
|
|
24
26
|
const Content = (props, legacyContext) => {
|
|
25
27
|
const {
|
|
26
28
|
icon,
|
|
@@ -29,33 +31,59 @@ const Content = (props, legacyContext) => {
|
|
|
29
31
|
} = props;
|
|
30
32
|
const translate = (0, _provider.GetTranslateFromContext)(legacyContext);
|
|
31
33
|
let child;
|
|
32
|
-
let
|
|
34
|
+
let contentAriaLabel;
|
|
33
35
|
|
|
34
36
|
switch (icon) {
|
|
35
37
|
case 'no-answer':
|
|
36
38
|
child = value;
|
|
37
|
-
|
|
38
|
-
|
|
39
|
-
}) : translate('review_header_step_item.not_answered_question', {
|
|
39
|
+
contentAriaLabel = translate('review_header_step_item.not_answered_question', {
|
|
40
|
+
current: current ? 'current ' : '',
|
|
40
41
|
headerStepValue: value
|
|
41
42
|
});
|
|
42
43
|
break;
|
|
43
44
|
|
|
44
45
|
case 'right':
|
|
45
46
|
child = /*#__PURE__*/_react.default.createElement(_novaIcons.NovaCompositionCoorpacademyCheck, {
|
|
46
|
-
className: (0, _classnames.default)(_style.default.rightIcon, current && _style.default.currentRightIcon)
|
|
47
|
-
|
|
48
|
-
|
|
49
|
-
|
|
47
|
+
className: (0, _classnames.default)(_style.default.rightIcon, current && _style.default.currentRightIcon),
|
|
48
|
+
role: "status",
|
|
49
|
+
"aria-label": translate('review_header_step_item.correct_question', {
|
|
50
|
+
current: current ? 'current ' : '',
|
|
51
|
+
headerStepValue: value
|
|
52
|
+
})
|
|
50
53
|
});
|
|
51
54
|
break;
|
|
52
55
|
|
|
53
56
|
case 'wrong':
|
|
54
57
|
child = /*#__PURE__*/_react.default.createElement(_novaIcons.NovaSolidStatusClose, {
|
|
55
|
-
className: (0, _classnames.default)(_style.default.wrongIcon, current && _style.default.currentWrongIcon)
|
|
58
|
+
className: (0, _classnames.default)(_style.default.wrongIcon, current && _style.default.currentWrongIcon),
|
|
59
|
+
role: "alert",
|
|
60
|
+
"aria-label": translate('review_header_step_item.incorrect_question', {
|
|
61
|
+
current: current ? 'current ' : '',
|
|
62
|
+
headerStepValue: value
|
|
63
|
+
})
|
|
56
64
|
});
|
|
57
|
-
|
|
58
|
-
|
|
65
|
+
break;
|
|
66
|
+
|
|
67
|
+
case 'errors-number':
|
|
68
|
+
child = value;
|
|
69
|
+
contentAriaLabel = translate('bulk_import.errors_number', {
|
|
70
|
+
bulkImportErrorsNumber: value
|
|
71
|
+
});
|
|
72
|
+
break;
|
|
73
|
+
|
|
74
|
+
case 'valid':
|
|
75
|
+
child = /*#__PURE__*/_react.default.createElement(_novaIcons.NovaCompositionCoorpacademyCheck, {
|
|
76
|
+
className: (0, _classnames.default)(_style.default.validIcon),
|
|
77
|
+
role: "status",
|
|
78
|
+
"aria-label": translate('bulk_import.valid_scorm')
|
|
79
|
+
});
|
|
80
|
+
break;
|
|
81
|
+
|
|
82
|
+
case 'invalid':
|
|
83
|
+
child = /*#__PURE__*/_react.default.createElement(_novaIcons.NovaSolidStatusClose, {
|
|
84
|
+
className: (0, _classnames.default)(_style.default.invalidIcon),
|
|
85
|
+
role: "alert",
|
|
86
|
+
"aria-label": translate('bulk_import.invalid_scorm')
|
|
59
87
|
});
|
|
60
88
|
break;
|
|
61
89
|
|
|
@@ -63,23 +91,22 @@ const Content = (props, legacyContext) => {
|
|
|
63
91
|
return null;
|
|
64
92
|
}
|
|
65
93
|
|
|
66
|
-
return /*#__PURE__*/_react.default.createElement("span", {
|
|
67
|
-
|
|
68
|
-
|
|
69
|
-
|
|
70
|
-
|
|
71
|
-
|
|
72
|
-
}, child);
|
|
94
|
+
return /*#__PURE__*/_react.default.createElement("span", _extends({}, icon === 'no-answer' || icon === 'errors-number' ? {
|
|
95
|
+
'aria-label': contentAriaLabel,
|
|
96
|
+
role: 'status'
|
|
97
|
+
} : {}, {
|
|
98
|
+
className: _style.default.value
|
|
99
|
+
}), child);
|
|
73
100
|
};
|
|
74
101
|
|
|
75
|
-
const
|
|
102
|
+
const StatusItem = props => {
|
|
76
103
|
const {
|
|
77
104
|
icon,
|
|
78
105
|
current
|
|
79
106
|
} = props;
|
|
80
107
|
return /*#__PURE__*/_react.default.createElement("div", {
|
|
81
|
-
className: (0, _classnames.default)(_style.default.default, icon === 'right' && _style.default.right, icon === 'wrong' && _style.default.wrong, current && _style.default.current),
|
|
82
|
-
"data-name": "
|
|
108
|
+
className: (0, _classnames.default)(_style.default.default, icon === 'right' && _style.default.right, icon === 'wrong' && _style.default.wrong, current && _style.default.current, icon === 'valid' && _style.default.valid, icon === 'invalid' && _style.default.invalid, icon === 'errors-number' && _style.default.errorsNumber),
|
|
109
|
+
"data-name": "status-item"
|
|
83
110
|
}, /*#__PURE__*/_react.default.createElement(Content, props));
|
|
84
111
|
};
|
|
85
112
|
|
|
@@ -88,7 +115,7 @@ Content.contextTypes = {
|
|
|
88
115
|
skin: _provider.default.childContextTypes.skin,
|
|
89
116
|
translate: _provider.default.childContextTypes.translate
|
|
90
117
|
};
|
|
91
|
-
|
|
92
|
-
var _default =
|
|
118
|
+
StatusItem.propTypes = process.env.NODE_ENV !== "production" ? _types.default : {};
|
|
119
|
+
var _default = StatusItem;
|
|
93
120
|
exports.default = _default;
|
|
94
121
|
//# sourceMappingURL=index.js.map
|
|
@@ -0,0 +1 @@
|
|
|
1
|
+
{"version":3,"file":"index.js","names":["Content","props","legacyContext","icon","current","value","translate","GetTranslateFromContext","child","contentAriaLabel","headerStepValue","classnames","style","rightIcon","currentRightIcon","wrongIcon","currentWrongIcon","bulkImportErrorsNumber","validIcon","invalidIcon","role","StatusItem","default","right","wrong","valid","invalid","errorsNumber","propTypes","contextTypes","skin","Provider","childContextTypes"],"sources":["../../../src/atom/status-item/index.tsx"],"sourcesContent":["import React from 'react';\nimport classnames from 'classnames';\nimport {\n NovaCompositionCoorpacademyCheck as RightIcon,\n NovaSolidStatusClose as WrongIcon\n} from '@coorpacademy/nova-icons';\nimport Provider, {GetTranslateFromContext} from '../provider';\nimport {WebContextValues} from '../provider/web-context';\nimport style from './style.css';\nimport propTypes, {StatusItemProps} from './types';\n\nconst Content = (props: StatusItemProps, legacyContext: WebContextValues) => {\n const {icon, current, value} = props;\n const translate = GetTranslateFromContext(legacyContext);\n let child;\n let contentAriaLabel;\n switch (icon) {\n case 'no-answer':\n child = value;\n contentAriaLabel = translate('review_header_step_item.not_answered_question', {\n current: current ? 'current ' : '',\n headerStepValue: value\n });\n break;\n\n case 'right':\n child = (\n <RightIcon\n className={classnames(style.rightIcon, current && style.currentRightIcon)}\n role=\"status\"\n aria-label={translate('review_header_step_item.correct_question', {\n current: current ? 'current ' : '',\n headerStepValue: value\n })}\n />\n );\n break;\n\n case 'wrong':\n child = (\n <WrongIcon\n className={classnames(style.wrongIcon, current && style.currentWrongIcon)}\n role=\"alert\"\n aria-label={translate('review_header_step_item.incorrect_question', {\n current: current ? 'current ' : '',\n headerStepValue: value\n })}\n />\n );\n break;\n\n case 'errors-number':\n child = value;\n contentAriaLabel = translate('bulk_import.errors_number', {\n bulkImportErrorsNumber: value\n });\n break;\n\n case 'valid':\n child = (\n <RightIcon\n className={classnames(style.validIcon)}\n role=\"status\"\n aria-label={translate('bulk_import.valid_scorm')}\n />\n );\n break;\n\n case 'invalid':\n child = (\n <WrongIcon\n className={classnames(style.invalidIcon)}\n role=\"alert\"\n aria-label={translate('bulk_import.invalid_scorm')}\n />\n );\n break;\n\n default:\n return null;\n }\n\n return (\n <span\n {...(icon === 'no-answer' || icon === 'errors-number'\n ? {'aria-label': contentAriaLabel, role: 'status'}\n : {})}\n className={style.value}\n >\n {child}\n </span>\n );\n};\n\nconst StatusItem = (props: StatusItemProps) => {\n const {icon, current} = props;\n return (\n <div\n className={classnames(\n style.default,\n icon === 'right' && style.right,\n icon === 'wrong' && style.wrong,\n current && style.current,\n icon === 'valid' && style.valid,\n icon === 'invalid' && style.invalid,\n icon === 'errors-number' && style.errorsNumber\n )}\n data-name=\"status-item\"\n >\n <Content {...props} />\n </div>\n );\n};\n\nContent.propTypes = propTypes;\n\nContent.contextTypes = {\n skin: Provider.childContextTypes.skin,\n translate: Provider.childContextTypes.translate\n};\n\nStatusItem.propTypes = propTypes;\n\nexport default StatusItem;\n"],"mappings":"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"}
|
|
@@ -0,0 +1 @@
|
|
|
1
|
+
{"version":3,"file":"index.native.d.ts","sourceRoot":"","sources":["../../../src/atom/status-item/index.native.tsx"],"names":[],"mappings":";AAOA,OAAO,EAAC,eAAe,EAAC,MAAM,SAAS,CAAC;AA6CxC,QAAA,MAAM,IAAI,6BAA4B,eAAe,uBA2BpD,CAAC;AAEF,eAAe,IAAI,CAAC"}
|
|
@@ -15,7 +15,7 @@ function _getRequireWildcardCache(nodeInterop) { if (typeof WeakMap !== "functio
|
|
|
15
15
|
|
|
16
16
|
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; }
|
|
17
17
|
|
|
18
|
-
const createStyle = (
|
|
18
|
+
const createStyle = (icon, current) => {
|
|
19
19
|
let backgroundColor;
|
|
20
20
|
|
|
21
21
|
switch (icon) {
|
|
@@ -61,7 +61,7 @@ const Step = ({
|
|
|
61
61
|
}) => {
|
|
62
62
|
const [style, setStyle] = (0, _react.useState)(null);
|
|
63
63
|
(0, _react.useEffect)(() => {
|
|
64
|
-
const _style = createStyle(
|
|
64
|
+
const _style = createStyle(icon, current);
|
|
65
65
|
|
|
66
66
|
setStyle(_style);
|
|
67
67
|
}, [current, icon]);
|
|
@@ -0,0 +1 @@
|
|
|
1
|
+
{"version":3,"file":"index.native.js","names":["createStyle","icon","current","backgroundColor","COLORS","positive","negative","gray","StyleSheet","create","step","width","height","opacity","marginHorizontal","alignItems","justifyContent","borderRadius","stepText","fontWeight","fontSize","Step","value","style","setStyle","useState","useEffect","_style","child"],"sources":["../../../src/atom/status-item/index.native.tsx"],"sourcesContent":["import React, {useEffect, useState} from 'react';\nimport {StyleSheet, Text, TextStyle, View, ViewStyle} from 'react-native';\nimport {\n NovaCompositionCoorpacademyCheck as RightIcon,\n NovaSolidStatusClose as WrongIcon\n} from '@coorpacademy/nova-icons';\nimport {COLORS} from '../../variables/colors';\nimport {StatusItemProps} from './types';\n\ntype StyleSheetType = {\n step: ViewStyle;\n stepText: TextStyle;\n icon: ViewStyle;\n};\n\nconst createStyle = (icon: StatusItemProps['icon'], current?: boolean): StyleSheetType => {\n let backgroundColor;\n\n switch (icon) {\n case 'right':\n backgroundColor = COLORS.positive;\n break;\n case 'wrong':\n backgroundColor = COLORS.negative;\n break;\n case 'no-answer':\n default:\n backgroundColor = COLORS.gray;\n }\n\n return StyleSheet.create({\n step: {\n width: current ? 40 : 32,\n height: current ? 40 : 32,\n opacity: current ? 1 : 0.5,\n marginHorizontal: 8,\n backgroundColor,\n alignItems: 'center',\n justifyContent: 'center',\n borderRadius: 50\n },\n stepText: {\n fontWeight: '600',\n fontSize: current ? 16 : 12\n },\n icon: {\n width: current ? 14 : 12,\n height: current ? 14 : 12\n }\n });\n};\n\nconst Step = ({value, icon, current}: StatusItemProps) => {\n const [style, setStyle] = useState<StyleSheetType | null>(null);\n\n useEffect(() => {\n const _style = createStyle(icon, current);\n setStyle(_style);\n }, [current, icon]);\n\n if (!style) {\n return null;\n }\n\n let child;\n\n switch (icon) {\n case 'right':\n child = <RightIcon style={style.icon} color=\"#fff\" />;\n break;\n case 'wrong':\n child = <WrongIcon style={style.icon} color=\"#fff\" />;\n break;\n case 'no-answer':\n default:\n child = <Text style={style.stepText}>{value}</Text>;\n }\n\n return <View style={style.step}>{child}</View>;\n};\n\nexport default Step;\n"],"mappings":";;;;;AAAA;;AACA;;AACA;;AAIA;;;;;;AASA,MAAMA,WAAW,GAAG,CAACC,IAAD,EAAgCC,OAAhC,KAAsE;EACxF,IAAIC,eAAJ;;EAEA,QAAQF,IAAR;IACE,KAAK,OAAL;MACEE,eAAe,GAAGC,cAAA,CAAOC,QAAzB;MACA;;IACF,KAAK,OAAL;MACEF,eAAe,GAAGC,cAAA,CAAOE,QAAzB;MACA;;IACF,KAAK,WAAL;IACA;MACEH,eAAe,GAAGC,cAAA,CAAOG,IAAzB;EATJ;;EAYA,OAAOC,uBAAA,CAAWC,MAAX,CAAkB;IACvBC,IAAI,EAAE;MACJC,KAAK,EAAET,OAAO,GAAG,EAAH,GAAQ,EADlB;MAEJU,MAAM,EAAEV,OAAO,GAAG,EAAH,GAAQ,EAFnB;MAGJW,OAAO,EAAEX,OAAO,GAAG,CAAH,GAAO,GAHnB;MAIJY,gBAAgB,EAAE,CAJd;MAKJX,eALI;MAMJY,UAAU,EAAE,QANR;MAOJC,cAAc,EAAE,QAPZ;MAQJC,YAAY,EAAE;IARV,CADiB;IAWvBC,QAAQ,EAAE;MACRC,UAAU,EAAE,KADJ;MAERC,QAAQ,EAAElB,OAAO,GAAG,EAAH,GAAQ;IAFjB,CAXa;IAevBD,IAAI,EAAE;MACJU,KAAK,EAAET,OAAO,GAAG,EAAH,GAAQ,EADlB;MAEJU,MAAM,EAAEV,OAAO,GAAG,EAAH,GAAQ;IAFnB;EAfiB,CAAlB,CAAP;AAoBD,CAnCD;;AAqCA,MAAMmB,IAAI,GAAG,CAAC;EAACC,KAAD;EAAQrB,IAAR;EAAcC;AAAd,CAAD,KAA6C;EACxD,MAAM,CAACqB,KAAD,EAAQC,QAAR,IAAoB,IAAAC,eAAA,EAAgC,IAAhC,CAA1B;EAEA,IAAAC,gBAAA,EAAU,MAAM;IACd,MAAMC,MAAM,GAAG3B,WAAW,CAACC,IAAD,EAAOC,OAAP,CAA1B;;IACAsB,QAAQ,CAACG,MAAD,CAAR;EACD,CAHD,EAGG,CAACzB,OAAD,EAAUD,IAAV,CAHH;;EAKA,IAAI,CAACsB,KAAL,EAAY;IACV,OAAO,IAAP;EACD;;EAED,IAAIK,KAAJ;;EAEA,QAAQ3B,IAAR;IACE,KAAK,OAAL;MACE2B,KAAK,gBAAG,6BAAC,2CAAD;QAAW,KAAK,EAAEL,KAAK,CAACtB,IAAxB;QAA8B,KAAK,EAAC;MAApC,EAAR;MACA;;IACF,KAAK,OAAL;MACE2B,KAAK,gBAAG,6BAAC,+BAAD;QAAW,KAAK,EAAEL,KAAK,CAACtB,IAAxB;QAA8B,KAAK,EAAC;MAApC,EAAR;MACA;;IACF,KAAK,WAAL;IACA;MACE2B,KAAK,gBAAG,6BAAC,iBAAD;QAAM,KAAK,EAAEL,KAAK,CAACL;MAAnB,GAA8BI,KAA9B,CAAR;EATJ;;EAYA,oBAAO,6BAAC,iBAAD;IAAM,KAAK,EAAEC,KAAK,CAACb;EAAnB,GAA0BkB,KAA1B,CAAP;AACD,CA3BD;;eA6BeP,I"}
|
|
@@ -3,6 +3,12 @@
|
|
|
3
3
|
@value cm_positive_100 from colors;
|
|
4
4
|
@value cm_negative_100 from colors;
|
|
5
5
|
@value white from colors;
|
|
6
|
+
@value positive from colors;
|
|
7
|
+
@value negative from colors;
|
|
8
|
+
@value cm_negative_50 from colors;
|
|
9
|
+
@value cm_green_secondary_200 from colors;
|
|
10
|
+
@value cm_green_secondary_100 from colors;
|
|
11
|
+
@value cm_pink_50 from colors;
|
|
6
12
|
|
|
7
13
|
.default {
|
|
8
14
|
width: 32px;
|
|
@@ -62,4 +68,45 @@
|
|
|
62
68
|
transform: scale(1.5);
|
|
63
69
|
}
|
|
64
70
|
|
|
71
|
+
/* ----------------- CM bulk theme ------------------------- */
|
|
65
72
|
|
|
73
|
+
|
|
74
|
+
.valid {
|
|
75
|
+
opacity: 1;
|
|
76
|
+
width: 24px;
|
|
77
|
+
height: 24px;
|
|
78
|
+
background-color: cm_green_secondary_100;
|
|
79
|
+
}
|
|
80
|
+
|
|
81
|
+
.validIcon {
|
|
82
|
+
color: cm_green_secondary_200;
|
|
83
|
+
width: 12px;
|
|
84
|
+
height: 10px;
|
|
85
|
+
transition: transform 0.25s ease;
|
|
86
|
+
}
|
|
87
|
+
|
|
88
|
+
.invalid {
|
|
89
|
+
opacity: 1;
|
|
90
|
+
width: 24px;
|
|
91
|
+
height: 24px;
|
|
92
|
+
background-color: cm_negative_50;
|
|
93
|
+
}
|
|
94
|
+
|
|
95
|
+
.invalidIcon {
|
|
96
|
+
color: cm_negative_100;
|
|
97
|
+
width: 10px;
|
|
98
|
+
height: 10px;
|
|
99
|
+
transition: color 0.25s ease;
|
|
100
|
+
}
|
|
101
|
+
|
|
102
|
+
.errorsNumber {
|
|
103
|
+
opacity: 1;
|
|
104
|
+
width: 24px;
|
|
105
|
+
height: 24px;
|
|
106
|
+
background-color: cm_pink_50;
|
|
107
|
+
color: cm_negative_100;
|
|
108
|
+
font-family: 'Gilroy';
|
|
109
|
+
font-style: normal;
|
|
110
|
+
font-weight: 600;
|
|
111
|
+
font-size: 14px;
|
|
112
|
+
}
|
|
@@ -5,12 +5,12 @@ declare const propTypes: {
|
|
|
5
5
|
value: PropTypes.Requireable<string>;
|
|
6
6
|
};
|
|
7
7
|
export default propTypes;
|
|
8
|
-
export declare type
|
|
9
|
-
current
|
|
10
|
-
icon: 'no-answer' | 'right' | 'wrong';
|
|
11
|
-
value
|
|
8
|
+
export declare type StatusItemProps = {
|
|
9
|
+
current?: boolean;
|
|
10
|
+
icon: 'no-answer' | 'right' | 'wrong' | 'valid' | 'invalid' | 'errors-number';
|
|
11
|
+
value?: string;
|
|
12
12
|
};
|
|
13
13
|
export declare type Fixture = {
|
|
14
|
-
props:
|
|
14
|
+
props: StatusItemProps;
|
|
15
15
|
};
|
|
16
16
|
//# sourceMappingURL=types.d.ts.map
|
|
@@ -0,0 +1 @@
|
|
|
1
|
+
{"version":3,"file":"types.d.ts","sourceRoot":"","sources":["../../../src/atom/status-item/types.ts"],"names":[],"mappings":"AAAA,OAAO,SAAS,MAAM,YAAY,CAAC;AAEnC,QAAA,MAAM,SAAS;;;;CAId,CAAC;AAEF,eAAe,SAAS,CAAC;AAEzB,oBAAY,eAAe,GAAG;IAC5B,OAAO,CAAC,EAAE,OAAO,CAAC;IAClB,IAAI,EAAE,WAAW,GAAG,OAAO,GAAG,OAAO,GAAG,OAAO,GAAG,SAAS,GAAG,eAAe,CAAC;IAC9E,KAAK,CAAC,EAAE,MAAM,CAAC;CAChB,CAAC;AAEF,oBAAY,OAAO,GAAG;IACpB,KAAK,EAAE,eAAe,CAAC;CACxB,CAAC"}
|
|
@@ -9,7 +9,7 @@ function _interopRequireDefault(obj) { return obj && obj.__esModule ? obj : { de
|
|
|
9
9
|
|
|
10
10
|
const propTypes = {
|
|
11
11
|
current: _propTypes.default.bool,
|
|
12
|
-
icon: _propTypes.default.oneOf(['no-answer', 'right', 'wrong']),
|
|
12
|
+
icon: _propTypes.default.oneOf(['no-answer', 'right', 'wrong', 'valid', 'invalid', 'errors-number']),
|
|
13
13
|
value: _propTypes.default.string
|
|
14
14
|
};
|
|
15
15
|
var _default = propTypes;
|
|
@@ -0,0 +1 @@
|
|
|
1
|
+
{"version":3,"file":"types.js","names":["propTypes","current","PropTypes","bool","icon","oneOf","value","string"],"sources":["../../../src/atom/status-item/types.ts"],"sourcesContent":["import PropTypes from 'prop-types';\n\nconst propTypes = {\n current: PropTypes.bool,\n icon: PropTypes.oneOf(['no-answer', 'right', 'wrong', 'valid', 'invalid', 'errors-number']),\n value: PropTypes.string\n};\n\nexport default propTypes;\n\nexport type StatusItemProps = {\n current?: boolean;\n icon: 'no-answer' | 'right' | 'wrong' | 'valid' | 'invalid' | 'errors-number';\n value?: string;\n};\n\nexport type Fixture = {\n props: StatusItemProps;\n};\n"],"mappings":";;;;;AAAA;;;;AAEA,MAAMA,SAAS,GAAG;EAChBC,OAAO,EAAEC,kBAAA,CAAUC,IADH;EAEhBC,IAAI,EAAEF,kBAAA,CAAUG,KAAV,CAAgB,CAAC,WAAD,EAAc,OAAd,EAAuB,OAAvB,EAAgC,OAAhC,EAAyC,SAAzC,EAAoD,eAApD,CAAhB,CAFU;EAGhBC,KAAK,EAAEJ,kBAAA,CAAUK;AAHD,CAAlB;eAMeP,S"}
|
|
@@ -1,6 +1,6 @@
|
|
|
1
1
|
export function toggleStateOnKeyPress(state: any, setState: any, ref: any): (event: any) => void;
|
|
2
2
|
export default ToolTip;
|
|
3
|
-
declare function ToolTip({ anchorId, TooltipContent, "aria-label": ariaLabel, "data-testid": dataTestId, closeToolTipInformationTextAriaLabel, toolTipIsVisible: _toolTipIsVisible, iconContainerClassName, delayHide, fontSize }: {
|
|
3
|
+
declare function ToolTip({ anchorId, TooltipContent, "aria-label": ariaLabel, "data-testid": dataTestId, closeToolTipInformationTextAriaLabel, toolTipIsVisible: _toolTipIsVisible, iconContainerClassName, delayHide, fontSize, iconSize }: {
|
|
4
4
|
anchorId: any;
|
|
5
5
|
TooltipContent: any;
|
|
6
6
|
"aria-label": any;
|
|
@@ -10,6 +10,7 @@ declare function ToolTip({ anchorId, TooltipContent, "aria-label": ariaLabel, "d
|
|
|
10
10
|
iconContainerClassName: any;
|
|
11
11
|
delayHide?: number | undefined;
|
|
12
12
|
fontSize?: number | undefined;
|
|
13
|
+
iconSize?: string | undefined;
|
|
13
14
|
}): JSX.Element;
|
|
14
15
|
declare namespace ToolTip {
|
|
15
16
|
const propTypes: {
|
|
@@ -20,6 +21,7 @@ declare namespace ToolTip {
|
|
|
20
21
|
iconContainerClassName: PropTypes.Requireable<string>;
|
|
21
22
|
delayHide: PropTypes.Requireable<number>;
|
|
22
23
|
fontSize: PropTypes.Requireable<number>;
|
|
24
|
+
iconSize: PropTypes.Requireable<string>;
|
|
23
25
|
anchorId: PropTypes.Requireable<string>;
|
|
24
26
|
toolTipIsVisible: PropTypes.Requireable<boolean>;
|
|
25
27
|
};
|
|
@@ -1 +1 @@
|
|
|
1
|
-
{"version":3,"file":"index.d.ts","sourceRoot":"","sources":["../../../src/atom/tooltip/index.js"],"names":[],"mappings":"
|
|
1
|
+
{"version":3,"file":"index.d.ts","sourceRoot":"","sources":["../../../src/atom/tooltip/index.js"],"names":[],"mappings":"AAmEO,iGASN;;AAED;;;;;;;;;;;gBA0FC"}
|
|
@@ -13,6 +13,8 @@ var _reactTooltip = _interopRequireDefault(require("react-tooltip"));
|
|
|
13
13
|
|
|
14
14
|
var _isString = _interopRequireDefault(require("lodash/fp/isString"));
|
|
15
15
|
|
|
16
|
+
var _keys = _interopRequireDefault(require("lodash/fp/keys"));
|
|
17
|
+
|
|
16
18
|
var _novaIcons = require("@coorpacademy/nova-icons");
|
|
17
19
|
|
|
18
20
|
var _style = _interopRequireDefault(require("./style.css"));
|
|
@@ -27,13 +29,18 @@ const FontSizes = {
|
|
|
27
29
|
12: _style.default.tooltipContentFontSize12,
|
|
28
30
|
14: _style.default.tooltipContentFontSize14
|
|
29
31
|
};
|
|
32
|
+
const IconSizes = {
|
|
33
|
+
small: 12,
|
|
34
|
+
big: 20
|
|
35
|
+
};
|
|
30
36
|
|
|
31
37
|
const ToolTipWrapper = ({
|
|
32
38
|
toolTipIsVisible,
|
|
33
39
|
anchorId,
|
|
34
40
|
closeToolTipInformationTextAriaLabel,
|
|
35
41
|
content,
|
|
36
|
-
handleContentMouseOver
|
|
42
|
+
handleContentMouseOver,
|
|
43
|
+
iconSize
|
|
37
44
|
}) => {
|
|
38
45
|
if (!toolTipIsVisible) return null;
|
|
39
46
|
|
|
@@ -48,7 +55,7 @@ const ToolTipWrapper = ({
|
|
|
48
55
|
}, content);
|
|
49
56
|
} else {
|
|
50
57
|
return /*#__PURE__*/_react.default.createElement("div", {
|
|
51
|
-
className: _style.default.toolTip,
|
|
58
|
+
className: (0, _classnames.default)(_style.default.toolTip, iconSize === 'big' ? _style.default.bigIconToolTip : _style.default.smallIconToolTip),
|
|
52
59
|
"data-testid": "tooltip",
|
|
53
60
|
"aria-label": closeToolTipInformationTextAriaLabel,
|
|
54
61
|
onMouseOver: handleContentMouseOver
|
|
@@ -61,7 +68,8 @@ ToolTipWrapper.propTypes = process.env.NODE_ENV !== "production" ? {
|
|
|
61
68
|
anchorId: _propTypes.default.string,
|
|
62
69
|
closeToolTipInformationTextAriaLabel: _propTypes.default.string.isRequired,
|
|
63
70
|
content: _propTypes.default.node,
|
|
64
|
-
handleContentMouseOver: _propTypes.default.func
|
|
71
|
+
handleContentMouseOver: _propTypes.default.func,
|
|
72
|
+
iconSize: _propTypes.default.oneOf((0, _keys.default)(IconSizes))
|
|
65
73
|
} : {};
|
|
66
74
|
|
|
67
75
|
const toggleStateOnKeyPress = (state, setState, ref) => event => {
|
|
@@ -86,7 +94,8 @@ const ToolTip = ({
|
|
|
86
94
|
toolTipIsVisible: _toolTipIsVisible,
|
|
87
95
|
iconContainerClassName,
|
|
88
96
|
delayHide = 250,
|
|
89
|
-
fontSize = 14
|
|
97
|
+
fontSize = 14,
|
|
98
|
+
iconSize = 'small'
|
|
90
99
|
}) => {
|
|
91
100
|
const isComponent = (0, _react.useMemo)(() => !(0, _isString.default)(TooltipContent) && /*#__PURE__*/(0, _react.isValidElement)(TooltipContent()), [TooltipContent]);
|
|
92
101
|
const [toolTipIsVisible, setToolTipIsVisible] = (0, _react.useState)(false);
|
|
@@ -131,8 +140,8 @@ const ToolTip = ({
|
|
|
131
140
|
tabIndex: 0
|
|
132
141
|
}, /*#__PURE__*/_react.default.createElement(_novaIcons.NovaCompositionCoorpacademyInformationIcon, {
|
|
133
142
|
className: _style.default.informationIcon,
|
|
134
|
-
width:
|
|
135
|
-
height:
|
|
143
|
+
width: IconSizes[iconSize],
|
|
144
|
+
height: IconSizes[iconSize],
|
|
136
145
|
"aria-label": ariaLabel
|
|
137
146
|
})), /*#__PURE__*/_react.default.createElement(ToolTipWrapper, {
|
|
138
147
|
toolTipIsVisible: toolTipIsVisible,
|
|
@@ -140,7 +149,8 @@ const ToolTip = ({
|
|
|
140
149
|
closeToolTipInformationTextAriaLabel: closeToolTipInformationTextAriaLabel,
|
|
141
150
|
content: content,
|
|
142
151
|
handleContentMouseOver: handleContentMouseOver,
|
|
143
|
-
fontSize: fontSize
|
|
152
|
+
fontSize: fontSize,
|
|
153
|
+
iconSize: iconSize
|
|
144
154
|
}));
|
|
145
155
|
};
|
|
146
156
|
|
|
@@ -153,9 +163,11 @@ ToolTip.propTypes = process.env.NODE_ENV !== "production" ? {
|
|
|
153
163
|
iconContainerClassName: _propTypes.default.string,
|
|
154
164
|
delayHide: _propTypes.default.number,
|
|
155
165
|
fontSize: _propTypes.default.oneOf([12, 14]),
|
|
166
|
+
iconSize: _propTypes.default.oneOf((0, _keys.default)(IconSizes)),
|
|
156
167
|
// ---------- React Tooltip exclusive --------------
|
|
157
168
|
// externalHandling: if passed down, React Tooltip is used instead, due to limitations on
|
|
158
169
|
// parents overflow hidden controls
|
|
170
|
+
// data-for={anchorId} && data-tooltip-place="left" are needed on the anchored component
|
|
159
171
|
anchorId: _propTypes.default.string,
|
|
160
172
|
toolTipIsVisible: _propTypes.default.bool
|
|
161
173
|
} : {};
|
|
@@ -1 +1 @@
|
|
|
1
|
-
{"version":3,"file":"index.js","names":["FontSizes","style","tooltipContentFontSize12","tooltipContentFontSize14","ToolTipWrapper","toolTipIsVisible","anchorId","closeToolTipInformationTextAriaLabel","content","handleContentMouseOver","toolTipReact","toolTip","propTypes","PropTypes","bool","string","isRequired","node","func","toggleStateOnKeyPress","state","setState","ref","event","key","current","focus","stopPropagation","preventDefault","ToolTip","TooltipContent","ariaLabel","dataTestId","_toolTipIsVisible","iconContainerClassName","delayHide","fontSize","isComponent","useMemo","isString","isValidElement","setToolTipIsVisible","useState","mouseLeaveTimer","setMouseLeaveTimer","undefined","handleKeyPress","useCallback","clearTimeout","handleMouseOver","handleMouseLeave","setTimeout","classnames","tooltipContent","tooltipContainer","tooltipIconContainer","informationIcon","oneOfType","number","oneOf"],"sources":["../../../src/atom/tooltip/index.js"],"sourcesContent":["import React, {isValidElement, useState, useCallback, useMemo} from 'react';\nimport classnames from 'classnames';\nimport PropTypes from 'prop-types';\nimport ReactTooltip from 'react-tooltip';\nimport isString from 'lodash/fp/isString';\nimport {NovaCompositionCoorpacademyInformationIcon as InformationIcon} from '@coorpacademy/nova-icons';\nimport style from './style.css';\n\nconst FontSizes = {\n 12: style.tooltipContentFontSize12,\n 14: style.tooltipContentFontSize14\n};\n\nconst ToolTipWrapper = ({\n toolTipIsVisible,\n anchorId,\n closeToolTipInformationTextAriaLabel,\n content,\n handleContentMouseOver\n}) => {\n if (!toolTipIsVisible) return null;\n if (anchorId) {\n return (\n <ReactTooltip\n id={anchorId}\n className={style.toolTipReact}\n data-event-off=\"click\"\n place=\"left\"\n effect=\"solid\"\n aria-label={closeToolTipInformationTextAriaLabel}\n >\n {content}\n </ReactTooltip>\n );\n } else {\n return (\n <div\n className={style.toolTip}\n data-testid=\"tooltip\"\n aria-label={closeToolTipInformationTextAriaLabel}\n onMouseOver={handleContentMouseOver}\n >\n {content}\n </div>\n );\n }\n};\n\nToolTipWrapper.propTypes = {\n toolTipIsVisible: PropTypes.bool,\n anchorId: PropTypes.string,\n closeToolTipInformationTextAriaLabel: PropTypes.string.isRequired,\n content: PropTypes.node,\n handleContentMouseOver: PropTypes.func\n};\n\nexport const toggleStateOnKeyPress = (state, setState, ref) => event => {\n if (event.key === 'Enter') {\n if (ref) ref.current.focus();\n event.stopPropagation();\n event.preventDefault();\n setState(!state);\n } else if (event.key === 'Tab' || event.key === 'Escape') {\n setState(false);\n }\n};\n\nconst ToolTip = ({\n anchorId,\n TooltipContent,\n 'aria-label': ariaLabel,\n 'data-testid': dataTestId,\n closeToolTipInformationTextAriaLabel,\n toolTipIsVisible: _toolTipIsVisible,\n iconContainerClassName,\n delayHide = 250,\n fontSize = 14\n}) => {\n const isComponent = useMemo(\n () => !isString(TooltipContent) && isValidElement(TooltipContent()),\n [TooltipContent]\n );\n\n const [toolTipIsVisible, setToolTipIsVisible] = useState(false);\n\n const [mouseLeaveTimer, setMouseLeaveTimer] = useState(undefined);\n\n const handleKeyPress = useCallback(\n event => {\n toggleStateOnKeyPress(toolTipIsVisible, setToolTipIsVisible)(event);\n },\n [toolTipIsVisible]\n );\n\n const handleContentMouseOver = useCallback(() => {\n mouseLeaveTimer && /* istanbul ignore next */ clearTimeout(mouseLeaveTimer);\n }, [mouseLeaveTimer]);\n\n const handleMouseOver = useCallback(() => {\n mouseLeaveTimer && clearTimeout(mouseLeaveTimer);\n setToolTipIsVisible(true);\n }, [mouseLeaveTimer]);\n\n const handleMouseLeave = useCallback(() => {\n setMouseLeaveTimer(setTimeout(() => setToolTipIsVisible(false), delayHide));\n }, [delayHide]);\n\n const content = useMemo(() => {\n return isComponent ? (\n <TooltipContent />\n ) : (\n <p className={classnames([style.tooltipContent, FontSizes[fontSize]])}>{TooltipContent}</p>\n );\n }, [TooltipContent, fontSize, isComponent]);\n\n return anchorId ? (\n <ToolTipWrapper\n toolTipIsVisible={_toolTipIsVisible}\n anchorId={anchorId}\n closeToolTipInformationTextAriaLabel={closeToolTipInformationTextAriaLabel}\n content={content}\n onMouseLeave={handleMouseLeave}\n onMouseOver={handleMouseOver}\n fontSize={fontSize}\n />\n ) : (\n <div\n className={style.tooltipContainer}\n onMouseLeave={handleMouseLeave}\n onMouseOver={handleMouseOver}\n >\n <button\n type=\"button\"\n className={classnames([style.tooltipIconContainer, iconContainerClassName])}\n data-testid={dataTestId}\n onKeyDown={handleKeyPress}\n tabIndex={0}\n >\n <InformationIcon\n className={style.informationIcon}\n width={12}\n height={12}\n aria-label={ariaLabel}\n />\n </button>\n <ToolTipWrapper\n toolTipIsVisible={toolTipIsVisible}\n anchorId={anchorId}\n closeToolTipInformationTextAriaLabel={closeToolTipInformationTextAriaLabel}\n content={content}\n handleContentMouseOver={handleContentMouseOver}\n fontSize={fontSize}\n />\n </div>\n );\n};\n\nToolTip.propTypes = {\n TooltipContent: PropTypes.oneOfType([PropTypes.func, PropTypes.node, PropTypes.string]),\n 'data-testid': PropTypes.string,\n 'aria-label': PropTypes.string,\n closeToolTipInformationTextAriaLabel: PropTypes.string.isRequired,\n // ---------- Regular Tooltip exclusive --------------\n iconContainerClassName: PropTypes.string,\n delayHide: PropTypes.number,\n fontSize: PropTypes.oneOf([12, 14]),\n // ---------- React Tooltip exclusive --------------\n // externalHandling: if passed down, React Tooltip is used instead, due to limitations on\n // parents overflow hidden controls\n anchorId: PropTypes.string,\n toolTipIsVisible: PropTypes.bool\n};\n\nexport default ToolTip;\n"],"mappings":";;;;;AAAA;;AACA;;AACA;;AACA;;AACA;;AACA;;AACA;;;;;;;;AAEA,MAAMA,SAAS,GAAG;EAChB,IAAIC,cAAA,CAAMC,wBADM;EAEhB,IAAID,cAAA,CAAME;AAFM,CAAlB;;AAKA,MAAMC,cAAc,GAAG,CAAC;EACtBC,gBADsB;EAEtBC,QAFsB;EAGtBC,oCAHsB;EAItBC,OAJsB;EAKtBC;AALsB,CAAD,KAMjB;EACJ,IAAI,CAACJ,gBAAL,EAAuB,OAAO,IAAP;;EACvB,IAAIC,QAAJ,EAAc;IACZ,oBACE,6BAAC,qBAAD;MACE,EAAE,EAAEA,QADN;MAEE,SAAS,EAAEL,cAAA,CAAMS,YAFnB;MAGE,kBAAe,OAHjB;MAIE,KAAK,EAAC,MAJR;MAKE,MAAM,EAAC,OALT;MAME,cAAYH;IANd,GAQGC,OARH,CADF;EAYD,CAbD,MAaO;IACL,oBACE;MACE,SAAS,EAAEP,cAAA,CAAMU,OADnB;MAEE,eAAY,SAFd;MAGE,cAAYJ,oCAHd;MAIE,WAAW,EAAEE;IAJf,GAMGD,OANH,CADF;EAUD;AACF,CAjCD;;AAmCAJ,cAAc,CAACQ,SAAf,2CAA2B;EACzBP,gBAAgB,EAAEQ,kBAAA,CAAUC,IADH;EAEzBR,QAAQ,EAAEO,kBAAA,CAAUE,MAFK;EAGzBR,oCAAoC,EAAEM,kBAAA,CAAUE,MAAV,CAAiBC,UAH9B;EAIzBR,OAAO,EAAEK,kBAAA,CAAUI,IAJM;EAKzBR,sBAAsB,EAAEI,kBAAA,CAAUK;AALT,CAA3B;;AAQO,MAAMC,qBAAqB,GAAG,CAACC,KAAD,EAAQC,QAAR,EAAkBC,GAAlB,KAA0BC,KAAK,IAAI;EACtE,IAAIA,KAAK,CAACC,GAAN,KAAc,OAAlB,EAA2B;IACzB,IAAIF,GAAJ,EAASA,GAAG,CAACG,OAAJ,CAAYC,KAAZ;IACTH,KAAK,CAACI,eAAN;IACAJ,KAAK,CAACK,cAAN;IACAP,QAAQ,CAAC,CAACD,KAAF,CAAR;EACD,CALD,MAKO,IAAIG,KAAK,CAACC,GAAN,KAAc,KAAd,IAAuBD,KAAK,CAACC,GAAN,KAAc,QAAzC,EAAmD;IACxDH,QAAQ,CAAC,KAAD,CAAR;EACD;AACF,CATM;;;;AAWP,MAAMQ,OAAO,GAAG,CAAC;EACfvB,QADe;EAEfwB,cAFe;EAGf,cAAcC,SAHC;EAIf,eAAeC,UAJA;EAKfzB,oCALe;EAMfF,gBAAgB,EAAE4B,iBANH;EAOfC,sBAPe;EAQfC,SAAS,GAAG,GARG;EASfC,QAAQ,GAAG;AATI,CAAD,KAUV;EACJ,MAAMC,WAAW,GAAG,IAAAC,cAAA,EAClB,MAAM,CAAC,IAAAC,iBAAA,EAAST,cAAT,CAAD,iBAA6B,IAAAU,qBAAA,EAAeV,cAAc,EAA7B,CADjB,EAElB,CAACA,cAAD,CAFkB,CAApB;EAKA,MAAM,CAACzB,gBAAD,EAAmBoC,mBAAnB,IAA0C,IAAAC,eAAA,EAAS,KAAT,CAAhD;EAEA,MAAM,CAACC,eAAD,EAAkBC,kBAAlB,IAAwC,IAAAF,eAAA,EAASG,SAAT,CAA9C;EAEA,MAAMC,cAAc,GAAG,IAAAC,kBAAA,EACrBxB,KAAK,IAAI;IACPJ,qBAAqB,CAACd,gBAAD,EAAmBoC,mBAAnB,CAArB,CAA6DlB,KAA7D;EACD,CAHoB,EAIrB,CAAClB,gBAAD,CAJqB,CAAvB;EAOA,MAAMI,sBAAsB,GAAG,IAAAsC,kBAAA,EAAY,MAAM;IAC/CJ,eAAe;IAAI;IAA2BK,YAAY,CAACL,eAAD,CAA1D;EACD,CAF8B,EAE5B,CAACA,eAAD,CAF4B,CAA/B;EAIA,MAAMM,eAAe,GAAG,IAAAF,kBAAA,EAAY,MAAM;IACxCJ,eAAe,IAAIK,YAAY,CAACL,eAAD,CAA/B;IACAF,mBAAmB,CAAC,IAAD,CAAnB;EACD,CAHuB,EAGrB,CAACE,eAAD,CAHqB,CAAxB;EAKA,MAAMO,gBAAgB,GAAG,IAAAH,kBAAA,EAAY,MAAM;IACzCH,kBAAkB,CAACO,UAAU,CAAC,MAAMV,mBAAmB,CAAC,KAAD,CAA1B,EAAmCN,SAAnC,CAAX,CAAlB;EACD,CAFwB,EAEtB,CAACA,SAAD,CAFsB,CAAzB;EAIA,MAAM3B,OAAO,GAAG,IAAA8B,cAAA,EAAQ,MAAM;IAC5B,OAAOD,WAAW,gBAChB,6BAAC,cAAD,OADgB,gBAGhB;MAAG,SAAS,EAAE,IAAAe,mBAAA,EAAW,CAACnD,cAAA,CAAMoD,cAAP,EAAuBrD,SAAS,CAACoC,QAAD,CAAhC,CAAX;IAAd,GAAwEN,cAAxE,CAHF;EAKD,CANe,EAMb,CAACA,cAAD,EAAiBM,QAAjB,EAA2BC,WAA3B,CANa,CAAhB;EAQA,OAAO/B,QAAQ,gBACb,6BAAC,cAAD;IACE,gBAAgB,EAAE2B,iBADpB;IAEE,QAAQ,EAAE3B,QAFZ;IAGE,oCAAoC,EAAEC,oCAHxC;IAIE,OAAO,EAAEC,OAJX;IAKE,YAAY,EAAE0C,gBALhB;IAME,WAAW,EAAED,eANf;IAOE,QAAQ,EAAEb;EAPZ,EADa,gBAWb;IACE,SAAS,EAAEnC,cAAA,CAAMqD,gBADnB;IAEE,YAAY,EAAEJ,gBAFhB;IAGE,WAAW,EAAED;EAHf,gBAKE;IACE,IAAI,EAAC,QADP;IAEE,SAAS,EAAE,IAAAG,mBAAA,EAAW,CAACnD,cAAA,CAAMsD,oBAAP,EAA6BrB,sBAA7B,CAAX,CAFb;IAGE,eAAaF,UAHf;IAIE,SAAS,EAAEc,cAJb;IAKE,QAAQ,EAAE;EALZ,gBAOE,6BAAC,qDAAD;IACE,SAAS,EAAE7C,cAAA,CAAMuD,eADnB;IAEE,KAAK,EAAE,EAFT;IAGE,MAAM,EAAE,EAHV;IAIE,cAAYzB;EAJd,EAPF,CALF,eAmBE,6BAAC,cAAD;IACE,gBAAgB,EAAE1B,gBADpB;IAEE,QAAQ,EAAEC,QAFZ;IAGE,oCAAoC,EAAEC,oCAHxC;IAIE,OAAO,EAAEC,OAJX;IAKE,sBAAsB,EAAEC,sBAL1B;IAME,QAAQ,EAAE2B;EANZ,EAnBF,CAXF;AAwCD,CAxFD;;AA0FAP,OAAO,CAACjB,SAAR,2CAAoB;EAClBkB,cAAc,EAAEjB,kBAAA,CAAU4C,SAAV,CAAoB,CAAC5C,kBAAA,CAAUK,IAAX,EAAiBL,kBAAA,CAAUI,IAA3B,EAAiCJ,kBAAA,CAAUE,MAA3C,CAApB,CADE;EAElB,eAAeF,kBAAA,CAAUE,MAFP;EAGlB,cAAcF,kBAAA,CAAUE,MAHN;EAIlBR,oCAAoC,EAAEM,kBAAA,CAAUE,MAAV,CAAiBC,UAJrC;EAKlB;EACAkB,sBAAsB,EAAErB,kBAAA,CAAUE,MANhB;EAOlBoB,SAAS,EAAEtB,kBAAA,CAAU6C,MAPH;EAQlBtB,QAAQ,EAAEvB,kBAAA,CAAU8C,KAAV,CAAgB,CAAC,EAAD,EAAK,EAAL,CAAhB,CARQ;EASlB;EACA;EACA;EACArD,QAAQ,EAAEO,kBAAA,CAAUE,MAZF;EAalBV,gBAAgB,EAAEQ,kBAAA,CAAUC;AAbV,CAApB;eAgBee,O"}
|
|
1
|
+
{"version":3,"file":"index.js","names":["FontSizes","style","tooltipContentFontSize12","tooltipContentFontSize14","IconSizes","small","big","ToolTipWrapper","toolTipIsVisible","anchorId","closeToolTipInformationTextAriaLabel","content","handleContentMouseOver","iconSize","toolTipReact","classnames","toolTip","bigIconToolTip","smallIconToolTip","propTypes","PropTypes","bool","string","isRequired","node","func","oneOf","keys","toggleStateOnKeyPress","state","setState","ref","event","key","current","focus","stopPropagation","preventDefault","ToolTip","TooltipContent","ariaLabel","dataTestId","_toolTipIsVisible","iconContainerClassName","delayHide","fontSize","isComponent","useMemo","isString","isValidElement","setToolTipIsVisible","useState","mouseLeaveTimer","setMouseLeaveTimer","undefined","handleKeyPress","useCallback","clearTimeout","handleMouseOver","handleMouseLeave","setTimeout","tooltipContent","tooltipContainer","tooltipIconContainer","informationIcon","oneOfType","number"],"sources":["../../../src/atom/tooltip/index.js"],"sourcesContent":["import React, {isValidElement, useState, useCallback, useMemo} from 'react';\nimport classnames from 'classnames';\nimport PropTypes from 'prop-types';\nimport ReactTooltip from 'react-tooltip';\nimport isString from 'lodash/fp/isString';\nimport keys from 'lodash/fp/keys';\nimport {NovaCompositionCoorpacademyInformationIcon as InformationIcon} from '@coorpacademy/nova-icons';\nimport style from './style.css';\n\nconst FontSizes = {\n 12: style.tooltipContentFontSize12,\n 14: style.tooltipContentFontSize14\n};\n\nconst IconSizes = {\n small: 12,\n big: 20\n};\n\nconst ToolTipWrapper = ({\n toolTipIsVisible,\n anchorId,\n closeToolTipInformationTextAriaLabel,\n content,\n handleContentMouseOver,\n iconSize\n}) => {\n if (!toolTipIsVisible) return null;\n if (anchorId) {\n return (\n <ReactTooltip\n id={anchorId}\n className={style.toolTipReact}\n data-event-off=\"click\"\n place=\"left\"\n effect=\"solid\"\n aria-label={closeToolTipInformationTextAriaLabel}\n >\n {content}\n </ReactTooltip>\n );\n } else {\n return (\n <div\n className={classnames(\n style.toolTip,\n iconSize === 'big' ? style.bigIconToolTip : style.smallIconToolTip\n )}\n data-testid=\"tooltip\"\n aria-label={closeToolTipInformationTextAriaLabel}\n onMouseOver={handleContentMouseOver}\n >\n {content}\n </div>\n );\n }\n};\n\nToolTipWrapper.propTypes = {\n toolTipIsVisible: PropTypes.bool,\n anchorId: PropTypes.string,\n closeToolTipInformationTextAriaLabel: PropTypes.string.isRequired,\n content: PropTypes.node,\n handleContentMouseOver: PropTypes.func,\n iconSize: PropTypes.oneOf(keys(IconSizes))\n};\n\nexport const toggleStateOnKeyPress = (state, setState, ref) => event => {\n if (event.key === 'Enter') {\n if (ref) ref.current.focus();\n event.stopPropagation();\n event.preventDefault();\n setState(!state);\n } else if (event.key === 'Tab' || event.key === 'Escape') {\n setState(false);\n }\n};\n\nconst ToolTip = ({\n anchorId,\n TooltipContent,\n 'aria-label': ariaLabel,\n 'data-testid': dataTestId,\n closeToolTipInformationTextAriaLabel,\n toolTipIsVisible: _toolTipIsVisible,\n iconContainerClassName,\n delayHide = 250,\n fontSize = 14,\n iconSize = 'small'\n}) => {\n const isComponent = useMemo(\n () => !isString(TooltipContent) && isValidElement(TooltipContent()),\n [TooltipContent]\n );\n\n const [toolTipIsVisible, setToolTipIsVisible] = useState(false);\n\n const [mouseLeaveTimer, setMouseLeaveTimer] = useState(undefined);\n\n const handleKeyPress = useCallback(\n event => {\n toggleStateOnKeyPress(toolTipIsVisible, setToolTipIsVisible)(event);\n },\n [toolTipIsVisible]\n );\n\n const handleContentMouseOver = useCallback(() => {\n mouseLeaveTimer && /* istanbul ignore next */ clearTimeout(mouseLeaveTimer);\n }, [mouseLeaveTimer]);\n\n const handleMouseOver = useCallback(() => {\n mouseLeaveTimer && clearTimeout(mouseLeaveTimer);\n setToolTipIsVisible(true);\n }, [mouseLeaveTimer]);\n\n const handleMouseLeave = useCallback(() => {\n setMouseLeaveTimer(setTimeout(() => setToolTipIsVisible(false), delayHide));\n }, [delayHide]);\n\n const content = useMemo(() => {\n return isComponent ? (\n <TooltipContent />\n ) : (\n <p className={classnames([style.tooltipContent, FontSizes[fontSize]])}>{TooltipContent}</p>\n );\n }, [TooltipContent, fontSize, isComponent]);\n\n return anchorId ? (\n <ToolTipWrapper\n toolTipIsVisible={_toolTipIsVisible}\n anchorId={anchorId}\n closeToolTipInformationTextAriaLabel={closeToolTipInformationTextAriaLabel}\n content={content}\n onMouseLeave={handleMouseLeave}\n onMouseOver={handleMouseOver}\n fontSize={fontSize}\n />\n ) : (\n <div\n className={style.tooltipContainer}\n onMouseLeave={handleMouseLeave}\n onMouseOver={handleMouseOver}\n >\n <button\n type=\"button\"\n className={classnames([style.tooltipIconContainer, iconContainerClassName])}\n data-testid={dataTestId}\n onKeyDown={handleKeyPress}\n tabIndex={0}\n >\n <InformationIcon\n className={style.informationIcon}\n width={IconSizes[iconSize]}\n height={IconSizes[iconSize]}\n aria-label={ariaLabel}\n />\n </button>\n <ToolTipWrapper\n toolTipIsVisible={toolTipIsVisible}\n anchorId={anchorId}\n closeToolTipInformationTextAriaLabel={closeToolTipInformationTextAriaLabel}\n content={content}\n handleContentMouseOver={handleContentMouseOver}\n fontSize={fontSize}\n iconSize={iconSize}\n />\n </div>\n );\n};\n\nToolTip.propTypes = {\n TooltipContent: PropTypes.oneOfType([PropTypes.func, PropTypes.node, PropTypes.string]),\n 'data-testid': PropTypes.string,\n 'aria-label': PropTypes.string,\n closeToolTipInformationTextAriaLabel: PropTypes.string.isRequired,\n // ---------- Regular Tooltip exclusive --------------\n iconContainerClassName: PropTypes.string,\n delayHide: PropTypes.number,\n fontSize: PropTypes.oneOf([12, 14]),\n iconSize: PropTypes.oneOf(keys(IconSizes)),\n // ---------- React Tooltip exclusive --------------\n // externalHandling: if passed down, React Tooltip is used instead, due to limitations on\n // parents overflow hidden controls\n // data-for={anchorId} && data-tooltip-place=\"left\" are needed on the anchored component\n anchorId: PropTypes.string,\n toolTipIsVisible: PropTypes.bool\n};\n\nexport default ToolTip;\n"],"mappings":"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"}
|