@urbanos/react-discovery-ui 2.1.43

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

@@ -0,0 +1,41 @@
+import Search from './search'
+import { shallow } from 'enzyme'
+
+const ENTER_KEY = 13
+
+describe('search', () => {
+  let searchCallback, subject
+
+  beforeEach(() => {
+    searchCallback = jest.fn()
+    subject = shallow(<Search callback={searchCallback} defaultText='some search' />)
+  })
+
+  it('does not invoke callback when any key is pressed other than enter', () => {
+    subject.find('.search-bar').simulate('keyup', { keyCode: 1 })
+
+    expect(searchCallback).not.toHaveBeenCalled()
+  })
+
+  it('invoke callback when user initiates search by pressing enter button', () => {
+    subject.find('.search-bar').simulate('keyup', { keyCode: ENTER_KEY })
+
+    expect(searchCallback).toHaveBeenCalledWith('some search')
+  })
+
+  it('show the clear button when there is text in the search input', () => {
+    expect(subject.find('.clear').hasClass('disabled')).toBeFalsy()
+  })
+
+  it('clear the text in the search box when the clear icon is clicked', () => {
+    subject.find('.clear-icon').simulate('click')
+
+    expect(subject.find('input').value).toBeFalsy()
+  })
+
+  it('hide the clear button when there is no text in the search input', () => {
+    subject = shallow(<Search callback={jest.fn()} />)
+
+    expect(subject.find('.clear').hasClass('disabled')).toBeTruthy()
+  })
+})

package/lib/components/generic-elements/select/index.js

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

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

@@ -0,0 +1,44 @@
+"use strict";
+
+Object.defineProperty(exports, "__esModule", {
+  value: true
+});
+exports.default = void 0;
+require("./select.scss");
+var _lodash = _interopRequireDefault(require("lodash"));
+function _interopRequireDefault(e) { return e && e.__esModule ? e : { default: e }; }
+var createOption = function createOption(option) {
+  return /*#__PURE__*/React.createElement("option", {
+    key: option.value,
+    value: option.value
+  }, option.label);
+};
+var _default = exports.default = function _default(_ref) {
+  var options = _ref.options,
+    label = _ref.label,
+    selectChangeCallback = _ref.selectChangeCallback,
+    className = _ref.className,
+    _ref$testId = _ref.testId,
+    testId = _ref$testId === void 0 ? '' : _ref$testId;
+  var defaultOption = _lodash.default.find(options, function (it) {
+    return it.default;
+  });
+  return /*#__PURE__*/React.createElement("select-element", {
+    class: className
+  }, /*#__PURE__*/React.createElement("label", {
+    className: "label",
+    htmlFor: "select-".concat(label)
+  }, label), /*#__PURE__*/React.createElement("select", {
+    "data-testid": testId,
+    value: defaultOption ? defaultOption.value : options[0].value,
+    className: "selector",
+    id: "select-".concat(label),
+    name: "select-".concat(label),
+    onChange: function onChange(event) {
+      return _onChange(event, selectChangeCallback);
+    }
+  }, options.map(createOption)));
+};
+var _onChange = function _onChange(event, selectChangeCallback) {
+  selectChangeCallback(event.target.value);
+};

package/lib/components/generic-elements/select/select.scss

@@ -0,0 +1,22 @@
+@import '../../../styles/mixins.scss';
+@import '../../../styles/variables.scss';
+
+select-element {
+  @include custom-element();
+  @include flex-row();
+
+  .selector {
+    height: 100%;
+    outline: 1px solid $medium-grey;
+    background-color: white;
+    border: 0;
+    text-align: left;
+    cursor: pointer;
+    flex-grow: 1;
+  }
+
+  .label {
+    padding-right: 0.5rem;
+    text-transform: uppercase;
+  }
+}

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

