@coorpacademy/components 10.5.3 → 10.5.7-alpha.3

package/lib/molecule/draggable-list/index.js

@@ -0,0 +1,73 @@
+"use strict";
+
+exports.__esModule = true;
+exports.default = void 0;
+
+var _react = _interopRequireWildcard(require("react"));
+
+var _propTypes = _interopRequireDefault(require("prop-types"));
+
+var _draggable = _interopRequireDefault(require("../draggable"));
+
+var _setupSection = _interopRequireDefault(require("../setup-section"));
+
+var _courseSection = _interopRequireDefault(require("../course-section"));
+
+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 ITEMS = {
+  'setup-section': _setupSection.default,
+  'course-section': _courseSection.default
+};
+
+const DraggableList = ({
+  items,
+  onDrop,
+  itemType
+}) => {
+  const [dragTo, setDragTo] = (0, _react.useState)(null);
+  const [dragFrom, setDragFrom] = (0, _react.useState)(null);
+  const dragStartHandler = (0, _react.useCallback)(id => {
+    setDragFrom(id);
+  }, [setDragFrom]);
+  const dragOverHandler = (0, _react.useCallback)(id => {
+    if (dragTo === id) return;
+    setDragTo(id);
+  }, [dragTo, setDragTo]);
+  const dragLeaveHandler = (0, _react.useCallback)(id => {
+    setDragTo(null);
+  }, [setDragTo]);
+  const dropHandler = (0, _react.useCallback)(id => {
+    if (onDrop && dragFrom) onDrop(dragFrom, id);
+    setDragTo(null);
+    setDragFrom(null);
+  }, [onDrop, setDragTo, setDragFrom, dragFrom]);
+  const Item = ITEMS[itemType];
+  const itemsView = items.map(item => /*#__PURE__*/_react.default.createElement(_draggable.default, {
+    key: item.id,
+    id: item.id,
+    dragging: dragTo === item.id,
+    onDragStart: dragStartHandler,
+    onDragOver: dragOverHandler,
+    onDragLeave: dragLeaveHandler,
+    onDrop: dropHandler
+  }, /*#__PURE__*/_react.default.createElement(Item, _extends({}, item, {
+    key: item.id
+  }))));
+  return /*#__PURE__*/_react.default.createElement("div", null, itemsView);
+};
+
+DraggableList.propTypes = process.env.NODE_ENV !== "production" ? {
+  items: _propTypes.default.arrayOf(_propTypes.default.shape(_setupSection.default.propTypes)),
+  onDrop: _propTypes.default.func,
+  itemType: _propTypes.default.string
+} : {};
+var _default = DraggableList;
+exports.default = _default;
+//# sourceMappingURL=index.js.map

package/lib/molecule/draggable-list/index.js.map

