@coorpacademy/components 11.32.42 → 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/certification-card/index.d.ts.map

@@ -1 +1 @@
-{"version":3,"file":"index.d.ts","sourceRoot":"","sources":["../../../src/molecule/certification-card/index.js"],"names":[],"mappings":";AAQA,0EAwDC"}
+{"version":3,"file":"index.d.ts","sourceRoot":"","sources":["../../../src/molecule/certification-card/index.js"],"names":[],"mappings":";AAQA,0EA0DC"}

package/es/molecule/certification-card/index.js

@@ -53,10 +53,12 @@ const CertificationCard = (props, context) => {
     },
     icon: progressIconProps
   }) : null, /*#__PURE__*/React.createElement("div", {
-    className: style.imageWrapper
+    className: style.imageSection
+  }, /*#__PURE__*/React.createElement("div", {
+    className: style.imageContainer
   }, /*#__PURE__*/React.createElement("img", {
     src: imgUrl
-  })), /*#__PURE__*/React.createElement("div", {
+  }))), /*#__PURE__*/React.createElement("div", {
     className: style.detailWrapper
   }, /*#__PURE__*/React.createElement("div", {
     className: style.titleWrapper

package/es/molecule/certification-card/index.js.map

@@ -1 +1 @@
-{"version":3,"file":"index.js","names":["React","PropTypes","COLORS","Provider","Tag","ProgressBar","style","CertificationCard","props","context","label","goal","progress","imgUrl","onClick","title","condition","nbDone","translate","isInprogress","progressLabel","progressTagType","progressIconProps","position","iconName","iconColor","backgroundColor","size","faSize","wrapperSize","customStyle","padding","container","top","right","imageWrapper","detailWrapper","titleWrapper","moduleCount","customProgressBar","positive","contextTypes","childContextTypes","propTypes","string","shape","number","func"],"sources":["../../../src/molecule/certification-card/index.js"],"sourcesContent":["import React from 'react';\nimport PropTypes from 'prop-types';\nimport {COLORS} from '../../variables/colors';\nimport Provider from '../../atom/provider';\nimport Tag from '../../atom/tag';\nimport ProgressBar from '../progress-bar';\nimport style from './style.css';\n\nconst CertificationCard = (props, context) => {\n  const {label, goal, progress, imgUrl, onClick} = props;\n  const {\n    title,\n    condition: {nbDone}\n  } = goal;\n  const {translate} = context;\n\n  const isInprogress = progress < 100;\n  const progressLabel = isInprogress ? translate('in_progress') : translate('completed');\n  const progressTagType = isInprogress ? 'progress' : 'success';\n  const progressIconProps = {\n    position: 'left',\n    iconName: isInprogress ? 'clock' : 'circle-check',\n    iconColor: isInprogress ? '#B87A00' : '#05944F',\n    backgroundColor: isInprogress ? '#FFEECC' : '#D6F5E5',\n    size: {\n      faSize: 10,\n      wrapperSize: 10\n    },\n    customStyle: {padding: 0}\n  };\n  return (\n    <div className={style.container} data-name={`certification-card-${label}`} onClick={onClick}>\n      {progress > 0 ? (\n        <Tag\n          label={progressLabel}\n          type={progressTagType}\n          customStyle={{position: 'absolute', top: '12px', right: '12px'}}\n          icon={progressIconProps}\n        />\n      ) : null}\n      <div className={style.imageWrapper}>\n        <img src={imgUrl} />\n      </div>\n      <div className={style.detailWrapper}>\n        <div className={style.titleWrapper}>\n          <Tag label={translate('certification')} size=\"S\" />\n          <div className={style.title} data-name=\"certification-title\">\n            {title}\n          </div>\n          <div className={style.moduleCount}>\n            <span>{nbDone}</span>\n            {` ${translate('certification_module')}`}\n          </div>\n        </div>\n        <ProgressBar\n          className={style.customProgressBar}\n          style={{backgroundColor: COLORS.positive}}\n          displayInfo={false}\n          value={progress}\n          max={100}\n        />\n      </div>\n    </div>\n  );\n};\n\nCertificationCard.contextTypes = {\n  translate: Provider.childContextTypes.translate\n};\n\nCertificationCard.propTypes = {\n  label: PropTypes.string,\n  goal: PropTypes.shape({\n    title: PropTypes.string,\n    condition: PropTypes.shape({\n      nbDone: PropTypes.number\n    })\n  }),\n  progress: PropTypes.number,\n  imgUrl: PropTypes.string,\n  onClick: PropTypes.func\n};\n\nexport default CertificationCard;\n"],"mappings":"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"}
+{"version":3,"file":"index.js","names":["React","PropTypes","COLORS","Provider","Tag","ProgressBar","style","CertificationCard","props","context","label","goal","progress","imgUrl","onClick","title","condition","nbDone","translate","isInprogress","progressLabel","progressTagType","progressIconProps","position","iconName","iconColor","backgroundColor","size","faSize","wrapperSize","customStyle","padding","container","top","right","imageSection","imageContainer","detailWrapper","titleWrapper","moduleCount","customProgressBar","positive","contextTypes","childContextTypes","propTypes","string","shape","number","func"],"sources":["../../../src/molecule/certification-card/index.js"],"sourcesContent":["import React from 'react';\nimport PropTypes from 'prop-types';\nimport {COLORS} from '../../variables/colors';\nimport Provider from '../../atom/provider';\nimport Tag from '../../atom/tag';\nimport ProgressBar from '../progress-bar';\nimport style from './style.css';\n\nconst CertificationCard = (props, context) => {\n  const {label, goal, progress, imgUrl, onClick} = props;\n  const {\n    title,\n    condition: {nbDone}\n  } = goal;\n  const {translate} = context;\n\n  const isInprogress = progress < 100;\n  const progressLabel = isInprogress ? translate('in_progress') : translate('completed');\n  const progressTagType = isInprogress ? 'progress' : 'success';\n  const progressIconProps = {\n    position: 'left',\n    iconName: isInprogress ? 'clock' : 'circle-check',\n    iconColor: isInprogress ? '#B87A00' : '#05944F',\n    backgroundColor: isInprogress ? '#FFEECC' : '#D6F5E5',\n    size: {\n      faSize: 10,\n      wrapperSize: 10\n    },\n    customStyle: {padding: 0}\n  };\n  return (\n    <div className={style.container} data-name={`certification-card-${label}`} onClick={onClick}>\n      {progress > 0 ? (\n        <Tag\n          label={progressLabel}\n          type={progressTagType}\n          customStyle={{position: 'absolute', top: '12px', right: '12px'}}\n          icon={progressIconProps}\n        />\n      ) : null}\n      <div className={style.imageSection}>\n        <div className={style.imageContainer}>\n          <img src={imgUrl} />\n        </div>\n      </div>\n      <div className={style.detailWrapper}>\n        <div className={style.titleWrapper}>\n          <Tag label={translate('certification')} size=\"S\" />\n          <div className={style.title} data-name=\"certification-title\">\n            {title}\n          </div>\n          <div className={style.moduleCount}>\n            <span>{nbDone}</span>\n            {` ${translate('certification_module')}`}\n          </div>\n        </div>\n        <ProgressBar\n          className={style.customProgressBar}\n          style={{backgroundColor: COLORS.positive}}\n          displayInfo={false}\n          value={progress}\n          max={100}\n        />\n      </div>\n    </div>\n  );\n};\n\nCertificationCard.contextTypes = {\n  translate: Provider.childContextTypes.translate\n};\n\nCertificationCard.propTypes = {\n  label: PropTypes.string,\n  goal: PropTypes.shape({\n    title: PropTypes.string,\n    condition: PropTypes.shape({\n      nbDone: PropTypes.number\n    })\n  }),\n  progress: PropTypes.number,\n  imgUrl: PropTypes.string,\n  onClick: PropTypes.func\n};\n\nexport default CertificationCard;\n"],"mappings":"AAAA,OAAOA,KAAP,MAAkB,OAAlB;AACA,OAAOC,SAAP,MAAsB,YAAtB;AACA,SAAQC,MAAR,QAAqB,wBAArB;AACA,OAAOC,QAAP,MAAqB,qBAArB;AACA,OAAOC,GAAP,MAAgB,gBAAhB;AACA,OAAOC,WAAP,MAAwB,iBAAxB;AACA,OAAOC,KAAP,MAAkB,aAAlB;;AAEA,MAAMC,iBAAiB,GAAG,CAACC,KAAD,EAAQC,OAAR,KAAoB;EAC5C,MAAM;IAACC,KAAD;IAAQC,IAAR;IAAcC,QAAd;IAAwBC,MAAxB;IAAgCC;EAAhC,IAA2CN,KAAjD;EACA,MAAM;IACJO,KADI;IAEJC,SAAS,EAAE;MAACC;IAAD;EAFP,IAGFN,IAHJ;EAIA,MAAM;IAACO;EAAD,IAAcT,OAApB;EAEA,MAAMU,YAAY,GAAGP,QAAQ,GAAG,GAAhC;EACA,MAAMQ,aAAa,GAAGD,YAAY,GAAGD,SAAS,CAAC,aAAD,CAAZ,GAA8BA,SAAS,CAAC,WAAD,CAAzE;EACA,MAAMG,eAAe,GAAGF,YAAY,GAAG,UAAH,GAAgB,SAApD;EACA,MAAMG,iBAAiB,GAAG;IACxBC,QAAQ,EAAE,MADc;IAExBC,QAAQ,EAAEL,YAAY,GAAG,OAAH,GAAa,cAFX;IAGxBM,SAAS,EAAEN,YAAY,GAAG,SAAH,GAAe,SAHd;IAIxBO,eAAe,EAAEP,YAAY,GAAG,SAAH,GAAe,SAJpB;IAKxBQ,IAAI,EAAE;MACJC,MAAM,EAAE,EADJ;MAEJC,WAAW,EAAE;IAFT,CALkB;IASxBC,WAAW,EAAE;MAACC,OAAO,EAAE;IAAV;EATW,CAA1B;EAWA,oBACE;IAAK,SAAS,EAAEzB,KAAK,CAAC0B,SAAtB;IAAiC,aAAY,sBAAqBtB,KAAM,EAAxE;IAA2E,OAAO,EAAEI;EAApF,GACGF,QAAQ,GAAG,CAAX,gBACC,oBAAC,GAAD;IACE,KAAK,EAAEQ,aADT;IAEE,IAAI,EAAEC,eAFR;IAGE,WAAW,EAAE;MAACE,QAAQ,EAAE,UAAX;MAAuBU,GAAG,EAAE,MAA5B;MAAoCC,KAAK,EAAE;IAA3C,CAHf;IAIE,IAAI,EAAEZ;EAJR,EADD,GAOG,IARN,eASE;IAAK,SAAS,EAAEhB,KAAK,CAAC6B;EAAtB,gBACE;IAAK,SAAS,EAAE7B,KAAK,CAAC8B;EAAtB,gBACE;IAAK,GAAG,EAAEvB;EAAV,EADF,CADF,CATF,eAcE;IAAK,SAAS,EAAEP,KAAK,CAAC+B;EAAtB,gBACE;IAAK,SAAS,EAAE/B,KAAK,CAACgC;EAAtB,gBACE,oBAAC,GAAD;IAAK,KAAK,EAAEpB,SAAS,CAAC,eAAD,CAArB;IAAwC,IAAI,EAAC;EAA7C,EADF,eAEE;IAAK,SAAS,EAAEZ,KAAK,CAACS,KAAtB;IAA6B,aAAU;EAAvC,GACGA,KADH,CAFF,eAKE;IAAK,SAAS,EAAET,KAAK,CAACiC;EAAtB,gBACE,kCAAOtB,MAAP,CADF,EAEI,IAAGC,SAAS,CAAC,sBAAD,CAAyB,EAFzC,CALF,CADF,eAWE,oBAAC,WAAD;IACE,SAAS,EAAEZ,KAAK,CAACkC,iBADnB;IAEE,KAAK,EAAE;MAACd,eAAe,EAAExB,MAAM,CAACuC;IAAzB,CAFT;IAGE,WAAW,EAAE,KAHf;IAIE,KAAK,EAAE7B,QAJT;IAKE,GAAG,EAAE;EALP,EAXF,CAdF,CADF;AAoCD,CA1DD;;AA4DAL,iBAAiB,CAACmC,YAAlB,GAAiC;EAC/BxB,SAAS,EAAEf,QAAQ,CAACwC,iBAAT,CAA2BzB;AADP,CAAjC;AAIAX,iBAAiB,CAACqC,SAAlB,2CAA8B;EAC5BlC,KAAK,EAAET,SAAS,CAAC4C,MADW;EAE5BlC,IAAI,EAAEV,SAAS,CAAC6C,KAAV,CAAgB;IACpB/B,KAAK,EAAEd,SAAS,CAAC4C,MADG;IAEpB7B,SAAS,EAAEf,SAAS,CAAC6C,KAAV,CAAgB;MACzB7B,MAAM,EAAEhB,SAAS,CAAC8C;IADO,CAAhB;EAFS,CAAhB,CAFsB;EAQ5BnC,QAAQ,EAAEX,SAAS,CAAC8C,MARQ;EAS5BlC,MAAM,EAAEZ,SAAS,CAAC4C,MATU;EAU5B/B,OAAO,EAAEb,SAAS,CAAC+C;AAVS,CAA9B;AAaA,eAAezC,iBAAf"}

package/es/molecule/certification-card/style.css

@@ -22,7 +22,7 @@
   transition: all 0.5s ease-out;
 }
 
-.imageWrapper {
+.imageSection {
   display: flex;
   justify-content: center;
   align-items: center;
@@ -30,22 +30,38 @@
   height: 160px;
   width: auto;
   transition: all 0.5s ease-out;
+  border-top-left-radius: 12px;
+  border-top-right-radius: 12px;
   
-  img {
-    width: 100px;
+  .imageContainer {
     transition: all 0.5s ease-out;
   }
 }
 
+.imageContainer {
+  width: 202px;
+  height: 112px;
+  display: flex;
+  justify-content: center;
+  align-items: center;
+
+  img {
+    width: 100%;
+    height: 100%;
+    object-fit: contain;
+  }
+}
+
 .container:hover {
   box-shadow: 0px 4px 12px 0px rgba(0, 0, 0, 0.14);
 
+  .imageContainer {
+    width: 244px;
+    height: 136px;
+  }
+
   .imageWrapper {
     background-color: cm_grey_75;
-
-    img {
-      width: 115px;
-    }
   }
 }
 .detailWrapper {

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

@@ -57,7 +57,7 @@ const DetailSection = ({
     disabled: isLocked
   });
   const LockedTag = /*#__PURE__*/React.createElement(Tag, {
-    label: "Locked",
+    label: translate('locked'),
     size: "S",
     icon: {
       position: 'left',

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","width","position","faIcon","name","size","customStyle","padding","LockedTag","iconName","iconColor","preset","detailsInfo","detailsInfoText","detailsTitle","img","buttonContainer","ProgressWrapper","completedModules","mandatoryModules","title","subtitle","progression","sections","mandatoryCompletedModulesLocale","container","titleContainer","statscontainer","stats","statsNumber","customProgressBar","positive","statsProgressionMobile","details","section","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-${type}-button`}\n      aria-label={`download ${type} button`}\n      customStyle={{backgroundColor: '#F1F6FE', color: '#0061FF', width: 'auto'}}\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\n      className={style[`detailsSection${index}`]}\n      data-name={type}\n      aria-label={`${type} informations`}\n    >\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\n      className={style[`detailsSection${index}`]}\n      data-name={type}\n      aria-label={`${type} informations`}\n    >\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 mandatoryCompletedModulesLocale = translate('modules_completed_mandatory');\n  const isLocked = progression !== 100;\n\n  return (\n    <div\n      className={style.container}\n      data-name=\"prgress-wrapper\"\n      aria-label=\"progress wrapper section\"\n    >\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} data-name=\"progress-stats\">\n              {`${\n                completedModules > mandatoryModules ? mandatoryModules : completedModules\n              } / ${mandatoryModules}`}\n            </span>\n            {mandatoryCompletedModulesLocale}\n          </div>\n        </div>\n        <div className={style.progression}>\n          <span className={style.statsNumber} data-name=\"progress-value\">\n            {progression}%\n          </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            (section, index) => (\n              <DetailSection\n                {...section}\n                isLocked={isLocked}\n                key={`${section.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","downloadUrl","stars","context","translate","isTypeStars","DownloadButton","target","href","backgroundColor","color","width","position","faIcon","name","size","customStyle","padding","LockedTag","iconName","iconColor","preset","detailsInfo","detailsInfoText","detailsTitle","img","buttonContainer","ProgressWrapper","completedModules","mandatoryModules","title","subtitle","progression","sections","mandatoryCompletedModulesLocale","container","titleContainer","statscontainer","stats","statsNumber","customProgressBar","positive","statsProgressionMobile","details","section","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-${type}-button`}\n      aria-label={`download ${type} button`}\n      customStyle={{backgroundColor: '#F1F6FE', color: '#0061FF', width: 'auto'}}\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={translate('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\n      className={style[`detailsSection${index}`]}\n      data-name={type}\n      aria-label={`${type} informations`}\n    >\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\n      className={style[`detailsSection${index}`]}\n      data-name={type}\n      aria-label={`${type} informations`}\n    >\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 mandatoryCompletedModulesLocale = translate('modules_completed_mandatory');\n  const isLocked = progression !== 100;\n\n  return (\n    <div\n      className={style.container}\n      data-name=\"prgress-wrapper\"\n      aria-label=\"progress wrapper section\"\n    >\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} data-name=\"progress-stats\">\n              {`${\n                completedModules > mandatoryModules ? mandatoryModules : completedModules\n              } / ${mandatoryModules}`}\n            </span>\n            {mandatoryCompletedModulesLocale}\n          </div>\n        </div>\n        <div className={style.progression}>\n          <span className={style.statsNumber} data-name=\"progress-value\">\n            {progression}%\n          </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            (section, index) => (\n              <DetailSection\n                {...section}\n                isLocked={isLocked}\n                key={`${section.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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"}

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

@@ -108,6 +108,7 @@
 
 .img {
   height: 100%;
+  max-width: 160px;
 }
 
 .buttonContainer {

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

@@ -28,7 +28,7 @@ declare namespace CertificationDetail {
     namespace propTypes {
         const title: PropTypes.Validator<string>;
         const certificationRef: PropTypes.Validator<string>;
-        const description: PropTypes.Requireable<string>;
+        const description: PropTypes.Validator<string>;
         const logoUrl: PropTypes.Requireable<string>;
         const metrics: PropTypes.Requireable<PropTypes.InferProps<{
             progression: PropTypes.Requireable<number>;

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":";AAkBA,4EA0GC"}
+{"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

@@ -2,7 +2,7 @@ import _isNil from "lodash/fp/isNil";
 import _round from "lodash/fp/round";
 import _lowerCase from "lodash/fp/lowerCase";
 import _compact from "lodash/fp/compact";
-import React, { useCallback, useState, useMemo } from 'react';
+import React, { useCallback, useEffect, useRef, useState, useMemo } from 'react';
 import PropTypes from 'prop-types';
 import classnames from 'classnames';
 import Markdown from 'markdown-to-jsx';
@@ -16,7 +16,6 @@ import AllCourses from '../skill-detail/all-courses';
 import { ContinueLearningButton } from '../skill-detail';
 import ProgressWrapper from '../../molecule/progress-wrapper';
 import style from './style.css';
-const DESCRIPTION_BREAKPOINT = 382;
 
 const CertificationDetail = (props, context) => {
   const {
@@ -33,6 +32,7 @@ const CertificationDetail = (props, context) => {
     diplomaUrl,
     badgeUrl
   } = props;
+  const descriptionRef = useRef(null);
   const {
     translate
   } = context;
@@ -42,10 +42,21 @@ const CertificationDetail = (props, context) => {
     stars,
     totalModules
   } = metrics;
+  const [isDescriptionTruncated, setIsDescriptionTruncated] = useState(false);
   const [showMore, setShowMore] = useState(false);
   const handleShowMore = useCallback(() => setShowMore(!showMore), [setShowMore, showMore]);
+  useEffect(() => {
+    if (descriptionRef.current) {
+      const {
+        clientHeight = 0,
+        scrollHeight = 0
+      } = descriptionRef.current;
+      setIsDescriptionTruncated(scrollHeight > clientHeight);
+    }
+  }, [description]);
   const Description = useCallback(() => {
     return /*#__PURE__*/React.createElement("div", {
+      ref: descriptionRef,
       className: classnames(style.description, !showMore && style.truncate)
     }, /*#__PURE__*/React.createElement(Markdown, null, description));
   }, [showMore, description]);
@@ -58,7 +69,7 @@ const CertificationDetail = (props, context) => {
   }, !_isNil(onBackClick) ? /*#__PURE__*/React.createElement(ButtonLinkIcon, {
     faIcon: "arrow-left",
     "data-name": "back-button",
-    "aria-label": "Back",
+    "aria-label": translate('back'),
     onClick: onBackClick,
     className: style.backButton,
     tooltipPlacement: "right"
@@ -73,7 +84,7 @@ const CertificationDetail = (props, context) => {
     label: translate('certification')
   }), /*#__PURE__*/React.createElement("div", {
     className: style.title
-  }, title), description ? /*#__PURE__*/React.createElement(React.Fragment, null, /*#__PURE__*/React.createElement(Description, null), description.length >= DESCRIPTION_BREAKPOINT ? /*#__PURE__*/React.createElement("div", {
+  }, title), description ? /*#__PURE__*/React.createElement(React.Fragment, null, /*#__PURE__*/React.createElement(Description, null), isDescriptionTruncated ? /*#__PURE__*/React.createElement("div", {
     className: style.showMoreWrapper,
     onClick: handleShowMore
   }, translate(showMore ? 'Show less' : 'Show more'), /*#__PURE__*/React.createElement(Icon, {
@@ -117,7 +128,7 @@ CertificationDetail.contextTypes = {
 CertificationDetail.propTypes = process.env.NODE_ENV !== "production" ? {
   title: PropTypes.string.isRequired,
   certificationRef: PropTypes.string.isRequired,
-  description: PropTypes.string,
+  description: PropTypes.string.isRequired,
   logoUrl: PropTypes.string,
   metrics: PropTypes.shape({
     progression: PropTypes.number,

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

@@ -1 +1 @@
-{"version":3,"file":"index.js","names":["React","useCallback","useState","useMemo","PropTypes","classnames","Markdown","Provider","Tag","SelectOptionPropTypes","ButtonLinkIcon","Icon","CardsGrid","AllCourses","ContinueLearningButton","ProgressWrapper","style","DESCRIPTION_BREAKPOINT","CertificationDetail","props","context","certificationRef","title","description","certificationCourses","ongoingCoursesAvailable","filters","onBackClick","onContinueLearningClick","metrics","logoUrl","diplomaUrl","badgeUrl","translate","progression","mandatoryModules","stars","totalModules","showMore","setShowMore","handleShowMore","Description","truncate","completedModules","backgroundContainer","container","backButton","ctaContainer","logoContainer","logo","length","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, 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 DESCRIPTION_BREAKPOINT = 382;\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 {translate} = context;\n  const {progression, mandatoryModules, stars, totalModules} = metrics;\n\n  const [showMore, setShowMore] = useState(false);\n  const handleShowMore = useCallback(() => setShowMore(!showMore), [setShowMore, showMore]);\n\n  const Description = useCallback(() => {\n    return (\n      <div className={classnames(style.description, !showMore && style.truncate)}>\n        <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=\"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                {description.length >= DESCRIPTION_BREAKPOINT ? (\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,\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":"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"}

package/es/template/certification-detail/style.css

@@ -42,7 +42,6 @@
 
 .ctaContainer {
   display: flex;
-  align-items: center;
   width: 100%;
   gap: 40px;
   margin-bottom: 40px;

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

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

package/es/template/certifications/index.js

@@ -27,6 +27,8 @@ const Certifications = (props, context) => {
     setShowCompleted(!showCompleted);
   }, [showCompleted, setShowCompleted]);
   return /*#__PURE__*/React.createElement("div", {
+    className: style.backgroudnContainer
+  }, /*#__PURE__*/React.createElement("div", {
     className: style.container,
     "data-name": "Certifications"
   }, /*#__PURE__*/React.createElement(Title, {
@@ -67,7 +69,7 @@ const Certifications = (props, context) => {
     return /*#__PURE__*/React.createElement("div", {
       key: certification.label
     }, /*#__PURE__*/React.createElement(CertificationCard, certification));
-  })));
+  }))));
 };
 
 Certifications.contextTypes = {

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

@@ -1 +1 @@
-{"version":3,"file":"index.js","names":["React","useState","useCallback","PropTypes","Provider","Title","Select","InputSwitch","CertificationCard","style","Certifications","props","context","certifications","sorting","translate","showCompleted","setShowCompleted","sortView","undefined","handleShowCompletedToggle","container","iconName","iconColor","borderRadius","backgroundColor","sortSectionWrapper","certificatesCount","length","sortSection","sortWrapper","certificateList","map","certification","progress","label","contextTypes","childContextTypes","propTypes","arrayOf","shape","string","goal","title","condition","nbDone","number","imgUrl","onClick","func"],"sources":["../../../src/template/certifications/index.js"],"sourcesContent":["import React, {useState, useCallback} from 'react';\nimport PropTypes from 'prop-types';\nimport Provider from '../../atom/provider';\nimport Title from '../../atom/title';\nimport Select from '../../atom/select';\nimport InputSwitch from '../../atom/input-switch';\nimport CertificationCard from '../../molecule/certification-card';\nimport style from './style.css';\n\nconst Certifications = (props, context) => {\n  const {certifications, sorting} = props;\n  const {translate} = context;\n\n  const [showCompleted, setShowCompleted] = useState(true);\n\n  const sortView =\n    sorting !== undefined ? (\n      <div data-name=\"choice\">\n        <Select {...sorting} aria-label=\"All courses sort\" />\n      </div>\n    ) : null;\n\n  const handleShowCompletedToggle = useCallback(() => {\n    setShowCompleted(!showCompleted);\n  }, [showCompleted, setShowCompleted]);\n\n  return (\n    <div className={style.container} data-name=\"Certifications\">\n      <Title\n        title={translate('certificates')}\n        subtitle={translate('certificates_subtitle')}\n        type=\"form-group\"\n        titleSize=\"standard-light-weight\"\n        subtitleSize=\"standard-without-margin\"\n        icon={{\n          iconName: 'wreath-laurel',\n          iconColor: '#B87A00',\n          borderRadius: '12px',\n          backgroundColor: '#FFEECC'\n        }}\n      />\n      <div className={style.sortSectionWrapper}>\n        <div className={style.certificatesCount}>\n          {`${certifications.length} ${translate('certificate(s)')}`}\n        </div>\n        <div className={style.sortSection}>\n          <InputSwitch\n            id={'show-completed-courses-switch'}\n            type=\"switch\"\n            name={translate('show_completed')}\n            title={translate('show_completed')}\n            aria-label={'Show completed courses aria label'}\n            value={showCompleted}\n            onChange={handleShowCompletedToggle}\n          />\n          {sorting ? (\n            <div className={style.sortWrapper}>\n              {translate('sort_by')}\n              {sortView}\n            </div>\n          ) : null}\n        </div>\n      </div>\n      <div className={style.certificateList}>\n        {certifications.map(certification => {\n          if (!showCompleted && certification.progress === 100) {\n            return null;\n          }\n          return (\n            <div key={certification.label}>\n              <CertificationCard {...certification} />\n            </div>\n          );\n        })}\n      </div>\n    </div>\n  );\n};\n\nCertifications.contextTypes = {\n  translate: Provider.childContextTypes.translate\n};\n\nCertifications.propTypes = {\n  certifications: PropTypes.arrayOf(\n    PropTypes.shape({\n      label: PropTypes.string,\n      goal: PropTypes.shape({\n        title: PropTypes.string,\n        condition: PropTypes.shape({\n          nbDone: PropTypes.number\n        })\n      }),\n      progress: PropTypes.number,\n      imgUrl: PropTypes.string,\n      onClick: PropTypes.func\n    })\n  ),\n  sorting: PropTypes.shape(Select.propTypes)\n};\n\nexport default Certifications;\n"],"mappings":"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"}
+{"version":3,"file":"index.js","names":["React","useState","useCallback","PropTypes","Provider","Title","Select","InputSwitch","CertificationCard","style","Certifications","props","context","certifications","sorting","translate","showCompleted","setShowCompleted","sortView","undefined","handleShowCompletedToggle","backgroudnContainer","container","iconName","iconColor","borderRadius","backgroundColor","sortSectionWrapper","certificatesCount","length","sortSection","sortWrapper","certificateList","map","certification","progress","label","contextTypes","childContextTypes","propTypes","arrayOf","shape","string","goal","title","condition","nbDone","number","imgUrl","onClick","func"],"sources":["../../../src/template/certifications/index.js"],"sourcesContent":["import React, {useState, useCallback} from 'react';\nimport PropTypes from 'prop-types';\nimport Provider from '../../atom/provider';\nimport Title from '../../atom/title';\nimport Select from '../../atom/select';\nimport InputSwitch from '../../atom/input-switch';\nimport CertificationCard from '../../molecule/certification-card';\nimport style from './style.css';\n\nconst Certifications = (props, context) => {\n  const {certifications, sorting} = props;\n  const {translate} = context;\n\n  const [showCompleted, setShowCompleted] = useState(true);\n\n  const sortView =\n    sorting !== undefined ? (\n      <div data-name=\"choice\">\n        <Select {...sorting} aria-label=\"All courses sort\" />\n      </div>\n    ) : null;\n\n  const handleShowCompletedToggle = useCallback(() => {\n    setShowCompleted(!showCompleted);\n  }, [showCompleted, setShowCompleted]);\n\n  return (\n    <div className={style.backgroudnContainer}>\n      <div className={style.container} data-name=\"Certifications\">\n        <Title\n          title={translate('certificates')}\n          subtitle={translate('certificates_subtitle')}\n          type=\"form-group\"\n          titleSize=\"standard-light-weight\"\n          subtitleSize=\"standard-without-margin\"\n          icon={{\n            iconName: 'wreath-laurel',\n            iconColor: '#B87A00',\n            borderRadius: '12px',\n            backgroundColor: '#FFEECC'\n          }}\n        />\n        <div className={style.sortSectionWrapper}>\n          <div className={style.certificatesCount}>\n            {`${certifications.length} ${translate('certificate(s)')}`}\n          </div>\n          <div className={style.sortSection}>\n            <InputSwitch\n              id={'show-completed-courses-switch'}\n              type=\"switch\"\n              name={translate('show_completed')}\n              title={translate('show_completed')}\n              aria-label={'Show completed courses aria label'}\n              value={showCompleted}\n              onChange={handleShowCompletedToggle}\n            />\n            {sorting ? (\n              <div className={style.sortWrapper}>\n                {translate('sort_by')}\n                {sortView}\n              </div>\n            ) : null}\n          </div>\n        </div>\n        <div className={style.certificateList}>\n          {certifications.map(certification => {\n            if (!showCompleted && certification.progress === 100) {\n              return null;\n            }\n            return (\n              <div key={certification.label}>\n                <CertificationCard {...certification} />\n              </div>\n            );\n          })}\n        </div>\n      </div>\n    </div>\n  );\n};\n\nCertifications.contextTypes = {\n  translate: Provider.childContextTypes.translate\n};\n\nCertifications.propTypes = {\n  certifications: PropTypes.arrayOf(\n    PropTypes.shape({\n      label: PropTypes.string,\n      goal: PropTypes.shape({\n        title: PropTypes.string,\n        condition: PropTypes.shape({\n          nbDone: PropTypes.number\n        })\n      }),\n      progress: PropTypes.number,\n      imgUrl: PropTypes.string,\n      onClick: PropTypes.func\n    })\n  ),\n  sorting: PropTypes.shape(Select.propTypes)\n};\n\nexport default Certifications;\n"],"mappings":"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"}

package/es/template/certifications/style.css

@@ -7,13 +7,20 @@
 @value cm_grey_200 from colors;
 @value cm_grey_400 from colors;
 @value cm_grey_500 from colors;
+@value white from colors;
+
+.backgroudnContainer {
+  background-color: white;
+  min-height: 100%;
+  width: 100%;
+}
 
 .container {
   font-family: "Gilroy";
   font-style: normal;
   max-width: 1080px;
   margin: auto;
-  margin-top: 48px;
+  padding-top: 48px;
 }
 
 .sortSection {