@coorpacademy/components 11.9.0 → 11.9.2-alpha.1

package/lib/atom/review-presentation/index.js

@@ -3,7 +3,7 @@
 exports.__esModule = true;
 exports.default = void 0;
 
-var _react = _interopRequireWildcard(require("react"));
+var _react = _interopRequireDefault(require("react"));
 
 var _propTypes = _interopRequireDefault(require("prop-types"));
 
@@ -13,18 +13,14 @@ var _map = _interopRequireDefault(require("lodash/fp/map"));
 
 var _novaIcons = require("@coorpacademy/nova-icons");
 
+var _tooltip = _interopRequireDefault(require("../tooltip"));
+
 var _style = _interopRequireDefault(require("./style.css"));
 
 var _propTypes2 = _interopRequireDefault(require("./prop-types"));
 
 function _interopRequireDefault(obj) { return obj && obj.__esModule ? obj : { default: obj }; }
 
-function _getRequireWildcardCache(nodeInterop) { if (typeof WeakMap !== "function") return null; var cacheBabelInterop = new WeakMap(); var cacheNodeInterop = new WeakMap(); return (_getRequireWildcardCache = function (nodeInterop) { return nodeInterop ? cacheNodeInterop : cacheBabelInterop; })(nodeInterop); }
-
-function _interopRequireWildcard(obj, nodeInterop) { if (!nodeInterop && obj && obj.__esModule) { return obj; } if (obj === null || typeof obj !== "object" && typeof obj !== "function") { return { default: obj }; } var cache = _getRequireWildcardCache(nodeInterop); if (cache && cache.has(obj)) { return cache.get(obj); } var newObj = {}; var hasPropertyDescriptor = Object.defineProperty && Object.getOwnPropertyDescriptor; for (var key in obj) { if (key !== "default" && Object.prototype.hasOwnProperty.call(obj, key)) { var desc = hasPropertyDescriptor ? Object.getOwnPropertyDescriptor(obj, key) : null; if (desc && (desc.get || desc.set)) { Object.defineProperty(newObj, key, desc); } else { newObj[key] = obj[key]; } } } newObj.default = obj; if (cache) { cache.set(obj, newObj); } return newObj; }
-
-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); }
-
 const ICONS = {
   skills: _novaIcons.NovaLineSelectionCursorsCursorArrowTarget,
   questions: _novaIcons.NovaSolidInterfaceFeedbackInterfaceQuestionMark,
@@ -49,50 +45,6 @@ const ReviewIcon = ({
   });
 };
 
-const ToolTip = ({
-  tooltipText,
-  'aria-label': moreDetailsAriaLabel,
-  'data-testid': dataTestId,
-  closeToolTipInformationTextAriaLabel
-}) => {
-  const [toolTipIsVisible, setToolTipIsVisible] = (0, _react.useState)(false);
-  const handleKeyPress = (0, _react.useCallback)(event => {
-    if (event.key === 'Enter') {
-      setToolTipIsVisible(!toolTipIsVisible);
-    } else if (event.key === 'Tab' || event.key === 'Escape') {
-      setToolTipIsVisible(false);
-    }
-  }, [setToolTipIsVisible, toolTipIsVisible]);
-  const handleMouseOver = (0, _react.useCallback)(() => {
-    setToolTipIsVisible(true);
-  }, [setToolTipIsVisible]);
-  const handleMouseLeave = (0, _react.useCallback)(() => {
-    setToolTipIsVisible(false);
-  }, [setToolTipIsVisible]);
-  return /*#__PURE__*/_react.default.createElement("div", {
-    className: _style.default.tooltipContainer,
-    onMouseLeave: handleMouseLeave,
-    onMouseOver: handleMouseOver
-  }, /*#__PURE__*/_react.default.createElement("button", {
-    type: "button",
-    className: _style.default.tooltipIconContainer,
-    "data-testid": dataTestId,
-    onKeyDown: handleKeyPress,
-    tabIndex: 0
-  }, /*#__PURE__*/_react.default.createElement(_novaIcons.NovaCompositionCoorpacademyInformationIcon, {
-    className: _style.default.informationIcon,
-    width: 12,
-    height: 12,
-    "aria-label": moreDetailsAriaLabel
-  })), toolTipIsVisible ? /*#__PURE__*/_react.default.createElement("div", {
-    className: _style.default.toolTip,
-    "data-testid": "review-presentation-tooltip",
-    "aria-label": closeToolTipInformationTextAriaLabel
-  }, /*#__PURE__*/_react.default.createElement("p", {
-    className: _style.default.tooltipText
-  }, tooltipText)) : null);
-};
-
 const ReviewListItemWrapper = ({
   iconKey,
   label
@@ -106,11 +58,11 @@ const ReviewListItemWrapper = ({
     className: _style.default.reviewListText
   }, /*#__PURE__*/_react.default.createElement(ReviewIcon, {
     icon: iconKey
-  }), " ", label.text), /*#__PURE__*/_react.default.createElement(ToolTip, {
-    tooltipText: label.tooltipText,
-    "aria-label": label.moreDetailsAriaLabel,
+  }), " ", label.text), /*#__PURE__*/_react.default.createElement(_tooltip.default, {
+    TooltipContent: label.tooltipText,
     closeToolTipInformationTextAriaLabel: label.closeToolTipInformationTextAriaLabel,
-    "data-testid": `review-list-item-tooltip-button-${iconKey}`
+    "data-testid": `review-list-item-tooltip-button-${iconKey}`,
+    "aria-label": label.moreDetailsAriaLabel
   }));
 };
 
@@ -153,23 +105,18 @@ const ReviewPresentation = props => {
   }, labelsList)));
 };
 
-ToolTip.propTypes = process.env.NODE_ENV !== "production" ? {
-  tooltipText: _propTypes.default.string,
-  'aria-label': _propTypes.default.string,
-  'data-testid': _propTypes.default.string,
-  closeToolTipInformationTextAriaLabel: _propTypes.default.string
-} : {};
 ReviewIcon.propTypes = process.env.NODE_ENV !== "production" ? {
   icon: _propTypes.default.string
 } : {};
