@coorpacademy/components 10.19.1-alpha.0 → 10.19.2

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

@@ -1 +1 @@
-{"version":3,"sources":["../../../src/organism/review-congrats/index.js"],"names":["setScroll","container","current","scrollTo","left","behavior","ReviewCongrats","props","ariaLabel","dataName","title","cardCongratsStar","cardCongratsRank","buttonRevising","buttonRevisingSkill","timer","setTimeout","clearTimeout","style","containerCongrats","containerCards","cardStar","cardRank","buttonContainer","buttonRevise","propTypes","PropTypes","string","shape","MoleculeReviewCardCongrats","label","onClick","func","type"],"mappings":";;;;;AAAA;;AACA;;AACA;;AACA;;AACA;;;;;;;;;;AAEO,MAAMA,SAAS,GAAGC,SAAS,IAAI,MAAM;AAC1CA,EAAAA,SAAS,CAACC,OAAV,CAAkBC,QAAlB,CAA2B;AACzBC,IAAAA,IAAI,EAAE,IADmB;AAEzBC,IAAAA,QAAQ,EAAE;AAFe,GAA3B;AAID,CALM;;;;AAOP,MAAMC,cAAc,GAAGC,KAAK,IAAI;AAC9B,QAAM;AACJ,kBAAcC,SADV;AAEJ,iBAAaC,QAFT;AAGJC,IAAAA,KAHI;AAIJC,IAAAA,gBAJI;AAKJC,IAAAA,gBALI;AAMJC,IAAAA,cANI;AAOJC,IAAAA;AAPI,MAQFP,KARJ;AAUA,QAAMN,SAAS,GAAG,mBAAO,IAAP,CAAlB;AAEA,wBAAU,MAAM;AACd,UAAMc,KAAK,GAAGC,UAAU,CAAChB,SAAS,CAACC,SAAD,CAAV,EAAuB,IAAvB,CAAxB;AACA,WAAO,MAAMc,KAAK,IAAIE,YAAY,CAACF,KAAD,CAAlC;AACD,GAHD,EAGG,EAHH;AAKA,sBACE;AAAK,IAAA,SAAS,EAAEG,eAAMC,iBAAtB;AAAyC,kBAAYX,SAArD;AAAgE,iBAAWC;AAA3E,kBACE;AAAK,IAAA,SAAS,EAAES,eAAMR;AAAtB,KAA8BA,KAA9B,CADF,eAEE;AAAK,IAAA,GAAG,EAAET,SAAV;AAAqB,IAAA,SAAS,EAAEiB,eAAME;AAAtC,kBACE,6BAAC,2BAAD,eAAgCT,gBAAhC;AAAkD,IAAA,SAAS,EAAEO,eAAMG;AAAnE,KADF,eAEE,6BAAC,2BAAD,eACMT,gBADN;AAEE,IAAA,cAAc,EAAE,IAFlB;AAGE,IAAA,SAAS,EAAEM,eAAMI;AAHnB,KAFF,CAFF,eAUE;AAAK,IAAA,SAAS,EAAEJ,eAAMK;AAAtB,kBACE,6BAAC,mBAAD,eACMV,cADN;AAEE,IAAA,SAAS,EAAEK,eAAMM,YAFnB;AAGE,iBAAU;AAHZ,KADF,eAME,6BAAC,mBAAD,eAAgBV,mBAAhB;AAAqC,IAAA,SAAS,EAAEI,eAAMM;AAAtD,KANF,CAVF,CADF;AAqBD,CAvCD;;AAyCAlB,cAAc,CAACmB,SAAf,2CAA2B;AACzB,gBAAcC,mBAAUC,MADC;AAEzB,eAAaD,mBAAUC,MAFE;AAGzBjB,EAAAA,KAAK,EAAEgB,mBAAUC,MAHQ;AAIzBhB,EAAAA,gBAAgB,EAAEe,mBAAUE,KAAV,CAAgBC,4BAA2BJ,SAA3C,CAJO;AAKzBb,EAAAA,gBAAgB,EAAEc,mBAAUE,KAAV,CAAgBC,4BAA2BJ,SAA3C,CALO;AAMzBZ,EAAAA,cAAc,EAAEa,mBAAUE,KAAV,CAAgB;AAC9BE,IAAAA,KAAK,EAAEJ,mBAAUC,MADa;AAE9BI,IAAAA,OAAO,EAAEL,mBAAUM,IAFW;AAG9BC,IAAAA,IAAI,EAAEP,mBAAUC;AAHc,GAAhB,CANS;AAWzBb,EAAAA,mBAAmB,EAAEY,mBAAUE,KAAV,CAAgB;AACnCE,IAAAA,KAAK,EAAEJ,mBAAUC,MADkB;AAEnCI,IAAAA,OAAO,EAAEL,mBAAUM,IAFgB;AAGnCC,IAAAA,IAAI,EAAEP,mBAAUC;AAHmB,GAAhB;AAXI,CAA3B;eAkBerB,c","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":["setScroll","container","current","scrollTo","left","behavior","ReviewCongrats","props","ariaLabel","dataName","animationLottie","title","cardCongratsStar","cardCongratsRank","buttonRevising","buttonRevisingSkill","timer","setTimeout","clearTimeout","style","mainContainer","lottie","ie11Backup","containerCongrats","containerCards","cardStar","cardRank","buttonContainer","buttonRevise","propTypes","PropTypes","string","shape","AtomLottieWrapper","MoleculeReviewCardCongrats","label","onClick","func","type"],"mappings":"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","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/lib/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/lib/organism/review-congrats/test/fixtures/default.js

@@ -3,15 +3,23 @@
 exports.__esModule = true;
 exports.default = exports.defaultProps = void 0;
 
+var _confetti = _interopRequireDefault(require("../../../../atom/lottie-wrapper/test/fixtures/confetti"));
+
 var _star = _interopRequireDefault(require("../../../../molecule/review-card-congrats/test/fixtures/star"));
 
 var _rank = _interopRequireDefault(require("../../../../molecule/review-card-congrats/test/fixtures/rank"));
 
 function _interopRequireDefault(obj) { return obj && obj.__esModule ? obj : { default: obj }; }
 
+function _extends() { _extends = Object.assign || function (target) { for (var i = 1; i < arguments.length; i++) { var source = arguments[i]; for (var key in source) { if (Object.prototype.hasOwnProperty.call(source, key)) { target[key] = source[key]; } } } return target; }; return _extends.apply(this, arguments); }
+
 const defaultProps = {
   'aria-label': 'Review Congratulations',
   'data-name': 'review-congrats',
+  animationLottie: _extends(_extends({}, _confetti.default.props), {}, {
+    height: undefined,
+    width: undefined
+  }),
   title: 'Congratulations!',
   cardCongratsStar: _star.default.props,
   cardCongratsRank: _rank.default.props,

package/lib/organism/review-congrats/test/fixtures/default.js.map

@@ -1 +1 @@
-{"version":3,"sources":["../../../../../src/organism/review-congrats/test/fixtures/default.js"],"names":["defaultProps","title","cardCongratsStar","moleculeReviewCardStar","props","cardCongratsRank","moleculeReviewCardRank","buttonRevising","label","onClick","console","log","type","buttonRevisingSkill"],"mappings":";;;;;AAAA;;AACA;;;;AAEO,MAAMA,YAAY,GAAG;AAC1B,gBAAc,wBADY;AAE1B,eAAa,iBAFa;AAG1BC,EAAAA,KAAK,EAAE,kBAHmB;AAI1BC,EAAAA,gBAAgB,EAAEC,cAAuBC,KAJf;AAK1BC,EAAAA,gBAAgB,EAAEC,cAAuBF,KALf;AAM1BG,EAAAA,cAAc,EAAE;AACd,kBAAc,0BADA;AAEdC,IAAAA,KAAK,EAAE,mBAFO;AAGdC,IAAAA,OAAO,EAAE,MAAMC,OAAO,CAACC,GAAR,CAAY,mBAAZ,CAHD;AAIdC,IAAAA,IAAI,EAAE;AAJQ,GANU;AAY1BC,EAAAA,mBAAmB,EAAE;AACnBL,IAAAA,KAAK,EAAE,sBADY;AAEnB,kBAAc,6BAFK;AAGnBC,IAAAA,OAAO,EAAE,MAAMC,OAAO,CAACC,GAAR,CAAY,sBAAZ,CAHI;AAInBC,IAAAA,IAAI,EAAE;AAJa;AAZK,CAArB;;eAoBQ;AAACR,EAAAA,KAAK,EAAEJ;AAAR,C","sourcesContent":["import moleculeReviewCardStar from '../../../../molecule/review-card-congrats/test/fixtures/star';\nimport moleculeReviewCardRank from '../../../../molecule/review-card-congrats/test/fixtures/rank';\n\nexport const defaultProps = {\n  'aria-label': 'Review Congratulations',\n  'data-name': 'review-congrats',\n  title: 'Congratulations!',\n  cardCongratsStar: moleculeReviewCardStar.props,\n  cardCongratsRank: moleculeReviewCardRank.props,\n  buttonRevising: {\n    'aria-label': 'Continue revising button',\n    label: 'Continue revising',\n    onClick: () => console.log('Continue revising'),\n    type: 'tertiary'\n  },\n  buttonRevisingSkill: {\n    label: 'Revise another skill',\n    'aria-label': 'Revise another skill button',\n    onClick: () => console.log('Revise another skill'),\n    type: 'primary'\n  }\n};\n\nexport default {props: defaultProps};\n"],"file":"default.js"}
+{"version":3,"sources":["../../../../../src/organism/review-congrats/test/fixtures/default.js"],"names":["defaultProps","animationLottie","props","height","undefined","width","title","cardCongratsStar","moleculeReviewCardStar","cardCongratsRank","moleculeReviewCardRank","buttonRevising","label","onClick","console","log","type","buttonRevisingSkill"],"mappings":";;;;;AAAA;;AACA;;AACA;;;;;;AAEO,MAAMA,YAAY,GAAG;AAC1B,gBAAc,wBADY;AAE1B,eAAa,iBAFa;AAG1BC,EAAAA,eAAe,wBAAMA,kBAAgBC,KAAtB;AAA6BC,IAAAA,MAAM,EAAEC,SAArC;AAAgDC,IAAAA,KAAK,EAAED;AAAvD,IAHW;AAI1BE,EAAAA,KAAK,EAAE,kBAJmB;AAK1BC,EAAAA,gBAAgB,EAAEC,cAAuBN,KALf;AAM1BO,EAAAA,gBAAgB,EAAEC,cAAuBR,KANf;AAO1BS,EAAAA,cAAc,EAAE;AACd,kBAAc,0BADA;AAEdC,IAAAA,KAAK,EAAE,mBAFO;AAGdC,IAAAA,OAAO,EAAE,MAAMC,OAAO,CAACC,GAAR,CAAY,mBAAZ,CAHD;AAIdC,IAAAA,IAAI,EAAE;AAJQ,GAPU;AAa1BC,EAAAA,mBAAmB,EAAE;AACnBL,IAAAA,KAAK,EAAE,sBADY;AAEnB,kBAAc,6BAFK;AAGnBC,IAAAA,OAAO,EAAE,MAAMC,OAAO,CAACC,GAAR,CAAY,sBAAZ,CAHI;AAInBC,IAAAA,IAAI,EAAE;AAJa;AAbK,CAArB;;eAqBQ;AAACd,EAAAA,KAAK,EAAEF;AAAR,C","sourcesContent":["import animationLottie from '../../../../atom/lottie-wrapper/test/fixtures/confetti';\nimport moleculeReviewCardStar from '../../../../molecule/review-card-congrats/test/fixtures/star';\nimport moleculeReviewCardRank from '../../../../molecule/review-card-congrats/test/fixtures/rank';\n\nexport const defaultProps = {\n  'aria-label': 'Review Congratulations',\n  'data-name': 'review-congrats',\n  animationLottie: {...animationLottie.props, height: undefined, width: undefined},\n  title: 'Congratulations!',\n  cardCongratsStar: moleculeReviewCardStar.props,\n  cardCongratsRank: moleculeReviewCardRank.props,\n  buttonRevising: {\n    'aria-label': 'Continue revising button',\n    label: 'Continue revising',\n    onClick: () => console.log('Continue revising'),\n    type: 'tertiary'\n  },\n  buttonRevisingSkill: {\n    label: 'Revise another skill',\n    'aria-label': 'Revise another skill button',\n    onClick: () => console.log('Revise another skill'),\n    type: 'primary'\n  }\n};\n\nexport default {props: defaultProps};\n"],"file":"default.js"}

package/lib/organism/review-header/index.js.map

@@ -1 +1 @@
-{"version":3,"sources":["../../../src/organism/review-header/index.js"],"names":["ReviewHeader","props","context","steps","mode","skillName","ariaLabel","closeButtonAriaLabel","onQuitClick","hiddenSteps","skin","primarySkinColor","buttonProps","icon","onClick","size","className","style","review","stepsWrapper","stepsWrapperAnimation","headerWrapper","titlesWrapper","title","color","iconButtonWrapper","propTypes","ReviewHeaderStep","PropTypes","string","isRequired","func","bool"],"mappings":";;;;;AAAA;;AACA;;AACA;;AACA;;AACA;;AACA;;AACA;;;;AAEA,MAAMA,YAAY,GAAG,CAACC,KAAD,EAAQC,OAAR,KAAoB;AACvC,QAAM;AACJC,IAAAA,KADI;AAEJC,IAAAA,IAFI;AAGJC,IAAAA,SAHI;AAIJ,kBAAcC,SAJV;AAKJC,IAAAA,oBALI;AAMJC,IAAAA,WANI;AAOJC,IAAAA;AAPI,MAQFR,KARJ;AASA,QAAM;AAACS,IAAAA;AAAD,MAASR,OAAf;AACA,QAAMS,gBAAgB,GAAG,oBAAM,SAAN,EAAiB,gBAAjB,EAAmCD,IAAnC,CAAzB;AAEA,QAAME,WAAW,GAAG;AAClBC,IAAAA,IAAI,EAAE,OADY;AAElB,iBAAa,4BAFK;AAGlB,kBAAcN,oBAHI;AAIlBO,IAAAA,OAAO,EAAEN,WAJS;AAKlBO,IAAAA,IAAI,EAAE,YALY;AAMlBC,IAAAA,SAAS,EAAEC,eAAMC;AANC,GAApB;AASA,QAAMC,YAAY,GAAG,yBACnBF,eAAME,YADa,EAEnBV,WAAW,GAAGQ,eAAMG,qBAAT,GAAiC,IAFzB,CAArB;AAKA,sBACE;AAAK,IAAA,SAAS,EAAEH,eAAMI,aAAtB;AAAqC,iBAAU,eAA/C;AAA+D,kBAAYf;AAA3E,kBACE;AAAK,IAAA,SAAS,EAAEW,eAAMK;AAAtB,kBACE;AAAK,IAAA,SAAS,EAAEL,eAAMM,KAAtB;AAA6B,IAAA,KAAK,EAAEnB,IAApC;AAA0C,kBAAYA,IAAtD;AAA4D,iBAAU;AAAtE,KACGA,IADH,CADF,eAIE;AACE,IAAA,SAAS,EAAEa,eAAMZ,SADnB;AAEE,IAAA,KAAK,EAAE;AACLmB,MAAAA,KAAK,EAAEb;AADF,KAFT;AAKE,IAAA,KAAK,EAAEN,SALT;AAME,kBAAYA,SANd;AAOE,iBAAU;AAPZ,KASGA,SATH,CAJF,CADF,eAkBE;AAAK,IAAA,SAAS,EAAEc;AAAhB,kBACE,6BAAC,0BAAD;AAAkB,IAAA,KAAK,EAAEhB,KAAzB;AAAgC,IAAA,GAAG,EAAE;AAArC,IADF,CAlBF,eAsBE;AAAK,IAAA,SAAS,EAAEc,eAAMQ,iBAAtB;AAAyC,iBAAU;AAAnD,kBACE,6BAAC,2BAAD,EAAwBb,WAAxB,CADF,CAtBF,CADF;AA4BD,CAvDD;;AAyDAZ,YAAY,CAAC0B,SAAb,2CAAyB;AACvBvB,EAAAA,KAAK,EAAEwB,2BAAiBD,SAAjB,CAA2BvB,KADX;AAEvBC,EAAAA,IAAI,EAAEwB,mBAAUC,MAAV,CAAiBC,UAFA;AAGvBzB,EAAAA,SAAS,EAAEuB,mBAAUC,MAAV,CAAiBC,UAHL;AAIvB,gBAAcF,mBAAUC,MAJD;AAKvBtB,EAAAA,oBAAoB,EAAEqB,mBAAUC,MALT;AAMvBrB,EAAAA,WAAW,EAAEoB,mBAAUG,IANA;AAOvBtB,EAAAA,WAAW,EAAEmB,mBAAUI;AAPA,CAAzB;eAUehC,Y","sourcesContent":["import React from 'react';\nimport PropTypes from 'prop-types';\nimport classnames from 'classnames';\nimport getOr from 'lodash/fp/getOr';\nimport ButtonLinkIconOnly from '../../atom/button-link-icon-only';\nimport ReviewHeaderStep from '../../molecule/review-header-steps';\nimport style from './style.css';\n\nconst ReviewHeader = (props, context) => {\n  const {\n    steps,\n    mode,\n    skillName,\n    'aria-label': ariaLabel,\n    closeButtonAriaLabel,\n    onQuitClick,\n    hiddenSteps\n  } = props;\n  const {skin} = context;\n  const primarySkinColor = getOr('#00B0FF', 'common.primary', skin);\n\n  const buttonProps = {\n    icon: 'close',\n    'data-name': 'review-header-close-button',\n    'aria-label': closeButtonAriaLabel,\n    onClick: onQuitClick,\n    size: 'responsive',\n    className: style.review\n  };\n\n  const stepsWrapper = classnames(\n    style.stepsWrapper,\n    hiddenSteps ? style.stepsWrapperAnimation : null\n  );\n\n  return (\n    <div className={style.headerWrapper} data-name=\"review-header\" aria-label={ariaLabel}>\n      <div className={style.titlesWrapper}>\n        <div className={style.title} title={mode} aria-label={mode} data-name=\"review-header-mode\">\n          {mode}\n        </div>\n        <div\n          className={style.skillName}\n          style={{\n            color: primarySkinColor\n          }}\n          title={skillName}\n          aria-label={skillName}\n          data-name=\"review-header-skill-name\"\n        >\n          {skillName}\n        </div>\n      </div>\n\n      <div className={stepsWrapper}>\n        <ReviewHeaderStep steps={steps} key={'review-header-steps'} />\n      </div>\n\n      <div className={style.iconButtonWrapper} data-name=\"review-header-close-button-wrapper\">\n        <ButtonLinkIconOnly {...buttonProps} />\n      </div>\n    </div>\n  );\n};\n\nReviewHeader.propTypes = {\n  steps: ReviewHeaderStep.propTypes.steps,\n  mode: PropTypes.string.isRequired,\n  skillName: PropTypes.string.isRequired,\n  'aria-label': PropTypes.string,\n  closeButtonAriaLabel: PropTypes.string,\n  onQuitClick: PropTypes.func,\n  hiddenSteps: PropTypes.bool\n};\n\nexport default ReviewHeader;\n"],"file":"index.js"}
+{"version":3,"sources":["../../../src/organism/review-header/index.js"],"names":["ReviewHeader","props","context","steps","mode","skillName","ariaLabel","closeButtonAriaLabel","onQuitClick","hiddenSteps","skin","primarySkinColor","buttonProps","icon","onClick","size","className","style","review","stepsWrapper","stepsWrapperAnimation","headerWrapper","titlesWrapper","title","color","iconButtonWrapper","propTypes","ReviewHeaderSteps","PropTypes","string","isRequired","func","bool"],"mappings":";;;;;AAAA;;AACA;;AACA;;AACA;;AACA;;AACA;;AACA;;;;AAEA,MAAMA,YAAY,GAAG,CAACC,KAAD,EAAQC,OAAR,KAAoB;AACvC,QAAM;AACJC,IAAAA,KADI;AAEJC,IAAAA,IAFI;AAGJC,IAAAA,SAHI;AAIJ,kBAAcC,SAJV;AAKJC,IAAAA,oBALI;AAMJC,IAAAA,WANI;AAOJC,IAAAA;AAPI,MAQFR,KARJ;AASA,QAAM;AAACS,IAAAA;AAAD,MAASR,OAAf;AACA,QAAMS,gBAAgB,GAAG,oBAAM,SAAN,EAAiB,gBAAjB,EAAmCD,IAAnC,CAAzB;AAEA,QAAME,WAAW,GAAG;AAClBC,IAAAA,IAAI,EAAE,OADY;AAElB,iBAAa,4BAFK;AAGlB,kBAAcN,oBAHI;AAIlBO,IAAAA,OAAO,EAAEN,WAJS;AAKlBO,IAAAA,IAAI,EAAE,YALY;AAMlBC,IAAAA,SAAS,EAAEC,eAAMC;AANC,GAApB;AASA,QAAMC,YAAY,GAAG,yBACnBF,eAAME,YADa,EAEnBV,WAAW,GAAGQ,eAAMG,qBAAT,GAAiC,IAFzB,CAArB;AAKA,sBACE;AAAK,IAAA,SAAS,EAAEH,eAAMI,aAAtB;AAAqC,iBAAU,eAA/C;AAA+D,kBAAYf;AAA3E,kBACE;AAAK,IAAA,SAAS,EAAEW,eAAMK;AAAtB,kBACE;AAAK,IAAA,SAAS,EAAEL,eAAMM,KAAtB;AAA6B,IAAA,KAAK,EAAEnB,IAApC;AAA0C,kBAAYA,IAAtD;AAA4D,iBAAU;AAAtE,KACGA,IADH,CADF,eAIE;AACE,IAAA,SAAS,EAAEa,eAAMZ,SADnB;AAEE,IAAA,KAAK,EAAE;AACLmB,MAAAA,KAAK,EAAEb;AADF,KAFT;AAKE,IAAA,KAAK,EAAEN,SALT;AAME,kBAAYA,SANd;AAOE,iBAAU;AAPZ,KASGA,SATH,CAJF,CADF,eAkBE;AAAK,IAAA,SAAS,EAAEc;AAAhB,kBACE,6BAAC,0BAAD;AAAmB,IAAA,KAAK,EAAEhB,KAA1B;AAAiC,IAAA,GAAG,EAAE;AAAtC,IADF,CAlBF,eAsBE;AAAK,IAAA,SAAS,EAAEc,eAAMQ,iBAAtB;AAAyC,iBAAU;AAAnD,kBACE,6BAAC,2BAAD,EAAwBb,WAAxB,CADF,CAtBF,CADF;AA4BD,CAvDD;;AAyDAZ,YAAY,CAAC0B,SAAb,2CAAyB;AACvBvB,EAAAA,KAAK,EAAEwB,2BAAkBD,SAAlB,CAA4BvB,KADZ;AAEvBC,EAAAA,IAAI,EAAEwB,mBAAUC,MAAV,CAAiBC,UAFA;AAGvBzB,EAAAA,SAAS,EAAEuB,mBAAUC,MAAV,CAAiBC,UAHL;AAIvB,gBAAcF,mBAAUC,MAJD;AAKvBtB,EAAAA,oBAAoB,EAAEqB,mBAAUC,MALT;AAMvBrB,EAAAA,WAAW,EAAEoB,mBAAUG,IANA;AAOvBtB,EAAAA,WAAW,EAAEmB,mBAAUI;AAPA,CAAzB;eAUehC,Y","sourcesContent":["import React from 'react';\nimport PropTypes from 'prop-types';\nimport classnames from 'classnames';\nimport getOr from 'lodash/fp/getOr';\nimport ButtonLinkIconOnly from '../../atom/button-link-icon-only';\nimport ReviewHeaderSteps from '../../molecule/review-header-steps';\nimport style from './style.css';\n\nconst ReviewHeader = (props, context) => {\n  const {\n    steps,\n    mode,\n    skillName,\n    'aria-label': ariaLabel,\n    closeButtonAriaLabel,\n    onQuitClick,\n    hiddenSteps\n  } = props;\n  const {skin} = context;\n  const primarySkinColor = getOr('#00B0FF', 'common.primary', skin);\n\n  const buttonProps = {\n    icon: 'close',\n    'data-name': 'review-header-close-button',\n    'aria-label': closeButtonAriaLabel,\n    onClick: onQuitClick,\n    size: 'responsive',\n    className: style.review\n  };\n\n  const stepsWrapper = classnames(\n    style.stepsWrapper,\n    hiddenSteps ? style.stepsWrapperAnimation : null\n  );\n\n  return (\n    <div className={style.headerWrapper} data-name=\"review-header\" aria-label={ariaLabel}>\n      <div className={style.titlesWrapper}>\n        <div className={style.title} title={mode} aria-label={mode} data-name=\"review-header-mode\">\n          {mode}\n        </div>\n        <div\n          className={style.skillName}\n          style={{\n            color: primarySkinColor\n          }}\n          title={skillName}\n          aria-label={skillName}\n          data-name=\"review-header-skill-name\"\n        >\n          {skillName}\n        </div>\n      </div>\n\n      <div className={stepsWrapper}>\n        <ReviewHeaderSteps steps={steps} key={'review-header-steps'} />\n      </div>\n\n      <div className={style.iconButtonWrapper} data-name=\"review-header-close-button-wrapper\">\n        <ButtonLinkIconOnly {...buttonProps} />\n      </div>\n    </div>\n  );\n};\n\nReviewHeader.propTypes = {\n  steps: ReviewHeaderSteps.propTypes.steps,\n  mode: PropTypes.string.isRequired,\n  skillName: PropTypes.string.isRequired,\n  'aria-label': PropTypes.string,\n  closeButtonAriaLabel: PropTypes.string,\n  onQuitClick: PropTypes.func,\n  hiddenSteps: PropTypes.bool\n};\n\nexport default ReviewHeader;\n"],"file":"index.js"}

package/lib/organism/review-header/style.css

@@ -51,7 +51,7 @@
 .stepsWrapperAnimation {
   opacity: 0;
   transform: translate(-50%, -180%);
-  transition: opacity 0.5s ease-in-out 0.5s, transform 0.5s ease-in-out 0.5s;
+  transition: opacity 0.5s ease-in-out, transform 0.5s ease-in-out;
 }
 
 .iconButtonWrapper {

package/lib/organism/review-header/test/fixtures/all-questions-ok.js

@@ -12,7 +12,9 @@ function _extends() { _extends = Object.assign || function (target) { for (var i
 const defaultHeaderProps = {
   mode: 'Revision mode',
   skillName: 'Agility',
-  onQuitClick: () => {},
+  onQuitClick: () => {
+    console.log('onQuitClick');
+  },
   'aria-label': 'aria-header-wrapper',
   closeButtonAriaLabel: 'aria-close-button'
 };

package/lib/organism/review-header/test/fixtures/all-questions-ok.js.map

@@ -1 +1 @@
-{"version":3,"sources":["../../../../../src/organism/review-header/test/fixtures/all-questions-ok.js"],"names":["defaultHeaderProps","mode","skillName","onQuitClick","closeButtonAriaLabel","props","steps","stepsProps"],"mappings":";;;;;AAAA;;;;;;AAEO,MAAMA,kBAAkB,GAAG;AAChCC,EAAAA,IAAI,EAAE,eAD0B;AAEhCC,EAAAA,SAAS,EAAE,SAFqB;AAGhCC,EAAAA,WAAW,EAAE,MAAM,CAAE,CAHW;AAIhC,gBAAc,qBAJkB;AAKhCC,EAAAA,oBAAoB,EAAE;AALU,CAA3B;;eAQQ;AACbC,EAAAA,KAAK,wBACAL,kBADA;AAEHM,IAAAA,KAAK,EAAEC,wBAAWF,KAAX,CAAiBC;AAFrB;AADQ,C","sourcesContent":["import stepsProps from '../../../../molecule/review-header-steps/test/fixtures/all-questions-ok';\n\nexport const defaultHeaderProps = {\n  mode: 'Revision mode',\n  skillName: 'Agility',\n  onQuitClick: () => {},\n  'aria-label': 'aria-header-wrapper',\n  closeButtonAriaLabel: 'aria-close-button'\n};\n\nexport default {\n  props: {\n    ...defaultHeaderProps,\n    steps: stepsProps.props.steps\n  }\n};\n"],"file":"all-questions-ok.js"}
+{"version":3,"sources":["../../../../../src/organism/review-header/test/fixtures/all-questions-ok.js"],"names":["defaultHeaderProps","mode","skillName","onQuitClick","console","log","closeButtonAriaLabel","props","steps","stepsProps"],"mappings":";;;;;AAAA;;;;;;AAEO,MAAMA,kBAAkB,GAAG;AAChCC,EAAAA,IAAI,EAAE,eAD0B;AAEhCC,EAAAA,SAAS,EAAE,SAFqB;AAGhCC,EAAAA,WAAW,EAAE,MAAM;AACjBC,IAAAA,OAAO,CAACC,GAAR,CAAY,aAAZ;AACD,GAL+B;AAMhC,gBAAc,qBANkB;AAOhCC,EAAAA,oBAAoB,EAAE;AAPU,CAA3B;;eAUQ;AACbC,EAAAA,KAAK,wBACAP,kBADA;AAEHQ,IAAAA,KAAK,EAAEC,wBAAWF,KAAX,CAAiBC;AAFrB;AADQ,C","sourcesContent":["import stepsProps from '../../../../molecule/review-header-steps/test/fixtures/all-questions-ok';\n\nexport const defaultHeaderProps = {\n  mode: 'Revision mode',\n  skillName: 'Agility',\n  onQuitClick: () => {\n    console.log('onQuitClick');\n  },\n  'aria-label': 'aria-header-wrapper',\n  closeButtonAriaLabel: 'aria-close-button'\n};\n\nexport default {\n  props: {\n    ...defaultHeaderProps,\n    steps: stepsProps.props.steps\n  }\n};\n"],"file":"all-questions-ok.js"}