@@ -0,0 +1 @@
+{"version":3,"sources":["../../../src/molecule/draggable-list/index.js"],"names":["ITEMS","SetupSection","CourseSection","DraggableList","items","onDrop","itemType","dragTo","setDragTo","dragFrom","setDragFrom","dragStartHandler","id","dragOverHandler","dragLeaveHandler","dropHandler","Item","itemsView","map","item","propTypes","PropTypes","arrayOf","shape","func","string"],"mappings":";;;;;AAAA;;AACA;;AACA;;AACA;;AACA;;;;;;;;;;AAEA,MAAMA,KAAK,GAAG;AAAC,mBAAiBC,qBAAlB;AAAgC,oBAAkBC;AAAlD,CAAd;;AAEA,MAAMC,aAAa,GAAG,CAAC;AAACC,EAAAA,KAAD;AAAQC,EAAAA,MAAR;AAAgBC,EAAAA;AAAhB,CAAD,KAA+B;AACnD,QAAM,CAACC,MAAD,EAASC,SAAT,IAAsB,qBAAS,IAAT,CAA5B;AACA,QAAM,CAACC,QAAD,EAAWC,WAAX,IAA0B,qBAAS,IAAT,CAAhC;AAEA,QAAMC,gBAAgB,GAAG,wBACvBC,EAAE,IAAI;AACJF,IAAAA,WAAW,CAACE,EAAD,CAAX;AACD,GAHsB,EAIvB,CAACF,WAAD,CAJuB,CAAzB;AAOA,QAAMG,eAAe,GAAG,wBACtBD,EAAE,IAAI;AACJ,QAAIL,MAAM,KAAKK,EAAf,EAAmB;AACnBJ,IAAAA,SAAS,CAACI,EAAD,CAAT;AACD,GAJqB,EAKtB,CAACL,MAAD,EAASC,SAAT,CALsB,CAAxB;AAQA,QAAMM,gBAAgB,GAAG,wBACvBF,EAAE,IAAI;AACJJ,IAAAA,SAAS,CAAC,IAAD,CAAT;AACD,GAHsB,EAIvB,CAACA,SAAD,CAJuB,CAAzB;AAOA,QAAMO,WAAW,GAAG,wBAClBH,EAAE,IAAI;AACJ,QAAIP,MAAM,IAAII,QAAd,EAAwBJ,MAAM,CAACI,QAAD,EAAWG,EAAX,CAAN;AAExBJ,IAAAA,SAAS,CAAC,IAAD,CAAT;AACAE,IAAAA,WAAW,CAAC,IAAD,CAAX;AACD,GANiB,EAOlB,CAACL,MAAD,EAASG,SAAT,EAAoBE,WAApB,EAAiCD,QAAjC,CAPkB,CAApB;AAUA,QAAMO,IAAI,GAAGhB,KAAK,CAACM,QAAD,CAAlB;AACA,QAAMW,SAAS,GAAGb,KAAK,CAACc,GAAN,CAAUC,IAAI,iBAC9B,6BAAC,kBAAD;AACE,IAAA,GAAG,EAAEA,IAAI,CAACP,EADZ;AAEE,IAAA,EAAE,EAAEO,IAAI,CAACP,EAFX;AAGE,IAAA,QAAQ,EAAEL,MAAM,KAAKY,IAAI,CAACP,EAH5B;AAIE,IAAA,WAAW,EAAED,gBAJf;AAKE,IAAA,UAAU,EAAEE,eALd;AAME,IAAA,WAAW,EAAEC,gBANf;AAOE,IAAA,MAAM,EAAEC;AAPV,kBASE,6BAAC,IAAD,eAAUI,IAAV;AAAgB,IAAA,GAAG,EAAEA,IAAI,CAACP;AAA1B,KATF,CADgB,CAAlB;AAaA,sBAAO,0CAAMK,SAAN,CAAP;AACD,CAnDD;;AAqDAd,aAAa,CAACiB,SAAd,2CAA0B;AACxBhB,EAAAA,KAAK,EAAEiB,mBAAUC,OAAV,CAAkBD,mBAAUE,KAAV,CAAgBtB,sBAAamB,SAA7B,CAAlB,CADiB;AAExBf,EAAAA,MAAM,EAAEgB,mBAAUG,IAFM;AAGxBlB,EAAAA,QAAQ,EAAEe,mBAAUI;AAHI,CAA1B;eAMetB,a","sourcesContent":["import React, {useState, useCallback} from 'react';\nimport PropTypes from 'prop-types';\nimport Draggable from '../draggable';\nimport SetupSection from '../setup-section';\nimport CourseSection from '../course-section';\n\nconst ITEMS = {'setup-section': SetupSection, 'course-section': CourseSection};\n\nconst DraggableList = ({items, onDrop, itemType}) => {\n  const [dragTo, setDragTo] = useState(null);\n  const [dragFrom, setDragFrom] = useState(null);\n\n  const dragStartHandler = useCallback(\n    id => {\n      setDragFrom(id);\n    },\n    [setDragFrom]\n  );\n\n  const dragOverHandler = useCallback(\n    id => {\n      if (dragTo === id) return;\n      setDragTo(id);\n    },\n    [dragTo, setDragTo]\n  );\n\n  const dragLeaveHandler = useCallback(\n    id => {\n      setDragTo(null);\n    },\n    [setDragTo]\n  );\n\n  const dropHandler = useCallback(\n    id => {\n      if (onDrop && dragFrom) onDrop(dragFrom, id);\n\n      setDragTo(null);\n      setDragFrom(null);\n    },\n    [onDrop, setDragTo, setDragFrom, dragFrom]\n  );\n\n  const Item = ITEMS[itemType];\n  const itemsView = items.map(item => (\n    <Draggable\n      key={item.id}\n      id={item.id}\n      dragging={dragTo === item.id}\n      onDragStart={dragStartHandler}\n      onDragOver={dragOverHandler}\n      onDragLeave={dragLeaveHandler}\n      onDrop={dropHandler}\n    >\n      <Item {...item} key={item.id} />\n    </Draggable>\n  ));\n  return <div>{itemsView}</div>;\n};\n\nDraggableList.propTypes = {\n  items: PropTypes.arrayOf(PropTypes.shape(SetupSection.propTypes)),\n  onDrop: PropTypes.func,\n  itemType: PropTypes.string\n};\n\nexport default DraggableList;\n"],"file":"index.js"}

