@coorpacademy/components 10.17.3 → 10.19.1-alpha.0

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

@@ -0,0 +1,225 @@
+@value breakpoints: "../../variables/breakpoints.css";
+@value mobile from breakpoints;
+@value colors: "../../variables/colors.css";
+@value cm_blue_900 from colors;
+
+@keyframes translateTitle {
+  0% {
+    transform: translateY(50%) scale(1);
+  }
+  50% {
+    transform: translateY(50%) scale(1);
+  }
+  100% {
+    transform: translateY(-300%) scale(0.6);
+  }
+}
+
+@keyframes translateYCardStar {
+  0% {
+    opacity: 0;
+    transform: translateY(0%);
+  }
+  30% {
+    opacity: 0;
+    transform: translateY(40%);
+  }
+  100% {
+    opacity: 1;
+    transform: translateY(0%);
+  }
+}
+
+@keyframes translateXCardStar {
+  0% {
+    transform: translateX(50%);
+  }
+  100% {
+    transform: translateX(0%);
+  }
+}
+
+@keyframes translateCardRank {
+  0% {
+    position: absolute;
+    visibility: hidden;
+    z-index: -1;
+    opacity: 0;
+    transform: translateX(50%);
+  }
+  1% {
+    position: relative;
+    visibility: hidden;
+    z-index: -1;
+    opacity: 0;
+    transform: translateX(50%);
+  }
+  100% {
+    position: relative;
+    visibility: visible;
+    z-index: 0;
+    opacity: 1;
+    transform: translateX(0%);
+  }
+}
+
+.containerCongrats {
+  align-items: center;
+  display: flex;
+  flex-direction: column;
+  justify-content: center;
+  overflow-y: auto;
+  height: 100%;
+  width: 100%;
+  position: absolute;
+}
+
+.title {
+  color: cm_blue_900;
+  font-family: 'Gilroy';
+  font-size: 65px;
+  font-style: normal;
+  font-weight: 500;
+  position: relative;
+  top: 200px;
+  user-select: none;
+  animation: translateTitle 1.4s ease-out 0s forwards;
+}
+
+.containerCards {
+  display: flex;
+  align-items: center;
+  justify-content: center;
+  position: relative;
+}
+
+.cardStar {
+  animation: translateYCardStar 0.5s ease-out 0.8s forwards,
+    translateXCardStar 0.2s ease-in-out 2s forwards;
+  opacity: 0;
+}
+
+.cardRank {
+  animation: translateCardRank 0.2s ease-in-out 2s forwards;
+  position: absolute;
+  visibility: hidden;
+  opacity: 0;
+  margin-left: 32px;
+}
+
+/* ie fallback */
+_:-ms-fullscreen,
+:root .cardRank {
+  position: inherit;
+}
+
+_:-ms-fullscreen,
+:root .cardStar,
+.cardRank {
+  transform: translateX(50%);
+}
+
+.buttonContainer {
+  display: flex;
+  align-content: center;
+  align-items: center;
+  justify-content: center;
+  position: relative;
+  margin-top: 50px;
+}
+
+.buttonRevise {
+  width: fit-content;
+  margin-left: 16px;
+  padding: 12px 16px;
+}
+
+@media mobile {
+  @keyframes translateTitle {
+    0% {
+      transform: translateY(50%) scale(1);
+    }
+    50% {
+      transform: translateY(50%) scale(1);
+    }
+    100% {
+      transform: translateY(-400%) scale(0.9);
+    }
+  }
+
+  @keyframes translateXCardStar {
+    0% {
+      margin-left: calc(100% - (100% - 240px));
+      margin-right: calc((100% - 240px) / 2);
+    }
+    100% {
+      margin-left: 100%;
+      margin-right: calc((100% - 240px) / 2);
+    }
+  }
+
+  @keyframes translateCardRank {
+    0% {
+      opacity: 0;
+      position: absolute;
+      transform: translateX(0);
+      visibility: hidden;
+      z-index: -1;
+    }
+    100% {
+      opacity: 1;
+      position: relative;
+      transform: translateX(0);
+      visibility: visible;
+      z-index: 0;
+    }
+  }
+
+  .containerCongrats {
+    width: 100%;
+    height: 100%;
+    overflow-x: hidden;
+    overflow-y: auto;
+  }
+
+  .title {
+    animation: translateTitle 1.6s ease-out forwards;
+    font-size: 35px;
+  }
+
+  .containerCards {
+    width: 100%;
+    min-height: 350px;
+    overflow-x: auto;
+    overflow-y: hidden;
+    margin-top: 54px;
+    padding-bottom: 10px;
+  }
+
+  .cardStar {
+    animation: translateYCardStar 0.6s ease-out 0.8s forwards,
+      translateXCardStar 0.2s ease-in-out 2s forwards;
+    flex-shrink: 0;
+    opacity: 0;
+    transform: translateX(0);
+  }
+
+  .cardRank {
+    animation: translateCardRank 0.2s ease-in-out 2s forwards;
+    flex-shrink: 0;
+    margin-right: calc((100% - 240px) / 2);
+  }
+
+  .buttonContainer {
+    display: flex;
+    flex-direction: column;
+    margin-top: 25px;
+    width: 90%;
+  }
+
+  .buttonRevise {
+    margin-bottom: 8px;
+    margin-left: 0;
+    width: 100%;
+  }
+}

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

