@instructure/outcomes-ui 2.1.4 → 2.1.6

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

@@ -19,6 +19,8 @@ var _uiCheckbox = require("@instructure/ui-checkbox");
 
 var _uiFlex = require("@instructure/ui-flex");
 
+var _uiHeading = require("@instructure/ui-heading");
+
 var _uiText = require("@instructure/ui-text");
 
 var _uiIcons = require("@instructure/ui-icons");
@@ -84,6 +86,7 @@ var AlignmentItem = function AlignmentItem(_ref) {
       showTooltip = _useBoolean2[1],
       hideTooltip = _useBoolean2[2];
 
+  var displayTitle = !canManageOutcomes && label ? label : title;
   (0, _react.useEffect)(function () {
     if (shouldFocus) {
       var _trashIconRef$current;
@@ -100,14 +103,6 @@ var AlignmentItem = function AlignmentItem(_ref) {
     }
   };
 
-  var renderTitleText = function renderTitleText(size, weight) {
-    return /*#__PURE__*/_react.default.createElement(_uiText.Text, {
-      size: size,
-      weight: weight,
-      wrap: "break-word"
-    }, !canManageOutcomes && label ? label : title);
-  };
-
   var handleUpdate = function handleUpdate(isTruncated) {
     if (titleTruncated !== isTruncated) {
       setTitleTruncated(isTruncated);
@@ -120,10 +115,22 @@ var AlignmentItem = function AlignmentItem(_ref) {
         padding: isTray ? '0.5rem 0' : '0.4rem 0 0 0.3rem'
       },
       "data-automation": "alignmentItem__outcomeName"
-    }, truncated ? /*#__PURE__*/_react.default.createElement(_react.default.Fragment, null, /*#__PURE__*/_react.default.createElement(_uiTruncateText.TruncateText, {
+    }, truncated ? /*#__PURE__*/_react.default.createElement(_react.default.Fragment, null, /*#__PURE__*/_react.default.createElement(_uiHeading.Heading, {
+      level: "h4",
+      as: "h2",
+      theme: {
+        lineHeight: '1.5rem'
+      }
+    }, /*#__PURE__*/_react.default.createElement(_uiTruncateText.TruncateText, {
       position: "middle",
       onUpdate: handleUpdate
-    }, renderTitleText('medium', 'bold'), /*#__PURE__*/_react.default.createElement("span", null))) : renderTitleText('medium', 'bold'));
+    }, displayTitle, /*#__PURE__*/_react.default.createElement("span", null)))) : /*#__PURE__*/_react.default.createElement(_uiHeading.Heading, {
+      level: "h4",
+      as: "h2",
+      theme: {
+        lineHeight: '1.5rem'
+      }
+    }, displayTitle));
   };
 
   var renderDeleteButton = function renderDeleteButton() {
@@ -203,7 +210,11 @@ var AlignmentItem = function AlignmentItem(_ref) {
     as: "div",
     maxWidth: "19rem",
     padding: "small"
-  }, renderTitleText('small', 'normal'))) : renderOutcomeTitle()), canManageOutcomes && !isTray && /*#__PURE__*/_react.default.createElement(_uiFlex.Flex.Item, null, renderDeleteButton())), /*#__PURE__*/_react.default.createElement(_uiFlex.Flex, {
+  }, /*#__PURE__*/_react.default.createElement(_uiText.Text, {
+    size: "small",
+    weight: "normal",
+    wrap: "break-word"
+  }, displayTitle))) : renderOutcomeTitle()), canManageOutcomes && !isTray && /*#__PURE__*/_react.default.createElement(_uiFlex.Flex.Item, null, renderDeleteButton())), /*#__PURE__*/_react.default.createElement(_uiFlex.Flex, {
     as: "div",
     alignItems: "start"
   }, /*#__PURE__*/_react.default.createElement(_uiFlex.Flex.Item, {

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

@@ -0,0 +1,264 @@
+"use strict";
+
+var _interopRequireDefault = require("@babel/runtime/helpers/interopRequireDefault").default;
+
+Object.defineProperty(exports, "__esModule", {
+  value: true
+});
+exports.showFlashAlert = showFlashAlert;
+exports.destroyContainer = destroyContainer;
+exports.showFlashError = showFlashError;
+exports.showFlashSuccess = showFlashSuccess;
+exports.default = exports.defaultTimeout = void 0;
+
+var _classCallCheck2 = _interopRequireDefault(require("@babel/runtime/helpers/classCallCheck"));
+
+var _createClass2 = _interopRequireDefault(require("@babel/runtime/helpers/createClass"));
+
+var _inherits2 = _interopRequireDefault(require("@babel/runtime/helpers/inherits"));
+
+var _createSuper2 = _interopRequireDefault(require("@babel/runtime/helpers/createSuper"));
+
+var _react = _interopRequireDefault(require("react"));
+
+var _propTypes = _interopRequireDefault(require("prop-types"));
+
+var _reactDom = _interopRequireDefault(require("react-dom"));
+
+var _uiAlerts = require("@instructure/ui-alerts");
+
+var _uiLink = require("@instructure/ui-link");
+
+var _uiText = require("@instructure/ui-text");
+
+var _uiA11yContent = require("@instructure/ui-a11y-content");
+
+var _uiMotion = require("@instructure/ui-motion");
+
+var _flashAlertUtils = require("../../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';
+var defaultTimeout = 10000;
+exports.defaultTimeout = defaultTimeout;
+
+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.default.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.default.render( /*#__PURE__*/_react.default.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);
+}
+
+function destroyContainer() {
+  var container = document.getElementById(messageHolderId);
+  var liveRegion = document.getElementById(screenreaderMessageHolderId);
+  if (container) container.remove();
+  if (liveRegion) liveRegion.remove();
+}
+
+function showFlashError() {
+  var message = arguments.length > 0 && arguments[0] !== void 0 ? arguments[0] : "An error occurred making a network request";
+  return function (err) {
+    return showFlashAlert({
+      message: message,
+      err: err,
+      type: 'error'
+    });
+  };
+}
+
+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) {
+  (0, _inherits2.default)(FlashAlert, _React$Component);
+
+  var _super = (0, _createSuper2.default)(FlashAlert);
+
+  function FlashAlert(props) {
+    var _this;
+
+    (0, _classCallCheck2.default)(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;
+  }
+
+  (0, _createClass2.default)(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 && !(0, _flashAlertUtils.isLoadingChunkError)(a);
+      var showSecondaryDetails = b && !(0, _flashAlertUtils.isLoadingChunkError)(b);
+      return /*#__PURE__*/_react.default.createElement(_uiText.Text, {
+        as: "p",
+        fontStyle: "italic"
+      }, showPrimaryDetails && /*#__PURE__*/_react.default.createElement(_uiText.Text, null, a), showSecondaryDetails && /*#__PURE__*/_react.default.createElement(_react.default.Fragment, null, /*#__PURE__*/_react.default.createElement("br", null), /*#__PURE__*/_react.default.createElement(_uiText.Text, null, b)));
+    }
+  }, {
+    key: "render",
+    value: function render() {
+      var details = null;
+
+      if (this.props.error) {
+        var _findDetailMessage = (0, _flashAlertUtils.findDetailMessage)(this.props.error),
+            a = _findDetailMessage.a,
+            b = _findDetailMessage.b;
+
+        var showPrimaryDetails = a && !(0, _flashAlertUtils.isLoadingChunkError)(a);
+        var showSecondaryDetails = b && !(0, _flashAlertUtils.isLoadingChunkError)(b);
+
+        if (showPrimaryDetails || showSecondaryDetails) {
+          if (this.state.showDetails) {
+            details = this.renderDetailMessage(a, b);
+          } else {
+            details = /*#__PURE__*/_react.default.createElement("span", null, /*#__PURE__*/_react.default.createElement(_uiA11yContent.PresentationContent, null, /*#__PURE__*/_react.default.createElement(_uiLink.Link, {
+              isWithinText: false,
+              as: "button",
+              onClick: this.showDetails
+            }, "\u0627\u0644\u062A\u0641\u0627\u0635\u064A\u0644")), /*#__PURE__*/_react.default.createElement(_uiA11yContent.ScreenReaderContent, null, this.renderDetailMessage(a, b)));
+          }
+        }
+      }
+
+      return /*#__PURE__*/_react.default.createElement(_uiMotion.Transition, {
+        transitionOnMount: true,
+        in: this.state.isOpen,
+        type: "fade"
+      }, /*#__PURE__*/_react.default.createElement(_uiAlerts.Alert, {
+        variant: this.props.variant,
+        renderCloseButtonLabel: "\u0625\u063A\u0644\u0627\u0642",
+        onDismiss: this.closeAlert,
+        margin: "small auto",
+        timeout: this.props.timeout,
+        liveRegion: this.getLiveRegion,
+        transition: "fade",
+        screenReaderOnly: this.props.screenReaderOnly
+      }, /*#__PURE__*/_react.default.createElement("div", null, /*#__PURE__*/_react.default.createElement("p", {
+        style: {
+          margin: '0 -5px'
+        }
+      }, this.props.message), details)));
+    }
+  }]);
+  FlashAlert.displayName = "FlashAlert";
+  return FlashAlert;
+}(_react.default.Component);
+
+FlashAlert.propTypes = {
+  onClose: _propTypes.default.func.isRequired,
+  message: _propTypes.default.string.isRequired,
+  error: _propTypes.default.instanceOf(Error),
+  variant: _propTypes.default.oneOf(['info', 'success', 'warning', 'error']),
+  timeout: _propTypes.default.number,
+  screenReaderOnly: _propTypes.default.bool
+};
+FlashAlert.defaultProps = {
+  error: null,
+  variant: 'info',
+  timeout: defaultTimeout,
+  screenReaderOnly: false
+};
+var _default = FlashAlert;
+exports.default = _default;

