@coorpacademy/components 10.5.7-alpha.5 → 10.5.7-alpha.9

package/es/atom/select/test/select.js

@@ -0,0 +1,49 @@
+function _extends() { _extends = Object.assign || function (target) { for (var i = 1; i < arguments.length; i++) { var source = arguments[i]; for (var key in source) { if (Object.prototype.hasOwnProperty.call(source, key)) { target[key] = source[key]; } } } return target; }; return _extends.apply(this, arguments); }
+
+import browserEnv from 'browser-env';
+import test from 'ava';
+import React from 'react';
+import { mount, configure } from 'enzyme';
+import cloneDeep from 'lodash/fp/cloneDeep';
+import noop from 'lodash/fp/noop';
+import Adapter from 'enzyme-adapter-react-16';
+import Select from '..';
+import playerFixture from './fixtures/player';
+browserEnv();
+configure({
+  adapter: new Adapter()
+});
+test('classnames: should pass the styles pertinent to a player theme, text color: use skin color (selected, valid option, player)', t => {
+  const wrapper = mount( /*#__PURE__*/React.createElement(Select, _extends({}, playerFixture.props, {
+    onChange: noop
+  })));
+  const selectWrapper = wrapper.find('[data-name="select-wrapper"]');
+  t.true(selectWrapper.at(0).exists()); // should use skin color
+
+  t.deepEqual(selectWrapper.at(0).props().style, {
+    color: '#00B0FF'
+  });
+  const selectSpan = selectWrapper.at(0).find('[data-name="select-span"]');
+  t.true(selectSpan.at(0).exists());
+  t.is(selectSpan.at(0).props().className, 'select__selectSpan select__noLabelCommon');
+});
+test('text color: should not use skin color (selected, invalid option, player), long label', t => {
+  const withInvalid = cloneDeep(playerFixture.props);
+  withInvalid.options[1] = {
+    name: 'Lorem ipsum dolor sit amet, consectetuer adipiscing elit. Aenean.',
+    value: 'Lorem ipsum dolor sit amet, consectetuer adipiscing elit. Aenean.',
+    selected: true,
+    validOption: false
+  };
+  const wrapper = mount( /*#__PURE__*/React.createElement(Select, _extends({}, withInvalid, {
+    onChange: noop
+  })));
+  const selectWrapper = wrapper.find('[data-name="select-wrapper"]');
+  t.true(selectWrapper.at(0).exists()); // should not use skin color
+
+  t.deepEqual(selectWrapper.at(0).props().style, {});
+  const selectSpan = selectWrapper.at(0).find('[data-name="select-span"]');
+  t.true(selectSpan.at(0).exists());
+  t.is(selectSpan.at(0).props().className, 'select__selectSpan select__noLabelCommon select__longLabel');
+});
+//# sourceMappingURL=select.js.map

package/es/atom/select/test/select.js.map

