@urbanos/react-discovery-ui 2.1.43

package/lib/components/dataset-preview/dataset-preview.js

@@ -0,0 +1,58 @@
+"use strict";
+
+function _typeof(o) { "@babel/helpers - typeof"; return _typeof = "function" == typeof Symbol && "symbol" == typeof Symbol.iterator ? function (o) { return typeof o; } : function (o) { return o && "function" == typeof Symbol && o.constructor === Symbol && o !== Symbol.prototype ? "symbol" : typeof o; }, _typeof(o); }
+Object.defineProperty(exports, "__esModule", {
+  value: true
+});
+exports.default = void 0;
+var _react = _interopRequireWildcard(require("react"));
+require("./dataset-preview.scss");
+require("react-table/react-table.css");
+var _collapsableBox = _interopRequireDefault(require("../../components/collapsable-box"));
+var _dataView = _interopRequireDefault(require("../data-view"));
+function _interopRequireDefault(e) { return e && e.__esModule ? e : { default: e }; }
+function _interopRequireWildcard(e, t) { if ("function" == typeof WeakMap) var r = new WeakMap(), n = new WeakMap(); return (_interopRequireWildcard = function _interopRequireWildcard(e, t) { if (!t && e && e.__esModule) return e; var o, i, f = { __proto__: null, default: e }; if (null === e || "object" != _typeof(e) && "function" != typeof e) return f; if (o = t ? n : r) { if (o.has(e)) return o.get(e); o.set(e, f); } for (var _t in e) "default" !== _t && {}.hasOwnProperty.call(e, _t) && ((i = (o = Object.defineProperty) && Object.getOwnPropertyDescriptor(e, _t)) && (i.get || i.set) ? o(f, _t, i) : f[_t] = e[_t]); return f; })(e, t); }
+function _classCallCheck(a, n) { if (!(a instanceof n)) throw new TypeError("Cannot call a class as a function"); }
+function _defineProperties(e, r) { for (var t = 0; t < r.length; t++) { var o = r[t]; o.enumerable = o.enumerable || !1, o.configurable = !0, "value" in o && (o.writable = !0), Object.defineProperty(e, _toPropertyKey(o.key), o); } }
+function _createClass(e, r, t) { return r && _defineProperties(e.prototype, r), t && _defineProperties(e, t), Object.defineProperty(e, "prototype", { writable: !1 }), e; }
+function _toPropertyKey(t) { var i = _toPrimitive(t, "string"); return "symbol" == _typeof(i) ? i : i + ""; }
+function _toPrimitive(t, r) { if ("object" != _typeof(t) || !t) return t; var e = t[Symbol.toPrimitive]; if (void 0 !== e) { var i = e.call(t, r || "default"); if ("object" != _typeof(i)) return i; throw new TypeError("@@toPrimitive must return a primitive value."); } return ("string" === r ? String : Number)(t); }
+function _callSuper(t, o, e) { return o = _getPrototypeOf(o), _possibleConstructorReturn(t, _isNativeReflectConstruct() ? Reflect.construct(o, e || [], _getPrototypeOf(t).constructor) : o.apply(t, e)); }
+function _possibleConstructorReturn(t, e) { if (e && ("object" == _typeof(e) || "function" == typeof e)) return e; if (void 0 !== e) throw new TypeError("Derived constructors may only return object or undefined"); return _assertThisInitialized(t); }
+function _assertThisInitialized(e) { if (void 0 === e) throw new ReferenceError("this hasn't been initialised - super() hasn't been called"); return e; }
+function _isNativeReflectConstruct() { try { var t = !Boolean.prototype.valueOf.call(Reflect.construct(Boolean, [], function () {})); } catch (t) {} return (_isNativeReflectConstruct = function _isNativeReflectConstruct() { return !!t; })(); }
+function _getPrototypeOf(t) { return _getPrototypeOf = Object.setPrototypeOf ? Object.getPrototypeOf.bind() : function (t) { return t.__proto__ || Object.getPrototypeOf(t); }, _getPrototypeOf(t); }
+function _inherits(t, e) { if ("function" != typeof e && null !== e) throw new TypeError("Super expression must either be null or a function"); t.prototype = Object.create(e && e.prototype, { constructor: { value: t, writable: !0, configurable: !0 } }), Object.defineProperty(t, "prototype", { writable: !1 }), e && _setPrototypeOf(t, e); }
+function _setPrototypeOf(t, e) { return _setPrototypeOf = Object.setPrototypeOf ? Object.setPrototypeOf.bind() : function (t, e) { return t.__proto__ = e, t; }, _setPrototypeOf(t, e); }
+var _default = exports.default = /*#__PURE__*/function (_Component) {
+  function _default() {
+    _classCallCheck(this, _default);
+    return _callSuper(this, _default, arguments);
+  }
+  _inherits(_default, _Component);
+  return _createClass(_default, [{
+    key: "componentDidMount",
+    value: function componentDidMount() {
+      this.props.retrieveDatasetPreview(this.props.datasetId);
+    }
+  }, {
+    key: "render",
+    value: function render() {
+      var datasetPreview = this.props.datasetPreview || {};
+      var columns = datasetPreview.meta ? datasetPreview.meta.columns : [];
+      var data = datasetPreview.data || datasetPreview;
+      return /*#__PURE__*/_react.default.createElement("div", {
+        id: "dataset-preview"
+      }, /*#__PURE__*/_react.default.createElement(_collapsableBox.default, {
+        title: "Sample",
+        headerHtml: "This only shows the first 50 rows, to view the entire dataset please download",
+        expanded: true
+      }, /*#__PURE__*/_react.default.createElement(_dataView.default, {
+        data: data,
+        columns: columns,
+        loading: this.props.previewLoading,
+        format: this.props.format
+      })));
+    }
+  }]);
+}(_react.Component);