package/lib/molecule/draggable-list/test/fixtures/course-sections.js

@@ -0,0 +1,29 @@
+"use strict";
+
+exports.__esModule = true;
+exports.default = void 0;
+
+var _default2 = _interopRequireDefault(require("../../../course-sections/test/fixtures/default"));
+
+function _interopRequireDefault(obj) { return obj && obj.__esModule ? obj : { default: obj }; }
+
+const {
+  props: {
+    sections
+  }
+} = _default2.default;
+var _default = {
+  props: {
+    itemType: 'course-section',
+    items: sections,
+    onDrop: (dragged, dropped) => {
+      console.log('foo');
+      console.log({
+        dragged,
+        dropped
+      });
+    }
+  }
+};
+exports.default = _default;
+//# sourceMappingURL=course-sections.js.map

package/lib/molecule/draggable-list/test/fixtures/course-sections.js.map

@@ -0,0 +1 @@
+{"version":3,"sources":["../../../../../src/molecule/draggable-list/test/fixtures/course-sections.js"],"names":["props","sections","courseSections","itemType","items","onDrop","dragged","dropped","console","log"],"mappings":";;;;;AAAA;;;;AAEA,MAAM;AACJA,EAAAA,KAAK,EAAE;AAACC,IAAAA;AAAD;AADH,IAEFC,iBAFJ;eAIe;AACbF,EAAAA,KAAK,EAAE;AACLG,IAAAA,QAAQ,EAAE,gBADL;AAELC,IAAAA,KAAK,EAAEH,QAFF;AAGLI,IAAAA,MAAM,EAAE,CAACC,OAAD,EAAUC,OAAV,KAAsB;AAC5BC,MAAAA,OAAO,CAACC,GAAR,CAAY,KAAZ;AACAD,MAAAA,OAAO,CAACC,GAAR,CAAY;AAACH,QAAAA,OAAD;AAAUC,QAAAA;AAAV,OAAZ;AACD;AANI;AADM,C","sourcesContent":["import courseSections from '../../../course-sections/test/fixtures/default';\n\nconst {\n  props: {sections}\n} = courseSections;\n\nexport default {\n  props: {\n    itemType: 'course-section',\n    items: sections,\n    onDrop: (dragged, dropped) => {\n      console.log('foo');\n      console.log({dragged, dropped});\n    }\n  }\n};\n"],"file":"course-sections.js"}

package/lib/molecule/draggable-list/test/fixtures/dashboard-sections.js

