@instructure/outcomes-ui 2.1.2 → 2.1.3

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

@@ -0,0 +1,122 @@
+import _classCallCheck from "@babel/runtime/helpers/esm/classCallCheck";
+import _createClass from "@babel/runtime/helpers/esm/createClass";
+import _inherits from "@babel/runtime/helpers/esm/inherits";
+import _createSuper from "@babel/runtime/helpers/esm/createSuper";
+
+var _dec, _class, _class2, _temp;
+
+import React from 'react';
+import PropTypes from 'prop-types';
+import { Checkbox } from '@instructure/ui-checkbox';
+import { Text } from '@instructure/ui-text';
+import { themeable } from '@instructure/ui-themeable';
+import OutcomeCheckbox from "../OutcomeCheckbox/index.js";
+import { outcomeShape } from "../../store/shapes.js";
+import theme from "../theme.js";
+var styles = {
+  componentId: 'fOGbT',
+  template: function template(theme) {
+    return "\n\n.outcomes-ui__OutcomeSelectionList--picker {\n  padding-left: 1rem;\n}\n\n.outcomes-ui__OutcomeSelectionList--checkbox {\n  padding: ".concat(theme.outcomePickerItemPadding || 'inherit', ";\n}\n\n.outcomes-ui__OutcomeSelectionList--checkboxLabel {\n  padding-left: 0.5rem;\n}\n");
+  },
+  'picker': 'outcomes-ui__OutcomeSelectionList--picker',
+  'checkbox': 'outcomes-ui__OutcomeSelectionList--checkbox',
+  'checkboxLabel': 'outcomes-ui__OutcomeSelectionList--checkboxLabel'
+};
+var OutcomeSelectionList = (_dec = themeable(theme, styles), _dec(_class = (_temp = _class2 = /*#__PURE__*/function (_React$Component) {
+  _inherits(OutcomeSelectionList, _React$Component);
+
+  var _super = _createSuper(OutcomeSelectionList);
+
+  function OutcomeSelectionList() {
+    _classCallCheck(this, OutcomeSelectionList);
+
+    return _super.apply(this, arguments);
+  }
+
+  _createClass(OutcomeSelectionList, [{
+    key: "allSelected",
+    value: // eslint-disable-next-line no-undef
+    function allSelected() {
+      var _this$props = this.props,
+          outcomes = _this$props.outcomes,
+          isOutcomeSelected = _this$props.isOutcomeSelected;
+      return outcomes.every(function (o) {
+        return isOutcomeSelected(o.id);
+      });
+    }
+  }, {
+    key: "toggleAllSelected",
+    value: function toggleAllSelected() {
+      var _this$props2 = this.props,
+          deselectOutcomeIds = _this$props2.deselectOutcomeIds,
+          selectOutcomeIds = _this$props2.selectOutcomeIds,
+          outcomes = _this$props2.outcomes;
+      var ids = outcomes.map(function (o) {
+        return o.id;
+      });
+
+      if (this.allSelected()) {
+        deselectOutcomeIds(ids);
+      } else {
+        selectOutcomeIds(ids);
+      }
+    }
+  }, {
+    key: "selectAllText",
+    value: function selectAllText() {
+      if (this.allSelected()) {
+        return "B\u1ECF ch\u1ECDn t\u1EA5t c\u1EA3";
+      } else {
+        return "Ch\u1ECDn t\u1EA5t c\u1EA3";
+      }
+    }
+  }, {
+    key: "render",
+    value: function render() {
+      var _this = this;
+
+      var _this$props3 = this.props,
+          outcomes = _this$props3.outcomes,
+          setFocusedOutcome = _this$props3.setFocusedOutcome;
+
+      if (outcomes.length === 0) {
+        return /*#__PURE__*/React.createElement("div", null);
+      }
+
+      return /*#__PURE__*/React.createElement("div", {
+        className: styles.picker,
+        "data-automation": "outcomeSelectionList__picker"
+      }, /*#__PURE__*/React.createElement("div", {
+        className: styles.checkbox
+      }, /*#__PURE__*/React.createElement(Checkbox, {
+        value: "selectAll",
+        checked: this.allSelected(),
+        onChange: function onChange() {
+          return _this.toggleAllSelected();
+        },
+        label: /*#__PURE__*/React.createElement("div", {
+          className: styles.checkboxLabel
+        }, /*#__PURE__*/React.createElement(Text, {
+          size: "small"
+        }, this.selectAllText()))
+      })), outcomes.map(function (o) {
+        return /*#__PURE__*/React.createElement("div", {
+          key: o.id
+        }, /*#__PURE__*/React.createElement(OutcomeCheckbox, Object.assign({
+          outcome: o,
+          setFocusedOutcome: setFocusedOutcome
+        }, _this.props)));
+      }));
+    }
+  }]);
+
+  OutcomeSelectionList.displayName = "OutcomeSelectionList";
+  return OutcomeSelectionList;
+}(React.Component), _class2.propTypes = {
+  setFocusedOutcome: PropTypes.func.isRequired,
+  isOutcomeSelected: PropTypes.func.isRequired,
+  selectOutcomeIds: PropTypes.func.isRequired,
+  deselectOutcomeIds: PropTypes.func.isRequired,
+  outcomes: PropTypes.arrayOf(outcomeShape).isRequired
+}, _temp)) || _class);
+export { OutcomeSelectionList as default };

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

