@coorpacademy/components 10.22.8 → 10.22.11

package/es/organism/review-slide/index.js

@@ -0,0 +1,194 @@
+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, { useMemo } from 'react';
+import PropTypes from 'prop-types';
+import classnames from 'classnames';
+import get from 'lodash/fp/get';
+import getOr from 'lodash/fp/getOr';
+import Answer from '../../molecule/answer';
+import ButtonLink from '../../atom/button-link';
+import Loader from '../../atom/loader';
+import Provider from '../../atom/provider';
+import ReviewCorrectionPopin from '../../molecule/review-correction-popin';
+import propTypes from './prop-types';
+import style from './style.css';
+
+const CorrectionPopin = ({
+  correctionPopinProps,
+  slideIndex,
+  showCorrectionPopin,
+  animateCorrectionPopin
+}) => {
+  if (!showCorrectionPopin) return null;
+  const klf = getOr({}, 'klf', correctionPopinProps);
+  const information = getOr({
+    label: '',
+    message: ''
+  }, 'information', correctionPopinProps);
+  const next = get('next', correctionPopinProps);
+  const _correctionPopinProps = {
+    next: {
+      onClick: () => {
+        // eslint-disable-next-line no-console
+        console.log('Next Slide');
+      },
+      label: next && next.label,
+      'data-name': `next-question-button-${slideIndex}`,
+      'aria-label': next && next['aria-label']
+    },
+    klf,
+    information,
+    type: correctionPopinProps.type,
+    resultLabel: correctionPopinProps.resultLabel
+  };
+  return /*#__PURE__*/React.createElement("div", {
+    className: classnames(style.correctionPopinWrapper, animateCorrectionPopin ? style.popinAnimation : null)
+  }, /*#__PURE__*/React.createElement(ReviewCorrectionPopin, _correctionPopinProps));
+};
+
+CorrectionPopin.propTypes = process.env.NODE_ENV !== "production" ? {
+  slideIndex: PropTypes.string,
+  showCorrectionPopin: PropTypes.bool,
+  animateCorrectionPopin: PropTypes.bool,
+  correctionPopinProps: propTypes.correctionPopinProps
+} : {};
+
+const ValidateButton = ({
+  slideIndex,
+  validateButton,
+  primarySkinColor
+}) => {
+  const {
+    label,
+    onClick,
+    disabled
+  } = validateButton;
+  const validateButtonProps = {
+    type: 'primary',
+    label,
+    'aria-label': label,
+    'data-name': `slide-validate-button-${slideIndex}`,
+    onClick,
+    disabled,
+    className: style.validateButton,
+    customStyle: {
+      backgroundColor: primarySkinColor
+    }
+    /*
+      slide validation action, this will trigger the correction popin
+      (with the useEffect that fires the dispatchers, if there is a nextContent content,
+      it will be loaded here) but will not trigger any animations unless the endReview
+      signal is received (all slide will disappear, also fired in a useEffect),
+       if it is the last slide and the content needs to be different, then that update will
+      be handled on the next slide logic but the content will be carried from here.
+    onClick: async () => {
+      // endReview based on nextContent ref exit node values: 'successExitNode' : 'failExitNode'
+      await validateSlide();
+    },
+    */
+
+  };
+  return /*#__PURE__*/React.createElement("div", {
+    key: "button-wrapper",
+    className: style.validateButtonWrapper
+  }, /*#__PURE__*/React.createElement(ButtonLink, validateButtonProps));
+};
+
+ValidateButton.propTypes = process.env.NODE_ENV !== "production" ? {
+  slideIndex: PropTypes.string,
+  validateButton: propTypes.validateButton,
+  primarySkinColor: PropTypes.string
+} : {};
+
+const QuestionContainer = props => {
+  const {
+    answerUI,
+    questionText,
+    questionOrigin
+  } = props;
+  if (!answerUI || !questionText) return null;
+  const answerProps = get(['model', 'choices'], answerUI) ?
+  /* istanbul ignore next */
+  _extends(_extends({}, answerUI), {}, {
+    model: _extends(_extends({}, answerUI.model), {}, {
+      answers: answerUI.model.choices
+    })
+  }) : answerUI;
+  return /*#__PURE__*/React.createElement("div", {
+    key: "content-container",
+    className: style.slideContentContainer
+  }, /*#__PURE__*/React.createElement("div", {
+    key: "from-course",
+    className: style.questionOrigin
+  }, questionOrigin), /*#__PURE__*/React.createElement("div", {
+    key: "title",
+    className: style.question
+  }, questionText), /*#__PURE__*/React.createElement("div", {
+    key: "help",
+    className: style.help
+  }, get('help', answerUI)), /*#__PURE__*/React.createElement("div", {
+    key: "answer-container",
+    className: style.answerContainer
+  }, /*#__PURE__*/React.createElement(Answer, _extends({}, answerProps, {
+    key: "answer"
+  }))));
+};
+
+QuestionContainer.propTypes = process.env.NODE_ENV !== "production" ? {
+  answerUI: PropTypes.shape(propTypes.slide.answerUI),
+  questionText: PropTypes.string,
+  questionOrigin: PropTypes.string
+} : {};
+
+const Slide = (props, context) => {
+  const {
+    slide,
+    validateButton,
+    correctionPopinProps,
+    slideIndex = '0'
+  } = props;
+  const {
+    skin
+  } = context;
+  const primarySkinColor = useMemo(() => getOr('#00B0FF', 'common.primary', skin), [skin]);
+  const {
+    loading,
+    loadingAriaLabel,
+    parentContentTitle,
+    questionText,
+    answerUI,
+    showCorrectionPopin,
+    animateCorrectionPopin
+  } = slide;
+  return /*#__PURE__*/React.createElement("div", {
+    "data-name": `slide-container`,
+    className: style.slide
+  }, loading ? /*#__PURE__*/React.createElement(Loader, {
+    className: style.loader,
+    theme: "default",
+    "aria-label": loadingAriaLabel
+  }) : [/*#__PURE__*/React.createElement(QuestionContainer, {
+    questionOrigin: parentContentTitle,
+    questionText: questionText,
+    answerUI: answerUI,
+    key: "question-container"
+  }), /*#__PURE__*/React.createElement(ValidateButton, {
+    slideIndex: slideIndex,
+    validateButton: validateButton,
+    primarySkinColor: primarySkinColor,
+    key: "validate-button"
+  }), /*#__PURE__*/React.createElement(CorrectionPopin, {
+    correctionPopinProps: correctionPopinProps,
+    slideIndex: slideIndex,
+    showCorrectionPopin: showCorrectionPopin,
+    animateCorrectionPopin: animateCorrectionPopin,
+    key: "correction-popin"
+  })]);
+};
+
+Slide.propTypes = process.env.NODE_ENV !== "production" ? propTypes : {};
+Slide.contextTypes = {
+  skin: Provider.childContextTypes.skin
+};
+export default Slide;
+//# sourceMappingURL=index.js.map

