@coorpacademy/components 10.20.0-alpha.0 → 10.21.1

package/es/template/app-review/slides/prop-types.js

@@ -0,0 +1,111 @@
+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 PropTypes from 'prop-types';
+import omit from 'lodash/fp/omit';
+import ReviewCongrats from '../../../organism/review-congrats';
+import ReviewCorrectionPopin from '../../../molecule/review-correction-popin';
+import ReviewBackground from '../../../atom/review-background';
+import ReviewHeader from '../../../organism/review-header';
+import Answer from '../../../molecule/answer';
+const NextSlideProp = PropTypes.shape({
+  hidden: PropTypes.bool,
+  position: PropTypes.number,
+  // 'unstack' | 'restack'
+  animationType: PropTypes.string,
+  // 'success' | 'failure'
+  validationResult: PropTypes.string,
+  endReview: PropTypes.bool,
+  questionText: PropTypes.string,
+  answerUI: Answer
+});
+const SlideProp = PropTypes.shape(_extends(_extends({}, NextSlideProp.props), {}, {
+  nextSlide: NextSlideProp
+}));
+const StepItemProp = PropTypes.shape({
+  current: PropTypes.bool,
+  icon: PropTypes.string,
+  value: PropTypes.string
+});
+export const SlidesReviewPropTypes = {
+  headerProps: PropTypes.shape(omit('steps', ReviewHeader.propTypes)),
+  reviewBackgroundAriaLabel: ReviewBackground.propTypes['aria-label'],
+  validate: PropTypes.shape({
+    label: PropTypes.string
+  }),
+  slides: PropTypes.shape({
+    slideNumbers: PropTypes.arrayOf(PropTypes.number),
+    0: SlideProp,
+    1: SlideProp,
+    2: SlideProp,
+    3: SlideProp,
+    4: SlideProp
+  }),
+  finishedSlides: PropTypes.shape({
+    slideNumbers: PropTypes.arrayOf(PropTypes.number),
+    0: PropTypes.bool,
+    1: PropTypes.bool,
+    2: PropTypes.bool,
+    3: PropTypes.bool,
+    4: PropTypes.bool
+  }),
+  stepItems: PropTypes.shape({
+    slideNumbers: PropTypes.arrayOf(PropTypes.number),
+    0: StepItemProp,
+    1: StepItemProp,
+    2: StepItemProp,
+    3: StepItemProp,
+    4: StepItemProp
+  }),
+  // 'finished' | 'ongoing'
+  reviewStatus: PropTypes.string,
+  correctionPopinProps: PropTypes.shape({
+    // ---------------
+    klf: ReviewCorrectionPopin.propTypes.klf,
+    information: ReviewCorrectionPopin.propTypes.information,
+    next: PropTypes.shape({
+      label: PropTypes.string,
+      'aria-label': PropTypes.string
+    }),
+    successLabel: ReviewCorrectionPopin.propTypes.resultLabel,
+    failureLabel: ReviewCorrectionPopin.propTypes.resultLabel
+  }),
+  congratsProps: PropTypes.shape(ReviewCongrats.propTypes),
+  slideValidationResult: PropTypes.shape({
+    slideNumber: PropTypes.number,
+    // 'success' | 'failure'
+    result: PropTypes.string,
+    // 'successExitNode' | 'failExitNode'
+    exitNode: PropTypes.string,
+    nextSlide: PropTypes.shape({
+      questionText: PropTypes.string,
+      answerUI: PropTypes.shape(Answer.propTypes)
+    })
+  }),
+  // ---------------------------------------------------------------------------
+  // Dispatchers
+  validateSlide: PropTypes.func.isRequired,
+  updateSlidesOnValidation: PropTypes.func.isRequired,
+  updateSlidesOnNext: PropTypes.func.isRequired,
+  updateReviewStatus: PropTypes.func.isRequired,
+  updateStepItemsOnValidation: PropTypes.func.isRequired,
+  updateStepItemsOnNext: PropTypes.func.isRequired,
+  updateFinishedSlides: PropTypes.func.isRequired
+};
+export const SlidePropTypes = {
+  slideNumber: PropTypes.number,
+  slides: SlidesReviewPropTypes.slides,
+  primarySkinColor: PropTypes.string,
+  validate: SlidesReviewPropTypes.validate,
+  finishedSlides: SlidesReviewPropTypes.finishedSlides,
+  finishedSlidesSize: PropTypes.number,
+  correctionPopinProps: SlidesReviewPropTypes.correctionPopinProps,
+  // ---------------
+  // Dispatchers
+  validateSlide: SlidesReviewPropTypes.validateSlide,
+  updateSlidesOnNext: SlidesReviewPropTypes.updateSlidesOnNext,
+  updateReviewStatus: SlidesReviewPropTypes.updateReviewStatus,
+  updateStepItemsOnNext: SlidesReviewPropTypes.updateStepItemsOnNext,
+  slideValidationResult: SlidesReviewPropTypes.slideValidationResult
+};
+export const StackedSlidesPropTypes = omit('slideNumber', SlidePropTypes);
+//# sourceMappingURL=prop-types.js.map

