@urbanos/react-discovery-ui 2.1.43

package/lib/components/code-editor/code-editor.css

@@ -0,0 +1,173 @@
+/**
+ * VS theme by Andrew Lock (https://andrewlock.net)
+ * Inspired by Visual Studio syntax coloring
+ */
+
+code[class*="language-"],
+pre[class*="language-"] {
+	color: #393A34;
+	font-family: "Consolas", "Bitstream Vera Sans Mono", "Courier New", Courier, monospace;
+	direction: ltr;
+	text-align: left;
+	white-space: pre;
+	word-spacing: normal;
+	word-break: normal;
+	font-size: .9em;
+	line-height: 1.2em;
+
+	-moz-tab-size: 4;
+	-o-tab-size: 4;
+	tab-size: 4;
+
+	-webkit-hyphens: none;
+	-moz-hyphens: none;
+	-ms-hyphens: none;
+	hyphens: none;
+}
+
+pre>code[class*="language-"] {
+	font-size: 1em;
+}
+
+pre[class*="language-"]::-moz-selection,
+pre[class*="language-"] ::-moz-selection,
+code[class*="language-"]::-moz-selection,
+code[class*="language-"] ::-moz-selection {
+	background: #C1DEF1;
+}
+
+pre[class*="language-"]::selection,
+pre[class*="language-"] ::selection,
+code[class*="language-"]::selection,
+code[class*="language-"] ::selection {
+	background: #C1DEF1;
+}
+
+/* Code blocks */
+pre[class*="language-"] {
+	padding: 1em;
+	margin: .5em 0;
+	overflow: auto;
+	border: 1px solid #dddddd;
+	background-color: white;
+}
+
+/* Inline code */
+:not(pre)>code[class*="language-"] {
+	padding: .2em;
+	padding-top: 1px;
+	padding-bottom: 1px;
+	background: #f8f8f8;
+	border: 1px solid #dddddd;
+}
+
+.token.comment,
+.token.prolog,
+.token.doctype,
+.token.cdata {
+	color: #158655;
+	font-style: italic;
+}
+
+.token.namespace {
+	opacity: .7;
+}
+
+.token.string {
+	color: #A31515;
+}
+
+.token.punctuation,
+.token.operator {
+	color: #393A34;
+	/* no highlight */
+}
+
+.token.url,
+.token.symbol,
+.token.number,
+.token.boolean,
+.token.variable,
+.token.constant,
+.token.inserted {
+	color: #0000ff;
+}
+
+.token.atrule,
+.token.keyword,
+.token.attr-value,
+.language-autohotkey .token.selector,
+.language-json .token.boolean,
+.language-json .token.number,
+code[class*="language-css"] {
+	color: #0000ff;
+}
+
+.token.function {
+	color: #393A34;
+}
+
+.token.deleted,
+.language-autohotkey .token.tag {
+	color: #9a050f;
+}
+
+.token.selector,
+.language-autohotkey .token.keyword {
+	color: #00009f;
+}
+
+.token.important {
+	color: #e90;
+}
+
+.token.important,
+.token.bold {
+	font-weight: bold;
+}
+
+.token.italic {
+	font-style: italic;
+}
+
+.token.class-name,
+.language-json .token.property {
+	color: #00009f;
+}
+
+.token.tag,
+.token.selector {
+	color: #800000;
+}
+
+.token.attr-name,
+.token.property,
+.token.regex,
+.token.entity {
+	color: #ff0000;
+}
+
+.token.directive.tag .tag {
+	background: #ffff00;
+	color: #393A34;
+}
+
+/* overrides color-values for the Line Numbers plugin
+  * http://prismjs.com/plugins/line-numbers/
+  */
+.line-numbers.line-numbers .line-numbers-rows {
+	border-right-color: #a5a5a5;
+}
+
+.line-numbers .line-numbers-rows>span:before {
+	color: #00009f;
+}
+
+/* overrides color-values for the Line Highlight plugin
+ * http://prismjs.com/plugins/line-highlight/
+ */
+.line-highlight.line-highlight {
+	background: rgba(193, 222, 241, 0.2);
+	background: -webkit-linear-gradient(left, rgba(193, 222, 241, 0.2) 70%, rgba(221, 222, 241, 0));
+	background: linear-gradient(to right, rgba(193, 222, 241, 0.2) 70%, rgba(221, 222, 241, 0));
+}

