@instructure/outcomes-ui 2.1.3 → 2.1.4

package/es/translated/zh-Hant/test/mockOutcomesData.js

@@ -0,0 +1,62 @@
+/*
+ * This file contains mock data for outcomes. This mock data is centralized in this file and imported by several
+ * component test files.
+ */
+export var OUTCOME_1 = {
+  id: '1',
+  label: 'A1',
+  title: 'tA1',
+  description: 'dA1',
+  friendly_description: 'fdA1',
+  scoring_method: {
+    algorithm: 'highest',
+    algorithm_data: {},
+    mastery_percent: 0.6,
+    points_possible: 5,
+    scoring_tiers: ratings
+  }
+};
+export var OUTCOME_2 = {
+  id: '2',
+  label: 'B2',
+  title: 'tB2',
+  description: 'dB2',
+  friendly_description: 'fdB2',
+  scoring_method: {
+    algorithm: 'latest',
+    algorithm_data: {},
+    mastery_percent: 0.6,
+    points_possible: 5,
+    scoring_tiers: ratings
+  }
+};
+export var OUTCOME_3 = {
+  id: '3',
+  label: 'C3',
+  title: 'tC3',
+  description: 'dC3',
+  friendly_description: 'fdC3',
+  scoring_method: {
+    algorithm: 'average',
+    algorithm_data: {},
+    mastery_percent: 0.6,
+    points_possible: 5,
+    scoring_tiers: ratings
+  }
+};
+export var ratings = [{
+  id: '91',
+  description: 'Exceeds Expectations',
+  percent: 1,
+  count: 20
+}, {
+  id: '92',
+  description: 'Meets Expectations',
+  percent: 0.6,
+  count: 5
+}, {
+  id: '93',
+  description: 'Does Not Meet Expectations',
+  percent: 0,
+  count: 25
+}];

package/lib/components/AlignmentButton/AlignmentItem/__tests__/index.test.js

@@ -0,0 +1,64 @@
+"use strict";
+
+var _interopRequireDefault = require("@babel/runtime/helpers/interopRequireDefault").default;
+
+var _chai = require("chai");
+
+var _react = _interopRequireDefault(require("react"));
+
+var _enzyme = require("enzyme");
+
+var _sinon = _interopRequireDefault(require("sinon"));
+
+var _index = _interopRequireDefault(require("../index.js"));
+
+var _checkA11y = _interopRequireDefault(require("../../../../test/checkA11y.js"));
+
+describe('AlignmentItem', function () {
+  function makeProps() {
+    var props = arguments.length > 0 && arguments[0] !== void 0 ? arguments[0] : {};
+    return Object.assign({
+      outcome: {
+        id: '1',
+        label: 'A1',
+        title: 'tA1',
+        description: 'dA1'
+      },
+      removeAlignment: _sinon.default.spy()
+    }, props);
+  }
+
+  it('includes an OutcomeDescription', function () {
+    var wrapper = (0, _enzyme.shallow)( /*#__PURE__*/_react.default.createElement(_index.default, makeProps()), {
+      disableLifecycleMethods: true
+    });
+    (0, _chai.expect)(wrapper.find('OutcomeDescription')).to.have.length(1);
+  });
+  it('includes a trash icon and delete button', function () {
+    var wrapper = (0, _enzyme.shallow)( /*#__PURE__*/_react.default.createElement(_index.default, makeProps()), {
+      disableLifecycleMethods: true
+    });
+    (0, _chai.expect)(wrapper.find('IconTrashLine')).to.have.length(1);
+    (0, _chai.expect)(wrapper.find('IconButton')).to.have.length(1);
+  });
+  it('does not include a trash icon and delete button when readOnly is true', function () {
+    var wrapper = (0, _enzyme.shallow)( /*#__PURE__*/_react.default.createElement(_index.default, makeProps({
+      readOnly: true
+    })), {
+      disableLifecycleMethods: true
+    });
+    (0, _chai.expect)(wrapper.find('IconTrashLine')).to.have.length(0);
+    (0, _chai.expect)(wrapper.find('IconButton')).to.have.length(0);
+  });
+  it('calls removeAlignment when the trash icon is clicked', function () {
+    var props = makeProps();
+    var wrapper = (0, _enzyme.shallow)( /*#__PURE__*/_react.default.createElement(_index.default, props), {
+      disableLifecycleMethods: true
+    });
+    wrapper.find('IconButton').simulate('click');
+    (0, _chai.expect)(props.removeAlignment.calledOnce).to.be.true;
+  });
+  it('meets a11y standards', function () {
+    return (0, _checkA11y.default)( /*#__PURE__*/_react.default.createElement(_index.default, makeProps()));
+  });
+});

