@coorpacademy/components 11.35.2-alpha.4 → 11.35.2-forcedeploy2.15

package/es/template/common/dashboard/index.d.ts

@@ -19,7 +19,7 @@ declare namespace Dashboard {
                     'data-name': PropTypes.Requireable<string>;
                     titleSize: PropTypes.Requireable<string>;
                     subtitleSize: PropTypes.Requireable<string>;
-                    icon: PropTypes.Requireable<PropTypes.InferProps<any>>;
+                    icon: PropTypes.Requireable<PropTypes.InferProps<PropTypes.ValidationMap<any>>>;
                     tag: PropTypes.Requireable<PropTypes.InferProps<{
                         label: PropTypes.Requireable<string>;
                         type: PropTypes.Requireable<string>;
@@ -27,7 +27,17 @@ declare namespace Dashboard {
                         customStyle: PropTypes.Requireable<{
                             [x: string]: NonNullable<string | number | null | undefined> | null | undefined;
                         }>;
-                        icon: PropTypes.Requireable<PropTypes.InferProps<any>>;
+                        icon: PropTypes.Requireable<PropTypes.InferProps<{
+                            position: PropTypes.Requireable<string>;
+                            iconName?: React.Validator<string> | undefined;
+                            iconColor?: React.Validator<string | null | undefined> | undefined;
+                            backgroundColor?: React.Validator<string | null | undefined> | undefined;
+                            gradientBackground?: React.Validator<boolean | null | undefined> | undefined;
+                            borderRadius?: React.Validator<string | null | undefined> | undefined;
+                            preset?: React.Validator<string | null | undefined> | undefined;
+                            size?: React.Validator<import("../../../atom/icon").IconSize | null | undefined> | undefined;
+                            customStyle?: React.Validator<React.CSSProperties | null | undefined> | undefined;
+                        }>>;
                     }>>;
                     button: PropTypes.Requireable<PropTypes.InferProps<{
                         type: PropTypes.Requireable<string>;
@@ -114,8 +124,8 @@ declare namespace Dashboard {
                 borderRadius: PropTypes.Requireable<string>;
                 preset: PropTypes.Requireable<string>;
                 size: PropTypes.Requireable<PropTypes.InferProps<{
-                    faSize: PropTypes.Requireable<number>;
-                    wrapperSize: PropTypes.Requireable<number>;
+                    faSize: PropTypes.Validator<number>;
+                    wrapperSize: PropTypes.Validator<number>;
                 }>>;
                 customStyle: PropTypes.Requireable<{
                     [x: string]: NonNullable<string | number | null | undefined> | null | undefined;
@@ -553,7 +563,7 @@ declare namespace Dashboard {
                         'data-name': PropTypes.Requireable<string>;
                         titleSize: PropTypes.Requireable<string>;
                         subtitleSize: PropTypes.Requireable<string>;
-                        icon: PropTypes.Requireable<PropTypes.InferProps<any>>;
+                        icon: PropTypes.Requireable<PropTypes.InferProps<PropTypes.ValidationMap<any>>>;
                         tag: PropTypes.Requireable<PropTypes.InferProps<{
                             label: PropTypes.Requireable<string>;
                             type: PropTypes.Requireable<string>;
@@ -561,7 +571,17 @@ declare namespace Dashboard {
                             customStyle: PropTypes.Requireable<{
                                 [x: string]: NonNullable<string | number | null | undefined> | null | undefined;
                             }>;
-                            icon: PropTypes.Requireable<PropTypes.InferProps<any>>;
+                            icon: PropTypes.Requireable<PropTypes.InferProps<{
+                                position: PropTypes.Requireable<string>;
+                                iconName?: React.Validator<string> | undefined;
+                                iconColor?: React.Validator<string | null | undefined> | undefined;
+                                backgroundColor?: React.Validator<string | null | undefined> | undefined;
+                                gradientBackground?: React.Validator<boolean | null | undefined> | undefined;
+                                borderRadius?: React.Validator<string | null | undefined> | undefined;
+                                preset?: React.Validator<string | null | undefined> | undefined;
+                                size?: React.Validator<import("../../../atom/icon").IconSize | null | undefined> | undefined;
+                                customStyle?: React.Validator<React.CSSProperties | null | undefined> | undefined;
+                            }>>;
                         }>>;
                         button: PropTypes.Requireable<PropTypes.InferProps<{
                             type: PropTypes.Requireable<string>;
@@ -776,7 +796,7 @@ declare namespace Dashboard {
                     'data-name': PropTypes.Requireable<string>;
                     titleSize: PropTypes.Requireable<string>;
                     subtitleSize: PropTypes.Requireable<string>;
-                    icon: PropTypes.Requireable<PropTypes.InferProps<any>>;
+                    icon: PropTypes.Requireable<PropTypes.InferProps<PropTypes.ValidationMap<any>>>;
                     tag: PropTypes.Requireable<PropTypes.InferProps<{
                         label: PropTypes.Requireable<string>;
                         type: PropTypes.Requireable<string>;
@@ -784,7 +804,17 @@ declare namespace Dashboard {
                         customStyle: PropTypes.Requireable<{
                             [x: string]: NonNullable<string | number | null | undefined> | null | undefined;
                         }>;
-                        icon: PropTypes.Requireable<PropTypes.InferProps<any>>;
+                        icon: PropTypes.Requireable<PropTypes.InferProps<{
+                            position: PropTypes.Requireable<string>;
+                            iconName?: React.Validator<string> | undefined;
+                            iconColor?: React.Validator<string | null | undefined> | undefined;
+                            backgroundColor?: React.Validator<string | null | undefined> | undefined;
+                            gradientBackground?: React.Validator<boolean | null | undefined> | undefined;
+                            borderRadius?: React.Validator<string | null | undefined> | undefined;
+                            preset?: React.Validator<string | null | undefined> | undefined;
+                            size?: React.Validator<import("../../../atom/icon").IconSize | null | undefined> | undefined;
+                            customStyle?: React.Validator<React.CSSProperties | null | undefined> | undefined;
+                        }>>;
                     }>>;
                     button: PropTypes.Requireable<PropTypes.InferProps<{
                         type: PropTypes.Requireable<string>;
@@ -871,8 +901,8 @@ declare namespace Dashboard {
                 borderRadius: PropTypes.Requireable<string>;
                 preset: PropTypes.Requireable<string>;
                 size: PropTypes.Requireable<PropTypes.InferProps<{
-                    faSize: PropTypes.Requireable<number>;
-                    wrapperSize: PropTypes.Requireable<number>;
+                    faSize: PropTypes.Validator<number>;
+                    wrapperSize: PropTypes.Validator<number>;
                 }>>;
                 customStyle: PropTypes.Requireable<{
                     [x: string]: NonNullable<string | number | null | undefined> | null | undefined;
@@ -1310,7 +1340,7 @@ declare namespace Dashboard {
                         'data-name': PropTypes.Requireable<string>;
                         titleSize: PropTypes.Requireable<string>;
                         subtitleSize: PropTypes.Requireable<string>;
-                        icon: PropTypes.Requireable<PropTypes.InferProps<any>>;
+                        icon: PropTypes.Requireable<PropTypes.InferProps<PropTypes.ValidationMap<any>>>;
                         tag: PropTypes.Requireable<PropTypes.InferProps<{
                             label: PropTypes.Requireable<string>;
                             type: PropTypes.Requireable<string>;
@@ -1318,7 +1348,17 @@ declare namespace Dashboard {
                             customStyle: PropTypes.Requireable<{
                                 [x: string]: NonNullable<string | number | null | undefined> | null | undefined;
                             }>;
-                            icon: PropTypes.Requireable<PropTypes.InferProps<any>>;
+                            icon: PropTypes.Requireable<PropTypes.InferProps<{
+                                position: PropTypes.Requireable<string>;
+                                iconName?: React.Validator<string> | undefined;
+                                iconColor?: React.Validator<string | null | undefined> | undefined;
+                                backgroundColor?: React.Validator<string | null | undefined> | undefined;
+                                gradientBackground?: React.Validator<boolean | null | undefined> | undefined;
+                                borderRadius?: React.Validator<string | null | undefined> | undefined;
+                                preset?: React.Validator<string | null | undefined> | undefined;
+                                size?: React.Validator<import("../../../atom/icon").IconSize | null | undefined> | undefined;
+                                customStyle?: React.Validator<React.CSSProperties | null | undefined> | undefined;
+                            }>>;
                         }>>;
                         button: PropTypes.Requireable<PropTypes.InferProps<{
                             type: PropTypes.Requireable<string>;
@@ -1521,4 +1561,5 @@ declare namespace Dashboard {
     };
 }
 import PropTypes from "prop-types";
+import React from "react";
 //# sourceMappingURL=index.d.ts.map

package/es/template/common/search-page/index.d.ts

@@ -200,7 +200,7 @@ declare namespace SearchPage {
                     'data-name': PropTypes.Requireable<string>;
                     titleSize: PropTypes.Requireable<string>;
                     subtitleSize: PropTypes.Requireable<string>;
-                    icon: PropTypes.Requireable<PropTypes.InferProps<any>>;
+                    icon: PropTypes.Requireable<PropTypes.InferProps<PropTypes.ValidationMap<any>>>;
                     tag: PropTypes.Requireable<PropTypes.InferProps<{
                         label: PropTypes.Requireable<string>;
                         type: PropTypes.Requireable<string>;
@@ -208,7 +208,17 @@ declare namespace SearchPage {
                         customStyle: PropTypes.Requireable<{
                             [x: string]: NonNullable<string | number | null | undefined> | null | undefined;
                         }>;
-                        icon: PropTypes.Requireable<PropTypes.InferProps<any>>;
+                        icon: PropTypes.Requireable<PropTypes.InferProps<{
+                            position: PropTypes.Requireable<string>;
+                            iconName?: React.Validator<string> | undefined;
+                            iconColor?: React.Validator<string | null | undefined> | undefined;
+                            backgroundColor?: React.Validator<string | null | undefined> | undefined;
+                            gradientBackground?: React.Validator<boolean | null | undefined> | undefined;
+                            borderRadius?: React.Validator<string | null | undefined> | undefined;
+                            preset?: React.Validator<string | null | undefined> | undefined;
+                            size?: React.Validator<import("../../../atom/icon").IconSize | null | undefined> | undefined;
+                            customStyle?: React.Validator<React.CSSProperties | null | undefined> | undefined;
+                        }>>;
                     }>>;
                     button: PropTypes.Requireable<PropTypes.InferProps<{
                         type: PropTypes.Requireable<string>;
@@ -295,8 +305,8 @@ declare namespace SearchPage {
                 borderRadius: PropTypes.Requireable<string>;
                 preset: PropTypes.Requireable<string>;
                 size: PropTypes.Requireable<PropTypes.InferProps<{
-                    faSize: PropTypes.Requireable<number>;
-                    wrapperSize: PropTypes.Requireable<number>;
+                    faSize: PropTypes.Validator<number>;
+                    wrapperSize: PropTypes.Validator<number>;
                 }>>;
                 customStyle: PropTypes.Requireable<{
                     [x: string]: NonNullable<string | number | null | undefined> | null | undefined;
@@ -734,7 +744,7 @@ declare namespace SearchPage {
                         'data-name': PropTypes.Requireable<string>;
                         titleSize: PropTypes.Requireable<string>;
                         subtitleSize: PropTypes.Requireable<string>;
-                        icon: PropTypes.Requireable<PropTypes.InferProps<any>>;
+                        icon: PropTypes.Requireable<PropTypes.InferProps<PropTypes.ValidationMap<any>>>;
                         tag: PropTypes.Requireable<PropTypes.InferProps<{
                             label: PropTypes.Requireable<string>;
                             type: PropTypes.Requireable<string>;
@@ -742,7 +752,17 @@ declare namespace SearchPage {
                             customStyle: PropTypes.Requireable<{
                                 [x: string]: NonNullable<string | number | null | undefined> | null | undefined;
                             }>;
-                            icon: PropTypes.Requireable<PropTypes.InferProps<any>>;
+                            icon: PropTypes.Requireable<PropTypes.InferProps<{
+                                position: PropTypes.Requireable<string>;
+                                iconName?: React.Validator<string> | undefined;
+                                iconColor?: React.Validator<string | null | undefined> | undefined;
+                                backgroundColor?: React.Validator<string | null | undefined> | undefined;
+                                gradientBackground?: React.Validator<boolean | null | undefined> | undefined;
+                                borderRadius?: React.Validator<string | null | undefined> | undefined;
+                                preset?: React.Validator<string | null | undefined> | undefined;
+                                size?: React.Validator<import("../../../atom/icon").IconSize | null | undefined> | undefined;
+                                customStyle?: React.Validator<React.CSSProperties | null | undefined> | undefined;
+                            }>>;
                         }>>;
                         button: PropTypes.Requireable<PropTypes.InferProps<{
                             type: PropTypes.Requireable<string>;
@@ -945,4 +965,5 @@ declare namespace SearchPage {
     }
 }
 import PropTypes from "prop-types";
+import React from "react";
 //# sourceMappingURL=index.d.ts.map

package/es/template/external-course/index.d.ts

@@ -37,7 +37,7 @@ declare namespace ExternalCourse {
                     'data-name': PropTypes.Requireable<string>;
                     titleSize: PropTypes.Requireable<string>;
                     subtitleSize: PropTypes.Requireable<string>;
-                    icon: PropTypes.Requireable<PropTypes.InferProps<any>>;
+                    icon: PropTypes.Requireable<PropTypes.InferProps<PropTypes.ValidationMap<any>>>;
                     tag: PropTypes.Requireable<PropTypes.InferProps<{
                         label: PropTypes.Requireable<string>;
                         type: PropTypes.Requireable<string>;
@@ -45,7 +45,17 @@ declare namespace ExternalCourse {
                         customStyle: PropTypes.Requireable<{
                             [x: string]: NonNullable<string | number | null | undefined> | null | undefined;
                         }>;
-                        icon: PropTypes.Requireable<PropTypes.InferProps<any>>;
+                        icon: PropTypes.Requireable<PropTypes.InferProps<{
+                            position: PropTypes.Requireable<string>;
+                            iconName?: React.Validator<string> | undefined;
+                            iconColor?: React.Validator<string | null | undefined> | undefined;
+                            backgroundColor?: React.Validator<string | null | undefined> | undefined;
+                            gradientBackground?: React.Validator<boolean | null | undefined> | undefined;
+                            borderRadius?: React.Validator<string | null | undefined> | undefined;
+                            preset?: React.Validator<string | null | undefined> | undefined;
+                            size?: React.Validator<import("../../atom/icon").IconSize | null | undefined> | undefined;
+                            customStyle?: React.Validator<React.CSSProperties | null | undefined> | undefined;
+                        }>>;
                     }>>;
                     button: PropTypes.Requireable<PropTypes.InferProps<{
                         type: PropTypes.Requireable<string>;
@@ -132,8 +142,8 @@ declare namespace ExternalCourse {
                 borderRadius: PropTypes.Requireable<string>;
                 preset: PropTypes.Requireable<string>;
                 size: PropTypes.Requireable<PropTypes.InferProps<{
-                    faSize: PropTypes.Requireable<number>;
-                    wrapperSize: PropTypes.Requireable<number>;
+                    faSize: PropTypes.Validator<number>;
+                    wrapperSize: PropTypes.Validator<number>;
                 }>>;
                 customStyle: PropTypes.Requireable<{
                     [x: string]: NonNullable<string | number | null | undefined> | null | undefined;
@@ -571,7 +581,7 @@ declare namespace ExternalCourse {
                         'data-name': PropTypes.Requireable<string>;
                         titleSize: PropTypes.Requireable<string>;
                         subtitleSize: PropTypes.Requireable<string>;
-                        icon: PropTypes.Requireable<PropTypes.InferProps<any>>;
+                        icon: PropTypes.Requireable<PropTypes.InferProps<PropTypes.ValidationMap<any>>>;
                         tag: PropTypes.Requireable<PropTypes.InferProps<{
                             label: PropTypes.Requireable<string>;
                             type: PropTypes.Requireable<string>;
@@ -579,7 +589,17 @@ declare namespace ExternalCourse {
                             customStyle: PropTypes.Requireable<{
                                 [x: string]: NonNullable<string | number | null | undefined> | null | undefined;
                             }>;
-                            icon: PropTypes.Requireable<PropTypes.InferProps<any>>;
+                            icon: PropTypes.Requireable<PropTypes.InferProps<{
+                                position: PropTypes.Requireable<string>;
+                                iconName?: React.Validator<string> | undefined;
+                                iconColor?: React.Validator<string | null | undefined> | undefined;
+                                backgroundColor?: React.Validator<string | null | undefined> | undefined;
+                                gradientBackground?: React.Validator<boolean | null | undefined> | undefined;
+                                borderRadius?: React.Validator<string | null | undefined> | undefined;
+                                preset?: React.Validator<string | null | undefined> | undefined;
+                                size?: React.Validator<import("../../atom/icon").IconSize | null | undefined> | undefined;
+                                customStyle?: React.Validator<React.CSSProperties | null | undefined> | undefined;
+                            }>>;
                         }>>;
                         button: PropTypes.Requireable<PropTypes.InferProps<{
                             type: PropTypes.Requireable<string>;
@@ -805,4 +825,5 @@ declare namespace ExternalCourse {
     }
 }
 import PropTypes from "prop-types";
+import React from "react";
 //# sourceMappingURL=index.d.ts.map

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

@@ -46,7 +46,6 @@ declare namespace MyLearning {
         const learnerFeature: PropTypes.Requireable<boolean>;
         const isLoading: PropTypes.Requireable<boolean>;
         const onSkillFocusConfirm: PropTypes.Requireable<(...args: any[]) => any>;
-        const onReviewSkill: PropTypes.Requireable<(...args: any[]) => any>;
         const onExploreSkill: PropTypes.Requireable<(...args: any[]) => any>;
         const learningPriorities: PropTypes.Requireable<PropTypes.InferProps<{
             contentType: PropTypes.Requireable<string>;

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,mEA+ZC"}
+{"version":3,"file":"index.d.ts","sourceRoot":"","sources":["../../../src/template/my-learning/index.js"],"names":[],"mappings":";AAmHA,mEAwZC"}

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

@@ -27,7 +27,9 @@ import searchValueIncluded from '../../util/search-value-included';
 import { formatMinutes } from '../../util/time-format';
 import CardsList from '../../molecule/dashboard/cards-list';
 import Title from '../../atom/title';
+import { COLORS } from '../../variables/colors';
 import style from './style.css';
+const roundScore = value => Math.round(value * 10) / 10;
 const ChangeSkillFocusButton = (props, context) => {
   const {
     onClick
@@ -46,7 +48,7 @@ const ChangeSkillFocusButton = (props, context) => {
       transition: 'background-color 0.15s ease-in-out, color 0.15s ease-in-out'
     },
     hoverBackgroundColor: primarySkinColor,
-    hoverColor: "#FFFFFF",
+    hoverColor: COLORS.white,
     onClick: onClick,
     label: translate('skills_change_focus'),
     "data-name": "change-skill-focus-button",
@@ -82,14 +84,14 @@ const FilterButton = (props, context) => {
   const Content = useCallback(() => /*#__PURE__*/React.createElement("div", null, filter, /*#__PURE__*/React.createElement("span", {
     className: active ? style.skillFilterNumber : style.skillFilterNumberInActive,
     style: {
-      backgroundColor: active ? convert(`color(${primarySkinColor} a(0.07))`) : '#EAEAEB',
-      color: active ? primarySkinColor : '#515161'
+      backgroundColor: active ? convert(`color(${primarySkinColor} a(0.07))`) : COLORS.gray,
+      color: active ? primarySkinColor : COLORS.cm_grey_500
     }
   }, skillTotal)), [filter, skillTotal, active, primarySkinColor]);
   const buttonProps = {
     customStyle: {
-      backgroundColor: active ? convert(`color(${primarySkinColor} a(0.07))`) : '#FFFFFF',
-      color: active ? primarySkinColor : '#9999A8',
+      backgroundColor: active ? convert(`color(${primarySkinColor} a(0.07))`) : COLORS.white,
+      color: active ? primarySkinColor : COLORS.cm_grey_400,
       transition: 'background-color 0.15s ease-in-out, color 0.15s ease-in-out',
       width: 'fit-content'
     },
@@ -118,7 +120,6 @@ const MyLearning = (props, context) => {
     learnerFeature = true,
     isLoading,
     onSkillFocusConfirm,
-    onReviewSkill,
     onExploreSkill,
     learningPriorities
   } = props;
@@ -136,7 +137,7 @@ const MyLearning = (props, context) => {
   const skillsReviewReady = useMemo(() => {
     return searchResults.filter(skill => skillsInformation[skill] ? skillsInformation[skill].availableForReview : false);
   }, [searchResults, skillsInformation]);
-  const graphDatas = useMemo(() => _pipe(_map(skill => [skill, _getOr(0, [skill, 'stats', 'score'], skillsInformation).toFixed(1)]), _fromPairs)(selectedSkillsList), [selectedSkillsList, skillsInformation]);
+  const graphDatas = useMemo(() => _pipe(_map(skill => [skill, roundScore(_getOr(0, [skill, 'stats', 'score'], skillsInformation))]), _fromPairs)(selectedSkillsList), [selectedSkillsList, skillsInformation]);
   const graphLegends = useMemo(() => _pipe(_map(skill => [skill, skillsLocales[skill]]), _fromPairs)(selectedSkillsList), [selectedSkillsList, skillsLocales]);
   const filters = useMemo(() => {
     return {
@@ -160,7 +161,7 @@ const MyLearning = (props, context) => {
     legend: skillChartPaneLegends,
     icon: {
       iconName: 'book-open-cover',
-      backgroundColor: '#D9F4F7'
+      backgroundColor: COLORS.turquoise_100
     }
   }, {
     title: translate('skill_chart_side_panel_learning_hours'),
@@ -168,7 +169,7 @@ const MyLearning = (props, context) => {
     legend: skillChartPaneLegends,
     icon: {
       iconName: 'clock',
-      backgroundColor: '#FAD6DE'
+      backgroundColor: COLORS.pink_100
     }
   }, {
     title: translate('skill_chart_side_panel_questions_to_review'),
@@ -176,7 +177,7 @@ const MyLearning = (props, context) => {
     legend: skillChartPaneLegends,
     icon: {
       iconName: 'circle-question',
-      backgroundColor: '#FFDCD1'
+      backgroundColor: COLORS.orange_100
     }
   }];
   const skillsScore = useMemo(() => _pipe(_map(skill => [skill, _getOr(0, [skill, 'stats', 'score'], skillsInformation)]), _fromPairs)(skills), [skills, skillsInformation]);
@@ -210,9 +211,9 @@ const MyLearning = (props, context) => {
       subtitle: translate('learning_priorities_description'),
       icon: {
         iconName: 'sign-post',
-        iconColor: '#A32700',
+        iconColor: COLORS.cm_orange_800,
         borderRadius: '12px',
-        backgroundColor: '#FFDCD1'
+        backgroundColor: COLORS.orange_100
       },
       tag: {
         label: `${_size(learningPriorities.cards)}`,
@@ -243,7 +244,7 @@ const MyLearning = (props, context) => {
     className: style.skillFocusHeaderIcon
   }, /*#__PURE__*/React.createElement(Icon, {
     iconName: "bullseye-arrow",
-    backgroundColor: "#DDD1FF",
+    backgroundColor: COLORS.purple_100,
     borderRadius: "12px",
     size: {
       faSize: 20,
@@ -311,7 +312,7 @@ const MyLearning = (props, context) => {
     className: style.skillListHeaderIcon
   }, /*#__PURE__*/React.createElement(Icon, {
     iconName: "dumbbell",
-    backgroundColor: "#FFF9D1",
+    backgroundColor: COLORS.yellow_100,
     size: {
       faSize: 20,
       wrapperSize: 48
@@ -366,7 +367,7 @@ const MyLearning = (props, context) => {
     onClick: handleSearchReset
   }, translate('empty_search_result_clear_search'))) : /*#__PURE__*/React.createElement("div", {
     className: style.skillListContainer
-  }, activeFilter === 'review_mode_available' && filters[activeFilter].length === 0 ? /*#__PURE__*/React.createElement("div", {
+  }, activeFilter === 'review' && filters[activeFilter].length === 0 ? /*#__PURE__*/React.createElement("div", {
     className: style.skillListEmptyContainer
   }, /*#__PURE__*/React.createElement(ReviewNoSkills, {
     titleNoSkills: translate('review_skill_empty'),
@@ -380,9 +381,6 @@ const MyLearning = (props, context) => {
       contentCompleted: 0,
       questionsToReview: 0
     };
-    function handleReviewSkill() {
-      onReviewSkill(skill);
-    }
     function handleExploreSkill() {
       onExploreSkill(skill);
     }
@@ -391,18 +389,25 @@ const MyLearning = (props, context) => {
       content,
       questionsToReview
     } = skillsInformation[skill] ? skillsInformation[skill].stats : defaultStats;
+    const {
+      color,
+      name
+    } = _get([skill, 'icon'], skillsInformation);
     return /*#__PURE__*/React.createElement("div", {
       key: index
     }, /*#__PURE__*/React.createElement(LearnerSkillCard, {
       skillTitle: skillsLocales[skill],
+      cardIndex: index,
       focus: selectedSkills.includes(skill),
       metrics: {
-        score: score.toFixed(1),
+        score,
         content,
         questionsToReview
       },
-      review: skillsInformation[skill] ? skillsInformation[skill].availableForReview : false,
-      onReviewClick: handleReviewSkill,
+      icon: {
+        color,
+        name
+      },
       onExploreClick: handleExploreSkill
     }));
   }))));
@@ -428,7 +433,6 @@ MyLearning.propTypes = process.env.NODE_ENV !== "production" ? {
   learnerFeature: PropTypes.bool,
   isLoading: PropTypes.bool,
   onSkillFocusConfirm: PropTypes.func,
-  onReviewSkill: PropTypes.func,
   onExploreSkill: PropTypes.func,
   learningPriorities: PropTypes.shape(CardsList.propTypes)
 } : {};