@instructure/outcomes-ui 2.1.9 → 3.0.0

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

@@ -2,6 +2,10 @@
 
 var _interopRequireDefault = require("@babel/runtime/helpers/interopRequireDefault").default;
 
+var _regenerator = _interopRequireDefault(require("@babel/runtime/regenerator"));
+
+var _asyncToGenerator2 = _interopRequireDefault(require("@babel/runtime/helpers/asyncToGenerator"));
+
 var _chai = require("chai");
 
 var _react = _interopRequireDefault(require("react"));
@@ -16,6 +20,12 @@ var _checkA11y = _interopRequireDefault(require("../../../test/checkA11y.js"));
 
 var _mockOutcomesData = require("../../../test/mockOutcomesData.js");
 
+var _uiButtons = require("@instructure/ui-buttons");
+
+var _index2 = _interopRequireDefault(require("../../AlignmentItem/index.js"));
+
+var _uiIcons = require("@instructure/ui-icons");
+
 describe('AlignmentWidget', function () {
   function makeProps() {
     var props = arguments.length > 0 && arguments[0] !== void 0 ? arguments[0] : {};
@@ -36,19 +46,20 @@ describe('AlignmentWidget', function () {
   }
 
   it('renders a button with a11y components', function () {
-    var wrapper = (0, _enzyme.shallow)( /*#__PURE__*/_react.default.createElement(_index.default, makeProps()), {
+    var wrapper = (0, _enzyme.mount)( /*#__PURE__*/_react.default.createElement(_index.default, makeProps()), {
       disableLifecycleMethods: true
     });
-    (0, _chai.expect)(wrapper.find('Button[data-automation="alignmentWidget__button"]')).to.have.length(1);
-    (0, _chai.expect)(wrapper.find('AccessibleContent')).to.have.length(1);
+    (0, _chai.expect)(wrapper.find(_uiButtons.Button)).to.have.length(1);
+    var matchingElement = wrapper.find('AccessibleContent[data-automation="alignmentWidget__AccessibleContent"]');
+    (0, _chai.expect)(matchingElement).to.have.length(1);
   });
   it('does not render an alignment button if canManageOutcomes is false', function () {
-    var wrapper = (0, _enzyme.shallow)( /*#__PURE__*/_react.default.createElement(_index.default, makeProps({
+    var wrapper = (0, _enzyme.mount)( /*#__PURE__*/_react.default.createElement(_index.default, makeProps({
       canManageOutcomes: false
     })), {
       disableLifecycleMethods: true
     });
-    (0, _chai.expect)(wrapper.find('Button[data-automation="alignmentWidget__button"]')).to.have.length(0);
+    (0, _chai.expect)(wrapper.find(_uiButtons.Button)).to.have.length(0);
   });
   it('does not render header if canManageOutcomes is false and no outcomes are aligned', function () {
     var wrapper = (0, _enzyme.shallow)( /*#__PURE__*/_react.default.createElement(_index.default, makeProps({
@@ -62,12 +73,13 @@ describe('AlignmentWidget', function () {
     (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({
+    var wrapper = (0, _enzyme.mount)( /*#__PURE__*/_react.default.createElement(_index.default, makeProps({
       alignedOutcomes: []
     })), {
       disableLifecycleMethods: true
-    });
-    var buttonStyle = wrapper.find('IconButton[data-automation="alignmentWidget__collapseButton"]').props('style');
+    }); // Enzyme finds two IconButton components because of the instui decorator on the component
+
+    var buttonStyle = wrapper.find('IconButton[data-automation="alignmentWidget__collapseButton"]').at(0).props('style');
     (0, _chai.expect)(buttonStyle.interaction).to.equal('disabled');
   });
   it('renders the alignment list collapsed by default', function () {
@@ -76,31 +88,43 @@ describe('AlignmentWidget', function () {
   });
   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="alignmentWidget__collapseButton"]').simulate('click');
-    (0, _chai.expect)(wrapper.find('AlignmentItem')).to.have.length(3);
+    wrapper.find(_uiButtons.IconButton).simulate('click');
+    (0, _chai.expect)(wrapper.find(_index2.default)).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="alignmentWidget__collapseButton"]').simulate('click');
-    wrapper.find('IconButton[data-automation="alignmentWidget__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);
+    (0, _chai.expect)(wrapper.find(_uiIcons.IconArrowOpenDownLine)).to.have.length(1);
   });
+  it('collapse toggle button click is correctly handled', /*#__PURE__*/(0, _asyncToGenerator2.default)( /*#__PURE__*/_regenerator.default.mark(function _callee() {
+    var wrapper;
+    return _regenerator.default.wrap(function _callee$(_context) {
+      while (1) {
+        switch (_context.prev = _context.next) {
+          case 0:
+            wrapper = (0, _enzyme.mount)( /*#__PURE__*/_react.default.createElement(_index.default, makeProps()));
+            wrapper.find("IconButton[data-automation='alignmentWidget__collapseButton']").last().simulate('click');
+            wrapper.find("IconButton[data-automation='alignmentWidget__collapseButton']").last().simulate('click');
+            (0, _chai.expect)(wrapper.find(_index2.default)).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(_uiIcons.IconArrowOpenEndLine)).to.have.length(1);
+
+          case 6:
+          case "end":
+            return _context.stop();
+        }
+      }
+    }, _callee);
+  })));
   it('calls openOutcomePicker when the button is pressed', function () {
     var props = makeProps();
-    var wrapper = (0, _enzyme.shallow)( /*#__PURE__*/_react.default.createElement(_index.default, props), {
+    var wrapper = (0, _enzyme.mount)( /*#__PURE__*/_react.default.createElement(_index.default, props), {
       disableLifecycleMethods: true
     });
-    wrapper.find('Button[data-automation="alignmentWidget__button"]').simulate('click');
+    wrapper.find(_uiButtons.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="alignmentWidget__collapseButton"]').simulate('click');
-    (0, _chai.expect)(wrapper.find('AlignmentItem')).to.have.length(3);
+    wrapper.find(_uiButtons.IconButton).simulate('click');
+    (0, _chai.expect)(wrapper.find(_index2.default)).to.have.length(3);
   });
   it('renders an AlignmentCount object', function () {
     var wrapper = (0, _enzyme.mount)( /*#__PURE__*/_react.default.createElement(_index.default, makeProps()));
@@ -113,8 +137,8 @@ describe('AlignmentWidget', 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="alignmentWidget__collapseButton"]').simulate('click');
-      var first = wrapper.find('AlignmentItem').at(0);
+      wrapper.find(_uiButtons.IconButton).simulate('click');
+      var first = wrapper.find(_index2.default).at(0);
       var remove = first.prop('removeAlignment');
       var outcome = first.prop('outcome');
       remove();
@@ -122,19 +146,21 @@ describe('AlignmentWidget', 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="alignmentWidget__collapseButton"]').simulate('click');
+      wrapper.find(_uiButtons.IconButton).simulate('click');
       var next = wrapper.find('AlignmentItem').at(1);
       var remove = next.prop('removeAlignment');
       remove();
-      (0, _chai.expect)(wrapper.state().focusedItem).to.eq(0);
+      wrapper.update();
+      (0, _chai.expect)(wrapper.find('AlignmentItem').at(0).prop('shouldFocus')).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="alignmentWidget__collapseButton"]').simulate('click');
+      wrapper.find('IconButton[data-automation="alignmentWidget__collapseButton"]').at(0).simulate('click');
       var first = wrapper.find('AlignmentItem').at(0);
       var remove = first.prop('removeAlignment');
       remove();
-      (0, _chai.expect)(wrapper.state().focusedItem).to.eq(1);
+      wrapper.update();
+      (0, _chai.expect)(wrapper.find('AlignmentItem').at(1).prop('shouldFocus')).to.be.true;
     });
   });
   describe('componentDidUpdate', function () {
@@ -154,7 +180,8 @@ describe('AlignmentWidget', function () {
       wrapper.setProps({
         alignedOutcomes: []
       }, function () {
-        (0, _chai.expect)(wrapper.find('Button[data-automation="alignmentWidget__button"]')).to.have.length(1);
+        // Enzyme finds two Button components because of the instui decorator on the component
+        (0, _chai.expect)(wrapper.find('Button[data-automation="alignmentWidget__button"]')).to.have.length(2);
         (0, _chai.expect)(focus.calledOnce).to.be.true;
         (0, _chai.expect)(focus.calledWith()).to.be.true;
         done();

package/lib/components/AlignmentWidget/index.js

@@ -31,7 +31,7 @@ var _uiIcons = require("@instructure/ui-icons");
 
 var _uiList = require("@instructure/ui-list");
 
-var _uiThemeable = require("@instructure/ui-themeable");
+var _emotion = require("@instructure/emotion");
 
 var _index = _interopRequireDefault(require("../OutcomePickerModal/index.js"));
 
@@ -43,18 +43,11 @@ var _shapes = require("../../store/shapes.js");
 
 var _theme = _interopRequireDefault(require("../theme.js"));
 
+var _styles = _interopRequireDefault(require("./styles.js"));
+
 var _dec, _class, _class2, _temp;
 
-var styles = {
-  componentId: 'bKqnu',
-  template: function template(theme) {
-    return "\n\n.outcomes-ui__AlignmentWidget--spacing {\n  padding-right: ".concat(theme.outcomeLabelsSpacing || 'inherit', ";\n}\n\n.outcomes-ui__AlignmentWidget--line {\n  display: flex;\n}\n\n.outcomes-ui__AlignmentWidget--button {\n  margin-top: 1rem;\n}\n");
-  },
-  'spacing': 'outcomes-ui__AlignmentWidget--spacing',
-  'line': 'outcomes-ui__AlignmentWidget--line',
-  'button': 'outcomes-ui__AlignmentWidget--button'
-};
-var AlignmentWidget = (_dec = (0, _uiThemeable.themeable)(_theme.default, styles), _dec(_class = (_temp = _class2 = /*#__PURE__*/function (_React$Component) {
+var AlignmentWidget = (_dec = (0, _emotion.withStyle)(_styles.default, _theme.default), _dec(_class = (_temp = _class2 = /*#__PURE__*/function (_React$Component) {
   (0, _inherits2.default)(AlignmentWidget, _React$Component);
 
   var _super = (0, _createSuper2.default)(AlignmentWidget);
@@ -80,28 +73,22 @@ var AlignmentWidget = (_dec = (0, _uiThemeable.themeable)(_theme.default, styles
       var renderCollapsed = _this.state.renderCollapsed;
       var enableToggleAction = alignedOutcomes.length > 0;
 
-      if (!enableToggleAction) {
-        _this.setState({
-          renderCollapsed: true
-        });
-      }
-
       if (canManageOutcomes || alignedOutcomes.length) {
-        return /*#__PURE__*/_react.default.createElement("div", {
-          className: styles.line,
+        return (0, _emotion.jsx)("div", {
+          css: _this.props.styles.line,
           "data-automation": "outcomeLabel__alignedOutcomes",
           style: {
-            'align-items': 'center'
+            alignItems: 'center'
           }
-        }, /*#__PURE__*/_react.default.createElement(_uiText.Text, {
+        }, (0, _emotion.jsx)(_uiText.Text, {
           size: "medium"
-        }, /*#__PURE__*/_react.default.createElement("div", {
-          className: styles.spacing
-        }, /*#__PURE__*/_react.default.createElement("span", {
+        }, (0, _emotion.jsx)("div", {
+          css: _this.props.styles.spacing
+        }, (0, _emotion.jsx)("span", {
           style: {
-            'padding-right': '0.5em'
+            paddingRight: '0.5em'
           }
-        }, /*#__PURE__*/_react.default.createElement(_uiButtons.IconButton, {
+        }, (0, _emotion.jsx)(_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,
@@ -109,15 +96,15 @@ var AlignmentWidget = (_dec = (0, _uiThemeable.themeable)(_theme.default, styles
           interaction: enableToggleAction ? 'enabled' : 'disabled',
           onClick: _this.toggleAlignmentList,
           "data-automation": "alignmentWidget__collapseButton"
-        }, renderCollapsed ? /*#__PURE__*/_react.default.createElement(_uiIcons.IconArrowOpenEndLine, {
+        }, renderCollapsed ? (0, _emotion.jsx)(_uiIcons.IconArrowOpenEndLine, {
           "data-testid": "icon-arrow-right"
-        }) : /*#__PURE__*/_react.default.createElement(_uiIcons.IconArrowOpenDownLine, {
+        }) : (0, _emotion.jsx)(_uiIcons.IconArrowOpenDownLine, {
           "data-testid": "icon-arrow-down"
-        }))), /*#__PURE__*/_react.default.createElement(_uiIcons.IconOutcomesLine, null))), /*#__PURE__*/_react.default.createElement(_uiText.Text, {
+        }))), (0, _emotion.jsx)(_uiIcons.IconOutcomesLine, null))), (0, _emotion.jsx)(_uiText.Text, {
           size: "medium"
-        }, /*#__PURE__*/_react.default.createElement("div", {
-          className: styles.spacing
-        }, (0, _formatMessage.default)('Aligned Outcomes'), " \xA0", /*#__PURE__*/_react.default.createElement(_index3.default, {
+        }, (0, _emotion.jsx)("div", {
+          css: _this.props.styles.spacing
+        }, (0, _formatMessage.default)('Aligned Outcomes'), " \xA0", (0, _emotion.jsx)(_index3.default, {
           count: alignedOutcomes.length
         }))));
       }
@@ -132,17 +119,16 @@ var AlignmentWidget = (_dec = (0, _uiThemeable.themeable)(_theme.default, styles
           alignedOutcomes = _this$props2.alignedOutcomes,
           canManageOutcomes = _this$props2.canManageOutcomes,
           features = _this$props2.features;
-      return /*#__PURE__*/_react.default.createElement(_uiList.List, {
+      return (0, _emotion.jsx)(_uiList.List, {
         isUnstyled: true,
-        margin: "small 0",
-        delimiter: "solid"
-      }, alignedOutcomes.length > 0 && /*#__PURE__*/_react.default.createElement(_uiList.List.Item, {
+        margin: "small 0"
+      }, alignedOutcomes.length > 0 && (0, _emotion.jsx)(_uiList.List.Item, {
         key: "delimiter-0"
       }), alignedOutcomes.map(function (outcome, index) {
-        return /*#__PURE__*/_react.default.createElement(_uiList.List.Item, {
+        return (0, _emotion.jsx)(_uiList.List.Item, {
           padding: "0 small 0 medium",
           key: outcome.id
-        }, /*#__PURE__*/_react.default.createElement(_index2.default, {
+        }, (0, _emotion.jsx)(_index2.default, {
           removeAlignment: function removeAlignment() {
             return _this.handleRemoveAlignment(outcome, index);
           },
@@ -151,7 +137,7 @@ var AlignmentWidget = (_dec = (0, _uiThemeable.themeable)(_theme.default, styles
           shouldFocus: index === _this.state.focusedItem,
           features: features
         }));
-      }), alignedOutcomes.length > 0 && /*#__PURE__*/_react.default.createElement(_uiList.List.Item, {
+      }), alignedOutcomes.length > 0 && (0, _emotion.jsx)(_uiList.List.Item, {
         key: "delimiter-1"
       }));
     };
@@ -165,7 +151,7 @@ var AlignmentWidget = (_dec = (0, _uiThemeable.themeable)(_theme.default, styles
           screenreaderNotification = _this$props3.screenreaderNotification,
           showAlert = _this$props3.showAlert,
           features = _this$props3.features;
-      return /*#__PURE__*/_react.default.createElement(OutcomeTray, Object.assign({
+      return (0, _emotion.jsx)(OutcomeTray, Object.assign({
         screenreaderNotification: screenreaderNotification,
         liveRegion: liveRegion,
         scope: scope,
@@ -181,18 +167,19 @@ var AlignmentWidget = (_dec = (0, _uiThemeable.themeable)(_theme.default, styles
           canManageOutcomes = _this$props4.canManageOutcomes;
 
       if (canManageOutcomes) {
-        return /*#__PURE__*/_react.default.createElement("div", {
-          className: styles.button
-        }, /*#__PURE__*/_react.default.createElement(_uiButtons.Button, {
+        return (0, _emotion.jsx)("div", {
+          css: _this.props.styles.button
+        }, (0, _emotion.jsx)(_uiButtons.Button, {
           ref: function ref(d) {
             _this.align = d;
           } // eslint-disable-line immutable/no-mutation
           ,
-          icon: _uiIcons.IconPlusLine,
+          renderIcon: _uiIcons.IconPlusLine,
           onClick: openOutcomePicker,
           "data-automation": "alignmentWidget__button"
-        }, /*#__PURE__*/_react.default.createElement(_uiA11yContent.AccessibleContent, {
-          alt: (0, _formatMessage.default)('Align Outcomes')
+        }, (0, _emotion.jsx)(_uiA11yContent.AccessibleContent, {
+          alt: (0, _formatMessage.default)('Align Outcomes'),
+          "data-automation": "alignmentWidget__AccessibleContent"
         }, (0, _formatMessage.default)('Outcome'))));
       }
     };
@@ -215,6 +202,17 @@ var AlignmentWidget = (_dec = (0, _uiThemeable.themeable)(_theme.default, styles
         }
       }
     }
+  }, {
+    key: "componentDidMount",
+    value: function componentDidMount() {
+      var alignedOutcomes = this.props.alignedOutcomes;
+
+      if (alignedOutcomes.length === 0) {
+        this.setState({
+          renderCollapsed: true
+        });
+      }
+    }
   }, {
     key: "handleRemoveAlignment",
     value: function handleRemoveAlignment(removedOutcome, index) {
@@ -245,7 +243,7 @@ var AlignmentWidget = (_dec = (0, _uiThemeable.themeable)(_theme.default, styles
   }, {
     key: "render",
     value: function render() {
-      return /*#__PURE__*/_react.default.createElement(_react.default.Fragment, null, this.renderHeader(), this.renderAlignmentList(), this.renderButton(), this.renderTray());
+      return (0, _emotion.jsx)("div", null, this.renderHeader(), this.renderAlignmentList(), this.renderButton(), this.renderTray());
     }
   }]);
   AlignmentWidget.displayName = "AlignmentWidget";
@@ -262,7 +260,8 @@ var AlignmentWidget = (_dec = (0, _uiThemeable.themeable)(_theme.default, styles
   liveRegion: _index.default.propTypes.liveRegion,
   canManageOutcomes: _propTypes.default.bool.isRequired,
   showAlert: _propTypes.default.func,
-  features: _propTypes.default.array
+  features: _propTypes.default.array,
+  styles: _shapes.stylesShape
 }, _class2.defaultProps = {
   alignedOutcomes: [],
   pickerProps: {},

package/lib/components/AlignmentWidget/styles.js

@@ -0,0 +1,23 @@
+"use strict";
+
+Object.defineProperty(exports, "__esModule", {
+  value: true
+});
+exports.default = void 0;
+
+var generateStyle = function generateStyle(componentTheme) {
+  return {
+    spacing: {
+      paddingRight: componentTheme.outcomeLabelsSpacing
+    },
+    line: {
+      display: 'flex'
+    },
+    button: {
+      marginTop: '1rem'
+    }
+  };
+};
+
+var _default = generateStyle;
+exports.default = _default;

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

@@ -18,6 +18,10 @@ var _enzyme = require("enzyme");
 
 var _index = _interopRequireWildcard(require("../FlashAlert/index.js"));
 
+var _uiMotion = require("@instructure/ui-motion");
+
+var _uiAlerts = require("@instructure/ui-alerts");
+
 describe('FlashAlert', function () {
   var renderSpy;
   var clock;
@@ -55,20 +59,20 @@ describe('FlashAlert', function () {
   });
   it('renders Transition component', function () {
     var screen = (0, _enzyme.mount)( /*#__PURE__*/_react.default.createElement(_index.default, makeProps({})));
-    var transition = screen.find('Transition').first();
+    var transition = screen.find(_uiMotion.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);
+    var transition2 = screen.find(_uiMotion.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');
+    var alert = screen.find(_uiAlerts.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');

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

@@ -14,6 +14,10 @@ var _index = _interopRequireDefault(require("../index.js"));
 
 var _checkA11y = _interopRequireDefault(require("../../../test/checkA11y.js"));
 
+var _uiCheckbox = require("@instructure/ui-checkbox");
+
+var _uiLink = require("@instructure/ui-link");
+
 describe('OutcomeCheckbox', function () {
   function makeProps() {
     var props = arguments.length > 0 && arguments[0] !== void 0 ? arguments[0] : {};
@@ -32,15 +36,15 @@ describe('OutcomeCheckbox', function () {
   }
 
   it('renders a checkbox', function () {
-    var wrapper = (0, _enzyme.shallow)( /*#__PURE__*/_react.default.createElement(_index.default, makeProps()), {
+    var wrapper = (0, _enzyme.mount)( /*#__PURE__*/_react.default.createElement(_index.default, makeProps()), {
       disableLifecycleMethods: true
     });
-    (0, _chai.expect)(wrapper.find('Checkbox')).to.have.length(1);
+    (0, _chai.expect)(wrapper.find(_uiCheckbox.Checkbox)).to.have.length(1);
   });
   it('renders outcome title in link', function () {
     var props = makeProps();
     var wrapper = (0, _enzyme.mount)( /*#__PURE__*/_react.default.createElement(_index.default, props));
-    var link = wrapper.find('Link');
+    var link = wrapper.find(_uiLink.Link);
     (0, _chai.expect)(link.text()).to.equal('The student will make cupcakes');
   });
   it('renders friendly description', function () {
@@ -69,7 +73,7 @@ describe('OutcomeCheckbox', function () {
   it('will focus an outcome when the title is clicked', function () {
     var props = makeProps();
     var wrapper = (0, _enzyme.mount)( /*#__PURE__*/_react.default.createElement(_index.default, props));
-    var click = wrapper.find('Link').prop('onClick');
+    var click = wrapper.find(_uiLink.Link).prop('onClick');
 
     var preventDefault = _sinon.default.stub();
 
@@ -85,10 +89,10 @@ describe('OutcomeCheckbox', function () {
     var props = makeProps({
       isOutcomeSelected: isOutcomeSelected
     });
-    var wrapper = (0, _enzyme.shallow)( /*#__PURE__*/_react.default.createElement(_index.default, props), {
+    var wrapper = (0, _enzyme.mount)( /*#__PURE__*/_react.default.createElement(_index.default, props), {
       disableLifecycleMethods: true
     });
-    (0, _chai.expect)(wrapper.find('Checkbox').prop('checked')).to.equal(false);
+    (0, _chai.expect)(wrapper.find(_uiCheckbox.Checkbox).prop('checked')).to.equal(false);
   });
   it('does not select the checkbox when not isOutcomeSelected', function () {
     var isOutcomeSelected = _sinon.default.stub().withArgs(101).returns(true);
@@ -96,10 +100,10 @@ describe('OutcomeCheckbox', function () {
     var props = makeProps({
       isOutcomeSelected: isOutcomeSelected
     });
-    var wrapper = (0, _enzyme.shallow)( /*#__PURE__*/_react.default.createElement(_index.default, props), {
+    var wrapper = (0, _enzyme.mount)( /*#__PURE__*/_react.default.createElement(_index.default, props), {
       disableLifecycleMethods: true
     });
-    (0, _chai.expect)(wrapper.find('Checkbox').prop('checked')).to.equal(true);
+    (0, _chai.expect)(wrapper.find(_uiCheckbox.Checkbox).prop('checked')).to.equal(true);
   });
   it('calls selectOutcomeIds when unselected and user clicks', function () {
     var isOutcomeSelected = _sinon.default.stub().withArgs(101).returns(false);
@@ -107,10 +111,11 @@ describe('OutcomeCheckbox', function () {
     var props = makeProps({
       isOutcomeSelected: isOutcomeSelected
     });
-    var wrapper = (0, _enzyme.shallow)( /*#__PURE__*/_react.default.createElement(_index.default, props), {
+    var wrapper = (0, _enzyme.mount)( /*#__PURE__*/_react.default.createElement(_index.default, props), {
       disableLifecycleMethods: true
     });
-    wrapper.find('Checkbox').simulate('change');
+    var change = wrapper.find(_uiCheckbox.Checkbox).prop('onChange');
+    change();
     (0, _chai.expect)(props.selectOutcomeIds.calledWith([101]));
   });
   it('calls deselectOutcomeIds when selected and user clicks', function () {
@@ -119,10 +124,11 @@ describe('OutcomeCheckbox', function () {
     var props = makeProps({
       isOutcomeSelected: isOutcomeSelected
     });
-    var wrapper = (0, _enzyme.shallow)( /*#__PURE__*/_react.default.createElement(_index.default, props), {
+    var wrapper = (0, _enzyme.mount)( /*#__PURE__*/_react.default.createElement(_index.default, props), {
       disableLifecycleMethods: true
     });
-    wrapper.find('Checkbox').simulate('change');
+    var change = wrapper.find(_uiCheckbox.Checkbox).prop('onChange');
+    change();
     (0, _chai.expect)(props.deselectOutcomeIds.calledWith([101]));
   });
   it('meets a11y standards', function () {

package/lib/components/OutcomeCheckbox/index.js

@@ -25,8 +25,6 @@ var _uiLink = require("@instructure/ui-link");
 
 var _uiCheckbox = require("@instructure/ui-checkbox");
 
-var _uiThemeable = require("@instructure/ui-themeable");
-
 var _shapes = require("../../store/shapes.js");
 
 var _index = _interopRequireDefault(require("../OutcomeDescription/index.js"));
@@ -35,23 +33,15 @@ var _uiView = require("@instructure/ui-view");
 
 var _formatMessage = _interopRequireDefault(require("format-message"));
 
+var _emotion = require("@instructure/emotion");
+
 var _theme = _interopRequireDefault(require("../theme.js"));
 
+var _styles = _interopRequireDefault(require("./styles.js"));
+
 var _dec, _class, _class2, _temp;
 
-var styles = {
-  componentId: 'eEhwE',
-  template: function template(theme) {
-    return "\n\n.outcomes-ui__OutcomeCheckbox--checkbox {\n  padding: ".concat(theme.outcomePickerItemPadding || 'inherit', ";\n}\n\n.outcomes-ui__OutcomeCheckbox--checkboxLabel {\n  padding-left: ").concat(theme.checkboxLabelLeftPadding || 'inherit', ";\n  display: flex;\n}\n\n.outcomes-ui__OutcomeCheckbox--checkboxDescription {\n  padding-left: ").concat(theme.checkboxDescriptionLeftPadding || 'inherit', ";\n}\n\n.outcomes-ui__OutcomeCheckbox--checkboxFriendlyDescription {\n  margin-left: ").concat(theme.checkboxDescriptionLeftPadding || 'inherit', ";\n  margin-bottom: 10px;\n}\n\n.outcomes-ui__OutcomeCheckbox--linkText {\n  display: table;\n  table-layout: fixed;\n  white-space: nowrap;\n  width: 100%;\n}\n\n.outcomes-ui__OutcomeCheckbox--innerLinkText {\n  display: table-cell;\n  overflow: hidden;\n  text-overflow: ellipsis;\n}\n");
-  },
-  'checkbox': 'outcomes-ui__OutcomeCheckbox--checkbox',
-  'checkboxLabel': 'outcomes-ui__OutcomeCheckbox--checkboxLabel',
-  'checkboxDescription': 'outcomes-ui__OutcomeCheckbox--checkboxDescription',
-  'checkboxFriendlyDescription': 'outcomes-ui__OutcomeCheckbox--checkboxFriendlyDescription',
-  'linkText': 'outcomes-ui__OutcomeCheckbox--linkText',
-  'innerLinkText': 'outcomes-ui__OutcomeCheckbox--innerLinkText'
-};
-var OutcomeCheckbox = (_dec = (0, _uiThemeable.themeable)(_theme.default, styles), _dec(_class = (_temp = _class2 = /*#__PURE__*/function (_React$Component) {
+var OutcomeCheckbox = (_dec = (0, _emotion.withStyle)(_styles.default, _theme.default), _dec(_class = (_temp = _class2 = /*#__PURE__*/function (_React$Component) {
   (0, _inherits2.default)(OutcomeCheckbox, _React$Component);
 
   var _super = (0, _createSuper2.default)(OutcomeCheckbox);
@@ -85,52 +75,53 @@ var OutcomeCheckbox = (_dec = (0, _uiThemeable.themeable)(_theme.default, styles
       var id = outcome.id,
           description = outcome.description,
           title = outcome.title;
-      return /*#__PURE__*/_react.default.createElement("div", {
-        className: "OutcomeSelector ".concat(styles.checkbox)
-      }, /*#__PURE__*/_react.default.createElement(_uiCheckbox.Checkbox, {
+      return (0, _emotion.jsx)("div", {
+        css: this.props.styles.checkbox,
+        className: "OutcomeSelector"
+      }, (0, _emotion.jsx)(_uiCheckbox.Checkbox, {
         value: id,
         checked: this.selected(),
         onChange: function onChange() {
           return _this.toggleOutcomeSelection();
         },
-        label: /*#__PURE__*/_react.default.createElement("div", {
-          className: styles.checkboxLabel
-        }, /*#__PURE__*/_react.default.createElement(_uiLink.Link, {
+        label: (0, _emotion.jsx)("div", {
+          css: this.props.styles.checkboxLabel
+        }, (0, _emotion.jsx)(_uiLink.Link, {
           onClick: function onClick(e) {
             e.preventDefault();
 
             _this.props.setFocusedOutcome(outcome);
           }
-        }, /*#__PURE__*/_react.default.createElement(_uiText.Text, {
+        }, (0, _emotion.jsx)(_uiText.Text, {
           size: "small"
-        }, /*#__PURE__*/_react.default.createElement("span", {
-          className: styles.linkText,
+        }, (0, _emotion.jsx)("span", {
+          css: this.props.styles.linkText,
           "data-automation": "outcomeCheckbox__outcomeName"
-        }, /*#__PURE__*/_react.default.createElement("span", {
-          className: styles.innerLinkText
+        }, (0, _emotion.jsx)("span", {
+          css: this.props.styles.innerLinkText
         }, title)))))
-      }), outcome.friendly_description && /*#__PURE__*/_react.default.createElement("div", {
-        className: styles.checkboxFriendlyDescription
-      }, /*#__PURE__*/_react.default.createElement(_uiView.View, {
+      }), outcome.friendly_description && (0, _emotion.jsx)("div", {
+        css: this.props.styles.checkboxFriendlyDescription
+      }, (0, _emotion.jsx)(_uiView.View, {
         as: "div",
         margin: "x-small small 0 0",
         padding: "x-small x-small 0",
         background: "secondary",
         "data-automation": "outcomeCheckbox__friendly_description_header"
-      }, /*#__PURE__*/_react.default.createElement(_uiText.Text, {
+      }, (0, _emotion.jsx)(_uiText.Text, {
         size: "x-small",
         weight: "bold"
-      }, (0, _formatMessage.default)('Friendly Description'))), /*#__PURE__*/_react.default.createElement(_uiView.View, {
+      }, (0, _formatMessage.default)('Friendly Description'))), (0, _emotion.jsx)(_uiView.View, {
         as: "div",
         margin: "0 small 0 0",
         padding: "0 x-small x-small",
         background: "secondary",
         "data-automation": "outcomeCheckbox__friendly_description_expanded"
-      }, /*#__PURE__*/_react.default.createElement(_uiText.Text, {
+      }, (0, _emotion.jsx)(_uiText.Text, {
         size: "x-small"
-      }, outcome.friendly_description))), /*#__PURE__*/_react.default.createElement("div", {
-        className: styles.checkboxDescription
-      }, /*#__PURE__*/_react.default.createElement(_index.default, {
+      }, outcome.friendly_description))), (0, _emotion.jsx)("div", {
+        css: this.props.styles.checkboxDescription
+      }, (0, _emotion.jsx)(_index.default, {
         description: description,
         maxLines: 2
       })));
@@ -143,6 +134,7 @@ var OutcomeCheckbox = (_dec = (0, _uiThemeable.themeable)(_theme.default, styles
   setFocusedOutcome: _propTypes.default.func.isRequired,
   isOutcomeSelected: _propTypes.default.func.isRequired,
   selectOutcomeIds: _propTypes.default.func.isRequired,
-  deselectOutcomeIds: _propTypes.default.func.isRequired
+  deselectOutcomeIds: _propTypes.default.func.isRequired,
+  styles: _shapes.stylesShape
 }, _temp)) || _class);
 exports.default = OutcomeCheckbox;