@instructure/outcomes-ui 2.1.9 → 3.0.0

package/lib/translated/es_ES/components/OutcomeTree/index.js

@@ -21,7 +21,7 @@ var _propTypes = _interopRequireDefault(require("prop-types"));
 
 var _reactDom = _interopRequireDefault(require("react-dom"));
 
-var _uiThemeable = _interopRequireDefault(require("@instructure/ui-themeable"));
+var _emotion = require("@instructure/emotion");
 
 var _uiBillboard = require("@instructure/ui-billboard");
 
@@ -39,98 +39,92 @@ var _index3 = _interopRequireDefault(require("./TreeBrowser/index.js"));
 
 var _theme = _interopRequireDefault(require("../theme.js"));
 
+var _styles = _interopRequireDefault(require("./styles.js"));
+
 var _sanitize = require("../../lib/sanitize.js");
 
+var _shapes = require("../../store/shapes.js");
+
 var _dec, _class, _class2, _temp;
 
 var AlignOutcomes = function AlignOutcomes(props) {
-  return /*#__PURE__*/_react.default.createElement("svg", Object.assign({
+  return (0, _emotion.jsx)("svg", Object.assign({
     width: "120",
     height: "87",
     viewBox: "0 0 120 87",
     xmlns: "http://www.w3.org/2000/svg"
-  }, props), /*#__PURE__*/_react.default.createElement("title", null, "Align-Outcomes"), /*#__PURE__*/_react.default.createElement("g", {
+  }, props), (0, _emotion.jsx)("title", null, "Align-Outcomes"), (0, _emotion.jsx)("g", {
     fill: "none",
     fillRule: "evenodd"
-  }, /*#__PURE__*/_react.default.createElement("path", {
+  }, (0, _emotion.jsx)("path", {
     d: "M77.383 16.062a6.636 6.636 0 0 0 .604-2.762 6.667 6.667 0 0 0-4.204-6.193c.012-.142.022-.286.022-.431a4.958 4.958 0 0 0-4.958-4.958 4.927 4.927 0 0 0-2.898.94A11.87 11.87 0 0 0 59.881 1c-4.753 0-8.856 2.779-10.776 6.8a7.219 7.219 0 0 0-2.983-.648c-4 0-7.243 3.243-7.243 7.243 0 .574.074 1.13.201 1.667h38.303z",
     fill: "#FFF"
-  }), /*#__PURE__*/_react.default.createElement("path", {
+  }), (0, _emotion.jsx)("path", {
     d: "M77.383 16.062a6.636 6.636 0 0 0 .604-2.762 6.667 6.667 0 0 0-4.204-6.193c.012-.142.022-.286.022-.431a4.958 4.958 0 0 0-4.958-4.958 4.927 4.927 0 0 0-2.898.94A11.87 11.87 0 0 0 59.881 1c-4.753 0-8.856 2.779-10.776 6.8a7.219 7.219 0 0 0-2.983-.648c-4 0-7.243 3.243-7.243 7.243 0 .574.074 1.13.201 1.667h38.303z",
     stroke: "#CED3D7",
     strokeWidth: "2",
     strokeLinecap: "round"
-  }), /*#__PURE__*/_react.default.createElement("path", {
+  }), (0, _emotion.jsx)("path", {
     d: "M118.39 23.614c.015-.228.025-.457.025-.688 0-5.703-4.623-10.327-10.326-10.327-1.913 0-3.704.523-5.24 1.43a7.675 7.675 0 0 0-14.68 2.219 6.02 6.02 0 0 0-.936-.08 5.992 5.992 0 0 0-5.992 5.992c0 .502.07.988.185 1.454h36.964z",
     fill: "#FFF"
-  }), /*#__PURE__*/_react.default.createElement("path", {
+  }), (0, _emotion.jsx)("path", {
     d: "M118.39 23.614c.015-.228.025-.457.025-.688 0-5.703-4.623-10.327-10.326-10.327-1.913 0-3.704.523-5.24 1.43a7.675 7.675 0 0 0-14.68 2.219 6.02 6.02 0 0 0-.936-.08 5.992 5.992 0 0 0-5.992 5.992c0 .502.07.988.185 1.454h36.964z",
     stroke: "#CED3D7",
     strokeWidth: "2",
     strokeLinecap: "round"
-  }), /*#__PURE__*/_react.default.createElement("path", {
+  }), (0, _emotion.jsx)("path", {
     d: "M84.402 85.735a3.82 3.82 0 0 1-3.174-1.685L57.064 48.29 32.901 84.05a3.827 3.827 0 1 1-6.34-4.284l30.503-45.148L87.57 79.766a3.827 3.827 0 0 1-3.167 5.97",
     fill: "#E5E8EA"
-  }), /*#__PURE__*/_react.default.createElement("path", {
+  }), (0, _emotion.jsx)("path", {
     d: "M84.402 85.735a3.82 3.82 0 0 1-3.174-1.685L57.064 48.29 32.901 84.05a3.827 3.827 0 1 1-6.34-4.284l30.503-45.148L87.57 79.766a3.827 3.827 0 0 1-3.167 5.97z",
     stroke: "#3F5463",
     strokeWidth: "2"
-  }), /*#__PURE__*/_react.default.createElement("path", {
+  }), (0, _emotion.jsx)("path", {
     d: "M84.398 50.201c0 15.096-12.238 27.334-27.334 27.334S29.73 65.297 29.73 50.201s12.238-27.334 27.334-27.334 27.334 12.238 27.334 27.334",
     fill: "#FFF"
-  }), /*#__PURE__*/_react.default.createElement("path", {
+  }), (0, _emotion.jsx)("path", {
     d: "M84.398 50.201c0 15.096-12.238 27.334-27.334 27.334S29.73 65.297 29.73 50.201s12.238-27.334 27.334-27.334 27.334 12.238 27.334 27.334z",
     stroke: "#3F5463",
     strokeWidth: "2"
-  }), /*#__PURE__*/_react.default.createElement("path", {
+  }), (0, _emotion.jsx)("path", {
     d: "M77.291 50.201c0 11.171-9.055 20.227-20.226 20.227s-20.227-9.056-20.227-20.227c0-11.17 9.056-20.227 20.227-20.227 11.17 0 20.227 9.056 20.227 20.227",
     fill: "#F1060F"
-  }), /*#__PURE__*/_react.default.createElement("path", {
+  }), (0, _emotion.jsx)("path", {
     d: "M77.291 50.201c0 11.171-9.055 20.227-20.226 20.227s-20.227-9.056-20.227-20.227c0-11.17 9.056-20.227 20.227-20.227 11.17 0 20.227 9.056 20.227 20.227z",
     stroke: "#3F5463",
     strokeWidth: "2"
-  }), /*#__PURE__*/_react.default.createElement("path", {
+  }), (0, _emotion.jsx)("path", {
     d: "M70.185 50.201c0 7.246-5.874 13.12-13.12 13.12-7.246 0-13.121-5.874-13.121-13.12 0-7.246 5.875-13.12 13.12-13.12 7.247 0 13.12 5.874 13.12 13.12",
     fill: "#FFF"
-  }), /*#__PURE__*/_react.default.createElement("path", {
+  }), (0, _emotion.jsx)("path", {
     d: "M70.185 50.201c0 7.246-5.874 13.12-13.12 13.12-7.246 0-13.121-5.874-13.121-13.12 0-7.246 5.875-13.12 13.12-13.12 7.247 0 13.12 5.874 13.12 13.12z",
     stroke: "#3F5463",
     strokeWidth: "2"
-  }), /*#__PURE__*/_react.default.createElement("path", {
+  }), (0, _emotion.jsx)("path", {
     d: "M63.625 50.201a6.56 6.56 0 1 1-13.12 0 6.56 6.56 0 0 1 13.12 0",
     fill: "#F1060F"
-  }), /*#__PURE__*/_react.default.createElement("path", {
+  }), (0, _emotion.jsx)("path", {
     d: "M63.625 50.201a6.56 6.56 0 1 1-13.12 0 6.56 6.56 0 0 1 13.12 0z",
     stroke: "#3F5463",
     strokeWidth: "2"
-  }), /*#__PURE__*/_react.default.createElement("path", {
+  }), (0, _emotion.jsx)("path", {
     d: "M42.855 23.346a8.598 8.598 0 0 0 .857-3.736 8.655 8.655 0 0 0-8.654-8.654c-4.003 0-7.361 2.72-8.35 6.41a8.657 8.657 0 0 0-2.548-.532l.002-.027A8.344 8.344 0 0 0 8.12 13.59C4.074 14.314 1 17.845 1 22.1c0 .424.04.837.1 1.245h41.755z",
     fill: "#FFF"
-  }), /*#__PURE__*/_react.default.createElement("path", {
+  }), (0, _emotion.jsx)("path", {
     d: "M42.855 23.346a8.598 8.598 0 0 0 .857-3.736 8.655 8.655 0 0 0-8.654-8.654c-4.003 0-7.361 2.72-8.35 6.41a8.657 8.657 0 0 0-2.548-.532l.002-.027A8.344 8.344 0 0 0 8.12 13.59C4.074 14.314 1 17.845 1 22.1c0 .424.04.837.1 1.245h41.755z",
     stroke: "#CED3D7",
     strokeWidth: "2",
     strokeLinecap: "round"
-  }), /*#__PURE__*/_react.default.createElement("path", {
+  }), (0, _emotion.jsx)("path", {
     fill: "#3F5463",
     d: "M64.635 43.022V15.576l10.02 10.021 14.62-14.619 7.404 7.403-14.62 14.62 10.023 10.021z"
-  }), /*#__PURE__*/_react.default.createElement("path", {
+  }), (0, _emotion.jsx)("path", {
     d: "M89.275 8.857l-2.12 2.12-12.499 12.499-6.4-6.4-5.122-5.121v32.568h32.568L90.58 39.4l-6.4-6.4 12.498-12.498 2.122-2.121-2.122-2.122-5.282-5.282-2.12-2.121zm0 4.243l5.282 5.282L79.938 33l8.521 8.522H66.134V19.197l8.522 8.522 14.62-14.62z",
     fill: "#FFF"
   })));
 };
 
-var styles = {
-  componentId: 'bkdMu',
-  template: function template(theme) {
-    return "\n\n.outcomes-ui__OutcomeTree--outcomeTree {\n  overflow: scroll;\n  height: 100%;\n}\n\n.outcomes-ui__OutcomeTree--outcomeContent {\n  display: flex;\n  flex-direction: column;\n  height: 100%;\n  overflow-y: scroll;\n}\n\n.outcomes-ui__OutcomeTree--selectedOutcomeCollection {\n  padding-bottom: 1rem;\n  padding-left: 1rem;\n  padding-top: 1rem;\n}\n\n.outcomes-ui__OutcomeTree--selectedOutcomeCollection .outcomes-ui__OutcomeTree--outcomeDescription > p {\n  margin-top: 0.75rem;\n  margin-bottom: 0.75rem;\n}\n\n.outcomes-ui__OutcomeTree--selectedOutcomeCollection .outcomes-ui__OutcomeTree--outcomeDescription > p:last-child {\n    margin-bottom: 0\n  }\n";
-  },
-  'outcomeTree': 'outcomes-ui__OutcomeTree--outcomeTree',
-  'outcomeContent': 'outcomes-ui__OutcomeTree--outcomeContent',
-  'selectedOutcomeCollection': 'outcomes-ui__OutcomeTree--selectedOutcomeCollection',
-  'outcomeDescription': 'outcomes-ui__OutcomeTree--outcomeDescription'
-};
-var OutcomeTree = (_dec = (0, _uiThemeable.default)(_theme.default, styles), _dec(_class = (_temp = _class2 = /*#__PURE__*/function (_React$Component) {
+var OutcomeTree = (_dec = (0, _emotion.withStyle)(_styles.default, _theme.default), _dec(_class = (_temp = _class2 = /*#__PURE__*/function (_React$Component) {
   (0, _inherits2.default)(OutcomeTree, _React$Component);
 
   var _super = (0, _createSuper2.default)(OutcomeTree);
@@ -167,29 +161,30 @@ var OutcomeTree = (_dec = (0, _uiThemeable.default)(_theme.default, styles), _de
     key: "renderActiveCollection",
     value: function renderActiveCollection() {
       var activeCollection = this.props.activeCollection;
-      return activeCollection && activeCollection.id ? /*#__PURE__*/_react.default.createElement("div", {
-        className: styles.selectedOutcomeCollection
-      }, /*#__PURE__*/_react.default.createElement("div", null, /*#__PURE__*/_react.default.createElement(_uiHeading.Heading, {
+      return activeCollection && activeCollection.id ? (0, _emotion.jsx)("div", {
+        css: this.props.styles.selectedOutcomeCollection
+      }, (0, _emotion.jsx)("div", null, (0, _emotion.jsx)(_uiHeading.Heading, {
         level: "h3",
         as: "h2",
         margin: "0 0 x-small"
-      }, activeCollection.header)), /*#__PURE__*/_react.default.createElement("div", null, /*#__PURE__*/_react.default.createElement(_uiText.Text, {
+      }, activeCollection.header)), (0, _emotion.jsx)("div", null, (0, _emotion.jsx)(_uiText.Text, {
         size: "x-small"
-      }, activeCollection.summary)), /*#__PURE__*/_react.default.createElement(_uiText.Text, {
+      }, activeCollection.summary)), (0, _emotion.jsx)(_uiText.Text, {
         size: "x-small"
-      }, /*#__PURE__*/_react.default.createElement("div", {
-        className: styles.outcomeDescription,
+      }, (0, _emotion.jsx)("div", {
+        css: this.props.styles.outcomeDescription,
+        className: "outcomeTreeOutcomeDescription",
         dangerouslySetInnerHTML: {
           // eslint-disable-line react/no-danger
           __html: (0, _sanitize.sanitizeHtml)(activeCollection.description)
         }
-      }))) : /*#__PURE__*/_react.default.createElement(_uiBillboard.Billboard, {
+      }))) : (0, _emotion.jsx)(_uiBillboard.Billboard, {
         message: "Explore sus competencias usando las carpetas grupales.",
         heading: "Alinear competencias",
         headingAs: "h3",
         headingLevel: "h3",
         size: "small",
-        hero: /*#__PURE__*/_react.default.createElement(AlignOutcomes, null),
+        hero: (0, _emotion.jsx)(AlignOutcomes, null),
         margin: "medium"
       });
     }
@@ -213,46 +208,46 @@ var OutcomeTree = (_dec = (0, _uiThemeable.default)(_theme.default, styles), _de
           expandedIds = _this$props.expandedIds;
       var groups = activeChildren.groups,
           nonGroups = activeChildren.nonGroups;
-      return /*#__PURE__*/_react.default.createElement(_uiFlex.Flex, {
+      return (0, _emotion.jsx)(_uiFlex.Flex, {
         alignItems: "stretch",
         height: "100%",
         width: "100%"
-      }, /*#__PURE__*/_react.default.createElement(_uiFlex.Flex.Item, {
+      }, (0, _emotion.jsx)(_uiFlex.Flex.Item, {
         width: "30%"
-      }, /*#__PURE__*/_react.default.createElement("div", {
-        className: styles.outcomeTree,
+      }, (0, _emotion.jsx)("div", {
+        css: this.props.styles.outcomeTree,
         "data-automation": "outcomePicker__outcomeTree"
-      }, /*#__PURE__*/_react.default.createElement(_index3.default, {
+      }, (0, _emotion.jsx)(_index3.default, {
         collections: collections,
         setActiveCollection: setActiveCollection,
         rootOutcomeIds: rootOutcomeIds,
         expandedIds: expandedIds,
         toggleExpandedIds: toggleExpandedIds
-      }))), /*#__PURE__*/_react.default.createElement(_uiFlex.Flex.Item, {
+      }))), (0, _emotion.jsx)(_uiFlex.Flex.Item, {
         size: "0",
         shouldGrow: true,
         display: "flex",
         borderWidth: "0 0 0 small"
-      }, /*#__PURE__*/_react.default.createElement(_uiFlex.Flex, {
+      }, (0, _emotion.jsx)(_uiFlex.Flex, {
         height: "100%",
         width: "100%",
         direction: "column",
         alignItems: "stretch",
-        className: styles.outcomeContent,
+        css: this.props.styles.outcomeContent,
         elementRef: function elementRef(rhs) {
           return _this.setRHS(rhs);
         },
         "data-automation": "outcomePicker__outcomeContent"
-      }, /*#__PURE__*/_react.default.createElement(_uiFlex.Flex.Item, {
+      }, (0, _emotion.jsx)(_uiFlex.Flex.Item, {
         size: "0",
         shouldGrow: true
-      }, this.renderActiveCollection(), /*#__PURE__*/_react.default.createElement(_index.default, {
+      }, this.renderActiveCollection(), (0, _emotion.jsx)(_index.default, {
         setFocusedOutcome: setFocusedOutcome,
         outcomes: nonGroups,
         isOutcomeSelected: isOutcomeSelected,
         selectOutcomeIds: selectOutcomeIds,
         deselectOutcomeIds: deselectOutcomeIds
-      }), /*#__PURE__*/_react.default.createElement(_index2.default, {
+      }), (0, _emotion.jsx)(_index2.default, {
         outcomes: groups,
         setActiveCollection: setActiveCollection,
         getOutcomeSummary: getOutcomeSummary,
@@ -283,7 +278,8 @@ var OutcomeTree = (_dec = (0, _uiThemeable.default)(_theme.default, styles), _de
     header: _propTypes.default.string,
     summary: _propTypes.default.string,
     description: _propTypes.default.string
-  })
+  }),
+  styles: _shapes.stylesShape
 }, _class2.defaultProps = {
   expandedIds: null,
   activeCollection: null,

package/lib/translated/es_ES/components/OutcomeTree/styles.js

@@ -0,0 +1,36 @@
+"use strict";
+
+Object.defineProperty(exports, "__esModule", {
+  value: true
+});
+exports.default = void 0;
+
+var generateStyle = function generateStyle() {
+  return {
+    outcomeTree: {
+      overflow: 'scroll',
+      height: '100%'
+    },
+    outcomeContent: {
+      display: 'flex',
+      flexDirection: 'column',
+      height: '100%',
+      overflowY: 'scroll'
+    },
+    selectedOutcomeCollection: {
+      paddingBottom: '1rem',
+      paddingLeft: '1rem',
+      paddingTop: '1rem',
+      '.selectedOutcomeCollection .outcomeDescription > p': {
+        marginTop: '0.75rem',
+        marginBottom: '0.75rem',
+        '&:last-child': {
+          marginBottom: '0'
+        }
+      }
+    }
+  };
+};
+
+var _default = generateStyle;
+exports.default = _default;

package/lib/translated/es_ES/components/OutcomeView/MasteryCounts/__tests__/index.test.js

@@ -12,6 +12,8 @@ var _index = _interopRequireDefault(require("../index.js"));
 
 var _checkA11y = _interopRequireDefault(require("../../../../test/checkA11y.js"));
 
+var _uiProgress = require("@instructure/ui-progress");
+
 describe('OutcomeView MasteryCounts', function () {
   var scoringMethod = {
     id: 1,
@@ -35,7 +37,7 @@ describe('OutcomeView MasteryCounts', function () {
 
   it('includes a progress bar', function () {
     var wrapper = (0, _enzyme.mount)( /*#__PURE__*/_react.default.createElement(_index.default, makeProps()));
-    (0, _chai.expect)(wrapper.find('ProgressBar')).to.have.length(1);
+    (0, _chai.expect)(wrapper.find(_uiProgress.ProgressBar)).to.have.length(1);
   });
   it('meets a11y standards', function () {
     return (0, _checkA11y.default)( /*#__PURE__*/_react.default.createElement(_index.default, makeProps()));

package/lib/translated/es_ES/components/OutcomeView/MasteryCounts/index.js

@@ -17,33 +17,23 @@ var _createSuper2 = _interopRequireDefault(require("@babel/runtime/helpers/creat
 
 var _react = _interopRequireDefault(require("react"));
 
-var _uiThemeable = require("@instructure/ui-themeable");
-
 var _uiText = require("@instructure/ui-text");
 
 var _uiProgress = require("@instructure/ui-progress");
 
+var _emotion = require("@instructure/emotion");
+
 var _shapes = require("../../../store/shapes.js");
 
 var _convertToPoints = _interopRequireDefault(require("../convertToPoints.js"));
 
 var _theme = _interopRequireDefault(require("../../theme.js"));
 
+var _styles = _interopRequireDefault(require("./styles.js"));
+
 var _dec, _class, _class2, _temp;
 
-var styles = {
-  componentId: 'dIVYN',
-  template: function template(theme) {
-    return "\n\n@media screen and (min-width: 768px) {\n  .outcomes-ui__MasteryCounts--masteryBarGraph {\n    margin-top: 2rem;\n  }\n\n  .outcomes-ui__MasteryCounts--masteryScoreSection {\n    display: none;\n  }\n}\n\n@media screen and (max-width: 768px) {\n  .outcomes-ui__MasteryCounts--masteryBarGraph {\n    display: none;\n  }\n\n  .outcomes-ui__MasteryCounts--masteryScoreSection {\n    display: flex;\n    flex-direction: row;\n    justify-content: space-evenly;\n    margin-top: 2rem;\n  }\n\n  .outcomes-ui__MasteryCounts--masteryScoreBoxAboveMastery {\n    color: ".concat(theme.masteryColor || 'inherit', ";\n    display: flex;\n    flex-direction: column;\n    font-weight: bold;\n    text-align: center;\n  }\n\n  [dir=\"ltr\"] .outcomes-ui__MasteryCounts--masteryScoreBoxAboveMastery {\n    text-align: center;\n  }\n\n  [dir=\"rtl\"] .outcomes-ui__MasteryCounts--masteryScoreBoxAboveMastery {\n    text-align: center;\n  }\n\n  .outcomes-ui__MasteryCounts--masteryScoreBoxBelowMastery {\n    display: flex;\n    flex-direction: column;\n    font-weight: bold;\n    text-align: center;\n  }\n\n  [dir=\"ltr\"] .outcomes-ui__MasteryCounts--masteryScoreBoxBelowMastery {\n    text-align: center;\n  }\n\n  [dir=\"rtl\"] .outcomes-ui__MasteryCounts--masteryScoreBoxBelowMastery {\n    text-align: center;\n  }\n}\n\n.outcomes-ui__MasteryCounts--masteryBarDetails {\n  display: flex;\n  justify-content: space-between;\n  padding-top: 0.25rem;\n}\n\n.outcomes-ui__MasteryCounts--masteryCountText {\n  color: ").concat(theme.masteryColor || 'inherit', ";\n}\n");
-  },
-  'masteryBarGraph': 'outcomes-ui__MasteryCounts--masteryBarGraph',
-  'masteryScoreSection': 'outcomes-ui__MasteryCounts--masteryScoreSection',
-  'masteryScoreBoxAboveMastery': 'outcomes-ui__MasteryCounts--masteryScoreBoxAboveMastery',
-  'masteryScoreBoxBelowMastery': 'outcomes-ui__MasteryCounts--masteryScoreBoxBelowMastery',
-  'masteryBarDetails': 'outcomes-ui__MasteryCounts--masteryBarDetails',
-  'masteryCountText': 'outcomes-ui__MasteryCounts--masteryCountText'
-};
-var MasteryCounts = (_dec = (0, _uiThemeable.themeable)(_theme.default, styles), _dec(_class = (_temp = _class2 = /*#__PURE__*/function (_React$Component) {
+var MasteryCounts = (_dec = (0, _emotion.withStyle)(_styles.default, _theme.default), _dec(_class = (_temp = _class2 = /*#__PURE__*/function (_React$Component) {
   (0, _inherits2.default)(MasteryCounts, _React$Component);
 
   var _super = (0, _createSuper2.default)(MasteryCounts);
@@ -61,38 +51,38 @@ var MasteryCounts = (_dec = (0, _uiThemeable.themeable)(_theme.default, styles),
           outcomeResult = _this$props.outcomeResult,
           scoringMethod = _this$props.scoringMethod;
       var masteryPoints = (0, _convertToPoints.default)(scoringMethod.mastery_percent, scoringMethod);
-      return /*#__PURE__*/_react.default.createElement("div", null, /*#__PURE__*/_react.default.createElement("div", {
-        className: styles.masteryScoreSection
-      }, /*#__PURE__*/_react.default.createElement("div", {
-        className: styles.masteryScoreBoxAboveMastery
-      }, /*#__PURE__*/_react.default.createElement(_uiText.Text, {
+      return (0, _emotion.jsx)("div", null, (0, _emotion.jsx)("div", {
+        css: this.props.styles.masteryScoreSection
+      }, (0, _emotion.jsx)("div", {
+        css: this.props.styles.masteryScoreBoxAboveMastery
+      }, (0, _emotion.jsx)(_uiText.Text, {
         size: "x-large"
-      }, outcomeResult.masteryCount), /*#__PURE__*/_react.default.createElement(_uiText.Text, {
+      }, outcomeResult.masteryCount), (0, _emotion.jsx)(_uiText.Text, {
         size: "small"
-      }, "Dominio a los " + masteryPoints + " puntos")), /*#__PURE__*/_react.default.createElement("div", {
-        className: styles.masteryScoreBoxBelowMastery
-      }, /*#__PURE__*/_react.default.createElement(_uiText.Text, {
+      }, "Dominio a los " + masteryPoints + " puntos")), (0, _emotion.jsx)("div", {
+        css: this.props.styles.masteryScoreBoxBelowMastery
+      }, (0, _emotion.jsx)(_uiText.Text, {
         size: "x-large"
-      }, outcomeResult.count - outcomeResult.masteryCount), /*#__PURE__*/_react.default.createElement(_uiText.Text, {
+      }, outcomeResult.count - outcomeResult.masteryCount), (0, _emotion.jsx)(_uiText.Text, {
         size: "small"
-      }, "No alcanzado"))), /*#__PURE__*/_react.default.createElement("div", {
-        className: styles.masteryBarGraph,
+      }, "No alcanzado"))), (0, _emotion.jsx)("div", {
+        css: this.props.styles.masteryBarGraph,
         "data-automation": "outcomeView__masteryBarGraph"
-      }, /*#__PURE__*/_react.default.createElement(_uiProgress.ProgressBar, {
+      }, (0, _emotion.jsx)(_uiProgress.ProgressBar, {
         size: "small",
         screenReaderLabel: outcomeResult.masteryCount + " de " + outcomeResult.count + " dominio alcanzado",
         meterColor: "success",
         valueMax: outcomeResult.count,
         valueNow: outcomeResult.masteryCount
-      }), /*#__PURE__*/_react.default.createElement("div", {
-        className: styles.masteryBarDetails,
+      }), (0, _emotion.jsx)("div", {
+        css: this.props.styles.masteryBarDetails,
         "data-automation": "outcomeView__masteryBarDetails"
-      }, /*#__PURE__*/_react.default.createElement("div", {
-        className: styles.masteryCountText
-      }, /*#__PURE__*/_react.default.createElement(_uiText.Text, {
+      }, (0, _emotion.jsx)("div", {
+        css: this.props.styles.masteryCountText
+      }, (0, _emotion.jsx)(_uiText.Text, {
         size: "small",
         "data-automation": "outcomeView__masteryCount"
-      }, outcomeResult.masteryCount + " dominio a los " + masteryPoints + " puntos")), /*#__PURE__*/_react.default.createElement(_uiText.Text, {
+      }, outcomeResult.masteryCount + " dominio a los " + masteryPoints + " puntos")), (0, _emotion.jsx)(_uiText.Text, {
         size: "small",
         "data-automation": "outcomeView__noMasteryCount"
       }, outcomeResult.count - outcomeResult.masteryCount + " no alcanzado"))));
@@ -102,6 +92,7 @@ var MasteryCounts = (_dec = (0, _uiThemeable.themeable)(_theme.default, styles),
   return MasteryCounts;
 }(_react.default.Component), _class2.propTypes = {
   outcomeResult: _shapes.outcomeResultShape.isRequired,
-  scoringMethod: _shapes.scoringMethodShape.isRequired
+  scoringMethod: _shapes.scoringMethodShape.isRequired,
+  styles: _shapes.stylesShape
 }, _temp)) || _class);
 exports.default = MasteryCounts;

package/lib/translated/es_ES/components/OutcomeView/MasteryCounts/styles.js

@@ -0,0 +1,54 @@
+"use strict";
+
+Object.defineProperty(exports, "__esModule", {
+  value: true
+});
+exports.default = void 0;
+
+var generateStyle = function generateStyle(componentTheme) {
+  return {
+    '@media screen and (min-width: 768px)': {
+      masteryBarGraph: {
+        marginTop: '2rem'
+      },
+      masteryScoreSection: {
+        display: 'none'
+      }
+    },
+    '@media screen and (max-width: 768px)': {
+      masteryBarGraph: {
+        display: 'none'
+      },
+      masteryScoreSection: {
+        display: 'flex',
+        flexDirection: 'row',
+        justifyContent: 'space-evenly',
+        marginTop: '2rem'
+      },
+      masteryScoreBoxAboveMastery: {
+        color: componentTheme.masteryColor,
+        display: 'flex',
+        flexDirection: 'column',
+        fontWeight: 'bold',
+        textAlign: 'center'
+      },
+      masteryScoreBoxBelowMastery: {
+        display: 'flex',
+        flexDirection: 'column',
+        fontWeight: 'bold',
+        textAlign: 'center'
+      }
+    },
+    masteryBarDetails: {
+      display: 'flex',
+      justifyContent: 'space-between',
+      paddingTop: '0.25rem'
+    },
+    masteryCountText: {
+      color: componentTheme.masteryColor
+    }
+  };
+};
+
+var _default = generateStyle;
+exports.default = _default;

package/lib/translated/es_ES/components/OutcomeView/MasteryDescription/__tests__/index.test.js

@@ -14,14 +14,12 @@ var _index = _interopRequireDefault(require("../index.js"));
 
 var _checkA11y = _interopRequireDefault(require("../../../../test/checkA11y.js"));
 
-var styles = {
-  componentId: 'IalyE',
-  template: function template(theme) {
-    return "\n\n.outcomes-ui__MasteryDescription--scoreMastery {\n  background-color: #F5F5F5;\n  border: solid 1px #999999;\n  border-radius: 0.25rem;\n  margin-top: 2rem;\n  padding: 1.0rem 1.0rem;\n}\n\n.outcomes-ui__MasteryDescription--scoreMasteryText {\n  margin-top: 1rem;\n}\n";
-  },
-  'scoreMastery': 'outcomes-ui__MasteryDescription--scoreMastery',
-  'scoreMasteryText': 'outcomes-ui__MasteryDescription--scoreMasteryText'
-};
+var _uiSpinner = require("@instructure/ui-spinner");
+
+var _styles = _interopRequireDefault(require("../styles.js"));
+
+var _findElementsWithStyle = require("../../../../util/__tests__/findElementsWithStyle.js");
+
 describe('MasteryDescription', function () {
   var scoringMethod = {
     id: 1,
@@ -48,14 +46,14 @@ describe('MasteryDescription', function () {
     var wrapper = (0, _enzyme.mount)( /*#__PURE__*/_react.default.createElement(_index.default, props), {
       attachTo: document.body
     });
-    (0, _chai.expect)(wrapper.find('Spinner')).to.have.length(1);
+    (0, _chai.expect)(wrapper.find(_uiSpinner.Spinner)).to.have.length(1);
   });
   it('does not render mastery percent text if displayMasteryPercentText is false', function () {
     var props = makeProps({
       displayMasteryPercentText: false
     });
     var wrapper = (0, _enzyme.mount)( /*#__PURE__*/_react.default.createElement(_index.default, props));
-    var scoreMastery = wrapper.find(".".concat(styles.scoreMasteryText));
+    var scoreMastery = wrapper.find(".".concat(_styles.default.scoreMasteryText));
     (0, _chai.expect)(scoreMastery.length).to.equal(0);
   });
   it('does not render mastery percent text if no artifactTypeName provided', function () {
@@ -63,12 +61,12 @@ describe('MasteryDescription', function () {
       artifactTypeName: null
     });
     var wrapper = (0, _enzyme.mount)( /*#__PURE__*/_react.default.createElement(_index.default, props));
-    var scoreMastery = wrapper.find(".".concat(styles.scoreMasteryText));
+    var scoreMastery = wrapper.find(".".concat(_styles.default.scoreMasteryText));
     (0, _chai.expect)(scoreMastery.length).to.equal(0);
   });
   it('renders mastery percent text', function () {
     var wrapper = (0, _enzyme.mount)( /*#__PURE__*/_react.default.createElement(_index.default, makeProps()));
-    var scoreMastery = wrapper.find(".".concat(styles.scoreMasteryText));
+    var scoreMastery = (0, _findElementsWithStyle.findElementsWithStyle)(wrapper, (0, _styles.default)().scoreMasteryText);
     (0, _chai.expect)(scoreMastery.length).to.equal(1);
   });
   it('renders mastery description for decaying_average', function () {
@@ -79,7 +77,7 @@ describe('MasteryDescription', function () {
       })
     });
     var wrapper = (0, _enzyme.mount)( /*#__PURE__*/_react.default.createElement(_index.default, props));
-    var txt = wrapper.find(".".concat(styles.scoreMastery)).find('Text');
+    var txt = (0, _findElementsWithStyle.findElementsWithStyle)(wrapper, (0, _styles.default)().scoreMastery);
     (0, _chai.expect)(txt.first().text()).to.match(/Decaying Average/);
   });
   it('renders mastery description for n_mastery', function () {
@@ -90,7 +88,7 @@ describe('MasteryDescription', function () {
       })
     });
     var wrapper = (0, _enzyme.mount)( /*#__PURE__*/_react.default.createElement(_index.default, props));
-    var txt = wrapper.find(".".concat(styles.scoreMastery)).find('Text');
+    var txt = (0, _findElementsWithStyle.findElementsWithStyle)(wrapper, (0, _styles.default)().scoreMastery).find('Text');
     (0, _chai.expect)(txt.first().text()).to.match(/n Number of Times/);
   });
   it('renders mastery description for highest', function () {
@@ -101,7 +99,7 @@ describe('MasteryDescription', function () {
       })
     });
     var wrapper = (0, _enzyme.mount)( /*#__PURE__*/_react.default.createElement(_index.default, props));
-    var txt = wrapper.find(".".concat(styles.scoreMastery)).find('Text');
+    var txt = (0, _findElementsWithStyle.findElementsWithStyle)(wrapper, (0, _styles.default)().scoreMastery).find('Text');
     (0, _chai.expect)(txt.first().text()).to.match(/Highest Score/);
   });
   it('renders mastery description for latest', function () {
@@ -112,7 +110,7 @@ describe('MasteryDescription', function () {
       })
     });
     var wrapper = (0, _enzyme.mount)( /*#__PURE__*/_react.default.createElement(_index.default, props));
-    var txt = wrapper.find(".".concat(styles.scoreMastery)).find('Text');
+    var txt = (0, _findElementsWithStyle.findElementsWithStyle)(wrapper, (0, _styles.default)().scoreMastery).find('Text');
     (0, _chai.expect)(txt.first().text()).to.match(/Most Recent Score/);
   });
   it('meets a11y standards', function () {

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

@@ -23,14 +23,16 @@ var _uiText = require("@instructure/ui-text");
 
 var _uiSpinner = require("@instructure/ui-spinner");
 
-var _uiThemeable = require("@instructure/ui-themeable");
-
 var _shapes = require("../../../store/shapes.js");
 
 var _constants = require("../../../constants.js");
 
+var _emotion = require("@instructure/emotion");
+
 var _theme = _interopRequireDefault(require("../../theme.js"));
 
+var _styles = _interopRequireDefault(require("./styles.js"));
+
 var _percent_es_ES_number = Intl.NumberFormat("es_ES", { style: "percent" }).format,
     _default_es_ES_number = Intl.NumberFormat("es_ES", { style: "decimal" }).format,
     _dec,
@@ -38,15 +40,6 @@ var _percent_es_ES_number = Intl.NumberFormat("es_ES", { style: "percent" }).for
     _class2,
     _temp;
 
-var styles = {
-  componentId: 'IalyE',
-  template: function template(theme) {
-    return "\n\n.outcomes-ui__MasteryDescription--scoreMastery {\n  background-color: #F5F5F5;\n  border: solid 1px #999999;\n  border-radius: 0.25rem;\n  margin-top: 2rem;\n  padding: 1.0rem 1.0rem;\n}\n\n.outcomes-ui__MasteryDescription--scoreMasteryText {\n  margin-top: 1rem;\n}\n";
-  },
-  'scoreMastery': 'outcomes-ui__MasteryDescription--scoreMastery',
-  'scoreMasteryText': 'outcomes-ui__MasteryDescription--scoreMasteryText'
-};
-
 var renderUserFacingMethod = function renderUserFacingMethod(scoringMethod, newDecayingAvgFFEnabled) {
   var legacyDecayingAverage = "Dominio calculado, seg\xFAn el promedio de decaimiento. El resultado m\xE1s reciente se considera como el " + _percent_es_ES_number(scoringMethod.algorithm_data.decaying_average_percent) + " de la ponderaci\xF3n del dominio; el promedio de todos los dem\xE1s resultados se considera como el " + _percent_es_ES_number(1.0 - scoringMethod.algorithm_data.decaying_average_percent) + " de la ponderaci\xF3n. Si solo hay un resultado, se mostrar\xE1 una \xFAnica puntuaci\xF3n.";
 
@@ -92,7 +85,7 @@ var masteryText = function masteryText(masteryPercent, artifactTypeName) {
   return "Al alinearla con este " + artifactTypeName + " si el alumno obtiene una puntuaci\xF3n superior a " + _percent_es_ES_number(masteryPercent) + ", alcanzar\xE1 el dominio.";
 };
 
-var MasteryDescription = (_dec = (0, _uiThemeable.themeable)(_theme.default, styles), _dec(_class = (_temp = _class2 = /*#__PURE__*/function (_React$Component) {
+var MasteryDescription = (_dec = (0, _emotion.withStyle)(_styles.default, _theme.default), _dec(_class = (_temp = _class2 = /*#__PURE__*/function (_React$Component) {
   (0, _inherits2.default)(MasteryDescription, _React$Component);
 
   var _super = (0, _createSuper2.default)(MasteryDescription);
@@ -114,19 +107,19 @@ var MasteryDescription = (_dec = (0, _uiThemeable.themeable)(_theme.default, sty
       var newDecayingAvgFFEnabled = features.includes(_constants.NEW_DECAYING_AVERAGE_FF);
 
       if (!scoringMethod) {
-        return /*#__PURE__*/_react.default.createElement(_uiSpinner.Spinner, {
+        return (0, _emotion.jsx)(_uiSpinner.Spinner, {
           renderTitle: "Cargando"
         });
       }
 
-      return /*#__PURE__*/_react.default.createElement("div", {
-        className: styles.scoreMastery,
+      return (0, _emotion.jsx)("div", {
+        css: this.props.styles.scoreMastery,
         "data-automation": "outcomeView__scoreMethodDescription"
-      }, /*#__PURE__*/_react.default.createElement("div", null, /*#__PURE__*/_react.default.createElement(_uiText.Text, {
+      }, (0, _emotion.jsx)("div", null, (0, _emotion.jsx)(_uiText.Text, {
         size: "small"
-      }, scoringText(scoringMethod, newDecayingAvgFFEnabled))), displayMasteryPercentText && artifactTypeName && /*#__PURE__*/_react.default.createElement("div", {
-        className: styles.scoreMasteryText
-      }, /*#__PURE__*/_react.default.createElement(_uiText.Text, {
+      }, scoringText(scoringMethod, newDecayingAvgFFEnabled))), displayMasteryPercentText && artifactTypeName && (0, _emotion.jsx)("div", {
+        css: this.props.styles.scoreMasteryText
+      }, (0, _emotion.jsx)(_uiText.Text, {
         size: "small"
       }, masteryText(scoringMethod.mastery_percent, artifactTypeName))));
     }
@@ -137,7 +130,8 @@ var MasteryDescription = (_dec = (0, _uiThemeable.themeable)(_theme.default, sty
   artifactTypeName: _propTypes.default.string,
   displayMasteryPercentText: _propTypes.default.bool.isRequired,
   scoringMethod: _shapes.scoringMethodShape,
-  features: _propTypes.default.array
+  features: _propTypes.default.array,
+  styles: _shapes.stylesShape
 }, _class2.defaultProps = {
   artifactTypeName: null,
   scoringMethod: null,