@coorpacademy/components 11.35.3-alpha.3 → 11.35.3-forcedeploy10.7

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

@@ -1 +1 @@
-{"version":3,"file":"index.js","names":["React","useCallback","useState","useMemo","PropTypes","convert","Provider","Icon","Picture","ButtonLink","ToolTip","ReviewNoSkills","SearchForm","SkillPickerModal","ResponsiveLearningProfileRadarChart","SkillsChartSideInformationPanel","LearnerSkillCard","searchValueIncluded","formatMinutes","CardsList","Title","COLORS","style","roundScore","value","Math","round","ChangeSkillFocusButton","props","context","onClick","skin","translate","primarySkinColor","_get","createElement","customStyle","backgroundColor","color","transition","hoverBackgroundColor","hoverColor","white","label","icon","position","faIcon","name","size","contextTypes","childContextTypes","propTypes","process","env","NODE_ENV","func","FilterButton","active","filter","skillTotal","Content","className","skillFilterNumber","skillFilterNumberInActive","gray","cm_grey_500","buttonProps","cm_grey_400","width","content","bool","string","number","MyLearning","skills","selectedSkills","skillsInformation","skillsLocales","learnerFeature","isLoading","onSkillFocusConfirm","onExploreSkill","learningPriorities","open","setOpen","selectedSkillsList","setSelectedSkillsList","skillFocusSelectedOnChart","setSkillFocusSelectedOnChart","undefined","searchValue","setSearchValue","searchResults","setSearchResults","_sortBy","skillRef","_getOr","activeFilter","setActiveFilter","skillsReviewReady","skill","availableForReview","graphDatas","_pipe","_map","_fromPairs","graphLegends","filters","all","review","sumKpi","kpi","skillFocusSelectedOnChartScore","_sumBy","stats","coursedCompletedData","questionsToReviewData","learningTimeData","skillChartPaneLegends","focusedSkill","skillChartPanelProps","title","legend","iconName","turquoise_100","pink_100","orange_100","skillsScore","handleOnDotClick","handleOpenSkillPicker","handleCloseSkillPicker","handleConfirmSkillPicker","focusSkillList","handleSearch","handleSearchReset","ReviewTooltipContent","backgroundContainer","_isEmpty","cards","cardsListContainer","_extends","type","subtitle","iconColor","cm_orange_800","borderRadius","tag","_size","container","isOpen","onCancel","onConfirm","onClose","skillFocusContainer","skillFocusHeader","skillFocusHeaderWrapper","skillFocusHeaderIcon","purple_100","faSize","wrapperSize","skillFocusHeaderContent","skillFocusHeaderTitle","skillFocusHeaderDescription","length","skillFocusContent","radarContainer","totalDataset","height","data","onExploreClick","colors","gradient","fill","stroke","percentage","background","sidePanelItems","skillFocusEmpty","img","src","alt","skillFocusEmptyTitle","skillFocusEmptyDescription","skillListHeader","skillListHeaderIcon","yellow_100","skillListHeaderContent","skillListHeaderTitle","skillListHeaderDescription","fontSize","iconContainerClassName","infoIconTooltip","tooltipClassName","tooltip","TooltipContent","closeToolTipInformationTextAriaLabel","toolBarContainer","skillFilterContainer","_keys","map","index","handleFilterClick","key","searchWrapper","search","placeholder","onChange","onReset","emptySearchResultContainer","emptySearchResultTitle","emptySearchResultDescription","emptySearchResultClearSearch","skillListContainer","skillListEmptyContainer","titleNoSkills","textNoSkills","iconSkillAriaLabel","imagePosition","defaultStats","score","contentCompleted","questionsToReview","handleExploreSkill","skillTitle","cardIndex","focus","includes","metrics","arrayOf","objectOf","shape","learningTime"],"sources":["../../../src/template/my-learning/index.js"],"sourcesContent":["import React, {useCallback, useState, useMemo} from 'react';\nimport PropTypes from 'prop-types';\nimport {convert} from 'css-color-function';\nimport {get, keys, map, fromPairs, pipe, sumBy, getOr, sortBy, size, isEmpty} from 'lodash/fp';\nimport Provider from '../../atom/provider';\nimport Icon from '../../atom/icon';\nimport Picture from '../../atom/picture';\nimport ButtonLink from '../../atom/button-link';\nimport ToolTip from '../../atom/tooltip';\nimport ReviewNoSkills from '../../organism/review-no-skills';\nimport SearchForm from '../../molecule/search-form';\nimport SkillPickerModal from '../../molecule/skill-picker-modal';\nimport ResponsiveLearningProfileRadarChart from '../../molecule/learning-profile-radar-chart';\nimport SkillsChartSideInformationPanel from '../../molecule/skills-chart-side-information-panel';\nimport LearnerSkillCard from '../../molecule/learner-skill-card';\nimport searchValueIncluded from '../../util/search-value-included';\nimport {formatMinutes} from '../../util/time-format';\nimport CardsList from '../../molecule/dashboard/cards-list';\nimport Title from '../../atom/title';\nimport {COLORS} from '../../variables/colors';\nimport style from './style.css';\n\nconst roundScore = value => Math.round(value * 10) / 10;\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={COLORS.white}\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))`) : COLORS.gray,\n            color: active ? primarySkinColor : COLORS.cm_grey_500\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))`) : COLORS.white,\n      color: active ? primarySkinColor : COLORS.cm_grey_400,\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    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, roundScore(getOr(0, [skill, 'stats', 'score'], skillsInformation))]),\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: COLORS.turquoise_100}\n    },\n    {\n      title: translate('skill_chart_side_panel_learning_hours'),\n      value: formatMinutes(learningTimeData),\n      legend: skillChartPaneLegends,\n      icon: {iconName: 'clock', backgroundColor: COLORS.pink_100}\n    },\n    {\n      title: translate('skill_chart_side_panel_questions_to_review'),\n      value: `${questionsToReviewData}`,\n      legend: skillChartPaneLegends,\n      icon: {iconName: 'circle-question', backgroundColor: COLORS.orange_100}\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: COLORS.cm_orange_800,\n                    borderRadius: '12px',\n                    backgroundColor: COLORS.orange_100\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={COLORS.purple_100}\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={COLORS.yellow_100}\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' && 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 handleExploreSkill() {\n                  onExploreSkill(skill);\n                }\n                const {score, content, questionsToReview} = skillsInformation[skill]\n                  ? skillsInformation[skill].stats\n                  : defaultStats;\n                const {color, name} = get([skill, 'icon'], skillsInformation);\n                return (\n                  <div key={index}>\n                    <LearnerSkillCard\n                      skillTitle={skillsLocales[skill]}\n                      cardIndex={index}\n                      focus={selectedSkills.includes(skill)}\n                      metrics={{\n                        score,\n                        content,\n                        questionsToReview\n                      }}\n                      icon={{color, name}}\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  onExploreSkill: PropTypes.func,\n  learningPriorities: PropTypes.shape(CardsList.propTypes)\n};\n\nexport default MyLearning;\n"],"mappings":"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","ignoreList":[]}
+{"version":3,"file":"index.js","names":["React","useCallback","useState","useMemo","PropTypes","convert","Provider","Icon","Picture","ButtonLink","ToolTip","ReviewNoSkills","SearchForm","SkillPickerModal","ResponsiveLearningProfileRadarChart","SkillsChartSideInformationPanel","LearnerSkillCard","searchValueIncluded","formatMinutes","CardsList","Title","COLORS","style","roundScore","value","Math","round","ChangeSkillFocusButton","props","context","onClick","skin","translate","primarySkinColor","_get","createElement","customStyle","backgroundColor","color","transition","hoverBackgroundColor","hoverColor","white","label","icon","position","faIcon","name","size","contextTypes","childContextTypes","propTypes","process","env","NODE_ENV","func","FilterButton","active","filter","skillTotal","Content","className","skillFilterNumber","skillFilterNumberInActive","cm_grey_100","cm_grey_500","buttonProps","cm_grey_400","width","content","bool","string","number","MyLearning","skills","selectedSkills","skillsInformation","skillsLocales","learnerFeature","isLoading","onSkillFocusConfirm","onExploreSkill","learningPriorities","open","setOpen","selectedSkillsList","setSelectedSkillsList","skillFocusSelectedOnChart","setSkillFocusSelectedOnChart","undefined","searchValue","setSearchValue","searchResults","setSearchResults","_sortBy","skillRef","_getOr","activeFilter","setActiveFilter","skillsReviewReady","skill","availableForReview","graphDatas","_pipe","_map","_fromPairs","graphLegends","filters","all","review","sumKpi","kpi","skillFocusSelectedOnChartScore","_sumBy","stats","coursedCompletedData","questionsToReviewData","learningTimeData","skillChartPaneLegends","focusedSkill","skillChartPanelProps","title","legend","iconName","turquoise_100","pink_100","orange_100","skillsScore","handleOnDotClick","handleOpenSkillPicker","handleCloseSkillPicker","handleConfirmSkillPicker","focusSkillList","handleSearch","handleSearchReset","ReviewTooltipContent","backgroundContainer","_isEmpty","cards","cardsListContainer","_extends","type","subtitle","iconColor","cm_orange_800","borderRadius","tag","_size","container","isOpen","onCancel","onConfirm","onClose","skillFocusContainer","skillFocusHeader","skillFocusHeaderWrapper","skillFocusHeaderIcon","purple_100","faSize","wrapperSize","skillFocusHeaderContent","skillFocusHeaderTitle","skillFocusHeaderDescription","length","skillFocusContent","radarContainer","totalDataset","height","data","onExploreClick","colors","gradient","fill","stroke","percentage","background","sidePanelItems","skillFocusEmpty","img","src","alt","skillFocusEmptyTitle","skillFocusEmptyDescription","skillListHeader","skillListHeaderIcon","yellow_100","skillListHeaderContent","skillListHeaderTitle","skillListHeaderDescription","fontSize","iconContainerClassName","infoIconTooltip","tooltipClassName","tooltip","TooltipContent","closeToolTipInformationTextAriaLabel","toolBarContainer","skillFilterContainer","_keys","map","index","handleFilterClick","key","searchWrapper","search","placeholder","onChange","onReset","emptySearchResultContainer","emptySearchResultTitle","emptySearchResultDescription","emptySearchResultClearSearch","skillListContainer","skillListEmptyContainer","titleNoSkills","textNoSkills","iconSkillAriaLabel","imagePosition","defaultStats","score","contentCompleted","questionsToReview","handleExploreSkill","skillTitle","cardIndex","focus","includes","metrics","arrayOf","objectOf","shape","learningTime"],"sources":["../../../src/template/my-learning/index.js"],"sourcesContent":["import React, {useCallback, useState, useMemo} from 'react';\nimport PropTypes from 'prop-types';\nimport {convert} from 'css-color-function';\nimport {get, keys, map, fromPairs, pipe, sumBy, getOr, sortBy, size, isEmpty} from 'lodash/fp';\nimport Provider from '../../atom/provider';\nimport Icon from '../../atom/icon';\nimport Picture from '../../atom/picture';\nimport ButtonLink from '../../atom/button-link';\nimport ToolTip from '../../atom/tooltip';\nimport ReviewNoSkills from '../../organism/review-no-skills';\nimport SearchForm from '../../molecule/search-form';\nimport SkillPickerModal from '../../molecule/skill-picker-modal';\nimport ResponsiveLearningProfileRadarChart from '../../molecule/learning-profile-radar-chart';\nimport SkillsChartSideInformationPanel from '../../molecule/skills-chart-side-information-panel';\nimport LearnerSkillCard from '../../molecule/learner-skill-card';\nimport searchValueIncluded from '../../util/search-value-included';\nimport {formatMinutes} from '../../util/time-format';\nimport CardsList from '../../molecule/dashboard/cards-list';\nimport Title from '../../atom/title';\nimport {COLORS} from '../../variables/colors';\nimport style from './style.css';\n\nconst roundScore = value => Math.round(value * 10) / 10;\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={COLORS.white}\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\n              ? convert(`color(${primarySkinColor} a(0.07))`)\n              : COLORS.cm_grey_100,\n            color: active ? primarySkinColor : COLORS.cm_grey_500\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))`) : COLORS.white,\n      color: active ? primarySkinColor : COLORS.cm_grey_400,\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    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, roundScore(getOr(0, [skill, 'stats', 'score'], skillsInformation))]),\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: COLORS.turquoise_100}\n    },\n    {\n      title: translate('skill_chart_side_panel_learning_hours'),\n      value: formatMinutes(learningTimeData),\n      legend: skillChartPaneLegends,\n      icon: {iconName: 'clock', backgroundColor: COLORS.pink_100}\n    },\n    {\n      title: translate('skill_chart_side_panel_questions_to_review'),\n      value: `${questionsToReviewData}`,\n      legend: skillChartPaneLegends,\n      icon: {iconName: 'circle-question', backgroundColor: COLORS.orange_100}\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: COLORS.cm_orange_800,\n                    borderRadius: '12px',\n                    backgroundColor: COLORS.orange_100\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={COLORS.purple_100}\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={COLORS.yellow_100}\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' && 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 handleExploreSkill() {\n                  onExploreSkill(skill);\n                }\n                const {score, content, questionsToReview} = skillsInformation[skill]\n                  ? skillsInformation[skill].stats\n                  : defaultStats;\n                const {color, name} = get([skill, 'icon'], skillsInformation);\n                return (\n                  <div key={index}>\n                    <LearnerSkillCard\n                      skillTitle={skillsLocales[skill]}\n                      cardIndex={index}\n                      focus={selectedSkills.includes(skill)}\n                      metrics={{\n                        score,\n                        content,\n                        questionsToReview\n                      }}\n                      icon={{color, name}}\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  onExploreSkill: PropTypes.func,\n  learningPriorities: PropTypes.shape(CardsList.propTypes)\n};\n\nexport default MyLearning;\n"],"mappings":"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","ignoreList":[]}

