@instructure/outcomes-ui 2.1.8 → 3.0.0

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

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

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

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

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

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

package/lib/translated/ar/components/OutcomeViewModal/index.js

@@ -62,9 +62,9 @@ var OutcomeViewModal = function OutcomeViewModal(props) {
       return props.closeAlignment();
     },
     placement: "end",
-    variant: "icon",
-    "data-automation": "outcomeView__closeButton"
-  }, "\u0625\u063A\u0644\u0627\u0642"), /*#__PURE__*/_react.default.createElement(_uiHeading.Heading, null, /*#__PURE__*/_react.default.createElement(_uiText.Text, {
+    "data-automation": "outcomeView__closeButton",
+    screenReaderLabel: "\u0625\u063A\u0644\u0627\u0642"
+  }), /*#__PURE__*/_react.default.createElement(_uiHeading.Heading, null, /*#__PURE__*/_react.default.createElement(_uiText.Text, {
     size: "large",
     "data-automation": "outcomeView__header"
   }, header || "\u0639\u0631\u0636 \u0627\u0644\u0646\u062A\u064A\u062C\u0629"))), /*#__PURE__*/_react.default.createElement(ModalBody, {
@@ -94,7 +94,7 @@ var OutcomeViewModal = function OutcomeViewModal(props) {
     onClick: function onClick() {
       return props.closeAlignment();
     },
-    variant: "primary",
+    color: "primary",
     "data-automation": "outcomeView__submitButton"
   }, "\u0645\u0648\u0627\u0641\u0642")));
 };

package/lib/translated/ar/components/OutcomesPerStudent/ExportCSVButton/__tests__/index.test.js

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

package/lib/translated/ar/components/OutcomesPerStudent/ExportCSVButton/index.js

