@instructure/outcomes-ui 2.1.9 → 3.0.0

package/lib/translated/es/components/OutcomesPerStudent/Score/styles.js

@@ -0,0 +1,42 @@
+"use strict";
+
+Object.defineProperty(exports, "__esModule", {
+  value: true
+});
+exports.default = void 0;
+
+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'
+    }
+  };
+};
+
+var _default = generateStyle;
+exports.default = _default;

package/lib/translated/es/components/OutcomesPerStudent/__tests__/index.test.js

@@ -16,26 +16,21 @@ var _index = _interopRequireDefault(require("../index.js"));
 
 var _checkA11y = _interopRequireDefault(require("../../../test/checkA11y.js"));
 
+var _styles = _interopRequireDefault(require("../styles.js"));
+
 var _constants = require("../../../constants.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'
-};
+var _index2 = _interopRequireDefault(require("../Header/index.js"));
+
+var _index3 = _interopRequireDefault(require("../Score/index.js"));
+
+var _uiPagination = require("@instructure/ui-pagination");
+
+var _uiBillboard = require("@instructure/ui-billboard");
+
+var _index4 = _interopRequireDefault(require("../ExportCSVButton/index.js"));
+
+var _findElementsWithStyle = require("../../../util/__tests__/findElementsWithStyle.js");
 
 _chai.default.use(require('sinon-chai'));
 
@@ -96,67 +91,68 @@ describe('OutcomesPerStudent/index', function () {
   }
 
   it('renders a header for each outcome', 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('Header')).to.have.length(3);
+    (0, _chai.expect)(wrapper.find(_index2.default)).to.have.length(3);
   });
   it('generates the correct viewReportAlignment method for each header', function () {
     var props = makeProps();
-    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 header = wrapper.find('Header').last();
+    var header = wrapper.find(_index2.default).last();
     var viewReportAlignment = header.prop('viewReportAlignment');
     viewReportAlignment();
     (0, _chai.expect)(props.viewReportAlignment).to.have.been.calledOnce;
     (0, _chai.expect)(props.viewReportAlignment).to.have.been.calledWith(303);
   });
   it('renders a row for each student', 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(".".concat(styles.studentRow))).to.have.length(5);
+    }); // expect(wrapper.find(`.${styles.studentRow}`)).to.have.length(5)
+
+    (0, _chai.expect)((0, _findElementsWithStyle.findElementsWithStyle)(wrapper, (0, _styles.default)().studentRow)).to.have.length(5);
   });
   it('renders a score for each student score', 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('Score')).to.have.length(15);
+    (0, _chai.expect)(wrapper.find(_index3.default)).to.have.length(15);
   });
   it('renders pagination', 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('PaginationButton')).to.have.length(5);
+    (0, _chai.expect)(wrapper.find(_uiPagination.PaginationButton)).to.have.length(5);
   });
   it('renders the billboard message if no results yet exist', 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({
       users: [],
       hasAnyOutcomes: true
     })), {
       disableLifecycleMethods: true
     });
