@instructure/outcomes-ui 2.1.9 → 3.0.0

package/lib/translated/nb-x-k12/components/OutcomeFolder/index.js

@@ -25,22 +25,17 @@ var _uiLink = require("@instructure/ui-link");
 
 var _uiIcons = require("@instructure/ui-icons");
 
-var _uiThemeable = require("@instructure/ui-themeable");
+var _emotion = require("@instructure/emotion");
 
 var _theme = _interopRequireDefault(require("../theme.js"));
 
+var _styles = _interopRequireDefault(require("./styles.js"));
+
+var _shapes = require("../../store/shapes.js");
+
 var _dec, _class, _class2, _temp;
 
-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 = (0, _uiThemeable.themeable)(_theme.default, styles), _dec(_class = (_temp = _class2 = /*#__PURE__*/function (_React$Component) {
+var OutcomeFolder = (_dec = (0, _emotion.withStyle)(_styles.default, _theme.default), _dec(_class = (_temp = _class2 = /*#__PURE__*/function (_React$Component) {
   (0, _inherits2.default)(OutcomeFolder, _React$Component);
 
   var _super = (0, _createSuper2.default)(OutcomeFolder);
@@ -82,13 +77,13 @@ var OutcomeFolder = (_dec = (0, _uiThemeable.themeable)(_theme.default, styles),
       // their ancestor outcomes and put them into state. A necessary
       // reqt in order to render the tree picker.
 
-      return clickable ? /*#__PURE__*/_react.default.createElement(_uiText.Text, {
+      return clickable ? (0, _emotion.jsx)(_uiText.Text, {
         size: "small"
-      }, /*#__PURE__*/_react.default.createElement(_uiLink.Link, {
+      }, (0, _emotion.jsx)(_uiLink.Link, {
         onClick: function onClick() {
           return _this.handleClick(outcome.id);
         }
-      }, outcome.title)) : /*#__PURE__*/_react.default.createElement(_uiText.Text, {
+      }, outcome.title)) : (0, _emotion.jsx)(_uiText.Text, {
         size: "x-small"
       }, outcome.title);
     };
@@ -102,9 +97,9 @@ var OutcomeFolder = (_dec = (0, _uiThemeable.themeable)(_theme.default, styles),
       var getOutcomeSummary = this.props.getOutcomeSummary;
 
       if (getOutcomeSummary(outcome.id)) {
-        return /*#__PURE__*/_react.default.createElement("div", {
-          className: styles.folderSummary
-        }, /*#__PURE__*/_react.default.createElement(_uiText.Text, {
+        return (0, _emotion.jsx)("div", {
+          css: this.props.styles.folderSummary
+        }, (0, _emotion.jsx)(_uiText.Text, {
           size: "x-small"
         }, getOutcomeSummary(outcome.id)));
       }
@@ -113,17 +108,17 @@ var OutcomeFolder = (_dec = (0, _uiThemeable.themeable)(_theme.default, styles),
     key: "render",
     value: function render() {
       var outcome = this.props.outcome;
-      return /*#__PURE__*/_react.default.createElement("div", {
-        className: styles.folder
-      }, /*#__PURE__*/_react.default.createElement("div", {
-        className: styles.folderIcon
-      }, /*#__PURE__*/_react.default.createElement(_uiIcons.IconFolderSolid, null)), /*#__PURE__*/_react.default.createElement("div", {
-        className: styles.folderDetails
-      }, /*#__PURE__*/_react.default.createElement("div", {
+      return (0, _emotion.jsx)("div", {
+        css: this.props.styles.folder
+      }, (0, _emotion.jsx)("div", {
+        css: this.props.styles.folderIcon
+      }, (0, _emotion.jsx)(_uiIcons.IconFolderSolid, null)), (0, _emotion.jsx)("div", {
+        css: this.props.styles.folderDetails
+      }, (0, _emotion.jsx)("div", {
         "data-automation": "outcomeFolder__folderTitle"
-      }, this.renderTitle(outcome)), this.renderSummary(outcome), /*#__PURE__*/_react.default.createElement("div", {
-        className: styles.folderDescription
-      }, /*#__PURE__*/_react.default.createElement(_uiText.Text, {
+      }, this.renderTitle(outcome)), this.renderSummary(outcome), (0, _emotion.jsx)("div", {
+        css: this.props.styles.folderDescription
+      }, (0, _emotion.jsx)(_uiText.Text, {
         size: "x-small"
       }, outcome.label))));
     }
@@ -136,7 +131,8 @@ var OutcomeFolder = (_dec = (0, _uiThemeable.themeable)(_theme.default, styles),
   getOutcomeSummary: _propTypes.default.func.isRequired,
   setActiveCollection: _propTypes.default.func.isRequired,
   toggleExpandedIds: _propTypes.default.func.isRequired,
-  activeCollectionId: _propTypes.default.oneOfType([_propTypes.default.string, _propTypes.default.number])
+  activeCollectionId: _propTypes.default.oneOfType([_propTypes.default.string, _propTypes.default.number]),
+  styles: _shapes.stylesShape
 }, _class2.defaultProps = {
   clickable: true,
   activeCollectionId: null

package/lib/translated/nb-x-k12/components/OutcomeFolder/styles.js

@@ -0,0 +1,28 @@
+"use strict";
+
+Object.defineProperty(exports, "__esModule", {
+  value: true
+});
+exports.default = void 0;
+
+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'
+    }
+  };
+};
+
+var _default = generateStyle;
+exports.default = _default;

package/lib/translated/nb-x-k12/components/OutcomeFolderList/__tests__/index.test.js

@@ -14,6 +14,8 @@ var _index = _interopRequireDefault(require("../index.js"));
 
 var _checkA11y = _interopRequireDefault(require("../../../test/checkA11y.js"));
 
+var _index2 = _interopRequireDefault(require("../../OutcomeFolder/index.js"));
+
 describe('OutcomeFolderList', function () {
   var outcomes = [{
     id: '1',
@@ -47,17 +49,17 @@ describe('OutcomeFolderList', function () {
     (0, _chai.expect)(wrapper.find('OutcomeFolder')).not.to.be.present;
   });
   it('renders a folder for each outcome', 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('OutcomeFolder')).to.have.length(3);
+    (0, _chai.expect)(wrapper.find(_index2.default)).to.have.length(3);
   });
   it('passes the right args to each checkbox', 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
     });
-    var folder = wrapper.find('OutcomeFolder').first();
+    var folder = wrapper.find(_index2.default).first();
     (0, _chai.expect)(folder.prop('outcome')).to.deep.equal({
       id: '1',
       label: 'ABC',

package/lib/translated/nb-x-k12/components/OutcomeFolderList/index.js

@@ -19,22 +19,19 @@ var _react = _interopRequireDefault(require("react"));
 
 var _propTypes = _interopRequireDefault(require("prop-types"));
 
-var _uiThemeable = require("@instructure/ui-themeable");
-
 var _index = _interopRequireDefault(require("../OutcomeFolder/index.js"));
 
+var _emotion = require("@instructure/emotion");
+
 var _theme = _interopRequireDefault(require("../theme.js"));
 
+var _styles = _interopRequireDefault(require("./styles.js"));
+
+var _shapes = require("../../store/shapes.js");
+
 var _dec, _class, _class2, _temp;
 
-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 = (0, _uiThemeable.themeable)(_theme.default, styles), _dec(_class = (_temp = _class2 = /*#__PURE__*/function (_React$Component) {
+var OutcomeFolderList = (_dec = (0, _emotion.withStyle)(_styles.default, _theme.default), _dec(_class = (_temp = _class2 = /*#__PURE__*/function (_React$Component) {
   (0, _inherits2.default)(OutcomeFolderList, _React$Component);
 
   var _super = (0, _createSuper2.default)(OutcomeFolderList);
@@ -56,13 +53,13 @@ var OutcomeFolderList = (_dec = (0, _uiThemeable.themeable)(_theme.default, styl
           activeCollectionId = _this$props.activeCollectionId;
 
       if (outcomes.length === 0) {
-        return /*#__PURE__*/_react.default.createElement("div", null);
+        return (0, _emotion.jsx)("div", null);
       }
 
-      return /*#__PURE__*/_react.default.createElement("div", {
-        className: styles.picker
+      return (0, _emotion.jsx)("div", {
+        css: this.props.styles.picker
       }, outcomes.map(function (outcome) {
-        return /*#__PURE__*/_react.default.createElement(_index.default, {
+        return (0, _emotion.jsx)(_index.default, {
           key: outcome.id,
           outcome: outcome,
           getOutcomeSummary: getOutcomeSummary,
@@ -80,7 +77,8 @@ var OutcomeFolderList = (_dec = (0, _uiThemeable.themeable)(_theme.default, styl
   setActiveCollection: _propTypes.default.func.isRequired,
   outcomes: _propTypes.default.array.isRequired,
   toggleExpandedIds: _propTypes.default.func.isRequired,
-  activeCollectionId: _propTypes.default.oneOfType([_propTypes.default.string, _propTypes.default.number])
+  activeCollectionId: _propTypes.default.oneOfType([_propTypes.default.string, _propTypes.default.number]),
+  styles: _shapes.stylesShape
 }, _class2.defaultProps = {
   activeCollectionId: null
 }, _temp)) || _class);

package/lib/translated/nb-x-k12/components/OutcomeFolderList/styles.js

@@ -0,0 +1,17 @@
+"use strict";
+
+Object.defineProperty(exports, "__esModule", {
+  value: true
+});
+exports.default = void 0;
+
+var generateStyle = function generateStyle() {
+  return {
+    picker: {
+      paddingLeft: '1rem'
+    }
+  };
+};
+
+var _default = generateStyle;
+exports.default = _default;

package/lib/translated/nb-x-k12/components/OutcomeLabels/__tests__/index.test.js

@@ -36,7 +36,7 @@ describe('OutcomeLabels', function () {
   }
 
   it('renders an icon', 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(_uiIcons.IconOutcomesLine)).to.have.length(1);

package/lib/translated/nb-x-k12/components/OutcomeLabels/index.js

@@ -23,59 +23,65 @@ var _uiText = require("@instructure/ui-text");
 
 var _uiIcons = require("@instructure/ui-icons");
 
-var _uiThemeable = require("@instructure/ui-themeable");
+var _emotion = require("@instructure/emotion");
 
 var _theme = _interopRequireDefault(require("../theme.js"));
 
+var _styles = _interopRequireDefault(require("./styles.js"));
+
+var _shapes = require("../../store/shapes.js");
+
 var _dec, _class, _class2, _temp;
 
-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.default.createElement("span", null, /*#__PURE__*/_react.default.createElement("span", {
-    className: styles.pill
-  }, str), includeComma && /*#__PURE__*/_react.default.createElement("span", {
-    className: styles.comma
-  }, ","));
-};
-
-var OutcomeLabels = (_dec = (0, _uiThemeable.themeable)(_theme.default, styles), _dec(_class = (_temp = _class2 = /*#__PURE__*/function (_React$Component) {
+var OutcomeLabels = (_dec = (0, _emotion.withStyle)(_styles.default, _theme.default), _dec(_class = (_temp = _class2 = /*#__PURE__*/function (_React$Component) {
   (0, _inherits2.default)(OutcomeLabels, _React$Component);
 
   var _super = (0, _createSuper2.default)(OutcomeLabels);
 
   function OutcomeLabels() {
+    var _this;
+
     (0, _classCallCheck2.default)(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 (0, _emotion.jsx)("span", {
+        key: str
+      }, (0, _emotion.jsx)("span", {
+        css: _this.props.styles.pill
+      }, str), includeComma && (0, _emotion.jsx)("span", {
+        css: _this.props.styles.comma
+      }, ","));
+    };
+
+    return _this;
   }
 
   (0, _createClass2.default)(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.default.createElement("div", {
-        className: styles.line,
-        "data-automation": "outcomeLabel__alignedOutcomes"
-      }, /*#__PURE__*/_react.default.createElement(_uiText.Text, {
+      return (0, _emotion.jsx)("div", {
+        css: this.props.styles.line,
+        "data-automation": "outcomeLabel__alignedOutcomes",
+        "data-testid": "prueba"
+      }, (0, _emotion.jsx)(_uiText.Text, {
         size: "medium"
-      }, /*#__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: "small"
-      }, /*#__PURE__*/_react.default.createElement("div", {
-        className: styles.text
+      }, (0, _emotion.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);
       }))));
     }
   }]);
@@ -83,6 +89,7 @@ var OutcomeLabels = (_dec = (0, _uiThemeable.themeable)(_theme.default, styles),
   return OutcomeLabels;
 }(_react.default.Component), _class2.propTypes = {
   outcomes: _propTypes.default.array.isRequired,
-  emptyText: _propTypes.default.string.isRequired
+  emptyText: _propTypes.default.string.isRequired,
+  styles: _shapes.stylesShape
 }, _temp)) || _class);
 exports.default = OutcomeLabels;

package/lib/translated/nb-x-k12/components/OutcomeLabels/styles.js

@@ -0,0 +1,32 @@
+"use strict";
+
+Object.defineProperty(exports, "__esModule", {
+  value: true
+});
+exports.default = void 0;
+
+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'
+    }
+  };
+};
+
+var _default = generateStyle;
+exports.default = _default;

package/lib/translated/nb-x-k12/components/OutcomePicker/__tests__/index.test.js

@@ -20,6 +20,8 @@ var _index3 = _interopRequireDefault(require("../../OutcomeTree/index.js"));
 
 var _checkA11y = _interopRequireDefault(require("../../../test/checkA11y.js"));
 
+var _uiTextInput = require("@instructure/ui-text-input");
+
 describe('OutcomePicker', function () {
   function makeProps() {
     var props = arguments.length > 0 && arguments[0] !== void 0 ? arguments[0] : {};
@@ -146,7 +148,7 @@ describe('OutcomePicker', function () {
   it('correctly calls updateSearchText when search text is changed', function () {
     var props = makeProps();
     var wrapper = (0, _enzyme.mount)( /*#__PURE__*/_react.default.createElement(_index.default, props));
-    var onChange = wrapper.find('TextInput').prop('onChange');
+    var onChange = wrapper.find(_uiTextInput.TextInput).prop('onChange');
     onChange('', 'abc');
     (0, _chai.expect)(props.updateSearchText).to.be.called.once;
     (0, _chai.expect)(props.updateSearchText).to.be.calledWith('abc');

package/lib/translated/nb-x-k12/components/OutcomePickerModal/__tests__/index.test.js

@@ -14,9 +14,11 @@ var _checkA11y = _interopRequireDefault(require("../../../test/checkA11y.js"));
 
 var _index = _interopRequireDefault(require("../index.js"));
 
+var _uiModal = require("@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] : {};
@@ -96,30 +98,33 @@ describe('OutcomePickerModal', function () {
       outcomePickerState: 'choosing',
       anyOutcomeSelected: true
     });
-    var wrapper = (0, _enzyme.shallow)( /*#__PURE__*/_react.default.createElement(_index.default, props));
-    (0, _chai.expect)(wrapper.find(primaryButtonSelector).childAt(0).text()).to.equal('Confirm Alignments');
+    var wrapper = (0, _enzyme.mount)( /*#__PURE__*/_react.default.createElement(_index.default, props)); // Enzyme finds two Button components because of the instui decorator on the component
+
+    (0, _chai.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 = (0, _enzyme.shallow)( /*#__PURE__*/_react.default.createElement(_index.default, props));
-    (0, _chai.expect)(wrapper.find(primaryButtonSelector).childAt(0).text()).to.equal('Done');
+    var wrapper = (0, _enzyme.shallow)( /*#__PURE__*/_react.default.createElement(_index.default, props)); // Enzyme finds two Button components because of the instui decorator on the component
+
+    (0, _chai.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 = (0, _enzyme.shallow)( /*#__PURE__*/_react.default.createElement(_index.default, props));
-    (0, _chai.expect)(wrapper.find(primaryButtonSelector).childAt(0).text()).to.equal('OK');
+    var wrapper = (0, _enzyme.shallow)( /*#__PURE__*/_react.default.createElement(_index.default, props)); // Enzyme finds two Button components because of the instui decorator on the component
+
+    (0, _chai.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 = (0, _enzyme.shallow)( /*#__PURE__*/_react.default.createElement(_index.default, props));
-    (0, _chai.expect)(wrapper.find(primaryButtonSelector).childAt(0).text()).to.equal('Done');
+    (0, _chai.expect)(wrapper.find(primaryButtonSelector).at(0).childAt(0).text()).to.equal('Done');
     wrapper.find('ModalFooter Button').forEach(function (btn) {
       (0, _chai.expect)(btn.prop('disabled')).to.equal(true);
     });
@@ -128,8 +133,9 @@ describe('OutcomePickerModal', function () {
     var props = makeProps({
       outcomePickerState: 'saving'
     });
-    var wrapper = (0, _enzyme.shallow)( /*#__PURE__*/_react.default.createElement(_index.default, props));
-    (0, _chai.expect)(wrapper.find(primaryButtonSelector).childAt(0).text()).to.equal('OK');
+    var wrapper = (0, _enzyme.shallow)( /*#__PURE__*/_react.default.createElement(_index.default, props)); // Enzyme finds two Button components because of the instui decorator on the component
+
+    (0, _chai.expect)(wrapper.find(primaryButtonSelector).at(0).childAt(0).text()).to.equal('OK');
     wrapper.find('ModalFooter Button').forEach(function (btn) {
       (0, _chai.expect)(btn.prop('disabled')).to.equal(true);
     });
@@ -138,8 +144,9 @@ describe('OutcomePickerModal', function () {
     var props = makeProps({
       outcomePickerState: 'saving'
     });
-    var wrapper = (0, _enzyme.shallow)( /*#__PURE__*/_react.default.createElement(_index.default, props));
-    wrapper.find(primaryButtonSelector).simulate('click');
+    var wrapper = (0, _enzyme.shallow)( /*#__PURE__*/_react.default.createElement(_index.default, props)); // Enzyme finds two Button components because of the instui decorator on the component
+
+    wrapper.find(primaryButtonSelector).at(0).simulate('click');
     (0, _chai.expect)(props.saveOutcomePickerAlignments.calledOnce).to.be.true;
     (0, _chai.expect)(props.saveOutcomePickerAlignments.calledWith(props.onUpdate)).to.be.true;
   });
@@ -148,7 +155,7 @@ describe('OutcomePickerModal', function () {
       outcomePickerState: 'saving'
     });
     var wrapper = (0, _enzyme.shallow)( /*#__PURE__*/_react.default.createElement(_index.default, props));
-    wrapper.find(primaryButtonSelector).simulate('click');
+    wrapper.find(primaryButtonSelector).at(0).simulate('click');
     setTimeout(function () {
       (0, _chai.expect)(props.closeOutcomePicker.called).to.be.true;
       done();
@@ -159,7 +166,7 @@ describe('OutcomePickerModal', function () {
       outcomePickerState: 'closed'
     });
     var wrapper = (0, _enzyme.mount)( /*#__PURE__*/_react.default.createElement(_index.default, props));
-    wrapper.find('Modal').prop('onClose')();
+    wrapper.find(_uiModal.Modal).prop('onClose')();
     setTimeout(function () {
       (0, _chai.expect)(props.onModalClose.calledOnce).to.be.true;
       done();
@@ -169,8 +176,9 @@ describe('OutcomePickerModal', function () {
     var props = makeProps({
       outcomePickerState: 'saving'
     });
-    var wrapper = (0, _enzyme.shallow)( /*#__PURE__*/_react.default.createElement(_index.default, props));
-    wrapper.find(cancelButtonSelector).simulate('click');
+    var wrapper = (0, _enzyme.shallow)( /*#__PURE__*/_react.default.createElement(_index.default, props)); // Enzyme finds two Button components because of the instui decorator on the component
+
+    wrapper.find(cancelButtonSelector).at(0).simulate('click');
     (0, _chai.expect)(props.saveOutcomePickerAlignments.called).to.be.false;
   });
   it('triggers closeOutcomePicker on closeButton click', function () {
@@ -178,7 +186,7 @@ describe('OutcomePickerModal', function () {
       outcomePickerState: 'saving'
     });
     var wrapper = (0, _enzyme.shallow)( /*#__PURE__*/_react.default.createElement(_index.default, props));
-    wrapper.find(cancelButtonSelector).simulate('click');
+    wrapper.find(cancelButtonSelector).at(0).simulate('click');
     (0, _chai.expect)(props.closeOutcomePicker.called).to.be.true;
   });
   it('meets a11y standards', function () {

package/lib/translated/nb-x-k12/components/OutcomePickerModal/index.js

@@ -152,8 +152,8 @@ var OutcomePickerModal = /*#__PURE__*/function (_React$Component) {
           return _this2.handleModalRequestClose();
         },
         placement: "end",
-        variant: "icon"
-      }, "Avbryt"), /*#__PURE__*/_react.default.createElement(_uiHeading.Heading, null, /*#__PURE__*/_react.default.createElement(_uiText.Text, {
+        screenReaderLabel: "Avbryt"
+      }), /*#__PURE__*/_react.default.createElement(_uiHeading.Heading, null, /*#__PURE__*/_react.default.createElement(_uiText.Text, {
         size: "large"
       }, "Vedlagte m\xE5l"))), /*#__PURE__*/_react.default.createElement(ModalBody, {
         padding: "0",
@@ -181,7 +181,6 @@ var OutcomePickerModal = /*#__PURE__*/function (_React$Component) {
         onClick: function onClick() {
           return _this2.handleModalRequestClose();
         },
-        variant: "default",
         disabled: disabled,
         "data-automation": "outcomePicker__cancelButton"
       }, "Avbryt"), /*#__PURE__*/_react.default.createElement(_uiButtons.Button, {
@@ -189,7 +188,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()))));
@@ -217,7 +216,6 @@ OutcomePickerModal.propTypes = {
   artifactTypeName: _propTypes.default.string,
   displayMasteryDescription: _propTypes.default.bool,
   displayMasteryPercentText: _propTypes.default.bool,
-  setSearchText: _propTypes.default.func.isRequired,
   screenreaderNotification: _propTypes.default.func,
   liveRegion: _uiModal.Modal.propTypes.liveRegion,
   mountNode: _uiModal.Modal.propTypes.mountNode