dibk-design 1.1.9 → 2.0.0

package/dist/components/NavigationBar.module.scss

@@ -1,176 +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-sm) {
-			height: 73px;
-		}
-	}
+.isPresent {
+    @include box-shadow(0 2px 4px -2px rgba(0, 0, 0, 0.2));
+    position: relative;
+    z-index: 1;
+    .navigationBar {
+        background-color: $color-dark-blue;
+        height: 54px;
+        display: flex;
+        justify-content: space-between;
+        align-items: center;
+        @media only screen and (min-width: $screen-sm) {
+            height: 73px;
+        }
+    }
 
-	:local(.logoContainer) {
-		width: 200px;
-		height: 54px;
-		display: inline-block;
-		img {
-			height: 54px;
-			max-width: none;
-		}
-		@media only screen and (min-width: $screen-sm) {
-			width: 270px;
-			height: 73px;
-			img {
-				height: 73px;
-			}
-		}
-	}
+    .logoContainer {
+        width: 200px;
+        height: 54px;
+        display: inline-block;
+        img {
+            height: 54px;
+            max-width: none;
+        }
+        @media only screen and (min-width: $screen-sm) {
+            width: 270px;
+            height: 73px;
+            img {
+                height: 73px;
+            }
+        }
+    }
 
-	:local(.childElements) {
-		display: block;
-		color: #fff;
-		flex: 1;
-	}
+    .childElements {
+        display: block;
+        color: #fff;
+        flex: 1;
+    }
 
-	:local(.dropdownOverlay) {
-		@media only screen and (max-width: $screen-lg) and (min-width: $screen-sm) {
-			@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;
-			}
-		}
-	}
+    .dropdownOverlay {
+        @media only screen and (max-width: $screen-lg) and (min-width: $screen-sm) {
+            @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;
+            &.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-sm) {
-			margin: 0 21px;
-		}
-	}
+    .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;
+        .hamburgerIcon {
+            width: 30px;
+            display: block;
+            .line {
+                background-color: #fff;
+                height: 2px;
+                margin: 6px 0;
+                display: block;
+            }
+        }
+        @media only screen and (min-width: $screen-sm) {
+            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;
-		}
-	}
+    .dropdownContainer {
+        @include transition(max-height 0.15s ease-out);
+        max-height: 0;
+        overflow: hidden;
+        &.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: $default-font;
-					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: $default-font;
-							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;
+    .dropdown {
+        @include box-shadow(0 2px 4px -2px rgba(0, 0, 0, 0.2));
+        background-color: $color-dark-blue;
+        z-index: 2;
+        > ul.primaryList {
+            list-style: none;
+            padding: 20px;
+            margin: 0;
+            li {
+                a,
+                span {
+                    color: #fff;
+                    text-transform: uppercase;
+                    text-decoration: none;
+                    font-family: $default-font;
+                    padding: 10px 0;
+                    display: block;
+                    border-bottom: 1px solid $color-primary;
+                    font-size: 14px;
+                    line-height: 1.6;
+                }
+                > ul.primaryList {
+                    list-style: none;
+                    padding: 0;
+                    li {
+                        a,
+                        span {
+                            color: #fff;
+                            text-transform: none;
+                            text-decoration: none;
+                            font-family: $default-font;
+                            padding: 10px 0;
+                            margin-left: 20px;
+                            display: block;
+                            border-bottom: 1px solid #1b3a48;
+                            font-size: 14px;
+                            line-height: 1.6;
+                        }
+                    }
+                }
+            }
+        }
+        > 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;
-				}
-			}
-		}
-	}
+            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-sm) {
-		: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;
-				}
-			}
-		}
-	}
+    @media only screen and (min-width: $screen-sm) {
+        .dropdownContainer {
+            position: relative;
+            overflow: visible;
+            .dropdown {
+                @include transition(max-height 0.15s ease-out);
+                width: 300px;
+                position: absolute;
+                right: 0;
+                max-height: 0;
+                overflow: hidden;
+            }
+            &.active {
+                .dropdown {
+                    max-height: 500px;
+                }
+            }
+        }
+    }
 }

package/dist/components/NavigationBarListItem.js

@@ -15,67 +15,29 @@ function _interopRequireDefault(obj) { return obj && obj.__esModule ? obj : { de
 
 function _typeof(obj) { "@babel/helpers - typeof"; return _typeof = "function" == typeof Symbol && "symbol" == typeof Symbol.iterator ? function (obj) { return typeof obj; } : function (obj) { return obj && "function" == typeof Symbol && obj.constructor === Symbol && obj !== Symbol.prototype ? "symbol" : typeof obj; }, _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); Object.defineProperty(Constructor, "prototype", { writable: false }); 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 } }); Object.defineProperty(subClass, "prototype", { writable: false }); if (superClass) _setPrototypeOf(subClass, superClass); }
