dibk-design 0.4.41 → 0.4.44

package/dist/components/Textarea.md

@@ -1,27 +1,27 @@
-Input field example:
-
-```js
-<Textarea id="textInput1" onChange={()=>{console.log('onchange')}} mandatory={true} />
-<Textarea id="textInput2" onChange={()=>{console.log('onchange')}} value="Textarea with value" />
-<Textarea id="textInput3" onChange={()=>{console.log('onchange')}} defaultValue="Textarea with defaultValue" />
-<Textarea id="textInput4" onChange={()=>{console.log('onchange')}} value="Textarea with label and value" label="Textarea with label and value" />
-<Textarea id="textInput5" onChange={()=>{console.log('onchange')}} value="Textarea with link in label" label={['Textarea with ', <a key="labelLink" href="#">link</a>, ' in label']} />
-<Textarea id="textInput6" onChange={()=>{console.log('onchange')}} value="Textarea with label, value, errors and error message" label="Textarea with label, value, errors and error message" hasErrors={true} errorMessage="Wrong value" />
-<Textarea id="textInput7" onChange={()=>{console.log('onchange')}} readOnly value="Read only Textarea with label and value" label="Read only Textarea with label and value" />
-<Textarea id="textInput8" onChange={()=>{console.log('onchange')}} disabled value="Disabled Textarea with label and value" label="Disabled Textarea with label and value" />
-<Textarea id="textInput9" onChange={()=>{console.log('onchange')}} value="Value for Textarea" label="Textarea with label, value and contentOnly set to true" contentOnly={true} />
-<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:
-
-```js
-import customTheme from 'data/customTheme';
-<React.Fragment>
-    <Textarea id="themedTextInput4" onChange={()=>{console.log('onchange')}} value="Textarea with link in label" label={['Textarea with ', <a key="labelLink" href="#">link</a>, ' in label']} theme={customTheme} />
-    <Textarea id="themedTextInput5" onChange={()=>{console.log('onchange')}} value="Textarea with label, value, errors and error message" label="Textarea with label, value, errors and error message" hasErrors={true} errorMessage="Wrong value" theme={customTheme} />
-</React.Fragment>
-```
+Input field example:
+
+```js
+<Textarea id="textInput1" onChange={()=>{console.log('onchange')}} mandatory={true} />
+<Textarea id="textInput2" onChange={()=>{console.log('onchange')}} value="Textarea with value" />
+<Textarea id="textInput3" onChange={()=>{console.log('onchange')}} defaultValue="Textarea with defaultValue" />
+<Textarea id="textInput4" onChange={()=>{console.log('onchange')}} value="Textarea with label and value" label="Textarea with label and value" />
+<Textarea id="textInput5" onChange={()=>{console.log('onchange')}} value="Textarea with link in label" label={['Textarea with ', <a key="labelLink" href="#">link</a>, ' in label']} />
+<Textarea id="textInput6" onChange={()=>{console.log('onchange')}} value="Textarea with label, value, errors and error message" label="Textarea with label, value, errors and error message" hasErrors={true} errorMessage="Wrong value" />
+<Textarea id="textInput7" onChange={()=>{console.log('onchange')}} readOnly value="Read only Textarea with label and value" label="Read only Textarea with label and value" />
+<Textarea id="textInput8" onChange={()=>{console.log('onchange')}} disabled value="Disabled Textarea with label and value" label="Disabled Textarea with label and value" />
+<Textarea id="textInput9" onChange={()=>{console.log('onchange')}} value="Value for Textarea" label="Textarea with label, value and contentOnly set to true" contentOnly={true} />
+<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:
+
+```js
+import customTheme from 'data/customTheme';
+<React.Fragment>
+    <Textarea id="themedTextInput4" onChange={()=>{console.log('onchange')}} value="Textarea with link in label" label={['Textarea with ', <a key="labelLink" href="#">link</a>, ' in label']} theme={customTheme} />
+    <Textarea id="themedTextInput5" onChange={()=>{console.log('onchange')}} value="Textarea with label, value, errors and error message" label="Textarea with label, value, errors and error message" hasErrors={true} errorMessage="Wrong value" theme={customTheme} />
+</React.Fragment>
+```

package/dist/components/Textarea.module.scss

