@coorpacademy/components 11.32.7 → 11.32.8

package/lib/molecule/learner-skill-card/index.js

@@ -38,9 +38,9 @@ const LearnerSkillCard = (props, context) => {
   } = props;
   const {
     score,
-    skillCourses,
-    skillQuestions,
-    completedCourses = 0
+    content,
+    questionsToReview,
+    contentCompleted = 0
   } = metrics;
   const {
     skin,
@@ -53,7 +53,7 @@ const LearnerSkillCard = (props, context) => {
   const coursesLocale = translate('courses');
   const questionsLocale = translate('questions');
   const skillFocusLocale = translate('skill_focus');
-  const coursesCompletedLocale = translate('courses_completed');
+  const contentCompletedLocale = translate('courses_completed');
   const handleMouseOver = (0, _react.useCallback)(() => setHovered(true), [setHovered]);
   const handleMouseLeave = (0, _react.useCallback)(() => setHovered(false), [setHovered]);
   const buttonReviewProps = {
@@ -88,7 +88,7 @@ const LearnerSkillCard = (props, context) => {
     }
   };
   const ProgressBar = (0, _react.useCallback)(() => {
-    if (!skillCourses) return null;
+    if (!content) return null;
     const progressBarColor = '#3EC483';
     const inlineProgressValueStyle = {
       backgroundColor: progressBarColor,
@@ -103,24 +103,24 @@ const LearnerSkillCard = (props, context) => {
       role: "progressbar",
       "aria-label": (0, _get2.default)('progression', ariaLabel)
     }));
-  }, [score, ariaLabel, skillCourses]);
+  }, [score, ariaLabel, content]);
   return /*#__PURE__*/_react.default.createElement("div", {
     className: _style.default.learnerSkillCardWrapper,
     "data-name": "learner-skill-card-wrapper",
     "aria-label": ariaLabel
-  }, skillCourses || skillQuestions ? /*#__PURE__*/_react.default.createElement("div", {
+  }, content || questionsToReview ? /*#__PURE__*/_react.default.createElement("div", {
     className: _style.default.skillCoursesAndQuestionsWrapper
-  }, skillCourses ? /*#__PURE__*/_react.default.createElement("div", {
+  }, content ? /*#__PURE__*/_react.default.createElement("div", {
     className: _style.default.skillInformation,
     "data-name": "skill-courses"
   }, /*#__PURE__*/_react.default.createElement("span", {
     className: _style.default.skillInformationNumber
-  }, skillCourses), " ", coursesLocale) : null, skillQuestions ? /*#__PURE__*/_react.default.createElement("div", {
+  }, content), " ", coursesLocale) : null, questionsToReview ? /*#__PURE__*/_react.default.createElement("div", {
     className: _style.default.skillInformation,
     "data-name": "skill-questions"
   }, /*#__PURE__*/_react.default.createElement("span", {
     className: _style.default.skillInformationNumber
-  }, skillQuestions), "\xA0", questionsLocale) : null) : null, /*#__PURE__*/_react.default.createElement("div", {
+  }, questionsToReview), "\xA0", questionsLocale) : null) : null, /*#__PURE__*/_react.default.createElement("div", {
     className: _style.default.skillTitleWrapper
   }, /*#__PURE__*/_react.default.createElement("div", {
     "data-name": "skill-title",
@@ -137,12 +137,12 @@ const LearnerSkillCard = (props, context) => {
     }
   }), skillFocusLocale) : null), /*#__PURE__*/_react.default.createElement(ProgressBar, null), /*#__PURE__*/_react.default.createElement("div", {
     className: _style.default.progressInformations
-  }, skillCourses && /*#__PURE__*/_react.default.createElement(_react.default.Fragment, null, /*#__PURE__*/_react.default.createElement("div", {
+  }, content && /*#__PURE__*/_react.default.createElement(_react.default.Fragment, null, /*#__PURE__*/_react.default.createElement("div", {
     className: _style.default.progressInformation,
     "data-name": "skill-completed-courses"
   }, /*#__PURE__*/_react.default.createElement("span", {
     className: _style.default.progressInformationNumber
-  }, completedCourses), ` ${coursesCompletedLocale}`), /*#__PURE__*/_react.default.createElement("div", {
+  }, contentCompleted), ` ${contentCompletedLocale}`), /*#__PURE__*/_react.default.createElement("div", {
     className: _style.default.progressInformation,
     "data-name": "completed-percentage"
   }, /*#__PURE__*/_react.default.createElement("span", {
@@ -169,9 +169,9 @@ LearnerSkillCard.propTypes = process.env.NODE_ENV !== "production" ? {
   focus: _propTypes.default.bool,
   metrics: _propTypes.default.shape({
     score: _propTypes.default.number,
-    skillCourses: _propTypes.default.number,
-    skillQuestions: _propTypes.default.number,
-    completedCourses: _propTypes.default.number
+    content: _propTypes.default.number,
+    questionsToReview: _propTypes.default.number,
+    contentCompleted: _propTypes.default.number
   }),
   review: _propTypes.default.bool,
   onReviewClick: _propTypes.default.func,

package/lib/molecule/learner-skill-card/index.js.map

@@ -1 +1 @@
-{"version":3,"file":"index.js","names":["LearnerSkillCard","props","context","ariaLabel","skillTitle","skillAriaLabel","focus","metrics","review","onReviewClick","onExploreClick","score","skillCourses","skillQuestions","completedCourses","skin","translate","hovered","setHovered","useState","primarySkinColor","reviewLocale","exploreLocale","coursesLocale","questionsLocale","skillFocusLocale","coursesCompletedLocale","handleMouseOver","useCallback","handleMouseLeave","buttonReviewProps","customStyle","backgroundColor","transition","disabled","onClick","label","buttonExploreProps","convert","color","icon","position","faIcon","name","size","ProgressBar","progressBarColor","inlineProgressValueStyle","width","style","progressWrapper","progress","learnerSkillCardWrapper","skillCoursesAndQuestionsWrapper","skillInformation","skillInformationNumber","skillTitleWrapper","skillFocusBadge","faSize","wrapperSize","progressInformations","progressInformation","progressInformationNumber","ctaWrapper","buttonWrapper","contextTypes","Provider","childContextTypes","propTypes","PropTypes","string","bool","shape","number","func"],"sources":["../../../src/molecule/learner-skill-card/index.js"],"sourcesContent":["import React, {useCallback, useState} from 'react';\nimport {convert} from 'css-color-function';\nimport {get} from 'lodash/fp';\nimport PropTypes from 'prop-types';\nimport Icon from '../../atom/icon';\nimport ButtonLink from '../../atom/button-link';\nimport Provider from '../../atom/provider';\nimport style from './style.css';\n\nconst LearnerSkillCard = (props, context) => {\n  const {\n    'aria-label': ariaLabel,\n    skillTitle,\n    skillAriaLabel,\n    focus = false,\n    metrics,\n    review = false,\n    onReviewClick,\n    onExploreClick\n  } = props;\n  const {score, skillCourses, skillQuestions, completedCourses = 0} = metrics;\n  const {skin, translate} = context;\n  const [hovered, setHovered] = useState(false);\n  const primarySkinColor = get('common.primary', skin);\n\n  const reviewLocale = translate('Review');\n  const exploreLocale = translate('Explore');\n  const coursesLocale = translate('courses');\n  const questionsLocale = translate('questions');\n  const skillFocusLocale = translate('skill_focus');\n  const coursesCompletedLocale = translate('courses_completed');\n\n  const handleMouseOver = useCallback(() => setHovered(true), [setHovered]);\n\n  const handleMouseLeave = useCallback(() => setHovered(false), [setHovered]);\n\n  const buttonReviewProps = {\n    customStyle: {\n      backgroundColor: '#FFF',\n      transition: 'background-color 0.15s ease-in-out, color 0.15s ease-in-out'\n    },\n    disabled: !review,\n    onClick: onReviewClick,\n    'aria-label': `${skillTitle}, ${reviewLocale}`,\n    label: reviewLocale,\n    'data-name': 'learner-skill-card-review-button'\n  };\n\n  const buttonExploreProps = {\n    customStyle: {\n      backgroundColor: hovered ? primarySkinColor : 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: onExploreClick,\n    'aria-label': `${skillTitle}, ${exploreLocale}`,\n    label: exploreLocale,\n    'data-name': 'learner-skill-card-explore-button',\n    icon: {\n      position: 'left',\n      faIcon: {\n        name: 'compass',\n        backgroundColor: hovered ? primarySkinColor : convert(`color(${primarySkinColor} a(0.07))`),\n        color: hovered ? '#FFFFFF' : primarySkinColor,\n        size: 16\n      }\n    }\n  };\n\n  const ProgressBar = useCallback(() => {\n    if (!skillCourses) return null;\n\n    const progressBarColor = '#3EC483';\n    const inlineProgressValueStyle = {\n      backgroundColor: progressBarColor,\n      width: `${score}%`\n    };\n\n    return (\n      <div className={style.progressWrapper}>\n        <div\n          data-name=\"progress\"\n          className={style.progress}\n          style={inlineProgressValueStyle}\n          role=\"progressbar\"\n          aria-label={get('progression', ariaLabel)}\n        />\n      </div>\n    );\n  }, [score, ariaLabel, skillCourses]);\n\n  return (\n    <div\n      className={style.learnerSkillCardWrapper}\n      data-name=\"learner-skill-card-wrapper\"\n      aria-label={ariaLabel}\n    >\n      {skillCourses || skillQuestions ? (\n        <div className={style.skillCoursesAndQuestionsWrapper}>\n          {skillCourses ? (\n            <div className={style.skillInformation} data-name=\"skill-courses\">\n              <span className={style.skillInformationNumber}>{skillCourses}</span> {coursesLocale}\n            </div>\n          ) : null}\n          {skillQuestions ? (\n            <div className={style.skillInformation} data-name=\"skill-questions\">\n              <span className={style.skillInformationNumber}>{skillQuestions}</span>\n              &nbsp;{questionsLocale}\n            </div>\n          ) : null}\n        </div>\n      ) : null}\n      <div className={style.skillTitleWrapper}>\n        <div\n          data-name=\"skill-title\"\n          className={style.skillTitle}\n          aria-label={skillAriaLabel || skillTitle}\n        >\n          {skillTitle}\n        </div>\n        {focus ? (\n          <div className={style.skillFocusBadge}>\n            <Icon\n              iconName=\"bullseye-arrow\"\n              backgroundColor=\"#DDD1FF\"\n              size={{\n                faSize: 10,\n                wrapperSize: 16\n              }}\n            />\n            {skillFocusLocale}\n          </div>\n        ) : null}\n      </div>\n      <ProgressBar />\n      <div className={style.progressInformations}>\n        {skillCourses && (\n          <>\n            <div className={style.progressInformation} data-name=\"skill-completed-courses\">\n              <span className={style.progressInformationNumber}>{completedCourses}</span>\n              {` ${coursesCompletedLocale}`}\n            </div>\n            <div className={style.progressInformation} data-name=\"completed-percentage\">\n              <span className={style.progressInformationNumber}>{score}%</span>\n            </div>\n          </>\n        )}\n      </div>\n      <div className={style.ctaWrapper} data-name=\"cta-wrapper\">\n        <ButtonLink {...buttonReviewProps} />\n        <div\n          className={style.buttonWrapper}\n          onMouseOver={handleMouseOver}\n          onMouseLeave={handleMouseLeave}\n          data-name=\"button-explore-wrapper\"\n        >\n          <ButtonLink {...buttonExploreProps} />\n        </div>\n      </div>\n    </div>\n  );\n};\n\nLearnerSkillCard.contextTypes = {\n  skin: Provider.childContextTypes.skin,\n  translate: Provider.childContextTypes.translate\n};\n\nLearnerSkillCard.propTypes = {\n  'aria-label': PropTypes.string,\n  skillTitle: PropTypes.string,\n  skillAriaLabel: PropTypes.string,\n  focus: PropTypes.bool,\n  metrics: PropTypes.shape({\n    score: PropTypes.number,\n    skillCourses: PropTypes.number,\n    skillQuestions: PropTypes.number,\n    completedCourses: PropTypes.number\n  }),\n  review: PropTypes.bool,\n  onReviewClick: PropTypes.func,\n  onExploreClick: PropTypes.func\n};\n\nexport default LearnerSkillCard;\n"],"mappings":"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"}
+{"version":3,"file":"index.js","names":["LearnerSkillCard","props","context","ariaLabel","skillTitle","skillAriaLabel","focus","metrics","review","onReviewClick","onExploreClick","score","content","questionsToReview","contentCompleted","skin","translate","hovered","setHovered","useState","primarySkinColor","reviewLocale","exploreLocale","coursesLocale","questionsLocale","skillFocusLocale","contentCompletedLocale","handleMouseOver","useCallback","handleMouseLeave","buttonReviewProps","customStyle","backgroundColor","transition","disabled","onClick","label","buttonExploreProps","convert","color","icon","position","faIcon","name","size","ProgressBar","progressBarColor","inlineProgressValueStyle","width","style","progressWrapper","progress","learnerSkillCardWrapper","skillCoursesAndQuestionsWrapper","skillInformation","skillInformationNumber","skillTitleWrapper","skillFocusBadge","faSize","wrapperSize","progressInformations","progressInformation","progressInformationNumber","ctaWrapper","buttonWrapper","contextTypes","Provider","childContextTypes","propTypes","PropTypes","string","bool","shape","number","func"],"sources":["../../../src/molecule/learner-skill-card/index.js"],"sourcesContent":["import React, {useCallback, useState} from 'react';\nimport {convert} from 'css-color-function';\nimport {get} from 'lodash/fp';\nimport PropTypes from 'prop-types';\nimport Icon from '../../atom/icon';\nimport ButtonLink from '../../atom/button-link';\nimport Provider from '../../atom/provider';\nimport style from './style.css';\n\nconst LearnerSkillCard = (props, context) => {\n  const {\n    'aria-label': ariaLabel,\n    skillTitle,\n    skillAriaLabel,\n    focus = false,\n    metrics,\n    review = false,\n    onReviewClick,\n    onExploreClick\n  } = props;\n  const {score, content, questionsToReview, contentCompleted = 0} = metrics;\n  const {skin, translate} = context;\n  const [hovered, setHovered] = useState(false);\n  const primarySkinColor = get('common.primary', skin);\n\n  const reviewLocale = translate('Review');\n  const exploreLocale = translate('Explore');\n  const coursesLocale = translate('courses');\n  const questionsLocale = translate('questions');\n  const skillFocusLocale = translate('skill_focus');\n  const contentCompletedLocale = translate('courses_completed');\n\n  const handleMouseOver = useCallback(() => setHovered(true), [setHovered]);\n\n  const handleMouseLeave = useCallback(() => setHovered(false), [setHovered]);\n\n  const buttonReviewProps = {\n    customStyle: {\n      backgroundColor: '#FFF',\n      transition: 'background-color 0.15s ease-in-out, color 0.15s ease-in-out'\n    },\n    disabled: !review,\n    onClick: onReviewClick,\n    'aria-label': `${skillTitle}, ${reviewLocale}`,\n    label: reviewLocale,\n    'data-name': 'learner-skill-card-review-button'\n  };\n\n  const buttonExploreProps = {\n    customStyle: {\n      backgroundColor: hovered ? primarySkinColor : 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: onExploreClick,\n    'aria-label': `${skillTitle}, ${exploreLocale}`,\n    label: exploreLocale,\n    'data-name': 'learner-skill-card-explore-button',\n    icon: {\n      position: 'left',\n      faIcon: {\n        name: 'compass',\n        backgroundColor: hovered ? primarySkinColor : convert(`color(${primarySkinColor} a(0.07))`),\n        color: hovered ? '#FFFFFF' : primarySkinColor,\n        size: 16\n      }\n    }\n  };\n\n  const ProgressBar = useCallback(() => {\n    if (!content) return null;\n\n    const progressBarColor = '#3EC483';\n    const inlineProgressValueStyle = {\n      backgroundColor: progressBarColor,\n      width: `${score}%`\n    };\n\n    return (\n      <div className={style.progressWrapper}>\n        <div\n          data-name=\"progress\"\n          className={style.progress}\n          style={inlineProgressValueStyle}\n          role=\"progressbar\"\n          aria-label={get('progression', ariaLabel)}\n        />\n      </div>\n    );\n  }, [score, ariaLabel, content]);\n\n  return (\n    <div\n      className={style.learnerSkillCardWrapper}\n      data-name=\"learner-skill-card-wrapper\"\n      aria-label={ariaLabel}\n    >\n      {content || questionsToReview ? (\n        <div className={style.skillCoursesAndQuestionsWrapper}>\n          {content ? (\n            <div className={style.skillInformation} data-name=\"skill-courses\">\n              <span className={style.skillInformationNumber}>{content}</span> {coursesLocale}\n            </div>\n          ) : null}\n          {questionsToReview ? (\n            <div className={style.skillInformation} data-name=\"skill-questions\">\n              <span className={style.skillInformationNumber}>{questionsToReview}</span>\n              &nbsp;{questionsLocale}\n            </div>\n          ) : null}\n        </div>\n      ) : null}\n      <div className={style.skillTitleWrapper}>\n        <div\n          data-name=\"skill-title\"\n          className={style.skillTitle}\n          aria-label={skillAriaLabel || skillTitle}\n        >\n          {skillTitle}\n        </div>\n        {focus ? (\n          <div className={style.skillFocusBadge}>\n            <Icon\n              iconName=\"bullseye-arrow\"\n              backgroundColor=\"#DDD1FF\"\n              size={{\n                faSize: 10,\n                wrapperSize: 16\n              }}\n            />\n            {skillFocusLocale}\n          </div>\n        ) : null}\n      </div>\n      <ProgressBar />\n      <div className={style.progressInformations}>\n        {content && (\n          <>\n            <div className={style.progressInformation} data-name=\"skill-completed-courses\">\n              <span className={style.progressInformationNumber}>{contentCompleted}</span>\n              {` ${contentCompletedLocale}`}\n            </div>\n            <div className={style.progressInformation} data-name=\"completed-percentage\">\n              <span className={style.progressInformationNumber}>{score}%</span>\n            </div>\n          </>\n        )}\n      </div>\n      <div className={style.ctaWrapper} data-name=\"cta-wrapper\">\n        <ButtonLink {...buttonReviewProps} />\n        <div\n          className={style.buttonWrapper}\n          onMouseOver={handleMouseOver}\n          onMouseLeave={handleMouseLeave}\n          data-name=\"button-explore-wrapper\"\n        >\n          <ButtonLink {...buttonExploreProps} />\n        </div>\n      </div>\n    </div>\n  );\n};\n\nLearnerSkillCard.contextTypes = {\n  skin: Provider.childContextTypes.skin,\n  translate: Provider.childContextTypes.translate\n};\n\nLearnerSkillCard.propTypes = {\n  'aria-label': PropTypes.string,\n  skillTitle: PropTypes.string,\n  skillAriaLabel: PropTypes.string,\n  focus: PropTypes.bool,\n  metrics: PropTypes.shape({\n    score: PropTypes.number,\n    content: PropTypes.number,\n    questionsToReview: PropTypes.number,\n    contentCompleted: PropTypes.number\n  }),\n  review: PropTypes.bool,\n  onReviewClick: PropTypes.func,\n  onExploreClick: PropTypes.func\n};\n\nexport default LearnerSkillCard;\n"],"mappings":"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"}

package/lib/molecule/select-multiple/test/snapshots/index.js.md

@@ -0,0 +1,211 @@
+# Snapshot report for `src/molecule/select-multiple/test/index.js`
+
+The actual snapshot is saved in `index.js.snap`.
+
+Generated by [AVA](https://ava.li).
+
+## should shallow render when select is opened
+
+> Snapshot 1
+
+    ShallowWrapper {
+      <div
+        className="select-multiple__default variables__defaultText"
+      >
+        <span
+          className="select-multiple__title"
+        >
+          Learning Path:
+        </span>
+        <div
+          className="select-multiple__select"
+          onClick={Function {}}
+          title="Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut"
+        >
+          Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut
+          <SvgComponent⍟
+            className="select-multiple__arrow select-multiple__down"
+            color={undefined}
+          />
+        </div>
+        <div
+          className="select-multiple__activeChoices"
+        >
+          <ul
+            className="select-multiple__list"
+          >
+            <li
+              className="select-multiple__choice"
+              key="0"
+            >
+              <TitledCheckbox⍟
+                background={undefined}
+                choice={
+                  {
+                    i: 0,
+                    name: 'Digital',
+                    selected: false,
+                    value: 'digital',
+                  }
+                }
+                onToggle={Function {}}
+              />
+            </li>
+            <li
+              className="select-multiple__choice"
+              key="1"
+            >
+              <TitledCheckbox⍟
+                background={undefined}
+                choice={
+                  {
+                    i: 1,
+                    name: 'Esprit du temps',
+                    selected: false,
+                    value: 'espritDuTemps',
+                  }
+                }
+                onToggle={Function {}}
+              />
+            </li>
+            <li
+              className="select-multiple__choice"
+              key="2"
+            >
+              <TitledCheckbox⍟
+                background={undefined}
+                choice={
+                  {
+                    i: 2,
+                    name: 'Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut',
+                    selected: true,
+                    value: 'loremIpsum',
+                  }
+                }
+                onToggle={Function {}}
+              />
+            </li>
+            <li
+              className="select-multiple__choice"
+              key="3"
+            >
+              <TitledCheckbox⍟
+                background={undefined}
+                choice={
+                  {
+                    i: 3,
+                    name: 'Le monde du projet',
+                    selected: false,
+                    value: 'project',
+                  }
+                }
+                onToggle={Function {}}
+              />
+            </li>
+          </ul>
+        </div>
+      </div>,
+    }
+
+## should shallow render with default props
+
+> Snapshot 1
+
+    ShallowWrapper {
+      <div
+        className="select-multiple__default variables__defaultText"
+      >
+        <span
+          className="select-multiple__title"
+        >
+          Learning Path:
+        </span>
+        <div
+          className="select-multiple__select"
+          onClick={Function {}}
+          title="Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut"
+        >
+          Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut
+          <SvgComponent⍟
+            className="select-multiple__arrow"
+            color={undefined}
+          />
+        </div>
+        <div
+          className="select-multiple__choices"
+        >
+          <ul
+            className="select-multiple__list"
+          >
+            <li
+              className="select-multiple__choice"
+              key="0"
+            >
+              <TitledCheckbox⍟
+                background={undefined}
+                choice={
+                  {
+                    i: 0,
+                    name: 'Digital',
+                    selected: false,
+                    value: 'digital',
+                  }
+                }
+                onToggle={Function {}}
+              />
+            </li>
+            <li
+              className="select-multiple__choice"
+              key="1"
+            >
+              <TitledCheckbox⍟
+                background={undefined}
+                choice={
+                  {
+                    i: 1,
+                    name: 'Esprit du temps',
+                    selected: false,
+                    value: 'espritDuTemps',
+                  }
+                }
+                onToggle={Function {}}
+              />
+            </li>
+            <li
+              className="select-multiple__choice"
+              key="2"
+            >
+              <TitledCheckbox⍟
+                background={undefined}
+                choice={
+                  {
+                    i: 2,
+                    name: 'Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut',
+                    selected: true,
+                    value: 'loremIpsum',
+                  }
+                }
+                onToggle={Function {}}
+              />
+            </li>
+            <li
+              className="select-multiple__choice"
+              key="3"
+            >
+              <TitledCheckbox⍟
+                background={undefined}
+                choice={
+                  {
+                    i: 3,
+                    name: 'Le monde du projet',
+                    selected: false,
+                    value: 'project',
+                  }
+                }
+                onToggle={Function {}}
+              />
+            </li>
+          </ul>
+        </div>
+      </div>,
+    }

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

@@ -33,10 +33,10 @@ declare namespace MyLearning {
                 availableForReview: PropTypes.Requireable<boolean>;
                 stats: PropTypes.Requireable<PropTypes.InferProps<{
                     score: PropTypes.Requireable<number>;
-                    courses: PropTypes.Requireable<number>;
-                    coursesCompleted: PropTypes.Requireable<number>;
-                    questionsAnswered: PropTypes.Requireable<number>;
-                    learningHours: PropTypes.Requireable<number>;
+                    content: PropTypes.Requireable<number>;
+                    contentCompleted: PropTypes.Requireable<number>;
+                    questionsToReview: PropTypes.Requireable<number>;
+                    learningTime: PropTypes.Requireable<number>;
                 }>>;
             }> | null | undefined;
         }>;

package/lib/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":";AAwHA,mEA2WC"}
+{"version":3,"file":"index.d.ts","sourceRoot":"","sources":["../../../src/template/my-learning/index.js"],"names":[],"mappings":";AAyHA,mEAuWC"}

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

@@ -45,6 +45,8 @@ var _learnerSkillCard = _interopRequireDefault(require("../../molecule/learner-s
 
 var _searchValueIncluded = _interopRequireDefault(require("../../util/search-value-included"));
 
+var _timeFormat = require("../../util/time-format");
+
 var _style = _interopRequireDefault(require("./style.css"));
 
 function _getRequireWildcardCache(nodeInterop) { if (typeof WeakMap !== "function") return null; var cacheBabelInterop = new WeakMap(); var cacheNodeInterop = new WeakMap(); return (_getRequireWildcardCache = function (nodeInterop) { return nodeInterop ? cacheNodeInterop : cacheBabelInterop; })(nodeInterop); }
@@ -180,14 +182,14 @@ const MyLearning = (props, context) => {
     };
   }, [searchResults, skillsReviewReady]);
   const sumKpi = (0, _react.useCallback)(kpi => skillFocusSelectedOnChart ? skillsInformation[skillFocusSelectedOnChart].stats[kpi] : (0, _sumBy2.default)(skill => skillsInformation[skill].stats[kpi], selectedSkillsList), [skillFocusSelectedOnChart, skillsInformation, selectedSkillsList]);
-  const coursedCompletedData = (0, _react.useMemo)(() => sumKpi('coursesCompleted'), [sumKpi]);
-  const questionsAnsweredData = (0, _react.useMemo)(() => sumKpi('questionsAnswered'), [sumKpi]);
-  const learningHoursData = (0, _react.useMemo)(() => sumKpi('learningHours'), [sumKpi]);
+  const coursedCompletedData = (0, _react.useMemo)(() => sumKpi('contentCompleted'), [sumKpi]);
+  const questionsToReviewData = (0, _react.useMemo)(() => sumKpi('questionsToReview'), [sumKpi]);
+  const learningTimeData = (0, _react.useMemo)(() => sumKpi('learningTime'), [sumKpi]);
   const skillChartPaneLegends = (0, _react.useMemo)(() => translate('skill_scope_specifier', {
     focusedSkill: skillFocusSelectedOnChart ? skillsLocales[skillFocusSelectedOnChart] : translate('focused_skills')
   }), [translate, skillsLocales, skillFocusSelectedOnChart]);
   const skillChartPanelProps = [{
-    title: translate('skill_chart_side_panel_courses_completed'),
+    title: translate('skill_chart_side_panel_content_completed'),
     value: `${coursedCompletedData}`,
     legend: skillChartPaneLegends,
     icon: {
@@ -195,20 +197,20 @@ const MyLearning = (props, context) => {
       backgroundColor: '#D9F4F7'
     }
   }, {
-    title: translate('skill_chart_side_panel_questions_answered'),
-    value: `${questionsAnsweredData}`,
+    title: translate('skill_chart_side_panel_learning_hours'),
+    value: (0, _timeFormat.formatMinutes)(learningTimeData),
     legend: skillChartPaneLegends,
     icon: {
-      iconName: 'circle-question',
-      backgroundColor: '#FFDCD1'
+      iconName: 'clock',
+      backgroundColor: '#FAD6DE'
     }
   }, {
-    title: translate('skill_chart_side_panel_learning_hours'),
-    value: `${learningHoursData}`,
+    title: translate('skill_chart_side_panel_questions_to_review'),
+    value: `${questionsToReviewData}`,
     legend: skillChartPaneLegends,
     icon: {
-      iconName: 'clock',
-      backgroundColor: '#FAD6DE'
+      iconName: 'circle-question',
+      backgroundColor: '#FFDCD1'
     }
   }];
   const handleOnDotClick = (0, _react.useCallback)(skillRef => {
@@ -398,9 +400,9 @@ const MyLearning = (props, context) => {
 
     const {
       score,
-      courses: skillCourses,
-      questionsAnswered: skillQuestions,
-      coursesCompleted: completedCourses
+      content,
+      questionsToReview,
+      contentCompleted
     } = skillsInformation[skill].stats;
     return /*#__PURE__*/_react.default.createElement("div", {
       key: index
@@ -409,9 +411,9 @@ const MyLearning = (props, context) => {
       focus: selectedSkills.includes(skill),
       metrics: {
         score,
-        skillCourses,
-        skillQuestions,
-        completedCourses
+        content,
+        questionsToReview,
+        contentCompleted
       },
       review: skillsInformation[skill].availableForReview,
       onReviewClick: handleReviewSkill,
@@ -431,10 +433,10 @@ MyLearning.propTypes = process.env.NODE_ENV !== "production" ? {
     availableForReview: _propTypes.default.bool,
     stats: _propTypes.default.shape({
       score: _propTypes.default.number,
-      courses: _propTypes.default.number,
-      coursesCompleted: _propTypes.default.number,
-      questionsAnswered: _propTypes.default.number,
-      learningHours: _propTypes.default.number
+      content: _propTypes.default.number,
+      contentCompleted: _propTypes.default.number,
+      questionsToReview: _propTypes.default.number,
+      learningTime: _propTypes.default.number
     })
   })),
   skillsLocales: _propTypes.default.objectOf(_propTypes.default.string),