package/lib/components/dataset-preview/dataset-preview.scss

@@ -0,0 +1,24 @@
+@import '../../styles/variables.scss';
+@import '../../styles/mixins.scss';
+#dataset-preview {
+  .header-container {
+    display: flex;
+    justify-content: space-between;
+  }
+
+  .header-text-items {
+    margin: 1rem;
+  }
+
+  .preview-header {
+    @include header();
+  }
+
+  #dataset-preview-raw {
+    overflow: scroll;
+    max-height: 30rem;
+    min-height: 10rem;
+    padding: 1rem;
+  }
+  
+}

package/lib/components/dataset-preview/dataset-preview.test.js

@@ -0,0 +1,34 @@
+import {
+  mount
+} from 'enzyme'
+import DatasetPreview from './dataset-preview'
+
+describe('dataset preview', () => {
+  describe('mounting', () => {
+    let retrieveDatasetPreviewMock
+    beforeEach(() => {
+      const matchMedia = jest.fn()
+      Object.defineProperty(window, 'matchMedia', {
+        writable: true,
+        value: jest.fn().mockImplementation(query => ({
+          matches: true
+        }))
+      })
+      retrieveDatasetPreviewMock = jest.fn()
+      mount(<DatasetPreview
+        datasetId='12345'
+        retrieveDatasetPreview={retrieveDatasetPreviewMock}
+        datasetPreview={
+          {
+            data: [],
+            meta: { columns: [] }
+          }
+        }
+            />)
+    })
+
+    test('retrieveDatasetPreview should be called', () => {
+      expect(retrieveDatasetPreviewMock).toBeCalled()
+    })
+  })
+})

package/lib/components/dataset-preview/index.js

@@ -0,0 +1,9 @@
+"use strict";
+
+Object.defineProperty(exports, "__esModule", {
+  value: true
+});
+exports.default = void 0;
+var _connector = _interopRequireDefault(require("./connector"));
+function _interopRequireDefault(e) { return e && e.__esModule ? e : { default: e }; }
+var _default = exports.default = _connector.default;

package/lib/components/dataset-quality/dataset-quality.js

