@coorpacademy/components 10.22.7 → 10.22.10

package/es/organism/review-slide/style.css

@@ -0,0 +1,173 @@
+@value colors: "../../variables/colors.css";
+@value black from colors;
+@value white from colors;
+@value cm_blue_900 from colors;
+@value cm_grey_400 from colors;
+@value breakpoints: "../../variables/breakpoints.css";
+@value mobile from breakpoints;
+@value tablet from breakpoints;
+
+.fontBase {
+  font-family: "Gilroy";
+  user-select: none;
+}
+
+.slide{
+  align-items: center;
+  display: flex;
+  flex-direction: column;
+  justify-content: flex-start;
+}
+
+.slideContentContainer {
+  margin-top: 15px;
+  height: 563px;
+  display: flex;
+  justify-items: center;
+  align-items: center;
+  flex-direction: column;
+  overflow-y: auto;
+  position: relative;
+  width: 100%;
+}
+
+.validateButtonWrapper {
+  position: absolute;
+  bottom: 64px;
+  background-color: black;
+  border-radius: 7px;
+  min-width: 250px;
+  width: min-content;
+}
+
+/* ie fallback */
+_:-ms-fullscreen, :root .validateButtonWrapper {
+  width: 300px;
+  left: 40%;
+  right: 40%;
+}
+
+.answerContainer {
+  max-width: 95%;
+  display: flex;
+  justify-content: center;
+  height: 100%;
+  /*
+    To break wrappers layout (to enclose large answers in the scroll bar), works like
+    display: contents for this use case but w ie11 support
+  */
+  display: grid;
+}
+
+.question {
+  composes: fontBase;
+  font-size: 20px;
+  font-weight: bold;
+  color: cm_blue_900;
+  text-align: center;
+  margin: 24px 0 4px;
+  max-width: 95%;
+  box-sizing: border-box;
+}
+
+.questionOrigin {
+  composes: fontBase;
+  font-size: 15px;
+  color: cm_blue_900;
+  margin-top: 49px;
+  text-align: center;
+  max-width: 95%;
+}
+
+.questionOrigin:empty:after {
+  content: "\a0";
+}
+
+.help {
+  composes: fontBase;
+  font-size: 15px;
+  color: cm_grey_400;
+  flex-grow: 0.1;
+  margin: 4px 0 10px;
+  text-align: center;
+  max-width: 95%;
+}
+
+/* to keep the content space even if the help label is empty */
+.help:empty:after {
+  content: "\a0";
+}
+
+@keyframes popInAnimation {
+  from {
+    transform: translate3d(0, 200px, 0);
+  }
+  to {
+    transform: translate3d(0, 0, 0);
+  }
+}
+
+.correctionPopinWrapper {
+  position: absolute;
+  bottom: 0px;
+  border-radius: 7px;
+  margin: 0 15px 40px;
+  width: 95%;
+}
+
+.popinAnimation {
+  animation: popInAnimation 0.5s ease-out forwards;
+}
+
+/* ie fallback */
+_:-ms-fullscreen, :root .correctionPopinWrapper {
+  left: 15px;
+}
+
+.validateButton {
+  color: white;
+  transition: opacity 0.25s ease-in;
+}
+
+.validateButton:hover {
+  opacity: 0.8;
+}
+
+.loader {
+  height: 60px;
+  width: 60px;
+}
+
+@media tablet {
+  .slideContentContainer {
+    height: 473px;
+  }
+  
+  @keyframes popInAnimation {
+    from {
+      transform: translate3d(0, 400px, 0);
+    }
+    to {
+      transform: translate3d(0, 0, 0);
+    }
+  }
+}
+
+@media mobile {
+  .slideContentContainer {
+    height: 511px;
+  }
+
+  .questionOrigin, .question, .help, .answerContainer {
+    max-width: 90%;
+  }
+  
+  @keyframes popInAnimation {
+    from {
+      transform: translate3d(0, 500px, 0);
+    }
+    to {
+      transform: translate3d(0, 0, 0);
+    }
+  }
+}

package/es/organism/review-stacked-slides/index.js

