@coorpacademy/components 11.11.0 → 11.11.1-alpha.0

package/es/atom/battle-opponent/index.d.ts

@@ -0,0 +1,19 @@
+/// <reference types="react" />
+import { WebContextValues } from '../provider/web-context';
+import { BattleOpponentProps } from './prop-types';
+declare const BattleOpponent: {
+    ({ isAlreadyEngaged, isRandom, userAvatarSrc, onClick, displayName, tooltipText }: BattleOpponentProps, legacyContext: WebContextValues): JSX.Element;
+    propTypes: {
+        isAlreadyEngaged: import("prop-types").Requireable<boolean>;
+        isRandom: import("prop-types").Requireable<boolean>;
+        userAvatarSrc: import("prop-types").Requireable<string>;
+        onClick: import("prop-types").Requireable<(...args: any[]) => any>;
+        displayName: import("prop-types").Requireable<string>;
+        tooltipText: import("prop-types").Requireable<string>;
+    };
+    contextTypes: {
+        translate: import("prop-types").Requireable<(...args: any[]) => any>;
+    };
+};
+export default BattleOpponent;
+//# sourceMappingURL=index.d.ts.map

package/es/atom/battle-opponent/index.d.ts.map

@@ -0,0 +1 @@
+{"version":3,"file":"index.d.ts","sourceRoot":"","sources":["../../../src/atom/battle-opponent/index.tsx"],"names":[],"mappings":";AAKA,OAAO,EAAC,gBAAgB,EAAC,MAAM,yBAAyB,CAAC;AACzD,OAAkB,EAAC,mBAAmB,EAAC,MAAM,cAAc,CAAC;AAG5D,QAAA,MAAM,cAAc;uFAQf,mBAAmB,iBACP,gBAAgB;;;;;;;;;;;;CAsChC,CAAC;AAQF,eAAe,cAAc,CAAC"}

package/es/atom/battle-opponent/index.js

@@ -0,0 +1,52 @@
+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); }
+
+import React, { useMemo } from 'react';
+import classnames from 'classnames';
+import { NovaCompositionNavigationArrowRight as ArrowRight } from '@coorpacademy/nova-icons';
+import ToolTip from '../tooltip';
+import Provider, { GetTranslateFromContext } from '../provider';
+import propTypes from './prop-types';
+import style from './style.css';
+
+const BattleOpponent = ({
+  isAlreadyEngaged,
+  isRandom,
+  userAvatarSrc,
+  onClick,
+  displayName,
+  tooltipText
+}, legacyContext) => {
+  const translate = GetTranslateFromContext(legacyContext);
+  const wrapperClassnames = useMemo(() => classnames(style.card, style['opponent-card'], isRandom ? style.random : null), [isRandom]);
+  const displayNameClassnames = useMemo(() => classnames(style.name, isAlreadyEngaged ? style.alreadyEngaged : null), [isAlreadyEngaged]);
+  return /*#__PURE__*/React.createElement("div", _extends({}, !isAlreadyEngaged && {
+    onClick
+  }, {
+    className: wrapperClassnames,
+    "data-testid": "battle-opponent-wrapper"
+  }), /*#__PURE__*/React.createElement("div", {
+    className: style.avatar
+  }, isRandom ? null : /*#__PURE__*/React.createElement("img", {
+    src: userAvatarSrc,
+    "aria-hidden": "true"
+  })), /*#__PURE__*/React.createElement("p", {
+    className: displayNameClassnames
+  }, " ", displayName), isAlreadyEngaged ? /*#__PURE__*/React.createElement(ToolTip, {
+    fontSize: 12,
+    iconSize: "big",
+    TooltipContent: tooltipText,
+    closeToolTipInformationTextAriaLabel: translate('Press the escape key to close the information text'),
+    iconContainerClassName: style.infoIconTooltip
+  }) : /*#__PURE__*/React.createElement(ArrowRight, {
+    className: style.rightArrow,
+    width: 16,
+    height: 16
+  }));
+};
+
+BattleOpponent.propTypes = process.env.NODE_ENV !== "production" ? propTypes : {};
+BattleOpponent.contextTypes = {
+  translate: Provider.childContextTypes.translate
+};
+export default BattleOpponent;
+//# sourceMappingURL=index.js.map

package/es/atom/battle-opponent/index.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"index.js","names":["React","useMemo","classnames","NovaCompositionNavigationArrowRight","ArrowRight","ToolTip","Provider","GetTranslateFromContext","propTypes","style","BattleOpponent","isAlreadyEngaged","isRandom","userAvatarSrc","onClick","displayName","tooltipText","legacyContext","translate","wrapperClassnames","card","random","displayNameClassnames","name","alreadyEngaged","avatar","infoIconTooltip","rightArrow","contextTypes","childContextTypes"],"sources":["../../../src/atom/battle-opponent/index.tsx"],"sourcesContent":["import React, {useMemo} from 'react';\nimport classnames from 'classnames';\nimport {NovaCompositionNavigationArrowRight as ArrowRight} from '@coorpacademy/nova-icons';\nimport ToolTip from '../tooltip';\nimport Provider, {GetTranslateFromContext} from '../provider';\nimport {WebContextValues} from '../provider/web-context';\nimport propTypes, {BattleOpponentProps} from './prop-types';\nimport style from './style.css';\n\nconst BattleOpponent = (\n  {\n    isAlreadyEngaged,\n    isRandom,\n    userAvatarSrc,\n    onClick,\n    displayName,\n    tooltipText\n  }: BattleOpponentProps,\n  legacyContext: WebContextValues\n) => {\n  const translate: Required<WebContextValues>['translate'] = GetTranslateFromContext(legacyContext);\n  const wrapperClassnames = useMemo(\n    () => classnames(style.card, style['opponent-card'], isRandom ? style.random : null),\n    [isRandom]\n  );\n\n  const displayNameClassnames = useMemo(\n    () => classnames(style.name, isAlreadyEngaged ? style.alreadyEngaged : null),\n    [isAlreadyEngaged]\n  );\n\n  return (\n    <div\n      {...(!isAlreadyEngaged && {onClick})}\n      className={wrapperClassnames}\n      data-testid=\"battle-opponent-wrapper\"\n    >\n      <div className={style.avatar}>\n        {isRandom ? null : <img src={userAvatarSrc} aria-hidden=\"true\" />}\n      </div>\n      <p className={displayNameClassnames}> {displayName}</p>\n      {isAlreadyEngaged ? (\n        <ToolTip\n          fontSize={12}\n          iconSize=\"big\"\n          TooltipContent={tooltipText}\n          closeToolTipInformationTextAriaLabel={translate(\n            'Press the escape key to close the information text'\n          )}\n          iconContainerClassName={style.infoIconTooltip}\n        />\n      ) : (\n        <ArrowRight className={style.rightArrow} width={16} height={16} />\n      )}\n    </div>\n  );\n};\n\nBattleOpponent.propTypes = propTypes;\n\nBattleOpponent.contextTypes = {\n  translate: Provider.childContextTypes.translate\n};\n\nexport default BattleOpponent;\n"],"mappings":";;AAAA,OAAOA,KAAP,IAAeC,OAAf,QAA6B,OAA7B;AACA,OAAOC,UAAP,MAAuB,YAAvB;AACA,SAAQC,mCAAmC,IAAIC,UAA/C,QAAgE,0BAAhE;AACA,OAAOC,OAAP,MAAoB,YAApB;AACA,OAAOC,QAAP,IAAkBC,uBAAlB,QAAgD,aAAhD;AAEA,OAAOC,SAAP,MAA6C,cAA7C;AACA,OAAOC,KAAP,MAAkB,aAAlB;;AAEA,MAAMC,cAAc,GAAG,CACrB;EACEC,gBADF;EAEEC,QAFF;EAGEC,aAHF;EAIEC,OAJF;EAKEC,WALF;EAMEC;AANF,CADqB,EASrBC,aATqB,KAUlB;EACH,MAAMC,SAAkD,GAAGX,uBAAuB,CAACU,aAAD,CAAlF;EACA,MAAME,iBAAiB,GAAGlB,OAAO,CAC/B,MAAMC,UAAU,CAACO,KAAK,CAACW,IAAP,EAAaX,KAAK,CAAC,eAAD,CAAlB,EAAqCG,QAAQ,GAAGH,KAAK,CAACY,MAAT,GAAkB,IAA/D,CADe,EAE/B,CAACT,QAAD,CAF+B,CAAjC;EAKA,MAAMU,qBAAqB,GAAGrB,OAAO,CACnC,MAAMC,UAAU,CAACO,KAAK,CAACc,IAAP,EAAaZ,gBAAgB,GAAGF,KAAK,CAACe,cAAT,GAA0B,IAAvD,CADmB,EAEnC,CAACb,gBAAD,CAFmC,CAArC;EAKA,oBACE,wCACO,CAACA,gBAAD,IAAqB;IAACG;EAAD,CAD5B;IAEE,SAAS,EAAEK,iBAFb;IAGE,eAAY;EAHd,iBAKE;IAAK,SAAS,EAAEV,KAAK,CAACgB;EAAtB,GACGb,QAAQ,GAAG,IAAH,gBAAU;IAAK,GAAG,EAAEC,aAAV;IAAyB,eAAY;EAArC,EADrB,CALF,eAQE;IAAG,SAAS,EAAES;EAAd,QAAuCP,WAAvC,CARF,EASGJ,gBAAgB,gBACf,oBAAC,OAAD;IACE,QAAQ,EAAE,EADZ;IAEE,QAAQ,EAAC,KAFX;IAGE,cAAc,EAAEK,WAHlB;IAIE,oCAAoC,EAAEE,SAAS,CAC7C,oDAD6C,CAJjD;IAOE,sBAAsB,EAAET,KAAK,CAACiB;EAPhC,EADe,gBAWf,oBAAC,UAAD;IAAY,SAAS,EAAEjB,KAAK,CAACkB,UAA7B;IAAyC,KAAK,EAAE,EAAhD;IAAoD,MAAM,EAAE;EAA5D,EApBJ,CADF;AAyBD,CA/CD;;AAiDAjB,cAAc,CAACF,SAAf,2CAA2BA,SAA3B;AAEAE,cAAc,CAACkB,YAAf,GAA8B;EAC5BV,SAAS,EAAEZ,QAAQ,CAACuB,iBAAT,CAA2BX;AADV,CAA9B;AAIA,eAAeR,cAAf"}