@@ -0,0 +1,16 @@
+import React from 'react';
+import { object } from '@storybook/addon-knobs';
+import { defaultOutcomes } from "../../../.storybook/constants.js";
+import OutcomeSelectionList from "./index.js";
+export default {
+  title: 'OutcomeSelectionList'
+};
+export var standard = function standard() {
+  return /*#__PURE__*/React.createElement(OutcomeSelectionList, {
+    setFocusedOutcome: function setFocusedOutcome() {},
+    isOutcomeSelected: function isOutcomeSelected() {},
+    selectOutcomeIds: function selectOutcomeIds() {},
+    deselectOutcomeIds: function deselectOutcomeIds() {},
+    outcomes: object('Outcomes', defaultOutcomes())
+  });
+};

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

@@ -0,0 +1,11 @@
+.picker {
+  padding-left: 1rem;
+}
+
+.checkbox {
+  padding: var(--outcomePickerItemPadding);
+}
+
+.checkboxLabel {
+  padding-left: 0.5rem;
+}

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

@@ -0,0 +1,120 @@
+import { expect } from 'chai';
+import React from 'react';
+import sinon from 'sinon';
+import { render, shallow, mount } from 'enzyme';
+import { IconOutcomesLine } from '@instructure/ui-icons';
+import OutcomeTags from "../index.js";
+import checkA11y from "../../../test/checkA11y.js";
+describe('OutcomeTags', function () {
+  function makeProps() {
+    var props = arguments.length > 0 && arguments[0] !== void 0 ? arguments[0] : {};
+    var deselectOutcomeIds = sinon.stub();
+    var outcomes = [{
+      id: '1',
+      label: 'ABC',
+      title: 'Title1'
+    }, {
+      id: '2',
+      label: 'DEF',
+      title: 'Title2'
+    }, {
+      id: '3',
+      label: 'GHI',
+      title: 'Title3'
+    }];
+    return Object.assign({
+      outcomes: outcomes,
+      deselectOutcomeIds: deselectOutcomeIds
+    }, props);
+  }
+
+  it('renders an icon', function () {
+    var wrapper = shallow( /*#__PURE__*/React.createElement(OutcomeTags, makeProps()), {
+      disableLifecycleMethods: true
+    });
+    expect(wrapper.find(IconOutcomesLine)).to.have.length(1);
+  });
+  it('renders tags for each outcome', function () {
+    var wrapper = shallow( /*#__PURE__*/React.createElement(OutcomeTags, makeProps()), {
+      disableLifecycleMethods: true
+    });
+    expect(wrapper.find('Tag')).to.have.length(3);
+  });
+  it('removes alignment when tag is clicked', function () {
+    var props = makeProps();
+    var wrapper = mount( /*#__PURE__*/React.createElement(OutcomeTags, props));
+    wrapper.find('Tag').first().simulate('click');
+    expect(props.deselectOutcomeIds.calledOnce).to.be.true;
+    expect(props.deselectOutcomeIds.calledWith(['1'])).to.be.true;
+  });
+  it('renders outcome titles', function () {
+    var wrapper = render( /*#__PURE__*/React.createElement(OutcomeTags, makeProps()));
+    var text = wrapper.text();
+    expect(text.match(/Title1/)).to.be.truthy;
+    expect(text.match(/Title2/)).to.be.truthy;
+    expect(text.match(/Title3/)).to.be.truthy;
+  });
+  it('does not render outcome labels', function () {
+    var wrapper = render( /*#__PURE__*/React.createElement(OutcomeTags, makeProps()));
+    var text = wrapper.text();
+    expect(text.match(/ABC/)).to.be.falsey;
+    expect(text.match(/DEF/)).to.be.falsey;
+    expect(text.match(/GHI/)).to.be.falsey;
+  });
+  it('renders default text when outcome list empty', function () {
+    var props = makeProps({
+      outcomes: []
+    });
+    var wrapper = render( /*#__PURE__*/React.createElement(OutcomeTags, props));
+    expect(wrapper.text().match(/No Outcomes are currently selected/)).to.be.truthy;
+  });
+  it('focuses on the prior tag when current tag deleted', function (done) {
+    var wrapper = mount( /*#__PURE__*/React.createElement(OutcomeTags, makeProps()));
+    var focusInput = sinon.spy(wrapper.instance(), 'focusInput');
+    setTimeout(function () {
+      var last = wrapper.find('Tag').at(2);
+      var previous = wrapper.find('Tag').at(1);
+      var focus = sinon.spy(previous.find('button').instance(), 'focus');
+      var remove = last.prop('onClick');
+      remove();
+      setTimeout(function () {
+        expect(focus.calledOnce).to.be.true;
+        expect(focusInput.calledOnce).to.be.true;
+        done();
+      }, 1);
+    }, 1);
+  });
+  it('focuses on the next tag when the first tag is deleted', function (done) {
+    var wrapper = mount( /*#__PURE__*/React.createElement(OutcomeTags, makeProps()));
+    var focusInput = sinon.spy(wrapper.instance(), 'focusInput');
+    setTimeout(function () {
+      var first = wrapper.find('Tag').at(0);
+      var next = wrapper.find('Tag').at(1);
+      var focus = sinon.spy(next.find('button').instance(), 'focus');
+      var remove = first.prop('onClick');
+      remove();
+      setTimeout(function () {
+        expect(focus.calledOnce).to.be.true;
+        expect(focusInput.calledOnce).to.be.true;
+        done();
+      }, 1);
+    }, 1);
+  });
+  it('focuses on empty results div when all tags are deleted', function (done) {
+    var wrapper = mount( /*#__PURE__*/React.createElement(OutcomeTags, makeProps()));
+    setTimeout(function () {
+      [0, 1, 2].forEach(function (tagIndex) {
+        var tag = wrapper.find('Tag').at(tagIndex);
+        var remove = tag.prop('onClick');
+        remove();
+      });
+      setTimeout(function () {
+        expect(document.activeElement.tabIndex).to.equal(-1);
+        done();
+      }, 1);
+    }, 1);
+  });
+  it('meets a11y standards', function () {
+    return checkA11y( /*#__PURE__*/React.createElement(OutcomeTags, makeProps()));
+  });
+});

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

