@coorpacademy/components 11.32.3 → 11.32.5

package/lib/molecule/discipline-associated-skills/index.js

@@ -0,0 +1,94 @@
+"use strict";
+
+exports.__esModule = true;
+exports.default = void 0;
+
+var _uniqueId2 = _interopRequireDefault(require("lodash/fp/uniqueId"));
+
+var _isEmpty2 = _interopRequireDefault(require("lodash/fp/isEmpty"));
+
+var _react = _interopRequireWildcard(require("react"));
+
+var _propTypes = _interopRequireDefault(require("prop-types"));
+
+var _classnames = _interopRequireDefault(require("classnames"));
+
+var _icon = _interopRequireDefault(require("../../atom/icon"));
+
+var _tooltip = _interopRequireDefault(require("../../atom/tooltip"));
+
+var _provider = _interopRequireDefault(require("../../atom/provider"));
+
+var _catalogSection = _interopRequireDefault(require("../../atom/catalog-section"));
+
+var _style = _interopRequireDefault(require("./style.css"));
+
+function _getRequireWildcardCache(nodeInterop) { if (typeof WeakMap !== "function") return null; var cacheBabelInterop = new WeakMap(); var cacheNodeInterop = new WeakMap(); return (_getRequireWildcardCache = function (nodeInterop) { return nodeInterop ? cacheNodeInterop : cacheBabelInterop; })(nodeInterop); }
+
+function _interopRequireWildcard(obj, nodeInterop) { if (!nodeInterop && obj && obj.__esModule) { return obj; } if (obj === null || typeof obj !== "object" && typeof obj !== "function") { return { default: obj }; } var cache = _getRequireWildcardCache(nodeInterop); if (cache && cache.has(obj)) { return cache.get(obj); } var newObj = {}; var hasPropertyDescriptor = Object.defineProperty && Object.getOwnPropertyDescriptor; for (var key in obj) { if (key !== "default" && Object.prototype.hasOwnProperty.call(obj, key)) { var desc = hasPropertyDescriptor ? Object.getOwnPropertyDescriptor(obj, key) : null; if (desc && (desc.get || desc.set)) { Object.defineProperty(newObj, key, desc); } else { newObj[key] = obj[key]; } } } newObj.default = obj; if (cache) { cache.set(obj, newObj); } return newObj; }
+
+function _interopRequireDefault(obj) { return obj && obj.__esModule ? obj : { default: obj }; }
+
+const DisciplineAssociatedSkills = (props, context) => {
+  const {
+    translate
+  } = context;
+  const {
+    skills = [],
+    onSkillClick
+  } = props;
+  const AnchorElement = (0, _react.useCallback)(skill => /*#__PURE__*/_react.default.createElement("div", {
+    className: _style.default.chipFocusedContent
+  }, /*#__PURE__*/_react.default.createElement(_icon.default, {
+    iconName: "bullseye-arrow",
+    backgroundColor: "#DDD1FF",
+    size: {
+      faSize: 12,
+      wrapperSize: 12
+    }
+  }), skill), []);
+  return !(0, _isEmpty2.default)(skills) ? /*#__PURE__*/_react.default.createElement("div", {
+    "data-name": "discipline-associated-skills",
+    className: _style.default.associatedSkillsWrapper
+  }, /*#__PURE__*/_react.default.createElement(_catalogSection.default, {
+    title: translate('associated_skills')
+  }, /*#__PURE__*/_react.default.createElement("div", {
+    className: _style.default.chipsWrapper
+  }, skills.map(skill => {
+    function handleSkillClick() {
+      return onSkillClick(skill.ref);
+    }
+
+    function handleAnchorElement() {
+      return AnchorElement(skill.locale);
+    }
+
+    return /*#__PURE__*/_react.default.createElement("div", {
+      key: (0, _uniqueId2.default)(),
+      className: (0, _classnames.default)(_style.default.chipWrapper, skill.focused && _style.default.chipWrapperFocused),
+      onClick: handleSkillClick
+    }, skill.focused ? /*#__PURE__*/_react.default.createElement(_tooltip.default, {
+      AnchorElement: handleAnchorElement,
+      fontSize: 12,
+      iconContainerClassName: _style.default.infoIconTooltip,
+      tooltipClassName: _style.default.tooltip,
+      TooltipContent: translate('skill_focused_chip_tooltip'),
+      closeToolTipInformationTextAriaLabel: translate('close_tooltip_information')
+    }) : skill.locale);
+  })))) : null;
+};
+
+DisciplineAssociatedSkills.contextTypes = {
+  translate: _provider.default.childContextTypes.translate
+};
+DisciplineAssociatedSkills.propTypes = process.env.NODE_ENV !== "production" ? {
+  skills: _propTypes.default.arrayOf(_propTypes.default.shape({
+    ref: _propTypes.default.string,
+    locale: _propTypes.default.string,
+    focused: _propTypes.default.bool
+  })),
+  onSkillClick: _propTypes.default.func
+} : {};
+var _default = DisciplineAssociatedSkills;
+exports.default = _default;
+//# sourceMappingURL=index.js.map

