@coorpacademy/components 11.32.19 → 11.32.20-alpha.32

package/es/template/external-course/index.d.ts

@@ -116,6 +116,8 @@ declare namespace ExternalCourse {
                             download: PropTypes.Requireable<boolean>;
                             target: PropTypes.Requireable<string>;
                         }>>;
+                        hoverBackgroundColor: PropTypes.Requireable<string>;
+                        hoverColor: PropTypes.Requireable<string>;
                         disabled: PropTypes.Requireable<boolean>;
                         className: PropTypes.Requireable<string>;
                         customStyle: PropTypes.Requireable<PropTypes.InferProps<{}>>;
@@ -141,6 +143,8 @@ declare namespace ExternalCourse {
                     content: PropTypes.Requireable<NonNullable<PropTypes.InferProps<{
                         items: PropTypes.Requireable<(PropTypes.InferProps<{
                             title: PropTypes.Validator<string>;
+                            subtitle: PropTypes.Requireable<string>;
+                            selected: PropTypes.Requireable<boolean>;
                             dataColumns: PropTypes.Requireable<(PropTypes.InferProps<{
                                 label: PropTypes.Requireable<string>;
                                 type: PropTypes.Requireable<string>;
@@ -183,6 +187,8 @@ declare namespace ExternalCourse {
                                 label: PropTypes.Requireable<string>;
                                 type: PropTypes.Requireable<string>;
                             }> | null | undefined)[]>;
+                            disabled: PropTypes.Requireable<boolean>;
+                            onClick: PropTypes.Requireable<(...args: any[]) => any>;
                             isBulkStyle: PropTypes.Requireable<boolean>;
                             isOverflowHidden: PropTypes.Requireable<boolean>;
                             order: PropTypes.Requireable<number>;
@@ -248,6 +254,8 @@ declare namespace ExternalCourse {
                                 download: PropTypes.Requireable<boolean>;
                                 target: PropTypes.Requireable<string>;
                             }>>;
+                            hoverBackgroundColor: PropTypes.Requireable<string>;
+                            hoverColor: PropTypes.Requireable<string>;
                             disabled: PropTypes.Requireable<boolean>;
                             className: PropTypes.Requireable<string>;
                             customStyle: PropTypes.Requireable<PropTypes.InferProps<{}>>;

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

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

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

@@ -25,7 +25,6 @@ import { formatMinutes } from '../../util/time-format';
 import style from './style.css';
 
 const ChangeSkillFocusButton = (props, context) => {
-  const [hovered, setHovered] = useState(false);
   const {
     onClick
   } = props;
@@ -36,18 +35,16 @@ const ChangeSkillFocusButton = (props, context) => {
 
   const primarySkinColor = _get('common.primary', skin);
 
-  const handleMouseOver = useCallback(() => setHovered(true), [setHovered]);
-  const handleMouseLeave = useCallback(() => setHovered(false), [setHovered]);
   return /*#__PURE__*/React.createElement("div", {
-    "data-name": "button-explore-wrapper",
-    onMouseOver: handleMouseOver,
-    onMouseLeave: handleMouseLeave
+    "data-name": "button-explore-wrapper"
   }, /*#__PURE__*/React.createElement(ButtonLink, {
     customStyle: {
-      backgroundColor: hovered ? primarySkinColor : convert(`color(${primarySkinColor} a(0.07))`),
-      color: hovered ? '#FFFFFF' : primarySkinColor,
+      backgroundColor: convert(`color(${primarySkinColor} a(0.07))`),
+      color: primarySkinColor,
       transition: 'background-color 0.15s ease-in-out, color 0.15s ease-in-out'
     },
+    hoverBackgroundColor: primarySkinColor,
+    hoverColor: "#FFFFFF",
     onClick: onClick,
     label: translate('skills_change_focus'),
     "data-name": "change-skill-focus-button",
@@ -55,8 +52,8 @@ const ChangeSkillFocusButton = (props, context) => {
       position: 'left',
       faIcon: {
         name: 'arrows-rotate',
-        backgroundColor: hovered ? primarySkinColor : convert(`color(${primarySkinColor} a(0.07))`),
-        color: hovered ? '#FFFFFF' : primarySkinColor,
+        backgroundColor: convert(`color(${primarySkinColor} a(0.07))`),
+        color: primarySkinColor,
         size: 16
       }
     }
@@ -141,9 +138,6 @@ const MyLearning = (props, context) => {
   const [searchValue, setSearchValue] = useState('');
   const [searchResults, setSearchResults] = useState(_sortBy(skillRef => -_getOr(0, [skillRef, 'stats', 'score'], skillsInformation), skills));
   const [activeFilter, setActiveFilter] = useState('all');
-  const [hovered, setHovered] = useState(false);
-  const handleMouseOver = useCallback(() => setHovered(true), [setHovered]);
-  const handleMouseLeave = useCallback(() => setHovered(false), [setHovered]);
   const skillsReviewReady = useMemo(() => {
     return searchResults.filter(skill => skillsInformation[skill] ? skillsInformation[skill].availableForReview : false);
   }, [searchResults, skillsInformation]);
@@ -287,16 +281,14 @@ const MyLearning = (props, context) => {
     className: style.skillFocusEmptyTitle
   }, translate('skills_focus_empty_title')), /*#__PURE__*/React.createElement("div", {
     className: style.skillFocusEmptyDescription
-  }, translate('skills_focus_empty_description')), /*#__PURE__*/React.createElement("div", {
-    onMouseOver: handleMouseOver,
-    onMouseLeave: handleMouseLeave
-  }, /*#__PURE__*/React.createElement(ButtonLink, {
+  }, translate('skills_focus_empty_description')), /*#__PURE__*/React.createElement("div", null, /*#__PURE__*/React.createElement(ButtonLink, {
     label: translate('skills_choose_focus'),
     type: "primary",
     customStyle: {
       width: 'fit-contain',
-      backgroundColor: hovered ? convert(`hsl(from ${primarySkinColor} h s calc(l*(1 - 0.08)))`) : primarySkinColor
+      backgroundColor: primarySkinColor
     },
+    hoverBackgroundColor: convert(`hsl(from ${primarySkinColor} h s calc(l*(1 - 0.08)))`),
     onClick: handleOpenSkillPicker
   })))) : null, /*#__PURE__*/React.createElement("header", {
     className: style.skillListHeader

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","style","ChangeSkillFocusButton","props","context","hovered","setHovered","onClick","skin","translate","primarySkinColor","handleMouseOver","handleMouseLeave","backgroundColor","color","transition","position","faIcon","name","size","contextTypes","childContextTypes","propTypes","func","FilterButton","active","filter","skillTotal","Content","skillFilterNumber","skillFilterNumberInActive","buttonProps","customStyle","width","content","bool","string","number","MyLearning","skills","selectedSkills","skillsInformation","skillsLocales","learnerFeature","isLoading","onSkillFocusConfirm","onReviewSkill","onExploreSkill","open","setOpen","selectedSkillsList","setSelectedSkillsList","skillFocusSelectedOnChart","setSkillFocusSelectedOnChart","undefined","searchValue","setSearchValue","searchResults","setSearchResults","skillRef","activeFilter","setActiveFilter","skillsReviewReady","skill","availableForReview","graphDatas","toFixed","graphLegends","filters","all","review","sumKpi","kpi","skillFocusSelectedOnChartScore","stats","coursedCompletedData","questionsToReviewData","learningTimeData","skillChartPaneLegends","focusedSkill","skillChartPanelProps","title","value","legend","icon","iconName","handleOnDotClick","handleOpenSkillPicker","handleCloseSkillPicker","handleConfirmSkillPicker","focusSkillList","handleSearch","handleSearchReset","ReviewTooltipContent","backgroundContainer","container","skillFocusContainer","skillFocusHeader","skillFocusHeaderWrapper","skillFocusHeaderIcon","faSize","wrapperSize","skillFocusHeaderContent","skillFocusHeaderTitle","skillFocusHeaderDescription","length","skillFocusContent","radarContainer","gradient","fill","stroke","percentage","background","label","skillFocusEmpty","img","skillFocusEmptyTitle","skillFocusEmptyDescription","skillListHeader","skillListHeaderIcon","skillListHeaderContent","skillListHeaderTitle","skillListHeaderDescription","infoIconTooltip","tooltip","toolBarContainer","skillFilterContainer","map","index","handleFilterClick","searchWrapper","placeholder","onChange","emptySearchResultContainer","emptySearchResultTitle","emptySearchResultDescription","emptySearchResultClearSearch","skillListContainer","skillListEmptyContainer","defaultStats","score","contentCompleted","questionsToReview","handleReviewSkill","handleExploreSkill","includes","arrayOf","objectOf","shape","learningTime"],"sources":["../../../src/template/my-learning/index.js"],"sourcesContent":["import React, {useCallback, useState, useMemo} from 'react';\nimport PropTypes from 'prop-types';\nimport {convert} from 'css-color-function';\nimport {get, keys, map, fromPairs, pipe, sumBy, getOr, sortBy} 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 style from './style.css';\n\nconst ChangeSkillFocusButton = (props, context) => {\n  const [hovered, setHovered] = useState(false);\n  const {onClick} = props;\n  const {skin, translate} = context;\n  const primarySkinColor = get('common.primary', skin);\n\n  const handleMouseOver = useCallback(() => setHovered(true), [setHovered]);\n\n  const handleMouseLeave = useCallback(() => setHovered(false), [setHovered]);\n\n  return (\n    <div\n      data-name=\"button-explore-wrapper\"\n      onMouseOver={handleMouseOver}\n      onMouseLeave={handleMouseLeave}\n    >\n      <ButtonLink\n        customStyle={{\n          backgroundColor: hovered\n            ? primarySkinColor\n            : convert(`color(${primarySkinColor} a(0.07))`),\n          color: hovered ? '#FFFFFF' : primarySkinColor,\n          transition: 'background-color 0.15s ease-in-out, color 0.15s ease-in-out'\n        }}\n        onClick={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: hovered\n              ? primarySkinColor\n              : convert(`color(${primarySkinColor} a(0.07))`),\n            color: hovered ? '#FFFFFF' : 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  } = 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  const [hovered, setHovered] = useState(false);\n\n  const handleMouseOver = useCallback(() => setHovered(true), [setHovered]);\n\n  const handleMouseLeave = useCallback(() => setHovered(false), [setHovered]);\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      <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 onMouseOver={handleMouseOver} onMouseLeave={handleMouseLeave}>\n                  <ButtonLink\n                    label={translate('skills_choose_focus')}\n                    type=\"primary\"\n                    customStyle={{\n                      width: 'fit-contain',\n                      backgroundColor: hovered\n                        ? convert(`hsl(from ${primarySkinColor} h s calc(l*(1 - 0.08)))`)\n                        : primarySkinColor\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};\n\nexport default MyLearning;\n"],"mappings":"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"}
+{"version":3,"file":"index.js","names":["React","useCallback","useState","useMemo","PropTypes","convert","Provider","Icon","Picture","ButtonLink","ToolTip","ReviewNoSkills","SearchForm","SkillPickerModal","ResponsiveLearningProfileRadarChart","SkillsChartSideInformationPanel","LearnerSkillCard","searchValueIncluded","formatMinutes","style","ChangeSkillFocusButton","props","context","onClick","skin","translate","primarySkinColor","backgroundColor","color","transition","position","faIcon","name","size","contextTypes","childContextTypes","propTypes","func","FilterButton","active","filter","skillTotal","Content","skillFilterNumber","skillFilterNumberInActive","buttonProps","customStyle","width","content","bool","string","number","MyLearning","skills","selectedSkills","skillsInformation","skillsLocales","learnerFeature","isLoading","onSkillFocusConfirm","onReviewSkill","onExploreSkill","open","setOpen","selectedSkillsList","setSelectedSkillsList","skillFocusSelectedOnChart","setSkillFocusSelectedOnChart","undefined","searchValue","setSearchValue","searchResults","setSearchResults","skillRef","activeFilter","setActiveFilter","skillsReviewReady","skill","availableForReview","graphDatas","toFixed","graphLegends","filters","all","review","sumKpi","kpi","skillFocusSelectedOnChartScore","stats","coursedCompletedData","questionsToReviewData","learningTimeData","skillChartPaneLegends","focusedSkill","skillChartPanelProps","title","value","legend","icon","iconName","handleOnDotClick","handleOpenSkillPicker","handleCloseSkillPicker","handleConfirmSkillPicker","focusSkillList","handleSearch","handleSearchReset","ReviewTooltipContent","backgroundContainer","container","skillFocusContainer","skillFocusHeader","skillFocusHeaderWrapper","skillFocusHeaderIcon","faSize","wrapperSize","skillFocusHeaderContent","skillFocusHeaderTitle","skillFocusHeaderDescription","length","skillFocusContent","radarContainer","gradient","fill","stroke","percentage","background","label","skillFocusEmpty","img","skillFocusEmptyTitle","skillFocusEmptyDescription","skillListHeader","skillListHeaderIcon","skillListHeaderContent","skillListHeaderTitle","skillListHeaderDescription","infoIconTooltip","tooltip","toolBarContainer","skillFilterContainer","map","index","handleFilterClick","searchWrapper","placeholder","onChange","emptySearchResultContainer","emptySearchResultTitle","emptySearchResultDescription","emptySearchResultClearSearch","skillListContainer","skillListEmptyContainer","defaultStats","score","contentCompleted","questionsToReview","handleReviewSkill","handleExploreSkill","includes","arrayOf","objectOf","shape","learningTime"],"sources":["../../../src/template/my-learning/index.js"],"sourcesContent":["import React, {useCallback, useState, useMemo} from 'react';\nimport PropTypes from 'prop-types';\nimport {convert} from 'css-color-function';\nimport {get, keys, map, fromPairs, pipe, sumBy, getOr, sortBy} 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 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  } = 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      <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};\n\nexport default MyLearning;\n"],"mappings":"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"}

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

@@ -1 +1 @@
-{"version":3,"file":"index.d.ts","sourceRoot":"","sources":["../../../src/template/skill-detail/index.js"],"names":[],"mappings":";AA8DA,oEA+JC"}
+{"version":3,"file":"index.d.ts","sourceRoot":"","sources":["../../../src/template/skill-detail/index.js"],"names":[],"mappings":";AAyDA,oEA+JC"}

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

@@ -13,7 +13,6 @@ import AllCourses from './all-courses';
 import ContinueLearning from './continue-learning';
 
 const ContinueLearningButton = (props, context) => {
-  const [hovered, setHovered] = useState(false);
   const {
     ongoingCoursesAvailable,
     onClick
@@ -25,19 +24,16 @@ const ContinueLearningButton = (props, context) => {
 
   const primarySkinColor = _get('common.primary', skin);
 
-  const handleMouseOver = useCallback(() => setHovered(true), [setHovered]);
-  const handleMouseLeave = useCallback(() => setHovered(false), [setHovered]);
-  return /*#__PURE__*/React.createElement("div", {
-    onMouseOver: handleMouseOver,
-    onMouseLeave: handleMouseLeave
-  }, /*#__PURE__*/React.createElement(ButtonLink, {
+  return /*#__PURE__*/React.createElement("div", null, /*#__PURE__*/React.createElement(ButtonLink, {
     label: ongoingCoursesAvailable ? translate('continue_learning') : translate('start_learning'),
     type: "primary",
     customStyle: {
       width: 'fit-content',
       borderRadius: '12px',
-      backgroundColor: hovered ? convert(`hsl(from ${primarySkinColor} h s calc(l*(1 - 0.08)))`) : primarySkinColor
+      backgroundColor: primarySkinColor
     },
+    hoverBackgroundColor: convert(`hsl(from ${primarySkinColor} h s calc(l*(1 - 0.08)))`),
+    hoverColor: "#FFFFFF",
     icon: {
       position: 'left',
       faIcon: {

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

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

package/lib/atom/button-link/index.d.ts

@@ -19,6 +19,8 @@ declare const ButtonLink: {
             download: import("prop-types").Requireable<boolean>;
             target: import("prop-types").Requireable<string>;
         }>>;
+        hoverBackgroundColor: import("prop-types").Requireable<string>;
+        hoverColor: import("prop-types").Requireable<string>;
         disabled: import("prop-types").Requireable<boolean>;
         className: import("prop-types").Requireable<string>;
         customStyle: import("prop-types").Requireable<import("prop-types").InferProps<{}>>;

package/lib/atom/button-link/index.d.ts.map

@@ -1 +1 @@
-{"version":3,"file":"index.d.ts","sourceRoot":"","sources":["../../../src/atom/button-link/index.tsx"],"names":[],"mappings":";AAMA,OAAkB,EAAC,eAAe,EAAW,MAAM,SAAS,CAAC;AAwC7D,QAAA,MAAM,UAAU;YAAW,eAAe;;;;;;;;;;;;;;;;;;;;;;CAuEzC,CAAC;AAIF,eAAe,UAAU,CAAC"}
+{"version":3,"file":"index.d.ts","sourceRoot":"","sources":["../../../src/atom/button-link/index.tsx"],"names":[],"mappings":";AAMA,OAAkB,EAAC,eAAe,EAAW,MAAM,SAAS,CAAC;AA+C7D,QAAA,MAAM,UAAU;YAAW,eAAe;;;;;;;;;;;;;;;;;;;;;;;;CA4FzC,CAAC;AAIF,eAAe,UAAU,CAAC"}

package/lib/atom/button-link/index.js

@@ -27,7 +27,7 @@ function _interopRequireDefault(obj) { return obj && obj.__esModule ? obj : { de
 
 function _extends() { _extends = Object.assign ? Object.assign.bind() : function (target) { for (var i = 1; i < arguments.length; i++) { var source = arguments[i]; for (var key in source) { if (Object.prototype.hasOwnProperty.call(source, key)) { target[key] = source[key]; } } } return target; }; return _extends.apply(this, arguments); }
 
-const getButtonContent = (icon, content) => {
+const getButtonContent = (icon, content, hovered, hoverBackgroundColor, hoverColor) => {
   const {
     type,
     faIcon,
@@ -37,6 +37,7 @@ const getButtonContent = (icon, content) => {
     position: ''
   };
   const Icon = type && _buttonIcons.ICONS[type];
+  const isApplyHover = hovered && hoverBackgroundColor && hoverColor;
 
   if (!Icon && !faIcon) {
     return /*#__PURE__*/_react.default.createElement("div", {
@@ -48,8 +49,8 @@ const getButtonContent = (icon, content) => {
 
   const iconComponent = faIcon ? /*#__PURE__*/_react.default.createElement(_icon.default, {
     iconName: faIcon.name,
-    iconColor: faIcon.color,
-    backgroundColor: faIcon.backgroundColor,
+    iconColor: isApplyHover ? hoverColor : faIcon.color,
+    backgroundColor: isApplyHover ? hoverBackgroundColor : faIcon.backgroundColor,
     size: {
       faSize: faIcon.size,
       wrapperSize: faIcon.size
@@ -70,6 +71,8 @@ const ButtonLink = props => {
     type,
     label,
     content,
+    hoverBackgroundColor,
+    hoverColor,
     disabled = false,
     icon,
     'data-name': dataName,
@@ -82,10 +85,19 @@ const ButtonLink = props => {
     customStyle,
     useTitle = true
   } = props;
-  const contentView = getButtonContent(icon, content ?? label);
   const styleButton = (0, _classnames.default)(className, _style.default.button, type === 'primary' && _style.default.primary, type === 'secondary' && _style.default.secondary, type === 'tertiary' && _style.default.tertiary, type === 'text' && _style.default.text, type === 'dangerous' && _style.default.dangerous, link && _style.default.link, disabled && _style.default.disabled);
+  const [hovered, setHovered] = (0, _react.useState)(false);
   const handleOnClick = (0, _react.useCallback)(() => onClick(), [onClick]);
   const handleOnKeyDown = (0, _react.useCallback)(event => onKeyDown(event), [onKeyDown]);
+  const handleMouseOver = (0, _react.useCallback)(() => setHovered(true), [setHovered]);
+  const handleMouseLeave = (0, _react.useCallback)(() => setHovered(false), [setHovered]);
+
+  const _customStyle = (0, _react.useMemo)(() => {
+    return _extends({}, customStyle, (hoverBackgroundColor || hoverColor) && hovered ? {
+      backgroundColor: hoverBackgroundColor,
+      color: hoverColor
+    } : null);
+  }, [hoverBackgroundColor, hoverColor, hovered, customStyle]);
 
   if (link) {
     return /*#__PURE__*/_react.default.createElement(_link.default, _extends({}, link, useTitle && {
@@ -96,7 +108,7 @@ const ButtonLink = props => {
       "data-name": dataName,
       "data-testid": dataTestId,
       "aria-label": ariaLabel || label
-    }), contentView);
+    }), getButtonContent(icon, content ?? label));
   }
 
   return /*#__PURE__*/_react.default.createElement("button", _extends({}, useTitle && {
@@ -106,13 +118,15 @@ const ButtonLink = props => {
     "aria-label": ariaLabel || label,
     "data-name": dataName,
     "data-testid": dataTestId,
-    style: customStyle,
+    style: _customStyle,
     className: styleButton,
     onClick: handleOnClick,
     onKeyDown: handleOnKeyDown,
+    onMouseOver: handleMouseOver,
+    onMouseLeave: handleMouseLeave,
     tabIndex: 0,
     disabled: disabled
-  }), contentView);
+  }), getButtonContent(icon, content ?? label, hovered, hoverBackgroundColor, hoverColor));
 };
 
 ButtonLink.propTypes = process.env.NODE_ENV !== "production" ? _types.default : {};

package/lib/atom/button-link/index.js.map

@@ -1 +1 @@
-{"version":3,"file":"index.js","names":["getButtonContent","icon","content","type","faIcon","position","Icon","ICONS","style","buttonContent","label","iconComponent","iconName","name","iconColor","color","backgroundColor","size","faSize","wrapperSize","ButtonLink","props","disabled","dataName","dataTestId","ariaLabel","link","onClick","onKeyDown","className","customStyle","useTitle","contentView","styleButton","classnames","button","primary","secondary","tertiary","text","dangerous","handleOnClick","useCallback","handleOnKeyDown","event","title","propTypes"],"sources":["../../../src/atom/button-link/index.tsx"],"sourcesContent":["import React, {useCallback} from 'react';\nimport {noop} from 'lodash/fp';\nimport classnames from 'classnames';\nimport Link from '../link';\nimport FaIcon from '../icon';\nimport {ICONS} from '../../util/button-icons';\nimport propTypes, {ButtonLinkProps, IconType} from './types';\nimport style from './style.css';\n\nconst getButtonContent = (icon?: IconType, content?: string | React.ReactNode) => {\n  const {type, faIcon, position} = icon || {type: '', position: ''};\n  const Icon = type && ICONS[type];\n\n  if (!Icon && !faIcon) {\n    return (\n      <div className={style.buttonContent}>\n        <span className={style.label}>{content}</span>\n      </div>\n    );\n  }\n\n  const iconComponent = faIcon ? (\n    <FaIcon\n      {...{\n        iconName: faIcon.name,\n        iconColor: faIcon.color,\n        backgroundColor: faIcon.backgroundColor,\n        size: {\n          faSize: faIcon.size,\n          wrapperSize: faIcon.size\n        }\n      }}\n    />\n  ) : (\n    <Icon className={style.icon} theme=\"coorpmanager\" />\n  );\n\n  return (\n    <div className={style.buttonContent}>\n      {position === 'left' ? iconComponent : null}\n      {content ? <span className={style.label}>{content}</span> : null}\n      {position === 'right' ? iconComponent : null}\n    </div>\n  );\n};\n\nconst ButtonLink = (props: ButtonLinkProps) => {\n  const {\n    type,\n    label,\n    content,\n    disabled = false,\n    icon,\n    'data-name': dataName,\n    'data-testid': dataTestId = 'button-link',\n    'aria-label': ariaLabel,\n    link,\n    onClick = noop,\n    onKeyDown = noop,\n    className,\n    customStyle,\n    useTitle = true\n  } = props;\n  const contentView = getButtonContent(icon, content ?? label);\n  const styleButton = classnames(\n    className,\n    style.button,\n    type === 'primary' && style.primary,\n    type === 'secondary' && style.secondary,\n    type === 'tertiary' && style.tertiary,\n    type === 'text' && style.text,\n    type === 'dangerous' && style.dangerous,\n    link && style.link,\n    disabled && style.disabled\n  );\n\n  const handleOnClick = useCallback(() => onClick(), [onClick]);\n\n  const handleOnKeyDown = useCallback(event => onKeyDown(event), [onKeyDown]);\n\n  if (link) {\n    return (\n      <Link\n        {...link}\n        {...(useTitle && {\n          title: ariaLabel || label\n        })}\n        style={customStyle}\n        className={styleButton}\n        data-name={dataName}\n        data-testid={dataTestId}\n        aria-label={ariaLabel || label}\n      >\n        {contentView}\n      </Link>\n    );\n  }\n\n  return (\n    <button\n      {...(useTitle && {\n        title: ariaLabel || label\n      })}\n      type=\"button\"\n      aria-label={ariaLabel || label}\n      data-name={dataName}\n      data-testid={dataTestId}\n      style={customStyle}\n      className={styleButton}\n      onClick={handleOnClick}\n      onKeyDown={handleOnKeyDown}\n      tabIndex={0}\n      disabled={disabled}\n    >\n      {contentView}\n    </button>\n  );\n};\n\nButtonLink.propTypes = propTypes;\n\nexport default ButtonLink;\n"],"mappings":"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"}
+{"version":3,"file":"index.js","names":["getButtonContent","icon","content","hovered","hoverBackgroundColor","hoverColor","type","faIcon","position","Icon","ICONS","isApplyHover","style","buttonContent","label","iconComponent","iconName","name","iconColor","color","backgroundColor","size","faSize","wrapperSize","ButtonLink","props","disabled","dataName","dataTestId","ariaLabel","link","onClick","onKeyDown","className","customStyle","useTitle","styleButton","classnames","button","primary","secondary","tertiary","text","dangerous","setHovered","useState","handleOnClick","useCallback","handleOnKeyDown","event","handleMouseOver","handleMouseLeave","_customStyle","useMemo","title","propTypes"],"sources":["../../../src/atom/button-link/index.tsx"],"sourcesContent":["import React, {useCallback, useState, useMemo} from 'react';\nimport {noop} from 'lodash/fp';\nimport classnames from 'classnames';\nimport Link from '../link';\nimport FaIcon from '../icon';\nimport {ICONS} from '../../util/button-icons';\nimport propTypes, {ButtonLinkProps, IconType} from './types';\nimport style from './style.css';\n\nconst getButtonContent = (\n  icon?: IconType,\n  content?: string | React.ReactNode,\n  hovered?: boolean,\n  hoverBackgroundColor?: string,\n  hoverColor?: string\n) => {\n  const {type, faIcon, position} = icon || {type: '', position: ''};\n  const Icon = type && ICONS[type];\n  const isApplyHover = hovered && hoverBackgroundColor && hoverColor;\n\n  if (!Icon && !faIcon) {\n    return (\n      <div className={style.buttonContent}>\n        <span className={style.label}>{content}</span>\n      </div>\n    );\n  }\n\n  const iconComponent = faIcon ? (\n    <FaIcon\n      {...{\n        iconName: faIcon.name,\n        iconColor: isApplyHover ? hoverColor : faIcon.color,\n        backgroundColor: isApplyHover ? hoverBackgroundColor : faIcon.backgroundColor,\n        size: {\n          faSize: faIcon.size,\n          wrapperSize: faIcon.size\n        }\n      }}\n    />\n  ) : (\n    <Icon className={style.icon} theme=\"coorpmanager\" />\n  );\n\n  return (\n    <div className={style.buttonContent}>\n      {position === 'left' ? iconComponent : null}\n      {content ? <span className={style.label}>{content}</span> : null}\n      {position === 'right' ? iconComponent : null}\n    </div>\n  );\n};\n\nconst ButtonLink = (props: ButtonLinkProps) => {\n  const {\n    type,\n    label,\n    content,\n    hoverBackgroundColor,\n    hoverColor,\n    disabled = false,\n    icon,\n    'data-name': dataName,\n    'data-testid': dataTestId = 'button-link',\n    'aria-label': ariaLabel,\n    link,\n    onClick = noop,\n    onKeyDown = noop,\n    className,\n    customStyle,\n    useTitle = true\n  } = props;\n  const styleButton = classnames(\n    className,\n    style.button,\n    type === 'primary' && style.primary,\n    type === 'secondary' && style.secondary,\n    type === 'tertiary' && style.tertiary,\n    type === 'text' && style.text,\n    type === 'dangerous' && style.dangerous,\n    link && style.link,\n    disabled && style.disabled\n  );\n\n  const [hovered, setHovered] = useState(false);\n\n  const handleOnClick = useCallback(() => onClick(), [onClick]);\n\n  const handleOnKeyDown = useCallback(event => onKeyDown(event), [onKeyDown]);\n\n  const handleMouseOver = useCallback(() => setHovered(true), [setHovered]);\n\n  const handleMouseLeave = useCallback(() => setHovered(false), [setHovered]);\n\n  const _customStyle = useMemo(() => {\n    return {\n      ...customStyle,\n      ...((hoverBackgroundColor || hoverColor) && hovered\n        ? {\n            backgroundColor: hoverBackgroundColor,\n            color: hoverColor\n          }\n        : null)\n    };\n  }, [hoverBackgroundColor, hoverColor, hovered, customStyle]);\n\n  if (link) {\n    return (\n      <Link\n        {...link}\n        {...(useTitle && {\n          title: ariaLabel || label\n        })}\n        style={customStyle}\n        className={styleButton}\n        data-name={dataName}\n        data-testid={dataTestId}\n        aria-label={ariaLabel || label}\n      >\n        {getButtonContent(icon, content ?? label)}\n      </Link>\n    );\n  }\n\n  return (\n    <button\n      {...(useTitle && {\n        title: ariaLabel || label\n      })}\n      type=\"button\"\n      aria-label={ariaLabel || label}\n      data-name={dataName}\n      data-testid={dataTestId}\n      style={_customStyle}\n      className={styleButton}\n      onClick={handleOnClick}\n      onKeyDown={handleOnKeyDown}\n      onMouseOver={handleMouseOver}\n      onMouseLeave={handleMouseLeave}\n      tabIndex={0}\n      disabled={disabled}\n    >\n      {getButtonContent(icon, content ?? label, hovered, hoverBackgroundColor, hoverColor)}\n    </button>\n  );\n};\n\nButtonLink.propTypes = propTypes;\n\nexport default ButtonLink;\n"],"mappings":";;;;;;;AAAA;;AAEA;;AACA;;AACA;;AACA;;AACA;;AACA;;;;;;;;;;AAEA,MAAMA,gBAAgB,GAAG,CACvBC,IADuB,EAEvBC,OAFuB,EAGvBC,OAHuB,EAIvBC,oBAJuB,EAKvBC,UALuB,KAMpB;EACH,MAAM;IAACC,IAAD;IAAOC,MAAP;IAAeC;EAAf,IAA2BP,IAAI,IAAI;IAACK,IAAI,EAAE,EAAP;IAAWE,QAAQ,EAAE;EAArB,CAAzC;EACA,MAAMC,IAAI,GAAGH,IAAI,IAAII,kBAAA,CAAMJ,IAAN,CAArB;EACA,MAAMK,YAAY,GAAGR,OAAO,IAAIC,oBAAX,IAAmCC,UAAxD;;EAEA,IAAI,CAACI,IAAD,IAAS,CAACF,MAAd,EAAsB;IACpB,oBACE;MAAK,SAAS,EAAEK,cAAA,CAAMC;IAAtB,gBACE;MAAM,SAAS,EAAED,cAAA,CAAME;IAAvB,GAA+BZ,OAA/B,CADF,CADF;EAKD;;EAED,MAAMa,aAAa,GAAGR,MAAM,gBAC1B,6BAAC,aAAD;IAEIS,QAAQ,EAAET,MAAM,CAACU,IAFrB;IAGIC,SAAS,EAAEP,YAAY,GAAGN,UAAH,GAAgBE,MAAM,CAACY,KAHlD;IAIIC,eAAe,EAAET,YAAY,GAAGP,oBAAH,GAA0BG,MAAM,CAACa,eAJlE;IAKIC,IAAI,EAAE;MACJC,MAAM,EAAEf,MAAM,CAACc,IADX;MAEJE,WAAW,EAAEhB,MAAM,CAACc;IAFhB;EALV,EAD0B,gBAa1B,6BAAC,IAAD;IAAM,SAAS,EAAET,cAAA,CAAMX,IAAvB;IAA6B,KAAK,EAAC;EAAnC,EAbF;EAgBA,oBACE;IAAK,SAAS,EAAEW,cAAA,CAAMC;EAAtB,GACGL,QAAQ,KAAK,MAAb,GAAsBO,aAAtB,GAAsC,IADzC,EAEGb,OAAO,gBAAG;IAAM,SAAS,EAAEU,cAAA,CAAME;EAAvB,GAA+BZ,OAA/B,CAAH,GAAoD,IAF9D,EAGGM,QAAQ,KAAK,OAAb,GAAuBO,aAAvB,GAAuC,IAH1C,CADF;AAOD,CA1CD;;AA4CA,MAAMS,UAAU,GAAIC,KAAD,IAA4B;EAC7C,MAAM;IACJnB,IADI;IAEJQ,KAFI;IAGJZ,OAHI;IAIJE,oBAJI;IAKJC,UALI;IAMJqB,QAAQ,GAAG,KANP;IAOJzB,IAPI;IAQJ,aAAa0B,QART;IASJ,eAAeC,UAAU,GAAG,aATxB;IAUJ,cAAcC,SAVV;IAWJC,IAXI;IAYJC,OAAO,iBAZH;IAaJC,SAAS,iBAbL;IAcJC,SAdI;IAeJC,WAfI;IAgBJC,QAAQ,GAAG;EAhBP,IAiBFV,KAjBJ;EAkBA,MAAMW,WAAW,GAAG,IAAAC,mBAAA,EAClBJ,SADkB,EAElBrB,cAAA,CAAM0B,MAFY,EAGlBhC,IAAI,KAAK,SAAT,IAAsBM,cAAA,CAAM2B,OAHV,EAIlBjC,IAAI,KAAK,WAAT,IAAwBM,cAAA,CAAM4B,SAJZ,EAKlBlC,IAAI,KAAK,UAAT,IAAuBM,cAAA,CAAM6B,QALX,EAMlBnC,IAAI,KAAK,MAAT,IAAmBM,cAAA,CAAM8B,IANP,EAOlBpC,IAAI,KAAK,WAAT,IAAwBM,cAAA,CAAM+B,SAPZ,EAQlBb,IAAI,IAAIlB,cAAA,CAAMkB,IARI,EASlBJ,QAAQ,IAAId,cAAA,CAAMc,QATA,CAApB;EAYA,MAAM,CAACvB,OAAD,EAAUyC,UAAV,IAAwB,IAAAC,eAAA,EAAS,KAAT,CAA9B;EAEA,MAAMC,aAAa,GAAG,IAAAC,kBAAA,EAAY,MAAMhB,OAAO,EAAzB,EAA6B,CAACA,OAAD,CAA7B,CAAtB;EAEA,MAAMiB,eAAe,GAAG,IAAAD,kBAAA,EAAYE,KAAK,IAAIjB,SAAS,CAACiB,KAAD,CAA9B,EAAuC,CAACjB,SAAD,CAAvC,CAAxB;EAEA,MAAMkB,eAAe,GAAG,IAAAH,kBAAA,EAAY,MAAMH,UAAU,CAAC,IAAD,CAA5B,EAAoC,CAACA,UAAD,CAApC,CAAxB;EAEA,MAAMO,gBAAgB,GAAG,IAAAJ,kBAAA,EAAY,MAAMH,UAAU,CAAC,KAAD,CAA5B,EAAqC,CAACA,UAAD,CAArC,CAAzB;;EAEA,MAAMQ,YAAY,GAAG,IAAAC,cAAA,EAAQ,MAAM;IACjC,oBACKnB,WADL,EAEM,CAAC9B,oBAAoB,IAAIC,UAAzB,KAAwCF,OAAxC,GACA;MACEiB,eAAe,EAAEhB,oBADnB;MAEEe,KAAK,EAAEd;IAFT,CADA,GAKA,IAPN;EASD,CAVoB,EAUlB,CAACD,oBAAD,EAAuBC,UAAvB,EAAmCF,OAAnC,EAA4C+B,WAA5C,CAVkB,CAArB;;EAYA,IAAIJ,IAAJ,EAAU;IACR,oBACE,6BAAC,aAAD,eACMA,IADN,EAEOK,QAAQ,IAAI;MACfmB,KAAK,EAAEzB,SAAS,IAAIf;IADL,CAFnB;MAKE,KAAK,EAAEoB,WALT;MAME,SAAS,EAAEE,WANb;MAOE,aAAWT,QAPb;MAQE,eAAaC,UARf;MASE,cAAYC,SAAS,IAAIf;IAT3B,IAWGd,gBAAgB,CAACC,IAAD,EAAOC,OAAO,IAAIY,KAAlB,CAXnB,CADF;EAeD;;EAED,oBACE,oDACOqB,QAAQ,IAAI;IACfmB,KAAK,EAAEzB,SAAS,IAAIf;EADL,CADnB;IAIE,IAAI,EAAC,QAJP;IAKE,cAAYe,SAAS,IAAIf,KAL3B;IAME,aAAWa,QANb;IAOE,eAAaC,UAPf;IAQE,KAAK,EAAEwB,YART;IASE,SAAS,EAAEhB,WATb;IAUE,OAAO,EAAEU,aAVX;IAWE,SAAS,EAAEE,eAXb;IAYE,WAAW,EAAEE,eAZf;IAaE,YAAY,EAAEC,gBAbhB;IAcE,QAAQ,EAAE,CAdZ;IAeE,QAAQ,EAAEzB;EAfZ,IAiBG1B,gBAAgB,CAACC,IAAD,EAAOC,OAAO,IAAIY,KAAlB,EAAyBX,OAAzB,EAAkCC,oBAAlC,EAAwDC,UAAxD,CAjBnB,CADF;AAqBD,CA5FD;;AA8FAmB,UAAU,CAAC+B,SAAX,2CAAuBA,cAAvB;eAEe/B,U"}

package/lib/atom/button-link/types.d.ts

@@ -18,6 +18,8 @@ declare const propTypes: {
         download: PropTypes.Requireable<boolean>;
         target: PropTypes.Requireable<string>;
     }>>;
+    hoverBackgroundColor: PropTypes.Requireable<string>;
+    hoverColor: PropTypes.Requireable<string>;
     disabled: PropTypes.Requireable<boolean>;
     className: PropTypes.Requireable<string>;
     customStyle: PropTypes.Requireable<PropTypes.InferProps<{}>>;
@@ -48,6 +50,8 @@ export declare type ButtonLinkProps = {
         download?: boolean;
         target?: '_self' | '_blank' | '_parent' | '_top';
     };
+    hoverBackgroundColor?: string;
+    hoverColor?: string;
     disabled?: boolean;
     className?: string;
     customStyle?: Record<string, unknown>;

package/lib/atom/button-link/types.d.ts.map

@@ -1 +1 @@
-{"version":3,"file":"types.d.ts","sourceRoot":"","sources":["../../../src/atom/button-link/types.ts"],"names":[],"mappings":";AAAA,OAAO,SAAS,MAAM,YAAY,CAAC;AAEnC,OAAO,EAAC,KAAK,EAAC,MAAM,yBAAyB,CAAC;AAE9C,QAAA,MAAM,SAAS;;;;;;;;;;;;;;;;;;;;CAoBd,CAAC;AAEF,oBAAY,UAAU,GAAG;IACvB,IAAI,EAAE,MAAM,CAAC;IACb,KAAK,CAAC,EAAE,MAAM,CAAC;IACf,eAAe,CAAC,EAAE,MAAM,CAAC;IACzB,IAAI,CAAC,EAAE,MAAM,CAAC;CACf,CAAC;AAEF,oBAAY,QAAQ,GAAG;IACrB,QAAQ,EAAE,OAAO,GAAG,MAAM,CAAC;IAC3B,IAAI,CAAC,EAAE,MAAM,OAAO,KAAK,CAAC;IAC1B,MAAM,CAAC,EAAE,UAAU,CAAC;CACrB,CAAC;AACF,oBAAY,eAAe,GAAG;IAC5B,IAAI,CAAC,EAAE,SAAS,GAAG,WAAW,GAAG,UAAU,GAAG,MAAM,GAAG,WAAW,CAAC;IACnE,KAAK,CAAC,EAAE,MAAM,CAAC;IACf,OAAO,CAAC,EAAE,KAAK,CAAC,SAAS,CAAC;IAC1B,YAAY,CAAC,EAAE,MAAM,CAAC;IACtB,WAAW,CAAC,EAAE,MAAM,CAAC;IACrB,aAAa,CAAC,EAAE,MAAM,CAAC;IACvB,IAAI,CAAC,EAAE,QAAQ,CAAC;IAChB,OAAO,CAAC,EAAE,MAAM,IAAI,CAAC;IACrB,SAAS,CAAC,EAAE,MAAM,IAAI,CAAC;IACvB,IAAI,CAAC,EAAE;QACL,IAAI,CAAC,EAAE,MAAM,CAAC;QACd,QAAQ,CAAC,EAAE,OAAO,CAAC;QACnB,MAAM,CAAC,EAAE,OAAO,GAAG,QAAQ,GAAG,SAAS,GAAG,MAAM,CAAC;KAClD,CAAC;IACF,QAAQ,CAAC,EAAE,OAAO,CAAC;IACnB,SAAS,CAAC,EAAE,MAAM,CAAC;IACnB,WAAW,CAAC,EAAE,MAAM,CAAC,MAAM,EAAE,OAAO,CAAC,CAAC;IACtC,QAAQ,CAAC,EAAE,OAAO,CAAC;CACpB,CAAC;AAEF,oBAAY,OAAO,GAAG;IAAC,KAAK,EAAE,eAAe,CAAA;CAAC,CAAC;AAE/C,eAAe,SAAS,CAAC"}
+{"version":3,"file":"types.d.ts","sourceRoot":"","sources":["../../../src/atom/button-link/types.ts"],"names":[],"mappings":";AAAA,OAAO,SAAS,MAAM,YAAY,CAAC;AAEnC,OAAO,EAAC,KAAK,EAAC,MAAM,yBAAyB,CAAC;AAE9C,QAAA,MAAM,SAAS;;;;;;;;;;;;;;;;;;;;;;CAsBd,CAAC;AAEF,oBAAY,UAAU,GAAG;IACvB,IAAI,EAAE,MAAM,CAAC;IACb,KAAK,CAAC,EAAE,MAAM,CAAC;IACf,eAAe,CAAC,EAAE,MAAM,CAAC;IACzB,IAAI,CAAC,EAAE,MAAM,CAAC;CACf,CAAC;AAEF,oBAAY,QAAQ,GAAG;IACrB,QAAQ,EAAE,OAAO,GAAG,MAAM,CAAC;IAC3B,IAAI,CAAC,EAAE,MAAM,OAAO,KAAK,CAAC;IAC1B,MAAM,CAAC,EAAE,UAAU,CAAC;CACrB,CAAC;AACF,oBAAY,eAAe,GAAG;IAC5B,IAAI,CAAC,EAAE,SAAS,GAAG,WAAW,GAAG,UAAU,GAAG,MAAM,GAAG,WAAW,CAAC;IACnE,KAAK,CAAC,EAAE,MAAM,CAAC;IACf,OAAO,CAAC,EAAE,KAAK,CAAC,SAAS,CAAC;IAC1B,YAAY,CAAC,EAAE,MAAM,CAAC;IACtB,WAAW,CAAC,EAAE,MAAM,CAAC;IACrB,aAAa,CAAC,EAAE,MAAM,CAAC;IACvB,IAAI,CAAC,EAAE,QAAQ,CAAC;IAChB,OAAO,CAAC,EAAE,MAAM,IAAI,CAAC;IACrB,SAAS,CAAC,EAAE,MAAM,IAAI,CAAC;IACvB,IAAI,CAAC,EAAE;QACL,IAAI,CAAC,EAAE,MAAM,CAAC;QACd,QAAQ,CAAC,EAAE,OAAO,CAAC;QACnB,MAAM,CAAC,EAAE,OAAO,GAAG,QAAQ,GAAG,SAAS,GAAG,MAAM,CAAC;KAClD,CAAC;IACF,oBAAoB,CAAC,EAAE,MAAM,CAAC;IAC9B,UAAU,CAAC,EAAE,MAAM,CAAC;IACpB,QAAQ,CAAC,EAAE,OAAO,CAAC;IACnB,SAAS,CAAC,EAAE,MAAM,CAAC;IACnB,WAAW,CAAC,EAAE,MAAM,CAAC,MAAM,EAAE,OAAO,CAAC,CAAC;IACtC,QAAQ,CAAC,EAAE,OAAO,CAAC;CACpB,CAAC;AAEF,oBAAY,OAAO,GAAG;IAAC,KAAK,EAAE,eAAe,CAAA;CAAC,CAAC;AAE/C,eAAe,SAAS,CAAC"}

package/lib/atom/button-link/types.js

@@ -28,6 +28,8 @@ const propTypes = {
     download: _propTypes.default.bool,
     target: _propTypes.default.oneOf(['_self', '_blank', '_parent', '_top'])
   }),
+  hoverBackgroundColor: _propTypes.default.string,
+  hoverColor: _propTypes.default.string,
   disabled: _propTypes.default.bool,
   className: _propTypes.default.string,
   customStyle: _propTypes.default.shape({})