@civicactions/cmsds-open-data-components 1.10.0-alpha.2 → 1.11.0-alpha.1

package/dist/scss/templates/dataset.scss

@@ -17,15 +17,17 @@
 }
 
 .dc-c-resize-handle {
-  height: 61px;
-  background-color: $color-primary-darkest;
+  height: auto;
+  background-color: $color-gray-light;
   width: 10px;
   min-width: 10px;
   display: block;
   margin-left: -10px;
+  border-bottom: 2px solid #323a45;
+  border-top: 2px solid #323a45;
   z-index: 1;
   &.isResizing,
   &:hover {
-    background-color: $color-primary-darker;
+    background-color: $color-primary;
   }
 }

package/dist/scss/templates/index.scss

@@ -4,3 +4,4 @@
 @import './filtered-resource.scss';
 @import './dataset.scss';
 @import './swagger.scss';
+@import './query-builder.scss';

package/dist/scss/templates/query-builder.scss

@@ -0,0 +1,15 @@
+.dc-query-builder .ds-c-accordion__content {
+  padding-bottom: 0 !important;
+  max-height: 24rem;
+}
+.dc-query-builder form {
+  position: relative;
+}
+
+.dc-query-bulder--form-buttons {
+  position: sticky;
+  position: -webkit-sticky;
+  width: 100%;
+  bottom: 0;
+  background-color: white;
+}

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/icons/close.js

@@ -27,7 +27,7 @@ var CloseIcon = function CloseIcon() {
     d: "M14.6467778,11.2126037 C14.8818403,11.4476661 15,11.7342663 15,12.0711472 C15,12.4080282 14.8818403,12.6946283 14.6467778,12.9296908 L12.9296908,14.6467778 C12.6933713,14.8830973 12.4067711,15.001257 12.0698902,15.001257 C11.7342663,15.001257 11.4476661,14.8830973 11.2126037,14.6467778 L7.49937149,10.9348026 L3.7873963,14.6467778 C3.55233386,14.8830973 3.26573368,15.001257 2.92885276,15.001257 C2.59197184,15.001257 2.30662868,14.8830973 2.07030923,14.6467778 L0.353222157,12.9296908 C0.116902707,12.6946283 0,12.4080282 0,12.0711472 C0,11.7342663 0.116902707,11.4476661 0.353222157,11.2126037 L4.06519735,7.50062851 L0.353222157,3.78865331 C0.116902707,3.55233386 0,3.2669907 0,2.92885276 C0,2.59322886 0.116902707,2.30662868 0.353222157,2.07156624 L2.07030923,0.353222157 C2.30662868,0.118159725 2.59197184,0 2.92885276,0 C3.26573368,0 3.55233386,0.118159725 3.7873963,0.353222157 L7.49937149,4.06519735 L11.2126037,0.353222157 C11.4476661,0.118159725 11.7342663,0 12.0698902,0 C12.4067711,0 12.6933713,0.118159725 12.9296908,0.353222157 L14.6467778,2.07156624 C14.8818403,2.30662868 15,2.59322886 15,2.92885276 C15,3.2669907 14.8818403,3.55233386 14.6467778,3.78865331 L10.9348026,7.50062851 L14.6467778,11.2126037 Z",
     id: "Path",
     fill: "#000000",
-    "fill-rule": "nonzero"
+    fillRule: "nonzero"
   })));
 };
 

package/lib/assets/icons/close.jsx

