@coorpacademy/components 10.8.0 → 10.11.0

package/es/molecule/checkbox-with-title/index.js

@@ -0,0 +1,51 @@
+import _uniqueId from "lodash/fp/uniqueId";
+import _noop from "lodash/fp/noop";
+import React, { useMemo } from 'react';
+import PropTypes from 'prop-types';
+import { NovaSolidStatusValidate as CheckIcon } from '@coorpacademy/nova-icons';
+import style from './style.css';
+
+const CheckboxWithTitle = props => {
+  const {
+    title,
+    name,
+    checked,
+    onChange = _noop,
+    'data-name': dataName,
+    'aria-label': ariaLabel
+  } = props;
+
+  const idCheckbox = _uniqueId('input-checkbox-');
+
+  const handleChange = useMemo(() => e => onChange(e.target.checked), [onChange]);
+  return /*#__PURE__*/React.createElement("label", {
+    className: style.container,
+    htmlFor: idCheckbox
+  }, /*#__PURE__*/React.createElement("input", {
+    type: "checkbox",
+    id: idCheckbox,
+    name: name,
+    onChange: handleChange,
+    checked: checked,
+    className: style.checkbox,
+    "data-name": dataName,
+    "aria-label": ariaLabel
+  }), /*#__PURE__*/React.createElement("div", {
+    className: style.label
+  }, /*#__PURE__*/React.createElement(CheckIcon, {
+    className: style.icon
+  })), /*#__PURE__*/React.createElement("span", {
+    className: style.title
+  }, title));
+};
+
+CheckboxWithTitle.propTypes = process.env.NODE_ENV !== "production" ? {
+  title: PropTypes.string,
+  name: PropTypes.string,
+  checked: PropTypes.bool,
+  onChange: PropTypes.func,
+  'aria-label': PropTypes.string,
+  'data-name': PropTypes.string
+} : {};
+export default CheckboxWithTitle;
+//# sourceMappingURL=index.js.map

package/es/molecule/checkbox-with-title/index.js.map

@@ -0,0 +1 @@
+{"version":3,"sources":["../../../src/molecule/checkbox-with-title/index.js"],"names":["React","useMemo","PropTypes","NovaSolidStatusValidate","CheckIcon","style","CheckboxWithTitle","props","title","name","checked","onChange","dataName","ariaLabel","idCheckbox","handleChange","e","target","container","checkbox","label","icon","propTypes","string","bool","func"],"mappings":";;AAAA,OAAOA,KAAP,IAAeC,OAAf,QAA6B,OAA7B;AACA,OAAOC,SAAP,MAAsB,YAAtB;AAEA,SAAQC,uBAAuB,IAAIC,SAAnC,QAAmD,0BAAnD;AACA,OAAOC,KAAP,MAAkB,aAAlB;;AAEA,MAAMC,iBAAiB,GAAGC,KAAK,IAAI;AACjC,QAAM;AACJC,IAAAA,KADI;AAEJC,IAAAA,IAFI;AAGJC,IAAAA,OAHI;AAIJC,IAAAA,QAAQ,QAJJ;AAKJ,iBAAaC,QALT;AAMJ,kBAAcC;AANV,MAOFN,KAPJ;;AASA,QAAMO,UAAU,GAAG,UAAS,iBAAT,CAAnB;;AACA,QAAMC,YAAY,GAAGd,OAAO,CAAC,MAAMe,CAAC,IAAIL,QAAQ,CAACK,CAAC,CAACC,MAAF,CAASP,OAAV,CAApB,EAAwC,CAACC,QAAD,CAAxC,CAA5B;AAEA,sBACE;AAAO,IAAA,SAAS,EAAEN,KAAK,CAACa,SAAxB;AAAmC,IAAA,OAAO,EAAEJ;AAA5C,kBACE;AACE,IAAA,IAAI,EAAC,UADP;AAEE,IAAA,EAAE,EAAEA,UAFN;AAGE,IAAA,IAAI,EAAEL,IAHR;AAIE,IAAA,QAAQ,EAAEM,YAJZ;AAKE,IAAA,OAAO,EAAEL,OALX;AAME,IAAA,SAAS,EAAEL,KAAK,CAACc,QANnB;AAOE,iBAAWP,QAPb;AAQE,kBAAYC;AARd,IADF,eAWE;AAAK,IAAA,SAAS,EAAER,KAAK,CAACe;AAAtB,kBACE,oBAAC,SAAD;AAAW,IAAA,SAAS,EAAEf,KAAK,CAACgB;AAA5B,IADF,CAXF,eAcE;AAAM,IAAA,SAAS,EAAEhB,KAAK,CAACG;AAAvB,KAA+BA,KAA/B,CAdF,CADF;AAkBD,CA/BD;;AAiCAF,iBAAiB,CAACgB,SAAlB,2CAA8B;AAC5Bd,EAAAA,KAAK,EAAEN,SAAS,CAACqB,MADW;AAE5Bd,EAAAA,IAAI,EAAEP,SAAS,CAACqB,MAFY;AAG5Bb,EAAAA,OAAO,EAAER,SAAS,CAACsB,IAHS;AAI5Bb,EAAAA,QAAQ,EAAET,SAAS,CAACuB,IAJQ;AAK5B,gBAAcvB,SAAS,CAACqB,MALI;AAM5B,eAAarB,SAAS,CAACqB;AANK,CAA9B;AAQA,eAAejB,iBAAf","sourcesContent":["import React, {useMemo} from 'react';\nimport PropTypes from 'prop-types';\nimport {noop, uniqueId} from 'lodash/fp';\nimport {NovaSolidStatusValidate as CheckIcon} from '@coorpacademy/nova-icons';\nimport style from './style.css';\n\nconst CheckboxWithTitle = props => {\n  const {\n    title,\n    name,\n    checked,\n    onChange = noop,\n    'data-name': dataName,\n    'aria-label': ariaLabel\n  } = props;\n\n  const idCheckbox = uniqueId('input-checkbox-');\n  const handleChange = useMemo(() => e => onChange(e.target.checked), [onChange]);\n\n  return (\n    <label className={style.container} htmlFor={idCheckbox}>\n      <input\n        type=\"checkbox\"\n        id={idCheckbox}\n        name={name}\n        onChange={handleChange}\n        checked={checked}\n        className={style.checkbox}\n        data-name={dataName}\n        aria-label={ariaLabel}\n      />\n      <div className={style.label}>\n        <CheckIcon className={style.icon} />\n      </div>\n      <span className={style.title}>{title}</span>\n    </label>\n  );\n};\n\nCheckboxWithTitle.propTypes = {\n  title: PropTypes.string,\n  name: PropTypes.string,\n  checked: PropTypes.bool,\n  onChange: PropTypes.func,\n  'aria-label': PropTypes.string,\n  'data-name': PropTypes.string\n};\nexport default CheckboxWithTitle;\n"],"file":"index.js"}

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

