@coorpacademy/components 10.21.0-alpha.0 → 10.21.2

package/lib/molecule/questions/qcm-drag/index.js

@@ -19,11 +19,9 @@ var _classnames = _interopRequireDefault(require("classnames"));
 
 var _provider = _interopRequireDefault(require("../../../atom/provider"));
 
-var _style = require("../../../atom/label/style.css");
-
 var _getShadowBoxColorFromPrimary = require("../../../util/get-shadow-box-color-from-primary");
 
-var _style2 = _interopRequireDefault(require("./style.css"));
+var _style = _interopRequireDefault(require("./style.css"));
 
 function _interopRequireDefault(obj) { return obj && obj.__esModule ? obj : { default: obj }; }
 
@@ -38,7 +36,7 @@ const AnswersPropTypes = process.env.NODE_ENV !== "production" ? _propTypes.defa
 const EmptyView = ({
   help
 }) => /*#__PURE__*/_react.default.createElement("span", {
-  className: _style2.default.emptySpan
+  className: _style.default.emptySpan
 }, help);
 
 EmptyView.contextTypes = {
@@ -58,7 +56,7 @@ const Choices = ({
       selected
     } = answer;
     return /*#__PURE__*/_react.default.createElement("div", {
-      className: (0, _classnames.default)(selected ? _style2.default.invisibleAnswer : _style2.default.unselected, _style.innerHTML),
+      className: (0, _classnames.default)(selected ? _style.default.invisibleAnswer : _style.default.unselected, _style.default.innerHTML),
       "data-name": "answer",
       onClick: onClick,
       key: key // eslint-disable-next-line react/no-danger
@@ -69,7 +67,7 @@ const Choices = ({
     });
   });
   return /*#__PURE__*/_react.default.createElement("div", {
-    className: _style2.default.choices
+    className: _style.default.choices
   }, answersViews);
 };
 
@@ -93,7 +91,7 @@ const SelectedAnswerSections = ({
       onClick: onClick,
       key: key,
       "data-name": "selectedAnswer",
-      className: _style2.default.selected,
+      className: _style.default.selected,
       style: {
         boxShadow: `0px 4px 16px ${(0, _getShadowBoxColorFromPrimary.getShadowBoxColorFromPrimary)(backgroundColor)}`
       }
@@ -102,12 +100,12 @@ const SelectedAnswerSections = ({
       style: {
         backgroundColor
       },
-      className: _style2.default.background
+      className: _style.default.background
     }), /*#__PURE__*/_react.default.createElement("div", {
-      className: _style2.default.content
+      className: _style.default.content
     }, /*#__PURE__*/_react.default.createElement("span", {
       "data-name": "answerContent",
-      className: (0, _classnames.default)(_style2.default.selectedAnswerText, _style.innerHTML),
+      className: (0, _classnames.default)(_style.default.selectedAnswerText, _style.default.innerHTML),
       title: title // eslint-disable-next-line react/no-danger
       ,
       dangerouslySetInnerHTML: {
@@ -118,11 +116,11 @@ const SelectedAnswerSections = ({
 
   if (selectedAnswersViews.length > 0) {
     return /*#__PURE__*/_react.default.createElement("div", {
-      className: _style2.default.selectedAnswers
+      className: _style.default.selectedAnswers
     }, selectedAnswersViews);
   } else {
     return /*#__PURE__*/_react.default.createElement("div", {
-      className: _style2.default.emptyAnswers
+      className: _style.default.emptyAnswers
     }, /*#__PURE__*/_react.default.createElement(EmptyView, {
       help: help
     }));
@@ -144,14 +142,14 @@ const QcmDrag = ({
   } = context;
   const primarySkinColor = (0, _getOr2.default)('#00B0FF', 'common.primary', skin);
   return /*#__PURE__*/_react.default.createElement("div", {
-    className: _style2.default.wrapper
+    className: _style.default.wrapper
   }, /*#__PURE__*/_react.default.createElement(SelectedAnswerSections, {
     answers: answers,
     help: help,
     backgroundColor: primarySkinColor
   }), /*#__PURE__*/_react.default.createElement("div", {
     "data-name": "qcm-drag-answers",
-    className: _style2.default.answers
+    className: _style.default.answers
   }, /*#__PURE__*/_react.default.createElement(Choices, {
     answers: answers
   })));

package/lib/molecule/questions/qcm-drag/index.js.map

@@ -1 +1 @@
-{"version":3,"sources":["../../../../src/molecule/questions/qcm-drag/index.js"],"names":["AnswersPropTypes","PropTypes","arrayOf","shape","onClick","func","order","number","selected","bool","title","string","help","EmptyView","style","emptySpan","contextTypes","translate","Provider","childContextTypes","propTypes","Choices","answers","answersViews","map","answer","key","invisibleAnswer","unselected","innerHTML","__html","choices","SelectedAnswerSections","backgroundColor","selectedAnswers","selectedAnswersViews","boxShadow","background","content","selectedAnswerText","length","emptyAnswers","QcmDrag","context","skin","primarySkinColor","wrapper"],"mappings":"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","sourcesContent":["import React from 'react';\nimport PropTypes from 'prop-types';\nimport {pipe, filter, orderBy, getOr} from 'lodash/fp';\nimport classnames from 'classnames';\nimport Provider from '../../../atom/provider';\nimport {innerHTML} from '../../../atom/label/style.css';\nimport {getShadowBoxColorFromPrimary} from '../../../util/get-shadow-box-color-from-primary';\nimport style from './style.css';\n\nconst AnswersPropTypes = PropTypes.arrayOf(\n  PropTypes.shape({\n    onClick: PropTypes.func,\n    order: PropTypes.number,\n    selected: PropTypes.bool,\n    title: PropTypes.string,\n    help: PropTypes.string\n  })\n);\n\nconst EmptyView = ({help}) => <span className={style.emptySpan}>{help}</span>;\n\nEmptyView.contextTypes = {\n  translate: Provider.childContextTypes.translate\n};\n\nEmptyView.propTypes = {\n  help: PropTypes.string\n};\n\nconst Choices = ({answers}) => {\n  const answersViews = answers.map((answer, key) => {\n    const {onClick, title, selected} = answer;\n    return (\n      <div\n        className={classnames(selected ? style.invisibleAnswer : style.unselected, innerHTML)}\n        data-name=\"answer\"\n        onClick={onClick}\n        key={key}\n        // eslint-disable-next-line react/no-danger\n        dangerouslySetInnerHTML={{__html: title}}\n      />\n    );\n  });\n\n  return <div className={style.choices}>{answersViews}</div>;\n};\n\nChoices.propTypes = {\n  answers: AnswersPropTypes\n};\n\nconst SelectedAnswerSections = ({answers, help, backgroundColor}) => {\n  const selectedAnswers = pipe(filter('selected'), orderBy('order', 'asc'))(answers);\n  const selectedAnswersViews = selectedAnswers.map((answer, key) => {\n    const {onClick, title} = answer;\n    return (\n      <div\n        data-selected=\"true\"\n        onClick={onClick}\n        key={key}\n        data-name=\"selectedAnswer\"\n        className={style.selected}\n        style={{\n          boxShadow: `0px 4px 16px ${getShadowBoxColorFromPrimary(backgroundColor)}`\n        }}\n      >\n        <div\n          data-name=\"answerBackground\"\n          style={{\n            backgroundColor\n          }}\n          className={style.background}\n        />\n        <div className={style.content}>\n          <span\n            data-name=\"answerContent\"\n            className={classnames(style.selectedAnswerText, innerHTML)}\n            title={title}\n            // eslint-disable-next-line react/no-danger\n            dangerouslySetInnerHTML={{__html: title}}\n          />\n        </div>\n      </div>\n    );\n  });\n\n  if (selectedAnswersViews.length > 0) {\n    return <div className={style.selectedAnswers}>{selectedAnswersViews}</div>;\n  } else {\n    return (\n      <div className={style.emptyAnswers}>\n        <EmptyView help={help} />\n      </div>\n    );\n  }\n};\n\nSelectedAnswerSections.propTypes = {\n  answers: AnswersPropTypes,\n  help: EmptyView.propTypes.help,\n  backgroundColor: PropTypes.string\n};\n\nconst QcmDrag = ({answers, help}, context) => {\n  const {skin} = context;\n  const primarySkinColor = getOr('#00B0FF', 'common.primary', skin);\n\n  return (\n    <div className={style.wrapper}>\n      <SelectedAnswerSections answers={answers} help={help} backgroundColor={primarySkinColor} />\n      <div data-name=\"qcm-drag-answers\" className={style.answers}>\n        <Choices answers={answers} />\n      </div>\n    </div>\n  );\n};\n\nQcmDrag.propTypes = {\n  answers: AnswersPropTypes,\n  help: SelectedAnswerSections.propTypes.help\n};\n\nQcmDrag.contextTypes = {\n  skin: Provider.childContextTypes.skin\n};\n\nexport default QcmDrag;\n"],"file":"index.js"}
+{"version":3,"sources":["../../../../src/molecule/questions/qcm-drag/index.js"],"names":["AnswersPropTypes","PropTypes","arrayOf","shape","onClick","func","order","number","selected","bool","title","string","help","EmptyView","style","emptySpan","contextTypes","translate","Provider","childContextTypes","propTypes","Choices","answers","answersViews","map","answer","key","invisibleAnswer","unselected","innerHTML","__html","choices","SelectedAnswerSections","backgroundColor","selectedAnswers","selectedAnswersViews","boxShadow","background","content","selectedAnswerText","length","emptyAnswers","QcmDrag","context","skin","primarySkinColor","wrapper"],"mappings":"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","sourcesContent":["import React from 'react';\nimport PropTypes from 'prop-types';\nimport {pipe, filter, orderBy, getOr} from 'lodash/fp';\nimport classnames from 'classnames';\nimport Provider from '../../../atom/provider';\nimport {getShadowBoxColorFromPrimary} from '../../../util/get-shadow-box-color-from-primary';\nimport style from './style.css';\n\nconst AnswersPropTypes = PropTypes.arrayOf(\n  PropTypes.shape({\n    onClick: PropTypes.func,\n    order: PropTypes.number,\n    selected: PropTypes.bool,\n    title: PropTypes.string,\n    help: PropTypes.string\n  })\n);\n\nconst EmptyView = ({help}) => <span className={style.emptySpan}>{help}</span>;\n\nEmptyView.contextTypes = {\n  translate: Provider.childContextTypes.translate\n};\n\nEmptyView.propTypes = {\n  help: PropTypes.string\n};\n\nconst Choices = ({answers}) => {\n  const answersViews = answers.map((answer, key) => {\n    const {onClick, title, selected} = answer;\n    return (\n      <div\n        className={classnames(selected ? style.invisibleAnswer : style.unselected, style.innerHTML)}\n        data-name=\"answer\"\n        onClick={onClick}\n        key={key}\n        // eslint-disable-next-line react/no-danger\n        dangerouslySetInnerHTML={{__html: title}}\n      />\n    );\n  });\n\n  return <div className={style.choices}>{answersViews}</div>;\n};\n\nChoices.propTypes = {\n  answers: AnswersPropTypes\n};\n\nconst SelectedAnswerSections = ({answers, help, backgroundColor}) => {\n  const selectedAnswers = pipe(filter('selected'), orderBy('order', 'asc'))(answers);\n  const selectedAnswersViews = selectedAnswers.map((answer, key) => {\n    const {onClick, title} = answer;\n    return (\n      <div\n        data-selected=\"true\"\n        onClick={onClick}\n        key={key}\n        data-name=\"selectedAnswer\"\n        className={style.selected}\n        style={{\n          boxShadow: `0px 4px 16px ${getShadowBoxColorFromPrimary(backgroundColor)}`\n        }}\n      >\n        <div\n          data-name=\"answerBackground\"\n          style={{\n            backgroundColor\n          }}\n          className={style.background}\n        />\n        <div className={style.content}>\n          <span\n            data-name=\"answerContent\"\n            className={classnames(style.selectedAnswerText, style.innerHTML)}\n            title={title}\n            // eslint-disable-next-line react/no-danger\n            dangerouslySetInnerHTML={{__html: title}}\n          />\n        </div>\n      </div>\n    );\n  });\n\n  if (selectedAnswersViews.length > 0) {\n    return <div className={style.selectedAnswers}>{selectedAnswersViews}</div>;\n  } else {\n    return (\n      <div className={style.emptyAnswers}>\n        <EmptyView help={help} />\n      </div>\n    );\n  }\n};\n\nSelectedAnswerSections.propTypes = {\n  answers: AnswersPropTypes,\n  help: EmptyView.propTypes.help,\n  backgroundColor: PropTypes.string\n};\n\nconst QcmDrag = ({answers, help}, context) => {\n  const {skin} = context;\n  const primarySkinColor = getOr('#00B0FF', 'common.primary', skin);\n\n  return (\n    <div className={style.wrapper}>\n      <SelectedAnswerSections answers={answers} help={help} backgroundColor={primarySkinColor} />\n      <div data-name=\"qcm-drag-answers\" className={style.answers}>\n        <Choices answers={answers} />\n      </div>\n    </div>\n  );\n};\n\nQcmDrag.propTypes = {\n  answers: AnswersPropTypes,\n  help: SelectedAnswerSections.propTypes.help\n};\n\nQcmDrag.contextTypes = {\n  skin: Provider.childContextTypes.skin\n};\n\nexport default QcmDrag;\n"],"file":"index.js"}

package/lib/molecule/questions/qcm-drag/style.css

@@ -137,3 +137,7 @@
     min-height: auto;
   }
 }
+
+.innerHTML {
+  composes: innerHTML from '../../../atom/label/style.css'
+}

package/lib/molecule/questions/qcm-graphic/index.js

@@ -13,11 +13,9 @@ var _classnames = _interopRequireDefault(require("classnames"));
 
 var _provider = _interopRequireDefault(require("../../../atom/provider"));
 
-var _style = require("../../../atom/label/style.css");
-
 var _getShadowBoxColorFromPrimary = require("../../../util/get-shadow-box-color-from-primary");
 
-var _style2 = _interopRequireDefault(require("./style.css"));
+var _style = _interopRequireDefault(require("./style.css"));
 
 function _interopRequireDefault(obj) { return obj && obj.__esModule ? obj : { default: obj }; }
 
@@ -46,19 +44,19 @@ const QCMImage = (props, context) => {
       style: _extends({}, selected && {
         boxShadow: `0 4px 16px ${(0, _getShadowBoxColorFromPrimary.getShadowBoxColorFromPrimary)(primarySkinColor)}`
       }),
-      className: selected ? _style2.default.selected : _style2.default.answer,
+      className: selected ? _style.default.selected : _style.default.answer,
       key: key
     }, /*#__PURE__*/_react.default.createElement("div", {
       "data-name": "answerBackground",
       style: {
         backgroundColor: selected ? primarySkinColor : '#F4F4F5'
       },
-      className: _style2.default.background
+      className: _style.default.background
     }), /*#__PURE__*/_react.default.createElement("div", {
       "data-name": "answerContent",
-      className: _style2.default.content
+      className: _style.default.content
     }, /*#__PURE__*/_react.default.createElement("div", {
-      className: _style2.default.imageWrapper,
+      className: _style.default.imageWrapper,
       "data-name": "answerImage",
       "aria-label": ariaLabel || title,
       style: {
@@ -66,10 +64,10 @@ const QCMImage = (props, context) => {
       }
     }), /*#__PURE__*/_react.default.createElement("div", {
       "data-name": "answerText",
-      className: _style2.default.titleWrapper
+      className: _style.default.titleWrapper
     }, /*#__PURE__*/_react.default.createElement("div", {
       title: title,
-      className: (0, _classnames.default)(_style2.default.title, _style.innerHTML) // eslint-disable-next-line react/no-danger
+      className: (0, _classnames.default)(_style.default.title, _style.default.innerHTML) // eslint-disable-next-line react/no-danger
       ,
       dangerouslySetInnerHTML: {
         __html: title
@@ -78,7 +76,7 @@ const QCMImage = (props, context) => {
   });
   return /*#__PURE__*/_react.default.createElement("div", {
     "data-name": "qcm-graphic-wrapper",
-    className: _style2.default.wrapper
+    className: _style.default.wrapper
   }, answersViews);
 };
 

package/lib/molecule/questions/qcm-graphic/index.js.map

@@ -1 +1 @@
-{"version":3,"sources":["../../../../src/molecule/questions/qcm-graphic/index.js"],"names":["QCMImage","props","context","answers","skin","primarySkinColor","answersViews","map","answer","key","onClick","title","selected","image","ariaLabel","boxShadow","style","backgroundColor","background","content","imageWrapper","backgroundImage","titleWrapper","innerHTML","__html","wrapper","contextTypes","Provider","childContextTypes","propTypes","PropTypes","arrayOf","shape","string","bool","func"],"mappings":";;;;;;;AAAA;;AACA;;AAEA;;AACA;;AACA;;AACA;;AACA;;;;;;AAEA,MAAMA,QAAQ,GAAG,CAACC,KAAD,EAAQC,OAAR,KAAoB;AACnC,QAAM;AAACC,IAAAA;AAAD,MAAYF,KAAlB;AACA,QAAM;AAACG,IAAAA;AAAD,MAASF,OAAf;AACA,QAAMG,gBAAgB,GAAG,qBAAM,SAAN,EAAiB,gBAAjB,EAAmCD,IAAnC,CAAzB;AAEA,QAAME,YAAY,GAAGH,OAAO,CAACI,GAAR,CAAY,CAACC,MAAD,EAASC,GAAT,KAAiB;AAChD,UAAM;AAACC,MAAAA,OAAD;AAAUC,MAAAA,KAAV;AAAiBC,MAAAA,QAAjB;AAA2BC,MAAAA,KAA3B;AAAkCC,MAAAA;AAAlC,QAA+CN,MAArD;AAEA,wBACE;AACE,MAAA,OAAO,EAAEE,OADX;AAEE,uBAAeE,QAFjB;AAGE,mBAAU,eAHZ;AAIE,MAAA,KAAK,eACCA,QAAQ,IAAI;AACdG,QAAAA,SAAS,EAAG,cAAa,gEAA6BV,gBAA7B,CAA+C;AAD1D,OADb,CAJP;AASE,MAAA,SAAS,EAAEO,QAAQ,GAAGI,gBAAMJ,QAAT,GAAoBI,gBAAMR,MAT/C;AAUE,MAAA,GAAG,EAAEC;AAVP,oBAYE;AACE,mBAAU,kBADZ;AAEE,MAAA,KAAK,EAAE;AACLQ,QAAAA,eAAe,EAAEL,QAAQ,GAAGP,gBAAH,GAAsB;AAD1C,OAFT;AAKE,MAAA,SAAS,EAAEW,gBAAME;AALnB,MAZF,eAmBE;AAAK,mBAAU,eAAf;AAA+B,MAAA,SAAS,EAAEF,gBAAMG;AAAhD,oBACE;AACE,MAAA,SAAS,EAAEH,gBAAMI,YADnB;AAEE,mBAAU,aAFZ;AAGE,oBAAYN,SAAS,IAAIH,KAH3B;AAIE,MAAA,KAAK,EAAE;AACLU,QAAAA,eAAe,EAAG,OAAMR,KAAM;AADzB;AAJT,MADF,eASE;AAAK,mBAAU,YAAf;AAA4B,MAAA,SAAS,EAAEG,gBAAMM;AAA7C,oBACE;AACE,MAAA,KAAK,EAAEX,KADT;AAEE,MAAA,SAAS,EAAE,yBAAWK,gBAAML,KAAjB,EAAwBY,gBAAxB,CAFb,CAGE;AAHF;AAIE,MAAA,uBAAuB,EAAE;AAACC,QAAAA,MAAM,EAAEb;AAAT;AAJ3B,MADF,CATF,CAnBF,CADF;AAwCD,GA3CoB,CAArB;AA6CA,sBACE;AAAK,iBAAU,qBAAf;AAAqC,IAAA,SAAS,EAAEK,gBAAMS;AAAtD,KACGnB,YADH,CADF;AAKD,CAvDD;;AAyDAN,QAAQ,CAAC0B,YAAT,GAAwB;AACtBtB,EAAAA,IAAI,EAAEuB,kBAASC,iBAAT,CAA2BxB;AADX,CAAxB;AAIAJ,QAAQ,CAAC6B,SAAT,2CAAqB;AACnB1B,EAAAA,OAAO,EAAE2B,mBAAUC,OAAV,CACPD,mBAAUE,KAAV,CAAgB;AACdrB,IAAAA,KAAK,EAAEmB,mBAAUG,MADH;AAEdrB,IAAAA,QAAQ,EAAEkB,mBAAUI,IAFN;AAGdxB,IAAAA,OAAO,EAAEoB,mBAAUK,IAHL;AAIdtB,IAAAA,KAAK,EAAEiB,mBAAUG,MAJH;AAKdnB,IAAAA,SAAS,EAAEgB,mBAAUG;AALP,GAAhB,CADO;AADU,CAArB;eAYejC,Q","sourcesContent":["import React from 'react';\nimport PropTypes from 'prop-types';\nimport {getOr} from 'lodash/fp';\nimport classnames from 'classnames';\nimport Provider from '../../../atom/provider';\nimport {innerHTML} from '../../../atom/label/style.css';\nimport {getShadowBoxColorFromPrimary} from '../../../util/get-shadow-box-color-from-primary';\nimport style from './style.css';\n\nconst QCMImage = (props, context) => {\n  const {answers} = props;\n  const {skin} = context;\n  const primarySkinColor = getOr('#00B0FF', 'common.primary', skin);\n\n  const answersViews = answers.map((answer, key) => {\n    const {onClick, title, selected, image, ariaLabel} = answer;\n\n    return (\n      <div\n        onClick={onClick}\n        data-selected={selected}\n        data-name=\"answerGraphic\"\n        style={{\n          ...(selected && {\n            boxShadow: `0 4px 16px ${getShadowBoxColorFromPrimary(primarySkinColor)}`\n          })\n        }}\n        className={selected ? style.selected : style.answer}\n        key={key}\n      >\n        <div\n          data-name=\"answerBackground\"\n          style={{\n            backgroundColor: selected ? primarySkinColor : '#F4F4F5'\n          }}\n          className={style.background}\n        />\n        <div data-name=\"answerContent\" className={style.content}>\n          <div\n            className={style.imageWrapper}\n            data-name=\"answerImage\"\n            aria-label={ariaLabel || title}\n            style={{\n              backgroundImage: `url(${image})`\n            }}\n          />\n          <div data-name=\"answerText\" className={style.titleWrapper}>\n            <div\n              title={title}\n              className={classnames(style.title, innerHTML)}\n              // eslint-disable-next-line react/no-danger\n              dangerouslySetInnerHTML={{__html: title}}\n            />\n          </div>\n        </div>\n      </div>\n    );\n  });\n\n  return (\n    <div data-name=\"qcm-graphic-wrapper\" className={style.wrapper}>\n      {answersViews}\n    </div>\n  );\n};\n\nQCMImage.contextTypes = {\n  skin: Provider.childContextTypes.skin\n};\n\nQCMImage.propTypes = {\n  answers: PropTypes.arrayOf(\n    PropTypes.shape({\n      title: PropTypes.string,\n      selected: PropTypes.bool,\n      onClick: PropTypes.func,\n      image: PropTypes.string,\n      ariaLabel: PropTypes.string\n    })\n  )\n};\n\nexport default QCMImage;\n"],"file":"index.js"}
+{"version":3,"sources":["../../../../src/molecule/questions/qcm-graphic/index.js"],"names":["QCMImage","props","context","answers","skin","primarySkinColor","answersViews","map","answer","key","onClick","title","selected","image","ariaLabel","boxShadow","style","backgroundColor","background","content","imageWrapper","backgroundImage","titleWrapper","innerHTML","__html","wrapper","contextTypes","Provider","childContextTypes","propTypes","PropTypes","arrayOf","shape","string","bool","func"],"mappings":";;;;;;;AAAA;;AACA;;AAEA;;AACA;;AACA;;AACA;;;;;;AAEA,MAAMA,QAAQ,GAAG,CAACC,KAAD,EAAQC,OAAR,KAAoB;AACnC,QAAM;AAACC,IAAAA;AAAD,MAAYF,KAAlB;AACA,QAAM;AAACG,IAAAA;AAAD,MAASF,OAAf;AACA,QAAMG,gBAAgB,GAAG,qBAAM,SAAN,EAAiB,gBAAjB,EAAmCD,IAAnC,CAAzB;AAEA,QAAME,YAAY,GAAGH,OAAO,CAACI,GAAR,CAAY,CAACC,MAAD,EAASC,GAAT,KAAiB;AAChD,UAAM;AAACC,MAAAA,OAAD;AAAUC,MAAAA,KAAV;AAAiBC,MAAAA,QAAjB;AAA2BC,MAAAA,KAA3B;AAAkCC,MAAAA;AAAlC,QAA+CN,MAArD;AAEA,wBACE;AACE,MAAA,OAAO,EAAEE,OADX;AAEE,uBAAeE,QAFjB;AAGE,mBAAU,eAHZ;AAIE,MAAA,KAAK,eACCA,QAAQ,IAAI;AACdG,QAAAA,SAAS,EAAG,cAAa,gEAA6BV,gBAA7B,CAA+C;AAD1D,OADb,CAJP;AASE,MAAA,SAAS,EAAEO,QAAQ,GAAGI,eAAMJ,QAAT,GAAoBI,eAAMR,MAT/C;AAUE,MAAA,GAAG,EAAEC;AAVP,oBAYE;AACE,mBAAU,kBADZ;AAEE,MAAA,KAAK,EAAE;AACLQ,QAAAA,eAAe,EAAEL,QAAQ,GAAGP,gBAAH,GAAsB;AAD1C,OAFT;AAKE,MAAA,SAAS,EAAEW,eAAME;AALnB,MAZF,eAmBE;AAAK,mBAAU,eAAf;AAA+B,MAAA,SAAS,EAAEF,eAAMG;AAAhD,oBACE;AACE,MAAA,SAAS,EAAEH,eAAMI,YADnB;AAEE,mBAAU,aAFZ;AAGE,oBAAYN,SAAS,IAAIH,KAH3B;AAIE,MAAA,KAAK,EAAE;AACLU,QAAAA,eAAe,EAAG,OAAMR,KAAM;AADzB;AAJT,MADF,eASE;AAAK,mBAAU,YAAf;AAA4B,MAAA,SAAS,EAAEG,eAAMM;AAA7C,oBACE;AACE,MAAA,KAAK,EAAEX,KADT;AAEE,MAAA,SAAS,EAAE,yBAAWK,eAAML,KAAjB,EAAwBK,eAAMO,SAA9B,CAFb,CAGE;AAHF;AAIE,MAAA,uBAAuB,EAAE;AAACC,QAAAA,MAAM,EAAEb;AAAT;AAJ3B,MADF,CATF,CAnBF,CADF;AAwCD,GA3CoB,CAArB;AA6CA,sBACE;AAAK,iBAAU,qBAAf;AAAqC,IAAA,SAAS,EAAEK,eAAMS;AAAtD,KACGnB,YADH,CADF;AAKD,CAvDD;;AAyDAN,QAAQ,CAAC0B,YAAT,GAAwB;AACtBtB,EAAAA,IAAI,EAAEuB,kBAASC,iBAAT,CAA2BxB;AADX,CAAxB;AAIAJ,QAAQ,CAAC6B,SAAT,2CAAqB;AACnB1B,EAAAA,OAAO,EAAE2B,mBAAUC,OAAV,CACPD,mBAAUE,KAAV,CAAgB;AACdrB,IAAAA,KAAK,EAAEmB,mBAAUG,MADH;AAEdrB,IAAAA,QAAQ,EAAEkB,mBAAUI,IAFN;AAGdxB,IAAAA,OAAO,EAAEoB,mBAAUK,IAHL;AAIdtB,IAAAA,KAAK,EAAEiB,mBAAUG,MAJH;AAKdnB,IAAAA,SAAS,EAAEgB,mBAAUG;AALP,GAAhB,CADO;AADU,CAArB;eAYejC,Q","sourcesContent":["import React from 'react';\nimport PropTypes from 'prop-types';\nimport {getOr} from 'lodash/fp';\nimport classnames from 'classnames';\nimport Provider from '../../../atom/provider';\nimport {getShadowBoxColorFromPrimary} from '../../../util/get-shadow-box-color-from-primary';\nimport style from './style.css';\n\nconst QCMImage = (props, context) => {\n  const {answers} = props;\n  const {skin} = context;\n  const primarySkinColor = getOr('#00B0FF', 'common.primary', skin);\n\n  const answersViews = answers.map((answer, key) => {\n    const {onClick, title, selected, image, ariaLabel} = answer;\n\n    return (\n      <div\n        onClick={onClick}\n        data-selected={selected}\n        data-name=\"answerGraphic\"\n        style={{\n          ...(selected && {\n            boxShadow: `0 4px 16px ${getShadowBoxColorFromPrimary(primarySkinColor)}`\n          })\n        }}\n        className={selected ? style.selected : style.answer}\n        key={key}\n      >\n        <div\n          data-name=\"answerBackground\"\n          style={{\n            backgroundColor: selected ? primarySkinColor : '#F4F4F5'\n          }}\n          className={style.background}\n        />\n        <div data-name=\"answerContent\" className={style.content}>\n          <div\n            className={style.imageWrapper}\n            data-name=\"answerImage\"\n            aria-label={ariaLabel || title}\n            style={{\n              backgroundImage: `url(${image})`\n            }}\n          />\n          <div data-name=\"answerText\" className={style.titleWrapper}>\n            <div\n              title={title}\n              className={classnames(style.title, style.innerHTML)}\n              // eslint-disable-next-line react/no-danger\n              dangerouslySetInnerHTML={{__html: title}}\n            />\n          </div>\n        </div>\n      </div>\n    );\n  });\n\n  return (\n    <div data-name=\"qcm-graphic-wrapper\" className={style.wrapper}>\n      {answersViews}\n    </div>\n  );\n};\n\nQCMImage.contextTypes = {\n  skin: Provider.childContextTypes.skin\n};\n\nQCMImage.propTypes = {\n  answers: PropTypes.arrayOf(\n    PropTypes.shape({\n      title: PropTypes.string,\n      selected: PropTypes.bool,\n      onClick: PropTypes.func,\n      image: PropTypes.string,\n      ariaLabel: PropTypes.string\n    })\n  )\n};\n\nexport default QCMImage;\n"],"file":"index.js"}

package/lib/molecule/questions/qcm-graphic/style.css

@@ -133,7 +133,7 @@
     display: flex;
     align-items: center;
   }
-  
+
   .answer:last-child {
     margin-bottom: 0;
   }
@@ -161,3 +161,7 @@
     text-align: left;
   }
 }
+
+.innerHTML {
+  composes: innerHTML from '../../../atom/label/style.css'
+}

package/lib/molecule/questions/question-range/index.js

@@ -15,9 +15,7 @@ var _provider = _interopRequireDefault(require("../../../atom/provider"));
 
 var _range = _interopRequireDefault(require("../../../atom/range"));
 
-var _style = require("../../../atom/label/style.css");
-
-var _style2 = _interopRequireDefault(require("./style.css"));
+var _style = _interopRequireDefault(require("./style.css"));
 
 function _interopRequireDefault(obj) { return obj && obj.__esModule ? obj : { default: obj }; }
 
@@ -41,24 +39,24 @@ const QuestionRange = (props, context) => {
     color: defaultColor
   };
   return /*#__PURE__*/_react.default.createElement("div", {
-    className: _style2.default.wrapper
+    className: _style.default.wrapper
   }, /*#__PURE__*/_react.default.createElement("span", {
     style: titleStyle,
-    className: (0, _classnames.default)(_style2.default.title, _style.innerHTML) // eslint-disable-next-line react/no-danger
+    className: (0, _classnames.default)(_style.default.title, _style.default.innerHTML) // eslint-disable-next-line react/no-danger
     ,
     dangerouslySetInnerHTML: {
       __html: title
     }
   }), /*#__PURE__*/_react.default.createElement(_range.default, rangeProps), /*#__PURE__*/_react.default.createElement("div", {
-    className: _style2.default.labelWrapper
+    className: _style.default.labelWrapper
   }, /*#__PURE__*/_react.default.createElement("span", {
-    className: (0, _classnames.default)(_style2.default.label, _style.innerHTML) // eslint-disable-next-line react/no-danger
+    className: (0, _classnames.default)(_style.default.label, _style.default.innerHTML) // eslint-disable-next-line react/no-danger
     ,
     dangerouslySetInnerHTML: {
       __html: minLabel
     }
   }), /*#__PURE__*/_react.default.createElement("span", {
-    className: (0, _classnames.default)(_style2.default.label, _style.innerHTML) // eslint-disable-next-line react/no-danger
+    className: (0, _classnames.default)(_style.default.label, _style.default.innerHTML) // eslint-disable-next-line react/no-danger
     ,
     dangerouslySetInnerHTML: {
       __html: maxLabel

package/lib/molecule/questions/question-range/index.js.map

@@ -1 +1 @@
-{"version":3,"sources":["../../../../src/molecule/questions/question-range/index.js"],"names":["QuestionRange","props","context","title","minLabel","maxLabel","rangeProps","skin","defaultColor","titleStyle","color","style","wrapper","innerHTML","__html","labelWrapper","label","contextTypes","Provider","childContextTypes","propTypes","Range","PropTypes","string"],"mappings":";;;;;;;AAAA;;AAEA;;AACA;;AACA;;AACA;;AACA;;AACA;;;;;;;;AAEA,MAAMA,aAAa,GAAG,CAACC,KAAD,EAAQC,OAAR,KAAoB;AACxC,QAAM;AAACC,IAAAA,KAAD;AAAQC,IAAAA,QAAR;AAAkBC,IAAAA;AAAlB,MAA6CJ,KAAnD;AAAA,QAAqCK,UAArC,iCAAmDL,KAAnD;;AAEA,QAAM;AAACM,IAAAA;AAAD,MAASL,OAAf;AACA,QAAMM,YAAY,GAAG,qBAAM,SAAN,EAAiB,gBAAjB,EAAmCD,IAAnC,CAArB;AAEA,QAAME,UAAU,GAAG;AACjBC,IAAAA,KAAK,EAAEF;AADU,GAAnB;AAIA,sBACE;AAAK,IAAA,SAAS,EAAEG,gBAAMC;AAAtB,kBACE;AACE,IAAA,KAAK,EAAEH,UADT;AAEE,IAAA,SAAS,EAAE,yBAAWE,gBAAMR,KAAjB,EAAwBU,gBAAxB,CAFb,CAGE;AAHF;AAIE,IAAA,uBAAuB,EAAE;AAACC,MAAAA,MAAM,EAAEX;AAAT;AAJ3B,IADF,eAOE,6BAAC,cAAD,EAAWG,UAAX,CAPF,eAQE;AAAK,IAAA,SAAS,EAAEK,gBAAMI;AAAtB,kBACE;AACE,IAAA,SAAS,EAAE,yBAAWJ,gBAAMK,KAAjB,EAAwBH,gBAAxB,CADb,CAEE;AAFF;AAGE,IAAA,uBAAuB,EAAE;AAACC,MAAAA,MAAM,EAAEV;AAAT;AAH3B,IADF,eAME;AACE,IAAA,SAAS,EAAE,yBAAWO,gBAAMK,KAAjB,EAAwBH,gBAAxB,CADb,CAEE;AAFF;AAGE,IAAA,uBAAuB,EAAE;AAACC,MAAAA,MAAM,EAAET;AAAT;AAH3B,IANF,CARF,CADF;AAuBD,CAjCD;;AAmCAL,aAAa,CAACiB,YAAd,GAA6B;AAC3BV,EAAAA,IAAI,EAAEW,kBAASC,iBAAT,CAA2BZ;AADN,CAA7B;AAIAP,aAAa,CAACoB,SAAd,iEACKC,eAAMD,SADX;AAEEjB,EAAAA,KAAK,EAAEmB,mBAAUC,MAFnB;AAGEnB,EAAAA,QAAQ,EAAEkB,mBAAUC,MAHtB;AAIElB,EAAAA,QAAQ,EAAEiB,mBAAUC;AAJtB;eAOevB,a","sourcesContent":["import React from 'react';\nimport {getOr} from 'lodash/fp';\nimport PropTypes from 'prop-types';\nimport classnames from 'classnames';\nimport Provider from '../../../atom/provider';\nimport Range from '../../../atom/range';\nimport {innerHTML} from '../../../atom/label/style.css';\nimport style from './style.css';\n\nconst QuestionRange = (props, context) => {\n  const {title, minLabel, maxLabel, ...rangeProps} = props;\n\n  const {skin} = context;\n  const defaultColor = getOr('#00B0FF', 'common.primary', skin);\n\n  const titleStyle = {\n    color: defaultColor\n  };\n\n  return (\n    <div className={style.wrapper}>\n      <span\n        style={titleStyle}\n        className={classnames(style.title, innerHTML)}\n        // eslint-disable-next-line react/no-danger\n        dangerouslySetInnerHTML={{__html: title}}\n      />\n      <Range {...rangeProps} />\n      <div className={style.labelWrapper}>\n        <span\n          className={classnames(style.label, innerHTML)}\n          // eslint-disable-next-line react/no-danger\n          dangerouslySetInnerHTML={{__html: minLabel}}\n        />\n        <span\n          className={classnames(style.label, innerHTML)}\n          // eslint-disable-next-line react/no-danger\n          dangerouslySetInnerHTML={{__html: maxLabel}}\n        />\n      </div>\n    </div>\n  );\n};\n\nQuestionRange.contextTypes = {\n  skin: Provider.childContextTypes.skin\n};\n\nQuestionRange.propTypes = {\n  ...Range.propTypes,\n  title: PropTypes.string,\n  minLabel: PropTypes.string,\n  maxLabel: PropTypes.string\n};\n\nexport default QuestionRange;\n"],"file":"index.js"}
+{"version":3,"sources":["../../../../src/molecule/questions/question-range/index.js"],"names":["QuestionRange","props","context","title","minLabel","maxLabel","rangeProps","skin","defaultColor","titleStyle","color","style","wrapper","innerHTML","__html","labelWrapper","label","contextTypes","Provider","childContextTypes","propTypes","Range","PropTypes","string"],"mappings":";;;;;;;AAAA;;AAEA;;AACA;;AACA;;AACA;;AACA;;;;;;;;AAEA,MAAMA,aAAa,GAAG,CAACC,KAAD,EAAQC,OAAR,KAAoB;AACxC,QAAM;AAACC,IAAAA,KAAD;AAAQC,IAAAA,QAAR;AAAkBC,IAAAA;AAAlB,MAA6CJ,KAAnD;AAAA,QAAqCK,UAArC,iCAAmDL,KAAnD;;AAEA,QAAM;AAACM,IAAAA;AAAD,MAASL,OAAf;AACA,QAAMM,YAAY,GAAG,qBAAM,SAAN,EAAiB,gBAAjB,EAAmCD,IAAnC,CAArB;AAEA,QAAME,UAAU,GAAG;AACjBC,IAAAA,KAAK,EAAEF;AADU,GAAnB;AAIA,sBACE;AAAK,IAAA,SAAS,EAAEG,eAAMC;AAAtB,kBACE;AACE,IAAA,KAAK,EAAEH,UADT;AAEE,IAAA,SAAS,EAAE,yBAAWE,eAAMR,KAAjB,EAAwBQ,eAAME,SAA9B,CAFb,CAGE;AAHF;AAIE,IAAA,uBAAuB,EAAE;AAACC,MAAAA,MAAM,EAAEX;AAAT;AAJ3B,IADF,eAOE,6BAAC,cAAD,EAAWG,UAAX,CAPF,eAQE;AAAK,IAAA,SAAS,EAAEK,eAAMI;AAAtB,kBACE;AACE,IAAA,SAAS,EAAE,yBAAWJ,eAAMK,KAAjB,EAAwBL,eAAME,SAA9B,CADb,CAEE;AAFF;AAGE,IAAA,uBAAuB,EAAE;AAACC,MAAAA,MAAM,EAAEV;AAAT;AAH3B,IADF,eAME;AACE,IAAA,SAAS,EAAE,yBAAWO,eAAMK,KAAjB,EAAwBL,eAAME,SAA9B,CADb,CAEE;AAFF;AAGE,IAAA,uBAAuB,EAAE;AAACC,MAAAA,MAAM,EAAET;AAAT;AAH3B,IANF,CARF,CADF;AAuBD,CAjCD;;AAmCAL,aAAa,CAACiB,YAAd,GAA6B;AAC3BV,EAAAA,IAAI,EAAEW,kBAASC,iBAAT,CAA2BZ;AADN,CAA7B;AAIAP,aAAa,CAACoB,SAAd,iEACKC,eAAMD,SADX;AAEEjB,EAAAA,KAAK,EAAEmB,mBAAUC,MAFnB;AAGEnB,EAAAA,QAAQ,EAAEkB,mBAAUC,MAHtB;AAIElB,EAAAA,QAAQ,EAAEiB,mBAAUC;AAJtB;eAOevB,a","sourcesContent":["import React from 'react';\nimport {getOr} from 'lodash/fp';\nimport PropTypes from 'prop-types';\nimport classnames from 'classnames';\nimport Provider from '../../../atom/provider';\nimport Range from '../../../atom/range';\nimport style from './style.css';\n\nconst QuestionRange = (props, context) => {\n  const {title, minLabel, maxLabel, ...rangeProps} = props;\n\n  const {skin} = context;\n  const defaultColor = getOr('#00B0FF', 'common.primary', skin);\n\n  const titleStyle = {\n    color: defaultColor\n  };\n\n  return (\n    <div className={style.wrapper}>\n      <span\n        style={titleStyle}\n        className={classnames(style.title, style.innerHTML)}\n        // eslint-disable-next-line react/no-danger\n        dangerouslySetInnerHTML={{__html: title}}\n      />\n      <Range {...rangeProps} />\n      <div className={style.labelWrapper}>\n        <span\n          className={classnames(style.label, style.innerHTML)}\n          // eslint-disable-next-line react/no-danger\n          dangerouslySetInnerHTML={{__html: minLabel}}\n        />\n        <span\n          className={classnames(style.label, style.innerHTML)}\n          // eslint-disable-next-line react/no-danger\n          dangerouslySetInnerHTML={{__html: maxLabel}}\n        />\n      </div>\n    </div>\n  );\n};\n\nQuestionRange.contextTypes = {\n  skin: Provider.childContextTypes.skin\n};\n\nQuestionRange.propTypes = {\n  ...Range.propTypes,\n  title: PropTypes.string,\n  minLabel: PropTypes.string,\n  maxLabel: PropTypes.string\n};\n\nexport default QuestionRange;\n"],"file":"index.js"}

package/lib/molecule/questions/question-range/style.css

@@ -41,3 +41,7 @@
     width: 90%;
   }
 }
+
+.innerHTML {
+  composes: innerHTML from '../../../atom/label/style.css'
+}

package/lib/molecule/review-card-congrats/index.js

@@ -65,7 +65,7 @@ const ReviewCardCongrats = props => {
     }
 
     return () => timer && clearTimeout(timer);
-  }, [timerAnimation]);
+  }, [timerAnimation, isAnimated, isAnimationVisible]);
   const wrapperClassName = (0, _classnames.default)(className, _style.default.cardContainer, cardType === 'card-star' ? _style.default.cardStar : _style.default.cardRank);
   return /*#__PURE__*/_react.default.createElement("div", {
     className: wrapperClassName,

package/lib/molecule/review-card-congrats/index.js.map

@@ -1 +1 @@
-{"version":3,"sources":["../../../src/molecule/review-card-congrats/index.js"],"names":["setAnimations","setIsAnimationVisible","setIsAnimated","ReviewCardCongrats","props","ariaLabel","dataName","animationLottie","cardType","iconAriaLabel","className","reviewCardTitle","reviewCardValue","rankSuffix","timerAnimation","isAnimationVisible","isAnimated","timer","setTimeout","clearTimeout","wrapperClassName","style","cardContainer","cardStar","cardRank","mainIcon","wrapperLottie","ie11Backup","title","textContainerStar","textContainerRank","iconRank","textStar","textRank","EASE_OUT_CUBIC","progress","iconStar","propTypes","PropTypes","string","shape","AtomLottieWrapper","number"],"mappings":"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","sourcesContent":["import React, {useEffect, useState} from 'react';\nimport PropTypes from 'prop-types';\nimport classnames from 'classnames';\nimport {pipe, round, parseInt as _parseInt, multiply} from 'lodash/fp';\nimport {\n  NovaCompositionCoorpacademyStar as StarIcon,\n  NovaSolidVoteRewardsRewardsBadge5 as RankIcon\n} from '@coorpacademy/nova-icons';\nimport AtomLottieWrapper from '../../atom/lottie-wrapper';\nimport Animation, {EASE_OUT_CUBIC} from '../../hoc/animation';\nimport AnimationScheduler from '../../hoc/animation-scheduler';\nimport style from './style.css';\n\nexport const setAnimations = (setIsAnimationVisible, setIsAnimated) => () => {\n  setIsAnimationVisible('play');\n  setIsAnimated(true);\n};\n\nconst ReviewCardCongrats = props => {\n  const {\n    'aria-label': ariaLabel,\n    'data-name': dataName,\n    animationLottie,\n    cardType,\n    iconAriaLabel,\n    className,\n    reviewCardTitle,\n    reviewCardValue,\n    rankSuffix,\n    timerAnimation\n  } = props;\n\n  const [isAnimationVisible, setIsAnimationVisible] = useState('loading');\n  const [isAnimated, setIsAnimated] = useState(false);\n\n  useEffect(() => {\n    let timer;\n    // istanbul ignore else\n    if (!isAnimationVisible || !isAnimated) {\n      timer = setTimeout(setAnimations(setIsAnimationVisible, setIsAnimated), timerAnimation);\n    }\n    return () => timer && clearTimeout(timer);\n  }, [timerAnimation]);\n\n  const wrapperClassName = classnames(\n    className,\n    style.cardContainer,\n    cardType === 'card-star' ? style.cardStar : style.cardRank\n  );\n\n  return (\n    <div className={wrapperClassName} aria-label={ariaLabel} data-name={dataName}>\n      <div className={style.mainIcon}>\n        <AtomLottieWrapper\n          {...animationLottie}\n          loop={false}\n          animationControl={isAnimationVisible}\n          autoplay={false}\n          data-name=\"lottie-wrapper\"\n          className={style.wrapperLottie}\n          backupImageClassName={style.ie11Backup}\n        />\n      </div>\n      <div className={style.title}>{reviewCardTitle}</div>\n      <div className={cardType === 'card-star' ? style.textContainerStar : style.textContainerRank}>\n        {cardType === 'card-rank' ? (\n          <RankIcon className={style.iconRank} width={40} height={40} aria-label={iconAriaLabel} />\n        ) : null}\n        <AnimationScheduler animated={isAnimated}>\n          <div>\n            <span className={cardType === 'card-star' ? style.textStar : style.textRank}>\n              <Animation name=\"counter\" bezier={EASE_OUT_CUBIC} duration={2000}>\n                {progress => pipe(_parseInt(10), multiply(progress), round)(reviewCardValue)}\n              </Animation>\n            </span>\n          </div>\n        </AnimationScheduler>\n        {cardType === 'card-star' ? (\n          <StarIcon className={style.iconStar} width={53} height={53} aria-label={iconAriaLabel} />\n        ) : (\n          <div className={style.rankSuffix}>{rankSuffix}</div>\n        )}\n      </div>\n    </div>\n  );\n};\n\nReviewCardCongrats.propTypes = {\n  'aria-label': PropTypes.string,\n  'data-name': PropTypes.string,\n  animationLottie: PropTypes.shape(AtomLottieWrapper.propTypes),\n  cardType: PropTypes.string,\n  iconAriaLabel: PropTypes.string,\n  className: PropTypes.string,\n  reviewCardTitle: PropTypes.string,\n  reviewCardValue: PropTypes.string,\n  rankSuffix: PropTypes.string,\n  timerAnimation: PropTypes.number\n};\n\nexport default ReviewCardCongrats;\n"],"file":"index.js"}
+{"version":3,"sources":["../../../src/molecule/review-card-congrats/index.js"],"names":["setAnimations","setIsAnimationVisible","setIsAnimated","ReviewCardCongrats","props","ariaLabel","dataName","animationLottie","cardType","iconAriaLabel","className","reviewCardTitle","reviewCardValue","rankSuffix","timerAnimation","isAnimationVisible","isAnimated","timer","setTimeout","clearTimeout","wrapperClassName","style","cardContainer","cardStar","cardRank","mainIcon","wrapperLottie","ie11Backup","title","textContainerStar","textContainerRank","iconRank","textStar","textRank","EASE_OUT_CUBIC","progress","iconStar","propTypes","PropTypes","string","shape","AtomLottieWrapper","number"],"mappings":"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","sourcesContent":["import React, {useEffect, useState} from 'react';\nimport PropTypes from 'prop-types';\nimport classnames from 'classnames';\nimport {pipe, round, parseInt as _parseInt, multiply} from 'lodash/fp';\nimport {\n  NovaCompositionCoorpacademyStar as StarIcon,\n  NovaSolidVoteRewardsRewardsBadge5 as RankIcon\n} from '@coorpacademy/nova-icons';\nimport AtomLottieWrapper from '../../atom/lottie-wrapper';\nimport Animation, {EASE_OUT_CUBIC} from '../../hoc/animation';\nimport AnimationScheduler from '../../hoc/animation-scheduler';\nimport style from './style.css';\n\nexport const setAnimations = (setIsAnimationVisible, setIsAnimated) => () => {\n  setIsAnimationVisible('play');\n  setIsAnimated(true);\n};\n\nconst ReviewCardCongrats = props => {\n  const {\n    'aria-label': ariaLabel,\n    'data-name': dataName,\n    animationLottie,\n    cardType,\n    iconAriaLabel,\n    className,\n    reviewCardTitle,\n    reviewCardValue,\n    rankSuffix,\n    timerAnimation\n  } = props;\n\n  const [isAnimationVisible, setIsAnimationVisible] = useState('loading');\n  const [isAnimated, setIsAnimated] = useState(false);\n\n  useEffect(() => {\n    let timer;\n    // istanbul ignore else\n    if (!isAnimationVisible || !isAnimated) {\n      timer = setTimeout(setAnimations(setIsAnimationVisible, setIsAnimated), timerAnimation);\n    }\n    return () => timer && clearTimeout(timer);\n  }, [timerAnimation, isAnimated, isAnimationVisible]);\n\n  const wrapperClassName = classnames(\n    className,\n    style.cardContainer,\n    cardType === 'card-star' ? style.cardStar : style.cardRank\n  );\n\n  return (\n    <div className={wrapperClassName} aria-label={ariaLabel} data-name={dataName}>\n      <div className={style.mainIcon}>\n        <AtomLottieWrapper\n          {...animationLottie}\n          loop={false}\n          animationControl={isAnimationVisible}\n          autoplay={false}\n          data-name=\"lottie-wrapper\"\n          className={style.wrapperLottie}\n          backupImageClassName={style.ie11Backup}\n        />\n      </div>\n      <div className={style.title}>{reviewCardTitle}</div>\n      <div className={cardType === 'card-star' ? style.textContainerStar : style.textContainerRank}>\n        {cardType === 'card-rank' ? (\n          <RankIcon className={style.iconRank} width={40} height={40} aria-label={iconAriaLabel} />\n        ) : null}\n        <AnimationScheduler animated={isAnimated}>\n          <div>\n            <span className={cardType === 'card-star' ? style.textStar : style.textRank}>\n              <Animation name=\"counter\" bezier={EASE_OUT_CUBIC} duration={2000}>\n                {progress => pipe(_parseInt(10), multiply(progress), round)(reviewCardValue)}\n              </Animation>\n            </span>\n          </div>\n        </AnimationScheduler>\n        {cardType === 'card-star' ? (\n          <StarIcon className={style.iconStar} width={53} height={53} aria-label={iconAriaLabel} />\n        ) : (\n          <div className={style.rankSuffix}>{rankSuffix}</div>\n        )}\n      </div>\n    </div>\n  );\n};\n\nReviewCardCongrats.propTypes = {\n  'aria-label': PropTypes.string,\n  'data-name': PropTypes.string,\n  animationLottie: PropTypes.shape(AtomLottieWrapper.propTypes),\n  cardType: PropTypes.string,\n  iconAriaLabel: PropTypes.string,\n  className: PropTypes.string,\n  reviewCardTitle: PropTypes.string,\n  reviewCardValue: PropTypes.string,\n  rankSuffix: PropTypes.string,\n  timerAnimation: PropTypes.number\n};\n\nexport default ReviewCardCongrats;\n"],"file":"index.js"}

package/lib/molecule/review-header-steps/index.js

@@ -21,9 +21,13 @@ const ReviewHeaderSteps = props => {
   const {
     steps
   } = props;
-  const items = (0, _map.default)(step => /*#__PURE__*/_react.default.createElement(_reviewHeaderStepItem.default, _extends({}, step, {
-    key: step.value
+
+  const items = _map.default.convert({
+    cap: false
+  })((step, index) => /*#__PURE__*/_react.default.createElement(_reviewHeaderStepItem.default, _extends({}, step, {
+    key: index
   })), steps);
+
   return /*#__PURE__*/_react.default.createElement("div", {
     className: _style.default.wrapper,
     "data-name": "header-steps"

package/lib/molecule/review-header-steps/index.js.map

@@ -1 +1 @@
-{"version":3,"sources":["../../../src/molecule/review-header-steps/index.js"],"names":["ReviewHeaderSteps","props","steps","items","step","value","style","wrapper","propTypes","PropTypes","arrayOf","shape","ReviewHeaderStepItem"],"mappings":";;;;;AAAA;;AACA;;AACA;;AACA;;AACA;;;;;;AAEA,MAAMA,iBAAiB,GAAGC,KAAK,IAAI;AACjC,QAAM;AAACC,IAAAA;AAAD,MAAUD,KAAhB;AAEA,QAAME,KAAK,GAAG,kBAAIC,IAAI,iBAAI,6BAAC,6BAAD,eAA0BA,IAA1B;AAAgC,IAAA,GAAG,EAAEA,IAAI,CAACC;AAA1C,KAAZ,EAAiEH,KAAjE,CAAd;AAEA,sBACE;AAAK,IAAA,SAAS,EAAEI,eAAMC,OAAtB;AAA+B,iBAAU;AAAzC,KACGJ,KADH,CADF;AAKD,CAVD;;AAYAH,iBAAiB,CAACQ,SAAlB,2CAA8B;AAC5BN,EAAAA,KAAK,EAAEO,mBAAUC,OAAV,CAAkBD,mBAAUE,KAAV,CAAgBC,8BAAqBX,KAArC,CAAlB;AADqB,CAA9B;eAIeD,iB","sourcesContent":["import React from 'react';\nimport PropTypes from 'prop-types';\nimport map from 'lodash/fp/map';\nimport ReviewHeaderStepItem from '../../atom/review-header-step-item';\nimport style from './style.css';\n\nconst ReviewHeaderSteps = props => {\n  const {steps} = props;\n\n  const items = map(step => <ReviewHeaderStepItem {...step} key={step.value} />, steps);\n\n  return (\n    <div className={style.wrapper} data-name=\"header-steps\">\n      {items}\n    </div>\n  );\n};\n\nReviewHeaderSteps.propTypes = {\n  steps: PropTypes.arrayOf(PropTypes.shape(ReviewHeaderStepItem.props))\n};\n\nexport default ReviewHeaderSteps;\n"],"file":"index.js"}
+{"version":3,"sources":["../../../src/molecule/review-header-steps/index.js"],"names":["ReviewHeaderSteps","props","steps","items","map","convert","cap","step","index","style","wrapper","propTypes","PropTypes","arrayOf","shape","ReviewHeaderStepItem"],"mappings":";;;;;AAAA;;AACA;;AACA;;AACA;;AACA;;;;;;AAEA,MAAMA,iBAAiB,GAAGC,KAAK,IAAI;AACjC,QAAM;AAACC,IAAAA;AAAD,MAAUD,KAAhB;;AAEA,QAAME,KAAK,GAAGC,aAAIC,OAAJ,CAAY;AAACC,IAAAA,GAAG,EAAE;AAAN,GAAZ,EACZ,CAACC,IAAD,EAAOC,KAAP,kBAAiB,6BAAC,6BAAD,eAA0BD,IAA1B;AAAgC,IAAA,GAAG,EAAEC;AAArC,KADL,EAEZN,KAFY,CAAd;;AAKA,sBACE;AAAK,IAAA,SAAS,EAAEO,eAAMC,OAAtB;AAA+B,iBAAU;AAAzC,KACGP,KADH,CADF;AAKD,CAbD;;AAeAH,iBAAiB,CAACW,SAAlB,2CAA8B;AAC5BT,EAAAA,KAAK,EAAEU,mBAAUC,OAAV,CAAkBD,mBAAUE,KAAV,CAAgBC,8BAAqBd,KAArC,CAAlB;AADqB,CAA9B;eAIeD,iB","sourcesContent":["import React from 'react';\nimport PropTypes from 'prop-types';\nimport map from 'lodash/fp/map';\nimport ReviewHeaderStepItem from '../../atom/review-header-step-item';\nimport style from './style.css';\n\nconst ReviewHeaderSteps = props => {\n  const {steps} = props;\n\n  const items = map.convert({cap: false})(\n    (step, index) => <ReviewHeaderStepItem {...step} key={index} />,\n    steps\n  );\n\n  return (\n    <div className={style.wrapper} data-name=\"header-steps\">\n      {items}\n    </div>\n  );\n};\n\nReviewHeaderSteps.propTypes = {\n  steps: PropTypes.arrayOf(PropTypes.shape(ReviewHeaderStepItem.props))\n};\n\nexport default ReviewHeaderSteps;\n"],"file":"index.js"}

package/lib/molecule/scope-content/index.js

@@ -19,9 +19,7 @@ var _discussion = _interopRequireDefault(require("../../organism/discussion"));
 
 var _resourceBrowser = _interopRequireDefault(require("../../organism/resource-browser"));
 
-var _style = require("../../atom/label/style.css");
-
-var _style2 = _interopRequireDefault(require("./style.css"));
+var _style = _interopRequireDefault(require("./style.css"));
 
 function _interopRequireDefault(obj) { return obj && obj.__esModule ? obj : { default: obj }; }
 
@@ -73,7 +71,7 @@ const ScopeContent = (props, context) => {
   const ctaView = onClick ? /*#__PURE__*/_react.default.createElement(_button.default, {
     "data-name": "cta",
     type: "link",
-    className: _style2.default.cta,
+    className: _style.default.cta,
     onClick: onClick,
     submitValue: buttonLabel,
     style: {
@@ -84,43 +82,43 @@ const ScopeContent = (props, context) => {
     "data-name": "scopeContent"
   }, /*#__PURE__*/_react.default.createElement("div", {
     "data-name": "description",
-    className: _style2.default.desc
+    className: _style.default.desc
   }, /*#__PURE__*/_react.default.createElement("div", {
-    className: _style2.default.infos
+    className: _style.default.infos
   }, /*#__PURE__*/_react.default.createElement("div", {
-    className: _style2.default.title
+    className: _style.default.title
   }, /*#__PURE__*/_react.default.createElement("div", {
-    className: _style.innerHTML // eslint-disable-next-line react/no-danger
+    className: _style.default.innerHTML // eslint-disable-next-line react/no-danger
     ,
     dangerouslySetInnerHTML: {
       __html: title
     }
   }), /*#__PURE__*/_react.default.createElement("div", null, /*#__PURE__*/_react.default.createElement("span", {
     "data-name": "duration",
-    className: _style2.default.time
+    className: _style.default.time
   }, time))), ctaView), /*#__PURE__*/_react.default.createElement("div", {
-    className: _style2.default.skills
+    className: _style.default.skills
   }, /*#__PURE__*/_react.default.createElement("div", {
-    className: _style2.default.coltitle
+    className: _style.default.coltitle
   }, skillsTitle), /*#__PURE__*/_react.default.createElement("ul", {
-    className: _style2.default.dottedlist
+    className: _style.default.dottedlist
   }, skills)), /*#__PURE__*/_react.default.createElement("div", {
-    className: _style2.default.column
+    className: _style.default.column
   }, /*#__PURE__*/_react.default.createElement("div", {
-    className: _style2.default.coltitle
+    className: _style.default.coltitle
   }, chaptersTitle), /*#__PURE__*/_react.default.createElement("div", null, /*#__PURE__*/_react.default.createElement("ul", {
-    className: _style2.default.roundedlist
+    className: _style.default.roundedlist
   }, chapters)))), _resources ? /*#__PURE__*/_react.default.createElement("div", {
     "data-name": "description",
-    className: _style2.default.bordered
+    className: _style.default.bordered
   }, /*#__PURE__*/_react.default.createElement(_resourceBrowser.default, {
     resources: _resources
   })) : null, discussion ? /*#__PURE__*/_react.default.createElement(_discussion.default, _extends({}, discussion, {
-    className: _style2.default.discussion
+    className: _style.default.discussion
   })) : null) : /*#__PURE__*/_react.default.createElement("div", {
     "data-name": "discussion"
   }, discussion ? /*#__PURE__*/_react.default.createElement(_discussion.default, _extends({}, discussion, {
-    className: _style2.default.discussion
+    className: _style.default.discussion
   })) : null);
 };
 

package/lib/molecule/scope-content/index.js.map

@@ -1 +1 @@
-{"version":3,"sources":["../../../src/molecule/scope-content/index.js"],"names":["ScopeContent","props","context","translate","skin","content","lstitle","_chaptersTitle","time","title","_skills","_chapters","_resources","skillsTitle","chaptersTitle","onClick","buttonLabel","discussion","skills","map","skill","index","__html","chapters","chapter","name","ctaView","style","cta","backgroundColor","desc","infos","innerHTML","coltitle","dottedlist","column","roundedlist","bordered","contextTypes","Provider","childContextTypes","propTypes","PropTypes","shape","string","func","arrayOf","object","course_scope","resources","ResourceBrowser","Discussion"],"mappings":";;;;;;;;;AAAA;;AACA;;AAEA;;AACA;;AACA;;AACA;;AACA;;AACA;;;;;;AAEA,MAAMA,YAAY,GAAG,CAACC,KAAD,EAAQC,OAAR,KAAoB;AACvC,QAAM;AAACC,IAAAA,SAAD;AAAYC,IAAAA;AAAZ,MAAoBF,OAA1B;AACA,QAAM;AAACG,IAAAA;AAAD,MAAYJ,KAAlB;AAEA,QAAMK,OAAO,GAAGH,SAAS,CAAC,gDAAD,CAAzB;;AACA,QAAMI,cAAc,GAAGJ,SAAS,CAAC,UAAD,CAAhC;;AAEA,QAAMK,IAAI,GAAG,qBAAM,EAAN,EAAU,MAAV,EAAkBH,OAAlB,CAAb;AACA,QAAMI,KAAK,GAAG,qBAAM,EAAN,EAAU,OAAV,EAAmBJ,OAAnB,CAAd;;AACA,QAAMK,OAAO,GAAG,qBAAM,EAAN,EAAU,QAAV,EAAoBL,OAApB,CAAhB;;AACA,QAAMM,SAAS,GAAG,qBAAM,EAAN,EAAU,UAAV,EAAsBN,OAAtB,CAAlB;;AACA,QAAMO,UAAU,GAAG,qBAAM,EAAN,EAAU,WAAV,EAAuBP,OAAvB,CAAnB;;AAEA,QAAMQ,WAAW,GAAG,qBAAMP,OAAN,EAAe,aAAf,EAA8BD,OAA9B,CAApB;AACA,QAAMS,aAAa,GAAG,qBAAMP,cAAN,EAAsB,eAAtB,EAAuCF,OAAvC,CAAtB;AAEA,QAAMU,OAAO,GAAG,mBAAI,SAAJ,EAAeV,OAAf,CAAhB;AACA,QAAMW,WAAW,GAAG,mBAAI,aAAJ,EAAmBX,OAAnB,CAApB;AACA,QAAMY,UAAU,GAAG,mBAAI,YAAJ,EAAkBZ,OAAlB,CAAnB;;AACA,QAAMa,MAAM,GAAGR,OAAO,CAACS,GAAR,CAAY,CAACC,KAAD,EAAQC,KAAR,kBACzB;AACE,IAAA,GAAG,EAAEA,KADP,CAEE;AAFF;AAGE,IAAA,uBAAuB,EAAE;AAACC,MAAAA,MAAM,EAAEF;AAAT;AAH3B,IADa,CAAf;;AAQA,QAAMG,QAAQ,GAAGZ,SAAS,CAACQ,GAAV,CAAc,CAACK,OAAD,EAAUH,KAAV,kBAC7B;AACE,IAAA,GAAG,EAAEA,KADP,CAEE;AAFF;AAGE,IAAA,uBAAuB,EAAE;AAACC,MAAAA,MAAM,EAAEE,OAAO,CAACC;AAAjB;AAH3B,IADe,CAAjB;;AAQA,QAAMC,OAAO,GAAGX,OAAO,gBACrB,6BAAC,eAAD;AACE,iBAAU,KADZ;AAEE,IAAA,IAAI,EAAC,MAFP;AAGE,IAAA,SAAS,EAAEY,gBAAMC,GAHnB;AAIE,IAAA,OAAO,EAAEb,OAJX;AAKE,IAAA,WAAW,EAAEC,WALf;AAME,IAAA,KAAK,EAAE;AACLa,MAAAA,eAAe,EAAE,mBAAI,gBAAJ,EAAsBzB,IAAtB;AADZ;AANT,IADqB,GAWnB,IAXJ;AAaA,SAAOC,OAAO,IAAII,KAAX,gBACL;AAAK,iBAAU;AAAf,kBACE;AAAK,iBAAU,aAAf;AAA6B,IAAA,SAAS,EAAEkB,gBAAMG;AAA9C,kBACE;AAAK,IAAA,SAAS,EAAEH,gBAAMI;AAAtB,kBACE;AAAK,IAAA,SAAS,EAAEJ,gBAAMlB;AAAtB,kBACE;AACE,IAAA,SAAS,EAAEuB,gBADb,CAEE;AAFF;AAGE,IAAA,uBAAuB,EAAE;AAACV,MAAAA,MAAM,EAAEb;AAAT;AAH3B,IADF,eAME,uDACE;AAAM,iBAAU,UAAhB;AAA2B,IAAA,SAAS,EAAEkB,gBAAMnB;AAA5C,KACGA,IADH,CADF,CANF,CADF,EAaGkB,OAbH,CADF,eAgBE;AAAK,IAAA,SAAS,EAAEC,gBAAMT;AAAtB,kBACE;AAAK,IAAA,SAAS,EAAES,gBAAMM;AAAtB,KAAiCpB,WAAjC,CADF,eAEE;AAAI,IAAA,SAAS,EAAEc,gBAAMO;AAArB,KAAkChB,MAAlC,CAFF,CAhBF,eAoBE;AAAK,IAAA,SAAS,EAAES,gBAAMQ;AAAtB,kBACE;AAAK,IAAA,SAAS,EAAER,gBAAMM;AAAtB,KAAiCnB,aAAjC,CADF,eAEE,uDACE;AAAI,IAAA,SAAS,EAAEa,gBAAMS;AAArB,KAAmCb,QAAnC,CADF,CAFF,CApBF,CADF,EA6BGX,UAAU,gBACT;AAAK,iBAAU,aAAf;AAA6B,IAAA,SAAS,EAAEe,gBAAMU;AAA9C,kBACE,6BAAC,wBAAD;AAAiB,IAAA,SAAS,EAAEzB;AAA5B,IADF,CADS,GAIP,IAjCN,EAkCGK,UAAU,gBAAG,6BAAC,mBAAD,eAAgBA,UAAhB;AAA4B,IAAA,SAAS,EAAEU,gBAAMV;AAA7C,KAAH,GAAiE,IAlC9E,CADK,gBAsCL;AAAK,iBAAU;AAAf,KACGA,UAAU,gBAAG,6BAAC,mBAAD,eAAgBA,UAAhB;AAA4B,IAAA,SAAS,EAAEU,gBAAMV;AAA7C,KAAH,GAAiE,IAD9E,CAtCF;AA0CD,CA1FD;;AA4FAjB,YAAY,CAACsC,YAAb,GAA4B;AAC1BlC,EAAAA,IAAI,EAAEmC,kBAASC,iBAAT,CAA2BpC,IADP;AAE1BD,EAAAA,SAAS,EAAEoC,kBAASC,iBAAT,CAA2BrC;AAFZ,CAA5B;AAKAH,YAAY,CAACyC,SAAb,2CAAyB;AACvBpC,EAAAA,OAAO,EAAEqC,mBAAUC,KAAV,CAAgB;AACvBlC,IAAAA,KAAK,EAAEiC,mBAAUE,MADM;AAEvB/B,IAAAA,WAAW,EAAE6B,mBAAUE,MAFA;AAGvB9B,IAAAA,aAAa,EAAE4B,mBAAUE,MAHF;AAIvBpC,IAAAA,IAAI,EAAEkC,mBAAUE,MAJO;AAKvB7B,IAAAA,OAAO,EAAE2B,mBAAUG,IALI;AAMvB7B,IAAAA,WAAW,EAAE0B,mBAAUE,MANA;AAOvB1B,IAAAA,MAAM,EAAEwB,mBAAUI,OAAV,CAAkBJ,mBAAUE,MAA5B,CAPe;AAQvBrB,IAAAA,QAAQ,EAAEmB,mBAAUI,OAAV,CAAkBJ,mBAAUK,MAA5B,CARa;AASvBC,IAAAA,YAAY,EAAEN,mBAAUI,OAAV,CAAkBJ,mBAAUE,MAA5B,CATS;AAUvBK,IAAAA,SAAS,EAAEC,yBAAgBT,SAAhB,CAA0BQ,SAVd;AAWvBhC,IAAAA,UAAU,EAAEyB,mBAAUC,KAAV,CAAgBQ,oBAAWV,SAA3B;AAXW,GAAhB;AADc,CAAzB;eAgBezC,Y","sourcesContent":["import React from 'react';\nimport PropTypes from 'prop-types';\nimport {get, getOr} from 'lodash/fp';\nimport Button from '../../atom/button';\nimport Provider from '../../atom/provider';\nimport Discussion from '../../organism/discussion';\nimport ResourceBrowser from '../../organism/resource-browser';\nimport {innerHTML} from '../../atom/label/style.css';\nimport style from './style.css';\n\nconst ScopeContent = (props, context) => {\n  const {translate, skin} = context;\n  const {content} = props;\n\n  const lstitle = translate('At the end of this level, you will be able to_');\n  const _chaptersTitle = translate('chapters');\n\n  const time = getOr('', 'time', content);\n  const title = getOr('', 'title', content);\n  const _skills = getOr([], 'skills', content);\n  const _chapters = getOr([], 'chapters', content);\n  const _resources = getOr([], 'resources', content);\n\n  const skillsTitle = getOr(lstitle, 'skillsTitle', content);\n  const chaptersTitle = getOr(_chaptersTitle, 'chaptersTitle', content);\n\n  const onClick = get('onClick', content);\n  const buttonLabel = get('buttonLabel', content);\n  const discussion = get('discussion', content);\n  const skills = _skills.map((skill, index) => (\n    <li\n      key={index}\n      // eslint-disable-next-line react/no-danger\n      dangerouslySetInnerHTML={{__html: skill}}\n    />\n  ));\n\n  const chapters = _chapters.map((chapter, index) => (\n    <li\n      key={index}\n      // eslint-disable-next-line react/no-danger\n      dangerouslySetInnerHTML={{__html: chapter.name}}\n    />\n  ));\n\n  const ctaView = onClick ? (\n    <Button\n      data-name=\"cta\"\n      type=\"link\"\n      className={style.cta}\n      onClick={onClick}\n      submitValue={buttonLabel}\n      style={{\n        backgroundColor: get('common.primary', skin)\n      }}\n    />\n  ) : null;\n\n  return content && title ? (\n    <div data-name=\"scopeContent\">\n      <div data-name=\"description\" className={style.desc}>\n        <div className={style.infos}>\n          <div className={style.title}>\n            <div\n              className={innerHTML}\n              // eslint-disable-next-line react/no-danger\n              dangerouslySetInnerHTML={{__html: title}}\n            />\n            <div>\n              <span data-name=\"duration\" className={style.time}>\n                {time}\n              </span>\n            </div>\n          </div>\n          {ctaView}\n        </div>\n        <div className={style.skills}>\n          <div className={style.coltitle}>{skillsTitle}</div>\n          <ul className={style.dottedlist}>{skills}</ul>\n        </div>\n        <div className={style.column}>\n          <div className={style.coltitle}>{chaptersTitle}</div>\n          <div>\n            <ul className={style.roundedlist}>{chapters}</ul>\n          </div>\n        </div>\n      </div>\n\n      {_resources ? (\n        <div data-name=\"description\" className={style.bordered}>\n          <ResourceBrowser resources={_resources} />\n        </div>\n      ) : null}\n      {discussion ? <Discussion {...discussion} className={style.discussion} /> : null}\n    </div>\n  ) : (\n    <div data-name=\"discussion\">\n      {discussion ? <Discussion {...discussion} className={style.discussion} /> : null}\n    </div>\n  );\n};\n\nScopeContent.contextTypes = {\n  skin: Provider.childContextTypes.skin,\n  translate: Provider.childContextTypes.translate\n};\n\nScopeContent.propTypes = {\n  content: PropTypes.shape({\n    title: PropTypes.string,\n    skillsTitle: PropTypes.string,\n    chaptersTitle: PropTypes.string,\n    time: PropTypes.string,\n    onClick: PropTypes.func,\n    buttonLabel: PropTypes.string,\n    skills: PropTypes.arrayOf(PropTypes.string),\n    chapters: PropTypes.arrayOf(PropTypes.object),\n    course_scope: PropTypes.arrayOf(PropTypes.string),\n    resources: ResourceBrowser.propTypes.resources,\n    discussion: PropTypes.shape(Discussion.propTypes)\n  })\n};\n\nexport default ScopeContent;\n"],"file":"index.js"}
+{"version":3,"sources":["../../../src/molecule/scope-content/index.js"],"names":["ScopeContent","props","context","translate","skin","content","lstitle","_chaptersTitle","time","title","_skills","_chapters","_resources","skillsTitle","chaptersTitle","onClick","buttonLabel","discussion","skills","map","skill","index","__html","chapters","chapter","name","ctaView","style","cta","backgroundColor","desc","infos","innerHTML","coltitle","dottedlist","column","roundedlist","bordered","contextTypes","Provider","childContextTypes","propTypes","PropTypes","shape","string","func","arrayOf","object","course_scope","resources","ResourceBrowser","Discussion"],"mappings":"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","sourcesContent":["import React from 'react';\nimport PropTypes from 'prop-types';\nimport {get, getOr} from 'lodash/fp';\nimport Button from '../../atom/button';\nimport Provider from '../../atom/provider';\nimport Discussion from '../../organism/discussion';\nimport ResourceBrowser from '../../organism/resource-browser';\nimport style from './style.css';\n\nconst ScopeContent = (props, context) => {\n  const {translate, skin} = context;\n  const {content} = props;\n\n  const lstitle = translate('At the end of this level, you will be able to_');\n  const _chaptersTitle = translate('chapters');\n\n  const time = getOr('', 'time', content);\n  const title = getOr('', 'title', content);\n  const _skills = getOr([], 'skills', content);\n  const _chapters = getOr([], 'chapters', content);\n  const _resources = getOr([], 'resources', content);\n\n  const skillsTitle = getOr(lstitle, 'skillsTitle', content);\n  const chaptersTitle = getOr(_chaptersTitle, 'chaptersTitle', content);\n\n  const onClick = get('onClick', content);\n  const buttonLabel = get('buttonLabel', content);\n  const discussion = get('discussion', content);\n  const skills = _skills.map((skill, index) => (\n    <li\n      key={index}\n      // eslint-disable-next-line react/no-danger\n      dangerouslySetInnerHTML={{__html: skill}}\n    />\n  ));\n\n  const chapters = _chapters.map((chapter, index) => (\n    <li\n      key={index}\n      // eslint-disable-next-line react/no-danger\n      dangerouslySetInnerHTML={{__html: chapter.name}}\n    />\n  ));\n\n  const ctaView = onClick ? (\n    <Button\n      data-name=\"cta\"\n      type=\"link\"\n      className={style.cta}\n      onClick={onClick}\n      submitValue={buttonLabel}\n      style={{\n        backgroundColor: get('common.primary', skin)\n      }}\n    />\n  ) : null;\n\n  return content && title ? (\n    <div data-name=\"scopeContent\">\n      <div data-name=\"description\" className={style.desc}>\n        <div className={style.infos}>\n          <div className={style.title}>\n            <div\n              className={style.innerHTML}\n              // eslint-disable-next-line react/no-danger\n              dangerouslySetInnerHTML={{__html: title}}\n            />\n            <div>\n              <span data-name=\"duration\" className={style.time}>\n                {time}\n              </span>\n            </div>\n          </div>\n          {ctaView}\n        </div>\n        <div className={style.skills}>\n          <div className={style.coltitle}>{skillsTitle}</div>\n          <ul className={style.dottedlist}>{skills}</ul>\n        </div>\n        <div className={style.column}>\n          <div className={style.coltitle}>{chaptersTitle}</div>\n          <div>\n            <ul className={style.roundedlist}>{chapters}</ul>\n          </div>\n        </div>\n      </div>\n\n      {_resources ? (\n        <div data-name=\"description\" className={style.bordered}>\n          <ResourceBrowser resources={_resources} />\n        </div>\n      ) : null}\n      {discussion ? <Discussion {...discussion} className={style.discussion} /> : null}\n    </div>\n  ) : (\n    <div data-name=\"discussion\">\n      {discussion ? <Discussion {...discussion} className={style.discussion} /> : null}\n    </div>\n  );\n};\n\nScopeContent.contextTypes = {\n  skin: Provider.childContextTypes.skin,\n  translate: Provider.childContextTypes.translate\n};\n\nScopeContent.propTypes = {\n  content: PropTypes.shape({\n    title: PropTypes.string,\n    skillsTitle: PropTypes.string,\n    chaptersTitle: PropTypes.string,\n    time: PropTypes.string,\n    onClick: PropTypes.func,\n    buttonLabel: PropTypes.string,\n    skills: PropTypes.arrayOf(PropTypes.string),\n    chapters: PropTypes.arrayOf(PropTypes.object),\n    course_scope: PropTypes.arrayOf(PropTypes.string),\n    resources: ResourceBrowser.propTypes.resources,\n    discussion: PropTypes.shape(Discussion.propTypes)\n  })\n};\n\nexport default ScopeContent;\n"],"file":"index.js"}

package/lib/molecule/scope-content/style.css

@@ -174,3 +174,7 @@
   border-right: solid 1px light;
   border-bottom: 1px solid light;
 }
+
+.innerHTML {
+  composes: innerHTML from '../../atom/label/style.css'
+}

package/lib/molecule/share/index.js

@@ -124,7 +124,7 @@ const Share = ({
     }
 
     return;
-  }, [setStatus]);
+  }, [setStatus, text]);
   return /*#__PURE__*/_react.default.createElement("div", {
     className: (_style.default.container, style)
   }, /*#__PURE__*/_react.default.createElement(_link.default, {

package/lib/molecule/share/index.js.map

@@ -1 +1 @@
-{"version":3,"sources":["../../../src/molecule/share/index.js"],"names":["SHARE_STATUS","IDLE","ERROR","SUCCESS","copyTextViaExecCommand","text","textarea","document","createElement","style","border","padding","visibility","position","setAttribute","value","body","appendChild","status","select","setSelectionRange","length","execCommand","error","removeChild","StatusContext","React","createContext","ShareStatusProvider","children","setStatus","timeoutId","DURATION","setTimeout","clearTimeout","ShareFeedback","successWording","errorWording","styles","feedback","errorFeedback","checkIcon","Share","wording","onClick","browserSupportsClipboardWriteText","navigator","clipboard","writeText","copyStatus","container","cta","wrapper","shareIcon","propTypes","PropTypes","node","string"],"mappings":"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","sourcesContent":["import React, {useState, useMemo, useCallback, useContext, useEffect} from 'react';\nimport PropTypes from 'prop-types';\nimport classnames from 'classnames';\nimport {\n  NovaCompositionCoorpacademyCheck as CheckIcon,\n  NovaCompositionCoorpacademyShare as ShareIcon,\n  NovaCompositionCoorpacademyAttention as AttentionIcon\n} from '@coorpacademy/nova-icons';\nimport Link from '../../atom/link';\nimport styles from './style.css';\n\nconst SHARE_STATUS = {\n  IDLE: 'IDLE',\n  ERROR: 'ERROR',\n  SUCCESS: 'SUCCESS'\n};\n\nconst copyTextViaExecCommand = text => {\n  const textarea = document.createElement('textarea');\n\n  textarea.style.border = '0';\n  textarea.style.padding = '0';\n  textarea.style.visibility = 'hidden';\n  textarea.style.position = 'absolute';\n  textarea.setAttribute('readonly', '');\n  textarea.value = text;\n\n  // Element.append is not supported on IE11 :/\n  // eslint-disable-next-line unicorn/prefer-node-append\n  document.body.appendChild(textarea);\n  let status = SHARE_STATUS.IDLE;\n\n  try {\n    textarea.select();\n    textarea.setSelectionRange(0, textarea.value.length);\n    document.execCommand('copy');\n    status = SHARE_STATUS.SUCCESS;\n  } catch (error) {\n    status = SHARE_STATUS.ERROR;\n  }\n\n  // Element.remove is not supported on IE11 :/\n  // eslint-disable-next-line unicorn/prefer-node-remove\n  document.body.removeChild(textarea);\n\n  return status;\n};\n\nconst StatusContext = React.createContext(SHARE_STATUS.IDLE);\n\nexport const ShareStatusProvider = ({children}) => {\n  const [status, setStatus] = useState(SHARE_STATUS.IDLE);\n  useEffect(() => {\n    let timeoutId;\n    const DURATION = 3000;\n    if (status !== SHARE_STATUS.IDLE) {\n      timeoutId = setTimeout(() => setStatus(SHARE_STATUS.IDLE), DURATION);\n    }\n    return () => clearTimeout(timeoutId);\n  }, [status]);\n\n  const value = useMemo(() => [status, setStatus], [status]);\n\n  return <StatusContext.Provider value={value}>{children}</StatusContext.Provider>;\n};\n\nexport const ShareFeedback = ({successWording, errorWording}) => {\n  const [status] = useContext(StatusContext);\n  if (status === SHARE_STATUS.IDLE) return null;\n\n  return (\n    <div\n      className={classnames(styles.feedback, status === SHARE_STATUS.ERROR && styles.errorFeedback)}\n    >\n      {status === SHARE_STATUS.SUCCESS ? (\n        <CheckIcon className={styles.checkIcon} width={13} height={13} />\n      ) : (\n        <AttentionIcon className={styles.checkIcon} width={13} height={13} />\n      )}\n      <p>{status === SHARE_STATUS.SUCCESS ? successWording : errorWording}</p>\n    </div>\n  );\n};\n\nconst Share = ({style, text, wording}) => {\n  const [, setStatus] = useContext(StatusContext);\n  const onClick = useCallback(async () => {\n    const browserSupportsClipboardWriteText =\n      'clipboard' in navigator && 'writeText' in navigator.clipboard;\n    if (browserSupportsClipboardWriteText) {\n      try {\n        await navigator.clipboard.writeText(text);\n        setStatus(SHARE_STATUS.SUCCESS);\n      } catch (error) {\n        setStatus(SHARE_STATUS.ERROR);\n      }\n      return;\n    } else {\n      const copyStatus = copyTextViaExecCommand(text);\n      setStatus(copyStatus);\n    }\n    return;\n  }, [setStatus]);\n\n  return (\n    <div className={(styles.container, style)}>\n      <Link onClick={onClick} className={styles.cta} data-name={'share-button'}>\n        <div className={styles.wrapper}>\n          <ShareIcon className={styles.shareIcon} width={18} height={18} />\n          <p>{wording}</p>\n        </div>\n      </Link>\n    </div>\n  );\n};\n\nShareStatusProvider.propTypes = {\n  children: PropTypes.node\n};\n\nShareFeedback.propTypes = {\n  successWording: PropTypes.string,\n  errorWording: PropTypes.string\n};\n\nShare.propTypes = {\n  style: PropTypes.string,\n  text: PropTypes.string,\n  wording: PropTypes.string\n};\n\nexport default Share;\n"],"file":"index.js"}
+{"version":3,"sources":["../../../src/molecule/share/index.js"],"names":["SHARE_STATUS","IDLE","ERROR","SUCCESS","copyTextViaExecCommand","text","textarea","document","createElement","style","border","padding","visibility","position","setAttribute","value","body","appendChild","status","select","setSelectionRange","length","execCommand","error","removeChild","StatusContext","React","createContext","ShareStatusProvider","children","setStatus","timeoutId","DURATION","setTimeout","clearTimeout","ShareFeedback","successWording","errorWording","styles","feedback","errorFeedback","checkIcon","Share","wording","onClick","browserSupportsClipboardWriteText","navigator","clipboard","writeText","copyStatus","container","cta","wrapper","shareIcon","propTypes","PropTypes","node","string"],"mappings":"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","sourcesContent":["import React, {useState, useMemo, useCallback, useContext, useEffect} from 'react';\nimport PropTypes from 'prop-types';\nimport classnames from 'classnames';\nimport {\n  NovaCompositionCoorpacademyCheck as CheckIcon,\n  NovaCompositionCoorpacademyShare as ShareIcon,\n  NovaCompositionCoorpacademyAttention as AttentionIcon\n} from '@coorpacademy/nova-icons';\nimport Link from '../../atom/link';\nimport styles from './style.css';\n\nconst SHARE_STATUS = {\n  IDLE: 'IDLE',\n  ERROR: 'ERROR',\n  SUCCESS: 'SUCCESS'\n};\n\nconst copyTextViaExecCommand = text => {\n  const textarea = document.createElement('textarea');\n\n  textarea.style.border = '0';\n  textarea.style.padding = '0';\n  textarea.style.visibility = 'hidden';\n  textarea.style.position = 'absolute';\n  textarea.setAttribute('readonly', '');\n  textarea.value = text;\n\n  // Element.append is not supported on IE11 :/\n  // eslint-disable-next-line unicorn/prefer-node-append\n  document.body.appendChild(textarea);\n  let status = SHARE_STATUS.IDLE;\n\n  try {\n    textarea.select();\n    textarea.setSelectionRange(0, textarea.value.length);\n    document.execCommand('copy');\n    status = SHARE_STATUS.SUCCESS;\n  } catch (error) {\n    status = SHARE_STATUS.ERROR;\n  }\n\n  // Element.remove is not supported on IE11 :/\n  // eslint-disable-next-line unicorn/prefer-node-remove\n  document.body.removeChild(textarea);\n\n  return status;\n};\n\nconst StatusContext = React.createContext(SHARE_STATUS.IDLE);\n\nexport const ShareStatusProvider = ({children}) => {\n  const [status, setStatus] = useState(SHARE_STATUS.IDLE);\n  useEffect(() => {\n    let timeoutId;\n    const DURATION = 3000;\n    if (status !== SHARE_STATUS.IDLE) {\n      timeoutId = setTimeout(() => setStatus(SHARE_STATUS.IDLE), DURATION);\n    }\n    return () => clearTimeout(timeoutId);\n  }, [status]);\n\n  const value = useMemo(() => [status, setStatus], [status]);\n\n  return <StatusContext.Provider value={value}>{children}</StatusContext.Provider>;\n};\n\nexport const ShareFeedback = ({successWording, errorWording}) => {\n  const [status] = useContext(StatusContext);\n  if (status === SHARE_STATUS.IDLE) return null;\n\n  return (\n    <div\n      className={classnames(styles.feedback, status === SHARE_STATUS.ERROR && styles.errorFeedback)}\n    >\n      {status === SHARE_STATUS.SUCCESS ? (\n        <CheckIcon className={styles.checkIcon} width={13} height={13} />\n      ) : (\n        <AttentionIcon className={styles.checkIcon} width={13} height={13} />\n      )}\n      <p>{status === SHARE_STATUS.SUCCESS ? successWording : errorWording}</p>\n    </div>\n  );\n};\n\nconst Share = ({style, text, wording}) => {\n  const [, setStatus] = useContext(StatusContext);\n  const onClick = useCallback(async () => {\n    const browserSupportsClipboardWriteText =\n      'clipboard' in navigator && 'writeText' in navigator.clipboard;\n    if (browserSupportsClipboardWriteText) {\n      try {\n        await navigator.clipboard.writeText(text);\n        setStatus(SHARE_STATUS.SUCCESS);\n      } catch (error) {\n        setStatus(SHARE_STATUS.ERROR);\n      }\n      return;\n    } else {\n      const copyStatus = copyTextViaExecCommand(text);\n      setStatus(copyStatus);\n    }\n    return;\n  }, [setStatus, text]);\n\n  return (\n    <div className={(styles.container, style)}>\n      <Link onClick={onClick} className={styles.cta} data-name={'share-button'}>\n        <div className={styles.wrapper}>\n          <ShareIcon className={styles.shareIcon} width={18} height={18} />\n          <p>{wording}</p>\n        </div>\n      </Link>\n    </div>\n  );\n};\n\nShareStatusProvider.propTypes = {\n  children: PropTypes.node\n};\n\nShareFeedback.propTypes = {\n  successWording: PropTypes.string,\n  errorWording: PropTypes.string\n};\n\nShare.propTypes = {\n  style: PropTypes.string,\n  text: PropTypes.string,\n  wording: PropTypes.string\n};\n\nexport default Share;\n"],"file":"index.js"}

package/lib/molecule/skill-card/style.css

@@ -1,3 +1,5 @@
+@value breakpoints: "../../variables/breakpoints.css";
+@value mobile from breakpoints;
 @value colors: "../../variables/colors.css";
 @value cm_grey_400 from colors;
 @value white from colors;
@@ -21,7 +23,7 @@
 }
 
 .skillCardWrapper:hover {
-  box-shadow: 0 4px 48px box_shadow_medium_dark;
+  box-shadow: 0 4px 40px box_shadow_medium_dark;
 }
 
 .skillTitle {
@@ -57,3 +59,9 @@
 .buttonWrapper {
   padding: 0 24px 24px;
 }
+
+@media mobile {
+  .skillCardWrapper:hover {
+    box-shadow: 0 4px 20px box_shadow_medium_dark;
+  }
+}