dibk-design 0.4.42 → 0.4.45

package/dist/components/ContentBox.md

@@ -1,46 +1,46 @@
-ContentBoxes without title example:
-
-```js
-<ContentBox content="Box with default color" color="default" />
-<ContentBox content="Box with primary color" color="primary" />
-<ContentBox content="Box with success color" color="success" />
-<ContentBox content="Box with warning color" color="warning" />
-<ContentBox content="Box with info color" color="info" />
-<ContentBox content="Box with light cyan color" color="lightCyan" />
-<ContentBox content="Box with orange color" color="orange" />
-<ContentBox content="Box with light orange color" color="lightOrange" />
-<ContentBox content="Box with lime color" color="lime" />
-<ContentBox content="Box with light lime color" color="lightLime" />
-
-```
-
-ContentBoxes with title and href example:
-
-```js
-<ContentBox content="Box with default color" href="#" color="default" title="Box title" />
-<ContentBox content="Box with primary color" href="#" color="primary" title="Box title" />
-<ContentBox content="Box with success color" href="#" color="success" title="Box title" />
-<ContentBox content="Box with warning color" href="#" color="warning" title="Box title" />
-<ContentBox content="Box with info color" href="#" color="info" title="Box title" />
-<ContentBox content="Box with light cyan color" href="#" color="lightCyan" title="Box title" />
-<ContentBox content="Box with orange color" href="#" color="orange" title="Box title" />
-<ContentBox content="Box with light orange color" href="#" color="lightOrange" title="Box title" />
-<ContentBox content="Box with lime color" href="#" color="lime" title="Box title" />
-<ContentBox content="Box with light lime color" href="#" color="lightLime" title="Box title" />
-
-```
-
-ContentBoxes with large title:
-
-```js
-<ContentBox content="Box with default color" color="default" title="Box title" titleSize="large" />
-<ContentBox content="Box with primary color" color="primary" title="Box title" titleSize="large" />
-<ContentBox content="Box with success color" color="success" title="Box title" titleSize="large" />
-<ContentBox content="Box with warning color" color="warning" title="Box title" titleSize="large" />
-<ContentBox content="Box with info color" color="info" title="Box title" titleSize="large" />
-<ContentBox content="Box with light cyan color" color="lightCyan" title="Box title" titleSize="large" />
-<ContentBox content="Box with orange color" color="orange" title="Box title" titleSize="large" />
-<ContentBox content="Box with light orange color" color="lightOrange" title="Box title" titleSize="large" />
-<ContentBox content="Box with lime color" color="lime" title="Box title" titleSize="large" />
-<ContentBox content="Box with light lime color" color="lightLime" title="Box title" titleSize="large" />
-```
+ContentBoxes without title example:
+
+```js
+<ContentBox content="Box with default color" color="default" />
+<ContentBox content="Box with primary color" color="primary" />
+<ContentBox content="Box with success color" color="success" />
+<ContentBox content="Box with warning color" color="warning" />
+<ContentBox content="Box with info color" color="info" />
+<ContentBox content="Box with light cyan color" color="lightCyan" />
+<ContentBox content="Box with orange color" color="orange" />
+<ContentBox content="Box with light orange color" color="lightOrange" />
+<ContentBox content="Box with lime color" color="lime" />
+<ContentBox content="Box with light lime color" color="lightLime" />
+
+```
+
+ContentBoxes with title and href example:
+
+```js
+<ContentBox content="Box with default color" href="#" color="default" title="Box title" />
+<ContentBox content="Box with primary color" href="#" color="primary" title="Box title" />
+<ContentBox content="Box with success color" href="#" color="success" title="Box title" />
+<ContentBox content="Box with warning color" href="#" color="warning" title="Box title" />
+<ContentBox content="Box with info color" href="#" color="info" title="Box title" />
+<ContentBox content="Box with light cyan color" href="#" color="lightCyan" title="Box title" />
+<ContentBox content="Box with orange color" href="#" color="orange" title="Box title" />
+<ContentBox content="Box with light orange color" href="#" color="lightOrange" title="Box title" />
+<ContentBox content="Box with lime color" href="#" color="lime" title="Box title" />
+<ContentBox content="Box with light lime color" href="#" color="lightLime" title="Box title" />
+
+```
+
+ContentBoxes with large title:
+
+```js
+<ContentBox content="Box with default color" color="default" title="Box title" titleSize="large" />
+<ContentBox content="Box with primary color" color="primary" title="Box title" titleSize="large" />
+<ContentBox content="Box with success color" color="success" title="Box title" titleSize="large" />
+<ContentBox content="Box with warning color" color="warning" title="Box title" titleSize="large" />
+<ContentBox content="Box with info color" color="info" title="Box title" titleSize="large" />
+<ContentBox content="Box with light cyan color" color="lightCyan" title="Box title" titleSize="large" />
+<ContentBox content="Box with orange color" color="orange" title="Box title" titleSize="large" />
+<ContentBox content="Box with light orange color" color="lightOrange" title="Box title" titleSize="large" />
+<ContentBox content="Box with lime color" color="lime" title="Box title" titleSize="large" />
+<ContentBox content="Box with light lime color" color="lightLime" title="Box title" titleSize="large" />
+```