package/lib/translated/ar/components/FlashAlert/index.test.js

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

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

@@ -0,0 +1,97 @@
+"use strict";
+
+var _interopRequireWildcard = require("@babel/runtime/helpers/interopRequireWildcard").default;
+
+var _interopRequireDefault = require("@babel/runtime/helpers/interopRequireDefault").default;
+
+var _objectSpread2 = _interopRequireDefault(require("@babel/runtime/helpers/objectSpread2"));
+
+var _chai = require("chai");
+
+var _react = _interopRequireDefault(require("react"));
+
+var _sinon = _interopRequireDefault(require("sinon"));
+
+var _enzyme = require("enzyme");
+
+var _index = _interopRequireWildcard(require("../index.js"));
+
+var _checkA11y = _interopRequireDefault(require("../../../../test/checkA11y.js"));
+
+var _constants = require("../../../../constants.js");
+
+describe('OutcomesPerStudent/ExportCSVButton', function () {
+  var clock;
+  beforeEach(function () {
+    clock = _sinon.default.useFakeTimers();
+  });
+  afterEach(function () {
+    clock.restore();
+  });
+
+  var makeProps = function makeProps(props) {
+    return (0, _objectSpread2.default)({
+      fetchCSVData: _sinon.default.spy(),
+      formatCSVData: _sinon.default.spy(),
+      fetchingStatus: _constants.NOT_FETCHING,
+      artifactId: 1
+    }, props);
+  };
+
+  it('renders the export CSV button', function () {
+    var wrapper = (0, _enzyme.mount)( /*#__PURE__*/_react.default.createElement(_index.default, makeProps({})));
+    (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');
+  });
+  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');
+  });
+  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;
+  });
+  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');
+    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');
+    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');
+  });
+  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');
+    button.simulate('click');
+    (0, _chai.expect)(wrapper.text()).to.match(/Exporting/);
+    (0, _chai.expect)(wrapper.find('ProgressBar')).to.exist;
+  });
+  it('correct headers are passed into CSVLink', function () {
+    var wrapper = (0, _enzyme.mount)( /*#__PURE__*/_react.default.createElement(_index.default, makeProps({})));
+    (0, _chai.expect)(wrapper.find('Flex span CSVLink').prop('headers')).to.equal(_index.headers);
+  });
+  it('CSVLink is initially passed in no row data', function () {
+    var wrapper = (0, _enzyme.mount)( /*#__PURE__*/_react.default.createElement(_index.default, makeProps({})));
+    (0, _chai.expect)(wrapper.find('Flex span CSVLink').prop('data')).to.be.empty;
+  });
+  it('CSVLink is not keyboard accessible', function () {
+    var wrapper = (0, _enzyme.mount)( /*#__PURE__*/_react.default.createElement(_index.default, makeProps({})));
+    (0, _chai.expect)(wrapper.find('Flex span CSVLink').prop('tabIndex')).to.equal(-1);
+  });
+  it('meets a11y standards', function () {
+    return (0, _checkA11y.default)( /*#__PURE__*/_react.default.createElement(_index.default, makeProps({})));
+  });
+});