dibk-design 3.12.0 → 4.0.2

package/dist/assets/svg/info-sign.svg

@@ -0,0 +1 @@
+<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 20 20" role="presentation"><path d="M10 0C4.4775 0 0 4.4775 0 10C0 15.5225 4.4775 20 10 20C15.5225 20 20 15.5225 20 10C20 4.4775 15.5225 0 10 0ZM8.30583 13.3417C8.77583 11.8508 9.66583 10.065 9.82333 9.61333C10.0508 8.9575 9.6475 8.66667 8.37333 9.7875L8.09 9.25417C9.54333 7.67333 12.5358 7.31583 11.5175 9.765C10.8817 11.2942 10.4267 12.3267 10.1667 13.1233C9.7875 14.2842 10.745 13.8133 11.6825 12.9475C11.81 13.1558 11.8517 13.2233 11.9792 13.4633C9.8975 15.445 7.58667 15.62 8.30583 13.3417ZM12.2575 6.53417C11.8142 6.91167 11.1575 6.90333 10.79 6.51583C10.4225 6.12833 10.4842 5.50917 10.9267 5.13167C11.37 4.75417 12.0267 4.76333 12.3942 5.15C12.76 5.53833 12.7 6.1575 12.2575 6.53417Z" style="fill: rgb(0, 48, 69);"></path></svg>

package/dist/components/Accordion.module.scss

@@ -171,7 +171,7 @@
             padding: 15px 30px;
         }
         &:focus-visible {
-            outline-color: $color-focus-outline;
+            outline-color: $color-primary;
             outline-style: auto;
             outline-width: 2px;
             outline-offset: 0px;

package/dist/components/Button.module.scss

@@ -31,12 +31,12 @@
   @include appearance(none);
   @include border-radius(0);
   @include transition(
-    filter 300ms ease-out,
-    background-color 300ms ease-out,
-    color 300ms ease-out,
-    border-color 300ms ease-out
+    filter 200ms $default-transition,
+    background-color 200ms $default-transition,
+    color 200ms $default-transition,
+    border-color 200ms $default-transition
   );
-  font-family: "Altis", sans-serif;
+  font-family: $default-font;
   border-style: solid;
   border-width: 1px;
   border-color: $color-primary;
@@ -66,19 +66,17 @@
     }
   }
 
