@civicactions/cmsds-open-data-components 1.9.1 → 1.10.0

package/dist/scss/index.scss

@@ -1,6 +1,10 @@
 @import './components';
 @import './templates';
 
+main {
+  padding-bottom: 100px;
+}
+
 .dc-c-word-break--all {
   word-break: break-all;
 }

package/dist/scss/templates/footer.scss

@@ -2,7 +2,6 @@
 
 .dc-c-footer {
   background-color: white;
-  padding-top: 100px;
   ul {
     margin: 0;
     padding: 0;

package/lib/assets/frequencyMap.js

@@ -1,69 +1,22 @@
-"use strict";
-
-Object.defineProperty(exports, "__esModule", {
-  value: true
-});
-exports.frequencyMap = void 0;
-var frequencyMap = {
-  'R/P10Y': {
-    name: 'Decennial'
-  },
-  'R/P4Y': {
-    name: 'Quadrennial'
-  },
-  'R/P1Y': {
-    name: 'Annual'
-  },
-  'R/P2M': {
-    name: 'Bimonthly'
-  },
-  'R/P3.5D': {
-    name: 'Semiweekly'
-  },
-  'R/P1D': {
-    name: 'Daily'
-  },
-  'R/P2W': {
-    name: 'Biweekly'
-  },
-  'R/P6M': {
-    name: 'Semiannual'
-  },
-  'R/P2Y': {
-    name: 'Biennial'
-  },
-  'R/P3Y': {
-    name: 'Triennial'
-  },
-  'R/P0.33W': {
-    name: 'Three times a week'
-  },
-  'R/P0.33M': {
-    name: 'Three times a month'
-  },
-  'R/PT1S': {
-    name: 'Continuously updated'
-  },
-  'R/P1M': {
-    name: 'Monthly'
-  },
-  'R/P3M': {
-    name: 'Quarterly'
-  },
-  'R/P0.5M': {
-    name: 'Semimonthly'
-  },
-  'R/P4M': {
-    name: 'Three times a year'
-  },
-  'R/P1W': {
-    name: 'Weekly'
-  },
-  'R/PT1H': {
-    name: 'Hourly'
-  },
-  irregular: {
-    name: 'Irregular'
-  }
+export const frequencyMap = {
+  'R/P10Y': { name: 'Decennial' },
+  'R/P4Y': { name: 'Quadrennial' },
+  'R/P1Y': { name: 'Annual' },
+  'R/P2M': { name: 'Bimonthly' },
+  'R/P3.5D': { name: 'Semiweekly' },
+  'R/P1D': { name: 'Daily' },
+  'R/P2W': { name: 'Biweekly' },
+  'R/P6M': { name: 'Semiannual' },
+  'R/P2Y': { name: 'Biennial' },
+  'R/P3Y': { name: 'Triennial' },
+  'R/P0.33W': { name: 'Three times a week' },
+  'R/P0.33M': { name: 'Three times a month' },
+  'R/PT1S': { name: 'Continuously updated' },
+  'R/P1M': { name: 'Monthly' },
+  'R/P3M': { name: 'Quarterly' },
+  'R/P0.5M': { name: 'Semimonthly' },
+  'R/P4M': { name: 'Three times a year' },
+  'R/P1W': { name: 'Weekly' },
+  'R/PT1H': { name: 'Hourly' },
+  irregular: { name: 'Irregular' },
 };
-exports.frequencyMap = frequencyMap;

package/lib/assets/metadataMapping.js

@@ -9,7 +9,7 @@ exports.defaultMetadataMapping = void 0;
 
 var _react = _interopRequireDefault(require("react"));
 
-var _router = require("@reach/router");
+var _reactRouterDom = require("react-router-dom");
 
 var _TransformedDate = _interopRequireDefault(require("../components/TransformedDate"));
 
@@ -93,7 +93,7 @@ var defaultMetadataMapping = {
     return [{
       label: 'Category',
       value: data.map(function (theme) {
-        return /*#__PURE__*/_react["default"].createElement(_router.Link, {
+        return /*#__PURE__*/_react["default"].createElement(_reactRouterDom.Link, {
           key: theme.data,
           to: "/datasets?theme[]=".concat(theme.data)
         }, theme.data);
@@ -106,7 +106,7 @@ var defaultMetadataMapping = {
     return [{
       label: 'Tags',
       value: data.map(function (keyword) {
-        return /*#__PURE__*/_react["default"].createElement(_router.Link, {
+        return /*#__PURE__*/_react["default"].createElement(_reactRouterDom.Link, {
           key: keyword.data,
           to: "/datasets?keyword[]=".concat(keyword.data)
         }, keyword.data);

package/lib/assets/metadataMapping.jsx

@@ -1,5 +1,5 @@
 import React from 'react';
-import { Link } from '@reach/router';
+import { Link } from 'react-router-dom';
 import TransformedDate from '../components/TransformedDate';
 import { frequencyMap } from './frequencyMap';
 

package/lib/components/Breadcrumb/index.js

@@ -11,7 +11,7 @@ var _react = _interopRequireDefault(require("react"));
 
 var _propTypes = _interopRequireDefault(require("prop-types"));
 
-var _router = require("@reach/router");
+var _reactRouterDom = require("react-router-dom");
 
 var Breadcrumb = function Breadcrumb(_ref) {
   var currentPage = _ref.currentPage,
@@ -20,7 +20,7 @@ var Breadcrumb = function Breadcrumb(_ref) {
   var pageTrailContent = pageTrail.map(function (page) {
     return /*#__PURE__*/_react["default"].createElement("li", {
       "class": "dc-c-breadcrumb__list-item"
-    }, /*#__PURE__*/_react["default"].createElement(_router.Link, {
+    }, /*#__PURE__*/_react["default"].createElement(_reactRouterDom.Link, {
       to: page.path,
       "class": "dc-c-breadcrumb__link"
     }, /*#__PURE__*/_react["default"].createElement("span", null, page.title)));

package/lib/components/DatasetAdditionalInformation/index.js

@@ -16,12 +16,8 @@ var _toConsumableArray2 = _interopRequireDefault(require("@babel/runtime/helpers
 
 var _react = _interopRequireWildcard(require("react"));
 
-var _router = require("@reach/router");
-
 var _designSystem = require("@cmsgov/design-system");
 
-var _TransformedDate = _interopRequireDefault(require("../TransformedDate"));
-
 function _getRequireWildcardCache(nodeInterop) { if (typeof WeakMap !== "function") return null; var cacheBabelInterop = new WeakMap(); var cacheNodeInterop = new WeakMap(); return (_getRequireWildcardCache = function _getRequireWildcardCache(nodeInterop) { return nodeInterop ? cacheNodeInterop : cacheBabelInterop; })(nodeInterop); }
 
 function _interopRequireWildcard(obj, nodeInterop) { if (!nodeInterop && obj && obj.__esModule) { return obj; } if (obj === null || _typeof(obj) !== "object" && typeof obj !== "function") { return { "default": obj }; } var cache = _getRequireWildcardCache(nodeInterop); if (cache && cache.has(obj)) { return cache.get(obj); } var newObj = {}; var hasPropertyDescriptor = Object.defineProperty && Object.getOwnPropertyDescriptor; for (var key in obj) { if (key !== "default" && Object.prototype.hasOwnProperty.call(obj, key)) { var desc = hasPropertyDescriptor ? Object.getOwnPropertyDescriptor(obj, key) : null; if (desc && (desc.get || desc.set)) { Object.defineProperty(newObj, key, desc); } else { newObj[key] = obj[key]; } } } newObj["default"] = obj; if (cache) { cache.set(obj, newObj); } return newObj; }

package/lib/components/DatasetDownloads/index.js

@@ -21,7 +21,8 @@ var DatasetDownloads = function DatasetDownloads(_ref) {
   }, "Downloads"), /*#__PURE__*/_react["default"].createElement("p", {
     className: "ds-u-margin-bottom--1 ds-u-color--gray"
   }, "Resource"), /*#__PURE__*/_react["default"].createElement("a", {
-    href: downloadURL
+    href: downloadURL,
+    className: "ds-u-word-break"
   }, "Download this resource (", type, ")"));
 };
 

package/lib/components/DatasetSearchListItem/index.js

@@ -9,7 +9,7 @@ exports["default"] = void 0;
 
 var _react = _interopRequireDefault(require("react"));
 
-var _router = require("@reach/router");
+var _reactRouterDom = require("react-router-dom");
 
 var _reactTextTruncate = _interopRequireDefault(require("react-text-truncate"));
 
@@ -68,7 +68,7 @@ var DatasetSearchListItem = function DatasetSearchListItem(_ref2) {
     date: modified
   }))), /*#__PURE__*/_react["default"].createElement("h2", {
     className: "ds-u-margin-y--1 ds-text-heading--xl"
-  }, /*#__PURE__*/_react["default"].createElement(_router.Link, {
+  }, /*#__PURE__*/_react["default"].createElement(_reactRouterDom.Link, {
     className: "ds-u-color--base",
     to: "/dataset/".concat(identifier)
   }, title)), truncatedDescription, /*#__PURE__*/_react["default"].createElement("div", null, keyword && /*#__PURE__*/_react["default"].createElement("ul", {

package/lib/components/DatasetTags/index.js

@@ -11,7 +11,7 @@ var _react = _interopRequireDefault(require("react"));
 
 var _propTypes = _interopRequireDefault(require("prop-types"));
 
-var _router = require("@reach/router");
+var _reactRouterDom = require("react-router-dom");
 
 var DatasetTags = function DatasetTags(_ref) {
   var keywords = _ref.keywords;
@@ -20,7 +20,7 @@ var DatasetTags = function DatasetTags(_ref) {
   }, /*#__PURE__*/_react["default"].createElement("h2", {
     className: "ds-u-color--primary ds-u-font-size--h3 ds-u-margin-top--0 ds-u-margin-bottom--2"
   }, "Tags"), keywords && keywords.map(function (k) {
-    return /*#__PURE__*/_react["default"].createElement(_router.Link, {
+    return /*#__PURE__*/_react["default"].createElement(_reactRouterDom.Link, {
       key: k.identifier,
       to: "/datasets?keyword[]=".concat(k.data),
       className: "dc-c-dataset-tags--tag ds-u-color--base ds-u-font-size--small ds-u-text-decoration--none ds-u-margin-right--1 ds-u-margin-bottom--1 ds-u-padding-x--2 ds-u-padding-y--1 ds-u-radius"

package/lib/components/Hero/index.js

@@ -11,7 +11,7 @@ var _slicedToArray2 = _interopRequireDefault(require("@babel/runtime/helpers/sli
 
 var _react = _interopRequireDefault(require("react"));
 
-var _router = require("@reach/router");
+var _reactRouterDom = require("react-router-dom");
 
 var _designSystem = require("@cmsgov/design-system");
 
@@ -22,6 +22,7 @@ var Hero = function Hero(_ref) {
       searchKey = _ref.searchKey,
       textfieldLabel = _ref.textfieldLabel,
       searchButtonText = _ref.searchButtonText;
+  var navigate = (0, _reactRouterDom.useNavigate)();
 
   var _React$useState = _react["default"].useState(''),
       _React$useState2 = (0, _slicedToArray2["default"])(_React$useState, 2),
@@ -30,7 +31,7 @@ var Hero = function Hero(_ref) {
 
   function submitHero(e) {
     e.preventDefault();
-    (0, _router.navigate)("/".concat(searchUrl, "?").concat(searchKey, "=").concat(searchValue));
+    navigate("/".concat(searchUrl, "?").concat(searchKey, "=").concat(searchValue));
   }
 
   return /*#__PURE__*/_react["default"].createElement("section", {

package/lib/components/NavLink/index.js

@@ -11,13 +11,13 @@ var _react = _interopRequireDefault(require("react"));
 
 var _propTypes = _interopRequireDefault(require("prop-types"));
 
-var _router = require("@reach/router");
+var _reactRouterDom = require("react-router-dom");
 
 var _validator = _interopRequireDefault(require("validator"));
 
 var NavLink = function NavLink(_ref) {
   var link = _ref.link,
-      className = _ref.className,
+      _className = _ref.className,
       wrapLabel = _ref.wrapLabel;
   var innerHtml = wrapLabel ? /*#__PURE__*/_react["default"].createElement("span", null, link.label) : link.label;
 
@@ -25,12 +25,15 @@ var NavLink = function NavLink(_ref) {
     require_protocol: true
   })) {
     return /*#__PURE__*/_react["default"].createElement("a", {
-      className: className,
+      className: _className,
       href: link.url
     }, innerHtml);
   } else {
-    return /*#__PURE__*/_react["default"].createElement(_router.Link, {
-      className: className,
+    return /*#__PURE__*/_react["default"].createElement(_reactRouterDom.NavLink, {
+      className: function className(_ref2) {
+        var isActive = _ref2.isActive;
+        return isActive ? "dc-c-active-link ".concat(_className) : "".concat(_className);
+      },
       to: link.url
     }, innerHtml);
   }

package/lib/components/ResourceHeader/index.js

@@ -9,7 +9,7 @@ exports["default"] = void 0;
 
 var _react = _interopRequireDefault(require("react"));
 
-var _router = require("@reach/router");
+var _reactRouterDom = require("react-router-dom");
 
 var _dataCatalogComponents = require("@civicactions/data-catalog-components");
 
@@ -37,7 +37,7 @@ var ResourceHeader = function ResourceHeader(_ref) {
     className: "ds-l-row"
   }, /*#__PURE__*/_react["default"].createElement("div", {
     className: "ds-l-col--12"
-  }, includeFiltered && /*#__PURE__*/_react["default"].createElement(_router.Link, {
+  }, includeFiltered && /*#__PURE__*/_react["default"].createElement(_reactRouterDom.Link, {
     className: "ds-c-button ds-c-button--primary",
     to: "/dataset/".concat(id, "/data")
   }, "View and filter data")), includeDensity && /*#__PURE__*/_react["default"].createElement("div", {

package/lib/components/SearchModal/index.js

@@ -13,7 +13,7 @@ var _slicedToArray2 = _interopRequireDefault(require("@babel/runtime/helpers/sli
 
 var _react = _interopRequireWildcard(require("react"));
 
-var _router = require("@reach/router");
+var _reactRouterDom = require("react-router-dom");
 
 var _reactResponsive = require("react-responsive");
 
@@ -30,6 +30,7 @@ var SearchModal = function SearchModal(_ref) {
       buttonSize = _ref.buttonSize,
       inversedModalButton = _ref.inversedModalButton,
       inversedSearchButton = _ref.inversedSearchButton;
+  var navigate = (0, _reactRouterDom.useNavigate)();
 
   var _useState = (0, _react.useState)(''),
       _useState2 = (0, _slicedToArray2["default"])(_useState, 2),
@@ -51,7 +52,7 @@ var SearchModal = function SearchModal(_ref) {
 
     if (window) {
       if (window.location.pathname !== '/datasets') {
-        (0, _router.navigate)("/datasets?fulltext=".concat(modalSearchTerm));
+        navigate("/datasets?fulltext=".concat(modalSearchTerm));
       } else {
         window.location.search = "fulltext=".concat(modalSearchTerm);
         setModalSearch(false);
@@ -103,7 +104,7 @@ var SearchModal = function SearchModal(_ref) {
 
 SearchModal.defaultProps = {
   appNodeId: 'App',
-  buttonSize: '',
+  buttonSize: null,
   inversedModalButton: true,
   inversedSearchButton: true
 };

package/lib/templates/FilteredResource/FilteredResourceBody.js

@@ -17,7 +17,7 @@ var _react = _interopRequireWildcard(require("react"));
 
 var _qs = _interopRequireDefault(require("qs"));
 
-var _router = require("@reach/router");
+var _reactRouterDom = require("react-router-dom");
 
 var _swaggerUiReact = _interopRequireDefault(require("swagger-ui-react"));
 
@@ -54,6 +54,7 @@ var FilteredResourceBody = function FilteredResourceBody(_ref) {
       columnSettings = _ref.columnSettings,
       columnWidths = _ref.columnWidths,
       customTitle = _ref.customTitle;
+  var navigate = (0, _reactRouterDom.useNavigate)();
 
   var _React$useState = _react["default"].useState('ds-u-padding-y--1'),
       _React$useState2 = (0, _slicedToArray2["default"])(_React$useState, 2),
@@ -100,7 +101,7 @@ var FilteredResourceBody = function FilteredResourceBody(_ref) {
   var pageTitle = distribution.data.title ? distribution.data.title : dataset.title;
   return /*#__PURE__*/_react["default"].createElement("section", {
     className: "ds-l-container ds-u-padding-bottom--3 ds-u-margin-bottom--2"
-  }, Object.keys(distribution).length && /*#__PURE__*/_react["default"].createElement(_react["default"].Fragment, null, /*#__PURE__*/_react["default"].createElement(_router.Link, {
+  }, Object.keys(distribution).length && /*#__PURE__*/_react["default"].createElement(_react["default"].Fragment, null, /*#__PURE__*/_react["default"].createElement(_reactRouterDom.Link, {
     to: "/dataset/".concat(id),
     className: "ds-u-padding-y--3 ds-u-display--block"
   }, "Back to ", dataset.title), /*#__PURE__*/_react["default"].createElement("h1", {
@@ -163,7 +164,7 @@ var FilteredResourceBody = function FilteredResourceBody(_ref) {
     variation: "transparent",
     className: "ds-u-text-align--left ds-u-font-weight--normal",
     onClick: function onClick() {
-      return (0, _router.navigate)(apiDocPage);
+      return navigate(apiDocPage);
     }
   }, "View API documentation")))), resource.columns && Object.keys(resource.schema).length ? /*#__PURE__*/_react["default"].createElement("div", null, /*#__PURE__*/_react["default"].createElement(_ResourceHeader["default"], {
     includeDensity: true,

package/lib/templates/header/index.js

@@ -11,7 +11,7 @@ var _react = _interopRequireDefault(require("react"));
 
 var _propTypes = _interopRequireDefault(require("prop-types"));
 
-var _router = require("@reach/router");
+var _reactRouterDom = require("react-router-dom");
 
 var _NavBar = _interopRequireDefault(require("../../components/NavBar"));
 
@@ -66,7 +66,7 @@ var Header = function Header(_ref) {
     className: "ds-l-row ds-u-align-items--center"
   }, /*#__PURE__*/_react["default"].createElement("div", {
     className: "ds-u-margin-right--5 ds-u-padding-y--3 dc-c-site-title"
-  }, /*#__PURE__*/_react["default"].createElement(_router.Link, {
+  }, /*#__PURE__*/_react["default"].createElement(_reactRouterDom.NavLink, {
     to: "/"
   }, /*#__PURE__*/_react["default"].createElement("span", {
     className: "ds-h1"
@@ -99,7 +99,7 @@ Header.defaultProps = {
   linkClasses: 'ds-u-xl-margin-right--4 ds-u-margin-right--3 ds-u-padding-y--3'
 };
 Header.propTypes = {
-  siteName: _propTypes["default"].string.isRequired,
+  siteName: _propTypes["default"].node.isRequired,
   includeTopNav: _propTypes["default"].bool,
   linkClasses: _propTypes["default"].string
 };

package/lib/templates/mobile_header/index.js

@@ -17,7 +17,7 @@ var _reactResponsive = require("react-responsive");
 
 var _designSystem = require("@cmsgov/design-system");
 
-var _router = require("@reach/router");
+var _reactRouterDom = require("react-router-dom");
 
 var _SearchModal = _interopRequireDefault(require("../../components/SearchModal"));
 
@@ -128,7 +128,7 @@ var MobileHeader = function MobileHeader(_ref) {
     className: "ds-u-visibility--screen-reader"
   }, "Menu") : /*#__PURE__*/_react["default"].createElement(_react["default"].Fragment, null, "Menu")), /*#__PURE__*/_react["default"].createElement("div", {
     className: "ds-u-padding-y--3 dc-c-site-title"
-  }, /*#__PURE__*/_react["default"].createElement(_router.Link, {
+  }, /*#__PURE__*/_react["default"].createElement(_reactRouterDom.Link, {
     to: "/"
   }, /*#__PURE__*/_react["default"].createElement("span", {
     className: "ds-h1"

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@civicactions/cmsds-open-data-components",
-  "version": "1.9.1",
+  "version": "1.10.0",
   "description": "Components for the open data catalog frontend using CMS Design System",
   "main": "lib/index.js",
   "scripts": {
@@ -20,17 +20,14 @@
   "license": "GPL-3.0",
   "dependencies": {
     "@civicactions/data-catalog-components": "2.0.0-beta.4",
-    "@civicactions/data-catalog-services": "1.3.0",
+    "@civicactions/data-catalog-services": "1.4.0",
     "@cmsgov/design-system": "~2.6.1",
-    "@reach/router": "^1.3.3",
-    "enzyme": "^3.10.0",
-    "enzyme-adapter-react-16": "^1.14.0",
     "prop-types": "^15.7.2",
     "qs": "^6.10.1",
     "react-datepicker": "^4.2.1",
+    "react-router-dom": "^6.2.2",
     "react-table": "^7.6.2",
-    "react-text-truncate": "^0.16.0",
-    "react-truncate": "^2.4.0",
+    "react-text-truncate": "^0.18.0",
     "swagger-ui-react": "^4.1.3"
   },
   "devDependencies": {
@@ -63,8 +60,8 @@
     "@testing-library/react": "^10.2.1",
     "@testing-library/react-hooks": "^3.3.0",
     "babel-eslint": "^10.0.3",
-    "babel-jest": "^24.9.0",
-    "babel-loader": "^8.0.6",
+    "babel-jest": "^26.6.0",
+    "babel-loader": "8.1.0",
     "babel-plugin-styled-components": "^1.10.6",
     "babel-polyfill": "^6.26.0",
     "babel-preset-es2015": "^6.24.1",
@@ -72,17 +69,14 @@
     "babel-preset-stage-0": "^6.24.1",
     "core-js": "^2.6.5",
     "css-loader": "^2.1.0",
-    "docz": "^2.3.1",
     "eslint": "^6.2.1",
     "eslint-config-airbnb": "^18.0.1",
     "eslint-plugin-import": "^2.18.2",
     "eslint-plugin-jsx-a11y": "^6.2.3",
     "eslint-plugin-react": "^7.14.3",
     "eslint-plugin-react-hooks": "^1.7.0",
-    "extract-text-webpack-plugin": "^3.0.2",
-    "jest": "^24.9.0",
+    "jest": "26.6.0",
     "jest-axe": "^4.1.0",
-    "node-sass": "^4.13.1",
     "prettier": "^2.5.1",
     "react-test-renderer": "^17.0.2",
     "sass-loader": "^7.1.0",