@@ -0,0 +1,149 @@
+import _classCallCheck from "@babel/runtime/helpers/esm/classCallCheck";
+import _createClass from "@babel/runtime/helpers/esm/createClass";
+import _inherits from "@babel/runtime/helpers/esm/inherits";
+import _createSuper from "@babel/runtime/helpers/esm/createSuper";
+
+var _dec, _class, _class2, _temp;
+
+import React from 'react';
+import PropTypes from 'prop-types';
+import { AccessibleContent } from '@instructure/ui-a11y-content';
+import { Text } from '@instructure/ui-text';
+import { Tag } from '@instructure/ui-tag';
+import { IconOutcomesLine } from '@instructure/ui-icons';
+import { themeable } from '@instructure/ui-themeable';
+import theme from "../theme.js";
+var styles = {
+  componentId: 'dVcKM',
+  template: function template(theme) {
+    return "\n\n.outcomes-ui__OutcomeTags--line {\n  display: inline-flex;\n}\n\n.outcomes-ui__OutcomeTags--tags {\n  display: flex;\n  flex-wrap: wrap;\n}\n\n.outcomes-ui__OutcomeTags--text {\n  padding-left: ".concat(theme.outcomeTagsSpacing || 'inherit', ";\n  margin-bottom: ").concat(theme.outcomeTagsSpacing || 'inherit', ";\n}\n");
+  },
+  'line': 'outcomes-ui__OutcomeTags--line',
+  'tags': 'outcomes-ui__OutcomeTags--tags',
+  'text': 'outcomes-ui__OutcomeTags--text'
+};
+var OutcomeTags = (_dec = themeable(theme, styles), _dec(_class = (_temp = _class2 = /*#__PURE__*/function (_React$Component) {
+  _inherits(OutcomeTags, _React$Component);
+
+  var _super = _createSuper(OutcomeTags);
+
+  function OutcomeTags() {
+    var _this;
+
+    _classCallCheck(this, OutcomeTags);
+
+    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.inputRefs = [];
+
+    _this.setRef = function (id, ref) {
+      _this.inputRefs[id] = ref;
+    };
+
+    _this.focusInput = function (id) {
+      return _this.inputRefs[id].focus();
+    };
+
+    return _this;
+  }
+
+  _createClass(OutcomeTags, [{
+    key: "componentDidUpdate",
+    value: function componentDidUpdate(oldProps) {
+      var outcomes = this.props.outcomes;
+
+      if (oldProps.outcomes.length && !outcomes.length) {
+        this.emptyResults.focus();
+      }
+    }
+  }, {
+    key: "getSortedOutcomes",
+    value: function getSortedOutcomes() {
+      var outcomes = this.props.outcomes;
+      return outcomes.sort(function (a, b) {
+        return a.title ? a.title.localeCompare(b.title) : -1;
+      });
+    }
+  }, {
+    key: "renderEmpty",
+    value: function renderEmpty() {
+      var _this2 = this;
+
+      var emptyText = this.props.emptyText;
+      return (
+        /*#__PURE__*/
+        // eslint-disable-next-line jsx-a11y/no-noninteractive-tabindex
+        React.createElement("div", {
+          className: styles.text,
+          ref: function ref(_ref) {
+            return _this2.emptyResults = _ref;
+          },
+          tabIndex: "-1"
+        }, emptyText)
+      );
+    }
+  }, {
+    key: "renderTags",
+    value: function renderTags() {
+      var _this3 = this;
+
+      var deselectOutcomeIds = this.props.deselectOutcomeIds;
+      var sortedOutcomes = this.getSortedOutcomes();
+      return sortedOutcomes.map(function (o, index) {
+        return /*#__PURE__*/React.createElement("div", {
+          className: styles.text,
+          key: o.id
+        }, /*#__PURE__*/React.createElement(Tag, {
+          key: o.id,
+          elementRef: function elementRef(ref) {
+            return _this3.setRef(o.id, ref);
+          },
+          text: /*#__PURE__*/React.createElement(AccessibleContent, {
+            alt: "Remove ".concat(o.title)
+          }, o.title),
+          "data-automation": "outcomeTag__text",
+          onClick: function onClick() {
+            deselectOutcomeIds && deselectOutcomeIds([o.id]);
+            var priorListItem = sortedOutcomes[index - 1];
+
+            if (priorListItem) {
+              _this3.focusInput(priorListItem.id);
+            } else {
+              var nextListItem = sortedOutcomes[index + 1];
+
+              if (nextListItem) {
+                _this3.focusInput(nextListItem.id);
+              }
+            }
+          },
+          dismissible: true
+        }));
+      });
+    }
+  }, {
+    key: "render",
+    value: function render() {
+      return /*#__PURE__*/React.createElement("div", {
+        className: styles.line,
+        "data-automation": "outcomeTag__alignedOutcomes"
+      }, /*#__PURE__*/React.createElement(Text, {
+        size: "medium"
+      }, /*#__PURE__*/React.createElement(IconOutcomesLine, null)), /*#__PURE__*/React.createElement("div", {
+        className: styles.tags
+      }, this.props.outcomes.length ? this.renderTags() : this.renderEmpty()));
+    }
+  }]);
+
+  OutcomeTags.displayName = "OutcomeTags";
+  return OutcomeTags;
+}(React.Component), _class2.propTypes = {
+  emptyText: PropTypes.string.isRequired,
+  outcomes: PropTypes.array.isRequired,
+  deselectOutcomeIds: PropTypes.func
+}, _class2.defaultProps = {
+  deselectOutcomeIds: null
+}, _temp)) || _class);
+export { OutcomeTags as default };

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