@@ -0,0 +1,36 @@
+"use strict";
+
+exports.__esModule = true;
+exports.default = exports.defaultProps = void 0;
+
+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 }; }
+
+const defaultProps = {
+  'aria-label': 'Review Congratulations',
+  'data-name': 'review-congrats',
+  title: 'Congratulations!',
+  cardCongratsStar: _star.default.props,
+  cardCongratsRank: _rank.default.props,
+  buttonRevising: {
+    'aria-label': 'Continue revising button',
+    label: 'Continue revising',
+    onClick: () => console.log('Continue revising'),
+    type: 'tertiary'
+  },
+  buttonRevisingSkill: {
+    label: 'Revise another skill',
+    'aria-label': 'Revise another skill button',
+    onClick: () => console.log('Revise another skill'),
+    type: 'primary'
+  }
+};
+exports.defaultProps = defaultProps;
+var _default = {
+  props: defaultProps
+};
+exports.default = _default;
+//# sourceMappingURL=default.js.map

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

@@ -0,0 +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"}

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

@@ -0,0 +1,22 @@
+"use strict";
+
+var _ava = _interopRequireDefault(require("ava"));
+
+var _forEach = _interopRequireDefault(require("lodash/forEach"));
+
+var _renderComponent = _interopRequireDefault(require("../../../test/helpers/render-component"));
+
+var _ = _interopRequireDefault(require(".."));
+
+var _default = _interopRequireDefault(require("./fixtures/default"));
+
+function _interopRequireDefault(obj) { return obj && obj.__esModule ? obj : { default: obj }; }
+
+(0, _ava.default)('Organism › OrganismReviewCongrats > should have valid propTypes', t => {
+  t.pass();
+  (0, _forEach.default)(_.default.propTypes, (value, key) => {
+    t.not(value, undefined, `PropType for "Organism.OrganismReviewCongrats.propTypes.${key}" may not be undefined. Did you mistype the propTypes definition?`);
+  });
+});
+(0, _ava.default)('Organism › OrganismReviewCongrats › Default › should be rendered', _renderComponent.default, _.default, _default.default);
+//# sourceMappingURL=fixtures.js.map

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

@@ -0,0 +1 @@
+{"version":3,"sources":["../../../../src/organism/review-congrats/test/fixtures.js"],"names":["t","pass","OrganismReviewCongrats","propTypes","value","key","not","undefined","renderComponentMacro","fixtureDefault"],"mappings":";;AAAA;;AACA;;AACA;;AACA;;AACA;;;;AAEA,kBAAK,iEAAL,EAAwEA,CAAC,IAAI;AAC3EA,EAAAA,CAAC,CAACC,IAAF;AACA,wBAAQC,UAAuBC,SAA/B,EAA0C,CAACC,KAAD,EAAQC,GAAR,KAAgB;AACxDL,IAAAA,CAAC,CAACM,GAAF,CAAMF,KAAN,EAAaG,SAAb,EAAyB,2DAA0DF,GAAI,mEAAvF;AACD,GAFD;AAGD,CALD;AAOA,kBAAK,kEAAL,EAAyEG,wBAAzE,EAA+FN,SAA/F,EAAuHO,gBAAvH","sourcesContent":["import test from 'ava';\nimport forEach from 'lodash/forEach';\nimport renderComponentMacro from '../../../test/helpers/render-component';\nimport OrganismReviewCongrats from '..';\nimport fixtureDefault from './fixtures/default';\n\ntest('Organism › OrganismReviewCongrats > should have valid propTypes', t => {\n  t.pass();\n  forEach(OrganismReviewCongrats.propTypes, (value, key) => {\n    t.not(value, undefined, `PropType for \"Organism.OrganismReviewCongrats.propTypes.${key}\" may not be undefined. Did you mistype the propTypes definition?`);\n  });\n});\n\ntest('Organism › OrganismReviewCongrats › Default › should be rendered', renderComponentMacro, OrganismReviewCongrats, fixtureDefault);\n"],"file":"fixtures.js"}