@@ -0,0 +1,56 @@
+"use strict";
+
+function _typeof(o) { "@babel/helpers - typeof"; return _typeof = "function" == typeof Symbol && "symbol" == typeof Symbol.iterator ? function (o) { return typeof o; } : function (o) { return o && "function" == typeof Symbol && o.constructor === Symbol && o !== Symbol.prototype ? "symbol" : typeof o; }, _typeof(o); }
+Object.defineProperty(exports, "__esModule", {
+  value: true
+});
+exports.default = void 0;
+var _react = require("react");
+require("./dataset-quality.scss");
+var _collapsableBox = _interopRequireDefault(require("../../components/collapsable-box"));
+function _interopRequireDefault(e) { return e && e.__esModule ? e : { default: e }; }
+function _classCallCheck(a, n) { if (!(a instanceof n)) throw new TypeError("Cannot call a class as a function"); }
+function _defineProperties(e, r) { for (var t = 0; t < r.length; t++) { var o = r[t]; o.enumerable = o.enumerable || !1, o.configurable = !0, "value" in o && (o.writable = !0), Object.defineProperty(e, _toPropertyKey(o.key), o); } }
+function _createClass(e, r, t) { return r && _defineProperties(e.prototype, r), t && _defineProperties(e, t), Object.defineProperty(e, "prototype", { writable: !1 }), e; }
+function _toPropertyKey(t) { var i = _toPrimitive(t, "string"); return "symbol" == _typeof(i) ? i : i + ""; }
+function _toPrimitive(t, r) { if ("object" != _typeof(t) || !t) return t; var e = t[Symbol.toPrimitive]; if (void 0 !== e) { var i = e.call(t, r || "default"); if ("object" != _typeof(i)) return i; throw new TypeError("@@toPrimitive must return a primitive value."); } return ("string" === r ? String : Number)(t); }
+function _callSuper(t, o, e) { return o = _getPrototypeOf(o), _possibleConstructorReturn(t, _isNativeReflectConstruct() ? Reflect.construct(o, e || [], _getPrototypeOf(t).constructor) : o.apply(t, e)); }
+function _possibleConstructorReturn(t, e) { if (e && ("object" == _typeof(e) || "function" == typeof e)) return e; if (void 0 !== e) throw new TypeError("Derived constructors may only return object or undefined"); return _assertThisInitialized(t); }
+function _assertThisInitialized(e) { if (void 0 === e) throw new ReferenceError("this hasn't been initialised - super() hasn't been called"); return e; }
+function _isNativeReflectConstruct() { try { var t = !Boolean.prototype.valueOf.call(Reflect.construct(Boolean, [], function () {})); } catch (t) {} return (_isNativeReflectConstruct = function _isNativeReflectConstruct() { return !!t; })(); }
+function _getPrototypeOf(t) { return _getPrototypeOf = Object.setPrototypeOf ? Object.getPrototypeOf.bind() : function (t) { return t.__proto__ || Object.getPrototypeOf(t); }, _getPrototypeOf(t); }
+function _inherits(t, e) { if ("function" != typeof e && null !== e) throw new TypeError("Super expression must either be null or a function"); t.prototype = Object.create(e && e.prototype, { constructor: { value: t, writable: !0, configurable: !0 } }), Object.defineProperty(t, "prototype", { writable: !1 }), e && _setPrototypeOf(t, e); }
+function _setPrototypeOf(t, e) { return _setPrototypeOf = Object.setPrototypeOf ? Object.setPrototypeOf.bind() : function (t, e) { return t.__proto__ = e, t; }, _setPrototypeOf(t, e); }
+var _default = exports.default = /*#__PURE__*/function (_Component) {
+  function _default() {
+    _classCallCheck(this, _default);
+    return _callSuper(this, _default, arguments);
+  }
+  _inherits(_default, _Component);
+  return _createClass(_default, [{
+    key: "streamingHeader",
+    value: function streamingHeader() {
+      if (!this.props.completeness) {
+        return /*#__PURE__*/React.createElement("div", null);
+      }
+      return /*#__PURE__*/React.createElement("div", {
+        className: "quality-header"
+      }, /*#__PURE__*/React.createElement("div", {
+        className: "completeness-score"
+      }, Math.round(this.props.completeness.total_score * 100), "%"), /*#__PURE__*/React.createElement("div", {
+        className: "completeness-description"
+      }, "The percentage of relevant non-empty fields contained in the dataset."));
+    }
+  }, {
+    key: "render",
+    value: function render() {
+      return /*#__PURE__*/React.createElement("dataset-quality", {
+        class: "dataset-quality"
+      }, /*#__PURE__*/React.createElement(_collapsableBox.default, {
+        title: "Completeness",
+        headerHtml: this.streamingHeader(),
+        expanded: false
+      }, /*#__PURE__*/React.createElement("div", null)));
+    }
+  }]);
+}(_react.Component);