package/lib/components/code-editor/code-editor.js

@@ -0,0 +1,64 @@
+"use strict";
+
+function _typeof(o) { "@babel/helpers - typeof"; return _typeof = "function" == typeof Symbol && "symbol" == typeof Symbol.iterator ? function (o) { return typeof o; } : function (o) { return o && "function" == typeof Symbol && o.constructor === Symbol && o !== Symbol.prototype ? "symbol" : typeof o; }, _typeof(o); }
+Object.defineProperty(exports, "__esModule", {
+  value: true
+});
+exports.default = void 0;
+var _react = _interopRequireDefault(require("react"));
+var _reactSimpleCodeEditor = _interopRequireDefault(require("react-simple-code-editor"));
+var _prismCore = require("prismjs/components/prism-core");
+require("prismjs/components/prism-sql");
+require("./code-editor.css");
+function _interopRequireDefault(e) { return e && e.__esModule ? e : { default: e }; }
+function _classCallCheck(a, n) { if (!(a instanceof n)) throw new TypeError("Cannot call a class as a function"); }
+function _defineProperties(e, r) { for (var t = 0; t < r.length; t++) { var o = r[t]; o.enumerable = o.enumerable || !1, o.configurable = !0, "value" in o && (o.writable = !0), Object.defineProperty(e, _toPropertyKey(o.key), o); } }
+function _createClass(e, r, t) { return r && _defineProperties(e.prototype, r), t && _defineProperties(e, t), Object.defineProperty(e, "prototype", { writable: !1 }), e; }
+function _toPropertyKey(t) { var i = _toPrimitive(t, "string"); return "symbol" == _typeof(i) ? i : i + ""; }
+function _toPrimitive(t, r) { if ("object" != _typeof(t) || !t) return t; var e = t[Symbol.toPrimitive]; if (void 0 !== e) { var i = e.call(t, r || "default"); if ("object" != _typeof(i)) return i; throw new TypeError("@@toPrimitive must return a primitive value."); } return ("string" === r ? String : Number)(t); }
+function _callSuper(t, o, e) { return o = _getPrototypeOf(o), _possibleConstructorReturn(t, _isNativeReflectConstruct() ? Reflect.construct(o, e || [], _getPrototypeOf(t).constructor) : o.apply(t, e)); }
+function _possibleConstructorReturn(t, e) { if (e && ("object" == _typeof(e) || "function" == typeof e)) return e; if (void 0 !== e) throw new TypeError("Derived constructors may only return object or undefined"); return _assertThisInitialized(t); }
+function _assertThisInitialized(e) { if (void 0 === e) throw new ReferenceError("this hasn't been initialised - super() hasn't been called"); return e; }
+function _isNativeReflectConstruct() { try { var t = !Boolean.prototype.valueOf.call(Reflect.construct(Boolean, [], function () {})); } catch (t) {} return (_isNativeReflectConstruct = function _isNativeReflectConstruct() { return !!t; })(); }
+function _getPrototypeOf(t) { return _getPrototypeOf = Object.setPrototypeOf ? Object.getPrototypeOf.bind() : function (t) { return t.__proto__ || Object.getPrototypeOf(t); }, _getPrototypeOf(t); }
+function _inherits(t, e) { if ("function" != typeof e && null !== e) throw new TypeError("Super expression must either be null or a function"); t.prototype = Object.create(e && e.prototype, { constructor: { value: t, writable: !0, configurable: !0 } }), Object.defineProperty(t, "prototype", { writable: !1 }), e && _setPrototypeOf(t, e); }
+function _setPrototypeOf(t, e) { return _setPrototypeOf = Object.setPrototypeOf ? Object.setPrototypeOf.bind() : function (t, e) { return t.__proto__ = e, t; }, _setPrototypeOf(t, e); }
+var code = 'SELECT * FROM ...';
+var CodeEditor = /*#__PURE__*/function (_React$Component) {
+  function CodeEditor(props) {
+    var _this;
+    _classCallCheck(this, CodeEditor);
+    _this = _callSuper(this, CodeEditor, [props]);
+    _this.state = {
+      code: props.code || code
+    };
+    return _this;
+  }
+  _inherits(CodeEditor, _React$Component);
+  return _createClass(CodeEditor, [{
+    key: "render",
+    value: function render() {
+      var _this2 = this;
+      return /*#__PURE__*/_react.default.createElement(_reactSimpleCodeEditor.default, {
+        value: this.state.code,
+        onValueChange: function onValueChange(code) {
+          return _this2.setState({
+            code: code
+          });
+        },
+        highlight: function highlight(code) {
+          return (0, _prismCore.highlight)(code, _prismCore.languages.sql);
+        },
+        padding: 10,
+        onBlur: this.props.onBlur,
+        style: {
+          fontFamily: '"Fira code", "Fira Mono", monospace',
+          fontSize: 12,
+          border: '1px black solid'
+        },
+        textareaId: "code-editor"
+      });
+    }
+  }]);
+}(_react.default.Component);
+var _default = exports.default = CodeEditor;