-ReviewListItemWrapper.propTypes = process.env.NODE_ENV !== "production" ? _extends({}, ToolTip.propTypes, {
+ReviewListItemWrapper.propTypes = process.env.NODE_ENV !== "production" ? {
   iconKey: _propTypes.default.string,
   label: _propTypes.default.shape({
-    tooltipText: _propTypes.default.string,
-    moreDetailsAriaLabel: _propTypes.default.string,
-    closeToolTipInformationTextAriaLabel: _propTypes.default.string
+    tooltipText: _tooltip.default.propTypes.tooltipText,
+    moreDetailsAriaLabel: _tooltip.default.propTypes['aria-label'],
+    closeToolTipInformationTextAriaLabel: _tooltip.default.propTypes.closeToolTipInformationTextAriaLabel,
+    text: _propTypes.default.string
   })
-}) : {};
+} : {};
 ReviewPresentation.propTypes = process.env.NODE_ENV !== "production" ? _propTypes2.default : {};
 var _default = ReviewPresentation;
 exports.default = _default;

package/lib/atom/review-presentation/index.js.map

@@ -1 +1 @@
-{"version":3,"file":"index.js","names":["ICONS","skills","TargetIcon","questions","QuestionIcon","lifes","HeartIcon","allright","CheckIcon","ReviewIcon","icon","Icon","getOr","style","labelIcon","ToolTip","tooltipText","moreDetailsAriaLabel","dataTestId","closeToolTipInformationTextAriaLabel","toolTipIsVisible","setToolTipIsVisible","useState","handleKeyPress","useCallback","event","key","handleMouseOver","handleMouseLeave","tooltipContainer","tooltipIconContainer","informationIcon","toolTip","ReviewListItemWrapper","iconKey","label","reviewListItemWrapper","reviewListText","text","ReviewPresentation","props","ariaLabel","reviewTitle","reviewText","labelsList","reviewWrapper","__html","reviewListWrapper","map","convert","cap","reviewList","propTypes","PropTypes","string","shape"],"sources":["../../../src/atom/review-presentation/index.js"],"sourcesContent":["import React, {useState, useCallback} 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  NovaCompositionCoorpacademyInformationIcon as InformationIcon,\n  NovaSolidInterfaceFeedbackInterfaceQuestionMark as QuestionIcon,\n  NovaLineSelectionCursorsCursorArrowTarget as TargetIcon\n} from '@coorpacademy/nova-icons';\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 ToolTip = ({\n  tooltipText,\n  'aria-label': moreDetailsAriaLabel,\n  'data-testid': dataTestId,\n  closeToolTipInformationTextAriaLabel\n}) => {\n  const [toolTipIsVisible, setToolTipIsVisible] = useState(false);\n  const handleKeyPress = useCallback(\n    event => {\n      if (event.key === 'Enter') {\n        setToolTipIsVisible(!toolTipIsVisible);\n      } else if (event.key === 'Tab' || event.key === 'Escape') {\n        setToolTipIsVisible(false);\n      }\n    },\n    [setToolTipIsVisible, toolTipIsVisible]\n  );\n  const handleMouseOver = useCallback(() => {\n    setToolTipIsVisible(true);\n  }, [setToolTipIsVisible]);\n\n  const handleMouseLeave = useCallback(() => {\n    setToolTipIsVisible(false);\n  }, [setToolTipIsVisible]);\n\n  return (\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={moreDetailsAriaLabel}\n        />\n      </button>\n      {toolTipIsVisible ? (\n        <div\n          className={style.toolTip}\n          data-testid=\"review-presentation-tooltip\"\n          aria-label={closeToolTipInformationTextAriaLabel}\n        >\n          <p className={style.tooltipText}>{tooltipText}</p>\n        </div>\n      ) : null}\n    </div>\n  );\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        tooltipText={label.tooltipText}\n        aria-label={label.moreDetailsAriaLabel}\n        closeToolTipInformationTextAriaLabel={label.closeToolTipInformationTextAriaLabel}\n        data-testid={`review-list-item-tooltip-button-${iconKey}`}\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\nToolTip.propTypes = {\n  tooltipText: PropTypes.string,\n  'aria-label': PropTypes.string,\n  'data-testid': PropTypes.string,\n  closeToolTipInformationTextAriaLabel: PropTypes.string\n};\n\nReviewIcon.propTypes = {\n  icon: PropTypes.string\n};\n\nReviewListItemWrapper.propTypes = {\n  ...ToolTip.propTypes,\n  iconKey: PropTypes.string,\n  label: PropTypes.shape({\n    tooltipText: PropTypes.string,\n    moreDetailsAriaLabel: PropTypes.string,\n    closeToolTipInformationTextAriaLabel: PropTypes.string\n  })\n};\n\nReviewPresentation.propTypes = propTypes;\n\nexport default ReviewPresentation;\n"],"mappings":";;;;;AAAA;;AACA;;AACA;;AACA;;AACA;;AAOA;;AACA;;;;;;;;;;AAEA,MAAMA,KAAK,GAAG;EACZC,MAAM,EAAEC,oDADI;EAEZC,SAAS,EAAEC,0DAFC;EAGZC,KAAK,EAAEC,wCAHK;EAIZC,QAAQ,EAAEC;AAJE,CAAd;;AAOA,MAAMC,UAAU,GAAG,CAAC;EAACC;AAAD,CAAD,KAAY;EAC7B,MAAMC,IAAI,GAAG,IAAAC,cAAA,EAAM,IAAN,EAAYF,IAAZ,EAAkBV,KAAlB,CAAb;EAEA;;EACA,IAAI,CAACW,IAAL,EAAW;IACT,oBAAO;MAAK,SAAS,EAAEE,cAAA,CAAMC;IAAtB,EAAP;EACD;;EACD,oBAAO,6BAAC,IAAD;IAAM,SAAS,EAAED,cAAA,CAAMC;EAAvB,EAAP;AACD,CARD;;AAUA,MAAMC,OAAO,GAAG,CAAC;EACfC,WADe;EAEf,cAAcC,oBAFC;EAGf,eAAeC,UAHA;EAIfC;AAJe,CAAD,KAKV;EACJ,MAAM,CAACC,gBAAD,EAAmBC,mBAAnB,IAA0C,IAAAC,eAAA,EAAS,KAAT,CAAhD;EACA,MAAMC,cAAc,GAAG,IAAAC,kBAAA,EACrBC,KAAK,IAAI;IACP,IAAIA,KAAK,CAACC,GAAN,KAAc,OAAlB,EAA2B;MACzBL,mBAAmB,CAAC,CAACD,gBAAF,CAAnB;IACD,CAFD,MAEO,IAAIK,KAAK,CAACC,GAAN,KAAc,KAAd,IAAuBD,KAAK,CAACC,GAAN,KAAc,QAAzC,EAAmD;MACxDL,mBAAmB,CAAC,KAAD,CAAnB;IACD;EACF,CAPoB,EAQrB,CAACA,mBAAD,EAAsBD,gBAAtB,CARqB,CAAvB;EAUA,MAAMO,eAAe,GAAG,IAAAH,kBAAA,EAAY,MAAM;IACxCH,mBAAmB,CAAC,IAAD,CAAnB;EACD,CAFuB,EAErB,CAACA,mBAAD,CAFqB,CAAxB;EAIA,MAAMO,gBAAgB,GAAG,IAAAJ,kBAAA,EAAY,MAAM;IACzCH,mBAAmB,CAAC,KAAD,CAAnB;EACD,CAFwB,EAEtB,CAACA,mBAAD,CAFsB,CAAzB;EAIA,oBACE;IACE,SAAS,EAAER,cAAA,CAAMgB,gBADnB;IAEE,YAAY,EAAED,gBAFhB;IAGE,WAAW,EAAED;EAHf,gBAKE;IACE,IAAI,EAAC,QADP;IAEE,SAAS,EAAEd,cAAA,CAAMiB,oBAFnB;IAGE,eAAaZ,UAHf;IAIE,SAAS,EAAEK,cAJb;IAKE,QAAQ,EAAE;EALZ,gBAOE,6BAAC,qDAAD;IACE,SAAS,EAAEV,cAAA,CAAMkB,eADnB;IAEE,KAAK,EAAE,EAFT;IAGE,MAAM,EAAE,EAHV;IAIE,cAAYd;EAJd,EAPF,CALF,EAmBGG,gBAAgB,gBACf;IACE,SAAS,EAAEP,cAAA,CAAMmB,OADnB;IAEE,eAAY,6BAFd;IAGE,cAAYb;EAHd,gBAKE;IAAG,SAAS,EAAEN,cAAA,CAAMG;EAApB,GAAkCA,WAAlC,CALF,CADe,GAQb,IA3BN,CADF;AA+BD,CAxDD;;AA0DA,MAAMiB,qBAAqB,GAAG,CAAC;EAACC,OAAD;EAAUC;AAAV,CAAD,KAAsB;EAClD,oBACE;IAAK,SAAS,EAAEtB,cAAA,CAAMuB,qBAAtB;IAA6C,gBAA7C;IAAsD,YAAS,gBAA/D;IAAgF,QAAQ,EAAE;EAA1F,gBACE;IAAK,SAAS,EAAEvB,cAAA,CAAMwB;EAAtB,gBACE,6BAAC,UAAD;IAAY,IAAI,EAAEH;EAAlB,EADF,OACiCC,KAAK,CAACG,IADvC,CADF,eAIE,6BAAC,OAAD;IACE,WAAW,EAAEH,KAAK,CAACnB,WADrB;IAEE,cAAYmB,KAAK,CAAClB,oBAFpB;IAGE,oCAAoC,EAAEkB,KAAK,CAAChB,oCAH9C;IAIE,eAAc,mCAAkCe,OAAQ;EAJ1D,EAJF,CADF;AAaD,CAdD;;AAgBA,MAAMK,kBAAkB,GAAGC,KAAK,IAAI;EAClC,MAAM;IAAC,cAAcC,SAAf;IAA0BC,WAA1B;IAAuCC,UAAvC;IAAmDC;EAAnD,IAAiEJ,KAAvE;EAEA,oBACE;IAAK,SAAS,EAAE3B,cAAA,CAAMgC,aAAtB;IAAqC,cAAYJ;EAAjD,gBACE;IACE,SAAS,EAAE5B,cAAA,CAAM6B,WADnB,CAEE;IAFF;IAGE,uBAAuB,EAAE;MAACI,MAAM,EAAEJ;IAAT;EAH3B,EADF,eAME;IACE,SAAS,EAAE7B,cAAA,CAAM8B,UADnB,CAEE;IAFF;IAGE,uBAAuB,EAAE;MAACG,MAAM,EAAEH;IAAT;EAH3B,EANF,eAWE;IAAI,SAAS,EAAE9B,cAAA,CAAMkC;EAArB,GACGC,YAAA,CAAIC,OAAJ,CAAY;IAACC,GAAG,EAAE;EAAN,CAAZ,EAA0B,CAACf,KAAD,EAAQT,GAAR,KAAgB;IACzC,oBACE;MAAI,GAAG,EAAG,QAAOA,GAAI,EAArB;MAAwB,SAAS,EAAEb,cAAA,CAAMsC;IAAzC,gBACE,6BAAC,qBAAD;MACE,OAAO,EAAEzB,GADX;MAEE,KAAK,EAAES,KAFT;MAGE,WAAW,EAAEA,KAAK,CAACnB,WAHrB;MAIE,cAAYmB,KAAK,CAAClB;IAJpB,EADF,CADF;EAUD,CAXA,EAWE2B,UAXF,CADH,CAXF,CADF;AA4BD,CA/BD;;AAiCA7B,OAAO,CAACqC,SAAR,2CAAoB;EAClBpC,WAAW,EAAEqC,kBAAA,CAAUC,MADL;EAElB,cAAcD,kBAAA,CAAUC,MAFN;EAGlB,eAAeD,kBAAA,CAAUC,MAHP;EAIlBnC,oCAAoC,EAAEkC,kBAAA,CAAUC;AAJ9B,CAApB;AAOA7C,UAAU,CAAC2C,SAAX,2CAAuB;EACrB1C,IAAI,EAAE2C,kBAAA,CAAUC;AADK,CAAvB;AAIArB,qBAAqB,CAACmB,SAAtB,wDACKrC,OAAO,CAACqC,SADb;EAEElB,OAAO,EAAEmB,kBAAA,CAAUC,MAFrB;EAGEnB,KAAK,EAAEkB,kBAAA,CAAUE,KAAV,CAAgB;IACrBvC,WAAW,EAAEqC,kBAAA,CAAUC,MADF;IAErBrC,oBAAoB,EAAEoC,kBAAA,CAAUC,MAFX;IAGrBnC,oCAAoC,EAAEkC,kBAAA,CAAUC;EAH3B,CAAhB;AAHT;AAUAf,kBAAkB,CAACa,SAAnB,2CAA+BA,mBAA/B;eAEeb,kB"}
+{"version":3,"file":"index.js","names":["ICONS","skills","TargetIcon","questions","QuestionIcon","lifes","HeartIcon","allright","CheckIcon","ReviewIcon","icon","Icon","getOr","style","labelIcon","ReviewListItemWrapper","iconKey","label","reviewListItemWrapper","reviewListText","text","tooltipText","closeToolTipInformationTextAriaLabel","moreDetailsAriaLabel","ReviewPresentation","props","ariaLabel","reviewTitle","reviewText","labelsList","reviewWrapper","__html","reviewListWrapper","map","convert","cap","key","reviewList","propTypes","PropTypes","string","shape","ToolTip"],"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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"}

