@coorpacademy/components 11.32.45 → 11.32.46

package/es/template/app-review/prop-types.d.ts

@@ -810,8 +810,8 @@ declare const propTypes: {
                 'aria-label': PropTypes.Requireable<string>;
                 title: PropTypes.Requireable<string>;
                 target: PropTypes.Requireable<string>;
-                skinHover: PropTypes.Requireable<boolean>;
                 hoverColor: PropTypes.Requireable<string>;
+                hoverBackgroundColor: PropTypes.Requireable<string>;
                 download: PropTypes.Requireable<boolean>;
                 onClick: PropTypes.Requireable<(...args: any[]) => any>;
                 onMouseEnter: PropTypes.Requireable<(...args: any[]) => any>;

package/es/template/back-office/brand-update/index.d.ts

@@ -1207,8 +1207,8 @@ declare namespace BrandUpdate {
                 'aria-label': PropTypes.Requireable<string>;
                 title: PropTypes.Requireable<string>;
                 target: PropTypes.Requireable<string>;
-                skinHover: PropTypes.Requireable<boolean>;
                 hoverColor: PropTypes.Requireable<string>;
+                hoverBackgroundColor: PropTypes.Requireable<string>;
                 download: PropTypes.Requireable<boolean>;
                 onClick: PropTypes.Requireable<(...args: any[]) => any>;
                 onMouseEnter: PropTypes.Requireable<(...args: any[]) => any>;

package/es/template/certification-detail/index.d.ts

@@ -27,6 +27,7 @@ declare namespace CertificationDetail {
     }
     namespace propTypes {
         const title: PropTypes.Validator<string>;
+        const tag: PropTypes.Requireable<string>;
         const certificationRef: PropTypes.Validator<string>;
         const description: PropTypes.Validator<string>;
         const logoUrl: PropTypes.Requireable<string>;

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

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

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

@@ -21,6 +21,7 @@ const CertificationDetail = (props, context) => {
   const {
     certificationRef,
     title,
+    tag,
     description,
     certificationCourses,
     ongoingCoursesAvailable,
@@ -81,7 +82,7 @@ const CertificationDetail = (props, context) => {
     className: style.logo,
     src: logoUrl
   })), /*#__PURE__*/React.createElement("div", null, /*#__PURE__*/React.createElement(Tag, {
-    label: translate('certification')
+    label: tag
   }), /*#__PURE__*/React.createElement("div", {
     className: style.title
   }, title), description ? /*#__PURE__*/React.createElement(React.Fragment, null, /*#__PURE__*/React.createElement(Description, null), isDescriptionTruncated ? /*#__PURE__*/React.createElement("div", {
@@ -127,6 +128,7 @@ CertificationDetail.contextTypes = {
 };
 CertificationDetail.propTypes = process.env.NODE_ENV !== "production" ? {
   title: PropTypes.string.isRequired,
+  tag: PropTypes.string,
   certificationRef: PropTypes.string.isRequired,
   description: PropTypes.string.isRequired,
   logoUrl: PropTypes.string,

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

@@ -1 +1 @@
-{"version":3,"file":"index.js","names":["React","useCallback","useEffect","useRef","useState","useMemo","PropTypes","classnames","Markdown","Provider","Tag","SelectOptionPropTypes","ButtonLinkIcon","Icon","CardsGrid","AllCourses","ContinueLearningButton","ProgressWrapper","style","CertificationDetail","props","context","certificationRef","title","description","certificationCourses","ongoingCoursesAvailable","filters","onBackClick","onContinueLearningClick","metrics","logoUrl","diplomaUrl","badgeUrl","descriptionRef","translate","progression","mandatoryModules","stars","totalModules","isDescriptionTruncated","setIsDescriptionTruncated","showMore","setShowMore","handleShowMore","current","clientHeight","scrollHeight","Description","truncate","completedModules","backgroundContainer","container","backButton","ctaContainer","logoContainer","logo","showMoreWrapper","faSize","wrapperSize","contentStats","type","downloadUrl","contextTypes","skin","childContextTypes","propTypes","string","isRequired","shape","number","bool","onChange","func","options","arrayOf"],"sources":["../../../src/template/certification-detail/index.js"],"sourcesContent":["import React, {useCallback, useEffect, useRef, useState, useMemo} from 'react';\nimport PropTypes from 'prop-types';\nimport classnames from 'classnames';\nimport {compact, lowerCase, round, isNil} from 'lodash/fp';\nimport Markdown from 'markdown-to-jsx';\nimport Provider from '../../atom/provider';\nimport Tag from '../../atom/tag';\nimport {SelectOptionPropTypes} from '../../atom/select';\nimport ButtonLinkIcon from '../../atom/button-link-icon';\nimport Icon from '../../atom/icon';\nimport CardsGrid from '../../organism/cards-grid';\nimport AllCourses from '../skill-detail/all-courses';\nimport {ContinueLearningButton} from '../skill-detail';\nimport ProgressWrapper from '../../molecule/progress-wrapper';\nimport style from './style.css';\n\nconst CertificationDetail = (props, context) => {\n  const {\n    certificationRef,\n    title,\n    description,\n    certificationCourses,\n    ongoingCoursesAvailable,\n    filters,\n    onBackClick,\n    onContinueLearningClick,\n    metrics,\n    logoUrl,\n    diplomaUrl,\n    badgeUrl\n  } = props;\n  const descriptionRef = useRef(null);\n  const {translate} = context;\n  const {progression, mandatoryModules, stars, totalModules} = metrics;\n\n  const [isDescriptionTruncated, setIsDescriptionTruncated] = useState(false);\n  const [showMore, setShowMore] = useState(false);\n\n  const handleShowMore = useCallback(() => setShowMore(!showMore), [setShowMore, showMore]);\n\n  useEffect(() => {\n    if (descriptionRef.current) {\n      const {clientHeight = 0, scrollHeight = 0} = descriptionRef.current;\n      setIsDescriptionTruncated(scrollHeight > clientHeight);\n    }\n  }, [description]);\n\n  const Description = useCallback(() => {\n    return (\n      <div\n        ref={descriptionRef}\n        className={classnames(style.description, !showMore && style.truncate)}\n      >\n        <Markdown>{description}</Markdown>\n      </div>\n    );\n  }, [showMore, description]);\n\n  const completedModules = useMemo(\n    () => round((mandatoryModules * progression) / 100),\n    [mandatoryModules, progression]\n  );\n\n  return (\n    <div className={style.backgroundContainer}>\n      <div className={style.container} data-name={certificationRef}>\n        {!isNil(onBackClick) ? (\n          <ButtonLinkIcon\n            faIcon=\"arrow-left\"\n            data-name=\"back-button\"\n            aria-label={translate('back')}\n            onClick={onBackClick}\n            className={style.backButton}\n            tooltipPlacement=\"right\"\n          />\n        ) : null}\n        <div className={style.ctaContainer}>\n          <div className={style.logoContainer}>\n            <img className={style.logo} src={logoUrl} />\n          </div>\n          <div>\n            <Tag label={translate('certification')} />\n            <div className={style.title}>{title}</div>\n            {description ? (\n              <>\n                <Description />\n                {isDescriptionTruncated ? (\n                  <div className={style.showMoreWrapper} onClick={handleShowMore}>\n                    {translate(showMore ? 'Show less' : 'Show more')}\n                    <Icon\n                      iconName={showMore ? 'chevron-up' : 'chevron-down'}\n                      size={{faSize: 14, wrapperSize: 16}}\n                    />\n                  </div>\n                ) : null}\n              </>\n            ) : null}\n            <div className={style.contentStats}>\n              <span>{`${totalModules} ${lowerCase(translate('modules'))}`}</span>\n            </div>\n            <ContinueLearningButton\n              ongoingCoursesAvailable={ongoingCoursesAvailable}\n              onClick={onContinueLearningClick}\n            />\n          </div>\n        </div>\n        <ProgressWrapper\n          title={translate('your_progress')}\n          subtitle={translate('certification_progress_wrapper_subtitle')}\n          progression={progression}\n          completedModules={completedModules}\n          mandatoryModules={mandatoryModules}\n          sections={compact([\n            {\n              type: 'diploma',\n              downloadUrl: diplomaUrl\n            },\n            badgeUrl && {\n              type: 'badge',\n              downloadUrl: badgeUrl\n            },\n            {\n              type: 'stars',\n              stars\n            }\n          ])}\n        />\n        <AllCourses\n          content={certificationCourses}\n          filters={filters}\n          data-name=\"certification-courses\"\n        />\n      </div>\n    </div>\n  );\n};\n\nCertificationDetail.contextTypes = {\n  skin: Provider.childContextTypes.skin,\n  translate: Provider.childContextTypes.translate\n};\n\nCertificationDetail.propTypes = {\n  title: PropTypes.string.isRequired,\n  certificationRef: PropTypes.string.isRequired,\n  description: PropTypes.string.isRequired,\n  logoUrl: PropTypes.string,\n  metrics: PropTypes.shape({\n    progression: PropTypes.number,\n    stars: PropTypes.number,\n    mandatoryModules: PropTypes.number,\n    totalModules: PropTypes.number\n  }),\n  diplomaUrl: PropTypes.string,\n  badgeUrl: PropTypes.string,\n  ongoingCoursesAvailable: PropTypes.bool,\n  certificationCourses: PropTypes.shape(CardsGrid.propTypes),\n  filters: PropTypes.shape({\n    onChange: PropTypes.func,\n    options: PropTypes.arrayOf(PropTypes.shape(SelectOptionPropTypes))\n  }),\n  onBackClick: PropTypes.func,\n  onContinueLearningClick: PropTypes.func\n};\n\nexport default CertificationDetail;\n"],"mappings":"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"}
+{"version":3,"file":"index.js","names":["React","useCallback","useEffect","useRef","useState","useMemo","PropTypes","classnames","Markdown","Provider","Tag","SelectOptionPropTypes","ButtonLinkIcon","Icon","CardsGrid","AllCourses","ContinueLearningButton","ProgressWrapper","style","CertificationDetail","props","context","certificationRef","title","tag","description","certificationCourses","ongoingCoursesAvailable","filters","onBackClick","onContinueLearningClick","metrics","logoUrl","diplomaUrl","badgeUrl","descriptionRef","translate","progression","mandatoryModules","stars","totalModules","isDescriptionTruncated","setIsDescriptionTruncated","showMore","setShowMore","handleShowMore","current","clientHeight","scrollHeight","Description","truncate","completedModules","backgroundContainer","container","backButton","ctaContainer","logoContainer","logo","showMoreWrapper","faSize","wrapperSize","contentStats","type","downloadUrl","contextTypes","skin","childContextTypes","propTypes","string","isRequired","shape","number","bool","onChange","func","options","arrayOf"],"sources":["../../../src/template/certification-detail/index.js"],"sourcesContent":["import React, {useCallback, useEffect, useRef, useState, useMemo} from 'react';\nimport PropTypes from 'prop-types';\nimport classnames from 'classnames';\nimport {compact, lowerCase, round, isNil} from 'lodash/fp';\nimport Markdown from 'markdown-to-jsx';\nimport Provider from '../../atom/provider';\nimport Tag from '../../atom/tag';\nimport {SelectOptionPropTypes} from '../../atom/select';\nimport ButtonLinkIcon from '../../atom/button-link-icon';\nimport Icon from '../../atom/icon';\nimport CardsGrid from '../../organism/cards-grid';\nimport AllCourses from '../skill-detail/all-courses';\nimport {ContinueLearningButton} from '../skill-detail';\nimport ProgressWrapper from '../../molecule/progress-wrapper';\nimport style from './style.css';\n\nconst CertificationDetail = (props, context) => {\n  const {\n    certificationRef,\n    title,\n    tag,\n    description,\n    certificationCourses,\n    ongoingCoursesAvailable,\n    filters,\n    onBackClick,\n    onContinueLearningClick,\n    metrics,\n    logoUrl,\n    diplomaUrl,\n    badgeUrl\n  } = props;\n  const descriptionRef = useRef(null);\n  const {translate} = context;\n\n  const {progression, mandatoryModules, stars, totalModules} = metrics;\n\n  const [isDescriptionTruncated, setIsDescriptionTruncated] = useState(false);\n  const [showMore, setShowMore] = useState(false);\n\n  const handleShowMore = useCallback(() => setShowMore(!showMore), [setShowMore, showMore]);\n\n  useEffect(() => {\n    if (descriptionRef.current) {\n      const {clientHeight = 0, scrollHeight = 0} = descriptionRef.current;\n      setIsDescriptionTruncated(scrollHeight > clientHeight);\n    }\n  }, [description]);\n\n  const Description = useCallback(() => {\n    return (\n      <div\n        ref={descriptionRef}\n        className={classnames(style.description, !showMore && style.truncate)}\n      >\n        <Markdown>{description}</Markdown>\n      </div>\n    );\n  }, [showMore, description]);\n\n  const completedModules = useMemo(\n    () => round((mandatoryModules * progression) / 100),\n    [mandatoryModules, progression]\n  );\n\n  return (\n    <div className={style.backgroundContainer}>\n      <div className={style.container} data-name={certificationRef}>\n        {!isNil(onBackClick) ? (\n          <ButtonLinkIcon\n            faIcon=\"arrow-left\"\n            data-name=\"back-button\"\n            aria-label={translate('back')}\n            onClick={onBackClick}\n            className={style.backButton}\n            tooltipPlacement=\"right\"\n          />\n        ) : null}\n        <div className={style.ctaContainer}>\n          <div className={style.logoContainer}>\n            <img className={style.logo} src={logoUrl} />\n          </div>\n          <div>\n            <Tag label={tag} />\n            <div className={style.title}>{title}</div>\n            {description ? (\n              <>\n                <Description />\n                {isDescriptionTruncated ? (\n                  <div className={style.showMoreWrapper} onClick={handleShowMore}>\n                    {translate(showMore ? 'Show less' : 'Show more')}\n                    <Icon\n                      iconName={showMore ? 'chevron-up' : 'chevron-down'}\n                      size={{faSize: 14, wrapperSize: 16}}\n                    />\n                  </div>\n                ) : null}\n              </>\n            ) : null}\n            <div className={style.contentStats}>\n              <span>{`${totalModules} ${lowerCase(translate('modules'))}`}</span>\n            </div>\n            <ContinueLearningButton\n              ongoingCoursesAvailable={ongoingCoursesAvailable}\n              onClick={onContinueLearningClick}\n            />\n          </div>\n        </div>\n        <ProgressWrapper\n          title={translate('your_progress')}\n          subtitle={translate('certification_progress_wrapper_subtitle')}\n          progression={progression}\n          completedModules={completedModules}\n          mandatoryModules={mandatoryModules}\n          sections={compact([\n            {\n              type: 'diploma',\n              downloadUrl: diplomaUrl\n            },\n            badgeUrl && {\n              type: 'badge',\n              downloadUrl: badgeUrl\n            },\n            {\n              type: 'stars',\n              stars\n            }\n          ])}\n        />\n        <AllCourses\n          content={certificationCourses}\n          filters={filters}\n          data-name=\"certification-courses\"\n        />\n      </div>\n    </div>\n  );\n};\n\nCertificationDetail.contextTypes = {\n  skin: Provider.childContextTypes.skin,\n  translate: Provider.childContextTypes.translate\n};\n\nCertificationDetail.propTypes = {\n  title: PropTypes.string.isRequired,\n  tag: PropTypes.string,\n  certificationRef: PropTypes.string.isRequired,\n  description: PropTypes.string.isRequired,\n  logoUrl: PropTypes.string,\n  metrics: PropTypes.shape({\n    progression: PropTypes.number,\n    stars: PropTypes.number,\n    mandatoryModules: PropTypes.number,\n    totalModules: PropTypes.number\n  }),\n  diplomaUrl: PropTypes.string,\n  badgeUrl: PropTypes.string,\n  ongoingCoursesAvailable: PropTypes.bool,\n  certificationCourses: PropTypes.shape(CardsGrid.propTypes),\n  filters: PropTypes.shape({\n    onChange: PropTypes.func,\n    options: PropTypes.arrayOf(PropTypes.shape(SelectOptionPropTypes))\n  }),\n  onBackClick: PropTypes.func,\n  onContinueLearningClick: PropTypes.func\n};\n\nexport default CertificationDetail;\n"],"mappings":"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"}

package/es/template/certifications/index.d.ts

@@ -16,7 +16,16 @@ declare namespace Certifications {
             progress: PropTypes.Requireable<number>;
             imgUrl: PropTypes.Requireable<string>;
             onClick: PropTypes.Requireable<(...args: any[]) => any>;
+            locales: PropTypes.Requireable<PropTypes.InferProps<{
+                conditionDescriptionProgress: PropTypes.Requireable<string>;
+            }>>;
         }> | null | undefined)[]>;
+        const locales: PropTypes.Requireable<PropTypes.InferProps<{
+            title: PropTypes.Requireable<string>;
+            subtitle: PropTypes.Requireable<string>;
+            tag: PropTypes.Requireable<string>;
+            count: PropTypes.Requireable<string>;
+        }>>;
         const sorting: PropTypes.Requireable<PropTypes.InferProps<{
             title: PropTypes.Requireable<string>;
             name: PropTypes.Requireable<string>;

package/es/template/certifications/index.d.ts.map

@@ -1 +1 @@
-{"version":3,"file":"index.d.ts","sourceRoot":"","sources":["../../../src/template/certifications/index.js"],"names":[],"mappings":";AASA,uEAsEC"}
+{"version":3,"file":"index.d.ts","sourceRoot":"","sources":["../../../src/template/certifications/index.js"],"names":[],"mappings":";AAUA,uEAwEC"}

package/es/template/certifications/index.js

@@ -1,3 +1,5 @@
+import _map from "lodash/fp/map";
+
 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); }
 
 import React, { useState, useCallback } from 'react';
@@ -11,6 +13,12 @@ import style from './style.css';
 
 const Certifications = (props, context) => {
   const {
+    locales: {
+      title,
+      subtitle,
+      tag,
+      count
+    },
     certifications,
     sorting
   } = props;
@@ -32,8 +40,8 @@ const Certifications = (props, context) => {
     className: style.container,
     "data-name": "Certifications"
   }, /*#__PURE__*/React.createElement(Title, {
-    title: translate('certificates'),
-    subtitle: translate('certificates_subtitle'),
+    title: title,
+    subtitle: subtitle,
     type: "form-group",
     titleSize: "standard-light-weight",
     subtitleSize: "standard-without-margin",
@@ -47,7 +55,7 @@ const Certifications = (props, context) => {
     className: style.sortSectionWrapper
   }, /*#__PURE__*/React.createElement("div", {
     className: style.certificatesCount
-  }, `${certifications.length} ${translate('certificate(s)')}`), /*#__PURE__*/React.createElement("div", {
+  }, count), /*#__PURE__*/React.createElement("div", {
     className: style.sortSection
   }, /*#__PURE__*/React.createElement(InputSwitch, {
     id: 'show-completed-courses-switch',
@@ -61,15 +69,20 @@ const Certifications = (props, context) => {
     className: style.sortWrapper
   }, translate('sort_by'), sortView) : null)), /*#__PURE__*/React.createElement("div", {
     className: style.certificateList
-  }, certifications.map(certification => {
-    if (!showCompleted && certification.progress === 100) {
-      return null;
-    }
-
+  }, _map(certification => {
+    const {
+      label,
+      progress
+    } = certification;
+    if (!showCompleted && progress === 100) return null;
     return /*#__PURE__*/React.createElement("div", {
-      key: certification.label
-    }, /*#__PURE__*/React.createElement(CertificationCard, certification));
-  }))));
+      key: label
+    }, /*#__PURE__*/React.createElement(CertificationCard, _extends({}, certification, {
+      locales: _extends({}, certification.locales, {
+        tag
+      })
+    })));
+  }, certifications))));
 };
 
 Certifications.contextTypes = {
@@ -86,8 +99,17 @@ Certifications.propTypes = process.env.NODE_ENV !== "production" ? {
     }),
     progress: PropTypes.number,
     imgUrl: PropTypes.string,
