@coorpacademy/components 10.5.6 → 10.5.7-alpha.3

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

@@ -2,9 +2,9 @@
 @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 +15,33 @@
 }
 
 .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;
+}
+
+.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 +50,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,18 +75,36 @@
 }
 
 .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 {
   composes: answer;
-  color: white;
+  color: cm_primary_blue;
+}
+
+.selected .background{
+  opacity: 0.05;
+}
+
+.selected:hover .background{
+  opacity: 0.1;
 }
 
 @media mobile {
   .wrapper {
     flex-direction: column;
-    align-items: stretch;
+    display: flex;
+    align-items: center;
     width: 100%;
     padding-bottom: 0;
   }
@@ -69,17 +113,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 +141,7 @@
     white-space: wrap;
     overflow: hidden;
     padding: 0;
-    text-align: left;
+    justify-content: left;
     font-size: 15px;
   }
 }

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

@@ -0,0 +1,65 @@
+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, configure } from 'enzyme';
+import Adapter from 'enzyme-adapter-react-16';
+import QCMImage from '..';
+import defaultFixture from './fixtures/default';
+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(QCMImage, defaultFixture.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();
+});
+test("should set: selected's background to Primary w/ alpha 5% && color to primary, unselected's no background && color to a nuance of primary", t => {
+  const wrapper = shallow( /*#__PURE__*/React.createElement(QCMImage, defaultFixture.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/es/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":["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,0IAAD,EAA6IS,CAAC,IAAI;AACpJ,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 w/ alpha 5% && color to primary, unselected's no background && color to a nuance of primary\", 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/util/get-shadow-box-color-from-primary.js

@@ -0,0 +1,4 @@
+import { convert } from 'css-color-function'; // darken the color down to 35% && apply alpha of 25%
+
+export const getShadowBoxColorFromPrimary = primaryColor => convert(`color(${primaryColor} lightness(35%) a(25%))`);
+//# sourceMappingURL=get-shadow-box-color-from-primary.js.map

package/es/util/get-shadow-box-color-from-primary.js.map

@@ -0,0 +1 @@
+{"version":3,"sources":["../../src/util/get-shadow-box-color-from-primary.js"],"names":["convert","getShadowBoxColorFromPrimary","primaryColor"],"mappings":"AAAA,SAAQA,OAAR,QAAsB,oBAAtB,C,CAEA;;AACA,OAAO,MAAMC,4BAA4B,GAAGC,YAAY,IACtDF,OAAO,CAAE,SAAQE,YAAa,yBAAvB,CADF","sourcesContent":["import {convert} from 'css-color-function';\n\n// darken the color down to 35% && apply alpha of 25%\nexport const getShadowBoxColorFromPrimary = primaryColor =>\n  convert(`color(${primaryColor} lightness(35%) a(25%))`);\n"],"file":"get-shadow-box-color-from-primary.js"}

package/es/util/test/get-shadow-box-color-from-primary.js

@@ -0,0 +1,33 @@
+import test from 'ava';
+import forEach from 'lodash/fp/forEach';
+import { getShadowBoxColorFromPrimary } from '../get-shadow-box-color-from-primary';
+test('should return transformed colors', t => {
+  t.plan(13);
+  const expectedOrange = 'rgba(179, 42, 0, 0.25)';
+  const expectedRed = 'rgba(179, 0, 0, 0.25)';
+  const expectedYellow = 'rgba(179, 140, 0, 0.25)';
+  const expectedBlue = 'rgba(0, 68, 179, 0.25)'; // a set of possible primary/brand colors
+
+  const primaryColors = {
+    orange: ['#ff6f43', expectedOrange],
+    // original, expected
+    orangeRGB: ['rgb(255, 111, 67)', expectedOrange],
+    orangeRGBA: ['rgba(255, 111, 67, 0)', expectedOrange],
+    red: ['#FF0A0A', expectedRed],
+    redRGB: ['rgb(255, 10, 10)', expectedRed],
+    redRGBA: ['rgba(255, 10, 10, 0)', expectedRed],
+    yellow: ['#ffca0a', expectedYellow],
+    yellowRGB: ['rgb(255, 202, 10)', expectedYellow],
+    yellowRGBA: ['rgba(255, 202, 10, 0)', expectedYellow],
+    blue: ['#0061FF', expectedBlue],
+    blueRGB: ['rgb(0, 97, 255)', expectedBlue],
+    blueRGBA: ['rgba(0, 97, 255, 1)', expectedBlue]
+  };
+  forEach(color => {
+    const [original, expected] = color;
+    const boxShadowColor = getShadowBoxColorFromPrimary(original);
+    t.is(boxShadowColor, expected);
+  }, primaryColors);
+  t.pass();
+});
+//# sourceMappingURL=get-shadow-box-color-from-primary.js.map

package/es/util/test/get-shadow-box-color-from-primary.js.map

@@ -0,0 +1 @@
+{"version":3,"sources":["../../../src/util/test/get-shadow-box-color-from-primary.js"],"names":["test","forEach","getShadowBoxColorFromPrimary","t","plan","expectedOrange","expectedRed","expectedYellow","expectedBlue","primaryColors","orange","orangeRGB","orangeRGBA","red","redRGB","redRGBA","yellow","yellowRGB","yellowRGBA","blue","blueRGB","blueRGBA","color","original","expected","boxShadowColor","is","pass"],"mappings":"AAAA,OAAOA,IAAP,MAAiB,KAAjB;AACA,OAAOC,OAAP,MAAoB,mBAApB;AAEA,SAAQC,4BAAR,QAA2C,sCAA3C;AAEAF,IAAI,CAAC,kCAAD,EAAqCG,CAAC,IAAI;AAC5CA,EAAAA,CAAC,CAACC,IAAF,CAAO,EAAP;AACA,QAAMC,cAAc,GAAG,wBAAvB;AACA,QAAMC,WAAW,GAAG,uBAApB;AACA,QAAMC,cAAc,GAAG,yBAAvB;AACA,QAAMC,YAAY,GAAG,wBAArB,CAL4C,CAM5C;;AACA,QAAMC,aAAa,GAAG;AACpBC,IAAAA,MAAM,EAAE,CAAC,SAAD,EAAYL,cAAZ,CADY;AACiB;AACrCM,IAAAA,SAAS,EAAE,CAAC,mBAAD,EAAsBN,cAAtB,CAFS;AAGpBO,IAAAA,UAAU,EAAE,CAAC,uBAAD,EAA0BP,cAA1B,CAHQ;AAIpBQ,IAAAA,GAAG,EAAE,CAAC,SAAD,EAAYP,WAAZ,CAJe;AAKpBQ,IAAAA,MAAM,EAAE,CAAC,kBAAD,EAAqBR,WAArB,CALY;AAMpBS,IAAAA,OAAO,EAAE,CAAC,sBAAD,EAAyBT,WAAzB,CANW;AAOpBU,IAAAA,MAAM,EAAE,CAAC,SAAD,EAAYT,cAAZ,CAPY;AAQpBU,IAAAA,SAAS,EAAE,CAAC,mBAAD,EAAsBV,cAAtB,CARS;AASpBW,IAAAA,UAAU,EAAE,CAAC,uBAAD,EAA0BX,cAA1B,CATQ;AAUpBY,IAAAA,IAAI,EAAE,CAAC,SAAD,EAAYX,YAAZ,CAVc;AAWpBY,IAAAA,OAAO,EAAE,CAAC,iBAAD,EAAoBZ,YAApB,CAXW;AAYpBa,IAAAA,QAAQ,EAAE,CAAC,qBAAD,EAAwBb,YAAxB;AAZU,GAAtB;AAeAP,EAAAA,OAAO,CAACqB,KAAK,IAAI;AACf,UAAM,CAACC,QAAD,EAAWC,QAAX,IAAuBF,KAA7B;AACA,UAAMG,cAAc,GAAGvB,4BAA4B,CAACqB,QAAD,CAAnD;AACApB,IAAAA,CAAC,CAACuB,EAAF,CAAKD,cAAL,EAAqBD,QAArB;AACD,GAJM,EAIJf,aAJI,CAAP;AAMAN,EAAAA,CAAC,CAACwB,IAAF;AACD,CA7BG,CAAJ","sourcesContent":["import test from 'ava';\nimport forEach from 'lodash/fp/forEach';\n\nimport {getShadowBoxColorFromPrimary} from '../get-shadow-box-color-from-primary';\n\ntest('should return transformed colors', t => {\n  t.plan(13);\n  const expectedOrange = 'rgba(179, 42, 0, 0.25)';\n  const expectedRed = 'rgba(179, 0, 0, 0.25)';\n  const expectedYellow = 'rgba(179, 140, 0, 0.25)';\n  const expectedBlue = 'rgba(0, 68, 179, 0.25)';\n  // a set of possible primary/brand colors\n  const primaryColors = {\n    orange: ['#ff6f43', expectedOrange], // original, expected\n    orangeRGB: ['rgb(255, 111, 67)', expectedOrange],\n    orangeRGBA: ['rgba(255, 111, 67, 0)', expectedOrange],\n    red: ['#FF0A0A', expectedRed],\n    redRGB: ['rgb(255, 10, 10)', expectedRed],\n    redRGBA: ['rgba(255, 10, 10, 0)', expectedRed],\n    yellow: ['#ffca0a', expectedYellow],\n    yellowRGB: ['rgb(255, 202, 10)', expectedYellow],\n    yellowRGBA: ['rgba(255, 202, 10, 0)', expectedYellow],\n    blue: ['#0061FF', expectedBlue],\n    blueRGB: ['rgb(0, 97, 255)', expectedBlue],\n    blueRGBA: ['rgba(0, 97, 255, 1)', expectedBlue]\n  };\n\n  forEach(color => {\n    const [original, expected] = color;\n    const boxShadowColor = getShadowBoxColorFromPrimary(original);\n    t.is(boxShadowColor, expected);\n  }, primaryColors);\n\n  t.pass();\n});\n"],"file":"get-shadow-box-color-from-primary.js"}

package/es/variables/colors.css

@@ -30,8 +30,10 @@
 @value cm_blue_50: #f1f6fe;
 @value cm_blue_200: #74A5F6;
 @value cm_blue_600: #0051d6;
+@value cm_blue_900: #06265B;
 @value cm_bleu_article: #365FCD;
 @value cm_grey_50: #FAFAFA;
+@value cm_grey_75: #F4F4F5;
 @value cm_grey_100: #EAEAEB;
 @value cm_grey_150: #E1E1E3;
 @value cm_grey_200: #d7d7da;
@@ -59,3 +61,4 @@
 @value cm_red_video: #E8335E;
 @value cm_violet_podcast: #432ba7;
 @value cm_warning_50: rgba(255, 192, 67, 0.13);
+@value box_shadow_light_dark: rgba(0, 0, 0, 0.12);

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

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

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

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

@@ -2,8 +2,8 @@
 @value mobile from breakpoints;
 @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 +18,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 +34,47 @@
   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;
 }
 
-.answer:hover {
-  background-color: light;
+.answerText {
+  position: relative;
+  color: cm_blue_900;
+}
+
+.selectedAnswer:hover .background{
+  opacity: 0.1;
+}
+
+.selectedAnswer .background{
+  opacity: 0.05;
+}
+.selectedAnswer,
+.unselectedAnswer {
+  position: relative;
 }
 
 .unselectedAnswer {
-  color: black;
+  box-shadow: 0px 4px 16px box_shadow_light_dark;
+}
+
+.unselectedAnswer .background {
+  opacity: 0;
 }
 
-.selectedAnswer {
-  color: white;
+.unselectedAnswer:hover .background{
+  opacity: 1;
+}
+
+.answer:last-child {
+  margin-bottom: 0;
 }
 
 @media mobile {
@@ -59,10 +87,6 @@
     width: 100%;
   }
 
-  .answer:hover {
-    background-color: white;
-  }
-
   .answer {
     padding: 8px 24px;
   }

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

@@ -6,34 +6,42 @@ var _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/lib/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":";;;;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,C","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":";;;;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,C","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"}