@coorpacademy/components 11.32.25 → 11.32.26

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

@@ -27,6 +27,7 @@ declare namespace Chip {
     }
     namespace propTypes {
         const text: PropTypes.Requireable<string>;
+        const subText: PropTypes.Requireable<string>;
         const selected: PropTypes.Requireable<boolean>;
         const customIcon: PropTypes.Requireable<string>;
         const backgroundColor: PropTypes.Requireable<string>;

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

@@ -1 +1 @@
-{"version":3,"file":"index.d.ts","sourceRoot":"","sources":["../../../src/atom/chip/index.js"],"names":[],"mappings":"AAeO,qGAG0E;;AAGjF,6DAsDC"}
+{"version":3,"file":"index.d.ts","sourceRoot":"","sources":["../../../src/atom/chip/index.js"],"names":[],"mappings":"AAeO,qGAG0E;;AAGjF,6DA4DC"}

package/es/atom/chip/index.js

@@ -19,6 +19,7 @@ export const calculateHoveredSelectedBgColor = (selectedBgColor, luminosityDelta
 const Chip = (props, context) => {
   const {
     text,
+    subText,
     selected = false,
     customIcon,
     onClick,
@@ -60,7 +61,12 @@ const Chip = (props, context) => {
     style: selected ? {
       color: 'white'
     } : {}
-  }, text)), /*#__PURE__*/React.createElement(FontAwesomeIcon, {
+  }, text), subText ? /*#__PURE__*/React.createElement("span", {
+    className: style.subText,
+    style: selected ? {
+      color: 'white'
+    } : {}
+  }, subText) : null), /*#__PURE__*/React.createElement(FontAwesomeIcon, {
     className: selected ? style.selectedIconWrapper : style.unselectedIconWrapper,
     icon: customIcon ? `fa-${customIcon}` : defaultIcon,
     fontSize: ICON_SIZE
@@ -72,6 +78,7 @@ Chip.contextTypes = {
 };
 Chip.propTypes = process.env.NODE_ENV !== "production" ? {
   text: PropTypes.string,
+  subText: PropTypes.string,
   selected: PropTypes.bool,
   customIcon: PropTypes.string,
   backgroundColor: PropTypes.string,

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

@@ -1 +1 @@
-{"version":3,"file":"index.js","names":["React","useMemo","useState","useCallback","PropTypes","classnames","get","convert","FontAwesomeIcon","Provider","COLORS","style","LUMINOSITY_DELTA","cm_primary_blue","DEFAULT_BACKGROUND_COLOR","ICON_SIZE","calculateHoveredSelectedBgColor","selectedBgColor","luminosityDelta","Chip","props","context","text","selected","customIcon","onClick","backgroundColor","skin","skinColor","hoveredSelectedBgColor","isHovered","setIsHovered","handleClick","handleMouseEnter","handleMouseLeave","hoverStyle","defaultIcon","container","unselected","textZone","color","selectedIconWrapper","unselectedIconWrapper","contextTypes","childContextTypes","propTypes","string","bool","func"],"sources":["../../../src/atom/chip/index.js"],"sourcesContent":["import React, {useMemo, useState, useCallback} from 'react';\nimport PropTypes from 'prop-types';\nimport classnames from 'classnames';\n\nimport get from 'lodash/fp/get';\nimport {convert} from 'css-color-function';\nimport {FontAwesomeIcon} from '@fortawesome/react-fontawesome';\nimport Provider from '../provider';\nimport {COLORS} from '../../variables/colors';\nimport style from './style.css';\n\nconst LUMINOSITY_DELTA = 0.08;\nconst {cm_primary_blue: DEFAULT_BACKGROUND_COLOR} = COLORS;\nconst ICON_SIZE = '12px';\n\nexport const calculateHoveredSelectedBgColor = (\n  selectedBgColor,\n  luminosityDelta = LUMINOSITY_DELTA\n) => convert(`hsl(from ${selectedBgColor} h s calc(l*(1 - ${luminosityDelta})))`);\n// note: luminosity decrease is relative to the selected color\n\nconst Chip = (props, context) => {\n  const {\n    text,\n    selected = false,\n    customIcon,\n    onClick,\n    backgroundColor = DEFAULT_BACKGROUND_COLOR\n  } = props;\n  const {skin} = context;\n  const skinColor = get('common.primary', skin);\n  const selectedBgColor = backgroundColor === 'skin' && skinColor ? skinColor : backgroundColor;\n  const hoveredSelectedBgColor = calculateHoveredSelectedBgColor(selectedBgColor);\n\n  const [isHovered, setIsHovered] = useState(false);\n\n  const handleClick = useMemo(() => onClick, [onClick]);\n\n  const handleMouseEnter = useCallback(() => {\n    setIsHovered(true);\n  }, []);\n\n  const handleMouseLeave = useCallback(() => {\n    setIsHovered(false);\n  }, []);\n\n  const hoverStyle = isHovered ? {backgroundColor: hoveredSelectedBgColor} : {};\n\n  const defaultIcon = selected ? 'fa-check' : 'fa-plus';\n\n  return (\n    <div\n      className={classnames(style.container, !selected && style.unselected)}\n      style={{\n        ...(selected && selectedBgColor ? {backgroundColor: selectedBgColor} : {}),\n        ...(selected && hoverStyle)\n      }}\n      onClick={handleClick}\n      onMouseEnter={handleMouseEnter}\n      onMouseLeave={handleMouseLeave}\n      aria-label={text}\n      data-name={text}\n    >\n      <div className={style.textZone} title={text}>\n        <span className={style.text} style={selected ? {color: 'white'} : {}}>\n          {text}\n        </span>\n      </div>\n      <FontAwesomeIcon\n        className={selected ? style.selectedIconWrapper : style.unselectedIconWrapper}\n        icon={customIcon ? `fa-${customIcon}` : defaultIcon}\n        fontSize={ICON_SIZE}\n      />\n    </div>\n  );\n};\n\nChip.contextTypes = {\n  skin: Provider.childContextTypes.skin\n};\n\nChip.propTypes = {\n  text: PropTypes.string,\n  selected: PropTypes.bool,\n  customIcon: PropTypes.string,\n  backgroundColor: PropTypes.string,\n  onClick: PropTypes.func\n};\n\nexport default Chip;\n"],"mappings":"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"}
+{"version":3,"file":"index.js","names":["React","useMemo","useState","useCallback","PropTypes","classnames","get","convert","FontAwesomeIcon","Provider","COLORS","style","LUMINOSITY_DELTA","cm_primary_blue","DEFAULT_BACKGROUND_COLOR","ICON_SIZE","calculateHoveredSelectedBgColor","selectedBgColor","luminosityDelta","Chip","props","context","text","subText","selected","customIcon","onClick","backgroundColor","skin","skinColor","hoveredSelectedBgColor","isHovered","setIsHovered","handleClick","handleMouseEnter","handleMouseLeave","hoverStyle","defaultIcon","container","unselected","textZone","color","selectedIconWrapper","unselectedIconWrapper","contextTypes","childContextTypes","propTypes","string","bool","func"],"sources":["../../../src/atom/chip/index.js"],"sourcesContent":["import React, {useMemo, useState, useCallback} from 'react';\nimport PropTypes from 'prop-types';\nimport classnames from 'classnames';\n\nimport get from 'lodash/fp/get';\nimport {convert} from 'css-color-function';\nimport {FontAwesomeIcon} from '@fortawesome/react-fontawesome';\nimport Provider from '../provider';\nimport {COLORS} from '../../variables/colors';\nimport style from './style.css';\n\nconst LUMINOSITY_DELTA = 0.08;\nconst {cm_primary_blue: DEFAULT_BACKGROUND_COLOR} = COLORS;\nconst ICON_SIZE = '12px';\n\nexport const calculateHoveredSelectedBgColor = (\n  selectedBgColor,\n  luminosityDelta = LUMINOSITY_DELTA\n) => convert(`hsl(from ${selectedBgColor} h s calc(l*(1 - ${luminosityDelta})))`);\n// note: luminosity decrease is relative to the selected color\n\nconst Chip = (props, context) => {\n  const {\n    text,\n    subText,\n    selected = false,\n    customIcon,\n    onClick,\n    backgroundColor = DEFAULT_BACKGROUND_COLOR\n  } = props;\n  const {skin} = context;\n  const skinColor = get('common.primary', skin);\n  const selectedBgColor = backgroundColor === 'skin' && skinColor ? skinColor : backgroundColor;\n  const hoveredSelectedBgColor = calculateHoveredSelectedBgColor(selectedBgColor);\n\n  const [isHovered, setIsHovered] = useState(false);\n\n  const handleClick = useMemo(() => onClick, [onClick]);\n\n  const handleMouseEnter = useCallback(() => {\n    setIsHovered(true);\n  }, []);\n\n  const handleMouseLeave = useCallback(() => {\n    setIsHovered(false);\n  }, []);\n\n  const hoverStyle = isHovered ? {backgroundColor: hoveredSelectedBgColor} : {};\n\n  const defaultIcon = selected ? 'fa-check' : 'fa-plus';\n\n  return (\n    <div\n      className={classnames(style.container, !selected && style.unselected)}\n      style={{\n        ...(selected && selectedBgColor ? {backgroundColor: selectedBgColor} : {}),\n        ...(selected && hoverStyle)\n      }}\n      onClick={handleClick}\n      onMouseEnter={handleMouseEnter}\n      onMouseLeave={handleMouseLeave}\n      aria-label={text}\n      data-name={text}\n    >\n      <div className={style.textZone} title={text}>\n        <span className={style.text} style={selected ? {color: 'white'} : {}}>\n          {text}\n        </span>\n        {subText ? (\n          <span className={style.subText} style={selected ? {color: 'white'} : {}}>\n            {subText}\n          </span>\n        ) : null}\n      </div>\n      <FontAwesomeIcon\n        className={selected ? style.selectedIconWrapper : style.unselectedIconWrapper}\n        icon={customIcon ? `fa-${customIcon}` : defaultIcon}\n        fontSize={ICON_SIZE}\n      />\n    </div>\n  );\n};\n\nChip.contextTypes = {\n  skin: Provider.childContextTypes.skin\n};\n\nChip.propTypes = {\n  text: PropTypes.string,\n  subText: PropTypes.string,\n  selected: PropTypes.bool,\n  customIcon: PropTypes.string,\n  backgroundColor: PropTypes.string,\n  onClick: PropTypes.func\n};\n\nexport default Chip;\n"],"mappings":"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"}

package/es/atom/chip/style.css

@@ -8,9 +8,8 @@
 
 .container {
   width: fit-content;
-  height: 44px;
   border-radius: 10px;
-  padding: 10px 16px;
+  padding: 12px 16px;
   position: relative;
   display: flex;
   align-items: center;
@@ -38,17 +37,25 @@
   width: calc(100% - 32px);
 }
 
-.text {
+.text,
+.subText {
   font-family: 'Gilroy';
   font-style: normal;
   font-weight: 600;
   font-size: 14px;
+  line-height: 20px;
   text-overflow: ellipsis;
   white-space: nowrap;
   overflow: hidden;
   display: block;
 }
 
+.subText {
+  font-weight: 500;
+  font-size: 10px;
+  line-height: 12px;
+}
+
 .icon{
   position: absolute;
   right: 18px;

package/es/molecule/skill-picker-modal/index.d.ts

@@ -10,6 +10,9 @@ declare namespace SkillPickerModal {
         const skillsLocales: PropTypes.Requireable<{
             [x: string]: string | null | undefined;
         }>;
+        const skillsScore: PropTypes.Requireable<{
+            [x: string]: number | null | undefined;
+        }>;
         const isOpen: PropTypes.Requireable<boolean>;
         const isLoading: PropTypes.Requireable<boolean>;
         const minSelectedSkills: PropTypes.Requireable<number>;

package/es/molecule/skill-picker-modal/index.d.ts.map

@@ -1 +1 @@
-{"version":3,"file":"index.d.ts","sourceRoot":"","sources":["../../../src/molecule/skill-picker-modal/index.js"],"names":[],"mappings":";AASA,gFAgIC"}
+{"version":3,"file":"index.d.ts","sourceRoot":"","sources":["../../../src/molecule/skill-picker-modal/index.js"],"names":[],"mappings":";AAUA,gFAoKC"}

package/es/molecule/skill-picker-modal/index.js

@@ -1,9 +1,15 @@
-import React, { useMemo, useState, useCallback } from 'react';
+import _sortBy from "lodash/fp/sortBy";
+import _some from "lodash/fp/some";
+import _filter from "lodash/fp/filter";
+
+function _extends() { _extends = Object.assign ? Object.assign.bind() : function (target) { for (var i = 1; i < arguments.length; i++) { var source = arguments[i]; for (var key in source) { if (Object.prototype.hasOwnProperty.call(source, key)) { target[key] = source[key]; } } } return target; }; return _extends.apply(this, arguments); }
+
+import React, { useMemo, useState, useCallback, useEffect } from 'react';
 import PropTypes from 'prop-types';
-import filter from 'lodash/fp/filter';
 import BaseModal from '../base-modal';
 import Chip from '../../atom/chip';
 import Loader from '../../atom/loader';
+import Select from '../../atom/select';
 import Provider from '../../atom/provider';
 import style from './style.css';
 
@@ -12,6 +18,7 @@ const SkillPickerModal = (props, context) => {
     skills,
     selectedSkills,
     skillsLocales,
+    skillsScore,
     isOpen,
     isLoading,
     maxSelectedSkills = 6,
@@ -23,6 +30,8 @@ const SkillPickerModal = (props, context) => {
   const {
     translate
   } = context;
+  const [sortedSkills, setSortedSkills] = useState(_sortBy(skill => skillsLocales[skill], skills));
+  const [currentSort, setCurrentSort] = useState('alphabetical');
   const [selectedSkillList, setSelectedSkillList] = useState(selectedSkills);
   const handleCancel = useCallback(() => {
     setSelectedSkillList(selectedSkills);
@@ -32,15 +41,19 @@ const SkillPickerModal = (props, context) => {
     setSelectedSkillList(selectedSkills);
     onClose();
   }, [setSelectedSkillList, selectedSkills, onClose]);
+
+  const skillProgressAvailable = _some(skill => skillsScore[skill] > 0, skills);
+
   const skillList = useMemo(() => {
-    return skills.map(skill => {
+    return sortedSkills.map(skill => {
       return {
         skillTitle: skillsLocales[skill],
         skillRef: skill,
-        focus: selectedSkillList.includes(skill)
+        focus: selectedSkillList.includes(skill),
+        score: skillsScore[skill]
       };
     });
-  }, [skills, selectedSkillList, skillsLocales]);
+  }, [sortedSkills, selectedSkillList, skillsLocales, skillsScore]);
   const isError = useMemo(() => selectedSkillList.length > maxSelectedSkills || selectedSkillList.length < minSelectedSkills, [selectedSkillList, maxSelectedSkills, minSelectedSkills]);
   const footer = useMemo(() => {
     const footerDescription = selectedSkillList.length > maxSelectedSkills ? translate('skill_focus_footer_error_description', {
@@ -64,6 +77,19 @@ const SkillPickerModal = (props, context) => {
       }
     };
   }, [isError, handleCancel, onConfirm, translate, selectedSkillList, isLoading, maxSelectedSkills, minSelectedSkills]);
+  const sorting = useMemo(() => ({
+    theme: 'skillDetail',
+    options: ['alphabetical', 'progress'].map(value => ({
+      name: value === 'progress' ? translate('progress') : translate('alphabetical'),
+      value,
+      selected: currentSort === value
+    })),
+    onChange: value => setCurrentSort(value)
+  }), [currentSort, translate]);
+  useEffect(() => {
+    // eslint-disable-next-line lodash-fp/no-extraneous-function-wrapping
+    setSortedSkills(prev => _sortBy(skill => currentSort === 'progress' ? -skillsScore[skill] : skillsLocales[skill], prev));
+  }, [currentSort, skillsScore, skillsLocales, setSortedSkills]);
   if (!isLoading && !skills || !isOpen) return null;
   return /*#__PURE__*/React.createElement(BaseModal, {
     title: translate('skill_focus'),
@@ -83,10 +109,12 @@ const SkillPickerModal = (props, context) => {
     className: style.loader,
     theme: "coorpmanager"
   })) : /*#__PURE__*/React.createElement(React.Fragment, null, /*#__PURE__*/React.createElement("div", {
-    style: {
-      marginBottom: '16px'
-    }
-  }, `${selectedSkillList.length} ${translate('selected')}`), /*#__PURE__*/React.createElement("div", {
+    className: style.ctaWrapper
+  }, /*#__PURE__*/React.createElement("div", null, `${selectedSkillList.length} ${translate('selected')}`), skillProgressAvailable ? /*#__PURE__*/React.createElement("div", {
+    className: style.sortWrapper
+  }, translate('sort_by'), /*#__PURE__*/React.createElement(Select, _extends({}, sorting, {
+    "aria-label": "All courses sort"
+  }))) : null), /*#__PURE__*/React.createElement("div", {
     style: {
       display: 'flex',
       gap: '16px',
@@ -96,21 +124,24 @@ const SkillPickerModal = (props, context) => {
     const {
       skillTitle,
       skillRef,
-      focus
+      focus,
+      score
     } = skill;
 
     function handleChipClick() {
-      const newSelectedSkillList = focus ? filter(selectedSkill => selectedSkill !== skillRef, selectedSkillList) : [...selectedSkillList, skill.skillRef];
+      const newSelectedSkillList = focus ? _filter(selectedSkill => selectedSkill !== skillRef, selectedSkillList) : [...selectedSkillList, skill.skillRef];
       setSelectedSkillList(newSelectedSkillList);
     }
 
-    return /*#__PURE__*/React.createElement(Chip, {
+    return /*#__PURE__*/React.createElement(Chip, _extends({}, skillProgressAvailable ? {
+      subText: `${score.toFixed(1)}%`
+    } : {}, {
       text: skillTitle,
       selected: focus,
       onClick: handleChipClick,
       key: index,
       backgroundColor: "skin"
-    });
+    }));
   })))));
 };
 
@@ -121,6 +152,7 @@ SkillPickerModal.propTypes = process.env.NODE_ENV !== "production" ? {
   skills: PropTypes.arrayOf(PropTypes.string),
   selectedSkills: PropTypes.arrayOf(PropTypes.string),
   skillsLocales: PropTypes.objectOf(PropTypes.string),
+  skillsScore: PropTypes.objectOf(PropTypes.number),
   isOpen: PropTypes.bool,
   isLoading: PropTypes.bool,
   minSelectedSkills: PropTypes.number,

package/es/molecule/skill-picker-modal/index.js.map

@@ -1 +1 @@
-{"version":3,"file":"index.js","names":["React","useMemo","useState","useCallback","PropTypes","filter","BaseModal","Chip","Loader","Provider","style","SkillPickerModal","props","context","skills","selectedSkills","skillsLocales","isOpen","isLoading","maxSelectedSkills","minSelectedSkills","onCancel","onConfirm","onClose","translate","selectedSkillList","setSelectedSkillList","handleCancel","handleClose","skillList","map","skill","skillTitle","skillRef","focus","includes","isError","length","footer","footerDescription","skillNumber","text","cancelButton","label","disabled","confirmButton","iconName","name","backgroundColor","skillPickerContainer","loaderContainer","loader","marginBottom","display","gap","flexWrap","index","handleChipClick","newSelectedSkillList","selectedSkill","contextTypes","childContextTypes","propTypes","arrayOf","string","objectOf","bool","number","func"],"sources":["../../../src/molecule/skill-picker-modal/index.js"],"sourcesContent":["import React, {useMemo, useState, useCallback} from 'react';\nimport PropTypes from 'prop-types';\nimport filter from 'lodash/fp/filter';\nimport BaseModal from '../base-modal';\nimport Chip from '../../atom/chip';\nimport Loader from '../../atom/loader';\nimport Provider from '../../atom/provider';\nimport style from './style.css';\n\nconst SkillPickerModal = (props, context) => {\n  const {\n    skills,\n    selectedSkills,\n    skillsLocales,\n    isOpen,\n    isLoading,\n    maxSelectedSkills = 6,\n    minSelectedSkills = 3,\n    onCancel,\n    onConfirm,\n    onClose\n  } = props;\n  const {translate} = context;\n\n  const [selectedSkillList, setSelectedSkillList] = useState(selectedSkills);\n\n  const handleCancel = useCallback(() => {\n    setSelectedSkillList(selectedSkills);\n    onCancel();\n  }, [setSelectedSkillList, selectedSkills, onCancel]);\n\n  const handleClose = useCallback(() => {\n    setSelectedSkillList(selectedSkills);\n    onClose();\n  }, [setSelectedSkillList, selectedSkills, onClose]);\n\n  const skillList = useMemo(() => {\n    return skills.map(skill => {\n      return {\n        skillTitle: skillsLocales[skill],\n        skillRef: skill,\n        focus: selectedSkillList.includes(skill)\n      };\n    });\n  }, [skills, selectedSkillList, skillsLocales]);\n\n  const isError = useMemo(\n    () =>\n      selectedSkillList.length > maxSelectedSkills || selectedSkillList.length < minSelectedSkills,\n    [selectedSkillList, maxSelectedSkills, minSelectedSkills]\n  );\n\n  const footer = useMemo(() => {\n    const footerDescription =\n      selectedSkillList.length > maxSelectedSkills\n        ? translate('skill_focus_footer_error_description', {\n            skillNumber: selectedSkillList.length - maxSelectedSkills\n          })\n        : translate('skill_focus_footer_description', {\n            skillNumber: minSelectedSkills - selectedSkillList.length\n          });\n    return {\n      text: isLoading || !isError ? '' : footerDescription,\n      isError,\n      cancelButton: {\n        onCancel: handleCancel,\n        label: translate('cancel'),\n        disabled: isLoading || isError\n      },\n      confirmButton: {\n        onConfirm: () => onConfirm(selectedSkillList),\n        label: translate('confirm'),\n        iconName: 'circle-check',\n        disabled: isLoading || isError\n      }\n    };\n  }, [\n    isError,\n    handleCancel,\n    onConfirm,\n    translate,\n    selectedSkillList,\n    isLoading,\n    maxSelectedSkills,\n    minSelectedSkills\n  ]);\n\n  if ((!isLoading && !skills) || !isOpen) return null;\n\n  return (\n    <BaseModal\n      title={translate('skill_focus')}\n      description={translate('skill_focus_description')}\n      isOpen={isOpen}\n      onClose={handleClose}\n      footer={footer}\n      headerIcon={{\n        name: 'bullseye-arrow',\n        backgroundColor: '#DDD1FF'\n      }}\n    >\n      <div className={style.skillPickerContainer}>\n        {isLoading ? (\n          <div className={style.loaderContainer}>\n            <Loader className={style.loader} theme=\"coorpmanager\" />\n          </div>\n        ) : (\n          <>\n            <div style={{marginBottom: '16px'}}>\n              {`${selectedSkillList.length} ${translate('selected')}`}\n            </div>\n            <div style={{display: 'flex', gap: '16px', flexWrap: 'wrap'}}>\n              {skillList.map((skill, index) => {\n                const {skillTitle, skillRef, focus} = skill;\n                function handleChipClick() {\n                  const newSelectedSkillList = focus\n                    ? filter(selectedSkill => selectedSkill !== skillRef, selectedSkillList)\n                    : [...selectedSkillList, skill.skillRef];\n                  setSelectedSkillList(newSelectedSkillList);\n                }\n\n                return (\n                  <Chip\n                    text={skillTitle}\n                    selected={focus}\n                    onClick={handleChipClick}\n                    key={index}\n                    backgroundColor=\"skin\"\n                  />\n                );\n              })}\n            </div>\n          </>\n        )}\n      </div>\n    </BaseModal>\n  );\n};\n\nSkillPickerModal.contextTypes = {\n  translate: Provider.childContextTypes.translate\n};\n\nSkillPickerModal.propTypes = {\n  skills: PropTypes.arrayOf(PropTypes.string),\n  selectedSkills: PropTypes.arrayOf(PropTypes.string),\n  skillsLocales: PropTypes.objectOf(PropTypes.string),\n  isOpen: PropTypes.bool,\n  isLoading: PropTypes.bool,\n  minSelectedSkills: PropTypes.number,\n  maxSelectedSkills: PropTypes.number,\n  onCancel: PropTypes.func,\n  onConfirm: PropTypes.func,\n  onClose: PropTypes.func\n};\n\nexport default SkillPickerModal;\n"],"mappings":"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"}
+{"version":3,"file":"index.js","names":["React","useMemo","useState","useCallback","useEffect","PropTypes","BaseModal","Chip","Loader","Select","Provider","style","SkillPickerModal","props","context","skills","selectedSkills","skillsLocales","skillsScore","isOpen","isLoading","maxSelectedSkills","minSelectedSkills","onCancel","onConfirm","onClose","translate","sortedSkills","setSortedSkills","skill","currentSort","setCurrentSort","selectedSkillList","setSelectedSkillList","handleCancel","handleClose","skillProgressAvailable","skillList","map","skillTitle","skillRef","focus","includes","score","isError","length","footer","footerDescription","skillNumber","text","cancelButton","label","disabled","confirmButton","iconName","sorting","theme","options","value","name","selected","onChange","prev","backgroundColor","skillPickerContainer","loaderContainer","loader","ctaWrapper","sortWrapper","display","gap","flexWrap","index","handleChipClick","newSelectedSkillList","selectedSkill","subText","toFixed","contextTypes","childContextTypes","propTypes","arrayOf","string","objectOf","number","bool","func"],"sources":["../../../src/molecule/skill-picker-modal/index.js"],"sourcesContent":["import React, {useMemo, useState, useCallback, useEffect} from 'react';\nimport PropTypes from 'prop-types';\nimport {filter, some, sortBy} from 'lodash/fp';\nimport BaseModal from '../base-modal';\nimport Chip from '../../atom/chip';\nimport Loader from '../../atom/loader';\nimport Select from '../../atom/select';\nimport Provider from '../../atom/provider';\nimport style from './style.css';\n\nconst SkillPickerModal = (props, context) => {\n  const {\n    skills,\n    selectedSkills,\n    skillsLocales,\n    skillsScore,\n    isOpen,\n    isLoading,\n    maxSelectedSkills = 6,\n    minSelectedSkills = 3,\n    onCancel,\n    onConfirm,\n    onClose\n  } = props;\n  const {translate} = context;\n\n  const [sortedSkills, setSortedSkills] = useState(sortBy(skill => skillsLocales[skill], skills));\n  const [currentSort, setCurrentSort] = useState('alphabetical');\n  const [selectedSkillList, setSelectedSkillList] = useState(selectedSkills);\n\n  const handleCancel = useCallback(() => {\n    setSelectedSkillList(selectedSkills);\n    onCancel();\n  }, [setSelectedSkillList, selectedSkills, onCancel]);\n\n  const handleClose = useCallback(() => {\n    setSelectedSkillList(selectedSkills);\n    onClose();\n  }, [setSelectedSkillList, selectedSkills, onClose]);\n\n  const skillProgressAvailable = some(skill => skillsScore[skill] > 0, skills);\n\n  const skillList = useMemo(() => {\n    return sortedSkills.map(skill => {\n      return {\n        skillTitle: skillsLocales[skill],\n        skillRef: skill,\n        focus: selectedSkillList.includes(skill),\n        score: skillsScore[skill]\n      };\n    });\n  }, [sortedSkills, selectedSkillList, skillsLocales, skillsScore]);\n\n  const isError = useMemo(\n    () =>\n      selectedSkillList.length > maxSelectedSkills || selectedSkillList.length < minSelectedSkills,\n    [selectedSkillList, maxSelectedSkills, minSelectedSkills]\n  );\n\n  const footer = useMemo(() => {\n    const footerDescription =\n      selectedSkillList.length > maxSelectedSkills\n        ? translate('skill_focus_footer_error_description', {\n            skillNumber: selectedSkillList.length - maxSelectedSkills\n          })\n        : translate('skill_focus_footer_description', {\n            skillNumber: minSelectedSkills - selectedSkillList.length\n          });\n    return {\n      text: isLoading || !isError ? '' : footerDescription,\n      isError,\n      cancelButton: {\n        onCancel: handleCancel,\n        label: translate('cancel'),\n        disabled: isLoading || isError\n      },\n      confirmButton: {\n        onConfirm: () => onConfirm(selectedSkillList),\n        label: translate('confirm'),\n        iconName: 'circle-check',\n        disabled: isLoading || isError\n      }\n    };\n  }, [\n    isError,\n    handleCancel,\n    onConfirm,\n    translate,\n    selectedSkillList,\n    isLoading,\n    maxSelectedSkills,\n    minSelectedSkills\n  ]);\n\n  const sorting = useMemo(\n    () => ({\n      theme: 'skillDetail',\n      options: ['alphabetical', 'progress'].map(value => ({\n        name: value === 'progress' ? translate('progress') : translate('alphabetical'),\n        value,\n        selected: currentSort === value\n      })),\n      onChange: value => setCurrentSort(value)\n    }),\n    [currentSort, translate]\n  );\n\n  useEffect(() => {\n    // eslint-disable-next-line lodash-fp/no-extraneous-function-wrapping\n    setSortedSkills(prev =>\n      sortBy(\n        skill => (currentSort === 'progress' ? -skillsScore[skill] : skillsLocales[skill]),\n        prev\n      )\n    );\n  }, [currentSort, skillsScore, skillsLocales, setSortedSkills]);\n\n  if ((!isLoading && !skills) || !isOpen) return null;\n\n  return (\n    <BaseModal\n      title={translate('skill_focus')}\n      description={translate('skill_focus_description')}\n      isOpen={isOpen}\n      onClose={handleClose}\n      footer={footer}\n      headerIcon={{\n        name: 'bullseye-arrow',\n        backgroundColor: '#DDD1FF'\n      }}\n    >\n      <div className={style.skillPickerContainer}>\n        {isLoading ? (\n          <div className={style.loaderContainer}>\n            <Loader className={style.loader} theme=\"coorpmanager\" />\n          </div>\n        ) : (\n          <>\n            <div className={style.ctaWrapper}>\n              <div>{`${selectedSkillList.length} ${translate('selected')}`}</div>\n              {skillProgressAvailable ? (\n                <div className={style.sortWrapper}>\n                  {translate('sort_by')}\n                  <Select {...sorting} aria-label=\"All courses sort\" />\n                </div>\n              ) : null}\n            </div>\n            <div style={{display: 'flex', gap: '16px', flexWrap: 'wrap'}}>\n              {skillList.map((skill, index) => {\n                const {skillTitle, skillRef, focus, score} = skill;\n                function handleChipClick() {\n                  const newSelectedSkillList = focus\n                    ? filter(selectedSkill => selectedSkill !== skillRef, selectedSkillList)\n                    : [...selectedSkillList, skill.skillRef];\n                  setSelectedSkillList(newSelectedSkillList);\n                }\n\n                return (\n                  <Chip\n                    {...(skillProgressAvailable ? {subText: `${score.toFixed(1)}%`} : {})}\n                    text={skillTitle}\n                    selected={focus}\n                    onClick={handleChipClick}\n                    key={index}\n                    backgroundColor=\"skin\"\n                  />\n                );\n              })}\n            </div>\n          </>\n        )}\n      </div>\n    </BaseModal>\n  );\n};\n\nSkillPickerModal.contextTypes = {\n  translate: Provider.childContextTypes.translate\n};\n\nSkillPickerModal.propTypes = {\n  skills: PropTypes.arrayOf(PropTypes.string),\n  selectedSkills: PropTypes.arrayOf(PropTypes.string),\n  skillsLocales: PropTypes.objectOf(PropTypes.string),\n  skillsScore: PropTypes.objectOf(PropTypes.number),\n  isOpen: PropTypes.bool,\n  isLoading: PropTypes.bool,\n  minSelectedSkills: PropTypes.number,\n  maxSelectedSkills: PropTypes.number,\n  onCancel: PropTypes.func,\n  onConfirm: PropTypes.func,\n  onClose: PropTypes.func\n};\n\nexport default SkillPickerModal;\n"],"mappings":";;;;;;AAAA,OAAOA,KAAP,IAAeC,OAAf,EAAwBC,QAAxB,EAAkCC,WAAlC,EAA+CC,SAA/C,QAA+D,OAA/D;AACA,OAAOC,SAAP,MAAsB,YAAtB;AAEA,OAAOC,SAAP,MAAsB,eAAtB;AACA,OAAOC,IAAP,MAAiB,iBAAjB;AACA,OAAOC,MAAP,MAAmB,mBAAnB;AACA,OAAOC,MAAP,MAAmB,mBAAnB;AACA,OAAOC,QAAP,MAAqB,qBAArB;AACA,OAAOC,KAAP,MAAkB,aAAlB;;AAEA,MAAMC,gBAAgB,GAAG,CAACC,KAAD,EAAQC,OAAR,KAAoB;EAC3C,MAAM;IACJC,MADI;IAEJC,cAFI;IAGJC,aAHI;IAIJC,WAJI;IAKJC,MALI;IAMJC,SANI;IAOJC,iBAAiB,GAAG,CAPhB;IAQJC,iBAAiB,GAAG,CARhB;IASJC,QATI;IAUJC,SAVI;IAWJC;EAXI,IAYFZ,KAZJ;EAaA,MAAM;IAACa;EAAD,IAAcZ,OAApB;EAEA,MAAM,CAACa,YAAD,EAAeC,eAAf,IAAkC1B,QAAQ,CAAC,QAAO2B,KAAK,IAAIZ,aAAa,CAACY,KAAD,CAA7B,EAAsCd,MAAtC,CAAD,CAAhD;EACA,MAAM,CAACe,WAAD,EAAcC,cAAd,IAAgC7B,QAAQ,CAAC,cAAD,CAA9C;EACA,MAAM,CAAC8B,iBAAD,EAAoBC,oBAApB,IAA4C/B,QAAQ,CAACc,cAAD,CAA1D;EAEA,MAAMkB,YAAY,GAAG/B,WAAW,CAAC,MAAM;IACrC8B,oBAAoB,CAACjB,cAAD,CAApB;IACAO,QAAQ;EACT,CAH+B,EAG7B,CAACU,oBAAD,EAAuBjB,cAAvB,EAAuCO,QAAvC,CAH6B,CAAhC;EAKA,MAAMY,WAAW,GAAGhC,WAAW,CAAC,MAAM;IACpC8B,oBAAoB,CAACjB,cAAD,CAApB;IACAS,OAAO;EACR,CAH8B,EAG5B,CAACQ,oBAAD,EAAuBjB,cAAvB,EAAuCS,OAAvC,CAH4B,CAA/B;;EAKA,MAAMW,sBAAsB,GAAG,MAAKP,KAAK,IAAIX,WAAW,CAACW,KAAD,CAAX,GAAqB,CAAnC,EAAsCd,MAAtC,CAA/B;;EAEA,MAAMsB,SAAS,GAAGpC,OAAO,CAAC,MAAM;IAC9B,OAAO0B,YAAY,CAACW,GAAb,CAAiBT,KAAK,IAAI;MAC/B,OAAO;QACLU,UAAU,EAAEtB,aAAa,CAACY,KAAD,CADpB;QAELW,QAAQ,EAAEX,KAFL;QAGLY,KAAK,EAAET,iBAAiB,CAACU,QAAlB,CAA2Bb,KAA3B,CAHF;QAILc,KAAK,EAAEzB,WAAW,CAACW,KAAD;MAJb,CAAP;IAMD,CAPM,CAAP;EAQD,CATwB,EAStB,CAACF,YAAD,EAAeK,iBAAf,EAAkCf,aAAlC,EAAiDC,WAAjD,CATsB,CAAzB;EAWA,MAAM0B,OAAO,GAAG3C,OAAO,CACrB,MACE+B,iBAAiB,CAACa,MAAlB,GAA2BxB,iBAA3B,IAAgDW,iBAAiB,CAACa,MAAlB,GAA2BvB,iBAFxD,EAGrB,CAACU,iBAAD,EAAoBX,iBAApB,EAAuCC,iBAAvC,CAHqB,CAAvB;EAMA,MAAMwB,MAAM,GAAG7C,OAAO,CAAC,MAAM;IAC3B,MAAM8C,iBAAiB,GACrBf,iBAAiB,CAACa,MAAlB,GAA2BxB,iBAA3B,GACIK,SAAS,CAAC,sCAAD,EAAyC;MAChDsB,WAAW,EAAEhB,iBAAiB,CAACa,MAAlB,GAA2BxB;IADQ,CAAzC,CADb,GAIIK,SAAS,CAAC,gCAAD,EAAmC;MAC1CsB,WAAW,EAAE1B,iBAAiB,GAAGU,iBAAiB,CAACa;IADT,CAAnC,CALf;IAQA,OAAO;MACLI,IAAI,EAAE7B,SAAS,IAAI,CAACwB,OAAd,GAAwB,EAAxB,GAA6BG,iBAD9B;MAELH,OAFK;MAGLM,YAAY,EAAE;QACZ3B,QAAQ,EAAEW,YADE;QAEZiB,KAAK,EAAEzB,SAAS,CAAC,QAAD,CAFJ;QAGZ0B,QAAQ,EAAEhC,SAAS,IAAIwB;MAHX,CAHT;MAQLS,aAAa,EAAE;QACb7B,SAAS,EAAE,MAAMA,SAAS,CAACQ,iBAAD,CADb;QAEbmB,KAAK,EAAEzB,SAAS,CAAC,SAAD,CAFH;QAGb4B,QAAQ,EAAE,cAHG;QAIbF,QAAQ,EAAEhC,SAAS,IAAIwB;MAJV;IARV,CAAP;EAeD,CAxBqB,EAwBnB,CACDA,OADC,EAEDV,YAFC,EAGDV,SAHC,EAIDE,SAJC,EAKDM,iBALC,EAMDZ,SANC,EAODC,iBAPC,EAQDC,iBARC,CAxBmB,CAAtB;EAmCA,MAAMiC,OAAO,GAAGtD,OAAO,CACrB,OAAO;IACLuD,KAAK,EAAE,aADF;IAELC,OAAO,EAAE,CAAC,cAAD,EAAiB,UAAjB,EAA6BnB,GAA7B,CAAiCoB,KAAK,KAAK;MAClDC,IAAI,EAAED,KAAK,KAAK,UAAV,GAAuBhC,SAAS,CAAC,UAAD,CAAhC,GAA+CA,SAAS,CAAC,cAAD,CADZ;MAElDgC,KAFkD;MAGlDE,QAAQ,EAAE9B,WAAW,KAAK4B;IAHwB,CAAL,CAAtC,CAFJ;IAOLG,QAAQ,EAAEH,KAAK,IAAI3B,cAAc,CAAC2B,KAAD;EAP5B,CAAP,CADqB,EAUrB,CAAC5B,WAAD,EAAcJ,SAAd,CAVqB,CAAvB;EAaAtB,SAAS,CAAC,MAAM;IACd;IACAwB,eAAe,CAACkC,IAAI,IAClB,QACEjC,KAAK,IAAKC,WAAW,KAAK,UAAhB,GAA6B,CAACZ,WAAW,CAACW,KAAD,CAAzC,GAAmDZ,aAAa,CAACY,KAAD,CAD5E,EAEEiC,IAFF,CADa,CAAf;EAMD,CARQ,EAQN,CAAChC,WAAD,EAAcZ,WAAd,EAA2BD,aAA3B,EAA0CW,eAA1C,CARM,CAAT;EAUA,IAAK,CAACR,SAAD,IAAc,CAACL,MAAhB,IAA2B,CAACI,MAAhC,EAAwC,OAAO,IAAP;EAExC,oBACE,oBAAC,SAAD;IACE,KAAK,EAAEO,SAAS,CAAC,aAAD,CADlB;IAEE,WAAW,EAAEA,SAAS,CAAC,yBAAD,CAFxB;IAGE,MAAM,EAAEP,MAHV;IAIE,OAAO,EAAEgB,WAJX;IAKE,MAAM,EAAEW,MALV;IAME,UAAU,EAAE;MACVa,IAAI,EAAE,gBADI;MAEVI,eAAe,EAAE;IAFP;EANd,gBAWE;IAAK,SAAS,EAAEpD,KAAK,CAACqD;EAAtB,GACG5C,SAAS,gBACR;IAAK,SAAS,EAAET,KAAK,CAACsD;EAAtB,gBACE,oBAAC,MAAD;IAAQ,SAAS,EAAEtD,KAAK,CAACuD,MAAzB;IAAiC,KAAK,EAAC;EAAvC,EADF,CADQ,gBAKR,uDACE;IAAK,SAAS,EAAEvD,KAAK,CAACwD;EAAtB,gBACE,iCAAO,GAAEnC,iBAAiB,CAACa,MAAO,IAAGnB,SAAS,CAAC,UAAD,CAAa,EAA3D,CADF,EAEGU,sBAAsB,gBACrB;IAAK,SAAS,EAAEzB,KAAK,CAACyD;EAAtB,GACG1C,SAAS,CAAC,SAAD,CADZ,eAEE,oBAAC,MAAD,eAAY6B,OAAZ;IAAqB,cAAW;EAAhC,GAFF,CADqB,GAKnB,IAPN,CADF,eAUE;IAAK,KAAK,EAAE;MAACc,OAAO,EAAE,MAAV;MAAkBC,GAAG,EAAE,MAAvB;MAA+BC,QAAQ,EAAE;IAAzC;EAAZ,GACGlC,SAAS,CAACC,GAAV,CAAc,CAACT,KAAD,EAAQ2C,KAAR,KAAkB;IAC/B,MAAM;MAACjC,UAAD;MAAaC,QAAb;MAAuBC,KAAvB;MAA8BE;IAA9B,IAAuCd,KAA7C;;IACA,SAAS4C,eAAT,GAA2B;MACzB,MAAMC,oBAAoB,GAAGjC,KAAK,GAC9B,QAAOkC,aAAa,IAAIA,aAAa,KAAKnC,QAA1C,EAAoDR,iBAApD,CAD8B,GAE9B,CAAC,GAAGA,iBAAJ,EAAuBH,KAAK,CAACW,QAA7B,CAFJ;MAGAP,oBAAoB,CAACyC,oBAAD,CAApB;IACD;;IAED,oBACE,oBAAC,IAAD,eACOtC,sBAAsB,GAAG;MAACwC,OAAO,EAAG,GAAEjC,KAAK,CAACkC,OAAN,CAAc,CAAd,CAAiB;IAA9B,CAAH,GAAuC,EADpE;MAEE,IAAI,EAAEtC,UAFR;MAGE,QAAQ,EAAEE,KAHZ;MAIE,OAAO,EAAEgC,eAJX;MAKE,GAAG,EAAED,KALP;MAME,eAAe,EAAC;IANlB,GADF;EAUD,CAnBA,CADH,CAVF,CANJ,CAXF,CADF;AAuDD,CApKD;;AAsKA5D,gBAAgB,CAACkE,YAAjB,GAAgC;EAC9BpD,SAAS,EAAEhB,QAAQ,CAACqE,iBAAT,CAA2BrD;AADR,CAAhC;AAIAd,gBAAgB,CAACoE,SAAjB,2CAA6B;EAC3BjE,MAAM,EAAEV,SAAS,CAAC4E,OAAV,CAAkB5E,SAAS,CAAC6E,MAA5B,CADmB;EAE3BlE,cAAc,EAAEX,SAAS,CAAC4E,OAAV,CAAkB5E,SAAS,CAAC6E,MAA5B,CAFW;EAG3BjE,aAAa,EAAEZ,SAAS,CAAC8E,QAAV,CAAmB9E,SAAS,CAAC6E,MAA7B,CAHY;EAI3BhE,WAAW,EAAEb,SAAS,CAAC8E,QAAV,CAAmB9E,SAAS,CAAC+E,MAA7B,CAJc;EAK3BjE,MAAM,EAAEd,SAAS,CAACgF,IALS;EAM3BjE,SAAS,EAAEf,SAAS,CAACgF,IANM;EAO3B/D,iBAAiB,EAAEjB,SAAS,CAAC+E,MAPF;EAQ3B/D,iBAAiB,EAAEhB,SAAS,CAAC+E,MARF;EAS3B7D,QAAQ,EAAElB,SAAS,CAACiF,IATO;EAU3B9D,SAAS,EAAEnB,SAAS,CAACiF,IAVM;EAW3B7D,OAAO,EAAEpB,SAAS,CAACiF;AAXQ,CAA7B;AAcA,eAAe1E,gBAAf"}

package/es/molecule/skill-picker-modal/style.css

@@ -21,6 +21,20 @@
   height: 40px;
 }
 
+.ctaWrapper {
+  display: flex;
+  justify-content: space-between;
+  align-items: center;
+  margin-bottom: 16px;
+}
+
+.sortWrapper {
+  display: flex;
+  align-items: center;
+  gap: 12px;
+  color: cm_grey_500;
+}
+
 @media mobile {
   .skillPickerContainer {
     width: 100%;

package/es/template/my-learning/index.d.ts.map

@@ -1 +1 @@
-{"version":3,"file":"index.d.ts","sourceRoot":"","sources":["../../../src/template/my-learning/index.js"],"names":[],"mappings":";AAgHA,mEAwZC"}
+{"version":3,"file":"index.d.ts","sourceRoot":"","sources":["../../../src/template/my-learning/index.js"],"names":[],"mappings":";AAgHA,mEAkaC"}

package/es/template/my-learning/index.js

@@ -193,6 +193,7 @@ const MyLearning = (props, context) => {
       backgroundColor: '#FFDCD1'
     }
   }];
+  const skillsScore = useMemo(() => _pipe(_map(skill => [skill, _getOr(0, [skill, 'stats', 'score'], skillsInformation)]), _fromPairs)(skills), [skills, skillsInformation]);
   const handleOnDotClick = useCallback(skillRef => {
     setSkillFocusSelectedOnChart(skillRef);
   }, [setSkillFocusSelectedOnChart]);
@@ -237,6 +238,7 @@ const MyLearning = (props, context) => {
     className: style.container
   }, /*#__PURE__*/React.createElement(SkillPickerModal, {
     skills: skills,
+    skillsScore: skillsScore,
     selectedSkills: selectedSkillsList,
     skillsLocales: skillsLocales,
     isOpen: open,

package/es/template/my-learning/index.js.map

@@ -1 +1 @@
-{"version":3,"file":"index.js","names":["React","useCallback","useState","useMemo","PropTypes","convert","Provider","Icon","Picture","ButtonLink","ToolTip","ReviewNoSkills","SearchForm","SkillPickerModal","ResponsiveLearningProfileRadarChart","SkillsChartSideInformationPanel","LearnerSkillCard","searchValueIncluded","formatMinutes","CardsList","Title","style","ChangeSkillFocusButton","props","context","onClick","skin","translate","primarySkinColor","backgroundColor","color","transition","position","faIcon","name","size","contextTypes","childContextTypes","propTypes","func","FilterButton","active","filter","skillTotal","Content","skillFilterNumber","skillFilterNumberInActive","buttonProps","customStyle","width","content","bool","string","number","MyLearning","skills","selectedSkills","skillsInformation","skillsLocales","learnerFeature","isLoading","onSkillFocusConfirm","onReviewSkill","onExploreSkill","learningPriorities","open","setOpen","selectedSkillsList","setSelectedSkillsList","skillFocusSelectedOnChart","setSkillFocusSelectedOnChart","undefined","searchValue","setSearchValue","searchResults","setSearchResults","skillRef","activeFilter","setActiveFilter","skillsReviewReady","skill","availableForReview","graphDatas","toFixed","graphLegends","filters","all","review","sumKpi","kpi","skillFocusSelectedOnChartScore","stats","coursedCompletedData","questionsToReviewData","learningTimeData","skillChartPaneLegends","focusedSkill","skillChartPanelProps","title","value","legend","icon","iconName","handleOnDotClick","handleOpenSkillPicker","handleCloseSkillPicker","handleConfirmSkillPicker","focusSkillList","handleSearch","handleSearchReset","ReviewTooltipContent","backgroundContainer","cards","cardsListContainer","type","subtitle","iconColor","borderRadius","tag","label","container","skillFocusContainer","skillFocusHeader","skillFocusHeaderWrapper","skillFocusHeaderIcon","faSize","wrapperSize","skillFocusHeaderContent","skillFocusHeaderTitle","skillFocusHeaderDescription","length","skillFocusContent","radarContainer","gradient","fill","stroke","percentage","background","skillFocusEmpty","img","skillFocusEmptyTitle","skillFocusEmptyDescription","skillListHeader","skillListHeaderIcon","skillListHeaderContent","skillListHeaderTitle","skillListHeaderDescription","infoIconTooltip","tooltip","toolBarContainer","skillFilterContainer","map","index","handleFilterClick","searchWrapper","placeholder","onChange","emptySearchResultContainer","emptySearchResultTitle","emptySearchResultDescription","emptySearchResultClearSearch","skillListContainer","skillListEmptyContainer","defaultStats","score","contentCompleted","questionsToReview","handleReviewSkill","handleExploreSkill","includes","arrayOf","objectOf","shape","learningTime"],"sources":["../../../src/template/my-learning/index.js"],"sourcesContent":["import React, {useCallback, useState, useMemo} from 'react';\nimport PropTypes from 'prop-types';\nimport {convert} from 'css-color-function';\nimport {get, keys, map, fromPairs, pipe, sumBy, getOr, sortBy, size, isEmpty} from 'lodash/fp';\nimport Provider from '../../atom/provider';\nimport Icon from '../../atom/icon';\nimport Picture from '../../atom/picture';\nimport ButtonLink from '../../atom/button-link';\nimport ToolTip from '../../atom/tooltip';\nimport ReviewNoSkills from '../../organism/review-no-skills';\nimport SearchForm from '../../molecule/search-form';\nimport SkillPickerModal from '../../molecule/skill-picker-modal';\nimport ResponsiveLearningProfileRadarChart from '../../molecule/learning-profile-radar-chart';\nimport SkillsChartSideInformationPanel from '../../molecule/skills-chart-side-information-panel';\nimport LearnerSkillCard from '../../molecule/learner-skill-card';\nimport searchValueIncluded from '../../util/search-value-included';\nimport {formatMinutes} from '../../util/time-format';\nimport CardsList from '../../molecule/dashboard/cards-list';\nimport Title from '../../atom/title';\nimport style from './style.css';\n\nconst ChangeSkillFocusButton = (props, context) => {\n  const {onClick} = props;\n  const {skin, translate} = context;\n  const primarySkinColor = get('common.primary', skin);\n\n  return (\n    <div data-name=\"button-explore-wrapper\">\n      <ButtonLink\n        customStyle={{\n          backgroundColor: convert(`color(${primarySkinColor} a(0.07))`),\n          color: primarySkinColor,\n          transition: 'background-color 0.15s ease-in-out, color 0.15s ease-in-out'\n        }}\n        hoverBackgroundColor={primarySkinColor}\n        hoverColor=\"#FFFFFF\"\n        onClick={onClick}\n        label={translate('skills_change_focus')}\n        data-name=\"change-skill-focus-button\"\n        icon={{\n          position: 'left',\n          faIcon: {\n            name: 'arrows-rotate',\n            backgroundColor: convert(`color(${primarySkinColor} a(0.07))`),\n            color: primarySkinColor,\n            size: 16\n          }\n        }}\n      />\n    </div>\n  );\n};\n\nChangeSkillFocusButton.contextTypes = {\n  skin: Provider.childContextTypes.skin,\n  translate: Provider.childContextTypes.translate\n};\n\nChangeSkillFocusButton.propTypes = {\n  onClick: PropTypes.func\n};\n\nconst FilterButton = (props, context) => {\n  const {active, filter, skillTotal, onClick} = props;\n  const {skin} = context;\n  const primarySkinColor = get('common.primary', skin);\n\n  const Content = useCallback(\n    () => (\n      <div>\n        {filter}\n        <span\n          className={active ? style.skillFilterNumber : style.skillFilterNumberInActive}\n          style={{\n            backgroundColor: active ? convert(`color(${primarySkinColor} a(0.07))`) : '#EAEAEB',\n            color: active ? primarySkinColor : '#515161'\n          }}\n        >\n          {skillTotal}\n        </span>\n      </div>\n    ),\n    [filter, skillTotal, active, primarySkinColor]\n  );\n\n  const buttonProps = {\n    customStyle: {\n      backgroundColor: active ? convert(`color(${primarySkinColor} a(0.07))`) : '#FFFFFF',\n      color: active ? primarySkinColor : '#9999A8',\n      transition: 'background-color 0.15s ease-in-out, color 0.15s ease-in-out',\n      width: 'fit-content'\n    },\n    onClick,\n    content: <Content />,\n    'data-name': 'change-skill-focus-button'\n  };\n\n  return <ButtonLink {...buttonProps} />;\n};\n\nFilterButton.contextTypes = {\n  skin: Provider.childContextTypes.skin,\n  translate: Provider.childContextTypes.translate\n};\n\nFilterButton.propTypes = {\n  active: PropTypes.bool,\n  filter: PropTypes.string,\n  skillTotal: PropTypes.number,\n  onClick: PropTypes.func\n};\n\nconst MyLearning = (props, context) => {\n  const {\n    skills,\n    selectedSkills = [],\n    skillsInformation,\n    skillsLocales,\n    learnerFeature = true,\n    isLoading,\n    onSkillFocusConfirm,\n    onReviewSkill,\n    onExploreSkill,\n    learningPriorities\n  } = props;\n  const {skin, translate} = context;\n  const primarySkinColor = get('common.primary', skin);\n  const [open, setOpen] = useState(false);\n  const [selectedSkillsList, setSelectedSkillsList] = useState(selectedSkills);\n  const [skillFocusSelectedOnChart, setSkillFocusSelectedOnChart] = useState(undefined);\n  const [searchValue, setSearchValue] = useState('');\n  const [searchResults, setSearchResults] = useState(\n    sortBy(skillRef => -getOr(0, [skillRef, 'stats', 'score'], skillsInformation), skills)\n  );\n  const [activeFilter, setActiveFilter] = useState('all');\n\n  const skillsReviewReady = useMemo(() => {\n    return searchResults.filter(skill =>\n      skillsInformation[skill] ? skillsInformation[skill].availableForReview : false\n    );\n  }, [searchResults, skillsInformation]);\n\n  const graphDatas = useMemo(\n    () =>\n      pipe(\n        map(skill => [skill, getOr(0, [skill, 'stats', 'score'], skillsInformation).toFixed(1)]),\n        fromPairs\n      )(selectedSkillsList),\n    [selectedSkillsList, skillsInformation]\n  );\n\n  const graphLegends = useMemo(\n    () =>\n      pipe(\n        map(skill => [skill, skillsLocales[skill]]),\n        fromPairs\n      )(selectedSkillsList),\n    [selectedSkillsList, skillsLocales]\n  );\n\n  const filters = useMemo(() => {\n    return {\n      all: searchResults,\n      review: skillsReviewReady\n    };\n  }, [searchResults, skillsReviewReady]);\n\n  const sumKpi = useCallback(\n    kpi => {\n      const skillFocusSelectedOnChartScore = getOr(\n        0,\n        [skillFocusSelectedOnChart, 'stats', `${kpi}`],\n        skillsInformation\n      );\n      return skillFocusSelectedOnChart\n        ? skillFocusSelectedOnChartScore\n        : sumBy(\n            skill => (skillsInformation[skill] ? skillsInformation[skill].stats[kpi] : 0),\n            selectedSkillsList\n          );\n    },\n    [skillFocusSelectedOnChart, skillsInformation, selectedSkillsList]\n  );\n\n  const coursedCompletedData = useMemo(() => sumKpi('contentCompleted'), [sumKpi]);\n\n  const questionsToReviewData = useMemo(() => sumKpi('questionsToReview'), [sumKpi]);\n\n  const learningTimeData = useMemo(() => sumKpi('learningTime'), [sumKpi]);\n\n  const skillChartPaneLegends = useMemo(\n    () =>\n      translate('skill_scope_specifier', {\n        focusedSkill: skillFocusSelectedOnChart\n          ? skillsLocales[skillFocusSelectedOnChart]\n          : translate('focused_skills')\n      }),\n    [translate, skillsLocales, skillFocusSelectedOnChart]\n  );\n  const skillChartPanelProps = [\n    {\n      title: translate('skill_chart_side_panel_content_completed'),\n      value: `${coursedCompletedData}`,\n      legend: skillChartPaneLegends,\n      icon: {iconName: 'book-open-cover', backgroundColor: '#D9F4F7'}\n    },\n    {\n      title: translate('skill_chart_side_panel_learning_hours'),\n      value: formatMinutes(learningTimeData),\n      legend: skillChartPaneLegends,\n      icon: {iconName: 'clock', backgroundColor: '#FAD6DE'}\n    },\n    {\n      title: translate('skill_chart_side_panel_questions_to_review'),\n      value: `${questionsToReviewData}`,\n      legend: skillChartPaneLegends,\n      icon: {iconName: 'circle-question', backgroundColor: '#FFDCD1'}\n    }\n  ];\n\n  const handleOnDotClick = useCallback(\n    skillRef => {\n      setSkillFocusSelectedOnChart(skillRef);\n    },\n    [setSkillFocusSelectedOnChart]\n  );\n  const handleOpenSkillPicker = useCallback(() => setOpen(true), [setOpen]);\n  const handleCloseSkillPicker = useCallback(() => setOpen(false), [setOpen]);\n  const handleConfirmSkillPicker = useCallback(\n    focusSkillList => {\n      setSelectedSkillsList(focusSkillList);\n      onSkillFocusConfirm(focusSkillList);\n      setOpen(false);\n    },\n    [onSkillFocusConfirm, setSelectedSkillsList, setOpen]\n  );\n  const handleSearch = useCallback(\n    value => {\n      setSearchValue(value);\n      setSearchResults(skills.filter(skill => searchValueIncluded(skillsLocales[skill], value)));\n    },\n    [skills, skillsLocales, setSearchValue, setSearchResults]\n  );\n  const handleSearchReset = useCallback(() => {\n    setSearchValue('');\n    setSearchResults(skills);\n  }, [skills, setSearchValue, setSearchResults]);\n\n  const ReviewTooltipContent = useCallback(\n    () => (\n      <div>\n        <div>\n          <b>{translate('review_mode_tooltip_header')}</b>\n        </div>\n        <p>{translate('review_mode_tooltip_content')}</p>\n        <ol>\n          <li>{translate('review_mode_tooltip_content_part1')}</li>\n          <li>{translate('review_mode_tooltip_content_part2')}</li>\n          <li>{translate('review_mode_tooltip_content_part3')}</li>\n          <li>{translate('review_mode_tooltip_content_part4')}</li>\n        </ol>\n      </div>\n    ),\n    [translate]\n  );\n\n  return (\n    <div className={style.backgroundContainer}>\n      {isEmpty(learningPriorities?.cards) ? null : (\n        <div className={style.cardsListContainer}>\n          <CardsList\n            {...learningPriorities}\n            title={\n              <Title\n                {...{\n                  type: 'form-group',\n                  title: translate('learning_priorities'),\n                  subtitle: translate('learning_priorities_description'),\n                  icon: {\n                    iconName: 'sign-post',\n                    iconColor: '#A32700',\n                    borderRadius: '12px',\n                    backgroundColor: '#FFDCD1'\n                  },\n                  tag: {\n                    label: `${size(learningPriorities.cards)}`,\n                    type: 'default',\n                    size: 'S'\n                  }\n                }}\n              />\n            }\n          />\n        </div>\n      )}\n      <div className={style.container}>\n        <SkillPickerModal\n          skills={skills}\n          selectedSkills={selectedSkillsList}\n          skillsLocales={skillsLocales}\n          isOpen={open}\n          isLoading={isLoading}\n          onCancel={handleCloseSkillPicker}\n          onConfirm={handleConfirmSkillPicker}\n          onClose={handleCloseSkillPicker}\n        />\n        {learnerFeature ? (\n          <div data-name=\"skill-focus-container\" className={style.skillFocusContainer}>\n            <header className={style.skillFocusHeader}>\n              <div className={style.skillFocusHeaderWrapper}>\n                <div className={style.skillFocusHeaderIcon}>\n                  <Icon\n                    iconName=\"bullseye-arrow\"\n                    backgroundColor=\"#DDD1FF\"\n                    borderRadius=\"12px\"\n                    size={{faSize: 20, wrapperSize: 48}}\n                  />\n                </div>\n                <div className={style.skillFocusHeaderContent}>\n                  <div data-name=\"skill-focus-title\" className={style.skillFocusHeaderTitle}>\n                    {translate('skills_focus')}\n                  </div>\n                  <div\n                    data-name=\"skill-focus-description\"\n                    className={style.skillFocusHeaderDescription}\n                  >\n                    {translate('skills_focus_description')}\n                  </div>\n                </div>\n              </div>\n              {selectedSkillsList.length >= 3 ? (\n                <ChangeSkillFocusButton onClick={handleOpenSkillPicker} />\n              ) : null}\n            </header>\n            {selectedSkillsList.length >= 3 ? (\n              <div className={style.skillFocusContent}>\n                <div className={style.radarContainer}>\n                  <ResponsiveLearningProfileRadarChart\n                    totalDataset={1}\n                    height={424}\n                    width={680}\n                    data={graphDatas}\n                    legend={graphLegends}\n                    onClick={handleOnDotClick}\n                    onExploreClick={onExploreSkill}\n                    colors={[\n                      {\n                        gradient: {\n                          fill: ['#0062ffff', '#8000ff85'],\n                          stroke: ['#0062ffff', '#8000FF']\n                        },\n                        percentage: {\n                          color: primarySkinColor,\n                          background: convert(`color(${primarySkinColor} a(0.07))`)\n                        },\n                        label: {\n                          color: '#020202ff'\n                        }\n                      }\n                    ]}\n                  />\n                </div>\n                <SkillsChartSideInformationPanel sidePanelItems={skillChartPanelProps} />\n              </div>\n            ) : (\n              <div className={style.skillFocusEmpty}>\n                <Picture\n                  className={style.img}\n                  src=\"https://static.coorpacademy.com/assets/images/mylearning-no-skill-selected-placeholder.svg\"\n                  alt=\"demo\"\n                />\n                <div className={style.skillFocusEmptyTitle}>\n                  {translate('skills_focus_empty_title')}\n                </div>\n                <div className={style.skillFocusEmptyDescription}>\n                  {translate('skills_focus_empty_description')}\n                </div>\n                <div>\n                  <ButtonLink\n                    label={translate('skills_choose_focus')}\n                    type=\"primary\"\n                    customStyle={{\n                      width: 'fit-contain',\n                      backgroundColor: primarySkinColor\n                    }}\n                    hoverBackgroundColor={convert(\n                      `hsl(from ${primarySkinColor} h s calc(l*(1 - 0.08)))`\n                    )}\n                    onClick={handleOpenSkillPicker}\n                  />\n                </div>\n              </div>\n            )}\n          </div>\n        ) : null}\n        <header className={style.skillListHeader}>\n          <div className={style.skillListHeaderIcon}>\n            <Icon\n              iconName=\"dumbbell\"\n              backgroundColor=\"#FFF9D1\"\n              size={{faSize: 20, wrapperSize: 48}}\n            />\n          </div>\n          <div className={style.skillListHeaderContent}>\n            <div className={style.skillListHeaderTitle}>{translate('skills_section_title')}</div>\n            <div className={style.skillListHeaderDescription}>\n              {translate('skills_section_description')}\n              <ToolTip\n                fontSize={12}\n                iconContainerClassName={style.infoIconTooltip}\n                tooltipClassName={style.tooltip}\n                TooltipContent={ReviewTooltipContent}\n                closeToolTipInformationTextAriaLabel={translate('close_tooltip_information')}\n              />\n            </div>\n          </div>\n        </header>\n        <div className={style.toolBarContainer}>\n          <div className={style.skillFilterContainer}>\n            {keys(filters).map((filter, index) => {\n              function handleFilterClick() {\n                setActiveFilter(filter);\n              }\n\n              return (\n                <div key={index}>\n                  <FilterButton\n                    active={activeFilter === filter}\n                    filter={\n                      filter === 'all' ? translate('all') : translate('review_mode_available')\n                    }\n                    skillTotal={filters[filter].length}\n                    onClick={handleFilterClick}\n                  />\n                </div>\n              );\n            })}\n          </div>\n          <div className={style.searchWrapper}>\n            <SearchForm\n              search={{\n                placeholder: translate('search_place_holder'),\n                value: searchValue,\n                onChange: handleSearch\n              }}\n              onReset={handleSearchReset}\n            />\n          </div>\n        </div>\n        {searchValue && searchResults.length === 0 ? (\n          <div className={style.emptySearchResultContainer}>\n            <div className={style.emptySearchResultTitle}>\n              {translate('empty_search_result_title', {searchValue})}\n            </div>\n            <div className={style.emptySearchResultDescription}>\n              {translate('empty_search_result_description')}\n            </div>\n            <div className={style.emptySearchResultClearSearch} onClick={handleSearchReset}>\n              {translate('empty_search_result_clear_search')}\n            </div>\n          </div>\n        ) : (\n          <div className={style.skillListContainer}>\n            {activeFilter === 'review_mode_available' && filters[activeFilter].length === 0 ? (\n              <div className={style.skillListEmptyContainer}>\n                <ReviewNoSkills\n                  titleNoSkills={translate('review_skill_empty')}\n                  textNoSkills={translate('review_skill_empty_description')}\n                  iconSkillAriaLabel={translate('review_skill_empty')}\n                  imagePosition=\"top\"\n                />\n              </div>\n            ) : (\n              filters[activeFilter].map((skill, index) => {\n                const defaultStats = {\n                  score: 0,\n                  content: 0,\n                  contentCompleted: 0,\n                  questionsToReview: 0\n                };\n\n                function handleReviewSkill() {\n                  onReviewSkill(skill);\n                }\n                function handleExploreSkill() {\n                  onExploreSkill(skill);\n                }\n                const {score, content, questionsToReview, contentCompleted} = skillsInformation[\n                  skill\n                ]\n                  ? skillsInformation[skill].stats\n                  : defaultStats;\n                return (\n                  <div key={index}>\n                    <LearnerSkillCard\n                      skillTitle={skillsLocales[skill]}\n                      focus={selectedSkills.includes(skill)}\n                      metrics={{\n                        score: score.toFixed(1),\n                        content,\n                        questionsToReview,\n                        contentCompleted\n                      }}\n                      review={\n                        skillsInformation[skill]\n                          ? skillsInformation[skill].availableForReview\n                          : false\n                      }\n                      onReviewClick={handleReviewSkill}\n                      onExploreClick={handleExploreSkill}\n                    />\n                  </div>\n                );\n              })\n            )}\n          </div>\n        )}\n      </div>\n    </div>\n  );\n};\n\nMyLearning.contextTypes = {\n  skin: Provider.childContextTypes.skin,\n  translate: Provider.childContextTypes.translate\n};\n\nMyLearning.propTypes = {\n  skills: PropTypes.arrayOf(PropTypes.string),\n  selectedSkills: PropTypes.arrayOf(PropTypes.string),\n  skillsInformation: PropTypes.objectOf(\n    PropTypes.shape({\n      availableForReview: PropTypes.bool,\n      stats: PropTypes.shape({\n        score: PropTypes.number,\n        content: PropTypes.number,\n        contentCompleted: PropTypes.number,\n        questionsToReview: PropTypes.number,\n        learningTime: PropTypes.number\n      })\n    })\n  ),\n  skillsLocales: PropTypes.objectOf(PropTypes.string),\n  learnerFeature: PropTypes.bool,\n  isLoading: PropTypes.bool,\n  onSkillFocusConfirm: PropTypes.func,\n  onReviewSkill: PropTypes.func,\n  onExploreSkill: PropTypes.func,\n  learningPriorities: PropTypes.shape(CardsList.propTypes)\n};\n\nexport default MyLearning;\n"],"mappings":"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"}
+{"version":3,"file":"index.js","names":["React","useCallback","useState","useMemo","PropTypes","convert","Provider","Icon","Picture","ButtonLink","ToolTip","ReviewNoSkills","SearchForm","SkillPickerModal","ResponsiveLearningProfileRadarChart","SkillsChartSideInformationPanel","LearnerSkillCard","searchValueIncluded","formatMinutes","CardsList","Title","style","ChangeSkillFocusButton","props","context","onClick","skin","translate","primarySkinColor","backgroundColor","color","transition","position","faIcon","name","size","contextTypes","childContextTypes","propTypes","func","FilterButton","active","filter","skillTotal","Content","skillFilterNumber","skillFilterNumberInActive","buttonProps","customStyle","width","content","bool","string","number","MyLearning","skills","selectedSkills","skillsInformation","skillsLocales","learnerFeature","isLoading","onSkillFocusConfirm","onReviewSkill","onExploreSkill","learningPriorities","open","setOpen","selectedSkillsList","setSelectedSkillsList","skillFocusSelectedOnChart","setSkillFocusSelectedOnChart","undefined","searchValue","setSearchValue","searchResults","setSearchResults","skillRef","activeFilter","setActiveFilter","skillsReviewReady","skill","availableForReview","graphDatas","toFixed","graphLegends","filters","all","review","sumKpi","kpi","skillFocusSelectedOnChartScore","stats","coursedCompletedData","questionsToReviewData","learningTimeData","skillChartPaneLegends","focusedSkill","skillChartPanelProps","title","value","legend","icon","iconName","skillsScore","handleOnDotClick","handleOpenSkillPicker","handleCloseSkillPicker","handleConfirmSkillPicker","focusSkillList","handleSearch","handleSearchReset","ReviewTooltipContent","backgroundContainer","cards","cardsListContainer","type","subtitle","iconColor","borderRadius","tag","label","container","skillFocusContainer","skillFocusHeader","skillFocusHeaderWrapper","skillFocusHeaderIcon","faSize","wrapperSize","skillFocusHeaderContent","skillFocusHeaderTitle","skillFocusHeaderDescription","length","skillFocusContent","radarContainer","gradient","fill","stroke","percentage","background","skillFocusEmpty","img","skillFocusEmptyTitle","skillFocusEmptyDescription","skillListHeader","skillListHeaderIcon","skillListHeaderContent","skillListHeaderTitle","skillListHeaderDescription","infoIconTooltip","tooltip","toolBarContainer","skillFilterContainer","map","index","handleFilterClick","searchWrapper","placeholder","onChange","emptySearchResultContainer","emptySearchResultTitle","emptySearchResultDescription","emptySearchResultClearSearch","skillListContainer","skillListEmptyContainer","defaultStats","score","contentCompleted","questionsToReview","handleReviewSkill","handleExploreSkill","includes","arrayOf","objectOf","shape","learningTime"],"sources":["../../../src/template/my-learning/index.js"],"sourcesContent":["import React, {useCallback, useState, useMemo} from 'react';\nimport PropTypes from 'prop-types';\nimport {convert} from 'css-color-function';\nimport {get, keys, map, fromPairs, pipe, sumBy, getOr, sortBy, size, isEmpty} from 'lodash/fp';\nimport Provider from '../../atom/provider';\nimport Icon from '../../atom/icon';\nimport Picture from '../../atom/picture';\nimport ButtonLink from '../../atom/button-link';\nimport ToolTip from '../../atom/tooltip';\nimport ReviewNoSkills from '../../organism/review-no-skills';\nimport SearchForm from '../../molecule/search-form';\nimport SkillPickerModal from '../../molecule/skill-picker-modal';\nimport ResponsiveLearningProfileRadarChart from '../../molecule/learning-profile-radar-chart';\nimport SkillsChartSideInformationPanel from '../../molecule/skills-chart-side-information-panel';\nimport LearnerSkillCard from '../../molecule/learner-skill-card';\nimport searchValueIncluded from '../../util/search-value-included';\nimport {formatMinutes} from '../../util/time-format';\nimport CardsList from '../../molecule/dashboard/cards-list';\nimport Title from '../../atom/title';\nimport style from './style.css';\n\nconst ChangeSkillFocusButton = (props, context) => {\n  const {onClick} = props;\n  const {skin, translate} = context;\n  const primarySkinColor = get('common.primary', skin);\n\n  return (\n    <div data-name=\"button-explore-wrapper\">\n      <ButtonLink\n        customStyle={{\n          backgroundColor: convert(`color(${primarySkinColor} a(0.07))`),\n          color: primarySkinColor,\n          transition: 'background-color 0.15s ease-in-out, color 0.15s ease-in-out'\n        }}\n        hoverBackgroundColor={primarySkinColor}\n        hoverColor=\"#FFFFFF\"\n        onClick={onClick}\n        label={translate('skills_change_focus')}\n        data-name=\"change-skill-focus-button\"\n        icon={{\n          position: 'left',\n          faIcon: {\n            name: 'arrows-rotate',\n            backgroundColor: convert(`color(${primarySkinColor} a(0.07))`),\n            color: primarySkinColor,\n            size: 16\n          }\n        }}\n      />\n    </div>\n  );\n};\n\nChangeSkillFocusButton.contextTypes = {\n  skin: Provider.childContextTypes.skin,\n  translate: Provider.childContextTypes.translate\n};\n\nChangeSkillFocusButton.propTypes = {\n  onClick: PropTypes.func\n};\n\nconst FilterButton = (props, context) => {\n  const {active, filter, skillTotal, onClick} = props;\n  const {skin} = context;\n  const primarySkinColor = get('common.primary', skin);\n\n  const Content = useCallback(\n    () => (\n      <div>\n        {filter}\n        <span\n          className={active ? style.skillFilterNumber : style.skillFilterNumberInActive}\n          style={{\n            backgroundColor: active ? convert(`color(${primarySkinColor} a(0.07))`) : '#EAEAEB',\n            color: active ? primarySkinColor : '#515161'\n          }}\n        >\n          {skillTotal}\n        </span>\n      </div>\n    ),\n    [filter, skillTotal, active, primarySkinColor]\n  );\n\n  const buttonProps = {\n    customStyle: {\n      backgroundColor: active ? convert(`color(${primarySkinColor} a(0.07))`) : '#FFFFFF',\n      color: active ? primarySkinColor : '#9999A8',\n      transition: 'background-color 0.15s ease-in-out, color 0.15s ease-in-out',\n      width: 'fit-content'\n    },\n    onClick,\n    content: <Content />,\n    'data-name': 'change-skill-focus-button'\n  };\n\n  return <ButtonLink {...buttonProps} />;\n};\n\nFilterButton.contextTypes = {\n  skin: Provider.childContextTypes.skin,\n  translate: Provider.childContextTypes.translate\n};\n\nFilterButton.propTypes = {\n  active: PropTypes.bool,\n  filter: PropTypes.string,\n  skillTotal: PropTypes.number,\n  onClick: PropTypes.func\n};\n\nconst MyLearning = (props, context) => {\n  const {\n    skills,\n    selectedSkills = [],\n    skillsInformation,\n    skillsLocales,\n    learnerFeature = true,\n    isLoading,\n    onSkillFocusConfirm,\n    onReviewSkill,\n    onExploreSkill,\n    learningPriorities\n  } = props;\n  const {skin, translate} = context;\n  const primarySkinColor = get('common.primary', skin);\n  const [open, setOpen] = useState(false);\n  const [selectedSkillsList, setSelectedSkillsList] = useState(selectedSkills);\n  const [skillFocusSelectedOnChart, setSkillFocusSelectedOnChart] = useState(undefined);\n  const [searchValue, setSearchValue] = useState('');\n  const [searchResults, setSearchResults] = useState(\n    sortBy(skillRef => -getOr(0, [skillRef, 'stats', 'score'], skillsInformation), skills)\n  );\n  const [activeFilter, setActiveFilter] = useState('all');\n\n  const skillsReviewReady = useMemo(() => {\n    return searchResults.filter(skill =>\n      skillsInformation[skill] ? skillsInformation[skill].availableForReview : false\n    );\n  }, [searchResults, skillsInformation]);\n\n  const graphDatas = useMemo(\n    () =>\n      pipe(\n        map(skill => [skill, getOr(0, [skill, 'stats', 'score'], skillsInformation).toFixed(1)]),\n        fromPairs\n      )(selectedSkillsList),\n    [selectedSkillsList, skillsInformation]\n  );\n\n  const graphLegends = useMemo(\n    () =>\n      pipe(\n        map(skill => [skill, skillsLocales[skill]]),\n        fromPairs\n      )(selectedSkillsList),\n    [selectedSkillsList, skillsLocales]\n  );\n\n  const filters = useMemo(() => {\n    return {\n      all: searchResults,\n      review: skillsReviewReady\n    };\n  }, [searchResults, skillsReviewReady]);\n\n  const sumKpi = useCallback(\n    kpi => {\n      const skillFocusSelectedOnChartScore = getOr(\n        0,\n        [skillFocusSelectedOnChart, 'stats', `${kpi}`],\n        skillsInformation\n      );\n      return skillFocusSelectedOnChart\n        ? skillFocusSelectedOnChartScore\n        : sumBy(\n            skill => (skillsInformation[skill] ? skillsInformation[skill].stats[kpi] : 0),\n            selectedSkillsList\n          );\n    },\n    [skillFocusSelectedOnChart, skillsInformation, selectedSkillsList]\n  );\n\n  const coursedCompletedData = useMemo(() => sumKpi('contentCompleted'), [sumKpi]);\n\n  const questionsToReviewData = useMemo(() => sumKpi('questionsToReview'), [sumKpi]);\n\n  const learningTimeData = useMemo(() => sumKpi('learningTime'), [sumKpi]);\n\n  const skillChartPaneLegends = useMemo(\n    () =>\n      translate('skill_scope_specifier', {\n        focusedSkill: skillFocusSelectedOnChart\n          ? skillsLocales[skillFocusSelectedOnChart]\n          : translate('focused_skills')\n      }),\n    [translate, skillsLocales, skillFocusSelectedOnChart]\n  );\n  const skillChartPanelProps = [\n    {\n      title: translate('skill_chart_side_panel_content_completed'),\n      value: `${coursedCompletedData}`,\n      legend: skillChartPaneLegends,\n      icon: {iconName: 'book-open-cover', backgroundColor: '#D9F4F7'}\n    },\n    {\n      title: translate('skill_chart_side_panel_learning_hours'),\n      value: formatMinutes(learningTimeData),\n      legend: skillChartPaneLegends,\n      icon: {iconName: 'clock', backgroundColor: '#FAD6DE'}\n    },\n    {\n      title: translate('skill_chart_side_panel_questions_to_review'),\n      value: `${questionsToReviewData}`,\n      legend: skillChartPaneLegends,\n      icon: {iconName: 'circle-question', backgroundColor: '#FFDCD1'}\n    }\n  ];\n\n  const skillsScore = useMemo(\n    () =>\n      pipe(\n        map(skill => [skill, getOr(0, [skill, 'stats', 'score'], skillsInformation)]),\n        fromPairs\n      )(skills),\n    [skills, skillsInformation]\n  );\n\n  const handleOnDotClick = useCallback(\n    skillRef => {\n      setSkillFocusSelectedOnChart(skillRef);\n    },\n    [setSkillFocusSelectedOnChart]\n  );\n  const handleOpenSkillPicker = useCallback(() => setOpen(true), [setOpen]);\n  const handleCloseSkillPicker = useCallback(() => setOpen(false), [setOpen]);\n  const handleConfirmSkillPicker = useCallback(\n    focusSkillList => {\n      setSelectedSkillsList(focusSkillList);\n      onSkillFocusConfirm(focusSkillList);\n      setOpen(false);\n    },\n    [onSkillFocusConfirm, setSelectedSkillsList, setOpen]\n  );\n  const handleSearch = useCallback(\n    value => {\n      setSearchValue(value);\n      setSearchResults(skills.filter(skill => searchValueIncluded(skillsLocales[skill], value)));\n    },\n    [skills, skillsLocales, setSearchValue, setSearchResults]\n  );\n  const handleSearchReset = useCallback(() => {\n    setSearchValue('');\n    setSearchResults(skills);\n  }, [skills, setSearchValue, setSearchResults]);\n\n  const ReviewTooltipContent = useCallback(\n    () => (\n      <div>\n        <div>\n          <b>{translate('review_mode_tooltip_header')}</b>\n        </div>\n        <p>{translate('review_mode_tooltip_content')}</p>\n        <ol>\n          <li>{translate('review_mode_tooltip_content_part1')}</li>\n          <li>{translate('review_mode_tooltip_content_part2')}</li>\n          <li>{translate('review_mode_tooltip_content_part3')}</li>\n          <li>{translate('review_mode_tooltip_content_part4')}</li>\n        </ol>\n      </div>\n    ),\n    [translate]\n  );\n\n  return (\n    <div className={style.backgroundContainer}>\n      {isEmpty(learningPriorities?.cards) ? null : (\n        <div className={style.cardsListContainer}>\n          <CardsList\n            {...learningPriorities}\n            title={\n              <Title\n                {...{\n                  type: 'form-group',\n                  title: translate('learning_priorities'),\n                  subtitle: translate('learning_priorities_description'),\n                  icon: {\n                    iconName: 'sign-post',\n                    iconColor: '#A32700',\n                    borderRadius: '12px',\n                    backgroundColor: '#FFDCD1'\n                  },\n                  tag: {\n                    label: `${size(learningPriorities.cards)}`,\n                    type: 'default',\n                    size: 'S'\n                  }\n                }}\n              />\n            }\n          />\n        </div>\n      )}\n      <div className={style.container}>\n        <SkillPickerModal\n          skills={skills}\n          skillsScore={skillsScore}\n          selectedSkills={selectedSkillsList}\n          skillsLocales={skillsLocales}\n          isOpen={open}\n          isLoading={isLoading}\n          onCancel={handleCloseSkillPicker}\n          onConfirm={handleConfirmSkillPicker}\n          onClose={handleCloseSkillPicker}\n        />\n        {learnerFeature ? (\n          <div data-name=\"skill-focus-container\" className={style.skillFocusContainer}>\n            <header className={style.skillFocusHeader}>\n              <div className={style.skillFocusHeaderWrapper}>\n                <div className={style.skillFocusHeaderIcon}>\n                  <Icon\n                    iconName=\"bullseye-arrow\"\n                    backgroundColor=\"#DDD1FF\"\n                    borderRadius=\"12px\"\n                    size={{faSize: 20, wrapperSize: 48}}\n                  />\n                </div>\n                <div className={style.skillFocusHeaderContent}>\n                  <div data-name=\"skill-focus-title\" className={style.skillFocusHeaderTitle}>\n                    {translate('skills_focus')}\n                  </div>\n                  <div\n                    data-name=\"skill-focus-description\"\n                    className={style.skillFocusHeaderDescription}\n                  >\n                    {translate('skills_focus_description')}\n                  </div>\n                </div>\n              </div>\n              {selectedSkillsList.length >= 3 ? (\n                <ChangeSkillFocusButton onClick={handleOpenSkillPicker} />\n              ) : null}\n            </header>\n            {selectedSkillsList.length >= 3 ? (\n              <div className={style.skillFocusContent}>\n                <div className={style.radarContainer}>\n                  <ResponsiveLearningProfileRadarChart\n                    totalDataset={1}\n                    height={424}\n                    width={680}\n                    data={graphDatas}\n                    legend={graphLegends}\n                    onClick={handleOnDotClick}\n                    onExploreClick={onExploreSkill}\n                    colors={[\n                      {\n                        gradient: {\n                          fill: ['#0062ffff', '#8000ff85'],\n                          stroke: ['#0062ffff', '#8000FF']\n                        },\n                        percentage: {\n                          color: primarySkinColor,\n                          background: convert(`color(${primarySkinColor} a(0.07))`)\n                        },\n                        label: {\n                          color: '#020202ff'\n                        }\n                      }\n                    ]}\n                  />\n                </div>\n                <SkillsChartSideInformationPanel sidePanelItems={skillChartPanelProps} />\n              </div>\n            ) : (\n              <div className={style.skillFocusEmpty}>\n                <Picture\n                  className={style.img}\n                  src=\"https://static.coorpacademy.com/assets/images/mylearning-no-skill-selected-placeholder.svg\"\n                  alt=\"demo\"\n                />\n                <div className={style.skillFocusEmptyTitle}>\n                  {translate('skills_focus_empty_title')}\n                </div>\n                <div className={style.skillFocusEmptyDescription}>\n                  {translate('skills_focus_empty_description')}\n                </div>\n                <div>\n                  <ButtonLink\n                    label={translate('skills_choose_focus')}\n                    type=\"primary\"\n                    customStyle={{\n                      width: 'fit-contain',\n                      backgroundColor: primarySkinColor\n                    }}\n                    hoverBackgroundColor={convert(\n                      `hsl(from ${primarySkinColor} h s calc(l*(1 - 0.08)))`\n                    )}\n                    onClick={handleOpenSkillPicker}\n                  />\n                </div>\n              </div>\n            )}\n          </div>\n        ) : null}\n        <header className={style.skillListHeader}>\n          <div className={style.skillListHeaderIcon}>\n            <Icon\n              iconName=\"dumbbell\"\n              backgroundColor=\"#FFF9D1\"\n              size={{faSize: 20, wrapperSize: 48}}\n            />\n          </div>\n          <div className={style.skillListHeaderContent}>\n            <div className={style.skillListHeaderTitle}>{translate('skills_section_title')}</div>\n            <div className={style.skillListHeaderDescription}>\n              {translate('skills_section_description')}\n              <ToolTip\n                fontSize={12}\n                iconContainerClassName={style.infoIconTooltip}\n                tooltipClassName={style.tooltip}\n                TooltipContent={ReviewTooltipContent}\n                closeToolTipInformationTextAriaLabel={translate('close_tooltip_information')}\n              />\n            </div>\n          </div>\n        </header>\n        <div className={style.toolBarContainer}>\n          <div className={style.skillFilterContainer}>\n            {keys(filters).map((filter, index) => {\n              function handleFilterClick() {\n                setActiveFilter(filter);\n              }\n\n              return (\n                <div key={index}>\n                  <FilterButton\n                    active={activeFilter === filter}\n                    filter={\n                      filter === 'all' ? translate('all') : translate('review_mode_available')\n                    }\n                    skillTotal={filters[filter].length}\n                    onClick={handleFilterClick}\n                  />\n                </div>\n              );\n            })}\n          </div>\n          <div className={style.searchWrapper}>\n            <SearchForm\n              search={{\n                placeholder: translate('search_place_holder'),\n                value: searchValue,\n                onChange: handleSearch\n              }}\n              onReset={handleSearchReset}\n            />\n          </div>\n        </div>\n        {searchValue && searchResults.length === 0 ? (\n          <div className={style.emptySearchResultContainer}>\n            <div className={style.emptySearchResultTitle}>\n              {translate('empty_search_result_title', {searchValue})}\n            </div>\n            <div className={style.emptySearchResultDescription}>\n              {translate('empty_search_result_description')}\n            </div>\n            <div className={style.emptySearchResultClearSearch} onClick={handleSearchReset}>\n              {translate('empty_search_result_clear_search')}\n            </div>\n          </div>\n        ) : (\n          <div className={style.skillListContainer}>\n            {activeFilter === 'review_mode_available' && filters[activeFilter].length === 0 ? (\n              <div className={style.skillListEmptyContainer}>\n                <ReviewNoSkills\n                  titleNoSkills={translate('review_skill_empty')}\n                  textNoSkills={translate('review_skill_empty_description')}\n                  iconSkillAriaLabel={translate('review_skill_empty')}\n                  imagePosition=\"top\"\n                />\n              </div>\n            ) : (\n              filters[activeFilter].map((skill, index) => {\n                const defaultStats = {\n                  score: 0,\n                  content: 0,\n                  contentCompleted: 0,\n                  questionsToReview: 0\n                };\n\n                function handleReviewSkill() {\n                  onReviewSkill(skill);\n                }\n                function handleExploreSkill() {\n                  onExploreSkill(skill);\n                }\n                const {score, content, questionsToReview, contentCompleted} = skillsInformation[\n                  skill\n                ]\n                  ? skillsInformation[skill].stats\n                  : defaultStats;\n                return (\n                  <div key={index}>\n                    <LearnerSkillCard\n                      skillTitle={skillsLocales[skill]}\n                      focus={selectedSkills.includes(skill)}\n                      metrics={{\n                        score: score.toFixed(1),\n                        content,\n                        questionsToReview,\n                        contentCompleted\n                      }}\n                      review={\n                        skillsInformation[skill]\n                          ? skillsInformation[skill].availableForReview\n                          : false\n                      }\n                      onReviewClick={handleReviewSkill}\n                      onExploreClick={handleExploreSkill}\n                    />\n                  </div>\n                );\n              })\n            )}\n          </div>\n        )}\n      </div>\n    </div>\n  );\n};\n\nMyLearning.contextTypes = {\n  skin: Provider.childContextTypes.skin,\n  translate: Provider.childContextTypes.translate\n};\n\nMyLearning.propTypes = {\n  skills: PropTypes.arrayOf(PropTypes.string),\n  selectedSkills: PropTypes.arrayOf(PropTypes.string),\n  skillsInformation: PropTypes.objectOf(\n    PropTypes.shape({\n      availableForReview: PropTypes.bool,\n      stats: PropTypes.shape({\n        score: PropTypes.number,\n        content: PropTypes.number,\n        contentCompleted: PropTypes.number,\n        questionsToReview: PropTypes.number,\n        learningTime: PropTypes.number\n      })\n    })\n  ),\n  skillsLocales: PropTypes.objectOf(PropTypes.string),\n  learnerFeature: PropTypes.bool,\n  isLoading: PropTypes.bool,\n  onSkillFocusConfirm: PropTypes.func,\n  onReviewSkill: PropTypes.func,\n  onExploreSkill: PropTypes.func,\n  learningPriorities: PropTypes.shape(CardsList.propTypes)\n};\n\nexport default MyLearning;\n"],"mappings":"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"}

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

@@ -27,6 +27,7 @@ declare namespace Chip {
     }
     namespace propTypes {
         const text: PropTypes.Requireable<string>;
+        const subText: PropTypes.Requireable<string>;
         const selected: PropTypes.Requireable<boolean>;
         const customIcon: PropTypes.Requireable<string>;
         const backgroundColor: PropTypes.Requireable<string>;

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

@@ -1 +1 @@
-{"version":3,"file":"index.d.ts","sourceRoot":"","sources":["../../../src/atom/chip/index.js"],"names":[],"mappings":"AAeO,qGAG0E;;AAGjF,6DAsDC"}
+{"version":3,"file":"index.d.ts","sourceRoot":"","sources":["../../../src/atom/chip/index.js"],"names":[],"mappings":"AAeO,qGAG0E;;AAGjF,6DA4DC"}

package/lib/atom/chip/index.js

@@ -43,6 +43,7 @@ exports.calculateHoveredSelectedBgColor = calculateHoveredSelectedBgColor;
 const Chip = (props, context) => {
   const {
     text,
+    subText,
     selected = false,
     customIcon,
     onClick,
@@ -84,7 +85,12 @@ const Chip = (props, context) => {
     style: selected ? {
       color: 'white'
     } : {}
-  }, text)), /*#__PURE__*/_react.default.createElement(_reactFontawesome.FontAwesomeIcon, {
+  }, text), subText ? /*#__PURE__*/_react.default.createElement("span", {
+    className: _style.default.subText,
+    style: selected ? {
+      color: 'white'
+    } : {}
+  }, subText) : null), /*#__PURE__*/_react.default.createElement(_reactFontawesome.FontAwesomeIcon, {
     className: selected ? _style.default.selectedIconWrapper : _style.default.unselectedIconWrapper,
     icon: customIcon ? `fa-${customIcon}` : defaultIcon,
     fontSize: ICON_SIZE
@@ -96,6 +102,7 @@ Chip.contextTypes = {
 };
 Chip.propTypes = process.env.NODE_ENV !== "production" ? {
   text: _propTypes.default.string,
+  subText: _propTypes.default.string,
   selected: _propTypes.default.bool,
   customIcon: _propTypes.default.string,
   backgroundColor: _propTypes.default.string,