@coorpacademy/components 11.32.42-alpha.9 → 11.32.43

package/es/atom/select-icon/index.d.ts

@@ -0,0 +1,17 @@
+export default SelectIcon;
+declare function SelectIcon(props: any): JSX.Element;
+declare namespace SelectIcon {
+    const propTypes: {
+        'aria-label': PropTypes.Requireable<string>;
+        'data-name': PropTypes.Requireable<string>;
+        faIcon: PropTypes.Requireable<string>;
+        onClick: PropTypes.Requireable<(...args: any[]) => any>;
+        options: PropTypes.Requireable<PropTypes.InferProps<{
+            selectionMode: PropTypes.Requireable<string>;
+            isSelected: PropTypes.Requireable<boolean>;
+            iconColor: PropTypes.Requireable<string>;
+        }>>;
+    };
+}
+import PropTypes from "prop-types";
+//# sourceMappingURL=index.d.ts.map

package/es/atom/select-icon/index.d.ts.map

@@ -0,0 +1 @@
+{"version":3,"file":"index.d.ts","sourceRoot":"","sources":["../../../src/atom/select-icon/index.js"],"names":[],"mappings":";AAgDA,qDA0BC"}

package/es/atom/select-icon/index.js

@@ -0,0 +1,93 @@
+import React, { useCallback } from 'react';
+import PropTypes from 'prop-types';
+import classnames from 'classnames';
+import FaIcon from '../icon';
+import { COLORS } from '../../variables/colors';
+import style from './style.css';
+const ICON_COLOR = COLORS.cm_primary_blue;
+const BACKGROUND_COLOR = COLORS.white;
+const CHECK_ICON_NAME_MAP = {
+  single: 'circle-check',
+  multi: 'square-check'
+};
+
+const getButtonContent = (faIcon, options = {}) => {
+  const {
+    selectionMode = 'single',
+    isSelected = false,
+    iconColor = ICON_COLOR
+  } = options;
+  return /*#__PURE__*/React.createElement("div", {
+    className: style.contentWrapper
+  }, isSelected ?
+  /*#__PURE__*/
+
+  /* checkbox icon */
+  React.createElement("div", {
+    className: style.checkIcon
+  }, /*#__PURE__*/React.createElement(FaIcon, {
+    iconName: CHECK_ICON_NAME_MAP[selectionMode],
+    iconColor: iconColor,
+    backgroundColor: BACKGROUND_COLOR,
+    size: {
+      faSize: 16,
+      wrapperSize: 16
+    }
+  })) : null,
+  /*#__PURE__*/
+
+  /* selection tick (L18) / icon */
+  React.createElement("div", {
+    className: style.iconWrapper
+  }, /*#__PURE__*/React.createElement("div", {
+    className: style.icon
+  }, /*#__PURE__*/React.createElement(FaIcon, {
+    iconName: faIcon,
+    iconColor: isSelected ? iconColor : '',
+    size: {
+      faSize: 32,
+      wrapperSize: 32
+    }
+  })), /*#__PURE__*/React.createElement("div", {
+    className: style.iconText
+  }, faIcon)));
+};
+
+const SelectIcon = props => {
+  const {
+    faIcon,
+    'data-name': dataName,
+    'aria-label': ariaLabel,
+    onClick,
+    options = {}
+  } = props;
+  const {
+    isSelected = false
+  } = options;
+  const contentView = getButtonContent(faIcon, options);
+  const styleButton = classnames(style.default, isSelected && style.selected);
+  const handleOnClick = useCallback(() => onClick(), [onClick]);
+  const IconButton = useCallback(() => /*#__PURE__*/React.createElement("button", {
+    type: "button",
+    "aria-label": ariaLabel,
+    "data-name": dataName,
+    "data-testid": `button-${dataName}`,
+    className: styleButton,
+    onClick: handleOnClick
+  }, contentView), [ariaLabel, contentView, dataName, handleOnClick, styleButton]);
+  return /*#__PURE__*/React.createElement(IconButton, null);
+};
+
+SelectIcon.propTypes = process.env.NODE_ENV !== "production" ? {
+  'aria-label': PropTypes.string,
+  'data-name': PropTypes.string,
+  faIcon: PropTypes.string,
+  onClick: PropTypes.func,
+  options: PropTypes.shape({
+    selectionMode: PropTypes.oneOf(['single', 'multi']),
+    isSelected: PropTypes.bool,
+    iconColor: PropTypes.string
+  })
+} : {};
+export default SelectIcon;
+//# sourceMappingURL=index.js.map

package/es/atom/select-icon/index.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"index.js","names":["React","useCallback","PropTypes","classnames","FaIcon","COLORS","style","ICON_COLOR","cm_primary_blue","BACKGROUND_COLOR","white","CHECK_ICON_NAME_MAP","single","multi","getButtonContent","faIcon","options","selectionMode","isSelected","iconColor","contentWrapper","checkIcon","faSize","wrapperSize","iconWrapper","icon","iconText","SelectIcon","props","dataName","ariaLabel","onClick","contentView","styleButton","default","selected","handleOnClick","IconButton","propTypes","string","func","shape","oneOf","bool"],"sources":["../../../src/atom/select-icon/index.js"],"sourcesContent":["import React, {useCallback} from 'react';\nimport PropTypes from 'prop-types';\nimport classnames from 'classnames';\nimport FaIcon from '../icon';\n\nimport {COLORS} from '../../variables/colors';\nimport style from './style.css';\n\nconst ICON_COLOR = COLORS.cm_primary_blue;\nconst BACKGROUND_COLOR = COLORS.white;\nconst CHECK_ICON_NAME_MAP = {\n  single: 'circle-check',\n  multi: 'square-check'\n};\n\nconst getButtonContent = (faIcon, options = {}) => {\n  const {selectionMode = 'single', isSelected = false, iconColor = ICON_COLOR} = options;\n\n  return (\n    <div className={style.contentWrapper}>\n      {isSelected ? (\n        /* checkbox icon */\n        <div className={style.checkIcon}>\n          <FaIcon\n            iconName={CHECK_ICON_NAME_MAP[selectionMode]}\n            iconColor={iconColor}\n            backgroundColor={BACKGROUND_COLOR}\n            size={{faSize: 16, wrapperSize: 16}}\n          />\n        </div>\n      ) : null}\n      {\n        /* selection tick (L18) / icon */\n        <div className={style.iconWrapper}>\n          <div className={style.icon}>\n            <FaIcon\n              iconName={faIcon}\n              iconColor={isSelected ? iconColor : ''}\n              size={{faSize: 32, wrapperSize: 32}}\n            />\n          </div>\n          <div className={style.iconText}>{faIcon}</div>\n        </div>\n      }\n    </div>\n  );\n};\n\nconst SelectIcon = props => {\n  const {faIcon, 'data-name': dataName, 'aria-label': ariaLabel, onClick, options = {}} = props;\n\n  const {isSelected = false} = options;\n\n  const contentView = getButtonContent(faIcon, options);\n  const styleButton = classnames(style.default, isSelected && style.selected);\n  const handleOnClick = useCallback(() => onClick(), [onClick]);\n\n  const IconButton = useCallback(\n    () => (\n      <button\n        type=\"button\"\n        aria-label={ariaLabel}\n        data-name={dataName}\n        data-testid={`button-${dataName}`}\n        className={styleButton}\n        onClick={handleOnClick}\n      >\n        {contentView}\n      </button>\n    ),\n    [ariaLabel, contentView, dataName, handleOnClick, styleButton]\n  );\n\n  return <IconButton />;\n};\n\nSelectIcon.propTypes = {\n  'aria-label': PropTypes.string,\n  'data-name': PropTypes.string,\n  faIcon: PropTypes.string,\n  onClick: PropTypes.func,\n  options: PropTypes.shape({\n    selectionMode: PropTypes.oneOf(['single', 'multi']),\n    isSelected: PropTypes.bool,\n    iconColor: PropTypes.string\n  })\n};\n\nexport default SelectIcon;\n"],"mappings":"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"}

