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

package/es/atom/range/handle.css

@@ -1,10 +1,26 @@
 @value colors: "../../variables/colors.css";
-@value brand from colors;
+@value white from colors;
+@value cm_grey_200 from colors;
+@value cm_grey_500 from colors;
+
+.wrapper {
+  height: 100%;
+  width: 100%;
+  border-radius: 100%; 
+  box-shadow: 0px 0px 20px rgba(0, 0, 0, 0.25);
+  overflow: hidden;
+}
+
+.wrapper:hover {
+  box-shadow: none;
+  overflow: visible;
+}
 
 .default {
   border-radius: 100%;
-  border: 1px solid brand;
+  border: 4px solid white;
   box-sizing: border-box;
   height: 100%;
   width: 100%;
+  border-radius: 100%; 
 }

package/es/atom/range/handle.js

@@ -6,6 +6,7 @@ function _defineProperty(obj, key, value) { if (key in obj) { Object.definePrope
 import React from 'react';
 import PropTypes from 'prop-types';
 import Provider from '../provider';
+import { getShadowBoxColorFromPrimary } from '../../util/get-shadow-box-color-from-primary';
 import style from './handle.css';
 const Hammer = // eslint-disable-next-line no-undef
 typeof window !== 'undefined' ? require('hammerjs') :
@@ -53,15 +54,18 @@ class Handle extends React.Component {
 
     const primaryColor = _getOr('#00B0FF', 'common.primary', skin);
 
-    const borderColor = primaryColor;
+    const backgroundColor = primaryColor;
     return /*#__PURE__*/React.createElement("div", {
+      className: style.wrapper
+    }, /*#__PURE__*/React.createElement("div", {
       style: {
-        borderColor
+        backgroundColor,
+        boxShadow: `0px 0px 20px ${getShadowBoxColorFromPrimary(primaryColor)}`
       },
       className: style.default,
       ref: this.setHandle,
       "data-name": 'handle'
-    });
+    }));
   }
 
 }

package/es/atom/range/handle.js.map

@@ -1 +1 @@
-{"version":3,"sources":["../../../src/atom/range/handle.js"],"names":["React","PropTypes","Provider","style","Hammer","window","require","undefined","Handle","Component","constructor","props","context","setHandle","bind","componentDidMount","onPanStart","onPanEnd","onPan","hammer","handle","on","componentWillUnmount","stop","destroy","el","render","skin","primaryColor","borderColor","default","childContextTypes","propTypes","func"],"mappings":";;;;;AACA,OAAOA,KAAP,MAAkB,OAAlB;AACA,OAAOC,SAAP,MAAsB,YAAtB;AACA,OAAOC,QAAP,MAAqB,aAArB;AACA,OAAOC,KAAP,MAAkB,cAAlB;AAEA,MAAMC,MAAM,GACV;AACA,OAAOC,MAAP,KAAkB,WAAlB,GAAgCC,OAAO,CAAC,UAAD,CAAvC;AAAsD;AAA2BC,SAFnF;;AAIA,MAAMC,MAAN,SAAqBR,KAAK,CAACS,SAA3B,CAAqC;AAWnCC,EAAAA,WAAW,CAACC,KAAD,EAAQC,OAAR,EAAiB;AAC1B,UAAMD,KAAN,EAAaC,OAAb;AAEA,SAAKC,SAAL,GAAiB,KAAKA,SAAL,CAAeC,IAAf,CAAoB,IAApB,CAAjB;AACD;;AAEDC,EAAAA,iBAAiB,GAAG;AAClB;AACA,QAAIX,MAAJ,EAAY;AACV,YAAM;AAACY,QAAAA,UAAU,QAAX;AAAoBC,QAAAA,QAAQ,QAA5B;AAAqCC,QAAAA,KAAK;AAA1C,UAAqD,KAAKP,KAAhE;AAEA,WAAKQ,MAAL,GAAc,IAAIf,MAAJ,CAAW,KAAKgB,MAAhB,CAAd;AACA,WAAKD,MAAL,CAAYE,EAAZ,CAAe,UAAf,EAA2BL,UAA3B;AACA,WAAKG,MAAL,CAAYE,EAAZ,CAAe,QAAf,EAAyBJ,QAAzB;AAEA,WAAKE,MAAL,CAAYE,EAAZ,CAAe,kBAAf,EAAmCH,KAAnC;AACD;AACF;;AAEDI,EAAAA,oBAAoB,GAAG;AACrB,QAAI,KAAKH,MAAT,EAAiB;AACf,WAAKA,MAAL,CAAYI,IAAZ;AACA,WAAKJ,MAAL,CAAYK,OAAZ;AACD;;AACD,SAAKL,MAAL,GAAc,IAAd;AACD;;AAEDN,EAAAA,SAAS,CAACY,EAAD,EAAK;AACZ,SAAKL,MAAL,GAAcK,EAAd;AACD;;AAEDC,EAAAA,MAAM,GAAG;AACP,UAAM;AAACC,MAAAA;AAAD,QAAS,KAAKf,OAApB;;AACA,UAAMgB,YAAY,GAAG,OAAM,SAAN,EAAiB,gBAAjB,EAAmCD,IAAnC,CAArB;;AACA,UAAME,WAAW,GAAGD,YAApB;AAEA,wBACE;AACE,MAAA,KAAK,EAAE;AAACC,QAAAA;AAAD,OADT;AAEE,MAAA,SAAS,EAAE1B,KAAK,CAAC2B,OAFnB;AAGE,MAAA,GAAG,EAAE,KAAKjB,SAHZ;AAIE,mBAAW;AAJb,MADF;AAQD;;AAvDkC;;gBAA/BL,M,kBAOkB;AACpBmB,EAAAA,IAAI,EAAEzB,QAAQ,CAAC6B,iBAAT,CAA2BJ;AADb,C;;AAPlBnB,M,CACGwB,S,2CAAY;AACjBd,EAAAA,KAAK,EAAEjB,SAAS,CAACgC,IADA;AAEjBjB,EAAAA,UAAU,EAAEf,SAAS,CAACgC,IAFL;AAGjBhB,EAAAA,QAAQ,EAAEhB,SAAS,CAACgC;AAHH,C;AAyDrB,eAAezB,MAAf","sourcesContent":["import {noop, getOr} from 'lodash/fp';\nimport React from 'react';\nimport PropTypes from 'prop-types';\nimport Provider from '../provider';\nimport style from './handle.css';\n\nconst Hammer =\n  // eslint-disable-next-line no-undef\n  typeof window !== 'undefined' ? require('hammerjs') : /* istanbul ignore next */ undefined;\n\nclass Handle extends React.Component {\n  static propTypes = {\n    onPan: PropTypes.func,\n    onPanStart: PropTypes.func,\n    onPanEnd: PropTypes.func\n  };\n\n  static contextTypes = {\n    skin: Provider.childContextTypes.skin\n  };\n\n  constructor(props, context) {\n    super(props, context);\n\n    this.setHandle = this.setHandle.bind(this);\n  }\n\n  componentDidMount() {\n    /* istanbul ignore else */\n    if (Hammer) {\n      const {onPanStart = noop, onPanEnd = noop, onPan = noop} = this.props;\n\n      this.hammer = new Hammer(this.handle);\n      this.hammer.on('panstart', onPanStart);\n      this.hammer.on('panend', onPanEnd);\n\n      this.hammer.on('panleft panright', onPan);\n    }\n  }\n\n  componentWillUnmount() {\n    if (this.hammer) {\n      this.hammer.stop();\n      this.hammer.destroy();\n    }\n    this.hammer = null;\n  }\n\n  setHandle(el) {\n    this.handle = el;\n  }\n\n  render() {\n    const {skin} = this.context;\n    const primaryColor = getOr('#00B0FF', 'common.primary', skin);\n    const borderColor = primaryColor;\n\n    return (\n      <div\n        style={{borderColor}}\n        className={style.default}\n        ref={this.setHandle}\n        data-name={'handle'}\n      />\n    );\n  }\n}\n\nexport default Handle;\n"],"file":"handle.js"}
+{"version":3,"sources":["../../../src/atom/range/handle.js"],"names":["React","PropTypes","Provider","getShadowBoxColorFromPrimary","style","Hammer","window","require","undefined","Handle","Component","constructor","props","context","setHandle","bind","componentDidMount","onPanStart","onPanEnd","onPan","hammer","handle","on","componentWillUnmount","stop","destroy","el","render","skin","primaryColor","backgroundColor","wrapper","boxShadow","default","childContextTypes","propTypes","func"],"mappings":";;;;;AACA,OAAOA,KAAP,MAAkB,OAAlB;AACA,OAAOC,SAAP,MAAsB,YAAtB;AACA,OAAOC,QAAP,MAAqB,aAArB;AACA,SAAQC,4BAAR,QAA2C,8CAA3C;AACA,OAAOC,KAAP,MAAkB,cAAlB;AAEA,MAAMC,MAAM,GACV;AACA,OAAOC,MAAP,KAAkB,WAAlB,GAAgCC,OAAO,CAAC,UAAD,CAAvC;AAAsD;AAA2BC,SAFnF;;AAIA,MAAMC,MAAN,SAAqBT,KAAK,CAACU,SAA3B,CAAqC;AAWnCC,EAAAA,WAAW,CAACC,KAAD,EAAQC,OAAR,EAAiB;AAC1B,UAAMD,KAAN,EAAaC,OAAb;AAEA,SAAKC,SAAL,GAAiB,KAAKA,SAAL,CAAeC,IAAf,CAAoB,IAApB,CAAjB;AACD;;AAEDC,EAAAA,iBAAiB,GAAG;AAClB;AACA,QAAIX,MAAJ,EAAY;AACV,YAAM;AAACY,QAAAA,UAAU,QAAX;AAAoBC,QAAAA,QAAQ,QAA5B;AAAqCC,QAAAA,KAAK;AAA1C,UAAqD,KAAKP,KAAhE;AAEA,WAAKQ,MAAL,GAAc,IAAIf,MAAJ,CAAW,KAAKgB,MAAhB,CAAd;AACA,WAAKD,MAAL,CAAYE,EAAZ,CAAe,UAAf,EAA2BL,UAA3B;AACA,WAAKG,MAAL,CAAYE,EAAZ,CAAe,QAAf,EAAyBJ,QAAzB;AAEA,WAAKE,MAAL,CAAYE,EAAZ,CAAe,kBAAf,EAAmCH,KAAnC;AACD;AACF;;AAEDI,EAAAA,oBAAoB,GAAG;AACrB,QAAI,KAAKH,MAAT,EAAiB;AACf,WAAKA,MAAL,CAAYI,IAAZ;AACA,WAAKJ,MAAL,CAAYK,OAAZ;AACD;;AACD,SAAKL,MAAL,GAAc,IAAd;AACD;;AAEDN,EAAAA,SAAS,CAACY,EAAD,EAAK;AACZ,SAAKL,MAAL,GAAcK,EAAd;AACD;;AAEDC,EAAAA,MAAM,GAAG;AACP,UAAM;AAACC,MAAAA;AAAD,QAAS,KAAKf,OAApB;;AACA,UAAMgB,YAAY,GAAG,OAAM,SAAN,EAAiB,gBAAjB,EAAmCD,IAAnC,CAArB;;AACA,UAAME,eAAe,GAAGD,YAAxB;AAEA,wBACE;AAAK,MAAA,SAAS,EAAEzB,KAAK,CAAC2B;AAAtB,oBACE;AACE,MAAA,KAAK,EAAE;AACLD,QAAAA,eADK;AAELE,QAAAA,SAAS,EAAG,gBAAe7B,4BAA4B,CAAC0B,YAAD,CAAe;AAFjE,OADT;AAKE,MAAA,SAAS,EAAEzB,KAAK,CAAC6B,OALnB;AAME,MAAA,GAAG,EAAE,KAAKnB,SANZ;AAOE,mBAAW;AAPb,MADF,CADF;AAaD;;AA5DkC;;gBAA/BL,M,kBAOkB;AACpBmB,EAAAA,IAAI,EAAE1B,QAAQ,CAACgC,iBAAT,CAA2BN;AADb,C;;AAPlBnB,M,CACG0B,S,2CAAY;AACjBhB,EAAAA,KAAK,EAAElB,SAAS,CAACmC,IADA;AAEjBnB,EAAAA,UAAU,EAAEhB,SAAS,CAACmC,IAFL;AAGjBlB,EAAAA,QAAQ,EAAEjB,SAAS,CAACmC;AAHH,C;AA8DrB,eAAe3B,MAAf","sourcesContent":["import {noop, getOr} from 'lodash/fp';\nimport React from 'react';\nimport PropTypes from 'prop-types';\nimport Provider from '../provider';\nimport {getShadowBoxColorFromPrimary} from '../../util/get-shadow-box-color-from-primary';\nimport style from './handle.css';\n\nconst Hammer =\n  // eslint-disable-next-line no-undef\n  typeof window !== 'undefined' ? require('hammerjs') : /* istanbul ignore next */ undefined;\n\nclass Handle extends React.Component {\n  static propTypes = {\n    onPan: PropTypes.func,\n    onPanStart: PropTypes.func,\n    onPanEnd: PropTypes.func\n  };\n\n  static contextTypes = {\n    skin: Provider.childContextTypes.skin\n  };\n\n  constructor(props, context) {\n    super(props, context);\n\n    this.setHandle = this.setHandle.bind(this);\n  }\n\n  componentDidMount() {\n    /* istanbul ignore else */\n    if (Hammer) {\n      const {onPanStart = noop, onPanEnd = noop, onPan = noop} = this.props;\n\n      this.hammer = new Hammer(this.handle);\n      this.hammer.on('panstart', onPanStart);\n      this.hammer.on('panend', onPanEnd);\n\n      this.hammer.on('panleft panright', onPan);\n    }\n  }\n\n  componentWillUnmount() {\n    if (this.hammer) {\n      this.hammer.stop();\n      this.hammer.destroy();\n    }\n    this.hammer = null;\n  }\n\n  setHandle(el) {\n    this.handle = el;\n  }\n\n  render() {\n    const {skin} = this.context;\n    const primaryColor = getOr('#00B0FF', 'common.primary', skin);\n    const backgroundColor = primaryColor;\n\n    return (\n      <div className={style.wrapper}>\n        <div\n          style={{\n            backgroundColor,\n            boxShadow: `0px 0px 20px ${getShadowBoxColorFromPrimary(primaryColor)}`\n          }}\n          className={style.default}\n          ref={this.setHandle}\n          data-name={'handle'}\n        />\n      </div>\n    );\n  }\n}\n\nexport default Handle;\n"],"file":"handle.js"}

package/es/atom/range/style.css