@@ -0,0 +1 @@
+{"version":3,"sources":["../../../../src/atom/select/test/select.js"],"names":["browserEnv","test","React","mount","configure","cloneDeep","noop","Adapter","Select","playerFixture","adapter","t","wrapper","props","selectWrapper","find","true","at","exists","deepEqual","style","color","selectSpan","is","className","withInvalid","options","name","value","selected","validOption"],"mappings":";;AAAA,OAAOA,UAAP,MAAuB,aAAvB;AACA,OAAOC,IAAP,MAAiB,KAAjB;AACA,OAAOC,KAAP,MAAkB,OAAlB;AACA,SAAQC,KAAR,EAAeC,SAAf,QAA+B,QAA/B;AACA,OAAOC,SAAP,MAAsB,qBAAtB;AACA,OAAOC,IAAP,MAAiB,gBAAjB;AACA,OAAOC,OAAP,MAAoB,yBAApB;AACA,OAAOC,MAAP,MAAmB,IAAnB;AACA,OAAOC,aAAP,MAA0B,mBAA1B;AAEAT,UAAU;AACVI,SAAS,CAAC;AAACM,EAAAA,OAAO,EAAE,IAAIH,OAAJ;AAAV,CAAD,CAAT;AAEAN,IAAI,CAAC,6HAAD,EAAgIU,CAAC,IAAI;AACvI,QAAMC,OAAO,GAAGT,KAAK,eAAC,oBAAC,MAAD,eAAYM,aAAa,CAACI,KAA1B;AAAiC,IAAA,QAAQ,EAAEP;AAA3C,KAAD,CAArB;AACA,QAAMQ,aAAa,GAAGF,OAAO,CAACG,IAAR,CAAa,8BAAb,CAAtB;AACAJ,EAAAA,CAAC,CAACK,IAAF,CAAOF,aAAa,CAACG,EAAd,CAAiB,CAAjB,EAAoBC,MAApB,EAAP,EAHuI,CAIvI;;AACAP,EAAAA,CAAC,CAACQ,SAAF,CAAYL,aAAa,CAACG,EAAd,CAAiB,CAAjB,EAAoBJ,KAApB,GAA4BO,KAAxC,EAA+C;AAC7CC,IAAAA,KAAK,EAAE;AADsC,GAA/C;AAGA,QAAMC,UAAU,GAAGR,aAAa,CAACG,EAAd,CAAiB,CAAjB,EAAoBF,IAApB,CAAyB,2BAAzB,CAAnB;AACAJ,EAAAA,CAAC,CAACK,IAAF,CAAOM,UAAU,CAACL,EAAX,CAAc,CAAd,EAAiBC,MAAjB,EAAP;AACAP,EAAAA,CAAC,CAACY,EAAF,CAAKD,UAAU,CAACL,EAAX,CAAc,CAAd,EAAiBJ,KAAjB,GAAyBW,SAA9B,EAAyC,0CAAzC;AACD,CAXG,CAAJ;AAaAvB,IAAI,CAAC,sFAAD,EAAyFU,CAAC,IAAI;AAChG,QAAMc,WAAW,GAAGpB,SAAS,CAACI,aAAa,CAACI,KAAf,CAA7B;AACAY,EAAAA,WAAW,CAACC,OAAZ,CAAoB,CAApB,IAAyB;AACvBC,IAAAA,IAAI,EAAE,mEADiB;AAEvBC,IAAAA,KAAK,EAAE,mEAFgB;AAGvBC,IAAAA,QAAQ,EAAE,IAHa;AAIvBC,IAAAA,WAAW,EAAE;AAJU,GAAzB;AAMA,QAAMlB,OAAO,GAAGT,KAAK,eAAC,oBAAC,MAAD,eAAYsB,WAAZ;AAAyB,IAAA,QAAQ,EAAEnB;AAAnC,KAAD,CAArB;AACA,QAAMQ,aAAa,GAAGF,OAAO,CAACG,IAAR,CAAa,8BAAb,CAAtB;AACAJ,EAAAA,CAAC,CAACK,IAAF,CAAOF,aAAa,CAACG,EAAd,CAAiB,CAAjB,EAAoBC,MAApB,EAAP,EAVgG,CAWhG;;AACAP,EAAAA,CAAC,CAACQ,SAAF,CAAYL,aAAa,CAACG,EAAd,CAAiB,CAAjB,EAAoBJ,KAApB,GAA4BO,KAAxC,EAA+C,EAA/C;AACA,QAAME,UAAU,GAAGR,aAAa,CAACG,EAAd,CAAiB,CAAjB,EAAoBF,IAApB,CAAyB,2BAAzB,CAAnB;AACAJ,EAAAA,CAAC,CAACK,IAAF,CAAOM,UAAU,CAACL,EAAX,CAAc,CAAd,EAAiBC,MAAjB,EAAP;AACAP,EAAAA,CAAC,CAACY,EAAF,CACED,UAAU,CAACL,EAAX,CAAc,CAAd,EAAiBJ,KAAjB,GAAyBW,SAD3B,EAEE,4DAFF;AAID,CAnBG,CAAJ","sourcesContent":["import browserEnv from 'browser-env';\nimport test from 'ava';\nimport React from 'react';\nimport {mount, configure} from 'enzyme';\nimport cloneDeep from 'lodash/fp/cloneDeep';\nimport noop from 'lodash/fp/noop';\nimport Adapter from 'enzyme-adapter-react-16';\nimport Select from '..';\nimport playerFixture from './fixtures/player';\n\nbrowserEnv();\nconfigure({adapter: new Adapter()});\n\ntest('classnames: should pass the styles pertinent to a player theme, text color: use skin color (selected, valid option, player)', t => {\n  const wrapper = mount(<Select {...playerFixture.props} onChange={noop} />);\n  const selectWrapper = wrapper.find('[data-name=\"select-wrapper\"]');\n  t.true(selectWrapper.at(0).exists());\n  // should use skin color\n  t.deepEqual(selectWrapper.at(0).props().style, {\n    color: '#00B0FF'\n  });\n  const selectSpan = selectWrapper.at(0).find('[data-name=\"select-span\"]');\n  t.true(selectSpan.at(0).exists());\n  t.is(selectSpan.at(0).props().className, 'select__selectSpan select__noLabelCommon');\n});\n\ntest('text color: should not use skin color (selected, invalid option, player), long label', t => {\n  const withInvalid = cloneDeep(playerFixture.props);\n  withInvalid.options[1] = {\n    name: 'Lorem ipsum dolor sit amet, consectetuer adipiscing elit. Aenean.',\n    value: 'Lorem ipsum dolor sit amet, consectetuer adipiscing elit. Aenean.',\n    selected: true,\n    validOption: false\n  };\n  const wrapper = mount(<Select {...withInvalid} onChange={noop} />);\n  const selectWrapper = wrapper.find('[data-name=\"select-wrapper\"]');\n  t.true(selectWrapper.at(0).exists());\n  // should not use skin color\n  t.deepEqual(selectWrapper.at(0).props().style, {});\n  const selectSpan = selectWrapper.at(0).find('[data-name=\"select-span\"]');\n  t.true(selectSpan.at(0).exists());\n  t.is(\n    selectSpan.at(0).props().className,\n    'select__selectSpan select__noLabelCommon select__longLabel'\n  );\n});\n"],"file":"select.js"}