package/lib/components/dataset-quality/dataset-quality.scss

@@ -0,0 +1,24 @@
+@import '../../styles/mixins.scss';
+@import '../../styles/variables.scss';
+
+dataset-quality {
+
+  .completeness-score {
+    color: $csv-green;
+    font-size: 2rem;
+  }
+
+  .quality-header {
+    @include flex-row();
+    margin: 1rem 1rem 1rem 0;
+  }
+
+  .completeness-score {
+    @include flex-column();
+    margin-right: 1rem;
+  }
+
+  .completeness-description {
+    @include flex-column();
+  }
+}

package/lib/components/dataset-quality/dataset-quality.test.js

@@ -0,0 +1,34 @@
+import { render } from 'enzyme'
+import DatasetQuality from './dataset-quality'
+
+describe('Dataset Quality ', () => {
+  describe('Completeness', () => {
+    beforeEach(() => {
+      const matchMedia = jest.fn()
+      Object.defineProperty(window, 'matchMedia', {
+        writable: true,
+        value: jest.fn().mockImplementation(query => ({
+          matches: true
+        }))
+      })
+    })
+
+    test('should convert quality to a percentage', () => {
+      const subject = render(<DatasetQuality completeness={{ total_score: 0.95 }} />)
+      expect(subject.find('.completeness-score').text()).toEqual('95%')
+    })
+
+    test('rounds to nearest number', () => {
+      let subject = render(<DatasetQuality completeness={{ total_score: 0.954312 }} />)
+      expect(subject.find('.completeness-score').text()).toEqual('95%')
+
+      subject = render(<DatasetQuality completeness={{ total_score: 0.956312 }} />)
+      expect(subject.find('.completeness-score').text()).toEqual('96%')
+    })
+
+    test('should not display completeness if it is null', () => {
+      const subject = render(<DatasetQuality completeness={null} />)
+      expect(subject.find('quality-header').length).toEqual(0)
+    })
+  })
+})

package/lib/components/dataset-quality/index.js

@@ -0,0 +1,9 @@
+"use strict";
+
+Object.defineProperty(exports, "__esModule", {
+  value: true
+});
+exports.default = void 0;
+var _datasetQuality = _interopRequireDefault(require("./dataset-quality"));
+function _interopRequireDefault(e) { return e && e.__esModule ? e : { default: e }; }
+var _default = exports.default = _datasetQuality.default;

package/lib/components/dataset-recommendations/connector.js

@@ -0,0 +1,24 @@
+"use strict";
+
+Object.defineProperty(exports, "__esModule", {
+  value: true
+});
+exports.default = void 0;
+var _reactRedux = require("react-redux");
+var _datasetRecommendations = _interopRequireDefault(require("./dataset-recommendations"));
+var _selectors = require("../../store/selectors");
+var _actions = require("../../store/actions");
+function _interopRequireDefault(e) { return e && e.__esModule ? e : { default: e }; }
+var mapStateToProps = function mapStateToProps(state) {
+  return {
+    recommendations: (0, _selectors.getDatasetRecommendations)(state)
+  };
+};
+var mapDispatchToProps = function mapDispatchToProps(dispatch) {
+  return {
+    getRecommendations: function getRecommendations(datasetId) {
+      return dispatch((0, _actions.datasetRecommendations)(datasetId));
+    }
+  };
+};
+var _default = exports.default = (0, _reactRedux.connect)(mapStateToProps, mapDispatchToProps)(_datasetRecommendations.default);