package/es/atom/select-icon/style.css

@@ -0,0 +1,73 @@
+@value colors: "../../variables/colors.css";
+@value cm_grey_100 from colors;
+@value cm_grey_400 from colors;
+@value cm_grey_500 from colors;
+@value cm_grey_75 from colors;
+@value cm_grey_50 from colors;
+@value cm_primary_blue from colors;
+@value white from colors;
+
+.button {
+  font-family: Gilroy;
+  font-size: 12px;
+  font-style: normal;
+  font-weight: 600;
+  line-height: 16px;
+  color: cm_grey_400;
+  display: flex;
+  justify-content: center;
+  align-items: center;
+  cursor: pointer;
+  border: none;
+  background-color: white;
+}
+
+.button:hover {
+  background-color: cm_grey_100;
+}
+
+.selected {
+  background-color: cm_grey_50;
+  border: 2px solid cm_primary_blue;
+}
+
+.selected:hover {
+  background-color: cm_grey_75;
+  color: cm_grey_500;
+}
+
+.default {
+  composes: button;
+  width: 144px;
+  height: 120px;
+  border-radius: 12px;
+  position: relative;
+}
+
+.contentWrapper {
+  display: flex;
+  flex-direction: column;
+  align-items: center;
+  justify-content: center;
+  height: 100%;
+}
+
+.checkIcon {
+  position: absolute;
+  top: 8px;
+  right: 8px;
+}
+
+.iconWrapper {
+  display: flex;
+  flex-direction: column;
+  align-items: center;
+}
+
+.icon {
+  margin-bottom: 8px;
+}
+
+.iconText {
+  font-size: 12px;
+}

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

@@ -34,7 +34,6 @@ declare namespace LearnerSkillCard {
             score: PropTypes.Requireable<number>;
             content: PropTypes.Requireable<number>;
             questionsToReview: PropTypes.Requireable<number>;
-            contentCompleted: PropTypes.Requireable<number>;
         }>>;
         review: PropTypes.Requireable<boolean>;
         onReviewClick: PropTypes.Requireable<(...args: any[]) => any>;

package/es/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,yEAiJC"}
+{"version":3,"file":"index.d.ts","sourceRoot":"","sources":["../../../src/molecule/learner-skill-card/index.js"],"names":[],"mappings":";AAaA,yEAiHC"}

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

@@ -1,11 +1,14 @@
 import _get from "lodash/fp/get";
-import React, { useCallback } from 'react';
+import React from 'react';
 import { convert } from 'css-color-function';
 import PropTypes from 'prop-types';
 import Icon from '../../atom/icon';
 import ButtonLink from '../../atom/button-link';
 import Provider from '../../atom/provider';
+import ProgressBar from '../progress-bar';
+import { COLORS } from '../../variables/colors';
 import style from './style.css';
