@coorpacademy/components 11.9.2 → 11.9.3-alpha.24
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/provider/index.d.ts.map +1 -1
- package/es/atom/provider/index.js +2 -0
- package/es/atom/provider/index.js.map +1 -1
- package/es/atom/review-presentation/index.d.ts.map +1 -1
- package/es/atom/review-presentation/index.js +12 -62
- package/es/atom/review-presentation/index.js.map +1 -1
- package/es/atom/review-presentation/style.css +7 -67
- package/es/atom/tooltip/index.d.ts +22 -0
- package/es/atom/tooltip/index.d.ts.map +1 -0
- package/es/atom/tooltip/index.js +117 -0
- package/es/atom/tooltip/index.js.map +1 -0
- package/es/atom/tooltip/style.css +96 -0
- 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 +11 -4
- package/es/molecule/answer/index.js.map +1 -1
- package/es/template/activity/engine-stars.css +16 -33
- package/es/template/activity/engine-stars.d.ts +15 -17
- package/es/template/activity/engine-stars.d.ts.map +1 -1
- package/es/template/activity/engine-stars.js +128 -115
- package/es/template/activity/engine-stars.js.map +1 -1
- package/es/template/activity/index.d.ts +1 -0
- package/es/template/activity/index.d.ts.map +1 -1
- package/es/template/activity/index.js +18 -9
- package/es/template/activity/index.js.map +1 -1
- package/es/template/activity/progression-item.js +1 -1
- package/es/template/activity/progression-item.js.map +1 -1
- package/es/template/activity/stars-summary.d.ts +1 -0
- package/es/template/activity/stars-summary.d.ts.map +1 -1
- package/es/template/activity/stars-summary.js +10 -5
- package/es/template/activity/stars-summary.js.map +1 -1
- package/lib/atom/provider/index.d.ts.map +1 -1
- package/lib/atom/provider/index.js +2 -0
- package/lib/atom/provider/index.js.map +1 -1
- package/lib/atom/review-presentation/index.d.ts.map +1 -1
- package/lib/atom/review-presentation/index.js +13 -66
- package/lib/atom/review-presentation/index.js.map +1 -1
- package/lib/atom/review-presentation/style.css +7 -67
- package/lib/atom/tooltip/index.d.ts +22 -0
- package/lib/atom/tooltip/index.d.ts.map +1 -0
- package/lib/atom/tooltip/index.js +137 -0
- package/lib/atom/tooltip/index.js.map +1 -0
- package/lib/atom/tooltip/style.css +96 -0
- 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 +11 -4
- package/lib/molecule/answer/index.js.map +1 -1
- package/lib/template/activity/engine-stars.css +16 -33
- package/lib/template/activity/engine-stars.d.ts +15 -17
- package/lib/template/activity/engine-stars.d.ts.map +1 -1
- package/lib/template/activity/engine-stars.js +135 -116
- package/lib/template/activity/engine-stars.js.map +1 -1
- package/lib/template/activity/index.d.ts +1 -0
- package/lib/template/activity/index.d.ts.map +1 -1
- package/lib/template/activity/index.js +21 -9
- package/lib/template/activity/index.js.map +1 -1
- package/lib/template/activity/progression-item.js +1 -1
- package/lib/template/activity/progression-item.js.map +1 -1
- package/lib/template/activity/stars-summary.d.ts +1 -0
- package/lib/template/activity/stars-summary.d.ts.map +1 -1
- package/lib/template/activity/stars-summary.js +10 -5
- package/lib/template/activity/stars-summary.js.map +1 -1
- package/locales/cs/global.json +1 -0
- package/locales/de/global.json +1 -0
- package/locales/en/global.json +1 -0
- package/locales/es/global.json +1 -0
- package/locales/et/global.json +1 -0
- package/locales/fr/global.json +1 -0
- package/locales/hr/global.json +1 -0
- package/locales/hu/global.json +1 -0
- package/locales/it/global.json +1 -0
- package/locales/ja/global.json +1 -0
- package/locales/ko/global.json +1 -0
- package/locales/nl/global.json +1 -0
- package/locales/pl/global.json +1 -0
- package/locales/pt/global.json +1 -0
- package/locales/ro/global.json +1 -0
- package/locales/ru/global.json +1 -0
- package/locales/sk/global.json +1 -0
- package/locales/th/global.json +90 -0
- package/locales/tl/global.json +1 -0
- package/locales/zh/global.json +1 -0
- package/locales/zh_TW/global.json +1 -0
- package/package.json +4 -3
|
@@ -1 +1 @@
|
|
|
1
|
-
{"version":3,"file":"index.d.ts","sourceRoot":"","sources":["../../../src/atom/provider/index.js"],"names":[],"mappings":";;;AAqGA,4DAMC;AAED,
|
|
1
|
+
{"version":3,"file":"index.d.ts","sourceRoot":"","sources":["../../../src/atom/provider/index.js"],"names":[],"mappings":";;;AAqGA,4DAMC;AAED,iEAOC;AA5DD;IACE;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;MAQE;IAEF;;;;;;;;;;;;;;;;;;;;;;;;;;;;MAKE;IAEF;;;;MAQC;IAED,sCAKC;IADC;;;;;MAA+D;IAGjE;;;;;MAEC;CAMF"}
|
|
@@ -124,7 +124,9 @@ const GetSkinFromContext = legacyContext => {
|
|
|
124
124
|
};
|
|
125
125
|
|
|
126
126
|
const GetTranslateFromContext = legacyContext => {
|
|
127
|
+
console.log('legacy', legacyContext);
|
|
127
128
|
const context = useWebContext();
|
|
129
|
+
console.log('context', context);
|
|
128
130
|
|
|
129
131
|
const legacyTranslate = _get('translate', legacyContext);
|
|
130
132
|
|
|
@@ -1 +1 @@
|
|
|
1
|
-
{"version":3,"file":"index.js","names":["React","PropTypes","SrcPropType","ColorPropType","HexPropType","WebContext","useWebContext","DEFAULT_SKIN","common","good","bad","primary","life","brand","primaryAdd1","primaryAdd2","primaryAdd3","primaryAdd4","xtraLightGrey","light","medium","dark","grey","orangeAdd","orange","positive","lightGreen","negative","battle","white","black","mergeSkin","skin","historyShape","shape","createHref","func","push","skinShape","objectOf","images","logo","login","icons","mod","courses","arrayOf","texts","translateShape","Provider","Component","getDerivedStateFromProps","props","history","translate","constructor","context","Vimeo","state","getChildContext","render","children","Children","only","childContextTypes","object","propTypes","node","isRequired","GetSkinFromContext","legacyContext","legacySkin","GetTranslateFromContext","legacyTranslate"],"sources":["../../../src/atom/provider/index.js"],"sourcesContent":["import React from 'react';\nimport PropTypes from 'prop-types';\nimport {defaultsDeep, get, getOr} from 'lodash/fp';\nimport {SrcPropType, ColorPropType, HexPropType} from '../../util/proptypes';\nimport WebContext, {useWebContext} from './web-context';\n\nconst DEFAULT_SKIN = {\n common: {\n good: '#24b694',\n bad: '#ed1c24',\n primary: '#00B0FF',\n life: '#ed1c24',\n brand: '#00B0FF',\n primaryAdd1: '#B3E5FC',\n primaryAdd2: '#0091EA',\n primaryAdd3: '#0277BD',\n primaryAdd4: '#015798',\n xtraLightGrey: '#FAFAFA',\n light: '#ECEFF1',\n medium: '#90A4AE',\n dark: '#546E7A',\n grey: '#607D8B',\n orangeAdd: '#FF7043',\n orange: '#FFA000',\n positive: '#3EC483',\n lightGreen: '#66BB6A',\n negative: '#F73F52',\n battle: '#FFE100',\n white: '#FFFFFF',\n black: '#14171A'\n }\n};\n\nconst mergeSkin = (skin = {}) => defaultsDeep(DEFAULT_SKIN, skin);\n\nconst historyShape = PropTypes.shape({\n createHref: PropTypes.func,\n push: PropTypes.func\n});\n\nconst skinShape = PropTypes.shape({\n common: PropTypes.objectOf(ColorPropType),\n images: PropTypes.shape({\n 'logo-mobile': SrcPropType,\n logo: SrcPropType,\n 'logo-email': SrcPropType,\n login: SrcPropType\n }),\n icons: PropTypes.objectOf(HexPropType),\n mod: PropTypes.objectOf(ColorPropType),\n courses: PropTypes.arrayOf(ColorPropType),\n texts: PropTypes.objectOf(ColorPropType)\n});\n\nconst translateShape = PropTypes.func;\n\nclass Provider extends React.Component {\n static propTypes = {\n history: historyShape,\n skin: skinShape,\n translate: translateShape,\n children: PropTypes.node.isRequired,\n Vimeo: PropTypes.shape({\n common: PropTypes.func\n })\n };\n\n static childContextTypes = {\n history: historyShape,\n skin: skinShape,\n translate: translateShape,\n Vimeo: PropTypes.object\n };\n\n static getDerivedStateFromProps(props) {\n const {history, skin, translate} = props;\n\n return {\n history,\n skin: mergeSkin(skin),\n translate\n };\n }\n\n constructor(props, context) {\n super(props, context);\n const {history, skin, translate, Vimeo} = props;\n // eslint-disable-next-line react/no-unused-state\n this.state = {history, skin: mergeSkin(skin), translate, Vimeo};\n }\n\n getChildContext() {\n return this.state;\n }\n\n render() {\n const {children} = this.props;\n return React.Children.only(children);\n }\n}\n\nconst GetSkinFromContext = legacyContext => {\n const context = useWebContext();\n const legacySkin = get('skin', legacyContext);\n const skin = getOr(legacySkin, 'skin', context);\n\n return skin;\n};\n\nconst GetTranslateFromContext = legacyContext => {\n const context = useWebContext();\n const legacyTranslate = get('translate', legacyContext);\n const translate = getOr(legacyTranslate, 'translate', context);\n return translate;\n};\n\nexport {WebContext, useWebContext, GetSkinFromContext, GetTranslateFromContext};\nexport default Provider;\n"],"mappings":"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
|
|
1
|
+
{"version":3,"file":"index.js","names":["React","PropTypes","SrcPropType","ColorPropType","HexPropType","WebContext","useWebContext","DEFAULT_SKIN","common","good","bad","primary","life","brand","primaryAdd1","primaryAdd2","primaryAdd3","primaryAdd4","xtraLightGrey","light","medium","dark","grey","orangeAdd","orange","positive","lightGreen","negative","battle","white","black","mergeSkin","skin","historyShape","shape","createHref","func","push","skinShape","objectOf","images","logo","login","icons","mod","courses","arrayOf","texts","translateShape","Provider","Component","getDerivedStateFromProps","props","history","translate","constructor","context","Vimeo","state","getChildContext","render","children","Children","only","childContextTypes","object","propTypes","node","isRequired","GetSkinFromContext","legacyContext","legacySkin","GetTranslateFromContext","console","log","legacyTranslate"],"sources":["../../../src/atom/provider/index.js"],"sourcesContent":["import React from 'react';\nimport PropTypes from 'prop-types';\nimport {defaultsDeep, get, getOr} from 'lodash/fp';\nimport {SrcPropType, ColorPropType, HexPropType} from '../../util/proptypes';\nimport WebContext, {useWebContext} from './web-context';\n\nconst DEFAULT_SKIN = {\n common: {\n good: '#24b694',\n bad: '#ed1c24',\n primary: '#00B0FF',\n life: '#ed1c24',\n brand: '#00B0FF',\n primaryAdd1: '#B3E5FC',\n primaryAdd2: '#0091EA',\n primaryAdd3: '#0277BD',\n primaryAdd4: '#015798',\n xtraLightGrey: '#FAFAFA',\n light: '#ECEFF1',\n medium: '#90A4AE',\n dark: '#546E7A',\n grey: '#607D8B',\n orangeAdd: '#FF7043',\n orange: '#FFA000',\n positive: '#3EC483',\n lightGreen: '#66BB6A',\n negative: '#F73F52',\n battle: '#FFE100',\n white: '#FFFFFF',\n black: '#14171A'\n }\n};\n\nconst mergeSkin = (skin = {}) => defaultsDeep(DEFAULT_SKIN, skin);\n\nconst historyShape = PropTypes.shape({\n createHref: PropTypes.func,\n push: PropTypes.func\n});\n\nconst skinShape = PropTypes.shape({\n common: PropTypes.objectOf(ColorPropType),\n images: PropTypes.shape({\n 'logo-mobile': SrcPropType,\n logo: SrcPropType,\n 'logo-email': SrcPropType,\n login: SrcPropType\n }),\n icons: PropTypes.objectOf(HexPropType),\n mod: PropTypes.objectOf(ColorPropType),\n courses: PropTypes.arrayOf(ColorPropType),\n texts: PropTypes.objectOf(ColorPropType)\n});\n\nconst translateShape = PropTypes.func;\n\nclass Provider extends React.Component {\n static propTypes = {\n history: historyShape,\n skin: skinShape,\n translate: translateShape,\n children: PropTypes.node.isRequired,\n Vimeo: PropTypes.shape({\n common: PropTypes.func\n })\n };\n\n static childContextTypes = {\n history: historyShape,\n skin: skinShape,\n translate: translateShape,\n Vimeo: PropTypes.object\n };\n\n static getDerivedStateFromProps(props) {\n const {history, skin, translate} = props;\n\n return {\n history,\n skin: mergeSkin(skin),\n translate\n };\n }\n\n constructor(props, context) {\n super(props, context);\n const {history, skin, translate, Vimeo} = props;\n // eslint-disable-next-line react/no-unused-state\n this.state = {history, skin: mergeSkin(skin), translate, Vimeo};\n }\n\n getChildContext() {\n return this.state;\n }\n\n render() {\n const {children} = this.props;\n return React.Children.only(children);\n }\n}\n\nconst GetSkinFromContext = legacyContext => {\n const context = useWebContext();\n const legacySkin = get('skin', legacyContext);\n const skin = getOr(legacySkin, 'skin', context);\n\n return skin;\n};\n\nconst GetTranslateFromContext = legacyContext => {\n console.log('legacy', legacyContext);\n const context = useWebContext();\n console.log('context', context);\n const legacyTranslate = get('translate', legacyContext);\n const translate = getOr(legacyTranslate, 'translate', context);\n return translate;\n};\n\nexport {WebContext, useWebContext, GetSkinFromContext, GetTranslateFromContext};\nexport default Provider;\n"],"mappings":";;;AAAA,OAAOA,KAAP,MAAkB,OAAlB;AACA,OAAOC,SAAP,MAAsB,YAAtB;AAEA,SAAQC,WAAR,EAAqBC,aAArB,EAAoCC,WAApC,QAAsD,sBAAtD;AACA,OAAOC,UAAP,IAAoBC,aAApB,QAAwC,eAAxC;AAEA,MAAMC,YAAY,GAAG;EACnBC,MAAM,EAAE;IACNC,IAAI,EAAE,SADA;IAENC,GAAG,EAAE,SAFC;IAGNC,OAAO,EAAE,SAHH;IAINC,IAAI,EAAE,SAJA;IAKNC,KAAK,EAAE,SALD;IAMNC,WAAW,EAAE,SANP;IAONC,WAAW,EAAE,SAPP;IAQNC,WAAW,EAAE,SARP;IASNC,WAAW,EAAE,SATP;IAUNC,aAAa,EAAE,SAVT;IAWNC,KAAK,EAAE,SAXD;IAYNC,MAAM,EAAE,SAZF;IAaNC,IAAI,EAAE,SAbA;IAcNC,IAAI,EAAE,SAdA;IAeNC,SAAS,EAAE,SAfL;IAgBNC,MAAM,EAAE,SAhBF;IAiBNC,QAAQ,EAAE,SAjBJ;IAkBNC,UAAU,EAAE,SAlBN;IAmBNC,QAAQ,EAAE,SAnBJ;IAoBNC,MAAM,EAAE,SApBF;IAqBNC,KAAK,EAAE,SArBD;IAsBNC,KAAK,EAAE;EAtBD;AADW,CAArB;;AA2BA,MAAMC,SAAS,GAAG,CAACC,IAAI,GAAG,EAAR,KAAe,cAAazB,YAAb,EAA2ByB,IAA3B,CAAjC;;AAEA,MAAMC,YAAY,GAAGhC,SAAS,CAACiC,KAAV,CAAgB;EACnCC,UAAU,EAAElC,SAAS,CAACmC,IADa;EAEnCC,IAAI,EAAEpC,SAAS,CAACmC;AAFmB,CAAhB,CAArB;AAKA,MAAME,SAAS,GAAGrC,SAAS,CAACiC,KAAV,CAAgB;EAChC1B,MAAM,EAAEP,SAAS,CAACsC,QAAV,CAAmBpC,aAAnB,CADwB;EAEhCqC,MAAM,EAAEvC,SAAS,CAACiC,KAAV,CAAgB;IACtB,eAAehC,WADO;IAEtBuC,IAAI,EAAEvC,WAFgB;IAGtB,cAAcA,WAHQ;IAItBwC,KAAK,EAAExC;EAJe,CAAhB,CAFwB;EAQhCyC,KAAK,EAAE1C,SAAS,CAACsC,QAAV,CAAmBnC,WAAnB,CARyB;EAShCwC,GAAG,EAAE3C,SAAS,CAACsC,QAAV,CAAmBpC,aAAnB,CAT2B;EAUhC0C,OAAO,EAAE5C,SAAS,CAAC6C,OAAV,CAAkB3C,aAAlB,CAVuB;EAWhC4C,KAAK,EAAE9C,SAAS,CAACsC,QAAV,CAAmBpC,aAAnB;AAXyB,CAAhB,CAAlB;AAcA,MAAM6C,cAAc,GAAG/C,SAAS,CAACmC,IAAjC;;AAEA,MAAMa,QAAN,SAAuBjD,KAAK,CAACkD,SAA7B,CAAuC;EAkBN,OAAxBC,wBAAwB,CAACC,KAAD,EAAQ;IACrC,MAAM;MAACC,OAAD;MAAUrB,IAAV;MAAgBsB;IAAhB,IAA6BF,KAAnC;IAEA,OAAO;MACLC,OADK;MAELrB,IAAI,EAAED,SAAS,CAACC,IAAD,CAFV;MAGLsB;IAHK,CAAP;EAKD;;EAEDC,WAAW,CAACH,KAAD,EAAQI,OAAR,EAAiB;IAC1B,MAAMJ,KAAN,EAAaI,OAAb;IACA,MAAM;MAACH,OAAD;MAAUrB,IAAV;MAAgBsB,SAAhB;MAA2BG;IAA3B,IAAoCL,KAA1C,CAF0B,CAG1B;;IACA,KAAKM,KAAL,GAAa;MAACL,OAAD;MAAUrB,IAAI,EAAED,SAAS,CAACC,IAAD,CAAzB;MAAiCsB,SAAjC;MAA4CG;IAA5C,CAAb;EACD;;EAEDE,eAAe,GAAG;IAChB,OAAO,KAAKD,KAAZ;EACD;;EAEDE,MAAM,GAAG;IACP,MAAM;MAACC;IAAD,IAAa,KAAKT,KAAxB;IACA,OAAOpD,KAAK,CAAC8D,QAAN,CAAeC,IAAf,CAAoBF,QAApB,CAAP;EACD;;AA1CoC;;AAAjCZ,Q,CAWGe,iB,GAAoB;EACzBX,OAAO,EAAEpB,YADgB;EAEzBD,IAAI,EAAEM,SAFmB;EAGzBgB,SAAS,EAAEN,cAHc;EAIzBS,KAAK,EAAExD,SAAS,CAACgE;AAJQ,C;AAXvBhB,Q,CACGiB,S,2CAAY;EACjBb,OAAO,EAAEpB,YADQ;EAEjBD,IAAI,EAAEM,SAFW;EAGjBgB,SAAS,EAAEN,cAHM;EAIjBa,QAAQ,EAAE5D,SAAS,CAACkE,IAAV,CAAeC,UAJR;EAKjBX,KAAK,EAAExD,SAAS,CAACiC,KAAV,CAAgB;IACrB1B,MAAM,EAAEP,SAAS,CAACmC;EADG,CAAhB;AALU,C;;AA4CrB,MAAMiC,kBAAkB,GAAGC,aAAa,IAAI;EAC1C,MAAMd,OAAO,GAAGlD,aAAa,EAA7B;;EACA,MAAMiE,UAAU,GAAG,KAAI,MAAJ,EAAYD,aAAZ,CAAnB;;EACA,MAAMtC,IAAI,GAAG,OAAMuC,UAAN,EAAkB,MAAlB,EAA0Bf,OAA1B,CAAb;;EAEA,OAAOxB,IAAP;AACD,CAND;;AAQA,MAAMwC,uBAAuB,GAAGF,aAAa,IAAI;EAC/CG,OAAO,CAACC,GAAR,CAAY,QAAZ,EAAsBJ,aAAtB;EACA,MAAMd,OAAO,GAAGlD,aAAa,EAA7B;EACAmE,OAAO,CAACC,GAAR,CAAY,SAAZ,EAAuBlB,OAAvB;;EACA,MAAMmB,eAAe,GAAG,KAAI,WAAJ,EAAiBL,aAAjB,CAAxB;;EACA,MAAMhB,SAAS,GAAG,OAAMqB,eAAN,EAAuB,WAAvB,EAAoCnB,OAApC,CAAlB;;EACA,OAAOF,SAAP;AACD,CAPD;;AASA,SAAQjD,UAAR,EAAoBC,aAApB,EAAmC+D,kBAAnC,EAAuDG,uBAAvD;AACA,eAAevB,QAAf"}
|
|
@@ -1 +1 @@
|
|
|
1
|
-
{"version":3,"file":"index.d.ts","sourceRoot":"","sources":["../../../src/atom/review-presentation/index.js"],"names":[],"mappings":";
|
|
1
|
+
{"version":3,"file":"index.d.ts","sourceRoot":"","sources":["../../../src/atom/review-presentation/index.js"],"names":[],"mappings":";AA+CA,6DA+BC"}
|
|
@@ -1,10 +1,9 @@
|
|
|
1
|
-
|
|
2
|
-
|
|
3
|
-
import React, { useState, useCallback } from 'react';
|
|
1
|
+
import React from 'react';
|
|
4
2
|
import PropTypes from 'prop-types';
|
|
5
3
|
import getOr from 'lodash/fp/getOr';
|
|
6
4
|
import map from 'lodash/fp/map';
|
|
7
|
-
import { NovaSolidStatusCheckCircle2 as CheckIcon, NovaSolidVoteRewardsVoteHeart as HeartIcon,
|
|
5
|
+
import { NovaSolidStatusCheckCircle2 as CheckIcon, NovaSolidVoteRewardsVoteHeart as HeartIcon, NovaSolidInterfaceFeedbackInterfaceQuestionMark as QuestionIcon, NovaLineSelectionCursorsCursorArrowTarget as TargetIcon } from '@coorpacademy/nova-icons';
|
|
6
|
+
import ToolTip from '../tooltip';
|
|
8
7
|
import style from './style.css';
|
|
9
8
|
import propTypes from './prop-types';
|
|
10
9
|
const ICONS = {
|
|
@@ -31,50 +30,6 @@ const ReviewIcon = ({
|
|
|
31
30
|
});
|
|
32
31
|
};
|
|
33
32
|
|
|
34
|
-
const ToolTip = ({
|
|
35
|
-
tooltipText,
|
|
36
|
-
'aria-label': moreDetailsAriaLabel,
|
|
37
|
-
'data-testid': dataTestId,
|
|
38
|
-
closeToolTipInformationTextAriaLabel
|
|
39
|
-
}) => {
|
|
40
|
-
const [toolTipIsVisible, setToolTipIsVisible] = useState(false);
|
|
41
|
-
const handleKeyPress = useCallback(event => {
|
|
42
|
-
if (event.key === 'Enter') {
|
|
43
|
-
setToolTipIsVisible(!toolTipIsVisible);
|
|
44
|
-
} else if (event.key === 'Tab' || event.key === 'Escape') {
|
|
45
|
-
setToolTipIsVisible(false);
|
|
46
|
-
}
|
|
47
|
-
}, [setToolTipIsVisible, toolTipIsVisible]);
|
|
48
|
-
const handleMouseOver = useCallback(() => {
|
|
49
|
-
setToolTipIsVisible(true);
|
|
50
|
-
}, [setToolTipIsVisible]);
|
|
51
|
-
const handleMouseLeave = useCallback(() => {
|
|
52
|
-
setToolTipIsVisible(false);
|
|
53
|
-
}, [setToolTipIsVisible]);
|
|
54
|
-
return /*#__PURE__*/React.createElement("div", {
|
|
55
|
-
className: style.tooltipContainer,
|
|
56
|
-
onMouseLeave: handleMouseLeave,
|
|
57
|
-
onMouseOver: handleMouseOver
|
|
58
|
-
}, /*#__PURE__*/React.createElement("button", {
|
|
59
|
-
type: "button",
|
|
60
|
-
className: style.tooltipIconContainer,
|
|
61
|
-
"data-testid": dataTestId,
|
|
62
|
-
onKeyDown: handleKeyPress,
|
|
63
|
-
tabIndex: 0
|
|
64
|
-
}, /*#__PURE__*/React.createElement(InformationIcon, {
|
|
65
|
-
className: style.informationIcon,
|
|
66
|
-
width: 12,
|
|
67
|
-
height: 12,
|
|
68
|
-
"aria-label": moreDetailsAriaLabel
|
|
69
|
-
})), toolTipIsVisible ? /*#__PURE__*/React.createElement("div", {
|
|
70
|
-
className: style.toolTip,
|
|
71
|
-
"data-testid": "review-presentation-tooltip",
|
|
72
|
-
"aria-label": closeToolTipInformationTextAriaLabel
|
|
73
|
-
}, /*#__PURE__*/React.createElement("p", {
|
|
74
|
-
className: style.tooltipText
|
|
75
|
-
}, tooltipText)) : null);
|
|
76
|
-
};
|
|
77
|
-
|
|
78
33
|
const ReviewListItemWrapper = ({
|
|
79
34
|
iconKey,
|
|
80
35
|
label
|
|
@@ -89,10 +44,10 @@ const ReviewListItemWrapper = ({
|
|
|
89
44
|
}, /*#__PURE__*/React.createElement(ReviewIcon, {
|
|
90
45
|
icon: iconKey
|
|
91
46
|
}), " ", label.text), /*#__PURE__*/React.createElement(ToolTip, {
|
|
92
|
-
|
|
93
|
-
"aria-label": label.moreDetailsAriaLabel,
|
|
47
|
+
TooltipContent: label.tooltipText,
|
|
94
48
|
closeToolTipInformationTextAriaLabel: label.closeToolTipInformationTextAriaLabel,
|
|
95
|
-
"data-testid": `review-list-item-tooltip-button-${iconKey}
|
|
49
|
+
"data-testid": `review-list-item-tooltip-button-${iconKey}`,
|
|
50
|
+
"aria-label": label.moreDetailsAriaLabel
|
|
96
51
|
}));
|
|
97
52
|
};
|
|
98
53
|
|
|
@@ -135,23 +90,18 @@ const ReviewPresentation = props => {
|
|
|
135
90
|
}, labelsList)));
|
|
136
91
|
};
|
|
137
92
|
|
|
138
|
-
ToolTip.propTypes = process.env.NODE_ENV !== "production" ? {
|
|
139
|
-
tooltipText: PropTypes.string,
|
|
140
|
-
'aria-label': PropTypes.string,
|
|
141
|
-
'data-testid': PropTypes.string,
|
|
142
|
-
closeToolTipInformationTextAriaLabel: PropTypes.string
|
|
143
|
-
} : {};
|
|
144
93
|
ReviewIcon.propTypes = process.env.NODE_ENV !== "production" ? {
|
|
145
94
|
icon: PropTypes.string
|
|
146
95
|
} : {};
|
|
147
|
-
ReviewListItemWrapper.propTypes = process.env.NODE_ENV !== "production" ?
|
|
96
|
+
ReviewListItemWrapper.propTypes = process.env.NODE_ENV !== "production" ? {
|
|
148
97
|
iconKey: PropTypes.string,
|
|
149
98
|
label: PropTypes.shape({
|
|
150
|
-
tooltipText:
|
|
151
|
-
moreDetailsAriaLabel:
|
|
152
|
-
closeToolTipInformationTextAriaLabel:
|
|
99
|
+
tooltipText: ToolTip.propTypes.tooltipText,
|
|
100
|
+
moreDetailsAriaLabel: ToolTip.propTypes['aria-label'],
|
|
101
|
+
closeToolTipInformationTextAriaLabel: ToolTip.propTypes.closeToolTipInformationTextAriaLabel,
|
|
102
|
+
text: PropTypes.string
|
|
153
103
|
})
|
|
154
|
-
}
|
|
104
|
+
} : {};
|
|
155
105
|
ReviewPresentation.propTypes = process.env.NODE_ENV !== "production" ? propTypes : {};
|
|
156
106
|
export default ReviewPresentation;
|
|
157
107
|
//# sourceMappingURL=index.js.map
|
|
@@ -1 +1 @@
|
|
|
1
|
-
{"version":3,"file":"index.js","names":["React","
|
|
1
|
+
{"version":3,"file":"index.js","names":["React","PropTypes","getOr","map","NovaSolidStatusCheckCircle2","CheckIcon","NovaSolidVoteRewardsVoteHeart","HeartIcon","NovaSolidInterfaceFeedbackInterfaceQuestionMark","QuestionIcon","NovaLineSelectionCursorsCursorArrowTarget","TargetIcon","ToolTip","style","propTypes","ICONS","skills","questions","lifes","allright","ReviewIcon","icon","Icon","labelIcon","ReviewListItemWrapper","iconKey","label","reviewListItemWrapper","reviewListText","text","tooltipText","closeToolTipInformationTextAriaLabel","moreDetailsAriaLabel","ReviewPresentation","props","ariaLabel","reviewTitle","reviewText","labelsList","reviewWrapper","__html","reviewListWrapper","convert","cap","key","reviewList","string","shape"],"sources":["../../../src/atom/review-presentation/index.js"],"sourcesContent":["import React from 'react';\nimport PropTypes from 'prop-types';\nimport getOr from 'lodash/fp/getOr';\nimport map from 'lodash/fp/map';\nimport {\n NovaSolidStatusCheckCircle2 as CheckIcon,\n NovaSolidVoteRewardsVoteHeart as HeartIcon,\n NovaSolidInterfaceFeedbackInterfaceQuestionMark as QuestionIcon,\n NovaLineSelectionCursorsCursorArrowTarget as TargetIcon\n} from '@coorpacademy/nova-icons';\nimport ToolTip from '../tooltip';\nimport style from './style.css';\nimport propTypes from './prop-types';\n\nconst ICONS = {\n skills: TargetIcon,\n questions: QuestionIcon,\n lifes: HeartIcon,\n allright: CheckIcon\n};\n\nconst ReviewIcon = ({icon}) => {\n const Icon = getOr(null, icon, ICONS);\n\n /* istanbul ignore next */\n if (!Icon) {\n return <div className={style.labelIcon} />;\n }\n return <Icon className={style.labelIcon} />;\n};\n\nconst ReviewListItemWrapper = ({iconKey, label}) => {\n return (\n <div className={style.reviewListItemWrapper} data-tip data-for=\"reviewListItem\" tabIndex={0}>\n <div className={style.reviewListText}>\n <ReviewIcon icon={iconKey} /> {label.text}\n </div>\n <ToolTip\n TooltipContent={label.tooltipText}\n closeToolTipInformationTextAriaLabel={label.closeToolTipInformationTextAriaLabel}\n data-testid={`review-list-item-tooltip-button-${iconKey}`}\n aria-label={label.moreDetailsAriaLabel}\n />\n </div>\n );\n};\n\nconst ReviewPresentation = props => {\n const {'aria-label': ariaLabel, reviewTitle, reviewText, labelsList} = props;\n\n return (\n <div className={style.reviewWrapper} aria-label={ariaLabel}>\n <div\n className={style.reviewTitle}\n // eslint-disable-next-line react/no-danger\n dangerouslySetInnerHTML={{__html: reviewTitle}}\n />\n <div\n className={style.reviewText}\n // eslint-disable-next-line react/no-danger\n dangerouslySetInnerHTML={{__html: reviewText}}\n />\n <ul className={style.reviewListWrapper}>\n {map.convert({cap: false})((label, key) => {\n return (\n <li key={`step-${key}`} className={style.reviewList}>\n <ReviewListItemWrapper\n iconKey={key}\n label={label}\n tooltipText={label.tooltipText}\n aria-label={label.moreDetailsAriaLabel}\n />\n </li>\n );\n }, labelsList)}\n </ul>\n </div>\n );\n};\n\nReviewIcon.propTypes = {\n icon: PropTypes.string\n};\n\nReviewListItemWrapper.propTypes = {\n iconKey: PropTypes.string,\n label: PropTypes.shape({\n tooltipText: ToolTip.propTypes.tooltipText,\n moreDetailsAriaLabel: ToolTip.propTypes['aria-label'],\n closeToolTipInformationTextAriaLabel: ToolTip.propTypes.closeToolTipInformationTextAriaLabel,\n text: PropTypes.string\n })\n};\n\nReviewPresentation.propTypes = propTypes;\n\nexport default ReviewPresentation;\n"],"mappings":"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"}
|
|
@@ -3,12 +3,14 @@
|
|
|
3
3
|
@value mobile from breakpoints;
|
|
4
4
|
@value colors: "../../variables/colors.css";
|
|
5
5
|
@value xtraLightGrey from colors;
|
|
6
|
-
@value cm_blue_900 from colors;
|
|
7
6
|
@value cm_grey_75 from colors;
|
|
8
|
-
@value cm_grey_500 from colors;
|
|
9
|
-
@value cm_grey_700 from colors;
|
|
10
|
-
@value white from colors;
|
|
11
7
|
|
|
8
|
+
.reviewWrapper {
|
|
9
|
+
width: 100%;
|
|
10
|
+
border-radius: 16px;
|
|
11
|
+
background-color: xtraLightGrey;
|
|
12
|
+
padding-bottom: 40px;
|
|
13
|
+
}
|
|
12
14
|
|
|
13
15
|
.textBase {
|
|
14
16
|
font-family: "Gilroy";
|
|
@@ -17,13 +19,6 @@
|
|
|
17
19
|
user-select: none;
|
|
18
20
|
}
|
|
19
21
|
|
|
20
|
-
.reviewWrapper {
|
|
21
|
-
width: 100%;
|
|
22
|
-
border-radius: 16px;
|
|
23
|
-
background-color: xtraLightGrey;
|
|
24
|
-
padding-bottom: 40px;
|
|
25
|
-
}
|
|
26
|
-
|
|
27
22
|
.reviewTitle {
|
|
28
23
|
composes: textBase;
|
|
29
24
|
font-weight: 700;
|
|
@@ -77,61 +72,6 @@
|
|
|
77
72
|
width: 16px;
|
|
78
73
|
}
|
|
79
74
|
|
|
80
|
-
.informationIcon {
|
|
81
|
-
color: cm_grey_500;
|
|
82
|
-
}
|
|
83
|
-
|
|
84
|
-
.toolTip {
|
|
85
|
-
transition: opacity 0.8s;
|
|
86
|
-
position: absolute;
|
|
87
|
-
height: auto;
|
|
88
|
-
width: 200px;
|
|
89
|
-
border-radius: 7px;
|
|
90
|
-
background-color: cm_grey_700;
|
|
91
|
-
right: -81px;
|
|
92
|
-
bottom: 32px;
|
|
93
|
-
}
|
|
94
|
-
|
|
95
|
-
.toolTip::before {
|
|
96
|
-
content: '';
|
|
97
|
-
display: inline-block;
|
|
98
|
-
visibility: inherit;
|
|
99
|
-
opacity: inherit;
|
|
100
|
-
width: 15px;
|
|
101
|
-
height: 15px;
|
|
102
|
-
transform: rotate(-45deg);
|
|
103
|
-
background-color: cm_grey_700;
|
|
104
|
-
position: inherit;
|
|
105
|
-
bottom: -5px;
|
|
106
|
-
right: 40%;
|
|
107
|
-
border-radius: 2px;
|
|
108
|
-
}
|
|
109
|
-
|
|
110
|
-
.tooltipText {
|
|
111
|
-
composes: textBase;
|
|
112
|
-
font-weight: 500;
|
|
113
|
-
font-size: 14px;
|
|
114
|
-
display: inline-block;
|
|
115
|
-
border-radius: 3px;
|
|
116
|
-
word-wrap: break-word;
|
|
117
|
-
color: white;
|
|
118
|
-
padding: 8px 14px;
|
|
119
|
-
text-align: center;
|
|
120
|
-
}
|
|
121
|
-
|
|
122
|
-
.tooltipContainer {
|
|
123
|
-
overflow: visible;
|
|
124
|
-
position: relative;
|
|
125
|
-
}
|
|
126
|
-
|
|
127
|
-
.tooltipIconContainer {
|
|
128
|
-
display: flex;
|
|
129
|
-
justify-content: flex-end;
|
|
130
|
-
border: none;
|
|
131
|
-
background: cm_grey_75;
|
|
132
|
-
height: 25px;
|
|
133
|
-
}
|
|
134
|
-
|
|
135
75
|
@media tablet {
|
|
136
76
|
.reviewWrapper{
|
|
137
77
|
width: 100%;
|
|
@@ -142,4 +82,4 @@
|
|
|
142
82
|
.reviewWrapper{
|
|
143
83
|
width: 100%;
|
|
144
84
|
}
|
|
145
|
-
}
|
|
85
|
+
}
|
|
@@ -0,0 +1,22 @@
|
|
|
1
|
+
export function toggleStateOnKeyPress(state: any, setState: any, ref: any): (event: any) => void;
|
|
2
|
+
export default ToolTip;
|
|
3
|
+
declare function ToolTip({ anchorId, TooltipContent, "aria-label": ariaLabel, "data-testid": dataTestId, closeToolTipInformationTextAriaLabel, toolTipIsVisible: _toolTipIsVisible }: {
|
|
4
|
+
anchorId: any;
|
|
5
|
+
TooltipContent: any;
|
|
6
|
+
"aria-label": any;
|
|
7
|
+
"data-testid": any;
|
|
8
|
+
closeToolTipInformationTextAriaLabel: any;
|
|
9
|
+
toolTipIsVisible: any;
|
|
10
|
+
}): JSX.Element;
|
|
11
|
+
declare namespace ToolTip {
|
|
12
|
+
const propTypes: {
|
|
13
|
+
TooltipContent: PropTypes.Requireable<NonNullable<((...args: any[]) => any) | PropTypes.ReactNodeLike>>;
|
|
14
|
+
'data-testid': PropTypes.Requireable<string>;
|
|
15
|
+
'aria-label': PropTypes.Requireable<string>;
|
|
16
|
+
closeToolTipInformationTextAriaLabel: PropTypes.Validator<string>;
|
|
17
|
+
anchorId: PropTypes.Requireable<string>;
|
|
18
|
+
toolTipIsVisible: PropTypes.Requireable<boolean>;
|
|
19
|
+
};
|
|
20
|
+
}
|
|
21
|
+
import PropTypes from "prop-types";
|
|
22
|
+
//# sourceMappingURL=index.d.ts.map
|
|
@@ -0,0 +1 @@
|
|
|
1
|
+
{"version":3,"file":"index.d.ts","sourceRoot":"","sources":["../../../src/atom/tooltip/index.js"],"names":[],"mappings":"AA+CO,iGASN;;AAED;;;;;;;gBA2EC"}
|
|
@@ -0,0 +1,117 @@
|
|
|
1
|
+
import React, { isValidElement, useState, useCallback, useMemo } from 'react';
|
|
2
|
+
import PropTypes from 'prop-types';
|
|
3
|
+
import ReactTooltip from 'react-tooltip';
|
|
4
|
+
import isString from 'lodash/fp/isString';
|
|
5
|
+
import { NovaCompositionCoorpacademyInformationIcon as InformationIcon } from '@coorpacademy/nova-icons';
|
|
6
|
+
import style from './style.css';
|
|
7
|
+
|
|
8
|
+
const ToolTipWrapper = ({
|
|
9
|
+
toolTipIsVisible,
|
|
10
|
+
anchorId,
|
|
11
|
+
closeToolTipInformationTextAriaLabel,
|
|
12
|
+
content
|
|
13
|
+
}) => {
|
|
14
|
+
if (!toolTipIsVisible) return null;
|
|
15
|
+
|
|
16
|
+
if (anchorId) {
|
|
17
|
+
return /*#__PURE__*/React.createElement(ReactTooltip, {
|
|
18
|
+
id: anchorId,
|
|
19
|
+
className: style.toolTipReact,
|
|
20
|
+
"data-event-off": "click",
|
|
21
|
+
place: "left",
|
|
22
|
+
effect: "solid",
|
|
23
|
+
"aria-label": closeToolTipInformationTextAriaLabel
|
|
24
|
+
}, content);
|
|
25
|
+
} else {
|
|
26
|
+
return /*#__PURE__*/React.createElement("div", {
|
|
27
|
+
className: style.toolTip,
|
|
28
|
+
"data-testid": "tooltip",
|
|
29
|
+
"aria-label": closeToolTipInformationTextAriaLabel
|
|
30
|
+
}, content);
|
|
31
|
+
}
|
|
32
|
+
};
|
|
33
|
+
|
|
34
|
+
ToolTipWrapper.propTypes = process.env.NODE_ENV !== "production" ? {
|
|
35
|
+
toolTipIsVisible: PropTypes.bool,
|
|
36
|
+
anchorId: PropTypes.string,
|
|
37
|
+
closeToolTipInformationTextAriaLabel: PropTypes.string.isRequired,
|
|
38
|
+
content: PropTypes.node
|
|
39
|
+
} : {};
|
|
40
|
+
export const toggleStateOnKeyPress = (state, setState, ref) => event => {
|
|
41
|
+
if (event.key === 'Enter') {
|
|
42
|
+
if (ref) ref.current.focus();
|
|
43
|
+
event.stopPropagation();
|
|
44
|
+
event.preventDefault();
|
|
45
|
+
setState(!state);
|
|
46
|
+
} else if (event.key === 'Tab' || event.key === 'Escape') {
|
|
47
|
+
setState(false);
|
|
48
|
+
}
|
|
49
|
+
};
|
|
50
|
+
|
|
51
|
+
const ToolTip = ({
|
|
52
|
+
anchorId,
|
|
53
|
+
TooltipContent,
|
|
54
|
+
'aria-label': ariaLabel,
|
|
55
|
+
'data-testid': dataTestId,
|
|
56
|
+
closeToolTipInformationTextAriaLabel,
|
|
57
|
+
toolTipIsVisible: _toolTipIsVisible
|
|
58
|
+
}) => {
|
|
59
|
+
const isComponent = useMemo(() => !isString(TooltipContent) && /*#__PURE__*/isValidElement(TooltipContent()), [TooltipContent]);
|
|
60
|
+
const [toolTipIsVisible, setToolTipIsVisible] = useState(false);
|
|
61
|
+
const handleKeyPress = useCallback(event => {
|
|
62
|
+
toggleStateOnKeyPress(toolTipIsVisible, setToolTipIsVisible)(event);
|
|
63
|
+
}, [toolTipIsVisible]);
|
|
64
|
+
const handleMouseOver = useCallback(() => {
|
|
65
|
+
setToolTipIsVisible(true);
|
|
66
|
+
}, []);
|
|
67
|
+
const handleMouseLeave = useCallback(() => {
|
|
68
|
+
setToolTipIsVisible(false);
|
|
69
|
+
}, []);
|
|
70
|
+
const content = useMemo(() => {
|
|
71
|
+
return isComponent ? /*#__PURE__*/React.createElement(TooltipContent, null) : /*#__PURE__*/React.createElement("p", {
|
|
72
|
+
className: style.tooltipContent
|
|
73
|
+
}, TooltipContent);
|
|
74
|
+
}, [TooltipContent, isComponent]);
|
|
75
|
+
return anchorId ? /*#__PURE__*/React.createElement(ToolTipWrapper, {
|
|
76
|
+
toolTipIsVisible: _toolTipIsVisible,
|
|
77
|
+
anchorId: anchorId,
|
|
78
|
+
closeToolTipInformationTextAriaLabel: closeToolTipInformationTextAriaLabel,
|
|
79
|
+
content: content,
|
|
80
|
+
onMouseLeave: handleMouseLeave,
|
|
81
|
+
onMouseOver: handleMouseOver
|
|
82
|
+
}) : /*#__PURE__*/React.createElement("div", {
|
|
83
|
+
className: style.tooltipContainer,
|
|
84
|
+
onMouseLeave: handleMouseLeave,
|
|
85
|
+
onMouseOver: handleMouseOver
|
|
86
|
+
}, /*#__PURE__*/React.createElement("button", {
|
|
87
|
+
type: "button",
|
|
88
|
+
className: style.tooltipIconContainer,
|
|
89
|
+
"data-testid": dataTestId,
|
|
90
|
+
onKeyDown: handleKeyPress,
|
|
91
|
+
tabIndex: 0
|
|
92
|
+
}, /*#__PURE__*/React.createElement(InformationIcon, {
|
|
93
|
+
className: style.informationIcon,
|
|
94
|
+
width: 12,
|
|
95
|
+
height: 12,
|
|
96
|
+
"aria-label": ariaLabel
|
|
97
|
+
})), /*#__PURE__*/React.createElement(ToolTipWrapper, {
|
|
98
|
+
toolTipIsVisible: toolTipIsVisible,
|
|
99
|
+
anchorId: anchorId,
|
|
100
|
+
closeToolTipInformationTextAriaLabel: closeToolTipInformationTextAriaLabel,
|
|
101
|
+
content: content
|
|
102
|
+
}));
|
|
103
|
+
};
|
|
104
|
+
|
|
105
|
+
ToolTip.propTypes = process.env.NODE_ENV !== "production" ? {
|
|
106
|
+
TooltipContent: PropTypes.oneOfType([PropTypes.func, PropTypes.node, PropTypes.string]),
|
|
107
|
+
'data-testid': PropTypes.string,
|
|
108
|
+
'aria-label': PropTypes.string,
|
|
109
|
+
closeToolTipInformationTextAriaLabel: PropTypes.string.isRequired,
|
|
110
|
+
// ---------- externalHandling --------------
|
|
111
|
+
// if passed down, React Tooltip is used instead, due to limitations on
|
|
112
|
+
// parents overflow hidden controls
|
|
113
|
+
anchorId: PropTypes.string,
|
|
114
|
+
toolTipIsVisible: PropTypes.bool
|
|
115
|
+
} : {};
|
|
116
|
+
export default ToolTip;
|
|
117
|
+
//# sourceMappingURL=index.js.map
|
|
@@ -0,0 +1 @@
|
|
|
1
|
+
{"version":3,"file":"index.js","names":["React","isValidElement","useState","useCallback","useMemo","PropTypes","ReactTooltip","isString","NovaCompositionCoorpacademyInformationIcon","InformationIcon","style","ToolTipWrapper","toolTipIsVisible","anchorId","closeToolTipInformationTextAriaLabel","content","toolTipReact","toolTip","propTypes","bool","string","isRequired","node","toggleStateOnKeyPress","state","setState","ref","event","key","current","focus","stopPropagation","preventDefault","ToolTip","TooltipContent","ariaLabel","dataTestId","_toolTipIsVisible","isComponent","setToolTipIsVisible","handleKeyPress","handleMouseOver","handleMouseLeave","tooltipContent","tooltipContainer","tooltipIconContainer","informationIcon","oneOfType","func"],"sources":["../../../src/atom/tooltip/index.js"],"sourcesContent":["import React, {isValidElement, useState, useCallback, useMemo} from 'react';\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 ToolTipWrapper = ({\n toolTipIsVisible,\n anchorId,\n closeToolTipInformationTextAriaLabel,\n content\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 >\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};\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}) => {\n const isComponent = useMemo(\n () => !isString(TooltipContent) && isValidElement(TooltipContent()),\n [TooltipContent]\n );\n\n const [toolTipIsVisible, setToolTipIsVisible] = useState(false);\n\n const handleKeyPress = useCallback(\n event => {\n toggleStateOnKeyPress(toolTipIsVisible, setToolTipIsVisible)(event);\n },\n [toolTipIsVisible]\n );\n\n const handleMouseOver = useCallback(() => {\n setToolTipIsVisible(true);\n }, []);\n\n const handleMouseLeave = useCallback(() => {\n setToolTipIsVisible(false);\n }, []);\n\n const content = useMemo(() => {\n return isComponent ? (\n <TooltipContent />\n ) : (\n <p className={style.tooltipContent}>{TooltipContent}</p>\n );\n }, [TooltipContent, 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 />\n ) : (\n <div\n className={style.tooltipContainer}\n onMouseLeave={handleMouseLeave}\n onMouseOver={handleMouseOver}\n >\n <button\n type=\"button\"\n className={style.tooltipIconContainer}\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 />\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 // ---------- externalHandling --------------\n // 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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"}
|
|
@@ -0,0 +1,96 @@
|
|
|
1
|
+
@value colors: "../../variables/colors.css";
|
|
2
|
+
@value cm_blue_900 from colors;
|
|
3
|
+
@value cm_grey_75 from colors;
|
|
4
|
+
@value cm_grey_500 from colors;
|
|
5
|
+
@value cm_grey_700 from colors;
|
|
6
|
+
|
|
7
|
+
.textBase {
|
|
8
|
+
font-family: "Gilroy";
|
|
9
|
+
font-style: normal;
|
|
10
|
+
color: cm_blue_900;
|
|
11
|
+
user-select: none;
|
|
12
|
+
}
|
|
13
|
+
|
|
14
|
+
.tooltipContainer {
|
|
15
|
+
overflow: visible;
|
|
16
|
+
position: relative;
|
|
17
|
+
z-index: 10;
|
|
18
|
+
display: flex;
|
|
19
|
+
justify-content: center;
|
|
20
|
+
justify-self: center;
|
|
21
|
+
}
|
|
22
|
+
|
|
23
|
+
.tooltipIconContainer {
|
|
24
|
+
display: flex;
|
|
25
|
+
justify-content: flex-end;
|
|
26
|
+
border: none;
|
|
27
|
+
background: cm_grey_75;
|
|
28
|
+
height: 25px;
|
|
29
|
+
align-items: center;
|
|
30
|
+
}
|
|
31
|
+
|
|
32
|
+
.toolTip {
|
|
33
|
+
transition: opacity 0.8s;
|
|
34
|
+
position: absolute;
|
|
35
|
+
border-radius: 7px;
|
|
36
|
+
background-color: cm_grey_700;
|
|
37
|
+
right: -75px;
|
|
38
|
+
bottom: 32px;
|
|
39
|
+
height: auto;
|
|
40
|
+
width: 200px;
|
|
41
|
+
}
|
|
42
|
+
|
|
43
|
+
.toolTip::before {
|
|
44
|
+
content: '';
|
|
45
|
+
display: inline-block;
|
|
46
|
+
visibility: inherit;
|
|
47
|
+
opacity: inherit;
|
|
48
|
+
width: 15px;
|
|
49
|
+
height: 15px;
|
|
50
|
+
transform: rotate(-45deg);
|
|
51
|
+
background-color: cm_grey_700;
|
|
52
|
+
position: inherit;
|
|
53
|
+
border-radius: 2px;
|
|
54
|
+
bottom: -5px;
|
|
55
|
+
right: 40%;
|
|
56
|
+
}
|
|
57
|
+
|
|
58
|
+
.tooltipContent {
|
|
59
|
+
composes: textBase;
|
|
60
|
+
font-weight: 500;
|
|
61
|
+
font-size: 14px;
|
|
62
|
+
display: inline-block;
|
|
63
|
+
border-radius: 3px;
|
|
64
|
+
word-wrap: break-word;
|
|
65
|
+
color: white;
|
|
66
|
+
padding: 8px 14px;
|
|
67
|
+
text-align: center;
|
|
68
|
+
}
|
|
69
|
+
|
|
70
|
+
.informationIcon {
|
|
71
|
+
color: cm_grey_500;
|
|
72
|
+
}
|
|
73
|
+
|
|
74
|
+
/* ----------------------- ReactToolTip exclusive classes ------------------------- */
|
|
75
|
+
.toolTipReact {
|
|
76
|
+
pointer-events: all !important;
|
|
77
|
+
background-color: cm_grey_700;
|
|
78
|
+
border-radius: 7px !important;
|
|
79
|
+
visibility: visible !important;
|
|
80
|
+
opacity: 1 !important;
|
|
81
|
+
left: 5px;
|
|
82
|
+
}
|
|
83
|
+
|
|
84
|
+
/* for keyboard navigation, the position can't be obtained from the mouse */
|
|
85
|
+
[class*="__react_component_tooltip"]:not(.toolTipReact) {
|
|
86
|
+
border-radius: 7px !important;
|
|
87
|
+
top: 97px!important;
|
|
88
|
+
left: 628px!important;
|
|
89
|
+
visibility: visible !important;
|
|
90
|
+
opacity: 1!important;
|
|
91
|
+
}
|
|
92
|
+
|
|
93
|
+
/* same reason, arrow can't be placed effectively */
|
|
94
|
+
[class*="__react_component_tooltip"]:not(.toolTipReact)::after {
|
|
95
|
+
content: none !important;
|
|
96
|
+
}
|
|
@@ -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":";AA6EA,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
|
|
18
|
+
import Provider 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,12 @@ 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
|
-
} = model;
|
|
71
|
-
|
|
70
|
+
} = model; // const translate = GetTranslateFromContext(legacyContext);
|
|
71
|
+
|
|
72
|
+
const translate = legacyContext.translate;
|
|
72
73
|
|
|
73
74
|
switch (type) {
|
|
74
75
|
case 'qcmDrag':
|
|
@@ -111,6 +112,9 @@ Switch.propTypes = process.env.NODE_ENV !== "production" ? {
|
|
|
111
112
|
model: propTypes.model,
|
|
112
113
|
help: propTypes.help
|
|
113
114
|
} : {};
|
|
115
|
+
Switch.contextTypes = {
|
|
116
|
+
translate: Provider.childContextTypes.translate
|
|
117
|
+
};
|
|
114
118
|
|
|
115
119
|
const Answer = props => {
|
|
116
120
|
const {
|
|
@@ -130,5 +134,8 @@ const Answer = props => {
|
|
|
130
134
|
};
|
|
131
135
|
|
|
132
136
|
Answer.propTypes = process.env.NODE_ENV !== "production" ? propTypes : {};
|
|
137
|
+
Answer.contextTypes = {
|
|
138
|
+
translate: Provider.childContextTypes.translate
|
|
139
|
+
};
|
|
133
140
|
export default Answer;
|
|
134
141
|
//# sourceMappingURL=index.js.map
|