dibk-design 0.3.24

package/dist/components/InputField.md

@@ -0,0 +1,36 @@
+Input field example:
+
+```js
+<InputField id="textInput1" onChange={()=>{console.log('onchange')}} mandatory={true}  />
+<InputField id="textInput2" onChange={()=>{console.log('onchange')}} value="InputField with value" />
+<InputField id="textInput3" onChange={()=>{console.log('onchange')}} value="InputField with label and value" label="InputField with label and value" />
+<InputField id="textInput4" onChange={()=>{console.log('onchange')}} value="InputField with link in label" label={['InputField with ', <a key="labelLink" href="#">link</a>, ' in label']} />
+<InputField id="textInput5" onChange={()=>{console.log('onchange')}} value="InputField with label, value, errors and error message" label="InputField with label, value, errors and error message" hasErrors={true} errorMessage="Wrong value" />
+
+<InputField id="textInput6" onChange={()=>{console.log('onchange')}} readOnly value="Read only InputField with label and value" label="Read only InputField with label and value" />
+<InputField id="textInput7" onChange={()=>{console.log('onchange')}} disabled value="Disabled InputField with label and value" label="Disabled InputField with label and value" />
+<InputField id="numberInput1" onChange={()=>{console.log('onchange')}} value="3" label="Number InputField with label and value" type="number" />
+<InputField id="textInput7" onChange={()=>{console.log('onchange')}} value="Value for inputField" label="InputField with label, value and contentOnly set to true" contentOnly={true} />
+<InputField id="textInput8" onChange={() => {console.log('onChange')}} label="InputField without value, contentOnly set to true and defaultContent" contentOnly={true} defaultContent="Please insert a value" />
+<InputField id="fileInput1" onChange={()=>{console.log('onchange')}} type="file" label="InputField with label, value and type set to file" />
+<InputField id="fileInput1" onChange={()=>{console.log('onchange')}} type="file" label="InputField with label, value, fileName, buttonContent and type set to file" selectedFileName="file.txt" buttonContent="Legg til fil" />
+<InputField id="dateInput1" onChange={(date) => console.log("date", date)} type="date" label="Datepicker without value" value="" />
+<InputField id="dateInput2" onChange={(date) => console.log("date", date)} type="date" label="Datepicker with value" value="2020-05-10T13:12:04" />
+<InputField id="dateInput3" onChange={(date) => console.log("date", date)} type="date" label="Datepicker with value, errors and error message" value="2020-05-10T13:12:04" hasErrors={true} errorMessage="Wrong date value" />
+<InputField id="dateInput4" onChange={(date) => console.log("date", date)} type="date" label="Datepicker with value and contentOnly set to true" value="2020-05-10T13:12:04" contentOnly={true} />
+<InputField id="dateInput5" onChange={(date) => console.log("date", date)} type="date" label="Datepicker with value for start date" value="2020-05-10T13:12:04" selectsStart startDate="2020-05-10T13:12:04" endDate="2020-05-19T13:12:04" />
+<InputField id="dateInput6" onChange={(date) => console.log("date", date)} type="date" label="Datepicker with value for end date" value="2020-05-19T13:12:04" selectsEnd startDate="2020-05-10T13:12:04" endDate="2020-05-19T13:12:04" />
+<InputField id="dateInput7" onChange={(date) => console.log("date", date)} type="date" label="Datepicker with defaultContent and contentOnly set to true" contentOnly={true} defaultContent="Please insert a value" />
+```
+
+Themed Input field example:
+
+```js
+import customTheme from 'data/customTheme';
+<React.Fragment>
+    <InputField id="themedTextInput4" onChange={()=>{console.log('onchange')}} value="InputField with link in label" label={['InputField with ', <a key="labelLink" href="#">link</a>, ' in label']} theme={customTheme} />
+    <InputField id="themedTextInput5" onChange={()=>{console.log('onchange')}} value="InputField with label, value, errors and error message" label="InputField with label, value, errors and error message" hasErrors={true} errorMessage="Wrong value" theme={customTheme} />
+    <InputField id="themedFileInput1" onChange={()=>{console.log('onchange')}} type="file" label="InputField with label, value, fileName, buttonContent and type set to file" selectedFileName="file.txt" buttonContent="Legg til fil" theme={customTheme} />
+    <InputField id="themedDateInput3" onChange={(date) => console.log("date", date)} type="date" label="Datepicker with value, errors and error message" value="2020-05-10T13:12:04" hasErrors={true} errorMessage="Wrong date value" theme={customTheme} />
+</React.Fragment>
+```

