@instructure/outcomes-ui 2.1.9 → 3.0.0

package/es/translated/zh-Hans/components/OutcomeView/ScoringTiers/index.js

@@ -3,7 +3,7 @@ import _classCallCheck from "@babel/runtime/helpers/esm/classCallCheck";
 import _createClass from "@babel/runtime/helpers/esm/createClass";
 import _inherits from "@babel/runtime/helpers/esm/inherits";
 import _createSuper from "@babel/runtime/helpers/esm/createSuper";
-import _defineProperty from "@babel/runtime/helpers/esm/defineProperty";
+import _objectSpread from "@babel/runtime/helpers/esm/objectSpread2";
 
 var _default_zhHans_number = Intl.NumberFormat("zh-Hans", { style: "decimal" }).format,
     _dec,
@@ -11,31 +11,17 @@ var _default_zhHans_number = Intl.NumberFormat("zh-Hans", { style: "decimal" }).
     _class2,
     _temp;
 
+/** @jsx jsx */
 import React from 'react';
 import PropTypes from 'prop-types';
-import classNames from 'classnames';
 import { IconStarSolid, IconEmptyLine } from '@instructure/ui-icons';
 import { Text } from '@instructure/ui-text';
 import { Pill } from '@instructure/ui-pill';
-import { themeable } from '@instructure/ui-themeable';
-import { outcomeResultShape, scoringMethodShape, scoringTierShape } from "../../../store/shapes.js";
+import { withStyle, jsx } from '@instructure/emotion';
+import { outcomeResultShape, scoringMethodShape, scoringTierShape, stylesShape } from "../../../store/shapes.js";
 import convertToPoints from "../convertToPoints.js";
