@coorpacademy/components 11.32.12 → 11.32.13

package/es/molecule/discipline-header/index.d.ts

@@ -50,7 +50,7 @@ declare class DisciplineHeader extends React.Component<any, any, any> {
         scrollHeightShowMore: number;
     };
     handleToggleDisplay(): void;
-    setHandle(el: any): void;
+    setHandle(): void;
     render(): JSX.Element;
 }
 import React from "react";

package/es/molecule/discipline-header/index.d.ts.map

@@ -1 +1 @@
-{"version":3,"file":"index.d.ts","sourceRoot":"","sources":["../../../src/molecule/discipline-header/index.js"],"names":[],"mappings":";AA4BA;IACE;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;MAME;IAEF;;MAEE;IAEF,wBAQC;IANC;;;MAGC;IAKH,4BAIC;IAED,yBAEC;IAED,sBAuDC;CACF"}
+{"version":3,"file":"index.d.ts","sourceRoot":"","sources":["../../../src/molecule/discipline-header/index.js"],"names":[],"mappings":";AA4BA;IACE;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;MAME;IAEF;;MAEE;IAEF,wBAQC;IANC;;;MAGC;IAKH,4BAIC;IAED,kBAGC;IAED,sBAwDC;CACF"}

package/es/molecule/discipline-header/index.js

@@ -55,7 +55,8 @@ class DisciplineHeader extends React.Component {
     }));
   }
 