package/es/organism/review-slide/index.js.map

@@ -0,0 +1 @@
+{"version":3,"sources":["../../../src/organism/review-slide/index.js"],"names":["React","useMemo","PropTypes","classnames","get","getOr","Answer","ButtonLink","Loader","Provider","ReviewCorrectionPopin","propTypes","style","CorrectionPopin","correctionPopinProps","slideIndex","showCorrectionPopin","animateCorrectionPopin","klf","information","label","message","next","_correctionPopinProps","onClick","console","log","type","resultLabel","correctionPopinWrapper","popinAnimation","string","bool","ValidateButton","validateButton","primarySkinColor","disabled","validateButtonProps","className","customStyle","backgroundColor","validateButtonWrapper","QuestionContainer","props","answerUI","questionText","questionOrigin","answerProps","model","answers","choices","slideContentContainer","question","help","answerContainer","shape","slide","Slide","context","skin","loading","loadingAriaLabel","parentContentTitle","loader","contextTypes","childContextTypes"],"mappings":"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","sourcesContent":["import React, {useMemo} from 'react';\nimport PropTypes from 'prop-types';\nimport classnames from 'classnames';\nimport get from 'lodash/fp/get';\nimport getOr from 'lodash/fp/getOr';\nimport Answer from '../../molecule/answer';\nimport ButtonLink from '../../atom/button-link';\nimport Loader from '../../atom/loader';\nimport Provider from '../../atom/provider';\nimport ReviewCorrectionPopin from '../../molecule/review-correction-popin';\nimport propTypes from './prop-types';\nimport style from './style.css';\n\nconst CorrectionPopin = ({\n  correctionPopinProps,\n  slideIndex,\n  showCorrectionPopin,\n  animateCorrectionPopin\n}) => {\n  if (!showCorrectionPopin) return null;\n\n  const klf = getOr({}, 'klf', correctionPopinProps);\n  const information = getOr({label: '', message: ''}, 'information', correctionPopinProps);\n  const next = get('next', correctionPopinProps);\n\n  const _correctionPopinProps = {\n    next: {\n      onClick: () => {\n        // eslint-disable-next-line no-console\n        console.log('Next Slide');\n      },\n      label: next && next.label,\n      'data-name': `next-question-button-${slideIndex}`,\n      'aria-label': next && next['aria-label']\n    },\n    klf,\n    information,\n    type: correctionPopinProps.type,\n    resultLabel: correctionPopinProps.resultLabel\n  };\n\n  return (\n    <div\n      className={classnames(\n        style.correctionPopinWrapper,\n        animateCorrectionPopin ? style.popinAnimation : null\n      )}\n    >\n      <ReviewCorrectionPopin {..._correctionPopinProps} />\n    </div>\n  );\n};\n\nCorrectionPopin.propTypes = {\n  slideIndex: PropTypes.string,\n  showCorrectionPopin: PropTypes.bool,\n  animateCorrectionPopin: PropTypes.bool,\n  correctionPopinProps: propTypes.correctionPopinProps\n};\n\nconst ValidateButton = ({slideIndex, validateButton, primarySkinColor}) => {\n  const {label, onClick, disabled} = validateButton;\n  const validateButtonProps = {\n    type: 'primary',\n    label,\n    'aria-label': label,\n    'data-name': `slide-validate-button-${slideIndex}`,\n    onClick,\n    disabled,\n    className: style.validateButton,\n    customStyle: {\n      backgroundColor: primarySkinColor\n    }\n    /*\n      slide validation action, this will trigger the correction popin\n      (with the useEffect that fires the dispatchers, if there is a nextContent content,\n      it will be loaded here) but will not trigger any animations unless the endReview\n      signal is received (all slide will disappear, also fired in a useEffect),\n\n      if it is the last slide and the content needs to be different, then that update will\n      be handled on the next slide logic but the content will be carried from here.\n    onClick: async () => {\n      // endReview based on nextContent ref exit node values: 'successExitNode' : 'failExitNode'\n      await validateSlide();\n    },\n    */\n  };\n\n  return (\n    <div key=\"button-wrapper\" className={style.validateButtonWrapper}>\n      <ButtonLink {...validateButtonProps} />\n    </div>\n  );\n};\n\nValidateButton.propTypes = {\n  slideIndex: PropTypes.string,\n  validateButton: propTypes.validateButton,\n  primarySkinColor: PropTypes.string\n};\n\nconst QuestionContainer = props => {\n  const {answerUI, questionText, questionOrigin} = props;\n  if (!answerUI || !questionText) return null;\n\n  const answerProps = get(['model', 'choices'], answerUI)\n    ? /* istanbul ignore next */ {\n        ...answerUI,\n        model: {\n          ...answerUI.model,\n          answers: answerUI.model.choices\n        }\n      }\n    : answerUI;\n\n  return (\n    <div key=\"content-container\" className={style.slideContentContainer}>\n      <div key=\"from-course\" className={style.questionOrigin}>\n        {questionOrigin}\n      </div>\n      <div key=\"title\" className={style.question}>\n        {questionText}\n      </div>\n      <div key=\"help\" className={style.help}>\n        {get('help', answerUI)}\n      </div>\n      <div key=\"answer-container\" className={style.answerContainer}>\n        <Answer {...answerProps} key=\"answer\" />\n      </div>\n    </div>\n  );\n};\n\nQuestionContainer.propTypes = {\n  answerUI: PropTypes.shape(propTypes.slide.answerUI),\n  questionText: PropTypes.string,\n  questionOrigin: PropTypes.string\n};\n\nconst Slide = (props, context) => {\n  const {slide, validateButton, correctionPopinProps, slideIndex = '0'} = props;\n\n  const {skin} = context;\n  const primarySkinColor = useMemo(() => getOr('#00B0FF', 'common.primary', skin), [skin]);\n  const {\n    loading,\n    loadingAriaLabel,\n    parentContentTitle,\n    questionText,\n    answerUI,\n    showCorrectionPopin,\n    animateCorrectionPopin\n  } = slide;\n\n  return (\n    <div data-name={`slide-container`} className={style.slide}>\n      {loading ? (\n        <Loader className={style.loader} theme=\"default\" aria-label={loadingAriaLabel} />\n      ) : (\n        [\n          <QuestionContainer\n            questionOrigin={parentContentTitle}\n            questionText={questionText}\n            answerUI={answerUI}\n            key=\"question-container\"\n          />,\n          <ValidateButton\n            slideIndex={slideIndex}\n            validateButton={validateButton}\n            primarySkinColor={primarySkinColor}\n            key=\"validate-button\"\n          />,\n          <CorrectionPopin\n            correctionPopinProps={correctionPopinProps}\n            slideIndex={slideIndex}\n            showCorrectionPopin={showCorrectionPopin}\n            animateCorrectionPopin={animateCorrectionPopin}\n            key=\"correction-popin\"\n          />\n        ]\n      )}\n    </div>\n  );\n};\n\nSlide.propTypes = propTypes;\n\nSlide.contextTypes = {\n  skin: Provider.childContextTypes.skin\n};\n\nexport default Slide;\n"],"file":"index.js"}

