@coorpacademy/components 11.40.15 → 11.40.16

package/lib/atom/range/index.js

@@ -2,11 +2,13 @@
 
 exports.__esModule = true;
 exports.default = void 0;
+var _getOr2 = _interopRequireDefault(require("lodash/fp/getOr"));
 var _clamp2 = _interopRequireDefault(require("lodash/fp/clamp"));
 var _set2 = _interopRequireDefault(require("lodash/fp/set"));
 var _noop2 = _interopRequireDefault(require("lodash/fp/noop"));
 var _react = _interopRequireDefault(require("react"));
 var _propTypes = _interopRequireDefault(require("prop-types"));
+var _provider = _interopRequireDefault(require("../provider"));
 var _handle = _interopRequireDefault(require("./handle"));
 var _style = _interopRequireDefault(require("./style.css"));
 function _interopRequireDefault(e) { return e && e.__esModule ? e : { default: e }; }
@@ -20,11 +22,20 @@ const valueOnTrack = (track, x) => {
 const extractStateFromProps = props => {
   const {
     multi = false,
-    value = multi ? [0, 1] : 0
+    value = multi ? [0, 1] : 0,
+    min = 0,
+    max = 1
   } = props;
+  const toNormalized = actualValue => (actualValue - min) / (max - min);
+  let normalizedValue;
+  if (multi) {
+    normalizedValue = Array.isArray(value) ? value.map(toNormalized) : [toNormalized(0), toNormalized(value)];
+  } else {
+    normalizedValue = toNormalized(value);
+  }
   return {
     multi,
-    value: multi ? value : [0, value]
+    value: multi ? normalizedValue : [0, normalizedValue]
   };
 };
 const RenderHandles = props => {
@@ -77,6 +88,9 @@ RenderHandles.propTypes = process.env.NODE_ENV !== "production" ? {
   HammerForTestingMax: _handle.default.propTypes.HammerForTesting
 } : {};
 class Range extends _react.default.Component {
+  static contextTypes = {
+    skin: _provider.default.childContextTypes.skin
+  };
   static getDerivedStateFromProps(props, state) {
     const {
       pending
@@ -100,6 +114,20 @@ class Range extends _react.default.Component {
   setRefTrack(track) {
     this.track = track;
   }
+  normalizedToActual(normalizedValue) {
+    const {
+      min = 0,
+      max = 1
+    } = this.props;
+    return min + normalizedValue * (max - min);
+  }
+  roundToStep(value) {
+    const {
+      step = 0.1
+    } = this.props;
+    const precision = 10;
+    return Number((Math.round(value / step) * step).toFixed(precision));
+  }
   handleMinChange(e) {
     e.srcEvent.stopPropagation();
     e.srcEvent.preventDefault();
@@ -144,7 +172,8 @@ class Range extends _react.default.Component {
       multi = false
     } = this.props;
     const handle = pending ? onChange : onChangeEnd;
-    return handle(multi ? newValues : newValues[1]);
+    const actualValues = newValues.map(val => this.roundToStep(this.normalizedToActual(val)));
+    return handle(multi ? actualValues : actualValues[1]);
   }
   handleClick(e) {
     e.stopPropagation();
@@ -153,8 +182,7 @@ class Range extends _react.default.Component {
       value: [left, right],
       multi
     } = this.state;
-    const x = e.clientX;
-    const newValue = valueOnTrack(this.track, x);
+    const newValue = valueOnTrack(this.track, e.clientX);
     if (!multi) return this.handleChange(newValue, 1, false);
     if (left === right) {
       const isClickToTheLeft = left - newValue > 0;
@@ -169,22 +197,34 @@ class Range extends _react.default.Component {
       value: [left, right],
       pending
     } = this.state;
+    const {
+      theme = 'default',
+      minLabel = 'Min',
+      maxLabel = 'Max',
+      min,
+      max,
+      minValueLabel,
+      maxValueLabel,
+      HammerForTestingMin,
+      HammerForTestingMax
+    } = this.props;
     const railWidth = right - left;
     const railLeft = left;
-    const railStyle = {
-      backgroundColor: '#9999A8',
+    const {
+      skin
+    } = this.context;
+    const primaryColor = (0, _getOr2.default)('#00B0FF', 'common.primary', skin);
+    const railStyle = theme === 'mooc' ? {
+      backgroundColor: primaryColor,
+      width: `${railWidth * 100}%`,
+      left: `${railLeft * 100}%`
+    } : {
       width: `${railWidth * 100}%`,
       left: `${railLeft * 100}%`
     };
-    const {
-      HammerForTestingMin,
-      HammerForTestingMax
-    } = this.props;
-    return /*#__PURE__*/_react.default.createElement("div", {
-      "data-testid": "slider",
-      className: _style.default.containerWrapper,
-      onClick: this.handleClick
-    }, /*#__PURE__*/_react.default.createElement("div", {
+    const minActualValue = this.roundToStep(this.normalizedToActual(left));
+    const maxActualValue = this.roundToStep(this.normalizedToActual(right));
+    const sliderComponent = /*#__PURE__*/_react.default.createElement("div", {
       className: _style.default.container
     }, /*#__PURE__*/_react.default.createElement("div", {
       "data-testid": "track",
@@ -205,17 +245,52 @@ class Range extends _react.default.Component {
       onHandleMinChangeEnd: this.handleMinChangeEnd,
       onHandleMaxChange: this.handleMaxChange,
       onHandleMaxChangeEnd: this.handleMaxChangeEnd
-    })));
+    }));
+    if (theme === 'mooc') {
+      return /*#__PURE__*/_react.default.createElement("div", {
+        "data-testid": "slider",
+        className: _style.default.containerWrapper
+      }, /*#__PURE__*/_react.default.createElement("div", {
+        onClick: this.handleClick
+      }, sliderComponent), /*#__PURE__*/_react.default.createElement("div", {
+        className: _style.default.inputsRow
+      }, multi ? /*#__PURE__*/_react.default.createElement("div", {
+        className: _style.default.moocInput,
+        "data-testid": "min-value"
+      }, /*#__PURE__*/_react.default.createElement("span", {
+        className: _style.default.inputHint
+      }, minLabel), /*#__PURE__*/_react.default.createElement("span", {
+        className: _style.default.inputValue
+      }, minActualValue === min && !!minValueLabel ? minValueLabel : minActualValue)) : null, /*#__PURE__*/_react.default.createElement("div", {
+        className: _style.default.moocInput,
+        "data-testid": "max-value"
+      }, /*#__PURE__*/_react.default.createElement("span", {
+        className: _style.default.inputHint
+      }, maxLabel), /*#__PURE__*/_react.default.createElement("span", {
+        className: _style.default.inputValue
+      }, maxActualValue === max && !!maxValueLabel ? maxValueLabel : maxActualValue))));
+    }
+    return /*#__PURE__*/_react.default.createElement("div", {
+      "data-testid": "slider",
+      className: _style.default.containerWrapper,
+      onClick: this.handleClick
+    }, sliderComponent);
   }
 }
 Range.propTypes = process.env.NODE_ENV !== "production" ? {
   onChange: _propTypes.default.func,
   onChangeEnd: _propTypes.default.func,
   multi: _propTypes.default.bool,
+  theme: _propTypes.default.oneOf(['default', 'mooc']),
+  min: _propTypes.default.number,
+  max: _propTypes.default.number,
+  step: _propTypes.default.number,
+  minLabel: _propTypes.default.string,
+  maxLabel: _propTypes.default.string,
+  minValueLabel: _propTypes.default.string,
+  maxValueLabel: _propTypes.default.string,
   HammerForTestingMin: RenderHandles.propTypes.HammerForTestingMin,
-  HammerForTestingMax: RenderHandles.propTypes.HammerForTestingMax,
-  // eslint-disable-next-line react/no-unused-prop-types
-  value: _propTypes.default.oneOfType([_propTypes.default.number, _propTypes.default.arrayOf(_propTypes.default.number)])
+  HammerForTestingMax: RenderHandles.propTypes.HammerForTestingMax
 } : {};
 var _default = exports.default = Range;
 //# sourceMappingURL=index.js.map

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

@@ -1 +1 @@
-{"version":3,"file":"index.js","names":["_react","_interopRequireDefault","require","_propTypes","_handle","_style","e","__esModule","default","valueOnTrack","track","x","left","right","getBoundingClientRect","_clamp2","extractStateFromProps","props","multi","value","RenderHandles","pending","onHandleMinChange","onHandleMinChangeEnd","onHandleMaxChange","onHandleMaxChangeEnd","HammerForTestingMin","HammerForTestingMax","createElement","className","style","handle","animatedHandle","axis","onPan","onPanEnd","HammerForTesting","propTypes","process","env","NODE_ENV","PropTypes","number","bool","func","Handle","Range","React","Component","getDerivedStateFromProps","state","constructor","context","handleClick","bind","setRefTrack","handleMinChange","handleMaxChange","handleMinChangeEnd","handleMaxChangeEnd","srcEvent","stopPropagation","preventDefault","newValue","center","handleChange","valueIndex","prevValue","_set2","minValue","maxValue","nextValue","triggerChange","setState","newValues","onChange","_noop2","onChangeEnd","clientX","isClickToTheLeft","closestHandle","Math","abs","render","railWidth","railLeft","railStyle","backgroundColor","width","containerWrapper","onClick","container","ref","rail","animatedRail","oneOfType","arrayOf","_default","exports"],"sources":["../../../src/atom/range/index.js"],"sourcesContent":["import React from 'react';\nimport PropTypes from 'prop-types';\nimport {noop, set, clamp} from 'lodash/fp';\nimport Handle from './handle';\nimport style from './style.css';\n\nconst valueOnTrack = (track, x) => {\n  const {left, right} = track.getBoundingClientRect();\n  return clamp(0, 1, (x - left) / (right - left));\n};\n\nconst extractStateFromProps = props => {\n  const {multi = false, value = multi ? [0, 1] : 0} = props;\n  return {\n    multi,\n    value: multi ? value : [0, value]\n  };\n};\n\nconst RenderHandles = props => {\n  const {\n    left,\n    right,\n    multi = false,\n    pending,\n    onHandleMinChange,\n    onHandleMinChangeEnd,\n    onHandleMaxChange,\n    onHandleMaxChangeEnd,\n    HammerForTestingMin,\n    HammerForTestingMax\n  } = props;\n\n  return (\n    <div data-testid=\"handles\">\n      {multi ? (\n        <span\n          className={pending ? style.handle : style.animatedHandle}\n          style={{left: `${left * 100}%`}}\n        >\n          <Handle\n            axis=\"x\"\n            onPan={onHandleMinChange}\n            onPanEnd={onHandleMinChangeEnd}\n            HammerForTesting={HammerForTestingMin}\n          />\n        </span>\n      ) : null}\n      <span\n        className={pending ? style.handle : style.animatedHandle}\n        style={{left: `${right * 100}%`}}\n      >\n        <Handle\n          axis=\"x\"\n          onPan={onHandleMaxChange}\n          onPanEnd={onHandleMaxChangeEnd}\n          HammerForTesting={HammerForTestingMax}\n        />\n      </span>\n    </div>\n  );\n};\n\nRenderHandles.propTypes = {\n  left: PropTypes.number,\n  right: PropTypes.number,\n  multi: PropTypes.bool,\n  pending: PropTypes.bool,\n  onHandleMinChange: PropTypes.func,\n  onHandleMinChangeEnd: PropTypes.func,\n  onHandleMaxChange: PropTypes.func,\n  onHandleMaxChangeEnd: PropTypes.func,\n  HammerForTestingMin: Handle.propTypes.HammerForTesting,\n  HammerForTestingMax: Handle.propTypes.HammerForTesting\n};\n\nclass Range extends React.Component {\n  static propTypes = {\n    onChange: PropTypes.func,\n    onChangeEnd: PropTypes.func,\n    multi: PropTypes.bool,\n    HammerForTestingMin: RenderHandles.propTypes.HammerForTestingMin,\n    HammerForTestingMax: RenderHandles.propTypes.HammerForTestingMax,\n    // eslint-disable-next-line react/no-unused-prop-types\n    value: PropTypes.oneOfType([PropTypes.number, PropTypes.arrayOf(PropTypes.number)])\n  };\n\n  static getDerivedStateFromProps(props, state) {\n    const {pending} = state;\n\n    if (pending) return null;\n\n    return extractStateFromProps(props);\n  }\n\n  constructor(props, context) {\n    super(props, context);\n\n    this.state = {\n      ...extractStateFromProps(props),\n      pending: false\n    };\n\n    this.handleClick = this.handleClick.bind(this);\n    this.setRefTrack = this.setRefTrack.bind(this);\n    this.handleMinChange = this.handleMinChange.bind(this);\n    this.handleMaxChange = this.handleMaxChange.bind(this);\n    this.handleMinChangeEnd = this.handleMinChangeEnd.bind(this);\n    this.handleMaxChangeEnd = this.handleMaxChangeEnd.bind(this);\n  }\n\n  setRefTrack(track) {\n    this.track = track;\n  }\n\n  handleMinChange(e) {\n    e.srcEvent.stopPropagation();\n    e.srcEvent.preventDefault();\n    const newValue = valueOnTrack(this.track, e.center.x);\n    return this.handleChange(newValue, 0, true);\n  }\n\n  handleMaxChange(e) {\n    e.srcEvent.stopPropagation();\n    e.srcEvent.preventDefault();\n    const newValue = valueOnTrack(this.track, e.center.x);\n    return this.handleChange(newValue, 1, true);\n  }\n\n  handleMinChangeEnd(e) {\n    e.srcEvent.stopPropagation();\n    e.srcEvent.preventDefault();\n    const newValue = valueOnTrack(this.track, e.center.x);\n    return this.handleChange(newValue, 0, false);\n  }\n\n  handleMaxChangeEnd(e) {\n    e.srcEvent.stopPropagation();\n    e.srcEvent.preventDefault();\n    const newValue = valueOnTrack(this.track, e.center.x);\n    return this.handleChange(newValue, 1, false);\n  }\n\n  handleChange(value, valueIndex, pending) {\n    const {value: prevValue} = this.state;\n\n    const newValue = set(valueIndex, value, prevValue);\n\n    const [minValue, maxValue] = newValue;\n\n    const nextValue = minValue > maxValue ? prevValue : newValue;\n\n    this.triggerChange(nextValue, pending);\n    return this.setState({\n      pending,\n      value: pending ? nextValue : extractStateFromProps(this.props).value\n    });\n  }\n\n  triggerChange(newValues, pending) {\n    const {onChange = noop, onChangeEnd = onChange, multi = false} = this.props;\n\n    const handle = pending ? onChange : onChangeEnd;\n\n    return handle(multi ? newValues : newValues[1]);\n  }\n\n  handleClick(e) {\n    e.stopPropagation();\n    e.preventDefault();\n    const {\n      value: [left, right],\n      multi\n    } = this.state;\n    const x = e.clientX;\n    const newValue = valueOnTrack(this.track, x);\n\n    if (!multi) return this.handleChange(newValue, 1, false);\n\n    if (left === right) {\n      const isClickToTheLeft = left - newValue > 0;\n      return this.handleChange(newValue, isClickToTheLeft ? 0 : 1, false);\n    }\n\n    const closestHandle = Math.abs(newValue - left) < Math.abs(newValue - right) ? 0 : 1;\n    return this.handleChange(newValue, closestHandle, false);\n  }\n\n  render() {\n    const {\n      multi = false,\n      value: [left, right],\n      pending\n    } = this.state;\n    const railWidth = right - left;\n    const railLeft = left;\n    const railStyle = {\n      backgroundColor: '#9999A8',\n      width: `${railWidth * 100}%`,\n      left: `${railLeft * 100}%`\n    };\n\n    const {HammerForTestingMin, HammerForTestingMax} = this.props;\n\n    return (\n      <div data-testid=\"slider\" className={style.containerWrapper} onClick={this.handleClick}>\n        <div className={style.container}>\n          <div\n            data-testid=\"track\"\n            className={style.track}\n            data-name=\"sliderTrack\"\n            ref={this.setRefTrack}\n          />\n          <div className={pending ? style.rail : style.animatedRail} style={railStyle} />\n          <RenderHandles\n            HammerForTestingMin={HammerForTestingMin}\n            HammerForTestingMax={HammerForTestingMax}\n            left={left}\n            right={right}\n            pending={pending}\n            multi={multi}\n            onHandleMinChange={this.handleMinChange}\n            onHandleMinChangeEnd={this.handleMinChangeEnd}\n            onHandleMaxChange={this.handleMaxChange}\n            onHandleMaxChangeEnd={this.handleMaxChangeEnd}\n          />\n        </div>\n      </div>\n    );\n  }\n}\n\nexport default Range;\n"],"mappings":"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","ignoreList":[]}
+{"version":3,"file":"index.js","names":["_react","_interopRequireDefault","require","_propTypes","_provider","_handle","_style","e","__esModule","default","valueOnTrack","track","x","left","right","getBoundingClientRect","_clamp2","extractStateFromProps","props","multi","value","min","max","toNormalized","actualValue","normalizedValue","Array","isArray","map","RenderHandles","pending","onHandleMinChange","onHandleMinChangeEnd","onHandleMaxChange","onHandleMaxChangeEnd","HammerForTestingMin","HammerForTestingMax","createElement","className","style","handle","animatedHandle","axis","onPan","onPanEnd","HammerForTesting","propTypes","process","env","NODE_ENV","PropTypes","number","bool","func","Handle","Range","React","Component","contextTypes","skin","Provider","childContextTypes","getDerivedStateFromProps","state","constructor","context","handleClick","bind","setRefTrack","handleMinChange","handleMaxChange","handleMinChangeEnd","handleMaxChangeEnd","normalizedToActual","roundToStep","step","precision","Number","Math","round","toFixed","srcEvent","stopPropagation","preventDefault","newValue","center","handleChange","valueIndex","prevValue","_set2","minValue","maxValue","nextValue","triggerChange","setState","newValues","onChange","_noop2","onChangeEnd","actualValues","val","clientX","isClickToTheLeft","closestHandle","abs","render","theme","minLabel","maxLabel","minValueLabel","maxValueLabel","railWidth","railLeft","primaryColor","_getOr2","railStyle","backgroundColor","width","minActualValue","maxActualValue","sliderComponent","container","ref","rail","animatedRail","containerWrapper","onClick","inputsRow","moocInput","inputHint","inputValue","oneOf","string","_default","exports"],"sources":["../../../src/atom/range/index.js"],"sourcesContent":["import React from 'react';\nimport PropTypes from 'prop-types';\nimport {noop, set, clamp, getOr} from 'lodash/fp';\nimport Provider from '../provider';\nimport Handle from './handle';\nimport style from './style.css';\n\nconst valueOnTrack = (track, x) => {\n  const {left, right} = track.getBoundingClientRect();\n  return clamp(0, 1, (x - left) / (right - left));\n};\n\nconst extractStateFromProps = props => {\n  const {multi = false, value = multi ? [0, 1] : 0, min = 0, max = 1} = props;\n\n  const toNormalized = actualValue => (actualValue - min) / (max - min);\n\n  let normalizedValue;\n  if (multi) {\n    normalizedValue = Array.isArray(value)\n      ? value.map(toNormalized)\n      : [toNormalized(0), toNormalized(value)];\n  } else {\n    normalizedValue = toNormalized(value);\n  }\n\n  return {\n    multi,\n    value: multi ? normalizedValue : [0, normalizedValue]\n  };\n};\n\nconst RenderHandles = props => {\n  const {\n    left,\n    right,\n    multi = false,\n    pending,\n    onHandleMinChange,\n    onHandleMinChangeEnd,\n    onHandleMaxChange,\n    onHandleMaxChangeEnd,\n    HammerForTestingMin,\n    HammerForTestingMax\n  } = props;\n\n  return (\n    <div data-testid=\"handles\">\n      {multi ? (\n        <span\n          className={pending ? style.handle : style.animatedHandle}\n          style={{left: `${left * 100}%`}}\n        >\n          <Handle\n            axis=\"x\"\n            onPan={onHandleMinChange}\n            onPanEnd={onHandleMinChangeEnd}\n            HammerForTesting={HammerForTestingMin}\n          />\n        </span>\n      ) : null}\n      <span\n        className={pending ? style.handle : style.animatedHandle}\n        style={{left: `${right * 100}%`}}\n      >\n        <Handle\n          axis=\"x\"\n          onPan={onHandleMaxChange}\n          onPanEnd={onHandleMaxChangeEnd}\n          HammerForTesting={HammerForTestingMax}\n        />\n      </span>\n    </div>\n  );\n};\n\nRenderHandles.propTypes = {\n  left: PropTypes.number,\n  right: PropTypes.number,\n  multi: PropTypes.bool,\n  pending: PropTypes.bool,\n  onHandleMinChange: PropTypes.func,\n  onHandleMinChangeEnd: PropTypes.func,\n  onHandleMaxChange: PropTypes.func,\n  onHandleMaxChangeEnd: PropTypes.func,\n  HammerForTestingMin: Handle.propTypes.HammerForTesting,\n  HammerForTestingMax: Handle.propTypes.HammerForTesting\n};\n\nclass Range extends React.Component {\n  static propTypes = {\n    onChange: PropTypes.func,\n    onChangeEnd: PropTypes.func,\n    multi: PropTypes.bool,\n    theme: PropTypes.oneOf(['default', 'mooc']),\n    min: PropTypes.number,\n    max: PropTypes.number,\n    step: PropTypes.number,\n    minLabel: PropTypes.string,\n    maxLabel: PropTypes.string,\n    minValueLabel: PropTypes.string,\n    maxValueLabel: PropTypes.string,\n    HammerForTestingMin: RenderHandles.propTypes.HammerForTestingMin,\n    HammerForTestingMax: RenderHandles.propTypes.HammerForTestingMax\n  };\n\n  static contextTypes = {\n    skin: Provider.childContextTypes.skin\n  };\n\n  static getDerivedStateFromProps(props, state) {\n    const {pending} = state;\n    if (pending) return null;\n    return extractStateFromProps(props);\n  }\n\n  constructor(props, context) {\n    super(props, context);\n    this.state = {\n      ...extractStateFromProps(props),\n      pending: false\n    };\n    this.handleClick = this.handleClick.bind(this);\n    this.setRefTrack = this.setRefTrack.bind(this);\n    this.handleMinChange = this.handleMinChange.bind(this);\n    this.handleMaxChange = this.handleMaxChange.bind(this);\n    this.handleMinChangeEnd = this.handleMinChangeEnd.bind(this);\n    this.handleMaxChangeEnd = this.handleMaxChangeEnd.bind(this);\n  }\n\n  setRefTrack(track) {\n    this.track = track;\n  }\n\n  normalizedToActual(normalizedValue) {\n    const {min = 0, max = 1} = this.props;\n    return min + normalizedValue * (max - min);\n  }\n\n  roundToStep(value) {\n    const {step = 0.1} = this.props;\n    const precision = 10;\n    return Number((Math.round(value / step) * step).toFixed(precision));\n  }\n\n  handleMinChange(e) {\n    e.srcEvent.stopPropagation();\n    e.srcEvent.preventDefault();\n    const newValue = valueOnTrack(this.track, e.center.x);\n    return this.handleChange(newValue, 0, true);\n  }\n\n  handleMaxChange(e) {\n    e.srcEvent.stopPropagation();\n    e.srcEvent.preventDefault();\n    const newValue = valueOnTrack(this.track, e.center.x);\n    return this.handleChange(newValue, 1, true);\n  }\n\n  handleMinChangeEnd(e) {\n    e.srcEvent.stopPropagation();\n    e.srcEvent.preventDefault();\n    const newValue = valueOnTrack(this.track, e.center.x);\n    return this.handleChange(newValue, 0, false);\n  }\n\n  handleMaxChangeEnd(e) {\n    e.srcEvent.stopPropagation();\n    e.srcEvent.preventDefault();\n    const newValue = valueOnTrack(this.track, e.center.x);\n    return this.handleChange(newValue, 1, false);\n  }\n\n  handleChange(value, valueIndex, pending) {\n    const {value: prevValue} = this.state;\n    const newValue = set(valueIndex, value, prevValue);\n    const [minValue, maxValue] = newValue;\n    const nextValue = minValue > maxValue ? prevValue : newValue;\n\n    this.triggerChange(nextValue, pending);\n    return this.setState({\n      pending,\n      value: pending ? nextValue : extractStateFromProps(this.props).value\n    });\n  }\n\n  triggerChange(newValues, pending) {\n    const {onChange = noop, onChangeEnd = onChange, multi = false} = this.props;\n    const handle = pending ? onChange : onChangeEnd;\n    const actualValues = newValues.map(val => this.roundToStep(this.normalizedToActual(val)));\n    return handle(multi ? actualValues : actualValues[1]);\n  }\n\n  handleClick(e) {\n    e.stopPropagation();\n    e.preventDefault();\n    const {\n      value: [left, right],\n      multi\n    } = this.state;\n    const newValue = valueOnTrack(this.track, e.clientX);\n\n    if (!multi) return this.handleChange(newValue, 1, false);\n\n    if (left === right) {\n      const isClickToTheLeft = left - newValue > 0;\n      return this.handleChange(newValue, isClickToTheLeft ? 0 : 1, false);\n    }\n\n    const closestHandle = Math.abs(newValue - left) < Math.abs(newValue - right) ? 0 : 1;\n    return this.handleChange(newValue, closestHandle, false);\n  }\n\n  render() {\n    const {\n      multi = false,\n      value: [left, right],\n      pending\n    } = this.state;\n    const {\n      theme = 'default',\n      minLabel = 'Min',\n      maxLabel = 'Max',\n      min,\n      max,\n      minValueLabel,\n      maxValueLabel,\n      HammerForTestingMin,\n      HammerForTestingMax\n    } = this.props;\n\n    const railWidth = right - left;\n    const railLeft = left;\n\n    const {skin} = this.context;\n    const primaryColor = getOr('#00B0FF', 'common.primary', skin);\n    const railStyle =\n      theme === 'mooc'\n        ? {\n            backgroundColor: primaryColor,\n            width: `${railWidth * 100}%`,\n            left: `${railLeft * 100}%`\n          }\n        : {\n            width: `${railWidth * 100}%`,\n            left: `${railLeft * 100}%`\n          };\n\n    const minActualValue = this.roundToStep(this.normalizedToActual(left));\n    const maxActualValue = this.roundToStep(this.normalizedToActual(right));\n\n    const sliderComponent = (\n      <div className={style.container}>\n        <div\n          data-testid=\"track\"\n          className={style.track}\n          data-name=\"sliderTrack\"\n          ref={this.setRefTrack}\n        />\n        <div className={pending ? style.rail : style.animatedRail} style={railStyle} />\n        <RenderHandles\n          HammerForTestingMin={HammerForTestingMin}\n          HammerForTestingMax={HammerForTestingMax}\n          left={left}\n          right={right}\n          pending={pending}\n          multi={multi}\n          onHandleMinChange={this.handleMinChange}\n          onHandleMinChangeEnd={this.handleMinChangeEnd}\n          onHandleMaxChange={this.handleMaxChange}\n          onHandleMaxChangeEnd={this.handleMaxChangeEnd}\n        />\n      </div>\n    );\n\n    if (theme === 'mooc') {\n      return (\n        <div data-testid=\"slider\" className={style.containerWrapper}>\n          <div onClick={this.handleClick}>{sliderComponent}</div>\n          <div className={style.inputsRow}>\n            {multi ? (\n              <div className={style.moocInput} data-testid=\"min-value\">\n                <span className={style.inputHint}>{minLabel}</span>\n                <span className={style.inputValue}>\n                  {minActualValue === min && !!minValueLabel ? minValueLabel : minActualValue}\n                </span>\n              </div>\n            ) : null}\n            <div className={style.moocInput} data-testid=\"max-value\">\n              <span className={style.inputHint}>{maxLabel}</span>\n              <span className={style.inputValue}>\n                {maxActualValue === max && !!maxValueLabel ? maxValueLabel : maxActualValue}\n              </span>\n            </div>\n          </div>\n        </div>\n      );\n    }\n\n    return (\n      <div data-testid=\"slider\" className={style.containerWrapper} onClick={this.handleClick}>\n        {sliderComponent}\n      </div>\n    );\n  }\n}\n\nexport default Range;\n"],"mappings":"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","ignoreList":[]}

package/lib/atom/range/style.css

@@ -2,11 +2,15 @@
 @value light from colors;
 @value dark from colors;
 @value white from colors;
-@value brand from colors;
+@value cm_grey_400 from colors;
+@value surface_input_neutral_strong from colors;
 
 .containerWrapper {
   padding: 15px;
   user-select: none;
+  display: flex;
+  flex-direction: column;
+  gap: 18px;
 }
 
 .container {
@@ -27,7 +31,7 @@
 .rail {
   composes: track;
   width: 0;
-  background-color: brand;
+  background-color: cm_grey_400;
 }
 
 .animatedRail {
@@ -55,3 +59,37 @@
   transition-duration: 0.3s;
   transition-timing-function: ease-out;
 }
+
+.inputsRow {
+  display: flex;
+  justify-content: space-between;
+  margin-top: 18px;
+}
+
+.moocInput {
+  display: inline-flex;
+  align-items: center;
+  gap: 6px;
+  height: auto;
+  padding: 12px 16px;
+  border: none;
+  border-radius: 12px;
+  background-color: surface_input_neutral_strong;
+  font-size: 16px;
+  cursor: default;
+  user-select: none;
+  white-space: nowrap;
+}
+
+.inputHint {
+  color: cm_grey_400;
+  font-weight: 700;
+  font-size: 16px;
+}
+
+.inputValue {
+  color: black;
+  font-weight: 600;
+  font-size: 16px;
+}
+

package/lib/atom/resource-miniature/style.css

@@ -1,5 +1,5 @@
 @value colors: "../../variables/colors.css";
-@value lightMediumGray from colors;
+@value lightMediumGrey from colors;
 @value white from colors;
 @value breakpoints: "../../variables/breakpoints.css";
 @value mobile from breakpoints;
@@ -30,7 +30,7 @@
   width: 70px;
   height: 45px;
   border: 1px solid ;
-  box-shadow: 1px 1px 3px lightMediumGray;
+  box-shadow: 1px 1px 3px lightMediumGrey;
 }
 
 .poster {
@@ -39,7 +39,7 @@
   background-size: cover;
   background-position: center;
   background-repeat: no-repeat;
-  background-color: lightMediumGray;
+  background-color: lightMediumGrey;
 }
 
 .icon {

package/lib/atom/status-item/index.native.js

@@ -15,7 +15,7 @@ const createStyle = (icon, current) => {
       backgroundColor = _colors.COLORS.cm_positive_500;
       break;
     case 'wrong':
-      backgroundColor = _colors.COLORS.negative;
+      backgroundColor = _colors.COLORS.cm_negative_100;
       break;
     case 'no-answer':
     default:

package/lib/atom/status-item/index.native.js.map

@@ -1 +1 @@
-{"version":3,"file":"index.native.js","names":["_react","_interopRequireWildcard","require","_reactNative","_novaIcons","_colors","_getRequireWildcardCache","e","WeakMap","r","t","__esModule","default","has","get","n","__proto__","a","Object","defineProperty","getOwnPropertyDescriptor","u","hasOwnProperty","call","i","set","createStyle","icon","current","backgroundColor","COLORS","cm_positive_500","negative","cm_grey_100","StyleSheet","create","step","width","height","opacity","marginHorizontal","alignItems","justifyContent","borderRadius","stepText","fontWeight","fontSize","Step","value","style","setStyle","useState","useEffect","_style","child","createElement","NovaCompositionCoorpacademyCheck","color","NovaSolidStatusClose","Text","View","_default","exports"],"sources":["../../../src/atom/status-item/index.native.tsx"],"sourcesContent":["import React, {useEffect, useState} from 'react';\nimport {StyleSheet, Text, TextStyle, View, ViewStyle} from 'react-native';\nimport {\n  NovaCompositionCoorpacademyCheck as RightIcon,\n  NovaSolidStatusClose as WrongIcon\n} from '@coorpacademy/nova-icons';\nimport {COLORS} from '../../variables/colors';\nimport {StatusItemProps} from './types';\n\ntype StyleSheetType = {\n  step: ViewStyle;\n  stepText: TextStyle;\n  icon: ViewStyle;\n};\n\nconst createStyle = (icon: StatusItemProps['icon'], current?: boolean): StyleSheetType => {\n  let backgroundColor;\n\n  switch (icon) {\n    case 'right':\n      backgroundColor = COLORS.cm_positive_500;\n      break;\n    case 'wrong':\n      backgroundColor = COLORS.negative;\n      break;\n    case 'no-answer':\n    default:\n      backgroundColor = COLORS.cm_grey_100;\n  }\n\n  return StyleSheet.create({\n    step: {\n      width: current ? 40 : 32,\n      height: current ? 40 : 32,\n      opacity: current ? 1 : 0.5,\n      marginHorizontal: 8,\n      backgroundColor,\n      alignItems: 'center',\n      justifyContent: 'center',\n      borderRadius: 50\n    },\n    stepText: {\n      fontWeight: '600',\n      fontSize: current ? 16 : 12\n    },\n    icon: {\n      width: current ? 14 : 12,\n      height: current ? 14 : 12\n    }\n  });\n};\n\nconst Step = ({value, icon, current}: StatusItemProps) => {\n  const [style, setStyle] = useState<StyleSheetType | null>(null);\n\n  useEffect(() => {\n    const _style = createStyle(icon, current);\n    setStyle(_style);\n  }, [current, icon]);\n\n  if (!style) {\n    return null;\n  }\n\n  let child;\n\n  switch (icon) {\n    case 'right':\n      child = <RightIcon style={style.icon} color=\"#fff\" />;\n      break;\n    case 'wrong':\n      child = <WrongIcon style={style.icon} color=\"#fff\" />;\n      break;\n    case 'no-answer':\n    default:\n      child = <Text style={style.stepText}>{value}</Text>;\n  }\n\n  return <View style={style.step}>{child}</View>;\n};\n\nexport default Step;\n"],"mappings":";;;;AAAA,IAAAA,MAAA,GAAAC,uBAAA,CAAAC,OAAA;AACA,IAAAC,YAAA,GAAAD,OAAA;AACA,IAAAE,UAAA,GAAAF,OAAA;AAIA,IAAAG,OAAA,GAAAH,OAAA;AAA8C,SAAAI,yBAAAC,CAAA,6BAAAC,OAAA,mBAAAC,CAAA,OAAAD,OAAA,IAAAE,CAAA,OAAAF,OAAA,YAAAF,wBAAA,YAAAA,CAAAC,CAAA,WAAAA,CAAA,GAAAG,CAAA,GAAAD,CAAA,KAAAF,CAAA;AAAA,SAAAN,wBAAAM,CAAA,EAAAE,CAAA,SAAAA,CAAA,IAAAF,CAAA,IAAAA,CAAA,CAAAI,UAAA,SAAAJ,CAAA,eAAAA,CAAA,uBAAAA,CAAA,yBAAAA,CAAA,WAAAK,OAAA,EAAAL,CAAA,QAAAG,CAAA,GAAAJ,wBAAA,CAAAG,CAAA,OAAAC,CAAA,IAAAA,CAAA,CAAAG,GAAA,CAAAN,CAAA,UAAAG,CAAA,CAAAI,GAAA,CAAAP,CAAA,OAAAQ,CAAA,KAAAC,SAAA,UAAAC,CAAA,GAAAC,MAAA,CAAAC,cAAA,IAAAD,MAAA,CAAAE,wBAAA,WAAAC,CAAA,IAAAd,CAAA,oBAAAc,CAAA,OAAAC,cAAA,CAAAC,IAAA,CAAAhB,CAAA,EAAAc,CAAA,SAAAG,CAAA,GAAAP,CAAA,GAAAC,MAAA,CAAAE,wBAAA,CAAAb,CAAA,EAAAc,CAAA,UAAAG,CAAA,KAAAA,CAAA,CAAAV,GAAA,IAAAU,CAAA,CAAAC,GAAA,IAAAP,MAAA,CAAAC,cAAA,CAAAJ,CAAA,EAAAM,CAAA,EAAAG,CAAA,IAAAT,CAAA,CAAAM,CAAA,IAAAd,CAAA,CAAAc,CAAA,YAAAN,CAAA,CAAAH,OAAA,GAAAL,CAAA,EAAAG,CAAA,IAAAA,CAAA,CAAAe,GAAA,CAAAlB,CAAA,EAAAQ,CAAA,GAAAA,CAAA;AAS9C,MAAMW,WAAW,GAAGA,CAACC,IAA6B,EAAEC,OAAiB,KAAqB;EACxF,IAAIC,eAAe;EAEnB,QAAQF,IAAI;IACV,KAAK,OAAO;MACVE,eAAe,GAAGC,cAAM,CAACC,eAAe;MACxC;IACF,KAAK,OAAO;MACVF,eAAe,GAAGC,cAAM,CAACE,QAAQ;MACjC;IACF,KAAK,WAAW;IAChB;MACEH,eAAe,GAAGC,cAAM,CAACG,WAAW;EACxC;EAEA,OAAOC,uBAAU,CAACC,MAAM,CAAC;IACvBC,IAAI,EAAE;MACJC,KAAK,EAAET,OAAO,GAAG,EAAE,GAAG,EAAE;MACxBU,MAAM,EAAEV,OAAO,GAAG,EAAE,GAAG,EAAE;MACzBW,OAAO,EAAEX,OAAO,GAAG,CAAC,GAAG,GAAG;MAC1BY,gBAAgB,EAAE,CAAC;MACnBX,eAAe;MACfY,UAAU,EAAE,QAAQ;MACpBC,cAAc,EAAE,QAAQ;MACxBC,YAAY,EAAE;IAChB,CAAC;IACDC,QAAQ,EAAE;MACRC,UAAU,EAAE,KAAK;MACjBC,QAAQ,EAAElB,OAAO,GAAG,EAAE,GAAG;IAC3B,CAAC;IACDD,IAAI,EAAE;MACJU,KAAK,EAAET,OAAO,GAAG,EAAE,GAAG,EAAE;MACxBU,MAAM,EAAEV,OAAO,GAAG,EAAE,GAAG;IACzB;EACF,CAAC,CAAC;AACJ,CAAC;AAED,MAAMmB,IAAI,GAAGA,CAAC;EAACC,KAAK;EAAErB,IAAI;EAAEC;AAAwB,CAAC,KAAK;EACxD,MAAM,CAACqB,KAAK,EAAEC,QAAQ,CAAC,GAAG,IAAAC,eAAQ,EAAwB,IAAI,CAAC;EAE/D,IAAAC,gBAAS,EAAC,MAAM;IACd,MAAMC,MAAM,GAAG3B,WAAW,CAACC,IAAI,EAAEC,OAAO,CAAC;IACzCsB,QAAQ,CAACG,MAAM,CAAC;EAClB,CAAC,EAAE,CAACzB,OAAO,EAAED,IAAI,CAAC,CAAC;EAEnB,IAAI,CAACsB,KAAK,EAAE;IACV,OAAO,IAAI;EACb;EAEA,IAAIK,KAAK;EAET,QAAQ3B,IAAI;IACV,KAAK,OAAO;MACV2B,KAAK,gBAAGtD,MAAA,CAAAY,OAAA,CAAA2C,aAAA,CAACnD,UAAA,CAAAoD,gCAAS;QAACP,KAAK,EAAEA,KAAK,CAACtB,IAAK;QAAC8B,KAAK,EAAC;MAAM,CAAE,CAAC;MACrD;IACF,KAAK,OAAO;MACVH,KAAK,gBAAGtD,MAAA,CAAAY,OAAA,CAAA2C,aAAA,CAACnD,UAAA,CAAAsD,oBAAS;QAACT,KAAK,EAAEA,KAAK,CAACtB,IAAK;QAAC8B,KAAK,EAAC;MAAM,CAAE,CAAC;MACrD;IACF,KAAK,WAAW;IAChB;MACEH,KAAK,gBAAGtD,MAAA,CAAAY,OAAA,CAAA2C,aAAA,CAACpD,YAAA,CAAAwD,IAAI;QAACV,KAAK,EAAEA,KAAK,CAACL;MAAS,GAAEI,KAAY,CAAC;EACvD;EAEA,oBAAOhD,MAAA,CAAAY,OAAA,CAAA2C,aAAA,CAACpD,YAAA,CAAAyD,IAAI;IAACX,KAAK,EAAEA,KAAK,CAACb;EAAK,GAAEkB,KAAY,CAAC;AAChD,CAAC;AAAC,IAAAO,QAAA,GAAAC,OAAA,CAAAlD,OAAA,GAEamC,IAAI","ignoreList":[]}
+{"version":3,"file":"index.native.js","names":["_react","_interopRequireWildcard","require","_reactNative","_novaIcons","_colors","_getRequireWildcardCache","e","WeakMap","r","t","__esModule","default","has","get","n","__proto__","a","Object","defineProperty","getOwnPropertyDescriptor","u","hasOwnProperty","call","i","set","createStyle","icon","current","backgroundColor","COLORS","cm_positive_500","cm_negative_100","cm_grey_100","StyleSheet","create","step","width","height","opacity","marginHorizontal","alignItems","justifyContent","borderRadius","stepText","fontWeight","fontSize","Step","value","style","setStyle","useState","useEffect","_style","child","createElement","NovaCompositionCoorpacademyCheck","color","NovaSolidStatusClose","Text","View","_default","exports"],"sources":["../../../src/atom/status-item/index.native.tsx"],"sourcesContent":["import React, {useEffect, useState} from 'react';\nimport {StyleSheet, Text, TextStyle, View, ViewStyle} from 'react-native';\nimport {\n  NovaCompositionCoorpacademyCheck as RightIcon,\n  NovaSolidStatusClose as WrongIcon\n} from '@coorpacademy/nova-icons';\nimport {COLORS} from '../../variables/colors';\nimport {StatusItemProps} from './types';\n\ntype StyleSheetType = {\n  step: ViewStyle;\n  stepText: TextStyle;\n  icon: ViewStyle;\n};\n\nconst createStyle = (icon: StatusItemProps['icon'], current?: boolean): StyleSheetType => {\n  let backgroundColor;\n\n  switch (icon) {\n    case 'right':\n      backgroundColor = COLORS.cm_positive_500;\n      break;\n    case 'wrong':\n      backgroundColor = COLORS.cm_negative_100;\n      break;\n    case 'no-answer':\n    default:\n      backgroundColor = COLORS.cm_grey_100;\n  }\n\n  return StyleSheet.create({\n    step: {\n      width: current ? 40 : 32,\n      height: current ? 40 : 32,\n      opacity: current ? 1 : 0.5,\n      marginHorizontal: 8,\n      backgroundColor,\n      alignItems: 'center',\n      justifyContent: 'center',\n      borderRadius: 50\n    },\n    stepText: {\n      fontWeight: '600',\n      fontSize: current ? 16 : 12\n    },\n    icon: {\n      width: current ? 14 : 12,\n      height: current ? 14 : 12\n    }\n  });\n};\n\nconst Step = ({value, icon, current}: StatusItemProps) => {\n  const [style, setStyle] = useState<StyleSheetType | null>(null);\n\n  useEffect(() => {\n    const _style = createStyle(icon, current);\n    setStyle(_style);\n  }, [current, icon]);\n\n  if (!style) {\n    return null;\n  }\n\n  let child;\n\n  switch (icon) {\n    case 'right':\n      child = <RightIcon style={style.icon} color=\"#fff\" />;\n      break;\n    case 'wrong':\n      child = <WrongIcon style={style.icon} color=\"#fff\" />;\n      break;\n    case 'no-answer':\n    default:\n      child = <Text style={style.stepText}>{value}</Text>;\n  }\n\n  return <View style={style.step}>{child}</View>;\n};\n\nexport default Step;\n"],"mappings":"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","ignoreList":[]}

package/lib/molecule/base-modal/index.d.ts.map

@@ -1 +1 @@
-{"version":3,"file":"index.d.ts","sourceRoot":"","sources":["../../../src/molecule/base-modal/index.js"],"names":[],"mappings":";AAWA,yEAiMC"}
+{"version":3,"file":"index.d.ts","sourceRoot":"","sources":["../../../src/molecule/base-modal/index.js"],"names":[],"mappings":";AAWA,yEAoMC"}

package/lib/molecule/base-modal/index.js

@@ -111,7 +111,8 @@ const BaseModal = (props, context) => {
     } = confirmButton || {};
     const buttonConfirmColor = color || (0, _get2.default)('common.primary', skin);
     return /*#__PURE__*/_react.default.createElement("div", {
-      className: _style.default.footer
+      className: _style.default.footer,
+      "data-name": "modal-footer"
     }, /*#__PURE__*/_react.default.createElement("div", {
       className: _style.default.footerCTAWrapper
     }, onCancel && cancelLabel ? /*#__PURE__*/_react.default.createElement(_buttonLink.default, {
@@ -120,7 +121,7 @@ const BaseModal = (props, context) => {
       onClick: onCancel,
       label: cancelLabel,
       disabled: cancelDisabled,
-      'data-testid': `button-link-${cancelLabel}`
+      'data-testid': `button-link-cancel`
     }) : null, onConfirm && confirmLabel ? /*#__PURE__*/_react.default.createElement("div", null, /*#__PURE__*/_react.default.createElement(_buttonLink.default, _extends({
       customStyle: {
         backgroundColor: buttonConfirmColor,
@@ -146,7 +147,7 @@ const BaseModal = (props, context) => {
         }
       }
     } : {}, {
-      'data-testid': `button-link-${confirmLabel}`
+      'data-testid': `button-link-confirm`
     }))) : null), text ? /*#__PURE__*/_react.default.createElement("div", {
       className: `${_style.default.footerDescription} ${isError ? _style.default.footerDescriptionError : ''}`
     }, text) : null);
@@ -156,12 +157,17 @@ const BaseModal = (props, context) => {
     e?.stopPropagation();
     onClose();
   }
+  function handleModalOnClick(e) {
+    e?.stopPropagation();
+  }
   return /*#__PURE__*/_react.default.createElement("div", {
     className: _style.default.modalWrapper,
-    "data-testid": "modal"
+    "data-testid": "modal",
+    onClick: handleOnClose
   }, /*#__PURE__*/_react.default.createElement("div", {
     className: _style.default.modal,
-    style: customStyle
+    style: customStyle,
+    onClick: handleModalOnClick
   }, /*#__PURE__*/_react.default.createElement("header", {
     className: (0, _classnames.default)(_style.default.header, !description && _style.default.headerCentered)
   }, headerIcon?.name ? /*#__PURE__*/_react.default.createElement("div", {

package/lib/molecule/base-modal/index.js.map

@@ -1 +1 @@
-{"version":3,"file":"index.js","names":["_react","_interopRequireWildcard","require","_propTypes","_interopRequireDefault","_cssColorFunction","_classnames","_provider","_icon","_buttonLink","_colors","_style","_getRequireWildcardCache","e","WeakMap","r","t","__esModule","default","has","get","n","__proto__","a","Object","defineProperty","getOwnPropertyDescriptor","u","hasOwnProperty","call","i","set","_extends","assign","bind","arguments","length","apply","BaseModal","props","context","title","titleAriaLabel","description","headerIcon","children","isOpen","footer","onClose","onScroll","detectScrollbar","customStyle","skin","bodyRef","useRef","isScrollbarVisible","setIsScrollbarVisible","useState","checkScrollbar","bodyElement","current","scrollHeight","clientHeight","useEffect","debouncedCheckScrollbar","_debounce2","mutationObserver","MutationObserver","observe","childList","subtree","resizeObserver","ResizeObserver","disconnect","cancel","handleEscape","event","key","document","addEventListener","removeEventListener","Footer","useCallback","_isEmpty2","cancelButton","confirmButton","text","isError","label","cancelLabel","onCancel","disabled","cancelDisabled","confirmLabel","onConfirm","confirmDisabled","iconName","color","buttonConfirmColor","_get2","createElement","className","style","footerCTAWrapper","button","type","onClick","backgroundColor","paddingLeft","hoverBackgroundColor","convert","hoverColor","COLORS","white","icon","position","faIcon","name","size","padding","footerDescription","footerDescriptionError","handleOnClose","stopPropagation","modalWrapper","modal","classnames","header","headerCentered","iconColor","faSize","wrapperSize","headerContent","headerTitle","headerDescription","headerCloseIcon","ref","body","bodyWithoutScrollbar","contextTypes","Provider","childContextTypes","propTypes","process","env","NODE_ENV","PropTypes","string","shape","node","bool","oneOfType","func","boolean","objectOf","number","_default","exports"],"sources":["../../../src/molecule/base-modal/index.js"],"sourcesContent":["import React, {useCallback, useEffect, useRef, useState} from 'react';\nimport PropTypes from 'prop-types';\nimport {isEmpty, get, debounce} from 'lodash/fp';\nimport {convert} from 'css-color-function';\nimport classnames from 'classnames';\nimport Provider from '../../atom/provider';\nimport Icon from '../../atom/icon';\nimport ButtonLink from '../../atom/button-link';\nimport {COLORS} from '../../variables/colors';\nimport style from './style.css';\n\nconst BaseModal = (props, context) => {\n  const {\n    title,\n    titleAriaLabel,\n    description,\n    headerIcon,\n    children,\n    isOpen,\n    footer,\n    onClose,\n    onScroll,\n    detectScrollbar = false,\n    customStyle\n  } = props;\n  const {skin} = context;\n  const bodyRef = useRef(null);\n  const [isScrollbarVisible, setIsScrollbarVisible] = useState(!detectScrollbar);\n\n  const checkScrollbar = () => {\n    const bodyElement = bodyRef.current;\n    if (bodyElement) {\n      setIsScrollbarVisible(bodyElement.scrollHeight > bodyElement.clientHeight);\n    }\n  };\n\n  useEffect(() => {\n    if (!detectScrollbar) return;\n    const bodyElement = bodyRef.current;\n\n    if (!bodyElement) return;\n\n    const debouncedCheckScrollbar = debounce(100, () => {\n      checkScrollbar();\n    });\n\n    // Observer of the body content\n    const mutationObserver = new MutationObserver(() => {\n      debouncedCheckScrollbar();\n    });\n\n    mutationObserver.observe(bodyElement, {childList: true, subtree: true});\n\n    // Observer of the body size\n    const resizeObserver = new ResizeObserver(() => {\n      debouncedCheckScrollbar();\n    });\n\n    if (bodyRef.current) {\n      resizeObserver.observe(bodyRef.current);\n    }\n\n    checkScrollbar();\n\n    return () => {\n      mutationObserver.disconnect();\n      resizeObserver.disconnect();\n      debouncedCheckScrollbar.cancel();\n    };\n  }, [children, detectScrollbar]);\n\n  // Handle escape key press\n  useEffect(() => {\n    if (!isOpen || !onClose) return;\n\n    const handleEscape = event => {\n      if (event.key === 'Escape') {\n        onClose();\n      }\n    };\n\n    document.addEventListener('keydown', handleEscape);\n    return () => {\n      document.removeEventListener('keydown', handleEscape);\n    };\n  }, [isOpen, onClose]);\n\n  const Footer = useCallback(() => {\n    if (isEmpty(footer)) return null;\n    if (typeof footer === 'function') return footer();\n\n    const {cancelButton, confirmButton, text, isError} = footer;\n    const {label: cancelLabel, onCancel, disabled: cancelDisabled} = cancelButton || {};\n    const {\n      label: confirmLabel,\n      onConfirm,\n      disabled: confirmDisabled,\n      iconName,\n      color\n    } = confirmButton || {};\n    const buttonConfirmColor = color || get('common.primary', skin);\n\n    return (\n      <div className={style.footer}>\n        <div className={style.footerCTAWrapper}>\n          {onCancel && cancelLabel ? (\n            <ButtonLink\n              {...{\n                className: style.button,\n                type: 'secondary',\n                onClick: onCancel,\n                label: cancelLabel,\n                disabled: cancelDisabled,\n                'data-testid': `button-link-${cancelLabel}`\n              }}\n            />\n          ) : null}\n          {onConfirm && confirmLabel ? (\n            <div>\n              <ButtonLink\n                {...{\n                  customStyle: {backgroundColor: buttonConfirmColor, paddingLeft: '16px'},\n                  hoverBackgroundColor: convert(\n                    `hsl(from ${buttonConfirmColor} h s calc(l*(1 - 0.08)))`\n                  ),\n                  hoverColor: COLORS.white,\n                  className: style.button,\n                  type: 'primary',\n                  onClick: onConfirm,\n                  label: confirmLabel,\n                  disabled: confirmDisabled,\n                  ...(iconName\n                    ? {\n                        icon: {\n                          position: 'left',\n                          faIcon: {\n                            name: iconName,\n                            color: COLORS.white,\n                            size: 14,\n                            customStyle: {padding: 0}\n                          }\n                        }\n                      }\n                    : {}),\n                  'data-testid': `button-link-${confirmLabel}`\n                }}\n              />\n            </div>\n          ) : null}\n        </div>\n        {text ? (\n          <div\n            className={`${style.footerDescription} ${isError ? style.footerDescriptionError : ''}`}\n          >\n            {text}\n          </div>\n        ) : null}\n      </div>\n    );\n  }, [footer, skin]);\n\n  if (!isOpen || !title || !children) return null;\n\n  function handleOnClose(e) {\n    e?.stopPropagation();\n    onClose();\n  }\n\n  return (\n    <div className={style.modalWrapper} data-testid=\"modal\">\n      <div className={style.modal} style={customStyle}>\n        <header className={classnames(style.header, !description && style.headerCentered)}>\n          {headerIcon?.name ? (\n            <div className={style.headerIcon}>\n              <Icon\n                iconName={headerIcon.name}\n                iconColor={headerIcon.color}\n                backgroundColor={headerIcon.backgroundColor}\n                size={{faSize: 20, wrapperSize: 48}}\n              />\n            </div>\n          ) : null}\n          <div className={style.headerContent}>\n            <div className={style.headerTitle} aria-label={titleAriaLabel}>\n              {title}\n            </div>\n            {description ? <div className={style.headerDescription}>{description}</div> : null}\n          </div>\n          <div className={style.headerCloseIcon} onClick={handleOnClose} data-testid=\"close-icon\">\n            <Icon iconName=\"close\" backgroundColor=\"#F4F4F5\" size={{faSize: 14, wrapperSize: 28}} />\n          </div>\n        </header>\n        <div\n          ref={bodyRef}\n          className={isScrollbarVisible ? style.body : style.bodyWithoutScrollbar}\n          onScroll={onScroll}\n          data-testid=\"modal-body\"\n        >\n          {children}\n        </div>\n        <Footer />\n      </div>\n    </div>\n  );\n};\n\nBaseModal.contextTypes = {\n  skin: Provider.childContextTypes.skin\n};\n\nBaseModal.propTypes = {\n  title: PropTypes.string,\n  titleAriaLabel: PropTypes.string,\n  headerIcon: PropTypes.shape({\n    name: PropTypes.string,\n    color: PropTypes.string,\n    backgroundColor: PropTypes.string\n  }),\n  description: PropTypes.string,\n  children: PropTypes.node,\n  isOpen: PropTypes.bool,\n  footer: PropTypes.oneOfType([\n    PropTypes.func,\n    PropTypes.shape({\n      text: PropTypes.string,\n      isError: PropTypes.boolean,\n      cancelButton: PropTypes.shape({\n        label: PropTypes.string,\n        onCancel: PropTypes.func,\n        disabled: PropTypes.bool\n      }),\n      confirmButton: PropTypes.shape({\n        label: PropTypes.string,\n        onConfirm: PropTypes.func,\n        iconName: PropTypes.string,\n        disabled: PropTypes.bool,\n        color: PropTypes.string\n      })\n    })\n  ]),\n  onClose: PropTypes.func,\n  onScroll: PropTypes.func,\n  detectScrollbar: PropTypes.bool,\n  customStyle: PropTypes.objectOf(PropTypes.oneOfType([PropTypes.string, PropTypes.number]))\n};\n\nexport default BaseModal;\n"],"mappings":"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","ignoreList":[]}
+{"version":3,"file":"index.js","names":["_react","_interopRequireWildcard","require","_propTypes","_interopRequireDefault","_cssColorFunction","_classnames","_provider","_icon","_buttonLink","_colors","_style","_getRequireWildcardCache","e","WeakMap","r","t","__esModule","default","has","get","n","__proto__","a","Object","defineProperty","getOwnPropertyDescriptor","u","hasOwnProperty","call","i","set","_extends","assign","bind","arguments","length","apply","BaseModal","props","context","title","titleAriaLabel","description","headerIcon","children","isOpen","footer","onClose","onScroll","detectScrollbar","customStyle","skin","bodyRef","useRef","isScrollbarVisible","setIsScrollbarVisible","useState","checkScrollbar","bodyElement","current","scrollHeight","clientHeight","useEffect","debouncedCheckScrollbar","_debounce2","mutationObserver","MutationObserver","observe","childList","subtree","resizeObserver","ResizeObserver","disconnect","cancel","handleEscape","event","key","document","addEventListener","removeEventListener","Footer","useCallback","_isEmpty2","cancelButton","confirmButton","text","isError","label","cancelLabel","onCancel","disabled","cancelDisabled","confirmLabel","onConfirm","confirmDisabled","iconName","color","buttonConfirmColor","_get2","createElement","className","style","footerCTAWrapper","button","type","onClick","backgroundColor","paddingLeft","hoverBackgroundColor","convert","hoverColor","COLORS","white","icon","position","faIcon","name","size","padding","footerDescription","footerDescriptionError","handleOnClose","stopPropagation","handleModalOnClick","modalWrapper","modal","classnames","header","headerCentered","iconColor","faSize","wrapperSize","headerContent","headerTitle","headerDescription","headerCloseIcon","ref","body","bodyWithoutScrollbar","contextTypes","Provider","childContextTypes","propTypes","process","env","NODE_ENV","PropTypes","string","shape","node","bool","oneOfType","func","boolean","objectOf","number","_default","exports"],"sources":["../../../src/molecule/base-modal/index.js"],"sourcesContent":["import React, {useCallback, useEffect, useRef, useState} from 'react';\nimport PropTypes from 'prop-types';\nimport {isEmpty, get, debounce} from 'lodash/fp';\nimport {convert} from 'css-color-function';\nimport classnames from 'classnames';\nimport Provider from '../../atom/provider';\nimport Icon from '../../atom/icon';\nimport ButtonLink from '../../atom/button-link';\nimport {COLORS} from '../../variables/colors';\nimport style from './style.css';\n\nconst BaseModal = (props, context) => {\n  const {\n    title,\n    titleAriaLabel,\n    description,\n    headerIcon,\n    children,\n    isOpen,\n    footer,\n    onClose,\n    onScroll,\n    detectScrollbar = false,\n    customStyle\n  } = props;\n  const {skin} = context;\n  const bodyRef = useRef(null);\n  const [isScrollbarVisible, setIsScrollbarVisible] = useState(!detectScrollbar);\n\n  const checkScrollbar = () => {\n    const bodyElement = bodyRef.current;\n    if (bodyElement) {\n      setIsScrollbarVisible(bodyElement.scrollHeight > bodyElement.clientHeight);\n    }\n  };\n\n  useEffect(() => {\n    if (!detectScrollbar) return;\n    const bodyElement = bodyRef.current;\n\n    if (!bodyElement) return;\n\n    const debouncedCheckScrollbar = debounce(100, () => {\n      checkScrollbar();\n    });\n\n    // Observer of the body content\n    const mutationObserver = new MutationObserver(() => {\n      debouncedCheckScrollbar();\n    });\n\n    mutationObserver.observe(bodyElement, {childList: true, subtree: true});\n\n    // Observer of the body size\n    const resizeObserver = new ResizeObserver(() => {\n      debouncedCheckScrollbar();\n    });\n\n    if (bodyRef.current) {\n      resizeObserver.observe(bodyRef.current);\n    }\n\n    checkScrollbar();\n\n    return () => {\n      mutationObserver.disconnect();\n      resizeObserver.disconnect();\n      debouncedCheckScrollbar.cancel();\n    };\n  }, [children, detectScrollbar]);\n\n  // Handle escape key press\n  useEffect(() => {\n    if (!isOpen || !onClose) return;\n\n    const handleEscape = event => {\n      if (event.key === 'Escape') {\n        onClose();\n      }\n    };\n\n    document.addEventListener('keydown', handleEscape);\n    return () => {\n      document.removeEventListener('keydown', handleEscape);\n    };\n  }, [isOpen, onClose]);\n\n  const Footer = useCallback(() => {\n    if (isEmpty(footer)) return null;\n    if (typeof footer === 'function') return footer();\n\n    const {cancelButton, confirmButton, text, isError} = footer;\n    const {label: cancelLabel, onCancel, disabled: cancelDisabled} = cancelButton || {};\n    const {\n      label: confirmLabel,\n      onConfirm,\n      disabled: confirmDisabled,\n      iconName,\n      color\n    } = confirmButton || {};\n    const buttonConfirmColor = color || get('common.primary', skin);\n\n    return (\n      <div className={style.footer} data-name=\"modal-footer\">\n        <div className={style.footerCTAWrapper}>\n          {onCancel && cancelLabel ? (\n            <ButtonLink\n              {...{\n                className: style.button,\n                type: 'secondary',\n                onClick: onCancel,\n                label: cancelLabel,\n                disabled: cancelDisabled,\n                'data-testid': `button-link-cancel`\n              }}\n            />\n          ) : null}\n          {onConfirm && confirmLabel ? (\n            <div>\n              <ButtonLink\n                {...{\n                  customStyle: {backgroundColor: buttonConfirmColor, paddingLeft: '16px'},\n                  hoverBackgroundColor: convert(\n                    `hsl(from ${buttonConfirmColor} h s calc(l*(1 - 0.08)))`\n                  ),\n                  hoverColor: COLORS.white,\n                  className: style.button,\n                  type: 'primary',\n                  onClick: onConfirm,\n                  label: confirmLabel,\n                  disabled: confirmDisabled,\n                  ...(iconName\n                    ? {\n                        icon: {\n                          position: 'left',\n                          faIcon: {\n                            name: iconName,\n                            color: COLORS.white,\n                            size: 14,\n                            customStyle: {padding: 0}\n                          }\n                        }\n                      }\n                    : {}),\n                  'data-testid': `button-link-confirm`\n                }}\n              />\n            </div>\n          ) : null}\n        </div>\n        {text ? (\n          <div\n            className={`${style.footerDescription} ${isError ? style.footerDescriptionError : ''}`}\n          >\n            {text}\n          </div>\n        ) : null}\n      </div>\n    );\n  }, [footer, skin]);\n\n  if (!isOpen || !title || !children) return null;\n\n  function handleOnClose(e) {\n    e?.stopPropagation();\n    onClose();\n  }\n  function handleModalOnClick(e) {\n    e?.stopPropagation();\n  }\n\n  return (\n    <div className={style.modalWrapper} data-testid=\"modal\" onClick={handleOnClose}>\n      <div className={style.modal} style={customStyle} onClick={handleModalOnClick}>\n        <header className={classnames(style.header, !description && style.headerCentered)}>\n          {headerIcon?.name ? (\n            <div className={style.headerIcon}>\n              <Icon\n                iconName={headerIcon.name}\n                iconColor={headerIcon.color}\n                backgroundColor={headerIcon.backgroundColor}\n                size={{faSize: 20, wrapperSize: 48}}\n              />\n            </div>\n          ) : null}\n          <div className={style.headerContent}>\n            <div className={style.headerTitle} aria-label={titleAriaLabel}>\n              {title}\n            </div>\n            {description ? <div className={style.headerDescription}>{description}</div> : null}\n          </div>\n          <div className={style.headerCloseIcon} onClick={handleOnClose} data-testid=\"close-icon\">\n            <Icon iconName=\"close\" backgroundColor=\"#F4F4F5\" size={{faSize: 14, wrapperSize: 28}} />\n          </div>\n        </header>\n        <div\n          ref={bodyRef}\n          className={isScrollbarVisible ? style.body : style.bodyWithoutScrollbar}\n          onScroll={onScroll}\n          data-testid=\"modal-body\"\n        >\n          {children}\n        </div>\n        <Footer />\n      </div>\n    </div>\n  );\n};\n\nBaseModal.contextTypes = {\n  skin: Provider.childContextTypes.skin\n};\n\nBaseModal.propTypes = {\n  title: PropTypes.string,\n  titleAriaLabel: PropTypes.string,\n  headerIcon: PropTypes.shape({\n    name: PropTypes.string,\n    color: PropTypes.string,\n    backgroundColor: PropTypes.string\n  }),\n  description: PropTypes.string,\n  children: PropTypes.node,\n  isOpen: PropTypes.bool,\n  footer: PropTypes.oneOfType([\n    PropTypes.func,\n    PropTypes.shape({\n      text: PropTypes.string,\n      isError: PropTypes.boolean,\n      cancelButton: PropTypes.shape({\n        label: PropTypes.string,\n        onCancel: PropTypes.func,\n        disabled: PropTypes.bool\n      }),\n      confirmButton: PropTypes.shape({\n        label: PropTypes.string,\n        onConfirm: PropTypes.func,\n        iconName: PropTypes.string,\n        disabled: PropTypes.bool,\n        color: PropTypes.string\n      })\n    })\n  ]),\n  onClose: PropTypes.func,\n  onScroll: PropTypes.func,\n  detectScrollbar: PropTypes.bool,\n  customStyle: PropTypes.objectOf(PropTypes.oneOfType([PropTypes.string, PropTypes.number]))\n};\n\nexport default BaseModal;\n"],"mappings":"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","ignoreList":[]}

package/lib/molecule/card/favorite.d.ts.map

@@ -1 +1 @@
-{"version":3,"file":"favorite.d.ts","sourceRoot":"","sources":["../../../src/molecule/card/favorite.js"],"names":[],"mappings":";AAcA;;;;;;;;oCA+JC"}
+{"version":3,"file":"favorite.d.ts","sourceRoot":"","sources":["../../../src/molecule/card/favorite.js"],"names":[],"mappings":";AAWA;;;;;;;;oCA6JC"}

package/lib/molecule/card/favorite.js

@@ -10,10 +10,10 @@ var _react = _interopRequireWildcard(require("react"));
 var _propTypes = _interopRequireDefault(require("prop-types"));
 var _classnames = _interopRequireDefault(require("classnames"));
 var _uuid = require("uuid");
-var _novaIcons = require("@coorpacademy/nova-icons");
 var _provider = _interopRequireWildcard(require("../../atom/provider"));
 var _tooltip = _interopRequireWildcard(require("../../atom/tooltip"));
 var _button = _interopRequireDefault(require("../../atom/button"));
+var _icon = _interopRequireDefault(require("../../atom/icon"));
 var _favorite = _interopRequireDefault(require("./favorite.css"));
 function _getRequireWildcardCache(e) { if ("function" != typeof WeakMap) return null; var r = new WeakMap(), t = new WeakMap(); return (_getRequireWildcardCache = function (e) { return e ? t : r; })(e); }
 function _interopRequireWildcard(e, r) { if (!r && e && e.__esModule) return e; if (null === e || "object" != typeof e && "function" != typeof e) return { default: e }; var t = _getRequireWildcardCache(r); if (t && t.has(e)) return t.get(e); var n = { __proto__: null }, a = Object.defineProperty && Object.getOwnPropertyDescriptor; for (var u in e) if ("default" !== u && {}.hasOwnProperty.call(e, u)) { var i = a ? Object.getOwnPropertyDescriptor(e, u) : null; i && (i.get || i.set) ? Object.defineProperty(n, u, i) : n[u] = e[u]; } return n.default = e, t && t.set(e, n), n; }
@@ -36,7 +36,6 @@ const Favorite = ({
   }, [disabled, onFavoriteClick]);
   const primaryColor = (0, _get2.default)('common.primary', skin);
   const darkColor = (0, _get2.default)('common.dark', skin);
-  const brandColor = (0, _get2.default)('common.brand', skin);
   const buttonRef = (0, _react.useRef)(null);
   const allowToolTip = (0, _react.useMemo)(() => !(0, _isEmpty2.default)(removeFavoriteToolTip) && !(0, _isEmpty2.default)(addFavoriteToolTip), [addFavoriteToolTip, removeFavoriteToolTip]);
 
@@ -64,6 +63,7 @@ const Favorite = ({
   (0, _react.useEffect)(() => {
     if (!toolTipIsVisible) return;
     const hide = () => setToolTipIsVisible(false);
+    /* istanbul ignore next: guard for non-browser envs; not testable in jsdom */
     if (typeof window === 'undefined') {
       return;
     }
@@ -89,27 +89,26 @@ const Favorite = ({
     (0, _tooltip.toggleStateOnKeyPress)(toolTipIsVisible, setToolTipIsVisible, buttonRef)(event);
   }, [toolTipIsVisible]);
   const iconWrapperClassName = (0, _react.useMemo)(() => (0, _classnames.default)(_favorite.default.favorite, className, favorite && _favorite.default.selected), [className, favorite]);
-  const icon = (0, _react.useMemo)(() => favorite ? /*#__PURE__*/_react.default.createElement(_novaIcons.NovaCompositionCoorpacademyCheck
-  // eslint-disable-next-line css-modules/no-undef-class
-  , {
-    className: _favorite.default.checkIcon,
-    style: {
-      color: brandColor
+  const icon = (0, _react.useMemo)(() => favorite ? /*#__PURE__*/_react.default.createElement(_icon.default, {
+    iconName: 'check',
+    iconColor: primaryColor,
+    size: {
+      faSize: 14,
+      wrapperSize: 14
     },
-    width: 13,
-    height: 13,
     "data-testid": "favorite-check-icon",
     "aria-label": ariaLabel.removeFromFavorite
-  }) : /*#__PURE__*/_react.default.createElement(_novaIcons.NovaCompositionNavigationMore, {
+  }) : /*#__PURE__*/_react.default.createElement(_icon.default, {
+    iconName: 'plus',
+    iconColor: darkColor,
     className: _favorite.default.moreIcon,
-    style: {
-      color: darkColor
+    size: {
+      faSize: 14,
+      wrapperSize: 14
     },
-    width: 13,
-    height: 13,
     "data-testid": "favorite-add-icon",
     "aria-label": ariaLabel.addToFavorite
-  }), [ariaLabel.addToFavorite, ariaLabel.removeFromFavorite, brandColor, darkColor, favorite]);
+  }), [ariaLabel.addToFavorite, ariaLabel.removeFromFavorite, primaryColor, darkColor, favorite]);
   return /*#__PURE__*/_react.default.createElement("div", {
     className: _favorite.default.favoriteWrapper,
     "data-testid": "favorite-wrapper"