@coorpacademy/components 11.32.24 → 11.32.26

package/lib/molecule/skill-picker-modal/index.js.map

@@ -1 +1 @@
-{"version":3,"file":"index.js","names":["SkillPickerModal","props","context","skills","selectedSkills","skillsLocales","isOpen","isLoading","maxSelectedSkills","minSelectedSkills","onCancel","onConfirm","onClose","translate","selectedSkillList","setSelectedSkillList","useState","handleCancel","useCallback","handleClose","skillList","useMemo","map","skill","skillTitle","skillRef","focus","includes","isError","length","footer","footerDescription","skillNumber","text","cancelButton","label","disabled","confirmButton","iconName","name","backgroundColor","style","skillPickerContainer","loaderContainer","loader","marginBottom","display","gap","flexWrap","index","handleChipClick","newSelectedSkillList","filter","selectedSkill","contextTypes","Provider","childContextTypes","propTypes","PropTypes","arrayOf","string","objectOf","bool","number","func"],"sources":["../../../src/molecule/skill-picker-modal/index.js"],"sourcesContent":["import React, {useMemo, useState, useCallback} from 'react';\nimport PropTypes from 'prop-types';\nimport filter from 'lodash/fp/filter';\nimport BaseModal from '../base-modal';\nimport Chip from '../../atom/chip';\nimport Loader from '../../atom/loader';\nimport Provider from '../../atom/provider';\nimport style from './style.css';\n\nconst SkillPickerModal = (props, context) => {\n  const {\n    skills,\n    selectedSkills,\n    skillsLocales,\n    isOpen,\n    isLoading,\n    maxSelectedSkills = 6,\n    minSelectedSkills = 3,\n    onCancel,\n    onConfirm,\n    onClose\n  } = props;\n  const {translate} = context;\n\n  const [selectedSkillList, setSelectedSkillList] = useState(selectedSkills);\n\n  const handleCancel = useCallback(() => {\n    setSelectedSkillList(selectedSkills);\n    onCancel();\n  }, [setSelectedSkillList, selectedSkills, onCancel]);\n\n  const handleClose = useCallback(() => {\n    setSelectedSkillList(selectedSkills);\n    onClose();\n  }, [setSelectedSkillList, selectedSkills, onClose]);\n\n  const skillList = useMemo(() => {\n    return skills.map(skill => {\n      return {\n        skillTitle: skillsLocales[skill],\n        skillRef: skill,\n        focus: selectedSkillList.includes(skill)\n      };\n    });\n  }, [skills, selectedSkillList, skillsLocales]);\n\n  const isError = useMemo(\n    () =>\n      selectedSkillList.length > maxSelectedSkills || selectedSkillList.length < minSelectedSkills,\n    [selectedSkillList, maxSelectedSkills, minSelectedSkills]\n  );\n\n  const footer = useMemo(() => {\n    const footerDescription =\n      selectedSkillList.length > maxSelectedSkills\n        ? translate('skill_focus_footer_error_description', {\n            skillNumber: selectedSkillList.length - maxSelectedSkills\n          })\n        : translate('skill_focus_footer_description', {\n            skillNumber: minSelectedSkills - selectedSkillList.length\n          });\n    return {\n      text: isLoading || !isError ? '' : footerDescription,\n      isError,\n      cancelButton: {\n        onCancel: handleCancel,\n        label: translate('cancel'),\n        disabled: isLoading || isError\n      },\n      confirmButton: {\n        onConfirm: () => onConfirm(selectedSkillList),\n        label: translate('confirm'),\n        iconName: 'circle-check',\n        disabled: isLoading || isError\n      }\n    };\n  }, [\n    isError,\n    handleCancel,\n    onConfirm,\n    translate,\n    selectedSkillList,\n    isLoading,\n    maxSelectedSkills,\n    minSelectedSkills\n  ]);\n\n  if ((!isLoading && !skills) || !isOpen) return null;\n\n  return (\n    <BaseModal\n      title={translate('skill_focus')}\n      description={translate('skill_focus_description')}\n      isOpen={isOpen}\n      onClose={handleClose}\n      footer={footer}\n      headerIcon={{\n        name: 'bullseye-arrow',\n        backgroundColor: '#DDD1FF'\n      }}\n    >\n      <div className={style.skillPickerContainer}>\n        {isLoading ? (\n          <div className={style.loaderContainer}>\n            <Loader className={style.loader} theme=\"coorpmanager\" />\n          </div>\n        ) : (\n          <>\n            <div style={{marginBottom: '16px'}}>\n              {`${selectedSkillList.length} ${translate('selected')}`}\n            </div>\n            <div style={{display: 'flex', gap: '16px', flexWrap: 'wrap'}}>\n              {skillList.map((skill, index) => {\n                const {skillTitle, skillRef, focus} = skill;\n                function handleChipClick() {\n                  const newSelectedSkillList = focus\n                    ? filter(selectedSkill => selectedSkill !== skillRef, selectedSkillList)\n                    : [...selectedSkillList, skill.skillRef];\n                  setSelectedSkillList(newSelectedSkillList);\n                }\n\n                return (\n                  <Chip\n                    text={skillTitle}\n                    selected={focus}\n                    onClick={handleChipClick}\n                    key={index}\n                    backgroundColor=\"skin\"\n                  />\n                );\n              })}\n            </div>\n          </>\n        )}\n      </div>\n    </BaseModal>\n  );\n};\n\nSkillPickerModal.contextTypes = {\n  translate: Provider.childContextTypes.translate\n};\n\nSkillPickerModal.propTypes = {\n  skills: PropTypes.arrayOf(PropTypes.string),\n  selectedSkills: PropTypes.arrayOf(PropTypes.string),\n  skillsLocales: PropTypes.objectOf(PropTypes.string),\n  isOpen: PropTypes.bool,\n  isLoading: PropTypes.bool,\n  minSelectedSkills: PropTypes.number,\n  maxSelectedSkills: PropTypes.number,\n  onCancel: PropTypes.func,\n  onConfirm: PropTypes.func,\n  onClose: PropTypes.func\n};\n\nexport default SkillPickerModal;\n"],"mappings":"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"}
+{"version":3,"file":"index.js","names":["SkillPickerModal","props","context","skills","selectedSkills","skillsLocales","skillsScore","isOpen","isLoading","maxSelectedSkills","minSelectedSkills","onCancel","onConfirm","onClose","translate","sortedSkills","setSortedSkills","useState","skill","currentSort","setCurrentSort","selectedSkillList","setSelectedSkillList","handleCancel","useCallback","handleClose","skillProgressAvailable","skillList","useMemo","map","skillTitle","skillRef","focus","includes","score","isError","length","footer","footerDescription","skillNumber","text","cancelButton","label","disabled","confirmButton","iconName","sorting","theme","options","value","name","selected","onChange","useEffect","prev","backgroundColor","style","skillPickerContainer","loaderContainer","loader","ctaWrapper","sortWrapper","display","gap","flexWrap","index","handleChipClick","newSelectedSkillList","selectedSkill","subText","toFixed","contextTypes","Provider","childContextTypes","propTypes","PropTypes","arrayOf","string","objectOf","number","bool","func"],"sources":["../../../src/molecule/skill-picker-modal/index.js"],"sourcesContent":["import React, {useMemo, useState, useCallback, useEffect} from 'react';\nimport PropTypes from 'prop-types';\nimport {filter, some, sortBy} from 'lodash/fp';\nimport BaseModal from '../base-modal';\nimport Chip from '../../atom/chip';\nimport Loader from '../../atom/loader';\nimport Select from '../../atom/select';\nimport Provider from '../../atom/provider';\nimport style from './style.css';\n\nconst SkillPickerModal = (props, context) => {\n  const {\n    skills,\n    selectedSkills,\n    skillsLocales,\n    skillsScore,\n    isOpen,\n    isLoading,\n    maxSelectedSkills = 6,\n    minSelectedSkills = 3,\n    onCancel,\n    onConfirm,\n    onClose\n  } = props;\n  const {translate} = context;\n\n  const [sortedSkills, setSortedSkills] = useState(sortBy(skill => skillsLocales[skill], skills));\n  const [currentSort, setCurrentSort] = useState('alphabetical');\n  const [selectedSkillList, setSelectedSkillList] = useState(selectedSkills);\n\n  const handleCancel = useCallback(() => {\n    setSelectedSkillList(selectedSkills);\n    onCancel();\n  }, [setSelectedSkillList, selectedSkills, onCancel]);\n\n  const handleClose = useCallback(() => {\n    setSelectedSkillList(selectedSkills);\n    onClose();\n  }, [setSelectedSkillList, selectedSkills, onClose]);\n\n  const skillProgressAvailable = some(skill => skillsScore[skill] > 0, skills);\n\n  const skillList = useMemo(() => {\n    return sortedSkills.map(skill => {\n      return {\n        skillTitle: skillsLocales[skill],\n        skillRef: skill,\n        focus: selectedSkillList.includes(skill),\n        score: skillsScore[skill]\n      };\n    });\n  }, [sortedSkills, selectedSkillList, skillsLocales, skillsScore]);\n\n  const isError = useMemo(\n    () =>\n      selectedSkillList.length > maxSelectedSkills || selectedSkillList.length < minSelectedSkills,\n    [selectedSkillList, maxSelectedSkills, minSelectedSkills]\n  );\n\n  const footer = useMemo(() => {\n    const footerDescription =\n      selectedSkillList.length > maxSelectedSkills\n        ? translate('skill_focus_footer_error_description', {\n            skillNumber: selectedSkillList.length - maxSelectedSkills\n          })\n        : translate('skill_focus_footer_description', {\n            skillNumber: minSelectedSkills - selectedSkillList.length\n          });\n    return {\n      text: isLoading || !isError ? '' : footerDescription,\n      isError,\n      cancelButton: {\n        onCancel: handleCancel,\n        label: translate('cancel'),\n        disabled: isLoading || isError\n      },\n      confirmButton: {\n        onConfirm: () => onConfirm(selectedSkillList),\n        label: translate('confirm'),\n        iconName: 'circle-check',\n        disabled: isLoading || isError\n      }\n    };\n  }, [\n    isError,\n    handleCancel,\n    onConfirm,\n    translate,\n    selectedSkillList,\n    isLoading,\n    maxSelectedSkills,\n    minSelectedSkills\n  ]);\n\n  const sorting = useMemo(\n    () => ({\n      theme: 'skillDetail',\n      options: ['alphabetical', 'progress'].map(value => ({\n        name: value === 'progress' ? translate('progress') : translate('alphabetical'),\n        value,\n        selected: currentSort === value\n      })),\n      onChange: value => setCurrentSort(value)\n    }),\n    [currentSort, translate]\n  );\n\n  useEffect(() => {\n    // eslint-disable-next-line lodash-fp/no-extraneous-function-wrapping\n    setSortedSkills(prev =>\n      sortBy(\n        skill => (currentSort === 'progress' ? -skillsScore[skill] : skillsLocales[skill]),\n        prev\n      )\n    );\n  }, [currentSort, skillsScore, skillsLocales, setSortedSkills]);\n\n  if ((!isLoading && !skills) || !isOpen) return null;\n\n  return (\n    <BaseModal\n      title={translate('skill_focus')}\n      description={translate('skill_focus_description')}\n      isOpen={isOpen}\n      onClose={handleClose}\n      footer={footer}\n      headerIcon={{\n        name: 'bullseye-arrow',\n        backgroundColor: '#DDD1FF'\n      }}\n    >\n      <div className={style.skillPickerContainer}>\n        {isLoading ? (\n          <div className={style.loaderContainer}>\n            <Loader className={style.loader} theme=\"coorpmanager\" />\n          </div>\n        ) : (\n          <>\n            <div className={style.ctaWrapper}>\n              <div>{`${selectedSkillList.length} ${translate('selected')}`}</div>\n              {skillProgressAvailable ? (\n                <div className={style.sortWrapper}>\n                  {translate('sort_by')}\n                  <Select {...sorting} aria-label=\"All courses sort\" />\n                </div>\n              ) : null}\n            </div>\n            <div style={{display: 'flex', gap: '16px', flexWrap: 'wrap'}}>\n              {skillList.map((skill, index) => {\n                const {skillTitle, skillRef, focus, score} = skill;\n                function handleChipClick() {\n                  const newSelectedSkillList = focus\n                    ? filter(selectedSkill => selectedSkill !== skillRef, selectedSkillList)\n                    : [...selectedSkillList, skill.skillRef];\n                  setSelectedSkillList(newSelectedSkillList);\n                }\n\n                return (\n                  <Chip\n                    {...(skillProgressAvailable ? {subText: `${score.toFixed(1)}%`} : {})}\n                    text={skillTitle}\n                    selected={focus}\n                    onClick={handleChipClick}\n                    key={index}\n                    backgroundColor=\"skin\"\n                  />\n                );\n              })}\n            </div>\n          </>\n        )}\n      </div>\n    </BaseModal>\n  );\n};\n\nSkillPickerModal.contextTypes = {\n  translate: Provider.childContextTypes.translate\n};\n\nSkillPickerModal.propTypes = {\n  skills: PropTypes.arrayOf(PropTypes.string),\n  selectedSkills: PropTypes.arrayOf(PropTypes.string),\n  skillsLocales: PropTypes.objectOf(PropTypes.string),\n  skillsScore: PropTypes.objectOf(PropTypes.number),\n  isOpen: PropTypes.bool,\n  isLoading: PropTypes.bool,\n  minSelectedSkills: PropTypes.number,\n  maxSelectedSkills: PropTypes.number,\n  onCancel: PropTypes.func,\n  onConfirm: PropTypes.func,\n  onClose: PropTypes.func\n};\n\nexport default SkillPickerModal;\n"],"mappings":"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"}

