@coorpacademy/components 10.20.0-alpha.0 → 10.21.1

package/lib/template/app-review/slides/index.native.js.map

@@ -0,0 +1 @@
+{"version":3,"sources":["../../../../src/template/app-review/slides/index.native.js"],"names":["quizzerStyle","StyleSheet","create","container","flex","padding","justifyContent","alignItems","SLIDE_HEIGHT","height","creatSlideStyle","num","width","slide","position","top","shadowColor","shadowOffset","shadowOpacity","shadowRadius","elevation","borderRadius","category","fontSize","lineHeight","textAlign","question","fontWeight","instruction","button","createOptionStyle","selected","box","marginTop","marginBottom","text","choicesStyle","Choices","choices","map","index","optionStyle","propTypes","PropTypes","arrayOf","bool","Slide","validateSlide","slideStyle","validateLabel","SlidesReviewPropTypes","number","Slides","slides","reverse","_slide","length"],"mappings":"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","sourcesContent":["import * as React from 'react';\nimport PropTypes from 'prop-types';\nimport {View, StyleSheet, Text, useWindowDimensions, Button} from 'react-native';\n\nimport {SlidesReviewPropTypes} from './prop-types';\n\n// import theme from '../../../modules/theme';\n// import translations from '../../../translations';\n// import {BrandThemeContext} from '../../../app-shared/components/brand-theme-provider';\n// import Button from '../../../app-shared/components/button';\n// import {HEADER_HEIGHT} from '../../../app-shared/components/header-v2';\n\n// export type _Choice_ = {\n//   text?: string,\n//   selected: boolean\n// };\n\n// export type _Slide_ = {\n//   category: string,\n//   question: string,\n//   instruction: string,\n//   type: 'multiSelection' | 'singleSelection' | 'trueOrFalse',\n//   choices?: _Choice_[]\n// };\n\n// interface Props {\n//   slide: _Slide_;\n//   num: number;\n// }\n\nconst quizzerStyle = StyleSheet.create({\n  container: {\n    flex: 1,\n    padding: 20,\n    // paddingTop: HEADER_HEIGHT + 20,      @todo with props\n    // backgroundColor: theme.colors.white, @todo with props\n    justifyContent: 'space-between',\n    alignItems: 'center'\n  }\n});\n\nconst SLIDE_HEIGHT = () => useWindowDimensions().height * 0.75;\n\n// const creatSlideStyle = (num: number) =>\nconst creatSlideStyle = (num, width, height) =>\n  StyleSheet.create({\n    slide: {\n      position: 'absolute',\n      // backgroundColor: theme.colors.white, @todo with props\n      top: height / 2 - SLIDE_HEIGHT() / 2 - num * 4,\n      flex: 1,\n      height: SLIDE_HEIGHT(),\n      width: width - 40 - num * 8,\n      justifyContent: 'space-between',\n      alignItems: 'center',\n      padding: 25,\n      shadowColor: '#000',\n      shadowOffset: {width: 0, height: -1},\n      shadowOpacity: 0.05,\n      shadowRadius: 16,\n      elevation: 10 - num * 1,\n      borderRadius: 16\n    },\n    category: {\n      fontSize: 12,\n      lineHeight: 16,\n      // color: theme.colors.text.primary, @todo with props\n      // marginBottom: theme.spacing.tiny, @todo with props\n      // marginTop: theme.spacing.small,   @todo with props\n      textAlign: 'center'\n    },\n    question: {\n      fontSize: 16,\n      lineHeight: 22,\n      fontWeight: '700',\n      // color: theme.colors.text.primary, @todo with props\n      textAlign: 'center'\n    },\n    instruction: {\n      fontSize: 12,\n      lineHeight: 16,\n      // color: theme.colors.gray.medium,  @todo with props\n      // marginBottom: theme.spacing.base, @todo with props\n      // marginTop: theme.spacing.small,   @todo with props\n      textAlign: 'center'\n    },\n    button: {\n      width: 287,\n      height: 52,\n      borderRadius: 7\n      // marginTop: theme.spacing.base  @todo with props\n    }\n  });\n\nconst createOptionStyle = selected => {\n  // const brandTheme = React.useContext(BrandThemeContext); @todo with props\n\n  return StyleSheet.create({\n    box: {\n      width: '100%',\n      // https://stackoverflow.com/a/66561995/959219\n      shadowColor: '#000',\n      shadowOffset: {width: 0, height: -1},\n      shadowOpacity: 0.2,\n      shadowRadius: 16,\n      elevation: 8,\n      // backgroundColor: selected ? brandTheme.colors.primary : theme.colors.white, @todo with props\n      padding: 12,\n      marginTop: 4,\n      marginBottom: 4,\n      borderRadius: 8\n    },\n    text: {\n      fontSize: 15,\n      fontWeight: 'bold',\n      lineHeight: 24,\n      // color: selected ? theme.colors.white : theme.colors.text.primary, @todo with props\n      textAlign: 'center'\n    }\n  });\n};\n\nconst choicesStyle = StyleSheet.create({\n  container: {\n    flex: 1,\n    width: '100%',\n    justifyContent: 'center',\n    alignItems: 'center'\n  }\n});\n\n// -----------------------------------------------------------------------------\n\n/* {choices.map(({text, selected = false}: _Choice_) => { */\nconst Choices = ({choices}) => (\n  <View style={choicesStyle.container}>\n    {choices.map(({text, selected = false}, index) => {\n      const optionStyle = createOptionStyle(selected);\n      return (\n        <View style={optionStyle.box} key={`choice-${index}`}>\n          <Text style={optionStyle.text}>\n            {text} {selected}\n          </Text>\n        </View>\n      );\n    })}\n  </View>\n);\n\nChoices.propTypes = {\n  choices: PropTypes.arrayOf({\n    text: PropTypes.text,\n    selected: PropTypes.bool\n  })\n};\n\n// -----------------------------------------------------------------------------\n\n// const Slide = ({slide, num}: Props) => {\nconst Slide = ({validateSlide, slide, num}) => {\n  const {width, height} = useWindowDimensions();\n  const slideStyle = creatSlideStyle(num, width, height);\n  const validateLabel = '__validate'; // translations.validate\n\n  // TODO replace choices with <Answer>; move mobile answers in the package..\n  return (\n    <View style={slideStyle.slide}>\n      <Text style={slideStyle.category}>\n        {slide.category} {num}\n      </Text>\n      <Text style={slideStyle.question}>{slide.question}</Text>\n      <Text style={slideStyle.instruction}>{slide.instruction}</Text>\n\n      <Choices choices={slide.choices} />\n\n      <Button style={slideStyle.button} onPress={validateSlide} testID={`button-quizzer-validate`}>\n        {validateLabel}\n      </Button>\n    </View>\n  );\n};\n\nSlide.propTypes = {\n  slide: SlidesReviewPropTypes.slide,\n  validateSlide: SlidesReviewPropTypes.validateSlide,\n  num: PropTypes.number\n};\n\n// -----------------------------------------------------------------------------\n\n// const Slides = ({slide}: Props) => {\nconst Slides = ({slide, validateSlide}) => {\n  const slides = [slide, slide, slide, slide, slide];\n  return (\n    <View style={quizzerStyle.container}>\n      {slides.reverse().map((_slide, index) => (\n        <Slide\n          validateSlide={validateSlide}\n          slide={_slide}\n          num={slides.length - index}\n          key={`slide-${index}`}\n        />\n      ))}\n    </View>\n  );\n};\n\nSlides.propTypes = SlidesReviewPropTypes;\n\n// -----------------------------------------------------------------------------\n\nexport default Slides;\n"],"file":"index.native.js"}

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

