@instructure/outcomes-ui 2.1.9 → 3.0.0

package/es/translated/en-GB-x-ukhe/components/OutcomesPerStudent/Header/index.js

@@ -5,25 +5,21 @@ import _createSuper from "@babel/runtime/helpers/esm/createSuper";
 
 var _dec, _class, _class2, _temp;
 
+/** @jsx jsx */
 import React from 'react';
 import PropTypes from 'prop-types';
 import { AccessibleContent, PresentationContent } from '@instructure/ui-a11y-content';
 import { Text } from '@instructure/ui-text';
 import { Link } from '@instructure/ui-link';
 import { Tooltip } from '@instructure/ui-tooltip';
-import { themeable } from '@instructure/ui-themeable';
 import { TruncateText } from '@instructure/ui-truncate-text';
+import { withStyle, jsx } from '@instructure/emotion';
 import OutcomeViewModal from "../../OutcomeViewModal/index.js";
 import HeaderDetails from "../HeaderDetails/index.js";
-import theme from "../../theme.js";
-var styles = {
-  componentId: 'fbTpU',
-  template: function template(theme) {
-    return "\n\n.outcomes-ui__Header--header {\n  box-sizing: border-box;\n  display: flex;\n  flex-direction: column;\n  font-weight: normal;\n  line-height: 1.3rem;\n  text-align: left;\n}\n\n[dir=\"ltr\"] .outcomes-ui__Header--header {\n  text-align: left;\n}\n\n[dir=\"rtl\"] .outcomes-ui__Header--header {\n  text-align: left;\n}\n";
-  },
-  'header': 'outcomes-ui__Header--header'
-};
-var Header = (_dec = themeable(theme, styles), _dec(_class = (_temp = _class2 = /*#__PURE__*/function (_React$Component) {
+import generateComponentTheme from "../../theme.js";
+import generateStyle from "./styles.js";
+import { stylesShape } from "../../../store/shapes.js";
+var Header = (_dec = withStyle(generateStyle, generateComponentTheme), _dec(_class = (_temp = _class2 = /*#__PURE__*/function (_React$Component) {
   _inherits(Header, _React$Component);
 
   var _super = _createSuper(Header);
@@ -37,22 +33,26 @@ var Header = (_dec = themeable(theme, styles), _dec(_class = (_temp = _class2 =
 
     _this = _super.call(this, props);
 
+    _this.handleUpdate = function (isTruncated) {
+      if (isTruncated !== _this.state.showTooltip) {
+        _this.setState({
+          showTooltip: isTruncated
+        });
+      }
+    };
+
     _this.renderTitle = function (outcome) {
       var viewReportAlignment = _this.props.viewReportAlignment;
-      return /*#__PURE__*/React.createElement(Link, {
+      return jsx(Link, {
         onClick: viewReportAlignment
-      }, /*#__PURE__*/React.createElement(Text, {
+      }, jsx(Text, {
         size: "medium",
         transform: "uppercase"
-      }, /*#__PURE__*/React.createElement(TruncateText, {
+      }, jsx(TruncateText, {
         maxLines: 1,
         position: 'middle',
-        onUpdate: function onUpdate(isTruncated) {
-          return _this.setState({
-            showTooltip: isTruncated
-          });
-        }
-      }, /*#__PURE__*/React.createElement(AccessibleContent, {
+        onUpdate: _this.handleUpdate
+      }, jsx(AccessibleContent, {
         alt: outcome.title
       }, outcome.title))));
     };
@@ -75,16 +75,16 @@ var Header = (_dec = themeable(theme, styles), _dec(_class = (_temp = _class2 =
           scope = _this$props.scope;
       var showTooltip = this.state.showTooltip;
       var outcome = getReportOutcome(outcomeResult.outcomeId);
-      return /*#__PURE__*/React.createElement("div", {
-        className: styles.header
-      }, showTooltip ? /*#__PURE__*/React.createElement(Tooltip, {
-        tip: outcome.title,
+      return jsx("div", {
+        css: this.props.styles.header
+      }, showTooltip ? jsx(Tooltip, {
+        renderTip: outcome.title,
         placement: "bottom",
-        variant: "inverse"
-      }, this.renderTitle(outcome)) : this.renderTitle(outcome), /*#__PURE__*/React.createElement(PresentationContent, null, /*#__PURE__*/React.createElement(HeaderDetails, {
+        color: "primary"
+      }, this.renderTitle(outcome)) : this.renderTitle(outcome), jsx(PresentationContent, null, jsx(HeaderDetails, {
         outcomeResult: outcomeResult,
         showRollups: showRollups
-      })), /*#__PURE__*/React.createElement(OutcomeViewModal, {
+      })), jsx(OutcomeViewModal, {
         header: "Outcome Detail",
         outcome: outcome,
         outcomeResult: outcomeResult,
@@ -105,7 +105,8 @@ var Header = (_dec = themeable(theme, styles), _dec(_class = (_temp = _class2 =
   isOpen: PropTypes.bool.isRequired,
   closeReportAlignment: PropTypes.func.isRequired,
   scope: PropTypes.string.isRequired,
-  showRollups: PropTypes.bool
+  showRollups: PropTypes.bool,
+  styles: stylesShape
 }, _class2.defaultProps = {
   showRollups: true
 }, _temp)) || _class);

package/es/translated/en-GB-x-ukhe/components/OutcomesPerStudent/Header/styles.js

@@ -0,0 +1,14 @@
+var generateStyle = function generateStyle() {
+  return {
+    header: {
+      boxSizing: 'border-box',
+      display: 'flex',
+      flexDirection: 'column',
+      fontWeight: 'normal',
+      lineHeight: '1.3rem',
+      textAlign: 'left'
+    }
+  };
+};
+
+export default generateStyle;

package/es/translated/en-GB-x-ukhe/components/OutcomesPerStudent/HeaderDetails/__tests__/index.test.js

@@ -3,15 +3,12 @@ import React from 'react';
 import sinon from 'sinon';
 import { shallow, mount } from 'enzyme';
 import HeaderDetails from "../index.js";
-var styles = {
-  componentId: 'ffgIr',
-  template: function template(theme) {
-    return "\n\n.outcomes-ui__HeaderDetails--numQuestions {\n  box-sizing: border-box;\n  height: 1.5rem;\n  text-align: left;\n}\n\n[dir=\"ltr\"] .outcomes-ui__HeaderDetails--numQuestions {\n  text-align: left;\n}\n\n[dir=\"rtl\"] .outcomes-ui__HeaderDetails--numQuestions {\n  text-align: left;\n}\n\n.outcomes-ui__HeaderDetails--masteryBarDetails {\n  display: flex;\n  justify-content: space-between;\n}\n";
-  },
-  'numQuestions': 'outcomes-ui__HeaderDetails--numQuestions',
-  'masteryBarDetails': 'outcomes-ui__HeaderDetails--masteryBarDetails'
-};
+import styles from "../styles.js";
 import checkA11y from "../../../../test/checkA11y.js";
+import { ProgressBar } from '@instructure/ui-progress';
+import { Tooltip } from '@instructure/ui-tooltip';
+import { findElementsWithStyle } from "../../../../util/__tests__/findElementsWithStyle.js";
+import { Text } from '@instructure/ui-text';
 describe('OutcomesPerStudent/HeaderDetails', function () {
   function makeProps(props) {
     return Object.assign({
@@ -37,10 +34,10 @@ describe('OutcomesPerStudent/HeaderDetails', function () {
   }
 
   it('includes a progress bar', function () {
-    var wrapper = shallow( /*#__PURE__*/React.createElement(HeaderDetails, makeProps()), {
+    var wrapper = mount( /*#__PURE__*/React.createElement(HeaderDetails, makeProps()), {
       disableLifecycleMethods: true
     });
-    expect(wrapper.find('ProgressBar')).to.have.length(1);
+    expect(wrapper.find(ProgressBar)).to.have.length(1);
   });
   it('hides the progress bar when rollups are hidden', function () {
     var wrapper = shallow( /*#__PURE__*/React.createElement(HeaderDetails, makeProps({
@@ -51,10 +48,10 @@ describe('OutcomesPerStudent/HeaderDetails', function () {
     expect(wrapper.find('ProgressBar')).to.have.length(0);
   });
   it('includes the rollup summary', function () {
-    var wrapper = shallow( /*#__PURE__*/React.createElement(HeaderDetails, makeProps()), {
+    var wrapper = mount( /*#__PURE__*/React.createElement(HeaderDetails, makeProps()), {
       disableLifecycleMethods: true
     });
-    expect(wrapper.find(".".concat(styles.masteryBarDetails)).find('Text')).to.have.length(2);
+    expect(findElementsWithStyle(wrapper, styles().masteryBarDetails).find(Text)).to.have.length(2);
   });
   it('hides the rollup summary when rollups are hidden', function () {
     var wrapper = shallow( /*#__PURE__*/React.createElement(HeaderDetails, makeProps({
@@ -77,10 +74,10 @@ describe('OutcomesPerStudent/HeaderDetails', function () {
         usesBank: true
       }
     };
-    var wrapper = shallow( /*#__PURE__*/React.createElement(HeaderDetails, makeProps(withUsesBank)), {
+    var wrapper = mount( /*#__PURE__*/React.createElement(HeaderDetails, makeProps(withUsesBank)), {
       disableLifecycleMethods: true
     });
-    expect(wrapper.find('Tooltip')).to.have.length(1);
+    expect(wrapper.find(Tooltip)).to.have.length(1);
   });
   it('does not include tooltip', function () {
     var wrapper = shallow( /*#__PURE__*/React.createElement(HeaderDetails, makeProps()), {

package/es/translated/en-GB-x-ukhe/components/OutcomesPerStudent/HeaderDetails/index.js

@@ -9,21 +9,16 @@ var _default_enGBXUkhe_number = Intl.NumberFormat("en-GB-x-ukhe", { style: "deci
     _class2,
     _temp;
 
+/** @jsx jsx */
 import React from 'react';
 import PropTypes from 'prop-types';
-import { themeable } from '@instructure/ui-themeable';
 import { Text } from '@instructure/ui-text';
 import { ProgressBar } from '@instructure/ui-progress';
 import { Tooltip } from '@instructure/ui-tooltip';
-import theme from "../../theme.js";
-var styles = {
-  componentId: 'ffgIr',
-  template: function template(theme) {
-    return "\n\n.outcomes-ui__HeaderDetails--numQuestions {\n  box-sizing: border-box;\n  height: 1.5rem;\n  text-align: left;\n}\n\n[dir=\"ltr\"] .outcomes-ui__HeaderDetails--numQuestions {\n  text-align: left;\n}\n\n[dir=\"rtl\"] .outcomes-ui__HeaderDetails--numQuestions {\n  text-align: left;\n}\n\n.outcomes-ui__HeaderDetails--masteryBarDetails {\n  display: flex;\n  justify-content: space-between;\n}\n";
-  },
-  'numQuestions': 'outcomes-ui__HeaderDetails--numQuestions',
-  'masteryBarDetails': 'outcomes-ui__HeaderDetails--masteryBarDetails'
-};
+import { withStyle, jsx } from '@instructure/emotion';
+import generateComponentTheme from "../../theme.js";
+import generateStyle from "./styles.js";
+import { stylesShape } from "../../../store/shapes.js";
 
 var numQuestionsText = function numQuestionsText(count, usesBank) {
   var _s, _n, _i, _v;
@@ -33,16 +28,16 @@ var numQuestionsText = function numQuestionsText(count, usesBank) {
   }
 
   if (usesBank) {
-    return /*#__PURE__*/React.createElement(Tooltip, {
-      tip: "Variable due to all/random selection from item bank",
-      variant: "inverse"
+    return jsx(Tooltip, {
+      renderTip: "Variable due to all/random selection from item bank",
+      color: "primary"
     }, "Variable questions");
   }
 
   return _s = count, _n = +_s, (_i = Math.floor(Math.abs(+_s)), _v = (_s + '.').split('.')[1].length, _i === 1 && _v === 0 ? "1 Question" : _default_enGBXUkhe_number(count) + " Questions");
 };
 
-var HeaderDetails = (_dec = themeable(theme, styles), _dec(_class = (_temp = _class2 = /*#__PURE__*/function (_React$Component) {
+var HeaderDetails = (_dec = withStyle(generateStyle, generateComponentTheme), _dec(_class = (_temp = _class2 = /*#__PURE__*/function (_React$Component) {
   _inherits(HeaderDetails, _React$Component);
 
   var _super = _createSuper(HeaderDetails);
@@ -60,29 +55,29 @@ var HeaderDetails = (_dec = themeable(theme, styles), _dec(_class = (_temp = _cl
       var _this$props = this.props,
           outcomeResult = _this$props.outcomeResult,
           showRollups = _this$props.showRollups;
-      return /*#__PURE__*/React.createElement("div", null, /*#__PURE__*/React.createElement("span", {
-        className: styles.numQuestions,
+      return jsx("div", null, jsx("span", {
+        css: this.props.styles.numQuestions,
         "data-automation": "outcomesPerStudent__numQuestions"
-      }, /*#__PURE__*/React.createElement(Text, {
+      }, jsx(Text, {
         size: "small"
       }, numQuestionsText(outcomeResult.childArtifactCount, outcomeResult.usesBank))), showRollups ? this.renderRollup(outcomeResult) : null);
     }
   }, {
     key: "renderRollup",
     value: function renderRollup(outcomeResult) {
-      return /*#__PURE__*/React.createElement("div", null, /*#__PURE__*/React.createElement(ProgressBar, {
+      return jsx("div", null, jsx(ProgressBar, {
         size: "x-small",
         screenReaderLabel: outcomeResult.masteryCount + " of " + outcomeResult.count + " met mastery",
         meterColor: "success",
         valueMax: outcomeResult.count,
         valueNow: outcomeResult.masteryCount
-      }), /*#__PURE__*/React.createElement("div", {
-        className: styles.masteryBarDetails,
+      }), jsx("div", {
+        css: this.props.styles.masteryBarDetails,
         "data-automation": "outcomesPerStudent__masteryBarDetails"
-      }, /*#__PURE__*/React.createElement(Text, {
+      }, jsx(Text, {
         size: "x-small",
         "data-automation": "outcomesPerStudent__masteryCount"
-      }, outcomeResult.masteryCount + " Mastery"), /*#__PURE__*/React.createElement(Text, {
+      }, outcomeResult.masteryCount + " Mastery"), jsx(Text, {
         size: "x-small",
         "data-automation": "outcomesPerStudent__noMasteryCount"
       }, outcomeResult.count - outcomeResult.masteryCount + " Did not Meet")));
@@ -93,6 +88,7 @@ var HeaderDetails = (_dec = themeable(theme, styles), _dec(_class = (_temp = _cl
   return HeaderDetails;
 }(React.Component), _class2.propTypes = {
   outcomeResult: PropTypes.object.isRequired,
-  showRollups: PropTypes.bool.isRequired
+  showRollups: PropTypes.bool.isRequired,
+  styles: stylesShape
 }, _temp)) || _class);
 export { HeaderDetails as default };

package/es/translated/en-GB-x-ukhe/components/OutcomesPerStudent/HeaderDetails/styles.js

@@ -0,0 +1,15 @@
+var generateStyle = function generateStyle() {
+  return {
+    numQuestions: {
+      boxSizing: 'border-box',
+      height: '1.5rem',
+      textAlign: 'left'
+    },
+    masteryBarDetails: {
+      display: 'flex',
+      justifyContent: 'space-between'
+    }
+  };
+};
+
+export default generateStyle;

package/es/translated/en-GB-x-ukhe/components/OutcomesPerStudent/Score/__tests__/index.test.js

@@ -34,10 +34,10 @@ describe('OutcomesPerStudent/Score', function () {
       }
     };
     var wrapper = mount( /*#__PURE__*/React.createElement(Score, noPoints));
-    expect(wrapper.children()).to.have.length(0);
+    expect(wrapper.find('div[data-automation="outcomesPerStudent__score"]')).to.have.length(0);
   });
   it('includes a star if percentScore is greater than mastery', function () {
-    var wrapper = shallow( /*#__PURE__*/React.createElement(Score, makeProps()), {
+    var wrapper = mount( /*#__PURE__*/React.createElement(Score, makeProps()), {
       disableLifecycleMethods: true
     });
     expect(wrapper.find(IconStarSolid)).to.have.length(1);
@@ -46,7 +46,7 @@ describe('OutcomesPerStudent/Score', function () {
     var props = makeProps();
     props.score.percentScore = 0.4; // eslint-disable-line immutable/no-mutation
 
-    var wrapper = shallow( /*#__PURE__*/React.createElement(Score, makeProps()), {
+    var wrapper = mount( /*#__PURE__*/React.createElement(Score, makeProps()), {
       disableLifecycleMethods: true
     });
     expect(wrapper.find(IconStarSolid)).to.have.length(1);

package/es/translated/en-GB-x-ukhe/components/OutcomesPerStudent/Score/index.js

@@ -1,4 +1,4 @@
-import _defineProperty from "@babel/runtime/helpers/esm/defineProperty";
+import _objectSpread from "@babel/runtime/helpers/esm/objectSpread2";
 import _classCallCheck from "@babel/runtime/helpers/esm/classCallCheck";
 import _createClass from "@babel/runtime/helpers/esm/createClass";
 import _inherits from "@babel/runtime/helpers/esm/inherits";
@@ -6,26 +6,16 @@ import _createSuper from "@babel/runtime/helpers/esm/createSuper";
 
 var _dec, _class, _class2, _temp;
 
+/** @jsx jsx */
 import React from 'react';
 import PropTypes from 'prop-types';
 import { Text } from '@instructure/ui-text';
 import { IconStarSolid } from '@instructure/ui-icons';
-import classNames from 'classnames';
-import { themeable } from '@instructure/ui-themeable';
-import theme from "../../theme.js";
-var styles = {
-  componentId: 'ctmoA',
-  template: function template(theme) {
-    return "\n\n.outcomes-ui__Score--mastery {\n  color: ".concat(theme.masteryColor || 'inherit', ";\n}\n\n.outcomes-ui__Score--score {\n  box-sizing: border-box;\n  display: flex;\n  height: 4rem;\n}\n\n.outcomes-ui__Score--score .outcomes-ui__Score--scoreText {\n    display: flex;\n    flex-direction: column;\n    align-items: center;\n    justify-content: center;\n  }\n\n.outcomes-ui__Score--score .outcomes-ui__Score--scoreSpacer {\n    flex-grow: 1;\n  }\n\n.outcomes-ui__Score--score .outcomes-ui__Score--masteryStar {\n    flex-basis: 0;\n    flex-grow: 1;\n    text-align: right;\n    vertical-align: middle;\n    padding-right: 0.5rem;\n    font-size: 1.5rem;\n    display: flex;\n    align-items: center;\n    justify-content: flex-end;\n  }\n\n[dir=\"ltr\"] .outcomes-ui__Score--score .outcomes-ui__Score--masteryStar {\n    text-align: right;\n  }\n\n[dir=\"rtl\"] .outcomes-ui__Score--score .outcomes-ui__Score--masteryStar {\n    text-align: right;\n  }\n");
-  },
-  'mastery': 'outcomes-ui__Score--mastery',
-  'score': 'outcomes-ui__Score--score',
-  'scoreText': 'outcomes-ui__Score--scoreText',
-  'scoreSpacer': 'outcomes-ui__Score--scoreSpacer',
-  'masteryStar': 'outcomes-ui__Score--masteryStar'
-};
+import { withStyle, jsx } from '@instructure/emotion';
+import generateComponentTheme from "../../theme.js";
+import generateStyle from "./styles.js";
 import { hasMastery } from "../../../util/outcomesReportUtils.js";
-var Score = (_dec = themeable(theme, styles), _dec(_class = (_temp = _class2 = /*#__PURE__*/function (_React$Component) {
+var Score = (_dec = withStyle(generateStyle, generateComponentTheme), _dec(_class = (_temp = _class2 = /*#__PURE__*/function (_React$Component) {
   _inherits(Score, _React$Component);
 
   var _super = _createSuper(Score);
@@ -40,29 +30,30 @@ var Score = (_dec = themeable(theme, styles), _dec(_class = (_temp = _class2 = /
     key: "render",
     value: // eslint-disable-next-line no-undef
     function render() {
-      var _classNames;
-
       var _this$props = this.props,
           score = _this$props.score,
           outcome = _this$props.outcome;
       var mastery = hasMastery(score, outcome);
-      var outerStyle = classNames((_classNames = {}, _defineProperty(_classNames, styles.score, true), _defineProperty(_classNames, styles.mastery, mastery), _classNames));
-      return score && /*#__PURE__*/React.createElement("div", {
-        className: outerStyle
-      }, /*#__PURE__*/React.createElement("span", {
-        className: styles.masteryStar
-      }, mastery && /*#__PURE__*/React.createElement(IconStarSolid, {
+
+      var outerStyle = _objectSpread(_objectSpread({}, this.props.styles.score), mastery ? this.props.styles.mastery : {});
+
+      return score && jsx("div", {
+        css: outerStyle,
+        "data-automation": "outcomesPerStudent__score"
+      }, jsx("span", {
+        css: this.props.styles.masteryStar
+      }, mastery && jsx(IconStarSolid, {
         "data-automation": "outcomesPerStudent__masteryStar"
       }) // eslint-disable-next-line react/jsx-closing-tag-location
-      ), /*#__PURE__*/React.createElement("div", {
-        className: styles.scoreText
-      }, /*#__PURE__*/React.createElement(Text, {
+      ), jsx("div", {
+        css: this.props.styles.scoreText
+      }, jsx(Text, {
         size: "small",
         "data-automation": "outcomesPerStudent__scoreText"
-      }, score.points, "/", score.pointsPossible), /*#__PURE__*/React.createElement(Text, {
+      }, score.points, "/", score.pointsPossible), jsx(Text, {
         size: "small"
-      }, mastery ? "Mastery" : "Did not Meet")), /*#__PURE__*/React.createElement("span", {
-        className: styles.scoreSpacer
+      }, mastery ? "Mastery" : "Did not Meet")), jsx("span", {
+        css: this.props.styles.scoreSpacer
       }));
     }
   }]);
@@ -71,7 +62,9 @@ var Score = (_dec = themeable(theme, styles), _dec(_class = (_temp = _class2 = /
   return Score;
 }(React.Component), _class2.propTypes = {
   score: PropTypes.object,
-  outcome: PropTypes.object.isRequired
+  outcome: PropTypes.object.isRequired,
+  // eslint-disable-next-line react/require-default-props
+  styles: PropTypes.object
 }, _class2.defaultProps = {
   score: null
 }, _temp)) || _class);

package/es/translated/en-GB-x-ukhe/components/OutcomesPerStudent/Score/styles.js

@@ -0,0 +1,34 @@
+var generateStyle = function generateStyle(componentTheme) {
+  return {
+    mastery: {
+      color: componentTheme.masteryColor
+    },
+    score: {
+      boxSizing: 'border-box',
+      display: 'flex',
+      height: '4rem'
+    },
+    scoreText: {
+      display: 'flex',
+      flexDirection: 'column',
+      alignItems: 'center',
+      justifyContent: 'center'
+    },
+    scoreSpacer: {
+      flexGrow: 1
+    },
+    masteryStar: {
+      flexBasis: '0',
+      flexGrow: 1,
+      textAlign: 'right',
+      verticalAlign: 'middle',
+      paddingRight: '0.5rem',
+      fontSize: '1.5rem',
+      display: 'flex',
+      alignItems: 'center',
+      justifyContent: 'flex-end'
+    }
+  };
+};
+
+export default generateStyle;

package/es/translated/en-GB-x-ukhe/components/OutcomesPerStudent/__tests__/index.test.js

@@ -4,25 +4,14 @@ import sinon from 'sinon';
 import { shallow, mount } from 'enzyme';
 import OutcomesPerStudent from "../index.js";
 import checkA11y from "../../../test/checkA11y.js";
-var styles = {
-  componentId: 'eWGXc',
-  template: function template(theme) {
-    return "\n\n.outcomes-ui__OutcomesPerStudent--reportWrapper {\n  position: relative;\n  padding-left: 13rem;\n}\n\n.outcomes-ui__OutcomesPerStudent--background {\n  background-color: white;\n}\n\n.outcomes-ui__OutcomesPerStudent--table {\n  overflow-x: scroll;\n}\n\n.outcomes-ui__OutcomesPerStudent--headerRow {\n  display: flex;\n  align-items: stretch;\n}\n\n.outcomes-ui__OutcomesPerStudent--corner {\n  position: absolute;\n  box-sizing: border-box;\n  width: 13rem;\n  left: 0;\n  top: auto;\n  font-size: 3rem;\n  font-weight: normal;\n  display: flex;\n  flex-direction: column;\n  align-items: center;\n  justify-content: center;\n}\n\n.outcomes-ui__OutcomesPerStudent--headerCell, .outcomes-ui__OutcomesPerStudent--corner {\n  box-sizing: border-box;\n  height: 5.5rem;\n  border-right: ".concat(theme.reportBorder || 'inherit', ";\n  border-bottom: ").concat(theme.reportBorder || 'inherit', ";\n}\n\n.outcomes-ui__OutcomesPerStudent--headerCell {\n  box-sizing: border-box;\n  border-top: ").concat(theme.reportBorder || 'inherit', ";\n  padding: 0.5rem;\n  flex: 1 0 10rem;\n  overflow: hidden;\n  text-overflow: ellipsis;\n}\n\n.outcomes-ui__OutcomesPerStudent--loadingSpinner {\n  width: 100%;\n  display: flex;\n  justify-content: center;\n  padding: 1.25rem 0.3125rem 1.25rem 0;\n}\n\n.outcomes-ui__OutcomesPerStudent--studentRow {\n  box-sizing: border-box;\n  height: 4rem;\n  display: flex;\n  align-items: stretch;\n}\n\n.outcomes-ui__OutcomesPerStudent--studentName {\n  position: absolute;\n  box-sizing: border-box;\n  left: 0;\n  top: auto;\n  width: 13rem;\n  height: 4rem;\n  padding-left: 0.5rem;\n  border-right: ").concat(theme.reportBorder || 'inherit', ";\n  display: flex;\n  justify-content: flex-start;\n  border-bottom: ").concat(theme.reportBorder || 'inherit', ";\n  align-items: center;\n}\n\n.outcomes-ui__OutcomesPerStudent--studentName .outcomes-ui__OutcomesPerStudent--avatar {\n    padding-right: .5rem;\n  }\n\n.outcomes-ui__OutcomesPerStudent--studentName .outcomes-ui__OutcomesPerStudent--name {\n    text-align: left;\n    text-overflow: ellipsis;\n    overflow-x: hidden;\n    white-space: nowrap;\n  }\n\n[dir=\"ltr\"] .outcomes-ui__OutcomesPerStudent--studentName .outcomes-ui__OutcomesPerStudent--name {\n    text-align: left;\n  }\n\n[dir=\"rtl\"] .outcomes-ui__OutcomesPerStudent--studentName .outcomes-ui__OutcomesPerStudent--name {\n    text-align: left;\n  }\n\n.outcomes-ui__OutcomesPerStudent--scoreCell {\n  box-sizing: border-box;\n  flex: 1 0 10rem;\n  border-bottom: ").concat(theme.reportBorder || 'inherit', ";\n}\n");
-  },
-  'reportWrapper': 'outcomes-ui__OutcomesPerStudent--reportWrapper',
-  'background': 'outcomes-ui__OutcomesPerStudent--background',
-  'table': 'outcomes-ui__OutcomesPerStudent--table',
-  'headerRow': 'outcomes-ui__OutcomesPerStudent--headerRow',
-  'corner': 'outcomes-ui__OutcomesPerStudent--corner',
-  'headerCell': 'outcomes-ui__OutcomesPerStudent--headerCell',
-  'loadingSpinner': 'outcomes-ui__OutcomesPerStudent--loadingSpinner',
-  'studentRow': 'outcomes-ui__OutcomesPerStudent--studentRow',
-  'studentName': 'outcomes-ui__OutcomesPerStudent--studentName',
-  'avatar': 'outcomes-ui__OutcomesPerStudent--avatar',
-  'name': 'outcomes-ui__OutcomesPerStudent--name',
-  'scoreCell': 'outcomes-ui__OutcomesPerStudent--scoreCell'
-};
+import styles from '../styles.js';
 import { REPORT_DOWNLOAD_FF } from "../../../constants.js";
+import Header from "../Header/index.js";
+import Score from "../Score/index.js";
+import { PaginationButton } from '@instructure/ui-pagination';
+import { Billboard } from '@instructure/ui-billboard';
+import ExportCSVButton from "../ExportCSVButton/index.js";
+import { findElementsWithStyle } from "../../../util/__tests__/findElementsWithStyle.js";
 chai.use(require('sinon-chai'));
 describe('OutcomesPerStudent/index', function () {
   function makeProps() {
@@ -81,67 +70,68 @@ describe('OutcomesPerStudent/index', function () {
   }
 
   it('renders a header for each outcome', function () {
-    var wrapper = shallow( /*#__PURE__*/React.createElement(OutcomesPerStudent, makeProps()), {
+    var wrapper = mount( /*#__PURE__*/React.createElement(OutcomesPerStudent, makeProps()), {
       disableLifecycleMethods: true
     });
-    expect(wrapper.find('Header')).to.have.length(3);
+    expect(wrapper.find(Header)).to.have.length(3);
   });
   it('generates the correct viewReportAlignment method for each header', function () {
     var props = makeProps();
-    var wrapper = shallow( /*#__PURE__*/React.createElement(OutcomesPerStudent, props), {
+    var wrapper = mount( /*#__PURE__*/React.createElement(OutcomesPerStudent, props), {
       disableLifecycleMethods: true
     });
-    var header = wrapper.find('Header').last();
+    var header = wrapper.find(Header).last();
     var viewReportAlignment = header.prop('viewReportAlignment');
     viewReportAlignment();
     expect(props.viewReportAlignment).to.have.been.calledOnce;
     expect(props.viewReportAlignment).to.have.been.calledWith(303);
   });
   it('renders a row for each student', function () {
-    var wrapper = shallow( /*#__PURE__*/React.createElement(OutcomesPerStudent, makeProps()), {
+    var wrapper = mount( /*#__PURE__*/React.createElement(OutcomesPerStudent, makeProps()), {
       disableLifecycleMethods: true
-    });
-    expect(wrapper.find(".".concat(styles.studentRow))).to.have.length(5);
+    }); // expect(wrapper.find(`.${styles.studentRow}`)).to.have.length(5)
+
+    expect(findElementsWithStyle(wrapper, styles().studentRow)).to.have.length(5);
   });
   it('renders a score for each student score', function () {
-    var wrapper = shallow( /*#__PURE__*/React.createElement(OutcomesPerStudent, makeProps()), {
+    var wrapper = mount( /*#__PURE__*/React.createElement(OutcomesPerStudent, makeProps()), {
       disableLifecycleMethods: true
     });
-    expect(wrapper.find('Score')).to.have.length(15);
+    expect(wrapper.find(Score)).to.have.length(15);
   });
   it('renders pagination', function () {
-    var wrapper = shallow( /*#__PURE__*/React.createElement(OutcomesPerStudent, makeProps()), {
+    var wrapper = mount( /*#__PURE__*/React.createElement(OutcomesPerStudent, makeProps()), {
       disableLifecycleMethods: true
     });
-    expect(wrapper.find('PaginationButton')).to.have.length(5);
+    expect(wrapper.find(PaginationButton)).to.have.length(5);
   });
   it('renders the billboard message if no results yet exist', function () {
-    var wrapper = shallow( /*#__PURE__*/React.createElement(OutcomesPerStudent, makeProps({
+    var wrapper = mount( /*#__PURE__*/React.createElement(OutcomesPerStudent, makeProps({
       users: [],
       hasAnyOutcomes: true
     })), {
       disableLifecycleMethods: true
     });
-    expect(wrapper.find('Billboard')).to.have.length(1);
-    expect(wrapper.find('Billboard').prop('heading')).to.equal('Looks like you\'re a little early');
+    expect(wrapper.find(Billboard)).to.have.length(1);
+    expect(wrapper.find(Billboard).prop('heading')).to.equal('Looks like you\'re a little early');
   });
   it('renders the billboard message if no outcomes are aligned', function () {
-    var wrapper = shallow( /*#__PURE__*/React.createElement(OutcomesPerStudent, makeProps({
+    var wrapper = mount( /*#__PURE__*/React.createElement(OutcomesPerStudent, makeProps({
       users: [],
       hasAnyOutcomes: false
     })), {
       disableLifecycleMethods: true
     });
-    expect(wrapper.find('Billboard').prop('heading')).to.equal('There is no report here to show');
+    expect(wrapper.find(Billboard).prop('heading')).to.equal('There is no report here to show');
   });
   describe('ExportCSVButton', function () {
     it('renders if the FF is enabled, the page is loaded, and there are users and outcomes', function () {
-      var wrapper = shallow( /*#__PURE__*/React.createElement(OutcomesPerStudent, makeProps({
+      var wrapper = mount( /*#__PURE__*/React.createElement(OutcomesPerStudent, makeProps({
         features: [REPORT_DOWNLOAD_FF]
       })), {
         disableLifecycleMethods: true
       });
-      expect(wrapper.find('ExportCSVButton')).to.have.length(1);
+      expect(wrapper.find(ExportCSVButton)).to.have.length(1);
     });
     describe('does not render if', function () {
       it('the FF is disabled', function () {