@instructure/outcomes-ui 2.1.9 → 3.0.0

package/lib/translated/fi/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/fi/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/fi/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_fi_number = Intl.NumberFormat("fi", { 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, _i, _v;
 
-  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, (_i = Math.floor(Math.abs(+_s)), _v = (_s + '.').split('.')[1].length, _i === 1 && _v === 0 ? "1 opiskelija" : _default_fi_number(tier.count) + " opiskelijaa")))));
 };
 
 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/fi/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/fi/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);

package/lib/translated/fi/components/OutcomeView/index.js

@@ -21,8 +21,6 @@ var _propTypes = _interopRequireDefault(require("prop-types"));
 
 var _uiText = require("@instructure/ui-text");
 
-var _uiThemeable = require("@instructure/ui-themeable");
-
 var _uiView = require("@instructure/ui-view");
 
 var _shapes = require("../../store/shapes.js");
@@ -35,21 +33,17 @@ var _index3 = _interopRequireDefault(require("./MasteryDescription/index.js"));
 
 var _sanitize = require("../../lib/sanitize.js");
 
+var _emotion = require("@instructure/emotion");
+
 var _theme = _interopRequireDefault(require("../theme.js"));
 
+var _styles = _interopRequireDefault(require("./styles.js"));
+
 var _proficienciesUtils = require("../../util/proficienciesUtils.js");
 
 var _dec, _class, _class2, _temp;
 
