@instructure/outcomes-ui 2.1.2 → 2.1.3

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

@@ -0,0 +1,144 @@
+"use strict";
+
+var _interopRequireDefault = require("@babel/runtime/helpers/interopRequireDefault").default;
+
+Object.defineProperty(exports, "__esModule", {
+  value: true
+});
+exports.default = void 0;
+
+var _classCallCheck2 = _interopRequireDefault(require("@babel/runtime/helpers/classCallCheck"));
+
+var _createClass2 = _interopRequireDefault(require("@babel/runtime/helpers/createClass"));
+
+var _inherits2 = _interopRequireDefault(require("@babel/runtime/helpers/inherits"));
+
+var _createSuper2 = _interopRequireDefault(require("@babel/runtime/helpers/createSuper"));
+
+var _react = _interopRequireDefault(require("react"));
+
+var _propTypes = _interopRequireDefault(require("prop-types"));
+
+var _uiText = require("@instructure/ui-text");
+
+var _uiLink = require("@instructure/ui-link");
+
+var _uiIcons = require("@instructure/ui-icons");
+
+var _uiThemeable = require("@instructure/ui-themeable");
+
+var _theme = _interopRequireDefault(require("../theme.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) {
+  (0, _inherits2.default)(OutcomeFolder, _React$Component);
+
+  var _super = (0, _createSuper2.default)(OutcomeFolder);
+
+  function OutcomeFolder() {
+    var _this;
+
+    (0, _classCallCheck2.default)(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.default.createElement(_uiText.Text, {
+        size: "small"
+      }, /*#__PURE__*/_react.default.createElement(_uiLink.Link, {
+        onClick: function onClick() {
+          return _this.handleClick(outcome.id);
+        }
+      }, outcome.title)) : /*#__PURE__*/_react.default.createElement(_uiText.Text, {
+        size: "x-small"
+      }, outcome.title);
+    };
+
+    return _this;
+  }
+
+  (0, _createClass2.default)(OutcomeFolder, [{
+    key: "renderSummary",
+    value: function renderSummary(outcome) {
+      var getOutcomeSummary = this.props.getOutcomeSummary;
+
+      if (getOutcomeSummary(outcome.id)) {
+        return /*#__PURE__*/_react.default.createElement("div", {
+          className: styles.folderSummary
+        }, /*#__PURE__*/_react.default.createElement(_uiText.Text, {
+          size: "x-small"
+        }, getOutcomeSummary(outcome.id)));
+      }
+    }
+  }, {
+    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", {
+        "data-automation": "outcomeFolder__folderTitle"
+      }, this.renderTitle(outcome)), this.renderSummary(outcome), /*#__PURE__*/_react.default.createElement("div", {
+        className: styles.folderDescription
+      }, /*#__PURE__*/_react.default.createElement(_uiText.Text, {
+        size: "x-small"
+      }, outcome.label))));
+    }
+  }]);
+  OutcomeFolder.displayName = "OutcomeFolder";
+  return OutcomeFolder;
+}(_react.default.Component), _class2.propTypes = {
+  outcome: _propTypes.default.object.isRequired,
+  clickable: _propTypes.default.bool,
+  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])
+}, _class2.defaultProps = {
+  clickable: true,
+  activeCollectionId: null
+}, _temp)) || _class);
+exports.default = OutcomeFolder;

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

@@ -0,0 +1,36 @@
+"use strict";
+
+var _interopRequireDefault = require("@babel/runtime/helpers/interopRequireDefault").default;
+
+Object.defineProperty(exports, "__esModule", {
+  value: true
+});
+exports.standard = exports.default = void 0;
+
+var _react = _interopRequireDefault(require("react"));
+
+var _addonKnobs = require("@storybook/addon-knobs");
+
+var _constants = require("../../../.storybook/constants.js");
+
+var _index = _interopRequireDefault(require("./index.js"));
+
+var _default = {
+  title: 'OutcomeFolder'
+};
+exports.default = _default;
+
+var standard = function standard() {
+  return /*#__PURE__*/_react.default.createElement(_index.default, {
+    outcome: (0, _addonKnobs.object)('Outcome', _constants.basicOutcome),
+    clickable: true,
+    getOutcomeSummary: function getOutcomeSummary() {
+      return (0, _addonKnobs.text)('Summary', _constants.basicOutcome['description']);
+    },
+    setActiveCollection: function setActiveCollection() {},
+    toggleExpandedIds: function toggleExpandedIds() {},
+    activeCollectionId: "1"
+  });
+};
+
+exports.standard = standard;