package/lib/organism/review-congrats/test/review-congrats.js

@@ -0,0 +1,53 @@
+"use strict";
+
+var _browserEnv = _interopRequireDefault(require("browser-env"));
+
+var _ava = _interopRequireDefault(require("ava"));
+
+var _react = _interopRequireDefault(require("react"));
+
+var _react2 = require("@testing-library/react");
+
+var _ = _interopRequireWildcard(require(".."));
+
+var _default = _interopRequireDefault(require("./fixtures/default"));
+
+function _getRequireWildcardCache() { if (typeof WeakMap !== "function") return null; var cache = new WeakMap(); _getRequireWildcardCache = function () { return cache; }; return cache; }
+
+function _interopRequireWildcard(obj) { if (obj && obj.__esModule) { return obj; } if (obj === null || typeof obj !== "object" && typeof obj !== "function") { return { default: obj }; } var cache = _getRequireWildcardCache(); if (cache && cache.has(obj)) { return cache.get(obj); } var newObj = {}; var hasPropertyDescriptor = Object.defineProperty && Object.getOwnPropertyDescriptor; for (var key in obj) { if (Object.prototype.hasOwnProperty.call(obj, key)) { var desc = hasPropertyDescriptor ? Object.getOwnPropertyDescriptor(obj, key) : null; if (desc && (desc.get || desc.set)) { Object.defineProperty(newObj, key, desc); } else { newObj[key] = obj[key]; } } } newObj.default = obj; if (cache) { cache.set(obj, newObj); } return newObj; }
+
+function _interopRequireDefault(obj) { return obj && obj.__esModule ? obj : { default: obj }; }
+
+(0, _browserEnv.default)();
+
+_ava.default.afterEach(_react2.cleanup);
+
+(0, _ava.default)('should click on skill button', async t => {
+  const {
+    container
+  } = (0, _react2.render)( /*#__PURE__*/_react.default.createElement(_.default, _default.default.props));
+  await (0, _react2.waitFor)(() => {
+    const skillLink = container.querySelector('[data-name="revise-skill-link"]');
+    t.truthy(skillLink);
+    if (skillLink) t.notThrows(() => {
+      return _react2.fireEvent.click(skillLink);
+    });
+  });
+  t.pass();
+});
+(0, _ava.default)('setScroll', t => {
+  t.plan(2);
+  const _container = {
+    current: {
+      scrollTo: ({
+        left,
+        behavior
+      }) => {
+        t.is(left, 1000);
+        t.is(behavior, 'smooth');
+      }
+    }
+  };
+  (0, _.setScroll)(_container)();
+});
+//# sourceMappingURL=review-congrats.js.map

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

