@coorpacademy/components 11.11.4 → 11.11.5

package/es/util/button-icons.js.map

@@ -1 +1 @@
-{"version":3,"file":"button-icons.js","names":["NovaSolidRemoveAddAddCircle1","AddIcon","NovaCompositionCoorpacademyAnalytics","AnalyticsIcon","NovaSolidContentEditionBin","BinIcon","NovaCompositionCoorpacademyBulletPoint","BulletPointIcon","NovaCompositionNavigationArrowLeft","ChevronLeftIcon","NovaCompositionNavigationArrowRight","ChevronRightIcon","NovaSolidStatusClose","CloseIcon","NovaSolidContentEditionPencilWrite","EditIcon","NovaCompositionCoorpacademyEye","EyeIcon","NovaSolidContentContentViewModule1","ListIcon","NovaSolidLoginLogout1","LogoutIcon","NovaSolidApplicationsWindowUpload3","PublishIcon","NovaSolidComputersSdCard","SaveIcon","NovaLineLoginKey1","KlfIcon","NovaSolidFilesFoldersFolders","FoldersIcon","NovaSolidFilesBasicFileUpload2","UploadIcon","ICONS","add","analytics","bin","close","edit","key","list","logout","publish","save","see","folders","upload"],"sources":["../../src/util/button-icons.js"],"sourcesContent":["import {\n  NovaSolidRemoveAddAddCircle1 as AddIcon,\n  NovaCompositionCoorpacademyAnalytics as AnalyticsIcon,\n  NovaSolidContentEditionBin as BinIcon,\n  NovaCompositionCoorpacademyBulletPoint as BulletPointIcon,\n  NovaCompositionNavigationArrowLeft as ChevronLeftIcon,\n  NovaCompositionNavigationArrowRight as ChevronRightIcon,\n  NovaSolidStatusClose as CloseIcon,\n  NovaSolidContentEditionPencilWrite as EditIcon,\n  NovaCompositionCoorpacademyEye as EyeIcon,\n  NovaSolidContentContentViewModule1 as ListIcon,\n  NovaSolidLoginLogout1 as LogoutIcon,\n  NovaSolidApplicationsWindowUpload3 as PublishIcon,\n  NovaSolidComputersSdCard as SaveIcon,\n  NovaLineLoginKey1 as KlfIcon,\n  NovaSolidFilesFoldersFolders as FoldersIcon,\n  NovaSolidFilesBasicFileUpload2 as UploadIcon\n} from '@coorpacademy/nova-icons';\n\nexport const ICONS = {\n  add: AddIcon,\n  analytics: AnalyticsIcon,\n  bin: BinIcon,\n  'bullet-point': BulletPointIcon,\n  'chevron-left': ChevronLeftIcon,\n  'chevron-right': ChevronRightIcon,\n  close: CloseIcon,\n  edit: EditIcon,\n  key: KlfIcon,\n  list: ListIcon,\n  logout: LogoutIcon,\n  publish: PublishIcon,\n  save: SaveIcon,\n  see: EyeIcon,\n  folders: FoldersIcon,\n  upload: UploadIcon\n};\n"],"mappings":"AAAA,SACEA,4BAA4B,IAAIC,OADlC,EAEEC,oCAAoC,IAAIC,aAF1C,EAGEC,0BAA0B,IAAIC,OAHhC,EAIEC,sCAAsC,IAAIC,eAJ5C,EAKEC,kCAAkC,IAAIC,eALxC,EAMEC,mCAAmC,IAAIC,gBANzC,EAOEC,oBAAoB,IAAIC,SAP1B,EAQEC,kCAAkC,IAAIC,QARxC,EASEC,8BAA8B,IAAIC,OATpC,EAUEC,kCAAkC,IAAIC,QAVxC,EAWEC,qBAAqB,IAAIC,UAX3B,EAYEC,kCAAkC,IAAIC,WAZxC,EAaEC,wBAAwB,IAAIC,QAb9B,EAcEC,iBAAiB,IAAIC,OAdvB,EAeEC,4BAA4B,IAAIC,WAflC,EAgBEC,8BAA8B,IAAIC,UAhBpC,QAiBO,0BAjBP;AAmBA,OAAO,MAAMC,KAAK,GAAG;EACnBC,GAAG,EAAEhC,OADc;EAEnBiC,SAAS,EAAE/B,aAFQ;EAGnBgC,GAAG,EAAE9B,OAHc;EAInB,gBAAgBE,eAJG;EAKnB,gBAAgBE,eALG;EAMnB,iBAAiBE,gBANE;EAOnByB,KAAK,EAAEvB,SAPY;EAQnBwB,IAAI,EAAEtB,QARa;EASnBuB,GAAG,EAAEX,OATc;EAUnBY,IAAI,EAAEpB,QAVa;EAWnBqB,MAAM,EAAEnB,UAXW;EAYnBoB,OAAO,EAAElB,WAZU;EAanBmB,IAAI,EAAEjB,QAba;EAcnBkB,GAAG,EAAE1B,OAdc;EAenB2B,OAAO,EAAEf,WAfU;EAgBnBgB,MAAM,EAAEd;AAhBW,CAAd"}
+{"version":3,"file":"button-icons.js","names":["NovaSolidRemoveAddAddCircle1","AddIcon","NovaCompositionCoorpacademyAnalytics","AnalyticsIcon","NovaSolidContentEditionBin","BinIcon","NovaCompositionCoorpacademyBulletPoint","BulletPointIcon","NovaCompositionNavigationArrowLeft","ChevronLeftIcon","NovaCompositionNavigationArrowRight","ChevronRightIcon","NovaSolidStatusClose","CloseIcon","NovaSolidContentEditionPencilWrite","EditIcon","NovaCompositionCoorpacademyEye","EyeIcon","NovaSolidContentContentViewModule1","ListIcon","NovaSolidLoginLogout1","LogoutIcon","NovaSolidApplicationsWindowUpload3","PublishIcon","NovaSolidComputersSdCard","SaveIcon","NovaLineLoginKey1","KlfIcon","NovaSolidFilesFoldersFolders","FoldersIcon","NovaSolidFilesBasicFileUpload2","UploadIcon","NovaCompositionNavigationArrowDown","ArrowDown","ICONS","add","analytics","bin","close","edit","key","list","logout","publish","save","see","folders","upload","down"],"sources":["../../src/util/button-icons.js"],"sourcesContent":["import {\n  NovaSolidRemoveAddAddCircle1 as AddIcon,\n  NovaCompositionCoorpacademyAnalytics as AnalyticsIcon,\n  NovaSolidContentEditionBin as BinIcon,\n  NovaCompositionCoorpacademyBulletPoint as BulletPointIcon,\n  NovaCompositionNavigationArrowLeft as ChevronLeftIcon,\n  NovaCompositionNavigationArrowRight as ChevronRightIcon,\n  NovaSolidStatusClose as CloseIcon,\n  NovaSolidContentEditionPencilWrite as EditIcon,\n  NovaCompositionCoorpacademyEye as EyeIcon,\n  NovaSolidContentContentViewModule1 as ListIcon,\n  NovaSolidLoginLogout1 as LogoutIcon,\n  NovaSolidApplicationsWindowUpload3 as PublishIcon,\n  NovaSolidComputersSdCard as SaveIcon,\n  NovaLineLoginKey1 as KlfIcon,\n  NovaSolidFilesFoldersFolders as FoldersIcon,\n  NovaSolidFilesBasicFileUpload2 as UploadIcon,\n  NovaCompositionNavigationArrowDown as ArrowDown\n} from '@coorpacademy/nova-icons';\n\nexport const ICONS = {\n  add: AddIcon,\n  analytics: AnalyticsIcon,\n  bin: BinIcon,\n  'bullet-point': BulletPointIcon,\n  'chevron-left': ChevronLeftIcon,\n  'chevron-right': ChevronRightIcon,\n  close: CloseIcon,\n  edit: EditIcon,\n  key: KlfIcon,\n  list: ListIcon,\n  logout: LogoutIcon,\n  publish: PublishIcon,\n  save: SaveIcon,\n  see: EyeIcon,\n  folders: FoldersIcon,\n  upload: UploadIcon,\n  down: ArrowDown\n};\n"],"mappings":"AAAA,SACEA,4BAA4B,IAAIC,OADlC,EAEEC,oCAAoC,IAAIC,aAF1C,EAGEC,0BAA0B,IAAIC,OAHhC,EAIEC,sCAAsC,IAAIC,eAJ5C,EAKEC,kCAAkC,IAAIC,eALxC,EAMEC,mCAAmC,IAAIC,gBANzC,EAOEC,oBAAoB,IAAIC,SAP1B,EAQEC,kCAAkC,IAAIC,QARxC,EASEC,8BAA8B,IAAIC,OATpC,EAUEC,kCAAkC,IAAIC,QAVxC,EAWEC,qBAAqB,IAAIC,UAX3B,EAYEC,kCAAkC,IAAIC,WAZxC,EAaEC,wBAAwB,IAAIC,QAb9B,EAcEC,iBAAiB,IAAIC,OAdvB,EAeEC,4BAA4B,IAAIC,WAflC,EAgBEC,8BAA8B,IAAIC,UAhBpC,EAiBEC,kCAAkC,IAAIC,SAjBxC,QAkBO,0BAlBP;AAoBA,OAAO,MAAMC,KAAK,GAAG;EACnBC,GAAG,EAAElC,OADc;EAEnBmC,SAAS,EAAEjC,aAFQ;EAGnBkC,GAAG,EAAEhC,OAHc;EAInB,gBAAgBE,eAJG;EAKnB,gBAAgBE,eALG;EAMnB,iBAAiBE,gBANE;EAOnB2B,KAAK,EAAEzB,SAPY;EAQnB0B,IAAI,EAAExB,QARa;EASnByB,GAAG,EAAEb,OATc;EAUnBc,IAAI,EAAEtB,QAVa;EAWnBuB,MAAM,EAAErB,UAXW;EAYnBsB,OAAO,EAAEpB,WAZU;EAanBqB,IAAI,EAAEnB,QAba;EAcnBoB,GAAG,EAAE5B,OAdc;EAenB6B,OAAO,EAAEjB,WAfU;EAgBnBkB,MAAM,EAAEhB,UAhBW;EAiBnBiB,IAAI,EAAEf;AAjBa,CAAd"}