-var styles = {
-  componentId: 'eBKdC',
-  template: function template(theme) {
-    return "\n\n.outcomes-ui__OutcomeView--title {\n  margin: 2rem 0;\n  word-wrap: break-word; \n  overflow-wrap: break-word;\n}\n\n.outcomes-ui__OutcomeView--description {\n  margin: 2rem 0;\n}\n";
-  },
-  'title': 'outcomes-ui__OutcomeView--title',
-  'description': 'outcomes-ui__OutcomeView--description'
-};
-var OutcomeView = (_dec = (0, _uiThemeable.themeable)(_theme.default, styles), _dec(_class = (_temp = _class2 = /*#__PURE__*/function (_React$Component) {
+var OutcomeView = (_dec = (0, _emotion.withStyle)(_styles.default, _theme.default), _dec(_class = (_temp = _class2 = /*#__PURE__*/function (_React$Component) {
   (0, _inherits2.default)(OutcomeView, _React$Component);
 
   var _super = (0, _createSuper2.default)(OutcomeView);
@@ -106,45 +100,45 @@ var OutcomeView = (_dec = (0, _uiThemeable.themeable)(_theme.default, styles), _
       var scoringTiers = this.getScoringTiers();
       var displayMasteryInformation = this.getDisplayMasteryInformation();
       var displayMasteryCounts = scoringMethod && outcomeResult && displayMasteryInformation;
-      return /*#__PURE__*/_react.default.createElement("div", null, /*#__PURE__*/_react.default.createElement("div", {
-        className: styles.title,
+      return (0, _emotion.jsx)("div", null, (0, _emotion.jsx)("div", {
+        css: this.props.styles.title,
         "data-automation": "outcomeView__title"
-      }, /*#__PURE__*/_react.default.createElement(_uiText.Text, {
+      }, (0, _emotion.jsx)(_uiText.Text, {
         size: "x-large",
         transform: "uppercase"
-      }, title)), displayMasteryCounts && /*#__PURE__*/_react.default.createElement(_index2.default, {
+      }, title)), displayMasteryCounts && (0, _emotion.jsx)(_index2.default, {
         outcomeResult: outcomeResult,
         scoringMethod: scoringMethod
-      }), friendlyDescription && /*#__PURE__*/_react.default.createElement(_react.default.Fragment, null, /*#__PURE__*/_react.default.createElement(_uiView.View, {
+      }), friendlyDescription && (0, _emotion.jsx)(_react.default.Fragment, null, (0, _emotion.jsx)(_uiView.View, {
         as: "div",
         margin: "".concat(displayMasteryCounts ? 'medium' : 'x-small', " small 0 0"),
         padding: "small small x-small small",
         background: "secondary",
         "data-automation": "outcomeView__friendly_description_header"
-      }, /*#__PURE__*/_react.default.createElement(_uiText.Text, {
+      }, (0, _emotion.jsx)(_uiText.Text, {
         weight: "bold"
-      }, "Yst\xE4v\xE4llinen kuvaus")), /*#__PURE__*/_react.default.createElement(_uiView.View, {
+      }, "Yst\xE4v\xE4llinen kuvaus")), (0, _emotion.jsx)(_uiView.View, {
         as: "div",
         margin: "0 small 0 0",
         padding: "0 small small small",
         background: "secondary",
         "data-automation": "outcomeView__friendly_description_expanded"
-      }, /*#__PURE__*/_react.default.createElement(_uiText.Text, null, friendlyDescription))), /*#__PURE__*/_react.default.createElement("div", {
-        className: styles.description,
+      }, (0, _emotion.jsx)(_uiText.Text, null, friendlyDescription))), (0, _emotion.jsx)("div", {
+        css: this.props.styles.description,
         "data-automation": "outcomeView__description"
-      }, /*#__PURE__*/_react.default.createElement(_uiText.Text, {
+      }, (0, _emotion.jsx)(_uiText.Text, {
         size: "medium",
         wrap: "break-word"
-      }, /*#__PURE__*/_react.default.createElement("div", {
+      }, (0, _emotion.jsx)("div", {
         dangerouslySetInnerHTML: {
           // eslint-disable-line react/no-danger
           __html: (0, _sanitize.sanitizeHtml)(description)
         }
-      }))), scoringTiers && scoringMethod && displayMasteryInformation && /*#__PURE__*/_react.default.createElement(_index.default, {
+      }))), scoringTiers && scoringMethod && displayMasteryInformation && (0, _emotion.jsx)(_index.default, {
         outcomeResult: outcomeResult,
         scoringTiers: scoringTiers,
         scoringMethod: scoringMethod
-      }), displayMasteryDescription && displayMasteryInformation && /*#__PURE__*/_react.default.createElement(_index3.default, {
+      }), displayMasteryDescription && displayMasteryInformation && (0, _emotion.jsx)(_index3.default, {
         artifactTypeName: artifactTypeName,
         displayMasteryPercentText: displayMasteryPercentText,
         scoringMethod: scoringMethod,
@@ -165,7 +159,8 @@ var OutcomeView = (_dec = (0, _uiThemeable.themeable)(_theme.default, styles), _
   artifactTypeName: _propTypes.default.string,
   displayMasteryDescription: _propTypes.default.bool,
   displayMasteryPercentText: _propTypes.default.bool,
-  features: _propTypes.default.array
+  features: _propTypes.default.array,
+  styles: _shapes.stylesShape
 }, _class2.defaultProps = {
   context: null,
   outcomeResult: null,

package/lib/translated/fi/components/OutcomeView/styles.js

@@ -0,0 +1,22 @@
+"use strict";
+
+Object.defineProperty(exports, "__esModule", {
+  value: true
+});
+exports.default = void 0;
+
+var generateStyle = function generateStyle() {
+  return {
+    title: {
+      margin: '2rem 0',
+      wordWrap: 'break-word',
+      overflowWrap: 'break-word'
+    },
+    description: {
+      margin: '2rem 0'
+    }
+  };
+};
+
+var _default = generateStyle;
+exports.default = _default;

package/lib/translated/fi/components/OutcomeViewModal/__tests__/index.test.js

@@ -18,6 +18,8 @@ var _createMockStore = _interopRequireDefault(require("../../../test/createMockS
 
 var _immutable = require("immutable");
 
+var _index2 = _interopRequireDefault(require("../../OutcomeView/index.js"));
+
 describe('OutcomeViewModal', function () {
   function makeProps() {
     var props = arguments.length > 0 && arguments[0] !== void 0 ? arguments[0] : {};
@@ -91,6 +93,6 @@ describe('OutcomeViewModal', function () {
     var wrapper = (0, _enzyme.mount)( /*#__PURE__*/_react.default.createElement(_reactRedux.Provider, {
       store: store
     }, /*#__PURE__*/_react.default.createElement(_index.default, props)));
-    (0, _chai.expect)(wrapper.find('OutcomeView')).to.have.length(1);
+    (0, _chai.expect)(wrapper.find(_index2.default)).to.have.length(1);
   });
 });