-    onClick: PropTypes.func
+    onClick: PropTypes.func,
+    locales: PropTypes.shape({
+      conditionDescriptionProgress: PropTypes.string
+    })
   })),
+  locales: PropTypes.shape({
+    title: PropTypes.string,
+    subtitle: PropTypes.string,
+    tag: PropTypes.string,
+    count: PropTypes.string
+  }),
   sorting: PropTypes.shape(Select.propTypes)
 } : {};
 export default Certifications;

package/es/template/certifications/index.js.map

@@ -1 +1 @@
-{"version":3,"file":"index.js","names":["React","useState","useCallback","PropTypes","Provider","Title","Select","InputSwitch","CertificationCard","style","Certifications","props","context","certifications","sorting","translate","showCompleted","setShowCompleted","sortView","undefined","handleShowCompletedToggle","backgroudnContainer","container","iconName","iconColor","borderRadius","backgroundColor","sortSectionWrapper","certificatesCount","length","sortSection","sortWrapper","certificateList","map","certification","progress","label","contextTypes","childContextTypes","propTypes","arrayOf","shape","string","goal","title","condition","nbDone","number","imgUrl","onClick","func"],"sources":["../../../src/template/certifications/index.js"],"sourcesContent":["import React, {useState, useCallback} from 'react';\nimport PropTypes from 'prop-types';\nimport Provider from '../../atom/provider';\nimport Title from '../../atom/title';\nimport Select from '../../atom/select';\nimport InputSwitch from '../../atom/input-switch';\nimport CertificationCard from '../../molecule/certification-card';\nimport style from './style.css';\n\nconst Certifications = (props, context) => {\n  const {certifications, sorting} = props;\n  const {translate} = context;\n\n  const [showCompleted, setShowCompleted] = useState(true);\n\n  const sortView =\n    sorting !== undefined ? (\n      <div data-name=\"choice\">\n        <Select {...sorting} aria-label=\"All courses sort\" />\n      </div>\n    ) : null;\n\n  const handleShowCompletedToggle = useCallback(() => {\n    setShowCompleted(!showCompleted);\n  }, [showCompleted, setShowCompleted]);\n\n  return (\n    <div className={style.backgroudnContainer}>\n      <div className={style.container} data-name=\"Certifications\">\n        <Title\n          title={translate('certificates')}\n          subtitle={translate('certificates_subtitle')}\n          type=\"form-group\"\n          titleSize=\"standard-light-weight\"\n          subtitleSize=\"standard-without-margin\"\n          icon={{\n            iconName: 'wreath-laurel',\n            iconColor: '#B87A00',\n            borderRadius: '12px',\n            backgroundColor: '#FFEECC'\n          }}\n        />\n        <div className={style.sortSectionWrapper}>\n          <div className={style.certificatesCount}>\n            {`${certifications.length} ${translate('certificate(s)')}`}\n          </div>\n          <div className={style.sortSection}>\n            <InputSwitch\n              id={'show-completed-courses-switch'}\n              type=\"switch\"\n              name={translate('show_completed')}\n              title={translate('show_completed')}\n              aria-label={'Show completed courses aria label'}\n              value={showCompleted}\n              onChange={handleShowCompletedToggle}\n            />\n            {sorting ? (\n              <div className={style.sortWrapper}>\n                {translate('sort_by')}\n                {sortView}\n              </div>\n            ) : null}\n          </div>\n        </div>\n        <div className={style.certificateList}>\n          {certifications.map(certification => {\n            if (!showCompleted && certification.progress === 100) {\n              return null;\n            }\n            return (\n              <div key={certification.label}>\n                <CertificationCard {...certification} />\n              </div>\n            );\n          })}\n        </div>\n      </div>\n    </div>\n  );\n};\n\nCertifications.contextTypes = {\n  translate: Provider.childContextTypes.translate\n};\n\nCertifications.propTypes = {\n  certifications: PropTypes.arrayOf(\n    PropTypes.shape({\n      label: PropTypes.string,\n      goal: PropTypes.shape({\n        title: PropTypes.string,\n        condition: PropTypes.shape({\n          nbDone: PropTypes.number\n        })\n      }),\n      progress: PropTypes.number,\n      imgUrl: PropTypes.string,\n      onClick: PropTypes.func\n    })\n  ),\n  sorting: PropTypes.shape(Select.propTypes)\n};\n\nexport default Certifications;\n"],"mappings":";;AAAA,OAAOA,KAAP,IAAeC,QAAf,EAAyBC,WAAzB,QAA2C,OAA3C;AACA,OAAOC,SAAP,MAAsB,YAAtB;AACA,OAAOC,QAAP,MAAqB,qBAArB;AACA,OAAOC,KAAP,MAAkB,kBAAlB;AACA,OAAOC,MAAP,MAAmB,mBAAnB;AACA,OAAOC,WAAP,MAAwB,yBAAxB;AACA,OAAOC,iBAAP,MAA8B,mCAA9B;AACA,OAAOC,KAAP,MAAkB,aAAlB;;AAEA,MAAMC,cAAc,GAAG,CAACC,KAAD,EAAQC,OAAR,KAAoB;EACzC,MAAM;IAACC,cAAD;IAAiBC;EAAjB,IAA4BH,KAAlC;EACA,MAAM;IAACI;EAAD,IAAcH,OAApB;EAEA,MAAM,CAACI,aAAD,EAAgBC,gBAAhB,IAAoChB,QAAQ,CAAC,IAAD,CAAlD;EAEA,MAAMiB,QAAQ,GACZJ,OAAO,KAAKK,SAAZ,gBACE;IAAK,aAAU;EAAf,gBACE,oBAAC,MAAD,eAAYL,OAAZ;IAAqB,cAAW;EAAhC,GADF,CADF,GAII,IALN;EAOA,MAAMM,yBAAyB,GAAGlB,WAAW,CAAC,MAAM;IAClDe,gBAAgB,CAAC,CAACD,aAAF,CAAhB;EACD,CAF4C,EAE1C,CAACA,aAAD,EAAgBC,gBAAhB,CAF0C,CAA7C;EAIA,oBACE;IAAK,SAAS,EAAER,KAAK,CAACY;EAAtB,gBACE;IAAK,SAAS,EAAEZ,KAAK,CAACa,SAAtB;IAAiC,aAAU;EAA3C,gBACE,oBAAC,KAAD;IACE,KAAK,EAAEP,SAAS,CAAC,cAAD,CADlB;IAEE,QAAQ,EAAEA,SAAS,CAAC,uBAAD,CAFrB;IAGE,IAAI,EAAC,YAHP;IAIE,SAAS,EAAC,uBAJZ;IAKE,YAAY,EAAC,yBALf;IAME,IAAI,EAAE;MACJQ,QAAQ,EAAE,eADN;MAEJC,SAAS,EAAE,SAFP;MAGJC,YAAY,EAAE,MAHV;MAIJC,eAAe,EAAE;IAJb;EANR,EADF,eAcE;IAAK,SAAS,EAAEjB,KAAK,CAACkB;EAAtB,gBACE;IAAK,SAAS,EAAElB,KAAK,CAACmB;EAAtB,GACI,GAAEf,cAAc,CAACgB,MAAO,IAAGd,SAAS,CAAC,gBAAD,CAAmB,EAD3D,CADF,eAIE;IAAK,SAAS,EAAEN,KAAK,CAACqB;EAAtB,gBACE,oBAAC,WAAD;IACE,EAAE,EAAE,+BADN;IAEE,IAAI,EAAC,QAFP;IAGE,IAAI,EAAEf,SAAS,CAAC,gBAAD,CAHjB;IAIE,KAAK,EAAEA,SAAS,CAAC,gBAAD,CAJlB;IAKE,cAAY,mCALd;IAME,KAAK,EAAEC,aANT;IAOE,QAAQ,EAAEI;EAPZ,EADF,EAUGN,OAAO,gBACN;IAAK,SAAS,EAAEL,KAAK,CAACsB;EAAtB,GACGhB,SAAS,CAAC,SAAD,CADZ,EAEGG,QAFH,CADM,GAKJ,IAfN,CAJF,CAdF,eAoCE;IAAK,SAAS,EAAET,KAAK,CAACuB;EAAtB,GACGnB,cAAc,CAACoB,GAAf,CAAmBC,aAAa,IAAI;IACnC,IAAI,CAAClB,aAAD,IAAkBkB,aAAa,CAACC,QAAd,KAA2B,GAAjD,EAAsD;MACpD,OAAO,IAAP;IACD;;IACD,oBACE;MAAK,GAAG,EAAED,aAAa,CAACE;IAAxB,gBACE,oBAAC,iBAAD,EAAuBF,aAAvB,CADF,CADF;EAKD,CATA,CADH,CApCF,CADF,CADF;AAqDD,CAtED;;AAwEAxB,cAAc,CAAC2B,YAAf,GAA8B;EAC5BtB,SAAS,EAAEX,QAAQ,CAACkC,iBAAT,CAA2BvB;AADV,CAA9B;AAIAL,cAAc,CAAC6B,SAAf,2CAA2B;EACzB1B,cAAc,EAAEV,SAAS,CAACqC,OAAV,CACdrC,SAAS,CAACsC,KAAV,CAAgB;IACdL,KAAK,EAAEjC,SAAS,CAACuC,MADH;IAEdC,IAAI,EAAExC,SAAS,CAACsC,KAAV,CAAgB;MACpBG,KAAK,EAAEzC,SAAS,CAACuC,MADG;MAEpBG,SAAS,EAAE1C,SAAS,CAACsC,KAAV,CAAgB;QACzBK,MAAM,EAAE3C,SAAS,CAAC4C;MADO,CAAhB;IAFS,CAAhB,CAFQ;IAQdZ,QAAQ,EAAEhC,SAAS,CAAC4C,MARN;IASdC,MAAM,EAAE7C,SAAS,CAACuC,MATJ;IAUdO,OAAO,EAAE9C,SAAS,CAAC+C;EAVL,CAAhB,CADc,CADS;EAezBpC,OAAO,EAAEX,SAAS,CAACsC,KAAV,CAAgBnC,MAAM,CAACiC,SAAvB;AAfgB,CAA3B;AAkBA,eAAe7B,cAAf"}
+{"version":3,"file":"index.js","names":["React","useState","useCallback","PropTypes","Provider","Title","Select","InputSwitch","CertificationCard","style","Certifications","props","context","locales","title","subtitle","tag","count","certifications","sorting","translate","showCompleted","setShowCompleted","sortView","undefined","handleShowCompletedToggle","backgroudnContainer","container","iconName","iconColor","borderRadius","backgroundColor","sortSectionWrapper","certificatesCount","sortSection","sortWrapper","certificateList","certification","label","progress","contextTypes","childContextTypes","propTypes","arrayOf","shape","string","goal","condition","nbDone","number","imgUrl","onClick","func","conditionDescriptionProgress"],"sources":["../../../src/template/certifications/index.js"],"sourcesContent":["import React, {useState, useCallback} from 'react';\nimport PropTypes from 'prop-types';\nimport {map} from 'lodash/fp';\nimport Provider from '../../atom/provider';\nimport Title from '../../atom/title';\nimport Select from '../../atom/select';\nimport InputSwitch from '../../atom/input-switch';\nimport CertificationCard from '../../molecule/certification-card';\nimport style from './style.css';\n\nconst Certifications = (props, context) => {\n  const {\n    locales: {title, subtitle, tag, count},\n    certifications,\n    sorting\n  } = props;\n  const {translate} = context;\n\n  const [showCompleted, setShowCompleted] = useState(true);\n\n  const sortView =\n    sorting !== undefined ? (\n      <div data-name=\"choice\">\n        <Select {...sorting} aria-label=\"All courses sort\" />\n      </div>\n    ) : null;\n\n  const handleShowCompletedToggle = useCallback(() => {\n    setShowCompleted(!showCompleted);\n  }, [showCompleted, setShowCompleted]);\n\n  return (\n    <div className={style.backgroudnContainer}>\n      <div className={style.container} data-name=\"Certifications\">\n        <Title\n          title={title}\n          subtitle={subtitle}\n          type=\"form-group\"\n          titleSize=\"standard-light-weight\"\n          subtitleSize=\"standard-without-margin\"\n          icon={{\n            iconName: 'wreath-laurel',\n            iconColor: '#B87A00',\n            borderRadius: '12px',\n            backgroundColor: '#FFEECC'\n          }}\n        />\n        <div className={style.sortSectionWrapper}>\n          <div className={style.certificatesCount}>{count}</div>\n          <div className={style.sortSection}>\n            <InputSwitch\n              id={'show-completed-courses-switch'}\n              type=\"switch\"\n              name={translate('show_completed')}\n              title={translate('show_completed')}\n              aria-label={'Show completed courses aria label'}\n              value={showCompleted}\n              onChange={handleShowCompletedToggle}\n            />\n            {sorting ? (\n              <div className={style.sortWrapper}>\n                {translate('sort_by')}\n                {sortView}\n              </div>\n            ) : null}\n          </div>\n        </div>\n        <div className={style.certificateList}>\n          {map(certification => {\n            const {label, progress} = certification;\n            if (!showCompleted && progress === 100) return null;\n\n            return (\n              <div key={label}>\n                <CertificationCard {...certification} locales={{...certification.locales, tag}} />\n              </div>\n            );\n          }, certifications)}\n        </div>\n      </div>\n    </div>\n  );\n};\n\nCertifications.contextTypes = {\n  translate: Provider.childContextTypes.translate\n};\n\nCertifications.propTypes = {\n  certifications: PropTypes.arrayOf(\n    PropTypes.shape({\n      label: PropTypes.string,\n      goal: PropTypes.shape({\n        title: PropTypes.string,\n        condition: PropTypes.shape({\n          nbDone: PropTypes.number\n        })\n      }),\n      progress: PropTypes.number,\n      imgUrl: PropTypes.string,\n      onClick: PropTypes.func,\n      locales: PropTypes.shape({\n        conditionDescriptionProgress: PropTypes.string\n      })\n    })\n  ),\n  locales: PropTypes.shape({\n    title: PropTypes.string,\n    subtitle: PropTypes.string,\n    tag: PropTypes.string,\n    count: PropTypes.string\n  }),\n  sorting: PropTypes.shape(Select.propTypes)\n};\n\nexport default Certifications;\n"],"mappings":"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"}