package/lib/components/code-editor/index.js

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

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

@@ -0,0 +1,81 @@
+"use strict";
+
+function _typeof(o) { "@babel/helpers - typeof"; return _typeof = "function" == typeof Symbol && "symbol" == typeof Symbol.iterator ? function (o) { return typeof o; } : function (o) { return o && "function" == typeof Symbol && o.constructor === Symbol && o !== Symbol.prototype ? "symbol" : typeof o; }, _typeof(o); }
+Object.defineProperty(exports, "__esModule", {
+  value: true
+});
+exports.default = void 0;
+require("./collapsable-box.scss");
+var _variables = _interopRequireDefault(require("../../styles/variables.scss"));
+var _reactCollapse = require("react-collapse");
+var _react = require("react");
+var _detailToggleIcon = _interopRequireDefault(require("../detail-toggle-icon"));
+function _interopRequireDefault(e) { return e && e.__esModule ? e : { default: e }; }
+function _classCallCheck(a, n) { if (!(a instanceof n)) throw new TypeError("Cannot call a class as a function"); }
+function _defineProperties(e, r) { for (var t = 0; t < r.length; t++) { var o = r[t]; o.enumerable = o.enumerable || !1, o.configurable = !0, "value" in o && (o.writable = !0), Object.defineProperty(e, _toPropertyKey(o.key), o); } }
+function _createClass(e, r, t) { return r && _defineProperties(e.prototype, r), t && _defineProperties(e, t), Object.defineProperty(e, "prototype", { writable: !1 }), e; }
+function _toPropertyKey(t) { var i = _toPrimitive(t, "string"); return "symbol" == _typeof(i) ? i : i + ""; }
+function _toPrimitive(t, r) { if ("object" != _typeof(t) || !t) return t; var e = t[Symbol.toPrimitive]; if (void 0 !== e) { var i = e.call(t, r || "default"); if ("object" != _typeof(i)) return i; throw new TypeError("@@toPrimitive must return a primitive value."); } return ("string" === r ? String : Number)(t); }
+function _callSuper(t, o, e) { return o = _getPrototypeOf(o), _possibleConstructorReturn(t, _isNativeReflectConstruct() ? Reflect.construct(o, e || [], _getPrototypeOf(t).constructor) : o.apply(t, e)); }
+function _possibleConstructorReturn(t, e) { if (e && ("object" == _typeof(e) || "function" == typeof e)) return e; if (void 0 !== e) throw new TypeError("Derived constructors may only return object or undefined"); return _assertThisInitialized(t); }
+function _assertThisInitialized(e) { if (void 0 === e) throw new ReferenceError("this hasn't been initialised - super() hasn't been called"); return e; }
+function _isNativeReflectConstruct() { try { var t = !Boolean.prototype.valueOf.call(Reflect.construct(Boolean, [], function () {})); } catch (t) {} return (_isNativeReflectConstruct = function _isNativeReflectConstruct() { return !!t; })(); }
+function _getPrototypeOf(t) { return _getPrototypeOf = Object.setPrototypeOf ? Object.getPrototypeOf.bind() : function (t) { return t.__proto__ || Object.getPrototypeOf(t); }, _getPrototypeOf(t); }
+function _inherits(t, e) { if ("function" != typeof e && null !== e) throw new TypeError("Super expression must either be null or a function"); t.prototype = Object.create(e && e.prototype, { constructor: { value: t, writable: !0, configurable: !0 } }), Object.defineProperty(t, "prototype", { writable: !1 }), e && _setPrototypeOf(t, e); }
+function _setPrototypeOf(t, e) { return _setPrototypeOf = Object.setPrototypeOf ? Object.setPrototypeOf.bind() : function (t, e) { return t.__proto__ = e, t; }, _setPrototypeOf(t, e); }
+var _default = exports.default = /*#__PURE__*/function (_Component) {
+  function _default(props) {
+    var _this;
+    _classCallCheck(this, _default);
+    _this = _callSuper(this, _default, [props]);
+    var isDesktop = window.matchMedia(_variables.default.aboveMaxBreak).matches;
+    _this.state = {
+      expanded: isDesktop || props.expanded
+    };
+    return _this;
+  }
+  _inherits(_default, _Component);
+  return _createClass(_default, [{
+    key: "toggleCollapsed",
+    value: function toggleCollapsed() {
+      this.setState({
+        expanded: !this.state.expanded
+      });
+    }
+  }, {
+    key: "headerOpenClass",
+    value: function headerOpenClass() {
+      return this.state.expanded ? 'open' : '';
+    }
+  }, {
+    key: "render",
+    value: function render() {
+      var _this2 = this;
+      return /*#__PURE__*/React.createElement("collapsable-box", null, /*#__PURE__*/React.createElement("div", {
+        "data-testid": this.props.testId,
+        className: "header-container ".concat(this.headerOpenClass()),
+        onClick: function onClick(e) {
+          _this2.toggleCollapsed();
+        },
+        onKeyDown: function onKeyDown(event) {
+          if (event.key === ' ' || event.key === 'Enter') {
+            event.preventDefault();
+            _this2.toggleCollapsed();
+          }
+        },
+        role: "button",
+        tabIndex: "0",
+        "aria-label": "".concat(this.props.title, " collapsable box"),
+        "aria-pressed": this.state.expanded
+      }, /*#__PURE__*/React.createElement("div", {
+        className: "header-text-items"
+      }, /*#__PURE__*/React.createElement("div", {
+        className: "title"
+      }, this.props.title), this.props.headerHtml), /*#__PURE__*/React.createElement(_detailToggleIcon.default, {
+        expanded: this.state.expanded
+      })), /*#__PURE__*/React.createElement(_reactCollapse.Collapse, {
+        isOpened: this.state.expanded
+      }, this.props.children));
+    }
+  }]);
+}(_react.Component);

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