@@ -0,0 +1,37 @@
+"use strict";
+
+exports.__esModule = true;
+exports.default = void 0;
+
+var _analyticsBoutique = _interopRequireDefault(require("../../../setup-section/test/fixtures/analytics-boutique"));
+
+var _analyticsBranch = _interopRequireDefault(require("../../../setup-section/test/fixtures/analytics-branch"));
+
+var _analyticsRegion = _interopRequireDefault(require("../../../setup-section/test/fixtures/analytics-region"));
+
+function _interopRequireDefault(obj) { return obj && obj.__esModule ? obj : { default: obj }; }
+
+const {
+  props: boutique
+} = _analyticsBoutique.default;
+const {
+  props: branch
+} = _analyticsBranch.default;
+const {
+  props: region
+} = _analyticsRegion.default;
+var _default = {
+  props: {
+    itemType: 'setup-section',
+    items: [boutique, branch, region],
+    onDrop: (dragged, dropped) => {
+      console.log('foo');
+      console.log({
+        dragged,
+        dropped
+      });
+    }
+  }
+};
+exports.default = _default;
+//# sourceMappingURL=dashboard-sections.js.map

package/lib/molecule/draggable-list/test/fixtures/dashboard-sections.js.map

@@ -0,0 +1 @@
+{"version":3,"sources":["../../../../../src/molecule/draggable-list/test/fixtures/dashboard-sections.js"],"names":["props","boutique","Boutique","branch","Branch","region","Region","itemType","items","onDrop","dragged","dropped","console","log"],"mappings":";;;;;AAAA;;AACA;;AACA;;;;AAEA,MAAM;AAACA,EAAAA,KAAK,EAAEC;AAAR,IAAoBC,0BAA1B;AACA,MAAM;AAACF,EAAAA,KAAK,EAAEG;AAAR,IAAkBC,wBAAxB;AACA,MAAM;AAACJ,EAAAA,KAAK,EAAEK;AAAR,IAAkBC,wBAAxB;eAEe;AACbN,EAAAA,KAAK,EAAE;AACLO,IAAAA,QAAQ,EAAE,eADL;AAELC,IAAAA,KAAK,EAAE,CAACP,QAAD,EAAWE,MAAX,EAAmBE,MAAnB,CAFF;AAGLI,IAAAA,MAAM,EAAE,CAACC,OAAD,EAAUC,OAAV,KAAsB;AAC5BC,MAAAA,OAAO,CAACC,GAAR,CAAY,KAAZ;AACAD,MAAAA,OAAO,CAACC,GAAR,CAAY;AAACH,QAAAA,OAAD;AAAUC,QAAAA;AAAV,OAAZ;AACD;AANI;AADM,C","sourcesContent":["import Boutique from '../../../setup-section/test/fixtures/analytics-boutique';\nimport Branch from '../../../setup-section/test/fixtures/analytics-branch';\nimport Region from '../../../setup-section/test/fixtures/analytics-region';\n\nconst {props: boutique} = Boutique;\nconst {props: branch} = Branch;\nconst {props: region} = Region;\n\nexport default {\n  props: {\n    itemType: 'setup-section',\n    items: [boutique, branch, region],\n    onDrop: (dragged, dropped) => {\n      console.log('foo');\n      console.log({dragged, dropped});\n    }\n  }\n};\n"],"file":"dashboard-sections.js"}

package/lib/molecule/draggable-list/test/fixtures.js

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

package/lib/molecule/draggable-list/test/fixtures.js.map