@@ -15,9 +15,9 @@
 }
 
 .track {
-  height: 6px;
+  height: 10px;
   width: 100%;
-  border-radius: 3px;
+  border-radius: 32px;
   background-color: light;
   transform: translate3d(0, -50%, 0);
   position: absolute;

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/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-graphic/index.js

@@ -57,6 +57,7 @@ const QCMImage = (props, context) => {
       "data-name": "answerText",
       className: style.titleWrapper
     }, /*#__PURE__*/React.createElement("div", {
+      title: title,
       className: classnames(style.title, innerHTML) // eslint-disable-next-line react/no-danger
       ,
       dangerouslySetInnerHTML: {

package/es/molecule/questions/qcm-graphic/index.js.map

@@ -1 +1 @@
-{"version":3,"sources":["../../../../src/molecule/questions/qcm-graphic/index.js"],"names":["React","PropTypes","classnames","Provider","innerHTML","getShadowBoxColorFromPrimary","style","QCMImage","props","context","answers","skin","primarySkinColor","answersViews","map","answer","key","onClick","title","selected","image","ariaLabel","boxShadow","backgroundColor","background","content","imageWrapper","backgroundImage","titleWrapper","__html","wrapper","contextTypes","childContextTypes","propTypes","arrayOf","shape","string","bool","func"],"mappings":"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","sourcesContent":["import React from 'react';\nimport PropTypes from 'prop-types';\nimport {getOr} from 'lodash/fp';\nimport classnames from 'classnames';\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 QCMImage = (props, context) => {\n  const {answers} = props;\n  const {skin} = context;\n  const primarySkinColor = getOr('#00B0FF', 'common.primary', skin);\n\n  const answersViews = answers.map((answer, key) => {\n    const {onClick, title, selected, image, ariaLabel} = answer;\n\n    return (\n      <div\n        onClick={onClick}\n        data-selected={selected}\n        data-name=\"answerGraphic\"\n        style={{\n          ...(selected && {\n            boxShadow: `0 4px 16px ${getShadowBoxColorFromPrimary(primarySkinColor)}`\n          })\n        }}\n        className={selected ? style.selected : style.answer}\n        key={key}\n      >\n        <div\n          data-name=\"answerBackground\"\n          style={{\n            backgroundColor: selected ? primarySkinColor : '#F4F4F5'\n          }}\n          className={style.background}\n        />\n        <div data-name=\"answerContent\" className={style.content}>\n          <div\n            className={style.imageWrapper}\n            data-name=\"answerImage\"\n            aria-label={ariaLabel || title}\n            style={{\n              backgroundImage: `url(${image})`\n            }}\n          />\n          <div data-name=\"answerText\" className={style.titleWrapper}>\n            <div\n              className={classnames(style.title, innerHTML)}\n              // eslint-disable-next-line react/no-danger\n              dangerouslySetInnerHTML={{__html: title}}\n            />\n          </div>\n        </div>\n      </div>\n    );\n  });\n\n  return (\n    <div data-name=\"qcm-graphic-wrapper\" className={style.wrapper}>\n      {answersViews}\n    </div>\n  );\n};\n\nQCMImage.contextTypes = {\n  skin: Provider.childContextTypes.skin\n};\n\nQCMImage.propTypes = {\n  answers: PropTypes.arrayOf(\n    PropTypes.shape({\n      title: PropTypes.string,\n      selected: PropTypes.bool,\n      onClick: PropTypes.func,\n      image: PropTypes.string,\n      ariaLabel: PropTypes.string\n    })\n  )\n};\n\nexport default QCMImage;\n"],"file":"index.js"}
+{"version":3,"sources":["../../../../src/molecule/questions/qcm-graphic/index.js"],"names":["React","PropTypes","classnames","Provider","innerHTML","getShadowBoxColorFromPrimary","style","QCMImage","props","context","answers","skin","primarySkinColor","answersViews","map","answer","key","onClick","title","selected","image","ariaLabel","boxShadow","backgroundColor","background","content","imageWrapper","backgroundImage","titleWrapper","__html","wrapper","contextTypes","childContextTypes","propTypes","arrayOf","shape","string","bool","func"],"mappings":"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","sourcesContent":["import React from 'react';\nimport PropTypes from 'prop-types';\nimport {getOr} from 'lodash/fp';\nimport classnames from 'classnames';\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 QCMImage = (props, context) => {\n  const {answers} = props;\n  const {skin} = context;\n  const primarySkinColor = getOr('#00B0FF', 'common.primary', skin);\n\n  const answersViews = answers.map((answer, key) => {\n    const {onClick, title, selected, image, ariaLabel} = answer;\n\n    return (\n      <div\n        onClick={onClick}\n        data-selected={selected}\n        data-name=\"answerGraphic\"\n        style={{\n          ...(selected && {\n            boxShadow: `0 4px 16px ${getShadowBoxColorFromPrimary(primarySkinColor)}`\n          })\n        }}\n        className={selected ? style.selected : style.answer}\n        key={key}\n      >\n        <div\n          data-name=\"answerBackground\"\n          style={{\n            backgroundColor: selected ? primarySkinColor : '#F4F4F5'\n          }}\n          className={style.background}\n        />\n        <div data-name=\"answerContent\" className={style.content}>\n          <div\n            className={style.imageWrapper}\n            data-name=\"answerImage\"\n            aria-label={ariaLabel || title}\n            style={{\n              backgroundImage: `url(${image})`\n            }}\n          />\n          <div data-name=\"answerText\" className={style.titleWrapper}>\n            <div\n              title={title}\n              className={classnames(style.title, innerHTML)}\n              // eslint-disable-next-line react/no-danger\n              dangerouslySetInnerHTML={{__html: title}}\n            />\n          </div>\n        </div>\n      </div>\n    );\n  });\n\n  return (\n    <div data-name=\"qcm-graphic-wrapper\" className={style.wrapper}>\n      {answersViews}\n    </div>\n  );\n};\n\nQCMImage.contextTypes = {\n  skin: Provider.childContextTypes.skin\n};\n\nQCMImage.propTypes = {\n  answers: PropTypes.arrayOf(\n    PropTypes.shape({\n      title: PropTypes.string,\n      selected: PropTypes.bool,\n      onClick: PropTypes.func,\n      image: PropTypes.string,\n      ariaLabel: PropTypes.string\n    })\n  )\n};\n\nexport default QCMImage;\n"],"file":"index.js"}

package/es/molecule/questions/qcm-graphic/style.css

@@ -64,6 +64,11 @@
   width: 100%;
   align-items: center;
   justify-content: center;
+  overflow: hidden;
+  hyphens: auto;
+  -ms-word-break: break-all;
+  word-break: break-all;
+  word-break: break-word;
 }
 
 .title {
@@ -144,10 +149,17 @@
   }
 
   .titleWrapper {
+    height: 100%;
+    width: 100%;
+    display: flex;
     white-space: wrap;
     overflow: hidden;
     padding: 0;
     justify-content: left;
     font-size: 15px;
   }
+
+  .title {
+    text-align: left;
+  }
 }

package/es/molecule/questions/qcm-graphic/test/fixtures/default.js

@@ -6,7 +6,7 @@ export default {
       selected: false,
       image: 'https://images.unsplash.com/photo-1467890947394-8171244e5410?dpr=2&auto=format&fit=crop&w=1080&h=720&q=80&cs=tinysrgb&crop=&bg='
     }, {
-      title: 'Lorem ipsum',
+      title: 'Lorem ipsum dolor sit amet, consectetur adipiscing elit, sut labore et dolore magna aliqua.',
       onClick: () => {},
       selected: false,
       image: 'https://images.unsplash.com/photo-1494477920939-88c59ba76428?dpr=2&auto=format&fit=crop&w=1080&h=607&q=80&cs=tinysrgb&crop=&bg='

package/es/molecule/questions/qcm-graphic/test/fixtures/default.js.map

@@ -1 +1 @@
-{"version":3,"sources":["../../../../../../src/molecule/questions/qcm-graphic/test/fixtures/default.js"],"names":["props","answers","title","onClick","selected","image"],"mappings":"AAAA,eAAe;AACbA,EAAAA,KAAK,EAAE;AACLC,IAAAA,OAAO,EAAE,CACP;AACEC,MAAAA,KAAK,EAAE,iCADT;AAEEC,MAAAA,OAAO,EAAE,MAAM,CAAE,CAFnB;AAGEC,MAAAA,QAAQ,EAAE,KAHZ;AAIEC,MAAAA,KAAK,EACH;AALJ,KADO,EAQP;AACEH,MAAAA,KAAK,EAAE,aADT;AAEEC,MAAAA,OAAO,EAAE,MAAM,CAAE,CAFnB;AAGEC,MAAAA,QAAQ,EAAE,KAHZ;AAIEC,MAAAA,KAAK,EACH;AALJ,KARO,EAeP;AACEH,MAAAA,KAAK,EAAE,OADT;AAEEC,MAAAA,OAAO,EAAE,MAAM,CAAE,CAFnB;AAGEC,MAAAA,QAAQ,EAAE,IAHZ;AAIEC,MAAAA,KAAK,EACH;AALJ,KAfO,EAsBP;AACEH,MAAAA,KAAK,EAAE,6BADT;AAEEC,MAAAA,OAAO,EAAE,MAAM,CAAE,CAFnB;AAGEC,MAAAA,QAAQ,EAAE,KAHZ;AAIEC,MAAAA,KAAK,EACH;AALJ,KAtBO,EA6BP;AACEH,MAAAA,KAAK,EAAE,iCADT;AAEEC,MAAAA,OAAO,EAAE,MAAM,CAAE,CAFnB;AAGEC,MAAAA,QAAQ,EAAE,KAHZ;AAIEC,MAAAA,KAAK,EACH;AALJ,KA7BO,EAoCP;AACEH,MAAAA,KAAK,EAAE,aADT;AAEEC,MAAAA,OAAO,EAAE,MAAM,CAAE,CAFnB;AAGEC,MAAAA,QAAQ,EAAE,KAHZ;AAIEC,MAAAA,KAAK,EACH;AALJ,KApCO,EA2CP;AACEH,MAAAA,KAAK,EAAE,OADT;AAEEC,MAAAA,OAAO,EAAE,MAAM,CAAE,CAFnB;AAGEC,MAAAA,QAAQ,EAAE,IAHZ;AAIEC,MAAAA,KAAK,EACH;AALJ,KA3CO,EAkDP;AACEH,MAAAA,KAAK,EAAE,6BADT;AAEEC,MAAAA,OAAO,EAAE,MAAM,CAAE,CAFnB;AAGEC,MAAAA,QAAQ,EAAE,KAHZ;AAIEC,MAAAA,KAAK,EACH;AALJ,KAlDO;AADJ;AADM,CAAf","sourcesContent":["export default {\n  props: {\n    answers: [\n      {\n        title: 'There is no need for a password',\n        onClick: () => {},\n        selected: false,\n        image:\n          'https://images.unsplash.com/photo-1467890947394-8171244e5410?dpr=2&auto=format&fit=crop&w=1080&h=720&q=80&cs=tinysrgb&crop=&bg='\n      },\n      {\n        title: 'Lorem ipsum',\n        onClick: () => {},\n        selected: false,\n        image:\n          'https://images.unsplash.com/photo-1494477920939-88c59ba76428?dpr=2&auto=format&fit=crop&w=1080&h=607&q=80&cs=tinysrgb&crop=&bg='\n      },\n      {\n        title: 'Lorem',\n        onClick: () => {},\n        selected: true,\n        image:\n          'https://images.unsplash.com/photo-1494416952682-200c9e760aac?dpr=2&auto=format&fit=crop&w=1080&h=607&q=80&cs=tinysrgb&crop=&bg='\n      },\n      {\n        title: 'You need to have a password',\n        onClick: () => {},\n        selected: false,\n        image:\n          'https://images.unsplash.com/photo-1493442043090-087540b34c1a?dpr=2&auto=format&fit=crop&w=1080&h=607&q=80&cs=tinysrgb&crop=&bg='\n      },\n      {\n        title: 'There is no need for a password',\n        onClick: () => {},\n        selected: false,\n        image:\n          'https://images.unsplash.com/photo-1467890947394-8171244e5410?dpr=2&auto=format&fit=crop&w=1080&h=720&q=80&cs=tinysrgb&crop=&bg='\n      },\n      {\n        title: 'Lorem ipsum',\n        onClick: () => {},\n        selected: false,\n        image:\n          'https://images.unsplash.com/photo-1494477920939-88c59ba76428?dpr=2&auto=format&fit=crop&w=1080&h=607&q=80&cs=tinysrgb&crop=&bg='\n      },\n      {\n        title: 'Lorem',\n        onClick: () => {},\n        selected: true,\n        image:\n          'https://images.unsplash.com/photo-1494416952682-200c9e760aac?dpr=2&auto=format&fit=crop&w=1080&h=607&q=80&cs=tinysrgb&crop=&bg='\n      },\n      {\n        title: 'You need to have a password',\n        onClick: () => {},\n        selected: false,\n        image:\n          'https://images.unsplash.com/photo-1493442043090-087540b34c1a?dpr=2&auto=format&fit=crop&w=1080&h=607&q=80&cs=tinysrgb&crop=&bg='\n      }\n    ]\n  }\n};\n"],"file":"default.js"}
+{"version":3,"sources":["../../../../../../src/molecule/questions/qcm-graphic/test/fixtures/default.js"],"names":["props","answers","title","onClick","selected","image"],"mappings":"AAAA,eAAe;AACbA,EAAAA,KAAK,EAAE;AACLC,IAAAA,OAAO,EAAE,CACP;AACEC,MAAAA,KAAK,EAAE,iCADT;AAEEC,MAAAA,OAAO,EAAE,MAAM,CAAE,CAFnB;AAGEC,MAAAA,QAAQ,EAAE,KAHZ;AAIEC,MAAAA,KAAK,EACH;AALJ,KADO,EAQP;AACEH,MAAAA,KAAK,EACH,6FAFJ;AAGEC,MAAAA,OAAO,EAAE,MAAM,CAAE,CAHnB;AAIEC,MAAAA,QAAQ,EAAE,KAJZ;AAKEC,MAAAA,KAAK,EACH;AANJ,KARO,EAgBP;AACEH,MAAAA,KAAK,EAAE,OADT;AAEEC,MAAAA,OAAO,EAAE,MAAM,CAAE,CAFnB;AAGEC,MAAAA,QAAQ,EAAE,IAHZ;AAIEC,MAAAA,KAAK,EACH;AALJ,KAhBO,EAuBP;AACEH,MAAAA,KAAK,EAAE,6BADT;AAEEC,MAAAA,OAAO,EAAE,MAAM,CAAE,CAFnB;AAGEC,MAAAA,QAAQ,EAAE,KAHZ;AAIEC,MAAAA,KAAK,EACH;AALJ,KAvBO,EA8BP;AACEH,MAAAA,KAAK,EAAE,iCADT;AAEEC,MAAAA,OAAO,EAAE,MAAM,CAAE,CAFnB;AAGEC,MAAAA,QAAQ,EAAE,KAHZ;AAIEC,MAAAA,KAAK,EACH;AALJ,KA9BO,EAqCP;AACEH,MAAAA,KAAK,EAAE,aADT;AAEEC,MAAAA,OAAO,EAAE,MAAM,CAAE,CAFnB;AAGEC,MAAAA,QAAQ,EAAE,KAHZ;AAIEC,MAAAA,KAAK,EACH;AALJ,KArCO,EA4CP;AACEH,MAAAA,KAAK,EAAE,OADT;AAEEC,MAAAA,OAAO,EAAE,MAAM,CAAE,CAFnB;AAGEC,MAAAA,QAAQ,EAAE,IAHZ;AAIEC,MAAAA,KAAK,EACH;AALJ,KA5CO,EAmDP;AACEH,MAAAA,KAAK,EAAE,6BADT;AAEEC,MAAAA,OAAO,EAAE,MAAM,CAAE,CAFnB;AAGEC,MAAAA,QAAQ,EAAE,KAHZ;AAIEC,MAAAA,KAAK,EACH;AALJ,KAnDO;AADJ;AADM,CAAf","sourcesContent":["export default {\n  props: {\n    answers: [\n      {\n        title: 'There is no need for a password',\n        onClick: () => {},\n        selected: false,\n        image:\n          'https://images.unsplash.com/photo-1467890947394-8171244e5410?dpr=2&auto=format&fit=crop&w=1080&h=720&q=80&cs=tinysrgb&crop=&bg='\n      },\n      {\n        title:\n          'Lorem ipsum dolor sit amet, consectetur adipiscing elit, sut labore et dolore magna aliqua.',\n        onClick: () => {},\n        selected: false,\n        image:\n          'https://images.unsplash.com/photo-1494477920939-88c59ba76428?dpr=2&auto=format&fit=crop&w=1080&h=607&q=80&cs=tinysrgb&crop=&bg='\n      },\n      {\n        title: 'Lorem',\n        onClick: () => {},\n        selected: true,\n        image:\n          'https://images.unsplash.com/photo-1494416952682-200c9e760aac?dpr=2&auto=format&fit=crop&w=1080&h=607&q=80&cs=tinysrgb&crop=&bg='\n      },\n      {\n        title: 'You need to have a password',\n        onClick: () => {},\n        selected: false,\n        image:\n          'https://images.unsplash.com/photo-1493442043090-087540b34c1a?dpr=2&auto=format&fit=crop&w=1080&h=607&q=80&cs=tinysrgb&crop=&bg='\n      },\n      {\n        title: 'There is no need for a password',\n        onClick: () => {},\n        selected: false,\n        image:\n          'https://images.unsplash.com/photo-1467890947394-8171244e5410?dpr=2&auto=format&fit=crop&w=1080&h=720&q=80&cs=tinysrgb&crop=&bg='\n      },\n      {\n        title: 'Lorem ipsum',\n        onClick: () => {},\n        selected: false,\n        image:\n          'https://images.unsplash.com/photo-1494477920939-88c59ba76428?dpr=2&auto=format&fit=crop&w=1080&h=607&q=80&cs=tinysrgb&crop=&bg='\n      },\n      {\n        title: 'Lorem',\n        onClick: () => {},\n        selected: true,\n        image:\n          'https://images.unsplash.com/photo-1494416952682-200c9e760aac?dpr=2&auto=format&fit=crop&w=1080&h=607&q=80&cs=tinysrgb&crop=&bg='\n      },\n      {\n        title: 'You need to have a password',\n        onClick: () => {},\n        selected: false,\n        image:\n          'https://images.unsplash.com/photo-1493442043090-087540b34c1a?dpr=2&auto=format&fit=crop&w=1080&h=607&q=80&cs=tinysrgb&crop=&bg='\n      }\n    ]\n  }\n};\n"],"file":"default.js"}

package/es/molecule/questions/qcm-graphic/test/fixtures/no-selected.js

@@ -6,7 +6,7 @@ export default {
       selected: false,
       image: 'https://images.unsplash.com/photo-1467890947394-8171244e5410?dpr=2&auto=format&fit=crop&w=1080&h=720&q=80&cs=tinysrgb&crop=&bg='
     }, {
-      title: 'Lorem ipsum',
+      title: 'Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua tempor incididunt ut labore et dolore  tempor incididunt ut labore et dolore magna aliqua tempor incididunt ut labore et dolore.',
       onClick: () => {},
       selected: false,
       image: 'https://images.unsplash.com/photo-1494477920939-88c59ba76428?dpr=2&auto=format&fit=crop&w=1080&h=607&q=80&cs=tinysrgb&crop=&bg='

package/es/molecule/questions/qcm-graphic/test/fixtures/no-selected.js.map

@@ -1 +1 @@
-{"version":3,"sources":["../../../../../../src/molecule/questions/qcm-graphic/test/fixtures/no-selected.js"],"names":["props","answers","title","onClick","selected","image"],"mappings":"AAAA,eAAe;AACbA,EAAAA,KAAK,EAAE;AACLC,IAAAA,OAAO,EAAE,CACP;AACEC,MAAAA,KAAK,EAAE,iCADT;AAEEC,MAAAA,OAAO,EAAE,MAAM,CAAE,CAFnB;AAGEC,MAAAA,QAAQ,EAAE,KAHZ;AAIEC,MAAAA,KAAK,EACH;AALJ,KADO,EAQP;AACEH,MAAAA,KAAK,EAAE,aADT;AAEEC,MAAAA,OAAO,EAAE,MAAM,CAAE,CAFnB;AAGEC,MAAAA,QAAQ,EAAE,KAHZ;AAIEC,MAAAA,KAAK,EACH;AALJ,KARO,EAeP;AACEH,MAAAA,KAAK,EAAE,OADT;AAEEC,MAAAA,OAAO,EAAE,MAAM,CAAE,CAFnB;AAGEC,MAAAA,QAAQ,EAAE,KAHZ;AAIEC,MAAAA,KAAK,EACH;AALJ,KAfO,EAsBP;AACEH,MAAAA,KAAK,EAAE,6BADT;AAEEC,MAAAA,OAAO,EAAE,MAAM,CAAE,CAFnB;AAGEC,MAAAA,QAAQ,EAAE,KAHZ;AAIEC,MAAAA,KAAK,EACH;AALJ,KAtBO;AADJ;AADM,CAAf","sourcesContent":["export default {\n  props: {\n    answers: [\n      {\n        title: 'There is no need for a password',\n        onClick: () => {},\n        selected: false,\n        image:\n          'https://images.unsplash.com/photo-1467890947394-8171244e5410?dpr=2&auto=format&fit=crop&w=1080&h=720&q=80&cs=tinysrgb&crop=&bg='\n      },\n      {\n        title: 'Lorem ipsum',\n        onClick: () => {},\n        selected: false,\n        image:\n          'https://images.unsplash.com/photo-1494477920939-88c59ba76428?dpr=2&auto=format&fit=crop&w=1080&h=607&q=80&cs=tinysrgb&crop=&bg='\n      },\n      {\n        title: 'Lorem',\n        onClick: () => {},\n        selected: false,\n        image:\n          'https://images.unsplash.com/photo-1494416952682-200c9e760aac?dpr=2&auto=format&fit=crop&w=1080&h=607&q=80&cs=tinysrgb&crop=&bg='\n      },\n      {\n        title: 'You need to have a password',\n        onClick: () => {},\n        selected: false,\n        image:\n          'https://images.unsplash.com/photo-1493442043090-087540b34c1a?dpr=2&auto=format&fit=crop&w=1080&h=607&q=80&cs=tinysrgb&crop=&bg='\n      }\n    ]\n  }\n};\n"],"file":"no-selected.js"}
+{"version":3,"sources":["../../../../../../src/molecule/questions/qcm-graphic/test/fixtures/no-selected.js"],"names":["props","answers","title","onClick","selected","image"],"mappings":"AAAA,eAAe;AACbA,EAAAA,KAAK,EAAE;AACLC,IAAAA,OAAO,EAAE,CACP;AACEC,MAAAA,KAAK,EAAE,iCADT;AAEEC,MAAAA,OAAO,EAAE,MAAM,CAAE,CAFnB;AAGEC,MAAAA,QAAQ,EAAE,KAHZ;AAIEC,MAAAA,KAAK,EACH;AALJ,KADO,EAQP;AACEH,MAAAA,KAAK,EACH,6PAFJ;AAGEC,MAAAA,OAAO,EAAE,MAAM,CAAE,CAHnB;AAIEC,MAAAA,QAAQ,EAAE,KAJZ;AAKEC,MAAAA,KAAK,EACH;AANJ,KARO,EAgBP;AACEH,MAAAA,KAAK,EAAE,OADT;AAEEC,MAAAA,OAAO,EAAE,MAAM,CAAE,CAFnB;AAGEC,MAAAA,QAAQ,EAAE,KAHZ;AAIEC,MAAAA,KAAK,EACH;AALJ,KAhBO,EAuBP;AACEH,MAAAA,KAAK,EAAE,6BADT;AAEEC,MAAAA,OAAO,EAAE,MAAM,CAAE,CAFnB;AAGEC,MAAAA,QAAQ,EAAE,KAHZ;AAIEC,MAAAA,KAAK,EACH;AALJ,KAvBO;AADJ;AADM,CAAf","sourcesContent":["export default {\n  props: {\n    answers: [\n      {\n        title: 'There is no need for a password',\n        onClick: () => {},\n        selected: false,\n        image:\n          'https://images.unsplash.com/photo-1467890947394-8171244e5410?dpr=2&auto=format&fit=crop&w=1080&h=720&q=80&cs=tinysrgb&crop=&bg='\n      },\n      {\n        title:\n          'Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua tempor incididunt ut labore et dolore  tempor incididunt ut labore et dolore magna aliqua tempor incididunt ut labore et dolore.',\n        onClick: () => {},\n        selected: false,\n        image:\n          'https://images.unsplash.com/photo-1494477920939-88c59ba76428?dpr=2&auto=format&fit=crop&w=1080&h=607&q=80&cs=tinysrgb&crop=&bg='\n      },\n      {\n        title: 'Lorem',\n        onClick: () => {},\n        selected: false,\n        image:\n          'https://images.unsplash.com/photo-1494416952682-200c9e760aac?dpr=2&auto=format&fit=crop&w=1080&h=607&q=80&cs=tinysrgb&crop=&bg='\n      },\n      {\n        title: 'You need to have a password',\n        onClick: () => {},\n        selected: false,\n        image:\n          'https://images.unsplash.com/photo-1493442043090-087540b34c1a?dpr=2&auto=format&fit=crop&w=1080&h=607&q=80&cs=tinysrgb&crop=&bg='\n      }\n    ]\n  }\n};\n"],"file":"no-selected.js"}

package/es/molecule/questions/qcm-graphic/test/qcm-graphic.js

@@ -28,7 +28,7 @@ test('onClick should be reachable, should match given aria-label', t => {
   });
   const answersImages = wrapper.find('[data-name="answerImage"]');
   t.true(answersImages.at(1).exists());
-  t.is(answersImages.at(1).props()['aria-label'], 'Lorem ipsum');
+  t.is(answersImages.at(1).props()['aria-label'], 'Lorem ipsum dolor sit amet, consectetur adipiscing elit, sut labore et dolore magna aliqua.');
   const answers = wrapper.find('[data-name="answerGraphic"]');
   answers.at(1).simulate('click');
   t.true(answerWasClicked);

package/es/molecule/questions/qcm-graphic/test/qcm-graphic.js.map

@@ -1 +1 @@
-{"version":3,"sources":["../../../../../src/molecule/questions/qcm-graphic/test/qcm-graphic.js"],"names":["browserEnv","test","React","shallow","configure","Adapter","QCMImage","defaultFixture","adapter","translate","t","answerWasClicked","props","answers","onClick","wrapper","context","answersImages","find","true","at","exists","is","simulate","pass","firstAnswer","deepEqual","style","unselectedBackgroundAnswer","children","backgroundColor","firstAnswerText","thirdAnswer","boxShadow","selectedBackgroundAnswer"],"mappings":";;;;AAAA,OAAOA,UAAP,MAAuB,aAAvB;AACA,OAAOC,IAAP,MAAiB,KAAjB;AACA,OAAOC,KAAP,MAAkB,OAAlB;AACA,SAAQC,OAAR,EAAiBC,SAAjB,QAAiC,QAAjC;AAEA,OAAOC,OAAP,MAAoB,yBAApB;AACA,OAAOC,QAAP,MAAqB,IAArB;AACA,OAAOC,cAAP,MAA2B,oBAA3B;AAEAP,UAAU;AACVI,SAAS,CAAC;AAACI,EAAAA,OAAO,EAAE,IAAIH,OAAJ;AAAV,CAAD,CAAT;AACA,MAAMI,SAAS,YAAf;AAEAR,IAAI,CAAC,4DAAD,EAA+DS,CAAC,IAAI;AACtE,MAAIC,gBAAgB,GAAG,KAAvB;AACAJ,EAAAA,cAAc,CAACK,KAAf,CAAqBC,OAArB,CAA6B,CAA7B,0BACKN,cAAc,CAACK,KAAf,CAAqBC,OAArB,CAA6B,CAA7B,CADL;AAEEC,IAAAA,OAAO,EAAE,MAAM;AACbH,MAAAA,gBAAgB,GAAG,IAAnB;AACD;AAJH;AAOA,QAAMI,OAAO,GAAGZ,OAAO,eAAC,oBAAC,QAAD,EAAcI,cAAc,CAACK,KAA7B,CAAD,EAAyC;AAC9DI,IAAAA,OAAO,EAAE;AAACP,MAAAA;AAAD;AADqD,GAAzC,CAAvB;AAIA,QAAMQ,aAAa,GAAGF,OAAO,CAACG,IAAR,CAAa,2BAAb,CAAtB;AACAR,EAAAA,CAAC,CAACS,IAAF,CAAOF,aAAa,CAACG,EAAd,CAAiB,CAAjB,EAAoBC,MAApB,EAAP;AACAX,EAAAA,CAAC,CAACY,EAAF,CAAKL,aAAa,CAACG,EAAd,CAAiB,CAAjB,EAAoBR,KAApB,GAA4B,YAA5B,CAAL,EAAgD,aAAhD;AAEA,QAAMC,OAAO,GAAGE,OAAO,CAACG,IAAR,CAAa,6BAAb,CAAhB;AACAL,EAAAA,OAAO,CAACO,EAAR,CAAW,CAAX,EAAcG,QAAd,CAAuB,OAAvB;AACAb,EAAAA,CAAC,CAACS,IAAF,CAAOR,gBAAP;AACAD,EAAAA,CAAC,CAACc,IAAF;AACD,CArBG,CAAJ;AAuBAvB,IAAI,CAAC,0EAAD,EAA6ES,CAAC,IAAI;AACpF,QAAMK,OAAO,GAAGZ,OAAO,eAAC,oBAAC,QAAD,EAAcI,cAAc,CAACK,KAA7B,CAAD,EAAyC;AAC9DI,IAAAA,OAAO,EAAE;AAACP,MAAAA;AAAD;AADqD,GAAzC,CAAvB;AAGA,QAAMI,OAAO,GAAGE,OAAO,CAACG,IAAR,CAAa,6BAAb,CAAhB;AAEA,QAAMO,WAAW,GAAGZ,OAAO,CAACO,EAAR,CAAW,CAAX,CAApB;AACAV,EAAAA,CAAC,CAACS,IAAF,CAAOM,WAAW,CAACJ,MAAZ,EAAP;AACAX,EAAAA,CAAC,CAACgB,SAAF,CAAYD,WAAW,CAACb,KAAZ,GAAoBe,KAAhC,EAAuC,EAAvC;AACA,QAAMC,0BAA0B,GAAGH,WAAW,CAACI,QAAZ,GAAuBT,EAAvB,CAA0B,CAA1B,CAAnC;AACAV,EAAAA,CAAC,CAACS,IAAF,CAAOS,0BAA0B,CAACP,MAA3B,EAAP;AACAX,EAAAA,CAAC,CAACgB,SAAF,CAAYE,0BAA0B,CAAChB,KAA3B,GAAmCe,KAA/C,EAAsD;AAACG,IAAAA,eAAe,EAAE;AAAlB,GAAtD;AACA,QAAMC,eAAe,GAAGN,WAAW,CAACI,QAAZ,GAAuBT,EAAvB,CAA0B,CAA1B,EAA6BS,QAA7B,GAAwCT,EAAxC,CAA2C,CAA3C,EAA8CS,QAA9C,GAAyDT,EAAzD,CAA4D,CAA5D,CAAxB;AACAV,EAAAA,CAAC,CAACS,IAAF,CAAOY,eAAe,CAACV,MAAhB,EAAP;AAEA,QAAMW,WAAW,GAAGnB,OAAO,CAACO,EAAR,CAAW,CAAX,CAApB;AACAV,EAAAA,CAAC,CAACS,IAAF,CAAOa,WAAW,CAACX,MAAZ,EAAP;AACAX,EAAAA,CAAC,CAACgB,SAAF,CAAYM,WAAW,CAACpB,KAAZ,GAAoBe,KAAhC,EAAuC;AAACM,IAAAA,SAAS,EAAE;AAAZ,GAAvC;AACA,QAAMC,wBAAwB,GAAGF,WAAW,CAACH,QAAZ,GAAuBT,EAAvB,CAA0B,CAA1B,CAAjC;AACAV,EAAAA,CAAC,CAACS,IAAF,CAAOe,wBAAwB,CAACb,MAAzB,EAAP;AACAX,EAAAA,CAAC,CAACgB,SAAF,CAAYQ,wBAAwB,CAACtB,KAAzB,GAAiCe,KAA7C,EAAoD;AAACG,IAAAA,eAAe,EAAE;AAAlB,GAApD;AACD,CArBG,CAAJ","sourcesContent":["import browserEnv from 'browser-env';\nimport test from 'ava';\nimport React from 'react';\nimport {shallow, configure} from 'enzyme';\nimport {identity} from 'lodash/fp';\nimport Adapter from 'enzyme-adapter-react-16';\nimport QCMImage from '..';\nimport defaultFixture from './fixtures/default';\n\nbrowserEnv();\nconfigure({adapter: new Adapter()});\nconst translate = identity;\n\ntest('onClick should be reachable, should match given aria-label', t => {\n  let answerWasClicked = false;\n  defaultFixture.props.answers[1] = {\n    ...defaultFixture.props.answers[1],\n    onClick: () => {\n      answerWasClicked = true;\n    }\n  };\n\n  const wrapper = shallow(<QCMImage {...defaultFixture.props} />, {\n    context: {translate}\n  });\n\n  const answersImages = wrapper.find('[data-name=\"answerImage\"]');\n  t.true(answersImages.at(1).exists());\n  t.is(answersImages.at(1).props()['aria-label'], 'Lorem ipsum');\n\n  const answers = wrapper.find('[data-name=\"answerGraphic\"]');\n  answers.at(1).simulate('click');\n  t.true(answerWasClicked);\n  t.pass();\n});\n\ntest(\"should set: selected's background to Primary, unselected's no background\", t => {\n  const wrapper = shallow(<QCMImage {...defaultFixture.props} />, {\n    context: {translate}\n  });\n  const answers = wrapper.find('[data-name=\"answerGraphic\"]');\n\n  const firstAnswer = answers.at(0);\n  t.true(firstAnswer.exists());\n  t.deepEqual(firstAnswer.props().style, {});\n  const unselectedBackgroundAnswer = firstAnswer.children().at(0);\n  t.true(unselectedBackgroundAnswer.exists());\n  t.deepEqual(unselectedBackgroundAnswer.props().style, {backgroundColor: '#F4F4F5'});\n  const firstAnswerText = firstAnswer.children().at(1).children().at(1).children().at(0);\n  t.true(firstAnswerText.exists());\n\n  const thirdAnswer = answers.at(2);\n  t.true(thirdAnswer.exists());\n  t.deepEqual(thirdAnswer.props().style, {boxShadow: '0 4px 16px rgba(0, 122, 179, 0.25)'});\n  const selectedBackgroundAnswer = thirdAnswer.children().at(0);\n  t.true(selectedBackgroundAnswer.exists());\n  t.deepEqual(selectedBackgroundAnswer.props().style, {backgroundColor: '#00B0FF'});\n});\n"],"file":"qcm-graphic.js"}
+{"version":3,"sources":["../../../../../src/molecule/questions/qcm-graphic/test/qcm-graphic.js"],"names":["browserEnv","test","React","shallow","configure","Adapter","QCMImage","defaultFixture","adapter","translate","t","answerWasClicked","props","answers","onClick","wrapper","context","answersImages","find","true","at","exists","is","simulate","pass","firstAnswer","deepEqual","style","unselectedBackgroundAnswer","children","backgroundColor","firstAnswerText","thirdAnswer","boxShadow","selectedBackgroundAnswer"],"mappings":"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","sourcesContent":["import browserEnv from 'browser-env';\nimport test from 'ava';\nimport React from 'react';\nimport {shallow, configure} from 'enzyme';\nimport {identity} from 'lodash/fp';\nimport Adapter from 'enzyme-adapter-react-16';\nimport QCMImage from '..';\nimport defaultFixture from './fixtures/default';\n\nbrowserEnv();\nconfigure({adapter: new Adapter()});\nconst translate = identity;\n\ntest('onClick should be reachable, should match given aria-label', t => {\n  let answerWasClicked = false;\n  defaultFixture.props.answers[1] = {\n    ...defaultFixture.props.answers[1],\n    onClick: () => {\n      answerWasClicked = true;\n    }\n  };\n\n  const wrapper = shallow(<QCMImage {...defaultFixture.props} />, {\n    context: {translate}\n  });\n\n  const answersImages = wrapper.find('[data-name=\"answerImage\"]');\n  t.true(answersImages.at(1).exists());\n  t.is(\n    answersImages.at(1).props()['aria-label'],\n    'Lorem ipsum dolor sit amet, consectetur adipiscing elit, sut labore et dolore magna aliqua.'\n  );\n\n  const answers = wrapper.find('[data-name=\"answerGraphic\"]');\n  answers.at(1).simulate('click');\n  t.true(answerWasClicked);\n  t.pass();\n});\n\ntest(\"should set: selected's background to Primary, unselected's no background\", t => {\n  const wrapper = shallow(<QCMImage {...defaultFixture.props} />, {\n    context: {translate}\n  });\n  const answers = wrapper.find('[data-name=\"answerGraphic\"]');\n\n  const firstAnswer = answers.at(0);\n  t.true(firstAnswer.exists());\n  t.deepEqual(firstAnswer.props().style, {});\n  const unselectedBackgroundAnswer = firstAnswer.children().at(0);\n  t.true(unselectedBackgroundAnswer.exists());\n  t.deepEqual(unselectedBackgroundAnswer.props().style, {backgroundColor: '#F4F4F5'});\n  const firstAnswerText = firstAnswer.children().at(1).children().at(1).children().at(0);\n  t.true(firstAnswerText.exists());\n\n  const thirdAnswer = answers.at(2);\n  t.true(thirdAnswer.exists());\n  t.deepEqual(thirdAnswer.props().style, {boxShadow: '0 4px 16px rgba(0, 122, 179, 0.25)'});\n  const selectedBackgroundAnswer = thirdAnswer.children().at(0);\n  t.true(selectedBackgroundAnswer.exists());\n  t.deepEqual(selectedBackgroundAnswer.props().style, {backgroundColor: '#00B0FF'});\n});\n"],"file":"qcm-graphic.js"}

package/es/molecule/questions/question-range/style.css

@@ -1,19 +1,18 @@
 @value breakpoints: "../../../variables/breakpoints.css";
 @value mobile from breakpoints;
 @value colors: "../../../variables/colors.css";
-@value brand from colors;
-@value black from colors;
+@value cm_blue_900 from colors;
 
 .wrapper {
   width: 500px;
 }
 
 .title {
-  color: brand;
   display: table;
   font-family: "Gilroy";
-  font-size: 24px;
-  font-weight: 700;
+  font-size: 28px;
+  font-weight: bold;
+  line-height: 36px;
   margin: 0 auto 15px;
   text-align: center;
   user-select: none;
@@ -27,11 +26,13 @@
 
 .label {
   font-family: "Gilroy";
-  color: black;
-  font-size: 15px;
-  font-weight: 700;
+  color: cm_blue_900;
+  font-size: 18px;
+  font-weight: 600;
   display: inline-block;
+  line-height: 24px;
   user-select: none;
+  font-style: normal;
 }
 
 @media mobile {

package/es/molecule/search/test/fixtures.js

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

package/es/molecule/search/test/fixtures.js.map

@@ -0,0 +1 @@
+{"version":3,"sources":["../../../../src/molecule/search/test/fixtures.js"],"names":["test","forEach","renderComponentMacro","MoleculeSearch","fixtureDefault","fixtureWithValue","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,cAAP,MAA2B,IAA3B;AACA,OAAOC,cAAP,MAA2B,oBAA3B;AACA,OAAOC,gBAAP,MAA6B,uBAA7B;AAEAL,IAAI,CAAC,yDAAD,EAA4DM,CAAC,IAAI;AACnEA,EAAAA,CAAC,CAACC,IAAF;AACAN,EAAAA,OAAO,CAACE,cAAc,CAACK,SAAhB,EAA2B,CAACC,KAAD,EAAQC,GAAR,KAAgB;AAChDJ,IAAAA,CAAC,CAACK,GAAF,CAAMF,KAAN,EAAaG,SAAb,EAAyB,mDAAkDF,GAAI,mEAA/E;AACD,GAFM,CAAP;AAGD,CALG,CAAJ;AAOAV,IAAI,CAAC,0DAAD,EAA6DE,oBAA7D,EAAmFC,cAAnF,EAAmGC,cAAnG,CAAJ;AACAJ,IAAI,CAAC,4DAAD,EAA+DE,oBAA/D,EAAqFC,cAArF,EAAqGE,gBAArG,CAAJ","sourcesContent":["import test from 'ava';\nimport forEach from 'lodash/forEach';\nimport renderComponentMacro from '../../../test/helpers/render-component';\nimport MoleculeSearch from '..';\nimport fixtureDefault from './fixtures/default';\nimport fixtureWithValue from './fixtures/with-value';\n\ntest('Molecule › MoleculeSearch > should have valid propTypes', t => {\n  t.pass();\n  forEach(MoleculeSearch.propTypes, (value, key) => {\n    t.not(value, undefined, `PropType for \"Molecule.MoleculeSearch.propTypes.${key}\" may not be undefined. Did you mistype the propTypes definition?`);\n  });\n});\n\ntest('Molecule › MoleculeSearch › Default › should be rendered', renderComponentMacro, MoleculeSearch, fixtureDefault);\ntest('Molecule › MoleculeSearch › WithValue › should be rendered', renderComponentMacro, MoleculeSearch, fixtureWithValue);\n"],"file":"fixtures.js"}

package/lib/atom/range/handle.css

@@ -1,10 +1,26 @@
 @value colors: "../../variables/colors.css";
-@value brand from colors;
+@value white from colors;
+@value cm_grey_200 from colors;
+@value cm_grey_500 from colors;
+
+.wrapper {
+  height: 100%;
+  width: 100%;
+  border-radius: 100%; 
+  box-shadow: 0px 0px 20px rgba(0, 0, 0, 0.25);
+  overflow: hidden;
+}
+
+.wrapper:hover {
+  box-shadow: none;
+  overflow: visible;
+}
 
 .default {
   border-radius: 100%;
-  border: 1px solid brand;
+  border: 4px solid white;
   box-sizing: border-box;
   height: 100%;
   width: 100%;
+  border-radius: 100%; 
 }

package/lib/atom/range/handle.js

@@ -13,6 +13,8 @@ var _propTypes = _interopRequireDefault(require("prop-types"));
 
 var _provider = _interopRequireDefault(require("../provider"));
 
+var _getShadowBoxColorFromPrimary = require("../../util/get-shadow-box-color-from-primary");
+
 var _handle = _interopRequireDefault(require("./handle.css"));
 
 function _interopRequireDefault(obj) { return obj && obj.__esModule ? obj : { default: obj }; }
@@ -63,15 +65,18 @@ class Handle extends _react.default.Component {
       skin
     } = this.context;
     const primaryColor = (0, _getOr2.default)('#00B0FF', 'common.primary', skin);
-    const borderColor = primaryColor;
+    const backgroundColor = primaryColor;
     return /*#__PURE__*/_react.default.createElement("div", {
+      className: _handle.default.wrapper
+    }, /*#__PURE__*/_react.default.createElement("div", {
       style: {
-        borderColor
+        backgroundColor,
+        boxShadow: `0px 0px 20px ${(0, _getShadowBoxColorFromPrimary.getShadowBoxColorFromPrimary)(primaryColor)}`
       },
       className: _handle.default.default,
       ref: this.setHandle,
       "data-name": 'handle'
-    });
+    }));
   }
 
 }

package/lib/atom/range/handle.js.map

@@ -1 +1 @@
-{"version":3,"sources":["../../../src/atom/range/handle.js"],"names":["Hammer","window","require","undefined","Handle","React","Component","constructor","props","context","setHandle","bind","componentDidMount","onPanStart","onPanEnd","onPan","hammer","handle","on","componentWillUnmount","stop","destroy","el","render","skin","primaryColor","borderColor","style","default","Provider","childContextTypes","propTypes","PropTypes","func"],"mappings":";;;;;;;;;AACA;;AACA;;AACA;;AACA;;;;;;AAEA,MAAMA,MAAM,GACV;AACA,OAAOC,MAAP,KAAkB,WAAlB,GAAgCC,OAAO,CAAC,UAAD,CAAvC;AAAsD;AAA2BC,SAFnF;;AAIA,MAAMC,MAAN,SAAqBC,eAAMC,SAA3B,CAAqC;AAWnCC,EAAAA,WAAW,CAACC,KAAD,EAAQC,OAAR,EAAiB;AAC1B,UAAMD,KAAN,EAAaC,OAAb;AAEA,SAAKC,SAAL,GAAiB,KAAKA,SAAL,CAAeC,IAAf,CAAoB,IAApB,CAAjB;AACD;;AAEDC,EAAAA,iBAAiB,GAAG;AAClB;AACA,QAAIZ,MAAJ,EAAY;AACV,YAAM;AAACa,QAAAA,UAAU,iBAAX;AAAoBC,QAAAA,QAAQ,iBAA5B;AAAqCC,QAAAA,KAAK;AAA1C,UAAqD,KAAKP,KAAhE;AAEA,WAAKQ,MAAL,GAAc,IAAIhB,MAAJ,CAAW,KAAKiB,MAAhB,CAAd;AACA,WAAKD,MAAL,CAAYE,EAAZ,CAAe,UAAf,EAA2BL,UAA3B;AACA,WAAKG,MAAL,CAAYE,EAAZ,CAAe,QAAf,EAAyBJ,QAAzB;AAEA,WAAKE,MAAL,CAAYE,EAAZ,CAAe,kBAAf,EAAmCH,KAAnC;AACD;AACF;;AAEDI,EAAAA,oBAAoB,GAAG;AACrB,QAAI,KAAKH,MAAT,EAAiB;AACf,WAAKA,MAAL,CAAYI,IAAZ;AACA,WAAKJ,MAAL,CAAYK,OAAZ;AACD;;AACD,SAAKL,MAAL,GAAc,IAAd;AACD;;AAEDN,EAAAA,SAAS,CAACY,EAAD,EAAK;AACZ,SAAKL,MAAL,GAAcK,EAAd;AACD;;AAEDC,EAAAA,MAAM,GAAG;AACP,UAAM;AAACC,MAAAA;AAAD,QAAS,KAAKf,OAApB;AACA,UAAMgB,YAAY,GAAG,qBAAM,SAAN,EAAiB,gBAAjB,EAAmCD,IAAnC,CAArB;AACA,UAAME,WAAW,GAAGD,YAApB;AAEA,wBACE;AACE,MAAA,KAAK,EAAE;AAACC,QAAAA;AAAD,OADT;AAEE,MAAA,SAAS,EAAEC,gBAAMC,OAFnB;AAGE,MAAA,GAAG,EAAE,KAAKlB,SAHZ;AAIE,mBAAW;AAJb,MADF;AAQD;;AAvDkC;;gBAA/BN,M,kBAOkB;AACpBoB,EAAAA,IAAI,EAAEK,kBAASC,iBAAT,CAA2BN;AADb,C;;AAPlBpB,M,CACG2B,S,2CAAY;AACjBhB,EAAAA,KAAK,EAAEiB,mBAAUC,IADA;AAEjBpB,EAAAA,UAAU,EAAEmB,mBAAUC,IAFL;AAGjBnB,EAAAA,QAAQ,EAAEkB,mBAAUC;AAHH,C;eAyDN7B,M","sourcesContent":["import {noop, getOr} from 'lodash/fp';\nimport React from 'react';\nimport PropTypes from 'prop-types';\nimport Provider from '../provider';\nimport style from './handle.css';\n\nconst Hammer =\n  // eslint-disable-next-line no-undef\n  typeof window !== 'undefined' ? require('hammerjs') : /* istanbul ignore next */ undefined;\n\nclass Handle extends React.Component {\n  static propTypes = {\n    onPan: PropTypes.func,\n    onPanStart: PropTypes.func,\n    onPanEnd: PropTypes.func\n  };\n\n  static contextTypes = {\n    skin: Provider.childContextTypes.skin\n  };\n\n  constructor(props, context) {\n    super(props, context);\n\n    this.setHandle = this.setHandle.bind(this);\n  }\n\n  componentDidMount() {\n    /* istanbul ignore else */\n    if (Hammer) {\n      const {onPanStart = noop, onPanEnd = noop, onPan = noop} = this.props;\n\n      this.hammer = new Hammer(this.handle);\n      this.hammer.on('panstart', onPanStart);\n      this.hammer.on('panend', onPanEnd);\n\n      this.hammer.on('panleft panright', onPan);\n    }\n  }\n\n  componentWillUnmount() {\n    if (this.hammer) {\n      this.hammer.stop();\n      this.hammer.destroy();\n    }\n    this.hammer = null;\n  }\n\n  setHandle(el) {\n    this.handle = el;\n  }\n\n  render() {\n    const {skin} = this.context;\n    const primaryColor = getOr('#00B0FF', 'common.primary', skin);\n    const borderColor = primaryColor;\n\n    return (\n      <div\n        style={{borderColor}}\n        className={style.default}\n        ref={this.setHandle}\n        data-name={'handle'}\n      />\n    );\n  }\n}\n\nexport default Handle;\n"],"file":"handle.js"}
+{"version":3,"sources":["../../../src/atom/range/handle.js"],"names":["Hammer","window","require","undefined","Handle","React","Component","constructor","props","context","setHandle","bind","componentDidMount","onPanStart","onPanEnd","onPan","hammer","handle","on","componentWillUnmount","stop","destroy","el","render","skin","primaryColor","backgroundColor","style","wrapper","boxShadow","default","Provider","childContextTypes","propTypes","PropTypes","func"],"mappings":";;;;;;;;;AACA;;AACA;;AACA;;AACA;;AACA;;;;;;AAEA,MAAMA,MAAM,GACV;AACA,OAAOC,MAAP,KAAkB,WAAlB,GAAgCC,OAAO,CAAC,UAAD,CAAvC;AAAsD;AAA2BC,SAFnF;;AAIA,MAAMC,MAAN,SAAqBC,eAAMC,SAA3B,CAAqC;AAWnCC,EAAAA,WAAW,CAACC,KAAD,EAAQC,OAAR,EAAiB;AAC1B,UAAMD,KAAN,EAAaC,OAAb;AAEA,SAAKC,SAAL,GAAiB,KAAKA,SAAL,CAAeC,IAAf,CAAoB,IAApB,CAAjB;AACD;;AAEDC,EAAAA,iBAAiB,GAAG;AAClB;AACA,QAAIZ,MAAJ,EAAY;AACV,YAAM;AAACa,QAAAA,UAAU,iBAAX;AAAoBC,QAAAA,QAAQ,iBAA5B;AAAqCC,QAAAA,KAAK;AAA1C,UAAqD,KAAKP,KAAhE;AAEA,WAAKQ,MAAL,GAAc,IAAIhB,MAAJ,CAAW,KAAKiB,MAAhB,CAAd;AACA,WAAKD,MAAL,CAAYE,EAAZ,CAAe,UAAf,EAA2BL,UAA3B;AACA,WAAKG,MAAL,CAAYE,EAAZ,CAAe,QAAf,EAAyBJ,QAAzB;AAEA,WAAKE,MAAL,CAAYE,EAAZ,CAAe,kBAAf,EAAmCH,KAAnC;AACD;AACF;;AAEDI,EAAAA,oBAAoB,GAAG;AACrB,QAAI,KAAKH,MAAT,EAAiB;AACf,WAAKA,MAAL,CAAYI,IAAZ;AACA,WAAKJ,MAAL,CAAYK,OAAZ;AACD;;AACD,SAAKL,MAAL,GAAc,IAAd;AACD;;AAEDN,EAAAA,SAAS,CAACY,EAAD,EAAK;AACZ,SAAKL,MAAL,GAAcK,EAAd;AACD;;AAEDC,EAAAA,MAAM,GAAG;AACP,UAAM;AAACC,MAAAA;AAAD,QAAS,KAAKf,OAApB;AACA,UAAMgB,YAAY,GAAG,qBAAM,SAAN,EAAiB,gBAAjB,EAAmCD,IAAnC,CAArB;AACA,UAAME,eAAe,GAAGD,YAAxB;AAEA,wBACE;AAAK,MAAA,SAAS,EAAEE,gBAAMC;AAAtB,oBACE;AACE,MAAA,KAAK,EAAE;AACLF,QAAAA,eADK;AAELG,QAAAA,SAAS,EAAG,gBAAe,gEAA6BJ,YAA7B,CAA2C;AAFjE,OADT;AAKE,MAAA,SAAS,EAAEE,gBAAMG,OALnB;AAME,MAAA,GAAG,EAAE,KAAKpB,SANZ;AAOE,mBAAW;AAPb,MADF,CADF;AAaD;;AA5DkC;;gBAA/BN,M,kBAOkB;AACpBoB,EAAAA,IAAI,EAAEO,kBAASC,iBAAT,CAA2BR;AADb,C;;AAPlBpB,M,CACG6B,S,2CAAY;AACjBlB,EAAAA,KAAK,EAAEmB,mBAAUC,IADA;AAEjBtB,EAAAA,UAAU,EAAEqB,mBAAUC,IAFL;AAGjBrB,EAAAA,QAAQ,EAAEoB,mBAAUC;AAHH,C;eA8DN/B,M","sourcesContent":["import {noop, getOr} from 'lodash/fp';\nimport React from 'react';\nimport PropTypes from 'prop-types';\nimport Provider from '../provider';\nimport {getShadowBoxColorFromPrimary} from '../../util/get-shadow-box-color-from-primary';\nimport style from './handle.css';\n\nconst Hammer =\n  // eslint-disable-next-line no-undef\n  typeof window !== 'undefined' ? require('hammerjs') : /* istanbul ignore next */ undefined;\n\nclass Handle extends React.Component {\n  static propTypes = {\n    onPan: PropTypes.func,\n    onPanStart: PropTypes.func,\n    onPanEnd: PropTypes.func\n  };\n\n  static contextTypes = {\n    skin: Provider.childContextTypes.skin\n  };\n\n  constructor(props, context) {\n    super(props, context);\n\n    this.setHandle = this.setHandle.bind(this);\n  }\n\n  componentDidMount() {\n    /* istanbul ignore else */\n    if (Hammer) {\n      const {onPanStart = noop, onPanEnd = noop, onPan = noop} = this.props;\n\n      this.hammer = new Hammer(this.handle);\n      this.hammer.on('panstart', onPanStart);\n      this.hammer.on('panend', onPanEnd);\n\n      this.hammer.on('panleft panright', onPan);\n    }\n  }\n\n  componentWillUnmount() {\n    if (this.hammer) {\n      this.hammer.stop();\n      this.hammer.destroy();\n    }\n    this.hammer = null;\n  }\n\n  setHandle(el) {\n    this.handle = el;\n  }\n\n  render() {\n    const {skin} = this.context;\n    const primaryColor = getOr('#00B0FF', 'common.primary', skin);\n    const backgroundColor = primaryColor;\n\n    return (\n      <div className={style.wrapper}>\n        <div\n          style={{\n            backgroundColor,\n            boxShadow: `0px 0px 20px ${getShadowBoxColorFromPrimary(primaryColor)}`\n          }}\n          className={style.default}\n          ref={this.setHandle}\n          data-name={'handle'}\n        />\n      </div>\n    );\n  }\n}\n\nexport default Handle;\n"],"file":"handle.js"}

package/lib/atom/range/style.css

@@ -15,9 +15,9 @@
 }
 
 .track {
-  height: 6px;
+  height: 10px;
   width: 100%;
-  border-radius: 3px;
+  border-radius: 32px;
   background-color: light;
   transform: translate3d(0, -50%, 0);
   position: absolute;

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

@@ -0,0 +1,28 @@
+"use strict";
+
+var _ava = _interopRequireDefault(require("ava"));
+
+var _forEach = _interopRequireDefault(require("lodash/forEach"));
+
+var _renderComponent = _interopRequireDefault(require("../../../test/helpers/render-component"));
+
+var _ = _interopRequireDefault(require(".."));
+
+var _default = _interopRequireDefault(require("./fixtures/default"));
+
+var _loading = _interopRequireDefault(require("./fixtures/loading"));
+
+var _videoTranslate = _interopRequireDefault(require("./fixtures/video-translate"));
+
+function _interopRequireDefault(obj) { return obj && obj.__esModule ? obj : { default: obj }; }
+
+(0, _ava.default)('Molecule › MoleculeCockpitPopin > should have valid propTypes', t => {
+  t.pass();
+  (0, _forEach.default)(_.default.propTypes, (value, key) => {
+    t.not(value, undefined, `PropType for "Molecule.MoleculeCockpitPopin.propTypes.${key}" may not be undefined. Did you mistype the propTypes definition?`);
+  });
+});
+(0, _ava.default)('Molecule › MoleculeCockpitPopin › Default › should be rendered', _renderComponent.default, _.default, _default.default);
+(0, _ava.default)('Molecule › MoleculeCockpitPopin › Loading › should be rendered', _renderComponent.default, _.default, _loading.default);
+(0, _ava.default)('Molecule › MoleculeCockpitPopin › VideoTranslate › should be rendered', _renderComponent.default, _.default, _videoTranslate.default);
+//# sourceMappingURL=fixtures.js.map

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

@@ -0,0 +1 @@
+{"version":3,"sources":["../../../../src/molecule/cockpit-popin/test/fixtures.js"],"names":["t","pass","MoleculeCockpitPopin","propTypes","value","key","not","undefined","renderComponentMacro","fixtureDefault","fixtureLoading","fixtureVideoTranslate"],"mappings":";;AAAA;;AACA;;AACA;;AACA;;AACA;;AACA;;AACA;;;;AAEA,kBAAK,+DAAL,EAAsEA,CAAC,IAAI;AACzEA,EAAAA,CAAC,CAACC,IAAF;AACA,wBAAQC,UAAqBC,SAA7B,EAAwC,CAACC,KAAD,EAAQC,GAAR,KAAgB;AACtDL,IAAAA,CAAC,CAACM,GAAF,CAAMF,KAAN,EAAaG,SAAb,EAAyB,yDAAwDF,GAAI,mEAArF;AACD,GAFD;AAGD,CALD;AAOA,kBAAK,gEAAL,EAAuEG,wBAAvE,EAA6FN,SAA7F,EAAmHO,gBAAnH;AACA,kBAAK,gEAAL,EAAuED,wBAAvE,EAA6FN,SAA7F,EAAmHQ,gBAAnH;AACA,kBAAK,uEAAL,EAA8EF,wBAA9E,EAAoGN,SAApG,EAA0HS,uBAA1H","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/lib/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/lib/molecule/questions/qcm-graphic/index.js

@@ -68,6 +68,7 @@ const QCMImage = (props, context) => {
       "data-name": "answerText",
       className: _style2.default.titleWrapper
     }, /*#__PURE__*/_react.default.createElement("div", {
+      title: title,
       className: (0, _classnames.default)(_style2.default.title, _style.innerHTML) // eslint-disable-next-line react/no-danger
       ,
       dangerouslySetInnerHTML: {

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

@@ -1 +1 @@
-{"version":3,"sources":["../../../../src/molecule/questions/qcm-graphic/index.js"],"names":["QCMImage","props","context","answers","skin","primarySkinColor","answersViews","map","answer","key","onClick","title","selected","image","ariaLabel","boxShadow","style","backgroundColor","background","content","imageWrapper","backgroundImage","titleWrapper","innerHTML","__html","wrapper","contextTypes","Provider","childContextTypes","propTypes","PropTypes","arrayOf","shape","string","bool","func"],"mappings":";;;;;;;AAAA;;AACA;;AAEA;;AACA;;AACA;;AACA;;AACA;;;;;;AAEA,MAAMA,QAAQ,GAAG,CAACC,KAAD,EAAQC,OAAR,KAAoB;AACnC,QAAM;AAACC,IAAAA;AAAD,MAAYF,KAAlB;AACA,QAAM;AAACG,IAAAA;AAAD,MAASF,OAAf;AACA,QAAMG,gBAAgB,GAAG,qBAAM,SAAN,EAAiB,gBAAjB,EAAmCD,IAAnC,CAAzB;AAEA,QAAME,YAAY,GAAGH,OAAO,CAACI,GAAR,CAAY,CAACC,MAAD,EAASC,GAAT,KAAiB;AAChD,UAAM;AAACC,MAAAA,OAAD;AAAUC,MAAAA,KAAV;AAAiBC,MAAAA,QAAjB;AAA2BC,MAAAA,KAA3B;AAAkCC,MAAAA;AAAlC,QAA+CN,MAArD;AAEA,wBACE;AACE,MAAA,OAAO,EAAEE,OADX;AAEE,uBAAeE,QAFjB;AAGE,mBAAU,eAHZ;AAIE,MAAA,KAAK,eACCA,QAAQ,IAAI;AACdG,QAAAA,SAAS,EAAG,cAAa,gEAA6BV,gBAA7B,CAA+C;AAD1D,OADb,CAJP;AASE,MAAA,SAAS,EAAEO,QAAQ,GAAGI,gBAAMJ,QAAT,GAAoBI,gBAAMR,MAT/C;AAUE,MAAA,GAAG,EAAEC;AAVP,oBAYE;AACE,mBAAU,kBADZ;AAEE,MAAA,KAAK,EAAE;AACLQ,QAAAA,eAAe,EAAEL,QAAQ,GAAGP,gBAAH,GAAsB;AAD1C,OAFT;AAKE,MAAA,SAAS,EAAEW,gBAAME;AALnB,MAZF,eAmBE;AAAK,mBAAU,eAAf;AAA+B,MAAA,SAAS,EAAEF,gBAAMG;AAAhD,oBACE;AACE,MAAA,SAAS,EAAEH,gBAAMI,YADnB;AAEE,mBAAU,aAFZ;AAGE,oBAAYN,SAAS,IAAIH,KAH3B;AAIE,MAAA,KAAK,EAAE;AACLU,QAAAA,eAAe,EAAG,OAAMR,KAAM;AADzB;AAJT,MADF,eASE;AAAK,mBAAU,YAAf;AAA4B,MAAA,SAAS,EAAEG,gBAAMM;AAA7C,oBACE;AACE,MAAA,SAAS,EAAE,yBAAWN,gBAAML,KAAjB,EAAwBY,gBAAxB,CADb,CAEE;AAFF;AAGE,MAAA,uBAAuB,EAAE;AAACC,QAAAA,MAAM,EAAEb;AAAT;AAH3B,MADF,CATF,CAnBF,CADF;AAuCD,GA1CoB,CAArB;AA4CA,sBACE;AAAK,iBAAU,qBAAf;AAAqC,IAAA,SAAS,EAAEK,gBAAMS;AAAtD,KACGnB,YADH,CADF;AAKD,CAtDD;;AAwDAN,QAAQ,CAAC0B,YAAT,GAAwB;AACtBtB,EAAAA,IAAI,EAAEuB,kBAASC,iBAAT,CAA2BxB;AADX,CAAxB;AAIAJ,QAAQ,CAAC6B,SAAT,2CAAqB;AACnB1B,EAAAA,OAAO,EAAE2B,mBAAUC,OAAV,CACPD,mBAAUE,KAAV,CAAgB;AACdrB,IAAAA,KAAK,EAAEmB,mBAAUG,MADH;AAEdrB,IAAAA,QAAQ,EAAEkB,mBAAUI,IAFN;AAGdxB,IAAAA,OAAO,EAAEoB,mBAAUK,IAHL;AAIdtB,IAAAA,KAAK,EAAEiB,mBAAUG,MAJH;AAKdnB,IAAAA,SAAS,EAAEgB,mBAAUG;AALP,GAAhB,CADO;AADU,CAArB;eAYejC,Q","sourcesContent":["import React from 'react';\nimport PropTypes from 'prop-types';\nimport {getOr} from 'lodash/fp';\nimport classnames from 'classnames';\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 QCMImage = (props, context) => {\n  const {answers} = props;\n  const {skin} = context;\n  const primarySkinColor = getOr('#00B0FF', 'common.primary', skin);\n\n  const answersViews = answers.map((answer, key) => {\n    const {onClick, title, selected, image, ariaLabel} = answer;\n\n    return (\n      <div\n        onClick={onClick}\n        data-selected={selected}\n        data-name=\"answerGraphic\"\n        style={{\n          ...(selected && {\n            boxShadow: `0 4px 16px ${getShadowBoxColorFromPrimary(primarySkinColor)}`\n          })\n        }}\n        className={selected ? style.selected : style.answer}\n        key={key}\n      >\n        <div\n          data-name=\"answerBackground\"\n          style={{\n            backgroundColor: selected ? primarySkinColor : '#F4F4F5'\n          }}\n          className={style.background}\n        />\n        <div data-name=\"answerContent\" className={style.content}>\n          <div\n            className={style.imageWrapper}\n            data-name=\"answerImage\"\n            aria-label={ariaLabel || title}\n            style={{\n              backgroundImage: `url(${image})`\n            }}\n          />\n          <div data-name=\"answerText\" className={style.titleWrapper}>\n            <div\n              className={classnames(style.title, innerHTML)}\n              // eslint-disable-next-line react/no-danger\n              dangerouslySetInnerHTML={{__html: title}}\n            />\n          </div>\n        </div>\n      </div>\n    );\n  });\n\n  return (\n    <div data-name=\"qcm-graphic-wrapper\" className={style.wrapper}>\n      {answersViews}\n    </div>\n  );\n};\n\nQCMImage.contextTypes = {\n  skin: Provider.childContextTypes.skin\n};\n\nQCMImage.propTypes = {\n  answers: PropTypes.arrayOf(\n    PropTypes.shape({\n      title: PropTypes.string,\n      selected: PropTypes.bool,\n      onClick: PropTypes.func,\n      image: PropTypes.string,\n      ariaLabel: PropTypes.string\n    })\n  )\n};\n\nexport default QCMImage;\n"],"file":"index.js"}
+{"version":3,"sources":["../../../../src/molecule/questions/qcm-graphic/index.js"],"names":["QCMImage","props","context","answers","skin","primarySkinColor","answersViews","map","answer","key","onClick","title","selected","image","ariaLabel","boxShadow","style","backgroundColor","background","content","imageWrapper","backgroundImage","titleWrapper","innerHTML","__html","wrapper","contextTypes","Provider","childContextTypes","propTypes","PropTypes","arrayOf","shape","string","bool","func"],"mappings":";;;;;;;AAAA;;AACA;;AAEA;;AACA;;AACA;;AACA;;AACA;;;;;;AAEA,MAAMA,QAAQ,GAAG,CAACC,KAAD,EAAQC,OAAR,KAAoB;AACnC,QAAM;AAACC,IAAAA;AAAD,MAAYF,KAAlB;AACA,QAAM;AAACG,IAAAA;AAAD,MAASF,OAAf;AACA,QAAMG,gBAAgB,GAAG,qBAAM,SAAN,EAAiB,gBAAjB,EAAmCD,IAAnC,CAAzB;AAEA,QAAME,YAAY,GAAGH,OAAO,CAACI,GAAR,CAAY,CAACC,MAAD,EAASC,GAAT,KAAiB;AAChD,UAAM;AAACC,MAAAA,OAAD;AAAUC,MAAAA,KAAV;AAAiBC,MAAAA,QAAjB;AAA2BC,MAAAA,KAA3B;AAAkCC,MAAAA;AAAlC,QAA+CN,MAArD;AAEA,wBACE;AACE,MAAA,OAAO,EAAEE,OADX;AAEE,uBAAeE,QAFjB;AAGE,mBAAU,eAHZ;AAIE,MAAA,KAAK,eACCA,QAAQ,IAAI;AACdG,QAAAA,SAAS,EAAG,cAAa,gEAA6BV,gBAA7B,CAA+C;AAD1D,OADb,CAJP;AASE,MAAA,SAAS,EAAEO,QAAQ,GAAGI,gBAAMJ,QAAT,GAAoBI,gBAAMR,MAT/C;AAUE,MAAA,GAAG,EAAEC;AAVP,oBAYE;AACE,mBAAU,kBADZ;AAEE,MAAA,KAAK,EAAE;AACLQ,QAAAA,eAAe,EAAEL,QAAQ,GAAGP,gBAAH,GAAsB;AAD1C,OAFT;AAKE,MAAA,SAAS,EAAEW,gBAAME;AALnB,MAZF,eAmBE;AAAK,mBAAU,eAAf;AAA+B,MAAA,SAAS,EAAEF,gBAAMG;AAAhD,oBACE;AACE,MAAA,SAAS,EAAEH,gBAAMI,YADnB;AAEE,mBAAU,aAFZ;AAGE,oBAAYN,SAAS,IAAIH,KAH3B;AAIE,MAAA,KAAK,EAAE;AACLU,QAAAA,eAAe,EAAG,OAAMR,KAAM;AADzB;AAJT,MADF,eASE;AAAK,mBAAU,YAAf;AAA4B,MAAA,SAAS,EAAEG,gBAAMM;AAA7C,oBACE;AACE,MAAA,KAAK,EAAEX,KADT;AAEE,MAAA,SAAS,EAAE,yBAAWK,gBAAML,KAAjB,EAAwBY,gBAAxB,CAFb,CAGE;AAHF;AAIE,MAAA,uBAAuB,EAAE;AAACC,QAAAA,MAAM,EAAEb;AAAT;AAJ3B,MADF,CATF,CAnBF,CADF;AAwCD,GA3CoB,CAArB;AA6CA,sBACE;AAAK,iBAAU,qBAAf;AAAqC,IAAA,SAAS,EAAEK,gBAAMS;AAAtD,KACGnB,YADH,CADF;AAKD,CAvDD;;AAyDAN,QAAQ,CAAC0B,YAAT,GAAwB;AACtBtB,EAAAA,IAAI,EAAEuB,kBAASC,iBAAT,CAA2BxB;AADX,CAAxB;AAIAJ,QAAQ,CAAC6B,SAAT,2CAAqB;AACnB1B,EAAAA,OAAO,EAAE2B,mBAAUC,OAAV,CACPD,mBAAUE,KAAV,CAAgB;AACdrB,IAAAA,KAAK,EAAEmB,mBAAUG,MADH;AAEdrB,IAAAA,QAAQ,EAAEkB,mBAAUI,IAFN;AAGdxB,IAAAA,OAAO,EAAEoB,mBAAUK,IAHL;AAIdtB,IAAAA,KAAK,EAAEiB,mBAAUG,MAJH;AAKdnB,IAAAA,SAAS,EAAEgB,mBAAUG;AALP,GAAhB,CADO;AADU,CAArB;eAYejC,Q","sourcesContent":["import React from 'react';\nimport PropTypes from 'prop-types';\nimport {getOr} from 'lodash/fp';\nimport classnames from 'classnames';\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 QCMImage = (props, context) => {\n  const {answers} = props;\n  const {skin} = context;\n  const primarySkinColor = getOr('#00B0FF', 'common.primary', skin);\n\n  const answersViews = answers.map((answer, key) => {\n    const {onClick, title, selected, image, ariaLabel} = answer;\n\n    return (\n      <div\n        onClick={onClick}\n        data-selected={selected}\n        data-name=\"answerGraphic\"\n        style={{\n          ...(selected && {\n            boxShadow: `0 4px 16px ${getShadowBoxColorFromPrimary(primarySkinColor)}`\n          })\n        }}\n        className={selected ? style.selected : style.answer}\n        key={key}\n      >\n        <div\n          data-name=\"answerBackground\"\n          style={{\n            backgroundColor: selected ? primarySkinColor : '#F4F4F5'\n          }}\n          className={style.background}\n        />\n        <div data-name=\"answerContent\" className={style.content}>\n          <div\n            className={style.imageWrapper}\n            data-name=\"answerImage\"\n            aria-label={ariaLabel || title}\n            style={{\n              backgroundImage: `url(${image})`\n            }}\n          />\n          <div data-name=\"answerText\" className={style.titleWrapper}>\n            <div\n              title={title}\n              className={classnames(style.title, innerHTML)}\n              // eslint-disable-next-line react/no-danger\n              dangerouslySetInnerHTML={{__html: title}}\n            />\n          </div>\n        </div>\n      </div>\n    );\n  });\n\n  return (\n    <div data-name=\"qcm-graphic-wrapper\" className={style.wrapper}>\n      {answersViews}\n    </div>\n  );\n};\n\nQCMImage.contextTypes = {\n  skin: Provider.childContextTypes.skin\n};\n\nQCMImage.propTypes = {\n  answers: PropTypes.arrayOf(\n    PropTypes.shape({\n      title: PropTypes.string,\n      selected: PropTypes.bool,\n      onClick: PropTypes.func,\n      image: PropTypes.string,\n      ariaLabel: PropTypes.string\n    })\n  )\n};\n\nexport default QCMImage;\n"],"file":"index.js"}

package/lib/molecule/questions/qcm-graphic/style.css

@@ -64,6 +64,11 @@
   width: 100%;
   align-items: center;
   justify-content: center;
+  overflow: hidden;
+  hyphens: auto;
+  -ms-word-break: break-all;
+  word-break: break-all;
+  word-break: break-word;
 }
 
 .title {
@@ -144,10 +149,17 @@
   }
 
   .titleWrapper {
+    height: 100%;
+    width: 100%;
+    display: flex;
     white-space: wrap;
     overflow: hidden;
     padding: 0;
     justify-content: left;
     font-size: 15px;
   }
+
+  .title {
+    text-align: left;
+  }
 }

package/lib/molecule/questions/qcm-graphic/test/fixtures/default.js

@@ -10,7 +10,7 @@ var _default = {
       selected: false,
       image: 'https://images.unsplash.com/photo-1467890947394-8171244e5410?dpr=2&auto=format&fit=crop&w=1080&h=720&q=80&cs=tinysrgb&crop=&bg='
     }, {
-      title: 'Lorem ipsum',
+      title: 'Lorem ipsum dolor sit amet, consectetur adipiscing elit, sut labore et dolore magna aliqua.',
       onClick: () => {},
       selected: false,
       image: 'https://images.unsplash.com/photo-1494477920939-88c59ba76428?dpr=2&auto=format&fit=crop&w=1080&h=607&q=80&cs=tinysrgb&crop=&bg='

package/lib/molecule/questions/qcm-graphic/test/fixtures/default.js.map

@@ -1 +1 @@
-{"version":3,"sources":["../../../../../../src/molecule/questions/qcm-graphic/test/fixtures/default.js"],"names":["props","answers","title","onClick","selected","image"],"mappings":";;;;eAAe;AACbA,EAAAA,KAAK,EAAE;AACLC,IAAAA,OAAO,EAAE,CACP;AACEC,MAAAA,KAAK,EAAE,iCADT;AAEEC,MAAAA,OAAO,EAAE,MAAM,CAAE,CAFnB;AAGEC,MAAAA,QAAQ,EAAE,KAHZ;AAIEC,MAAAA,KAAK,EACH;AALJ,KADO,EAQP;AACEH,MAAAA,KAAK,EAAE,aADT;AAEEC,MAAAA,OAAO,EAAE,MAAM,CAAE,CAFnB;AAGEC,MAAAA,QAAQ,EAAE,KAHZ;AAIEC,MAAAA,KAAK,EACH;AALJ,KARO,EAeP;AACEH,MAAAA,KAAK,EAAE,OADT;AAEEC,MAAAA,OAAO,EAAE,MAAM,CAAE,CAFnB;AAGEC,MAAAA,QAAQ,EAAE,IAHZ;AAIEC,MAAAA,KAAK,EACH;AALJ,KAfO,EAsBP;AACEH,MAAAA,KAAK,EAAE,6BADT;AAEEC,MAAAA,OAAO,EAAE,MAAM,CAAE,CAFnB;AAGEC,MAAAA,QAAQ,EAAE,KAHZ;AAIEC,MAAAA,KAAK,EACH;AALJ,KAtBO,EA6BP;AACEH,MAAAA,KAAK,EAAE,iCADT;AAEEC,MAAAA,OAAO,EAAE,MAAM,CAAE,CAFnB;AAGEC,MAAAA,QAAQ,EAAE,KAHZ;AAIEC,MAAAA,KAAK,EACH;AALJ,KA7BO,EAoCP;AACEH,MAAAA,KAAK,EAAE,aADT;AAEEC,MAAAA,OAAO,EAAE,MAAM,CAAE,CAFnB;AAGEC,MAAAA,QAAQ,EAAE,KAHZ;AAIEC,MAAAA,KAAK,EACH;AALJ,KApCO,EA2CP;AACEH,MAAAA,KAAK,EAAE,OADT;AAEEC,MAAAA,OAAO,EAAE,MAAM,CAAE,CAFnB;AAGEC,MAAAA,QAAQ,EAAE,IAHZ;AAIEC,MAAAA,KAAK,EACH;AALJ,KA3CO,EAkDP;AACEH,MAAAA,KAAK,EAAE,6BADT;AAEEC,MAAAA,OAAO,EAAE,MAAM,CAAE,CAFnB;AAGEC,MAAAA,QAAQ,EAAE,KAHZ;AAIEC,MAAAA,KAAK,EACH;AALJ,KAlDO;AADJ;AADM,C","sourcesContent":["export default {\n  props: {\n    answers: [\n      {\n        title: 'There is no need for a password',\n        onClick: () => {},\n        selected: false,\n        image:\n          'https://images.unsplash.com/photo-1467890947394-8171244e5410?dpr=2&auto=format&fit=crop&w=1080&h=720&q=80&cs=tinysrgb&crop=&bg='\n      },\n      {\n        title: 'Lorem ipsum',\n        onClick: () => {},\n        selected: false,\n        image:\n          'https://images.unsplash.com/photo-1494477920939-88c59ba76428?dpr=2&auto=format&fit=crop&w=1080&h=607&q=80&cs=tinysrgb&crop=&bg='\n      },\n      {\n        title: 'Lorem',\n        onClick: () => {},\n        selected: true,\n        image:\n          'https://images.unsplash.com/photo-1494416952682-200c9e760aac?dpr=2&auto=format&fit=crop&w=1080&h=607&q=80&cs=tinysrgb&crop=&bg='\n      },\n      {\n        title: 'You need to have a password',\n        onClick: () => {},\n        selected: false,\n        image:\n          'https://images.unsplash.com/photo-1493442043090-087540b34c1a?dpr=2&auto=format&fit=crop&w=1080&h=607&q=80&cs=tinysrgb&crop=&bg='\n      },\n      {\n        title: 'There is no need for a password',\n        onClick: () => {},\n        selected: false,\n        image:\n          'https://images.unsplash.com/photo-1467890947394-8171244e5410?dpr=2&auto=format&fit=crop&w=1080&h=720&q=80&cs=tinysrgb&crop=&bg='\n      },\n      {\n        title: 'Lorem ipsum',\n        onClick: () => {},\n        selected: false,\n        image:\n          'https://images.unsplash.com/photo-1494477920939-88c59ba76428?dpr=2&auto=format&fit=crop&w=1080&h=607&q=80&cs=tinysrgb&crop=&bg='\n      },\n      {\n        title: 'Lorem',\n        onClick: () => {},\n        selected: true,\n        image:\n          'https://images.unsplash.com/photo-1494416952682-200c9e760aac?dpr=2&auto=format&fit=crop&w=1080&h=607&q=80&cs=tinysrgb&crop=&bg='\n      },\n      {\n        title: 'You need to have a password',\n        onClick: () => {},\n        selected: false,\n        image:\n          'https://images.unsplash.com/photo-1493442043090-087540b34c1a?dpr=2&auto=format&fit=crop&w=1080&h=607&q=80&cs=tinysrgb&crop=&bg='\n      }\n    ]\n  }\n};\n"],"file":"default.js"}
+{"version":3,"sources":["../../../../../../src/molecule/questions/qcm-graphic/test/fixtures/default.js"],"names":["props","answers","title","onClick","selected","image"],"mappings":";;;;eAAe;AACbA,EAAAA,KAAK,EAAE;AACLC,IAAAA,OAAO,EAAE,CACP;AACEC,MAAAA,KAAK,EAAE,iCADT;AAEEC,MAAAA,OAAO,EAAE,MAAM,CAAE,CAFnB;AAGEC,MAAAA,QAAQ,EAAE,KAHZ;AAIEC,MAAAA,KAAK,EACH;AALJ,KADO,EAQP;AACEH,MAAAA,KAAK,EACH,6FAFJ;AAGEC,MAAAA,OAAO,EAAE,MAAM,CAAE,CAHnB;AAIEC,MAAAA,QAAQ,EAAE,KAJZ;AAKEC,MAAAA,KAAK,EACH;AANJ,KARO,EAgBP;AACEH,MAAAA,KAAK,EAAE,OADT;AAEEC,MAAAA,OAAO,EAAE,MAAM,CAAE,CAFnB;AAGEC,MAAAA,QAAQ,EAAE,IAHZ;AAIEC,MAAAA,KAAK,EACH;AALJ,KAhBO,EAuBP;AACEH,MAAAA,KAAK,EAAE,6BADT;AAEEC,MAAAA,OAAO,EAAE,MAAM,CAAE,CAFnB;AAGEC,MAAAA,QAAQ,EAAE,KAHZ;AAIEC,MAAAA,KAAK,EACH;AALJ,KAvBO,EA8BP;AACEH,MAAAA,KAAK,EAAE,iCADT;AAEEC,MAAAA,OAAO,EAAE,MAAM,CAAE,CAFnB;AAGEC,MAAAA,QAAQ,EAAE,KAHZ;AAIEC,MAAAA,KAAK,EACH;AALJ,KA9BO,EAqCP;AACEH,MAAAA,KAAK,EAAE,aADT;AAEEC,MAAAA,OAAO,EAAE,MAAM,CAAE,CAFnB;AAGEC,MAAAA,QAAQ,EAAE,KAHZ;AAIEC,MAAAA,KAAK,EACH;AALJ,KArCO,EA4CP;AACEH,MAAAA,KAAK,EAAE,OADT;AAEEC,MAAAA,OAAO,EAAE,MAAM,CAAE,CAFnB;AAGEC,MAAAA,QAAQ,EAAE,IAHZ;AAIEC,MAAAA,KAAK,EACH;AALJ,KA5CO,EAmDP;AACEH,MAAAA,KAAK,EAAE,6BADT;AAEEC,MAAAA,OAAO,EAAE,MAAM,CAAE,CAFnB;AAGEC,MAAAA,QAAQ,EAAE,KAHZ;AAIEC,MAAAA,KAAK,EACH;AALJ,KAnDO;AADJ;AADM,C","sourcesContent":["export default {\n  props: {\n    answers: [\n      {\n        title: 'There is no need for a password',\n        onClick: () => {},\n        selected: false,\n        image:\n          'https://images.unsplash.com/photo-1467890947394-8171244e5410?dpr=2&auto=format&fit=crop&w=1080&h=720&q=80&cs=tinysrgb&crop=&bg='\n      },\n      {\n        title:\n          'Lorem ipsum dolor sit amet, consectetur adipiscing elit, sut labore et dolore magna aliqua.',\n        onClick: () => {},\n        selected: false,\n        image:\n          'https://images.unsplash.com/photo-1494477920939-88c59ba76428?dpr=2&auto=format&fit=crop&w=1080&h=607&q=80&cs=tinysrgb&crop=&bg='\n      },\n      {\n        title: 'Lorem',\n        onClick: () => {},\n        selected: true,\n        image:\n          'https://images.unsplash.com/photo-1494416952682-200c9e760aac?dpr=2&auto=format&fit=crop&w=1080&h=607&q=80&cs=tinysrgb&crop=&bg='\n      },\n      {\n        title: 'You need to have a password',\n        onClick: () => {},\n        selected: false,\n        image:\n          'https://images.unsplash.com/photo-1493442043090-087540b34c1a?dpr=2&auto=format&fit=crop&w=1080&h=607&q=80&cs=tinysrgb&crop=&bg='\n      },\n      {\n        title: 'There is no need for a password',\n        onClick: () => {},\n        selected: false,\n        image:\n          'https://images.unsplash.com/photo-1467890947394-8171244e5410?dpr=2&auto=format&fit=crop&w=1080&h=720&q=80&cs=tinysrgb&crop=&bg='\n      },\n      {\n        title: 'Lorem ipsum',\n        onClick: () => {},\n        selected: false,\n        image:\n          'https://images.unsplash.com/photo-1494477920939-88c59ba76428?dpr=2&auto=format&fit=crop&w=1080&h=607&q=80&cs=tinysrgb&crop=&bg='\n      },\n      {\n        title: 'Lorem',\n        onClick: () => {},\n        selected: true,\n        image:\n          'https://images.unsplash.com/photo-1494416952682-200c9e760aac?dpr=2&auto=format&fit=crop&w=1080&h=607&q=80&cs=tinysrgb&crop=&bg='\n      },\n      {\n        title: 'You need to have a password',\n        onClick: () => {},\n        selected: false,\n        image:\n          'https://images.unsplash.com/photo-1493442043090-087540b34c1a?dpr=2&auto=format&fit=crop&w=1080&h=607&q=80&cs=tinysrgb&crop=&bg='\n      }\n    ]\n  }\n};\n"],"file":"default.js"}

package/lib/molecule/questions/qcm-graphic/test/fixtures/no-selected.js

@@ -10,7 +10,7 @@ var _default = {
       selected: false,
       image: 'https://images.unsplash.com/photo-1467890947394-8171244e5410?dpr=2&auto=format&fit=crop&w=1080&h=720&q=80&cs=tinysrgb&crop=&bg='
     }, {
-      title: 'Lorem ipsum',
+      title: 'Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua tempor incididunt ut labore et dolore  tempor incididunt ut labore et dolore magna aliqua tempor incididunt ut labore et dolore.',
       onClick: () => {},
       selected: false,
       image: 'https://images.unsplash.com/photo-1494477920939-88c59ba76428?dpr=2&auto=format&fit=crop&w=1080&h=607&q=80&cs=tinysrgb&crop=&bg='

package/lib/molecule/questions/qcm-graphic/test/fixtures/no-selected.js.map

@@ -1 +1 @@
-{"version":3,"sources":["../../../../../../src/molecule/questions/qcm-graphic/test/fixtures/no-selected.js"],"names":["props","answers","title","onClick","selected","image"],"mappings":";;;;eAAe;AACbA,EAAAA,KAAK,EAAE;AACLC,IAAAA,OAAO,EAAE,CACP;AACEC,MAAAA,KAAK,EAAE,iCADT;AAEEC,MAAAA,OAAO,EAAE,MAAM,CAAE,CAFnB;AAGEC,MAAAA,QAAQ,EAAE,KAHZ;AAIEC,MAAAA,KAAK,EACH;AALJ,KADO,EAQP;AACEH,MAAAA,KAAK,EAAE,aADT;AAEEC,MAAAA,OAAO,EAAE,MAAM,CAAE,CAFnB;AAGEC,MAAAA,QAAQ,EAAE,KAHZ;AAIEC,MAAAA,KAAK,EACH;AALJ,KARO,EAeP;AACEH,MAAAA,KAAK,EAAE,OADT;AAEEC,MAAAA,OAAO,EAAE,MAAM,CAAE,CAFnB;AAGEC,MAAAA,QAAQ,EAAE,KAHZ;AAIEC,MAAAA,KAAK,EACH;AALJ,KAfO,EAsBP;AACEH,MAAAA,KAAK,EAAE,6BADT;AAEEC,MAAAA,OAAO,EAAE,MAAM,CAAE,CAFnB;AAGEC,MAAAA,QAAQ,EAAE,KAHZ;AAIEC,MAAAA,KAAK,EACH;AALJ,KAtBO;AADJ;AADM,C","sourcesContent":["export default {\n  props: {\n    answers: [\n      {\n        title: 'There is no need for a password',\n        onClick: () => {},\n        selected: false,\n        image:\n          'https://images.unsplash.com/photo-1467890947394-8171244e5410?dpr=2&auto=format&fit=crop&w=1080&h=720&q=80&cs=tinysrgb&crop=&bg='\n      },\n      {\n        title: 'Lorem ipsum',\n        onClick: () => {},\n        selected: false,\n        image:\n          'https://images.unsplash.com/photo-1494477920939-88c59ba76428?dpr=2&auto=format&fit=crop&w=1080&h=607&q=80&cs=tinysrgb&crop=&bg='\n      },\n      {\n        title: 'Lorem',\n        onClick: () => {},\n        selected: false,\n        image:\n          'https://images.unsplash.com/photo-1494416952682-200c9e760aac?dpr=2&auto=format&fit=crop&w=1080&h=607&q=80&cs=tinysrgb&crop=&bg='\n      },\n      {\n        title: 'You need to have a password',\n        onClick: () => {},\n        selected: false,\n        image:\n          'https://images.unsplash.com/photo-1493442043090-087540b34c1a?dpr=2&auto=format&fit=crop&w=1080&h=607&q=80&cs=tinysrgb&crop=&bg='\n      }\n    ]\n  }\n};\n"],"file":"no-selected.js"}
+{"version":3,"sources":["../../../../../../src/molecule/questions/qcm-graphic/test/fixtures/no-selected.js"],"names":["props","answers","title","onClick","selected","image"],"mappings":";;;;eAAe;AACbA,EAAAA,KAAK,EAAE;AACLC,IAAAA,OAAO,EAAE,CACP;AACEC,MAAAA,KAAK,EAAE,iCADT;AAEEC,MAAAA,OAAO,EAAE,MAAM,CAAE,CAFnB;AAGEC,MAAAA,QAAQ,EAAE,KAHZ;AAIEC,MAAAA,KAAK,EACH;AALJ,KADO,EAQP;AACEH,MAAAA,KAAK,EACH,6PAFJ;AAGEC,MAAAA,OAAO,EAAE,MAAM,CAAE,CAHnB;AAIEC,MAAAA,QAAQ,EAAE,KAJZ;AAKEC,MAAAA,KAAK,EACH;AANJ,KARO,EAgBP;AACEH,MAAAA,KAAK,EAAE,OADT;AAEEC,MAAAA,OAAO,EAAE,MAAM,CAAE,CAFnB;AAGEC,MAAAA,QAAQ,EAAE,KAHZ;AAIEC,MAAAA,KAAK,EACH;AALJ,KAhBO,EAuBP;AACEH,MAAAA,KAAK,EAAE,6BADT;AAEEC,MAAAA,OAAO,EAAE,MAAM,CAAE,CAFnB;AAGEC,MAAAA,QAAQ,EAAE,KAHZ;AAIEC,MAAAA,KAAK,EACH;AALJ,KAvBO;AADJ;AADM,C","sourcesContent":["export default {\n  props: {\n    answers: [\n      {\n        title: 'There is no need for a password',\n        onClick: () => {},\n        selected: false,\n        image:\n          'https://images.unsplash.com/photo-1467890947394-8171244e5410?dpr=2&auto=format&fit=crop&w=1080&h=720&q=80&cs=tinysrgb&crop=&bg='\n      },\n      {\n        title:\n          'Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua tempor incididunt ut labore et dolore  tempor incididunt ut labore et dolore magna aliqua tempor incididunt ut labore et dolore.',\n        onClick: () => {},\n        selected: false,\n        image:\n          'https://images.unsplash.com/photo-1494477920939-88c59ba76428?dpr=2&auto=format&fit=crop&w=1080&h=607&q=80&cs=tinysrgb&crop=&bg='\n      },\n      {\n        title: 'Lorem',\n        onClick: () => {},\n        selected: false,\n        image:\n          'https://images.unsplash.com/photo-1494416952682-200c9e760aac?dpr=2&auto=format&fit=crop&w=1080&h=607&q=80&cs=tinysrgb&crop=&bg='\n      },\n      {\n        title: 'You need to have a password',\n        onClick: () => {},\n        selected: false,\n        image:\n          'https://images.unsplash.com/photo-1493442043090-087540b34c1a?dpr=2&auto=format&fit=crop&w=1080&h=607&q=80&cs=tinysrgb&crop=&bg='\n      }\n    ]\n  }\n};\n"],"file":"no-selected.js"}

package/lib/molecule/questions/qcm-graphic/test/qcm-graphic.js

@@ -39,7 +39,7 @@ const translate = _identity2.default;
   });
   const answersImages = wrapper.find('[data-name="answerImage"]');
   t.true(answersImages.at(1).exists());
-  t.is(answersImages.at(1).props()['aria-label'], 'Lorem ipsum');
+  t.is(answersImages.at(1).props()['aria-label'], 'Lorem ipsum dolor sit amet, consectetur adipiscing elit, sut labore et dolore magna aliqua.');
   const answers = wrapper.find('[data-name="answerGraphic"]');
   answers.at(1).simulate('click');
   t.true(answerWasClicked);

package/lib/molecule/questions/qcm-graphic/test/qcm-graphic.js.map

@@ -1 +1 @@
-{"version":3,"sources":["../../../../../src/molecule/questions/qcm-graphic/test/qcm-graphic.js"],"names":["adapter","Adapter","translate","t","answerWasClicked","defaultFixture","props","answers","onClick","wrapper","context","answersImages","find","true","at","exists","is","simulate","pass","firstAnswer","deepEqual","style","unselectedBackgroundAnswer","children","backgroundColor","firstAnswerText","thirdAnswer","boxShadow","selectedBackgroundAnswer"],"mappings":"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","sourcesContent":["import browserEnv from 'browser-env';\nimport test from 'ava';\nimport React from 'react';\nimport {shallow, configure} from 'enzyme';\nimport {identity} from 'lodash/fp';\nimport Adapter from 'enzyme-adapter-react-16';\nimport QCMImage from '..';\nimport defaultFixture from './fixtures/default';\n\nbrowserEnv();\nconfigure({adapter: new Adapter()});\nconst translate = identity;\n\ntest('onClick should be reachable, should match given aria-label', t => {\n  let answerWasClicked = false;\n  defaultFixture.props.answers[1] = {\n    ...defaultFixture.props.answers[1],\n    onClick: () => {\n      answerWasClicked = true;\n    }\n  };\n\n  const wrapper = shallow(<QCMImage {...defaultFixture.props} />, {\n    context: {translate}\n  });\n\n  const answersImages = wrapper.find('[data-name=\"answerImage\"]');\n  t.true(answersImages.at(1).exists());\n  t.is(answersImages.at(1).props()['aria-label'], 'Lorem ipsum');\n\n  const answers = wrapper.find('[data-name=\"answerGraphic\"]');\n  answers.at(1).simulate('click');\n  t.true(answerWasClicked);\n  t.pass();\n});\n\ntest(\"should set: selected's background to Primary, unselected's no background\", t => {\n  const wrapper = shallow(<QCMImage {...defaultFixture.props} />, {\n    context: {translate}\n  });\n  const answers = wrapper.find('[data-name=\"answerGraphic\"]');\n\n  const firstAnswer = answers.at(0);\n  t.true(firstAnswer.exists());\n  t.deepEqual(firstAnswer.props().style, {});\n  const unselectedBackgroundAnswer = firstAnswer.children().at(0);\n  t.true(unselectedBackgroundAnswer.exists());\n  t.deepEqual(unselectedBackgroundAnswer.props().style, {backgroundColor: '#F4F4F5'});\n  const firstAnswerText = firstAnswer.children().at(1).children().at(1).children().at(0);\n  t.true(firstAnswerText.exists());\n\n  const thirdAnswer = answers.at(2);\n  t.true(thirdAnswer.exists());\n  t.deepEqual(thirdAnswer.props().style, {boxShadow: '0 4px 16px rgba(0, 122, 179, 0.25)'});\n  const selectedBackgroundAnswer = thirdAnswer.children().at(0);\n  t.true(selectedBackgroundAnswer.exists());\n  t.deepEqual(selectedBackgroundAnswer.props().style, {backgroundColor: '#00B0FF'});\n});\n"],"file":"qcm-graphic.js"}
+{"version":3,"sources":["../../../../../src/molecule/questions/qcm-graphic/test/qcm-graphic.js"],"names":["adapter","Adapter","translate","t","answerWasClicked","defaultFixture","props","answers","onClick","wrapper","context","answersImages","find","true","at","exists","is","simulate","pass","firstAnswer","deepEqual","style","unselectedBackgroundAnswer","children","backgroundColor","firstAnswerText","thirdAnswer","boxShadow","selectedBackgroundAnswer"],"mappings":"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","sourcesContent":["import browserEnv from 'browser-env';\nimport test from 'ava';\nimport React from 'react';\nimport {shallow, configure} from 'enzyme';\nimport {identity} from 'lodash/fp';\nimport Adapter from 'enzyme-adapter-react-16';\nimport QCMImage from '..';\nimport defaultFixture from './fixtures/default';\n\nbrowserEnv();\nconfigure({adapter: new Adapter()});\nconst translate = identity;\n\ntest('onClick should be reachable, should match given aria-label', t => {\n  let answerWasClicked = false;\n  defaultFixture.props.answers[1] = {\n    ...defaultFixture.props.answers[1],\n    onClick: () => {\n      answerWasClicked = true;\n    }\n  };\n\n  const wrapper = shallow(<QCMImage {...defaultFixture.props} />, {\n    context: {translate}\n  });\n\n  const answersImages = wrapper.find('[data-name=\"answerImage\"]');\n  t.true(answersImages.at(1).exists());\n  t.is(\n    answersImages.at(1).props()['aria-label'],\n    'Lorem ipsum dolor sit amet, consectetur adipiscing elit, sut labore et dolore magna aliqua.'\n  );\n\n  const answers = wrapper.find('[data-name=\"answerGraphic\"]');\n  answers.at(1).simulate('click');\n  t.true(answerWasClicked);\n  t.pass();\n});\n\ntest(\"should set: selected's background to Primary, unselected's no background\", t => {\n  const wrapper = shallow(<QCMImage {...defaultFixture.props} />, {\n    context: {translate}\n  });\n  const answers = wrapper.find('[data-name=\"answerGraphic\"]');\n\n  const firstAnswer = answers.at(0);\n  t.true(firstAnswer.exists());\n  t.deepEqual(firstAnswer.props().style, {});\n  const unselectedBackgroundAnswer = firstAnswer.children().at(0);\n  t.true(unselectedBackgroundAnswer.exists());\n  t.deepEqual(unselectedBackgroundAnswer.props().style, {backgroundColor: '#F4F4F5'});\n  const firstAnswerText = firstAnswer.children().at(1).children().at(1).children().at(0);\n  t.true(firstAnswerText.exists());\n\n  const thirdAnswer = answers.at(2);\n  t.true(thirdAnswer.exists());\n  t.deepEqual(thirdAnswer.props().style, {boxShadow: '0 4px 16px rgba(0, 122, 179, 0.25)'});\n  const selectedBackgroundAnswer = thirdAnswer.children().at(0);\n  t.true(selectedBackgroundAnswer.exists());\n  t.deepEqual(selectedBackgroundAnswer.props().style, {backgroundColor: '#00B0FF'});\n});\n"],"file":"qcm-graphic.js"}

package/lib/molecule/questions/question-range/style.css

@@ -1,19 +1,18 @@
 @value breakpoints: "../../../variables/breakpoints.css";
 @value mobile from breakpoints;
 @value colors: "../../../variables/colors.css";
-@value brand from colors;
-@value black from colors;
+@value cm_blue_900 from colors;
 
 .wrapper {
   width: 500px;
 }
 
 .title {
-  color: brand;
   display: table;
   font-family: "Gilroy";
-  font-size: 24px;
-  font-weight: 700;
+  font-size: 28px;
+  font-weight: bold;
+  line-height: 36px;
   margin: 0 auto 15px;
   text-align: center;
   user-select: none;
@@ -27,11 +26,13 @@
 
 .label {
   font-family: "Gilroy";
-  color: black;
-  font-size: 15px;
-  font-weight: 700;
+  color: cm_blue_900;
+  font-size: 18px;
+  font-weight: 600;
   display: inline-block;
+  line-height: 24px;
   user-select: none;
+  font-style: normal;
 }
 
 @media mobile {

package/lib/molecule/search/test/fixtures.js

@@ -0,0 +1,25 @@
+"use strict";
+
+var _ava = _interopRequireDefault(require("ava"));
+
+var _forEach = _interopRequireDefault(require("lodash/forEach"));
+
+var _renderComponent = _interopRequireDefault(require("../../../test/helpers/render-component"));
+
+var _ = _interopRequireDefault(require(".."));
+
+var _default = _interopRequireDefault(require("./fixtures/default"));
+
+var _withValue = _interopRequireDefault(require("./fixtures/with-value"));
+
+function _interopRequireDefault(obj) { return obj && obj.__esModule ? obj : { default: obj }; }
+
+(0, _ava.default)('Molecule › MoleculeSearch > should have valid propTypes', t => {
+  t.pass();
+  (0, _forEach.default)(_.default.propTypes, (value, key) => {
+    t.not(value, undefined, `PropType for "Molecule.MoleculeSearch.propTypes.${key}" may not be undefined. Did you mistype the propTypes definition?`);
+  });
+});
+(0, _ava.default)('Molecule › MoleculeSearch › Default › should be rendered', _renderComponent.default, _.default, _default.default);
+(0, _ava.default)('Molecule › MoleculeSearch › WithValue › should be rendered', _renderComponent.default, _.default, _withValue.default);
+//# sourceMappingURL=fixtures.js.map

package/lib/molecule/search/test/fixtures.js.map

@@ -0,0 +1 @@
+{"version":3,"sources":["../../../../src/molecule/search/test/fixtures.js"],"names":["t","pass","MoleculeSearch","propTypes","value","key","not","undefined","renderComponentMacro","fixtureDefault","fixtureWithValue"],"mappings":";;AAAA;;AACA;;AACA;;AACA;;AACA;;AACA;;;;AAEA,kBAAK,yDAAL,EAAgEA,CAAC,IAAI;AACnEA,EAAAA,CAAC,CAACC,IAAF;AACA,wBAAQC,UAAeC,SAAvB,EAAkC,CAACC,KAAD,EAAQC,GAAR,KAAgB;AAChDL,IAAAA,CAAC,CAACM,GAAF,CAAMF,KAAN,EAAaG,SAAb,EAAyB,mDAAkDF,GAAI,mEAA/E;AACD,GAFD;AAGD,CALD;AAOA,kBAAK,0DAAL,EAAiEG,wBAAjE,EAAuFN,SAAvF,EAAuGO,gBAAvG;AACA,kBAAK,4DAAL,EAAmED,wBAAnE,EAAyFN,SAAzF,EAAyGQ,kBAAzG","sourcesContent":["import test from 'ava';\nimport forEach from 'lodash/forEach';\nimport renderComponentMacro from '../../../test/helpers/render-component';\nimport MoleculeSearch from '..';\nimport fixtureDefault from './fixtures/default';\nimport fixtureWithValue from './fixtures/with-value';\n\ntest('Molecule › MoleculeSearch > should have valid propTypes', t => {\n  t.pass();\n  forEach(MoleculeSearch.propTypes, (value, key) => {\n    t.not(value, undefined, `PropType for \"Molecule.MoleculeSearch.propTypes.${key}\" may not be undefined. Did you mistype the propTypes definition?`);\n  });\n});\n\ntest('Molecule › MoleculeSearch › Default › should be rendered', renderComponentMacro, MoleculeSearch, fixtureDefault);\ntest('Molecule › MoleculeSearch › WithValue › should be rendered', renderComponentMacro, MoleculeSearch, fixtureWithValue);\n"],"file":"fixtures.js"}

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@coorpacademy/components",
-  "version": "10.5.7-alpha.5+c119455dd",
+  "version": "10.5.7-alpha.6+30218fa50",
   "description": "",
   "main": "lib/index.js",
   "module": "es/index.js",
@@ -119,5 +119,5 @@
     "webpack-hot-middleware": "^2.25.0"
   },
   "author": "CoorpAcademy",
-  "gitHead": "c119455dd333337b5acb7c5f93baf22744067fd4"
+  "gitHead": "30218fa50ab5d55135e5f8f48313e61914c836f2"
 }