@coorpacademy/components 10.5.7-alpha.5 → 10.5.7-alpha.9

package/lib/atom/select/index.js

@@ -3,8 +3,14 @@
 exports.__esModule = true;
 exports.default = exports.SelectOptionPropTypes = void 0;
 
+var _size2 = _interopRequireDefault(require("lodash/fp/size"));
+
+var _includes2 = _interopRequireDefault(require("lodash/fp/includes"));
+
 var _filter2 = _interopRequireDefault(require("lodash/fp/filter"));
 
+var _getOr2 = _interopRequireDefault(require("lodash/fp/getOr"));
+
 var _get2 = _interopRequireDefault(require("lodash/fp/get"));
 
 var _map2 = _interopRequireDefault(require("lodash/fp/map"));
@@ -33,6 +39,8 @@ function _interopRequireWildcard(obj) { if (obj && obj.__esModule) { return obj;
 
 function _interopRequireDefault(obj) { return obj && obj.__esModule ? obj : { default: obj }; }
 
+function _extends() { _extends = Object.assign || function (target) { for (var i = 1; i < arguments.length; i++) { var source = arguments[i]; for (var key in source) { if (Object.prototype.hasOwnProperty.call(source, key)) { target[key] = source[key]; } } } return target; }; return _extends.apply(this, arguments); }
+
 const themeStyle = {
   filter: _style.default.filter,
   invalid: _style.default.invalid,
@@ -41,7 +49,9 @@ const themeStyle = {
   question: _style.default.question,
   sort: _style.default.sort,
   thematiques: _style.default.thematiques,
-  template: _style.default.template
+  player: _style.default.player,
+  template: _style.default.template // we keep template in case it is used anywhere else?
+
 };
 
 const Select = (props, context) => {
@@ -63,49 +73,61 @@ const Select = (props, context) => {
   const {
     skin
   } = context;
-  const title = propTitle ? `${propTitle}${required ? '*' : ''}` : null;
+  const title = (0, _react.useMemo)(() => propTitle ? `${propTitle}${required ? '*' : ''}` : null, [propTitle, required]);
   const optionList = options && options.map((option, index) => {
     return /*#__PURE__*/_react.default.createElement("option", {
       key: index,
-      value: option.value
+      value: option.value,
+      className: _style.default.selectOption
     }, option.name);
   });
   const titleView = title ? /*#__PURE__*/_react.default.createElement("span", {
     className: _style.default.title
   }, title, " ") : null;
-  const selected = multiple ? (0, _map2.default)((0, _get2.default)('value'), (0, _filter2.default)({
+  const selected = (0, _react.useMemo)(() => multiple ? (0, _map2.default)((0, _get2.default)('value'), (0, _filter2.default)({
     selected: true
   }, options)) : (0, _get2.default)('value', (0, _find2.default)({
     selected: true
-  }, options));
-  const selectedLabel = multiple ? (0, _map2.default)((0, _get2.default)('name'), (0, _filter2.default)({
+  }, options)), [multiple, options]);
+  const selectedLabel = (0, _react.useMemo)(() => multiple ? (0, _map2.default)((0, _get2.default)('name'), (0, _filter2.default)({
     selected: true
   }, options)) : (0, _get2.default)('name', (0, _find2.default)({
     selected: true
-  }, options));
+  }, options)), [multiple, options]);
+  const isSelectedInValidOption = (0, _react.useMemo)(() => theme === 'player' && (0, _getOr2.default)(false, 'name', (0, _find2.default)({
+    validOption: false,
+    selected: true
+  }, options)), [options, theme]);
   const handleChange = (0, _react.useMemo)(() => multiple ? e => {
     onChange((0, _map2.default)((0, _get2.default)('value'), e.target.selectedOptions));
   } : e => {
     onChange(e.target.value);
   }, [onChange, multiple]);
-  const black = (0, _get2.default)('common.black', skin);
-  const color = (0, _get2.default)('common.primary', skin);
-  const skinColor = {
-    color: selected && (theme === 'question' || theme === 'template') ? color : null
-  };
+  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 arrowView = !multiple ? /*#__PURE__*/_react.default.createElement(_novaIcons.NovaCompositionNavigationArrowDown, {
     color: selected && (theme === 'question' || theme === 'template') ? color : black,
     className: _style.default.arrow
   }) : null;
-  const behaviourClassName = (0, _getClassState.default)(_style.default.default, _style.default.modified, _style.default.error, modified, error);
-  const composedClassName = (0, _classnames.default)(theme ? themeStyle[theme] : behaviourClassName, selected ? _style.default.selected : _style.default.unselected, className);
+  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]);
+  const labelSize = (0, _react.useMemo)(() => (0, _size2.default)(selectedLabel), [selectedLabel]);
+  const isLongLabel = (0, _react.useMemo)(() => labelSize >= 65, [labelSize]);
   return /*#__PURE__*/_react.default.createElement("div", {
     className: composedClassName
   }, /*#__PURE__*/_react.default.createElement("label", {
-    style: skinColor
+    "data-name": "select-wrapper",
+    style: _extends({}, shouldUseSkinFontColor && {
+      color
+    }),
+    className: _style.default.selectWrapper
   }, titleView, /*#__PURE__*/_react.default.createElement("span", {
-    className: (0, _classnames.default)(_style.default.label, borderClassName)
+    "data-name": "select-span",
+    className: (0, _classnames.default)(_style.default.selectSpan, (0, _includes2.default)(theme, ['player', 'invalid', 'question', 'thematiques', 'template']) ? _style.default.noLabelCommon : null, borderClassName, isLongLabel ? _style.default.longLabel : null)
   }, selectedLabel), arrowView, /*#__PURE__*/_react.default.createElement("select", {
+    "data-name": "native-select",
+    className: _style.default.selectBox,
     title: selectedLabel,
     name: name,
     onChange: handleChange,
@@ -120,7 +142,8 @@ const Select = (props, context) => {
 const SelectOptionPropTypes = {
   name: _propTypes.default.string.isRequired,
   value: _propTypes.default.oneOfType([_propTypes.default.string, _propTypes.default.number]),
-  selected: _propTypes.default.bool
+  selected: _propTypes.default.bool,
+  validOption: _propTypes.default.bool
 };
 exports.SelectOptionPropTypes = SelectOptionPropTypes;
 Select.contextTypes = {

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","template","Select","props","context","name","options","className","borderClassName","onChange","multiple","disabled","required","description","theme","modified","error","title","propTitle","skin","optionList","map","option","index","value","titleView","selected","selectedLabel","handleChange","e","target","selectedOptions","black","color","skinColor","arrowView","arrow","behaviourClassName","default","composedClassName","unselected","label","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, filter} 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  template: style.template\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 = propTitle ? `${propTitle}${required ? '*' : ''}` : null;\n\n  const optionList =\n    options &&\n    options.map((option, index) => {\n      return (\n        <option key={index} value={option.value}>\n          {option.name}\n        </option>\n      );\n    });\n\n  const titleView = title ? <span className={style.title}>{title} </span> : null;\n\n  const selected = multiple\n    ? map(get('value'), filter({selected: true}, options))\n    : get('value', find({selected: true}, options));\n  const selectedLabel = multiple\n    ? map(get('name'), filter({selected: true}, options))\n    : get('name', find({selected: true}, options));\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 = get('common.black', skin);\n  const color = get('common.primary', skin);\n  const skinColor = {\n    color: selected && (theme === 'question' || theme === 'template') ? color : null\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 = getClassState(\n    style.default,\n    style.modified,\n    style.error,\n    modified,\n    error\n  );\n  const composedClassName = classnames(\n    theme ? themeStyle[theme] : behaviourClassName,\n    selected ? style.selected : style.unselected,\n    className\n  );\n\n  return (\n    <div className={composedClassName}>\n      <label style={skinColor}>\n        {titleView}\n        <span className={classnames(style.label, borderClassName)}>{selectedLabel}</span>\n        {arrowView}\n        <select\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};\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","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":"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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\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"}

package/lib/atom/select/style.css

@@ -10,6 +10,8 @@
 @value white from colors;
 @value xtraLightGrey from colors;
 @value transparent from colors;
+@value box_shadow_light_dark from colors;
+@value cm_blue_900 from colors;
 
 .default {
   display: flex;
@@ -23,7 +25,11 @@
   composes: default;
 }
 
-.default label {
+.selectWrapper {
+  position: relative;
+}
+
+.default .selectWrapper {
   display: flex;
   align-items: center;
   height: 50px;
@@ -41,20 +47,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 +70,21 @@
   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;
 }
 
 .modified select {
@@ -112,6 +129,7 @@
   pointer-events: none;
   width: 12px;
   height: 12px;
+  z-index: 11;
 }
 
 @media mobile {
@@ -121,7 +139,7 @@
   }
 }
 
-.default select[multiple] {
+.default .selectBox[multiple] {
   padding: 0;
   height: 80px;
 }
@@ -130,7 +148,7 @@
   Filter
 */
 
-.filter label {
+.filter .selectWrapper {
   display: flex;
   align-items: center;
   position: relative;
@@ -140,7 +158,7 @@
   margin: 0;
 }
 
-.filter .label {
+.filter .selectSpan {
   display: block;
   padding: 15px 30px 15px 15px;
   font-size: 12px;
@@ -157,7 +175,9 @@
   margin-bottom: 10px;
 }
 
-.filter select {
+.filter .selectBox {
+  position: absolute;
+  top: 27px;
   display: block;
   width: 100%;
   height: 50px;
@@ -186,57 +206,112 @@
   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;
 }
 
-.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 +323,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 +350,11 @@
   width: 150px;
 }
 
-.mooc label {
+.mooc .selectWrapper {
   margin: 0;
   height: 35px;
   border: 0;
+  width: inherit;
 }
 
 .mooc select {
@@ -307,11 +387,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 +408,7 @@
   margin-bottom: 10px;
 }
 
-.sort label {
+.sort .selectWrapper {
   display: flex;
   align-items: center;
   position: relative;
@@ -338,7 +418,7 @@
   margin: 0;
 }
 
-.sort .label {
+.sort .selectSpan {
   display: block;
   padding: 15px 30px 15px 15px;
   font-size: 12px;
@@ -379,16 +459,48 @@
   composes: no-label;
 }
 
+/* 
+  Player
+*/
+
+.player {
+  composes: no-label;
+}
+
 /*
   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 +532,7 @@
   composes: no-label;
 }
 
-.template select {
+.template .selectBox {
   width: auto;
   height: 54px;
   padding: 0 50px 0 0;
@@ -428,22 +540,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/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"}