@coorpacademy/components 10.8.0 → 10.9.0

package/es/molecule/dashboard/review-banner/index.js

@@ -0,0 +1,79 @@
+function _extends() { _extends = Object.assign || function (target) { for (var i = 1; i < arguments.length; i++) { var source = arguments[i]; for (var key in source) { if (Object.prototype.hasOwnProperty.call(source, key)) { target[key] = source[key]; } } } return target; }; return _extends.apply(this, arguments); }
+
+import React from 'react';
+import PropTypes from 'prop-types';
+import getOr from 'lodash/fp/getOr';
+import Provider from '../../../atom/provider';
+import ButtonLink from '../../../atom/button-link';
+import style from './style.css';
+
+const ReviewBanner = (props, context) => {
+  const {
+    title,
+    subtitle,
+    cta
+  } = props;
+  const {
+    skin
+  } = context;
+  const primary = getOr('#00B0FF', 'common.primary', skin);
+
+  const buttonProps = _extends(_extends({}, cta), {}, {
+    type: 'primary'
+  });
+
+  const ctaStyle = {
+    background: primary
+  };
+  return /*#__PURE__*/React.createElement("div", {
+    className: style.root,
+    "data-name": "start-review-banner"
+  }, /*#__PURE__*/React.createElement("div", {
+    className: style.container
+  }, /*#__PURE__*/React.createElement("div", {
+    className: style.banner
+  }, /*#__PURE__*/React.createElement("div", {
+    className: style.left,
+    role: "img",
+    "aria-label": "Left image container"
+  }, /*#__PURE__*/React.createElement("img", {
+    className: style.image,
+    src: "https://static.coorpacademy.com/site/book.png",
+    alt: "Book image"
+  })), /*#__PURE__*/React.createElement("div", {
+    className: style.middle
+  }, /*#__PURE__*/React.createElement("span", {
+    className: style.title,
+    "data-name": "review-banner-title",
+    "aria-label": "{title}"
+  }, title), /*#__PURE__*/React.createElement("span", {
+    className: style.subtitle,
+    "data-name": "review-banner-subtitle",
+    "aria-label": "{subtitle}"
+  }, subtitle), /*#__PURE__*/React.createElement(ButtonLink, _extends({}, buttonProps, {
+    className: style.cta,
+    customStyle: ctaStyle
+  }))), /*#__PURE__*/React.createElement("div", {
+    className: style.right,
+    role: "img",
+    "aria-label": "Rigth image container"
+  }, /*#__PURE__*/React.createElement("img", {
+    className: style.image,
+    src: "https://static.coorpacademy.com/site/dumbell.png",
+    alt: "Dumbbell image"
+  })))));
+};
+
+ReviewBanner.propTypes = process.env.NODE_ENV !== "production" ? {
+  title: PropTypes.string,
+  subtitle: PropTypes.string,
+  cta: PropTypes.shape({
+    onClick: PropTypes.func,
+    label: PropTypes.string
+  })
+} : {};
+ReviewBanner.contextTypes = {
+  skin: Provider.childContextTypes.skin
+};
+export default React.memo(ReviewBanner);
+//# sourceMappingURL=index.js.map

package/es/molecule/dashboard/review-banner/index.js.map

