@coorpacademy/components 11.32.36 → 11.32.37-alpha.4

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,0EAsDC"}
+{"version":3,"file":"index.d.ts","sourceRoot":"","sources":["../../../src/molecule/certification-card/index.js"],"names":[],"mappings":";AAQA,0EAwDC"}

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

@@ -64,7 +64,8 @@ const CertificationCard = (props, context) => {
     label: translate('certification'),
     size: "S"
   }), /*#__PURE__*/React.createElement("div", {
-    className: style.title
+    className: style.title,
+    "data-name": "certification-title"
   }, title), /*#__PURE__*/React.createElement("div", {
     className: style.moduleCount
   }, /*#__PURE__*/React.createElement("span", null, nbDone), ` ${translate('certification_module')}`)), /*#__PURE__*/React.createElement(ProgressBar, {

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}>{title}</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","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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"}

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

@@ -1 +1 @@
-{"version":3,"file":"index.d.ts","sourceRoot":"","sources":["../../../src/molecule/progress-bar/index.js"],"names":[],"mappings":";AAMA,sDAiCC"}
+{"version":3,"file":"index.d.ts","sourceRoot":"","sources":["../../../src/molecule/progress-bar/index.js"],"names":[],"mappings":";AAMA,sDAqCC"}

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

@@ -27,7 +27,9 @@ const ProgressBar = props => {
   }), steps);
 
   return /*#__PURE__*/React.createElement("div", {
-    className: classnames(style.background, className)
+    className: classnames(style.background, className),
+    "data-name": "progress-bar-wrapper",
+    "data-content": `${text}`
   }, /*#__PURE__*/React.createElement("div", {
     className: style.progress,
     style: _extends({}, propsStyle, {

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

@@ -1 +1 @@
-{"version":3,"file":"index.js","names":["React","PropTypes","classnames","style","ProgressBar","props","className","value","max","desc","steps","propsStyle","displayInfo","ratio","percentage","Math","floor","text","stepList","index","step","background","progress","width","texts","description","propTypes","string","number","isRequired","objectOf","oneOfType","bool"],"sources":["../../../src/molecule/progress-bar/index.js"],"sourcesContent":["import React from 'react';\nimport PropTypes from 'prop-types';\nimport classnames from 'classnames';\nimport {times} from 'lodash/fp';\nimport style from './style.css';\n\nconst ProgressBar = props => {\n  const {\n    className,\n    value,\n    max,\n    desc = '',\n    steps = 0,\n    style: propsStyle,\n    displayInfo = true\n  } = props;\n\n  const ratio = value / max;\n  const percentage = Math.floor(ratio * 100);\n  const text = `${percentage}%`;\n  const stepList = times(index => <div className={style.step} key={index} />, steps);\n  return (\n    <div className={classnames(style.background, className)}>\n      <div\n        className={style.progress}\n        style={{\n          ...propsStyle,\n          width: `${ratio * 100}%`\n        }}\n      />\n      {displayInfo ? (\n        <p className={style.texts}>\n          <span className={style.description}>{`${value}/${max} ${desc}`}</span>\n          <span className={style.percentage}>{text}</span>\n        </p>\n      ) : null}\n      <div className={style.steps}>{stepList}</div>\n    </div>\n  );\n};\n\nProgressBar.propTypes = {\n  className: PropTypes.string,\n  value: PropTypes.number.isRequired,\n  max: PropTypes.number.isRequired,\n  desc: PropTypes.string,\n  steps: PropTypes.number,\n  style: PropTypes.objectOf(PropTypes.oneOfType([PropTypes.string, PropTypes.number])),\n  displayInfo: PropTypes.bool\n};\n\nexport default ProgressBar;\n"],"mappings":";;;;AAAA,OAAOA,KAAP,MAAkB,OAAlB;AACA,OAAOC,SAAP,MAAsB,YAAtB;AACA,OAAOC,UAAP,MAAuB,YAAvB;AAEA,OAAOC,KAAP,MAAkB,aAAlB;;AAEA,MAAMC,WAAW,GAAGC,KAAK,IAAI;EAC3B,MAAM;IACJC,SADI;IAEJC,KAFI;IAGJC,GAHI;IAIJC,IAAI,GAAG,EAJH;IAKJC,KAAK,GAAG,CALJ;IAMJP,KAAK,EAAEQ,UANH;IAOJC,WAAW,GAAG;EAPV,IAQFP,KARJ;EAUA,MAAMQ,KAAK,GAAGN,KAAK,GAAGC,GAAtB;EACA,MAAMM,UAAU,GAAGC,IAAI,CAACC,KAAL,CAAWH,KAAK,GAAG,GAAnB,CAAnB;EACA,MAAMI,IAAI,GAAI,GAAEH,UAAW,GAA3B;;EACA,MAAMI,QAAQ,GAAG,OAAMC,KAAK,iBAAI;IAAK,SAAS,EAAEhB,KAAK,CAACiB,IAAtB;IAA4B,GAAG,EAAED;EAAjC,EAAf,EAA2DT,KAA3D,CAAjB;;EACA,oBACE;IAAK,SAAS,EAAER,UAAU,CAACC,KAAK,CAACkB,UAAP,EAAmBf,SAAnB;EAA1B,gBACE;IACE,SAAS,EAAEH,KAAK,CAACmB,QADnB;IAEE,KAAK,eACAX,UADA;MAEHY,KAAK,EAAG,GAAEV,KAAK,GAAG,GAAI;IAFnB;EAFP,EADF,EAQGD,WAAW,gBACV;IAAG,SAAS,EAAET,KAAK,CAACqB;EAApB,gBACE;IAAM,SAAS,EAAErB,KAAK,CAACsB;EAAvB,GAAsC,GAAElB,KAAM,IAAGC,GAAI,IAAGC,IAAK,EAA7D,CADF,eAEE;IAAM,SAAS,EAAEN,KAAK,CAACW;EAAvB,GAAoCG,IAApC,CAFF,CADU,GAKR,IAbN,eAcE;IAAK,SAAS,EAAEd,KAAK,CAACO;EAAtB,GAA8BQ,QAA9B,CAdF,CADF;AAkBD,CAjCD;;AAmCAd,WAAW,CAACsB,SAAZ,2CAAwB;EACtBpB,SAAS,EAAEL,SAAS,CAAC0B,MADC;EAEtBpB,KAAK,EAAEN,SAAS,CAAC2B,MAAV,CAAiBC,UAFF;EAGtBrB,GAAG,EAAEP,SAAS,CAAC2B,MAAV,CAAiBC,UAHA;EAItBpB,IAAI,EAAER,SAAS,CAAC0B,MAJM;EAKtBjB,KAAK,EAAET,SAAS,CAAC2B,MALK;EAMtBzB,KAAK,EAAEF,SAAS,CAAC6B,QAAV,CAAmB7B,SAAS,CAAC8B,SAAV,CAAoB,CAAC9B,SAAS,CAAC0B,MAAX,EAAmB1B,SAAS,CAAC2B,MAA7B,CAApB,CAAnB,CANe;EAOtBhB,WAAW,EAAEX,SAAS,CAAC+B;AAPD,CAAxB;AAUA,eAAe5B,WAAf"}
+{"version":3,"file":"index.js","names":["React","PropTypes","classnames","style","ProgressBar","props","className","value","max","desc","steps","propsStyle","displayInfo","ratio","percentage","Math","floor","text","stepList","index","step","background","progress","width","texts","description","propTypes","string","number","isRequired","objectOf","oneOfType","bool"],"sources":["../../../src/molecule/progress-bar/index.js"],"sourcesContent":["import React from 'react';\nimport PropTypes from 'prop-types';\nimport classnames from 'classnames';\nimport {times} from 'lodash/fp';\nimport style from './style.css';\n\nconst ProgressBar = props => {\n  const {\n    className,\n    value,\n    max,\n    desc = '',\n    steps = 0,\n    style: propsStyle,\n    displayInfo = true\n  } = props;\n\n  const ratio = value / max;\n  const percentage = Math.floor(ratio * 100);\n  const text = `${percentage}%`;\n  const stepList = times(index => <div className={style.step} key={index} />, steps);\n  return (\n    <div\n      className={classnames(style.background, className)}\n      data-name=\"progress-bar-wrapper\"\n      data-content={`${text}`}\n    >\n      <div\n        className={style.progress}\n        style={{\n          ...propsStyle,\n          width: `${ratio * 100}%`\n        }}\n      />\n      {displayInfo ? (\n        <p className={style.texts}>\n          <span className={style.description}>{`${value}/${max} ${desc}`}</span>\n          <span className={style.percentage}>{text}</span>\n        </p>\n      ) : null}\n      <div className={style.steps}>{stepList}</div>\n    </div>\n  );\n};\n\nProgressBar.propTypes = {\n  className: PropTypes.string,\n  value: PropTypes.number.isRequired,\n  max: PropTypes.number.isRequired,\n  desc: PropTypes.string,\n  steps: PropTypes.number,\n  style: PropTypes.objectOf(PropTypes.oneOfType([PropTypes.string, PropTypes.number])),\n  displayInfo: PropTypes.bool\n};\n\nexport default ProgressBar;\n"],"mappings":";;;;AAAA,OAAOA,KAAP,MAAkB,OAAlB;AACA,OAAOC,SAAP,MAAsB,YAAtB;AACA,OAAOC,UAAP,MAAuB,YAAvB;AAEA,OAAOC,KAAP,MAAkB,aAAlB;;AAEA,MAAMC,WAAW,GAAGC,KAAK,IAAI;EAC3B,MAAM;IACJC,SADI;IAEJC,KAFI;IAGJC,GAHI;IAIJC,IAAI,GAAG,EAJH;IAKJC,KAAK,GAAG,CALJ;IAMJP,KAAK,EAAEQ,UANH;IAOJC,WAAW,GAAG;EAPV,IAQFP,KARJ;EAUA,MAAMQ,KAAK,GAAGN,KAAK,GAAGC,GAAtB;EACA,MAAMM,UAAU,GAAGC,IAAI,CAACC,KAAL,CAAWH,KAAK,GAAG,GAAnB,CAAnB;EACA,MAAMI,IAAI,GAAI,GAAEH,UAAW,GAA3B;;EACA,MAAMI,QAAQ,GAAG,OAAMC,KAAK,iBAAI;IAAK,SAAS,EAAEhB,KAAK,CAACiB,IAAtB;IAA4B,GAAG,EAAED;EAAjC,EAAf,EAA2DT,KAA3D,CAAjB;;EACA,oBACE;IACE,SAAS,EAAER,UAAU,CAACC,KAAK,CAACkB,UAAP,EAAmBf,SAAnB,CADvB;IAEE,aAAU,sBAFZ;IAGE,gBAAe,GAAEW,IAAK;EAHxB,gBAKE;IACE,SAAS,EAAEd,KAAK,CAACmB,QADnB;IAEE,KAAK,eACAX,UADA;MAEHY,KAAK,EAAG,GAAEV,KAAK,GAAG,GAAI;IAFnB;EAFP,EALF,EAYGD,WAAW,gBACV;IAAG,SAAS,EAAET,KAAK,CAACqB;EAApB,gBACE;IAAM,SAAS,EAAErB,KAAK,CAACsB;EAAvB,GAAsC,GAAElB,KAAM,IAAGC,GAAI,IAAGC,IAAK,EAA7D,CADF,eAEE;IAAM,SAAS,EAAEN,KAAK,CAACW;EAAvB,GAAoCG,IAApC,CAFF,CADU,GAKR,IAjBN,eAkBE;IAAK,SAAS,EAAEd,KAAK,CAACO;EAAtB,GAA8BQ,QAA9B,CAlBF,CADF;AAsBD,CArCD;;AAuCAd,WAAW,CAACsB,SAAZ,2CAAwB;EACtBpB,SAAS,EAAEL,SAAS,CAAC0B,MADC;EAEtBpB,KAAK,EAAEN,SAAS,CAAC2B,MAAV,CAAiBC,UAFF;EAGtBrB,GAAG,EAAEP,SAAS,CAAC2B,MAAV,CAAiBC,UAHA;EAItBpB,IAAI,EAAER,SAAS,CAAC0B,MAJM;EAKtBjB,KAAK,EAAET,SAAS,CAAC2B,MALK;EAMtBzB,KAAK,EAAEF,SAAS,CAAC6B,QAAV,CAAmB7B,SAAS,CAAC8B,SAAV,CAAoB,CAAC9B,SAAS,CAAC0B,MAAX,EAAmB1B,SAAS,CAAC2B,MAA7B,CAApB,CAAnB,CANe;EAOtBhB,WAAW,EAAEX,SAAS,CAAC+B;AAPD,CAAxB;AAUA,eAAe5B,WAAf"}

package/es/template/certifications/index.js

@@ -27,7 +27,8 @@ const Certifications = (props, context) => {
     setShowCompleted(!showCompleted);
   }, [showCompleted, setShowCompleted]);
   return /*#__PURE__*/React.createElement("div", {
-    className: style.container
+    className: style.container,
+    "data-name": "Certifications"
   }, /*#__PURE__*/React.createElement(Title, {
     title: translate('certificates'),
     subtitle: translate('certificates_subtitle'),

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}>\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","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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"}

package/es/template/certifications/style.css

@@ -31,7 +31,7 @@
   justify-content: space-between;
   flex-wrap: wrap;
   align-items: center;
-  margin-top: 4px;
+  margin: 16px 0 16px 0;
 }
 
 .sortSection {

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

@@ -33,13 +33,7 @@ declare namespace PlaylistDetail {
         }> | null | undefined)[]>;
         const playlistRef: PropTypes.Validator<string>;
         const description: PropTypes.Requireable<string>;
-        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 ongoingCoursesAvailable: PropTypes.Requireable<boolean>;
         const playlistCourses: PropTypes.Requireable<PropTypes.InferProps<{
             list: PropTypes.Requireable<(PropTypes.InferProps<any> | null | undefined)[]>;
             customStyle: PropTypes.Requireable<{
@@ -47,7 +41,6 @@ declare namespace PlaylistDetail {
             }>;
             loading: PropTypes.Requireable<boolean>;
         }>>;
-        const totalCourses: PropTypes.Requireable<number>;
         const filters: PropTypes.Requireable<PropTypes.InferProps<{
             onChange: PropTypes.Requireable<(...args: any[]) => any>;
             options: PropTypes.Requireable<(PropTypes.InferProps<{

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

@@ -1 +1 @@
-{"version":3,"file":"index.d.ts","sourceRoot":"","sources":["../../../src/template/playlist-detail/index.js"],"names":[],"mappings":";AAiBA,uEAgFC"}
+{"version":3,"file":"index.d.ts","sourceRoot":"","sources":["../../../src/template/playlist-detail/index.js"],"names":[],"mappings":";AAgBA,uEAuEC"}

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

@@ -8,7 +8,6 @@ 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 PlaylistDetailCover from '../../molecule/playlist-detail-cover';
 import { ContinueLearningButton } from '../skill-detail';
 import style from './style.css';
@@ -20,9 +19,8 @@ const PlaylistDetail = (props, context) => {
     coverImages,
     playlistRef,
     description,
-    ongoingCourses,
+    ongoingCoursesAvailable,
     playlistCourses,
-    totalCourses,
     filters,
     sorting,
     onBackClick,
@@ -72,15 +70,10 @@ const PlaylistDetail = (props, context) => {
   })) : null) : null, /*#__PURE__*/React.createElement("div", {
     className: style.continueLearningButton
   }, /*#__PURE__*/React.createElement(ContinueLearningButton, {
-    ongoingCoursesAvailable: !!ongoingCourses.list.length,
+    ongoingCoursesAvailable: ongoingCoursesAvailable,
     onClick: onContinueLearningClick
-  })))), /*#__PURE__*/React.createElement("div", {
-    className: style.continueLearningSection
-  }, /*#__PURE__*/React.createElement(ContinueLearning, {
-    ongoingCourses: ongoingCourses
-  })), /*#__PURE__*/React.createElement(AllCourses, {
-    courses: playlistCourses,
-    totalCourses: totalCourses,
+  })))), /*#__PURE__*/React.createElement(AllCourses, {
+    content: playlistCourses,
     filters: filters,
     sorting: sorting
   })));
