@instructure/outcomes-ui 2.1.0 → 2.1.3

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

@@ -0,0 +1,126 @@
+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 { Text } from '@instructure/ui-text';
+import { Link } from '@instructure/ui-link';
+import { Checkbox } from '@instructure/ui-checkbox';
+import { themeable } from '@instructure/ui-themeable';
+import { outcomeShape } from "../../store/shapes.js";
+import OutcomeDescription from "../OutcomeDescription/index.js";
+import { View } from '@instructure/ui-view';
+import theme from "../theme.js";
+var styles = {
+  componentId: 'eEhwE',
+  template: function template(theme) {
+    return "\n\n.outcomes-ui__OutcomeCheckbox--checkbox {\n  padding: ".concat(theme.outcomePickerItemPadding || 'inherit', ";\n}\n\n.outcomes-ui__OutcomeCheckbox--checkboxLabel {\n  padding-left: ").concat(theme.checkboxLabelLeftPadding || 'inherit', ";\n  display: flex;\n}\n\n.outcomes-ui__OutcomeCheckbox--checkboxDescription {\n  padding-left: ").concat(theme.checkboxDescriptionLeftPadding || 'inherit', ";\n}\n\n.outcomes-ui__OutcomeCheckbox--checkboxFriendlyDescription {\n  margin-left: ").concat(theme.checkboxDescriptionLeftPadding || 'inherit', ";\n  margin-bottom: 10px;\n}\n\n.outcomes-ui__OutcomeCheckbox--linkText {\n  display: table;\n  table-layout: fixed;\n  white-space: nowrap;\n  width: 100%;\n}\n\n.outcomes-ui__OutcomeCheckbox--innerLinkText {\n  display: table-cell;\n  overflow: hidden;\n  text-overflow: ellipsis;\n}\n");
+  },
+  'checkbox': 'outcomes-ui__OutcomeCheckbox--checkbox',
+  'checkboxLabel': 'outcomes-ui__OutcomeCheckbox--checkboxLabel',
+  'checkboxDescription': 'outcomes-ui__OutcomeCheckbox--checkboxDescription',
+  'checkboxFriendlyDescription': 'outcomes-ui__OutcomeCheckbox--checkboxFriendlyDescription',
+  'linkText': 'outcomes-ui__OutcomeCheckbox--linkText',
+  'innerLinkText': 'outcomes-ui__OutcomeCheckbox--innerLinkText'
+};
+var OutcomeCheckbox = (_dec = themeable(theme, styles), _dec(_class = (_temp = _class2 = /*#__PURE__*/function (_React$Component) {
+  _inherits(OutcomeCheckbox, _React$Component);
+
+  var _super = _createSuper(OutcomeCheckbox);
+
+  function OutcomeCheckbox() {
+    _classCallCheck(this, OutcomeCheckbox);
+
+    return _super.apply(this, arguments);
+  }
+
+  _createClass(OutcomeCheckbox, [{
+    key: "selected",
+    value: // eslint-disable-next-line no-undef
+    function selected() {
+      return this.props.isOutcomeSelected(this.props.outcome.id);
+    }
+  }, {
+    key: "toggleOutcomeSelection",
+    value: function toggleOutcomeSelection() {
+      if (this.selected()) {
+        this.props.deselectOutcomeIds([this.props.outcome.id]);
+      } else {
+        this.props.selectOutcomeIds([this.props.outcome.id]);
+      }
+    }
+  }, {
+    key: "render",
+    value: function render() {
+      var _this = this;
+
+      var outcome = this.props.outcome;
+      var id = outcome.id,
+          description = outcome.description,
+          title = outcome.title;
+      return /*#__PURE__*/React.createElement("div", {
+        className: "OutcomeSelector ".concat(styles.checkbox)
+      }, /*#__PURE__*/React.createElement(Checkbox, {
+        value: id,
+        checked: this.selected(),
+        onChange: function onChange() {
+          return _this.toggleOutcomeSelection();
+        },
+        label: /*#__PURE__*/React.createElement("div", {
+          className: styles.checkboxLabel
+        }, /*#__PURE__*/React.createElement(Link, {
+          onClick: function onClick(e) {
+            e.preventDefault();
+
+            _this.props.setFocusedOutcome(outcome);
+          }
+        }, /*#__PURE__*/React.createElement(Text, {
+          size: "small"
+        }, /*#__PURE__*/React.createElement("span", {
+          className: styles.linkText,
+          "data-automation": "outcomeCheckbox__outcomeName"
+        }, /*#__PURE__*/React.createElement("span", {
+          className: styles.innerLinkText
+        }, title)))))
+      }), outcome.friendly_description && /*#__PURE__*/React.createElement("div", {
+        className: styles.checkboxFriendlyDescription
+      }, /*#__PURE__*/React.createElement(View, {
+        as: "div",
+        margin: "x-small small 0 0",
+        padding: "x-small x-small 0",
+        background: "secondary",
+        "data-automation": "outcomeCheckbox__friendly_description_header"
+      }, /*#__PURE__*/React.createElement(Text, {
+        size: "x-small",
+        weight: "bold"
+      }, "M\xF4 T\u1EA3 Th\xE2n Thi\u1EC7n")), /*#__PURE__*/React.createElement(View, {
+        as: "div",
+        margin: "0 small 0 0",
+        padding: "0 x-small x-small",
+        background: "secondary",
+        "data-automation": "outcomeCheckbox__friendly_description_expanded"
+      }, /*#__PURE__*/React.createElement(Text, {
+        size: "x-small"
+      }, outcome.friendly_description))), /*#__PURE__*/React.createElement("div", {
+        className: styles.checkboxDescription
+      }, /*#__PURE__*/React.createElement(OutcomeDescription, {
+        description: description,
+        maxLines: 2
+      })));
+    }
+  }]);
+
+  OutcomeCheckbox.displayName = "OutcomeCheckbox";
+  return OutcomeCheckbox;
+}(React.Component), _class2.propTypes = {
+  outcome: outcomeShape.isRequired,
+  setFocusedOutcome: PropTypes.func.isRequired,
+  isOutcomeSelected: PropTypes.func.isRequired,
+  selectOutcomeIds: PropTypes.func.isRequired,
+  deselectOutcomeIds: PropTypes.func.isRequired
+}, _temp)) || _class);
+export { OutcomeCheckbox as default };

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

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

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