@@ -0,0 +1,21 @@
+import React from 'react';
+import { text, object } from '@storybook/addon-knobs';
+import { defaultOutcomes } from "../../../.storybook/constants.js";
+import OutcomeTags from "./index.js";
+export default {
+  title: 'OutcomeTags'
+};
+export var noAlignedOutcomes = function noAlignedOutcomes() {
+  return /*#__PURE__*/React.createElement(OutcomeTags, {
+    outcomes: [],
+    emptyText: text('Empty Message', 'No Outcomes are currently selected'),
+    deselectOutcomeIds: function deselectOutcomeIds() {}
+  });
+};
+export var alignedOutcomes = function alignedOutcomes() {
+  return /*#__PURE__*/React.createElement(OutcomeTags, {
+    outcomes: object('Outcomes', defaultOutcomes()),
+    emptyText: "No Outcomes are currently selected",
+    deselectOutcomeIds: function deselectOutcomeIds() {}
+  });
+};

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

@@ -0,0 +1,13 @@
+.line {
+  display: inline-flex;
+}
+
+.tags {
+  display: flex;
+  flex-wrap: wrap;
+}
+
+.text {
+  padding-left: var(--outcomeTagsSpacing);
+  margin-bottom: var(--outcomeTagsSpacing);
+}

package/es/translated/vi/components/OutcomeTray/OutcomeList/__tests__/index.test.js