@@ -0,0 +1,34 @@
+import Select from './select'
+import { shallow } from 'enzyme'
+
+const sortOpts = [
+  { value: 'foo', label: 'Foo', default: true },
+  { value: 'bar', label: 'Bar' }
+]
+
+describe('Select', () => {
+  test('sets the value and text of the sort option', () => {
+    const subject = shallow(<Select options={sortOpts} />)
+
+    expect(subject.find('option').at(0).text()).toEqual('Foo')
+    expect(subject.find('option').at(1).props().value).toEqual('bar')
+    expect(subject.find('.selector').props().value).toEqual('foo')
+  })
+})
+
+describe('selecting an option', () => {
+  let subject, selectChangeCallback
+
+  beforeEach(() => {
+    selectChangeCallback = jest.fn()
+    subject = shallow(<Select options={sortOpts} selectChangeCallback={selectChangeCallback} />)
+  })
+
+  test('clicking a different option', () => {
+    const secondOpt = subject.find('select')
+
+    secondOpt.simulate('change', { target: { value: 'bar' } })
+
+    expect(selectChangeCallback).toHaveBeenCalledWith('bar')
+  })
+})

package/lib/components/generic-elements/share-link/index.js

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

package/lib/components/generic-elements/share-link/share-link.js

@@ -0,0 +1,23 @@
+"use strict";
+
+Object.defineProperty(exports, "__esModule", {
+  value: true
+});
+exports.default = void 0;
+require("./share-link.scss");
+var _reactCopyToClipboard = require("react-copy-to-clipboard");
+var _FilterNone = _interopRequireDefault(require("@material-ui/icons/FilterNone"));
+var _reactRouterDom = require("react-router-dom");
+function _interopRequireDefault(e) { return e && e.__esModule ? e : { default: e }; }
+var ShareLink = function ShareLink(_ref) {
+  var linkUrl = _ref.linkUrl;
+  var absoluteURL = "".concat(window.location.origin).concat(linkUrl);
+  return /*#__PURE__*/React.createElement("share-link", null, /*#__PURE__*/React.createElement(_reactRouterDom.Link, {
+    to: linkUrl
+  }, absoluteURL), /*#__PURE__*/React.createElement(_reactCopyToClipboard.CopyToClipboard, {
+    text: absoluteURL
+  }, /*#__PURE__*/React.createElement(_FilterNone.default, {
+    className: "filter-icon"
+  })));
+};
+var _default = exports.default = ShareLink;

package/lib/components/generic-elements/share-link/share-link.scss

@@ -0,0 +1,17 @@
+@import '../../../styles/mixins.scss';
+@import '../../../styles/variables.scss';
+
+share-link {
+    display: flex;
+    align-items: center;
+
+    .filter-icon {
+        color: $light-blue;
+        margin-left: 1rem;
+        cursor: pointer;
+    }
+
+    a {
+        @include sub-link();
+    }
+}

package/lib/components/generic-elements/share-link/share-link.test.js

@@ -0,0 +1,28 @@
+import { shallow } from 'enzyme'
+
+import ShareLink from '.'
+import { CopyToClipboard } from 'react-copy-to-clipboard'
+import { Link } from 'react-router-dom'
+
+describe('share-link', () => {
+  const linkUrl = '/path/to/thing'
+  const windowOrigin = 'http://origin'
+  let subject
+
+  beforeEach(() => {
+    setOrigin(windowOrigin)
+    subject = shallow(<ShareLink linkUrl={linkUrl} />)
+  })
+
+  it('has a link to a relative path', () => {
+    expect(subject.find(Link).props().to).toBe(linkUrl)
+  })
+
+  it('allows copying an absolute link to the clipboard', () => {
+    expect(subject.find(CopyToClipboard).props().text).toBe(`${windowOrigin}${linkUrl}`)
+  })
+})
+
+const setOrigin = origin => {
+  Object.defineProperty(window, 'location', { value: { origin } })
+}

package/lib/components/generic-elements/sql-icon/index.js

