@instructure/outcomes-ui 2.1.4 → 2.1.5

package/es/components/AlignmentItem/__tests__/index.test.js

@@ -23,7 +23,7 @@ describe('AlignmentItem', function () {
 
   it('renders title', function () {
     var wrapper = shallow( /*#__PURE__*/React.createElement(AlignmentItem, makeProps()));
-    expect(wrapper.find('Text')).to.have.length(1);
+    expect(wrapper.find('Heading')).to.have.length(1);
   });
   it('renders the friendly name if user cannot manage outcomes', function () {
     var wrapper = mount( /*#__PURE__*/React.createElement(AlignmentItem, makeProps({

package/es/components/AlignmentItem/index.js

@@ -4,6 +4,7 @@ import PropTypes from 'prop-types';
 import t from 'format-message';
 import { Checkbox } from '@instructure/ui-checkbox';
 import { Flex } from '@instructure/ui-flex';
+import { Heading } from '@instructure/ui-heading';
 import { Text } from '@instructure/ui-text';
 import { IconArrowOpenDownLine, IconArrowOpenEndLine, IconTrashLine } from '@instructure/ui-icons';
 import { IconButton } from '@instructure/ui-buttons';
@@ -60,6 +61,7 @@ var AlignmentItem = function AlignmentItem(_ref) {
       showTooltip = _useBoolean2[1],
       hideTooltip = _useBoolean2[2];
 
+  var displayTitle = !canManageOutcomes && label ? label : title;
   useEffect(function () {
     if (shouldFocus) {
       var _trashIconRef$current;
@@ -76,14 +78,6 @@ var AlignmentItem = function AlignmentItem(_ref) {
     }
   };
 
-  var renderTitleText = function renderTitleText(size, weight) {
-    return /*#__PURE__*/React.createElement(Text, {
-      size: size,
-      weight: weight,
-      wrap: "break-word"
-    }, !canManageOutcomes && label ? label : title);
-  };
-
   var handleUpdate = function handleUpdate(isTruncated) {
     if (titleTruncated !== isTruncated) {
       setTitleTruncated(isTruncated);
@@ -96,10 +90,22 @@ var AlignmentItem = function AlignmentItem(_ref) {
         padding: isTray ? '0.5rem 0' : '0.4rem 0 0 0.3rem'
       },
       "data-automation": "alignmentItem__outcomeName"
-    }, truncated ? /*#__PURE__*/React.createElement(React.Fragment, null, /*#__PURE__*/React.createElement(TruncateText, {
+    }, truncated ? /*#__PURE__*/React.createElement(React.Fragment, null, /*#__PURE__*/React.createElement(Heading, {
+      level: "h4",
+      as: "h2",
+      theme: {
+        lineHeight: '1.5rem'
+      }
+    }, /*#__PURE__*/React.createElement(TruncateText, {
       position: "middle",
       onUpdate: handleUpdate
-    }, renderTitleText('medium', 'bold'), /*#__PURE__*/React.createElement("span", null))) : renderTitleText('medium', 'bold'));
+    }, displayTitle, /*#__PURE__*/React.createElement("span", null)))) : /*#__PURE__*/React.createElement(Heading, {
+      level: "h4",
+      as: "h2",
+      theme: {
+        lineHeight: '1.5rem'
+      }
+    }, displayTitle));
   };
 
   var renderDeleteButton = function renderDeleteButton() {
@@ -187,7 +193,11 @@ var AlignmentItem = function AlignmentItem(_ref) {
     as: "div",
     maxWidth: "19rem",
     padding: "small"
-  }, renderTitleText('small', 'normal'))) : renderOutcomeTitle()), canManageOutcomes && !isTray && /*#__PURE__*/React.createElement(Flex.Item, null, renderDeleteButton())), /*#__PURE__*/React.createElement(Flex, {
+  }, /*#__PURE__*/React.createElement(Text, {
+    size: "small",
+    weight: "normal",
+    wrap: "break-word"
+  }, displayTitle))) : renderOutcomeTitle()), canManageOutcomes && !isTray && /*#__PURE__*/React.createElement(Flex.Item, null, renderDeleteButton())), /*#__PURE__*/React.createElement(Flex, {
     as: "div",
     alignItems: "start"
   }, /*#__PURE__*/React.createElement(Flex.Item, {

package/es/components/FlashAlert/index.js

@@ -0,0 +1,234 @@
+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 React from 'react';
+import PropTypes from 'prop-types';
+import ReactDOM from 'react-dom';
+import t from 'format-message';
+import { Alert } from '@instructure/ui-alerts';
+import { Link } from '@instructure/ui-link';
+import { Text } from '@instructure/ui-text';
+import { PresentationContent, ScreenReaderContent } from '@instructure/ui-a11y-content';
+import { Transition } from '@instructure/ui-motion';
+import { findDetailMessage, isLoadingChunkError } from "../../util/flashAlertUtils.js";
+/*
+ * Note: This file is copied over from canvas-lms/ui/shared/alerts/react/FlashAlert.js
+ * It has a few minor changes so that it works with outcomes-ui, but is overall
+ * pretty much the same and it works the same. Some functions were moved into a utils
+ * file for testing purposes.
+ */
+
+var messageHolderId = 'flashalert_message_holder'; // specs fail if I reuse jquery's elements
+
+var screenreaderMessageHolderId = 'flash_screenreader_holder';
+export var defaultTimeout = 10000;
+export function showFlashAlert(_ref) {
+  var message = _ref.message,
+      err = _ref.err,
+      _ref$type = _ref.type,
+      type = _ref$type === void 0 ? err ? 'error' : 'info' : _ref$type,
+      _ref$timeout = _ref.timeout,
+      timeout = _ref$timeout === void 0 ? defaultTimeout : _ref$timeout,
+      _ref$srOnly = _ref.srOnly,
+      srOnly = _ref$srOnly === void 0 ? false : _ref$srOnly;
+
+  function closeAlert(atNode) {
+    ReactDOM.unmountComponentAtNode(atNode);
+    atNode.remove();
+  }
+
+  function getAlertContainer() {
+    var alertContainer = document.getElementById(messageHolderId);
+
+    if (!alertContainer) {
+      alertContainer = document.createElement('div');
+      alertContainer.classList.add('clickthrough-container');
+      alertContainer.id = messageHolderId;
+      alertContainer.setAttribute('style', 'position: fixed; top: 0; left: 0; width: 100%; z-index: 100000;');
+      document.body.appendChild(alertContainer);
+    }
+
+    return alertContainer;
+  }
+
+  function renderAlert(parent) {
+    ReactDOM.render( /*#__PURE__*/React.createElement(FlashAlert, {
+      message: message,
+      timeout: timeout,
+      error: err,
+      variant: type,
+      onClose: closeAlert.bind(null, parent),
+      screenReaderOnly: srOnly
+    }), parent);
+  }
+
+  var div = document.createElement('div'); // div.setAttribute('class', styles.flashMessage)
+
+  div.setAttribute('style', 'max-width:50em;margin:1rem auto;');
+  div.setAttribute('class', 'flashalert-message');
+  getAlertContainer().appendChild(div);
+  renderAlert(div);
+}
+export function destroyContainer() {
+  var container = document.getElementById(messageHolderId);
+  var liveRegion = document.getElementById(screenreaderMessageHolderId);
+  if (container) container.remove();
+  if (liveRegion) liveRegion.remove();
+}
+export function showFlashError() {
+  var message = arguments.length > 0 && arguments[0] !== void 0 ? arguments[0] : t('An error occurred making a network request');
+  return function (err) {
+    return showFlashAlert({
+      message: message,
+      err: err,
+      type: 'error'
+    });
+  };
+}
+export function showFlashSuccess(message) {
+  return function () {
+    return showFlashAlert({
+      message: message,
+      type: 'success'
+    });
+  };
+} // An Alert with a message and "Details" button which surfaces
+// more info about the error when pressed.
+// Is displayed at the top of the document, and will close itself after a while
+
+var FlashAlert = /*#__PURE__*/function (_React$Component) {
+  _inherits(FlashAlert, _React$Component);
+
+  var _super = _createSuper(FlashAlert);
+
+  function FlashAlert(props) {
+    var _this;
+
+    _classCallCheck(this, FlashAlert);
+
+    _this = _super.call(this, props);
+
+    _this.showDetails = function () {
+      _this.setState({
+        showDetails: true
+      });
+
+      clearTimeout(_this.timerId);
+      _this.timerId = setTimeout(function () {
+        return _this.closeAlert();
+      }, _this.props.timeout);
+    };
+
+    _this.closeAlert = function () {
+      _this.setState({
+        isOpen: false
+      }, function () {
+        setTimeout(function () {
+          clearTimeout(_this.timerId);
+
+          _this.props.onClose();
+        }, 500);
+      });
+    };
+
+    _this.state = {
+      showDetails: false,
+      isOpen: true
+    };
+    _this.timerId = 0;
+    return _this;
+  }
+
+  _createClass(FlashAlert, [{
+    key: "getLiveRegion",
+    value: function getLiveRegion() {
+      // return element where flash screenreader messages go.
+      // create if necessary
+      var liveRegion = document.getElementById(screenreaderMessageHolderId);
+
+      if (!liveRegion) {
+        liveRegion = document.createElement('div');
+        liveRegion.id = screenreaderMessageHolderId;
+        liveRegion.setAttribute('role', 'alert');
+        document.body.appendChild(liveRegion);
+      }
+
+      return liveRegion;
+    }
+  }, {
+    key: "renderDetailMessage",
+    value: function renderDetailMessage(a, b) {
+      var showPrimaryDetails = a && !isLoadingChunkError(a);
+      var showSecondaryDetails = b && !isLoadingChunkError(b);
+      return /*#__PURE__*/React.createElement(Text, {
+        as: "p",
+        fontStyle: "italic"
+      }, showPrimaryDetails && /*#__PURE__*/React.createElement(Text, null, a), showSecondaryDetails && /*#__PURE__*/React.createElement(React.Fragment, null, /*#__PURE__*/React.createElement("br", null), /*#__PURE__*/React.createElement(Text, null, b)));
+    }
+  }, {
+    key: "render",
+    value: function render() {
+      var details = null;
+
+      if (this.props.error) {
+        var _findDetailMessage = findDetailMessage(this.props.error),
+            a = _findDetailMessage.a,
+            b = _findDetailMessage.b;
+
+        var showPrimaryDetails = a && !isLoadingChunkError(a);
+        var showSecondaryDetails = b && !isLoadingChunkError(b);
+
+        if (showPrimaryDetails || showSecondaryDetails) {
+          if (this.state.showDetails) {
+            details = this.renderDetailMessage(a, b);
+          } else {
+            details = /*#__PURE__*/React.createElement("span", null, /*#__PURE__*/React.createElement(PresentationContent, null, /*#__PURE__*/React.createElement(Link, {
+              isWithinText: false,
+              as: "button",
+              onClick: this.showDetails
+            }, t('Details'))), /*#__PURE__*/React.createElement(ScreenReaderContent, null, this.renderDetailMessage(a, b)));
+          }
+        }
+      }
+
+      return /*#__PURE__*/React.createElement(Transition, {
+        transitionOnMount: true,
+        in: this.state.isOpen,
+        type: "fade"
+      }, /*#__PURE__*/React.createElement(Alert, {
+        variant: this.props.variant,
+        renderCloseButtonLabel: t('Close'),
+        onDismiss: this.closeAlert,
+        margin: "small auto",
+        timeout: this.props.timeout,
+        liveRegion: this.getLiveRegion,
+        transition: "fade",
+        screenReaderOnly: this.props.screenReaderOnly
+      }, /*#__PURE__*/React.createElement("div", null, /*#__PURE__*/React.createElement("p", {
+        style: {
+          margin: '0 -5px'
+        }
+      }, this.props.message), details)));
+    }
+  }]);
+
+  FlashAlert.displayName = "FlashAlert";
+  return FlashAlert;
+}(React.Component);
+
+FlashAlert.propTypes = {
+  onClose: PropTypes.func.isRequired,
+  message: PropTypes.string.isRequired,
+  error: PropTypes.instanceOf(Error),
+  variant: PropTypes.oneOf(['info', 'success', 'warning', 'error']),
+  timeout: PropTypes.number,
+  screenReaderOnly: PropTypes.bool
+};
+FlashAlert.defaultProps = {
+  error: null,
+  variant: 'info',
+  timeout: defaultTimeout,
+  screenReaderOnly: false
+};
+export default FlashAlert;

package/es/components/FlashAlert/index.test.js

@@ -0,0 +1,90 @@
+import _objectSpread from "@babel/runtime/helpers/esm/objectSpread2";
+import React from 'react';
+import ReactDOM from 'react-dom';
+import sinon from 'sinon';
+import { expect } from 'chai';
+import { mount } from 'enzyme';
+import FlashAlert, { showFlashAlert, showFlashError, showFlashSuccess, defaultTimeout } from "../FlashAlert/index.js";
+describe('FlashAlert', function () {
+  var renderSpy;
+  var clock;
+  beforeEach(function () {
+    renderSpy = sinon.spy(ReactDOM, 'render');
+    clock = sinon.useFakeTimers();
+  });
+  afterEach(function () {
+    renderSpy.restore();
+    clock.restore();
+  });
+
+  var makeProps = function makeProps(props) {
+    return _objectSpread({
+      message: 'This is a test error message 123',
+      timeout: defaultTimeout,
+      error: new Error('This is a test error 321'),
+      variant: 'error',
+      onClose: sinon.spy(),
+      screenReaderOnly: false
+    }, props);
+  };
+
+  it('renders', function () {
+    var screen = mount( /*#__PURE__*/React.createElement(FlashAlert, makeProps({})));
+    expect(screen.text()).to.match(/This is a test error message 123/);
+    expect(screen.text()).to.match(/This is a test error 321/);
+  });
+  it('renders, but does not show loading chunk text', function () {
+    var screen = mount( /*#__PURE__*/React.createElement(FlashAlert, makeProps({
+      error: new Error('loading chunk 123')
+    })));
+    expect(screen.text()).to.match(/This is a test error message 123/);
+    expect(screen.text()).not.to.match(/loading chunk 123/);
+  });
+  it('renders Transition component', function () {
+    var screen = mount( /*#__PURE__*/React.createElement(FlashAlert, makeProps({})));
+    var transition = screen.find('Transition').first();
+    expect(transition).to.exist;
+    expect(transition.prop('transitionOnMount')).to.be.true;
+    expect(transition.prop('in')).to.be.true;
+    expect(transition.prop('type')).to.eq('fade');
+    clock.tick(defaultTimeout);
+    screen.update();
+    var transition2 = screen.find('Transition').at(1);
+    expect(transition2.prop('in')).to.be.false;
+  });
+  it('renders Alert component', function () {
+    var props = makeProps({});
+    var screen = mount( /*#__PURE__*/React.createElement(FlashAlert, props));
+    var alert = screen.find('Alert');
+    expect(alert).to.exist;
+    expect(alert.prop('variant')).to.eq(props.variant);
+    expect(alert.prop('renderCloseButtonLabel')).to.eq('Close');
+    expect(alert.prop('onDismiss')).to.not.be.undefined;
+    expect(alert.prop('margin')).to.eq('small auto');
+    expect(alert.prop('timeout')).to.eq(props.timeout);
+    expect(alert.prop('liveRegion')).to.not.be.undefined;
+    expect(alert.prop('transition')).to.eq('fade');
+    expect(alert.prop('screenReaderOnly')).to.eq(props.screenReaderOnly);
+  });
+  describe('showFlashAlert', function () {
+    it('calls render', function () {
+      var props = makeProps({});
+      showFlashAlert(_objectSpread({}, props));
+      expect(renderSpy).to.have.been.called;
+    });
+  });
+  describe('showFlashError', function () {
+    it('calls render', function () {
+      var showAlert = showFlashError();
+      showAlert();
+      expect(renderSpy).to.have.been.called;
+    });
+  });
+  describe('showFlashSuccess', function () {
+    it('calls render', function () {
+      var showAlert = showFlashSuccess();
+      showAlert();
+      expect(renderSpy).to.have.been.called;
+    });
+  });
+});

package/es/components/OutcomesPerStudent/ExportCSVButton/__tests__/index.test.js

@@ -0,0 +1,83 @@
+import _objectSpread from "@babel/runtime/helpers/esm/objectSpread2";
+import { expect } from 'chai';
+import React from 'react';
+import sinon from 'sinon';
+import { mount } from 'enzyme';
+import ExportCSVButton, { headers } from "../index.js";
+import checkA11y from "../../../../test/checkA11y.js";
+import { NOT_FETCHING } from "../../../../constants.js";
+describe('OutcomesPerStudent/ExportCSVButton', function () {
+  var clock;
+  beforeEach(function () {
+    clock = sinon.useFakeTimers();
+  });
+  afterEach(function () {
+    clock.restore();
+  });
+
+  var makeProps = function makeProps(props) {
+    return _objectSpread({
+      fetchCSVData: sinon.spy(),
+      formatCSVData: sinon.spy(),
+      fetchingStatus: NOT_FETCHING,
+      artifactId: 1
+    }, props);
+  };
+
+  it('renders the export CSV button', function () {
+    var wrapper = mount( /*#__PURE__*/React.createElement(ExportCSVButton, makeProps({})));
+    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');
+  });
+  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');
+  });
+  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;
+  });
+  it('click export CSV calls fetchCSVData', function () {
+    var props = makeProps({});
+    var wrapper = mount( /*#__PURE__*/React.createElement(ExportCSVButton, props));
+    var button = wrapper.find('Flex Button');
+    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');
+    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');
+  });
+  it('starting export displays the ProgressBar', function () {
+    var props = makeProps({});
+    var wrapper = mount( /*#__PURE__*/React.createElement(ExportCSVButton, props));
+    var button = wrapper.find('Flex Button');
+    button.simulate('click');
+    expect(wrapper.text()).to.match(/Exporting/);
+    expect(wrapper.find('ProgressBar')).to.exist;
+  });
+  it('correct headers are passed into CSVLink', function () {
+    var wrapper = mount( /*#__PURE__*/React.createElement(ExportCSVButton, makeProps({})));
+    expect(wrapper.find('Flex span CSVLink').prop('headers')).to.equal(headers);
+  });
+  it('CSVLink is initially passed in no row data', function () {
+    var wrapper = mount( /*#__PURE__*/React.createElement(ExportCSVButton, makeProps({})));
+    expect(wrapper.find('Flex span CSVLink').prop('data')).to.be.empty;
+  });
+  it('CSVLink is not keyboard accessible', function () {
+    var wrapper = mount( /*#__PURE__*/React.createElement(ExportCSVButton, makeProps({})));
+    expect(wrapper.find('Flex span CSVLink').prop('tabIndex')).to.equal(-1);
+  });
+  it('meets a11y standards', function () {
+    return checkA11y( /*#__PURE__*/React.createElement(ExportCSVButton, makeProps({})));
+  });
+});

package/es/components/OutcomesPerStudent/ExportCSVButton/index.js

@@ -0,0 +1,146 @@
+import _slicedToArray from "@babel/runtime/helpers/esm/slicedToArray";
+import React, { useEffect, useRef } from 'react';
+import PropTypes from 'prop-types';
+import { Button } from '@instructure/ui-buttons';
+import { CSVLink } from 'react-csv';
+import { Flex } from '@instructure/ui-flex';
+import { ProgressBar } from '@instructure/ui-progress';
+import { Text } from '@instructure/ui-text';
+import { Transition } from '@instructure/ui-motion';
+import t from 'format-message';
+import useBoolean from "../../../hooks/useBoolean.js";
+import useCSVExport, { NOT_EXPORTING, CSV_COMPLETE } from "../../../hooks/useCSVExport.js";
+import { STUDENT_NAME, STUDENT_UUID, ATTEMPT_COUNT, ALIGNED_QUESTIONS_COUNT, LOR_POINTS, LOR_POINTS_POSSIBLE, LO_NAME, LO_ID, LO_MASTERY_PERCENT, LO_MASTERED } from "../../../constants.js";
+import { fileName, formatPercentage } from "../../../util/outcomesReportUtils.js";
+export var headers = [{
+  label: t('Student Name'),
+  key: STUDENT_NAME
+}, {
+  label: t('Student UUID'),
+  key: STUDENT_UUID
+}, {
+  label: t('Number of Attempts'),
+  key: ATTEMPT_COUNT
+}, {
+  label: t('Number of Aligned Questions'),
+  key: ALIGNED_QUESTIONS_COUNT
+}, {
+  label: t('Learning Outcome Result Points'),
+  key: LOR_POINTS
+}, {
+  label: t('Learning Outcome Result Points Possible'),
+  key: LOR_POINTS_POSSIBLE
+}, {
+  label: t('Learning Outcome Name'),
+  key: LO_NAME
+}, {
+  label: t('Learning Outcome ID'),
+  key: LO_ID
+}, {
+  label: t('Learning Outcome Mastery Percent'),
+  key: LO_MASTERY_PERCENT
+}, {
+  label: t('Learning Outcome Mastered'),
+  key: LO_MASTERED
+}];
+
+var ExportCSVButton = function ExportCSVButton(_ref) {
+  var fetchCSVData = _ref.fetchCSVData,
+      formatCSVData = _ref.formatCSVData,
+      fetchingStatus = _ref.fetchingStatus,
+      artifactId = _ref.artifactId;
+  var csvElementRef = useRef(null);
+
+  var exportCSV = function exportCSV() {
+    var _csvElementRef$curren;
+
+    return (_csvElementRef$curren = csvElementRef.current) === null || _csvElementRef$curren === void 0 ? void 0 : _csvElementRef$curren.click();
+  };
+
+  var _useBoolean = useBoolean(false),
+      _useBoolean2 = _slicedToArray(_useBoolean, 3),
+      isShowingProgressBar = _useBoolean2[0],
+      showProgressBar = _useBoolean2[1],
+      hideProgressBar = _useBoolean2[2];
+
+  var _useCSVExport = useCSVExport({
+    fetchCSVData: fetchCSVData,
+    fetchingStatus: fetchingStatus,
+    formatCSVData: formatCSVData,
+    showProgressBar: showProgressBar,
+    hideProgressBar: hideProgressBar
+  }),
+      beginExport = _useCSVExport.beginExport,
+      cancelExport = _useCSVExport.cancelExport,
+      exportState = _useCSVExport.exportState,
+      progressValue = _useCSVExport.progressValue,
+      formattedData = _useCSVExport.formattedData;
+
+  var canStartExport = exportState === NOT_EXPORTING;
+  useEffect(function () {
+    if (exportState === CSV_COMPLETE) {
+      exportCSV();
+    }
+  }, [exportState]);
+  return /*#__PURE__*/React.createElement(Flex, {
+    as: "div",
+    width: "100%",
+    alignItems: "center",
+    justifyItems: "space-between"
+  }, /*#__PURE__*/React.createElement("div", {
+    style: {
+      flex: 1,
+      textAlign: 'start'
+    }
+  }, /*#__PURE__*/React.createElement(Transition, {
+    in: isShowingProgressBar,
+    type: "fade",
+    unmountOnExit: true
+  }, /*#__PURE__*/React.createElement(Text, {
+    weight: "bold",
+    size: "small",
+    color: "primary"
+  }, t('Exporting')), /*#__PURE__*/React.createElement(ProgressBar, {
+    screenReaderLabel: t('Export CSV Percent Complete'),
+    renderValue: function renderValue(_ref2) {
+      var valueNow = _ref2.valueNow,
+          valueMax = _ref2.valueMax;
+      return t('{percentDone}%', {
+        percentDone: formatPercentage(valueNow, valueMax)
+      });
+    },
+    formatScreenReaderValue: function formatScreenReaderValue(_ref3) {
+      var valueNow = _ref3.valueNow,
+          valueMax = _ref3.valueMax;
+      return t('{percentDone} percent', {
+        percentDone: formatPercentage(valueNow, valueMax)
+      });
+    },
+    valueNow: progressValue,
+    "data-automation": "outcomesPerStudent_exportCSVProgressBar",
+    margin: "0 0 xx-small"
+  }))), /*#__PURE__*/React.createElement(Button, {
+    margin: "medium 0 medium 0",
+    color: canStartExport ? 'primary' : 'secondary',
+    onClick: canStartExport ? beginExport : cancelExport,
+    interaction: canStartExport ? 'enabled' : progressValue < 100 ? 'enabled' : 'disabled',
+    "data-automation": "outcomesPerStudent_exportCSVButton"
+  }, canStartExport ? t('Export CSV') : t('Cancel Export')), /*#__PURE__*/React.createElement("span", {
+    "aria-hidden": true
+  }, /*#__PURE__*/React.createElement(CSVLink, {
+    data: formattedData,
+    headers: headers,
+    filename: fileName(artifactId),
+    tabIndex: -1
+  }, /*#__PURE__*/React.createElement("span", {
+    ref: csvElementRef
+  }))));
+};
+
+ExportCSVButton.propTypes = {
+  fetchCSVData: PropTypes.func.isRequired,
+  formatCSVData: PropTypes.func.isRequired,
+  fetchingStatus: PropTypes.string.isRequired,
+  artifactId: PropTypes.string.isRequired
+};
+export default ExportCSVButton;

package/es/components/OutcomesPerStudent/Score/index.js

@@ -25,6 +25,7 @@ var styles = {
   'scoreSpacer': 'outcomes-ui__Score--scoreSpacer',
   'masteryStar': 'outcomes-ui__Score--masteryStar'
 };
+import { hasMastery } from "../../../util/outcomesReportUtils.js";
 var Score = (_dec = themeable(theme, styles), _dec(_class = (_temp = _class2 = /*#__PURE__*/function (_React$Component) {
   _inherits(Score, _React$Component);
 
@@ -45,7 +46,7 @@ var Score = (_dec = themeable(theme, styles), _dec(_class = (_temp = _class2 = /
       var _this$props = this.props,
           score = _this$props.score,
           outcome = _this$props.outcome;
-      var mastery = score && score.percentScore >= outcome.scoring_method.mastery_percent;
+      var mastery = hasMastery(score, outcome);
       var outerStyle = classNames((_classNames = {}, _defineProperty(_classNames, styles.score, true), _defineProperty(_classNames, styles.mastery, mastery), _classNames));
       return score && /*#__PURE__*/React.createElement("div", {
         className: outerStyle