@@ -0,0 +1,48 @@
+import { expect } from 'chai';
+import React from 'react';
+import sinon from 'sinon';
+import { shallow } from 'enzyme';
+import checkA11y from "../../../../test/checkA11y.js";
+import OutcomeList from "../index.js";
+describe('OutcomeList', function () {
+  function makeProps() {
+    var props = arguments.length > 0 && arguments[0] !== void 0 ? arguments[0] : {};
+    return Object.assign({
+      outcomes: [{
+        id: '1',
+        label: 'foo',
+        title: 'bar'
+      }],
+      setFocusedOutcome: sinon.spy(),
+      isOutcomeSelected: sinon.spy(),
+      selectOutcomeIds: sinon.spy(),
+      deselectOutcomeIds: sinon.spy(),
+      isLoading: false
+    }, props);
+  }
+
+  it('renders an AlignmentItem', function () {
+    var wrapper = shallow( /*#__PURE__*/React.createElement(OutcomeList, makeProps()), {
+      disableLifecycleMethods: true
+    });
+    expect(wrapper.find('AlignmentItem')).to.have.length(1);
+  });
+  it('renders loading spinner when state is loading', function () {
+    var props = makeProps({
+      isLoading: true
+    });
+    var wrapper = shallow( /*#__PURE__*/React.createElement(OutcomeList, props), {
+      disableLifecycleMethods: true
+    });
+    expect(wrapper.find('Spinner')).to.have.length(1);
+  });
+  it('renders pagination', function () {
+    var wrapper = shallow( /*#__PURE__*/React.createElement(OutcomeList, makeProps()), {
+      disableLifecycleMethods: true
+    });
+    expect(wrapper.find('Pagination')).to.have.length(1);
+  });
+  it('meets a11y standards', function () {
+    return checkA11y( /*#__PURE__*/React.createElement(OutcomeList, makeProps()));
+  });
+});

package/es/translated/vi/components/OutcomeTray/OutcomeList/index.js

