@coorpacademy/components 11.9.0 → 11.9.2-alpha.1

package/es/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/es/template/activity/engine-stars.css

@@ -21,6 +21,10 @@
 
   user-select: none;
   position: relative;
+  border-bottom: none;
+  border-right: 0px;
+  border-width: 1px 0 0 1px;
+  background: inherit;
 }
 
 .engineIcon {
@@ -156,28 +160,22 @@
   opacity: 0.4;
 }
 
-.toolTip {
-  opacity: 1 !important;
-  padding: 0;
-  pointer-events: all;
-  background-color: transparent !important;
-}
-
-.toolTip::after {
-  border-left-color: transparent !important;
+.textBase {
+  font-family: "Gilroy";
+  font-style: normal;
+  color: white;
 }
 
 .toolTipContent {
-  padding: 10px;
-  margin: 0;
-  border-radius: 3px;
-  font-family: 'Gilroy';
-  font-size: 12px;
+  composes: textBase;
   width: 270px;
-  background-color: white;
-  border: 1px solid white;
-  color: dark;
-  box-shadow: 0 3px 6px rgba(0, 0, 0, 0.16), 8px 3px 10px rgba(0, 0, 0, 0.23);
+  font-weight: 500;
+  font-size: 14px;
+  display: inline-block;
+  border-radius: 3px;
+  word-wrap: break-word;
+  padding: 8px 14px;
+  text-align: center;
 }
 
 .toolTipContent > a {
@@ -191,21 +189,6 @@
   text-decoration: underline;
 }
 
-.toolTipContent::after {
-  content: '';
-  width: 0;
-  height: 0;
-  position: absolute;
-  border-left-color: inherit;
-  border-left-style: solid;
-  border-left-width: 6px;
-  border-top: 5px solid transparent;
-  border-bottom: 5px solid transparent;
-  right: -6px;
-  top: 50%;
-  margin-top: -4px;
-}
-
 /* ------------------------------------------------------ */
 
 @media tablet, mobile {

package/es/template/activity/engine-stars.d.ts

@@ -1,21 +1,23 @@
 export default EngineStars;
-declare class EngineStars extends React.Component<any, any, any> {
-    static propTypes: {
-        type: PropTypes.Validator<string>;
-        stars: PropTypes.Validator<number>;
-        title: PropTypes.Validator<string>;
-        active: PropTypes.Requireable<boolean>;
-        disabled: PropTypes.Requireable<boolean>;
-        onClick: PropTypes.Requireable<(...args: any[]) => any>;
-        toolTip: PropTypes.Requireable<PropTypes.InferProps<{
+declare function EngineStars(props: any, legacyContext: any): JSX.Element;
+declare namespace EngineStars {
+    namespace propTypes {
+        const type: PropTypes.Validator<string>;
+        const stars: PropTypes.Validator<number>;
+        const title: PropTypes.Validator<string>;
+        const active: PropTypes.Requireable<boolean>;
+        const disabled: PropTypes.Requireable<boolean>;
+        const onClick: PropTypes.Requireable<(...args: any[]) => any>;
+        const className: PropTypes.Requireable<string>;
+        const toolTip: PropTypes.Requireable<PropTypes.InferProps<{
             preMessage: PropTypes.Requireable<string>;
             linkMessage: PropTypes.Requireable<string>;
             endMessage: PropTypes.Requireable<string>;
             onClick: PropTypes.Requireable<(...args: any[]) => any>;
         }>>;
-    };
-    static contextTypes: {
-        skin: PropTypes.Requireable<PropTypes.InferProps<{
+    }
+    namespace contextTypes {
+        const skin: PropTypes.Requireable<PropTypes.InferProps<{
             common: PropTypes.Requireable<{
                 [x: string]: any;
             }>;
@@ -36,11 +38,7 @@ declare class EngineStars extends React.Component<any, any, any> {
                 [x: string]: any;
             }>;
         }>>;
-    };
-    constructor(props: any, context: any);
-    handleClick: (e: any) => void;
-    render(): JSX.Element;
+    }
 }
-import React from "react";
 import PropTypes from "prop-types";
 //# sourceMappingURL=engine-stars.d.ts.map

package/es/template/activity/engine-stars.d.ts.map

@@ -1 +1 @@
-{"version":3,"file":"engine-stars.d.ts","sourceRoot":"","sources":["../../../src/template/activity/engine-stars.js"],"names":[],"mappings":";AAqFA;IACE;;;;;;;;;;;;;MAaE;IAEF;;;;;;;;;;;;;;;;;;;;;;MAEE;IAEF,sCAGC;IAED,8BAKE;IAEF,sBAqDC;CACF"}
+{"version":3,"file":"engine-stars.d.ts","sourceRoot":"","sources":["../../../src/template/activity/engine-stars.js"],"names":[],"mappings":";AAuEA,0EAwIC"}

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

@@ -1,11 +1,15 @@
 import _noop from "lodash/fp/noop";
 import _get from "lodash/fp/get";
+
+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 classnames from 'classnames';
-import React from 'react';
-import ReactTooltip from 'react-tooltip';
+import React, { useCallback, useMemo, useState, useRef } from 'react';
 import PropTypes from 'prop-types';
+import { v5 as uuidV5 } from 'uuid';
 import { NovaCompositionCoorpacademyStar as StarIcon, NovaCompositionCoorpacademyTimer as TimerIcon, NovaCompositionCoorpacademyBolt as BoltIcon, NovaSolidSchoolScienceGraduationHat as CertificationIcon, NovaSolidContentContentBook1 as LearnerIcon, NovaSolidVoteRewardsRewardsBadge1 as BonusIcon, NovaCompositionCoorpacademyScorm as ScormIcon, NovaCompositionCoorpacademyArticle as ArticleIcon, NovaCompositionCoorpacademyVideo as VideoIcon, NovaCompositionCoorpacademyMicrophone as PodcastIcon, NovaCompositionCoorpacademyRevision as RevisionIcon } from '@coorpacademy/nova-icons';
-import Provider from '../../atom/provider';
+import Provider, { GetSkinFromContext, GetTranslateFromContext } from '../../atom/provider';
+import ToolTip, { toggleStateOnKeyPress } from '../../atom/tooltip';
 import Link from '../../atom/link';
 import style from './engine-stars.css';
 const ICONS = {
@@ -21,131 +25,136 @@ const ICONS = {
   review: RevisionIcon
 };
 
-const ToolTip = ({
-  toolTip,
-  id
-}, context) => {
-  if (!toolTip) {
-    return null;
+const ToolTipContent = ({
+  preMessage,
+  linkMessage,
+  endMessage,
+  onClick,
+  color,
+  handleContentMouseOver
+}) => /*#__PURE__*/React.createElement("p", {
+  className: style.toolTipContent,
+  onMouseOver: handleContentMouseOver,
+  "data-testid": "react-tooltip-content"
+}, /*#__PURE__*/React.createElement("span", null, preMessage), /*#__PURE__*/React.createElement(Link, {
+  onClick: onClick,
+  style: {
+    color
   }
+}, linkMessage), /*#__PURE__*/React.createElement("span", null, endMessage));
 
-  const {
-    skin
-  } = context;
-  const {
-    preMessage,
-    endMessage,
-    linkMessage,
-    onClick
-  } = toolTip;
-
-  const primary = _get('common.primary', skin);
-
-  const handleClick = onClick;
-  return /*#__PURE__*/React.createElement(ReactTooltip, {
-    id: id,
-    className: style.toolTip,
-    "data-event-off": "click",
-    place: "left",
-    effect: "solid",
-    delayHide: 500
-  }, /*#__PURE__*/React.createElement("p", {
-    className: style.toolTipContent
-  }, /*#__PURE__*/React.createElement("span", null, `${preMessage}`), /*#__PURE__*/React.createElement(Link, {
-    onClick: handleClick,
-    style: {
-      color: primary
-    }
-  }, `${linkMessage}`), /*#__PURE__*/React.createElement("span", null, `${endMessage}`)));
-};
-
-ToolTip.contextTypes = {
-  skin: Provider.childContextTypes.skin
-};
-ToolTip.propTypes = process.env.NODE_ENV !== "production" ? {
-  toolTip: PropTypes.shape({
-    preMessage: PropTypes.string,
-    linkMessage: PropTypes.string,
-    endMessage: PropTypes.string,
-    onClick: PropTypes.func
-  }),
-  id: PropTypes.string.isRequired
+ToolTipContent.propTypes = process.env.NODE_ENV !== "production" ? {
+  preMessage: PropTypes.string,
+  linkMessage: PropTypes.string,
+  endMessage: PropTypes.string,
+  color: PropTypes.string,
+  onClick: PropTypes.func,
+  handleContentMouseOver: PropTypes.func
 } : {};
 
-class EngineStars extends React.Component {
-  constructor(props, context) {
-    super(props, context);
+const EngineStars = (props, legacyContext) => {
+  const skin = GetSkinFromContext(legacyContext);
+  const translate = GetTranslateFromContext(legacyContext);
+  const {
+    toolTip = null,
+    disabled,
+    type,
+    stars,
+    title,
+    active = false,
+    onClick = _noop,
+    className
+  } = props;
 
-    this.handleClick = e => {
-      e.stopPropagation();
-      e.preventDefault();
-      const {
-        onClick
-      } = this.props;
-      onClick && onClick(e);
-    };
+  const handleClick = e => {
+    e.stopPropagation();
+    e.preventDefault();
+    onClick(e);
+  };
 
-    this.handleClick = this.handleClick.bind(this);
-  }
+  const dark = _get('common.dark', skin);
 
-  render() {
-    const {
-      skin
-    } = this.context;
-    const {
-      disabled,
-      type,
-      stars,
-      title,
-      active = false,
-      onClick = _noop,
-      toolTip = null
-    } = this.props;
+  const light = _get('common.light', skin);
 
-    const dark = _get('common.dark', skin);
+  const IconType = ICONS[type];
 
-    const light = _get('common.light', skin);
+  const primary = _get('common.primary', skin); // to replace by useId when React17 is bumped to React18
 
-    const primary = _get('common.primary', skin);
 
-    const IconType = ICONS[type];
-    return /*#__PURE__*/React.createElement("div", {
-      "data-tip": disabled,
-      "data-engine": type,
-      onClick: disabled || active ? _noop : this.handleClick,
-      "data-for": disabled && type,
-      className: classnames([style.engineStars, disabled ? style.disabled : '', active ? style.active : '', onClick !== _noop ? style.clickable : null])
-    }, /*#__PURE__*/React.createElement(ToolTip, {
-      toolTip: toolTip,
-      id: type
-    }), /*#__PURE__*/React.createElement("span", {
-      className: style.engineIcon,
-      style: {
-        backgroundColor: onClick === _noop ? light : primary
-      }
-    }, /*#__PURE__*/React.createElement(IconType, {
-      className: style.iconHeader,
-      width: "30"
-    })), /*#__PURE__*/React.createElement("div", {
-      className: style.score,
-      style: {
-        color: active ? primary : dark
-      }
-    }, /*#__PURE__*/React.createElement("p", {
-      "data-name": "star-counter"
-    }, stars), /*#__PURE__*/React.createElement("span", null, /*#__PURE__*/React.createElement(StarIcon, {
-      className: style.iconStar,
+  const [engineStarsContentId] = useState(disabled ? uuidV5('engine-stars', uuidV5.URL) : undefined);
+  const [toolTipIsVisible, setToolTipIsVisible] = useState(false);
+  const [mouseLeaveTimer, setMouseLeaveTimer] = useState(undefined);
+  const buttonRef = useRef(null);
+  const handleKeyPress = useCallback(event => {
+    toggleStateOnKeyPress(toolTipIsVisible, setToolTipIsVisible, buttonRef)(event);
+  }, [toolTipIsVisible]);
+  const handleMouseOver = useCallback(() => {
+    mouseLeaveTimer && clearTimeout(mouseLeaveTimer);
+    setToolTipIsVisible(true);
+  }, [mouseLeaveTimer]);
+  const handleContentMouseOver = useCallback(() => {
+    mouseLeaveTimer &&
+    /* istanbul ignore next */
+    clearTimeout(mouseLeaveTimer);
+  }, [mouseLeaveTimer]);
+  const handleMouseLeave = useCallback(() => {
+    setMouseLeaveTimer(setTimeout(() => setToolTipIsVisible(false), 500));
+  }, []);
+  const toolTipContentProps = useMemo(() => toolTip ? {
+    preMessage: toolTip.preMessage,
+    linkMessage: toolTip.linkMessage,
+    endMessage: toolTip.endMessage,
+    color: primary,
+    onClick: toolTip.onClick
+  } : null, [primary, toolTip]);
+  const toolTipProps = {
+    closeToolTipInformationTextAriaLabel: translate('Press the escape key to close the information text')
+  };
+  const TooltipContent = useCallback(_props => /*#__PURE__*/React.createElement(ToolTipContent, _extends({}, _extends({}, toolTipContentProps, _props), {
+    handleContentMouseOver: handleContentMouseOver
+  })), [handleContentMouseOver, toolTipContentProps]);
+  return /*#__PURE__*/React.createElement("button", {
+    ref: buttonRef,
+    "data-tip": disabled,
+    "data-engine": type,
+    "data-testid": `engine-stars-${type}` // eslint-disable-next-line no-nested-ternary
+    ,
+    onClick: disabled ? handleKeyPress : active ? _noop : handleClick,
+    "data-for": engineStarsContentId,
+    className: classnames([style.engineStars, disabled ? style.disabled : '', active ? style.active : '', onClick !== _noop ? style.clickable : null, className]),
+    type: "button",
+    "data-tooltip-place": "left",
+    onKeyDown: handleKeyPress,
+    onMouseLeave: handleMouseLeave,
+    onMouseOver: handleMouseOver
+  }, disabled ? /*#__PURE__*/React.createElement(ToolTip, _extends({}, toolTipProps, {
+    anchorId: engineStarsContentId,
+    toolTipIsVisible: toolTipIsVisible,
+    TooltipContent: TooltipContent,
+    mouseLeaveTimer: mouseLeaveTimer
+  })) : null, /*#__PURE__*/React.createElement("span", {
+    className: style.engineIcon,
+    style: {
+      backgroundColor: onClick === _noop ? light : primary
+    }
+  }, /*#__PURE__*/React.createElement(IconType, {
+    className: style.iconHeader,
+    width: "30"
+  })), /*#__PURE__*/React.createElement("div", {
+    className: style.score,
+    style: {
       color: active ? primary : dark
-    }))), /*#__PURE__*/React.createElement("div", {
-      className: style.scoreTitle
-    }, title));
-  }
-
-}
-
-EngineStars.contextTypes = {
-  skin: Provider.childContextTypes.skin
+    }
+  }, /*#__PURE__*/React.createElement("p", {
+    "data-name": "star-counter"
+  }, stars), /*#__PURE__*/React.createElement("span", null, /*#__PURE__*/React.createElement(StarIcon, {
+    className: style.iconStar,
+    color: active ? primary : dark
+  }))), /*#__PURE__*/React.createElement("div", {
+    className: style.scoreTitle
+  }, title));
 };
+
 EngineStars.propTypes = process.env.NODE_ENV !== "production" ? {
   type: PropTypes.string.isRequired,
   stars: PropTypes.number.isRequired,
@@ -153,6 +162,7 @@ EngineStars.propTypes = process.env.NODE_ENV !== "production" ? {
   active: PropTypes.bool,
   disabled: PropTypes.bool,
   onClick: PropTypes.func,
+  className: PropTypes.string,
   toolTip: PropTypes.shape({
     preMessage: PropTypes.string,
     linkMessage: PropTypes.string,
@@ -160,5 +170,8 @@ EngineStars.propTypes = process.env.NODE_ENV !== "production" ? {
     onClick: PropTypes.func
   })
 } : {};
+EngineStars.contextTypes = {
+  skin: Provider.childContextTypes.skin
+};
 export default EngineStars;
 //# sourceMappingURL=engine-stars.js.map

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

@@ -1 +1 @@
-{"version":3,"file":"engine-stars.js","names":["classnames","React","ReactTooltip","PropTypes","NovaCompositionCoorpacademyStar","StarIcon","NovaCompositionCoorpacademyTimer","TimerIcon","NovaCompositionCoorpacademyBolt","BoltIcon","NovaSolidSchoolScienceGraduationHat","CertificationIcon","NovaSolidContentContentBook1","LearnerIcon","NovaSolidVoteRewardsRewardsBadge1","BonusIcon","NovaCompositionCoorpacademyScorm","ScormIcon","NovaCompositionCoorpacademyArticle","ArticleIcon","NovaCompositionCoorpacademyVideo","VideoIcon","NovaCompositionCoorpacademyMicrophone","PodcastIcon","NovaCompositionCoorpacademyRevision","RevisionIcon","Provider","Link","style","ICONS","microlearning","learner","battle","certifications","bonus","article","scorm","video","podcast","review","ToolTip","toolTip","id","context","skin","preMessage","endMessage","linkMessage","onClick","primary","handleClick","toolTipContent","color","contextTypes","childContextTypes","propTypes","shape","string","func","isRequired","EngineStars","Component","constructor","props","e","stopPropagation","preventDefault","bind","render","disabled","type","stars","title","active","dark","light","IconType","engineStars","clickable","engineIcon","backgroundColor","iconHeader","score","iconStar","scoreTitle","number","bool"],"sources":["../../../src/template/activity/engine-stars.js"],"sourcesContent":["import classnames from 'classnames';\nimport React from 'react';\nimport ReactTooltip from 'react-tooltip';\nimport PropTypes from 'prop-types';\nimport {get, noop} from 'lodash/fp';\nimport {\n  NovaCompositionCoorpacademyStar as StarIcon,\n  NovaCompositionCoorpacademyTimer as TimerIcon,\n  NovaCompositionCoorpacademyBolt as BoltIcon,\n  NovaSolidSchoolScienceGraduationHat as CertificationIcon,\n  NovaSolidContentContentBook1 as LearnerIcon,\n  NovaSolidVoteRewardsRewardsBadge1 as BonusIcon,\n  NovaCompositionCoorpacademyScorm as ScormIcon,\n  NovaCompositionCoorpacademyArticle as ArticleIcon,\n  NovaCompositionCoorpacademyVideo as VideoIcon,\n  NovaCompositionCoorpacademyMicrophone as PodcastIcon,\n  NovaCompositionCoorpacademyRevision as RevisionIcon\n} from '@coorpacademy/nova-icons';\nimport Provider from '../../atom/provider';\nimport Link from '../../atom/link';\nimport style from './engine-stars.css';\n\nconst ICONS = {\n  microlearning: TimerIcon,\n  learner: LearnerIcon,\n  battle: BoltIcon,\n  certifications: CertificationIcon,\n  bonus: BonusIcon,\n  article: ArticleIcon,\n  scorm: ScormIcon,\n  video: VideoIcon,\n  podcast: PodcastIcon,\n  review: RevisionIcon\n};\n\nconst ToolTip = ({toolTip, id}, context) => {\n  if (!toolTip) {\n    return null;\n  }\n\n  const {skin} = context;\n  const {preMessage, endMessage, linkMessage, onClick} = toolTip;\n  const primary = get('common.primary', skin);\n\n  const handleClick = onClick;\n\n  return (\n    <ReactTooltip\n      id={id}\n      className={style.toolTip}\n      data-event-off=\"click\"\n      place=\"left\"\n      effect=\"solid\"\n      delayHide={500}\n    >\n      <p className={style.toolTipContent}>\n        <span>{`${preMessage}`}</span>\n        <Link\n          onClick={handleClick}\n          style={{\n            color: primary\n          }}\n        >\n          {`${linkMessage}`}\n        </Link>\n        <span>{`${endMessage}`}</span>\n      </p>\n    </ReactTooltip>\n  );\n};\n\nToolTip.contextTypes = {\n  skin: Provider.childContextTypes.skin\n};\n\nToolTip.propTypes = {\n  toolTip: PropTypes.shape({\n    preMessage: PropTypes.string,\n    linkMessage: PropTypes.string,\n    endMessage: PropTypes.string,\n    onClick: PropTypes.func\n  }),\n  id: PropTypes.string.isRequired\n};\n\nclass EngineStars extends React.Component {\n  static propTypes = {\n    type: PropTypes.string.isRequired,\n    stars: PropTypes.number.isRequired,\n    title: PropTypes.string.isRequired,\n    active: PropTypes.bool,\n    disabled: PropTypes.bool,\n    onClick: PropTypes.func,\n    toolTip: PropTypes.shape({\n      preMessage: PropTypes.string,\n      linkMessage: PropTypes.string,\n      endMessage: PropTypes.string,\n      onClick: PropTypes.func\n    })\n  };\n\n  static contextTypes = {\n    skin: Provider.childContextTypes.skin\n  };\n\n  constructor(props, context) {\n    super(props, context);\n    this.handleClick = this.handleClick.bind(this);\n  }\n\n  handleClick = e => {\n    e.stopPropagation();\n    e.preventDefault();\n    const {onClick} = this.props;\n    onClick && onClick(e);\n  };\n\n  render() {\n    const {skin} = this.context;\n    const {\n      disabled,\n      type,\n      stars,\n      title,\n      active = false,\n      onClick = noop,\n      toolTip = null\n    } = this.props;\n    const dark = get('common.dark', skin);\n    const light = get('common.light', skin);\n    const primary = get('common.primary', skin);\n    const IconType = ICONS[type];\n\n    return (\n      <div\n        data-tip={disabled}\n        data-engine={type}\n        onClick={disabled || active ? noop : this.handleClick}\n        data-for={disabled && type}\n        className={classnames([\n          style.engineStars,\n          disabled ? style.disabled : '',\n          active ? style.active : '',\n          onClick !== noop ? style.clickable : null\n        ])}\n      >\n        <ToolTip toolTip={toolTip} id={type} />\n\n        <span\n          className={style.engineIcon}\n          style={{\n            backgroundColor: onClick === noop ? light : primary\n          }}\n        >\n          <IconType className={style.iconHeader} width=\"30\" />\n        </span>\n        <div\n          className={style.score}\n          style={{\n            color: active ? primary : dark\n          }}\n        >\n          <p data-name=\"star-counter\">{stars}</p>\n          <span>\n            <StarIcon className={style.iconStar} color={active ? primary : dark} />\n          </span>\n        </div>\n        <div className={style.scoreTitle}>{title}</div>\n      </div>\n    );\n  }\n}\n\nexport default EngineStars;\n"],"mappings":"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"}
+{"version":3,"file":"engine-stars.js","names":["classnames","React","useCallback","useMemo","useState","useRef","PropTypes","v5","uuidV5","NovaCompositionCoorpacademyStar","StarIcon","NovaCompositionCoorpacademyTimer","TimerIcon","NovaCompositionCoorpacademyBolt","BoltIcon","NovaSolidSchoolScienceGraduationHat","CertificationIcon","NovaSolidContentContentBook1","LearnerIcon","NovaSolidVoteRewardsRewardsBadge1","BonusIcon","NovaCompositionCoorpacademyScorm","ScormIcon","NovaCompositionCoorpacademyArticle","ArticleIcon","NovaCompositionCoorpacademyVideo","VideoIcon","NovaCompositionCoorpacademyMicrophone","PodcastIcon","NovaCompositionCoorpacademyRevision","RevisionIcon","Provider","GetSkinFromContext","GetTranslateFromContext","ToolTip","toggleStateOnKeyPress","Link","style","ICONS","microlearning","learner","battle","certifications","bonus","article","scorm","video","podcast","review","ToolTipContent","preMessage","linkMessage","endMessage","onClick","color","handleContentMouseOver","toolTipContent","propTypes","string","func","EngineStars","props","legacyContext","skin","translate","toolTip","disabled","type","stars","title","active","className","handleClick","e","stopPropagation","preventDefault","dark","light","IconType","primary","engineStarsContentId","URL","undefined","toolTipIsVisible","setToolTipIsVisible","mouseLeaveTimer","setMouseLeaveTimer","buttonRef","handleKeyPress","event","handleMouseOver","clearTimeout","handleMouseLeave","setTimeout","toolTipContentProps","toolTipProps","closeToolTipInformationTextAriaLabel","TooltipContent","_props","engineStars","clickable","engineIcon","backgroundColor","iconHeader","score","iconStar","scoreTitle","isRequired","number","bool","shape","contextTypes","childContextTypes"],"sources":["../../../src/template/activity/engine-stars.js"],"sourcesContent":["import classnames from 'classnames';\nimport React, {useCallback, useMemo, useState, useRef} from 'react';\nimport PropTypes from 'prop-types';\nimport {get, noop} from 'lodash/fp';\nimport {v5 as uuidV5} from 'uuid';\nimport {\n  NovaCompositionCoorpacademyStar as StarIcon,\n  NovaCompositionCoorpacademyTimer as TimerIcon,\n  NovaCompositionCoorpacademyBolt as BoltIcon,\n  NovaSolidSchoolScienceGraduationHat as CertificationIcon,\n  NovaSolidContentContentBook1 as LearnerIcon,\n  NovaSolidVoteRewardsRewardsBadge1 as BonusIcon,\n  NovaCompositionCoorpacademyScorm as ScormIcon,\n  NovaCompositionCoorpacademyArticle as ArticleIcon,\n  NovaCompositionCoorpacademyVideo as VideoIcon,\n  NovaCompositionCoorpacademyMicrophone as PodcastIcon,\n  NovaCompositionCoorpacademyRevision as RevisionIcon\n} from '@coorpacademy/nova-icons';\nimport Provider, {GetSkinFromContext, GetTranslateFromContext} from '../../atom/provider';\nimport ToolTip, {toggleStateOnKeyPress} from '../../atom/tooltip';\nimport Link from '../../atom/link';\nimport style from './engine-stars.css';\n\nconst ICONS = {\n  microlearning: TimerIcon,\n  learner: LearnerIcon,\n  battle: BoltIcon,\n  certifications: CertificationIcon,\n  bonus: BonusIcon,\n  article: ArticleIcon,\n  scorm: ScormIcon,\n  video: VideoIcon,\n  podcast: PodcastIcon,\n  review: RevisionIcon\n};\n\nconst ToolTipContent = ({\n  preMessage,\n  linkMessage,\n  endMessage,\n  onClick,\n  color,\n  handleContentMouseOver\n}) => (\n  <p\n    className={style.toolTipContent}\n    onMouseOver={handleContentMouseOver}\n    data-testid=\"react-tooltip-content\"\n  >\n    <span>{preMessage}</span>\n    <Link\n      onClick={onClick}\n      style={{\n        color\n      }}\n    >\n      {linkMessage}\n    </Link>\n    <span>{endMessage}</span>\n  </p>\n);\n\nToolTipContent.propTypes = {\n  preMessage: PropTypes.string,\n  linkMessage: PropTypes.string,\n  endMessage: PropTypes.string,\n  color: PropTypes.string,\n  onClick: PropTypes.func,\n  handleContentMouseOver: PropTypes.func\n};\n\nconst EngineStars = (props, legacyContext) => {\n  const skin = GetSkinFromContext(legacyContext);\n  const translate = GetTranslateFromContext(legacyContext);\n  const {\n    toolTip = null,\n    disabled,\n    type,\n    stars,\n    title,\n    active = false,\n    onClick = noop,\n    className\n  } = props;\n\n  const handleClick = e => {\n    e.stopPropagation();\n    e.preventDefault();\n    onClick(e);\n  };\n  const dark = get('common.dark', skin);\n  const light = get('common.light', skin);\n  const IconType = ICONS[type];\n\n  const primary = get('common.primary', skin);\n\n  // to replace by useId when React17 is bumped to React18\n  const [engineStarsContentId] = useState(\n    disabled ? uuidV5('engine-stars', uuidV5.URL) : undefined\n  );\n  const [toolTipIsVisible, setToolTipIsVisible] = useState(false);\n  const [mouseLeaveTimer, setMouseLeaveTimer] = useState(undefined);\n  const buttonRef = useRef(null);\n\n  const handleKeyPress = useCallback(\n    event => {\n      toggleStateOnKeyPress(toolTipIsVisible, setToolTipIsVisible, buttonRef)(event);\n    },\n    [toolTipIsVisible]\n  );\n\n  const handleMouseOver = useCallback(() => {\n    mouseLeaveTimer && clearTimeout(mouseLeaveTimer);\n    setToolTipIsVisible(true);\n  }, [mouseLeaveTimer]);\n\n  const handleContentMouseOver = useCallback(() => {\n    mouseLeaveTimer && /* istanbul ignore next */ clearTimeout(mouseLeaveTimer);\n  }, [mouseLeaveTimer]);\n\n  const handleMouseLeave = useCallback(() => {\n    setMouseLeaveTimer(setTimeout(() => setToolTipIsVisible(false), 500));\n  }, []);\n\n  const toolTipContentProps = useMemo(\n    () =>\n      toolTip\n        ? {\n            preMessage: toolTip.preMessage,\n            linkMessage: toolTip.linkMessage,\n            endMessage: toolTip.endMessage,\n            color: primary,\n            onClick: toolTip.onClick\n          }\n        : null,\n    [primary, toolTip]\n  );\n\n  const toolTipProps = {\n    closeToolTipInformationTextAriaLabel: translate(\n      'Press the escape key to close the information text'\n    )\n  };\n\n  const TooltipContent = useCallback(\n    _props => (\n      <ToolTipContent\n        {...{...toolTipContentProps, ..._props}}\n        handleContentMouseOver={handleContentMouseOver}\n      />\n    ),\n    [handleContentMouseOver, toolTipContentProps]\n  );\n\n  return (\n    <button\n      ref={buttonRef}\n      data-tip={disabled}\n      data-engine={type}\n      data-testid={`engine-stars-${type}`}\n      // eslint-disable-next-line no-nested-ternary\n      onClick={disabled ? handleKeyPress : active ? noop : handleClick}\n      data-for={engineStarsContentId}\n      className={classnames([\n        style.engineStars,\n        disabled ? style.disabled : '',\n        active ? style.active : '',\n        onClick !== noop ? style.clickable : null,\n        className\n      ])}\n      type=\"button\"\n      data-tooltip-place=\"left\"\n      onKeyDown={handleKeyPress}\n      onMouseLeave={handleMouseLeave}\n      onMouseOver={handleMouseOver}\n    >\n      {disabled ? (\n        <ToolTip\n          {...toolTipProps}\n          anchorId={engineStarsContentId}\n          toolTipIsVisible={toolTipIsVisible}\n          TooltipContent={TooltipContent}\n          mouseLeaveTimer={mouseLeaveTimer}\n        />\n      ) : null}\n      <span\n        className={style.engineIcon}\n        style={{\n          backgroundColor: onClick === noop ? light : primary\n        }}\n      >\n        <IconType className={style.iconHeader} width=\"30\" />\n      </span>\n      <div\n        className={style.score}\n        style={{\n          color: active ? primary : dark\n        }}\n      >\n        <p data-name=\"star-counter\">{stars}</p>\n        <span>\n          <StarIcon className={style.iconStar} color={active ? primary : dark} />\n        </span>\n      </div>\n      <div className={style.scoreTitle}>{title}</div>\n    </button>\n  );\n};\n\nEngineStars.propTypes = {\n  type: PropTypes.string.isRequired,\n  stars: PropTypes.number.isRequired,\n  title: PropTypes.string.isRequired,\n  active: PropTypes.bool,\n  disabled: PropTypes.bool,\n  onClick: PropTypes.func,\n  className: PropTypes.string,\n  toolTip: PropTypes.shape({\n    preMessage: PropTypes.string,\n    linkMessage: PropTypes.string,\n    endMessage: PropTypes.string,\n    onClick: PropTypes.func\n  })\n};\n\nEngineStars.contextTypes = {\n  skin: Provider.childContextTypes.skin\n};\n\nexport default EngineStars;\n"],"mappings":"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"}

package/es/template/activity/index.d.ts

@@ -39,6 +39,7 @@ declare namespace Progression {
             active: PropTypes.Requireable<boolean>;
             disabled: PropTypes.Requireable<boolean>;
             onClick: PropTypes.Requireable<(...args: any[]) => any>;
+            className: PropTypes.Requireable<string>;
             toolTip: PropTypes.Requireable<PropTypes.InferProps<{
                 preMessage: PropTypes.Requireable<string>;
                 linkMessage: PropTypes.Requireable<string>;

package/es/template/activity/index.d.ts.map

@@ -1 +1 @@
-{"version":3,"file":"index.d.ts","sourceRoot":"","sources":["../../../src/template/activity/index.js"],"names":[],"mappings":";AAeA,0EAuGC"}
+{"version":3,"file":"index.d.ts","sourceRoot":"","sources":["../../../src/template/activity/index.js"],"names":[],"mappings":";AAmBA,0EA0GC"}

package/es/template/activity/index.js

@@ -3,6 +3,8 @@ function _extends() { _extends = Object.assign ? Object.assign.bind() : function
 import React, { useCallback } from 'react';
 import get from 'lodash/fp/get';
 import isEmpty from 'lodash/fp/isEmpty';
+import map from 'lodash/fp/map';
+import noop from 'lodash/fp/noop';
 import omit from 'lodash/fp/omit';
 import PropTypes from 'prop-types';
 import classnames from 'classnames';
@@ -14,6 +16,9 @@ import ProgressionItem from './progression-item';
 import EngineStars from './engine-stars';
 import StarsSummary from './stars-summary';
 import style from './style.css';
+const mapWithIndex = map.convert({
+  cap: false
+});
 
 const Progression = (props, legacyContext) => {
   const {
@@ -35,9 +40,9 @@ const Progression = (props, legacyContext) => {
     e.stopPropagation();
     e.preventDefault();
     const {
-      onClick
+      onClick = noop
     } = recommendation;
-    onClick && onClick(e);
+    onClick(e);
   }, [recommendation]);
   const handleSelectTheme = useCallback(e => {
     themeFilterOnChange && themeFilterOnChange(e);
@@ -46,10 +51,10 @@ const Progression = (props, legacyContext) => {
   const loader = loading ? /*#__PURE__*/React.createElement("div", {
     className: style.loader
   }, /*#__PURE__*/React.createElement(Loader, null)) : null;
-  const allProgressions = progressions.map(progression => /*#__PURE__*/React.createElement(ProgressionItem, _extends({}, omit(['ref'], progression), {
-    key: progression.ref,
+  const allProgressions = mapWithIndex((progression, index) => /*#__PURE__*/React.createElement(ProgressionItem, _extends({}, omit(['ref'], progression), {
+    key: `${index}-${progression.ref}`,
     adaptiveAriaLabel: adaptiveAriaLabel
-  })));
+  })), progressions);
   const coreProgression = /*#__PURE__*/React.createElement("div", {
     "data-name": "activityCore",
     className: style.core
@@ -85,13 +90,17 @@ const Progression = (props, legacyContext) => {
   return /*#__PURE__*/React.createElement("div", {
     className: style.default
   }, /*#__PURE__*/React.createElement("div", {
-    "data-name": "activity-header"
+    "data-name": "activity-header",
+    tabIndex: 0
   }, /*#__PURE__*/React.createElement("div", {
-    className: style.mainTitle
+    className: style.mainTitle,
+    tabIndex: 0
   }, /*#__PURE__*/React.createElement("span", null, mainTitle), " ", mainSubtitle), /*#__PURE__*/React.createElement("div", {
-    className: style.headerProgression
+    className: style.headerProgression,
+    tabIndex: 0
   }, /*#__PURE__*/React.createElement("div", {
-    className: style.wrapperCta
+    className: style.wrapperCta,
+    tabIndex: 0
   }, themeSelect, recommendationSection), /*#__PURE__*/React.createElement(StarsSummary, {
     engines: engines,
     total: total