@coorpacademy/components 10.5.7-alpha.14 → 10.5.7-alpha.15.13

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

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

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

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

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

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

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

@@ -25,7 +25,8 @@ const Template = ({
 
     if (type === 'string') {
       return /*#__PURE__*/React.createElement("span", {
-        key: key // eslint-disable-next-line react/no-danger
+        key: key,
+        className: style.textPart // eslint-disable-next-line react/no-danger
         ,
         dangerouslySetInnerHTML: {
           __html: part.value

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

@@ -1 +1 @@
-{"version":3,"sources":["../../../../src/molecule/questions/template/index.js"],"names":["React","PropTypes","parseTemplateString","DropDown","FreeText","style","Template","template","answers","totalTemplate","templateCompose","convert","cap","part","key","type","__html","value","field","name","fieldType","fieldProps","fieldView","text","answerType","wrapper","TextPropTypes","propTypes","string","arrayOf","oneOfType","shape"],"mappings":";;;;;;;AAAA,OAAOA,KAAP,MAAkB,OAAlB;AACA,OAAOC,SAAP,MAAsB,YAAtB;AAEA,OAAOC,mBAAP,MAAgC,qCAAhC;AACA,OAAOC,QAAP,MAAqB,cAArB;AACA,OAAOC,QAAP,MAAqB,cAArB;AACA,OAAOC,KAAP,MAAkB,aAAlB;;AAEA,MAAMC,QAAQ,GAAG,CAAC;AAACC,EAAAA,QAAD;AAAWC,EAAAA;AAAX,CAAD,KAAyB;AACxC,QAAMC,aAAa,GAAGP,mBAAmB,CAACK,QAAD,CAAzC;;AACA,QAAMG,eAAe,GAAG,KAAIC,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,MAAK;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,oBAAC,QAAD,eAAcC,UAAd;AAA0B,QAAA,SAAS,EAAEhB,KAAK,CAACkB;AAA3C,SADF,gBAGE,oBAAC,QAAD,eAAcF,UAAd;AAA0B,QAAA,KAAK,EAAC;AAAhC,SAJJ;AAOA,0BACE;AAAK,QAAA,SAAS,EAAEhB,KAAK,CAACmB,UAAtB;AAAkC,QAAA,GAAG,EAAEX,IAAI,CAACI;AAA5C,SACGK,SADH,CADF;AAKD;AACF,GA5BuB,EA4BrBb,aA5BqB,CAAxB;;AA8BA,sBACE;AAAK,iBAAU,kBAAf;AAAkC,IAAA,SAAS,EAAEJ,KAAK,CAACoB;AAAnD,KACGf,eADH,CADF;AAKD,CArCD;;AAuCA,MAAMgB,aAAN,iEACKvB,QAAQ,CAACwB,SADd;AAEEZ,EAAAA,IAAI,EAAEd,SAAS,CAAC2B;AAFlB;AAKAtB,QAAQ,CAACqB,SAAT,2CAAqB;AACnBpB,EAAAA,QAAQ,EAAEN,SAAS,CAAC2B,MADD;AAEnBpB,EAAAA,OAAO,EAAEP,SAAS,CAAC4B,OAAV,CACP5B,SAAS,CAAC6B,SAAV,CAAoB,CAAC7B,SAAS,CAAC8B,KAAV,CAAgB5B,QAAQ,CAACwB,SAAzB,CAAD,EAAsC1B,SAAS,CAAC8B,KAAV,CAAgBL,aAAhB,CAAtC,CAApB,CADO;AAFU,CAArB;AAOA,eAAepB,QAAf","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"}
+{"version":3,"sources":["../../../../src/molecule/questions/template/index.js"],"names":["React","PropTypes","parseTemplateString","DropDown","FreeText","style","Template","template","answers","totalTemplate","templateCompose","convert","cap","part","key","type","textPart","__html","value","field","name","fieldType","fieldProps","fieldView","text","answerType","wrapper","TextPropTypes","propTypes","string","arrayOf","oneOfType","shape"],"mappings":";;;;;;;AAAA,OAAOA,KAAP,MAAkB,OAAlB;AACA,OAAOC,SAAP,MAAsB,YAAtB;AAEA,OAAOC,mBAAP,MAAgC,qCAAhC;AACA,OAAOC,QAAP,MAAqB,cAArB;AACA,OAAOC,QAAP,MAAqB,cAArB;AACA,OAAOC,KAAP,MAAkB,aAAlB;;AAEA,MAAMC,QAAQ,GAAG,CAAC;AAACC,EAAAA,QAAD;AAAWC,EAAAA;AAAX,CAAD,KAAyB;AACxC,QAAMC,aAAa,GAAGP,mBAAmB,CAACK,QAAD,CAAzC;;AACA,QAAMG,eAAe,GAAG,KAAIC,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;AAEE,QAAA,SAAS,EAAET,KAAK,CAACW,QAFnB,CAGE;AAHF;AAIE,QAAA,uBAAuB,EAAE;AAACC,UAAAA,MAAM,EAAEJ,IAAI,CAACK;AAAd;AAJ3B,QADF;AAQD;;AACD,QAAIH,IAAI,KAAK,aAAb,EAA4B;AAC1B,YAAMI,KAAK,GAAG,MAAK;AAACC,QAAAA,IAAI,EAAEP,IAAI,CAACK;AAAZ,OAAL,EAAyBV,OAAzB,CAAd;;AACA,UAAI,CAACW,KAAL,EAAY,OAAO,IAAP;;AACZ,YAAM;AAACJ,QAAAA,IAAI,EAAEM;AAAP,UAAmCF,KAAzC;AAAA,YAA2BG,UAA3B,iCAAyCH,KAAzC;;AACA,YAAMI,SAAS,GACbF,SAAS,KAAK,MAAd,gBACE,oBAAC,QAAD,eAAcC,UAAd;AAA0B,QAAA,SAAS,EAAEjB,KAAK,CAACmB;AAA3C,SADF,gBAGE,oBAAC,QAAD,eAAcF,UAAd;AAA0B,QAAA,KAAK,EAAC;AAAhC,SAJJ;AAOA,0BACE;AAAK,QAAA,SAAS,EAAEjB,KAAK,CAACoB,UAAtB;AAAkC,QAAA,GAAG,EAAEZ,IAAI,CAACK;AAA5C,SACGK,SADH,CADF;AAKD;AACF,GA7BuB,EA6BrBd,aA7BqB,CAAxB;;AA+BA,sBACE;AAAK,iBAAU,kBAAf;AAAkC,IAAA,SAAS,EAAEJ,KAAK,CAACqB;AAAnD,KACGhB,eADH,CADF;AAKD,CAtCD;;AAwCA,MAAMiB,aAAN,iEACKxB,QAAQ,CAACyB,SADd;AAEEb,EAAAA,IAAI,EAAEd,SAAS,CAAC4B;AAFlB;AAKAvB,QAAQ,CAACsB,SAAT,2CAAqB;AACnBrB,EAAAA,QAAQ,EAAEN,SAAS,CAAC4B,MADD;AAEnBrB,EAAAA,OAAO,EAAEP,SAAS,CAAC6B,OAAV,CACP7B,SAAS,CAAC8B,SAAV,CAAoB,CAAC9B,SAAS,CAAC+B,KAAV,CAAgB7B,QAAQ,CAACyB,SAAzB,CAAD,EAAsC3B,SAAS,CAAC+B,KAAV,CAAgBL,aAAhB,CAAtC,CAApB,CADO;AAFU,CAArB;AAOA,eAAerB,QAAf","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          className={style.textPart}\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/es/molecule/questions/template/style.css

@@ -1,6 +1,8 @@
 @value breakpoints: "../../../variables/breakpoints.css";
 @value mobile from breakpoints;
 @value tablet from breakpoints;
+@value colors: "../../../variables/colors.css";
+@value cm_blue_900 from colors;
 
 .wrapper {
   display: block;
@@ -15,6 +17,10 @@
   text-align: center;
 }
 
+.textPart {
+  color: cm_blue_900;
+}
+
 .answerType {
   display: inline-block;
   margin: 4px 0 8px;

package/es/variables/colors.css

@@ -39,6 +39,7 @@
 @value cm_grey_200: #d7d7da;
 @value cm_grey_300: #C5C5C9;
 @value cm_grey_400: #9999A8;
+@value cm_grey_450: #8393ad;
 @value cm_grey_500: #515161;
 @value cm_grey_700: #1D1D2B;
 @value cm_grey_800: #3a3a4a;
@@ -62,3 +63,4 @@
 @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);
+@value box_shadow_medium_dark: rgba(0, 0, 0, 0.2);

package/lib/atom/select/index.js

@@ -106,9 +106,10 @@ const Select = (props, context) => {
   const black = (0, _react.useMemo)(() => (0, _getOr2.default)('#14171A', 'common.black', skin), [skin]);
   const color = (0, _react.useMemo)(() => (0, _getOr2.default)('#00B0FF', 'common.primary', skin), [skin]);
   const shouldUseSkinFontColor = (0, _react.useMemo)(() => !isSelectedInValidOption && selected && (0, _includes2.default)(theme, ['question', 'template', 'player']), [isSelectedInValidOption, selected, theme]);
+  const arrowColor = selected ? color : undefined;
   const arrowView = !multiple ? /*#__PURE__*/_react.default.createElement(_novaIcons.NovaCompositionNavigationArrowDown, {
-    color: selected && (theme === 'question' || theme === 'template') ? color : black,
-    className: _style.default.arrow
+    color: (0, _includes2.default)(theme, ['question', 'template', 'player']) ? arrowColor : black,
+    className: shouldUseSkinFontColor ? _style.default.selectedArrow : _style.default.arrow
   }) : null;
   const behaviourClassName = (0, _react.useMemo)(() => (0, _getClassState.default)(_style.default.default, _style.default.modified, _style.default.error, modified, error), [error, modified]);
   const composedClassName = (0, _react.useMemo)(() => (0, _classnames.default)(theme ? themeStyle[theme] : behaviourClassName, selected ? _style.default.selected : _style.default.unselected, className), [behaviourClassName, className, selected, theme]);

package/lib/atom/select/index.js.map

@@ -1 +1 @@
-{"version":3,"sources":["../../../src/atom/select/index.js"],"names":["themeStyle","filter","style","invalid","header","mooc","question","sort","thematiques","player","template","Select","props","context","name","options","className","borderClassName","onChange","multiple","disabled","required","description","theme","modified","error","title","propTitle","skin","optionList","map","option","index","value","selectOption","titleView","selected","selectedLabel","isSelectedInValidOption","validOption","handleChange","e","target","selectedOptions","black","color","shouldUseSkinFontColor","arrowView","arrow","behaviourClassName","default","composedClassName","unselected","labelSize","isLongLabel","selectWrapper","selectSpan","noLabelCommon","longLabel","selectBox","SelectOptionPropTypes","PropTypes","string","isRequired","oneOfType","number","bool","contextTypes","Provider","childContextTypes","propTypes","func","oneOf","arrayOf","shape"],"mappings":";;;;;;;;;;;;;;;;;;;;;AAAA;;AACA;;AACA;;AAEA;;AACA;;AACA;;AACA;;;;;;;;;;AAEA,MAAMA,UAAU,GAAG;AACjBC,EAAAA,MAAM,EAAEC,eAAMD,MADG;AAEjBE,EAAAA,OAAO,EAAED,eAAMC,OAFE;AAGjBC,EAAAA,MAAM,EAAEF,eAAME,MAHG;AAIjBC,EAAAA,IAAI,EAAEH,eAAMG,IAJK;AAKjBC,EAAAA,QAAQ,EAAEJ,eAAMI,QALC;AAMjBC,EAAAA,IAAI,EAAEL,eAAMK,IANK;AAOjBC,EAAAA,WAAW,EAAEN,eAAMM,WAPF;AAQjBC,EAAAA,MAAM,EAAEP,eAAMO,MARG;AASjBC,EAAAA,QAAQ,EAAER,eAAMQ,QATC,CASQ;;AATR,CAAnB;;AAYA,MAAMC,MAAM,GAAG,CAACC,KAAD,EAAQC,OAAR,KAAoB;AACjC,QAAM;AACJC,IAAAA,IADI;AAEJC,IAAAA,OAAO,GAAG,EAFN;AAGJC,IAAAA,SAHI;AAIJC,IAAAA,eAJI;AAKJC,IAAAA,QALI;AAMJC,IAAAA,QAAQ,GAAG,KANP;AAOJC,IAAAA,QAPI;AAQJC,IAAAA,QARI;AASJC,IAAAA,WATI;AAUJC,IAAAA,KAVI;AAWJC,IAAAA,QAAQ,GAAG,KAXP;AAYJC,IAAAA,KAAK,GAAG,KAZJ;AAaJC,IAAAA,KAAK,EAAEC;AAbH,MAcFf,KAdJ;AAgBA,QAAM;AAACgB,IAAAA;AAAD,MAASf,OAAf;AAEA,QAAMa,KAAK,GAAG,oBAAQ,MAAOC,SAAS,GAAI,GAAEA,SAAU,GAAEN,QAAQ,GAAG,GAAH,GAAS,EAAG,EAAtC,GAA0C,IAAlE,EAAyE,CACrFM,SADqF,EAErFN,QAFqF,CAAzE,CAAd;AAKA,QAAMQ,UAAU,GACdd,OAAO,IACPA,OAAO,CAACe,GAAR,CAAY,CAACC,MAAD,EAASC,KAAT,KAAmB;AAC7B,wBACE;AAAQ,MAAA,GAAG,EAAEA,KAAb;AAAoB,MAAA,KAAK,EAAED,MAAM,CAACE,KAAlC;AAAyC,MAAA,SAAS,EAAE/B,eAAMgC;AAA1D,OACGH,MAAM,CAACjB,IADV,CADF;AAKD,GAND,CAFF;AAUA,QAAMqB,SAAS,GAAGT,KAAK,gBAAG;AAAM,IAAA,SAAS,EAAExB,eAAMwB;AAAvB,KAA+BA,KAA/B,MAAH,GAAmD,IAA1E;AAEA,QAAMU,QAAQ,GAAG,oBACf,MACEjB,QAAQ,GACJ,mBAAI,mBAAI,OAAJ,CAAJ,EAAkB,sBAAO;AAACiB,IAAAA,QAAQ,EAAE;AAAX,GAAP,EAAyBrB,OAAzB,CAAlB,CADI,GAEJ,mBAAI,OAAJ,EAAa,oBAAK;AAACqB,IAAAA,QAAQ,EAAE;AAAX,GAAL,EAAuBrB,OAAvB,CAAb,CAJS,EAKf,CAACI,QAAD,EAAWJ,OAAX,CALe,CAAjB;AAOA,QAAMsB,aAAa,GAAG,oBACpB,MACElB,QAAQ,GACJ,mBAAI,mBAAI,MAAJ,CAAJ,EAAiB,sBAAO;AAACiB,IAAAA,QAAQ,EAAE;AAAX,GAAP,EAAyBrB,OAAzB,CAAjB,CADI,GAEJ,mBAAI,MAAJ,EAAY,oBAAK;AAACqB,IAAAA,QAAQ,EAAE;AAAX,GAAL,EAAuBrB,OAAvB,CAAZ,CAJc,EAKpB,CAACI,QAAD,EAAWJ,OAAX,CALoB,CAAtB;AAQA,QAAMuB,uBAAuB,GAAG,oBAC9B,MACEf,KAAK,KAAK,QAAV,IACA,qBAAM,KAAN,EAAa,MAAb,EAAqB,oBAAK;AAACgB,IAAAA,WAAW,EAAE,KAAd;AAAqBH,IAAAA,QAAQ,EAAE;AAA/B,GAAL,EAA2CrB,OAA3C,CAArB,CAH4B,EAI9B,CAACA,OAAD,EAAUQ,KAAV,CAJ8B,CAAhC;AAOA,QAAMiB,YAAY,GAAG,oBACnB,MACErB,QAAQ,GACJsB,CAAC,IAAI;AACHvB,IAAAA,QAAQ,CAAC,mBAAI,mBAAI,OAAJ,CAAJ,EAAkBuB,CAAC,CAACC,MAAF,CAASC,eAA3B,CAAD,CAAR;AACD,GAHG,GAIJF,CAAC,IAAI;AACHvB,IAAAA,QAAQ,CAACuB,CAAC,CAACC,MAAF,CAAST,KAAV,CAAR;AACD,GARY,EASnB,CAACf,QAAD,EAAWC,QAAX,CATmB,CAArB;AAYA,QAAMyB,KAAK,GAAG,oBAAQ,MAAM,qBAAM,SAAN,EAAiB,cAAjB,EAAiChB,IAAjC,CAAd,EAAsD,CAACA,IAAD,CAAtD,CAAd;AACA,QAAMiB,KAAK,GAAG,oBAAQ,MAAM,qBAAM,SAAN,EAAiB,gBAAjB,EAAmCjB,IAAnC,CAAd,EAAwD,CAACA,IAAD,CAAxD,CAAd;AACA,QAAMkB,sBAAsB,GAAG,oBAC7B,MACE,CAACR,uBAAD,IAA4BF,QAA5B,IAAwC,wBAASb,KAAT,EAAgB,CAAC,UAAD,EAAa,UAAb,EAAyB,QAAzB,CAAhB,CAFb,EAG7B,CAACe,uBAAD,EAA0BF,QAA1B,EAAoCb,KAApC,CAH6B,CAA/B;AAMA,QAAMwB,SAAS,GAAG,CAAC5B,QAAD,gBAChB,6BAAC,6CAAD;AACE,IAAA,KAAK,EAAEiB,QAAQ,KAAKb,KAAK,KAAK,UAAV,IAAwBA,KAAK,KAAK,UAAvC,CAAR,GAA6DsB,KAA7D,GAAqED,KAD9E;AAEE,IAAA,SAAS,EAAE1C,eAAM8C;AAFnB,IADgB,GAKd,IALJ;AAMA,QAAMC,kBAAkB,GAAG,oBACzB,MAAM,4BAAc/C,eAAMgD,OAApB,EAA6BhD,eAAMsB,QAAnC,EAA6CtB,eAAMuB,KAAnD,EAA0DD,QAA1D,EAAoEC,KAApE,CADmB,EAEzB,CAACA,KAAD,EAAQD,QAAR,CAFyB,CAA3B;AAIA,QAAM2B,iBAAiB,GAAG,oBACxB,MACE,yBACE5B,KAAK,GAAGvB,UAAU,CAACuB,KAAD,CAAb,GAAuB0B,kBAD9B,EAEEb,QAAQ,GAAGlC,eAAMkC,QAAT,GAAoBlC,eAAMkD,UAFpC,EAGEpC,SAHF,CAFsB,EAOxB,CAACiC,kBAAD,EAAqBjC,SAArB,EAAgCoB,QAAhC,EAA0Cb,KAA1C,CAPwB,CAA1B;AAUA,QAAM8B,SAAS,GAAG,oBAAQ,MAAM,oBAAKhB,aAAL,CAAd,EAAmC,CAACA,aAAD,CAAnC,CAAlB;AAEA,QAAMiB,WAAW,GAAG,oBAAQ,MAAMD,SAAS,IAAI,EAA3B,EAA+B,CAACA,SAAD,CAA/B,CAApB;AAEA,sBACE;AAAK,IAAA,SAAS,EAAEF;AAAhB,kBACE;AACE,iBAAU,gBADZ;AAEE,IAAA,KAAK,eACCL,sBAAsB,IAAI;AAC5BD,MAAAA;AAD4B,KAD3B,CAFP;AAOE,IAAA,SAAS,EAAE3C,eAAMqD;AAPnB,KASGpB,SATH,eAUE;AACE,iBAAU,aADZ;AAEE,IAAA,SAAS,EAAE,yBACTjC,eAAMsD,UADG,EAET,wBAASjC,KAAT,EAAgB,CAAC,QAAD,EAAW,SAAX,EAAsB,UAAtB,EAAkC,aAAlC,EAAiD,UAAjD,CAAhB,IACIrB,eAAMuD,aADV,GAEI,IAJK,EAKTxC,eALS,EAMTqC,WAAW,GAAGpD,eAAMwD,SAAT,GAAqB,IANvB;AAFb,KAWGrB,aAXH,CAVF,EAuBGU,SAvBH,eAwBE;AACE,iBAAU,eADZ;AAEE,IAAA,SAAS,EAAE7C,eAAMyD,SAFnB;AAGE,IAAA,KAAK,EAAEtB,aAHT;AAIE,IAAA,IAAI,EAAEvB,IAJR;AAKE,IAAA,QAAQ,EAAE0B,YALZ;AAME,IAAA,KAAK,EAAEJ,QANT;AAOE,IAAA,QAAQ,EAAEjB,QAPZ;AAQE,IAAA,QAAQ,EAAEC;AARZ,KAUGS,UAVH,CAxBF,CADF,eAsCE;AAAK,IAAA,SAAS,EAAE3B,eAAMoB;AAAtB,KAAoCA,WAApC,CAtCF,CADF;AA0CD,CAhJD;;AAkJO,MAAMsC,qBAAqB,GAAG;AACnC9C,EAAAA,IAAI,EAAE+C,mBAAUC,MAAV,CAAiBC,UADY;AAEnC9B,EAAAA,KAAK,EAAE4B,mBAAUG,SAAV,CAAoB,CAACH,mBAAUC,MAAX,EAAmBD,mBAAUI,MAA7B,CAApB,CAF4B;AAGnC7B,EAAAA,QAAQ,EAAEyB,mBAAUK,IAHe;AAInC3B,EAAAA,WAAW,EAAEsB,mBAAUK;AAJY,CAA9B;;AAOPvD,MAAM,CAACwD,YAAP,GAAsB;AACpBvC,EAAAA,IAAI,EAAEwC,kBAASC,iBAAT,CAA2BzC;AADb,CAAtB;AAIAjB,MAAM,CAAC2D,SAAP,2CAAmB;AACjB5C,EAAAA,KAAK,EAAEmC,mBAAUC,MADA;AAEjBhD,EAAAA,IAAI,EAAE+C,mBAAUC,MAFC;AAGjB9C,EAAAA,SAAS,EAAE6C,mBAAUC,MAHJ;AAIjB7C,EAAAA,eAAe,EAAE4C,mBAAUC,MAJV;AAKjB1C,EAAAA,QAAQ,EAAEyC,mBAAUK,IALH;AAMjB/C,EAAAA,QAAQ,EAAE0C,mBAAUK,IANH;AAOjB5C,EAAAA,WAAW,EAAEuC,mBAAUC,MAPN;AAQjBzC,EAAAA,QAAQ,EAAEwC,mBAAUK,IARH;AASjBhD,EAAAA,QAAQ,EAAE2C,mBAAUU,IATH;AAUjBhD,EAAAA,KAAK,EAAEsC,mBAAUW,KAAV,CAAgB,oBAAKxE,UAAL,CAAhB,CAVU;AAWjBe,EAAAA,OAAO,EAAE8C,mBAAUY,OAAV,CAAkBZ,mBAAUa,KAAV,CAAgBd,qBAAhB,CAAlB,CAXQ;AAYjBpC,EAAAA,QAAQ,EAAEqC,mBAAUK,IAZH;AAajBzC,EAAAA,KAAK,EAAEoC,mBAAUK;AAbA,CAAnB;eAgBevD,M","sourcesContent":["import React, {useMemo} from 'react';\nimport PropTypes from 'prop-types';\nimport classnames from 'classnames';\nimport {find, keys, map, get, getOr, filter, includes, size} from 'lodash/fp';\nimport {NovaCompositionNavigationArrowDown as ArrowDown} from '@coorpacademy/nova-icons';\nimport Provider from '../provider';\nimport getClassState from '../../util/get-class-state';\nimport style from './style.css';\n\nconst themeStyle = {\n  filter: style.filter,\n  invalid: style.invalid,\n  header: style.header,\n  mooc: style.mooc,\n  question: style.question,\n  sort: style.sort,\n  thematiques: style.thematiques,\n  player: style.player,\n  template: style.template // we keep template in case it is used anywhere else?\n};\n\nconst Select = (props, context) => {\n  const {\n    name,\n    options = [],\n    className,\n    borderClassName,\n    onChange,\n    multiple = false,\n    disabled,\n    required,\n    description,\n    theme,\n    modified = false,\n    error = false,\n    title: propTitle\n  } = props;\n\n  const {skin} = context;\n\n  const title = useMemo(() => (propTitle ? `${propTitle}${required ? '*' : ''}` : null), [\n    propTitle,\n    required\n  ]);\n\n  const optionList =\n    options &&\n    options.map((option, index) => {\n      return (\n        <option key={index} value={option.value} className={style.selectOption}>\n          {option.name}\n        </option>\n      );\n    });\n\n  const titleView = title ? <span className={style.title}>{title} </span> : null;\n\n  const selected = useMemo(\n    () =>\n      multiple\n        ? map(get('value'), filter({selected: true}, options))\n        : get('value', find({selected: true}, options)),\n    [multiple, options]\n  );\n  const selectedLabel = useMemo(\n    () =>\n      multiple\n        ? map(get('name'), filter({selected: true}, options))\n        : get('name', find({selected: true}, options)),\n    [multiple, options]\n  );\n\n  const isSelectedInValidOption = useMemo(\n    () =>\n      theme === 'player' &&\n      getOr(false, 'name', find({validOption: false, selected: true}, options)),\n    [options, theme]\n  );\n\n  const handleChange = useMemo(\n    () =>\n      multiple\n        ? e => {\n            onChange(map(get('value'), e.target.selectedOptions));\n          }\n        : e => {\n            onChange(e.target.value);\n          },\n    [onChange, multiple]\n  );\n\n  const black = useMemo(() => getOr('#14171A', 'common.black', skin), [skin]);\n  const color = useMemo(() => getOr('#00B0FF', 'common.primary', skin), [skin]);\n  const shouldUseSkinFontColor = useMemo(\n    () =>\n      !isSelectedInValidOption && selected && includes(theme, ['question', 'template', 'player']),\n    [isSelectedInValidOption, selected, theme]\n  );\n\n  const arrowView = !multiple ? (\n    <ArrowDown\n      color={selected && (theme === 'question' || theme === 'template') ? color : black}\n      className={style.arrow}\n    />\n  ) : null;\n  const behaviourClassName = useMemo(\n    () => getClassState(style.default, style.modified, style.error, modified, error),\n    [error, modified]\n  );\n  const composedClassName = useMemo(\n    () =>\n      classnames(\n        theme ? themeStyle[theme] : behaviourClassName,\n        selected ? style.selected : style.unselected,\n        className\n      ),\n    [behaviourClassName, className, selected, theme]\n  );\n\n  const labelSize = useMemo(() => size(selectedLabel), [selectedLabel]);\n\n  const isLongLabel = useMemo(() => labelSize >= 65, [labelSize]);\n\n  return (\n    <div className={composedClassName}>\n      <label\n        data-name=\"select-wrapper\"\n        style={{\n          ...(shouldUseSkinFontColor && {\n            color\n          })\n        }}\n        className={style.selectWrapper}\n      >\n        {titleView}\n        <span\n          data-name=\"select-span\"\n          className={classnames(\n            style.selectSpan,\n            includes(theme, ['player', 'invalid', 'question', 'thematiques', 'template'])\n              ? style.noLabelCommon\n              : null,\n            borderClassName,\n            isLongLabel ? style.longLabel : null\n          )}\n        >\n          {selectedLabel}\n        </span>\n        {arrowView}\n        <select\n          data-name=\"native-select\"\n          className={style.selectBox}\n          title={selectedLabel}\n          name={name}\n          onChange={handleChange}\n          value={selected}\n          multiple={multiple}\n          disabled={disabled}\n        >\n          {optionList}\n        </select>\n      </label>\n      <div className={style.description}>{description}</div>\n    </div>\n  );\n};\n\nexport const SelectOptionPropTypes = {\n  name: PropTypes.string.isRequired,\n  value: PropTypes.oneOfType([PropTypes.string, PropTypes.number]),\n  selected: PropTypes.bool,\n  validOption: PropTypes.bool\n};\n\nSelect.contextTypes = {\n  skin: Provider.childContextTypes.skin\n};\n\nSelect.propTypes = {\n  title: PropTypes.string,\n  name: PropTypes.string,\n  className: PropTypes.string,\n  borderClassName: PropTypes.string,\n  disabled: PropTypes.bool,\n  multiple: PropTypes.bool,\n  description: PropTypes.string,\n  required: PropTypes.bool,\n  onChange: PropTypes.func,\n  theme: PropTypes.oneOf(keys(themeStyle)),\n  options: PropTypes.arrayOf(PropTypes.shape(SelectOptionPropTypes)),\n  modified: PropTypes.bool,\n  error: PropTypes.bool\n};\n\nexport default Select;\n"],"file":"index.js"}
+{"version":3,"sources":["../../../src/atom/select/index.js"],"names":["themeStyle","filter","style","invalid","header","mooc","question","sort","thematiques","player","template","Select","props","context","name","options","className","borderClassName","onChange","multiple","disabled","required","description","theme","modified","error","title","propTitle","skin","optionList","map","option","index","value","selectOption","titleView","selected","selectedLabel","isSelectedInValidOption","validOption","handleChange","e","target","selectedOptions","black","color","shouldUseSkinFontColor","arrowColor","undefined","arrowView","selectedArrow","arrow","behaviourClassName","default","composedClassName","unselected","labelSize","isLongLabel","selectWrapper","selectSpan","noLabelCommon","longLabel","selectBox","SelectOptionPropTypes","PropTypes","string","isRequired","oneOfType","number","bool","contextTypes","Provider","childContextTypes","propTypes","func","oneOf","arrayOf","shape"],"mappings":"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","sourcesContent":["import React, {useMemo} from 'react';\nimport PropTypes from 'prop-types';\nimport classnames from 'classnames';\nimport {find, keys, map, get, getOr, filter, includes, size} from 'lodash/fp';\nimport {NovaCompositionNavigationArrowDown as ArrowDown} from '@coorpacademy/nova-icons';\nimport Provider from '../provider';\nimport getClassState from '../../util/get-class-state';\nimport style from './style.css';\n\nconst themeStyle = {\n  filter: style.filter,\n  invalid: style.invalid,\n  header: style.header,\n  mooc: style.mooc,\n  question: style.question,\n  sort: style.sort,\n  thematiques: style.thematiques,\n  player: style.player,\n  template: style.template // we keep template in case it is used anywhere else?\n};\n\nconst Select = (props, context) => {\n  const {\n    name,\n    options = [],\n    className,\n    borderClassName,\n    onChange,\n    multiple = false,\n    disabled,\n    required,\n    description,\n    theme,\n    modified = false,\n    error = false,\n    title: propTitle\n  } = props;\n\n  const {skin} = context;\n\n  const title = useMemo(() => (propTitle ? `${propTitle}${required ? '*' : ''}` : null), [\n    propTitle,\n    required\n  ]);\n\n  const optionList =\n    options &&\n    options.map((option, index) => {\n      return (\n        <option key={index} value={option.value} className={style.selectOption}>\n          {option.name}\n        </option>\n      );\n    });\n\n  const titleView = title ? <span className={style.title}>{title} </span> : null;\n\n  const selected = useMemo(\n    () =>\n      multiple\n        ? map(get('value'), filter({selected: true}, options))\n        : get('value', find({selected: true}, options)),\n    [multiple, options]\n  );\n  const selectedLabel = useMemo(\n    () =>\n      multiple\n        ? map(get('name'), filter({selected: true}, options))\n        : get('name', find({selected: true}, options)),\n    [multiple, options]\n  );\n\n  const isSelectedInValidOption = useMemo(\n    () =>\n      theme === 'player' &&\n      getOr(false, 'name', find({validOption: false, selected: true}, options)),\n    [options, theme]\n  );\n\n  const handleChange = useMemo(\n    () =>\n      multiple\n        ? e => {\n            onChange(map(get('value'), e.target.selectedOptions));\n          }\n        : e => {\n            onChange(e.target.value);\n          },\n    [onChange, multiple]\n  );\n\n  const black = useMemo(() => getOr('#14171A', 'common.black', skin), [skin]);\n  const color = useMemo(() => getOr('#00B0FF', 'common.primary', skin), [skin]);\n  const shouldUseSkinFontColor = useMemo(\n    () =>\n      !isSelectedInValidOption && selected && includes(theme, ['question', 'template', 'player']),\n    [isSelectedInValidOption, selected, theme]\n  );\n  const arrowColor = selected ? color : undefined;\n\n  const arrowView = !multiple ? (\n    <ArrowDown\n      color={includes(theme, ['question', 'template', 'player']) ? arrowColor : black}\n      className={shouldUseSkinFontColor ? style.selectedArrow : style.arrow}\n    />\n  ) : null;\n  const behaviourClassName = useMemo(\n    () => getClassState(style.default, style.modified, style.error, modified, error),\n    [error, modified]\n  );\n  const composedClassName = useMemo(\n    () =>\n      classnames(\n        theme ? themeStyle[theme] : behaviourClassName,\n        selected ? style.selected : style.unselected,\n        className\n      ),\n    [behaviourClassName, className, selected, theme]\n  );\n\n  const labelSize = useMemo(() => size(selectedLabel), [selectedLabel]);\n\n  const isLongLabel = useMemo(() => labelSize >= 65, [labelSize]);\n\n  return (\n    <div className={composedClassName}>\n      <label\n        data-name=\"select-wrapper\"\n        style={{\n          ...(shouldUseSkinFontColor && {\n            color\n          })\n        }}\n        className={style.selectWrapper}\n      >\n        {titleView}\n        <span\n          data-name=\"select-span\"\n          className={classnames(\n            style.selectSpan,\n            includes(theme, ['player', 'invalid', 'question', 'thematiques', 'template'])\n              ? style.noLabelCommon\n              : null,\n            borderClassName,\n            isLongLabel ? style.longLabel : null\n          )}\n        >\n          {selectedLabel}\n        </span>\n        {arrowView}\n        <select\n          data-name=\"native-select\"\n          className={style.selectBox}\n          title={selectedLabel}\n          name={name}\n          onChange={handleChange}\n          value={selected}\n          multiple={multiple}\n          disabled={disabled}\n        >\n          {optionList}\n        </select>\n      </label>\n      <div className={style.description}>{description}</div>\n    </div>\n  );\n};\n\nexport const SelectOptionPropTypes = {\n  name: PropTypes.string.isRequired,\n  value: PropTypes.oneOfType([PropTypes.string, PropTypes.number]),\n  selected: PropTypes.bool,\n  validOption: PropTypes.bool\n};\n\nSelect.contextTypes = {\n  skin: Provider.childContextTypes.skin\n};\n\nSelect.propTypes = {\n  title: PropTypes.string,\n  name: PropTypes.string,\n  className: PropTypes.string,\n  borderClassName: PropTypes.string,\n  disabled: PropTypes.bool,\n  multiple: PropTypes.bool,\n  description: PropTypes.string,\n  required: PropTypes.bool,\n  onChange: PropTypes.func,\n  theme: PropTypes.oneOf(keys(themeStyle)),\n  options: PropTypes.arrayOf(PropTypes.shape(SelectOptionPropTypes)),\n  modified: PropTypes.bool,\n  error: PropTypes.bool\n};\n\nexport default Select;\n"],"file":"index.js"}

package/lib/atom/select/style.css

@@ -11,7 +11,9 @@
 @value xtraLightGrey from colors;
 @value transparent from colors;
 @value box_shadow_light_dark from colors;
+@value box_shadow_medium_dark from colors;
 @value cm_blue_900 from colors;
+@value cm_grey_450 from colors;
 
 .default {
   display: flex;
@@ -77,7 +79,6 @@
 }
 
 .selectOption,
-
 .no-label .selectWrapper{
   min-width: min-content;
   height: min-content;
@@ -86,6 +87,7 @@
 .player .selectWrapper {
   min-width: min-content;
   height: min-content;
+  margin-right: 0;
 }
 
 .modified select {
@@ -133,6 +135,22 @@
   z-index: 11;
 }
 
+.selectedArrow {
+  composes: arrow;
+}
+
+.player .selectWrapper .arrow {
+  color: cm_grey_450;
+}
+
+.player:hover .arrow {
+  color: cm_blue_900;
+}
+
+.player:hover .selectedArrow {
+  color: inherit;
+}
+
 @media mobile {
   .arrow::after {
     right: 10px;
@@ -177,6 +195,8 @@
 }
 
 .filter .selectBox {
+  position: absolute;
+  top: 27px;
   display: block;
   width: 100%;
   height: 50px;
@@ -247,6 +267,11 @@ div.player .noLabelCommon.selectSpan {
   min-width: min-content;
   width: 100%;
   white-space: nowrap;
+  color: cm_blue_900;
+}
+
+div.player:hover span.selectSpan {
+  box-shadow: 0px 4px 16px box_shadow_medium_dark;
 }
 
 .no-label .selectBox {
@@ -353,6 +378,7 @@ div.player .noLabelCommon.selectSpan {
   margin: 0;
   height: 35px;
   border: 0;
+  width: inherit;
 }
 
 .mooc select {
@@ -465,13 +491,23 @@ div.player .noLabelCommon.selectSpan {
   composes: no-label;
 }
 
+.player .selectBox {
+  border: 0;
+}
+
+/* mozilla specific styling */
+@supports (-moz-appearance:none) {
+  .player label.selectWrapper select.selectBox {
+    width: 100%;
+  } 
+}
+
 /*
   Header
 */
 
 .header {
   composes: mooc;
-  /* width: auto; */
 }
 
 .header .selectBox {
@@ -488,7 +524,6 @@ div.player .noLabelCommon.selectSpan {
 }
 
 .header .title,
-
 .header .selectWrapper span.selectSpan {
   min-width: 150px;
   color: transparent;

package/lib/molecule/card/customer.js

@@ -27,12 +27,14 @@ const Customer = props => {
     type,
     coorpOriginal,
     theme,
-    disabled = false
+    disabled = false,
+    'aria-label': ariaLabel
   } = props;
   const className = (0, _classnames.default)(THEMES[theme], _customer.default.customer, type === 'chapter' ? _customer.default.chapterCustomer : null);
   return /*#__PURE__*/_react.default.createElement("div", {
     className: className,
-    disabled: disabled
+    disabled: disabled,
+    "aria-label": ariaLabel
   }, /*#__PURE__*/_react.default.createElement("div", {
     className: _customer.default.content
   }, coorpOriginal ? /*#__PURE__*/_react.default.createElement("span", {
@@ -47,7 +49,8 @@ Customer.propTypes = process.env.NODE_ENV !== "production" ? {
   type: _propTypes.default.string,
   name: _propTypes.default.string,
   coorpOriginal: _propTypes.default.bool.isRequired,
-  disabled: _propTypes.default.bool
+  disabled: _propTypes.default.bool,
+  'aria-label': _propTypes.default.string
 } : {};
 var _default = Customer;
 exports.default = _default;

package/lib/molecule/card/customer.js.map

@@ -1 +1 @@
-{"version":3,"sources":["../../../src/molecule/card/customer.js"],"names":["THEMES","default","coorpmanager","style","Customer","props","name","type","coorpOriginal","theme","disabled","className","customer","chapterCustomer","content","coorp","original","propTypes","PropTypes","oneOf","string","bool","isRequired"],"mappings":";;;;;;;AAAA;;AACA;;AACA;;AAEA;;;;AAEO,MAAMA,MAAM,GAAG;AACpBC,EAAAA,OAAO,EAAE,IADW;AAEpBC,EAAAA,YAAY,EAAEC,kBAAMD;AAFA,CAAf;;;AAKP,MAAME,QAAQ,GAAGC,KAAK,IAAI;AACxB,QAAM;AAACC,IAAAA,IAAD;AAAOC,IAAAA,IAAP;AAAaC,IAAAA,aAAb;AAA4BC,IAAAA,KAA5B;AAAmCC,IAAAA,QAAQ,GAAG;AAA9C,MAAuDL,KAA7D;AACA,QAAMM,SAAS,GAAG,yBAChBX,MAAM,CAACS,KAAD,CADU,EAEhBN,kBAAMS,QAFU,EAGhBL,IAAI,KAAK,SAAT,GAAqBJ,kBAAMU,eAA3B,GAA6C,IAH7B,CAAlB;AAMA,sBACE;AAAK,IAAA,SAAS,EAAEF,SAAhB;AAA2B,IAAA,QAAQ,EAAED;AAArC,kBACE;AAAK,IAAA,SAAS,EAAEP,kBAAMW;AAAtB,KACGN,aAAa,gBAAG;AAAM,IAAA,SAAS,EAAEL,kBAAMY;AAAvB,cAAH,GAAiD,IADjE,EAEGP,aAAa,gBAAG;AAAM,IAAA,SAAS,EAAEL,kBAAMa;AAAvB,iBAAH,GAAuD,IAFvE,EAGG,CAACR,aAAD,IAAkBF,IAHrB,CADF,CADF;AASD,CAjBD;;AAmBAF,QAAQ,CAACa,SAAT,2CAAqB;AACnBR,EAAAA,KAAK,EAAES,mBAAUC,KAAV,CAAgB,oBAAKnB,MAAL,CAAhB,CADY;AAEnBO,EAAAA,IAAI,EAAEW,mBAAUE,MAFG;AAGnBd,EAAAA,IAAI,EAAEY,mBAAUE,MAHG;AAInBZ,EAAAA,aAAa,EAAEU,mBAAUG,IAAV,CAAeC,UAJX;AAKnBZ,EAAAA,QAAQ,EAAEQ,mBAAUG;AALD,CAArB;eAQejB,Q","sourcesContent":["import React from 'react';\nimport PropTypes from 'prop-types';\nimport classnames from 'classnames';\nimport {keys} from 'lodash/fp';\nimport style from './customer.css';\n\nexport const THEMES = {\n  default: null,\n  coorpmanager: style.coorpmanager\n};\n\nconst Customer = props => {\n  const {name, type, coorpOriginal, theme, disabled = false} = props;\n  const className = classnames(\n    THEMES[theme],\n    style.customer,\n    type === 'chapter' ? style.chapterCustomer : null\n  );\n\n  return (\n    <div className={className} disabled={disabled}>\n      <div className={style.content}>\n        {coorpOriginal ? <span className={style.coorp}>Coorp </span> : null}\n        {coorpOriginal ? <span className={style.original}>Original </span> : null}\n        {!coorpOriginal && name}\n      </div>\n    </div>\n  );\n};\n\nCustomer.propTypes = {\n  theme: PropTypes.oneOf(keys(THEMES)),\n  type: PropTypes.string,\n  name: PropTypes.string,\n  coorpOriginal: PropTypes.bool.isRequired,\n  disabled: PropTypes.bool\n};\n\nexport default Customer;\n"],"file":"customer.js"}
+{"version":3,"sources":["../../../src/molecule/card/customer.js"],"names":["THEMES","default","coorpmanager","style","Customer","props","name","type","coorpOriginal","theme","disabled","ariaLabel","className","customer","chapterCustomer","content","coorp","original","propTypes","PropTypes","oneOf","string","bool","isRequired"],"mappings":";;;;;;;AAAA;;AACA;;AACA;;AAEA;;;;AAEO,MAAMA,MAAM,GAAG;AACpBC,EAAAA,OAAO,EAAE,IADW;AAEpBC,EAAAA,YAAY,EAAEC,kBAAMD;AAFA,CAAf;;;AAKP,MAAME,QAAQ,GAAGC,KAAK,IAAI;AACxB,QAAM;AAACC,IAAAA,IAAD;AAAOC,IAAAA,IAAP;AAAaC,IAAAA,aAAb;AAA4BC,IAAAA,KAA5B;AAAmCC,IAAAA,QAAQ,GAAG,KAA9C;AAAqD,kBAAcC;AAAnE,MAAgFN,KAAtF;AACA,QAAMO,SAAS,GAAG,yBAChBZ,MAAM,CAACS,KAAD,CADU,EAEhBN,kBAAMU,QAFU,EAGhBN,IAAI,KAAK,SAAT,GAAqBJ,kBAAMW,eAA3B,GAA6C,IAH7B,CAAlB;AAMA,sBACE;AAAK,IAAA,SAAS,EAAEF,SAAhB;AAA2B,IAAA,QAAQ,EAAEF,QAArC;AAA+C,kBAAYC;AAA3D,kBACE;AAAK,IAAA,SAAS,EAAER,kBAAMY;AAAtB,KACGP,aAAa,gBAAG;AAAM,IAAA,SAAS,EAAEL,kBAAMa;AAAvB,cAAH,GAAiD,IADjE,EAEGR,aAAa,gBAAG;AAAM,IAAA,SAAS,EAAEL,kBAAMc;AAAvB,iBAAH,GAAuD,IAFvE,EAGG,CAACT,aAAD,IAAkBF,IAHrB,CADF,CADF;AASD,CAjBD;;AAmBAF,QAAQ,CAACc,SAAT,2CAAqB;AACnBT,EAAAA,KAAK,EAAEU,mBAAUC,KAAV,CAAgB,oBAAKpB,MAAL,CAAhB,CADY;AAEnBO,EAAAA,IAAI,EAAEY,mBAAUE,MAFG;AAGnBf,EAAAA,IAAI,EAAEa,mBAAUE,MAHG;AAInBb,EAAAA,aAAa,EAAEW,mBAAUG,IAAV,CAAeC,UAJX;AAKnBb,EAAAA,QAAQ,EAAES,mBAAUG,IALD;AAMnB,gBAAcH,mBAAUE;AANL,CAArB;eASejB,Q","sourcesContent":["import React from 'react';\nimport PropTypes from 'prop-types';\nimport classnames from 'classnames';\nimport {keys} from 'lodash/fp';\nimport style from './customer.css';\n\nexport const THEMES = {\n  default: null,\n  coorpmanager: style.coorpmanager\n};\n\nconst Customer = props => {\n  const {name, type, coorpOriginal, theme, disabled = false, 'aria-label': ariaLabel} = props;\n  const className = classnames(\n    THEMES[theme],\n    style.customer,\n    type === 'chapter' ? style.chapterCustomer : null\n  );\n\n  return (\n    <div className={className} disabled={disabled} aria-label={ariaLabel}>\n      <div className={style.content}>\n        {coorpOriginal ? <span className={style.coorp}>Coorp </span> : null}\n        {coorpOriginal ? <span className={style.original}>Original </span> : null}\n        {!coorpOriginal && name}\n      </div>\n    </div>\n  );\n};\n\nCustomer.propTypes = {\n  theme: PropTypes.oneOf(keys(THEMES)),\n  type: PropTypes.string,\n  name: PropTypes.string,\n  coorpOriginal: PropTypes.bool.isRequired,\n  disabled: PropTypes.bool,\n  'aria-label': PropTypes.string\n};\n\nexport default Customer;\n"],"file":"customer.js"}

package/lib/molecule/card/favorite.js

@@ -49,7 +49,8 @@ class Favorite extends _react.default.Component {
       favorite,
       addFavoriteToolTip,
       removeFavoriteToolTip,
-      className
+      className,
+      'aria-label': ariaLabel = {}
     } = this.props;
     const primaryColor = (0, _get2.default)('common.primary', skin);
     const darkColor = (0, _get2.default)('common.dark', skin);
@@ -61,6 +62,7 @@ class Favorite extends _react.default.Component {
       className: _favorite.default.blocFavorite
     }, toolTipView, /*#__PURE__*/_react.default.createElement("div", {
       "data-name": "favorite",
+      "aria-label": ariaLabel.favorite,
       className: (0, _classnames.default)(_favorite.default.favorite, className, favorite && _favorite.default.selected),
       onClick: this.handleFavoviteClick,
       style: {
@@ -70,12 +72,14 @@ class Favorite extends _react.default.Component {
       className: _favorite.default.checkIcon,
       color: brandColor,
       width: 13,
-      height: 13
+      height: 13,
+      "aria-label": ariaLabel.removeFromFavorite
     }) : /*#__PURE__*/_react.default.createElement(_novaIcons.NovaCompositionNavigationMore, {
       className: _favorite.default.moreIcon,
       color: darkColor,
       width: 13,
-      height: 13
+      height: 13,
+      "aria-label": ariaLabel.addToFavorite
     })));
   }
 
@@ -91,7 +95,12 @@ Favorite.propTypes = process.env.NODE_ENV !== "production" ? {
   disabled: _propTypes.default.bool,
   addFavoriteToolTip: _propTypes.default.string,
   removeFavoriteToolTip: _propTypes.default.string,
-  onFavoriteClick: _propTypes.default.func
+  onFavoriteClick: _propTypes.default.func,
+  'aria-label': _propTypes.default.shape({
+    favorite: _propTypes.default.string,
+    addToFavorite: _propTypes.default.string,
+    removeFromFavorite: _propTypes.default.string
+  })
 } : {};
 var _default = Favorite;
 exports.default = _default;

package/lib/molecule/card/favorite.js.map

@@ -1 +1 @@
-{"version":3,"sources":["../../../src/molecule/card/favorite.js"],"names":["Favorite","React","Component","constructor","props","context","handleFavoviteClick","bind","e","disabled","onFavoriteClick","stopPropagation","preventDefault","render","skin","favorite","addFavoriteToolTip","removeFavoriteToolTip","className","primaryColor","darkColor","brandColor","toolTipView","style","showToolTip","blocFavorite","selected","color","checkIcon","moreIcon","Provider","childContextTypes","propTypes","PropTypes","string","bool","func"],"mappings":";;;;;;;;;;;AAAA;;AACA;;AACA;;AAEA;;AAIA;;AACA;;;;;;AAEA,MAAMA,QAAN,SAAuBC,eAAMC,SAA7B,CAAuC;AAcrCC,EAAAA,WAAW,CAACC,KAAD,EAAQC,OAAR,EAAiB;AAC1B,UAAMD,KAAN,EAAaC,OAAb;AACA,SAAKC,mBAAL,GAA2B,KAAKA,mBAAL,CAAyBC,IAAzB,CAA8B,IAA9B,CAA3B;AACD;;AAEDD,EAAAA,mBAAmB,CAACE,CAAD,EAAI;AACrB,UAAM;AAACC,MAAAA,QAAD;AAAWC,MAAAA,eAAe;AAA1B,QAAqC,KAAKN,KAAhD;AACAI,IAAAA,CAAC,CAACG,eAAF;AACAH,IAAAA,CAAC,CAACI,cAAF;AACA,QAAI,CAACH,QAAL,EAAeC,eAAe,CAACF,CAAD,CAAf;AAChB;;AAEDK,EAAAA,MAAM,GAAG;AACP,UAAM;AAACC,MAAAA;AAAD,QAAS,KAAKT,OAApB;AACA,UAAM;AAACU,MAAAA,QAAD;AAAWC,MAAAA,kBAAX;AAA+BC,MAAAA,qBAA/B;AAAsDC,MAAAA;AAAtD,QAAmE,KAAKd,KAA9E;AAEA,UAAMe,YAAY,GAAG,mBAAI,gBAAJ,EAAsBL,IAAtB,CAArB;AACA,UAAMM,SAAS,GAAG,mBAAI,aAAJ,EAAmBN,IAAnB,CAAlB;AACA,UAAMO,UAAU,GAAG,mBAAI,cAAJ,EAAoBP,IAApB,CAAnB;AACA,UAAMQ,WAAW,GACf,CAAC,uBAAQL,qBAAR,CAAD,IAAmC,CAAC,uBAAQD,kBAAR,CAApC,gBACE;AAAK,MAAA,SAAS,EAAEO,kBAAMC;AAAtB,oBACE,2CAAOT,QAAQ,GAAGE,qBAAH,GAA2BD,kBAA1C,CADF,CADF,GAII,IALN;AAOA,wBACE;AAAK,MAAA,SAAS,EAAEO,kBAAME;AAAtB,OACGH,WADH,eAEE;AACE,mBAAU,UADZ;AAEE,MAAA,SAAS,EAAE,yBAAWC,kBAAMR,QAAjB,EAA2BG,SAA3B,EAAsCH,QAAQ,IAAIQ,kBAAMG,QAAxD,CAFb;AAGE,MAAA,OAAO,EAAE,KAAKpB,mBAHhB;AAIE,MAAA,KAAK,EAAE;AACLqB,QAAAA,KAAK,EAAER;AADF;AAJT,OAQGJ,QAAQ,gBACP,6BAAC,2CAAD;AAAW,MAAA,SAAS,EAAEQ,kBAAMK,SAA5B;AAAuC,MAAA,KAAK,EAAEP,UAA9C;AAA0D,MAAA,KAAK,EAAE,EAAjE;AAAqE,MAAA,MAAM,EAAE;AAA7E,MADO,gBAGP,6BAAC,wCAAD;AAAU,MAAA,SAAS,EAAEE,kBAAMM,QAA3B;AAAqC,MAAA,KAAK,EAAET,SAA5C;AAAuD,MAAA,KAAK,EAAE,EAA9D;AAAkE,MAAA,MAAM,EAAE;AAA1E,MAXJ,CAFF,CADF;AAmBD;;AA3DoC;;gBAAjCpB,Q,kBAUkB;AACpBc,EAAAA,IAAI,EAAEgB,kBAASC,iBAAT,CAA2BjB;AADb,C;;AAVlBd,Q,CACGgC,S,2CAAY;AACjBd,EAAAA,SAAS,EAAEe,mBAAUC,MADJ;AAEjBnB,EAAAA,QAAQ,EAAEkB,mBAAUE,IAFH;AAGjB1B,EAAAA,QAAQ,EAAEwB,mBAAUE,IAHH;AAIjBnB,EAAAA,kBAAkB,EAAEiB,mBAAUC,MAJb;AAKjBjB,EAAAA,qBAAqB,EAAEgB,mBAAUC,MALhB;AAMjBxB,EAAAA,eAAe,EAAEuB,mBAAUG;AANV,C;eA6DNpC,Q","sourcesContent":["import React from 'react';\nimport PropTypes from 'prop-types';\nimport classnames from 'classnames';\nimport {get, isEmpty, noop} from 'lodash/fp';\nimport {\n  NovaCompositionNavigationMore as MoreIcon,\n  NovaCompositionCoorpacademyCheck as CheckIcon\n} from '@coorpacademy/nova-icons';\nimport Provider from '../../atom/provider';\nimport style from './favorite.css';\n\nclass Favorite extends React.Component {\n  static propTypes = {\n    className: PropTypes.string,\n    favorite: PropTypes.bool,\n    disabled: PropTypes.bool,\n    addFavoriteToolTip: PropTypes.string,\n    removeFavoriteToolTip: PropTypes.string,\n    onFavoriteClick: PropTypes.func\n  };\n\n  static contextTypes = {\n    skin: Provider.childContextTypes.skin\n  };\n\n  constructor(props, context) {\n    super(props, context);\n    this.handleFavoviteClick = this.handleFavoviteClick.bind(this);\n  }\n\n  handleFavoviteClick(e) {\n    const {disabled, onFavoriteClick = noop} = this.props;\n    e.stopPropagation();\n    e.preventDefault();\n    if (!disabled) onFavoriteClick(e);\n  }\n\n  render() {\n    const {skin} = this.context;\n    const {favorite, addFavoriteToolTip, removeFavoriteToolTip, className} = this.props;\n\n    const primaryColor = get('common.primary', skin);\n    const darkColor = get('common.dark', skin);\n    const brandColor = get('common.brand', skin);\n    const toolTipView =\n      !isEmpty(removeFavoriteToolTip) && !isEmpty(addFavoriteToolTip) ? (\n        <div className={style.showToolTip}>\n          <span>{favorite ? removeFavoriteToolTip : addFavoriteToolTip}</span>\n        </div>\n      ) : null;\n\n    return (\n      <div className={style.blocFavorite}>\n        {toolTipView}\n        <div\n          data-name=\"favorite\"\n          className={classnames(style.favorite, className, favorite && style.selected)}\n          onClick={this.handleFavoviteClick}\n          style={{\n            color: primaryColor\n          }}\n        >\n          {favorite ? (\n            <CheckIcon className={style.checkIcon} color={brandColor} width={13} height={13} />\n          ) : (\n            <MoreIcon className={style.moreIcon} color={darkColor} width={13} height={13} />\n          )}\n        </div>\n      </div>\n    );\n  }\n}\n\nexport default Favorite;\n"],"file":"favorite.js"}
+{"version":3,"sources":["../../../src/molecule/card/favorite.js"],"names":["Favorite","React","Component","constructor","props","context","handleFavoviteClick","bind","e","disabled","onFavoriteClick","stopPropagation","preventDefault","render","skin","favorite","addFavoriteToolTip","removeFavoriteToolTip","className","ariaLabel","primaryColor","darkColor","brandColor","toolTipView","style","showToolTip","blocFavorite","selected","color","checkIcon","removeFromFavorite","moreIcon","addToFavorite","Provider","childContextTypes","propTypes","PropTypes","string","bool","func","shape"],"mappings":"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","sourcesContent":["import React from 'react';\nimport PropTypes from 'prop-types';\nimport classnames from 'classnames';\nimport {get, isEmpty, noop} from 'lodash/fp';\nimport {\n  NovaCompositionNavigationMore as MoreIcon,\n  NovaCompositionCoorpacademyCheck as CheckIcon\n} from '@coorpacademy/nova-icons';\nimport Provider from '../../atom/provider';\nimport style from './favorite.css';\n\nclass Favorite extends React.Component {\n  static propTypes = {\n    className: PropTypes.string,\n    favorite: PropTypes.bool,\n    disabled: PropTypes.bool,\n    addFavoriteToolTip: PropTypes.string,\n    removeFavoriteToolTip: PropTypes.string,\n    onFavoriteClick: PropTypes.func,\n    'aria-label': PropTypes.shape({\n      favorite: PropTypes.string,\n      addToFavorite: PropTypes.string,\n      removeFromFavorite: PropTypes.string\n    })\n  };\n\n  static contextTypes = {\n    skin: Provider.childContextTypes.skin\n  };\n\n  constructor(props, context) {\n    super(props, context);\n    this.handleFavoviteClick = this.handleFavoviteClick.bind(this);\n  }\n\n  handleFavoviteClick(e) {\n    const {disabled, onFavoriteClick = noop} = this.props;\n    e.stopPropagation();\n    e.preventDefault();\n    if (!disabled) onFavoriteClick(e);\n  }\n\n  render() {\n    const {skin} = this.context;\n    const {\n      favorite,\n      addFavoriteToolTip,\n      removeFavoriteToolTip,\n      className,\n      'aria-label': ariaLabel = {}\n    } = this.props;\n\n    const primaryColor = get('common.primary', skin);\n    const darkColor = get('common.dark', skin);\n    const brandColor = get('common.brand', skin);\n    const toolTipView =\n      !isEmpty(removeFavoriteToolTip) && !isEmpty(addFavoriteToolTip) ? (\n        <div className={style.showToolTip}>\n          <span>{favorite ? removeFavoriteToolTip : addFavoriteToolTip}</span>\n        </div>\n      ) : null;\n\n    return (\n      <div className={style.blocFavorite}>\n        {toolTipView}\n        <div\n          data-name=\"favorite\"\n          aria-label={ariaLabel.favorite}\n          className={classnames(style.favorite, className, favorite && style.selected)}\n          onClick={this.handleFavoviteClick}\n          style={{\n            color: primaryColor\n          }}\n        >\n          {favorite ? (\n            <CheckIcon\n              className={style.checkIcon}\n              color={brandColor}\n              width={13}\n              height={13}\n              aria-label={ariaLabel.removeFromFavorite}\n            />\n          ) : (\n            <MoreIcon\n              className={style.moreIcon}\n              color={darkColor}\n              width={13}\n              height={13}\n              aria-label={ariaLabel.addToFavorite}\n            />\n          )}\n        </div>\n      </div>\n    );\n  }\n}\n\nexport default Favorite;\n"],"file":"favorite.js"}

package/lib/molecule/card/index.js

@@ -54,7 +54,8 @@ exports.THEMES = THEMES;
 const CardBackground = ({
   type,
   image,
-  empty
+  empty,
+  'aria-label': ariaLabel
 }, {
   skin
 }) => {
@@ -86,6 +87,7 @@ const CardBackground = ({
         className: _style.default.imageWrapper
       }, /*#__PURE__*/_react.default.createElement("div", {
         "data-name": "cover",
+        "aria-label": ariaLabel,
         style: {
           backgroundColor: iconColor,
           backgroundImage: `url('${image}')`
@@ -98,6 +100,7 @@ const CardBackground = ({
       className: _style.default.imageWrapper
     }, /*#__PURE__*/_react.default.createElement("div", {
       "data-name": "cover",
+      "aria-label": ariaLabel,
       style: {
         backgroundColor: iconColor
       },
@@ -113,6 +116,7 @@ const CardBackground = ({
     className: (0, _classnames.default)(_style.default.imageWrapper, type === 'chapter' ? _style.default.chapterImageWrapper : null)
   }, /*#__PURE__*/_react.default.createElement("div", {
     "data-name": "cover",
+    "aria-label": ariaLabel,
     className: _style.default.image,
     style: {
       backgroundColor: primaryColor,
@@ -127,7 +131,8 @@ CardBackground.contextTypes = {
 CardBackground.propTypes = process.env.NODE_ENV !== "production" ? {
   type: _propTypes.default.string,
   image: _propTypes.default.string,
-  empty: _propTypes.default.bool
+  empty: _propTypes.default.bool,
+  'aria-label': _propTypes.default.string
 } : {};
 const Card = (0, _react.memo)(function Card(props, context) {
   const {
@@ -153,7 +158,15 @@ const Card = (0, _react.memo)(function Card(props, context) {
     notification,
     badgeCategory,
     badgeLabel,
-    theme = 'default'
+    theme = 'default',
+    'aria-label': cardArialabel,
+    'background-aria-label': backgroundAriaLabel,
+    'favorite-aria-label': favoriteAriaLabel,
+    'selectable-aria-label': selectableAriaLabel,
+    'customer-aria-label': customerAriaLabel,
+    'badge-aria-label': badgeAriaLabel,
+    'disabled-aria-label': disabledArialabel,
+    'card-content-aria-label': cardContentLabelAriaLabel
   } = props;
   const empty = (0, _isEmpty2.default)((0, _pick2.default)(['title', 'type', 'author', 'image'], props));
   const primaryColor = (0, _get2.default)('common.primary', skin);
@@ -188,24 +201,29 @@ const Card = (0, _react.memo)(function Card(props, context) {
     "data-lock": disabled,
     "data-type": getType(type),
     disabled: disabled,
-    onClick: handleClick
+    onClick: handleClick,
+    "aria-label": cardArialabel
   }, /*#__PURE__*/_react.default.createElement(CardBackground, {
     type: type,
     image: image,
-    empty: empty
+    empty: empty,
+    "aria-label": backgroundAriaLabel
   }), (0, _isUndefined2.default)(isSelected) && !(0, _isUndefined2.default)(favorite) ? /*#__PURE__*/_react.default.createElement(_favorite.default, {
     className: _style.default.favorite,
     favorite: favorite,
     disabled: disabled,
     onFavoriteClick: onFavoriteClick,
     addFavoriteToolTip: addFavoriteToolTip,
-    removeFavoriteToolTip: removeFavoriteToolTip
+    removeFavoriteToolTip: removeFavoriteToolTip,
+    "aria-label": favoriteAriaLabel
   }) : null, /*#__PURE__*/_react.default.createElement(_selectable.default, {
-    isSelected: isSelected
+    isSelected: isSelected,
+    "aria-label": selectableAriaLabel
   }), notification ? /*#__PURE__*/_react.default.createElement(_notification.default, notification) : null, customer ? /*#__PURE__*/_react.default.createElement(_customer.default, _extends({}, customer, {
     theme: theme,
     type: type,
-    disabled: disabled
+    disabled: disabled,
+    "aria-label": customerAriaLabel
   })) : null, /*#__PURE__*/_react.default.createElement(_cardContent.default, {
     mode: _cardContent.MODES.CARD,
     adaptiv: adaptiv,
@@ -218,12 +236,15 @@ const Card = (0, _react.memo)(function Card(props, context) {
     type: type,
     badgeCategory: badgeCategory,
     badgeLabel: badgeLabel,
-    theme: theme
+    theme: theme,
+    "aria-label": cardContentLabelAriaLabel
   }), badge ? /*#__PURE__*/_react.default.createElement("div", {
     className: _style.default.badge,
-    style: inlineBadgeStyle
+    style: inlineBadgeStyle,
+    "aria-label": badgeAriaLabel
   }, badge) : null, disabled ? /*#__PURE__*/_react.default.createElement("div", {
-    className: _style.default.lockWrapper
+    className: _style.default.lockWrapper,
+    "aria-label": disabledArialabel
   }, lock) : null);
 });
 Card.contextTypes = {
@@ -249,7 +270,15 @@ Card.propTypes = process.env.NODE_ENV !== "production" ? {
   notification: _propTypes.default.shape(_notification.default.propTypes),
   badgeCategory: _cardContent.default.propTypes.badgeCategory,
   badgeLabel: _cardContent.default.propTypes.badgeLabel,
-  theme: _propTypes.default.oneOf((0, _keys2.default)(THEMES))
+  theme: _propTypes.default.oneOf((0, _keys2.default)(THEMES)),
+  'aria-label': _propTypes.default.string,
+  'background-aria-label': _propTypes.default.string,
+  'favorite-aria-label': _favorite.default.propTypes['aria-label'],
+  'selectable-aria-label': _selectable.default.propTypes['aria-label'],
+  'customer-aria-label': _customer.default.propTypes['aria-label'],
+  'badge-aria-label': _propTypes.default.string,
+  'disabled-aria-label': _propTypes.default.string,
+  'card-content-aria-label': _cardContent.default.propTypes['aria-label']
 } : {};
 var _default = Card;
 exports.default = _default;