@coorpacademy/components 10.5.5 → 10.5.7-alpha.12

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

@@ -0,0 +1,115 @@
+"use strict";
+
+var _identity2 = _interopRequireDefault(require("lodash/fp/identity"));
+
+var _browserEnv = _interopRequireDefault(require("browser-env"));
+
+var _ava = _interopRequireDefault(require("ava"));
+
+var _react = _interopRequireDefault(require("react"));
+
+var _enzyme = require("enzyme");
+
+var _enzymeAdapterReact = _interopRequireDefault(require("enzyme-adapter-react-16"));
+
+var _ = _interopRequireDefault(require(".."));
+
+var _default = _interopRequireDefault(require("./fixtures/default"));
+
+var _noSelected = _interopRequireDefault(require("./fixtures/no-selected"));
+
+function _interopRequireDefault(obj) { return obj && obj.__esModule ? obj : { default: obj }; }
+
+function _extends() { _extends = Object.assign || function (target) { for (var i = 1; i < arguments.length; i++) { var source = arguments[i]; for (var key in source) { if (Object.prototype.hasOwnProperty.call(source, key)) { target[key] = source[key]; } } } return target; }; return _extends.apply(this, arguments); }
+
+(0, _browserEnv.default)();
+(0, _enzyme.configure)({
+  adapter: new _enzymeAdapterReact.default()
+});
+const translate = _identity2.default;
+(0, _ava.default)('onClick should be reachable, should match given aria-label', t => {
+  let answerWasClicked = false;
+  _default.default.props.answers[1] = _extends(_extends({}, _default.default.props.answers[1]), {}, {
+    onClick: () => {
+      answerWasClicked = true;
+    }
+  });
+  const wrapper = (0, _enzyme.shallow)( /*#__PURE__*/_react.default.createElement(_.default, _default.default.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();
+});
+(0, _ava.default)("should set: selected's background to Primary, unselected's no background", t => {
+  const wrapper = (0, _enzyme.mount)( /*#__PURE__*/_react.default.createElement(_.default, _default.default.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();
+});
+(0, _ava.default)('should set className to longAnswer if the answer is the longest of the set', t => {
+  const wrapper = (0, _enzyme.mount)( /*#__PURE__*/_react.default.createElement(_.default, _default.default.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();
+});
+(0, _ava.default)('should use title as default aria-label if no aria-label is provided', t => {
+  const wrapper = (0, _enzyme.mount)( /*#__PURE__*/_react.default.createElement(_.default, _noSelected.default.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/lib/molecule/questions/qcm/test/qcm.js.map

@@ -0,0 +1 @@
+{"version":3,"sources":["../../../../../src/molecule/questions/qcm/test/qcm.js"],"names":["adapter","Adapter","translate","t","answerWasClicked","defaultFixture","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","noAriaLabelFixture"],"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/lib/molecule/questions/qcm-graphic/index.js

@@ -15,48 +15,65 @@ var _provider = _interopRequireDefault(require("../../../atom/provider"));
 
 var _style = require("../../../atom/label/style.css");
 
+var _getShadowBoxColorFromPrimary = require("../../../util/get-shadow-box-color-from-primary");
+
 var _style2 = _interopRequireDefault(require("./style.css"));
 
 function _interopRequireDefault(obj) { return obj && obj.__esModule ? obj : { default: obj }; }
 
+function _extends() { _extends = Object.assign || function (target) { for (var i = 1; i < arguments.length; i++) { var source = arguments[i]; for (var key in source) { if (Object.prototype.hasOwnProperty.call(source, key)) { target[key] = source[key]; } } } return target; }; return _extends.apply(this, arguments); }
+
 const QCMImage = (props, context) => {
   const {
     answers
   } = props;
+  const {
+    skin
+  } = context;
+  const primarySkinColor = (0, _getOr2.default)('#00B0FF', 'common.primary', skin);
   const answersViews = answers.map((answer, key) => {
     const {
       onClick,
       title,
       selected,
-      image
+      image,
+      ariaLabel
     } = answer;
-    const {
-      skin
-    } = context;
-    const primarySkinColor = (0, _getOr2.default)('#00B0FF', 'common.primary', skin);
-    const selectedStyle = selected ? {
-      backgroundColor: primarySkinColor,
-      borderColor: primarySkinColor
-    } : null;
     return /*#__PURE__*/_react.default.createElement("div", {
-      className: selected ? _style2.default.selected : _style2.default.answer,
       onClick: onClick,
       "data-selected": selected,
-      style: selectedStyle,
+      "data-name": "answerGraphic",
+      style: _extends({}, selected && {
+        boxShadow: `0 4px 16px ${(0, _getShadowBoxColorFromPrimary.getShadowBoxColorFromPrimary)(primarySkinColor)}`
+      }),
+      className: selected ? _style2.default.selected : _style2.default.answer,
       key: key
+    }, /*#__PURE__*/_react.default.createElement("div", {
+      "data-name": "answerBackground",
+      style: {
+        backgroundColor: selected ? primarySkinColor : '#F4F4F5'
+      },
+      className: _style2.default.background
+    }), /*#__PURE__*/_react.default.createElement("div", {
+      "data-name": "answerContent",
+      className: _style2.default.content
     }, /*#__PURE__*/_react.default.createElement("div", {
       className: _style2.default.imageWrapper,
-      "data-name": "answerGraphic",
+      "data-name": "answerImage",
+      "aria-label": ariaLabel || title,
       style: {
         backgroundImage: `url(${image})`
       }
     }), /*#__PURE__*/_react.default.createElement("div", {
-      className: (0, _classnames.default)(_style2.default.titleWrapper, _style.innerHTML) // eslint-disable-next-line react/no-danger
+      "data-name": "answerText",
+      className: _style2.default.titleWrapper
+    }, /*#__PURE__*/_react.default.createElement("div", {
+      className: (0, _classnames.default)(_style2.default.title, _style.innerHTML) // eslint-disable-next-line react/no-danger
       ,
       dangerouslySetInnerHTML: {
         __html: title
       }
-    }));
+    }))));
   });
   return /*#__PURE__*/_react.default.createElement("div", {
     "data-name": "qcm-graphic-wrapper",
@@ -72,7 +89,8 @@ QCMImage.propTypes = process.env.NODE_ENV !== "production" ? {
     title: _propTypes.default.string,
     selected: _propTypes.default.bool,
     onClick: _propTypes.default.func,
-    image: _propTypes.default.string
+    image: _propTypes.default.string,
+    ariaLabel: _propTypes.default.string
   }))
 } : {};
 var _default = QCMImage;

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","answersViews","map","answer","key","onClick","title","selected","image","skin","primarySkinColor","selectedStyle","backgroundColor","borderColor","style","imageWrapper","backgroundImage","titleWrapper","innerHTML","__html","wrapper","contextTypes","Provider","childContextTypes","propTypes","PropTypes","arrayOf","shape","string","bool","func"],"mappings":";;;;;;;AAAA;;AACA;;AAEA;;AACA;;AACA;;AACA;;;;AAEA,MAAMA,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,qBAAM,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,GAAGO,gBAAMP,QAAT,GAAoBO,gBAAMX,MAD/C;AAEE,MAAA,OAAO,EAAEE,OAFX;AAGE,uBAAeE,QAHjB;AAIE,MAAA,KAAK,EAAEI,aAJT;AAKE,MAAA,GAAG,EAAEP;AALP,oBAOE;AACE,MAAA,SAAS,EAAEU,gBAAMC,YADnB;AAEE,mBAAU,eAFZ;AAGE,MAAA,KAAK,EAAE;AACLC,QAAAA,eAAe,EAAG,OAAMR,KAAM;AADzB;AAHT,MAPF,eAcE;AACE,MAAA,SAAS,EAAE,yBAAWM,gBAAMG,YAAjB,EAA+BC,gBAA/B,CADb,CAEE;AAFF;AAGE,MAAA,uBAAuB,EAAE;AAACC,QAAAA,MAAM,EAAEb;AAAT;AAH3B,MAdF,CADF;AAsBD,GA9BoB,CAArB;AAgCA,sBACE;AAAK,iBAAU,qBAAf;AAAqC,IAAA,SAAS,EAAEQ,gBAAMM;AAAtD,KACGnB,YADH,CADF;AAKD,CAxCD;;AA0CAJ,QAAQ,CAACwB,YAAT,GAAwB;AACtBZ,EAAAA,IAAI,EAAEa,kBAASC,iBAAT,CAA2Bd;AADX,CAAxB;AAIAZ,QAAQ,CAAC2B,SAAT,2CAAqB;AACnBxB,EAAAA,OAAO,EAAEyB,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;AAJH,GAAhB,CADO;AADU,CAArB;eAWe/B,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 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":["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"}

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

@@ -2,9 +2,10 @@
 @value mobile from breakpoints;
 @value colors: "../../../variables/colors.css";
 @value white from colors;
-@value xtraLightGrey from colors;
-@value light from colors;
 @value black from colors;
+@value cm_grey_75 from colors;
+@value cm_primary_blue from colors;
+@value cm_blue_900 from colors;
 
 .wrapper {
   display: flex;
@@ -15,16 +16,34 @@
 }
 
 .answer {
-  color: black;
+  position: relative;
+  color: cm_blue_900;
   background-color: white;
-  border: 1px solid color(black lightness(85%));
-  border-radius: 3px;
   box-sizing: border-box;
   cursor: pointer;
   padding: 8px;
   width: 200px;
   min-height: 245px;
   margin: 0 4px 8px;
+  box-shadow: 0px 4px 16px rgba(0, 0, 0, 0.12);
+  border-radius: 16px;
+  transition: background-color 0.25s linear;
+}
+
+.background {
+  top: 0;
+  left: 0;
+  position: absolute;
+  border-radius: 16px;
+  height: 100%;
+  width: 100%;
+  transition: opacity 0.25s linear, background-color 0.25s linear;
+}
+
+.content {
+  height: 100%;
+  width: 100%;
+  position: relative;
 }
 
 .imageWrapper {
@@ -33,12 +52,21 @@
   align-items: center;
   height: 110px;
   margin-bottom: 16px;
-  background-size: contain;
+  background-size: cover;
   background-repeat: no-repeat;
   background-position: center center;
+  border-radius: 12px;
 }
 
 .titleWrapper {
+  display: flex;
+  height: calc(100% - 126px);
+  width: 100%;
+  align-items: center;
+  justify-content: center;
+}
+
+.title {
   font-family: 'Gilroy';
   font-size: 17px;
   line-height: 20px;
@@ -49,7 +77,16 @@
 }
 
 .answer:hover {
-  background-color: xtraLightGrey;
+  background: cm_grey_75;
+  box-shadow: 0px 4px 16px rgba(0, 0, 0, 0.12);
+}
+
+.answer .background{
+  opacity: 0;
+}
+
+.answer:hover .background{
+  opacity: 1;
 }
 
 .selected {
@@ -57,10 +94,23 @@
   color: white;
 }
 
+.selected .background{
+  opacity: 1;
+}
+
+.selected:hover .background{
+  opacity: 0.8;
+}
+
+.selected.answer:hover {
+  background-color: black;
+}
+
 @media mobile {
   .wrapper {
     flex-direction: column;
-    align-items: stretch;
+    display: flex;
+    align-items: center;
     width: 100%;
     padding-bottom: 0;
   }
@@ -69,17 +119,18 @@
     display: flex;
     align-items: center;
     flex-flow: row nowrap;
-    width: 100%;
+    width: calc(100% - 45px);
     min-height: 82px;
     height: inherit;
     margin: 0 0 8px;
     overflow: hidden;
   }
 
-  .answer:hover {
-    background-color: white;
+  .content {
+    display: flex;
+    align-items: center;
   }
-
+  
   .answer:last-child {
     margin-bottom: 0;
   }
@@ -96,7 +147,7 @@
     white-space: wrap;
     overflow: hidden;
     padding: 0;
-    text-align: left;
+    justify-content: left;
     font-size: 15px;
   }
 }

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

@@ -0,0 +1,76 @@
+"use strict";
+
+var _identity2 = _interopRequireDefault(require("lodash/fp/identity"));
+
+var _browserEnv = _interopRequireDefault(require("browser-env"));
+
+var _ava = _interopRequireDefault(require("ava"));
+
+var _react = _interopRequireDefault(require("react"));
+
+var _enzyme = require("enzyme");
+
+var _enzymeAdapterReact = _interopRequireDefault(require("enzyme-adapter-react-16"));
+
+var _ = _interopRequireDefault(require(".."));
+
+var _default = _interopRequireDefault(require("./fixtures/default"));
+
+function _interopRequireDefault(obj) { return obj && obj.__esModule ? obj : { default: obj }; }
+
+function _extends() { _extends = Object.assign || function (target) { for (var i = 1; i < arguments.length; i++) { var source = arguments[i]; for (var key in source) { if (Object.prototype.hasOwnProperty.call(source, key)) { target[key] = source[key]; } } } return target; }; return _extends.apply(this, arguments); }
+
+(0, _browserEnv.default)();
+(0, _enzyme.configure)({
+  adapter: new _enzymeAdapterReact.default()
+});
+const translate = _identity2.default;
+(0, _ava.default)('onClick should be reachable, should match given aria-label', t => {
+  let answerWasClicked = false;
+  _default.default.props.answers[1] = _extends(_extends({}, _default.default.props.answers[1]), {}, {
+    onClick: () => {
+      answerWasClicked = true;
+    }
+  });
+  const wrapper = (0, _enzyme.shallow)( /*#__PURE__*/_react.default.createElement(_.default, _default.default.props), {
+    context: {
+      translate
+    }
+  });
+  const answersImages = wrapper.find('[data-name="answerImage"]');
+  t.true(answersImages.at(1).exists());
+  t.is(answersImages.at(1).props()['aria-label'], 'Lorem ipsum');
+  const answers = wrapper.find('[data-name="answerGraphic"]');
+  answers.at(1).simulate('click');
+  t.true(answerWasClicked);
+  t.pass();
+});
+(0, _ava.default)("should set: selected's background to Primary, unselected's no background", t => {
+  const wrapper = (0, _enzyme.shallow)( /*#__PURE__*/_react.default.createElement(_.default, _default.default.props), {
+    context: {
+      translate
+    }
+  });
+  const answers = wrapper.find('[data-name="answerGraphic"]');
+  const firstAnswer = answers.at(0);
+  t.true(firstAnswer.exists());
+  t.deepEqual(firstAnswer.props().style, {});
+  const unselectedBackgroundAnswer = firstAnswer.children().at(0);
+  t.true(unselectedBackgroundAnswer.exists());
+  t.deepEqual(unselectedBackgroundAnswer.props().style, {
+    backgroundColor: '#F4F4F5'
+  });
+  const firstAnswerText = firstAnswer.children().at(1).children().at(1).children().at(0);
+  t.true(firstAnswerText.exists());
+  const thirdAnswer = answers.at(2);
+  t.true(thirdAnswer.exists());
+  t.deepEqual(thirdAnswer.props().style, {
+    boxShadow: '0 4px 16px rgba(0, 122, 179, 0.25)'
+  });
+  const selectedBackgroundAnswer = thirdAnswer.children().at(0);
+  t.true(selectedBackgroundAnswer.exists());
+  t.deepEqual(selectedBackgroundAnswer.props().style, {
+    backgroundColor: '#00B0FF'
+  });
+});
+//# sourceMappingURL=qcm-graphic.js.map

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

@@ -0,0 +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":";;;;AAAA;;AACA;;AACA;;AACA;;AAEA;;AACA;;AACA;;;;;;AAEA;AACA,uBAAU;AAACA,EAAAA,OAAO,EAAE,IAAIC,2BAAJ;AAAV,CAAV;AACA,MAAMC,SAAS,qBAAf;AAEA,kBAAK,4DAAL,EAAmEC,CAAC,IAAI;AACtE,MAAIC,gBAAgB,GAAG,KAAvB;AACAC,mBAAeC,KAAf,CAAqBC,OAArB,CAA6B,CAA7B,0BACKF,iBAAeC,KAAf,CAAqBC,OAArB,CAA6B,CAA7B,CADL;AAEEC,IAAAA,OAAO,EAAE,MAAM;AACbJ,MAAAA,gBAAgB,GAAG,IAAnB;AACD;AAJH;AAOA,QAAMK,OAAO,GAAG,mCAAQ,6BAAC,SAAD,EAAcJ,iBAAeC,KAA7B,CAAR,EAAgD;AAC9DI,IAAAA,OAAO,EAAE;AAACR,MAAAA;AAAD;AADqD,GAAhD,CAAhB;AAIA,QAAMS,aAAa,GAAGF,OAAO,CAACG,IAAR,CAAa,2BAAb,CAAtB;AACAT,EAAAA,CAAC,CAACU,IAAF,CAAOF,aAAa,CAACG,EAAd,CAAiB,CAAjB,EAAoBC,MAApB,EAAP;AACAZ,EAAAA,CAAC,CAACa,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;AACAd,EAAAA,CAAC,CAACU,IAAF,CAAOT,gBAAP;AACAD,EAAAA,CAAC,CAACe,IAAF;AACD,CArBD;AAuBA,kBAAK,0EAAL,EAAiFf,CAAC,IAAI;AACpF,QAAMM,OAAO,GAAG,mCAAQ,6BAAC,SAAD,EAAcJ,iBAAeC,KAA7B,CAAR,EAAgD;AAC9DI,IAAAA,OAAO,EAAE;AAACR,MAAAA;AAAD;AADqD,GAAhD,CAAhB;AAGA,QAAMK,OAAO,GAAGE,OAAO,CAACG,IAAR,CAAa,6BAAb,CAAhB;AAEA,QAAMO,WAAW,GAAGZ,OAAO,CAACO,EAAR,CAAW,CAAX,CAApB;AACAX,EAAAA,CAAC,CAACU,IAAF,CAAOM,WAAW,CAACJ,MAAZ,EAAP;AACAZ,EAAAA,CAAC,CAACiB,SAAF,CAAYD,WAAW,CAACb,KAAZ,GAAoBe,KAAhC,EAAuC,EAAvC;AACA,QAAMC,0BAA0B,GAAGH,WAAW,CAACI,QAAZ,GAAuBT,EAAvB,CAA0B,CAA1B,CAAnC;AACAX,EAAAA,CAAC,CAACU,IAAF,CAAOS,0BAA0B,CAACP,MAA3B,EAAP;AACAZ,EAAAA,CAAC,CAACiB,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;AACAX,EAAAA,CAAC,CAACU,IAAF,CAAOY,eAAe,CAACV,MAAhB,EAAP;AAEA,QAAMW,WAAW,GAAGnB,OAAO,CAACO,EAAR,CAAW,CAAX,CAApB;AACAX,EAAAA,CAAC,CAACU,IAAF,CAAOa,WAAW,CAACX,MAAZ,EAAP;AACAZ,EAAAA,CAAC,CAACiB,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;AACAX,EAAAA,CAAC,CAACU,IAAF,CAAOe,wBAAwB,CAACb,MAAzB,EAAP;AACAZ,EAAAA,CAAC,CAACiB,SAAF,CAAYQ,wBAAwB,CAACtB,KAAzB,GAAiCe,KAA7C,EAAoD;AAACG,IAAAA,eAAe,EAAE;AAAlB,GAApD;AACD,CArBD","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"}

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

@@ -23,6 +23,8 @@ function _interopRequireDefault(obj) { return obj && obj.__esModule ? obj : { de
 
 function _extends() { _extends = Object.assign || function (target) { for (var i = 1; i < arguments.length; i++) { var source = arguments[i]; for (var key in source) { if (Object.prototype.hasOwnProperty.call(source, key)) { target[key] = source[key]; } } } return target; }; return _extends.apply(this, arguments); }
 
+function _objectWithoutPropertiesLoose(source, excluded) { if (source == null) return {}; var target = {}; var sourceKeys = Object.keys(source); var key, i; for (i = 0; i < sourceKeys.length; i++) { key = sourceKeys[i]; if (excluded.indexOf(key) >= 0) continue; target[key] = source[key]; } return target; }
+
 const Template = ({
   template,
   answers
@@ -49,10 +51,16 @@ const Template = ({
         name: part.value
       }, answers);
       if (!field) return null;
-      const fieldView = field.type === 'text' ? /*#__PURE__*/_react.default.createElement(_freeText.default, _extends({}, field, {
+
+      const {
+        type: fieldType
+      } = field,
+            fieldProps = _objectWithoutPropertiesLoose(field, ["type"]);
+
+      const fieldView = fieldType === 'text' ? /*#__PURE__*/_react.default.createElement(_freeText.default, _extends({}, fieldProps, {
         className: _style.default.text
-      })) : /*#__PURE__*/_react.default.createElement(_dropDown.default, _extends({}, field, {
-        theme: "template"
+      })) : /*#__PURE__*/_react.default.createElement(_dropDown.default, _extends({}, fieldProps, {
+        theme: "player"
       }));
       return /*#__PURE__*/_react.default.createElement("div", {
         className: _style.default.answerType,
@@ -68,16 +76,11 @@ const Template = ({
 };
 
 const TextPropTypes = process.env.NODE_ENV !== "production" ? _extends(_extends({}, _dropDown.default.propTypes), {}, {
-  type: _propTypes.default.string,
-  name: _propTypes.default.string
-}) : {};
-const DropDownPropTypes = process.env.NODE_ENV !== "production" ? _extends(_extends({}, _dropDown.default.propTypes), {}, {
-  type: _propTypes.default.string,
-  name: _propTypes.default.string
+  type: _propTypes.default.string
 }) : {};
 Template.propTypes = process.env.NODE_ENV !== "production" ? {
   template: _propTypes.default.string,
-  answers: _propTypes.default.arrayOf(_propTypes.default.oneOfType([_propTypes.default.shape(DropDownPropTypes), _propTypes.default.shape(TextPropTypes)]))
+  answers: _propTypes.default.arrayOf(_propTypes.default.oneOfType([_propTypes.default.shape(_dropDown.default.propTypes), _propTypes.default.shape(TextPropTypes)]))
 } : {};
 var _default = Template;
 exports.default = _default;

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

@@ -1 +1 @@
-{"version":3,"sources":["../../../../src/molecule/questions/template/index.js"],"names":["Template","template","answers","totalTemplate","templateCompose","convert","cap","part","key","type","__html","value","field","name","fieldView","style","text","answerType","wrapper","TextPropTypes","DropDown","propTypes","PropTypes","string","DropDownPropTypes","arrayOf","oneOfType","shape"],"mappings":";;;;;;;;;AAAA;;AACA;;AAEA;;AACA;;AACA;;AACA;;;;;;AAEA,MAAMA,QAAQ,GAAG,CAAC;AAACC,EAAAA,QAAD;AAAWC,EAAAA;AAAX,CAAD,KAAyB;AACxC,QAAMC,aAAa,GAAG,kCAAoBF,QAApB,CAAtB;;AACA,QAAMG,eAAe,GAAG,cAAIC,OAAJ,CAAY;AAACC,IAAAA,GAAG,EAAE;AAAN,GAAZ,EAA0B,CAACC,IAAD,EAAOC,GAAP,KAAe;AAC/D,UAAMC,IAAI,GAAGF,IAAI,CAACE,IAAlB;;AACA,QAAIA,IAAI,KAAK,QAAb,EAAuB;AACrB,0BACE;AACE,QAAA,GAAG,EAAED,GADP,CAEE;AAFF;AAGE,QAAA,uBAAuB,EAAE;AAACE,UAAAA,MAAM,EAAEH,IAAI,CAACI;AAAd;AAH3B,QADF;AAOD;;AACD,QAAIF,IAAI,KAAK,aAAb,EAA4B;AAC1B,YAAMG,KAAK,GAAG,oBAAK;AAACC,QAAAA,IAAI,EAAEN,IAAI,CAACI;AAAZ,OAAL,EAAyBT,OAAzB,CAAd;AACA,UAAI,CAACU,KAAL,EAAY,OAAO,IAAP;AACZ,YAAME,SAAS,GACbF,KAAK,CAACH,IAAN,KAAe,MAAf,gBACE,6BAAC,iBAAD,eAAcG,KAAd;AAAqB,QAAA,SAAS,EAAEG,eAAMC;AAAtC,SADF,gBAGE,6BAAC,iBAAD,eAAcJ,KAAd;AAAqB,QAAA,KAAK,EAAC;AAA3B,SAJJ;AAOA,0BACE;AAAK,QAAA,SAAS,EAAEG,eAAME,UAAtB;AAAkC,QAAA,GAAG,EAAEV,IAAI,CAACI;AAA5C,SACGG,SADH,CADF;AAKD;AACF,GA3BuB,EA2BrBX,aA3BqB,CAAxB;;AA6BA,sBACE;AAAK,iBAAU,kBAAf;AAAkC,IAAA,SAAS,EAAEY,eAAMG;AAAnD,KACGd,eADH,CADF;AAKD,CApCD;;AAsCA,MAAMe,aAAN,iEACKC,kBAASC,SADd;AAEEZ,EAAAA,IAAI,EAAEa,mBAAUC,MAFlB;AAGEV,EAAAA,IAAI,EAAES,mBAAUC;AAHlB;AAMA,MAAMC,iBAAN,iEACKJ,kBAASC,SADd;AAEEZ,EAAAA,IAAI,EAAEa,mBAAUC,MAFlB;AAGEV,EAAAA,IAAI,EAAES,mBAAUC;AAHlB;AAMAvB,QAAQ,CAACqB,SAAT,2CAAqB;AACnBpB,EAAAA,QAAQ,EAAEqB,mBAAUC,MADD;AAEnBrB,EAAAA,OAAO,EAAEoB,mBAAUG,OAAV,CACPH,mBAAUI,SAAV,CAAoB,CAACJ,mBAAUK,KAAV,CAAgBH,iBAAhB,CAAD,EAAqCF,mBAAUK,KAAV,CAAgBR,aAAhB,CAArC,CAApB,CADO;AAFU,CAArB;eAOenB,Q","sourcesContent":["import React from 'react';\nimport PropTypes from 'prop-types';\nimport {map, find} from 'lodash/fp';\nimport parseTemplateString from '../../../util/parse-template-string';\nimport DropDown from '../drop-down';\nimport FreeText from '../free-text';\nimport style from './style.css';\n\nconst Template = ({template, answers}) => {\n  const totalTemplate = parseTemplateString(template);\n  const templateCompose = map.convert({cap: false})((part, key) => {\n    const type = part.type;\n    if (type === 'string') {\n      return (\n        <span\n          key={key}\n          // eslint-disable-next-line react/no-danger\n          dangerouslySetInnerHTML={{__html: part.value}}\n        />\n      );\n    }\n    if (type === 'answerField') {\n      const field = find({name: part.value}, answers);\n      if (!field) return null;\n      const fieldView =\n        field.type === 'text' ? (\n          <FreeText {...field} className={style.text} />\n        ) : (\n          <DropDown {...field} theme=\"template\" />\n        );\n\n      return (\n        <div className={style.answerType} key={part.value}>\n          {fieldView}\n        </div>\n      );\n    }\n  }, totalTemplate);\n\n  return (\n    <div data-name=\"template-wrapper\" className={style.wrapper}>\n      {templateCompose}\n    </div>\n  );\n};\n\nconst TextPropTypes = {\n  ...DropDown.propTypes,\n  type: PropTypes.string,\n  name: PropTypes.string\n};\n\nconst DropDownPropTypes = {\n  ...DropDown.propTypes,\n  type: PropTypes.string,\n  name: PropTypes.string\n};\n\nTemplate.propTypes = {\n  template: PropTypes.string,\n  answers: PropTypes.arrayOf(\n    PropTypes.oneOfType([PropTypes.shape(DropDownPropTypes), PropTypes.shape(TextPropTypes)])\n  )\n};\n\nexport default Template;\n"],"file":"index.js"}
+{"version":3,"sources":["../../../../src/molecule/questions/template/index.js"],"names":["Template","template","answers","totalTemplate","templateCompose","convert","cap","part","key","type","__html","value","field","name","fieldType","fieldProps","fieldView","style","text","answerType","wrapper","TextPropTypes","DropDown","propTypes","PropTypes","string","arrayOf","oneOfType","shape"],"mappings":";;;;;;;;;AAAA;;AACA;;AAEA;;AACA;;AACA;;AACA;;;;;;;;AAEA,MAAMA,QAAQ,GAAG,CAAC;AAACC,EAAAA,QAAD;AAAWC,EAAAA;AAAX,CAAD,KAAyB;AACxC,QAAMC,aAAa,GAAG,kCAAoBF,QAApB,CAAtB;;AACA,QAAMG,eAAe,GAAG,cAAIC,OAAJ,CAAY;AAACC,IAAAA,GAAG,EAAE;AAAN,GAAZ,EAA0B,CAACC,IAAD,EAAOC,GAAP,KAAe;AAC/D,UAAMC,IAAI,GAAGF,IAAI,CAACE,IAAlB;;AACA,QAAIA,IAAI,KAAK,QAAb,EAAuB;AACrB,0BACE;AACE,QAAA,GAAG,EAAED,GADP,CAEE;AAFF;AAGE,QAAA,uBAAuB,EAAE;AAACE,UAAAA,MAAM,EAAEH,IAAI,CAACI;AAAd;AAH3B,QADF;AAOD;;AACD,QAAIF,IAAI,KAAK,aAAb,EAA4B;AAC1B,YAAMG,KAAK,GAAG,oBAAK;AAACC,QAAAA,IAAI,EAAEN,IAAI,CAACI;AAAZ,OAAL,EAAyBT,OAAzB,CAAd;AACA,UAAI,CAACU,KAAL,EAAY,OAAO,IAAP;;AACZ,YAAM;AAACH,QAAAA,IAAI,EAAEK;AAAP,UAAmCF,KAAzC;AAAA,YAA2BG,UAA3B,iCAAyCH,KAAzC;;AACA,YAAMI,SAAS,GACbF,SAAS,KAAK,MAAd,gBACE,6BAAC,iBAAD,eAAcC,UAAd;AAA0B,QAAA,SAAS,EAAEE,eAAMC;AAA3C,SADF,gBAGE,6BAAC,iBAAD,eAAcH,UAAd;AAA0B,QAAA,KAAK,EAAC;AAAhC,SAJJ;AAOA,0BACE;AAAK,QAAA,SAAS,EAAEE,eAAME,UAAtB;AAAkC,QAAA,GAAG,EAAEZ,IAAI,CAACI;AAA5C,SACGK,SADH,CADF;AAKD;AACF,GA5BuB,EA4BrBb,aA5BqB,CAAxB;;AA8BA,sBACE;AAAK,iBAAU,kBAAf;AAAkC,IAAA,SAAS,EAAEc,eAAMG;AAAnD,KACGhB,eADH,CADF;AAKD,CArCD;;AAuCA,MAAMiB,aAAN,iEACKC,kBAASC,SADd;AAEEd,EAAAA,IAAI,EAAEe,mBAAUC;AAFlB;AAKAzB,QAAQ,CAACuB,SAAT,2CAAqB;AACnBtB,EAAAA,QAAQ,EAAEuB,mBAAUC,MADD;AAEnBvB,EAAAA,OAAO,EAAEsB,mBAAUE,OAAV,CACPF,mBAAUG,SAAV,CAAoB,CAACH,mBAAUI,KAAV,CAAgBN,kBAASC,SAAzB,CAAD,EAAsCC,mBAAUI,KAAV,CAAgBP,aAAhB,CAAtC,CAApB,CADO;AAFU,CAArB;eAOerB,Q","sourcesContent":["import React from 'react';\nimport PropTypes from 'prop-types';\nimport {map, find} from 'lodash/fp';\nimport parseTemplateString from '../../../util/parse-template-string';\nimport DropDown from '../drop-down';\nimport FreeText from '../free-text';\nimport style from './style.css';\n\nconst Template = ({template, answers}) => {\n  const totalTemplate = parseTemplateString(template);\n  const templateCompose = map.convert({cap: false})((part, key) => {\n    const type = part.type;\n    if (type === 'string') {\n      return (\n        <span\n          key={key}\n          // eslint-disable-next-line react/no-danger\n          dangerouslySetInnerHTML={{__html: part.value}}\n        />\n      );\n    }\n    if (type === 'answerField') {\n      const field = find({name: part.value}, answers);\n      if (!field) return null;\n      const {type: fieldType, ...fieldProps} = field;\n      const fieldView =\n        fieldType === 'text' ? (\n          <FreeText {...fieldProps} className={style.text} />\n        ) : (\n          <DropDown {...fieldProps} theme=\"player\" />\n        );\n\n      return (\n        <div className={style.answerType} key={part.value}>\n          {fieldView}\n        </div>\n      );\n    }\n  }, totalTemplate);\n\n  return (\n    <div data-name=\"template-wrapper\" className={style.wrapper}>\n      {templateCompose}\n    </div>\n  );\n};\n\nconst TextPropTypes = {\n  ...DropDown.propTypes,\n  type: PropTypes.string\n};\n\nTemplate.propTypes = {\n  template: PropTypes.string,\n  answers: PropTypes.arrayOf(\n    PropTypes.oneOfType([PropTypes.shape(DropDown.propTypes), PropTypes.shape(TextPropTypes)])\n  )\n};\n\nexport default Template;\n"],"file":"index.js"}

package/lib/molecule/setup-section/style.css

@@ -14,6 +14,7 @@
   justify-content: space-between;
   padding: 0 24px 0 48px;
   box-sizing: border-box;
+  border-radius: 7px;
 }
 
 .title {