@coorpacademy/components 11.11.5-alpha.0 → 11.11.5

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

@@ -0,0 +1,124 @@
+"use strict";
+
+exports.__esModule = true;
+exports.default = void 0;
+
+var _react = _interopRequireWildcard(require("react"));
+
+var _classnames = _interopRequireDefault(require("classnames"));
+
+var _uuid = require("uuid");
+
+var _has = _interopRequireDefault(require("lodash/fp/has"));
+
+var _novaIcons = require("@coorpacademy/nova-icons");
+
+var _tooltip = _interopRequireWildcard(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,
+  'aria-label': ariaLabel
+}, 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]);
+  const [mouseLeaveTimer, setMouseLeaveTimer] = (0, _react.useState)(undefined);
+  const [toolTipIsVisible, setToolTipIsVisible] = (0, _react.useState)(false); // to be replaced by useId when React17 is bumped to React18
+
+  const [battleOpponentInfoId] = (0, _react.useState)(isAlreadyEngaged ? (0, _uuid.v5)('engaged-battle-', _uuid.v5.URL) : undefined);
+  const buttonRef = (0, _react.useRef)(null);
+  const handleMouseOver = (0, _react.useCallback)(() => {
+    mouseLeaveTimer && clearTimeout(mouseLeaveTimer); // @ts-expect-error (error: focus does not exists on type never)
+
+    /* istanbul ignore next */
+
+    (0, _has.default)(['current', 'focus'], buttonRef) && buttonRef.current.focus();
+    setToolTipIsVisible(true);
+  }, [mouseLeaveTimer]);
+  const handleMouseLeave = (0, _react.useCallback)(() => {
+    setMouseLeaveTimer(setTimeout(() => {
+      setToolTipIsVisible(false); // @ts-expect-error (error: blur does not exists on type never)
+
+      /* istanbul ignore next */
+
+      (0, _has.default)(['current', 'blur'], buttonRef) && buttonRef.current.blur();
+    }, 500));
+  }, []);
+  const handleKeyPress = (0, _react.useCallback)(event => {
+    (0, _tooltip.toggleStateOnKeyPress)(toolTipIsVisible, setToolTipIsVisible, buttonRef)(event);
+  }, [toolTipIsVisible]);
+  const TooltipContent = (0, _react.useCallback)(_props => /*#__PURE__*/_react.default.createElement("p", _extends({}, _props, {
+    onMouseOver: handleMouseOver,
+    onMouseLeave: handleMouseLeave,
+    "data-testid": "battle-opponent-tooltip-content"
+  }), tooltipText), [handleMouseLeave, handleMouseOver, tooltipText]);
+  return /*#__PURE__*/_react.default.createElement("li", _extends({}, !isAlreadyEngaged && {
+    onClick
+  }, {
+    className: wrapperClassnames,
+    "data-testid": "battle-opponent-wrapper",
+    tabIndex: 0
+  }), /*#__PURE__*/_react.default.createElement("div", {
+    className: _style.default.avatar
+  }, isRandom ? null : /*#__PURE__*/_react.default.createElement("img", {
+    src: userAvatarSrc,
+    alt: ""
+  })), /*#__PURE__*/_react.default.createElement("p", {
+    className: displayNameClassnames,
+    tabIndex: 0
+  }, displayName), isAlreadyEngaged ? /*#__PURE__*/_react.default.createElement(_react.default.Fragment, null, /*#__PURE__*/_react.default.createElement("button", {
+    ref: buttonRef,
+    tabIndex: 0,
+    type: "button",
+    className: _style.default.tooltipIconContainer,
+    "data-testid": "battle-engaged-opponent-information-button",
+    onKeyDown: handleKeyPress,
+    onMouseLeave: handleMouseLeave,
+    onMouseOver: handleMouseOver,
+    "data-for": battleOpponentInfoId,
+    "data-tooltip-place": "left",
+    "data-tip": isAlreadyEngaged,
+    "aria-label": ariaLabel
+  }, /*#__PURE__*/_react.default.createElement(_novaIcons.NovaCompositionCoorpacademyInformationIcon, {
+    className: _style.default.informationIcon,
+    width: 20,
+    height: 20
+  })), /*#__PURE__*/_react.default.createElement(_tooltip.default, {
+    fontSize: 12,
+    anchorId: battleOpponentInfoId,
+    toolTipIsVisible: toolTipIsVisible,
+    TooltipContent: TooltipContent,
+    closeToolTipInformationTextAriaLabel: translate('Press the escape key to close the information text')
+  })) : /*#__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","ariaLabel","legacyContext","translate","GetTranslateFromContext","wrapperClassnames","useMemo","classnames","style","card","random","displayNameClassnames","name","alreadyEngaged","mouseLeaveTimer","setMouseLeaveTimer","useState","undefined","toolTipIsVisible","setToolTipIsVisible","battleOpponentInfoId","uuidV5","URL","buttonRef","useRef","handleMouseOver","useCallback","clearTimeout","has","current","focus","handleMouseLeave","setTimeout","blur","handleKeyPress","event","toggleStateOnKeyPress","TooltipContent","_props","avatar","tooltipIconContainer","informationIcon","rightArrow","propTypes","contextTypes","Provider","childContextTypes"],"sources":["../../../src/atom/battle-opponent/index.tsx"],"sourcesContent":["import React, {useCallback, useMemo, useState, useRef} from 'react';\nimport classnames from 'classnames';\nimport {v5 as uuidV5} from 'uuid';\nimport has from 'lodash/fp/has';\nimport {\n  NovaCompositionNavigationArrowRight as ArrowRight,\n  NovaCompositionCoorpacademyInformationIcon as InformationIcon\n} from '@coorpacademy/nova-icons';\nimport ToolTip, {toggleStateOnKeyPress} 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    'aria-label': ariaLabel\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  const [mouseLeaveTimer, setMouseLeaveTimer] = useState<number | undefined>(undefined);\n  const [toolTipIsVisible, setToolTipIsVisible] = useState(false);\n\n  // to be replaced by useId when React17 is bumped to React18\n  const [battleOpponentInfoId] = useState(\n    isAlreadyEngaged ? uuidV5('engaged-battle-', uuidV5.URL) : undefined\n  );\n\n  const buttonRef = useRef(null);\n\n  const handleMouseOver = useCallback(() => {\n    mouseLeaveTimer && clearTimeout(mouseLeaveTimer);\n    // @ts-expect-error (error: focus does not exists on type never)\n    /* istanbul ignore next */ has(['current', 'focus'], buttonRef) && buttonRef.current.focus();\n    setToolTipIsVisible(true);\n  }, [mouseLeaveTimer]);\n\n  const handleMouseLeave = useCallback(() => {\n    setMouseLeaveTimer(\n      setTimeout(() => {\n        setToolTipIsVisible(false);\n        // @ts-expect-error (error: blur does not exists on type never)\n        /* istanbul ignore next */ has(['current', 'blur'], buttonRef) && buttonRef.current.blur();\n      }, 500) as unknown as number\n    );\n  }, []);\n\n  const handleKeyPress = useCallback(\n    event => {\n      toggleStateOnKeyPress(toolTipIsVisible, setToolTipIsVisible, buttonRef)(event);\n    },\n    [toolTipIsVisible]\n  );\n\n  const TooltipContent = useCallback(\n    _props => (\n      <p\n        {..._props}\n        onMouseOver={handleMouseOver}\n        onMouseLeave={handleMouseLeave}\n        data-testid=\"battle-opponent-tooltip-content\"\n      >\n        {tooltipText}\n      </p>\n    ),\n    [handleMouseLeave, handleMouseOver, tooltipText]\n  );\n\n  return (\n    <li\n      {...(!isAlreadyEngaged && {onClick})}\n      className={wrapperClassnames}\n      data-testid=\"battle-opponent-wrapper\"\n      tabIndex={0}\n    >\n      <div className={style.avatar}>{isRandom ? null : <img src={userAvatarSrc} alt=\"\" />}</div>\n      <p className={displayNameClassnames} tabIndex={0}>\n        {displayName}\n      </p>\n      {isAlreadyEngaged ? (\n        <>\n          <button\n            ref={buttonRef}\n            tabIndex={0}\n            type=\"button\"\n            className={style.tooltipIconContainer}\n            data-testid=\"battle-engaged-opponent-information-button\"\n            onKeyDown={handleKeyPress}\n            onMouseLeave={handleMouseLeave}\n            onMouseOver={handleMouseOver}\n            data-for={battleOpponentInfoId}\n            data-tooltip-place=\"left\"\n            data-tip={isAlreadyEngaged}\n            aria-label={ariaLabel}\n          >\n            <InformationIcon className={style.informationIcon} width={20} height={20} />\n          </button>\n          <ToolTip\n            fontSize={12}\n            anchorId={battleOpponentInfoId}\n            toolTipIsVisible={toolTipIsVisible}\n            TooltipContent={TooltipContent}\n            closeToolTipInformationTextAriaLabel={translate(\n              'Press the escape key to close the information text'\n            )}\n          />\n        </>\n      ) : (\n        <ArrowRight className={style.rightArrow} width={16} height={16} />\n      )}\n    </li>\n  );\n};\n\nBattleOpponent.propTypes = propTypes;\n\nBattleOpponent.contextTypes = {\n  translate: Provider.childContextTypes.translate\n};\n\nexport default BattleOpponent;\n"],"mappings":"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"}

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

@@ -0,0 +1,21 @@
+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>;
+    'aria-label': PropTypes.Requireable<string>;
+};
+export declare type BattleOpponentProps = {
+    isAlreadyEngaged?: boolean;
+    isRandom?: boolean;
+    userAvatarSrc?: string;
+    onClick?: () => void;
+    displayName: string;
+    tooltipText?: string;
+    'aria-label'?: 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;;;;;;;;CAQd,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;IACrB,YAAY,CAAC,EAAE,MAAM,CAAC;CACvB,CAAC;AAEF,eAAe,SAAS,CAAC"}

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

@@ -0,0 +1,21 @@
+"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,
+  'aria-label': _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  'aria-label': 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  'aria-label'?: 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,MANP;EAOhB,cAAcJ,kBAAA,CAAUI;AAPR,CAAlB;eAoBeN,S"}

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

@@ -0,0 +1,133 @@
+@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;
+}
+
+.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;
+}
+
+.informationIcon {
+  color: cm_grey_500;
+}
+
+.tooltipIconContainer {
+  display: flex;
+  justify-content: flex-end;
+  border: none;
+  background: transparent;
+  height: 25px;
+  align-items: center;
+}
+
+@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/{review-header-step-item → status-item}/index.d.ts

@@ -1,12 +1,12 @@
 /// <reference types="react" />
-import { HeaderStepItemProps } from './types';
-declare const ReviewHeaderStepItem: {
-    (props: HeaderStepItemProps): JSX.Element;
+import { StatusItemProps } from './types';
+declare const StatusItem: {
+    (props: StatusItemProps): JSX.Element;
     propTypes: {
         current: import("prop-types").Requireable<boolean>;
         icon: import("prop-types").Requireable<string>;
         value: import("prop-types").Requireable<string>;
     };
 };
-export default ReviewHeaderStepItem;
+export default StatusItem;
 //# sourceMappingURL=index.d.ts.map

package/lib/atom/status-item/index.d.ts.map

@@ -0,0 +1 @@
+{"version":3,"file":"index.d.ts","sourceRoot":"","sources":["../../../src/atom/status-item/index.tsx"],"names":[],"mappings":";AASA,OAAkB,EAAC,eAAe,EAAC,MAAM,SAAS,CAAC;AAqFnD,QAAA,MAAM,UAAU;YAAW,eAAe;;;;;;CAkBzC,CAAC;AAWF,eAAe,UAAU,CAAC"}

package/lib/atom/{review-header-step-item → status-item}/index.js

@@ -21,6 +21,8 @@ function _interopRequireWildcard(obj, nodeInterop) { if (!nodeInterop && obj &&
 
 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 Content = (props, legacyContext) => {
   const {
     icon,
@@ -29,33 +31,59 @@ const Content = (props, legacyContext) => {
   } = props;
   const translate = (0, _provider.GetTranslateFromContext)(legacyContext);
   let child;
-  let ariaDescription;
+  let contentAriaLabel;
 
   switch (icon) {
     case 'no-answer':
       child = value;
-      ariaDescription = current ? translate('review_header_step_item.current_question', {
-        headerStepValue: value
-      }) : translate('review_header_step_item.not_answered_question', {
+      contentAriaLabel = translate('review_header_step_item.not_answered_question', {
+        current: current ? 'current ' : '',
         headerStepValue: value
       });
       break;
 
     case 'right':
       child = /*#__PURE__*/_react.default.createElement(_novaIcons.NovaCompositionCoorpacademyCheck, {
-        className: (0, _classnames.default)(_style.default.rightIcon, current && _style.default.currentRightIcon)
-      });
-      ariaDescription = translate('review_header_step_item.correct_question', {
-        headerStepValue: value
+        className: (0, _classnames.default)(_style.default.rightIcon, current && _style.default.currentRightIcon),
+        role: "status",
+        "aria-label": translate('review_header_step_item.correct_question', {
+          current: current ? 'current ' : '',
+          headerStepValue: value
+        })
       });
       break;
 
     case 'wrong':
       child = /*#__PURE__*/_react.default.createElement(_novaIcons.NovaSolidStatusClose, {
-        className: (0, _classnames.default)(_style.default.wrongIcon, current && _style.default.currentWrongIcon)
+        className: (0, _classnames.default)(_style.default.wrongIcon, current && _style.default.currentWrongIcon),
+        role: "alert",
+        "aria-label": translate('review_header_step_item.incorrect_question', {
+          current: current ? 'current ' : '',
+          headerStepValue: value
+        })
       });
-      ariaDescription = translate('review_header_step_item.incorrect_question', {
-        headerStepValue: value
+      break;
+
+    case 'errors-number':
+      child = value;
+      contentAriaLabel = translate('bulk_import.errors_number', {
+        bulkImportErrorsNumber: value
+      });
+      break;
+
+    case 'valid':
+      child = /*#__PURE__*/_react.default.createElement(_novaIcons.NovaCompositionCoorpacademyCheck, {
+        className: (0, _classnames.default)(_style.default.validIcon),
+        role: "status",
+        "aria-label": translate('bulk_import.valid_scorm')
+      });
+      break;
+
+    case 'invalid':
+      child = /*#__PURE__*/_react.default.createElement(_novaIcons.NovaSolidStatusClose, {
+        className: (0, _classnames.default)(_style.default.invalidIcon),
+        role: "alert",
+        "aria-label": translate('bulk_import.invalid_scorm')
       });
       break;
 
@@ -63,23 +91,22 @@ const Content = (props, legacyContext) => {
       return null;
   }
 
-  return /*#__PURE__*/_react.default.createElement("span", {
-    className: _style.default.value,
-    "aria-label": translate('review_header_step_item.aria_label', {
-      headerStepValue: value
-    }),
-    "aria-describedby": ariaDescription
-  }, child);
+  return /*#__PURE__*/_react.default.createElement("span", _extends({}, icon === 'no-answer' || icon === 'errors-number' ? {
+    'aria-label': contentAriaLabel,
+    role: 'status'
+  } : {}, {
+    className: _style.default.value
+  }), child);
 };
 
-const ReviewHeaderStepItem = props => {
+const StatusItem = props => {
   const {
     icon,
     current
   } = props;
   return /*#__PURE__*/_react.default.createElement("div", {
-    className: (0, _classnames.default)(_style.default.default, icon === 'right' && _style.default.right, icon === 'wrong' && _style.default.wrong, current && _style.default.current),
-    "data-name": "header-step-item"
+    className: (0, _classnames.default)(_style.default.default, icon === 'right' && _style.default.right, icon === 'wrong' && _style.default.wrong, current && _style.default.current, icon === 'valid' && _style.default.valid, icon === 'invalid' && _style.default.invalid, icon === 'errors-number' && _style.default.errorsNumber),
+    "data-name": "status-item"
   }, /*#__PURE__*/_react.default.createElement(Content, props));
 };
 
@@ -88,7 +115,7 @@ Content.contextTypes = {
   skin: _provider.default.childContextTypes.skin,
   translate: _provider.default.childContextTypes.translate
 };
-ReviewHeaderStepItem.propTypes = process.env.NODE_ENV !== "production" ? _types.default : {};
-var _default = ReviewHeaderStepItem;
+StatusItem.propTypes = process.env.NODE_ENV !== "production" ? _types.default : {};
+var _default = StatusItem;
 exports.default = _default;
 //# sourceMappingURL=index.js.map

package/lib/atom/status-item/index.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"index.js","names":["Content","props","legacyContext","icon","current","value","translate","GetTranslateFromContext","child","contentAriaLabel","headerStepValue","classnames","style","rightIcon","currentRightIcon","wrongIcon","currentWrongIcon","bulkImportErrorsNumber","validIcon","invalidIcon","role","StatusItem","default","right","wrong","valid","invalid","errorsNumber","propTypes","contextTypes","skin","Provider","childContextTypes"],"sources":["../../../src/atom/status-item/index.tsx"],"sourcesContent":["import React from 'react';\nimport classnames from 'classnames';\nimport {\n  NovaCompositionCoorpacademyCheck as RightIcon,\n  NovaSolidStatusClose as WrongIcon\n} from '@coorpacademy/nova-icons';\nimport Provider, {GetTranslateFromContext} from '../provider';\nimport {WebContextValues} from '../provider/web-context';\nimport style from './style.css';\nimport propTypes, {StatusItemProps} from './types';\n\nconst Content = (props: StatusItemProps, legacyContext: WebContextValues) => {\n  const {icon, current, value} = props;\n  const translate = GetTranslateFromContext(legacyContext);\n  let child;\n  let contentAriaLabel;\n  switch (icon) {\n    case 'no-answer':\n      child = value;\n      contentAriaLabel = translate('review_header_step_item.not_answered_question', {\n        current: current ? 'current ' : '',\n        headerStepValue: value\n      });\n      break;\n\n    case 'right':\n      child = (\n        <RightIcon\n          className={classnames(style.rightIcon, current && style.currentRightIcon)}\n          role=\"status\"\n          aria-label={translate('review_header_step_item.correct_question', {\n            current: current ? 'current ' : '',\n            headerStepValue: value\n          })}\n        />\n      );\n      break;\n\n    case 'wrong':\n      child = (\n        <WrongIcon\n          className={classnames(style.wrongIcon, current && style.currentWrongIcon)}\n          role=\"alert\"\n          aria-label={translate('review_header_step_item.incorrect_question', {\n            current: current ? 'current ' : '',\n            headerStepValue: value\n          })}\n        />\n      );\n      break;\n\n    case 'errors-number':\n      child = value;\n      contentAriaLabel = translate('bulk_import.errors_number', {\n        bulkImportErrorsNumber: value\n      });\n      break;\n\n    case 'valid':\n      child = (\n        <RightIcon\n          className={classnames(style.validIcon)}\n          role=\"status\"\n          aria-label={translate('bulk_import.valid_scorm')}\n        />\n      );\n      break;\n\n    case 'invalid':\n      child = (\n        <WrongIcon\n          className={classnames(style.invalidIcon)}\n          role=\"alert\"\n          aria-label={translate('bulk_import.invalid_scorm')}\n        />\n      );\n      break;\n\n    default:\n      return null;\n  }\n\n  return (\n    <span\n      {...(icon === 'no-answer' || icon === 'errors-number'\n        ? {'aria-label': contentAriaLabel, role: 'status'}\n        : {})}\n      className={style.value}\n    >\n      {child}\n    </span>\n  );\n};\n\nconst StatusItem = (props: StatusItemProps) => {\n  const {icon, current} = props;\n  return (\n    <div\n      className={classnames(\n        style.default,\n        icon === 'right' && style.right,\n        icon === 'wrong' && style.wrong,\n        current && style.current,\n        icon === 'valid' && style.valid,\n        icon === 'invalid' && style.invalid,\n        icon === 'errors-number' && style.errorsNumber\n      )}\n      data-name=\"status-item\"\n    >\n      <Content {...props} />\n    </div>\n  );\n};\n\nContent.propTypes = propTypes;\n\nContent.contextTypes = {\n  skin: Provider.childContextTypes.skin,\n  translate: Provider.childContextTypes.translate\n};\n\nStatusItem.propTypes = propTypes;\n\nexport default StatusItem;\n"],"mappings":"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"}

package/lib/atom/status-item/index.native.d.ts

@@ -0,0 +1,5 @@
+/// <reference types="react" />
+import { StatusItemProps } from './types';
+declare const Step: ({ value, icon, current }: StatusItemProps) => JSX.Element | null;
+export default Step;
+//# sourceMappingURL=index.native.d.ts.map

package/lib/atom/status-item/index.native.d.ts.map

@@ -0,0 +1 @@
+{"version":3,"file":"index.native.d.ts","sourceRoot":"","sources":["../../../src/atom/status-item/index.native.tsx"],"names":[],"mappings":";AAOA,OAAO,EAAC,eAAe,EAAC,MAAM,SAAS,CAAC;AA6CxC,QAAA,MAAM,IAAI,6BAA4B,eAAe,uBA2BpD,CAAC;AAEF,eAAe,IAAI,CAAC"}

package/lib/atom/{review-header-step-item → status-item}/index.native.js

@@ -15,7 +15,7 @@ function _getRequireWildcardCache(nodeInterop) { if (typeof WeakMap !== "functio
 
 function _interopRequireWildcard(obj, nodeInterop) { if (!nodeInterop && obj && obj.__esModule) { return obj; } if (obj === null || typeof obj !== "object" && typeof obj !== "function") { return { default: obj }; } var cache = _getRequireWildcardCache(nodeInterop); if (cache && cache.has(obj)) { return cache.get(obj); } var newObj = {}; var hasPropertyDescriptor = Object.defineProperty && Object.getOwnPropertyDescriptor; for (var key in obj) { if (key !== "default" && Object.prototype.hasOwnProperty.call(obj, key)) { var desc = hasPropertyDescriptor ? Object.getOwnPropertyDescriptor(obj, key) : null; if (desc && (desc.get || desc.set)) { Object.defineProperty(newObj, key, desc); } else { newObj[key] = obj[key]; } } } newObj.default = obj; if (cache) { cache.set(obj, newObj); } return newObj; }
 
-const createStyle = (current, icon) => {
+const createStyle = (icon, current) => {
   let backgroundColor;
 
   switch (icon) {
@@ -61,7 +61,7 @@ const Step = ({
 }) => {
   const [style, setStyle] = (0, _react.useState)(null);
   (0, _react.useEffect)(() => {
-    const _style = createStyle(current, icon);
+    const _style = createStyle(icon, current);
 
     setStyle(_style);
   }, [current, icon]);

package/lib/atom/status-item/index.native.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"index.native.js","names":["createStyle","icon","current","backgroundColor","COLORS","positive","negative","gray","StyleSheet","create","step","width","height","opacity","marginHorizontal","alignItems","justifyContent","borderRadius","stepText","fontWeight","fontSize","Step","value","style","setStyle","useState","useEffect","_style","child"],"sources":["../../../src/atom/status-item/index.native.tsx"],"sourcesContent":["import React, {useEffect, useState} from 'react';\nimport {StyleSheet, Text, TextStyle, View, ViewStyle} from 'react-native';\nimport {\n  NovaCompositionCoorpacademyCheck as RightIcon,\n  NovaSolidStatusClose as WrongIcon\n} from '@coorpacademy/nova-icons';\nimport {COLORS} from '../../variables/colors';\nimport {StatusItemProps} from './types';\n\ntype StyleSheetType = {\n  step: ViewStyle;\n  stepText: TextStyle;\n  icon: ViewStyle;\n};\n\nconst createStyle = (icon: StatusItemProps['icon'], current?: boolean): StyleSheetType => {\n  let backgroundColor;\n\n  switch (icon) {\n    case 'right':\n      backgroundColor = COLORS.positive;\n      break;\n    case 'wrong':\n      backgroundColor = COLORS.negative;\n      break;\n    case 'no-answer':\n    default:\n      backgroundColor = COLORS.gray;\n  }\n\n  return StyleSheet.create({\n    step: {\n      width: current ? 40 : 32,\n      height: current ? 40 : 32,\n      opacity: current ? 1 : 0.5,\n      marginHorizontal: 8,\n      backgroundColor,\n      alignItems: 'center',\n      justifyContent: 'center',\n      borderRadius: 50\n    },\n    stepText: {\n      fontWeight: '600',\n      fontSize: current ? 16 : 12\n    },\n    icon: {\n      width: current ? 14 : 12,\n      height: current ? 14 : 12\n    }\n  });\n};\n\nconst Step = ({value, icon, current}: StatusItemProps) => {\n  const [style, setStyle] = useState<StyleSheetType | null>(null);\n\n  useEffect(() => {\n    const _style = createStyle(icon, current);\n    setStyle(_style);\n  }, [current, icon]);\n\n  if (!style) {\n    return null;\n  }\n\n  let child;\n\n  switch (icon) {\n    case 'right':\n      child = <RightIcon style={style.icon} color=\"#fff\" />;\n      break;\n    case 'wrong':\n      child = <WrongIcon style={style.icon} color=\"#fff\" />;\n      break;\n    case 'no-answer':\n    default:\n      child = <Text style={style.stepText}>{value}</Text>;\n  }\n\n  return <View style={style.step}>{child}</View>;\n};\n\nexport default Step;\n"],"mappings":";;;;;AAAA;;AACA;;AACA;;AAIA;;;;;;AASA,MAAMA,WAAW,GAAG,CAACC,IAAD,EAAgCC,OAAhC,KAAsE;EACxF,IAAIC,eAAJ;;EAEA,QAAQF,IAAR;IACE,KAAK,OAAL;MACEE,eAAe,GAAGC,cAAA,CAAOC,QAAzB;MACA;;IACF,KAAK,OAAL;MACEF,eAAe,GAAGC,cAAA,CAAOE,QAAzB;MACA;;IACF,KAAK,WAAL;IACA;MACEH,eAAe,GAAGC,cAAA,CAAOG,IAAzB;EATJ;;EAYA,OAAOC,uBAAA,CAAWC,MAAX,CAAkB;IACvBC,IAAI,EAAE;MACJC,KAAK,EAAET,OAAO,GAAG,EAAH,GAAQ,EADlB;MAEJU,MAAM,EAAEV,OAAO,GAAG,EAAH,GAAQ,EAFnB;MAGJW,OAAO,EAAEX,OAAO,GAAG,CAAH,GAAO,GAHnB;MAIJY,gBAAgB,EAAE,CAJd;MAKJX,eALI;MAMJY,UAAU,EAAE,QANR;MAOJC,cAAc,EAAE,QAPZ;MAQJC,YAAY,EAAE;IARV,CADiB;IAWvBC,QAAQ,EAAE;MACRC,UAAU,EAAE,KADJ;MAERC,QAAQ,EAAElB,OAAO,GAAG,EAAH,GAAQ;IAFjB,CAXa;IAevBD,IAAI,EAAE;MACJU,KAAK,EAAET,OAAO,GAAG,EAAH,GAAQ,EADlB;MAEJU,MAAM,EAAEV,OAAO,GAAG,EAAH,GAAQ;IAFnB;EAfiB,CAAlB,CAAP;AAoBD,CAnCD;;AAqCA,MAAMmB,IAAI,GAAG,CAAC;EAACC,KAAD;EAAQrB,IAAR;EAAcC;AAAd,CAAD,KAA6C;EACxD,MAAM,CAACqB,KAAD,EAAQC,QAAR,IAAoB,IAAAC,eAAA,EAAgC,IAAhC,CAA1B;EAEA,IAAAC,gBAAA,EAAU,MAAM;IACd,MAAMC,MAAM,GAAG3B,WAAW,CAACC,IAAD,EAAOC,OAAP,CAA1B;;IACAsB,QAAQ,CAACG,MAAD,CAAR;EACD,CAHD,EAGG,CAACzB,OAAD,EAAUD,IAAV,CAHH;;EAKA,IAAI,CAACsB,KAAL,EAAY;IACV,OAAO,IAAP;EACD;;EAED,IAAIK,KAAJ;;EAEA,QAAQ3B,IAAR;IACE,KAAK,OAAL;MACE2B,KAAK,gBAAG,6BAAC,2CAAD;QAAW,KAAK,EAAEL,KAAK,CAACtB,IAAxB;QAA8B,KAAK,EAAC;MAApC,EAAR;MACA;;IACF,KAAK,OAAL;MACE2B,KAAK,gBAAG,6BAAC,+BAAD;QAAW,KAAK,EAAEL,KAAK,CAACtB,IAAxB;QAA8B,KAAK,EAAC;MAApC,EAAR;MACA;;IACF,KAAK,WAAL;IACA;MACE2B,KAAK,gBAAG,6BAAC,iBAAD;QAAM,KAAK,EAAEL,KAAK,CAACL;MAAnB,GAA8BI,KAA9B,CAAR;EATJ;;EAYA,oBAAO,6BAAC,iBAAD;IAAM,KAAK,EAAEC,KAAK,CAACb;EAAnB,GAA0BkB,KAA1B,CAAP;AACD,CA3BD;;eA6BeP,I"}

package/lib/atom/{review-header-step-item → status-item}/style.css

@@ -3,6 +3,12 @@
 @value cm_positive_100 from colors;
 @value cm_negative_100 from colors;
 @value white from colors;
+@value positive from colors;
+@value negative from colors;
+@value cm_negative_50 from colors;
+@value cm_green_secondary_200 from colors;
+@value cm_green_secondary_100 from colors;
+@value cm_pink_50 from colors;
 
 .default {
   width: 32px;
@@ -62,4 +68,45 @@
   transform: scale(1.5);
 }
 
+/* ----------------- CM bulk theme ------------------------- */
 
+
+.valid {
+  opacity: 1;
+  width: 24px;
+  height: 24px;
+  background-color: cm_green_secondary_100;
+}
+
+.validIcon {
+  color: cm_green_secondary_200;
+  width: 12px;
+  height: 10px;
+  transition: transform 0.25s ease;
+}
+
+.invalid {
+  opacity: 1;
+  width: 24px;
+  height: 24px;
+  background-color: cm_negative_50;
+}
+
+.invalidIcon {
+  color: cm_negative_100;
+  width: 10px;
+  height: 10px;
+  transition: color 0.25s ease;
+}
+
+.errorsNumber {
+  opacity: 1;
+  width: 24px;
+  height: 24px;
+  background-color: cm_pink_50;
+  color: cm_negative_100;
+  font-family: 'Gilroy';
+  font-style: normal;
+  font-weight: 600;
+  font-size: 14px;
+}

package/lib/atom/{review-header-step-item → status-item}/types.d.ts

@@ -5,12 +5,12 @@ declare const propTypes: {
     value: PropTypes.Requireable<string>;
 };
 export default propTypes;
-export declare type HeaderStepItemProps = {
-    current: boolean;
-    icon: 'no-answer' | 'right' | 'wrong';
-    value: string;
+export declare type StatusItemProps = {
+    current?: boolean;
+    icon: 'no-answer' | 'right' | 'wrong' | 'valid' | 'invalid' | 'errors-number';
+    value?: string;
 };
 export declare type Fixture = {
-    props: HeaderStepItemProps;
+    props: StatusItemProps;
 };
 //# sourceMappingURL=types.d.ts.map

package/lib/atom/status-item/types.d.ts.map

@@ -0,0 +1 @@
+{"version":3,"file":"types.d.ts","sourceRoot":"","sources":["../../../src/atom/status-item/types.ts"],"names":[],"mappings":"AAAA,OAAO,SAAS,MAAM,YAAY,CAAC;AAEnC,QAAA,MAAM,SAAS;;;;CAId,CAAC;AAEF,eAAe,SAAS,CAAC;AAEzB,oBAAY,eAAe,GAAG;IAC5B,OAAO,CAAC,EAAE,OAAO,CAAC;IAClB,IAAI,EAAE,WAAW,GAAG,OAAO,GAAG,OAAO,GAAG,OAAO,GAAG,SAAS,GAAG,eAAe,CAAC;IAC9E,KAAK,CAAC,EAAE,MAAM,CAAC;CAChB,CAAC;AAEF,oBAAY,OAAO,GAAG;IACpB,KAAK,EAAE,eAAe,CAAC;CACxB,CAAC"}

package/lib/atom/{review-header-step-item → status-item}/types.js

@@ -9,7 +9,7 @@ function _interopRequireDefault(obj) { return obj && obj.__esModule ? obj : { de
 
 const propTypes = {
   current: _propTypes.default.bool,
-  icon: _propTypes.default.oneOf(['no-answer', 'right', 'wrong']),
+  icon: _propTypes.default.oneOf(['no-answer', 'right', 'wrong', 'valid', 'invalid', 'errors-number']),
   value: _propTypes.default.string
 };
 var _default = propTypes;

package/lib/atom/status-item/types.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"types.js","names":["propTypes","current","PropTypes","bool","icon","oneOf","value","string"],"sources":["../../../src/atom/status-item/types.ts"],"sourcesContent":["import PropTypes from 'prop-types';\n\nconst propTypes = {\n  current: PropTypes.bool,\n  icon: PropTypes.oneOf(['no-answer', 'right', 'wrong', 'valid', 'invalid', 'errors-number']),\n  value: PropTypes.string\n};\n\nexport default propTypes;\n\nexport type StatusItemProps = {\n  current?: boolean;\n  icon: 'no-answer' | 'right' | 'wrong' | 'valid' | 'invalid' | 'errors-number';\n  value?: string;\n};\n\nexport type Fixture = {\n  props: StatusItemProps;\n};\n"],"mappings":";;;;;AAAA;;;;AAEA,MAAMA,SAAS,GAAG;EAChBC,OAAO,EAAEC,kBAAA,CAAUC,IADH;EAEhBC,IAAI,EAAEF,kBAAA,CAAUG,KAAV,CAAgB,CAAC,WAAD,EAAc,OAAd,EAAuB,OAAvB,EAAgC,OAAhC,EAAyC,SAAzC,EAAoD,eAApD,CAAhB,CAFU;EAGhBC,KAAK,EAAEJ,kBAAA,CAAUK;AAHD,CAAlB;eAMeP,S"}