package/dist/components/ContentBox.module.scss

@@ -1,116 +1,116 @@
-@import "../style/global.scss";
-
-:local(.contentBox) {
-    font-family: $default-font;
-    text-decoration: none;
-    padding: 20px;
-    width: 100%;
-    display: block;
-    &:local(.link) {
-        color: $color-primary;
-        @include transition(filter 0.3s);
-        &:hover,
-        &:focus {
-            filter: brightness(90%);
-        }
-        &:active {
-            filter: brightness(85%);
-        }
-    }
-    &:local(.default) {
-        background-color: $color-default;
-        :local(.content),
-        :local(.title) {
-            color: #000;
-        }
-    }
-    &:local(.primary) {
-        background-color: $color-primary;
-        color: #fff;
-        :local(.content),
-        :local(.title) {
-            color: #fff;
-        }
-    }
-    &:local(.success) {
-        background-color: $color-success;
-        color: #fff;
-        :local(.content),
-        :local(.title) {
-            color: #fff;
-        }
-    }
-    &:local(.warning) {
-        background-color: $color-warning;
-        color: #fff;
-        :local(.content),
-        :local(.title) {
-            color: #fff;
-        }
-    }
-
-    &:local(.info) {
-        background-color: $color-info;
-        :local(.content),
-        :local(.title) {
-            color: #000;
-        }
-    }
-    &:local(.lightCyan) {
-        background-color: $color-light-cyan;
-        :local(.content),
-        :local(.title) {
-            color: #000;
-        }
-    }
-    &:local(.orange) {
-        background-color: $color-orange;
-        color: #fff;
-        :local(.content),
-        :local(.title) {
-            color: #fff;
-        }
-    }
-    &:local(.lightOrange) {
-        background-color: $color-light-orange;
-        :local(.content),
-        :local(.title) {
-            color: #000;
-        }
-    }
-    &:local(.lime) {
-        background-color: $color-lime;
-        color: #fff;
-        :local(.content),
-        :local(.title) {
-            color: #fff;
-        }
-    }
-    &:local(.lightLime) {
-        background-color: $color-light-lime;
-        :local(.content),
-        :local(.title) {
-            color: #000;
-        }
-    }
-
-    :local(.title) {
-        &:local(.regular) {
-            font-family: "Open Sans";
-            font-weight: bold;
-            font-size: 21px;
-            font-style: normal;
-            line-height: 1.4;
-            padding-bottom: 10px;
-            border-bottom: 1px solid #e5e3e1;
-        }
-        &:local(.large) {
-            font-family: "Open Sans";
-            font-weight: normal;
-            font-size: 24px;
-            margin: 0;
-            margin-bottom: 20px;
-            font-style: normal;
-        }
-    }
-}
+@import "../style/global.scss";
+
+:local(.contentBox) {
+    font-family: $default-font;
+    text-decoration: none;
+    padding: 20px;
+    width: 100%;
+    display: block;
+    &:local(.link) {
+        color: $color-primary;
+        @include transition(filter 0.3s);
+        &:hover,
+        &:focus {
+            filter: brightness(90%);
+        }
+        &:active {
+            filter: brightness(85%);
+        }
+    }
+    &:local(.default) {
+        background-color: $color-default;
+        :local(.content),
+        :local(.title) {
+            color: #000;
+        }
+    }
+    &:local(.primary) {
+        background-color: $color-primary;
+        color: #fff;
+        :local(.content),
+        :local(.title) {
+            color: #fff;
+        }
+    }
+    &:local(.success) {
+        background-color: $color-success;
+        color: #fff;
+        :local(.content),
+        :local(.title) {
+            color: #fff;
+        }
+    }
+    &:local(.warning) {
+        background-color: $color-warning;
+        color: #fff;
+        :local(.content),
+        :local(.title) {
+            color: #fff;
+        }
+    }
+
+    &:local(.info) {
+        background-color: $color-info;
+        :local(.content),
+        :local(.title) {
+            color: #000;
+        }
+    }
+    &:local(.lightCyan) {
+        background-color: $color-light-cyan;
+        :local(.content),
+        :local(.title) {
+            color: #000;
+        }
+    }
+    &:local(.orange) {
+        background-color: $color-orange;
+        color: #fff;
+        :local(.content),
+        :local(.title) {
+            color: #fff;
+        }
+    }
+    &:local(.lightOrange) {
+        background-color: $color-light-orange;
+        :local(.content),
+        :local(.title) {
+            color: #000;
+        }
+    }
+    &:local(.lime) {
+        background-color: $color-lime;
+        color: #fff;
+        :local(.content),
+        :local(.title) {
+            color: #fff;
+        }
+    }
+    &:local(.lightLime) {
+        background-color: $color-light-lime;
+        :local(.content),
+        :local(.title) {
+            color: #000;
+        }
+    }
+
+    :local(.title) {
+        &:local(.regular) {
+            font-family: "Open Sans";
+            font-weight: bold;
+            font-size: 21px;
+            font-style: normal;
+            line-height: 1.4;
+            padding-bottom: 10px;
+            border-bottom: 1px solid #e5e3e1;
+        }
+        &:local(.large) {
+            font-family: "Open Sans";
+            font-weight: normal;
+            font-size: 24px;
+            margin: 0;
+            margin-bottom: 20px;
+            font-style: normal;
+        }
+    }
+}