@@ -0,0 +1,39 @@
+@import '../../styles/mixins.scss';
+@import '../../styles/variables.scss';
+
+collapsable-box {
+  @include custom-element();
+
+  border: 1px solid $light-grey;
+  width: 100%;
+  margin-top: 2.5rem;
+
+  .header-container {
+    display: flex;
+    justify-content: space-between;
+    cursor: pointer;
+  }
+
+  .header-container.open {
+    border-bottom: $light-grey solid 1px;
+  }
+
+  .header-container:hover {
+    background-color: $super-light-grey;
+  }
+
+  .header-text-items {
+    margin: 1rem;
+  }
+
+  .title {
+    @include header();
+    font-size: 1.4em;
+  }
+
+  .collapse-icon {
+    font-size: 30px;
+    color: $dark-grey;
+    margin: 10px 10px 0 0;
+  }
+}

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

@@ -0,0 +1,87 @@
+import { shallow } from 'enzyme'
+import CollapsableBox from './collapsable-box'
+
+describe('CollapsableBox ', () => {
+  test('desktop default to expanded', () => {
+    const matchMedia = jest.fn()
+    Object.defineProperty(window, 'matchMedia', {
+      writable: true,
+      value: jest.fn().mockImplementation(query => ({
+        matches: true
+      }))
+    })
+    const subject = shallow(
+      <CollapsableBox headerHtml='<div />'>
+        <div />
+      </CollapsableBox>
+    )
+    expect(subject.state('expanded')).toEqual(true)
+  })
+
+  test('mobile/table default to collapsed', () => {
+    const matchMedia = jest.fn()
+    Object.defineProperty(window, 'matchMedia', {
+      writable: true,
+      value: jest.fn().mockImplementation(query => ({
+        matches: false
+      }))
+    })
+    const subject = shallow(
+      <CollapsableBox headerHtml='<div />'>
+        <div />
+      </CollapsableBox>
+    )
+    expect(subject.state('expanded')).toEqual(undefined)
+  })
+
+  test('clicking the header changes the expanded state on mobile/tablet', () => {
+    const matchMedia = jest.fn()
+    Object.defineProperty(window, 'matchMedia', {
+      writable: true,
+      value: jest.fn().mockImplementation(query => ({
+        matches: false
+      }))
+    })
+    const subject = shallow(
+      <CollapsableBox headerHtml='<div />' expanded={false}>
+        <div />
+      </CollapsableBox>
+    )
+    subject.find('.header-container').simulate('click')
+    expect(subject.state('expanded')).toEqual(true)
+  })
+
+  test('clicking the header changes the expanded state on Desktop', () => {
+    const matchMedia = jest.fn()
+    Object.defineProperty(window, 'matchMedia', {
+      writable: true,
+      value: jest.fn().mockImplementation(query => ({
+        matches: true
+      }))
+    })
+    const subject = shallow(
+      <CollapsableBox headerHtml='<div />' expanded={false}>
+        <div />
+      </CollapsableBox>
+    )
+    subject.find('.header-container').simulate('click')
+    expect(subject.state('expanded')).toEqual(false)
+  })
+
+  test('clicking the header changes the expanded state on expanded', () => {
+    const matchMedia = jest.fn()
+    Object.defineProperty(window, 'matchMedia', {
+      writable: true,
+      value: jest.fn().mockImplementation(query => ({
+        matches: undefined
+      }))
+    })
+    const subject = shallow(
+      <CollapsableBox headerHtml='<div />' expanded>
+        <div />
+      </CollapsableBox>
+    )
+    subject.find('.header-container').simulate('click')
+    expect(subject.state('expanded')).toEqual(false)
+  })
+})

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

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

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

