@urbanos/react-discovery-ui 2.1.54 → 2.1.56

package/lib/assets/arrow_right.svg

@@ -0,0 +1,6 @@
+<?xml version="1.0" encoding="UTF-8"?>
+<svg viewBox="0 0 8 12" version="1.1" xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink">
+    <g id="designs" stroke="none" stroke-width="1" transform="translate(0, 12) rotate(-90.000000)">
+        <polygon id="path-1" points="1.41 0.59 6 5.17 10.59 0.59 12 2 6 8 0 2"></polygon>
+    </g>
+</svg>

package/lib/components/data-view/data-view.js

@@ -184,7 +184,7 @@ var DataTable = function DataTable(_ref) {
     }
   }, /*#__PURE__*/_react.default.createElement("table", {
     ref: tableRef,
-    role: "grid",
+    role: "table",
     tabIndex: 0,
     "aria-activedescendant": activeCellId,
     "aria-rowcount": dataRows.length + 1,

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

@@ -88,7 +88,7 @@ var MetadataTable = function MetadataTable(_ref) {
   })));
 };
 var _default = exports.default = function _default(_ref2) {
-  var _dataset$homepage, _dataset$sourceUrl, _dataset$license;
+  var _dataset$homepage, _dataset$sourceUrl, _dataset$license, _dataset$license2;
   var dataset = _ref2.dataset;
   if (!dataset) return /*#__PURE__*/_react.default.createElement("div", null);
   var referenceUrls = dataset.referenceUrls || [];
@@ -174,9 +174,9 @@ var _default = exports.default = function _default(_ref2) {
       role: "link",
       href: dataset.license,
       target: "_blank",
-      "aria-label": "License URL",
+      "aria-label": (_dataset$license = dataset.license) !== null && _dataset$license !== void 0 ? _dataset$license : 'Unavailable',
       rel: "noreferrer"
-    }, (_dataset$license = dataset.license) !== null && _dataset$license !== void 0 ? _dataset$license : 'Unavailable') : /*#__PURE__*/_react.default.createElement("span", null, "Unavailable")
+    }, (_dataset$license2 = dataset.license) !== null && _dataset$license2 !== void 0 ? _dataset$license2 : 'Unavailable') : /*#__PURE__*/_react.default.createElement("span", null, "Unavailable")
   }, {
     Field: 'Category',
     Value: dataset.catagories

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

@@ -31,4 +31,8 @@ dataset-metadata {
   a {
     @include sub-link();
   }
+
+  td {
+    overflow-wrap: anywhere;
+  }
 }

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

@@ -6,8 +6,6 @@
   flex-direction: column;
   padding: 0 2em 0 0;
   float: left;
-  margin-top: 20px;
-
 }
 
 .checkbox-label {
@@ -98,9 +96,6 @@
     background-size: 28px 28px;
   }
 