package/es/template/app-review/slides/prop-types.js.map

@@ -0,0 +1 @@
+{"version":3,"sources":["../../../../src/template/app-review/slides/prop-types.js"],"names":["PropTypes","omit","ReviewCongrats","ReviewCorrectionPopin","ReviewBackground","ReviewHeader","Answer","NextSlideProp","shape","hidden","bool","position","number","animationType","string","validationResult","endReview","questionText","answerUI","SlideProp","props","nextSlide","StepItemProp","current","icon","value","SlidesReviewPropTypes","headerProps","propTypes","reviewBackgroundAriaLabel","validate","label","slides","slideNumbers","arrayOf","finishedSlides","stepItems","reviewStatus","correctionPopinProps","klf","information","next","successLabel","resultLabel","failureLabel","congratsProps","slideValidationResult","slideNumber","result","exitNode","validateSlide","func","isRequired","updateSlidesOnValidation","updateSlidesOnNext","updateReviewStatus","updateStepItemsOnValidation","updateStepItemsOnNext","updateFinishedSlides","SlidePropTypes","primarySkinColor","finishedSlidesSize","StackedSlidesPropTypes"],"mappings":"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","sourcesContent":["import PropTypes from 'prop-types';\nimport omit from 'lodash/fp/omit';\n\nimport ReviewCongrats from '../../../organism/review-congrats';\nimport ReviewCorrectionPopin from '../../../molecule/review-correction-popin';\nimport ReviewBackground from '../../../atom/review-background';\nimport ReviewHeader from '../../../organism/review-header';\nimport Answer from '../../../molecule/answer';\n\nconst NextSlideProp = PropTypes.shape({\n  hidden: PropTypes.bool,\n  position: PropTypes.number,\n  // 'unstack' | 'restack'\n  animationType: PropTypes.string,\n  // 'success' | 'failure'\n  validationResult: PropTypes.string,\n  endReview: PropTypes.bool,\n  questionText: PropTypes.string,\n  answerUI: Answer\n});\n\nconst SlideProp = PropTypes.shape({\n  ...NextSlideProp.props,\n  nextSlide: NextSlideProp\n});\n\nconst StepItemProp = PropTypes.shape({\n  current: PropTypes.bool,\n  icon: PropTypes.string,\n  value: PropTypes.string\n});\n\nexport const SlidesReviewPropTypes = {\n  headerProps: PropTypes.shape(omit('steps', ReviewHeader.propTypes)),\n  reviewBackgroundAriaLabel: ReviewBackground.propTypes['aria-label'],\n  validate: PropTypes.shape({\n    label: PropTypes.string\n  }),\n  slides: PropTypes.shape({\n    slideNumbers: PropTypes.arrayOf(PropTypes.number),\n    0: SlideProp,\n    1: SlideProp,\n    2: SlideProp,\n    3: SlideProp,\n    4: SlideProp\n  }),\n  finishedSlides: PropTypes.shape({\n    slideNumbers: PropTypes.arrayOf(PropTypes.number),\n    0: PropTypes.bool,\n    1: PropTypes.bool,\n    2: PropTypes.bool,\n    3: PropTypes.bool,\n    4: PropTypes.bool\n  }),\n  stepItems: PropTypes.shape({\n    slideNumbers: PropTypes.arrayOf(PropTypes.number),\n    0: StepItemProp,\n    1: StepItemProp,\n    2: StepItemProp,\n    3: StepItemProp,\n    4: StepItemProp\n  }),\n  // 'finished' | 'ongoing'\n  reviewStatus: PropTypes.string,\n  correctionPopinProps: PropTypes.shape({\n    // ---------------\n    klf: ReviewCorrectionPopin.propTypes.klf,\n    information: ReviewCorrectionPopin.propTypes.information,\n    next: PropTypes.shape({\n      label: PropTypes.string,\n      'aria-label': PropTypes.string\n    }),\n    successLabel: ReviewCorrectionPopin.propTypes.resultLabel,\n    failureLabel: ReviewCorrectionPopin.propTypes.resultLabel\n  }),\n  congratsProps: PropTypes.shape(ReviewCongrats.propTypes),\n  slideValidationResult: PropTypes.shape({\n    slideNumber: PropTypes.number,\n    // 'success' | 'failure'\n    result: PropTypes.string,\n    // 'successExitNode' | 'failExitNode'\n    exitNode: PropTypes.string,\n    nextSlide: PropTypes.shape({\n      questionText: PropTypes.string,\n      answerUI: PropTypes.shape(Answer.propTypes)\n    })\n  }),\n  // ---------------------------------------------------------------------------\n  // Dispatchers\n  validateSlide: PropTypes.func.isRequired,\n  updateSlidesOnValidation: PropTypes.func.isRequired,\n  updateSlidesOnNext: PropTypes.func.isRequired,\n  updateReviewStatus: PropTypes.func.isRequired,\n  updateStepItemsOnValidation: PropTypes.func.isRequired,\n  updateStepItemsOnNext: PropTypes.func.isRequired,\n  updateFinishedSlides: PropTypes.func.isRequired\n};\n\nexport const SlidePropTypes = {\n  slideNumber: PropTypes.number,\n  slides: SlidesReviewPropTypes.slides,\n  primarySkinColor: PropTypes.string,\n  validate: SlidesReviewPropTypes.validate,\n  finishedSlides: SlidesReviewPropTypes.finishedSlides,\n  finishedSlidesSize: PropTypes.number,\n  correctionPopinProps: SlidesReviewPropTypes.correctionPopinProps,\n  // ---------------\n  // Dispatchers\n  validateSlide: SlidesReviewPropTypes.validateSlide,\n  updateSlidesOnNext: SlidesReviewPropTypes.updateSlidesOnNext,\n  updateReviewStatus: SlidesReviewPropTypes.updateReviewStatus,\n  updateStepItemsOnNext: SlidesReviewPropTypes.updateStepItemsOnNext,\n  slideValidationResult: SlidesReviewPropTypes.slideValidationResult\n};\n\nexport const StackedSlidesPropTypes = omit('slideNumber', SlidePropTypes);\n"],"file":"prop-types.js"}