@@ -1,64 +1,72 @@
-@import "../style/global.scss";
-
-:local(.textarea) {
-    > div {
-        display: block;
-    }
-    textarea {
-        @include appearance(none);
-        @include transition(border-color 0.15s linear, background 0.15s linear);
-        @include border-radius(0);
-        @include box-shadow(none);
-        height: auto;
-        width: 100%;
-        display: block;
-        padding: 10px;
-        margin-bottom: 0;
-        font-weight: 300;
-        background-color: #fff;
-        box-shadow: none;
-        color: rgba(0, 0, 0, 0.75);
-        font-family: inherit;
-        font-size: 19px;
-        box-sizing: border-box;
-        border: 1px solid #afaba8;
-
-        &:hover {
-            border-color: $color-dark-blue;
-        }
-
-        &:focus {
-            border-color: $color-dark-blue;
-            outline-color: #54acb8;
-        }
-
-        &[disabled],
-        &[readonly] {
-            background-color: #ddd;
-            cursor: default;
-        }
-
-        &:local(.hasErrors) {
-            border-color: $color-error;
-            &:focus {
-                border-color: $color-error;
-                outline-color: #b8565d;
-            }
-            &[disabled],
-            &[readonly] {
-                background-color: #ddd;
-                cursor: default;
-                border-color: #afaba8;
-            }
-        }
-    }
-    :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(.textarea) {
+    > div {
+        display: block;
+    }
+    textarea {
+        @include appearance(none);
+        @include transition(border-color 0.15s linear, background 0.15s linear);
+        @include border-radius(0);
+        @include box-shadow(none);
+        height: auto;
+        width: 100%;
+        display: block;
+        padding: 10px;
+        margin-bottom: 0;
+        font-weight: 300;
+        background-color: #fff;
+        box-shadow: none;
+        color: rgba(0, 0, 0, 0.75);
+        font-family: inherit;
+        font-size: 16px;
+        box-sizing: border-box;
+        border: 1px solid #afaba8;
+        @media only screen and (min-width: $screen-sm) {
+            font-size: 19px;
+        }
+
+        &:hover {
+            border-color: $color-dark-blue;
+        }
+
+        &:focus {
+            border-color: $color-dark-blue;
+            outline-color: #54acb8;
+        }
+
+        &[disabled],
+        &[readonly] {
+            background-color: #ddd;
+            cursor: default;
+        }
+
+        &:local(.hasErrors) {
+            border-color: $color-error;
+            &:focus {
+                border-color: $color-error;
+                outline-color: #b8565d;
+            }
+            &[disabled],
+            &[readonly] {
+                background-color: #ddd;
+                cursor: default;
+                border-color: #afaba8;
+            }
+        }
+    }
+    :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;
+        }
+    }
+}

package/dist/components/Theme.md

@@ -1,12 +1,12 @@
-Default theme:
-```js
-<Theme />
-```
-
-
-
-Custom theme:
-```js
-import customTheme from 'data/customTheme';
-<Theme theme={customTheme} />
-```
+Default theme:
+```js
+<Theme />
+```
+
+
+
+Custom theme:
+```js
+import customTheme from 'data/customTheme';
+<Theme theme={customTheme} />
+```

package/dist/components/Theme.module.scss

@@ -1,76 +1,76 @@
-@import "../style/global.scss";
-
-* {
-  color: $color-default-text;
-}
-
-a {
-  color: $color-link;
-}
-
-img {
-  max-width: 200px;
-  max-height: 150px;
-}
-
-:local(.colorPalette) {
-  display: flex;
-  flex-wrap: wrap;
-
-  :local(.color) {
-    width: 20%;
-    min-width: 120px;
-    text-align: center;
-    line-height: 3em;
-
-    &:local(.default) {
-      background-color: $color-default;
-      color: #000;
-    }
-
-    &:local(.primary) {
-      background-color: $color-primary;
-      color: #fff;
-    }
-
-    &:local(.success) {
-      background-color: $color-success;
-      color: #fff;
-    }
-
-    &:local(.warning) {
-      background-color: $color-warning;
-      color: #fff;
-    }
-
-    &:local(.info) {
-      background-color: $color-info;
-      color: #000;
-    }
-
-    &:local(.lightCyan) {
-      background-color: $color-light-cyan;
-      color: #000;
-    }
-
-    &:local(.orange) {
-      background-color: $color-orange;
-      color: #fff;
-    }
-
-    &:local(.lightOrange) {
-      background-color: $color-light-orange;
-      color: #000;
-    }
-
-    &:local(.lime) {
-      background-color: $color-lime;
-      color: #fff;
-    }
-
-    &:local(.lightLime) {
-      background-color: $color-light-lime;
-      color: #000;
-    }
-  }
-}
+@import "../style/global.scss";
+
+* {
+  color: $color-default-text;
+}
+
+a {
+  color: $color-link;
+}
+
+img {
+  max-width: 200px;
+  max-height: 150px;
+}
+
+:local(.colorPalette) {
+  display: flex;
+  flex-wrap: wrap;
+
+  :local(.color) {
+    width: 20%;
+    min-width: 120px;
+    text-align: center;
+    line-height: 3em;
+
+    &:local(.default) {
+      background-color: $color-default;
+      color: #000;
+    }
+
+    &:local(.primary) {
+      background-color: $color-primary;
+      color: #fff;
+    }
+
+    &:local(.success) {
+      background-color: $color-success;
+      color: #fff;
+    }
+
+    &:local(.warning) {
+      background-color: $color-warning;
+      color: #fff;
+    }
+
+    &:local(.info) {
+      background-color: $color-info;
+      color: #000;
+    }
+
+    &:local(.lightCyan) {
+      background-color: $color-light-cyan;
+      color: #000;
+    }
+
+    &:local(.orange) {
+      background-color: $color-orange;
+      color: #fff;
+    }
+
+    &:local(.lightOrange) {
+      background-color: $color-light-orange;
+      color: #000;
+    }
+
+    &:local(.lime) {
+      background-color: $color-lime;
+      color: #fff;
+    }
+
+    &:local(.lightLime) {
+      background-color: $color-light-lime;
+      color: #000;
+    }
+  }
+}