@@ -0,0 +1 @@
+{"version":3,"sources":["../../../../src/organism/review-congrats/test/review-congrats.js"],"names":["test","afterEach","cleanup","t","container","defaultFixture","props","skillLink","querySelector","truthy","notThrows","fireEvent","click","pass","plan","_container","current","scrollTo","left","behavior","is"],"mappings":";;AAAA;;AACA;;AACA;;AACA;;AACA;;AACA;;;;;;;;AAEA;;AAEAA,aAAKC,SAAL,CAAeC,eAAf;;AAEA,kBAAK,8BAAL,EAAqC,MAAMC,CAAN,IAAW;AAC9C,QAAM;AAACC,IAAAA;AAAD,MAAc,kCAAO,6BAAC,SAAD,EAAoBC,iBAAeC,KAAnC,CAAP,CAApB;AAEA,QAAM,qBAAQ,MAAM;AAClB,UAAMC,SAAS,GAAGH,SAAS,CAACI,aAAV,CAAwB,iCAAxB,CAAlB;AACAL,IAAAA,CAAC,CAACM,MAAF,CAASF,SAAT;AACA,QAAIA,SAAJ,EACEJ,CAAC,CAACO,SAAF,CAAY,MAAM;AAChB,aAAOC,kBAAUC,KAAV,CAAgBL,SAAhB,CAAP;AACD,KAFD;AAGH,GAPK,CAAN;AASAJ,EAAAA,CAAC,CAACU,IAAF;AACD,CAbD;AAeA,kBAAK,WAAL,EAAkBV,CAAC,IAAI;AACrBA,EAAAA,CAAC,CAACW,IAAF,CAAO,CAAP;AAEA,QAAMC,UAAU,GAAG;AACjBC,IAAAA,OAAO,EAAE;AACPC,MAAAA,QAAQ,EAAE,CAAC;AAACC,QAAAA,IAAD;AAAOC,QAAAA;AAAP,OAAD,KAAsB;AAC9BhB,QAAAA,CAAC,CAACiB,EAAF,CAAKF,IAAL,EAAW,IAAX;AACAf,QAAAA,CAAC,CAACiB,EAAF,CAAKD,QAAL,EAAe,QAAf;AACD;AAJM;AADQ,GAAnB;AASA,mBAAUJ,UAAV;AACD,CAbD","sourcesContent":["import browserEnv from 'browser-env';\nimport test from 'ava';\nimport React from 'react';\nimport {render, cleanup, fireEvent, waitFor} from '@testing-library/react';\nimport ReviewCongrats, {setScroll} from '..';\nimport defaultFixture from './fixtures/default';\n\nbrowserEnv();\n\ntest.afterEach(cleanup);\n\ntest('should click on skill button', async t => {\n  const {container} = render(<ReviewCongrats {...defaultFixture.props} />);\n\n  await waitFor(() => {\n    const skillLink = container.querySelector('[data-name=\"revise-skill-link\"]');\n    t.truthy(skillLink);\n    if (skillLink)\n      t.notThrows(() => {\n        return fireEvent.click(skillLink);\n      });\n  });\n\n  t.pass();\n});\n\ntest('setScroll', t => {\n  t.plan(2);\n\n  const _container = {\n    current: {\n      scrollTo: ({left, behavior}) => {\n        t.is(left, 1000);\n        t.is(behavior, 'smooth');\n      }\n    }\n  };\n\n  setScroll(_container)();\n});\n"],"file":"review-congrats.js"}

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

@@ -7,6 +7,8 @@ var _react = _interopRequireDefault(require("react"));
 
 var _propTypes = _interopRequireDefault(require("prop-types"));
 
+var _classnames = _interopRequireDefault(require("classnames"));
+
 var _getOr = _interopRequireDefault(require("lodash/fp/getOr"));
 
 var _buttonLinkIconOnly = _interopRequireDefault(require("../../atom/button-link-icon-only"));
