npm - @coorpacademy/components - Versions diffs - 11.32.2 → 11.32.4 - Mend

@coorpacademy/components 11.32.2 → 11.32.4

This diff represents the content of publicly available package versions that have been released to one of the supported registries. The information contained in this diff is provided for informational purposes only and reflects changes between package versions as they appear in their respective public registries.

Files changed (46) hide show

package/es/template/my-learning/index.d.ts CHANGED Viewed

@@ -2,6 +2,27 @@ export default MyLearning;
 declare function MyLearning(props: any, context: any): JSX.Element;
 declare namespace MyLearning {
     namespace contextTypes {
+        const skin: PropTypes.Requireable<PropTypes.InferProps<{
+            common: PropTypes.Requireable<{
+                [x: string]: any;
+            }>;
+            images: PropTypes.Requireable<PropTypes.InferProps<{
+                'logo-mobile': PropTypes.Requireable<any>;
+                logo: PropTypes.Requireable<any>;
+                'logo-email': PropTypes.Requireable<any>;
+                login: PropTypes.Requireable<any>;
+            }>>;
+            icons: PropTypes.Requireable<{
+                [x: string]: any;
+            }>;
+            mod: PropTypes.Requireable<{
+                [x: string]: any;
+            }>;
+            courses: PropTypes.Requireable<any[]>;
+            texts: PropTypes.Requireable<{
+                [x: string]: any;
+            }>;
+        }>>;
         const translate: PropTypes.Requireable<(...args: any[]) => any>;
     }
     namespace propTypes {

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

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

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

@@ -3,7 +3,7 @@ import _pipe from "lodash/fp/pipe";
 import _fromPairs from "lodash/fp/fromPairs";
 import _map from "lodash/fp/map";
 import _keys from "lodash/fp/keys";
-import _getOr from "lodash/fp/getOr";
+import _get from "lodash/fp/get";
 import React, { useCallback, useState, useMemo } from 'react';
 import PropTypes from 'prop-types';
 import { convert } from 'css-color-function';
@@ -31,7 +31,7 @@ const ChangeSkillFocusButton = (props, context) => {
     translate
   } = context;
-  const primarySkinColor = _getOr('#0061FF', 'common.primary', skin);
+  const primarySkinColor = _get('common.primary', skin);
   const handleMouseOver = useCallback(() => setHovered(true), [setHovered]);
   const handleMouseLeave = useCallback(() => setHovered(false), [setHovered]);
@@ -61,6 +61,7 @@ const ChangeSkillFocusButton = (props, context) => {
 };
 ChangeSkillFocusButton.contextTypes = {
+  skin: Provider.childContextTypes.skin,
   translate: Provider.childContextTypes.translate
 };
 ChangeSkillFocusButton.propTypes = process.env.NODE_ENV !== "production" ? {
@@ -79,10 +80,14 @@ const FilterButton = (props, context) => {
     translate
   } = context;
-  const primarySkinColor = _getOr('#0061FF', 'common.primary', skin);
+  const primarySkinColor = _get('common.primary', skin);
   const Content = useCallback(() => /*#__PURE__*/React.createElement("div", null, filter, /*#__PURE__*/React.createElement("span", {
-    className: active ? style.skillFilterNumber : style.skillFilterNumberInActive
+    className: active ? style.skillFilterNumber : style.skillFilterNumberInActive,
+    style: {
+      backgroundColor: active ? convert(`color(${primarySkinColor} a(0.07))`) : '#EAEAEB',
+      color: active ? primarySkinColor : '#515161'
+    }
   }, skillTotal)), [filter, skillTotal, active]);
   const buttonProps = {
     customStyle: {
@@ -99,6 +104,7 @@ const FilterButton = (props, context) => {
 };
 FilterButton.contextTypes = {
+  skin: Provider.childContextTypes.skin,
   translate: Provider.childContextTypes.translate
 };
 FilterButton.propTypes = process.env.NODE_ENV !== "production" ? {
@@ -121,14 +127,21 @@ const MyLearning = (props, context) => {
     onExploreSkill
   } = props;
   const {
+    skin,
     translate
   } = context;
+  const primarySkinColor = _get('common.primary', skin);
   const [open, setOpen] = useState(false);
   const [selectedSkillsList, setSelectedSkillsList] = useState(selectedSkills);
   const [skillFocusSelectedOnChart, setSkillFocusSelectedOnChart] = useState(undefined);
   const [searchValue, setSearchValue] = useState('');
-  const [searchResults, setSearchResults] = useState(skills);
+  const [searchResults, setSearchResults] = useState(skills.sort((a, b) => skillsInformation[b].stats.score - skillsInformation[a].stats.score));
   const [activeFilter, setActiveFilter] = useState('all');
+  const [hovered, setHovered] = useState(false);
+  const handleMouseOver = useCallback(() => setHovered(true), [setHovered]);
+  const handleMouseLeave = useCallback(() => setHovered(false), [setHovered]);
   const skillsReviewReady = useMemo(() => {
     return searchResults.filter(skill => skillsInformation[skill].availableForReview);
   }, [searchResults, skillsInformation]);
@@ -173,7 +186,7 @@ const MyLearning = (props, context) => {
     }
   }];
   const handleOnDotClick = useCallback(skillRef => {
-    skillRef && setSkillFocusSelectedOnChart(skillRef);
+    setSkillFocusSelectedOnChart(skillRef);
   }, [setSkillFocusSelectedOnChart]);
   const handleOpenSkillPicker = useCallback(() => setOpen(true), [setOpen]);
   const handleCloseSkillPicker = useCallback(() => setOpen(false), [setOpen]);
@@ -205,6 +218,7 @@ const MyLearning = (props, context) => {
     onConfirm: handleConfirmSkillPicker,
     onClose: handleCloseSkillPicker
   }), learnerFeature ? /*#__PURE__*/React.createElement("div", {
+    "data-name": "skill-focus-container",
     className: style.skillFocusContainer
   }, /*#__PURE__*/React.createElement("header", {
     className: style.skillFocusHeader
@@ -223,12 +237,14 @@ const MyLearning = (props, context) => {
   })), /*#__PURE__*/React.createElement("div", {
     className: style.skillFocusHeaderContent
   }, /*#__PURE__*/React.createElement("div", {
+    "data-name": "skill-focus-title",
     className: style.skillFocusHeaderTitle
   }, translate('skill_focus')), /*#__PURE__*/React.createElement("div", {
+    "data-name": "skill-focus-description",
     className: style.skillFocusHeaderDescription
-  }, translate('skills_focus_description')))), selectedSkillsList.length > 0 ? /*#__PURE__*/React.createElement(ChangeSkillFocusButton, {
+  }, translate('skills_focus_description')))), selectedSkillsList.length >= 3 ? /*#__PURE__*/React.createElement(ChangeSkillFocusButton, {
     onClick: handleOpenSkillPicker
-  }) : null), selectedSkillsList.length > 0 ? /*#__PURE__*/React.createElement("div", {
+  }) : null), selectedSkillsList.length >= 3 ? /*#__PURE__*/React.createElement("div", {
     className: style.skillFocusContent
   }, /*#__PURE__*/React.createElement("div", {
     className: style.radarContainer
@@ -245,8 +261,8 @@ const MyLearning = (props, context) => {
         stroke: ['#0062ffff', '#8000FF']
       },
       percentage: {
-        color: '#0061FF',
-        background: 'linear-gradient(180deg, rgba(0, 97, 255, 0.10) 0%, rgba(147, 107, 255, 0.10) 100%)'
+        color: primarySkinColor,
+        background: convert(`color(${primarySkinColor} a(0.07))`)
       },
       label: {
         color: '#020202ff'
@@ -264,14 +280,18 @@ const MyLearning = (props, context) => {
     className: style.skillFocusEmptyTitle
   }, translate('skills_focus_empty_title')), /*#__PURE__*/React.createElement("div", {
     className: style.skillFocusEmptyDescription
-  }, translate('skills_focus_empty_description')), /*#__PURE__*/React.createElement(ButtonLink, {
+  }, translate('skills_focus_empty_description')), /*#__PURE__*/React.createElement("div", {
+    onMouseOver: handleMouseOver,
+    onMouseLeave: handleMouseLeave
+  }, /*#__PURE__*/React.createElement(ButtonLink, {
     label: translate('skills_choose_focus'),
     type: "primary",
     customStyle: {
-      width: '168px'
+      width: '168px',
+      backgroundColor: hovered ? convert(`hsl(from ${primarySkinColor} h s calc(l*(1 - 0.08)))`) : primarySkinColor
     },
     onClick: handleOpenSkillPicker
-  }))) : null, /*#__PURE__*/React.createElement("header", {
+  })))) : null, /*#__PURE__*/React.createElement("header", {
     className: style.skillListHeader
   }, /*#__PURE__*/React.createElement("div", {
     className: style.skillListHeaderIcon
@@ -349,15 +369,22 @@ const MyLearning = (props, context) => {
       onExploreSkill(skill);
     }
+    const {
+      score,
+      courses: skillCourses,
+      questionsAnswered: skillQuestions,
+      coursesCompleted: completedCourses
+    } = skillsInformation[skill].stats;
     return /*#__PURE__*/React.createElement("div", {
       key: index
     }, /*#__PURE__*/React.createElement(LearnerSkillCard, {
       skillTitle: skillsLocales[skill],
       focus: selectedSkills.includes(skill),
       metrics: {
-        skillCourses: skillsInformation[skill].stats.courses,
-        skillQuestions: skillsInformation[skill].stats.questionsAnswered,
-        completedCourses: skillsInformation[skill].stats.coursesCompleted
+        score,
+        skillCourses,
+        skillQuestions,
+        completedCourses
       },
       review: skillsInformation[skill].availableForReview,
       onReviewClick: handleReviewSkill,
@@ -367,6 +394,7 @@ const MyLearning = (props, context) => {
 };
 MyLearning.contextTypes = {
+  skin: Provider.childContextTypes.skin,
   translate: Provider.childContextTypes.translate
 };
 MyLearning.propTypes = process.env.NODE_ENV !== "production" ? {

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

	@@ -1 +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","style","ChangeSkillFocusButton","props","context","hovered","setHovered","onClick","skin","translate","primarySkinColor","handleMouseOver","handleMouseLeave","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","open","setOpen","selectedSkillsList","setSelectedSkillsList","skillFocusSelectedOnChart","setSkillFocusSelectedOnChart","undefined","searchValue","setSearchValue","searchResults","setSearchResults","activeFilter","setActiveFilter","skillsReviewReady","skill","availableForReview","graphDatas","stats","score","graphLegends","filters","all","review","sumKpi","kpi","coursedCompletedData","questionsAnsweredData","learningHoursData","skillChartPaneLegends","focusedSkill","skillChartPanelProps","title","value","legend","icon","iconName","handleOnDotClick","skillRef","handleOpenSkillPicker","handleCloseSkillPicker","handleConfirmSkillPicker","focusSkillList","handleSearch","handleSearchReset","ReviewTooltipContent","backgroundContainer","container","skillFocusContainer","skillFocusHeader","skillFocusHeaderWrapper","skillFocusHeaderIcon","faSize","wrapperSize","skillFocusHeaderContent","skillFocusHeaderTitle","skillFocusHeaderDescription","length","skillFocusContent","radarContainer","gradient","fill","stroke","percentage","background","label","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","handleReviewSkill","handleExploreSkill","includes","skillCourses","courses","skillQuestions","questionsAnswered","completedCourses","coursesCompleted","arrayOf","objectOf","shape","learningHours"],"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 {getOr, keys, map, fromPairs, pipe, sumBy} 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 style from './style.css';\n\nconst ChangeSkillFocusButton = (props, context) => {\n const [hovered, setHovered] = useState(false);\n const {onClick} = props;\n const {skin, translate} = context;\n const primarySkinColor = getOr('#0061FF', 'common.primary', skin);\n\n const handleMouseOver = useCallback(() => setHovered(true), [setHovered]);\n\n const handleMouseLeave = useCallback(() => setHovered(false), [setHovered]);\n\n return (\n <div\n data-name=\"button-explore-wrapper\"\n onMouseOver={handleMouseOver}\n onMouseLeave={handleMouseLeave}\n >\n <ButtonLink\n customStyle={{\n backgroundColor: hovered\n ? primarySkinColor\n : convert(`color(${primarySkinColor} a(0.07))`),\n color: hovered ? '#FFFFFF' : primarySkinColor,\n transition: 'background-color 0.15s ease-in-out, color 0.15s ease-in-out'\n }}\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: hovered\n ? primarySkinColor\n : convert(`color(${primarySkinColor} a(0.07))`),\n color: hovered ? '#FFFFFF' : primarySkinColor,\n size: 16\n }\n }}\n />\n </div>\n );\n};\n\nChangeSkillFocusButton.contextTypes = {\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, translate} = context;\n const primarySkinColor = getOr('#0061FF', 'common.primary', skin);\n\n const Content = useCallback(\n () => (\n <div>\n {filter}\n <span className={active ? style.skillFilterNumber : style.skillFilterNumberInActive}>\n {skillTotal}\n </span>\n </div>\n ),\n [filter, skillTotal, active]\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: filter === translate('review_mode_available') ? '200px' : '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 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 } = props;\n const {translate} = context;\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(skills);\n const [activeFilter, setActiveFilter] = useState('all');\n\n const skillsReviewReady = useMemo(() => {\n return searchResults.filter(skill => skillsInformation[skill].availableForReview);\n }, [searchResults, skillsInformation]);\n\n const graphDatas = useMemo(\n () =>\n pipe(\n map(skill => [skill, skillsInformation[skill].stats.score]),\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 skillFocusSelectedOnChart\n ? skillsInformation[skillFocusSelectedOnChart].stats[kpi]\n : sumBy(skill => skillsInformation[skill].stats[kpi], selectedSkillsList),\n [skillFocusSelectedOnChart, skillsInformation, selectedSkillsList]\n );\n\n const coursedCompletedData = useMemo(() => sumKpi('coursesCompleted'), [sumKpi]);\n\n const questionsAnsweredData = useMemo(() => sumKpi('questionsAnswered'), [sumKpi]);\n\n const learningHoursData = useMemo(() => sumKpi('learningHours'), [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_courses_completed'),\n value: `${coursedCompletedData}`,\n legend: skillChartPaneLegends,\n icon: {iconName: 'book-open-cover', backgroundColor: '#D9F4F7'}\n },\n {\n title: translate('skill_chart_side_panel_questions_answered'),\n value: `${questionsAnsweredData}`,\n legend: skillChartPaneLegends,\n icon: {iconName: 'circle-question', backgroundColor: '#FFDCD1'}\n },\n {\n title: translate('skill_chart_side_panel_learning_hours'),\n value: `${learningHoursData}`,\n legend: skillChartPaneLegends,\n icon: {iconName: 'clock', backgroundColor: '#FAD6DE'}\n }\n ];\n\n const handleOnDotClick = useCallback(\n skillRef => {\n skillRef && 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 <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 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 className={style.skillFocusHeaderTitle}>{translate('skill_focus')}</div>\n <div className={style.skillFocusHeaderDescription}>\n {translate('skills_focus_description')}\n </div>\n </div>\n </div>\n {selectedSkillsList.length > 0 ? (\n <ChangeSkillFocusButton onClick={handleOpenSkillPicker} />\n ) : null}\n </header>\n {selectedSkillsList.length > 0 ? (\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 colors={[\n {\n gradient: {\n fill: ['#0062ffff', '#8000ff85'],\n stroke: ['#0062ffff', '#8000FF']\n },\n percentage: {\n color: '#0061FF',\n background:\n 'linear-gradient(180deg, rgba(0, 97, 255, 0.10) 0%, rgba(147, 107, 255, 0.10) 100%)'\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 <ButtonLink\n label={translate('skills_choose_focus')}\n type=\"primary\"\n customStyle={{width: '168px'}}\n onClick={handleOpenSkillPicker}\n />\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(\n 'Press the escape key to close the information text'\n )}\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 function handleReviewSkill() {\n onReviewSkill(skill);\n }\n function handleExploreSkill() {\n onExploreSkill(skill);\n }\n return (\n <div key={index}>\n <LearnerSkillCard\n skillTitle={skillsLocales[skill]}\n focus={selectedSkills.includes(skill)}\n metrics={{\n skillCourses: skillsInformation[skill].stats.courses,\n skillQuestions: skillsInformation[skill].stats.questionsAnswered,\n completedCourses: skillsInformation[skill].stats.coursesCompleted\n }}\n review={skillsInformation[skill].availableForReview}\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 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 courses: PropTypes.number,\n coursesCompleted: PropTypes.number,\n questionsAnswered: PropTypes.number,\n learningHours: 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};\n\nexport default MyLearning;\n"],"mappings":";;;;;;AAAA,OAAOA,KAAP,IAAeC,WAAf,EAA4BC,QAA5B,EAAsCC,OAAtC,QAAoD,OAApD;AACA,OAAOC,SAAP,MAAsB,YAAtB;AACA,SAAQC,OAAR,QAAsB,oBAAtB;AAEA,OAAOC,QAAP,MAAqB,qBAArB;AACA,OAAOC,IAAP,MAAiB,iBAAjB;AACA,OAAOC,OAAP,MAAoB,oBAApB;AACA,OAAOC,UAAP,MAAuB,wBAAvB;AACA,OAAOC,OAAP,MAAoB,oBAApB;AACA,OAAOC,cAAP,MAA2B,iCAA3B;AACA,OAAOC,UAAP,MAAuB,4BAAvB;AACA,OAAOC,gBAAP,MAA6B,mCAA7B;AACA,OAAOC,mCAAP,MAAgD,6CAAhD;AACA,OAAOC,+BAAP,MAA4C,oDAA5C;AACA,OAAOC,gBAAP,MAA6B,mCAA7B;AACA,OAAOC,mBAAP,MAAgC,kCAAhC;AACA,OAAOC,KAAP,MAAkB,aAAlB;;AAEA,MAAMC,sBAAsB,GAAG,CAACC,KAAD,EAAQC,OAAR,KAAoB;EACjD,MAAM,CAACC,OAAD,EAAUC,UAAV,IAAwBrB,QAAQ,CAAC,KAAD,CAAtC;EACA,MAAM;IAACsB;EAAD,IAAYJ,KAAlB;EACA,MAAM;IAACK,IAAD;IAAOC;EAAP,IAAoBL,OAA1B;;EACA,MAAMM,gBAAgB,GAAG,OAAM,SAAN,EAAiB,gBAAjB,EAAmCF,IAAnC,CAAzB;;EAEA,MAAMG,eAAe,GAAG3B,WAAW,CAAC,MAAMsB,UAAU,CAAC,IAAD,CAAjB,EAAyB,CAACA,UAAD,CAAzB,CAAnC;EAEA,MAAMM,gBAAgB,GAAG5B,WAAW,CAAC,MAAMsB,UAAU,CAAC,KAAD,CAAjB,EAA0B,CAACA,UAAD,CAA1B,CAApC;EAEA,oBACE;IACE,aAAU,wBADZ;IAEE,WAAW,EAAEK,eAFf;IAGE,YAAY,EAAEC;EAHhB,gBAKE,oBAAC,UAAD;IACE,WAAW,EAAE;MACXC,eAAe,EAAER,OAAO,GACpBK,gBADoB,GAEpBtB,OAAO,CAAE,SAAQsB,gBAAiB,WAA3B,CAHA;MAIXI,KAAK,EAAET,OAAO,GAAG,SAAH,GAAeK,gBAJlB;MAKXK,UAAU,EAAE;IALD,CADf;IAQE,OAAO,EAAER,OARX;IASE,KAAK,EAAEE,SAAS,CAAC,qBAAD,CATlB;IAUE,aAAU,2BAVZ;IAWE,IAAI,EAAE;MACJO,QAAQ,EAAE,MADN;MAEJC,MAAM,EAAE;QACNC,IAAI,EAAE,eADA;QAENL,eAAe,EAAER,OAAO,GACpBK,gBADoB,GAEpBtB,OAAO,CAAE,SAAQsB,gBAAiB,WAA3B,CAJL;QAKNI,KAAK,EAAET,OAAO,GAAG,SAAH,GAAeK,gBALvB;QAMNS,IAAI,EAAE;MANA;IAFJ;EAXR,EALF,CADF;AA+BD,CAzCD;;AA2CAjB,sBAAsB,CAACkB,YAAvB,GAAsC;EACpCX,SAAS,EAAEpB,QAAQ,CAACgC,iBAAT,CAA2BZ;AADF,CAAtC;AAIAP,sBAAsB,CAACoB,SAAvB,2CAAmC;EACjCf,OAAO,EAAEpB,SAAS,CAACoC;AADc,CAAnC;;AAIA,MAAMC,YAAY,GAAG,CAACrB,KAAD,EAAQC,OAAR,KAAoB;EACvC,MAAM;IAACqB,MAAD;IAASC,MAAT;IAAiBC,UAAjB;IAA6BpB;EAA7B,IAAwCJ,KAA9C;EACA,MAAM;IAACK,IAAD;IAAOC;EAAP,IAAoBL,OAA1B;;EACA,MAAMM,gBAAgB,GAAG,OAAM,SAAN,EAAiB,gBAAjB,EAAmCF,IAAnC,CAAzB;;EAEA,MAAMoB,OAAO,GAAG5C,WAAW,CACzB,mBACE,iCACG0C,MADH,eAEE;IAAM,SAAS,EAAED,MAAM,GAAGxB,KAAK,CAAC4B,iBAAT,GAA6B5B,KAAK,CAAC6B;EAA1D,GACGH,UADH,CAFF,CAFuB,EASzB,CAACD,MAAD,EAASC,UAAT,EAAqBF,MAArB,CATyB,CAA3B;EAYA,MAAMM,WAAW,GAAG;IAClBC,WAAW,EAAE;MACXnB,eAAe,EAAEY,MAAM,GAAGrC,OAAO,CAAE,SAAQsB,gBAAiB,WAA3B,CAAV,GAAmD,SAD/D;MAEXI,KAAK,EAAEW,MAAM,GAAGf,gBAAH,GAAsB,SAFxB;MAGXK,UAAU,EAAE,6DAHD;MAIXkB,KAAK,EAAEP,MAAM,KAAKjB,SAAS,CAAC,uBAAD,CAApB,GAAgD,OAAhD,GAA0D;IAJtD,CADK;IAOlBF,OAPkB;IAQlB2B,OAAO,eAAE,oBAAC,OAAD,OARS;IASlB,aAAa;EATK,CAApB;EAYA,oBAAO,oBAAC,UAAD,EAAgBH,WAAhB,CAAP;AACD,CA9BD;;AAgCAP,YAAY,CAACJ,YAAb,GAA4B;EAC1BX,SAAS,EAAEpB,QAAQ,CAACgC,iBAAT,CAA2BZ;AADZ,CAA5B;AAIAe,YAAY,CAACF,SAAb,2CAAyB;EACvBG,MAAM,EAAEtC,SAAS,CAACgD,IADK;EAEvBT,MAAM,EAAEvC,SAAS,CAACiD,MAFK;EAGvBT,UAAU,EAAExC,SAAS,CAACkD,MAHC;EAIvB9B,OAAO,EAAEpB,SAAS,CAACoC;AAJI,CAAzB;;AAOA,MAAMe,UAAU,GAAG,CAACnC,KAAD,EAAQC,OAAR,KAAoB;EACrC,MAAM;IACJmC,MADI;IAEJC,cAAc,GAAG,EAFb;IAGJC,iBAHI;IAIJC,aAJI;IAKJC,cAAc,GAAG,IALb;IAMJC,SANI;IAOJC,mBAPI;IAQJC,aARI;IASJC;EATI,IAUF5C,KAVJ;EAWA,MAAM;IAACM;EAAD,IAAcL,OAApB;EACA,MAAM,CAAC4C,IAAD,EAAOC,OAAP,IAAkBhE,QAAQ,CAAC,KAAD,CAAhC;EACA,MAAM,CAACiE,kBAAD,EAAqBC,qBAArB,IAA8ClE,QAAQ,CAACuD,cAAD,CAA5D;EACA,MAAM,CAACY,yBAAD,EAA4BC,4BAA5B,IAA4DpE,QAAQ,CAACqE,SAAD,CAA1E;EACA,MAAM,CAACC,WAAD,EAAcC,cAAd,IAAgCvE,QAAQ,CAAC,EAAD,CAA9C;EACA,MAAM,CAACwE,aAAD,EAAgBC,gBAAhB,IAAoCzE,QAAQ,CAACsD,MAAD,CAAlD;EACA,MAAM,CAACoB,YAAD,EAAeC,eAAf,IAAkC3E,QAAQ,CAAC,KAAD,CAAhD;EAEA,MAAM4E,iBAAiB,GAAG3E,OAAO,CAAC,MAAM;IACtC,OAAOuE,aAAa,CAAC/B,MAAd,CAAqBoC,KAAK,IAAIrB,iBAAiB,CAACqB,KAAD,CAAjB,CAAyBC,kBAAvD,CAAP;EACD,CAFgC,EAE9B,CAACN,aAAD,EAAgBhB,iBAAhB,CAF8B,CAAjC;EAIA,MAAMuB,UAAU,GAAG9E,OAAO,CACxB,MACE,MACE,KAAI4E,KAAK,IAAI,CAACA,KAAD,EAAQrB,iBAAiB,CAACqB,KAAD,CAAjB,CAAyBG,KAAzB,CAA+BC,KAAvC,CAAb,CADF,cAGEhB,kBAHF,CAFsB,EAMxB,CAACA,kBAAD,EAAqBT,iBAArB,CANwB,CAA1B;EASA,MAAM0B,YAAY,GAAGjF,OAAO,CAC1B,MACE,MACE,KAAI4E,KAAK,IAAI,CAACA,KAAD,EAAQpB,aAAa,CAACoB,KAAD,CAArB,CAAb,CADF,cAGEZ,kBAHF,CAFwB,EAM1B,CAACA,kBAAD,EAAqBR,aAArB,CAN0B,CAA5B;EASA,MAAM0B,OAAO,GAAGlF,OAAO,CAAC,MAAM;IAC5B,OAAO;MACLmF,GAAG,EAAEZ,aADA;MAELa,MAAM,EAAET;IAFH,CAAP;EAID,CALsB,EAKpB,CAACJ,aAAD,EAAgBI,iBAAhB,CALoB,CAAvB;EAOA,MAAMU,MAAM,GAAGvF,WAAW,CACxBwF,GAAG,IACDpB,yBAAyB,GACrBX,iBAAiB,CAACW,yBAAD,CAAjB,CAA6Ca,KAA7C,CAAmDO,GAAnD,CADqB,GAErB,OAAMV,KAAK,IAAIrB,iBAAiB,CAACqB,KAAD,CAAjB,CAAyBG,KAAzB,CAA+BO,GAA/B,CAAf,EAAoDtB,kBAApD,CAJkB,EAKxB,CAACE,yBAAD,EAA4BX,iBAA5B,EAA+CS,kBAA/C,CALwB,CAA1B;EAQA,MAAMuB,oBAAoB,GAAGvF,OAAO,CAAC,MAAMqF,MAAM,CAAC,kBAAD,CAAb,EAAmC,CAACA,MAAD,CAAnC,CAApC;EAEA,MAAMG,qBAAqB,GAAGxF,OAAO,CAAC,MAAMqF,MAAM,CAAC,mBAAD,CAAb,EAAoC,CAACA,MAAD,CAApC,CAArC;EAEA,MAAMI,iBAAiB,GAAGzF,OAAO,CAAC,MAAMqF,MAAM,CAAC,eAAD,CAAb,EAAgC,CAACA,MAAD,CAAhC,CAAjC;EAEA,MAAMK,qBAAqB,GAAG1F,OAAO,CACnC,MACEuB,SAAS,CAAC,uBAAD,EAA0B;IACjCoE,YAAY,EAAEzB,yBAAyB,GACnCV,aAAa,CAACU,yBAAD,CADsB,GAEnC3C,SAAS,CAAC,gBAAD;EAHoB,CAA1B,CAFwB,EAOnC,CAACA,SAAD,EAAYiC,aAAZ,EAA2BU,yBAA3B,CAPmC,CAArC;EASA,MAAM0B,oBAAoB,GAAG,CAC3B;IACEC,KAAK,EAAEtE,SAAS,CAAC,0CAAD,CADlB;IAEEuE,KAAK,EAAG,GAAEP,oBAAqB,EAFjC;IAGEQ,MAAM,EAAEL,qBAHV;IAIEM,IAAI,EAAE;MAACC,QAAQ,EAAE,iBAAX;MAA8BtE,eAAe,EAAE;IAA/C;EAJR,CAD2B,EAO3B;IACEkE,KAAK,EAAEtE,SAAS,CAAC,2CAAD,CADlB;IAEEuE,KAAK,EAAG,GAAEN,qBAAsB,EAFlC;IAGEO,MAAM,EAAEL,qBAHV;IAIEM,IAAI,EAAE;MAACC,QAAQ,EAAE,iBAAX;MAA8BtE,eAAe,EAAE;IAA/C;EAJR,CAP2B,EAa3B;IACEkE,KAAK,EAAEtE,SAAS,CAAC,uCAAD,CADlB;IAEEuE,KAAK,EAAG,GAAEL,iBAAkB,EAF9B;IAGEM,MAAM,EAAEL,qBAHV;IAIEM,IAAI,EAAE;MAACC,QAAQ,EAAE,OAAX;MAAoBtE,eAAe,EAAE;IAArC;EAJR,CAb2B,CAA7B;EAqBA,MAAMuE,gBAAgB,GAAGpG,WAAW,CAClCqG,QAAQ,IAAI;IACVA,QAAQ,IAAIhC,4BAA4B,CAACgC,QAAD,CAAxC;EACD,CAHiC,EAIlC,CAAChC,4BAAD,CAJkC,CAApC;EAMA,MAAMiC,qBAAqB,GAAGtG,WAAW,CAAC,MAAMiE,OAAO,CAAC,IAAD,CAAd,EAAsB,CAACA,OAAD,CAAtB,CAAzC;EACA,MAAMsC,sBAAsB,GAAGvG,WAAW,CAAC,MAAMiE,OAAO,CAAC,KAAD,CAAd,EAAuB,CAACA,OAAD,CAAvB,CAA1C;EACA,MAAMuC,wBAAwB,GAAGxG,WAAW,CAC1CyG,cAAc,IAAI;IAChBtC,qBAAqB,CAACsC,cAAD,CAArB;IACA5C,mBAAmB,CAAC4C,cAAD,CAAnB;IACAxC,OAAO,CAAC,KAAD,CAAP;EACD,CALyC,EAM1C,CAACJ,mBAAD,EAAsBM,qBAAtB,EAA6CF,OAA7C,CAN0C,CAA5C;EAQA,MAAMyC,YAAY,GAAG1G,WAAW,CAC9BgG,KAAK,IAAI;IACPxB,cAAc,CAACwB,KAAD,CAAd;IACAtB,gBAAgB,CAACnB,MAAM,CAACb,MAAP,CAAcoC,KAAK,IAAI9D,mBAAmB,CAAC0C,aAAa,CAACoB,KAAD,CAAd,EAAuBkB,KAAvB,CAA1C,CAAD,CAAhB;EACD,CAJ6B,EAK9B,CAACzC,MAAD,EAASG,aAAT,EAAwBc,cAAxB,EAAwCE,gBAAxC,CAL8B,CAAhC;EAOA,MAAMiC,iBAAiB,GAAG3G,WAAW,CAAC,MAAM;IAC1CwE,cAAc,CAAC,EAAD,CAAd;IACAE,gBAAgB,CAACnB,MAAD,CAAhB;EACD,CAHoC,EAGlC,CAACA,MAAD,EAASiB,cAAT,EAAyBE,gBAAzB,CAHkC,CAArC;EAKA,MAAMkC,oBAAoB,GAAG5G,WAAW,CACtC,mBACE,8CACE,8CACE,+BAAIyB,SAAS,CAAC,4BAAD,CAAb,CADF,CADF,eAIE,+BAAIA,SAAS,CAAC,6BAAD,CAAb,CAJF,eAKE,6CACE,gCAAKA,SAAS,CAAC,mCAAD,CAAd,CADF,eAEE,gCAAKA,SAAS,CAAC,mCAAD,CAAd,CAFF,eAGE,gCAAKA,SAAS,CAAC,mCAAD,CAAd,CAHF,eAIE,gCAAKA,SAAS,CAAC,mCAAD,CAAd,CAJF,CALF,CAFoC,EAetC,CAACA,SAAD,CAfsC,CAAxC;EAkBA,oBACE;IAAK,SAAS,EAAER,KAAK,CAAC4F;EAAtB,gBACE;IAAK,SAAS,EAAE5F,KAAK,CAAC6F;EAAtB,gBACE,oBAAC,gBAAD;IACE,MAAM,EAAEvD,MADV;IAEE,cAAc,EAAEW,kBAFlB;IAGE,aAAa,EAAER,aAHjB;IAIE,MAAM,EAAEM,IAJV;IAKE,SAAS,EAAEJ,SALb;IAME,QAAQ,EAAE2C,sBANZ;IAOE,SAAS,EAAEC,wBAPb;IAQE,OAAO,EAAED;EARX,EADF,EAWG5C,cAAc,gBACb;IAAK,SAAS,EAAE1C,KAAK,CAAC8F;EAAtB,gBACE;IAAQ,SAAS,EAAE9F,KAAK,CAAC+F;EAAzB,gBACE;IAAK,SAAS,EAAE/F,KAAK,CAACgG;EAAtB,gBACE;IAAK,SAAS,EAAEhG,KAAK,CAACiG;EAAtB,gBACE,oBAAC,IAAD;IACE,QAAQ,EAAC,gBADX;IAEE,eAAe,EAAC,SAFlB;IAGE,YAAY,EAAC,MAHf;IAIE,IAAI,EAAE;MAACC,MAAM,EAAE,EAAT;MAAaC,WAAW,EAAE;IAA1B;EAJR,EADF,CADF,eASE;IAAK,SAAS,EAAEnG,KAAK,CAACoG;EAAtB,gBACE;IAAK,SAAS,EAAEpG,KAAK,CAACqG;EAAtB,GAA8C7F,SAAS,CAAC,aAAD,CAAvD,CADF,eAEE;IAAK,SAAS,EAAER,KAAK,CAACsG;EAAtB,GACG9F,SAAS,CAAC,0BAAD,CADZ,CAFF,CATF,CADF,EAiBGyC,kBAAkB,CAACsD,MAAnB,GAA4B,CAA5B,gBACC,oBAAC,sBAAD;IAAwB,OAAO,EAAElB;EAAjC,EADD,GAEG,IAnBN,CADF,EAsBGpC,kBAAkB,CAACsD,MAAnB,GAA4B,CAA5B,gBACC;IAAK,SAAS,EAAEvG,KAAK,CAACwG;EAAtB,gBACE;IAAK,SAAS,EAAExG,KAAK,CAACyG;EAAtB,gBACE,oBAAC,mCAAD;IACE,YAAY,EAAE,CADhB;IAEE,MAAM,EAAE,GAFV;IAGE,KAAK,EAAE,GAHT;IAIE,IAAI,EAAE1C,UAJR;IAKE,MAAM,EAAEG,YALV;IAME,OAAO,EAAEiB,gBANX;IAOE,MAAM,EAAE,CACN;MACEuB,QAAQ,EAAE;QACRC,IAAI,EAAE,CAAC,WAAD,EAAc,WAAd,CADE;QAERC,MAAM,EAAE,CAAC,WAAD,EAAc,SAAd;MAFA,CADZ;MAKEC,UAAU,EAAE;QACVhG,KAAK,EAAE,SADG;QAEViG,UAAU,EACR;MAHQ,CALd;MAUEC,KAAK,EAAE;QACLlG,KAAK,EAAE;MADF;IAVT,CADM;EAPV,EADF,CADF,eA2BE,oBAAC,+BAAD;IAAiC,cAAc,EAAEgE;EAAjD,EA3BF,CADD,gBA+BC;IAAK,SAAS,EAAE7E,KAAK,CAACgH;EAAtB,gBACE,oBAAC,OAAD;IACE,SAAS,EAAEhH,KAAK,CAACiH,GADnB;IAEE,GAAG,EAAC,4FAFN;IAGE,GAAG,EAAC;EAHN,EADF,eAME;IAAK,SAAS,EAAEjH,KAAK,CAACkH;EAAtB,GACG1G,SAAS,CAAC,0BAAD,CADZ,CANF,eASE;IAAK,SAAS,EAAER,KAAK,CAACmH;EAAtB,GACG3G,SAAS,CAAC,gCAAD,CADZ,CATF,eAYE,oBAAC,UAAD;IACE,KAAK,EAAEA,SAAS,CAAC,qBAAD,CADlB;IAEE,IAAI,EAAC,SAFP;IAGE,WAAW,EAAE;MAACwB,KAAK,EAAE;IAAR,CAHf;IAIE,OAAO,EAAEqD;EAJX,EAZF,CArDJ,CADa,GA2EX,IAtFN,eAuFE;IAAQ,SAAS,EAAErF,KAAK,CAACoH;EAAzB,gBACE;IAAK,SAAS,EAAEpH,KAAK,CAACqH;EAAtB,gBACE,oBAAC,IAAD;IACE,QAAQ,EAAC,UADX;IAEE,eAAe,EAAC,SAFlB;IAGE,IAAI,EAAE;MAACnB,MAAM,EAAE,EAAT;MAAaC,WAAW,EAAE;IAA1B;EAHR,EADF,CADF,eAQE;IAAK,SAAS,EAAEnG,KAAK,CAACsH;EAAtB,gBACE;IAAK,SAAS,EAAEtH,KAAK,CAACuH;EAAtB,GAA6C/G,SAAS,CAAC,sBAAD,CAAtD,CADF,eAEE;IAAK,SAAS,EAAER,KAAK,CAACwH;EAAtB,GACGhH,SAAS,CAAC,4BAAD,CADZ,eAEE,oBAAC,OAAD;IACE,QAAQ,EAAE,EADZ;IAEE,sBAAsB,EAAER,KAAK,CAACyH,eAFhC;IAGE,gBAAgB,EAAEzH,KAAK,CAAC0H,OAH1B;IAIE,cAAc,EAAE/B,oBAJlB;IAKE,oCAAoC,EAAEnF,SAAS,CAC7C,oDAD6C;EALjD,EAFF,CAFF,CARF,CAvFF,eA+GE;IAAK,SAAS,EAAER,KAAK,CAAC2H;EAAtB,gBACE;IAAK,SAAS,EAAE3H,KAAK,CAAC4H;EAAtB,GACG,MAAKzD,OAAL,EAAc0D,GAAd,CAAkB,CAACpG,MAAD,EAASqG,KAAT,KAAmB;IACpC,SAASC,iBAAT,GAA6B;MAC3BpE,eAAe,CAAClC,MAAD,CAAf;IACD;;IAED,oBACE;MAAK,GAAG,EAAEqG;IAAV,gBACE,oBAAC,YAAD;MACE,MAAM,EAAEpE,YAAY,KAAKjC,MAD3B;MAEE,MAAM,EACJA,MAAM,KAAK,KAAX,GAAmBjB,SAAS,CAAC,KAAD,CAA5B,GAAsCA,SAAS,CAAC,uBAAD,CAHnD;MAKE,UAAU,EAAE2D,OAAO,CAAC1C,MAAD,CAAP,CAAgB8E,MAL9B;MAME,OAAO,EAAEwB;IANX,EADF,CADF;EAYD,CAjBA,CADH,CADF,eAqBE;IAAK,SAAS,EAAE/H,KAAK,CAACgI;EAAtB,gBACE,oBAAC,UAAD;IACE,MAAM,EAAE;MACNC,WAAW,EAAEzH,SAAS,CAAC,qBAAD,CADhB;MAENuE,KAAK,EAAEzB,WAFD;MAGN4E,QAAQ,EAAEzC;IAHJ,CADV;IAME,OAAO,EAAEC;EANX,EADF,CArBF,CA/GF,EA+IGpC,WAAW,IAAIE,aAAa,CAAC+C,MAAd,KAAyB,CAAxC,gBACC;IAAK,SAAS,EAAEvG,KAAK,CAACmI;EAAtB,gBACE;IAAK,SAAS,EAAEnI,KAAK,CAACoI;EAAtB,GACG5H,SAAS,CAAC,2BAAD,EAA8B;IAAC8C;EAAD,CAA9B,CADZ,CADF,eAIE;IAAK,SAAS,EAAEtD,KAAK,CAACqI;EAAtB,GACG7H,SAAS,CAAC,iCAAD,CADZ,CAJF,eAOE;IAAK,SAAS,EAAER,KAAK,CAACsI,4BAAtB;IAAoD,OAAO,EAAE5C;EAA7D,GACGlF,SAAS,CAAC,kCAAD,CADZ,CAPF,CADD,gBAaC;IAAK,SAAS,EAAER,KAAK,CAACuI;EAAtB,GACG7E,YAAY,KAAK,uBAAjB,IAA4CS,OAAO,CAACT,YAAD,CAAP,CAAsB6C,MAAtB,KAAiC,CAA7E,gBACC;IAAK,SAAS,EAAEvG,KAAK,CAACwI;EAAtB,gBACE,oBAAC,cAAD;IACE,aAAa,EAAEhI,SAAS,CAAC,oBAAD,CAD1B;IAEE,YAAY,EAAEA,SAAS,CAAC,gCAAD,CAFzB;IAGE,kBAAkB,EAAEA,SAAS,CAAC,oBAAD,CAH/B;IAIE,aAAa,EAAC;EAJhB,EADF,CADD,GAUC2D,OAAO,CAACT,YAAD,CAAP,CAAsBmE,GAAtB,CAA0B,CAAChE,KAAD,EAAQiE,KAAR,KAAkB;IAC1C,SAASW,iBAAT,GAA6B;MAC3B5F,aAAa,CAACgB,KAAD,CAAb;IACD;;IACD,SAAS6E,kBAAT,GAA8B;MAC5B5F,cAAc,CAACe,KAAD,CAAd;IACD;;IACD,oBACE;MAAK,GAAG,EAAEiE;IAAV,gBACE,oBAAC,gBAAD;MACE,UAAU,EAAErF,aAAa,CAACoB,KAAD,CAD3B;MAEE,KAAK,EAAEtB,cAAc,CAACoG,QAAf,CAAwB9E,KAAxB,CAFT;MAGE,OAAO,EAAE;QACP+E,YAAY,EAAEpG,iBAAiB,CAACqB,KAAD,CAAjB,CAAyBG,KAAzB,CAA+B6E,OADtC;QAEPC,cAAc,EAAEtG,iBAAiB,CAACqB,KAAD,CAAjB,CAAyBG,KAAzB,CAA+B+E,iBAFxC;QAGPC,gBAAgB,EAAExG,iBAAiB,CAACqB,KAAD,CAAjB,CAAyBG,KAAzB,CAA+BiF;MAH1C,CAHX;MAQE,MAAM,EAAEzG,iBAAiB,CAACqB,KAAD,CAAjB,CAAyBC,kBARnC;MASE,aAAa,EAAE2E,iBATjB;MAUE,cAAc,EAAEC;IAVlB,EADF,CADF;EAgBD,CAvBD,CAXJ,CA5JJ,CADF,CADF;AAuMD,CAlVD;;AAoVArG,UAAU,CAAClB,YAAX,GAA0B;EACxBX,SAAS,EAAEpB,QAAQ,CAACgC,iBAAT,CAA2BZ;AADd,CAA1B;AAIA6B,UAAU,CAAChB,SAAX,2CAAuB;EACrBiB,MAAM,EAAEpD,SAAS,CAACgK,OAAV,CAAkBhK,SAAS,CAACiD,MAA5B,CADa;EAErBI,cAAc,EAAErD,SAAS,CAACgK,OAAV,CAAkBhK,SAAS,CAACiD,MAA5B,CAFK;EAGrBK,iBAAiB,EAAEtD,SAAS,CAACiK,QAAV,CACjBjK,SAAS,CAACkK,KAAV,CAAgB;IACdtF,kBAAkB,EAAE5E,SAAS,CAACgD,IADhB;IAEd8B,KAAK,EAAE9E,SAAS,CAACkK,KAAV,CAAgB;MACrBnF,KAAK,EAAE/E,SAAS,CAACkD,MADI;MAErByG,OAAO,EAAE3J,SAAS,CAACkD,MAFE;MAGrB6G,gBAAgB,EAAE/J,SAAS,CAACkD,MAHP;MAIrB2G,iBAAiB,EAAE7J,SAAS,CAACkD,MAJR;MAKrBiH,aAAa,EAAEnK,SAAS,CAACkD;IALJ,CAAhB;EAFO,CAAhB,CADiB,CAHE;EAerBK,aAAa,EAAEvD,SAAS,CAACiK,QAAV,CAAmBjK,SAAS,CAACiD,MAA7B,CAfM;EAgBrBO,cAAc,EAAExD,SAAS,CAACgD,IAhBL;EAiBrBS,SAAS,EAAEzD,SAAS,CAACgD,IAjBA;EAkBrBU,mBAAmB,EAAE1D,SAAS,CAACoC,IAlBV;EAmBrBuB,aAAa,EAAE3D,SAAS,CAACoC,IAnBJ;EAoBrBwB,cAAc,EAAE5D,SAAS,CAACoC;AApBL,CAAvB;AAuBA,eAAee,UAAf"}
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","style","ChangeSkillFocusButton","props","context","hovered","setHovered","onClick","skin","translate","primarySkinColor","handleMouseOver","handleMouseLeave","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","open","setOpen","selectedSkillsList","setSelectedSkillsList","skillFocusSelectedOnChart","setSkillFocusSelectedOnChart","undefined","searchValue","setSearchValue","searchResults","setSearchResults","sort","a","b","stats","score","activeFilter","setActiveFilter","skillsReviewReady","skill","availableForReview","graphDatas","graphLegends","filters","all","review","sumKpi","kpi","coursedCompletedData","questionsAnsweredData","learningHoursData","skillChartPaneLegends","focusedSkill","skillChartPanelProps","title","value","legend","icon","iconName","handleOnDotClick","skillRef","handleOpenSkillPicker","handleCloseSkillPicker","handleConfirmSkillPicker","focusSkillList","handleSearch","handleSearchReset","ReviewTooltipContent","backgroundContainer","container","skillFocusContainer","skillFocusHeader","skillFocusHeaderWrapper","skillFocusHeaderIcon","faSize","wrapperSize","skillFocusHeaderContent","skillFocusHeaderTitle","skillFocusHeaderDescription","length","skillFocusContent","radarContainer","gradient","fill","stroke","percentage","background","label","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","handleReviewSkill","handleExploreSkill","courses","skillCourses","questionsAnswered","skillQuestions","coursesCompleted","completedCourses","includes","arrayOf","objectOf","shape","learningHours"],"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} 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 style from './style.css';\n\nconst ChangeSkillFocusButton = (props, context) => {\n const [hovered, setHovered] = useState(false);\n const {onClick} = props;\n const {skin, translate} = context;\n const primarySkinColor = get('common.primary', skin);\n\n const handleMouseOver = useCallback(() => setHovered(true), [setHovered]);\n\n const handleMouseLeave = useCallback(() => setHovered(false), [setHovered]);\n\n return (\n <div\n data-name=\"button-explore-wrapper\"\n onMouseOver={handleMouseOver}\n onMouseLeave={handleMouseLeave}\n >\n <ButtonLink\n customStyle={{\n backgroundColor: hovered\n ? primarySkinColor\n : convert(`color(${primarySkinColor} a(0.07))`),\n color: hovered ? '#FFFFFF' : primarySkinColor,\n transition: 'background-color 0.15s ease-in-out, color 0.15s ease-in-out'\n }}\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: hovered\n ? primarySkinColor\n : convert(`color(${primarySkinColor} a(0.07))`),\n color: hovered ? '#FFFFFF' : 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, translate} = 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]\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: filter === translate('review_mode_available') ? '200px' : '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 } = 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 skills.sort((a, b) => skillsInformation[b].stats.score - skillsInformation[a].stats.score)\n );\n const [activeFilter, setActiveFilter] = useState('all');\n const [hovered, setHovered] = useState(false);\n\n const handleMouseOver = useCallback(() => setHovered(true), [setHovered]);\n\n const handleMouseLeave = useCallback(() => setHovered(false), [setHovered]);\n\n const skillsReviewReady = useMemo(() => {\n return searchResults.filter(skill => skillsInformation[skill].availableForReview);\n }, [searchResults, skillsInformation]);\n\n const graphDatas = useMemo(\n () =>\n pipe(\n map(skill => [skill, skillsInformation[skill].stats.score]),\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 skillFocusSelectedOnChart\n ? skillsInformation[skillFocusSelectedOnChart].stats[kpi]\n : sumBy(skill => skillsInformation[skill].stats[kpi], selectedSkillsList),\n [skillFocusSelectedOnChart, skillsInformation, selectedSkillsList]\n );\n\n const coursedCompletedData = useMemo(() => sumKpi('coursesCompleted'), [sumKpi]);\n\n const questionsAnsweredData = useMemo(() => sumKpi('questionsAnswered'), [sumKpi]);\n\n const learningHoursData = useMemo(() => sumKpi('learningHours'), [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_courses_completed'),\n value: `${coursedCompletedData}`,\n legend: skillChartPaneLegends,\n icon: {iconName: 'book-open-cover', backgroundColor: '#D9F4F7'}\n },\n {\n title: translate('skill_chart_side_panel_questions_answered'),\n value: `${questionsAnsweredData}`,\n legend: skillChartPaneLegends,\n icon: {iconName: 'circle-question', backgroundColor: '#FFDCD1'}\n },\n {\n title: translate('skill_chart_side_panel_learning_hours'),\n value: `${learningHoursData}`,\n legend: skillChartPaneLegends,\n icon: {iconName: 'clock', backgroundColor: '#FAD6DE'}\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 <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('skill_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 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 onMouseOver={handleMouseOver} onMouseLeave={handleMouseLeave}>\n <ButtonLink\n label={translate('skills_choose_focus')}\n type=\"primary\"\n customStyle={{\n width: '168px',\n backgroundColor: hovered\n ? convert(`hsl(from ${primarySkinColor} h s calc(l*(1 - 0.08)))`)\n : primarySkinColor\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(\n 'Press the escape key to close the information text'\n )}\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 function handleReviewSkill() {\n onReviewSkill(skill);\n }\n function handleExploreSkill() {\n onExploreSkill(skill);\n }\n const {\n score,\n courses: skillCourses,\n questionsAnswered: skillQuestions,\n coursesCompleted: completedCourses\n } = skillsInformation[skill].stats;\n return (\n <div key={index}>\n <LearnerSkillCard\n skillTitle={skillsLocales[skill]}\n focus={selectedSkills.includes(skill)}\n metrics={{\n score,\n skillCourses,\n skillQuestions,\n completedCourses\n }}\n review={skillsInformation[skill].availableForReview}\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 courses: PropTypes.number,\n coursesCompleted: PropTypes.number,\n questionsAnswered: PropTypes.number,\n learningHours: 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};\n\nexport default MyLearning;\n"],"mappings":"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"}

package/es/template/my-learning/style.css CHANGED Viewed

@@ -93,10 +93,11 @@
   font-weight: 700;
   line-height: 28px;
   margin-bottom: 8px;
+  text-align: center;
 }
 .skillFocusEmptyDescription {
-  width: 502px;
+  max-width: 502px;
   text-align: center;
   font-size: 16px;
   font-weight: 500;

package/lib/molecule/base-modal/index.d.ts CHANGED Viewed

@@ -1,6 +1,29 @@
 export default BaseModal;
-declare function BaseModal(props: any): JSX.Element | null;
+declare function BaseModal(props: any, context: any): JSX.Element | null;
 declare namespace BaseModal {
+    namespace contextTypes {
+        const skin: PropTypes.Requireable<PropTypes.InferProps<{
+            common: PropTypes.Requireable<{
+                [x: string]: any;
+            }>;
+            images: PropTypes.Requireable<PropTypes.InferProps<{
+                'logo-mobile': PropTypes.Requireable<any>;
+                logo: PropTypes.Requireable<any>;
+                'logo-email': PropTypes.Requireable<any>;
+                login: PropTypes.Requireable<any>;
+            }>>;
+            icons: PropTypes.Requireable<{
+                [x: string]: any;
+            }>;
+            mod: PropTypes.Requireable<{
+                [x: string]: any;
+            }>;
+            courses: PropTypes.Requireable<any[]>;
+            texts: PropTypes.Requireable<{
+                [x: string]: any;
+            }>;
+        }>>;
+    }
     namespace propTypes {
         const title: PropTypes.Requireable<string>;
         const headerIcon: PropTypes.Requireable<PropTypes.InferProps<{

package/lib/molecule/base-modal/index.d.ts.map CHANGED Viewed

	@@ -1 +1 @@
1	- {"version":3,"file":"index.d.ts","sourceRoot":"","sources":["../../../src/molecule/base-modal/index.js"],"names":[],"mappings":";~~AAOA~~,~~2DAmGC~~"}
1	+ {"version":3,"file":"index.d.ts","sourceRoot":"","sources":["../../../src/molecule/base-modal/index.js"],"names":[],"mappings":";AASA,yEAgHC"}

package/lib/molecule/base-modal/index.js CHANGED Viewed

@@ -3,12 +3,18 @@
 exports.__esModule = true;
 exports.default = void 0;
+var _get2 = _interopRequireDefault(require("lodash/fp/get"));
 var _isEmpty2 = _interopRequireDefault(require("lodash/fp/isEmpty"));
 var _react = _interopRequireWildcard(require("react"));
 var _propTypes = _interopRequireDefault(require("prop-types"));
+var _cssColorFunction = require("css-color-function");
+var _provider = _interopRequireDefault(require("../../atom/provider"));
 var _icon = _interopRequireDefault(require("../../atom/icon"));
 var _buttonLink = _interopRequireDefault(require("../../atom/button-link"));
@@ -23,7 +29,7 @@ function _interopRequireDefault(obj) { return obj && obj.__esModule ? obj : { de
 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 BaseModal = props => {
+const BaseModal = (props, context) => {
   const {
     title,
     description,
@@ -33,6 +39,12 @@ const BaseModal = props => {
     footer,
     onClose
   } = props;
+  const {
+    skin
+  } = context;
+  const [hovered, setHovered] = (0, _react.useState)(false);
+  const handleMouseOver = (0, _react.useCallback)(() => setHovered(true), [setHovered]);
+  const handleMouseLeave = (0, _react.useCallback)(() => setHovered(false), [setHovered]);
   const Footer = (0, _react.useCallback)(() => {
     if ((0, _isEmpty2.default)(footer)) return null;
     if (typeof footer === 'function') return footer();
@@ -53,6 +65,7 @@ const BaseModal = props => {
       disabled: confirmDisabled,
       iconName
     } = confirmButton || {};
+    const primarySkinColor = (0, _get2.default)('common.primary', skin);
     return /*#__PURE__*/_react.default.createElement("div", {
       className: _style.default.footer
     }, /*#__PURE__*/_react.default.createElement("div", {
@@ -63,7 +76,13 @@ const BaseModal = props => {
       onClick: onCancel,
       label: cancelLabel,
       disabled: cancelDisabled
-    }) : null, onConfirm && confirmLabel ? /*#__PURE__*/_react.default.createElement(_buttonLink.default, _extends({
+    }) : null, onConfirm && confirmLabel ? /*#__PURE__*/_react.default.createElement("div", {
+      onMouseOver: handleMouseOver,
+      onMouseLeave: handleMouseLeave
+    }, /*#__PURE__*/_react.default.createElement(_buttonLink.default, _extends({
+      customStyle: {
+        backgroundColor: hovered ? (0, _cssColorFunction.convert)(`hsl(from ${primarySkinColor} h s calc(l*(1 - 0.08)))`) : primarySkinColor
+      },
       className: _style.default.footerConfirmButton,
       type: 'primary',
       onClick: onConfirm,
@@ -78,10 +97,10 @@ const BaseModal = props => {
           size: 16
         }
       }
-    } : {})) : null), text ? /*#__PURE__*/_react.default.createElement("div", {
+    } : {}))) : null), text ? /*#__PURE__*/_react.default.createElement("div", {
       className: `${_style.default.footerDescription} ${isError ? _style.default.footerDescriptionError : ''}`
     }, text) : null);
-  }, [footer]);
+  }, [footer, hovered, handleMouseOver, handleMouseLeave, skin]);
   if (!isOpen || !title || !children) return null;
   function handleOnClose(e) {
@@ -126,6 +145,9 @@ const BaseModal = props => {
   }, children), /*#__PURE__*/_react.default.createElement(Footer, null)));
 };
+BaseModal.contextTypes = {
+  skin: _provider.default.childContextTypes.skin
+};
 BaseModal.propTypes = process.env.NODE_ENV !== "production" ? {
   title: _propTypes.default.string,
   headerIcon: _propTypes.default.shape({

package/lib/molecule/base-modal/index.js.map CHANGED Viewed

	@@ -1 +1 @@
1	- {"version":3,"file":"index.js","names":["BaseModal","props","title","description","headerIcon","children","isOpen","footer","onClose","Footer","useCallback","cancelButton","confirmButton","text","isError","label","cancelLabel","onCancel","disabled","cancelDisabled","confirmLabel","onConfirm","confirmDisabled","iconName","style","footerCTAWrapper","className","footerCancelButton","type","onClick","footerConfirmButton","icon","position","faIcon","name","color","size","footerDescription","footerDescriptionError","handleOnClose","e","stopPropagation","modalWrapper","modal","header","backgroundColor","faSize","wrapperSize","headerContent","headerTitle","headerDescription","headerCloseIcon","body","propTypes","PropTypes","string","shape","node","bool","oneOfType","func","boolean"],"sources":["../../../src/molecule/base-modal/index.js"],"sourcesContent":["import React, {useCallback} from 'react';\nimport PropTypes from 'prop-types';\nimport {isEmpty} from 'lodash/fp';\nimport Icon from '../../atom/icon';\nimport ButtonLink from '../../atom/button-link';\nimport style from './style.css';\n\nconst BaseModal = props => {\n const {title, description, headerIcon, children, isOpen, footer, onClose} = props;\n\n const Footer = useCallback(() => {\n if (isEmpty(footer)) return null;\n if (typeof footer === 'function') return footer();\n\n const {cancelButton, confirmButton, text, isError} = footer;\n const {label: cancelLabel, onCancel, disabled: cancelDisabled} = cancelButton \|\| {};\n const {\n label: confirmLabel,\n onConfirm,\n disabled: confirmDisabled,\n iconName\n } = confirmButton \|\| {};\n\n return (\n <div className={style.footer}>\n <div className={style.footerCTAWrapper}>\n {onCancel && cancelLabel ? (\n <ButtonLink\n {...{\n className: style.footerCancelButton,\n type: 'secondary',\n onClick: onCancel,\n label: cancelLabel,\n disabled: cancelDisabled\n }}\n />\n ) : null}\n {onConfirm && confirmLabel ? (\n <ButtonLink\n {...{\n className: style.footerConfirmButton,\n type: 'primary',\n onClick: onConfirm,\n label: confirmLabel,\n disabled: confirmDisabled,\n ...(iconName\n ? {\n icon: {\n position: 'left',\n faIcon: {\n name: iconName,\n color: '#FFFFFF',\n size: 16\n }\n }\n }\n : {})\n }}\n />\n ) : null}\n </div>\n {text ? (\n <div\n className={`${style.footerDescription} ${isError ? style.footerDescriptionError : ''}`}\n >\n {text}\n </div>\n ) : null}\n </div>\n );\n }, [footer]);\n\n if (!isOpen \|\| !title \|\| !children) return null;\n\n function handleOnClose(e) {\n e?.stopPropagation();\n onClose();\n }\n\n return (\n <div className={style.modalWrapper}>\n <div className={style.modal}>\n <header className={style.header}>\n {headerIcon?.name ? (\n <div className={style.headerIcon}>\n <Icon\n iconName={headerIcon.name}\n iconColor={headerIcon.color}\n backgroundColor={headerIcon.backgroundColor}\n size={{faSize: 20, wrapperSize: 48}}\n />\n </div>\n ) : null}\n <div className={style.headerContent}>\n <div className={style.headerTitle}>{title}</div>\n {description ? <div className={style.headerDescription}>{description}</div> : null}\n </div>\n <div className={style.headerCloseIcon} onClick={handleOnClose}>\n <Icon iconName=\"close\" backgroundColor=\"#F4F4F5\" size={{faSize: 14, wrapperSize: 28}} />\n </div>\n </header>\n <div className={style.body}>{children}</div>\n <Footer />\n </div>\n </div>\n );\n};\n\nBaseModal.propTypes = {\n title: PropTypes.string,\n headerIcon: PropTypes.shape({\n name: PropTypes.string,\n color: PropTypes.string,\n backgroundColor: PropTypes.string\n }),\n description: PropTypes.string,\n children: PropTypes.node,\n isOpen: PropTypes.bool,\n footer: PropTypes.oneOfType([\n PropTypes.func,\n PropTypes.shape({\n text: PropTypes.string,\n isError: PropTypes.boolean,\n cancelButton: PropTypes.shape({\n label: PropTypes.string,\n onCancel: PropTypes.func,\n disabled: PropTypes.bool\n }),\n confirmButton: PropTypes.shape({\n label: PropTypes.string,\n onConfirm: PropTypes.func,\n iconName: PropTypes.string,\n disabled: PropTypes.bool\n })\n })\n ]),\n onClose: PropTypes.func\n};\n\nexport default BaseModal;\n"],"mappings":"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"}
1	+ {"version":3,"file":"index.js","names":["BaseModal","props","context","title","description","headerIcon","children","isOpen","footer","onClose","skin","hovered","setHovered","useState","handleMouseOver","useCallback","handleMouseLeave","Footer","cancelButton","confirmButton","text","isError","label","cancelLabel","onCancel","disabled","cancelDisabled","confirmLabel","onConfirm","confirmDisabled","iconName","primarySkinColor","style","footerCTAWrapper","className","footerCancelButton","type","onClick","customStyle","backgroundColor","convert","footerConfirmButton","icon","position","faIcon","name","color","size","footerDescription","footerDescriptionError","handleOnClose","e","stopPropagation","modalWrapper","modal","header","faSize","wrapperSize","headerContent","headerTitle","headerDescription","headerCloseIcon","body","contextTypes","Provider","childContextTypes","propTypes","PropTypes","string","shape","node","bool","oneOfType","func","boolean"],"sources":["../../../src/molecule/base-modal/index.js"],"sourcesContent":["import React, {useCallback, useState} from 'react';\nimport PropTypes from 'prop-types';\nimport {isEmpty, get} from 'lodash/fp';\nimport {convert} from 'css-color-function';\nimport Provider from '../../atom/provider';\nimport Icon from '../../atom/icon';\nimport ButtonLink from '../../atom/button-link';\nimport style from './style.css';\n\nconst BaseModal = (props, context) => {\n const {title, description, headerIcon, children, isOpen, footer, onClose} = props;\n const {skin} = context;\n\n const [hovered, setHovered] = useState(false);\n const handleMouseOver = useCallback(() => setHovered(true), [setHovered]);\n const handleMouseLeave = useCallback(() => setHovered(false), [setHovered]);\n\n const Footer = useCallback(() => {\n if (isEmpty(footer)) return null;\n if (typeof footer === 'function') return footer();\n\n const {cancelButton, confirmButton, text, isError} = footer;\n const {label: cancelLabel, onCancel, disabled: cancelDisabled} = cancelButton \|\| {};\n const {\n label: confirmLabel,\n onConfirm,\n disabled: confirmDisabled,\n iconName\n } = confirmButton \|\| {};\n const primarySkinColor = get('common.primary', skin);\n\n return (\n <div className={style.footer}>\n <div className={style.footerCTAWrapper}>\n {onCancel && cancelLabel ? (\n <ButtonLink\n {...{\n className: style.footerCancelButton,\n type: 'secondary',\n onClick: onCancel,\n label: cancelLabel,\n disabled: cancelDisabled\n }}\n />\n ) : null}\n {onConfirm && confirmLabel ? (\n <div onMouseOver={handleMouseOver} onMouseLeave={handleMouseLeave}>\n <ButtonLink\n {...{\n customStyle: {\n backgroundColor: hovered\n ? convert(`hsl(from ${primarySkinColor} h s calc(l*(1 - 0.08)))`)\n : primarySkinColor\n },\n className: style.footerConfirmButton,\n type: 'primary',\n onClick: onConfirm,\n label: confirmLabel,\n disabled: confirmDisabled,\n ...(iconName\n ? {\n icon: {\n position: 'left',\n faIcon: {\n name: iconName,\n color: '#FFFFFF',\n size: 16\n }\n }\n }\n : {})\n }}\n />\n </div>\n ) : null}\n </div>\n {text ? (\n <div\n className={`${style.footerDescription} ${isError ? style.footerDescriptionError : ''}`}\n >\n {text}\n </div>\n ) : null}\n </div>\n );\n }, [footer, hovered, handleMouseOver, handleMouseLeave, skin]);\n\n if (!isOpen \|\| !title \|\| !children) return null;\n\n function handleOnClose(e) {\n e?.stopPropagation();\n onClose();\n }\n\n return (\n <div className={style.modalWrapper}>\n <div className={style.modal}>\n <header className={style.header}>\n {headerIcon?.name ? (\n <div className={style.headerIcon}>\n <Icon\n iconName={headerIcon.name}\n iconColor={headerIcon.color}\n backgroundColor={headerIcon.backgroundColor}\n size={{faSize: 20, wrapperSize: 48}}\n />\n </div>\n ) : null}\n <div className={style.headerContent}>\n <div className={style.headerTitle}>{title}</div>\n {description ? <div className={style.headerDescription}>{description}</div> : null}\n </div>\n <div className={style.headerCloseIcon} onClick={handleOnClose}>\n <Icon iconName=\"close\" backgroundColor=\"#F4F4F5\" size={{faSize: 14, wrapperSize: 28}} />\n </div>\n </header>\n <div className={style.body}>{children}</div>\n <Footer />\n </div>\n </div>\n );\n};\n\nBaseModal.contextTypes = {\n skin: Provider.childContextTypes.skin\n};\n\nBaseModal.propTypes = {\n title: PropTypes.string,\n headerIcon: PropTypes.shape({\n name: PropTypes.string,\n color: PropTypes.string,\n backgroundColor: PropTypes.string\n }),\n description: PropTypes.string,\n children: PropTypes.node,\n isOpen: PropTypes.bool,\n footer: PropTypes.oneOfType([\n PropTypes.func,\n PropTypes.shape({\n text: PropTypes.string,\n isError: PropTypes.boolean,\n cancelButton: PropTypes.shape({\n label: PropTypes.string,\n onCancel: PropTypes.func,\n disabled: PropTypes.bool\n }),\n confirmButton: PropTypes.shape({\n label: PropTypes.string,\n onConfirm: PropTypes.func,\n iconName: PropTypes.string,\n disabled: PropTypes.bool\n })\n })\n ]),\n onClose: PropTypes.func\n};\n\nexport default BaseModal;\n"],"mappings":";;;;;;;;;AAAA;;AACA;;AAEA;;AACA;;AACA;;AACA;;AACA;;;;;;;;;;AAEA,MAAMA,SAAS,GAAG,CAACC,KAAD,EAAQC,OAAR,KAAoB;EACpC,MAAM;IAACC,KAAD;IAAQC,WAAR;IAAqBC,UAArB;IAAiCC,QAAjC;IAA2CC,MAA3C;IAAmDC,MAAnD;IAA2DC;EAA3D,IAAsER,KAA5E;EACA,MAAM;IAACS;EAAD,IAASR,OAAf;EAEA,MAAM,CAACS,OAAD,EAAUC,UAAV,IAAwB,IAAAC,eAAA,EAAS,KAAT,CAA9B;EACA,MAAMC,eAAe,GAAG,IAAAC,kBAAA,EAAY,MAAMH,UAAU,CAAC,IAAD,CAA5B,EAAoC,CAACA,UAAD,CAApC,CAAxB;EACA,MAAMI,gBAAgB,GAAG,IAAAD,kBAAA,EAAY,MAAMH,UAAU,CAAC,KAAD,CAA5B,EAAqC,CAACA,UAAD,CAArC,CAAzB;EAEA,MAAMK,MAAM,GAAG,IAAAF,kBAAA,EAAY,MAAM;IAC/B,IAAI,uBAAQP,MAAR,CAAJ,EAAqB,OAAO,IAAP;IACrB,IAAI,OAAOA,MAAP,KAAkB,UAAtB,EAAkC,OAAOA,MAAM,EAAb;IAElC,MAAM;MAACU,YAAD;MAAeC,aAAf;MAA8BC,IAA9B;MAAoCC;IAApC,IAA+Cb,MAArD;IACA,MAAM;MAACc,KAAK,EAAEC,WAAR;MAAqBC,QAArB;MAA+BC,QAAQ,EAAEC;IAAzC,IAA2DR,YAAY,IAAI,EAAjF;IACA,MAAM;MACJI,KAAK,EAAEK,YADH;MAEJC,SAFI;MAGJH,QAAQ,EAAEI,eAHN;MAIJC;IAJI,IAKFX,aAAa,IAAI,EALrB;IAMA,MAAMY,gBAAgB,GAAG,mBAAI,gBAAJ,EAAsBrB,IAAtB,CAAzB;IAEA,oBACE;MAAK,SAAS,EAAEsB,cAAA,CAAMxB;IAAtB,gBACE;MAAK,SAAS,EAAEwB,cAAA,CAAMC;IAAtB,GACGT,QAAQ,IAAID,WAAZ,gBACC,6BAAC,mBAAD;MAEIW,SAAS,EAAEF,cAAA,CAAMG,kBAFrB;MAGIC,IAAI,EAAE,WAHV;MAIIC,OAAO,EAAEb,QAJb;MAKIF,KAAK,EAAEC,WALX;MAMIE,QAAQ,EAAEC;IANd,EADD,GAUG,IAXN,EAYGE,SAAS,IAAID,YAAb,gBACC;MAAK,WAAW,EAAEb,eAAlB;MAAmC,YAAY,EAAEE;IAAjD,gBACE,6BAAC,mBAAD;MAEIsB,WAAW,EAAE;QACXC,eAAe,EAAE5B,OAAO,GACpB,IAAA6B,yBAAA,EAAS,YAAWT,gBAAiB,0BAArC,CADoB,GAEpBA;MAHO,CAFjB;MAOIG,SAAS,EAAEF,cAAA,CAAMS,mBAPrB;MAQIL,IAAI,EAAE,SARV;MASIC,OAAO,EAAET,SATb;MAUIN,KAAK,EAAEK,YAVX;MAWIF,QAAQ,EAAEI;IAXd,GAYQC,QAAQ,GACR;MACEY,IAAI,EAAE;QACJC,QAAQ,EAAE,MADN;QAEJC,MAAM,EAAE;UACNC,IAAI,EAAEf,QADA;UAENgB,KAAK,EAAE,SAFD;UAGNC,IAAI,EAAE;QAHA;MAFJ;IADR,CADQ,GAWR,EAvBR,EADF,CADD,GA6BG,IAzCN,CADF,EA4CG3B,IAAI,gBACH;MACE,SAAS,EAAG,GAAEY,cAAA,CAAMgB,iBAAkB,IAAG3B,OAAO,GAAGW,cAAA,CAAMiB,sBAAT,GAAkC,EAAG;IADvF,GAGG7B,IAHH,CADG,GAMD,IAlDN,CADF;EAsDD,CApEc,EAoEZ,CAACZ,MAAD,EAASG,OAAT,EAAkBG,eAAlB,EAAmCE,gBAAnC,EAAqDN,IAArD,CApEY,CAAf;EAsEA,IAAI,CAACH,MAAD,IAAW,CAACJ,KAAZ,IAAqB,CAACG,QAA1B,EAAoC,OAAO,IAAP;;EAEpC,SAAS4C,aAAT,CAAuBC,CAAvB,EAA0B;IACxBA,CAAC,EAAEC,eAAH;IACA3C,OAAO;EACR;;EAED,oBACE;IAAK,SAAS,EAAEuB,cAAA,CAAMqB;EAAtB,gBACE;IAAK,SAAS,EAAErB,cAAA,CAAMsB;EAAtB,gBACE;IAAQ,SAAS,EAAEtB,cAAA,CAAMuB;EAAzB,GACGlD,UAAU,EAAEwC,IAAZ,gBACC;IAAK,SAAS,EAAEb,cAAA,CAAM3B;EAAtB,gBACE,6BAAC,aAAD;IACE,QAAQ,EAAEA,UAAU,CAACwC,IADvB;IAEE,SAAS,EAAExC,UAAU,CAACyC,KAFxB;IAGE,eAAe,EAAEzC,UAAU,CAACkC,eAH9B;IAIE,IAAI,EAAE;MAACiB,MAAM,EAAE,EAAT;MAAaC,WAAW,EAAE;IAA1B;EAJR,EADF,CADD,GASG,IAVN,eAWE;IAAK,SAAS,EAAEzB,cAAA,CAAM0B;EAAtB,gBACE;IAAK,SAAS,EAAE1B,cAAA,CAAM2B;EAAtB,GAAoCxD,KAApC,CADF,EAEGC,WAAW,gBAAG;IAAK,SAAS,EAAE4B,cAAA,CAAM4B;EAAtB,GAA0CxD,WAA1C,CAAH,GAAkE,IAFhF,CAXF,eAeE;IAAK,SAAS,EAAE4B,cAAA,CAAM6B,eAAtB;IAAuC,OAAO,EAAEX;EAAhD,gBACE,6BAAC,aAAD;IAAM,QAAQ,EAAC,OAAf;IAAuB,eAAe,EAAC,SAAvC;IAAiD,IAAI,EAAE;MAACM,MAAM,EAAE,EAAT;MAAaC,WAAW,EAAE;IAA1B;EAAvD,EADF,CAfF,CADF,eAoBE;IAAK,SAAS,EAAEzB,cAAA,CAAM8B;EAAtB,GAA6BxD,QAA7B,CApBF,eAqBE,6BAAC,MAAD,OArBF,CADF,CADF;AA2BD,CAhHD;;AAkHAN,SAAS,CAAC+D,YAAV,GAAyB;EACvBrD,IAAI,EAAEsD,iBAAA,CAASC,iBAAT,CAA2BvD;AADV,CAAzB;AAIAV,SAAS,CAACkE,SAAV,2CAAsB;EACpB/D,KAAK,EAAEgE,kBAAA,CAAUC,MADG;EAEpB/D,UAAU,EAAE8D,kBAAA,CAAUE,KAAV,CAAgB;IAC1BxB,IAAI,EAAEsB,kBAAA,CAAUC,MADU;IAE1BtB,KAAK,EAAEqB,kBAAA,CAAUC,MAFS;IAG1B7B,eAAe,EAAE4B,kBAAA,CAAUC;EAHD,CAAhB,CAFQ;EAOpBhE,WAAW,EAAE+D,kBAAA,CAAUC,MAPH;EAQpB9D,QAAQ,EAAE6D,kBAAA,CAAUG,IARA;EASpB/D,MAAM,EAAE4D,kBAAA,CAAUI,IATE;EAUpB/D,MAAM,EAAE2D,kBAAA,CAAUK,SAAV,CAAoB,CAC1BL,kBAAA,CAAUM,IADgB,EAE1BN,kBAAA,CAAUE,KAAV,CAAgB;IACdjD,IAAI,EAAE+C,kBAAA,CAAUC,MADF;IAEd/C,OAAO,EAAE8C,kBAAA,CAAUO,OAFL;IAGdxD,YAAY,EAAEiD,kBAAA,CAAUE,KAAV,CAAgB;MAC5B/C,KAAK,EAAE6C,kBAAA,CAAUC,MADW;MAE5B5C,QAAQ,EAAE2C,kBAAA,CAAUM,IAFQ;MAG5BhD,QAAQ,EAAE0C,kBAAA,CAAUI;IAHQ,CAAhB,CAHA;IAQdpD,aAAa,EAAEgD,kBAAA,CAAUE,KAAV,CAAgB;MAC7B/C,KAAK,EAAE6C,kBAAA,CAAUC,MADY;MAE7BxC,SAAS,EAAEuC,kBAAA,CAAUM,IAFQ;MAG7B3C,QAAQ,EAAEqC,kBAAA,CAAUC,MAHS;MAI7B3C,QAAQ,EAAE0C,kBAAA,CAAUI;IAJS,CAAhB;EARD,CAAhB,CAF0B,CAApB,CAVY;EA4BpB9D,OAAO,EAAE0D,kBAAA,CAAUM;AA5BC,CAAtB;eA+BezE,S"}

package/lib/molecule/learner-skill-card/index.d.ts CHANGED Viewed

@@ -2,6 +2,27 @@ export default LearnerSkillCard;
 declare function LearnerSkillCard(props: any, context: any): JSX.Element;
 declare namespace LearnerSkillCard {
     namespace contextTypes {
+        const skin: PropTypes.Requireable<PropTypes.InferProps<{
+            common: PropTypes.Requireable<{
+                [x: string]: any;
+            }>;
+            images: PropTypes.Requireable<PropTypes.InferProps<{
+                'logo-mobile': PropTypes.Requireable<any>;
+                logo: PropTypes.Requireable<any>;
+                'logo-email': PropTypes.Requireable<any>;
+                login: PropTypes.Requireable<any>;
+            }>>;
+            icons: PropTypes.Requireable<{
+                [x: string]: any;
+            }>;
+            mod: PropTypes.Requireable<{
+                [x: string]: any;
+            }>;
+            courses: PropTypes.Requireable<any[]>;
+            texts: PropTypes.Requireable<{
+                [x: string]: any;
+            }>;
+        }>>;
         const translate: PropTypes.Requireable<(...args: any[]) => any>;
     }
     const propTypes: {
@@ -10,6 +31,7 @@ declare namespace LearnerSkillCard {
         skillAriaLabel: PropTypes.Requireable<string>;
         focus: PropTypes.Requireable<boolean>;
         metrics: PropTypes.Requireable<PropTypes.InferProps<{
+            score: PropTypes.Requireable<number>;
             skillCourses: PropTypes.Requireable<number>;
             skillQuestions: PropTypes.Requireable<number>;
             completedCourses: PropTypes.Requireable<number>;

package/lib/molecule/learner-skill-card/index.d.ts.map CHANGED Viewed

	@@ -1 +1 @@
1	- {"version":3,"file":"index.d.ts","sourceRoot":"","sources":["../../../src/molecule/learner-skill-card/index.js"],"names":[],"mappings":";AASA,~~yEA2JC~~"}
1	+ {"version":3,"file":"index.d.ts","sourceRoot":"","sources":["../../../src/molecule/learner-skill-card/index.js"],"names":[],"mappings":";AASA,yEAwJC"}