@coorpacademy/components 11.32.35-alpha.7 → 11.32.35

package/es/molecule/discipline-associated-skills/index.d.ts

@@ -10,7 +10,6 @@ declare namespace DisciplineAssociatedSkills {
             locale: PropTypes.Requireable<string>;
             focused: PropTypes.Requireable<boolean>;
         }> | null | undefined)[]>;
-        const skillsBaseUrl: PropTypes.Requireable<string>;
         const onSkillClick: PropTypes.Requireable<(...args: any[]) => any>;
     }
 }

package/es/molecule/discipline-associated-skills/index.d.ts.map

@@ -1 +1 @@
-{"version":3,"file":"index.d.ts","sourceRoot":"","sources":["../../../src/molecule/discipline-associated-skills/index.js"],"names":[],"mappings":";AAUA,0FAgFC"}
+{"version":3,"file":"index.d.ts","sourceRoot":"","sources":["../../../src/molecule/discipline-associated-skills/index.js"],"names":[],"mappings":";AAUA,0FAyEC"}

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

@@ -15,10 +15,8 @@ const DisciplineAssociatedSkills = (props, context) => {
   } = context;
   const {
     skills = [],
-    skillsBaseUrl,
     onSkillClick
   } = props;
-  const hrefFormat = useCallback(skill => skillsBaseUrl ? `${skillsBaseUrl}/${skill.ref}` : '', [skillsBaseUrl]);
   const AnchorElement = useCallback(skill => /*#__PURE__*/React.createElement("div", {
     className: style.chipFocusedContent
   }, skill.focused ? /*#__PURE__*/React.createElement(Icon, {
@@ -41,9 +39,8 @@ const DisciplineAssociatedSkills = (props, context) => {
   }, /*#__PURE__*/React.createElement("div", {
     className: style.chipsWrapper
   }, skills.map(skill => {
-    function handleSkillClick(event) {
-      if (!skillsBaseUrl) event.preventDefault();
-      onSkillClick();
+    function handleSkillClick() {
+      onSkillClick(skill.ref);
     }
 
     function handleAnchorElement() {
@@ -54,8 +51,7 @@ const DisciplineAssociatedSkills = (props, context) => {
       return TooltipContentElement(skill);
     }
 
-    return /*#__PURE__*/React.createElement("a", {
-      href: hrefFormat(skill),
+    return /*#__PURE__*/React.createElement("div", {
       key: _uniqueId(),
       className: classnames(style.chipWrapper, skill.focused && style.chipWrapperFocused),
       onClick: handleSkillClick
@@ -80,7 +76,6 @@ DisciplineAssociatedSkills.propTypes = process.env.NODE_ENV !== "production" ? {
     locale: PropTypes.string,
     focused: PropTypes.bool
   })),
-  skillsBaseUrl: PropTypes.string,
   onSkillClick: PropTypes.func
 } : {};
 export default DisciplineAssociatedSkills;

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

@@ -1 +1 @@
-{"version":3,"file":"index.js","names":["React","useCallback","PropTypes","classnames","Icon","ToolTip","Provider","CatalogSection","style","DisciplineAssociatedSkills","props","context","translate","skills","skillsBaseUrl","onSkillClick","hrefFormat","skill","ref","AnchorElement","chipFocusedContent","focused","faSize","wrapperSize","chipFocusedContentText","locale","TooltipContentElement","tooltipContentWrapper","associatedSkillsWrapper","chipsWrapper","map","handleSkillClick","event","preventDefault","handleAnchorElement","handleTooltipContentElement","chipWrapper","chipWrapperFocused","infoIconTooltip","tooltipSkillFocused","tooltip","contextTypes","childContextTypes","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 = [], skillsBaseUrl, onSkillClick} = props;\n\n  const hrefFormat = useCallback(\n    skill => (skillsBaseUrl ? `${skillsBaseUrl}/${skill.ref}` : ''),\n    [skillsBaseUrl]\n  );\n\n  const AnchorElement = useCallback(\n    skill => (\n      <div className={style.chipFocusedContent}>\n        {skill.focused ? (\n          <Icon\n            iconName=\"bullseye-arrow\"\n            size={{\n              faSize: 12,\n              wrapperSize: 12\n            }}\n          />\n        ) : null}\n        <div className={style.chipFocusedContentText}>{skill.locale}</div>\n      </div>\n    ),\n    []\n  );\n\n  const TooltipContentElement = useCallback(\n    skill => (\n      <div className={style.tooltipContentWrapper}>\n        {skill.focused ? (\n          <div>\n            <b>{translate('skill_focused_chip_tooltip')}</b>\n          </div>\n        ) : null}\n        <div>{skill.locale}</div>\n      </div>\n    ),\n    [translate]\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(event) {\n              if (!skillsBaseUrl) event.preventDefault();\n              onSkillClick();\n            }\n            function handleAnchorElement() {\n              return AnchorElement(skill);\n            }\n            function handleTooltipContentElement() {\n              return TooltipContentElement(skill);\n            }\n            return (\n              <a\n                href={hrefFormat(skill)}\n                key={uniqueId()}\n                className={classnames(style.chipWrapper, skill.focused && style.chipWrapperFocused)}\n                onClick={handleSkillClick}\n              >\n                <ToolTip\n                  AnchorElement={handleAnchorElement}\n                  fontSize={12}\n                  delayHide={0}\n                  iconContainerClassName={style.infoIconTooltip}\n                  tooltipClassName={skill.focused ? style.tooltipSkillFocused : style.tooltip}\n                  TooltipContent={handleTooltipContentElement}\n                  closeToolTipInformationTextAriaLabel={translate('close_tooltip_information')}\n                />\n              </a>\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  skillsBaseUrl: PropTypes.string,\n  onSkillClick: PropTypes.func\n};\n\nexport default DisciplineAssociatedSkills;\n"],"mappings":"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"}
+{"version":3,"file":"index.js","names":["React","useCallback","PropTypes","classnames","Icon","ToolTip","Provider","CatalogSection","style","DisciplineAssociatedSkills","props","context","translate","skills","onSkillClick","AnchorElement","skill","chipFocusedContent","focused","faSize","wrapperSize","chipFocusedContentText","locale","TooltipContentElement","tooltipContentWrapper","associatedSkillsWrapper","chipsWrapper","map","handleSkillClick","ref","handleAnchorElement","handleTooltipContentElement","chipWrapper","chipWrapperFocused","infoIconTooltip","tooltipSkillFocused","tooltip","contextTypes","childContextTypes","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        {skill.focused ? (\n          <Icon\n            iconName=\"bullseye-arrow\"\n            size={{\n              faSize: 12,\n              wrapperSize: 12\n            }}\n          />\n        ) : null}\n        <div className={style.chipFocusedContentText}>{skill.locale}</div>\n      </div>\n    ),\n    []\n  );\n\n  const TooltipContentElement = useCallback(\n    skill => (\n      <div className={style.tooltipContentWrapper}>\n        {skill.focused ? (\n          <div>\n            <b>{translate('skill_focused_chip_tooltip')}</b>\n          </div>\n        ) : null}\n        <div>{skill.locale}</div>\n      </div>\n    ),\n    [translate]\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              onSkillClick(skill.ref);\n            }\n            function handleAnchorElement() {\n              return AnchorElement(skill);\n            }\n            function handleTooltipContentElement() {\n              return TooltipContentElement(skill);\n            }\n            return (\n              <div\n                key={uniqueId()}\n                className={classnames(style.chipWrapper, skill.focused && style.chipWrapperFocused)}\n                onClick={handleSkillClick}\n              >\n                <ToolTip\n                  AnchorElement={handleAnchorElement}\n                  fontSize={12}\n                  delayHide={0}\n                  iconContainerClassName={style.infoIconTooltip}\n                  tooltipClassName={skill.focused ? style.tooltipSkillFocused : style.tooltip}\n                  TooltipContent={handleTooltipContentElement}\n                  closeToolTipInformationTextAriaLabel={translate('close_tooltip_information')}\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":"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"}

package/es/molecule/progress-wrapper/index.d.ts

@@ -1,7 +1,7 @@
 export default ProgressWrapper;
-declare function ProgressWrapper({ completedModules, mandatoryModules, title, subtitle, progression, sections }: {
+declare function ProgressWrapper({ completedCourses, completedModules, title, subtitle, progression, sections }: {
+    completedCourses: any;
     completedModules: any;
-    mandatoryModules: any;
     title: any;
     subtitle: any;
     progression: any;
@@ -14,12 +14,13 @@ declare namespace ProgressWrapper {
     namespace propTypes {
         const title: PropTypes.Requireable<string>;
         const subtitle: PropTypes.Requireable<string>;
+        const completedCourses: PropTypes.Requireable<number>;
         const completedModules: PropTypes.Requireable<number>;
-        const mandatoryModules: PropTypes.Requireable<number>;
         const progression: PropTypes.Requireable<number>;
         const sections: PropTypes.Requireable<(PropTypes.InferProps<{
             type: PropTypes.Requireable<string>;
-            downloadUrl: PropTypes.Requireable<string>;
+            badgeUrl: PropTypes.Requireable<string>;
+            onDownload: PropTypes.Requireable<(...args: any[]) => any>;
             stars: PropTypes.Requireable<number>;
         }> | null | undefined)[]>;
     }

package/es/molecule/progress-wrapper/index.d.ts.map

@@ -1 +1 @@
-{"version":3,"file":"index.d.ts","sourceRoot":"","sources":["../../../src/molecule/progress-wrapper/index.js"],"names":[],"mappings":";AA6FA;;;;;;;8BAuDC"}
+{"version":3,"file":"index.d.ts","sourceRoot":"","sources":["../../../src/molecule/progress-wrapper/index.js"],"names":[],"mappings":";AAyFA;;;;;;;8BA8DC"}

package/es/molecule/progress-wrapper/index.js

@@ -1,4 +1,5 @@
 import _map from "lodash/fp/map";
+import _lowerCase from "lodash/fp/lowerCase";
 import _isEmpty from "lodash/fp/isEmpty";
 
 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); }
@@ -23,7 +24,8 @@ const DetailSection = ({
   index,
   type,
   isLocked,
-  downloadUrl,
+  badgeUrl,
+  onDownload,
   stars
 }, context) => {
   const {
@@ -32,10 +34,7 @@ const DetailSection = ({
   const isTypeStars = type === 'stars';
   const DownloadButton = /*#__PURE__*/React.createElement(ButtonLink, {
     label: translate('download'),
-    link: {
-      target: '_blank',
-      href: downloadUrl
-    },
+    onClick: onDownload,
     "data-name": "download-button",
     "aria-label": "download button",
     customStyle: {
@@ -87,7 +86,7 @@ const DetailSection = ({
     className: style[`detailsSection${index}`]
   }, /*#__PURE__*/React.createElement("img", {
     className: style.img,
-    src: type === 'badge' ? downloadUrl : 'https://s3.eu-west-1.amazonaws.com/static.coorpacademy.com/assets/images/diploma.svg'
+    src: badgeUrl || 'https://s3.eu-west-1.amazonaws.com/static.coorpacademy.com/assets/images/diploma.svg'
   }), /*#__PURE__*/React.createElement("div", {
     className: style.detailsInfo
   }, /*#__PURE__*/React.createElement("div", {
@@ -100,8 +99,8 @@ const DetailSection = ({
 };
 
 const ProgressWrapper = ({
+  completedCourses,
   completedModules,
-  mandatoryModules,
   title,
   subtitle,
   progression,
@@ -110,7 +109,7 @@ const ProgressWrapper = ({
   const {
     translate
   } = context;
-  const mandatoryCompletedModulesLocal = translate('modules_completed_mandatory');
+  const modulesCompletedLocal = translate('modules_completed');
   const isLocked = progression !== 100;
   return /*#__PURE__*/React.createElement("div", {
     className: style.container
@@ -127,7 +126,13 @@ const ProgressWrapper = ({
     className: style.stats
   }, /*#__PURE__*/React.createElement("div", null, /*#__PURE__*/React.createElement("span", {
     className: style.statsNumber
-  }, `${completedModules > mandatoryModules ? mandatoryModules : completedModules} / ${mandatoryModules}`), mandatoryCompletedModulesLocal)), /*#__PURE__*/React.createElement("div", {
+  }, completedCourses), _lowerCase(translate('courses_completed'))), /*#__PURE__*/React.createElement("div", {
+    className: style.divider
+  }), /*#__PURE__*/React.createElement("div", {
+    className: style.statsModule
+  }, /*#__PURE__*/React.createElement("span", {
+    className: style.statsNumber
+  }, completedModules), modulesCompletedLocal)), /*#__PURE__*/React.createElement("div", {
     className: style.progression
   }, /*#__PURE__*/React.createElement("span", {
     className: style.statsNumber
@@ -140,19 +145,27 @@ const ProgressWrapper = ({
     value: progression,
     max: 100
   }), /*#__PURE__*/React.createElement("div", {
+    className: style.statsMobile
+  }, /*#__PURE__*/React.createElement("div", {
+    className: style.statsModuleMobile
+  }, /*#__PURE__*/React.createElement("span", {
+    className: style.statsNumber
+  }, completedModules), modulesCompletedLocal), /*#__PURE__*/React.createElement("div", {
     className: style.statsProgressionMobile
   }, /*#__PURE__*/React.createElement("span", {
     className: style.statsNumber
-  }, progression, "%")), _isEmpty(sections) ? null : /*#__PURE__*/React.createElement("div", {
+  }, progression, "%"))), _isEmpty(sections) ? null : /*#__PURE__*/React.createElement("div", {
     className: style.details
   }, uncappedMap(({
     type,
     stars,
-    downloadUrl
+    badgeUrl,
+    onDownload
   }, index) => /*#__PURE__*/React.createElement(DetailSection, {
     type,
     isLocked,
-    downloadUrl,
+    badgeUrl,
+    onDownload,
     stars,
     key: `${type}-${index}`,
     index: index
@@ -161,7 +174,8 @@ const ProgressWrapper = ({
 
 const commonDetailSectionPropTypes = process.env.NODE_ENV !== "production" ? {
   type: PropTypes.oneOf(['diploma', 'badge', 'stars']),
-  downloadUrl: PropTypes.string,
+  badgeUrl: PropTypes.string,
+  onDownload: PropTypes.func,
   stars: PropTypes.number
 } : {};
 DetailSection.contextTypes = {
@@ -177,8 +191,8 @@ ProgressWrapper.contextTypes = {
 ProgressWrapper.propTypes = process.env.NODE_ENV !== "production" ? {
   title: PropTypes.string,
   subtitle: PropTypes.string,
+  completedCourses: PropTypes.number,
   completedModules: PropTypes.number,
-  mandatoryModules: PropTypes.number,
   progression: PropTypes.number,
   sections: PropTypes.arrayOf(PropTypes.shape(commonDetailSectionPropTypes))
 } : {};

package/es/molecule/progress-wrapper/index.js.map

@@ -1 +1 @@
-{"version":3,"file":"index.js","names":["React","PropTypes","Title","ProgressBar","COLORS","Tag","ButtonLink","Icon","Provider","style","uncappedMap","convert","cap","DetailSection","index","type","isLocked","downloadUrl","stars","context","translate","isTypeStars","DownloadButton","target","href","backgroundColor","color","position","faIcon","name","size","customStyle","padding","LockedTag","iconName","iconColor","preset","detailsInfo","detailsInfoText","detailsTitle","img","buttonContainer","ProgressWrapper","completedModules","mandatoryModules","title","subtitle","progression","sections","mandatoryCompletedModulesLocal","container","titleContainer","statscontainer","stats","statsNumber","customProgressBar","positive","statsProgressionMobile","details","commonDetailSectionPropTypes","oneOf","string","number","contextTypes","childContextTypes","propTypes","bool","arrayOf","shape"],"sources":["../../../src/molecule/progress-wrapper/index.js"],"sourcesContent":["import React from 'react';\nimport PropTypes from 'prop-types';\nimport {isEmpty, map} from 'lodash/fp';\nimport Title from '../../atom/title';\nimport ProgressBar from '../progress-bar';\nimport {COLORS} from '../../variables/colors';\nimport Tag from '../../atom/tag';\nimport ButtonLink from '../../atom/button-link';\nimport Icon from '../../atom/icon';\nimport Provider from '../../atom/provider';\n// eslint-disable-next-line css-modules/no-unused-class\nimport style from './style.css';\n\nconst uncappedMap = map.convert({cap: false});\n\nconst DetailSection = ({index, type, isLocked, downloadUrl, stars}, context) => {\n  const {translate} = context;\n  const isTypeStars = type === 'stars';\n\n  const DownloadButton = (\n    <ButtonLink\n      label={translate('download')}\n      link={{\n        target: '_blank',\n        href: downloadUrl\n      }}\n      data-name=\"download-button\"\n      aria-label=\"download button\"\n      customStyle={{backgroundColor: '#F1F6FE', color: '#0061FF'}}\n      icon={{\n        position: 'left',\n        faIcon: {\n          name: 'download',\n          color: '#0061FF',\n          size: 14,\n          customStyle: {padding: 0}\n        }\n      }}\n      disabled={isLocked}\n    />\n  );\n\n  const LockedTag = (\n    <Tag\n      label=\"Locked\"\n      size=\"S\"\n      icon={{\n        position: 'left',\n        iconName: 'lock',\n        iconColor: '#515161',\n        preset: 's',\n        customStyle: {padding: 0}\n      }}\n    />\n  );\n\n  return isTypeStars ? (\n    <div className={style[`detailsSection${index}`]}>\n      <div className={style.detailsInfo}>\n        <div className={style.detailsInfoText}>\n          <span className={style.detailsTitle}>{translate('bonus_stars')}</span>\n          {isLocked ? LockedTag : null}\n        </div>\n        <div className={style.stars}>\n          <Icon iconName=\"star\" iconColor=\"#FFCE0A\" backgroundColor=\"#FFF9D1\" preset=\"xl\" />\n          <span>{stars}</span>\n        </div>\n      </div>\n    </div>\n  ) : (\n    <div className={style[`detailsSection${index}`]}>\n      <img\n        className={style.img}\n        src={\n          type === 'badge'\n            ? downloadUrl\n            : 'https://s3.eu-west-1.amazonaws.com/static.coorpacademy.com/assets/images/diploma.svg'\n        }\n      />\n      <div className={style.detailsInfo}>\n        <div className={style.detailsInfoText}>\n          <span className={style.detailsTitle}>\n            {type === 'diploma' ? translate('diploma') : translate('badge')}\n          </span>\n          {isLocked ? LockedTag : null}\n        </div>\n\n        <div className={style.buttonContainer}>{DownloadButton}</div>\n      </div>\n    </div>\n  );\n};\n\nconst ProgressWrapper = (\n  {completedModules, mandatoryModules, title, subtitle, progression, sections},\n  context\n) => {\n  const {translate} = context;\n  const mandatoryCompletedModulesLocal = translate('modules_completed_mandatory');\n  const isLocked = progression !== 100;\n\n  return (\n    <div className={style.container}>\n      <div className={style.titleContainer}>\n        <Title type=\"form-group\" titleSize=\"medium\" title={title} subtitle={subtitle} />\n      </div>\n      <div className={style.statscontainer}>\n        <div className={style.stats}>\n          <div>\n            <span className={style.statsNumber}>\n              {`${\n                completedModules > mandatoryModules ? mandatoryModules : completedModules\n              } / ${mandatoryModules}`}\n            </span>\n            {mandatoryCompletedModulesLocal}\n          </div>\n        </div>\n        <div className={style.progression}>\n          <span className={style.statsNumber}>{progression}%</span>\n        </div>\n      </div>\n      <ProgressBar\n        className={style.customProgressBar}\n        style={{backgroundColor: COLORS.positive}}\n        displayInfo={false}\n        value={progression}\n        max={100}\n      />\n      <div className={style.statsProgressionMobile}>\n        <span className={style.statsNumber}>{progression}%</span>\n      </div>\n\n      {isEmpty(sections) ? null : (\n        <div className={style.details}>\n          {uncappedMap(\n            ({type, stars, downloadUrl}, index) => (\n              <DetailSection\n                {...{type, isLocked, downloadUrl, stars}}\n                key={`${type}-${index}`}\n                index={index}\n              />\n            ),\n            sections\n          )}\n        </div>\n      )}\n    </div>\n  );\n};\n\nconst commonDetailSectionPropTypes = {\n  type: PropTypes.oneOf(['diploma', 'badge', 'stars']),\n  downloadUrl: PropTypes.string,\n  stars: PropTypes.number\n};\n\nDetailSection.contextTypes = {\n  translate: Provider.childContextTypes.translate\n};\n\nDetailSection.propTypes = {\n  index: PropTypes.number,\n  isLocked: PropTypes.bool,\n  ...commonDetailSectionPropTypes\n};\n\nProgressWrapper.contextTypes = {\n  translate: Provider.childContextTypes.translate\n};\n\nProgressWrapper.propTypes = {\n  title: PropTypes.string,\n  subtitle: PropTypes.string,\n  completedModules: PropTypes.number,\n  mandatoryModules: PropTypes.number,\n  progression: PropTypes.number,\n  sections: PropTypes.arrayOf(PropTypes.shape(commonDetailSectionPropTypes))\n};\n\nexport default ProgressWrapper;\n"],"mappings":"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"}
+{"version":3,"file":"index.js","names":["React","PropTypes","Title","ProgressBar","COLORS","Tag","ButtonLink","Icon","Provider","style","uncappedMap","convert","cap","DetailSection","index","type","isLocked","badgeUrl","onDownload","stars","context","translate","isTypeStars","DownloadButton","backgroundColor","color","position","faIcon","name","size","customStyle","padding","LockedTag","iconName","iconColor","preset","detailsInfo","detailsInfoText","detailsTitle","img","buttonContainer","ProgressWrapper","completedCourses","completedModules","title","subtitle","progression","sections","modulesCompletedLocal","container","titleContainer","statscontainer","stats","statsNumber","divider","statsModule","customProgressBar","positive","statsMobile","statsModuleMobile","statsProgressionMobile","details","commonDetailSectionPropTypes","oneOf","string","func","number","contextTypes","childContextTypes","propTypes","bool","arrayOf","shape"],"sources":["../../../src/molecule/progress-wrapper/index.js"],"sourcesContent":["import React from 'react';\nimport PropTypes from 'prop-types';\nimport {isEmpty, lowerCase, map} from 'lodash/fp';\nimport Title from '../../atom/title';\nimport ProgressBar from '../progress-bar';\nimport {COLORS} from '../../variables/colors';\nimport Tag from '../../atom/tag';\nimport ButtonLink from '../../atom/button-link';\nimport Icon from '../../atom/icon';\nimport Provider from '../../atom/provider';\n// eslint-disable-next-line css-modules/no-unused-class\nimport style from './style.css';\n\nconst uncappedMap = map.convert({cap: false});\n\nconst DetailSection = ({index, type, isLocked, badgeUrl, onDownload, stars}, context) => {\n  const {translate} = context;\n  const isTypeStars = type === 'stars';\n\n  const DownloadButton = (\n    <ButtonLink\n      label={translate('download')}\n      onClick={onDownload}\n      data-name=\"download-button\"\n      aria-label=\"download button\"\n      customStyle={{backgroundColor: '#F1F6FE', color: '#0061FF'}}\n      icon={{\n        position: 'left',\n        faIcon: {\n          name: 'download',\n          color: '#0061FF',\n          size: 14,\n          customStyle: {padding: 0}\n        }\n      }}\n      disabled={isLocked}\n    />\n  );\n\n  const LockedTag = (\n    <Tag\n      label=\"Locked\"\n      size=\"S\"\n      icon={{\n        position: 'left',\n        iconName: 'lock',\n        iconColor: '#515161',\n        preset: 's',\n        customStyle: {padding: 0}\n      }}\n    />\n  );\n\n  return isTypeStars ? (\n    <div className={style[`detailsSection${index}`]}>\n      <div className={style.detailsInfo}>\n        <div className={style.detailsInfoText}>\n          <span className={style.detailsTitle}>{translate('bonus_stars')}</span>\n          {isLocked ? LockedTag : null}\n        </div>\n        <div className={style.stars}>\n          <Icon iconName=\"star\" iconColor=\"#FFCE0A\" backgroundColor=\"#FFF9D1\" preset=\"xl\" />\n          <span>{stars}</span>\n        </div>\n      </div>\n    </div>\n  ) : (\n    <div className={style[`detailsSection${index}`]}>\n      <img\n        className={style.img}\n        src={\n          badgeUrl ||\n          'https://s3.eu-west-1.amazonaws.com/static.coorpacademy.com/assets/images/diploma.svg'\n        }\n      />\n      <div className={style.detailsInfo}>\n        <div className={style.detailsInfoText}>\n          <span className={style.detailsTitle}>\n            {type === 'diploma' ? translate('diploma') : translate('badge')}\n          </span>\n          {isLocked ? LockedTag : null}\n        </div>\n\n        <div className={style.buttonContainer}>{DownloadButton}</div>\n      </div>\n    </div>\n  );\n};\n\nconst ProgressWrapper = (\n  {completedCourses, completedModules, title, subtitle, progression, sections},\n  context\n) => {\n  const {translate} = context;\n  const modulesCompletedLocal = translate('modules_completed');\n  const isLocked = progression !== 100;\n\n  return (\n    <div className={style.container}>\n      <div className={style.titleContainer}>\n        <Title type=\"form-group\" titleSize=\"medium\" title={title} subtitle={subtitle} />\n      </div>\n      <div className={style.statscontainer}>\n        <div className={style.stats}>\n          <div>\n            <span className={style.statsNumber}>{completedCourses}</span>\n            {lowerCase(translate('courses_completed'))}\n          </div>\n          <div className={style.divider} />\n          <div className={style.statsModule}>\n            <span className={style.statsNumber}>{completedModules}</span>\n            {modulesCompletedLocal}\n          </div>\n        </div>\n        <div className={style.progression}>\n          <span className={style.statsNumber}>{progression}%</span>\n        </div>\n      </div>\n      <ProgressBar\n        className={style.customProgressBar}\n        style={{backgroundColor: COLORS.positive}}\n        displayInfo={false}\n        value={progression}\n        max={100}\n      />\n      <div className={style.statsMobile}>\n        <div className={style.statsModuleMobile}>\n          <span className={style.statsNumber}>{completedModules}</span>\n          {modulesCompletedLocal}\n        </div>\n        <div className={style.statsProgressionMobile}>\n          <span className={style.statsNumber}>{progression}%</span>\n        </div>\n      </div>\n\n      {isEmpty(sections) ? null : (\n        <div className={style.details}>\n          {uncappedMap(\n            ({type, stars, badgeUrl, onDownload}, index) => (\n              <DetailSection\n                {...{type, isLocked, badgeUrl, onDownload, stars}}\n                key={`${type}-${index}`}\n                index={index}\n              />\n            ),\n            sections\n          )}\n        </div>\n      )}\n    </div>\n  );\n};\n\nconst commonDetailSectionPropTypes = {\n  type: PropTypes.oneOf(['diploma', 'badge', 'stars']),\n  badgeUrl: PropTypes.string,\n  onDownload: PropTypes.func,\n  stars: PropTypes.number\n};\n\nDetailSection.contextTypes = {\n  translate: Provider.childContextTypes.translate\n};\n\nDetailSection.propTypes = {\n  index: PropTypes.number,\n  isLocked: PropTypes.bool,\n  ...commonDetailSectionPropTypes\n};\n\nProgressWrapper.contextTypes = {\n  translate: Provider.childContextTypes.translate\n};\n\nProgressWrapper.propTypes = {\n  title: PropTypes.string,\n  subtitle: PropTypes.string,\n  completedCourses: PropTypes.number,\n  completedModules: PropTypes.number,\n  progression: PropTypes.number,\n  sections: PropTypes.arrayOf(PropTypes.shape(commonDetailSectionPropTypes))\n};\n\nexport default ProgressWrapper;\n"],"mappings":"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"}

package/es/molecule/progress-wrapper/style.css

@@ -41,6 +41,14 @@
   gap: 16px;
 }
 
+.divider {
+  width: 4px;
+  height: 4px;
+  background-color: #d7d7da;
+  border: solid #d7d7da 1px;
+  border-radius: 4px;
+}
+
 .progression {
   display: flex;
   justify-content: end;
@@ -121,6 +129,10 @@
   font-weight: 700;
 }
 
+.statsMobile {
+  display: none;
+}
+
 .statsModuleMobile {
   display: none;
 }
@@ -128,9 +140,6 @@
 .statsProgressionMobile {
   composes: progression;
   display: none;
-  color: cm_grey_400;
-  font-weight: 600;
-  padding-top: 16px;
 }
 
 @media mobile, tablet {
@@ -151,6 +160,12 @@
    justify-content: space-around;
    gap: 0;
   }
+  .divider {
+    display: none;
+  }
+  .statsModule {
+    display: none;
+  }
   .progression {
     display: none;
   }
@@ -160,4 +175,11 @@
   .statsModuleMobile {
     display: block;
   }
+  .statsMobile {
+    display: flex;
+    justify-content: space-between;
+    padding-top: 16px;
+    color: cm_grey_400;
+    font-weight: 600;
+  }    
 }

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

@@ -33,12 +33,21 @@ declare namespace CertificationDetail {
         const metrics: PropTypes.Requireable<PropTypes.InferProps<{
             progression: PropTypes.Requireable<number>;
             stars: PropTypes.Requireable<number>;
-            mandatoryModules: PropTypes.Requireable<number>;
-            totalModules: PropTypes.Requireable<number>;
+            completedCourses: PropTypes.Requireable<number>;
+            completedModules: PropTypes.Requireable<number>;
+        }>>;
+        const onDownloadDiploma: PropTypes.Requireable<(...args: any[]) => any>;
+        const badge: PropTypes.Requireable<PropTypes.InferProps<{
+            badgeUrl: PropTypes.Requireable<string>;
+            onDownloadBadge: PropTypes.Requireable<(...args: any[]) => any>;
+        }>>;
+        const ongoingCourses: PropTypes.Requireable<PropTypes.InferProps<{
+            list: PropTypes.Requireable<(PropTypes.InferProps<any> | null | undefined)[]>;
+            customStyle: PropTypes.Requireable<{
+                [x: string]: string | null | undefined;
+            }>;
+            loading: PropTypes.Requireable<boolean>;
         }>>;
-        const diplomaUrl: PropTypes.Requireable<string>;
-        const badgeUrl: PropTypes.Requireable<string>;
-        const ongoingCoursesAvailable: PropTypes.Requireable<boolean>;
         const certificationCourses: PropTypes.Requireable<PropTypes.InferProps<{
             list: PropTypes.Requireable<(PropTypes.InferProps<any> | null | undefined)[]>;
             customStyle: PropTypes.Requireable<{
@@ -46,6 +55,8 @@ declare namespace CertificationDetail {
             }>;
             loading: PropTypes.Requireable<boolean>;
         }>>;
+        const totalCourses: PropTypes.Requireable<number>;
+        const totalModules: PropTypes.Requireable<number>;
         const filters: PropTypes.Requireable<PropTypes.InferProps<{
             onChange: PropTypes.Requireable<(...args: any[]) => any>;
             options: PropTypes.Requireable<(PropTypes.InferProps<{
@@ -55,6 +66,37 @@ declare namespace CertificationDetail {
                 validOption: PropTypes.Requireable<boolean>;
             }> | null | undefined)[]>;
         }>>;
+        const sorting: PropTypes.Requireable<PropTypes.InferProps<{
+            title: PropTypes.Requireable<string>;
+            name: PropTypes.Requireable<string>;
+            className: PropTypes.Requireable<string>;
+            borderClassName: PropTypes.Requireable<string>;
+            disabled: PropTypes.Requireable<boolean>;
+            multiple: PropTypes.Requireable<boolean>;
+            description: PropTypes.Requireable<string>;
+            required: PropTypes.Requireable<boolean>;
+            onChange: PropTypes.Requireable<(...args: any[]) => any>;
+            theme: PropTypes.Requireable<string>;
+            options: PropTypes.Requireable<(PropTypes.InferProps<{
+                name: PropTypes.Validator<string>;
+                value: PropTypes.Requireable<NonNullable<string | number | null | undefined>>;
+                selected: PropTypes.Requireable<boolean>;
+                validOption: PropTypes.Requireable<boolean>;
+            }> | null | undefined)[]>;
+            optgroups: PropTypes.Requireable<(PropTypes.InferProps<{
+                label: PropTypes.Validator<string>;
+                options: PropTypes.Requireable<(PropTypes.InferProps<{
+                    name: PropTypes.Validator<string>;
+                    value: PropTypes.Requireable<NonNullable<string | number | null | undefined>>;
+                    selected: PropTypes.Requireable<boolean>;
+                    validOption: PropTypes.Requireable<boolean>;
+                }> | null | undefined)[]>;
+            }> | null | undefined)[]>;
+            modified: PropTypes.Requireable<boolean>;
+            error: PropTypes.Requireable<boolean>;
+            'aria-label': PropTypes.Requireable<string>;
+            'aria-labelledby': PropTypes.Requireable<string>;
+        }>>;
         const onBackClick: PropTypes.Requireable<(...args: any[]) => any>;
         const onContinueLearningClick: PropTypes.Requireable<(...args: any[]) => any>;
     }

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

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

@@ -1,6 +1,3 @@
-import _size from "lodash/fp/size";
-import _get from "lodash/fp/get";
-import _pipe from "lodash/fp/pipe";
 import _lowerCase from "lodash/fp/lowerCase";
 import _compact from "lodash/fp/compact";
 import React, { useCallback, useState } from 'react';
@@ -8,11 +5,12 @@ import PropTypes from 'prop-types';
 import classnames from 'classnames';
 import Provider from '../../atom/provider';
 import Tag from '../../atom/tag';
-import { SelectOptionPropTypes } from '../../atom/select';
+import Select, { SelectOptionPropTypes } from '../../atom/select';
 import ButtonLinkIcon from '../../atom/button-link-icon';
 import Icon from '../../atom/icon';
 import CardsGrid from '../../organism/cards-grid';
 import AllCourses from '../skill-detail/all-courses';
+import ContinueLearning from '../skill-detail/continue-learning';
 import { ContinueLearningButton } from '../skill-detail';
 import ProgressWrapper from '../../molecule/progress-wrapper';
 import style from './style.css';
@@ -24,24 +22,31 @@ const CertificationDetail = (props, context) => {
     title,
     description,
     certificationCourses,
-    ongoingCoursesAvailable,
+    ongoingCourses,
+    totalCourses,
+    totalModules,
     filters,
+    sorting,
     onBackClick,
     onContinueLearningClick,
     metrics,
     logoUrl,
-    diplomaUrl,
-    badgeUrl
+    onDownloadDiploma,
+    badge = {}
   } = props;
   const {
     translate
   } = context;
   const {
     progression,
-    mandatoryModules,
-    stars,
-    totalModules
+    completedCourses,
+    completedModules,
+    stars
   } = metrics;
+  const {
+    badgeUrl = false,
+    onDownloadBadge
+  } = badge;
   const [showMore, setShowMore] = useState(false);
   const handleShowMore = useCallback(() => setShowMore(!showMore), [setShowMore, showMore]);
   const Description = useCallback(() => {
@@ -49,10 +54,6 @@ const CertificationDetail = (props, context) => {
       className: classnames(style.description, !showMore && style.truncate)
     }, description);
   }, [showMore, description]);
-
-  const totalCourses = _pipe(_get('list'), _size)(certificationCourses);
-
-  const completedModules = mandatoryModules * progression / 100;
   return /*#__PURE__*/React.createElement("div", {
     className: style.backgroundContainer
   }, /*#__PURE__*/React.createElement("div", {
@@ -87,21 +88,28 @@ const CertificationDetail = (props, context) => {
     }
   })) : null) : null, /*#__PURE__*/React.createElement("div", {
     className: style.contentStats
-  }, /*#__PURE__*/React.createElement("span", null, `${totalModules} ${_lowerCase(translate('modules'))}`)), /*#__PURE__*/React.createElement(ContinueLearningButton, {
-    ongoingCoursesAvailable: ongoingCoursesAvailable,
+  }, /*#__PURE__*/React.createElement("span", null, `${totalCourses} ${_lowerCase(translate('courses'))}`), /*#__PURE__*/React.createElement("div", {
+    className: style.divider
+  }), /*#__PURE__*/React.createElement("span", null, `${totalModules} ${_lowerCase(translate('modules'))}`)), /*#__PURE__*/React.createElement(ContinueLearningButton, {
+    ongoingCoursesAvailable: !!ongoingCourses.list.length,
     onClick: onContinueLearningClick
-  }))), /*#__PURE__*/React.createElement(ProgressWrapper, {
+  }))), /*#__PURE__*/React.createElement("div", {
+    className: style.continueLearningSection
+  }, /*#__PURE__*/React.createElement(ContinueLearning, {
+    ongoingCourses: ongoingCourses
+  })), /*#__PURE__*/React.createElement(ProgressWrapper, {
     title: translate('your_progress'),
     subtitle: translate('certification_progress_wrapper_subtitle'),
     progression: progression,
+    completedCourses: completedCourses,
     completedModules: completedModules,
-    mandatoryModules: mandatoryModules,
     sections: _compact([{
       type: 'diploma',
-      downloadUrl: diplomaUrl
+      onDownload: () => onDownloadDiploma
     }, badgeUrl && {
       type: 'badge',
-      downloadUrl: badgeUrl
+      badgeUrl,
+      onDownload: () => onDownloadBadge
     }, {
       type: 'stars',
       stars
@@ -109,7 +117,8 @@ const CertificationDetail = (props, context) => {
   }), /*#__PURE__*/React.createElement(AllCourses, {
     courses: certificationCourses,
     totalCourses: totalCourses,
-    filters: filters
+    filters: filters,
+    sorting: sorting
   })));
 };
 
@@ -125,17 +134,23 @@ CertificationDetail.propTypes = process.env.NODE_ENV !== "production" ? {
   metrics: PropTypes.shape({
     progression: PropTypes.number,
     stars: PropTypes.number,
-    mandatoryModules: PropTypes.number,
-    totalModules: PropTypes.number
+    completedCourses: PropTypes.number,
+    completedModules: PropTypes.number
+  }),
+  onDownloadDiploma: PropTypes.func,
+  badge: PropTypes.shape({
+    badgeUrl: PropTypes.string,
+    onDownloadBadge: PropTypes.func
   }),
-  diplomaUrl: PropTypes.string,
-  badgeUrl: PropTypes.string,
-  ongoingCoursesAvailable: PropTypes.bool,
+  ongoingCourses: PropTypes.shape(CardsGrid.propTypes),
   certificationCourses: PropTypes.shape(CardsGrid.propTypes),
+  totalCourses: PropTypes.number,
+  totalModules: PropTypes.number,
   filters: PropTypes.shape({
     onChange: PropTypes.func,
     options: PropTypes.arrayOf(PropTypes.shape(SelectOptionPropTypes))
   }),
+  sorting: PropTypes.shape(Select.propTypes),
   onBackClick: PropTypes.func,
   onContinueLearningClick: PropTypes.func
 } : {};