@@ -16,7 +16,7 @@ const CloseIcon = () => (
         d="M14.6467778,11.2126037 C14.8818403,11.4476661 15,11.7342663 15,12.0711472 C15,12.4080282 14.8818403,12.6946283 14.6467778,12.9296908 L12.9296908,14.6467778 C12.6933713,14.8830973 12.4067711,15.001257 12.0698902,15.001257 C11.7342663,15.001257 11.4476661,14.8830973 11.2126037,14.6467778 L7.49937149,10.9348026 L3.7873963,14.6467778 C3.55233386,14.8830973 3.26573368,15.001257 2.92885276,15.001257 C2.59197184,15.001257 2.30662868,14.8830973 2.07030923,14.6467778 L0.353222157,12.9296908 C0.116902707,12.6946283 0,12.4080282 0,12.0711472 C0,11.7342663 0.116902707,11.4476661 0.353222157,11.2126037 L4.06519735,7.50062851 L0.353222157,3.78865331 C0.116902707,3.55233386 0,3.2669907 0,2.92885276 C0,2.59322886 0.116902707,2.30662868 0.353222157,2.07156624 L2.07030923,0.353222157 C2.30662868,0.118159725 2.59197184,0 2.92885276,0 C3.26573368,0 3.55233386,0.118159725 3.7873963,0.353222157 L7.49937149,4.06519735 L11.2126037,0.353222157 C11.4476661,0.118159725 11.7342663,0 12.0698902,0 C12.4067711,0 12.6933713,0.118159725 12.9296908,0.353222157 L14.6467778,2.07156624 C14.8818403,2.30662868 15,2.59322886 15,2.92885276 C15,3.2669907 14.8818403,3.55233386 14.6467778,3.78865331 L10.9348026,7.50062851 L14.6467778,11.2126037 Z"
         id="Path"
         fill="#000000"
-        fill-rule="nonzero"
+        fillRule="nonzero"
       ></path>
     </g>
   </svg>

package/lib/assets/icons/copy.js

@@ -0,0 +1,35 @@
+"use strict";
+
+var _interopRequireDefault = require("@babel/runtime/helpers/interopRequireDefault");
+
+Object.defineProperty(exports, "__esModule", {
+  value: true
+});
+exports["default"] = void 0;
+
+var _react = _interopRequireDefault(require("react"));
+
+var CopyIcon = function CopyIcon() {
+  return /*#__PURE__*/_react["default"].createElement("svg", {
+    width: "15px",
+    height: "15px",
+    viewBox: "0 0 512 512",
+    version: "1.1",
+    xmlns: "http://www.w3.org/2000/svg",
+    xmlnsXlink: "http://www.w3.org/1999/xlink"
+  }, /*#__PURE__*/_react["default"].createElement("g", {
+    id: "Artboard",
+    stroke: "none",
+    strokeWidth: "1",
+    fill: "none",
+    fillRule: "evenodd"
+  }, /*#__PURE__*/_react["default"].createElement("path", {
+    id: "Path",
+    fill: "#112E51",
+    fillRule: "nonzero",
+    d: "M384 96L384 0h-112c-26.51 0-48 21.49-48 48v288c0 26.51 21.49 48 48 48H464c26.51 0 48-21.49 48-48V128h-95.1C398.4 128 384 113.6 384 96zM416 0v96h96L416 0zM192 352V128h-144c-26.51 0-48 21.49-48 48v288c0 26.51 21.49 48 48 48h192c26.51 0 48-21.49 48-48L288 416h-32C220.7 416 192 387.3 192 352z"
+  })));
+};
+
+var _default = CopyIcon;
+exports["default"] = _default;

package/lib/assets/icons/copy.jsx

@@ -0,0 +1,23 @@
+import React from 'react';
+
+const CopyIcon = () => (
+  <svg
+    width="15px"
+    height="15px"
+    viewBox="0 0 512 512"
+    version="1.1"
+    xmlns="http://www.w3.org/2000/svg"
+    xmlnsXlink="http://www.w3.org/1999/xlink"
+  >
+    <g id="Artboard" stroke="none" strokeWidth="1" fill="none" fillRule="evenodd">
+      <path
+        id="Path"
+        fill="#112E51"
+        fillRule="nonzero"
+        d="M384 96L384 0h-112c-26.51 0-48 21.49-48 48v288c0 26.51 21.49 48 48 48H464c26.51 0 48-21.49 48-48V128h-95.1C398.4 128 384 113.6 384 96zM416 0v96h96L416 0zM192 352V128h-144c-26.51 0-48 21.49-48 48v288c0 26.51 21.49 48 48 48h192c26.51 0 48-21.49 48-48L288 416h-32C220.7 416 192 387.3 192 352z"
+      />
+    </g>
+  </svg>
+);
+
+export default CopyIcon;

package/lib/assets/icons/download.js

@@ -0,0 +1,35 @@
+"use strict";
+
+var _interopRequireDefault = require("@babel/runtime/helpers/interopRequireDefault");
+
+Object.defineProperty(exports, "__esModule", {
+  value: true
+});
+exports["default"] = void 0;
+
+var _react = _interopRequireDefault(require("react"));
+
+var DownloadIcon = function DownloadIcon() {
+  return /*#__PURE__*/_react["default"].createElement("svg", {
+    width: "15px",
+    height: "15px",
+    viewBox: "0 0 384 512",
+    version: "1.1",
+    xmlns: "http://www.w3.org/2000/svg",
+    xmlnsXlink: "http://www.w3.org/1999/xlink"
+  }, /*#__PURE__*/_react["default"].createElement("g", {
+    id: "Artboard",
+    stroke: "none",
+    strokeWidth: "1",
+    fill: "none",
+    fillRule: "evenodd"
+  }, /*#__PURE__*/_react["default"].createElement("path", {
+    id: "Path",
+    fill: "#112E51",
+    fillRule: "nonzero",
+    d: "M384 128h-128V0L384 128zM256 160H384v304c0 26.51-21.49 48-48 48h-288C21.49 512 0 490.5 0 464v-416C0 21.49 21.49 0 48 0H224l.0039 128C224 145.7 238.3 160 256 160zM255 295L216 334.1V232c0-13.25-10.75-24-24-24S168 218.8 168 232v102.1L128.1 295C124.3 290.3 118.2 288 112 288S99.72 290.3 95.03 295c-9.375 9.375-9.375 24.56 0 33.94l80 80c9.375 9.375 24.56 9.375 33.94 0l80-80c9.375-9.375 9.375-24.56 0-33.94S264.4 285.7 255 295z"
+  })));
+};
+
+var _default = DownloadIcon;
+exports["default"] = _default;

package/lib/assets/icons/download.jsx

@@ -0,0 +1,23 @@
+import React from 'react';
+
+const DownloadIcon = () => (
+  <svg
+    width="15px"
+    height="15px"
+    viewBox="0 0 384 512"
+    version="1.1"
+    xmlns="http://www.w3.org/2000/svg"
+    xmlnsXlink="http://www.w3.org/1999/xlink"
+  >
+    <g id="Artboard" stroke="none" strokeWidth="1" fill="none" fillRule="evenodd">
+      <path
+        id="Path"
+        fill="#112E51"
+        fillRule="nonzero"
+        d="M384 128h-128V0L384 128zM256 160H384v304c0 26.51-21.49 48-48 48h-288C21.49 512 0 490.5 0 464v-416C0 21.49 21.49 0 48 0H224l.0039 128C224 145.7 238.3 160 256 160zM255 295L216 334.1V232c0-13.25-10.75-24-24-24S168 218.8 168 232v102.1L128.1 295C124.3 290.3 118.2 288 112 288S99.72 290.3 95.03 295c-9.375 9.375-9.375 24.56 0 33.94l80 80c9.375 9.375 24.56 9.375 33.94 0l80-80c9.375-9.375 9.375-24.56 0-33.94S264.4 285.7 255 295z"
+      />
+    </g>
+  </svg>
+);
+
+export default DownloadIcon;

package/lib/assets/icons/settings.js

@@ -0,0 +1,36 @@
+"use strict";
+
+var _interopRequireDefault = require("@babel/runtime/helpers/interopRequireDefault");
+
+Object.defineProperty(exports, "__esModule", {
+  value: true
+});
+exports["default"] = void 0;
+
+var _react = _interopRequireDefault(require("react"));
+
+var SettingsIcon = function SettingsIcon() {
+  return /*#__PURE__*/_react["default"].createElement("svg", {
+    width: "15px",
+    height: "15px" // viewBox="0 0 15 15"
+    ,
+    viewBox: "0 0 512 512",
+    version: "1.1",
+    xmlns: "http://www.w3.org/2000/svg",
+    xmlnsXlink: "http://www.w3.org/1999/xlink"
+  }, /*#__PURE__*/_react["default"].createElement("g", {
+    id: "Artboard",
+    stroke: "none",
+    strokeWidth: "1",
+    fill: "none",
+    fillRule: "evenodd"
+  }, /*#__PURE__*/_react["default"].createElement("path", {
+    id: "Path",
+    fill: "#112E51",
+    fillRule: "nonzero",
+    d: "M495.9 166.6C499.2 175.2 496.4 184.9 489.6 191.2L446.3 230.6C447.4 238.9 448 247.4 448 256C448 264.6 447.4 273.1 446.3 281.4L489.6 320.8C496.4 327.1 499.2 336.8 495.9 345.4C491.5 357.3 486.2 368.8 480.2 379.7L475.5 387.8C468.9 398.8 461.5 409.2 453.4 419.1C447.4 426.2 437.7 428.7 428.9 425.9L373.2 408.1C359.8 418.4 344.1 427 329.2 433.6L316.7 490.7C314.7 499.7 307.7 506.1 298.5 508.5C284.7 510.8 270.5 512 255.1 512C241.5 512 227.3 510.8 213.5 508.5C204.3 506.1 197.3 499.7 195.3 490.7L182.8 433.6C167 427 152.2 418.4 138.8 408.1L83.14 425.9C74.3 428.7 64.55 426.2 58.63 419.1C50.52 409.2 43.12 398.8 36.52 387.8L31.84 379.7C25.77 368.8 20.49 357.3 16.06 345.4C12.82 336.8 15.55 327.1 22.41 320.8L65.67 281.4C64.57 273.1 64 264.6 64 256C64 247.4 64.57 238.9 65.67 230.6L22.41 191.2C15.55 184.9 12.82 175.3 16.06 166.6C20.49 154.7 25.78 143.2 31.84 132.3L36.51 124.2C43.12 113.2 50.52 102.8 58.63 92.95C64.55 85.8 74.3 83.32 83.14 86.14L138.8 103.9C152.2 93.56 167 84.96 182.8 78.43L195.3 21.33C197.3 12.25 204.3 5.04 213.5 3.51C227.3 1.201 241.5 0 256 0C270.5 0 284.7 1.201 298.5 3.51C307.7 5.04 314.7 12.25 316.7 21.33L329.2 78.43C344.1 84.96 359.8 93.56 373.2 103.9L428.9 86.14C437.7 83.32 447.4 85.8 453.4 92.95C461.5 102.8 468.9 113.2 475.5 124.2L480.2 132.3C486.2 143.2 491.5 154.7 495.9 166.6V166.6zM256 336C300.2 336 336 300.2 336 255.1C336 211.8 300.2 175.1 256 175.1C211.8 175.1 176 211.8 176 255.1C176 300.2 211.8 336 256 336z"
+  })));
+};
+
+var _default = SettingsIcon;
+exports["default"] = _default;

package/lib/assets/icons/settings.jsx

@@ -0,0 +1,24 @@
+import React from 'react';
+
+const SettingsIcon = () => (
+  <svg
+    width="15px"
+    height="15px"
+    // viewBox="0 0 15 15"
+    viewBox="0 0 512 512"
+    version="1.1"
+    xmlns="http://www.w3.org/2000/svg"
+    xmlnsXlink="http://www.w3.org/1999/xlink"
+  >
+    <g id="Artboard" stroke="none" strokeWidth="1" fill="none" fillRule="evenodd">
+      <path
+        id="Path"
+        fill="#112E51"
+        fillRule="nonzero"
+        d="M495.9 166.6C499.2 175.2 496.4 184.9 489.6 191.2L446.3 230.6C447.4 238.9 448 247.4 448 256C448 264.6 447.4 273.1 446.3 281.4L489.6 320.8C496.4 327.1 499.2 336.8 495.9 345.4C491.5 357.3 486.2 368.8 480.2 379.7L475.5 387.8C468.9 398.8 461.5 409.2 453.4 419.1C447.4 426.2 437.7 428.7 428.9 425.9L373.2 408.1C359.8 418.4 344.1 427 329.2 433.6L316.7 490.7C314.7 499.7 307.7 506.1 298.5 508.5C284.7 510.8 270.5 512 255.1 512C241.5 512 227.3 510.8 213.5 508.5C204.3 506.1 197.3 499.7 195.3 490.7L182.8 433.6C167 427 152.2 418.4 138.8 408.1L83.14 425.9C74.3 428.7 64.55 426.2 58.63 419.1C50.52 409.2 43.12 398.8 36.52 387.8L31.84 379.7C25.77 368.8 20.49 357.3 16.06 345.4C12.82 336.8 15.55 327.1 22.41 320.8L65.67 281.4C64.57 273.1 64 264.6 64 256C64 247.4 64.57 238.9 65.67 230.6L22.41 191.2C15.55 184.9 12.82 175.3 16.06 166.6C20.49 154.7 25.78 143.2 31.84 132.3L36.51 124.2C43.12 113.2 50.52 102.8 58.63 92.95C64.55 85.8 74.3 83.32 83.14 86.14L138.8 103.9C152.2 93.56 167 84.96 182.8 78.43L195.3 21.33C197.3 12.25 204.3 5.04 213.5 3.51C227.3 1.201 241.5 0 256 0C270.5 0 284.7 1.201 298.5 3.51C307.7 5.04 314.7 12.25 316.7 21.33L329.2 78.43C344.1 84.96 359.8 93.56 373.2 103.9L428.9 86.14C437.7 83.32 447.4 85.8 453.4 92.95C461.5 102.8 468.9 113.2 475.5 124.2L480.2 132.3C486.2 143.2 491.5 154.7 495.9 166.6V166.6zM256 336C300.2 336 336 300.2 336 255.1C336 211.8 300.2 175.1 256 175.1C211.8 175.1 176 211.8 176 255.1C176 300.2 211.8 336 256 336z"
+      />
+    </g>
+  </svg>
+);
+
+export default SettingsIcon;

package/lib/components/DataTableDensity/index.js

@@ -16,34 +16,28 @@ var _designSystem = require("@cmsgov/design-system");
 var DataTableDensity = function DataTableDensity(_ref) {
   var setTablePadding = _ref.setTablePadding,
       tablePadding = _ref.tablePadding;
-  return /*#__PURE__*/_react["default"].createElement("div", null, /*#__PURE__*/_react["default"].createElement("span", null, "Display density:"), /*#__PURE__*/_react["default"].createElement(_designSystem.Button, {
-    onClick: function onClick() {
-      return setTablePadding('ds-u-padding-y--0');
-    },
-    size: "small",
-    variation: "transparent",
-    className: tablePadding === 'ds-u-padding-y--0' ? 'ds-u-font-weight--bold' : ''
-  }, /*#__PURE__*/_react["default"].createElement("span", {
-    className: "ds-u-visibility--screen-reader"
-  }, "Table padding"), " Tight"), /*#__PURE__*/_react["default"].createElement(_designSystem.Button, {
-    onClick: function onClick() {
-      return setTablePadding('ds-u-padding-y--1');
-    },
+  return /*#__PURE__*/_react["default"].createElement("div", {
+    className: "ds-u-display--flex"
+  }, /*#__PURE__*/_react["default"].createElement(_designSystem.Dropdown, {
+    options: [{
+      label: 'Tight',
+      value: 'ds-u-padding-y--0'
+    }, {
+      label: 'Normal',
+      value: 'ds-u-padding-y--1'
+    }, {
+      label: 'Expanded',
+      value: 'ds-u-padding-y--2'
+    }],
     size: "small",
-    variation: "transparent",
-    className: tablePadding === 'ds-u-padding-y--1' ? 'ds-u-font-weight--bold' : ''
-  }, /*#__PURE__*/_react["default"].createElement("span", {
-    className: "ds-u-visibility--screen-reader"
-  }, "Table padding"), " Normal"), /*#__PURE__*/_react["default"].createElement(_designSystem.Button, {
-    onClick: function onClick() {
-      return setTablePadding('ds-u-padding-y--2');
+    label: "Display density:",
+    labelClassName: "ds-u-margin-top--0",
+    name: "datatable_display_density",
+    onChange: function onChange(e) {
+      return setLimit(e.target.value);
     },
-    size: "small",
-    variation: "transparent",
-    className: tablePadding === 'ds-u-padding-y--2' ? 'ds-u-font-weight--bold' : ''
-  }, /*#__PURE__*/_react["default"].createElement("span", {
-    className: "ds-u-visibility--screen-reader"
-  }, "Table padding"), " Expanded"));
+    defaultValue: 'ds-u-padding-y--1'
+  }));
 };
 
 DataTableDensity.propTypes = {

package/lib/components/DataTableRowChanger/index.js

@@ -17,22 +17,21 @@ var DataTableRowChanger = function DataTableRowChanger(_ref) {
   var setLimit = _ref.setLimit,
       rowOptions = _ref.rowOptions,
       limit = _ref.limit;
-  return /*#__PURE__*/_react["default"].createElement("div", {
-    className: "ds-u-text-align--right"
-  }, /*#__PURE__*/_react["default"].createElement("span", {
-    className: "ds-u-margin-right--2"
-  }, "Rows per page:"), rowOptions.map(function (r) {
-    return /*#__PURE__*/_react["default"].createElement(_designSystem.Button, {
-      key: "buttonFor".concat(r),
-      onClick: function onClick() {
-        return setLimit(r);
-      },
-      size: "small",
-      variation: "transparent",
-      className: "".concat(limit === r ? 'ds-u-font-weight--bold ds-u-border-bottom--2' : '', " ds-u-text-decoration--none ds-u-padding--0 ds-u-margin-right--1")
-    }, r, " ", /*#__PURE__*/_react["default"].createElement("span", {
-      className: "ds-u-visibility--screen-reader"
-    }, "rows per page"));
+  return /*#__PURE__*/_react["default"].createElement("div", null, /*#__PURE__*/_react["default"].createElement(_designSystem.Dropdown, {
+    options: rowOptions.map(function (row) {
+      return {
+        label: row,
+        value: row
+      };
+    }),
+    size: "small",
+    label: "Rows per page:",
+    labelClassName: "ds-u-margin-top--0",
+    name: "datatable_rows_per_page",
+    onChange: function onChange(e) {
+      return setLimit(e.target.value);
+    },
+    defaultValue: limit
   }));
 };
 

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/ResourceHeader/index.js

@@ -2,15 +2,25 @@
 
 var _interopRequireDefault = require("@babel/runtime/helpers/interopRequireDefault");
 
+var _typeof = require("@babel/runtime/helpers/typeof");
+
 Object.defineProperty(exports, "__esModule", {
   value: true
 });
 exports["default"] = void 0;
 
-var _react = _interopRequireDefault(require("react"));
+var _slicedToArray2 = _interopRequireDefault(require("@babel/runtime/helpers/slicedToArray"));
+
+var _react = _interopRequireWildcard(require("react"));
 
 var _reactRouterDom = require("react-router-dom");
 
+var _reactResponsive = require("react-responsive");
+
+var _reactPopper = require("react-popper");
+
+var _designSystem = require("@cmsgov/design-system");
+
 var _dataCatalogComponents = require("@civicactions/data-catalog-components");
 
 var _DataTableDensity = _interopRequireDefault(require("../../components/DataTableDensity"));
@@ -19,6 +29,16 @@ var _ManageColumns = _interopRequireDefault(require("../../components/ManageColu
 
 var _DataTableRowChanger = _interopRequireDefault(require("../../components/DataTableRowChanger"));
 
+var _download = _interopRequireDefault(require("../../assets/icons/download"));
+
+var _copy = _interopRequireDefault(require("../../assets/icons/copy"));
+
+var _settings = _interopRequireDefault(require("../../assets/icons/settings"));
+
+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; }
+
 var ResourceHeader = function ResourceHeader(_ref) {
   var setTablePadding = _ref.setTablePadding,
       id = _ref.id,
@@ -26,40 +46,100 @@ var ResourceHeader = function ResourceHeader(_ref) {
       includeFiltered = _ref.includeFiltered,
       includeDensity = _ref.includeDensity,
       resource = _ref.resource,
-      tablePadding = _ref.tablePadding;
+      tablePadding = _ref.tablePadding,
+      downloadUrl = _ref.downloadUrl;
+  var md = (0, _reactResponsive.useMediaQuery)({
+    minWidth: 0,
+    maxWidth: 768
+  });
   var limit = resource.limit,
       offset = resource.offset,
       count = resource.count,
       setLimit = resource.setLimit,
       setOffset = resource.setOffset;
   var intCount = count ? parseInt(count) : 0;
-  return /*#__PURE__*/_react["default"].createElement("div", null, /*#__PURE__*/_react["default"].createElement("div", {
+
+  var _useState = (0, _react.useState)(null),
+      _useState2 = (0, _slicedToArray2["default"])(_useState, 2),
+      referenceElement = _useState2[0],
+      setReferenceElement = _useState2[1];
+
+  var _useState3 = (0, _react.useState)(null),
+      _useState4 = (0, _slicedToArray2["default"])(_useState3, 2),
+      popperElement = _useState4[0],
+      setPopperElement = _useState4[1];
+
+  var _useState5 = (0, _react.useState)(null),
+      _useState6 = (0, _slicedToArray2["default"])(_useState5, 2),
+      arrowElement = _useState6[0],
+      setArrowElement = _useState6[1];
+
+  var _usePopper = (0, _reactPopper.usePopper)(referenceElement, popperElement, {
+    modifiers: [{
+      name: 'arrow',
+      options: {
+        element: arrowElement
+      }
+    }]
+  }),
+      styles = _usePopper.styles,
+      attributes = _usePopper.attributes;
+
+  return /*#__PURE__*/_react["default"].createElement("div", {
+    className: "dc-c-resource-header"
+  }, /*#__PURE__*/_react["default"].createElement("div", {
     className: "ds-l-row"
   }, /*#__PURE__*/_react["default"].createElement("div", {
     className: "ds-l-col--12"
   }, 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", {
-    className: "ds-u-text-align--right ds-u-margin-left--auto ds-l-col--6"
-  }, /*#__PURE__*/_react["default"].createElement(_DataTableDensity["default"], {
-    setTablePadding: setTablePadding,
-    tablePadding: tablePadding
-  }))), /*#__PURE__*/_react["default"].createElement("div", {
+  }, "View and filter data"))), /*#__PURE__*/_react["default"].createElement("div", {
     className: "ds-l-row ds-u-align-items--center"
   }, /*#__PURE__*/_react["default"].createElement("div", {
-    className: "ds-l-col--6"
+    className: "ds-l-col--12 ds-u-display--flex ds-u-justify-content--between ds-u-align-items--center"
+  }, /*#__PURE__*/_react["default"].createElement("div", {
+    className: "ds-u-font-weight--bold"
   }, /*#__PURE__*/_react["default"].createElement(_dataCatalogComponents.DataTablePageResults, {
     totalRows: intCount,
     limit: limit,
     offset: offset
-  })), /*#__PURE__*/_react["default"].createElement("div", {
-    className: "ds-l-col--6"
-  }, /*#__PURE__*/_react["default"].createElement(_DataTableRowChanger["default"], {
-    limit: limit,
-    setLimit: setLimit,
-    setOffset: setOffset
-  }))));
+  })), /*#__PURE__*/_react["default"].createElement("div", null, !includeFiltered && /*#__PURE__*/_react["default"].createElement(_react["default"].Fragment, null, /*#__PURE__*/_react["default"].createElement(_designSystem.Button, {
+    size: "small",
+    className: "ds-u-text-align--left ds-u-font-weight--normal ds-u-font-size--base ds-u-margin-right--1",
+    href: downloadUrl,
+    "aria-label": "Download filtered data as CSV"
+  }, /*#__PURE__*/_react["default"].createElement(_download["default"], null), !md && /*#__PURE__*/_react["default"].createElement("span", {
+    className: "ds-u-font-weight--semibold ds-u-margin-left--1"
+  }, "Download filtered data (CSV)")), /*#__PURE__*/_react["default"].createElement(_designSystem.Tooltip, {
+    onOpen: function onOpen() {
+      navigator.clipboard.writeText(window.location.href);
+    },
+    className: "ds-c-button ds-c-button--small ds-u-text-align--left ds-u-margin-right--1",
+    placement: "bottom",
+    dialog: true,
+    ariaLabel: "Copy link to filtered data",
+    title: "Link copied to clipboard"
+  }, /*#__PURE__*/_react["default"].createElement(_copy["default"], null), !md && /*#__PURE__*/_react["default"].createElement("span", {
+    className: "ds-u-font-weight--semibold ds-u-margin-left--1"
+  }, "Copy link to filtered data"))), /*#__PURE__*/_react["default"].createElement(_designSystem.Tooltip, {
+    className: "ds-c-button ds-c-button--small ds-u-text-align--left",
+    placement: "bottom",
+    dialog: true,
+    ariaLabel: "Display settings",
+    title: /*#__PURE__*/_react["default"].createElement("div", {
+      className: "dc-c-display-settings"
+    }, /*#__PURE__*/_react["default"].createElement(_DataTableRowChanger["default"], {
+      limit: limit,
+      setLimit: setLimit,
+      setOffset: setOffset
+    }), includeDensity && /*#__PURE__*/_react["default"].createElement(_DataTableDensity["default"], {
+      setTablePadding: setTablePadding,
+      tablePadding: tablePadding
+    }))
+  }, /*#__PURE__*/_react["default"].createElement(_settings["default"], null), !md && /*#__PURE__*/_react["default"].createElement("span", {
+    className: "ds-u-font-weight--semibold ds-u-margin-left--1"
+  }, "Display settings"))))));
 };
 
 var _default = ResourceHeader;

package/lib/index.js

@@ -174,8 +174,6 @@ Object.defineProperty(exports, "useAddLoginLink", {
   }
 });
 
-var _array = require("core-js/fn/array");
-
 var _NavLink = _interopRequireDefault(require("./components/NavLink"));
 
 var _DatasetTags = _interopRequireDefault(require("./components/DatasetTags"));