@coorpacademy/components 10.5.7-alpha.6.5 → 10.6.0

package/lib/atom/select/style.css

@@ -10,6 +10,10 @@
 @value white from colors;
 @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;
@@ -23,7 +27,11 @@
   composes: default;
 }
 
-.default label {
+.selectWrapper {
+  position: relative;
+}
+
+.default .selectWrapper {
   display: flex;
   align-items: center;
   height: 50px;
@@ -41,20 +49,16 @@
   width: 180px;
 }
 
-.label {
+.selectSpan {
   display: none;
-  position: absolute;
+  position: relative;
+  z-index: 10;
   white-space: nowrap;
-  overflow: hidden;
-  left: 0;
-  right: 0;
-  bottom: 0;
   pointer-events: none;
-  text-overflow: ellipsis;
   height: 18px;
 }
 
-.default select {
+.default .selectBox {
   font-family: "Gilroy";
   text-transform: none;
   padding: 0 15px;
@@ -68,6 +72,22 @@
   outline: none;
   appearance: none;
   cursor: pointer;
+  position: absolute;
+  left: 0;
+  right: 0;
+  bottom: 0;
+}
+
+.selectOption,
+.no-label .selectWrapper{
+  min-width: min-content;
+  height: min-content;
+}
+
+.player .selectWrapper {
+  min-width: min-content;
+  height: min-content;
+  margin-right: 0;
 }
 
 .modified select {
@@ -112,6 +132,23 @@
   pointer-events: none;
   width: 12px;
   height: 12px;
+  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 {
@@ -121,7 +158,7 @@
   }
 }
 
-.default select[multiple] {
+.default .selectBox[multiple] {
   padding: 0;
   height: 80px;
 }
@@ -130,7 +167,7 @@
   Filter
 */
 
-.filter label {
+.filter .selectWrapper {
   display: flex;
   align-items: center;
   position: relative;
@@ -140,7 +177,7 @@
   margin: 0;
 }
 
-.filter .label {
+.filter .selectSpan {
   display: block;
   padding: 15px 30px 15px 15px;
   font-size: 12px;
@@ -157,7 +194,9 @@
   margin-bottom: 10px;
 }
 
-.filter select {
+.filter .selectBox {
+  position: absolute;
+  top: 27px;
   display: block;
   width: 100%;
   height: 50px;
@@ -186,57 +225,118 @@
   position: relative;
 }
 
-.no-label label {
+.no-label .selectWrapper {
   display: flex;
   align-items: center;
-  height: 44px;
+  min-height: 54px;
   position: relative;
   flex-grow: 0;
 }
 
-.no-label .label {
+.noLabelCommon {
   display: block;
   padding: 0 30px 0 10px;
   font-size: 14px;
+  height: 54px;
+  line-height: 52px;
+  box-sizing: border-box;
+}
+
+div.default label.selectWrapper span.longLabel {
+    min-width: 230px;
+    max-width: 280px;
+    white-space: pre-wrap;
+    line-height: 22px;
+    padding-top: 15px;
+    padding-bottom: 15px;
+    height: auto;
+    border: none;
+}
+
+div:not(.player) .noLabelCommon.selectSpan {
   border: 1px solid light;
   background: white;
   border-radius: 2px;
-  height: 44px;
-  line-height: 42px;
-  box-sizing: border-box;
+  min-width: min-content;
+  width: 100%;
+}
+
+div.player .noLabelCommon.selectSpan {
+  box-shadow: 0px 4px 16px box_shadow_light_dark;
+  border-radius: 8px;
+  min-width: min-content;
+  width: 100%;
   white-space: nowrap;
-  text-overflow: ellipsis;
+  color: cm_blue_900;
+  border-width: 0;
+}
+
+div.player:hover span.selectSpan {
+  box-shadow: 0px 4px 16px box_shadow_medium_dark;
 }
 
-.no-label select {
+.no-label .selectBox {
   font-family: "Gilroy";
   text-transform: none;
   padding: 0 15px;
-  height: 44px;
+  height: 54px;
   border-radius: 2px;
-  font-size: 16px;
+  font-size: 14px;
   color: black;
   font-weight: normal;
   margin-left: 0;
   width: 230px;
+  max-width: 280px;
   cursor: pointer;
   background: white;
   border: 2px solid xtraLightGrey;
 }
 
 @media mobile {
-  .no-label select {
-    height: 100%;
-    width: 100%;
+  div.player .selectBox {
+    min-width: 0;
+  }
+
+  .no-label .selectBox {
     margin-left: 0;
     border-radius: 0;
+    position: absolute;
+    left: 0;
+    right: 0;
+    bottom: 0;
   }
 
-  .no-label label {
+  .no-label .selectWrapper {
     display: block;
     margin-right: 0;
     width: 100%;
-    height: 44px;
+    min-height: 44px;
+    height: min-content;
+    min-width: 250px;
+    max-width: 280px;
+  }
+
+  .player .noLabelCommon {
+    height: min-content;
+  }
+
+  div.player .noLabelCommon.selectSpan {
+    min-width: 250px;
+    max-width: 280px;
+    white-space: pre-wrap;
+  }
+
+  .noLabelCommon.longLabel {
+    line-height: 22px;
+    height: 100%;
+  }
+
+  .player.default .selectBox {
+    position: absolute;
+    top: 0px;
+    left: 0px;
+    width: 100%;
+    height: 100%;
   }
 }
 
@@ -248,12 +348,16 @@
   composes: no-label;
 }
 
-.invalid label {
+.invalid .player {
+  color: cm_blue_900;
+}
+
+.invalid .selectWrapper {
   height: 54px;
   color: black;
 }
 
-.invalid .label {
+.invalid .selectSpan {
   font-size: 15px;
   font-weight: 700;
   border: 2px solid;
@@ -271,10 +375,11 @@
   width: 150px;
 }
 
-.mooc label {
+.mooc .selectWrapper {
   margin: 0;
   height: 35px;
   border: 0;
+  width: inherit;
 }
 
 .mooc select {
@@ -307,11 +412,11 @@
   composes: no-label;
 }
 
-.question label {
+.question .selectWrapper {
   height: 54px;
 }
 
-.question .label {
+.question .selectSpan {
   font-size: 15px;
   font-weight: 700;
   border: 2px solid;
@@ -328,7 +433,7 @@
   margin-bottom: 10px;
 }
 
-.sort label {
+.sort .selectWrapper {
   display: flex;
   align-items: center;
   position: relative;
@@ -338,7 +443,7 @@
   margin: 0;
 }
 
-.sort .label {
+.sort .selectSpan {
   display: block;
   padding: 15px 30px 15px 15px;
   font-size: 12px;
@@ -379,16 +484,59 @@
   composes: no-label;
 }
 
+/* 
+  Player
+*/
+
+.player {
+  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 select {
+.header .selectBox {
+  margin-left: 0;
+}
+
+.default .selectWrapper select.selectBox {
+  max-width: 280px;
+  width: inherit;
+  border-radius: 8px;
+  padding: 0;
+  height: 100%;
+  top: 0;
+}
+
+.header .title,
+.header .selectWrapper span.selectSpan {
+  min-width: 150px;
+  color: transparent;
+}
+
+.header .selectWrapper select.selectBox {
+  padding-left: 10px;
+  border-radius: 2px;
+  padding-right: 30px;
+}
+
+.header .selectBox {
   background-color: light;
   border: 0;
   font-weight: 700;
@@ -420,7 +568,7 @@
   composes: no-label;
 }
 
-.template select {
+.template .selectBox {
   width: auto;
   height: 54px;
   padding: 0 50px 0 0;
@@ -428,22 +576,22 @@
   max-width: 100%;
 }
 
-.template .label {
+.template .selectSpan {
   font-size: 15px;
   font-weight: 700;
   height: 54px;
   line-height: 52px;
 }
 
-.selected.template .label {
+.selected.template .selectSpan {
   border: 1px solid;
 }
 
-.unselected.template .label {
+.unselected.template .selectSpan {
   border: 1px solid color(black lightness(85%));
 }
 
-.template label {
+.template .selectWrapper {
   display: block;
   width: auto;
   margin-right: 0;

package/lib/atom/select/test/fixtures/player.js

@@ -0,0 +1,21 @@
+"use strict";
+
+exports.__esModule = true;
+exports.default = void 0;
+
+var _defaultsDeep2 = _interopRequireDefault(require("lodash/fp/defaultsDeep"));
+
+var _default2 = _interopRequireDefault(require("./default"));
+
+function _interopRequireDefault(obj) { return obj && obj.__esModule ? obj : { default: obj }; }
+
+const {
+  props
+} = _default2.default;
+var _default = {
+  props: (0, _defaultsDeep2.default)(props, {
+    theme: 'player'
+  })
+};
+exports.default = _default;
+//# sourceMappingURL=player.js.map

package/lib/atom/select/test/fixtures/player.js.map

@@ -0,0 +1 @@
+{"version":3,"sources":["../../../../../src/atom/select/test/fixtures/player.js"],"names":["props","Default","theme"],"mappings":";;;;;;;AACA;;;;AAEA,MAAM;AAACA,EAAAA;AAAD,IAAUC,iBAAhB;eAEe;AACbD,EAAAA,KAAK,EAAE,4BAAaA,KAAb,EAAoB;AACzBE,IAAAA,KAAK,EAAE;AADkB,GAApB;AADM,C","sourcesContent":["import {defaultsDeep} from 'lodash/fp';\nimport Default from './default';\n\nconst {props} = Default;\n\nexport default {\n  props: defaultsDeep(props, {\n    theme: 'player'\n  })\n};\n"],"file":"player.js"}

package/lib/atom/select/test/fixtures.js

@@ -26,6 +26,8 @@ var _multipleSelected = _interopRequireDefault(require("./fixtures/multiple-sele
 
 var _multiple = _interopRequireDefault(require("./fixtures/multiple"));
 
+var _player = _interopRequireDefault(require("./fixtures/player"));
+
 var _question = _interopRequireDefault(require("./fixtures/question"));
 
 var _requiredWithTitle = _interopRequireDefault(require("./fixtures/required-with-title"));
@@ -57,6 +59,7 @@ function _interopRequireDefault(obj) { return obj && obj.__esModule ? obj : { de
 (0, _ava.default)('Atom › AtomSelect › Mooc › should be rendered', _renderComponent.default, _.default, _mooc.default);
 (0, _ava.default)('Atom › AtomSelect › MultipleSelected › should be rendered', _renderComponent.default, _.default, _multipleSelected.default);
 (0, _ava.default)('Atom › AtomSelect › Multiple › should be rendered', _renderComponent.default, _.default, _multiple.default);
+(0, _ava.default)('Atom › AtomSelect › Player › should be rendered', _renderComponent.default, _.default, _player.default);
 (0, _ava.default)('Atom › AtomSelect › Question › should be rendered', _renderComponent.default, _.default, _question.default);
 (0, _ava.default)('Atom › AtomSelect › RequiredWithTitle › should be rendered', _renderComponent.default, _.default, _requiredWithTitle.default);
 (0, _ava.default)('Atom › AtomSelect › Required › should be rendered', _renderComponent.default, _.default, _required.default);

package/lib/atom/select/test/fixtures.js.map

@@ -1 +1 @@
-{"version":3,"sources":["../../../../src/atom/select/test/fixtures.js"],"names":["t","pass","AtomSelect","propTypes","value","key","not","undefined","renderComponentMacro","fixtureDefault","fixtureDisabled","fixtureError","fixtureFilter","fixtureInvalid","fixtureModified","fixtureMooc","fixtureMultipleSelected","fixtureMultiple","fixtureQuestion","fixtureRequiredWithTitle","fixtureRequired","fixtureSort","fixtureTemplate","fixtureThematiquesLong","fixtureThematiques"],"mappings":";;AAAA;;AACA;;AACA;;AACA;;AACA;;AACA;;AACA;;AACA;;AACA;;AACA;;AACA;;AACA;;AACA;;AACA;;AACA;;AACA;;AACA;;AACA;;AACA;;AACA;;;;AAEA,kBAAK,iDAAL,EAAwDA,CAAC,IAAI;AAC3DA,EAAAA,CAAC,CAACC,IAAF;AACA,wBAAQC,UAAWC,SAAnB,EAA8B,CAACC,KAAD,EAAQC,GAAR,KAAgB;AAC5CL,IAAAA,CAAC,CAACM,GAAF,CAAMF,KAAN,EAAaG,SAAb,EAAyB,2CAA0CF,GAAI,mEAAvE;AACD,GAFD;AAGD,CALD;AAOA,kBAAK,kDAAL,EAAyDG,wBAAzD,EAA+EN,SAA/E,EAA2FO,gBAA3F;AACA,kBAAK,mDAAL,EAA0DD,wBAA1D,EAAgFN,SAAhF,EAA4FQ,iBAA5F;AACA,kBAAK,gDAAL,EAAuDF,wBAAvD,EAA6EN,SAA7E,EAAyFS,cAAzF;AACA,kBAAK,iDAAL,EAAwDH,wBAAxD,EAA8EN,SAA9E,EAA0FU,eAA1F;AACA,kBAAK,kDAAL,EAAyDJ,wBAAzD,EAA+EN,SAA/E,EAA2FW,gBAA3F;AACA,kBAAK,mDAAL,EAA0DL,wBAA1D,EAAgFN,SAAhF,EAA4FY,iBAA5F;AACA,kBAAK,+CAAL,EAAsDN,wBAAtD,EAA4EN,SAA5E,EAAwFa,aAAxF;AACA,kBAAK,2DAAL,EAAkEP,wBAAlE,EAAwFN,SAAxF,EAAoGc,yBAApG;AACA,kBAAK,mDAAL,EAA0DR,wBAA1D,EAAgFN,SAAhF,EAA4Fe,iBAA5F;AACA,kBAAK,mDAAL,EAA0DT,wBAA1D,EAAgFN,SAAhF,EAA4FgB,iBAA5F;AACA,kBAAK,4DAAL,EAAmEV,wBAAnE,EAAyFN,SAAzF,EAAqGiB,0BAArG;AACA,kBAAK,mDAAL,EAA0DX,wBAA1D,EAAgFN,SAAhF,EAA4FkB,iBAA5F;AACA,kBAAK,+CAAL,EAAsDZ,wBAAtD,EAA4EN,SAA5E,EAAwFmB,aAAxF;AACA,kBAAK,mDAAL,EAA0Db,wBAA1D,EAAgFN,SAAhF,EAA4FoB,iBAA5F;AACA,kBAAK,0DAAL,EAAiEd,wBAAjE,EAAuFN,SAAvF,EAAmGqB,wBAAnG;AACA,kBAAK,sDAAL,EAA6Df,wBAA7D,EAAmFN,SAAnF,EAA+FsB,oBAA/F","sourcesContent":["import test from 'ava';\nimport forEach from 'lodash/forEach';\nimport renderComponentMacro from '../../../test/helpers/render-component';\nimport AtomSelect from '..';\nimport fixtureDefault from './fixtures/default';\nimport fixtureDisabled from './fixtures/disabled';\nimport fixtureError from './fixtures/error';\nimport fixtureFilter from './fixtures/filter';\nimport fixtureInvalid from './fixtures/invalid';\nimport fixtureModified from './fixtures/modified';\nimport fixtureMooc from './fixtures/mooc';\nimport fixtureMultipleSelected from './fixtures/multiple-selected';\nimport fixtureMultiple from './fixtures/multiple';\nimport fixtureQuestion from './fixtures/question';\nimport fixtureRequiredWithTitle from './fixtures/required-with-title';\nimport fixtureRequired from './fixtures/required';\nimport fixtureSort from './fixtures/sort';\nimport fixtureTemplate from './fixtures/template';\nimport fixtureThematiquesLong from './fixtures/thematiques-long';\nimport fixtureThematiques from './fixtures/thematiques';\n\ntest('Atom › AtomSelect > should have valid propTypes', t => {\n  t.pass();\n  forEach(AtomSelect.propTypes, (value, key) => {\n    t.not(value, undefined, `PropType for \"Atom.AtomSelect.propTypes.${key}\" may not be undefined. Did you mistype the propTypes definition?`);\n  });\n});\n\ntest('Atom › AtomSelect › Default › should be rendered', renderComponentMacro, AtomSelect, fixtureDefault);\ntest('Atom › AtomSelect › Disabled › should be rendered', renderComponentMacro, AtomSelect, fixtureDisabled);\ntest('Atom › AtomSelect › Error › should be rendered', renderComponentMacro, AtomSelect, fixtureError);\ntest('Atom › AtomSelect › Filter › should be rendered', renderComponentMacro, AtomSelect, fixtureFilter);\ntest('Atom › AtomSelect › Invalid › should be rendered', renderComponentMacro, AtomSelect, fixtureInvalid);\ntest('Atom › AtomSelect › Modified › should be rendered', renderComponentMacro, AtomSelect, fixtureModified);\ntest('Atom › AtomSelect › Mooc › should be rendered', renderComponentMacro, AtomSelect, fixtureMooc);\ntest('Atom › AtomSelect › MultipleSelected › should be rendered', renderComponentMacro, AtomSelect, fixtureMultipleSelected);\ntest('Atom › AtomSelect › Multiple › should be rendered', renderComponentMacro, AtomSelect, fixtureMultiple);\ntest('Atom › AtomSelect › Question › should be rendered', renderComponentMacro, AtomSelect, fixtureQuestion);\ntest('Atom › AtomSelect › RequiredWithTitle › should be rendered', renderComponentMacro, AtomSelect, fixtureRequiredWithTitle);\ntest('Atom › AtomSelect › Required › should be rendered', renderComponentMacro, AtomSelect, fixtureRequired);\ntest('Atom › AtomSelect › Sort › should be rendered', renderComponentMacro, AtomSelect, fixtureSort);\ntest('Atom › AtomSelect › Template › should be rendered', renderComponentMacro, AtomSelect, fixtureTemplate);\ntest('Atom › AtomSelect › ThematiquesLong › should be rendered', renderComponentMacro, AtomSelect, fixtureThematiquesLong);\ntest('Atom › AtomSelect › Thematiques › should be rendered', renderComponentMacro, AtomSelect, fixtureThematiques);\n"],"file":"fixtures.js"}
+{"version":3,"sources":["../../../../src/atom/select/test/fixtures.js"],"names":["t","pass","AtomSelect","propTypes","value","key","not","undefined","renderComponentMacro","fixtureDefault","fixtureDisabled","fixtureError","fixtureFilter","fixtureInvalid","fixtureModified","fixtureMooc","fixtureMultipleSelected","fixtureMultiple","fixturePlayer","fixtureQuestion","fixtureRequiredWithTitle","fixtureRequired","fixtureSort","fixtureTemplate","fixtureThematiquesLong","fixtureThematiques"],"mappings":";;AAAA;;AACA;;AACA;;AACA;;AACA;;AACA;;AACA;;AACA;;AACA;;AACA;;AACA;;AACA;;AACA;;AACA;;AACA;;AACA;;AACA;;AACA;;AACA;;AACA;;AACA;;;;AAEA,kBAAK,iDAAL,EAAwDA,CAAC,IAAI;AAC3DA,EAAAA,CAAC,CAACC,IAAF;AACA,wBAAQC,UAAWC,SAAnB,EAA8B,CAACC,KAAD,EAAQC,GAAR,KAAgB;AAC5CL,IAAAA,CAAC,CAACM,GAAF,CAAMF,KAAN,EAAaG,SAAb,EAAyB,2CAA0CF,GAAI,mEAAvE;AACD,GAFD;AAGD,CALD;AAOA,kBAAK,kDAAL,EAAyDG,wBAAzD,EAA+EN,SAA/E,EAA2FO,gBAA3F;AACA,kBAAK,mDAAL,EAA0DD,wBAA1D,EAAgFN,SAAhF,EAA4FQ,iBAA5F;AACA,kBAAK,gDAAL,EAAuDF,wBAAvD,EAA6EN,SAA7E,EAAyFS,cAAzF;AACA,kBAAK,iDAAL,EAAwDH,wBAAxD,EAA8EN,SAA9E,EAA0FU,eAA1F;AACA,kBAAK,kDAAL,EAAyDJ,wBAAzD,EAA+EN,SAA/E,EAA2FW,gBAA3F;AACA,kBAAK,mDAAL,EAA0DL,wBAA1D,EAAgFN,SAAhF,EAA4FY,iBAA5F;AACA,kBAAK,+CAAL,EAAsDN,wBAAtD,EAA4EN,SAA5E,EAAwFa,aAAxF;AACA,kBAAK,2DAAL,EAAkEP,wBAAlE,EAAwFN,SAAxF,EAAoGc,yBAApG;AACA,kBAAK,mDAAL,EAA0DR,wBAA1D,EAAgFN,SAAhF,EAA4Fe,iBAA5F;AACA,kBAAK,iDAAL,EAAwDT,wBAAxD,EAA8EN,SAA9E,EAA0FgB,eAA1F;AACA,kBAAK,mDAAL,EAA0DV,wBAA1D,EAAgFN,SAAhF,EAA4FiB,iBAA5F;AACA,kBAAK,4DAAL,EAAmEX,wBAAnE,EAAyFN,SAAzF,EAAqGkB,0BAArG;AACA,kBAAK,mDAAL,EAA0DZ,wBAA1D,EAAgFN,SAAhF,EAA4FmB,iBAA5F;AACA,kBAAK,+CAAL,EAAsDb,wBAAtD,EAA4EN,SAA5E,EAAwFoB,aAAxF;AACA,kBAAK,mDAAL,EAA0Dd,wBAA1D,EAAgFN,SAAhF,EAA4FqB,iBAA5F;AACA,kBAAK,0DAAL,EAAiEf,wBAAjE,EAAuFN,SAAvF,EAAmGsB,wBAAnG;AACA,kBAAK,sDAAL,EAA6DhB,wBAA7D,EAAmFN,SAAnF,EAA+FuB,oBAA/F","sourcesContent":["import test from 'ava';\nimport forEach from 'lodash/forEach';\nimport renderComponentMacro from '../../../test/helpers/render-component';\nimport AtomSelect from '..';\nimport fixtureDefault from './fixtures/default';\nimport fixtureDisabled from './fixtures/disabled';\nimport fixtureError from './fixtures/error';\nimport fixtureFilter from './fixtures/filter';\nimport fixtureInvalid from './fixtures/invalid';\nimport fixtureModified from './fixtures/modified';\nimport fixtureMooc from './fixtures/mooc';\nimport fixtureMultipleSelected from './fixtures/multiple-selected';\nimport fixtureMultiple from './fixtures/multiple';\nimport fixturePlayer from './fixtures/player';\nimport fixtureQuestion from './fixtures/question';\nimport fixtureRequiredWithTitle from './fixtures/required-with-title';\nimport fixtureRequired from './fixtures/required';\nimport fixtureSort from './fixtures/sort';\nimport fixtureTemplate from './fixtures/template';\nimport fixtureThematiquesLong from './fixtures/thematiques-long';\nimport fixtureThematiques from './fixtures/thematiques';\n\ntest('Atom › AtomSelect > should have valid propTypes', t => {\n  t.pass();\n  forEach(AtomSelect.propTypes, (value, key) => {\n    t.not(value, undefined, `PropType for \"Atom.AtomSelect.propTypes.${key}\" may not be undefined. Did you mistype the propTypes definition?`);\n  });\n});\n\ntest('Atom › AtomSelect › Default › should be rendered', renderComponentMacro, AtomSelect, fixtureDefault);\ntest('Atom › AtomSelect › Disabled › should be rendered', renderComponentMacro, AtomSelect, fixtureDisabled);\ntest('Atom › AtomSelect › Error › should be rendered', renderComponentMacro, AtomSelect, fixtureError);\ntest('Atom › AtomSelect › Filter › should be rendered', renderComponentMacro, AtomSelect, fixtureFilter);\ntest('Atom › AtomSelect › Invalid › should be rendered', renderComponentMacro, AtomSelect, fixtureInvalid);\ntest('Atom › AtomSelect › Modified › should be rendered', renderComponentMacro, AtomSelect, fixtureModified);\ntest('Atom › AtomSelect › Mooc › should be rendered', renderComponentMacro, AtomSelect, fixtureMooc);\ntest('Atom › AtomSelect › MultipleSelected › should be rendered', renderComponentMacro, AtomSelect, fixtureMultipleSelected);\ntest('Atom › AtomSelect › Multiple › should be rendered', renderComponentMacro, AtomSelect, fixtureMultiple);\ntest('Atom › AtomSelect › Player › should be rendered', renderComponentMacro, AtomSelect, fixturePlayer);\ntest('Atom › AtomSelect › Question › should be rendered', renderComponentMacro, AtomSelect, fixtureQuestion);\ntest('Atom › AtomSelect › RequiredWithTitle › should be rendered', renderComponentMacro, AtomSelect, fixtureRequiredWithTitle);\ntest('Atom › AtomSelect › Required › should be rendered', renderComponentMacro, AtomSelect, fixtureRequired);\ntest('Atom › AtomSelect › Sort › should be rendered', renderComponentMacro, AtomSelect, fixtureSort);\ntest('Atom › AtomSelect › Template › should be rendered', renderComponentMacro, AtomSelect, fixtureTemplate);\ntest('Atom › AtomSelect › ThematiquesLong › should be rendered', renderComponentMacro, AtomSelect, fixtureThematiquesLong);\ntest('Atom › AtomSelect › Thematiques › should be rendered', renderComponentMacro, AtomSelect, fixtureThematiques);\n"],"file":"fixtures.js"}

package/lib/atom/select/test/select.js

@@ -0,0 +1,62 @@
+"use strict";
+
+var _browserEnv = _interopRequireDefault(require("browser-env"));
+
+var _ava = _interopRequireDefault(require("ava"));
+
+var _react = _interopRequireDefault(require("react"));
+
+var _enzyme = require("enzyme");
+
+var _cloneDeep = _interopRequireDefault(require("lodash/fp/cloneDeep"));
+
+var _noop = _interopRequireDefault(require("lodash/fp/noop"));
+
+var _enzymeAdapterReact = _interopRequireDefault(require("enzyme-adapter-react-16"));
+
+var _ = _interopRequireDefault(require(".."));
+
+var _player = _interopRequireDefault(require("./fixtures/player"));
+
+function _interopRequireDefault(obj) { return obj && obj.__esModule ? obj : { default: obj }; }
+
+function _extends() { _extends = Object.assign || function (target) { for (var i = 1; i < arguments.length; i++) { var source = arguments[i]; for (var key in source) { if (Object.prototype.hasOwnProperty.call(source, key)) { target[key] = source[key]; } } } return target; }; return _extends.apply(this, arguments); }
+
+(0, _browserEnv.default)();
+(0, _enzyme.configure)({
+  adapter: new _enzymeAdapterReact.default()
+});
+(0, _ava.default)('classnames: should pass the styles pertinent to a player theme, text color: use skin color (selected, valid option, player)', t => {
+  const wrapper = (0, _enzyme.mount)( /*#__PURE__*/_react.default.createElement(_.default, _extends({}, _player.default.props, {
+    onChange: _noop.default
+  })));
+  const selectWrapper = wrapper.find('[data-name="select-wrapper"]');
+  t.true(selectWrapper.at(0).exists()); // should use skin color
+
+  t.deepEqual(selectWrapper.at(0).props().style, {
+    color: '#00B0FF'
+  });
+  const selectSpan = selectWrapper.at(0).find('[data-name="select-span"]');
+  t.true(selectSpan.at(0).exists());
+  t.is(selectSpan.at(0).props().className, 'select__selectSpan select__noLabelCommon');
+});
+(0, _ava.default)('text color: should not use skin color (selected, invalid option, player), long label', t => {
+  const withInvalid = (0, _cloneDeep.default)(_player.default.props);
+  withInvalid.options[1] = {
+    name: 'Lorem ipsum dolor sit amet, consectetuer adipiscing elit. Aenean.',
+    value: 'Lorem ipsum dolor sit amet, consectetuer adipiscing elit. Aenean.',
+    selected: true,
+    validOption: false
+  };
+  const wrapper = (0, _enzyme.mount)( /*#__PURE__*/_react.default.createElement(_.default, _extends({}, withInvalid, {
+    onChange: _noop.default
+  })));
+  const selectWrapper = wrapper.find('[data-name="select-wrapper"]');
+  t.true(selectWrapper.at(0).exists()); // should not use skin color
+
+  t.deepEqual(selectWrapper.at(0).props().style, {});
+  const selectSpan = selectWrapper.at(0).find('[data-name="select-span"]');
+  t.true(selectSpan.at(0).exists());
+  t.is(selectSpan.at(0).props().className, 'select__selectSpan select__noLabelCommon select__longLabel');
+});
+//# sourceMappingURL=select.js.map

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

@@ -0,0 +1 @@
+{"version":3,"sources":["../../../../src/atom/select/test/select.js"],"names":["adapter","Adapter","t","wrapper","playerFixture","props","noop","selectWrapper","find","true","at","exists","deepEqual","style","color","selectSpan","is","className","withInvalid","options","name","value","selected","validOption"],"mappings":";;AAAA;;AACA;;AACA;;AACA;;AACA;;AACA;;AACA;;AACA;;AACA;;;;;;AAEA;AACA,uBAAU;AAACA,EAAAA,OAAO,EAAE,IAAIC,2BAAJ;AAAV,CAAV;AAEA,kBAAK,6HAAL,EAAoIC,CAAC,IAAI;AACvI,QAAMC,OAAO,GAAG,iCAAM,6BAAC,SAAD,eAAYC,gBAAcC,KAA1B;AAAiC,IAAA,QAAQ,EAAEC;AAA3C,KAAN,CAAhB;AACA,QAAMC,aAAa,GAAGJ,OAAO,CAACK,IAAR,CAAa,8BAAb,CAAtB;AACAN,EAAAA,CAAC,CAACO,IAAF,CAAOF,aAAa,CAACG,EAAd,CAAiB,CAAjB,EAAoBC,MAApB,EAAP,EAHuI,CAIvI;;AACAT,EAAAA,CAAC,CAACU,SAAF,CAAYL,aAAa,CAACG,EAAd,CAAiB,CAAjB,EAAoBL,KAApB,GAA4BQ,KAAxC,EAA+C;AAC7CC,IAAAA,KAAK,EAAE;AADsC,GAA/C;AAGA,QAAMC,UAAU,GAAGR,aAAa,CAACG,EAAd,CAAiB,CAAjB,EAAoBF,IAApB,CAAyB,2BAAzB,CAAnB;AACAN,EAAAA,CAAC,CAACO,IAAF,CAAOM,UAAU,CAACL,EAAX,CAAc,CAAd,EAAiBC,MAAjB,EAAP;AACAT,EAAAA,CAAC,CAACc,EAAF,CAAKD,UAAU,CAACL,EAAX,CAAc,CAAd,EAAiBL,KAAjB,GAAyBY,SAA9B,EAAyC,0CAAzC;AACD,CAXD;AAaA,kBAAK,sFAAL,EAA6Ff,CAAC,IAAI;AAChG,QAAMgB,WAAW,GAAG,wBAAUd,gBAAcC,KAAxB,CAApB;AACAa,EAAAA,WAAW,CAACC,OAAZ,CAAoB,CAApB,IAAyB;AACvBC,IAAAA,IAAI,EAAE,mEADiB;AAEvBC,IAAAA,KAAK,EAAE,mEAFgB;AAGvBC,IAAAA,QAAQ,EAAE,IAHa;AAIvBC,IAAAA,WAAW,EAAE;AAJU,GAAzB;AAMA,QAAMpB,OAAO,GAAG,iCAAM,6BAAC,SAAD,eAAYe,WAAZ;AAAyB,IAAA,QAAQ,EAAEZ;AAAnC,KAAN,CAAhB;AACA,QAAMC,aAAa,GAAGJ,OAAO,CAACK,IAAR,CAAa,8BAAb,CAAtB;AACAN,EAAAA,CAAC,CAACO,IAAF,CAAOF,aAAa,CAACG,EAAd,CAAiB,CAAjB,EAAoBC,MAApB,EAAP,EAVgG,CAWhG;;AACAT,EAAAA,CAAC,CAACU,SAAF,CAAYL,aAAa,CAACG,EAAd,CAAiB,CAAjB,EAAoBL,KAApB,GAA4BQ,KAAxC,EAA+C,EAA/C;AACA,QAAME,UAAU,GAAGR,aAAa,CAACG,EAAd,CAAiB,CAAjB,EAAoBF,IAApB,CAAyB,2BAAzB,CAAnB;AACAN,EAAAA,CAAC,CAACO,IAAF,CAAOM,UAAU,CAACL,EAAX,CAAc,CAAd,EAAiBC,MAAjB,EAAP;AACAT,EAAAA,CAAC,CAACc,EAAF,CACED,UAAU,CAACL,EAAX,CAAc,CAAd,EAAiBL,KAAjB,GAAyBY,SAD3B,EAEE,4DAFF;AAID,CAnBD","sourcesContent":["import browserEnv from 'browser-env';\nimport test from 'ava';\nimport React from 'react';\nimport {mount, configure} from 'enzyme';\nimport cloneDeep from 'lodash/fp/cloneDeep';\nimport noop from 'lodash/fp/noop';\nimport Adapter from 'enzyme-adapter-react-16';\nimport Select from '..';\nimport playerFixture from './fixtures/player';\n\nbrowserEnv();\nconfigure({adapter: new Adapter()});\n\ntest('classnames: should pass the styles pertinent to a player theme, text color: use skin color (selected, valid option, player)', t => {\n  const wrapper = mount(<Select {...playerFixture.props} onChange={noop} />);\n  const selectWrapper = wrapper.find('[data-name=\"select-wrapper\"]');\n  t.true(selectWrapper.at(0).exists());\n  // should use skin color\n  t.deepEqual(selectWrapper.at(0).props().style, {\n    color: '#00B0FF'\n  });\n  const selectSpan = selectWrapper.at(0).find('[data-name=\"select-span\"]');\n  t.true(selectSpan.at(0).exists());\n  t.is(selectSpan.at(0).props().className, 'select__selectSpan select__noLabelCommon');\n});\n\ntest('text color: should not use skin color (selected, invalid option, player), long label', t => {\n  const withInvalid = cloneDeep(playerFixture.props);\n  withInvalid.options[1] = {\n    name: 'Lorem ipsum dolor sit amet, consectetuer adipiscing elit. Aenean.',\n    value: 'Lorem ipsum dolor sit amet, consectetuer adipiscing elit. Aenean.',\n    selected: true,\n    validOption: false\n  };\n  const wrapper = mount(<Select {...withInvalid} onChange={noop} />);\n  const selectWrapper = wrapper.find('[data-name=\"select-wrapper\"]');\n  t.true(selectWrapper.at(0).exists());\n  // should not use skin color\n  t.deepEqual(selectWrapper.at(0).props().style, {});\n  const selectSpan = selectWrapper.at(0).find('[data-name=\"select-span\"]');\n  t.true(selectSpan.at(0).exists());\n  t.is(\n    selectSpan.at(0).props().className,\n    'select__selectSpan select__noLabelCommon select__longLabel'\n  );\n});\n"],"file":"select.js"}

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;