package/lib/atom/review-presentation/index.native.d.ts.map

@@ -1 +1 @@
-{"version":3,"file":"index.native.d.ts","sourceRoot":"","sources":["../../../src/atom/review-presentation/index.native.tsx"],"names":[],"mappings":";AAcA,OAAO,EAAC,eAAe,EAAW,MAAM,cAAc,CAAC;AAoGvD,QAAA,MAAM,UAAU,UAAW,eAAe,uBA4CzC,CAAC;AAEF,eAAe,UAAU,CAAC"}
+{"version":3,"file":"index.native.d.ts","sourceRoot":"","sources":["../../../src/atom/review-presentation/index.native.tsx"],"names":[],"mappings":";AAcA,OAAO,EAAC,eAAe,EAAW,MAAM,cAAc,CAAC;AAwGvD,QAAA,MAAM,UAAU,UAAW,eAAe,uBA+CzC,CAAC;AAEF,eAAe,UAAU,CAAC"}

package/lib/atom/review-presentation/index.native.js

@@ -39,6 +39,9 @@ const createStyleSheet = (brandTheme, theme) => _reactNative.StyleSheet.create({
     color: theme.colors.text.primary,
     marginBottom: 32
   },
+  textContainer: {
+    marginTop: 8
+  },
   text: {
     fontSize: theme.fontSize.large,
     color: theme.colors.text.primary,
@@ -141,9 +144,11 @@ const Onboarding = props => {
     style: styleSheet.container
   }, /*#__PURE__*/_react.default.createElement(_index2.default, {
     style: styleSheet.title
-  }, translations.appReview.presentation.title), /*#__PURE__*/_react.default.createElement(_index2.default, {
+  }, translations.appReview.presentation.title), /*#__PURE__*/_react.default.createElement(_reactNative.View, {
+    style: styleSheet.textContainer
+  }, /*#__PURE__*/_react.default.createElement(_index2.default, {
     style: styleSheet.text
-  }, translations.appReview.presentation.text), /*#__PURE__*/_react.default.createElement(_reactNative.View, {
+  }, translations.appReview.presentation.text)), /*#__PURE__*/_react.default.createElement(_reactNative.View, {
     style: styleSheet.tips
   }, /*#__PURE__*/_react.default.createElement(Tip, {
     Icon: _novaIcons.NovaLineSelectionCursorsCursorArrowTarget,

package/lib/atom/review-presentation/index.native.js.map

@@ -1 +1 @@
-{"version":3,"file":"index.native.js","names":["createStyleSheet","brandTheme","theme","StyleSheet","create","container","backgroundColor","colors","white","justifyContent","flex","padding","paddingTop","paddingBottom","title","height","width","fontSize","xxlarge","fontWeight","bold","lineHeight","color","text","primary","marginBottom","large","opacity","tips","marginTop","tip","flexDirection","overflow","alignItems","borderRadius","gray","extra","spacing","micro","tipText","icon","margin","button","cta","buttonText","alignSelf","Tip","props","templateContext","useTemplateContext","styleSheet","setStylesheet","useState","Icon","useEffect","_stylesheet","Onboarding","translations","onPress","appReview","presentation","TargetIcon","labelList","skills","QuestionMarkIcon","questions","HeartIcon","lifes","CheckCircle2Icon","allright","ok"],"sources":["../../../src/atom/review-presentation/index.native.tsx"],"sourcesContent":["import React, {useState, useEffect} from 'react';\nimport {View, StyleSheet, Text, ViewStyle, TextStyle} from 'react-native';\nimport {\n  NovaLineSelectionCursorsCursorArrowTarget as TargetIcon,\n  NovaSolidInterfaceFeedbackInterfaceQuestionMark as QuestionMarkIcon,\n  NovaSolidStatusCheckCircle2 as CheckCircle2Icon,\n  NovaCompositionCoorpacademyVoteHeartOutline as HeartIcon\n} from '@coorpacademy/nova-icons';\n\nimport {useTemplateContext} from '../../template/app-review/template-context';\nimport {Theme} from '../../variables/theme.native';\nimport Touchable from '../../hoc/touchable/index.native';\nimport Html from '../html/index.native';\nimport {Brand} from '../../variables/brand.native';\nimport {OnboardingProps, TipProps} from './prop-types';\n\ntype StyleSheetType = {\n  container: ViewStyle;\n  title: TextStyle;\n  text: TextStyle;\n  tips: ViewStyle;\n  tip: ViewStyle;\n  tipText: TextStyle;\n  icon: ViewStyle;\n  button: ViewStyle;\n  buttonText: TextStyle;\n};\n\nconst createStyleSheet = (brandTheme: Brand, theme: Theme): StyleSheetType =>\n  StyleSheet.create({\n    container: {\n      backgroundColor: theme.colors.white,\n      justifyContent: 'space-between',\n      flex: 1,\n      padding: 20,\n      paddingTop: 20,\n      paddingBottom: 100\n    },\n    title: {\n      height: 72,\n      width: 268,\n      fontSize: theme.fontSize.xxlarge,\n      fontWeight: theme.fontWeight.bold,\n      lineHeight: 36,\n      color: theme.colors.text.primary,\n      marginBottom: 32\n    },\n    text: {\n      fontSize: theme.fontSize.large,\n      color: theme.colors.text.primary,\n      opacity: 0.7\n    },\n    tips: {\n      marginTop: 32,\n      height: 230,\n      justifyContent: 'center'\n    },\n    tip: {\n      flexDirection: 'row',\n      overflow: 'hidden',\n      alignItems: 'center',\n      height: 54,\n      borderRadius: 8,\n      backgroundColor: theme.colors.gray.extra,\n      marginTop: theme.spacing.micro,\n      marginBottom: theme.spacing.micro\n    },\n    tipText: {\n      fontSize: 16,\n      lineHeight: 22,\n      color: theme.colors.text.primary\n    },\n    icon: {\n      margin: 10\n    },\n    button: {\n      height: 52,\n      borderRadius: 7,\n      marginBottom: 32,\n      marginTop: 16,\n      backgroundColor: brandTheme?.colors?.primary || theme.colors.cta,\n      justifyContent: 'center'\n    },\n    buttonText: {\n      alignSelf: 'center',\n      fontWeight: theme.fontWeight.bold,\n      fontSize: theme.fontSize.large,\n      color: '#fff'\n    }\n  });\n\nconst Tip = (props: TipProps) => {\n  const templateContext = useTemplateContext();\n  const [styleSheet, setStylesheet] = useState<StyleSheetType | null>(null);\n  const {brandTheme, theme} = templateContext;\n  const {Icon, text} = props;\n\n  useEffect(() => {\n    const _stylesheet = createStyleSheet(brandTheme, theme);\n    setStylesheet(_stylesheet);\n  }, [brandTheme, theme]);\n\n  if (!styleSheet) {\n    return null;\n  }\n\n  return (\n    <View style={styleSheet.tip}>\n      <Icon height={16} width={16} style={styleSheet.icon} color={theme.colors.text.primary} />\n      <Text style={styleSheet.tipText}>{text}</Text>\n    </View>\n  );\n};\n\nconst Onboarding = (props: OnboardingProps) => {\n  const templateContext = useTemplateContext();\n  const [styleSheet, setStylesheet] = useState<StyleSheetType | null>(null);\n  const {brandTheme, theme, translations} = templateContext;\n  const {onPress} = props;\n\n  useEffect(() => {\n    const _stylesheet = createStyleSheet(brandTheme, theme);\n    setStylesheet(_stylesheet);\n  }, [brandTheme, theme]);\n\n  // ------------------------------------\n\n  if (!styleSheet) {\n    return null;\n  }\n\n  return (\n    <View style={styleSheet.container}>\n      <Html style={styleSheet.title}>{translations.appReview.presentation.title}</Html>\n      <Html style={styleSheet.text}>{translations.appReview.presentation.text}</Html>\n\n      <View style={styleSheet.tips}>\n        <Tip Icon={TargetIcon} text={translations.appReview.presentation.labelList.skills.text} />\n        <Tip\n          Icon={QuestionMarkIcon}\n          text={translations.appReview.presentation.labelList.questions.text}\n        />\n        <Tip Icon={HeartIcon} text={translations.appReview.presentation.labelList.lifes.text} />\n        <Tip\n          Icon={CheckCircle2Icon}\n          text={translations.appReview.presentation.labelList.allright.text}\n        />\n      </View>\n      <Touchable\n        testID=\"button-quit-revision-onboarding\"\n        onPress={onPress}\n        analyticsID=\"button-start\"\n        style={styleSheet.button}\n      >\n        <Text style={styleSheet.buttonText}>{translations.ok}</Text>\n      </Touchable>\n    </View>\n  );\n};\n\nexport default Onboarding;\n"],"mappings":"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"}
+{"version":3,"file":"index.native.js","names":["createStyleSheet","brandTheme","theme","StyleSheet","create","container","backgroundColor","colors","white","justifyContent","flex","padding","paddingTop","paddingBottom","title","height","width","fontSize","xxlarge","fontWeight","bold","lineHeight","color","text","primary","marginBottom","textContainer","marginTop","large","opacity","tips","tip","flexDirection","overflow","alignItems","borderRadius","gray","extra","spacing","micro","tipText","icon","margin","button","cta","buttonText","alignSelf","Tip","props","templateContext","useTemplateContext","styleSheet","setStylesheet","useState","Icon","useEffect","_stylesheet","Onboarding","translations","onPress","appReview","presentation","TargetIcon","labelList","skills","QuestionMarkIcon","questions","HeartIcon","lifes","CheckCircle2Icon","allright","ok"],"sources":["../../../src/atom/review-presentation/index.native.tsx"],"sourcesContent":["import React, {useState, useEffect} from 'react';\nimport {View, StyleSheet, Text, ViewStyle, TextStyle} from 'react-native';\nimport {\n  NovaLineSelectionCursorsCursorArrowTarget as TargetIcon,\n  NovaSolidInterfaceFeedbackInterfaceQuestionMark as QuestionMarkIcon,\n  NovaSolidStatusCheckCircle2 as CheckCircle2Icon,\n  NovaCompositionCoorpacademyVoteHeartOutline as HeartIcon\n} from '@coorpacademy/nova-icons';\n\nimport {useTemplateContext} from '../../template/app-review/template-context';\nimport {Theme} from '../../variables/theme.native';\nimport Touchable from '../../hoc/touchable/index.native';\nimport Html from '../html/index.native';\nimport {Brand} from '../../variables/brand.native';\nimport {OnboardingProps, TipProps} from './prop-types';\n\ntype StyleSheetType = {\n  container: ViewStyle;\n  title: TextStyle;\n  text: TextStyle;\n  textContainer: ViewStyle;\n  tips: ViewStyle;\n  tip: ViewStyle;\n  tipText: TextStyle;\n  icon: ViewStyle;\n  button: ViewStyle;\n  buttonText: TextStyle;\n};\n\nconst createStyleSheet = (brandTheme: Brand, theme: Theme): StyleSheetType =>\n  StyleSheet.create({\n    container: {\n      backgroundColor: theme.colors.white,\n      justifyContent: 'space-between',\n      flex: 1,\n      padding: 20,\n      paddingTop: 20,\n      paddingBottom: 100\n    },\n    title: {\n      height: 72,\n      width: 268,\n      fontSize: theme.fontSize.xxlarge,\n      fontWeight: theme.fontWeight.bold,\n      lineHeight: 36,\n      color: theme.colors.text.primary,\n      marginBottom: 32\n    },\n    textContainer: {\n      marginTop: 8\n    },\n    text: {\n      fontSize: theme.fontSize.large,\n      color: theme.colors.text.primary,\n      opacity: 0.7\n    },\n    tips: {\n      marginTop: 32,\n      height: 230,\n      justifyContent: 'center'\n    },\n    tip: {\n      flexDirection: 'row',\n      overflow: 'hidden',\n      alignItems: 'center',\n      height: 54,\n      borderRadius: 8,\n      backgroundColor: theme.colors.gray.extra,\n      marginTop: theme.spacing.micro,\n      marginBottom: theme.spacing.micro\n    },\n    tipText: {\n      fontSize: 16,\n      lineHeight: 22,\n      color: theme.colors.text.primary\n    },\n    icon: {\n      margin: 10\n    },\n    button: {\n      height: 52,\n      borderRadius: 7,\n      marginBottom: 32,\n      marginTop: 16,\n      backgroundColor: brandTheme?.colors?.primary || theme.colors.cta,\n      justifyContent: 'center'\n    },\n    buttonText: {\n      alignSelf: 'center',\n      fontWeight: theme.fontWeight.bold,\n      fontSize: theme.fontSize.large,\n      color: '#fff'\n    }\n  });\n\nconst Tip = (props: TipProps) => {\n  const templateContext = useTemplateContext();\n  const [styleSheet, setStylesheet] = useState<StyleSheetType | null>(null);\n  const {brandTheme, theme} = templateContext;\n  const {Icon, text} = props;\n\n  useEffect(() => {\n    const _stylesheet = createStyleSheet(brandTheme, theme);\n    setStylesheet(_stylesheet);\n  }, [brandTheme, theme]);\n\n  if (!styleSheet) {\n    return null;\n  }\n\n  return (\n    <View style={styleSheet.tip}>\n      <Icon height={16} width={16} style={styleSheet.icon} color={theme.colors.text.primary} />\n      <Text style={styleSheet.tipText}>{text}</Text>\n    </View>\n  );\n};\n\nconst Onboarding = (props: OnboardingProps) => {\n  const templateContext = useTemplateContext();\n  const [styleSheet, setStylesheet] = useState<StyleSheetType | null>(null);\n  const {brandTheme, theme, translations} = templateContext;\n  const {onPress} = props;\n\n  useEffect(() => {\n    const _stylesheet = createStyleSheet(brandTheme, theme);\n    setStylesheet(_stylesheet);\n  }, [brandTheme, theme]);\n\n  // ------------------------------------\n\n  if (!styleSheet) {\n    return null;\n  }\n\n  return (\n    <View style={styleSheet.container}>\n      <Html style={styleSheet.title}>{translations.appReview.presentation.title}</Html>\n\n      <View style={styleSheet.textContainer}>\n        <Html style={styleSheet.text}>{translations.appReview.presentation.text}</Html>\n      </View>\n\n      <View style={styleSheet.tips}>\n        <Tip Icon={TargetIcon} text={translations.appReview.presentation.labelList.skills.text} />\n        <Tip\n          Icon={QuestionMarkIcon}\n          text={translations.appReview.presentation.labelList.questions.text}\n        />\n        <Tip Icon={HeartIcon} text={translations.appReview.presentation.labelList.lifes.text} />\n        <Tip\n          Icon={CheckCircle2Icon}\n          text={translations.appReview.presentation.labelList.allright.text}\n        />\n      </View>\n      <Touchable\n        testID=\"button-quit-revision-onboarding\"\n        onPress={onPress}\n        analyticsID=\"button-start\"\n        style={styleSheet.button}\n      >\n        <Text style={styleSheet.buttonText}>{translations.ok}</Text>\n      </Touchable>\n    </View>\n  );\n};\n\nexport default Onboarding;\n"],"mappings":"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"}

package/lib/atom/review-presentation/style.css

@@ -3,12 +3,14 @@
 @value mobile from breakpoints;
 @value colors: "../../variables/colors.css";
 @value xtraLightGrey from colors;
-@value cm_blue_900 from colors;
 @value cm_grey_75 from colors;
-@value cm_grey_500 from colors;
-@value cm_grey_700 from colors;
-@value white from colors;
 
+.reviewWrapper {
+  width: 100%;
+  border-radius: 16px;
+  background-color: xtraLightGrey;
+  padding-bottom: 40px;
+}
 
 .textBase {
   font-family: "Gilroy";
@@ -17,13 +19,6 @@
   user-select: none;
 }
 
-.reviewWrapper {
-  width: 100%;
-  border-radius: 16px;
-  background-color: xtraLightGrey;
-  padding-bottom: 40px;
-}
-
 .reviewTitle {
   composes: textBase;
   font-weight: 700;
@@ -77,61 +72,6 @@
   width: 16px;
 }
 
-.informationIcon {
-  color: cm_grey_500;
-}
-
-.toolTip {
-  transition: opacity 0.8s;
-  position: absolute;
-  height: auto;
-  width: 200px;
-  border-radius: 7px;
-  background-color: cm_grey_700;
-  right: -81px;
-  bottom: 32px;
-}
-
-.toolTip::before {
-  content: '';
-  display: inline-block;
-  visibility: inherit;
-  opacity: inherit;
-  width: 15px;
-  height: 15px;
-  transform: rotate(-45deg);
-  background-color: cm_grey_700;
-  position: inherit;
-  bottom: -5px;
-  right: 40%;
-  border-radius: 2px;
-}
-
-.tooltipText {
-  composes: textBase;
-  font-weight: 500;
-  font-size: 14px;
-  display: inline-block;
-  border-radius: 3px;
-  word-wrap: break-word;
-  color: white;
-  padding: 8px 14px;
-  text-align: center;
-}
-
-.tooltipContainer {
-  overflow: visible;
-  position: relative;
-}
-
-.tooltipIconContainer {
-  display: flex;
-  justify-content: flex-end;
-  border: none;
-  background: cm_grey_75;
-  height: 25px;
-}
-
 @media tablet {
   .reviewWrapper{
     width: 100%;
@@ -142,4 +82,4 @@
   .reviewWrapper{
     width: 100%;
   }
-}
+}

package/lib/atom/tooltip/index.d.ts

@@ -0,0 +1,22 @@
+export function toggleStateOnKeyPress(state: any, setState: any, ref: any): (event: any) => void;
+export default ToolTip;
+declare function ToolTip({ anchorId, TooltipContent, "aria-label": ariaLabel, "data-testid": dataTestId, closeToolTipInformationTextAriaLabel, toolTipIsVisible: _toolTipIsVisible }: {
+    anchorId: any;
+    TooltipContent: any;
+    "aria-label": any;
+    "data-testid": any;
+    closeToolTipInformationTextAriaLabel: any;
+    toolTipIsVisible: any;
+}): JSX.Element;
+declare namespace ToolTip {
+    const propTypes: {
+        TooltipContent: PropTypes.Requireable<NonNullable<((...args: any[]) => any) | PropTypes.ReactNodeLike>>;
+        'data-testid': PropTypes.Requireable<string>;
+        'aria-label': PropTypes.Requireable<string>;
+        closeToolTipInformationTextAriaLabel: PropTypes.Validator<string>;
+        anchorId: PropTypes.Requireable<string>;
+        toolTipIsVisible: PropTypes.Requireable<boolean>;
+    };
+}
+import PropTypes from "prop-types";
+//# sourceMappingURL=index.d.ts.map

package/lib/atom/tooltip/index.d.ts.map

@@ -0,0 +1 @@
+{"version":3,"file":"index.d.ts","sourceRoot":"","sources":["../../../src/atom/tooltip/index.js"],"names":[],"mappings":"AA+CO,iGASN;;AAED;;;;;;;gBA2EC"}

package/lib/atom/tooltip/index.js

@@ -0,0 +1,137 @@
+"use strict";
+
+exports.__esModule = true;
+exports.toggleStateOnKeyPress = exports.default = void 0;
+
+var _react = _interopRequireWildcard(require("react"));
+
+var _propTypes = _interopRequireDefault(require("prop-types"));
+
+var _reactTooltip = _interopRequireDefault(require("react-tooltip"));
+
+var _isString = _interopRequireDefault(require("lodash/fp/isString"));
+
+var _novaIcons = require("@coorpacademy/nova-icons");
+
+var _style = _interopRequireDefault(require("./style.css"));
+
+function _interopRequireDefault(obj) { return obj && obj.__esModule ? obj : { default: obj }; }
+
+function _getRequireWildcardCache(nodeInterop) { if (typeof WeakMap !== "function") return null; var cacheBabelInterop = new WeakMap(); var cacheNodeInterop = new WeakMap(); return (_getRequireWildcardCache = function (nodeInterop) { return nodeInterop ? cacheNodeInterop : cacheBabelInterop; })(nodeInterop); }
+
+function _interopRequireWildcard(obj, nodeInterop) { if (!nodeInterop && obj && obj.__esModule) { return obj; } if (obj === null || typeof obj !== "object" && typeof obj !== "function") { return { default: obj }; } var cache = _getRequireWildcardCache(nodeInterop); if (cache && cache.has(obj)) { return cache.get(obj); } var newObj = {}; var hasPropertyDescriptor = Object.defineProperty && Object.getOwnPropertyDescriptor; for (var key in obj) { if (key !== "default" && Object.prototype.hasOwnProperty.call(obj, key)) { var desc = hasPropertyDescriptor ? Object.getOwnPropertyDescriptor(obj, key) : null; if (desc && (desc.get || desc.set)) { Object.defineProperty(newObj, key, desc); } else { newObj[key] = obj[key]; } } } newObj.default = obj; if (cache) { cache.set(obj, newObj); } return newObj; }
+
+const ToolTipWrapper = ({
+  toolTipIsVisible,
+  anchorId,
+  closeToolTipInformationTextAriaLabel,
+  content
+}) => {
+  if (!toolTipIsVisible) return null;
+
+  if (anchorId) {
+    return /*#__PURE__*/_react.default.createElement(_reactTooltip.default, {
+      id: anchorId,
+      className: _style.default.toolTipReact,
+      "data-event-off": "click",
+      place: "left",
+      effect: "solid",
+      "aria-label": closeToolTipInformationTextAriaLabel
+    }, content);
+  } else {
+    return /*#__PURE__*/_react.default.createElement("div", {
+      className: _style.default.toolTip,
+      "data-testid": "tooltip",
+      "aria-label": closeToolTipInformationTextAriaLabel
+    }, content);
+  }
+};
+
+ToolTipWrapper.propTypes = process.env.NODE_ENV !== "production" ? {
+  toolTipIsVisible: _propTypes.default.bool,
+  anchorId: _propTypes.default.string,
+  closeToolTipInformationTextAriaLabel: _propTypes.default.string.isRequired,
+  content: _propTypes.default.node
+} : {};
+
+const toggleStateOnKeyPress = (state, setState, ref) => event => {
+  if (event.key === 'Enter') {
+    if (ref) ref.current.focus();
+    event.stopPropagation();
+    event.preventDefault();
+    setState(!state);
+  } else if (event.key === 'Tab' || event.key === 'Escape') {
+    setState(false);
+  }
+};
+
+exports.toggleStateOnKeyPress = toggleStateOnKeyPress;
+
+const ToolTip = ({
+  anchorId,
+  TooltipContent,
+  'aria-label': ariaLabel,
+  'data-testid': dataTestId,
+  closeToolTipInformationTextAriaLabel,
+  toolTipIsVisible: _toolTipIsVisible
+}) => {
+  const isComponent = (0, _react.useMemo)(() => !(0, _isString.default)(TooltipContent) && /*#__PURE__*/(0, _react.isValidElement)(TooltipContent()), [TooltipContent]);
+  const [toolTipIsVisible, setToolTipIsVisible] = (0, _react.useState)(false);
+  const handleKeyPress = (0, _react.useCallback)(event => {
+    toggleStateOnKeyPress(toolTipIsVisible, setToolTipIsVisible)(event);
+  }, [toolTipIsVisible]);
+  const handleMouseOver = (0, _react.useCallback)(() => {
+    setToolTipIsVisible(true);
+  }, []);
+  const handleMouseLeave = (0, _react.useCallback)(() => {
+    setToolTipIsVisible(false);
+  }, []);
+  const content = (0, _react.useMemo)(() => {
+    return isComponent ? /*#__PURE__*/_react.default.createElement(TooltipContent, null) : /*#__PURE__*/_react.default.createElement("p", {
+      className: _style.default.tooltipContent
+    }, TooltipContent);
+  }, [TooltipContent, isComponent]);
+  return anchorId ? /*#__PURE__*/_react.default.createElement(ToolTipWrapper, {
+    toolTipIsVisible: _toolTipIsVisible,
+    anchorId: anchorId,
+    closeToolTipInformationTextAriaLabel: closeToolTipInformationTextAriaLabel,
+    content: content,
+    onMouseLeave: handleMouseLeave,
+    onMouseOver: handleMouseOver
+  }) : /*#__PURE__*/_react.default.createElement("div", {
+    className: _style.default.tooltipContainer,
+    onMouseLeave: handleMouseLeave,
+    onMouseOver: handleMouseOver
+  }, /*#__PURE__*/_react.default.createElement("button", {
+    type: "button",
+    className: _style.default.tooltipIconContainer,
+    "data-testid": dataTestId,
+    onKeyDown: handleKeyPress,
+    tabIndex: 0
+  }, /*#__PURE__*/_react.default.createElement(_novaIcons.NovaCompositionCoorpacademyInformationIcon, {
+    className: _style.default.informationIcon,
+    width: 12,
+    height: 12,
+    "aria-label": ariaLabel
+  })), /*#__PURE__*/_react.default.createElement(ToolTipWrapper, {
+    toolTipIsVisible: toolTipIsVisible,
+    anchorId: anchorId,
+    closeToolTipInformationTextAriaLabel: closeToolTipInformationTextAriaLabel,
+    content: content
+  }));
+};
+
+ToolTip.propTypes = process.env.NODE_ENV !== "production" ? {
+  TooltipContent: _propTypes.default.oneOfType([_propTypes.default.func, _propTypes.default.node, _propTypes.default.string]),
+  'data-testid': _propTypes.default.string,
+  'aria-label': _propTypes.default.string,
+  closeToolTipInformationTextAriaLabel: _propTypes.default.string.isRequired,
+  // ---------- externalHandling --------------
+  // if passed down, React Tooltip is used instead, due to limitations on
+  // parents overflow hidden controls
+  anchorId: _propTypes.default.string,
+  toolTipIsVisible: _propTypes.default.bool
+} : {};
+var _default = ToolTip;
+exports.default = _default;
+//# sourceMappingURL=index.js.map

package/lib/atom/tooltip/index.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"index.js","names":["ToolTipWrapper","toolTipIsVisible","anchorId","closeToolTipInformationTextAriaLabel","content","style","toolTipReact","toolTip","propTypes","PropTypes","bool","string","isRequired","node","toggleStateOnKeyPress","state","setState","ref","event","key","current","focus","stopPropagation","preventDefault","ToolTip","TooltipContent","ariaLabel","dataTestId","_toolTipIsVisible","isComponent","useMemo","isString","isValidElement","setToolTipIsVisible","useState","handleKeyPress","useCallback","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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"}

package/lib/atom/tooltip/style.css

@@ -0,0 +1,96 @@
+@value colors: "../../variables/colors.css";
+@value cm_blue_900 from colors;
+@value cm_grey_75 from colors;
+@value cm_grey_500 from colors;
+@value cm_grey_700 from colors;
+
+.textBase {
+  font-family: "Gilroy";
+  font-style: normal;
+  color: cm_blue_900;
+  user-select: none;
+}
+
+.tooltipContainer {
+  overflow: visible;
+  position: relative;
+  z-index: 10;
+  display: flex;
+  justify-content: center;
+  justify-self: center;
+}
+
+.tooltipIconContainer {
+  display: flex;
+  justify-content: flex-end;
+  border: none;
+  background: cm_grey_75;
+  height: 25px;
+  align-items: center;
+}
+
+.toolTip {
+  transition: opacity 0.8s;
+  position: absolute;
+  border-radius: 7px;
+  background-color: cm_grey_700;
+  right: -75px;
+  bottom: 32px;
+  height: auto;
+  width: 200px;
+}
+
+.toolTip::before {
+  content: '';
+  display: inline-block;
+  visibility: inherit;
+  opacity: inherit;
+  width: 15px;
+  height: 15px;
+  transform: rotate(-45deg);
+  background-color: cm_grey_700;
+  position: inherit;
+  border-radius: 2px;
+  bottom: -5px;
+  right: 40%;
+}
+
+.tooltipContent {
+  composes: textBase;
+  font-weight: 500;
+  font-size: 14px;
+  display: inline-block;
+  border-radius: 3px;
+  word-wrap: break-word;
+  color: white;
+  padding: 8px 14px;
+  text-align: center;
+}
+
+.informationIcon {
+  color: cm_grey_500;
+}
+
+/* ----------------------- ReactToolTip exclusive classes ------------------------- */
+.toolTipReact {
+  pointer-events: all !important;
+  background-color: cm_grey_700;
+  border-radius: 7px !important;
+  visibility: visible !important;
+  opacity: 1 !important;
+  left: 5px;
+}
+
+/* for keyboard navigation, the position can't be obtained from the mouse */
+[class*="__react_component_tooltip"]:not(.toolTipReact) {
+  border-radius: 7px !important;
+  top: 97px!important;
+  left: 628px!important;
+  visibility: visible !important;
+  opacity: 1!important;
+}
+
+/* same reason, arrow can't be placed effectively */
+[class*="__react_component_tooltip"]:not(.toolTipReact)::after {
+  content: none !important;
+}