@@ -0,0 +1,20 @@
+"use strict";
+
+Object.defineProperty(exports, "__esModule", {
+  value: true
+});
+exports.default = void 0;
+var _reactSvgInline = _interopRequireDefault(require("react-svg-inline"));
+function _interopRequireDefault(e) { return e && e.__esModule ? e : { default: e }; }
+var sqlSVG = "<svg version=\"1.1\" id=\"sqlSVG-Capa_1\" xmlns=\"http://www.w3.org/2000/svg\" x=\"0\" y=\"0\" viewBox=\"0 0 58.201 58.201\" xml:space=\"preserve\"><path d=\"M31.707 33.07a81.522 81.522 0 01-5.22 0c-7.341-.201-13.191-1.238-17.403-2.717C7.104 29.685 5.409 28.899 4.1 28v9.4c2.846 2.971 12.394 5.711 25 5.711s22.154-2.74 25-5.711V28c-1.318.905-3.028 1.697-5.025 2.367-4.21 1.472-10.048 2.503-17.368 2.703z\"/><path d=\"M4.1 14.889v9.4c2.638 2.754 11.033 5.31 22.286 5.668.115.004.233.005.349.008.326.009.651.018.982.023a79.019 79.019 0 002.766.001c.33-.005.656-.014.982-.023l.349-.008c11.253-.359 19.648-2.915 22.286-5.668v-9.401C49.233 18.232 38.944 20 29.1 20s-20.132-1.768-25-5.111zM53.965 8.542C52.843 4.241 44.215 0 29.1 0 14.023 0 5.404 4.22 4.247 8.51A.97.97 0 004.1 9v2.306C6.937 14.267 16.417 17 29.1 17s22.164-2.733 25-5.694V9a.92.92 0 00-.135-.458zM4.1 41v8.201a.94.94 0 00.117.451c1.181 4.895 11.747 8.549 24.883 8.549 13.106 0 23.655-3.639 24.875-8.516a.993.993 0 00.125-.484v-8.199c-4.135 2.911-12.655 5.199-25 5.199-12.346 0-20.866-2.29-25-5.201z\"/></svg>";
+var _default = exports.default = function _default(_ref) {
+  var className = _ref.className;
+  return /*#__PURE__*/React.createElement("span", {
+    className: className
+  }, /*#__PURE__*/React.createElement(_reactSvgInline.default, {
+    svg: sqlSVG,
+    height: "14px",
+    width: "14px",
+    accessibilityDesc: "Sql Icon"
+  }));
+};

package/lib/components/generic-elements/tab-button/index.js

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

package/lib/components/generic-elements/tab-button/tab-button.js

@@ -0,0 +1,25 @@
+"use strict";
+
+Object.defineProperty(exports, "__esModule", {
+  value: true
+});
+exports.default = void 0;
+var _react = _interopRequireDefault(require("react"));
+require("./tab-button.scss");
+var _excluded = ["children", "className"];
+function _interopRequireDefault(e) { return e && e.__esModule ? e : { default: e }; }
+function _extends() { return _extends = Object.assign ? Object.assign.bind() : function (n) { for (var e = 1; e < arguments.length; e++) { var t = arguments[e]; for (var r in t) ({}).hasOwnProperty.call(t, r) && (n[r] = t[r]); } return n; }, _extends.apply(null, arguments); }
+function _objectWithoutProperties(e, t) { if (null == e) return {}; var o, r, i = _objectWithoutPropertiesLoose(e, t); if (Object.getOwnPropertySymbols) { var n = Object.getOwnPropertySymbols(e); for (r = 0; r < n.length; r++) o = n[r], -1 === t.indexOf(o) && {}.propertyIsEnumerable.call(e, o) && (i[o] = e[o]); } return i; }
+function _objectWithoutPropertiesLoose(r, e) { if (null == r) return {}; var t = {}; for (var n in r) if ({}.hasOwnProperty.call(r, n)) { if (-1 !== e.indexOf(n)) continue; t[n] = r[n]; } return t; }
+var TabButton = /*#__PURE__*/_react.default.forwardRef(function (_ref, ref) {
+  var children = _ref.children,
+    _ref$className = _ref.className,
+    className = _ref$className === void 0 ? '' : _ref$className,
+    props = _objectWithoutProperties(_ref, _excluded);
+  return /*#__PURE__*/_react.default.createElement("button", _extends({
+    ref: ref,
+    className: "tab-button ".concat(className),
+    role: "button"
+  }, props), children);
+});
+var _default = exports.default = TabButton;

package/lib/components/generic-elements/tab-button/tab-button.scss

@@ -0,0 +1,27 @@
+@import '../../../styles/variables.scss';
+@import '../../../styles/mixins.scss';
+
+.tab-button {
+  border: 0;
+  position: relative;
+  list-style: initial;
+  cursor: pointer;
+  color: $dark-grey;
+  background-color: transparent;
+  fill: currentColor;
+
+  &:hover {
+    color: $almost-black;
+  }
+
+  &:focus {
+    color: $almost-black;
+  }
+
+  &:disabled,
+  &:disabled:hover,
+  &:disabled:focus {
+    cursor: default;
+    color: $dark-grey;
+  }
+}

