@coorpacademy/components 11.10.5 → 11.11.1-alpha.0
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 +19 -0
- package/es/atom/battle-opponent/index.d.ts.map +1 -0
- package/es/atom/battle-opponent/index.js +52 -0
- package/es/atom/battle-opponent/index.js.map +1 -0
- package/es/atom/battle-opponent/prop-types.d.ts +19 -0
- package/es/atom/battle-opponent/prop-types.d.ts.map +1 -0
- package/es/atom/battle-opponent/prop-types.js +11 -0
- package/es/atom/battle-opponent/prop-types.js.map +1 -0
- package/es/atom/battle-opponent/style.css +126 -0
- package/es/atom/provider/web-context.d.ts +2 -2
- package/es/atom/provider/web-context.d.ts.map +1 -1
- package/es/atom/provider/web-context.js +1 -4
- package/es/atom/provider/web-context.js.map +1 -1
- package/es/atom/review-header-step-item/index.d.ts.map +1 -1
- package/es/atom/review-header-step-item/index.js +8 -3
- package/es/atom/review-header-step-item/index.js.map +1 -1
- 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 +17 -7
- package/es/atom/tooltip/index.js.map +1 -1
- package/es/atom/tooltip/style.css +10 -2
- package/es/globals.d.js.map +1 -1
- package/es/molecule/answer/index.d.ts +3 -0
- package/es/molecule/answer/index.d.ts.map +1 -1
- package/es/molecule/answer/index.js +9 -3
- package/es/molecule/answer/index.js.map +1 -1
- package/es/organism/review-header/index.d.ts +23 -0
- package/es/organism/review-header/index.d.ts.map +1 -1
- package/es/organism/review-header/index.js +4 -0
- package/es/organism/review-header/index.js.map +1 -1
- package/es/template/activity/engine-stars.d.ts +1 -0
- package/es/template/activity/engine-stars.js +2 -1
- package/es/template/activity/engine-stars.js.map +1 -1
- package/es/template/activity/index.d.ts +1 -0
- package/es/template/activity/index.js +2 -1
- package/es/template/activity/index.js.map +1 -1
- package/es/template/activity/stars-summary.d.ts +1 -0
- package/es/template/activity/stars-summary.js +2 -1
- package/es/template/activity/stars-summary.js.map +1 -1
- package/es/util/render-with-context.d.ts.map +1 -1
- package/es/util/render-with-context.js +13 -6
- package/es/util/render-with-context.js.map +1 -1
- package/lib/atom/battle-opponent/index.d.ts +19 -0
- package/lib/atom/battle-opponent/index.d.ts.map +1 -0
- package/lib/atom/battle-opponent/index.js +70 -0
- package/lib/atom/battle-opponent/index.js.map +1 -0
- package/lib/atom/battle-opponent/prop-types.d.ts +19 -0
- package/lib/atom/battle-opponent/prop-types.d.ts.map +1 -0
- package/lib/atom/battle-opponent/prop-types.js +20 -0
- package/lib/atom/battle-opponent/prop-types.js.map +1 -0
- package/lib/atom/battle-opponent/style.css +126 -0
- package/lib/atom/provider/web-context.d.ts +2 -2
- package/lib/atom/provider/web-context.d.ts.map +1 -1
- package/lib/atom/provider/web-context.js +1 -5
- package/lib/atom/provider/web-context.js.map +1 -1
- package/lib/atom/review-header-step-item/index.d.ts.map +1 -1
- package/lib/atom/review-header-step-item/index.js +12 -3
- package/lib/atom/review-header-step-item/index.js.map +1 -1
- 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 +18 -7
- package/lib/atom/tooltip/index.js.map +1 -1
- package/lib/atom/tooltip/style.css +10 -2
- package/lib/globals.d.js.map +1 -1
- package/lib/molecule/answer/index.d.ts +3 -0
- package/lib/molecule/answer/index.d.ts.map +1 -1
- package/lib/molecule/answer/index.js +9 -3
- package/lib/molecule/answer/index.js.map +1 -1
- package/lib/organism/review-header/index.d.ts +23 -0
- package/lib/organism/review-header/index.d.ts.map +1 -1
- package/lib/organism/review-header/index.js +5 -0
- package/lib/organism/review-header/index.js.map +1 -1
- package/lib/template/activity/engine-stars.d.ts +1 -0
- package/lib/template/activity/engine-stars.js +2 -1
- package/lib/template/activity/engine-stars.js.map +1 -1
- package/lib/template/activity/index.d.ts +1 -0
- package/lib/template/activity/index.js +2 -1
- package/lib/template/activity/index.js.map +1 -1
- package/lib/template/activity/stars-summary.d.ts +1 -0
- package/lib/template/activity/stars-summary.js +2 -1
- package/lib/template/activity/stars-summary.js.map +1 -1
- package/lib/util/render-with-context.d.ts.map +1 -1
- package/lib/util/render-with-context.js +18 -6
- package/lib/util/render-with-context.js.map +1 -1
- package/package.json +2 -2
|
@@ -0,0 +1,19 @@
|
|
|
1
|
+
/// <reference types="react" />
|
|
2
|
+
import { WebContextValues } from '../provider/web-context';
|
|
3
|
+
import { BattleOpponentProps } from './prop-types';
|
|
4
|
+
declare const BattleOpponent: {
|
|
5
|
+
({ isAlreadyEngaged, isRandom, userAvatarSrc, onClick, displayName, tooltipText }: BattleOpponentProps, legacyContext: WebContextValues): JSX.Element;
|
|
6
|
+
propTypes: {
|
|
7
|
+
isAlreadyEngaged: import("prop-types").Requireable<boolean>;
|
|
8
|
+
isRandom: import("prop-types").Requireable<boolean>;
|
|
9
|
+
userAvatarSrc: import("prop-types").Requireable<string>;
|
|
10
|
+
onClick: import("prop-types").Requireable<(...args: any[]) => any>;
|
|
11
|
+
displayName: import("prop-types").Requireable<string>;
|
|
12
|
+
tooltipText: import("prop-types").Requireable<string>;
|
|
13
|
+
};
|
|
14
|
+
contextTypes: {
|
|
15
|
+
translate: import("prop-types").Requireable<(...args: any[]) => any>;
|
|
16
|
+
};
|
|
17
|
+
};
|
|
18
|
+
export default BattleOpponent;
|
|
19
|
+
//# sourceMappingURL=index.d.ts.map
|
|
@@ -0,0 +1 @@
|
|
|
1
|
+
{"version":3,"file":"index.d.ts","sourceRoot":"","sources":["../../../src/atom/battle-opponent/index.tsx"],"names":[],"mappings":";AAKA,OAAO,EAAC,gBAAgB,EAAC,MAAM,yBAAyB,CAAC;AACzD,OAAkB,EAAC,mBAAmB,EAAC,MAAM,cAAc,CAAC;AAG5D,QAAA,MAAM,cAAc;uFAQf,mBAAmB,iBACP,gBAAgB;;;;;;;;;;;;CAsChC,CAAC;AAQF,eAAe,cAAc,CAAC"}
|
|
@@ -0,0 +1,52 @@
|
|
|
1
|
+
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); }
|
|
2
|
+
|
|
3
|
+
import React, { useMemo } from 'react';
|
|
4
|
+
import classnames from 'classnames';
|
|
5
|
+
import { NovaCompositionNavigationArrowRight as ArrowRight } from '@coorpacademy/nova-icons';
|
|
6
|
+
import ToolTip from '../tooltip';
|
|
7
|
+
import Provider, { GetTranslateFromContext } from '../provider';
|
|
8
|
+
import propTypes from './prop-types';
|
|
9
|
+
import style from './style.css';
|
|
10
|
+
|
|
11
|
+
const BattleOpponent = ({
|
|
12
|
+
isAlreadyEngaged,
|
|
13
|
+
isRandom,
|
|
14
|
+
userAvatarSrc,
|
|
15
|
+
onClick,
|
|
16
|
+
displayName,
|
|
17
|
+
tooltipText
|
|
18
|
+
}, legacyContext) => {
|
|
19
|
+
const translate = GetTranslateFromContext(legacyContext);
|
|
20
|
+
const wrapperClassnames = useMemo(() => classnames(style.card, style['opponent-card'], isRandom ? style.random : null), [isRandom]);
|
|
21
|
+
const displayNameClassnames = useMemo(() => classnames(style.name, isAlreadyEngaged ? style.alreadyEngaged : null), [isAlreadyEngaged]);
|
|
22
|
+
return /*#__PURE__*/React.createElement("div", _extends({}, !isAlreadyEngaged && {
|
|
23
|
+
onClick
|
|
24
|
+
}, {
|
|
25
|
+
className: wrapperClassnames,
|
|
26
|
+
"data-testid": "battle-opponent-wrapper"
|
|
27
|
+
}), /*#__PURE__*/React.createElement("div", {
|
|
28
|
+
className: style.avatar
|
|
29
|
+
}, isRandom ? null : /*#__PURE__*/React.createElement("img", {
|
|
30
|
+
src: userAvatarSrc,
|
|
31
|
+
"aria-hidden": "true"
|
|
32
|
+
})), /*#__PURE__*/React.createElement("p", {
|
|
33
|
+
className: displayNameClassnames
|
|
34
|
+
}, " ", displayName), isAlreadyEngaged ? /*#__PURE__*/React.createElement(ToolTip, {
|
|
35
|
+
fontSize: 12,
|
|
36
|
+
iconSize: "big",
|
|
37
|
+
TooltipContent: tooltipText,
|
|
38
|
+
closeToolTipInformationTextAriaLabel: translate('Press the escape key to close the information text'),
|
|
39
|
+
iconContainerClassName: style.infoIconTooltip
|
|
40
|
+
}) : /*#__PURE__*/React.createElement(ArrowRight, {
|
|
41
|
+
className: style.rightArrow,
|
|
42
|
+
width: 16,
|
|
43
|
+
height: 16
|
|
44
|
+
}));
|
|
45
|
+
};
|
|
46
|
+
|
|
47
|
+
BattleOpponent.propTypes = process.env.NODE_ENV !== "production" ? propTypes : {};
|
|
48
|
+
BattleOpponent.contextTypes = {
|
|
49
|
+
translate: Provider.childContextTypes.translate
|
|
50
|
+
};
|
|
51
|
+
export default BattleOpponent;
|
|
52
|
+
//# sourceMappingURL=index.js.map
|
|
@@ -0,0 +1 @@
|
|
|
1
|
+
{"version":3,"file":"index.js","names":["React","useMemo","classnames","NovaCompositionNavigationArrowRight","ArrowRight","ToolTip","Provider","GetTranslateFromContext","propTypes","style","BattleOpponent","isAlreadyEngaged","isRandom","userAvatarSrc","onClick","displayName","tooltipText","legacyContext","translate","wrapperClassnames","card","random","displayNameClassnames","name","alreadyEngaged","avatar","infoIconTooltip","rightArrow","contextTypes","childContextTypes"],"sources":["../../../src/atom/battle-opponent/index.tsx"],"sourcesContent":["import React, {useMemo} from 'react';\nimport classnames from 'classnames';\nimport {NovaCompositionNavigationArrowRight as ArrowRight} from '@coorpacademy/nova-icons';\nimport ToolTip from '../tooltip';\nimport Provider, {GetTranslateFromContext} from '../provider';\nimport {WebContextValues} from '../provider/web-context';\nimport propTypes, {BattleOpponentProps} from './prop-types';\nimport style from './style.css';\n\nconst BattleOpponent = (\n {\n isAlreadyEngaged,\n isRandom,\n userAvatarSrc,\n onClick,\n displayName,\n tooltipText\n }: BattleOpponentProps,\n legacyContext: WebContextValues\n) => {\n const translate: Required<WebContextValues>['translate'] = GetTranslateFromContext(legacyContext);\n const wrapperClassnames = useMemo(\n () => classnames(style.card, style['opponent-card'], isRandom ? style.random : null),\n [isRandom]\n );\n\n const displayNameClassnames = useMemo(\n () => classnames(style.name, isAlreadyEngaged ? style.alreadyEngaged : null),\n [isAlreadyEngaged]\n );\n\n return (\n <div\n {...(!isAlreadyEngaged && {onClick})}\n className={wrapperClassnames}\n data-testid=\"battle-opponent-wrapper\"\n >\n <div className={style.avatar}>\n {isRandom ? null : <img src={userAvatarSrc} aria-hidden=\"true\" />}\n </div>\n <p className={displayNameClassnames}> {displayName}</p>\n {isAlreadyEngaged ? (\n <ToolTip\n fontSize={12}\n iconSize=\"big\"\n TooltipContent={tooltipText}\n closeToolTipInformationTextAriaLabel={translate(\n 'Press the escape key to close the information text'\n )}\n iconContainerClassName={style.infoIconTooltip}\n />\n ) : (\n <ArrowRight className={style.rightArrow} width={16} height={16} />\n )}\n </div>\n );\n};\n\nBattleOpponent.propTypes = propTypes;\n\nBattleOpponent.contextTypes = {\n translate: Provider.childContextTypes.translate\n};\n\nexport default BattleOpponent;\n"],"mappings":";;AAAA,OAAOA,KAAP,IAAeC,OAAf,QAA6B,OAA7B;AACA,OAAOC,UAAP,MAAuB,YAAvB;AACA,SAAQC,mCAAmC,IAAIC,UAA/C,QAAgE,0BAAhE;AACA,OAAOC,OAAP,MAAoB,YAApB;AACA,OAAOC,QAAP,IAAkBC,uBAAlB,QAAgD,aAAhD;AAEA,OAAOC,SAAP,MAA6C,cAA7C;AACA,OAAOC,KAAP,MAAkB,aAAlB;;AAEA,MAAMC,cAAc,GAAG,CACrB;EACEC,gBADF;EAEEC,QAFF;EAGEC,aAHF;EAIEC,OAJF;EAKEC,WALF;EAMEC;AANF,CADqB,EASrBC,aATqB,KAUlB;EACH,MAAMC,SAAkD,GAAGX,uBAAuB,CAACU,aAAD,CAAlF;EACA,MAAME,iBAAiB,GAAGlB,OAAO,CAC/B,MAAMC,UAAU,CAACO,KAAK,CAACW,IAAP,EAAaX,KAAK,CAAC,eAAD,CAAlB,EAAqCG,QAAQ,GAAGH,KAAK,CAACY,MAAT,GAAkB,IAA/D,CADe,EAE/B,CAACT,QAAD,CAF+B,CAAjC;EAKA,MAAMU,qBAAqB,GAAGrB,OAAO,CACnC,MAAMC,UAAU,CAACO,KAAK,CAACc,IAAP,EAAaZ,gBAAgB,GAAGF,KAAK,CAACe,cAAT,GAA0B,IAAvD,CADmB,EAEnC,CAACb,gBAAD,CAFmC,CAArC;EAKA,oBACE,wCACO,CAACA,gBAAD,IAAqB;IAACG;EAAD,CAD5B;IAEE,SAAS,EAAEK,iBAFb;IAGE,eAAY;EAHd,iBAKE;IAAK,SAAS,EAAEV,KAAK,CAACgB;EAAtB,GACGb,QAAQ,GAAG,IAAH,gBAAU;IAAK,GAAG,EAAEC,aAAV;IAAyB,eAAY;EAArC,EADrB,CALF,eAQE;IAAG,SAAS,EAAES;EAAd,QAAuCP,WAAvC,CARF,EASGJ,gBAAgB,gBACf,oBAAC,OAAD;IACE,QAAQ,EAAE,EADZ;IAEE,QAAQ,EAAC,KAFX;IAGE,cAAc,EAAEK,WAHlB;IAIE,oCAAoC,EAAEE,SAAS,CAC7C,oDAD6C,CAJjD;IAOE,sBAAsB,EAAET,KAAK,CAACiB;EAPhC,EADe,gBAWf,oBAAC,UAAD;IAAY,SAAS,EAAEjB,KAAK,CAACkB,UAA7B;IAAyC,KAAK,EAAE,EAAhD;IAAoD,MAAM,EAAE;EAA5D,EApBJ,CADF;AAyBD,CA/CD;;AAiDAjB,cAAc,CAACF,SAAf,2CAA2BA,SAA3B;AAEAE,cAAc,CAACkB,YAAf,GAA8B;EAC5BV,SAAS,EAAEZ,QAAQ,CAACuB,iBAAT,CAA2BX;AADV,CAA9B;AAIA,eAAeR,cAAf"}
|
|
@@ -0,0 +1,19 @@
|
|
|
1
|
+
import PropTypes from 'prop-types';
|
|
2
|
+
declare const propTypes: {
|
|
3
|
+
isAlreadyEngaged: PropTypes.Requireable<boolean>;
|
|
4
|
+
isRandom: PropTypes.Requireable<boolean>;
|
|
5
|
+
userAvatarSrc: PropTypes.Requireable<string>;
|
|
6
|
+
onClick: PropTypes.Requireable<(...args: any[]) => any>;
|
|
7
|
+
displayName: PropTypes.Requireable<string>;
|
|
8
|
+
tooltipText: PropTypes.Requireable<string>;
|
|
9
|
+
};
|
|
10
|
+
export declare type BattleOpponentProps = {
|
|
11
|
+
isAlreadyEngaged?: boolean;
|
|
12
|
+
isRandom?: boolean;
|
|
13
|
+
userAvatarSrc?: string;
|
|
14
|
+
onClick?: () => void;
|
|
15
|
+
displayName: string;
|
|
16
|
+
tooltipText?: string;
|
|
17
|
+
};
|
|
18
|
+
export default propTypes;
|
|
19
|
+
//# sourceMappingURL=prop-types.d.ts.map
|
|
@@ -0,0 +1 @@
|
|
|
1
|
+
{"version":3,"file":"prop-types.d.ts","sourceRoot":"","sources":["../../../src/atom/battle-opponent/prop-types.ts"],"names":[],"mappings":"AAAA,OAAO,SAAS,MAAM,YAAY,CAAC;AAEnC,QAAA,MAAM,SAAS;;;;;;;CAOd,CAAC;AAEF,oBAAY,mBAAmB,GAAG;IAChC,gBAAgB,CAAC,EAAE,OAAO,CAAC;IAC3B,QAAQ,CAAC,EAAE,OAAO,CAAC;IACnB,aAAa,CAAC,EAAE,MAAM,CAAC;IACvB,OAAO,CAAC,EAAE,MAAM,IAAI,CAAC;IACrB,WAAW,EAAE,MAAM,CAAC;IACpB,WAAW,CAAC,EAAE,MAAM,CAAC;CACtB,CAAC;AAEF,eAAe,SAAS,CAAC"}
|
|
@@ -0,0 +1,11 @@
|
|
|
1
|
+
import PropTypes from 'prop-types';
|
|
2
|
+
const propTypes = {
|
|
3
|
+
isAlreadyEngaged: PropTypes.bool,
|
|
4
|
+
isRandom: PropTypes.bool,
|
|
5
|
+
userAvatarSrc: PropTypes.string,
|
|
6
|
+
onClick: PropTypes.func,
|
|
7
|
+
displayName: PropTypes.string,
|
|
8
|
+
tooltipText: PropTypes.string
|
|
9
|
+
};
|
|
10
|
+
export default propTypes;
|
|
11
|
+
//# sourceMappingURL=prop-types.js.map
|
|
@@ -0,0 +1 @@
|
|
|
1
|
+
{"version":3,"file":"prop-types.js","names":["PropTypes","propTypes","isAlreadyEngaged","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};\n\nexport type BattleOpponentProps = {\n isAlreadyEngaged?: boolean;\n isRandom?: boolean;\n userAvatarSrc?: string;\n onClick?: () => void;\n displayName: string;\n tooltipText?: string;\n};\n\nexport default propTypes;\n"],"mappings":"AAAA,OAAOA,SAAP,MAAsB,YAAtB;AAEA,MAAMC,SAAS,GAAG;EAChBC,gBAAgB,EAAEF,SAAS,CAACG,IADZ;EAEhBC,QAAQ,EAAEJ,SAAS,CAACG,IAFJ;EAGhBE,aAAa,EAAEL,SAAS,CAACM,MAHT;EAIhBC,OAAO,EAAEP,SAAS,CAACQ,IAJH;EAKhBC,WAAW,EAAET,SAAS,CAACM,MALP;EAMhBI,WAAW,EAAEV,SAAS,CAACM;AANP,CAAlB;AAkBA,eAAeL,SAAf"}
|
|
@@ -0,0 +1,126 @@
|
|
|
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
|
+
/* div:not(.random) */
|
|
54
|
+
.avatar {
|
|
55
|
+
width: 50px;
|
|
56
|
+
height: 50px;
|
|
57
|
+
border-radius: 50%;
|
|
58
|
+
overflow: hidden;
|
|
59
|
+
background-color: light;
|
|
60
|
+
margin-right: 20px;
|
|
61
|
+
flex-shrink: 0;
|
|
62
|
+
}
|
|
63
|
+
|
|
64
|
+
.avatar img {
|
|
65
|
+
width: 100%;
|
|
66
|
+
height: auto;
|
|
67
|
+
}
|
|
68
|
+
|
|
69
|
+
|
|
70
|
+
.random {
|
|
71
|
+
color: medium;
|
|
72
|
+
}
|
|
73
|
+
|
|
74
|
+
.alreadyEngaged.name,
|
|
75
|
+
.random .name {
|
|
76
|
+
color: medium;
|
|
77
|
+
}
|
|
78
|
+
|
|
79
|
+
.random .avatar {
|
|
80
|
+
background-color: brand;
|
|
81
|
+
display: flex;
|
|
82
|
+
align-items: center;
|
|
83
|
+
justify-content: center;
|
|
84
|
+
}
|
|
85
|
+
|
|
86
|
+
.random .avatar:before {
|
|
87
|
+
content: '?';
|
|
88
|
+
font-family: 'Gilroy';
|
|
89
|
+
font-size: 32px;
|
|
90
|
+
font-weight: 600;
|
|
91
|
+
color: white;
|
|
92
|
+
text-align: center;
|
|
93
|
+
}
|
|
94
|
+
|
|
95
|
+
.random .avatar img {
|
|
96
|
+
display: none;
|
|
97
|
+
}
|
|
98
|
+
|
|
99
|
+
.opponent-card:hover {
|
|
100
|
+
background-color: cm_grey_75;
|
|
101
|
+
}
|
|
102
|
+
|
|
103
|
+
.card .infoIconTooltip {
|
|
104
|
+
background: transparent;
|
|
105
|
+
/* height: 100%; */
|
|
106
|
+
}
|
|
107
|
+
|
|
108
|
+
@media mobile {
|
|
109
|
+
.opponent-card {
|
|
110
|
+
width: 100%;
|
|
111
|
+
padding: 10px;
|
|
112
|
+
}
|
|
113
|
+
|
|
114
|
+
.opponent-card .avatar {
|
|
115
|
+
margin-right: 10px;
|
|
116
|
+
}
|
|
117
|
+
|
|
118
|
+
.opponent-card .rightArrow {
|
|
119
|
+
margin-left: 10px;
|
|
120
|
+
}
|
|
121
|
+
|
|
122
|
+
.card {
|
|
123
|
+
margin: 0 0 10px;
|
|
124
|
+
}
|
|
125
|
+
}
|
|
126
|
+
|
|
@@ -4,9 +4,9 @@ declare type Skin = {
|
|
|
4
4
|
primary: string;
|
|
5
5
|
};
|
|
6
6
|
};
|
|
7
|
-
declare type WebContextValues = {
|
|
7
|
+
export declare type WebContextValues = {
|
|
8
8
|
skin?: Skin;
|
|
9
|
-
translate
|
|
9
|
+
translate?: (key: string, data?: Record<string, string>) => string;
|
|
10
10
|
};
|
|
11
11
|
declare type Props = WebContextValues & {
|
|
12
12
|
children: ReactNode;
|
|
@@ -1 +1 @@
|
|
|
1
|
-
{"version":3,"file":"web-context.d.ts","sourceRoot":"","sources":["../../../src/atom/provider/web-context.tsx"],"names":[],"mappings":"AAAA,OAAc,EAAgB,SAAS,EAAa,MAAM,OAAO,CAAC;
|
|
1
|
+
{"version":3,"file":"web-context.d.ts","sourceRoot":"","sources":["../../../src/atom/provider/web-context.tsx"],"names":[],"mappings":"AAAA,OAAc,EAAgB,SAAS,EAAa,MAAM,OAAO,CAAC;AAElE,aAAK,IAAI,GAAG;IACV,MAAM,EAAE;QACN,OAAO,EAAE,MAAM,CAAC;KACjB,CAAC;CACH,CAAC;AAEF,oBAAY,gBAAgB,GAAG;IAC7B,IAAI,CAAC,EAAE,IAAI,CAAC;IACZ,SAAS,CAAC,EAAE,CAAC,GAAG,EAAE,MAAM,EAAE,IAAI,CAAC,EAAE,MAAM,CAAC,MAAM,EAAE,MAAM,CAAC,KAAK,MAAM,CAAC;CACpE,CAAC;AAIF,aAAK,KAAK,GAAG,gBAAgB,GAAG;IAC9B,QAAQ,EAAE,SAAS,CAAC;CACrB,CAAC;AAEF,QAAA,MAAM,UAAU,2BAA0B,KAAK,gBAE9C,CAAC;AAEF,eAAO,MAAM,aAAa,QAAO,gBAQhC,CAAC;AAEF,eAAe,UAAU,CAAC"}
|
|
@@ -3,10 +3,7 @@ const _excluded = ["children"];
|
|
|
3
3
|
function _objectWithoutPropertiesLoose(source, excluded) { if (source == null) return {}; var target = {}; var sourceKeys = Object.keys(source); var key, i; for (i = 0; i < sourceKeys.length; i++) { key = sourceKeys[i]; if (excluded.indexOf(key) >= 0) continue; target[key] = source[key]; } return target; }
|
|
4
4
|
|
|
5
5
|
import React, { createContext, useContext } from 'react';
|
|
6
|
-
|
|
7
|
-
const Context = /*#__PURE__*/createContext({
|
|
8
|
-
translate: mockTranslate
|
|
9
|
-
});
|
|
6
|
+
const Context = /*#__PURE__*/createContext({});
|
|
10
7
|
|
|
11
8
|
const WebContext = _ref => {
|
|
12
9
|
let {
|
|
@@ -1 +1 @@
|
|
|
1
|
-
{"version":3,"file":"web-context.js","names":["React","createContext","useContext","
|
|
1
|
+
{"version":3,"file":"web-context.js","names":["React","createContext","useContext","Context","WebContext","children","value","useWebContext","context","Error"],"sources":["../../../src/atom/provider/web-context.tsx"],"sourcesContent":["import React, {createContext, ReactNode, useContext} from 'react';\n\ntype Skin = {\n common: {\n primary: string;\n };\n};\n\nexport type WebContextValues = {\n skin?: Skin;\n translate?: (key: string, data?: Record<string, string>) => string;\n};\n\nconst Context = createContext({});\n\ntype Props = WebContextValues & {\n children: ReactNode;\n};\n\nconst WebContext = ({children, ...value}: Props) => {\n return <Context.Provider value={value}>{children}</Context.Provider>;\n};\n\nexport const useWebContext = (): WebContextValues => {\n const context = useContext(Context);\n\n if (!context) {\n throw new Error('❌ [WebContext] useWebContext must be used within a provider <WebContext>');\n }\n\n return context;\n};\n\nexport default WebContext;\n"],"mappings":";;;;AAAA,OAAOA,KAAP,IAAeC,aAAf,EAAyCC,UAAzC,QAA0D,OAA1D;AAaA,MAAMC,OAAO,gBAAGF,aAAa,CAAC,EAAD,CAA7B;;AAMA,MAAMG,UAAU,GAAG,QAAiC;EAAA,IAAhC;IAACC;EAAD,CAAgC;EAAA,IAAlBC,KAAkB;;EAClD,oBAAO,oBAAC,OAAD,CAAS,QAAT;IAAkB,KAAK,EAAEA;EAAzB,GAAiCD,QAAjC,CAAP;AACD,CAFD;;AAIA,OAAO,MAAME,aAAa,GAAG,MAAwB;EACnD,MAAMC,OAAO,GAAGN,UAAU,CAACC,OAAD,CAA1B;;EAEA,IAAI,CAACK,OAAL,EAAc;IACZ,MAAM,IAAIC,KAAJ,CAAU,0EAAV,CAAN;EACD;;EAED,OAAOD,OAAP;AACD,CARM;AAUP,eAAeJ,UAAf"}
|
|
@@ -1 +1 @@
|
|
|
1
|
-
{"version":3,"file":"index.d.ts","sourceRoot":"","sources":["../../../src/atom/review-header-step-item/index.tsx"],"names":[],"mappings":";
|
|
1
|
+
{"version":3,"file":"index.d.ts","sourceRoot":"","sources":["../../../src/atom/review-header-step-item/index.tsx"],"names":[],"mappings":";AASA,OAAkB,EAAC,mBAAmB,EAAC,MAAM,SAAS,CAAC;AAsDvD,QAAA,MAAM,oBAAoB;YAAW,mBAAmB;;;;;;CAevD,CAAC;AAWF,eAAe,oBAAoB,CAAC"}
|
|
@@ -1,17 +1,17 @@
|
|
|
1
1
|
import React from 'react';
|
|
2
2
|
import classnames from 'classnames';
|
|
3
3
|
import { NovaCompositionCoorpacademyCheck as RightIcon, NovaSolidStatusClose as WrongIcon } from '@coorpacademy/nova-icons';
|
|
4
|
-
import { GetTranslateFromContext } from '../provider';
|
|
4
|
+
import Provider, { GetTranslateFromContext } from '../provider';
|
|
5
5
|
import style from './style.css';
|
|
6
6
|
import propTypes from './types';
|
|
7
7
|
|
|
8
|
-
const Content = props => {
|
|
8
|
+
const Content = (props, legacyContext) => {
|
|
9
9
|
const {
|
|
10
10
|
icon,
|
|
11
11
|
current,
|
|
12
12
|
value
|
|
13
13
|
} = props;
|
|
14
|
-
const translate = GetTranslateFromContext();
|
|
14
|
+
const translate = GetTranslateFromContext(legacyContext);
|
|
15
15
|
let child;
|
|
16
16
|
let ariaDescription;
|
|
17
17
|
|
|
@@ -67,6 +67,11 @@ const ReviewHeaderStepItem = props => {
|
|
|
67
67
|
}, /*#__PURE__*/React.createElement(Content, props));
|
|
68
68
|
};
|
|
69
69
|
|
|
70
|
+
Content.propTypes = process.env.NODE_ENV !== "production" ? propTypes : {};
|
|
71
|
+
Content.contextTypes = {
|
|
72
|
+
skin: Provider.childContextTypes.skin,
|
|
73
|
+
translate: Provider.childContextTypes.translate
|
|
74
|
+
};
|
|
70
75
|
ReviewHeaderStepItem.propTypes = process.env.NODE_ENV !== "production" ? propTypes : {};
|
|
71
76
|
export default ReviewHeaderStepItem;
|
|
72
77
|
//# sourceMappingURL=index.js.map
|
|
@@ -1 +1 @@
|
|
|
1
|
-
{"version":3,"file":"index.js","names":["React","classnames","NovaCompositionCoorpacademyCheck","RightIcon","NovaSolidStatusClose","WrongIcon","GetTranslateFromContext","style","propTypes","Content","props","icon","current","value","translate","child","ariaDescription","headerStepValue","rightIcon","currentRightIcon","wrongIcon","currentWrongIcon","ReviewHeaderStepItem","default","right","wrong"],"sources":["../../../src/atom/review-header-step-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 {GetTranslateFromContext} from '../provider';\nimport style from './style.css';\nimport propTypes, {HeaderStepItemProps} from './types';\n\nconst Content = (props: HeaderStepItemProps) => {\n const {icon, current, value} = props;\n const translate = GetTranslateFromContext();\n let child;\n let ariaDescription;\n switch (icon) {\n case 'no-answer':\n child = value;\n ariaDescription = current\n ? translate('review_header_step_item.current_question', {\n headerStepValue: value\n })\n : translate('review_header_step_item.not_answered_question', {\n headerStepValue: value\n });\n break;\n\n case 'right':\n child = (\n <RightIcon className={classnames(style.rightIcon, current && style.currentRightIcon)} />\n );\n ariaDescription = translate('review_header_step_item.correct_question', {\n headerStepValue: value\n });\n break;\n\n case 'wrong':\n child = (\n <WrongIcon className={classnames(style.wrongIcon, current && style.currentWrongIcon)} />\n );\n ariaDescription = translate('review_header_step_item.incorrect_question', {\n headerStepValue: value\n });\n break;\n\n default:\n return null;\n }\n\n return (\n <span\n className={style.value}\n aria-label={translate('review_header_step_item.aria_label', {\n headerStepValue: value\n })}\n aria-describedby={ariaDescription}\n >\n {child}\n </span>\n );\n};\n\nconst ReviewHeaderStepItem = (props: HeaderStepItemProps) => {\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 )}\n data-name=\"header-step-item\"\n >\n <Content {...props} />\n </div>\n );\n};\n\nReviewHeaderStepItem.propTypes = propTypes;\n\nexport default ReviewHeaderStepItem;\n"],"mappings":"AAAA,OAAOA,KAAP,MAAkB,OAAlB;AACA,OAAOC,UAAP,MAAuB,YAAvB;AACA,SACEC,gCAAgC,IAAIC,SADtC,EAEEC,oBAAoB,IAAIC,SAF1B,QAGO,0BAHP;AAIA,
|
|
1
|
+
{"version":3,"file":"index.js","names":["React","classnames","NovaCompositionCoorpacademyCheck","RightIcon","NovaSolidStatusClose","WrongIcon","Provider","GetTranslateFromContext","style","propTypes","Content","props","legacyContext","icon","current","value","translate","child","ariaDescription","headerStepValue","rightIcon","currentRightIcon","wrongIcon","currentWrongIcon","ReviewHeaderStepItem","default","right","wrong","contextTypes","skin","childContextTypes"],"sources":["../../../src/atom/review-header-step-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, {HeaderStepItemProps} from './types';\n\nconst Content = (props: HeaderStepItemProps, legacyContext: WebContextValues) => {\n const {icon, current, value} = props;\n const translate = GetTranslateFromContext(legacyContext);\n let child;\n let ariaDescription;\n switch (icon) {\n case 'no-answer':\n child = value;\n ariaDescription = current\n ? translate('review_header_step_item.current_question', {\n headerStepValue: value\n })\n : translate('review_header_step_item.not_answered_question', {\n headerStepValue: value\n });\n break;\n\n case 'right':\n child = (\n <RightIcon className={classnames(style.rightIcon, current && style.currentRightIcon)} />\n );\n ariaDescription = translate('review_header_step_item.correct_question', {\n headerStepValue: value\n });\n break;\n\n case 'wrong':\n child = (\n <WrongIcon className={classnames(style.wrongIcon, current && style.currentWrongIcon)} />\n );\n ariaDescription = translate('review_header_step_item.incorrect_question', {\n headerStepValue: value\n });\n break;\n\n default:\n return null;\n }\n\n return (\n <span\n className={style.value}\n aria-label={translate('review_header_step_item.aria_label', {\n headerStepValue: value\n })}\n aria-describedby={ariaDescription}\n >\n {child}\n </span>\n );\n};\n\nconst ReviewHeaderStepItem = (props: HeaderStepItemProps) => {\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 )}\n data-name=\"header-step-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\nReviewHeaderStepItem.propTypes = propTypes;\n\nexport default ReviewHeaderStepItem;\n"],"mappings":"AAAA,OAAOA,KAAP,MAAkB,OAAlB;AACA,OAAOC,UAAP,MAAuB,YAAvB;AACA,SACEC,gCAAgC,IAAIC,SADtC,EAEEC,oBAAoB,IAAIC,SAF1B,QAGO,0BAHP;AAIA,OAAOC,QAAP,IAAkBC,uBAAlB,QAAgD,aAAhD;AAEA,OAAOC,KAAP,MAAkB,aAAlB;AACA,OAAOC,SAAP,MAA6C,SAA7C;;AAEA,MAAMC,OAAO,GAAG,CAACC,KAAD,EAA6BC,aAA7B,KAAiE;EAC/E,MAAM;IAACC,IAAD;IAAOC,OAAP;IAAgBC;EAAhB,IAAyBJ,KAA/B;EACA,MAAMK,SAAS,GAAGT,uBAAuB,CAACK,aAAD,CAAzC;EACA,IAAIK,KAAJ;EACA,IAAIC,eAAJ;;EACA,QAAQL,IAAR;IACE,KAAK,WAAL;MACEI,KAAK,GAAGF,KAAR;MACAG,eAAe,GAAGJ,OAAO,GACrBE,SAAS,CAAC,0CAAD,EAA6C;QACpDG,eAAe,EAAEJ;MADmC,CAA7C,CADY,GAIrBC,SAAS,CAAC,+CAAD,EAAkD;QACzDG,eAAe,EAAEJ;MADwC,CAAlD,CAJb;MAOA;;IAEF,KAAK,OAAL;MACEE,KAAK,gBACH,oBAAC,SAAD;QAAW,SAAS,EAAEhB,UAAU,CAACO,KAAK,CAACY,SAAP,EAAkBN,OAAO,IAAIN,KAAK,CAACa,gBAAnC;MAAhC,EADF;MAGAH,eAAe,GAAGF,SAAS,CAAC,0CAAD,EAA6C;QACtEG,eAAe,EAAEJ;MADqD,CAA7C,CAA3B;MAGA;;IAEF,KAAK,OAAL;MACEE,KAAK,gBACH,oBAAC,SAAD;QAAW,SAAS,EAAEhB,UAAU,CAACO,KAAK,CAACc,SAAP,EAAkBR,OAAO,IAAIN,KAAK,CAACe,gBAAnC;MAAhC,EADF;MAGAL,eAAe,GAAGF,SAAS,CAAC,4CAAD,EAA+C;QACxEG,eAAe,EAAEJ;MADuD,CAA/C,CAA3B;MAGA;;IAEF;MACE,OAAO,IAAP;EA/BJ;;EAkCA,oBACE;IACE,SAAS,EAAEP,KAAK,CAACO,KADnB;IAEE,cAAYC,SAAS,CAAC,oCAAD,EAAuC;MAC1DG,eAAe,EAAEJ;IADyC,CAAvC,CAFvB;IAKE,oBAAkBG;EALpB,GAOGD,KAPH,CADF;AAWD,CAlDD;;AAoDA,MAAMO,oBAAoB,GAAIb,KAAD,IAAgC;EAC3D,MAAM;IAACE,IAAD;IAAOC;EAAP,IAAkBH,KAAxB;EACA,oBACE;IACE,SAAS,EAAEV,UAAU,CACnBO,KAAK,CAACiB,OADa,EAEnBZ,IAAI,KAAK,OAAT,IAAoBL,KAAK,CAACkB,KAFP,EAGnBb,IAAI,KAAK,OAAT,IAAoBL,KAAK,CAACmB,KAHP,EAInBb,OAAO,IAAIN,KAAK,CAACM,OAJE,CADvB;IAOE,aAAU;EAPZ,gBASE,oBAAC,OAAD,EAAaH,KAAb,CATF,CADF;AAaD,CAfD;;AAiBAD,OAAO,CAACD,SAAR,2CAAoBA,SAApB;AAEAC,OAAO,CAACkB,YAAR,GAAuB;EACrBC,IAAI,EAAEvB,QAAQ,CAACwB,iBAAT,CAA2BD,IADZ;EAErBb,SAAS,EAAEV,QAAQ,CAACwB,iBAAT,CAA2Bd;AAFjB,CAAvB;AAKAQ,oBAAoB,CAACf,SAArB,2CAAiCA,SAAjC;AAEA,eAAee,oBAAf"}
|
|
@@ -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"}
|
package/es/atom/tooltip/index.js
CHANGED
|
@@ -3,19 +3,25 @@ import classnames from 'classnames';
|
|
|
3
3
|
import PropTypes from 'prop-types';
|
|
4
4
|
import ReactTooltip from 'react-tooltip';
|
|
5
5
|
import isString from 'lodash/fp/isString';
|
|
6
|
+
import keys from 'lodash/fp/keys';
|
|
6
7
|
import { NovaCompositionCoorpacademyInformationIcon as InformationIcon } from '@coorpacademy/nova-icons';
|
|
7
8
|
import style from './style.css';
|
|
8
9
|
const FontSizes = {
|
|
9
10
|
12: style.tooltipContentFontSize12,
|
|
10
11
|
14: style.tooltipContentFontSize14
|
|
11
12
|
};
|
|
13
|
+
const IconSizes = {
|
|
14
|
+
small: 12,
|
|
15
|
+
big: 20
|
|
16
|
+
};
|
|
12
17
|
|
|
13
18
|
const ToolTipWrapper = ({
|
|
14
19
|
toolTipIsVisible,
|
|
15
20
|
anchorId,
|
|
16
21
|
closeToolTipInformationTextAriaLabel,
|
|
17
22
|
content,
|
|
18
|
-
handleContentMouseOver
|
|
23
|
+
handleContentMouseOver,
|
|
24
|
+
iconSize
|
|
19
25
|
}) => {
|
|
20
26
|
if (!toolTipIsVisible) return null;
|
|
21
27
|
|
|
@@ -30,7 +36,7 @@ const ToolTipWrapper = ({
|
|
|
30
36
|
}, content);
|
|
31
37
|
} else {
|
|
32
38
|
return /*#__PURE__*/React.createElement("div", {
|
|
33
|
-
className: style.toolTip,
|
|
39
|
+
className: classnames(style.toolTip, iconSize === 'big' ? style.bigIconToolTip : style.smallIconToolTip),
|
|
34
40
|
"data-testid": "tooltip",
|
|
35
41
|
"aria-label": closeToolTipInformationTextAriaLabel,
|
|
36
42
|
onMouseOver: handleContentMouseOver
|
|
@@ -43,7 +49,8 @@ ToolTipWrapper.propTypes = process.env.NODE_ENV !== "production" ? {
|
|
|
43
49
|
anchorId: PropTypes.string,
|
|
44
50
|
closeToolTipInformationTextAriaLabel: PropTypes.string.isRequired,
|
|
45
51
|
content: PropTypes.node,
|
|
46
|
-
handleContentMouseOver: PropTypes.func
|
|
52
|
+
handleContentMouseOver: PropTypes.func,
|
|
53
|
+
iconSize: PropTypes.oneOf(keys(IconSizes))
|
|
47
54
|
} : {};
|
|
48
55
|
export const toggleStateOnKeyPress = (state, setState, ref) => event => {
|
|
49
56
|
if (event.key === 'Enter') {
|
|
@@ -65,7 +72,8 @@ const ToolTip = ({
|
|
|
65
72
|
toolTipIsVisible: _toolTipIsVisible,
|
|
66
73
|
iconContainerClassName,
|
|
67
74
|
delayHide = 250,
|
|
68
|
-
fontSize = 14
|
|
75
|
+
fontSize = 14,
|
|
76
|
+
iconSize = 'small'
|
|
69
77
|
}) => {
|
|
70
78
|
const isComponent = useMemo(() => !isString(TooltipContent) && /*#__PURE__*/isValidElement(TooltipContent()), [TooltipContent]);
|
|
71
79
|
const [toolTipIsVisible, setToolTipIsVisible] = useState(false);
|
|
@@ -110,8 +118,8 @@ const ToolTip = ({
|
|
|
110
118
|
tabIndex: 0
|
|
111
119
|
}, /*#__PURE__*/React.createElement(InformationIcon, {
|
|
112
120
|
className: style.informationIcon,
|
|
113
|
-
width:
|
|
114
|
-
height:
|
|
121
|
+
width: IconSizes[iconSize],
|
|
122
|
+
height: IconSizes[iconSize],
|
|
115
123
|
"aria-label": ariaLabel
|
|
116
124
|
})), /*#__PURE__*/React.createElement(ToolTipWrapper, {
|
|
117
125
|
toolTipIsVisible: toolTipIsVisible,
|
|
@@ -119,7 +127,8 @@ const ToolTip = ({
|
|
|
119
127
|
closeToolTipInformationTextAriaLabel: closeToolTipInformationTextAriaLabel,
|
|
120
128
|
content: content,
|
|
121
129
|
handleContentMouseOver: handleContentMouseOver,
|
|
122
|
-
fontSize: fontSize
|
|
130
|
+
fontSize: fontSize,
|
|
131
|
+
iconSize: iconSize
|
|
123
132
|
}));
|
|
124
133
|
};
|
|
125
134
|
|
|
@@ -132,6 +141,7 @@ ToolTip.propTypes = process.env.NODE_ENV !== "production" ? {
|
|
|
132
141
|
iconContainerClassName: PropTypes.string,
|
|
133
142
|
delayHide: PropTypes.number,
|
|
134
143
|
fontSize: PropTypes.oneOf([12, 14]),
|
|
144
|
+
iconSize: PropTypes.oneOf(keys(IconSizes)),
|
|
135
145
|
// ---------- React Tooltip exclusive --------------
|
|
136
146
|
// externalHandling: if passed down, React Tooltip is used instead, due to limitations on
|
|
137
147
|
// parents overflow hidden controls
|
|
@@ -1 +1 @@
|
|
|
1
|
-
{"version":3,"file":"index.js","names":["React","isValidElement","useState","useCallback","useMemo","classnames","PropTypes","ReactTooltip","isString","NovaCompositionCoorpacademyInformationIcon","InformationIcon","style","FontSizes","tooltipContentFontSize12","tooltipContentFontSize14","ToolTipWrapper","toolTipIsVisible","anchorId","closeToolTipInformationTextAriaLabel","content","handleContentMouseOver","toolTipReact","toolTip","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","setToolTipIsVisible","mouseLeaveTimer","setMouseLeaveTimer","undefined","handleKeyPress","clearTimeout","handleMouseOver","handleMouseLeave","setTimeout","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":"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"}
|
|
1
|
+
{"version":3,"file":"index.js","names":["React","isValidElement","useState","useCallback","useMemo","classnames","PropTypes","ReactTooltip","isString","keys","NovaCompositionCoorpacademyInformationIcon","InformationIcon","style","FontSizes","tooltipContentFontSize12","tooltipContentFontSize14","IconSizes","small","big","ToolTipWrapper","toolTipIsVisible","anchorId","closeToolTipInformationTextAriaLabel","content","handleContentMouseOver","iconSize","toolTipReact","toolTip","bigIconToolTip","smallIconToolTip","propTypes","bool","string","isRequired","node","func","oneOf","toggleStateOnKeyPress","state","setState","ref","event","key","current","focus","stopPropagation","preventDefault","ToolTip","TooltipContent","ariaLabel","dataTestId","_toolTipIsVisible","iconContainerClassName","delayHide","fontSize","isComponent","setToolTipIsVisible","mouseLeaveTimer","setMouseLeaveTimer","undefined","handleKeyPress","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 anchorId: PropTypes.string,\n toolTipIsVisible: PropTypes.bool\n};\n\nexport default ToolTip;\n"],"mappings":"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"}
|
|
@@ -34,12 +34,20 @@
|
|
|
34
34
|
position: absolute;
|
|
35
35
|
border-radius: 7px;
|
|
36
36
|
background-color: cm_grey_700;
|
|
37
|
-
right: -75px;
|
|
38
|
-
bottom: 32px;
|
|
39
37
|
height: auto;
|
|
40
38
|
width: 200px;
|
|
41
39
|
}
|
|
42
40
|
|
|
41
|
+
.bigIconToolTip {
|
|
42
|
+
right: -71px;
|
|
43
|
+
bottom: 31px;
|
|
44
|
+
}
|
|
45
|
+
|
|
46
|
+
.smallIconToolTip {
|
|
47
|
+
right: -75px;
|
|
48
|
+
bottom: 32px;
|
|
49
|
+
}
|
|
50
|
+
|
|
43
51
|
.toolTip::before {
|
|
44
52
|
content: '';
|
|
45
53
|
display: inline-block;
|
package/es/globals.d.js.map
CHANGED
|
@@ -1 +1 @@
|
|
|
1
|
-
{"version":3,"file":"globals.d.js","names":[],"sources":["../src/globals.d.ts"],"sourcesContent":["declare module '@coorpacademy/nova-icons';\ndeclare module '@coorpacademy/react-native-slider';\ndeclare module '@react-native-community/blur';\ndeclare module '@coorpacademy/translate';\ndeclare module 'react-native/*';\ndeclare module 'color';\ndeclare module 'classnames';\ndeclare module '*.css';\n"],"mappings":""}
|
|
1
|
+
{"version":3,"file":"globals.d.js","names":[],"sources":["../src/globals.d.ts"],"sourcesContent":["declare module '@coorpacademy/nova-icons';\ndeclare module '@coorpacademy/react-native-slider';\ndeclare module '@react-native-community/blur';\ndeclare module '@coorpacademy/translate';\ndeclare module 'browser-env';\ndeclare module 'react-native/*';\ndeclare module 'color';\ndeclare module 'classnames';\ndeclare module '*.css';\n"],"mappings":""}
|
|
@@ -2,6 +2,9 @@ export default Answer;
|
|
|
2
2
|
declare function Answer(props: any): JSX.Element;
|
|
3
3
|
declare namespace Answer {
|
|
4
4
|
export { propTypes };
|
|
5
|
+
export namespace contextTypes {
|
|
6
|
+
const translate: import("prop-types").Requireable<(...args: any[]) => any>;
|
|
7
|
+
}
|
|
5
8
|
}
|
|
6
9
|
import propTypes from "./prop-types";
|
|
7
10
|
//# sourceMappingURL=index.d.ts.map
|
|
@@ -1 +1 @@
|
|
|
1
|
-
{"version":3,"file":"index.d.ts","sourceRoot":"","sources":["../../../src/molecule/answer/index.js"],"names":[],"mappings":";
|
|
1
|
+
{"version":3,"file":"index.d.ts","sourceRoot":"","sources":["../../../src/molecule/answer/index.js"],"names":[],"mappings":";AA4EA,iDAWC"}
|
|
@@ -15,7 +15,7 @@ import QcmGraphic from '../questions/qcm-graphic';
|
|
|
15
15
|
import QuestionRange from '../questions/question-range';
|
|
16
16
|
import Template from '../questions/template';
|
|
17
17
|
import Audio from '../audio';
|
|
18
|
-
import { GetTranslateFromContext } from '../../atom/provider';
|
|
18
|
+
import Provider, { GetTranslateFromContext } from '../../atom/provider';
|
|
19
19
|
import style from './style.css';
|
|
20
20
|
import propTypes, { MediaViewPropTypes, TYPE_AUDIO, TYPE_IMAGE, TYPE_VIDEO } from './prop-types';
|
|
21
21
|
|
|
@@ -64,11 +64,11 @@ MediaView.propTypes = process.env.NODE_ENV !== "production" ? MediaViewPropTypes
|
|
|
64
64
|
const Switch = ({
|
|
65
65
|
model,
|
|
66
66
|
help
|
|
67
|
-
}) => {
|
|
67
|
+
}, legacyContext) => {
|
|
68
68
|
const {
|
|
69
69
|
type
|
|
70
70
|
} = model;
|
|
71
|
-
const translate = GetTranslateFromContext();
|
|
71
|
+
const translate = GetTranslateFromContext(legacyContext);
|
|
72
72
|
|
|
73
73
|
switch (type) {
|
|
74
74
|
case 'qcmDrag':
|
|
@@ -111,6 +111,9 @@ Switch.propTypes = process.env.NODE_ENV !== "production" ? {
|
|
|
111
111
|
model: propTypes.model,
|
|
112
112
|
help: propTypes.help
|
|
113
113
|
} : {};
|
|
114
|
+
Switch.contextTypes = {
|
|
115
|
+
translate: Provider.childContextTypes.translate
|
|
116
|
+
};
|
|
114
117
|
|
|
115
118
|
const Answer = props => {
|
|
116
119
|
const {
|
|
@@ -130,5 +133,8 @@ const Answer = props => {
|
|
|
130
133
|
};
|
|
131
134
|
|
|
132
135
|
Answer.propTypes = process.env.NODE_ENV !== "production" ? propTypes : {};
|
|
136
|
+
Answer.contextTypes = {
|
|
137
|
+
translate: Provider.childContextTypes.translate
|
|
138
|
+
};
|
|
133
139
|
export default Answer;
|
|
134
140
|
//# sourceMappingURL=index.js.map
|