-
-function _setPrototypeOf(o, p) { _setPrototypeOf = Object.setPrototypeOf ? Object.setPrototypeOf.bind() : 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.bind() : 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);
+var NavigationBarListItem = function NavigationBarListItem(props) {
+  var getListItemThemeStyle = function getListItemThemeStyle() {
+    return {
+      color: (0, _theme.getThemeNavigationBarTextColor)(props.theme),
+      borderBottomColor: (0, _theme.getThemeNavigationBarTextColor)(props.theme)
+    };
+  };
+
+  var listItemThemeStyle = getListItemThemeStyle();
+
+  if (typeof props.listItem === "string") {
+    return _react.default.createElement("li", null, _react.default.createElement("span", {
+      style: listItemThemeStyle
+    }, props.listItem));
+  } else if (_typeof(props.listItem) === "object") {
+    return _react.default.createElement("li", null, _react.default.createElement("a", {
+      href: props.listItem.href,
+      style: listItemThemeStyle
+    }, props.listItem.name));
+  } else {
+    return null;
   }
-
-  _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]),

package/dist/components/Paper.js

@@ -1,7 +1,5 @@
 "use strict";
 
-function _typeof(obj) { "@babel/helpers - typeof"; return _typeof = "function" == typeof Symbol && "symbol" == typeof Symbol.iterator ? function (obj) { return typeof obj; } : function (obj) { return obj && "function" == typeof Symbol && obj.constructor === Symbol && obj !== Symbol.prototype ? "symbol" : typeof obj; }, _typeof(obj); }
-
 Object.defineProperty(exports, "__esModule", {
   value: true
 });
@@ -15,50 +13,12 @@ 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); Object.defineProperty(Constructor, "prototype", { writable: false }); 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 } }); Object.defineProperty(subClass, "prototype", { writable: false }); if (superClass) _setPrototypeOf(subClass, superClass); }
-
-function _setPrototypeOf(o, p) { _setPrototypeOf = Object.setPrototypeOf ? Object.setPrototypeOf.bind() : 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.bind() : 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);
+var Paper = function Paper(props) {
+  return _react.default.createElement("div", {
+    className: "".concat(_PaperModule.default.paper, " ").concat(props.noMargin ? _PaperModule.default.noMargin : "", " ").concat(props.noPadding ? _PaperModule.default.noPadding : "")
+  }, props.children);
+};
 
-;
 Paper.propTypes = {
   noMargin: _propTypes.default.bool,
   noPadding: _propTypes.default.bool

package/dist/components/Paper.module.scss

@@ -1,18 +1,18 @@
 @import "../style/global.scss";
 
-:local(.paper) {
-  line-height: 1.6;
-  position: relative;
-  width: 100%;
-  background: white;
-  box-shadow: 0 2px 3px rgba(0, 0, 0, 0.18);
-  &:not(:local(.noMargin)) {
-    margin: 20px 0;
-  }
-  &:not(:local(.noPadding)) {
-    padding: 12px 12px;
-    @media only screen and (min-width: $screen-sm) {
-      padding: 24px 28px;
+.paper {
+    line-height: 1.6;
+    position: relative;
+    width: 100%;
+    background: white;
+    box-shadow: 0 2px 3px rgba(0, 0, 0, 0.18);
+    &:not(.noMargin) {
+        margin: 20px 0;
+    }
+    &:not(.noPadding) {
+        padding: 12px 12px;
+        @media only screen and (min-width: $screen-sm) {
+            padding: 24px 28px;
+        }
     }
-  }
 }

package/dist/components/ProgressBar.js

@@ -7,25 +7,33 @@ exports.default = void 0;
 
 var _react = _interopRequireDefault(require("react"));
 
+var _propTypes = _interopRequireDefault(require("prop-types"));
+
 var _ProgressBarModule = _interopRequireDefault(require("./ProgressBar.module.scss"));
 
 function _interopRequireDefault(obj) { return obj && obj.__esModule ? obj : { default: obj }; }
 
 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; }
 
-var ProgressBar = function ProgressBar(_ref) {
-  var progress = _ref.progress,
-      hasErrors = _ref.hasErrors;
-  var scssValueProperty = '--value';
-  return /*#__PURE__*/_react.default.createElement("div", {
-    className: "".concat(_ProgressBarModule.default.progressBar, " ").concat(hasErrors ? _ProgressBarModule.default.hasErrors : ''),
+var ProgressBar = function ProgressBar(props) {
+  var scssValueProperty = "--value";
+  return _react.default.createElement("div", {
+    className: "".concat(_ProgressBarModule.default.progressBar, " ").concat(props.hasErrors ? _ProgressBarModule.default.hasErrors : ""),
     role: "progressbar",
-    "aria-valuenow": progress || 0,
+    "aria-valuenow": props.progress || 0,
     "aria-valuemin": "0",
     "aria-valuemax": "100",
-    style: _defineProperty({}, scssValueProperty, progress || 0)
+    style: _defineProperty({}, scssValueProperty, props.progress || 0)
   });
 };
 
+ProgressBar.propTypes = {
+  progress: _propTypes.default.number,
+  hasErrors: _propTypes.default.bool
+};
+ProgressBar.defaultProps = {
+  progress: 0,
+  hasErrors: false
+};
 var _default = ProgressBar;
 exports.default = _default;

package/dist/components/ProgressBar.module.scss

@@ -1,6 +1,6 @@
 @import "../style/global.scss";
 
-:local(.progressBar) {
+.progressBar {
     --size: 4rem;
     --fg: #{$color-primary};
     --bg: #e2e1e0;
@@ -20,7 +20,7 @@
         counter-reset: percentage var(--value);
         content: counter(percentage) "%";
     }
-    &:local(.hasErrors) {
+    &.hasErrors {
         --fg: #{$color-error};
     }
 }