@@ -0,0 +1,131 @@
+"use strict";
+
+exports.__esModule = true;
+exports.StackedSlidesPropTypes = exports.SlidePropTypes = exports.SlidesReviewPropTypes = void 0;
+
+var _propTypes = _interopRequireDefault(require("prop-types"));
+
+var _omit = _interopRequireDefault(require("lodash/fp/omit"));
+
+var _reviewCongrats = _interopRequireDefault(require("../../../organism/review-congrats"));
+
+var _reviewCorrectionPopin = _interopRequireDefault(require("../../../molecule/review-correction-popin"));
+
+var _reviewBackground = _interopRequireDefault(require("../../../atom/review-background"));
+
+var _reviewHeader = _interopRequireDefault(require("../../../organism/review-header"));
+
+var _answer = _interopRequireDefault(require("../../../molecule/answer"));
+
+function _interopRequireDefault(obj) { return obj && obj.__esModule ? obj : { default: obj }; }
+
+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); }
+
+const NextSlideProp = _propTypes.default.shape({
+  hidden: _propTypes.default.bool,
+  position: _propTypes.default.number,
+  // 'unstack' | 'restack'
+  animationType: _propTypes.default.string,
+  // 'success' | 'failure'
+  validationResult: _propTypes.default.string,
+  endReview: _propTypes.default.bool,
+  questionText: _propTypes.default.string,
+  answerUI: _answer.default
+});
+
+const SlideProp = _propTypes.default.shape(_extends(_extends({}, NextSlideProp.props), {}, {
+  nextSlide: NextSlideProp
+}));
+
+const StepItemProp = _propTypes.default.shape({
+  current: _propTypes.default.bool,
+  icon: _propTypes.default.string,
+  value: _propTypes.default.string
+});
+
+const SlidesReviewPropTypes = {
+  headerProps: _propTypes.default.shape((0, _omit.default)('steps', _reviewHeader.default.propTypes)),
+  reviewBackgroundAriaLabel: _reviewBackground.default.propTypes['aria-label'],
+  validate: _propTypes.default.shape({
+    label: _propTypes.default.string
+  }),
+  slides: _propTypes.default.shape({
+    slideNumbers: _propTypes.default.arrayOf(_propTypes.default.number),
+    0: SlideProp,
+    1: SlideProp,
+    2: SlideProp,
+    3: SlideProp,
+    4: SlideProp
+  }),
+  finishedSlides: _propTypes.default.shape({
+    slideNumbers: _propTypes.default.arrayOf(_propTypes.default.number),
+    0: _propTypes.default.bool,
+    1: _propTypes.default.bool,
+    2: _propTypes.default.bool,
+    3: _propTypes.default.bool,
+    4: _propTypes.default.bool
+  }),
+  stepItems: _propTypes.default.shape({
+    slideNumbers: _propTypes.default.arrayOf(_propTypes.default.number),
+    0: StepItemProp,
+    1: StepItemProp,
+    2: StepItemProp,
+    3: StepItemProp,
+    4: StepItemProp
+  }),
+  // 'finished' | 'ongoing'
+  reviewStatus: _propTypes.default.string,
+  correctionPopinProps: _propTypes.default.shape({
+    // ---------------
+    klf: _reviewCorrectionPopin.default.propTypes.klf,
+    information: _reviewCorrectionPopin.default.propTypes.information,
+    next: _propTypes.default.shape({
+      label: _propTypes.default.string,
+      'aria-label': _propTypes.default.string
+    }),
+    successLabel: _reviewCorrectionPopin.default.propTypes.resultLabel,
+    failureLabel: _reviewCorrectionPopin.default.propTypes.resultLabel
+  }),
+  congratsProps: _propTypes.default.shape(_reviewCongrats.default.propTypes),
+  slideValidationResult: _propTypes.default.shape({
+    slideNumber: _propTypes.default.number,
+    // 'success' | 'failure'
+    result: _propTypes.default.string,
+    // 'successExitNode' | 'failExitNode'
+    exitNode: _propTypes.default.string,
+    nextSlide: _propTypes.default.shape({
+      questionText: _propTypes.default.string,
+      answerUI: _propTypes.default.shape(_answer.default.propTypes)
+    })
+  }),
+  // ---------------------------------------------------------------------------
+  // Dispatchers
+  validateSlide: _propTypes.default.func.isRequired,
+  updateSlidesOnValidation: _propTypes.default.func.isRequired,
+  updateSlidesOnNext: _propTypes.default.func.isRequired,
+  updateReviewStatus: _propTypes.default.func.isRequired,
+  updateStepItemsOnValidation: _propTypes.default.func.isRequired,
+  updateStepItemsOnNext: _propTypes.default.func.isRequired,
+  updateFinishedSlides: _propTypes.default.func.isRequired
+};
+exports.SlidesReviewPropTypes = SlidesReviewPropTypes;
+const SlidePropTypes = {
+  slideNumber: _propTypes.default.number,
+  slides: SlidesReviewPropTypes.slides,
+  primarySkinColor: _propTypes.default.string,
+  validate: SlidesReviewPropTypes.validate,
+  finishedSlides: SlidesReviewPropTypes.finishedSlides,
+  finishedSlidesSize: _propTypes.default.number,
+  correctionPopinProps: SlidesReviewPropTypes.correctionPopinProps,
+  // ---------------
+  // Dispatchers
+  validateSlide: SlidesReviewPropTypes.validateSlide,
+  updateSlidesOnNext: SlidesReviewPropTypes.updateSlidesOnNext,
+  updateReviewStatus: SlidesReviewPropTypes.updateReviewStatus,
+  updateStepItemsOnNext: SlidesReviewPropTypes.updateStepItemsOnNext,
+  slideValidationResult: SlidesReviewPropTypes.slideValidationResult
+};
+exports.SlidePropTypes = SlidePropTypes;
+const StackedSlidesPropTypes = (0, _omit.default)('slideNumber', SlidePropTypes);
+exports.StackedSlidesPropTypes = StackedSlidesPropTypes;
+//# sourceMappingURL=prop-types.js.map

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

