dibk-design 4.2.1 → 4.3.1

package/dist/components/Button.js

@@ -46,9 +46,10 @@ const Button = props => {
   delete buttonProps.color;
   delete buttonProps.content;
   delete buttonProps.arrow;
+  delete buttonProps.noMargin;
   const buttonColor = (props === null || props === void 0 ? void 0 : props.inputType) === "radio" ? props.defaultChecked ? "primary" : "default" : props.color;
   const themeStyle = props.theme ? getThemeStyle(props.theme, buttonColor) : null;
-  const className = (0, _helpers.classNameArrayToClassNameString)([_ButtonModule.default.button, _ButtonModule.default[buttonColor], _ButtonModule.default[props.size], getArrowClass(props.arrow), props.theme && _ButtonModule.default.hasTheme, props.noHover || (props === null || props === void 0 ? void 0 : props.inputType) === "radio" ? _ButtonModule.default.noHover : null, props.rounded && _ButtonModule.default.rounded, props.hasErrors && _ButtonModule.default.hasErrors, props.disabled && _ButtonModule.default.disabled]);
+  const className = (0, _helpers.classNameArrayToClassNameString)([_ButtonModule.default.button, _ButtonModule.default[buttonColor], _ButtonModule.default[props.size], getArrowClass(props.arrow), props.theme && _ButtonModule.default.hasTheme, props.noHover || (props === null || props === void 0 ? void 0 : props.inputType) === "radio" ? _ButtonModule.default.noHover : null, props.rounded && _ButtonModule.default.rounded, props.hasErrors && _ButtonModule.default.hasErrors, props.disabled && _ButtonModule.default.disabled, props.noMargin && _ButtonModule.default.noMargin]);
   const renderReactLinkElements = childElements => {
     const childElementsthroughFragments = (0, _helpers.cloneThroughFragments)(childElements);
     return childElementsthroughFragments.map((childElement, index) => {
@@ -115,7 +116,8 @@ Button.propTypes = {
   noHover: _propTypes.default.bool,
   rounded: _propTypes.default.bool,
   href: _propTypes.default.string,
-  onClick: _propTypes.default.func
+  onClick: _propTypes.default.func,
+  noMargin: _propTypes.default.bool
 };
 Button.defaultProps = {
   color: "default",
@@ -123,6 +125,7 @@ Button.defaultProps = {
   disabled: false,
   hasErrors: false,
   noHover: false,
-  arrow: "none"
+  arrow: "none",
+  noMargin: false
 };
 var _default = exports.default = Button;

package/dist/components/Button.module.scss

@@ -46,13 +46,16 @@
   text-align: center;
   text-decoration: none;
   display: inline-block;
-  margin-right: 5px;
-  margin-bottom: 5px;
+
   font-size: 17px;
   font-weight: 500;
   @media only screen and (min-width: $screen-sm) {
     font-size: 20px;
   }
+  &:not(.noMargin) {
+    margin-right: 5px;
+    margin-bottom: 8px;
+  }
 
   &.hasTheme {
     &:hover,

package/dist/components/ErrorMessage.module.scss

@@ -16,7 +16,7 @@
     line-height: 24px;
     letter-spacing: 0.01em;
     color: $color-error;
-    margin: 12px 0 0;
+    margin: 4px 0 0;
     animation: 1000ms cubic-bezier(0.22, 1, 0.36, 1) 0s 1 normal none running messageIn;
     .errorSign {
         width: 20px;

package/dist/components/InfoBox.js

@@ -0,0 +1,34 @@
+"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 _InfoBoxModule = _interopRequireDefault(require("./InfoBox.module.scss"));
+var _infoSign = _interopRequireDefault(require("../assets/svg/info-sign.svg?url"));
+function _interopRequireDefault(obj) { return obj && obj.__esModule ? obj : { default: obj }; }
+const InfoBox = props => {
+  const getThemeInfoBoxStyle = () => {
+    return {
+      borderColor: (0, _theme.getThemePaletteBackgroundColor)(props.theme, "secondary-light")
+    };
+  };
+  return _react.default.createElement("div", {
+    className: _InfoBoxModule.default.infoBox,
+    style: getThemeInfoBoxStyle()
+  }, _react.default.createElement("img", {
+    src: _infoSign.default,
+    alt: "",
+    className: _InfoBoxModule.default.infoSign
+  }), props.children);
+};
+InfoBox.propTypes = {
+  theme: _propTypes.default.object
+};
+InfoBox.defaultProps = {
+  children: ""
+};
+var _default = exports.default = InfoBox;

package/dist/components/InfoBox.module.scss

@@ -0,0 +1,43 @@
+@import "../style/global.scss";
+
+@keyframes messageIn {
+    0% {
+        opacity: 0;
+        transform: translateY(2em);
+    }
+}
+
+.infoBox {
+    background-color: #fff;
+    border: 1px solid $color-secondary-light;
+    padding: 24px 24px 24px calc(1.2em + 48px);
+    font-family: $default-font;
+    animation: 1000ms cubic-bezier(0.22, 1, 0.36, 1) 0s 1 normal none running messageIn;
+    position: relative;
+    .infoSign {
+        position: absolute;
+        top: 24px;
+        left: 24px;
+        width: 24px;
+        height: 24px;
+        display: inline-block;
+        vertical-align: middle;
+        background-color: $color-warning-x-light;
+        border-left-color: $color-warning;
+    }
+    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/InputField.js

@@ -11,6 +11,7 @@ var _Label = _interopRequireDefault(require("./Label"));
 var _ErrorMessage = _interopRequireDefault(require("./ErrorMessage"));
 var _theme = require("../functions/theme");
 var _generators = require("../functions/generators");
+var _helpers = require("../functions/helpers");
 var _asterisk = _interopRequireDefault(require("../assets/svg/asterisk.svg?url"));
 var _InputFieldModule = _interopRequireDefault(require("./InputField.module.scss"));
 function _interopRequireDefault(obj) { return obj && obj.__esModule ? obj : { default: obj }; }
@@ -71,7 +72,7 @@ const InputField = props => {
     })
   };
   return _react.default.createElement("div", {
-    className: "".concat(_InputFieldModule.default.inputField, " ").concat(_InputFieldModule.default[props.type])
+    className: (0, _helpers.classNameArrayToClassNameString)([_InputFieldModule.default.inputField, _InputFieldModule.default[props.type], props.noMargin && _InputFieldModule.default.noMargin])
   }, _react.default.createElement(_Label.default, {
     htmlFor: props.id
   }, props.label, props.required && _react.default.createElement("img", {
@@ -120,7 +121,8 @@ InputField.propTypes = {
   "aria-autocomplete": _propTypes.default.oneOf(["none", "inline", "list", "both"]),
   hasErrors: _propTypes.default.bool,
   errorMessage: _propTypes.default.oneOfType([_propTypes.default.string, _propTypes.default.arrayOf(_propTypes.default.oneOfType([_propTypes.default.string, _propTypes.default.object]))]),
-  theme: _propTypes.default.object
+  theme: _propTypes.default.object,
+  noMargin: _propTypes.default.bool
 };
 InputField.defaultProps = {
   onChange: () => {
@@ -137,6 +139,7 @@ InputField.defaultProps = {
   placeholder: "",
   defaultContent: "",
   hasErrors: false,
-  errorMessage: ""
+  errorMessage: "",
+  noMargin: false
 };
 var _default = exports.default = InputField;

package/dist/components/InputField.module.scss

@@ -2,6 +2,9 @@
 
 .inputField {
     font-size: 18px;
+    &:not(.noMargin) {
+        margin-bottom: 8px;
+    }
     > div {
         display: block;
     }

package/dist/index.js

@@ -87,6 +87,12 @@ Object.defineProperty(exports, "Header", {
     return _Header.default;
   }
 });
+Object.defineProperty(exports, "InfoBox", {
+  enumerable: true,
+  get: function () {
+    return _InfoBox.default;
+  }
+});
 Object.defineProperty(exports, "InputField", {
   enumerable: true,
   get: function () {
@@ -209,6 +215,7 @@ var _ErrorBox = _interopRequireDefault(require("./components/ErrorBox"));
 var _ErrorMessage = _interopRequireDefault(require("./components/ErrorMessage"));
 var _Footer = _interopRequireDefault(require("./components/Footer"));
 var _Header = _interopRequireDefault(require("./components/Header"));
+var _InfoBox = _interopRequireDefault(require("./components/InfoBox"));
 var _InputField = _interopRequireDefault(require("./components/InputField"));
 var _Label = _interopRequireDefault(require("./components/Label"));
 var _List = _interopRequireDefault(require("./components/List"));

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "dibk-design",
-  "version": "4.2.1",
+  "version": "4.3.1",
   "main": "dist/index.js",
   "module": "dist/index.js",
   "files": [