@coorpacademy/components 10.19.2 → 10.19.5

package/lib/atom/checkbox/index.js

@@ -5,61 +5,49 @@ exports.default = void 0;
 
 var _noop2 = _interopRequireDefault(require("lodash/fp/noop"));
 
-var _react = _interopRequireDefault(require("react"));
+var _react = _interopRequireWildcard(require("react"));
 
 var _propTypes = _interopRequireDefault(require("prop-types"));
 
+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 }; }
 
 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); }
 
-function _defineProperty(obj, key, value) { if (key in obj) { Object.defineProperty(obj, key, { value: value, enumerable: true, configurable: true, writable: true }); } else { obj[key] = value; } return obj; }
+function _objectWithoutPropertiesLoose(source, excluded) { if (source == null) return {}; var target = {}; var sourceKeys = Object.keys(source); var key, i; for (i = 0; i < sourceKeys.length; i++) { key = sourceKeys[i]; if (excluded.indexOf(key) >= 0) continue; target[key] = source[key]; } return target; }
 
-class Checkbox extends _react.default.Component {
-  constructor(props) {
-    super(props);
-    const {
-      checked
-    } = props;
-    this.state = {
-      checked
-    };
-    this.handleChangeBound = this.handleChange.bind(this);
-  }
+const Checkbox = props => {
+  const {
+    checked,
+    onChange = _noop2.default,
+    type = 'checkbox'
+  } = props,
+        rest = _objectWithoutPropertiesLoose(props, ["checked", "onChange", "type"]);
 
-  handleChange(e) {
-    const {
-      onChange = _noop2.default
-    } = this.props;
+  const [_checked, setChecked] = (0, _react.useState)(checked);
+  const handleChange = (0, _react.useCallback)(e => {
     onChange(e.target.checked);
-    this.setState({
-      checked: e.target.checked
-    });
-  }
-
-  render() {
-    const {
-      props,
-      state,
-      'data-name': dataName
-    } = this;
-    return /*#__PURE__*/_react.default.createElement("input", _extends({}, props, state, {
-      type: "checkbox",
-      "data-name": dataName,
-      onChange: this.handleChangeBound
-    }));
-  }
-
-}
-
-_defineProperty(Checkbox, "defaultProps", {
-  onChange: _noop2.default
-});
+    setChecked(!_checked);
+  }, [_checked, onChange]);
+  return /*#__PURE__*/_react.default.createElement("input", _extends({}, rest, {
+    checked: _checked,
+    type: type,
+    onChange: handleChange
+  }));
+};
 
 Checkbox.propTypes = process.env.NODE_ENV !== "production" ? {
   checked: _propTypes.default.bool,
   onChange: _propTypes.default.func,
-  'data-name': _propTypes.default.string
+  title: _propTypes.default.string,
+  type: _propTypes.default.string,
+  required: _propTypes.default.bool,
+  disabled: _propTypes.default.bool,
+  'data-name': _propTypes.default.string,
+  'aria-label': _propTypes.default.string
 } : {};
 var _default = Checkbox;
 exports.default = _default;

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