package/es/atom/battle-opponent/prop-types.d.ts

@@ -0,0 +1,19 @@
+import PropTypes from 'prop-types';
+declare const propTypes: {
+    isAlreadyEngaged: PropTypes.Requireable<boolean>;
+    isRandom: PropTypes.Requireable<boolean>;
+    userAvatarSrc: PropTypes.Requireable<string>;
+    onClick: PropTypes.Requireable<(...args: any[]) => any>;
+    displayName: PropTypes.Requireable<string>;
+    tooltipText: PropTypes.Requireable<string>;
+};
+export declare type BattleOpponentProps = {
+    isAlreadyEngaged?: boolean;
+    isRandom?: boolean;
+    userAvatarSrc?: string;
+    onClick?: () => void;
+    displayName: string;
+    tooltipText?: string;
+};
+export default propTypes;
+//# sourceMappingURL=prop-types.d.ts.map

package/es/atom/battle-opponent/prop-types.d.ts.map

@@ -0,0 +1 @@
+{"version":3,"file":"prop-types.d.ts","sourceRoot":"","sources":["../../../src/atom/battle-opponent/prop-types.ts"],"names":[],"mappings":"AAAA,OAAO,SAAS,MAAM,YAAY,CAAC;AAEnC,QAAA,MAAM,SAAS;;;;;;;CAOd,CAAC;AAEF,oBAAY,mBAAmB,GAAG;IAChC,gBAAgB,CAAC,EAAE,OAAO,CAAC;IAC3B,QAAQ,CAAC,EAAE,OAAO,CAAC;IACnB,aAAa,CAAC,EAAE,MAAM,CAAC;IACvB,OAAO,CAAC,EAAE,MAAM,IAAI,CAAC;IACrB,WAAW,EAAE,MAAM,CAAC;IACpB,WAAW,CAAC,EAAE,MAAM,CAAC;CACtB,CAAC;AAEF,eAAe,SAAS,CAAC"}

package/es/atom/battle-opponent/prop-types.js

@@ -0,0 +1,11 @@
+import PropTypes from 'prop-types';
+const propTypes = {
+  isAlreadyEngaged: PropTypes.bool,
+  isRandom: PropTypes.bool,
+  userAvatarSrc: PropTypes.string,
+  onClick: PropTypes.func,
+  displayName: PropTypes.string,
+  tooltipText: PropTypes.string
+};
+export default propTypes;
+//# sourceMappingURL=prop-types.js.map

package/es/atom/battle-opponent/prop-types.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"prop-types.js","names":["PropTypes","propTypes","isAlreadyEngaged","bool","isRandom","userAvatarSrc","string","onClick","func","displayName","tooltipText"],"sources":["../../../src/atom/battle-opponent/prop-types.ts"],"sourcesContent":["import PropTypes from 'prop-types';\n\nconst propTypes = {\n  isAlreadyEngaged: PropTypes.bool,\n  isRandom: PropTypes.bool,\n  userAvatarSrc: PropTypes.string,\n  onClick: PropTypes.func,\n  displayName: PropTypes.string,\n  tooltipText: PropTypes.string\n};\n\nexport type BattleOpponentProps = {\n  isAlreadyEngaged?: boolean;\n  isRandom?: boolean;\n  userAvatarSrc?: string;\n  onClick?: () => void;\n  displayName: string;\n  tooltipText?: string;\n};\n\nexport default propTypes;\n"],"mappings":"AAAA,OAAOA,SAAP,MAAsB,YAAtB;AAEA,MAAMC,SAAS,GAAG;EAChBC,gBAAgB,EAAEF,SAAS,CAACG,IADZ;EAEhBC,QAAQ,EAAEJ,SAAS,CAACG,IAFJ;EAGhBE,aAAa,EAAEL,SAAS,CAACM,MAHT;EAIhBC,OAAO,EAAEP,SAAS,CAACQ,IAJH;EAKhBC,WAAW,EAAET,SAAS,CAACM,MALP;EAMhBI,WAAW,EAAEV,SAAS,CAACM;AANP,CAAlB;AAkBA,eAAeL,SAAf"}

package/es/atom/battle-opponent/style.css

@@ -0,0 +1,126 @@
+@value breakpoints: "../../variables/breakpoints.css";
+@value mobile from breakpoints;
+@value colors: "../../variables/colors.css";
+@value white from colors;
+@value dark from colors;
+@value black from colors;
+@value cm_grey_75 from colors;
+@value medium from colors;
+@value light from colors;
+@value brand from colors;
+
+.rightArrow {
+  position: flex;
+  padding: 9px;
+  cursor: pointer;
+  opacity: 1;
+  user-select: none;
+  text-align: right;
+  color: dark;
+}
+
+.card {
+  margin: 5px;
+}
+
+.opponent-card {
+  flex: 1 1 350px;
+  height: 80px;
+  background-color: white;
+  box-shadow: 0 0 4px 1px rgba(0,0,0,0.10);
+  border-radius: 3px;
+  padding: 20px;
+  box-sizing: border-box;
+  display: flex;
+  align-items: center;
+  justify-content: space-between;
+  cursor: pointer;
+}
+
+.opponent-card .name {
+  font-family: 'Gilroy';
+  font-size: 15px;
+  font-weight: 700;
+  color: black;
+  flex-grow: 1;
+}
+
+
+.opponent-card .rightArrow {
+  margin-left: 20px;
+}
+
+/* div:not(.random) */
+.avatar {
+  width: 50px;
+  height: 50px;
+  border-radius: 50%;
+  overflow: hidden;
+  background-color: light;
+  margin-right: 20px;
+  flex-shrink: 0;
+}
+
+.avatar img {
+  width: 100%;
+  height: auto;
+}
+
+
+.random {
+  color: medium;
+}
+
+.alreadyEngaged.name,
+.random .name {
+  color: medium;
+}
+
+.random .avatar {
+  background-color: brand;
+  display: flex;
+  align-items: center;
+  justify-content: center;
+}
+
+.random .avatar:before {
+  content: '?';
+  font-family: 'Gilroy';
+  font-size: 32px;
+  font-weight: 600;
+  color: white;
+  text-align: center;
+}
+
+.random .avatar img {
+  display: none;
+}
+
+.opponent-card:hover {
+  background-color: cm_grey_75;
+}
+
+.card .infoIconTooltip {
+  background: transparent;
+  /* height: 100%; */
+}
+
+@media mobile {
+  .opponent-card {
+    width: 100%;
+    padding: 10px;
+  }
+
+  .opponent-card .avatar {
+    margin-right: 10px;
+  }
+
+  .opponent-card .rightArrow {
+    margin-left: 10px;
+  }
+
+  .card {
+    margin: 0 0 10px;
+  }
+}
+

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