package/es/template/common/dashboard/index.d.ts

@@ -302,8 +302,8 @@ declare namespace Dashboard {
                 'aria-label': PropTypes.Requireable<string>;
                 title: PropTypes.Requireable<string>;
                 target: PropTypes.Requireable<string>;
-                skinHover: PropTypes.Requireable<boolean>;
                 hoverColor: PropTypes.Requireable<string>;
+                hoverBackgroundColor: PropTypes.Requireable<string>;
                 download: PropTypes.Requireable<boolean>;
                 onClick: PropTypes.Requireable<(...args: any[]) => any>;
                 onMouseEnter: PropTypes.Requireable<(...args: any[]) => any>;
@@ -611,8 +611,8 @@ declare namespace Dashboard {
                 'aria-label': PropTypes.Requireable<string>;
                 title: PropTypes.Requireable<string>;
                 target: PropTypes.Requireable<string>;
-                skinHover: PropTypes.Requireable<boolean>;
                 hoverColor: PropTypes.Requireable<string>;
+                hoverBackgroundColor: PropTypes.Requireable<string>;
                 download: PropTypes.Requireable<boolean>;
                 onClick: PropTypes.Requireable<(...args: any[]) => any>;
                 onMouseEnter: PropTypes.Requireable<(...args: any[]) => any>;

package/es/template/common/search-page/index.d.ts

@@ -483,8 +483,8 @@ declare namespace SearchPage {
                 'aria-label': PropTypes.Requireable<string>;
                 title: PropTypes.Requireable<string>;
                 target: PropTypes.Requireable<string>;
-                skinHover: PropTypes.Requireable<boolean>;
                 hoverColor: PropTypes.Requireable<string>;
+                hoverBackgroundColor: PropTypes.Requireable<string>;
                 download: PropTypes.Requireable<boolean>;
                 onClick: PropTypes.Requireable<(...args: any[]) => any>;
                 onMouseEnter: PropTypes.Requireable<(...args: any[]) => any>;

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

@@ -320,8 +320,8 @@ declare namespace ExternalCourse {
                 'aria-label': PropTypes.Requireable<string>;
                 title: PropTypes.Requireable<string>;
                 target: PropTypes.Requireable<string>;
-                skinHover: PropTypes.Requireable<boolean>;
                 hoverColor: PropTypes.Requireable<string>;
+                hoverBackgroundColor: PropTypes.Requireable<string>;
                 download: PropTypes.Requireable<boolean>;
                 onClick: PropTypes.Requireable<(...args: any[]) => any>;
                 onMouseEnter: PropTypes.Requireable<(...args: any[]) => any>;

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

@@ -67,12 +67,12 @@ declare namespace SkillDetail {
         export const metrics: PropTypes.Requireable<PropTypes.InferProps<{
             score: PropTypes.Requireable<number>;
             questionsToReview: PropTypes.Requireable<number>;
+            totalContents: PropTypes.Requireable<number>;
         }>>;
         export const focused: PropTypes.Requireable<boolean>;
         export const availableForReview: PropTypes.Requireable<boolean>;
         const ongoingCoursesAvailable_1: PropTypes.Requireable<boolean>;
         export { ongoingCoursesAvailable_1 as ongoingCoursesAvailable };
-        export const totalCourses: PropTypes.Requireable<number>;
         export const skillIncludedCourses: PropTypes.Requireable<PropTypes.InferProps<{
             list: PropTypes.Requireable<(PropTypes.InferProps<any> | null | undefined)[]>;
             customStyle: PropTypes.Requireable<{

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":"AAeO,8EA+BN;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;AAYD,oEAoJC"}
+{"version":3,"file":"index.d.ts","sourceRoot":"","sources":["../../../src/template/skill-detail/index.js"],"names":[],"mappings":"AAeO,8EA+BN;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;AAYD,oEAmJC"}

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

@@ -64,7 +64,6 @@ const SkillDetail = (props, context) => {
     focused,
     availableForReview,
     ongoingCoursesAvailable,
-    totalCourses,
     skillIncludedCourses,
     filters,
     sorting,
@@ -75,7 +74,8 @@ const SkillDetail = (props, context) => {
   const descriptionRef = useRef(null);
   const {
     score = 0,
-    questionsToReview
+    questionsToReview,
+    totalContents
   } = metrics;
   const {
     translate
@@ -175,7 +175,7 @@ const SkillDetail = (props, context) => {
     content: skillIncludedCourses,
     filters: filters,
     sorting: sorting,
-    totalContents: totalCourses
+    totalContents: totalContents
   })));
 };
 
@@ -189,12 +189,12 @@ SkillDetail.propTypes = process.env.NODE_ENV !== "production" ? {
   description: PropTypes.string,
   metrics: PropTypes.shape({
     score: PropTypes.number,
-    questionsToReview: PropTypes.number
+    questionsToReview: PropTypes.number,
+    totalContents: PropTypes.number
   }),
   focused: PropTypes.bool,
   availableForReview: PropTypes.bool,
   ongoingCoursesAvailable: PropTypes.bool,
-  totalCourses: PropTypes.number,
   skillIncludedCourses: PropTypes.shape(CardsGrid.propTypes),
   filters: PropTypes.shape({
     onChange: PropTypes.func,

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

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

package/es/variables/colors.d.ts

@@ -5,6 +5,8 @@ export declare const COLORS: {
     readonly white: "#ffffff";
     readonly cm_grey_800: "#171721";
     readonly cm_primary_blue: "#0061FF";
+    readonly cm_grey_500: "#515161";
+    readonly brand: "#00B0FF";
 };
 export declare type Colors = typeof COLORS;
 //# sourceMappingURL=colors.d.ts.map

package/es/variables/colors.d.ts.map

@@ -1 +1 @@
-{"version":3,"file":"colors.d.ts","sourceRoot":"","sources":["../../src/variables/colors.ts"],"names":[],"mappings":"AAAA,eAAO,MAAM,MAAM;;;;;;;CAOT,CAAC;AAEX,oBAAY,MAAM,GAAG,OAAO,MAAM,CAAC"}
+{"version":3,"file":"colors.d.ts","sourceRoot":"","sources":["../../src/variables/colors.ts"],"names":[],"mappings":"AAAA,eAAO,MAAM,MAAM;;;;;;;;;CAST,CAAC;AAEX,oBAAY,MAAM,GAAG,OAAO,MAAM,CAAC"}

package/es/variables/colors.js

@@ -4,6 +4,8 @@ export const COLORS = {
   positive: '#35CC7F',
   white: '#ffffff',
   cm_grey_800: '#171721',
-  cm_primary_blue: '#0061FF'
+  cm_primary_blue: '#0061FF',
+  cm_grey_500: '#515161',
+  brand: '#00B0FF'
 };
 //# sourceMappingURL=colors.js.map

package/es/variables/colors.js.map

@@ -1 +1 @@
-{"version":3,"file":"colors.js","names":["COLORS","gray","negative","positive","white","cm_grey_800","cm_primary_blue"],"sources":["../../src/variables/colors.ts"],"sourcesContent":["export const COLORS = {\n  gray: '#EAEAEB',\n  negative: '#ed3436',\n  positive: '#35CC7F',\n  white: '#ffffff',\n  cm_grey_800: '#171721',\n  cm_primary_blue: '#0061FF'\n} as const;\n\nexport type Colors = typeof COLORS;\n"],"mappings":"AAAA,OAAO,MAAMA,MAAM,GAAG;EACpBC,IAAI,EAAE,SADc;EAEpBC,QAAQ,EAAE,SAFU;EAGpBC,QAAQ,EAAE,SAHU;EAIpBC,KAAK,EAAE,SAJa;EAKpBC,WAAW,EAAE,SALO;EAMpBC,eAAe,EAAE;AANG,CAAf"}
+{"version":3,"file":"colors.js","names":["COLORS","gray","negative","positive","white","cm_grey_800","cm_primary_blue","cm_grey_500","brand"],"sources":["../../src/variables/colors.ts"],"sourcesContent":["export const COLORS = {\n  gray: '#EAEAEB',\n  negative: '#ed3436',\n  positive: '#35CC7F',\n  white: '#ffffff',\n  cm_grey_800: '#171721',\n  cm_primary_blue: '#0061FF',\n  cm_grey_500: '#515161',\n  brand: '#00B0FF'\n} as const;\n\nexport type Colors = typeof COLORS;\n"],"mappings":"AAAA,OAAO,MAAMA,MAAM,GAAG;EACpBC,IAAI,EAAE,SADc;EAEpBC,QAAQ,EAAE,SAFU;EAGpBC,QAAQ,EAAE,SAHU;EAIpBC,KAAK,EAAE,SAJa;EAKpBC,WAAW,EAAE,SALO;EAMpBC,eAAe,EAAE,SANG;EAOpBC,WAAW,EAAE,SAPO;EAQpBC,KAAK,EAAE;AARa,CAAf"}

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;AAgD7D,QAAA,MAAM,UAAU;YAAW,eAAe;;;;;;;;;;;;;;;;;;;;;;;;;CA8FzC,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;AAoD7D,QAAA,MAAM,UAAU;YAAW,eAAe;;;;;;;;;;;;;;;;;;;;;;;;;CAoGzC,CAAC;AAIF,eAAe,UAAU,CAAC"}

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

@@ -37,7 +37,6 @@ const getButtonContent = (icon, content, hovered, hoverBackgroundColor, hoverCol
     position: ''
   };
   const Icon = type && _buttonIcons.ICONS[type];
-  const isApplyHover = hovered && hoverBackgroundColor && hoverColor;
 
   if (!Icon && !faIcon) {
     return /*#__PURE__*/_react.default.createElement("div", {
@@ -49,8 +48,9 @@ const getButtonContent = (icon, content, hovered, hoverBackgroundColor, hoverCol
 
   const iconComponent = faIcon ? /*#__PURE__*/_react.default.createElement(_icon.default, {
     iconName: faIcon.name,
-    iconColor: isApplyHover ? hoverColor : faIcon.color,
-    backgroundColor: isApplyHover ? hoverBackgroundColor : faIcon.backgroundColor,
+    iconColor: hovered && hoverColor ? hoverColor : faIcon.color,
+    // eslint-disable-next-line no-nested-ternary
+    backgroundColor: !faIcon?.backgroundColor ? 'transparent' : hovered && hoverBackgroundColor ? hoverBackgroundColor : faIcon.backgroundColor,
     size: {
       faSize: faIcon.size,
       wrapperSize: faIcon.size
@@ -91,7 +91,9 @@ const ButtonLink = props => {
   const [hovered, setHovered] = (0, _react.useState)(false);
   const handleOnClick = (0, _react.useCallback)(event => onClick(event), [onClick]);
   const handleOnKeyDown = (0, _react.useCallback)(event => onKeyDown(event), [onKeyDown]);
-  const handleMouseOver = (0, _react.useCallback)(() => setHovered(true), [setHovered]);
+  const handleMouseOver = (0, _react.useCallback)(() => {
+    setHovered(true);
+  }, [setHovered]);
   const handleMouseLeave = (0, _react.useCallback)(() => setHovered(false), [setHovered]);
 
   const _customStyle = (0, _react.useMemo)(() => {
@@ -109,8 +111,12 @@ const ButtonLink = props => {
       className: styleButton,
       "data-name": dataName,
       "data-testid": dataTestId,
-      "aria-label": ariaLabel || label
-    }), getButtonContent(icon, content ?? label));
+      "aria-label": ariaLabel || label,
+      hoverColor: hoverColor,
+      hoverBackgroundColor: hoverBackgroundColor,
+      onMouseEnter: handleMouseOver,
+      onMouseLeave: handleMouseLeave
+    }), getButtonContent(icon, content ?? label, hovered, hoverBackgroundColor, hoverColor));
   }
 
   return /*#__PURE__*/_react.default.createElement("button", _extends({}, useTitle && {

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

@@ -1 +1 @@
-{"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","customStyle","ButtonLink","props","usage","disabled","dataName","dataTestId","ariaLabel","link","onClick","onKeyDown","className","useTitle","styleButton","classnames","button","primary","secondary","tertiary","text","dangerous","setHovered","useState","handleOnClick","useCallback","event","handleOnKeyDown","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        customStyle: faIcon.customStyle\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    usage = 'button',\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(event => onClick(event), [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      // eslint-disable-next-line react/button-has-type\n      type={usage}\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":"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"}
+{"version":3,"file":"index.js","names":["getButtonContent","icon","content","hovered","hoverBackgroundColor","hoverColor","type","faIcon","position","Icon","ICONS","style","buttonContent","label","iconComponent","iconName","name","iconColor","color","backgroundColor","size","faSize","wrapperSize","customStyle","ButtonLink","props","usage","disabled","dataName","dataTestId","ariaLabel","link","onClick","onKeyDown","className","useTitle","styleButton","classnames","button","primary","secondary","tertiary","text","dangerous","setHovered","useState","handleOnClick","useCallback","event","handleOnKeyDown","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\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: hovered && hoverColor ? hoverColor : faIcon.color,\n        // eslint-disable-next-line no-nested-ternary\n        backgroundColor: !faIcon?.backgroundColor\n          ? 'transparent'\n          : hovered && hoverBackgroundColor\n          ? hoverBackgroundColor\n          : faIcon.backgroundColor,\n        size: {\n          faSize: faIcon.size,\n          wrapperSize: faIcon.size\n        },\n        customStyle: faIcon.customStyle\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    usage = 'button',\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(event => onClick(event), [onClick]);\n\n  const handleOnKeyDown = useCallback(event => onKeyDown(event), [onKeyDown]);\n\n  const handleMouseOver = useCallback(() => {\n    setHovered(true);\n  }, [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        hoverColor={hoverColor}\n        hoverBackgroundColor={hoverBackgroundColor}\n        onMouseEnter={handleMouseOver}\n        onMouseLeave={handleMouseLeave}\n      >\n        {getButtonContent(icon, content ?? label, hovered, hoverBackgroundColor, hoverColor)}\n      </Link>\n    );\n  }\n\n  return (\n    <button\n      {...(useTitle && {\n        title: ariaLabel || label\n      })}\n      // eslint-disable-next-line react/button-has-type\n      type={usage}\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":"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"}

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

@@ -101,8 +101,8 @@ const ButtonLinkIcon = props => {
     className: styleButton,
     "data-name": dataName,
     "aria-label": ariaLabel,
-    onMouseLeave: handleMouseLeave,
-    onMouseOver: handleMouseOver
+    onMouseEnter: handleMouseOver,
+    onMouseLeave: handleMouseLeave
   }), contentView) : /*#__PURE__*/_react.default.createElement("button", _extends({}, ariaLabel ? {
     'data-for': 'button-icon',
     'data-tip': toolTipIsVisible