@@ -0,0 +1,74 @@
+function _extends() { _extends = Object.assign || function (target) { for (var i = 1; i < arguments.length; i++) { var source = arguments[i]; for (var key in source) { if (Object.prototype.hasOwnProperty.call(source, key)) { target[key] = source[key]; } } } return target; }; return _extends.apply(this, arguments); }
+
+import React from 'react';
+import classnames from 'classnames';
+import _toString from 'lodash/fp/toString';
+import ReviewSlide from '../review-slide';
+import propTypes from './prop-types';
+import style from './style.css';
+export const TOTAL_SLIDES_STACK = 5;
+const stylesByPosition = {
+  0: style.position0,
+  1: style.position1,
+  2: style.position2,
+  3: style.position3,
+  4: style.position4
+};
+
+const getSlideAnimation = (action, position, hidden) => {
+  switch (action) {
+    case 'unstack':
+      return style.slideOutHideAndIn;
+
+    case 'restack':
+      return style.slideOutAndIn;
+
+    default:
+      return hidden ? style.hiddenSlide : stylesByPosition[position];
+  }
+};
+
+const StackedSlides = ({
+  slides,
+  endReview,
+  validateButton,
+  correctionPopinProps
+}) => {
+  const stackedSlides = []; // eslint-disable-next-line fp/no-loops
+
+  for (let slideIndex = 0; slideIndex < TOTAL_SLIDES_STACK; slideIndex++) {
+    const slide = slides[_toString(slideIndex)];
+
+    const {
+      animationType,
+      hidden,
+      position
+    } = slide;
+    const slideView = /*#__PURE__*/React.createElement("div", {
+      key: `slide-${slideIndex}`,
+      "data-name": `slide-${slideIndex}`,
+      className: classnames(style.slideBase, getSlideAnimation(animationType, position, hidden), endReview ? style.endReview : null)
+    }, /*#__PURE__*/React.createElement(ReviewSlide, _extends({
+      slideIndex: _toString(slideIndex),
+      slide,
+      validateButton,
+      correctionPopinProps
+    }, {
+      key: slideIndex
+    })));
+    stackedSlides.push(slideView);
+  }
+
+  return /*#__PURE__*/React.createElement("div", {
+    key: "stacked-slides-container-y-overflow",
+    className: style.stackedSlidesYAxisOverflowContainer
+  }, /*#__PURE__*/React.createElement("div", {
+    key: "stacked-slides-container",
+    "data-name": "stacked-slides-container",
+    className: style.stackedSlidesContainer
+  }, stackedSlides));
+};
+
+StackedSlides.propTypes = process.env.NODE_ENV !== "production" ? propTypes : {};
+export default StackedSlides;
+//# sourceMappingURL=index.js.map

package/es/organism/review-stacked-slides/index.js.map

