dibk-design 0.4.45 → 0.4.46

package/dist/components/ContentBox.module.scss

@@ -1,116 +1,116 @@
-@import "../style/global.scss";
-
-:local(.contentBox) {
-    font-family: $default-font;
-    text-decoration: none;
-    padding: 20px;
-    width: 100%;
-    display: block;
-    &:local(.link) {
-        color: $color-primary;
-        @include transition(filter 0.3s);
-        &:hover,
-        &:focus {
-            filter: brightness(90%);
-        }
-        &:active {
-            filter: brightness(85%);
-        }
-    }
-    &:local(.default) {
-        background-color: $color-default;
-        :local(.content),
-        :local(.title) {
-            color: #000;
-        }
-    }
-    &:local(.primary) {
-        background-color: $color-primary;
-        color: #fff;
-        :local(.content),
-        :local(.title) {
-            color: #fff;
-        }
-    }
-    &:local(.success) {
-        background-color: $color-success;
-        color: #fff;
-        :local(.content),
-        :local(.title) {
-            color: #fff;
-        }
-    }
-    &:local(.warning) {
-        background-color: $color-warning;
-        color: #fff;
-        :local(.content),
-        :local(.title) {
-            color: #fff;
-        }
-    }
-
-    &:local(.info) {
-        background-color: $color-info;
-        :local(.content),
-        :local(.title) {
-            color: #000;
-        }
-    }
-    &:local(.lightCyan) {
-        background-color: $color-light-cyan;
-        :local(.content),
-        :local(.title) {
-            color: #000;
-        }
-    }
-    &:local(.orange) {
-        background-color: $color-orange;
-        color: #fff;
-        :local(.content),
-        :local(.title) {
-            color: #fff;
-        }
-    }
-    &:local(.lightOrange) {
-        background-color: $color-light-orange;
-        :local(.content),
-        :local(.title) {
-            color: #000;
-        }
-    }
-    &:local(.lime) {
-        background-color: $color-lime;
-        color: #fff;
-        :local(.content),
-        :local(.title) {
-            color: #fff;
-        }
-    }
-    &:local(.lightLime) {
-        background-color: $color-light-lime;
-        :local(.content),
-        :local(.title) {
-            color: #000;
-        }
-    }
-
-    :local(.title) {
-        &:local(.regular) {
-            font-family: "Open Sans";
-            font-weight: bold;
-            font-size: 21px;
-            font-style: normal;
-            line-height: 1.4;
-            padding-bottom: 10px;
-            border-bottom: 1px solid #e5e3e1;
-        }
-        &:local(.large) {
-            font-family: "Open Sans";
-            font-weight: normal;
-            font-size: 24px;
-            margin: 0;
-            margin-bottom: 20px;
-            font-style: normal;
-        }
-    }
-}
+@import "../style/global.scss";
+
+:local(.contentBox) {
+    font-family: $default-font;
+    text-decoration: none;
+    padding: 20px;
+    width: 100%;
+    display: block;
+    &:local(.link) {
+        color: $color-primary;
+        @include transition(filter 0.3s);
+        &:hover,
+        &:focus {
+            filter: brightness(90%);
+        }
+        &:active {
+            filter: brightness(85%);
+        }
+    }
+    &:local(.default) {
+        background-color: $color-default;
+        :local(.content),
+        :local(.title) {
+            color: #000;
+        }
+    }
+    &:local(.primary) {
+        background-color: $color-primary;
+        color: #fff;
+        :local(.content),
+        :local(.title) {
+            color: #fff;
+        }
+    }
+    &:local(.success) {
+        background-color: $color-success;
+        color: #fff;
+        :local(.content),
+        :local(.title) {
+            color: #fff;
+        }
+    }
+    &:local(.warning) {
+        background-color: $color-warning;
+        color: #fff;
+        :local(.content),
+        :local(.title) {
+            color: #fff;
+        }
+    }
+
+    &:local(.info) {
+        background-color: $color-info;
+        :local(.content),
+        :local(.title) {
+            color: #000;
+        }
+    }
+    &:local(.lightCyan) {
+        background-color: $color-light-cyan;
+        :local(.content),
+        :local(.title) {
+            color: #000;
+        }
+    }
+    &:local(.orange) {
+        background-color: $color-orange;
+        color: #fff;
+        :local(.content),
+        :local(.title) {
+            color: #fff;
+        }
+    }
+    &:local(.lightOrange) {
+        background-color: $color-light-orange;
+        :local(.content),
+        :local(.title) {
+            color: #000;
+        }
+    }
+    &:local(.lime) {
+        background-color: $color-lime;
+        color: #fff;
+        :local(.content),
+        :local(.title) {
+            color: #fff;
+        }
+    }
+    &:local(.lightLime) {
+        background-color: $color-light-lime;
+        :local(.content),
+        :local(.title) {
+            color: #000;
+        }
+    }
+
+    :local(.title) {
+        &:local(.regular) {
+            font-family: "Open Sans";
+            font-weight: bold;
+            font-size: 21px;
+            font-style: normal;
+            line-height: 1.4;
+            padding-bottom: 10px;
+            border-bottom: 1px solid #e5e3e1;
+        }
+        &:local(.large) {
+            font-family: "Open Sans";
+            font-weight: normal;
+            font-size: 24px;
+            margin: 0;
+            margin-bottom: 20px;
+            font-style: normal;
+        }
+    }
+}

