@coorpacademy/components 11.9.2 → 11.9.3-alpha.23

package/es/template/activity/stars-summary.js

@@ -27,6 +27,7 @@ const EngineTab = ({
     key: type,
     "data-name": dataName
   }, /*#__PURE__*/React.createElement(EngineStars, _extends({}, engine, {
+    key: type,
     className: engineIndex < firstItemIndex ? style.hidden : style.active
   })));
 };
@@ -81,11 +82,12 @@ const StarsSummary = (props, legacyContext) => {
     return null;
   }
 
-  const leftArrowView = totalItems > 6 && firstItemIndex > 0 ? /*#__PURE__*/React.createElement("div", {
+  const leftArrowView = totalItems > 6 && firstItemIndex > 0 ? /*#__PURE__*/React.createElement("button", {
     className: style.circle,
     onClick: handleOnLeft,
     "data-name": "left-arrow",
-    "data-testid": "stars-summary-left-arrow"
+    "data-testid": "stars-summary-left-arrow",
+    type: "button"
   }, /*#__PURE__*/React.createElement(ArrowLeft, {
     color: dark,
     className: style.left,
@@ -105,15 +107,18 @@ const StarsSummary = (props, legacyContext) => {
   })) : null;
   return /*#__PURE__*/React.createElement("div", {
     "data-name": "myStars",
-    className: style.myStars
+    className: style.myStars,
+    tabIndex: 0
   }, /*#__PURE__*/React.createElement("div", {
     "data-name": "myStars-wrapper",
     className: style.myStarsWrapper,
-    "data-testid": `stars-summary-engine-index-${firstItemIndex}`
+    "data-testid": `stars-summary-engine-index-${firstItemIndex}`,
+    tabIndex: 0
   }, /*#__PURE__*/React.createElement("ul", {
     className: style.allStars,
     "data-name": "engineList",
-    "data-testid": "stars-summary-engine-tabs"
+    "data-testid": "stars-summary-engine-tabs",
+    tabIndex: 0
   }, /*#__PURE__*/React.createElement(EngineTabs, {
     engines: engines,
     firstItemIndex: firstItemIndex

package/es/template/activity/stars-summary.js.map

@@ -1 +1 @@
-{"version":3,"file":"stars-summary.js","names":["React","useCallback","useMemo","useState","PropTypes","NovaCompositionNavigationArrowLeft","ArrowLeft","NovaCompositionNavigationArrowRight","ArrowRight","NovaCompositionCoorpacademyStar","StarIcon","Provider","GetSkinFromContext","EngineStars","style","EngineTab","engine","engineIndex","firstItemIndex","type","state","dataName","hidden","active","propTypes","shape","number","EngineTabs","engines","convert","cap","index","arrayOf","StarsSummary","props","legacyContext","total","skin","setFirstItemIndex","totalItems","length","dark","primary","scrollTo","page","handleOnLeft","handleOnRight","leftArrowView","circle","left","rightArrowView","right","myStars","myStarsWrapper","allStars","footerSummaryStars","backgroundColor","totalStars","label","stars","iconBubble","iconHeader","navigationLeft","navigationRight","string","isRequired","contextTypes","childContextTypes"],"sources":["../../../src/template/activity/stars-summary.js"],"sourcesContent":["import React, {useCallback, useMemo, useState} from 'react';\nimport PropTypes from 'prop-types';\nimport {get, getOr, isEmpty, map} from 'lodash/fp';\nimport {\n  NovaCompositionNavigationArrowLeft as ArrowLeft,\n  NovaCompositionNavigationArrowRight as ArrowRight,\n  NovaCompositionCoorpacademyStar as StarIcon\n} from '@coorpacademy/nova-icons';\nimport Provider, {GetSkinFromContext} from '../../atom/provider';\nimport EngineStars from './engine-stars';\nimport style from './stars-summary.css';\n\nconst EngineTab = ({engine, engineIndex, firstItemIndex}) => {\n  const {type} = engine;\n  const state = useMemo(\n    () => (engineIndex < firstItemIndex ? 'hidden' : 'active'),\n    [engineIndex, firstItemIndex]\n  );\n  const dataName = useMemo(() => `${type}_total_${state}`, [state, type]);\n\n  return (\n    <li className={style[state]} key={type} data-name={dataName}>\n      <EngineStars\n        {...engine}\n        className={engineIndex < firstItemIndex ? style.hidden : style.active}\n      />\n    </li>\n  );\n};\nEngineTab.propTypes = {\n  engine: PropTypes.shape(EngineStars.propTypes),\n  engineIndex: PropTypes.number,\n  firstItemIndex: PropTypes.number\n};\n\nconst EngineTabs = ({engines, firstItemIndex}) => {\n  return useMemo(\n    () =>\n      map.convert({cap: false})(\n        (engine, index) => (\n          <EngineTab\n            engine={engine}\n            key={`engineTab_${index}`}\n            firstItemIndex={firstItemIndex}\n            engineIndex={index}\n          />\n        ),\n        engines\n      ),\n    [engines, firstItemIndex]\n  );\n};\n\nEngineTabs.propTypes = {\n  engines: PropTypes.arrayOf(PropTypes.shape(EngineStars.propTypes)),\n  firstItemIndex: PropTypes.number\n};\n\nconst StarsSummary = (props, legacyContext) => {\n  const {total, engines} = props;\n  const skin = GetSkinFromContext(legacyContext);\n\n  const [firstItemIndex, setFirstItemIndex] = useState(0);\n  const [totalItems] = useState(engines.length);\n\n  const dark = getOr('#90A4AE', 'common.dark', skin);\n  const primary = get('common.primary', skin);\n\n  const scrollTo = useCallback(page => setFirstItemIndex(page), []);\n\n  const handleOnLeft = useCallback(() => {\n    scrollTo(firstItemIndex - 1);\n  }, [firstItemIndex, scrollTo]);\n\n  const handleOnRight = useCallback(() => {\n    scrollTo(firstItemIndex + 1);\n  }, [firstItemIndex, scrollTo]);\n\n  if (isEmpty(engines)) {\n    return null;\n  }\n\n  const leftArrowView =\n    totalItems > 6 && firstItemIndex > 0 ? (\n      <div\n        className={style.circle}\n        onClick={handleOnLeft}\n        data-name=\"left-arrow\"\n        data-testid=\"stars-summary-left-arrow\"\n      >\n        <ArrowLeft color={dark} className={style.left} width={10} height={10} />\n      </div>\n    ) : null;\n\n  const rightArrowView =\n    totalItems > 6 && firstItemIndex < totalItems - 6 ? (\n      <div\n        className={style.circle}\n        onClick={handleOnRight}\n        data-name=\"right-arrow\"\n        data-testid=\"stars-summary-right-arrow\"\n      >\n        <ArrowRight color={dark} className={style.right} width={10} height={10} />\n      </div>\n    ) : null;\n\n  return (\n    <div data-name=\"myStars\" className={style.myStars}>\n      <div\n        data-name=\"myStars-wrapper\"\n        className={style.myStarsWrapper}\n        data-testid={`stars-summary-engine-index-${firstItemIndex}`}\n      >\n        <ul\n          className={style.allStars}\n          data-name=\"engineList\"\n          data-testid=\"stars-summary-engine-tabs\"\n        >\n          <EngineTabs engines={engines} firstItemIndex={firstItemIndex} />\n        </ul>\n        <div\n          className={style.footerSummaryStars}\n          style={{\n            backgroundColor: primary\n          }}\n        >\n          <div className={style.totalStars}>\n            <span>{total.label}</span>\n            <p data-name=\"star-counter\">{total.stars}</p>\n            <div className={style.iconBubble}>\n              <StarIcon className={style.iconHeader} color={primary} />\n            </div>\n          </div>\n          <div className={style.navigationLeft}>{leftArrowView}</div>\n          <div className={style.navigationRight}>{rightArrowView}</div>\n        </div>\n      </div>\n    </div>\n  );\n};\n\nStarsSummary.propTypes = {\n  total: PropTypes.shape({\n    label: PropTypes.string.isRequired,\n    stars: PropTypes.number.isRequired\n  }).isRequired,\n  engines: PropTypes.arrayOf(PropTypes.shape(EngineStars.propTypes)).isRequired\n};\n\nStarsSummary.contextTypes = {\n  skin: Provider.childContextTypes.skin\n};\n\nexport default StarsSummary;\n"],"mappings":"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"}
+{"version":3,"file":"stars-summary.js","names":["React","useCallback","useMemo","useState","PropTypes","NovaCompositionNavigationArrowLeft","ArrowLeft","NovaCompositionNavigationArrowRight","ArrowRight","NovaCompositionCoorpacademyStar","StarIcon","Provider","GetSkinFromContext","EngineStars","style","EngineTab","engine","engineIndex","firstItemIndex","type","state","dataName","hidden","active","propTypes","shape","number","EngineTabs","engines","convert","cap","index","arrayOf","StarsSummary","props","legacyContext","total","skin","setFirstItemIndex","totalItems","length","dark","primary","scrollTo","page","handleOnLeft","handleOnRight","leftArrowView","circle","left","rightArrowView","right","myStars","myStarsWrapper","allStars","footerSummaryStars","backgroundColor","totalStars","label","stars","iconBubble","iconHeader","navigationLeft","navigationRight","string","isRequired","contextTypes","childContextTypes"],"sources":["../../../src/template/activity/stars-summary.js"],"sourcesContent":["import React, {useCallback, useMemo, useState} from 'react';\nimport PropTypes from 'prop-types';\nimport {get, getOr, isEmpty, map} from 'lodash/fp';\nimport {\n  NovaCompositionNavigationArrowLeft as ArrowLeft,\n  NovaCompositionNavigationArrowRight as ArrowRight,\n  NovaCompositionCoorpacademyStar as StarIcon\n} from '@coorpacademy/nova-icons';\nimport Provider, {GetSkinFromContext} from '../../atom/provider';\nimport EngineStars from './engine-stars';\nimport style from './stars-summary.css';\n\nconst EngineTab = ({engine, engineIndex, firstItemIndex}) => {\n  const {type} = engine;\n  const state = useMemo(\n    () => (engineIndex < firstItemIndex ? 'hidden' : 'active'),\n    [engineIndex, firstItemIndex]\n  );\n  const dataName = useMemo(() => `${type}_total_${state}`, [state, type]);\n\n  return (\n    <li className={style[state]} key={type} data-name={dataName}>\n      <EngineStars\n        {...engine}\n        key={type}\n        className={engineIndex < firstItemIndex ? style.hidden : style.active}\n      />\n    </li>\n  );\n};\nEngineTab.propTypes = {\n  engine: PropTypes.shape(EngineStars.propTypes),\n  engineIndex: PropTypes.number,\n  firstItemIndex: PropTypes.number\n};\n\nconst EngineTabs = ({engines, firstItemIndex}) => {\n  return useMemo(\n    () =>\n      map.convert({cap: false})(\n        (engine, index) => (\n          <EngineTab\n            engine={engine}\n            key={`engineTab_${index}`}\n            firstItemIndex={firstItemIndex}\n            engineIndex={index}\n          />\n        ),\n        engines\n      ),\n    [engines, firstItemIndex]\n  );\n};\n\nEngineTabs.propTypes = {\n  engines: PropTypes.arrayOf(PropTypes.shape(EngineStars.propTypes)),\n  firstItemIndex: PropTypes.number\n};\n\nconst StarsSummary = (props, legacyContext) => {\n  const {total, engines} = props;\n  const skin = GetSkinFromContext(legacyContext);\n\n  const [firstItemIndex, setFirstItemIndex] = useState(0);\n  const [totalItems] = useState(engines.length);\n\n  const dark = getOr('#90A4AE', 'common.dark', skin);\n  const primary = get('common.primary', skin);\n\n  const scrollTo = useCallback(page => setFirstItemIndex(page), []);\n\n  const handleOnLeft = useCallback(() => {\n    scrollTo(firstItemIndex - 1);\n  }, [firstItemIndex, scrollTo]);\n\n  const handleOnRight = useCallback(() => {\n    scrollTo(firstItemIndex + 1);\n  }, [firstItemIndex, scrollTo]);\n\n  if (isEmpty(engines)) {\n    return null;\n  }\n\n  const leftArrowView =\n    totalItems > 6 && firstItemIndex > 0 ? (\n      <button\n        className={style.circle}\n        onClick={handleOnLeft}\n        data-name=\"left-arrow\"\n        data-testid=\"stars-summary-left-arrow\"\n        type=\"button\"\n      >\n        <ArrowLeft color={dark} className={style.left} width={10} height={10} />\n      </button>\n    ) : null;\n\n  const rightArrowView =\n    totalItems > 6 && firstItemIndex < totalItems - 6 ? (\n      <div\n        className={style.circle}\n        onClick={handleOnRight}\n        data-name=\"right-arrow\"\n        data-testid=\"stars-summary-right-arrow\"\n      >\n        <ArrowRight color={dark} className={style.right} width={10} height={10} />\n      </div>\n    ) : null;\n\n  return (\n    <div data-name=\"myStars\" className={style.myStars} tabIndex={0}>\n      <div\n        data-name=\"myStars-wrapper\"\n        className={style.myStarsWrapper}\n        data-testid={`stars-summary-engine-index-${firstItemIndex}`}\n        tabIndex={0}\n      >\n        <ul\n          className={style.allStars}\n          data-name=\"engineList\"\n          data-testid=\"stars-summary-engine-tabs\"\n          tabIndex={0}\n        >\n          <EngineTabs engines={engines} firstItemIndex={firstItemIndex} />\n        </ul>\n        <div\n          className={style.footerSummaryStars}\n          style={{\n            backgroundColor: primary\n          }}\n        >\n          <div className={style.totalStars}>\n            <span>{total.label}</span>\n            <p data-name=\"star-counter\">{total.stars}</p>\n            <div className={style.iconBubble}>\n              <StarIcon className={style.iconHeader} color={primary} />\n            </div>\n          </div>\n          <div className={style.navigationLeft}>{leftArrowView}</div>\n          <div className={style.navigationRight}>{rightArrowView}</div>\n        </div>\n      </div>\n    </div>\n  );\n};\n\nStarsSummary.propTypes = {\n  total: PropTypes.shape({\n    label: PropTypes.string.isRequired,\n    stars: PropTypes.number.isRequired\n  }).isRequired,\n  engines: PropTypes.arrayOf(PropTypes.shape(EngineStars.propTypes)).isRequired\n};\n\nStarsSummary.contextTypes = {\n  skin: Provider.childContextTypes.skin\n};\n\nexport default StarsSummary;\n"],"mappings":"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"}

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

@@ -1 +1 @@
-{"version":3,"file":"index.d.ts","sourceRoot":"","sources":["../../../src/atom/review-presentation/index.js"],"names":[],"mappings":";AAyGA,6DA+BC"}
+{"version":3,"file":"index.d.ts","sourceRoot":"","sources":["../../../src/atom/review-presentation/index.js"],"names":[],"mappings":";AA+CA,6DA+BC"}

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":"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"}
+{"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/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;
+}

package/lib/molecule/answer/index.d.ts.map

@@ -1 +1 @@
-{"version":3,"file":"index.d.ts","sourceRoot":"","sources":["../../../src/molecule/answer/index.js"],"names":[],"mappings":";AAwEA,iDAWC"}
+{"version":3,"file":"index.d.ts","sourceRoot":"","sources":["../../../src/molecule/answer/index.js"],"names":[],"mappings":";AA4EA,iDAWC"}