@coorpacademy/components 11.32.0 → 11.32.1-alpha.19

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

@@ -0,0 +1,373 @@
+"use strict";
+
+exports.__esModule = true;
+exports.default = void 0;
+
+var _getOr2 = _interopRequireDefault(require("lodash/fp/getOr"));
+
+var _react = _interopRequireWildcard(require("react"));
+
+var _propTypes = _interopRequireDefault(require("prop-types"));
+
+var _cssColorFunction = require("css-color-function");
+
+var _style = _interopRequireDefault(require("./style.css"));
+
+var _provider = _interopRequireDefault(require("../../atom/provider"));
+
+var _icon = _interopRequireDefault(require("../../atom/icon"));
+
+var _picture = _interopRequireDefault(require("../../atom/picture"));
+
+var _buttonLink = _interopRequireDefault(require("../../atom/button-link"));
+
+var _tooltip = _interopRequireDefault(require("../../atom/tooltip"));
+
+var _skillPickerModal = _interopRequireDefault(require("../../molecule/skill-picker-modal"));
+
+var _learningProfileRadarChart = _interopRequireDefault(require("../../molecule/learning-profile-radar-chart"));
+
+var _skillsChartSideInformationPanel = _interopRequireDefault(require("../../molecule/skills-chart-side-information-panel"));
+
+var _learnerSkillCard = _interopRequireDefault(require("../../molecule/learner-skill-card"));
+
+function _getRequireWildcardCache(nodeInterop) { if (typeof WeakMap !== "function") return null; var cacheBabelInterop = new WeakMap(); var cacheNodeInterop = new WeakMap(); return (_getRequireWildcardCache = function (nodeInterop) { return nodeInterop ? cacheNodeInterop : cacheBabelInterop; })(nodeInterop); }
+
+function _interopRequireWildcard(obj, nodeInterop) { if (!nodeInterop && obj && obj.__esModule) { return obj; } if (obj === null || typeof obj !== "object" && typeof obj !== "function") { return { default: obj }; } var cache = _getRequireWildcardCache(nodeInterop); if (cache && cache.has(obj)) { return cache.get(obj); } var newObj = {}; var hasPropertyDescriptor = Object.defineProperty && Object.getOwnPropertyDescriptor; for (var key in obj) { if (key !== "default" && Object.prototype.hasOwnProperty.call(obj, key)) { var desc = hasPropertyDescriptor ? Object.getOwnPropertyDescriptor(obj, key) : null; if (desc && (desc.get || desc.set)) { Object.defineProperty(newObj, key, desc); } else { newObj[key] = obj[key]; } } } newObj.default = obj; if (cache) { cache.set(obj, newObj); } return newObj; }
+
+function _interopRequireDefault(obj) { return obj && obj.__esModule ? obj : { default: obj }; }
+
+const ChangeSkillFocusButton = (props, context) => {
+  const [hovered, setHovered] = (0, _react.useState)(false);
+  const {
+    onClick
+  } = props;
+  const {
+    skin,
+    translate
+  } = context;
+  const primarySkinColor = (0, _getOr2.default)('#0061FF', 'common.primary', skin);
+  const handleMouseOver = (0, _react.useCallback)(() => setHovered(true), [setHovered]);
+  const handleMouseLeave = (0, _react.useCallback)(() => setHovered(false), [setHovered]);
+  const buttonProps = {
+    customStyle: {
+      backgroundColor: hovered ? primarySkinColor : (0, _cssColorFunction.convert)(`color(${primarySkinColor} a(0.07))`),
+      color: hovered ? '#FFFFFF' : primarySkinColor,
+      transition: 'background-color 0.15s ease-in-out, color 0.15s ease-in-out'
+    },
+    onClick,
+    label: translate('change_skill_focus'),
+    'data-name': 'change-skill-focus-button',
+    icon: {
+      position: 'left',
+      faIcon: {
+        name: 'arrows-rotate',
+        backgroundColor: hovered ? primarySkinColor : (0, _cssColorFunction.convert)(`color(${primarySkinColor} a(0.07))`),
+        color: hovered ? '#FFFFFF' : primarySkinColor,
+        size: 16
+      }
+    }
+  };
+  return /*#__PURE__*/_react.default.createElement("div", {
+    onMouseOver: handleMouseOver,
+    onMouseLeave: handleMouseLeave,
+    "data-name": "button-explore-wrapper"
+  }, /*#__PURE__*/_react.default.createElement(_buttonLink.default, buttonProps));
+};
+
+ChangeSkillFocusButton.contextTypes = {
+  translate: _provider.default.childContextTypes.translate
+};
+ChangeSkillFocusButton.propTypes = process.env.NODE_ENV !== "production" ? {
+  onClick: _propTypes.default.func
+} : {};
+
+const FilterButton = (props, context) => {
+  const {
+    active,
+    filter,
+    skillTotal,
+    onClick
+  } = props;
+  const {
+    skin,
+    translate
+  } = context;
+  const primarySkinColor = (0, _getOr2.default)('#0061FF', 'common.primary', skin);
+  const Content = (0, _react.useCallback)(() => /*#__PURE__*/_react.default.createElement("div", null, filter, /*#__PURE__*/_react.default.createElement("span", {
+    className: active ? _style.default.skillFilterNumber : _style.default.skillFilterNumberInActive
+  }, skillTotal)), [filter, skillTotal, active]);
+  const buttonProps = {
+    customStyle: {
+      backgroundColor: active ? (0, _cssColorFunction.convert)(`color(${primarySkinColor} a(0.07))`) : '#FFFFFF',
+      color: active ? primarySkinColor : '#9999A8',
+      transition: 'background-color 0.15s ease-in-out, color 0.15s ease-in-out',
+      width: filter === translate('review') ? '198px' : 'fit-content'
+    },
+    onClick,
+    content: /*#__PURE__*/_react.default.createElement(Content, null),
+    'data-name': 'change-skill-focus-button'
+  };
+  return /*#__PURE__*/_react.default.createElement(_buttonLink.default, buttonProps);
+};
+
+FilterButton.contextTypes = {
+  translate: _provider.default.childContextTypes.translate
+};
+FilterButton.propTypes = process.env.NODE_ENV !== "production" ? {
+  active: _propTypes.default.bool,
+  filter: _propTypes.default.string,
+  skillTotal: _propTypes.default.number,
+  onClick: _propTypes.default.func
+} : {};
+
+const MyLearning = (props, context) => {
+  const {
+    skills,
+    selectedSkills,
+    skillsStats,
+    skillsLocales,
+    skillsFilters,
+    isLoading,
+    onSkillFocusConfirm,
+    onReviewSkill,
+    onExploreSkill
+  } = props;
+  const {
+    translate
+  } = context;
+  const [open, setOpen] = (0, _react.useState)(false);
+  const [selectedSkillsList, setSelectedSkillsList] = (0, _react.useState)([...selectedSkills]);
+  const [skillFocusSelected, setSkillFocusSelected] = (0, _react.useState)(undefined);
+  const [activeFilter, setActiveFilter] = (0, _react.useState)('all');
+  const skillsReviewReady = (0, _react.useMemo)(() => {
+    return skills.filter(skill => skillsFilters[skill].review);
+  }, [skills, skillsFilters]);
+  const graphDatas = (0, _react.useMemo)(() => {
+    const data = {};
+    selectedSkillsList.forEach(skill => data[skill] = skillsStats[skill].score);
+    return data;
+  }, [selectedSkillsList, skillsStats]);
+  const graphLegends = (0, _react.useMemo)(() => {
+    const data = {};
+    selectedSkillsList.forEach(skill => data[skill] = skillsLocales[skill]);
+    return data;
+  }, [selectedSkillsList, skillsLocales]);
+  const filters = [{
+    name: 'all',
+    skills: skills
+  }, {
+    name: 'review',
+    skills: skillsReviewReady
+  }];
+  const coursedCompletedData = (0, _react.useMemo)(() => skillFocusSelected ? skillsStats[skillFocusSelected].coursesCompleted : selectedSkillsList.reduce((sum, skill) => sum + skillsStats[skill].coursesCompleted, 0), [skillFocusSelected, skillsStats, selectedSkillsList, skillFocusSelected]);
+  const questionsAnsweredData = (0, _react.useMemo)(() => skillFocusSelected ? skillsStats[skillFocusSelected].questionsAnswered : selectedSkillsList.reduce((sum, skill) => sum + skillsStats[skill].questionsAnswered, 0), [skillFocusSelected, skillsStats, selectedSkillsList, skillFocusSelected]);
+  const learningHoursData = (0, _react.useMemo)(() => skillFocusSelected ? skillsStats[skillFocusSelected].learningHours : selectedSkillsList.reduce((sum, skill) => sum + skillsStats[skill].learningHours, 0), [skillFocusSelected, skillsStats, selectedSkillsList, skillFocusSelected]);
+  const skillChartPaneLegends = (0, _react.useMemo)(() => translate('on', {
+    focusedSkill: skillFocusSelected ? skillsLocales[skillFocusSelected] : translate('focused_skills')
+  }), [translate, skillsLocales, skillFocusSelected]);
+  const skillChartPanelProps = [{
+    title: translate('courses_completed'),
+    value: coursedCompletedData,
+    legend: skillChartPaneLegends,
+    icon: {
+      iconName: 'book-open-cover',
+      backgroundColor: '#D9F4F7'
+    }
+  }, {
+    title: translate('questions_answered'),
+    value: questionsAnsweredData,
+    legend: skillChartPaneLegends,
+    icon: {
+      iconName: 'circle-question',
+      backgroundColor: '#FFDCD1'
+    }
+  }, {
+    title: translate('learning_hours'),
+    value: learningHoursData,
+    legend: skillChartPaneLegends,
+    icon: {
+      iconName: 'clock',
+      backgroundColor: '#FAD6DE'
+    }
+  }];
+  const handleOnDotClick = (0, _react.useCallback)(skillRef => setSkillFocusSelected(skillRef), [setSkillFocusSelected]);
+  const handleOpenSkillPicker = (0, _react.useCallback)(() => setOpen(true), [setOpen]);
+  const handleCloseSkillPicker = (0, _react.useCallback)(() => setOpen(false), [setOpen]);
+  const handleConfirmSkillPicker = (0, _react.useCallback)(focusSkillList => {
+    setSelectedSkillsList(focusSkillList);
+    onSkillFocusConfirm(focusSkillList);
+    setOpen(false);
+  }, [onSkillFocusConfirm, setSelectedSkillsList, setOpen]);
+  const TooltipContent = (0, _react.useCallback)(() => /*#__PURE__*/_react.default.createElement("div", null, /*#__PURE__*/_react.default.createElement("div", null, /*#__PURE__*/_react.default.createElement("b", null, translate('review_mode_tooltip_header'))), /*#__PURE__*/_react.default.createElement("p", null, translate('review_mode_tooltip_content')), /*#__PURE__*/_react.default.createElement("ol", null, /*#__PURE__*/_react.default.createElement("li", null, translate('Choose 1 Skill')), /*#__PURE__*/_react.default.createElement("li", null, translate('Answer 5 Questions')), /*#__PURE__*/_react.default.createElement("li", null, translate('You have Infinite Lives')), /*#__PURE__*/_react.default.createElement("li", null, translate('Get it all right')))), [translate]);
+  return /*#__PURE__*/_react.default.createElement("div", {
+    className: _style.default.container
+  }, /*#__PURE__*/_react.default.createElement(_skillPickerModal.default, {
+    skills: skills,
+    selectedSkills: selectedSkillsList,
+    skillsLocales: skillsLocales,
+    isOpen: open,
+    isLoading: isLoading,
+    onCancel: handleCloseSkillPicker,
+    onConfirm: handleConfirmSkillPicker,
+    onClose: handleCloseSkillPicker
+  }), /*#__PURE__*/_react.default.createElement("div", {
+    className: _style.default.skillFocusContainer
+  }, /*#__PURE__*/_react.default.createElement("header", {
+    className: _style.default.skillFocusHeader
+  }, /*#__PURE__*/_react.default.createElement("div", {
+    className: _style.default.skillFocusHeaderWrapper
+  }, /*#__PURE__*/_react.default.createElement("div", {
+    className: _style.default.skillFocusHeaderIcon
+  }, /*#__PURE__*/_react.default.createElement(_icon.default, {
+    iconName: "bullseye-arrow",
+    backgroundColor: "#DDD1FF",
+    borderRadius: "12px",
+    size: {
+      faSize: 20,
+      wrapperSize: 48
+    }
+  })), /*#__PURE__*/_react.default.createElement("div", {
+    className: _style.default.skillFocusHeaderContent
+  }, /*#__PURE__*/_react.default.createElement("div", {
+    className: _style.default.skillFocusHeaderTitle
+  }, translate('skill_focus')), /*#__PURE__*/_react.default.createElement("div", {
+    className: _style.default.skillFocusHeaderDescription
+  }, translate('skills_focus_description')))), selectedSkillsList.length > 0 ? /*#__PURE__*/_react.default.createElement(ChangeSkillFocusButton, {
+    onClick: handleOpenSkillPicker
+  }) : null), selectedSkillsList.length > 0 ? /*#__PURE__*/_react.default.createElement("div", {
+    className: _style.default.skillFocusContent
+  }, /*#__PURE__*/_react.default.createElement("div", {
+    className: _style.default.radarContainer
+  }, /*#__PURE__*/_react.default.createElement(_learningProfileRadarChart.default, {
+    totalDataset: 1,
+    height: 424,
+    width: 680,
+    data: graphDatas,
+    legend: graphLegends,
+    onClick: handleOnDotClick,
+    colors: [{
+      gradient: {
+        fill: ['#0062ffff', '#8000ff85'],
+        stroke: ['#0062ffff', '#8000FF']
+      },
+      percentage: {
+        color: '#0061FF',
+        background: 'linear-gradient(180deg, rgba(0, 97, 255, 0.10) 0%, rgba(147, 107, 255, 0.10) 100%)'
+      },
+      label: {
+        color: '#020202ff'
+      }
+    }]
+  })), /*#__PURE__*/_react.default.createElement(_skillsChartSideInformationPanel.default, {
+    sidePanelItems: skillChartPanelProps
+  })) : /*#__PURE__*/_react.default.createElement("div", {
+    className: _style.default.skillFocusEmpty
+  }, /*#__PURE__*/_react.default.createElement(_picture.default, {
+    className: _style.default.img,
+    src: 'https://t4.ftcdn.net/jpg/01/43/23/83/360_F_143238306_lh0ap42wgot36y44WybfQpvsJB5A1CHc.jpg',
+    alt: 'demo'
+  }), /*#__PURE__*/_react.default.createElement("div", {
+    className: _style.default.skillFocusEmptyTitle
+  }, translate('skill_focus_empty_title')), /*#__PURE__*/_react.default.createElement("div", {
+    className: _style.default.skillFocusEmptyDescription
+  }, translate('skills_focus_empty_description')), /*#__PURE__*/_react.default.createElement(_buttonLink.default, {
+    customStyle: {
+      width: '168px'
+    },
+    type: 'primary',
+    onClick: handleOpenSkillPicker,
+    label: translate('choose_your_focus')
+  }))), /*#__PURE__*/_react.default.createElement("header", {
+    className: _style.default.skillListHeader
+  }, /*#__PURE__*/_react.default.createElement("div", {
+    className: _style.default.skillListHeaderIcon
+  }, /*#__PURE__*/_react.default.createElement(_icon.default, {
+    iconName: "dumbbell",
+    backgroundColor: "#FFF9D1",
+    size: {
+      faSize: 20,
+      wrapperSize: 48
+    }
+  })), /*#__PURE__*/_react.default.createElement("div", {
+    className: _style.default.skillListHeaderContent
+  }, /*#__PURE__*/_react.default.createElement("div", {
+    className: _style.default.skillListHeaderTitle
+  }, translate('skills')), /*#__PURE__*/_react.default.createElement("div", {
+    className: _style.default.skillListHeaderDescription
+  }, translate('Explore or review skills'), /*#__PURE__*/_react.default.createElement(_tooltip.default, {
+    fontSize: 12,
+    iconContainerClassName: _style.default.infoIconTooltip,
+    tooltipClassName: _style.default.tooltip,
+    TooltipContent: TooltipContent,
+    closeToolTipInformationTextAriaLabel: translate('Press the escape key to close the information text')
+  })))), /*#__PURE__*/_react.default.createElement("div", {
+    className: _style.default.skillFilterContainer
+  }, filters.map((filter, index) => {
+    function handleFilterClick() {
+      setActiveFilter(filter.name);
+    }
+
+    return /*#__PURE__*/_react.default.createElement("div", {
+      key: index
+    }, /*#__PURE__*/_react.default.createElement(FilterButton, {
+      active: activeFilter === filter.name,
+      filter: translate(filter.name),
+      skillTotal: filter.skills.length,
+      onClick: handleFilterClick
+    }));
+  })), /*#__PURE__*/_react.default.createElement("div", {
+    className: _style.default.skillListContainer
+  }, skills.map((skill, index) => {
+    if (activeFilter === 'review' && !skillsFilters[skill].review) return null;
+
+    function handleReviewSkill() {
+      onReviewSkill(skill);
+    }
+
+    function handleExploreSkill() {
+      onExploreSkill(skill);
+    }
+
+    return /*#__PURE__*/_react.default.createElement("div", {
+      key: index
+    }, /*#__PURE__*/_react.default.createElement(_learnerSkillCard.default, {
+      skillTitle: skillsLocales[skill],
+      focus: selectedSkills.includes(skill),
+      metrics: {
+        skillCourses: skillsStats[skill].courses,
+        skillQuestions: skillsStats[skill].questionsAnswered,
+        completedCourses: skillsStats[skill].coursesCompleted
+      },
+      review: skillsFilters[skill].review,
+      onReviewClick: handleReviewSkill,
+      onExploreClick: handleExploreSkill
+    }));
+  })));
+};
+
+MyLearning.contextTypes = {
+  translate: _provider.default.childContextTypes.translate
+};
+MyLearning.propTypes = process.env.NODE_ENV !== "production" ? {
+  skills: _propTypes.default.arrayOf(_propTypes.default.string),
+  selectedSkills: _propTypes.default.arrayOf(_propTypes.default.string),
+  skillsStats: _propTypes.default.objectOf(_propTypes.default.shape({
+    score: _propTypes.default.number,
+    courses: _propTypes.default.number,
+    coursesCompleted: _propTypes.default.number,
+    questionsAnswered: _propTypes.default.number,
+    learningHours: _propTypes.default.number
+  })),
+  skillsFilters: _propTypes.default.objectOf(_propTypes.default.shape({
+    review: _propTypes.default.boolean
+  })),
+  skillsLocales: _propTypes.default.objectOf(_propTypes.default.string),
+  isLoading: _propTypes.default.bool,
+  onSkillFocusConfirm: _propTypes.default.func,
+  onReviewSkill: _propTypes.default.func,
+  onExploreSkill: _propTypes.default.func
+} : {};
+var _default = MyLearning;
+exports.default = _default;
+//# sourceMappingURL=index.js.map

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