@@ -0,0 +1,30 @@
+.checkbox {
+  padding: var(--outcomePickerItemPadding);
+}
+
+.checkboxLabel {
+  padding-left: var(--checkboxLabelLeftPadding);
+  display: flex;
+}
+
+.checkboxDescription {
+  padding-left: var(--checkboxDescriptionLeftPadding);
+}
+
+.checkboxFriendlyDescription {
+  margin-left: var(--checkboxDescriptionLeftPadding);
+  margin-bottom: 10px;
+}
+
+.linkText {
+  display: table;
+  table-layout: fixed;
+  white-space: nowrap;
+  width: 100%;
+}
+
+.innerLinkText {
+  display: table-cell;
+  overflow: hidden;
+  text-overflow: ellipsis;
+}

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

@@ -0,0 +1,46 @@
+import { expect } from 'chai';
+import React from 'react';
+import { shallow, mount } from 'enzyme';
+import OutcomeDescription from "../index.js";
+import checkA11y from "../../../test/checkA11y.js";
+describe('OutcomeDescription', function () {
+  function makeProps() {
+    var props = arguments.length > 0 && arguments[0] !== void 0 ? arguments[0] : {};
+    return Object.assign({
+      description: 'Hello there'
+    }, props);
+  }
+
+  it('renders outcome description', function () {
+    var props = makeProps();
+    var wrapper = mount( /*#__PURE__*/React.createElement(OutcomeDescription, props));
+    expect(wrapper.text()).to.match(/Hello there/);
+  });
+  it('sanitizes an outcome description', function () {
+    var props = makeProps({
+      description: 'Hello <img src="bigimage" />'
+    });
+    var wrapper = mount( /*#__PURE__*/React.createElement(OutcomeDescription, props));
+    expect(wrapper.html()).not.to.include('bigimage');
+    expect(wrapper.html()).not.to.include('img');
+  });
+  it('renders a TruncateText element if the outcome description is long', function () {
+    var props = makeProps({
+      description: 'a'.repeat(500)
+    });
+    var wrapper = shallow( /*#__PURE__*/React.createElement(OutcomeDescription, props), {
+      disableLifecycleMethods: true
+    });
+    expect(wrapper.find('TruncateText')).to.have.length(1);
+  });
+  it('renders outcome label and description', function () {
+    var props = makeProps({
+      label: 'Outcome label'
+    });
+    var wrapper = mount( /*#__PURE__*/React.createElement(OutcomeDescription, props));
+    expect(wrapper.text()).to.match(/Outcome labelHello there/);
+  });
+  it('meets a11y standards', function () {
+    return checkA11y( /*#__PURE__*/React.createElement(OutcomeDescription, makeProps()));
+  });
+});

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