package/es/template/app-review/slides/style.css

@@ -0,0 +1,409 @@
+@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;
+
+.slidesRevisionContainer {
+  position: relative;
+  display: flex;
+  flex-direction: column;
+  /* --- ie11 fallback --- */
+  height: 100%;
+  /* --------------------- */
+  height: min-content;
+  min-height: 832px;
+}
+
+/* 
+  mozilla specific styling
+  - supports min-content but it calculates dynamic
+  flex child height differently than chromium browsers
+*/
+@supports (-moz-appearance:none) {
+  div.slidesRevisionContainer {
+    height: 100%;
+  } 
+}
+
+.fontBase {
+  font-family: "Gilroy";
+  user-select: none;
+}
+
+.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;
+}
+
+.reviewHeaderContainer {
+  width: 100%;
+}
+
+.congrats {
+  width: 100%;
+  height: 100%;
+  min-height: 832px;
+  position: absolute;
+}
+
+.playerBackground {
+  position: absolute;
+  display: block;
+  height: 100%;
+  min-height: 120vh;
+  top: 0;
+  left: 0;
+}
+
+.slideBase {
+  box-shadow: 0px 4px 58px rgba(0, 0, 0, 0.05);
+  background: white;
+  height: 706px;
+  border-radius: 24px;
+  overflow: hidden;
+  position: absolute;
+
+  align-items: center;
+  display: flex;
+  flex-direction: column;
+  justify-content: flex-start;
+  transition: transform 0.5s ease-in;
+  pointer-events: none;
+}
+
+
+.position0 {
+  z-index: 50;
+  width: 100%;
+  transform: translate(0, 0);
+  transition: transform 0.5s ease-in;
+}
+
+.slideBase.position0 {
+  pointer-events: auto;
+}
+
+.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;
+}
+
+
+.slideContentContainer {
+  margin-top: 15px;
+  height: 563px;
+  display: flex;
+  justify-items: center;
+  align-items: center;
+  flex-direction: column;
+  overflow-y: auto;
+  position: relative;
+}
+
+/* ie fallback */
+_:-ms-fullscreen, :root .slideContentContainer {
+  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 {
+  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: 70%;
+  width: 100%;
+  padding: 0 9px;
+  box-sizing: border-box;
+}
+
+.questionOrigin {
+  composes: fontBase;
+  font-size: 15px;
+  color: cm_blue_900;
+  margin-top: 49px;
+  text-align: center;
+}
+
+.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: 70%;
+  width: 100%;
+}
+
+/* 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, -40px, 0);
+  }
+}
+
+.correctionPopinWrapper {
+  position: absolute;
+  bottom: 0px;
+  border-radius: 7px;
+  margin: 0 15px;
+  width: 95%;
+  animation: popInAnimation 0.5s ease-out forwards;
+}
+
+/* ie fallback */
+_:-ms-fullscreen, :root .correctionPopinWrapper {
+  left: 15px;
+}
+
+@keyframes popOutAnimation {
+  from {
+    transform: translate3d(0, -40px, 0);
+  }
+  to {
+    transform: translate3d(0, 200px, 0);
+  }
+}
+
+.hiddenCorrectionPopinWrapper {
+  composes: correctionPopinWrapper;
+  animation: popOutAnimation 0.5s ease-out forwards;
+}
+
+.validateButton {
+  color: white;
+  transition: opacity 0.25s ease-in;
+}
+
+.validateButton:hover {
+  opacity: 0.8;
+}
+
+@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;
+  }
+
+  .slideContentContainer {
+    height: 473px;
+  }
+  
+
+  @keyframes popInAnimation {
+    from {
+      transform: translate3d(0, 400px, 0);
+    }
+    to {
+      transform: translate3d(0, -40px, 0);
+    }
+  }
+
+  @keyframes popOutAnimation {
+    from {
+      transform: translate3d(0, -40px, 0);
+    }
+    to {
+      transform: translate3d(0, 400px, 0);
+    }
+  }
+}
+
+@media mobile {
+  .stackedSlidesContainer {
+    height: 670px;
+    max-width: 335px;
+  }
+
+  .slideBase {
+    height: 654px;
+  }
+
+  .slideContentContainer {
+    height: 511px;
+  }
+  
+
+  @keyframes popInAnimation {
+    from {
+      transform: translate3d(0, 500px, 0);
+    }
+    to {
+      transform: translate3d(0, -40px, 0);
+    }
+  }
+
+  @keyframes popOutAnimation {
+    from {
+      transform: translate3d(0, -40px, 0);
+    }
+    to {
+      transform: translate3d(0, 500px, 0);
+    }
+  }
+}