@@ -0,0 +1 @@
+{"version":3,"sources":["../../../../src/molecule/draggable-list/test/fixtures.js"],"names":["t","pass","MoleculeDraggableList","propTypes","value","key","not","undefined","renderComponentMacro","fixtureDashboardSections"],"mappings":";;AAAA;;AACA;;AACA;;AACA;;AACA;;;;AAEA,kBAAK,gEAAL,EAAuEA,CAAC,IAAI;AAC1EA,EAAAA,CAAC,CAACC,IAAF;AACA,wBAAQC,UAAsBC,SAA9B,EAAyC,CAACC,KAAD,EAAQC,GAAR,KAAgB;AACvDL,IAAAA,CAAC,CAACM,GAAF,CAAMF,KAAN,EAAaG,SAAb,EAAyB,0DAAyDF,GAAI,mEAAtF;AACD,GAFD;AAGD,CALD;AAOA,kBAAK,2EAAL,EAAkFG,wBAAlF,EAAwGN,SAAxG,EAA+HO,0BAA/H","sourcesContent":["import test from 'ava';\nimport forEach from 'lodash/forEach';\nimport renderComponentMacro from '../../../test/helpers/render-component';\nimport MoleculeDraggableList from '..';\nimport fixtureDashboardSections from './fixtures/dashboard-sections';\n\ntest('Molecule › MoleculeDraggableList > should have valid propTypes', t => {\n  t.pass();\n  forEach(MoleculeDraggableList.propTypes, (value, key) => {\n    t.not(value, undefined, `PropType for \"Molecule.MoleculeDraggableList.propTypes.${key}\" may not be undefined. Did you mistype the propTypes definition?`);\n  });\n});\n\ntest('Molecule › MoleculeDraggableList › DashboardSections › should be rendered', renderComponentMacro, MoleculeDraggableList, fixtureDashboardSections);\n"],"file":"fixtures.js"}

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

@@ -18,7 +18,7 @@ var _ = _interopRequireDefault(require(".."));
 
 var _style = _interopRequireDefault(require("../../draggable/style.css"));
 
-var _default = _interopRequireDefault(require("./fixtures/default"));
+var _dashboardSections = _interopRequireDefault(require("./fixtures/dashboard-sections"));
 
 function _interopRequireDefault(obj) { return obj && obj.__esModule ? obj : { default: obj }; }
 