@@ -0,0 +1,45 @@
+import React from 'react';
+import PropTypes from 'prop-types';
+import { Text } from '@instructure/ui-text';
+import { TruncateText } from '@instructure/ui-truncate-text';
+
+var OutcomeDescription = function OutcomeDescription(_ref) {
+  var label = _ref.label,
+      description = _ref.description,
+      truncate = _ref.truncate,
+      maxLines = _ref.maxLines;
+
+  var stripHtmlTags = function stripHtmlTags(text) {
+    var doc = new DOMParser().parseFromString(text, 'text/html');
+    return doc.body.textContent || '';
+  };
+
+  var truncateText = function truncateText(text, position) {
+    return /*#__PURE__*/React.createElement(TruncateText, {
+      maxLines: maxLines,
+      position: position
+    }, text);
+  };
+
+  var renderText = function renderText(text, position) {
+    var strippedText = stripHtmlTags(text);
+    var renderedText = truncate ? truncateText(strippedText, position) : strippedText;
+    return /*#__PURE__*/React.createElement(Text, null, renderedText);
+  };
+
+  return /*#__PURE__*/React.createElement(React.Fragment, null, label && renderText(label, 'middle'), description && renderText(description, 'end'));
+};
+
+OutcomeDescription.propTypes = {
+  description: PropTypes.string,
+  label: PropTypes.string,
+  truncate: PropTypes.bool,
+  maxLines: PropTypes.number
+};
+OutcomeDescription.defaultProps = {
+  description: '',
+  label: '',
+  truncate: true,
+  maxLines: 1
+};
+export default OutcomeDescription;

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

@@ -0,0 +1,12 @@
+import React from 'react';
+import { text } from '@storybook/addon-knobs';
+import OutcomeDescription from "./index.js";
+export default {
+  title: 'OutcomeDescription'
+};
+export var standard = function standard() {
+  return /*#__PURE__*/React.createElement(OutcomeDescription, {
+    label: text('Label', 'Example Label'),
+    description: text('Description', 'Example Description')
+  });
+};

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

@@ -0,0 +1,59 @@
+import { expect } from 'chai';
+import React from 'react';
+import sinon from 'sinon';
+import { shallow } from 'enzyme';
+import OutcomeFolder from "../index.js";
+import checkA11y from "../../../test/checkA11y.js";
+describe('OutcomeFolder', function () {
+  function makeProps() {
+    var props = arguments.length > 0 && arguments[0] !== void 0 ? arguments[0] : {};
+    return Object.assign({
+      outcome: {
+        id: '101',
+        label: 'XYZ',
+        title: 'The student will make cupcakes'
+      },
+      clickable: true,
+      getOutcomeSummary: sinon.spy(),
+      setActiveCollection: sinon.spy(),
+      toggleExpandedIds: sinon.spy()
+    }, props);
+  }
+
+  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), {
+      disableLifecycleMethods: true
+    });
+    var click = wrapper.find('Link').prop('onClick');
+    click();
+    expect(props.setActiveCollection.calledOnce).to.be.true;
+    expect(props.toggleExpandedIds.calledOnce).to.be.true;
+  });
+  it('will set ensure the activeCollection is expanded before setting a new one', function () {
+    var props = makeProps({
+      activeCollectionId: '1'
+    });
+    var wrapper = shallow( /*#__PURE__*/React.createElement(OutcomeFolder, props), {
+      disableLifecycleMethods: true
+    });
+    var click = wrapper.find('Link').prop('onClick');
+    click();
+    expect(props.toggleExpandedIds.calledWith({
+      id: '1',
+      forceOpen: true
+    })).to.be.true;
+  });
+  it('will make titles unclickable if clickable set to false', function () {
+    var props = makeProps({
+      clickable: false
+    });
+    var wrapper = shallow( /*#__PURE__*/React.createElement(OutcomeFolder, props), {
+      disableLifecycleMethods: true
+    });
+    expect(wrapper.find('Link')).to.have.length(0);
+  });
+  it('meets a11y standards', function () {
+    return checkA11y( /*#__PURE__*/React.createElement(OutcomeFolder, makeProps()));
+  });
+});

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