package/lib/molecule/skill-picker-modal/style.css

@@ -21,6 +21,20 @@
   height: 40px;
 }
 
+.ctaWrapper {
+  display: flex;
+  justify-content: space-between;
+  align-items: center;
+  margin-bottom: 16px;
+}
+
+.sortWrapper {
+  display: flex;
+  align-items: center;
+  gap: 12px;
+  color: cm_grey_500;
+}
+
 @media mobile {
   .skillPickerContainer {
     width: 100%;

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

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

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

@@ -224,6 +224,7 @@ const MyLearning = (props, context) => {
       backgroundColor: '#FFDCD1'
     }
   }];
+  const skillsScore = (0, _react.useMemo)(() => (0, _pipe2.default)((0, _map2.default)(skill => [skill, (0, _getOr2.default)(0, [skill, 'stats', 'score'], skillsInformation)]), _fromPairs2.default)(skills), [skills, skillsInformation]);
   const handleOnDotClick = (0, _react.useCallback)(skillRef => {
     setSkillFocusSelectedOnChart(skillRef);
   }, [setSkillFocusSelectedOnChart]);
@@ -268,6 +269,7 @@ const MyLearning = (props, context) => {
     className: _style.default.container
   }, /*#__PURE__*/_react.default.createElement(_skillPickerModal.default, {
     skills: skills,
+    skillsScore: skillsScore,
     selectedSkills: selectedSkillsList,
     skillsLocales: skillsLocales,
     isOpen: open,

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

@@ -1 +1 @@
-{"version":3,"file":"index.js","names":["ChangeSkillFocusButton","props","context","onClick","skin","translate","primarySkinColor","backgroundColor","convert","color","transition","position","faIcon","name","size","contextTypes","Provider","childContextTypes","propTypes","PropTypes","func","FilterButton","active","filter","skillTotal","Content","useCallback","style","skillFilterNumber","skillFilterNumberInActive","buttonProps","customStyle","width","content","bool","string","number","MyLearning","skills","selectedSkills","skillsInformation","skillsLocales","learnerFeature","isLoading","onSkillFocusConfirm","onReviewSkill","onExploreSkill","learningPriorities","open","setOpen","useState","selectedSkillsList","setSelectedSkillsList","skillFocusSelectedOnChart","setSkillFocusSelectedOnChart","undefined","searchValue","setSearchValue","searchResults","setSearchResults","skillRef","activeFilter","setActiveFilter","skillsReviewReady","useMemo","skill","availableForReview","graphDatas","toFixed","graphLegends","filters","all","review","sumKpi","kpi","skillFocusSelectedOnChartScore","stats","coursedCompletedData","questionsToReviewData","learningTimeData","skillChartPaneLegends","focusedSkill","skillChartPanelProps","title","value","legend","icon","iconName","formatMinutes","handleOnDotClick","handleOpenSkillPicker","handleCloseSkillPicker","handleConfirmSkillPicker","focusSkillList","handleSearch","searchValueIncluded","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","CardsList"],"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 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          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":["ChangeSkillFocusButton","props","context","onClick","skin","translate","primarySkinColor","backgroundColor","convert","color","transition","position","faIcon","name","size","contextTypes","Provider","childContextTypes","propTypes","PropTypes","func","FilterButton","active","filter","skillTotal","Content","useCallback","style","skillFilterNumber","skillFilterNumberInActive","buttonProps","customStyle","width","content","bool","string","number","MyLearning","skills","selectedSkills","skillsInformation","skillsLocales","learnerFeature","isLoading","onSkillFocusConfirm","onReviewSkill","onExploreSkill","learningPriorities","open","setOpen","useState","selectedSkillsList","setSelectedSkillsList","skillFocusSelectedOnChart","setSkillFocusSelectedOnChart","undefined","searchValue","setSearchValue","searchResults","setSearchResults","skillRef","activeFilter","setActiveFilter","skillsReviewReady","useMemo","skill","availableForReview","graphDatas","toFixed","graphLegends","filters","all","review","sumKpi","kpi","skillFocusSelectedOnChartScore","stats","coursedCompletedData","questionsToReviewData","learningTimeData","skillChartPaneLegends","focusedSkill","skillChartPanelProps","title","value","legend","icon","iconName","formatMinutes","skillsScore","handleOnDotClick","handleOpenSkillPicker","handleCloseSkillPicker","handleConfirmSkillPicker","focusSkillList","handleSearch","searchValueIncluded","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","CardsList"],"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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"}

package/lib/template/playlist-detail/index.d.ts

@@ -0,0 +1,96 @@
+export default PlaylistDetail;
+declare function PlaylistDetail(props: any, context: any): JSX.Element;
+declare namespace PlaylistDetail {
+    namespace contextTypes {
+        const skin: PropTypes.Requireable<PropTypes.InferProps<{
+            common: PropTypes.Requireable<{
+                [x: string]: any;
+            }>;
+            images: PropTypes.Requireable<PropTypes.InferProps<{
+                'logo-mobile': PropTypes.Requireable<any>;
+                logo: PropTypes.Requireable<any>;
+                'logo-email': PropTypes.Requireable<any>;
+                login: PropTypes.Requireable<any>;
+            }>>;
+            icons: PropTypes.Requireable<{
+                [x: string]: any;
+            }>;
+            mod: PropTypes.Requireable<{
+                [x: string]: any;
+            }>;
+            courses: PropTypes.Requireable<any[]>;
+            texts: PropTypes.Requireable<{
+                [x: string]: any;
+            }>;
+        }>>;
+        const translate: PropTypes.Requireable<(...args: any[]) => any>;
+    }
+    namespace propTypes {
+        const title: PropTypes.Validator<string>;
+        const coverImages: PropTypes.Validator<(PropTypes.InferProps<{
+            type: PropTypes.Requireable<string>;
+            image: PropTypes.Requireable<string>;
+        }> | null | undefined)[]>;
+        const playlistRef: PropTypes.Validator<string>;
+        const description: PropTypes.Requireable<string>;
+        const ongoingCourses: PropTypes.Requireable<PropTypes.InferProps<{
+            list: PropTypes.Requireable<(PropTypes.InferProps<any> | null | undefined)[]>;
+            customStyle: PropTypes.Requireable<{
+                [x: string]: string | null | undefined;
+            }>;
+            loading: PropTypes.Requireable<boolean>;
+        }>>;
+        const playlistCourses: PropTypes.Requireable<PropTypes.InferProps<{
+            list: PropTypes.Requireable<(PropTypes.InferProps<any> | null | undefined)[]>;
+            customStyle: PropTypes.Requireable<{
+                [x: string]: string | null | undefined;
+            }>;
+            loading: PropTypes.Requireable<boolean>;
+        }>>;
+        const totalCourses: PropTypes.Requireable<number>;
+        const filters: PropTypes.Requireable<PropTypes.InferProps<{
+            onChange: PropTypes.Requireable<(...args: any[]) => any>;
+            options: PropTypes.Requireable<(PropTypes.InferProps<{
+                name: PropTypes.Validator<string>;
+                value: PropTypes.Requireable<NonNullable<string | number | null | undefined>>;
+                selected: PropTypes.Requireable<boolean>;
+                validOption: PropTypes.Requireable<boolean>;
+            }> | null | undefined)[]>;
+        }>>;
+        const sorting: PropTypes.Requireable<PropTypes.InferProps<{
+            title: PropTypes.Requireable<string>;
+            name: PropTypes.Requireable<string>;
+            className: PropTypes.Requireable<string>;
+            borderClassName: PropTypes.Requireable<string>;
+            disabled: PropTypes.Requireable<boolean>;
+            multiple: PropTypes.Requireable<boolean>;
+            description: PropTypes.Requireable<string>;
+            required: PropTypes.Requireable<boolean>;
+            onChange: PropTypes.Requireable<(...args: any[]) => any>;
+            theme: PropTypes.Requireable<string>;
+            options: PropTypes.Requireable<(PropTypes.InferProps<{
+                name: PropTypes.Validator<string>;
+                value: PropTypes.Requireable<NonNullable<string | number | null | undefined>>;
+                selected: PropTypes.Requireable<boolean>;
+                validOption: PropTypes.Requireable<boolean>;
+            }> | null | undefined)[]>;
+            optgroups: PropTypes.Requireable<(PropTypes.InferProps<{
+                label: PropTypes.Validator<string>;
+                options: PropTypes.Requireable<(PropTypes.InferProps<{
+                    name: PropTypes.Validator<string>;
+                    value: PropTypes.Requireable<NonNullable<string | number | null | undefined>>;
+                    selected: PropTypes.Requireable<boolean>;
+                    validOption: PropTypes.Requireable<boolean>;
+                }> | null | undefined)[]>;
+            }> | null | undefined)[]>;
+            modified: PropTypes.Requireable<boolean>;
+            error: PropTypes.Requireable<boolean>;
+            'aria-label': PropTypes.Requireable<string>;
+            'aria-labelledby': PropTypes.Requireable<string>;
+        }>>;
+        const onBackClick: PropTypes.Requireable<(...args: any[]) => any>;
+        const onContinueLearningClick: PropTypes.Requireable<(...args: any[]) => any>;
+    }
+}
+import PropTypes from "prop-types";
+//# sourceMappingURL=index.d.ts.map

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

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

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

@@ -0,0 +1,134 @@
+"use strict";
+
+exports.__esModule = true;
+exports.default = void 0;
+
+var _react = _interopRequireWildcard(require("react"));
+
+var _propTypes = _interopRequireDefault(require("prop-types"));
+
+var _classnames = _interopRequireDefault(require("classnames"));
+
+var _provider = _interopRequireDefault(require("../../atom/provider"));
+
+var _tag = _interopRequireDefault(require("../../atom/tag"));
+
+var _select = _interopRequireWildcard(require("../../atom/select"));
+
+var _icon = _interopRequireDefault(require("../../atom/icon"));
+
+var _cardsGrid = _interopRequireDefault(require("../../organism/cards-grid"));
+
+var _allCourses = _interopRequireDefault(require("../skill-detail/all-courses"));
+
+var _continueLearning = _interopRequireDefault(require("../skill-detail/continue-learning"));
+
+var _playlistDetailCover = _interopRequireDefault(require("../../molecule/playlist-detail-cover"));
+
+var _skillDetail = require("../skill-detail");
+
+var _style = _interopRequireDefault(require("./style.css"));
+
+function _interopRequireDefault(obj) { return obj && obj.__esModule ? obj : { default: obj }; }
+
+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; }
+
+const DESCRIPTION_BREAKPOINT = 382;
+
+const PlaylistDetail = (props, context) => {
+  const {
+    title,
+    coverImages,
+    playlistRef,
+    description,
+    ongoingCourses,
+    playlistCourses,
+    totalCourses,
+    filters,
+    sorting,
+    onBackClick,
+    onContinueLearningClick
+  } = props;
+  const {
+    translate
+  } = context;
+  const [showMore, setShowMore] = (0, _react.useState)(false);
+  const handleShowMore = (0, _react.useCallback)(() => setShowMore(!showMore), [setShowMore, showMore]);
+  const Description = (0, _react.useCallback)(() => {
+    return /*#__PURE__*/_react.default.createElement("div", {
+      className: (0, _classnames.default)(_style.default.description, !showMore && _style.default.truncate)
+    }, description);
+  }, [showMore, description]);
+  return /*#__PURE__*/_react.default.createElement("div", {
+    className: _style.default.backgroundContainer
+  }, /*#__PURE__*/_react.default.createElement("div", {
+    className: _style.default.container,
+    "data-name": playlistRef
+  }, /*#__PURE__*/_react.default.createElement("div", {
+    className: _style.default.backButtonWrapper,
+    onClick: onBackClick
+  }, /*#__PURE__*/_react.default.createElement(_icon.default, {
+    iconName: "arrow-left",
+    size: {
+      faSize: 14,
+      wrapperSize: 14
+    }
+  })), /*#__PURE__*/_react.default.createElement("div", {
+    className: _style.default.ctaContainer
+  }, /*#__PURE__*/_react.default.createElement("div", {
+    className: _style.default.coverWrapper
+  }, /*#__PURE__*/_react.default.createElement(_playlistDetailCover.default, {
+    images: coverImages
+  })), /*#__PURE__*/_react.default.createElement("div", null, /*#__PURE__*/_react.default.createElement(_tag.default, {
+    label: translate('playlist')
+  }), /*#__PURE__*/_react.default.createElement("div", {
+    className: _style.default.title
+  }, title), description ? /*#__PURE__*/_react.default.createElement(_react.default.Fragment, null, /*#__PURE__*/_react.default.createElement(Description, null), description.length >= DESCRIPTION_BREAKPOINT ? /*#__PURE__*/_react.default.createElement("div", {
+    className: _style.default.showMoreWrapper,
+    onClick: handleShowMore
+  }, translate(showMore ? 'Show less' : 'Show more'), /*#__PURE__*/_react.default.createElement(_icon.default, {
+    iconName: showMore ? 'chevron-up' : 'chevron-down',
+    size: {
+      faSize: 14,
+      wrapperSize: 16
+    }
+  })) : null) : null, /*#__PURE__*/_react.default.createElement("div", {
+    className: _style.default.continueLearningButton
+  }, /*#__PURE__*/_react.default.createElement(_skillDetail.ContinueLearningButton, {
+    ongoingCoursesAvailable: !!ongoingCourses.list.length,
+    onClick: onContinueLearningClick
+  })))), /*#__PURE__*/_react.default.createElement(_continueLearning.default, {
+    ongoingCourses: ongoingCourses
+  }), /*#__PURE__*/_react.default.createElement(_allCourses.default, {
+    courses: playlistCourses,
+    totalCourses: totalCourses,
+    filters: filters,
+    sorting: sorting
+  })));
+};
+
+PlaylistDetail.contextTypes = {
+  skin: _provider.default.childContextTypes.skin,
+  translate: _provider.default.childContextTypes.translate
+};
+PlaylistDetail.propTypes = process.env.NODE_ENV !== "production" ? {
+  title: _propTypes.default.string.isRequired,
+  coverImages: _playlistDetailCover.default.propTypes.images,
+  playlistRef: _propTypes.default.string.isRequired,
+  description: _propTypes.default.string,
+  ongoingCourses: _propTypes.default.shape(_cardsGrid.default.propTypes),
+  playlistCourses: _propTypes.default.shape(_cardsGrid.default.propTypes),
+  totalCourses: _propTypes.default.number,
+  filters: _propTypes.default.shape({
+    onChange: _propTypes.default.func,
+    options: _propTypes.default.arrayOf(_propTypes.default.shape(_select.SelectOptionPropTypes))
+  }),
+  sorting: _propTypes.default.shape(_select.default.propTypes),
+  onBackClick: _propTypes.default.func,
+  onContinueLearningClick: _propTypes.default.func
+} : {};
+var _default = PlaylistDetail;
+exports.default = _default;
+//# sourceMappingURL=index.js.map

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

@@ -0,0 +1 @@
+{"version":3,"file":"index.js","names":["DESCRIPTION_BREAKPOINT","PlaylistDetail","props","context","title","coverImages","playlistRef","description","ongoingCourses","playlistCourses","totalCourses","filters","sorting","onBackClick","onContinueLearningClick","translate","showMore","setShowMore","useState","handleShowMore","useCallback","Description","classnames","style","truncate","backgroundContainer","container","backButtonWrapper","faSize","wrapperSize","ctaContainer","coverWrapper","length","showMoreWrapper","continueLearningButton","list","contextTypes","skin","Provider","childContextTypes","propTypes","PropTypes","string","isRequired","PlaylistDetailCover","images","shape","CardsGrid","number","onChange","func","options","arrayOf","SelectOptionPropTypes","Select"],"sources":["../../../src/template/playlist-detail/index.js"],"sourcesContent":["import React, {useCallback, useState} from 'react';\nimport PropTypes from 'prop-types';\nimport classnames from 'classnames';\nimport Provider from '../../atom/provider';\nimport Tag from '../../atom/tag';\nimport Select, {SelectOptionPropTypes} from '../../atom/select';\nimport Icon from '../../atom/icon';\nimport CardsGrid from '../../organism/cards-grid';\nimport AllCourses from '../skill-detail/all-courses';\nimport ContinueLearning from '../skill-detail/continue-learning';\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    ongoingCourses,\n    playlistCourses,\n    totalCourses,\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        <div className={style.backButtonWrapper} onClick={onBackClick}>\n          <Icon iconName=\"arrow-left\" size={{faSize: 14, wrapperSize: 14}} />\n        </div>\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={!!ongoingCourses.list.length}\n                onClick={onContinueLearningClick}\n              />\n            </div>\n          </div>\n        </div>\n        <ContinueLearning ongoingCourses={ongoingCourses} />\n        <AllCourses\n          courses={playlistCourses}\n          totalCourses={totalCourses}\n          filters={filters}\n          sorting={sorting}\n        />\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  ongoingCourses: PropTypes.shape(CardsGrid.propTypes),\n  playlistCourses: PropTypes.shape(CardsGrid.propTypes),\n  totalCourses: PropTypes.number,\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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"}