@coorpacademy/components 10.5.4 → 10.5.7-alpha.5

package/es/molecule/{setup-sections → draggable-list}/test/on-drop.js

@@ -11,15 +11,15 @@ import { wrappingComponent } from '../../../test/helpers/render-component';
 import SetupSections from '..'; // eslint-disable-next-line css-modules/no-unused-class
 
 import style from '../../draggable/style.css';
-import fixtures from './fixtures/default';
+import fixtures from './fixtures/dashboard-sections';
 browserEnv();
 configure({
   adapter: new Adapter()
 });
 test('should trigger onDrop handler', t => {
   t.plan(7);
-  const elementToDrag = fixtures.props.sections[0].id;
-  const elementToDrop = fixtures.props.sections[2].id;
+  const elementToDrag = fixtures.props.items[0].id;
+  const elementToDrop = fixtures.props.items[2].id;
 
   const dropHandler = (dragged, dropped) => {
     t.is(dropped, elementToDrop);
@@ -43,12 +43,12 @@ test('should trigger onDrop handler', t => {
   const dropEvent = {
     preventDefault: () => t.pass()
   };
-  wrapper.find(`.${style.section}`).at(0).simulate('dragStart', dragStartEvent);
-  wrapper.find(`.${style.section}`).at(0).simulate('dragOver', dragOverEvent);
-  wrapper.find(`.${style.section}`).at(0).simulate('dragOver', dragOverEvent);
-  wrapper.find(`.${style.section}`).at(0).simulate('dragLeave', dragLeaveEvent);
-  wrapper.find(`.${style.section}`).at(2).simulate('dragOver', dragOverEvent);
-  wrapper.find(`.${style.section}`).at(2).simulate('drop', dropEvent);
+  wrapper.find(`.${style.draggable}`).at(0).simulate('dragStart', dragStartEvent);
+  wrapper.find(`.${style.draggable}`).at(0).simulate('dragOver', dragOverEvent);
+  wrapper.find(`.${style.draggable}`).at(0).simulate('dragOver', dragOverEvent);
+  wrapper.find(`.${style.draggable}`).at(0).simulate('dragLeave', dragLeaveEvent);
+  wrapper.find(`.${style.draggable}`).at(2).simulate('dragOver', dragOverEvent);
+  wrapper.find(`.${style.draggable}`).at(2).simulate('drop', dropEvent);
 });
 test('should skip drop event if dragStart is not called', t => {
   t.plan(1);
@@ -65,7 +65,7 @@ test('should skip drop event if dragStart is not called', t => {
   const dropEvent = {
     preventDefault: () => t.pass()
   };
-  wrapper.find(`.${style.section}`).at(2).simulate('drop', dropEvent);
+  wrapper.find(`.${style.draggable}`).at(2).simulate('drop', dropEvent);
 });
 test('should skip dragStart event if section id is not defined', t => {
   t.plan(0);
@@ -74,7 +74,7 @@ test('should skip dragStart event if section id is not defined', t => {
     t.fail();
   };
 
-  const wrapper = mount( /*#__PURE__*/React.createElement(SetupSections, _extends({}, _set('sections.0.id', '', fixtures.props), {
+  const wrapper = mount( /*#__PURE__*/React.createElement(SetupSections, _extends({}, _set('items.0.id', '', fixtures.props), {
     onDrop: dropHandler
   })), {
     wrappingComponent
@@ -91,11 +91,11 @@ test('should skip dragStart event if section id is not defined', t => {
   const dropEvent = {
     preventDefault: () => {}
   };
-  wrapper.find(`.${style.section}`).at(0).simulate('dragStart', dragStartEvent);
-  wrapper.find(`.${style.section}`).at(0).simulate('dragOver', dragOverEvent);
-  wrapper.find(`.${style.section}`).at(0).simulate('dragOver', dragOverEvent);
-  wrapper.find(`.${style.section}`).at(0).simulate('dragLeave', dragLeaveEvent);
-  wrapper.find(`.${style.section}`).at(2).simulate('dragOver', dragOverEvent);
-  wrapper.find(`.${style.section}`).at(2).simulate('drop', dropEvent);
+  wrapper.find(`.${style.draggable}`).at(0).simulate('dragStart', dragStartEvent);
+  wrapper.find(`.${style.draggable}`).at(0).simulate('dragOver', dragOverEvent);
+  wrapper.find(`.${style.draggable}`).at(0).simulate('dragOver', dragOverEvent);
+  wrapper.find(`.${style.draggable}`).at(0).simulate('dragLeave', dragLeaveEvent);
+  wrapper.find(`.${style.draggable}`).at(2).simulate('dragOver', dragOverEvent);
+  wrapper.find(`.${style.draggable}`).at(2).simulate('drop', dropEvent);
 });
 //# sourceMappingURL=on-drop.js.map

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

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

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

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

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

@@ -1 +1 @@
-{"version":3,"sources":["../../../../src/molecule/questions/qcm/index.js"],"names":["React","classnames","PropTypes","Provider","innerHTML","style","QCM","props","context","answers","longestAnswer","title","length","answersViews","map","answer","key","onClick","selected","skin","primarySkinColor","selectedStyle","backgroundColor","borderColor","className","selectedAnswer","unselectedAnswer","__html","wrapper","contextTypes","childContextTypes","propTypes","arrayOf","shape","string","bool","func"],"mappings":";;AAAA,OAAOA,KAAP,MAAkB,OAAlB;AACA,OAAOC,UAAP,MAAuB,YAAvB;AACA,OAAOC,SAAP,MAAsB,YAAtB;AAEA,OAAOC,QAAP,MAAqB,wBAArB;AACA,SAAQC,SAAR,QAAwB,+BAAxB;AACA,OAAOC,KAAP,MAAkB,aAAlB;;AAEA,MAAMC,GAAG,GAAG,CAACC,KAAD,EAAQC,OAAR,KAAoB;AAC9B,QAAM;AAACC,IAAAA;AAAD,MAAYF,KAAlB;;AACA,QAAMG,aAAa,GAAG,OAAM,CAAC;AAACC,IAAAA;AAAD,GAAD,KAAaA,KAAK,CAACC,MAAzB,EAAiCH,OAAjC,CAAtB;;AAEA,QAAMI,YAAY,GAAGJ,OAAO,CAACK,GAAR,CAAY,CAACC,MAAD,EAASC,GAAT,KAAiB;AAChD,UAAM;AAACC,MAAAA,OAAD;AAAUN,MAAAA,KAAV;AAAiBO,MAAAA;AAAjB,QAA6BH,MAAnC;AACA,UAAM;AAACI,MAAAA;AAAD,QAASX,OAAf;;AAEA,UAAMY,gBAAgB,GAAG,OAAM,SAAN,EAAiB,gBAAjB,EAAmCD,IAAnC,CAAzB;;AACA,UAAME,aAAa,GAAGH,QAAQ,GAC1B;AAACI,MAAAA,eAAe,EAAEF,gBAAlB;AAAoCG,MAAAA,WAAW,EAAEH;AAAjD,KAD0B,GAE1B,IAFJ;AAIA,UAAMI,SAAS,GAAGvB,UAAU,CAC1BS,aAAa,KAAKK,MAAlB,GAA2BV,KAAK,CAACK,aAAjC,GAAiDL,KAAK,CAACU,MAD7B,EAE1BG,QAAQ,GAAGb,KAAK,CAACoB,cAAT,GAA0BpB,KAAK,CAACqB,gBAFd,CAA5B;AAKA,wBACE;AACE,mBAAU,QADZ;AAEE,MAAA,SAAS,EAAEzB,UAAU,CAACuB,SAAD,EAAYpB,SAAZ,CAFvB;AAGE,MAAA,OAAO,EAAEa,OAHX;AAIE,MAAA,KAAK,EAAEI,aAJT;AAKE,uBAAeH,QALjB;AAME,MAAA,GAAG,EAAEF,GANP,CAOE;AAPF;AAQE,MAAA,uBAAuB,EAAE;AAACW,QAAAA,MAAM,EAAEhB;AAAT;AAR3B,MADF;AAYD,GA1BoB,CAArB;AA4BA,sBACE;AAAK,iBAAU,KAAf;AAAqB,IAAA,SAAS,EAAEN,KAAK,CAACuB;AAAtC,KACGf,YADH,CADF;AAKD,CArCD;;AAuCAP,GAAG,CAACuB,YAAJ,GAAmB;AACjBV,EAAAA,IAAI,EAAEhB,QAAQ,CAAC2B,iBAAT,CAA2BX;AADhB,CAAnB;AAIAb,GAAG,CAACyB,SAAJ,2CAAgB;AACdtB,EAAAA,OAAO,EAAEP,SAAS,CAAC8B,OAAV,CACP9B,SAAS,CAAC+B,KAAV,CAAgB;AACdtB,IAAAA,KAAK,EAAET,SAAS,CAACgC,MADH;AAEdhB,IAAAA,QAAQ,EAAEhB,SAAS,CAACiC,IAFN;AAGdlB,IAAAA,OAAO,EAAEf,SAAS,CAACkC;AAHL,GAAhB,CADO;AADK,CAAhB;AAUA,eAAe9B,GAAf","sourcesContent":["import React from 'react';\nimport classnames from 'classnames';\nimport PropTypes from 'prop-types';\nimport {getOr, maxBy} from 'lodash/fp';\nimport Provider from '../../../atom/provider';\nimport {innerHTML} from '../../../atom/label/style.css';\nimport style from './style.css';\n\nconst QCM = (props, context) => {\n  const {answers} = props;\n  const longestAnswer = maxBy(({title}) => title.length, answers);\n\n  const answersViews = answers.map((answer, key) => {\n    const {onClick, title, selected} = answer;\n    const {skin} = context;\n\n    const primarySkinColor = getOr('#00B0FF', 'common.primary', skin);\n    const selectedStyle = selected\n      ? {backgroundColor: primarySkinColor, borderColor: primarySkinColor}\n      : null;\n\n    const className = classnames(\n      longestAnswer === answer ? style.longestAnswer : style.answer,\n      selected ? style.selectedAnswer : style.unselectedAnswer\n    );\n\n    return (\n      <div\n        data-name=\"answer\"\n        className={classnames(className, innerHTML)}\n        onClick={onClick}\n        style={selectedStyle}\n        data-selected={selected}\n        key={key}\n        // eslint-disable-next-line react/no-danger\n        dangerouslySetInnerHTML={{__html: title}}\n      />\n    );\n  });\n\n  return (\n    <div data-name=\"qcm\" className={style.wrapper}>\n      {answersViews}\n    </div>\n  );\n};\n\nQCM.contextTypes = {\n  skin: Provider.childContextTypes.skin\n};\n\nQCM.propTypes = {\n  answers: PropTypes.arrayOf(\n    PropTypes.shape({\n      title: PropTypes.string,\n      selected: PropTypes.bool,\n      onClick: PropTypes.func\n    })\n  )\n};\n\nexport default QCM;\n"],"file":"index.js"}
+{"version":3,"sources":["../../../../src/molecule/questions/qcm/index.js"],"names":["React","useMemo","classnames","PropTypes","getOr","maxBy","Provider","innerHTML","getShadowBoxColorFromPrimary","style","QCM","props","context","answers","longestAnswer","title","length","skin","primarySkinColor","answersViews","map","answer","key","onClick","selected","ariaLabel","longAnswerClass","selectedAnswerClass","selectedAnswer","unselectedAnswer","boxShadow","backgroundColor","background","answerText","__html","wrapper","contextTypes","childContextTypes","propTypes","arrayOf","shape","string","bool","func"],"mappings":"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","sourcesContent":["import React, {useMemo} from 'react';\nimport classnames from 'classnames';\nimport PropTypes from 'prop-types';\nimport getOr from 'lodash/fp/getOr';\nimport maxBy from 'lodash/fp/maxBy';\nimport Provider from '../../../atom/provider';\nimport {innerHTML} from '../../../atom/label/style.css';\nimport {getShadowBoxColorFromPrimary} from '../../../util/get-shadow-box-color-from-primary';\nimport style from './style.css';\n\nconst QCM = (props, context) => {\n  const {answers} = props;\n  const longestAnswer = maxBy(({title}) => title.length, answers);\n  const {skin} = context;\n  const primarySkinColor = getOr('#00B0FF', 'common.primary', skin);\n\n  const answersViews = useMemo(\n    () =>\n      answers.map((answer, key) => {\n        const {onClick, title, selected, 'aria-label': ariaLabel} = answer;\n        const longAnswerClass = longestAnswer.title === title ? style.longestAnswer : style.answer;\n        const selectedAnswerClass = selected ? style.selectedAnswer : style.unselectedAnswer;\n\n        return (\n          <div\n            data-name=\"answer\"\n            aria-label={ariaLabel || title}\n            className={classnames(longAnswerClass, innerHTML, selectedAnswerClass)}\n            onClick={onClick}\n            style={{\n              ...(selected && {\n                boxShadow: `0 4px 16px ${getShadowBoxColorFromPrimary(primarySkinColor)}`\n              })\n            }}\n            data-selected={selected}\n            key={key}\n          >\n            <div\n              data-name=\"answer-background\"\n              style={{backgroundColor: selected ? primarySkinColor : '#F4F4F5' /* cm_grey_75 */}}\n              className={style.background}\n            />\n            <span\n              data-name=\"answer-label\"\n              className={style.answerText}\n              // eslint-disable-next-line react/no-danger\n              dangerouslySetInnerHTML={{__html: title}}\n            />\n          </div>\n        );\n      }),\n    [answers, longestAnswer, primarySkinColor]\n  );\n\n  return (\n    <div data-name=\"qcm\" className={style.wrapper}>\n      {answersViews}\n    </div>\n  );\n};\n\nQCM.contextTypes = {\n  skin: Provider.childContextTypes.skin\n};\n\nQCM.propTypes = {\n  answers: PropTypes.arrayOf(\n    PropTypes.shape({\n      title: PropTypes.string,\n      selected: PropTypes.bool,\n      onClick: PropTypes.func,\n      'aria-label': PropTypes.string\n    })\n  )\n};\n\nexport default QCM;\n"],"file":"index.js"}

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

@@ -3,7 +3,8 @@
 @value colors: "../../../variables/colors.css";
 @value white from colors;
 @value black from colors;
-@value light from colors;
+@value box_shadow_light_dark from colors;
+@value cm_blue_900 from colors;
 
 .wrapper {
   text-align: center;
@@ -18,14 +19,15 @@
   font-size: 15px;
   font-weight: 600;
   background-color: white;
-  border: 1px solid color(black lightness(85%));
-  border-radius: 3px;
+  border-radius: 8px;
   box-sizing: border-box;
   margin-bottom: 8px;
   cursor: pointer;
   padding: 11px 24px;
   line-height: 24px;
   white-space: normal;
+  overflow: hidden;
+  transition: all 0.25s linear;
 }
 
 .longestAnswer {
@@ -33,20 +35,56 @@
   width: auto;
 }
 
-.answer:last-child {
-  margin-bottom: 0;
+
+.background {
+  position: absolute;
+  width: 100%;
+  height: 100%;
+  top: 0;
+  left: 0;
+  transition: opacity 0.25s linear, background-color 0.25s linear;
+}
+
+.answerText {
+  position: relative;
+  color: cm_blue_900;
+}
+
+.selectedAnswer .answerText {
+  color: white;
+}
+
+.selectedAnswer:hover .background{
+  opacity: 0.8;
+}
+
+.selectedAnswer.answer:hover {
+  background-color: black;
 }
 
-.answer:hover {
-  background-color: light;
+.selectedAnswer .background{
+  opacity: 1;
 }
 
+.selectedAnswer,
 .unselectedAnswer {
-  color: black;
+  position: relative;
 }
 
-.selectedAnswer {
-  color: white;
+.unselectedAnswer {
+  box-shadow: 0px 4px 16px box_shadow_light_dark;
+}
+
+.unselectedAnswer .background {
+  opacity: 0;
+}
+
+.unselectedAnswer:hover .background{
+  opacity: 1;
+}
+
+.answer:last-child {
+  margin-bottom: 0;
 }
 
 @media mobile {
@@ -59,10 +97,6 @@
     width: 100%;
   }
 
-  .answer:hover {
-    background-color: white;
-  }
-
   .answer {
     padding: 8px 24px;
   }

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

@@ -2,34 +2,42 @@ export default {
   props: {
     answers: [{
       title: 'There is no need for a password for this, you only need your ID to connect',
+      'aria-label': 'aria Answer',
       onClick: () => {},
       selected: false
     }, {
       title: 'Lorem ipsum',
+      'aria-label': 'aria Answer',
       onClick: () => {},
       selected: false
     }, {
       title: 'Lorem',
+      'aria-label': 'aria Answer',
       onClick: () => {},
       selected: true
     }, {
       title: 'You need to have a password',
+      'aria-label': 'aria Answer',
       onClick: () => {},
       selected: false
     }, {
       title: 'Pouet',
+      'aria-label': 'aria Answer',
       onClick: () => {},
       selected: true
     }, {
       title: 'Alios autem dicere aiunt multo etiam inhumanius (quem locum breviter paulo ante perstrinxi) praesidii adiumentique causa, non benevolentiae neque caritatis, amicitias esse expetendas; itaque, ut quisque minimum firmitatis haberet minimumque virium',
+      'aria-label': 'aria Answer',
       onClick: () => {},
       selected: false
     }, {
       title: 'Lorem ipsum dolor',
+      'aria-label': 'aria Answer',
       onClick: () => {},
       selected: false
     }, {
       title: 'all your base are belong to us',
+      'aria-label': 'aria Answer',
       onClick: () => {},
       selected: false
     }]

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

@@ -1 +1 @@
-{"version":3,"sources":["../../../../../../src/molecule/questions/qcm/test/fixtures/default.js"],"names":["props","answers","title","onClick","selected"],"mappings":"AAAA,eAAe;AACbA,EAAAA,KAAK,EAAE;AACLC,IAAAA,OAAO,EAAE,CACP;AACEC,MAAAA,KAAK,EAAE,4EADT;AAEEC,MAAAA,OAAO,EAAE,MAAM,CAAE,CAFnB;AAGEC,MAAAA,QAAQ,EAAE;AAHZ,KADO,EAMP;AACEF,MAAAA,KAAK,EAAE,aADT;AAEEC,MAAAA,OAAO,EAAE,MAAM,CAAE,CAFnB;AAGEC,MAAAA,QAAQ,EAAE;AAHZ,KANO,EAWP;AACEF,MAAAA,KAAK,EAAE,OADT;AAEEC,MAAAA,OAAO,EAAE,MAAM,CAAE,CAFnB;AAGEC,MAAAA,QAAQ,EAAE;AAHZ,KAXO,EAgBP;AACEF,MAAAA,KAAK,EAAE,6BADT;AAEEC,MAAAA,OAAO,EAAE,MAAM,CAAE,CAFnB;AAGEC,MAAAA,QAAQ,EAAE;AAHZ,KAhBO,EAqBP;AACEF,MAAAA,KAAK,EAAE,OADT;AAEEC,MAAAA,OAAO,EAAE,MAAM,CAAE,CAFnB;AAGEC,MAAAA,QAAQ,EAAE;AAHZ,KArBO,EA0BP;AACEF,MAAAA,KAAK,EACH,yPAFJ;AAGEC,MAAAA,OAAO,EAAE,MAAM,CAAE,CAHnB;AAIEC,MAAAA,QAAQ,EAAE;AAJZ,KA1BO,EAgCP;AACEF,MAAAA,KAAK,EAAE,mBADT;AAEEC,MAAAA,OAAO,EAAE,MAAM,CAAE,CAFnB;AAGEC,MAAAA,QAAQ,EAAE;AAHZ,KAhCO,EAqCP;AACEF,MAAAA,KAAK,EAAE,gCADT;AAEEC,MAAAA,OAAO,EAAE,MAAM,CAAE,CAFnB;AAGEC,MAAAA,QAAQ,EAAE;AAHZ,KArCO;AADJ;AADM,CAAf","sourcesContent":["export default {\n  props: {\n    answers: [\n      {\n        title: 'There is no need for a password for this, you only need your ID to connect',\n        onClick: () => {},\n        selected: false\n      },\n      {\n        title: 'Lorem ipsum',\n        onClick: () => {},\n        selected: false\n      },\n      {\n        title: 'Lorem',\n        onClick: () => {},\n        selected: true\n      },\n      {\n        title: 'You need to have a password',\n        onClick: () => {},\n        selected: false\n      },\n      {\n        title: 'Pouet',\n        onClick: () => {},\n        selected: true\n      },\n      {\n        title:\n          'Alios autem dicere aiunt multo etiam inhumanius (quem locum breviter paulo ante perstrinxi) praesidii adiumentique causa, non benevolentiae neque caritatis, amicitias esse expetendas; itaque, ut quisque minimum firmitatis haberet minimumque virium',\n        onClick: () => {},\n        selected: false\n      },\n      {\n        title: 'Lorem ipsum dolor',\n        onClick: () => {},\n        selected: false\n      },\n      {\n        title: 'all your base are belong to us',\n        onClick: () => {},\n        selected: false\n      }\n    ]\n  }\n};\n"],"file":"default.js"}
+{"version":3,"sources":["../../../../../../src/molecule/questions/qcm/test/fixtures/default.js"],"names":["props","answers","title","onClick","selected"],"mappings":"AAAA,eAAe;AACbA,EAAAA,KAAK,EAAE;AACLC,IAAAA,OAAO,EAAE,CACP;AACEC,MAAAA,KAAK,EAAE,4EADT;AAEE,oBAAc,aAFhB;AAGEC,MAAAA,OAAO,EAAE,MAAM,CAAE,CAHnB;AAIEC,MAAAA,QAAQ,EAAE;AAJZ,KADO,EAOP;AACEF,MAAAA,KAAK,EAAE,aADT;AAEE,oBAAc,aAFhB;AAGEC,MAAAA,OAAO,EAAE,MAAM,CAAE,CAHnB;AAIEC,MAAAA,QAAQ,EAAE;AAJZ,KAPO,EAaP;AACEF,MAAAA,KAAK,EAAE,OADT;AAEE,oBAAc,aAFhB;AAGEC,MAAAA,OAAO,EAAE,MAAM,CAAE,CAHnB;AAIEC,MAAAA,QAAQ,EAAE;AAJZ,KAbO,EAmBP;AACEF,MAAAA,KAAK,EAAE,6BADT;AAEE,oBAAc,aAFhB;AAGEC,MAAAA,OAAO,EAAE,MAAM,CAAE,CAHnB;AAIEC,MAAAA,QAAQ,EAAE;AAJZ,KAnBO,EAyBP;AACEF,MAAAA,KAAK,EAAE,OADT;AAEE,oBAAc,aAFhB;AAGEC,MAAAA,OAAO,EAAE,MAAM,CAAE,CAHnB;AAIEC,MAAAA,QAAQ,EAAE;AAJZ,KAzBO,EA+BP;AACEF,MAAAA,KAAK,EACH,yPAFJ;AAGE,oBAAc,aAHhB;AAIEC,MAAAA,OAAO,EAAE,MAAM,CAAE,CAJnB;AAKEC,MAAAA,QAAQ,EAAE;AALZ,KA/BO,EAsCP;AACEF,MAAAA,KAAK,EAAE,mBADT;AAEE,oBAAc,aAFhB;AAGEC,MAAAA,OAAO,EAAE,MAAM,CAAE,CAHnB;AAIEC,MAAAA,QAAQ,EAAE;AAJZ,KAtCO,EA4CP;AACEF,MAAAA,KAAK,EAAE,gCADT;AAEE,oBAAc,aAFhB;AAGEC,MAAAA,OAAO,EAAE,MAAM,CAAE,CAHnB;AAIEC,MAAAA,QAAQ,EAAE;AAJZ,KA5CO;AADJ;AADM,CAAf","sourcesContent":["export default {\n  props: {\n    answers: [\n      {\n        title: 'There is no need for a password for this, you only need your ID to connect',\n        'aria-label': 'aria Answer',\n        onClick: () => {},\n        selected: false\n      },\n      {\n        title: 'Lorem ipsum',\n        'aria-label': 'aria Answer',\n        onClick: () => {},\n        selected: false\n      },\n      {\n        title: 'Lorem',\n        'aria-label': 'aria Answer',\n        onClick: () => {},\n        selected: true\n      },\n      {\n        title: 'You need to have a password',\n        'aria-label': 'aria Answer',\n        onClick: () => {},\n        selected: false\n      },\n      {\n        title: 'Pouet',\n        'aria-label': 'aria Answer',\n        onClick: () => {},\n        selected: true\n      },\n      {\n        title:\n          'Alios autem dicere aiunt multo etiam inhumanius (quem locum breviter paulo ante perstrinxi) praesidii adiumentique causa, non benevolentiae neque caritatis, amicitias esse expetendas; itaque, ut quisque minimum firmitatis haberet minimumque virium',\n        'aria-label': 'aria Answer',\n        onClick: () => {},\n        selected: false\n      },\n      {\n        title: 'Lorem ipsum dolor',\n        'aria-label': 'aria Answer',\n        onClick: () => {},\n        selected: false\n      },\n      {\n        title: 'all your base are belong to us',\n        'aria-label': 'aria Answer',\n        onClick: () => {},\n        selected: false\n      }\n    ]\n  }\n};\n"],"file":"default.js"}

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

@@ -0,0 +1,103 @@
+import _identity from "lodash/fp/identity";
+
+function _extends() { _extends = Object.assign || function (target) { for (var i = 1; i < arguments.length; i++) { var source = arguments[i]; for (var key in source) { if (Object.prototype.hasOwnProperty.call(source, key)) { target[key] = source[key]; } } } return target; }; return _extends.apply(this, arguments); }
+
+import browserEnv from 'browser-env';
+import test from 'ava';
+import React from 'react';
+import { shallow, mount, configure } from 'enzyme';
+import Adapter from 'enzyme-adapter-react-16';
+import Qcm from '..';
+import defaultFixture from './fixtures/default';
+import noAriaLabelFixture from './fixtures/no-selected';
+browserEnv();
+configure({
+  adapter: new Adapter()
+});
+const translate = _identity;
+test('onClick should be reachable, should match given aria-label', t => {
+  let answerWasClicked = false;
+  defaultFixture.props.answers[1] = _extends(_extends({}, defaultFixture.props.answers[1]), {}, {
+    onClick: () => {
+      answerWasClicked = true;
+    }
+  });
+  const wrapper = shallow( /*#__PURE__*/React.createElement(Qcm, defaultFixture.props), {
+    context: {
+      translate
+    }
+  });
+  const answers = wrapper.find('[data-name="answer"]');
+  t.true(answers.at(1).exists());
+  t.is(answers.at(1).props()['aria-label'], 'aria Answer');
+  answers.at(1).simulate('click', {});
+  t.true(answerWasClicked);
+  t.pass();
+});
+test("should set: selected's background to Primary, unselected's no background", t => {
+  const wrapper = mount( /*#__PURE__*/React.createElement(Qcm, defaultFixture.props));
+  const answers = wrapper.find('[data-name="answer"]');
+  const unselectedAnswer = answers.at(1);
+  const expectedPrimaryColor = '#00B0FF'; // ---- unselected ----
+  // should not have styles on the wrapper
+
+  t.true(unselectedAnswer.exists());
+  t.deepEqual(unselectedAnswer.props().style, {}); // should not have any styles (color should be picked from the css for unselected)
+
+  const unselectedLabel = unselectedAnswer.children().at(1);
+  t.true(unselectedLabel.exists());
+  t.falsy(unselectedLabel.props().style); // check dangerouslySetInnerHTML
+
+  t.deepEqual(unselectedLabel.props().dangerouslySetInnerHTML, {
+    __html: 'Lorem ipsum'
+  });
+  t.is(unselectedLabel.text(), 'Lorem ipsum'); // should have a backgroundColor of '#F4F4F5' /* cm_grey_75 */
+
+  const unselectedBackground = unselectedAnswer.children().at(0);
+  t.true(unselectedBackground.exists());
+  t.deepEqual(unselectedBackground.props().style, {
+    backgroundColor: '#F4F4F5'
+  }); // selected
+  // should have box-shadow color based on primary
+
+  const selectedAnswer = answers.at(2);
+  t.true(selectedAnswer.exists());
+  t.deepEqual(selectedAnswer.props().style, {
+    boxShadow: '0 4px 16px rgba(0, 122, 179, 0.25)'
+  }); // should not have any prop in label style
+
+  const selectedLabel = selectedAnswer.children().at(1);
+  t.true(selectedLabel.exists());
+  t.falsy(selectedLabel.props().style); // check dangerouslySetInnerHTML
+
+  t.deepEqual(selectedLabel.props().dangerouslySetInnerHTML, {
+    __html: 'Lorem'
+  });
+  t.is(selectedLabel.text(), 'Lorem'); // should have backgroundColor as expectedPrimaryColor (primary to be overlayed by the css)
+
+  const selectedBackground = selectedAnswer.children().at(0);
+  t.true(selectedBackground.exists());
+  t.deepEqual(selectedBackground.props().style, {
+    backgroundColor: expectedPrimaryColor
+  });
+  t.pass();
+});
+test('should set className to longAnswer if the answer is the longest of the set', t => {
+  const wrapper = mount( /*#__PURE__*/React.createElement(Qcm, defaultFixture.props));
+  const answer = wrapper.find('[data-name="answer"]'); // regular answer
+
+  t.true(answer.at(4).exists());
+  t.is(answer.at(4).props().className, 'qcm__answer label__innerHTML qcm__selectedAnswer'); // long answer
+
+  t.true(answer.at(5).exists());
+  t.is(answer.at(5).props().className, 'qcm__longestAnswer qcm__answer qcm__answer label__innerHTML qcm__unselectedAnswer');
+  t.pass();
+});
+test('should use title as default aria-label if no aria-label is provided', t => {
+  const wrapper = mount( /*#__PURE__*/React.createElement(Qcm, noAriaLabelFixture.props));
+  const answers = wrapper.find('[data-name="answer"]');
+  t.is(answers.at(6).text(), 'Lorem ipsum dolor');
+  t.is(answers.at(6).props()['aria-label'], 'Lorem ipsum dolor');
+  t.pass();
+});
+//# sourceMappingURL=qcm.js.map

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

@@ -0,0 +1 @@
+{"version":3,"sources":["../../../../../src/molecule/questions/qcm/test/qcm.js"],"names":["browserEnv","test","React","shallow","mount","configure","Adapter","Qcm","defaultFixture","noAriaLabelFixture","adapter","translate","t","answerWasClicked","props","answers","onClick","wrapper","context","find","true","at","exists","is","simulate","pass","unselectedAnswer","expectedPrimaryColor","deepEqual","style","unselectedLabel","children","falsy","dangerouslySetInnerHTML","__html","text","unselectedBackground","backgroundColor","selectedAnswer","boxShadow","selectedLabel","selectedBackground","answer","className"],"mappings":"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","sourcesContent":["import browserEnv from 'browser-env';\nimport test from 'ava';\nimport React from 'react';\nimport {shallow, mount, configure} from 'enzyme';\nimport {identity} from 'lodash/fp';\nimport Adapter from 'enzyme-adapter-react-16';\nimport Qcm from '..';\nimport defaultFixture from './fixtures/default';\nimport noAriaLabelFixture from './fixtures/no-selected';\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  const wrapper = shallow(<Qcm {...defaultFixture.props} />, {\n    context: {translate}\n  });\n  const answers = wrapper.find('[data-name=\"answer\"]');\n  t.true(answers.at(1).exists());\n  t.is(answers.at(1).props()['aria-label'], 'aria Answer');\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 = mount(<Qcm {...defaultFixture.props} />);\n  const answers = wrapper.find('[data-name=\"answer\"]');\n  const unselectedAnswer = answers.at(1);\n  const expectedPrimaryColor = '#00B0FF';\n  // ---- unselected ----\n  // should not have styles on the wrapper\n  t.true(unselectedAnswer.exists());\n  t.deepEqual(unselectedAnswer.props().style, {});\n\n  // should not have any styles (color should be picked from the css for unselected)\n  const unselectedLabel = unselectedAnswer.children().at(1);\n  t.true(unselectedLabel.exists());\n  t.falsy(unselectedLabel.props().style);\n\n  // check dangerouslySetInnerHTML\n  t.deepEqual(unselectedLabel.props().dangerouslySetInnerHTML, {\n    __html: 'Lorem ipsum'\n  });\n  t.is(unselectedLabel.text(), 'Lorem ipsum');\n\n  // should have a backgroundColor of '#F4F4F5' /* cm_grey_75 */\n  const unselectedBackground = unselectedAnswer.children().at(0);\n  t.true(unselectedBackground.exists());\n  t.deepEqual(unselectedBackground.props().style, {\n    backgroundColor: '#F4F4F5'\n  });\n\n  // selected\n  // should have box-shadow color based on primary\n  const selectedAnswer = answers.at(2);\n  t.true(selectedAnswer.exists());\n  t.deepEqual(selectedAnswer.props().style, {\n    boxShadow: '0 4px 16px rgba(0, 122, 179, 0.25)'\n  });\n\n  // should not have any prop in label style\n  const selectedLabel = selectedAnswer.children().at(1);\n  t.true(selectedLabel.exists());\n  t.falsy(selectedLabel.props().style);\n\n  // check dangerouslySetInnerHTML\n  t.deepEqual(selectedLabel.props().dangerouslySetInnerHTML, {\n    __html: 'Lorem'\n  });\n\n  t.is(selectedLabel.text(), 'Lorem');\n\n  // should have backgroundColor as expectedPrimaryColor (primary to be overlayed by the css)\n  const selectedBackground = selectedAnswer.children().at(0);\n  t.true(selectedBackground.exists());\n  t.deepEqual(selectedBackground.props().style, {\n    backgroundColor: expectedPrimaryColor\n  });\n\n  t.pass();\n});\n\ntest('should set className to longAnswer if the answer is the longest of the set', t => {\n  const wrapper = mount(<Qcm {...defaultFixture.props} />);\n  const answer = wrapper.find('[data-name=\"answer\"]');\n  // regular answer\n  t.true(answer.at(4).exists());\n  t.is(answer.at(4).props().className, 'qcm__answer label__innerHTML qcm__selectedAnswer');\n\n  // long answer\n  t.true(answer.at(5).exists());\n  t.is(\n    answer.at(5).props().className,\n    'qcm__longestAnswer qcm__answer qcm__answer label__innerHTML qcm__unselectedAnswer'\n  );\n  t.pass();\n});\n\ntest('should use title as default aria-label if no aria-label is provided', t => {\n  const wrapper = mount(<Qcm {...noAriaLabelFixture.props} />);\n  const answers = wrapper.find('[data-name=\"answer\"]');\n  t.is(answers.at(6).text(), 'Lorem ipsum dolor');\n  t.is(answers.at(6).props()['aria-label'], 'Lorem ipsum dolor');\n  t.pass();\n});\n"],"file":"qcm.js"}

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

@@ -1,51 +1,68 @@
 import _getOr from "lodash/fp/getOr";
+
+function _extends() { _extends = Object.assign || function (target) { for (var i = 1; i < arguments.length; i++) { var source = arguments[i]; for (var key in source) { if (Object.prototype.hasOwnProperty.call(source, key)) { target[key] = source[key]; } } } return target; }; return _extends.apply(this, arguments); }
+
 import React from 'react';
 import PropTypes from 'prop-types';
 import classnames from 'classnames';
 import Provider from '../../../atom/provider';
 import { innerHTML } from '../../../atom/label/style.css';
+import { getShadowBoxColorFromPrimary } from '../../../util/get-shadow-box-color-from-primary';
 import style from './style.css';
 
 const QCMImage = (props, context) => {
   const {
     answers
   } = props;
+  const {
+    skin
+  } = context;
+
+  const primarySkinColor = _getOr('#00B0FF', 'common.primary', skin);
+
   const answersViews = answers.map((answer, key) => {
     const {
       onClick,
       title,
       selected,
-      image
+      image,
+      ariaLabel
     } = answer;
-    const {
-      skin
-    } = context;
-
-    const primarySkinColor = _getOr('#00B0FF', 'common.primary', skin);
-
-    const selectedStyle = selected ? {
-      backgroundColor: primarySkinColor,
-      borderColor: primarySkinColor
-    } : null;
     return /*#__PURE__*/React.createElement("div", {
-      className: selected ? style.selected : style.answer,
       onClick: onClick,
       "data-selected": selected,
-      style: selectedStyle,
+      "data-name": "answerGraphic",
+      style: _extends({}, selected && {
+        boxShadow: `0 4px 16px ${getShadowBoxColorFromPrimary(primarySkinColor)}`
+      }),
+      className: selected ? style.selected : style.answer,
       key: key
+    }, /*#__PURE__*/React.createElement("div", {
+      "data-name": "answerBackground",
+      style: {
+        backgroundColor: selected ? primarySkinColor : '#F4F4F5'
+      },
+      className: style.background
+    }), /*#__PURE__*/React.createElement("div", {
+      "data-name": "answerContent",
+      className: style.content
     }, /*#__PURE__*/React.createElement("div", {
       className: style.imageWrapper,
-      "data-name": "answerGraphic",
+      "data-name": "answerImage",
+      "aria-label": ariaLabel || title,
       style: {
         backgroundImage: `url(${image})`
       }
     }), /*#__PURE__*/React.createElement("div", {
-      className: classnames(style.titleWrapper, innerHTML) // eslint-disable-next-line react/no-danger
+      "data-name": "answerText",
+      className: style.titleWrapper
+    }, /*#__PURE__*/React.createElement("div", {
+      className: classnames(style.title, innerHTML) // eslint-disable-next-line react/no-danger
       ,
       dangerouslySetInnerHTML: {
         __html: title
       }
-    }));
+    }))));
   });
   return /*#__PURE__*/React.createElement("div", {
     "data-name": "qcm-graphic-wrapper",
@@ -61,7 +78,8 @@ QCMImage.propTypes = process.env.NODE_ENV !== "production" ? {
     title: PropTypes.string,
     selected: PropTypes.bool,
     onClick: PropTypes.func,
-    image: PropTypes.string
+    image: PropTypes.string,
+    ariaLabel: PropTypes.string
   }))
 } : {};
 export default QCMImage;

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","style","QCMImage","props","context","answers","answersViews","map","answer","key","onClick","title","selected","image","skin","primarySkinColor","selectedStyle","backgroundColor","borderColor","imageWrapper","backgroundImage","titleWrapper","__html","wrapper","contextTypes","childContextTypes","propTypes","arrayOf","shape","string","bool","func"],"mappings":";AAAA,OAAOA,KAAP,MAAkB,OAAlB;AACA,OAAOC,SAAP,MAAsB,YAAtB;AAEA,OAAOC,UAAP,MAAuB,YAAvB;AACA,OAAOC,QAAP,MAAqB,wBAArB;AACA,SAAQC,SAAR,QAAwB,+BAAxB;AACA,OAAOC,KAAP,MAAkB,aAAlB;;AAEA,MAAMC,QAAQ,GAAG,CAACC,KAAD,EAAQC,OAAR,KAAoB;AACnC,QAAM;AAACC,IAAAA;AAAD,MAAYF,KAAlB;AAEA,QAAMG,YAAY,GAAGD,OAAO,CAACE,GAAR,CAAY,CAACC,MAAD,EAASC,GAAT,KAAiB;AAChD,UAAM;AAACC,MAAAA,OAAD;AAAUC,MAAAA,KAAV;AAAiBC,MAAAA,QAAjB;AAA2BC,MAAAA;AAA3B,QAAoCL,MAA1C;AACA,UAAM;AAACM,MAAAA;AAAD,QAASV,OAAf;;AAEA,UAAMW,gBAAgB,GAAG,OAAM,SAAN,EAAiB,gBAAjB,EAAmCD,IAAnC,CAAzB;;AACA,UAAME,aAAa,GAAGJ,QAAQ,GAC1B;AAACK,MAAAA,eAAe,EAAEF,gBAAlB;AAAoCG,MAAAA,WAAW,EAAEH;AAAjD,KAD0B,GAE1B,IAFJ;AAGA,wBACE;AACE,MAAA,SAAS,EAAEH,QAAQ,GAAGX,KAAK,CAACW,QAAT,GAAoBX,KAAK,CAACO,MAD/C;AAEE,MAAA,OAAO,EAAEE,OAFX;AAGE,uBAAeE,QAHjB;AAIE,MAAA,KAAK,EAAEI,aAJT;AAKE,MAAA,GAAG,EAAEP;AALP,oBAOE;AACE,MAAA,SAAS,EAAER,KAAK,CAACkB,YADnB;AAEE,mBAAU,eAFZ;AAGE,MAAA,KAAK,EAAE;AACLC,QAAAA,eAAe,EAAG,OAAMP,KAAM;AADzB;AAHT,MAPF,eAcE;AACE,MAAA,SAAS,EAAEf,UAAU,CAACG,KAAK,CAACoB,YAAP,EAAqBrB,SAArB,CADvB,CAEE;AAFF;AAGE,MAAA,uBAAuB,EAAE;AAACsB,QAAAA,MAAM,EAAEX;AAAT;AAH3B,MAdF,CADF;AAsBD,GA9BoB,CAArB;AAgCA,sBACE;AAAK,iBAAU,qBAAf;AAAqC,IAAA,SAAS,EAAEV,KAAK,CAACsB;AAAtD,KACGjB,YADH,CADF;AAKD,CAxCD;;AA0CAJ,QAAQ,CAACsB,YAAT,GAAwB;AACtBV,EAAAA,IAAI,EAAEf,QAAQ,CAAC0B,iBAAT,CAA2BX;AADX,CAAxB;AAIAZ,QAAQ,CAACwB,SAAT,2CAAqB;AACnBrB,EAAAA,OAAO,EAAER,SAAS,CAAC8B,OAAV,CACP9B,SAAS,CAAC+B,KAAV,CAAgB;AACdjB,IAAAA,KAAK,EAAEd,SAAS,CAACgC,MADH;AAEdjB,IAAAA,QAAQ,EAAEf,SAAS,CAACiC,IAFN;AAGdpB,IAAAA,OAAO,EAAEb,SAAS,CAACkC,IAHL;AAIdlB,IAAAA,KAAK,EAAEhB,SAAS,CAACgC;AAJH,GAAhB,CADO;AADU,CAArB;AAWA,eAAe3B,QAAf","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 style from './style.css';\n\nconst QCMImage = (props, context) => {\n  const {answers} = props;\n\n  const answersViews = answers.map((answer, key) => {\n    const {onClick, title, selected, image} = answer;\n    const {skin} = context;\n\n    const primarySkinColor = getOr('#00B0FF', 'common.primary', skin);\n    const selectedStyle = selected\n      ? {backgroundColor: primarySkinColor, borderColor: primarySkinColor}\n      : null;\n    return (\n      <div\n        className={selected ? style.selected : style.answer}\n        onClick={onClick}\n        data-selected={selected}\n        style={selectedStyle}\n        key={key}\n      >\n        <div\n          className={style.imageWrapper}\n          data-name=\"answerGraphic\"\n          style={{\n            backgroundImage: `url(${image})`\n          }}\n        />\n        <div\n          className={classnames(style.titleWrapper, innerHTML)}\n          // eslint-disable-next-line react/no-danger\n          dangerouslySetInnerHTML={{__html: title}}\n        />\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    })\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              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"}