package/es/variables/colors.css

@@ -51,6 +51,8 @@
 @value cm_negative_50: #ffe5e6;
 @value cm_green_50: #e8fcf8;
 @value cm_green_200: #16ac8c;
+@value cm_green_secondary_100: #D6F5E1;
+@value cm_green_secondary_200: #38CC6C;
 @value cm_orange_200: #FF7043;
 @value cm_orange_700: #FF4105;
 @value cm_pink_50: #ffefeb;

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

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

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

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

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/button-link-icon-only/index.d.ts.map

@@ -1 +1 @@
-{"version":3,"file":"index.d.ts","sourceRoot":"","sources":["../../../src/atom/button-link-icon-only/index.js"],"names":[],"mappings":";AAiCA,6DA+CC"}
+{"version":3,"file":"index.d.ts","sourceRoot":"","sources":["../../../src/atom/button-link-icon-only/index.js"],"names":[],"mappings":";AAkCA,6DA+CC"}

package/lib/atom/button-link-icon-only/index.js

@@ -68,7 +68,7 @@ const ButtonLinkIconOnly = props => {
     className
   } = props;
   const contentView = getButtonContent(icon);
-  const styleButton = (0, _classnames.default)(getSizeStyle(size), link && _style.default.link, disabled && _style.default.disabled, className);
+  const styleButton = (0, _classnames.default)(getSizeStyle(size), link && _style.default.link, disabled && _style.default.disabled, _style.default[className]);
   const handleOnClick = (0, _react.useMemo)(() => () => onClick(), [onClick]);
 
   if (link) {

package/lib/atom/button-link-icon-only/index.js.map

@@ -1 +1 @@
-{"version":3,"file":"index.js","names":["getButtonContent","icon","Icon","ICONS","style","buttonContent","getSizeStyle","size","small","responsive","default","ButtonLinkIconOnly","props","disabled","dataName","ariaLabel","link","onClick","className","contentView","styleButton","classnames","handleOnClick","useMemo","propTypes","PropTypes","oneOf","string","func","shape","href","download","bool","target"],"sources":["../../../src/atom/button-link-icon-only/index.js"],"sourcesContent":["import React, {useMemo} from 'react';\nimport PropTypes from 'prop-types';\nimport {getOr, keys} from 'lodash/fp';\nimport classnames from 'classnames';\nimport {ICONS} from '../../util/button-icons';\nimport Link from '../link';\nimport style from './style.css';\n\nconst getButtonContent = icon => {\n  const Icon = getOr(null, icon, ICONS);\n\n  if (!Icon) {\n    return <div className={style.buttonContent} />;\n  }\n\n  return (\n    <div className={style.buttonContent}>\n      <Icon className={style.icon} />\n    </div>\n  );\n};\n\nconst getSizeStyle = size => {\n  switch (size) {\n    case 'small':\n      return style.small;\n    case 'responsive':\n      return style.responsive;\n    default:\n      return style.default;\n  }\n};\n\nconst ButtonLinkIconOnly = props => {\n  const {\n    size = 'default',\n    disabled,\n    icon,\n    'data-name': dataName,\n    'aria-label': ariaLabel,\n    link,\n    onClick,\n    className\n  } = props;\n  const contentView = getButtonContent(icon);\n  const styleButton = classnames(\n    getSizeStyle(size),\n    link && style.link,\n    disabled && style.disabled,\n    className\n  );\n\n  const handleOnClick = useMemo(() => () => onClick(), [onClick]);\n\n  if (link) {\n    return (\n      <Link\n        {...link}\n        className={styleButton}\n        data-name={dataName}\n        aria-label={ariaLabel}\n        title={ariaLabel}\n      >\n        {contentView}\n      </Link>\n    );\n  }\n\n  return (\n    <button\n      type=\"button\"\n      aria-label={ariaLabel}\n      data-name={dataName}\n      title={ariaLabel}\n      className={styleButton}\n      onClick={handleOnClick}\n    >\n      {contentView}\n    </button>\n  );\n};\n\nButtonLinkIconOnly.propTypes = {\n  size: PropTypes.oneOf(['default', 'small', 'responsive']),\n  'aria-label': PropTypes.string,\n  'data-name': PropTypes.string,\n  icon: PropTypes.oneOf(keys(ICONS)),\n  onClick: PropTypes.func,\n  link: PropTypes.shape({\n    href: PropTypes.string,\n    download: PropTypes.bool,\n    target: PropTypes.oneOf(['_self', '_blank', '_parent', '_top'])\n  }),\n  disabled: PropTypes.bool,\n  className: PropTypes.string\n};\n\nexport default ButtonLinkIconOnly;\n"],"mappings":";;;;;;;;;AAAA;;AACA;;AAEA;;AACA;;AACA;;AACA;;;;;;;;;;AAEA,MAAMA,gBAAgB,GAAGC,IAAI,IAAI;EAC/B,MAAMC,IAAI,GAAG,qBAAM,IAAN,EAAYD,IAAZ,EAAkBE,kBAAlB,CAAb;;EAEA,IAAI,CAACD,IAAL,EAAW;IACT,oBAAO;MAAK,SAAS,EAAEE,cAAA,CAAMC;IAAtB,EAAP;EACD;;EAED,oBACE;IAAK,SAAS,EAAED,cAAA,CAAMC;EAAtB,gBACE,6BAAC,IAAD;IAAM,SAAS,EAAED,cAAA,CAAMH;EAAvB,EADF,CADF;AAKD,CAZD;;AAcA,MAAMK,YAAY,GAAGC,IAAI,IAAI;EAC3B,QAAQA,IAAR;IACE,KAAK,OAAL;MACE,OAAOH,cAAA,CAAMI,KAAb;;IACF,KAAK,YAAL;MACE,OAAOJ,cAAA,CAAMK,UAAb;;IACF;MACE,OAAOL,cAAA,CAAMM,OAAb;EANJ;AAQD,CATD;;AAWA,MAAMC,kBAAkB,GAAGC,KAAK,IAAI;EAClC,MAAM;IACJL,IAAI,GAAG,SADH;IAEJM,QAFI;IAGJZ,IAHI;IAIJ,aAAaa,QAJT;IAKJ,cAAcC,SALV;IAMJC,IANI;IAOJC,OAPI;IAQJC;EARI,IASFN,KATJ;EAUA,MAAMO,WAAW,GAAGnB,gBAAgB,CAACC,IAAD,CAApC;EACA,MAAMmB,WAAW,GAAG,IAAAC,mBAAA,EAClBf,YAAY,CAACC,IAAD,CADM,EAElBS,IAAI,IAAIZ,cAAA,CAAMY,IAFI,EAGlBH,QAAQ,IAAIT,cAAA,CAAMS,QAHA,EAIlBK,SAJkB,CAApB;EAOA,MAAMI,aAAa,GAAG,IAAAC,cAAA,EAAQ,MAAM,MAAMN,OAAO,EAA3B,EAA+B,CAACA,OAAD,CAA/B,CAAtB;;EAEA,IAAID,IAAJ,EAAU;IACR,oBACE,6BAAC,aAAD,eACMA,IADN;MAEE,SAAS,EAAEI,WAFb;MAGE,aAAWN,QAHb;MAIE,cAAYC,SAJd;MAKE,KAAK,EAAEA;IALT,IAOGI,WAPH,CADF;EAWD;;EAED,oBACE;IACE,IAAI,EAAC,QADP;IAEE,cAAYJ,SAFd;IAGE,aAAWD,QAHb;IAIE,KAAK,EAAEC,SAJT;IAKE,SAAS,EAAEK,WALb;IAME,OAAO,EAAEE;EANX,GAQGH,WARH,CADF;AAYD,CA/CD;;AAiDAR,kBAAkB,CAACa,SAAnB,2CAA+B;EAC7BjB,IAAI,EAAEkB,kBAAA,CAAUC,KAAV,CAAgB,CAAC,SAAD,EAAY,OAAZ,EAAqB,YAArB,CAAhB,CADuB;EAE7B,cAAcD,kBAAA,CAAUE,MAFK;EAG7B,aAAaF,kBAAA,CAAUE,MAHM;EAI7B1B,IAAI,EAAEwB,kBAAA,CAAUC,KAAV,CAAgB,oBAAKvB,kBAAL,CAAhB,CAJuB;EAK7Bc,OAAO,EAAEQ,kBAAA,CAAUG,IALU;EAM7BZ,IAAI,EAAES,kBAAA,CAAUI,KAAV,CAAgB;IACpBC,IAAI,EAAEL,kBAAA,CAAUE,MADI;IAEpBI,QAAQ,EAAEN,kBAAA,CAAUO,IAFA;IAGpBC,MAAM,EAAER,kBAAA,CAAUC,KAAV,CAAgB,CAAC,OAAD,EAAU,QAAV,EAAoB,SAApB,EAA+B,MAA/B,CAAhB;EAHY,CAAhB,CANuB;EAW7Bb,QAAQ,EAAEY,kBAAA,CAAUO,IAXS;EAY7Bd,SAAS,EAAEO,kBAAA,CAAUE;AAZQ,CAA/B;eAeehB,kB"}
+{"version":3,"file":"index.js","names":["getButtonContent","icon","Icon","ICONS","style","buttonContent","getSizeStyle","size","small","responsive","default","ButtonLinkIconOnly","props","disabled","dataName","ariaLabel","link","onClick","className","contentView","styleButton","classnames","handleOnClick","useMemo","propTypes","PropTypes","oneOf","string","func","shape","href","download","bool","target"],"sources":["../../../src/atom/button-link-icon-only/index.js"],"sourcesContent":["import React, {useMemo} from 'react';\nimport PropTypes from 'prop-types';\nimport {getOr, keys} from 'lodash/fp';\nimport classnames from 'classnames';\nimport {ICONS} from '../../util/button-icons';\nimport Link from '../link';\n// eslint-disable-next-line css-modules/no-unused-class\nimport style from './style.css';\n\nconst getButtonContent = icon => {\n  const Icon = getOr(null, icon, ICONS);\n\n  if (!Icon) {\n    return <div className={style.buttonContent} />;\n  }\n\n  return (\n    <div className={style.buttonContent}>\n      <Icon className={style.icon} />\n    </div>\n  );\n};\n\nconst getSizeStyle = size => {\n  switch (size) {\n    case 'small':\n      return style.small;\n    case 'responsive':\n      return style.responsive;\n    default:\n      return style.default;\n  }\n};\n\nconst ButtonLinkIconOnly = props => {\n  const {\n    size = 'default',\n    disabled,\n    icon,\n    'data-name': dataName,\n    'aria-label': ariaLabel,\n    link,\n    onClick,\n    className\n  } = props;\n  const contentView = getButtonContent(icon);\n  const styleButton = classnames(\n    getSizeStyle(size),\n    link && style.link,\n    disabled && style.disabled,\n    style[className]\n  );\n\n  const handleOnClick = useMemo(() => () => onClick(), [onClick]);\n\n  if (link) {\n    return (\n      <Link\n        {...link}\n        className={styleButton}\n        data-name={dataName}\n        aria-label={ariaLabel}\n        title={ariaLabel}\n      >\n        {contentView}\n      </Link>\n    );\n  }\n\n  return (\n    <button\n      type=\"button\"\n      aria-label={ariaLabel}\n      data-name={dataName}\n      title={ariaLabel}\n      className={styleButton}\n      onClick={handleOnClick}\n    >\n      {contentView}\n    </button>\n  );\n};\n\nButtonLinkIconOnly.propTypes = {\n  size: PropTypes.oneOf(['default', 'small', 'responsive']),\n  'aria-label': PropTypes.string,\n  'data-name': PropTypes.string,\n  icon: PropTypes.oneOf(keys(ICONS)),\n  onClick: PropTypes.func,\n  link: PropTypes.shape({\n    href: PropTypes.string,\n    download: PropTypes.bool,\n    target: PropTypes.oneOf(['_self', '_blank', '_parent', '_top'])\n  }),\n  disabled: PropTypes.bool,\n  className: PropTypes.string\n};\n\nexport default ButtonLinkIconOnly;\n"],"mappings":";;;;;;;;;AAAA;;AACA;;AAEA;;AACA;;AACA;;AAEA;;;;;;;;;;AAEA,MAAMA,gBAAgB,GAAGC,IAAI,IAAI;EAC/B,MAAMC,IAAI,GAAG,qBAAM,IAAN,EAAYD,IAAZ,EAAkBE,kBAAlB,CAAb;;EAEA,IAAI,CAACD,IAAL,EAAW;IACT,oBAAO;MAAK,SAAS,EAAEE,cAAA,CAAMC;IAAtB,EAAP;EACD;;EAED,oBACE;IAAK,SAAS,EAAED,cAAA,CAAMC;EAAtB,gBACE,6BAAC,IAAD;IAAM,SAAS,EAAED,cAAA,CAAMH;EAAvB,EADF,CADF;AAKD,CAZD;;AAcA,MAAMK,YAAY,GAAGC,IAAI,IAAI;EAC3B,QAAQA,IAAR;IACE,KAAK,OAAL;MACE,OAAOH,cAAA,CAAMI,KAAb;;IACF,KAAK,YAAL;MACE,OAAOJ,cAAA,CAAMK,UAAb;;IACF;MACE,OAAOL,cAAA,CAAMM,OAAb;EANJ;AAQD,CATD;;AAWA,MAAMC,kBAAkB,GAAGC,KAAK,IAAI;EAClC,MAAM;IACJL,IAAI,GAAG,SADH;IAEJM,QAFI;IAGJZ,IAHI;IAIJ,aAAaa,QAJT;IAKJ,cAAcC,SALV;IAMJC,IANI;IAOJC,OAPI;IAQJC;EARI,IASFN,KATJ;EAUA,MAAMO,WAAW,GAAGnB,gBAAgB,CAACC,IAAD,CAApC;EACA,MAAMmB,WAAW,GAAG,IAAAC,mBAAA,EAClBf,YAAY,CAACC,IAAD,CADM,EAElBS,IAAI,IAAIZ,cAAA,CAAMY,IAFI,EAGlBH,QAAQ,IAAIT,cAAA,CAAMS,QAHA,EAIlBT,cAAA,CAAMc,SAAN,CAJkB,CAApB;EAOA,MAAMI,aAAa,GAAG,IAAAC,cAAA,EAAQ,MAAM,MAAMN,OAAO,EAA3B,EAA+B,CAACA,OAAD,CAA/B,CAAtB;;EAEA,IAAID,IAAJ,EAAU;IACR,oBACE,6BAAC,aAAD,eACMA,IADN;MAEE,SAAS,EAAEI,WAFb;MAGE,aAAWN,QAHb;MAIE,cAAYC,SAJd;MAKE,KAAK,EAAEA;IALT,IAOGI,WAPH,CADF;EAWD;;EAED,oBACE;IACE,IAAI,EAAC,QADP;IAEE,cAAYJ,SAFd;IAGE,aAAWD,QAHb;IAIE,KAAK,EAAEC,SAJT;IAKE,SAAS,EAAEK,WALb;IAME,OAAO,EAAEE;EANX,GAQGH,WARH,CADF;AAYD,CA/CD;;AAiDAR,kBAAkB,CAACa,SAAnB,2CAA+B;EAC7BjB,IAAI,EAAEkB,kBAAA,CAAUC,KAAV,CAAgB,CAAC,SAAD,EAAY,OAAZ,EAAqB,YAArB,CAAhB,CADuB;EAE7B,cAAcD,kBAAA,CAAUE,MAFK;EAG7B,aAAaF,kBAAA,CAAUE,MAHM;EAI7B1B,IAAI,EAAEwB,kBAAA,CAAUC,KAAV,CAAgB,oBAAKvB,kBAAL,CAAhB,CAJuB;EAK7Bc,OAAO,EAAEQ,kBAAA,CAAUG,IALU;EAM7BZ,IAAI,EAAES,kBAAA,CAAUI,KAAV,CAAgB;IACpBC,IAAI,EAAEL,kBAAA,CAAUE,MADI;IAEpBI,QAAQ,EAAEN,kBAAA,CAAUO,IAFA;IAGpBC,MAAM,EAAER,kBAAA,CAAUC,KAAV,CAAgB,CAAC,OAAD,EAAU,QAAV,EAAoB,SAApB,EAA+B,MAA/B,CAAhB;EAHY,CAAhB,CANuB;EAW7Bb,QAAQ,EAAEY,kBAAA,CAAUO,IAXS;EAY7Bd,SAAS,EAAEO,kBAAA,CAAUE;AAZQ,CAA/B;eAeehB,kB"}

package/lib/atom/button-link-icon-only/style.css

@@ -91,3 +91,26 @@
   width: 12px;
   height: 12px;
 }
+
+/* ----------------- CM bulk style ------------------------- */
+
+.bulkArrowDown {
+  composes: button;
+  width: 24px;
+  height: 24px;
+  background-color: white;
+  border: 1px solid cm_grey_200;
+  border-radius: 5px;
+  padding: 10px;
+  opacity: 0.5;
+}
+
+.bulkArrowDown .icon {
+  width: 8px;
+  height: 8px;
+}
+
+.bulkArrowUp {
+  composes: bulkArrowDown;
+  transform: rotate(180deg);
+}

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"}