package/dist/components/WizardNavigation/Step.module.scss

@@ -1,75 +1,75 @@
-@import "../../style/global.scss";
-
-.wizard-topnav .wizard-topnav-item.finished .wizard-topnav-item-content:before {
-  background-color: $color-primary;
-}
-
-:local(.wizardTopnavItem) {
-  flex: 1;
-  text-decoration: none;
-  :local(.wizardTopnavItemContent) {
-    &:before {
-      display: inline-block;
-      content: " ";
-      height: 15px;
-      background-color: #e2e1e0;
-      width: 100%;
-      left: 50%;
-      position: relative;
-      margin-bottom: -30px;
-    }
-    :local(.stepNumber) {
-      border-radius: 50%;
-      width: 35px;
-      height: 35px;
-      display: block;
-      text-align: center;
-      background-color: #e2e1e0;
-      color: $color-default-text;
-      margin: auto;
-      position: relative;
-      font-size: 20px;
-      line-height: 1.75em;
-    }
-    :local(.stepName) {
-      display: block;
-      text-align: center;
-      color: $color-default-text;
-    }
-  }
-  &:local(.active) {
-    :local(.stepNumber) {
-      background-color: $color-dark-blue;
-      color: #fff;
-    }
-  }
-  &:local(.finished) {
-    :local(.wizardTopnavItemContent) {
-      &:before {
-        background-color: $color-primary;
-      }
-      :local(.stepNumber) {
-        background-color: $color-primary;
-        color: #fff;
-      }
-    }
-  }
-  &:local(.hasErrors) {
-    :local(.wizardTopnavItemContent) {
-      &:before {
-        background-color: $color-warning;
-      }
-      :local(.stepNumber) {
-        background-color: $color-warning;
-        color: #fff;
-      }
-    }
-  }
-  &:last-child {
-    :local(.wizardTopnavItemContent) {
-      &:before {
-        width: 0;
-      }
-    }
-  }
-}
+@import "../../style/global.scss";
+
+.wizard-topnav .wizard-topnav-item.finished .wizard-topnav-item-content:before {
+  background-color: $color-primary;
+}
+
+:local(.wizardTopnavItem) {
+  flex: 1;
+  text-decoration: none;
+  :local(.wizardTopnavItemContent) {
+    &:before {
+      display: inline-block;
+      content: " ";
+      height: 15px;
+      background-color: #e2e1e0;
+      width: 100%;
+      left: 50%;
+      position: relative;
+      margin-bottom: -30px;
+    }
+    :local(.stepNumber) {
+      border-radius: 50%;
+      width: 35px;
+      height: 35px;
+      display: block;
+      text-align: center;
+      background-color: #e2e1e0;
+      color: $color-default-text;
+      margin: auto;
+      position: relative;
+      font-size: 20px;
+      line-height: 1.75em;
+    }
+    :local(.stepName) {
+      display: block;
+      text-align: center;
+      color: $color-default-text;
+    }
+  }
+  &:local(.active) {
+    :local(.stepNumber) {
+      background-color: $color-dark-blue;
+      color: #fff;
+    }
+  }
+  &:local(.finished) {
+    :local(.wizardTopnavItemContent) {
+      &:before {
+        background-color: $color-primary;
+      }
+      :local(.stepNumber) {
+        background-color: $color-primary;
+        color: #fff;
+      }
+    }
+  }
+  &:local(.hasErrors) {
+    :local(.wizardTopnavItemContent) {
+      &:before {
+        background-color: $color-warning;
+      }
+      :local(.stepNumber) {
+        background-color: $color-warning;
+        color: #fff;
+      }
+    }
+  }
+  &:last-child {
+    :local(.wizardTopnavItemContent) {
+      &:before {
+        width: 0;
+      }
+    }
+  }
+}