@instructure/outcomes-ui 2.1.8 → 3.0.0

package/lib/translated/ru/components/OutcomeView/MasteryDescription/index.js

@@ -23,12 +23,16 @@ var _uiText = require("@instructure/ui-text");
 
 var _uiSpinner = require("@instructure/ui-spinner");
 
-var _uiThemeable = require("@instructure/ui-themeable");
-
 var _shapes = require("../../../store/shapes.js");
 
+var _constants = require("../../../constants.js");
+
+var _emotion = require("@instructure/emotion");
+
 var _theme = _interopRequireDefault(require("../../theme.js"));
 
+var _styles = _interopRequireDefault(require("./styles.js"));
+
 var _percent_ru_number = Intl.NumberFormat("ru", { style: "percent" }).format,
     _default_ru_number = Intl.NumberFormat("ru", { style: "decimal" }).format,
     _dec,
@@ -36,19 +40,29 @@ var _percent_ru_number = Intl.NumberFormat("ru", { style: "percent" }).format,
     _class2,
     _temp;
 
-var styles = {
-  componentId: 'IalyE',
-  template: function template(theme) {
-    return "\n\n.outcomes-ui__MasteryDescription--scoreMastery {\n  background-color: #F5F5F5;\n  border: solid 1px #999999;\n  border-radius: 0.25rem;\n  margin-top: 2rem;\n  padding: 1.0rem 1.0rem;\n}\n\n.outcomes-ui__MasteryDescription--scoreMasteryText {\n  margin-top: 1rem;\n}\n";
-  },
-  'scoreMastery': 'outcomes-ui__MasteryDescription--scoreMastery',
-  'scoreMasteryText': 'outcomes-ui__MasteryDescription--scoreMasteryText'
+var renderUserFacingMethod = function renderUserFacingMethod(scoringMethod, newDecayingAvgFFEnabled) {
+  var legacyDecayingAverage = "\u0423\u0441\u0432\u043E\u0435\u043D\u0438\u0435, \u0440\u0430\u0441\u0441\u0447\u0438\u0442\u044B\u0432\u0430\u0435\u043C\u043E\u0435 \u043F\u043E \u0441\u043D\u0438\u0436\u0430\u0435\u043C\u043E\u0439 \u0441\u0440\u0435\u0434\u043D\u0435\u0439 \u0432\u0435\u043B\u0438\u0447\u0438\u043D\u0435. \u041F\u043E\u0441\u043B\u0435\u0434\u043D\u0438\u0435 \u043F\u043E\u0434\u0441\u0447\u0435\u0442\u044B \u0432 \u043A\u0430\u0447\u0435\u0441\u0442\u0432\u0435 " + _percent_ru_number(scoringMethod.algorithm_data.decaying_average_percent) + " \u0443\u0434\u0435\u043B\u044C\u043D\u043E\u0433\u043E \u0437\u043D\u0430\u0447\u0435\u043D\u0438\u044F \u0443\u0441\u0432\u043E\u0435\u043D\u0438\u044F, \u0441\u0440\u0435\u0434\u043D\u0435\u0435 \u0437\u043D\u0430\u0447\u0435\u043D\u0438\u0435 \u043F\u043E\u0434\u0441\u0447\u0435\u0442\u0430 \u0432\u0441\u0435\u0445 \u0434\u0440\u0443\u0433\u0438\u0445 \u0440\u0435\u0437\u0443\u043B\u044C\u0442\u0430\u0442\u043E\u0432 \u0432 \u043A\u0430\u0447\u0435\u0441\u0442\u0432\u0435 " + _percent_ru_number(1.0 - scoringMethod.algorithm_data.decaying_average_percent) + " \u0443\u0434\u0435\u043B\u044C\u043D\u043E\u0433\u043E \u0437\u043D\u0430\u0447\u0435\u043D\u0438\u044F. \u0415\u0441\u043B\u0438 \u0440\u0435\u0437\u0443\u043B\u044C\u0442\u0430\u0442 \u0432\u0441\u0435\u0433\u043E \u043E\u0434\u0438\u043D, \u0442\u043E \u043F\u0440\u0438\u0441\u0432\u0430\u0438\u0432\u0430\u0435\u0442\u0441\u044F \u0442\u043E\u043B\u044C\u043A\u043E \u043E\u0434\u043D\u0430 \u043E\u0446\u0435\u043D\u043A\u0430.";
+
+  if (newDecayingAvgFFEnabled) {
+    switch (scoringMethod.algorithm) {
+      case 'decaying_average':
+        return "Mastery calculated by Weighted Average. Most recent counts as " + _percent_ru_number(scoringMethod.algorithm_data.decaying_average_percent) + " of mastery weight, average of all other results count as " + _percent_ru_number(1.0 - scoringMethod.algorithm_data.decaying_average_percent) + " of weight. If there is only one result, the single score will be returned.";
+
+      case 'standard_decaying_average':
+        return "Mastery calculated by Decaying Average. Between two assessments, the most recent assessment gets " + _percent_ru_number(scoringMethod.algorithm_data.standard_decaying_average_percent) + " weight, and the first gets " + _percent_ru_number(1.0 - scoringMethod.algorithm_data.standard_decaying_average_percent) + ". For each additional assessment, the sum of the previous score calculations decay by an additional " + _percent_ru_number(1.0 - scoringMethod.algorithm_data.standard_decaying_average_percent) + ". If there is only one result, the single score will be returned.";
+    }
+  } else {
+    return legacyDecayingAverage;
+  }
 };
 
-var scoringText = function scoringText(scoringMethod) {
+var scoringText = function scoringText(scoringMethod, newDecayingAvgFFEnabled) {
   switch (scoringMethod.algorithm) {
     case 'decaying_average':
-      return "\u0423\u0441\u0432\u043E\u0435\u043D\u0438\u0435, \u0440\u0430\u0441\u0441\u0447\u0438\u0442\u044B\u0432\u0430\u0435\u043C\u043E\u0435 \u043F\u043E \u0441\u043D\u0438\u0436\u0430\u0435\u043C\u043E\u0439 \u0441\u0440\u0435\u0434\u043D\u0435\u0439 \u0432\u0435\u043B\u0438\u0447\u0438\u043D\u0435. \u041F\u043E\u0441\u043B\u0435\u0434\u043D\u0438\u0435 \u043F\u043E\u0434\u0441\u0447\u0435\u0442\u044B \u0432 \u043A\u0430\u0447\u0435\u0441\u0442\u0432\u0435 " + _percent_ru_number(scoringMethod.algorithm_data.decaying_average_percent) + " \u0443\u0434\u0435\u043B\u044C\u043D\u043E\u0433\u043E \u0437\u043D\u0430\u0447\u0435\u043D\u0438\u044F \u0443\u0441\u0432\u043E\u0435\u043D\u0438\u044F, \u0441\u0440\u0435\u0434\u043D\u0435\u0435 \u0437\u043D\u0430\u0447\u0435\u043D\u0438\u0435 \u043F\u043E\u0434\u0441\u0447\u0435\u0442\u0430 \u0432\u0441\u0435\u0445 \u0434\u0440\u0443\u0433\u0438\u0445 \u0440\u0435\u0437\u0443\u043B\u044C\u0442\u0430\u0442\u043E\u0432 \u0432 \u043A\u0430\u0447\u0435\u0441\u0442\u0432\u0435 " + _percent_ru_number(1.0 - scoringMethod.algorithm_data.decaying_average_percent) + " \u0443\u0434\u0435\u043B\u044C\u043D\u043E\u0433\u043E \u0437\u043D\u0430\u0447\u0435\u043D\u0438\u044F. \u0415\u0441\u043B\u0438 \u0440\u0435\u0437\u0443\u043B\u044C\u0442\u0430\u0442 \u0432\u0441\u0435\u0433\u043E \u043E\u0434\u0438\u043D, \u0442\u043E \u043F\u0440\u0438\u0441\u0432\u0430\u0438\u0432\u0430\u0435\u0442\u0441\u044F \u0442\u043E\u043B\u044C\u043A\u043E \u043E\u0434\u043D\u0430 \u043E\u0446\u0435\u043D\u043A\u0430.";
+      return renderUserFacingMethod(scoringMethod, newDecayingAvgFFEnabled);
+
+    case 'standard_decaying_average':
+      return renderUserFacingMethod(scoringMethod, newDecayingAvgFFEnabled);
 
     case 'n_mastery':
       return "\u0423\u0441\u0432\u043E\u0435\u043D\u0438\u0435, \u0440\u0430\u0441\u0441\u0447\u0438\u0442\u044B\u0432\u0430\u0435\u043C\u043E\u0435 \u043F\u043E \u043A\u043E\u043B\u0438\u0447\u0435\u0441\u0442\u0432\u0443 n \u0440\u0430\u0437. \u0411\u043E\u043B\u044C\u0448\u0438\u043D\u0441\u0442\u0432\u043E \u0434\u043E\u0431\u0438\u0432\u0430\u044E\u0442\u0441\u044F \u0443\u0441\u0432\u043E\u0435\u043D\u0438\u044F \u043A\u0430\u043A \u043C\u0438\u043D\u0438\u043C\u0443\u043C " + _default_ru_number(scoringMethod.algorithm_data.n_mastery_count) + " \u0440\u0430\u0437 (\u0440\u0430\u0437\u0430).  \u041E\u0446\u0435\u043D\u043A\u0438 \u0432\u044B\u0448\u0435 \u0437\u043D\u0430\u0447\u0435\u043D\u0438\u044F \u0443\u0441\u0432\u043E\u0435\u043D\u0438\u044F \u0443\u0441\u0440\u0435\u0434\u043D\u044F\u044E\u0442\u0441\u044F \u0434\u043B\u044F \u0440\u0430\u0441\u0447\u0435\u0442\u0430 \u043E\u043A\u043E\u043D\u0447\u0430\u0442\u0435\u043B\u044C\u043D\u043E\u0439 \u043E\u0446\u0435\u043D\u043A\u0438.";
@@ -59,6 +73,9 @@ var scoringText = function scoringText(scoringMethod) {
     case 'latest':
       return "\u0423\u0441\u0432\u043E\u0435\u043D\u0438\u0435, \u0440\u0430\u0441\u0441\u0447\u0438\u0442\u044B\u0432\u0430\u0435\u043C\u043E\u0435 \u043F\u043E \u0441\u0430\u043C\u043E\u0439 \u043F\u043E\u0441\u043B\u0435\u0434\u043D\u0435\u0439 \u043E\u0446\u0435\u043D\u043A\u0435. \u041E\u0446\u0435\u043D\u043A\u0430 \u0443\u0441\u0432\u043E\u0435\u043D\u0438\u044F \u043E\u0442\u0440\u0430\u0436\u0430\u0435\u0442 \u043F\u043E\u0441\u043B\u0435\u0434\u043D\u0438\u0435 \u043F\u043E\u043B\u0443\u0447\u0435\u043D\u043D\u044B\u0435 \u043E\u0446\u0435\u043D\u043A\u0438.";
 
+    case 'average':
+      return "Mastery reflects Average Score. Calculated by dividing the sum of all item scores by the number of scores.";
+
     default:
       return '';
   }
@@ -68,7 +85,7 @@ var masteryText = function masteryText(masteryPercent, artifactTypeName) {
   return "\u041F\u0440\u0438 \u0441\u043E\u0433\u043B\u0430\u0441\u043E\u0432\u0430\u043D\u0438\u0438 \u0441 \u044D\u0442\u0438\u043C " + artifactTypeName + ", \u0435\u0441\u043B\u0438 \u0441\u0442\u0443\u0434\u0435\u043D\u0442 \u043F\u043E\u043B\u0443\u0447\u0430\u0435\u0442 \u043E\u0446\u0435\u043D\u043A\u0443 \u0432\u044B\u0448\u0435 " + _percent_ru_number(masteryPercent) + ", \u044D\u0442\u043E \u043E\u0437\u043D\u0430\u0447\u0430\u0435\u0442 \u0447\u0442\u043E \u043E\u043D \u0443\u0441\u0432\u043E\u0438\u043B \u043C\u0430\u0442\u0435\u0440\u0438\u0430\u043B.";
 };
 
-var MasteryDescription = (_dec = (0, _uiThemeable.themeable)(_theme.default, styles), _dec(_class = (_temp = _class2 = /*#__PURE__*/function (_React$Component) {
+var MasteryDescription = (_dec = (0, _emotion.withStyle)(_styles.default, _theme.default), _dec(_class = (_temp = _class2 = /*#__PURE__*/function (_React$Component) {
   (0, _inherits2.default)(MasteryDescription, _React$Component);
 
   var _super = (0, _createSuper2.default)(MasteryDescription);
@@ -85,22 +102,24 @@ var MasteryDescription = (_dec = (0, _uiThemeable.themeable)(_theme.default, sty
       var _this$props = this.props,
           artifactTypeName = _this$props.artifactTypeName,
           displayMasteryPercentText = _this$props.displayMasteryPercentText,
-          scoringMethod = _this$props.scoringMethod;
+          scoringMethod = _this$props.scoringMethod,
+          features = _this$props.features;
+      var newDecayingAvgFFEnabled = features.includes(_constants.NEW_DECAYING_AVERAGE_FF);
 
       if (!scoringMethod) {
-        return /*#__PURE__*/_react.default.createElement(_uiSpinner.Spinner, {
+        return (0, _emotion.jsx)(_uiSpinner.Spinner, {
           renderTitle: "\u0417\u0430\u0433\u0440\u0443\u0437\u043A\u0430"
         });
       }
 
-      return /*#__PURE__*/_react.default.createElement("div", {
-        className: styles.scoreMastery,
+      return (0, _emotion.jsx)("div", {
+        css: this.props.styles.scoreMastery,
         "data-automation": "outcomeView__scoreMethodDescription"
-      }, /*#__PURE__*/_react.default.createElement("div", null, /*#__PURE__*/_react.default.createElement(_uiText.Text, {
+      }, (0, _emotion.jsx)("div", null, (0, _emotion.jsx)(_uiText.Text, {
         size: "small"
-      }, scoringText(scoringMethod))), displayMasteryPercentText && artifactTypeName && /*#__PURE__*/_react.default.createElement("div", {
-        className: styles.scoreMasteryText
-      }, /*#__PURE__*/_react.default.createElement(_uiText.Text, {
+      }, scoringText(scoringMethod, newDecayingAvgFFEnabled))), displayMasteryPercentText && artifactTypeName && (0, _emotion.jsx)("div", {
+        css: this.props.styles.scoreMasteryText
+      }, (0, _emotion.jsx)(_uiText.Text, {
         size: "small"
       }, masteryText(scoringMethod.mastery_percent, artifactTypeName))));
     }
@@ -110,9 +129,12 @@ var MasteryDescription = (_dec = (0, _uiThemeable.themeable)(_theme.default, sty
 }(_react.default.Component), _class2.propTypes = {
   artifactTypeName: _propTypes.default.string,
   displayMasteryPercentText: _propTypes.default.bool.isRequired,
-  scoringMethod: _shapes.scoringMethodShape
+  scoringMethod: _shapes.scoringMethodShape,
+  features: _propTypes.default.array,
+  styles: _shapes.stylesShape
 }, _class2.defaultProps = {
   artifactTypeName: null,
-  scoringMethod: null
+  scoringMethod: null,
+  features: []
 }, _temp)) || _class);
 exports.default = MasteryDescription;

package/lib/translated/ru/components/OutcomeView/MasteryDescription/styles.js

@@ -0,0 +1,24 @@
+"use strict";
+
+Object.defineProperty(exports, "__esModule", {
+  value: true
+});
+exports.default = void 0;
+
+var generateStyle = function generateStyle() {
+  return {
+    scoreMastery: {
+      backgroundColor: '#F5F5F5',
+      border: 'solid 1px #999999',
+      borderRadius: '0.25rem',
+      marginTop: '2rem',
+      padding: '1.0rem 1.0rem'
+    },
+    scoreMasteryText: {
+      marginTop: '1rem'
+    }
+  };
+};
+
+var _default = generateStyle;
+exports.default = _default;

package/lib/translated/ru/components/OutcomeView/ScoringTiers/__tests__/index.test.js

@@ -16,21 +16,13 @@ var _index = _interopRequireDefault(require("../index.js"));
 
 var _checkA11y = _interopRequireDefault(require("../../../../test/checkA11y.js"));
 
-var styles = {
-  componentId: 'bCFPW',
-  template: function template(theme) {
-    return "\n\n.outcomes-ui__ScoringTiers--score {\n  border: 1px solid #ccc;\n  color: #888;\n  border-radius: 100%;\n  width: 2.25rem;\n  height: 2.25rem;\n  display: flex;\n  align-items: center;\n  justify-content: center;\n  padding-left: 0.1rem;\n  margin-right: 1.0rem;\n}\n\n.outcomes-ui__ScoringTiers--description {\n  flex: 1;\n  display: flex;\n  flex-direction: row;\n  align-items: center;\n}\n\n.outcomes-ui__ScoringTiers--mastery {\n  margin-top: 0.25rem;\n}\n\n.outcomes-ui__ScoringTiers--rating {\n  display: flex;\n  margin-bottom: 0.5rem;\n}\n\n.outcomes-ui__ScoringTiers--scoringTier {\n  margin-bottom: 1.0rem;\n}\n\n.outcomes-ui__ScoringTiers--masteryCount {\n  font-weight: bold;\n  margin-left: 3.5rem;\n}\n\n.outcomes-ui__ScoringTiers--gap:not(:empty) {\n  display: flex;\n  flex-direction: column;\n  align-items: flex-start;\n  margin-bottom: 1rem;\n  margin-left: 3.5rem;\n}\n\n.outcomes-ui__ScoringTiers--pill {\n  display: flex;\n  align-items: center;\n  font-size: 1.2rem;\n}\n\n.outcomes-ui__ScoringTiers--pill.outcomes-ui__ScoringTiers--mastery {\n  color: ".concat(theme.masteryColor || 'inherit', ";\n}\n\n.outcomes-ui__ScoringTiers--pill.outcomes-ui__ScoringTiers--average {\n  color: ").concat(theme.averageColor || 'inherit', "\n}\n\n.outcomes-ui__ScoringTiers--pill:not(:last-child) {\n  margin-bottom: 0.75rem;\n}\n");
-  },
-  'score': 'outcomes-ui__ScoringTiers--score',
-  'description': 'outcomes-ui__ScoringTiers--description',
-  'mastery': 'outcomes-ui__ScoringTiers--mastery',
-  'rating': 'outcomes-ui__ScoringTiers--rating',
-  'scoringTier': 'outcomes-ui__ScoringTiers--scoringTier',
-  'masteryCount': 'outcomes-ui__ScoringTiers--masteryCount',
-  'gap': 'outcomes-ui__ScoringTiers--gap',
-  'pill': 'outcomes-ui__ScoringTiers--pill',
-  'average': 'outcomes-ui__ScoringTiers--average'
-};
+var _styles = _interopRequireDefault(require("../styles.js"));
+
+var _findElementsWithStyle = require("../../../../util/__tests__/findElementsWithStyle.js");
+
+var _theme = _interopRequireDefault(require("../../../theme.js"));
+
+// import { find } from 'lodash'
 describe('OutcomeView ScoringTiers', function () {
   var scoringMethod = {
     id: 1,
@@ -47,43 +39,44 @@ describe('OutcomeView ScoringTiers', function () {
     averageScore: 0.6,
     outcomeId: 'foo'
   };
+  var scoringTiers = [{
+    id: 1,
+    description: 'Cri 1',
+    percent: 1.0
+  }, {
+    id: 2,
+    description: 'Cri 2',
+    percent: 0.6
+  }, {
+    id: 3,
+    description: 'Cri 3',
+    percent: 0.22222222
+  }];
 
   function makeProps() {
     var props = arguments.length > 0 && arguments[0] !== void 0 ? arguments[0] : {};
     return Object.assign({
       scoringMethod: scoringMethod,
-      scoringTiers: [{
-        id: 1,
-        description: 'Cri 1',
-        percent: 1.0
-      }, {
-        id: 2,
-        description: 'Cri 2',
-        percent: 0.6
-      }, {
-        id: 3,
-        description: 'Cri 3',
-        percent: 0.22222222
-      }]
+      scoringTiers: scoringTiers
     }, props);
   }
 
   it('displays scoring tiers', function () {
     var wrapper = (0, _enzyme.mount)( /*#__PURE__*/_react.default.createElement(_index.default, makeProps()));
-    (0, _chai.expect)(wrapper.find(".".concat(styles.rating))).to.have.length(3);
+    (0, _chai.expect)((0, _findElementsWithStyle.findElementsWithStyle)(wrapper, (0, _styles.default)(_theme.default).rating)).to.have.length(scoringTiers.length);
   });
 
-  var nextScore = function nextScore(pillWrapper) {
-    var gapNode = pillWrapper.closest(".".concat(styles.gap)).instance();
+  var nextScore = function nextScore(pillWrapper, wrapper) {
+    var gapNode = pillWrapper.closest('.outcomeViewGap').instance();
     var tierNode = gapNode.nextSibling;
-    var score = tierNode ? tierNode.getElementsByClassName(styles.score)[0].innerText : null;
+    var score = tierNode ? tierNode.getElementsByClassName('outcomeViewScore')[0].innerText : null;
     return score;
   };
 
   it('shows mastery between correct tiers', function () {
     var wrapper = (0, _enzyme.mount)( /*#__PURE__*/_react.default.createElement(_index.default, makeProps()));
     var mastery = wrapper.find(_uiIcons.IconStarSolid);
-    var score = nextScore(mastery);
+    var score = nextScore(mastery, wrapper);
     (0, _chai.expect)(score).to.equal('1.11');
   });
   it('shows average between the correct tiers', function () {
@@ -104,14 +97,15 @@ describe('OutcomeView ScoringTiers', function () {
       }, outcomeResult)
     });
     var wrapper = (0, _enzyme.mount)( /*#__PURE__*/_react.default.createElement(_index.default, props));
-    var gap = wrapper.find(_uiIcons.IconStarSolid).closest(".".concat(styles.gap));
-    (0, _chai.expect)(gap.childAt(0).hasClass(styles.mastery)).to.be.true;
-    (0, _chai.expect)(gap.childAt(1).hasClass(styles.average)).to.be.true;
+    var gap = wrapper.find(_uiIcons.IconStarSolid).closest('.outcomeViewGap');
+    (0, _chai.expect)(gap.childAt(0).find('span').at(0).hasClass('outcomeViewMastery')).to.be.true;
+    (0, _chai.expect)(gap.childAt(1).find('span').at(0).hasClass('outcomeViewAverage')).to.be.true;
   });
   it('rounds mastery points', function () {
     var props = makeProps();
     var wrapper = (0, _enzyme.mount)( /*#__PURE__*/_react.default.createElement(_index.default, props));
-    var score = wrapper.find(".".concat(styles.rating)).last().find(".".concat(styles.score));
+    var rating = (0, _findElementsWithStyle.findElementsWithStyle)(wrapper, (0, _styles.default)(_theme.default).rating).last();
+    var score = (0, _findElementsWithStyle.findElementsWithStyle)(rating, (0, _styles.default)(_theme.default).score);
     (0, _chai.expect)(score.text()).to.equal('1.11');
   });
   it('renders tier mastery count', function () {
@@ -124,7 +118,7 @@ describe('OutcomeView ScoringTiers', function () {
       }]
     });
     var wrapper = (0, _enzyme.mount)( /*#__PURE__*/_react.default.createElement(_index.default, props));
-    var txt = wrapper.find(".".concat(styles.masteryCount)).find('Text');
+    var txt = (0, _findElementsWithStyle.findElementsWithStyle)(wrapper, (0, _styles.default)(_theme.default).masteryCount).find('Text');
     (0, _chai.expect)(txt.first().text()).to.match(/Students/);
   });
   it('meets a11y standards', function () {

package/lib/translated/ru/components/OutcomeView/ScoringTiers/index.js

@@ -17,21 +17,19 @@ var _inherits2 = _interopRequireDefault(require("@babel/runtime/helpers/inherits
 
 var _createSuper2 = _interopRequireDefault(require("@babel/runtime/helpers/createSuper"));
 
-var _defineProperty2 = _interopRequireDefault(require("@babel/runtime/helpers/defineProperty"));
+var _objectSpread2 = _interopRequireDefault(require("@babel/runtime/helpers/objectSpread2"));
 
 var _react = _interopRequireDefault(require("react"));
 
 var _propTypes = _interopRequireDefault(require("prop-types"));
 
-var _classnames = _interopRequireDefault(require("classnames"));
-
 var _uiIcons = require("@instructure/ui-icons");
 
 var _uiText = require("@instructure/ui-text");
 
 var _uiPill = require("@instructure/ui-pill");
 
-var _uiThemeable = require("@instructure/ui-themeable");
+var _emotion = require("@instructure/emotion");
 
 var _shapes = require("../../../store/shapes.js");
 
@@ -39,28 +37,14 @@ var _convertToPoints = _interopRequireDefault(require("../convertToPoints.js"));
 
 var _theme = _interopRequireDefault(require("../../theme.js"));
 
+var _styles = _interopRequireDefault(require("./styles.js"));
+
 var _default_ru_number = Intl.NumberFormat("ru", { style: "decimal" }).format,
     _dec,
     _class,
     _class2,
     _temp;
 
-var styles = {
-  componentId: 'bCFPW',
-  template: function template(theme) {
-    return "\n\n.outcomes-ui__ScoringTiers--score {\n  border: 1px solid #ccc;\n  color: #888;\n  border-radius: 100%;\n  width: 2.25rem;\n  height: 2.25rem;\n  display: flex;\n  align-items: center;\n  justify-content: center;\n  padding-left: 0.1rem;\n  margin-right: 1.0rem;\n}\n\n.outcomes-ui__ScoringTiers--description {\n  flex: 1;\n  display: flex;\n  flex-direction: row;\n  align-items: center;\n}\n\n.outcomes-ui__ScoringTiers--mastery {\n  margin-top: 0.25rem;\n}\n\n.outcomes-ui__ScoringTiers--rating {\n  display: flex;\n  margin-bottom: 0.5rem;\n}\n\n.outcomes-ui__ScoringTiers--scoringTier {\n  margin-bottom: 1.0rem;\n}\n\n.outcomes-ui__ScoringTiers--masteryCount {\n  font-weight: bold;\n  margin-left: 3.5rem;\n}\n\n.outcomes-ui__ScoringTiers--gap:not(:empty) {\n  display: flex;\n  flex-direction: column;\n  align-items: flex-start;\n  margin-bottom: 1rem;\n  margin-left: 3.5rem;\n}\n\n.outcomes-ui__ScoringTiers--pill {\n  display: flex;\n  align-items: center;\n  font-size: 1.2rem;\n}\n\n.outcomes-ui__ScoringTiers--pill.outcomes-ui__ScoringTiers--mastery {\n  color: ".concat(theme.masteryColor || 'inherit', ";\n}\n\n.outcomes-ui__ScoringTiers--pill.outcomes-ui__ScoringTiers--average {\n  color: ").concat(theme.averageColor || 'inherit', "\n}\n\n.outcomes-ui__ScoringTiers--pill:not(:last-child) {\n  margin-bottom: 0.75rem;\n}\n");
-  },
-  'score': 'outcomes-ui__ScoringTiers--score',
-  'description': 'outcomes-ui__ScoringTiers--description',
-  'mastery': 'outcomes-ui__ScoringTiers--mastery',
-  'rating': 'outcomes-ui__ScoringTiers--rating',
-  'scoringTier': 'outcomes-ui__ScoringTiers--scoringTier',
-  'masteryCount': 'outcomes-ui__ScoringTiers--masteryCount',
-  'gap': 'outcomes-ui__ScoringTiers--gap',
-  'pill': 'outcomes-ui__ScoringTiers--pill',
-  'average': 'outcomes-ui__ScoringTiers--average'
-};
-
 var valueBetweenTiers = function valueBetweenTiers(value, upperTier, lowerTier) {
   if (upperTier && value > upperTier.percent) {
     return false;
@@ -73,87 +57,95 @@ var valueBetweenTiers = function valueBetweenTiers(value, upperTier, lowerTier)
   return true;
 };
 
-var renderTier = function renderTier(scoringMethod, tier) {
+var renderTier = function renderTier(scoringMethod, tier, styles) {
   var _s, _n, _v, _i;
 
-  return /*#__PURE__*/_react.default.createElement("div", {
+  return (0, _emotion.jsx)("div", {
     key: tier.id,
-    className: styles.scoringTier,
+    css: styles.scoringTier,
     "data-automation": "outcomeView__scoringTier"
-  }, /*#__PURE__*/_react.default.createElement("div", {
-    className: styles.rating
-  }, /*#__PURE__*/_react.default.createElement("div", {
-    className: styles.score,
+  }, (0, _emotion.jsx)("div", {
+    css: styles.rating
+  }, (0, _emotion.jsx)("div", {
+    css: styles.score,
+    className: "outcomeViewScore",
     "data-automation": "outcomeView__score"
-  }, /*#__PURE__*/_react.default.createElement(_uiText.Text, {
+  }, (0, _emotion.jsx)(_uiText.Text, {
     size: "medium"
-  }, (0, _convertToPoints.default)(tier.percent, scoringMethod))), /*#__PURE__*/_react.default.createElement("div", {
-    className: styles.description,
+  }, (0, _convertToPoints.default)(tier.percent, scoringMethod))), (0, _emotion.jsx)("div", {
+    css: styles.description,
     "data-automation": "outcomeView__description"
-  }, /*#__PURE__*/_react.default.createElement(_uiText.Text, {
+  }, (0, _emotion.jsx)(_uiText.Text, {
     size: "small"
-  }, tier.description))), tier.count != null && /*#__PURE__*/_react.default.createElement("div", {
-    className: styles.masteryCount,
+  }, tier.description))), tier.count != null && (0, _emotion.jsx)("div", {
+    css: styles.masteryCount,
     "data-automation": "outcomeView__masteryCount"
-  }, /*#__PURE__*/_react.default.createElement(_uiText.Text, {
+  }, (0, _emotion.jsx)(_uiText.Text, {
     size: "small"
   }, (_s = tier.count, _n = +_s, (_v = (_s + '.').split('.')[1].length, _i = Math.floor(Math.abs(+_s)), _v === 0 && _i % 10 === 1 && _i % 100 !== 11 ? "1 \u0441\u0442\u0443\u0434\u0435\u043D\u0442" : _default_ru_number(tier.count) + " \u0421\u0442\u0443\u0434\u0435\u043D\u0442\u044B")))));
 };
 
 var ScorePill = function ScorePill(_ref) {
-  var _classNames;
-
   var className = _ref.className,
       icon = _ref.icon,
       text = _ref.text,
-      variant = _ref.variant;
-  var outerStyle = (0, _classnames.default)((_classNames = {}, (0, _defineProperty2.default)(_classNames, styles.pill, true), (0, _defineProperty2.default)(_classNames, className, true), _classNames));
-  return /*#__PURE__*/_react.default.createElement("span", {
-    className: outerStyle,
-    "data-automation": "outcomeView__".concat(variant, "Pill")
-  }, icon, "\xA0", /*#__PURE__*/_react.default.createElement(_uiPill.Pill, {
-    text: text,
-    variant: variant
-  }));
+      variant = _ref.variant,
+      styles = _ref.styles,
+      method = _ref.method;
+  var outerStyle = (0, _objectSpread2.default)((0, _objectSpread2.default)({}, styles.pill), className);
+  return (0, _emotion.jsx)("span", {
+    css: outerStyle,
+    "data-automation": "outcomeView__".concat(variant, "Pill"),
+    className: "outcomeView".concat(method)
+  }, icon, "\xA0", (0, _emotion.jsx)(_uiPill.Pill, {
+    color: variant
+  }, text));
 }; // eslint-disable-next-line immutable/no-mutation
 
 
 ScorePill.propTypes = {
-  className: _propTypes.default.string.isRequired,
+  className: _propTypes.default.object.isRequired,
   icon: _propTypes.default.node.isRequired,
   text: _propTypes.default.string.isRequired,
-  variant: _propTypes.default.string.isRequired
+  variant: _propTypes.default.string.isRequired,
+  styles: _propTypes.default.object.isRequired,
+  method: _propTypes.default.string.isRequired
 };
 
-var renderGap = function renderGap(scoringMethod, outcomeResult, upperTier, lowerTier) {
+var renderGap = function renderGap(styles, scoringMethod, outcomeResult, upperTier, lowerTier) {
   var mastery = scoringMethod.mastery_percent;
   var average = outcomeResult ? outcomeResult.averageScore : null;
-  var components = [valueBetweenTiers(mastery, upperTier, lowerTier) && /*#__PURE__*/_react.default.createElement(ScorePill, {
+  var components = [valueBetweenTiers(mastery, upperTier, lowerTier) && (0, _emotion.jsx)(ScorePill, {
     key: "mastery",
-    text: "Mastery ".concat((0, _convertToPoints.default)(mastery, scoringMethod), " pts"),
+    text: "MASTERY ".concat((0, _convertToPoints.default)(mastery, scoringMethod), " PTS"),
     className: styles.mastery,
     variant: "success",
-    icon: /*#__PURE__*/_react.default.createElement(_uiIcons.IconStarSolid, {
+    icon: (0, _emotion.jsx)(_uiIcons.IconStarSolid, {
       "data-automation": "outcomeView__masteryStar"
-    })
+    }),
+    styles: styles,
+    method: "Mastery"
   })];
 
   if (average !== null) {
-    components.push(valueBetweenTiers(average, upperTier, lowerTier) && /*#__PURE__*/_react.default.createElement(ScorePill, {
+    components.push(valueBetweenTiers(average, upperTier, lowerTier) && (0, _emotion.jsx)(ScorePill, {
       key: "average",
-      text: "Avg. Score ".concat((0, _convertToPoints.default)(average, scoringMethod), " pts"),
+      text: "AVG. SCORE ".concat((0, _convertToPoints.default)(average, scoringMethod), " PTS"),
       className: styles.average,
-      variant: "primary",
-      icon: /*#__PURE__*/_react.default.createElement(_uiIcons.IconEmptyLine, null)
+      variant: "info",
+      icon: (0, _emotion.jsx)(_uiIcons.IconEmptyLine, null),
+      styles: styles,
+      method: "Average"
     }));
   }
 
-  return /*#__PURE__*/_react.default.createElement("div", {
-    className: styles.gap
+  return (0, _emotion.jsx)("div", {
+    css: styles.gap,
+    className: "outcomeViewGap"
   }, average !== null && average <= mastery ? components : components.reverse());
 };
 
-var ScoringTiers = (_dec = (0, _uiThemeable.themeable)(_theme.default, styles), _dec(_class = (_temp = _class2 = /*#__PURE__*/function (_React$Component) {
+var ScoringTiers = (_dec = (0, _emotion.withStyle)(_styles.default, _theme.default), _dec(_class = (_temp = _class2 = /*#__PURE__*/function (_React$Component) {
   (0, _inherits2.default)(ScoringTiers, _React$Component);
 
   var _super = (0, _createSuper2.default)(ScoringTiers);
@@ -167,14 +159,16 @@ var ScoringTiers = (_dec = (0, _uiThemeable.themeable)(_theme.default, styles),
     key: "render",
     value: // eslint-disable-next-line no-undef
     function render() {
+      var _this = this;
+
       var _this$props = this.props,
           outcomeResult = _this$props.outcomeResult,
           scoringTiers = _this$props.scoringTiers,
           scoringMethod = _this$props.scoringMethod;
-      return /*#__PURE__*/_react.default.createElement("div", {
+      return (0, _emotion.jsx)("div", {
         "data-automation": "outcomeView__scoringTiers"
-      }, renderGap.apply(void 0, [scoringMethod, outcomeResult, null].concat((0, _toConsumableArray2.default)(scoringTiers.slice(0, 1)))), scoringTiers.map(function (tier, i) {
-        return [renderTier(scoringMethod, tier), renderGap.apply(void 0, [scoringMethod, outcomeResult].concat((0, _toConsumableArray2.default)(scoringTiers.slice(i, i + 2))))];
+      }, renderGap.apply(void 0, [this.props.styles, scoringMethod, outcomeResult, null].concat((0, _toConsumableArray2.default)(scoringTiers.slice(0, 1)))), scoringTiers.map(function (tier, i) {
+        return [renderTier(scoringMethod, tier, _this.props.styles), renderGap.apply(void 0, [_this.props.styles, scoringMethod, outcomeResult].concat((0, _toConsumableArray2.default)(scoringTiers.slice(i, i + 2))))];
       }));
     }
   }]);
@@ -183,7 +177,8 @@ var ScoringTiers = (_dec = (0, _uiThemeable.themeable)(_theme.default, styles),
 }(_react.default.Component), _class2.propTypes = {
   scoringTiers: _propTypes.default.arrayOf(_shapes.scoringTierShape).isRequired,
   scoringMethod: _shapes.scoringMethodShape.isRequired,
-  outcomeResult: _shapes.outcomeResultShape
+  outcomeResult: _shapes.outcomeResultShape,
+  styles: _shapes.stylesShape
 }, _class2.defaultProps = {
   outcomeResult: null
 }, _temp)) || _class);

package/lib/translated/ru/components/OutcomeView/ScoringTiers/styles.js

@@ -0,0 +1,72 @@
+"use strict";
+
+Object.defineProperty(exports, "__esModule", {
+  value: true
+});
+exports.default = void 0;
+
+var generateStyle = function generateStyle(componentTheme) {
+  return {
+    score: {
+      border: '1px solid #ccc',
+      color: '#888',
+      borderRadius: '100%',
+      width: '2.25rem',
+      height: '2.25rem',
+      display: 'flex',
+      alignItems: 'center',
+      justifyContent: 'center',
+      paddingLeft: '0.1rem',
+      marginRight: '1.0rem'
+    },
+    description: {
+      flex: 1,
+      display: 'flex',
+      flexDirection: 'row',
+      alignItems: 'center'
+    },
+    rating: {
+      display: 'flex',
+      marginBottom: '0.5rem'
+    },
+    scoringTier: {
+      marginBottom: '1.0rem'
+    },
+    masteryCount: {
+      fontWeight: 'bold',
+      marginLeft: '3.5rem'
+    },
+    gap: {
+      display: 'flex',
+      flexDirection: 'column',
+      alignItems: 'flex-start',
+      marginBottom: '1rem',
+      marginLeft: '3.5rem'
+    },
+    pill: {
+      display: 'flex',
+      alignItems: 'center',
+      fontSize: '1.2rem',
+      '.pill:not(:last-child)': {
+        marginBottom: '0.75rem'
+      }
+    },
+    iconMastery: {
+      marginRight: '0.5rem',
+      color: componentTheme.masteryColor
+    },
+    iconAverage: {
+      marginRight: '0.5rem',
+      color: componentTheme.averageColor
+    },
+    mastery: {
+      color: componentTheme.masteryColor
+    },
+    average: {
+      color: componentTheme.averageColor
+    }
+  };
+};
+
+var _default = generateStyle;
+exports.default = _default;

package/lib/translated/ru/components/OutcomeView/__tests__/index.test.js

@@ -41,7 +41,7 @@ var sharedSpecs = function sharedSpecs(makeProps) {
         masteryCount: 50
       }
     });
-    var wrapper = (0, _enzyme.shallow)( /*#__PURE__*/_react.default.createElement(_index.default, props), {
+    var wrapper = (0, _enzyme.mount)( /*#__PURE__*/_react.default.createElement(_index.default, props), {
       disableLifecycleMethods: true
     });
     (0, _chai.expect)(wrapper.find(_index2.default)).to.have.length(1);
@@ -129,7 +129,7 @@ describe('OutcomeView', function () {
     var props = makeProps({
       displayMasteryDescription: true
     });
-    var wrapper = (0, _enzyme.shallow)( /*#__PURE__*/_react.default.createElement(_index.default, props), {
+    var wrapper = (0, _enzyme.mount)( /*#__PURE__*/_react.default.createElement(_index.default, props), {
       disableLifecycleMethods: true
     });
     var scoreMastery = wrapper.find(_index3.default);
@@ -146,7 +146,7 @@ describe('OutcomeView', function () {
     (0, _chai.expect)(scoreMastery.length).to.equal(0);
   });
   it('displays scoring tiers if scoring method and tiers defined', function () {
-    var wrapper = (0, _enzyme.shallow)( /*#__PURE__*/_react.default.createElement(_index.default, makeProps()), {
+    var wrapper = (0, _enzyme.mount)( /*#__PURE__*/_react.default.createElement(_index.default, makeProps()), {
       disableLifecycleMethods: true
     });
     (0, _chai.expect)(wrapper.find(_index4.default)).to.have.length(1);
@@ -203,7 +203,7 @@ describe('OutcomeView', function () {
             masteryCount: 50
           }
         });
-        var wrapper = (0, _enzyme.shallow)( /*#__PURE__*/_react.default.createElement(_index.default, props), {
+        var wrapper = (0, _enzyme.mount)( /*#__PURE__*/_react.default.createElement(_index.default, props), {
           disableLifecycleMethods: true
         });
         (0, _chai.expect)(wrapper.find(_index4.default)).to.have.length(1);
@@ -216,7 +216,7 @@ describe('OutcomeView', function () {
           },
           scoringTiers: defaultProps.scoringTiers
         });
-        var wrapper = (0, _enzyme.shallow)( /*#__PURE__*/_react.default.createElement(_index.default, props), {
+        var wrapper = (0, _enzyme.mount)( /*#__PURE__*/_react.default.createElement(_index.default, props), {
           disableLifecycleMethods: true
         });
         (0, _chai.expect)(wrapper.find(_index4.default).prop('scoringTiers')).to.deep.equal(defaultProps.scoringTiers);
@@ -229,7 +229,7 @@ describe('OutcomeView', function () {
             masteryCount: 50
           }
         });
-        var wrapper = (0, _enzyme.shallow)( /*#__PURE__*/_react.default.createElement(_index.default, props), {
+        var wrapper = (0, _enzyme.mount)( /*#__PURE__*/_react.default.createElement(_index.default, props), {
           disableLifecycleMethods: true
         });
         var scoreMastery = wrapper.find(_index3.default);