package/lib/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/lib/translated/vi/components/OutcomeFolderList/__tests__/index.test.js

@@ -0,0 +1,71 @@
+"use strict";
+
+var _interopRequireDefault = require("@babel/runtime/helpers/interopRequireDefault").default;
+
+var _chai = require("chai");
+
+var _react = _interopRequireDefault(require("react"));
+
+var _sinon = _interopRequireDefault(require("sinon"));
+
+var _enzyme = require("enzyme");
+
+var _index = _interopRequireDefault(require("../index.js"));
+
+var _checkA11y = _interopRequireDefault(require("../../../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.default.spy(),
+      setActiveCollection: _sinon.default.spy()
+    }, props);
+  }
+
+  it('renders an empty div if there are no ids', function () {
+    var wrapper = (0, _enzyme.shallow)( /*#__PURE__*/_react.default.createElement(_index.default, makeProps({
+      ids: []
+    })), {
+      disableLifecycleMethods: true
+    });
+    (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()), {
+      disableLifecycleMethods: true
+    });
+    (0, _chai.expect)(wrapper.find('OutcomeFolder')).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), {
+      disableLifecycleMethods: true
+    });
+    var folder = wrapper.find('OutcomeFolder').first();
+    (0, _chai.expect)(folder.prop('outcome')).to.deep.equal({
+      id: '1',
+      label: 'ABC',
+      title: 'Title1'
+    });
+    (0, _chai.expect)(folder.prop('setActiveCollection')).to.equal(props.setActiveCollection);
+  });
+  it('meets a11y standards', function () {
+    return (0, _checkA11y.default)( /*#__PURE__*/_react.default.createElement(_index.default, makeProps()));
+  });
+});

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

@@ -0,0 +1,87 @@
+"use strict";
+
+var _interopRequireDefault = require("@babel/runtime/helpers/interopRequireDefault").default;
+
+Object.defineProperty(exports, "__esModule", {
+  value: true
+});
+exports.default = void 0;
+
+var _classCallCheck2 = _interopRequireDefault(require("@babel/runtime/helpers/classCallCheck"));
+
+var _createClass2 = _interopRequireDefault(require("@babel/runtime/helpers/createClass"));
+
+var _inherits2 = _interopRequireDefault(require("@babel/runtime/helpers/inherits"));
+
+var _createSuper2 = _interopRequireDefault(require("@babel/runtime/helpers/createSuper"));
+
+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 _theme = _interopRequireDefault(require("../theme.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) {
+  (0, _inherits2.default)(OutcomeFolderList, _React$Component);
+
+  var _super = (0, _createSuper2.default)(OutcomeFolderList);
+
+  function OutcomeFolderList() {
+    (0, _classCallCheck2.default)(this, OutcomeFolderList);
+    return _super.apply(this, arguments);
+  }
+
+  (0, _createClass2.default)(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.default.createElement("div", null);
+      }
+
+      return /*#__PURE__*/_react.default.createElement("div", {
+        className: styles.picker
+      }, outcomes.map(function (outcome) {
+        return /*#__PURE__*/_react.default.createElement(_index.default, {
+          key: outcome.id,
+          outcome: outcome,
+          getOutcomeSummary: getOutcomeSummary,
+          setActiveCollection: setActiveCollection,
+          toggleExpandedIds: toggleExpandedIds,
+          activeCollectionId: activeCollectionId
+        });
+      }));
+    }
+  }]);
+  OutcomeFolderList.displayName = "OutcomeFolderList";
+  return OutcomeFolderList;
+}(_react.default.Component), _class2.propTypes = {
+  getOutcomeSummary: _propTypes.default.func.isRequired,
+  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])
+}, _class2.defaultProps = {
+  activeCollectionId: null
+}, _temp)) || _class);
+exports.default = OutcomeFolderList;

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