@@ -1 +1 @@
-{"version":3,"sources":["../../../src/atom/checkbox/index.js"],"names":["Checkbox","React","Component","constructor","props","checked","state","handleChangeBound","handleChange","bind","e","onChange","target","setState","render","dataName","propTypes","PropTypes","bool","func","string"],"mappings":";;;;;;;AAAA;;AACA;;;;;;;;AAGA,MAAMA,QAAN,SAAuBC,eAAMC,SAA7B,CAAuC;AAWrCC,EAAAA,WAAW,CAACC,KAAD,EAAQ;AACjB,UAAMA,KAAN;AACA,UAAM;AAACC,MAAAA;AAAD,QAAYD,KAAlB;AACA,SAAKE,KAAL,GAAa;AAACD,MAAAA;AAAD,KAAb;AACA,SAAKE,iBAAL,GAAyB,KAAKC,YAAL,CAAkBC,IAAlB,CAAuB,IAAvB,CAAzB;AACD;;AAEDD,EAAAA,YAAY,CAACE,CAAD,EAAI;AACd,UAAM;AAACC,MAAAA,QAAQ;AAAT,QAAoB,KAAKP,KAA/B;AACAO,IAAAA,QAAQ,CAACD,CAAC,CAACE,MAAF,CAASP,OAAV,CAAR;AACA,SAAKQ,QAAL,CAAc;AACZR,MAAAA,OAAO,EAAEK,CAAC,CAACE,MAAF,CAASP;AADN,KAAd;AAGD;;AAEDS,EAAAA,MAAM,GAAG;AACP,UAAM;AAACV,MAAAA,KAAD;AAAQE,MAAAA,KAAR;AAAe,mBAAaS;AAA5B,QAAwC,IAA9C;AACA,wBACE,mDACMX,KADN,EAEME,KAFN;AAGE,MAAA,IAAI,EAAC,UAHP;AAIE,mBAAWS,QAJb;AAKE,MAAA,QAAQ,EAAE,KAAKR;AALjB,OADF;AASD;;AArCoC;;gBAAjCP,Q,kBAOkB;AACpBW,EAAAA,QAAQ;AADY,C;;AAPlBX,Q,CACGgB,S,2CAAY;AACjBX,EAAAA,OAAO,EAAEY,mBAAUC,IADF;AAEjBP,EAAAA,QAAQ,EAAEM,mBAAUE,IAFH;AAGjB,eAAaF,mBAAUG;AAHN,C;eAuCNpB,Q","sourcesContent":["import React from 'react';\nimport PropTypes from 'prop-types';\nimport {noop} from 'lodash/fp';\n\nclass Checkbox extends React.Component {\n  static propTypes = {\n    checked: PropTypes.bool,\n    onChange: PropTypes.func,\n    'data-name': PropTypes.string\n  };\n\n  static defaultProps = {\n    onChange: noop\n  };\n\n  constructor(props) {\n    super(props);\n    const {checked} = props;\n    this.state = {checked};\n    this.handleChangeBound = this.handleChange.bind(this);\n  }\n\n  handleChange(e) {\n    const {onChange = noop} = this.props;\n    onChange(e.target.checked);\n    this.setState({\n      checked: e.target.checked\n    });\n  }\n\n  render() {\n    const {props, state, 'data-name': dataName} = this;\n    return (\n      <input\n        {...props}\n        {...state}\n        type=\"checkbox\"\n        data-name={dataName}\n        onChange={this.handleChangeBound}\n      />\n    );\n  }\n}\n\nexport default Checkbox;\n"],"file":"index.js"}
+{"version":3,"sources":["../../../src/atom/checkbox/index.js"],"names":["Checkbox","props","checked","onChange","type","rest","_checked","setChecked","handleChange","e","target","propTypes","PropTypes","bool","func","title","string","required","disabled"],"mappings":";;;;;;;AAAA;;AACA;;;;;;;;;;;;AAGA,MAAMA,QAAQ,GAAGC,KAAK,IAAI;AACxB,QAAM;AAACC,IAAAA,OAAD;AAAUC,IAAAA,QAAQ,iBAAlB;AAA2BC,IAAAA,IAAI,GAAG;AAAlC,MAAyDH,KAA/D;AAAA,QAAuDI,IAAvD,iCAA+DJ,KAA/D;;AACA,QAAM,CAACK,QAAD,EAAWC,UAAX,IAAyB,qBAASL,OAAT,CAA/B;AAEA,QAAMM,YAAY,GAAG,wBACnBC,CAAC,IAAI;AACHN,IAAAA,QAAQ,CAACM,CAAC,CAACC,MAAF,CAASR,OAAV,CAAR;AACAK,IAAAA,UAAU,CAAC,CAACD,QAAF,CAAV;AACD,GAJkB,EAKnB,CAACA,QAAD,EAAWH,QAAX,CALmB,CAArB;AAQA,sBAAO,mDAAWE,IAAX;AAAiB,IAAA,OAAO,EAAEC,QAA1B;AAAoC,IAAA,IAAI,EAAEF,IAA1C;AAAgD,IAAA,QAAQ,EAAEI;AAA1D,KAAP;AACD,CAbD;;AAeAR,QAAQ,CAACW,SAAT,2CAAqB;AACnBT,EAAAA,OAAO,EAAEU,mBAAUC,IADA;AAEnBV,EAAAA,QAAQ,EAAES,mBAAUE,IAFD;AAGnBC,EAAAA,KAAK,EAAEH,mBAAUI,MAHE;AAInBZ,EAAAA,IAAI,EAAEQ,mBAAUI,MAJG;AAKnBC,EAAAA,QAAQ,EAAEL,mBAAUC,IALD;AAMnBK,EAAAA,QAAQ,EAAEN,mBAAUC,IAND;AAOnB,eAAaD,mBAAUI,MAPJ;AAQnB,gBAAcJ,mBAAUI;AARL,CAArB;eAWehB,Q","sourcesContent":["import React, {useState, useCallback} from 'react';\nimport PropTypes from 'prop-types';\nimport {noop} from 'lodash/fp';\n\nconst Checkbox = props => {\n  const {checked, onChange = noop, type = 'checkbox', ...rest} = props;\n  const [_checked, setChecked] = useState(checked);\n\n  const handleChange = useCallback(\n    e => {\n      onChange(e.target.checked);\n      setChecked(!_checked);\n    },\n    [_checked, onChange]\n  );\n\n  return <input {...rest} checked={_checked} type={type} onChange={handleChange} />;\n};\n\nCheckbox.propTypes = {\n  checked: PropTypes.bool,\n  onChange: PropTypes.func,\n  title: PropTypes.string,\n  type: PropTypes.string,\n  required: PropTypes.bool,\n  disabled: PropTypes.bool,\n  'data-name': PropTypes.string,\n  'aria-label': PropTypes.string\n};\n\nexport default Checkbox;\n"],"file":"index.js"}

