dibk-design 0.4.38 → 0.4.42

package/dist/components/Accordion.module.scss

@@ -4,16 +4,22 @@
     0% {
         opacity: 0;
         margin-top: 0px;
-        padding: 0 30px 0;
+        padding: 0 15px 0;
         line-height: 0;
         max-height: 0;
+        @media only screen and (min-width: $screen-xs) {
+            padding: 0 30px 0;
+        }
     }
     100% {
         opacity: 1;
         margin-top: 0px;
-        padding: 8px 30px 15px;
+        padding: 8px 15px 15px;
         line-height: inherit;
         max-height: 1000px;
+        @media only screen and (min-width: $screen-xs) {
+            padding: 8px 30px 15px;
+        }
     }
 }
 
@@ -21,16 +27,22 @@
     100% {
         opacity: 0;
         margin-top: 0px;
-        padding: 0 30px 0;
+        padding: 0 15px 0;
         line-height: 0;
         max-height: 0;
+        @media only screen and (min-width: $screen-xs) {
+            padding: 0 30px 0;
+        }
     }
     0% {
         opacity: 1;
         margin-top: 0px;
-        padding: 8px 30px 15px;
+        padding: 8px 15px 15px;
         line-height: inherit;
         max-height: 1000px;
+        @media only screen and (min-width: $screen-xs) {
+            padding: 8px 30px 15px;
+        }
     }
 }
 
@@ -117,7 +129,7 @@
     }
 
     :local(.panel) {
-        padding: 15px 30px;
+        padding: 15px 15px;
         display: flex;
         align-items: center;
         position: relative;
@@ -125,6 +137,9 @@
         overflow-wrap: break-word;
         line-height: 1.7;
         cursor: pointer;
+        @media only screen and (min-width: $screen-xs) {
+            padding: 15px 30px;
+        }
         :local(.panelText) {
             font-family: $heading-font;
             font-weight: bold;
@@ -138,7 +153,10 @@
             width: 18px;
             height: 18px;
             border-radius: 100px;
-
+            margin-right: 6px;
+            @media only screen and (min-width: $screen-xs) {
+                margin-right: 0;
+            }
             &::after {
                 content: "";
                 display: block;
@@ -164,7 +182,10 @@
         line-height: 0;
         max-height: 0;
         overflow: hidden;
-        padding: 0 30px 0;
+        padding: 0 15px 0;
+        @media only screen and (min-width: $screen-xs) {
+            padding: 0 30px 0;
+        }
         &:local(.initialized) {
             animation: hide 0.3s ease-in-out;
         }
@@ -173,9 +194,12 @@
             animation: show 0.3s ease-in-out;
             opacity: 1;
             margin-top: 0px;
-            padding: 8px 30px 15px;
+            padding: 8px 15px 15px;
             line-height: inherit;
             max-height: 10000px;
+            @media only screen and (min-width: $screen-xs) {
+                padding: 8px 30px 15px;
+            }
         }
     }
 }

package/dist/components/Button.module.scss

