dibk-design 0.3.24

package/dist/components/NavigationBar.md

@@ -0,0 +1,31 @@
+NavigationBar example:
+
+```js
+<NavigationBar primaryListItems={[{name: 'Primary item 1', listItems:['Sub item 1', 'Sub item 2']}, 'Primary item 2', {name: 'Primary item 3', href: '#'}]} secondaryListItems={['Secondary item 1', 'Secondary item 2']} />
+```
+
+NavigationBar without list items example
+```js
+<NavigationBar />
+```
+
+NavigationBar with child elements
+```js
+<NavigationBar primaryListItems={[{name: 'Primary item 1', listItems:['Sub item 1', 'Sub item 2']}, 'Primary item 2', {name: 'Primary item 3', href: '#'}]} secondaryListItems={['Secondary item 1', 'Secondary item 2']} >
+Content here
+</NavigationBar>
+```
+
+
+NavigationBar with child elements and without list items example
+```js
+<NavigationBar>
+Content here
+</NavigationBar>
+```
+
+Themed NavigationBar example:
+```js
+import customTheme from 'data/customTheme';
+<NavigationBar theme={customTheme} primaryListItems={[{name: 'Primary item 1', listItems:['Sub item 1', 'Sub item 2']}, 'Primary item 2', {name: 'Primary item 3', href: '#'}]} secondaryListItems={['Secondary item 1', 'Secondary item 2']} />
+```

package/dist/components/NavigationBar.module.scss

@@ -0,0 +1,176 @@
+@import "../style/global.scss";
+
+:local(.isPresent) {
+	@include box-shadow(0 2px 4px -2px rgba(0,0,0,.2));
+	position: relative;
+	z-index: 1;
+	:local(.navigationBar) {
+		background-color: $color-dark-blue;
+		height: 54px;
+		display: flex;
+		justify-content: space-between;
+		align-items: center;
+		@media only screen and (min-width: $screen-xs) {
+			height: 73px;
+		}
+	}
+
+	:local(.logoContainer) {
+		width: 200px;
+		height: 54px;
+		display: inline-block;
+		img {
+			height: 54px;
+			max-width: none;
+		}
+		@media only screen and (min-width: $screen-xs) {
+			width: 270px;
+			height: 73px;
+			img {
+				height: 73px;
+			}
+		}
+	}
+
+	:local(.childElements) {
+		display: block;
+		color: #fff;
+		flex: 1;
+	}
+
+	:local(.dropdownOverlay) {
+		@media only screen and (max-width: $screen-md) and (min-width: $screen-xs) {
+			@include transition(all 0.1s ease-out);
+			content: "";
+			position: absolute;
+			top: 73px;
+			right: 0;
+			bottom: 0;
+			left: 0;
+			z-index: 1;
+			visibility: hidden;
+			opacity: 0;
+			background: transparent;
+			&:local(.active) {
+				opacity: 1;
+				background: rgba(0, 0, 0, 0.5);
+				visibility: visible;
+			}
+		}
+	}
+
+	:local(.menuToggle) {
+		@include appearance(none);
+		@include transition(background-color 300ms ease-out);
+		border: none;
+		cursor: pointer;
+		position: relative;
+		background-color: transparent;
+		float: right;
+		margin: 0 12px;
+		:local(.hamburgerIcon) {
+			width: 30px;
+			display: block;
+			:local(.line) {
+				background-color: #fff;
+				height: 2px;
+				margin: 6px 0;
+				display: block;
+			}
+		}
+		@media only screen and (min-width: $screen-xs) {
+			margin: 0 21px;
+		}
+	}
+
+	:local(.dropdownContainer) {
+		@include transition(max-height 0.15s ease-out);
+		max-height: 0;
+		overflow: hidden;
+		&:local(.active) {
+			@include transition(max-height 0.15s ease-out);
+			max-height: 500px;
+		}
+	}
+
+	:local(.dropdown) {
+		@include box-shadow(0 2px 4px -2px rgba(0,0,0,.2));
+		background-color: $color-dark-blue;
+		z-index: 2;
+		> :local(ul.primaryList) {
+			list-style: none;
+			padding: 20px;
+			margin: 0;
+			li {
+				a,
+				span {
+					color: #fff;
+					text-transform: uppercase;
+					text-decoration: none;
+					font-family: "Open Sans";
+					padding: 10px 0;
+					display: block;
+					border-bottom: 1px solid $color-primary;
+					font-size: 14px;
+					line-height: 1.6;
+				}
+				> :local(ul.primaryList) {
+					list-style: none;
+					padding: 0;
+					li {
+						a,
+						span {
+							color: #fff;
+							text-transform: none;
+							text-decoration: none;
+							font-family: "Open Sans";
+							padding: 10px 0;
+							margin-left: 20px;
+							display: block;
+							border-bottom: 1px solid #1b3a48;
+							font-size: 14px;
+							line-height: 1.6;
+						}
+					}
+				}
+			}
+		}
+		> :local(ul.secondaryList) {
+			list-style: none;
+			padding: 20px;
+			margin: 0;
+
+			li {
+				a,
+				span {
+					color: #fff;
+					text-decoration: underline;
+					font-family: "Arial";
+					font-size: 14px;
+					padding: 10px 0;
+					line-height: 1;
+				}
+			}
+		}
+	}
+
+	@media only screen and (min-width: $screen-xs) {
+		:local(.dropdownContainer) {
+			position: relative;
+			overflow: visible;
+			:local(.dropdown) {
+				@include transition(max-height 0.15s ease-out);
+				width: 300px;
+				position: absolute;
+				right: 0;
+				max-height: 0;
+				overflow: hidden;
+			}
+			&:local(.active) {
+				:local(.dropdown) {
+					max-height: 500px;
+				}
+			}
+		}
+	}
+}