package/dist/components/InputField.module.scss

@@ -0,0 +1,91 @@
+@import "../style/global.scss";
+
+:local(.inputField) {
+  > div {
+    display: block;
+  }
+  label {
+    cursor: pointer;
+    font-size: 18px;
+    margin: 0 0 4px;
+    font-family: "Open Sans", arial, sans-serif;
+    line-height: 1.3;
+    font-weight: bold;
+    font-style: normal;
+    display: block;
+  }
+
+  input,
+  &:local(.file) :local(span.input) {
+    @include appearance(none);
+    @include transition(border-color 0.15s linear, background 0.15s linear);
+    @include border-radius(0);
+    @include box-shadow(none);
+    height: 46px;
+    width: 100%;
+    display: block;
+    padding: 10px;
+    margin-bottom: 0;
+    font-weight: 300;
+    background-color: #fff;
+    box-shadow: none;
+    color: rgba(0, 0, 0, 0.75);
+    font-family: inherit;
+    font-size: 1.125rem;
+    box-sizing: border-box;
+    min-width: 40%;
+    border: 1px solid #afaba8;
+
+    &:hover {
+      border-color: $color-dark-blue;
+    }
+
+    &:focus {
+      border-color: $color-dark-blue;
+      outline-color: #54acb8;
+    }
+
+    &[disabled],
+    &[readonly] {
+      background-color: #ddd;
+      cursor: default;
+    }
+
+    &:local(.hasErrors) {
+      border-color: $color-warning;
+      @include box-shadow(0 0 3px $color-warning);
+      &:focus {
+        border-color: $color-warning-hover;
+        outline-color: #b8565d;
+      }
+      &[disabled],
+      &[readonly] {
+        background-color: #ddd;
+        cursor: default;
+        border-color: #afaba8;
+      }
+    }
+  }
+  &:local(.file) {
+    label {
+      :local(.fileInputContainer) {
+        display: flex;
+        align-items: center;
+      }
+    }
+    input {
+      display: none;
+    }
+    :local(span.input) {
+      flex: 1;
+    }
+    button {
+      margin: 0 8px;
+    }
+  }
+  :local(.errorMessage) {
+    color: $color-warning;
+    font-weight: 300;
+    font-style: italic;
+  }
+}

package/dist/components/List.js

