@instructure/outcomes-ui 2.1.3 → 2.1.5

package/lib/translated/da/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
+            }, "N\xE6rmere oplysninger")), /*#__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: "Luk",
+        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/da/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/da/components/OutcomeDescription/__tests__/index.test.js

@@ -12,11 +12,17 @@ var _index = _interopRequireDefault(require("../index.js"));
 
 var _checkA11y = _interopRequireDefault(require("../../../test/checkA11y.js"));
 
+var _mockOutcomesData = require("../../../test/mockOutcomesData.js");
+
 describe('OutcomeDescription', function () {
   function makeProps() {
     var props = arguments.length > 0 && arguments[0] !== void 0 ? arguments[0] : {};
     return Object.assign({
-      description: 'Hello there'
+      description: 'Hello there',
+      truncated: true,
+      ratings: _mockOutcomesData.ratings,
+      calculationMethod: 'latest',
+      calculationInt: {}
     }, props);
   }
 
@@ -49,6 +55,97 @@ describe('OutcomeDescription', function () {
     var wrapper = (0, _enzyme.mount)( /*#__PURE__*/_react.default.createElement(_index.default, props));
     (0, _chai.expect)(wrapper.text()).to.match(/Outcome labelHello there/);
   });
+  it('renders only the description if user cannot manage outcomes', function () {
+    var props = makeProps({
+      label: 'Outcome label'
+    });
+    var wrapper = (0, _enzyme.mount)( /*#__PURE__*/_react.default.createElement(_index.default, props));
+    (0, _chai.expect)(wrapper.text()).to.match(/Hello there/);
+  });
+  it('renders a friendly description if there is one and if expanded', function () {
+    var props = makeProps({
+      friendlyDescription: 'Outcome Friendly Description',
+      truncated: false
+    });
+    var wrapper = (0, _enzyme.mount)( /*#__PURE__*/_react.default.createElement(_index.default, props));
+    var text = wrapper.find('Text').at(1);
+    (0, _chai.expect)(text.text()).to.match(/Outcome Friendly Description/);
+  });
+  it('does not render a friendly description if not expanded', function () {
+    var props = makeProps({
+      friendlyDescription: 'Outcome Friendly Description'
+    });
+    var wrapper = (0, _enzyme.mount)( /*#__PURE__*/_react.default.createElement(_index.default, props));
+    (0, _chai.expect)(wrapper.find('Text')).to.have.length(1);
+    var text = wrapper.find('Text').at(0);
+    (0, _chai.expect)(text.text()).not.to.match(/Outcome Friendly Description/);
+  });
+  it('renders the ratings if expanded', function () {
+    var props = makeProps({
+      truncated: false
+    });
+    var wrapper = (0, _enzyme.mount)( /*#__PURE__*/_react.default.createElement(_index.default, props));
+    (0, _chai.expect)(wrapper.find('Ratings')).to.have.length(1);
+  });
+  it('does not render the ratings if not expanded', function () {
+    var props = makeProps();
+    var wrapper = (0, _enzyme.mount)( /*#__PURE__*/_react.default.createElement(_index.default, props));
+    (0, _chai.expect)(wrapper.find('Ratings')).to.have.length(0);
+  });
+  describe('renders proficiency calculation text correctly', function () {
+    it('for latest method', function () {
+      var props = makeProps({
+        truncated: false
+      });
+      var wrapper = (0, _enzyme.mount)( /*#__PURE__*/_react.default.createElement(_index.default, props));
+      var text = wrapper.find('Text').last();
+      (0, _chai.expect)(text.text()).to.match(/Most Recent Score/);
+    });
+    it('for highest method', function () {
+      var props = makeProps({
+        calculationMethod: 'highest',
+        truncated: false
+      });
+      var wrapper = (0, _enzyme.mount)( /*#__PURE__*/_react.default.createElement(_index.default, props));
+      var text = wrapper.find('Text').last();
+      (0, _chai.expect)(text.text()).to.match(/Highest Score/);
+    });
+    it('for n mastery method', function () {
+      var n_mastery = {
+        n_mastery_count: 3
+      };
+      var props = makeProps({
+        calculationMethod: 'n_mastery',
+        calculationInt: n_mastery,
+        truncated: false
+      });
+      var wrapper = (0, _enzyme.mount)( /*#__PURE__*/_react.default.createElement(_index.default, props));
+      var text = wrapper.find('Text').last();
+      (0, _chai.expect)(text.text()).to.match(/Achieve Mastery 3 times/);
+    });
+    it('for average method', function () {
+      var props = makeProps({
+        calculationMethod: 'average',
+        truncated: false
+      });
+      var wrapper = (0, _enzyme.mount)( /*#__PURE__*/_react.default.createElement(_index.default, props));
+      var text = wrapper.find('Text').last();
+      (0, _chai.expect)(text.text()).to.match(/Average/);
+    });
+    it('for decaying average method', function () {
+      var n_mastery = {
+        decaying_average_percent: 65
+      };
+      var props = makeProps({
+        calculationMethod: 'decaying_average',
+        calculationInt: n_mastery,
+        truncated: false
+      });
+      var wrapper = (0, _enzyme.mount)( /*#__PURE__*/_react.default.createElement(_index.default, props));
+      var text = wrapper.find('Text').last();
+      (0, _chai.expect)(text.text()).to.eq('Decaying Average - 65%/35%');
+    });
+  });
   it('meets a11y standards', function () {
     return (0, _checkA11y.default)( /*#__PURE__*/_react.default.createElement(_index.default, makeProps()));
   });

