dibk-design 0.4.50 → 0.4.53

package/dist/components/Button.js

@@ -83,13 +83,18 @@ var Button = /*#__PURE__*/function (_React$Component) {
   }, {
     key: "render",
     value: function render() {
+      var _this$props$href;
+
       var buttonProps = _objectSpread({}, this.props);
 
       delete buttonProps.noHover;
       delete buttonProps.rounded;
       var themeStyle = this.props.theme ? this.getThemeStyle(this.props.theme, this.props.color) : null;
       var className = "".concat(_ButtonModule.default.button, " ").concat(_ButtonModule.default[this.props.color], " ").concat(_ButtonModule.default[this.props.size], " ").concat(this.getArrowClass(), " ").concat(this.props.theme ? _ButtonModule.default.hasTheme : '', " ").concat(this.props.noHover ? _ButtonModule.default.noHover : '', " ").concat(this.props.rounded ? _ButtonModule.default.rounded : '');
-      return /*#__PURE__*/_react.default.createElement("button", _extends({}, buttonProps, {
+      return (_this$props$href = this.props.href) !== null && _this$props$href !== void 0 && _this$props$href.length ? /*#__PURE__*/_react.default.createElement("a", _extends({}, buttonProps, {
+        className: className,
+        style: themeStyle
+      }), this.props.content) : /*#__PURE__*/_react.default.createElement("button", _extends({}, buttonProps, {
         className: className,
         style: themeStyle
       }), this.props.content);
@@ -108,7 +113,8 @@ Button.propTypes = {
   theme: _propTypes.default.object,
   disabled: _propTypes.default.bool,
   noHover: _propTypes.default.bool,
-  rounded: _propTypes.default.bool
+  rounded: _propTypes.default.bool,
+  href: _propTypes.default.string
 };
 Button.defaultProps = {
   content: 'button',

package/dist/components/Button.md

@@ -5,6 +5,7 @@ Regular buttons example:
 <Button content="Click me" color="primary" />
 <Button content="Click me" color="default" disabled />
 <Button content="Click me" color="primary" disabled />
+<Button content="Link button" color="primary" href="#" />
 ```
 
 Rounded buttons example:

package/dist/components/Button.module.scss

@@ -38,7 +38,7 @@
   font-family: "Altis", sans-serif;
   border-style: solid;
   border-width: 1px;
-  $border-color: $color-primary;
+  border-color: $color-primary;
   cursor: pointer;
   line-height: 1;
   position: relative;
@@ -64,6 +64,13 @@
     }
   }
 
+  &:focus-visible {
+    outline-color: #005fcc;
+    outline-style: auto;
+    outline-width: 2px;
+    outline-offset: 0px;
+  }
+
   &:local(.regular) {
     padding: 14px 24px;
     @media only screen and (min-width: $screen-sm) {

package/dist/components/CheckBoxInput.module.scss

@@ -3,6 +3,7 @@
 :local(.checkBoxInput) {
   display: flex;
   margin-right: 1em;
+  border: 1px solid transparent;
 
   &:not(:local(.contentOnly)):not(:local(.disabled)) {
     cursor: pointer;
@@ -17,6 +18,11 @@
     }
   }
 
+  &:focus-within{    
+    border-color: #072938;
+    outline-color: #54acb8;
+  }
+
   input[type="checkbox"] {
     opacity: 0;
     position: absolute;

package/dist/components/ContentBox.module.scss

@@ -96,7 +96,7 @@
 
     :local(.title) {
         &:local(.regular) {
-            font-family: "Open Sans";
+            font-family: $default-font;
             font-weight: bold;
             font-size: 21px;
             font-style: normal;
@@ -105,7 +105,7 @@
             border-bottom: 1px solid #e5e3e1;
         }
         &:local(.large) {
-            font-family: "Open Sans";
+            font-family: $default-font;
             font-weight: normal;
             font-size: 24px;
             margin: 0;

package/dist/components/DragAndDropFileInput.module.scss

@@ -5,7 +5,7 @@
     cursor: pointer;
     font-size: 18px;
     margin: 0 0 4px;
-    font-family: "Open Sans", arial, sans-serif;
+    font-family: $default-font;
     line-height: 1.3;
     font-weight: bold;
     font-style: normal;

package/dist/components/ErrorBox.js

@@ -0,0 +1,44 @@
+"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");
+
+var _ErrorBoxModule = _interopRequireDefault(require("./ErrorBox.module.scss"));
+
+function _interopRequireDefault(obj) { return obj && obj.__esModule ? obj : { default: obj }; }
+
+// Dependencies
+// Functions
+// Stylesheets
+var ErrorBox = function ErrorBox(_ref) {
+  var theme = _ref.theme,
+      children = _ref.children;
+
+  var getThemeErrorBoxStyle = function getThemeErrorBoxStyle() {
+    return {
+      borderColor: (0, _theme.getThemePaletteBackgroundColor)(theme, 'warning')
+    };
+  };
+
+  return /*#__PURE__*/_react.default.createElement("div", {
+    className: _ErrorBoxModule.default.errorBox,
+    style: getThemeErrorBoxStyle()
+  }, children);
+};
+
+ErrorBox.propTypes = {
+  theme: _propTypes.default.object
+};
+ErrorBox.defaultProps = {
+  children: ''
+};
+var _default = ErrorBox;
+exports.default = _default;

package/dist/components/ErrorBox.md

@@ -0,0 +1,27 @@
+Error box example:
+
+```js
+<ErrorBox>
+<h3>Du kan ikke signere erklæringen før alle opplysningene er fylt ut:</h3>
+<ul>
+    <li>Du må krysse av for at foretaket erklærer ansvar i henhold til plan- og bygningsloven.</li>
+    <li>Du må fylle ut mobil- eller telefonnummeret til kontaktpersonen.</li>
+</ul>
+</ErrorBox>
+```
+
+
+Themed error box example:
+
+```js
+import customTheme from 'data/customTheme';
+<React.Fragment>
+    <ErrorBox theme={customTheme}>
+    <h3>Du kan ikke signere erklæringen før alle opplysningene er fylt ut:</h3>
+    <ul>
+        <li>Du må krysse av for at foretaket erklærer ansvar i henhold til plan- og bygningsloven.</li>
+        <li>Du må fylle ut mobil- eller telefonnummeret til kontaktpersonen.</li>
+    </ul>
+</ErrorBox>
+</React.Fragment>
+```

package/dist/components/ErrorBox.module.scss

@@ -0,0 +1,25 @@
+@import "../style/global.scss";
+
+:local(.errorBox) {
+    @include box-shadow(0 2px 3px rgb(0 0 0 / 18%));
+    border-left: 12px solid $color-error;
+    background: white;
+    padding: 30px 33px 46px 21px;
+    font-family: $default-font;
+    margin: 0;
+    h1,
+    h2,
+    h3,
+    h4 {
+        font-size: 20px;
+        font-weight: 500;
+        line-height: 1.3;
+        margin: 0;
+        @media only screen and (min-width: $screen-sm) {
+            font-size: 24px;
+        }
+    }
+    ul {
+        padding-left: 20px;
+    }
+}

package/dist/components/ErrorMessage.module.scss

@@ -7,7 +7,7 @@
     font-weight: 400;
     line-height: 1.2;
     margin: 4px 0;
-    font-family: "Open Sans", sans-serif;
+    font-family: $default-font;
     font-style: italic;
     overflow-wrap: break-word;
     @media only screen and (min-width: $screen-sm) {

package/dist/components/Header.module.scss

@@ -41,7 +41,7 @@
 			}
 		}
 		&:local(.size-3) {
-			font-family: "Open Sans", arial, sans-serif;
+			font-family: $default-font;
 			font-size: 19px;
 			font-style: normal;
 			font-weight: bold;
@@ -51,7 +51,7 @@
 			}
 		}
 		&:local(.size-4) {
-			font-family: "Open Sans", arial, sans-serif;
+			font-family: $default-font;
 			font-size: 17px;
 			font-style: italic;
 			font-weight: normal;

package/dist/components/Label.module.scss

@@ -1,3 +1,5 @@
+@import "../style/global.scss";
+
 :local(.label) {
     color: #000;
     display: block;
@@ -5,7 +7,7 @@
     font-weight: bold;
     line-height: 1.2;
     margin-bottom: 2px;
-    font-family: "Open Sans", sans-serif;
+    font-family: $default-font;
     overflow-wrap: break-word;
     &:local(.inline) {
         display: inline-block;

package/dist/components/NavigationBar.module.scss

@@ -107,7 +107,7 @@
 					color: #fff;
 					text-transform: uppercase;
 					text-decoration: none;
-					font-family: "Open Sans";
+					font-family: $default-font;
 					padding: 10px 0;
 					display: block;
 					border-bottom: 1px solid $color-primary;
@@ -123,7 +123,7 @@
 							color: #fff;
 							text-transform: none;
 							text-decoration: none;
-							font-family: "Open Sans";
+							font-family: $default-font;
 							padding: 10px 0;
 							margin-left: 20px;
 							display: block;

package/dist/components/RadioButtonInput.module.scss

@@ -4,6 +4,7 @@
   display: flex;
   cursor: pointer;
   margin-right: 1em;
+  border: 1px solid transparent;
 
   &:not(:local(.contentOnly)):not(:local(.disabled)) {
     cursor: pointer;
@@ -19,6 +20,11 @@
     }
   }
 
+  &:focus-within{    
+    border-color: #072938;
+    outline-color: #54acb8;
+  }
+
   input[type="radio"] {
     opacity: 0;
     position: absolute;

package/dist/index.js

@@ -57,6 +57,12 @@ Object.defineProperty(exports, "DragAndDropFileInput", {
     return _DragAndDropFileInput.default;
   }
 });
+Object.defineProperty(exports, "ErrorBox", {
+  enumerable: true,
+  get: function get() {
+    return _ErrorBox.default;
+  }
+});
 Object.defineProperty(exports, "ErrorMessage", {
   enumerable: true,
   get: function get() {
@@ -184,6 +190,8 @@ var _Dialog = _interopRequireDefault(require("./components/Dialog"));
 
 var _DragAndDropFileInput = _interopRequireDefault(require("./components/DragAndDropFileInput"));
 
+var _ErrorBox = _interopRequireDefault(require("./components/ErrorBox"));
+
 var _ErrorMessage = _interopRequireDefault(require("./components/ErrorMessage"));
 
 var _Footer = _interopRequireDefault(require("./components/Footer"));

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

@@ -1,2 +1,2 @@
-$default-font: "Open Sans";
+$default-font: "Open Sans", arial, sans-serif;
 $heading-font: "Altis"

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "dibk-design",
-  "version": "0.4.50",
+  "version": "0.4.53",
   "private": false,
   "main": "dist/index.js",
   "module": "dist/index.js",