@@ -0,0 +1,105 @@
+import _classCallCheck from "@babel/runtime/helpers/esm/classCallCheck";
+import _createClass from "@babel/runtime/helpers/esm/createClass";
+import _inherits from "@babel/runtime/helpers/esm/inherits";
+import _createSuper from "@babel/runtime/helpers/esm/createSuper";
+import React from 'react';
+import PropTypes from 'prop-types';
+import { Spinner } from '@instructure/ui-spinner';
+import { Flex } from '@instructure/ui-flex';
+import AlignmentItem from "../../AlignmentItem/index.js";
+import Pagination from "../../Pagination/index.js";
+export var RESULTS_PER_PAGE = 10;
+
+var OutcomeList = /*#__PURE__*/function (_React$Component) {
+  _inherits(OutcomeList, _React$Component);
+
+  var _super = _createSuper(OutcomeList);
+
+  function OutcomeList() {
+    _classCallCheck(this, OutcomeList);
+
+    return _super.apply(this, arguments);
+  }
+
+  _createClass(OutcomeList, [{
+    key: "renderList",
+    value: function renderList() {
+      var _this$props = this.props,
+          outcomes = _this$props.outcomes,
+          isOutcomeSelected = _this$props.isOutcomeSelected,
+          selectOutcomeIds = _this$props.selectOutcomeIds,
+          deselectOutcomeIds = _this$props.deselectOutcomeIds;
+      return outcomes.map(function (outcome) {
+        return /*#__PURE__*/React.createElement("div", {
+          key: outcome.id
+        }, /*#__PURE__*/React.createElement(AlignmentItem, {
+          outcome: outcome,
+          isOutcomeSelected: isOutcomeSelected,
+          selectOutcomeIds: selectOutcomeIds,
+          deselectOutcomeIds: deselectOutcomeIds,
+          isTray: true
+        }));
+      });
+    }
+  }, {
+    key: "renderLoading",
+    value: function renderLoading() {
+      return /*#__PURE__*/React.createElement(Flex, {
+        justifyItems: "center"
+      }, /*#__PURE__*/React.createElement(Flex.Item, {
+        padding: "small"
+      }, /*#__PURE__*/React.createElement(Spinner, {
+        renderTitle: "\u0110ang t\u1EA3i"
+      })));
+    }
+  }, {
+    key: "renderPagination",
+    value: function renderPagination() {
+      var _this$props2 = this.props,
+          listPage = _this$props2.listPage,
+          listTotal = _this$props2.listTotal,
+          getOutcomesList = _this$props2.getOutcomesList;
+      return /*#__PURE__*/React.createElement(Pagination, {
+        page: listPage,
+        updatePage: function updatePage(page) {
+          return getOutcomesList({
+            page: page
+          });
+        },
+        numPages: Math.ceil(listTotal / RESULTS_PER_PAGE)
+      });
+    }
+  }, {
+    key: "render",
+    value: function render() {
+      var isLoading = this.props.isLoading;
+      return /*#__PURE__*/React.createElement(Flex, {
+        height: "100%",
+        width: "100%",
+        padding: "none none none none",
+        alignItems: "stretch",
+        direction: "column"
+      }, /*#__PURE__*/React.createElement(Flex.Item, {
+        shouldGrow: true
+      }, isLoading ? this.renderLoading() : this.renderList()), /*#__PURE__*/React.createElement(Flex.Item, null, !isLoading && this.renderPagination()));
+    }
+  }]);
+
+  OutcomeList.displayName = "OutcomeList";
+  return OutcomeList;
+}(React.Component);
+
+OutcomeList.propTypes = {
+  outcomes: PropTypes.array.isRequired,
+  isOutcomeSelected: PropTypes.func.isRequired,
+  selectOutcomeIds: PropTypes.func.isRequired,
+  deselectOutcomeIds: PropTypes.func.isRequired,
+  getOutcomesList: PropTypes.func.isRequired,
+  isLoading: PropTypes.bool.isRequired,
+  listPage: PropTypes.number.isRequired,
+  listTotal: PropTypes.number
+};
+OutcomeList.defaultProps = {
+  listTotal: null
+};
+export { OutcomeList as default };

package/es/translated/vi/components/OutcomeTray/OutcomeList/index.stories.js

@@ -0,0 +1,19 @@
+import React from 'react';
+import { object, number, boolean } from '@storybook/addon-knobs';
+import { defaultOutcomes } from "../../../../.storybook/constants.js";
+import OutcomeList from "./index.js";
+export default {
+  title: 'OutcomeList'
+};
+export var Paginated = function Paginated() {
+  return /*#__PURE__*/React.createElement(OutcomeList, {
+    outcomes: object('Outcomes', defaultOutcomes()),
+    isLoading: boolean('Is Loading', false),
+    listPage: number('Page Index', 1),
+    listTotal: number('Total Outcomes', 987),
+    setFocusedOutcome: function setFocusedOutcome() {},
+    isOutcomeSelected: function isOutcomeSelected() {},
+    selectOutcomeIds: function selectOutcomeIds() {},
+    deselectOutcomeIds: function deselectOutcomeIds() {}
+  });
+};