package/lib/molecule/discipline-associated-skills/index.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"index.js","names":["DisciplineAssociatedSkills","props","context","translate","skills","onSkillClick","AnchorElement","useCallback","skill","style","chipFocusedContent","faSize","wrapperSize","associatedSkillsWrapper","chipsWrapper","map","handleSkillClick","ref","handleAnchorElement","locale","classnames","chipWrapper","focused","chipWrapperFocused","infoIconTooltip","tooltip","contextTypes","Provider","childContextTypes","propTypes","PropTypes","arrayOf","shape","string","bool","func"],"sources":["../../../src/molecule/discipline-associated-skills/index.js"],"sourcesContent":["import React, {useCallback} from 'react';\nimport PropTypes from 'prop-types';\nimport classnames from 'classnames';\nimport {isEmpty, uniqueId} from 'lodash/fp';\nimport Icon from '../../atom/icon';\nimport ToolTip from '../../atom/tooltip';\nimport Provider from '../../atom/provider';\nimport CatalogSection from '../../atom/catalog-section';\nimport style from './style.css';\n\nconst DisciplineAssociatedSkills = (props, context) => {\n  const {translate} = context;\n\n  const {skills = [], onSkillClick} = props;\n\n  const AnchorElement = useCallback(\n    skill => (\n      <div className={style.chipFocusedContent}>\n        <Icon\n          iconName=\"bullseye-arrow\"\n          backgroundColor=\"#DDD1FF\"\n          size={{\n            faSize: 12,\n            wrapperSize: 12\n          }}\n        />\n        {skill}\n      </div>\n    ),\n    []\n  );\n\n  return !isEmpty(skills) ? (\n    <div data-name=\"discipline-associated-skills\" className={style.associatedSkillsWrapper}>\n      <CatalogSection title={translate('associated_skills')}>\n        <div className={style.chipsWrapper}>\n          {skills.map(skill => {\n            function handleSkillClick() {\n              return onSkillClick(skill.ref);\n            }\n            function handleAnchorElement() {\n              return AnchorElement(skill.locale);\n            }\n            return (\n              <div\n                key={uniqueId()}\n                className={classnames(style.chipWrapper, skill.focused && style.chipWrapperFocused)}\n                onClick={handleSkillClick}\n              >\n                {skill.focused ? (\n                  <ToolTip\n                    AnchorElement={handleAnchorElement}\n                    fontSize={12}\n                    iconContainerClassName={style.infoIconTooltip}\n                    tooltipClassName={style.tooltip}\n                    TooltipContent={translate('skill_focused_chip_tooltip')}\n                    closeToolTipInformationTextAriaLabel={translate('close_tooltip_information')}\n                  />\n                ) : (\n                  skill.locale\n                )}\n              </div>\n            );\n          })}\n        </div>\n      </CatalogSection>\n    </div>\n  ) : null;\n};\n\nDisciplineAssociatedSkills.contextTypes = {\n  translate: Provider.childContextTypes.translate\n};\n\nDisciplineAssociatedSkills.propTypes = {\n  skills: PropTypes.arrayOf(\n    PropTypes.shape({\n      ref: PropTypes.string,\n      locale: PropTypes.string,\n      focused: PropTypes.bool\n    })\n  ),\n  onSkillClick: PropTypes.func\n};\n\nexport default DisciplineAssociatedSkills;\n"],"mappings":";;;;;;;;;AAAA;;AACA;;AACA;;AAEA;;AACA;;AACA;;AACA;;AACA;;;;;;;;AAEA,MAAMA,0BAA0B,GAAG,CAACC,KAAD,EAAQC,OAAR,KAAoB;EACrD,MAAM;IAACC;EAAD,IAAcD,OAApB;EAEA,MAAM;IAACE,MAAM,GAAG,EAAV;IAAcC;EAAd,IAA8BJ,KAApC;EAEA,MAAMK,aAAa,GAAG,IAAAC,kBAAA,EACpBC,KAAK,iBACH;IAAK,SAAS,EAAEC,cAAA,CAAMC;EAAtB,gBACE,6BAAC,aAAD;IACE,QAAQ,EAAC,gBADX;IAEE,eAAe,EAAC,SAFlB;IAGE,IAAI,EAAE;MACJC,MAAM,EAAE,EADJ;MAEJC,WAAW,EAAE;IAFT;EAHR,EADF,EASGJ,KATH,CAFkB,EAcpB,EAdoB,CAAtB;EAiBA,OAAO,CAAC,uBAAQJ,MAAR,CAAD,gBACL;IAAK,aAAU,8BAAf;IAA8C,SAAS,EAAEK,cAAA,CAAMI;EAA/D,gBACE,6BAAC,uBAAD;IAAgB,KAAK,EAAEV,SAAS,CAAC,mBAAD;EAAhC,gBACE;IAAK,SAAS,EAAEM,cAAA,CAAMK;EAAtB,GACGV,MAAM,CAACW,GAAP,CAAWP,KAAK,IAAI;IACnB,SAASQ,gBAAT,GAA4B;MAC1B,OAAOX,YAAY,CAACG,KAAK,CAACS,GAAP,CAAnB;IACD;;IACD,SAASC,mBAAT,GAA+B;MAC7B,OAAOZ,aAAa,CAACE,KAAK,CAACW,MAAP,CAApB;IACD;;IACD,oBACE;MACE,GAAG,EAAE,yBADP;MAEE,SAAS,EAAE,IAAAC,mBAAA,EAAWX,cAAA,CAAMY,WAAjB,EAA8Bb,KAAK,CAACc,OAAN,IAAiBb,cAAA,CAAMc,kBAArD,CAFb;MAGE,OAAO,EAAEP;IAHX,GAKGR,KAAK,CAACc,OAAN,gBACC,6BAAC,gBAAD;MACE,aAAa,EAAEJ,mBADjB;MAEE,QAAQ,EAAE,EAFZ;MAGE,sBAAsB,EAAET,cAAA,CAAMe,eAHhC;MAIE,gBAAgB,EAAEf,cAAA,CAAMgB,OAJ1B;MAKE,cAAc,EAAEtB,SAAS,CAAC,4BAAD,CAL3B;MAME,oCAAoC,EAAEA,SAAS,CAAC,2BAAD;IANjD,EADD,GAUCK,KAAK,CAACW,MAfV,CADF;EAoBD,CA3BA,CADH,CADF,CADF,CADK,GAmCH,IAnCJ;AAoCD,CA1DD;;AA4DAnB,0BAA0B,CAAC0B,YAA3B,GAA0C;EACxCvB,SAAS,EAAEwB,iBAAA,CAASC,iBAAT,CAA2BzB;AADE,CAA1C;AAIAH,0BAA0B,CAAC6B,SAA3B,2CAAuC;EACrCzB,MAAM,EAAE0B,kBAAA,CAAUC,OAAV,CACND,kBAAA,CAAUE,KAAV,CAAgB;IACdf,GAAG,EAAEa,kBAAA,CAAUG,MADD;IAEdd,MAAM,EAAEW,kBAAA,CAAUG,MAFJ;IAGdX,OAAO,EAAEQ,kBAAA,CAAUI;EAHL,CAAhB,CADM,CAD6B;EAQrC7B,YAAY,EAAEyB,kBAAA,CAAUK;AARa,CAAvC;eAWenC,0B"}