package/dist/components/Dialog.md

@@ -1,6 +1,6 @@
-Dialog example:
-
-
-```html
-<Dialog onClickOutside={() => {console.log('clicked outside')}} closeButton>Dialog title<p>dialog paragraph</p></Dialog>
+Dialog example:
+
+
+```html
+<Dialog onClickOutside={() => {console.log('clicked outside')}} closeButton>Dialog title<p>dialog paragraph</p></Dialog>
 ```

package/dist/components/Dialog.module.scss

@@ -1,71 +1,78 @@
-@import "../style/global.scss";
-
-:local(.hidden) {
-    width: 0;
-    height: 0;
-    border: none;
-    position: absolute;
-    padding: 0;
-}
-
-:local(.dialogOverlay) {
-    display: flex;
-    flex-wrap: wrap;
-    position: fixed;
-    width: 100%;
-    background: rgba(0, 0, 0, 0.25);
-    height: 100%;
-    top: 0;
-    left: 0;
-    align-content: center;
-    padding: 8px 28px;
-    z-index: 2;
-    justify-content: center;
-    @media (min-width: $screen-sm) {
-        padding: 36px;
-    }
-
-    :local(.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;
-        &:not(:local(.noPadding)){
-            padding: 60px 40px;
-        }
-        @media (min-width: $screen-sm) {
-            @include calc("width", "100% - 128px");
-            max-height: 100%;
-        }
-        :local(.closeButton) {
-            background: none;
-            border: none;
-            color: $color-primary;
-            display: inline-block;
-            position: absolute;
-            right: 15px;
-            top: 10px;
-            text-decoration: underline;
-            font-size: 19px;
-            cursor: pointer;
-            &:hover{
-                text-decoration: none;
-            }
-            &::after {
-                font-family: "Helvetica", "Arial", sans-serif;
-                display: inline-block;
-                content: "\00d7";
-                font-size: 30px;
-                line-height: 20px;
-                margin-left: 5px;
-            }
-        }
-    }
-}
+@import "../style/global.scss";
+
+:local(.hidden) {
+    width: 0;
+    height: 0;
+    border: none;
+    position: absolute;
+    padding: 0;
+}
+
+:local(.dialogOverlay) {
+    display: flex;
+    flex-wrap: wrap;
+    position: fixed;
+    width: 100%;
+    background: rgba(0, 0, 0, 0.25);
+    height: 100%;
+    top: 0;
+    left: 0;
+    align-content: center;
+    padding: 8px 28px;
+    z-index: 2;
+    justify-content: center;
+    @media (min-width: $screen-md) {
+        padding: 36px;
+    }
+
+    :local(.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;
+        &:not(:local(.noPadding)) {
+            padding: 30px 15px;
+            @media only screen and (min-width: $screen-sm) {
+                padding: 60px 40px;
+            }
+        }
+        @media (min-width: $screen-md) {
+            @include calc("width", "100% - 128px");
+            max-height: 100%;
+        }
+        :local(.closeButton) {
+            background: none;
+            border: none;
+            color: $color-primary;
+            display: inline-block;
+            position: absolute;
+            right: 7px;
+            top: 4px;
+            text-decoration: underline;
+            font-size: 19px;
+            cursor: pointer;
+            @media only screen and (min-width: $screen-sm) {
+                right: 15px;
+                top: 10px;
+            }
+            &:hover {
+                text-decoration: none;
+            }
+            &::after {
+                font-family: "Helvetica", "Arial", sans-serif;
+                display: inline-block;
+                content: "\00d7";
+                font-size: 30px;
+                line-height: 20px;
+                margin-left: 5px;
+            }
+        }
+    }
+}

package/dist/components/DragAndDropFileInput.md

@@ -1,13 +1,13 @@
-Drag and drop file input examples:
-
-```js
-<DragAndDropFileInput id="dragAndDropInput-1" label="Input without selected file" buttonContent="Velg fil" onSelectChange={() => console.log('Select change')} onDragAndDropChange={() => console.log('Drag and drop change')}  />
-
-<DragAndDropFileInput id="dragAndDropInput-2" label="Input with selected file" buttonContent="Velg fil" selectedFileName="important-file.xml" onSelectChange={() => console.log('Select change')} onDragAndDropChange={() => console.log('Drag and drop change')}  />
-
-<DragAndDropFileInput id="dragAndDropInput-3" label="Input with selected file and buttonContentWhenSelectedFile" buttonContent="Velg fil" buttonContentWhenSelectedFile="Velg annen fil" selectedFileName="important-file.xml" onSelectChange={() => console.log('Select change')} onDragAndDropChange={() => console.log('Drag and drop change')}  />
-
-<DragAndDropFileInput id="dragAndDropInput-4" label="Input with selected file and error message" buttonContent="Velg fil" buttonContentWhenSelectedFile="Velg annen fil" selectedFileName="wrong-file.xml" onSelectChange={() => console.log('Select change')} onDragAndDropChange={() => console.log('Drag and drop change')} hasErrors errorMessage="Filen må være midre enn 15MB" />
-
-<DragAndDropFileInput id="dragAndDropInput-5" label="Input with selected file and contentOnly" buttonContent="Velg fil" selectedFileName="important-file2.xml" onSelectChange={() => console.log('Select change')} onDragAndDropChange={() => console.log('Drag and drop change')} contentOnly={true} />
-```
+Drag and drop file input examples:
+
+```js
+<DragAndDropFileInput id="dragAndDropInput-1" label="Input without selected file" buttonContent="Velg fil" onSelectChange={() => console.log('Select change')} onDragAndDropChange={() => console.log('Drag and drop change')}  />
+
+<DragAndDropFileInput id="dragAndDropInput-2" label="Input with selected file" buttonContent="Velg fil" selectedFileName="important-file.xml" onSelectChange={() => console.log('Select change')} onDragAndDropChange={() => console.log('Drag and drop change')}  />
+
+<DragAndDropFileInput id="dragAndDropInput-3" label="Input with selected file and buttonContentWhenSelectedFile" buttonContent="Velg fil" buttonContentWhenSelectedFile="Velg annen fil" selectedFileName="important-file.xml" onSelectChange={() => console.log('Select change')} onDragAndDropChange={() => console.log('Drag and drop change')}  />
+
+<DragAndDropFileInput id="dragAndDropInput-4" label="Input with selected file and error message" buttonContent="Velg fil" buttonContentWhenSelectedFile="Velg annen fil" selectedFileName="wrong-file.xml" onSelectChange={() => console.log('Select change')} onDragAndDropChange={() => console.log('Drag and drop change')} hasErrors errorMessage="Filen må være midre enn 15MB" />
+
+<DragAndDropFileInput id="dragAndDropInput-5" label="Input with selected file and contentOnly" buttonContent="Velg fil" selectedFileName="important-file2.xml" onSelectChange={() => console.log('Select change')} onDragAndDropChange={() => console.log('Drag and drop change')} contentOnly={true} />
+```

package/dist/components/DragAndDropFileInput.module.scss

@@ -1,45 +1,45 @@
-@import "../style/global.scss";
-
-:local(.dragAndDropFileInput) {
-  label {
-    cursor: pointer;
-    font-size: 18px;
-    margin: 0 0 4px;
-    font-family: "Open Sans", arial, sans-serif;
-    line-height: 1.3;
-    font-weight: bold;
-    font-style: normal;
-    display: block;
-  }
-
-  :local(.dragAndDropContainer) {
-    @include transition(all 0.1s ease-in-out);
-    border: 2px dashed #ccc;
-    border-radius: 20px;
-    width: 100%;
-    padding: 20px;
-    text-align: center;
-
-    input {
-      display: none;
-    }
-
-    button {
-      margin: 14px 0 0;
-    }
-
-    &:local(.highlighted) {
-      background: $color-default;
-      border-color: $color-dark-blue;
-    }
-  }
-  :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(.dragAndDropFileInput) {
+  label {
+    cursor: pointer;
+    font-size: 18px;
+    margin: 0 0 4px;
+    font-family: "Open Sans", arial, sans-serif;
+    line-height: 1.3;
+    font-weight: bold;
+    font-style: normal;
+    display: block;
+  }
+
+  :local(.dragAndDropContainer) {
+    @include transition(all 0.1s ease-in-out);
+    border: 2px dashed #ccc;
+    border-radius: 20px;
+    width: 100%;
+    padding: 20px;
+    text-align: center;
+
+    input {
+      display: none;
+    }
+
+    button {
+      margin: 14px 0 0;
+    }
+
+    &:local(.highlighted) {
+      background: $color-default;
+      border-color: $color-dark-blue;
+    }
+  }
+  :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;
+  }
+}

package/dist/components/Footer.md

@@ -1,7 +1,7 @@
-Footer example:
-
-```js
-<Footer>
-  Footer content here
-</Footer>
-```
+Footer example:
+
+```js
+<Footer>
+  Footer content here
+</Footer>
+```

package/dist/components/Footer.module.scss

@@ -1,11 +1,11 @@
-@import "../style/global.scss";
-
-:local(.footer) {
-  background-color: $color-default;
-  padding-top: 40px;
-
-  :local(.footerContainer) {
-    max-width: 1280px;
-    margin: 0 auto;
-  }
-}
+@import "../style/global.scss";
+
+:local(.footer) {
+  background-color: $color-default;
+  padding-top: 40px;
+
+  :local(.footerContainer) {
+    max-width: 1280px;
+    margin: 0 auto;
+  }
+}