package/lib/translated/da/components/OutcomeDescription/index.js

@@ -11,15 +11,37 @@ var _react = _interopRequireDefault(require("react"));
 
 var _propTypes = _interopRequireDefault(require("prop-types"));
 
+var _index = _interopRequireDefault(require("../Ratings/index.js"));
+
+var _formatMessage = _interopRequireDefault(require("format-message"));
+
+var _shapes = require("../../store/shapes.js");
+
+var _constants = require("../../constants.js");
+
+var _uiFlex = require("@instructure/ui-flex");
+
 var _uiText = require("@instructure/ui-text");
 
 var _uiTruncateText = require("@instructure/ui-truncate-text");
 
+var _uiView = require("@instructure/ui-view");
+
 var OutcomeDescription = function OutcomeDescription(_ref) {
   var label = _ref.label,
       description = _ref.description,
-      truncate = _ref.truncate,
-      maxLines = _ref.maxLines;
+      friendlyDescription = _ref.friendlyDescription,
+      shouldTruncateText = _ref.shouldTruncateText,
+      maxLines = _ref.maxLines,
+      calculationMethod = _ref.calculationMethod,
+      calculationInt = _ref.calculationInt,
+      masteryPercent = _ref.masteryPercent,
+      pointsPossible = _ref.pointsPossible,
+      ratings = _ref.ratings,
+      truncated = _ref.truncated,
+      isTray = _ref.isTray,
+      canManageOutcomes = _ref.canManageOutcomes;
+  var descriptionDisplay = !canManageOutcomes && friendlyDescription ? friendlyDescription : description;
 
   var stripHtmlTags = function stripHtmlTags(text) {
     var doc = new DOMParser().parseFromString(text, 'text/html');
@@ -35,24 +57,139 @@ var OutcomeDescription = function OutcomeDescription(_ref) {
 
   var renderText = function renderText(text, position) {
     var strippedText = stripHtmlTags(text);
-    var renderedText = truncate ? truncateText(strippedText, position) : strippedText;
+    var renderedText = truncated && shouldTruncateText ? truncateText(strippedText, position) : strippedText;
     return /*#__PURE__*/_react.default.createElement(_uiText.Text, null, renderedText);
   };
 
-  return /*#__PURE__*/_react.default.createElement(_react.default.Fragment, null, label && renderText(label, 'middle'), description && renderText(description, 'end'));
+  var formatCalculationMethodText = function formatCalculationMethodText() {
+    var method = '';
+
+    switch (calculationMethod) {
+      case _constants.HIGHEST:
+        {
+          method = (0, _formatMessage.default)(_constants.CALCULATION_METHODS[_constants.HIGHEST]);
+          break;
+        }
+
+      case _constants.LATEST:
+        {
+          method = (0, _formatMessage.default)(_constants.CALCULATION_METHODS[_constants.LATEST]);
+          break;
+        }
+
+      case _constants.N_MASTERY:
+        {
+          var n = calculationInt.n_mastery_count;
+          method = (0, _formatMessage.default)(_constants.CALCULATION_METHODS[_constants.N_MASTERY], {
+            n: n
+          });
+          break;
+        }
+
+      case _constants.AVERAGE:
+        {
+          method = (0, _formatMessage.default)(_constants.CALCULATION_METHODS[_constants.AVERAGE]);
+          break;
+        }
+
+      case _constants.DECAYING_AVERAGE:
+        {
+          var percent = calculationInt.decaying_average_percent;
+          var complement = 100 - percent;
+          method = (0, _formatMessage.default)(_constants.CALCULATION_METHODS[_constants.DECAYING_AVERAGE], {
+            percent: percent,
+            complement: complement
+          });
+        }
+    }
+
+    return method;
+  };
+
+  var renderFriendlyDescription = function renderFriendlyDescription() {
+    return friendlyDescription && /*#__PURE__*/_react.default.createElement(_react.default.Fragment, null, /*#__PURE__*/_react.default.createElement(_uiView.View, {
+      as: "div",
+      margin: "x-small small 0 0",
+      padding: "small small x-small small",
+      background: "secondary",
+      "data-automation": "outcomeDescription__friendly_description_header"
+    }, /*#__PURE__*/_react.default.createElement(_uiText.Text, {
+      weight: "bold"
+    }, "Brugervenlig beskrivelse")), /*#__PURE__*/_react.default.createElement(_uiView.View, {
+      as: "div",
+      margin: "0 small x-small 0",
+      padding: "0 small small small",
+      background: "secondary",
+      "data-automation": "outcomeDescription__friendly_description_expanded"
+    }, /*#__PURE__*/_react.default.createElement(_uiText.Text, {
+      wrap: "break-word"
+    }, friendlyDescription)));
+  };
+
+  var renderRatingsAndCalculation = function renderRatingsAndCalculation() {
+    return /*#__PURE__*/_react.default.createElement(_uiView.View, null, ratings.length > 0 && /*#__PURE__*/_react.default.createElement(_uiView.View, {
+      as: "div",
+      margin: "small none"
+    }, /*#__PURE__*/_react.default.createElement(_index.default, {
+      ratings: ratings,
+      masteryPercent: masteryPercent,
+      pointsPossible: pointsPossible,
+      isTray: isTray
+    })), calculationMethod && calculationInt && /*#__PURE__*/_react.default.createElement(_uiFlex.Flex, {
+      wrap: "wrap",
+      padding: "none small small none"
+    }, /*#__PURE__*/_react.default.createElement(_uiFlex.Flex.Item, {
+      as: "div",
+      padding: "none xx-small none none"
+    }, /*#__PURE__*/_react.default.createElement(_uiView.View, {
+      as: "div"
+    }, /*#__PURE__*/_react.default.createElement(_uiText.Text, {
+      weight: "bold"
+    }, "Proficiency Calculation:"))), /*#__PURE__*/_react.default.createElement(_uiFlex.Flex.Item, null, /*#__PURE__*/_react.default.createElement(_uiText.Text, {
+      color: "primary",
+      weight: "normal"
+    }, formatCalculationMethodText()))));
+  };
+
+  return /*#__PURE__*/_react.default.createElement(_react.default.Fragment, null, label && canManageOutcomes && /*#__PURE__*/_react.default.createElement(_uiView.View, {
+    as: "div",
+    margin: "0 0 xx-small"
+  }, renderText(label, 'middle')), !truncated && canManageOutcomes && renderFriendlyDescription(), description && /*#__PURE__*/_react.default.createElement(_uiView.View, {
+    as: "div",
+    margin: canManageOutcomes ? 'xx-small 0' : '0',
+    "data-automation": "outcomeDescription__description"
+  }, renderText(descriptionDisplay, 'end')), !truncated && renderRatingsAndCalculation());
 };
 
 OutcomeDescription.propTypes = {
-  description: _propTypes.default.string,
   label: _propTypes.default.string,
-  truncate: _propTypes.default.bool,
-  maxLines: _propTypes.default.number
+  description: _propTypes.default.string,
+  friendlyDescription: _propTypes.default.string,
+  shouldTruncateText: _propTypes.default.bool,
+  maxLines: _propTypes.default.number,
+  calculationMethod: _propTypes.default.string,
+  calculationInt: _shapes.algorithmDataShape,
+  masteryPercent: _propTypes.default.number,
+  pointsPossible: _propTypes.default.number,
+  ratings: _propTypes.default.arrayOf(_shapes.scoringTierShape),
+  truncated: _propTypes.default.bool,
+  isTray: _propTypes.default.bool,
+  canManageOutcomes: _propTypes.default.bool
 };
 OutcomeDescription.defaultProps = {
-  description: '',
   label: '',
-  truncate: true,
-  maxLines: 1
+  description: '',
+  friendlyDescription: '',
+  shouldTruncateText: true,
+  maxLines: 1,
+  isTray: false,
+  calculationMethod: '',
+  calculationInt: null,
+  masteryPercent: null,
+  pointsPossible: null,
+  ratings: [],
+  truncated: true,
+  canManageOutcomes: true
 };
 var _default = OutcomeDescription;
 exports.default = _default;