@civicactions/cmsds-open-data-components 1.9.0-alpha.2 → 1.9.0-alpha.6

package/dist/scss/components/dataset-search-facets.scss

@@ -1,3 +1,11 @@
+.dc-dataset-search--facets-container .ds-c-accordion__content {
+  max-height: 32rem;
+  display: block;
+}
+
 .dc-dataset-search--facets {
+  display: block;
   list-style: none;
+  position: relative;
+  max-height: 32rem;
 }

package/dist/scss/index.scss

@@ -1,2 +1,6 @@
 @import './components';
 @import './templates';
+
+.dc-c-word-break--all {
+  word-break: break-all;
+}

package/lib/assets/metadataMapping.js

@@ -1,103 +1,161 @@
-import React from 'react';
-import { Link } from '@reach/router';
-import TransformedDate from '../components/TransformedDate';
-import { frequencyMap } from './frequencyMap';
+"use strict";
 
-export const defaultMetadataMapping = {
-  modified: (data) => {
-    return [{ label: 'Modified', value: <TransformedDate date={data} /> }];
+var _interopRequireDefault = require("@babel/runtime/helpers/interopRequireDefault");
+
+Object.defineProperty(exports, "__esModule", {
+  value: true
+});
+exports.defaultMetadataMapping = void 0;
+
+var _react = _interopRequireDefault(require("react"));
+
+var _router = require("@reach/router");
+
+var _TransformedDate = _interopRequireDefault(require("../components/TransformedDate"));
+
+var _frequencyMap = require("./frequencyMap");
+
+var defaultMetadataMapping = {
+  modified: function modified(data) {
+    return [{
+      label: 'Modified',
+      value: /*#__PURE__*/_react["default"].createElement(_TransformedDate["default"], {
+        date: data
+      })
+    }];
   },
-  issued: (data) => {
-    return [{ label: 'Issued', value: <TransformedDate date={data} /> }];
+  issued: function issued(data) {
+    return [{
+      label: 'Issued',
+      value: /*#__PURE__*/_react["default"].createElement(_TransformedDate["default"], {
+        date: data
+      })
+    }];
   },
-  publisher: (data) => {
+  accrualPeriodicity: function accrualPeriodicity(data) {
+    return [{
+      label: 'Frequency',
+      value: _frequencyMap.frequencyMap[data].name
+    }];
+  },
+  publisher: function publisher(data) {
     if (data.data && data.data.name) {
-      return [{ label: 'Publisher', value: data.data.name }];
+      return [{
+        label: 'Publisher',
+        value: data.data.name
+      }];
     } else {
       return [];
     }
   },
-  identifier: (data) => {
-    return [{ label: 'Identifier', value: data }];
+  identifier: function identifier(data) {
+    return [{
+      label: 'Identifier',
+      value: data
+    }];
   },
-  contactPoint: (data) => {
-    let rows = [];
+  contactPoint: function contactPoint(data) {
+    var rows = [];
+
     if (data.fn) {
-      rows.push({ label: 'Contact', value: data.fn });
+      rows.push({
+        label: 'Contact',
+        value: data.fn
+      });
     }
+
     if (data.hasEmail) {
-      rows.push({ label: 'Contact Email', value: data.hasEmail });
+      rows.push({
+        label: 'Contact Email',
+        value: data.hasEmail
+      });
     }
+
     return rows;
   },
-  bureauCode: (data) => {
+  bureauCode: function bureauCode(data) {
     if (data.length) {
-      return [{ label: 'Bureau Code', value: data[0] }];
+      return [{
+        label: 'Bureau Code',
+        value: data[0]
+      }];
     }
   },
-  programCode: (data) => {
+  programCode: function programCode(data) {
     if (data.length) {
-      return [{ label: 'Program Code', value: data[0] }];
+      return [{
+        label: 'Program Code',
+        value: data[0]
+      }];
     }
   },
-  theme: (data) => {
-    return [
-      {
-        label: 'Category',
-        value: data
-          .map((theme) => <span key={theme.data}>{theme.data}</span>)
-          .reduce((prev, curr) => [prev, ', ', curr]),
-      },
-    ];
-  },
-  keyword: (data) => {
-    return [
-      {
-        label: 'Tags',
-        value: data
-          .map((keyword) => (
-            <Link key={keyword.data} to={`/datasets?keyword[]=${keyword.data}`}>
-              {keyword.data}
-            </Link>
-          ))
-          .reduce((prev, curr) => [prev, ', ', curr]),
-      },
-    ];
-  },
-  license: (data) => {
-    return [{ label: 'License', value: data }];
+  theme: function theme(data) {
+    return [{
+      label: 'Category',
+      value: data.map(function (theme) {
+        return /*#__PURE__*/_react["default"].createElement(_router.Link, {
+          key: theme.data,
+          to: "/datasets?theme[]=".concat(theme.data)
+        }, theme.data);
+      }).reduce(function (prev, curr) {
+        return [prev, ', ', curr];
+      })
+    }];
   },
-  accessLevel: (data) => {
-    return [{ label: 'Public Access Level', value: data }];
+  keyword: function keyword(data) {
+    return [{
+      label: 'Tags',
+      value: data.map(function (keyword) {
+        return /*#__PURE__*/_react["default"].createElement(_router.Link, {
+          key: keyword.data,
+          to: "/datasets?keyword[]=".concat(keyword.data)
+        }, keyword.data);
+      }).reduce(function (prev, curr) {
+        return [prev, ', ', curr];
+      })
+    }];
   },
-  references: (data) => {
-    return [
-      {
-        label: 'Related Documents',
-        value: (
-          <ul className="ds-u-margin--0 ds-u-padding-y--0 ds-u-padding-left--2 ds-u-padding-right--0">
-            {data.map((item) => (
-              <li key={item}>
-                <a href={item}>{item}</a>
-              </li>
-            ))}
-          </ul>
-        ),
-      },
-    ];
+  license: function license(data) {
+    return [{
+      label: 'License',
+      value: /*#__PURE__*/_react["default"].createElement("a", {
+        href: data
+      }, data)
+    }];
   },
-  temporal: (data) => {
-    return [{ label: 'Temporal Coverage', value: data }];
+  accessLevel: function accessLevel(data) {
+    return [{
+      label: 'Public Access Level',
+      value: data
+    }];
   },
-  spatial: (data) => {
-    return [{ label: 'Spacial/Geographical Coverage', value: data }];
+  temporal: function temporal(data) {
+    return [{
+      label: 'Temporal Coverage',
+      value: /*#__PURE__*/_react["default"].createElement("span", {
+        className: "dc-c-word-break--all"
+      }, data)
+    }];
   },
-  accrualPeriodicity: (data) => {
-    return [
-      {
-        label: 'Frequency',
-        value: frequencyMap[data].name,
-      },
-    ];
+  spatial: function spatial(data) {
+    return [{
+      label: 'Spacial/Geographical Coverage',
+      value: data
+    }];
   },
+  references: function references(data) {
+    return [{
+      label: 'Related Documents',
+      value: /*#__PURE__*/_react["default"].createElement("ul", {
+        className: "ds-u-margin--0 ds-u-padding-y--0 ds-u-padding-left--2 ds-u-padding-right--0"
+      }, data.map(function (item) {
+        return /*#__PURE__*/_react["default"].createElement("li", {
+          key: item
+        }, /*#__PURE__*/_react["default"].createElement("a", {
+          href: item
+        }, item));
+      }))
+    }];
+  }
 };
+exports.defaultMetadataMapping = defaultMetadataMapping;

package/lib/assets/metadataMapping.jsx

@@ -0,0 +1,110 @@
+import React from 'react';
+import { Link } from '@reach/router';
+import TransformedDate from '../components/TransformedDate';
+import { frequencyMap } from './frequencyMap';
+
+export const defaultMetadataMapping = {
+  modified: (data) => {
+    return [{ label: 'Modified', value: <TransformedDate date={data} /> }];
+  },
+  issued: (data) => {
+    return [{ label: 'Issued', value: <TransformedDate date={data} /> }];
+  },
+  accrualPeriodicity: (data) => {
+    return [
+      {
+        label: 'Frequency',
+        value: frequencyMap[data].name,
+      },
+    ];
+  },
+  publisher: (data) => {
+    if (data.data && data.data.name) {
+      return [{ label: 'Publisher', value: data.data.name }];
+    } else {
+      return [];
+    }
+  },
+  identifier: (data) => {
+    return [{ label: 'Identifier', value: data }];
+  },
+  contactPoint: (data) => {
+    let rows = [];
+    if (data.fn) {
+      rows.push({ label: 'Contact', value: data.fn });
+    }
+    if (data.hasEmail) {
+      rows.push({ label: 'Contact Email', value: data.hasEmail });
+    }
+    return rows;
+  },
+  bureauCode: (data) => {
+    if (data.length) {
+      return [{ label: 'Bureau Code', value: data[0] }];
+    }
+  },
+  programCode: (data) => {
+    if (data.length) {
+      return [{ label: 'Program Code', value: data[0] }];
+    }
+  },
+  theme: (data) => {
+    return [
+      {
+        label: 'Category',
+        value: data
+          .map((theme) => (
+            <Link key={theme.data} to={`/datasets?theme[]=${theme.data}`}>
+              {theme.data}
+            </Link>
+          ))
+          .reduce((prev, curr) => [prev, ', ', curr]),
+      },
+    ];
+  },
+  keyword: (data) => {
+    return [
+      {
+        label: 'Tags',
+        value: data
+          .map((keyword) => (
+            <Link key={keyword.data} to={`/datasets?keyword[]=${keyword.data}`}>
+              {keyword.data}
+            </Link>
+          ))
+          .reduce((prev, curr) => [prev, ', ', curr]),
+      },
+    ];
+  },
+  license: (data) => {
+    return [{ label: 'License', value: <a href={data}>{data}</a> }];
+  },
+  accessLevel: (data) => {
+    return [{ label: 'Public Access Level', value: data }];
+  },
+
+  temporal: (data) => {
+    return [
+      { label: 'Temporal Coverage', value: <span className="dc-c-word-break--all">{data}</span> },
+    ];
+  },
+  spatial: (data) => {
+    return [{ label: 'Spacial/Geographical Coverage', value: data }];
+  },
+  references: (data) => {
+    return [
+      {
+        label: 'Related Documents',
+        value: (
+          <ul className="ds-u-margin--0 ds-u-padding-y--0 ds-u-padding-left--2 ds-u-padding-right--0">
+            {data.map((item) => (
+              <li key={item}>
+                <a href={item}>{item}</a>
+              </li>
+            ))}
+          </ul>
+        ),
+      },
+    ];
+  },
+};

package/lib/components/DatasetSearchFacets/index.js

@@ -38,7 +38,8 @@ var DatasetSearchFacets = function DatasetSearchFacets(_ref) {
   var title = _ref.title,
       facets = _ref.facets,
       onclickFunction = _ref.onclickFunction,
-      selectedFacets = _ref.selectedFacets;
+      selectedFacets = _ref.selectedFacets,
+      loading = _ref.loading;
   var showLimit = 25;
 
   var _useState = (0, _react.useState)(true),
@@ -52,29 +53,19 @@ var DatasetSearchFacets = function DatasetSearchFacets(_ref) {
       setShowMore = _useState4[1];
 
   var filteredFacets = facets.filter(function (f) {
-    return f.total > 0;
+    var selectedIndex = selectedFacets.findIndex(function (item) {
+      return item === f.name;
+    });
+    return f.total > 0 || selectedIndex !== -1;
   });
   return /*#__PURE__*/_react["default"].createElement("div", {
-    className: "ds-u-margin-bottom--4"
-  }, /*#__PURE__*/_react["default"].createElement(_designSystem.Button, {
-    variation: "transparent",
-    className: "dc-facet-block--toggle ds-h4 ds-u-margin-top--0 ds-u-padding-left--0 ".concat(isOpen ? 'open' : 'closed'),
-    onClick: function onClick() {
-      return setIsOpen(!isOpen);
-    }
-  }, title), isOpen && /*#__PURE__*/_react["default"].createElement("div", null, /*#__PURE__*/_react["default"].createElement("ul", {
+    className: "ds-u-margin-bottom--4 dc-dataset-search--facets-container"
+  }, /*#__PURE__*/_react["default"].createElement(_designSystem.Accordion, null, /*#__PURE__*/_react["default"].createElement(_designSystem.AccordionItem, {
+    heading: "".concat(title, " (").concat(filteredFacets.length, ")"),
+    defaultOpen: true
+  }, /*#__PURE__*/_react["default"].createElement(_react["default"].Fragment, null, filteredFacets.length ? /*#__PURE__*/_react["default"].createElement("ul", {
     className: "dc-dataset-search--facets ds-u-padding--0 ds-u-margin--0"
-  }, filteredFacets.filter(function (facet, index) {
-    if (!showMore) {
-      if (index <= showLimit) {
-        return facet;
-      } else {
-        return false;
-      }
-    }
-
-    return facet;
-  }).map(function (f) {
+  }, filteredFacets.map(function (f) {
     return /*#__PURE__*/_react["default"].createElement("li", {
       key: f.name
     }, /*#__PURE__*/_react["default"].createElement(_designSystem.Choice, {
@@ -90,19 +81,14 @@ var DatasetSearchFacets = function DatasetSearchFacets(_ref) {
         });
       }
     }));
-  })), !showMore && filteredFacets.length > showLimit && /*#__PURE__*/_react["default"].createElement(_designSystem.Button, {
-    variation: "transparent",
-    onClick: function onClick() {
-      return setShowMore(true);
-    }
-  }, "Show more"), showMore && filteredFacets.length > showLimit && /*#__PURE__*/_react["default"].createElement(_designSystem.Button, {
-    variation: "transparent",
-    onClick: function onClick() {
-      return setShowMore(false);
-    }
-  }, "Show less")));
+  })) : /*#__PURE__*/_react["default"].createElement("p", {
+    className: "ds-h5"
+  }, "No matching facets found.")))));
 };
 
+DatasetSearchFacets.defaultProps = {
+  selectedFacets: []
+};
 DatasetSearchFacets.propTypes = {
   title: _propTypes["default"].string.isRequired,
   facets: _propTypes["default"].arrayOf(_propTypes["default"].shape({

package/lib/templates/DatasetSearch/index.js

@@ -101,6 +101,11 @@ var DatasetSearch = function DatasetSearch(_ref) {
       currentResultNumbers = _useState2[0],
       setCurrentResultNumbers = _useState2[1];
 
+  var _useState3 = (0, _react.useState)(false),
+      _useState4 = (0, _slicedToArray2["default"])(_useState3, 2),
+      noResults = _useState4[0],
+      setNoResults = _useState4[1];
+
   var _useSearchAPI = (0, _dataCatalogServices.useSearchAPI)(rootUrl, _objectSpread({}, transformUrlParamsToSearchObject(location.search, ['theme', 'keyword'], defaultSort)), additionalParams),
       fulltext = _useSearchAPI.fulltext,
       selectedFacets = _useSearchAPI.selectedFacets,
@@ -123,10 +128,10 @@ var DatasetSearch = function DatasetSearch(_ref) {
       theme = _separateFacets.theme,
       keyword = _separateFacets.keyword;
 
-  var _useState3 = (0, _react.useState)(''),
-      _useState4 = (0, _slicedToArray2["default"])(_useState3, 2),
-      filterText = _useState4[0],
-      setFilterText = _useState4[1];
+  var _useState5 = (0, _react.useState)(''),
+      _useState6 = (0, _slicedToArray2["default"])(_useState5, 2),
+      filterText = _useState6[0],
+      setFilterText = _useState6[1];
 
   _react["default"].useEffect(function () {
     if (fulltext !== filterText) {
@@ -149,6 +154,12 @@ var DatasetSearch = function DatasetSearch(_ref) {
       startingNumber: startingNumber,
       endingNumber: Number(totalItems) < endingNumber ? Number(totalItems) : endingNumber
     });
+
+    if (totalItems <= 0 && currentResultNumbers !== null) {
+      setNoResults(true);
+    } else {
+      setNoResults(false);
+    }
   }, [totalItems, pageSize, page]);
 
   function changePage(page) {
@@ -208,7 +219,10 @@ var DatasetSearch = function DatasetSearch(_ref) {
     }
   }, "Clear all filters")), /*#__PURE__*/_react["default"].createElement("ol", {
     className: "dc-dataset-search-list ds-u-padding--0"
-  }, items.map(function (item) {
+  }, noResults && /*#__PURE__*/_react["default"].createElement(_designSystem.Alert, {
+    variation: "error",
+    heading: "No results found."
+  }), items.map(function (item) {
     return /*#__PURE__*/_react["default"].createElement("li", {
       className: "ds-u-padding--0"
     }, /*#__PURE__*/_react["default"].createElement(_DatasetSearchListItem["default"], {
@@ -253,7 +267,8 @@ var DatasetSearch = function DatasetSearch(_ref) {
     title: "Categories",
     facets: theme,
     onclickFunction: updateSelectedFacets,
-    selectedFacets: selectedFacets.theme
+    selectedFacets: selectedFacets.theme,
+    loading: loading
   }) : /*#__PURE__*/_react["default"].createElement(_designSystem.Spinner, {
     className: "ds-u-valign--middle",
     "aria-valuetext": "Categories loading",
@@ -262,7 +277,8 @@ var DatasetSearch = function DatasetSearch(_ref) {
     title: "Tags",
     facets: keyword,
     onclickFunction: updateSelectedFacets,
-    selectedFacets: selectedFacets.keyword
+    selectedFacets: selectedFacets.keyword,
+    loading: loading
   }) : /*#__PURE__*/_react["default"].createElement(_designSystem.Spinner, {
     className: "ds-u-valign--middle",
     "aria-valuetext": "Tags loading",

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@civicactions/cmsds-open-data-components",
-  "version": "1.9.0-alpha.2",
+  "version": "1.9.0-alpha.6",
   "description": "Components for the open data catalog frontend using CMS Design System",
   "main": "lib/index.js",
   "scripts": {