@@ -24,7 +26,8 @@ const ReviewHeader = (props, context) => {
     skillName,
     'aria-label': ariaLabel,
     closeButtonAriaLabel,
-    onQuitClick
+    onQuitClick,
+    hiddenSteps
   } = props;
   const {
     skin
@@ -38,6 +41,7 @@ const ReviewHeader = (props, context) => {
     size: 'responsive',
     className: _style.default.review
   };
+  const stepsWrapper = (0, _classnames.default)(_style.default.stepsWrapper, hiddenSteps ? _style.default.stepsWrapperAnimation : null);
   return /*#__PURE__*/_react.default.createElement("div", {
     className: _style.default.headerWrapper,
     "data-name": "review-header",
@@ -58,7 +62,7 @@ const ReviewHeader = (props, context) => {
     "aria-label": skillName,
     "data-name": "review-header-skill-name"
   }, skillName)), /*#__PURE__*/_react.default.createElement("div", {
-    className: _style.default.stepsWrapper
+    className: stepsWrapper
   }, /*#__PURE__*/_react.default.createElement(_reviewHeaderSteps.default, {
     steps: steps,
     key: 'review-header-steps'
@@ -74,7 +78,8 @@ ReviewHeader.propTypes = process.env.NODE_ENV !== "production" ? {
   skillName: _propTypes.default.string.isRequired,
   'aria-label': _propTypes.default.string,
   closeButtonAriaLabel: _propTypes.default.string,
-  onQuitClick: _propTypes.default.func
+  onQuitClick: _propTypes.default.func,
+  hiddenSteps: _propTypes.default.bool
 } : {};
 var _default = ReviewHeader;
 exports.default = _default;

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","skin","primarySkinColor","buttonProps","icon","onClick","size","className","style","review","headerWrapper","titlesWrapper","title","color","stepsWrapper","iconButtonWrapper","propTypes","ReviewHeaderStep","PropTypes","string","isRequired","func"],"mappings":";;;;;AAAA;;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;AANI,MAOFP,KAPJ;AAQA,QAAM;AAACQ,IAAAA;AAAD,MAASP,OAAf;AACA,QAAMQ,gBAAgB,GAAG,oBAAM,SAAN,EAAiB,gBAAjB,EAAmCD,IAAnC,CAAzB;AAEA,QAAME,WAAW,GAAG;AAClBC,IAAAA,IAAI,EAAE,OADY;AAElB,iBAAa,4BAFK;AAGlB,kBAAcL,oBAHI;AAIlBM,IAAAA,OAAO,EAAEL,WAJS;AAKlBM,IAAAA,IAAI,EAAE,YALY;AAMlBC,IAAAA,SAAS,EAAEC,eAAMC;AANC,GAApB;AASA,sBACE;AAAK,IAAA,SAAS,EAAED,eAAME,aAAtB;AAAqC,iBAAU,eAA/C;AAA+D,kBAAYZ;AAA3E,kBACE;AAAK,IAAA,SAAS,EAAEU,eAAMG;AAAtB,kBACE;AAAK,IAAA,SAAS,EAAEH,eAAMI,KAAtB;AAA6B,IAAA,KAAK,EAAEhB,IAApC;AAA0C,kBAAYA,IAAtD;AAA4D,iBAAU;AAAtE,KACGA,IADH,CADF,eAIE;AACE,IAAA,SAAS,EAAEY,eAAMX,SADnB;AAEE,IAAA,KAAK,EAAE;AACLgB,MAAAA,KAAK,EAAEX;AADF,KAFT;AAKE,IAAA,KAAK,EAAEL,SALT;AAME,kBAAYA,SANd;AAOE,iBAAU;AAPZ,KASGA,SATH,CAJF,CADF,eAkBE;AAAK,IAAA,SAAS,EAAEW,eAAMM;AAAtB,kBACE,6BAAC,0BAAD;AAAkB,IAAA,KAAK,EAAEnB,KAAzB;AAAgC,IAAA,GAAG,EAAE;AAArC,IADF,CAlBF,eAsBE;AAAK,IAAA,SAAS,EAAEa,eAAMO,iBAAtB;AAAyC,iBAAU;AAAnD,kBACE,6BAAC,2BAAD,EAAwBZ,WAAxB,CADF,CAtBF,CADF;AA4BD,CAjDD;;AAmDAX,YAAY,CAACwB,SAAb,2CAAyB;AACvBrB,EAAAA,KAAK,EAAEsB,2BAAiBD,SAAjB,CAA2BrB,KADX;AAEvBC,EAAAA,IAAI,EAAEsB,mBAAUC,MAAV,CAAiBC,UAFA;AAGvBvB,EAAAA,SAAS,EAAEqB,mBAAUC,MAAV,CAAiBC,UAHL;AAIvB,gBAAcF,mBAAUC,MAJD;AAKvBpB,EAAAA,oBAAoB,EAAEmB,mBAAUC,MALT;AAMvBnB,EAAAA,WAAW,EAAEkB,mBAAUG;AANA,CAAzB;eASe7B,Y","sourcesContent":["import React from 'react';\nimport PropTypes from 'prop-types';\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  } = 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  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={style.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};\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","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"}

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

@@ -45,6 +45,13 @@
   left: 50%;
   transform: translate(-50%, 0);
   display: flex;
+  opacity: 1;
+}
+
+.stepsWrapperAnimation {
+  opacity: 0;
+  transform: translate(-50%, -180%);
+  transition: opacity 0.5s ease-in-out 0.5s, transform 0.5s ease-in-out 0.5s;
 }
 
 .iconButtonWrapper {
@@ -96,6 +103,7 @@
 }
 
 @media mobile {
+
   .headerWrapper {
     height: 126px;
     align-items: start;
@@ -108,6 +116,11 @@
     bottom: 20px;
   }
 
+  .stepsWrapperAnimation {
+    opacity: 0;
+    transition: opacity 0.5s ease-in-out 0.5s;
+  }
+
   .titlesWrapper {
     margin-top: 16px;
     margin-left: 20px;

package/lib/organism/review-header/test/fixtures/steps-animation.js

@@ -0,0 +1,21 @@
+"use strict";
+
+exports.__esModule = true;
+exports.default = void 0;
+
+var _allQuestionsOk = _interopRequireDefault(require("../../../../molecule/review-header-steps/test/fixtures/all-questions-ok"));
+
+var _allQuestionsOk2 = require("./all-questions-ok");
+
+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); }
+
+var _default = {
+  props: _extends(_extends({}, _allQuestionsOk2.defaultHeaderProps), {}, {
+    steps: _allQuestionsOk.default.props.steps,
+    hiddenSteps: true
+  })
+};
+exports.default = _default;
+//# sourceMappingURL=steps-animation.js.map

package/lib/organism/review-header/test/fixtures/steps-animation.js.map

@@ -0,0 +1 @@
+{"version":3,"sources":["../../../../../src/organism/review-header/test/fixtures/steps-animation.js"],"names":["props","defaultHeaderProps","steps","stepsProps","hiddenSteps"],"mappings":";;;;;AAAA;;AACA;;;;;;eAEe;AACbA,EAAAA,KAAK,wBACAC,mCADA;AAEHC,IAAAA,KAAK,EAAEC,wBAAWH,KAAX,CAAiBE,KAFrB;AAGHE,IAAAA,WAAW,EAAE;AAHV;AADQ,C","sourcesContent":["import stepsProps from '../../../../molecule/review-header-steps/test/fixtures/all-questions-ok';\nimport {defaultHeaderProps} from './all-questions-ok';\n\nexport default {\n  props: {\n    ...defaultHeaderProps,\n    steps: stepsProps.props.steps,\n    hiddenSteps: true\n  }\n};\n"],"file":"steps-animation.js"}

package/lib/organism/review-header/test/fixtures.js

@@ -20,6 +20,8 @@ var _noAnsweredQuestion = _interopRequireDefault(require("./fixtures/no-answered
 
 var _questionToRepeat = _interopRequireDefault(require("./fixtures/question-to-repeat"));
 
+var _stepsAnimation = _interopRequireDefault(require("./fixtures/steps-animation"));
+
 function _interopRequireDefault(obj) { return obj && obj.__esModule ? obj : { default: obj }; }
 
 (0, _ava.default)('Organism › OrganismReviewHeader > should have valid propTypes', t => {
@@ -34,4 +36,5 @@ function _interopRequireDefault(obj) { return obj && obj.__esModule ? obj : { de
 (0, _ava.default)('Organism › OrganismReviewHeader › FirstQuestionCurrentRight › should be rendered', _renderComponent.default, _.default, _firstQuestionCurrentRight.default);
 (0, _ava.default)('Organism › OrganismReviewHeader › NoAnsweredQuestion › should be rendered', _renderComponent.default, _.default, _noAnsweredQuestion.default);
 (0, _ava.default)('Organism › OrganismReviewHeader › QuestionToRepeat › should be rendered', _renderComponent.default, _.default, _questionToRepeat.default);
+(0, _ava.default)('Organism › OrganismReviewHeader › StepsAnimation › should be rendered', _renderComponent.default, _.default, _stepsAnimation.default);
 //# sourceMappingURL=fixtures.js.map

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

@@ -1 +1 @@
-{"version":3,"sources":["../../../../src/organism/review-header/test/fixtures.js"],"names":["t","pass","OrganismReviewHeader","propTypes","value","key","not","undefined","renderComponentMacro","fixtureAllQuestionsOk","fixtureCurrentQuestionNoAnswered","fixtureCurrentQuestionWrong","fixtureFirstQuestionCurrentRight","fixtureNoAnsweredQuestion","fixtureQuestionToRepeat"],"mappings":";;AAAA;;AACA;;AACA;;AACA;;AACA;;AACA;;AACA;;AACA;;AACA;;AACA;;;;AAEA,kBAAK,+DAAL,EAAsEA,CAAC,IAAI;AACzEA,EAAAA,CAAC,CAACC,IAAF;AACA,wBAAQC,UAAqBC,SAA7B,EAAwC,CAACC,KAAD,EAAQC,GAAR,KAAgB;AACtDL,IAAAA,CAAC,CAACM,GAAF,CAAMF,KAAN,EAAaG,SAAb,EAAyB,yDAAwDF,GAAI,mEAArF;AACD,GAFD;AAGD,CALD;AAOA,kBAAK,uEAAL,EAA8EG,wBAA9E,EAAoGN,SAApG,EAA0HO,uBAA1H;AACA,kBAAK,kFAAL,EAAyFD,wBAAzF,EAA+GN,SAA/G,EAAqIQ,kCAArI;AACA,kBAAK,6EAAL,EAAoFF,wBAApF,EAA0GN,SAA1G,EAAgIS,6BAAhI;AACA,kBAAK,kFAAL,EAAyFH,wBAAzF,EAA+GN,SAA/G,EAAqIU,kCAArI;AACA,kBAAK,2EAAL,EAAkFJ,wBAAlF,EAAwGN,SAAxG,EAA8HW,2BAA9H;AACA,kBAAK,yEAAL,EAAgFL,wBAAhF,EAAsGN,SAAtG,EAA4HY,yBAA5H","sourcesContent":["import test from 'ava';\nimport forEach from 'lodash/forEach';\nimport renderComponentMacro from '../../../test/helpers/render-component';\nimport OrganismReviewHeader from '..';\nimport fixtureAllQuestionsOk from './fixtures/all-questions-ok';\nimport fixtureCurrentQuestionNoAnswered from './fixtures/current-question-no-answered';\nimport fixtureCurrentQuestionWrong from './fixtures/current-question-wrong';\nimport fixtureFirstQuestionCurrentRight from './fixtures/first-question-current-right';\nimport fixtureNoAnsweredQuestion from './fixtures/no-answered-question';\nimport fixtureQuestionToRepeat from './fixtures/question-to-repeat';\n\ntest('Organism › OrganismReviewHeader > should have valid propTypes', t => {\n  t.pass();\n  forEach(OrganismReviewHeader.propTypes, (value, key) => {\n    t.not(value, undefined, `PropType for \"Organism.OrganismReviewHeader.propTypes.${key}\" may not be undefined. Did you mistype the propTypes definition?`);\n  });\n});\n\ntest('Organism › OrganismReviewHeader › AllQuestionsOk › should be rendered', renderComponentMacro, OrganismReviewHeader, fixtureAllQuestionsOk);\ntest('Organism › OrganismReviewHeader › CurrentQuestionNoAnswered › should be rendered', renderComponentMacro, OrganismReviewHeader, fixtureCurrentQuestionNoAnswered);\ntest('Organism › OrganismReviewHeader › CurrentQuestionWrong › should be rendered', renderComponentMacro, OrganismReviewHeader, fixtureCurrentQuestionWrong);\ntest('Organism › OrganismReviewHeader › FirstQuestionCurrentRight › should be rendered', renderComponentMacro, OrganismReviewHeader, fixtureFirstQuestionCurrentRight);\ntest('Organism › OrganismReviewHeader › NoAnsweredQuestion › should be rendered', renderComponentMacro, OrganismReviewHeader, fixtureNoAnsweredQuestion);\ntest('Organism › OrganismReviewHeader › QuestionToRepeat › should be rendered', renderComponentMacro, OrganismReviewHeader, fixtureQuestionToRepeat);\n"],"file":"fixtures.js"}
+{"version":3,"sources":["../../../../src/organism/review-header/test/fixtures.js"],"names":["t","pass","OrganismReviewHeader","propTypes","value","key","not","undefined","renderComponentMacro","fixtureAllQuestionsOk","fixtureCurrentQuestionNoAnswered","fixtureCurrentQuestionWrong","fixtureFirstQuestionCurrentRight","fixtureNoAnsweredQuestion","fixtureQuestionToRepeat","fixtureStepsAnimation"],"mappings":";;AAAA;;AACA;;AACA;;AACA;;AACA;;AACA;;AACA;;AACA;;AACA;;AACA;;AACA;;;;AAEA,kBAAK,+DAAL,EAAsEA,CAAC,IAAI;AACzEA,EAAAA,CAAC,CAACC,IAAF;AACA,wBAAQC,UAAqBC,SAA7B,EAAwC,CAACC,KAAD,EAAQC,GAAR,KAAgB;AACtDL,IAAAA,CAAC,CAACM,GAAF,CAAMF,KAAN,EAAaG,SAAb,EAAyB,yDAAwDF,GAAI,mEAArF;AACD,GAFD;AAGD,CALD;AAOA,kBAAK,uEAAL,EAA8EG,wBAA9E,EAAoGN,SAApG,EAA0HO,uBAA1H;AACA,kBAAK,kFAAL,EAAyFD,wBAAzF,EAA+GN,SAA/G,EAAqIQ,kCAArI;AACA,kBAAK,6EAAL,EAAoFF,wBAApF,EAA0GN,SAA1G,EAAgIS,6BAAhI;AACA,kBAAK,kFAAL,EAAyFH,wBAAzF,EAA+GN,SAA/G,EAAqIU,kCAArI;AACA,kBAAK,2EAAL,EAAkFJ,wBAAlF,EAAwGN,SAAxG,EAA8HW,2BAA9H;AACA,kBAAK,yEAAL,EAAgFL,wBAAhF,EAAsGN,SAAtG,EAA4HY,yBAA5H;AACA,kBAAK,uEAAL,EAA8EN,wBAA9E,EAAoGN,SAApG,EAA0Ha,uBAA1H","sourcesContent":["import test from 'ava';\nimport forEach from 'lodash/forEach';\nimport renderComponentMacro from '../../../test/helpers/render-component';\nimport OrganismReviewHeader from '..';\nimport fixtureAllQuestionsOk from './fixtures/all-questions-ok';\nimport fixtureCurrentQuestionNoAnswered from './fixtures/current-question-no-answered';\nimport fixtureCurrentQuestionWrong from './fixtures/current-question-wrong';\nimport fixtureFirstQuestionCurrentRight from './fixtures/first-question-current-right';\nimport fixtureNoAnsweredQuestion from './fixtures/no-answered-question';\nimport fixtureQuestionToRepeat from './fixtures/question-to-repeat';\nimport fixtureStepsAnimation from './fixtures/steps-animation';\n\ntest('Organism › OrganismReviewHeader > should have valid propTypes', t => {\n  t.pass();\n  forEach(OrganismReviewHeader.propTypes, (value, key) => {\n    t.not(value, undefined, `PropType for \"Organism.OrganismReviewHeader.propTypes.${key}\" may not be undefined. Did you mistype the propTypes definition?`);\n  });\n});\n\ntest('Organism › OrganismReviewHeader › AllQuestionsOk › should be rendered', renderComponentMacro, OrganismReviewHeader, fixtureAllQuestionsOk);\ntest('Organism › OrganismReviewHeader › CurrentQuestionNoAnswered › should be rendered', renderComponentMacro, OrganismReviewHeader, fixtureCurrentQuestionNoAnswered);\ntest('Organism › OrganismReviewHeader › CurrentQuestionWrong › should be rendered', renderComponentMacro, OrganismReviewHeader, fixtureCurrentQuestionWrong);\ntest('Organism › OrganismReviewHeader › FirstQuestionCurrentRight › should be rendered', renderComponentMacro, OrganismReviewHeader, fixtureFirstQuestionCurrentRight);\ntest('Organism › OrganismReviewHeader › NoAnsweredQuestion › should be rendered', renderComponentMacro, OrganismReviewHeader, fixtureNoAnsweredQuestion);\ntest('Organism › OrganismReviewHeader › QuestionToRepeat › should be rendered', renderComponentMacro, OrganismReviewHeader, fixtureQuestionToRepeat);\ntest('Organism › OrganismReviewHeader › StepsAnimation › should be rendered', renderComponentMacro, OrganismReviewHeader, fixtureStepsAnimation);\n"],"file":"fixtures.js"}

package/lib/variables/colors.css

@@ -55,6 +55,7 @@
 @value cm_pink_50: #ffefeb;
 @value cm_purple_200: #7340FF;
 @value cm_yellow_scorm: #FFB800;
+@value cm_yellow_secondary_200: #ffde03;
 @value cm_yellow_100: #ffc043;
 @value cm_yellow_200: #DB9200;
 @value cm_yellow_400: #bd7e00;

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@coorpacademy/components",
-  "version": "10.17.3",
+  "version": "10.19.1-alpha.0+be7bf0599",
   "description": "",
   "main": "lib/index.js",
   "module": "es/index.js",
@@ -50,7 +50,7 @@
     "Soualmi Djamel <djamel.soualmi@coorpacademy.com>"
   ],
   "dependencies": {
-    "@coorpacademy/nova-icons": "3.10.2",
+    "@coorpacademy/nova-icons": "3.11.0",
     "autoprefixer": "^9.8.0",
     "classnames": "^2.2.6",
     "css-color-function": "^1.3.3",
@@ -122,5 +122,5 @@
     "webpack-hot-middleware": "^2.25.0"
   },
   "author": "CoorpAcademy",
-  "gitHead": "6f2abf73922a4254528e07ecedaa437e48bdb8a2"
+  "gitHead": "be7bf0599953ceab2ace7ab9c471071a660346b9"
 }