@instructure/outcomes-ui 2.1.8 → 3.0.0

package/es/translated/ru/demo.js

@@ -187,30 +187,20 @@ import 'regenerator-runtime/runtime';
 import React from 'react';
 import { render } from 'react-dom';
 import { fromPairs } from 'lodash';
-import '@instructure/canvas-theme';
-import '@instructure/canvas-high-contrast-theme';
 import { Alert } from '@instructure/ui-alerts';
 import { Heading } from '@instructure/ui-heading';
 import { Checkbox } from '@instructure/ui-checkbox';
 import { SimpleSelect } from '@instructure/ui-simple-select';
 import { Tabs } from '@instructure/ui-tabs';
-import { ApplyTheme } from '@instructure/ui-themeable';
+import { canvas, canvasHighContrast } from '@instructure/ui-themes';
+import { InstUISettingsProvider } from '@instructure/emotion';
 import { OutcomeAlignments, OutcomeCount, OutcomesPerStudentReport, OutcomeList, AlignmentWidget } from "./index.js";
-var styles = {
-  componentId: 'dCZbw',
-  template: function template(theme) {
-    return "\n\n* {\n  box-sizing: border-box;\n}\n\nhtml {\n  font-size: 1rem;\n}\n\nhtml, body {\n  margin: 0;\n  height: 100%;\n  font-family: sans-serif;\n}\n\n.outcomes-ui__src--root {\n  background: white;\n  color: black;\n  padding: 2rem;\n  margin: 2rem;\n}\n\n.outcomes-ui__src--item {\n  padding-bottom: 1rem;\n}\n\n.outcomes-ui__src--item > div {\n    padding-top: 0.25rem;\n    padding-bottom: 0.25rem;\n  }\n\n.outcomes-ui__src--report {\n  max-width: calc(85vw - 128px);\n}\n\n.outcomes-ui__src--mastery {\n  padding-bottom: 2rem;\n}\n\n#outcomes-ui__src--screenreaderNotifications {\n  height: 1px;\n  width: 1px;\n  clip: rect(0, 0, 0, 0);\n  overflow: hidden;\n}\n";
-  },
-  'root': 'outcomes-ui__src--root',
-  'item': 'outcomes-ui__src--item',
-  'report': 'outcomes-ui__src--report',
-  'mastery': 'outcomes-ui__src--mastery',
-  'screenreaderNotifications': 'outcomes-ui__src--screenreaderNotifications'
+var themes = {
+  'canvas': canvas,
+  'canvas-high-contrast': canvasHighContrast
 };
-var themes = ['canvas', 'canvas-high-contrast'];
 var root = document.createElement('div');
 root.setAttribute('id', 'app');
-root.classList.add(styles.root);
 document.body.appendChild(root);
 var alert = document.createElement('div');
 alert.setAttribute('id', 'alert');
@@ -257,7 +247,6 @@ var DemoAlignment = function DemoAlignment(props) {
       jwt = props.jwt,
       useAlignmentWidget = props.useAlignmentWidget;
   return /*#__PURE__*/React.createElement("div", {
-    className: styles.item,
     "data-automation": "artifact"
   }, /*#__PURE__*/React.createElement(Heading, {
     level: "h3"
@@ -286,7 +275,7 @@ var DemoAlignment = function DemoAlignment(props) {
     jwt: jwt,
     liveRegion: getLive,
     screenreaderNotification: screenreaderNotification,
-    readOnly: readOnly === 'true'
+    canManageOutcomes: readOnly === 'false'
   })) : /*#__PURE__*/React.createElement(OutcomeAlignments, {
     alignmentSetId: alignmentSetId,
     pickerType: currentPicker,
@@ -348,14 +337,14 @@ var handleTabChange = function handleTabChange(_, _ref4) {
 };
 
 function rerender() {
-  render( /*#__PURE__*/React.createElement(ApplyTheme, {
-    theme: ApplyTheme.generateTheme(currentTheme)
+  render( /*#__PURE__*/React.createElement(InstUISettingsProvider, {
+    theme: themes[currentTheme]
   }, /*#__PURE__*/React.createElement(Tabs, {
     onRequestTabChange: handleTabChange
   }, /*#__PURE__*/React.createElement(Tabs.Panel, {
     id: "alignments",
     renderTitle: "Alignments",
-    selected: currentTab === 'alignments'
+    isSelected: currentTab === 'alignments'
   }, /*#__PURE__*/React.createElement(SimpleSelect, {
     renderLabel: "Picker",
     onChange: handlePickerChange,
@@ -425,21 +414,15 @@ function rerender() {
     jwt: createJwt,
     alignmentWidget: AlignmentWidget
   })), /*#__PURE__*/React.createElement(Tabs.Panel, {
-    selected: currentTab === 'report',
+    isSelected: currentTab === 'report',
     renderTitle: "Report",
     textAlign: "center",
     id: "report"
-  }, /*#__PURE__*/React.createElement("div", {
-    style: {
-      backgroundColor: 'lightgrey'
-    }
-  }, /*#__PURE__*/React.createElement(Checkbox, {
+  }, /*#__PURE__*/React.createElement("div", null, /*#__PURE__*/React.createElement(Checkbox, {
     label: "Show Rollups",
     checked: showRollups,
     onChange: handleShowRollupsChange
-  }), /*#__PURE__*/React.createElement("div", {
-    className: styles.report
-  }, /*#__PURE__*/React.createElement(OutcomesPerStudentReport, {
+  }), /*#__PURE__*/React.createElement("div", null, /*#__PURE__*/React.createElement(OutcomesPerStudentReport, {
     artifactType: artifactType,
     artifactId: artifactId,
     host: outcomesHost,
@@ -448,15 +431,15 @@ function rerender() {
     contextUuid: "dummy_uuid",
     showRollups: showRollups
   })))), /*#__PURE__*/React.createElement(Tabs.Panel, {
-    title: "Theme",
+    renderTitle: "Theme",
     textAlign: "center",
     id: "theme",
-    selected: currentTab === 'theme'
+    isSelected: currentTab === 'theme'
   }, /*#__PURE__*/React.createElement(SimpleSelect, {
     renderLabel: "Theme",
     onChange: handleThemeChange,
     value: currentTheme
-  }, themes.map(function (themeKey) {
+  }, Object.keys(themes).map(function (themeKey) {
     return /*#__PURE__*/React.createElement(SimpleSelect.Option, {
       id: themeKey,
       key: themeKey,

package/es/translated/ru/index.css

@@ -1,44 +1,36 @@
 * {
-  box-sizing: border-box;
-}
-
-html {
-  font-size: 1rem;
-}
-
-html, body {
-  margin: 0;
-  height: 100%;
-  font-family: sans-serif;
-}
-
-.root {
-  background: white;
-  color: black;
-  padding: 2rem;
-  margin: 2rem;
-}
-
-.item {
-  padding-bottom: 1rem;
-
-  & > div {
-    padding-top: 0.25rem;
-    padding-bottom: 0.25rem;
+    box-sizing: border-box;
   }
-}
-
-.report {
-  max-width: calc(85vw - 128px);
-}
-
-.mastery {
-  padding-bottom: 2rem;
-}
-
-#screenreaderNotifications {
-  height: 1px;
-  width: 1px;
-  clip: rect(0, 0, 0, 0);
-  overflow: hidden;
-}
+  html {
+    font-size: 1rem;
+  }
+  html, body {
+    margin: 0;
+    height: 100%;
+    font-family: sans-serif;
+  }
+  .root {
+    background: white;
+    color: black;
+    padding: 2rem;
+    margin: 2rem;
+  }
+  .item {
+    padding-bottom: 1rem;
+    & > div {
+      padding-top: 0.25rem;
+      padding-bottom: 0.25rem;
+    }
+  }
+  .report {
+    max-width: calc(85vw - 128px);
+  }
+  .mastery {
+    padding-bottom: 2rem;
+  }
+  #screenreaderNotifications {
+    height: 1px;
+    width: 1px;
+    clip: rect(0, 0, 0, 0);
+    overflow: hidden;
+  

package/es/translated/ru/store/shapes.js

@@ -60,4 +60,5 @@ export var nMasteryDataShape = PropTypes.shape({
 export var decayingAverageDataShape = PropTypes.shape({
   decaying_average_percent: PropTypes.number.isRequired
 });
-export var algorithmDataShape = PropTypes.oneOf([nMasteryDataShape, decayingAverageDataShape]);
+export var algorithmDataShape = PropTypes.oneOf([nMasteryDataShape, decayingAverageDataShape]);
+export var stylesShape = PropTypes.object;

package/es/translated/ru/util/__tests__/findElementsWithStyle.js

@@ -0,0 +1,13 @@
+import _slicedToArray from "@babel/runtime/helpers/esm/slicedToArray";
+export var findElementsWithStyle = function findElementsWithStyle(wrapper, targetStyles) {
+  return wrapper.findWhere(function (node) {
+    var style = node.prop('css');
+    return style && Object.entries(targetStyles).every(function (_ref) {
+      var _ref2 = _slicedToArray(_ref, 2),
+          key = _ref2[0],
+          value = _ref2[1];
+
+      return style[key] === value;
+    });
+  });
+};

package/es/translated/sl/components/Alignment/__tests__/index.test.js

@@ -2,7 +2,8 @@ import { expect } from 'chai';
 import React from 'react';
 import sinon from 'sinon';
 import { mount, shallow } from 'enzyme';
-import { IconOutcomesLine } from '@instructure/ui-icons';
+import { IconOutcomesLine, IconTrashLine } from '@instructure/ui-icons';
+import { Link } from '@instructure/ui-link';
 import Alignment from "../index.js";
 import checkA11y from "../../../test/checkA11y.js";
 describe('Alignment', function () {
@@ -23,17 +24,17 @@ describe('Alignment', function () {
   }
 
   it('includes an icon', function () {
-    var wrapper = shallow( /*#__PURE__*/React.createElement(Alignment, makeProps()), {
+    var wrapper = mount( /*#__PURE__*/React.createElement(Alignment, makeProps()), {
       disableLifecycleMethods: true
     });
     expect(wrapper.find(IconOutcomesLine)).to.have.length(1);
   });
   it('includes a delete button', function () {
     var props = makeProps();
-    var wrapper = shallow( /*#__PURE__*/React.createElement(Alignment, props), {
+    var wrapper = mount( /*#__PURE__*/React.createElement(Alignment, props), {
       disableLifecycleMethods: true
     });
-    expect(wrapper.find('Button')).to.have.length(1);
+    expect(wrapper.find(IconTrashLine)).to.have.length(1);
   });
   it('does not include a delete button if readOnly', function () {
     var props = makeProps({
@@ -46,26 +47,26 @@ describe('Alignment', function () {
   });
   it('calls removeAlignment when delete is clicked', function () {
     var props = makeProps();
-    var wrapper = shallow( /*#__PURE__*/React.createElement(Alignment, props), {
+    var wrapper = mount( /*#__PURE__*/React.createElement(Alignment, props), {
       disableLifecycleMethods: true
     });
-    var remove = wrapper.find('Button');
+    var remove = wrapper.find(IconTrashLine);
     remove.simulate('click');
     expect(props.removeAlignment.calledOnce).to.be.true;
   });
   it('calls viewAlignment when the title is clicked', function () {
     var props = makeProps();
-    var wrapper = shallow( /*#__PURE__*/React.createElement(Alignment, props), {
+    var wrapper = mount( /*#__PURE__*/React.createElement(Alignment, props), {
       disableLifecycleMethods: true
     });
-    var link = wrapper.find('Link');
+    var link = wrapper.find(Link);
     link.simulate('click');
     expect(props.viewAlignment.calledOnce).to.be.true;
   });
   it('renders outcome title in link', function () {
     var props = makeProps();
     var wrapper = mount( /*#__PURE__*/React.createElement(Alignment, props));
-    var link = wrapper.find('Link');
+    var link = wrapper.find(Link);
     expect(link.text()).to.equal('User can foo a bar');
   });
   it('meets a11y standards', function () {

package/es/translated/sl/components/Alignment/index.js

@@ -7,27 +7,17 @@ var _dec, _class, _class2, _temp;
 
 import React from 'react';
 import PropTypes from 'prop-types';
-import { Button } from '@instructure/ui-buttons';
+import { IconButton } from '@instructure/ui-buttons';
 import { Text } from '@instructure/ui-text';
 import { Link } from '@instructure/ui-link';
 import { IconTrashLine, IconOutcomesLine } from '@instructure/ui-icons';
 import { View } from '@instructure/ui-view';
-import { themeable } from '@instructure/ui-themeable';
+import { withStyle, jsx } from '@instructure/emotion';
 import OutcomeViewModal from "../OutcomeViewModal/index.js";
-import theme from "../theme.js";
-var styles = {
-  componentId: 'famwZ',
-  template: function template(theme) {
-    return "\n\n.outcomes-ui__Alignment--item {\n  display: flex;\n  justify-content: space-between;\n  align-items: center;\n}\n\n.outcomes-ui__Alignment--outcome {\n  flex: 0 0 0;\n  padding: 0 0.3rem 0 0;\n}\n\n.outcomes-ui__Alignment--link {\n  flex-grow: 1;\n  width: 100%;\n}\n\n.outcomes-ui__Alignment--linkText {\n  display: table;\n  table-layout: fixed;\n  white-space: nowrap;\n  width: 100%;\n}\n\n.outcomes-ui__Alignment--innerLinkText {\n  display: table-cell;\n  overflow: hidden;\n  text-overflow: ellipsis;\n}\n\n.outcomes-ui__Alignment--delete {\n  flex: 0 0 1rem;\n}\n";
-  },
-  'item': 'outcomes-ui__Alignment--item',
-  'outcome': 'outcomes-ui__Alignment--outcome',
-  'link': 'outcomes-ui__Alignment--link',
-  'linkText': 'outcomes-ui__Alignment--linkText',
-  'innerLinkText': 'outcomes-ui__Alignment--innerLinkText',
-  'delete': 'outcomes-ui__Alignment--delete'
-};
-var Alignment = (_dec = themeable(theme, styles), _dec(_class = (_temp = _class2 = /*#__PURE__*/function (_React$Component) {
+import generateComponentTheme from "../theme.js";
+import generateStyle from "./styles.js";
+import { stylesShape } from "../../store/shapes.js";
+var Alignment = (_dec = withStyle(generateStyle, generateComponentTheme), _dec(_class = (_temp = _class2 = /*#__PURE__*/function (_React$Component) {
   _inherits(Alignment, _React$Component);
 
   var _super = _createSuper(Alignment);
@@ -50,6 +40,7 @@ var Alignment = (_dec = themeable(theme, styles), _dec(_class = (_temp = _class2
       var _this = this;
 
       var _this$props = this.props,
+          index = _this$props.index,
           outcome = _this$props.outcome,
           removeAlignment = _this$props.removeAlignment,
           viewAlignment = _this$props.viewAlignment,
@@ -61,39 +52,47 @@ var Alignment = (_dec = themeable(theme, styles), _dec(_class = (_temp = _class2
           readOnly = _this$props.readOnly,
           scope = _this$props.scope;
       var removeMessage = "Odstrani " + outcome.title;
-      return /*#__PURE__*/React.createElement("li", {
-        className: styles.item,
+      var itemStyle = [this.props.styles.item];
+
+      if (index !== 0) {
+        itemStyle.push(this.props.styles.itemSeparator);
+      }
+
+      return jsx("li", {
+        css: itemStyle,
         "data-automation": "outcomeAlignment__item"
-      }, /*#__PURE__*/React.createElement("span", {
-        className: styles.outcome
-      }, /*#__PURE__*/React.createElement(Text, {
+      }, jsx("span", {
+        css: this.props.styles.outcome
+      }, jsx(Text, {
         size: "large"
-      }, /*#__PURE__*/React.createElement(IconOutcomesLine, null))), /*#__PURE__*/React.createElement("span", {
-        className: styles.link
-      }, /*#__PURE__*/React.createElement("span", {
-        className: styles.linkText
-      }, /*#__PURE__*/React.createElement("span", {
-        className: styles.innerLinkText
-      }, /*#__PURE__*/React.createElement(View, {
+      }, jsx(IconOutcomesLine, null))), jsx("span", {
+        css: this.props.styles.link
+      }, jsx("span", {
+        css: this.props.styles.linkText
+      }, jsx("span", {
+        css: this.props.innerLinkText
+      }, jsx(View, {
         as: "div",
         margin: "xx-small"
-      }, /*#__PURE__*/React.createElement(Link, {
+      }, jsx(Link, {
         onClick: viewAlignment,
         ref: function ref(link) {
           _this.focusLink = link;
         } // eslint-disable-line immutable/no-mutation
 
-      }, /*#__PURE__*/React.createElement(Text, {
+      }, jsx(Text, {
         weight: "bold"
-      }, outcome.title)))))), !readOnly && /*#__PURE__*/React.createElement("span", {
-        className: styles.delete,
+      }, outcome.title)))))), !readOnly && jsx("span", {
+        css: this.props.styles.delete,
         "data-automation": "alignment-delete"
-      }, /*#__PURE__*/React.createElement(Button, {
-        variant: "icon",
-        onClick: removeAlignment
-      }, /*#__PURE__*/React.createElement(IconTrashLine, {
+      }, jsx(IconButton, {
+        screenReaderLabel: "",
+        onClick: removeAlignment,
+        withBorder: false,
+        withBackground: false
+      }, jsx(IconTrashLine, {
         title: removeMessage
-      }))), /*#__PURE__*/React.createElement(OutcomeViewModal, {
+      }))), jsx(OutcomeViewModal, {
         outcome: outcome,
         closeAlignment: closeAlignment,
         isOpen: isOpen,
@@ -120,7 +119,9 @@ var Alignment = (_dec = themeable(theme, styles), _dec(_class = (_temp = _class2
   artifactTypeName: PropTypes.string,
   displayMasteryDescription: PropTypes.bool,
   displayMasteryPercentText: PropTypes.bool,
-  scope: PropTypes.string.isRequired
+  scope: PropTypes.string.isRequired,
+  index: PropTypes.number.isRequired,
+  styles: stylesShape
 }, _class2.defaultProps = {
   artifactTypeName: null,
   displayMasteryDescription: false,

package/es/translated/sl/components/Alignment/styles.js

@@ -0,0 +1,37 @@
+var generateStyle = function generateStyle() {
+  return {
+    item: {
+      display: 'flex',
+      justifyContent: 'space-between',
+      alignItems: 'center',
+      padding: '10px 20px'
+    },
+    itemSeparator: {
+      borderTop: 'dashed 1px #BBBBBB'
+    },
+    outcome: {
+      flex: '0 0 0',
+      padding: '0 0.3rem 0 0'
+    },
+    link: {
+      flexGrow: 1,
+      width: '100%'
+    },
+    linkText: {
+      display: 'table',
+      tableLayout: 'fixed',
+      whiteSpace: 'nowrap',
+      width: '100%'
+    },
+    innerLinkText: {
+      display: 'table-cell',
+      overflow: 'hidden',
+      textOverflow: 'ellipsis'
+    },
+    delete: {
+      flex: '0 0 1rem'
+    }
+  };
+};
+
+export default generateStyle;

package/es/translated/sl/components/AlignmentItem/index.js

@@ -23,7 +23,8 @@ var AlignmentItem = function AlignmentItem(_ref) {
       shouldFocus = _ref.shouldFocus,
       isOutcomeSelected = _ref.isOutcomeSelected,
       selectOutcomeIds = _ref.selectOutcomeIds,
-      deselectOutcomeIds = _ref.deselectOutcomeIds;
+      deselectOutcomeIds = _ref.deselectOutcomeIds,
+      features = _ref.features;
 
   var _useState = useState(true),
       _useState2 = _slicedToArray(_useState, 2),
@@ -209,7 +210,8 @@ var AlignmentItem = function AlignmentItem(_ref) {
     ratings: scoring_tiers,
     truncated: truncated,
     isTray: isTray,
-    canManageOutcomes: canManageOutcomes
+    canManageOutcomes: canManageOutcomes,
+    features: features
   })))));
 };
 
@@ -221,7 +223,8 @@ AlignmentItem.propTypes = {
   shouldFocus: PropTypes.bool,
   isOutcomeSelected: PropTypes.func,
   selectOutcomeIds: PropTypes.func,
-  deselectOutcomeIds: PropTypes.func
+  deselectOutcomeIds: PropTypes.func,
+  features: PropTypes.array
 };
 AlignmentItem.defaultProps = {
   removeAlignment: function removeAlignment() {},
@@ -230,6 +233,7 @@ AlignmentItem.defaultProps = {
   shouldFocus: false,
   isOutcomeSelected: function isOutcomeSelected() {},
   selectOutcomeIds: function selectOutcomeIds() {},
-  deselectOutcomeIds: function deselectOutcomeIds() {}
+  deselectOutcomeIds: function deselectOutcomeIds() {},
+  features: []
 };
 export default AlignmentItem;

package/es/translated/sl/components/AlignmentList/__tests__/index.test.js

@@ -4,9 +4,10 @@ import sinon from 'sinon';
 import { shallow, mount } from 'enzyme';
 import AlignmentList from "../index.js";
 import checkA11y from "../../../test/checkA11y.js";
+import { Billboard } from '@instructure/ui-billboard';
+import Alignment from "../../Alignment/index.js";
+import { IconPlusLine } from '@instructure/ui-icons';
 describe('AlignmentList', function () {
-  var triggerButtonSelector = 'Button[variant="circle-primary"]';
-
   function makeProps() {
     var props = arguments.length > 0 && arguments[0] !== void 0 ? arguments[0] : {};
     return Object.assign({
@@ -39,7 +40,10 @@ describe('AlignmentList', function () {
       outcomePicker: function outcomePicker() {
         return null;
       },
-      readOnly: false
+      readOnly: false,
+      onModalClose: function onModalClose() {
+        return null;
+      }
     }, props);
   }
 
@@ -48,10 +52,10 @@ describe('AlignmentList', function () {
       alignedOutcomes: []
     });
     it('shows billboard when no alignments present', function () {
-      var wrapper = shallow( /*#__PURE__*/React.createElement(AlignmentList, props), {
+      var wrapper = mount( /*#__PURE__*/React.createElement(AlignmentList, props), {
         disableLifecycleMethods: true
       });
-      expect(wrapper.find('Billboard')).to.have.length(1);
+      expect(wrapper.find(Billboard)).to.have.length(1);
     });
     it('does not show the billboard when readOnly is true', function () {
       var props = makeProps({
@@ -64,20 +68,24 @@ describe('AlignmentList', function () {
       expect(wrapper.find('Billboard')).to.have.length(0);
     });
     it('includes the right heading', function () {
-      var wrapper = shallow( /*#__PURE__*/React.createElement(AlignmentList, props), {
+      var wrapper = mount( /*#__PURE__*/React.createElement(AlignmentList, props), {
         disableLifecycleMethods: true
       });
-      expect(wrapper.find('Billboard').prop('heading')).to.equal('Foo');
+      expect(wrapper.find(Billboard).prop('heading')).to.equal('Foo');
     });
     it('launches modal when billboard clicked', function () {
-      var wrapper = shallow( /*#__PURE__*/React.createElement(AlignmentList, props), {
+      var wrapper = mount( /*#__PURE__*/React.createElement(AlignmentList, props), {
         disableLifecycleMethods: true
       });
-      wrapper.find('Billboard').simulate('click');
+      wrapper.find(Billboard);
+      var billboard = wrapper.find(Billboard);
+      billboard.find('button').simulate('click');
       expect(props.openOutcomePicker.calledOnce).to.be.true;
     });
     it('focuses the billboard button when focus called', function (done) {
-      var wrapper = mount( /*#__PURE__*/React.createElement(AlignmentList, props));
+      var wrapper = mount( /*#__PURE__*/React.createElement(AlignmentList, props)); // Enzyme finds two AlignmentList components because of the instui decorator on the component
+
+      wrapper = wrapper.find('AlignmentList').at(1);
       setTimeout(function () {
         var trigger = wrapper.find('button').last();
         var focus = sinon.spy(trigger.instance(), 'focus');
@@ -95,22 +103,22 @@ describe('AlignmentList', function () {
   });
   describe('alignments present', function () {
     it('shows list', function () {
-      var wrapper = shallow( /*#__PURE__*/React.createElement(AlignmentList, makeProps()), {
+      var wrapper = mount( /*#__PURE__*/React.createElement(AlignmentList, makeProps()), {
         disableLifecycleMethods: true
       });
       expect(wrapper.find('ul')).to.have.length(1);
     });
     it('adds one alignment row per alignment', function () {
-      var wrapper = shallow( /*#__PURE__*/React.createElement(AlignmentList, makeProps()), {
+      var wrapper = mount( /*#__PURE__*/React.createElement(AlignmentList, makeProps()), {
         disableLifecycleMethods: true
       });
-      expect(wrapper.find('Alignment')).to.have.length(3);
+      expect(wrapper.find(Alignment)).to.have.length(3);
     });
     it('gives correct outcome to alignment rows', function () {
-      var wrapper = shallow( /*#__PURE__*/React.createElement(AlignmentList, makeProps()), {
+      var wrapper = mount( /*#__PURE__*/React.createElement(AlignmentList, makeProps()), {
         disableLifecycleMethods: true
       });
-      expect(wrapper.find('Alignment').last().prop('outcome')).to.have.property('label', 'C3');
+      expect(wrapper.find(Alignment).last().prop('outcome')).to.have.property('label', 'C3');
     });
     it('gives correct callbacks to alignment rows', function () {
       var props = makeProps();
@@ -127,29 +135,31 @@ describe('AlignmentList', function () {
       expect(props.closeAlignment.calledWith()).to.be.true;
     });
     it('renders a trigger button when readOnly is false', function () {
-      var wrapper = shallow( /*#__PURE__*/React.createElement(AlignmentList, makeProps()), {
+      var wrapper = mount( /*#__PURE__*/React.createElement(AlignmentList, makeProps()), {
         disableLifecycleMethods: true
       });
-      expect(wrapper.find(triggerButtonSelector)).to.have.length(1);
+      expect(wrapper.find(IconPlusLine)).to.have.length(1);
     });
     it('does not render a trigger button when readOnly is true', function () {
-      var wrapper = shallow( /*#__PURE__*/React.createElement(AlignmentList, makeProps({
+      var wrapper = mount( /*#__PURE__*/React.createElement(AlignmentList, makeProps({
         readOnly: true
       })), {
         disableLifecycleMethods: true
       });
-      expect(wrapper.find(triggerButtonSelector)).to.have.length(0);
+      expect(wrapper.find(IconPlusLine)).to.have.length(0);
     });
     it('launches modal when trigger button clicked', function () {
       var props = makeProps();
-      var wrapper = shallow( /*#__PURE__*/React.createElement(AlignmentList, props), {
+      var wrapper = mount( /*#__PURE__*/React.createElement(AlignmentList, props), {
         disableLifecycleMethods: true
       });
-      wrapper.find(triggerButtonSelector).simulate('click');
+      wrapper.find(IconPlusLine).simulate('click');
       expect(props.openOutcomePicker.calledOnce).to.be.true;
     });
     it('focuses the add button when modal dismissed', function (done) {
-      var wrapper = mount( /*#__PURE__*/React.createElement(AlignmentList, makeProps()));
+      var wrapper = mount( /*#__PURE__*/React.createElement(AlignmentList, makeProps())); // Enzyme finds two AlignmentList components because of the instui decorator on the component
+
+      wrapper = wrapper.find('AlignmentList').at(1);
       setTimeout(function () {
         var trigger = wrapper.find('button').last();
         var focus = sinon.spy(trigger.instance(), 'focus');
@@ -165,7 +175,10 @@ describe('AlignmentList', function () {
       var props = makeProps();
       var wrapper = mount( /*#__PURE__*/React.createElement(AlignmentList, props));
       var first = wrapper.find('Alignment').at(0);
-      var label = first.instance().props.outcome.label;
+
+      var _first$prop = first.prop('outcome'),
+          label = _first$prop.label;
+
       var remove = first.prop('removeAlignment');
       remove();
       setTimeout(function () {
@@ -191,9 +204,9 @@ describe('AlignmentList', function () {
     it('focuses on the next alignment when first alignment deleted', function (done) {
       var wrapper = mount( /*#__PURE__*/React.createElement(AlignmentList, makeProps()));
       setTimeout(function () {
-        var first = wrapper.find('Alignment').at(0);
-        var next = wrapper.find('Alignment').at(1);
-        var focus = sinon.spy(next.instance(), 'focus');
+        // Enzyme finds extra Alignment components because of the instui decorator on the component
+        var first = wrapper.find('Alignment').at(1);
+        var focus = sinon.spy(wrapper.find('Alignment').at(3).instance(), 'focus');
         var remove = first.prop('removeAlignment');
         remove();
         setTimeout(function () {