@civicactions/cmsds-open-data-components 1.9.0-alpha.3 → 1.9.0-alpha.7

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

@@ -1,3 +1,10 @@
+.dc-dataset-search--facets-container .ds-c-accordion__content {
+  max-height: 32rem;
+}
+
 .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

@@ -32,6 +32,12 @@ var defaultMetadataMapping = {
       })
     }];
   },
+  accrualPeriodicity: function accrualPeriodicity(data) {
+    return [{
+      label: 'Frequency',
+      value: _frequencyMap.frequencyMap[data].name
+    }];
+  },
   publisher: function publisher(data) {
     if (data.data && data.data.name) {
       return [{
@@ -87,8 +93,9 @@ var defaultMetadataMapping = {
     return [{
       label: 'Category',
       value: data.map(function (theme) {
-        return /*#__PURE__*/_react["default"].createElement("span", {
-          key: theme.data
+        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];
@@ -111,7 +118,9 @@ var defaultMetadataMapping = {
   license: function license(data) {
     return [{
       label: 'License',
-      value: data
+      value: /*#__PURE__*/_react["default"].createElement("a", {
+        href: data
+      }, data)
     }];
   },
   accessLevel: function accessLevel(data) {
@@ -120,24 +129,12 @@ var defaultMetadataMapping = {
       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));
-      }))
-    }];
-  },
   temporal: function temporal(data) {
     return [{
       label: 'Temporal Coverage',
-      value: data
+      value: /*#__PURE__*/_react["default"].createElement("span", {
+        className: "dc-c-word-break--all"
+      }, data)
     }];
   },
   spatial: function spatial(data) {
@@ -146,10 +143,18 @@ var defaultMetadataMapping = {
       value: data
     }];
   },
-  accrualPeriodicity: function accrualPeriodicity(data) {
+  references: function references(data) {
     return [{
-      label: 'Frequency',
-      value: _frequencyMap.frequencyMap[data].name
+      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));
+      }))
     }];
   }
 };

package/lib/assets/metadataMapping.jsx

@@ -10,6 +10,14 @@ export const defaultMetadataMapping = {
   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 }];
@@ -45,7 +53,11 @@ export const defaultMetadataMapping = {
       {
         label: 'Category',
         value: data
-          .map((theme) => <span key={theme.data}>{theme.data}</span>)
+          .map((theme) => (
+            <Link key={theme.data} to={`/datasets?theme[]=${theme.data}`}>
+              {theme.data}
+            </Link>
+          ))
           .reduce((prev, curr) => [prev, ', ', curr]),
       },
     ];
@@ -65,11 +77,20 @@ export const defaultMetadataMapping = {
     ];
   },
   license: (data) => {
-    return [{ label: 'License', value: 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 [
       {
@@ -86,18 +107,4 @@ export const defaultMetadataMapping = {
       },
     ];
   },
-  temporal: (data) => {
-    return [{ label: 'Temporal Coverage', value: data }];
-  },
-  spatial: (data) => {
-    return [{ label: 'Spacial/Geographical Coverage', value: data }];
-  },
-  accrualPeriodicity: (data) => {
-    return [
-      {
-        label: 'Frequency',
-        value: frequencyMap[data].name,
-      },
-    ];
-  },
 };

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,20 @@ 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, {
+    contentClassName: "ds-u-padding-left--1 ds-u-padding-right--0",
+    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 +82,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.3",
+  "version": "1.9.0-alpha.7",
   "description": "Components for the open data catalog frontend using CMS Design System",
   "main": "lib/index.js",
   "scripts": {