package/dist/components/NavigationBarListItem.js

@@ -0,0 +1,85 @@
+"use strict";
+
+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");
+
+function _interopRequireDefault(obj) { return obj && obj.__esModule ? obj : { default: obj }; }
+
+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); }
+
+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 NavigationBarListItem = /*#__PURE__*/function (_React$Component) {
+  _inherits(NavigationBarListItem, _React$Component);
+
+  var _super = _createSuper(NavigationBarListItem);
+
+  function NavigationBarListItem() {
+    _classCallCheck(this, NavigationBarListItem);
+
+    return _super.apply(this, arguments);
+  }
+
+  _createClass(NavigationBarListItem, [{
+    key: "getListItemThemeStyle",
+    value: function getListItemThemeStyle(theme) {
+      return {
+        color: (0, _theme.getThemeNavigationBarTextColor)(theme),
+        borderBottomColor: (0, _theme.getThemeNavigationBarTextColor)(theme)
+      };
+    }
+  }, {
+    key: "render",
+    value: function render() {
+      var listItemThemeStyle = this.getListItemThemeStyle(this.props.theme);
+
+      if (typeof this.props.listItem === 'string') {
+        return /*#__PURE__*/_react.default.createElement("li", null, /*#__PURE__*/_react.default.createElement("span", {
+          style: listItemThemeStyle
+        }, this.props.listItem));
+      } else if (_typeof(this.props.listItem) === 'object') {
+        return /*#__PURE__*/_react.default.createElement("li", null, /*#__PURE__*/_react.default.createElement("a", {
+          href: this.props.listItem.href,
+          style: listItemThemeStyle
+        }, this.props.listItem.name));
+      } else {
+        return null;
+      }
+    }
+  }]);
+
+  return NavigationBarListItem;
+}(_react.default.Component);
+
+NavigationBarListItem.propTypes = {
+  listItem: _propTypes.default.oneOfType([_propTypes.default.string, _propTypes.default.object]),
+  theme: _propTypes.default.object
+};
+var _default = NavigationBarListItem;
+exports.default = _default;

package/dist/components/NavigationBarListItem.md

@@ -0,0 +1,16 @@
+NavigationBarListItem example:
+```js
+<ul>
+<NavigationBarListItem listItem='Primary item 1' />
+<NavigationBarListItem listItem={{name: 'Primary item 2', href: '#'}} />
+</ul>
+```
+
+Themed NavigationBarListItem example:
+```js
+import customTheme from 'data/customTheme';
+<ul>
+<NavigationBarListItem listItem='Primary item 1' theme={customTheme} />
+<NavigationBarListItem listItem={{name: 'Primary item 2', href: '#'}} theme={customTheme} />
+</ul>
+```

package/dist/components/Paper.js

@@ -0,0 +1,71 @@
+"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 _PaperModule = _interopRequireDefault(require("./Paper.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 Paper = /*#__PURE__*/function (_React$Component) {
+  _inherits(Paper, _React$Component);
+
+  var _super = _createSuper(Paper);
+
+  function Paper() {
+    _classCallCheck(this, Paper);
+
+    return _super.apply(this, arguments);
+  }
+
+  _createClass(Paper, [{
+    key: "render",
+    value: function render() {
+      return /*#__PURE__*/_react.default.createElement("div", {
+        className: "".concat(_PaperModule.default.paper, " ").concat(this.props.noMargin ? _PaperModule.default.noMargin : '', " ").concat(this.props.noPadding ? _PaperModule.default.noPadding : '')
+      }, this.props.children);
+    }
+  }]);
+
+  return Paper;
+}(_react.default.Component);
+
+;
+Paper.propTypes = {
+  noMargin: _propTypes.default.bool,
+  noPadding: _propTypes.default.bool
+};
+Paper.defaultProps = {
+  noMargin: false,
+  noPadding: false
+};
+var _default = Paper;
+exports.default = _default;