@@ -1,6 +1,6 @@
 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, iconContainerClassName, delayHide, fontSize }: {
+declare function ToolTip({ anchorId, TooltipContent, "aria-label": ariaLabel, "data-testid": dataTestId, closeToolTipInformationTextAriaLabel, toolTipIsVisible: _toolTipIsVisible, iconContainerClassName, delayHide, fontSize, iconSize }: {
     anchorId: any;
     TooltipContent: any;
     "aria-label": any;
@@ -10,6 +10,7 @@ declare function ToolTip({ anchorId, TooltipContent, "aria-label": ariaLabel, "d
     iconContainerClassName: any;
     delayHide?: number | undefined;
     fontSize?: number | undefined;
+    iconSize?: string | undefined;
 }): JSX.Element;
 declare namespace ToolTip {
     const propTypes: {
@@ -20,6 +21,7 @@ declare namespace ToolTip {
         iconContainerClassName: PropTypes.Requireable<string>;
         delayHide: PropTypes.Requireable<number>;
         fontSize: PropTypes.Requireable<number>;
+        iconSize: PropTypes.Requireable<string>;
         anchorId: PropTypes.Requireable<string>;
         toolTipIsVisible: PropTypes.Requireable<boolean>;
     };

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

@@ -1 +1 @@
-{"version":3,"file":"index.d.ts","sourceRoot":"","sources":["../../../src/atom/tooltip/index.js"],"names":[],"mappings":"AAwDO,iGASN;;AAED;;;;;;;;;;gBAwFC"}
+{"version":3,"file":"index.d.ts","sourceRoot":"","sources":["../../../src/atom/tooltip/index.js"],"names":[],"mappings":"AAmEO,iGASN;;AAED;;;;;;;;;;;gBA0FC"}

package/es/atom/tooltip/index.js

@@ -3,19 +3,25 @@ import classnames from 'classnames';
 import PropTypes from 'prop-types';
 import ReactTooltip from 'react-tooltip';
 import isString from 'lodash/fp/isString';
+import keys from 'lodash/fp/keys';
 import { NovaCompositionCoorpacademyInformationIcon as InformationIcon } from '@coorpacademy/nova-icons';
 import style from './style.css';
 const FontSizes = {
   12: style.tooltipContentFontSize12,
   14: style.tooltipContentFontSize14
 };
+const IconSizes = {
+  small: 12,
+  big: 20
+};
 
 const ToolTipWrapper = ({
   toolTipIsVisible,
   anchorId,
   closeToolTipInformationTextAriaLabel,
   content,
-  handleContentMouseOver
+  handleContentMouseOver,
+  iconSize
 }) => {
   if (!toolTipIsVisible) return null;
 
@@ -30,7 +36,7 @@ const ToolTipWrapper = ({
     }, content);
   } else {
     return /*#__PURE__*/React.createElement("div", {
-      className: style.toolTip,
+      className: classnames(style.toolTip, iconSize === 'big' ? style.bigIconToolTip : style.smallIconToolTip),
       "data-testid": "tooltip",
       "aria-label": closeToolTipInformationTextAriaLabel,
       onMouseOver: handleContentMouseOver
@@ -43,7 +49,8 @@ ToolTipWrapper.propTypes = process.env.NODE_ENV !== "production" ? {
   anchorId: PropTypes.string,
   closeToolTipInformationTextAriaLabel: PropTypes.string.isRequired,
   content: PropTypes.node,
-  handleContentMouseOver: PropTypes.func
+  handleContentMouseOver: PropTypes.func,
+  iconSize: PropTypes.oneOf(keys(IconSizes))
 } : {};
 export const toggleStateOnKeyPress = (state, setState, ref) => event => {
   if (event.key === 'Enter') {
@@ -65,7 +72,8 @@ const ToolTip = ({
   toolTipIsVisible: _toolTipIsVisible,
   iconContainerClassName,
   delayHide = 250,
-  fontSize = 14
+  fontSize = 14,
+  iconSize = 'small'
 }) => {
   const isComponent = useMemo(() => !isString(TooltipContent) && /*#__PURE__*/isValidElement(TooltipContent()), [TooltipContent]);
   const [toolTipIsVisible, setToolTipIsVisible] = useState(false);
@@ -110,8 +118,8 @@ const ToolTip = ({
     tabIndex: 0
   }, /*#__PURE__*/React.createElement(InformationIcon, {
     className: style.informationIcon,
-    width: 12,
-    height: 12,
+    width: IconSizes[iconSize],
+    height: IconSizes[iconSize],
     "aria-label": ariaLabel
   })), /*#__PURE__*/React.createElement(ToolTipWrapper, {
     toolTipIsVisible: toolTipIsVisible,
@@ -119,7 +127,8 @@ const ToolTip = ({
     closeToolTipInformationTextAriaLabel: closeToolTipInformationTextAriaLabel,
     content: content,
     handleContentMouseOver: handleContentMouseOver,
-    fontSize: fontSize
+    fontSize: fontSize,
+    iconSize: iconSize
   }));
 };
 
@@ -132,6 +141,7 @@ ToolTip.propTypes = process.env.NODE_ENV !== "production" ? {
   iconContainerClassName: PropTypes.string,
   delayHide: PropTypes.number,
   fontSize: PropTypes.oneOf([12, 14]),
+  iconSize: PropTypes.oneOf(keys(IconSizes)),
   // ----------  React Tooltip exclusive  --------------
   // externalHandling: if passed down, React Tooltip is used instead, due to limitations on
   // parents overflow hidden controls

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

@@ -1 +1 @@
-{"version":3,"file":"index.js","names":["React","isValidElement","useState","useCallback","useMemo","classnames","PropTypes","ReactTooltip","isString","NovaCompositionCoorpacademyInformationIcon","InformationIcon","style","FontSizes","tooltipContentFontSize12","tooltipContentFontSize14","ToolTipWrapper","toolTipIsVisible","anchorId","closeToolTipInformationTextAriaLabel","content","handleContentMouseOver","toolTipReact","toolTip","propTypes","bool","string","isRequired","node","func","toggleStateOnKeyPress","state","setState","ref","event","key","current","focus","stopPropagation","preventDefault","ToolTip","TooltipContent","ariaLabel","dataTestId","_toolTipIsVisible","iconContainerClassName","delayHide","fontSize","isComponent","setToolTipIsVisible","mouseLeaveTimer","setMouseLeaveTimer","undefined","handleKeyPress","clearTimeout","handleMouseOver","handleMouseLeave","setTimeout","tooltipContent","tooltipContainer","tooltipIconContainer","informationIcon","oneOfType","number","oneOf"],"sources":["../../../src/atom/tooltip/index.js"],"sourcesContent":["import React, {isValidElement, useState, useCallback, useMemo} from 'react';\nimport classnames from 'classnames';\nimport PropTypes from 'prop-types';\nimport ReactTooltip from 'react-tooltip';\nimport isString from 'lodash/fp/isString';\nimport {NovaCompositionCoorpacademyInformationIcon as InformationIcon} from '@coorpacademy/nova-icons';\nimport style from './style.css';\n\nconst FontSizes = {\n  12: style.tooltipContentFontSize12,\n  14: style.tooltipContentFontSize14\n};\n\nconst ToolTipWrapper = ({\n  toolTipIsVisible,\n  anchorId,\n  closeToolTipInformationTextAriaLabel,\n  content,\n  handleContentMouseOver\n}) => {\n  if (!toolTipIsVisible) return null;\n  if (anchorId) {\n    return (\n      <ReactTooltip\n        id={anchorId}\n        className={style.toolTipReact}\n        data-event-off=\"click\"\n        place=\"left\"\n        effect=\"solid\"\n        aria-label={closeToolTipInformationTextAriaLabel}\n      >\n        {content}\n      </ReactTooltip>\n    );\n  } else {\n    return (\n      <div\n        className={style.toolTip}\n        data-testid=\"tooltip\"\n        aria-label={closeToolTipInformationTextAriaLabel}\n        onMouseOver={handleContentMouseOver}\n      >\n        {content}\n      </div>\n    );\n  }\n};\n\nToolTipWrapper.propTypes = {\n  toolTipIsVisible: PropTypes.bool,\n  anchorId: PropTypes.string,\n  closeToolTipInformationTextAriaLabel: PropTypes.string.isRequired,\n  content: PropTypes.node,\n  handleContentMouseOver: PropTypes.func\n};\n\nexport const toggleStateOnKeyPress = (state, setState, ref) => event => {\n  if (event.key === 'Enter') {\n    if (ref) ref.current.focus();\n    event.stopPropagation();\n    event.preventDefault();\n    setState(!state);\n  } else if (event.key === 'Tab' || event.key === 'Escape') {\n    setState(false);\n  }\n};\n\nconst ToolTip = ({\n  anchorId,\n  TooltipContent,\n  'aria-label': ariaLabel,\n  'data-testid': dataTestId,\n  closeToolTipInformationTextAriaLabel,\n  toolTipIsVisible: _toolTipIsVisible,\n  iconContainerClassName,\n  delayHide = 250,\n  fontSize = 14\n}) => {\n  const isComponent = useMemo(\n    () => !isString(TooltipContent) && isValidElement(TooltipContent()),\n    [TooltipContent]\n  );\n\n  const [toolTipIsVisible, setToolTipIsVisible] = useState(false);\n\n  const [mouseLeaveTimer, setMouseLeaveTimer] = useState(undefined);\n\n  const handleKeyPress = useCallback(\n    event => {\n      toggleStateOnKeyPress(toolTipIsVisible, setToolTipIsVisible)(event);\n    },\n    [toolTipIsVisible]\n  );\n\n  const handleContentMouseOver = useCallback(() => {\n    mouseLeaveTimer && /* istanbul ignore next */ clearTimeout(mouseLeaveTimer);\n  }, [mouseLeaveTimer]);\n\n  const handleMouseOver = useCallback(() => {\n    mouseLeaveTimer && clearTimeout(mouseLeaveTimer);\n    setToolTipIsVisible(true);\n  }, [mouseLeaveTimer]);\n\n  const handleMouseLeave = useCallback(() => {\n    setMouseLeaveTimer(setTimeout(() => setToolTipIsVisible(false), delayHide));\n  }, [delayHide]);\n\n  const content = useMemo(() => {\n    return isComponent ? (\n      <TooltipContent />\n    ) : (\n      <p className={classnames([style.tooltipContent, FontSizes[fontSize]])}>{TooltipContent}</p>\n    );\n  }, [TooltipContent, fontSize, isComponent]);\n\n  return anchorId ? (\n    <ToolTipWrapper\n      toolTipIsVisible={_toolTipIsVisible}\n      anchorId={anchorId}\n      closeToolTipInformationTextAriaLabel={closeToolTipInformationTextAriaLabel}\n      content={content}\n      onMouseLeave={handleMouseLeave}\n      onMouseOver={handleMouseOver}\n      fontSize={fontSize}\n    />\n  ) : (\n    <div\n      className={style.tooltipContainer}\n      onMouseLeave={handleMouseLeave}\n      onMouseOver={handleMouseOver}\n    >\n      <button\n        type=\"button\"\n        className={classnames([style.tooltipIconContainer, iconContainerClassName])}\n        data-testid={dataTestId}\n        onKeyDown={handleKeyPress}\n        tabIndex={0}\n      >\n        <InformationIcon\n          className={style.informationIcon}\n          width={12}\n          height={12}\n          aria-label={ariaLabel}\n        />\n      </button>\n      <ToolTipWrapper\n        toolTipIsVisible={toolTipIsVisible}\n        anchorId={anchorId}\n        closeToolTipInformationTextAriaLabel={closeToolTipInformationTextAriaLabel}\n        content={content}\n        handleContentMouseOver={handleContentMouseOver}\n        fontSize={fontSize}\n      />\n    </div>\n  );\n};\n\nToolTip.propTypes = {\n  TooltipContent: PropTypes.oneOfType([PropTypes.func, PropTypes.node, PropTypes.string]),\n  'data-testid': PropTypes.string,\n  'aria-label': PropTypes.string,\n  closeToolTipInformationTextAriaLabel: PropTypes.string.isRequired,\n  // ---------- Regular Tooltip exclusive --------------\n  iconContainerClassName: PropTypes.string,\n  delayHide: PropTypes.number,\n  fontSize: PropTypes.oneOf([12, 14]),\n  // ----------  React Tooltip exclusive  --------------\n  // externalHandling: if passed down, React Tooltip is used instead, due to limitations on\n  // parents overflow hidden controls\n  anchorId: PropTypes.string,\n  toolTipIsVisible: PropTypes.bool\n};\n\nexport default ToolTip;\n"],"mappings":"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"}
+{"version":3,"file":"index.js","names":["React","isValidElement","useState","useCallback","useMemo","classnames","PropTypes","ReactTooltip","isString","keys","NovaCompositionCoorpacademyInformationIcon","InformationIcon","style","FontSizes","tooltipContentFontSize12","tooltipContentFontSize14","IconSizes","small","big","ToolTipWrapper","toolTipIsVisible","anchorId","closeToolTipInformationTextAriaLabel","content","handleContentMouseOver","iconSize","toolTipReact","toolTip","bigIconToolTip","smallIconToolTip","propTypes","bool","string","isRequired","node","func","oneOf","toggleStateOnKeyPress","state","setState","ref","event","key","current","focus","stopPropagation","preventDefault","ToolTip","TooltipContent","ariaLabel","dataTestId","_toolTipIsVisible","iconContainerClassName","delayHide","fontSize","isComponent","setToolTipIsVisible","mouseLeaveTimer","setMouseLeaveTimer","undefined","handleKeyPress","clearTimeout","handleMouseOver","handleMouseLeave","setTimeout","tooltipContent","tooltipContainer","tooltipIconContainer","informationIcon","oneOfType","number"],"sources":["../../../src/atom/tooltip/index.js"],"sourcesContent":["import React, {isValidElement, useState, useCallback, useMemo} from 'react';\nimport classnames from 'classnames';\nimport PropTypes from 'prop-types';\nimport ReactTooltip from 'react-tooltip';\nimport isString from 'lodash/fp/isString';\nimport keys from 'lodash/fp/keys';\nimport {NovaCompositionCoorpacademyInformationIcon as InformationIcon} from '@coorpacademy/nova-icons';\nimport style from './style.css';\n\nconst FontSizes = {\n  12: style.tooltipContentFontSize12,\n  14: style.tooltipContentFontSize14\n};\n\nconst IconSizes = {\n  small: 12,\n  big: 20\n};\n\nconst ToolTipWrapper = ({\n  toolTipIsVisible,\n  anchorId,\n  closeToolTipInformationTextAriaLabel,\n  content,\n  handleContentMouseOver,\n  iconSize\n}) => {\n  if (!toolTipIsVisible) return null;\n  if (anchorId) {\n    return (\n      <ReactTooltip\n        id={anchorId}\n        className={style.toolTipReact}\n        data-event-off=\"click\"\n        place=\"left\"\n        effect=\"solid\"\n        aria-label={closeToolTipInformationTextAriaLabel}\n      >\n        {content}\n      </ReactTooltip>\n    );\n  } else {\n    return (\n      <div\n        className={classnames(\n          style.toolTip,\n          iconSize === 'big' ? style.bigIconToolTip : style.smallIconToolTip\n        )}\n        data-testid=\"tooltip\"\n        aria-label={closeToolTipInformationTextAriaLabel}\n        onMouseOver={handleContentMouseOver}\n      >\n        {content}\n      </div>\n    );\n  }\n};\n\nToolTipWrapper.propTypes = {\n  toolTipIsVisible: PropTypes.bool,\n  anchorId: PropTypes.string,\n  closeToolTipInformationTextAriaLabel: PropTypes.string.isRequired,\n  content: PropTypes.node,\n  handleContentMouseOver: PropTypes.func,\n  iconSize: PropTypes.oneOf(keys(IconSizes))\n};\n\nexport const toggleStateOnKeyPress = (state, setState, ref) => event => {\n  if (event.key === 'Enter') {\n    if (ref) ref.current.focus();\n    event.stopPropagation();\n    event.preventDefault();\n    setState(!state);\n  } else if (event.key === 'Tab' || event.key === 'Escape') {\n    setState(false);\n  }\n};\n\nconst ToolTip = ({\n  anchorId,\n  TooltipContent,\n  'aria-label': ariaLabel,\n  'data-testid': dataTestId,\n  closeToolTipInformationTextAriaLabel,\n  toolTipIsVisible: _toolTipIsVisible,\n  iconContainerClassName,\n  delayHide = 250,\n  fontSize = 14,\n  iconSize = 'small'\n}) => {\n  const isComponent = useMemo(\n    () => !isString(TooltipContent) && isValidElement(TooltipContent()),\n    [TooltipContent]\n  );\n\n  const [toolTipIsVisible, setToolTipIsVisible] = useState(false);\n\n  const [mouseLeaveTimer, setMouseLeaveTimer] = useState(undefined);\n\n  const handleKeyPress = useCallback(\n    event => {\n      toggleStateOnKeyPress(toolTipIsVisible, setToolTipIsVisible)(event);\n    },\n    [toolTipIsVisible]\n  );\n\n  const handleContentMouseOver = useCallback(() => {\n    mouseLeaveTimer && /* istanbul ignore next */ clearTimeout(mouseLeaveTimer);\n  }, [mouseLeaveTimer]);\n\n  const handleMouseOver = useCallback(() => {\n    mouseLeaveTimer && clearTimeout(mouseLeaveTimer);\n    setToolTipIsVisible(true);\n  }, [mouseLeaveTimer]);\n\n  const handleMouseLeave = useCallback(() => {\n    setMouseLeaveTimer(setTimeout(() => setToolTipIsVisible(false), delayHide));\n  }, [delayHide]);\n\n  const content = useMemo(() => {\n    return isComponent ? (\n      <TooltipContent />\n    ) : (\n      <p className={classnames([style.tooltipContent, FontSizes[fontSize]])}>{TooltipContent}</p>\n    );\n  }, [TooltipContent, fontSize, isComponent]);\n\n  return anchorId ? (\n    <ToolTipWrapper\n      toolTipIsVisible={_toolTipIsVisible}\n      anchorId={anchorId}\n      closeToolTipInformationTextAriaLabel={closeToolTipInformationTextAriaLabel}\n      content={content}\n      onMouseLeave={handleMouseLeave}\n      onMouseOver={handleMouseOver}\n      fontSize={fontSize}\n    />\n  ) : (\n    <div\n      className={style.tooltipContainer}\n      onMouseLeave={handleMouseLeave}\n      onMouseOver={handleMouseOver}\n    >\n      <button\n        type=\"button\"\n        className={classnames([style.tooltipIconContainer, iconContainerClassName])}\n        data-testid={dataTestId}\n        onKeyDown={handleKeyPress}\n        tabIndex={0}\n      >\n        <InformationIcon\n          className={style.informationIcon}\n          width={IconSizes[iconSize]}\n          height={IconSizes[iconSize]}\n          aria-label={ariaLabel}\n        />\n      </button>\n      <ToolTipWrapper\n        toolTipIsVisible={toolTipIsVisible}\n        anchorId={anchorId}\n        closeToolTipInformationTextAriaLabel={closeToolTipInformationTextAriaLabel}\n        content={content}\n        handleContentMouseOver={handleContentMouseOver}\n        fontSize={fontSize}\n        iconSize={iconSize}\n      />\n    </div>\n  );\n};\n\nToolTip.propTypes = {\n  TooltipContent: PropTypes.oneOfType([PropTypes.func, PropTypes.node, PropTypes.string]),\n  'data-testid': PropTypes.string,\n  'aria-label': PropTypes.string,\n  closeToolTipInformationTextAriaLabel: PropTypes.string.isRequired,\n  // ---------- Regular Tooltip exclusive --------------\n  iconContainerClassName: PropTypes.string,\n  delayHide: PropTypes.number,\n  fontSize: PropTypes.oneOf([12, 14]),\n  iconSize: PropTypes.oneOf(keys(IconSizes)),\n  // ----------  React Tooltip exclusive  --------------\n  // externalHandling: if passed down, React Tooltip is used instead, due to limitations on\n  // parents overflow hidden controls\n  anchorId: PropTypes.string,\n  toolTipIsVisible: PropTypes.bool\n};\n\nexport default ToolTip;\n"],"mappings":"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"}

package/es/atom/tooltip/style.css

@@ -34,12 +34,20 @@
   position: absolute;
   border-radius: 7px;
   background-color: cm_grey_700;
-  right: -75px;
-  bottom: 32px;
   height: auto;
   width: 200px;
 }
 
+.bigIconToolTip {
+  right: -71px;
+  bottom: 31px;
+}
+
+.smallIconToolTip {
+  right: -75px;
+  bottom: 32px;
+}
+
 .toolTip::before {
   content: '';
   display: inline-block;

package/es/globals.d.js.map

@@ -1 +1 @@
-{"version":3,"file":"globals.d.js","names":[],"sources":["../src/globals.d.ts"],"sourcesContent":["declare module '@coorpacademy/nova-icons';\ndeclare module '@coorpacademy/react-native-slider';\ndeclare module '@react-native-community/blur';\ndeclare module '@coorpacademy/translate';\ndeclare module 'react-native/*';\ndeclare module 'color';\ndeclare module 'classnames';\ndeclare module '*.css';\n"],"mappings":""}
+{"version":3,"file":"globals.d.js","names":[],"sources":["../src/globals.d.ts"],"sourcesContent":["declare module '@coorpacademy/nova-icons';\ndeclare module '@coorpacademy/react-native-slider';\ndeclare module '@react-native-community/blur';\ndeclare module '@coorpacademy/translate';\ndeclare module 'browser-env';\ndeclare module 'react-native/*';\ndeclare module 'color';\ndeclare module 'classnames';\ndeclare module '*.css';\n"],"mappings":""}

package/lib/atom/battle-opponent/index.d.ts

@@ -0,0 +1,19 @@
+/// <reference types="react" />
+import { WebContextValues } from '../provider/web-context';
+import { BattleOpponentProps } from './prop-types';
+declare const BattleOpponent: {
+    ({ isAlreadyEngaged, isRandom, userAvatarSrc, onClick, displayName, tooltipText }: BattleOpponentProps, legacyContext: WebContextValues): JSX.Element;
+    propTypes: {
+        isAlreadyEngaged: import("prop-types").Requireable<boolean>;
+        isRandom: import("prop-types").Requireable<boolean>;
+        userAvatarSrc: import("prop-types").Requireable<string>;
+        onClick: import("prop-types").Requireable<(...args: any[]) => any>;
+        displayName: import("prop-types").Requireable<string>;
+        tooltipText: import("prop-types").Requireable<string>;
+    };
+    contextTypes: {
+        translate: import("prop-types").Requireable<(...args: any[]) => any>;
+    };
+};
+export default BattleOpponent;
+//# sourceMappingURL=index.d.ts.map

package/lib/atom/battle-opponent/index.d.ts.map

@@ -0,0 +1 @@
+{"version":3,"file":"index.d.ts","sourceRoot":"","sources":["../../../src/atom/battle-opponent/index.tsx"],"names":[],"mappings":";AAKA,OAAO,EAAC,gBAAgB,EAAC,MAAM,yBAAyB,CAAC;AACzD,OAAkB,EAAC,mBAAmB,EAAC,MAAM,cAAc,CAAC;AAG5D,QAAA,MAAM,cAAc;uFAQf,mBAAmB,iBACP,gBAAgB;;;;;;;;;;;;CAsChC,CAAC;AAQF,eAAe,cAAc,CAAC"}

package/lib/atom/battle-opponent/index.js

@@ -0,0 +1,70 @@
+"use strict";
+
+exports.__esModule = true;
+exports.default = void 0;
+
+var _react = _interopRequireWildcard(require("react"));
+
+var _classnames = _interopRequireDefault(require("classnames"));
+
+var _novaIcons = require("@coorpacademy/nova-icons");
+
+var _tooltip = _interopRequireDefault(require("../tooltip"));
+
+var _provider = _interopRequireWildcard(require("../provider"));
+
+var _propTypes = _interopRequireDefault(require("./prop-types"));
+
+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; }
+
+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 BattleOpponent = ({
+  isAlreadyEngaged,
+  isRandom,
+  userAvatarSrc,
+  onClick,
+  displayName,
+  tooltipText
+}, legacyContext) => {
+  const translate = (0, _provider.GetTranslateFromContext)(legacyContext);
+  const wrapperClassnames = (0, _react.useMemo)(() => (0, _classnames.default)(_style.default.card, _style.default['opponent-card'], isRandom ? _style.default.random : null), [isRandom]);
+  const displayNameClassnames = (0, _react.useMemo)(() => (0, _classnames.default)(_style.default.name, isAlreadyEngaged ? _style.default.alreadyEngaged : null), [isAlreadyEngaged]);
+  return /*#__PURE__*/_react.default.createElement("div", _extends({}, !isAlreadyEngaged && {
+    onClick
+  }, {
+    className: wrapperClassnames,
+    "data-testid": "battle-opponent-wrapper"
+  }), /*#__PURE__*/_react.default.createElement("div", {
+    className: _style.default.avatar
+  }, isRandom ? null : /*#__PURE__*/_react.default.createElement("img", {
+    src: userAvatarSrc,
+    "aria-hidden": "true"
+  })), /*#__PURE__*/_react.default.createElement("p", {
+    className: displayNameClassnames
+  }, " ", displayName), isAlreadyEngaged ? /*#__PURE__*/_react.default.createElement(_tooltip.default, {
+    fontSize: 12,
+    iconSize: "big",
+    TooltipContent: tooltipText,
+    closeToolTipInformationTextAriaLabel: translate('Press the escape key to close the information text'),
+    iconContainerClassName: _style.default.infoIconTooltip
+  }) : /*#__PURE__*/_react.default.createElement(_novaIcons.NovaCompositionNavigationArrowRight, {
+    className: _style.default.rightArrow,
+    width: 16,
+    height: 16
+  }));
+};
+
+BattleOpponent.propTypes = process.env.NODE_ENV !== "production" ? _propTypes.default : {};
+BattleOpponent.contextTypes = {
+  translate: _provider.default.childContextTypes.translate
+};
+var _default = BattleOpponent;
+exports.default = _default;
+//# sourceMappingURL=index.js.map

package/lib/atom/battle-opponent/index.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"index.js","names":["BattleOpponent","isAlreadyEngaged","isRandom","userAvatarSrc","onClick","displayName","tooltipText","legacyContext","translate","GetTranslateFromContext","wrapperClassnames","useMemo","classnames","style","card","random","displayNameClassnames","name","alreadyEngaged","avatar","infoIconTooltip","rightArrow","propTypes","contextTypes","Provider","childContextTypes"],"sources":["../../../src/atom/battle-opponent/index.tsx"],"sourcesContent":["import React, {useMemo} from 'react';\nimport classnames from 'classnames';\nimport {NovaCompositionNavigationArrowRight as ArrowRight} from '@coorpacademy/nova-icons';\nimport ToolTip from '../tooltip';\nimport Provider, {GetTranslateFromContext} from '../provider';\nimport {WebContextValues} from '../provider/web-context';\nimport propTypes, {BattleOpponentProps} from './prop-types';\nimport style from './style.css';\n\nconst BattleOpponent = (\n  {\n    isAlreadyEngaged,\n    isRandom,\n    userAvatarSrc,\n    onClick,\n    displayName,\n    tooltipText\n  }: BattleOpponentProps,\n  legacyContext: WebContextValues\n) => {\n  const translate: Required<WebContextValues>['translate'] = GetTranslateFromContext(legacyContext);\n  const wrapperClassnames = useMemo(\n    () => classnames(style.card, style['opponent-card'], isRandom ? style.random : null),\n    [isRandom]\n  );\n\n  const displayNameClassnames = useMemo(\n    () => classnames(style.name, isAlreadyEngaged ? style.alreadyEngaged : null),\n    [isAlreadyEngaged]\n  );\n\n  return (\n    <div\n      {...(!isAlreadyEngaged && {onClick})}\n      className={wrapperClassnames}\n      data-testid=\"battle-opponent-wrapper\"\n    >\n      <div className={style.avatar}>\n        {isRandom ? null : <img src={userAvatarSrc} aria-hidden=\"true\" />}\n      </div>\n      <p className={displayNameClassnames}> {displayName}</p>\n      {isAlreadyEngaged ? (\n        <ToolTip\n          fontSize={12}\n          iconSize=\"big\"\n          TooltipContent={tooltipText}\n          closeToolTipInformationTextAriaLabel={translate(\n            'Press the escape key to close the information text'\n          )}\n          iconContainerClassName={style.infoIconTooltip}\n        />\n      ) : (\n        <ArrowRight className={style.rightArrow} width={16} height={16} />\n      )}\n    </div>\n  );\n};\n\nBattleOpponent.propTypes = propTypes;\n\nBattleOpponent.contextTypes = {\n  translate: Provider.childContextTypes.translate\n};\n\nexport default BattleOpponent;\n"],"mappings":";;;;;AAAA;;AACA;;AACA;;AACA;;AACA;;AAEA;;AACA;;;;;;;;;;AAEA,MAAMA,cAAc,GAAG,CACrB;EACEC,gBADF;EAEEC,QAFF;EAGEC,aAHF;EAIEC,OAJF;EAKEC,WALF;EAMEC;AANF,CADqB,EASrBC,aATqB,KAUlB;EACH,MAAMC,SAAkD,GAAG,IAAAC,iCAAA,EAAwBF,aAAxB,CAA3D;EACA,MAAMG,iBAAiB,GAAG,IAAAC,cAAA,EACxB,MAAM,IAAAC,mBAAA,EAAWC,cAAA,CAAMC,IAAjB,EAAuBD,cAAA,CAAM,eAAN,CAAvB,EAA+CX,QAAQ,GAAGW,cAAA,CAAME,MAAT,GAAkB,IAAzE,CADkB,EAExB,CAACb,QAAD,CAFwB,CAA1B;EAKA,MAAMc,qBAAqB,GAAG,IAAAL,cAAA,EAC5B,MAAM,IAAAC,mBAAA,EAAWC,cAAA,CAAMI,IAAjB,EAAuBhB,gBAAgB,GAAGY,cAAA,CAAMK,cAAT,GAA0B,IAAjE,CADsB,EAE5B,CAACjB,gBAAD,CAF4B,CAA9B;EAKA,oBACE,iDACO,CAACA,gBAAD,IAAqB;IAACG;EAAD,CAD5B;IAEE,SAAS,EAAEM,iBAFb;IAGE,eAAY;EAHd,iBAKE;IAAK,SAAS,EAAEG,cAAA,CAAMM;EAAtB,GACGjB,QAAQ,GAAG,IAAH,gBAAU;IAAK,GAAG,EAAEC,aAAV;IAAyB,eAAY;EAArC,EADrB,CALF,eAQE;IAAG,SAAS,EAAEa;EAAd,QAAuCX,WAAvC,CARF,EASGJ,gBAAgB,gBACf,6BAAC,gBAAD;IACE,QAAQ,EAAE,EADZ;IAEE,QAAQ,EAAC,KAFX;IAGE,cAAc,EAAEK,WAHlB;IAIE,oCAAoC,EAAEE,SAAS,CAC7C,oDAD6C,CAJjD;IAOE,sBAAsB,EAAEK,cAAA,CAAMO;EAPhC,EADe,gBAWf,6BAAC,8CAAD;IAAY,SAAS,EAAEP,cAAA,CAAMQ,UAA7B;IAAyC,KAAK,EAAE,EAAhD;IAAoD,MAAM,EAAE;EAA5D,EApBJ,CADF;AAyBD,CA/CD;;AAiDArB,cAAc,CAACsB,SAAf,2CAA2BA,kBAA3B;AAEAtB,cAAc,CAACuB,YAAf,GAA8B;EAC5Bf,SAAS,EAAEgB,iBAAA,CAASC,iBAAT,CAA2BjB;AADV,CAA9B;eAIeR,c"}

package/lib/atom/battle-opponent/prop-types.d.ts

@@ -0,0 +1,19 @@
+import PropTypes from 'prop-types';
+declare const propTypes: {
+    isAlreadyEngaged: PropTypes.Requireable<boolean>;
+    isRandom: PropTypes.Requireable<boolean>;
+    userAvatarSrc: PropTypes.Requireable<string>;
+    onClick: PropTypes.Requireable<(...args: any[]) => any>;
+    displayName: PropTypes.Requireable<string>;
+    tooltipText: PropTypes.Requireable<string>;
+};
+export declare type BattleOpponentProps = {
+    isAlreadyEngaged?: boolean;
+    isRandom?: boolean;
+    userAvatarSrc?: string;
+    onClick?: () => void;
+    displayName: string;
+    tooltipText?: string;
+};
+export default propTypes;
+//# sourceMappingURL=prop-types.d.ts.map

package/lib/atom/battle-opponent/prop-types.d.ts.map

@@ -0,0 +1 @@
+{"version":3,"file":"prop-types.d.ts","sourceRoot":"","sources":["../../../src/atom/battle-opponent/prop-types.ts"],"names":[],"mappings":"AAAA,OAAO,SAAS,MAAM,YAAY,CAAC;AAEnC,QAAA,MAAM,SAAS;;;;;;;CAOd,CAAC;AAEF,oBAAY,mBAAmB,GAAG;IAChC,gBAAgB,CAAC,EAAE,OAAO,CAAC;IAC3B,QAAQ,CAAC,EAAE,OAAO,CAAC;IACnB,aAAa,CAAC,EAAE,MAAM,CAAC;IACvB,OAAO,CAAC,EAAE,MAAM,IAAI,CAAC;IACrB,WAAW,EAAE,MAAM,CAAC;IACpB,WAAW,CAAC,EAAE,MAAM,CAAC;CACtB,CAAC;AAEF,eAAe,SAAS,CAAC"}

package/lib/atom/battle-opponent/prop-types.js

@@ -0,0 +1,20 @@
+"use strict";
+
+exports.__esModule = true;
+exports.default = void 0;
+
+var _propTypes = _interopRequireDefault(require("prop-types"));
+
+function _interopRequireDefault(obj) { return obj && obj.__esModule ? obj : { default: obj }; }
+
+const propTypes = {
+  isAlreadyEngaged: _propTypes.default.bool,
+  isRandom: _propTypes.default.bool,
+  userAvatarSrc: _propTypes.default.string,
+  onClick: _propTypes.default.func,
+  displayName: _propTypes.default.string,
+  tooltipText: _propTypes.default.string
+};
+var _default = propTypes;
+exports.default = _default;
+//# sourceMappingURL=prop-types.js.map

package/lib/atom/battle-opponent/prop-types.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"prop-types.js","names":["propTypes","isAlreadyEngaged","PropTypes","bool","isRandom","userAvatarSrc","string","onClick","func","displayName","tooltipText"],"sources":["../../../src/atom/battle-opponent/prop-types.ts"],"sourcesContent":["import PropTypes from 'prop-types';\n\nconst propTypes = {\n  isAlreadyEngaged: PropTypes.bool,\n  isRandom: PropTypes.bool,\n  userAvatarSrc: PropTypes.string,\n  onClick: PropTypes.func,\n  displayName: PropTypes.string,\n  tooltipText: PropTypes.string\n};\n\nexport type BattleOpponentProps = {\n  isAlreadyEngaged?: boolean;\n  isRandom?: boolean;\n  userAvatarSrc?: string;\n  onClick?: () => void;\n  displayName: string;\n  tooltipText?: string;\n};\n\nexport default propTypes;\n"],"mappings":";;;;;AAAA;;;;AAEA,MAAMA,SAAS,GAAG;EAChBC,gBAAgB,EAAEC,kBAAA,CAAUC,IADZ;EAEhBC,QAAQ,EAAEF,kBAAA,CAAUC,IAFJ;EAGhBE,aAAa,EAAEH,kBAAA,CAAUI,MAHT;EAIhBC,OAAO,EAAEL,kBAAA,CAAUM,IAJH;EAKhBC,WAAW,EAAEP,kBAAA,CAAUI,MALP;EAMhBI,WAAW,EAAER,kBAAA,CAAUI;AANP,CAAlB;eAkBeN,S"}

package/lib/atom/battle-opponent/style.css

@@ -0,0 +1,126 @@
+@value breakpoints: "../../variables/breakpoints.css";
+@value mobile from breakpoints;
+@value colors: "../../variables/colors.css";
+@value white from colors;
+@value dark from colors;
+@value black from colors;
+@value cm_grey_75 from colors;
+@value medium from colors;
+@value light from colors;
+@value brand from colors;
+
+.rightArrow {
+  position: flex;
+  padding: 9px;
+  cursor: pointer;
+  opacity: 1;
+  user-select: none;
+  text-align: right;
+  color: dark;
+}
+
+.card {
+  margin: 5px;
+}
+
+.opponent-card {
+  flex: 1 1 350px;
+  height: 80px;
+  background-color: white;
+  box-shadow: 0 0 4px 1px rgba(0,0,0,0.10);
+  border-radius: 3px;
+  padding: 20px;
+  box-sizing: border-box;
+  display: flex;
+  align-items: center;
+  justify-content: space-between;
+  cursor: pointer;
+}
+
+.opponent-card .name {
+  font-family: 'Gilroy';
+  font-size: 15px;
+  font-weight: 700;
+  color: black;
+  flex-grow: 1;
+}
+
+
+.opponent-card .rightArrow {
+  margin-left: 20px;
+}
+
+/* div:not(.random) */
+.avatar {
+  width: 50px;
+  height: 50px;
+  border-radius: 50%;
+  overflow: hidden;
+  background-color: light;
+  margin-right: 20px;
+  flex-shrink: 0;
+}
+
+.avatar img {
+  width: 100%;
+  height: auto;
+}
+
+
+.random {
+  color: medium;
+}
+
+.alreadyEngaged.name,
+.random .name {
+  color: medium;
+}
+
+.random .avatar {
+  background-color: brand;
+  display: flex;
+  align-items: center;
+  justify-content: center;
+}
+
+.random .avatar:before {
+  content: '?';
+  font-family: 'Gilroy';
+  font-size: 32px;
+  font-weight: 600;
+  color: white;
+  text-align: center;
+}
+
+.random .avatar img {
+  display: none;
+}
+
+.opponent-card:hover {
+  background-color: cm_grey_75;
+}
+
+.card .infoIconTooltip {
+  background: transparent;
+  /* height: 100%; */
+}
+
+@media mobile {
+  .opponent-card {
+    width: 100%;
+    padding: 10px;
+  }
+
+  .opponent-card .avatar {
+    margin-right: 10px;
+  }
+
+  .opponent-card .rightArrow {
+    margin-left: 10px;
+  }
+
+  .card {
+    margin: 0 0 10px;
+  }
+}
+

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

@@ -1,6 +1,6 @@
 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, iconContainerClassName, delayHide, fontSize }: {
+declare function ToolTip({ anchorId, TooltipContent, "aria-label": ariaLabel, "data-testid": dataTestId, closeToolTipInformationTextAriaLabel, toolTipIsVisible: _toolTipIsVisible, iconContainerClassName, delayHide, fontSize, iconSize }: {
     anchorId: any;
     TooltipContent: any;
     "aria-label": any;
@@ -10,6 +10,7 @@ declare function ToolTip({ anchorId, TooltipContent, "aria-label": ariaLabel, "d
     iconContainerClassName: any;
     delayHide?: number | undefined;
     fontSize?: number | undefined;
+    iconSize?: string | undefined;
 }): JSX.Element;
 declare namespace ToolTip {
     const propTypes: {
@@ -20,6 +21,7 @@ declare namespace ToolTip {
         iconContainerClassName: PropTypes.Requireable<string>;
         delayHide: PropTypes.Requireable<number>;
         fontSize: PropTypes.Requireable<number>;
+        iconSize: PropTypes.Requireable<string>;
         anchorId: PropTypes.Requireable<string>;
         toolTipIsVisible: PropTypes.Requireable<boolean>;
     };

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

@@ -1 +1 @@
-{"version":3,"file":"index.d.ts","sourceRoot":"","sources":["../../../src/atom/tooltip/index.js"],"names":[],"mappings":"AAwDO,iGASN;;AAED;;;;;;;;;;gBAwFC"}
+{"version":3,"file":"index.d.ts","sourceRoot":"","sources":["../../../src/atom/tooltip/index.js"],"names":[],"mappings":"AAmEO,iGASN;;AAED;;;;;;;;;;;gBA0FC"}

package/lib/atom/tooltip/index.js

@@ -13,6 +13,8 @@ var _reactTooltip = _interopRequireDefault(require("react-tooltip"));
 
 var _isString = _interopRequireDefault(require("lodash/fp/isString"));
 
+var _keys = _interopRequireDefault(require("lodash/fp/keys"));
+
 var _novaIcons = require("@coorpacademy/nova-icons");
 
 var _style = _interopRequireDefault(require("./style.css"));
@@ -27,13 +29,18 @@ const FontSizes = {
   12: _style.default.tooltipContentFontSize12,
   14: _style.default.tooltipContentFontSize14
 };
+const IconSizes = {
+  small: 12,
+  big: 20
+};
 
 const ToolTipWrapper = ({
   toolTipIsVisible,
   anchorId,
   closeToolTipInformationTextAriaLabel,
   content,
-  handleContentMouseOver
+  handleContentMouseOver,
+  iconSize
 }) => {
   if (!toolTipIsVisible) return null;
 
@@ -48,7 +55,7 @@ const ToolTipWrapper = ({
     }, content);
   } else {
     return /*#__PURE__*/_react.default.createElement("div", {
-      className: _style.default.toolTip,
+      className: (0, _classnames.default)(_style.default.toolTip, iconSize === 'big' ? _style.default.bigIconToolTip : _style.default.smallIconToolTip),
       "data-testid": "tooltip",
       "aria-label": closeToolTipInformationTextAriaLabel,
       onMouseOver: handleContentMouseOver
@@ -61,7 +68,8 @@ ToolTipWrapper.propTypes = process.env.NODE_ENV !== "production" ? {
   anchorId: _propTypes.default.string,
   closeToolTipInformationTextAriaLabel: _propTypes.default.string.isRequired,
   content: _propTypes.default.node,
-  handleContentMouseOver: _propTypes.default.func
+  handleContentMouseOver: _propTypes.default.func,
+  iconSize: _propTypes.default.oneOf((0, _keys.default)(IconSizes))
 } : {};
 
 const toggleStateOnKeyPress = (state, setState, ref) => event => {
@@ -86,7 +94,8 @@ const ToolTip = ({
   toolTipIsVisible: _toolTipIsVisible,
   iconContainerClassName,
   delayHide = 250,
-  fontSize = 14
+  fontSize = 14,
+  iconSize = 'small'
 }) => {
   const isComponent = (0, _react.useMemo)(() => !(0, _isString.default)(TooltipContent) && /*#__PURE__*/(0, _react.isValidElement)(TooltipContent()), [TooltipContent]);
   const [toolTipIsVisible, setToolTipIsVisible] = (0, _react.useState)(false);
@@ -131,8 +140,8 @@ const ToolTip = ({
     tabIndex: 0
   }, /*#__PURE__*/_react.default.createElement(_novaIcons.NovaCompositionCoorpacademyInformationIcon, {
     className: _style.default.informationIcon,
-    width: 12,
-    height: 12,
+    width: IconSizes[iconSize],
+    height: IconSizes[iconSize],
     "aria-label": ariaLabel
   })), /*#__PURE__*/_react.default.createElement(ToolTipWrapper, {
     toolTipIsVisible: toolTipIsVisible,
@@ -140,7 +149,8 @@ const ToolTip = ({
     closeToolTipInformationTextAriaLabel: closeToolTipInformationTextAriaLabel,
     content: content,
     handleContentMouseOver: handleContentMouseOver,
-    fontSize: fontSize
+    fontSize: fontSize,
+    iconSize: iconSize
   }));
 };
 
@@ -153,6 +163,7 @@ ToolTip.propTypes = process.env.NODE_ENV !== "production" ? {
   iconContainerClassName: _propTypes.default.string,
   delayHide: _propTypes.default.number,
   fontSize: _propTypes.default.oneOf([12, 14]),
+  iconSize: _propTypes.default.oneOf((0, _keys.default)(IconSizes)),
   // ----------  React Tooltip exclusive  --------------
   // externalHandling: if passed down, React Tooltip is used instead, due to limitations on
   // parents overflow hidden controls

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

@@ -1 +1 @@
-{"version":3,"file":"index.js","names":["FontSizes","style","tooltipContentFontSize12","tooltipContentFontSize14","ToolTipWrapper","toolTipIsVisible","anchorId","closeToolTipInformationTextAriaLabel","content","handleContentMouseOver","toolTipReact","toolTip","propTypes","PropTypes","bool","string","isRequired","node","func","toggleStateOnKeyPress","state","setState","ref","event","key","current","focus","stopPropagation","preventDefault","ToolTip","TooltipContent","ariaLabel","dataTestId","_toolTipIsVisible","iconContainerClassName","delayHide","fontSize","isComponent","useMemo","isString","isValidElement","setToolTipIsVisible","useState","mouseLeaveTimer","setMouseLeaveTimer","undefined","handleKeyPress","useCallback","clearTimeout","handleMouseOver","handleMouseLeave","setTimeout","classnames","tooltipContent","tooltipContainer","tooltipIconContainer","informationIcon","oneOfType","number","oneOf"],"sources":["../../../src/atom/tooltip/index.js"],"sourcesContent":["import React, {isValidElement, useState, useCallback, useMemo} from 'react';\nimport classnames from 'classnames';\nimport PropTypes from 'prop-types';\nimport ReactTooltip from 'react-tooltip';\nimport isString from 'lodash/fp/isString';\nimport {NovaCompositionCoorpacademyInformationIcon as InformationIcon} from '@coorpacademy/nova-icons';\nimport style from './style.css';\n\nconst FontSizes = {\n  12: style.tooltipContentFontSize12,\n  14: style.tooltipContentFontSize14\n};\n\nconst ToolTipWrapper = ({\n  toolTipIsVisible,\n  anchorId,\n  closeToolTipInformationTextAriaLabel,\n  content,\n  handleContentMouseOver\n}) => {\n  if (!toolTipIsVisible) return null;\n  if (anchorId) {\n    return (\n      <ReactTooltip\n        id={anchorId}\n        className={style.toolTipReact}\n        data-event-off=\"click\"\n        place=\"left\"\n        effect=\"solid\"\n        aria-label={closeToolTipInformationTextAriaLabel}\n      >\n        {content}\n      </ReactTooltip>\n    );\n  } else {\n    return (\n      <div\n        className={style.toolTip}\n        data-testid=\"tooltip\"\n        aria-label={closeToolTipInformationTextAriaLabel}\n        onMouseOver={handleContentMouseOver}\n      >\n        {content}\n      </div>\n    );\n  }\n};\n\nToolTipWrapper.propTypes = {\n  toolTipIsVisible: PropTypes.bool,\n  anchorId: PropTypes.string,\n  closeToolTipInformationTextAriaLabel: PropTypes.string.isRequired,\n  content: PropTypes.node,\n  handleContentMouseOver: PropTypes.func\n};\n\nexport const toggleStateOnKeyPress = (state, setState, ref) => event => {\n  if (event.key === 'Enter') {\n    if (ref) ref.current.focus();\n    event.stopPropagation();\n    event.preventDefault();\n    setState(!state);\n  } else if (event.key === 'Tab' || event.key === 'Escape') {\n    setState(false);\n  }\n};\n\nconst ToolTip = ({\n  anchorId,\n  TooltipContent,\n  'aria-label': ariaLabel,\n  'data-testid': dataTestId,\n  closeToolTipInformationTextAriaLabel,\n  toolTipIsVisible: _toolTipIsVisible,\n  iconContainerClassName,\n  delayHide = 250,\n  fontSize = 14\n}) => {\n  const isComponent = useMemo(\n    () => !isString(TooltipContent) && isValidElement(TooltipContent()),\n    [TooltipContent]\n  );\n\n  const [toolTipIsVisible, setToolTipIsVisible] = useState(false);\n\n  const [mouseLeaveTimer, setMouseLeaveTimer] = useState(undefined);\n\n  const handleKeyPress = useCallback(\n    event => {\n      toggleStateOnKeyPress(toolTipIsVisible, setToolTipIsVisible)(event);\n    },\n    [toolTipIsVisible]\n  );\n\n  const handleContentMouseOver = useCallback(() => {\n    mouseLeaveTimer && /* istanbul ignore next */ clearTimeout(mouseLeaveTimer);\n  }, [mouseLeaveTimer]);\n\n  const handleMouseOver = useCallback(() => {\n    mouseLeaveTimer && clearTimeout(mouseLeaveTimer);\n    setToolTipIsVisible(true);\n  }, [mouseLeaveTimer]);\n\n  const handleMouseLeave = useCallback(() => {\n    setMouseLeaveTimer(setTimeout(() => setToolTipIsVisible(false), delayHide));\n  }, [delayHide]);\n\n  const content = useMemo(() => {\n    return isComponent ? (\n      <TooltipContent />\n    ) : (\n      <p className={classnames([style.tooltipContent, FontSizes[fontSize]])}>{TooltipContent}</p>\n    );\n  }, [TooltipContent, fontSize, isComponent]);\n\n  return anchorId ? (\n    <ToolTipWrapper\n      toolTipIsVisible={_toolTipIsVisible}\n      anchorId={anchorId}\n      closeToolTipInformationTextAriaLabel={closeToolTipInformationTextAriaLabel}\n      content={content}\n      onMouseLeave={handleMouseLeave}\n      onMouseOver={handleMouseOver}\n      fontSize={fontSize}\n    />\n  ) : (\n    <div\n      className={style.tooltipContainer}\n      onMouseLeave={handleMouseLeave}\n      onMouseOver={handleMouseOver}\n    >\n      <button\n        type=\"button\"\n        className={classnames([style.tooltipIconContainer, iconContainerClassName])}\n        data-testid={dataTestId}\n        onKeyDown={handleKeyPress}\n        tabIndex={0}\n      >\n        <InformationIcon\n          className={style.informationIcon}\n          width={12}\n          height={12}\n          aria-label={ariaLabel}\n        />\n      </button>\n      <ToolTipWrapper\n        toolTipIsVisible={toolTipIsVisible}\n        anchorId={anchorId}\n        closeToolTipInformationTextAriaLabel={closeToolTipInformationTextAriaLabel}\n        content={content}\n        handleContentMouseOver={handleContentMouseOver}\n        fontSize={fontSize}\n      />\n    </div>\n  );\n};\n\nToolTip.propTypes = {\n  TooltipContent: PropTypes.oneOfType([PropTypes.func, PropTypes.node, PropTypes.string]),\n  'data-testid': PropTypes.string,\n  'aria-label': PropTypes.string,\n  closeToolTipInformationTextAriaLabel: PropTypes.string.isRequired,\n  // ---------- Regular Tooltip exclusive --------------\n  iconContainerClassName: PropTypes.string,\n  delayHide: PropTypes.number,\n  fontSize: PropTypes.oneOf([12, 14]),\n  // ----------  React Tooltip exclusive  --------------\n  // externalHandling: if passed down, React Tooltip is used instead, due to limitations on\n  // parents overflow hidden controls\n  anchorId: PropTypes.string,\n  toolTipIsVisible: PropTypes.bool\n};\n\nexport default ToolTip;\n"],"mappings":"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"}
+{"version":3,"file":"index.js","names":["FontSizes","style","tooltipContentFontSize12","tooltipContentFontSize14","IconSizes","small","big","ToolTipWrapper","toolTipIsVisible","anchorId","closeToolTipInformationTextAriaLabel","content","handleContentMouseOver","iconSize","toolTipReact","classnames","toolTip","bigIconToolTip","smallIconToolTip","propTypes","PropTypes","bool","string","isRequired","node","func","oneOf","keys","toggleStateOnKeyPress","state","setState","ref","event","key","current","focus","stopPropagation","preventDefault","ToolTip","TooltipContent","ariaLabel","dataTestId","_toolTipIsVisible","iconContainerClassName","delayHide","fontSize","isComponent","useMemo","isString","isValidElement","setToolTipIsVisible","useState","mouseLeaveTimer","setMouseLeaveTimer","undefined","handleKeyPress","useCallback","clearTimeout","handleMouseOver","handleMouseLeave","setTimeout","tooltipContent","tooltipContainer","tooltipIconContainer","informationIcon","oneOfType","number"],"sources":["../../../src/atom/tooltip/index.js"],"sourcesContent":["import React, {isValidElement, useState, useCallback, useMemo} from 'react';\nimport classnames from 'classnames';\nimport PropTypes from 'prop-types';\nimport ReactTooltip from 'react-tooltip';\nimport isString from 'lodash/fp/isString';\nimport keys from 'lodash/fp/keys';\nimport {NovaCompositionCoorpacademyInformationIcon as InformationIcon} from '@coorpacademy/nova-icons';\nimport style from './style.css';\n\nconst FontSizes = {\n  12: style.tooltipContentFontSize12,\n  14: style.tooltipContentFontSize14\n};\n\nconst IconSizes = {\n  small: 12,\n  big: 20\n};\n\nconst ToolTipWrapper = ({\n  toolTipIsVisible,\n  anchorId,\n  closeToolTipInformationTextAriaLabel,\n  content,\n  handleContentMouseOver,\n  iconSize\n}) => {\n  if (!toolTipIsVisible) return null;\n  if (anchorId) {\n    return (\n      <ReactTooltip\n        id={anchorId}\n        className={style.toolTipReact}\n        data-event-off=\"click\"\n        place=\"left\"\n        effect=\"solid\"\n        aria-label={closeToolTipInformationTextAriaLabel}\n      >\n        {content}\n      </ReactTooltip>\n    );\n  } else {\n    return (\n      <div\n        className={classnames(\n          style.toolTip,\n          iconSize === 'big' ? style.bigIconToolTip : style.smallIconToolTip\n        )}\n        data-testid=\"tooltip\"\n        aria-label={closeToolTipInformationTextAriaLabel}\n        onMouseOver={handleContentMouseOver}\n      >\n        {content}\n      </div>\n    );\n  }\n};\n\nToolTipWrapper.propTypes = {\n  toolTipIsVisible: PropTypes.bool,\n  anchorId: PropTypes.string,\n  closeToolTipInformationTextAriaLabel: PropTypes.string.isRequired,\n  content: PropTypes.node,\n  handleContentMouseOver: PropTypes.func,\n  iconSize: PropTypes.oneOf(keys(IconSizes))\n};\n\nexport const toggleStateOnKeyPress = (state, setState, ref) => event => {\n  if (event.key === 'Enter') {\n    if (ref) ref.current.focus();\n    event.stopPropagation();\n    event.preventDefault();\n    setState(!state);\n  } else if (event.key === 'Tab' || event.key === 'Escape') {\n    setState(false);\n  }\n};\n\nconst ToolTip = ({\n  anchorId,\n  TooltipContent,\n  'aria-label': ariaLabel,\n  'data-testid': dataTestId,\n  closeToolTipInformationTextAriaLabel,\n  toolTipIsVisible: _toolTipIsVisible,\n  iconContainerClassName,\n  delayHide = 250,\n  fontSize = 14,\n  iconSize = 'small'\n}) => {\n  const isComponent = useMemo(\n    () => !isString(TooltipContent) && isValidElement(TooltipContent()),\n    [TooltipContent]\n  );\n\n  const [toolTipIsVisible, setToolTipIsVisible] = useState(false);\n\n  const [mouseLeaveTimer, setMouseLeaveTimer] = useState(undefined);\n\n  const handleKeyPress = useCallback(\n    event => {\n      toggleStateOnKeyPress(toolTipIsVisible, setToolTipIsVisible)(event);\n    },\n    [toolTipIsVisible]\n  );\n\n  const handleContentMouseOver = useCallback(() => {\n    mouseLeaveTimer && /* istanbul ignore next */ clearTimeout(mouseLeaveTimer);\n  }, [mouseLeaveTimer]);\n\n  const handleMouseOver = useCallback(() => {\n    mouseLeaveTimer && clearTimeout(mouseLeaveTimer);\n    setToolTipIsVisible(true);\n  }, [mouseLeaveTimer]);\n\n  const handleMouseLeave = useCallback(() => {\n    setMouseLeaveTimer(setTimeout(() => setToolTipIsVisible(false), delayHide));\n  }, [delayHide]);\n\n  const content = useMemo(() => {\n    return isComponent ? (\n      <TooltipContent />\n    ) : (\n      <p className={classnames([style.tooltipContent, FontSizes[fontSize]])}>{TooltipContent}</p>\n    );\n  }, [TooltipContent, fontSize, isComponent]);\n\n  return anchorId ? (\n    <ToolTipWrapper\n      toolTipIsVisible={_toolTipIsVisible}\n      anchorId={anchorId}\n      closeToolTipInformationTextAriaLabel={closeToolTipInformationTextAriaLabel}\n      content={content}\n      onMouseLeave={handleMouseLeave}\n      onMouseOver={handleMouseOver}\n      fontSize={fontSize}\n    />\n  ) : (\n    <div\n      className={style.tooltipContainer}\n      onMouseLeave={handleMouseLeave}\n      onMouseOver={handleMouseOver}\n    >\n      <button\n        type=\"button\"\n        className={classnames([style.tooltipIconContainer, iconContainerClassName])}\n        data-testid={dataTestId}\n        onKeyDown={handleKeyPress}\n        tabIndex={0}\n      >\n        <InformationIcon\n          className={style.informationIcon}\n          width={IconSizes[iconSize]}\n          height={IconSizes[iconSize]}\n          aria-label={ariaLabel}\n        />\n      </button>\n      <ToolTipWrapper\n        toolTipIsVisible={toolTipIsVisible}\n        anchorId={anchorId}\n        closeToolTipInformationTextAriaLabel={closeToolTipInformationTextAriaLabel}\n        content={content}\n        handleContentMouseOver={handleContentMouseOver}\n        fontSize={fontSize}\n        iconSize={iconSize}\n      />\n    </div>\n  );\n};\n\nToolTip.propTypes = {\n  TooltipContent: PropTypes.oneOfType([PropTypes.func, PropTypes.node, PropTypes.string]),\n  'data-testid': PropTypes.string,\n  'aria-label': PropTypes.string,\n  closeToolTipInformationTextAriaLabel: PropTypes.string.isRequired,\n  // ---------- Regular Tooltip exclusive --------------\n  iconContainerClassName: PropTypes.string,\n  delayHide: PropTypes.number,\n  fontSize: PropTypes.oneOf([12, 14]),\n  iconSize: PropTypes.oneOf(keys(IconSizes)),\n  // ----------  React Tooltip exclusive  --------------\n  // externalHandling: if passed down, React Tooltip is used instead, due to limitations on\n  // parents overflow hidden controls\n  anchorId: PropTypes.string,\n  toolTipIsVisible: PropTypes.bool\n};\n\nexport default ToolTip;\n"],"mappings":"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"}

package/lib/atom/tooltip/style.css

@@ -34,12 +34,20 @@
   position: absolute;
   border-radius: 7px;
   background-color: cm_grey_700;
-  right: -75px;
-  bottom: 32px;
   height: auto;
   width: 200px;
 }
 
+.bigIconToolTip {
+  right: -71px;
+  bottom: 31px;
+}
+
+.smallIconToolTip {
+  right: -75px;
+  bottom: 32px;
+}
+
 .toolTip::before {
   content: '';
   display: inline-block;

package/lib/globals.d.js.map

@@ -1 +1 @@
-{"version":3,"file":"globals.d.js","names":[],"sources":["../src/globals.d.ts"],"sourcesContent":["declare module '@coorpacademy/nova-icons';\ndeclare module '@coorpacademy/react-native-slider';\ndeclare module '@react-native-community/blur';\ndeclare module '@coorpacademy/translate';\ndeclare module 'react-native/*';\ndeclare module 'color';\ndeclare module 'classnames';\ndeclare module '*.css';\n"],"mappings":""}
+{"version":3,"file":"globals.d.js","names":[],"sources":["../src/globals.d.ts"],"sourcesContent":["declare module '@coorpacademy/nova-icons';\ndeclare module '@coorpacademy/react-native-slider';\ndeclare module '@react-native-community/blur';\ndeclare module '@coorpacademy/translate';\ndeclare module 'browser-env';\ndeclare module 'react-native/*';\ndeclare module 'color';\ndeclare module 'classnames';\ndeclare module '*.css';\n"],"mappings":""}

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@coorpacademy/components",
-  "version": "11.11.0",
+  "version": "11.11.1-alpha.0+60f4f52e0",
   "description": "",
   "main": "lib/index.js",
   "module": "es/index.js",
@@ -162,5 +162,5 @@
     "last 2 versions",
     "IE 11"
   ],
-  "gitHead": "c70386bfef56ac5b10f3e7907529399d5dc37e68"
+  "gitHead": "60f4f52e073288c04a677ac41a94fa0991e4d5ab"
 }