@@ -0,0 +1 @@
+{"version":3,"sources":["../../../src/organism/review-stacked-slides/index.js"],"names":["React","classnames","_toString","ReviewSlide","propTypes","style","TOTAL_SLIDES_STACK","stylesByPosition","position0","position1","position2","position3","position4","getSlideAnimation","action","position","hidden","slideOutHideAndIn","slideOutAndIn","hiddenSlide","StackedSlides","slides","endReview","validateButton","correctionPopinProps","stackedSlides","slideIndex","slide","animationType","slideView","slideBase","push","stackedSlidesYAxisOverflowContainer","stackedSlidesContainer"],"mappings":";;AAAA,OAAOA,KAAP,MAAkB,OAAlB;AACA,OAAOC,UAAP,MAAuB,YAAvB;AACA,OAAOC,SAAP,MAAsB,oBAAtB;AACA,OAAOC,WAAP,MAAwB,iBAAxB;AACA,OAAOC,SAAP,MAAsB,cAAtB;AACA,OAAOC,KAAP,MAAkB,aAAlB;AAEA,OAAO,MAAMC,kBAAkB,GAAG,CAA3B;AAEP,MAAMC,gBAAgB,GAAG;AACvB,KAAGF,KAAK,CAACG,SADc;AAEvB,KAAGH,KAAK,CAACI,SAFc;AAGvB,KAAGJ,KAAK,CAACK,SAHc;AAIvB,KAAGL,KAAK,CAACM,SAJc;AAKvB,KAAGN,KAAK,CAACO;AALc,CAAzB;;AAQA,MAAMC,iBAAiB,GAAG,CAACC,MAAD,EAASC,QAAT,EAAmBC,MAAnB,KAA8B;AACtD,UAAQF,MAAR;AACE,SAAK,SAAL;AACE,aAAOT,KAAK,CAACY,iBAAb;;AACF,SAAK,SAAL;AACE,aAAOZ,KAAK,CAACa,aAAb;;AACF;AACE,aAAOF,MAAM,GAAGX,KAAK,CAACc,WAAT,GAAuBZ,gBAAgB,CAACQ,QAAD,CAApD;AANJ;AAQD,CATD;;AAWA,MAAMK,aAAa,GAAG,CAAC;AAACC,EAAAA,MAAD;AAASC,EAAAA,SAAT;AAAoBC,EAAAA,cAApB;AAAoCC,EAAAA;AAApC,CAAD,KAA+D;AACnF,QAAMC,aAAa,GAAG,EAAtB,CADmF,CAEnF;;AACA,OAAK,IAAIC,UAAU,GAAG,CAAtB,EAAyBA,UAAU,GAAGpB,kBAAtC,EAA0DoB,UAAU,EAApE,EAAwE;AACtE,UAAMC,KAAK,GAAGN,MAAM,CAACnB,SAAS,CAACwB,UAAD,CAAV,CAApB;;AACA,UAAM;AAACE,MAAAA,aAAD;AAAgBZ,MAAAA,MAAhB;AAAwBD,MAAAA;AAAxB,QAAoCY,KAA1C;AAEA,UAAME,SAAS,gBACb;AACE,MAAA,GAAG,EAAG,SAAQH,UAAW,EAD3B;AAEE,mBAAY,SAAQA,UAAW,EAFjC;AAGE,MAAA,SAAS,EAAEzB,UAAU,CACnBI,KAAK,CAACyB,SADa,EAEnBjB,iBAAiB,CAACe,aAAD,EAAgBb,QAAhB,EAA0BC,MAA1B,CAFE,EAGnBM,SAAS,GAAGjB,KAAK,CAACiB,SAAT,GAAqB,IAHX;AAHvB,oBASE,oBAAC,WAAD,WACM;AACFI,MAAAA,UAAU,EAAExB,SAAS,CAACwB,UAAD,CADnB;AAEFC,MAAAA,KAFE;AAGFJ,MAAAA,cAHE;AAIFC,MAAAA;AAJE,KADN;AAOE,MAAA,GAAG,EAAEE;AAPP,OATF,CADF;AAqBAD,IAAAA,aAAa,CAACM,IAAd,CAAmBF,SAAnB;AACD;;AAED,sBACE;AACE,IAAA,GAAG,EAAC,qCADN;AAEE,IAAA,SAAS,EAAExB,KAAK,CAAC2B;AAFnB,kBAIE;AACE,IAAA,GAAG,EAAC,0BADN;AAEE,iBAAU,0BAFZ;AAGE,IAAA,SAAS,EAAE3B,KAAK,CAAC4B;AAHnB,KAKGR,aALH,CAJF,CADF;AAcD,CA7CD;;AA+CAL,aAAa,CAAChB,SAAd,2CAA0BA,SAA1B;AAEA,eAAegB,aAAf","sourcesContent":["import React from 'react';\nimport classnames from 'classnames';\nimport _toString from 'lodash/fp/toString';\nimport ReviewSlide from '../review-slide';\nimport propTypes from './prop-types';\nimport style from './style.css';\n\nexport const TOTAL_SLIDES_STACK = 5;\n\nconst stylesByPosition = {\n  0: style.position0,\n  1: style.position1,\n  2: style.position2,\n  3: style.position3,\n  4: style.position4\n};\n\nconst getSlideAnimation = (action, position, hidden) => {\n  switch (action) {\n    case 'unstack':\n      return style.slideOutHideAndIn;\n    case 'restack':\n      return style.slideOutAndIn;\n    default:\n      return hidden ? style.hiddenSlide : stylesByPosition[position];\n  }\n};\n\nconst StackedSlides = ({slides, endReview, validateButton, correctionPopinProps}) => {\n  const stackedSlides = [];\n  // eslint-disable-next-line fp/no-loops\n  for (let slideIndex = 0; slideIndex < TOTAL_SLIDES_STACK; slideIndex++) {\n    const slide = slides[_toString(slideIndex)];\n    const {animationType, hidden, position} = slide;\n\n    const slideView = (\n      <div\n        key={`slide-${slideIndex}`}\n        data-name={`slide-${slideIndex}`}\n        className={classnames(\n          style.slideBase,\n          getSlideAnimation(animationType, position, hidden),\n          endReview ? style.endReview : null\n        )}\n      >\n        <ReviewSlide\n          {...{\n            slideIndex: _toString(slideIndex),\n            slide,\n            validateButton,\n            correctionPopinProps\n          }}\n          key={slideIndex}\n        />\n      </div>\n    );\n    stackedSlides.push(slideView);\n  }\n\n  return (\n    <div\n      key=\"stacked-slides-container-y-overflow\"\n      className={style.stackedSlidesYAxisOverflowContainer}\n    >\n      <div\n        key=\"stacked-slides-container\"\n        data-name=\"stacked-slides-container\"\n        className={style.stackedSlidesContainer}\n      >\n        {stackedSlides}\n      </div>\n    </div>\n  );\n};\n\nStackedSlides.propTypes = propTypes;\n\nexport default StackedSlides;\n"],"file":"index.js"}

package/es/organism/review-stacked-slides/prop-types.js

@@ -0,0 +1,15 @@
+import PropTypes from 'prop-types';
+import ReviewSlideProps, { SlideProp } from '../review-slide/prop-types';
+export default {
+  validateButton: ReviewSlideProps.validateButton,
+  correctionPopinProps: ReviewSlideProps.correctionPopinProps,
+  slides: PropTypes.shape({
+    '0': SlideProp,
+    '1': SlideProp,
+    '2': SlideProp,
+    '3': SlideProp,
+    '4': SlideProp
+  }),
+  endReview: PropTypes.bool
+};
+//# sourceMappingURL=prop-types.js.map

package/es/organism/review-stacked-slides/prop-types.js.map