package/es/molecule/cockpit-popin/test/fixtures.js

@@ -0,0 +1,17 @@
+import test from 'ava';
+import forEach from 'lodash/forEach';
+import renderComponentMacro from '../../../test/helpers/render-component';
+import MoleculeCockpitPopin from '..';
+import fixtureDefault from './fixtures/default';
+import fixtureLoading from './fixtures/loading';
+import fixtureVideoTranslate from './fixtures/video-translate';
+test('Molecule › MoleculeCockpitPopin > should have valid propTypes', t => {
+  t.pass();
+  forEach(MoleculeCockpitPopin.propTypes, (value, key) => {
+    t.not(value, undefined, `PropType for "Molecule.MoleculeCockpitPopin.propTypes.${key}" may not be undefined. Did you mistype the propTypes definition?`);
+  });
+});
+test('Molecule › MoleculeCockpitPopin › Default › should be rendered', renderComponentMacro, MoleculeCockpitPopin, fixtureDefault);
+test('Molecule › MoleculeCockpitPopin › Loading › should be rendered', renderComponentMacro, MoleculeCockpitPopin, fixtureLoading);
+test('Molecule › MoleculeCockpitPopin › VideoTranslate › should be rendered', renderComponentMacro, MoleculeCockpitPopin, fixtureVideoTranslate);
+//# sourceMappingURL=fixtures.js.map

package/es/molecule/cockpit-popin/test/fixtures.js.map

@@ -0,0 +1 @@
+{"version":3,"sources":["../../../../src/molecule/cockpit-popin/test/fixtures.js"],"names":["test","forEach","renderComponentMacro","MoleculeCockpitPopin","fixtureDefault","fixtureLoading","fixtureVideoTranslate","t","pass","propTypes","value","key","not","undefined"],"mappings":"AAAA,OAAOA,IAAP,MAAiB,KAAjB;AACA,OAAOC,OAAP,MAAoB,gBAApB;AACA,OAAOC,oBAAP,MAAiC,wCAAjC;AACA,OAAOC,oBAAP,MAAiC,IAAjC;AACA,OAAOC,cAAP,MAA2B,oBAA3B;AACA,OAAOC,cAAP,MAA2B,oBAA3B;AACA,OAAOC,qBAAP,MAAkC,4BAAlC;AAEAN,IAAI,CAAC,+DAAD,EAAkEO,CAAC,IAAI;AACzEA,EAAAA,CAAC,CAACC,IAAF;AACAP,EAAAA,OAAO,CAACE,oBAAoB,CAACM,SAAtB,EAAiC,CAACC,KAAD,EAAQC,GAAR,KAAgB;AACtDJ,IAAAA,CAAC,CAACK,GAAF,CAAMF,KAAN,EAAaG,SAAb,EAAyB,yDAAwDF,GAAI,mEAArF;AACD,GAFM,CAAP;AAGD,CALG,CAAJ;AAOAX,IAAI,CAAC,gEAAD,EAAmEE,oBAAnE,EAAyFC,oBAAzF,EAA+GC,cAA/G,CAAJ;AACAJ,IAAI,CAAC,gEAAD,EAAmEE,oBAAnE,EAAyFC,oBAAzF,EAA+GE,cAA/G,CAAJ;AACAL,IAAI,CAAC,uEAAD,EAA0EE,oBAA1E,EAAgGC,oBAAhG,EAAsHG,qBAAtH,CAAJ","sourcesContent":["import test from 'ava';\nimport forEach from 'lodash/forEach';\nimport renderComponentMacro from '../../../test/helpers/render-component';\nimport MoleculeCockpitPopin from '..';\nimport fixtureDefault from './fixtures/default';\nimport fixtureLoading from './fixtures/loading';\nimport fixtureVideoTranslate from './fixtures/video-translate';\n\ntest('Molecule › MoleculeCockpitPopin > should have valid propTypes', t => {\n  t.pass();\n  forEach(MoleculeCockpitPopin.propTypes, (value, key) => {\n    t.not(value, undefined, `PropType for \"Molecule.MoleculeCockpitPopin.propTypes.${key}\" may not be undefined. Did you mistype the propTypes definition?`);\n  });\n});\n\ntest('Molecule › MoleculeCockpitPopin › Default › should be rendered', renderComponentMacro, MoleculeCockpitPopin, fixtureDefault);\ntest('Molecule › MoleculeCockpitPopin › Loading › should be rendered', renderComponentMacro, MoleculeCockpitPopin, fixtureLoading);\ntest('Molecule › MoleculeCockpitPopin › VideoTranslate › should be rendered', renderComponentMacro, MoleculeCockpitPopin, fixtureVideoTranslate);\n"],"file":"fixtures.js"}

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

@@ -1,7 +1,4 @@
 import _find from "lodash/fp/find";