package/lib/atom/checkbox/test/fixtures/default.js

@@ -7,7 +7,8 @@ var _default = {
     type: 'checkbox',
     title: 'OK',
     checked: false,
-    onChange: value => console.log(value)
+    'aria-label': 'checkbox-aria-label',
+    onChange: value => console.log('onChange', value)
   }
 };
 exports.default = _default;

package/lib/atom/checkbox/test/fixtures/default.js.map

@@ -1 +1 @@
-{"version":3,"sources":["../../../../../src/atom/checkbox/test/fixtures/default.js"],"names":["props","type","title","checked","onChange","value","console","log"],"mappings":";;;;eAAe;AACbA,EAAAA,KAAK,EAAE;AACLC,IAAAA,IAAI,EAAE,UADD;AAELC,IAAAA,KAAK,EAAE,IAFF;AAGLC,IAAAA,OAAO,EAAE,KAHJ;AAILC,IAAAA,QAAQ,EAAEC,KAAK,IAAIC,OAAO,CAACC,GAAR,CAAYF,KAAZ;AAJd;AADM,C","sourcesContent":["export default {\n  props: {\n    type: 'checkbox',\n    title: 'OK',\n    checked: false,\n    onChange: value => console.log(value)\n  }\n};\n"],"file":"default.js"}
+{"version":3,"sources":["../../../../../src/atom/checkbox/test/fixtures/default.js"],"names":["props","type","title","checked","onChange","value","console","log"],"mappings":";;;;eAAe;AACbA,EAAAA,KAAK,EAAE;AACLC,IAAAA,IAAI,EAAE,UADD;AAELC,IAAAA,KAAK,EAAE,IAFF;AAGLC,IAAAA,OAAO,EAAE,KAHJ;AAIL,kBAAc,qBAJT;AAKLC,IAAAA,QAAQ,EAAEC,KAAK,IAAIC,OAAO,CAACC,GAAR,CAAY,UAAZ,EAAwBF,KAAxB;AALd;AADM,C","sourcesContent":["export default {\n  props: {\n    type: 'checkbox',\n    title: 'OK',\n    checked: false,\n    'aria-label': 'checkbox-aria-label',\n    onChange: value => console.log('onChange', value)\n  }\n};\n"],"file":"default.js"}