@@ -0,0 +1,106 @@
+"use strict";
+
+function _typeof(obj) { "@babel/helpers - typeof"; if (typeof Symbol === "function" && typeof Symbol.iterator === "symbol") { _typeof = function _typeof(obj) { return typeof obj; }; } else { _typeof = function _typeof(obj) { return obj && typeof Symbol === "function" && obj.constructor === Symbol && obj !== Symbol.prototype ? "symbol" : typeof obj; }; } return _typeof(obj); }
+
+Object.defineProperty(exports, "__esModule", {
+  value: true
+});
+exports.default = void 0;
+
+var _react = _interopRequireDefault(require("react"));
+
+var _propTypes = _interopRequireDefault(require("prop-types"));
+
+var _ListModule = _interopRequireDefault(require("./List.module.scss"));
+
+function _interopRequireDefault(obj) { return obj && obj.__esModule ? obj : { default: obj }; }
+
+function _classCallCheck(instance, Constructor) { if (!(instance instanceof Constructor)) { throw new TypeError("Cannot call a class as a function"); } }
+
+function _defineProperties(target, props) { for (var i = 0; i < props.length; i++) { var descriptor = props[i]; descriptor.enumerable = descriptor.enumerable || false; descriptor.configurable = true; if ("value" in descriptor) descriptor.writable = true; Object.defineProperty(target, descriptor.key, descriptor); } }
+
+function _createClass(Constructor, protoProps, staticProps) { if (protoProps) _defineProperties(Constructor.prototype, protoProps); if (staticProps) _defineProperties(Constructor, staticProps); return Constructor; }
+
+function _inherits(subClass, superClass) { if (typeof superClass !== "function" && superClass !== null) { throw new TypeError("Super expression must either be null or a function"); } subClass.prototype = Object.create(superClass && superClass.prototype, { constructor: { value: subClass, writable: true, configurable: true } }); if (superClass) _setPrototypeOf(subClass, superClass); }
+
+function _setPrototypeOf(o, p) { _setPrototypeOf = Object.setPrototypeOf || function _setPrototypeOf(o, p) { o.__proto__ = p; return o; }; return _setPrototypeOf(o, p); }
+
+function _createSuper(Derived) { var hasNativeReflectConstruct = _isNativeReflectConstruct(); return function _createSuperInternal() { var Super = _getPrototypeOf(Derived), result; if (hasNativeReflectConstruct) { var NewTarget = _getPrototypeOf(this).constructor; result = Reflect.construct(Super, arguments, NewTarget); } else { result = Super.apply(this, arguments); } return _possibleConstructorReturn(this, result); }; }
+
+function _possibleConstructorReturn(self, call) { if (call && (_typeof(call) === "object" || typeof call === "function")) { return call; } else if (call !== void 0) { throw new TypeError("Derived constructors may only return object or undefined"); } return _assertThisInitialized(self); }
+
+function _assertThisInitialized(self) { if (self === void 0) { throw new ReferenceError("this hasn't been initialised - super() hasn't been called"); } return self; }
+
+function _isNativeReflectConstruct() { if (typeof Reflect === "undefined" || !Reflect.construct) return false; if (Reflect.construct.sham) return false; if (typeof Proxy === "function") return true; try { Boolean.prototype.valueOf.call(Reflect.construct(Boolean, [], function () {})); return true; } catch (e) { return false; } }
+
+function _getPrototypeOf(o) { _getPrototypeOf = Object.setPrototypeOf ? Object.getPrototypeOf : function _getPrototypeOf(o) { return o.__proto__ || Object.getPrototypeOf(o); }; return _getPrototypeOf(o); }
+
+var ListItem = /*#__PURE__*/function (_React$Component) {
+  _inherits(ListItem, _React$Component);
+
+  var _super = _createSuper(ListItem);
+
+  function ListItem() {
+    _classCallCheck(this, ListItem);
+
+    return _super.apply(this, arguments);
+  }
+
+  _createClass(ListItem, [{
+    key: "render",
+    value: function render() {
+      return /*#__PURE__*/_react.default.createElement("li", null, this.props.listItem);
+    }
+  }]);
+
+  return ListItem;
+}(_react.default.Component);
+
+var List = /*#__PURE__*/function (_React$Component2) {
+  _inherits(List, _React$Component2);
+
+  var _super2 = _createSuper(List);
+
+  function List() {
+    _classCallCheck(this, List);
+
+    return _super2.apply(this, arguments);
+  }
+
+  _createClass(List, [{
+    key: "renderList",
+    value: function renderList() {
+      var listItems = this.props.listItems.map(function (listItem, i) {
+        return /*#__PURE__*/_react.default.createElement(ListItem, {
+          listItem: listItem,
+          key: i
+        });
+      });
+      var listType = this.props.ordered ? 'ol' : 'ul';
+
+      var listElement = /*#__PURE__*/_react.default.createElement(listType, {
+        className: _ListModule.default.list
+      }, listItems);
+
+      return listElement;
+    }
+  }, {
+    key: "render",
+    value: function render() {
+      return /*#__PURE__*/_react.default.createElement("div", null, this.renderList());
+    }
+  }]);
+
+  return List;
+}(_react.default.Component);
+
+List.propTypes = {
+  listItems: _propTypes.default.arrayOf(_propTypes.default.string).isRequired,
+  ordered: _propTypes.default.bool
+};
+List.defaultProps = {
+  listItems: [],
+  ordered: false
+};
+var _default = List;
+exports.default = _default;

package/dist/components/List.md

@@ -0,0 +1,10 @@
+Unordered List example:
+
+```js
+<List listItems={['item 1', 'item 2', 'item 3']} />
+```
+
+Ordered List example:
+```js
+<List listItems={['item 1', 'item 2', 'item 3']} ordered={true} />
+```

package/dist/components/List.module.scss

@@ -0,0 +1,19 @@
+:local(.list) {
+	margin: 0;
+	margin-left: 20px;
+	padding: 0;
+	margin-bottom: 20px;
+	list-style-position: outside;
+	font-size: 16px;
+	li {
+		line-height: 1.6;
+	}
+}
+
+:local(ul.list) {
+	list-style: disc;
+}
+
+:local(ol.list) {
+	list-style: decimal;
+}

package/dist/components/LoadingAnimation.js