+  &:focus {
+    outline-offset: 3px;
+  }
+
   &:focus-visible,
   &:focus-within {
-    outline-color: $color-focus-outline;
-    outline-style: auto;
-    outline-width: 2px;
-    outline-offset: 0px;
+    outline-color: $color-primary;
   }
 
   &.regular {
-    padding: 14px 24px;
-    @media only screen and (min-width: $screen-sm) {
-      padding: 17px 32px;
-    }
+    padding: 16px 24px;
   }
 
   &.small {
@@ -92,18 +90,26 @@
   }
 
   &.default {
-    background-color: #fff;
-    color: $color-primary;
+    background-color: transparent;
+    color: $color-primary-text;
+    border-color: $color-secondary-light;
     &:not(.hasTheme) {
       &:hover:not(.noHover),
-      &:focus-visible,
-      &:focus-within,
-      &:active {
-        background-color: $color-primary;
-        color: #fff;
+      &:focus-visible {
+        background-color: $color-secondary-x-light;
+        color: $color-primary-text;
         &:after,
         &:before {
-          border-color: #fff;
+          border-color: $color-secondary-light;
+        }
+      }
+      &:active:not(.noHover),
+      &:active:hover:not(.noHover) {
+        background-color: $color-secondary-light;
+        color: $color-primary-text;
+        &:after,
+        &:before {
+          border-color: $color-secondary-light;
         }
       }
     }
@@ -114,13 +120,23 @@
     color: #fff;
     &:not(.hasTheme) {
       &:hover:not(.noHover),
-      &:focus-visible,
-      &:active {
-        background-color: #fff;
-        color: $color-primary;
+      &:focus-visible {
+        background-color: $color-primary-light;
+        border-color: $color-primary-light;
+        color: #fff;
         &:after,
         &:before {
-          border-color: $color-primary;
+          border-color: $color-primary-light;
+        }
+      }
+      &:active:not(.noHover),
+      &:active:hover:not(.noHover) {
+        background-color: $color-primary-x-light;
+        border-color: $color-primary-x-light;
+        color: #fff;
+        &:after,
+        &:before {
+          border-color: $color-primary-x-light;
         }
       }
     }
@@ -128,56 +144,40 @@
 
   &:disabled,
   &.disabled {
-    &.hasTheme,
-    &:not(.hasTheme) {
-      &.default {
-        background-color: #fff;
-        cursor: default;
+    &.hasTheme {
+      opacity: 0.6;
+      cursor: default;
+      &:hover,
+      &:focus,
+      &:focus-within,
+      &:active {
         opacity: 0.6;
-        color: #afaba8;
-        border: 1px solid #e5e3e1;
-        &:hover,
-        &:focus,
-        &:focus-within,
-        &:active {
-          background-color: #fff;
-          cursor: default;
-          opacity: 0.6;
-          color: #afaba8;
-          border: 1px solid #e5e3e1;
-          &:before,
-          &:after {
-            border-color: #afaba8;
-          }
-        }
-        &:before,
-        &:after {
-          border-color: #afaba8;
-        }
+        cursor: default;
       }
+    }
+    &:not(.hasTheme) {
+      &.default,
       &.primary {
-        background-color: $color-primary;
+        background-color: $color-secondary-light;
         cursor: default;
-        opacity: 0.6;
         color: #fff;
-        border: 1px solid $color-primary;
-        &:hover,
-        &:focus,
-        &:focus-within,
-        &:active {
-          background-color: $color-primary;
+        border: 1px solid $color-secondary-light;
+        &:hover:not(.noHover),
+        &:focus-visible,
+        &:active:not(.noHover),
+        &:active:hover:not(.noHover) {
+          background-color: $color-secondary-light;
           cursor: default;
-          opacity: 0.6;
           color: #fff;
-          border: 1px solid $color-primary;
+          border: 1px solid $color-secondary-light;
           &:before,
           &:after {
-            border-color: $color-primary;
+            border-color: $color-secondary-light;
           }
         }
         &:before,
         &:after {
-          border-color: $color-primary;
+          border-color: $color-secondary-light;
         }
       }
     }
@@ -195,16 +195,13 @@
   &.hasArrowLeft {
     &:before {
       @include transform(rotate(-135deg));
-      @include calc("top", "50% - 0.4rem");
       content: " ";
       display: inline-block;
-      position: absolute;
-      right: auto;
-      left: 0.55em;
+      margin-right: 1em;
       width: 0.5rem;
       height: 0.5rem;
       vertical-align: middle;
-      border: 2px solid white;
+      border-style: solid;
       border-width: 2px 2px 0 0;
       margin-right: 1em;
       @media only screen and (min-width: $screen-sm) {
@@ -212,14 +209,22 @@
       }
     }
 
-    &:hover {
+    &:hover:not(.noHover),
+    &:focus-visible,
+    &:active:not(.noHover),
+    &:active:hover:not(.noHover) {
       &:before {
         @include animation(pushprev 0.8s linear infinite);
       }
-    }
-    &.default {
-      &:before {
-        border-color: $color-primary;
+      &.default {
+        &:before {
+          border-color: $color-primary;
+        }
+      }
+      &.primary {
+        &:before {
+          border-color: #fff;
+        }
       }
     }
   }
@@ -227,12 +232,9 @@
   &.hasArrowRight {
     &:after {
       @include transform(rotate(45deg));
-      @include calc("top", "50% - 0.4rem");
       content: " ";
       display: inline-block;
-      position: absolute;
-      left: auto;
-      right: 0.55em;
+      margin-left: 1em;
       width: 0.5rem;
       height: 0.5rem;
       vertical-align: middle;
@@ -244,14 +246,22 @@
       }
     }
 
-    &:hover {
+    &:hover:not(.noHover),
+    &:focus-visible,
+    &:active:not(.noHover),
+    &:active:hover:not(.noHover) {
       &:after {
         @include animation(pushnext 0.8s linear infinite);
       }
-    }
-    &.default {
-      &:after {
-        border-color: $color-primary;
+      &.default {
+        &:after {
+          border-color: $color-primary;
+        }
+      }
+      &.primary {
+        &:after {
+          border-color: #fff;
+        }
       }
     }
   }

package/dist/components/CheckBoxIcon.module.scss

@@ -20,10 +20,10 @@
         margin-top: 2px;
         background: white;
         &:not(.hasErrors) {
-            @include box-shadow(0 0 0 1px #6a6262);
+            @include box-shadow(0 0 0 1px $color-primary);
         }
         &.hasErrors {
-            @include box-shadow(0 0 2px 1px $color-error);
+            @include box-shadow(0 0 0 1px $color-error);
         }
     }
 
@@ -36,16 +36,16 @@
         }
         &.showBox {
             &:not(.hasErrors) {
-                @include box-shadow(0 0 0 1px #6a6262);
+                @include box-shadow(0 0 0 1px $color-primary);
             }
             &.hasErrors {
-                @include box-shadow(0 0 2px 1px $color-error);
+                @include box-shadow(0 0 0 1px $color-error);
             }
         }
     }
 
     &.disabled {
-        opacity: 0.5;
+        opacity: 0.4;
         background: rgba(0, 0, 0, 0.25);
         cursor: default;
     }

package/dist/components/CheckBoxInput.js

@@ -36,7 +36,9 @@ const CheckBoxInput = props => {
     "aria-invalid": props.hasErrors ? "true" : null,
     "aria-describedby": props["aria-describedby"]
   };
-  return _react.default.createElement("label", labelProps, !props.contentOnly ? _react.default.createElement(_react.default.Fragment, null, _react.default.createElement(_CheckBoxIcon.default, iconProps), _react.default.createElement("input", inputProps)) : _react.default.createElement(_CheckBoxIcon.default, iconProps), _react.default.createElement("span", null, props.children, props.required && _react.default.createElement("img", {
+  return _react.default.createElement("label", labelProps, !props.contentOnly ? _react.default.createElement(_react.default.Fragment, null, _react.default.createElement(_CheckBoxIcon.default, iconProps), _react.default.createElement("input", inputProps)) : _react.default.createElement(_CheckBoxIcon.default, iconProps), _react.default.createElement("span", {
+    className: _CheckBoxInputModule.default.labelText
+  }, props.children, props.required && _react.default.createElement("img", {
     src: _asterisk.default,
     alt: "",
     className: _CheckBoxInputModule.default.requiredSymbol

package/dist/components/CheckBoxInput.module.scss

@@ -20,6 +20,16 @@
         }
     }
 
+    .labelText {
+        color: $color-primary;
+    }
+
+    &.disabled {
+        .labelText {
+            opacity: 0.4;
+        }
+    }
+
     &.hasErrors {
         span {
             color: $color-error;
@@ -28,7 +38,7 @@
 
     &:focus-within {
         outline-width: 2px;
-        outline-color: $color-focus-outline;
+        outline-color: $color-primary;
         outline-style: auto;
         outline-offset: 1px;
     }

package/dist/components/CheckBoxListItem.js

@@ -11,7 +11,7 @@ var _helpers = require("../functions/helpers");
 var _CheckBoxListItemModule = _interopRequireDefault(require("./CheckBoxListItem.module.scss"));
 function _interopRequireDefault(obj) { return obj && obj.__esModule ? obj : { default: obj }; }
 const CheckBoxListItem = props => {
-  const listItemClassNameArray = [_CheckBoxListItemModule.default.checkBoxListItem, props.checked ? _CheckBoxListItemModule.default.checked : null, props.disabled ? _CheckBoxListItemModule.default.disabled : null, props.compact ? _CheckBoxListItemModule.default.compact : null, props.contentOnly ? _CheckBoxListItemModule.default.contentOnly : null, props.hasErrors ? _CheckBoxListItemModule.default.hasErrors : null];
+  const listItemClassNameArray = [_CheckBoxListItemModule.default.checkBoxListItem, props.checked ? _CheckBoxListItemModule.default.checked : null, props.disabled ? _CheckBoxListItemModule.default.disabled : null, props.compact ? _CheckBoxListItemModule.default.compact : null, props.contentOnly ? _CheckBoxListItemModule.default.contentOnly : null, props.hasErrors ? _CheckBoxListItemModule.default.hasErrors : null, props.theme && _CheckBoxListItemModule.default.hasTheme];
   const listItemClassNameString = (0, _helpers.classNameArrayToClassNameString)(listItemClassNameArray);
   const inputProps = {
     onChange: props.onChange,

package/dist/components/CheckBoxListItem.module.scss

@@ -2,8 +2,8 @@
 
 .checkBoxListItem {
     @include box-sizing(content-box);
-    @include border-radius(5px);
-    @include transition(all 0.1s ease-in-out);
+    @include border-radius(0);
+    @include transition(all $default-transition);
     display: -webkit-box;
     display: -webkit-flex;
     display: -ms-flexbox;
@@ -19,9 +19,12 @@
     color: #000;
 
     &:not(.contentOnly):not(.compact) {
-        @include box-shadow(0 0 2px $color-dark-blue);
+        border: 1px solid $color-secondary-light;
         background: white;
-        margin-bottom: 10px;
+        margin-bottom: 8px;
+        label {
+            padding: 20px;
+        }
     }
 
     &.contentOnly {
@@ -38,12 +41,17 @@
         }
     }
 
-    &.checked:not(.contentOnly):not(.compact):not(.disabled) {
-        @include box-shadow(0 0 0 1px $color-dark-blue, 0 0 4px 0 $color-dark-blue);
+    &.checked:not(.contentOnly):not(.compact):not(.disabled):not(.hasTheme) {
+        background-color: $color-secondary-light;
     }
 
-    &:not(.checked):not(.contentOnly):not(.compact):not(.disabled):hover {
-        @include box-shadow(0 0 6px $color-dark-blue);
+    &:not(.checked):not(.contentOnly):not(.compact):not(.disabled):not(.hasTheme) {
+        &:hover {
+            background-color: $color-secondary-x-light;
+        }
+        &:focus-within {
+            background-color: $color-secondary-x-light;
+        }
     }
 
     label {

package/dist/components/Dialog.module.scss

@@ -1,11 +1,18 @@
 @import "../style/global.scss";
 
+@keyframes modalIn {
+    0% {
+        opacity: 0;
+        transform: translateY(2em);
+    }
+}
+
 .dialogOverlay {
     display: flex;
     flex-wrap: wrap;
     position: fixed;
     width: 100%;
-    background: rgba(0, 0, 0, 0.25);
+    background: rgba(0, 48, 69, 0.4);
     height: 100%;
     top: 0;
     left: 0;
@@ -29,16 +36,12 @@
 
     .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;
+        animation: 1000ms cubic-bezier(0.22, 1, 0.36, 1) 0s 1 normal none running modalIn;
         &:not(.noPadding) {
             padding: 30px 15px;
             @media only screen and (min-width: $screen-sm) {

package/dist/components/DragAndDropFileInput.module.scss

@@ -27,7 +27,7 @@
 
         &.highlighted {
             background: $color-default;
-            border-color: $color-dark-blue;
+            border-color: $color-primary;
         }
     }
 }

package/dist/components/ErrorBox.js

@@ -7,23 +7,31 @@ exports.default = void 0;
 var _react = _interopRequireDefault(require("react"));
 var _propTypes = _interopRequireDefault(require("prop-types"));
 var _theme = require("../functions/theme");
+var _helpers = require("../functions/helpers");
 var _ErrorBoxModule = _interopRequireDefault(require("./ErrorBox.module.scss"));
+var _infoSign = _interopRequireDefault(require("../assets/svg/info-sign.svg?url"));
 function _interopRequireDefault(obj) { return obj && obj.__esModule ? obj : { default: obj }; }
 const ErrorBox = props => {
   const getThemeErrorBoxStyle = () => {
     return {
-      borderColor: (0, _theme.getThemePaletteBackgroundColor)(props.theme, "warning")
+      borderColor: props.type === "error" ? (0, _theme.getThemePaletteBackgroundColor)(props.theme, "error") : (0, _theme.getThemePaletteBackgroundColor)(props.theme, "warning")
     };
   };
   return _react.default.createElement("div", {
-    className: _ErrorBoxModule.default.errorBox,
+    className: (0, _helpers.classNameArrayToClassNameString)([_ErrorBoxModule.default.errorBox, _ErrorBoxModule.default[props.type]]),
     style: getThemeErrorBoxStyle()
-  }, props.children);
+  }, _react.default.createElement("img", {
+    src: _infoSign.default,
+    alt: "",
+    className: _ErrorBoxModule.default.infoSign
+  }), props.children);
 };
 ErrorBox.propTypes = {
-  theme: _propTypes.default.object
+  theme: _propTypes.default.object,
+  type: _propTypes.default.oneOf(["warning", "error"])
 };
 ErrorBox.defaultProps = {
-  children: ""
+  children: "",
+  type: "warning"
 };
 var _default = exports.default = ErrorBox;

package/dist/components/ErrorBox.module.scss

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

package/dist/components/Header.module.scss

@@ -11,16 +11,17 @@
 			color: $color-primary;
 		}
 		&.size-1 {
-			font-family: "Altis", sans-serif;
+			font-family: $default-font;
 			font-size: 32px;
 			font-style: normal;
 			font-weight: 500;
 			line-height: 1.43;
+			letter-spacing: 0px;
 			@media only screen and (min-width: $screen-sm) {
 				font-size: 38px;
 			}
 			&.bigHeader {
-				font-family: "Altis-Light", "Open Sans", arial, sans-serif;
+				font-family: $default-font;
 				font-size: 40px;
 				line-height: 1.2;
 				overflow: hidden;
@@ -31,11 +32,12 @@
 			}
 		}
 		&.size-2 {
-			font-family: "Altis", sans-serif;
+			font-family: $default-font;
 			font-size: 25px;
 			font-style: normal;
 			font-weight: 500;
 			line-height: 1.42;
+			letter-spacing: 0px;
 			@media only screen and (min-width: $screen-sm) {
 				font-size: 30px;
 			}
@@ -46,6 +48,7 @@
 			font-style: normal;
 			font-weight: bold;
 			line-height: 1;
+			letter-spacing: 0px;
 			@media only screen and (min-width: $screen-sm) {
 				font-size: 22px;
 			}
@@ -56,6 +59,7 @@
 			font-style: italic;
 			font-weight: normal;
 			line-height: 1;
+			letter-spacing: 0px;
 			@media only screen and (min-width: $screen-sm) {
 				font-size: 21px;
 			}
@@ -65,6 +69,7 @@
 			font-size: 16px;
 			font-weight: normal;
 			line-height: 1;
+			letter-spacing: 0px;
 			@media only screen and (min-width: $screen-sm) {
 				font-size: 19px;
 			}

package/dist/components/InputField.js

@@ -102,6 +102,7 @@ InputField.propTypes = {
   onBlur: _propTypes.default.func,
   name: _propTypes.default.string,
   type: _propTypes.default.string,
+  disabled: _propTypes.default.bool,
   required: _propTypes.default.bool,
   width: _propTypes.default.string,
   value: _propTypes.default.any,
@@ -127,6 +128,7 @@ InputField.defaultProps = {
   },
   name: "",
   type: "text",
+  disabled: false,
   required: false,
   label: "",
   contentOnly: false,