package/lib/components/AlignmentButton/AlignmentItem/index.js

@@ -0,0 +1,115 @@
+"use strict";
+
+var _interopRequireDefault = require("@babel/runtime/helpers/interopRequireDefault").default;
+
+Object.defineProperty(exports, "__esModule", {
+  value: true
+});
+exports.default = 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 _formatMessage = _interopRequireDefault(require("format-message"));
+
+var _uiButtons = require("@instructure/ui-buttons");
+
+var _uiText = require("@instructure/ui-text");
+
+var _uiIcons = require("@instructure/ui-icons");
+
+var _uiThemeable = require("@instructure/ui-themeable");
+
+var _index = _interopRequireDefault(require("../../OutcomeDescription/index.js"));
+
+var _shapes = require("../../../store/shapes.js");
+
+var _theme = _interopRequireDefault(require("../../theme.js"));
+
+var _dec, _class, _class2, _temp;
+
+var styles = {
+  componentId: 'fztAm',
+  template: function template(theme) {
+    return "\n\n.outcomes-ui__AlignmentItem--deleteButton {\n  flex: 0 0 1rem;\n}\n\n.outcomes-ui__AlignmentItem--outcomeTitle {\n  display: flex;\n  justify-content: space-between;\n  align-items: center;\n}\n";
+  },
+  'deleteButton': 'outcomes-ui__AlignmentItem--deleteButton',
+  'outcomeTitle': 'outcomes-ui__AlignmentItem--outcomeTitle'
+};
+var AlignmentItem = (_dec = (0, _uiThemeable.themeable)(_theme.default, styles), _dec(_class = (_temp = _class2 = /*#__PURE__*/function (_React$Component) {
+  (0, _inherits2.default)(AlignmentItem, _React$Component);
+
+  var _super = (0, _createSuper2.default)(AlignmentItem);
+
+  function AlignmentItem() {
+    (0, _classCallCheck2.default)(this, AlignmentItem);
+    return _super.apply(this, arguments);
+  }
+
+  (0, _createClass2.default)(AlignmentItem, [{
+    key: "focus",
+    value: function focus() {
+      this.focusLink.focus();
+    }
+  }, {
+    key: "renderDeleteButton",
+    value: function renderDeleteButton() {
+      var _this = this;
+
+      var _this$props = this.props,
+          outcome = _this$props.outcome,
+          removeAlignment = _this$props.removeAlignment,
+          readOnly = _this$props.readOnly;
+
+      if (!readOnly) {
+        return /*#__PURE__*/_react.default.createElement("span", {
+          className: styles.deleteButton,
+          "data-automation": "outcomeAlignmentItem__delete"
+        }, /*#__PURE__*/_react.default.createElement(_uiButtons.IconButton, {
+          withBackground: false,
+          withBorder: false,
+          screenReaderLabel: (0, _formatMessage.default)("Remove ".concat(outcome.title)),
+          elementRef: function elementRef(link) {
+            _this.focusLink = link;
+          } // eslint-disable-line immutable/no-mutation
+          ,
+          onClick: removeAlignment
+        }, /*#__PURE__*/_react.default.createElement(_uiIcons.IconTrashLine, null)));
+      }
+    }
+  }, {
+    key: "render",
+    value: function render() {
+      var outcome = this.props.outcome;
+      return /*#__PURE__*/_react.default.createElement(_react.default.Fragment, null, /*#__PURE__*/_react.default.createElement(_uiText.Text, {
+        size: "small"
+      }, outcome.label), /*#__PURE__*/_react.default.createElement("div", {
+        className: styles.outcomeTitle,
+        "data-automation": "outcomeAlignmentItem__title"
+      }, /*#__PURE__*/_react.default.createElement(_uiText.Text, {
+        weight: "bold",
+        size: "small"
+      }, outcome.title), this.renderDeleteButton()), /*#__PURE__*/_react.default.createElement(_index.default, {
+        description: outcome.description
+      }));
+    }
+  }]);
+  AlignmentItem.displayName = "AlignmentItem";
+  return AlignmentItem;
+}(_react.default.Component), _class2.propTypes = {
+  outcome: _shapes.outcomeShape.isRequired,
+  removeAlignment: _propTypes.default.func.isRequired,
+  readOnly: _propTypes.default.bool.isRequired
+}, _class2.defaultProps = {
+  readOnly: false
+}, _temp)) || _class);
+exports.default = AlignmentItem;

