@instructure/outcomes-ui 2.1.9 → 3.0.0

package/es/translated/fr-CA/components/OutcomeDescription/__tests__/index.test.js

@@ -4,6 +4,7 @@ import { shallow, mount } from 'enzyme';
 import OutcomeDescription from "../index.js";
 import checkA11y from "../../../test/checkA11y.js";
 import { ratings } from "../../../test/mockOutcomesData.js";
+import { Text } from '@instructure/ui-text';
 describe('OutcomeDescription', function () {
   function makeProps() {
     var props = arguments.length > 0 && arguments[0] !== void 0 ? arguments[0] : {};
@@ -58,7 +59,7 @@ describe('OutcomeDescription', function () {
       truncated: false
     });
     var wrapper = mount( /*#__PURE__*/React.createElement(OutcomeDescription, props));
-    var text = wrapper.find('Text').at(1);
+    var text = wrapper.find(Text).at(1);
     expect(text.text()).to.match(/Outcome Friendly Description/);
   });
   it('does not render a friendly description if not expanded', function () {
@@ -66,8 +67,8 @@ describe('OutcomeDescription', function () {
       friendlyDescription: 'Outcome Friendly Description'
     });
     var wrapper = mount( /*#__PURE__*/React.createElement(OutcomeDescription, props));
-    expect(wrapper.find('Text')).to.have.length(1);
-    var text = wrapper.find('Text').at(0);
+    expect(wrapper.find(Text)).to.have.length(1);
+    var text = wrapper.find(Text).at(0);
     expect(text.text()).not.to.match(/Outcome Friendly Description/);
   });
   it('renders the ratings if expanded', function () {

package/es/translated/fr-CA/components/OutcomeDescription/index.js

@@ -117,7 +117,7 @@ var OutcomeDescription = function OutcomeDescription(_ref) {
   };
 
   var renderFriendlyDescription = function renderFriendlyDescription() {
-    return friendlyDescription && /*#__PURE__*/React.createElement(React.Fragment, null, /*#__PURE__*/React.createElement(View, {
+    return friendlyDescription && /*#__PURE__*/React.createElement("div", null, /*#__PURE__*/React.createElement(View, {
       as: "div",
       margin: "x-small small 0 0",
       padding: "small small x-small small",
@@ -161,7 +161,7 @@ var OutcomeDescription = function OutcomeDescription(_ref) {
     }, formatCalculationMethodText()))));
   };
 
-  return /*#__PURE__*/React.createElement(React.Fragment, null, label && canManageOutcomes && /*#__PURE__*/React.createElement(View, {
+  return /*#__PURE__*/React.createElement("div", null, label && canManageOutcomes && /*#__PURE__*/React.createElement(View, {
     as: "div",
     margin: "0 0 xx-small"
   }, renderText(label, 'middle')), !truncated && canManageOutcomes && renderFriendlyDescription(), description && /*#__PURE__*/React.createElement(View, {

package/es/translated/fr-CA/components/OutcomeFolder/__tests__/index.test.js

@@ -1,9 +1,10 @@
 import { expect } from 'chai';
 import React from 'react';
 import sinon from 'sinon';
-import { shallow } from 'enzyme';
+import { shallow, mount } from 'enzyme';
 import OutcomeFolder from "../index.js";
 import checkA11y from "../../../test/checkA11y.js";
+import { Link } from '@instructure/ui-link';
 describe('OutcomeFolder', function () {
   function makeProps() {
     var props = arguments.length > 0 && arguments[0] !== void 0 ? arguments[0] : {};
@@ -22,10 +23,10 @@ describe('OutcomeFolder', function () {
 
   it('will set the active collection and expand when the title is clicked', function () {
     var props = makeProps();
-    var wrapper = shallow( /*#__PURE__*/React.createElement(OutcomeFolder, props), {
+    var wrapper = mount( /*#__PURE__*/React.createElement(OutcomeFolder, props), {
       disableLifecycleMethods: true
     });
-    var click = wrapper.find('Link').prop('onClick');
+    var click = wrapper.find(Link).prop('onClick');
     click();
     expect(props.setActiveCollection.calledOnce).to.be.true;
     expect(props.toggleExpandedIds.calledOnce).to.be.true;
@@ -34,10 +35,10 @@ describe('OutcomeFolder', function () {
     var props = makeProps({
       activeCollectionId: '1'
     });
-    var wrapper = shallow( /*#__PURE__*/React.createElement(OutcomeFolder, props), {
+    var wrapper = mount( /*#__PURE__*/React.createElement(OutcomeFolder, props), {
       disableLifecycleMethods: true
     });
-    var click = wrapper.find('Link').prop('onClick');
+    var click = wrapper.find(Link).prop('onClick');
     click();
     expect(props.toggleExpandedIds.calledWith({
       id: '1',

package/es/translated/fr-CA/components/OutcomeFolder/index.js

@@ -5,23 +5,17 @@ import _createSuper from "@babel/runtime/helpers/esm/createSuper";
 
 var _dec, _class, _class2, _temp;
 
+/** @jsx jsx */
 import React from 'react';
 import PropTypes from 'prop-types';
 import { Text } from '@instructure/ui-text';
 import { Link } from '@instructure/ui-link';
 import { IconFolderSolid } from '@instructure/ui-icons';
-import { themeable } from '@instructure/ui-themeable';
-import theme from "../theme.js";
-var styles = {
-  componentId: 'jBlIf',
-  template: function template(theme) {
-    return "\n\n.outcomes-ui__OutcomeFolder--folder {\n  display: flex;\n  align-content: flex-start;\n  padding: ".concat(theme.outcomePickerItemPadding || 'inherit', ";\n}\n\n.outcomes-ui__OutcomeFolder--folderIcon {\n  font-size: 1.5em;\n  height: 1.25rem;\n  width: 1.25rem;\n  margin-right: 0.5rem;\n}\n\n.outcomes-ui__OutcomeFolder--folderDetails {\n  padding-left: 0.5rem;\n}\n");
-  },
-  'folder': 'outcomes-ui__OutcomeFolder--folder',
-  'folderIcon': 'outcomes-ui__OutcomeFolder--folderIcon',
-  'folderDetails': 'outcomes-ui__OutcomeFolder--folderDetails'
-};
-var OutcomeFolder = (_dec = themeable(theme, styles), _dec(_class = (_temp = _class2 = /*#__PURE__*/function (_React$Component) {
+import { withStyle, jsx } from '@instructure/emotion';
+import generateComponentTheme from "../theme.js";
+import generateStyle from "./styles.js";
+import { stylesShape } from "../../store/shapes.js";
+var OutcomeFolder = (_dec = withStyle(generateStyle, generateComponentTheme), _dec(_class = (_temp = _class2 = /*#__PURE__*/function (_React$Component) {
   _inherits(OutcomeFolder, _React$Component);
 
   var _super = _createSuper(OutcomeFolder);
@@ -63,13 +57,13 @@ var OutcomeFolder = (_dec = themeable(theme, styles), _dec(_class = (_temp = _cl
       // their ancestor outcomes and put them into state. A necessary
       // reqt in order to render the tree picker.
 
-      return clickable ? /*#__PURE__*/React.createElement(Text, {
+      return clickable ? jsx(Text, {
         size: "small"
-      }, /*#__PURE__*/React.createElement(Link, {
+      }, jsx(Link, {
         onClick: function onClick() {
           return _this.handleClick(outcome.id);
         }
-      }, outcome.title)) : /*#__PURE__*/React.createElement(Text, {
+      }, outcome.title)) : jsx(Text, {
         size: "x-small"
       }, outcome.title);
     };
@@ -83,9 +77,9 @@ var OutcomeFolder = (_dec = themeable(theme, styles), _dec(_class = (_temp = _cl
       var getOutcomeSummary = this.props.getOutcomeSummary;
 
       if (getOutcomeSummary(outcome.id)) {
-        return /*#__PURE__*/React.createElement("div", {
-          className: styles.folderSummary
-        }, /*#__PURE__*/React.createElement(Text, {
+        return jsx("div", {
+          css: this.props.styles.folderSummary
+        }, jsx(Text, {
           size: "x-small"
         }, getOutcomeSummary(outcome.id)));
       }
@@ -94,17 +88,17 @@ var OutcomeFolder = (_dec = themeable(theme, styles), _dec(_class = (_temp = _cl
     key: "render",
     value: function render() {
       var outcome = this.props.outcome;
-      return /*#__PURE__*/React.createElement("div", {
-        className: styles.folder
-      }, /*#__PURE__*/React.createElement("div", {
-        className: styles.folderIcon
-      }, /*#__PURE__*/React.createElement(IconFolderSolid, null)), /*#__PURE__*/React.createElement("div", {
-        className: styles.folderDetails
-      }, /*#__PURE__*/React.createElement("div", {
+      return jsx("div", {
+        css: this.props.styles.folder
+      }, jsx("div", {
+        css: this.props.styles.folderIcon
+      }, jsx(IconFolderSolid, null)), jsx("div", {
+        css: this.props.styles.folderDetails
+      }, jsx("div", {
         "data-automation": "outcomeFolder__folderTitle"
-      }, this.renderTitle(outcome)), this.renderSummary(outcome), /*#__PURE__*/React.createElement("div", {
-        className: styles.folderDescription
-      }, /*#__PURE__*/React.createElement(Text, {
+      }, this.renderTitle(outcome)), this.renderSummary(outcome), jsx("div", {
+        css: this.props.styles.folderDescription
+      }, jsx(Text, {
         size: "x-small"
       }, outcome.label))));
     }
@@ -118,7 +112,8 @@ var OutcomeFolder = (_dec = themeable(theme, styles), _dec(_class = (_temp = _cl
   getOutcomeSummary: PropTypes.func.isRequired,
   setActiveCollection: PropTypes.func.isRequired,
   toggleExpandedIds: PropTypes.func.isRequired,
-  activeCollectionId: PropTypes.oneOfType([PropTypes.string, PropTypes.number])
+  activeCollectionId: PropTypes.oneOfType([PropTypes.string, PropTypes.number]),
+  styles: stylesShape
 }, _class2.defaultProps = {
   clickable: true,
   activeCollectionId: null

package/es/translated/fr-CA/components/OutcomeFolder/styles.js

@@ -0,0 +1,20 @@
+var generateStyle = function generateStyle(componentTheme) {
+  return {
+    folder: {
+      display: 'flex',
+      alignContent: 'flex-start',
+      padding: componentTheme.outcomePickerItemPadding
+    },
+    folderIcon: {
+      fontSize: '1.5em',
+      height: '1.25rem',
+      width: '1.25rem',
+      marginRight: '0.5rem'
+    },
+    folderDetails: {
+      paddingLeft: '0.5rem'
+    }
+  };
+};
+
+export default generateStyle;

package/es/translated/fr-CA/components/OutcomeFolderList/__tests__/index.test.js

@@ -1,9 +1,10 @@
 import { expect } from 'chai';
 import React from 'react';
 import sinon from 'sinon';
-import { shallow } from 'enzyme';
+import { shallow, mount } from 'enzyme';
 import OutcomeFolderList from "../index.js";
 import checkA11y from "../../../test/checkA11y.js";
+import OutcomeFolder from "../../OutcomeFolder/index.js";
 describe('OutcomeFolderList', function () {
   var outcomes = [{
     id: '1',
@@ -37,17 +38,17 @@ describe('OutcomeFolderList', function () {
     expect(wrapper.find('OutcomeFolder')).not.to.be.present;
   });
   it('renders a folder for each outcome', function () {
-    var wrapper = shallow( /*#__PURE__*/React.createElement(OutcomeFolderList, makeProps()), {
+    var wrapper = mount( /*#__PURE__*/React.createElement(OutcomeFolderList, makeProps()), {
       disableLifecycleMethods: true
     });
-    expect(wrapper.find('OutcomeFolder')).to.have.length(3);
+    expect(wrapper.find(OutcomeFolder)).to.have.length(3);
   });
   it('passes the right args to each checkbox', function () {
     var props = makeProps();
-    var wrapper = shallow( /*#__PURE__*/React.createElement(OutcomeFolderList, props), {
+    var wrapper = mount( /*#__PURE__*/React.createElement(OutcomeFolderList, props), {
       disableLifecycleMethods: true
     });
-    var folder = wrapper.find('OutcomeFolder').first();
+    var folder = wrapper.find(OutcomeFolder).first();
     expect(folder.prop('outcome')).to.deep.equal({
       id: '1',
       label: 'ABC',

package/es/translated/fr-CA/components/OutcomeFolderList/index.js

@@ -5,19 +5,15 @@ import _createSuper from "@babel/runtime/helpers/esm/createSuper";
 
 var _dec, _class, _class2, _temp;
 
+/** @jsx jsx */
 import React from 'react';
 import PropTypes from 'prop-types';
-import { themeable } from '@instructure/ui-themeable';
 import OutcomeFolder from "../OutcomeFolder/index.js";
-import theme from "../theme.js";
-var styles = {
-  componentId: 'cxqlf',
-  template: function template(theme) {
-    return "\n\n.outcomes-ui__OutcomeFolderList--picker {\n  padding-left: 1rem;\n}\n";
-  },
-  'picker': 'outcomes-ui__OutcomeFolderList--picker'
-};
-var OutcomeFolderList = (_dec = themeable(theme, styles), _dec(_class = (_temp = _class2 = /*#__PURE__*/function (_React$Component) {
+import { withStyle, jsx } from '@instructure/emotion';
+import generateComponentTheme from "../theme.js";
+import generateStyle from "./styles.js";
+import { stylesShape } from "../../store/shapes.js";
+var OutcomeFolderList = (_dec = withStyle(generateStyle, generateComponentTheme), _dec(_class = (_temp = _class2 = /*#__PURE__*/function (_React$Component) {
   _inherits(OutcomeFolderList, _React$Component);
 
   var _super = _createSuper(OutcomeFolderList);
@@ -40,13 +36,13 @@ var OutcomeFolderList = (_dec = themeable(theme, styles), _dec(_class = (_temp =
           activeCollectionId = _this$props.activeCollectionId;
 
       if (outcomes.length === 0) {
-        return /*#__PURE__*/React.createElement("div", null);
+        return jsx("div", null);
       }
 
-      return /*#__PURE__*/React.createElement("div", {
-        className: styles.picker
+      return jsx("div", {
+        css: this.props.styles.picker
       }, outcomes.map(function (outcome) {
-        return /*#__PURE__*/React.createElement(OutcomeFolder, {
+        return jsx(OutcomeFolder, {
           key: outcome.id,
           outcome: outcome,
           getOutcomeSummary: getOutcomeSummary,
@@ -65,7 +61,8 @@ var OutcomeFolderList = (_dec = themeable(theme, styles), _dec(_class = (_temp =
   setActiveCollection: PropTypes.func.isRequired,
   outcomes: PropTypes.array.isRequired,
   toggleExpandedIds: PropTypes.func.isRequired,
-  activeCollectionId: PropTypes.oneOfType([PropTypes.string, PropTypes.number])
+  activeCollectionId: PropTypes.oneOfType([PropTypes.string, PropTypes.number]),
+  styles: stylesShape
 }, _class2.defaultProps = {
   activeCollectionId: null
 }, _temp)) || _class);

package/es/translated/fr-CA/components/OutcomeFolderList/styles.js

@@ -0,0 +1,9 @@
+var generateStyle = function generateStyle() {
+  return {
+    picker: {
+      paddingLeft: '1rem'
+    }
+  };
+};
+
+export default generateStyle;

package/es/translated/fr-CA/components/OutcomeLabels/__tests__/index.test.js

@@ -1,6 +1,6 @@
 import { expect } from 'chai';
 import React from 'react';
-import { render, shallow } from 'enzyme';
+import { render, mount } from 'enzyme';
 import { IconOutcomesLine } from '@instructure/ui-icons';
 import OutcomeLabels from "../index.js";
 import checkA11y from "../../../test/checkA11y.js";
@@ -26,7 +26,7 @@ describe('OutcomeLabels', function () {
   }
 
   it('renders an icon', function () {
-    var wrapper = shallow( /*#__PURE__*/React.createElement(OutcomeLabels, makeProps()), {
+    var wrapper = mount( /*#__PURE__*/React.createElement(OutcomeLabels, makeProps()), {
       disableLifecycleMethods: true
     });
     expect(wrapper.find(IconOutcomesLine)).to.have.length(1);

package/es/translated/fr-CA/components/OutcomeLabels/index.js

@@ -5,60 +5,64 @@ import _createSuper from "@babel/runtime/helpers/esm/createSuper";
 
 var _dec, _class, _class2, _temp;
 
+/** @jsx jsx */
 import React from 'react';
 import PropTypes from 'prop-types';
 import { Text } from '@instructure/ui-text';
 import { IconOutcomesLine } from '@instructure/ui-icons';
-import { themeable } from '@instructure/ui-themeable';
-import theme from "../theme.js";
-var styles = {
-  componentId: 'bDQTN',
-  template: function template(theme) {
-    return "\n\n.outcomes-ui__OutcomeLabels--line {\n  display: flex;\n}\n\n.outcomes-ui__OutcomeLabels--text {\n  padding-left: ".concat(theme.outcomeLabelsSpacing || 'inherit', ";\n}\n\n.outcomes-ui__OutcomeLabels--pill {\n  display: inline-block;\n  float: left;\n  max-width: 12rem;\n  overflow: hidden;\n  text-overflow: ellipsis;\n  white-space: nowrap;\n}\n\n[dir=\"ltr\"] .outcomes-ui__OutcomeLabels--pill {\n  float: left;\n}\n\n[dir=\"rtl\"] .outcomes-ui__OutcomeLabels--pill {\n  float: left;\n}\n\n.outcomes-ui__OutcomeLabels--comma {\n  float: left;\n  width: 0.5rem;\n}\n\n[dir=\"ltr\"] .outcomes-ui__OutcomeLabels--comma {\n  float: left;\n}\n\n[dir=\"rtl\"] .outcomes-ui__OutcomeLabels--comma {\n  float: left;\n}\n");
-  },
-  'line': 'outcomes-ui__OutcomeLabels--line',
-  'text': 'outcomes-ui__OutcomeLabels--text',
-  'pill': 'outcomes-ui__OutcomeLabels--pill',
-  'comma': 'outcomes-ui__OutcomeLabels--comma'
-};
-
-var wrap = function wrap(str, includeComma) {
-  return /*#__PURE__*/React.createElement("span", null, /*#__PURE__*/React.createElement("span", {
-    className: styles.pill
-  }, str), includeComma && /*#__PURE__*/React.createElement("span", {
-    className: styles.comma
-  }, ","));
-};
-
-var OutcomeLabels = (_dec = themeable(theme, styles), _dec(_class = (_temp = _class2 = /*#__PURE__*/function (_React$Component) {
+import { withStyle, jsx } from '@instructure/emotion';
+import generateComponentTheme from "../theme.js";
+import generateStyle from "./styles.js";
+import { stylesShape } from "../../store/shapes.js";
+var OutcomeLabels = (_dec = withStyle(generateStyle, generateComponentTheme), _dec(_class = (_temp = _class2 = /*#__PURE__*/function (_React$Component) {
   _inherits(OutcomeLabels, _React$Component);
 
   var _super = _createSuper(OutcomeLabels);
 
   function OutcomeLabels() {
+    var _this;
+
     _classCallCheck(this, OutcomeLabels);
 
-    return _super.apply(this, arguments);
+    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.wrap = function (str, includeComma) {
+      return jsx("span", {
+        key: str
+      }, jsx("span", {
+        css: _this.props.styles.pill
+      }, str), includeComma && jsx("span", {
+        css: _this.props.styles.comma
+      }, ","));
+    };
+
+    return _this;
   }
 
   _createClass(OutcomeLabels, [{
     key: "render",
-    value: // eslint-disable-next-line no-undef
-    function render() {
+    value: function render() {
+      var _this2 = this;
+
       var _this$props = this.props,
           outcomes = _this$props.outcomes,
           emptyText = _this$props.emptyText;
-      return /*#__PURE__*/React.createElement("div", {
-        className: styles.line,
-        "data-automation": "outcomeLabel__alignedOutcomes"
-      }, /*#__PURE__*/React.createElement(Text, {
+      return jsx("div", {
+        css: this.props.styles.line,
+        "data-automation": "outcomeLabel__alignedOutcomes",
+        "data-testid": "prueba"
+      }, jsx(Text, {
         size: "medium"
-      }, /*#__PURE__*/React.createElement(IconOutcomesLine, null)), /*#__PURE__*/React.createElement(Text, {
+      }, jsx(IconOutcomesLine, null)), jsx(Text, {
         size: "small"
-      }, /*#__PURE__*/React.createElement("div", {
-        className: styles.text
+      }, jsx("div", {
+        css: this.props.styles.text
       }, outcomes.length === 0 ? emptyText : outcomes.map(function (o, i) {
-        return wrap(o.title, i < outcomes.length - 1);
+        return _this2.wrap(o.title, i < outcomes.length - 1);
       }))));
     }
   }]);
@@ -67,6 +71,7 @@ var OutcomeLabels = (_dec = themeable(theme, styles), _dec(_class = (_temp = _cl
   return OutcomeLabels;
 }(React.Component), _class2.propTypes = {
   outcomes: PropTypes.array.isRequired,
-  emptyText: PropTypes.string.isRequired
+  emptyText: PropTypes.string.isRequired,
+  styles: stylesShape
 }, _temp)) || _class);
 export { OutcomeLabels as default };

package/es/translated/fr-CA/components/OutcomeLabels/styles.js

@@ -0,0 +1,24 @@
+var generateStyle = function generateStyle(componentTheme) {
+  return {
+    line: {
+      display: 'flex'
+    },
+    text: {
+      paddingLeft: componentTheme.outcomeLabelsSpacing
+    },
+    pill: {
+      display: 'inline-block',
+      cssFloat: 'left',
+      maxWidth: '12rem',
+      overflow: 'hidden',
+      textOverflow: 'ellipsis',
+      whiteSpace: 'nowrap'
+    },
+    comma: {
+      cssFloat: 'left',
+      width: '0.5rem'
+    }
+  };
+};
+
+export default generateStyle;

package/es/translated/fr-CA/components/OutcomePicker/__tests__/index.test.js

@@ -7,6 +7,7 @@ import OutcomePicker from "../index.js";
 import OutcomeViewModal from "../../OutcomeViewModal/index.js";
 import OutcomeTree from "../../OutcomeTree/index.js";
 import checkA11y from "../../../test/checkA11y.js";
+import { TextInput } from '@instructure/ui-text-input';
 describe('OutcomePicker', function () {
   function makeProps() {
     var props = arguments.length > 0 && arguments[0] !== void 0 ? arguments[0] : {};
@@ -133,7 +134,7 @@ describe('OutcomePicker', function () {
   it('correctly calls updateSearchText when search text is changed', function () {
     var props = makeProps();
     var wrapper = mount( /*#__PURE__*/React.createElement(OutcomePicker, props));
-    var onChange = wrapper.find('TextInput').prop('onChange');
+    var onChange = wrapper.find(TextInput).prop('onChange');
     onChange('', 'abc');
     expect(props.updateSearchText).to.be.called.once;
     expect(props.updateSearchText).to.be.calledWith('abc');

package/es/translated/fr-CA/components/OutcomePickerModal/__tests__/index.test.js

@@ -4,9 +4,10 @@ import sinon from 'sinon';
 import { shallow, mount } from 'enzyme';
 import checkA11y from "../../../test/checkA11y.js";
 import OutcomePickerModal from "../index.js";
+import { Modal } from '@instructure/ui-modal';
 describe('OutcomePickerModal', function () {
-  var primaryButtonSelector = 'Button[variant="primary"]';
-  var cancelButtonSelector = 'Button[variant="default"]';
+  var primaryButtonSelector = 'Button[data-automation="outcomePicker__submitButton"]';
+  var cancelButtonSelector = 'Button[data-automation="outcomePicker__cancelButton"]';
 
   function makeProps() {
     var props = arguments.length > 0 && arguments[0] !== void 0 ? arguments[0] : {};
@@ -86,30 +87,33 @@ describe('OutcomePickerModal', function () {
       outcomePickerState: 'choosing',
       anyOutcomeSelected: true
     });
-    var wrapper = shallow( /*#__PURE__*/React.createElement(OutcomePickerModal, props));
-    expect(wrapper.find(primaryButtonSelector).childAt(0).text()).to.equal('Confirm Alignments');
+    var wrapper = mount( /*#__PURE__*/React.createElement(OutcomePickerModal, props)); // Enzyme finds two Button components because of the instui decorator on the component
+
+    expect(wrapper.find(primaryButtonSelector).at(0).childAt(0).text()).to.equal('Confirm Alignments');
   });
   it('shows "Done" when picker in choosing state and no outcome is selected', function () {
     var props = makeProps({
       outcomePickerState: 'choosing',
       anyOutcomeSelected: false
     });
-    var wrapper = shallow( /*#__PURE__*/React.createElement(OutcomePickerModal, props));
-    expect(wrapper.find(primaryButtonSelector).childAt(0).text()).to.equal('Done');
+    var wrapper = shallow( /*#__PURE__*/React.createElement(OutcomePickerModal, props)); // Enzyme finds two Button components because of the instui decorator on the component
+
+    expect(wrapper.find(primaryButtonSelector).at(0).childAt(0).text()).to.equal('Done');
   });
   it('shows "OK" when picker in complete state', function () {
     var props = makeProps({
       outcomePickerState: 'complete'
     });
-    var wrapper = shallow( /*#__PURE__*/React.createElement(OutcomePickerModal, props));
-    expect(wrapper.find(primaryButtonSelector).childAt(0).text()).to.equal('OK');
+    var wrapper = shallow( /*#__PURE__*/React.createElement(OutcomePickerModal, props)); // Enzyme finds two Button components because of the instui decorator on the component
+
+    expect(wrapper.find(primaryButtonSelector).at(0).childAt(0).text()).to.equal('OK');
   });
   it('has Done and Cancel buttons disabled when picker in loading state', function () {
     var props = makeProps({
       outcomePickerState: 'loading'
     });
     var wrapper = shallow( /*#__PURE__*/React.createElement(OutcomePickerModal, props));
-    expect(wrapper.find(primaryButtonSelector).childAt(0).text()).to.equal('Done');
+    expect(wrapper.find(primaryButtonSelector).at(0).childAt(0).text()).to.equal('Done');
     wrapper.find('ModalFooter Button').forEach(function (btn) {
       expect(btn.prop('disabled')).to.equal(true);
     });
@@ -118,8 +122,9 @@ describe('OutcomePickerModal', function () {
     var props = makeProps({
       outcomePickerState: 'saving'
     });
-    var wrapper = shallow( /*#__PURE__*/React.createElement(OutcomePickerModal, props));
-    expect(wrapper.find(primaryButtonSelector).childAt(0).text()).to.equal('OK');
+    var wrapper = shallow( /*#__PURE__*/React.createElement(OutcomePickerModal, props)); // Enzyme finds two Button components because of the instui decorator on the component
+
+    expect(wrapper.find(primaryButtonSelector).at(0).childAt(0).text()).to.equal('OK');
     wrapper.find('ModalFooter Button').forEach(function (btn) {
       expect(btn.prop('disabled')).to.equal(true);
     });
@@ -128,8 +133,9 @@ describe('OutcomePickerModal', function () {
     var props = makeProps({
       outcomePickerState: 'saving'
     });
-    var wrapper = shallow( /*#__PURE__*/React.createElement(OutcomePickerModal, props));
-    wrapper.find(primaryButtonSelector).simulate('click');
+    var wrapper = shallow( /*#__PURE__*/React.createElement(OutcomePickerModal, props)); // Enzyme finds two Button components because of the instui decorator on the component
+
+    wrapper.find(primaryButtonSelector).at(0).simulate('click');
     expect(props.saveOutcomePickerAlignments.calledOnce).to.be.true;
     expect(props.saveOutcomePickerAlignments.calledWith(props.onUpdate)).to.be.true;
   });
@@ -138,7 +144,7 @@ describe('OutcomePickerModal', function () {
       outcomePickerState: 'saving'
     });
     var wrapper = shallow( /*#__PURE__*/React.createElement(OutcomePickerModal, props));
-    wrapper.find(primaryButtonSelector).simulate('click');
+    wrapper.find(primaryButtonSelector).at(0).simulate('click');
     setTimeout(function () {
       expect(props.closeOutcomePicker.called).to.be.true;
       done();
@@ -149,7 +155,7 @@ describe('OutcomePickerModal', function () {
       outcomePickerState: 'closed'
     });
     var wrapper = mount( /*#__PURE__*/React.createElement(OutcomePickerModal, props));
-    wrapper.find('Modal').prop('onClose')();
+    wrapper.find(Modal).prop('onClose')();
     setTimeout(function () {
       expect(props.onModalClose.calledOnce).to.be.true;
       done();
@@ -159,8 +165,9 @@ describe('OutcomePickerModal', function () {
     var props = makeProps({
       outcomePickerState: 'saving'
     });
-    var wrapper = shallow( /*#__PURE__*/React.createElement(OutcomePickerModal, props));
-    wrapper.find(cancelButtonSelector).simulate('click');
+    var wrapper = shallow( /*#__PURE__*/React.createElement(OutcomePickerModal, props)); // Enzyme finds two Button components because of the instui decorator on the component
+
+    wrapper.find(cancelButtonSelector).at(0).simulate('click');
     expect(props.saveOutcomePickerAlignments.called).to.be.false;
   });
   it('triggers closeOutcomePicker on closeButton click', function () {
@@ -168,7 +175,7 @@ describe('OutcomePickerModal', function () {
       outcomePickerState: 'saving'
     });
     var wrapper = shallow( /*#__PURE__*/React.createElement(OutcomePickerModal, props));
-    wrapper.find(cancelButtonSelector).simulate('click');
+    wrapper.find(cancelButtonSelector).at(0).simulate('click');
     expect(props.closeOutcomePicker.called).to.be.true;
   });
   it('meets a11y standards', function () {

package/es/translated/fr-CA/components/OutcomePickerModal/index.js

@@ -133,8 +133,8 @@ var OutcomePickerModal = /*#__PURE__*/function (_React$Component) {
           return _this2.handleModalRequestClose();
         },
         placement: "end",
-        variant: "icon"
-      }, "Annuler"), /*#__PURE__*/React.createElement(Heading, null, /*#__PURE__*/React.createElement(Text, {
+        screenReaderLabel: "Annuler"
+      }), /*#__PURE__*/React.createElement(Heading, null, /*#__PURE__*/React.createElement(Text, {
         size: "large"
       }, "Acquis joints"))), /*#__PURE__*/React.createElement(ModalBody, {
         padding: "0",
@@ -162,7 +162,6 @@ var OutcomePickerModal = /*#__PURE__*/function (_React$Component) {
         onClick: function onClick() {
           return _this2.handleModalRequestClose();
         },
-        variant: "default",
         disabled: disabled,
         "data-automation": "outcomePicker__cancelButton"
       }, "Annuler"), /*#__PURE__*/React.createElement(Button, {
@@ -170,7 +169,7 @@ var OutcomePickerModal = /*#__PURE__*/function (_React$Component) {
         onClick: function onClick() {
           return _this2.handleSubmit();
         },
-        variant: "primary",
+        color: "primary",
         disabled: disabled,
         "data-automation": "outcomePicker__submitButton"
       }, this.submitText()))));
@@ -198,7 +197,6 @@ OutcomePickerModal.propTypes = {
   artifactTypeName: PropTypes.string,
   displayMasteryDescription: PropTypes.bool,
   displayMasteryPercentText: PropTypes.bool,
-  setSearchText: PropTypes.func.isRequired,
   screenreaderNotification: PropTypes.func,
   liveRegion: Modal.propTypes.liveRegion,
   mountNode: Modal.propTypes.mountNode