@@ -0,0 +1,126 @@
+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 { 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) {
+  _inherits(OutcomeFolder, _React$Component);
+
+  var _super = _createSuper(OutcomeFolder);
+
+  function OutcomeFolder() {
+    var _this;
+
+    _classCallCheck(this, OutcomeFolder);
+
+    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.handleClick = function (id) {
+      var _this$props = _this.props,
+          setActiveCollection = _this$props.setActiveCollection,
+          toggleExpandedIds = _this$props.toggleExpandedIds,
+          activeCollectionId = _this$props.activeCollectionId;
+
+      if (activeCollectionId) {
+        toggleExpandedIds({
+          id: activeCollectionId,
+          forceOpen: true
+        });
+      }
+
+      setActiveCollection(id);
+      toggleExpandedIds({
+        id: id,
+        forceOpen: true
+      });
+    };
+
+    _this.renderTitle = function (outcome) {
+      var clickable = _this.props.clickable; // Temporarily have the Folders rendered in search results
+      // be unclickable, until we decide how to retrieve all
+      // their ancestor outcomes and put them into state. A necessary
+      // reqt in order to render the tree picker.
+
+      return clickable ? /*#__PURE__*/React.createElement(Text, {
+        size: "small"
+      }, /*#__PURE__*/React.createElement(Link, {
+        onClick: function onClick() {
+          return _this.handleClick(outcome.id);
+        }
+      }, outcome.title)) : /*#__PURE__*/React.createElement(Text, {
+        size: "x-small"
+      }, outcome.title);
+    };
+
+    return _this;
+  }
+
+  _createClass(OutcomeFolder, [{
+    key: "renderSummary",
+    value: function renderSummary(outcome) {
+      var getOutcomeSummary = this.props.getOutcomeSummary;
+
+      if (getOutcomeSummary(outcome.id)) {
+        return /*#__PURE__*/React.createElement("div", {
+          className: styles.folderSummary
+        }, /*#__PURE__*/React.createElement(Text, {
+          size: "x-small"
+        }, getOutcomeSummary(outcome.id)));
+      }
+    }
+  }, {
+    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", {
+        "data-automation": "outcomeFolder__folderTitle"
+      }, this.renderTitle(outcome)), this.renderSummary(outcome), /*#__PURE__*/React.createElement("div", {
+        className: styles.folderDescription
+      }, /*#__PURE__*/React.createElement(Text, {
+        size: "x-small"
+      }, outcome.label))));
+    }
+  }]);
+
+  OutcomeFolder.displayName = "OutcomeFolder";
+  return OutcomeFolder;
+}(React.Component), _class2.propTypes = {
+  outcome: PropTypes.object.isRequired,
+  clickable: PropTypes.bool,
+  getOutcomeSummary: PropTypes.func.isRequired,
+  setActiveCollection: PropTypes.func.isRequired,
+  toggleExpandedIds: PropTypes.func.isRequired,
+  activeCollectionId: PropTypes.oneOfType([PropTypes.string, PropTypes.number])
+}, _class2.defaultProps = {
+  clickable: true,
+  activeCollectionId: null
+}, _temp)) || _class);
+export { OutcomeFolder as default };

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

@@ -0,0 +1,19 @@
+import React from 'react';
+import { object, text } from '@storybook/addon-knobs';
+import { basicOutcome } from "../../../.storybook/constants.js";
+import OutcomeFolder from "./index.js";
+export default {
+  title: 'OutcomeFolder'
+};
+export var standard = function standard() {
+  return /*#__PURE__*/React.createElement(OutcomeFolder, {
+    outcome: object('Outcome', basicOutcome),
+    clickable: true,
+    getOutcomeSummary: function getOutcomeSummary() {
+      return text('Summary', basicOutcome['description']);
+    },
+    setActiveCollection: function setActiveCollection() {},
+    toggleExpandedIds: function toggleExpandedIds() {},
+    activeCollectionId: "1"
+  });
+};

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

@@ -0,0 +1,16 @@
+.folder {
+  display: flex;
+  align-content: flex-start;
+  padding: var(--outcomePickerItemPadding);
+}
+
+.folderIcon {
+  font-size: 1.5em;
+  height: 1.25rem;
+  width: 1.25rem;
+  margin-right: 0.5rem;
+}
+
+.folderDetails {
+  padding-left: 0.5rem;
+}

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