@@ -0,0 +1 @@
+{"version":3,"file":"index.js","names":["ChangeSkillFocusButton","props","context","hovered","setHovered","useState","onClick","skin","translate","primarySkinColor","handleMouseOver","useCallback","handleMouseLeave","buttonProps","customStyle","backgroundColor","convert","color","transition","label","icon","position","faIcon","name","size","contextTypes","Provider","childContextTypes","propTypes","PropTypes","func","FilterButton","active","filter","skillTotal","Content","style","skillFilterNumber","skillFilterNumberInActive","width","content","bool","string","number","MyLearning","skills","selectedSkills","skillsStats","skillsLocales","skillsFilters","isLoading","onSkillFocusConfirm","onReviewSkill","onExploreSkill","open","setOpen","selectedSkillsList","setSelectedSkillsList","skillFocusSelected","setSkillFocusSelected","undefined","activeFilter","setActiveFilter","skillsReviewReady","useMemo","skill","review","graphDatas","data","forEach","score","graphLegends","filters","coursedCompletedData","coursesCompleted","reduce","sum","questionsAnsweredData","questionsAnswered","learningHoursData","learningHours","skillChartPaneLegends","focusedSkill","skillChartPanelProps","title","value","legend","iconName","handleOnDotClick","skillRef","handleOpenSkillPicker","handleCloseSkillPicker","handleConfirmSkillPicker","focusSkillList","TooltipContent","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","skillFilterContainer","map","index","handleFilterClick","skillListContainer","handleReviewSkill","handleExploreSkill","includes","skillCourses","courses","skillQuestions","completedCourses","arrayOf","objectOf","shape","boolean"],"sources":["../../../src/template/my-learning/index.js"],"sourcesContent":["import React, {useCallback, useState, useEffect, useMemo} from 'react';\nimport PropTypes from 'prop-types';\nimport {convert} from 'css-color-function';\nimport {getOr} from 'lodash/fp';\nimport style from './style.css';\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 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';\n\nconst ChangeSkillFocusButton = (props, context) => {\n  const [hovered, setHovered] = useState(false);\n  const {onClick} = props;\n  const {skin, translate} = context;\n  const primarySkinColor = getOr('#0061FF', 'common.primary', skin);\n\n  const handleMouseOver = useCallback(() => setHovered(true), [setHovered]);\n\n  const handleMouseLeave = useCallback(() => setHovered(false), [setHovered]);\n\n  const buttonProps = {\n    customStyle: {\n      backgroundColor: hovered ? primarySkinColor : convert(`color(${primarySkinColor} a(0.07))`),\n      color: hovered ? '#FFFFFF' : primarySkinColor,\n      transition: 'background-color 0.15s ease-in-out, color 0.15s ease-in-out'\n    },\n    onClick,\n    label: translate('change_skill_focus'),\n    'data-name': 'change-skill-focus-button',\n    icon: {\n      position: 'left',\n      faIcon: {\n        name: 'arrows-rotate',\n        backgroundColor: hovered ? primarySkinColor : convert(`color(${primarySkinColor} a(0.07))`),\n        color: hovered ? '#FFFFFF' : primarySkinColor,\n        size: 16\n      }\n    }\n  };\n\n  return (\n    <div\n      onMouseOver={handleMouseOver}\n      onMouseLeave={handleMouseLeave}\n      data-name=\"button-explore-wrapper\"\n    >\n      <ButtonLink {...buttonProps} />\n    </div>\n  );\n};\n\nChangeSkillFocusButton.contextTypes = {\n  translate: Provider.childContextTypes.translate\n};\n\nChangeSkillFocusButton.propTypes = {\n  onClick: PropTypes.func\n};\n\nconst FilterButton = (props, context) => {\n  const {active, filter, skillTotal, onClick} = props;\n  const {skin, translate} = context;\n  const primarySkinColor = getOr('#0061FF', 'common.primary', skin);\n\n  const Content = useCallback(\n    () => (\n      <div>\n        {filter}\n        <span className={active ? style.skillFilterNumber : style.skillFilterNumberInActive}>\n          {skillTotal}\n        </span>\n      </div>\n    ),\n    [filter, skillTotal, active]\n  );\n\n  const buttonProps = {\n    customStyle: {\n      backgroundColor: active ? convert(`color(${primarySkinColor} a(0.07))`) : '#FFFFFF',\n      color: active ? primarySkinColor : '#9999A8',\n      transition: 'background-color 0.15s ease-in-out, color 0.15s ease-in-out',\n      width: filter === translate('review') ? '198px' :'fit-content'\n    },\n    onClick,\n    content: <Content />,\n    'data-name': 'change-skill-focus-button'\n  };\n\n  return <ButtonLink {...buttonProps} />;\n};\n\nFilterButton.contextTypes = {\n  translate: Provider.childContextTypes.translate\n};\n\nFilterButton.propTypes = {\n  active: PropTypes.bool,\n  filter: PropTypes.string,\n  skillTotal: PropTypes.number,\n  onClick: PropTypes.func\n};\n\nconst MyLearning = (props, context) => {\n  const {skills, selectedSkills, skillsStats, skillsLocales, skillsFilters, isLoading, onSkillFocusConfirm, onReviewSkill, onExploreSkill} = props;\n  const {translate} = context;\n  const [open, setOpen] = useState(false);\n  const [selectedSkillsList, setSelectedSkillsList] = useState([...selectedSkills]);\n  const [skillFocusSelected, setSkillFocusSelected] = useState(undefined);\n  const [activeFilter, setActiveFilter] = useState('all');\n\n  const skillsReviewReady = useMemo(() =>  {\n    return skills.filter(skill => skillsFilters[skill].review);\n  }, [skills, skillsFilters]);\n\n  const graphDatas = useMemo(() => {\n    const data = {};\n    selectedSkillsList.forEach((skill) => (data[skill] = skillsStats[skill].score));\n    return data;\n  }, [selectedSkillsList, skillsStats]);\n\n  const graphLegends = useMemo(() => {\n    const data = {};\n    selectedSkillsList.forEach((skill) => (data[skill] = skillsLocales[skill]));\n    return data;\n  }, [selectedSkillsList, skillsLocales]);\n\n  const filters = [\n    {\n      name: 'all',\n      skills: skills,\n    }, \n    {\n      name: 'review',\n      skills: skillsReviewReady,\n    }\n  ]\n\n  const coursedCompletedData = useMemo(\n    () =>\n      skillFocusSelected\n        ? skillsStats[skillFocusSelected].coursesCompleted\n        : selectedSkillsList.reduce((sum, skill) => sum + skillsStats[skill].coursesCompleted, 0),\n    [skillFocusSelected, skillsStats, selectedSkillsList, skillFocusSelected]\n  );\n\n  const questionsAnsweredData = useMemo(\n    () =>\n      skillFocusSelected\n        ? skillsStats[skillFocusSelected].questionsAnswered\n        : selectedSkillsList.reduce((sum, skill) => sum + skillsStats[skill].questionsAnswered, 0),\n    [skillFocusSelected, skillsStats, selectedSkillsList, skillFocusSelected]\n  );\n\n  const learningHoursData = useMemo(\n    () =>\n      skillFocusSelected\n        ? skillsStats[skillFocusSelected].learningHours\n        : selectedSkillsList.reduce((sum, skill) => sum + skillsStats[skill].learningHours, 0),\n    [skillFocusSelected, skillsStats, selectedSkillsList, skillFocusSelected]\n  );\n\n  const skillChartPaneLegends = useMemo(\n    () => translate('on', {focusedSkill: skillFocusSelected ? skillsLocales[skillFocusSelected] : translate('focused_skills')}),\n    [translate, skillsLocales, skillFocusSelected]\n  );\n  const skillChartPanelProps = [\n    {\n      title: translate('courses_completed'),\n      value: coursedCompletedData,\n      legend: skillChartPaneLegends,\n      icon: {iconName: 'book-open-cover', backgroundColor: '#D9F4F7'}\n    },\n    {\n      title: translate('questions_answered'),\n      value: questionsAnsweredData,\n      legend: skillChartPaneLegends,\n      icon: {iconName: 'circle-question', backgroundColor: '#FFDCD1'}\n    },\n    {\n      title: translate('learning_hours'),\n      value: learningHoursData,\n      legend: skillChartPaneLegends,\n      icon: {iconName: 'clock', backgroundColor: '#FAD6DE'}\n    }\n  ];\n\n  const handleOnDotClick = useCallback(\n    skillRef => setSkillFocusSelected(skillRef),\n    [setSkillFocusSelected]\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\n  const TooltipContent = 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('Choose 1 Skill')}</li>\n          <li>{translate('Answer 5 Questions')}</li>\n          <li>{translate('You have Infinite Lives')}</li>\n          <li>{translate('Get it all right')}</li>\n        </ol>\n      </div>\n    ),\n    [translate]\n  );\n\n  return (\n    <div className={style.container}>\n      <SkillPickerModal\n        skills={skills}\n        selectedSkills={selectedSkillsList}\n        skillsLocales={skillsLocales}\n        isOpen={open}\n        isLoading={isLoading}\n        onCancel={handleCloseSkillPicker}\n        onConfirm={handleConfirmSkillPicker}\n        onClose={handleCloseSkillPicker}\n      />\n      <div className={style.skillFocusContainer}>\n        <header className={style.skillFocusHeader}>\n          <div className={style.skillFocusHeaderWrapper}>\n            <div className={style.skillFocusHeaderIcon}>\n              <Icon\n                iconName=\"bullseye-arrow\"\n                backgroundColor=\"#DDD1FF\"\n                borderRadius=\"12px\"\n                size={{faSize: 20, wrapperSize: 48}}\n              />\n            </div>\n            <div className={style.skillFocusHeaderContent}>\n              <div className={style.skillFocusHeaderTitle}>{translate('skill_focus')}</div>\n              <div className={style.skillFocusHeaderDescription}>\n                {translate('skills_focus_description')}\n              </div>\n            </div>\n          </div>\n            {selectedSkillsList.length > 0 ? (\n              <ChangeSkillFocusButton onClick={handleOpenSkillPicker} />\n            ) : null}\n        </header>\n        {selectedSkillsList.length > 0 ? (\n          <div className={style.skillFocusContent}>\n            <div className={style.radarContainer}>\n              <ResponsiveLearningProfileRadarChart\n                totalDataset={1}\n                height={424}\n                width={680}\n                data={graphDatas}\n                legend={graphLegends}\n                onClick={handleOnDotClick}\n                colors={[\n                  {\n                    gradient: {\n                      fill: ['#0062ffff', '#8000ff85'],\n                      stroke: ['#0062ffff', '#8000FF']\n                    },\n                    percentage: {\n                      color: '#0061FF',\n                      background:\n                        'linear-gradient(180deg, rgba(0, 97, 255, 0.10) 0%, rgba(147, 107, 255, 0.10) 100%)'\n                    },\n                    label: {\n                      color: '#020202ff'\n                    }\n                  }\n                ]}\n              />\n            </div>\n            <SkillsChartSideInformationPanel sidePanelItems={skillChartPanelProps} />\n          </div>\n        ) : (\n          <div className={style.skillFocusEmpty}>\n            <Picture\n              className={style.img}\n              src={\n                'https://t4.ftcdn.net/jpg/01/43/23/83/360_F_143238306_lh0ap42wgot36y44WybfQpvsJB5A1CHc.jpg'\n              }\n              alt={'demo'}\n            />\n            <div className={style.skillFocusEmptyTitle}>{translate('skill_focus_empty_title')}</div>\n            <div className={style.skillFocusEmptyDescription}>\n              {translate('skills_focus_empty_description')}\n            </div>\n            <ButtonLink\n              customStyle={{\n                width: '168px'\n              }}\n              type={'primary'}\n              onClick={handleOpenSkillPicker}\n              label={translate('choose_your_focus')}\n            />\n          </div>\n        )}\n      </div>\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')}</div>\n          <div className={style.skillListHeaderDescription}>\n            {translate('Explore or review skills')}\n            <ToolTip\n              fontSize={12}\n              iconContainerClassName={style.infoIconTooltip}\n              tooltipClassName={style.tooltip}\n              TooltipContent={TooltipContent}\n              closeToolTipInformationTextAriaLabel={translate(\n                'Press the escape key to close the information text'\n              )}\n            />\n          </div>\n        </div>\n      </header>\n      <div className={style.skillFilterContainer}>\n        {filters.map((filter, index) => {\n          function handleFilterClick() {\n            setActiveFilter(filter.name);\n          }\n\n          return (\n            <div key={index}>\n              <FilterButton\n                active={activeFilter === filter.name}\n                filter={translate(filter.name)}\n                skillTotal={filter.skills.length}\n                onClick={handleFilterClick}\n              />\n            </div>\n          );\n        })}\n      </div>\n      <div className={style.skillListContainer}>\n        {skills.map((skill, index) => {\n          if (activeFilter === 'review' && !skillsFilters[skill].review) return null;\n          function handleReviewSkill() {\n            onReviewSkill(skill);\n          }\n          function handleExploreSkill() {\n            onExploreSkill(skill);\n          }\n          return (\n            <div key={index}>\n              <LearnerSkillCard\n                skillTitle={skillsLocales[skill]}\n                focus={selectedSkills.includes(skill)}\n                metrics={{\n                  skillCourses: skillsStats[skill].courses,\n                  skillQuestions: skillsStats[skill].questionsAnswered,\n                  completedCourses: skillsStats[skill].coursesCompleted\n                }}\n                review={skillsFilters[skill].review}\n                onReviewClick={handleReviewSkill}\n                onExploreClick={handleExploreSkill}\n              />\n            </div>\n          )\n        })}\n      </div>\n    </div>\n  );\n};\n\nMyLearning.contextTypes = {\n  translate: Provider.childContextTypes.translate\n};\n\nMyLearning.propTypes = {\n  skills: PropTypes.arrayOf(PropTypes.string),\n  selectedSkills: PropTypes.arrayOf(PropTypes.string),\n  skillsStats: PropTypes.objectOf(\n    PropTypes.shape({\n      score: PropTypes.number,\n      courses: PropTypes.number,\n      coursesCompleted: PropTypes.number,\n      questionsAnswered: PropTypes.number,\n      learningHours: PropTypes.number,\n    })\n  ),\n  skillsFilters: PropTypes.objectOf(\n    PropTypes.shape({\n      review: PropTypes.boolean,\n    })\n  ),\n  skillsLocales: PropTypes.objectOf(PropTypes.string),\n  isLoading: PropTypes.bool,\n  onSkillFocusConfirm: PropTypes.func,\n  onReviewSkill: PropTypes.func,\n  onExploreSkill: PropTypes.func\n};\n\nexport default MyLearning;\n"],"mappings":"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"}