package/dist/components/Dialog.md

@@ -1,6 +1,6 @@
-Dialog example:
-
-
-```html
-<Dialog onClickOutside={() => {console.log('clicked outside')}} closeButton>Dialog title<p>dialog paragraph</p></Dialog>
+Dialog example:
+
+
+```html
+<Dialog onClickOutside={() => {console.log('clicked outside')}} closeButton>Dialog title<p>dialog paragraph</p></Dialog>
 ```

package/dist/components/Dialog.module.scss

@@ -1,78 +1,78 @@
-@import "../style/global.scss";
-
-:local(.hidden) {
-    width: 0;
-    height: 0;
-    border: none;
-    position: absolute;
-    padding: 0;
-}
-
-:local(.dialogOverlay) {
-    display: flex;
-    flex-wrap: wrap;
-    position: fixed;
-    width: 100%;
-    background: rgba(0, 0, 0, 0.25);
-    height: 100%;
-    top: 0;
-    left: 0;
-    align-content: center;
-    padding: 8px 28px;
-    z-index: 2;
-    justify-content: center;
-    @media (min-width: $screen-md) {
-        padding: 36px;
-    }
-
-    :local(.dialogContent) {
-        @include calc("max-height", "100% - 128px");
-        @include box-shadow(
-            0 11px 15px -7px rgba(0, 0, 0, 0.2),
-            0 24px 38px 3px rgba(0, 0, 0, 0.14),
-            0 9px 46px 8px rgba(0, 0, 0, 0.12)
-        );
-        max-width: 540px;
-        width: 100%;
-        background-color: #fff;
-        overflow: auto;
-        position: relative;
-        &:not(:local(.noPadding)) {
-            padding: 30px 15px;
-            @media only screen and (min-width: $screen-sm) {
-                padding: 60px 40px;
-            }
-        }
-        @media (min-width: $screen-md) {
-            @include calc("width", "100% - 128px");
-            max-height: 100%;
-        }
-        :local(.closeButton) {
-            background: none;
-            border: none;
-            color: $color-primary;
-            display: inline-block;
-            position: absolute;
-            right: 7px;
-            top: 4px;
-            text-decoration: underline;
-            font-size: 19px;
-            cursor: pointer;
-            @media only screen and (min-width: $screen-sm) {
-                right: 15px;
-                top: 10px;
-            }
-            &:hover {
-                text-decoration: none;
-            }
-            &::after {
-                font-family: "Helvetica", "Arial", sans-serif;
-                display: inline-block;
-                content: "\00d7";
-                font-size: 30px;
-                line-height: 20px;
-                margin-left: 5px;
-            }
-        }
-    }
-}
+@import "../style/global.scss";
+
+:local(.hidden) {
+    width: 0;
+    height: 0;
+    border: none;
+    position: absolute;
+    padding: 0;
+}
+
+:local(.dialogOverlay) {
+    display: flex;
+    flex-wrap: wrap;
+    position: fixed;
+    width: 100%;
+    background: rgba(0, 0, 0, 0.25);
+    height: 100%;
+    top: 0;
+    left: 0;
+    align-content: center;
+    padding: 8px 28px;
+    z-index: 2;
+    justify-content: center;
+    @media (min-width: $screen-md) {
+        padding: 36px;
+    }
+
+    :local(.dialogContent) {
+        @include calc("max-height", "100% - 128px");
+        @include box-shadow(
+            0 11px 15px -7px rgba(0, 0, 0, 0.2),
+            0 24px 38px 3px rgba(0, 0, 0, 0.14),
+            0 9px 46px 8px rgba(0, 0, 0, 0.12)
+        );
+        max-width: 540px;
+        width: 100%;
+        background-color: #fff;
+        overflow: auto;
+        position: relative;
+        &:not(:local(.noPadding)) {
+            padding: 30px 15px;
+            @media only screen and (min-width: $screen-sm) {
+                padding: 60px 40px;
+            }
+        }
+        @media (min-width: $screen-md) {
+            @include calc("width", "100% - 128px");
+            max-height: 100%;
+        }
+        :local(.closeButton) {
+            background: none;
+            border: none;
+            color: $color-primary;
+            display: inline-block;
+            position: absolute;
+            right: 7px;
+            top: 4px;
+            text-decoration: underline;
+            font-size: 19px;
+            cursor: pointer;
+            @media only screen and (min-width: $screen-sm) {
+                right: 15px;
+                top: 10px;
+            }
+            &:hover {
+                text-decoration: none;
+            }
+            &::after {
+                font-family: "Helvetica", "Arial", sans-serif;
+                display: inline-block;
+                content: "\00d7";
+                font-size: 30px;
+                line-height: 20px;
+                margin-left: 5px;
+            }
+        }
+    }
+}

package/dist/components/DragAndDropFileInput.js

@@ -13,6 +13,8 @@ var _propTypes = _interopRequireDefault(require("prop-types"));
 
 var _Button = _interopRequireDefault(require("./Button"));
 
+var _ErrorMessage = _interopRequireDefault(require("./ErrorMessage"));
+
 var _DragAndDropFileInputModule = _interopRequireDefault(require("./DragAndDropFileInput.module.scss"));
 
 function _interopRequireDefault(obj) { return obj && obj.__esModule ? obj : { default: obj }; }
@@ -167,9 +169,10 @@ var DragAndDropFileInput = /*#__PURE__*/function (_React$Component) {
           return _this2.handleAddButtonOnClick();
         },
         content: buttonContent
-      })) : '') : ''), this.props.contentOnly ? /*#__PURE__*/_react.default.createElement("span", null, this.renderValueAsText(this.props.selectedFileName, this.props.defaultContent)) : '', /*#__PURE__*/_react.default.createElement("span", {
-        className: _DragAndDropFileInputModule.default.errorMessage
-      }, this.props.errorMessage ? this.props.errorMessage : ''));
+      })) : '') : ''), this.props.contentOnly ? /*#__PURE__*/_react.default.createElement("span", null, this.renderValueAsText(this.props.selectedFileName, this.props.defaultContent)) : '', /*#__PURE__*/_react.default.createElement(_ErrorMessage.default, {
+        content: this.props.errorMessage,
+        theme: this.props.theme
+      }));
     }
   }]);
 
@@ -190,7 +193,8 @@ DragAndDropFileInput.propTypes = {
   defaultContent: _propTypes.default.string,
   hasErrors: _propTypes.default.bool,
   errorMessage: _propTypes.default.oneOfType([_propTypes.default.string, _propTypes.default.arrayOf(_propTypes.default.oneOfType([_propTypes.default.string, _propTypes.default.object]))]),
-  mandatory: _propTypes.default.bool
+  mandatory: _propTypes.default.bool,
+  theme: _propTypes.default.object
 };
 DragAndDropFileInput.defaultProps = {
   label: '',

package/dist/components/DragAndDropFileInput.md

@@ -1,13 +1,13 @@
-Drag and drop file input examples:
-
-```js
-<DragAndDropFileInput id="dragAndDropInput-1" label="Input without selected file" buttonContent="Velg fil" onSelectChange={() => console.log('Select change')} onDragAndDropChange={() => console.log('Drag and drop change')}  />
-
-<DragAndDropFileInput id="dragAndDropInput-2" label="Input with selected file" buttonContent="Velg fil" selectedFileName="important-file.xml" onSelectChange={() => console.log('Select change')} onDragAndDropChange={() => console.log('Drag and drop change')}  />
-
-<DragAndDropFileInput id="dragAndDropInput-3" label="Input with selected file and buttonContentWhenSelectedFile" buttonContent="Velg fil" buttonContentWhenSelectedFile="Velg annen fil" selectedFileName="important-file.xml" onSelectChange={() => console.log('Select change')} onDragAndDropChange={() => console.log('Drag and drop change')}  />
-
-<DragAndDropFileInput id="dragAndDropInput-4" label="Input with selected file and error message" buttonContent="Velg fil" buttonContentWhenSelectedFile="Velg annen fil" selectedFileName="wrong-file.xml" onSelectChange={() => console.log('Select change')} onDragAndDropChange={() => console.log('Drag and drop change')} hasErrors errorMessage="Filen må være midre enn 15MB" />
-
-<DragAndDropFileInput id="dragAndDropInput-5" label="Input with selected file and contentOnly" buttonContent="Velg fil" selectedFileName="important-file2.xml" onSelectChange={() => console.log('Select change')} onDragAndDropChange={() => console.log('Drag and drop change')} contentOnly={true} />
-```
+Drag and drop file input examples:
+
+```js
+<DragAndDropFileInput id="dragAndDropInput-1" label="Input without selected file" buttonContent="Velg fil" onSelectChange={() => console.log('Select change')} onDragAndDropChange={() => console.log('Drag and drop change')}  />
+
+<DragAndDropFileInput id="dragAndDropInput-2" label="Input with selected file" buttonContent="Velg fil" selectedFileName="important-file.xml" onSelectChange={() => console.log('Select change')} onDragAndDropChange={() => console.log('Drag and drop change')}  />
+
+<DragAndDropFileInput id="dragAndDropInput-3" label="Input with selected file and buttonContentWhenSelectedFile" buttonContent="Velg fil" buttonContentWhenSelectedFile="Velg annen fil" selectedFileName="important-file.xml" onSelectChange={() => console.log('Select change')} onDragAndDropChange={() => console.log('Drag and drop change')}  />
+
+<DragAndDropFileInput id="dragAndDropInput-4" label="Input with selected file and error message" buttonContent="Velg fil" buttonContentWhenSelectedFile="Velg annen fil" selectedFileName="wrong-file.xml" onSelectChange={() => console.log('Select change')} onDragAndDropChange={() => console.log('Drag and drop change')} hasErrors errorMessage="Filen må være midre enn 15MB" />
+
+<DragAndDropFileInput id="dragAndDropInput-5" label="Input with selected file and contentOnly" buttonContent="Velg fil" selectedFileName="important-file2.xml" onSelectChange={() => console.log('Select change')} onDragAndDropChange={() => console.log('Drag and drop change')} contentOnly={true} />
+```

package/dist/components/DragAndDropFileInput.module.scss

@@ -1,45 +1,36 @@
-@import "../style/global.scss";
-
-:local(.dragAndDropFileInput) {
-  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;
-  }
-
-  :local(.dragAndDropContainer) {
-    @include transition(all 0.1s ease-in-out);
-    border: 2px dashed #ccc;
-    border-radius: 20px;
-    width: 100%;
-    padding: 20px;
-    text-align: center;
-
-    input {
-      display: none;
-    }
-
-    button {
-      margin: 14px 0 0;
-    }
-
-    &:local(.highlighted) {
-      background: $color-default;
-      border-color: $color-dark-blue;
-    }
-  }
-  :local(.errorMessage) {
-    color: $color-error-text;
-    font-size: 19px;
-    font-weight: 400;
-    line-height: 1.6;
-    font-family: "Open Sans", sans-serif;
-    font-style: italic;
-    overflow-wrap: break-word;
-  }
-}
+@import "../style/global.scss";
+
+:local(.dragAndDropFileInput) {
+  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;
+  }
+
+  :local(.dragAndDropContainer) {
+    @include transition(all 0.1s ease-in-out);
+    border: 2px dashed #ccc;
+    border-radius: 20px;
+    width: 100%;
+    padding: 20px;
+    text-align: center;
+
+    input {
+      display: none;
+    }
+
+    button {
+      margin: 14px 0 0;
+    }
+
+    &:local(.highlighted) {
+      background: $color-default;
+      border-color: $color-dark-blue;
+    }
+  }
+}

package/dist/components/ErrorMessage.js

@@ -0,0 +1,80 @@
+"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 = _interopRequireDefault(require("react"));
+
+var _propTypes = _interopRequireDefault(require("prop-types"));
+
+var _theme = require("../functions/theme");
+
+var _ErrorMessageModule = _interopRequireDefault(require("./ErrorMessage.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 ErrorMessage = /*#__PURE__*/function (_React$Component) {
+  _inherits(ErrorMessage, _React$Component);
+
+  var _super = _createSuper(ErrorMessage);
+
+  function ErrorMessage() {
+    _classCallCheck(this, ErrorMessage);
+
+    return _super.apply(this, arguments);
+  }
+
+  _createClass(ErrorMessage, [{
+    key: "getThemeErrorMessageStyle",
+    value: function getThemeErrorMessageStyle(theme) {
+      return {
+        color: (0, _theme.getThemePaletteBackgroundColor)(theme, 'warning')
+      };
+    }
+  }, {
+    key: "render",
+    value: function render() {
+      return /*#__PURE__*/_react.default.createElement("span", {
+        className: _ErrorMessageModule.default.errorMessage,
+        style: this.getThemeErrorMessageStyle(this.props.theme)
+      }, this.props.content ? this.props.content : '');
+    }
+  }]);
+
+  return ErrorMessage;
+}(_react.default.Component);
+
+ErrorMessage.propTypes = {
+  /** Text content inside error message */
+  content: _propTypes.default.oneOfType([_propTypes.default.string, _propTypes.default.arrayOf(_propTypes.default.oneOfType([_propTypes.default.string, _propTypes.default.object]))]),
+  theme: _propTypes.default.object
+};
+ErrorMessage.defaultProps = {
+  content: ''
+};
+var _default = ErrorMessage;
+exports.default = _default;

package/dist/components/ErrorMessage.md

@@ -0,0 +1,15 @@
+Error message example:
+
+```js
+<ErrorMessage content="Wrong value" />
+```
+
+
+Themed error message example:
+
+```js
+import customTheme from 'data/customTheme';
+<React.Fragment>
+    <ErrorMessage content="Wrong value" theme={customTheme} />
+</React.Fragment>
+```

package/dist/components/ErrorMessage.module.scss

@@ -0,0 +1,16 @@
+@import "../style/global.scss";
+
+:local(.errorMessage) {
+    display: block;
+    color: $color-error-text;
+    font-size: 16px;
+    font-weight: 400;
+    line-height: 1.2;
+    margin: 4px 0;
+    font-family: "Open Sans", sans-serif;
+    font-style: italic;
+    overflow-wrap: break-word;
+    @media only screen and (min-width: $screen-sm) {
+        font-size: 19px;
+    }
+}