@coorpacademy/components 10.19.1-alpha.0 → 10.19.2

package/es/atom/checkbox-with-title/style.css

@@ -26,7 +26,7 @@
 .container .title {
   font-family: "Gilroy";
   font-weight: bold;
-  font-size: 20px;
+  font-size: 18px;
   color: dark;
   min-height: 50px;
   display: flex;

package/es/atom/lottie-wrapper/index.js

@@ -37,7 +37,7 @@ export const fetchAndLoadAnimation = async (_lottie, _fetch, animationSrc, conta
   });
   const animationData = await fetchResult.json();
 
-  const animation = _lottie.loadAnimation({
+  const animation = _lottie.loadAnimation && _lottie.loadAnimation({
     container: containerRef.current,
     // the dom element that will contain the animation
     renderer: 'svg',

package/es/atom/lottie-wrapper/index.js.map

@@ -1 +1 @@
-{"version":3,"sources":["../../../src/atom/lottie-wrapper/index.js"],"names":["React","useMemo","useRef","useEffect","useState","PropTypes","classnames","lottie","get","has","includes","keys","omit","unfetch","style","ANIMATION_CONTROL","play","pause","stop","loading","isIE11","window","userAgent","hasMsCrypto","hasRevision","hasTrident","fetchAndLoadAnimation","_lottie","_fetch","animationSrc","containerRef","loop","animationClassnames","hideOnTransparent","autoplay","animationUrl","URL","toString","fetchResult","headers","animationData","json","animation","loadAnimation","container","current","renderer","rendererSettings","className","preserveAspectRatio","LottieWrapper","props","dataName","ariaLabel","width","height","ie11ImageBackup","backupImageClassName","animationControl","animationClassName","animationItem","setAnimationItem","isAnimationVisible","setIsAnimationVisible","_isIE11","wrapperClassName","lottieContainer","lottieAnimationClassName","ie11BackupImageClassName","backupImage","destroy","name","maxWidth","maxHeight","opacity","transition","propTypes","string","isRequired","bool","shape","number","oneOf"],"mappings":"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","sourcesContent":["import React, {useMemo, useRef, useEffect, useState} from 'react';\nimport PropTypes from 'prop-types';\nimport classnames from 'classnames';\nimport lottie from 'lottie-web';\nimport get from 'lodash/fp/get';\nimport has from 'lodash/fp/has';\nimport includes from 'lodash/fp/includes';\nimport keys from 'lodash/fp/keys';\nimport omit from 'lodash/fp/omit';\nimport unfetch from 'isomorphic-unfetch';\nimport style from './style.css';\n\nexport const ANIMATION_CONTROL = {\n  play: 'play',\n  pause: 'pause',\n  stop: 'stop',\n  loading: 'loading'\n};\n\nconst isIE11 = () => {\n  if (typeof window === 'undefined') return;\n  const userAgent = get('navigator.userAgent', window);\n  const hasMsCrypto = has('msCrypto', window);\n  const hasRevision = includes('rv:', userAgent);\n  const hasTrident = includes('Trident/', userAgent);\n\n  return hasMsCrypto || (hasRevision && hasTrident);\n};\n\nexport const fetchAndLoadAnimation = async (\n  _lottie,\n  _fetch,\n  animationSrc,\n  containerRef,\n  loop,\n  animationClassnames,\n  hideOnTransparent,\n  autoplay\n) => {\n  const animationUrl = new URL(animationSrc).toString();\n  const fetchResult = await _fetch(animationUrl, {\n    headers: {\n      'X-Requested-With': 'XMLHttpRequest',\n      'Content-Type': 'application/json'\n    }\n  });\n\n  const animationData = await fetchResult.json();\n\n  const animation = _lottie.loadAnimation({\n    container: containerRef.current, // the dom element that will contain the animation\n    renderer: 'svg',\n    autoplay,\n    loop,\n    animationData,\n    rendererSettings: {\n      className: animationClassnames,\n      hideOnTransparent,\n      preserveAspectRatio: 'xMidYMid meet' // same options as a preserveAspectRatio prop\n    }\n  });\n  return animation;\n};\n\nconst LottieWrapper = props => {\n  const {\n    className,\n    'data-name': dataName,\n    'aria-label': ariaLabel,\n    animationSrc,\n    loop = false,\n    rendererSettings = {},\n    width,\n    height,\n    ie11ImageBackup,\n    backupImageClassName,\n    autoplay = true,\n    animationControl\n  } = props;\n\n  const {className: animationClassName, hideOnTransparent = true} = rendererSettings;\n\n  const containerRef = useRef(null);\n\n  // lottie's animation instance\n  const [animationItem, setAnimationItem] = useState(null);\n\n  const [isAnimationVisible, setIsAnimationVisible] = useState(autoplay);\n\n  const _isIE11 = useMemo(() => isIE11(), []);\n\n  const wrapperClassName = useMemo(() => classnames(className, style.lottieContainer), [className]);\n\n  const lottieAnimationClassName = useMemo(() => classnames(animationClassName, style.animation), [\n    animationClassName\n  ]);\n\n  const ie11BackupImageClassName = useMemo(\n    () => classnames(backupImageClassName, style.backupImage),\n    [backupImageClassName]\n  );\n\n  useEffect(() => {\n    // enzyme does not handle well the state update after an async useEffect in tests\n    // to remove when the migration towards @testing-library/react is done\n    /* istanbul ignore next */\n    if (includes(animationControl, keys(omit('loading', ANIMATION_CONTROL))) && !autoplay) {\n      setIsAnimationVisible(true);\n      if (animationItem) animationItem[animationControl]();\n      if (animationControl === ANIMATION_CONTROL.stop) setIsAnimationVisible(false);\n    }\n  }, [animationControl, animationItem, autoplay]);\n\n  useEffect(() => {\n    const loadAnimation = async () => {\n      if (!_isIE11 && !animationItem) {\n        /* istanbul ignore else */\n        if (typeof window !== 'undefined') {\n          window.lottie = lottie;\n        }\n        const animation = await fetchAndLoadAnimation(\n          lottie,\n          unfetch,\n          animationSrc,\n          containerRef,\n          loop,\n          lottieAnimationClassName,\n          hideOnTransparent,\n          autoplay\n        );\n\n        /* istanbul ignore next */\n        setAnimationItem(animation);\n      }\n    };\n\n    loadAnimation();\n    return () => animationItem && /* istanbul ignore next */ lottie.destroy(animationItem.name);\n  }, [\n    lottieAnimationClassName,\n    containerRef,\n    hideOnTransparent,\n    loop,\n    animationSrc,\n    _isIE11,\n    animationItem,\n    autoplay\n  ]);\n\n  return (\n    <div\n      ref={containerRef}\n      aria-label={ariaLabel}\n      data-name={dataName}\n      className={wrapperClassName}\n      style={{\n        ...(width && {\n          width: `${width}px`,\n          maxWidth: `${width}px`\n        }),\n        ...(height && {\n          height: `${height}px`,\n          maxHeight: `${height}px`\n        }),\n        opacity: isAnimationVisible ? 1 : 0,\n        transition: 'opacity 0.25s ease-in'\n      }}\n    >\n      {_isIE11 ? (\n        <img\n          src={ie11ImageBackup}\n          className={ie11BackupImageClassName}\n          data-name=\"ie11-backup-image\"\n        />\n      ) : null}\n    </div>\n  );\n};\n\nLottieWrapper.propTypes = {\n  'aria-label': PropTypes.string.isRequired,\n  'data-name': PropTypes.string,\n  animationSrc: PropTypes.string.isRequired,\n  loop: PropTypes.bool,\n  rendererSettings: PropTypes.shape({\n    hideOnTransparent: PropTypes.bool,\n    className: PropTypes.string\n  }),\n  height: PropTypes.number,\n  width: PropTypes.number,\n  className: PropTypes.string,\n  ie11ImageBackup: PropTypes.string.isRequired,\n  backupImageClassName: PropTypes.string,\n  autoplay: PropTypes.bool,\n  animationControl: PropTypes.oneOf(keys(ANIMATION_CONTROL))\n};\n\nexport default LottieWrapper;\n"],"file":"index.js"}
+{"version":3,"sources":["../../../src/atom/lottie-wrapper/index.js"],"names":["React","useMemo","useRef","useEffect","useState","PropTypes","classnames","lottie","get","has","includes","keys","omit","unfetch","style","ANIMATION_CONTROL","play","pause","stop","loading","isIE11","window","userAgent","hasMsCrypto","hasRevision","hasTrident","fetchAndLoadAnimation","_lottie","_fetch","animationSrc","containerRef","loop","animationClassnames","hideOnTransparent","autoplay","animationUrl","URL","toString","fetchResult","headers","animationData","json","animation","loadAnimation","container","current","renderer","rendererSettings","className","preserveAspectRatio","LottieWrapper","props","dataName","ariaLabel","width","height","ie11ImageBackup","backupImageClassName","animationControl","animationClassName","animationItem","setAnimationItem","isAnimationVisible","setIsAnimationVisible","_isIE11","wrapperClassName","lottieContainer","lottieAnimationClassName","ie11BackupImageClassName","backupImage","destroy","name","maxWidth","maxHeight","opacity","transition","propTypes","string","isRequired","bool","shape","number","oneOf"],"mappings":"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","sourcesContent":["import React, {useMemo, useRef, useEffect, useState} from 'react';\nimport PropTypes from 'prop-types';\nimport classnames from 'classnames';\nimport lottie from 'lottie-web';\nimport get from 'lodash/fp/get';\nimport has from 'lodash/fp/has';\nimport includes from 'lodash/fp/includes';\nimport keys from 'lodash/fp/keys';\nimport omit from 'lodash/fp/omit';\nimport unfetch from 'isomorphic-unfetch';\nimport style from './style.css';\n\nexport const ANIMATION_CONTROL = {\n  play: 'play',\n  pause: 'pause',\n  stop: 'stop',\n  loading: 'loading'\n};\n\nconst isIE11 = () => {\n  if (typeof window === 'undefined') return;\n  const userAgent = get('navigator.userAgent', window);\n  const hasMsCrypto = has('msCrypto', window);\n  const hasRevision = includes('rv:', userAgent);\n  const hasTrident = includes('Trident/', userAgent);\n\n  return hasMsCrypto || (hasRevision && hasTrident);\n};\n\nexport const fetchAndLoadAnimation = async (\n  _lottie,\n  _fetch,\n  animationSrc,\n  containerRef,\n  loop,\n  animationClassnames,\n  hideOnTransparent,\n  autoplay\n) => {\n  const animationUrl = new URL(animationSrc).toString();\n  const fetchResult = await _fetch(animationUrl, {\n    headers: {\n      'X-Requested-With': 'XMLHttpRequest',\n      'Content-Type': 'application/json'\n    }\n  });\n\n  const animationData = await fetchResult.json();\n\n  const animation =\n    _lottie.loadAnimation &&\n    _lottie.loadAnimation({\n      container: containerRef.current, // the dom element that will contain the animation\n      renderer: 'svg',\n      autoplay,\n      loop,\n      animationData,\n      rendererSettings: {\n        className: animationClassnames,\n        hideOnTransparent,\n        preserveAspectRatio: 'xMidYMid meet' // same options as a preserveAspectRatio prop\n      }\n    });\n  return animation;\n};\n\nconst LottieWrapper = props => {\n  const {\n    className,\n    'data-name': dataName,\n    'aria-label': ariaLabel,\n    animationSrc,\n    loop = false,\n    rendererSettings = {},\n    width,\n    height,\n    ie11ImageBackup,\n    backupImageClassName,\n    autoplay = true,\n    animationControl\n  } = props;\n\n  const {className: animationClassName, hideOnTransparent = true} = rendererSettings;\n\n  const containerRef = useRef(null);\n\n  // lottie's animation instance\n  const [animationItem, setAnimationItem] = useState(null);\n\n  const [isAnimationVisible, setIsAnimationVisible] = useState(autoplay);\n\n  const _isIE11 = useMemo(() => isIE11(), []);\n\n  const wrapperClassName = useMemo(() => classnames(className, style.lottieContainer), [className]);\n\n  const lottieAnimationClassName = useMemo(() => classnames(animationClassName, style.animation), [\n    animationClassName\n  ]);\n\n  const ie11BackupImageClassName = useMemo(\n    () => classnames(backupImageClassName, style.backupImage),\n    [backupImageClassName]\n  );\n\n  useEffect(() => {\n    // enzyme does not handle well the state update after an async useEffect in tests\n    // to remove when the migration towards @testing-library/react is done\n    /* istanbul ignore next */\n    if (includes(animationControl, keys(omit('loading', ANIMATION_CONTROL))) && !autoplay) {\n      setIsAnimationVisible(true);\n      if (animationItem) animationItem[animationControl]();\n      if (animationControl === ANIMATION_CONTROL.stop) setIsAnimationVisible(false);\n    }\n  }, [animationControl, animationItem, autoplay]);\n\n  useEffect(() => {\n    const loadAnimation = async () => {\n      if (!_isIE11 && !animationItem) {\n        /* istanbul ignore else */\n        if (typeof window !== 'undefined') {\n          window.lottie = lottie;\n        }\n        const animation = await fetchAndLoadAnimation(\n          lottie,\n          unfetch,\n          animationSrc,\n          containerRef,\n          loop,\n          lottieAnimationClassName,\n          hideOnTransparent,\n          autoplay\n        );\n\n        /* istanbul ignore next */\n        setAnimationItem(animation);\n      }\n    };\n\n    loadAnimation();\n    return () => animationItem && /* istanbul ignore next */ lottie.destroy(animationItem.name);\n  }, [\n    lottieAnimationClassName,\n    containerRef,\n    hideOnTransparent,\n    loop,\n    animationSrc,\n    _isIE11,\n    animationItem,\n    autoplay\n  ]);\n\n  return (\n    <div\n      ref={containerRef}\n      aria-label={ariaLabel}\n      data-name={dataName}\n      className={wrapperClassName}\n      style={{\n        ...(width && {\n          width: `${width}px`,\n          maxWidth: `${width}px`\n        }),\n        ...(height && {\n          height: `${height}px`,\n          maxHeight: `${height}px`\n        }),\n        opacity: isAnimationVisible ? 1 : 0,\n        transition: 'opacity 0.25s ease-in'\n      }}\n    >\n      {_isIE11 ? (\n        <img\n          src={ie11ImageBackup}\n          className={ie11BackupImageClassName}\n          data-name=\"ie11-backup-image\"\n        />\n      ) : null}\n    </div>\n  );\n};\n\nLottieWrapper.propTypes = {\n  'aria-label': PropTypes.string.isRequired,\n  'data-name': PropTypes.string,\n  animationSrc: PropTypes.string.isRequired,\n  loop: PropTypes.bool,\n  rendererSettings: PropTypes.shape({\n    hideOnTransparent: PropTypes.bool,\n    className: PropTypes.string\n  }),\n  height: PropTypes.number,\n  width: PropTypes.number,\n  className: PropTypes.string,\n  ie11ImageBackup: PropTypes.string.isRequired,\n  backupImageClassName: PropTypes.string,\n  autoplay: PropTypes.bool,\n  animationControl: PropTypes.oneOf(keys(ANIMATION_CONTROL))\n};\n\nexport default LottieWrapper;\n"],"file":"index.js"}

package/es/atom/review-background/style.css

@@ -17,7 +17,7 @@
 .mainContainer {
   position: relative;
   width: 100vw;
-  height: 100vh;
+  height: 100%;
   background: #ffffff;
   padding: 0;
   margin: 0;

package/es/atom/review-header-step-item/index.js

@@ -3,6 +3,10 @@ import classnames from 'classnames';
 import PropTypes from 'prop-types';
 import { NovaCompositionCoorpacademyCheck as RightIcon, NovaSolidStatusClose as WrongIcon } from '@coorpacademy/nova-icons';
 import style from './style.css';
+export const ICON_VALUES = {
+  right: 'right',
+  wrong: 'wrong'
+};
 
 const Content = ({
   icon,
@@ -16,7 +20,7 @@ const Content = ({
     }, value);
   }
 
-  if (icon === 'right') {
+  if (icon === ICON_VALUES.right) {
     return /*#__PURE__*/React.createElement("span", {
       className: style.value,
       "aria-label": `step ${value}`
@@ -25,7 +29,7 @@ const Content = ({
     }));
   }
 
-  if (icon === 'wrong') {
+  if (icon === ICON_VALUES.wrong) {
     return /*#__PURE__*/React.createElement("span", {
       className: style.value,
       "aria-label": `step ${value}`
@@ -41,7 +45,7 @@ const ReviewHeaderStepItem = props => {
     current
   } = props;
   return /*#__PURE__*/React.createElement("div", {
-    className: classnames(style.default, icon === 'right' && style.right, icon === 'wrong' && style.wrong, current && style.current),
+    className: classnames(style.default, icon === ICON_VALUES.right && style.right, icon === ICON_VALUES.wrong && style.wrong, current && style.current),
     "data-name": "header-step-item"
   }, /*#__PURE__*/React.createElement(Content, props));
 };

package/es/atom/review-header-step-item/index.js.map

@@ -1 +1 @@
-{"version":3,"sources":["../../../src/atom/review-header-step-item/index.js"],"names":["React","classnames","PropTypes","NovaCompositionCoorpacademyCheck","RightIcon","NovaSolidStatusClose","WrongIcon","style","Content","icon","current","value","rightIcon","currentRightIcon","wrongIcon","currentWrongIcon","ReviewHeaderStepItem","props","default","right","wrong","propTypes","string","bool"],"mappings":"AAAA,OAAOA,KAAP,MAAkB,OAAlB;AACA,OAAOC,UAAP,MAAuB,YAAvB;AACA,OAAOC,SAAP,MAAsB,YAAtB;AACA,SACEC,gCAAgC,IAAIC,SADtC,EAEEC,oBAAoB,IAAIC,SAF1B,QAGO,0BAHP;AAIA,OAAOC,KAAP,MAAkB,aAAlB;;AAEA,MAAMC,OAAO,GAAG,CAAC;AAACC,EAAAA,IAAD;AAAOC,EAAAA,OAAP;AAAgBC,EAAAA;AAAhB,CAAD,KAA4B;AAC1C,MAAI,CAACF,IAAL,EAAW;AACT,wBACE;AAAM,MAAA,SAAS,EAAEF,KAAK,CAACI,KAAvB;AAA8B,oBAAa,QAAOA,KAAM;AAAxD,OACGA,KADH,CADF;AAKD;;AAED,MAAIF,IAAI,KAAK,OAAb,EAAsB;AACpB,wBACE;AAAM,MAAA,SAAS,EAAEF,KAAK,CAACI,KAAvB;AAA8B,oBAAa,QAAOA,KAAM;AAAxD,oBACE,oBAAC,SAAD;AAAW,MAAA,SAAS,EAAEV,UAAU,CAACM,KAAK,CAACK,SAAP,EAAkBF,OAAO,IAAIH,KAAK,CAACM,gBAAnC;AAAhC,MADF,CADF;AAKD;;AAED,MAAIJ,IAAI,KAAK,OAAb,EAAsB;AACpB,wBACE;AAAM,MAAA,SAAS,EAAEF,KAAK,CAACI,KAAvB;AAA8B,oBAAa,QAAOA,KAAM;AAAxD,oBACE,oBAAC,SAAD;AAAW,MAAA,SAAS,EAAEV,UAAU,CAACM,KAAK,CAACO,SAAP,EAAkBJ,OAAO,IAAIH,KAAK,CAACQ,gBAAnC;AAAhC,MADF,CADF;AAKD;AACF,CAxBD;;AA0BA,MAAMC,oBAAoB,GAAGC,KAAK,IAAI;AACpC,QAAM;AAACR,IAAAA,IAAD;AAAOC,IAAAA;AAAP,MAAkBO,KAAxB;AACA,sBACE;AACE,IAAA,SAAS,EAAEhB,UAAU,CACnBM,KAAK,CAACW,OADa,EAEnBT,IAAI,KAAK,OAAT,IAAoBF,KAAK,CAACY,KAFP,EAGnBV,IAAI,KAAK,OAAT,IAAoBF,KAAK,CAACa,KAHP,EAInBV,OAAO,IAAIH,KAAK,CAACG,OAJE,CADvB;AAOE,iBAAU;AAPZ,kBASE,oBAAC,OAAD,EAAaO,KAAb,CATF,CADF;AAaD,CAfD;;AAiBAD,oBAAoB,CAACK,SAArB,2CAAiC;AAC/BZ,EAAAA,IAAI,EAAEP,SAAS,CAACoB,MADe;AAE/BZ,EAAAA,OAAO,EAAER,SAAS,CAACqB,IAFY;AAG/BZ,EAAAA,KAAK,EAAET,SAAS,CAACoB;AAHc,CAAjC;AAMA,eAAeN,oBAAf","sourcesContent":["import React from 'react';\nimport classnames from 'classnames';\nimport PropTypes from 'prop-types';\nimport {\n  NovaCompositionCoorpacademyCheck as RightIcon,\n  NovaSolidStatusClose as WrongIcon\n} from '@coorpacademy/nova-icons';\nimport style from './style.css';\n\nconst Content = ({icon, current, value}) => {\n  if (!icon) {\n    return (\n      <span className={style.value} aria-label={`step ${value}`}>\n        {value}\n      </span>\n    );\n  }\n\n  if (icon === 'right') {\n    return (\n      <span className={style.value} aria-label={`step ${value}`}>\n        <RightIcon className={classnames(style.rightIcon, current && style.currentRightIcon)} />\n      </span>\n    );\n  }\n\n  if (icon === 'wrong') {\n    return (\n      <span className={style.value} aria-label={`step ${value}`}>\n        <WrongIcon className={classnames(style.wrongIcon, current && style.currentWrongIcon)} />\n      </span>\n    );\n  }\n};\n\nconst ReviewHeaderStepItem = props => {\n  const {icon, current} = props;\n  return (\n    <div\n      className={classnames(\n        style.default,\n        icon === 'right' && style.right,\n        icon === 'wrong' && style.wrong,\n        current && style.current\n      )}\n      data-name=\"header-step-item\"\n    >\n      <Content {...props} />\n    </div>\n  );\n};\n\nReviewHeaderStepItem.propTypes = {\n  icon: PropTypes.string,\n  current: PropTypes.bool,\n  value: PropTypes.string\n};\n\nexport default ReviewHeaderStepItem;\n"],"file":"index.js"}
+{"version":3,"sources":["../../../src/atom/review-header-step-item/index.js"],"names":["React","classnames","PropTypes","NovaCompositionCoorpacademyCheck","RightIcon","NovaSolidStatusClose","WrongIcon","style","ICON_VALUES","right","wrong","Content","icon","current","value","rightIcon","currentRightIcon","wrongIcon","currentWrongIcon","ReviewHeaderStepItem","props","default","propTypes","string","bool"],"mappings":"AAAA,OAAOA,KAAP,MAAkB,OAAlB;AACA,OAAOC,UAAP,MAAuB,YAAvB;AACA,OAAOC,SAAP,MAAsB,YAAtB;AACA,SACEC,gCAAgC,IAAIC,SADtC,EAEEC,oBAAoB,IAAIC,SAF1B,QAGO,0BAHP;AAIA,OAAOC,KAAP,MAAkB,aAAlB;AAEA,OAAO,MAAMC,WAAW,GAAG;AACzBC,EAAAA,KAAK,EAAE,OADkB;AAEzBC,EAAAA,KAAK,EAAE;AAFkB,CAApB;;AAKP,MAAMC,OAAO,GAAG,CAAC;AAACC,EAAAA,IAAD;AAAOC,EAAAA,OAAP;AAAgBC,EAAAA;AAAhB,CAAD,KAA4B;AAC1C,MAAI,CAACF,IAAL,EAAW;AACT,wBACE;AAAM,MAAA,SAAS,EAAEL,KAAK,CAACO,KAAvB;AAA8B,oBAAa,QAAOA,KAAM;AAAxD,OACGA,KADH,CADF;AAKD;;AAED,MAAIF,IAAI,KAAKJ,WAAW,CAACC,KAAzB,EAAgC;AAC9B,wBACE;AAAM,MAAA,SAAS,EAAEF,KAAK,CAACO,KAAvB;AAA8B,oBAAa,QAAOA,KAAM;AAAxD,oBACE,oBAAC,SAAD;AAAW,MAAA,SAAS,EAAEb,UAAU,CAACM,KAAK,CAACQ,SAAP,EAAkBF,OAAO,IAAIN,KAAK,CAACS,gBAAnC;AAAhC,MADF,CADF;AAKD;;AAED,MAAIJ,IAAI,KAAKJ,WAAW,CAACE,KAAzB,EAAgC;AAC9B,wBACE;AAAM,MAAA,SAAS,EAAEH,KAAK,CAACO,KAAvB;AAA8B,oBAAa,QAAOA,KAAM;AAAxD,oBACE,oBAAC,SAAD;AAAW,MAAA,SAAS,EAAEb,UAAU,CAACM,KAAK,CAACU,SAAP,EAAkBJ,OAAO,IAAIN,KAAK,CAACW,gBAAnC;AAAhC,MADF,CADF;AAKD;AACF,CAxBD;;AA0BA,MAAMC,oBAAoB,GAAGC,KAAK,IAAI;AACpC,QAAM;AAACR,IAAAA,IAAD;AAAOC,IAAAA;AAAP,MAAkBO,KAAxB;AACA,sBACE;AACE,IAAA,SAAS,EAAEnB,UAAU,CACnBM,KAAK,CAACc,OADa,EAEnBT,IAAI,KAAKJ,WAAW,CAACC,KAArB,IAA8BF,KAAK,CAACE,KAFjB,EAGnBG,IAAI,KAAKJ,WAAW,CAACE,KAArB,IAA8BH,KAAK,CAACG,KAHjB,EAInBG,OAAO,IAAIN,KAAK,CAACM,OAJE,CADvB;AAOE,iBAAU;AAPZ,kBASE,oBAAC,OAAD,EAAaO,KAAb,CATF,CADF;AAaD,CAfD;;AAiBAD,oBAAoB,CAACG,SAArB,2CAAiC;AAC/BV,EAAAA,IAAI,EAAEV,SAAS,CAACqB,MADe;AAE/BV,EAAAA,OAAO,EAAEX,SAAS,CAACsB,IAFY;AAG/BV,EAAAA,KAAK,EAAEZ,SAAS,CAACqB;AAHc,CAAjC;AAMA,eAAeJ,oBAAf","sourcesContent":["import React from 'react';\nimport classnames from 'classnames';\nimport PropTypes from 'prop-types';\nimport {\n  NovaCompositionCoorpacademyCheck as RightIcon,\n  NovaSolidStatusClose as WrongIcon\n} from '@coorpacademy/nova-icons';\nimport style from './style.css';\n\nexport const ICON_VALUES = {\n  right: 'right',\n  wrong: 'wrong'\n};\n\nconst Content = ({icon, current, value}) => {\n  if (!icon) {\n    return (\n      <span className={style.value} aria-label={`step ${value}`}>\n        {value}\n      </span>\n    );\n  }\n\n  if (icon === ICON_VALUES.right) {\n    return (\n      <span className={style.value} aria-label={`step ${value}`}>\n        <RightIcon className={classnames(style.rightIcon, current && style.currentRightIcon)} />\n      </span>\n    );\n  }\n\n  if (icon === ICON_VALUES.wrong) {\n    return (\n      <span className={style.value} aria-label={`step ${value}`}>\n        <WrongIcon className={classnames(style.wrongIcon, current && style.currentWrongIcon)} />\n      </span>\n    );\n  }\n};\n\nconst ReviewHeaderStepItem = props => {\n  const {icon, current} = props;\n  return (\n    <div\n      className={classnames(\n        style.default,\n        icon === ICON_VALUES.right && style.right,\n        icon === ICON_VALUES.wrong && style.wrong,\n        current && style.current\n      )}\n      data-name=\"header-step-item\"\n    >\n      <Content {...props} />\n    </div>\n  );\n};\n\nReviewHeaderStepItem.propTypes = {\n  icon: PropTypes.string,\n  current: PropTypes.bool,\n  value: PropTypes.string\n};\n\nexport default ReviewHeaderStepItem;\n"],"file":"index.js"}

package/es/atom/review-header-step-item/style.css

@@ -17,16 +17,15 @@
   display: flex;
   justify-content: center;
   align-items: center;
-  transition: all 0.25s ease;
+  transition: opacity 0.25s ease, font-size 0.25s ease, transform 0.25s ease, line-height 0.25s ease;
   user-select: none;
 }
 
 .current {
-  width: 40px;
-  height: 40px;
   opacity: 1;
   font-size: 16px;
-  line-height: 22px;
+  transform: scale(1.25);
+  transition: transform 0.25s ease;
 }
 
 .right {
@@ -45,24 +44,22 @@
   color: white;
   width: 12px;
   height: 10px;
-  transition: all 0.25s ease;
+  transition: transform 0.25s ease;
 }
 
 .currentRightIcon {
-  width: 16px;
-  height: 14px;
+  transform: scale(1.333, 1.166);
 }
 
 .wrongIcon {
   color: white;
   width: 10px;
   height: 10px;
-  transition: all 0.25s ease;
+  transition: color 0.25s ease;
 }
 
 .currentWrongIcon {
-  width: 15px;
-  height: 15px;
+  transform: scale(1.5);
 }
 
 

package/es/atom/review-presentation/index.js

@@ -1,6 +1,6 @@
 import React from 'react';
 import PropTypes from 'prop-types';
-import get from 'lodash/fp/get';
+import getOr from 'lodash/fp/getOr';
 import map from 'lodash/fp/map';
 import { NovaSolidStatusCheckCircle2 as CheckIcon, NovaSolidVoteRewardsVoteHeart as HeartIcon, NovaCompositionCoorpacademyInformationIcon as InformationIcon, NovaSolidInterfaceFeedbackInterfaceQuestionMark as QuestionIcon, NovaLineSelectionCursorsCursorArrowTarget as TargetIcon } from '@coorpacademy/nova-icons';
 import style from './style.css';
@@ -12,7 +12,15 @@ const ICONS = {
 };
 
 const getIcon = icon => {
-  const Icon = get(icon, ICONS);
+  const Icon = getOr(null, icon, ICONS);
+  /* istanbul ignore next */
+
+  if (!Icon) {
+    return /*#__PURE__*/React.createElement("div", {
+      className: style.labelIcon
+    });
+  }
+
   return /*#__PURE__*/React.createElement(Icon, {
     className: style.labelIcon
   });

package/es/atom/review-presentation/index.js.map

@@ -1 +1 @@
-{"version":3,"sources":["../../../src/atom/review-presentation/index.js"],"names":["React","PropTypes","get","map","NovaSolidStatusCheckCircle2","CheckIcon","NovaSolidVoteRewardsVoteHeart","HeartIcon","NovaCompositionCoorpacademyInformationIcon","InformationIcon","NovaSolidInterfaceFeedbackInterfaceQuestionMark","QuestionIcon","NovaLineSelectionCursorsCursorArrowTarget","TargetIcon","style","ICONS","skills","questions","lifes","allright","getIcon","icon","Icon","labelIcon","ToolTip","tooltipText","tooltipContainer","tooltipIconContainer","informationIcon","toolTip","ReviewPresentation","props","ariaLabel","reviewTitle","reviewText","labelsList","reviewWrapper","__html","reviewListWrapper","convert","cap","label","key","reviewList","reviewListItemWrapper","reviewListText","text","levelItem","shape","string","propTypes"],"mappings":"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","sourcesContent":["import React from 'react';\nimport PropTypes from 'prop-types';\nimport get from 'lodash/fp/get';\nimport map from 'lodash/fp/map';\nimport {\n  NovaSolidStatusCheckCircle2 as CheckIcon,\n  NovaSolidVoteRewardsVoteHeart as HeartIcon,\n  NovaCompositionCoorpacademyInformationIcon as InformationIcon,\n  NovaSolidInterfaceFeedbackInterfaceQuestionMark as QuestionIcon,\n  NovaLineSelectionCursorsCursorArrowTarget as TargetIcon\n} from '@coorpacademy/nova-icons';\nimport style from './style.css';\n\nconst ICONS = {\n  skills: TargetIcon,\n  questions: QuestionIcon,\n  lifes: HeartIcon,\n  allright: CheckIcon\n};\n\nconst getIcon = icon => {\n  const Icon = get(icon, ICONS);\n  return <Icon className={style.labelIcon} />;\n};\n\nconst ToolTip = ({tooltipText}) => {\n  return (\n    <div className={style.tooltipContainer}>\n      <div className={style.tooltipIconContainer}>\n        <InformationIcon className={style.informationIcon} width={12} height={12} />\n      </div>\n      <div className={style.toolTip}>\n        <div className={style.tooltipText}>{tooltipText}</div>\n      </div>\n    </div>\n  );\n};\n\nconst ReviewPresentation = props => {\n  const {'aria-label': ariaLabel, reviewTitle, reviewText, labelsList} = props;\n\n  return (\n    <div className={style.reviewWrapper} aria-label={ariaLabel}>\n      <div\n        className={style.reviewTitle}\n        // eslint-disable-next-line react/no-danger\n        dangerouslySetInnerHTML={{__html: reviewTitle}}\n      />\n      <div\n        className={style.reviewText}\n        // eslint-disable-next-line react/no-danger\n        dangerouslySetInnerHTML={{__html: reviewText}}\n      />\n      <ul className={style.reviewListWrapper}>\n        {map.convert({cap: false})((label, key) => {\n          return (\n            <li key={`step-${key}`} className={style.reviewList}>\n              <div className={style.reviewListItemWrapper} data-tip data-for=\"reviewListItem\">\n                <div className={style.reviewListText}>\n                  {getIcon(key)} {label.text}\n                </div>\n                <ToolTip tooltipText={label.tooltipText} />\n              </div>\n            </li>\n          );\n        }, labelsList)}\n      </ul>\n    </div>\n  );\n};\n\nconst levelItem = PropTypes.shape({\n  text: PropTypes.string,\n  tooltipText: PropTypes.string\n});\n\nToolTip.propTypes = {\n  tooltipText: PropTypes.string\n};\n\nReviewPresentation.propTypes = {\n  'aria-label': PropTypes.string,\n  reviewTitle: PropTypes.string,\n  reviewText: PropTypes.string,\n  labelsList: PropTypes.shape({\n    skills: levelItem,\n    questions: levelItem,\n    lifes: levelItem,\n    allright: levelItem\n  })\n};\n\nexport default ReviewPresentation;\n"],"file":"index.js"}
+{"version":3,"sources":["../../../src/atom/review-presentation/index.js"],"names":["React","PropTypes","getOr","map","NovaSolidStatusCheckCircle2","CheckIcon","NovaSolidVoteRewardsVoteHeart","HeartIcon","NovaCompositionCoorpacademyInformationIcon","InformationIcon","NovaSolidInterfaceFeedbackInterfaceQuestionMark","QuestionIcon","NovaLineSelectionCursorsCursorArrowTarget","TargetIcon","style","ICONS","skills","questions","lifes","allright","getIcon","icon","Icon","labelIcon","ToolTip","tooltipText","tooltipContainer","tooltipIconContainer","informationIcon","toolTip","ReviewPresentation","props","ariaLabel","reviewTitle","reviewText","labelsList","reviewWrapper","__html","reviewListWrapper","convert","cap","label","key","reviewList","reviewListItemWrapper","reviewListText","text","levelItem","shape","string","propTypes"],"mappings":"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","sourcesContent":["import React from 'react';\nimport PropTypes from 'prop-types';\nimport getOr from 'lodash/fp/getOr';\nimport map from 'lodash/fp/map';\nimport {\n  NovaSolidStatusCheckCircle2 as CheckIcon,\n  NovaSolidVoteRewardsVoteHeart as HeartIcon,\n  NovaCompositionCoorpacademyInformationIcon as InformationIcon,\n  NovaSolidInterfaceFeedbackInterfaceQuestionMark as QuestionIcon,\n  NovaLineSelectionCursorsCursorArrowTarget as TargetIcon\n} from '@coorpacademy/nova-icons';\nimport style from './style.css';\n\nconst ICONS = {\n  skills: TargetIcon,\n  questions: QuestionIcon,\n  lifes: HeartIcon,\n  allright: CheckIcon\n};\n\nconst getIcon = icon => {\n  const Icon = getOr(null, icon, ICONS);\n\n  /* istanbul ignore next */\n  if (!Icon) {\n    return <div className={style.labelIcon} />;\n  }\n  return <Icon className={style.labelIcon} />;\n};\n\nconst ToolTip = ({tooltipText}) => {\n  return (\n    <div className={style.tooltipContainer}>\n      <div className={style.tooltipIconContainer}>\n        <InformationIcon className={style.informationIcon} width={12} height={12} />\n      </div>\n      <div className={style.toolTip}>\n        <div className={style.tooltipText}>{tooltipText}</div>\n      </div>\n    </div>\n  );\n};\n\nconst ReviewPresentation = props => {\n  const {'aria-label': ariaLabel, reviewTitle, reviewText, labelsList} = props;\n\n  return (\n    <div className={style.reviewWrapper} aria-label={ariaLabel}>\n      <div\n        className={style.reviewTitle}\n        // eslint-disable-next-line react/no-danger\n        dangerouslySetInnerHTML={{__html: reviewTitle}}\n      />\n      <div\n        className={style.reviewText}\n        // eslint-disable-next-line react/no-danger\n        dangerouslySetInnerHTML={{__html: reviewText}}\n      />\n      <ul className={style.reviewListWrapper}>\n        {map.convert({cap: false})((label, key) => {\n          return (\n            <li key={`step-${key}`} className={style.reviewList}>\n              <div className={style.reviewListItemWrapper} data-tip data-for=\"reviewListItem\">\n                <div className={style.reviewListText}>\n                  {getIcon(key)} {label.text}\n                </div>\n                <ToolTip tooltipText={label.tooltipText} />\n              </div>\n            </li>\n          );\n        }, labelsList)}\n      </ul>\n    </div>\n  );\n};\n\nconst levelItem = PropTypes.shape({\n  text: PropTypes.string,\n  tooltipText: PropTypes.string\n});\n\nToolTip.propTypes = {\n  tooltipText: PropTypes.string\n};\n\nReviewPresentation.propTypes = {\n  'aria-label': PropTypes.string,\n  reviewTitle: PropTypes.string,\n  reviewText: PropTypes.string,\n  labelsList: PropTypes.shape({\n    skills: levelItem,\n    questions: levelItem,\n    lifes: levelItem,\n    allright: levelItem\n  })\n};\n\nexport default ReviewPresentation;\n"],"file":"index.js"}

package/es/molecule/review-card-congrats/style.css

@@ -4,6 +4,7 @@
 @value cm_blue_900 from colors;
 @value cm_positive_100 from colors;
 @value cm_yellow_secondary_200 from colors;
+@value white from colors;
 
 @keyframes fadeIn {
   0% {
@@ -41,6 +42,7 @@
   flex-direction: column;
   justify-content: center;
   width: 280px;
+  background-color: white; /* add background-color to resolve opacity on Firefox and stacking order on IE11 */
 }
 
 .cardStar {

package/es/molecule/review-correction-popin/index.js

@@ -94,11 +94,14 @@ ReviewCorrectionPopin.propTypes = process.env.NODE_ENV !== "production" ? {
   }),
   next: PropTypes.shape({
     label: PropTypes.string,
-    onClick: PropTypes.func
+    onClick: PropTypes.func,
+    'data-name': PropTypes.string,
+    'aria-label': PropTypes.string
   }),
   klf: PropTypes.shape({
     label: PropTypes.string,
-    onClick: PropTypes.func
+    onClick: PropTypes.func,
+    tooltip: PropTypes.string
   })
 } : {};
 export default ReviewCorrectionPopin;

package/es/molecule/review-correction-popin/index.js.map

@@ -1 +1 @@
-{"version":3,"sources":["../../../src/molecule/review-correction-popin/index.js"],"names":["React","classnames","PropTypes","NovaCompositionCoorpacademyCheck","RightIcon","NovaSolidStatusClose","WrongIcon","ButtonLink","style","buildKlfButton","klf","klfButtonProps","icon","position","type","klfContainer","klfButtonContainer","klfButton","toolTip","tooltipText","tooltip","ReviewCorrectionPopin","props","information","resultLabel","next","nextQuestionButtonProps","cta","ICONS","right","wrong","Icon","wrapper","popin","correctionSection","iconCircle","iconRight","iconWrong","feedbackSection","labelContainer","label","message","actions","actionsWrong","nextQuestionContainer","nextQuestionButton","propTypes","oneOf","string","shape","onClick","func"],"mappings":";;AAAA,OAAOA,KAAP,MAAkB,OAAlB;AACA,OAAOC,UAAP,MAAuB,YAAvB;AACA,OAAOC,SAAP,MAAsB,YAAtB;AACA,SACEC,gCAAgC,IAAIC,SADtC,EAEEC,oBAAoB,IAAIC,SAF1B,QAGO,0BAHP;AAIA,OAAOC,UAAP,MAAuB,wBAAvB;AACA,OAAOC,KAAP,MAAkB,aAAlB;;AAEA,MAAMC,cAAc,GAAGC,GAAG,IAAI;AAC5B,QAAMC,cAAc,yBACfD,GADe;AAElBE,IAAAA,IAAI,EAAE;AACJC,MAAAA,QAAQ,EAAE,MADN;AAEJC,MAAAA,IAAI,EAAE;AAFF,KAFY;AAMlBA,IAAAA,IAAI,EAAE;AANY,IAApB;;AASA,sBACE;AAAK,IAAA,SAAS,EAAEN,KAAK,CAACO;AAAtB,kBACE;AAAK,IAAA,SAAS,EAAEP,KAAK,CAACQ;AAAtB,kBACE,oBAAC,UAAD,eAAgBL,cAAhB;AAAgC,IAAA,SAAS,EAAEH,KAAK,CAACS;AAAjD,KADF,CADF,eAIE;AAAK,IAAA,SAAS,EAAET,KAAK,CAACU;AAAtB,kBACE;AAAK,IAAA,SAAS,EAAEV,KAAK,CAACW;AAAtB,KAAoCT,GAAG,CAACU,OAAxC,CADF,CAJF,CADF;AAUD,CApBD;;AAsBA,MAAMC,qBAAqB,GAAGC,KAAK,IAAI;AACrC,QAAM;AAACC,IAAAA,WAAD;AAAcC,IAAAA,WAAd;AAA2BV,IAAAA,IAA3B;AAAiCJ,IAAAA,GAAjC;AAAsCe,IAAAA;AAAtC,MAA8CH,KAApD;;AAEA,QAAMI,uBAAuB,yBACxBD,IADwB;AAE3BX,IAAAA,IAAI,EAAE;AAFqB,IAA7B;;AAKA,QAAMa,GAAG,GAAGb,IAAI,KAAK,OAAT,GAAmBL,cAAc,CAACC,GAAD,CAAjC,GAAyC,IAArD;AAEA,QAAMkB,KAAK,GAAG;AACZC,IAAAA,KAAK,EAAEzB,SADK;AAEZ0B,IAAAA,KAAK,EAAExB;AAFK,GAAd;AAIA,QAAMyB,IAAI,GAAGH,KAAK,CAACd,IAAD,CAAlB;AAEA,sBACE;AAAK,IAAA,SAAS,EAAEN,KAAK,CAACwB;AAAtB,kBACE;AAAK,IAAA,SAAS,EAAE/B,UAAU,CAACO,KAAK,CAACyB,KAAP,EAAcnB,IAAI,KAAK,OAAT,GAAmBN,KAAK,CAACqB,KAAzB,GAAiCrB,KAAK,CAACsB,KAArD;AAA1B,kBACE;AAAK,IAAA,SAAS,EAAEtB,KAAK,CAAC0B;AAAtB,kBACE;AAAK,IAAA,SAAS,EAAE1B,KAAK,CAAC2B;AAAtB,kBACE,oBAAC,IAAD;AAAM,IAAA,SAAS,EAAErB,IAAI,KAAK,OAAT,GAAmBN,KAAK,CAAC4B,SAAzB,GAAqC5B,KAAK,CAAC6B;AAA5D,IADF,CADF,eAIE;AAAK,IAAA,SAAS,EAAE7B,KAAK,CAACgB,WAAtB;AAAmC,kBAAW;AAA9C,kBACE;AAAM,kBAAYA;AAAlB,KAAgCA,WAAhC,CADF,CAJF,CADF,eASE;AAAK,IAAA,SAAS,EAAEhB,KAAK,CAAC8B;AAAtB,kBACE;AAAK,IAAA,SAAS,EAAE9B,KAAK,CAACe,WAAtB;AAAmC,kBAAW;AAA9C,kBACE;AAAK,IAAA,SAAS,EAAEf,KAAK,CAAC+B;AAAtB,kBACE;AAAM,IAAA,SAAS,EAAE/B,KAAK,CAACgC,KAAvB;AAA8B,kBAAYjB,WAAW,CAACiB;AAAtD,KACGjB,WAAW,CAACiB,KADf,CADF,CADF,eAME;AAAM,IAAA,SAAS,EAAEhC,KAAK,CAACiC,OAAvB;AAAgC,kBAAYlB,WAAW,CAACkB;AAAxD,KACGlB,WAAW,CAACkB,OADf,CANF,CADF,CATF,eAqBE;AAAK,IAAA,SAAS,EAAE3B,IAAI,KAAK,OAAT,GAAmBN,KAAK,CAACkC,OAAzB,GAAmClC,KAAK,CAACmC;AAAzD,KACGhB,GADH,eAEE;AAAK,IAAA,SAAS,EAAEnB,KAAK,CAACoC;AAAtB,kBACE,oBAAC,UAAD,eAAgBlB,uBAAhB;AAAyC,IAAA,SAAS,EAAElB,KAAK,CAACqC;AAA1D,KADF,CAFF,CArBF,CADF,CADF;AAgCD,CAhDD;;AAkDAxB,qBAAqB,CAACyB,SAAtB,2CAAkC;AAChChC,EAAAA,IAAI,EAAEZ,SAAS,CAAC6C,KAAV,CAAgB,CAAC,OAAD,EAAU,OAAV,CAAhB,CAD0B;AAEhCvB,EAAAA,WAAW,EAAEtB,SAAS,CAAC8C,MAFS;AAGhCzB,EAAAA,WAAW,EAAErB,SAAS,CAAC+C,KAAV,CAAgB;AAC3BT,IAAAA,KAAK,EAAEtC,SAAS,CAAC8C,MADU;AAE3BP,IAAAA,OAAO,EAAEvC,SAAS,CAAC8C;AAFQ,GAAhB,CAHmB;AAOhCvB,EAAAA,IAAI,EAAEvB,SAAS,CAAC+C,KAAV,CAAgB;AACpBT,IAAAA,KAAK,EAAEtC,SAAS,CAAC8C,MADG;AAEpBE,IAAAA,OAAO,EAAEhD,SAAS,CAACiD;AAFC,GAAhB,CAP0B;AAWhCzC,EAAAA,GAAG,EAAER,SAAS,CAAC+C,KAAV,CAAgB;AACnBT,IAAAA,KAAK,EAAEtC,SAAS,CAAC8C,MADE;AAEnBE,IAAAA,OAAO,EAAEhD,SAAS,CAACiD;AAFA,GAAhB;AAX2B,CAAlC;AAiBA,eAAe9B,qBAAf","sourcesContent":["import React from 'react';\nimport classnames from 'classnames';\nimport PropTypes from 'prop-types';\nimport {\n  NovaCompositionCoorpacademyCheck as RightIcon,\n  NovaSolidStatusClose as WrongIcon\n} from '@coorpacademy/nova-icons';\nimport ButtonLink from '../../atom/button-link';\nimport style from './style.css';\n\nconst buildKlfButton = klf => {\n  const klfButtonProps = {\n    ...klf,\n    icon: {\n      position: 'left',\n      type: 'key'\n    },\n    type: 'primary'\n  };\n\n  return (\n    <div className={style.klfContainer}>\n      <div className={style.klfButtonContainer}>\n        <ButtonLink {...klfButtonProps} className={style.klfButton} />\n      </div>\n      <div className={style.toolTip}>\n        <div className={style.tooltipText}>{klf.tooltip}</div>\n      </div>\n    </div>\n  );\n};\n\nconst ReviewCorrectionPopin = props => {\n  const {information, resultLabel, type, klf, next} = props;\n\n  const nextQuestionButtonProps = {\n    ...next,\n    type: 'primary'\n  };\n\n  const cta = type === 'wrong' ? buildKlfButton(klf) : null;\n\n  const ICONS = {\n    right: RightIcon,\n    wrong: WrongIcon\n  };\n  const Icon = ICONS[type];\n\n  return (\n    <div className={style.wrapper}>\n      <div className={classnames(style.popin, type === 'right' ? style.right : style.wrong)}>\n        <div className={style.correctionSection}>\n          <div className={style.iconCircle}>\n            <Icon className={type === 'right' ? style.iconRight : style.iconWrong} />\n          </div>\n          <div className={style.resultLabel} aria-label=\"result\">\n            <span aria-label={resultLabel}>{resultLabel}</span>\n          </div>\n        </div>\n        <div className={style.feedbackSection}>\n          <div className={style.information} aria-label=\"answer-information\">\n            <div className={style.labelContainer}>\n              <span className={style.label} aria-label={information.label}>\n                {information.label}\n              </span>\n            </div>\n            <span className={style.message} aria-label={information.message}>\n              {information.message}\n            </span>\n          </div>\n        </div>\n        <div className={type === 'right' ? style.actions : style.actionsWrong}>\n          {cta}\n          <div className={style.nextQuestionContainer}>\n            <ButtonLink {...nextQuestionButtonProps} className={style.nextQuestionButton} />\n          </div>\n        </div>\n      </div>\n    </div>\n  );\n};\n\nReviewCorrectionPopin.propTypes = {\n  type: PropTypes.oneOf(['right', 'wrong']),\n  resultLabel: PropTypes.string,\n  information: PropTypes.shape({\n    label: PropTypes.string,\n    message: PropTypes.string\n  }),\n  next: PropTypes.shape({\n    label: PropTypes.string,\n    onClick: PropTypes.func\n  }),\n  klf: PropTypes.shape({\n    label: PropTypes.string,\n    onClick: PropTypes.func\n  })\n};\n\nexport default ReviewCorrectionPopin;\n"],"file":"index.js"}
+{"version":3,"sources":["../../../src/molecule/review-correction-popin/index.js"],"names":["React","classnames","PropTypes","NovaCompositionCoorpacademyCheck","RightIcon","NovaSolidStatusClose","WrongIcon","ButtonLink","style","buildKlfButton","klf","klfButtonProps","icon","position","type","klfContainer","klfButtonContainer","klfButton","toolTip","tooltipText","tooltip","ReviewCorrectionPopin","props","information","resultLabel","next","nextQuestionButtonProps","cta","ICONS","right","wrong","Icon","wrapper","popin","correctionSection","iconCircle","iconRight","iconWrong","feedbackSection","labelContainer","label","message","actions","actionsWrong","nextQuestionContainer","nextQuestionButton","propTypes","oneOf","string","shape","onClick","func"],"mappings":"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","sourcesContent":["import React from 'react';\nimport classnames from 'classnames';\nimport PropTypes from 'prop-types';\nimport {\n  NovaCompositionCoorpacademyCheck as RightIcon,\n  NovaSolidStatusClose as WrongIcon\n} from '@coorpacademy/nova-icons';\nimport ButtonLink from '../../atom/button-link';\nimport style from './style.css';\n\nconst buildKlfButton = klf => {\n  const klfButtonProps = {\n    ...klf,\n    icon: {\n      position: 'left',\n      type: 'key'\n    },\n    type: 'primary'\n  };\n\n  return (\n    <div className={style.klfContainer}>\n      <div className={style.klfButtonContainer}>\n        <ButtonLink {...klfButtonProps} className={style.klfButton} />\n      </div>\n      <div className={style.toolTip}>\n        <div className={style.tooltipText}>{klf.tooltip}</div>\n      </div>\n    </div>\n  );\n};\n\nconst ReviewCorrectionPopin = props => {\n  const {information, resultLabel, type, klf, next} = props;\n\n  const nextQuestionButtonProps = {\n    ...next,\n    type: 'primary'\n  };\n\n  const cta = type === 'wrong' ? buildKlfButton(klf) : null;\n\n  const ICONS = {\n    right: RightIcon,\n    wrong: WrongIcon\n  };\n  const Icon = ICONS[type];\n\n  return (\n    <div className={style.wrapper}>\n      <div className={classnames(style.popin, type === 'right' ? style.right : style.wrong)}>\n        <div className={style.correctionSection}>\n          <div className={style.iconCircle}>\n            <Icon className={type === 'right' ? style.iconRight : style.iconWrong} />\n          </div>\n          <div className={style.resultLabel} aria-label=\"result\">\n            <span aria-label={resultLabel}>{resultLabel}</span>\n          </div>\n        </div>\n        <div className={style.feedbackSection}>\n          <div className={style.information} aria-label=\"answer-information\">\n            <div className={style.labelContainer}>\n              <span className={style.label} aria-label={information.label}>\n                {information.label}\n              </span>\n            </div>\n            <span className={style.message} aria-label={information.message}>\n              {information.message}\n            </span>\n          </div>\n        </div>\n        <div className={type === 'right' ? style.actions : style.actionsWrong}>\n          {cta}\n          <div className={style.nextQuestionContainer}>\n            <ButtonLink {...nextQuestionButtonProps} className={style.nextQuestionButton} />\n          </div>\n        </div>\n      </div>\n    </div>\n  );\n};\n\nReviewCorrectionPopin.propTypes = {\n  type: PropTypes.oneOf(['right', 'wrong']),\n  resultLabel: PropTypes.string,\n  information: PropTypes.shape({\n    label: PropTypes.string,\n    message: PropTypes.string\n  }),\n  next: PropTypes.shape({\n    label: PropTypes.string,\n    onClick: PropTypes.func,\n    'data-name': PropTypes.string,\n    'aria-label': PropTypes.string\n  }),\n  klf: PropTypes.shape({\n    label: PropTypes.string,\n    onClick: PropTypes.func,\n    tooltip: PropTypes.string\n  })\n};\n\nexport default ReviewCorrectionPopin;\n"],"file":"index.js"}

package/es/molecule/review-correction-popin/test/fixtures/wrong.js

@@ -7,6 +7,7 @@ export default {
       message: 'Corporate lawyers trying to understand software.'
     },
     klf: {
+      onClick: () => console.log('klf tooltip'),
       label: 'Key learning factor',
       tooltip: '17 frustrated software engineers grappling with the complexities of software development.'
     },

package/es/molecule/review-correction-popin/test/fixtures/wrong.js.map

@@ -1 +1 @@
-{"version":3,"sources":["../../../../../src/molecule/review-correction-popin/test/fixtures/wrong.js"],"names":["props","type","resultLabel","information","label","message","klf","tooltip","next","onClick","console","log"],"mappings":"AAAA,eAAe;AACbA,EAAAA,KAAK,EAAE;AACLC,IAAAA,IAAI,EAAE,OADD;AAELC,IAAAA,WAAW,EAAE,cAFR;AAGLC,IAAAA,WAAW,EAAE;AACXC,MAAAA,KAAK,EAAE,gBADI;AAEXC,MAAAA,OAAO,EAAE;AAFE,KAHR;AAOLC,IAAAA,GAAG,EAAE;AACHF,MAAAA,KAAK,EAAE,qBADJ;AAEHG,MAAAA,OAAO,EACL;AAHC,KAPA;AAYLC,IAAAA,IAAI,EAAE;AACJJ,MAAAA,KAAK,EAAE,eADH;AAEJK,MAAAA,OAAO,EAAE,MAAMC,OAAO,CAACC,GAAR,CAAY,eAAZ;AAFX;AAZD;AADM,CAAf","sourcesContent":["export default {\n  props: {\n    type: 'wrong',\n    resultLabel: 'WRONG ANSWER',\n    information: {\n      label: 'Correct Answer',\n      message: 'Corporate lawyers trying to understand software.'\n    },\n    klf: {\n      label: 'Key learning factor',\n      tooltip:\n        '17 frustrated software engineers grappling with the complexities of software development.'\n    },\n    next: {\n      label: 'Next Question',\n      onClick: () => console.log('Next Question')\n    }\n  }\n};\n"],"file":"wrong.js"}
+{"version":3,"sources":["../../../../../src/molecule/review-correction-popin/test/fixtures/wrong.js"],"names":["props","type","resultLabel","information","label","message","klf","onClick","console","log","tooltip","next"],"mappings":"AAAA,eAAe;AACbA,EAAAA,KAAK,EAAE;AACLC,IAAAA,IAAI,EAAE,OADD;AAELC,IAAAA,WAAW,EAAE,cAFR;AAGLC,IAAAA,WAAW,EAAE;AACXC,MAAAA,KAAK,EAAE,gBADI;AAEXC,MAAAA,OAAO,EAAE;AAFE,KAHR;AAOLC,IAAAA,GAAG,EAAE;AACHC,MAAAA,OAAO,EAAE,MAAMC,OAAO,CAACC,GAAR,CAAY,aAAZ,CADZ;AAEHL,MAAAA,KAAK,EAAE,qBAFJ;AAGHM,MAAAA,OAAO,EACL;AAJC,KAPA;AAaLC,IAAAA,IAAI,EAAE;AACJP,MAAAA,KAAK,EAAE,eADH;AAEJG,MAAAA,OAAO,EAAE,MAAMC,OAAO,CAACC,GAAR,CAAY,eAAZ;AAFX;AAbD;AADM,CAAf","sourcesContent":["export default {\n  props: {\n    type: 'wrong',\n    resultLabel: 'WRONG ANSWER',\n    information: {\n      label: 'Correct Answer',\n      message: 'Corporate lawyers trying to understand software.'\n    },\n    klf: {\n      onClick: () => console.log('klf tooltip'),\n      label: 'Key learning factor',\n      tooltip:\n        '17 frustrated software engineers grappling with the complexities of software development.'\n    },\n    next: {\n      label: 'Next Question',\n      onClick: () => console.log('Next Question')\n    }\n  }\n};\n"],"file":"wrong.js"}

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

@@ -6,7 +6,7 @@ import map from 'lodash/fp/map';
 import ReviewHeaderStepItem from '../../atom/review-header-step-item';
 import style from './style.css';
 
-const ReviewHeaderStep = props => {
+const ReviewHeaderSteps = props => {
   const {
     steps
   } = props;
@@ -19,8 +19,8 @@ const ReviewHeaderStep = props => {
   }, items);
 };
 
-ReviewHeaderStep.propTypes = process.env.NODE_ENV !== "production" ? {
+ReviewHeaderSteps.propTypes = process.env.NODE_ENV !== "production" ? {
   steps: PropTypes.arrayOf(PropTypes.shape(ReviewHeaderStepItem.props))
 } : {};
-export default ReviewHeaderStep;
+export default ReviewHeaderSteps;
 //# sourceMappingURL=index.js.map

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

@@ -1 +1 @@
-{"version":3,"sources":["../../../src/molecule/review-header-steps/index.js"],"names":["React","PropTypes","map","ReviewHeaderStepItem","style","ReviewHeaderStep","props","steps","items","step","value","wrapper","propTypes","arrayOf","shape"],"mappings":";;AAAA,OAAOA,KAAP,MAAkB,OAAlB;AACA,OAAOC,SAAP,MAAsB,YAAtB;AACA,OAAOC,GAAP,MAAgB,eAAhB;AACA,OAAOC,oBAAP,MAAiC,oCAAjC;AACA,OAAOC,KAAP,MAAkB,aAAlB;;AAEA,MAAMC,gBAAgB,GAAGC,KAAK,IAAI;AAChC,QAAM;AAACC,IAAAA;AAAD,MAAUD,KAAhB;AAEA,QAAME,KAAK,GAAGN,GAAG,CAACO,IAAI,iBAAI,oBAAC,oBAAD,eAA0BA,IAA1B;AAAgC,IAAA,GAAG,EAAEA,IAAI,CAACC;AAA1C,KAAT,EAA8DH,KAA9D,CAAjB;AAEA,sBACE;AAAK,IAAA,SAAS,EAAEH,KAAK,CAACO,OAAtB;AAA+B,iBAAU;AAAzC,KACGH,KADH,CADF;AAKD,CAVD;;AAYAH,gBAAgB,CAACO,SAAjB,2CAA6B;AAC3BL,EAAAA,KAAK,EAAEN,SAAS,CAACY,OAAV,CAAkBZ,SAAS,CAACa,KAAV,CAAgBX,oBAAoB,CAACG,KAArC,CAAlB;AADoB,CAA7B;AAIA,eAAeD,gBAAf","sourcesContent":["import React from 'react';\nimport PropTypes from 'prop-types';\nimport map from 'lodash/fp/map';\nimport ReviewHeaderStepItem from '../../atom/review-header-step-item';\nimport style from './style.css';\n\nconst ReviewHeaderStep = props => {\n  const {steps} = props;\n\n  const items = map(step => <ReviewHeaderStepItem {...step} key={step.value} />, steps);\n\n  return (\n    <div className={style.wrapper} data-name=\"header-steps\">\n      {items}\n    </div>\n  );\n};\n\nReviewHeaderStep.propTypes = {\n  steps: PropTypes.arrayOf(PropTypes.shape(ReviewHeaderStepItem.props))\n};\n\nexport default ReviewHeaderStep;\n"],"file":"index.js"}
+{"version":3,"sources":["../../../src/molecule/review-header-steps/index.js"],"names":["React","PropTypes","map","ReviewHeaderStepItem","style","ReviewHeaderSteps","props","steps","items","step","value","wrapper","propTypes","arrayOf","shape"],"mappings":";;AAAA,OAAOA,KAAP,MAAkB,OAAlB;AACA,OAAOC,SAAP,MAAsB,YAAtB;AACA,OAAOC,GAAP,MAAgB,eAAhB;AACA,OAAOC,oBAAP,MAAiC,oCAAjC;AACA,OAAOC,KAAP,MAAkB,aAAlB;;AAEA,MAAMC,iBAAiB,GAAGC,KAAK,IAAI;AACjC,QAAM;AAACC,IAAAA;AAAD,MAAUD,KAAhB;AAEA,QAAME,KAAK,GAAGN,GAAG,CAACO,IAAI,iBAAI,oBAAC,oBAAD,eAA0BA,IAA1B;AAAgC,IAAA,GAAG,EAAEA,IAAI,CAACC;AAA1C,KAAT,EAA8DH,KAA9D,CAAjB;AAEA,sBACE;AAAK,IAAA,SAAS,EAAEH,KAAK,CAACO,OAAtB;AAA+B,iBAAU;AAAzC,KACGH,KADH,CADF;AAKD,CAVD;;AAYAH,iBAAiB,CAACO,SAAlB,2CAA8B;AAC5BL,EAAAA,KAAK,EAAEN,SAAS,CAACY,OAAV,CAAkBZ,SAAS,CAACa,KAAV,CAAgBX,oBAAoB,CAACG,KAArC,CAAlB;AADqB,CAA9B;AAIA,eAAeD,iBAAf","sourcesContent":["import React from 'react';\nimport PropTypes from 'prop-types';\nimport map from 'lodash/fp/map';\nimport ReviewHeaderStepItem from '../../atom/review-header-step-item';\nimport style from './style.css';\n\nconst ReviewHeaderSteps = props => {\n  const {steps} = props;\n\n  const items = map(step => <ReviewHeaderStepItem {...step} key={step.value} />, steps);\n\n  return (\n    <div className={style.wrapper} data-name=\"header-steps\">\n      {items}\n    </div>\n  );\n};\n\nReviewHeaderSteps.propTypes = {\n  steps: PropTypes.arrayOf(PropTypes.shape(ReviewHeaderStepItem.props))\n};\n\nexport default ReviewHeaderSteps;\n"],"file":"index.js"}

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

@@ -2,11 +2,14 @@ function _extends() { _extends = Object.assign || function (target) { for (var i
 
 import React, { useEffect, useRef } from 'react';
 import PropTypes from 'prop-types';
+import AtomLottieWrapper from '../../atom/lottie-wrapper';
 import ButtonLink from '../../atom/button-link';
 import MoleculeReviewCardCongrats from '../../molecule/review-card-congrats';
 import style from './style.css';
 export const setScroll = container => () => {
-  container.current.scrollTo({
+  var _container$current;
+
+  ((_container$current = container.current) == null ? void 0 : _container$current.scrollTo) && container.current.scrollTo({
     left: 1000,
     behavior: 'smooth'
   });
@@ -16,6 +19,7 @@ const ReviewCongrats = props => {
   const {
     'aria-label': ariaLabel,
     'data-name': dataName,
+    animationLottie,
     title,
     cardCongratsStar,
     cardCongratsRank,
@@ -28,9 +32,18 @@ const ReviewCongrats = props => {
     return () => timer && clearTimeout(timer);
   }, []);
   return /*#__PURE__*/React.createElement("div", {
-    className: style.containerCongrats,
+    className: style.mainContainer,
     "aria-label": ariaLabel,
     "data-name": dataName
+  }, /*#__PURE__*/React.createElement(AtomLottieWrapper, _extends({}, animationLottie, {
+    loop: false,
+    animationControl: 'play',
+    autoplay: true,
+    "data-name": "lottie-wrapper",
+    className: style.lottie,
+    backupImageClassName: style.ie11Backup
+  })), /*#__PURE__*/React.createElement("div", {
+    className: style.containerCongrats
   }, /*#__PURE__*/React.createElement("div", {
     className: style.title
   }, title), /*#__PURE__*/React.createElement("div", {
@@ -48,12 +61,13 @@ const ReviewCongrats = props => {
     "data-name": "revise-skill-link"
   })), /*#__PURE__*/React.createElement(ButtonLink, _extends({}, buttonRevisingSkill, {
     className: style.buttonRevise
-  }))));
+  })))));
 };
 
 ReviewCongrats.propTypes = process.env.NODE_ENV !== "production" ? {
   'aria-label': PropTypes.string,
   'data-name': PropTypes.string,
+  animationLottie: PropTypes.shape(AtomLottieWrapper.propTypes),
   title: PropTypes.string,
   cardCongratsStar: PropTypes.shape(MoleculeReviewCardCongrats.propTypes),
   cardCongratsRank: PropTypes.shape(MoleculeReviewCardCongrats.propTypes),

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

@@ -1 +1 @@
-{"version":3,"sources":["../../../src/organism/review-congrats/index.js"],"names":["React","useEffect","useRef","PropTypes","ButtonLink","MoleculeReviewCardCongrats","style","setScroll","container","current","scrollTo","left","behavior","ReviewCongrats","props","ariaLabel","dataName","title","cardCongratsStar","cardCongratsRank","buttonRevising","buttonRevisingSkill","timer","setTimeout","clearTimeout","containerCongrats","containerCards","cardStar","cardRank","buttonContainer","buttonRevise","propTypes","string","shape","label","onClick","func","type"],"mappings":"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","sourcesContent":["import React, {useEffect, useRef} from 'react';\nimport PropTypes from 'prop-types';\nimport ButtonLink from '../../atom/button-link';\nimport MoleculeReviewCardCongrats from '../../molecule/review-card-congrats';\nimport style from './style.css';\n\nexport const setScroll = container => () => {\n  container.current.scrollTo({\n    left: 1000,\n    behavior: 'smooth'\n  });\n};\n\nconst ReviewCongrats = props => {\n  const {\n    'aria-label': ariaLabel,\n    'data-name': dataName,\n    title,\n    cardCongratsStar,\n    cardCongratsRank,\n    buttonRevising,\n    buttonRevisingSkill\n  } = props;\n\n  const container = useRef(null);\n\n  useEffect(() => {\n    const timer = setTimeout(setScroll(container), 2000);\n    return () => timer && clearTimeout(timer);\n  }, []);\n\n  return (\n    <div className={style.containerCongrats} aria-label={ariaLabel} data-name={dataName}>\n      <div className={style.title}>{title}</div>\n      <div ref={container} className={style.containerCards}>\n        <MoleculeReviewCardCongrats {...cardCongratsStar} className={style.cardStar} />\n        <MoleculeReviewCardCongrats\n          {...cardCongratsRank}\n          timerAnimation={1800}\n          className={style.cardRank}\n        />\n      </div>\n      <div className={style.buttonContainer}>\n        <ButtonLink\n          {...buttonRevising}\n          className={style.buttonRevise}\n          data-name=\"revise-skill-link\"\n        />\n        <ButtonLink {...buttonRevisingSkill} className={style.buttonRevise} />\n      </div>\n    </div>\n  );\n};\n\nReviewCongrats.propTypes = {\n  'aria-label': PropTypes.string,\n  'data-name': PropTypes.string,\n  title: PropTypes.string,\n  cardCongratsStar: PropTypes.shape(MoleculeReviewCardCongrats.propTypes),\n  cardCongratsRank: PropTypes.shape(MoleculeReviewCardCongrats.propTypes),\n  buttonRevising: PropTypes.shape({\n    label: PropTypes.string,\n    onClick: PropTypes.func,\n    type: PropTypes.string\n  }),\n  buttonRevisingSkill: PropTypes.shape({\n    label: PropTypes.string,\n    onClick: PropTypes.func,\n    type: PropTypes.string\n  })\n};\n\nexport default ReviewCongrats;\n"],"file":"index.js"}
+{"version":3,"sources":["../../../src/organism/review-congrats/index.js"],"names":["React","useEffect","useRef","PropTypes","AtomLottieWrapper","ButtonLink","MoleculeReviewCardCongrats","style","setScroll","container","current","scrollTo","left","behavior","ReviewCongrats","props","ariaLabel","dataName","animationLottie","title","cardCongratsStar","cardCongratsRank","buttonRevising","buttonRevisingSkill","timer","setTimeout","clearTimeout","mainContainer","lottie","ie11Backup","containerCongrats","containerCards","cardStar","cardRank","buttonContainer","buttonRevise","propTypes","string","shape","label","onClick","func","type"],"mappings":";;AAAA,OAAOA,KAAP,IAAeC,SAAf,EAA0BC,MAA1B,QAAuC,OAAvC;AACA,OAAOC,SAAP,MAAsB,YAAtB;AACA,OAAOC,iBAAP,MAA8B,2BAA9B;AACA,OAAOC,UAAP,MAAuB,wBAAvB;AACA,OAAOC,0BAAP,MAAuC,qCAAvC;AACA,OAAOC,KAAP,MAAkB,aAAlB;AAEA,OAAO,MAAMC,SAAS,GAAGC,SAAS,IAAI,MAAM;AAAA;;AAC1C,yBAAAA,SAAS,CAACC,OAAV,wCAAmBC,QAAnB,KACEF,SAAS,CAACC,OAAV,CAAkBC,QAAlB,CAA2B;AACzBC,IAAAA,IAAI,EAAE,IADmB;AAEzBC,IAAAA,QAAQ,EAAE;AAFe,GAA3B,CADF;AAKD,CANM;;AAQP,MAAMC,cAAc,GAAGC,KAAK,IAAI;AAC9B,QAAM;AACJ,kBAAcC,SADV;AAEJ,iBAAaC,QAFT;AAGJC,IAAAA,eAHI;AAIJC,IAAAA,KAJI;AAKJC,IAAAA,gBALI;AAMJC,IAAAA,gBANI;AAOJC,IAAAA,cAPI;AAQJC,IAAAA;AARI,MASFR,KATJ;AAWA,QAAMN,SAAS,GAAGP,MAAM,CAAC,IAAD,CAAxB;AAEAD,EAAAA,SAAS,CAAC,MAAM;AACd,UAAMuB,KAAK,GAAGC,UAAU,CAACjB,SAAS,CAACC,SAAD,CAAV,EAAuB,IAAvB,CAAxB;AACA,WAAO,MAAMe,KAAK,IAAIE,YAAY,CAACF,KAAD,CAAlC;AACD,GAHQ,EAGN,EAHM,CAAT;AAKA,sBACE;AAAK,IAAA,SAAS,EAAEjB,KAAK,CAACoB,aAAtB;AAAqC,kBAAYX,SAAjD;AAA4D,iBAAWC;AAAvE,kBACE,oBAAC,iBAAD,eACMC,eADN;AAEE,IAAA,IAAI,EAAE,KAFR;AAGE,IAAA,gBAAgB,EAAE,MAHpB;AAIE,IAAA,QAAQ,MAJV;AAKE,iBAAU,gBALZ;AAME,IAAA,SAAS,EAAEX,KAAK,CAACqB,MANnB;AAOE,IAAA,oBAAoB,EAAErB,KAAK,CAACsB;AAP9B,KADF,eAUE;AAAK,IAAA,SAAS,EAAEtB,KAAK,CAACuB;AAAtB,kBACE;AAAK,IAAA,SAAS,EAAEvB,KAAK,CAACY;AAAtB,KAA8BA,KAA9B,CADF,eAEE;AAAK,IAAA,GAAG,EAAEV,SAAV;AAAqB,IAAA,SAAS,EAAEF,KAAK,CAACwB;AAAtC,kBACE,oBAAC,0BAAD,eAAgCX,gBAAhC;AAAkD,IAAA,SAAS,EAAEb,KAAK,CAACyB;AAAnE,KADF,eAEE,oBAAC,0BAAD,eACMX,gBADN;AAEE,IAAA,cAAc,EAAE,IAFlB;AAGE,IAAA,SAAS,EAAEd,KAAK,CAAC0B;AAHnB,KAFF,CAFF,eAUE;AAAK,IAAA,SAAS,EAAE1B,KAAK,CAAC2B;AAAtB,kBACE,oBAAC,UAAD,eACMZ,cADN;AAEE,IAAA,SAAS,EAAEf,KAAK,CAAC4B,YAFnB;AAGE,iBAAU;AAHZ,KADF,eAME,oBAAC,UAAD,eAAgBZ,mBAAhB;AAAqC,IAAA,SAAS,EAAEhB,KAAK,CAAC4B;AAAtD,KANF,CAVF,CAVF,CADF;AAgCD,CAnDD;;AAqDArB,cAAc,CAACsB,SAAf,2CAA2B;AACzB,gBAAcjC,SAAS,CAACkC,MADC;AAEzB,eAAalC,SAAS,CAACkC,MAFE;AAGzBnB,EAAAA,eAAe,EAAEf,SAAS,CAACmC,KAAV,CAAgBlC,iBAAiB,CAACgC,SAAlC,CAHQ;AAIzBjB,EAAAA,KAAK,EAAEhB,SAAS,CAACkC,MAJQ;AAKzBjB,EAAAA,gBAAgB,EAAEjB,SAAS,CAACmC,KAAV,CAAgBhC,0BAA0B,CAAC8B,SAA3C,CALO;AAMzBf,EAAAA,gBAAgB,EAAElB,SAAS,CAACmC,KAAV,CAAgBhC,0BAA0B,CAAC8B,SAA3C,CANO;AAOzBd,EAAAA,cAAc,EAAEnB,SAAS,CAACmC,KAAV,CAAgB;AAC9BC,IAAAA,KAAK,EAAEpC,SAAS,CAACkC,MADa;AAE9BG,IAAAA,OAAO,EAAErC,SAAS,CAACsC,IAFW;AAG9BC,IAAAA,IAAI,EAAEvC,SAAS,CAACkC;AAHc,GAAhB,CAPS;AAYzBd,EAAAA,mBAAmB,EAAEpB,SAAS,CAACmC,KAAV,CAAgB;AACnCC,IAAAA,KAAK,EAAEpC,SAAS,CAACkC,MADkB;AAEnCG,IAAAA,OAAO,EAAErC,SAAS,CAACsC,IAFgB;AAGnCC,IAAAA,IAAI,EAAEvC,SAAS,CAACkC;AAHmB,GAAhB;AAZI,CAA3B;AAmBA,eAAevB,cAAf","sourcesContent":["import React, {useEffect, useRef} from 'react';\nimport PropTypes from 'prop-types';\nimport AtomLottieWrapper from '../../atom/lottie-wrapper';\nimport ButtonLink from '../../atom/button-link';\nimport MoleculeReviewCardCongrats from '../../molecule/review-card-congrats';\nimport style from './style.css';\n\nexport const setScroll = container => () => {\n  container.current?.scrollTo &&\n    container.current.scrollTo({\n      left: 1000,\n      behavior: 'smooth'\n    });\n};\n\nconst ReviewCongrats = props => {\n  const {\n    'aria-label': ariaLabel,\n    'data-name': dataName,\n    animationLottie,\n    title,\n    cardCongratsStar,\n    cardCongratsRank,\n    buttonRevising,\n    buttonRevisingSkill\n  } = props;\n\n  const container = useRef(null);\n\n  useEffect(() => {\n    const timer = setTimeout(setScroll(container), 2000);\n    return () => timer && clearTimeout(timer);\n  }, []);\n\n  return (\n    <div className={style.mainContainer} aria-label={ariaLabel} data-name={dataName}>\n      <AtomLottieWrapper\n        {...animationLottie}\n        loop={false}\n        animationControl={'play'}\n        autoplay\n        data-name=\"lottie-wrapper\"\n        className={style.lottie}\n        backupImageClassName={style.ie11Backup}\n      />\n      <div className={style.containerCongrats}>\n        <div className={style.title}>{title}</div>\n        <div ref={container} className={style.containerCards}>\n          <MoleculeReviewCardCongrats {...cardCongratsStar} className={style.cardStar} />\n          <MoleculeReviewCardCongrats\n            {...cardCongratsRank}\n            timerAnimation={1800}\n            className={style.cardRank}\n          />\n        </div>\n        <div className={style.buttonContainer}>\n          <ButtonLink\n            {...buttonRevising}\n            className={style.buttonRevise}\n            data-name=\"revise-skill-link\"\n          />\n          <ButtonLink {...buttonRevisingSkill} className={style.buttonRevise} />\n        </div>\n      </div>\n    </div>\n  );\n};\n\nReviewCongrats.propTypes = {\n  'aria-label': PropTypes.string,\n  'data-name': PropTypes.string,\n  animationLottie: PropTypes.shape(AtomLottieWrapper.propTypes),\n  title: PropTypes.string,\n  cardCongratsStar: PropTypes.shape(MoleculeReviewCardCongrats.propTypes),\n  cardCongratsRank: PropTypes.shape(MoleculeReviewCardCongrats.propTypes),\n  buttonRevising: PropTypes.shape({\n    label: PropTypes.string,\n    onClick: PropTypes.func,\n    type: PropTypes.string\n  }),\n  buttonRevisingSkill: PropTypes.shape({\n    label: PropTypes.string,\n    onClick: PropTypes.func,\n    type: PropTypes.string\n  })\n};\n\nexport default ReviewCongrats;\n"],"file":"index.js"}

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

@@ -1,7 +1,9 @@
 @value breakpoints: "../../variables/breakpoints.css";
+@value tablet from breakpoints;
 @value mobile from breakpoints;
 @value colors: "../../variables/colors.css";
 @value cm_blue_900 from colors;
+@value white from colors;
 
 @keyframes translateTitle {
   0% {
@@ -63,7 +65,35 @@
   }
 }
 
+.mainContainer {
+  height: 100%;
+  width: 100%;
+  position: relative;
+  overflow: hidden;
+}
+
+.lottie {
+  display: flex;
+  position: relative;
+  height: 135%;
+  width: 135%;
+  transform: translate(-13%, -13%);
+  z-index: 1;
+}
+
+.ie11Backup {
+  position: relative;
+  transform: translate(0%, 10%);
+  height: 80%;
+  width: 80%;
+  margin: 0 auto;
+  z-index: 1;
+}
+
 .containerCongrats {
+  position: absolute;
+  top: 0;
+  left: 0;
   align-items: center;
   display: flex;
   flex-direction: column;
@@ -71,7 +101,7 @@
   overflow-y: auto;
   height: 100%;
   width: 100%;
-  position: absolute;
+  z-index: 2;
 }
 
 .title {
@@ -134,6 +164,20 @@ _:-ms-fullscreen,
   padding: 12px 16px;
 }
 
+@media tablet {
+  .lottie {
+    height: 195%;
+    width: 195%;
+    transform: translate(-25%, -25%);
+  }
+
+  .ie11Backup {
+    height: 60%;
+    width: 60%;
+    transform: translate(0%, 30%);
+  }
+}
+
 @media mobile {
   @keyframes translateTitle {
     0% {
@@ -175,11 +219,24 @@ _:-ms-fullscreen,
     }
   }
 
-  .containerCongrats {
-    width: 100%;
+  .mainContainer {
     height: 100%;
-    overflow-x: hidden;
-    overflow-y: auto;
+    width: 100%;
+    overflow: hidden;
+    position: relative;
+    z-index: 3;
+  }
+
+  .lottie {
+    height: 410%;
+    width: 410%;
+    transform: translate(-38%, -38%);
+  }
+
+  .ie11Backup {
+    height: 85%;
+    width: 85%;
+    transform: translate(-35%, 10%);
   }
 
   .title {
@@ -196,6 +253,12 @@ _:-ms-fullscreen,
     padding-bottom: 10px;
   }
 
+  /* ie fallback */
+  _:-ms-fullscreen,
+  :root .containerCards {
+    margin-top: 80px;
+  }
+
   .cardStar {
     animation: translateYCardStar 0.6s ease-out 0.8s forwards,
       translateXCardStar 0.2s ease-in-out 2s forwards;

package/es/organism/review-congrats/test/fixtures/default.js

@@ -1,8 +1,15 @@
+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 animationLottie from '../../../../atom/lottie-wrapper/test/fixtures/confetti';
 import moleculeReviewCardStar from '../../../../molecule/review-card-congrats/test/fixtures/star';
 import moleculeReviewCardRank from '../../../../molecule/review-card-congrats/test/fixtures/rank';
 export const defaultProps = {
   'aria-label': 'Review Congratulations',
   'data-name': 'review-congrats',
+  animationLottie: _extends(_extends({}, animationLottie.props), {}, {
+    height: undefined,
+    width: undefined
+  }),
   title: 'Congratulations!',
   cardCongratsStar: moleculeReviewCardStar.props,
   cardCongratsRank: moleculeReviewCardRank.props,