+const MAX_SCORE = 100;
 
 const LearnerSkillCard = (props, context) => {
   const {
@@ -21,8 +24,7 @@ const LearnerSkillCard = (props, context) => {
   const {
     score,
     content,
-    questionsToReview,
-    contentCompleted = 0
+    questionsToReview = 0
   } = metrics;
   const {
     skin,
@@ -33,10 +35,8 @@ const LearnerSkillCard = (props, context) => {
 
   const reviewLocale = translate('Review');
   const exploreLocale = translate('Explore');
-  const coursesLocale = translate('courses');
-  const questionsLocale = translate('questions');
+  const questionsLocale = translate('skill_chart_side_panel_questions_to_review');
   const skillFocusLocale = translate('skill_focus');
-  const contentCompletedLocale = translate('courses_completed');
   const buttonReviewProps = {
     customStyle: {
       backgroundColor: '#FFF',
@@ -71,40 +71,18 @@ const LearnerSkillCard = (props, context) => {
       }
     }
   };
-  const ProgressBar = useCallback(() => {
-    if (!content) return null;
-    const progressBarColor = '#3EC483';
-    const inlineProgressValueStyle = {
-      backgroundColor: progressBarColor,
-      width: `${score}%`
-    };
-    return /*#__PURE__*/React.createElement("div", {
-      className: style.progressWrapper
-    }, /*#__PURE__*/React.createElement("div", {
-      "data-name": "progress",
-      className: style.progress,
-      style: inlineProgressValueStyle,
-      role: "progressbar",
-      "aria-label": _get('progression', ariaLabel)
-    }));
-  }, [score, ariaLabel, content]);
   return /*#__PURE__*/React.createElement("div", {
     className: style.learnerSkillCardWrapper,
     "data-name": "learner-skill-card-wrapper",
     "aria-label": ariaLabel
-  }, content || questionsToReview ? /*#__PURE__*/React.createElement("div", {
-    className: style.skillCoursesAndQuestionsWrapper
-  }, content ? /*#__PURE__*/React.createElement("div", {
-    className: style.skillInformation,
-    "data-name": "skill-courses"
-  }, /*#__PURE__*/React.createElement("span", {
-    className: style.skillInformationNumber
-  }, content), " ", coursesLocale) : null, questionsToReview ? /*#__PURE__*/React.createElement("div", {
+  }, questionsToReview ? /*#__PURE__*/React.createElement("div", {
+    className: style.skillQuestionsWrapper
+  }, /*#__PURE__*/React.createElement("div", {
     className: style.skillInformation,
     "data-name": "skill-questions"
   }, /*#__PURE__*/React.createElement("span", {
     className: style.skillInformationNumber
-  }, questionsToReview), "\xA0", questionsLocale) : null) : null, /*#__PURE__*/React.createElement("div", {
+  }, questionsToReview), "\xA0", questionsLocale)) : null, /*#__PURE__*/React.createElement("div", {
     className: style.skillTitleWrapper
   }, /*#__PURE__*/React.createElement("div", {
     "data-name": "skill-title",
@@ -119,19 +97,22 @@ const LearnerSkillCard = (props, context) => {
       faSize: 10,
       wrapperSize: 16
     }
-  }), skillFocusLocale) : null), /*#__PURE__*/React.createElement(ProgressBar, null), /*#__PURE__*/React.createElement("div", {
+  }), skillFocusLocale) : null), content ? /*#__PURE__*/React.createElement("div", {
     className: style.progressInformations
-  }, content ? /*#__PURE__*/React.createElement(React.Fragment, null, /*#__PURE__*/React.createElement("div", {
-    className: style.progressInformation,
-    "data-name": "skill-completed-courses"
-  }, /*#__PURE__*/React.createElement("span", {
-    className: style.progressInformationNumber
-  }, contentCompleted), ` ${contentCompletedLocale}`), /*#__PURE__*/React.createElement("div", {
+  }, /*#__PURE__*/React.createElement(ProgressBar, {
+    value: score,
+    displayInfo: false,
+    max: MAX_SCORE,
+    className: style.progressWrapper,
+    style: {
+      backgroundColor: COLORS.positive
+    }
+  }), /*#__PURE__*/React.createElement("div", {
     className: style.progressInformation,
     "data-name": "completed-percentage"
   }, /*#__PURE__*/React.createElement("span", {
     className: style.progressInformationNumber
-  }, score, "%"))) : null), /*#__PURE__*/React.createElement("div", {
+  }, score, "%"))) : null, /*#__PURE__*/React.createElement("div", {
     className: style.ctaWrapper,
     "data-name": "cta-wrapper"
   }, /*#__PURE__*/React.createElement(ButtonLink, buttonReviewProps), /*#__PURE__*/React.createElement("div", {
@@ -152,8 +133,7 @@ LearnerSkillCard.propTypes = process.env.NODE_ENV !== "production" ? {
   metrics: PropTypes.shape({
     score: PropTypes.number,
     content: PropTypes.number,
-    questionsToReview: PropTypes.number,
-    contentCompleted: PropTypes.number
+    questionsToReview: PropTypes.number
   }),
   review: PropTypes.bool,
   onReviewClick: PropTypes.func,

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

@@ -1 +1 @@
-{"version":3,"file":"index.js","names":["React","useCallback","convert","PropTypes","Icon","ButtonLink","Provider","style","LearnerSkillCard","props","context","ariaLabel","skillTitle","skillAriaLabel","focus","metrics","review","onReviewClick","onExploreClick","score","content","questionsToReview","contentCompleted","skin","translate","primarySkinColor","reviewLocale","exploreLocale","coursesLocale","questionsLocale","skillFocusLocale","contentCompletedLocale","buttonReviewProps","customStyle","backgroundColor","transition","padding","disabled","onClick","label","buttonExploreProps","color","hoverColor","hoverBackgroundColor","icon","position","faIcon","name","size","ProgressBar","progressBarColor","inlineProgressValueStyle","width","progressWrapper","progress","learnerSkillCardWrapper","skillCoursesAndQuestionsWrapper","skillInformation","skillInformationNumber","skillTitleWrapper","skillFocusBadge","faSize","wrapperSize","progressInformations","progressInformation","progressInformationNumber","ctaWrapper","buttonWrapper","contextTypes","childContextTypes","propTypes","string","bool","shape","number","func"],"sources":["../../../src/molecule/learner-skill-card/index.js"],"sourcesContent":["import React, {useCallback} 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, content, questionsToReview, contentCompleted = 0} = metrics;\n  const {skin, translate} = context;\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 contentCompletedLocale = translate('courses_completed');\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      padding: '0px'\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: convert(`color(${primarySkinColor} a(0.07))`),\n      color: primarySkinColor,\n      transition: 'background-color 0.15s ease-in-out, color 0.15s ease-in-out'\n    },\n    hoverColor: '#FFFFFF',\n    hoverBackgroundColor: primarySkinColor,\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: convert(`color(${primarySkinColor} a(0.07))`),\n        color: primarySkinColor,\n        size: 16\n      }\n    }\n  };\n\n  const ProgressBar = useCallback(() => {\n    if (!content) 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, content]);\n\n  return (\n    <div\n      className={style.learnerSkillCardWrapper}\n      data-name=\"learner-skill-card-wrapper\"\n      aria-label={ariaLabel}\n    >\n      {content || questionsToReview ? (\n        <div className={style.skillCoursesAndQuestionsWrapper}>\n          {content ? (\n            <div className={style.skillInformation} data-name=\"skill-courses\">\n              <span className={style.skillInformationNumber}>{content}</span> {coursesLocale}\n            </div>\n          ) : null}\n          {questionsToReview ? (\n            <div className={style.skillInformation} data-name=\"skill-questions\">\n              <span className={style.skillInformationNumber}>{questionsToReview}</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        {content ? (\n          <>\n            <div className={style.progressInformation} data-name=\"skill-completed-courses\">\n              <span className={style.progressInformationNumber}>{contentCompleted}</span>\n              {` ${contentCompletedLocale}`}\n            </div>\n            <div className={style.progressInformation} data-name=\"completed-percentage\">\n              <span className={style.progressInformationNumber}>{score}%</span>\n            </div>\n          </>\n        ) : null}\n      </div>\n      <div className={style.ctaWrapper} data-name=\"cta-wrapper\">\n        <ButtonLink {...buttonReviewProps} />\n        <div className={style.buttonWrapper} data-name=\"button-explore-wrapper\">\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    content: PropTypes.number,\n    questionsToReview: PropTypes.number,\n    contentCompleted: PropTypes.number\n  }),\n  review: PropTypes.bool,\n  onReviewClick: PropTypes.func,\n  onExploreClick: PropTypes.func\n};\n\nexport default LearnerSkillCard;\n"],"mappings":";AAAA,OAAOA,KAAP,IAAeC,WAAf,QAAiC,OAAjC;AACA,SAAQC,OAAR,QAAsB,oBAAtB;AAEA,OAAOC,SAAP,MAAsB,YAAtB;AACA,OAAOC,IAAP,MAAiB,iBAAjB;AACA,OAAOC,UAAP,MAAuB,wBAAvB;AACA,OAAOC,QAAP,MAAqB,qBAArB;AACA,OAAOC,KAAP,MAAkB,aAAlB;;AAEA,MAAMC,gBAAgB,GAAG,CAACC,KAAD,EAAQC,OAAR,KAAoB;EAC3C,MAAM;IACJ,cAAcC,SADV;IAEJC,UAFI;IAGJC,cAHI;IAIJC,KAAK,GAAG,KAJJ;IAKJC,OALI;IAMJC,MAAM,GAAG,KANL;IAOJC,aAPI;IAQJC;EARI,IASFT,KATJ;EAUA,MAAM;IAACU,KAAD;IAAQC,OAAR;IAAiBC,iBAAjB;IAAoCC,gBAAgB,GAAG;EAAvD,IAA4DP,OAAlE;EACA,MAAM;IAACQ,IAAD;IAAOC;EAAP,IAAoBd,OAA1B;;EACA,MAAMe,gBAAgB,GAAG,KAAI,gBAAJ,EAAsBF,IAAtB,CAAzB;;EAEA,MAAMG,YAAY,GAAGF,SAAS,CAAC,QAAD,CAA9B;EACA,MAAMG,aAAa,GAAGH,SAAS,CAAC,SAAD,CAA/B;EACA,MAAMI,aAAa,GAAGJ,SAAS,CAAC,SAAD,CAA/B;EACA,MAAMK,eAAe,GAAGL,SAAS,CAAC,WAAD,CAAjC;EACA,MAAMM,gBAAgB,GAAGN,SAAS,CAAC,aAAD,CAAlC;EACA,MAAMO,sBAAsB,GAAGP,SAAS,CAAC,mBAAD,CAAxC;EAEA,MAAMQ,iBAAiB,GAAG;IACxBC,WAAW,EAAE;MACXC,eAAe,EAAE,MADN;MAEXC,UAAU,EAAE,6DAFD;MAGXC,OAAO,EAAE;IAHE,CADW;IAMxBC,QAAQ,EAAE,CAACrB,MANa;IAOxBsB,OAAO,EAAErB,aAPe;IAQxB,cAAe,GAAEL,UAAW,KAAIc,YAAa,EARrB;IASxBa,KAAK,EAAEb,YATiB;IAUxB,aAAa;EAVW,CAA1B;EAaA,MAAMc,kBAAkB,GAAG;IACzBP,WAAW,EAAE;MACXC,eAAe,EAAEhC,OAAO,CAAE,SAAQuB,gBAAiB,WAA3B,CADb;MAEXgB,KAAK,EAAEhB,gBAFI;MAGXU,UAAU,EAAE;IAHD,CADY;IAMzBO,UAAU,EAAE,SANa;IAOzBC,oBAAoB,EAAElB,gBAPG;IAQzBa,OAAO,EAAEpB,cARgB;IASzB,cAAe,GAAEN,UAAW,KAAIe,aAAc,EATrB;IAUzBY,KAAK,EAAEZ,aAVkB;IAWzB,aAAa,mCAXY;IAYzBiB,IAAI,EAAE;MACJC,QAAQ,EAAE,MADN;MAEJC,MAAM,EAAE;QACNC,IAAI,EAAE,SADA;QAENb,eAAe,EAAEhC,OAAO,CAAE,SAAQuB,gBAAiB,WAA3B,CAFlB;QAGNgB,KAAK,EAAEhB,gBAHD;QAINuB,IAAI,EAAE;MAJA;IAFJ;EAZmB,CAA3B;EAuBA,MAAMC,WAAW,GAAGhD,WAAW,CAAC,MAAM;IACpC,IAAI,CAACmB,OAAL,EAAc,OAAO,IAAP;IAEd,MAAM8B,gBAAgB,GAAG,SAAzB;IACA,MAAMC,wBAAwB,GAAG;MAC/BjB,eAAe,EAAEgB,gBADc;MAE/BE,KAAK,EAAG,GAAEjC,KAAM;IAFe,CAAjC;IAKA,oBACE;MAAK,SAAS,EAAEZ,KAAK,CAAC8C;IAAtB,gBACE;MACE,aAAU,UADZ;MAEE,SAAS,EAAE9C,KAAK,CAAC+C,QAFnB;MAGE,KAAK,EAAEH,wBAHT;MAIE,IAAI,EAAC,aAJP;MAKE,cAAY,KAAI,aAAJ,EAAmBxC,SAAnB;IALd,EADF,CADF;EAWD,CApB8B,EAoB5B,CAACQ,KAAD,EAAQR,SAAR,EAAmBS,OAAnB,CApB4B,CAA/B;EAsBA,oBACE;IACE,SAAS,EAAEb,KAAK,CAACgD,uBADnB;IAEE,aAAU,4BAFZ;IAGE,cAAY5C;EAHd,GAKGS,OAAO,IAAIC,iBAAX,gBACC;IAAK,SAAS,EAAEd,KAAK,CAACiD;EAAtB,GACGpC,OAAO,gBACN;IAAK,SAAS,EAAEb,KAAK,CAACkD,gBAAtB;IAAwC,aAAU;EAAlD,gBACE;IAAM,SAAS,EAAElD,KAAK,CAACmD;EAAvB,GAAgDtC,OAAhD,CADF,OACmEQ,aADnE,CADM,GAIJ,IALN,EAMGP,iBAAiB,gBAChB;IAAK,SAAS,EAAEd,KAAK,CAACkD,gBAAtB;IAAwC,aAAU;EAAlD,gBACE;IAAM,SAAS,EAAElD,KAAK,CAACmD;EAAvB,GAAgDrC,iBAAhD,CADF,UAESQ,eAFT,CADgB,GAKd,IAXN,CADD,GAcG,IAnBN,eAoBE;IAAK,SAAS,EAAEtB,KAAK,CAACoD;EAAtB,gBACE;IACE,aAAU,aADZ;IAEE,SAAS,EAAEpD,KAAK,CAACK,UAFnB;IAGE,cAAYC,cAAc,IAAID;EAHhC,GAKGA,UALH,CADF,EAQGE,KAAK,gBACJ;IAAK,SAAS,EAAEP,KAAK,CAACqD;EAAtB,gBACE,oBAAC,IAAD;IACE,QAAQ,EAAC,gBADX;IAEE,eAAe,EAAC,SAFlB;IAGE,IAAI,EAAE;MACJC,MAAM,EAAE,EADJ;MAEJC,WAAW,EAAE;IAFT;EAHR,EADF,EASGhC,gBATH,CADI,GAYF,IApBN,CApBF,eA0CE,oBAAC,WAAD,OA1CF,eA2CE;IAAK,SAAS,EAAEvB,KAAK,CAACwD;EAAtB,GACG3C,OAAO,gBACN,uDACE;IAAK,SAAS,EAAEb,KAAK,CAACyD,mBAAtB;IAA2C,aAAU;EAArD,gBACE;IAAM,SAAS,EAAEzD,KAAK,CAAC0D;EAAvB,GAAmD3C,gBAAnD,CADF,EAEI,IAAGS,sBAAuB,EAF9B,CADF,eAKE;IAAK,SAAS,EAAExB,KAAK,CAACyD,mBAAtB;IAA2C,aAAU;EAArD,gBACE;IAAM,SAAS,EAAEzD,KAAK,CAAC0D;EAAvB,GAAmD9C,KAAnD,MADF,CALF,CADM,GAUJ,IAXN,CA3CF,eAwDE;IAAK,SAAS,EAAEZ,KAAK,CAAC2D,UAAtB;IAAkC,aAAU;EAA5C,gBACE,oBAAC,UAAD,EAAgBlC,iBAAhB,CADF,eAEE;IAAK,SAAS,EAAEzB,KAAK,CAAC4D,aAAtB;IAAqC,aAAU;EAA/C,gBACE,oBAAC,UAAD,EAAgB3B,kBAAhB,CADF,CAFF,CAxDF,CADF;AAiED,CAjJD;;AAmJAhC,gBAAgB,CAAC4D,YAAjB,GAAgC;EAC9B7C,IAAI,EAAEjB,QAAQ,CAAC+D,iBAAT,CAA2B9C,IADH;EAE9BC,SAAS,EAAElB,QAAQ,CAAC+D,iBAAT,CAA2B7C;AAFR,CAAhC;AAKAhB,gBAAgB,CAAC8D,SAAjB,2CAA6B;EAC3B,cAAcnE,SAAS,CAACoE,MADG;EAE3B3D,UAAU,EAAET,SAAS,CAACoE,MAFK;EAG3B1D,cAAc,EAAEV,SAAS,CAACoE,MAHC;EAI3BzD,KAAK,EAAEX,SAAS,CAACqE,IAJU;EAK3BzD,OAAO,EAAEZ,SAAS,CAACsE,KAAV,CAAgB;IACvBtD,KAAK,EAAEhB,SAAS,CAACuE,MADM;IAEvBtD,OAAO,EAAEjB,SAAS,CAACuE,MAFI;IAGvBrD,iBAAiB,EAAElB,SAAS,CAACuE,MAHN;IAIvBpD,gBAAgB,EAAEnB,SAAS,CAACuE;EAJL,CAAhB,CALkB;EAW3B1D,MAAM,EAAEb,SAAS,CAACqE,IAXS;EAY3BvD,aAAa,EAAEd,SAAS,CAACwE,IAZE;EAa3BzD,cAAc,EAAEf,SAAS,CAACwE;AAbC,CAA7B;AAgBA,eAAenE,gBAAf"}
+{"version":3,"file":"index.js","names":["React","convert","PropTypes","Icon","ButtonLink","Provider","ProgressBar","COLORS","style","MAX_SCORE","LearnerSkillCard","props","context","ariaLabel","skillTitle","skillAriaLabel","focus","metrics","review","onReviewClick","onExploreClick","score","content","questionsToReview","skin","translate","primarySkinColor","reviewLocale","exploreLocale","questionsLocale","skillFocusLocale","buttonReviewProps","customStyle","backgroundColor","transition","padding","disabled","onClick","label","buttonExploreProps","color","hoverColor","hoverBackgroundColor","icon","position","faIcon","name","size","learnerSkillCardWrapper","skillQuestionsWrapper","skillInformation","skillInformationNumber","skillTitleWrapper","skillFocusBadge","faSize","wrapperSize","progressInformations","progressWrapper","positive","progressInformation","progressInformationNumber","ctaWrapper","buttonWrapper","contextTypes","childContextTypes","propTypes","string","bool","shape","number","func"],"sources":["../../../src/molecule/learner-skill-card/index.js"],"sourcesContent":["import React 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 ProgressBar from '../progress-bar';\nimport {COLORS} from '../../variables/colors';\nimport style from './style.css';\n\nconst MAX_SCORE = 100;\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, content, questionsToReview = 0} = metrics;\n  const {skin, translate} = context;\n  const primarySkinColor = get('common.primary', skin);\n\n  const reviewLocale = translate('Review');\n  const exploreLocale = translate('Explore');\n  const questionsLocale = translate('skill_chart_side_panel_questions_to_review');\n  const skillFocusLocale = translate('skill_focus');\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      padding: '0px'\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: convert(`color(${primarySkinColor} a(0.07))`),\n      color: primarySkinColor,\n      transition: 'background-color 0.15s ease-in-out, color 0.15s ease-in-out'\n    },\n    hoverColor: '#FFFFFF',\n    hoverBackgroundColor: primarySkinColor,\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: convert(`color(${primarySkinColor} a(0.07))`),\n        color: primarySkinColor,\n        size: 16\n      }\n    }\n  };\n  return (\n    <div\n      className={style.learnerSkillCardWrapper}\n      data-name=\"learner-skill-card-wrapper\"\n      aria-label={ariaLabel}\n    >\n      {questionsToReview ? (\n        <div className={style.skillQuestionsWrapper}>\n          <div className={style.skillInformation} data-name=\"skill-questions\">\n            <span className={style.skillInformationNumber}>{questionsToReview}</span>\n            &nbsp;{questionsLocale}\n          </div>\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      {content ? (\n        <div className={style.progressInformations}>\n          <ProgressBar\n            value={score}\n            displayInfo={false}\n            max={MAX_SCORE}\n            className={style.progressWrapper}\n            style={{backgroundColor: COLORS.positive}}\n          />\n          <div className={style.progressInformation} data-name=\"completed-percentage\">\n            <span className={style.progressInformationNumber}>{score}%</span>\n          </div>\n        </div>\n      ) : null}\n      <div className={style.ctaWrapper} data-name=\"cta-wrapper\">\n        <ButtonLink {...buttonReviewProps} />\n        <div className={style.buttonWrapper} data-name=\"button-explore-wrapper\">\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    content: PropTypes.number,\n    questionsToReview: PropTypes.number\n  }),\n  review: PropTypes.bool,\n  onReviewClick: PropTypes.func,\n  onExploreClick: PropTypes.func\n};\n\nexport default LearnerSkillCard;\n"],"mappings":";AAAA,OAAOA,KAAP,MAAkB,OAAlB;AACA,SAAQC,OAAR,QAAsB,oBAAtB;AAEA,OAAOC,SAAP,MAAsB,YAAtB;AACA,OAAOC,IAAP,MAAiB,iBAAjB;AACA,OAAOC,UAAP,MAAuB,wBAAvB;AACA,OAAOC,QAAP,MAAqB,qBAArB;AACA,OAAOC,WAAP,MAAwB,iBAAxB;AACA,SAAQC,MAAR,QAAqB,wBAArB;AACA,OAAOC,KAAP,MAAkB,aAAlB;AAEA,MAAMC,SAAS,GAAG,GAAlB;;AAEA,MAAMC,gBAAgB,GAAG,CAACC,KAAD,EAAQC,OAAR,KAAoB;EAC3C,MAAM;IACJ,cAAcC,SADV;IAEJC,UAFI;IAGJC,cAHI;IAIJC,KAAK,GAAG,KAJJ;IAKJC,OALI;IAMJC,MAAM,GAAG,KANL;IAOJC,aAPI;IAQJC;EARI,IASFT,KATJ;EAUA,MAAM;IAACU,KAAD;IAAQC,OAAR;IAAiBC,iBAAiB,GAAG;EAArC,IAA0CN,OAAhD;EACA,MAAM;IAACO,IAAD;IAAOC;EAAP,IAAoBb,OAA1B;;EACA,MAAMc,gBAAgB,GAAG,KAAI,gBAAJ,EAAsBF,IAAtB,CAAzB;;EAEA,MAAMG,YAAY,GAAGF,SAAS,CAAC,QAAD,CAA9B;EACA,MAAMG,aAAa,GAAGH,SAAS,CAAC,SAAD,CAA/B;EACA,MAAMI,eAAe,GAAGJ,SAAS,CAAC,4CAAD,CAAjC;EACA,MAAMK,gBAAgB,GAAGL,SAAS,CAAC,aAAD,CAAlC;EAEA,MAAMM,iBAAiB,GAAG;IACxBC,WAAW,EAAE;MACXC,eAAe,EAAE,MADN;MAEXC,UAAU,EAAE,6DAFD;MAGXC,OAAO,EAAE;IAHE,CADW;IAMxBC,QAAQ,EAAE,CAAClB,MANa;IAOxBmB,OAAO,EAAElB,aAPe;IAQxB,cAAe,GAAEL,UAAW,KAAIa,YAAa,EARrB;IASxBW,KAAK,EAAEX,YATiB;IAUxB,aAAa;EAVW,CAA1B;EAaA,MAAMY,kBAAkB,GAAG;IACzBP,WAAW,EAAE;MACXC,eAAe,EAAEhC,OAAO,CAAE,SAAQyB,gBAAiB,WAA3B,CADb;MAEXc,KAAK,EAAEd,gBAFI;MAGXQ,UAAU,EAAE;IAHD,CADY;IAMzBO,UAAU,EAAE,SANa;IAOzBC,oBAAoB,EAAEhB,gBAPG;IAQzBW,OAAO,EAAEjB,cARgB;IASzB,cAAe,GAAEN,UAAW,KAAIc,aAAc,EATrB;IAUzBU,KAAK,EAAEV,aAVkB;IAWzB,aAAa,mCAXY;IAYzBe,IAAI,EAAE;MACJC,QAAQ,EAAE,MADN;MAEJC,MAAM,EAAE;QACNC,IAAI,EAAE,SADA;QAENb,eAAe,EAAEhC,OAAO,CAAE,SAAQyB,gBAAiB,WAA3B,CAFlB;QAGNc,KAAK,EAAEd,gBAHD;QAINqB,IAAI,EAAE;MAJA;IAFJ;EAZmB,CAA3B;EAsBA,oBACE;IACE,SAAS,EAAEvC,KAAK,CAACwC,uBADnB;IAEE,aAAU,4BAFZ;IAGE,cAAYnC;EAHd,GAKGU,iBAAiB,gBAChB;IAAK,SAAS,EAAEf,KAAK,CAACyC;EAAtB,gBACE;IAAK,SAAS,EAAEzC,KAAK,CAAC0C,gBAAtB;IAAwC,aAAU;EAAlD,gBACE;IAAM,SAAS,EAAE1C,KAAK,CAAC2C;EAAvB,GAAgD5B,iBAAhD,CADF,UAESM,eAFT,CADF,CADgB,GAOd,IAZN,eAaE;IAAK,SAAS,EAAErB,KAAK,CAAC4C;EAAtB,gBACE;IACE,aAAU,aADZ;IAEE,SAAS,EAAE5C,KAAK,CAACM,UAFnB;IAGE,cAAYC,cAAc,IAAID;EAHhC,GAKGA,UALH,CADF,EAQGE,KAAK,gBACJ;IAAK,SAAS,EAAER,KAAK,CAAC6C;EAAtB,gBACE,oBAAC,IAAD;IACE,QAAQ,EAAC,gBADX;IAEE,eAAe,EAAC,SAFlB;IAGE,IAAI,EAAE;MACJC,MAAM,EAAE,EADJ;MAEJC,WAAW,EAAE;IAFT;EAHR,EADF,EASGzB,gBATH,CADI,GAYF,IApBN,CAbF,EAmCGR,OAAO,gBACN;IAAK,SAAS,EAAEd,KAAK,CAACgD;EAAtB,gBACE,oBAAC,WAAD;IACE,KAAK,EAAEnC,KADT;IAEE,WAAW,EAAE,KAFf;IAGE,GAAG,EAAEZ,SAHP;IAIE,SAAS,EAAED,KAAK,CAACiD,eAJnB;IAKE,KAAK,EAAE;MAACxB,eAAe,EAAE1B,MAAM,CAACmD;IAAzB;EALT,EADF,eAQE;IAAK,SAAS,EAAElD,KAAK,CAACmD,mBAAtB;IAA2C,aAAU;EAArD,gBACE;IAAM,SAAS,EAAEnD,KAAK,CAACoD;EAAvB,GAAmDvC,KAAnD,MADF,CARF,CADM,GAaJ,IAhDN,eAiDE;IAAK,SAAS,EAAEb,KAAK,CAACqD,UAAtB;IAAkC,aAAU;EAA5C,gBACE,oBAAC,UAAD,EAAgB9B,iBAAhB,CADF,eAEE;IAAK,SAAS,EAAEvB,KAAK,CAACsD,aAAtB;IAAqC,aAAU;EAA/C,gBACE,oBAAC,UAAD,EAAgBvB,kBAAhB,CADF,CAFF,CAjDF,CADF;AA0DD,CAjHD;;AAmHA7B,gBAAgB,CAACqD,YAAjB,GAAgC;EAC9BvC,IAAI,EAAEnB,QAAQ,CAAC2D,iBAAT,CAA2BxC,IADH;EAE9BC,SAAS,EAAEpB,QAAQ,CAAC2D,iBAAT,CAA2BvC;AAFR,CAAhC;AAKAf,gBAAgB,CAACuD,SAAjB,2CAA6B;EAC3B,cAAc/D,SAAS,CAACgE,MADG;EAE3BpD,UAAU,EAAEZ,SAAS,CAACgE,MAFK;EAG3BnD,cAAc,EAAEb,SAAS,CAACgE,MAHC;EAI3BlD,KAAK,EAAEd,SAAS,CAACiE,IAJU;EAK3BlD,OAAO,EAAEf,SAAS,CAACkE,KAAV,CAAgB;IACvB/C,KAAK,EAAEnB,SAAS,CAACmE,MADM;IAEvB/C,OAAO,EAAEpB,SAAS,CAACmE,MAFI;IAGvB9C,iBAAiB,EAAErB,SAAS,CAACmE;EAHN,CAAhB,CALkB;EAU3BnD,MAAM,EAAEhB,SAAS,CAACiE,IAVS;EAW3BhD,aAAa,EAAEjB,SAAS,CAACoE,IAXE;EAY3BlD,cAAc,EAAElB,SAAS,CAACoE;AAZC,CAA7B;AAeA,eAAe5D,gBAAf"}

package/es/molecule/learner-skill-card/style.css

@@ -36,7 +36,7 @@
   box-shadow: 0px 4px 16px 0px rgba(0, 0, 0, 0.10);
 }
 
-.skillCoursesAndQuestionsWrapper,
+.skillQuestionsWrapper,
 .progressInformations {
   display: flex;
   justify-content: space-between;
@@ -90,6 +90,7 @@
 
 .progressWrapper {
   position: relative;
+  top: 4px;
   left: 0;
   width: 100%;
   height: 4px;
@@ -99,13 +100,9 @@
   margin-bottom: 8px;
 }
 
-.progress {
-  display: block;
-  height: 4px;
-  animation: progressbar 2s ease-in-out;
-}
-
 .progressInformations {
+  display: flex;
+  gap: 8px;
   min-height: 12px;
   margin-bottom: 24px;
 }

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,4EAqHC"}
+{"version":3,"file":"index.d.ts","sourceRoot":"","sources":["../../../src/template/certification-detail/index.js"],"names":[],"mappings":";AAgBA,4EAuHC"}

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

@@ -46,11 +46,13 @@ const CertificationDetail = (props, context) => {
   const [showMore, setShowMore] = useState(false);
   const handleShowMore = useCallback(() => setShowMore(!showMore), [setShowMore, showMore]);
   useEffect(() => {
-    const {
-      clientHeight = 0,
-      scrollHeight = 0
-    } = descriptionRef.current;
-    setIsDescriptionTruncated(scrollHeight > clientHeight);
+    if (descriptionRef.current) {
+      const {
+        clientHeight = 0,
+        scrollHeight = 0
+      } = descriptionRef.current;
+      setIsDescriptionTruncated(scrollHeight > clientHeight);
+    }
   }, [description]);
   const Description = useCallback(() => {
     return /*#__PURE__*/React.createElement("div", {

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","clientHeight","scrollHeight","current","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    const {clientHeight = 0, scrollHeight = 0} = descriptionRef.current;\n    setIsDescriptionTruncated(scrollHeight > clientHeight);\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","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":";;;;AAAA,OAAOA,KAAP,IAAeC,WAAf,EAA4BC,SAA5B,EAAuCC,MAAvC,EAA+CC,QAA/C,EAAyDC,OAAzD,QAAuE,OAAvE;AACA,OAAOC,SAAP,MAAsB,YAAtB;AACA,OAAOC,UAAP,MAAuB,YAAvB;AAEA,OAAOC,QAAP,MAAqB,iBAArB;AACA,OAAOC,QAAP,MAAqB,qBAArB;AACA,OAAOC,GAAP,MAAgB,gBAAhB;AACA,SAAQC,qBAAR,QAAoC,mBAApC;AACA,OAAOC,cAAP,MAA2B,6BAA3B;AACA,OAAOC,IAAP,MAAiB,iBAAjB;AACA,OAAOC,SAAP,MAAsB,2BAAtB;AACA,OAAOC,UAAP,MAAuB,6BAAvB;AACA,SAAQC,sBAAR,QAAqC,iBAArC;AACA,OAAOC,eAAP,MAA4B,iCAA5B;AACA,OAAOC,KAAP,MAAkB,aAAlB;;AAEA,MAAMC,mBAAmB,GAAG,CAACC,KAAD,EAAQC,OAAR,KAAoB;EAC9C,MAAM;IACJC,gBADI;IAEJC,KAFI;IAGJC,WAHI;IAIJC,oBAJI;IAKJC,uBALI;IAMJC,OANI;IAOJC,WAPI;IAQJC,uBARI;IASJC,OATI;IAUJC,OAVI;IAWJC,UAXI;IAYJC;EAZI,IAaFb,KAbJ;EAcA,MAAMc,cAAc,GAAG/B,MAAM,CAAC,IAAD,CAA7B;EACA,MAAM;IAACgC;EAAD,IAAcd,OAApB;EACA,MAAM;IAACe,WAAD;IAAcC,gBAAd;IAAgCC,KAAhC;IAAuCC;EAAvC,IAAuDT,OAA7D;EAEA,MAAM,CAACU,sBAAD,EAAyBC,yBAAzB,IAAsDrC,QAAQ,CAAC,KAAD,CAApE;EACA,MAAM,CAACsC,QAAD,EAAWC,WAAX,IAA0BvC,QAAQ,CAAC,KAAD,CAAxC;EAEA,MAAMwC,cAAc,GAAG3C,WAAW,CAAC,MAAM0C,WAAW,CAAC,CAACD,QAAF,CAAlB,EAA+B,CAACC,WAAD,EAAcD,QAAd,CAA/B,CAAlC;EAEAxC,SAAS,CAAC,MAAM;IACd,IAAIgC,cAAc,CAACW,OAAnB,EAA4B;MAC1B,MAAM;QAACC,YAAY,GAAG,CAAhB;QAAmBC,YAAY,GAAG;MAAlC,IAAuCb,cAAc,CAACW,OAA5D;MACAJ,yBAAyB,CAACM,YAAY,GAAGD,YAAhB,CAAzB;IACD;EACF,CALQ,EAKN,CAACtB,WAAD,CALM,CAAT;EAOA,MAAMwB,WAAW,GAAG/C,WAAW,CAAC,MAAM;IACpC,oBACE;MACE,GAAG,EAAEiC,cADP;MAEE,SAAS,EAAE3B,UAAU,CAACW,KAAK,CAACM,WAAP,EAAoB,CAACkB,QAAD,IAAaxB,KAAK,CAAC+B,QAAvC;IAFvB,gBAIE,oBAAC,QAAD,QAAWzB,WAAX,CAJF,CADF;EAQD,CAT8B,EAS5B,CAACkB,QAAD,EAAWlB,WAAX,CAT4B,CAA/B;EAWA,MAAM0B,gBAAgB,GAAG7C,OAAO,CAC9B,MAAM,OAAOgC,gBAAgB,GAAGD,WAApB,GAAmC,GAAzC,CADwB,EAE9B,CAACC,gBAAD,EAAmBD,WAAnB,CAF8B,CAAhC;EAKA,oBACE;IAAK,SAAS,EAAElB,KAAK,CAACiC;EAAtB,gBACE;IAAK,SAAS,EAAEjC,KAAK,CAACkC,SAAtB;IAAiC,aAAW9B;EAA5C,GACG,CAAC,OAAMM,WAAN,CAAD,gBACC,oBAAC,cAAD;IACE,MAAM,EAAC,YADT;IAEE,aAAU,aAFZ;IAGE,cAAYO,SAAS,CAAC,MAAD,CAHvB;IAIE,OAAO,EAAEP,WAJX;IAKE,SAAS,EAAEV,KAAK,CAACmC,UALnB;IAME,gBAAgB,EAAC;EANnB,EADD,GASG,IAVN,eAWE;IAAK,SAAS,EAAEnC,KAAK,CAACoC;EAAtB,gBACE;IAAK,SAAS,EAAEpC,KAAK,CAACqC;EAAtB,gBACE;IAAK,SAAS,EAAErC,KAAK,CAACsC,IAAtB;IAA4B,GAAG,EAAEzB;EAAjC,EADF,CADF,eAIE,8CACE,oBAAC,GAAD;IAAK,KAAK,EAAEI,SAAS,CAAC,eAAD;EAArB,EADF,eAEE;IAAK,SAAS,EAAEjB,KAAK,CAACK;EAAtB,GAA8BA,KAA9B,CAFF,EAGGC,WAAW,gBACV,uDACE,oBAAC,WAAD,OADF,EAEGgB,sBAAsB,gBACrB;IAAK,SAAS,EAAEtB,KAAK,CAACuC,eAAtB;IAAuC,OAAO,EAAEb;EAAhD,GACGT,SAAS,CAACO,QAAQ,GAAG,WAAH,GAAiB,WAA1B,CADZ,eAEE,oBAAC,IAAD;IACE,QAAQ,EAAEA,QAAQ,GAAG,YAAH,GAAkB,cADtC;IAEE,IAAI,EAAE;MAACgB,MAAM,EAAE,EAAT;MAAaC,WAAW,EAAE;IAA1B;EAFR,EAFF,CADqB,GAQnB,IAVN,CADU,GAaR,IAhBN,eAiBE;IAAK,SAAS,EAAEzC,KAAK,CAAC0C;EAAtB,gBACE,kCAAQ,GAAErB,YAAa,IAAG,WAAUJ,SAAS,CAAC,SAAD,CAAnB,CAAgC,EAA1D,CADF,CAjBF,eAoBE,oBAAC,sBAAD;IACE,uBAAuB,EAAET,uBAD3B;IAEE,OAAO,EAAEG;EAFX,EApBF,CAJF,CAXF,eAyCE,oBAAC,eAAD;IACE,KAAK,EAAEM,SAAS,CAAC,eAAD,CADlB;IAEE,QAAQ,EAAEA,SAAS,CAAC,yCAAD,CAFrB;IAGE,WAAW,EAAEC,WAHf;IAIE,gBAAgB,EAAEc,gBAJpB;IAKE,gBAAgB,EAAEb,gBALpB;IAME,QAAQ,EAAE,SAAQ,CAChB;MACEwB,IAAI,EAAE,SADR;MAEEC,WAAW,EAAE9B;IAFf,CADgB,EAKhBC,QAAQ,IAAI;MACV4B,IAAI,EAAE,OADI;MAEVC,WAAW,EAAE7B;IAFH,CALI,EAShB;MACE4B,IAAI,EAAE,OADR;MAEEvB;IAFF,CATgB,CAAR;EANZ,EAzCF,eA8DE,oBAAC,UAAD;IACE,OAAO,EAAEb,oBADX;IAEE,OAAO,EAAEE,OAFX;IAGE,aAAU;EAHZ,EA9DF,CADF,CADF;AAwED,CAvHD;;AAyHAR,mBAAmB,CAAC4C,YAApB,GAAmC;EACjCC,IAAI,EAAEvD,QAAQ,CAACwD,iBAAT,CAA2BD,IADA;EAEjC7B,SAAS,EAAE1B,QAAQ,CAACwD,iBAAT,CAA2B9B;AAFL,CAAnC;AAKAhB,mBAAmB,CAAC+C,SAApB,2CAAgC;EAC9B3C,KAAK,EAAEjB,SAAS,CAAC6D,MAAV,CAAiBC,UADM;EAE9B9C,gBAAgB,EAAEhB,SAAS,CAAC6D,MAAV,CAAiBC,UAFL;EAG9B5C,WAAW,EAAElB,SAAS,CAAC6D,MAAV,CAAiBC,UAHA;EAI9BrC,OAAO,EAAEzB,SAAS,CAAC6D,MAJW;EAK9BrC,OAAO,EAAExB,SAAS,CAAC+D,KAAV,CAAgB;IACvBjC,WAAW,EAAE9B,SAAS,CAACgE,MADA;IAEvBhC,KAAK,EAAEhC,SAAS,CAACgE,MAFM;IAGvBjC,gBAAgB,EAAE/B,SAAS,CAACgE,MAHL;IAIvB/B,YAAY,EAAEjC,SAAS,CAACgE;EAJD,CAAhB,CALqB;EAW9BtC,UAAU,EAAE1B,SAAS,CAAC6D,MAXQ;EAY9BlC,QAAQ,EAAE3B,SAAS,CAAC6D,MAZU;EAa9BzC,uBAAuB,EAAEpB,SAAS,CAACiE,IAbL;EAc9B9C,oBAAoB,EAAEnB,SAAS,CAAC+D,KAAV,CAAgBvD,SAAS,CAACoD,SAA1B,CAdQ;EAe9BvC,OAAO,EAAErB,SAAS,CAAC+D,KAAV,CAAgB;IACvBG,QAAQ,EAAElE,SAAS,CAACmE,IADG;IAEvBC,OAAO,EAAEpE,SAAS,CAACqE,OAAV,CAAkBrE,SAAS,CAAC+D,KAAV,CAAgB1D,qBAAhB,CAAlB;EAFc,CAAhB,CAfqB;EAmB9BiB,WAAW,EAAEtB,SAAS,CAACmE,IAnBO;EAoB9B5C,uBAAuB,EAAEvB,SAAS,CAACmE;AApBL,CAAhC;AAuBA,eAAetD,mBAAf"}

package/es/template/certifications/style.css

@@ -20,7 +20,7 @@
   font-style: normal;
   max-width: 1080px;
   margin: auto;
-  margin-top: 48px;
+  padding-top: 48px;
 }
 
 .sortSection {

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

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

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

@@ -407,8 +407,7 @@ const MyLearning = (props, context) => {
     const {
       score,
       content,
-      questionsToReview,
-      contentCompleted
+      questionsToReview
     } = skillsInformation[skill] ? skillsInformation[skill].stats : defaultStats;
     return /*#__PURE__*/React.createElement("div", {
       key: index
@@ -418,8 +417,7 @@ const MyLearning = (props, context) => {
       metrics: {
         score: score.toFixed(1),
         content,
-        questionsToReview,
-        contentCompleted
+        questionsToReview
       },
       review: skillsInformation[skill] ? skillsInformation[skill].availableForReview : false,
       onReviewClick: handleReviewSkill,