package/lib/components/AlignmentButton/AlignmentItem/styles.css

@@ -0,0 +1,9 @@
+.deleteButton {
+  flex: 0 0 1rem;
+}
+
+.outcomeTitle {
+  display: flex;
+  justify-content: space-between;
+  align-items: center;
+}

package/lib/components/AlignmentButton/__tests__/index.test.js

@@ -49,20 +49,20 @@ describe('AlignmentButton', function () {
     var wrapper = (0, _enzyme.shallow)( /*#__PURE__*/_react.default.createElement(_index.default, makeProps()), {
       disableLifecycleMethods: true
     });
-    (0, _chai.expect)(wrapper.find('Button[data-automation="alignmentButton__button"]')).to.have.length(1);
+    (0, _chai.expect)(wrapper.find('Button')).to.have.length(1);
     (0, _chai.expect)(wrapper.find('AccessibleContent')).to.have.length(1);
   });
-  it('does not render an alignment button if canManageOutcomes is false', function () {
+  it('does not render an alignment button if readOnly is true', function () {
     var wrapper = (0, _enzyme.shallow)( /*#__PURE__*/_react.default.createElement(_index.default, makeProps({
-      canManageOutcomes: false
+      readOnly: true
     })), {
       disableLifecycleMethods: true
     });
-    (0, _chai.expect)(wrapper.find('Button[data-automation="alignmentButton__button"]')).to.have.length(0);
+    (0, _chai.expect)(wrapper.find('Button')).to.have.length(0);
   });
-  it('does not render header if canManageOutcomes is false and no outcomes are aligned', function () {
+  it('does not render header if readOnly is true and no outcomes are aligned', function () {
     var wrapper = (0, _enzyme.shallow)( /*#__PURE__*/_react.default.createElement(_index.default, makeProps({
-      canManageOutcomes: false,
+      readOnly: true,
       alignedOutcomes: []
     })), {
       disableLifecycleMethods: true
@@ -71,45 +71,16 @@ describe('AlignmentButton', function () {
     (0, _chai.expect)(wrapper.find('IconOutcomesLine')).to.have.length(0);
     (0, _chai.expect)(wrapper.find('AlignmentCount')).to.have.length(0);
   });
-  it('disables the expansion toggle button if no outcomes are aligned', function () {
-    var wrapper = (0, _enzyme.shallow)( /*#__PURE__*/_react.default.createElement(_index.default, makeProps({
-      alignedOutcomes: []
-    })), {
-      disableLifecycleMethods: true
-    });
-    var buttonStyle = wrapper.find('IconButton[data-automation="alignmentButton__collapseButton"]').props('style');
-    (0, _chai.expect)(buttonStyle.interaction).to.equal('disabled');
-  });
-  it('renders the alignment list collapsed by default', function () {
-    var wrapper = (0, _enzyme.mount)( /*#__PURE__*/_react.default.createElement(_index.default, makeProps()));
-    (0, _chai.expect)(wrapper.find('AlignmentItem')).to.have.length(0);
-  });
-  it('expansion toggle click is correctly handled', function () {
-    var wrapper = (0, _enzyme.mount)( /*#__PURE__*/_react.default.createElement(_index.default, makeProps()));
-    wrapper.find('IconButton[data-automation="alignmentButton__collapseButton"]').simulate('click');
-    (0, _chai.expect)(wrapper.find('AlignmentItem')).to.have.length(3);
-    (0, _chai.expect)(wrapper.find('ScreenReaderContent').at(0).text()).to.eq('Collapse the list of aligned Outcomes');
-    (0, _chai.expect)(wrapper.find('IconArrowOpenDownLine')).to.have.length(1);
-  });
-  it('collapse toggle button click is correctly handled', function () {
-    var wrapper = (0, _enzyme.mount)( /*#__PURE__*/_react.default.createElement(_index.default, makeProps()));
-    wrapper.find('IconButton[data-automation="alignmentButton__collapseButton"]').simulate('click');
-    wrapper.find('IconButton[data-automation="alignmentButton__collapseButton"]').simulate('click');
-    (0, _chai.expect)(wrapper.find('AlignmentItem')).to.have.length(0);
-    (0, _chai.expect)(wrapper.find('ScreenReaderContent').at(0).text()).to.eq('Expand the list of aligned Outcomes');
-    (0, _chai.expect)(wrapper.find('IconArrowOpenEndLine')).to.have.length(1);
-  });
   it('calls openOutcomePicker when the button is pressed', function () {
     var props = makeProps();
     var wrapper = (0, _enzyme.shallow)( /*#__PURE__*/_react.default.createElement(_index.default, props), {
       disableLifecycleMethods: true
     });
-    wrapper.find('Button[data-automation="alignmentButton__button"]').simulate('click');
+    wrapper.find('Button').simulate('click');
     (0, _chai.expect)(props.openOutcomePicker.calledOnce).to.be.true;
   });
   it('renders AlignmentItems for each aligned outcome', function () {
     var wrapper = (0, _enzyme.mount)( /*#__PURE__*/_react.default.createElement(_index.default, makeProps()));
-    wrapper.find('IconButton[data-automation="alignmentButton__collapseButton"]').simulate('click');
     (0, _chai.expect)(wrapper.find('AlignmentItem')).to.have.length(3);
   });
   it('renders an AlignmentCount object', function () {
@@ -123,7 +94,6 @@ describe('AlignmentButton', function () {
     it('calls the removeAlignment action with shouldUpdateArtifact equal to true', function () {
       var props = makeProps();
       var wrapper = (0, _enzyme.mount)( /*#__PURE__*/_react.default.createElement(_index.default, props));
-      wrapper.find('IconButton[data-automation="alignmentButton__collapseButton"]').simulate('click');
       var first = wrapper.find('AlignmentItem').at(0);
       var remove = first.prop('removeAlignment');
       var outcome = first.prop('outcome');
@@ -132,19 +102,27 @@ describe('AlignmentButton', function () {
     });
     it('focuses on the previous alignment when the second alignment deleted', function () {
       var wrapper = (0, _enzyme.mount)( /*#__PURE__*/_react.default.createElement(_index.default, makeProps()));
-      wrapper.find('IconButton[data-automation="alignmentButton__collapseButton"]').simulate('click');
+      var first = wrapper.find('AlignmentItem').at(0);
       var next = wrapper.find('AlignmentItem').at(1);
+
+      var focus = _sinon.default.spy(first.instance(), 'focus');
+
       var remove = next.prop('removeAlignment');
       remove();
-      (0, _chai.expect)(wrapper.state().focusedItem).to.eq(0);
+      (0, _chai.expect)(focus.calledOnce).to.be.true;
+      (0, _chai.expect)(focus.calledWith()).to.be.true;
     });
     it('focuses on the next alignment when first alignment deleted', function () {
       var wrapper = (0, _enzyme.mount)( /*#__PURE__*/_react.default.createElement(_index.default, makeProps()));
-      wrapper.find('IconButton[data-automation="alignmentButton__collapseButton"]').simulate('click');
       var first = wrapper.find('AlignmentItem').at(0);
+      var next = wrapper.find('AlignmentItem').at(1);
       var remove = first.prop('removeAlignment');
+
+      var focus = _sinon.default.spy(next.instance(), 'focus');
+
       remove();
-      (0, _chai.expect)(wrapper.state().focusedItem).to.eq(1);
+      (0, _chai.expect)(focus.calledOnce).to.be.true;
+      (0, _chai.expect)(focus.calledWith()).to.be.true;
     });
   });
   describe('componentDidUpdate', function () {
@@ -157,14 +135,14 @@ describe('AlignmentButton', function () {
         }]
       };
       var wrapper = (0, _enzyme.mount)( /*#__PURE__*/_react.default.createElement(_index.default, makeProps(outcomes)));
-      var trigger = wrapper.find('Button[data-automation="alignmentButton__button"]').last();
+      var trigger = wrapper.find('button').last();
 
       var focus = _sinon.default.spy(trigger.instance(), 'focus');
 
       wrapper.setProps({
         alignedOutcomes: []
       }, function () {
-        (0, _chai.expect)(wrapper.find('Button[data-automation="alignmentButton__button"]')).to.have.length(1);
+        (0, _chai.expect)(wrapper.find('button')).to.have.length(1);
         (0, _chai.expect)(focus.calledOnce).to.be.true;
         (0, _chai.expect)(focus.calledWith()).to.be.true;
         done();

package/lib/components/AlignmentButton/index.js

@@ -35,7 +35,7 @@ var _uiThemeable = require("@instructure/ui-themeable");
 
 var _index = _interopRequireDefault(require("../OutcomePickerModal/index.js"));
 
-var _index2 = _interopRequireDefault(require("../AlignmentItem/index.js"));
+var _index2 = _interopRequireDefault(require("./AlignmentItem/index.js"));
 
 var _index3 = _interopRequireDefault(require("../AlignmentCount/index.js"));
 
@@ -59,61 +59,31 @@ var AlignmentButton = (_dec = (0, _uiThemeable.themeable)(_theme.default, styles
 
   var _super = (0, _createSuper2.default)(AlignmentButton);
 
-  function AlignmentButton(props) {
+  function AlignmentButton() {
     var _this;
 
     (0, _classCallCheck2.default)(this, AlignmentButton);
-    _this = _super.call(this, props);
-
-    _this.toggleAlignmentList = function () {
-      _this.setState(function (prevState) {
-        return {
-          renderCollapsed: !prevState.renderCollapsed
-        };
-      });
-    };
+
+    for (var _len = arguments.length, args = new Array(_len), _key = 0; _key < _len; _key++) {
+      args[_key] = arguments[_key];
+    }
+
+    _this = _super.call.apply(_super, [this].concat(args));
 
     _this.renderHeader = function () {
       var _this$props = _this.props,
-          canManageOutcomes = _this$props.canManageOutcomes,
+          readOnly = _this$props.readOnly,
           alignedOutcomes = _this$props.alignedOutcomes;
-      var renderCollapsed = _this.state.renderCollapsed;
-      var enableToggleAction = alignedOutcomes.length > 0;
-
-      if (!enableToggleAction) {
-        _this.setState({
-          renderCollapsed: true
-        });
-      }
 
-      if (canManageOutcomes || alignedOutcomes.length) {
+      if (!readOnly || alignedOutcomes.length) {
         return /*#__PURE__*/_react.default.createElement("div", {
           className: styles.line,
-          "data-automation": "outcomeLabel__alignedOutcomes",
-          style: {
-            'align-items': 'center'
-          }
+          "data-automation": "outcomeLabel__alignedOutcomes"
         }, /*#__PURE__*/_react.default.createElement(_uiText.Text, {
           size: "medium"
         }, /*#__PURE__*/_react.default.createElement("div", {
           className: styles.spacing
-        }, /*#__PURE__*/_react.default.createElement("span", {
-          style: {
-            'padding-right': '0.5em'
-          }
-        }, /*#__PURE__*/_react.default.createElement(_uiButtons.IconButton, {
-          size: "small",
-          screenReaderLabel: renderCollapsed ? (0, _formatMessage.default)('Expand the list of aligned Outcomes') : (0, _formatMessage.default)('Collapse the list of aligned Outcomes'),
-          withBackground: false,
-          withBorder: false,
-          interaction: enableToggleAction ? 'enabled' : 'disabled',
-          onClick: _this.toggleAlignmentList,
-          "data-automation": "alignmentButton__collapseButton"
-        }, renderCollapsed ? /*#__PURE__*/_react.default.createElement(_uiIcons.IconArrowOpenEndLine, {
-          "data-testid": "icon-arrow-right"
-        }) : /*#__PURE__*/_react.default.createElement(_uiIcons.IconArrowOpenDownLine, {
-          "data-testid": "icon-arrow-down"
-        }))), /*#__PURE__*/_react.default.createElement(_uiIcons.IconOutcomesLine, null))), /*#__PURE__*/_react.default.createElement(_uiText.Text, {
+        }, /*#__PURE__*/_react.default.createElement(_uiIcons.IconOutcomesLine, null))), /*#__PURE__*/_react.default.createElement(_uiText.Text, {
           size: "medium"
         }, /*#__PURE__*/_react.default.createElement("div", {
           className: styles.spacing
@@ -124,33 +94,28 @@ var AlignmentButton = (_dec = (0, _uiThemeable.themeable)(_theme.default, styles
     };
 
     _this.renderAlignmentList = function () {
-      if (_this.state.renderCollapsed) {
-        return;
-      }
-
       var _this$props2 = _this.props,
           alignedOutcomes = _this$props2.alignedOutcomes,
-          canManageOutcomes = _this$props2.canManageOutcomes;
+          readOnly = _this$props2.readOnly;
       return /*#__PURE__*/_react.default.createElement(_uiList.List, {
         isUnstyled: true,
         margin: "small 0",
         delimiter: "solid"
-      }, alignedOutcomes.length > 0 && /*#__PURE__*/_react.default.createElement(_uiList.List.Item, {
-        key: "delimiter-0"
-      }), alignedOutcomes.map(function (outcome, index) {
+      }, alignedOutcomes.map(function (outcome, index) {
         return /*#__PURE__*/_react.default.createElement(_uiList.List.Item, {
-          padding: "0 small 0 medium",
+          margin: "small 0",
           key: outcome.id
         }, /*#__PURE__*/_react.default.createElement(_index2.default, {
           removeAlignment: function removeAlignment() {
             return _this.handleRemoveAlignment(outcome, index);
           },
+          ref: function ref(o) {
+            _this["position".concat(index)] = o;
+          } // eslint-disable-line immutable/no-mutation
+          ,
           outcome: outcome,
-          canManageOutcomes: canManageOutcomes,
-          shouldFocus: index === _this.state.focusedItem
+          readOnly: readOnly
         }));
-      }), alignedOutcomes.length > 0 && /*#__PURE__*/_react.default.createElement(_uiList.List.Item, {
-        key: "delimiter-1"
       }));
     };
 
@@ -172,9 +137,9 @@ var AlignmentButton = (_dec = (0, _uiThemeable.themeable)(_theme.default, styles
     _this.renderButton = function () {
       var _this$props4 = _this.props,
           openOutcomePicker = _this$props4.openOutcomePicker,
-          canManageOutcomes = _this$props4.canManageOutcomes;
+          readOnly = _this$props4.readOnly;
 
-      if (canManageOutcomes) {
+      if (!readOnly) {
         return /*#__PURE__*/_react.default.createElement("div", {
           className: styles.button
         }, /*#__PURE__*/_react.default.createElement(_uiButtons.Button, {
@@ -191,10 +156,6 @@ var AlignmentButton = (_dec = (0, _uiThemeable.themeable)(_theme.default, styles
       }
     };
 
-    _this.state = {
-      renderCollapsed: true,
-      focusedItem: null
-    };
     return _this;
   }
 
@@ -220,19 +181,15 @@ var AlignmentButton = (_dec = (0, _uiThemeable.themeable)(_theme.default, styles
       this.props.screenreaderNotification((0, _formatMessage.default)('{label} alignment removed', {
         label: removedOutcome.label
       }));
-      var priorIndex = index - 1;
+      var priorListItem = this["position".concat(index - 1)];
 
-      if (priorIndex >= 0) {
-        this.setState({
-          focusedItem: priorIndex
-        });
+      if (priorListItem) {
+        priorListItem.focus();
       } else if (alignedOutcomes.length > 0) {
-        var nextIndex = index + 1;
+        var nextListItem = this["position".concat(index + 1)];
 
-        if (nextIndex < alignedOutcomes.length) {
-          this.setState({
-            focusedItem: nextIndex
-          });
+        if (nextListItem) {
+          nextListItem.focus();
         }
       }
     }
@@ -254,13 +211,13 @@ var AlignmentButton = (_dec = (0, _uiThemeable.themeable)(_theme.default, styles
   onUpdate: _propTypes.default.func,
   screenreaderNotification: _propTypes.default.func,
   liveRegion: _index.default.propTypes.liveRegion,
-  canManageOutcomes: _propTypes.default.bool.isRequired
+  readOnly: _propTypes.default.bool.isRequired
 }, _class2.defaultProps = {
   alignedOutcomes: [],
   pickerProps: {},
   onUpdate: null,
   screenreaderNotification: null,
   liveRegion: null,
-  canManageOutcomes: true
+  readOnly: false
 }, _temp)) || _class);
 exports.default = AlignmentButton;