-    (0, _chai.expect)(wrapper.find('Billboard')).to.have.length(1);
-    (0, _chai.expect)(wrapper.find('Billboard').prop('heading')).to.equal('Looks like you\'re a little early');
+    (0, _chai.expect)(wrapper.find(_uiBillboard.Billboard)).to.have.length(1);
+    (0, _chai.expect)(wrapper.find(_uiBillboard.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 = (0, _enzyme.shallow)( /*#__PURE__*/_react.default.createElement(_index.default, makeProps({
+    var wrapper = (0, _enzyme.mount)( /*#__PURE__*/_react.default.createElement(_index.default, makeProps({
       users: [],
       hasAnyOutcomes: false
     })), {
       disableLifecycleMethods: true
     });
-    (0, _chai.expect)(wrapper.find('Billboard').prop('heading')).to.equal('There is no report here to show');
+    (0, _chai.expect)(wrapper.find(_uiBillboard.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 = (0, _enzyme.shallow)( /*#__PURE__*/_react.default.createElement(_index.default, makeProps({
+      var wrapper = (0, _enzyme.mount)( /*#__PURE__*/_react.default.createElement(_index.default, makeProps({
         features: [_constants.REPORT_DOWNLOAD_FF]
       })), {
         disableLifecycleMethods: true
       });
-      (0, _chai.expect)(wrapper.find('ExportCSVButton')).to.have.length(1);
+      (0, _chai.expect)(wrapper.find(_index4.default)).to.have.length(1);
     });
     describe('does not render if', function () {
       it('the FF is disabled', function () {

package/lib/translated/es/components/OutcomesPerStudent/index.js

@@ -35,8 +35,6 @@ var _uiA11yContent = require("@instructure/ui-a11y-content");
 
 var _shortid = _interopRequireDefault(require("shortid"));
 
-var _uiThemeable = require("@instructure/ui-themeable");
-
 var _lodash = _interopRequireDefault(require("lodash"));
 
 var _index = _interopRequireDefault(require("./ExportCSVButton/index.js"));
@@ -49,8 +47,12 @@ var _index4 = _interopRequireDefault(require("./Score/index.js"));
 
 var _constants = require("../../constants.js");
 
+var _emotion = require("@instructure/emotion");
+
 var _theme = _interopRequireDefault(require("../theme.js"));
 
+var _styles = _interopRequireDefault(require("./styles.js"));
+
 var _default_es_number = Intl.NumberFormat("es", { style: "decimal" }).format,
     _dec,
     _class,
@@ -58,77 +60,77 @@ var _default_es_number = Intl.NumberFormat("es", { style: "decimal" }).format,
     _temp;
 
 var Early = function Early(props) {
-  return /*#__PURE__*/_react.default.createElement("svg", Object.assign({
+  return (0, _emotion.jsx)("svg", Object.assign({
     width: "138",
     height: "88",
     viewBox: "0 0 138 88",
     xmlns: "http://www.w3.org/2000/svg"
-  }, props), /*#__PURE__*/_react.default.createElement("title", null, "Early-Graphic"), /*#__PURE__*/_react.default.createElement("g", {
+  }, props), (0, _emotion.jsx)("title", null, "Early-Graphic"), (0, _emotion.jsx)("g", {
     fill: "none",
     fillRule: "evenodd"
-  }, /*#__PURE__*/_react.default.createElement("path", {
+  }, (0, _emotion.jsx)("path", {
     d: "M136.728 34.855c0-6.158-5.547-7.973-5.547-7.973s5.547-1.544 5.547-7.702c0-6.159-5.547-7.9-5.547-7.9H18.854v50.618h53.39v2.08c0 4.176 2.643 7.726 6.344 9.095l25.62 13.842s6.495 1.48 9.88-4.789c1.856-3.434 1.287-6.43.395-8.442l16.698.038s5.547-1.543 5.547-7.701c0-6.16-5.547-7.974-5.547-7.974s5.547-1.543 5.547-7.701c0-5.554-4.498-7.51-5.385-7.842.887-.3 5.385-2.094 5.385-7.648",
     fill: "#FED2B8"
-  }), /*#__PURE__*/_react.default.createElement("path", {
+  }), (0, _emotion.jsx)("path", {
     d: "M136.728 34.855c0-6.158-5.547-7.973-5.547-7.973s5.547-1.544 5.547-7.702c0-6.159-5.547-7.9-5.547-7.9H18.854v50.618h53.39v2.08c0 4.176 2.643 7.726 6.344 9.095l25.62 13.842s6.495 1.48 9.88-4.789c1.856-3.434 1.287-6.43.395-8.442l16.698.038s5.547-1.543 5.547-7.701c0-6.16-5.547-7.974-5.547-7.974s5.547-1.543 5.547-7.701c0-5.554-4.498-7.51-5.385-7.842.887-.3 5.385-2.094 5.385-7.648z",
     stroke: "#FD6A11",
     strokeWidth: "2"
-  }), /*#__PURE__*/_react.default.createElement("path", {
+  }), (0, _emotion.jsx)("path", {
     d: "M65.217 65.244H41.83a2 2 0 0 1-2-2V10.627a2 2 0 0 1 2-2h23.388a2 2 0 0 1 2 2v52.617a2 2 0 0 1-2 2",
     fill: "#75848F"
-  }), /*#__PURE__*/_react.default.createElement("path", {
+  }), (0, _emotion.jsx)("path", {
     d: "M65.217 65.244H41.83a2 2 0 0 1-2-2V10.627a2 2 0 0 1 2-2h23.388a2 2 0 0 1 2 2v52.617a2 2 0 0 1-2 2z",
     stroke: "#3F5463",
     strokeWidth: "2"
-  }), /*#__PURE__*/_react.default.createElement("path", {
+  }), (0, _emotion.jsx)("path", {
     d: "M26.388 65.244H3a2 2 0 0 1-2-2V3a2 2 0 0 1 2-2h23.388a2 2 0 0 1 2 2v60.244a2 2 0 0 1-2 2",
     fill: "#F4F5F6"
-  }), /*#__PURE__*/_react.default.createElement("path", {
+  }), (0, _emotion.jsx)("path", {
     d: "M26.388 65.244H3a2 2 0 0 1-2-2V3a2 2 0 0 1 2-2h23.388a2 2 0 0 1 2 2v60.244a2 2 0 0 1-2 2z",
     stroke: "#778690",
     strokeWidth: "2"
-  }), /*#__PURE__*/_react.default.createElement("path", {
+  }), (0, _emotion.jsx)("path", {
     d: "M72.244 36.242c0 10.34-8.382 18.721-18.721 18.721-10.34 0-18.721-8.382-18.721-18.72 0-10.34 8.381-18.722 18.721-18.722 10.339 0 18.721 8.382 18.721 18.721",
     fill: "#75848F"
-  }), /*#__PURE__*/_react.default.createElement("path", {
+  }), (0, _emotion.jsx)("path", {
     d: "M72.244 36.242c0 10.34-8.382 18.721-18.721 18.721-10.34 0-18.721-8.382-18.721-18.72 0-10.34 8.381-18.722 18.721-18.722 10.339 0 18.721 8.382 18.721 18.721z",
     stroke: "#3F5463",
     strokeWidth: "2"
-  }), /*#__PURE__*/_react.default.createElement("path", {
+  }), (0, _emotion.jsx)("path", {
     d: "M69.124 36.242c0 8.616-6.985 15.601-15.601 15.601s-15.601-6.985-15.601-15.6c0-8.617 6.985-15.602 15.6-15.602 8.617 0 15.602 6.985 15.602 15.601",
     fill: "#FFF"
-  }), /*#__PURE__*/_react.default.createElement("path", {
+  }), (0, _emotion.jsx)("path", {
     d: "M69.124 36.242c0 8.616-6.985 15.601-15.601 15.601s-15.601-6.985-15.601-15.6c0-8.617 6.985-15.602 15.6-15.602 8.617 0 15.602 6.985 15.602 15.601z",
     stroke: "#3F5463",
     strokeWidth: "2"
-  }), /*#__PURE__*/_react.default.createElement("path", {
+  }), (0, _emotion.jsx)("path", {
     d: "M53.523 20.642v4.252M53.523 47.59v4.253M37.922 36.242h4.252M64.871 36.242h4.252",
     stroke: "#3F5463",
     strokeWidth: "3"
-  }), /*#__PURE__*/_react.default.createElement("path", {
+  }), (0, _emotion.jsx)("path", {
     d: "M48.67 24.975l4.853 11.267M59.764 41.55l-6.242-5.308",
     stroke: "#3F5463",
     strokeWidth: "3",
     strokeLinecap: "round"
-  }), /*#__PURE__*/_react.default.createElement("path", {
+  }), (0, _emotion.jsx)("path", {
     d: "M59.07 47.337l-5.547-11.095",
     stroke: "#F1070F",
     strokeLinecap: "round"
-  }), /*#__PURE__*/_react.default.createElement("path", {
+  }), (0, _emotion.jsx)("path", {
     d: "M56.296 36.242a2.773 2.773 0 1 1-5.546 0 2.773 2.773 0 0 1 5.546 0",
     fill: "#96A0A8"
-  }), /*#__PURE__*/_react.default.createElement("path", {
+  }), (0, _emotion.jsx)("path", {
     d: "M56.296 36.242a2.773 2.773 0 1 1-5.546 0 2.773 2.773 0 0 1 5.546 0z",
     stroke: "#3F5463",
     strokeWidth: "2"
-  }), /*#__PURE__*/_react.default.createElement("path", {
+  }), (0, _emotion.jsx)("path", {
     d: "M18.854 10.01a4.277 4.277 0 1 1-8.553-.002 4.277 4.277 0 0 1 8.553.002",
     fill: "#FFF"
-  }), /*#__PURE__*/_react.default.createElement("path", {
+  }), (0, _emotion.jsx)("path", {
     d: "M18.854 10.01a4.277 4.277 0 1 1-8.553-.002 4.277 4.277 0 0 1 8.553.002z",
     stroke: "#778690",
     strokeWidth: "2"
-  }), /*#__PURE__*/_react.default.createElement("path", {
+  }), (0, _emotion.jsx)("path", {
     d: "M114.483 73.685h-9.318",
     stroke: "#FD6A11",
     strokeWidth: "2",
@@ -137,78 +139,59 @@ var Early = function Early(props) {
 };
 
 var NoReport = function NoReport(props) {
-  return /*#__PURE__*/_react.default.createElement("svg", Object.assign({
+  return (0, _emotion.jsx)("svg", Object.assign({
     width: "70",
     height: "96",
     viewBox: "0 0 70 96",
     xmlns: "http://www.w3.org/2000/svg"
-  }, props), /*#__PURE__*/_react.default.createElement("title", null, "Page 1"), /*#__PURE__*/_react.default.createElement("g", {
+  }, props), (0, _emotion.jsx)("title", null, "Page 1"), (0, _emotion.jsx)("g", {
     fill: "none",
     fillRule: "evenodd"
-  }, /*#__PURE__*/_react.default.createElement("path", {
+  }, (0, _emotion.jsx)("path", {
     d: "M65 95H5a4 4 0 0 1-4-4V22a4 4 0 0 1 4-4h60a4 4 0 0 1 4 4v69a4 4 0 0 1-4 4z",
     fill: "#F6F7F6"
-  }), /*#__PURE__*/_react.default.createElement("path", {
+  }), (0, _emotion.jsx)("path", {
     d: "M5 19c-1.654 0-3 1.346-3 3v69c0 1.654 1.346 3 3 3h60c1.654 0 3-1.346 3-3V22c0-1.654-1.346-3-3-3H5zm60 77H5c-2.757 0-5-2.243-5-5V22c0-2.757 2.243-5 5-5h60c2.757 0 5 2.243 5 5v69c0 2.757-2.243 5-5 5z",
     fill: "#3F5463"
-  }), /*#__PURE__*/_react.default.createElement("path", {
+  }), (0, _emotion.jsx)("path", {
     d: "M0 96h70V0H0z"
-  }), /*#__PURE__*/_react.default.createElement("path", {
+  }), (0, _emotion.jsx)("path", {
     fill: "#FFF",
     d: "M7 89h56.5V24.213H7z"
-  }), /*#__PURE__*/_react.default.createElement("path", {
+  }), (0, _emotion.jsx)("path", {
     fill: "#6F7F8A",
     d: "M9 90H6v-3h2v1h1zM6 34.317h2v-4.053H6v4.053zm0 8.106h2V38.37H6v4.053zm0 8.104h2v-4.053H6v4.053zm0 8.106h2V54.58H6v4.053zm0 8.104h2v-4.053H6v4.053zm0 8.106h2V70.79H6v4.053zm0 8.104h2v-4.053H6v4.053zM8 26.213H6v-3h3v2H8zM13.038 25.213h4.039v-2h-4.039v2zm8.078 0h4.038v-2h-4.038v2zm8.076 0h4.039v-2h-4.039v2zm8.078 0h4.038v-2H37.27v2zm8.076 0h4.039v-2h-4.039v2zm8.077 0h4.038v-2h-4.038v2zM64.5 26.213h-2v-1h-1v-2h3zM62.5 34.318h2v-4.053h-2v4.053zm0 8.105h2V38.37h-2v4.053zm0 8.105h2v-4.053h-2v4.053zm0 8.105h2V54.58h-2v4.053zm0 8.105h2v-4.053h-2v4.053zm0 8.105h2V70.79h-2v4.053zm0 8.105h2v-4.053h-2v4.053zM64.5 90h-3v-2h1v-1h2zM13.039 90h4.038v-2h-4.038v2zm8.076 0h4.039v-2h-4.039v2zm8.077 0h4.038v-2h-4.038v2zm8.077 0h4.039v-2h-4.039v2zm8.077 0h4.038v-2h-4.038v2zm8.076 0h4.039v-2h-4.039v2z"
-  }), /*#__PURE__*/_react.default.createElement("path", {
+  }), (0, _emotion.jsx)("path", {
     d: "M55.874 25H14.126a2 2 0 0 1-1.816-2.838L17 12h36l4.69 10.162A2 2 0 0 1 55.874 25",
     fill: "#C0C6CB"
-  }), /*#__PURE__*/_react.default.createElement("path", {
+  }), (0, _emotion.jsx)("path", {
     d: "M35 1C24 1 24 12 24 12h22S44.667 1 35 1",
     fill: "#E5E7E9"
-  }), /*#__PURE__*/_react.default.createElement("path", {
+  }), (0, _emotion.jsx)("path", {
     d: "M56.717 23.54a.983.983 0 0 1-.843.46H14.126a.984.984 0 0 1-.843-.46.983.983 0 0 1-.065-.959l4.422-9.58H52.36l4.42 9.58a.983.983 0 0 1-.064.958M35 2c6.999 0 9.19 6.354 9.799 9H25.07c.298-2.546 1.852-9 9.929-9m23.598 19.743L53.64 11h-6.807C46.242 8.252 43.74 0 35 0c-9.812 0-11.6 8.122-11.926 11H16.36l-4.958 10.743a2.984 2.984 0 0 0 .196 2.874A2.99 2.99 0 0 0 14.126 26h41.748a2.991 2.991 0 0 0 2.528-1.383c.554-.866.627-1.94.196-2.874",
     fill: "#3F5463"
-  }), /*#__PURE__*/_react.default.createElement("path", {
+  }), (0, _emotion.jsx)("path", {
     d: "M34.666 4.551a2 2 0 1 0 .002 4.002 2 2 0 0 0-.002-4.002",
     fill: "#3F5463"
-  }), /*#__PURE__*/_react.default.createElement("path", {
+  }), (0, _emotion.jsx)("path", {
     d: "M30.907 46.59a4.568 4.568 0 1 0-9.137.002 4.568 4.568 0 0 0 9.137-.001M44.339 42.023a4.568 4.568 0 1 0 0 9.136 4.568 4.568 0 0 0 0-9.136M43.5 65.894H27a2 2 0 0 0 0 4h16.5a2 2 0 0 0 0-4",
     fill: "#6F7F8A"
   })));
 };
 
-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'
-};
-
 var renderBillboard = function renderBillboard(args, _foo) {
   var boardProps = Object.assign({
     headingLevel: 'h3',
     size: 'small',
     margin: 'medium'
   }, args);
-  return /*#__PURE__*/_react.default.createElement(_uiBillboard.Billboard, boardProps);
+  return (0, _emotion.jsx)(_uiBillboard.Billboard, boardProps);
 };
 
-var renderLoading = function renderLoading() {
-  return /*#__PURE__*/_react.default.createElement("div", {
-    className: styles.loadingSpinner
-  }, /*#__PURE__*/_react.default.createElement(_uiSpinner.Spinner, {
+var renderLoading = function renderLoading(styles) {
+  return (0, _emotion.jsx)("div", {
+    css: styles.loadingSpinner
+  }, (0, _emotion.jsx)(_uiSpinner.Spinner, {
     renderTitle: "Cargando"
   }));
 };
@@ -217,9 +200,9 @@ var noOutcomes = function noOutcomes() {
   return {
     heading: "No hay ning\xFAn reporte aqu\xED para mostrar",
     message: "La evaluaci\xF3n no tiene competencias alineadas. Ingrese a la pesta\xF1a Construcci\xF3n para alinear las competencias.",
-    hero: /*#__PURE__*/_react.default.createElement("span", {
+    hero: (0, _emotion.jsx)("span", {
       "aria-hidden": "true"
-    }, /*#__PURE__*/_react.default.createElement(NoReport, null))
+    }, (0, _emotion.jsx)(NoReport, null))
   };
 };
 
@@ -227,44 +210,43 @@ var noStudents = function noStudents() {
   return {
     heading: "Parece que es muy pronto",
     message: "Los estudiantes deben terminar primero la evaluaci\xF3n para que se muestren los resultados de competencia aqu\xED. Vuelva a intentarlo despu\xE9s de que algunos estudiantes hayan completado la evaluaci\xF3n.",
-    hero: /*#__PURE__*/_react.default.createElement(Early, null)
+    hero: (0, _emotion.jsx)(Early, null)
   };
 };
 
-var renderCorner = function renderCorner(count) {
+var renderCorner = function renderCorner(count, styles) {
   var _s, _n;
 
   var text = (_s = count, _n = +_s, (_n === 1 ? "1\xA0competencia alineada" : _default_es_number(count) + " competencias alineadas"));
-  return /*#__PURE__*/_react.default.createElement("div", {
-    className: styles.corner,
+  return (0, _emotion.jsx)("div", {
+    css: styles.corner,
     role: "columnheader",
     "data-automation": "outcomesPerStudent__corner"
-  }, /*#__PURE__*/_react.default.createElement(_uiIcons.IconOutcomesLine, null), /*#__PURE__*/_react.default.createElement(_uiText.Text, {
+  }, (0, _emotion.jsx)(_uiIcons.IconOutcomesLine, null), (0, _emotion.jsx)(_uiText.Text, {
     size: "small"
   }, text));
 };
 
-var renderStudentName = function renderStudentName(student) {
+var renderStudentName = function renderStudentName(student, styles) {
   var studentNameId = _shortid.default.generate();
 
-  var studentNameElement = /*#__PURE__*/_react.default.createElement("div", {
-    className: styles.studentName,
+  var studentNameElement = (0, _emotion.jsx)("div", {
+    css: styles.studentName,
     id: studentNameId,
     role: "rowheader"
-  }, /*#__PURE__*/_react.default.createElement(_uiA11yContent.PresentationContent, null, /*#__PURE__*/_react.default.createElement("span", {
-    className: styles.avatar,
+  }, (0, _emotion.jsx)(_uiA11yContent.PresentationContent, null, (0, _emotion.jsx)("span", {
+    css: styles.avatar,
     "data-automation": "outcomesPerStudent__avatar"
-  }, /*#__PURE__*/_react.default.createElement(_uiAvatar.Avatar, {
+  }, (0, _emotion.jsx)(_uiAvatar.Avatar, {
     size: "small",
     name: student.full_name,
     src: student.avatar_url
-  }))), /*#__PURE__*/_react.default.createElement("span", {
-    className: styles.name,
+  }))), (0, _emotion.jsx)("span", {
+    css: styles.name,
     "data-automation": "outcomesPerStudent__name"
-  }, /*#__PURE__*/_react.default.createElement(_uiText.Text, {
+  }, (0, _emotion.jsx)(_uiText.Text, {
     size: "small"
   }, student.full_name)));
-
   return {
     studentNameId: studentNameId,
     studentNameElement: studentNameElement
@@ -280,7 +262,7 @@ var renderPagination = function renderPagination(_ref) {
       loadUsersOverride = _ref.loadUsersOverride;
 
   if (currentPage !== null) {
-    return /*#__PURE__*/_react.default.createElement(_uiPagination.Pagination, {
+    return (0, _emotion.jsx)(_uiPagination.Pagination, {
       margin: "small",
       variant: "compact",
       labelNext: "Pr\xF3xima p\xE1gina",
@@ -292,7 +274,7 @@ var renderPagination = function renderPagination(_ref) {
         return loadPage(artifactType, artifactId, pageNumber, loadUsersOverride);
       };
 
-      return /*#__PURE__*/_react.default.createElement(_uiPagination.PaginationButton, {
+      return (0, _emotion.jsx)(_uiPagination.PaginationButton, {
         current: current,
         key: pageNumber,
         onClick: changePage
@@ -313,7 +295,7 @@ renderPagination.propTypes = {
 renderPagination.defaultProps = {
   loadUsersOverride: void 0
 };
-var OutcomesPerStudentReport = (_dec = (0, _uiThemeable.themeable)(_theme.default, styles), _dec(_class = (_temp = _class2 = /*#__PURE__*/function (_React$Component) {
+var OutcomesPerStudentReport = (_dec = (0, _emotion.withStyle)(_styles.default, _theme.default), _dec(_class = (_temp = _class2 = /*#__PURE__*/function (_React$Component) {
   (0, _inherits2.default)(OutcomesPerStudentReport, _React$Component);
 
   var _super = (0, _createSuper2.default)(OutcomesPerStudentReport);
@@ -347,7 +329,7 @@ var OutcomesPerStudentReport = (_dec = (0, _uiThemeable.themeable)(_theme.defaul
       };
 
       if (reportDownloadEnabled && !loading && hasAnyOutcomes && hasAnyStudents) {
-        return /*#__PURE__*/_react.default.createElement(_index.default, {
+        return (0, _emotion.jsx)(_index.default, {
           fetchCSVData: fetchCSVData,
           formatCSVData: formatCSVData,
           fetchingStatus: csvFetchingStatus,
@@ -381,6 +363,8 @@ var OutcomesPerStudentReport = (_dec = (0, _uiThemeable.themeable)(_theme.defaul
   }, {
     key: "renderReportTable",
     value: function renderReportTable() {
+      var _this2 = this;
+
       var headerIds = [];
       var _this$props3 = this.props,
           rollups = _this$props3.rollups,
@@ -392,29 +376,27 @@ var OutcomesPerStudentReport = (_dec = (0, _uiThemeable.themeable)(_theme.defaul
           users = _this$props3.users,
           showRollups = _this$props3.showRollups,
           scope = _this$props3.scope;
-      return /*#__PURE__*/_react.default.createElement("div", {
-        className: styles.reportWrapper,
+      return (0, _emotion.jsx)("div", {
+        css: this.props.styles.reportWrapper,
         "data-automation": "outcomesPerStudent__reportWrapper"
-      }, /*#__PURE__*/_react.default.createElement("div", {
-        className: styles.table,
+      }, (0, _emotion.jsx)("div", {
+        css: this.props.styles.table,
         role: "grid"
-      }, /*#__PURE__*/_react.default.createElement("div", {
-        className: styles.headerRow,
+      }, (0, _emotion.jsx)("div", {
+        css: this.props.styles.headerRow,
         role: "row",
         "data-automation": "outcomesPerStudent__headerRow"
-      }, renderCorner(rollups.length), rollups.map(function (rollup, i) {
+      }, renderCorner(rollups.length, this.props.styles), rollups.map(function (rollup, i) {
         headerIds[i] = _shortid.default.generate(); // eslint-disable-line immutable/no-mutation
 
-        return (
-          /*#__PURE__*/
-          // FIXME: use stable keys here
-          _react.default.createElement("div", {
+        return (// FIXME: use stable keys here
+          (0, _emotion.jsx)("div", {
             id: headerIds[i],
             key: headerIds[i],
             role: "columnheader",
-            className: styles.headerCell,
+            css: _this2.props.styles.headerCell,
             "data-automation": "outcomesPerStudent__headerCell"
-          }, /*#__PURE__*/_react.default.createElement(_index2.default, {
+          }, (0, _emotion.jsx)(_index2.default, {
             outcomeResult: rollup,
             getReportOutcome: getReportOutcome,
             viewReportAlignment: function viewReportAlignment() {
@@ -426,38 +408,36 @@ var OutcomesPerStudentReport = (_dec = (0, _uiThemeable.themeable)(_theme.defaul
             scope: scope
           }))
         );
-      })), /*#__PURE__*/_react.default.createElement("div", {
+      })), (0, _emotion.jsx)("div", {
         role: "row"
-      }, /*#__PURE__*/_react.default.createElement("div", {
+      }, (0, _emotion.jsx)("div", {
         role: "rowheader"
-      }, /*#__PURE__*/_react.default.createElement(_uiA11yContent.ScreenReaderContent, null, "Detalles")), rollups.map(function (rollup, i) {
-        return (
-          /*#__PURE__*/
-          // FIXME: use stable keys here
-          _react.default.createElement("div", {
+      }, (0, _emotion.jsx)(_uiA11yContent.ScreenReaderContent, null, "Detalles")), rollups.map(function (rollup, i) {
+        return (// FIXME: use stable keys here
+          (0, _emotion.jsx)("div", {
             key: headerIds[i],
             role: "gridcell"
-          }, /*#__PURE__*/_react.default.createElement(_uiA11yContent.ScreenReaderContent, null, /*#__PURE__*/_react.default.createElement(_index3.default, {
+          }, (0, _emotion.jsx)(_uiA11yContent.ScreenReaderContent, null, (0, _emotion.jsx)(_index3.default, {
             outcomeResult: rollup,
             showRollups: showRollups
           })))
         );
       })), users.map(function (student) {
-        var _renderStudentName = renderStudentName(student),
+        var _renderStudentName = renderStudentName(student, _this2.props.styles),
             studentNameElement = _renderStudentName.studentNameElement;
 
-        return /*#__PURE__*/_react.default.createElement("div", {
+        return (0, _emotion.jsx)("div", {
           key: student.uuid,
-          className: styles.studentRow,
+          css: _this2.props.styles.studentRow,
           role: "row",
           "data-automation": "outcomesPerStudent__studentRow"
         }, studentNameElement, rollups.map(function (rollup, i) {
-          return /*#__PURE__*/_react.default.createElement("div", {
+          return (0, _emotion.jsx)("div", {
             key: rollup.outcomeId,
-            className: styles.scoreCell,
+            css: _this2.props.styles.scoreCell,
             role: "gridcell",
             "data-automation": "outcomesPerStudent__scoreCell"
-          }, /*#__PURE__*/_react.default.createElement(_index4.default, {
+          }, (0, _emotion.jsx)(_index4.default, {
             score: getScore(rollup.outcomeId, student.uuid),
             outcome: getReportOutcome(rollup.outcomeId)
           }));
@@ -467,7 +447,7 @@ var OutcomesPerStudentReport = (_dec = (0, _uiThemeable.themeable)(_theme.defaul
   }, {
     key: "render",
     value: function render() {
-      var _this2 = this;
+      var _this3 = this;
 
       var _this$props4 = this.props,
           users = _this$props4.users,
@@ -478,18 +458,18 @@ var OutcomesPerStudentReport = (_dec = (0, _uiThemeable.themeable)(_theme.defaul
 
       var renderReportContent = function renderReportContent() {
         if (loading) {
-          return renderLoading();
+          return renderLoading(_this3.props.styles);
         } else if (!hasAnyOutcomes) {
           return renderBillboard(noOutcomes());
         } else if (!hasAnyStudents) {
           return renderBillboard(noStudents());
         } else {
-          return _this2.renderReportTable();
+          return _this3.renderReportTable();
         }
       };
 
-      return /*#__PURE__*/_react.default.createElement("div", {
-        className: styles.background
+      return (0, _emotion.jsx)("div", {
+        css: this.props.styles.background
       }, this.renderExportButton(hasAnyStudents, focusedElement), renderReportContent());
     }
   }]);
@@ -516,7 +496,8 @@ var OutcomesPerStudentReport = (_dec = (0, _uiThemeable.themeable)(_theme.defaul
   closeReportAlignment: _propTypes.default.func.isRequired,
   features: _propTypes.default.array.isRequired,
   clearReportStore: _propTypes.default.func.isRequired,
-  scope: _propTypes.default.string.isRequired
+  scope: _propTypes.default.string.isRequired,
+  styles: _propTypes.default.object
 }, _class2.defaultProps = {
   loadUsersOverride: void 0,
   showRollups: true