dibk-design 0.4.46 → 0.4.47

package/dist/components/Container.js

@@ -0,0 +1,60 @@
+"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
+});
+exports.default = void 0;
+
+var _react = require("react");
+
+var _ContainerModule = _interopRequireDefault(require("./Container.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 || 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 Container = /*#__PURE__*/function (_Component) {
+  _inherits(Container, _Component);
+
+  var _super = _createSuper(Container);
+
+  function Container() {
+    _classCallCheck(this, Container);
+
+    return _super.apply(this, arguments);
+  }
+
+  _createClass(Container, [{
+    key: "render",
+    value: function render() {
+      return /*#__PURE__*/React.createElement("div", {
+        className: _ContainerModule.default.container
+      }, this.props.children);
+    }
+  }]);
+
+  return Container;
+}(_react.Component);
+
+var _default = Container;
+exports.default = _default;

package/dist/components/Container.md

@@ -0,0 +1,7 @@
+Container example:
+
+```js
+<Container>
+  Container content here
+</Container>
+```

package/dist/components/Container.module.scss

@@ -0,0 +1,10 @@
+@import "../style/global.scss";
+
+:local(.container) {
+    margin: auto;
+    padding: 16px;
+    @media (min-width: $screen-sm) {
+        padding: 24px;
+        max-width: 980px;
+    }
+}

package/dist/components/ErrorMessage.module.scss

@@ -2,7 +2,7 @@
 
 :local(.errorMessage) {
     display: block;
-    color: $color-error-text;
+    color: $color-error;
     font-size: 16px;
     font-weight: 400;
     line-height: 1.2;

package/dist/components/Footer.js

@@ -9,6 +9,8 @@ exports.default = void 0;
 
 var _react = _interopRequireDefault(require("react"));
 
+var _Container = _interopRequireDefault(require("./Container"));
+
 var _FooterModule = _interopRequireDefault(require("./Footer.module.scss"));
 
 function _interopRequireDefault(obj) { return obj && obj.__esModule ? obj : { default: obj }; }
@@ -49,9 +51,7 @@ var Footer = /*#__PURE__*/function (_React$Component) {
     value: function render() {
       return /*#__PURE__*/_react.default.createElement("footer", {
         className: _FooterModule.default.footer
-      }, /*#__PURE__*/_react.default.createElement("div", {
-        className: _FooterModule.default.footerContainer
-      }, this.props.children));
+      }, /*#__PURE__*/_react.default.createElement(_Container.default, null, this.props.children));
     }
   }]);
 

package/dist/components/Footer.module.scss

@@ -1,11 +1,20 @@
 @import "../style/global.scss";
 
 :local(.footer) {
-  background-color: $color-default;
-  padding-top: 40px;
-
-  :local(.footerContainer) {
-    max-width: 1280px;
-    margin: 0 auto;
+  background-color: $color-primary;
+  padding: 16px 0;
+  text-align: right;
+  * {
+    color: #fff;
+  }
+  a,
+  .link {
+    color: #fff;
+    text-decoration: underline;
+    cursor: pointer;
+    display: block;
+    &:hover {
+      text-decoration: none;
+    }
   }
 }

package/dist/components/ProgressBar.js

@@ -0,0 +1,29 @@
+"use strict";
+
+Object.defineProperty(exports, "__esModule", {
+  value: true
+});
+exports.default = void 0;
+
+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.createElement("div", {
+    className: "".concat(_ProgressBarModule.default.progressBar, " ").concat(hasErrors ? _ProgressBarModule.default.hasErrors : ''),
+    role: "progressbar",
+    "aria-valuenow": progress || 0,
+    "aria-valuemin": "0",
+    "aria-valuemax": "100",
+    style: _defineProperty({}, scssValueProperty, progress || 0)
+  });
+};
+
+var _default = ProgressBar;
+exports.default = _default;

package/dist/components/ProgressBar.md