package/lib/components/dataset-recommendations/dataset-recommendations.js

@@ -0,0 +1,47 @@
+"use strict";
+
+Object.defineProperty(exports, "__esModule", {
+  value: true
+});
+exports.default = void 0;
+var _propTypes = _interopRequireDefault(require("prop-types"));
+require("./dataset-recommendations.scss");
+var _collapsableBox = _interopRequireDefault(require("../collapsable-box"));
+var _utils = require("../../utils");
+function _interopRequireDefault(e) { return e && e.__esModule ? e : { default: e }; }
+var DatasetRecommendations = function DatasetRecommendations(props) {
+  var dataset = props.dataset,
+    getRecommendations = props.getRecommendations,
+    recommendations = props.recommendations;
+  var onInit = function onInit() {
+    getRecommendations(dataset.id);
+  };
+  React.useEffect(onInit, []);
+  var isContentUnavailable = !recommendations || recommendations.length == 0;
+  if (isContentUnavailable) {
+    return /*#__PURE__*/React.createElement("dataset-recommendations", null);
+  }
+  return /*#__PURE__*/React.createElement("dataset-recommendations", {
+    class: "dataset-recommendations"
+  }, /*#__PURE__*/React.createElement(_collapsableBox.default, {
+    title: "Recommended Datasets",
+    expanded: false
+  }, /*#__PURE__*/React.createElement("div", {
+    className: "recommendation-content"
+  }, recommendations.map(function (rec) {
+    return /*#__PURE__*/React.createElement("div", {
+      className: "recommended-dataset",
+      key: rec.id
+    }, /*#__PURE__*/React.createElement("a", {
+      role: "link",
+      href: _utils.RecommendationUtils.getDatasetUrl(rec),
+      target: "_blank"
+    }, rec.dataTitle));
+  }))));
+};
+DatasetRecommendations.propTypes = {
+  dataset: _propTypes.default.object.isRequired,
+  getRecommendations: _propTypes.default.func.isRequired,
+  recommendations: _propTypes.default.array
+};
+var _default = exports.default = DatasetRecommendations;

package/lib/components/dataset-recommendations/dataset-recommendations.scss

@@ -0,0 +1,17 @@
+@import '../../styles/mixins.scss';
+@import '../../styles/variables.scss';
+
+dataset-recommendations {
+  .recommended-dataset {
+    padding-top: 0.5em; 
+    padding-left: 1em;
+
+    a {
+      @include link();
+    }
+  }
+}
+
+.recommendation-content:last-child {
+  padding-bottom: 0.5em;
+}

package/lib/components/dataset-recommendations/dataset-recommendations.test.js

@@ -0,0 +1,37 @@
+import { shallow } from 'enzyme'
+import DatasetRecommendations from './dataset-recommendations'
+import { recommendations } from '../../../test-helpers/recommendations'
+
+let subject
+
+describe('DatasetRecommendations', () => {
+  describe('with no recommedations found', () => {
+    test('returns no content when recommendations is undefined', () => {
+      subject = createSubject(recommendations)
+      expect(subject.find(DatasetRecommendations).children().length).toEqual(0)
+    })
+
+    test('returns no content when there are no recommendations', () => {
+      subject = createSubject([])
+      expect(subject.find(DatasetRecommendations).children().length).toEqual(0)
+    })
+  })
+
+  describe('rendering', () => {
+    beforeEach(() => {
+      subject = createSubject(recommendations)
+    })
+
+    test('returns urls for each recommended dataset', () => {
+      expect(subject.find('.recommended-dataset').length).toEqual(recommendations.length)
+    })
+  })
+})
+
+function createSubject (recommendations) {
+  return shallow(<DatasetRecommendations
+    dataset={{}}
+    getRecommendations={jest.fn}
+    recommendations={recommendations}
+                 />)
+}

package/lib/components/dataset-recommendations/index.js