@@ -0,0 +1,74 @@
+"use strict";
+
+function _typeof(obj) { "@babel/helpers - typeof"; if (typeof Symbol === "function" && typeof Symbol.iterator === "symbol") { _typeof = function _typeof(obj) { return typeof obj; }; } else { _typeof = function _typeof(obj) { return obj && typeof Symbol === "function" && obj.constructor === Symbol && obj !== Symbol.prototype ? "symbol" : typeof obj; }; } return _typeof(obj); }
+
+Object.defineProperty(exports, "__esModule", {
+  value: true
+});
+exports.default = void 0;
+
+var _react = _interopRequireDefault(require("react"));
+
+var _propTypes = _interopRequireDefault(require("prop-types"));
+
+var _LoadingAnimationModule = _interopRequireDefault(require("./LoadingAnimation.module.scss"));
+
+function _interopRequireDefault(obj) { return obj && obj.__esModule ? obj : { default: obj }; }
+
+function _classCallCheck(instance, Constructor) { if (!(instance instanceof Constructor)) { throw new TypeError("Cannot call a class as a function"); } }
+
+function _defineProperties(target, props) { for (var i = 0; i < props.length; i++) { var descriptor = props[i]; descriptor.enumerable = descriptor.enumerable || false; descriptor.configurable = true; if ("value" in descriptor) descriptor.writable = true; Object.defineProperty(target, descriptor.key, descriptor); } }
+
+function _createClass(Constructor, protoProps, staticProps) { if (protoProps) _defineProperties(Constructor.prototype, protoProps); if (staticProps) _defineProperties(Constructor, staticProps); return Constructor; }
+
+function _inherits(subClass, superClass) { if (typeof superClass !== "function" && superClass !== null) { throw new TypeError("Super expression must either be null or a function"); } subClass.prototype = Object.create(superClass && superClass.prototype, { constructor: { value: subClass, writable: true, configurable: true } }); if (superClass) _setPrototypeOf(subClass, superClass); }
+
+function _setPrototypeOf(o, p) { _setPrototypeOf = Object.setPrototypeOf || function _setPrototypeOf(o, p) { o.__proto__ = p; return o; }; return _setPrototypeOf(o, p); }
+
+function _createSuper(Derived) { var hasNativeReflectConstruct = _isNativeReflectConstruct(); return function _createSuperInternal() { var Super = _getPrototypeOf(Derived), result; if (hasNativeReflectConstruct) { var NewTarget = _getPrototypeOf(this).constructor; result = Reflect.construct(Super, arguments, NewTarget); } else { result = Super.apply(this, arguments); } return _possibleConstructorReturn(this, result); }; }
+
+function _possibleConstructorReturn(self, call) { if (call && (_typeof(call) === "object" || typeof call === "function")) { return call; } else if (call !== void 0) { throw new TypeError("Derived constructors may only return object or undefined"); } return _assertThisInitialized(self); }
+
+function _assertThisInitialized(self) { if (self === void 0) { throw new ReferenceError("this hasn't been initialised - super() hasn't been called"); } return self; }
+
+function _isNativeReflectConstruct() { if (typeof Reflect === "undefined" || !Reflect.construct) return false; if (Reflect.construct.sham) return false; if (typeof Proxy === "function") return true; try { Boolean.prototype.valueOf.call(Reflect.construct(Boolean, [], function () {})); return true; } catch (e) { return false; } }
+
+function _getPrototypeOf(o) { _getPrototypeOf = Object.setPrototypeOf ? Object.getPrototypeOf : function _getPrototypeOf(o) { return o.__proto__ || Object.getPrototypeOf(o); }; return _getPrototypeOf(o); }
+
+var LoadingAnimation = /*#__PURE__*/function (_React$Component) {
+  _inherits(LoadingAnimation, _React$Component);
+
+  var _super = _createSuper(LoadingAnimation);
+
+  function LoadingAnimation() {
+    _classCallCheck(this, LoadingAnimation);
+
+    return _super.apply(this, arguments);
+  }
+
+  _createClass(LoadingAnimation, [{
+    key: "render",
+    value: function render() {
+      return /*#__PURE__*/_react.default.createElement("div", {
+        className: this.props.fixed ? _LoadingAnimationModule.default.loadingAnimation + ' ' + _LoadingAnimationModule.default.fixed : _LoadingAnimationModule.default.loadingAnimation
+      }, this.props.message);
+    }
+  }]);
+
+  return LoadingAnimation;
+}(_react.default.Component);
+
+LoadingAnimation.propTypes = {
+  fixed: _propTypes.default.bool,
+  active: _propTypes.default.bool,
+
+  /** Text content inside button */
+  message: _propTypes.default.string
+};
+LoadingAnimation.defaultProps = {
+  fixed: false,
+  active: true,
+  message: ''
+};
+var _default = LoadingAnimation;
+exports.default = _default;