@@ -0,0 +1,63 @@
+"use strict";
+
+Object.defineProperty(exports, "__esModule", {
+  value: true
+});
+exports.default = void 0;
+require("./data-card.scss");
+var _reactRouterDom = require("react-router-dom");
+var _reactSanitizedHtml = _interopRequireDefault(require("react-sanitized-html"));
+var _reactImageFallback = _interopRequireDefault(require("react-image-fallback"));
+var _no_image = _interopRequireDefault(require("../../assets/no_image.png"));
+var _utils = require("../../utils/");
+var _loadingElement = _interopRequireDefault(require("../../components/generic-elements/loading-element"));
+function _interopRequireDefault(e) { return e && e.__esModule ? e : { default: e }; }
+var DataCard = function DataCard(props) {
+  var maxDescriptionLength = 240;
+  var fileTypes = function fileTypes(_fileTypes) {
+    return _fileTypes.map(function (fileType) {
+      return /*#__PURE__*/React.createElement("span", {
+        key: fileType,
+        className: "file-type"
+      }, fileType, ' ');
+    });
+  };
+  var dataset = props.dataset;
+  var truncatedDescription = truncateDescription(dataset.description, maxDescriptionLength);
+  return /*#__PURE__*/React.createElement("data-card", null, /*#__PURE__*/React.createElement("div", {
+    className: "logo"
+  }, /*#__PURE__*/React.createElement(_reactRouterDom.Link, {
+    to: "/dataset/".concat(dataset.organization_name, "/").concat(dataset.name)
+  }, /*#__PURE__*/React.createElement(_reactImageFallback.default, {
+    src: dataset.organization_image_url,
+    fallbackImage: _no_image.default,
+    initialImage: /*#__PURE__*/React.createElement(_loadingElement.default, null),
+    alt: "The logo for ".concat(dataset.organization_title)
+  }))), /*#__PURE__*/React.createElement("div", {
+    className: "details"
+  }, /*#__PURE__*/React.createElement(_reactRouterDom.Link, {
+    className: "title",
+    to: "/dataset/".concat(dataset.organization_name, "/").concat(dataset.name)
+  }, dataset.title), /*#__PURE__*/React.createElement("div", {
+    className: "description"
+  }, /*#__PURE__*/React.createElement(_reactSanitizedHtml.default, {
+    allowedTags: [],
+    allowedAttributes: {},
+    html: truncatedDescription
+  })), /*#__PURE__*/React.createElement("div", {
+    className: "card-metadata"
+  }, /*#__PURE__*/React.createElement("div", {
+    className: "last-modified"
+  }, dataset && _utils.ModifiedDateStringBuilder.createDateString(dataset)), /*#__PURE__*/React.createElement("div", {
+    className: "separator"
+  }, "\u2022"), /*#__PURE__*/React.createElement("div", {
+    className: "file-types"
+  }, "File Type: ", fileTypes(dataset.fileTypes), ' '))));
+};
+function truncateDescription(description, maxLength) {
+  if (description.length > maxLength) {
+    return "".concat(description.substring(0, maxLength), "...");
+  }
+  return description;
+}
+var _default = exports.default = DataCard;