package/lib/components/generic-elements/visualize-button/index.js

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

package/lib/components/generic-elements/visualize-button/visualize-button.js

@@ -0,0 +1,37 @@
+"use strict";
+
+Object.defineProperty(exports, "__esModule", {
+  value: true
+});
+exports.default = void 0;
+require("./visualize-button.scss");
+var _reactSvgInline = _interopRequireDefault(require("react-svg-inline"));
+var _routes = _interopRequireDefault(require("../../../routes"));
+var _generatedLink = require("../generated-link");
+function _interopRequireDefault(e) { return e && e.__esModule ? e : { default: e }; }
+var chart = "<svg id=\"chart-Layer_1\" data-name=\"Layer 1\" xmlns=\"http://www.w3.org/2000/svg\" viewBox=\"0 0 65.5 28\"><path d=\"M0 17.5h13V28H0zM17.5 0h13v28h-13zM35 12.5h13V28H35zM52.5 5h13v23h-13z\"/></svg>";
+var _default = exports.default = function _default(_ref) {
+  var organizationName = _ref.organizationName,
+    datasetName = _ref.datasetName,
+    systemName = _ref.systemName;
+  return /*#__PURE__*/React.createElement(_generatedLink.GeneratedLink, {
+    path: _routes.default.datasetView,
+    params: {
+      organizationName: organizationName,
+      datasetName: datasetName
+    },
+    queryStringParams: {
+      systemName: systemName,
+      selectedIndex: 1
+    }
+  }, /*#__PURE__*/React.createElement("div", {
+    className: "visualize-button"
+  }, "Visualize", /*#__PURE__*/React.createElement(_reactSvgInline.default, {
+    style: {
+      marginLeft: '.3rem'
+    },
+    svg: chart,
+    height: "inherit",
+    accessibilityDesc: "Chart"
+  })));
+};

package/lib/components/generic-elements/visualize-button/visualize-button.scss

@@ -0,0 +1,14 @@
+@import '../../../styles/variables.scss';
+@import '../../../styles/mixins.scss';
+
+.visualize-button {
+  @include button();
+  display: inline-block;
+  padding: 1.0rem;
+  width: auto;
+  background-color: $light-blue;
+  color: white;
+  letter-spacing: 0.05rem;
+  margin: 1rem 0rem 1rem 1rem;
+  align-self: flex-end;
+}

package/lib/components/login-zone/connector.js

@@ -0,0 +1,25 @@
+"use strict";
+
+Object.defineProperty(exports, "__esModule", {
+  value: true
+});
+exports.default = void 0;
+var _reactRedux = require("react-redux");
+var _loginZone = _interopRequireDefault(require("./login-zone"));
+var _selectors = require("../../store/selectors");
+var _actions = require("../../store/actions");
+var _reactRouterDom = require("react-router-dom");
+function _interopRequireDefault(e) { return e && e.__esModule ? e : { default: e }; }
+var mapStateToProps = function mapStateToProps(state) {
+  return {
+    lastAttemptFailed: (0, _selectors.lastLogoutAttemptFailed)(state)
+  };
+};
+var mapDispatchToProps = function mapDispatchToProps(dispatch) {
+  return {
+    logout: function logout(credentials) {
+      return dispatch((0, _actions.logout)(credentials));
+    }
+  };
+};
+var _default = exports.default = (0, _reactRouterDom.withRouter)((0, _reactRedux.connect)(mapStateToProps, mapDispatchToProps)(_loginZone.default));

package/lib/components/login-zone/index.js

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

package/lib/components/login-zone/login-svgs-and-text.js

@@ -0,0 +1,39 @@
+"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 = require("react");
+var _Person = _interopRequireDefault(require("@material-ui/icons/Person"));
+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) {
+    _classCallCheck(this, _default);
+    return _callSuper(this, _default, [props]);
+  }
+  _inherits(_default, _Component);
+  return _createClass(_default, [{
+    key: "render",
+    value: function render() {
+      return /*#__PURE__*/React.createElement("login-svgs-and-text", null, /*#__PURE__*/React.createElement(_Person.default, {
+        className: "user-icon"
+      }), /*#__PURE__*/React.createElement("span", null, this.props.text), /*#__PURE__*/React.createElement("span", {
+        className: "arrow"
+      }, this.props.symbol));
+    }
+  }]);
+}(_react.Component);