-import theme from "../../theme.js";
-var styles = {
-  componentId: 'bCFPW',
-  template: function template(theme) {
-    return "\n\n.outcomes-ui__ScoringTiers--score {\n  border: 1px solid #ccc;\n  color: #888;\n  border-radius: 100%;\n  width: 2.25rem;\n  height: 2.25rem;\n  display: flex;\n  align-items: center;\n  justify-content: center;\n  padding-left: 0.1rem;\n  margin-right: 1.0rem;\n}\n\n.outcomes-ui__ScoringTiers--description {\n  flex: 1;\n  display: flex;\n  flex-direction: row;\n  align-items: center;\n}\n\n.outcomes-ui__ScoringTiers--mastery {\n  margin-top: 0.25rem;\n}\n\n.outcomes-ui__ScoringTiers--rating {\n  display: flex;\n  margin-bottom: 0.5rem;\n}\n\n.outcomes-ui__ScoringTiers--scoringTier {\n  margin-bottom: 1.0rem;\n}\n\n.outcomes-ui__ScoringTiers--masteryCount {\n  font-weight: bold;\n  margin-left: 3.5rem;\n}\n\n.outcomes-ui__ScoringTiers--gap:not(:empty) {\n  display: flex;\n  flex-direction: column;\n  align-items: flex-start;\n  margin-bottom: 1rem;\n  margin-left: 3.5rem;\n}\n\n.outcomes-ui__ScoringTiers--pill {\n  display: flex;\n  align-items: center;\n  font-size: 1.2rem;\n}\n\n.outcomes-ui__ScoringTiers--pill.outcomes-ui__ScoringTiers--mastery {\n  color: ".concat(theme.masteryColor || 'inherit', ";\n}\n\n.outcomes-ui__ScoringTiers--pill.outcomes-ui__ScoringTiers--average {\n  color: ").concat(theme.averageColor || 'inherit', "\n}\n\n.outcomes-ui__ScoringTiers--pill:not(:last-child) {\n  margin-bottom: 0.75rem;\n}\n");
-  },
-  'score': 'outcomes-ui__ScoringTiers--score',
-  'description': 'outcomes-ui__ScoringTiers--description',
-  'mastery': 'outcomes-ui__ScoringTiers--mastery',
-  'rating': 'outcomes-ui__ScoringTiers--rating',
-  'scoringTier': 'outcomes-ui__ScoringTiers--scoringTier',
-  'masteryCount': 'outcomes-ui__ScoringTiers--masteryCount',
-  'gap': 'outcomes-ui__ScoringTiers--gap',
-  'pill': 'outcomes-ui__ScoringTiers--pill',
-  'average': 'outcomes-ui__ScoringTiers--average'
-};
+import generateComponentTheme from "../../theme.js";
+import generateStyle from "./styles.js";
 
 var valueBetweenTiers = function valueBetweenTiers(value, upperTier, lowerTier) {
   if (upperTier && value > upperTier.percent) {
@@ -49,87 +35,97 @@ var valueBetweenTiers = function valueBetweenTiers(value, upperTier, lowerTier)
   return true;
 };
 
-var renderTier = function renderTier(scoringMethod, tier) {
+var renderTier = function renderTier(scoringMethod, tier, styles) {
   var _s, _n;
 
-  return /*#__PURE__*/React.createElement("div", {
+  return jsx("div", {
     key: tier.id,
-    className: styles.scoringTier,
+    css: styles.scoringTier,
     "data-automation": "outcomeView__scoringTier"
-  }, /*#__PURE__*/React.createElement("div", {
-    className: styles.rating
-  }, /*#__PURE__*/React.createElement("div", {
-    className: styles.score,
+  }, jsx("div", {
+    css: styles.rating
+  }, jsx("div", {
+    css: styles.score,
+    className: "outcomeViewScore",
     "data-automation": "outcomeView__score"
-  }, /*#__PURE__*/React.createElement(Text, {
+  }, jsx(Text, {
     size: "medium"
-  }, convertToPoints(tier.percent, scoringMethod))), /*#__PURE__*/React.createElement("div", {
-    className: styles.description,
+  }, convertToPoints(tier.percent, scoringMethod))), jsx("div", {
+    css: styles.description,
     "data-automation": "outcomeView__description"
-  }, /*#__PURE__*/React.createElement(Text, {
+  }, jsx(Text, {
     size: "small"
-  }, tier.description))), tier.count != null && /*#__PURE__*/React.createElement("div", {
-    className: styles.masteryCount,
+  }, tier.description))), tier.count != null && jsx("div", {
+    css: styles.masteryCount,
     "data-automation": "outcomeView__masteryCount"
-  }, /*#__PURE__*/React.createElement(Text, {
+  }, jsx(Text, {
     size: "small"
   }, "\uFF08\u5171 " + _default_zhHans_number(tier.count) + " \u4E2A\u5B66\u751F\uFF09")));
 };
 
 var ScorePill = function ScorePill(_ref) {
-  var _classNames;
-
   var className = _ref.className,
       icon = _ref.icon,
       text = _ref.text,
-      variant = _ref.variant;
-  var outerStyle = classNames((_classNames = {}, _defineProperty(_classNames, styles.pill, true), _defineProperty(_classNames, className, true), _classNames));
-  return /*#__PURE__*/React.createElement("span", {
-    className: outerStyle,
-    "data-automation": "outcomeView__".concat(variant, "Pill")
-  }, icon, "\xA0", /*#__PURE__*/React.createElement(Pill, {
-    text: text,
-    variant: variant
-  }));
+      variant = _ref.variant,
+      styles = _ref.styles,
+      method = _ref.method;
+
+  var outerStyle = _objectSpread(_objectSpread({}, styles.pill), className);
+
+  return jsx("span", {
+    css: outerStyle,
+    "data-automation": "outcomeView__".concat(variant, "Pill"),
+    className: "outcomeView".concat(method)
+  }, icon, "\xA0", jsx(Pill, {
+    color: variant
+  }, text));
 }; // eslint-disable-next-line immutable/no-mutation
 
 
 ScorePill.propTypes = {
-  className: PropTypes.string.isRequired,
+  className: PropTypes.object.isRequired,
   icon: PropTypes.node.isRequired,
   text: PropTypes.string.isRequired,
-  variant: PropTypes.string.isRequired
+  variant: PropTypes.string.isRequired,
+  styles: PropTypes.object.isRequired,
+  method: PropTypes.string.isRequired
 };
 
-var renderGap = function renderGap(scoringMethod, outcomeResult, upperTier, lowerTier) {
+var renderGap = function renderGap(styles, scoringMethod, outcomeResult, upperTier, lowerTier) {
   var mastery = scoringMethod.mastery_percent;
   var average = outcomeResult ? outcomeResult.averageScore : null;
-  var components = [valueBetweenTiers(mastery, upperTier, lowerTier) && /*#__PURE__*/React.createElement(ScorePill, {
+  var components = [valueBetweenTiers(mastery, upperTier, lowerTier) && jsx(ScorePill, {
     key: "mastery",
-    text: "Mastery ".concat(convertToPoints(mastery, scoringMethod), " pts"),
+    text: "MASTERY ".concat(convertToPoints(mastery, scoringMethod), " PTS"),
     className: styles.mastery,
     variant: "success",
-    icon: /*#__PURE__*/React.createElement(IconStarSolid, {
+    icon: jsx(IconStarSolid, {
       "data-automation": "outcomeView__masteryStar"
-    })
+    }),
+    styles: styles,
+    method: "Mastery"
   })];
 
   if (average !== null) {
-    components.push(valueBetweenTiers(average, upperTier, lowerTier) && /*#__PURE__*/React.createElement(ScorePill, {
+    components.push(valueBetweenTiers(average, upperTier, lowerTier) && jsx(ScorePill, {
       key: "average",
-      text: "Avg. Score ".concat(convertToPoints(average, scoringMethod), " pts"),
+      text: "AVG. SCORE ".concat(convertToPoints(average, scoringMethod), " PTS"),
       className: styles.average,
-      variant: "primary",
-      icon: /*#__PURE__*/React.createElement(IconEmptyLine, null)
+      variant: "info",
+      icon: jsx(IconEmptyLine, null),
+      styles: styles,
+      method: "Average"
     }));
   }
 
-  return /*#__PURE__*/React.createElement("div", {
-    className: styles.gap
+  return jsx("div", {
+    css: styles.gap,
+    className: "outcomeViewGap"
   }, average !== null && average <= mastery ? components : components.reverse());
 };
 
-var ScoringTiers = (_dec = themeable(theme, styles), _dec(_class = (_temp = _class2 = /*#__PURE__*/function (_React$Component) {
+var ScoringTiers = (_dec = withStyle(generateStyle, generateComponentTheme), _dec(_class = (_temp = _class2 = /*#__PURE__*/function (_React$Component) {
   _inherits(ScoringTiers, _React$Component);
 
   var _super = _createSuper(ScoringTiers);
@@ -144,14 +140,16 @@ var ScoringTiers = (_dec = themeable(theme, styles), _dec(_class = (_temp = _cla
     key: "render",
     value: // eslint-disable-next-line no-undef
     function render() {
+      var _this = this;
+
       var _this$props = this.props,
           outcomeResult = _this$props.outcomeResult,
           scoringTiers = _this$props.scoringTiers,
           scoringMethod = _this$props.scoringMethod;
-      return /*#__PURE__*/React.createElement("div", {
+      return jsx("div", {
         "data-automation": "outcomeView__scoringTiers"
-      }, renderGap.apply(void 0, [scoringMethod, outcomeResult, null].concat(_toConsumableArray(scoringTiers.slice(0, 1)))), scoringTiers.map(function (tier, i) {
-        return [renderTier(scoringMethod, tier), renderGap.apply(void 0, [scoringMethod, outcomeResult].concat(_toConsumableArray(scoringTiers.slice(i, i + 2))))];
+      }, renderGap.apply(void 0, [this.props.styles, scoringMethod, outcomeResult, null].concat(_toConsumableArray(scoringTiers.slice(0, 1)))), scoringTiers.map(function (tier, i) {
+        return [renderTier(scoringMethod, tier, _this.props.styles), renderGap.apply(void 0, [_this.props.styles, scoringMethod, outcomeResult].concat(_toConsumableArray(scoringTiers.slice(i, i + 2))))];
       }));
     }
   }]);
@@ -161,7 +159,8 @@ var ScoringTiers = (_dec = themeable(theme, styles), _dec(_class = (_temp = _cla
 }(React.Component), _class2.propTypes = {
   scoringTiers: PropTypes.arrayOf(scoringTierShape).isRequired,
   scoringMethod: scoringMethodShape.isRequired,
-  outcomeResult: outcomeResultShape
+  outcomeResult: outcomeResultShape,
+  styles: stylesShape
 }, _class2.defaultProps = {
   outcomeResult: null
 }, _temp)) || _class);

package/es/translated/zh-Hans/components/OutcomeView/ScoringTiers/styles.js

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

package/es/translated/zh-Hans/components/OutcomeView/__tests__/index.test.js

@@ -29,7 +29,7 @@ var sharedSpecs = function sharedSpecs(makeProps) {
         masteryCount: 50
       }
     });
-    var wrapper = shallow( /*#__PURE__*/React.createElement(OutcomeView, props), {
+    var wrapper = mount( /*#__PURE__*/React.createElement(OutcomeView, props), {
       disableLifecycleMethods: true
     });
     expect(wrapper.find(MasteryCounts)).to.have.length(1);
@@ -117,7 +117,7 @@ describe('OutcomeView', function () {
     var props = makeProps({
       displayMasteryDescription: true
     });
-    var wrapper = shallow( /*#__PURE__*/React.createElement(OutcomeView, props), {
+    var wrapper = mount( /*#__PURE__*/React.createElement(OutcomeView, props), {
       disableLifecycleMethods: true
     });
     var scoreMastery = wrapper.find(MasteryDescription);
@@ -134,7 +134,7 @@ describe('OutcomeView', function () {
     expect(scoreMastery.length).to.equal(0);
   });
   it('displays scoring tiers if scoring method and tiers defined', function () {
-    var wrapper = shallow( /*#__PURE__*/React.createElement(OutcomeView, makeProps()), {
+    var wrapper = mount( /*#__PURE__*/React.createElement(OutcomeView, makeProps()), {
       disableLifecycleMethods: true
     });
     expect(wrapper.find(ScoringTiers)).to.have.length(1);
@@ -191,7 +191,7 @@ describe('OutcomeView', function () {
             masteryCount: 50
           }
         });
-        var wrapper = shallow( /*#__PURE__*/React.createElement(OutcomeView, props), {
+        var wrapper = mount( /*#__PURE__*/React.createElement(OutcomeView, props), {
           disableLifecycleMethods: true
         });
         expect(wrapper.find(ScoringTiers)).to.have.length(1);
@@ -204,7 +204,7 @@ describe('OutcomeView', function () {
           },
           scoringTiers: defaultProps.scoringTiers
         });
-        var wrapper = shallow( /*#__PURE__*/React.createElement(OutcomeView, props), {
+        var wrapper = mount( /*#__PURE__*/React.createElement(OutcomeView, props), {
           disableLifecycleMethods: true
         });
         expect(wrapper.find(ScoringTiers).prop('scoringTiers')).to.deep.equal(defaultProps.scoringTiers);
@@ -217,7 +217,7 @@ describe('OutcomeView', function () {
             masteryCount: 50
           }
         });
-        var wrapper = shallow( /*#__PURE__*/React.createElement(OutcomeView, props), {
+        var wrapper = mount( /*#__PURE__*/React.createElement(OutcomeView, props), {
           disableLifecycleMethods: true
         });
         var scoreMastery = wrapper.find(MasteryDescription);

package/es/translated/zh-Hans/components/OutcomeView/index.js

@@ -5,27 +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 { Text } from '@instructure/ui-text';
-import { themeable } from '@instructure/ui-themeable';
 import { View } from '@instructure/ui-view';
-import { outcomeResultShape, scoringMethodShape, scoringTierShape, contextShape } from "../../store/shapes.js";
+import { outcomeResultShape, scoringMethodShape, scoringTierShape, contextShape, stylesShape } from "../../store/shapes.js";
 import ScoringTiers from "./ScoringTiers/index.js";
 import MasteryCounts from "./MasteryCounts/index.js";
 import MasteryDescription from "./MasteryDescription/index.js";
 import { sanitizeHtml } from "../../lib/sanitize.js";
-import theme from "../theme.js";
-var styles = {
-  componentId: 'eBKdC',
-  template: function template(theme) {
-    return "\n\n.outcomes-ui__OutcomeView--title {\n  margin: 2rem 0;\n  word-wrap: break-word; \n  overflow-wrap: break-word;\n}\n\n.outcomes-ui__OutcomeView--description {\n  margin: 2rem 0;\n}\n";
-  },
-  'title': 'outcomes-ui__OutcomeView--title',
-  'description': 'outcomes-ui__OutcomeView--description'
-};
+import { withStyle, jsx } from '@instructure/emotion';
+import generateComponentTheme from "../theme.js";
+import generateStyle from "./styles.js";
 import { contextConfiguredWithProficiencies, getScoringMethodFromContext, getScoringTiersFromContext } from "../../util/proficienciesUtils.js";
-var OutcomeView = (_dec = themeable(theme, styles), _dec(_class = (_temp = _class2 = /*#__PURE__*/function (_React$Component) {
+var OutcomeView = (_dec = withStyle(generateStyle, generateComponentTheme), _dec(_class = (_temp = _class2 = /*#__PURE__*/function (_React$Component) {
   _inherits(OutcomeView, _React$Component);
 
   var _super = _createSuper(OutcomeView);
@@ -83,45 +77,45 @@ var OutcomeView = (_dec = themeable(theme, styles), _dec(_class = (_temp = _clas
       var scoringTiers = this.getScoringTiers();
       var displayMasteryInformation = this.getDisplayMasteryInformation();
       var displayMasteryCounts = scoringMethod && outcomeResult && displayMasteryInformation;
-      return /*#__PURE__*/React.createElement("div", null, /*#__PURE__*/React.createElement("div", {
-        className: styles.title,
+      return jsx("div", null, jsx("div", {
+        css: this.props.styles.title,
         "data-automation": "outcomeView__title"
-      }, /*#__PURE__*/React.createElement(Text, {
+      }, jsx(Text, {
         size: "x-large",
         transform: "uppercase"
-      }, title)), displayMasteryCounts && /*#__PURE__*/React.createElement(MasteryCounts, {
+      }, title)), displayMasteryCounts && jsx(MasteryCounts, {
         outcomeResult: outcomeResult,
         scoringMethod: scoringMethod
-      }), friendlyDescription && /*#__PURE__*/React.createElement(React.Fragment, null, /*#__PURE__*/React.createElement(View, {
+      }), friendlyDescription && jsx(React.Fragment, null, jsx(View, {
         as: "div",
         margin: "".concat(displayMasteryCounts ? 'medium' : 'x-small', " small 0 0"),
         padding: "small small x-small small",
         background: "secondary",
         "data-automation": "outcomeView__friendly_description_header"
-      }, /*#__PURE__*/React.createElement(Text, {
+      }, jsx(Text, {
         weight: "bold"
-      }, "\u53CB\u597D\u63CF\u8FF0")), /*#__PURE__*/React.createElement(View, {
+      }, "\u53CB\u597D\u63CF\u8FF0")), jsx(View, {
         as: "div",
         margin: "0 small 0 0",
         padding: "0 small small small",
         background: "secondary",
         "data-automation": "outcomeView__friendly_description_expanded"
-      }, /*#__PURE__*/React.createElement(Text, null, friendlyDescription))), /*#__PURE__*/React.createElement("div", {
-        className: styles.description,
+      }, jsx(Text, null, friendlyDescription))), jsx("div", {
+        css: this.props.styles.description,
         "data-automation": "outcomeView__description"
-      }, /*#__PURE__*/React.createElement(Text, {
+      }, jsx(Text, {
         size: "medium",
         wrap: "break-word"
-      }, /*#__PURE__*/React.createElement("div", {
+      }, jsx("div", {
         dangerouslySetInnerHTML: {
           // eslint-disable-line react/no-danger
           __html: sanitizeHtml(description)
         }
-      }))), scoringTiers && scoringMethod && displayMasteryInformation && /*#__PURE__*/React.createElement(ScoringTiers, {
+      }))), scoringTiers && scoringMethod && displayMasteryInformation && jsx(ScoringTiers, {
         outcomeResult: outcomeResult,
         scoringTiers: scoringTiers,
         scoringMethod: scoringMethod
-      }), displayMasteryDescription && displayMasteryInformation && /*#__PURE__*/React.createElement(MasteryDescription, {
+      }), displayMasteryDescription && displayMasteryInformation && jsx(MasteryDescription, {
         artifactTypeName: artifactTypeName,
         displayMasteryPercentText: displayMasteryPercentText,
         scoringMethod: scoringMethod,
@@ -143,7 +137,8 @@ var OutcomeView = (_dec = themeable(theme, styles), _dec(_class = (_temp = _clas
   artifactTypeName: PropTypes.string,
   displayMasteryDescription: PropTypes.bool,
   displayMasteryPercentText: PropTypes.bool,
-  features: PropTypes.array
+  features: PropTypes.array,
+  styles: stylesShape
 }, _class2.defaultProps = {
   context: null,
   outcomeResult: null,

package/es/translated/zh-Hans/components/OutcomeView/styles.js

@@ -0,0 +1,14 @@
+var generateStyle = function generateStyle() {
+  return {
+    title: {
+      margin: '2rem 0',
+      wordWrap: 'break-word',
+      overflowWrap: 'break-word'
+    },
+    description: {
+      margin: '2rem 0'
+    }
+  };
+};
+
+export default generateStyle;

package/es/translated/zh-Hans/components/OutcomeViewModal/__tests__/index.test.js

@@ -6,6 +6,7 @@ import OutcomeViewModal from "../index.js";
 import { Provider } from 'react-redux';
 import createMockStore from "../../../test/createMockStore.js";
 import { fromJS } from 'immutable';
+import OutcomeView from "../../OutcomeView/index.js";
 describe('OutcomeViewModal', function () {
   function makeProps() {
     var props = arguments.length > 0 && arguments[0] !== void 0 ? arguments[0] : {};
@@ -79,6 +80,6 @@ describe('OutcomeViewModal', function () {
     var wrapper = mount( /*#__PURE__*/React.createElement(Provider, {
       store: store
     }, /*#__PURE__*/React.createElement(OutcomeViewModal, props)));
-    expect(wrapper.find('OutcomeView')).to.have.length(1);
+    expect(wrapper.find(OutcomeView)).to.have.length(1);
   });
 });

package/es/translated/zh-Hans/components/OutcomeViewModal/index.js

@@ -44,9 +44,9 @@ var OutcomeViewModal = function OutcomeViewModal(props) {
       return props.closeAlignment();
     },
     placement: "end",
-    variant: "icon",
-    "data-automation": "outcomeView__closeButton"
-  }, "\u5173\u95ED"), /*#__PURE__*/React.createElement(Heading, null, /*#__PURE__*/React.createElement(Text, {
+    "data-automation": "outcomeView__closeButton",
+    screenReaderLabel: "\u5173\u95ED"
+  }), /*#__PURE__*/React.createElement(Heading, null, /*#__PURE__*/React.createElement(Text, {
     size: "large",
     "data-automation": "outcomeView__header"
   }, header || "\u67E5\u770B\u7ED3\u679C"))), /*#__PURE__*/React.createElement(ModalBody, {
@@ -76,7 +76,7 @@ var OutcomeViewModal = function OutcomeViewModal(props) {
     onClick: function onClick() {
       return props.closeAlignment();
     },
-    variant: "primary",
+    color: "primary",
     "data-automation": "outcomeView__submitButton"
   }, "\u786E\u5B9A")));
 };

package/es/translated/zh-Hans/components/OutcomesPerStudent/ExportCSVButton/__tests__/index.test.js

@@ -29,38 +29,44 @@ describe('OutcomesPerStudent/ExportCSVButton', function () {
     expect(wrapper.text()).to.match(/Export CSV/);
   });
   it('export CSV button is enabled by default', function () {
-    var wrapper = mount( /*#__PURE__*/React.createElement(ExportCSVButton, makeProps({})));
-    expect(wrapper.find('Flex Button').prop('interaction')).to.equal('enabled');
+    var wrapper = mount( /*#__PURE__*/React.createElement(ExportCSVButton, makeProps({}))); // Enzyme finds two Button components because of the instui decorator on the component
+
+    expect(wrapper.find('Flex Button').at(0).prop('interaction')).to.equal('enabled');
   });
   it('export CSV button color is primary', function () {
-    var wrapper = mount( /*#__PURE__*/React.createElement(ExportCSVButton, makeProps({})));
-    expect(wrapper.find('Flex Button').prop('color')).to.equal('primary');
+    var wrapper = mount( /*#__PURE__*/React.createElement(ExportCSVButton, makeProps({}))); // Enzyme finds two Button components because of the instui decorator on the component
+
+    expect(wrapper.find('Flex Button').at(0).prop('color')).to.equal('primary');
   });
   it('export CSV button has onClick', function () {
-    var wrapper = mount( /*#__PURE__*/React.createElement(ExportCSVButton, makeProps({})));
-    expect(wrapper.find('Flex Button').prop('onClick')).to.be.not.undefined;
+    var wrapper = mount( /*#__PURE__*/React.createElement(ExportCSVButton, makeProps({}))); // Enzyme finds two Button components because of the instui decorator on the component
+
+    expect(wrapper.find('Flex Button').at(0).prop('onClick')).to.be.not.undefined;
   });
   it('click export CSV calls fetchCSVData', function () {
     var props = makeProps({});
-    var wrapper = mount( /*#__PURE__*/React.createElement(ExportCSVButton, props));
-    var button = wrapper.find('Flex Button');
+    var wrapper = mount( /*#__PURE__*/React.createElement(ExportCSVButton, props)); // Enzyme finds two Button components because of the instui decorator on the component
+
+    var button = wrapper.find('Flex Button').at(0);
     button.simulate('click');
     expect(props.fetchCSVData).to.have.been.called;
   });
   it('starting export changes the export CSV button to cancel export', function () {
     var props = makeProps({});
-    var wrapper = mount( /*#__PURE__*/React.createElement(ExportCSVButton, props));
-    var button = wrapper.find('Flex Button');
+    var wrapper = mount( /*#__PURE__*/React.createElement(ExportCSVButton, props)); // Enzyme finds two Button components because of the instui decorator on the component
+
+    var button = wrapper.find('Flex Button').at(0);
     button.simulate('click');
     expect(wrapper.text()).not.to.match(/Export CSV/);
     expect(wrapper.text()).to.match(/Cancel Export/);
-    expect(wrapper.find('Flex Button').prop('interaction')).to.equal('enabled');
-    expect(wrapper.find('Flex Button').prop('color')).to.equal('secondary');
+    expect(wrapper.find('Flex Button').at(0).prop('interaction')).to.equal('enabled');
+    expect(wrapper.find('Flex Button').at(0).prop('color')).to.equal('secondary');
   });
   it('starting export displays the ProgressBar', function () {
     var props = makeProps({});
-    var wrapper = mount( /*#__PURE__*/React.createElement(ExportCSVButton, props));
-    var button = wrapper.find('Flex Button');
+    var wrapper = mount( /*#__PURE__*/React.createElement(ExportCSVButton, props)); // Enzyme finds two Button components because of the instui decorator on the component
+
+    var button = wrapper.find('Flex Button').at(0);
     button.simulate('click');
     expect(wrapper.text()).to.match(/Exporting/);
     expect(wrapper.find('ProgressBar')).to.exist;

package/es/translated/zh-Hans/components/OutcomesPerStudent/ExportCSVButton/index.js

@@ -131,7 +131,7 @@ var ExportCSVButton = function ExportCSVButton(_ref) {
     onClick: canStartExport ? beginExport : cancelExport,
     interaction: canStartExport ? 'enabled' : progressValue < 100 ? 'enabled' : 'disabled',
     "data-automation": "outcomesPerStudent_exportCSVButton",
-    buttonRef: function buttonRef(ref) {
+    elementRef: function elementRef(ref) {
       return setCsvButtonRef(ref);
     }
   }, canStartExport ? "Export CSV" : "Cancel Export"), /*#__PURE__*/React.createElement("span", {

package/es/translated/zh-Hans/components/OutcomesPerStudent/Header/__tests__/index.test.js

@@ -1,16 +1,16 @@
 import { expect } from 'chai';
 import React from 'react';
 import sinon from 'sinon';
-import { shallow, mount } from 'enzyme';
+import { mount } from 'enzyme';
 import Header from "../index.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'
-};
+import styles from "../styles.js";
 import checkA11y from "../../../../test/checkA11y.js";
+import HeaderDetails from "../../HeaderDetails/index.js";
+import { Tooltip } from '@instructure/ui-tooltip';
+import { TruncateText } from '@instructure/ui-truncate-text';
+import { AccessibleContent } from '@instructure/ui-a11y-content';
+import { findElementsWithStyle } from "../../../../util/__tests__/findElementsWithStyle.js";
+import { Link } from '@instructure/ui-link';
 describe('OutcomesPerStudent/Header', function () {
   function makeProps(props) {
     return Object.assign({
@@ -35,10 +35,10 @@ describe('OutcomesPerStudent/Header', function () {
   }
 
   it('includes a details object', function () {
-    var wrapper = shallow( /*#__PURE__*/React.createElement(Header, makeProps()), {
+    var wrapper = mount( /*#__PURE__*/React.createElement(Header, makeProps()), {
       disableLifecycleMethods: true
     });
-    expect(wrapper.find('HeaderDetails')).to.have.length(1);
+    expect(wrapper.find(HeaderDetails)).to.have.length(1);
   });
   it('renders outcome link with title', function () {
     var props = makeProps();
@@ -47,34 +47,25 @@ describe('OutcomesPerStudent/Header', function () {
   });
   it('calls viewReportAlignment when the link is clicked', function () {
     var props = makeProps();
-    var wrapper = shallow( /*#__PURE__*/React.createElement(Header, props), {
+    var wrapper = mount( /*#__PURE__*/React.createElement(Header, props), {
       disableLifecycleMethods: true
     });
-    var link = wrapper.find(".".concat(styles.header)).find('Link');
+    var link = findElementsWithStyle(wrapper, styles().header).find(Link);
     link.simulate('click');
     expect(props.viewReportAlignment.calledOnce).to.be.true;
   });
-  it('conditionally renders tooltip based on state.showTooltip', function () {
-    var wrapper = shallow( /*#__PURE__*/React.createElement(Header, makeProps()), {
-      disableLifecycleMethods: true
-    });
-    expect(wrapper.find('Tooltip')).to.have.length(0);
-    wrapper.setState({
-      showTooltip: true
-    });
-    expect(wrapper.find('Tooltip')).to.have.length(1);
-  });
-  it('includes a TruncateText element that can update state', function () {
+  it('conditionally renders tooltip when TruncateText is updated', function () {
     var wrapper = mount( /*#__PURE__*/React.createElement(Header, makeProps()));
-    expect(wrapper.find('TruncateText')).to.have.length(1);
-    wrapper.find('TruncateText').props().onUpdate(true);
-    expect(wrapper.state().showTooltip).to.equal(true);
+    expect(wrapper.find(Tooltip)).to.have.length(0);
+    wrapper.find(TruncateText).props().onUpdate(true);
+    wrapper.update();
+    expect(wrapper.find(Tooltip)).to.have.length(1);
   });
   it('includes a AccessibleContent element', function () {
-    var wrapper = shallow( /*#__PURE__*/React.createElement(Header, makeProps()), {
+    var wrapper = mount( /*#__PURE__*/React.createElement(Header, makeProps()), {
       disableLifecycleMethods: true
     });
-    expect(wrapper.find('AccessibleContent')).to.have.length(1);
+    expect(wrapper.find(AccessibleContent)).to.have.length(1);
   });
   it('meets a11y standards', function () {
     return checkA11y( /*#__PURE__*/React.createElement(Header, makeProps()));