@@ -0,0 +1 @@
+{"version":3,"sources":["../../../../src/molecule/dashboard/review-banner/index.js"],"names":["React","PropTypes","getOr","Provider","ButtonLink","style","ReviewBanner","props","context","title","subtitle","cta","skin","primary","buttonProps","type","ctaStyle","background","root","container","banner","left","image","middle","right","propTypes","string","shape","onClick","func","label","contextTypes","childContextTypes","memo"],"mappings":";;AAAA,OAAOA,KAAP,MAAkB,OAAlB;AACA,OAAOC,SAAP,MAAsB,YAAtB;AACA,OAAOC,KAAP,MAAkB,iBAAlB;AACA,OAAOC,QAAP,MAAqB,wBAArB;AACA,OAAOC,UAAP,MAAuB,2BAAvB;AACA,OAAOC,KAAP,MAAkB,aAAlB;;AAEA,MAAMC,YAAY,GAAG,CAACC,KAAD,EAAQC,OAAR,KAAoB;AACvC,QAAM;AAACC,IAAAA,KAAD;AAAQC,IAAAA,QAAR;AAAkBC,IAAAA;AAAlB,MAAyBJ,KAA/B;AACA,QAAM;AAACK,IAAAA;AAAD,MAASJ,OAAf;AACA,QAAMK,OAAO,GAAGX,KAAK,CAAC,SAAD,EAAY,gBAAZ,EAA8BU,IAA9B,CAArB;;AAEA,QAAME,WAAW,yBACZH,GADY;AAEfI,IAAAA,IAAI,EAAE;AAFS,IAAjB;;AAIA,QAAMC,QAAQ,GAAG;AACfC,IAAAA,UAAU,EAAEJ;AADG,GAAjB;AAIA,sBACE;AAAK,IAAA,SAAS,EAAER,KAAK,CAACa,IAAtB;AAA4B,iBAAU;AAAtC,kBACE;AAAK,IAAA,SAAS,EAAEb,KAAK,CAACc;AAAtB,kBACE;AAAK,IAAA,SAAS,EAAEd,KAAK,CAACe;AAAtB,kBACE;AAAK,IAAA,SAAS,EAAEf,KAAK,CAACgB,IAAtB;AAA4B,IAAA,IAAI,EAAC,KAAjC;AAAuC,kBAAW;AAAlD,kBACE;AACE,IAAA,SAAS,EAAEhB,KAAK,CAACiB,KADnB;AAEE,IAAA,GAAG,EAAC,+CAFN;AAGE,IAAA,GAAG,EAAC;AAHN,IADF,CADF,eAQE;AAAK,IAAA,SAAS,EAAEjB,KAAK,CAACkB;AAAtB,kBACE;AAAM,IAAA,SAAS,EAAElB,KAAK,CAACI,KAAvB;AAA8B,iBAAU,qBAAxC;AAA8D,kBAAW;AAAzE,KACGA,KADH,CADF,eAIE;AACE,IAAA,SAAS,EAAEJ,KAAK,CAACK,QADnB;AAEE,iBAAU,wBAFZ;AAGE,kBAAW;AAHb,KAKGA,QALH,CAJF,eAWE,oBAAC,UAAD,eAAgBI,WAAhB;AAA6B,IAAA,SAAS,EAAET,KAAK,CAACM,GAA9C;AAAmD,IAAA,WAAW,EAAEK;AAAhE,KAXF,CARF,eAqBE;AAAK,IAAA,SAAS,EAAEX,KAAK,CAACmB,KAAtB;AAA6B,IAAA,IAAI,EAAC,KAAlC;AAAwC,kBAAW;AAAnD,kBACE;AACE,IAAA,SAAS,EAAEnB,KAAK,CAACiB,KADnB;AAEE,IAAA,GAAG,EAAC,kDAFN;AAGE,IAAA,GAAG,EAAC;AAHN,IADF,CArBF,CADF,CADF,CADF;AAmCD,CAhDD;;AAkDAhB,YAAY,CAACmB,SAAb,2CAAyB;AACvBhB,EAAAA,KAAK,EAAER,SAAS,CAACyB,MADM;AAEvBhB,EAAAA,QAAQ,EAAET,SAAS,CAACyB,MAFG;AAGvBf,EAAAA,GAAG,EAAEV,SAAS,CAAC0B,KAAV,CAAgB;AACnBC,IAAAA,OAAO,EAAE3B,SAAS,CAAC4B,IADA;AAEnBC,IAAAA,KAAK,EAAE7B,SAAS,CAACyB;AAFE,GAAhB;AAHkB,CAAzB;AASApB,YAAY,CAACyB,YAAb,GAA4B;AAC1BnB,EAAAA,IAAI,EAAET,QAAQ,CAAC6B,iBAAT,CAA2BpB;AADP,CAA5B;AAIA,eAAeZ,KAAK,CAACiC,IAAN,CAAW3B,YAAX,CAAf","sourcesContent":["import React from 'react';\nimport PropTypes from 'prop-types';\nimport getOr from 'lodash/fp/getOr';\nimport Provider from '../../../atom/provider';\nimport ButtonLink from '../../../atom/button-link';\nimport style from './style.css';\n\nconst ReviewBanner = (props, context) => {\n  const {title, subtitle, cta} = props;\n  const {skin} = context;\n  const primary = getOr('#00B0FF', 'common.primary', skin);\n\n  const buttonProps = {\n    ...cta,\n    type: 'primary'\n  };\n  const ctaStyle = {\n    background: primary\n  };\n\n  return (\n    <div className={style.root} data-name=\"start-review-banner\">\n      <div className={style.container}>\n        <div className={style.banner}>\n          <div className={style.left} role=\"img\" aria-label=\"Left image container\">\n            <img\n              className={style.image}\n              src=\"https://static.coorpacademy.com/site/book.png\"\n              alt=\"Book image\"\n            />\n          </div>\n          <div className={style.middle}>\n            <span className={style.title} data-name=\"review-banner-title\" aria-label=\"{title}\">\n              {title}\n            </span>\n            <span\n              className={style.subtitle}\n              data-name=\"review-banner-subtitle\"\n              aria-label=\"{subtitle}\"\n            >\n              {subtitle}\n            </span>\n            <ButtonLink {...buttonProps} className={style.cta} customStyle={ctaStyle} />\n          </div>\n          <div className={style.right} role=\"img\" aria-label=\"Rigth image container\">\n            <img\n              className={style.image}\n              src=\"https://static.coorpacademy.com/site/dumbell.png\"\n              alt=\"Dumbbell image\"\n            />\n          </div>\n        </div>\n      </div>\n    </div>\n  );\n};\n\nReviewBanner.propTypes = {\n  title: PropTypes.string,\n  subtitle: PropTypes.string,\n  cta: PropTypes.shape({\n    onClick: PropTypes.func,\n    label: PropTypes.string\n  })\n};\n\nReviewBanner.contextTypes = {\n  skin: Provider.childContextTypes.skin\n};\n\nexport default React.memo(ReviewBanner);\n"],"file":"index.js"}