package/es/template/skill-detail/all-courses.css

@@ -21,8 +21,8 @@
 
 .continueLearningNumber {
   border-radius: 12px;
-  background-color: #EAEAEB;
-  color: #515161;
+  background-color: cm_grey_100;
+  color: cm_grey_500;
   padding: 2px 4px;
   margin-left: 8px;
   font-size: 10px;
@@ -49,13 +49,7 @@
   font-size: 14px;
   font-style: normal;
   font-weight: 600;
-}
-
-.sortWrapper {
-  display: flex;
-  align-items: center;
-  gap: 12px;
-  color: cm_grey_500;
+  margin-right: 16px;
 }
 
 .filterWrapper {
@@ -115,7 +109,8 @@
 
 @media tablet {
   .searchAndSortSection {
-    flex-direction: column;
+    flex-direction: row;
+    gap: 16px;
   }
 
   .sortSection {
@@ -128,6 +123,10 @@
 }
 
 @media mobile {
+  .searchAndSortSection {
+    flex-direction: column;
+  }
+
   .sortSection {
     flex-direction: column;
     gap: 16px;

package/es/template/skill-detail/all-courses.d.ts

@@ -1,8 +1,42 @@
-export default AllCourses;
-declare function AllCourses(props: any, context: any): JSX.Element;
-declare namespace AllCourses {
-    namespace contextTypes {
-        const skin: PropTypes.Requireable<PropTypes.InferProps<{
+/// <reference types="react" />
+import PropTypes from 'prop-types';
+import { CardsGridProps } from '../../organism/cards-grid';
+interface ProviderContext {
+    skin: {
+        common: {
+            primary: string;
+            secondary: string;
+        };
+    };
+    translate: (key: string, options?: any) => string;
+}
+declare const AllCourses: {
+    (props: {
+        dataName?: string | undefined;
+        ariaLabel?: string | undefined;
+        selected?: boolean | undefined;
+        label?: string | undefined;
+        content: {
+            list: CardsGridProps['list'];
+            loading?: boolean;
+        };
+        totalContents?: number | undefined;
+        search: {
+            oldValue: string;
+            onChange: (value: string) => void;
+        };
+        bannerMicrolearning?: {
+            type: 'skill' | 'playlist';
+            action: () => void;
+            oldSwitchValue: boolean;
+        } | undefined;
+        filters: {
+            onChange?: ((value: string) => void) | undefined;
+            options?: unknown[] | undefined;
+        };
+    }, context: ProviderContext): JSX.Element;
+    contextTypes: {
+        skin: PropTypes.Requireable<PropTypes.InferProps<{
             common: PropTypes.Requireable<{
                 [x: string]: any;
             }>;
@@ -23,18 +57,18 @@ declare namespace AllCourses {
                 [x: string]: any;
             }>;
         }>>;
-        const translate: PropTypes.Requireable<(...args: any[]) => any>;
-    }
-    namespace propTypes {
-        const content: PropTypes.Requireable<PropTypes.InferProps<{
+        translate: PropTypes.Requireable<(...args: any[]) => any>;
+    };
+    propTypes: {
+        content: 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 totalContents: PropTypes.Requireable<number>;
-        const filters: PropTypes.Requireable<PropTypes.InferProps<{
+        totalContents: PropTypes.Requireable<number>;
+        filters: PropTypes.Requireable<PropTypes.InferProps<{
             onChange: PropTypes.Requireable<(...args: any[]) => any>;
             options: PropTypes.Requireable<(PropTypes.InferProps<{
                 name: PropTypes.Validator<string>;
@@ -43,47 +77,16 @@ declare namespace AllCourses {
                 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 bannerMicrolearning: PropTypes.Requireable<PropTypes.InferProps<{
+        bannerMicrolearning: PropTypes.Requireable<PropTypes.InferProps<{
             type: PropTypes.Requireable<string>;
             action: PropTypes.Requireable<(...args: any[]) => any>;
             oldSwitchValue: PropTypes.Requireable<boolean>;
         }>>;
-        const search: PropTypes.Requireable<PropTypes.InferProps<{
+        search: PropTypes.Requireable<PropTypes.InferProps<{
             oldValue: PropTypes.Requireable<string>;
             onChange: PropTypes.Requireable<(...args: any[]) => any>;
         }>>;
-    }
-}
-import PropTypes from "prop-types";
+    };
+};
+export default AllCourses;
 //# sourceMappingURL=all-courses.d.ts.map

package/es/template/skill-detail/all-courses.d.ts.map

@@ -1 +1 @@
-{"version":3,"file":"all-courses.d.ts","sourceRoot":"","sources":["../../../src/template/skill-detail/all-courses.js"],"names":[],"mappings":";AAgDA,mEA8JC"}
+{"version":3,"file":"all-courses.d.ts","sourceRoot":"","sources":["../../../src/template/skill-detail/all-courses.tsx"],"names":[],"mappings":";AACA,OAAO,SAAS,MAAM,YAAY,CAAC;AAMnC,OAAkB,EAAC,cAAc,EAAC,MAAM,2BAA2B,CAAC;AAQpE,UAAU,eAAe;IACvB,IAAI,EAAE;QACJ,MAAM,EAAE;YACN,OAAO,EAAE,MAAM,CAAC;YAChB,SAAS,EAAE,MAAM,CAAC;SACnB,CAAC;KACH,CAAC;IACF,SAAS,EAAE,CAAC,GAAG,EAAE,MAAM,EAAE,OAAO,CAAC,EAAE,GAAG,KAAK,MAAM,CAAC;CACnD;AAgDD,QAAA,MAAM,UAAU;;;;;;iBAMH;YACP,IAAI,EAAE,cAAc,CAAC,MAAM,CAAC,CAAC;YAC7B,OAAO,CAAC,EAAE,OAAO,CAAC;SACnB;;;sBAGW,MAAM;8BACE,MAAM,KAAK,IAAI;;;kBAG3B,OAAO,GAAG,UAAU;oBAClB,MAAM,IAAI;4BACF,OAAO;;;gCAGJ,MAAM,KAAK,IAAI;;;gBAI7B,eAAe;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;CAkJzB,CAAC;AAyBF,eAAe,UAAU,CAAC"}

package/es/template/skill-detail/all-courses.js

@@ -5,17 +5,19 @@ import _size from "lodash/fp/size";
 import _map from "lodash/fp/map";
 import _filter from "lodash/fp/filter";
 import _get from "lodash/fp/get";
-function _extends() { return _extends = Object.assign ? Object.assign.bind() : function (n) { for (var e = 1; e < arguments.length; e++) { var t = arguments[e]; for (var r in t) ({}).hasOwnProperty.call(t, r) && (n[r] = t[r]); } return n; }, _extends.apply(null, arguments); }
 import React, { useState, useCallback, useMemo } from 'react';
 import PropTypes from 'prop-types';
 import Provider from '../../atom/provider';
-import Select, { SelectOptionPropTypes } from '../../atom/select';
+import { SelectOptionPropTypes } from '../../atom/select';
 import ButtonLink from '../../atom/button-link';
 import SearchForm from '../../molecule/search-form';
 import CardsGrid from '../../organism/cards-grid';
 import InputSwitch from '../../atom/input-switch';
 import Banner from '../../molecule/banner';
+import { COLORS } from '../../variables/colors';
 import style from './all-courses.css';
+
+// @ts-expect-error convert untypped
 const uncappedMap = _map.convert({
   cap: false
 });
@@ -33,8 +35,8 @@ const FilterButton = (props, context) => {
   const primarySkinColor = _get('common.primary', skin);
   const buttonProps = {
     customStyle: {
-      backgroundColor: selected ? primarySkinColor : '#E1E1E3',
-      color: selected ? '#FFFFFF' : '#515161',
+      backgroundColor: selected ? primarySkinColor : COLORS.cm_grey_150,
+      color: selected ? COLORS.white : COLORS.cm_grey_500,
       transition: 'background-color 0.15s ease-in-out, color 0.15s ease-in-out',
       width: 'fit-content'
     },
@@ -63,9 +65,8 @@ const AllCourses = (props, context) => {
   const {
     content,
     filters,
-    sorting,
     totalContents,
-    bannerMicrolearning = {},
+    bannerMicrolearning = undefined,
     search: {
       oldValue: oldSearchValue,
       onChange: handleSearch
@@ -79,18 +80,11 @@ const AllCourses = (props, context) => {
     list,
     loading
   } = content;
-  const {
-    type: bannerMessageType,
-    action: bannerAction,
-    oldSwitchValue
-  } = bannerMicrolearning;
+  const bannerMessageType = bannerMicrolearning?.type;
+  const bannerAction = bannerMicrolearning?.action;
+  const oldSwitchValue = bannerMicrolearning?.oldSwitchValue;
   const [showCompleted, setShowCompleted] = useState(true);
   const [searchValue, setSearchValue] = useState(oldSearchValue || '');
-  const sortView = sorting !== undefined ? /*#__PURE__*/React.createElement("div", {
-    "data-name": "choice"
-  }, /*#__PURE__*/React.createElement(Select, _extends({}, sorting, {
-    "aria-label": "All courses sort"
-  }))) : null;
   const filteredContent = useMemo(() => {
     return showCompleted ? list : _filter(course => course.progress < 1, list);
   }, [list, showCompleted]);
@@ -103,7 +97,7 @@ const AllCourses = (props, context) => {
     setSearchValue(value);
     debounceHandleSearch(value);
   }, [debounceHandleSearch]);
-  const handleSearchReset = useCallback(value => {
+  const handleSearchReset = useCallback(() => {
     setSearchValue('');
     debounceHandleSearch('');
   }, [debounceHandleSearch]);
@@ -132,15 +126,13 @@ const AllCourses = (props, context) => {
     className: style.sortSection
   }, /*#__PURE__*/React.createElement(InputSwitch, {
     id: 'show-completed-courses-switch',
-    type: "switch",
     name: translate('show_completed'),
     title: translate('show_completed'),
+    theme: "default",
     "aria-label": 'Show completed courses aria label',
     value: showCompleted,
     onChange: handleShowCompletedToggle
-  }), sortView ? /*#__PURE__*/React.createElement("div", {
-    className: style.sortWrapper
-  }, translate('sort_by'), sortView) : null)), !_isEmpty(bannerMicrolearning) ? /*#__PURE__*/React.createElement("div", {
+  }))), !_isEmpty(bannerMicrolearning) ? /*#__PURE__*/React.createElement("div", {
     className: style.bannerWrapper
   }, /*#__PURE__*/React.createElement(Banner, {
     type: "info",
@@ -160,7 +152,7 @@ const AllCourses = (props, context) => {
       selected
     } = filterProps;
     function handleFilterChange() {
-      onChange(value);
+      onChange && onChange(value);
     }
     return /*#__PURE__*/React.createElement("div", {
       key: index,
@@ -204,7 +196,6 @@ AllCourses.propTypes = process.env.NODE_ENV !== "production" ? {
     onChange: PropTypes.func,
     options: PropTypes.arrayOf(PropTypes.shape(SelectOptionPropTypes))
   }),
-  sorting: PropTypes.shape(Select.propTypes),
   bannerMicrolearning: PropTypes.shape({
     type: PropTypes.oneOf(['skill', 'playlist']),
     action: PropTypes.func,

package/es/template/skill-detail/all-courses.js.map

@@ -1 +1 @@
-{"version":3,"file":"all-courses.js","names":["React","useState","useCallback","useMemo","PropTypes","Provider","Select","SelectOptionPropTypes","ButtonLink","SearchForm","CardsGrid","InputSwitch","Banner","style","uncappedMap","_map","convert","cap","FilterButton","props","context","dataName","ariaLabel","selected","label","onClick","skin","primarySkinColor","_get","buttonProps","customStyle","backgroundColor","color","transition","width","createElement","contextTypes","childContextTypes","translate","propTypes","process","env","NODE_ENV","string","bool","func","AllCourses","content","filters","sorting","totalContents","bannerMicrolearning","search","oldValue","oldSearchValue","onChange","handleSearch","options","list","loading","type","bannerMessageType","action","bannerAction","oldSwitchValue","showCompleted","setShowCompleted","searchValue","setSearchValue","sortView","undefined","_extends","filteredContent","_filter","course","progress","debounceHandleSearch","_debounce","value","onSearchChange","handleSearchReset","handleShowCompletedToggle","prevShowCompleted","Fragment","className","continueLearningWrapper","continueLearningTitle","continueLearningNumber","_isNil","_size","searchAndSortSection","searchWrapper","placeholder","onReset","dataTestId","sortSection","id","name","title","sortWrapper","_isEmpty","bannerWrapper","message","cta","filterWrapper","filterProps","index","handleFilterChange","key","filterButtonWrapper","divider","justifyContent","emptySearchResultContainer","emptySearchResultTitle","emptySearchResultDescription","emptySearchResultClearSearch","shape","number","arrayOf","oneOf"],"sources":["../../../src/template/skill-detail/all-courses.js"],"sourcesContent":["import React, {useState, useCallback, useMemo} from 'react';\nimport PropTypes from 'prop-types';\nimport {get, filter, map, size, isNil, isEmpty, debounce} from 'lodash/fp';\nimport Provider from '../../atom/provider';\nimport Select, {SelectOptionPropTypes} from '../../atom/select';\nimport ButtonLink from '../../atom/button-link';\nimport SearchForm from '../../molecule/search-form';\nimport CardsGrid from '../../organism/cards-grid';\nimport InputSwitch from '../../atom/input-switch';\nimport Banner from '../../molecule/banner';\nimport style from './all-courses.css';\n\nconst uncappedMap = map.convert({cap: false});\n\nconst FilterButton = (props, context) => {\n  const {dataName, ariaLabel, selected, label, onClick} = props;\n  const {skin} = context;\n  const primarySkinColor = get('common.primary', skin);\n\n  const buttonProps = {\n    customStyle: {\n      backgroundColor: selected ? primarySkinColor : '#E1E1E3',\n      color: selected ? '#FFFFFF' : '#515161',\n      transition: 'background-color 0.15s ease-in-out, color 0.15s ease-in-out',\n      width: 'fit-content'\n    },\n    label,\n    onClick,\n    'data-name': dataName,\n    'aria-label': ariaLabel\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  dataName: PropTypes.string,\n  ariaLabel: PropTypes.string,\n  selected: PropTypes.bool,\n  label: PropTypes.string,\n  onClick: PropTypes.func\n};\n\nconst AllCourses = (props, context) => {\n  const {translate} = context;\n  const {\n    content,\n    filters,\n    sorting,\n    totalContents,\n    bannerMicrolearning = {},\n    search: {oldValue: oldSearchValue, onChange: handleSearch}\n  } = props;\n  const {options, onChange} = filters;\n  const {list, loading} = content;\n  const {type: bannerMessageType, action: bannerAction, oldSwitchValue} = bannerMicrolearning;\n  const [showCompleted, setShowCompleted] = useState(true);\n  const [searchValue, setSearchValue] = useState(oldSearchValue || '');\n\n  const sortView =\n    sorting !== undefined ? (\n      <div data-name=\"choice\">\n        <Select {...sorting} aria-label=\"All courses sort\" />\n      </div>\n    ) : null;\n\n  const filteredContent = useMemo(() => {\n    return showCompleted ? list : filter(course => course.progress < 1, list);\n  }, [list, showCompleted]);\n\n  const debounceHandleSearch = useMemo(() => {\n    return debounce(800, value => {\n      handleSearch(value);\n    });\n  }, [handleSearch]);\n\n  const onSearchChange = useCallback(\n    value => {\n      setSearchValue(value);\n      debounceHandleSearch(value);\n    },\n    [debounceHandleSearch]\n  );\n\n  const handleSearchReset = useCallback(\n    value => {\n      setSearchValue('');\n      debounceHandleSearch('');\n    },\n    [debounceHandleSearch]\n  );\n\n  const handleShowCompletedToggle = useCallback(() => {\n    setShowCompleted(prevShowCompleted => !prevShowCompleted);\n  }, []);\n\n  return (\n    <>\n      <div className={style.continueLearningWrapper}>\n        <span className={style.continueLearningTitle}>{translate('all_content')}</span>\n        <span className={style.continueLearningNumber}>\n          {isNil(totalContents) ? size(filteredContent) : totalContents}\n        </span>\n      </div>\n      <div className={style.searchAndSortSection}>\n        <div className={style.searchWrapper}>\n          <SearchForm\n            search={{\n              placeholder: translate('search_place_holder'),\n              value: searchValue,\n              onChange: onSearchChange\n            }}\n            onReset={handleSearchReset}\n            dataTestId=\"all-courses-search-input\"\n          />\n        </div>\n        <div className={style.sortSection}>\n          <InputSwitch\n            id={'show-completed-courses-switch'}\n            type=\"switch\"\n            name={translate('show_completed')}\n            title={translate('show_completed')}\n            aria-label={'Show completed courses aria label'}\n            value={showCompleted}\n            onChange={handleShowCompletedToggle}\n          />\n          {sortView ? (\n            <div className={style.sortWrapper}>\n              {translate('sort_by')}\n              {sortView}\n            </div>\n          ) : null}\n        </div>\n      </div>\n      {!isEmpty(bannerMicrolearning) ? (\n        <div className={style.bannerWrapper}>\n          <Banner\n            type=\"info\"\n            message={\n              bannerMessageType === 'skill'\n                ? translate('banner_microlearning_rule_message_skill')\n                : translate('banner_microlearning_rule_message')\n            }\n            cta={[\n              {\n                type: 'switch',\n                label: translate('banner_microlearning_rule_label'),\n                action: bannerAction,\n                oldSwitchValue\n              }\n            ]}\n          />\n        </div>\n      ) : null}\n      <div className={style.filterWrapper}>\n        {size(options) > 2\n          ? uncappedMap((filterProps, index) => {\n              const {name, value, selected} = filterProps;\n\n              function handleFilterChange() {\n                onChange(value);\n              }\n\n              return (\n                <div key={index} className={style.filterButtonWrapper}>\n                  <FilterButton\n                    dataName={`filter-button-${value}`}\n                    ariaLabel={`Filter by ${name}`}\n                    selected={selected}\n                    label={name}\n                    onClick={handleFilterChange}\n                  />\n                  {value === 'ALL' ? <div className={style.divider} /> : null}\n                </div>\n              );\n            }, options)\n          : null}\n      </div>\n      <div>\n        {size(filteredContent) ? (\n          <CardsGrid\n            list={filteredContent}\n            loading={loading}\n            customStyle={{justifyContent: 'left'}}\n          />\n        ) : (\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>\n    </>\n  );\n};\n\nAllCourses.contextTypes = {\n  skin: Provider.childContextTypes.skin,\n  translate: Provider.childContextTypes.translate\n};\n\nAllCourses.propTypes = {\n  content: PropTypes.shape(CardsGrid.propTypes),\n  totalContents: 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  bannerMicrolearning: PropTypes.shape({\n    type: PropTypes.oneOf(['skill', 'playlist']),\n    action: PropTypes.func,\n    oldSwitchValue: PropTypes.bool\n  }),\n  search: PropTypes.shape({\n    oldValue: PropTypes.string,\n    onChange: PropTypes.func\n  })\n};\n\nexport default AllCourses;\n"],"mappings":"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","ignoreList":[]}
+{"version":3,"file":"all-courses.js","names":["React","useState","useCallback","useMemo","PropTypes","Provider","SelectOptionPropTypes","ButtonLink","SearchForm","CardsGrid","InputSwitch","Banner","COLORS","style","uncappedMap","_map","convert","cap","FilterButton","props","context","dataName","ariaLabel","selected","label","onClick","skin","primarySkinColor","_get","buttonProps","customStyle","backgroundColor","cm_grey_150","color","white","cm_grey_500","transition","width","createElement","contextTypes","childContextTypes","translate","propTypes","process","env","NODE_ENV","string","bool","func","AllCourses","content","filters","totalContents","bannerMicrolearning","undefined","search","oldValue","oldSearchValue","onChange","handleSearch","options","list","loading","bannerMessageType","type","bannerAction","action","oldSwitchValue","showCompleted","setShowCompleted","searchValue","setSearchValue","filteredContent","_filter","course","progress","debounceHandleSearch","_debounce","value","onSearchChange","handleSearchReset","handleShowCompletedToggle","prevShowCompleted","Fragment","className","continueLearningWrapper","continueLearningTitle","continueLearningNumber","_isNil","_size","searchAndSortSection","searchWrapper","placeholder","onReset","dataTestId","sortSection","id","name","title","theme","_isEmpty","bannerWrapper","message","cta","filterWrapper","filterProps","index","handleFilterChange","key","filterButtonWrapper","divider","justifyContent","emptySearchResultContainer","emptySearchResultTitle","emptySearchResultDescription","emptySearchResultClearSearch","shape","number","arrayOf","oneOf"],"sources":["../../../src/template/skill-detail/all-courses.tsx"],"sourcesContent":["import React, {useState, useCallback, useMemo} from 'react';\nimport PropTypes from 'prop-types';\nimport {get, filter, map, size, isNil, isEmpty, debounce} from 'lodash/fp';\nimport Provider from '../../atom/provider';\nimport {SelectOptionPropTypes} from '../../atom/select';\nimport ButtonLink from '../../atom/button-link';\nimport SearchForm from '../../molecule/search-form';\nimport CardsGrid, {CardsGridProps} from '../../organism/cards-grid';\nimport InputSwitch from '../../atom/input-switch';\nimport Banner from '../../molecule/banner';\nimport {COLORS} from '../../variables/colors';\nimport style from './all-courses.css';\n\n// @ts-expect-error convert untypped\nconst uncappedMap = map.convert({cap: false});\ninterface ProviderContext {\n  skin: {\n    common: {\n      primary: string;\n      secondary: string;\n    };\n  };\n  translate: (key: string, options?: any) => string;\n}\n\ninterface FilterOption {\n  name: string;\n  value: string;\n  selected: boolean;\n}\n\ninterface FilterButtonProps {\n  dataName?: string;\n  ariaLabel?: string;\n  selected?: boolean;\n  label?: string;\n  onClick?: () => void;\n}\nconst FilterButton = (props: FilterButtonProps, context: ProviderContext) => {\n  const {dataName, ariaLabel, selected, label, onClick} = props;\n  const {skin} = context;\n  const primarySkinColor = get('common.primary', skin);\n\n  const buttonProps = {\n    customStyle: {\n      backgroundColor: selected ? primarySkinColor : COLORS.cm_grey_150,\n      color: selected ? COLORS.white : COLORS.cm_grey_500,\n      transition: 'background-color 0.15s ease-in-out, color 0.15s ease-in-out',\n      width: 'fit-content'\n    },\n    label,\n    onClick,\n    'data-name': dataName,\n    'aria-label': ariaLabel\n  };\n\n  return <ButtonLink {...buttonProps} />;\n};\n\nFilterButton.contextTypes = {\n  skin: Provider.childContextTypes.skin,\n  translate: Provider.childContextTypes.translate\n};\nFilterButton.propTypes = {\n  dataName: PropTypes.string,\n  ariaLabel: PropTypes.string,\n  selected: PropTypes.bool,\n  label: PropTypes.string,\n  onClick: PropTypes.func\n};\n\nconst AllCourses = (\n  props: {\n    dataName?: string;\n    ariaLabel?: string;\n    selected?: boolean;\n    label?: string;\n    content: {\n      list: CardsGridProps['list'];\n      loading?: boolean;\n    };\n    totalContents?: number;\n    search: {\n      oldValue: string;\n      onChange: (value: string) => void;\n    };\n    bannerMicrolearning?: {\n      type: 'skill' | 'playlist';\n      action: () => void;\n      oldSwitchValue: boolean;\n    };\n    filters: {\n      onChange?: (value: string) => void;\n      options?: unknown[];\n    };\n  },\n  context: ProviderContext\n) => {\n  const {translate} = context;\n  const {\n    content,\n    filters,\n    totalContents,\n    bannerMicrolearning = undefined,\n    search: {oldValue: oldSearchValue, onChange: handleSearch}\n  } = props;\n  const {options, onChange} = filters;\n  const {list, loading} = content;\n  const bannerMessageType = bannerMicrolearning?.type;\n  const bannerAction = bannerMicrolearning?.action;\n  const oldSwitchValue = bannerMicrolearning?.oldSwitchValue;\n\n  const [showCompleted, setShowCompleted] = useState(true);\n  const [searchValue, setSearchValue] = useState(oldSearchValue || '');\n\n  const filteredContent = useMemo(() => {\n    return showCompleted ? list : filter(course => course.progress < 1, list);\n  }, [list, showCompleted]);\n\n  const debounceHandleSearch = useMemo(() => {\n    return debounce(800, value => {\n      handleSearch(value);\n    });\n  }, [handleSearch]);\n\n  const onSearchChange = useCallback(\n    value => {\n      setSearchValue(value);\n      debounceHandleSearch(value);\n    },\n    [debounceHandleSearch]\n  );\n\n  const handleSearchReset = useCallback(() => {\n    setSearchValue('');\n    debounceHandleSearch('');\n  }, [debounceHandleSearch]);\n\n  const handleShowCompletedToggle = useCallback(() => {\n    setShowCompleted(prevShowCompleted => !prevShowCompleted);\n  }, []);\n\n  return (\n    <>\n      <div className={style.continueLearningWrapper}>\n        <span className={style.continueLearningTitle}>{translate('all_content')}</span>\n        <span className={style.continueLearningNumber}>\n          {isNil(totalContents) ? size(filteredContent) : totalContents}\n        </span>\n      </div>\n      <div className={style.searchAndSortSection}>\n        <div className={style.searchWrapper}>\n          <SearchForm\n            search={{\n              placeholder: translate('search_place_holder'),\n              value: searchValue,\n              onChange: onSearchChange\n            }}\n            onReset={handleSearchReset}\n            dataTestId=\"all-courses-search-input\"\n          />\n        </div>\n        <div className={style.sortSection}>\n          <InputSwitch\n            id={'show-completed-courses-switch'}\n            name={translate('show_completed')}\n            title={translate('show_completed')}\n            theme=\"default\"\n            aria-label={'Show completed courses aria label'}\n            value={showCompleted}\n            onChange={handleShowCompletedToggle}\n          />\n        </div>\n      </div>\n      {!isEmpty(bannerMicrolearning) ? (\n        <div className={style.bannerWrapper}>\n          <Banner\n            type=\"info\"\n            message={\n              bannerMessageType === 'skill'\n                ? translate('banner_microlearning_rule_message_skill')\n                : translate('banner_microlearning_rule_message')\n            }\n            cta={[\n              {\n                type: 'switch',\n                label: translate('banner_microlearning_rule_label'),\n                action: bannerAction,\n                oldSwitchValue\n              }\n            ]}\n          />\n        </div>\n      ) : null}\n\n      <div className={style.filterWrapper}>\n        {size(options) > 2\n          ? uncappedMap((filterProps: FilterOption, index: number) => {\n              const {name, value, selected} = filterProps;\n\n              function handleFilterChange() {\n                onChange && onChange(value);\n              }\n\n              return (\n                <div key={index} className={style.filterButtonWrapper}>\n                  <FilterButton\n                    dataName={`filter-button-${value}`}\n                    ariaLabel={`Filter by ${name}`}\n                    selected={selected}\n                    label={name}\n                    onClick={handleFilterChange}\n                  />\n                  {value === 'ALL' ? <div className={style.divider} /> : null}\n                </div>\n              );\n            }, options)\n          : null}\n      </div>\n      <div>\n        {size(filteredContent) ? (\n          <CardsGrid\n            list={filteredContent}\n            loading={loading}\n            customStyle={{justifyContent: 'left'}}\n          />\n        ) : (\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>\n    </>\n  );\n};\n\nAllCourses.contextTypes = {\n  skin: Provider.childContextTypes.skin,\n  translate: Provider.childContextTypes.translate\n};\n\nAllCourses.propTypes = {\n  content: PropTypes.shape(CardsGrid.propTypes),\n  totalContents: PropTypes.number,\n  filters: PropTypes.shape({\n    onChange: PropTypes.func,\n    options: PropTypes.arrayOf(PropTypes.shape(SelectOptionPropTypes))\n  }),\n  bannerMicrolearning: PropTypes.shape({\n    type: PropTypes.oneOf(['skill', 'playlist']),\n    action: PropTypes.func,\n    oldSwitchValue: PropTypes.bool\n  }),\n  search: PropTypes.shape({\n    oldValue: PropTypes.string,\n    onChange: PropTypes.func\n  })\n};\n\nexport default AllCourses;\n"],"mappings":"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","ignoreList":[]}

package/es/template/skill-detail/continue-learning.css

@@ -1,3 +1,8 @@
+@value colors: "../../variables/colors.css";
+@value cm_grey_100 from colors;
+@value cm_grey_500 from colors;
+
+
 .continueLearningTitle {
   font-size: 16px;
   font-weight: 600;
@@ -6,8 +11,8 @@
 
 .continueLearningNumber {
   border-radius: 50%;
-  background-color: #EAEAEB;
-  color: #515161;
+  background-color: cm_grey_100;
+  color: cm_grey_500;
   padding: 2px 4px;
   margin-left: 8px;
   font-size: 10px;