@@ -0,0 +1 @@
+{"version":3,"sources":["../../../../src/template/app-review/slides/prop-types.js"],"names":["NextSlideProp","PropTypes","shape","hidden","bool","position","number","animationType","string","validationResult","endReview","questionText","answerUI","Answer","SlideProp","props","nextSlide","StepItemProp","current","icon","value","SlidesReviewPropTypes","headerProps","ReviewHeader","propTypes","reviewBackgroundAriaLabel","ReviewBackground","validate","label","slides","slideNumbers","arrayOf","finishedSlides","stepItems","reviewStatus","correctionPopinProps","klf","ReviewCorrectionPopin","information","next","successLabel","resultLabel","failureLabel","congratsProps","ReviewCongrats","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/lib/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/lib/template/battle-requests/index.js

@@ -17,9 +17,7 @@ var _cardWithButton = _interopRequireDefault(require("../../molecule/card-with-b
 
 var _avatar = _interopRequireDefault(require("../../atom/avatar"));
 
-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 }; }
 
@@ -32,7 +30,7 @@ const Battles = (props, context) => {
     trads
   } = props;
   return /*#__PURE__*/_react.default.createElement("ul", {
-    className: _style2.default.cards
+    className: _style.default.cards
   }, (0, _map2.default)(battle => {
     const challengeLabel = translate('is challenging you', {
       username: `<strong>${battle.username}</strong>`,
@@ -50,15 +48,15 @@ const Battles = (props, context) => {
     };
     return /*#__PURE__*/_react.default.createElement("li", {
       key: battle.id,
-      className: _style2.default.cardsItem
+      className: _style.default.cardsItem
     }, /*#__PURE__*/_react.default.createElement("div", {
-      className: _style2.default.card
+      className: _style.default.card
     }, /*#__PURE__*/_react.default.createElement(_cardWithButton.default, battleCardProps, /*#__PURE__*/_react.default.createElement("div", {
-      className: _style2.default.injection
+      className: _style.default.injection
     }, /*#__PURE__*/_react.default.createElement(_avatar.default, {
       url: battle.urlAvatar
     })), /*#__PURE__*/_react.default.createElement("div", {
-      className: (0, _classnames.default)(_style2.default.wrapper, _style.innerHTML) // eslint-disable-next-line react/no-danger
+      className: (0, _classnames.default)(_style.default.wrapper, _style.default.innerHTML) // eslint-disable-next-line react/no-danger
       ,
       dangerouslySetInnerHTML: {
         __html: challengeLabel

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

@@ -1 +1 @@
-{"version":3,"sources":["../../../src/template/battle-requests/index.js"],"names":["Battles","props","context","translate","battles","trads","style","cards","battle","challengeLabel","username","courseName","battleCardProps","primaryButtonLabel","battleCTA","lightButtonLabel","reviewCTA","tagLabel","onLightButtonClick","onPrimaryButtonClick","backgroundImg","id","cardsItem","card","injection","urlAvatar","wrapper","innerHTML","__html","contextTypes","Provider","childContextTypes","propTypes","PropTypes","arrayOf","shape","CardWithButton","isRequired","string"],"mappings":";;;;;;;AAAA;;AACA;;AAEA;;AACA;;AACA;;AACA;;AACA;;AACA;;;;AAEA,MAAMA,OAAO,GAAG,CAACC,KAAD,EAAQC,OAAR,KAAoB;AAClC,QAAM;AAACC,IAAAA;AAAD,MAAcD,OAApB;AACA,QAAM;AAACE,IAAAA,OAAD;AAAUC,IAAAA;AAAV,MAAmBJ,KAAzB;AACA,sBACE;AAAI,IAAA,SAAS,EAAEK,gBAAMC;AAArB,KACG,mBAAIC,MAAM,IAAI;AACb,UAAMC,cAAc,GAAGN,SAAS,CAAC,oBAAD,EAAuB;AACrDO,MAAAA,QAAQ,EAAG,WAAUF,MAAM,CAACE,QAAS,WADgB;AAErDC,MAAAA,UAAU,EAAG,cAAaH,MAAM,CAACG,UAAW;AAFS,KAAvB,CAAhC;AAIA,UAAMC,eAAe,GAAG;AACtBF,MAAAA,QAAQ,EAAEF,MAAM,CAACE,QADK;AAEtBC,MAAAA,UAAU,EAAEH,MAAM,CAACG,UAFG;AAGtBE,MAAAA,kBAAkB,EAAER,KAAK,CAACS,SAHJ;AAItBC,MAAAA,gBAAgB,EAAEV,KAAK,CAACW,SAJF;AAKtBC,MAAAA,QAAQ,EAAET,MAAM,CAACS,QALK;AAMtBC,MAAAA,kBAAkB,EAAEV,MAAM,CAACU,kBANL;AAOtBC,MAAAA,oBAAoB,EAAEX,MAAM,CAACW,oBAPP;AAQtBC,MAAAA,aAAa,EAAEZ,MAAM,CAACY;AARA,KAAxB;AAUA,wBACE;AAAI,MAAA,GAAG,EAAEZ,MAAM,CAACa,EAAhB;AAAoB,MAAA,SAAS,EAAEf,gBAAMgB;AAArC,oBACE;AAAK,MAAA,SAAS,EAAEhB,gBAAMiB;AAAtB,oBACE,6BAAC,uBAAD,EAAoBX,eAApB,eACE;AAAK,MAAA,SAAS,EAAEN,gBAAMkB;AAAtB,oBACE,6BAAC,eAAD;AAAQ,MAAA,GAAG,EAAEhB,MAAM,CAACiB;AAApB,MADF,CADF,eAIE;AACE,MAAA,SAAS,EAAE,yBAAWnB,gBAAMoB,OAAjB,EAA0BC,gBAA1B,CADb,CAEE;AAFF;AAGE,MAAA,uBAAuB,EAAE;AAACC,QAAAA,MAAM,EAAEnB;AAAT;AAH3B,MAJF,CADF,CADF,CADF;AAgBD,GA/BA,EA+BEL,OA/BF,CADH,CADF;AAoCD,CAvCD;;AAyCAJ,OAAO,CAAC6B,YAAR,GAAuB;AACrB1B,EAAAA,SAAS,EAAE2B,kBAASC,iBAAT,CAA2B5B;AADjB,CAAvB;AAIAH,OAAO,CAACgC,SAAR,2CAAoB;AAClB5B,EAAAA,OAAO,EAAE6B,mBAAUC,OAAV,CACPD,mBAAUE,KAAV,CAAgB;AACdzB,IAAAA,QAAQ,EAAE0B,wBAAeJ,SAAf,CAAyBtB,QADrB;AAEdC,IAAAA,UAAU,EAAEyB,wBAAeJ,SAAf,CAAyBrB,UAFvB;AAGdM,IAAAA,QAAQ,EAAEmB,wBAAeJ,SAAf,CAAyBf,QAHrB;AAIdC,IAAAA,kBAAkB,EAAEkB,wBAAeJ,SAAf,CAAyBd,kBAJ/B;AAKdC,IAAAA,oBAAoB,EAAEiB,wBAAeJ,SAAf,CAAyBb,oBALjC;AAMdC,IAAAA,aAAa,EAAEgB,wBAAeJ,SAAf,CAAyBZ;AAN1B,GAAhB,CADO,EASPiB,UAVgB;AAWlBhC,EAAAA,KAAK,EAAE4B,mBAAUE,KAAV,CAAgB;AACrBrB,IAAAA,SAAS,EAAEmB,mBAAUK,MAAV,CAAiBD,UADP;AAErBrB,IAAAA,SAAS,EAAEiB,mBAAUK,MAAV,CAAiBD;AAFP,GAAhB,EAGJA;AAde,CAApB;eAiBerC,O","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":["Battles","props","context","translate","battles","trads","style","cards","battle","challengeLabel","username","courseName","battleCardProps","primaryButtonLabel","battleCTA","lightButtonLabel","reviewCTA","tagLabel","onLightButtonClick","onPrimaryButtonClick","backgroundImg","id","cardsItem","card","injection","urlAvatar","wrapper","innerHTML","__html","contextTypes","Provider","childContextTypes","propTypes","PropTypes","arrayOf","shape","CardWithButton","isRequired","string"],"mappings":";;;;;;;AAAA;;AACA;;AAEA;;AACA;;AACA;;AACA;;AACA;;;;AAEA,MAAMA,OAAO,GAAG,CAACC,KAAD,EAAQC,OAAR,KAAoB;AAClC,QAAM;AAACC,IAAAA;AAAD,MAAcD,OAApB;AACA,QAAM;AAACE,IAAAA,OAAD;AAAUC,IAAAA;AAAV,MAAmBJ,KAAzB;AACA,sBACE;AAAI,IAAA,SAAS,EAAEK,eAAMC;AAArB,KACG,mBAAIC,MAAM,IAAI;AACb,UAAMC,cAAc,GAAGN,SAAS,CAAC,oBAAD,EAAuB;AACrDO,MAAAA,QAAQ,EAAG,WAAUF,MAAM,CAACE,QAAS,WADgB;AAErDC,MAAAA,UAAU,EAAG,cAAaH,MAAM,CAACG,UAAW;AAFS,KAAvB,CAAhC;AAIA,UAAMC,eAAe,GAAG;AACtBF,MAAAA,QAAQ,EAAEF,MAAM,CAACE,QADK;AAEtBC,MAAAA,UAAU,EAAEH,MAAM,CAACG,UAFG;AAGtBE,MAAAA,kBAAkB,EAAER,KAAK,CAACS,SAHJ;AAItBC,MAAAA,gBAAgB,EAAEV,KAAK,CAACW,SAJF;AAKtBC,MAAAA,QAAQ,EAAET,MAAM,CAACS,QALK;AAMtBC,MAAAA,kBAAkB,EAAEV,MAAM,CAACU,kBANL;AAOtBC,MAAAA,oBAAoB,EAAEX,MAAM,CAACW,oBAPP;AAQtBC,MAAAA,aAAa,EAAEZ,MAAM,CAACY;AARA,KAAxB;AAUA,wBACE;AAAI,MAAA,GAAG,EAAEZ,MAAM,CAACa,EAAhB;AAAoB,MAAA,SAAS,EAAEf,eAAMgB;AAArC,oBACE;AAAK,MAAA,SAAS,EAAEhB,eAAMiB;AAAtB,oBACE,6BAAC,uBAAD,EAAoBX,eAApB,eACE;AAAK,MAAA,SAAS,EAAEN,eAAMkB;AAAtB,oBACE,6BAAC,eAAD;AAAQ,MAAA,GAAG,EAAEhB,MAAM,CAACiB;AAApB,MADF,CADF,eAIE;AACE,MAAA,SAAS,EAAE,yBAAWnB,eAAMoB,OAAjB,EAA0BpB,eAAMqB,SAAhC,CADb,CAEE;AAFF;AAGE,MAAA,uBAAuB,EAAE;AAACC,QAAAA,MAAM,EAAEnB;AAAT;AAH3B,MAJF,CADF,CADF,CADF;AAgBD,GA/BA,EA+BEL,OA/BF,CADH,CADF;AAoCD,CAvCD;;AAyCAJ,OAAO,CAAC6B,YAAR,GAAuB;AACrB1B,EAAAA,SAAS,EAAE2B,kBAASC,iBAAT,CAA2B5B;AADjB,CAAvB;AAIAH,OAAO,CAACgC,SAAR,2CAAoB;AAClB5B,EAAAA,OAAO,EAAE6B,mBAAUC,OAAV,CACPD,mBAAUE,KAAV,CAAgB;AACdzB,IAAAA,QAAQ,EAAE0B,wBAAeJ,SAAf,CAAyBtB,QADrB;AAEdC,IAAAA,UAAU,EAAEyB,wBAAeJ,SAAf,CAAyBrB,UAFvB;AAGdM,IAAAA,QAAQ,EAAEmB,wBAAeJ,SAAf,CAAyBf,QAHrB;AAIdC,IAAAA,kBAAkB,EAAEkB,wBAAeJ,SAAf,CAAyBd,kBAJ/B;AAKdC,IAAAA,oBAAoB,EAAEiB,wBAAeJ,SAAf,CAAyBb,oBALjC;AAMdC,IAAAA,aAAa,EAAEgB,wBAAeJ,SAAf,CAAyBZ;AAN1B,GAAhB,CADO,EASPiB,UAVgB;AAWlBhC,EAAAA,KAAK,EAAE4B,mBAAUE,KAAV,CAAgB;AACrBrB,IAAAA,SAAS,EAAEmB,mBAAUK,MAAV,CAAiBD,UADP;AAErBrB,IAAAA,SAAS,EAAEiB,mBAAUK,MAAV,CAAiBD;AAFP,GAAhB,EAGJA;AAde,CAApB;eAiBerC,O","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/lib/template/battle-requests/style.css

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