@coorpacademy/components 10.5.4 → 10.5.7-alpha.11

package/lib/molecule/draggable-list/test/on-drop.js.map

@@ -0,0 +1 @@
+{"version":3,"sources":["../../../../src/molecule/draggable-list/test/on-drop.js"],"names":["adapter","Adapter","t","plan","elementToDrag","fixtures","props","items","id","elementToDrop","dropHandler","dragged","dropped","is","wrapper","wrappingComponent","dragStartEvent","preventDefault","pass","dragOverEvent","dragLeaveEvent","dropEvent","find","style","draggable","at","simulate","fail"],"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 {set} from 'lodash/fp';\nimport Adapter from 'enzyme-adapter-react-16';\nimport {wrappingComponent} from '../../../test/helpers/render-component';\nimport SetupSections from '..';\n// eslint-disable-next-line css-modules/no-unused-class\nimport style from '../../draggable/style.css';\nimport fixtures from './fixtures/dashboard-sections';\n\nbrowserEnv();\nconfigure({adapter: new Adapter()});\n\ntest('should trigger onDrop handler', t => {\n  t.plan(7);\n\n  const elementToDrag = fixtures.props.items[0].id;\n  const elementToDrop = fixtures.props.items[2].id;\n\n  const dropHandler = (dragged, dropped) => {\n    t.is(dropped, elementToDrop);\n    t.is(dragged, elementToDrag);\n  };\n\n  const wrapper = mount(<SetupSections {...fixtures.props} onDrop={dropHandler} />, {\n    wrappingComponent\n  });\n\n  const dragStartEvent = {preventDefault: () => t.pass()};\n  const dragOverEvent = {preventDefault: () => t.pass()};\n  const dragLeaveEvent = {preventDefault: () => t.pass()};\n  const dropEvent = {preventDefault: () => t.pass()};\n\n  wrapper.find(`.${style.draggable}`).at(0).simulate('dragStart', dragStartEvent);\n  wrapper.find(`.${style.draggable}`).at(0).simulate('dragOver', dragOverEvent);\n  wrapper.find(`.${style.draggable}`).at(0).simulate('dragOver', dragOverEvent);\n  wrapper.find(`.${style.draggable}`).at(0).simulate('dragLeave', dragLeaveEvent);\n  wrapper.find(`.${style.draggable}`).at(2).simulate('dragOver', dragOverEvent);\n  wrapper.find(`.${style.draggable}`).at(2).simulate('drop', dropEvent);\n});\n\ntest('should skip drop event if dragStart is not called', t => {\n  t.plan(1);\n\n  const dropHandler = (dragged, dropped) => {\n    t.fail();\n  };\n\n  const wrapper = mount(<SetupSections {...fixtures.props} onDrop={dropHandler} />, {\n    wrappingComponent\n  });\n\n  const dropEvent = {preventDefault: () => t.pass()};\n  wrapper.find(`.${style.draggable}`).at(2).simulate('drop', dropEvent);\n});\n\ntest('should skip dragStart event if section id is not defined', t => {\n  t.plan(0);\n\n  const dropHandler = (dragged, dropped) => {\n    t.fail();\n  };\n\n  const wrapper = mount(\n    <SetupSections {...set('items.0.id', '', fixtures.props)} onDrop={dropHandler} />,\n    {\n      wrappingComponent\n    }\n  );\n\n  const dragStartEvent = {preventDefault: () => {}};\n  const dragOverEvent = {preventDefault: () => {}};\n  const dragLeaveEvent = {preventDefault: () => {}};\n  const dropEvent = {preventDefault: () => {}};\n\n  wrapper.find(`.${style.draggable}`).at(0).simulate('dragStart', dragStartEvent);\n  wrapper.find(`.${style.draggable}`).at(0).simulate('dragOver', dragOverEvent);\n  wrapper.find(`.${style.draggable}`).at(0).simulate('dragOver', dragOverEvent);\n  wrapper.find(`.${style.draggable}`).at(0).simulate('dragLeave', dragLeaveEvent);\n  wrapper.find(`.${style.draggable}`).at(2).simulate('dragOver', dragOverEvent);\n  wrapper.find(`.${style.draggable}`).at(2).simulate('drop', dropEvent);\n});\n"],"file":"on-drop.js"}

package/lib/molecule/questions/drop-down/index.js