package/lib/molecule/discipline-associated-skills/style.css

@@ -0,0 +1,71 @@
+@value colors: "../../variables/colors.css";
+@value breakpoints: "../../variables/breakpoints.css";
+@value desktop from breakpoints;
+@value cm_grey_100 from colors;
+@value cm_grey_200 from colors;
+@value cm_grey_700 from colors;
+
+.associatedSkillsWrapper {
+  margin-bottom: 12px;
+}
+
+.chipsWrapper {
+  display: flex;
+  flex-wrap: wrap;
+  gap: 8px;
+}
+
+.chipWrapper {
+  width: fit-content;
+  border-radius: 8px;
+  padding: 4px 8px;
+  background-color: cm_grey_200;
+  color: cm_grey_700;
+  font-family: 'Gilroy';
+  font-style: normal;
+  font-weight: 600;
+  line-height: 20px;
+  font-size: 14px;
+  text-overflow: ellipsis;
+  white-space: nowrap;
+}
+
+.chipWrapperFocused {
+  background-color: #DDD1FF;
+  color: #3900D6;
+}
+
+.chipFocusedContent {
+  display: flex;
+  align-items: center;
+  gap: 4px;
+
+  div {
+    padding: 0 !important;
+  }
+}
+
+.infoIconTooltip {
+  background-color: transparent;
+}
+
+.tooltip {
+  width: fit-content;
+  color: #FFF;
+  font-size: 12px;
+  font-style: normal;
+  line-height: 16px;
+  right: -28px;
+  top: -48px;
+
+  p {
+    padding: 8px 8px;
+    margin: 0;
+  }
+}
+
+@media desktop {
+  .associatedSkillsWrapper {
+    margin-top: 24px;
+  }
+}

package/lib/molecule/learner-skill-card/index.d.ts