package/lib/template/my-learning/style.css

@@ -0,0 +1,196 @@
+@value colors: "../../variables/colors.css";
+@value breakpoints: "../../variables/breakpoints.css";
+@value tablet from breakpoints;
+@value mobile from breakpoints;
+@value cm_grey_100 from colors;
+@value cm_grey_500 from colors;
+
+.container {
+  font-family: "Gilroy";
+  font-style: normal;
+  margin-top: 48px;
+  margin-bottom: 48px;
+  margin-left: auto;
+  margin-right: auto;
+  position: relative;
+  box-sizing: border-box;
+  height: 100%;
+  width: 100%;
+  max-width: 1080px;
+}
+
+.skillFocusContainer {
+  border-radius: 16px;
+  border: 1px solid cm_grey_100;
+  overflow: hidden;
+  margin-bottom: 40px;
+}
+
+.skillFocusHeader,
+.skillListHeader {
+  padding: 24px;
+  display: flex;
+  position: relative;
+  border-bottom: 1px solid cm_grey_100;
+}
+
+.skillFocusHeaderIcon,
+.skillListHeaderIcon {
+  border-radius: 12px;
+  overflow: hidden;
+  margin-right: 12px;
+}
+
+.skillFocusHeaderWrapper {
+  display: flex;
+  flex: 1;
+}
+
+.skillFocusHeaderContent,
+.skillListHeaderContent {
+  flex: 1;
+}
+
+.skillFocusHeaderContent {
+  margin-right: 16px;
+}
+
+.skillFocusHeaderTitle,
+.skillListHeaderTitle {
+  font-size: 18px;
+  font-weight: 600;
+  line-height: 24px;
+}
+
+.skillFocusHeaderDescription,
+.skillListHeaderDescription {
+  font-size: 14px;
+  font-weight: 500;
+  line-height: 20px;
+  color: cm_grey_500;
+  display: flex;
+  align-items: center;
+}
+
+.skillFocusEmpty {
+  display: flex;
+  flex-direction: column;
+  align-items: center;
+  justify-content: center;
+  padding: 72px;
+}
+
+.skillFocusEmptyTitle {
+  font-size: 20px;
+  font-weight: 700;
+  line-height: 28px;
+  margin-bottom: 8px;
+}
+
+.skillFocusEmptyDescription {
+  width: 502px;
+  text-align: center;
+  font-size: 16px;
+  font-weight: 500;
+  line-height: 22px;
+  margin-bottom: 32px;
+}
+
+.img {
+  width: 204px;
+  height: 200px;
+  margin-bottom: 32px;
+  border-radius: 50%;
+}
+
+.skillFocusContent {
+  display: flex;
+  padding: 24px;
+}
+
+.radarContainer {
+  width: 700px;
+  height: 444px;
+}
+
+.skillFilterContainer {
+  display: flex;
+  align-items: center;
+  gap: 8px;
+  margin-bottom: 32px;
+}
+
+.skillFilterNumber,
+.skillFilterNumberInActive {
+  border-radius: 50%;
+  background-color: #D6E6FF;
+  color: #0061FF;
+  padding: 2px 4px;
+  margin-left: 8px;
+  font-size: 10px;
+  font-weight: 600;
+  line-height: 12px;
+}
+
+.skillFilterNumberInActive {
+  background-color: #EAEAEB;
+  color: #515161;
+}
+
+.infoIconTooltip {
+  background-color: transparent;
+}
+
+.tooltip {
+  padding: 8px 12px;
+  width: 238px;
+  color: #FFF;
+  font-size: 12px;
+  font-style: normal;
+  line-height: 16px;
+  right: -100px;
+  
+  ol {
+    padding: 14px;
+  }
+}
+
+.skillListHeader {
+  padding: 24px 0;
+  border: none;
+}
+
+.skillListContainer {
+  display: flex;
+  flex-wrap: wrap;
+  gap: 16px;
+}
+
+@media mobile {
+  .skillFocusHeaderWrapper {
+    margin-bottom: 16px;
+  }
+
+  .skillFocusHeader{
+    flex-direction: column;
+  }
+
+  .skillFocusContent {
+    flex-direction: column;
+  }
+
+  .radarContainer {
+    width: 100%;
+    height: 280px;
+    margin-bottom:48px;
+  }
+
+  .skillFilterContainer {
+    overflow-x: auto;
+  }
+
+  .skillListContainer {
+    align-items: center;
+    justify-content: center;
+  }
+}