@@ -95,9 +88,8 @@ PlaylistDetail.propTypes = process.env.NODE_ENV !== "production" ? {
   coverImages: PlaylistDetailCover.propTypes.images,
   playlistRef: PropTypes.string.isRequired,
   description: PropTypes.string,
-  ongoingCourses: PropTypes.shape(CardsGrid.propTypes),
+  ongoingCoursesAvailable: PropTypes.bool,
   playlistCourses: PropTypes.shape(CardsGrid.propTypes),
-  totalCourses: PropTypes.number,
   filters: PropTypes.shape({
     onChange: PropTypes.func,
     options: PropTypes.arrayOf(PropTypes.shape(SelectOptionPropTypes))

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

@@ -1 +1 @@
-{"version":3,"file":"index.js","names":["React","useCallback","useState","PropTypes","classnames","Provider","Tag","Select","SelectOptionPropTypes","ButtonLinkIcon","Icon","CardsGrid","AllCourses","ContinueLearning","PlaylistDetailCover","ContinueLearningButton","style","DESCRIPTION_BREAKPOINT","PlaylistDetail","props","context","title","coverImages","playlistRef","description","ongoingCourses","playlistCourses","totalCourses","filters","sorting","onBackClick","onContinueLearningClick","translate","showMore","setShowMore","handleShowMore","Description","truncate","backgroundContainer","container","backButton","ctaContainer","coverWrapper","length","showMoreWrapper","faSize","wrapperSize","continueLearningButton","list","continueLearningSection","contextTypes","skin","childContextTypes","propTypes","string","isRequired","images","shape","number","onChange","func","options","arrayOf"],"sources":["../../../src/template/playlist-detail/index.js"],"sourcesContent":["import React, {useCallback, useState} from 'react';\nimport PropTypes from 'prop-types';\nimport classnames from 'classnames';\nimport Provider from '../../atom/provider';\nimport Tag from '../../atom/tag';\nimport Select, {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 ContinueLearning from '../skill-detail/continue-learning';\nimport PlaylistDetailCover from '../../molecule/playlist-detail-cover';\nimport {ContinueLearningButton} from '../skill-detail';\nimport style from './style.css';\n\nconst DESCRIPTION_BREAKPOINT = 382;\n\nconst PlaylistDetail = (props, context) => {\n  const {\n    title,\n    coverImages,\n    playlistRef,\n    description,\n    ongoingCourses,\n    playlistCourses,\n    totalCourses,\n    filters,\n    sorting,\n    onBackClick,\n    onContinueLearningClick\n  } = props;\n  const {translate} = context;\n\n  const [showMore, setShowMore] = useState(false);\n\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        {description}\n      </div>\n    );\n  }, [showMore, description]);\n\n  return (\n    <div className={style.backgroundContainer}>\n      <div className={style.container} data-name={playlistRef}>\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        <div className={style.ctaContainer}>\n          <div className={style.coverWrapper}>\n            <PlaylistDetailCover images={coverImages} />\n          </div>\n          <div>\n            <Tag label={translate('playlist')} />\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.continueLearningButton}>\n              <ContinueLearningButton\n                ongoingCoursesAvailable={!!ongoingCourses.list.length}\n                onClick={onContinueLearningClick}\n              />\n            </div>\n          </div>\n        </div>\n        <div className={style.continueLearningSection}>\n          <ContinueLearning ongoingCourses={ongoingCourses} />\n        </div>\n        <AllCourses\n          courses={playlistCourses}\n          totalCourses={totalCourses}\n          filters={filters}\n          sorting={sorting}\n        />\n      </div>\n    </div>\n  );\n};\n\nPlaylistDetail.contextTypes = {\n  skin: Provider.childContextTypes.skin,\n  translate: Provider.childContextTypes.translate\n};\n\nPlaylistDetail.propTypes = {\n  title: PropTypes.string.isRequired,\n  coverImages: PlaylistDetailCover.propTypes.images,\n  playlistRef: PropTypes.string.isRequired,\n  description: PropTypes.string,\n  ongoingCourses: PropTypes.shape(CardsGrid.propTypes),\n  playlistCourses: PropTypes.shape(CardsGrid.propTypes),\n  totalCourses: PropTypes.number,\n  filters: PropTypes.shape({\n    onChange: PropTypes.func,\n    options: PropTypes.arrayOf(PropTypes.shape(SelectOptionPropTypes))\n  }),\n  sorting: PropTypes.shape(Select.propTypes),\n  onBackClick: PropTypes.func,\n  onContinueLearningClick: PropTypes.func\n};\n\nexport default PlaylistDetail;\n"],"mappings":"AAAA,OAAOA,KAAP,IAAeC,WAAf,EAA4BC,QAA5B,QAA2C,OAA3C;AACA,OAAOC,SAAP,MAAsB,YAAtB;AACA,OAAOC,UAAP,MAAuB,YAAvB;AACA,OAAOC,QAAP,MAAqB,qBAArB;AACA,OAAOC,GAAP,MAAgB,gBAAhB;AACA,OAAOC,MAAP,IAAgBC,qBAAhB,QAA4C,mBAA5C;AACA,OAAOC,cAAP,MAA2B,6BAA3B;AACA,OAAOC,IAAP,MAAiB,iBAAjB;AACA,OAAOC,SAAP,MAAsB,2BAAtB;AACA,OAAOC,UAAP,MAAuB,6BAAvB;AACA,OAAOC,gBAAP,MAA6B,mCAA7B;AACA,OAAOC,mBAAP,MAAgC,sCAAhC;AACA,SAAQC,sBAAR,QAAqC,iBAArC;AACA,OAAOC,KAAP,MAAkB,aAAlB;AAEA,MAAMC,sBAAsB,GAAG,GAA/B;;AAEA,MAAMC,cAAc,GAAG,CAACC,KAAD,EAAQC,OAAR,KAAoB;EACzC,MAAM;IACJC,KADI;IAEJC,WAFI;IAGJC,WAHI;IAIJC,WAJI;IAKJC,cALI;IAMJC,eANI;IAOJC,YAPI;IAQJC,OARI;IASJC,OATI;IAUJC,WAVI;IAWJC;EAXI,IAYFZ,KAZJ;EAaA,MAAM;IAACa;EAAD,IAAcZ,OAApB;EAEA,MAAM,CAACa,QAAD,EAAWC,WAAX,IAA0BhC,QAAQ,CAAC,KAAD,CAAxC;EAEA,MAAMiC,cAAc,GAAGlC,WAAW,CAAC,MAAMiC,WAAW,CAAC,CAACD,QAAF,CAAlB,EAA+B,CAACC,WAAD,EAAcD,QAAd,CAA/B,CAAlC;EAEA,MAAMG,WAAW,GAAGnC,WAAW,CAAC,MAAM;IACpC,oBACE;MAAK,SAAS,EAAEG,UAAU,CAACY,KAAK,CAACQ,WAAP,EAAoB,CAACS,QAAD,IAAajB,KAAK,CAACqB,QAAvC;IAA1B,GACGb,WADH,CADF;EAKD,CAN8B,EAM5B,CAACS,QAAD,EAAWT,WAAX,CAN4B,CAA/B;EAQA,oBACE;IAAK,SAAS,EAAER,KAAK,CAACsB;EAAtB,gBACE;IAAK,SAAS,EAAEtB,KAAK,CAACuB,SAAtB;IAAiC,aAAWhB;EAA5C,gBACE,oBAAC,cAAD;IACE,MAAM,EAAC,YADT;IAEE,aAAU,aAFZ;IAGE,cAAW,MAHb;IAIE,OAAO,EAAEO,WAJX;IAKE,SAAS,EAAEd,KAAK,CAACwB,UALnB;IAME,gBAAgB,EAAC;EANnB,EADF,eASE;IAAK,SAAS,EAAExB,KAAK,CAACyB;EAAtB,gBACE;IAAK,SAAS,EAAEzB,KAAK,CAAC0B;EAAtB,gBACE,oBAAC,mBAAD;IAAqB,MAAM,EAAEpB;EAA7B,EADF,CADF,eAIE,8CACE,oBAAC,GAAD;IAAK,KAAK,EAAEU,SAAS,CAAC,UAAD;EAArB,EADF,eAEE;IAAK,SAAS,EAAEhB,KAAK,CAACK;EAAtB,GAA8BA,KAA9B,CAFF,EAGGG,WAAW,gBACV,uDACE,oBAAC,WAAD,OADF,EAEGA,WAAW,CAACmB,MAAZ,IAAsB1B,sBAAtB,gBACC;IAAK,SAAS,EAAED,KAAK,CAAC4B,eAAtB;IAAuC,OAAO,EAAET;EAAhD,GACGH,SAAS,CAACC,QAAQ,GAAG,WAAH,GAAiB,WAA1B,CADZ,eAEE,oBAAC,IAAD;IACE,QAAQ,EAAEA,QAAQ,GAAG,YAAH,GAAkB,cADtC;IAEE,IAAI,EAAE;MAACY,MAAM,EAAE,EAAT;MAAaC,WAAW,EAAE;IAA1B;EAFR,EAFF,CADD,GAQG,IAVN,CADU,GAaR,IAhBN,eAiBE;IAAK,SAAS,EAAE9B,KAAK,CAAC+B;EAAtB,gBACE,oBAAC,sBAAD;IACE,uBAAuB,EAAE,CAAC,CAACtB,cAAc,CAACuB,IAAf,CAAoBL,MADjD;IAEE,OAAO,EAAEZ;EAFX,EADF,CAjBF,CAJF,CATF,eAsCE;IAAK,SAAS,EAAEf,KAAK,CAACiC;EAAtB,gBACE,oBAAC,gBAAD;IAAkB,cAAc,EAAExB;EAAlC,EADF,CAtCF,eAyCE,oBAAC,UAAD;IACE,OAAO,EAAEC,eADX;IAEE,YAAY,EAAEC,YAFhB;IAGE,OAAO,EAAEC,OAHX;IAIE,OAAO,EAAEC;EAJX,EAzCF,CADF,CADF;AAoDD,CAhFD;;AAkFAX,cAAc,CAACgC,YAAf,GAA8B;EAC5BC,IAAI,EAAE9C,QAAQ,CAAC+C,iBAAT,CAA2BD,IADL;EAE5BnB,SAAS,EAAE3B,QAAQ,CAAC+C,iBAAT,CAA2BpB;AAFV,CAA9B;AAKAd,cAAc,CAACmC,SAAf,2CAA2B;EACzBhC,KAAK,EAAElB,SAAS,CAACmD,MAAV,CAAiBC,UADC;EAEzBjC,WAAW,EAAER,mBAAmB,CAACuC,SAApB,CAA8BG,MAFlB;EAGzBjC,WAAW,EAAEpB,SAAS,CAACmD,MAAV,CAAiBC,UAHL;EAIzB/B,WAAW,EAAErB,SAAS,CAACmD,MAJE;EAKzB7B,cAAc,EAAEtB,SAAS,CAACsD,KAAV,CAAgB9C,SAAS,CAAC0C,SAA1B,CALS;EAMzB3B,eAAe,EAAEvB,SAAS,CAACsD,KAAV,CAAgB9C,SAAS,CAAC0C,SAA1B,CANQ;EAOzB1B,YAAY,EAAExB,SAAS,CAACuD,MAPC;EAQzB9B,OAAO,EAAEzB,SAAS,CAACsD,KAAV,CAAgB;IACvBE,QAAQ,EAAExD,SAAS,CAACyD,IADG;IAEvBC,OAAO,EAAE1D,SAAS,CAAC2D,OAAV,CAAkB3D,SAAS,CAACsD,KAAV,CAAgBjD,qBAAhB,CAAlB;EAFc,CAAhB,CARgB;EAYzBqB,OAAO,EAAE1B,SAAS,CAACsD,KAAV,CAAgBlD,MAAM,CAAC8C,SAAvB,CAZgB;EAazBvB,WAAW,EAAE3B,SAAS,CAACyD,IAbE;EAczB7B,uBAAuB,EAAE5B,SAAS,CAACyD;AAdV,CAA3B;AAiBA,eAAe1C,cAAf"}
+{"version":3,"file":"index.js","names":["React","useCallback","useState","PropTypes","classnames","Provider","Tag","Select","SelectOptionPropTypes","ButtonLinkIcon","Icon","CardsGrid","AllCourses","PlaylistDetailCover","ContinueLearningButton","style","DESCRIPTION_BREAKPOINT","PlaylistDetail","props","context","title","coverImages","playlistRef","description","ongoingCoursesAvailable","playlistCourses","filters","sorting","onBackClick","onContinueLearningClick","translate","showMore","setShowMore","handleShowMore","Description","truncate","backgroundContainer","container","backButton","ctaContainer","coverWrapper","length","showMoreWrapper","faSize","wrapperSize","continueLearningButton","contextTypes","skin","childContextTypes","propTypes","string","isRequired","images","bool","shape","onChange","func","options","arrayOf"],"sources":["../../../src/template/playlist-detail/index.js"],"sourcesContent":["import React, {useCallback, useState} from 'react';\nimport PropTypes from 'prop-types';\nimport classnames from 'classnames';\nimport Provider from '../../atom/provider';\nimport Tag from '../../atom/tag';\nimport Select, {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 PlaylistDetailCover from '../../molecule/playlist-detail-cover';\nimport {ContinueLearningButton} from '../skill-detail';\nimport style from './style.css';\n\nconst DESCRIPTION_BREAKPOINT = 382;\n\nconst PlaylistDetail = (props, context) => {\n  const {\n    title,\n    coverImages,\n    playlistRef,\n    description,\n    ongoingCoursesAvailable,\n    playlistCourses,\n    filters,\n    sorting,\n    onBackClick,\n    onContinueLearningClick\n  } = props;\n  const {translate} = context;\n\n  const [showMore, setShowMore] = useState(false);\n\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        {description}\n      </div>\n    );\n  }, [showMore, description]);\n\n  return (\n    <div className={style.backgroundContainer}>\n      <div className={style.container} data-name={playlistRef}>\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        <div className={style.ctaContainer}>\n          <div className={style.coverWrapper}>\n            <PlaylistDetailCover images={coverImages} />\n          </div>\n          <div>\n            <Tag label={translate('playlist')} />\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.continueLearningButton}>\n              <ContinueLearningButton\n                ongoingCoursesAvailable={ongoingCoursesAvailable}\n                onClick={onContinueLearningClick}\n              />\n            </div>\n          </div>\n        </div>\n        <AllCourses content={playlistCourses} filters={filters} sorting={sorting} />\n      </div>\n    </div>\n  );\n};\n\nPlaylistDetail.contextTypes = {\n  skin: Provider.childContextTypes.skin,\n  translate: Provider.childContextTypes.translate\n};\n\nPlaylistDetail.propTypes = {\n  title: PropTypes.string.isRequired,\n  coverImages: PlaylistDetailCover.propTypes.images,\n  playlistRef: PropTypes.string.isRequired,\n  description: PropTypes.string,\n  ongoingCoursesAvailable: PropTypes.bool,\n  playlistCourses: PropTypes.shape(CardsGrid.propTypes),\n  filters: PropTypes.shape({\n    onChange: PropTypes.func,\n    options: PropTypes.arrayOf(PropTypes.shape(SelectOptionPropTypes))\n  }),\n  sorting: PropTypes.shape(Select.propTypes),\n  onBackClick: PropTypes.func,\n  onContinueLearningClick: PropTypes.func\n};\n\nexport default PlaylistDetail;\n"],"mappings":"AAAA,OAAOA,KAAP,IAAeC,WAAf,EAA4BC,QAA5B,QAA2C,OAA3C;AACA,OAAOC,SAAP,MAAsB,YAAtB;AACA,OAAOC,UAAP,MAAuB,YAAvB;AACA,OAAOC,QAAP,MAAqB,qBAArB;AACA,OAAOC,GAAP,MAAgB,gBAAhB;AACA,OAAOC,MAAP,IAAgBC,qBAAhB,QAA4C,mBAA5C;AACA,OAAOC,cAAP,MAA2B,6BAA3B;AACA,OAAOC,IAAP,MAAiB,iBAAjB;AACA,OAAOC,SAAP,MAAsB,2BAAtB;AACA,OAAOC,UAAP,MAAuB,6BAAvB;AACA,OAAOC,mBAAP,MAAgC,sCAAhC;AACA,SAAQC,sBAAR,QAAqC,iBAArC;AACA,OAAOC,KAAP,MAAkB,aAAlB;AAEA,MAAMC,sBAAsB,GAAG,GAA/B;;AAEA,MAAMC,cAAc,GAAG,CAACC,KAAD,EAAQC,OAAR,KAAoB;EACzC,MAAM;IACJC,KADI;IAEJC,WAFI;IAGJC,WAHI;IAIJC,WAJI;IAKJC,uBALI;IAMJC,eANI;IAOJC,OAPI;IAQJC,OARI;IASJC,WATI;IAUJC;EAVI,IAWFX,KAXJ;EAYA,MAAM;IAACY;EAAD,IAAcX,OAApB;EAEA,MAAM,CAACY,QAAD,EAAWC,WAAX,IAA0B9B,QAAQ,CAAC,KAAD,CAAxC;EAEA,MAAM+B,cAAc,GAAGhC,WAAW,CAAC,MAAM+B,WAAW,CAAC,CAACD,QAAF,CAAlB,EAA+B,CAACC,WAAD,EAAcD,QAAd,CAA/B,CAAlC;EAEA,MAAMG,WAAW,GAAGjC,WAAW,CAAC,MAAM;IACpC,oBACE;MAAK,SAAS,EAAEG,UAAU,CAACW,KAAK,CAACQ,WAAP,EAAoB,CAACQ,QAAD,IAAahB,KAAK,CAACoB,QAAvC;IAA1B,GACGZ,WADH,CADF;EAKD,CAN8B,EAM5B,CAACQ,QAAD,EAAWR,WAAX,CAN4B,CAA/B;EAQA,oBACE;IAAK,SAAS,EAAER,KAAK,CAACqB;EAAtB,gBACE;IAAK,SAAS,EAAErB,KAAK,CAACsB,SAAtB;IAAiC,aAAWf;EAA5C,gBACE,oBAAC,cAAD;IACE,MAAM,EAAC,YADT;IAEE,aAAU,aAFZ;IAGE,cAAW,MAHb;IAIE,OAAO,EAAEM,WAJX;IAKE,SAAS,EAAEb,KAAK,CAACuB,UALnB;IAME,gBAAgB,EAAC;EANnB,EADF,eASE;IAAK,SAAS,EAAEvB,KAAK,CAACwB;EAAtB,gBACE;IAAK,SAAS,EAAExB,KAAK,CAACyB;EAAtB,gBACE,oBAAC,mBAAD;IAAqB,MAAM,EAAEnB;EAA7B,EADF,CADF,eAIE,8CACE,oBAAC,GAAD;IAAK,KAAK,EAAES,SAAS,CAAC,UAAD;EAArB,EADF,eAEE;IAAK,SAAS,EAAEf,KAAK,CAACK;EAAtB,GAA8BA,KAA9B,CAFF,EAGGG,WAAW,gBACV,uDACE,oBAAC,WAAD,OADF,EAEGA,WAAW,CAACkB,MAAZ,IAAsBzB,sBAAtB,gBACC;IAAK,SAAS,EAAED,KAAK,CAAC2B,eAAtB;IAAuC,OAAO,EAAET;EAAhD,GACGH,SAAS,CAACC,QAAQ,GAAG,WAAH,GAAiB,WAA1B,CADZ,eAEE,oBAAC,IAAD;IACE,QAAQ,EAAEA,QAAQ,GAAG,YAAH,GAAkB,cADtC;IAEE,IAAI,EAAE;MAACY,MAAM,EAAE,EAAT;MAAaC,WAAW,EAAE;IAA1B;EAFR,EAFF,CADD,GAQG,IAVN,CADU,GAaR,IAhBN,eAiBE;IAAK,SAAS,EAAE7B,KAAK,CAAC8B;EAAtB,gBACE,oBAAC,sBAAD;IACE,uBAAuB,EAAErB,uBAD3B;IAEE,OAAO,EAAEK;EAFX,EADF,CAjBF,CAJF,CATF,eAsCE,oBAAC,UAAD;IAAY,OAAO,EAAEJ,eAArB;IAAsC,OAAO,EAAEC,OAA/C;IAAwD,OAAO,EAAEC;EAAjE,EAtCF,CADF,CADF;AA4CD,CAvED;;AAyEAV,cAAc,CAAC6B,YAAf,GAA8B;EAC5BC,IAAI,EAAE1C,QAAQ,CAAC2C,iBAAT,CAA2BD,IADL;EAE5BjB,SAAS,EAAEzB,QAAQ,CAAC2C,iBAAT,CAA2BlB;AAFV,CAA9B;AAKAb,cAAc,CAACgC,SAAf,2CAA2B;EACzB7B,KAAK,EAAEjB,SAAS,CAAC+C,MAAV,CAAiBC,UADC;EAEzB9B,WAAW,EAAER,mBAAmB,CAACoC,SAApB,CAA8BG,MAFlB;EAGzB9B,WAAW,EAAEnB,SAAS,CAAC+C,MAAV,CAAiBC,UAHL;EAIzB5B,WAAW,EAAEpB,SAAS,CAAC+C,MAJE;EAKzB1B,uBAAuB,EAAErB,SAAS,CAACkD,IALV;EAMzB5B,eAAe,EAAEtB,SAAS,CAACmD,KAAV,CAAgB3C,SAAS,CAACsC,SAA1B,CANQ;EAOzBvB,OAAO,EAAEvB,SAAS,CAACmD,KAAV,CAAgB;IACvBC,QAAQ,EAAEpD,SAAS,CAACqD,IADG;IAEvBC,OAAO,EAAEtD,SAAS,CAACuD,OAAV,CAAkBvD,SAAS,CAACmD,KAAV,CAAgB9C,qBAAhB,CAAlB;EAFc,CAAhB,CAPgB;EAWzBmB,OAAO,EAAExB,SAAS,CAACmD,KAAV,CAAgB/C,MAAM,CAAC0C,SAAvB,CAXgB;EAYzBrB,WAAW,EAAEzB,SAAS,CAACqD,IAZE;EAazB3B,uBAAuB,EAAE1B,SAAS,CAACqD;AAbV,CAA3B;AAgBA,eAAevC,cAAf"}

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

@@ -91,10 +91,6 @@
   margin-top: 24px;
 }
 
-.continueLearningSection {
-  padding: 24px 0 32px 0;
-}
-
 @media tablet {
   .ctaContainer {
     flex-direction: column;

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

@@ -61,33 +61,27 @@ declare namespace SkillDetail {
     }
     export { contextTypes_1 as contextTypes };
     export namespace propTypes_1 {
-        const title: PropTypes.Validator<string>;
-        const skillRef: PropTypes.Validator<string>;
-        const description: PropTypes.Requireable<string>;
-        const metrics: PropTypes.Requireable<PropTypes.InferProps<{
+        export const title: PropTypes.Validator<string>;
+        export const skillRef: PropTypes.Validator<string>;
+        export const description: PropTypes.Requireable<string>;
+        export const metrics: PropTypes.Requireable<PropTypes.InferProps<{
             score: PropTypes.Requireable<number>;
             content: PropTypes.Requireable<number>;
             questionsToReview: PropTypes.Requireable<number>;
             contentCompleted: PropTypes.Requireable<number>;
         }>>;
-        const focused: PropTypes.Requireable<boolean>;
-        const availableForReview: PropTypes.Requireable<boolean>;
-        const ongoingCourses: PropTypes.Requireable<PropTypes.InferProps<{
+        export const focused: PropTypes.Requireable<boolean>;
+        export const availableForReview: PropTypes.Requireable<boolean>;
+        const ongoingCoursesAvailable_1: PropTypes.Requireable<boolean>;
+        export { ongoingCoursesAvailable_1 as ongoingCoursesAvailable };
+        export const skillIncludedCourses: 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 skillIncludedCourses: 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 totalCourses: PropTypes.Requireable<number>;
-        const filters: PropTypes.Requireable<PropTypes.InferProps<{
+        export const filters: PropTypes.Requireable<PropTypes.InferProps<{
             onChange: PropTypes.Requireable<(...args: any[]) => any>;
             options: PropTypes.Requireable<(PropTypes.InferProps<{
                 name: PropTypes.Validator<string>;
@@ -96,7 +90,7 @@ declare namespace SkillDetail {
                 validOption: PropTypes.Requireable<boolean>;
             }> | null | undefined)[]>;
         }>>;
-        const sorting: PropTypes.Requireable<PropTypes.InferProps<{
+        export const sorting: PropTypes.Requireable<PropTypes.InferProps<{
             title: PropTypes.Requireable<string>;
             name: PropTypes.Requireable<string>;
             className: PropTypes.Requireable<string>;
@@ -127,9 +121,9 @@ declare namespace SkillDetail {
             'aria-label': PropTypes.Requireable<string>;
             'aria-labelledby': PropTypes.Requireable<string>;
         }>>;
-        const onBackClick: PropTypes.Requireable<(...args: any[]) => any>;
-        const onReviewClick: PropTypes.Requireable<(...args: any[]) => any>;
-        const onContinueLearningClick: PropTypes.Requireable<(...args: any[]) => any>;
+        export const onBackClick: PropTypes.Requireable<(...args: any[]) => any>;
+        export const onReviewClick: PropTypes.Requireable<(...args: any[]) => any>;
+        export const onContinueLearningClick: PropTypes.Requireable<(...args: any[]) => any>;
     }
     export { propTypes_1 as propTypes };
 }

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

@@ -1 +1 @@
-{"version":3,"file":"index.d.ts","sourceRoot":"","sources":["../../../src/template/skill-detail/index.js"],"names":[],"mappings":"AAeO,8EA+BN;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;AAYD,oEA8JC"}
+{"version":3,"file":"index.d.ts","sourceRoot":"","sources":["../../../src/template/skill-detail/index.js"],"names":[],"mappings":"AAcO,8EA+BN;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;AAYD,oEAuJC"}

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

@@ -11,7 +11,6 @@ import Icon from '../../atom/icon';
 import CardsGrid from '../../organism/cards-grid';
 import style from './style.css';
 import AllCourses from './all-courses';
-import ContinueLearning from './continue-learning';
 export const ContinueLearningButton = (props, context) => {
   const {
     ongoingCoursesAvailable,
@@ -62,9 +61,8 @@ const SkillDetail = (props, context) => {
     metrics = {},
     focused,
     availableForReview,
-    ongoingCourses,
+    ongoingCoursesAvailable,
     skillIncludedCourses,
-    totalCourses,
     filters,
     sorting,
     onBackClick,
@@ -149,7 +147,7 @@ const SkillDetail = (props, context) => {
       borderRadius: '12px'
     }
   }), /*#__PURE__*/React.createElement(ContinueLearningButton, {
-    ongoingCoursesAvailable: !!ongoingCourses.list.length,
+    ongoingCoursesAvailable: ongoingCoursesAvailable,
     onClick: onContinueLearningClick
   }))), score !== undefined ? /*#__PURE__*/React.createElement("div", {
     className: style.progressInformationsWrapper
@@ -167,7 +165,7 @@ const SkillDetail = (props, context) => {
     "data-name": "skill-questions"
   }, /*#__PURE__*/React.createElement("span", {
     className: style.skillInformationNumber
-  }, questionsToReview), "\xA0", translate('questions')) : null), /*#__PURE__*/React.createElement(ProgressBar, null), /*#__PURE__*/React.createElement("div", {
+  }, questionsToReview), "\xA0", translate('skill_chart_side_panel_questions_to_review')) : null), /*#__PURE__*/React.createElement(ProgressBar, null), /*#__PURE__*/React.createElement("div", {
     className: style.progressInformations
   }, content && /*#__PURE__*/React.createElement(React.Fragment, null, /*#__PURE__*/React.createElement("div", {
     className: style.progressInformation,
@@ -179,11 +177,8 @@ const SkillDetail = (props, context) => {
     "data-name": "completed-percentage"
   }, /*#__PURE__*/React.createElement("span", {
     className: style.progressInformationNumber
-  }, score.toFixed(1), "%"))))) : null, /*#__PURE__*/React.createElement(ContinueLearning, {
-    ongoingCourses: ongoingCourses
-  }), /*#__PURE__*/React.createElement(AllCourses, {
-    courses: skillIncludedCourses,
-    totalCourses: totalCourses,
+  }, score.toFixed(1), "%"))))) : null, /*#__PURE__*/React.createElement(AllCourses, {
+    content: skillIncludedCourses,
     filters: filters,
     sorting: sorting
   })));