package/lib/atom/checkbox/test/on-change.js

@@ -6,43 +6,49 @@ var _ava = _interopRequireDefault(require("ava"));
 
 var _react = _interopRequireDefault(require("react"));
 
-var _enzyme = require("enzyme");
-
-var _enzymeAdapterReact = _interopRequireDefault(require("enzyme-adapter-react-16"));
+var _react2 = require("@testing-library/react");
 
 var _ = _interopRequireDefault(require(".."));
 
 function _interopRequireDefault(obj) { return obj && obj.__esModule ? obj : { default: obj }; }
 
 (0, _browserEnv.default)();
-(0, _enzyme.configure)({
-  adapter: new _enzymeAdapterReact.default()
-});
 (0, _ava.default)('should call the onChange function and toggle the value on change', t => {
-  t.plan(5);
+  t.plan(6);
   const expectedOnChangeValues = [false, true];
 
   const onChange = value => {
     t.is(value, expectedOnChangeValues.shift());
   };
 
-  const wrapper = (0, _enzyme.shallow)( /*#__PURE__*/_react.default.createElement(_.default, {
+  const dataName = 'check-box';
+  const {
+    container
+  } = (0, _react2.render)( /*#__PURE__*/_react.default.createElement(_.default, {
     checked: true,
-    onChange: onChange
+    onChange: onChange,
+    "data-name": dataName
+  }));
+  const checkBox = container.querySelector(`[data-name="${dataName}"]`);
+  t.truthy(checkBox);
+  t.true(checkBox.checked);
+
+  _react2.fireEvent.click(checkBox);
+
+  t.false(checkBox.checked);
+
+  _react2.fireEvent.click(checkBox);
+
+  t.true(checkBox.checked);
+});
+(0, _ava.default)('should mount the checkbox with default values', t => {
+  const dataName = 'check-box';
+  const {
+    container
+  } = (0, _react2.render)( /*#__PURE__*/_react.default.createElement(_.default, {
+    "data-name": dataName
   }));
-  const instance = wrapper.instance();
-  t.true(instance.state.checked);
-  wrapper.find('input').simulate('change', {
-    target: {
-      checked: false
-    }
-  });
-  t.false(instance.state.checked);
-  wrapper.find('input').simulate('change', {
-    target: {
-      checked: true
-    }
-  });
-  t.true(instance.state.checked);
+  const checkBox = container.querySelector(`[data-name="${dataName}"]`);
+  t.truthy(checkBox);
 });
 //# sourceMappingURL=on-change.js.map

package/lib/atom/checkbox/test/on-change.js.map

@@ -1 +1 @@
-{"version":3,"sources":["../../../../src/atom/checkbox/test/on-change.js"],"names":["adapter","Adapter","t","plan","expectedOnChangeValues","onChange","value","is","shift","wrapper","instance","true","state","checked","find","simulate","target","false"],"mappings":";;AAAA;;AACA;;AACA;;AACA;;AACA;;AACA;;;;AAEA;AACA,uBAAU;AAACA,EAAAA,OAAO,EAAE,IAAIC,2BAAJ;AAAV,CAAV;AAEA,kBAAK,kEAAL,EAAyEC,CAAC,IAAI;AAC5EA,EAAAA,CAAC,CAACC,IAAF,CAAO,CAAP;AACA,QAAMC,sBAAsB,GAAG,CAAC,KAAD,EAAQ,IAAR,CAA/B;;AACA,QAAMC,QAAQ,GAAGC,KAAK,IAAI;AACxBJ,IAAAA,CAAC,CAACK,EAAF,CAAKD,KAAL,EAAYF,sBAAsB,CAACI,KAAvB,EAAZ;AACD,GAFD;;AAGA,QAAMC,OAAO,GAAG,mCAAQ,6BAAC,SAAD;AAAU,IAAA,OAAO,MAAjB;AAAkB,IAAA,QAAQ,EAAEJ;AAA5B,IAAR,CAAhB;AACA,QAAMK,QAAQ,GAAGD,OAAO,CAACC,QAAR,EAAjB;AAEAR,EAAAA,CAAC,CAACS,IAAF,CAAOD,QAAQ,CAACE,KAAT,CAAeC,OAAtB;AACAJ,EAAAA,OAAO,CAACK,IAAR,CAAa,OAAb,EAAsBC,QAAtB,CAA+B,QAA/B,EAAyC;AAACC,IAAAA,MAAM,EAAE;AAACH,MAAAA,OAAO,EAAE;AAAV;AAAT,GAAzC;AACAX,EAAAA,CAAC,CAACe,KAAF,CAAQP,QAAQ,CAACE,KAAT,CAAeC,OAAvB;AACAJ,EAAAA,OAAO,CAACK,IAAR,CAAa,OAAb,EAAsBC,QAAtB,CAA+B,QAA/B,EAAyC;AAACC,IAAAA,MAAM,EAAE;AAACH,MAAAA,OAAO,EAAE;AAAV;AAAT,GAAzC;AACAX,EAAAA,CAAC,CAACS,IAAF,CAAOD,QAAQ,CAACE,KAAT,CAAeC,OAAtB;AACD,CAdD","sourcesContent":["import browserEnv from 'browser-env';\nimport test from 'ava';\nimport React from 'react';\nimport {shallow, configure} from 'enzyme';\nimport Adapter from 'enzyme-adapter-react-16';\nimport Checkbox from '..';\n\nbrowserEnv();\nconfigure({adapter: new Adapter()});\n\ntest('should call the onChange function and toggle the value on change', t => {\n  t.plan(5);\n  const expectedOnChangeValues = [false, true];\n  const onChange = value => {\n    t.is(value, expectedOnChangeValues.shift());\n  };\n  const wrapper = shallow(<Checkbox checked onChange={onChange} />);\n  const instance = wrapper.instance();\n\n  t.true(instance.state.checked);\n  wrapper.find('input').simulate('change', {target: {checked: false}});\n  t.false(instance.state.checked);\n  wrapper.find('input').simulate('change', {target: {checked: true}});\n  t.true(instance.state.checked);\n});\n"],"file":"on-change.js"}
+{"version":3,"sources":["../../../../src/atom/checkbox/test/on-change.js"],"names":["t","plan","expectedOnChangeValues","onChange","value","is","shift","dataName","container","checkBox","querySelector","truthy","true","checked","fireEvent","click","false"],"mappings":";;AAAA;;AACA;;AACA;;AACA;;AACA;;;;AAEA;AAEA,kBAAK,kEAAL,EAAyEA,CAAC,IAAI;AAC5EA,EAAAA,CAAC,CAACC,IAAF,CAAO,CAAP;AACA,QAAMC,sBAAsB,GAAG,CAAC,KAAD,EAAQ,IAAR,CAA/B;;AACA,QAAMC,QAAQ,GAAGC,KAAK,IAAI;AACxBJ,IAAAA,CAAC,CAACK,EAAF,CAAKD,KAAL,EAAYF,sBAAsB,CAACI,KAAvB,EAAZ;AACD,GAFD;;AAGA,QAAMC,QAAQ,GAAG,WAAjB;AACA,QAAM;AAACC,IAAAA;AAAD,MAAc,kCAAO,6BAAC,SAAD;AAAU,IAAA,OAAO,MAAjB;AAAkB,IAAA,QAAQ,EAAEL,QAA5B;AAAsC,iBAAWI;AAAjD,IAAP,CAApB;AAEA,QAAME,QAAQ,GAAGD,SAAS,CAACE,aAAV,CAAyB,eAAcH,QAAS,IAAhD,CAAjB;AACAP,EAAAA,CAAC,CAACW,MAAF,CAASF,QAAT;AAEAT,EAAAA,CAAC,CAACY,IAAF,CAAOH,QAAQ,CAACI,OAAhB;;AAEAC,oBAAUC,KAAV,CAAgBN,QAAhB;;AACAT,EAAAA,CAAC,CAACgB,KAAF,CAAQP,QAAQ,CAACI,OAAjB;;AAEAC,oBAAUC,KAAV,CAAgBN,QAAhB;;AACAT,EAAAA,CAAC,CAACY,IAAF,CAAOH,QAAQ,CAACI,OAAhB;AACD,CAnBD;AAqBA,kBAAK,+CAAL,EAAsDb,CAAC,IAAI;AACzD,QAAMO,QAAQ,GAAG,WAAjB;AACA,QAAM;AAACC,IAAAA;AAAD,MAAc,kCAAO,6BAAC,SAAD;AAAU,iBAAWD;AAArB,IAAP,CAApB;AAEA,QAAME,QAAQ,GAAGD,SAAS,CAACE,aAAV,CAAyB,eAAcH,QAAS,IAAhD,CAAjB;AACAP,EAAAA,CAAC,CAACW,MAAF,CAASF,QAAT;AACD,CAND","sourcesContent":["import browserEnv from 'browser-env';\nimport test from 'ava';\nimport React from 'react';\nimport {render, fireEvent} from '@testing-library/react';\nimport Checkbox from '..';\n\nbrowserEnv();\n\ntest('should call the onChange function and toggle the value on change', t => {\n  t.plan(6);\n  const expectedOnChangeValues = [false, true];\n  const onChange = value => {\n    t.is(value, expectedOnChangeValues.shift());\n  };\n  const dataName = 'check-box';\n  const {container} = render(<Checkbox checked onChange={onChange} data-name={dataName} />);\n\n  const checkBox = container.querySelector(`[data-name=\"${dataName}\"]`);\n  t.truthy(checkBox);\n\n  t.true(checkBox.checked);\n\n  fireEvent.click(checkBox);\n  t.false(checkBox.checked);\n\n  fireEvent.click(checkBox);\n  t.true(checkBox.checked);\n});\n\ntest('should mount the checkbox with default values', t => {\n  const dataName = 'check-box';\n  const {container} = render(<Checkbox data-name={dataName} />);\n\n  const checkBox = container.querySelector(`[data-name=\"${dataName}\"]`);\n  t.truthy(checkBox);\n});\n"],"file":"on-change.js"}

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":";;;;;;;;;;;AAAA;;AAEA;;AACA;;AACA;;AACA;;AACA;;AACA;;;;;;AAEA,MAAMA,UAAU,GAAG,CAAC;AAACC,EAAAA;AAAD,CAAD,KAAY;AAC7B,sBACE;AAAK,iBAAU,MAAf;AAAsB,IAAA,SAAS,EAAEC,eAAMC;AAAvC,kBACE;AACE;AACA,IAAA,uBAAuB,EAAE;AAACC,MAAAA,MAAM,EAAEH;AAAT;AAF3B,IADF,CADF;AAQD,CATD;;AAWAD,UAAU,CAACK,SAAX,2CAAuB;AACrBJ,EAAAA,IAAI,EAAEK,mBAAUC;AADK,CAAvB;;AAIA,MAAMC,IAAN,SAAmBC,eAAMC,SAAzB,CAAmC;AAYjC,SAAOC,wBAAP,CAAgCC,KAAhC,EAAuC;AACrC,UAAM;AAACX,MAAAA;AAAD,QAASW,KAAf;AACA,UAAMC,SAAS,GAAG,uBAAQZ,IAAR,CAAlB;AAEA,QAAIY,SAAJ,EAAe,OAAO,IAAP;AACf,WAAO;AAACA,MAAAA;AAAD,KAAP;AACD;;AAEDC,EAAAA,WAAW,CAACF,KAAD,EAAQG,OAAR,EAAiB;AAC1B,UAAMH,KAAN,EAAaG,OAAb;AACA,SAAKC,KAAL,GAAa;AACXH,MAAAA,SAAS,EAAE;AADA,KAAb;AAGA,SAAKI,WAAL,GAAmB,KAAKA,WAAL,CAAiBC,IAAjB,CAAsB,IAAtB,CAAnB;AACD;;AAEDD,EAAAA,WAAW,CAACE,CAAD,EAAI;AACbA,IAAAA,CAAC,CAACC,eAAF;AACAD,IAAAA,CAAC,CAACE,cAAF;AACA,UAAM;AAACpB,MAAAA,IAAD;AAAOqB,MAAAA,OAAO;AAAd,QAAyB,KAAKV,KAApC;AACAU,IAAAA,OAAO,CAACH,CAAD,CAAP;AACA,UAAMN,SAAS,GAAG,uBAAQZ,IAAR,CAAlB;AACA,WAAO,KAAKsB,QAAL,CAAc;AACnBV,MAAAA;AADmB,KAAd,CAAP;AAGD;;AAEDW,EAAAA,MAAM,GAAG;AACP,UAAM;AAACvB,MAAAA,IAAD;AAAOwB,MAAAA;AAAP,QAAoB,KAAKb,KAA/B;AACA,UAAM;AAACc,MAAAA,IAAD;AAAOC,MAAAA;AAAP,QAAoB,KAAKZ,OAA/B;AACA,UAAM;AAACF,MAAAA;AAAD,QAAc,KAAKG,KAAzB;AACA,UAAMY,YAAY,GAAG,mBAAI,gBAAJ,EAAsBF,IAAtB,CAArB;AACA,UAAMG,WAAW,GAAG;AAACC,MAAAA,eAAe,EAAEF;AAAlB,KAApB;AACA,UAAMG,YAAY,GAAGJ,SAAS,CAAC,qBAAD,EAAwB;AAACK,MAAAA,KAAK,EAAEC,IAAI,CAACC,GAAL,CAAST,SAAT;AAAR,KAAxB,CAA9B;AACA,UAAMU,UAAU,GAAGR,SAAS,CAAC,UAAD,CAA5B;AAEA,wBACE;AAAK,mBAAU,MAAf;AAAsB,MAAA,SAAS,EAAEzB,eAAMkC;AAAvC,oBACE;AAAK,MAAA,SAAS,EAAE,yBAAWlC,eAAMmC,QAAjB,EAA2B,CAAC,uBAAQpC,IAAR,CAAD,IAAkBC,eAAMoC,IAAnD;AAAhB,oBACE;AAAK,MAAA,SAAS,EAAEpC,eAAMqC,IAAtB;AAA4B,MAAA,KAAK,EAAEV,WAAnC;AAAgD,mBAAU;AAA1D,OACGhB,SAAS,gBAAG,6BAAC,eAAD,OAAH,GAAgB,IAD5B,eAEE;AAAK,MAAA,SAAS,EAAE,yBAAWX,eAAMsC,WAAjB,EAA8B3B,SAAS,IAAIX,eAAMuC,OAAjD;AAAhB,oBACE;AAAK,MAAA,SAAS,EAAEvC,eAAMwC;AAAtB,OAA8BX,YAA9B,CADF,eAEE,6BAAC,YAAD;AAAK,MAAA,WAAW,EAAEI,UAAlB;AAA8B,MAAA,SAAS,MAAvC;AAAwC,MAAA,KAAK,MAA7C;AAA8C,MAAA,OAAO,EAAE,KAAKlB;AAA5D,MAFF,CAFF,CADF,eAQE;AAAK,MAAA,SAAS,EAAEf,eAAMyC,KAAtB;AAA6B,MAAA,KAAK,EAAEd;AAApC,oBACE,6BAAC,UAAD;AAAY,MAAA,IAAI,EAAE5B;AAAlB,MADF,CARF,CADF,CADF;AAgBD;;AAhEgC;;gBAA7BO,I,kBAOkB;AACpBkB,EAAAA,IAAI,EAAEkB,kBAASC,iBAAT,CAA2BnB,IADb;AAEpBC,EAAAA,SAAS,EAAEiB,kBAASC,iBAAT,CAA2BlB;AAFlB,C;;AAPlBnB,I,CACGH,S,2CAAY;AACjBJ,EAAAA,IAAI,EAAED,UAAU,CAACK,SAAX,CAAqBJ,IADV;AAEjBqB,EAAAA,OAAO,EAAEwB,aAAIzC,SAAJ,CAAciB,OAFN;AAGjBG,EAAAA,SAAS,EAAEnB,mBAAUyC;AAHJ,C;eAkENvC,I","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":"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","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/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
     });