package/es/organism/review-slide/prop-types.js

@@ -0,0 +1,39 @@
+import PropTypes from 'prop-types';
+import ReviewCorrectionPopinPropTypes from '../../molecule/review-correction-popin/prop-types';
+import AnswerPropTypes from '../../molecule/answer/prop-types';
+export const SlideProp = PropTypes.shape({
+  hidden: PropTypes.bool,
+  position: PropTypes.number,
+  loading: PropTypes.bool,
+  loadingAriaLabel: PropTypes.string,
+  animationType: PropTypes.string,
+  // 'unstack' | 'restack'
+  isCorrect: PropTypes.bool,
+  animateCorrectionPopin: PropTypes.bool,
+  showCorrectionPopin: PropTypes.bool,
+  parentContentTitle: PropTypes.string,
+  questionText: PropTypes.string,
+  answerUI: PropTypes.shape(AnswerPropTypes)
+});
+export default {
+  slideIndex: PropTypes.string,
+  slide: SlideProp,
+  validateButton: PropTypes.shape({
+    label: PropTypes.string.isRequired,
+    onClick: PropTypes.func.isRequired,
+    disabled: PropTypes.bool
+  }),
+  correctionPopinProps: PropTypes.shape({
+    klf: ReviewCorrectionPopinPropTypes.klf,
+    information: ReviewCorrectionPopinPropTypes.information,
+    next: PropTypes.shape({
+      label: PropTypes.string,
+      'aria-label': PropTypes.string // Pourquoi le onClick du next n'est pas ici !
+      // updateSlidesOnNext: PropTypes.func.isRequired ???
+
+    }),
+    resultLabel: ReviewCorrectionPopinPropTypes.resultLabel,
+    type: ReviewCorrectionPopinPropTypes.type
+  })
+};
+//# sourceMappingURL=prop-types.js.map

