@coorpacademy/components 10.19.1 → 10.19.4

package/lib/atom/clue/index.js

@@ -106,7 +106,8 @@ class Clue extends _react.default.Component {
       className: (0, _classnames.default)(_style.default.clueCard, !(0, _isEmpty2.default)(text) && _style.default.flip)
     }, /*#__PURE__*/_react.default.createElement("div", {
       className: _style.default.back,
-      style: inlineStyle
+      style: inlineStyle,
+      "data-name": "clue-back-side"
     }, isLoading ? /*#__PURE__*/_react.default.createElement(_loader.default, null) : null, /*#__PURE__*/_react.default.createElement("div", {
       className: (0, _classnames.default)(_style.default.backContent, isLoading && _style.default.loading)
     }, /*#__PURE__*/_react.default.createElement("div", {

package/lib/atom/clue/index.js.map

@@ -1 +1 @@
-{"version":3,"sources":["../../../src/atom/clue/index.js"],"names":["LoadedClue","text","style","clueText","__html","propTypes","PropTypes","string","Clue","React","Component","getDerivedStateFromProps","props","isLoading","constructor","context","state","handleClick","bind","e","stopPropagation","preventDefault","onClick","setState","render","starsDiff","skin","translate","primaryColor","inlineStyle","backgroundColor","starsToLoose","count","Math","abs","seeClueCta","wrapperClue","clueCard","flip","back","backContent","loading","stars","front","Provider","childContextTypes","Cta","number"],"mappings":"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","sourcesContent":["import React from 'react';\nimport {get, isEmpty, noop} from 'lodash/fp';\nimport PropTypes from 'prop-types';\nimport classnames from 'classnames';\nimport Provider from '../provider';\nimport Loader from '../loader';\nimport Cta from '../cta';\nimport style from './style.css';\n\nconst LoadedClue = ({text}) => {\n  return (\n    <div data-name=\"text\" className={style.clueText}>\n      <div\n        // eslint-disable-next-line react/no-danger\n        dangerouslySetInnerHTML={{__html: text}}\n      />\n    </div>\n  );\n};\n\nLoadedClue.propTypes = {\n  text: PropTypes.string\n};\n\nclass Clue extends React.Component {\n  static propTypes = {\n    text: LoadedClue.propTypes.text,\n    onClick: Cta.propTypes.onClick,\n    starsDiff: PropTypes.number\n  };\n\n  static contextTypes = {\n    skin: Provider.childContextTypes.skin,\n    translate: Provider.childContextTypes.translate\n  };\n\n  static getDerivedStateFromProps(props) {\n    const {text} = props;\n    const isLoading = isEmpty(text);\n\n    if (isLoading) return null;\n    return {isLoading};\n  }\n\n  constructor(props, context) {\n    super(props, context);\n    this.state = {\n      isLoading: false\n    };\n    this.handleClick = this.handleClick.bind(this);\n  }\n\n  handleClick(e) {\n    e.stopPropagation();\n    e.preventDefault();\n    const {text, onClick = noop} = this.props;\n    onClick(e);\n    const isLoading = isEmpty(text);\n    return this.setState({\n      isLoading\n    });\n  }\n\n  render() {\n    const {text, starsDiff} = this.props;\n    const {skin, translate} = this.context;\n    const {isLoading} = this.state;\n    const primaryColor = get('common.primary', skin);\n    const inlineStyle = {backgroundColor: primaryColor};\n    const starsToLoose = translate('clue_stars_to_loose', {count: Math.abs(starsDiff)});\n    const seeClueCta = translate('See clue');\n\n    return (\n      <div data-name=\"clue\" className={style.wrapperClue}>\n        <div className={classnames(style.clueCard, !isEmpty(text) && style.flip)}>\n          <div className={style.back} style={inlineStyle}>\n            {isLoading ? <Loader /> : null}\n            <div className={classnames(style.backContent, isLoading && style.loading)}>\n              <div className={style.stars}>{starsToLoose}</div>\n              <Cta submitValue={seeClueCta} secondary light onClick={this.handleClick} />\n            </div>\n          </div>\n          <div className={style.front} style={inlineStyle}>\n            <LoadedClue text={text} />\n          </div>\n        </div>\n      </div>\n    );\n  }\n}\n\nexport default Clue;\n"],"file":"index.js"}
+{"version":3,"sources":["../../../src/atom/clue/index.js"],"names":["LoadedClue","text","style","clueText","__html","propTypes","PropTypes","string","Clue","React","Component","getDerivedStateFromProps","props","isLoading","constructor","context","state","handleClick","bind","e","stopPropagation","preventDefault","onClick","setState","render","starsDiff","skin","translate","primaryColor","inlineStyle","backgroundColor","starsToLoose","count","Math","abs","seeClueCta","wrapperClue","clueCard","flip","back","backContent","loading","stars","front","Provider","childContextTypes","Cta","number"],"mappings":"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","sourcesContent":["import React from 'react';\nimport {get, isEmpty, noop} from 'lodash/fp';\nimport PropTypes from 'prop-types';\nimport classnames from 'classnames';\nimport Provider from '../provider';\nimport Loader from '../loader';\nimport Cta from '../cta';\nimport style from './style.css';\n\nconst LoadedClue = ({text}) => {\n  return (\n    <div data-name=\"text\" className={style.clueText}>\n      <div\n        // eslint-disable-next-line react/no-danger\n        dangerouslySetInnerHTML={{__html: text}}\n      />\n    </div>\n  );\n};\n\nLoadedClue.propTypes = {\n  text: PropTypes.string\n};\n\nclass Clue extends React.Component {\n  static propTypes = {\n    text: LoadedClue.propTypes.text,\n    onClick: Cta.propTypes.onClick,\n    starsDiff: PropTypes.number\n  };\n\n  static contextTypes = {\n    skin: Provider.childContextTypes.skin,\n    translate: Provider.childContextTypes.translate\n  };\n\n  static getDerivedStateFromProps(props) {\n    const {text} = props;\n    const isLoading = isEmpty(text);\n\n    if (isLoading) return null;\n    return {isLoading};\n  }\n\n  constructor(props, context) {\n    super(props, context);\n    this.state = {\n      isLoading: false\n    };\n    this.handleClick = this.handleClick.bind(this);\n  }\n\n  handleClick(e) {\n    e.stopPropagation();\n    e.preventDefault();\n    const {text, onClick = noop} = this.props;\n    onClick(e);\n    const isLoading = isEmpty(text);\n    return this.setState({\n      isLoading\n    });\n  }\n\n  render() {\n    const {text, starsDiff} = this.props;\n    const {skin, translate} = this.context;\n    const {isLoading} = this.state;\n    const primaryColor = get('common.primary', skin);\n    const inlineStyle = {backgroundColor: primaryColor};\n    const starsToLoose = translate('clue_stars_to_loose', {count: Math.abs(starsDiff)});\n    const seeClueCta = translate('See clue');\n\n    return (\n      <div data-name=\"clue\" className={style.wrapperClue}>\n        <div className={classnames(style.clueCard, !isEmpty(text) && style.flip)}>\n          <div className={style.back} style={inlineStyle} data-name=\"clue-back-side\">\n            {isLoading ? <Loader /> : null}\n            <div className={classnames(style.backContent, isLoading && style.loading)}>\n              <div className={style.stars}>{starsToLoose}</div>\n              <Cta submitValue={seeClueCta} secondary light onClick={this.handleClick} />\n            </div>\n          </div>\n          <div className={style.front} style={inlineStyle}>\n            <LoadedClue text={text} />\n          </div>\n        </div>\n      </div>\n    );\n  }\n}\n\nexport default Clue;\n"],"file":"index.js"}

package/lib/atom/clue/test/see-clue.js

@@ -1,23 +1,23 @@
 "use strict";
 
-var _replace2 = _interopRequireDefault(require("lodash/fp/replace"));
-
 var _browserEnv = _interopRequireDefault(require("browser-env"));
 
 var _ava = _interopRequireDefault(require("ava"));
 
 var _react = _interopRequireDefault(require("react"));
 
-var _enzyme = require("enzyme");
+var _react2 = require("@testing-library/react");
+
+var _forEach = _interopRequireDefault(require("lodash/fp/forEach"));
+
+var _replace = _interopRequireDefault(require("lodash/fp/replace"));
 
-var _enzymeAdapterReact = _interopRequireDefault(require("enzyme-adapter-react-16"));
+var _renderWithContext = require("../../../util/render-with-context");
 
 var _style = _interopRequireDefault(require("../style.css"));
 
 var _ = _interopRequireDefault(require(".."));
 
-var _provider = _interopRequireDefault(require("../../provider"));
-
 var _default = _interopRequireDefault(require("./fixtures/default"));
 
 function _interopRequireDefault(obj) { return obj && obj.__esModule ? obj : { default: obj }; }
@@ -25,58 +25,71 @@ function _interopRequireDefault(obj) { return obj && obj.__esModule ? obj : { de
 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); }
 
 (0, _browserEnv.default)();
-(0, _enzyme.configure)({
-  adapter: new _enzymeAdapterReact.default()
-});
+
+const checkStyles = (stylesToCheck, container, t) => {
+  (0, _forEach.default)(([styleToCheck, shouldBePresent]) => {
+    const styledClue = container.querySelector(styleToCheck);
+    shouldBePresent ? t.truthy(styledClue) : t.falsy(styledClue);
+  }, stylesToCheck);
+};
+
+const findElementAndCheckText = (container, selector, expectedText, t) => {
+  const element = container.querySelector(selector);
+  t.is(element.textContent, expectedText);
+};
+
 (0, _ava.default)('should See the clue', t => {
   const context = {
     skin: {},
-    translate: key => key
+    translate: key => {
+      t.pass();
+      return key;
+    }
   };
-  t.plan(16);
-  const clueCardStyle = `.${(0, _replace2.default)(' ', '.', _style.default.clueCard)}`;
-  const flipStyle = `.${(0, _replace2.default)(' ', '.', _style.default.flip)}`;
-  const loadingStyle = `.${(0, _replace2.default)(' ', '.', _style.default.loading)}`;
-  const backContentStyle = `.${(0, _replace2.default)(' ', '.', _style.default.backContent)}`;
-  const clueTextStyle = `.${(0, _replace2.default)(' ', '.', _style.default.clueText)}`;
+  t.plan(26);
+  const clueCardStyle = `.${(0, _replace.default)(' ', '.', _style.default.clueCard)}`;
+  const flipStyle = `.${(0, _replace.default)(' ', '.', _style.default.flip)}`;
+  const loadingStyle = `.${(0, _replace.default)(' ', '.', _style.default.loading)}`;
+  const backContentStyle = `.${(0, _replace.default)(' ', '.', _style.default.backContent)}`;
+  const clueTextStyle = `.${(0, _replace.default)(' ', '.', _style.default.clueText)}`;
 
   const onClick = e => {
     t.pass();
   };
 
-  const wrapper = (0, _enzyme.mount)( /*#__PURE__*/_react.default.createElement(_.default, _extends({}, _default.default.props, {
+  const {
+    container,
+    rerender
+  } = (0, _renderWithContext.renderWithContext)( /*#__PURE__*/_react.default.createElement(_.default, _extends({}, _default.default.props, {
     onClick: onClick
   })), {
     context
   });
-  t.is(wrapper.find(clueCardStyle).exists(), true);
-  t.is(wrapper.find(flipStyle).exists(), false);
-  t.is(wrapper.find(loadingStyle).exists(), false);
-  t.is(wrapper.find(backContentStyle).exists(), true);
-  wrapper.find('a').simulate('click', {
-    preventDefault: () => {},
-    stopPropagation: () => {}
-  });
-  t.is(wrapper.find(clueCardStyle).exists(), true);
-  t.is(wrapper.find(flipStyle).exists(), false);
-  t.is(wrapper.find(loadingStyle).exists(), true);
-  t.is(wrapper.find(backContentStyle).exists(), true);
-  wrapper.setProps({
-    text: 'This is the clue ...'
-  });
-  t.is(wrapper.find(clueTextStyle).text(), 'This is the clue ...');
-  t.is(wrapper.find(clueCardStyle).exists(), true);
-  t.is(wrapper.find(flipStyle).exists(), true);
-  t.is(wrapper.find(loadingStyle).exists(), false);
-  t.is(wrapper.find(backContentStyle).exists(), true);
-  wrapper.setProps({
-    text: ''
-  });
-  t.is(wrapper.find(clueTextStyle).text(), '');
-  wrapper.setProps({
-    text: 'This is the new clue ...'
-  });
-  t.is(wrapper.find(clueTextStyle).text(), 'This is the new clue ...');
+  const stylesToCheckPreClick = [[clueCardStyle, true], [flipStyle, false], [loadingStyle, false], [backContentStyle, true]];
+  checkStyles(stylesToCheckPreClick, container, t);
+  const link = container.querySelector('a');
+
+  _react2.fireEvent.click(link);
+
+  const stylesToCheckPostClick = [[clueCardStyle, true], [flipStyle, false], [loadingStyle, true], [backContentStyle, true]];
+  checkStyles(stylesToCheckPostClick, container, t);
+  rerender( /*#__PURE__*/_react.default.createElement(_.default, _extends({}, _default.default.props, {
+    text: "This is the clue ...",
+    onClick: onClick
+  })));
+  findElementAndCheckText(container, clueTextStyle, 'This is the clue ...', t);
+  const stylesToCheckPostTextChange = [[clueCardStyle, true], [flipStyle, true], [loadingStyle, false], [backContentStyle, true]];
+  checkStyles(stylesToCheckPostTextChange, container, t);
+  rerender( /*#__PURE__*/_react.default.createElement(_.default, _extends({}, _default.default.props, {
+    text: "",
+    onClick: onClick
+  })));
+  findElementAndCheckText(container, clueTextStyle, '', t);
+  rerender( /*#__PURE__*/_react.default.createElement(_.default, _extends({}, _default.default.props, {
+    text: "This is the new clue ...",
+    onClick: onClick
+  })));
+  findElementAndCheckText(container, clueTextStyle, 'This is the new clue ...', t);
 });
 (0, _ava.default)('should clue color is the primary color if color is defined on skin', t => {
   const context = {
@@ -85,14 +98,24 @@ function _extends() { _extends = Object.assign || function (target) { for (var i
         primary: '#FF0000'
       }
     },
-    translate: key => key
+    translate: key => {
+      t.pass();
+      return key;
+    }
   };
-  t.plan(1);
-  const backStyle = `.${(0, _replace2.default)(' ', '.', _style.default.back)}`;
-  const wrapper = (0, _enzyme.mount)( /*#__PURE__*/_react.default.createElement(_provider.default, context, /*#__PURE__*/_react.default.createElement(_.default, _default.default.props)));
-  t.deepEqual(wrapper.find(backStyle).get(0).props.style, {
-    backgroundColor: '#FF0000'
-  });
+  t.plan(6);
+  const {
+    container
+  } = (0, _renderWithContext.renderWithContext)( /*#__PURE__*/_react.default.createElement(_.default, _default.default.props), {
+    context
+  }); // inline  '#FF0000' becomes  rgb(255, 0, 0)
+
+  const cardReverse = container.querySelector('[data-name="clue-back-side"][style="background-color: rgb(255, 0, 0);"]');
+  t.truthy(cardReverse);
+  const seeClueCta = cardReverse.querySelector('a[data-name="cta"]');
+  t.truthy(seeClueCta);
+
+  _react2.fireEvent.click(seeClueCta);
 });
 (0, _ava.default)('should clue color is the fallback primary color if color not defined on skin', t => {
   const context = {
@@ -101,13 +124,19 @@ function _extends() { _extends = Object.assign || function (target) { for (var i
         secondary: '#FF0000'
       }
     },
-    translate: key => key
+    translate: key => {
+      t.pass();
+      return key;
+    }
   };
-  t.plan(1);
-  const backStyle = `.${(0, _replace2.default)(' ', '.', _style.default.back)}`;
-  const wrapper = (0, _enzyme.mount)( /*#__PURE__*/_react.default.createElement(_provider.default, context, /*#__PURE__*/_react.default.createElement(_.default, _default.default.props)));
-  t.deepEqual(wrapper.find(backStyle).get(0).props.style, {
-    backgroundColor: '#00B0FF'
-  });
+  t.plan(3);
+  const {
+    container
+  } = (0, _renderWithContext.renderWithContext)( /*#__PURE__*/_react.default.createElement(_.default, _default.default.props), {
+    context
+  }); // inline  '#00B0FF' becomes  rgb(0, 176, 255)
+
+  const cardReverse = container.querySelector('[data-name="clue-back-side"][style="background-color: rgb(0, 176, 255);"]');
+  t.truthy(cardReverse);
 });
 //# sourceMappingURL=see-clue.js.map

package/lib/atom/clue/test/see-clue.js.map

@@ -1 +1 @@
-{"version":3,"sources":["../../../../src/atom/clue/test/see-clue.js"],"names":["adapter","Adapter","t","context","skin","translate","key","plan","clueCardStyle","style","clueCard","flipStyle","flip","loadingStyle","loading","backContentStyle","backContent","clueTextStyle","clueText","onClick","e","pass","wrapper","defaultFixture","props","is","find","exists","simulate","preventDefault","stopPropagation","setProps","text","common","primary","backStyle","back","deepEqual","get","backgroundColor","secondary"],"mappings":"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","sourcesContent":["import browserEnv from 'browser-env';\nimport test from 'ava';\nimport React from 'react';\nimport {mount, configure} from 'enzyme';\nimport Adapter from 'enzyme-adapter-react-16';\nimport {replace} from 'lodash/fp';\nimport style from '../style.css'; // eslint-disable-line css-modules/no-unused-class\nimport Clue from '..';\nimport Provider from '../../provider';\nimport defaultFixture from './fixtures/default';\n\nbrowserEnv();\nconfigure({adapter: new Adapter()});\n\ntest('should See the clue', t => {\n  const context = {\n    skin: {},\n    translate: key => key\n  };\n  t.plan(16);\n\n  const clueCardStyle = `.${replace(' ', '.', style.clueCard)}`;\n  const flipStyle = `.${replace(' ', '.', style.flip)}`;\n\n  const loadingStyle = `.${replace(' ', '.', style.loading)}`;\n  const backContentStyle = `.${replace(' ', '.', style.backContent)}`;\n\n  const clueTextStyle = `.${replace(' ', '.', style.clueText)}`;\n\n  const onClick = e => {\n    t.pass();\n  };\n\n  const wrapper = mount(<Clue {...defaultFixture.props} onClick={onClick} />, {context});\n\n  t.is(wrapper.find(clueCardStyle).exists(), true);\n  t.is(wrapper.find(flipStyle).exists(), false);\n  t.is(wrapper.find(loadingStyle).exists(), false);\n  t.is(wrapper.find(backContentStyle).exists(), true);\n\n  wrapper.find('a').simulate('click', {\n    preventDefault: () => {},\n    stopPropagation: () => {}\n  });\n\n  t.is(wrapper.find(clueCardStyle).exists(), true);\n  t.is(wrapper.find(flipStyle).exists(), false);\n  t.is(wrapper.find(loadingStyle).exists(), true);\n  t.is(wrapper.find(backContentStyle).exists(), true);\n\n  wrapper.setProps({text: 'This is the clue ...'});\n\n  t.is(wrapper.find(clueTextStyle).text(), 'This is the clue ...');\n\n  t.is(wrapper.find(clueCardStyle).exists(), true);\n  t.is(wrapper.find(flipStyle).exists(), true);\n  t.is(wrapper.find(loadingStyle).exists(), false);\n  t.is(wrapper.find(backContentStyle).exists(), true);\n\n  wrapper.setProps({text: ''});\n\n  t.is(wrapper.find(clueTextStyle).text(), '');\n\n  wrapper.setProps({text: 'This is the new clue ...'});\n\n  t.is(wrapper.find(clueTextStyle).text(), 'This is the new clue ...');\n});\n\ntest('should clue color is the primary color if color is defined on skin', t => {\n  const context = {\n    skin: {\n      common: {\n        primary: '#FF0000'\n      }\n    },\n    translate: key => key\n  };\n  t.plan(1);\n  const backStyle = `.${replace(' ', '.', style.back)}`;\n\n  const wrapper = mount(\n    <Provider {...context}>\n      <Clue {...defaultFixture.props} />\n    </Provider>\n  );\n\n  t.deepEqual(wrapper.find(backStyle).get(0).props.style, {\n    backgroundColor: '#FF0000'\n  });\n});\n\ntest('should clue color is the fallback primary color if color not defined on skin', t => {\n  const context = {\n    skin: {\n      common: {\n        secondary: '#FF0000'\n      }\n    },\n    translate: key => key\n  };\n  t.plan(1);\n  const backStyle = `.${replace(' ', '.', style.back)}`;\n\n  const wrapper = mount(\n    <Provider {...context}>\n      <Clue {...defaultFixture.props} />\n    </Provider>\n  );\n\n  t.deepEqual(wrapper.find(backStyle).get(0).props.style, {\n    backgroundColor: '#00B0FF'\n  });\n});\n"],"file":"see-clue.js"}
+{"version":3,"sources":["../../../../src/atom/clue/test/see-clue.js"],"names":["checkStyles","stylesToCheck","container","t","styleToCheck","shouldBePresent","styledClue","querySelector","truthy","falsy","findElementAndCheckText","selector","expectedText","element","is","textContent","context","skin","translate","key","pass","plan","clueCardStyle","style","clueCard","flipStyle","flip","loadingStyle","loading","backContentStyle","backContent","clueTextStyle","clueText","onClick","e","rerender","defaultFixture","props","stylesToCheckPreClick","link","fireEvent","click","stylesToCheckPostClick","stylesToCheckPostTextChange","common","primary","cardReverse","seeClueCta","secondary"],"mappings":";;AAAA;;AACA;;AACA;;AACA;;AACA;;AACA;;AACA;;AACA;;AACA;;AACA;;;;;;AAEA;;AAEA,MAAMA,WAAW,GAAG,CAACC,aAAD,EAAgBC,SAAhB,EAA2BC,CAA3B,KAAiC;AACnD,wBAAQ,CAAC,CAACC,YAAD,EAAeC,eAAf,CAAD,KAAqC;AAC3C,UAAMC,UAAU,GAAGJ,SAAS,CAACK,aAAV,CAAwBH,YAAxB,CAAnB;AACAC,IAAAA,eAAe,GAAGF,CAAC,CAACK,MAAF,CAASF,UAAT,CAAH,GAA0BH,CAAC,CAACM,KAAF,CAAQH,UAAR,CAAzC;AACD,GAHD,EAGGL,aAHH;AAID,CALD;;AAOA,MAAMS,uBAAuB,GAAG,CAACR,SAAD,EAAYS,QAAZ,EAAsBC,YAAtB,EAAoCT,CAApC,KAA0C;AACxE,QAAMU,OAAO,GAAGX,SAAS,CAACK,aAAV,CAAwBI,QAAxB,CAAhB;AACAR,EAAAA,CAAC,CAACW,EAAF,CAAKD,OAAO,CAACE,WAAb,EAA0BH,YAA1B;AACD,CAHD;;AAKA,kBAAK,qBAAL,EAA4BT,CAAC,IAAI;AAC/B,QAAMa,OAAO,GAAG;AACdC,IAAAA,IAAI,EAAE,EADQ;AAEdC,IAAAA,SAAS,EAAEC,GAAG,IAAI;AAChBhB,MAAAA,CAAC,CAACiB,IAAF;AACA,aAAOD,GAAP;AACD;AALa,GAAhB;AAOAhB,EAAAA,CAAC,CAACkB,IAAF,CAAO,EAAP;AAEA,QAAMC,aAAa,GAAI,IAAG,sBAAQ,GAAR,EAAa,GAAb,EAAkBC,eAAMC,QAAxB,CAAkC,EAA5D;AACA,QAAMC,SAAS,GAAI,IAAG,sBAAQ,GAAR,EAAa,GAAb,EAAkBF,eAAMG,IAAxB,CAA8B,EAApD;AAEA,QAAMC,YAAY,GAAI,IAAG,sBAAQ,GAAR,EAAa,GAAb,EAAkBJ,eAAMK,OAAxB,CAAiC,EAA1D;AACA,QAAMC,gBAAgB,GAAI,IAAG,sBAAQ,GAAR,EAAa,GAAb,EAAkBN,eAAMO,WAAxB,CAAqC,EAAlE;AAEA,QAAMC,aAAa,GAAI,IAAG,sBAAQ,GAAR,EAAa,GAAb,EAAkBR,eAAMS,QAAxB,CAAkC,EAA5D;;AAEA,QAAMC,OAAO,GAAGC,CAAC,IAAI;AACnB/B,IAAAA,CAAC,CAACiB,IAAF;AACD,GAFD;;AAIA,QAAM;AAAClB,IAAAA,SAAD;AAAYiC,IAAAA;AAAZ,MAAwB,wDAC5B,6BAAC,SAAD,eAAUC,iBAAeC,KAAzB;AAAgC,IAAA,OAAO,EAAEJ;AAAzC,KAD4B,EAE5B;AACEjB,IAAAA;AADF,GAF4B,CAA9B;AAOA,QAAMsB,qBAAqB,GAAG,CAC5B,CAAChB,aAAD,EAAgB,IAAhB,CAD4B,EAE5B,CAACG,SAAD,EAAY,KAAZ,CAF4B,EAG5B,CAACE,YAAD,EAAe,KAAf,CAH4B,EAI5B,CAACE,gBAAD,EAAmB,IAAnB,CAJ4B,CAA9B;AAOA7B,EAAAA,WAAW,CAACsC,qBAAD,EAAwBpC,SAAxB,EAAmCC,CAAnC,CAAX;AAEA,QAAMoC,IAAI,GAAGrC,SAAS,CAACK,aAAV,CAAwB,GAAxB,CAAb;;AAEAiC,oBAAUC,KAAV,CAAgBF,IAAhB;;AAEA,QAAMG,sBAAsB,GAAG,CAC7B,CAACpB,aAAD,EAAgB,IAAhB,CAD6B,EAE7B,CAACG,SAAD,EAAY,KAAZ,CAF6B,EAG7B,CAACE,YAAD,EAAe,IAAf,CAH6B,EAI7B,CAACE,gBAAD,EAAmB,IAAnB,CAJ6B,CAA/B;AAOA7B,EAAAA,WAAW,CAAC0C,sBAAD,EAAyBxC,SAAzB,EAAoCC,CAApC,CAAX;AAEAgC,EAAAA,QAAQ,eAAC,6BAAC,SAAD,eAAUC,iBAAeC,KAAzB;AAAgC,IAAA,IAAI,EAAC,sBAArC;AAA4D,IAAA,OAAO,EAAEJ;AAArE,KAAD,CAAR;AACAvB,EAAAA,uBAAuB,CAACR,SAAD,EAAY6B,aAAZ,EAA2B,sBAA3B,EAAmD5B,CAAnD,CAAvB;AAEA,QAAMwC,2BAA2B,GAAG,CAClC,CAACrB,aAAD,EAAgB,IAAhB,CADkC,EAElC,CAACG,SAAD,EAAY,IAAZ,CAFkC,EAGlC,CAACE,YAAD,EAAe,KAAf,CAHkC,EAIlC,CAACE,gBAAD,EAAmB,IAAnB,CAJkC,CAApC;AAOA7B,EAAAA,WAAW,CAAC2C,2BAAD,EAA8BzC,SAA9B,EAAyCC,CAAzC,CAAX;AAEAgC,EAAAA,QAAQ,eAAC,6BAAC,SAAD,eAAUC,iBAAeC,KAAzB;AAAgC,IAAA,IAAI,EAAC,EAArC;AAAwC,IAAA,OAAO,EAAEJ;AAAjD,KAAD,CAAR;AACAvB,EAAAA,uBAAuB,CAACR,SAAD,EAAY6B,aAAZ,EAA2B,EAA3B,EAA+B5B,CAA/B,CAAvB;AAEAgC,EAAAA,QAAQ,eAAC,6BAAC,SAAD,eAAUC,iBAAeC,KAAzB;AAAgC,IAAA,IAAI,EAAC,0BAArC;AAAgE,IAAA,OAAO,EAAEJ;AAAzE,KAAD,CAAR;AACAvB,EAAAA,uBAAuB,CAACR,SAAD,EAAY6B,aAAZ,EAA2B,0BAA3B,EAAuD5B,CAAvD,CAAvB;AACD,CApED;AAsEA,kBAAK,oEAAL,EAA2EA,CAAC,IAAI;AAC9E,QAAMa,OAAO,GAAG;AACdC,IAAAA,IAAI,EAAE;AACJ2B,MAAAA,MAAM,EAAE;AACNC,QAAAA,OAAO,EAAE;AADH;AADJ,KADQ;AAMd3B,IAAAA,SAAS,EAAEC,GAAG,IAAI;AAChBhB,MAAAA,CAAC,CAACiB,IAAF;AACA,aAAOD,GAAP;AACD;AATa,GAAhB;AAWAhB,EAAAA,CAAC,CAACkB,IAAF,CAAO,CAAP;AAEA,QAAM;AAACnB,IAAAA;AAAD,MAAc,wDAAkB,6BAAC,SAAD,EAAUkC,iBAAeC,KAAzB,CAAlB,EAAsD;AACxErB,IAAAA;AADwE,GAAtD,CAApB,CAd8E,CAkB9E;;AACA,QAAM8B,WAAW,GAAG5C,SAAS,CAACK,aAAV,CAClB,yEADkB,CAApB;AAIAJ,EAAAA,CAAC,CAACK,MAAF,CAASsC,WAAT;AAEA,QAAMC,UAAU,GAAGD,WAAW,CAACvC,aAAZ,CAA0B,oBAA1B,CAAnB;AAEAJ,EAAAA,CAAC,CAACK,MAAF,CAASuC,UAAT;;AAEAP,oBAAUC,KAAV,CAAgBM,UAAhB;AACD,CA9BD;AAgCA,kBAAK,8EAAL,EAAqF5C,CAAC,IAAI;AACxF,QAAMa,OAAO,GAAG;AACdC,IAAAA,IAAI,EAAE;AACJ2B,MAAAA,MAAM,EAAE;AACNI,QAAAA,SAAS,EAAE;AADL;AADJ,KADQ;AAMd9B,IAAAA,SAAS,EAAEC,GAAG,IAAI;AAChBhB,MAAAA,CAAC,CAACiB,IAAF;AACA,aAAOD,GAAP;AACD;AATa,GAAhB;AAWAhB,EAAAA,CAAC,CAACkB,IAAF,CAAO,CAAP;AAEA,QAAM;AAACnB,IAAAA;AAAD,MAAc,wDAAkB,6BAAC,SAAD,EAAUkC,iBAAeC,KAAzB,CAAlB,EAAsD;AACxErB,IAAAA;AADwE,GAAtD,CAApB,CAdwF,CAkBxF;;AACA,QAAM8B,WAAW,GAAG5C,SAAS,CAACK,aAAV,CAClB,2EADkB,CAApB;AAIAJ,EAAAA,CAAC,CAACK,MAAF,CAASsC,WAAT;AACD,CAxBD","sourcesContent":["import browserEnv from 'browser-env';\nimport test from 'ava';\nimport React from 'react';\nimport {fireEvent} from '@testing-library/react';\nimport forEach from 'lodash/fp/forEach';\nimport replace from 'lodash/fp/replace';\nimport {renderWithContext} from '../../../util/render-with-context';\nimport style from '../style.css'; // eslint-disable-line css-modules/no-unused-class\nimport Clue from '..';\nimport defaultFixture from './fixtures/default';\n\nbrowserEnv();\n\nconst checkStyles = (stylesToCheck, container, t) => {\n  forEach(([styleToCheck, shouldBePresent]) => {\n    const styledClue = container.querySelector(styleToCheck);\n    shouldBePresent ? t.truthy(styledClue) : t.falsy(styledClue);\n  }, stylesToCheck);\n};\n\nconst findElementAndCheckText = (container, selector, expectedText, t) => {\n  const element = container.querySelector(selector);\n  t.is(element.textContent, expectedText);\n};\n\ntest('should See the clue', t => {\n  const context = {\n    skin: {},\n    translate: key => {\n      t.pass();\n      return key;\n    }\n  };\n  t.plan(26);\n\n  const clueCardStyle = `.${replace(' ', '.', style.clueCard)}`;\n  const flipStyle = `.${replace(' ', '.', style.flip)}`;\n\n  const loadingStyle = `.${replace(' ', '.', style.loading)}`;\n  const backContentStyle = `.${replace(' ', '.', style.backContent)}`;\n\n  const clueTextStyle = `.${replace(' ', '.', style.clueText)}`;\n\n  const onClick = e => {\n    t.pass();\n  };\n\n  const {container, rerender} = renderWithContext(\n    <Clue {...defaultFixture.props} onClick={onClick} />,\n    {\n      context\n    }\n  );\n\n  const stylesToCheckPreClick = [\n    [clueCardStyle, true],\n    [flipStyle, false],\n    [loadingStyle, false],\n    [backContentStyle, true]\n  ];\n\n  checkStyles(stylesToCheckPreClick, container, t);\n\n  const link = container.querySelector('a');\n\n  fireEvent.click(link);\n\n  const stylesToCheckPostClick = [\n    [clueCardStyle, true],\n    [flipStyle, false],\n    [loadingStyle, true],\n    [backContentStyle, true]\n  ];\n\n  checkStyles(stylesToCheckPostClick, container, t);\n\n  rerender(<Clue {...defaultFixture.props} text=\"This is the clue ...\" onClick={onClick} />);\n  findElementAndCheckText(container, clueTextStyle, 'This is the clue ...', t);\n\n  const stylesToCheckPostTextChange = [\n    [clueCardStyle, true],\n    [flipStyle, true],\n    [loadingStyle, false],\n    [backContentStyle, true]\n  ];\n\n  checkStyles(stylesToCheckPostTextChange, container, t);\n\n  rerender(<Clue {...defaultFixture.props} text=\"\" onClick={onClick} />);\n  findElementAndCheckText(container, clueTextStyle, '', t);\n\n  rerender(<Clue {...defaultFixture.props} text=\"This is the new clue ...\" onClick={onClick} />);\n  findElementAndCheckText(container, clueTextStyle, 'This is the new clue ...', t);\n});\n\ntest('should clue color is the primary color if color is defined on skin', t => {\n  const context = {\n    skin: {\n      common: {\n        primary: '#FF0000'\n      }\n    },\n    translate: key => {\n      t.pass();\n      return key;\n    }\n  };\n  t.plan(6);\n\n  const {container} = renderWithContext(<Clue {...defaultFixture.props} />, {\n    context\n  });\n\n  // inline  '#FF0000' becomes  rgb(255, 0, 0)\n  const cardReverse = container.querySelector(\n    '[data-name=\"clue-back-side\"][style=\"background-color: rgb(255, 0, 0);\"]'\n  );\n\n  t.truthy(cardReverse);\n\n  const seeClueCta = cardReverse.querySelector('a[data-name=\"cta\"]');\n\n  t.truthy(seeClueCta);\n\n  fireEvent.click(seeClueCta);\n});\n\ntest('should clue color is the fallback primary color if color not defined on skin', t => {\n  const context = {\n    skin: {\n      common: {\n        secondary: '#FF0000'\n      }\n    },\n    translate: key => {\n      t.pass();\n      return key;\n    }\n  };\n  t.plan(3);\n\n  const {container} = renderWithContext(<Clue {...defaultFixture.props} />, {\n    context\n  });\n\n  // inline  '#00B0FF' becomes  rgb(0, 176, 255)\n  const cardReverse = container.querySelector(\n    '[data-name=\"clue-back-side\"][style=\"background-color: rgb(0, 176, 255);\"]'\n  );\n\n  t.truthy(cardReverse);\n});\n"],"file":"see-clue.js"}

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

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

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

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

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

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

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

@@ -1,7 +1,7 @@
 "use strict";
 
 exports.__esModule = true;
-exports.default = void 0;
+exports.default = exports.ICON_VALUES = void 0;
 
 var _react = _interopRequireDefault(require("react"));
 
@@ -15,6 +15,12 @@ var _style = _interopRequireDefault(require("./style.css"));
 
 function _interopRequireDefault(obj) { return obj && obj.__esModule ? obj : { default: obj }; }
 
+const ICON_VALUES = {
+  right: 'right',
+  wrong: 'wrong'
+};
+exports.ICON_VALUES = ICON_VALUES;
+
 const Content = ({
   icon,
   current,
@@ -27,7 +33,7 @@ const Content = ({
     }, value);
   }
 
-  if (icon === 'right') {
+  if (icon === ICON_VALUES.right) {
     return /*#__PURE__*/_react.default.createElement("span", {
       className: _style.default.value,
       "aria-label": `step ${value}`
@@ -36,7 +42,7 @@ const Content = ({
     }));
   }
 
-  if (icon === 'wrong') {
+  if (icon === ICON_VALUES.wrong) {
     return /*#__PURE__*/_react.default.createElement("span", {
       className: _style.default.value,
       "aria-label": `step ${value}`
@@ -52,7 +58,7 @@ const ReviewHeaderStepItem = props => {
     current
   } = props;
   return /*#__PURE__*/_react.default.createElement("div", {
-    className: (0, _classnames.default)(_style.default.default, icon === 'right' && _style.default.right, icon === 'wrong' && _style.default.wrong, current && _style.default.current),
+    className: (0, _classnames.default)(_style.default.default, icon === ICON_VALUES.right && _style.default.right, icon === ICON_VALUES.wrong && _style.default.wrong, current && _style.default.current),
     "data-name": "header-step-item"
   }, /*#__PURE__*/_react.default.createElement(Content, props));
 };

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

@@ -1 +1 @@
-{"version":3,"sources":["../../../src/atom/review-header-step-item/index.js"],"names":["Content","icon","current","value","style","rightIcon","currentRightIcon","wrongIcon","currentWrongIcon","ReviewHeaderStepItem","props","default","right","wrong","propTypes","PropTypes","string","bool"],"mappings":";;;;;AAAA;;AACA;;AACA;;AACA;;AAIA;;;;AAEA,MAAMA,OAAO,GAAG,CAAC;AAACC,EAAAA,IAAD;AAAOC,EAAAA,OAAP;AAAgBC,EAAAA;AAAhB,CAAD,KAA4B;AAC1C,MAAI,CAACF,IAAL,EAAW;AACT,wBACE;AAAM,MAAA,SAAS,EAAEG,eAAMD,KAAvB;AAA8B,oBAAa,QAAOA,KAAM;AAAxD,OACGA,KADH,CADF;AAKD;;AAED,MAAIF,IAAI,KAAK,OAAb,EAAsB;AACpB,wBACE;AAAM,MAAA,SAAS,EAAEG,eAAMD,KAAvB;AAA8B,oBAAa,QAAOA,KAAM;AAAxD,oBACE,6BAAC,2CAAD;AAAW,MAAA,SAAS,EAAE,yBAAWC,eAAMC,SAAjB,EAA4BH,OAAO,IAAIE,eAAME,gBAA7C;AAAtB,MADF,CADF;AAKD;;AAED,MAAIL,IAAI,KAAK,OAAb,EAAsB;AACpB,wBACE;AAAM,MAAA,SAAS,EAAEG,eAAMD,KAAvB;AAA8B,oBAAa,QAAOA,KAAM;AAAxD,oBACE,6BAAC,+BAAD;AAAW,MAAA,SAAS,EAAE,yBAAWC,eAAMG,SAAjB,EAA4BL,OAAO,IAAIE,eAAMI,gBAA7C;AAAtB,MADF,CADF;AAKD;AACF,CAxBD;;AA0BA,MAAMC,oBAAoB,GAAGC,KAAK,IAAI;AACpC,QAAM;AAACT,IAAAA,IAAD;AAAOC,IAAAA;AAAP,MAAkBQ,KAAxB;AACA,sBACE;AACE,IAAA,SAAS,EAAE,yBACTN,eAAMO,OADG,EAETV,IAAI,KAAK,OAAT,IAAoBG,eAAMQ,KAFjB,EAGTX,IAAI,KAAK,OAAT,IAAoBG,eAAMS,KAHjB,EAITX,OAAO,IAAIE,eAAMF,OAJR,CADb;AAOE,iBAAU;AAPZ,kBASE,6BAAC,OAAD,EAAaQ,KAAb,CATF,CADF;AAaD,CAfD;;AAiBAD,oBAAoB,CAACK,SAArB,2CAAiC;AAC/Bb,EAAAA,IAAI,EAAEc,mBAAUC,MADe;AAE/Bd,EAAAA,OAAO,EAAEa,mBAAUE,IAFY;AAG/Bd,EAAAA,KAAK,EAAEY,mBAAUC;AAHc,CAAjC;eAMeP,oB","sourcesContent":["import React from 'react';\nimport classnames from 'classnames';\nimport PropTypes from 'prop-types';\nimport {\n  NovaCompositionCoorpacademyCheck as RightIcon,\n  NovaSolidStatusClose as WrongIcon\n} from '@coorpacademy/nova-icons';\nimport style from './style.css';\n\nconst Content = ({icon, current, value}) => {\n  if (!icon) {\n    return (\n      <span className={style.value} aria-label={`step ${value}`}>\n        {value}\n      </span>\n    );\n  }\n\n  if (icon === 'right') {\n    return (\n      <span className={style.value} aria-label={`step ${value}`}>\n        <RightIcon className={classnames(style.rightIcon, current && style.currentRightIcon)} />\n      </span>\n    );\n  }\n\n  if (icon === 'wrong') {\n    return (\n      <span className={style.value} aria-label={`step ${value}`}>\n        <WrongIcon className={classnames(style.wrongIcon, current && style.currentWrongIcon)} />\n      </span>\n    );\n  }\n};\n\nconst ReviewHeaderStepItem = props => {\n  const {icon, current} = props;\n  return (\n    <div\n      className={classnames(\n        style.default,\n        icon === 'right' && style.right,\n        icon === 'wrong' && style.wrong,\n        current && style.current\n      )}\n      data-name=\"header-step-item\"\n    >\n      <Content {...props} />\n    </div>\n  );\n};\n\nReviewHeaderStepItem.propTypes = {\n  icon: PropTypes.string,\n  current: PropTypes.bool,\n  value: PropTypes.string\n};\n\nexport default ReviewHeaderStepItem;\n"],"file":"index.js"}
+{"version":3,"sources":["../../../src/atom/review-header-step-item/index.js"],"names":["ICON_VALUES","right","wrong","Content","icon","current","value","style","rightIcon","currentRightIcon","wrongIcon","currentWrongIcon","ReviewHeaderStepItem","props","default","propTypes","PropTypes","string","bool"],"mappings":";;;;;AAAA;;AACA;;AACA;;AACA;;AAIA;;;;AAEO,MAAMA,WAAW,GAAG;AACzBC,EAAAA,KAAK,EAAE,OADkB;AAEzBC,EAAAA,KAAK,EAAE;AAFkB,CAApB;;;AAKP,MAAMC,OAAO,GAAG,CAAC;AAACC,EAAAA,IAAD;AAAOC,EAAAA,OAAP;AAAgBC,EAAAA;AAAhB,CAAD,KAA4B;AAC1C,MAAI,CAACF,IAAL,EAAW;AACT,wBACE;AAAM,MAAA,SAAS,EAAEG,eAAMD,KAAvB;AAA8B,oBAAa,QAAOA,KAAM;AAAxD,OACGA,KADH,CADF;AAKD;;AAED,MAAIF,IAAI,KAAKJ,WAAW,CAACC,KAAzB,EAAgC;AAC9B,wBACE;AAAM,MAAA,SAAS,EAAEM,eAAMD,KAAvB;AAA8B,oBAAa,QAAOA,KAAM;AAAxD,oBACE,6BAAC,2CAAD;AAAW,MAAA,SAAS,EAAE,yBAAWC,eAAMC,SAAjB,EAA4BH,OAAO,IAAIE,eAAME,gBAA7C;AAAtB,MADF,CADF;AAKD;;AAED,MAAIL,IAAI,KAAKJ,WAAW,CAACE,KAAzB,EAAgC;AAC9B,wBACE;AAAM,MAAA,SAAS,EAAEK,eAAMD,KAAvB;AAA8B,oBAAa,QAAOA,KAAM;AAAxD,oBACE,6BAAC,+BAAD;AAAW,MAAA,SAAS,EAAE,yBAAWC,eAAMG,SAAjB,EAA4BL,OAAO,IAAIE,eAAMI,gBAA7C;AAAtB,MADF,CADF;AAKD;AACF,CAxBD;;AA0BA,MAAMC,oBAAoB,GAAGC,KAAK,IAAI;AACpC,QAAM;AAACT,IAAAA,IAAD;AAAOC,IAAAA;AAAP,MAAkBQ,KAAxB;AACA,sBACE;AACE,IAAA,SAAS,EAAE,yBACTN,eAAMO,OADG,EAETV,IAAI,KAAKJ,WAAW,CAACC,KAArB,IAA8BM,eAAMN,KAF3B,EAGTG,IAAI,KAAKJ,WAAW,CAACE,KAArB,IAA8BK,eAAML,KAH3B,EAITG,OAAO,IAAIE,eAAMF,OAJR,CADb;AAOE,iBAAU;AAPZ,kBASE,6BAAC,OAAD,EAAaQ,KAAb,CATF,CADF;AAaD,CAfD;;AAiBAD,oBAAoB,CAACG,SAArB,2CAAiC;AAC/BX,EAAAA,IAAI,EAAEY,mBAAUC,MADe;AAE/BZ,EAAAA,OAAO,EAAEW,mBAAUE,IAFY;AAG/BZ,EAAAA,KAAK,EAAEU,mBAAUC;AAHc,CAAjC;eAMeL,oB","sourcesContent":["import React from 'react';\nimport classnames from 'classnames';\nimport PropTypes from 'prop-types';\nimport {\n  NovaCompositionCoorpacademyCheck as RightIcon,\n  NovaSolidStatusClose as WrongIcon\n} from '@coorpacademy/nova-icons';\nimport style from './style.css';\n\nexport const ICON_VALUES = {\n  right: 'right',\n  wrong: 'wrong'\n};\n\nconst Content = ({icon, current, value}) => {\n  if (!icon) {\n    return (\n      <span className={style.value} aria-label={`step ${value}`}>\n        {value}\n      </span>\n    );\n  }\n\n  if (icon === ICON_VALUES.right) {\n    return (\n      <span className={style.value} aria-label={`step ${value}`}>\n        <RightIcon className={classnames(style.rightIcon, current && style.currentRightIcon)} />\n      </span>\n    );\n  }\n\n  if (icon === ICON_VALUES.wrong) {\n    return (\n      <span className={style.value} aria-label={`step ${value}`}>\n        <WrongIcon className={classnames(style.wrongIcon, current && style.currentWrongIcon)} />\n      </span>\n    );\n  }\n};\n\nconst ReviewHeaderStepItem = props => {\n  const {icon, current} = props;\n  return (\n    <div\n      className={classnames(\n        style.default,\n        icon === ICON_VALUES.right && style.right,\n        icon === ICON_VALUES.wrong && style.wrong,\n        current && style.current\n      )}\n      data-name=\"header-step-item\"\n    >\n      <Content {...props} />\n    </div>\n  );\n};\n\nReviewHeaderStepItem.propTypes = {\n  icon: PropTypes.string,\n  current: PropTypes.bool,\n  value: PropTypes.string\n};\n\nexport default ReviewHeaderStepItem;\n"],"file":"index.js"}

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

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

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

@@ -7,7 +7,7 @@ var _react = _interopRequireDefault(require("react"));
 
 var _propTypes = _interopRequireDefault(require("prop-types"));
 
-var _get = _interopRequireDefault(require("lodash/fp/get"));
+var _getOr = _interopRequireDefault(require("lodash/fp/getOr"));
 
 var _map = _interopRequireDefault(require("lodash/fp/map"));
 
@@ -25,7 +25,15 @@ const ICONS = {
 };
 
 const getIcon = icon => {
-  const Icon = (0, _get.default)(icon, ICONS);
+  const Icon = (0, _getOr.default)(null, icon, ICONS);
+  /* istanbul ignore next */
+
+  if (!Icon) {
+    return /*#__PURE__*/_react.default.createElement("div", {
+      className: _style.default.labelIcon
+    });
+  }
+
   return /*#__PURE__*/_react.default.createElement(Icon, {
     className: _style.default.labelIcon
   });

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

@@ -1 +1 @@
-{"version":3,"sources":["../../../src/atom/review-presentation/index.js"],"names":["ICONS","skills","TargetIcon","questions","QuestionIcon","lifes","HeartIcon","allright","CheckIcon","getIcon","icon","Icon","style","labelIcon","ToolTip","tooltipText","tooltipContainer","tooltipIconContainer","informationIcon","toolTip","ReviewPresentation","props","ariaLabel","reviewTitle","reviewText","labelsList","reviewWrapper","__html","reviewListWrapper","map","convert","cap","label","key","reviewList","reviewListItemWrapper","reviewListText","text","levelItem","PropTypes","shape","string","propTypes"],"mappings":";;;;;AAAA;;AACA;;AACA;;AACA;;AACA;;AAOA;;;;AAEA,MAAMA,KAAK,GAAG;AACZC,EAAAA,MAAM,EAAEC,oDADI;AAEZC,EAAAA,SAAS,EAAEC,0DAFC;AAGZC,EAAAA,KAAK,EAAEC,wCAHK;AAIZC,EAAAA,QAAQ,EAAEC;AAJE,CAAd;;AAOA,MAAMC,OAAO,GAAGC,IAAI,IAAI;AACtB,QAAMC,IAAI,GAAG,kBAAID,IAAJ,EAAUV,KAAV,CAAb;AACA,sBAAO,6BAAC,IAAD;AAAM,IAAA,SAAS,EAAEY,eAAMC;AAAvB,IAAP;AACD,CAHD;;AAKA,MAAMC,OAAO,GAAG,CAAC;AAACC,EAAAA;AAAD,CAAD,KAAmB;AACjC,sBACE;AAAK,IAAA,SAAS,EAAEH,eAAMI;AAAtB,kBACE;AAAK,IAAA,SAAS,EAAEJ,eAAMK;AAAtB,kBACE,6BAAC,qDAAD;AAAiB,IAAA,SAAS,EAAEL,eAAMM,eAAlC;AAAmD,IAAA,KAAK,EAAE,EAA1D;AAA8D,IAAA,MAAM,EAAE;AAAtE,IADF,CADF,eAIE;AAAK,IAAA,SAAS,EAAEN,eAAMO;AAAtB,kBACE;AAAK,IAAA,SAAS,EAAEP,eAAMG;AAAtB,KAAoCA,WAApC,CADF,CAJF,CADF;AAUD,CAXD;;AAaA,MAAMK,kBAAkB,GAAGC,KAAK,IAAI;AAClC,QAAM;AAAC,kBAAcC,SAAf;AAA0BC,IAAAA,WAA1B;AAAuCC,IAAAA,UAAvC;AAAmDC,IAAAA;AAAnD,MAAiEJ,KAAvE;AAEA,sBACE;AAAK,IAAA,SAAS,EAAET,eAAMc,aAAtB;AAAqC,kBAAYJ;AAAjD,kBACE;AACE,IAAA,SAAS,EAAEV,eAAMW,WADnB,CAEE;AAFF;AAGE,IAAA,uBAAuB,EAAE;AAACI,MAAAA,MAAM,EAAEJ;AAAT;AAH3B,IADF,eAME;AACE,IAAA,SAAS,EAAEX,eAAMY,UADnB,CAEE;AAFF;AAGE,IAAA,uBAAuB,EAAE;AAACG,MAAAA,MAAM,EAAEH;AAAT;AAH3B,IANF,eAWE;AAAI,IAAA,SAAS,EAAEZ,eAAMgB;AAArB,KACGC,aAAIC,OAAJ,CAAY;AAACC,IAAAA,GAAG,EAAE;AAAN,GAAZ,EAA0B,CAACC,KAAD,EAAQC,GAAR,KAAgB;AACzC,wBACE;AAAI,MAAA,GAAG,EAAG,QAAOA,GAAI,EAArB;AAAwB,MAAA,SAAS,EAAErB,eAAMsB;AAAzC,oBACE;AAAK,MAAA,SAAS,EAAEtB,eAAMuB,qBAAtB;AAA6C,sBAA7C;AAAsD,kBAAS;AAA/D,oBACE;AAAK,MAAA,SAAS,EAAEvB,eAAMwB;AAAtB,OACG3B,OAAO,CAACwB,GAAD,CADV,OACkBD,KAAK,CAACK,IADxB,CADF,eAIE,6BAAC,OAAD;AAAS,MAAA,WAAW,EAAEL,KAAK,CAACjB;AAA5B,MAJF,CADF,CADF;AAUD,GAXA,EAWEU,UAXF,CADH,CAXF,CADF;AA4BD,CA/BD;;AAiCA,MAAMa,SAAN,2CAAkBC,mBAAUC,KAAV,CAAgB;AAChCH,EAAAA,IAAI,EAAEE,mBAAUE,MADgB;AAEhC1B,EAAAA,WAAW,EAAEwB,mBAAUE;AAFS,CAAhB,CAAlB;AAKA3B,OAAO,CAAC4B,SAAR,2CAAoB;AAClB3B,EAAAA,WAAW,EAAEwB,mBAAUE;AADL,CAApB;AAIArB,kBAAkB,CAACsB,SAAnB,2CAA+B;AAC7B,gBAAcH,mBAAUE,MADK;AAE7BlB,EAAAA,WAAW,EAAEgB,mBAAUE,MAFM;AAG7BjB,EAAAA,UAAU,EAAEe,mBAAUE,MAHO;AAI7BhB,EAAAA,UAAU,EAAEc,mBAAUC,KAAV,CAAgB;AAC1BvC,IAAAA,MAAM,EAAEqC,SADkB;AAE1BnC,IAAAA,SAAS,EAAEmC,SAFe;AAG1BjC,IAAAA,KAAK,EAAEiC,SAHmB;AAI1B/B,IAAAA,QAAQ,EAAE+B;AAJgB,GAAhB;AAJiB,CAA/B;eAYelB,kB","sourcesContent":["import React from 'react';\nimport PropTypes from 'prop-types';\nimport get from 'lodash/fp/get';\nimport map from 'lodash/fp/map';\nimport {\n  NovaSolidStatusCheckCircle2 as CheckIcon,\n  NovaSolidVoteRewardsVoteHeart as HeartIcon,\n  NovaCompositionCoorpacademyInformationIcon as InformationIcon,\n  NovaSolidInterfaceFeedbackInterfaceQuestionMark as QuestionIcon,\n  NovaLineSelectionCursorsCursorArrowTarget as TargetIcon\n} from '@coorpacademy/nova-icons';\nimport style from './style.css';\n\nconst ICONS = {\n  skills: TargetIcon,\n  questions: QuestionIcon,\n  lifes: HeartIcon,\n  allright: CheckIcon\n};\n\nconst getIcon = icon => {\n  const Icon = get(icon, ICONS);\n  return <Icon className={style.labelIcon} />;\n};\n\nconst ToolTip = ({tooltipText}) => {\n  return (\n    <div className={style.tooltipContainer}>\n      <div className={style.tooltipIconContainer}>\n        <InformationIcon className={style.informationIcon} width={12} height={12} />\n      </div>\n      <div className={style.toolTip}>\n        <div className={style.tooltipText}>{tooltipText}</div>\n      </div>\n    </div>\n  );\n};\n\nconst ReviewPresentation = props => {\n  const {'aria-label': ariaLabel, reviewTitle, reviewText, labelsList} = props;\n\n  return (\n    <div className={style.reviewWrapper} aria-label={ariaLabel}>\n      <div\n        className={style.reviewTitle}\n        // eslint-disable-next-line react/no-danger\n        dangerouslySetInnerHTML={{__html: reviewTitle}}\n      />\n      <div\n        className={style.reviewText}\n        // eslint-disable-next-line react/no-danger\n        dangerouslySetInnerHTML={{__html: reviewText}}\n      />\n      <ul className={style.reviewListWrapper}>\n        {map.convert({cap: false})((label, key) => {\n          return (\n            <li key={`step-${key}`} className={style.reviewList}>\n              <div className={style.reviewListItemWrapper} data-tip data-for=\"reviewListItem\">\n                <div className={style.reviewListText}>\n                  {getIcon(key)} {label.text}\n                </div>\n                <ToolTip tooltipText={label.tooltipText} />\n              </div>\n            </li>\n          );\n        }, labelsList)}\n      </ul>\n    </div>\n  );\n};\n\nconst levelItem = PropTypes.shape({\n  text: PropTypes.string,\n  tooltipText: PropTypes.string\n});\n\nToolTip.propTypes = {\n  tooltipText: PropTypes.string\n};\n\nReviewPresentation.propTypes = {\n  'aria-label': PropTypes.string,\n  reviewTitle: PropTypes.string,\n  reviewText: PropTypes.string,\n  labelsList: PropTypes.shape({\n    skills: levelItem,\n    questions: levelItem,\n    lifes: levelItem,\n    allright: levelItem\n  })\n};\n\nexport default ReviewPresentation;\n"],"file":"index.js"}
+{"version":3,"sources":["../../../src/atom/review-presentation/index.js"],"names":["ICONS","skills","TargetIcon","questions","QuestionIcon","lifes","HeartIcon","allright","CheckIcon","getIcon","icon","Icon","style","labelIcon","ToolTip","tooltipText","tooltipContainer","tooltipIconContainer","informationIcon","toolTip","ReviewPresentation","props","ariaLabel","reviewTitle","reviewText","labelsList","reviewWrapper","__html","reviewListWrapper","map","convert","cap","label","key","reviewList","reviewListItemWrapper","reviewListText","text","levelItem","PropTypes","shape","string","propTypes"],"mappings":"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","sourcesContent":["import React from 'react';\nimport PropTypes from 'prop-types';\nimport getOr from 'lodash/fp/getOr';\nimport map from 'lodash/fp/map';\nimport {\n  NovaSolidStatusCheckCircle2 as CheckIcon,\n  NovaSolidVoteRewardsVoteHeart as HeartIcon,\n  NovaCompositionCoorpacademyInformationIcon as InformationIcon,\n  NovaSolidInterfaceFeedbackInterfaceQuestionMark as QuestionIcon,\n  NovaLineSelectionCursorsCursorArrowTarget as TargetIcon\n} from '@coorpacademy/nova-icons';\nimport style from './style.css';\n\nconst ICONS = {\n  skills: TargetIcon,\n  questions: QuestionIcon,\n  lifes: HeartIcon,\n  allright: CheckIcon\n};\n\nconst getIcon = icon => {\n  const Icon = getOr(null, icon, ICONS);\n\n  /* istanbul ignore next */\n  if (!Icon) {\n    return <div className={style.labelIcon} />;\n  }\n  return <Icon className={style.labelIcon} />;\n};\n\nconst ToolTip = ({tooltipText}) => {\n  return (\n    <div className={style.tooltipContainer}>\n      <div className={style.tooltipIconContainer}>\n        <InformationIcon className={style.informationIcon} width={12} height={12} />\n      </div>\n      <div className={style.toolTip}>\n        <div className={style.tooltipText}>{tooltipText}</div>\n      </div>\n    </div>\n  );\n};\n\nconst ReviewPresentation = props => {\n  const {'aria-label': ariaLabel, reviewTitle, reviewText, labelsList} = props;\n\n  return (\n    <div className={style.reviewWrapper} aria-label={ariaLabel}>\n      <div\n        className={style.reviewTitle}\n        // eslint-disable-next-line react/no-danger\n        dangerouslySetInnerHTML={{__html: reviewTitle}}\n      />\n      <div\n        className={style.reviewText}\n        // eslint-disable-next-line react/no-danger\n        dangerouslySetInnerHTML={{__html: reviewText}}\n      />\n      <ul className={style.reviewListWrapper}>\n        {map.convert({cap: false})((label, key) => {\n          return (\n            <li key={`step-${key}`} className={style.reviewList}>\n              <div className={style.reviewListItemWrapper} data-tip data-for=\"reviewListItem\">\n                <div className={style.reviewListText}>\n                  {getIcon(key)} {label.text}\n                </div>\n                <ToolTip tooltipText={label.tooltipText} />\n              </div>\n            </li>\n          );\n        }, labelsList)}\n      </ul>\n    </div>\n  );\n};\n\nconst levelItem = PropTypes.shape({\n  text: PropTypes.string,\n  tooltipText: PropTypes.string\n});\n\nToolTip.propTypes = {\n  tooltipText: PropTypes.string\n};\n\nReviewPresentation.propTypes = {\n  'aria-label': PropTypes.string,\n  reviewTitle: PropTypes.string,\n  reviewText: PropTypes.string,\n  labelsList: PropTypes.shape({\n    skills: levelItem,\n    questions: levelItem,\n    lifes: levelItem,\n    allright: levelItem\n  })\n};\n\nexport default ReviewPresentation;\n"],"file":"index.js"}

package/lib/molecule/dashboard/cards-list/index.js

@@ -208,12 +208,10 @@ class CardsList extends _react.default.PureComponent {
   }
 
   setCardsWrapper(element) {
-    var _this$cardsWrapper, _this$cardsWrapper2;
-
     this.cardsWrapper = element;
     this.setState({
-      scrollLeft: (_this$cardsWrapper = this.cardsWrapper) == null ? void 0 : _this$cardsWrapper.scrollLeft,
-      offsetWidth: (_this$cardsWrapper2 = this.cardsWrapper) == null ? void 0 : _this$cardsWrapper2.offsetWidth
+      scrollLeft: this.cardsWrapper?.scrollLeft,
+      offsetWidth: this.cardsWrapper?.offsetWidth
     });
   }
 
@@ -226,9 +224,7 @@ class CardsList extends _react.default.PureComponent {
   }
 
   handleScroll() {
-    var _this$cardsWrapper3;
-
-    const scrollLeft = (_this$cardsWrapper3 = this.cardsWrapper) == null ? void 0 : _this$cardsWrapper3.scrollLeft;
+    const scrollLeft = this.cardsWrapper?.scrollLeft;
     this.setState({
       scrollLeft
     });