package/lib/components/login-zone/login-zone.js

@@ -0,0 +1,21 @@
+"use strict";
+
+Object.defineProperty(exports, "__esModule", {
+  value: true
+});
+exports.default = void 0;
+require("./login-zone.scss");
+var _login = _interopRequireDefault(require("./login"));
+var _logout = _interopRequireDefault(require("./logout"));
+function _interopRequireDefault(e) { return e && e.__esModule ? e : { default: e }; }
+var LoginZone = function LoginZone(props) {
+  var logout = function logout() {
+    return props.logout({
+      history: props.history
+    });
+  };
+  return /*#__PURE__*/React.createElement("login-zone", null, props.token ? /*#__PURE__*/React.createElement(_logout.default, {
+    logout: logout
+  }) : /*#__PURE__*/React.createElement(_login.default, null));
+};
+var _default = exports.default = LoginZone;

package/lib/components/login-zone/login-zone.scss

@@ -0,0 +1,115 @@
+@import '../../styles/variables.scss';
+@import '../../styles/mixins.scss';
+
+login-zone {
+
+  div.user-menu {
+    background-color: $light-blue;
+    color: white;
+    fill: white;
+    font-weight: bold;
+    padding: 0.25rem 0;
+    position: absolute;
+    z-index: 10000;
+    box-shadow: 2px 2px 5px grey;
+    width: 15rem;
+
+    li {
+      min-height: 30px;
+      list-style-type: none;
+      cursor: pointer;
+      display: flex;
+      align-items: center;
+
+      &:hover {
+        text-decoration: underline;
+      }
+
+      a {
+        text-decoration: none;
+        color: inherit;
+      }
+    }
+
+    .menu-text {
+      margin-left: 0.5rem;
+    }
+  }
+
+  login-svgs-and-text {
+    display: flex;
+    align-items: center;
+    padding: 0.25rem 1rem;
+  }
+
+  p {
+    margin: 0.5rem 0;
+  }
+
+  h3 {
+    @include header-small();
+    margin: 0;
+  }
+
+  .user-icon {
+    vertical-align: top;
+  }
+
+  .user-icon-svg {
+    height: 1.4rem;
+    width: 1.4rem;
+    fill: white;
+  }
+
+  .arrow {
+    margin-left: 0.5rem;
+  }
+
+  button.action {
+    background-color: $light-blue;
+    color: white;
+  }
+
+  button.clickable {
+    &:hover {
+      background-color: $almost-black;
+    }
+
+    &:active {
+      background-color: $medium-grey;
+    }
+  }
+
+  button.status {
+    background-color: transparent;
+    color: $light-blue;
+
+    &:hover {
+      background-color: $light-blue;
+      color: white;
+    }
+
+    &:focus {
+      background-color: $light-grey;
+    }
+  }
+
+  .logintext {
+    display: block;
+    margin-left: 4px;
+  }
+
+  button {
+    border: none;
+    cursor: pointer;
+    font-weight: bold;
+    text-align: left;
+    padding: 1px 0px 2px;
+    outline: none;
+  }
+
+  loading-element {
+    width: 2rem;
+    margin: auto;
+  }
+}

package/lib/components/login-zone/login-zone.test.js

@@ -0,0 +1,17 @@
+import { render } from 'enzyme'
+import LoginZone from './login-zone'
+import { BrowserRouter } from 'react-router-dom'
+
+describe('LoginZone ', () => {
+  test('Should Render logout when token is present', () => {
+    const subject = render(<LoginZone token='blah' logout={jest.fn()} />)
+    expect(subject.find('logout-component').length).toEqual(1)
+    expect(subject.length).toEqual(1)
+  })
+
+  test('Should Render login when token is not present', () => {
+    const subject = render(<BrowserRouter><LoginZone logout={jest.fn()} /></BrowserRouter>)
+    expect(subject.find('login-component').length).toEqual(1)
+    expect(subject.length).toEqual(1)
+  })
+})