package/dist/components/LoadingAnimation.md

@@ -0,0 +1,5 @@
+ LoadingAnimation example:
+
+```js
+<LoadingAnimation message="Loading..." />
+```

package/dist/components/LoadingAnimation.module.scss

@@ -0,0 +1,26 @@
+@import "../style/global.scss";
+
+:local(.loadingAnimation){
+	@include box-shadow(0 8px 17px 0 rgba(0,0,0,.2));
+	z-index: 6;
+	background-repeat: no-repeat;
+	background-position: 50% 15px;
+	background-color: #fff;
+	height: auto;
+	width: 200px;
+	border: 1px solid #ddd;
+	padding: 15px;
+	color: #666;
+	display: block;
+	text-align: center;
+	&:local(.fixed) {
+		@include calc(left, '50% - 100px');
+		top: 40%;
+		margin: auto;
+		position: fixed;
+	}
+	&:before {
+		content: url(../images/spinner.svg);
+		display: block;		
+	}
+}

package/dist/components/NavigationBar.js

@@ -0,0 +1,229 @@
+"use strict";
+
+function _typeof(obj) { "@babel/helpers - typeof"; if (typeof Symbol === "function" && typeof Symbol.iterator === "symbol") { _typeof = function _typeof(obj) { return typeof obj; }; } else { _typeof = function _typeof(obj) { return obj && typeof Symbol === "function" && obj.constructor === Symbol && obj !== Symbol.prototype ? "symbol" : typeof obj; }; } return _typeof(obj); }
+
+Object.defineProperty(exports, "__esModule", {
+  value: true
+});
+exports.default = void 0;
+
+var _react = _interopRequireDefault(require("react"));
+
+var _propTypes = _interopRequireDefault(require("prop-types"));
+
+var _theme = require("../functions/theme");
+
+var _dibkLogoMobile = _interopRequireDefault(require("../images/dibk-logo-mobile.svg"));
+
+var _NavigationBarListItem = _interopRequireDefault(require("./NavigationBarListItem"));
+
+var _NavigationBarModule = _interopRequireDefault(require("./NavigationBar.module.scss"));
+
+function _interopRequireDefault(obj) { return obj && obj.__esModule ? obj : { default: obj }; }
+
+function _classCallCheck(instance, Constructor) { if (!(instance instanceof Constructor)) { throw new TypeError("Cannot call a class as a function"); } }
+
+function _defineProperties(target, props) { for (var i = 0; i < props.length; i++) { var descriptor = props[i]; descriptor.enumerable = descriptor.enumerable || false; descriptor.configurable = true; if ("value" in descriptor) descriptor.writable = true; Object.defineProperty(target, descriptor.key, descriptor); } }
+
+function _createClass(Constructor, protoProps, staticProps) { if (protoProps) _defineProperties(Constructor.prototype, protoProps); if (staticProps) _defineProperties(Constructor, staticProps); return Constructor; }
+
+function _inherits(subClass, superClass) { if (typeof superClass !== "function" && superClass !== null) { throw new TypeError("Super expression must either be null or a function"); } subClass.prototype = Object.create(superClass && superClass.prototype, { constructor: { value: subClass, writable: true, configurable: true } }); if (superClass) _setPrototypeOf(subClass, superClass); }
+
+function _setPrototypeOf(o, p) { _setPrototypeOf = Object.setPrototypeOf || function _setPrototypeOf(o, p) { o.__proto__ = p; return o; }; return _setPrototypeOf(o, p); }
+
+function _createSuper(Derived) { var hasNativeReflectConstruct = _isNativeReflectConstruct(); return function _createSuperInternal() { var Super = _getPrototypeOf(Derived), result; if (hasNativeReflectConstruct) { var NewTarget = _getPrototypeOf(this).constructor; result = Reflect.construct(Super, arguments, NewTarget); } else { result = Super.apply(this, arguments); } return _possibleConstructorReturn(this, result); }; }
+
+function _possibleConstructorReturn(self, call) { if (call && (_typeof(call) === "object" || typeof call === "function")) { return call; } else if (call !== void 0) { throw new TypeError("Derived constructors may only return object or undefined"); } return _assertThisInitialized(self); }
+
+function _assertThisInitialized(self) { if (self === void 0) { throw new ReferenceError("this hasn't been initialised - super() hasn't been called"); } return self; }
+
+function _isNativeReflectConstruct() { if (typeof Reflect === "undefined" || !Reflect.construct) return false; if (Reflect.construct.sham) return false; if (typeof Proxy === "function") return true; try { Boolean.prototype.valueOf.call(Reflect.construct(Boolean, [], function () {})); return true; } catch (e) { return false; } }
+
+function _getPrototypeOf(o) { _getPrototypeOf = Object.setPrototypeOf ? Object.getPrototypeOf : function _getPrototypeOf(o) { return o.__proto__ || Object.getPrototypeOf(o); }; return _getPrototypeOf(o); }
+
+var NavigationBar = /*#__PURE__*/function (_React$Component) {
+  _inherits(NavigationBar, _React$Component);
+
+  var _super = _createSuper(NavigationBar);
+
+  function NavigationBar(props) {
+    var _this;
+
+    _classCallCheck(this, NavigationBar);
+
+    _this = _super.call(this, props);
+    _this.state = {
+      active: false
+    };
+    return _this;
+  }
+
+  _createClass(NavigationBar, [{
+    key: "handleClickOutside",
+    value: function handleClickOutside() {
+      this.setState({
+        active: false
+      });
+    }
+  }, {
+    key: "toggleList",
+    value: function toggleList() {
+      this.setState(function (prevState) {
+        return {
+          active: !prevState.active
+        };
+      });
+    }
+  }, {
+    key: "getNavigationBarThemeStyle",
+    value: function getNavigationBarThemeStyle(theme) {
+      return {
+        backgroundColor: (0, _theme.getThemeNavigationBarBackgroundColor)(theme),
+        color: (0, _theme.getThemeNavigationBarTextColor)(theme)
+      };
+    }
+  }, {
+    key: "getListItemThemeStyle",
+    value: function getListItemThemeStyle(theme) {
+      return {
+        color: (0, _theme.getThemeNavigationBarTextColor)(theme),
+        borderBottomColor: (0, _theme.getThemeNavigationBarTextColor)(theme)
+      };
+    }
+  }, {
+    key: "getLogoThemeStyle",
+    value: function getLogoThemeStyle(theme) {
+      return {
+        padding: (0, _theme.getThemeLogoPadding)(theme)
+      };
+    }
+  }, {
+    key: "renderPrimaryList",
+    value: function renderPrimaryList() {
+      var _this2 = this;
+
+      var items = arguments.length > 0 && arguments[0] !== undefined ? arguments[0] : this.props.primaryListItems;
+      var iteration = arguments.length > 1 && arguments[1] !== undefined ? arguments[1] : 0;
+      var listItemThemeStyle = this.getListItemThemeStyle(this.props.theme);
+      var listItems = items.map(function (listItem, i) {
+        var key = iteration + '-' + i;
+
+        if (listItem.listItems !== undefined) {
+          return /*#__PURE__*/_react.default.createElement("li", {
+            key: key
+          }, /*#__PURE__*/_react.default.createElement("span", {
+            style: listItemThemeStyle
+          }, listItem.name), _this2.renderPrimaryList(listItem.listItems, iteration + 1));
+        } else {
+          return /*#__PURE__*/_react.default.createElement(_NavigationBarListItem.default, {
+            listItem: listItem,
+            key: key,
+            theme: _this2.props.theme
+          });
+        }
+      });
+      return /*#__PURE__*/_react.default.createElement("ul", {
+        className: _NavigationBarModule.default.primaryList
+      }, listItems);
+    }
+  }, {
+    key: "renderSecondaryList",
+    value: function renderSecondaryList() {
+      var _this3 = this;
+
+      var listItems = this.props.secondaryListItems.map(function (listItem, i) {
+        return /*#__PURE__*/_react.default.createElement(_NavigationBarListItem.default, {
+          listItem: listItem,
+          key: i,
+          theme: _this3.props.theme
+        });
+      });
+      return /*#__PURE__*/_react.default.createElement("ul", {
+        className: _NavigationBarModule.default.secondaryList
+      }, listItems);
+    }
+  }, {
+    key: "renderLogo",
+    value: function renderLogo(logoLink) {
+      var themeLogo = (0, _theme.getThemeLogo)(this.props.theme);
+      var themeAppName = (0, _theme.getThemeAppName)(this.props.theme);
+      var logoElement = themeLogo && themeAppName ? /*#__PURE__*/_react.default.createElement("img", {
+        alt: "".concat(themeAppName, " logo"),
+        src: themeLogo,
+        style: this.getLogoThemeStyle(this.props.theme)
+      }) : /*#__PURE__*/_react.default.createElement("img", {
+        alt: "DIBK logo",
+        src: _dibkLogoMobile.default
+      });
+      return logoLink && logoLink.length ? /*#__PURE__*/_react.default.createElement("a", {
+        href: logoLink
+      }, logoElement) : logoElement;
+    }
+  }, {
+    key: "render",
+    value: function render() {
+      var _this4 = this;
+
+      var navigationBarThemeStyle = this.getNavigationBarThemeStyle(this.props.theme);
+      var hamburgerIconLineStyle = {
+        backgroundColor: (0, _theme.getThemeNavigationBarTextColor)(this.props.theme)
+      };
+      return /*#__PURE__*/_react.default.createElement("header", null, /*#__PURE__*/_react.default.createElement("div", {
+        className: _NavigationBarModule.default.isPresent
+      }, /*#__PURE__*/_react.default.createElement("div", {
+        className: _NavigationBarModule.default.navigationBar,
+        style: navigationBarThemeStyle
+      }, /*#__PURE__*/_react.default.createElement("div", {
+        className: _NavigationBarModule.default.logoContainer
+      }, this.renderLogo(this.props.logoLink)), this.props.children ? /*#__PURE__*/_react.default.createElement("div", {
+        className: _NavigationBarModule.default.childElements
+      }, this.props.children) : '', this.props.primaryListItems && this.props.primaryListItems.length || this.props.secondaryListItems && this.props.secondaryListItems.length ? /*#__PURE__*/_react.default.createElement("button", {
+        className: "".concat(_NavigationBarModule.default.menuToggle, " ").concat(this.state.active ? _NavigationBarModule.default.active : ''),
+        onClick: function onClick() {
+          return _this4.toggleList();
+        }
+      }, /*#__PURE__*/_react.default.createElement("span", {
+        className: _NavigationBarModule.default.hamburgerIcon
+      }, /*#__PURE__*/_react.default.createElement("span", {
+        className: _NavigationBarModule.default.line,
+        style: hamburgerIconLineStyle
+      }), /*#__PURE__*/_react.default.createElement("span", {
+        className: _NavigationBarModule.default.line,
+        style: hamburgerIconLineStyle
+      }), /*#__PURE__*/_react.default.createElement("span", {
+        className: _NavigationBarModule.default.line,
+        style: hamburgerIconLineStyle
+      }))) : ''), /*#__PURE__*/_react.default.createElement("div", {
+        className: "".concat(_NavigationBarModule.default.dropdownContainer, " ").concat(this.state.active ? _NavigationBarModule.default.active : '')
+      }, /*#__PURE__*/_react.default.createElement("div", {
+        className: _NavigationBarModule.default.dropdown,
+        style: navigationBarThemeStyle
+      }, this.renderPrimaryList(), this.renderSecondaryList(), this.props.children)), /*#__PURE__*/_react.default.createElement("div", {
+        className: "".concat(_NavigationBarModule.default.dropdownOverlay, " ").concat(this.state.active ? _NavigationBarModule.default.active : '')
+      })));
+    }
+  }]);
+
+  return NavigationBar;
+}(_react.default.Component);
+
+NavigationBar.propTypes = {
+  /** Main links in navigation bar */
+  primaryListItems: _propTypes.default.array,
+
+  /** Secondary links in navigation bar */
+  secondaryListItems: _propTypes.default.array,
+
+  /** Link for logo */
+  logoLink: _propTypes.default.string,
+
+  /** Theme for navigation bar */
+  theme: _propTypes.default.object
+};
+NavigationBar.defaultProps = {
+  primaryListItems: [],
+  secondaryListItems: [],
+  logoLink: null
+};
+var _default = NavigationBar;
+exports.default = _default;