@coorpacademy/components 11.32.41-alpha.2 → 11.32.42

package/es/molecule/learner-skill-card/index.d.ts

@@ -34,7 +34,6 @@ declare namespace LearnerSkillCard {
             score: PropTypes.Requireable<number>;
             content: PropTypes.Requireable<number>;
             questionsToReview: PropTypes.Requireable<number>;
-            contentCompleted: PropTypes.Requireable<number>;
         }>>;
         review: PropTypes.Requireable<boolean>;
         onReviewClick: PropTypes.Requireable<(...args: any[]) => any>;

package/es/molecule/learner-skill-card/index.d.ts.map

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

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

@@ -1,11 +1,14 @@
 import _get from "lodash/fp/get";
-import React, { useCallback } from 'react';
+import React from 'react';
 import { convert } from 'css-color-function';
 import PropTypes from 'prop-types';
 import Icon from '../../atom/icon';
 import ButtonLink from '../../atom/button-link';
 import Provider from '../../atom/provider';
+import ProgressBar from '../progress-bar';
+import { COLORS } from '../../variables/colors';
 import style from './style.css';
+const MAX_SCORE = 100;
 
 const LearnerSkillCard = (props, context) => {
   const {
@@ -21,8 +24,7 @@ const LearnerSkillCard = (props, context) => {
   const {
     score,
     content,
-    questionsToReview,
-    contentCompleted = 0
+    questionsToReview = 0
   } = metrics;
   const {
     skin,
@@ -33,10 +35,8 @@ const LearnerSkillCard = (props, context) => {
 
   const reviewLocale = translate('Review');
   const exploreLocale = translate('Explore');
-  const coursesLocale = translate('courses');
-  const questionsLocale = translate('questions');
+  const questionsLocale = translate('skill_chart_side_panel_questions_to_review');
   const skillFocusLocale = translate('skill_focus');
-  const contentCompletedLocale = translate('courses_completed');
   const buttonReviewProps = {
     customStyle: {
       backgroundColor: '#FFF',
@@ -71,40 +71,18 @@ const LearnerSkillCard = (props, context) => {
       }
     }
   };
-  const ProgressBar = useCallback(() => {
-    if (!content) return null;
-    const progressBarColor = '#3EC483';
-    const inlineProgressValueStyle = {
-      backgroundColor: progressBarColor,
-      width: `${score}%`
-    };
-    return /*#__PURE__*/React.createElement("div", {
-      className: style.progressWrapper
-    }, /*#__PURE__*/React.createElement("div", {
-      "data-name": "progress",
-      className: style.progress,
-      style: inlineProgressValueStyle,
-      role: "progressbar",
-      "aria-label": _get('progression', ariaLabel)
-    }));
-  }, [score, ariaLabel, content]);
   return /*#__PURE__*/React.createElement("div", {
     className: style.learnerSkillCardWrapper,
     "data-name": "learner-skill-card-wrapper",
     "aria-label": ariaLabel
-  }, content || questionsToReview ? /*#__PURE__*/React.createElement("div", {
-    className: style.skillCoursesAndQuestionsWrapper
-  }, content ? /*#__PURE__*/React.createElement("div", {
-    className: style.skillInformation,
-    "data-name": "skill-courses"
-  }, /*#__PURE__*/React.createElement("span", {
-    className: style.skillInformationNumber
-  }, content), " ", coursesLocale) : null, questionsToReview ? /*#__PURE__*/React.createElement("div", {
+  }, questionsToReview ? /*#__PURE__*/React.createElement("div", {
+    className: style.skillQuestionsWrapper
+  }, /*#__PURE__*/React.createElement("div", {
     className: style.skillInformation,
     "data-name": "skill-questions"
   }, /*#__PURE__*/React.createElement("span", {
     className: style.skillInformationNumber
-  }, questionsToReview), "\xA0", questionsLocale) : null) : null, /*#__PURE__*/React.createElement("div", {
+  }, questionsToReview), "\xA0", questionsLocale)) : null, /*#__PURE__*/React.createElement("div", {
     className: style.skillTitleWrapper
   }, /*#__PURE__*/React.createElement("div", {
     "data-name": "skill-title",
@@ -119,19 +97,22 @@ const LearnerSkillCard = (props, context) => {
       faSize: 10,
       wrapperSize: 16
     }
-  }), skillFocusLocale) : null), /*#__PURE__*/React.createElement(ProgressBar, null), /*#__PURE__*/React.createElement("div", {
+  }), skillFocusLocale) : null), content ? /*#__PURE__*/React.createElement("div", {
     className: style.progressInformations
-  }, content ? /*#__PURE__*/React.createElement(React.Fragment, null, /*#__PURE__*/React.createElement("div", {
-    className: style.progressInformation,
-    "data-name": "skill-completed-courses"
-  }, /*#__PURE__*/React.createElement("span", {
-    className: style.progressInformationNumber
-  }, contentCompleted), ` ${contentCompletedLocale}`), /*#__PURE__*/React.createElement("div", {
+  }, /*#__PURE__*/React.createElement(ProgressBar, {
+    value: score,
+    displayInfo: false,
+    max: MAX_SCORE,
+    className: style.progressWrapper,
+    style: {
+      backgroundColor: COLORS.positive
+    }
+  }), /*#__PURE__*/React.createElement("div", {
     className: style.progressInformation,
     "data-name": "completed-percentage"
   }, /*#__PURE__*/React.createElement("span", {
     className: style.progressInformationNumber
-  }, score, "%"))) : null), /*#__PURE__*/React.createElement("div", {
+  }, score, "%"))) : null, /*#__PURE__*/React.createElement("div", {
     className: style.ctaWrapper,
     "data-name": "cta-wrapper"
   }, /*#__PURE__*/React.createElement(ButtonLink, buttonReviewProps), /*#__PURE__*/React.createElement("div", {
@@ -152,8 +133,7 @@ LearnerSkillCard.propTypes = process.env.NODE_ENV !== "production" ? {
   metrics: PropTypes.shape({
     score: PropTypes.number,
     content: PropTypes.number,
-    questionsToReview: PropTypes.number,
-    contentCompleted: PropTypes.number
+    questionsToReview: PropTypes.number
   }),
   review: PropTypes.bool,
   onReviewClick: PropTypes.func,

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

@@ -1 +1 @@
-{"version":3,"file":"index.js","names":["React","useCallback","convert","PropTypes","Icon","ButtonLink","Provider","style","LearnerSkillCard","props","context","ariaLabel","skillTitle","skillAriaLabel","focus","metrics","review","onReviewClick","onExploreClick","score","content","questionsToReview","contentCompleted","skin","translate","primarySkinColor","reviewLocale","exploreLocale","coursesLocale","questionsLocale","skillFocusLocale","contentCompletedLocale","buttonReviewProps","customStyle","backgroundColor","transition","padding","disabled","onClick","label","buttonExploreProps","color","hoverColor","hoverBackgroundColor","icon","position","faIcon","name","size","ProgressBar","progressBarColor","inlineProgressValueStyle","width","progressWrapper","progress","learnerSkillCardWrapper","skillCoursesAndQuestionsWrapper","skillInformation","skillInformationNumber","skillTitleWrapper","skillFocusBadge","faSize","wrapperSize","progressInformations","progressInformation","progressInformationNumber","ctaWrapper","buttonWrapper","contextTypes","childContextTypes","propTypes","string","bool","shape","number","func"],"sources":["../../../src/molecule/learner-skill-card/index.js"],"sourcesContent":["import React, {useCallback} 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 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 buttonReviewProps = {\n    customStyle: {\n      backgroundColor: '#FFF',\n      transition: 'background-color 0.15s ease-in-out, color 0.15s ease-in-out',\n      padding: '0px'\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: convert(`color(${primarySkinColor} a(0.07))`),\n      color: primarySkinColor,\n      transition: 'background-color 0.15s ease-in-out, color 0.15s ease-in-out'\n    },\n    hoverColor: '#FFFFFF',\n    hoverBackgroundColor: primarySkinColor,\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: convert(`color(${primarySkinColor} a(0.07))`),\n        color: 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        ) : null}\n      </div>\n      <div className={style.ctaWrapper} data-name=\"cta-wrapper\">\n        <ButtonLink {...buttonReviewProps} />\n        <div className={style.buttonWrapper} data-name=\"button-explore-wrapper\">\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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"}
+{"version":3,"file":"index.js","names":["React","convert","PropTypes","Icon","ButtonLink","Provider","ProgressBar","COLORS","style","MAX_SCORE","LearnerSkillCard","props","context","ariaLabel","skillTitle","skillAriaLabel","focus","metrics","review","onReviewClick","onExploreClick","score","content","questionsToReview","skin","translate","primarySkinColor","reviewLocale","exploreLocale","questionsLocale","skillFocusLocale","buttonReviewProps","customStyle","backgroundColor","transition","padding","disabled","onClick","label","buttonExploreProps","color","hoverColor","hoverBackgroundColor","icon","position","faIcon","name","size","learnerSkillCardWrapper","skillQuestionsWrapper","skillInformation","skillInformationNumber","skillTitleWrapper","skillFocusBadge","faSize","wrapperSize","progressInformations","progressWrapper","positive","progressInformation","progressInformationNumber","ctaWrapper","buttonWrapper","contextTypes","childContextTypes","propTypes","string","bool","shape","number","func"],"sources":["../../../src/molecule/learner-skill-card/index.js"],"sourcesContent":["import React 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 ProgressBar from '../progress-bar';\nimport {COLORS} from '../../variables/colors';\nimport style from './style.css';\n\nconst MAX_SCORE = 100;\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 = 0} = metrics;\n  const {skin, translate} = context;\n  const primarySkinColor = get('common.primary', skin);\n\n  const reviewLocale = translate('Review');\n  const exploreLocale = translate('Explore');\n  const questionsLocale = translate('skill_chart_side_panel_questions_to_review');\n  const skillFocusLocale = translate('skill_focus');\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      padding: '0px'\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: convert(`color(${primarySkinColor} a(0.07))`),\n      color: primarySkinColor,\n      transition: 'background-color 0.15s ease-in-out, color 0.15s ease-in-out'\n    },\n    hoverColor: '#FFFFFF',\n    hoverBackgroundColor: primarySkinColor,\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: convert(`color(${primarySkinColor} a(0.07))`),\n        color: primarySkinColor,\n        size: 16\n      }\n    }\n  };\n  return (\n    <div\n      className={style.learnerSkillCardWrapper}\n      data-name=\"learner-skill-card-wrapper\"\n      aria-label={ariaLabel}\n    >\n      {questionsToReview ? (\n        <div className={style.skillQuestionsWrapper}>\n          <div className={style.skillInformation} data-name=\"skill-questions\">\n            <span className={style.skillInformationNumber}>{questionsToReview}</span>\n            &nbsp;{questionsLocale}\n          </div>\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      {content ? (\n        <div className={style.progressInformations}>\n          <ProgressBar\n            value={score}\n            displayInfo={false}\n            max={MAX_SCORE}\n            className={style.progressWrapper}\n            style={{backgroundColor: COLORS.positive}}\n          />\n          <div className={style.progressInformation} data-name=\"completed-percentage\">\n            <span className={style.progressInformationNumber}>{score}%</span>\n          </div>\n        </div>\n      ) : null}\n      <div className={style.ctaWrapper} data-name=\"cta-wrapper\">\n        <ButtonLink {...buttonReviewProps} />\n        <div className={style.buttonWrapper} data-name=\"button-explore-wrapper\">\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  }),\n  review: PropTypes.bool,\n  onReviewClick: PropTypes.func,\n  onExploreClick: PropTypes.func\n};\n\nexport default LearnerSkillCard;\n"],"mappings":"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"}

package/es/molecule/learner-skill-card/style.css

@@ -36,7 +36,7 @@
   box-shadow: 0px 4px 16px 0px rgba(0, 0, 0, 0.10);
 }
 
-.skillCoursesAndQuestionsWrapper,
+.skillQuestionsWrapper,
 .progressInformations {
   display: flex;
   justify-content: space-between;
@@ -90,6 +90,7 @@
 
 .progressWrapper {
   position: relative;
+  top: 4px;
   left: 0;
   width: 100%;
   height: 4px;
@@ -99,13 +100,9 @@
   margin-bottom: 8px;
 }
 
-.progress {
-  display: block;
-  height: 4px;
-  animation: progressbar 2s ease-in-out;
-}
-
 .progressInformations {
+  display: flex;
+  gap: 8px;
   min-height: 12px;
   margin-bottom: 24px;
 }

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

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

@@ -407,8 +407,7 @@ const MyLearning = (props, context) => {
     const {
       score,
       content,
-      questionsToReview,
-      contentCompleted
+      questionsToReview
     } = skillsInformation[skill] ? skillsInformation[skill].stats : defaultStats;
     return /*#__PURE__*/React.createElement("div", {
       key: index
@@ -418,8 +417,7 @@ const MyLearning = (props, context) => {
       metrics: {
         score: score.toFixed(1),
         content,
-        questionsToReview,
-        contentCompleted
+        questionsToReview
       },
       review: skillsInformation[skill] ? skillsInformation[skill].availableForReview : false,
       onReviewClick: handleReviewSkill,

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

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

package/es/template/playlist-detail/index.d.ts.map

@@ -1 +1 @@
-{"version":3,"file":"index.d.ts","sourceRoot":"","sources":["../../../src/template/playlist-detail/index.js"],"names":[],"mappings":";AAiBA,uEAyEC"}
+{"version":3,"file":"index.d.ts","sourceRoot":"","sources":["../../../src/template/playlist-detail/index.js"],"names":[],"mappings":";AAkBA,uEAyEC"}

package/es/template/playlist-detail/index.js

@@ -2,6 +2,7 @@ import _isNil from "lodash/fp/isNil";
 import React, { useCallback, useState } from 'react';
 import PropTypes from 'prop-types';
 import classnames from 'classnames';
+import Markdown from 'markdown-to-jsx';
 import Provider from '../../atom/provider';
 import Tag from '../../atom/tag';
 import Select, { SelectOptionPropTypes } from '../../atom/select';
@@ -35,7 +36,7 @@ const PlaylistDetail = (props, context) => {
   const Description = useCallback(() => {
     return /*#__PURE__*/React.createElement("div", {
       className: classnames(style.description, !showMore && style.truncate)
-    }, description);
+    }, /*#__PURE__*/React.createElement(Markdown, null, description));
   }, [showMore, description]);
   return /*#__PURE__*/React.createElement("div", {
     className: style.backgroundContainer

package/es/template/playlist-detail/index.js.map

@@ -1 +1 @@
-{"version":3,"file":"index.js","names":["React","useCallback","useState","PropTypes","classnames","Provider","Tag","Select","SelectOptionPropTypes","ButtonLinkIcon","Icon","CardsGrid","AllCourses","PlaylistDetailCover","ContinueLearningButton","style","DESCRIPTION_BREAKPOINT","PlaylistDetail","props","context","title","coverImages","playlistRef","description","ongoingCoursesAvailable","playlistCourses","filters","sorting","onBackClick","onContinueLearningClick","translate","showMore","setShowMore","handleShowMore","Description","truncate","backgroundContainer","container","backButton","ctaContainer","coverWrapper","length","showMoreWrapper","faSize","wrapperSize","continueLearningButton","contextTypes","skin","childContextTypes","propTypes","string","isRequired","images","bool","shape","onChange","func","options","arrayOf"],"sources":["../../../src/template/playlist-detail/index.js"],"sourcesContent":["import React, {useCallback, useState} from 'react';\nimport PropTypes from 'prop-types';\nimport classnames from 'classnames';\nimport {isNil} from 'lodash/fp';\nimport Provider from '../../atom/provider';\nimport Tag from '../../atom/tag';\nimport Select, {SelectOptionPropTypes} from '../../atom/select';\nimport ButtonLinkIcon from '../../atom/button-link-icon';\nimport Icon from '../../atom/icon';\nimport CardsGrid from '../../organism/cards-grid';\nimport AllCourses from '../skill-detail/all-courses';\nimport PlaylistDetailCover from '../../molecule/playlist-detail-cover';\nimport {ContinueLearningButton} from '../skill-detail';\nimport style from './style.css';\n\nconst DESCRIPTION_BREAKPOINT = 382;\n\nconst PlaylistDetail = (props, context) => {\n  const {\n    title,\n    coverImages,\n    playlistRef,\n    description,\n    ongoingCoursesAvailable,\n    playlistCourses,\n    filters,\n    sorting,\n    onBackClick,\n    onContinueLearningClick\n  } = props;\n  const {translate} = context;\n\n  const [showMore, setShowMore] = useState(false);\n\n  const handleShowMore = useCallback(() => setShowMore(!showMore), [setShowMore, showMore]);\n\n  const Description = useCallback(() => {\n    return (\n      <div className={classnames(style.description, !showMore && style.truncate)}>\n        {description}\n      </div>\n    );\n  }, [showMore, description]);\n\n  return (\n    <div className={style.backgroundContainer}>\n      <div className={style.container} data-name={playlistRef}>\n        {!isNil(onBackClick) ? (\n          <ButtonLinkIcon\n            faIcon=\"arrow-left\"\n            data-name=\"back-button\"\n            aria-label=\"Back\"\n            onClick={onBackClick}\n            className={style.backButton}\n            tooltipPlacement=\"right\"\n          />\n        ) : null}\n        <div className={style.ctaContainer}>\n          <div className={style.coverWrapper}>\n            <PlaylistDetailCover images={coverImages} />\n          </div>\n          <div>\n            <Tag label={translate('playlist')} />\n            <div className={style.title}>{title}</div>\n            {description ? (\n              <>\n                <Description />\n                {description.length >= DESCRIPTION_BREAKPOINT ? (\n                  <div className={style.showMoreWrapper} onClick={handleShowMore}>\n                    {translate(showMore ? 'Show less' : 'Show more')}\n                    <Icon\n                      iconName={showMore ? 'chevron-up' : 'chevron-down'}\n                      size={{faSize: 14, wrapperSize: 16}}\n                    />\n                  </div>\n                ) : null}\n              </>\n            ) : null}\n            <div className={style.continueLearningButton}>\n              <ContinueLearningButton\n                ongoingCoursesAvailable={ongoingCoursesAvailable}\n                onClick={onContinueLearningClick}\n              />\n            </div>\n          </div>\n        </div>\n        <AllCourses content={playlistCourses} filters={filters} sorting={sorting} />\n      </div>\n    </div>\n  );\n};\n\nPlaylistDetail.contextTypes = {\n  skin: Provider.childContextTypes.skin,\n  translate: Provider.childContextTypes.translate\n};\n\nPlaylistDetail.propTypes = {\n  title: PropTypes.string.isRequired,\n  coverImages: PlaylistDetailCover.propTypes.images,\n  playlistRef: PropTypes.string.isRequired,\n  description: PropTypes.string,\n  ongoingCoursesAvailable: PropTypes.bool,\n  playlistCourses: PropTypes.shape(CardsGrid.propTypes),\n  filters: PropTypes.shape({\n    onChange: PropTypes.func,\n    options: PropTypes.arrayOf(PropTypes.shape(SelectOptionPropTypes))\n  }),\n  sorting: PropTypes.shape(Select.propTypes),\n  onBackClick: PropTypes.func,\n  onContinueLearningClick: PropTypes.func\n};\n\nexport default PlaylistDetail;\n"],"mappings":"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"}
+{"version":3,"file":"index.js","names":["React","useCallback","useState","PropTypes","classnames","Markdown","Provider","Tag","Select","SelectOptionPropTypes","ButtonLinkIcon","Icon","CardsGrid","AllCourses","PlaylistDetailCover","ContinueLearningButton","style","DESCRIPTION_BREAKPOINT","PlaylistDetail","props","context","title","coverImages","playlistRef","description","ongoingCoursesAvailable","playlistCourses","filters","sorting","onBackClick","onContinueLearningClick","translate","showMore","setShowMore","handleShowMore","Description","truncate","backgroundContainer","container","backButton","ctaContainer","coverWrapper","length","showMoreWrapper","faSize","wrapperSize","continueLearningButton","contextTypes","skin","childContextTypes","propTypes","string","isRequired","images","bool","shape","onChange","func","options","arrayOf"],"sources":["../../../src/template/playlist-detail/index.js"],"sourcesContent":["import React, {useCallback, useState} from 'react';\nimport PropTypes from 'prop-types';\nimport classnames from 'classnames';\nimport {isNil} from 'lodash/fp';\nimport Markdown from 'markdown-to-jsx';\nimport Provider from '../../atom/provider';\nimport Tag from '../../atom/tag';\nimport Select, {SelectOptionPropTypes} from '../../atom/select';\nimport ButtonLinkIcon from '../../atom/button-link-icon';\nimport Icon from '../../atom/icon';\nimport CardsGrid from '../../organism/cards-grid';\nimport AllCourses from '../skill-detail/all-courses';\nimport PlaylistDetailCover from '../../molecule/playlist-detail-cover';\nimport {ContinueLearningButton} from '../skill-detail';\nimport style from './style.css';\n\nconst DESCRIPTION_BREAKPOINT = 382;\n\nconst PlaylistDetail = (props, context) => {\n  const {\n    title,\n    coverImages,\n    playlistRef,\n    description,\n    ongoingCoursesAvailable,\n    playlistCourses,\n    filters,\n    sorting,\n    onBackClick,\n    onContinueLearningClick\n  } = props;\n  const {translate} = context;\n\n  const [showMore, setShowMore] = useState(false);\n\n  const handleShowMore = useCallback(() => setShowMore(!showMore), [setShowMore, showMore]);\n\n  const Description = useCallback(() => {\n    return (\n      <div className={classnames(style.description, !showMore && style.truncate)}>\n        <Markdown>{description}</Markdown>\n      </div>\n    );\n  }, [showMore, description]);\n\n  return (\n    <div className={style.backgroundContainer}>\n      <div className={style.container} data-name={playlistRef}>\n        {!isNil(onBackClick) ? (\n          <ButtonLinkIcon\n            faIcon=\"arrow-left\"\n            data-name=\"back-button\"\n            aria-label=\"Back\"\n            onClick={onBackClick}\n            className={style.backButton}\n            tooltipPlacement=\"right\"\n          />\n        ) : null}\n        <div className={style.ctaContainer}>\n          <div className={style.coverWrapper}>\n            <PlaylistDetailCover images={coverImages} />\n          </div>\n          <div>\n            <Tag label={translate('playlist')} />\n            <div className={style.title}>{title}</div>\n            {description ? (\n              <>\n                <Description />\n                {description.length >= DESCRIPTION_BREAKPOINT ? (\n                  <div className={style.showMoreWrapper} onClick={handleShowMore}>\n                    {translate(showMore ? 'Show less' : 'Show more')}\n                    <Icon\n                      iconName={showMore ? 'chevron-up' : 'chevron-down'}\n                      size={{faSize: 14, wrapperSize: 16}}\n                    />\n                  </div>\n                ) : null}\n              </>\n            ) : null}\n            <div className={style.continueLearningButton}>\n              <ContinueLearningButton\n                ongoingCoursesAvailable={ongoingCoursesAvailable}\n                onClick={onContinueLearningClick}\n              />\n            </div>\n          </div>\n        </div>\n        <AllCourses content={playlistCourses} filters={filters} sorting={sorting} />\n      </div>\n    </div>\n  );\n};\n\nPlaylistDetail.contextTypes = {\n  skin: Provider.childContextTypes.skin,\n  translate: Provider.childContextTypes.translate\n};\n\nPlaylistDetail.propTypes = {\n  title: PropTypes.string.isRequired,\n  coverImages: PlaylistDetailCover.propTypes.images,\n  playlistRef: PropTypes.string.isRequired,\n  description: PropTypes.string,\n  ongoingCoursesAvailable: PropTypes.bool,\n  playlistCourses: PropTypes.shape(CardsGrid.propTypes),\n  filters: PropTypes.shape({\n    onChange: PropTypes.func,\n    options: PropTypes.arrayOf(PropTypes.shape(SelectOptionPropTypes))\n  }),\n  sorting: PropTypes.shape(Select.propTypes),\n  onBackClick: PropTypes.func,\n  onContinueLearningClick: PropTypes.func\n};\n\nexport default PlaylistDetail;\n"],"mappings":"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"}

package/es/template/skill-detail/index.d.ts.map

@@ -1 +1 @@
-{"version":3,"file":"index.d.ts","sourceRoot":"","sources":["../../../src/template/skill-detail/index.js"],"names":[],"mappings":"AAcO,8EA+BN;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;AAYD,oEAwIC"}
+{"version":3,"file":"index.d.ts","sourceRoot":"","sources":["../../../src/template/skill-detail/index.js"],"names":[],"mappings":"AAeO,8EA+BN;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;AAYD,oEAwIC"}

package/es/template/skill-detail/index.js

@@ -4,6 +4,7 @@ import React, { useCallback, useState } from 'react';
 import PropTypes from 'prop-types';
 import { convert } from 'css-color-function';
 import classnames from 'classnames';
+import Markdown from 'markdown-to-jsx';
 import Provider from '../../atom/provider';
 import Select, { SelectOptionPropTypes } from '../../atom/select';
 import ButtonLink from '../../atom/button-link';
@@ -83,7 +84,7 @@ const SkillDetail = (props, context) => {
   const Description = useCallback(() => {
     return /*#__PURE__*/React.createElement("div", {
       className: classnames(style.description, !showMore && style.truncate)
-    }, description);
+    }, /*#__PURE__*/React.createElement(Markdown, null, description));
   }, [showMore, description]);
   const ProgressBar = useCallback(() => {
     if (score === undefined) return null;

package/es/template/skill-detail/index.js.map

@@ -1 +1 @@
-{"version":3,"file":"index.js","names":["React","useCallback","useState","PropTypes","convert","classnames","Provider","Select","SelectOptionPropTypes","ButtonLink","ButtonLinkIcon","Icon","CardsGrid","style","AllCourses","ContinueLearningButton","props","context","ongoingCoursesAvailable","onClick","skin","translate","primarySkinColor","width","borderRadius","backgroundColor","position","faIcon","name","color","size","contextTypes","childContextTypes","propTypes","bool","func","SkillDetail","title","skillRef","description","metrics","focused","availableForReview","totalCourses","skillIncludedCourses","filters","sorting","onBackClick","onReviewClick","onContinueLearningClick","score","questionsToReview","showMore","setShowMore","handleShowMore","Description","truncate","ProgressBar","undefined","progressBarColor","inlineProgressValueStyle","progressBarWrapper","progress","backgroundContainer","container","backButton","ctaContainer","skillFocusBadge","faSize","wrapperSize","length","showMoreWrapper","ctaWrapper","skillInformation","skillInformationNumber","progressContainer","progressInformationNumber","toFixed","string","isRequired","shape","number","onChange","options","arrayOf"],"sources":["../../../src/template/skill-detail/index.js"],"sourcesContent":["import React, {useCallback, useState} from 'react';\nimport PropTypes from 'prop-types';\nimport {convert} from 'css-color-function';\nimport classnames from 'classnames';\nimport {get, isNil} from 'lodash/fp';\nimport Provider from '../../atom/provider';\nimport Select, {SelectOptionPropTypes} from '../../atom/select';\nimport ButtonLink from '../../atom/button-link';\nimport ButtonLinkIcon from '../../atom/button-link-icon';\nimport Icon from '../../atom/icon';\nimport CardsGrid from '../../organism/cards-grid';\nimport style from './style.css';\nimport AllCourses from './all-courses';\n\nexport const ContinueLearningButton = (props, context) => {\n  const {ongoingCoursesAvailable, onClick} = props;\n  const {skin, translate} = context;\n  const primarySkinColor = get('common.primary', skin);\n\n  return (\n    <div>\n      <ButtonLink\n        label={\n          ongoingCoursesAvailable ? translate('continue_learning') : translate('start_learning')\n        }\n        type=\"primary\"\n        customStyle={{\n          width: 'fit-content',\n          borderRadius: '12px',\n          backgroundColor: primarySkinColor\n        }}\n        hoverBackgroundColor={convert(`hsl(from ${primarySkinColor} h s calc(l*(1 - 0.08)))`)}\n        hoverColor=\"#FFFFFF\"\n        icon={{\n          position: 'left',\n          faIcon: {\n            name: 'play',\n            color: '#FFFFFF',\n            size: 16\n          }\n        }}\n        onClick={onClick}\n      />\n    </div>\n  );\n};\n\nContinueLearningButton.contextTypes = {\n  skin: Provider.childContextTypes.skin,\n  translate: Provider.childContextTypes.translate\n};\n\nContinueLearningButton.propTypes = {\n  ongoingCoursesAvailable: PropTypes.bool,\n  onClick: PropTypes.func\n};\n\nconst SkillDetail = (props, context) => {\n  const {\n    title,\n    skillRef,\n    description,\n    metrics = {},\n    focused,\n    availableForReview,\n    ongoingCoursesAvailable,\n    totalCourses,\n    skillIncludedCourses,\n    filters,\n    sorting,\n    onBackClick,\n    onReviewClick,\n    onContinueLearningClick\n  } = props;\n  const {score = 0, questionsToReview} = metrics;\n  const {translate} = context;\n\n  const [showMore, setShowMore] = useState(false);\n\n  const handleShowMore = useCallback(() => setShowMore(!showMore), [setShowMore, showMore]);\n\n  const Description = useCallback(() => {\n    return (\n      <div className={classnames(style.description, !showMore && style.truncate)}>\n        {description}\n      </div>\n    );\n  }, [showMore, description]);\n\n  const ProgressBar = useCallback(() => {\n    if (score === undefined) return null;\n    const progressBarColor = '#3EC483';\n    const inlineProgressValueStyle = {\n      backgroundColor: progressBarColor,\n      width: `${score}%`\n    };\n\n    return (\n      <div className={style.progressBarWrapper}>\n        <div\n          data-name=\"progress\"\n          className={style.progress}\n          style={inlineProgressValueStyle}\n          role=\"progressbar\"\n        />\n      </div>\n    );\n  }, [score]);\n\n  return (\n    <div className={style.backgroundContainer}>\n      <div className={style.container} data-name={skillRef}>\n        {!isNil(onBackClick) ? (\n          <ButtonLinkIcon\n            faIcon=\"arrow-left\"\n            data-name=\"back-button\"\n            aria-label=\"Back\"\n            onClick={onBackClick}\n            className={style.backButton}\n            tooltipPlacement=\"right\"\n          />\n        ) : null}\n        <div className={style.ctaContainer}>\n          <div>\n            {focused ? (\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                {translate('skill_focus')}\n              </div>\n            ) : null}\n            <div className={style.title}>{title}</div>\n            {description ? (\n              <>\n                <Description />\n                {description.length >= 226 ? (\n                  <div className={style.showMoreWrapper} onClick={handleShowMore}>\n                    {showMore ? translate('Show less') : translate('Show more')}\n                    <Icon\n                      iconName={showMore ? 'chevron-up' : 'chevron-down'}\n                      size={{\n                        faSize: 14,\n                        wrapperSize: 16\n                      }}\n                    />\n                  </div>\n                ) : null}\n              </>\n            ) : null}\n          </div>\n\n          <div className={style.ctaWrapper}>\n            <ButtonLink\n              type=\"secondary\"\n              onClick={onReviewClick}\n              label={translate('review_this_skill')}\n              disabled={!availableForReview}\n              customStyle={{\n                width: 'fit-content',\n                borderRadius: '12px'\n              }}\n            />\n            <ContinueLearningButton\n              ongoingCoursesAvailable={ongoingCoursesAvailable}\n              onClick={onContinueLearningClick}\n            />\n          </div>\n        </div>\n        {questionsToReview > 0 ? (\n          <div className={style.skillInformation} data-name=\"skill-questions\">\n            <span className={style.skillInformationNumber}>{questionsToReview}</span>\n            &nbsp;{translate('skill_chart_side_panel_questions_to_review')}\n          </div>\n        ) : null}\n        <div className={style.progressContainer}>\n          <ProgressBar />\n          <span className={style.progressInformationNumber}>{score.toFixed(1)}%</span>\n        </div>\n        <AllCourses\n          content={skillIncludedCourses}\n          filters={filters}\n          sorting={sorting}\n          totalContents={totalCourses}\n        />\n      </div>\n    </div>\n  );\n};\n\nSkillDetail.contextTypes = {\n  skin: Provider.childContextTypes.skin,\n  translate: Provider.childContextTypes.translate\n};\n\nSkillDetail.propTypes = {\n  title: PropTypes.string.isRequired,\n  skillRef: PropTypes.string.isRequired,\n  description: PropTypes.string,\n  metrics: PropTypes.shape({\n    score: PropTypes.number,\n    questionsToReview: PropTypes.number\n  }),\n  focused: PropTypes.bool,\n  availableForReview: PropTypes.bool,\n  ongoingCoursesAvailable: PropTypes.bool,\n  totalCourses: PropTypes.number,\n  skillIncludedCourses: PropTypes.shape(CardsGrid.propTypes),\n  filters: PropTypes.shape({\n    onChange: PropTypes.func,\n    options: PropTypes.arrayOf(PropTypes.shape(SelectOptionPropTypes))\n  }),\n  sorting: PropTypes.shape(Select.propTypes),\n  onBackClick: PropTypes.func,\n  onReviewClick: PropTypes.func,\n  onContinueLearningClick: PropTypes.func\n};\n\nexport default SkillDetail;\n"],"mappings":"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"}
+{"version":3,"file":"index.js","names":["React","useCallback","useState","PropTypes","convert","classnames","Markdown","Provider","Select","SelectOptionPropTypes","ButtonLink","ButtonLinkIcon","Icon","CardsGrid","style","AllCourses","ContinueLearningButton","props","context","ongoingCoursesAvailable","onClick","skin","translate","primarySkinColor","width","borderRadius","backgroundColor","position","faIcon","name","color","size","contextTypes","childContextTypes","propTypes","bool","func","SkillDetail","title","skillRef","description","metrics","focused","availableForReview","totalCourses","skillIncludedCourses","filters","sorting","onBackClick","onReviewClick","onContinueLearningClick","score","questionsToReview","showMore","setShowMore","handleShowMore","Description","truncate","ProgressBar","undefined","progressBarColor","inlineProgressValueStyle","progressBarWrapper","progress","backgroundContainer","container","backButton","ctaContainer","skillFocusBadge","faSize","wrapperSize","length","showMoreWrapper","ctaWrapper","skillInformation","skillInformationNumber","progressContainer","progressInformationNumber","toFixed","string","isRequired","shape","number","onChange","options","arrayOf"],"sources":["../../../src/template/skill-detail/index.js"],"sourcesContent":["import React, {useCallback, useState} from 'react';\nimport PropTypes from 'prop-types';\nimport {convert} from 'css-color-function';\nimport classnames from 'classnames';\nimport {get, isNil} from 'lodash/fp';\nimport Markdown from 'markdown-to-jsx';\nimport Provider from '../../atom/provider';\nimport Select, {SelectOptionPropTypes} from '../../atom/select';\nimport ButtonLink from '../../atom/button-link';\nimport ButtonLinkIcon from '../../atom/button-link-icon';\nimport Icon from '../../atom/icon';\nimport CardsGrid from '../../organism/cards-grid';\nimport style from './style.css';\nimport AllCourses from './all-courses';\n\nexport const ContinueLearningButton = (props, context) => {\n  const {ongoingCoursesAvailable, onClick} = props;\n  const {skin, translate} = context;\n  const primarySkinColor = get('common.primary', skin);\n\n  return (\n    <div>\n      <ButtonLink\n        label={\n          ongoingCoursesAvailable ? translate('continue_learning') : translate('start_learning')\n        }\n        type=\"primary\"\n        customStyle={{\n          width: 'fit-content',\n          borderRadius: '12px',\n          backgroundColor: primarySkinColor\n        }}\n        hoverBackgroundColor={convert(`hsl(from ${primarySkinColor} h s calc(l*(1 - 0.08)))`)}\n        hoverColor=\"#FFFFFF\"\n        icon={{\n          position: 'left',\n          faIcon: {\n            name: 'play',\n            color: '#FFFFFF',\n            size: 16\n          }\n        }}\n        onClick={onClick}\n      />\n    </div>\n  );\n};\n\nContinueLearningButton.contextTypes = {\n  skin: Provider.childContextTypes.skin,\n  translate: Provider.childContextTypes.translate\n};\n\nContinueLearningButton.propTypes = {\n  ongoingCoursesAvailable: PropTypes.bool,\n  onClick: PropTypes.func\n};\n\nconst SkillDetail = (props, context) => {\n  const {\n    title,\n    skillRef,\n    description,\n    metrics = {},\n    focused,\n    availableForReview,\n    ongoingCoursesAvailable,\n    totalCourses,\n    skillIncludedCourses,\n    filters,\n    sorting,\n    onBackClick,\n    onReviewClick,\n    onContinueLearningClick\n  } = props;\n  const {score = 0, questionsToReview} = metrics;\n  const {translate} = context;\n\n  const [showMore, setShowMore] = useState(false);\n\n  const handleShowMore = useCallback(() => setShowMore(!showMore), [setShowMore, showMore]);\n\n  const Description = useCallback(() => {\n    return (\n      <div className={classnames(style.description, !showMore && style.truncate)}>\n        <Markdown>{description}</Markdown>\n      </div>\n    );\n  }, [showMore, description]);\n\n  const ProgressBar = useCallback(() => {\n    if (score === undefined) return null;\n    const progressBarColor = '#3EC483';\n    const inlineProgressValueStyle = {\n      backgroundColor: progressBarColor,\n      width: `${score}%`\n    };\n\n    return (\n      <div className={style.progressBarWrapper}>\n        <div\n          data-name=\"progress\"\n          className={style.progress}\n          style={inlineProgressValueStyle}\n          role=\"progressbar\"\n        />\n      </div>\n    );\n  }, [score]);\n\n  return (\n    <div className={style.backgroundContainer}>\n      <div className={style.container} data-name={skillRef}>\n        {!isNil(onBackClick) ? (\n          <ButtonLinkIcon\n            faIcon=\"arrow-left\"\n            data-name=\"back-button\"\n            aria-label=\"Back\"\n            onClick={onBackClick}\n            className={style.backButton}\n            tooltipPlacement=\"right\"\n          />\n        ) : null}\n        <div className={style.ctaContainer}>\n          <div>\n            {focused ? (\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                {translate('skill_focus')}\n              </div>\n            ) : null}\n            <div className={style.title}>{title}</div>\n            {description ? (\n              <>\n                <Description />\n                {description.length >= 226 ? (\n                  <div className={style.showMoreWrapper} onClick={handleShowMore}>\n                    {showMore ? translate('Show less') : translate('Show more')}\n                    <Icon\n                      iconName={showMore ? 'chevron-up' : 'chevron-down'}\n                      size={{\n                        faSize: 14,\n                        wrapperSize: 16\n                      }}\n                    />\n                  </div>\n                ) : null}\n              </>\n            ) : null}\n          </div>\n\n          <div className={style.ctaWrapper}>\n            <ButtonLink\n              type=\"secondary\"\n              onClick={onReviewClick}\n              label={translate('review_this_skill')}\n              disabled={!availableForReview}\n              customStyle={{\n                width: 'fit-content',\n                borderRadius: '12px'\n              }}\n            />\n            <ContinueLearningButton\n              ongoingCoursesAvailable={ongoingCoursesAvailable}\n              onClick={onContinueLearningClick}\n            />\n          </div>\n        </div>\n        {questionsToReview > 0 ? (\n          <div className={style.skillInformation} data-name=\"skill-questions\">\n            <span className={style.skillInformationNumber}>{questionsToReview}</span>\n            &nbsp;{translate('skill_chart_side_panel_questions_to_review')}\n          </div>\n        ) : null}\n        <div className={style.progressContainer}>\n          <ProgressBar />\n          <span className={style.progressInformationNumber}>{score.toFixed(1)}%</span>\n        </div>\n        <AllCourses\n          content={skillIncludedCourses}\n          filters={filters}\n          sorting={sorting}\n          totalContents={totalCourses}\n        />\n      </div>\n    </div>\n  );\n};\n\nSkillDetail.contextTypes = {\n  skin: Provider.childContextTypes.skin,\n  translate: Provider.childContextTypes.translate\n};\n\nSkillDetail.propTypes = {\n  title: PropTypes.string.isRequired,\n  skillRef: PropTypes.string.isRequired,\n  description: PropTypes.string,\n  metrics: PropTypes.shape({\n    score: PropTypes.number,\n    questionsToReview: PropTypes.number\n  }),\n  focused: PropTypes.bool,\n  availableForReview: PropTypes.bool,\n  ongoingCoursesAvailable: PropTypes.bool,\n  totalCourses: PropTypes.number,\n  skillIncludedCourses: PropTypes.shape(CardsGrid.propTypes),\n  filters: PropTypes.shape({\n    onChange: PropTypes.func,\n    options: PropTypes.arrayOf(PropTypes.shape(SelectOptionPropTypes))\n  }),\n  sorting: PropTypes.shape(Select.propTypes),\n  onBackClick: PropTypes.func,\n  onReviewClick: PropTypes.func,\n  onContinueLearningClick: PropTypes.func\n};\n\nexport default SkillDetail;\n"],"mappings":"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"}