@@ -0,0 +1,61 @@
+import { expect } from 'chai';
+import React from 'react';
+import sinon from 'sinon';
+import { shallow } from 'enzyme';
+import OutcomeFolderList from "../index.js";
+import checkA11y from "../../../test/checkA11y.js";
+describe('OutcomeFolderList', function () {
+  var outcomes = [{
+    id: '1',
+    label: 'ABC',
+    title: 'Title1'
+  }, {
+    id: '2',
+    label: 'DEF',
+    title: 'Title2'
+  }, {
+    id: '3',
+    label: 'GHI',
+    title: 'Title3'
+  }];
+
+  function makeProps() {
+    var props = arguments.length > 0 && arguments[0] !== void 0 ? arguments[0] : {};
+    return Object.assign({
+      outcomes: outcomes,
+      getOutcomeSummary: sinon.spy(),
+      setActiveCollection: sinon.spy()
+    }, props);
+  }
+
+  it('renders an empty div if there are no ids', function () {
+    var wrapper = shallow( /*#__PURE__*/React.createElement(OutcomeFolderList, makeProps({
+      ids: []
+    })), {
+      disableLifecycleMethods: true
+    });
+    expect(wrapper.find('OutcomeFolder')).not.to.be.present;
+  });
+  it('renders a folder for each outcome', function () {
+    var wrapper = shallow( /*#__PURE__*/React.createElement(OutcomeFolderList, makeProps()), {
+      disableLifecycleMethods: true
+    });
+    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), {
+      disableLifecycleMethods: true
+    });
+    var folder = wrapper.find('OutcomeFolder').first();
+    expect(folder.prop('outcome')).to.deep.equal({
+      id: '1',
+      label: 'ABC',
+      title: 'Title1'
+    });
+    expect(folder.prop('setActiveCollection')).to.equal(props.setActiveCollection);
+  });
+  it('meets a11y standards', function () {
+    return checkA11y( /*#__PURE__*/React.createElement(OutcomeFolderList, makeProps()));
+  });
+});

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

@@ -0,0 +1,72 @@
+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 { 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) {
+  _inherits(OutcomeFolderList, _React$Component);
+
+  var _super = _createSuper(OutcomeFolderList);
+
+  function OutcomeFolderList() {
+    _classCallCheck(this, OutcomeFolderList);
+
+    return _super.apply(this, arguments);
+  }
+
+  _createClass(OutcomeFolderList, [{
+    key: "render",
+    value: // eslint-disable-next-line no-undef
+    function render() {
+      var _this$props = this.props,
+          outcomes = _this$props.outcomes,
+          getOutcomeSummary = _this$props.getOutcomeSummary,
+          setActiveCollection = _this$props.setActiveCollection,
+          toggleExpandedIds = _this$props.toggleExpandedIds,
+          activeCollectionId = _this$props.activeCollectionId;
+
+      if (outcomes.length === 0) {
+        return /*#__PURE__*/React.createElement("div", null);
+      }
+
+      return /*#__PURE__*/React.createElement("div", {
+        className: styles.picker
+      }, outcomes.map(function (outcome) {
+        return /*#__PURE__*/React.createElement(OutcomeFolder, {
+          key: outcome.id,
+          outcome: outcome,
+          getOutcomeSummary: getOutcomeSummary,
+          setActiveCollection: setActiveCollection,
+          toggleExpandedIds: toggleExpandedIds,
+          activeCollectionId: activeCollectionId
+        });
+      }));
+    }
+  }]);
+
+  OutcomeFolderList.displayName = "OutcomeFolderList";
+  return OutcomeFolderList;
+}(React.Component), _class2.propTypes = {
+  getOutcomeSummary: PropTypes.func.isRequired,
+  setActiveCollection: PropTypes.func.isRequired,
+  outcomes: PropTypes.array.isRequired,
+  toggleExpandedIds: PropTypes.func.isRequired,
+  activeCollectionId: PropTypes.oneOfType([PropTypes.string, PropTypes.number])
+}, _class2.defaultProps = {
+  activeCollectionId: null
+}, _temp)) || _class);
+export { OutcomeFolderList as default };

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

@@ -0,0 +1,17 @@
+import React from 'react';
+import { object } from '@storybook/addon-knobs';
+import { getOutcome, getOutcomeSummary, defaultOutcomes } from "../../../.storybook/constants.js";
+import OutcomeFolderList from "./index.js";
+export default {
+  title: 'OutcomeFolderList'
+};
+export var standard = function standard() {
+  return /*#__PURE__*/React.createElement(OutcomeFolderList, {
+    getOutcome: getOutcome,
+    getOutcomeSummary: getOutcomeSummary,
+    outcomes: object('Outcomes', defaultOutcomes()),
+    setActiveCollection: function setActiveCollection() {},
+    toggleExpandedIds: function toggleExpandedIds() {},
+    activeCollectionId: "1"
+  });
+};

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

@@ -0,0 +1,3 @@
+.picker {
+  padding-left: 1rem;
+}