package/es/organism/review-slide/prop-types.js.map

@@ -0,0 +1 @@
+{"version":3,"sources":["../../../src/organism/review-slide/prop-types.js"],"names":["PropTypes","ReviewCorrectionPopinPropTypes","AnswerPropTypes","SlideProp","shape","hidden","bool","position","number","loading","loadingAriaLabel","string","animationType","isCorrect","animateCorrectionPopin","showCorrectionPopin","parentContentTitle","questionText","answerUI","slideIndex","slide","validateButton","label","isRequired","onClick","func","disabled","correctionPopinProps","klf","information","next","resultLabel","type"],"mappings":"AAAA,OAAOA,SAAP,MAAsB,YAAtB;AACA,OAAOC,8BAAP,MAA2C,mDAA3C;AACA,OAAOC,eAAP,MAA4B,kCAA5B;AAEA,OAAO,MAAMC,SAAS,GAAGH,SAAS,CAACI,KAAV,CAAgB;AACvCC,EAAAA,MAAM,EAAEL,SAAS,CAACM,IADqB;AAEvCC,EAAAA,QAAQ,EAAEP,SAAS,CAACQ,MAFmB;AAGvCC,EAAAA,OAAO,EAAET,SAAS,CAACM,IAHoB;AAIvCI,EAAAA,gBAAgB,EAAEV,SAAS,CAACW,MAJW;AAKvCC,EAAAA,aAAa,EAAEZ,SAAS,CAACW,MALc;AAKN;AACjCE,EAAAA,SAAS,EAAEb,SAAS,CAACM,IANkB;AAOvCQ,EAAAA,sBAAsB,EAAEd,SAAS,CAACM,IAPK;AAQvCS,EAAAA,mBAAmB,EAAEf,SAAS,CAACM,IARQ;AASvCU,EAAAA,kBAAkB,EAAEhB,SAAS,CAACW,MATS;AAUvCM,EAAAA,YAAY,EAAEjB,SAAS,CAACW,MAVe;AAWvCO,EAAAA,QAAQ,EAAElB,SAAS,CAACI,KAAV,CAAgBF,eAAhB;AAX6B,CAAhB,CAAlB;AAcP,eAAe;AACbiB,EAAAA,UAAU,EAAEnB,SAAS,CAACW,MADT;AAEbS,EAAAA,KAAK,EAAEjB,SAFM;AAGbkB,EAAAA,cAAc,EAAErB,SAAS,CAACI,KAAV,CAAgB;AAC9BkB,IAAAA,KAAK,EAAEtB,SAAS,CAACW,MAAV,CAAiBY,UADM;AAE9BC,IAAAA,OAAO,EAAExB,SAAS,CAACyB,IAAV,CAAeF,UAFM;AAG9BG,IAAAA,QAAQ,EAAE1B,SAAS,CAACM;AAHU,GAAhB,CAHH;AAQbqB,EAAAA,oBAAoB,EAAE3B,SAAS,CAACI,KAAV,CAAgB;AACpCwB,IAAAA,GAAG,EAAE3B,8BAA8B,CAAC2B,GADA;AAEpCC,IAAAA,WAAW,EAAE5B,8BAA8B,CAAC4B,WAFR;AAGpCC,IAAAA,IAAI,EAAE9B,SAAS,CAACI,KAAV,CAAgB;AACpBkB,MAAAA,KAAK,EAAEtB,SAAS,CAACW,MADG;AAEpB,oBAAcX,SAAS,CAACW,MAFJ,CAEW;AAC/B;;AAHoB,KAAhB,CAH8B;AAQpCoB,IAAAA,WAAW,EAAE9B,8BAA8B,CAAC8B,WARR;AASpCC,IAAAA,IAAI,EAAE/B,8BAA8B,CAAC+B;AATD,GAAhB;AART,CAAf","sourcesContent":["import PropTypes from 'prop-types';\nimport ReviewCorrectionPopinPropTypes from '../../molecule/review-correction-popin/prop-types';\nimport AnswerPropTypes from '../../molecule/answer/prop-types';\n\nexport const SlideProp = PropTypes.shape({\n  hidden: PropTypes.bool,\n  position: PropTypes.number,\n  loading: PropTypes.bool,\n  loadingAriaLabel: PropTypes.string,\n  animationType: PropTypes.string, // 'unstack' | 'restack'\n  isCorrect: PropTypes.bool,\n  animateCorrectionPopin: PropTypes.bool,\n  showCorrectionPopin: PropTypes.bool,\n  parentContentTitle: PropTypes.string,\n  questionText: PropTypes.string,\n  answerUI: PropTypes.shape(AnswerPropTypes)\n});\n\nexport default {\n  slideIndex: PropTypes.string,\n  slide: SlideProp,\n  validateButton: PropTypes.shape({\n    label: PropTypes.string.isRequired,\n    onClick: PropTypes.func.isRequired,\n    disabled: PropTypes.bool\n  }),\n  correctionPopinProps: PropTypes.shape({\n    klf: ReviewCorrectionPopinPropTypes.klf,\n    information: ReviewCorrectionPopinPropTypes.information,\n    next: PropTypes.shape({\n      label: PropTypes.string,\n      'aria-label': PropTypes.string // Pourquoi le onClick du next n'est pas ici !\n      // updateSlidesOnNext: PropTypes.func.isRequired ???\n    }),\n    resultLabel: ReviewCorrectionPopinPropTypes.resultLabel,\n    type: ReviewCorrectionPopinPropTypes.type\n  })\n};\n"],"file":"prop-types.js"}

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: 85%;
+  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"}