package/dist/components/Paper.md

@@ -0,0 +1,9 @@
+Paper example:
+
+```js
+<Paper />
+<Paper>Paper with content</Paper>
+<Paper noPadding>Paper with no padding</Paper>
+<Paper noMargin>Paper with no margin</Paper>
+<Paper noMargin noPadding>Paper with no margin or padding</Paper>
+```

package/dist/components/Paper.module.scss

@@ -0,0 +1,17 @@
+:local(.paper) {
+  line-height: 1.6;
+  position: relative;
+  padding: 24px 28px;
+  margin: 20px 0;
+  width: 100%;
+  background: white;
+  box-shadow: 0 2px 3px rgba(0,0,0,0.18);
+
+  &:local(.noMargin) {
+    margin: 0;
+  }
+
+  &:local(.noPadding) {
+    padding: 0;
+  }
+}

package/dist/components/RadioButtonIcon.js

@@ -0,0 +1,92 @@
+"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 _RadioButtonIconModule = _interopRequireDefault(require("./RadioButtonIcon.module.scss"));
+
+function _interopRequireDefault(obj) { return obj && obj.__esModule ? obj : { default: obj }; }
+
+function ownKeys(object, enumerableOnly) { var keys = Object.keys(object); if (Object.getOwnPropertySymbols) { var symbols = Object.getOwnPropertySymbols(object); if (enumerableOnly) { symbols = symbols.filter(function (sym) { return Object.getOwnPropertyDescriptor(object, sym).enumerable; }); } keys.push.apply(keys, symbols); } return keys; }
+
+function _objectSpread(target) { for (var i = 1; i < arguments.length; i++) { var source = arguments[i] != null ? arguments[i] : {}; if (i % 2) { ownKeys(Object(source), true).forEach(function (key) { _defineProperty(target, key, source[key]); }); } else if (Object.getOwnPropertyDescriptors) { Object.defineProperties(target, Object.getOwnPropertyDescriptors(source)); } else { ownKeys(Object(source)).forEach(function (key) { Object.defineProperty(target, key, Object.getOwnPropertyDescriptor(source, key)); }); } } return target; }
+
+function _defineProperty(obj, key, value) { if (key in obj) { Object.defineProperty(obj, key, { value: value, enumerable: true, configurable: true, writable: true }); } else { obj[key] = value; } return 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 RadioButtonIcon = /*#__PURE__*/function (_React$Component) {
+  _inherits(RadioButtonIcon, _React$Component);
+
+  var _super = _createSuper(RadioButtonIcon);
+
+  function RadioButtonIcon() {
+    _classCallCheck(this, RadioButtonIcon);
+
+    return _super.apply(this, arguments);
+  }
+
+  _createClass(RadioButtonIcon, [{
+    key: "render",
+    value: function render() {
+      var inlineStyle = {
+        height: this.props.size,
+        width: this.props.size
+      };
+
+      if (this.props.theme && this.props.checked) {
+        inlineStyle = _objectSpread(_objectSpread({}, inlineStyle), {}, {
+          background: (0, _theme.getThemePaletteBackgroundColor)(this.props.theme, 'primary'),
+          boxShadow: "0 0 0 1px ".concat((0, _theme.getThemePaletteBackgroundColor)(this.props.theme, 'primary'))
+        });
+      }
+
+      return /*#__PURE__*/_react.default.createElement("span", {
+        className: "".concat(_RadioButtonIconModule.default.radioButtonIcon, " ").concat(this.props.checked ? _RadioButtonIconModule.default.checked : ''),
+        style: inlineStyle
+      });
+    }
+  }]);
+
+  return RadioButtonIcon;
+}(_react.default.Component);
+
+RadioButtonIcon.propTypes = {
+  size: _propTypes.default.string,
+  checked: _propTypes.default.bool,
+  theme: _propTypes.default.object
+};
+RadioButtonIcon.defaultProps = {
+  size: '10px',
+  checked: false
+};
+var _default = RadioButtonIcon;
+exports.default = _default;