@@ -19,8 +19,6 @@ function _interopRequireWildcard(obj) { if (obj && obj.__esModule) { return obj;
 
 function _interopRequireDefault(obj) { return obj && obj.__esModule ? obj : { default: obj }; }
 
-function _extends() { _extends = Object.assign || function (target) { for (var i = 1; i < arguments.length; i++) { var source = arguments[i]; for (var key in source) { if (Object.prototype.hasOwnProperty.call(source, key)) { target[key] = source[key]; } } } return target; }; return _extends.apply(this, arguments); }
-
 const DropDown = props => {
   const {
     options,
@@ -41,9 +39,7 @@ const DropDown = props => {
 
 DropDown.propTypes = process.env.NODE_ENV !== "production" ? {
   onChange: _select.default.propTypes.onChange,
-  options: _propTypes.default.arrayOf(_propTypes.default.shape(_extends(_extends({}, _select.SelectOptionPropTypes), {}, {
-    validOption: _propTypes.default.bool
-  }))),
+  options: _propTypes.default.arrayOf(_propTypes.default.shape(_select.SelectOptionPropTypes)),
   theme: _select.default.propTypes.theme
 } : {};
 var _default = DropDown;

package/lib/molecule/questions/drop-down/index.js.map

@@ -1 +1 @@
-{"version":3,"sources":["../../../../src/molecule/questions/drop-down/index.js"],"names":["DropDown","props","options","onChange","theme","propsTheme","currentSelection","defaultTheme","validOption","style","wrapper","propTypes","Select","PropTypes","arrayOf","shape","SelectOptionPropTypes","bool"],"mappings":";;;;;;;AAAA;;AACA;;AAEA;;AACA;;;;;;;;;;AAEA,MAAMA,QAAQ,GAAGC,KAAK,IAAI;AACxB,QAAM;AAACC,IAAAA,OAAD;AAAUC,IAAAA,QAAV;AAAoBC,IAAAA,KAAK,EAAEC;AAA3B,MAAyCJ,KAA/C;AAEA,QAAMK,gBAAgB,GAAG,oBAAK,UAAL,EAAiBJ,OAAjB,CAAzB;AACA,QAAMK,YAAY,GAChB,CAACD,gBAAD,IAAqBA,gBAAgB,CAACE,WAAjB,KAAiC,KAAtD,GAA8D,SAA9D,GAA0E,UAD5E;AAGA,QAAMJ,KAAK,GAAGC,UAAU,IAAIE,YAA5B;AAEA,sBACE;AAAK,IAAA,SAAS,EAAEE,eAAMC;AAAtB,kBACE,6BAAC,eAAD;AAAQ,IAAA,KAAK,EAAEN,KAAf;AAAsB,IAAA,OAAO,EAAEF,OAA/B;AAAwC,IAAA,QAAQ,EAAEC;AAAlD,IADF,CADF;AAKD,CAdD;;AAgBAH,QAAQ,CAACW,SAAT,2CAAqB;AACnBR,EAAAA,QAAQ,EAAES,gBAAOD,SAAP,CAAiBR,QADR;AAEnBD,EAAAA,OAAO,EAAEW,mBAAUC,OAAV,CACPD,mBAAUE,KAAV,uBAAoBC,6BAApB;AAA2CR,IAAAA,WAAW,EAAEK,mBAAUI;AAAlE,KADO,CAFU;AAKnBb,EAAAA,KAAK,EAAEQ,gBAAOD,SAAP,CAAiBP;AALL,CAArB;eAQeJ,Q","sourcesContent":["import React from 'react';\nimport PropTypes from 'prop-types';\nimport {find} from 'lodash/fp';\nimport Select, {SelectOptionPropTypes} from '../../../atom/select';\nimport style from './style.css';\n\nconst DropDown = props => {\n  const {options, onChange, theme: propsTheme} = props;\n\n  const currentSelection = find('selected', options);\n  const defaultTheme =\n    !currentSelection || currentSelection.validOption === false ? 'invalid' : 'question';\n\n  const theme = propsTheme || defaultTheme;\n\n  return (\n    <div className={style.wrapper}>\n      <Select theme={theme} options={options} onChange={onChange} />\n    </div>\n  );\n};\n\nDropDown.propTypes = {\n  onChange: Select.propTypes.onChange,\n  options: PropTypes.arrayOf(\n    PropTypes.shape({...SelectOptionPropTypes, validOption: PropTypes.bool})\n  ),\n  theme: Select.propTypes.theme\n};\n\nexport default DropDown;\n"],"file":"index.js"}
+{"version":3,"sources":["../../../../src/molecule/questions/drop-down/index.js"],"names":["DropDown","props","options","onChange","theme","propsTheme","currentSelection","defaultTheme","validOption","style","wrapper","propTypes","Select","PropTypes","arrayOf","shape","SelectOptionPropTypes"],"mappings":";;;;;;;AAAA;;AACA;;AAEA;;AACA;;;;;;;;AAEA,MAAMA,QAAQ,GAAGC,KAAK,IAAI;AACxB,QAAM;AAACC,IAAAA,OAAD;AAAUC,IAAAA,QAAV;AAAoBC,IAAAA,KAAK,EAAEC;AAA3B,MAAyCJ,KAA/C;AAEA,QAAMK,gBAAgB,GAAG,oBAAK,UAAL,EAAiBJ,OAAjB,CAAzB;AACA,QAAMK,YAAY,GAChB,CAACD,gBAAD,IAAqBA,gBAAgB,CAACE,WAAjB,KAAiC,KAAtD,GAA8D,SAA9D,GAA0E,UAD5E;AAGA,QAAMJ,KAAK,GAAGC,UAAU,IAAIE,YAA5B;AAEA,sBACE;AAAK,IAAA,SAAS,EAAEE,eAAMC;AAAtB,kBACE,6BAAC,eAAD;AAAQ,IAAA,KAAK,EAAEN,KAAf;AAAsB,IAAA,OAAO,EAAEF,OAA/B;AAAwC,IAAA,QAAQ,EAAEC;AAAlD,IADF,CADF;AAKD,CAdD;;AAgBAH,QAAQ,CAACW,SAAT,2CAAqB;AACnBR,EAAAA,QAAQ,EAAES,gBAAOD,SAAP,CAAiBR,QADR;AAEnBD,EAAAA,OAAO,EAAEW,mBAAUC,OAAV,CAAkBD,mBAAUE,KAAV,CAAgBC,6BAAhB,CAAlB,CAFU;AAGnBZ,EAAAA,KAAK,EAAEQ,gBAAOD,SAAP,CAAiBP;AAHL,CAArB;eAMeJ,Q","sourcesContent":["import React from 'react';\nimport PropTypes from 'prop-types';\nimport {find} from 'lodash/fp';\nimport Select, {SelectOptionPropTypes} from '../../../atom/select';\nimport style from './style.css';\n\nconst DropDown = props => {\n  const {options, onChange, theme: propsTheme} = props;\n\n  const currentSelection = find('selected', options);\n  const defaultTheme =\n    !currentSelection || currentSelection.validOption === false ? 'invalid' : 'question';\n\n  const theme = propsTheme || defaultTheme;\n\n  return (\n    <div className={style.wrapper}>\n      <Select theme={theme} options={options} onChange={onChange} />\n    </div>\n  );\n};\n\nDropDown.propTypes = {\n  onChange: Select.propTypes.onChange,\n  options: PropTypes.arrayOf(PropTypes.shape(SelectOptionPropTypes)),\n  theme: Select.propTypes.theme\n};\n\nexport default DropDown;\n"],"file":"index.js"}

package/lib/molecule/questions/free-text/index.js

@@ -3,7 +3,7 @@
 exports.__esModule = true;
 exports.default = void 0;
 
-var _get2 = _interopRequireDefault(require("lodash/fp/get"));
+var _getOr2 = _interopRequireDefault(require("lodash/fp/getOr"));
 
 var _noop2 = _interopRequireDefault(require("lodash/fp/noop"));
 
@@ -11,6 +11,8 @@ var _react = _interopRequireWildcard(require("react"));
 
 var _propTypes = _interopRequireDefault(require("prop-types"));
 
+var _cssColorFunction = require("css-color-function");
+
 var _provider = _interopRequireDefault(require("../../../atom/provider"));
 
 var _style = _interopRequireDefault(require("./style.css"));
@@ -21,30 +23,45 @@ function _interopRequireWildcard(obj) { if (obj && obj.__esModule) { return obj;
 
 function _interopRequireDefault(obj) { return obj && obj.__esModule ? obj : { default: obj }; }
 
-const FreeText = (props, {
-  skin
-}) => {
+function _extends() { _extends = Object.assign || function (target) { for (var i = 1; i < arguments.length; i++) { var source = arguments[i]; for (var key in source) { if (Object.prototype.hasOwnProperty.call(source, key)) { target[key] = source[key]; } } } return target; }; return _extends.apply(this, arguments); }
+
+const FreeText = (props, context) => {
   const {
     placeholder = '',
     value = '',
-    onChange = _noop2.default
+    onChange = _noop2.default,
+    'aria-label': ariaLabel
   } = props;
-  const handleChange = (0, _react.useMemo)(() => e => onChange(e.target.value), [onChange]);
-  const skinView = value ? (0, _get2.default)('common.primary', skin) : null;
+  const [hovered, setHovered] = (0, _react.useState)(false);
+  const handleChange = (0, _react.useCallback)(e => onChange(e.target.value), [onChange]);
+  const primarySkinColor = (0, _getOr2.default)('#00B0FF', 'skin.common.primary', context);
+  const handleMouseOver = (0, _react.useCallback)(() => setHovered(true), [setHovered]);
+  const handleMouseLeave = (0, _react.useCallback)(() => setHovered(false), [setHovered]);
+  const shadowBoxPrimaryColor = (0, _react.useMemo)(() => (0, _cssColorFunction.convert)(`color(${primarySkinColor} a(12%))`), [primarySkinColor]);
   return /*#__PURE__*/_react.default.createElement("div", {
     "data-name": "freeText",
-    className: _style.default.wrapper
+    className: _style.default.wrapper,
+    onMouseOver: handleMouseOver,
+    onMouseLeave: handleMouseLeave,
+    style: _extends({}, value && {
+      boxShadow: hovered ? 'none' : `0 4px 16px ${shadowBoxPrimaryColor}`
+    })
   }, /*#__PURE__*/_react.default.createElement("input", {
+    "data-name": "free-text-input",
     type: "text",
-    className: _style.default.input,
+    "aria-label": ariaLabel || value || placeholder,
+    className: _style.default.freeText,
     placeholder: placeholder,
     value: value,
     onInput: handleChange,
     onChange: _noop2.default,
-    style: {
-      color: skinView,
-      borderColor: skinView
-    }
+    style: _extends(_extends({
+      boxShadow: `0 4px 16px ${shadowBoxPrimaryColor}`
+    }, value && {
+      boxShadow: `0 4px 16px ${hovered ? (0, _cssColorFunction.convert)(`color(${primarySkinColor} a(20%))`) : shadowBoxPrimaryColor}`
+    }), {}, {
+      color: primarySkinColor
+    })
   }));
 };
 
@@ -54,7 +71,8 @@ FreeText.contextTypes = {
 FreeText.propTypes = process.env.NODE_ENV !== "production" ? {
   placeholder: _propTypes.default.string,
   value: _propTypes.default.string,
-  onChange: _propTypes.default.func
+  onChange: _propTypes.default.func,
+  'aria-label': _propTypes.default.string
 } : {};
 var _default = FreeText;
 exports.default = _default;

package/lib/molecule/questions/free-text/index.js.map

@@ -1 +1 @@
-{"version":3,"sources":["../../../../src/molecule/questions/free-text/index.js"],"names":["FreeText","props","skin","placeholder","value","onChange","handleChange","e","target","skinView","style","wrapper","input","color","borderColor","contextTypes","Provider","childContextTypes","propTypes","PropTypes","string","func"],"mappings":";;;;;;;;;AAAA;;AACA;;AAEA;;AACA;;;;;;;;AAEA,MAAMA,QAAQ,GAAG,CAACC,KAAD,EAAQ;AAACC,EAAAA;AAAD,CAAR,KAAmB;AAClC,QAAM;AAACC,IAAAA,WAAW,GAAG,EAAf;AAAmBC,IAAAA,KAAK,GAAG,EAA3B;AAA+BC,IAAAA,QAAQ;AAAvC,MAAkDJ,KAAxD;AAEA,QAAMK,YAAY,GAAG,oBAAQ,MAAMC,CAAC,IAAIF,QAAQ,CAACE,CAAC,CAACC,MAAF,CAASJ,KAAV,CAA3B,EAA6C,CAACC,QAAD,CAA7C,CAArB;AACA,QAAMI,QAAQ,GAAGL,KAAK,GAAG,mBAAI,gBAAJ,EAAsBF,IAAtB,CAAH,GAAiC,IAAvD;AAEA,sBACE;AAAK,iBAAU,UAAf;AAA0B,IAAA,SAAS,EAAEQ,eAAMC;AAA3C,kBACE;AACE,IAAA,IAAI,EAAC,MADP;AAEE,IAAA,SAAS,EAAED,eAAME,KAFnB;AAGE,IAAA,WAAW,EAAET,WAHf;AAIE,IAAA,KAAK,EAAEC,KAJT;AAKE,IAAA,OAAO,EAAEE,YALX;AAME,IAAA,QAAQ,gBANV;AAOE,IAAA,KAAK,EAAE;AACLO,MAAAA,KAAK,EAAEJ,QADF;AAELK,MAAAA,WAAW,EAAEL;AAFR;AAPT,IADF,CADF;AAgBD,CAtBD;;AAwBAT,QAAQ,CAACe,YAAT,GAAwB;AACtBb,EAAAA,IAAI,EAAEc,kBAASC,iBAAT,CAA2Bf;AADX,CAAxB;AAIAF,QAAQ,CAACkB,SAAT,2CAAqB;AACnBf,EAAAA,WAAW,EAAEgB,mBAAUC,MADJ;AAEnBhB,EAAAA,KAAK,EAAEe,mBAAUC,MAFE;AAGnBf,EAAAA,QAAQ,EAAEc,mBAAUE;AAHD,CAArB;eAMerB,Q","sourcesContent":["import React, {useMemo} from 'react';\nimport PropTypes from 'prop-types';\nimport {noop, get} from 'lodash/fp';\nimport Provider from '../../../atom/provider';\nimport style from './style.css';\n\nconst FreeText = (props, {skin}) => {\n  const {placeholder = '', value = '', onChange = noop} = props;\n\n  const handleChange = useMemo(() => e => onChange(e.target.value), [onChange]);\n  const skinView = value ? get('common.primary', skin) : null;\n\n  return (\n    <div data-name=\"freeText\" className={style.wrapper}>\n      <input\n        type=\"text\"\n        className={style.input}\n        placeholder={placeholder}\n        value={value}\n        onInput={handleChange}\n        onChange={noop}\n        style={{\n          color: skinView,\n          borderColor: skinView\n        }}\n      />\n    </div>\n  );\n};\n\nFreeText.contextTypes = {\n  skin: Provider.childContextTypes.skin\n};\n\nFreeText.propTypes = {\n  placeholder: PropTypes.string,\n  value: PropTypes.string,\n  onChange: PropTypes.func\n};\n\nexport default FreeText;\n"],"file":"index.js"}
+{"version":3,"sources":["../../../../src/molecule/questions/free-text/index.js"],"names":["FreeText","props","context","placeholder","value","onChange","ariaLabel","hovered","setHovered","handleChange","e","target","primarySkinColor","handleMouseOver","handleMouseLeave","shadowBoxPrimaryColor","style","wrapper","boxShadow","freeText","color","contextTypes","skin","Provider","childContextTypes","propTypes","PropTypes","string","func"],"mappings":";;;;;;;;;AAAA;;AACA;;AAEA;;AACA;;AACA;;;;;;;;;;AAEA,MAAMA,QAAQ,GAAG,CAACC,KAAD,EAAQC,OAAR,KAAoB;AACnC,QAAM;AAACC,IAAAA,WAAW,GAAG,EAAf;AAAmBC,IAAAA,KAAK,GAAG,EAA3B;AAA+BC,IAAAA,QAAQ,iBAAvC;AAAgD,kBAAcC;AAA9D,MAA2EL,KAAjF;AACA,QAAM,CAACM,OAAD,EAAUC,UAAV,IAAwB,qBAAS,KAAT,CAA9B;AAEA,QAAMC,YAAY,GAAG,wBAAYC,CAAC,IAAIL,QAAQ,CAACK,CAAC,CAACC,MAAF,CAASP,KAAV,CAAzB,EAA2C,CAACC,QAAD,CAA3C,CAArB;AACA,QAAMO,gBAAgB,GAAG,qBAAM,SAAN,EAAiB,qBAAjB,EAAwCV,OAAxC,CAAzB;AAEA,QAAMW,eAAe,GAAG,wBAAY,MAAML,UAAU,CAAC,IAAD,CAA5B,EAAoC,CAACA,UAAD,CAApC,CAAxB;AAEA,QAAMM,gBAAgB,GAAG,wBAAY,MAAMN,UAAU,CAAC,KAAD,CAA5B,EAAqC,CAACA,UAAD,CAArC,CAAzB;AAEA,QAAMO,qBAAqB,GAAG,oBAAQ,MAAM,+BAAS,SAAQH,gBAAiB,UAAlC,CAAd,EAA4D,CACxFA,gBADwF,CAA5D,CAA9B;AAIA,sBACE;AACE,iBAAU,UADZ;AAEE,IAAA,SAAS,EAAEI,eAAMC,OAFnB;AAGE,IAAA,WAAW,EAAEJ,eAHf;AAIE,IAAA,YAAY,EAAEC,gBAJhB;AAKE,IAAA,KAAK,eACCV,KAAK,IAAI;AACXc,MAAAA,SAAS,EAAEX,OAAO,GAAG,MAAH,GAAa,cAAaQ,qBAAsB;AADvD,KADV;AALP,kBAWE;AACE,iBAAU,iBADZ;AAEE,IAAA,IAAI,EAAC,MAFP;AAGE,kBAAYT,SAAS,IAAIF,KAAb,IAAsBD,WAHpC;AAIE,IAAA,SAAS,EAAEa,eAAMG,QAJnB;AAKE,IAAA,WAAW,EAAEhB,WALf;AAME,IAAA,KAAK,EAAEC,KANT;AAOE,IAAA,OAAO,EAAEK,YAPX;AAQE,IAAA,QAAQ,gBARV;AASE,IAAA,KAAK;AACHS,MAAAA,SAAS,EAAG,cAAaH,qBAAsB;AAD5C,OAECX,KAAK,IAAI;AACXc,MAAAA,SAAS,EAAG,cACVX,OAAO,GAAG,+BAAS,SAAQK,gBAAiB,UAAlC,CAAH,GAAkDG,qBAC1D;AAHU,KAFV;AAOHK,MAAAA,KAAK,EAAER;AAPJ;AATP,IAXF,CADF;AAiCD,CAhDD;;AAkDAZ,QAAQ,CAACqB,YAAT,GAAwB;AACtBC,EAAAA,IAAI,EAAEC,kBAASC,iBAAT,CAA2BF;AADX,CAAxB;AAIAtB,QAAQ,CAACyB,SAAT,2CAAqB;AACnBtB,EAAAA,WAAW,EAAEuB,mBAAUC,MADJ;AAEnBvB,EAAAA,KAAK,EAAEsB,mBAAUC,MAFE;AAGnBtB,EAAAA,QAAQ,EAAEqB,mBAAUE,IAHD;AAInB,gBAAcF,mBAAUC;AAJL,CAArB;eAOe3B,Q","sourcesContent":["import React, {useCallback, useMemo, useState} from 'react';\nimport PropTypes from 'prop-types';\nimport {noop, getOr} from 'lodash/fp';\nimport {convert} from 'css-color-function';\nimport Provider from '../../../atom/provider';\nimport style from './style.css';\n\nconst FreeText = (props, context) => {\n  const {placeholder = '', value = '', onChange = noop, 'aria-label': ariaLabel} = props;\n  const [hovered, setHovered] = useState(false);\n\n  const handleChange = useCallback(e => onChange(e.target.value), [onChange]);\n  const primarySkinColor = getOr('#00B0FF', 'skin.common.primary', context);\n\n  const handleMouseOver = useCallback(() => setHovered(true), [setHovered]);\n\n  const handleMouseLeave = useCallback(() => setHovered(false), [setHovered]);\n\n  const shadowBoxPrimaryColor = useMemo(() => convert(`color(${primarySkinColor} a(12%))`), [\n    primarySkinColor\n  ]);\n\n  return (\n    <div\n      data-name=\"freeText\"\n      className={style.wrapper}\n      onMouseOver={handleMouseOver}\n      onMouseLeave={handleMouseLeave}\n      style={{\n        ...(value && {\n          boxShadow: hovered ? 'none' : `0 4px 16px ${shadowBoxPrimaryColor}`\n        })\n      }}\n    >\n      <input\n        data-name=\"free-text-input\"\n        type=\"text\"\n        aria-label={ariaLabel || value || placeholder}\n        className={style.freeText}\n        placeholder={placeholder}\n        value={value}\n        onInput={handleChange}\n        onChange={noop}\n        style={{\n          boxShadow: `0 4px 16px ${shadowBoxPrimaryColor}`,\n          ...(value && {\n            boxShadow: `0 4px 16px ${\n              hovered ? convert(`color(${primarySkinColor} a(20%))`) : shadowBoxPrimaryColor\n            }`\n          }),\n          color: primarySkinColor\n        }}\n      />\n    </div>\n  );\n};\n\nFreeText.contextTypes = {\n  skin: Provider.childContextTypes.skin\n};\n\nFreeText.propTypes = {\n  placeholder: PropTypes.string,\n  value: PropTypes.string,\n  onChange: PropTypes.func,\n  'aria-label': PropTypes.string\n};\n\nexport default FreeText;\n"],"file":"index.js"}

package/lib/molecule/questions/free-text/style.css

@@ -1,41 +1,61 @@
 @value breakpoints: "../../../variables/breakpoints.css";
 @value mobile from breakpoints;
 @value colors: "../../../variables/colors.css";
-@value medium from colors;
-@value black from colors;
+@value box_shadow_light_dark from colors;
+@value cm_blue_900 from colors;
 
-.input {
+
+.freeText {
+  border: unset;
+  border-width: 0;
   font-family: "Gilroy";
   font-weight: 700;
   text-transform: none;
-  padding: 0 15px;
-  border: solid 1px;
-  border-color: color(black lightness(85%));
   height: 50px;
-  border-radius: 2px;
+  border-radius: 8px;
   font-size: 14px;
-  width: 230px;
+  max-width: calc(100% - 24px);
+  width: 100%;
   outline: none;
+  padding-left: 12px;
+  padding-right: 12px;
 }
 
-.input::placeholder {
-  color: medium;
+.freeText::placeholder {
+  color: color(cm_blue_900 a(0.3));
+}
+
+.freeText:focus {
+  outline: none;
 }
 
-.input:focus {
+.freeText:hover {
   outline: none;
 }
 
+.wrapper {
+  border-radius: 8px;
+  box-shadow: 0px 4px 16px box_shadow_light_dark;
+  margin: 0 15px;
+  overflow: hidden;
+  width: 230px;
+}
+
+.wrapper:hover {
+  box-shadow: none;
+  overflow: visible;
+}
+
 @media mobile {
   .wrapper {
-    width: 304px;
+    max-width: calc(100% - 30px);
+    width: auto;
     box-sizing: border-box;
-    max-width: 100%;
   }
 
-  .input {
+  .freeText {
+    min-width: fit-content;
     width: 100%;
-    margin: 0;
     box-sizing: border-box;
   }
 }

package/lib/molecule/questions/free-text/test/fixtures/default.js

@@ -5,7 +5,7 @@ exports.default = void 0;
 var _default = {
   props: {
     placeholder: 'Type your answer here',
-    defaultValue: null
+    value: undefined
   }
 };
 exports.default = _default;

package/lib/molecule/questions/free-text/test/fixtures/default.js.map

@@ -1 +1 @@
-{"version":3,"sources":["../../../../../../src/molecule/questions/free-text/test/fixtures/default.js"],"names":["props","placeholder","defaultValue"],"mappings":";;;;eAAe;AACbA,EAAAA,KAAK,EAAE;AACLC,IAAAA,WAAW,EAAE,uBADR;AAELC,IAAAA,YAAY,EAAE;AAFT;AADM,C","sourcesContent":["export default {\n  props: {\n    placeholder: 'Type your answer here',\n    defaultValue: null\n  }\n};\n"],"file":"default.js"}
+{"version":3,"sources":["../../../../../../src/molecule/questions/free-text/test/fixtures/default.js"],"names":["props","placeholder","value","undefined"],"mappings":";;;;eAAe;AACbA,EAAAA,KAAK,EAAE;AACLC,IAAAA,WAAW,EAAE,uBADR;AAELC,IAAAA,KAAK,EAAEC;AAFF;AADM,C","sourcesContent":["export default {\n  props: {\n    placeholder: 'Type your answer here',\n    value: undefined\n  }\n};\n"],"file":"default.js"}

package/lib/molecule/questions/free-text/test/fixtures/with-value-on-change.js

@@ -0,0 +1,14 @@
+"use strict";
+
+exports.__esModule = true;
+exports.default = void 0;
+var _default = {
+  props: {
+    placeholder: 'Type your answer here',
+    value: 'plop!',
+    onChange: () => {},
+    'aria-label': 'aria input'
+  }
+};
+exports.default = _default;
+//# sourceMappingURL=with-value-on-change.js.map

package/lib/molecule/questions/free-text/test/fixtures/with-value-on-change.js.map

@@ -0,0 +1 @@
+{"version":3,"sources":["../../../../../../src/molecule/questions/free-text/test/fixtures/with-value-on-change.js"],"names":["props","placeholder","value","onChange"],"mappings":";;;;eAAe;AACbA,EAAAA,KAAK,EAAE;AACLC,IAAAA,WAAW,EAAE,uBADR;AAELC,IAAAA,KAAK,EAAE,OAFF;AAGLC,IAAAA,QAAQ,EAAE,MAAM,CAAE,CAHb;AAIL,kBAAc;AAJT;AADM,C","sourcesContent":["export default {\n  props: {\n    placeholder: 'Type your answer here',\n    value: 'plop!',\n    onChange: () => {},\n    'aria-label': 'aria input'\n  }\n};\n"],"file":"with-value-on-change.js"}

package/lib/molecule/questions/free-text/test/fixtures/{with-default-value.js → with-value.js}

@@ -5,8 +5,8 @@ exports.default = void 0;
 var _default = {
   props: {
     placeholder: 'Type your answer here',
-    defaultValue: 'plop!'
+    value: 'plop!'
   }
 };
 exports.default = _default;
-//# sourceMappingURL=with-default-value.js.map
+//# sourceMappingURL=with-value.js.map

package/lib/molecule/questions/free-text/test/fixtures/with-value.js.map

@@ -0,0 +1 @@
+{"version":3,"sources":["../../../../../../src/molecule/questions/free-text/test/fixtures/with-value.js"],"names":["props","placeholder","value"],"mappings":";;;;eAAe;AACbA,EAAAA,KAAK,EAAE;AACLC,IAAAA,WAAW,EAAE,uBADR;AAELC,IAAAA,KAAK,EAAE;AAFF;AADM,C","sourcesContent":["export default {\n  props: {\n    placeholder: 'Type your answer here',\n    value: 'plop!'\n  }\n};\n"],"file":"with-value.js"}

package/lib/molecule/questions/free-text/test/fixtures.js

@@ -10,7 +10,9 @@ var _ = _interopRequireDefault(require(".."));
 
 var _default = _interopRequireDefault(require("./fixtures/default"));
 
-var _withDefaultValue = _interopRequireDefault(require("./fixtures/with-default-value"));
+var _withValueOnChange = _interopRequireDefault(require("./fixtures/with-value-on-change"));
+
+var _withValue = _interopRequireDefault(require("./fixtures/with-value"));
 
 function _interopRequireDefault(obj) { return obj && obj.__esModule ? obj : { default: obj }; }
 
@@ -21,5 +23,6 @@ function _interopRequireDefault(obj) { return obj && obj.__esModule ? obj : { de
   });
 });
 (0, _ava.default)('MoleculeQuestions › MoleculeQuestionsFreeText › Default › should be rendered', _renderComponent.default, _.default, _default.default);
-(0, _ava.default)('MoleculeQuestions › MoleculeQuestionsFreeText › WithDefaultValue › should be rendered', _renderComponent.default, _.default, _withDefaultValue.default);
+(0, _ava.default)('MoleculeQuestions › MoleculeQuestionsFreeText › WithValueOnChange › should be rendered', _renderComponent.default, _.default, _withValueOnChange.default);
+(0, _ava.default)('MoleculeQuestions › MoleculeQuestionsFreeText › WithValue › should be rendered', _renderComponent.default, _.default, _withValue.default);
 //# sourceMappingURL=fixtures.js.map

package/lib/molecule/questions/free-text/test/fixtures.js.map

@@ -1 +1 @@
-{"version":3,"sources":["../../../../../src/molecule/questions/free-text/test/fixtures.js"],"names":["t","pass","MoleculeQuestionsFreeText","propTypes","value","key","not","undefined","renderComponentMacro","fixtureDefault","fixtureWithDefaultValue"],"mappings":";;AAAA;;AACA;;AACA;;AACA;;AACA;;AACA;;;;AAEA,kBAAK,6EAAL,EAAoFA,CAAC,IAAI;AACvFA,EAAAA,CAAC,CAACC,IAAF;AACA,wBAAQC,UAA0BC,SAAlC,EAA6C,CAACC,KAAD,EAAQC,GAAR,KAAgB;AAC3DL,IAAAA,CAAC,CAACM,GAAF,CAAMF,KAAN,EAAaG,SAAb,EAAyB,uEAAsEF,GAAI,mEAAnG;AACD,GAFD;AAGD,CALD;AAOA,kBAAK,8EAAL,EAAqFG,wBAArF,EAA2GN,SAA3G,EAAsIO,gBAAtI;AACA,kBAAK,uFAAL,EAA8FD,wBAA9F,EAAoHN,SAApH,EAA+IQ,yBAA/I","sourcesContent":["import test from 'ava';\nimport forEach from 'lodash/forEach';\nimport renderComponentMacro from '../../../../test/helpers/render-component';\nimport MoleculeQuestionsFreeText from '..';\nimport fixtureDefault from './fixtures/default';\nimport fixtureWithDefaultValue from './fixtures/with-default-value';\n\ntest('MoleculeQuestions › MoleculeQuestionsFreeText > should have valid propTypes', t => {\n  t.pass();\n  forEach(MoleculeQuestionsFreeText.propTypes, (value, key) => {\n    t.not(value, undefined, `PropType for \"MoleculeQuestions.MoleculeQuestionsFreeText.propTypes.${key}\" may not be undefined. Did you mistype the propTypes definition?`);\n  });\n});\n\ntest('MoleculeQuestions › MoleculeQuestionsFreeText › Default › should be rendered', renderComponentMacro, MoleculeQuestionsFreeText, fixtureDefault);\ntest('MoleculeQuestions › MoleculeQuestionsFreeText › WithDefaultValue › should be rendered', renderComponentMacro, MoleculeQuestionsFreeText, fixtureWithDefaultValue);\n"],"file":"fixtures.js"}
+{"version":3,"sources":["../../../../../src/molecule/questions/free-text/test/fixtures.js"],"names":["t","pass","MoleculeQuestionsFreeText","propTypes","value","key","not","undefined","renderComponentMacro","fixtureDefault","fixtureWithValueOnChange","fixtureWithValue"],"mappings":";;AAAA;;AACA;;AACA;;AACA;;AACA;;AACA;;AACA;;;;AAEA,kBAAK,6EAAL,EAAoFA,CAAC,IAAI;AACvFA,EAAAA,CAAC,CAACC,IAAF;AACA,wBAAQC,UAA0BC,SAAlC,EAA6C,CAACC,KAAD,EAAQC,GAAR,KAAgB;AAC3DL,IAAAA,CAAC,CAACM,GAAF,CAAMF,KAAN,EAAaG,SAAb,EAAyB,uEAAsEF,GAAI,mEAAnG;AACD,GAFD;AAGD,CALD;AAOA,kBAAK,8EAAL,EAAqFG,wBAArF,EAA2GN,SAA3G,EAAsIO,gBAAtI;AACA,kBAAK,wFAAL,EAA+FD,wBAA/F,EAAqHN,SAArH,EAAgJQ,0BAAhJ;AACA,kBAAK,gFAAL,EAAuFF,wBAAvF,EAA6GN,SAA7G,EAAwIS,kBAAxI","sourcesContent":["import test from 'ava';\nimport forEach from 'lodash/forEach';\nimport renderComponentMacro from '../../../../test/helpers/render-component';\nimport MoleculeQuestionsFreeText from '..';\nimport fixtureDefault from './fixtures/default';\nimport fixtureWithValueOnChange from './fixtures/with-value-on-change';\nimport fixtureWithValue from './fixtures/with-value';\n\ntest('MoleculeQuestions › MoleculeQuestionsFreeText > should have valid propTypes', t => {\n  t.pass();\n  forEach(MoleculeQuestionsFreeText.propTypes, (value, key) => {\n    t.not(value, undefined, `PropType for \"MoleculeQuestions.MoleculeQuestionsFreeText.propTypes.${key}\" may not be undefined. Did you mistype the propTypes definition?`);\n  });\n});\n\ntest('MoleculeQuestions › MoleculeQuestionsFreeText › Default › should be rendered', renderComponentMacro, MoleculeQuestionsFreeText, fixtureDefault);\ntest('MoleculeQuestions › MoleculeQuestionsFreeText › WithValueOnChange › should be rendered', renderComponentMacro, MoleculeQuestionsFreeText, fixtureWithValueOnChange);\ntest('MoleculeQuestions › MoleculeQuestionsFreeText › WithValue › should be rendered', renderComponentMacro, MoleculeQuestionsFreeText, fixtureWithValue);\n"],"file":"fixtures.js"}

package/lib/molecule/questions/free-text/test/free-text.js

@@ -0,0 +1,119 @@
+"use strict";
+
+var _identity2 = _interopRequireDefault(require("lodash/fp/identity"));
+
+var _browserEnv = _interopRequireDefault(require("browser-env"));
+
+var _ava = _interopRequireDefault(require("ava"));
+
+var _react = _interopRequireDefault(require("react"));
+
+var _enzyme = require("enzyme");
+
+var _enzymeAdapterReact = _interopRequireDefault(require("enzyme-adapter-react-16"));
+
+var _ = _interopRequireDefault(require(".."));
+
+var _default = _interopRequireDefault(require("./fixtures/default"));
+
+var _withValue = _interopRequireDefault(require("./fixtures/with-value"));
+
+var _withValueOnChange = _interopRequireDefault(require("./fixtures/with-value-on-change"));
+
+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); }
+
+(0, _browserEnv.default)();
+(0, _enzyme.configure)({
+  adapter: new _enzymeAdapterReact.default()
+});
+const translate = _identity2.default;
+(0, _ava.default)('onInput should be reachable and replace onChange, onChange should not trigger value changes, should use aria-label', t => {
+  t.plan(7);
+  let onInputWasTriggered = false;
+
+  const props = _extends(_extends({}, _withValueOnChange.default.props), {}, {
+    onChange: value => {
+      onInputWasTriggered = true;
+      t.is(value, 'new value');
+    }
+  });
+
+  const wrapper = (0, _enzyme.shallow)( /*#__PURE__*/_react.default.createElement(_.default, props), {
+    context: {
+      translate
+    }
+  });
+  let freeText = wrapper.find('[data-name="free-text-input"]');
+  t.true(freeText.at(0).exists());
+  t.is(freeText.at(0).props()['aria-label'], 'aria input');
+  t.is(freeText.at(0).props().value, 'plop!'); // should not trigger a value change with onChange
+
+  freeText.at(0).simulate('change', {
+    target: {
+      value: 'new value'
+    }
+  });
+  wrapper.update(); // should not update the trigger flag with onChange
+
+  t.false(onInputWasTriggered);
+  freeText.at(0).simulate('input', {
+    target: {
+      value: 'new value'
+    }
+  });
+  wrapper.update();
+  freeText = wrapper.find('[data-name="free-text-input"]');
+  t.true(onInputWasTriggered);
+  t.pass();
+});
+(0, _ava.default)('should set: boxShadow (hover & not hovered variants) && color for the input if a value is provided', t => {
+  const wrapper = (0, _enzyme.mount)( /*#__PURE__*/_react.default.createElement(_.default, _withValue.default.props));
+  let freeTextWrapper = wrapper.find('[data-name="freeText"]');
+  t.true(freeTextWrapper.at(0).exists());
+  t.deepEqual(freeTextWrapper.at(0).props().style, {
+    boxShadow: '0 4px 16px rgba(0, 176, 255, 0.12)'
+  });
+  let freeText = wrapper.find('[data-name="free-text-input"]');
+  t.true(freeText.at(0).exists());
+  t.is(freeText.at(0).props().value, 'plop!');
+  t.deepEqual(freeTextWrapper.at(0).props().style, {
+    boxShadow: '0 4px 16px rgba(0, 176, 255, 0.12)'
+  });
+  freeTextWrapper.simulate('mouseover');
+  wrapper.update();
+  freeText = wrapper.find('[data-name="free-text-input"]');
+  freeTextWrapper = wrapper.find('[data-name="freeText"]'); // hovered
+
+  t.deepEqual(freeText.at(0).props().style, {
+    boxShadow: '0 4px 16px rgba(0, 176, 255, 0.2)',
+    color: '#00B0FF'
+  });
+  t.deepEqual(freeTextWrapper.at(0).props().style, {
+    boxShadow: 'none'
+  });
+  freeTextWrapper.simulate('mouseleave');
+  wrapper.update();
+  freeText = wrapper.find('[data-name="free-text-input"]');
+  t.deepEqual(freeText.at(0).props().style, {
+    boxShadow: '0 4px 16px rgba(0, 176, 255, 0.12)',
+    color: '#00B0FF'
+  });
+  t.pass();
+});
+(0, _ava.default)('should use value as default aria-label if no aria-label is provided', t => {
+  const wrapper = (0, _enzyme.mount)( /*#__PURE__*/_react.default.createElement(_.default, _withValue.default.props));
+  const freeText = wrapper.find('[data-name="free-text-input"]');
+  t.true(freeText.at(0).exists());
+  t.is(freeText.at(0).props()['aria-label'], 'plop!');
+  t.pass();
+});
+(0, _ava.default)('should use placeholder as default aria-label if no aria-label is provided and no value is present', t => {
+  const wrapper = (0, _enzyme.mount)( /*#__PURE__*/_react.default.createElement(_.default, _default.default.props));
+  const freeText = wrapper.find('[data-name="free-text-input"]');
+  t.true(freeText.at(0).exists());
+  t.is(freeText.at(0).props()['aria-label'], 'Type your answer here');
+  t.pass();
+});
+//# sourceMappingURL=free-text.js.map

package/lib/molecule/questions/free-text/test/free-text.js.map

@@ -0,0 +1 @@
+{"version":3,"sources":["../../../../../src/molecule/questions/free-text/test/free-text.js"],"names":["adapter","Adapter","translate","t","plan","onInputWasTriggered","props","withValueOnChangeFixture","onChange","value","is","wrapper","context","freeText","find","true","at","exists","simulate","target","update","false","pass","withValueFixture","freeTextWrapper","deepEqual","style","boxShadow","color","defaultFixture"],"mappings":";;;;AAAA;;AACA;;AACA;;AACA;;AAEA;;AACA;;AACA;;AACA;;AACA;;;;;;AAEA;AACA,uBAAU;AAACA,EAAAA,OAAO,EAAE,IAAIC,2BAAJ;AAAV,CAAV;AACA,MAAMC,SAAS,qBAAf;AAEA,kBAAK,oHAAL,EAA2HC,CAAC,IAAI;AAC9HA,EAAAA,CAAC,CAACC,IAAF,CAAO,CAAP;AACA,MAAIC,mBAAmB,GAAG,KAA1B;;AACA,QAAMC,KAAK,yBACNC,2BAAyBD,KADnB;AAETE,IAAAA,QAAQ,EAAEC,KAAK,IAAI;AACjBJ,MAAAA,mBAAmB,GAAG,IAAtB;AACAF,MAAAA,CAAC,CAACO,EAAF,CAAKD,KAAL,EAAY,WAAZ;AACD;AALQ,IAAX;;AAOA,QAAME,OAAO,GAAG,mCAAQ,6BAAC,SAAD,EAAcL,KAAd,CAAR,EAAiC;AAC/CM,IAAAA,OAAO,EAAE;AAACV,MAAAA;AAAD;AADsC,GAAjC,CAAhB;AAGA,MAAIW,QAAQ,GAAGF,OAAO,CAACG,IAAR,CAAa,+BAAb,CAAf;AACAX,EAAAA,CAAC,CAACY,IAAF,CAAOF,QAAQ,CAACG,EAAT,CAAY,CAAZ,EAAeC,MAAf,EAAP;AACAd,EAAAA,CAAC,CAACO,EAAF,CAAKG,QAAQ,CAACG,EAAT,CAAY,CAAZ,EAAeV,KAAf,GAAuB,YAAvB,CAAL,EAA2C,YAA3C;AACAH,EAAAA,CAAC,CAACO,EAAF,CAAKG,QAAQ,CAACG,EAAT,CAAY,CAAZ,EAAeV,KAAf,GAAuBG,KAA5B,EAAmC,OAAnC,EAhB8H,CAiB9H;;AACAI,EAAAA,QAAQ,CAACG,EAAT,CAAY,CAAZ,EAAeE,QAAf,CAAwB,QAAxB,EAAkC;AAACC,IAAAA,MAAM,EAAE;AAACV,MAAAA,KAAK,EAAE;AAAR;AAAT,GAAlC;AACAE,EAAAA,OAAO,CAACS,MAAR,GAnB8H,CAoB9H;;AACAjB,EAAAA,CAAC,CAACkB,KAAF,CAAQhB,mBAAR;AACAQ,EAAAA,QAAQ,CAACG,EAAT,CAAY,CAAZ,EAAeE,QAAf,CAAwB,OAAxB,EAAiC;AAACC,IAAAA,MAAM,EAAE;AAACV,MAAAA,KAAK,EAAE;AAAR;AAAT,GAAjC;AACAE,EAAAA,OAAO,CAACS,MAAR;AACAP,EAAAA,QAAQ,GAAGF,OAAO,CAACG,IAAR,CAAa,+BAAb,CAAX;AACAX,EAAAA,CAAC,CAACY,IAAF,CAAOV,mBAAP;AACAF,EAAAA,CAAC,CAACmB,IAAF;AACD,CA3BD;AA6BA,kBAAK,oGAAL,EAA2GnB,CAAC,IAAI;AAC9G,QAAMQ,OAAO,GAAG,iCAAM,6BAAC,SAAD,EAAcY,mBAAiBjB,KAA/B,CAAN,CAAhB;AACA,MAAIkB,eAAe,GAAGb,OAAO,CAACG,IAAR,CAAa,wBAAb,CAAtB;AACAX,EAAAA,CAAC,CAACY,IAAF,CAAOS,eAAe,CAACR,EAAhB,CAAmB,CAAnB,EAAsBC,MAAtB,EAAP;AACAd,EAAAA,CAAC,CAACsB,SAAF,CAAYD,eAAe,CAACR,EAAhB,CAAmB,CAAnB,EAAsBV,KAAtB,GAA8BoB,KAA1C,EAAiD;AAC/CC,IAAAA,SAAS,EAAE;AADoC,GAAjD;AAIA,MAAId,QAAQ,GAAGF,OAAO,CAACG,IAAR,CAAa,+BAAb,CAAf;AACAX,EAAAA,CAAC,CAACY,IAAF,CAAOF,QAAQ,CAACG,EAAT,CAAY,CAAZ,EAAeC,MAAf,EAAP;AACAd,EAAAA,CAAC,CAACO,EAAF,CAAKG,QAAQ,CAACG,EAAT,CAAY,CAAZ,EAAeV,KAAf,GAAuBG,KAA5B,EAAmC,OAAnC;AACAN,EAAAA,CAAC,CAACsB,SAAF,CAAYD,eAAe,CAACR,EAAhB,CAAmB,CAAnB,EAAsBV,KAAtB,GAA8BoB,KAA1C,EAAiD;AAC/CC,IAAAA,SAAS,EAAE;AADoC,GAAjD;AAGAH,EAAAA,eAAe,CAACN,QAAhB,CAAyB,WAAzB;AACAP,EAAAA,OAAO,CAACS,MAAR;AAEAP,EAAAA,QAAQ,GAAGF,OAAO,CAACG,IAAR,CAAa,+BAAb,CAAX;AACAU,EAAAA,eAAe,GAAGb,OAAO,CAACG,IAAR,CAAa,wBAAb,CAAlB,CAlB8G,CAmB9G;;AACAX,EAAAA,CAAC,CAACsB,SAAF,CAAYZ,QAAQ,CAACG,EAAT,CAAY,CAAZ,EAAeV,KAAf,GAAuBoB,KAAnC,EAA0C;AACxCC,IAAAA,SAAS,EAAE,mCAD6B;AAExCC,IAAAA,KAAK,EAAE;AAFiC,GAA1C;AAIAzB,EAAAA,CAAC,CAACsB,SAAF,CAAYD,eAAe,CAACR,EAAhB,CAAmB,CAAnB,EAAsBV,KAAtB,GAA8BoB,KAA1C,EAAiD;AAC/CC,IAAAA,SAAS,EAAE;AADoC,GAAjD;AAIAH,EAAAA,eAAe,CAACN,QAAhB,CAAyB,YAAzB;AACAP,EAAAA,OAAO,CAACS,MAAR;AACAP,EAAAA,QAAQ,GAAGF,OAAO,CAACG,IAAR,CAAa,+BAAb,CAAX;AACAX,EAAAA,CAAC,CAACsB,SAAF,CAAYZ,QAAQ,CAACG,EAAT,CAAY,CAAZ,EAAeV,KAAf,GAAuBoB,KAAnC,EAA0C;AACxCC,IAAAA,SAAS,EAAE,oCAD6B;AAExCC,IAAAA,KAAK,EAAE;AAFiC,GAA1C;AAKAzB,EAAAA,CAAC,CAACmB,IAAF;AACD,CArCD;AAuCA,kBAAK,qEAAL,EAA4EnB,CAAC,IAAI;AAC/E,QAAMQ,OAAO,GAAG,iCAAM,6BAAC,SAAD,EAAcY,mBAAiBjB,KAA/B,CAAN,CAAhB;AACA,QAAMO,QAAQ,GAAGF,OAAO,CAACG,IAAR,CAAa,+BAAb,CAAjB;AACAX,EAAAA,CAAC,CAACY,IAAF,CAAOF,QAAQ,CAACG,EAAT,CAAY,CAAZ,EAAeC,MAAf,EAAP;AACAd,EAAAA,CAAC,CAACO,EAAF,CAAKG,QAAQ,CAACG,EAAT,CAAY,CAAZ,EAAeV,KAAf,GAAuB,YAAvB,CAAL,EAA2C,OAA3C;AACAH,EAAAA,CAAC,CAACmB,IAAF;AACD,CAND;AAQA,kBAAK,mGAAL,EAA0GnB,CAAC,IAAI;AAC7G,QAAMQ,OAAO,GAAG,iCAAM,6BAAC,SAAD,EAAckB,iBAAevB,KAA7B,CAAN,CAAhB;AACA,QAAMO,QAAQ,GAAGF,OAAO,CAACG,IAAR,CAAa,+BAAb,CAAjB;AACAX,EAAAA,CAAC,CAACY,IAAF,CAAOF,QAAQ,CAACG,EAAT,CAAY,CAAZ,EAAeC,MAAf,EAAP;AACAd,EAAAA,CAAC,CAACO,EAAF,CAAKG,QAAQ,CAACG,EAAT,CAAY,CAAZ,EAAeV,KAAf,GAAuB,YAAvB,CAAL,EAA2C,uBAA3C;AACAH,EAAAA,CAAC,CAACmB,IAAF;AACD,CAND","sourcesContent":["import browserEnv from 'browser-env';\nimport test from 'ava';\nimport React from 'react';\nimport {shallow, mount, configure} from 'enzyme';\nimport {identity} from 'lodash/fp';\nimport Adapter from 'enzyme-adapter-react-16';\nimport FreeText from '..';\nimport defaultFixture from './fixtures/default';\nimport withValueFixture from './fixtures/with-value';\nimport withValueOnChangeFixture from './fixtures/with-value-on-change';\n\nbrowserEnv();\nconfigure({adapter: new Adapter()});\nconst translate = identity;\n\ntest('onInput should be reachable and replace onChange, onChange should not trigger value changes, should use aria-label', t => {\n  t.plan(7);\n  let onInputWasTriggered = false;\n  const props = {\n    ...withValueOnChangeFixture.props,\n    onChange: value => {\n      onInputWasTriggered = true;\n      t.is(value, 'new value');\n    }\n  };\n  const wrapper = shallow(<FreeText {...props} />, {\n    context: {translate}\n  });\n  let freeText = wrapper.find('[data-name=\"free-text-input\"]');\n  t.true(freeText.at(0).exists());\n  t.is(freeText.at(0).props()['aria-label'], 'aria input');\n  t.is(freeText.at(0).props().value, 'plop!');\n  // should not trigger a value change with onChange\n  freeText.at(0).simulate('change', {target: {value: 'new value'}});\n  wrapper.update();\n  // should not update the trigger flag with onChange\n  t.false(onInputWasTriggered);\n  freeText.at(0).simulate('input', {target: {value: 'new value'}});\n  wrapper.update();\n  freeText = wrapper.find('[data-name=\"free-text-input\"]');\n  t.true(onInputWasTriggered);\n  t.pass();\n});\n\ntest('should set: boxShadow (hover & not hovered variants) && color for the input if a value is provided', t => {\n  const wrapper = mount(<FreeText {...withValueFixture.props} />);\n  let freeTextWrapper = wrapper.find('[data-name=\"freeText\"]');\n  t.true(freeTextWrapper.at(0).exists());\n  t.deepEqual(freeTextWrapper.at(0).props().style, {\n    boxShadow: '0 4px 16px rgba(0, 176, 255, 0.12)'\n  });\n\n  let freeText = wrapper.find('[data-name=\"free-text-input\"]');\n  t.true(freeText.at(0).exists());\n  t.is(freeText.at(0).props().value, 'plop!');\n  t.deepEqual(freeTextWrapper.at(0).props().style, {\n    boxShadow: '0 4px 16px rgba(0, 176, 255, 0.12)'\n  });\n  freeTextWrapper.simulate('mouseover');\n  wrapper.update();\n\n  freeText = wrapper.find('[data-name=\"free-text-input\"]');\n  freeTextWrapper = wrapper.find('[data-name=\"freeText\"]');\n  // hovered\n  t.deepEqual(freeText.at(0).props().style, {\n    boxShadow: '0 4px 16px rgba(0, 176, 255, 0.2)',\n    color: '#00B0FF'\n  });\n  t.deepEqual(freeTextWrapper.at(0).props().style, {\n    boxShadow: 'none'\n  });\n\n  freeTextWrapper.simulate('mouseleave');\n  wrapper.update();\n  freeText = wrapper.find('[data-name=\"free-text-input\"]');\n  t.deepEqual(freeText.at(0).props().style, {\n    boxShadow: '0 4px 16px rgba(0, 176, 255, 0.12)',\n    color: '#00B0FF'\n  });\n\n  t.pass();\n});\n\ntest('should use value as default aria-label if no aria-label is provided', t => {\n  const wrapper = mount(<FreeText {...withValueFixture.props} />);\n  const freeText = wrapper.find('[data-name=\"free-text-input\"]');\n  t.true(freeText.at(0).exists());\n  t.is(freeText.at(0).props()['aria-label'], 'plop!');\n  t.pass();\n});\n\ntest('should use placeholder as default aria-label if no aria-label is provided and no value is present', t => {\n  const wrapper = mount(<FreeText {...defaultFixture.props} />);\n  const freeText = wrapper.find('[data-name=\"free-text-input\"]');\n  t.true(freeText.at(0).exists());\n  t.is(freeText.at(0).props()['aria-label'], 'Type your answer here');\n  t.pass();\n});\n"],"file":"free-text.js"}

package/lib/molecule/questions/qcm/index.js

@@ -3,59 +3,79 @@
 exports.__esModule = true;
 exports.default = void 0;
 
-var _maxBy2 = _interopRequireDefault(require("lodash/fp/maxBy"));
-
-var _getOr2 = _interopRequireDefault(require("lodash/fp/getOr"));
-
-var _react = _interopRequireDefault(require("react"));
+var _react = _interopRequireWildcard(require("react"));
 
 var _classnames = _interopRequireDefault(require("classnames"));
 
 var _propTypes = _interopRequireDefault(require("prop-types"));
 
+var _getOr = _interopRequireDefault(require("lodash/fp/getOr"));
+
+var _maxBy = _interopRequireDefault(require("lodash/fp/maxBy"));
+
 var _provider = _interopRequireDefault(require("../../../atom/provider"));
 
 var _style = require("../../../atom/label/style.css");
 
+var _getShadowBoxColorFromPrimary = require("../../../util/get-shadow-box-color-from-primary");
+
 var _style2 = _interopRequireDefault(require("./style.css"));
 
 function _interopRequireDefault(obj) { return obj && obj.__esModule ? obj : { default: obj }; }
 
+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 _extends() { _extends = Object.assign || function (target) { for (var i = 1; i < arguments.length; i++) { var source = arguments[i]; for (var key in source) { if (Object.prototype.hasOwnProperty.call(source, key)) { target[key] = source[key]; } } } return target; }; return _extends.apply(this, arguments); }
+
 const QCM = (props, context) => {
   const {
     answers
   } = props;
-  const longestAnswer = (0, _maxBy2.default)(({
+  const longestAnswer = (0, _maxBy.default)(({
     title
   }) => title.length, answers);
-  const answersViews = answers.map((answer, key) => {
+  const {
+    skin
+  } = context;
+  const primarySkinColor = (0, _getOr.default)('#00B0FF', 'common.primary', skin);
+  const answersViews = (0, _react.useMemo)(() => answers.map((answer, key) => {
     const {
       onClick,
       title,
-      selected
+      selected,
+      'aria-label': ariaLabel
     } = answer;
-    const {
-      skin
-    } = context;
-    const primarySkinColor = (0, _getOr2.default)('#00B0FF', 'common.primary', skin);
-    const selectedStyle = selected ? {
-      backgroundColor: primarySkinColor,
-      borderColor: primarySkinColor
-    } : null;
-    const className = (0, _classnames.default)(longestAnswer === answer ? _style2.default.longestAnswer : _style2.default.answer, selected ? _style2.default.selectedAnswer : _style2.default.unselectedAnswer);
+    const longAnswerClass = longestAnswer.title === title ? _style2.default.longestAnswer : _style2.default.answer;
+    const selectedAnswerClass = selected ? _style2.default.selectedAnswer : _style2.default.unselectedAnswer;
     return /*#__PURE__*/_react.default.createElement("div", {
       "data-name": "answer",
-      className: (0, _classnames.default)(className, _style.innerHTML),
+      "aria-label": ariaLabel || title,
+      className: (0, _classnames.default)(longAnswerClass, _style.innerHTML, selectedAnswerClass),
       onClick: onClick,
-      style: selectedStyle,
+      style: _extends({}, selected && {
+        boxShadow: `0 4px 16px ${(0, _getShadowBoxColorFromPrimary.getShadowBoxColorFromPrimary)(primarySkinColor)}`
+      }),
       "data-selected": selected,
-      key: key // eslint-disable-next-line react/no-danger
+      key: key
+    }, /*#__PURE__*/_react.default.createElement("div", {
+      "data-name": "answer-background",
+      style: {
+        backgroundColor: selected ? primarySkinColor : '#F4F4F5'
+        /* cm_grey_75 */
+
+      },
+      className: _style2.default.background
+    }), /*#__PURE__*/_react.default.createElement("span", {
+      "data-name": "answer-label",
+      className: _style2.default.answerText // eslint-disable-next-line react/no-danger
       ,
       dangerouslySetInnerHTML: {
         __html: title
       }
-    });
-  });
+    }));
+  }), [answers, longestAnswer, primarySkinColor]);
   return /*#__PURE__*/_react.default.createElement("div", {
     "data-name": "qcm",
     className: _style2.default.wrapper
@@ -69,7 +89,8 @@ QCM.propTypes = process.env.NODE_ENV !== "production" ? {
   answers: _propTypes.default.arrayOf(_propTypes.default.shape({
     title: _propTypes.default.string,
     selected: _propTypes.default.bool,
-    onClick: _propTypes.default.func
+    onClick: _propTypes.default.func,
+    'aria-label': _propTypes.default.string
   }))
 } : {};
 var _default = QCM;

package/lib/molecule/questions/qcm/index.js.map

@@ -1 +1 @@
-{"version":3,"sources":["../../../../src/molecule/questions/qcm/index.js"],"names":["QCM","props","context","answers","longestAnswer","title","length","answersViews","map","answer","key","onClick","selected","skin","primarySkinColor","selectedStyle","backgroundColor","borderColor","className","style","selectedAnswer","unselectedAnswer","innerHTML","__html","wrapper","contextTypes","Provider","childContextTypes","propTypes","PropTypes","arrayOf","shape","string","bool","func"],"mappings":";;;;;;;;;AAAA;;AACA;;AACA;;AAEA;;AACA;;AACA;;;;AAEA,MAAMA,GAAG,GAAG,CAACC,KAAD,EAAQC,OAAR,KAAoB;AAC9B,QAAM;AAACC,IAAAA;AAAD,MAAYF,KAAlB;AACA,QAAMG,aAAa,GAAG,qBAAM,CAAC;AAACC,IAAAA;AAAD,GAAD,KAAaA,KAAK,CAACC,MAAzB,EAAiCH,OAAjC,CAAtB;AAEA,QAAMI,YAAY,GAAGJ,OAAO,CAACK,GAAR,CAAY,CAACC,MAAD,EAASC,GAAT,KAAiB;AAChD,UAAM;AAACC,MAAAA,OAAD;AAAUN,MAAAA,KAAV;AAAiBO,MAAAA;AAAjB,QAA6BH,MAAnC;AACA,UAAM;AAACI,MAAAA;AAAD,QAASX,OAAf;AAEA,UAAMY,gBAAgB,GAAG,qBAAM,SAAN,EAAiB,gBAAjB,EAAmCD,IAAnC,CAAzB;AACA,UAAME,aAAa,GAAGH,QAAQ,GAC1B;AAACI,MAAAA,eAAe,EAAEF,gBAAlB;AAAoCG,MAAAA,WAAW,EAAEH;AAAjD,KAD0B,GAE1B,IAFJ;AAIA,UAAMI,SAAS,GAAG,yBAChBd,aAAa,KAAKK,MAAlB,GAA2BU,gBAAMf,aAAjC,GAAiDe,gBAAMV,MADvC,EAEhBG,QAAQ,GAAGO,gBAAMC,cAAT,GAA0BD,gBAAME,gBAFxB,CAAlB;AAKA,wBACE;AACE,mBAAU,QADZ;AAEE,MAAA,SAAS,EAAE,yBAAWH,SAAX,EAAsBI,gBAAtB,CAFb;AAGE,MAAA,OAAO,EAAEX,OAHX;AAIE,MAAA,KAAK,EAAEI,aAJT;AAKE,uBAAeH,QALjB;AAME,MAAA,GAAG,EAAEF,GANP,CAOE;AAPF;AAQE,MAAA,uBAAuB,EAAE;AAACa,QAAAA,MAAM,EAAElB;AAAT;AAR3B,MADF;AAYD,GA1BoB,CAArB;AA4BA,sBACE;AAAK,iBAAU,KAAf;AAAqB,IAAA,SAAS,EAAEc,gBAAMK;AAAtC,KACGjB,YADH,CADF;AAKD,CArCD;;AAuCAP,GAAG,CAACyB,YAAJ,GAAmB;AACjBZ,EAAAA,IAAI,EAAEa,kBAASC,iBAAT,CAA2Bd;AADhB,CAAnB;AAIAb,GAAG,CAAC4B,SAAJ,2CAAgB;AACdzB,EAAAA,OAAO,EAAE0B,mBAAUC,OAAV,CACPD,mBAAUE,KAAV,CAAgB;AACd1B,IAAAA,KAAK,EAAEwB,mBAAUG,MADH;AAEdpB,IAAAA,QAAQ,EAAEiB,mBAAUI,IAFN;AAGdtB,IAAAA,OAAO,EAAEkB,mBAAUK;AAHL,GAAhB,CADO;AADK,CAAhB;eAUelC,G","sourcesContent":["import React from 'react';\nimport classnames from 'classnames';\nimport PropTypes from 'prop-types';\nimport {getOr, maxBy} from 'lodash/fp';\nimport Provider from '../../../atom/provider';\nimport {innerHTML} from '../../../atom/label/style.css';\nimport style from './style.css';\n\nconst QCM = (props, context) => {\n  const {answers} = props;\n  const longestAnswer = maxBy(({title}) => title.length, answers);\n\n  const answersViews = answers.map((answer, key) => {\n    const {onClick, title, selected} = answer;\n    const {skin} = context;\n\n    const primarySkinColor = getOr('#00B0FF', 'common.primary', skin);\n    const selectedStyle = selected\n      ? {backgroundColor: primarySkinColor, borderColor: primarySkinColor}\n      : null;\n\n    const className = classnames(\n      longestAnswer === answer ? style.longestAnswer : style.answer,\n      selected ? style.selectedAnswer : style.unselectedAnswer\n    );\n\n    return (\n      <div\n        data-name=\"answer\"\n        className={classnames(className, innerHTML)}\n        onClick={onClick}\n        style={selectedStyle}\n        data-selected={selected}\n        key={key}\n        // eslint-disable-next-line react/no-danger\n        dangerouslySetInnerHTML={{__html: title}}\n      />\n    );\n  });\n\n  return (\n    <div data-name=\"qcm\" className={style.wrapper}>\n      {answersViews}\n    </div>\n  );\n};\n\nQCM.contextTypes = {\n  skin: Provider.childContextTypes.skin\n};\n\nQCM.propTypes = {\n  answers: PropTypes.arrayOf(\n    PropTypes.shape({\n      title: PropTypes.string,\n      selected: PropTypes.bool,\n      onClick: PropTypes.func\n    })\n  )\n};\n\nexport default QCM;\n"],"file":"index.js"}
+{"version":3,"sources":["../../../../src/molecule/questions/qcm/index.js"],"names":["QCM","props","context","answers","longestAnswer","title","length","skin","primarySkinColor","answersViews","map","answer","key","onClick","selected","ariaLabel","longAnswerClass","style","selectedAnswerClass","selectedAnswer","unselectedAnswer","innerHTML","boxShadow","backgroundColor","background","answerText","__html","wrapper","contextTypes","Provider","childContextTypes","propTypes","PropTypes","arrayOf","shape","string","bool","func"],"mappings":";;;;;AAAA;;AACA;;AACA;;AACA;;AACA;;AACA;;AACA;;AACA;;AACA;;;;;;;;;;AAEA,MAAMA,GAAG,GAAG,CAACC,KAAD,EAAQC,OAAR,KAAoB;AAC9B,QAAM;AAACC,IAAAA;AAAD,MAAYF,KAAlB;AACA,QAAMG,aAAa,GAAG,oBAAM,CAAC;AAACC,IAAAA;AAAD,GAAD,KAAaA,KAAK,CAACC,MAAzB,EAAiCH,OAAjC,CAAtB;AACA,QAAM;AAACI,IAAAA;AAAD,MAASL,OAAf;AACA,QAAMM,gBAAgB,GAAG,oBAAM,SAAN,EAAiB,gBAAjB,EAAmCD,IAAnC,CAAzB;AAEA,QAAME,YAAY,GAAG,oBACnB,MACEN,OAAO,CAACO,GAAR,CAAY,CAACC,MAAD,EAASC,GAAT,KAAiB;AAC3B,UAAM;AAACC,MAAAA,OAAD;AAAUR,MAAAA,KAAV;AAAiBS,MAAAA,QAAjB;AAA2B,oBAAcC;AAAzC,QAAsDJ,MAA5D;AACA,UAAMK,eAAe,GAAGZ,aAAa,CAACC,KAAd,KAAwBA,KAAxB,GAAgCY,gBAAMb,aAAtC,GAAsDa,gBAAMN,MAApF;AACA,UAAMO,mBAAmB,GAAGJ,QAAQ,GAAGG,gBAAME,cAAT,GAA0BF,gBAAMG,gBAApE;AAEA,wBACE;AACE,mBAAU,QADZ;AAEE,oBAAYL,SAAS,IAAIV,KAF3B;AAGE,MAAA,SAAS,EAAE,yBAAWW,eAAX,EAA4BK,gBAA5B,EAAuCH,mBAAvC,CAHb;AAIE,MAAA,OAAO,EAAEL,OAJX;AAKE,MAAA,KAAK,eACCC,QAAQ,IAAI;AACdQ,QAAAA,SAAS,EAAG,cAAa,gEAA6Bd,gBAA7B,CAA+C;AAD1D,OADb,CALP;AAUE,uBAAeM,QAVjB;AAWE,MAAA,GAAG,EAAEF;AAXP,oBAaE;AACE,mBAAU,mBADZ;AAEE,MAAA,KAAK,EAAE;AAACW,QAAAA,eAAe,EAAET,QAAQ,GAAGN,gBAAH,GAAsB;AAAU;;AAA1D,OAFT;AAGE,MAAA,SAAS,EAAES,gBAAMO;AAHnB,MAbF,eAkBE;AACE,mBAAU,cADZ;AAEE,MAAA,SAAS,EAAEP,gBAAMQ,UAFnB,CAGE;AAHF;AAIE,MAAA,uBAAuB,EAAE;AAACC,QAAAA,MAAM,EAAErB;AAAT;AAJ3B,MAlBF,CADF;AA2BD,GAhCD,CAFiB,EAmCnB,CAACF,OAAD,EAAUC,aAAV,EAAyBI,gBAAzB,CAnCmB,CAArB;AAsCA,sBACE;AAAK,iBAAU,KAAf;AAAqB,IAAA,SAAS,EAAES,gBAAMU;AAAtC,KACGlB,YADH,CADF;AAKD,CAjDD;;AAmDAT,GAAG,CAAC4B,YAAJ,GAAmB;AACjBrB,EAAAA,IAAI,EAAEsB,kBAASC,iBAAT,CAA2BvB;AADhB,CAAnB;AAIAP,GAAG,CAAC+B,SAAJ,2CAAgB;AACd5B,EAAAA,OAAO,EAAE6B,mBAAUC,OAAV,CACPD,mBAAUE,KAAV,CAAgB;AACd7B,IAAAA,KAAK,EAAE2B,mBAAUG,MADH;AAEdrB,IAAAA,QAAQ,EAAEkB,mBAAUI,IAFN;AAGdvB,IAAAA,OAAO,EAAEmB,mBAAUK,IAHL;AAId,kBAAcL,mBAAUG;AAJV,GAAhB,CADO;AADK,CAAhB;eAWenC,G","sourcesContent":["import React, {useMemo} from 'react';\nimport classnames from 'classnames';\nimport PropTypes from 'prop-types';\nimport getOr from 'lodash/fp/getOr';\nimport maxBy from 'lodash/fp/maxBy';\nimport Provider from '../../../atom/provider';\nimport {innerHTML} from '../../../atom/label/style.css';\nimport {getShadowBoxColorFromPrimary} from '../../../util/get-shadow-box-color-from-primary';\nimport style from './style.css';\n\nconst QCM = (props, context) => {\n  const {answers} = props;\n  const longestAnswer = maxBy(({title}) => title.length, answers);\n  const {skin} = context;\n  const primarySkinColor = getOr('#00B0FF', 'common.primary', skin);\n\n  const answersViews = useMemo(\n    () =>\n      answers.map((answer, key) => {\n        const {onClick, title, selected, 'aria-label': ariaLabel} = answer;\n        const longAnswerClass = longestAnswer.title === title ? style.longestAnswer : style.answer;\n        const selectedAnswerClass = selected ? style.selectedAnswer : style.unselectedAnswer;\n\n        return (\n          <div\n            data-name=\"answer\"\n            aria-label={ariaLabel || title}\n            className={classnames(longAnswerClass, innerHTML, selectedAnswerClass)}\n            onClick={onClick}\n            style={{\n              ...(selected && {\n                boxShadow: `0 4px 16px ${getShadowBoxColorFromPrimary(primarySkinColor)}`\n              })\n            }}\n            data-selected={selected}\n            key={key}\n          >\n            <div\n              data-name=\"answer-background\"\n              style={{backgroundColor: selected ? primarySkinColor : '#F4F4F5' /* cm_grey_75 */}}\n              className={style.background}\n            />\n            <span\n              data-name=\"answer-label\"\n              className={style.answerText}\n              // eslint-disable-next-line react/no-danger\n              dangerouslySetInnerHTML={{__html: title}}\n            />\n          </div>\n        );\n      }),\n    [answers, longestAnswer, primarySkinColor]\n  );\n\n  return (\n    <div data-name=\"qcm\" className={style.wrapper}>\n      {answersViews}\n    </div>\n  );\n};\n\nQCM.contextTypes = {\n  skin: Provider.childContextTypes.skin\n};\n\nQCM.propTypes = {\n  answers: PropTypes.arrayOf(\n    PropTypes.shape({\n      title: PropTypes.string,\n      selected: PropTypes.bool,\n      onClick: PropTypes.func,\n      'aria-label': PropTypes.string\n    })\n  )\n};\n\nexport default QCM;\n"],"file":"index.js"}