@@ -0,0 +1,9 @@
+"use strict";
+
+Object.defineProperty(exports, "__esModule", {
+  value: true
+});
+exports.default = void 0;
+var _connector = _interopRequireDefault(require("./connector"));
+function _interopRequireDefault(e) { return e && e.__esModule ? e : { default: e }; }
+var _default = exports.default = _connector.default;

package/lib/components/detail-toggle-icon/detail-toggle-icon.js

@@ -0,0 +1,41 @@
+"use strict";
+
+function _typeof(o) { "@babel/helpers - typeof"; return _typeof = "function" == typeof Symbol && "symbol" == typeof Symbol.iterator ? function (o) { return typeof o; } : function (o) { return o && "function" == typeof Symbol && o.constructor === Symbol && o !== Symbol.prototype ? "symbol" : typeof o; }, _typeof(o); }
+Object.defineProperty(exports, "__esModule", {
+  value: true
+});
+exports.default = void 0;
+require("./detail-toggle-icon.scss");
+var _react = require("react");
+var _ExpandLess = _interopRequireDefault(require("@material-ui/icons/ExpandLess"));
+var _ExpandMore = _interopRequireDefault(require("@material-ui/icons/ExpandMore"));
+function _interopRequireDefault(e) { return e && e.__esModule ? e : { default: e }; }
+function _classCallCheck(a, n) { if (!(a instanceof n)) throw new TypeError("Cannot call a class as a function"); }
+function _defineProperties(e, r) { for (var t = 0; t < r.length; t++) { var o = r[t]; o.enumerable = o.enumerable || !1, o.configurable = !0, "value" in o && (o.writable = !0), Object.defineProperty(e, _toPropertyKey(o.key), o); } }
+function _createClass(e, r, t) { return r && _defineProperties(e.prototype, r), t && _defineProperties(e, t), Object.defineProperty(e, "prototype", { writable: !1 }), e; }
+function _toPropertyKey(t) { var i = _toPrimitive(t, "string"); return "symbol" == _typeof(i) ? i : i + ""; }
+function _toPrimitive(t, r) { if ("object" != _typeof(t) || !t) return t; var e = t[Symbol.toPrimitive]; if (void 0 !== e) { var i = e.call(t, r || "default"); if ("object" != _typeof(i)) return i; throw new TypeError("@@toPrimitive must return a primitive value."); } return ("string" === r ? String : Number)(t); }
+function _callSuper(t, o, e) { return o = _getPrototypeOf(o), _possibleConstructorReturn(t, _isNativeReflectConstruct() ? Reflect.construct(o, e || [], _getPrototypeOf(t).constructor) : o.apply(t, e)); }
+function _possibleConstructorReturn(t, e) { if (e && ("object" == _typeof(e) || "function" == typeof e)) return e; if (void 0 !== e) throw new TypeError("Derived constructors may only return object or undefined"); return _assertThisInitialized(t); }
+function _assertThisInitialized(e) { if (void 0 === e) throw new ReferenceError("this hasn't been initialised - super() hasn't been called"); return e; }
+function _isNativeReflectConstruct() { try { var t = !Boolean.prototype.valueOf.call(Reflect.construct(Boolean, [], function () {})); } catch (t) {} return (_isNativeReflectConstruct = function _isNativeReflectConstruct() { return !!t; })(); }
+function _getPrototypeOf(t) { return _getPrototypeOf = Object.setPrototypeOf ? Object.getPrototypeOf.bind() : function (t) { return t.__proto__ || Object.getPrototypeOf(t); }, _getPrototypeOf(t); }
+function _inherits(t, e) { if ("function" != typeof e && null !== e) throw new TypeError("Super expression must either be null or a function"); t.prototype = Object.create(e && e.prototype, { constructor: { value: t, writable: !0, configurable: !0 } }), Object.defineProperty(t, "prototype", { writable: !1 }), e && _setPrototypeOf(t, e); }
+function _setPrototypeOf(t, e) { return _setPrototypeOf = Object.setPrototypeOf ? Object.setPrototypeOf.bind() : function (t, e) { return t.__proto__ = e, t; }, _setPrototypeOf(t, e); }
+var _default = exports.default = /*#__PURE__*/function (_Component) {
+  function _default(props) {
+    _classCallCheck(this, _default);
+    return _callSuper(this, _default, [props]);
+  }
+  _inherits(_default, _Component);
+  return _createClass(_default, [{
+    key: "render",
+    value: function render() {
+      return /*#__PURE__*/React.createElement("detail-toggle-icon", null, this.props.expanded ? /*#__PURE__*/React.createElement(_ExpandLess.default, {
+        className: "collapse-icon"
+      }) : /*#__PURE__*/React.createElement(_ExpandMore.default, {
+        className: "collapse-icon"
+      }));
+    }
+  }]);
+}(_react.Component);