@@ -0,0 +1,13 @@
+Progress bar examples:
+
+```js
+<ProgressBar progress={0} />
+<ProgressBar progress={25} />
+<ProgressBar progress={100} />
+```
+
+Progress bar with error example:
+
+```js
+<ProgressBar progress={60} hasErrors />
+```

package/dist/components/ProgressBar.module.scss

@@ -0,0 +1,37 @@
+@import "../style/global.scss";
+
+@keyframes growProgressBar {
+    0%,
+    33% {
+        --pgPercentage: 0;
+    }
+    100% {
+        --pgPercentage: var(--value);
+    }
+}
+
+:local(.progressBar) {
+    --size: 4rem;
+    --fg: #{$color-primary};
+    --bg: #e2e1e0;
+    --pgPercentage: var(--value);
+    animation: growProgressBar 0.25s 1 forwards;
+    width: var(--size);
+    height: var(--size);
+    border-radius: 50%;
+    display: grid;
+    place-items: center;
+    background: radial-gradient(closest-side, white 80%, transparent 0 99.9%, white 0),
+        conic-gradient(var(--fg) calc(var(--pgPercentage) * 1%), var(--bg) 0);
+    font-family: Helvetica, Arial, sans-serif;
+    font-size: calc(var(--size) / 4);
+    color: var(--fg);
+    flex-shrink: 0;
+    &::before {
+        counter-reset: percentage var(--value);
+        content: counter(percentage) "%";
+    }
+    &:local(.hasErrors) {
+        --fg: #{$color-error};
+    }
+}

package/dist/index.js

@@ -33,6 +33,12 @@ Object.defineProperty(exports, "CheckBoxListItem", {
     return _CheckBoxListItem.default;
   }
 });
+Object.defineProperty(exports, "Container", {
+  enumerable: true,
+  get: function get() {
+    return _Container.default;
+  }
+});
 Object.defineProperty(exports, "ContentBox", {
   enumerable: true,
   get: function get() {
@@ -111,6 +117,12 @@ Object.defineProperty(exports, "Paper", {
     return _Paper.default;
   }
 });
+Object.defineProperty(exports, "ProgressBar", {
+  enumerable: true,
+  get: function get() {
+    return _ProgressBar.default;
+  }
+});
 Object.defineProperty(exports, "RadioButtonIcon", {
   enumerable: true,
   get: function get() {
@@ -164,6 +176,8 @@ var _CheckBoxInput = _interopRequireDefault(require("./components/CheckBoxInput"
 
 var _CheckBoxListItem = _interopRequireDefault(require("./components/CheckBoxListItem"));
 
+var _Container = _interopRequireDefault(require("./components/Container"));
+
 var _ContentBox = _interopRequireDefault(require("./components/ContentBox"));
 
 var _Dialog = _interopRequireDefault(require("./components/Dialog"));
@@ -190,6 +204,8 @@ var _NavigationBarListItem = _interopRequireDefault(require("./components/Naviga
 
 var _Paper = _interopRequireDefault(require("./components/Paper"));
 
+var _ProgressBar = _interopRequireDefault(require("./components/ProgressBar"));
+
 var _RadioButtonIcon = _interopRequireDefault(require("./components/RadioButtonIcon"));
 
 var _RadioButtonInput = _interopRequireDefault(require("./components/RadioButtonInput"));

package/dist/style/abstracts/variables/_colors.scss

@@ -5,7 +5,6 @@ $color-dark-blue: #072938;
 $color-light-blue: #acc5d4;
 
 $color-error: #9d2024;
-$color-error-text: #c1272c;
 
 $color-primary: #072938;
 

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "dibk-design",
-  "version": "0.4.46",
+  "version": "0.4.47",
   "private": false,
   "main": "dist/index.js",
   "module": "dist/index.js",
@@ -13,7 +13,7 @@
     "react": "^17.0.1",
     "react-datepicker": "^4.1.1",
     "react-dom": "^17.0.1",
-    "react-router-dom": "^5.2.0",
+    "react-router-dom": "^6.2.2",
     "react-scripts": "^4.0.0"
   },
   "scripts": {