@@ -30,15 +30,15 @@ function _extends() { _extends = Object.assign || function (target) { for (var i
 });
 (0, _ava.default)('should trigger onDrop handler', t => {
   t.plan(7);
-  const elementToDrag = _default.default.props.sections[0].id;
-  const elementToDrop = _default.default.props.sections[2].id;
+  const elementToDrag = _dashboardSections.default.props.items[0].id;
+  const elementToDrop = _dashboardSections.default.props.items[2].id;
 
   const dropHandler = (dragged, dropped) => {
     t.is(dropped, elementToDrop);
     t.is(dragged, elementToDrag);
   };
 
-  const wrapper = (0, _enzyme.mount)( /*#__PURE__*/_react.default.createElement(_.default, _extends({}, _default.default.props, {
+  const wrapper = (0, _enzyme.mount)( /*#__PURE__*/_react.default.createElement(_.default, _extends({}, _dashboardSections.default.props, {
     onDrop: dropHandler
   })), {
     wrappingComponent: _renderComponent.wrappingComponent
@@ -55,12 +55,12 @@ function _extends() { _extends = Object.assign || function (target) { for (var i
   const dropEvent = {
     preventDefault: () => t.pass()
   };
-  wrapper.find(`.${_style.default.section}`).at(0).simulate('dragStart', dragStartEvent);
-  wrapper.find(`.${_style.default.section}`).at(0).simulate('dragOver', dragOverEvent);
-  wrapper.find(`.${_style.default.section}`).at(0).simulate('dragOver', dragOverEvent);
-  wrapper.find(`.${_style.default.section}`).at(0).simulate('dragLeave', dragLeaveEvent);
-  wrapper.find(`.${_style.default.section}`).at(2).simulate('dragOver', dragOverEvent);
-  wrapper.find(`.${_style.default.section}`).at(2).simulate('drop', dropEvent);
+  wrapper.find(`.${_style.default.draggable}`).at(0).simulate('dragStart', dragStartEvent);
+  wrapper.find(`.${_style.default.draggable}`).at(0).simulate('dragOver', dragOverEvent);
+  wrapper.find(`.${_style.default.draggable}`).at(0).simulate('dragOver', dragOverEvent);
+  wrapper.find(`.${_style.default.draggable}`).at(0).simulate('dragLeave', dragLeaveEvent);
+  wrapper.find(`.${_style.default.draggable}`).at(2).simulate('dragOver', dragOverEvent);
+  wrapper.find(`.${_style.default.draggable}`).at(2).simulate('drop', dropEvent);
 });
 (0, _ava.default)('should skip drop event if dragStart is not called', t => {
   t.plan(1);
@@ -69,7 +69,7 @@ function _extends() { _extends = Object.assign || function (target) { for (var i
     t.fail();
   };
 
-  const wrapper = (0, _enzyme.mount)( /*#__PURE__*/_react.default.createElement(_.default, _extends({}, _default.default.props, {
+  const wrapper = (0, _enzyme.mount)( /*#__PURE__*/_react.default.createElement(_.default, _extends({}, _dashboardSections.default.props, {
     onDrop: dropHandler
   })), {
     wrappingComponent: _renderComponent.wrappingComponent
@@ -77,7 +77,7 @@ function _extends() { _extends = Object.assign || function (target) { for (var i
   const dropEvent = {
     preventDefault: () => t.pass()
   };
-  wrapper.find(`.${_style.default.section}`).at(2).simulate('drop', dropEvent);
+  wrapper.find(`.${_style.default.draggable}`).at(2).simulate('drop', dropEvent);
 });
 (0, _ava.default)('should skip dragStart event if section id is not defined', t => {
   t.plan(0);
@@ -86,7 +86,7 @@ function _extends() { _extends = Object.assign || function (target) { for (var i
     t.fail();
   };
 
-  const wrapper = (0, _enzyme.mount)( /*#__PURE__*/_react.default.createElement(_.default, _extends({}, (0, _set2.default)('sections.0.id', '', _default.default.props), {
+  const wrapper = (0, _enzyme.mount)( /*#__PURE__*/_react.default.createElement(_.default, _extends({}, (0, _set2.default)('items.0.id', '', _dashboardSections.default.props), {
     onDrop: dropHandler
   })), {
     wrappingComponent: _renderComponent.wrappingComponent
@@ -103,11 +103,11 @@ function _extends() { _extends = Object.assign || function (target) { for (var i
   const dropEvent = {
     preventDefault: () => {}
   };
-  wrapper.find(`.${_style.default.section}`).at(0).simulate('dragStart', dragStartEvent);
-  wrapper.find(`.${_style.default.section}`).at(0).simulate('dragOver', dragOverEvent);
-  wrapper.find(`.${_style.default.section}`).at(0).simulate('dragOver', dragOverEvent);
-  wrapper.find(`.${_style.default.section}`).at(0).simulate('dragLeave', dragLeaveEvent);
-  wrapper.find(`.${_style.default.section}`).at(2).simulate('dragOver', dragOverEvent);
-  wrapper.find(`.${_style.default.section}`).at(2).simulate('drop', dropEvent);
+  wrapper.find(`.${_style.default.draggable}`).at(0).simulate('dragStart', dragStartEvent);
+  wrapper.find(`.${_style.default.draggable}`).at(0).simulate('dragOver', dragOverEvent);
+  wrapper.find(`.${_style.default.draggable}`).at(0).simulate('dragOver', dragOverEvent);
+  wrapper.find(`.${_style.default.draggable}`).at(0).simulate('dragLeave', dragLeaveEvent);
+  wrapper.find(`.${_style.default.draggable}`).at(2).simulate('dragOver', dragOverEvent);
+  wrapper.find(`.${_style.default.draggable}`).at(2).simulate('drop', dropEvent);
 });
 //# sourceMappingURL=on-drop.js.map

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

@@ -0,0 +1 @@
+{"version":3,"sources":["../../../../src/molecule/draggable-list/test/on-drop.js"],"names":["adapter","Adapter","t","plan","elementToDrag","fixtures","props","items","id","elementToDrop","dropHandler","dragged","dropped","is","wrapper","wrappingComponent","dragStartEvent","preventDefault","pass","dragOverEvent","dragLeaveEvent","dropEvent","find","style","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/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"}