@@ -0,0 +1,62 @@
+@value colors: "../../variables/colors.css";
+@value white from colors;
+@value dark from colors;
+@value cm_grey_200 from colors;
+@value cm_grey_100 from colors;
+@value black from colors;
+@value cm_primary_blue from colors;
+
+.container {
+  display: flex;
+  align-items: center;
+  align-content: flex-start;
+}
+
+.container input {
+  display: none;
+}
+
+.icon {
+  display: none;
+  width: 16px;
+  height: 14px;
+  color: white;
+}
+
+.container .title {
+  font-family: "Gilroy";
+  font-weight: bold;
+  font-size: 20px;
+  color: dark;
+  width: 180px;
+  margin-right: 20px;
+  min-height: 50px;
+  display: flex;
+  align-items: center;
+  align-content: center;
+  color: black;
+}
+
+.container .label {
+  border: solid 1px cm_grey_200;
+  background-color: cm_grey_100;
+  display: flex;
+  justify-content: center;
+  align-items: center;
+  width: 23px;
+  height: 23px;
+  border-radius: 5px;
+  font-size: 14px;
+  color: dark;
+  margin-right: 8px;
+  position: relative;
+}
+
+.checkbox:checked + .label {
+  border: solid 1px cm_primary_blue;
+  background-color: cm_primary_blue;
+}
+
+.checkbox:checked + .label .icon {
+  display: flex;
+}

package/es/molecule/checkbox-with-title/test/fixtures/checked.js

@@ -0,0 +1,8 @@
+export default {
+  props: {
+    title: 'Add stars',
+    checked: true,
+    onChange: value => console.log(value)
+  }
+};
+//# sourceMappingURL=checked.js.map

package/es/molecule/checkbox-with-title/test/fixtures/checked.js.map

@@ -0,0 +1 @@
+{"version":3,"sources":["../../../../../src/molecule/checkbox-with-title/test/fixtures/checked.js"],"names":["props","title","checked","onChange","value","console","log"],"mappings":"AAAA,eAAe;AACbA,EAAAA,KAAK,EAAE;AACLC,IAAAA,KAAK,EAAE,WADF;AAELC,IAAAA,OAAO,EAAE,IAFJ;AAGLC,IAAAA,QAAQ,EAAEC,KAAK,IAAIC,OAAO,CAACC,GAAR,CAAYF,KAAZ;AAHd;AADM,CAAf","sourcesContent":["export default {\n  props: {\n    title: 'Add stars',\n    checked: true,\n    onChange: value => console.log(value)\n  }\n};\n"],"file":"checked.js"}

package/es/molecule/checkbox-with-title/test/fixtures/unchecked.js

@@ -0,0 +1,8 @@
+export default {
+  props: {
+    title: 'Create badge',
+    checked: false,
+    onChange: value => console.log(value)
+  }
+};
+//# sourceMappingURL=unchecked.js.map

package/es/molecule/checkbox-with-title/test/fixtures/unchecked.js.map