package/es/molecule/dashboard/review-banner/style.css

@@ -0,0 +1,186 @@
+@value breakpoints: "../../../variables/breakpoints.css";
+@value colors: "../../../variables/colors.css";
+@value tablet from breakpoints;
+@value mobile from breakpoints;
+@value white from colors;
+@value battle_bg from colors;
+
+.root {
+  display: flex;
+  justify-content: center;
+  padding: 24px 30px;
+  font-family: Gilroy;
+}
+
+.container {
+  width: 100%;
+  max-width: 1080px;
+  height: 214px;
+  display: flex;
+  justify-content: center;
+  position: relative;
+  top: 0px;
+  left: 0px;
+  background: battle_bg;
+  background-image: url(https://static.coorpacademy.com/site/startBattleBackground.png);
+  background-size: cover;
+  border-radius: 16px;
+}
+
+.container:hover .right, .container:hover .left {
+  animation-play-state: running;
+}
+
+.banner {
+  width: 100%;
+  height: 100%;
+  display: flex;
+  flex-direction: row;
+  align-items: center;
+  justify-content: space-between;
+}
+
+.left {
+  width: 210px;
+  height: 123px;
+  position: relative;
+  top: -57px;
+  left: 2%;
+  animation-play-state: paused;
+  animation-name: leftAnimation;
+  animation-duration: 2s;
+  animation-delay: 0;
+  animation-iteration-count: infinite;
+  animation-direction: forward;
+  animation-timing-function: ease-in-out;
+}
+
+.right {
+  position: relative;
+  bottom: -32px;
+  width: 210px;
+  height: 180px;
+  right: 2%;
+  animation-play-state: paused;
+  animation-name: rightAnimation;
+  animation-duration: 2s;
+  animation-delay: 0;
+  animation-iteration-count: infinite;
+  animation-direction: forward;
+  animation-timing-function: ease-in-out;
+}
+
+.image {
+  width: 100%;
+  height: 100%;
+}
+
+.middle {
+  display: flex;  
+  flex-direction: column;
+  align-items: center;
+}
+
+.title {
+  padding-top: 30px;
+  font-weight: 800;
+  font-size: 48px;
+  line-height: 59px;
+  color: white;
+  display: block;
+}
+
+.subtitle {
+  font-style: normal;
+  font-weight: normal;
+  font-size: 20px;
+  line-height: 24px;
+  opacity: 0.9;
+  display: block;
+  color: white;
+  text-align: center;
+}
+
+.cta {
+  margin-top: 22px;
+  max-width: 200px;
+  border-radius: 36px;
+  font-style: normal;
+  font-weight: bold;
+  font-size: 16px;
+}
+
+@media tablet {
+  .left {
+    width: 170px;
+    height: 100px;
+    top: -67px
+  }
+
+  .right {
+    width: 170px;
+    height: 146px;
+    bottom: -45px;
+  }
+
+  .title {
+    padding-top: 5px;
+    font-size: 32px;
+    line-height: 39px;
+  }
+
+  .subtitle {
+    font-size: 16px;
+    line-height: 19px;
+  }
+  
+  .cta {
+    max-width: 175px;
+  }
+}
+
+@media mobile {
+  .container {
+    height: 161px;
+    max-width: 327px;
+  }
+
+  .banner {
+    justify-content: center;
+  }
+
+  .right {
+    display: none;
+  }
+
+  .left {
+    display: none;
+  }
+
+  .title {
+    padding-top: 5px;
+    font-size: 32px;
+    line-height: 39px;
+  }
+
+  .subtitle {
+    font-size: 16px;
+    line-height: 19px;
+  }
+
+  .cta {
+    max-width: 150px;
+  }
+}
+
+@keyframes rightAnimation {
+  0% {transform: translate3d(0, 10px, 0);}
+  50% {transform: translate3d(0, 0, 0);}
+  100% {transform: translate3d(0, 10px, 0);}
+}
+
+@keyframes leftAnimation {
+  0% {transform: translate3d(0, 0, 0);}
+  50% {transform: translate3d(0, 10px, 0);}
+  100% {transform: translate3d(0, 0, 0);}
+}

package/es/molecule/dashboard/review-banner/test/fixtures/default.js

@@ -0,0 +1,11 @@
+export default {
+  props: {
+    title: 'Revision mode',
+    subtitle: 'Lorem ipsum dolor sit amet consectur',
+    cta: {
+      label: 'Start revision',
+      onClick: () => {}
+    }
+  }
+};
+//# sourceMappingURL=default.js.map

package/es/molecule/dashboard/review-banner/test/fixtures/default.js.map

@@ -0,0 +1 @@
+{"version":3,"sources":["../../../../../../src/molecule/dashboard/review-banner/test/fixtures/default.js"],"names":["props","title","subtitle","cta","label","onClick"],"mappings":"AAAA,eAAe;AACbA,EAAAA,KAAK,EAAE;AACLC,IAAAA,KAAK,EAAE,eADF;AAELC,IAAAA,QAAQ,EAAE,sCAFL;AAGLC,IAAAA,GAAG,EAAE;AACHC,MAAAA,KAAK,EAAE,gBADJ;AAEHC,MAAAA,OAAO,EAAE,MAAM,CAAE;AAFd;AAHA;AADM,CAAf","sourcesContent":["export default {\n  props: {\n    title: 'Revision mode',\n    subtitle: 'Lorem ipsum dolor sit amet consectur',\n    cta: {\n      label: 'Start revision',\n      onClick: () => {}\n    }\n  }\n};\n"],"file":"default.js"}

package/lib/molecule/dashboard/review-banner/index.js

@@ -0,0 +1,94 @@
+"use strict";
+
+exports.__esModule = true;
+exports.default = void 0;
+
+var _react = _interopRequireDefault(require("react"));
+
+var _propTypes = _interopRequireDefault(require("prop-types"));
+
+var _getOr = _interopRequireDefault(require("lodash/fp/getOr"));
+
+var _provider = _interopRequireDefault(require("../../../atom/provider"));
+
+var _buttonLink = _interopRequireDefault(require("../../../atom/button-link"));
+
+var _style = _interopRequireDefault(require("./style.css"));
+
+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 ReviewBanner = (props, context) => {
+  const {
+    title,
+    subtitle,
+    cta
+  } = props;
+  const {
+    skin
+  } = context;
+  const primary = (0, _getOr.default)('#00B0FF', 'common.primary', skin);
+
+  const buttonProps = _extends(_extends({}, cta), {}, {
+    type: 'primary'
+  });
+
+  const ctaStyle = {
+    background: primary
+  };
+  return /*#__PURE__*/_react.default.createElement("div", {
+    className: _style.default.root,
+    "data-name": "start-review-banner"
+  }, /*#__PURE__*/_react.default.createElement("div", {
+    className: _style.default.container
+  }, /*#__PURE__*/_react.default.createElement("div", {
+    className: _style.default.banner
+  }, /*#__PURE__*/_react.default.createElement("div", {
+    className: _style.default.left,
+    role: "img",
+    "aria-label": "Left image container"
+  }, /*#__PURE__*/_react.default.createElement("img", {
+    className: _style.default.image,
+    src: "https://static.coorpacademy.com/site/book.png",
+    alt: "Book image"
+  })), /*#__PURE__*/_react.default.createElement("div", {
+    className: _style.default.middle
+  }, /*#__PURE__*/_react.default.createElement("span", {
+    className: _style.default.title,
+    "data-name": "review-banner-title",
+    "aria-label": "{title}"
+  }, title), /*#__PURE__*/_react.default.createElement("span", {
+    className: _style.default.subtitle,
+    "data-name": "review-banner-subtitle",
+    "aria-label": "{subtitle}"
+  }, subtitle), /*#__PURE__*/_react.default.createElement(_buttonLink.default, _extends({}, buttonProps, {
+    className: _style.default.cta,
+    customStyle: ctaStyle
+  }))), /*#__PURE__*/_react.default.createElement("div", {
+    className: _style.default.right,
+    role: "img",
+    "aria-label": "Rigth image container"
+  }, /*#__PURE__*/_react.default.createElement("img", {
+    className: _style.default.image,
+    src: "https://static.coorpacademy.com/site/dumbell.png",
+    alt: "Dumbbell image"
+  })))));
+};
+
+ReviewBanner.propTypes = process.env.NODE_ENV !== "production" ? {
+  title: _propTypes.default.string,
+  subtitle: _propTypes.default.string,
+  cta: _propTypes.default.shape({
+    onClick: _propTypes.default.func,
+    label: _propTypes.default.string
+  })
+} : {};
+ReviewBanner.contextTypes = {
+  skin: _provider.default.childContextTypes.skin
+};
+
+var _default = _react.default.memo(ReviewBanner);
+
+exports.default = _default;
+//# sourceMappingURL=index.js.map

package/lib/molecule/dashboard/review-banner/index.js.map

@@ -0,0 +1 @@
+{"version":3,"sources":["../../../../src/molecule/dashboard/review-banner/index.js"],"names":["ReviewBanner","props","context","title","subtitle","cta","skin","primary","buttonProps","type","ctaStyle","background","style","root","container","banner","left","image","middle","right","propTypes","PropTypes","string","shape","onClick","func","label","contextTypes","Provider","childContextTypes","React","memo"],"mappings":";;;;;AAAA;;AACA;;AACA;;AACA;;AACA;;AACA;;;;;;AAEA,MAAMA,YAAY,GAAG,CAACC,KAAD,EAAQC,OAAR,KAAoB;AACvC,QAAM;AAACC,IAAAA,KAAD;AAAQC,IAAAA,QAAR;AAAkBC,IAAAA;AAAlB,MAAyBJ,KAA/B;AACA,QAAM;AAACK,IAAAA;AAAD,MAASJ,OAAf;AACA,QAAMK,OAAO,GAAG,oBAAM,SAAN,EAAiB,gBAAjB,EAAmCD,IAAnC,CAAhB;;AAEA,QAAME,WAAW,yBACZH,GADY;AAEfI,IAAAA,IAAI,EAAE;AAFS,IAAjB;;AAIA,QAAMC,QAAQ,GAAG;AACfC,IAAAA,UAAU,EAAEJ;AADG,GAAjB;AAIA,sBACE;AAAK,IAAA,SAAS,EAAEK,eAAMC,IAAtB;AAA4B,iBAAU;AAAtC,kBACE;AAAK,IAAA,SAAS,EAAED,eAAME;AAAtB,kBACE;AAAK,IAAA,SAAS,EAAEF,eAAMG;AAAtB,kBACE;AAAK,IAAA,SAAS,EAAEH,eAAMI,IAAtB;AAA4B,IAAA,IAAI,EAAC,KAAjC;AAAuC,kBAAW;AAAlD,kBACE;AACE,IAAA,SAAS,EAAEJ,eAAMK,KADnB;AAEE,IAAA,GAAG,EAAC,+CAFN;AAGE,IAAA,GAAG,EAAC;AAHN,IADF,CADF,eAQE;AAAK,IAAA,SAAS,EAAEL,eAAMM;AAAtB,kBACE;AAAM,IAAA,SAAS,EAAEN,eAAMT,KAAvB;AAA8B,iBAAU,qBAAxC;AAA8D,kBAAW;AAAzE,KACGA,KADH,CADF,eAIE;AACE,IAAA,SAAS,EAAES,eAAMR,QADnB;AAEE,iBAAU,wBAFZ;AAGE,kBAAW;AAHb,KAKGA,QALH,CAJF,eAWE,6BAAC,mBAAD,eAAgBI,WAAhB;AAA6B,IAAA,SAAS,EAAEI,eAAMP,GAA9C;AAAmD,IAAA,WAAW,EAAEK;AAAhE,KAXF,CARF,eAqBE;AAAK,IAAA,SAAS,EAAEE,eAAMO,KAAtB;AAA6B,IAAA,IAAI,EAAC,KAAlC;AAAwC,kBAAW;AAAnD,kBACE;AACE,IAAA,SAAS,EAAEP,eAAMK,KADnB;AAEE,IAAA,GAAG,EAAC,kDAFN;AAGE,IAAA,GAAG,EAAC;AAHN,IADF,CArBF,CADF,CADF,CADF;AAmCD,CAhDD;;AAkDAjB,YAAY,CAACoB,SAAb,2CAAyB;AACvBjB,EAAAA,KAAK,EAAEkB,mBAAUC,MADM;AAEvBlB,EAAAA,QAAQ,EAAEiB,mBAAUC,MAFG;AAGvBjB,EAAAA,GAAG,EAAEgB,mBAAUE,KAAV,CAAgB;AACnBC,IAAAA,OAAO,EAAEH,mBAAUI,IADA;AAEnBC,IAAAA,KAAK,EAAEL,mBAAUC;AAFE,GAAhB;AAHkB,CAAzB;AASAtB,YAAY,CAAC2B,YAAb,GAA4B;AAC1BrB,EAAAA,IAAI,EAAEsB,kBAASC,iBAAT,CAA2BvB;AADP,CAA5B;;eAIewB,eAAMC,IAAN,CAAW/B,YAAX,C","sourcesContent":["import React from 'react';\nimport PropTypes from 'prop-types';\nimport getOr from 'lodash/fp/getOr';\nimport Provider from '../../../atom/provider';\nimport ButtonLink from '../../../atom/button-link';\nimport style from './style.css';\n\nconst ReviewBanner = (props, context) => {\n  const {title, subtitle, cta} = props;\n  const {skin} = context;\n  const primary = getOr('#00B0FF', 'common.primary', skin);\n\n  const buttonProps = {\n    ...cta,\n    type: 'primary'\n  };\n  const ctaStyle = {\n    background: primary\n  };\n\n  return (\n    <div className={style.root} data-name=\"start-review-banner\">\n      <div className={style.container}>\n        <div className={style.banner}>\n          <div className={style.left} role=\"img\" aria-label=\"Left image container\">\n            <img\n              className={style.image}\n              src=\"https://static.coorpacademy.com/site/book.png\"\n              alt=\"Book image\"\n            />\n          </div>\n          <div className={style.middle}>\n            <span className={style.title} data-name=\"review-banner-title\" aria-label=\"{title}\">\n              {title}\n            </span>\n            <span\n              className={style.subtitle}\n              data-name=\"review-banner-subtitle\"\n              aria-label=\"{subtitle}\"\n            >\n              {subtitle}\n            </span>\n            <ButtonLink {...buttonProps} className={style.cta} customStyle={ctaStyle} />\n          </div>\n          <div className={style.right} role=\"img\" aria-label=\"Rigth image container\">\n            <img\n              className={style.image}\n              src=\"https://static.coorpacademy.com/site/dumbell.png\"\n              alt=\"Dumbbell image\"\n            />\n          </div>\n        </div>\n      </div>\n    </div>\n  );\n};\n\nReviewBanner.propTypes = {\n  title: PropTypes.string,\n  subtitle: PropTypes.string,\n  cta: PropTypes.shape({\n    onClick: PropTypes.func,\n    label: PropTypes.string\n  })\n};\n\nReviewBanner.contextTypes = {\n  skin: Provider.childContextTypes.skin\n};\n\nexport default React.memo(ReviewBanner);\n"],"file":"index.js"}

package/lib/molecule/dashboard/review-banner/style.css

@@ -0,0 +1,186 @@
+@value breakpoints: "../../../variables/breakpoints.css";
+@value colors: "../../../variables/colors.css";
+@value tablet from breakpoints;
+@value mobile from breakpoints;
+@value white from colors;
+@value battle_bg from colors;
+
+.root {
+  display: flex;
+  justify-content: center;
+  padding: 24px 30px;
+  font-family: Gilroy;
+}
+
+.container {
+  width: 100%;
+  max-width: 1080px;
+  height: 214px;
+  display: flex;
+  justify-content: center;
+  position: relative;
+  top: 0px;
+  left: 0px;
+  background: battle_bg;
+  background-image: url(https://static.coorpacademy.com/site/startBattleBackground.png);
+  background-size: cover;
+  border-radius: 16px;
+}
+
+.container:hover .right, .container:hover .left {
+  animation-play-state: running;
+}
+
+.banner {
+  width: 100%;
+  height: 100%;
+  display: flex;
+  flex-direction: row;
+  align-items: center;
+  justify-content: space-between;
+}
+
+.left {
+  width: 210px;
+  height: 123px;
+  position: relative;
+  top: -57px;
+  left: 2%;
+  animation-play-state: paused;
+  animation-name: leftAnimation;
+  animation-duration: 2s;
+  animation-delay: 0;
+  animation-iteration-count: infinite;
+  animation-direction: forward;
+  animation-timing-function: ease-in-out;
+}
+
+.right {
+  position: relative;
+  bottom: -32px;
+  width: 210px;
+  height: 180px;
+  right: 2%;
+  animation-play-state: paused;
+  animation-name: rightAnimation;
+  animation-duration: 2s;
+  animation-delay: 0;
+  animation-iteration-count: infinite;
+  animation-direction: forward;
+  animation-timing-function: ease-in-out;
+}
+
+.image {
+  width: 100%;
+  height: 100%;
+}
+
+.middle {
+  display: flex;  
+  flex-direction: column;
+  align-items: center;
+}
+
+.title {
+  padding-top: 30px;
+  font-weight: 800;
+  font-size: 48px;
+  line-height: 59px;
+  color: white;
+  display: block;
+}
+
+.subtitle {
+  font-style: normal;
+  font-weight: normal;
+  font-size: 20px;
+  line-height: 24px;
+  opacity: 0.9;
+  display: block;
+  color: white;
+  text-align: center;
+}
+
+.cta {
+  margin-top: 22px;
+  max-width: 200px;
+  border-radius: 36px;
+  font-style: normal;
+  font-weight: bold;
+  font-size: 16px;
+}
+
+@media tablet {
+  .left {
+    width: 170px;
+    height: 100px;
+    top: -67px
+  }
+
+  .right {
+    width: 170px;
+    height: 146px;
+    bottom: -45px;
+  }
+
+  .title {
+    padding-top: 5px;
+    font-size: 32px;
+    line-height: 39px;
+  }
+
+  .subtitle {
+    font-size: 16px;
+    line-height: 19px;
+  }
+  
+  .cta {
+    max-width: 175px;
+  }
+}
+
+@media mobile {
+  .container {
+    height: 161px;
+    max-width: 327px;
+  }
+
+  .banner {
+    justify-content: center;
+  }
+
+  .right {
+    display: none;
+  }
+
+  .left {
+    display: none;
+  }
+
+  .title {
+    padding-top: 5px;
+    font-size: 32px;
+    line-height: 39px;
+  }
+
+  .subtitle {
+    font-size: 16px;
+    line-height: 19px;
+  }
+
+  .cta {
+    max-width: 150px;
+  }
+}
+
+@keyframes rightAnimation {
+  0% {transform: translate3d(0, 10px, 0);}
+  50% {transform: translate3d(0, 0, 0);}
+  100% {transform: translate3d(0, 10px, 0);}
+}
+
+@keyframes leftAnimation {
+  0% {transform: translate3d(0, 0, 0);}
+  50% {transform: translate3d(0, 10px, 0);}
+  100% {transform: translate3d(0, 0, 0);}
+}

package/lib/molecule/dashboard/review-banner/test/fixtures/default.js

@@ -0,0 +1,16 @@
+"use strict";
+
+exports.__esModule = true;
+exports.default = void 0;
+var _default = {
+  props: {
+    title: 'Revision mode',
+    subtitle: 'Lorem ipsum dolor sit amet consectur',
+    cta: {
+      label: 'Start revision',
+      onClick: () => {}
+    }
+  }
+};
+exports.default = _default;
+//# sourceMappingURL=default.js.map

package/lib/molecule/dashboard/review-banner/test/fixtures/default.js.map

@@ -0,0 +1 @@
+{"version":3,"sources":["../../../../../../src/molecule/dashboard/review-banner/test/fixtures/default.js"],"names":["props","title","subtitle","cta","label","onClick"],"mappings":";;;;eAAe;AACbA,EAAAA,KAAK,EAAE;AACLC,IAAAA,KAAK,EAAE,eADF;AAELC,IAAAA,QAAQ,EAAE,sCAFL;AAGLC,IAAAA,GAAG,EAAE;AACHC,MAAAA,KAAK,EAAE,gBADJ;AAEHC,MAAAA,OAAO,EAAE,MAAM,CAAE;AAFd;AAHA;AADM,C","sourcesContent":["export default {\n  props: {\n    title: 'Revision mode',\n    subtitle: 'Lorem ipsum dolor sit amet consectur',\n    cta: {\n      label: 'Start revision',\n      onClick: () => {}\n    }\n  }\n};\n"],"file":"default.js"}

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@coorpacademy/components",
-  "version": "10.8.0",
+  "version": "10.9.0",
   "description": "",
   "main": "lib/index.js",
   "module": "es/index.js",
@@ -119,5 +119,5 @@
     "webpack-hot-middleware": "^2.25.0"
   },
   "author": "CoorpAcademy",
-  "gitHead": "8209ca19069e80266b8c330b0a7eccb63dc2bd51"
+  "gitHead": "ec3f54e338aa0f67e7bdc49c45e29afc9871f98a"
 }