@@ -66,9 +66,9 @@
   }
 
   &:local(.small) {
-    padding: 1px 32px;
-    height: 35px;
+    padding: 6px 32px;
     min-width: 80px;
+    line-height: 21px;;
   }
 
   &:local(.default) {

package/dist/components/Header.md

@@ -4,6 +4,7 @@ Title examples:
 <Header content="Title with size 1"/>
 <Header content="Title with size 2" size={2}/>
 <Header content="Title with size 3" size={3}/>
+<Header content="Title with size 4" size={4}/>
 <Header content="Big title with size 1" big/>
 <Header content="Title with size 2 and htmlTag h1" size={2} htmlTag="h1"/>
 

package/dist/components/Header.module.scss

@@ -1,44 +1,64 @@
 @import "../style/global.scss";
 
 :local(.headerContainer) {
-	font-size: 22px;
-	padding: 10px 0;
+	padding: 5px 0;
 	:local(.header) {
 		margin: 0;
 		font-weight: normal;
 		line-height: 1.4;
 		font-style: normal;
-		font-size: 18px;
 		&:not(:local(.hasTheme)) {
 			color: $color-primary;
 		}
 		&:local(.size-1) {
 			font-family: "Altis", sans-serif;
-			font-size: 38px;
+			font-size: 32px;
 			font-style: normal;
 			font-weight: 500;
 			line-height: 1.43;
+			@media only screen and (min-width: $screen-xs) {
+				font-size: 38px;
+			}
 			&:local(.bigHeader) {
 				font-family: "Altis-Light", "Open Sans", arial, sans-serif;
-				font-size: 50px;
+				font-size: 40px;
 				line-height: 1.2;
 				overflow: hidden;
 				text-overflow: ellipsis;
+				@media only screen and (min-width: $screen-xs) {
+					font-size: 50px;
+				}
 			}
 		}
 		&:local(.size-2) {
 			font-family: "Altis", sans-serif;
-			font-size: 30px;
+			font-size: 25px;
 			font-style: normal;
 			font-weight: 500;
 			line-height: 1.42;
+			@media only screen and (min-width: $screen-xs) {
+				font-size: 30px;
+			}
 		}
 		&:local(.size-3) {
 			font-family: "Open Sans", arial, sans-serif;
-			font-size: 22px;
+			font-size: 19px;
 			font-style: normal;
 			font-weight: bold;
 			line-height: 1;
+			@media only screen and (min-width: $screen-xs) {
+				font-size: 22px;
+			}
+		}
+		&:local(.size-4) {
+			font-family: "Open Sans", arial, sans-serif;
+			font-size: 17px;
+			font-style: italic;
+			font-weight: normal;
+			line-height: 1;
+			@media only screen and (min-width: $screen-xs) {
+				font-size: 21px;
+			}
 		}
 	}
 }

package/dist/components/Paper.module.scss

@@ -1,17 +1,18 @@
+@import "../style/global.scss";
+
 :local(.paper) {
   line-height: 1.6;
   position: relative;
-  padding: 24px 28px;
-  margin: 20px 0;
   width: 100%;
   background: white;
-  box-shadow: 0 2px 3px rgba(0,0,0,0.18);
-
-  &:local(.noMargin) {
-    margin: 0;
+  box-shadow: 0 2px 3px rgba(0, 0, 0, 0.18);
+  &:not(:local(.noMargin)) {
+    margin: 20px 0;
   }
-
-  &:local(.noPadding) {
-    padding: 0;
+  &:not(:local(.noPadding)) {
+    padding: 12px 12px;
+    @media only screen and (min-width: $screen-xs) {
+      padding: 24px 28px;
+    }
   }
 }

package/dist/components/Textarea.js

@@ -84,6 +84,7 @@ var Textarea = /*#__PURE__*/function (_React$Component) {
       var _this$props$width, _this$props$resize, _props;
 
       var defaultValue = !this.props.value && this.props.defaultValue ? this.props.defaultValue : false;
+      var defaultKey = this.props.elementKey || null;
 
       var styleRules = _objectSpread(_objectSpread(_objectSpread({}, this.props.hasErrors ? this.getThemeErrorInputStyle(this.props.theme) : null), ((_this$props$width = this.props.width) === null || _this$props$width === void 0 ? void 0 : _this$props$width.length) && {
         maxWidth: this.props.width
@@ -97,7 +98,7 @@ var Textarea = /*#__PURE__*/function (_React$Component) {
         disabled: this.props.disabled,
         type: this.props.type,
         id: this.props.id,
-        key: "".concat(this.props.id, "-").concat((0, _generators.generateRandomString)(6)),
+        key: defaultKey || "".concat(this.props.id, "-").concat((0, _generators.generateRandomString)(6)),
         onChange: this.props.onChange,
         onBlur: this.props.onBlur
       }, _defineProperty(_props, defaultValue ? 'defaultValue' : 'value', defaultValue || this.props.value), _defineProperty(_props, "placeholder", this.props.placeholder), _defineProperty(_props, "rows", this.props.rows), _defineProperty(_props, "className", this.props.hasErrors ? _TextareaModule.default.hasErrors : ''), _defineProperty(_props, 'aria-required', this.props.mandatory), _defineProperty(_props, "style", styleRules), _props);
@@ -131,6 +132,7 @@ Textarea.propTypes = {
   resize: _propTypes.default.string,
   value: _propTypes.default.string,
   defaultValue: _propTypes.default.string,
+  elementKey: _propTypes.default.string,
   rows: _propTypes.default.string,
   label: _propTypes.default.oneOfType([_propTypes.default.string, _propTypes.default.arrayOf(_propTypes.default.oneOfType([_propTypes.default.string, _propTypes.default.object]))]),
   contentOnly: _propTypes.default.bool,

package/dist/components/Textarea.md

@@ -13,6 +13,7 @@ Input field example:
 <Textarea id="textInput10" onChange={() => {console.log('onChange')}} label="Textarea without value, contentOnly set to true and defaultContent" contentOnly={true} defaultContent="Please insert a value" />
 <Textarea id="textInput11" onChange={()=>{console.log('onchange')}} value="Textarea with custom width" width="320px" />
 <Textarea id="textInput11" onChange={()=>{console.log('onchange')}} value="Textarea with custom width and vertical resizing" width="450px" resize="vertical" />
+<Textarea id="textInput11" onChange={()=>{console.log('onchange')}} value="Textarea with a not auto generated key" elementKey="textareaKeyHere" />
 ```
 
 Themed Input field example: