@instructure/outcomes-ui 2.1.0 → 2.1.3

package/es/translated/vi/components/AlignmentList/index.js

@@ -0,0 +1,372 @@
+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";
+
+var _dec, _class, _class2, _temp;
+
+import React from 'react';
+import PropTypes from 'prop-types';
+import ReactDOM from 'react-dom';
+import { Billboard } from '@instructure/ui-billboard';
+import { Button } from '@instructure/ui-buttons';
+import { IconPlusLine } from '@instructure/ui-icons';
+import { themeable } from '@instructure/ui-themeable';
+import Alignment from "../Alignment/index.js";
+import theme from "../theme.js";
+var styles = {
+  componentId: 'sJofx',
+  template: function template(theme) {
+    return "\n\n.outcomes-ui__AlignmentList--header {\n  background-color: #BBBBBB;\n  border: solid 1px #999999;\n  border-radius: 5px;\n  padding: 10px 20px;\n}\n\n.outcomes-ui__AlignmentList--list {\n  list-style: none;\n  padding-left: 0;\n  border: solid 1px #BBBBBB;\n  border-radius: 5px;\n}\n\n.outcomes-ui__AlignmentList--list > li {\n  padding: 10px 20px;\n}\n\n.outcomes-ui__AlignmentList--list > li + li {\n  border-top: dashed 1px #BBBBBB;\n}\n\n.outcomes-ui__AlignmentList--addOutcome {\n  text-align: center;\n}\n\n[dir=\"ltr\"] .outcomes-ui__AlignmentList--addOutcome {\n  text-align: center;\n}\n\n[dir=\"rtl\"] .outcomes-ui__AlignmentList--addOutcome {\n  text-align: center;\n}\n\n.outcomes-ui__AlignmentList--addOutcome button {\n  padding: 0;\n}\n";
+  },
+  'header': 'outcomes-ui__AlignmentList--header',
+  'list': 'outcomes-ui__AlignmentList--list',
+  'addOutcome': 'outcomes-ui__AlignmentList--addOutcome'
+};
+
+var Clipboard = function Clipboard(props) {
+  return /*#__PURE__*/React.createElement("svg", Object.assign({
+    width: "70",
+    height: "96",
+    viewBox: "0 0 70 96",
+    xmlns: "http://www.w3.org/2000/svg",
+    xmlnsXlink: "http://www.w3.org/1999/xlink"
+  }, props), /*#__PURE__*/React.createElement("title", null, "ClipBoard"), /*#__PURE__*/React.createElement("defs", null, /*#__PURE__*/React.createElement("path", {
+    id: "a",
+    d: "M0 96h70V0H0z"
+  })), /*#__PURE__*/React.createElement("g", {
+    fill: "none",
+    fillRule: "evenodd"
+  }, /*#__PURE__*/React.createElement("path", {
+    d: "M65 95H5a4 4 0 0 1-4-4V22a4 4 0 0 1 4-4h60a4 4 0 0 1 4 4v69a4 4 0 0 1-4 4z",
+    fill: "#F7F8F7"
+  }), /*#__PURE__*/React.createElement("path", {
+    d: "M65 95H5a4 4 0 0 1-4-4V22a4 4 0 0 1 4-4h60a4 4 0 0 1 4 4v69a4 4 0 0 1-4 4z",
+    stroke: "#3F5463",
+    strokeWidth: "2"
+  }), /*#__PURE__*/React.createElement("mask", {
+    id: "b",
+    fill: "#fff"
+  }, /*#__PURE__*/React.createElement("use", {
+    xlinkHref: "#a"
+  })), /*#__PURE__*/React.createElement("path", {
+    fill: "#FFF",
+    mask: "url(#b)",
+    d: "M9 46h13V33H9z"
+  }), /*#__PURE__*/React.createElement("path", {
+    stroke: "#3F5463",
+    strokeWidth: "2",
+    mask: "url(#b)",
+    d: "M9 46h13V33H9z"
+  }), /*#__PURE__*/React.createElement("path", {
+    fill: "#3F5463",
+    mask: "url(#b)",
+    d: "M28 36h23v-3H28zM28 46h14v-3H28zM28 41h31v-3H28z"
+  }), /*#__PURE__*/React.createElement("path", {
+    stroke: "#00B517",
+    strokeWidth: "2",
+    mask: "url(#b)",
+    d: "M12 39l3 2.655 4.398-5.265"
+  }), /*#__PURE__*/React.createElement("path", {
+    fill: "#FFF",
+    mask: "url(#b)",
+    d: "M9 67h13V54H9z"
+  }), /*#__PURE__*/React.createElement("path", {
+    stroke: "#3F5463",
+    strokeWidth: "2",
+    mask: "url(#b)",
+    d: "M9 67h13V54H9z"
+  }), /*#__PURE__*/React.createElement("path", {
+    fill: "#3F5463",
+    mask: "url(#b)",
+    d: "M28 57h23v-3H28zM28 77h23v-3H28zM28 67h14v-3H28zM28 62h31v-3H28z"
+  }), /*#__PURE__*/React.createElement("path", {
+    stroke: "#00B517",
+    strokeWidth: "2",
+    mask: "url(#b)",
+    d: "M12 60l3 2.655 4.398-5.265"
+  }), /*#__PURE__*/React.createElement("path", {
+    fill: "#FFF",
+    mask: "url(#b)",
+    d: "M9 87h13V74H9z"
+  }), /*#__PURE__*/React.createElement("path", {
+    stroke: "#3F5463",
+    strokeWidth: "2",
+    mask: "url(#b)",
+    d: "M9 87h13V74H9z"
+  }), /*#__PURE__*/React.createElement("path", {
+    fill: "#3F5463",
+    mask: "url(#b)",
+    d: "M28 87h14v-3H28zM28 82h31v-3H28z"
+  }), /*#__PURE__*/React.createElement("path", {
+    stroke: "#00B517",
+    strokeWidth: "2",
+    mask: "url(#b)",
+    d: "M12 80l3 2.655 4.398-5.265"
+  }), /*#__PURE__*/React.createElement("path", {
+    d: "M55.874 25H14.126a2 2 0 0 1-1.816-2.838L17 12h36l4.69 10.162A2 2 0 0 1 55.874 25",
+    fill: "#C0C6CB",
+    mask: "url(#b)"
+  }), /*#__PURE__*/React.createElement("path", {
+    d: "M55.874 25H14.126a2 2 0 0 1-1.816-2.838L17 12h36l4.69 10.162A2 2 0 0 1 55.874 25z",
+    stroke: "#3F5463",
+    strokeWidth: "2",
+    mask: "url(#b)"
+  }), /*#__PURE__*/React.createElement("path", {
+    d: "M35 1C24 1 24 12 24 12h22S44.667 1 35 1",
+    fill: "#E5E8EA",
+    mask: "url(#b)"
+  }), /*#__PURE__*/React.createElement("path", {
+    d: "M35 1C24 1 24 12 24 12h22S44.667 1 35 1z",
+    stroke: "#3F5463",
+    strokeWidth: "2",
+    mask: "url(#b)"
+  }), /*#__PURE__*/React.createElement("path", {
+    d: "M36.667 6.551a2 2 0 1 1-4 .002 2 2 0 0 1 4-.002",
+    fill: "#3F5463",
+    mask: "url(#b)"
+  })));
+};
+
+import OutcomePickerModal from "../OutcomePickerModal/index.js";
+var AlignmentList = (_dec = themeable(theme, styles), _dec(_class = (_temp = _class2 = /*#__PURE__*/function (_React$Component) {
+  _inherits(AlignmentList, _React$Component);
+
+  var _super = _createSuper(AlignmentList);
+
+  function AlignmentList() {
+    var _this;
+
+    _classCallCheck(this, AlignmentList);
+
+    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.handleModalOpen = function () {
+      _this.props.openOutcomePicker();
+    };
+
+    _this.triggerButton = function () {
+      // eslint-disable-next-line react/no-find-dom-node
+      var r = ReactDOM.findDOMNode(_this.triggerRoot);
+      return r.type === 'button' ? r : r.children[0];
+    };
+
+    return _this;
+  }
+
+  _createClass(AlignmentList, [{
+    key: "handleRemoveAlignment",
+    value: function handleRemoveAlignment(outcome, index) {
+      var _this$props = this.props,
+          removeAlignment = _this$props.removeAlignment,
+          alignedOutcomes = _this$props.alignedOutcomes,
+          onUpdate = _this$props.onUpdate;
+      var priorListItem = this["position".concat(index - 1)];
+      removeAlignment(outcome.id, onUpdate);
+      this.props.screenreaderNotification("\u0110\xE3 g\u1EE1 " + outcome.label + " m\u1EE5c c\u0103n ch\u1EC9nh");
+
+      if (priorListItem) {
+        priorListItem.focus();
+      } else if (alignedOutcomes.length > 0) {
+        // TBD - need to do something better here if first item is
+        // removed, just doing this for now so there's consistent behavior
+        var nextListItem = this["position".concat(index + 1)];
+
+        if (nextListItem) {
+          nextListItem.focus();
+        }
+      }
+    }
+  }, {
+    key: "componentDidUpdate",
+    value: function componentDidUpdate(oldProps) {
+      var alignedOutcomes = this.props.alignedOutcomes;
+
+      if (oldProps.alignedOutcomes.length && !alignedOutcomes.length) {
+        this.triggerButton().focus();
+      }
+    }
+  }, {
+    key: "renderAddOutcomeButton",
+    value: function renderAddOutcomeButton() {
+      var _this2 = this;
+
+      return /*#__PURE__*/React.createElement("li", {
+        className: styles.addOutcome
+      }, /*#__PURE__*/React.createElement(Button, {
+        ref: function ref(d) {
+          _this2.triggerRoot = d;
+        } // eslint-disable-line immutable/no-mutation
+        ,
+        variant: "circle-primary",
+        size: "small",
+        onClick: function onClick() {
+          return _this2.handleModalOpen();
+        }
+      }, /*#__PURE__*/React.createElement(IconPlusLine, {
+        title: "C\u0103n ch\u1EC9nh k\u1EBFt qu\u1EA3 m\u1EDBi"
+      })));
+    }
+  }, {
+    key: "renderList",
+    value: function renderList() {
+      var _this3 = this;
+
+      var _this$props2 = this.props,
+          alignedOutcomes = _this$props2.alignedOutcomes,
+          _viewAlignment = _this$props2.viewAlignment,
+          closeAlignment = _this$props2.closeAlignment,
+          isOpen = _this$props2.isOpen,
+          artifactTypeName = _this$props2.artifactTypeName,
+          displayMasteryDescription = _this$props2.displayMasteryDescription,
+          displayMasteryPercentText = _this$props2.displayMasteryPercentText,
+          readOnly = _this$props2.readOnly,
+          scope = _this$props2.scope;
+      return /*#__PURE__*/React.createElement("div", null, /*#__PURE__*/React.createElement("ul", {
+        className: styles.list
+      }, alignedOutcomes.map(function (outcome, index) {
+        return /*#__PURE__*/React.createElement(Alignment, {
+          key: outcome.id,
+          ref: function ref(o) {
+            _this3["position".concat(index)] = o;
+          } // eslint-disable-line immutable/no-mutation
+          ,
+          removeAlignment: function removeAlignment() {
+            return _this3.handleRemoveAlignment(outcome, index);
+          },
+          viewAlignment: function viewAlignment() {
+            return _viewAlignment(outcome.id);
+          },
+          closeAlignment: closeAlignment,
+          outcome: outcome,
+          isOpen: isOpen(outcome.id),
+          artifactTypeName: artifactTypeName,
+          displayMasteryDescription: displayMasteryDescription,
+          displayMasteryPercentText: displayMasteryPercentText,
+          readOnly: readOnly,
+          scope: scope
+        });
+      }), !readOnly && this.renderAddOutcomeButton()));
+    }
+  }, {
+    key: "renderEmpty",
+    value: function renderEmpty() {
+      var _this4 = this;
+
+      return !this.props.readOnly && /*#__PURE__*/React.createElement(Billboard, {
+        ref: function ref(d) {
+          _this4.triggerRoot = d;
+        } // eslint-disable-line immutable/no-mutation
+        ,
+        heading: this.props.emptySetHeading,
+        message: "Duy\u1EC7t xem v\xE0 th\xEAm k\u1EBFt qu\u1EA3 b\u1EB1ng c\xE1ch nh\u1EA5p v\xE0o \u0111\xE2y.",
+        headingAs: "h3",
+        headingLevel: "h3",
+        size: "small",
+        hero: /*#__PURE__*/React.createElement(Clipboard, null),
+        type: "button",
+        onClick: this.handleModalOpen
+      });
+    }
+  }, {
+    key: "renderBody",
+    value: function renderBody() {
+      var alignedOutcomes = this.props.alignedOutcomes;
+
+      if (alignedOutcomes && alignedOutcomes.length > 0) {
+        return this.renderList();
+      } else {
+        return this.renderEmpty();
+      }
+    }
+  }, {
+    key: "renderModal",
+    value: function renderModal() {
+      var _this$props3 = this.props,
+          OutcomePickerModal = _this$props3.addModal,
+          pickerProps = _this$props3.pickerProps,
+          onUpdate = _this$props3.onUpdate,
+          onModalOpen = _this$props3.onModalOpen,
+          onModalClose = _this$props3.onModalClose,
+          scope = _this$props3.scope,
+          artifactTypeName = _this$props3.artifactTypeName,
+          displayMasteryDescription = _this$props3.displayMasteryDescription,
+          displayMasteryPercentText = _this$props3.displayMasteryPercentText,
+          screenreaderNotification = _this$props3.screenreaderNotification,
+          liveRegion = _this$props3.liveRegion,
+          mountNode = _this$props3.mountNode;
+      return /*#__PURE__*/React.createElement(OutcomePickerModal, Object.assign({
+        onModalClose: onModalClose,
+        onModalOpen: onModalOpen,
+        onUpdate: onUpdate,
+        trigger: this,
+        scope: scope,
+        artifactTypeName: artifactTypeName,
+        displayMasteryDescription: displayMasteryDescription,
+        displayMasteryPercentText: displayMasteryPercentText,
+        screenreaderNotification: screenreaderNotification,
+        liveRegion: liveRegion,
+        mountNode: mountNode
+      }, pickerProps));
+    }
+  }, {
+    key: "focus",
+    value: function focus() {
+      if (this.triggerRoot) {
+        this.triggerButton().focus();
+      }
+    }
+  }, {
+    key: "render",
+    value: function render() {
+      return /*#__PURE__*/React.createElement("div", null, this.renderBody(), this.renderModal());
+    }
+  }]);
+
+  AlignmentList.displayName = "AlignmentList";
+  return AlignmentList;
+}(React.Component), _class2.propTypes = {
+  addModal: PropTypes.func.isRequired,
+  pickerType: PropTypes.string,
+  pickerProps: PropTypes.object,
+  alignedOutcomes: PropTypes.arrayOf(PropTypes.shape({
+    id: PropTypes.string.isRequired,
+    label: PropTypes.string.isRequired,
+    title: PropTypes.string.isRequired
+  })).isRequired,
+  emptySetHeading: PropTypes.string.isRequired,
+  readOnly: PropTypes.bool,
+  removeAlignment: PropTypes.func.isRequired,
+  onUpdate: PropTypes.func,
+  viewAlignment: PropTypes.func.isRequired,
+  closeAlignment: PropTypes.func.isRequired,
+  isOpen: PropTypes.func.isRequired,
+  openOutcomePicker: PropTypes.func.isRequired,
+  onModalOpen: PropTypes.func,
+  onModalClose: PropTypes.func,
+  scope: PropTypes.string.isRequired,
+  artifactTypeName: PropTypes.string,
+  displayMasteryDescription: PropTypes.bool,
+  displayMasteryPercentText: PropTypes.bool,
+  screenreaderNotification: PropTypes.func,
+  liveRegion: OutcomePickerModal.propTypes.liveRegion,
+  mountNode: OutcomePickerModal.propTypes.mountNode
+}, _class2.defaultProps = {
+  pickerType: 'dialog',
+  pickerProps: {},
+  onUpdate: null,
+  onModalOpen: null,
+  onModalClose: null,
+  readOnly: false,
+  artifactTypeName: null,
+  displayMasteryDescription: false,
+  displayMasteryPercentText: false,
+  screenreaderNotification: null,
+  liveRegion: null,
+  mountNode: null
+}, _temp)) || _class);
+export default AlignmentList;

package/es/translated/vi/components/AlignmentList/index.stories.js

@@ -0,0 +1,49 @@
+import React from 'react';
+import { object, boolean, text } from '@storybook/addon-knobs';
+import { defaultOutcomes } from "../../../.storybook/constants.js";
+import AlignmentList from "./index.js";
+export default {
+  title: 'AlignmentList'
+};
+export var alignedOutcomes = function alignedOutcomes() {
+  return /*#__PURE__*/React.createElement(AlignmentList, {
+    alignedOutcomes: object('Outcomes', defaultOutcomes()),
+    emptySetHeading: "Align Institution outcomes to this question",
+    removeAlignment: function removeAlignment() {},
+    viewAlignment: function viewAlignment() {},
+    closeAlignment: function closeAlignment() {},
+    openOutcomePicker: function openOutcomePicker() {},
+    isOpen: function isOpen() {},
+    artifactTypeName: "Quiz",
+    displayMasteryDescription: true,
+    displayMasteryPercentText: true,
+    readOnly: boolean('Read Only', false),
+    scope: "",
+    addModal: function addModal() {
+      return null;
+    },
+    outcomePickerState: "closed",
+    pickerType: "dialog"
+  });
+};
+export var noAlignedOutcomes = function noAlignedOutcomes() {
+  return /*#__PURE__*/React.createElement(AlignmentList, {
+    alignedOutcomes: [],
+    emptySetHeading: text('Empty Message', 'Align Institution outcomes to this question'),
+    removeAlignment: function removeAlignment() {},
+    viewAlignment: function viewAlignment() {},
+    closeAlignment: function closeAlignment() {},
+    openOutcomePicker: function openOutcomePicker() {},
+    isOpen: function isOpen() {},
+    artifactTypeName: "Quiz",
+    displayMasteryDescription: true,
+    displayMasteryPercentText: true,
+    readOnly: boolean('Read Only', false),
+    scope: "",
+    addModal: function addModal() {
+      return null;
+    },
+    outcomePickerState: "closed",
+    pickerType: "dialog"
+  });
+};

package/es/translated/vi/components/AlignmentList/styles.css

@@ -0,0 +1,29 @@
+.header {
+  background-color: #BBBBBB;
+  border: solid 1px #999999;
+  border-radius: 5px;
+  padding: 10px 20px;
+}
+
+.list {
+  list-style: none;
+  padding-left: 0;
+  border: solid 1px #BBBBBB;
+  border-radius: 5px;
+}
+
+.list > li {
+  padding: 10px 20px;
+}
+
+.list > li + li {
+  border-top: dashed 1px #BBBBBB;
+}
+
+.addOutcome {
+  text-align: center;
+}
+
+.addOutcome button {
+  padding: 0;
+}

package/es/translated/vi/components/IfFeature.js

@@ -0,0 +1,57 @@
+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 { Component } from 'react';
+import PropTypes from 'prop-types';
+import { getFeatureFlags } from "../constants.js";
+
+var IfFeature = /*#__PURE__*/function (_Component) {
+  _inherits(IfFeature, _Component);
+
+  var _super = _createSuper(IfFeature);
+
+  function IfFeature() {
+    _classCallCheck(this, IfFeature);
+
+    return _super.apply(this, arguments);
+  }
+
+  _createClass(IfFeature, [{
+    key: "invalidFeature",
+    get: function get() {
+      return !getFeatureFlags().includes(this.props.name);
+    }
+  }, {
+    key: "isOn",
+    get: function get() {
+      return this.props.features.includes(this.props.name);
+    }
+  }, {
+    key: "render",
+    value: function render() {
+      if (this.invalidFeature) {
+        throw new Error("".concat(this.props.name, " not listed as a feature flag in constants.js!"));
+      }
+
+      if (!this.isOn) {
+        return null;
+      }
+
+      return this.props.children;
+    }
+  }]);
+
+  IfFeature.displayName = "IfFeature";
+  return IfFeature;
+}(Component);
+
+IfFeature.propTypes = {
+  children: PropTypes.node,
+  features: PropTypes.arrayOf(PropTypes.string).isRequired,
+  name: PropTypes.string.isRequired
+};
+IfFeature.defaultProps = {
+  children: null
+};
+export { IfFeature as default };

package/es/translated/vi/components/OutcomeCheckbox/__tests__/index.test.js

@@ -0,0 +1,110 @@
+import { expect } from 'chai';
+import React from 'react';
+import sinon from 'sinon';
+import { shallow, mount } from 'enzyme';
+import OutcomeCheckbox from "../index.js";
+import checkA11y from "../../../test/checkA11y.js";
+describe('OutcomeCheckbox', function () {
+  function makeProps() {
+    var props = arguments.length > 0 && arguments[0] !== void 0 ? arguments[0] : {};
+    return Object.assign({
+      outcome: {
+        id: '101',
+        label: 'XYZ',
+        title: 'The student will make cupcakes',
+        description: 'Hello there'
+      },
+      setFocusedOutcome: sinon.spy(),
+      isOutcomeSelected: sinon.spy(),
+      selectOutcomeIds: sinon.spy(),
+      deselectOutcomeIds: sinon.spy()
+    }, props);
+  }
+
+  it('renders a checkbox', function () {
+    var wrapper = shallow( /*#__PURE__*/React.createElement(OutcomeCheckbox, makeProps()), {
+      disableLifecycleMethods: true
+    });
+    expect(wrapper.find('Checkbox')).to.have.length(1);
+  });
+  it('renders outcome title in link', function () {
+    var props = makeProps();
+    var wrapper = mount( /*#__PURE__*/React.createElement(OutcomeCheckbox, props));
+    var link = wrapper.find('Link');
+    expect(link.text()).to.equal('The student will make cupcakes');
+  });
+  it('renders friendly description', function () {
+    var props = makeProps({
+      outcome: {
+        id: '101',
+        label: 'XYZ',
+        title: 'The student will make cupcakes',
+        description: 'Hello there',
+        friendly_description: 'This is the Friendly Description'
+      }
+    });
+    var wrapper = mount( /*#__PURE__*/React.createElement(OutcomeCheckbox, props));
+    expect(wrapper.text()).to.match(/This is the Friendly Description/);
+  });
+  it('renders an OutcomeDescription component', function () {
+    var props = makeProps();
+    var wrapper = mount( /*#__PURE__*/React.createElement(OutcomeCheckbox, props));
+    expect(wrapper.find('OutcomeDescription')).to.have.length(1);
+  });
+  it('will focus an outcome when the title is clicked', function () {
+    var props = makeProps();
+    var wrapper = mount( /*#__PURE__*/React.createElement(OutcomeCheckbox, props));
+    var click = wrapper.find('Link').prop('onClick');
+    var preventDefault = sinon.stub();
+    click({
+      preventDefault: preventDefault
+    });
+    expect(props.setFocusedOutcome.calledOnce).to.be.true;
+    expect(preventDefault.calledOnce).to.be.true;
+  });
+  it('selects the checkbox when isOutcomeSelected', function () {
+    var isOutcomeSelected = sinon.stub().withArgs(101).returns(false);
+    var props = makeProps({
+      isOutcomeSelected: isOutcomeSelected
+    });
+    var wrapper = shallow( /*#__PURE__*/React.createElement(OutcomeCheckbox, props), {
+      disableLifecycleMethods: true
+    });
+    expect(wrapper.find('Checkbox').prop('checked')).to.equal(false);
+  });
+  it('does not select the checkbox when not isOutcomeSelected', function () {
+    var isOutcomeSelected = sinon.stub().withArgs(101).returns(true);
+    var props = makeProps({
+      isOutcomeSelected: isOutcomeSelected
+    });
+    var wrapper = shallow( /*#__PURE__*/React.createElement(OutcomeCheckbox, props), {
+      disableLifecycleMethods: true
+    });
+    expect(wrapper.find('Checkbox').prop('checked')).to.equal(true);
+  });
+  it('calls selectOutcomeIds when unselected and user clicks', function () {
+    var isOutcomeSelected = sinon.stub().withArgs(101).returns(false);
+    var props = makeProps({
+      isOutcomeSelected: isOutcomeSelected
+    });
+    var wrapper = shallow( /*#__PURE__*/React.createElement(OutcomeCheckbox, props), {
+      disableLifecycleMethods: true
+    });
+    wrapper.find('Checkbox').simulate('change');
+    expect(props.selectOutcomeIds.calledWith([101]));
+  });
+  it('calls deselectOutcomeIds when selected and user clicks', function () {
+    var isOutcomeSelected = sinon.stub().withArgs(101).returns(true);
+    var props = makeProps({
+      isOutcomeSelected: isOutcomeSelected
+    });
+    var wrapper = shallow( /*#__PURE__*/React.createElement(OutcomeCheckbox, props), {
+      disableLifecycleMethods: true
+    });
+    wrapper.find('Checkbox').simulate('change');
+    expect(props.deselectOutcomeIds.calledWith([101]));
+  });
+  it('meets a11y standards', function () {
+    return checkA11y( /*#__PURE__*/React.createElement(OutcomeCheckbox, makeProps()));
+  });
+});