-  login-zone login-svgs-and-text span {
-    display: none;
-  }
 
   login-zone login-svgs-and-text .MuiSvgIcon-root {
     font-size: 2.4rem;

package/lib/components/generic-elements/{arrow-button/arrow-button.js → arrow-left-button/arrow-left-button.js}

@@ -4,7 +4,7 @@ Object.defineProperty(exports, "__esModule", {
   value: true
 });
 exports.default = void 0;
-var _arrow = _interopRequireDefault(require("../../../assets/arrow.svg"));
+var _arrow_left = _interopRequireDefault(require("../../../assets/arrow_left.svg"));
 function _interopRequireDefault(e) { return e && e.__esModule ? e : { default: e }; }
 var ENABLED_COLOR = '#000000';
 var DISABLED_COLOR = '#595959';
@@ -17,12 +17,13 @@ var _default = exports.default = function _default(_ref) {
     innerClass = _ref.innerClass;
   return /*#__PURE__*/React.createElement("button", {
     disabled: disabled,
+    "aria-label": "Previous page",
     className: "".concat(className, " ").concat(disabled ? 'disabled' : ''),
     onClick: onClick
-  }, /*#__PURE__*/React.createElement(_arrow.default, {
+  }, /*#__PURE__*/React.createElement(_arrow_left.default, {
     className: innerClass,
     height: "inherit",
     fill: disabled ? DISABLED_COLOR : ENABLED_COLOR,
-    accessibilityDesc: "Arrow"
+    accessibilityDesc: "Arrow Left"
   }));
 };

package/lib/components/generic-elements/{arrow-button → arrow-left-button}/index.js

@@ -4,6 +4,6 @@ Object.defineProperty(exports, "__esModule", {
   value: true
 });
 exports.default = void 0;
-var _arrowButton = _interopRequireDefault(require("./arrow-button"));
+var _arrowLeftButton = _interopRequireDefault(require("./arrow-left-button"));
 function _interopRequireDefault(e) { return e && e.__esModule ? e : { default: e }; }
-var _default = exports.default = _arrowButton.default;
+var _default = exports.default = _arrowLeftButton.default;

package/lib/components/generic-elements/arrow-right-button/arrow-right-button.js

@@ -0,0 +1,29 @@
+"use strict";
+
+Object.defineProperty(exports, "__esModule", {
+  value: true
+});
+exports.default = void 0;
+var _arrow_right = _interopRequireDefault(require("../../../assets/arrow_right.svg"));
+function _interopRequireDefault(e) { return e && e.__esModule ? e : { default: e }; }
+var ENABLED_COLOR = '#000000';
+var DISABLED_COLOR = '#595959';
+var _default = exports.default = function _default(_ref) {
+  var className = _ref.className,
+    _ref$disabled = _ref.disabled,
+    disabled = _ref$disabled === void 0 ? false : _ref$disabled,
+    _ref$onClick = _ref.onClick,
+    onClick = _ref$onClick === void 0 ? function () {} : _ref$onClick,
+    innerClass = _ref.innerClass;
+  return /*#__PURE__*/React.createElement("button", {
+    disabled: disabled,
+    "aria-label": "Next page",
+    className: "".concat(className, " ").concat(disabled ? 'disabled' : ''),
+    onClick: onClick
+  }, /*#__PURE__*/React.createElement(_arrow_right.default, {
+    className: innerClass,
+    height: "inherit",
+    fill: disabled ? DISABLED_COLOR : ENABLED_COLOR,
+    accessibilityDesc: "Arrow Right"
+  }));
+};

package/lib/components/generic-elements/arrow-right-button/index.js

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

package/lib/components/generic-elements/paginator/paginator.js

@@ -6,7 +6,8 @@ Object.defineProperty(exports, "__esModule", {
 exports.default = void 0;
 require("./paginator.scss");
 var _lodash = _interopRequireDefault(require("lodash"));
-var _arrowButton = _interopRequireDefault(require("../arrow-button"));
+var _arrowLeftButton = _interopRequireDefault(require("../arrow-left-button"));
+var _arrowRightButton = _interopRequireDefault(require("../arrow-right-button"));
 function _interopRequireDefault(e) { return e && e.__esModule ? e : { default: e }; }
 var DISPLAY_SIZE = 7;
 // Half the display width minus the first/last element and the elipsis
@@ -20,7 +21,7 @@ var _default = exports.default = function _default(_ref) {
   return /*#__PURE__*/React.createElement("paginator-element", {
     "data-testid": "paginator",
     class: className
-  }, /*#__PURE__*/React.createElement(_arrowButton.default, {
+  }, /*#__PURE__*/React.createElement(_arrowLeftButton.default, {
     className: "pagination-box arrow",
     disabled: currentPage === 1,
     onClick: function onClick() {
@@ -29,7 +30,7 @@ var _default = exports.default = function _default(_ref) {
     innerClass: "left-arrow"
   }), options.map(function (text, index) {
     return createOption(index, text, currentPage, pageChangeCallback);
-  }), /*#__PURE__*/React.createElement(_arrowButton.default, {
+  }), /*#__PURE__*/React.createElement(_arrowRightButton.default, {
     className: "pagination-box arrow",
     disabled: currentPage === numberOfPages,
     onClick: function onClick() {

package/lib/components/generic-elements/paginator/paginator.test.js

@@ -1,5 +1,7 @@
 import Paginator from './paginator'
-import ArrowButton from '../arrow-button'
+// import ArrowButton from '../arrow-button'
+import ArrowRightButton from '../arrow-right-button'
+import ArrowLeftButton from '../arrow-left-button'
 import { shallow } from 'enzyme'
 
 describe('Paginator', () => {
@@ -108,7 +110,7 @@ describe('Paginator', () => {
     test('clicking the left arrow when on the first page does nothing', () => {
       const subject = shallow(<Paginator currentPage={1} numberOfPages={15} pageChangeCallback={pageChangeCallback} />)
 
-      subject.find(ArrowButton).at(0).props().onClick()
+      subject.find(ArrowLeftButton).at(0).props().onClick()
 
       expect(pageChangeCallback).not.toHaveBeenCalled()
     })
@@ -116,7 +118,7 @@ describe('Paginator', () => {
     test('clicking the right arrow when on the last page does nothing', () => {
       const subject = shallow(<Paginator currentPage={15} numberOfPages={15} pageChangeCallback={pageChangeCallback} />)
 
-      subject.find(ArrowButton).at(1).props().onClick()
+      subject.find(ArrowRightButton).at(0).props().onClick()
 
       expect(pageChangeCallback).not.toHaveBeenCalled()
     })
@@ -124,7 +126,7 @@ describe('Paginator', () => {
     test('clicking the left arrow invokes the pageChangeCallback with the previous page', () => {
       const subject = shallow(<Paginator currentPage={4} numberOfPages={15} pageChangeCallback={pageChangeCallback} />)
 
-      subject.find(ArrowButton).at(0).props().onClick()
+      subject.find(ArrowLeftButton).at(0).props().onClick()
 
       expect(pageChangeCallback).toHaveBeenCalledWith(3)
     })
@@ -132,7 +134,7 @@ describe('Paginator', () => {
     test('clicking the right arrow invokes the pageChangeCallback with the next page', () => {
       const subject = shallow(<Paginator currentPage={4} numberOfPages={15} pageChangeCallback={pageChangeCallback} />)
 
-      subject.find(ArrowButton).at(1).props().onClick()
+      subject.find(ArrowRightButton).at(0).props().onClick()
 
       expect(pageChangeCallback).toHaveBeenCalledWith(5)
     })

package/lib/components/organization/organization.js

@@ -12,6 +12,7 @@ var _default = exports.default = function _default(_ref) {
     className: "organization-header"
   }, "Organization Info"), /*#__PURE__*/React.createElement("a", {
     role: "link",
+    "aria-label": "View ".concat(organization.title, " datasets"),
     href: "/?".concat(_utils.QueryStringBuilder.createFilterQueryString('organization', organization.title))
   }, /*#__PURE__*/React.createElement("img", {
     "data-testid": "organization-logo",

package/lib/components/share/share.scss

@@ -63,4 +63,21 @@ share-zone {
         display: flex;
         padding: 6px;
     }
-}
+
+    @media only screen and (max-width: 600px) {
+        .share-icons {
+            flex-wrap: wrap;
+            gap: 0.5rem;
+        }
+
+        .shareButton {
+            margin: 0;
+            flex: 0 0 32px;
+        }
+
+        .button.clipboard {
+            width: 100%;
+            justify-content: center;
+        }
+    }
+}

package/lib/pages/chart-view/chart-view.js

@@ -14,8 +14,6 @@ var _lodash = require("lodash");
 var _loadingElement = _interopRequireDefault(require("../../components/generic-elements/loading-element"));
 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 _interopRequireDefault(e) { return e && e.__esModule ? e : { default: e }; }
-// import 'react-chart-editor/lib/react-chart-editor.ie.css'
-
 var hasDataSources = function hasDataSources(dataSources) {
   return dataSources && Object.keys(dataSources).length > 0;
 };

package/lib/pages/dataset-detail-view/dataset-detail-view.scss

@@ -2,6 +2,22 @@
 
 dataset-detail-view {
   @include page-with-left-bar();
+  display: flex;
+  align-items: flex-start;
+  gap: 2rem;
+
+  .left-section {
+    float: none;
+    width: min-content;
+    flex: 0 0 auto;
+  }
+
+  .right-section {
+    float: none;
+    width: auto;
+    flex: 1 1 auto;
+    min-width: 0;
+  }
 
   dataset-api-doc {
     margin-top: 2.5rem
@@ -61,6 +77,8 @@ dataset-detail-view {
   }
 
   @media only screen and (max-width: 600px) {
+    display: block;
+
     .dataset-detail-view {
       min-width:400px;
       padding:4%;  
@@ -70,15 +88,14 @@ dataset-detail-view {
     } 
     .left-section, .right-section {
       width:100%;
-      float:left;
+      float:none;
       clear:both;
       display:block;
     }
     dataset-organization .logo {
-      display:none;
-    }
-    share-zone {
-      display:none;
+      display:block;
+      max-width:120px;
+      margin:0.75rem 0;
     }
     .download-button {
       display:none;
@@ -93,7 +110,7 @@ dataset-detail-view {
       font-weight:normal;
     } 
     dataset-organization .organization-header {
-      display:none;
+      display:block;
     }
     dataset-details .name {
       font-size:1.5rem;
@@ -116,7 +133,9 @@ dataset-detail-view {
       text-transform:uppercase;
     }
     dataset-organization .description {
-      display:none;
+      display:block;
+      font-size:0.9rem;
+      line-height:1.3;
     } 
     api-example .example-table {
       font-size:0.8em;

package/lib/pages/dataset-list-view/dataset-list-view.js

@@ -81,11 +81,7 @@ var DatasetListView = function DatasetListView(props) {
     callback: searchParamsManager.updateSearchText
   }), /*#__PURE__*/React.createElement("div", {
     className: "left-section"
-  }, /*#__PURE__*/React.createElement(_auth0LoginZone.default, null), /*#__PURE__*/React.createElement("div", {
-    style: {
-      height: '0.5rem'
-    }
-  }, /*#__PURE__*/React.createElement(_checkbox.default, {
+  }, /*#__PURE__*/React.createElement(_auth0LoginZone.default, null), /*#__PURE__*/React.createElement("div", null, /*#__PURE__*/React.createElement(_checkbox.default, {
     id: "toggleAPIDatasets",
     clickHandler: searchParamsManager.toggleApiAccessible,
     text: "Only Show API Accessible Datasets",

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@urbanos/react-discovery-ui",
-  "version": "2.1.54",
+  "version": "2.1.56",
   "description": "React component for dataset discovery UI",
   "main": "./lib/ReactDiscoveryUI.js",
   "repository": {