@@ -0,0 +1 @@
+{"version":3,"sources":["../../../src/organism/review-stacked-slides/prop-types.js"],"names":["PropTypes","ReviewSlideProps","SlideProp","validateButton","correctionPopinProps","slides","shape","endReview","bool"],"mappings":"AAAA,OAAOA,SAAP,MAAsB,YAAtB;AACA,OAAOC,gBAAP,IAA0BC,SAA1B,QAA0C,4BAA1C;AAEA,eAAe;AACbC,EAAAA,cAAc,EAAEF,gBAAgB,CAACE,cADpB;AAEbC,EAAAA,oBAAoB,EAAEH,gBAAgB,CAACG,oBAF1B;AAGbC,EAAAA,MAAM,EAAEL,SAAS,CAACM,KAAV,CAAgB;AACtB,SAAKJ,SADiB;AAEtB,SAAKA,SAFiB;AAGtB,SAAKA,SAHiB;AAItB,SAAKA,SAJiB;AAKtB,SAAKA;AALiB,GAAhB,CAHK;AAUbK,EAAAA,SAAS,EAAEP,SAAS,CAACQ;AAVR,CAAf","sourcesContent":["import PropTypes from 'prop-types';\nimport ReviewSlideProps, {SlideProp} from '../review-slide/prop-types';\n\nexport default {\n  validateButton: ReviewSlideProps.validateButton,\n  correctionPopinProps: ReviewSlideProps.correctionPopinProps,\n  slides: PropTypes.shape({\n    '0': SlideProp,\n    '1': SlideProp,\n    '2': SlideProp,\n    '3': SlideProp,\n    '4': SlideProp\n  }),\n  endReview: PropTypes.bool\n};\n"],"file":"prop-types.js"}

package/es/organism/review-stacked-slides/style.css

@@ -0,0 +1,174 @@
+@value breakpoints: "../../variables/breakpoints.css";
+@value mobile from breakpoints;
+@value tablet from breakpoints;
+
+.stackedSlidesYAxisOverflowContainer {
+  width: 100%;
+  padding-top: 20px;
+  height: 100%;
+  min-height: 870px;
+  /* --- ie11 fallback --- */
+  overflow-y: hidden;
+  /* --------------------- */
+  overflow-y: clip;
+  overflow-x: visible;
+  display: flex;
+  justify-content: center;
+  flex-grow: 1;
+}
+
+.stackedSlidesContainer {
+  position: relative;
+  padding-top: 20px;
+  height: 788px;
+  max-width: 1240px;
+  width: 85%;
+  align-self: center;
+}
+
+.slideBase {
+  box-shadow: 0px 4px 58px rgba(0, 0, 0, 0.05);
+  background: white;
+  height: 706px;
+  border-radius: 24px;
+  overflow: hidden;
+  position: absolute;
+
+  transition: transform 0.5s ease-in;
+  pointer-events: none;
+}
+
+.slideBase.position0 {
+  pointer-events: auto;
+}
+
+.position0 {
+  z-index: 50;
+  width: 100%;
+  transform: translate(0, 0);
+  transition: transform 0.5s ease-in;
+}
+
+.position1 {
+  z-index: 45;
+  width: 98%;
+  transform: translate(0.8%, -8px);
+  transition: transform 0.5s ease-in;
+}
+
+.position2 {
+  z-index: 40;
+  width: 96%;
+  transform: translate(1.6%, -16px);
+  transition: transform 0.5s ease-in;
+}
+
+.position3 {
+  z-index: 35;
+  width: 94%;
+  transform: translate(2.4%, -24px);
+  transition: transform 0.5 ease-in;
+}
+
+.position4 {
+  z-index: 30;
+  width: 92%;
+  transform: translate(3.2%, -32px);
+  transition: transform 0.5 ease-in;
+}
+
+@keyframes slideOutHideAndSlideIn {
+  0% {
+    width: 100%;
+    z-index: 55;
+    transform: translate(0, 0);
+  }
+  50% {
+    width: 100%;
+    z-index: 50;
+    transform: translate(0, 1000px);
+    opacity: 1;
+  }
+  51% {
+    z-index: 30;
+    opacity: 0;
+  }
+  100% {
+    z-index: 30;
+    transform: translate(3.2%, -32px);
+    opacity: 0;
+  }
+}
+
+@keyframes slideOutAndIn {
+  0% {
+    z-index: 55;
+    transform: translate(0, 0);
+  }
+  50% {
+    width: 100%;
+    z-index: 50;
+    transform: translate(0, 1000px);
+  }
+  60% {
+    width: 92%;
+    z-index: 30;
+    transform: translate(3.2%, 900px);
+  }
+  100% {
+    z-index: 30;
+    width: 92%;
+    transform: translate(3.2%, -32px);
+  }
+}
+
+.slideOutHideAndIn {
+  pointer-events: none;
+  animation: slideOutHideAndSlideIn 3s ease forwards;
+}
+
+.slideOutAndIn {
+  pointer-events: none;
+  animation: slideOutAndIn 3s ease forwards;
+}
+
+.hiddenSlide {
+  display: none;
+}
+
+@keyframes slideOut {
+  0% {}
+  90% {
+    transform: translate(0, 1000px);
+  }
+  100% {
+    transform: scale(0);
+  }
+}
+
+.endReview {
+  pointer-events: none;
+  animation: slideOut 2.5s ease forwards;
+}
+
+@media tablet {
+  .stackedSlidesContainer {
+    height: 638px;
+    max-width: 960px;
+  }
+
+  .slideBase {
+    height: 606px;
+  }
+}
+
+@media mobile {
+  .stackedSlidesContainer {
+    height: 670px;
+    max-width: 335px;
+  }
+
+  .slideBase {
+    height: 654px;
+  }
+}