@@ -0,0 +1 @@
+{"version":3,"sources":["../../../../../src/molecule/checkbox-with-title/test/fixtures/unchecked.js"],"names":["props","title","checked","onChange","value","console","log"],"mappings":"AAAA,eAAe;AACbA,EAAAA,KAAK,EAAE;AACLC,IAAAA,KAAK,EAAE,cADF;AAELC,IAAAA,OAAO,EAAE,KAFJ;AAGLC,IAAAA,QAAQ,EAAEC,KAAK,IAAIC,OAAO,CAACC,GAAR,CAAYF,KAAZ;AAHd;AADM,CAAf","sourcesContent":["export default {\n  props: {\n    title: 'Create badge',\n    checked: false,\n    onChange: value => console.log(value)\n  }\n};\n"],"file":"unchecked.js"}

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

@@ -0,0 +1,66 @@
+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 ButtonLink from '../../../atom/button-link';
+import style from './style.css';
+
+const ReviewBanner = props => {
+  const {
+    title,
+    subtitle,
+    cta
+  } = props;
+
+  const buttonProps = _extends(_extends({}, cta), {}, {
+    type: '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
+  }))), /*#__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
+  })
+} : {};
+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","ButtonLink","style","ReviewBanner","props","title","subtitle","cta","buttonProps","type","root","container","banner","left","image","middle","right","propTypes","string","shape","onClick","func","label","memo"],"mappings":";;AAAA,OAAOA,KAAP,MAAkB,OAAlB;AACA,OAAOC,SAAP,MAAsB,YAAtB;AACA,OAAOC,UAAP,MAAuB,2BAAvB;AACA,OAAOC,KAAP,MAAkB,aAAlB;;AAEA,MAAMC,YAAY,GAAGC,KAAK,IAAI;AAC5B,QAAM;AAACC,IAAAA,KAAD;AAAQC,IAAAA,QAAR;AAAkBC,IAAAA;AAAlB,MAAyBH,KAA/B;;AAEA,QAAMI,WAAW,yBACZD,GADY;AAEfE,IAAAA,IAAI,EAAE;AAFS,IAAjB;;AAKA,sBACE;AAAK,IAAA,SAAS,EAAEP,KAAK,CAACQ,IAAtB;AAA4B,iBAAU;AAAtC,kBACE;AAAK,IAAA,SAAS,EAAER,KAAK,CAACS;AAAtB,kBACE;AAAK,IAAA,SAAS,EAAET,KAAK,CAACU;AAAtB,kBACE;AAAK,IAAA,SAAS,EAAEV,KAAK,CAACW,IAAtB;AAA4B,IAAA,IAAI,EAAC,KAAjC;AAAuC,kBAAW;AAAlD,kBACE;AACE,IAAA,SAAS,EAAEX,KAAK,CAACY,KADnB;AAEE,IAAA,GAAG,EAAC,+CAFN;AAGE,IAAA,GAAG,EAAC;AAHN,IADF,CADF,eAQE;AAAK,IAAA,SAAS,EAAEZ,KAAK,CAACa;AAAtB,kBACE;AAAM,IAAA,SAAS,EAAEb,KAAK,CAACG,KAAvB;AAA8B,iBAAU,qBAAxC;AAA8D,kBAAW;AAAzE,KACGA,KADH,CADF,eAIE;AACE,IAAA,SAAS,EAAEH,KAAK,CAACI,QADnB;AAEE,iBAAU,wBAFZ;AAGE,kBAAW;AAHb,KAKGA,QALH,CAJF,eAWE,oBAAC,UAAD,eAAgBE,WAAhB;AAA6B,IAAA,SAAS,EAAEN,KAAK,CAACK;AAA9C,KAXF,CARF,eAqBE;AAAK,IAAA,SAAS,EAAEL,KAAK,CAACc,KAAtB;AAA6B,IAAA,IAAI,EAAC,KAAlC;AAAwC,kBAAW;AAAnD,kBACE;AACE,IAAA,SAAS,EAAEd,KAAK,CAACY,KADnB;AAEE,IAAA,GAAG,EAAC,kDAFN;AAGE,IAAA,GAAG,EAAC;AAHN,IADF,CArBF,CADF,CADF,CADF;AAmCD,CA3CD;;AA6CAX,YAAY,CAACc,SAAb,2CAAyB;AACvBZ,EAAAA,KAAK,EAAEL,SAAS,CAACkB,MADM;AAEvBZ,EAAAA,QAAQ,EAAEN,SAAS,CAACkB,MAFG;AAGvBX,EAAAA,GAAG,EAAEP,SAAS,CAACmB,KAAV,CAAgB;AACnBC,IAAAA,OAAO,EAAEpB,SAAS,CAACqB,IADA;AAEnBC,IAAAA,KAAK,EAAEtB,SAAS,CAACkB;AAFE,GAAhB;AAHkB,CAAzB;AASA,eAAenB,KAAK,CAACwB,IAAN,CAAWpB,YAAX,CAAf","sourcesContent":["import React from 'react';\nimport PropTypes from 'prop-types';\nimport ButtonLink from '../../../atom/button-link';\nimport style from './style.css';\n\nconst ReviewBanner = props => {\n  const {title, subtitle, cta} = props;\n\n  const buttonProps = {\n    ...cta,\n    type: '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} />\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\nexport default React.memo(ReviewBanner);\n"],"file":"index.js"}

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

@@ -0,0 +1,195 @@
+@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;
+@value cm_orange_200 from colors;
+@value cm_orange_700 from colors;
+@value box_shadow_orange_700 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;
+  background-color: cm_orange_200;
+}
+
+.cta:hover {
+  background-color: cm_orange_700;
+  box-shadow: 0px 0px 30px 11px box_shadow_orange_700;
+}
+
+@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/es/molecule/review-correction-popin/index.js

@@ -68,10 +68,12 @@ const ReviewCorrectionPopin = props => {
   }, /*#__PURE__*/React.createElement("div", {
     className: style.information,
     "aria-label": "answer-information"
+  }, /*#__PURE__*/React.createElement("div", {
+    className: style.labelContainer
   }, /*#__PURE__*/React.createElement("span", {
     className: style.label,
     "aria-label": information.label
-  }, information.label), /*#__PURE__*/React.createElement("span", {
+  }, information.label)), /*#__PURE__*/React.createElement("span", {
     className: style.message,
     "aria-label": information.message
   }, information.message))), /*#__PURE__*/React.createElement("div", {

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","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            <span className={style.label} aria-label={information.label}>\n              {information.label}\n            </span>\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  }),\n  klf: PropTypes.shape({\n    label: PropTypes.string,\n    onClick: PropTypes.func\n  })\n};\n\nexport default ReviewCorrectionPopin;\n"],"file":"index.js"}