@@ -2,6 +2,27 @@ export default LearnerSkillCard;
 declare function LearnerSkillCard(props: any, context: any): JSX.Element;
 declare namespace LearnerSkillCard {
     namespace contextTypes {
+        const skin: PropTypes.Requireable<PropTypes.InferProps<{
+            common: PropTypes.Requireable<{
+                [x: string]: any;
+            }>;
+            images: PropTypes.Requireable<PropTypes.InferProps<{
+                'logo-mobile': PropTypes.Requireable<any>;
+                logo: PropTypes.Requireable<any>;
+                'logo-email': PropTypes.Requireable<any>;
+                login: PropTypes.Requireable<any>;
+            }>>;
+            icons: PropTypes.Requireable<{
+                [x: string]: any;
+            }>;
+            mod: PropTypes.Requireable<{
+                [x: string]: any;
+            }>;
+            courses: PropTypes.Requireable<any[]>;
+            texts: PropTypes.Requireable<{
+                [x: string]: any;
+            }>;
+        }>>;
         const translate: PropTypes.Requireable<(...args: any[]) => any>;
     }
     const propTypes: {
@@ -10,6 +31,7 @@ declare namespace LearnerSkillCard {
         skillAriaLabel: PropTypes.Requireable<string>;
         focus: PropTypes.Requireable<boolean>;
         metrics: PropTypes.Requireable<PropTypes.InferProps<{
+            score: PropTypes.Requireable<number>;
             skillCourses: PropTypes.Requireable<number>;
             skillQuestions: PropTypes.Requireable<number>;
             completedCourses: PropTypes.Requireable<number>;

package/lib/molecule/learner-skill-card/index.d.ts.map

@@ -1 +1 @@
-{"version":3,"file":"index.d.ts","sourceRoot":"","sources":["../../../src/molecule/learner-skill-card/index.js"],"names":[],"mappings":";AASA,yEA2JC"}
+{"version":3,"file":"index.d.ts","sourceRoot":"","sources":["../../../src/molecule/learner-skill-card/index.js"],"names":[],"mappings":";AASA,yEAwJC"}

package/lib/molecule/learner-skill-card/index.js

@@ -3,8 +3,6 @@
 exports.__esModule = true;
 exports.default = void 0;
 
-var _getOr2 = _interopRequireDefault(require("lodash/fp/getOr"));
-
 var _get2 = _interopRequireDefault(require("lodash/fp/get"));
 
 var _react = _interopRequireWildcard(require("react"));
@@ -39,6 +37,7 @@ const LearnerSkillCard = (props, context) => {
     onExploreClick
   } = props;
   const {
+    score,
     skillCourses,
     skillQuestions,
     completedCourses = 0
@@ -48,7 +47,7 @@ const LearnerSkillCard = (props, context) => {
     translate
   } = context;
   const [hovered, setHovered] = (0, _react.useState)(false);
-  const primarySkinColor = (0, _getOr2.default)('#0061FF', 'common.primary', skin);
+  const primarySkinColor = (0, _get2.default)('common.primary', skin);
   const reviewLocale = translate('Review');
   const exploreLocale = translate('Explore');
   const coursesLocale = translate('courses');
@@ -88,13 +87,12 @@ const LearnerSkillCard = (props, context) => {
       }
     }
   };
-  const completedPercentage = skillCourses && Number.parseInt(completedCourses / skillCourses * 100);
   const ProgressBar = (0, _react.useCallback)(() => {
     if (!skillCourses) return null;
     const progressBarColor = '#3EC483';
     const inlineProgressValueStyle = {
       backgroundColor: progressBarColor,
-      width: `${completedPercentage}%`
+      width: `${score}%`
     };
     return /*#__PURE__*/_react.default.createElement("div", {
       className: _style.default.progressWrapper
@@ -105,7 +103,7 @@ const LearnerSkillCard = (props, context) => {
       role: "progressbar",
       "aria-label": (0, _get2.default)('progression', ariaLabel)
     }));
-  }, [completedPercentage, ariaLabel, skillCourses]);
+  }, [score, ariaLabel, skillCourses]);
   return /*#__PURE__*/_react.default.createElement("div", {
     className: _style.default.learnerSkillCardWrapper,
     "data-name": "learner-skill-card-wrapper",
@@ -149,7 +147,7 @@ const LearnerSkillCard = (props, context) => {
     "data-name": "completed-percentage"
   }, /*#__PURE__*/_react.default.createElement("span", {
     className: _style.default.progressInformationNumber
-  }, completedPercentage, "%")))), /*#__PURE__*/_react.default.createElement("div", {
+  }, score, "%")))), /*#__PURE__*/_react.default.createElement("div", {
     className: _style.default.ctaWrapper,
     "data-name": "cta-wrapper"
   }, /*#__PURE__*/_react.default.createElement(_buttonLink.default, buttonReviewProps), /*#__PURE__*/_react.default.createElement("div", {
@@ -161,6 +159,7 @@ const LearnerSkillCard = (props, context) => {
 };
 
 LearnerSkillCard.contextTypes = {
+  skin: _provider.default.childContextTypes.skin,
   translate: _provider.default.childContextTypes.translate
 };
 LearnerSkillCard.propTypes = process.env.NODE_ENV !== "production" ? {
@@ -169,6 +168,7 @@ LearnerSkillCard.propTypes = process.env.NODE_ENV !== "production" ? {
   skillAriaLabel: _propTypes.default.string,
   focus: _propTypes.default.bool,
   metrics: _propTypes.default.shape({
+    score: _propTypes.default.number,
     skillCourses: _propTypes.default.number,
     skillQuestions: _propTypes.default.number,
     completedCourses: _propTypes.default.number

package/lib/molecule/learner-skill-card/index.js.map

@@ -1 +1 @@
-{"version":3,"file":"index.js","names":["LearnerSkillCard","props","context","ariaLabel","skillTitle","skillAriaLabel","focus","metrics","review","onReviewClick","onExploreClick","skillCourses","skillQuestions","completedCourses","skin","translate","hovered","setHovered","useState","primarySkinColor","reviewLocale","exploreLocale","coursesLocale","questionsLocale","skillFocusLocale","coursesCompletedLocale","handleMouseOver","useCallback","handleMouseLeave","buttonReviewProps","customStyle","backgroundColor","transition","disabled","onClick","label","buttonExploreProps","convert","color","icon","position","faIcon","name","size","completedPercentage","Number","parseInt","ProgressBar","progressBarColor","inlineProgressValueStyle","width","style","progressWrapper","progress","learnerSkillCardWrapper","skillCoursesAndQuestionsWrapper","skillInformation","skillInformationNumber","skillTitleWrapper","skillFocusBadge","faSize","wrapperSize","progressInformations","progressInformation","progressInformationNumber","ctaWrapper","buttonWrapper","contextTypes","Provider","childContextTypes","propTypes","PropTypes","string","bool","shape","number","func"],"sources":["../../../src/molecule/learner-skill-card/index.js"],"sourcesContent":["import React, {useCallback, useState} from 'react';\nimport {convert} from 'css-color-function';\nimport {get, getOr} from 'lodash/fp';\nimport PropTypes from 'prop-types';\nimport Icon from '../../atom/icon';\nimport ButtonLink from '../../atom/button-link';\nimport Provider from '../../atom/provider';\nimport style from './style.css';\n\nconst LearnerSkillCard = (props, context) => {\n  const {\n    'aria-label': ariaLabel,\n    skillTitle,\n    skillAriaLabel,\n    focus = false,\n    metrics,\n    review = false,\n    onReviewClick,\n    onExploreClick\n  } = props;\n  const {skillCourses, skillQuestions, completedCourses = 0} = metrics;\n  const {skin, translate} = context;\n  const [hovered, setHovered] = useState(false);\n  const primarySkinColor = getOr('#0061FF', 'common.primary', skin);\n\n  const reviewLocale = translate('Review');\n  const exploreLocale = translate('Explore');\n  const coursesLocale = translate('courses');\n  const questionsLocale = translate('questions');\n  const skillFocusLocale = translate('skill_focus');\n  const coursesCompletedLocale = translate('courses_completed');\n\n  const handleMouseOver = useCallback(() => setHovered(true), [setHovered]);\n\n  const handleMouseLeave = useCallback(() => setHovered(false), [setHovered]);\n\n  const buttonReviewProps = {\n    customStyle: {\n      backgroundColor: '#FFF',\n      transition: 'background-color 0.15s ease-in-out, color 0.15s ease-in-out'\n    },\n    disabled: !review,\n    onClick: onReviewClick,\n    'aria-label': `${skillTitle}, ${reviewLocale}`,\n    label: reviewLocale,\n    'data-name': 'learner-skill-card-review-button'\n  };\n\n  const buttonExploreProps = {\n    customStyle: {\n      backgroundColor: hovered ? primarySkinColor : convert(`color(${primarySkinColor} a(0.07))`),\n      color: hovered ? '#FFFFFF' : primarySkinColor,\n      transition: 'background-color 0.15s ease-in-out, color 0.15s ease-in-out'\n    },\n    onClick: onExploreClick,\n    'aria-label': `${skillTitle}, ${exploreLocale}`,\n    label: exploreLocale,\n    'data-name': 'learner-skill-card-explore-button',\n    icon: {\n      position: 'left',\n      faIcon: {\n        name: 'compass',\n        backgroundColor: hovered ? primarySkinColor : convert(`color(${primarySkinColor} a(0.07))`),\n        color: hovered ? '#FFFFFF' : primarySkinColor,\n        size: 16\n      }\n    }\n  };\n\n  const completedPercentage =\n    skillCourses && Number.parseInt((completedCourses / skillCourses) * 100);\n\n  const ProgressBar = useCallback(() => {\n    if (!skillCourses) return null;\n\n    const progressBarColor = '#3EC483';\n    const inlineProgressValueStyle = {\n      backgroundColor: progressBarColor,\n      width: `${completedPercentage}%`\n    };\n\n    return (\n      <div className={style.progressWrapper}>\n        <div\n          data-name=\"progress\"\n          className={style.progress}\n          style={inlineProgressValueStyle}\n          role=\"progressbar\"\n          aria-label={get('progression', ariaLabel)}\n        />\n      </div>\n    );\n  }, [completedPercentage, ariaLabel, skillCourses]);\n\n  return (\n    <div\n      className={style.learnerSkillCardWrapper}\n      data-name=\"learner-skill-card-wrapper\"\n      aria-label={ariaLabel}\n    >\n      {skillCourses || skillQuestions ? (\n        <div className={style.skillCoursesAndQuestionsWrapper}>\n          {skillCourses ? (\n            <div className={style.skillInformation} data-name=\"skill-courses\">\n              <span className={style.skillInformationNumber}>{skillCourses}</span> {coursesLocale}\n            </div>\n          ) : null}\n          {skillQuestions ? (\n            <div className={style.skillInformation} data-name=\"skill-questions\">\n              <span className={style.skillInformationNumber}>{skillQuestions}</span>\n              &nbsp;{questionsLocale}\n            </div>\n          ) : null}\n        </div>\n      ) : null}\n      <div className={style.skillTitleWrapper}>\n        <div\n          data-name=\"skill-title\"\n          className={style.skillTitle}\n          aria-label={skillAriaLabel || skillTitle}\n        >\n          {skillTitle}\n        </div>\n        {focus ? (\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            {skillFocusLocale}\n          </div>\n        ) : null}\n      </div>\n      <ProgressBar />\n      <div className={style.progressInformations}>\n        {skillCourses && (\n          <>\n            <div className={style.progressInformation} data-name=\"skill-completed-courses\">\n              <span className={style.progressInformationNumber}>{completedCourses}</span>\n              {` ${coursesCompletedLocale}`}\n            </div>\n            <div className={style.progressInformation} data-name=\"completed-percentage\">\n              <span className={style.progressInformationNumber}>{completedPercentage}%</span>\n            </div>\n          </>\n        )}\n      </div>\n      <div className={style.ctaWrapper} data-name=\"cta-wrapper\">\n        <ButtonLink {...buttonReviewProps} />\n        <div\n          className={style.buttonWrapper}\n          onMouseOver={handleMouseOver}\n          onMouseLeave={handleMouseLeave}\n          data-name=\"button-explore-wrapper\"\n        >\n          <ButtonLink {...buttonExploreProps} />\n        </div>\n      </div>\n    </div>\n  );\n};\n\nLearnerSkillCard.contextTypes = {\n  translate: Provider.childContextTypes.translate\n};\n\nLearnerSkillCard.propTypes = {\n  'aria-label': PropTypes.string,\n  skillTitle: PropTypes.string,\n  skillAriaLabel: PropTypes.string,\n  focus: PropTypes.bool,\n  metrics: PropTypes.shape({\n    skillCourses: PropTypes.number,\n    skillQuestions: PropTypes.number,\n    completedCourses: PropTypes.number\n  }),\n  review: PropTypes.bool,\n  onReviewClick: PropTypes.func,\n  onExploreClick: PropTypes.func\n};\n\nexport default LearnerSkillCard;\n"],"mappings":"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"}
+{"version":3,"file":"index.js","names":["LearnerSkillCard","props","context","ariaLabel","skillTitle","skillAriaLabel","focus","metrics","review","onReviewClick","onExploreClick","score","skillCourses","skillQuestions","completedCourses","skin","translate","hovered","setHovered","useState","primarySkinColor","reviewLocale","exploreLocale","coursesLocale","questionsLocale","skillFocusLocale","coursesCompletedLocale","handleMouseOver","useCallback","handleMouseLeave","buttonReviewProps","customStyle","backgroundColor","transition","disabled","onClick","label","buttonExploreProps","convert","color","icon","position","faIcon","name","size","ProgressBar","progressBarColor","inlineProgressValueStyle","width","style","progressWrapper","progress","learnerSkillCardWrapper","skillCoursesAndQuestionsWrapper","skillInformation","skillInformationNumber","skillTitleWrapper","skillFocusBadge","faSize","wrapperSize","progressInformations","progressInformation","progressInformationNumber","ctaWrapper","buttonWrapper","contextTypes","Provider","childContextTypes","propTypes","PropTypes","string","bool","shape","number","func"],"sources":["../../../src/molecule/learner-skill-card/index.js"],"sourcesContent":["import React, {useCallback, useState} from 'react';\nimport {convert} from 'css-color-function';\nimport {get} from 'lodash/fp';\nimport PropTypes from 'prop-types';\nimport Icon from '../../atom/icon';\nimport ButtonLink from '../../atom/button-link';\nimport Provider from '../../atom/provider';\nimport style from './style.css';\n\nconst LearnerSkillCard = (props, context) => {\n  const {\n    'aria-label': ariaLabel,\n    skillTitle,\n    skillAriaLabel,\n    focus = false,\n    metrics,\n    review = false,\n    onReviewClick,\n    onExploreClick\n  } = props;\n  const {score, skillCourses, skillQuestions, completedCourses = 0} = metrics;\n  const {skin, translate} = context;\n  const [hovered, setHovered] = useState(false);\n  const primarySkinColor = get('common.primary', skin);\n\n  const reviewLocale = translate('Review');\n  const exploreLocale = translate('Explore');\n  const coursesLocale = translate('courses');\n  const questionsLocale = translate('questions');\n  const skillFocusLocale = translate('skill_focus');\n  const coursesCompletedLocale = translate('courses_completed');\n\n  const handleMouseOver = useCallback(() => setHovered(true), [setHovered]);\n\n  const handleMouseLeave = useCallback(() => setHovered(false), [setHovered]);\n\n  const buttonReviewProps = {\n    customStyle: {\n      backgroundColor: '#FFF',\n      transition: 'background-color 0.15s ease-in-out, color 0.15s ease-in-out'\n    },\n    disabled: !review,\n    onClick: onReviewClick,\n    'aria-label': `${skillTitle}, ${reviewLocale}`,\n    label: reviewLocale,\n    'data-name': 'learner-skill-card-review-button'\n  };\n\n  const buttonExploreProps = {\n    customStyle: {\n      backgroundColor: hovered ? primarySkinColor : convert(`color(${primarySkinColor} a(0.07))`),\n      color: hovered ? '#FFFFFF' : primarySkinColor,\n      transition: 'background-color 0.15s ease-in-out, color 0.15s ease-in-out'\n    },\n    onClick: onExploreClick,\n    'aria-label': `${skillTitle}, ${exploreLocale}`,\n    label: exploreLocale,\n    'data-name': 'learner-skill-card-explore-button',\n    icon: {\n      position: 'left',\n      faIcon: {\n        name: 'compass',\n        backgroundColor: hovered ? primarySkinColor : convert(`color(${primarySkinColor} a(0.07))`),\n        color: hovered ? '#FFFFFF' : primarySkinColor,\n        size: 16\n      }\n    }\n  };\n\n  const ProgressBar = useCallback(() => {\n    if (!skillCourses) return null;\n\n    const progressBarColor = '#3EC483';\n    const inlineProgressValueStyle = {\n      backgroundColor: progressBarColor,\n      width: `${score}%`\n    };\n\n    return (\n      <div className={style.progressWrapper}>\n        <div\n          data-name=\"progress\"\n          className={style.progress}\n          style={inlineProgressValueStyle}\n          role=\"progressbar\"\n          aria-label={get('progression', ariaLabel)}\n        />\n      </div>\n    );\n  }, [score, ariaLabel, skillCourses]);\n\n  return (\n    <div\n      className={style.learnerSkillCardWrapper}\n      data-name=\"learner-skill-card-wrapper\"\n      aria-label={ariaLabel}\n    >\n      {skillCourses || skillQuestions ? (\n        <div className={style.skillCoursesAndQuestionsWrapper}>\n          {skillCourses ? (\n            <div className={style.skillInformation} data-name=\"skill-courses\">\n              <span className={style.skillInformationNumber}>{skillCourses}</span> {coursesLocale}\n            </div>\n          ) : null}\n          {skillQuestions ? (\n            <div className={style.skillInformation} data-name=\"skill-questions\">\n              <span className={style.skillInformationNumber}>{skillQuestions}</span>\n              &nbsp;{questionsLocale}\n            </div>\n          ) : null}\n        </div>\n      ) : null}\n      <div className={style.skillTitleWrapper}>\n        <div\n          data-name=\"skill-title\"\n          className={style.skillTitle}\n          aria-label={skillAriaLabel || skillTitle}\n        >\n          {skillTitle}\n        </div>\n        {focus ? (\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            {skillFocusLocale}\n          </div>\n        ) : null}\n      </div>\n      <ProgressBar />\n      <div className={style.progressInformations}>\n        {skillCourses && (\n          <>\n            <div className={style.progressInformation} data-name=\"skill-completed-courses\">\n              <span className={style.progressInformationNumber}>{completedCourses}</span>\n              {` ${coursesCompletedLocale}`}\n            </div>\n            <div className={style.progressInformation} data-name=\"completed-percentage\">\n              <span className={style.progressInformationNumber}>{score}%</span>\n            </div>\n          </>\n        )}\n      </div>\n      <div className={style.ctaWrapper} data-name=\"cta-wrapper\">\n        <ButtonLink {...buttonReviewProps} />\n        <div\n          className={style.buttonWrapper}\n          onMouseOver={handleMouseOver}\n          onMouseLeave={handleMouseLeave}\n          data-name=\"button-explore-wrapper\"\n        >\n          <ButtonLink {...buttonExploreProps} />\n        </div>\n      </div>\n    </div>\n  );\n};\n\nLearnerSkillCard.contextTypes = {\n  skin: Provider.childContextTypes.skin,\n  translate: Provider.childContextTypes.translate\n};\n\nLearnerSkillCard.propTypes = {\n  'aria-label': PropTypes.string,\n  skillTitle: PropTypes.string,\n  skillAriaLabel: PropTypes.string,\n  focus: PropTypes.bool,\n  metrics: PropTypes.shape({\n    score: PropTypes.number,\n    skillCourses: PropTypes.number,\n    skillQuestions: PropTypes.number,\n    completedCourses: PropTypes.number\n  }),\n  review: PropTypes.bool,\n  onReviewClick: PropTypes.func,\n  onExploreClick: PropTypes.func\n};\n\nexport default LearnerSkillCard;\n"],"mappings":"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"}

package/lib/molecule/learning-profile-radar-chart/index.d.ts

@@ -1,10 +1,35 @@
 /// <reference types="react" />
+import { WebContextValues } from '../../atom/provider/web-context';
 import { FormatedDataType, LearningProfileRadarChartPropTypes } from './types';
 export declare const formatData: (legend: {
     [ref: string]: string;
 }, data_: LearningProfileRadarChartPropTypes['data']) => FormatedDataType[];
 export declare const LearningProfileRadarChart: {
-    ({ data, legend, totalDataset, colors: colorsProps, onClick, width, height, margin }: LearningProfileRadarChartPropTypes): JSX.Element;
+    ({ data, legend, totalDataset, colors: colorsProps, onClick, onExploreClick, width, height, margin }: LearningProfileRadarChartPropTypes, legacyContext: WebContextValues): JSX.Element;
+    contextTypes: {
+        skin: import("prop-types").Requireable<import("prop-types").InferProps<{
+            common: import("prop-types").Requireable<{
+                [x: string]: any;
+            }>;
+            images: import("prop-types").Requireable<import("prop-types").InferProps<{
+                'logo-mobile': import("prop-types").Requireable<any>;
+                logo: import("prop-types").Requireable<any>;
+                'logo-email': import("prop-types").Requireable<any>;
+                login: import("prop-types").Requireable<any>;
+            }>>;
+            icons: import("prop-types").Requireable<{
+                [x: string]: any;
+            }>;
+            mod: import("prop-types").Requireable<{
+                [x: string]: any;
+            }>;
+            courses: import("prop-types").Requireable<any[]>;
+            texts: import("prop-types").Requireable<{
+                [x: string]: any;
+            }>;
+        }>>;
+        translate: import("prop-types").Requireable<(...args: any[]) => any>;
+    };
     propTypes: {
         data: import("prop-types").Validator<{
             [x: string]: NonNullable<number | (number | null | undefined)[] | null | undefined> | null | undefined;
@@ -26,6 +51,7 @@ export declare const LearningProfileRadarChart: {
         }> | null | undefined)[]>;
         width: import("prop-types").Requireable<number>;
         height: import("prop-types").Requireable<number>;
+        onExploreClick: import("prop-types").Requireable<(...args: any[]) => any>;
     };
 };
 declare const ResponsiveLearningProfileRadarChart: {
@@ -51,6 +77,7 @@ declare const ResponsiveLearningProfileRadarChart: {
         }> | null | undefined)[]>;
         width: import("prop-types").Requireable<number>;
         height: import("prop-types").Requireable<number>;
+        onExploreClick: import("prop-types").Requireable<(...args: any[]) => any>;
     };
 };
 export default ResponsiveLearningProfileRadarChart;

package/lib/molecule/learning-profile-radar-chart/index.d.ts.map

@@ -1 +1 @@
-{"version":3,"file":"index.d.ts","sourceRoot":"","sources":["../../../src/molecule/learning-profile-radar-chart/index.tsx"],"names":[],"mappings":";AA6BA,OAAO,EAGL,gBAAgB,EAChB,kCAAkC,EAGnC,MAAM,SAAS,CAAC;AAkQjB,eAAO,MAAM,UAAU,EAAE,CACvB,MAAM,EAAE;IAAC,CAAC,GAAG,EAAE,MAAM,GAAG,MAAM,CAAA;CAAC,EAC/B,KAAK,EAAE,kCAAkC,CAAC,MAAM,CAAC,KAC9C,gBAAgB,EAOX,CAAC;AAEX,eAAO,MAAM,yBAAyB;0FASnC,kCAAkC;;;;;;;;;;;;;;;;;;;;;;;CAqHpC,CAAC;AAEF,QAAA,MAAM,mCAAmC;YAAW,kCAAkC;;;;;;;;;;;;;;;;;;;;;;;CAIrF,CAAC;AAKF,eAAe,mCAAmC,CAAC"}
+{"version":3,"file":"index.d.ts","sourceRoot":"","sources":["../../../src/molecule/learning-profile-radar-chart/index.tsx"],"names":[],"mappings":";AAiCA,OAAO,EAAC,gBAAgB,EAAC,MAAM,iCAAiC,CAAC;AACjE,OAAO,EAGL,gBAAgB,EAChB,kCAAkC,EAGnC,MAAM,SAAS,CAAC;AAmUjB,eAAO,MAAM,UAAU,EAAE,CACvB,MAAM,EAAE;IAAC,CAAC,GAAG,EAAE,MAAM,GAAG,MAAM,CAAA;CAAC,EAC/B,KAAK,EAAE,kCAAkC,CAAC,MAAM,CAAC,KAC9C,gBAAgB,EAOX,CAAC;AAEX,eAAO,MAAM,yBAAyB;0GAWjC,kCAAkC,iBACtB,gBAAgB;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;CAqJhC,CAAC;AAEF,QAAA,MAAM,mCAAmC;YAAW,kCAAkC;;;;;;;;;;;;;;;;;;;;;;;;CAIrF,CAAC;AAUF,eAAe,mCAAmC,CAAC"}