@@ -156,7 +156,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.default.createElement("span", {

package/lib/translated/ar/components/OutcomesPerStudent/Header/__tests__/index.test.js

@@ -12,15 +12,22 @@ var _enzyme = require("enzyme");
 
 var _index = _interopRequireDefault(require("../index.js"));
 
+var _styles = _interopRequireDefault(require("../styles.js"));
+
 var _checkA11y = _interopRequireDefault(require("../../../../test/checkA11y.js"));
 
-var styles = {
-  componentId: 'fbTpU',
-  template: function template(theme) {
-    return "\n\n.outcomes-ui__Header--header {\n  box-sizing: border-box;\n  display: flex;\n  flex-direction: column;\n  font-weight: normal;\n  line-height: 1.3rem;\n  text-align: left;\n}\n\n[dir=\"ltr\"] .outcomes-ui__Header--header {\n  text-align: left;\n}\n\n[dir=\"rtl\"] .outcomes-ui__Header--header {\n  text-align: left;\n}\n";
-  },
-  'header': 'outcomes-ui__Header--header'
-};
+var _index2 = _interopRequireDefault(require("../../HeaderDetails/index.js"));
+
+var _uiTooltip = require("@instructure/ui-tooltip");
+
+var _uiTruncateText = require("@instructure/ui-truncate-text");
+
+var _uiA11yContent = require("@instructure/ui-a11y-content");
+
+var _findElementsWithStyle = require("../../../../util/__tests__/findElementsWithStyle.js");
+
+var _uiLink = require("@instructure/ui-link");
+
 describe('OutcomesPerStudent/Header', function () {
   function makeProps(props) {
     return Object.assign({
@@ -45,10 +52,10 @@ describe('OutcomesPerStudent/Header', function () {
   }
 
   it('includes a details object', 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('HeaderDetails')).to.have.length(1);
+    (0, _chai.expect)(wrapper.find(_index2.default)).to.have.length(1);
   });
   it('renders outcome link with title', function () {
     var props = makeProps();
@@ -57,34 +64,25 @@ describe('OutcomesPerStudent/Header', function () {
   });
   it('calls viewReportAlignment when the link is clicked', 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 link = wrapper.find(".".concat(styles.header)).find('Link');
+    var link = (0, _findElementsWithStyle.findElementsWithStyle)(wrapper, (0, _styles.default)().header).find(_uiLink.Link);
     link.simulate('click');
     (0, _chai.expect)(props.viewReportAlignment.calledOnce).to.be.true;
   });
-  it('conditionally renders tooltip based on state.showTooltip', function () {
-    var wrapper = (0, _enzyme.shallow)( /*#__PURE__*/_react.default.createElement(_index.default, makeProps()), {
-      disableLifecycleMethods: true
-    });
-    (0, _chai.expect)(wrapper.find('Tooltip')).to.have.length(0);
-    wrapper.setState({
-      showTooltip: true
-    });
-    (0, _chai.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 = (0, _enzyme.mount)( /*#__PURE__*/_react.default.createElement(_index.default, makeProps()));
-    (0, _chai.expect)(wrapper.find('TruncateText')).to.have.length(1);
-    wrapper.find('TruncateText').props().onUpdate(true);
-    (0, _chai.expect)(wrapper.state().showTooltip).to.equal(true);
+    (0, _chai.expect)(wrapper.find(_uiTooltip.Tooltip)).to.have.length(0);
+    wrapper.find(_uiTruncateText.TruncateText).props().onUpdate(true);
+    wrapper.update();
+    (0, _chai.expect)(wrapper.find(_uiTooltip.Tooltip)).to.have.length(1);
   });
   it('includes a AccessibleContent element', 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('AccessibleContent')).to.have.length(1);
+    (0, _chai.expect)(wrapper.find(_uiA11yContent.AccessibleContent)).to.have.length(1);
   });
   it('meets a11y standards', function () {
     return (0, _checkA11y.default)( /*#__PURE__*/_react.default.createElement(_index.default, makeProps()));

package/lib/translated/ar/components/OutcomesPerStudent/Header/index.js

@@ -27,26 +27,23 @@ var _uiLink = require("@instructure/ui-link");
 
 var _uiTooltip = require("@instructure/ui-tooltip");
 
-var _uiThemeable = require("@instructure/ui-themeable");
-
 var _uiTruncateText = require("@instructure/ui-truncate-text");
 
+var _emotion = require("@instructure/emotion");
+
 var _index = _interopRequireDefault(require("../../OutcomeViewModal/index.js"));
 
 var _index2 = _interopRequireDefault(require("../HeaderDetails/index.js"));
 
 var _theme = _interopRequireDefault(require("../../theme.js"));
 
+var _styles = _interopRequireDefault(require("./styles.js"));
+
+var _shapes = require("../../../store/shapes.js");
+
 var _dec, _class, _class2, _temp;
 
-var styles = {
-  componentId: 'fbTpU',
-  template: function template(theme) {
-    return "\n\n.outcomes-ui__Header--header {\n  box-sizing: border-box;\n  display: flex;\n  flex-direction: column;\n  font-weight: normal;\n  line-height: 1.3rem;\n  text-align: left;\n}\n\n[dir=\"ltr\"] .outcomes-ui__Header--header {\n  text-align: left;\n}\n\n[dir=\"rtl\"] .outcomes-ui__Header--header {\n  text-align: left;\n}\n";
-  },
-  'header': 'outcomes-ui__Header--header'
-};
-var Header = (_dec = (0, _uiThemeable.themeable)(_theme.default, styles), _dec(_class = (_temp = _class2 = /*#__PURE__*/function (_React$Component) {
+var Header = (_dec = (0, _emotion.withStyle)(_styles.default, _theme.default), _dec(_class = (_temp = _class2 = /*#__PURE__*/function (_React$Component) {
   (0, _inherits2.default)(Header, _React$Component);
 
   var _super = (0, _createSuper2.default)(Header);
@@ -59,22 +56,26 @@ var Header = (_dec = (0, _uiThemeable.themeable)(_theme.default, styles), _dec(_
     (0, _classCallCheck2.default)(this, Header);
     _this = _super.call(this, props);
 
+    _this.handleUpdate = function (isTruncated) {
+      if (isTruncated !== _this.state.showTooltip) {
+        _this.setState({
+          showTooltip: isTruncated
+        });
+      }
+    };
+
     _this.renderTitle = function (outcome) {
       var viewReportAlignment = _this.props.viewReportAlignment;
-      return /*#__PURE__*/_react.default.createElement(_uiLink.Link, {
+      return (0, _emotion.jsx)(_uiLink.Link, {
         onClick: viewReportAlignment
-      }, /*#__PURE__*/_react.default.createElement(_uiText.Text, {
+      }, (0, _emotion.jsx)(_uiText.Text, {
         size: "medium",
         transform: "uppercase"
-      }, /*#__PURE__*/_react.default.createElement(_uiTruncateText.TruncateText, {
+      }, (0, _emotion.jsx)(_uiTruncateText.TruncateText, {
         maxLines: 1,
         position: 'middle',
-        onUpdate: function onUpdate(isTruncated) {
-          return _this.setState({
-            showTooltip: isTruncated
-          });
-        }
-      }, /*#__PURE__*/_react.default.createElement(_uiA11yContent.AccessibleContent, {
+        onUpdate: _this.handleUpdate
+      }, (0, _emotion.jsx)(_uiA11yContent.AccessibleContent, {
         alt: outcome.title
       }, outcome.title))));
     };
@@ -97,16 +98,16 @@ var Header = (_dec = (0, _uiThemeable.themeable)(_theme.default, styles), _dec(_
           scope = _this$props.scope;
       var showTooltip = this.state.showTooltip;
       var outcome = getReportOutcome(outcomeResult.outcomeId);
-      return /*#__PURE__*/_react.default.createElement("div", {
-        className: styles.header
-      }, showTooltip ? /*#__PURE__*/_react.default.createElement(_uiTooltip.Tooltip, {
-        tip: outcome.title,
+      return (0, _emotion.jsx)("div", {
+        css: this.props.styles.header
+      }, showTooltip ? (0, _emotion.jsx)(_uiTooltip.Tooltip, {
+        renderTip: outcome.title,
         placement: "bottom",
-        variant: "inverse"
-      }, this.renderTitle(outcome)) : this.renderTitle(outcome), /*#__PURE__*/_react.default.createElement(_uiA11yContent.PresentationContent, null, /*#__PURE__*/_react.default.createElement(_index2.default, {
+        color: "primary"
+      }, this.renderTitle(outcome)) : this.renderTitle(outcome), (0, _emotion.jsx)(_uiA11yContent.PresentationContent, null, (0, _emotion.jsx)(_index2.default, {
         outcomeResult: outcomeResult,
         showRollups: showRollups
-      })), /*#__PURE__*/_react.default.createElement(_index.default, {
+      })), (0, _emotion.jsx)(_index.default, {
         header: "\u062A\u0641\u0627\u0635\u064A\u0644 \u0627\u0644\u0646\u062A\u064A\u062C\u0629",
         outcome: outcome,
         outcomeResult: outcomeResult,
@@ -126,7 +127,8 @@ var Header = (_dec = (0, _uiThemeable.themeable)(_theme.default, styles), _dec(_
   isOpen: _propTypes.default.bool.isRequired,
   closeReportAlignment: _propTypes.default.func.isRequired,
   scope: _propTypes.default.string.isRequired,
-  showRollups: _propTypes.default.bool
+  showRollups: _propTypes.default.bool,
+  styles: _shapes.stylesShape
 }, _class2.defaultProps = {
   showRollups: true
 }, _temp)) || _class);

package/lib/translated/ar/components/OutcomesPerStudent/Header/styles.js

@@ -0,0 +1,22 @@
+"use strict";
+
+Object.defineProperty(exports, "__esModule", {
+  value: true
+});
+exports.default = void 0;
+
+var generateStyle = function generateStyle() {
+  return {
+    header: {
+      boxSizing: 'border-box',
+      display: 'flex',
+      flexDirection: 'column',
+      fontWeight: 'normal',
+      lineHeight: '1.3rem',
+      textAlign: 'left'
+    }
+  };
+};
+
+var _default = generateStyle;
+exports.default = _default;

package/lib/translated/ar/components/OutcomesPerStudent/HeaderDetails/__tests__/index.test.js

@@ -12,16 +12,18 @@ var _enzyme = require("enzyme");
 
 var _index = _interopRequireDefault(require("../index.js"));
 
+var _styles = _interopRequireDefault(require("../styles.js"));
+
 var _checkA11y = _interopRequireDefault(require("../../../../test/checkA11y.js"));
 
-var styles = {
-  componentId: 'ffgIr',
-  template: function template(theme) {
-    return "\n\n.outcomes-ui__HeaderDetails--numQuestions {\n  box-sizing: border-box;\n  height: 1.5rem;\n  text-align: left;\n}\n\n[dir=\"ltr\"] .outcomes-ui__HeaderDetails--numQuestions {\n  text-align: left;\n}\n\n[dir=\"rtl\"] .outcomes-ui__HeaderDetails--numQuestions {\n  text-align: left;\n}\n\n.outcomes-ui__HeaderDetails--masteryBarDetails {\n  display: flex;\n  justify-content: space-between;\n}\n";
-  },
-  'numQuestions': 'outcomes-ui__HeaderDetails--numQuestions',
-  'masteryBarDetails': 'outcomes-ui__HeaderDetails--masteryBarDetails'
-};
+var _uiProgress = require("@instructure/ui-progress");
+
+var _uiTooltip = require("@instructure/ui-tooltip");
+
+var _findElementsWithStyle = require("../../../../util/__tests__/findElementsWithStyle.js");
+
+var _uiText = require("@instructure/ui-text");
+
 describe('OutcomesPerStudent/HeaderDetails', function () {
   function makeProps(props) {
     return Object.assign({
@@ -47,10 +49,10 @@ describe('OutcomesPerStudent/HeaderDetails', function () {
   }
 
   it('includes a progress bar', 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('ProgressBar')).to.have.length(1);
+    (0, _chai.expect)(wrapper.find(_uiProgress.ProgressBar)).to.have.length(1);
   });
   it('hides the progress bar when rollups are hidden', function () {
     var wrapper = (0, _enzyme.shallow)( /*#__PURE__*/_react.default.createElement(_index.default, makeProps({
@@ -61,10 +63,10 @@ describe('OutcomesPerStudent/HeaderDetails', function () {
     (0, _chai.expect)(wrapper.find('ProgressBar')).to.have.length(0);
   });
   it('includes the rollup summary', 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.masteryBarDetails)).find('Text')).to.have.length(2);
+    (0, _chai.expect)((0, _findElementsWithStyle.findElementsWithStyle)(wrapper, (0, _styles.default)().masteryBarDetails).find(_uiText.Text)).to.have.length(2);
   });
   it('hides the rollup summary when rollups are hidden', function () {
     var wrapper = (0, _enzyme.shallow)( /*#__PURE__*/_react.default.createElement(_index.default, makeProps({
@@ -72,7 +74,7 @@ describe('OutcomesPerStudent/HeaderDetails', function () {
     })), {
       disableLifecycleMethods: true
     });
-    (0, _chai.expect)(wrapper.find(".".concat(styles.masteryBarDetails))).to.have.length(0);
+    (0, _chai.expect)(wrapper.find(".".concat(_styles.default.masteryBarDetails))).to.have.length(0);
   });
   it('does include tooltip', function () {
     var withUsesBank = {
@@ -87,10 +89,10 @@ describe('OutcomesPerStudent/HeaderDetails', function () {
         usesBank: true
       }
     };
-    var wrapper = (0, _enzyme.shallow)( /*#__PURE__*/_react.default.createElement(_index.default, makeProps(withUsesBank)), {
+    var wrapper = (0, _enzyme.mount)( /*#__PURE__*/_react.default.createElement(_index.default, makeProps(withUsesBank)), {
       disableLifecycleMethods: true
     });
-    (0, _chai.expect)(wrapper.find('Tooltip')).to.have.length(1);
+    (0, _chai.expect)(wrapper.find(_uiTooltip.Tooltip)).to.have.length(1);
   });
   it('does not include tooltip', function () {
     var wrapper = (0, _enzyme.shallow)( /*#__PURE__*/_react.default.createElement(_index.default, makeProps()), {