package/es/template/battle-requests/index.js

@@ -5,7 +5,6 @@ import classnames from 'classnames';
 import Provider from '../../atom/provider';
 import CardWithButton from '../../molecule/card-with-button';
 import Avatar from '../../atom/avatar';
-import { innerHTML } from '../../atom/label/style.css';
 import style from './style.css';
 
 const Battles = (props, context) => {
@@ -43,7 +42,7 @@ const Battles = (props, context) => {
     }, /*#__PURE__*/React.createElement(Avatar, {
       url: battle.urlAvatar
     })), /*#__PURE__*/React.createElement("div", {
-      className: classnames(style.wrapper, innerHTML) // eslint-disable-next-line react/no-danger
+      className: classnames(style.wrapper, style.innerHTML) // eslint-disable-next-line react/no-danger
       ,
       dangerouslySetInnerHTML: {
         __html: challengeLabel

package/es/template/battle-requests/index.js.map

@@ -1 +1 @@
-{"version":3,"sources":["../../../src/template/battle-requests/index.js"],"names":["React","PropTypes","classnames","Provider","CardWithButton","Avatar","innerHTML","style","Battles","props","context","translate","battles","trads","cards","battle","challengeLabel","username","courseName","battleCardProps","primaryButtonLabel","battleCTA","lightButtonLabel","reviewCTA","tagLabel","onLightButtonClick","onPrimaryButtonClick","backgroundImg","id","cardsItem","card","injection","urlAvatar","wrapper","__html","contextTypes","childContextTypes","propTypes","arrayOf","shape","isRequired","string"],"mappings":"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","sourcesContent":["import React from 'react';\nimport PropTypes from 'prop-types';\nimport {map} from 'lodash/fp';\nimport classnames from 'classnames';\nimport Provider from '../../atom/provider';\nimport CardWithButton from '../../molecule/card-with-button';\nimport Avatar from '../../atom/avatar';\nimport {innerHTML} from '../../atom/label/style.css';\nimport style from './style.css';\n\nconst Battles = (props, context) => {\n  const {translate} = context;\n  const {battles, trads} = props;\n  return (\n    <ul className={style.cards}>\n      {map(battle => {\n        const challengeLabel = translate('is challenging you', {\n          username: `<strong>${battle.username}</strong>`,\n          courseName: `<p><strong>${battle.courseName}</strong></p>`\n        });\n        const battleCardProps = {\n          username: battle.username,\n          courseName: battle.courseName,\n          primaryButtonLabel: trads.battleCTA,\n          lightButtonLabel: trads.reviewCTA,\n          tagLabel: battle.tagLabel,\n          onLightButtonClick: battle.onLightButtonClick,\n          onPrimaryButtonClick: battle.onPrimaryButtonClick,\n          backgroundImg: battle.backgroundImg\n        };\n        return (\n          <li key={battle.id} className={style.cardsItem}>\n            <div className={style.card}>\n              <CardWithButton {...battleCardProps}>\n                <div className={style.injection}>\n                  <Avatar url={battle.urlAvatar} />\n                </div>\n                <div\n                  className={classnames(style.wrapper, innerHTML)}\n                  // eslint-disable-next-line react/no-danger\n                  dangerouslySetInnerHTML={{__html: challengeLabel}}\n                />\n              </CardWithButton>\n            </div>\n          </li>\n        );\n      }, battles)}\n    </ul>\n  );\n};\n\nBattles.contextTypes = {\n  translate: Provider.childContextTypes.translate\n};\n\nBattles.propTypes = {\n  battles: PropTypes.arrayOf(\n    PropTypes.shape({\n      username: CardWithButton.propTypes.username,\n      courseName: CardWithButton.propTypes.courseName,\n      tagLabel: CardWithButton.propTypes.tagLabel,\n      onLightButtonClick: CardWithButton.propTypes.onLightButtonClick,\n      onPrimaryButtonClick: CardWithButton.propTypes.onPrimaryButtonClick,\n      backgroundImg: CardWithButton.propTypes.backgroundImg\n    })\n  ).isRequired,\n  trads: PropTypes.shape({\n    battleCTA: PropTypes.string.isRequired,\n    reviewCTA: PropTypes.string.isRequired\n  }).isRequired\n};\n\nexport default Battles;\n"],"file":"index.js"}
+{"version":3,"sources":["../../../src/template/battle-requests/index.js"],"names":["React","PropTypes","classnames","Provider","CardWithButton","Avatar","style","Battles","props","context","translate","battles","trads","cards","battle","challengeLabel","username","courseName","battleCardProps","primaryButtonLabel","battleCTA","lightButtonLabel","reviewCTA","tagLabel","onLightButtonClick","onPrimaryButtonClick","backgroundImg","id","cardsItem","card","injection","urlAvatar","wrapper","innerHTML","__html","contextTypes","childContextTypes","propTypes","arrayOf","shape","isRequired","string"],"mappings":"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","sourcesContent":["import React from 'react';\nimport PropTypes from 'prop-types';\nimport {map} from 'lodash/fp';\nimport classnames from 'classnames';\nimport Provider from '../../atom/provider';\nimport CardWithButton from '../../molecule/card-with-button';\nimport Avatar from '../../atom/avatar';\nimport style from './style.css';\n\nconst Battles = (props, context) => {\n  const {translate} = context;\n  const {battles, trads} = props;\n  return (\n    <ul className={style.cards}>\n      {map(battle => {\n        const challengeLabel = translate('is challenging you', {\n          username: `<strong>${battle.username}</strong>`,\n          courseName: `<p><strong>${battle.courseName}</strong></p>`\n        });\n        const battleCardProps = {\n          username: battle.username,\n          courseName: battle.courseName,\n          primaryButtonLabel: trads.battleCTA,\n          lightButtonLabel: trads.reviewCTA,\n          tagLabel: battle.tagLabel,\n          onLightButtonClick: battle.onLightButtonClick,\n          onPrimaryButtonClick: battle.onPrimaryButtonClick,\n          backgroundImg: battle.backgroundImg\n        };\n        return (\n          <li key={battle.id} className={style.cardsItem}>\n            <div className={style.card}>\n              <CardWithButton {...battleCardProps}>\n                <div className={style.injection}>\n                  <Avatar url={battle.urlAvatar} />\n                </div>\n                <div\n                  className={classnames(style.wrapper, style.innerHTML)}\n                  // eslint-disable-next-line react/no-danger\n                  dangerouslySetInnerHTML={{__html: challengeLabel}}\n                />\n              </CardWithButton>\n            </div>\n          </li>\n        );\n      }, battles)}\n    </ul>\n  );\n};\n\nBattles.contextTypes = {\n  translate: Provider.childContextTypes.translate\n};\n\nBattles.propTypes = {\n  battles: PropTypes.arrayOf(\n    PropTypes.shape({\n      username: CardWithButton.propTypes.username,\n      courseName: CardWithButton.propTypes.courseName,\n      tagLabel: CardWithButton.propTypes.tagLabel,\n      onLightButtonClick: CardWithButton.propTypes.onLightButtonClick,\n      onPrimaryButtonClick: CardWithButton.propTypes.onPrimaryButtonClick,\n      backgroundImg: CardWithButton.propTypes.backgroundImg\n    })\n  ).isRequired,\n  trads: PropTypes.shape({\n    battleCTA: PropTypes.string.isRequired,\n    reviewCTA: PropTypes.string.isRequired\n  }).isRequired\n};\n\nexport default Battles;\n"],"file":"index.js"}

package/es/template/battle-requests/style.css

@@ -72,3 +72,7 @@
   justify-content: center;
   align-items: center;
 }
+
+.innerHTML {
+  composes: innerHTML from '../../atom/label/style.css'
+}

package/es/template/external-course/index.js

@@ -16,7 +16,6 @@ import { EXTERNAL_CONTENT_ICONS } from '../../util/external-content';
 import Provider from '../../atom/provider';
 import Loader from '../../atom/loader';
 import Button from '../../atom/button';
-import { innerHTML } from '../../atom/label/style.css';
 import ExternalContentViewer from '../../molecule/external-content-viewer';
 import style from './style.css';
 const defaultWrapperStyle = {
@@ -105,7 +104,7 @@ class ExternalCourse extends React.Component {
     }, /*#__PURE__*/React.createElement(IconType, {
       className: style.iconHeader
     })), /*#__PURE__*/React.createElement("span", {
-      className: innerHTML // eslint-disable-next-line react/no-danger
+      className: style.innerHTML // eslint-disable-next-line react/no-danger
       ,
       dangerouslySetInnerHTML: {
         __html: name

package/es/template/external-course/index.js.map

@@ -1 +1 @@
-{"version":3,"sources":["../../../src/template/external-course/index.js"],"names":["React","NovaSolidInterfaceFeedbackInterfaceQuestionMark","QuestionIcon","convert","classnames","PropTypes","EXTERNAL_CONTENT_ICONS","Provider","Loader","Button","innerHTML","ExternalContentViewer","style","defaultWrapperStyle","default","cockpit","defaultCockpit","mobile","ExternalCourse","Component","field","e","stopPropagation","preventDefault","onClick","render","name","type","url","warning","complete","quit","loading","backgroundImageUrl","contentType","mode","props","skin","context","primary","IconType","icon","IconColor","color","mainContentSlot","loader","completeButton","disabled","handleOnClick","label","backgroundColor","cursor","completeCta","warningButton","leftSection","iconLabel","link","iconQuestion","quitButton","quitCta","titleSection","title","oval","iconHeader","__html","header","rightSection","footer","childContextTypes","propTypes","string","oneOf","isRequired","shape","func","bool"],"mappings":"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","sourcesContent":["import React from 'react';\nimport {NovaSolidInterfaceFeedbackInterfaceQuestionMark as QuestionIcon} from '@coorpacademy/nova-icons';\nimport {convert} from 'css-color-function';\nimport classnames from 'classnames';\nimport {get, getOr, keys, identity, isNil, isEmpty} from 'lodash/fp';\nimport PropTypes from 'prop-types';\nimport {EXTERNAL_CONTENT_ICONS} from '../../util/external-content';\nimport Provider from '../../atom/provider';\nimport Loader from '../../atom/loader';\nimport Button from '../../atom/button';\nimport {innerHTML} from '../../atom/label/style.css';\nimport ExternalContentViewer from '../../molecule/external-content-viewer';\nimport style from './style.css';\n\nconst defaultWrapperStyle = {\n  default: style.default,\n  cockpit: style.defaultCockpit,\n  mobile: style.default\n};\n\nclass ExternalCourse extends React.Component {\n  static propTypes = {\n    name: PropTypes.string,\n    type: PropTypes.oneOf(keys(EXTERNAL_CONTENT_ICONS)),\n    url: PropTypes.string.isRequired,\n    quit: PropTypes.shape({\n      label: PropTypes.string.isRequired,\n      onClick: PropTypes.func\n    }),\n    complete: PropTypes.shape({\n      label: PropTypes.string.isRequired,\n      disabled: PropTypes.bool,\n      onClick: PropTypes.func\n    }),\n    warning: PropTypes.shape({\n      label: PropTypes.string.isRequired,\n      onClick: PropTypes.func\n    }),\n    loading: PropTypes.bool,\n    backgroundImageUrl: PropTypes.string,\n    contentType: PropTypes.string,\n    mode: PropTypes.string\n  };\n\n  static contextTypes = {\n    skin: Provider.childContextTypes.skin\n  };\n\n  handleOnClick = field => e => {\n    e.stopPropagation();\n    e.preventDefault();\n    const onClick = get('onClick', field);\n    return onClick && onClick(e);\n  };\n\n  render() {\n    const {\n      name,\n      type,\n      url,\n      warning,\n      complete,\n      quit,\n      loading,\n      backgroundImageUrl,\n      contentType,\n      mode = 'default'\n    } = this.props;\n    const {skin} = this.context;\n    const primary = getOr('#00B0FF', 'common.primary', skin);\n    const IconType = EXTERNAL_CONTENT_ICONS[type].icon;\n    const IconColor = EXTERNAL_CONTENT_ICONS[type].color;\n\n    const mainContentSlot = loading ? (\n      <div className={style.loader}>\n        <Loader />\n      </div>\n    ) : (\n      <ExternalContentViewer\n        url={url}\n        mode={mode}\n        backgroundImageUrl={backgroundImageUrl}\n        contentType={contentType}\n      />\n    );\n\n    const completeButton = !isNil(complete) ? (\n      <Button\n        type=\"button\"\n        disabled={loading ? true : complete.disabled}\n        onClick={loading ? identity : this.handleOnClick(complete)}\n        submitValue={complete.label}\n        style={{\n          backgroundColor:\n            complete.disabled || loading ? convert(`color(${primary} a(-50%))`) : primary,\n          cursor: loading ? 'progress' : 'pointer'\n        }}\n        className={classnames(\n          style.completeCta,\n          complete.disabled || loading ? style.disabled : null,\n          loading ? style.loading : null\n        )}\n      />\n    ) : null;\n\n    const warningButton = !isNil(warning) ? (\n      <div className={style.leftSection}>\n        <div\n          onClick={this.handleOnClick(warning)}\n          className={classnames(style.iconLabel, style.link)}\n        >\n          <QuestionIcon className={style.iconQuestion} width={24} height={24} />\n          <span>{warning.label}</span>\n        </div>\n      </div>\n    ) : null;\n\n    const quitButton = !isNil(quit) ? (\n      <div className={style.leftSection}>\n        <span\n          className={classnames(style.quitCta, loading ? style.loading : null)}\n          onClick={loading ? identity : this.handleOnClick(quit)}\n        >\n          {quit.label}\n        </span>\n      </div>\n    ) : null;\n\n    const titleSection = !isNil(name) ? (\n      <div className={classnames(style.iconLabel, style.title)}>\n        <div className={style.oval} style={{backgroundColor: IconColor}}>\n          <IconType className={style.iconHeader} />\n        </div>\n        <span\n          className={innerHTML}\n          // eslint-disable-next-line react/no-danger\n          dangerouslySetInnerHTML={{__html: name}}\n        />\n      </div>\n    ) : null;\n\n    const header =\n      !isNil(quit) || !isEmpty(name) ? (\n        <div className={style.header}>\n          {quitButton}\n          {titleSection}\n          {isNil(quit) ? null : <div className={style.rightSection} />}\n        </div>\n      ) : null;\n\n    const footer =\n      !isNil(warning) || !isNil(complete) ? (\n        <div className={style.footer}>\n          {warningButton}\n          {completeButton}\n          {isNil(warning) ? null : <div className={style.rightSection} />}\n        </div>\n      ) : null;\n\n    return (\n      <div className={defaultWrapperStyle[mode]}>\n        {header}\n        {mainContentSlot}\n        {footer}\n      </div>\n    );\n  }\n}\n\nexport default ExternalCourse;\n"],"file":"index.js"}
+{"version":3,"sources":["../../../src/template/external-course/index.js"],"names":["React","NovaSolidInterfaceFeedbackInterfaceQuestionMark","QuestionIcon","convert","classnames","PropTypes","EXTERNAL_CONTENT_ICONS","Provider","Loader","Button","ExternalContentViewer","style","defaultWrapperStyle","default","cockpit","defaultCockpit","mobile","ExternalCourse","Component","field","e","stopPropagation","preventDefault","onClick","render","name","type","url","warning","complete","quit","loading","backgroundImageUrl","contentType","mode","props","skin","context","primary","IconType","icon","IconColor","color","mainContentSlot","loader","completeButton","disabled","handleOnClick","label","backgroundColor","cursor","completeCta","warningButton","leftSection","iconLabel","link","iconQuestion","quitButton","quitCta","titleSection","title","oval","iconHeader","innerHTML","__html","header","rightSection","footer","childContextTypes","propTypes","string","oneOf","isRequired","shape","func","bool"],"mappings":"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","sourcesContent":["import React from 'react';\nimport {NovaSolidInterfaceFeedbackInterfaceQuestionMark as QuestionIcon} from '@coorpacademy/nova-icons';\nimport {convert} from 'css-color-function';\nimport classnames from 'classnames';\nimport {get, getOr, keys, identity, isNil, isEmpty} from 'lodash/fp';\nimport PropTypes from 'prop-types';\nimport {EXTERNAL_CONTENT_ICONS} from '../../util/external-content';\nimport Provider from '../../atom/provider';\nimport Loader from '../../atom/loader';\nimport Button from '../../atom/button';\nimport ExternalContentViewer from '../../molecule/external-content-viewer';\nimport style from './style.css';\n\nconst defaultWrapperStyle = {\n  default: style.default,\n  cockpit: style.defaultCockpit,\n  mobile: style.default\n};\n\nclass ExternalCourse extends React.Component {\n  static propTypes = {\n    name: PropTypes.string,\n    type: PropTypes.oneOf(keys(EXTERNAL_CONTENT_ICONS)),\n    url: PropTypes.string.isRequired,\n    quit: PropTypes.shape({\n      label: PropTypes.string.isRequired,\n      onClick: PropTypes.func\n    }),\n    complete: PropTypes.shape({\n      label: PropTypes.string.isRequired,\n      disabled: PropTypes.bool,\n      onClick: PropTypes.func\n    }),\n    warning: PropTypes.shape({\n      label: PropTypes.string.isRequired,\n      onClick: PropTypes.func\n    }),\n    loading: PropTypes.bool,\n    backgroundImageUrl: PropTypes.string,\n    contentType: PropTypes.string,\n    mode: PropTypes.string\n  };\n\n  static contextTypes = {\n    skin: Provider.childContextTypes.skin\n  };\n\n  handleOnClick = field => e => {\n    e.stopPropagation();\n    e.preventDefault();\n    const onClick = get('onClick', field);\n    return onClick && onClick(e);\n  };\n\n  render() {\n    const {\n      name,\n      type,\n      url,\n      warning,\n      complete,\n      quit,\n      loading,\n      backgroundImageUrl,\n      contentType,\n      mode = 'default'\n    } = this.props;\n    const {skin} = this.context;\n    const primary = getOr('#00B0FF', 'common.primary', skin);\n    const IconType = EXTERNAL_CONTENT_ICONS[type].icon;\n    const IconColor = EXTERNAL_CONTENT_ICONS[type].color;\n\n    const mainContentSlot = loading ? (\n      <div className={style.loader}>\n        <Loader />\n      </div>\n    ) : (\n      <ExternalContentViewer\n        url={url}\n        mode={mode}\n        backgroundImageUrl={backgroundImageUrl}\n        contentType={contentType}\n      />\n    );\n\n    const completeButton = !isNil(complete) ? (\n      <Button\n        type=\"button\"\n        disabled={loading ? true : complete.disabled}\n        onClick={loading ? identity : this.handleOnClick(complete)}\n        submitValue={complete.label}\n        style={{\n          backgroundColor:\n            complete.disabled || loading ? convert(`color(${primary} a(-50%))`) : primary,\n          cursor: loading ? 'progress' : 'pointer'\n        }}\n        className={classnames(\n          style.completeCta,\n          complete.disabled || loading ? style.disabled : null,\n          loading ? style.loading : null\n        )}\n      />\n    ) : null;\n\n    const warningButton = !isNil(warning) ? (\n      <div className={style.leftSection}>\n        <div\n          onClick={this.handleOnClick(warning)}\n          className={classnames(style.iconLabel, style.link)}\n        >\n          <QuestionIcon className={style.iconQuestion} width={24} height={24} />\n          <span>{warning.label}</span>\n        </div>\n      </div>\n    ) : null;\n\n    const quitButton = !isNil(quit) ? (\n      <div className={style.leftSection}>\n        <span\n          className={classnames(style.quitCta, loading ? style.loading : null)}\n          onClick={loading ? identity : this.handleOnClick(quit)}\n        >\n          {quit.label}\n        </span>\n      </div>\n    ) : null;\n\n    const titleSection = !isNil(name) ? (\n      <div className={classnames(style.iconLabel, style.title)}>\n        <div className={style.oval} style={{backgroundColor: IconColor}}>\n          <IconType className={style.iconHeader} />\n        </div>\n        <span\n          className={style.innerHTML}\n          // eslint-disable-next-line react/no-danger\n          dangerouslySetInnerHTML={{__html: name}}\n        />\n      </div>\n    ) : null;\n\n    const header =\n      !isNil(quit) || !isEmpty(name) ? (\n        <div className={style.header}>\n          {quitButton}\n          {titleSection}\n          {isNil(quit) ? null : <div className={style.rightSection} />}\n        </div>\n      ) : null;\n\n    const footer =\n      !isNil(warning) || !isNil(complete) ? (\n        <div className={style.footer}>\n          {warningButton}\n          {completeButton}\n          {isNil(warning) ? null : <div className={style.rightSection} />}\n        </div>\n      ) : null;\n\n    return (\n      <div className={defaultWrapperStyle[mode]}>\n        {header}\n        {mainContentSlot}\n        {footer}\n      </div>\n    );\n  }\n}\n\nexport default ExternalCourse;\n"],"file":"index.js"}

package/es/template/external-course/style.css

@@ -139,3 +139,7 @@
     display: none;
   }
 }
+
+.innerHTML {
+  composes: innerHTML from '../../atom/label/style.css'
+}