-  setHandle(el) {
+  setHandle() {
+    const el = document.getElementById('discipline-summary');
     this.setState({
       scrollHeightShowMore: getOr(0, 'scrollHeight', el)
     });
@@ -85,13 +86,15 @@ class DisciplineHeader extends React.Component {
       "data-name": "disciplineHeader",
       className: style.wrapper
     }, hasMediaContent ? /*#__PURE__*/React.createElement("div", {
-      className: style.imgWrapper
+      className: style.imgWrapper,
+      ref: this.setHandle
     }, /*#__PURE__*/React.createElement(Preview, {
       image: image,
       video: video
     })) : null, /*#__PURE__*/React.createElement("div", {
       className: style.courseWrapper
     }, /*#__PURE__*/React.createElement("div", {
+      id: "discipline-summary",
       className: fullDisplay ? style.courseTextWrapperFull : style.courseTextWrapperShort,
       ref: this.setHandle
     }, /*#__PURE__*/React.createElement("div", {

package/es/molecule/discipline-header/index.js.map

@@ -1 +1 @@
-{"version":3,"file":"index.js","names":["React","PropTypes","get","getOr","classnames","NovaSolidSynchronizeSynchronize3","SyncIcon","VideoPlayer","Picture","style","Preview","image","video","mimeType","id","jwpOptions","propTypes","src","shape","DisciplineHeader","Component","constructor","props","state","fullDisplay","scrollHeightShowMore","handleToggleDisplay","bind","setHandle","setState","prevState","el","render","title","description","lastUpdated","translate","context","maxHeightCourseInfos","hasMediaContent","toggleLabel","shortCourseText","courseSeeMoreButtonStyle","showMoreHidden","showMore","wrapper","imgWrapper","courseWrapper","courseTextWrapperFull","courseTextWrapperShort","innerHTML","__html","lastUpdatedWrapper","lastUpdatedWrapperShort","syncIcon","lastUpdatedText","contextTypes","func","string"],"sources":["../../../src/molecule/discipline-header/index.js"],"sourcesContent":["import React from 'react';\nimport PropTypes from 'prop-types';\nimport get from 'lodash/fp/get';\nimport getOr from 'lodash/fp/getOr';\nimport classnames from 'classnames';\nimport {NovaSolidSynchronizeSynchronize3 as SyncIcon} from '@coorpacademy/nova-icons';\nimport VideoPlayer from '../video-player';\nimport Picture from '../../atom/picture';\nimport style from './style.css';\n\nconst Preview = ({image, video}) => {\n  const mimeType = get('mimeType', video);\n  const id = get('id', video);\n  const jwpOptions = get('jwpOptions', video);\n  if (id) {\n    return <VideoPlayer mimeType={mimeType} id={id} width=\"380px\" height=\"250px\" />;\n  } else if (jwpOptions) {\n    return <VideoPlayer {...video} />;\n  } else {\n    return <Picture className={style.image} src={image} />;\n  }\n};\n\nPreview.propTypes = {\n  image: Picture.propTypes.src,\n  video: PropTypes.shape(VideoPlayer.propTypes)\n};\n\nclass DisciplineHeader extends React.Component {\n  static propTypes = {\n    title: PropTypes.string,\n    description: PropTypes.string,\n    image: Preview.propTypes.image,\n    video: Preview.propTypes.video,\n    lastUpdated: PropTypes.string\n  };\n\n  static contextTypes = {\n    translate: PropTypes.func\n  };\n\n  constructor(props) {\n    super(props);\n    this.state = {\n      fullDisplay: false,\n      scrollHeightShowMore: 0\n    };\n    this.handleToggleDisplay = this.handleToggleDisplay.bind(this);\n    this.setHandle = this.setHandle.bind(this);\n  }\n\n  handleToggleDisplay() {\n    this.setState(prevState => ({\n      fullDisplay: !prevState.fullDisplay\n    }));\n  }\n\n  setHandle(el) {\n    this.setState({scrollHeightShowMore: getOr(0, 'scrollHeight', el)});\n  }\n\n  render() {\n    const {image, title, description, video, lastUpdated} = this.props;\n    const {fullDisplay, scrollHeightShowMore} = this.state;\n    const {translate} = this.context;\n    const maxHeightCourseInfos = 210;\n    const hasMediaContent = image || video;\n    const toggleLabel = fullDisplay ? translate('See less') : translate('Show more');\n    const shortCourseText = scrollHeightShowMore <= maxHeightCourseInfos;\n    const courseSeeMoreButtonStyle = shortCourseText ? style.showMoreHidden : style.showMore;\n\n    return (\n      <div data-name=\"disciplineHeader\" className={style.wrapper}>\n        {hasMediaContent ? (\n          <div className={style.imgWrapper}>\n            <Preview image={image} video={video} />\n          </div>\n        ) : null}\n        <div className={style.courseWrapper}>\n          <div\n            className={fullDisplay ? style.courseTextWrapperFull : style.courseTextWrapperShort}\n            ref={this.setHandle}\n          >\n            <div\n              data-name=\"title\"\n              className={classnames(style.title, style.innerHTML)}\n              // eslint-disable-next-line react/no-danger\n              dangerouslySetInnerHTML={{__html: title}}\n            />\n            <div\n              className={style.innerHTML}\n              // eslint-disable-next-line react/no-danger\n              dangerouslySetInnerHTML={{__html: description}}\n            />\n          </div>\n          <div className={courseSeeMoreButtonStyle} onClick={this.handleToggleDisplay}>\n            {toggleLabel}\n          </div>\n          {lastUpdated ? (\n            <div\n              className={classnames(\n                style.lastUpdatedWrapper,\n                shortCourseText ? style.lastUpdatedWrapperShort : null\n              )}\n            >\n              <SyncIcon className={style.syncIcon} />\n              <div\n                className={classnames(style.lastUpdatedText, style.innerHTML)}\n                // eslint-disable-next-line react/no-danger\n                dangerouslySetInnerHTML={{__html: lastUpdated}}\n              />\n            </div>\n          ) : null}\n        </div>\n      </div>\n    );\n  }\n}\n\nexport default DisciplineHeader;\n"],"mappings":"AAAA,OAAOA,KAAP,MAAkB,OAAlB;AACA,OAAOC,SAAP,MAAsB,YAAtB;AACA,OAAOC,GAAP,MAAgB,eAAhB;AACA,OAAOC,KAAP,MAAkB,iBAAlB;AACA,OAAOC,UAAP,MAAuB,YAAvB;AACA,SAAQC,gCAAgC,IAAIC,QAA5C,QAA2D,0BAA3D;AACA,OAAOC,WAAP,MAAwB,iBAAxB;AACA,OAAOC,OAAP,MAAoB,oBAApB;AACA,OAAOC,KAAP,MAAkB,aAAlB;;AAEA,MAAMC,OAAO,GAAG,CAAC;EAACC,KAAD;EAAQC;AAAR,CAAD,KAAoB;EAClC,MAAMC,QAAQ,GAAGX,GAAG,CAAC,UAAD,EAAaU,KAAb,CAApB;EACA,MAAME,EAAE,GAAGZ,GAAG,CAAC,IAAD,EAAOU,KAAP,CAAd;EACA,MAAMG,UAAU,GAAGb,GAAG,CAAC,YAAD,EAAeU,KAAf,CAAtB;;EACA,IAAIE,EAAJ,EAAQ;IACN,oBAAO,oBAAC,WAAD;MAAa,QAAQ,EAAED,QAAvB;MAAiC,EAAE,EAAEC,EAArC;MAAyC,KAAK,EAAC,OAA/C;MAAuD,MAAM,EAAC;IAA9D,EAAP;EACD,CAFD,MAEO,IAAIC,UAAJ,EAAgB;IACrB,oBAAO,oBAAC,WAAD,EAAiBH,KAAjB,CAAP;EACD,CAFM,MAEA;IACL,oBAAO,oBAAC,OAAD;MAAS,SAAS,EAAEH,KAAK,CAACE,KAA1B;MAAiC,GAAG,EAAEA;IAAtC,EAAP;EACD;AACF,CAXD;;AAaAD,OAAO,CAACM,SAAR,2CAAoB;EAClBL,KAAK,EAAEH,OAAO,CAACQ,SAAR,CAAkBC,GADP;EAElBL,KAAK,EAAEX,SAAS,CAACiB,KAAV,CAAgBX,WAAW,CAACS,SAA5B;AAFW,CAApB;;AAKA,MAAMG,gBAAN,SAA+BnB,KAAK,CAACoB,SAArC,CAA+C;EAa7CC,WAAW,CAACC,KAAD,EAAQ;IACjB,MAAMA,KAAN;IACA,KAAKC,KAAL,GAAa;MACXC,WAAW,EAAE,KADF;MAEXC,oBAAoB,EAAE;IAFX,CAAb;IAIA,KAAKC,mBAAL,GAA2B,KAAKA,mBAAL,CAAyBC,IAAzB,CAA8B,IAA9B,CAA3B;IACA,KAAKC,SAAL,GAAiB,KAAKA,SAAL,CAAeD,IAAf,CAAoB,IAApB,CAAjB;EACD;;EAEDD,mBAAmB,GAAG;IACpB,KAAKG,QAAL,CAAcC,SAAS,KAAK;MAC1BN,WAAW,EAAE,CAACM,SAAS,CAACN;IADE,CAAL,CAAvB;EAGD;;EAEDI,SAAS,CAACG,EAAD,EAAK;IACZ,KAAKF,QAAL,CAAc;MAACJ,oBAAoB,EAAEtB,KAAK,CAAC,CAAD,EAAI,cAAJ,EAAoB4B,EAApB;IAA5B,CAAd;EACD;;EAEDC,MAAM,GAAG;IACP,MAAM;MAACrB,KAAD;MAAQsB,KAAR;MAAeC,WAAf;MAA4BtB,KAA5B;MAAmCuB;IAAnC,IAAkD,KAAKb,KAA7D;IACA,MAAM;MAACE,WAAD;MAAcC;IAAd,IAAsC,KAAKF,KAAjD;IACA,MAAM;MAACa;IAAD,IAAc,KAAKC,OAAzB;IACA,MAAMC,oBAAoB,GAAG,GAA7B;IACA,MAAMC,eAAe,GAAG5B,KAAK,IAAIC,KAAjC;IACA,MAAM4B,WAAW,GAAGhB,WAAW,GAAGY,SAAS,CAAC,UAAD,CAAZ,GAA2BA,SAAS,CAAC,WAAD,CAAnE;IACA,MAAMK,eAAe,GAAGhB,oBAAoB,IAAIa,oBAAhD;IACA,MAAMI,wBAAwB,GAAGD,eAAe,GAAGhC,KAAK,CAACkC,cAAT,GAA0BlC,KAAK,CAACmC,QAAhF;IAEA,oBACE;MAAK,aAAU,kBAAf;MAAkC,SAAS,EAAEnC,KAAK,CAACoC;IAAnD,GACGN,eAAe,gBACd;MAAK,SAAS,EAAE9B,KAAK,CAACqC;IAAtB,gBACE,oBAAC,OAAD;MAAS,KAAK,EAAEnC,KAAhB;MAAuB,KAAK,EAAEC;IAA9B,EADF,CADc,GAIZ,IALN,eAME;MAAK,SAAS,EAAEH,KAAK,CAACsC;IAAtB,gBACE;MACE,SAAS,EAAEvB,WAAW,GAAGf,KAAK,CAACuC,qBAAT,GAAiCvC,KAAK,CAACwC,sBAD/D;MAEE,GAAG,EAAE,KAAKrB;IAFZ,gBAIE;MACE,aAAU,OADZ;MAEE,SAAS,EAAExB,UAAU,CAACK,KAAK,CAACwB,KAAP,EAAcxB,KAAK,CAACyC,SAApB,CAFvB,CAGE;MAHF;MAIE,uBAAuB,EAAE;QAACC,MAAM,EAAElB;MAAT;IAJ3B,EAJF,eAUE;MACE,SAAS,EAAExB,KAAK,CAACyC,SADnB,CAEE;MAFF;MAGE,uBAAuB,EAAE;QAACC,MAAM,EAAEjB;MAAT;IAH3B,EAVF,CADF,eAiBE;MAAK,SAAS,EAAEQ,wBAAhB;MAA0C,OAAO,EAAE,KAAKhB;IAAxD,GACGc,WADH,CAjBF,EAoBGL,WAAW,gBACV;MACE,SAAS,EAAE/B,UAAU,CACnBK,KAAK,CAAC2C,kBADa,EAEnBX,eAAe,GAAGhC,KAAK,CAAC4C,uBAAT,GAAmC,IAF/B;IADvB,gBAME,oBAAC,QAAD;MAAU,SAAS,EAAE5C,KAAK,CAAC6C;IAA3B,EANF,eAOE;MACE,SAAS,EAAElD,UAAU,CAACK,KAAK,CAAC8C,eAAP,EAAwB9C,KAAK,CAACyC,SAA9B,CADvB,CAEE;MAFF;MAGE,uBAAuB,EAAE;QAACC,MAAM,EAAEhB;MAAT;IAH3B,EAPF,CADU,GAcR,IAlCN,CANF,CADF;EA6CD;;AAxF4C;;AAAzChB,gB,CASGqC,Y,GAAe;EACpBpB,SAAS,EAAEnC,SAAS,CAACwD;AADD,C;AATlBtC,gB,CACGH,S,2CAAY;EACjBiB,KAAK,EAAEhC,SAAS,CAACyD,MADA;EAEjBxB,WAAW,EAAEjC,SAAS,CAACyD,MAFN;EAGjB/C,KAAK,EAAED,OAAO,CAACM,SAAR,CAAkBL,KAHR;EAIjBC,KAAK,EAAEF,OAAO,CAACM,SAAR,CAAkBJ,KAJR;EAKjBuB,WAAW,EAAElC,SAAS,CAACyD;AALN,C;AA0FrB,eAAevC,gBAAf"}
+{"version":3,"file":"index.js","names":["React","PropTypes","get","getOr","classnames","NovaSolidSynchronizeSynchronize3","SyncIcon","VideoPlayer","Picture","style","Preview","image","video","mimeType","id","jwpOptions","propTypes","src","shape","DisciplineHeader","Component","constructor","props","state","fullDisplay","scrollHeightShowMore","handleToggleDisplay","bind","setHandle","setState","prevState","el","document","getElementById","render","title","description","lastUpdated","translate","context","maxHeightCourseInfos","hasMediaContent","toggleLabel","shortCourseText","courseSeeMoreButtonStyle","showMoreHidden","showMore","wrapper","imgWrapper","courseWrapper","courseTextWrapperFull","courseTextWrapperShort","innerHTML","__html","lastUpdatedWrapper","lastUpdatedWrapperShort","syncIcon","lastUpdatedText","contextTypes","func","string"],"sources":["../../../src/molecule/discipline-header/index.js"],"sourcesContent":["import React from 'react';\nimport PropTypes from 'prop-types';\nimport get from 'lodash/fp/get';\nimport getOr from 'lodash/fp/getOr';\nimport classnames from 'classnames';\nimport {NovaSolidSynchronizeSynchronize3 as SyncIcon} from '@coorpacademy/nova-icons';\nimport VideoPlayer from '../video-player';\nimport Picture from '../../atom/picture';\nimport style from './style.css';\n\nconst Preview = ({image, video}) => {\n  const mimeType = get('mimeType', video);\n  const id = get('id', video);\n  const jwpOptions = get('jwpOptions', video);\n  if (id) {\n    return <VideoPlayer mimeType={mimeType} id={id} width=\"380px\" height=\"250px\" />;\n  } else if (jwpOptions) {\n    return <VideoPlayer {...video} />;\n  } else {\n    return <Picture className={style.image} src={image} />;\n  }\n};\n\nPreview.propTypes = {\n  image: Picture.propTypes.src,\n  video: PropTypes.shape(VideoPlayer.propTypes)\n};\n\nclass DisciplineHeader extends React.Component {\n  static propTypes = {\n    title: PropTypes.string,\n    description: PropTypes.string,\n    image: Preview.propTypes.image,\n    video: Preview.propTypes.video,\n    lastUpdated: PropTypes.string\n  };\n\n  static contextTypes = {\n    translate: PropTypes.func\n  };\n\n  constructor(props) {\n    super(props);\n    this.state = {\n      fullDisplay: false,\n      scrollHeightShowMore: 0\n    };\n    this.handleToggleDisplay = this.handleToggleDisplay.bind(this);\n    this.setHandle = this.setHandle.bind(this);\n  }\n\n  handleToggleDisplay() {\n    this.setState(prevState => ({\n      fullDisplay: !prevState.fullDisplay\n    }));\n  }\n\n  setHandle() {\n    const el = document.getElementById('discipline-summary');\n    this.setState({scrollHeightShowMore: getOr(0, 'scrollHeight', el)});\n  }\n\n  render() {\n    const {image, title, description, video, lastUpdated} = this.props;\n    const {fullDisplay, scrollHeightShowMore} = this.state;\n    const {translate} = this.context;\n    const maxHeightCourseInfos = 210;\n    const hasMediaContent = image || video;\n    const toggleLabel = fullDisplay ? translate('See less') : translate('Show more');\n    const shortCourseText = scrollHeightShowMore <= maxHeightCourseInfos;\n    const courseSeeMoreButtonStyle = shortCourseText ? style.showMoreHidden : style.showMore;\n\n    return (\n      <div data-name=\"disciplineHeader\" className={style.wrapper}>\n        {hasMediaContent ? (\n          <div className={style.imgWrapper} ref={this.setHandle}>\n            <Preview image={image} video={video} />\n          </div>\n        ) : null}\n        <div className={style.courseWrapper}>\n          <div\n            id=\"discipline-summary\"\n            className={fullDisplay ? style.courseTextWrapperFull : style.courseTextWrapperShort}\n            ref={this.setHandle}\n          >\n            <div\n              data-name=\"title\"\n              className={classnames(style.title, style.innerHTML)}\n              // eslint-disable-next-line react/no-danger\n              dangerouslySetInnerHTML={{__html: title}}\n            />\n            <div\n              className={style.innerHTML}\n              // eslint-disable-next-line react/no-danger\n              dangerouslySetInnerHTML={{__html: description}}\n            />\n          </div>\n          <div className={courseSeeMoreButtonStyle} onClick={this.handleToggleDisplay}>\n            {toggleLabel}\n          </div>\n          {lastUpdated ? (\n            <div\n              className={classnames(\n                style.lastUpdatedWrapper,\n                shortCourseText ? style.lastUpdatedWrapperShort : null\n              )}\n            >\n              <SyncIcon className={style.syncIcon} />\n              <div\n                className={classnames(style.lastUpdatedText, style.innerHTML)}\n                // eslint-disable-next-line react/no-danger\n                dangerouslySetInnerHTML={{__html: lastUpdated}}\n              />\n            </div>\n          ) : null}\n        </div>\n      </div>\n    );\n  }\n}\n\nexport default DisciplineHeader;\n"],"mappings":"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"}

package/lib/molecule/discipline-header/index.d.ts

@@ -50,7 +50,7 @@ declare class DisciplineHeader extends React.Component<any, any, any> {
         scrollHeightShowMore: number;
     };
     handleToggleDisplay(): void;
-    setHandle(el: any): void;
+    setHandle(): void;
     render(): JSX.Element;
 }
 import React from "react";

package/lib/molecule/discipline-header/index.d.ts.map

@@ -1 +1 @@
-{"version":3,"file":"index.d.ts","sourceRoot":"","sources":["../../../src/molecule/discipline-header/index.js"],"names":[],"mappings":";AA4BA;IACE;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;MAME;IAEF;;MAEE;IAEF,wBAQC;IANC;;;MAGC;IAKH,4BAIC;IAED,yBAEC;IAED,sBAuDC;CACF"}
+{"version":3,"file":"index.d.ts","sourceRoot":"","sources":["../../../src/molecule/discipline-header/index.js"],"names":[],"mappings":";AA4BA;IACE;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;MAME;IAEF;;MAEE;IAEF,wBAQC;IANC;;;MAGC;IAKH,4BAIC;IAED,kBAGC;IAED,sBAwDC;CACF"}

package/lib/molecule/discipline-header/index.js

@@ -70,7 +70,8 @@ class DisciplineHeader extends _react.default.Component {
     }));
   }
 
-  setHandle(el) {
+  setHandle() {
+    const el = document.getElementById('discipline-summary');
     this.setState({
       scrollHeightShowMore: (0, _getOr.default)(0, 'scrollHeight', el)
     });
@@ -100,13 +101,15 @@ class DisciplineHeader extends _react.default.Component {
       "data-name": "disciplineHeader",
       className: _style.default.wrapper
     }, hasMediaContent ? /*#__PURE__*/_react.default.createElement("div", {
-      className: _style.default.imgWrapper
+      className: _style.default.imgWrapper,
+      ref: this.setHandle
     }, /*#__PURE__*/_react.default.createElement(Preview, {
       image: image,
       video: video
     })) : null, /*#__PURE__*/_react.default.createElement("div", {
       className: _style.default.courseWrapper
     }, /*#__PURE__*/_react.default.createElement("div", {
+      id: "discipline-summary",
       className: fullDisplay ? _style.default.courseTextWrapperFull : _style.default.courseTextWrapperShort,
       ref: this.setHandle
     }, /*#__PURE__*/_react.default.createElement("div", {

package/lib/molecule/discipline-header/index.js.map

@@ -1 +1 @@
-{"version":3,"file":"index.js","names":["Preview","image","video","mimeType","get","id","jwpOptions","style","propTypes","Picture","src","PropTypes","shape","VideoPlayer","DisciplineHeader","React","Component","constructor","props","state","fullDisplay","scrollHeightShowMore","handleToggleDisplay","bind","setHandle","setState","prevState","el","getOr","render","title","description","lastUpdated","translate","context","maxHeightCourseInfos","hasMediaContent","toggleLabel","shortCourseText","courseSeeMoreButtonStyle","showMoreHidden","showMore","wrapper","imgWrapper","courseWrapper","courseTextWrapperFull","courseTextWrapperShort","classnames","innerHTML","__html","lastUpdatedWrapper","lastUpdatedWrapperShort","syncIcon","lastUpdatedText","contextTypes","func","string"],"sources":["../../../src/molecule/discipline-header/index.js"],"sourcesContent":["import React from 'react';\nimport PropTypes from 'prop-types';\nimport get from 'lodash/fp/get';\nimport getOr from 'lodash/fp/getOr';\nimport classnames from 'classnames';\nimport {NovaSolidSynchronizeSynchronize3 as SyncIcon} from '@coorpacademy/nova-icons';\nimport VideoPlayer from '../video-player';\nimport Picture from '../../atom/picture';\nimport style from './style.css';\n\nconst Preview = ({image, video}) => {\n  const mimeType = get('mimeType', video);\n  const id = get('id', video);\n  const jwpOptions = get('jwpOptions', video);\n  if (id) {\n    return <VideoPlayer mimeType={mimeType} id={id} width=\"380px\" height=\"250px\" />;\n  } else if (jwpOptions) {\n    return <VideoPlayer {...video} />;\n  } else {\n    return <Picture className={style.image} src={image} />;\n  }\n};\n\nPreview.propTypes = {\n  image: Picture.propTypes.src,\n  video: PropTypes.shape(VideoPlayer.propTypes)\n};\n\nclass DisciplineHeader extends React.Component {\n  static propTypes = {\n    title: PropTypes.string,\n    description: PropTypes.string,\n    image: Preview.propTypes.image,\n    video: Preview.propTypes.video,\n    lastUpdated: PropTypes.string\n  };\n\n  static contextTypes = {\n    translate: PropTypes.func\n  };\n\n  constructor(props) {\n    super(props);\n    this.state = {\n      fullDisplay: false,\n      scrollHeightShowMore: 0\n    };\n    this.handleToggleDisplay = this.handleToggleDisplay.bind(this);\n    this.setHandle = this.setHandle.bind(this);\n  }\n\n  handleToggleDisplay() {\n    this.setState(prevState => ({\n      fullDisplay: !prevState.fullDisplay\n    }));\n  }\n\n  setHandle(el) {\n    this.setState({scrollHeightShowMore: getOr(0, 'scrollHeight', el)});\n  }\n\n  render() {\n    const {image, title, description, video, lastUpdated} = this.props;\n    const {fullDisplay, scrollHeightShowMore} = this.state;\n    const {translate} = this.context;\n    const maxHeightCourseInfos = 210;\n    const hasMediaContent = image || video;\n    const toggleLabel = fullDisplay ? translate('See less') : translate('Show more');\n    const shortCourseText = scrollHeightShowMore <= maxHeightCourseInfos;\n    const courseSeeMoreButtonStyle = shortCourseText ? style.showMoreHidden : style.showMore;\n\n    return (\n      <div data-name=\"disciplineHeader\" className={style.wrapper}>\n        {hasMediaContent ? (\n          <div className={style.imgWrapper}>\n            <Preview image={image} video={video} />\n          </div>\n        ) : null}\n        <div className={style.courseWrapper}>\n          <div\n            className={fullDisplay ? style.courseTextWrapperFull : style.courseTextWrapperShort}\n            ref={this.setHandle}\n          >\n            <div\n              data-name=\"title\"\n              className={classnames(style.title, style.innerHTML)}\n              // eslint-disable-next-line react/no-danger\n              dangerouslySetInnerHTML={{__html: title}}\n            />\n            <div\n              className={style.innerHTML}\n              // eslint-disable-next-line react/no-danger\n              dangerouslySetInnerHTML={{__html: description}}\n            />\n          </div>\n          <div className={courseSeeMoreButtonStyle} onClick={this.handleToggleDisplay}>\n            {toggleLabel}\n          </div>\n          {lastUpdated ? (\n            <div\n              className={classnames(\n                style.lastUpdatedWrapper,\n                shortCourseText ? style.lastUpdatedWrapperShort : null\n              )}\n            >\n              <SyncIcon className={style.syncIcon} />\n              <div\n                className={classnames(style.lastUpdatedText, style.innerHTML)}\n                // eslint-disable-next-line react/no-danger\n                dangerouslySetInnerHTML={{__html: lastUpdated}}\n              />\n            </div>\n          ) : null}\n        </div>\n      </div>\n    );\n  }\n}\n\nexport default DisciplineHeader;\n"],"mappings":"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"}
+{"version":3,"file":"index.js","names":["Preview","image","video","mimeType","get","id","jwpOptions","style","propTypes","Picture","src","PropTypes","shape","VideoPlayer","DisciplineHeader","React","Component","constructor","props","state","fullDisplay","scrollHeightShowMore","handleToggleDisplay","bind","setHandle","setState","prevState","el","document","getElementById","getOr","render","title","description","lastUpdated","translate","context","maxHeightCourseInfos","hasMediaContent","toggleLabel","shortCourseText","courseSeeMoreButtonStyle","showMoreHidden","showMore","wrapper","imgWrapper","courseWrapper","courseTextWrapperFull","courseTextWrapperShort","classnames","innerHTML","__html","lastUpdatedWrapper","lastUpdatedWrapperShort","syncIcon","lastUpdatedText","contextTypes","func","string"],"sources":["../../../src/molecule/discipline-header/index.js"],"sourcesContent":["import React from 'react';\nimport PropTypes from 'prop-types';\nimport get from 'lodash/fp/get';\nimport getOr from 'lodash/fp/getOr';\nimport classnames from 'classnames';\nimport {NovaSolidSynchronizeSynchronize3 as SyncIcon} from '@coorpacademy/nova-icons';\nimport VideoPlayer from '../video-player';\nimport Picture from '../../atom/picture';\nimport style from './style.css';\n\nconst Preview = ({image, video}) => {\n  const mimeType = get('mimeType', video);\n  const id = get('id', video);\n  const jwpOptions = get('jwpOptions', video);\n  if (id) {\n    return <VideoPlayer mimeType={mimeType} id={id} width=\"380px\" height=\"250px\" />;\n  } else if (jwpOptions) {\n    return <VideoPlayer {...video} />;\n  } else {\n    return <Picture className={style.image} src={image} />;\n  }\n};\n\nPreview.propTypes = {\n  image: Picture.propTypes.src,\n  video: PropTypes.shape(VideoPlayer.propTypes)\n};\n\nclass DisciplineHeader extends React.Component {\n  static propTypes = {\n    title: PropTypes.string,\n    description: PropTypes.string,\n    image: Preview.propTypes.image,\n    video: Preview.propTypes.video,\n    lastUpdated: PropTypes.string\n  };\n\n  static contextTypes = {\n    translate: PropTypes.func\n  };\n\n  constructor(props) {\n    super(props);\n    this.state = {\n      fullDisplay: false,\n      scrollHeightShowMore: 0\n    };\n    this.handleToggleDisplay = this.handleToggleDisplay.bind(this);\n    this.setHandle = this.setHandle.bind(this);\n  }\n\n  handleToggleDisplay() {\n    this.setState(prevState => ({\n      fullDisplay: !prevState.fullDisplay\n    }));\n  }\n\n  setHandle() {\n    const el = document.getElementById('discipline-summary');\n    this.setState({scrollHeightShowMore: getOr(0, 'scrollHeight', el)});\n  }\n\n  render() {\n    const {image, title, description, video, lastUpdated} = this.props;\n    const {fullDisplay, scrollHeightShowMore} = this.state;\n    const {translate} = this.context;\n    const maxHeightCourseInfos = 210;\n    const hasMediaContent = image || video;\n    const toggleLabel = fullDisplay ? translate('See less') : translate('Show more');\n    const shortCourseText = scrollHeightShowMore <= maxHeightCourseInfos;\n    const courseSeeMoreButtonStyle = shortCourseText ? style.showMoreHidden : style.showMore;\n\n    return (\n      <div data-name=\"disciplineHeader\" className={style.wrapper}>\n        {hasMediaContent ? (\n          <div className={style.imgWrapper} ref={this.setHandle}>\n            <Preview image={image} video={video} />\n          </div>\n        ) : null}\n        <div className={style.courseWrapper}>\n          <div\n            id=\"discipline-summary\"\n            className={fullDisplay ? style.courseTextWrapperFull : style.courseTextWrapperShort}\n            ref={this.setHandle}\n          >\n            <div\n              data-name=\"title\"\n              className={classnames(style.title, style.innerHTML)}\n              // eslint-disable-next-line react/no-danger\n              dangerouslySetInnerHTML={{__html: title}}\n            />\n            <div\n              className={style.innerHTML}\n              // eslint-disable-next-line react/no-danger\n              dangerouslySetInnerHTML={{__html: description}}\n            />\n          </div>\n          <div className={courseSeeMoreButtonStyle} onClick={this.handleToggleDisplay}>\n            {toggleLabel}\n          </div>\n          {lastUpdated ? (\n            <div\n              className={classnames(\n                style.lastUpdatedWrapper,\n                shortCourseText ? style.lastUpdatedWrapperShort : null\n              )}\n            >\n              <SyncIcon className={style.syncIcon} />\n              <div\n                className={classnames(style.lastUpdatedText, style.innerHTML)}\n                // eslint-disable-next-line react/no-danger\n                dangerouslySetInnerHTML={{__html: lastUpdated}}\n              />\n            </div>\n          ) : null}\n        </div>\n      </div>\n    );\n  }\n}\n\nexport default DisciplineHeader;\n"],"mappings":"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"}

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@coorpacademy/components",
-  "version": "11.32.12",
+  "version": "11.32.13",
   "description": "",
   "main": "lib/index.js",
   "module": "es/index.js",
@@ -177,5 +177,5 @@
     "last 2 versions",
     "IE 11"
   ],
-  "gitHead": "d524c5cbb8cbe3dffd0240d448ce48d00c52c53d"
+  "gitHead": "6ab0254581f7381d7f561fefc8bb233bf223369c"
 }

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

@@ -1,57 +0,0 @@
-export default SkillDetail;
-declare function SkillDetail(props: any, context: any): JSX.Element;
-declare namespace SkillDetail {
-    namespace contextTypes {
-        const skin: PropTypes.Requireable<PropTypes.InferProps<{
-            common: PropTypes.Requireable<{
-                [x: string]: any;
-            }>;
-            images: PropTypes.Requireable<PropTypes.InferProps<{
-                'logo-mobile': PropTypes.Requireable<any>;
-                logo: PropTypes.Requireable<any>;
-                'logo-email': PropTypes.Requireable<any>;
-                login: PropTypes.Requireable<any>;
-            }>>;
-            icons: PropTypes.Requireable<{
-                [x: string]: any;
-            }>;
-            mod: PropTypes.Requireable<{
-                [x: string]: any;
-            }>;
-            courses: PropTypes.Requireable<any[]>;
-            texts: PropTypes.Requireable<{
-                [x: string]: any;
-            }>;
-        }>>;
-        const translate: PropTypes.Requireable<(...args: any[]) => any>;
-    }
-    namespace propTypes {
-        const title: PropTypes.Validator<string>;
-        const description: PropTypes.Requireable<string>;
-        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<{
-            title: PropTypes.Requireable<string>;
-            provider: PropTypes.Requireable<string>;
-            progress: PropTypes.Requireable<number>;
-        }> | null | undefined)[]>;
-        const skillIncludedCourses: PropTypes.Requireable<(PropTypes.InferProps<{
-            title: PropTypes.Requireable<string>;
-            type: PropTypes.Requireable<string>;
-            provider: PropTypes.Requireable<string>;
-            progress: PropTypes.Requireable<number>;
-        }> | null | undefined)[]>;
-        const onBackClick: PropTypes.Requireable<(...args: any[]) => any>;
-        const onReviewClick: PropTypes.Requireable<(...args: any[]) => any>;
-        const onContinueLearningClick: PropTypes.Requireable<(...args: any[]) => any>;
-        const onCourseClick: PropTypes.Requireable<(...args: any[]) => any>;
-    }
-}
-import PropTypes from "prop-types";
-//# sourceMappingURL=index.d.ts.map

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

@@ -1 +0,0 @@
-{"version":3,"file":"index.d.ts","sourceRoot":"","sources":["../../../src/template/skill-detail/index.js"],"names":[],"mappings":";AAuDA,oEA6IC"}

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

@@ -1,248 +0,0 @@
-import _get from "lodash/fp/get";
-import React, { useCallback, useState } from 'react';
-import PropTypes from 'prop-types';
-import { convert } from 'css-color-function';
-import classnames from 'classnames';
-import Provider from '../../atom/provider';
-import ButtonLink from '../../atom/button-link';
-import Icon from '../../atom/icon';
-import style from './style.css';
-
-const ContinueLearningButton = (props, context) => {
-  const [hovered, setHovered] = useState(false);
-  const {
-    onClick
-  } = props;
-  const {
-    skin,
-    translate
-  } = context;
-
-  const primarySkinColor = _get('common.primary', skin);
-
-  const handleMouseOver = useCallback(() => setHovered(true), [setHovered]);
-  const handleMouseLeave = useCallback(() => setHovered(false), [setHovered]);
-  return /*#__PURE__*/React.createElement("div", {
-    onMouseOver: handleMouseOver,
-    onMouseLeave: handleMouseLeave
-  }, /*#__PURE__*/React.createElement(ButtonLink, {
-    label: translate('continue_learning'),
-    type: "primary",
-    customStyle: {
-      width: 'fit-content',
-      borderRadius: '12px',
-      backgroundColor: hovered ? convert(`hsl(from ${primarySkinColor} h s calc(l*(1 - 0.08)))`) : primarySkinColor
-    },
-    icon: {
-      position: 'left',
-      faIcon: {
-        name: 'play',
-        color: '#FFFFFF',
-        size: 16
-      }
-    },
-    onClick: onClick
-  }));
-};
-
-ContinueLearningButton.contextTypes = {
-  skin: Provider.childContextTypes.skin,
-  translate: Provider.childContextTypes.translate
-};
-ContinueLearningButton.propTypes = process.env.NODE_ENV !== "production" ? {
-  onClick: PropTypes.func
-} : {};
-
-const SkillDetail = (props, context) => {
-  const {
-    title,
-    description,
-    metrics,
-    focused,
-    availableForReview,
-    ongoingCourses,
-    skillIncludedCourses,
-    onBackClick,
-    onReviewClick,
-    onContinueLearningClick,
-    onCourseClick
-  } = props;
-  const {
-    score,
-    content,
-    questionsToReview,
-    contentCompleted = 0
-  } = metrics;
-  const {
-    skin,
-    translate
-  } = context;
-  const [showMore, setShowMore] = useState(false);
-  const handleShowMore = useCallback(() => setShowMore(!showMore), [setShowMore, showMore]);
-  const Description = useCallback(() => {
-    return /*#__PURE__*/React.createElement("div", {
-      className: classnames(style.description, !showMore && style.truncate)
-    }, description);
-  });
-  const ProgressBar = useCallback(() => {
-    if (score === undefined) return null;
-    const progressBarColor = '#3EC483';
-    const inlineProgressValueStyle = {
-      backgroundColor: progressBarColor,
-      width: `${score}%`
-    };
-    return /*#__PURE__*/React.createElement("div", {
-      className: style.progressBarWrapper
-    }, /*#__PURE__*/React.createElement("div", {
-      "data-name": "progress",
-      className: style.progress,
-      style: inlineProgressValueStyle,
-      role: "progressbar"
-    }));
-  }, [score]);
-  return /*#__PURE__*/React.createElement("div", {
-    className: style.backgroundContainer
-  }, /*#__PURE__*/React.createElement("div", {
-    className: style.container
-  }, /*#__PURE__*/React.createElement("div", {
-    className: style.backButtonWrapper,
-    onClick: onBackClick
-  }, /*#__PURE__*/React.createElement(Icon, {
-    iconName: "arrow-left",
-    size: {
-      faSize: 14,
-      wrapperSize: 14
-    }
-  })), /*#__PURE__*/React.createElement("div", {
-    className: style.ctaContainer
-  }, focused ? /*#__PURE__*/React.createElement("div", {
-    className: style.skillFocusBadge
-  }, /*#__PURE__*/React.createElement(Icon, {
-    iconName: "bullseye-arrow",
-    backgroundColor: "#DDD1FF",
-    size: {
-      faSize: 10,
-      wrapperSize: 16
-    }
-  }), translate('skill_focus')) : null, /*#__PURE__*/React.createElement("div", {
-    className: style.ctaWrapper
-  }, /*#__PURE__*/React.createElement(ButtonLink, {
-    type: "secondary",
-    onClick: onReviewClick,
-    label: translate('review_this_skill'),
-    disabled: !availableForReview,
-    customStyle: {
-      width: 'fit-content',
-      borderRadius: '12px'
-    }
-  }), /*#__PURE__*/React.createElement(ContinueLearningButton, {
-    onClick: onContinueLearningClick
-  }))), /*#__PURE__*/React.createElement("div", {
-    className: style.title
-  }, title), description ? /*#__PURE__*/React.createElement(React.Fragment, null, /*#__PURE__*/React.createElement(Description, null), description.length >= 226 ? /*#__PURE__*/React.createElement("div", {
-    className: style.showMoreWrapper,
-    onClick: handleShowMore
-  }, showMore ? translate('Show less') : translate('Show more'), /*#__PURE__*/React.createElement(Icon, {
-    iconName: showMore ? "chevron-up" : "chevron-down",
-    size: {
-      faSize: 14,
-      wrapperSize: 16
-    }
-  })) : null) : null, /*#__PURE__*/React.createElement("div", {
-    className: style.progressInformationsWrapper
-  }, /*#__PURE__*/React.createElement("div", {
-    className: style.progressTitle
-  }, translate('your_progress')), /*#__PURE__*/React.createElement("div", {
-    className: style.skillCoursesAndQuestionsWrapper
-  }, content ? /*#__PURE__*/React.createElement("div", {
-    className: style.skillInformation,
-    "data-name": "skill-courses"
-  }, /*#__PURE__*/React.createElement("span", {
-    className: style.skillInformationNumber
-  }, content), " ", translate('courses')) : null, questionsToReview ? /*#__PURE__*/React.createElement("div", {
-    className: style.skillInformation,
-    "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", {
-    className: style.progressInformations
-  }, content && /*#__PURE__*/React.createElement(React.Fragment, null, /*#__PURE__*/React.createElement("div", {
-    className: style.progressInformation,
-    "data-name": "skill-completed-courses"
-  }, /*#__PURE__*/React.createElement("span", {
-    className: style.progressInformationNumber
-  }, contentCompleted), ` ${translate('courses_completed')}`), /*#__PURE__*/React.createElement("div", {
-    className: style.progressInformation,
-    "data-name": "completed-percentage"
-  }, /*#__PURE__*/React.createElement("span", {
-    className: style.progressInformationNumber
-  }, score, "%"))))), /*#__PURE__*/React.createElement(ContinueLearning, {
-    ongoingCourses: ongoingCourses,
-    onCourseClick: onCourseClick
-  })));
-};
-
-SkillDetail.contextTypes = {
-  skin: Provider.childContextTypes.skin,
-  translate: Provider.childContextTypes.translate
-};
-SkillDetail.propTypes = process.env.NODE_ENV !== "production" ? {
-  title: PropTypes.string.isRequired,
-  description: PropTypes.string,
-  metrics: PropTypes.shape({
-    score: PropTypes.number,
-    content: PropTypes.number,
-    questionsToReview: PropTypes.number,
-    contentCompleted: PropTypes.number
-  }),
-  focused: PropTypes.bool,
-  availableForReview: PropTypes.bool,
-  ongoingCourses: PropTypes.arrayOf(PropTypes.shape({
-    title: PropTypes.string,
-    provider: PropTypes.string,
-    progress: PropTypes.number
-  })),
-  skillIncludedCourses: PropTypes.arrayOf(PropTypes.shape({
-    title: PropTypes.string,
-    type: PropTypes.string,
-    provider: PropTypes.string,
-    progress: PropTypes.number
-  })),
-  onBackClick: PropTypes.func,
-  onReviewClick: PropTypes.func,
-  onContinueLearningClick: PropTypes.func,
-  onCourseClick: PropTypes.func
-} : {};
-export default SkillDetail;
-
-const ContinueLearning = (props, context) => {
-  const {
-    ongoingCourses,
-    onCourseClick
-  } = props;
-  const {
-    skin,
-    translate
-  } = context;
-  return /*#__PURE__*/React.createElement("div", {
-    className: style.continueLearningWrapper
-  }, /*#__PURE__*/React.createElement("span", {
-    className: style.continueLearningTitle
-  }, translate('continue_learning')), /*#__PURE__*/React.createElement("span", {
-    className: style.continueLearningNumber
-  }, ongoingCourses.length));
-};
-
-ContinueLearning.contextTypes = {
-  skin: Provider.childContextTypes.skin,
-  translate: Provider.childContextTypes.translate
-};
-ContinueLearning.propTypes = process.env.NODE_ENV !== "production" ? {
-  ongoingCourses: PropTypes.arrayOf(PropTypes.shape({
-    title: PropTypes.string,
-    provider: PropTypes.string,
-    progress: PropTypes.number
-  })),
-  onCourseClick: PropTypes.func
-} : {};
-//# sourceMappingURL=index.js.map

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

@@ -1 +0,0 @@
-{"version":3,"file":"index.js","names":["React","useCallback","useState","PropTypes","convert","classnames","Provider","ButtonLink","Icon","style","ContinueLearningButton","props","context","hovered","setHovered","onClick","skin","translate","primarySkinColor","handleMouseOver","handleMouseLeave","width","borderRadius","backgroundColor","position","faIcon","name","color","size","contextTypes","childContextTypes","propTypes","func","SkillDetail","title","description","metrics","focused","availableForReview","ongoingCourses","skillIncludedCourses","onBackClick","onReviewClick","onContinueLearningClick","onCourseClick","score","content","questionsToReview","contentCompleted","showMore","setShowMore","handleShowMore","Description","truncate","ProgressBar","undefined","progressBarColor","inlineProgressValueStyle","progressBarWrapper","progress","backgroundContainer","container","backButtonWrapper","faSize","wrapperSize","ctaContainer","skillFocusBadge","ctaWrapper","length","showMoreWrapper","progressInformationsWrapper","progressTitle","skillCoursesAndQuestionsWrapper","skillInformation","skillInformationNumber","progressInformations","progressInformation","progressInformationNumber","string","isRequired","shape","number","bool","arrayOf","provider","type","ContinueLearning","continueLearningWrapper","continueLearningTitle","continueLearningNumber"],"sources":["../../../src/template/skill-detail/index.js"],"sourcesContent":["import React, {useCallback, useState, useMemo} 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 ButtonLink from '../../atom/button-link';\nimport Icon from '../../atom/icon';\nimport style from './style.css';\n\nconst ContinueLearningButton = (props, context) => {\n  const [hovered, setHovered] = useState(false);\n  const {onClick} = props;\n  const {skin, translate} = context;\n  const primarySkinColor = get('common.primary', skin);\n\n  const handleMouseOver = useCallback(() => setHovered(true), [setHovered]);\n\n  const handleMouseLeave = useCallback(() => setHovered(false), [setHovered]);\n\n  return (\n    <div onMouseOver={handleMouseOver} onMouseLeave={handleMouseLeave}>\n      <ButtonLink\n        label={translate('continue_learning')}\n        type=\"primary\"\n        customStyle={{\n          width: 'fit-content',\n          borderRadius: '12px',\n          backgroundColor: hovered\n            ? convert(`hsl(from ${primarySkinColor} h s calc(l*(1 - 0.08)))`)\n            : primarySkinColor\n        }}\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  onClick: PropTypes.func\n};\n\nconst SkillDetail = (props, context) => {\n  const {\n    title,\n    description,\n    metrics,\n    focused,\n    availableForReview,\n    ongoingCourses,\n    skillIncludedCourses,\n    onBackClick,\n    onReviewClick,\n    onContinueLearningClick,\n    onCourseClick\n  } = props;\n  const {score, content, questionsToReview, contentCompleted = 0} = metrics;\n  const {skin, 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  });\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}>\n        <div className={style.backButtonWrapper} onClick={onBackClick}>\n          <Icon\n            iconName=\"arrow-left\"\n            size={{\n              faSize: 14,\n              wrapperSize: 14\n            }}\n          />\n        </div>\n        <div className={style.ctaContainer}>\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\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 onClick={onContinueLearningClick} />\n          </div>\n        </div>\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> : null}\n          </> \n        : null}\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> {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}%</span>\n                </div>\n              </>\n            )}\n          </div>\n        </div>\n        <ContinueLearning ongoingCourses={ongoingCourses} onCourseClick={onCourseClick} />\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  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.arrayOf(\n    PropTypes.shape({\n      title: PropTypes.string,\n      provider: PropTypes.string,\n      progress: PropTypes.number\n    })\n  ),\n  skillIncludedCourses: PropTypes.arrayOf(\n    PropTypes.shape({\n      title: PropTypes.string,\n      type: PropTypes.string,\n      provider: PropTypes.string,\n      progress: PropTypes.number\n    })\n  ),\n  onBackClick: PropTypes.func,\n  onReviewClick: PropTypes.func,\n  onContinueLearningClick: PropTypes.func,\n  onCourseClick: PropTypes.func\n};\n\nexport default SkillDetail;\n\nconst ContinueLearning = (props, context) => {\n  const {\n    ongoingCourses,\n    onCourseClick\n  } = props;\n  const {skin, translate} = context;\n\n  return (\n    <div className={style.continueLearningWrapper}>\n      <span className={style.continueLearningTitle}>{translate('continue_learning')}</span>\n      <span className={style.continueLearningNumber}>\n        {ongoingCourses.length}\n      </span>\n    </div>\n  )\n}\n\nContinueLearning.contextTypes = {\n  skin: Provider.childContextTypes.skin,\n  translate: Provider.childContextTypes.translate\n};\n\nContinueLearning.propTypes = {\n  ongoingCourses: PropTypes.arrayOf(\n    PropTypes.shape({\n      title: PropTypes.string,\n      provider: PropTypes.string,\n      progress: PropTypes.number\n    })\n  ),\n  onCourseClick: PropTypes.func\n};\n"],"mappings":"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"}

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

@@ -1,172 +0,0 @@
-@value colors: "../../variables/colors.css";
-@value xtraLightGrey from colors;
-@value cm_grey_100 from colors;
-@value cm_grey_400 from colors;
-
-.textBase {
-  font-family: "Gilroy";
-  font-style: normal;
-}
-
-.backgroundContainer {
-  background-color: white;
-  min-height: 100%;
-  width: 100%;
-}
-
-.container {
-  composes: textBase;
-  background-color: white;
-  font-family: "Gilroy";
-  font-style: normal;
-  margin-top: 48px;
-  margin-bottom: 48px;
-  margin-left: auto;
-  margin-right: auto;
-  padding: 0 16px;
-  position: relative;
-  box-sizing: border-box;
-  min-height: 100%;
-  width: 100%;
-  max-width: calc(1080px + 32px);
-}
-
-.backButtonWrapper {
-  margin-bottom: 16px;
-  background-color: cm_grey_100;
-  border-radius: 8px;
-  width: fit-content;
-  padding: 8px;
-  cursor: pointer;
-}
-
-.ctaContainer {
-  display: flex;
-  width: 100%;
-  justify-content: space-between;
-}
-
-.skillFocusBadge {
-  display: flex;
-  height: 12px;
-  width: fit-content;
-  align-items: center;
-  background-color: #DDD1FF;
-  border-radius: 24px;
-  padding: 4px 8px;
-  font-size: 12px;
-  line-height: 16px;
-  font-weight: 600;
-  color: #3900D6;
-  margin-right: 8px;
-}
-
-.ctaWrapper,
-.showMoreWrapper {
-  display: flex;
-  gap: 8px;
-}
-
-.showMoreWrapper {
-  align-items: center;
-  margin-top: 8px;
-  font-weight: 600;
-  cursor: pointer;
-}
-
-.title {
-  font-size: 24px;
-  font-weight: 700;
-  line-height: 32px;
-}
-
-.description {
-  margin-top: 8px;
-  max-width: 734px;
-  font-size: 14px;
-  font-weight: 500;
-  line-height: 20px;
-  color: cm_grey_400;
-}
-
-.truncate {
-  display: -webkit-box;
-  -webkit-line-clamp: 2;
-  -webkit-box-orient: vertical;
-  overflow: hidden;
-  text-overflow: ellipsis;
-}
-
-.progressInformationsWrapper {
-  margin-top: 40px;
-  background-color: xtraLightGrey;
-  border-radius: 16px;
-  padding: 24px;
-}
-
-.progressTitle {
-  font-size: 16px;
-  font-weight: 600;
-  line-height: 22px;
-  margin-bottom: 16px;
-}
-
-.skillCoursesAndQuestionsWrapper,
-.progressInformations {
-  display: flex;
-  justify-content: space-between;
-  margin-bottom: 8px;
-}
-
-.skillInformation,
-.progressInformation {
-  composes: textBase;
-  font-weight: 600;
-  font-size: 14px;
-  line-height: 20px;
-  color: cm_grey_400;
-}
-
-.skillInformationNumber,
-.progressInformationNumber {
-  color: #000;
-}
-
-.progressBarWrapper {
-  position: relative;
-  left: 0;
-  width: 100%;
-  height: 4px;
-  border-radius: 2px;
-  overflow: hidden;
-  background-color: cm_grey_100;
-  margin: 16px 0;
-}
-
-.progress {
-  display: block;
-  height: 8px;
-  animation: progressbar 2s ease-in-out;
-}
-
-/* Continue Learning */
-.continueLearningWrapper {
-  margin-top: 40px;
-}
-
-.continueLearningTitle {
-  font-size: 16px;
-  font-weight: 600;
-  line-height: 22px;
-}
-
-.continueLearningNumber {
-  border-radius: 50%;
-  background-color: #EAEAEB;
-  color: #515161;
-  padding: 2px 4px;
-  margin-left: 8px;
-  font-size: 10px;
-  font-weight: 600;
-  line-height: 12px;
-}

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

@@ -1,57 +0,0 @@
-export default SkillDetail;
-declare function SkillDetail(props: any, context: any): JSX.Element;
-declare namespace SkillDetail {
-    namespace contextTypes {
-        const skin: PropTypes.Requireable<PropTypes.InferProps<{
-            common: PropTypes.Requireable<{
-                [x: string]: any;
-            }>;
-            images: PropTypes.Requireable<PropTypes.InferProps<{
-                'logo-mobile': PropTypes.Requireable<any>;
-                logo: PropTypes.Requireable<any>;
-                'logo-email': PropTypes.Requireable<any>;
-                login: PropTypes.Requireable<any>;
-            }>>;
-            icons: PropTypes.Requireable<{
-                [x: string]: any;
-            }>;
-            mod: PropTypes.Requireable<{
-                [x: string]: any;
-            }>;
-            courses: PropTypes.Requireable<any[]>;
-            texts: PropTypes.Requireable<{
-                [x: string]: any;
-            }>;
-        }>>;
-        const translate: PropTypes.Requireable<(...args: any[]) => any>;
-    }
-    namespace propTypes {
-        const title: PropTypes.Validator<string>;
-        const description: PropTypes.Requireable<string>;
-        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<{
-            title: PropTypes.Requireable<string>;
-            provider: PropTypes.Requireable<string>;
-            progress: PropTypes.Requireable<number>;
-        }> | null | undefined)[]>;
-        const skillIncludedCourses: PropTypes.Requireable<(PropTypes.InferProps<{
-            title: PropTypes.Requireable<string>;
-            type: PropTypes.Requireable<string>;
-            provider: PropTypes.Requireable<string>;
-            progress: PropTypes.Requireable<number>;
-        }> | null | undefined)[]>;
-        const onBackClick: PropTypes.Requireable<(...args: any[]) => any>;
-        const onReviewClick: PropTypes.Requireable<(...args: any[]) => any>;
-        const onContinueLearningClick: PropTypes.Requireable<(...args: any[]) => any>;
-        const onCourseClick: PropTypes.Requireable<(...args: any[]) => any>;
-    }
-}
-import PropTypes from "prop-types";
-//# sourceMappingURL=index.d.ts.map

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

@@ -1 +0,0 @@
-{"version":3,"file":"index.d.ts","sourceRoot":"","sources":["../../../src/template/skill-detail/index.js"],"names":[],"mappings":";AAuDA,oEA6IC"}

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

@@ -1,266 +0,0 @@
-"use strict";
-
-exports.__esModule = true;
-exports.default = void 0;
-
-var _get2 = _interopRequireDefault(require("lodash/fp/get"));
-
-var _react = _interopRequireWildcard(require("react"));
-
-var _propTypes = _interopRequireDefault(require("prop-types"));
-
-var _cssColorFunction = require("css-color-function");
-
-var _classnames = _interopRequireDefault(require("classnames"));
-
-var _provider = _interopRequireDefault(require("../../atom/provider"));
-
-var _buttonLink = _interopRequireDefault(require("../../atom/button-link"));
-
-var _icon = _interopRequireDefault(require("../../atom/icon"));
-
-var _style = _interopRequireDefault(require("./style.css"));
-
-function _getRequireWildcardCache(nodeInterop) { if (typeof WeakMap !== "function") return null; var cacheBabelInterop = new WeakMap(); var cacheNodeInterop = new WeakMap(); return (_getRequireWildcardCache = function (nodeInterop) { return nodeInterop ? cacheNodeInterop : cacheBabelInterop; })(nodeInterop); }
-
-function _interopRequireWildcard(obj, nodeInterop) { if (!nodeInterop && obj && obj.__esModule) { return obj; } if (obj === null || typeof obj !== "object" && typeof obj !== "function") { return { default: obj }; } var cache = _getRequireWildcardCache(nodeInterop); if (cache && cache.has(obj)) { return cache.get(obj); } var newObj = {}; var hasPropertyDescriptor = Object.defineProperty && Object.getOwnPropertyDescriptor; for (var key in obj) { if (key !== "default" && Object.prototype.hasOwnProperty.call(obj, key)) { var desc = hasPropertyDescriptor ? Object.getOwnPropertyDescriptor(obj, key) : null; if (desc && (desc.get || desc.set)) { Object.defineProperty(newObj, key, desc); } else { newObj[key] = obj[key]; } } } newObj.default = obj; if (cache) { cache.set(obj, newObj); } return newObj; }
-
-function _interopRequireDefault(obj) { return obj && obj.__esModule ? obj : { default: obj }; }
-
-const ContinueLearningButton = (props, context) => {
-  const [hovered, setHovered] = (0, _react.useState)(false);
-  const {
-    onClick
-  } = props;
-  const {
-    skin,
-    translate
-  } = context;
-  const primarySkinColor = (0, _get2.default)('common.primary', skin);
-  const handleMouseOver = (0, _react.useCallback)(() => setHovered(true), [setHovered]);
-  const handleMouseLeave = (0, _react.useCallback)(() => setHovered(false), [setHovered]);
-  return /*#__PURE__*/_react.default.createElement("div", {
-    onMouseOver: handleMouseOver,
-    onMouseLeave: handleMouseLeave
-  }, /*#__PURE__*/_react.default.createElement(_buttonLink.default, {
-    label: translate('continue_learning'),
-    type: "primary",
-    customStyle: {
-      width: 'fit-content',
-      borderRadius: '12px',
-      backgroundColor: hovered ? (0, _cssColorFunction.convert)(`hsl(from ${primarySkinColor} h s calc(l*(1 - 0.08)))`) : primarySkinColor
-    },
-    icon: {
-      position: 'left',
-      faIcon: {
-        name: 'play',
-        color: '#FFFFFF',
-        size: 16
-      }
-    },
-    onClick: onClick
-  }));
-};
-
-ContinueLearningButton.contextTypes = {
-  skin: _provider.default.childContextTypes.skin,
-  translate: _provider.default.childContextTypes.translate
-};
-ContinueLearningButton.propTypes = process.env.NODE_ENV !== "production" ? {
-  onClick: _propTypes.default.func
-} : {};
-
-const SkillDetail = (props, context) => {
-  const {
-    title,
-    description,
-    metrics,
-    focused,
-    availableForReview,
-    ongoingCourses,
-    skillIncludedCourses,
-    onBackClick,
-    onReviewClick,
-    onContinueLearningClick,
-    onCourseClick
-  } = props;
-  const {
-    score,
-    content,
-    questionsToReview,
-    contentCompleted = 0
-  } = metrics;
-  const {
-    skin,
-    translate
-  } = context;
-  const [showMore, setShowMore] = (0, _react.useState)(false);
-  const handleShowMore = (0, _react.useCallback)(() => setShowMore(!showMore), [setShowMore, showMore]);
-  const Description = (0, _react.useCallback)(() => {
-    return /*#__PURE__*/_react.default.createElement("div", {
-      className: (0, _classnames.default)(_style.default.description, !showMore && _style.default.truncate)
-    }, description);
-  });
-  const ProgressBar = (0, _react.useCallback)(() => {
-    if (score === undefined) return null;
-    const progressBarColor = '#3EC483';
-    const inlineProgressValueStyle = {
-      backgroundColor: progressBarColor,
-      width: `${score}%`
-    };
-    return /*#__PURE__*/_react.default.createElement("div", {
-      className: _style.default.progressBarWrapper
-    }, /*#__PURE__*/_react.default.createElement("div", {
-      "data-name": "progress",
-      className: _style.default.progress,
-      style: inlineProgressValueStyle,
-      role: "progressbar"
-    }));
-  }, [score]);
-  return /*#__PURE__*/_react.default.createElement("div", {
-    className: _style.default.backgroundContainer
-  }, /*#__PURE__*/_react.default.createElement("div", {
-    className: _style.default.container
-  }, /*#__PURE__*/_react.default.createElement("div", {
-    className: _style.default.backButtonWrapper,
-    onClick: onBackClick
-  }, /*#__PURE__*/_react.default.createElement(_icon.default, {
-    iconName: "arrow-left",
-    size: {
-      faSize: 14,
-      wrapperSize: 14
-    }
-  })), /*#__PURE__*/_react.default.createElement("div", {
-    className: _style.default.ctaContainer
-  }, focused ? /*#__PURE__*/_react.default.createElement("div", {
-    className: _style.default.skillFocusBadge
-  }, /*#__PURE__*/_react.default.createElement(_icon.default, {
-    iconName: "bullseye-arrow",
-    backgroundColor: "#DDD1FF",
-    size: {
-      faSize: 10,
-      wrapperSize: 16
-    }
-  }), translate('skill_focus')) : null, /*#__PURE__*/_react.default.createElement("div", {
-    className: _style.default.ctaWrapper
-  }, /*#__PURE__*/_react.default.createElement(_buttonLink.default, {
-    type: "secondary",
-    onClick: onReviewClick,
-    label: translate('review_this_skill'),
-    disabled: !availableForReview,
-    customStyle: {
-      width: 'fit-content',
-      borderRadius: '12px'
-    }
-  }), /*#__PURE__*/_react.default.createElement(ContinueLearningButton, {
-    onClick: onContinueLearningClick
-  }))), /*#__PURE__*/_react.default.createElement("div", {
-    className: _style.default.title
-  }, title), description ? /*#__PURE__*/_react.default.createElement(_react.default.Fragment, null, /*#__PURE__*/_react.default.createElement(Description, null), description.length >= 226 ? /*#__PURE__*/_react.default.createElement("div", {
-    className: _style.default.showMoreWrapper,
-    onClick: handleShowMore
-  }, showMore ? translate('Show less') : translate('Show more'), /*#__PURE__*/_react.default.createElement(_icon.default, {
-    iconName: showMore ? "chevron-up" : "chevron-down",
-    size: {
-      faSize: 14,
-      wrapperSize: 16
-    }
-  })) : null) : null, /*#__PURE__*/_react.default.createElement("div", {
-    className: _style.default.progressInformationsWrapper
-  }, /*#__PURE__*/_react.default.createElement("div", {
-    className: _style.default.progressTitle
-  }, translate('your_progress')), /*#__PURE__*/_react.default.createElement("div", {
-    className: _style.default.skillCoursesAndQuestionsWrapper
-  }, content ? /*#__PURE__*/_react.default.createElement("div", {
-    className: _style.default.skillInformation,
-    "data-name": "skill-courses"
-  }, /*#__PURE__*/_react.default.createElement("span", {
-    className: _style.default.skillInformationNumber
-  }, content), " ", translate('courses')) : null, questionsToReview ? /*#__PURE__*/_react.default.createElement("div", {
-    className: _style.default.skillInformation,
-    "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", {
-    className: _style.default.progressInformations
-  }, content && /*#__PURE__*/_react.default.createElement(_react.default.Fragment, null, /*#__PURE__*/_react.default.createElement("div", {
-    className: _style.default.progressInformation,
-    "data-name": "skill-completed-courses"
-  }, /*#__PURE__*/_react.default.createElement("span", {
-    className: _style.default.progressInformationNumber
-  }, contentCompleted), ` ${translate('courses_completed')}`), /*#__PURE__*/_react.default.createElement("div", {
-    className: _style.default.progressInformation,
-    "data-name": "completed-percentage"
-  }, /*#__PURE__*/_react.default.createElement("span", {
-    className: _style.default.progressInformationNumber
-  }, score, "%"))))), /*#__PURE__*/_react.default.createElement(ContinueLearning, {
-    ongoingCourses: ongoingCourses,
-    onCourseClick: onCourseClick
-  })));
-};
-
-SkillDetail.contextTypes = {
-  skin: _provider.default.childContextTypes.skin,
-  translate: _provider.default.childContextTypes.translate
-};
-SkillDetail.propTypes = process.env.NODE_ENV !== "production" ? {
-  title: _propTypes.default.string.isRequired,
-  description: _propTypes.default.string,
-  metrics: _propTypes.default.shape({
-    score: _propTypes.default.number,
-    content: _propTypes.default.number,
-    questionsToReview: _propTypes.default.number,
-    contentCompleted: _propTypes.default.number
-  }),
-  focused: _propTypes.default.bool,
-  availableForReview: _propTypes.default.bool,
-  ongoingCourses: _propTypes.default.arrayOf(_propTypes.default.shape({
-    title: _propTypes.default.string,
-    provider: _propTypes.default.string,
-    progress: _propTypes.default.number
-  })),
-  skillIncludedCourses: _propTypes.default.arrayOf(_propTypes.default.shape({
-    title: _propTypes.default.string,
-    type: _propTypes.default.string,
-    provider: _propTypes.default.string,
-    progress: _propTypes.default.number
-  })),
-  onBackClick: _propTypes.default.func,
-  onReviewClick: _propTypes.default.func,
-  onContinueLearningClick: _propTypes.default.func,
-  onCourseClick: _propTypes.default.func
-} : {};
-var _default = SkillDetail;
-exports.default = _default;
-
-const ContinueLearning = (props, context) => {
-  const {
-    ongoingCourses,
-    onCourseClick
-  } = props;
-  const {
-    skin,
-    translate
-  } = context;
-  return /*#__PURE__*/_react.default.createElement("div", {
-    className: _style.default.continueLearningWrapper
-  }, /*#__PURE__*/_react.default.createElement("span", {
-    className: _style.default.continueLearningTitle
-  }, translate('continue_learning')), /*#__PURE__*/_react.default.createElement("span", {
-    className: _style.default.continueLearningNumber
-  }, ongoingCourses.length));
-};
-
-ContinueLearning.contextTypes = {
-  skin: _provider.default.childContextTypes.skin,
-  translate: _provider.default.childContextTypes.translate
-};
-ContinueLearning.propTypes = process.env.NODE_ENV !== "production" ? {
-  ongoingCourses: _propTypes.default.arrayOf(_propTypes.default.shape({
-    title: _propTypes.default.string,
-    provider: _propTypes.default.string,
-    progress: _propTypes.default.number
-  })),
-  onCourseClick: _propTypes.default.func
-} : {};
-//# sourceMappingURL=index.js.map

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

@@ -1 +0,0 @@
-{"version":3,"file":"index.js","names":["ContinueLearningButton","props","context","hovered","setHovered","useState","onClick","skin","translate","primarySkinColor","handleMouseOver","useCallback","handleMouseLeave","width","borderRadius","backgroundColor","convert","position","faIcon","name","color","size","contextTypes","Provider","childContextTypes","propTypes","PropTypes","func","SkillDetail","title","description","metrics","focused","availableForReview","ongoingCourses","skillIncludedCourses","onBackClick","onReviewClick","onContinueLearningClick","onCourseClick","score","content","questionsToReview","contentCompleted","showMore","setShowMore","handleShowMore","Description","classnames","style","truncate","ProgressBar","undefined","progressBarColor","inlineProgressValueStyle","progressBarWrapper","progress","backgroundContainer","container","backButtonWrapper","faSize","wrapperSize","ctaContainer","skillFocusBadge","ctaWrapper","length","showMoreWrapper","progressInformationsWrapper","progressTitle","skillCoursesAndQuestionsWrapper","skillInformation","skillInformationNumber","progressInformations","progressInformation","progressInformationNumber","string","isRequired","shape","number","bool","arrayOf","provider","type","ContinueLearning","continueLearningWrapper","continueLearningTitle","continueLearningNumber"],"sources":["../../../src/template/skill-detail/index.js"],"sourcesContent":["import React, {useCallback, useState, useMemo} 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 ButtonLink from '../../atom/button-link';\nimport Icon from '../../atom/icon';\nimport style from './style.css';\n\nconst ContinueLearningButton = (props, context) => {\n  const [hovered, setHovered] = useState(false);\n  const {onClick} = props;\n  const {skin, translate} = context;\n  const primarySkinColor = get('common.primary', skin);\n\n  const handleMouseOver = useCallback(() => setHovered(true), [setHovered]);\n\n  const handleMouseLeave = useCallback(() => setHovered(false), [setHovered]);\n\n  return (\n    <div onMouseOver={handleMouseOver} onMouseLeave={handleMouseLeave}>\n      <ButtonLink\n        label={translate('continue_learning')}\n        type=\"primary\"\n        customStyle={{\n          width: 'fit-content',\n          borderRadius: '12px',\n          backgroundColor: hovered\n            ? convert(`hsl(from ${primarySkinColor} h s calc(l*(1 - 0.08)))`)\n            : primarySkinColor\n        }}\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  onClick: PropTypes.func\n};\n\nconst SkillDetail = (props, context) => {\n  const {\n    title,\n    description,\n    metrics,\n    focused,\n    availableForReview,\n    ongoingCourses,\n    skillIncludedCourses,\n    onBackClick,\n    onReviewClick,\n    onContinueLearningClick,\n    onCourseClick\n  } = props;\n  const {score, content, questionsToReview, contentCompleted = 0} = metrics;\n  const {skin, 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  });\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}>\n        <div className={style.backButtonWrapper} onClick={onBackClick}>\n          <Icon\n            iconName=\"arrow-left\"\n            size={{\n              faSize: 14,\n              wrapperSize: 14\n            }}\n          />\n        </div>\n        <div className={style.ctaContainer}>\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\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 onClick={onContinueLearningClick} />\n          </div>\n        </div>\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> : null}\n          </> \n        : null}\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> {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}%</span>\n                </div>\n              </>\n            )}\n          </div>\n        </div>\n        <ContinueLearning ongoingCourses={ongoingCourses} onCourseClick={onCourseClick} />\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  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.arrayOf(\n    PropTypes.shape({\n      title: PropTypes.string,\n      provider: PropTypes.string,\n      progress: PropTypes.number\n    })\n  ),\n  skillIncludedCourses: PropTypes.arrayOf(\n    PropTypes.shape({\n      title: PropTypes.string,\n      type: PropTypes.string,\n      provider: PropTypes.string,\n      progress: PropTypes.number\n    })\n  ),\n  onBackClick: PropTypes.func,\n  onReviewClick: PropTypes.func,\n  onContinueLearningClick: PropTypes.func,\n  onCourseClick: PropTypes.func\n};\n\nexport default SkillDetail;\n\nconst ContinueLearning = (props, context) => {\n  const {\n    ongoingCourses,\n    onCourseClick\n  } = props;\n  const {skin, translate} = context;\n\n  return (\n    <div className={style.continueLearningWrapper}>\n      <span className={style.continueLearningTitle}>{translate('continue_learning')}</span>\n      <span className={style.continueLearningNumber}>\n        {ongoingCourses.length}\n      </span>\n    </div>\n  )\n}\n\nContinueLearning.contextTypes = {\n  skin: Provider.childContextTypes.skin,\n  translate: Provider.childContextTypes.translate\n};\n\nContinueLearning.propTypes = {\n  ongoingCourses: PropTypes.arrayOf(\n    PropTypes.shape({\n      title: PropTypes.string,\n      provider: PropTypes.string,\n      progress: PropTypes.number\n    })\n  ),\n  onCourseClick: PropTypes.func\n};\n"],"mappings":"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"}

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

@@ -1,172 +0,0 @@
-@value colors: "../../variables/colors.css";
-@value xtraLightGrey from colors;
-@value cm_grey_100 from colors;
-@value cm_grey_400 from colors;
-
-.textBase {
-  font-family: "Gilroy";
-  font-style: normal;
-}
-
-.backgroundContainer {
-  background-color: white;
-  min-height: 100%;
-  width: 100%;
-}
-
-.container {
-  composes: textBase;
-  background-color: white;
-  font-family: "Gilroy";
-  font-style: normal;
-  margin-top: 48px;
-  margin-bottom: 48px;
-  margin-left: auto;
-  margin-right: auto;
-  padding: 0 16px;
-  position: relative;
-  box-sizing: border-box;
-  min-height: 100%;
-  width: 100%;
-  max-width: calc(1080px + 32px);
-}
-
-.backButtonWrapper {
-  margin-bottom: 16px;
-  background-color: cm_grey_100;
-  border-radius: 8px;
-  width: fit-content;
-  padding: 8px;
-  cursor: pointer;
-}
-
-.ctaContainer {
-  display: flex;
-  width: 100%;
-  justify-content: space-between;
-}
-
-.skillFocusBadge {
-  display: flex;
-  height: 12px;
-  width: fit-content;
-  align-items: center;
-  background-color: #DDD1FF;
-  border-radius: 24px;
-  padding: 4px 8px;
-  font-size: 12px;
-  line-height: 16px;
-  font-weight: 600;
-  color: #3900D6;
-  margin-right: 8px;
-}
-
-.ctaWrapper,
-.showMoreWrapper {
-  display: flex;
-  gap: 8px;
-}
-
-.showMoreWrapper {
-  align-items: center;
-  margin-top: 8px;
-  font-weight: 600;
-  cursor: pointer;
-}
-
-.title {
-  font-size: 24px;
-  font-weight: 700;
-  line-height: 32px;
-}
-
-.description {
-  margin-top: 8px;
-  max-width: 734px;
-  font-size: 14px;
-  font-weight: 500;
-  line-height: 20px;
-  color: cm_grey_400;
-}
-
-.truncate {
-  display: -webkit-box;
-  -webkit-line-clamp: 2;
-  -webkit-box-orient: vertical;
-  overflow: hidden;
-  text-overflow: ellipsis;
-}
-
-.progressInformationsWrapper {
-  margin-top: 40px;
-  background-color: xtraLightGrey;
-  border-radius: 16px;
-  padding: 24px;
-}
-
-.progressTitle {
-  font-size: 16px;
-  font-weight: 600;
-  line-height: 22px;
-  margin-bottom: 16px;
-}
-
-.skillCoursesAndQuestionsWrapper,
-.progressInformations {
-  display: flex;
-  justify-content: space-between;
-  margin-bottom: 8px;
-}
-
-.skillInformation,
-.progressInformation {
-  composes: textBase;
-  font-weight: 600;
-  font-size: 14px;
-  line-height: 20px;
-  color: cm_grey_400;
-}
-
-.skillInformationNumber,
-.progressInformationNumber {
-  color: #000;
-}
-
-.progressBarWrapper {
-  position: relative;
-  left: 0;
-  width: 100%;
-  height: 4px;
-  border-radius: 2px;
-  overflow: hidden;
-  background-color: cm_grey_100;
-  margin: 16px 0;
-}
-
-.progress {
-  display: block;
-  height: 8px;
-  animation: progressbar 2s ease-in-out;
-}
-
-/* Continue Learning */
-.continueLearningWrapper {
-  margin-top: 40px;
-}
-
-.continueLearningTitle {
-  font-size: 16px;
-  font-weight: 600;
-  line-height: 22px;
-}
-
-.continueLearningNumber {
-  border-radius: 50%;
-  background-color: #EAEAEB;
-  color: #515161;
-  padding: 2px 4px;
-  margin-left: 8px;
-  font-size: 10px;
-  font-weight: 600;
-  line-height: 12px;
-}