package/lib/components/data-card/data-card.scss

@@ -0,0 +1,93 @@
+@import "../../styles/mixins.scss";
+@import "../../styles/variables.scss";
+$logo-width: 10rem;
+data-card {
+  @include custom-element();
+  width: 100%;
+  padding: 1.125rem 0;
+  margin-top: 0.125rem;
+  border-bottom: 1px solid $light-grey;
+  display: flex;
+
+  img {
+    width: $logo-width;
+  }
+
+  .details {
+    width: 100%;
+  }
+
+  .title {
+    @include link();
+    @include header();
+    margin-bottom: 0.5rem;
+    color:#00AEEF;
+    font-size:1.2em;
+  }
+
+  .description {
+    width: 80%;
+  }
+
+  .logo {
+    padding: 0px 30px;
+    width: $logo-width;
+    text-align: center;
+    min-width: $logo-width;
+  }
+
+  .card-metadata {
+    display: flex;
+    flex-direction: row;
+
+    div {
+      margin-top: 1.125rem;
+      margin-right: 0.5rem;
+    }
+
+    .separator {
+      margin-left: 0.25rem;
+      margin-right: 0.25rem;
+    }
+
+    .file-types {
+      margin-left: 0.5rem;
+    }
+
+    .file-type {
+      color: $csv-green;
+      font-weight: bold;
+      text-transform: uppercase;
+    }
+  }
+
+  @media only screen and (max-width: 600px) {
+    .title {
+      font-size:18px;
+      line-height:18px;
+      margin-bottom:4px;
+      color:#00aeef;
+    }
+    .description {
+      width: 100%;
+      line-height:1.4;
+      margin-top:4px;
+    }
+
+    .last-modified {
+      font-size:10px;
+      line-height: 1.4;;
+    }
+    .file-types{
+      font-size:11px;
+      line-height: 1.4;;
+    }
+  } 
+
+  loading-element {
+    margin: 0 auto;
+    padding: 0;
+    padding-top: 1rem;
+    width: 5rem;
+  }
+}