@coorpacademy/components 11.9.2-alpha.4 → 11.9.3-alpha.23

package/lib/organism/wizard-contents/index.d.ts

@@ -51,6 +51,7 @@ declare namespace WizardContents {
             groups: PropTypes.Validator<(PropTypes.InferProps<{
                 title: PropTypes.Requireable<string>;
                 subtitle: PropTypes.Requireable<string>;
+                subtitleSize: PropTypes.Requireable<string>;
                 fieldsLayout: PropTypes.Requireable<string>;
                 groupLayout: PropTypes.Requireable<string>;
                 fields: PropTypes.Requireable<(NonNullable<PropTypes.InferProps<{
@@ -176,6 +177,8 @@ declare namespace WizardContents {
                     error: PropTypes.Requireable<string>;
                     buttonAriaLabel: PropTypes.Requireable<string>;
                     errorButtonLabel: PropTypes.Requireable<string>;
+                    labelLink: PropTypes.Requireable<string>;
+                    hrefLink: PropTypes.Requireable<string>;
                     title: PropTypes.Requireable<string>;
                     description: PropTypes.Requireable<string>;
                     uploadLabel: PropTypes.Requireable<string>;
@@ -289,6 +292,8 @@ declare namespace WizardContents {
                             error: PropTypes.Requireable<string>;
                             buttonAriaLabel: PropTypes.Requireable<string>;
                             errorButtonLabel: PropTypes.Requireable<string>;
+                            labelLink: PropTypes.Requireable<string>;
+                            hrefLink: PropTypes.Requireable<string>;
                             title: PropTypes.Requireable<string>;
                             description: PropTypes.Requireable<string>;
                             uploadLabel: PropTypes.Requireable<string>;
@@ -640,6 +645,7 @@ declare namespace WizardContents {
                     subtitle: PropTypes.Requireable<string>;
                     type: PropTypes.Requireable<string>;
                     'data-name': PropTypes.Requireable<string>;
+                    subtitleSize: PropTypes.Requireable<string>;
                 }>>;
                 child: PropTypes.Requireable<NonNullable<PropTypes.InferProps<{
                     childType: PropTypes.Requireable<string>;
@@ -674,6 +680,8 @@ declare namespace WizardContents {
                         error: PropTypes.Requireable<string>;
                         buttonAriaLabel: PropTypes.Requireable<string>;
                         errorButtonLabel: PropTypes.Requireable<string>;
+                        labelLink: PropTypes.Requireable<string>;
+                        hrefLink: PropTypes.Requireable<string>;
                         title: PropTypes.Requireable<string>;
                         description: PropTypes.Requireable<string>;
                         uploadLabel: PropTypes.Requireable<string>;

package/lib/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/lib/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/lib/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/lib/template/activity/engine-stars.js

@@ -9,22 +9,30 @@ var _get2 = _interopRequireDefault(require("lodash/fp/get"));
 
 var _classnames = _interopRequireDefault(require("classnames"));
 
-var _react = _interopRequireDefault(require("react"));
-
-var _reactTooltip = _interopRequireDefault(require("react-tooltip"));
+var _react = _interopRequireWildcard(require("react"));
 
 var _propTypes = _interopRequireDefault(require("prop-types"));
 
+var _uuid = require("uuid");
+
 var _novaIcons = require("@coorpacademy/nova-icons");
 
-var _provider = _interopRequireDefault(require("../../atom/provider"));
+var _provider = _interopRequireWildcard(require("../../atom/provider"));
+
+var _tooltip = _interopRequireWildcard(require("../../atom/tooltip"));
 
 var _link = _interopRequireDefault(require("../../atom/link"));
 
 var _engineStars = _interopRequireDefault(require("./engine-stars.css"));
 
+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 _interopRequireDefault(obj) { return obj && obj.__esModule ? obj : { default: obj }; }
 
+function _extends() { _extends = Object.assign ? Object.assign.bind() : function (target) { for (var i = 1; i < arguments.length; i++) { var source = arguments[i]; for (var key in source) { if (Object.prototype.hasOwnProperty.call(source, key)) { target[key] = source[key]; } } } return target; }; return _extends.apply(this, arguments); }
+
 const ICONS = {
   microlearning: _novaIcons.NovaCompositionCoorpacademyTimer,
   learner: _novaIcons.NovaSolidContentContentBook1,
@@ -38,131 +46,132 @@ const ICONS = {
   review: _novaIcons.NovaCompositionCoorpacademyRevision
 };
 
-const ToolTip = ({
-  toolTip,
-  id
-}, context) => {
-  if (!toolTip) {
-    return null;
+const ToolTipContent = ({
+  preMessage,
+  linkMessage,
+  endMessage,
+  onClick,
+  color,
+  handleContentMouseOver
+}) => /*#__PURE__*/_react.default.createElement("p", {
+  className: _engineStars.default.toolTipContent,
+  onMouseOver: handleContentMouseOver,
+  "data-testid": "react-tooltip-content"
+}, /*#__PURE__*/_react.default.createElement("span", null, preMessage), /*#__PURE__*/_react.default.createElement(_link.default, {
+  onClick: onClick,
+  style: {
+    color
   }
+}, linkMessage), /*#__PURE__*/_react.default.createElement("span", null, endMessage));
 
+ToolTipContent.propTypes = process.env.NODE_ENV !== "production" ? {
+  preMessage: _propTypes.default.string,
+  linkMessage: _propTypes.default.string,
+  endMessage: _propTypes.default.string,
+  color: _propTypes.default.string,
+  onClick: _propTypes.default.func,
+  handleContentMouseOver: _propTypes.default.func
+} : {};
+
+const EngineStars = (props, legacyContext) => {
+  const skin = (0, _provider.GetSkinFromContext)(legacyContext);
+  const translate = (0, _provider.GetTranslateFromContext)(legacyContext);
   const {
-    skin
-  } = context;
-  const {
-    preMessage,
-    endMessage,
-    linkMessage,
-    onClick
-  } = toolTip;
-  const primary = (0, _get2.default)('common.primary', skin);
-  const handleClick = onClick;
-  return /*#__PURE__*/_react.default.createElement(_reactTooltip.default, {
-    id: id,
-    className: _engineStars.default.toolTip,
-    "data-event-off": "click",
-    place: "left",
-    effect: "solid",
-    delayHide: 500
-  }, /*#__PURE__*/_react.default.createElement("p", {
-    className: _engineStars.default.toolTipContent
-  }, /*#__PURE__*/_react.default.createElement("span", null, `${preMessage}`), /*#__PURE__*/_react.default.createElement(_link.default, {
-    onClick: handleClick,
+    toolTip = null,
+    disabled,
+    type,
+    stars,
+    title,
+    active = false,
+    onClick = _noop2.default,
+    className
+  } = props;
+
+  const handleClick = e => {
+    e.stopPropagation();
+    e.preventDefault();
+    onClick(e);
+  };
+
+  const dark = (0, _get2.default)('common.dark', skin);
+  const light = (0, _get2.default)('common.light', skin);
+  const IconType = ICONS[type];
+  const primary = (0, _get2.default)('common.primary', skin); // to replace by useId when React17 is bumped to React18
+
+  const [engineStarsContentId] = (0, _react.useState)(disabled ? (0, _uuid.v5)('engine-stars', _uuid.v5.URL) : undefined);
+  const [toolTipIsVisible, setToolTipIsVisible] = (0, _react.useState)(false);
+  const [mouseLeaveTimer, setMouseLeaveTimer] = (0, _react.useState)(undefined);
+  const buttonRef = (0, _react.useRef)(null);
+  const handleKeyPress = (0, _react.useCallback)(event => {
+    (0, _tooltip.toggleStateOnKeyPress)(toolTipIsVisible, setToolTipIsVisible, buttonRef)(event);
+  }, [toolTipIsVisible]);
+  const handleMouseOver = (0, _react.useCallback)(() => {
+    mouseLeaveTimer && clearTimeout(mouseLeaveTimer);
+    setToolTipIsVisible(true);
+  }, [mouseLeaveTimer]);
+  const handleContentMouseOver = (0, _react.useCallback)(() => {
+    mouseLeaveTimer &&
+    /* istanbul ignore next */
+    clearTimeout(mouseLeaveTimer);
+  }, [mouseLeaveTimer]);
+  const handleMouseLeave = (0, _react.useCallback)(() => {
+    setMouseLeaveTimer(setTimeout(() => setToolTipIsVisible(false), 500));
+  }, []);
+  const toolTipContentProps = (0, _react.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 = (0, _react.useCallback)(_props => /*#__PURE__*/_react.default.createElement(ToolTipContent, _extends({}, _extends({}, toolTipContentProps, _props), {
+    handleContentMouseOver: handleContentMouseOver
+  })), [handleContentMouseOver, toolTipContentProps]);
+  return /*#__PURE__*/_react.default.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 ? _noop2.default : handleClick,
+    "data-for": engineStarsContentId,
+    className: (0, _classnames.default)([_engineStars.default.engineStars, disabled ? _engineStars.default.disabled : '', active ? _engineStars.default.active : '', onClick !== _noop2.default ? _engineStars.default.clickable : null, className]),
+    type: "button",
+    "data-tooltip-place": "left",
+    onKeyDown: handleKeyPress,
+    onMouseLeave: handleMouseLeave,
+    onMouseOver: handleMouseOver
+  }, disabled ? /*#__PURE__*/_react.default.createElement(_tooltip.default, _extends({}, toolTipProps, {
+    anchorId: engineStarsContentId,
+    toolTipIsVisible: toolTipIsVisible,
+    TooltipContent: TooltipContent,
+    mouseLeaveTimer: mouseLeaveTimer
+  })) : null, /*#__PURE__*/_react.default.createElement("span", {
+    className: _engineStars.default.engineIcon,
     style: {
-      color: primary
+      backgroundColor: onClick === _noop2.default ? light : primary
     }
-  }, `${linkMessage}`), /*#__PURE__*/_react.default.createElement("span", null, `${endMessage}`)));
-};
-
-ToolTip.contextTypes = {
-  skin: _provider.default.childContextTypes.skin
+  }, /*#__PURE__*/_react.default.createElement(IconType, {
+    className: _engineStars.default.iconHeader,
+    width: "30"
+  })), /*#__PURE__*/_react.default.createElement("div", {
+    className: _engineStars.default.score,
+    style: {
+      color: active ? primary : dark
+    }
+  }, /*#__PURE__*/_react.default.createElement("p", {
+    "data-name": "star-counter"
+  }, stars), /*#__PURE__*/_react.default.createElement("span", null, /*#__PURE__*/_react.default.createElement(_novaIcons.NovaCompositionCoorpacademyStar, {
+    className: _engineStars.default.iconStar,
+    color: active ? primary : dark
+  }))), /*#__PURE__*/_react.default.createElement("div", {
+    className: _engineStars.default.scoreTitle
+  }, title));
 };
-ToolTip.propTypes = process.env.NODE_ENV !== "production" ? {
-  toolTip: _propTypes.default.shape({
-    preMessage: _propTypes.default.string,
-    linkMessage: _propTypes.default.string,
-    endMessage: _propTypes.default.string,
-    onClick: _propTypes.default.func
-  }),
-  id: _propTypes.default.string.isRequired
-} : {};
-
-class EngineStars extends _react.default.Component {
-  constructor(props, context) {
-    super(props, context);
-
-    this.handleClick = e => {
-      e.stopPropagation();
-      e.preventDefault();
-      const {
-        onClick
-      } = this.props;
-      onClick && onClick(e);
-    };
-
-    this.handleClick = this.handleClick.bind(this);
-  }
 
-  render() {
-    const {
-      skin
-    } = this.context;
-    const {
-      disabled,
-      type,
-      stars,
-      title,
-      active = false,
-      onClick = _noop2.default,
-      toolTip = null
-    } = this.props;
-    const dark = (0, _get2.default)('common.dark', skin);
-    const light = (0, _get2.default)('common.light', skin);
-    const primary = (0, _get2.default)('common.primary', skin);
-    const IconType = ICONS[type];
-    return /*#__PURE__*/_react.default.createElement("div", {
-      "data-tip": disabled,
-      "data-engine": type,
-      onClick: disabled || active ? _noop2.default : this.handleClick,
-      "data-for": disabled && type,
-      className: (0, _classnames.default)([_engineStars.default.engineStars, disabled ? _engineStars.default.disabled : '', active ? _engineStars.default.active : '', onClick !== _noop2.default ? _engineStars.default.clickable : null])
-    }, /*#__PURE__*/_react.default.createElement(ToolTip, {
-      toolTip: toolTip,
-      id: type
-    }), /*#__PURE__*/_react.default.createElement("span", {
-      className: _engineStars.default.engineIcon,
-      style: {
-        backgroundColor: onClick === _noop2.default ? light : primary
-      }
-    }, /*#__PURE__*/_react.default.createElement(IconType, {
-      className: _engineStars.default.iconHeader,
-      width: "30"
-    })), /*#__PURE__*/_react.default.createElement("div", {
-      className: _engineStars.default.score,
-      style: {
-        color: active ? primary : dark
-      }
-    }, /*#__PURE__*/_react.default.createElement("p", {
-      "data-name": "star-counter"
-    }, stars), /*#__PURE__*/_react.default.createElement("span", null, /*#__PURE__*/_react.default.createElement(_novaIcons.NovaCompositionCoorpacademyStar, {
-      className: _engineStars.default.iconStar,
-      style: {
-        color: active ? {
-          primary
-        } : {
-          dark
-        }
-      }
-    }))), /*#__PURE__*/_react.default.createElement("div", {
-      className: _engineStars.default.scoreTitle
-    }, title));
-  }
-
-}
-
-EngineStars.contextTypes = {
-  skin: _provider.default.childContextTypes.skin
-};
 EngineStars.propTypes = process.env.NODE_ENV !== "production" ? {
   type: _propTypes.default.string.isRequired,
   stars: _propTypes.default.number.isRequired,
@@ -170,6 +179,7 @@ EngineStars.propTypes = process.env.NODE_ENV !== "production" ? {
   active: _propTypes.default.bool,
   disabled: _propTypes.default.bool,
   onClick: _propTypes.default.func,
+  className: _propTypes.default.string,
   toolTip: _propTypes.default.shape({
     preMessage: _propTypes.default.string,
     linkMessage: _propTypes.default.string,
@@ -177,6 +187,9 @@ EngineStars.propTypes = process.env.NODE_ENV !== "production" ? {
     onClick: _propTypes.default.func
   })
 } : {};
+EngineStars.contextTypes = {
+  skin: _provider.default.childContextTypes.skin
+};
 var _default = EngineStars;
 exports.default = _default;
 //# sourceMappingURL=engine-stars.js.map

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

@@ -1 +1 @@
-{"version":3,"file":"engine-stars.js","names":["ICONS","microlearning","TimerIcon","learner","LearnerIcon","battle","BoltIcon","certifications","CertificationIcon","bonus","BonusIcon","article","ArticleIcon","scorm","ScormIcon","video","VideoIcon","podcast","PodcastIcon","review","RevisionIcon","ToolTip","toolTip","id","context","skin","preMessage","endMessage","linkMessage","onClick","primary","handleClick","style","toolTipContent","color","contextTypes","Provider","childContextTypes","propTypes","PropTypes","shape","string","func","isRequired","EngineStars","React","Component","constructor","props","e","stopPropagation","preventDefault","bind","render","disabled","type","stars","title","active","dark","light","IconType","classnames","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} style={{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":["ICONS","microlearning","TimerIcon","learner","LearnerIcon","battle","BoltIcon","certifications","CertificationIcon","bonus","BonusIcon","article","ArticleIcon","scorm","ScormIcon","video","VideoIcon","podcast","PodcastIcon","review","RevisionIcon","ToolTipContent","preMessage","linkMessage","endMessage","onClick","color","handleContentMouseOver","style","toolTipContent","propTypes","PropTypes","string","func","EngineStars","props","legacyContext","skin","GetSkinFromContext","translate","GetTranslateFromContext","toolTip","disabled","type","stars","title","active","className","handleClick","e","stopPropagation","preventDefault","dark","light","IconType","primary","engineStarsContentId","useState","uuidV5","URL","undefined","toolTipIsVisible","setToolTipIsVisible","mouseLeaveTimer","setMouseLeaveTimer","buttonRef","useRef","handleKeyPress","useCallback","event","toggleStateOnKeyPress","handleMouseOver","clearTimeout","handleMouseLeave","setTimeout","toolTipContentProps","useMemo","toolTipProps","closeToolTipInformationTextAriaLabel","TooltipContent","_props","classnames","engineStars","clickable","engineIcon","backgroundColor","iconHeader","score","iconStar","scoreTitle","isRequired","number","bool","shape","contextTypes","Provider","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/lib/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/lib/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/lib/template/activity/index.js

@@ -9,6 +9,10 @@ var _get = _interopRequireDefault(require("lodash/fp/get"));
 
 var _isEmpty = _interopRequireDefault(require("lodash/fp/isEmpty"));
 
+var _map = _interopRequireDefault(require("lodash/fp/map"));
+
+var _noop = _interopRequireDefault(require("lodash/fp/noop"));
+
 var _omit = _interopRequireDefault(require("lodash/fp/omit"));
 
 var _propTypes = _interopRequireDefault(require("prop-types"));
@@ -39,6 +43,10 @@ function _interopRequireWildcard(obj, nodeInterop) { if (!nodeInterop && obj &&
 
 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 mapWithIndex = _map.default.convert({
+  cap: false
+});
+
 const Progression = (props, legacyContext) => {
   const {
     mainTitle,
@@ -59,9 +67,9 @@ const Progression = (props, legacyContext) => {
     e.stopPropagation();
     e.preventDefault();
     const {
-      onClick
+      onClick = _noop.default
     } = recommendation;
-    onClick && onClick(e);
+    onClick(e);
   }, [recommendation]);
   const handleSelectTheme = (0, _react.useCallback)(e => {
     themeFilterOnChange && themeFilterOnChange(e);
@@ -70,10 +78,10 @@ const Progression = (props, legacyContext) => {
   const loader = loading ? /*#__PURE__*/_react.default.createElement("div", {
     className: _style.default.loader
   }, /*#__PURE__*/_react.default.createElement(_loader.default, null)) : null;
-  const allProgressions = progressions.map(progression => /*#__PURE__*/_react.default.createElement(_progressionItem.default, _extends({}, (0, _omit.default)(['ref'], progression), {
-    key: progression.ref,
+  const allProgressions = mapWithIndex((progression, index) => /*#__PURE__*/_react.default.createElement(_progressionItem.default, _extends({}, (0, _omit.default)(['ref'], progression), {
+    key: `${index}-${progression.ref}`,
     adaptiveAriaLabel: adaptiveAriaLabel
-  })));
+  })), progressions);
 
   const coreProgression = /*#__PURE__*/_react.default.createElement("div", {
     "data-name": "activityCore",
@@ -111,13 +119,17 @@ const Progression = (props, legacyContext) => {
   return /*#__PURE__*/_react.default.createElement("div", {
     className: _style.default.default
   }, /*#__PURE__*/_react.default.createElement("div", {
-    "data-name": "activity-header"
+    "data-name": "activity-header",
+    tabIndex: 0
   }, /*#__PURE__*/_react.default.createElement("div", {
-    className: _style.default.mainTitle
+    className: _style.default.mainTitle,
+    tabIndex: 0
   }, /*#__PURE__*/_react.default.createElement("span", null, mainTitle), " ", mainSubtitle), /*#__PURE__*/_react.default.createElement("div", {
-    className: _style.default.headerProgression
+    className: _style.default.headerProgression,
+    tabIndex: 0
   }, /*#__PURE__*/_react.default.createElement("div", {
-    className: _style.default.wrapperCta
+    className: _style.default.wrapperCta,
+    tabIndex: 0
   }, themeSelect, recommendationSection), /*#__PURE__*/_react.default.createElement(_starsSummary.default, {
     engines: engines,
     total: total