-
-function _extends() { _extends = Object.assign || function (target) { for (var i = 1; i < arguments.length; i++) { var source = arguments[i]; for (var key in source) { if (Object.prototype.hasOwnProperty.call(source, key)) { target[key] = source[key]; } } } return target; }; return _extends.apply(this, arguments); }
-
 import React from 'react';
 import PropTypes from 'prop-types';
 import Select, { SelectOptionPropTypes } from '../../../atom/select';
@@ -29,9 +26,7 @@ const DropDown = props => {
 
 DropDown.propTypes = process.env.NODE_ENV !== "production" ? {
   onChange: Select.propTypes.onChange,
-  options: PropTypes.arrayOf(PropTypes.shape(_extends(_extends({}, SelectOptionPropTypes), {}, {
-    validOption: PropTypes.bool
-  }))),
+  options: PropTypes.arrayOf(PropTypes.shape(SelectOptionPropTypes)),
   theme: Select.propTypes.theme
 } : {};
 export default DropDown;

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

@@ -1 +1 @@
-{"version":3,"sources":["../../../../src/molecule/questions/drop-down/index.js"],"names":["React","PropTypes","Select","SelectOptionPropTypes","style","DropDown","props","options","onChange","theme","propsTheme","currentSelection","defaultTheme","validOption","wrapper","propTypes","arrayOf","shape","bool"],"mappings":";;;;AAAA,OAAOA,KAAP,MAAkB,OAAlB;AACA,OAAOC,SAAP,MAAsB,YAAtB;AAEA,OAAOC,MAAP,IAAgBC,qBAAhB,QAA4C,sBAA5C;AACA,OAAOC,KAAP,MAAkB,aAAlB;;AAEA,MAAMC,QAAQ,GAAGC,KAAK,IAAI;AACxB,QAAM;AAACC,IAAAA,OAAD;AAAUC,IAAAA,QAAV;AAAoBC,IAAAA,KAAK,EAAEC;AAA3B,MAAyCJ,KAA/C;;AAEA,QAAMK,gBAAgB,GAAG,MAAK,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,EAAER,KAAK,CAACU;AAAtB,kBACE,oBAAC,MAAD;AAAQ,IAAA,KAAK,EAAEL,KAAf;AAAsB,IAAA,OAAO,EAAEF,OAA/B;AAAwC,IAAA,QAAQ,EAAEC;AAAlD,IADF,CADF;AAKD,CAdD;;AAgBAH,QAAQ,CAACU,SAAT,2CAAqB;AACnBP,EAAAA,QAAQ,EAAEN,MAAM,CAACa,SAAP,CAAiBP,QADR;AAEnBD,EAAAA,OAAO,EAAEN,SAAS,CAACe,OAAV,CACPf,SAAS,CAACgB,KAAV,uBAAoBd,qBAApB;AAA2CU,IAAAA,WAAW,EAAEZ,SAAS,CAACiB;AAAlE,KADO,CAFU;AAKnBT,EAAAA,KAAK,EAAEP,MAAM,CAACa,SAAP,CAAiBN;AALL,CAArB;AAQA,eAAeJ,QAAf","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":["React","PropTypes","Select","SelectOptionPropTypes","style","DropDown","props","options","onChange","theme","propsTheme","currentSelection","defaultTheme","validOption","wrapper","propTypes","arrayOf","shape"],"mappings":";AAAA,OAAOA,KAAP,MAAkB,OAAlB;AACA,OAAOC,SAAP,MAAsB,YAAtB;AAEA,OAAOC,MAAP,IAAgBC,qBAAhB,QAA4C,sBAA5C;AACA,OAAOC,KAAP,MAAkB,aAAlB;;AAEA,MAAMC,QAAQ,GAAGC,KAAK,IAAI;AACxB,QAAM;AAACC,IAAAA,OAAD;AAAUC,IAAAA,QAAV;AAAoBC,IAAAA,KAAK,EAAEC;AAA3B,MAAyCJ,KAA/C;;AAEA,QAAMK,gBAAgB,GAAG,MAAK,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,EAAER,KAAK,CAACU;AAAtB,kBACE,oBAAC,MAAD;AAAQ,IAAA,KAAK,EAAEL,KAAf;AAAsB,IAAA,OAAO,EAAEF,OAA/B;AAAwC,IAAA,QAAQ,EAAEC;AAAlD,IADF,CADF;AAKD,CAdD;;AAgBAH,QAAQ,CAACU,SAAT,2CAAqB;AACnBP,EAAAA,QAAQ,EAAEN,MAAM,CAACa,SAAP,CAAiBP,QADR;AAEnBD,EAAAA,OAAO,EAAEN,SAAS,CAACe,OAAV,CAAkBf,SAAS,CAACgB,KAAV,CAAgBd,qBAAhB,CAAlB,CAFU;AAGnBM,EAAAA,KAAK,EAAEP,MAAM,CAACa,SAAP,CAAiBN;AAHL,CAArB;AAMA,eAAeJ,QAAf","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/es/molecule/questions/free-text/index.js

@@ -1,34 +1,53 @@
-import _get from "lodash/fp/get";
+import _getOr from "lodash/fp/getOr";
 import _noop from "lodash/fp/noop";
-import React, { useMemo } from 'react';
+
+function _extends() { _extends = Object.assign || function (target) { for (var i = 1; i < arguments.length; i++) { var source = arguments[i]; for (var key in source) { if (Object.prototype.hasOwnProperty.call(source, key)) { target[key] = source[key]; } } } return target; }; return _extends.apply(this, arguments); }
+
+import React, { useCallback, useMemo, useState } from 'react';
 import PropTypes from 'prop-types';
+import { convert } from 'css-color-function';
 import Provider from '../../../atom/provider';
 import style from './style.css';
 
-const FreeText = (props, {
-  skin
-}) => {
+const FreeText = (props, context) => {
   const {
     placeholder = '',
     value = '',
-    onChange = _noop
+    onChange = _noop,
+    'aria-label': ariaLabel
   } = props;
-  const handleChange = useMemo(() => e => onChange(e.target.value), [onChange]);
-  const skinView = value ? _get('common.primary', skin) : null;
+  const [hovered, setHovered] = useState(false);
+  const handleChange = useCallback(e => onChange(e.target.value), [onChange]);
+
+  const primarySkinColor = _getOr('#00B0FF', 'skin.common.primary', context);
+
+  const handleMouseOver = useCallback(() => setHovered(true), [setHovered]);
+  const handleMouseLeave = useCallback(() => setHovered(false), [setHovered]);
+  const shadowBoxPrimaryColor = useMemo(() => convert(`color(${primarySkinColor} a(12%))`), [primarySkinColor]);
   return /*#__PURE__*/React.createElement("div", {
     "data-name": "freeText",
-    className: style.wrapper
+    className: style.wrapper,
+    onMouseOver: handleMouseOver,
+    onMouseLeave: handleMouseLeave,
+    style: _extends({}, value && {
+      boxShadow: hovered ? 'none' : `0 4px 16px ${shadowBoxPrimaryColor}`
+    })
   }, /*#__PURE__*/React.createElement("input", {
+    "data-name": "free-text-input",
     type: "text",
-    className: style.input,
+    "aria-label": ariaLabel || value || placeholder,
+    className: style.freeText,
     placeholder: placeholder,
     value: value,
     onInput: handleChange,
     onChange: _noop,
-    style: {
-      color: skinView,
-      borderColor: skinView
-    }
+    style: _extends(_extends({
+      boxShadow: `0 4px 16px ${shadowBoxPrimaryColor}`
+    }, value && {
+      boxShadow: `0 4px 16px ${hovered ? convert(`color(${primarySkinColor} a(20%))`) : shadowBoxPrimaryColor}`
+    }), {}, {
+      color: primarySkinColor
+    })
   }));
 };
 
@@ -38,7 +57,8 @@ FreeText.contextTypes = {
 FreeText.propTypes = process.env.NODE_ENV !== "production" ? {
   placeholder: PropTypes.string,
   value: PropTypes.string,
-  onChange: PropTypes.func
+  onChange: PropTypes.func,
+  'aria-label': PropTypes.string
 } : {};
 export default FreeText;
 //# sourceMappingURL=index.js.map

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

@@ -1 +1 @@
-{"version":3,"sources":["../../../../src/molecule/questions/free-text/index.js"],"names":["React","useMemo","PropTypes","Provider","style","FreeText","props","skin","placeholder","value","onChange","handleChange","e","target","skinView","wrapper","input","color","borderColor","contextTypes","childContextTypes","propTypes","string","func"],"mappings":";;AAAA,OAAOA,KAAP,IAAeC,OAAf,QAA6B,OAA7B;AACA,OAAOC,SAAP,MAAsB,YAAtB;AAEA,OAAOC,QAAP,MAAqB,wBAArB;AACA,OAAOC,KAAP,MAAkB,aAAlB;;AAEA,MAAMC,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,GAAGV,OAAO,CAAC,MAAMW,CAAC,IAAIF,QAAQ,CAACE,CAAC,CAACC,MAAF,CAASJ,KAAV,CAApB,EAAsC,CAACC,QAAD,CAAtC,CAA5B;AACA,QAAMI,QAAQ,GAAGL,KAAK,GAAG,KAAI,gBAAJ,EAAsBF,IAAtB,CAAH,GAAiC,IAAvD;AAEA,sBACE;AAAK,iBAAU,UAAf;AAA0B,IAAA,SAAS,EAAEH,KAAK,CAACW;AAA3C,kBACE;AACE,IAAA,IAAI,EAAC,MADP;AAEE,IAAA,SAAS,EAAEX,KAAK,CAACY,KAFnB;AAGE,IAAA,WAAW,EAAER,WAHf;AAIE,IAAA,KAAK,EAAEC,KAJT;AAKE,IAAA,OAAO,EAAEE,YALX;AAME,IAAA,QAAQ,OANV;AAOE,IAAA,KAAK,EAAE;AACLM,MAAAA,KAAK,EAAEH,QADF;AAELI,MAAAA,WAAW,EAAEJ;AAFR;AAPT,IADF,CADF;AAgBD,CAtBD;;AAwBAT,QAAQ,CAACc,YAAT,GAAwB;AACtBZ,EAAAA,IAAI,EAAEJ,QAAQ,CAACiB,iBAAT,CAA2Bb;AADX,CAAxB;AAIAF,QAAQ,CAACgB,SAAT,2CAAqB;AACnBb,EAAAA,WAAW,EAAEN,SAAS,CAACoB,MADJ;AAEnBb,EAAAA,KAAK,EAAEP,SAAS,CAACoB,MAFE;AAGnBZ,EAAAA,QAAQ,EAAER,SAAS,CAACqB;AAHD,CAArB;AAMA,eAAelB,QAAf","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":["React","useCallback","useMemo","useState","PropTypes","convert","Provider","style","FreeText","props","context","placeholder","value","onChange","ariaLabel","hovered","setHovered","handleChange","e","target","primarySkinColor","handleMouseOver","handleMouseLeave","shadowBoxPrimaryColor","wrapper","boxShadow","freeText","color","contextTypes","skin","childContextTypes","propTypes","string","func"],"mappings":";;;;;AAAA,OAAOA,KAAP,IAAeC,WAAf,EAA4BC,OAA5B,EAAqCC,QAArC,QAAoD,OAApD;AACA,OAAOC,SAAP,MAAsB,YAAtB;AAEA,SAAQC,OAAR,QAAsB,oBAAtB;AACA,OAAOC,QAAP,MAAqB,wBAArB;AACA,OAAOC,KAAP,MAAkB,aAAlB;;AAEA,MAAMC,QAAQ,GAAG,CAACC,KAAD,EAAQC,OAAR,KAAoB;AACnC,QAAM;AAACC,IAAAA,WAAW,GAAG,EAAf;AAAmBC,IAAAA,KAAK,GAAG,EAA3B;AAA+BC,IAAAA,QAAQ,QAAvC;AAAgD,kBAAcC;AAA9D,MAA2EL,KAAjF;AACA,QAAM,CAACM,OAAD,EAAUC,UAAV,IAAwBb,QAAQ,CAAC,KAAD,CAAtC;AAEA,QAAMc,YAAY,GAAGhB,WAAW,CAACiB,CAAC,IAAIL,QAAQ,CAACK,CAAC,CAACC,MAAF,CAASP,KAAV,CAAd,EAAgC,CAACC,QAAD,CAAhC,CAAhC;;AACA,QAAMO,gBAAgB,GAAG,OAAM,SAAN,EAAiB,qBAAjB,EAAwCV,OAAxC,CAAzB;;AAEA,QAAMW,eAAe,GAAGpB,WAAW,CAAC,MAAMe,UAAU,CAAC,IAAD,CAAjB,EAAyB,CAACA,UAAD,CAAzB,CAAnC;AAEA,QAAMM,gBAAgB,GAAGrB,WAAW,CAAC,MAAMe,UAAU,CAAC,KAAD,CAAjB,EAA0B,CAACA,UAAD,CAA1B,CAApC;AAEA,QAAMO,qBAAqB,GAAGrB,OAAO,CAAC,MAAMG,OAAO,CAAE,SAAQe,gBAAiB,UAA3B,CAAd,EAAqD,CACxFA,gBADwF,CAArD,CAArC;AAIA,sBACE;AACE,iBAAU,UADZ;AAEE,IAAA,SAAS,EAAEb,KAAK,CAACiB,OAFnB;AAGE,IAAA,WAAW,EAAEH,eAHf;AAIE,IAAA,YAAY,EAAEC,gBAJhB;AAKE,IAAA,KAAK,eACCV,KAAK,IAAI;AACXa,MAAAA,SAAS,EAAEV,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,EAAEJ,KAAK,CAACmB,QAJnB;AAKE,IAAA,WAAW,EAAEf,WALf;AAME,IAAA,KAAK,EAAEC,KANT;AAOE,IAAA,OAAO,EAAEK,YAPX;AAQE,IAAA,QAAQ,OARV;AASE,IAAA,KAAK;AACHQ,MAAAA,SAAS,EAAG,cAAaF,qBAAsB;AAD5C,OAECX,KAAK,IAAI;AACXa,MAAAA,SAAS,EAAG,cACVV,OAAO,GAAGV,OAAO,CAAE,SAAQe,gBAAiB,UAA3B,CAAV,GAAkDG,qBAC1D;AAHU,KAFV;AAOHI,MAAAA,KAAK,EAAEP;AAPJ;AATP,IAXF,CADF;AAiCD,CAhDD;;AAkDAZ,QAAQ,CAACoB,YAAT,GAAwB;AACtBC,EAAAA,IAAI,EAAEvB,QAAQ,CAACwB,iBAAT,CAA2BD;AADX,CAAxB;AAIArB,QAAQ,CAACuB,SAAT,2CAAqB;AACnBpB,EAAAA,WAAW,EAAEP,SAAS,CAAC4B,MADJ;AAEnBpB,EAAAA,KAAK,EAAER,SAAS,CAAC4B,MAFE;AAGnBnB,EAAAA,QAAQ,EAAET,SAAS,CAAC6B,IAHD;AAInB,gBAAc7B,SAAS,CAAC4B;AAJL,CAArB;AAOA,eAAexB,QAAf","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/es/molecule/questions/free-text/style.css

@@ -1,41 +1,65 @@
 @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;
+}
+
+.freeText::placeholder {
+  color: color(cm_blue_900 a(0.3));
+}
+
+.freeText:-ms-input-placeholder {
+  color: color(cm_blue_900 a(0.3))!important;
 }
 
-.input::placeholder {
-  color: medium;
+.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/es/molecule/questions/free-text/test/fixtures/default.js

@@ -1,7 +1,7 @@
 export default {
   props: {
     placeholder: 'Type your answer here',
-    defaultValue: null
+    value: undefined
   }
 };
 //# sourceMappingURL=default.js.map

package/es/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":"AAAA,eAAe;AACbA,EAAAA,KAAK,EAAE;AACLC,IAAAA,WAAW,EAAE,uBADR;AAELC,IAAAA,YAAY,EAAE;AAFT;AADM,CAAf","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":"AAAA,eAAe;AACbA,EAAAA,KAAK,EAAE;AACLC,IAAAA,WAAW,EAAE,uBADR;AAELC,IAAAA,KAAK,EAAEC;AAFF;AADM,CAAf","sourcesContent":["export default {\n  props: {\n    placeholder: 'Type your answer here',\n    value: undefined\n  }\n};\n"],"file":"default.js"}

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

@@ -0,0 +1,9 @@
+export default {
+  props: {
+    placeholder: 'Type your answer here',
+    value: 'plop!',
+    onChange: () => {},
+    'aria-label': 'aria input'
+  }
+};
+//# sourceMappingURL=with-value-on-change.js.map

package/es/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":"AAAA,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,CAAf","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/es/molecule/questions/free-text/test/fixtures/{with-default-value.js → with-value.js}

@@ -1,7 +1,7 @@
 export default {
   props: {
     placeholder: 'Type your answer here',
-    defaultValue: 'plop!'
+    value: 'plop!'
   }
 };
-//# sourceMappingURL=with-default-value.js.map
+//# sourceMappingURL=with-value.js.map

package/es/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":"AAAA,eAAe;AACbA,EAAAA,KAAK,EAAE;AACLC,IAAAA,WAAW,EAAE,uBADR;AAELC,IAAAA,KAAK,EAAE;AAFF;AADM,CAAf","sourcesContent":["export default {\n  props: {\n    placeholder: 'Type your answer here',\n    value: 'plop!'\n  }\n};\n"],"file":"with-value.js"}

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

@@ -0,0 +1,106 @@
+import _identity from "lodash/fp/identity";
+
+function _extends() { _extends = Object.assign || function (target) { for (var i = 1; i < arguments.length; i++) { var source = arguments[i]; for (var key in source) { if (Object.prototype.hasOwnProperty.call(source, key)) { target[key] = source[key]; } } } return target; }; return _extends.apply(this, arguments); }
+
+import browserEnv from 'browser-env';
+import test from 'ava';
+import React from 'react';
+import { shallow, mount, configure } from 'enzyme';
+import Adapter from 'enzyme-adapter-react-16';
+import FreeText from '..';
+import defaultFixture from './fixtures/default';
+import withValueFixture from './fixtures/with-value';
+import withValueOnChangeFixture from './fixtures/with-value-on-change';
+browserEnv();
+configure({
+  adapter: new Adapter()
+});
+const translate = _identity;
+test('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({}, withValueOnChangeFixture.props), {}, {
+    onChange: value => {
+      onInputWasTriggered = true;
+      t.is(value, 'new value');
+    }
+  });
+
+  const wrapper = shallow( /*#__PURE__*/React.createElement(FreeText, 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();
+});
+test('should set: boxShadow (hover & not hovered variants) && color for the input if a value is provided', t => {
+  const wrapper = mount( /*#__PURE__*/React.createElement(FreeText, withValueFixture.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();
+});
+test('should use value as default aria-label if no aria-label is provided', t => {
+  const wrapper = mount( /*#__PURE__*/React.createElement(FreeText, withValueFixture.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();
+});
+test('should use placeholder as default aria-label if no aria-label is provided and no value is present', t => {
+  const wrapper = mount( /*#__PURE__*/React.createElement(FreeText, defaultFixture.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/es/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":["browserEnv","test","React","shallow","mount","configure","Adapter","FreeText","defaultFixture","withValueFixture","withValueOnChangeFixture","adapter","translate","t","plan","onInputWasTriggered","props","onChange","value","is","wrapper","context","freeText","find","true","at","exists","simulate","target","update","false","pass","freeTextWrapper","deepEqual","style","boxShadow","color"],"mappings":"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","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/es/molecule/questions/qcm/style.css

@@ -48,6 +48,10 @@
 .answerText {
   position: relative;
   color: cm_blue_900;
+  hyphens: auto;
+  -ms-word-break: break-all;
+  word-break: break-all;
+  word-break: break-word;
 }
 
 .selectedAnswer .answerText {

package/es/molecule/questions/qcm-drag/index.js

@@ -1,3 +1,4 @@
+import _getOr from "lodash/fp/getOr";
 import _orderBy from "lodash/fp/orderBy";
 import _filter from "lodash/fp/filter";
 import _pipe from "lodash/fp/pipe";
@@ -6,6 +7,7 @@ import PropTypes from 'prop-types';
 import classnames from 'classnames';
 import Provider from '../../../atom/provider';
 import { innerHTML } from '../../../atom/label/style.css';
+import { getShadowBoxColorFromPrimary } from '../../../util/get-shadow-box-color-from-primary';
 import style from './style.css';
 const AnswersPropTypes = process.env.NODE_ENV !== "production" ? PropTypes.arrayOf(PropTypes.shape({
   onClick: PropTypes.func,
@@ -38,7 +40,7 @@ const Choices = ({
       selected
     } = answer;
     return /*#__PURE__*/React.createElement("div", {
-      className: classnames(selected ? style.invisibleAnswer : style.answer, innerHTML),
+      className: classnames(selected ? style.invisibleAnswer : style.unselected, innerHTML),
       "data-name": "answer",
       onClick: onClick,
       key: key // eslint-disable-next-line react/no-danger
@@ -49,7 +51,7 @@ const Choices = ({
     });
   });
   return /*#__PURE__*/React.createElement("div", {
-    className: style.qcmDrag
+    className: style.choices
   }, answersViews);
 };
 
@@ -57,9 +59,10 @@ Choices.propTypes = process.env.NODE_ENV !== "production" ? {
   answers: AnswersPropTypes
 } : {};
 
-const SelectionBox = ({
+const SelectedAnswerSections = ({
   answers,
-  help
+  help,
+  backgroundColor
 }) => {
   const selectedAnswers = _pipe(_filter('selected'), _orderBy('order', 'asc'))(answers);
 
@@ -69,15 +72,31 @@ const SelectionBox = ({
       title
     } = answer;
     return /*#__PURE__*/React.createElement("div", {
-      className: classnames(style.selectedAnswer, innerHTML),
       "data-selected": "true",
       onClick: onClick,
-      key: key // eslint-disable-next-line react/no-danger
+      key: key,
+      "data-name": "selectedAnswer",
+      className: style.selected,
+      style: {
+        boxShadow: `0px 4px 16px ${getShadowBoxColorFromPrimary(backgroundColor)}`
+      }
+    }, /*#__PURE__*/React.createElement("div", {
+      "data-name": "answerBackground",
+      style: {
+        backgroundColor
+      },
+      className: style.background
+    }), /*#__PURE__*/React.createElement("div", {
+      className: style.content
+    }, /*#__PURE__*/React.createElement("span", {
+      "data-name": "answerContent",
+      className: classnames(style.selectedAnswerText, innerHTML),
+      title: title // eslint-disable-next-line react/no-danger
       ,
       dangerouslySetInnerHTML: {
         __html: title
       }
-    });
+    })));
   });
 
   if (selectedAnswersViews.length > 0) {
@@ -93,29 +112,42 @@ const SelectionBox = ({
   }
 };
 
-SelectionBox.propTypes = process.env.NODE_ENV !== "production" ? {
+SelectedAnswerSections.propTypes = process.env.NODE_ENV !== "production" ? {
   answers: AnswersPropTypes,
-  help: EmptyView.propTypes.help
+  help: EmptyView.propTypes.help,
+  backgroundColor: PropTypes.string
 } : {};
 
 const QcmDrag = ({
   answers,
   help
-}, context) => /*#__PURE__*/React.createElement("div", {
-  className: style.qcmDrag
-}, /*#__PURE__*/React.createElement(SelectionBox, {
-  answers: answers,
-  help: help
-}), /*#__PURE__*/React.createElement("div", {
-  "data-name": "qcm-drag-answers",
-  className: style.answers
-}, /*#__PURE__*/React.createElement(Choices, {
-  answers: answers
-})));
+}, context) => {
+  const {
+    skin
+  } = context;
+
+  const primarySkinColor = _getOr('#00B0FF', 'common.primary', skin);
+
+  return /*#__PURE__*/React.createElement("div", {
+    className: style.wrapper
+  }, /*#__PURE__*/React.createElement(SelectedAnswerSections, {
+    answers: answers,
+    help: help,
+    backgroundColor: primarySkinColor
+  }), /*#__PURE__*/React.createElement("div", {
+    "data-name": "qcm-drag-answers",
+    className: style.answers
+  }, /*#__PURE__*/React.createElement(Choices, {
+    answers: answers
+  })));
+};
 
 QcmDrag.propTypes = process.env.NODE_ENV !== "production" ? {
   answers: AnswersPropTypes,
-  help: SelectionBox.propTypes.help
+  help: SelectedAnswerSections.propTypes.help
 } : {};
+QcmDrag.contextTypes = {
+  skin: Provider.childContextTypes.skin
+};
 export default QcmDrag;
 //# sourceMappingURL=index.js.map