@@ -0,0 +1,34 @@
+"use strict";
+
+var _interopRequireDefault = require("@babel/runtime/helpers/interopRequireDefault").default;
+
+Object.defineProperty(exports, "__esModule", {
+  value: true
+});
+exports.standard = exports.default = void 0;
+
+var _react = _interopRequireDefault(require("react"));
+
+var _addonKnobs = require("@storybook/addon-knobs");
+
+var _constants = require("../../../.storybook/constants.js");
+
+var _index = _interopRequireDefault(require("./index.js"));
+
+var _default = {
+  title: 'OutcomeFolderList'
+};
+exports.default = _default;
+
+var standard = function standard() {
+  return /*#__PURE__*/_react.default.createElement(_index.default, {
+    getOutcome: _constants.getOutcome,
+    getOutcomeSummary: _constants.getOutcomeSummary,
+    outcomes: (0, _addonKnobs.object)('Outcomes', (0, _constants.defaultOutcomes)()),
+    setActiveCollection: function setActiveCollection() {},
+    toggleExpandedIds: function toggleExpandedIds() {},
+    activeCollectionId: "1"
+  });
+};
+
+exports.standard = standard;

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

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

package/lib/translated/vi/components/OutcomeLabels/__tests__/index.test.js

@@ -0,0 +1,68 @@
+"use strict";
+
+var _interopRequireDefault = require("@babel/runtime/helpers/interopRequireDefault").default;
+
+var _chai = require("chai");
+
+var _react = _interopRequireDefault(require("react"));
+
+var _enzyme = require("enzyme");
+
+var _uiIcons = require("@instructure/ui-icons");
+
+var _index = _interopRequireDefault(require("../index.js"));
+
+var _checkA11y = _interopRequireDefault(require("../../../test/checkA11y.js"));
+
+describe('OutcomeLabels', function () {
+  function makeProps() {
+    var props = arguments.length > 0 && arguments[0] !== void 0 ? arguments[0] : {};
+    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
+    }, props);
+  }
+
+  it('renders an icon', function () {
+    var wrapper = (0, _enzyme.shallow)( /*#__PURE__*/_react.default.createElement(_index.default, makeProps()), {
+      disableLifecycleMethods: true
+    });
+    (0, _chai.expect)(wrapper.find(_uiIcons.IconOutcomesLine)).to.have.length(1);
+  });
+  it('renders outcome titles', function () {
+    var wrapper = (0, _enzyme.render)( /*#__PURE__*/_react.default.createElement(_index.default, makeProps()));
+    var text = wrapper.text();
+    (0, _chai.expect)(text.match(/Title1/)).to.be.truthy;
+    (0, _chai.expect)(text.match(/Title2/)).to.be.truthy;
+    (0, _chai.expect)(text.match(/Title3/)).to.be.truthy;
+  });
+  it('does not render outcome labels', function () {
+    var wrapper = (0, _enzyme.render)( /*#__PURE__*/_react.default.createElement(_index.default, makeProps()));
+    var text = wrapper.text();
+    (0, _chai.expect)(text.match(/ABC/)).to.be.falsey;
+    (0, _chai.expect)(text.match(/DEF/)).to.be.falsey;
+    (0, _chai.expect)(text.match(/GHI/)).to.be.falsey;
+  });
+  it('renders default text when outcome list empty', function () {
+    var props = makeProps({
+      outcomes: []
+    });
+    var wrapper = (0, _enzyme.render)( /*#__PURE__*/_react.default.createElement(_index.default, props));
+    (0, _chai.expect)(wrapper.text().match(/No Outcomes are currently selected/)).to.be.truthy;
+  });
+  it('meets a11y standards', function () {
+    return (0, _checkA11y.default)( /*#__PURE__*/_react.default.createElement(_index.default, makeProps()));
+  });
+});

package/lib/translated/vi/components/OutcomeLabels/index.js