package/lib/components/detail-toggle-icon/detail-toggle-icon.scss

@@ -0,0 +1,13 @@
+@import '../../styles/mixins.scss';
+@import '../../styles/variables.scss';
+
+detail-toggle-icon {
+  @include custom-element();
+
+  .collapse-icon {
+    font-size: 30px;
+    color: $dark-grey;
+    margin: 10px 10px 0 0;
+  }
+
+}

package/lib/components/detail-toggle-icon/detail-toggle-icon.test.js

@@ -0,0 +1,20 @@
+import { shallow, render } from 'enzyme'
+import DetailToggleIcon from './detail-toggle-icon'
+import ExpandLess from '@material-ui/icons/ExpandLess'
+import ExpandMore from '@material-ui/icons/ExpandMore'
+
+describe('detail toggle icon', () => {
+  let subject
+
+  test('is expanded when props.expanded is true', () => {
+    subject = shallow(<DetailToggleIcon expanded />)
+    expect(subject.find(ExpandLess)).toHaveLength(1)
+    expect(subject.find(ExpandMore)).toHaveLength(0)
+  })
+
+  test('is expanded when props.expanded is false', () => {
+    subject = shallow(<DetailToggleIcon expanded={false} />)
+    expect(subject.find(ExpandLess)).toHaveLength(0)
+    expect(subject.find(ExpandMore)).toHaveLength(1)
+  })
+})

package/lib/components/detail-toggle-icon/index.js

@@ -0,0 +1,9 @@
+"use strict";
+
+Object.defineProperty(exports, "__esModule", {
+  value: true
+});
+exports.default = void 0;
+var _detailToggleIcon = _interopRequireDefault(require("./detail-toggle-icon"));
+function _interopRequireDefault(e) { return e && e.__esModule ? e : { default: e }; }
+var _default = exports.default = _detailToggleIcon.default;

package/lib/components/facet-list/facet-list.js

@@ -0,0 +1,47 @@
+"use strict";
+
+Object.defineProperty(exports, "__esModule", {
+  value: true
+});
+exports.default = void 0;
+var _lodash = _interopRequireDefault(require("lodash"));
+var _checkbox = _interopRequireDefault(require("../generic-elements/checkbox"));
+require("./facet-list.scss");
+function _interopRequireDefault(e) { return e && e.__esModule ? e : { default: e }; }
+var FacetList = function FacetList(props) {
+  var getText = function getText(name, count) {
+    return "".concat(name || 'Unorganized', " (").concat(count, ")");
+  };
+  var simplePluralize = function simplePluralize(word) {
+    return word.endsWith('s') ? word : "".concat(word, "s");
+  };
+  var showMore = props.facets.length > props.limit;
+  return /*#__PURE__*/React.createElement("div", {
+    "data-testid": "facet-list-".concat(props.title),
+    className: "section facet-list"
+  }, /*#__PURE__*/React.createElement("div", {
+    className: "section-header"
+  }, simplePluralize(props.title)), _lodash.default.chain(props.facets).orderBy(['selected', 'count', function (facet) {
+    return facet.name.toLowerCase();
+  }], ['desc', 'desc', 'asc']).slice(0, props.limit).map(function (_ref) {
+    var name = _ref.name,
+      count = _ref.count,
+      selected = _ref.selected;
+    return /*#__PURE__*/React.createElement(_checkbox.default, {
+      id: "facet-list-".concat(name),
+      clickHandler: function clickHandler() {
+        return props.clickHandler(name);
+      },
+      text: getText(name, count),
+      selected: selected,
+      key: name
+    });
+  }).value(), showMore && /*#__PURE__*/React.createElement("a", {
+    role: "link",
+    className: "show-more",
+    onClick: function onClick() {
+      return props.showMoreHandler(props.title, props.facets);
+    }
+  }, "Show more"));
+};
+var _default = exports.default = FacetList;

