@urbanos/react-discovery-ui 2.1.57 → 2.1.59

package/lib/components/collapsable-box/collapsable-box.js

@@ -39,6 +39,9 @@ var _default = exports.default = /*#__PURE__*/function (_Component) {
     _this.state = {
       expanded: isDesktop || props.expanded
     };
+    var title = typeof _this.props.title === 'string' || typeof _this.props.title === 'number' ? String(_this.props.title) : '';
+    var normalizedTitle = title.replace(/\s+/g, '-').toLowerCase();
+    _this.contentId = "collapsable-box-content-".concat(normalizedTitle || 'content');
     return _this;
   }
   _inherits(_default, _Component);
@@ -58,7 +61,15 @@ var _default = exports.default = /*#__PURE__*/function (_Component) {
     key: "render",
     value: function render() {
       var _this2 = this;
-      return /*#__PURE__*/React.createElement("collapsable-box", null, /*#__PURE__*/React.createElement("div", {
+      var childrenWithContentId = _react.Children.map(this.props.children, function (child) {
+        if (! /*#__PURE__*/(0, _react.isValidElement)(child)) return child;
+        return /*#__PURE__*/(0, _react.cloneElement)(child, {
+          contentId: _this2.contentId
+        });
+      });
+      return /*#__PURE__*/React.createElement("div", {
+        className: "collapsable-box ".concat(this.props.className || '')
+      }, /*#__PURE__*/React.createElement("div", {
         "data-testid": this.props.testId,
         className: "header-container ".concat(this.headerOpenClass()),
         onClick: function onClick(e) {
@@ -73,7 +84,8 @@ var _default = exports.default = /*#__PURE__*/function (_Component) {
         role: "button",
         tabIndex: "0",
         "aria-label": [this.props.title, extractText(this.props.headerHtml)].filter(Boolean).join(': ') || 'collapsable box',
-        "aria-pressed": this.state.expanded
+        "aria-controls": this.contentId,
+        "aria-expanded": this.state.expanded
       }, /*#__PURE__*/React.createElement("div", {
         className: "header-text-items"
       }, /*#__PURE__*/React.createElement("div", {
@@ -82,7 +94,9 @@ var _default = exports.default = /*#__PURE__*/function (_Component) {
         expanded: this.state.expanded
       })), /*#__PURE__*/React.createElement(_reactCollapse.Collapse, {
         isOpened: this.state.expanded
-      }, this.props.children));
+      }, /*#__PURE__*/React.createElement("div", {
+        id: this.contentId
+      }, childrenWithContentId)));
     }
   }]);
 }(_react.Component);

package/lib/components/collapsable-box/collapsable-box.scss

@@ -1,9 +1,7 @@
 @import '../../styles/mixins.scss';
 @import '../../styles/variables.scss';
 
-collapsable-box {
-  @include custom-element();
-
+.collapsable-box {
   border: 1px solid $light-grey;
   width: 100%;
   margin-top: 2.5rem;

package/lib/components/dataset-api-doc/api-example.scss

@@ -56,6 +56,11 @@ api-example {
     white-space: nowrap;
   }
 
+  .example-parameters {
+    max-height: 50vh;
+    overflow: auto;
+  }
+
   .example-table {
     border-collapse: collapse;
     width: 100%
@@ -81,4 +86,4 @@ api-example {
   .required-marker {
     text-align: center;
   }
-}
+}

package/lib/components/visualization-list-menu-item/visualization-list-menu-item.js

@@ -31,6 +31,7 @@ var VisualizationListMenuItem = function VisualizationListMenuItem(_ref) {
     setUserNeedsLoginInfo(false);
   };
   return /*#__PURE__*/React.createElement("visualization-list-menu-item", null, /*#__PURE__*/React.createElement(_tabButton.default, {
+    "aria-label": "Saved workspaces",
     "data-testid": "visualization-list-menu-item",
     className: "button-".concat(isAuthenticated ? 'enabled' : 'disabled', " ").concat(userNeedsLoginInfo && 'dialog-open'),
     onClick: showLoginPrompt

package/lib/components/visualization-save-menu-item/visualization-save-menu-item.js

@@ -49,6 +49,7 @@ var VisualizationSaveMenuItem = function VisualizationSaveMenuItem(props) {
     return !isAuthenticated || (0, _lodash.isEmpty)(title) || actionNotAllowed;
   };
   return /*#__PURE__*/React.createElement("visualization-save-menu-item", null, /*#__PURE__*/React.createElement(_tabButton.default, {
+    "aria-label": "Save workspace",
     "data-testid": "save-icon",
     disabled: !isSaveable,
     className: "header-item save-icon ".concat(isDialogOpen && 'saving'),

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

@@ -131,7 +131,7 @@ var _default = exports.default = /*#__PURE__*/function (_Component) {
       }, /*#__PURE__*/_react.default.createElement(_reactTabs.TabList, {
         className: "header"
       }, /*#__PURE__*/_react.default.createElement("span", {
-        className: "tab-area"
+        className: "tab-area header-tabs"
       }, /*#__PURE__*/_react.default.createElement(_reactTabs.Tab, {
         "data-testid": "dataset-details"
       }, "Dataset Details"), /*#__PURE__*/_react.default.createElement(_reactTabs.Tab, {

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

@@ -105,6 +105,10 @@ dataset-view {
       justify-content: space-between;
     }
 
+    .header-tabs {
+        display: none !important; 
+    }
+
     .tab-area {
       font-size: small;
     }
@@ -127,8 +131,8 @@ dataset-view {
 
     .mobile-tab-dropdown {
       position: absolute;
-      top: calc(100% + 4px);
-      left: 0;
+      top: calc(100% - 28px);
+      left: 34px;
       z-index: 20;
       background: white;
       border: 1px solid $light-grey;
@@ -143,5 +147,10 @@ dataset-view {
       border: 0;
       background: white;
     }
+    
+    .mobile-tab-dropdown button:hover {
+      background: $super-light-gray;
+      cursor: pointer;
+    }
   }
 }

package/package.json

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