package/es/molecule/review-correction-popin/style.css

@@ -48,7 +48,7 @@
 
 .feedbackSection {
   display: flex;
-  margin: 0 23px;
+  margin: 0 48px 0 23px;
   flex-direction: row;
   align-items: center;
   justify-content: left;
@@ -84,7 +84,7 @@
 
 .resultLabel {
   margin-left: 12px;
-  font-weight: 900;
+  font-weight: 600;
   font-size: 24px;
   line-height: 24px;
   hyphens: auto;
@@ -95,21 +95,23 @@
 .information {
   display: block;
   flex-direction: column;
+  width: 100%;
 }
 
-.information .label {
-  width: 140px;
-  height: 25px;
+.labelContainer {
+  width: fit-content;
+  height: fit-content;
   padding: 4px 8px;
   background: rgba(255, 255, 255, 0.3);
   border-radius: 56px;
+  display: table;
+}
+
+.label {
   font-style: normal;
   font-weight: 900;
   font-size: 14px;
   line-height: 17px;
-  display: flex;
-  align-items: center;
-  justify-content: center;
   hyphens: auto;
   -ms-word-break: break-word;
   word-break: break-word;
@@ -139,11 +141,12 @@
   opacity: 0;
   transition: opacity 0.8s;
   position: absolute;
-  width: 273px;
+  width: 142%;
   border-radius: 15px;
   background-color: white;
-  right: 17.5%;
-  top: -64px;
+  right: 0px;
+  bottom: 55px;
+  filter: drop-shadow(0px 4px 16px rgba(0, 0, 0, 0.32));
 }
 
 .toolTip::before {
@@ -158,7 +161,7 @@
   background-color: white;
   position: inherit;
   bottom: -7px;
-  left: 129px;
+  right: 10%;
 }
 
 .tooltipText {
@@ -177,6 +180,7 @@
   overflow: visible;
   width: calc(55% - 16px);
   margin-right: 16px;
+  position: relative;
 }
 
 .klfButtonContainer:hover ~ .toolTip {
@@ -236,11 +240,6 @@
   .actionsWrong {
     width: 47%;
   }
-
-  .toolTip {
-    width: 250px;
-    right: 25%;
-  }
 }
 
 @media mobile {
@@ -309,6 +308,10 @@
     bottom: 52px;
   }
 
+  .toolTip::before {
+    right: 50%
+  }
+
   .tooltipText {
     max-width: none;
   }

package/es/variables/colors.css

@@ -51,7 +51,7 @@
 @value cm_green_50: #e8fcf8;
 @value cm_green_200: #16ac8c;
 @value cm_orange_200: #FF7043;
-@value cm_orange_700: #ff4105;
+@value cm_orange_700: #FF4105;
 @value cm_pink_50: #ffefeb;
 @value cm_purple_200: #7340FF;
 @value cm_yellow_scorm: #FFB800;
@@ -64,3 +64,4 @@
 @value cm_warning_50: rgba(255, 192, 67, 0.13);
 @value box_shadow_light_dark: rgba(0, 0, 0, 0.12);
 @value box_shadow_medium_dark: rgba(0, 0, 0, 0.2);
+@value box_shadow_orange_700: rgba(255, 84, 31, 0.15);

package/lib/molecule/checkbox-with-title/index.js

@@ -0,0 +1,66 @@
+"use strict";
+
+exports.__esModule = true;
+exports.default = void 0;
+
+var _uniqueId2 = _interopRequireDefault(require("lodash/fp/uniqueId"));
+
+var _noop2 = _interopRequireDefault(require("lodash/fp/noop"));
+
+var _react = _interopRequireWildcard(require("react"));
+
+var _propTypes = _interopRequireDefault(require("prop-types"));
+
+var _novaIcons = require("@coorpacademy/nova-icons");
+
+var _style = _interopRequireDefault(require("./style.css"));
+
+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 }; }
+
+const CheckboxWithTitle = props => {
+  const {
+    title,
+    name,
+    checked,
+    onChange = _noop2.default,
+    'data-name': dataName,
+    'aria-label': ariaLabel
+  } = props;
+  const idCheckbox = (0, _uniqueId2.default)('input-checkbox-');
+  const handleChange = (0, _react.useMemo)(() => e => onChange(e.target.checked), [onChange]);
+  return /*#__PURE__*/_react.default.createElement("label", {
+    className: _style.default.container,
+    htmlFor: idCheckbox
+  }, /*#__PURE__*/_react.default.createElement("input", {
+    type: "checkbox",
+    id: idCheckbox,
+    name: name,
+    onChange: handleChange,
+    checked: checked,
+    className: _style.default.checkbox,
+    "data-name": dataName,
+    "aria-label": ariaLabel
+  }), /*#__PURE__*/_react.default.createElement("div", {
+    className: _style.default.label
+  }, /*#__PURE__*/_react.default.createElement(_novaIcons.NovaSolidStatusValidate, {
+    className: _style.default.icon
+  })), /*#__PURE__*/_react.default.createElement("span", {
+    className: _style.default.title
+  }, title));
+};
+
+CheckboxWithTitle.propTypes = process.env.NODE_ENV !== "production" ? {
+  title: _propTypes.default.string,
+  name: _propTypes.default.string,
+  checked: _propTypes.default.bool,
+  onChange: _propTypes.default.func,
+  'aria-label': _propTypes.default.string,
+  'data-name': _propTypes.default.string
+} : {};
+var _default = CheckboxWithTitle;
+exports.default = _default;
+//# sourceMappingURL=index.js.map

package/lib/molecule/checkbox-with-title/index.js.map

@@ -0,0 +1 @@
+{"version":3,"sources":["../../../src/molecule/checkbox-with-title/index.js"],"names":["CheckboxWithTitle","props","title","name","checked","onChange","dataName","ariaLabel","idCheckbox","handleChange","e","target","style","container","checkbox","label","icon","propTypes","PropTypes","string","bool","func"],"mappings":";;;;;;;;;AAAA;;AACA;;AAEA;;AACA;;;;;;;;AAEA,MAAMA,iBAAiB,GAAGC,KAAK,IAAI;AACjC,QAAM;AACJC,IAAAA,KADI;AAEJC,IAAAA,IAFI;AAGJC,IAAAA,OAHI;AAIJC,IAAAA,QAAQ,iBAJJ;AAKJ,iBAAaC,QALT;AAMJ,kBAAcC;AANV,MAOFN,KAPJ;AASA,QAAMO,UAAU,GAAG,wBAAS,iBAAT,CAAnB;AACA,QAAMC,YAAY,GAAG,oBAAQ,MAAMC,CAAC,IAAIL,QAAQ,CAACK,CAAC,CAACC,MAAF,CAASP,OAAV,CAA3B,EAA+C,CAACC,QAAD,CAA/C,CAArB;AAEA,sBACE;AAAO,IAAA,SAAS,EAAEO,eAAMC,SAAxB;AAAmC,IAAA,OAAO,EAAEL;AAA5C,kBACE;AACE,IAAA,IAAI,EAAC,UADP;AAEE,IAAA,EAAE,EAAEA,UAFN;AAGE,IAAA,IAAI,EAAEL,IAHR;AAIE,IAAA,QAAQ,EAAEM,YAJZ;AAKE,IAAA,OAAO,EAAEL,OALX;AAME,IAAA,SAAS,EAAEQ,eAAME,QANnB;AAOE,iBAAWR,QAPb;AAQE,kBAAYC;AARd,IADF,eAWE;AAAK,IAAA,SAAS,EAAEK,eAAMG;AAAtB,kBACE,6BAAC,kCAAD;AAAW,IAAA,SAAS,EAAEH,eAAMI;AAA5B,IADF,CAXF,eAcE;AAAM,IAAA,SAAS,EAAEJ,eAAMV;AAAvB,KAA+BA,KAA/B,CAdF,CADF;AAkBD,CA/BD;;AAiCAF,iBAAiB,CAACiB,SAAlB,2CAA8B;AAC5Bf,EAAAA,KAAK,EAAEgB,mBAAUC,MADW;AAE5BhB,EAAAA,IAAI,EAAEe,mBAAUC,MAFY;AAG5Bf,EAAAA,OAAO,EAAEc,mBAAUE,IAHS;AAI5Bf,EAAAA,QAAQ,EAAEa,mBAAUG,IAJQ;AAK5B,gBAAcH,mBAAUC,MALI;AAM5B,eAAaD,mBAAUC;AANK,CAA9B;eAQenB,iB","sourcesContent":["import React, {useMemo} from 'react';\nimport PropTypes from 'prop-types';\nimport {noop, uniqueId} from 'lodash/fp';\nimport {NovaSolidStatusValidate as CheckIcon} from '@coorpacademy/nova-icons';\nimport style from './style.css';\n\nconst CheckboxWithTitle = props => {\n  const {\n    title,\n    name,\n    checked,\n    onChange = noop,\n    'data-name': dataName,\n    'aria-label': ariaLabel\n  } = props;\n\n  const idCheckbox = uniqueId('input-checkbox-');\n  const handleChange = useMemo(() => e => onChange(e.target.checked), [onChange]);\n\n  return (\n    <label className={style.container} htmlFor={idCheckbox}>\n      <input\n        type=\"checkbox\"\n        id={idCheckbox}\n        name={name}\n        onChange={handleChange}\n        checked={checked}\n        className={style.checkbox}\n        data-name={dataName}\n        aria-label={ariaLabel}\n      />\n      <div className={style.label}>\n        <CheckIcon className={style.icon} />\n      </div>\n      <span className={style.title}>{title}</span>\n    </label>\n  );\n};\n\nCheckboxWithTitle.propTypes = {\n  title: PropTypes.string,\n  name: PropTypes.string,\n  checked: PropTypes.bool,\n  onChange: PropTypes.func,\n  'aria-label': PropTypes.string,\n  'data-name': PropTypes.string\n};\nexport default CheckboxWithTitle;\n"],"file":"index.js"}

package/lib/molecule/checkbox-with-title/style.css

@@ -0,0 +1,62 @@
+@value colors: "../../variables/colors.css";
+@value white from colors;
+@value dark from colors;
+@value cm_grey_200 from colors;
+@value cm_grey_100 from colors;
+@value black from colors;
+@value cm_primary_blue from colors;
+
+.container {
+  display: flex;
+  align-items: center;
+  align-content: flex-start;
+}
+
+.container input {
+  display: none;
+}
+
+.icon {
+  display: none;
+  width: 16px;
+  height: 14px;
+  color: white;
+}
+
+.container .title {
+  font-family: "Gilroy";
+  font-weight: bold;
+  font-size: 20px;
+  color: dark;
+  width: 180px;
+  margin-right: 20px;
+  min-height: 50px;
+  display: flex;
+  align-items: center;
+  align-content: center;
+  color: black;
+}
+
+.container .label {
+  border: solid 1px cm_grey_200;
+  background-color: cm_grey_100;
+  display: flex;
+  justify-content: center;
+  align-items: center;
+  width: 23px;
+  height: 23px;
+  border-radius: 5px;
+  font-size: 14px;
+  color: dark;
+  margin-right: 8px;
+  position: relative;
+}
+
+.checkbox:checked + .label {
+  border: solid 1px cm_primary_blue;
+  background-color: cm_primary_blue;
+}
+
+.checkbox:checked + .label .icon {
+  display: flex;
+}

package/lib/molecule/checkbox-with-title/test/fixtures/checked.js

@@ -0,0 +1,13 @@
+"use strict";
+
+exports.__esModule = true;
+exports.default = void 0;
+var _default = {
+  props: {
+    title: 'Add stars',
+    checked: true,
+    onChange: value => console.log(value)
+  }
+};
+exports.default = _default;
+//# sourceMappingURL=checked.js.map

package/lib/molecule/checkbox-with-title/test/fixtures/checked.js.map

@@ -0,0 +1 @@
+{"version":3,"sources":["../../../../../src/molecule/checkbox-with-title/test/fixtures/checked.js"],"names":["props","title","checked","onChange","value","console","log"],"mappings":";;;;eAAe;AACbA,EAAAA,KAAK,EAAE;AACLC,IAAAA,KAAK,EAAE,WADF;AAELC,IAAAA,OAAO,EAAE,IAFJ;AAGLC,IAAAA,QAAQ,EAAEC,KAAK,IAAIC,OAAO,CAACC,GAAR,CAAYF,KAAZ;AAHd;AADM,C","sourcesContent":["export default {\n  props: {\n    title: 'Add stars',\n    checked: true,\n    onChange: value => console.log(value)\n  }\n};\n"],"file":"checked.js"}

package/lib/molecule/checkbox-with-title/test/fixtures/unchecked.js

@@ -0,0 +1,13 @@
+"use strict";
+
+exports.__esModule = true;
+exports.default = void 0;
+var _default = {
+  props: {
+    title: 'Create badge',
+    checked: false,
+    onChange: value => console.log(value)
+  }
+};
+exports.default = _default;
+//# sourceMappingURL=unchecked.js.map

package/lib/molecule/checkbox-with-title/test/fixtures/unchecked.js.map

@@ -0,0 +1 @@
+{"version":3,"sources":["../../../../../src/molecule/checkbox-with-title/test/fixtures/unchecked.js"],"names":["props","title","checked","onChange","value","console","log"],"mappings":";;;;eAAe;AACbA,EAAAA,KAAK,EAAE;AACLC,IAAAA,KAAK,EAAE,cADF;AAELC,IAAAA,OAAO,EAAE,KAFJ;AAGLC,IAAAA,QAAQ,EAAEC,KAAK,IAAIC,OAAO,CAACC,GAAR,CAAYF,KAAZ;AAHd;AADM,C","sourcesContent":["export default {\n  props: {\n    title: 'Create badge',\n    checked: false,\n    onChange: value => console.log(value)\n  }\n};\n"],"file":"unchecked.js"}

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

@@ -0,0 +1,79 @@
+"use strict";
+
+exports.__esModule = true;
+exports.default = void 0;
+
+var _react = _interopRequireDefault(require("react"));
+
+var _propTypes = _interopRequireDefault(require("prop-types"));
+
+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 => {
+  const {
+    title,
+    subtitle,
+    cta
+  } = props;
+
+  const buttonProps = _extends(_extends({}, cta), {}, {
+    type: '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
+  }))), /*#__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
+  })
+} : {};
+
+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","title","subtitle","cta","buttonProps","type","style","root","container","banner","left","image","middle","right","propTypes","PropTypes","string","shape","onClick","func","label","React","memo"],"mappings":";;;;;AAAA;;AACA;;AACA;;AACA;;;;;;AAEA,MAAMA,YAAY,GAAGC,KAAK,IAAI;AAC5B,QAAM;AAACC,IAAAA,KAAD;AAAQC,IAAAA,QAAR;AAAkBC,IAAAA;AAAlB,MAAyBH,KAA/B;;AAEA,QAAMI,WAAW,yBACZD,GADY;AAEfE,IAAAA,IAAI,EAAE;AAFS,IAAjB;;AAKA,sBACE;AAAK,IAAA,SAAS,EAAEC,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,eAAML,KAAvB;AAA8B,iBAAU,qBAAxC;AAA8D,kBAAW;AAAzE,KACGA,KADH,CADF,eAIE;AACE,IAAA,SAAS,EAAEK,eAAMJ,QADnB;AAEE,iBAAU,wBAFZ;AAGE,kBAAW;AAHb,KAKGA,QALH,CAJF,eAWE,6BAAC,mBAAD,eAAgBE,WAAhB;AAA6B,IAAA,SAAS,EAAEE,eAAMH;AAA9C,KAXF,CARF,eAqBE;AAAK,IAAA,SAAS,EAAEG,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,CA3CD;;AA6CAZ,YAAY,CAACe,SAAb,2CAAyB;AACvBb,EAAAA,KAAK,EAAEc,mBAAUC,MADM;AAEvBd,EAAAA,QAAQ,EAAEa,mBAAUC,MAFG;AAGvBb,EAAAA,GAAG,EAAEY,mBAAUE,KAAV,CAAgB;AACnBC,IAAAA,OAAO,EAAEH,mBAAUI,IADA;AAEnBC,IAAAA,KAAK,EAAEL,mBAAUC;AAFE,GAAhB;AAHkB,CAAzB;;eASeK,eAAMC,IAAN,CAAWvB,YAAX,C","sourcesContent":["import React from 'react';\nimport PropTypes from 'prop-types';\nimport ButtonLink from '../../../atom/button-link';\nimport style from './style.css';\n\nconst ReviewBanner = props => {\n  const {title, subtitle, cta} = props;\n\n  const buttonProps = {\n    ...cta,\n    type: '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} />\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\nexport default React.memo(ReviewBanner);\n"],"file":"index.js"}

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

@@ -0,0 +1,195 @@
+@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;
+@value cm_orange_200 from colors;
+@value cm_orange_700 from colors;
+@value box_shadow_orange_700 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;
+  background-color: cm_orange_200;
+}
+
+.cta:hover {
+  background-color: cm_orange_700;
+  box-shadow: 0px 0px 30px 11px box_shadow_orange_700;
+}
+
+@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/lib/molecule/review-correction-popin/index.js

@@ -80,10 +80,12 @@ const ReviewCorrectionPopin = props => {
   }, /*#__PURE__*/_react.default.createElement("div", {
     className: _style.default.information,
     "aria-label": "answer-information"
+  }, /*#__PURE__*/_react.default.createElement("div", {
+    className: _style.default.labelContainer
   }, /*#__PURE__*/_react.default.createElement("span", {
     className: _style.default.label,
     "aria-label": information.label
-  }, information.label), /*#__PURE__*/_react.default.createElement("span", {
+  }, information.label)), /*#__PURE__*/_react.default.createElement("span", {
     className: _style.default.message,
     "aria-label": information.message
   }, information.message))), /*#__PURE__*/_react.default.createElement("div", {

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

@@ -1 +1 @@
-{"version":3,"sources":["../../../src/molecule/review-correction-popin/index.js"],"names":["buildKlfButton","klf","klfButtonProps","icon","position","type","style","klfContainer","klfButtonContainer","klfButton","toolTip","tooltipText","tooltip","ReviewCorrectionPopin","props","information","resultLabel","next","nextQuestionButtonProps","cta","ICONS","right","RightIcon","wrong","WrongIcon","Icon","wrapper","popin","correctionSection","iconCircle","iconRight","iconWrong","feedbackSection","label","message","actions","actionsWrong","nextQuestionContainer","nextQuestionButton","propTypes","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            <span className={style.label} aria-label={information.label}>\n              {information.label}\n            </span>\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":["buildKlfButton","klf","klfButtonProps","icon","position","type","style","klfContainer","klfButtonContainer","klfButton","toolTip","tooltipText","tooltip","ReviewCorrectionPopin","props","information","resultLabel","next","nextQuestionButtonProps","cta","ICONS","right","RightIcon","wrong","WrongIcon","Icon","wrapper","popin","correctionSection","iconCircle","iconRight","iconWrong","feedbackSection","labelContainer","label","message","actions","actionsWrong","nextQuestionContainer","nextQuestionButton","propTypes","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  }),\n  klf: PropTypes.shape({\n    label: PropTypes.string,\n    onClick: PropTypes.func\n  })\n};\n\nexport default ReviewCorrectionPopin;\n"],"file":"index.js"}

package/lib/molecule/review-correction-popin/style.css

@@ -48,7 +48,7 @@
 
 .feedbackSection {
   display: flex;
-  margin: 0 23px;
+  margin: 0 48px 0 23px;
   flex-direction: row;
   align-items: center;
   justify-content: left;
@@ -84,7 +84,7 @@
 
 .resultLabel {
   margin-left: 12px;
-  font-weight: 900;
+  font-weight: 600;
   font-size: 24px;
   line-height: 24px;
   hyphens: auto;
@@ -95,21 +95,23 @@
 .information {
   display: block;
   flex-direction: column;
+  width: 100%;
 }
 
-.information .label {
-  width: 140px;
-  height: 25px;
+.labelContainer {
+  width: fit-content;
+  height: fit-content;
   padding: 4px 8px;
   background: rgba(255, 255, 255, 0.3);
   border-radius: 56px;
+  display: table;
+}
+
+.label {
   font-style: normal;
   font-weight: 900;
   font-size: 14px;
   line-height: 17px;
-  display: flex;
-  align-items: center;
-  justify-content: center;
   hyphens: auto;
   -ms-word-break: break-word;
   word-break: break-word;
@@ -139,11 +141,12 @@
   opacity: 0;
   transition: opacity 0.8s;
   position: absolute;
-  width: 273px;
+  width: 142%;
   border-radius: 15px;
   background-color: white;
-  right: 17.5%;
-  top: -64px;
+  right: 0px;
+  bottom: 55px;
+  filter: drop-shadow(0px 4px 16px rgba(0, 0, 0, 0.32));
 }
 
 .toolTip::before {
@@ -158,7 +161,7 @@
   background-color: white;
   position: inherit;
   bottom: -7px;
-  left: 129px;
+  right: 10%;
 }
 
 .tooltipText {
@@ -177,6 +180,7 @@
   overflow: visible;
   width: calc(55% - 16px);
   margin-right: 16px;
+  position: relative;
 }
 
 .klfButtonContainer:hover ~ .toolTip {
@@ -236,11 +240,6 @@
   .actionsWrong {
     width: 47%;
   }
-
-  .toolTip {
-    width: 250px;
-    right: 25%;
-  }
 }
 
 @media mobile {
@@ -309,6 +308,10 @@
     bottom: 52px;
   }
 
+  .toolTip::before {
+    right: 50%
+  }
+
   .tooltipText {
     max-width: none;
   }

package/lib/variables/colors.css

@@ -51,7 +51,7 @@
 @value cm_green_50: #e8fcf8;
 @value cm_green_200: #16ac8c;
 @value cm_orange_200: #FF7043;
-@value cm_orange_700: #ff4105;
+@value cm_orange_700: #FF4105;
 @value cm_pink_50: #ffefeb;
 @value cm_purple_200: #7340FF;
 @value cm_yellow_scorm: #FFB800;
@@ -64,3 +64,4 @@
 @value cm_warning_50: rgba(255, 192, 67, 0.13);
 @value box_shadow_light_dark: rgba(0, 0, 0, 0.12);
 @value box_shadow_medium_dark: rgba(0, 0, 0, 0.2);
+@value box_shadow_orange_700: rgba(255, 84, 31, 0.15);

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@coorpacademy/components",
-  "version": "10.8.0",
+  "version": "10.11.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": "500454871a2b27245897f20bb30f521b3af6c363"
 }