package/lib/components/facet-list/facet-list.scss

@@ -0,0 +1,19 @@
+@import "../../styles/variables.scss";
+@import "../../styles/mixins.scss";
+
+.facet-list {
+  display: flex;
+  flex-direction: column;
+
+  .section-header {
+    @include header-small();
+    text-transform: uppercase;
+    padding-top: 1.25rem;
+    padding-bottom: 0.25rem;
+    border-top: 1px solid $light-grey;
+  }
+
+  .show-more {
+    cursor: pointer;
+  }
+}

package/lib/components/facet-list/facet-list.test.js

@@ -0,0 +1,94 @@
+import FacetList from './facet-list'
+import Checkbox from '../generic-elements/checkbox'
+import { shallow, mount } from 'enzyme'
+
+describe('facet list', () => {
+  let subject, mockClickHandler, mockShowMoreHandler
+
+  const facets = [
+    { name: 'neat COTA', count: 1, selected: true },
+    { name: 'Apple', count: 1, selected: false },
+    { name: 'Massive Data', count: 5, selected: false },
+    { name: 'Interesting Things', count: 3, selected: true },
+    { name: 'Conduent', count: 2, selected: false },
+    { name: 'Weyland-Yutani', count: 1, selected: false }
+  ]
+
+  beforeEach(() => {
+    mockClickHandler = jest.fn()
+    mockShowMoreHandler = jest.fn()
+    subject = shallow(
+      <FacetList
+        facets={facets}
+        clickHandler={mockClickHandler}
+        title='Organization'
+        limit={5}
+        showMoreHandler={mockShowMoreHandler}
+      />
+    )
+  })
+
+  it('renders the given facets', () => {
+    expect(subject.find(Checkbox)).toHaveLength(5)
+  })
+
+  it('sorts the facets in descending order by selected, count and name and limits the number displayed', () => {
+    const facets = subject.find(Checkbox).map(item => item.props().text)
+
+    expect(facets).toEqual([
+      'Interesting Things (3)',
+      'neat COTA (1)',
+      'Massive Data (5)',
+      'Conduent (2)',
+      'Apple (1)'
+    ])
+  })
+
+  it('gives facets the selected class if the facet is selected', () => {
+    expect(subject.find(Checkbox).filterWhere(n => n.props().selected)).toHaveLength(2)
+  })
+
+  describe('show more', () => {
+    it('button appears when there are more facets than limit', () => {
+      expect(subject.find('.show-more')).toHaveLength(1)
+    })
+
+    it('button does not appear when there are fewer facets than limit', () => {
+      subject = shallow(
+        <FacetList
+          facets={facets}
+          clickHandler={mockClickHandler}
+          title='Organization'
+          limit={6}
+          showMoreHandler={mockShowMoreHandler}
+        />)
+
+      expect(subject.find('.show-more')).toHaveLength(0)
+    })
+
+    it('should call the showMoreHandler when the show more button is clicked', () => {
+      subject.find('.show-more').simulate('click')
+
+      expect(mockShowMoreHandler).toHaveBeenCalledWith('Organization', facets)
+    })
+  })
+
+  describe('title', () => {
+    it('should add s to title when it does not exist', () => {
+      expect(subject.find('.section-header').text()).toEqual('Organizations')
+    })
+
+    it('should not add s to title when it does exist', () => {
+      subject = shallow(
+        <FacetList
+          facets={facets}
+          clickHandler={mockClickHandler}
+          title='Organizations'
+          limit={6}
+          showMoreHandler={mockShowMoreHandler}
+        />)
+
+      expect(subject.find('.section-header').text()).toEqual('Organizations')
+    })
+  })
+})