package/es/template/app-player/player/slides/header/learner.css

@@ -88,6 +88,10 @@
   margin-right: 10px;
 }
 
+.innerHTML {
+  composes: innerHTML from '../../../../../atom/label/style.css';
+}
+
 @media mobile {
   .contentWrapper {
     max-width: 90%;

package/es/template/app-player/player/slides/header/learner.js

@@ -5,7 +5,6 @@ import classnames from 'classnames';
 import { NovaCompositionNavigationArrowLeft as BackIcon } from '@coorpacademy/nova-icons';
 import Link from '../../../../../atom/link';
 import Provider from '../../../../../atom/provider';
-import { innerHTML } from '../../../../../atom/label/style.css';
 import style from './learner.css';
 
 const Content = ({
@@ -34,7 +33,7 @@ const Content = ({
     }
   }, details), /*#__PURE__*/React.createElement("span", {
     "data-name": "contentTitle",
-    className: classnames(style.contentTitle, innerHTML) // eslint-disable-next-line react/no-danger
+    className: classnames(style.contentTitle, style.innerHTML) // eslint-disable-next-line react/no-danger
     ,
     dangerouslySetInnerHTML: {
       __html: title
@@ -59,7 +58,7 @@ const Subcontent = ({
 }, /*#__PURE__*/React.createElement("div", {
   className: style.subcontentDetails
 }, details), /*#__PURE__*/React.createElement("div", {
-  className: classnames(style.subcontentTitle, innerHTML) // eslint-disable-next-line react/no-danger
+  className: classnames(style.subcontentTitle, style.innerHTML) // eslint-disable-next-line react/no-danger
   ,
   dangerouslySetInnerHTML: {
     __html: title

package/es/template/app-player/player/slides/header/learner.js.map

@@ -1 +1 @@
-{"version":3,"sources":["../../../../../../src/template/app-player/player/slides/header/learner.js"],"names":["React","PropTypes","classnames","NovaCompositionNavigationArrowLeft","BackIcon","Link","Provider","innerHTML","style","Content","onClick","title","details","context","skin","primarySkinColor","contentWrapper","backIcon","content","contentDetails","color","contentTitle","__html","contextTypes","childContextTypes","propTypes","string","isRequired","Subcontent","subcontent","subcontentDetails","subcontentTitle","LearnerHeader","props","wrapper","shape"],"mappings":"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","sourcesContent":["import React from 'react';\nimport PropTypes from 'prop-types';\nimport {get} from 'lodash/fp';\nimport classnames from 'classnames';\nimport {NovaCompositionNavigationArrowLeft as BackIcon} from '@coorpacademy/nova-icons';\nimport Link from '../../../../../atom/link';\nimport Provider from '../../../../../atom/provider';\nimport {innerHTML} from '../../../../../atom/label/style.css';\nimport style from './learner.css';\n\nconst Content = ({onClick, title, details}, context) => {\n  const {skin} = context;\n  const primarySkinColor = get('common.primary', skin);\n\n  return (\n    <Link onClick={onClick} className={style.contentWrapper}>\n      <BackIcon className={style.backIcon} color=\"inherit\" />\n      <div className={style.content}>\n        <div\n          className={style.contentDetails}\n          style={{\n            color: primarySkinColor\n          }}\n        >\n          {details}\n        </div>\n\n        <span\n          data-name=\"contentTitle\"\n          className={classnames(style.contentTitle, innerHTML)}\n          // eslint-disable-next-line react/no-danger\n          dangerouslySetInnerHTML={{__html: title}}\n        />\n      </div>\n    </Link>\n  );\n};\n\nContent.contextTypes = {\n  skin: Provider.childContextTypes.skin\n};\n\nContent.propTypes = {\n  onClick: Link.propTypes.onClick,\n  title: PropTypes.string.isRequired,\n  details: PropTypes.string\n};\n\nconst Subcontent = ({title, details}, context) => (\n  <div className={style.subcontent}>\n    <div className={style.subcontentDetails}>{details}</div>\n    <div\n      className={classnames(style.subcontentTitle, innerHTML)}\n      // eslint-disable-next-line react/no-danger\n      dangerouslySetInnerHTML={{__html: title}}\n    />\n  </div>\n);\n\nSubcontent.propTypes = {\n  title: PropTypes.string.isRequired,\n  details: PropTypes.string\n};\n\nconst LearnerHeader = (props, context) => {\n  const {content, subcontent} = props;\n\n  return (\n    <div className={style.wrapper}>\n      <Content {...content} />\n      <Subcontent {...subcontent} />\n    </div>\n  );\n};\n\nLearnerHeader.propTypes = {\n  content: PropTypes.shape(Content.propTypes).isRequired,\n  subcontent: PropTypes.shape(Subcontent.propTypes).isRequired\n};\n\nexport default LearnerHeader;\n"],"file":"learner.js"}
+{"version":3,"sources":["../../../../../../src/template/app-player/player/slides/header/learner.js"],"names":["React","PropTypes","classnames","NovaCompositionNavigationArrowLeft","BackIcon","Link","Provider","style","Content","onClick","title","details","context","skin","primarySkinColor","contentWrapper","backIcon","content","contentDetails","color","contentTitle","innerHTML","__html","contextTypes","childContextTypes","propTypes","string","isRequired","Subcontent","subcontent","subcontentDetails","subcontentTitle","LearnerHeader","props","wrapper","shape"],"mappings":"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","sourcesContent":["import React from 'react';\nimport PropTypes from 'prop-types';\nimport {get} from 'lodash/fp';\nimport classnames from 'classnames';\nimport {NovaCompositionNavigationArrowLeft as BackIcon} from '@coorpacademy/nova-icons';\nimport Link from '../../../../../atom/link';\nimport Provider from '../../../../../atom/provider';\nimport style from './learner.css';\n\nconst Content = ({onClick, title, details}, context) => {\n  const {skin} = context;\n  const primarySkinColor = get('common.primary', skin);\n\n  return (\n    <Link onClick={onClick} className={style.contentWrapper}>\n      <BackIcon className={style.backIcon} color=\"inherit\" />\n      <div className={style.content}>\n        <div\n          className={style.contentDetails}\n          style={{\n            color: primarySkinColor\n          }}\n        >\n          {details}\n        </div>\n\n        <span\n          data-name=\"contentTitle\"\n          className={classnames(style.contentTitle, style.innerHTML)}\n          // eslint-disable-next-line react/no-danger\n          dangerouslySetInnerHTML={{__html: title}}\n        />\n      </div>\n    </Link>\n  );\n};\n\nContent.contextTypes = {\n  skin: Provider.childContextTypes.skin\n};\n\nContent.propTypes = {\n  onClick: Link.propTypes.onClick,\n  title: PropTypes.string.isRequired,\n  details: PropTypes.string\n};\n\nconst Subcontent = ({title, details}, context) => (\n  <div className={style.subcontent}>\n    <div className={style.subcontentDetails}>{details}</div>\n    <div\n      className={classnames(style.subcontentTitle, style.innerHTML)}\n      // eslint-disable-next-line react/no-danger\n      dangerouslySetInnerHTML={{__html: title}}\n    />\n  </div>\n);\n\nSubcontent.propTypes = {\n  title: PropTypes.string.isRequired,\n  details: PropTypes.string\n};\n\nconst LearnerHeader = (props, context) => {\n  const {content, subcontent} = props;\n\n  return (\n    <div className={style.wrapper}>\n      <Content {...content} />\n      <Subcontent {...subcontent} />\n    </div>\n  );\n};\n\nLearnerHeader.propTypes = {\n  content: PropTypes.shape(Content.propTypes).isRequired,\n  subcontent: PropTypes.shape(Subcontent.propTypes).isRequired\n};\n\nexport default LearnerHeader;\n"],"file":"learner.js"}

package/es/template/app-player/player/slides/header/microlearning.css

@@ -37,6 +37,10 @@
   max-width: 100%;
 }
 
+.innerHTML {
+  composes: innerHTML from '../../../../../atom/label/style.css';
+}
+
 @media mobile {
   .content {
     max-width: none;

package/es/template/app-player/player/slides/header/microlearning.js

@@ -3,7 +3,6 @@ import PropTypes from 'prop-types';
 import classnames from 'classnames';
 import { NovaCompositionNavigationArrowLeft as BackIcon } from '@coorpacademy/nova-icons';
 import Link from '../../../../../atom/link';
-import { innerHTML } from '../../../../../atom/label/style.css';
 import style from './microlearning.css';
 
 const Content = ({
@@ -17,7 +16,7 @@ const Content = ({
   color: "inherit"
 }), /*#__PURE__*/React.createElement("div", {
   "data-name": "contentTitle",
-  className: classnames(style.contentTitle, innerHTML) // eslint-disable-next-line react/no-danger
+  className: classnames(style.contentTitle, style.innerHTML) // eslint-disable-next-line react/no-danger
   ,
   dangerouslySetInnerHTML: {
     __html: title

package/es/template/app-player/player/slides/header/microlearning.js.map

@@ -1 +1 @@
-{"version":3,"sources":["../../../../../../src/template/app-player/player/slides/header/microlearning.js"],"names":["React","PropTypes","classnames","NovaCompositionNavigationArrowLeft","BackIcon","Link","innerHTML","style","Content","onClick","title","context","content","backIcon","contentTitle","__html","propTypes","node","MicrolearningHeader","props","shape","string","isRequired"],"mappings":"AAAA,OAAOA,KAAP,MAAkB,OAAlB;AACA,OAAOC,SAAP,MAAsB,YAAtB;AACA,OAAOC,UAAP,MAAuB,YAAvB;AACA,SAAQC,kCAAkC,IAAIC,QAA9C,QAA6D,0BAA7D;AACA,OAAOC,IAAP,MAAiB,0BAAjB;AACA,SAAQC,SAAR,QAAwB,qCAAxB;AACA,OAAOC,KAAP,MAAkB,qBAAlB;;AAEA,MAAMC,OAAO,GAAG,CAAC;AAACC,EAAAA,OAAD;AAAUC,EAAAA;AAAV,CAAD,EAAmBC,OAAnB,kBACd,oBAAC,IAAD;AAAM,EAAA,OAAO,EAAEF,OAAf;AAAwB,EAAA,SAAS,EAAEF,KAAK,CAACK;AAAzC,gBACE,oBAAC,QAAD;AAAU,EAAA,SAAS,EAAEL,KAAK,CAACM,QAA3B;AAAqC,EAAA,KAAK,EAAC;AAA3C,EADF,eAEE;AACE,eAAU,cADZ;AAEE,EAAA,SAAS,EAAEX,UAAU,CAACK,KAAK,CAACO,YAAP,EAAqBR,SAArB,CAFvB,CAGE;AAHF;AAIE,EAAA,uBAAuB,EAAE;AAACS,IAAAA,MAAM,EAAEL;AAAT;AAJ3B,EAFF,CADF;;AAYAF,OAAO,CAACQ,SAAR,2CAAoB;AAClBP,EAAAA,OAAO,EAAEJ,IAAI,CAACW,SAAL,CAAeP,OADN;AAElBC,EAAAA,KAAK,EAAET,SAAS,CAACgB;AAFC,CAApB;;AAKA,MAAMC,mBAAmB,GAAG,CAACC,KAAD,EAAQR,OAAR,KAAoB;AAC9C,QAAM;AAACC,IAAAA;AAAD,MAAYO,KAAlB;AACA,sBAAO,oBAAC,OAAD,EAAaP,OAAb,CAAP;AACD,CAHD;;AAKAM,mBAAmB,CAACF,SAApB,2CAAgC;AAC9BJ,EAAAA,OAAO,EAAEX,SAAS,CAACmB,KAAV,CAAgB;AACvBX,IAAAA,OAAO,EAAEJ,IAAI,CAACW,SAAL,CAAeP,OADD;AAEvBC,IAAAA,KAAK,EAAET,SAAS,CAACoB,MAAV,CAAiBC;AAFD,GAAhB;AADqB,CAAhC;AAOA,eAAeJ,mBAAf","sourcesContent":["import React from 'react';\nimport PropTypes from 'prop-types';\nimport classnames from 'classnames';\nimport {NovaCompositionNavigationArrowLeft as BackIcon} from '@coorpacademy/nova-icons';\nimport Link from '../../../../../atom/link';\nimport {innerHTML} from '../../../../../atom/label/style.css';\nimport style from './microlearning.css';\n\nconst Content = ({onClick, title}, context) => (\n  <Link onClick={onClick} className={style.content}>\n    <BackIcon className={style.backIcon} color=\"inherit\" />\n    <div\n      data-name=\"contentTitle\"\n      className={classnames(style.contentTitle, innerHTML)}\n      // eslint-disable-next-line react/no-danger\n      dangerouslySetInnerHTML={{__html: title}}\n    />\n  </Link>\n);\n\nContent.propTypes = {\n  onClick: Link.propTypes.onClick,\n  title: PropTypes.node\n};\n\nconst MicrolearningHeader = (props, context) => {\n  const {content} = props;\n  return <Content {...content} />;\n};\n\nMicrolearningHeader.propTypes = {\n  content: PropTypes.shape({\n    onClick: Link.propTypes.onClick,\n    title: PropTypes.string.isRequired\n  })\n};\n\nexport default MicrolearningHeader;\n"],"file":"microlearning.js"}
+{"version":3,"sources":["../../../../../../src/template/app-player/player/slides/header/microlearning.js"],"names":["React","PropTypes","classnames","NovaCompositionNavigationArrowLeft","BackIcon","Link","style","Content","onClick","title","context","content","backIcon","contentTitle","innerHTML","__html","propTypes","node","MicrolearningHeader","props","shape","string","isRequired"],"mappings":"AAAA,OAAOA,KAAP,MAAkB,OAAlB;AACA,OAAOC,SAAP,MAAsB,YAAtB;AACA,OAAOC,UAAP,MAAuB,YAAvB;AACA,SAAQC,kCAAkC,IAAIC,QAA9C,QAA6D,0BAA7D;AACA,OAAOC,IAAP,MAAiB,0BAAjB;AACA,OAAOC,KAAP,MAAkB,qBAAlB;;AAEA,MAAMC,OAAO,GAAG,CAAC;AAACC,EAAAA,OAAD;AAAUC,EAAAA;AAAV,CAAD,EAAmBC,OAAnB,kBACd,oBAAC,IAAD;AAAM,EAAA,OAAO,EAAEF,OAAf;AAAwB,EAAA,SAAS,EAAEF,KAAK,CAACK;AAAzC,gBACE,oBAAC,QAAD;AAAU,EAAA,SAAS,EAAEL,KAAK,CAACM,QAA3B;AAAqC,EAAA,KAAK,EAAC;AAA3C,EADF,eAEE;AACE,eAAU,cADZ;AAEE,EAAA,SAAS,EAAEV,UAAU,CAACI,KAAK,CAACO,YAAP,EAAqBP,KAAK,CAACQ,SAA3B,CAFvB,CAGE;AAHF;AAIE,EAAA,uBAAuB,EAAE;AAACC,IAAAA,MAAM,EAAEN;AAAT;AAJ3B,EAFF,CADF;;AAYAF,OAAO,CAACS,SAAR,2CAAoB;AAClBR,EAAAA,OAAO,EAAEH,IAAI,CAACW,SAAL,CAAeR,OADN;AAElBC,EAAAA,KAAK,EAAER,SAAS,CAACgB;AAFC,CAApB;;AAKA,MAAMC,mBAAmB,GAAG,CAACC,KAAD,EAAQT,OAAR,KAAoB;AAC9C,QAAM;AAACC,IAAAA;AAAD,MAAYQ,KAAlB;AACA,sBAAO,oBAAC,OAAD,EAAaR,OAAb,CAAP;AACD,CAHD;;AAKAO,mBAAmB,CAACF,SAApB,2CAAgC;AAC9BL,EAAAA,OAAO,EAAEV,SAAS,CAACmB,KAAV,CAAgB;AACvBZ,IAAAA,OAAO,EAAEH,IAAI,CAACW,SAAL,CAAeR,OADD;AAEvBC,IAAAA,KAAK,EAAER,SAAS,CAACoB,MAAV,CAAiBC;AAFD,GAAhB;AADqB,CAAhC;AAOA,eAAeJ,mBAAf","sourcesContent":["import React from 'react';\nimport PropTypes from 'prop-types';\nimport classnames from 'classnames';\nimport {NovaCompositionNavigationArrowLeft as BackIcon} from '@coorpacademy/nova-icons';\nimport Link from '../../../../../atom/link';\nimport style from './microlearning.css';\n\nconst Content = ({onClick, title}, context) => (\n  <Link onClick={onClick} className={style.content}>\n    <BackIcon className={style.backIcon} color=\"inherit\" />\n    <div\n      data-name=\"contentTitle\"\n      className={classnames(style.contentTitle, style.innerHTML)}\n      // eslint-disable-next-line react/no-danger\n      dangerouslySetInnerHTML={{__html: title}}\n    />\n  </Link>\n);\n\nContent.propTypes = {\n  onClick: Link.propTypes.onClick,\n  title: PropTypes.node\n};\n\nconst MicrolearningHeader = (props, context) => {\n  const {content} = props;\n  return <Content {...content} />;\n};\n\nMicrolearningHeader.propTypes = {\n  content: PropTypes.shape({\n    onClick: Link.propTypes.onClick,\n    title: PropTypes.string.isRequired\n  })\n};\n\nexport default MicrolearningHeader;\n"],"file":"microlearning.js"}

package/es/template/app-player/player/slides/index.js

@@ -28,7 +28,6 @@ import VideoPlayer from '../../../../molecule/video-player';
 import PDF from '../../../../molecule/pdf';
 import Audio from '../../../../molecule/audio';
 import ResourceBrowser from '../../../../organism/resource-browser';
-import { innerHTML } from '../../../../atom/label/style.css';
 import Footer from './footer';
 import Header from './header';
 import style from './style.css';
@@ -295,7 +294,7 @@ const ContextContent = ({
   const paragraphs = descriptionParagraphs.map((paragraph, index) => /*#__PURE__*/React.createElement("p", {
     key: index,
     "data-name": "contextDescription",
-    className: classnames(style.contextDescription, innerHTML) // eslint-disable-next-line react/no-danger
+    className: classnames(style.contextDescription, style.innerHTML) // eslint-disable-next-line react/no-danger
     ,
     dangerouslySetInnerHTML: {
       __html: paragraph
@@ -325,7 +324,7 @@ const CONTENT_TYPE = {
 const Help = ({
   help
 }) => /*#__PURE__*/React.createElement("div", {
-  className: classnames(style.helpView, innerHTML) // eslint-disable-next-line react/no-danger
+  className: classnames(style.helpView, style.innerHTML) // eslint-disable-next-line react/no-danger
   ,
   dangerouslySetInnerHTML: {
     __html: help
@@ -375,7 +374,7 @@ const ContentLayout = (props, context) => {
     }
   }, /*#__PURE__*/React.createElement("div", {
     "data-name": "question",
-    className: classnames(selectedTab === 'context' ? style.contextTitle : style.question, innerHTML) // eslint-disable-next-line react/no-danger
+    className: classnames(selectedTab === 'context' ? style.contextTitle : style.question, style.innerHTML) // eslint-disable-next-line react/no-danger
     ,
     dangerouslySetInnerHTML: {
       __html: selectedTab === 'context' ? slideContext.title : question