@@ -205,9 +200,8 @@ SkillDetail.propTypes = process.env.NODE_ENV !== "production" ? {
   }),
   focused: PropTypes.bool,
   availableForReview: PropTypes.bool,
-  ongoingCourses: PropTypes.shape(CardsGrid.propTypes),
+  ongoingCoursesAvailable: PropTypes.bool,
   skillIncludedCourses: PropTypes.shape(CardsGrid.propTypes),
-  totalCourses: PropTypes.number,
   filters: PropTypes.shape({
     onChange: PropTypes.func,
     options: PropTypes.arrayOf(PropTypes.shape(SelectOptionPropTypes))

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

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

package/lib/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,0EAsDC"}
+{"version":3,"file":"index.d.ts","sourceRoot":"","sources":["../../../src/molecule/certification-card/index.js"],"names":[],"mappings":";AAQA,0EAwDC"}

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

@@ -77,7 +77,8 @@ const CertificationCard = (props, context) => {
     label: translate('certification'),
     size: "S"
   }), /*#__PURE__*/_react.default.createElement("div", {
-    className: _style.default.title
+    className: _style.default.title,
+    "data-name": "certification-title"
   }, title), /*#__PURE__*/_react.default.createElement("div", {
     className: _style.default.moduleCount
   }, /*#__PURE__*/_react.default.createElement("span", null, nbDone), ` ${translate('certification_module')}`)), /*#__PURE__*/_react.default.createElement(_progressBar.default, {

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

@@ -1 +1 @@
-{"version":3,"file":"index.js","names":["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","style","container","top","right","imageWrapper","detailWrapper","titleWrapper","moduleCount","customProgressBar","COLORS","positive","contextTypes","Provider","childContextTypes","propTypes","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}>{title}</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":["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","style","container","top","right","imageWrapper","detailWrapper","titleWrapper","moduleCount","customProgressBar","COLORS","positive","contextTypes","Provider","childContextTypes","propTypes","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":";;;;;AAAA;;AACA;;AACA;;AACA;;AACA;;AACA;;AACA;;;;AAEA,MAAMA,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,EAAEC,cAAA,CAAMC,SAAtB;IAAiC,aAAY,sBAAqBvB,KAAM,EAAxE;IAA2E,OAAO,EAAEI;EAApF,GACGF,QAAQ,GAAG,CAAX,gBACC,6BAAC,YAAD;IACE,KAAK,EAAEQ,aADT;IAEE,IAAI,EAAEC,eAFR;IAGE,WAAW,EAAE;MAACE,QAAQ,EAAE,UAAX;MAAuBW,GAAG,EAAE,MAA5B;MAAoCC,KAAK,EAAE;IAA3C,CAHf;IAIE,IAAI,EAAEb;EAJR,EADD,GAOG,IARN,eASE;IAAK,SAAS,EAAEU,cAAA,CAAMI;EAAtB,gBACE;IAAK,GAAG,EAAEvB;EAAV,EADF,CATF,eAYE;IAAK,SAAS,EAAEmB,cAAA,CAAMK;EAAtB,gBACE;IAAK,SAAS,EAAEL,cAAA,CAAMM;EAAtB,gBACE,6BAAC,YAAD;IAAK,KAAK,EAAEpB,SAAS,CAAC,eAAD,CAArB;IAAwC,IAAI,EAAC;EAA7C,EADF,eAEE;IAAK,SAAS,EAAEc,cAAA,CAAMjB,KAAtB;IAA6B,aAAU;EAAvC,GACGA,KADH,CAFF,eAKE;IAAK,SAAS,EAAEiB,cAAA,CAAMO;EAAtB,gBACE,2CAAOtB,MAAP,CADF,EAEI,IAAGC,SAAS,CAAC,sBAAD,CAAyB,EAFzC,CALF,CADF,eAWE,6BAAC,oBAAD;IACE,SAAS,EAAEc,cAAA,CAAMQ,iBADnB;IAEE,KAAK,EAAE;MAACd,eAAe,EAAEe,cAAA,CAAOC;IAAzB,CAFT;IAGE,WAAW,EAAE,KAHf;IAIE,KAAK,EAAE9B,QAJT;IAKE,GAAG,EAAE;EALP,EAXF,CAZF,CADF;AAkCD,CAxDD;;AA0DAL,iBAAiB,CAACoC,YAAlB,GAAiC;EAC/BzB,SAAS,EAAE0B,iBAAA,CAASC,iBAAT,CAA2B3B;AADP,CAAjC;AAIAX,iBAAiB,CAACuC,SAAlB,2CAA8B;EAC5BpC,KAAK,EAAEqC,kBAAA,CAAUC,MADW;EAE5BrC,IAAI,EAAEoC,kBAAA,CAAUE,KAAV,CAAgB;IACpBlC,KAAK,EAAEgC,kBAAA,CAAUC,MADG;IAEpBhC,SAAS,EAAE+B,kBAAA,CAAUE,KAAV,CAAgB;MACzBhC,MAAM,EAAE8B,kBAAA,CAAUG;IADO,CAAhB;EAFS,CAAhB,CAFsB;EAQ5BtC,QAAQ,EAAEmC,kBAAA,CAAUG,MARQ;EAS5BrC,MAAM,EAAEkC,kBAAA,CAAUC,MATU;EAU5BlC,OAAO,EAAEiC,kBAAA,CAAUI;AAVS,CAA9B;eAae5C,iB"}

package/lib/molecule/progress-bar/index.d.ts.map

@@ -1 +1 @@
-{"version":3,"file":"index.d.ts","sourceRoot":"","sources":["../../../src/molecule/progress-bar/index.js"],"names":[],"mappings":";AAMA,sDAiCC"}
+{"version":3,"file":"index.d.ts","sourceRoot":"","sources":["../../../src/molecule/progress-bar/index.js"],"names":[],"mappings":";AAMA,sDAqCC"}

package/lib/molecule/progress-bar/index.js

@@ -35,7 +35,9 @@ const ProgressBar = props => {
     key: index
   }), steps);
   return /*#__PURE__*/_react.default.createElement("div", {
-    className: (0, _classnames.default)(_style.default.background, className)
+    className: (0, _classnames.default)(_style.default.background, className),
+    "data-name": "progress-bar-wrapper",
+    "data-content": `${text}`
   }, /*#__PURE__*/_react.default.createElement("div", {
     className: _style.default.progress,
     style: _extends({}, propsStyle, {

package/lib/molecule/progress-bar/index.js.map

@@ -1 +1 @@
-{"version":3,"file":"index.js","names":["ProgressBar","props","className","value","max","desc","steps","style","propsStyle","displayInfo","ratio","percentage","Math","floor","text","stepList","index","step","classnames","background","progress","width","texts","description","propTypes","PropTypes","string","number","isRequired","objectOf","oneOfType","bool"],"sources":["../../../src/molecule/progress-bar/index.js"],"sourcesContent":["import React from 'react';\nimport PropTypes from 'prop-types';\nimport classnames from 'classnames';\nimport {times} from 'lodash/fp';\nimport style from './style.css';\n\nconst ProgressBar = props => {\n  const {\n    className,\n    value,\n    max,\n    desc = '',\n    steps = 0,\n    style: propsStyle,\n    displayInfo = true\n  } = props;\n\n  const ratio = value / max;\n  const percentage = Math.floor(ratio * 100);\n  const text = `${percentage}%`;\n  const stepList = times(index => <div className={style.step} key={index} />, steps);\n  return (\n    <div className={classnames(style.background, className)}>\n      <div\n        className={style.progress}\n        style={{\n          ...propsStyle,\n          width: `${ratio * 100}%`\n        }}\n      />\n      {displayInfo ? (\n        <p className={style.texts}>\n          <span className={style.description}>{`${value}/${max} ${desc}`}</span>\n          <span className={style.percentage}>{text}</span>\n        </p>\n      ) : null}\n      <div className={style.steps}>{stepList}</div>\n    </div>\n  );\n};\n\nProgressBar.propTypes = {\n  className: PropTypes.string,\n  value: PropTypes.number.isRequired,\n  max: PropTypes.number.isRequired,\n  desc: PropTypes.string,\n  steps: PropTypes.number,\n  style: PropTypes.objectOf(PropTypes.oneOfType([PropTypes.string, PropTypes.number])),\n  displayInfo: PropTypes.bool\n};\n\nexport default ProgressBar;\n"],"mappings":";;;;;;;AAAA;;AACA;;AACA;;AAEA;;;;;;AAEA,MAAMA,WAAW,GAAGC,KAAK,IAAI;EAC3B,MAAM;IACJC,SADI;IAEJC,KAFI;IAGJC,GAHI;IAIJC,IAAI,GAAG,EAJH;IAKJC,KAAK,GAAG,CALJ;IAMJC,KAAK,EAAEC,UANH;IAOJC,WAAW,GAAG;EAPV,IAQFR,KARJ;EAUA,MAAMS,KAAK,GAAGP,KAAK,GAAGC,GAAtB;EACA,MAAMO,UAAU,GAAGC,IAAI,CAACC,KAAL,CAAWH,KAAK,GAAG,GAAnB,CAAnB;EACA,MAAMI,IAAI,GAAI,GAAEH,UAAW,GAA3B;EACA,MAAMI,QAAQ,GAAG,qBAAMC,KAAK,iBAAI;IAAK,SAAS,EAAET,cAAA,CAAMU,IAAtB;IAA4B,GAAG,EAAED;EAAjC,EAAf,EAA2DV,KAA3D,CAAjB;EACA,oBACE;IAAK,SAAS,EAAE,IAAAY,mBAAA,EAAWX,cAAA,CAAMY,UAAjB,EAA6BjB,SAA7B;EAAhB,gBACE;IACE,SAAS,EAAEK,cAAA,CAAMa,QADnB;IAEE,KAAK,eACAZ,UADA;MAEHa,KAAK,EAAG,GAAEX,KAAK,GAAG,GAAI;IAFnB;EAFP,EADF,EAQGD,WAAW,gBACV;IAAG,SAAS,EAAEF,cAAA,CAAMe;EAApB,gBACE;IAAM,SAAS,EAAEf,cAAA,CAAMgB;EAAvB,GAAsC,GAAEpB,KAAM,IAAGC,GAAI,IAAGC,IAAK,EAA7D,CADF,eAEE;IAAM,SAAS,EAAEE,cAAA,CAAMI;EAAvB,GAAoCG,IAApC,CAFF,CADU,GAKR,IAbN,eAcE;IAAK,SAAS,EAAEP,cAAA,CAAMD;EAAtB,GAA8BS,QAA9B,CAdF,CADF;AAkBD,CAjCD;;AAmCAf,WAAW,CAACwB,SAAZ,2CAAwB;EACtBtB,SAAS,EAAEuB,kBAAA,CAAUC,MADC;EAEtBvB,KAAK,EAAEsB,kBAAA,CAAUE,MAAV,CAAiBC,UAFF;EAGtBxB,GAAG,EAAEqB,kBAAA,CAAUE,MAAV,CAAiBC,UAHA;EAItBvB,IAAI,EAAEoB,kBAAA,CAAUC,MAJM;EAKtBpB,KAAK,EAAEmB,kBAAA,CAAUE,MALK;EAMtBpB,KAAK,EAAEkB,kBAAA,CAAUI,QAAV,CAAmBJ,kBAAA,CAAUK,SAAV,CAAoB,CAACL,kBAAA,CAAUC,MAAX,EAAmBD,kBAAA,CAAUE,MAA7B,CAApB,CAAnB,CANe;EAOtBlB,WAAW,EAAEgB,kBAAA,CAAUM;AAPD,CAAxB;eAUe/B,W"}
+{"version":3,"file":"index.js","names":["ProgressBar","props","className","value","max","desc","steps","style","propsStyle","displayInfo","ratio","percentage","Math","floor","text","stepList","index","step","classnames","background","progress","width","texts","description","propTypes","PropTypes","string","number","isRequired","objectOf","oneOfType","bool"],"sources":["../../../src/molecule/progress-bar/index.js"],"sourcesContent":["import React from 'react';\nimport PropTypes from 'prop-types';\nimport classnames from 'classnames';\nimport {times} from 'lodash/fp';\nimport style from './style.css';\n\nconst ProgressBar = props => {\n  const {\n    className,\n    value,\n    max,\n    desc = '',\n    steps = 0,\n    style: propsStyle,\n    displayInfo = true\n  } = props;\n\n  const ratio = value / max;\n  const percentage = Math.floor(ratio * 100);\n  const text = `${percentage}%`;\n  const stepList = times(index => <div className={style.step} key={index} />, steps);\n  return (\n    <div\n      className={classnames(style.background, className)}\n      data-name=\"progress-bar-wrapper\"\n      data-content={`${text}`}\n    >\n      <div\n        className={style.progress}\n        style={{\n          ...propsStyle,\n          width: `${ratio * 100}%`\n        }}\n      />\n      {displayInfo ? (\n        <p className={style.texts}>\n          <span className={style.description}>{`${value}/${max} ${desc}`}</span>\n          <span className={style.percentage}>{text}</span>\n        </p>\n      ) : null}\n      <div className={style.steps}>{stepList}</div>\n    </div>\n  );\n};\n\nProgressBar.propTypes = {\n  className: PropTypes.string,\n  value: PropTypes.number.isRequired,\n  max: PropTypes.number.isRequired,\n  desc: PropTypes.string,\n  steps: PropTypes.number,\n  style: PropTypes.objectOf(PropTypes.oneOfType([PropTypes.string, PropTypes.number])),\n  displayInfo: PropTypes.bool\n};\n\nexport default ProgressBar;\n"],"mappings":";;;;;;;AAAA;;AACA;;AACA;;AAEA;;;;;;AAEA,MAAMA,WAAW,GAAGC,KAAK,IAAI;EAC3B,MAAM;IACJC,SADI;IAEJC,KAFI;IAGJC,GAHI;IAIJC,IAAI,GAAG,EAJH;IAKJC,KAAK,GAAG,CALJ;IAMJC,KAAK,EAAEC,UANH;IAOJC,WAAW,GAAG;EAPV,IAQFR,KARJ;EAUA,MAAMS,KAAK,GAAGP,KAAK,GAAGC,GAAtB;EACA,MAAMO,UAAU,GAAGC,IAAI,CAACC,KAAL,CAAWH,KAAK,GAAG,GAAnB,CAAnB;EACA,MAAMI,IAAI,GAAI,GAAEH,UAAW,GAA3B;EACA,MAAMI,QAAQ,GAAG,qBAAMC,KAAK,iBAAI;IAAK,SAAS,EAAET,cAAA,CAAMU,IAAtB;IAA4B,GAAG,EAAED;EAAjC,EAAf,EAA2DV,KAA3D,CAAjB;EACA,oBACE;IACE,SAAS,EAAE,IAAAY,mBAAA,EAAWX,cAAA,CAAMY,UAAjB,EAA6BjB,SAA7B,CADb;IAEE,aAAU,sBAFZ;IAGE,gBAAe,GAAEY,IAAK;EAHxB,gBAKE;IACE,SAAS,EAAEP,cAAA,CAAMa,QADnB;IAEE,KAAK,eACAZ,UADA;MAEHa,KAAK,EAAG,GAAEX,KAAK,GAAG,GAAI;IAFnB;EAFP,EALF,EAYGD,WAAW,gBACV;IAAG,SAAS,EAAEF,cAAA,CAAMe;EAApB,gBACE;IAAM,SAAS,EAAEf,cAAA,CAAMgB;EAAvB,GAAsC,GAAEpB,KAAM,IAAGC,GAAI,IAAGC,IAAK,EAA7D,CADF,eAEE;IAAM,SAAS,EAAEE,cAAA,CAAMI;EAAvB,GAAoCG,IAApC,CAFF,CADU,GAKR,IAjBN,eAkBE;IAAK,SAAS,EAAEP,cAAA,CAAMD;EAAtB,GAA8BS,QAA9B,CAlBF,CADF;AAsBD,CArCD;;AAuCAf,WAAW,CAACwB,SAAZ,2CAAwB;EACtBtB,SAAS,EAAEuB,kBAAA,CAAUC,MADC;EAEtBvB,KAAK,EAAEsB,kBAAA,CAAUE,MAAV,CAAiBC,UAFF;EAGtBxB,GAAG,EAAEqB,kBAAA,CAAUE,MAAV,CAAiBC,UAHA;EAItBvB,IAAI,EAAEoB,kBAAA,CAAUC,MAJM;EAKtBpB,KAAK,EAAEmB,kBAAA,CAAUE,MALK;EAMtBpB,KAAK,EAAEkB,kBAAA,CAAUI,QAAV,CAAmBJ,kBAAA,CAAUK,SAAV,CAAoB,CAACL,kBAAA,CAAUC,MAAX,EAAmBD,kBAAA,CAAUE,MAA7B,CAApB,CAAnB,CANe;EAOtBlB,WAAW,EAAEgB,kBAAA,CAAUM;AAPD,CAAxB;eAUe/B,W"}

package/lib/template/certifications/index.js

@@ -45,7 +45,8 @@ const Certifications = (props, context) => {
     setShowCompleted(!showCompleted);
   }, [showCompleted, setShowCompleted]);
   return /*#__PURE__*/_react.default.createElement("div", {
-    className: _style.default.container
+    className: _style.default.container,
+    "data-name": "Certifications"
   }, /*#__PURE__*/_react.default.createElement(_title.default, {
     title: translate('certificates'),
     subtitle: translate('certificates_subtitle'),

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

@@ -1 +1 @@
-{"version":3,"file":"index.js","names":["Certifications","props","context","certifications","sorting","translate","showCompleted","setShowCompleted","useState","sortView","undefined","handleShowCompletedToggle","useCallback","style","container","iconName","iconColor","borderRadius","backgroundColor","sortSectionWrapper","certificatesCount","length","sortSection","sortWrapper","certificateList","map","certification","progress","label","contextTypes","Provider","childContextTypes","propTypes","PropTypes","arrayOf","shape","string","goal","title","condition","nbDone","number","imgUrl","onClick","func","Select"],"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}>\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":["Certifications","props","context","certifications","sorting","translate","showCompleted","setShowCompleted","useState","sortView","undefined","handleShowCompletedToggle","useCallback","style","container","iconName","iconColor","borderRadius","backgroundColor","sortSectionWrapper","certificatesCount","length","sortSection","sortWrapper","certificateList","map","certification","progress","label","contextTypes","Provider","childContextTypes","propTypes","PropTypes","arrayOf","shape","string","goal","title","condition","nbDone","number","imgUrl","onClick","func","Select"],"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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"}

package/lib/template/certifications/style.css

@@ -31,7 +31,7 @@
   justify-content: space-between;
   flex-wrap: wrap;
   align-items: center;
-  margin-top: 4px;
+  margin: 16px 0 16px 0;
 }
 
 .sortSection {

package/lib/template/playlist-detail/index.d.ts

@@ -33,13 +33,7 @@ declare namespace PlaylistDetail {
         }> | null | undefined)[]>;
         const playlistRef: PropTypes.Validator<string>;
         const description: PropTypes.Requireable<string>;
-        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 ongoingCoursesAvailable: PropTypes.Requireable<boolean>;
         const playlistCourses: PropTypes.Requireable<PropTypes.InferProps<{
             list: PropTypes.Requireable<(PropTypes.InferProps<any> | null | undefined)[]>;
             customStyle: PropTypes.Requireable<{
@@ -47,7 +41,6 @@ declare namespace PlaylistDetail {
             }>;
             loading: PropTypes.Requireable<boolean>;
         }>>;
-        const totalCourses: PropTypes.Requireable<number>;
         const filters: PropTypes.Requireable<PropTypes.InferProps<{
             onChange: PropTypes.Requireable<(...args: any[]) => any>;
             options: PropTypes.Requireable<(PropTypes.InferProps<{

package/lib/template/playlist-detail/index.d.ts.map

@@ -1 +1 @@
-{"version":3,"file":"index.d.ts","sourceRoot":"","sources":["../../../src/template/playlist-detail/index.js"],"names":[],"mappings":";AAiBA,uEAgFC"}
+{"version":3,"file":"index.d.ts","sourceRoot":"","sources":["../../../src/template/playlist-detail/index.js"],"names":[],"mappings":";AAgBA,uEAuEC"}

package/lib/template/playlist-detail/index.js

@@ -23,8 +23,6 @@ var _cardsGrid = _interopRequireDefault(require("../../organism/cards-grid"));
 
 var _allCourses = _interopRequireDefault(require("../skill-detail/all-courses"));
 
-var _continueLearning = _interopRequireDefault(require("../skill-detail/continue-learning"));
-
 var _playlistDetailCover = _interopRequireDefault(require("../../molecule/playlist-detail-cover"));
 
 var _skillDetail = require("../skill-detail");
@@ -45,9 +43,8 @@ const PlaylistDetail = (props, context) => {
     coverImages,
     playlistRef,
     description,
-    ongoingCourses,
+    ongoingCoursesAvailable,
     playlistCourses,
-    totalCourses,
     filters,
     sorting,
     onBackClick,
@@ -97,15 +94,10 @@ const PlaylistDetail = (props, context) => {
   })) : null) : null, /*#__PURE__*/_react.default.createElement("div", {
     className: _style.default.continueLearningButton
   }, /*#__PURE__*/_react.default.createElement(_skillDetail.ContinueLearningButton, {
-    ongoingCoursesAvailable: !!ongoingCourses.list.length,
+    ongoingCoursesAvailable: ongoingCoursesAvailable,
     onClick: onContinueLearningClick
-  })))), /*#__PURE__*/_react.default.createElement("div", {
-    className: _style.default.continueLearningSection
-  }, /*#__PURE__*/_react.default.createElement(_continueLearning.default, {
-    ongoingCourses: ongoingCourses
-  })), /*#__PURE__*/_react.default.createElement(_allCourses.default, {
-    courses: playlistCourses,
-    totalCourses: totalCourses,
+  })))), /*#__PURE__*/_react.default.createElement(_allCourses.default, {
+    content: playlistCourses,
     filters: filters,
     sorting: sorting
   })));
@@ -120,9 +112,8 @@ PlaylistDetail.propTypes = process.env.NODE_ENV !== "production" ? {
   coverImages: _playlistDetailCover.default.propTypes.images,
   playlistRef: _propTypes.default.string.isRequired,
   description: _propTypes.default.string,
-  ongoingCourses: _propTypes.default.shape(_cardsGrid.default.propTypes),
+  ongoingCoursesAvailable: _propTypes.default.bool,
   playlistCourses: _propTypes.default.shape(_cardsGrid.default.propTypes),
-  totalCourses: _propTypes.default.number,
   filters: _propTypes.default.shape({
     onChange: _propTypes.default.func,
     options: _propTypes.default.arrayOf(_propTypes.default.shape(_select.SelectOptionPropTypes))

package/lib/template/playlist-detail/index.js.map

@@ -1 +1 @@
-{"version":3,"file":"index.js","names":["DESCRIPTION_BREAKPOINT","PlaylistDetail","props","context","title","coverImages","playlistRef","description","ongoingCourses","playlistCourses","totalCourses","filters","sorting","onBackClick","onContinueLearningClick","translate","showMore","setShowMore","useState","handleShowMore","useCallback","Description","classnames","style","truncate","backgroundContainer","container","backButton","ctaContainer","coverWrapper","length","showMoreWrapper","faSize","wrapperSize","continueLearningButton","list","continueLearningSection","contextTypes","skin","Provider","childContextTypes","propTypes","PropTypes","string","isRequired","PlaylistDetailCover","images","shape","CardsGrid","number","onChange","func","options","arrayOf","SelectOptionPropTypes","Select"],"sources":["../../../src/template/playlist-detail/index.js"],"sourcesContent":["import React, {useCallback, useState} from 'react';\nimport PropTypes from 'prop-types';\nimport classnames from 'classnames';\nimport Provider from '../../atom/provider';\nimport Tag from '../../atom/tag';\nimport Select, {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 ContinueLearning from '../skill-detail/continue-learning';\nimport PlaylistDetailCover from '../../molecule/playlist-detail-cover';\nimport {ContinueLearningButton} from '../skill-detail';\nimport style from './style.css';\n\nconst DESCRIPTION_BREAKPOINT = 382;\n\nconst PlaylistDetail = (props, context) => {\n  const {\n    title,\n    coverImages,\n    playlistRef,\n    description,\n    ongoingCourses,\n    playlistCourses,\n    totalCourses,\n    filters,\n    sorting,\n    onBackClick,\n    onContinueLearningClick\n  } = props;\n  const {translate} = context;\n\n  const [showMore, setShowMore] = useState(false);\n\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        {description}\n      </div>\n    );\n  }, [showMore, description]);\n\n  return (\n    <div className={style.backgroundContainer}>\n      <div className={style.container} data-name={playlistRef}>\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        <div className={style.ctaContainer}>\n          <div className={style.coverWrapper}>\n            <PlaylistDetailCover images={coverImages} />\n          </div>\n          <div>\n            <Tag label={translate('playlist')} />\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.continueLearningButton}>\n              <ContinueLearningButton\n                ongoingCoursesAvailable={!!ongoingCourses.list.length}\n                onClick={onContinueLearningClick}\n              />\n            </div>\n          </div>\n        </div>\n        <div className={style.continueLearningSection}>\n          <ContinueLearning ongoingCourses={ongoingCourses} />\n        </div>\n        <AllCourses\n          courses={playlistCourses}\n          totalCourses={totalCourses}\n          filters={filters}\n          sorting={sorting}\n        />\n      </div>\n    </div>\n  );\n};\n\nPlaylistDetail.contextTypes = {\n  skin: Provider.childContextTypes.skin,\n  translate: Provider.childContextTypes.translate\n};\n\nPlaylistDetail.propTypes = {\n  title: PropTypes.string.isRequired,\n  coverImages: PlaylistDetailCover.propTypes.images,\n  playlistRef: PropTypes.string.isRequired,\n  description: PropTypes.string,\n  ongoingCourses: PropTypes.shape(CardsGrid.propTypes),\n  playlistCourses: PropTypes.shape(CardsGrid.propTypes),\n  totalCourses: PropTypes.number,\n  filters: PropTypes.shape({\n    onChange: PropTypes.func,\n    options: PropTypes.arrayOf(PropTypes.shape(SelectOptionPropTypes))\n  }),\n  sorting: PropTypes.shape(Select.propTypes),\n  onBackClick: PropTypes.func,\n  onContinueLearningClick: PropTypes.func\n};\n\nexport default PlaylistDetail;\n"],"mappings":"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"}
+{"version":3,"file":"index.js","names":["DESCRIPTION_BREAKPOINT","PlaylistDetail","props","context","title","coverImages","playlistRef","description","ongoingCoursesAvailable","playlistCourses","filters","sorting","onBackClick","onContinueLearningClick","translate","showMore","setShowMore","useState","handleShowMore","useCallback","Description","classnames","style","truncate","backgroundContainer","container","backButton","ctaContainer","coverWrapper","length","showMoreWrapper","faSize","wrapperSize","continueLearningButton","contextTypes","skin","Provider","childContextTypes","propTypes","PropTypes","string","isRequired","PlaylistDetailCover","images","bool","shape","CardsGrid","onChange","func","options","arrayOf","SelectOptionPropTypes","Select"],"sources":["../../../src/template/playlist-detail/index.js"],"sourcesContent":["import React, {useCallback, useState} from 'react';\nimport PropTypes from 'prop-types';\nimport classnames from 'classnames';\nimport Provider from '../../atom/provider';\nimport Tag from '../../atom/tag';\nimport Select, {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 PlaylistDetailCover from '../../molecule/playlist-detail-cover';\nimport {ContinueLearningButton} from '../skill-detail';\nimport style from './style.css';\n\nconst DESCRIPTION_BREAKPOINT = 382;\n\nconst PlaylistDetail = (props, context) => {\n  const {\n    title,\n    coverImages,\n    playlistRef,\n    description,\n    ongoingCoursesAvailable,\n    playlistCourses,\n    filters,\n    sorting,\n    onBackClick,\n    onContinueLearningClick\n  } = props;\n  const {translate} = context;\n\n  const [showMore, setShowMore] = useState(false);\n\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        {description}\n      </div>\n    );\n  }, [showMore, description]);\n\n  return (\n    <div className={style.backgroundContainer}>\n      <div className={style.container} data-name={playlistRef}>\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        <div className={style.ctaContainer}>\n          <div className={style.coverWrapper}>\n            <PlaylistDetailCover images={coverImages} />\n          </div>\n          <div>\n            <Tag label={translate('playlist')} />\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.continueLearningButton}>\n              <ContinueLearningButton\n                ongoingCoursesAvailable={ongoingCoursesAvailable}\n                onClick={onContinueLearningClick}\n              />\n            </div>\n          </div>\n        </div>\n        <AllCourses content={playlistCourses} filters={filters} sorting={sorting} />\n      </div>\n    </div>\n  );\n};\n\nPlaylistDetail.contextTypes = {\n  skin: Provider.childContextTypes.skin,\n  translate: Provider.childContextTypes.translate\n};\n\nPlaylistDetail.propTypes = {\n  title: PropTypes.string.isRequired,\n  coverImages: PlaylistDetailCover.propTypes.images,\n  playlistRef: PropTypes.string.isRequired,\n  description: PropTypes.string,\n  ongoingCoursesAvailable: PropTypes.bool,\n  playlistCourses: PropTypes.shape(CardsGrid.propTypes),\n  filters: PropTypes.shape({\n    onChange: PropTypes.func,\n    options: PropTypes.arrayOf(PropTypes.shape(SelectOptionPropTypes))\n  }),\n  sorting: PropTypes.shape(Select.propTypes),\n  onBackClick: PropTypes.func,\n  onContinueLearningClick: PropTypes.func\n};\n\nexport default PlaylistDetail;\n"],"mappings":"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"}

package/lib/template/playlist-detail/style.css

@@ -91,10 +91,6 @@
   margin-top: 24px;
 }
 
-.continueLearningSection {
-  padding: 24px 0 32px 0;
-}
-
 @media tablet {
   .ctaContainer {
     flex-direction: column;

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

@@ -61,33 +61,27 @@ declare namespace SkillDetail {
     }
     export { contextTypes_1 as contextTypes };
     export namespace propTypes_1 {
-        const title: PropTypes.Validator<string>;
-        const skillRef: PropTypes.Validator<string>;
-        const description: PropTypes.Requireable<string>;
-        const metrics: PropTypes.Requireable<PropTypes.InferProps<{
+        export const title: PropTypes.Validator<string>;
+        export const skillRef: PropTypes.Validator<string>;
+        export const description: PropTypes.Requireable<string>;
+        export const metrics: PropTypes.Requireable<PropTypes.InferProps<{
             score: PropTypes.Requireable<number>;
             content: PropTypes.Requireable<number>;
             questionsToReview: PropTypes.Requireable<number>;
             contentCompleted: PropTypes.Requireable<number>;
         }>>;
-        const focused: PropTypes.Requireable<boolean>;
-        const availableForReview: PropTypes.Requireable<boolean>;
-        const ongoingCourses: PropTypes.Requireable<PropTypes.InferProps<{
+        export const focused: PropTypes.Requireable<boolean>;
+        export const availableForReview: PropTypes.Requireable<boolean>;
+        const ongoingCoursesAvailable_1: PropTypes.Requireable<boolean>;
+        export { ongoingCoursesAvailable_1 as ongoingCoursesAvailable };
+        export const skillIncludedCourses: 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 skillIncludedCourses: 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 totalCourses: PropTypes.Requireable<number>;
-        const filters: PropTypes.Requireable<PropTypes.InferProps<{
+        export const filters: PropTypes.Requireable<PropTypes.InferProps<{
             onChange: PropTypes.Requireable<(...args: any[]) => any>;
             options: PropTypes.Requireable<(PropTypes.InferProps<{
                 name: PropTypes.Validator<string>;
@@ -96,7 +90,7 @@ declare namespace SkillDetail {
                 validOption: PropTypes.Requireable<boolean>;
             }> | null | undefined)[]>;
         }>>;
-        const sorting: PropTypes.Requireable<PropTypes.InferProps<{
+        export const sorting: PropTypes.Requireable<PropTypes.InferProps<{
             title: PropTypes.Requireable<string>;
             name: PropTypes.Requireable<string>;
             className: PropTypes.Requireable<string>;
@@ -127,9 +121,9 @@ declare namespace SkillDetail {
             'aria-label': PropTypes.Requireable<string>;
             'aria-labelledby': PropTypes.Requireable<string>;
         }>>;
-        const onBackClick: PropTypes.Requireable<(...args: any[]) => any>;
-        const onReviewClick: PropTypes.Requireable<(...args: any[]) => any>;
-        const onContinueLearningClick: PropTypes.Requireable<(...args: any[]) => any>;
+        export const onBackClick: PropTypes.Requireable<(...args: any[]) => any>;
+        export const onReviewClick: PropTypes.Requireable<(...args: any[]) => any>;
+        export const onContinueLearningClick: PropTypes.Requireable<(...args: any[]) => any>;
     }
     export { propTypes_1 as propTypes };
 }

package/lib/template/skill-detail/index.d.ts.map

@@ -1 +1 @@
-{"version":3,"file":"index.d.ts","sourceRoot":"","sources":["../../../src/template/skill-detail/index.js"],"names":[],"mappings":"AAeO,8EA+BN;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;AAYD,oEA8JC"}
+{"version":3,"file":"index.d.ts","sourceRoot":"","sources":["../../../src/template/skill-detail/index.js"],"names":[],"mappings":"AAcO,8EA+BN;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;AAYD,oEAuJC"}

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

@@ -29,8 +29,6 @@ var _style = _interopRequireDefault(require("./style.css"));
 
 var _allCourses = _interopRequireDefault(require("./all-courses"));
 
-var _continueLearning = _interopRequireDefault(require("./continue-learning"));
-
 function _getRequireWildcardCache(nodeInterop) { if (typeof WeakMap !== "function") return null; var cacheBabelInterop = new WeakMap(); var cacheNodeInterop = new WeakMap(); return (_getRequireWildcardCache = function (nodeInterop) { return nodeInterop ? cacheNodeInterop : cacheBabelInterop; })(nodeInterop); }
 
 function _interopRequireWildcard(obj, nodeInterop) { if (!nodeInterop && obj && obj.__esModule) { return obj; } if (obj === null || typeof obj !== "object" && typeof obj !== "function") { return { default: obj }; } var cache = _getRequireWildcardCache(nodeInterop); if (cache && cache.has(obj)) { return cache.get(obj); } var newObj = {}; var hasPropertyDescriptor = Object.defineProperty && Object.getOwnPropertyDescriptor; for (var key in obj) { if (key !== "default" && Object.prototype.hasOwnProperty.call(obj, key)) { var desc = hasPropertyDescriptor ? Object.getOwnPropertyDescriptor(obj, key) : null; if (desc && (desc.get || desc.set)) { Object.defineProperty(newObj, key, desc); } else { newObj[key] = obj[key]; } } } newObj.default = obj; if (cache) { cache.set(obj, newObj); } return newObj; }
@@ -87,9 +85,8 @@ const SkillDetail = (props, context) => {
     metrics = {},
     focused,
     availableForReview,
-    ongoingCourses,
+    ongoingCoursesAvailable,
     skillIncludedCourses,
-    totalCourses,
     filters,
     sorting,
     onBackClick,
@@ -174,7 +171,7 @@ const SkillDetail = (props, context) => {
       borderRadius: '12px'
     }
   }), /*#__PURE__*/_react.default.createElement(ContinueLearningButton, {
-    ongoingCoursesAvailable: !!ongoingCourses.list.length,
+    ongoingCoursesAvailable: ongoingCoursesAvailable,
     onClick: onContinueLearningClick
   }))), score !== undefined ? /*#__PURE__*/_react.default.createElement("div", {
     className: _style.default.progressInformationsWrapper
@@ -192,7 +189,7 @@ const SkillDetail = (props, context) => {
     "data-name": "skill-questions"
   }, /*#__PURE__*/_react.default.createElement("span", {
     className: _style.default.skillInformationNumber
-  }, questionsToReview), "\xA0", translate('questions')) : null), /*#__PURE__*/_react.default.createElement(ProgressBar, null), /*#__PURE__*/_react.default.createElement("div", {
+  }, questionsToReview), "\xA0", translate('skill_chart_side_panel_questions_to_review')) : null), /*#__PURE__*/_react.default.createElement(ProgressBar, null), /*#__PURE__*/_react.default.createElement("div", {
     className: _style.default.progressInformations
   }, content && /*#__PURE__*/_react.default.createElement(_react.default.Fragment, null, /*#__PURE__*/_react.default.createElement("div", {
     className: _style.default.progressInformation,
@@ -204,11 +201,8 @@ const SkillDetail = (props, context) => {
     "data-name": "completed-percentage"
   }, /*#__PURE__*/_react.default.createElement("span", {
     className: _style.default.progressInformationNumber
-  }, score.toFixed(1), "%"))))) : null, /*#__PURE__*/_react.default.createElement(_continueLearning.default, {
-    ongoingCourses: ongoingCourses
-  }), /*#__PURE__*/_react.default.createElement(_allCourses.default, {
-    courses: skillIncludedCourses,
-    totalCourses: totalCourses,
+  }, score.toFixed(1), "%"))))) : null, /*#__PURE__*/_react.default.createElement(_allCourses.default, {
+    content: skillIncludedCourses,
     filters: filters,
     sorting: sorting
   })));
@@ -230,9 +224,8 @@ SkillDetail.propTypes = process.env.NODE_ENV !== "production" ? {
   }),
   focused: _propTypes.default.bool,
   availableForReview: _propTypes.default.bool,
-  ongoingCourses: _propTypes.default.shape(_cardsGrid.default.propTypes),
+  ongoingCoursesAvailable: _propTypes.default.bool,
   skillIncludedCourses: _propTypes.default.shape(_cardsGrid.default.propTypes),
-  totalCourses: _propTypes.default.number,
   filters: _propTypes.default.shape({
     onChange: _propTypes.default.func,
     options: _propTypes.default.arrayOf(_propTypes.default.shape(_select.SelectOptionPropTypes))

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

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

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@coorpacademy/components",
-  "version": "11.32.36",
+  "version": "11.32.37-alpha.4+0c1c3b393",
   "description": "",
   "main": "lib/index.js",
   "module": "es/index.js",
@@ -177,5 +177,5 @@
     "last 2 versions",
     "IE 11"
   ],
-  "gitHead": "d2a79e00cc6f3772a47dc8785e3e170eacec5153"
+  "gitHead": "0c1c3b3938269cf655b47e312db8368097931b0e"
 }