@@ -0,0 +1,88 @@
+"use strict";
+
+var _interopRequireDefault = require("@babel/runtime/helpers/interopRequireDefault").default;
+
+Object.defineProperty(exports, "__esModule", {
+  value: true
+});
+exports.default = void 0;
+
+var _classCallCheck2 = _interopRequireDefault(require("@babel/runtime/helpers/classCallCheck"));
+
+var _createClass2 = _interopRequireDefault(require("@babel/runtime/helpers/createClass"));
+
+var _inherits2 = _interopRequireDefault(require("@babel/runtime/helpers/inherits"));
+
+var _createSuper2 = _interopRequireDefault(require("@babel/runtime/helpers/createSuper"));
+
+var _react = _interopRequireDefault(require("react"));
+
+var _propTypes = _interopRequireDefault(require("prop-types"));
+
+var _uiText = require("@instructure/ui-text");
+
+var _uiIcons = require("@instructure/ui-icons");
+
+var _uiThemeable = require("@instructure/ui-themeable");
+
+var _theme = _interopRequireDefault(require("../theme.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) {
+  (0, _inherits2.default)(OutcomeLabels, _React$Component);
+
+  var _super = (0, _createSuper2.default)(OutcomeLabels);
+
+  function OutcomeLabels() {
+    (0, _classCallCheck2.default)(this, OutcomeLabels);
+    return _super.apply(this, arguments);
+  }
+
+  (0, _createClass2.default)(OutcomeLabels, [{
+    key: "render",
+    value: // eslint-disable-next-line no-undef
+    function render() {
+      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, {
+        size: "medium"
+      }, /*#__PURE__*/_react.default.createElement(_uiIcons.IconOutcomesLine, null)), /*#__PURE__*/_react.default.createElement(_uiText.Text, {
+        size: "small"
+      }, /*#__PURE__*/_react.default.createElement("div", {
+        className: styles.text
+      }, outcomes.length === 0 ? emptyText : outcomes.map(function (o, i) {
+        return wrap(o.title, i < outcomes.length - 1);
+      }))));
+    }
+  }]);
+  OutcomeLabels.displayName = "OutcomeLabels";
+  return OutcomeLabels;
+}(_react.default.Component), _class2.propTypes = {
+  outcomes: _propTypes.default.array.isRequired,
+  emptyText: _propTypes.default.string.isRequired
+}, _temp)) || _class);
+exports.default = OutcomeLabels;

package/lib/translated/vi/components/OutcomeLabels/index.stories.js

@@ -0,0 +1,39 @@
+"use strict";
+
+var _interopRequireDefault = require("@babel/runtime/helpers/interopRequireDefault").default;
+
+Object.defineProperty(exports, "__esModule", {
+  value: true
+});
+exports.alignedOutcomes = exports.noAlignedOutcomes = exports.default = void 0;
+
+var _react = _interopRequireDefault(require("react"));
+
+var _addonKnobs = require("@storybook/addon-knobs");
+
+var _constants = require("../../../.storybook/constants.js");
+
+var _index = _interopRequireDefault(require("./index.js"));
+
+var _default = {
+  title: 'OutcomeLabels'
+};
+exports.default = _default;
+
+var noAlignedOutcomes = function noAlignedOutcomes() {
+  return /*#__PURE__*/_react.default.createElement(_index.default, {
+    emptyText: (0, _addonKnobs.text)('Empty Message', 'No Outcomes are currently selected'),
+    outcomes: []
+  });
+};
+
+exports.noAlignedOutcomes = noAlignedOutcomes;
+
+var alignedOutcomes = function alignedOutcomes() {
+  return /*#__PURE__*/_react.default.createElement(_index.default, {
+    emptyText: "No Outcomes are currently selected",
+    outcomes: (0, _addonKnobs.object)('Outcomes', (0, _constants.defaultOutcomes)())
+  });
+};
+
+exports.alignedOutcomes = alignedOutcomes;

package/lib/translated/vi/components/OutcomeLabels/styles.css

@@ -0,0 +1,21 @@
+.line {
+  display: flex;
+}
+
+.text {
+  padding-left: var(--outcomeLabelsSpacing);
+}
+
+.pill {
+  display: inline-block;
+  float: left;
+  max-width: 12rem;
+  overflow: hidden;
+  text-overflow: ellipsis;
+  white-space: nowrap;
+}
+
+.comma {
+  float: left;
+  width: 0.5rem;
+}