dibk-design 0.4.45 → 0.4.48

package/dist/components/Label.md

@@ -1,9 +1,9 @@
-Labels example:
-
-```js
-<Label>Default label</Label>
-<Label>Default label 2</Label>
-<Label inline>Inline label </Label> 
-<Label inline>Inline label 2</Label>
-<Label normalCursor>Normal cursor label</Label>
-```
+Labels example:
+
+```js
+<Label>Default label</Label>
+<Label>Default label 2</Label>
+<Label inline>Inline label </Label> 
+<Label inline>Inline label 2</Label>
+<Label normalCursor>Normal cursor label</Label>
+```

package/dist/components/Label.module.scss

@@ -1,16 +1,16 @@
-:local(.label) {
-    color: #000;
-    display: block;
-    font-size: 1rem;
-    font-weight: bold;
-    line-height: 1.2;
-    margin-bottom: 2px;
-    font-family: "Open Sans", sans-serif;
-    overflow-wrap: break-word;
-    &:local(.inline) {
-        display: inline-block;
-    }
-    &:not(:local(.normalCursor)) {
-        cursor: pointer;
-    }
-}
+:local(.label) {
+    color: #000;
+    display: block;
+    font-size: 1rem;
+    font-weight: bold;
+    line-height: 1.2;
+    margin-bottom: 2px;
+    font-family: "Open Sans", sans-serif;
+    overflow-wrap: break-word;
+    &:local(.inline) {
+        display: inline-block;
+    }
+    &:not(:local(.normalCursor)) {
+        cursor: pointer;
+    }
+}

package/dist/components/List.md

@@ -1,10 +1,10 @@
-Unordered List example:
-
-```js
-<List listItems={['item 1', 'item 2', 'item 3']} />
-```
-
-Ordered List example:
-```js
-<List listItems={['item 1', 'item 2', 'item 3']} ordered={true} />
-```
+Unordered List example:
+
+```js
+<List listItems={['item 1', 'item 2', 'item 3']} />
+```
+
+Ordered List example:
+```js
+<List listItems={['item 1', 'item 2', 'item 3']} ordered={true} />
+```

package/dist/components/List.module.scss

@@ -1,19 +1,19 @@
-:local(.list) {
-	margin: 0;
-	margin-left: 20px;
-	padding: 0;
-	margin-bottom: 20px;
-	list-style-position: outside;
-	font-size: 16px;
-	li {
-		line-height: 1.6;
-	}
-}
-
-:local(ul.list) {
-	list-style: disc;
-}
-
-:local(ol.list) {
-	list-style: decimal;
+:local(.list) {
+	margin: 0;
+	margin-left: 20px;
+	padding: 0;
+	margin-bottom: 20px;
+	list-style-position: outside;
+	font-size: 16px;
+	li {
+		line-height: 1.6;
+	}
+}
+
+:local(ul.list) {
+	list-style: disc;
+}
+
+:local(ol.list) {
+	list-style: decimal;
 }

package/dist/components/LoadingAnimation.md

@@ -1,5 +1,5 @@
- LoadingAnimation example:
-
-```js
-<LoadingAnimation message="Loading..." />
-```
+ LoadingAnimation example:
+
+```js
+<LoadingAnimation message="Loading..." />
+```

package/dist/components/LoadingAnimation.module.scss

@@ -1,26 +1,26 @@
-@import "../style/global.scss";
-
-:local(.loadingAnimation){
-	@include box-shadow(0 8px 17px 0 rgba(0,0,0,.2));
-	z-index: 6;
-	background-repeat: no-repeat;
-	background-position: 50% 15px;
-	background-color: #fff;
-	height: auto;
-	width: 200px;
-	border: 1px solid #ddd;
-	padding: 15px;
-	color: #666;
-	display: block;
-	text-align: center;
-	&:local(.fixed) {
-		@include calc(left, '50% - 100px');
-		top: 40%;
-		margin: auto;
-		position: fixed;
-	}
-	&:before {
-		content: url(../images/spinner.svg);
-		display: block;		
-	}
-}
+@import "../style/global.scss";
+
+:local(.loadingAnimation){
+	@include box-shadow(0 8px 17px 0 rgba(0,0,0,.2));
+	z-index: 6;
+	background-repeat: no-repeat;
+	background-position: 50% 15px;
+	background-color: #fff;
+	height: auto;
+	width: 200px;
+	border: 1px solid #ddd;
+	padding: 15px;
+	color: #666;
+	display: block;
+	text-align: center;
+	&:local(.fixed) {
+		@include calc(left, '50% - 100px');
+		top: 40%;
+		margin: auto;
+		position: fixed;
+	}
+	&:before {
+		content: url(../images/spinner.svg);
+		display: block;		
+	}
+}

package/dist/components/NavigationBar.md

@@ -1,42 +1,42 @@
-NavigationBar example:
-
-```js
-<NavigationBar primaryListItems={[{name: 'Primary item 1', listItems:['Sub item 1', 'Sub item 2']}, 'Primary item 2', {name: 'Primary item 3', href: '#'}]} secondaryListItems={['Secondary item 1', 'Secondary item 2']} />
-```
-
-
-NavigationBar without list items example
-```js
-<NavigationBar />
-```
-
-NavigationBar with logo link
-```js
-<NavigationBar logoLink="https://dibk.no/" />
-```
-
-NavigationBar with logo link that opens in new tab
-```js
-<NavigationBar logoLink="https://dibk.no/" openLogoLinkInNewTab />
-```
-
-NavigationBar with child elements
-```js
-<NavigationBar primaryListItems={[{name: 'Primary item 1', listItems:['Sub item 1', 'Sub item 2']}, 'Primary item 2', {name: 'Primary item 3', href: '#'}]} secondaryListItems={['Secondary item 1', 'Secondary item 2']} >
-Content here
-</NavigationBar>
-```
-
-
-NavigationBar with child elements and without list items example
-```js
-<NavigationBar>
-Content here
-</NavigationBar>
-```
-
-Themed NavigationBar example:
-```js
-import customTheme from 'data/customTheme';
-<NavigationBar theme={customTheme} primaryListItems={[{name: 'Primary item 1', listItems:['Sub item 1', 'Sub item 2']}, 'Primary item 2', {name: 'Primary item 3', href: '#'}]} secondaryListItems={['Secondary item 1', 'Secondary item 2']} />
-```
+NavigationBar example:
+
+```js
+<NavigationBar primaryListItems={[{name: 'Primary item 1', listItems:['Sub item 1', 'Sub item 2']}, 'Primary item 2', {name: 'Primary item 3', href: '#'}]} secondaryListItems={['Secondary item 1', 'Secondary item 2']} />
+```
+
+
+NavigationBar without list items example
+```js
+<NavigationBar />
+```
+
+NavigationBar with logo link
+```js
+<NavigationBar logoLink="https://dibk.no/" />
+```
+
+NavigationBar with logo link that opens in new tab
+```js
+<NavigationBar logoLink="https://dibk.no/" openLogoLinkInNewTab />
+```
+
+NavigationBar with child elements
+```js
+<NavigationBar primaryListItems={[{name: 'Primary item 1', listItems:['Sub item 1', 'Sub item 2']}, 'Primary item 2', {name: 'Primary item 3', href: '#'}]} secondaryListItems={['Secondary item 1', 'Secondary item 2']} >
+Content here
+</NavigationBar>
+```
+
+
+NavigationBar with child elements and without list items example
+```js
+<NavigationBar>
+Content here
+</NavigationBar>
+```
+
+Themed NavigationBar example:
+```js
+import customTheme from 'data/customTheme';
+<NavigationBar theme={customTheme} primaryListItems={[{name: 'Primary item 1', listItems:['Sub item 1', 'Sub item 2']}, 'Primary item 2', {name: 'Primary item 3', href: '#'}]} secondaryListItems={['Secondary item 1', 'Secondary item 2']} />
+```

package/dist/components/NavigationBar.module.scss

@@ -1,176 +1,176 @@
-@import "../style/global.scss";
-
-:local(.isPresent) {
-	@include box-shadow(0 2px 4px -2px rgba(0,0,0,.2));
-	position: relative;
-	z-index: 1;
-	:local(.navigationBar) {
-		background-color: $color-dark-blue;
-		height: 54px;
-		display: flex;
-		justify-content: space-between;
-		align-items: center;
-		@media only screen and (min-width: $screen-sm) {
-			height: 73px;
-		}
-	}
-
-	:local(.logoContainer) {
-		width: 200px;
-		height: 54px;
-		display: inline-block;
-		img {
-			height: 54px;
-			max-width: none;
-		}
-		@media only screen and (min-width: $screen-sm) {
-			width: 270px;
-			height: 73px;
-			img {
-				height: 73px;
-			}
-		}
-	}
-
-	:local(.childElements) {
-		display: block;
-		color: #fff;
-		flex: 1;
-	}
-
-	:local(.dropdownOverlay) {
-		@media only screen and (max-width: $screen-lg) and (min-width: $screen-sm) {
-			@include transition(all 0.1s ease-out);
-			content: "";
-			position: absolute;
-			top: 73px;
-			right: 0;
-			bottom: 0;
-			left: 0;
-			z-index: 1;
-			visibility: hidden;
-			opacity: 0;
-			background: transparent;
-			&:local(.active) {
-				opacity: 1;
-				background: rgba(0, 0, 0, 0.5);
-				visibility: visible;
-			}
-		}
-	}
-
-	:local(.menuToggle) {
-		@include appearance(none);
-		@include transition(background-color 300ms ease-out);
-		border: none;
-		cursor: pointer;
-		position: relative;
-		background-color: transparent;
-		float: right;
-		margin: 0 12px;
-		:local(.hamburgerIcon) {
-			width: 30px;
-			display: block;
-			:local(.line) {
-				background-color: #fff;
-				height: 2px;
-				margin: 6px 0;
-				display: block;
-			}
-		}
-		@media only screen and (min-width: $screen-sm) {
-			margin: 0 21px;
-		}
-	}
-
-	:local(.dropdownContainer) {
-		@include transition(max-height 0.15s ease-out);
-		max-height: 0;
-		overflow: hidden;
-		&:local(.active) {
-			@include transition(max-height 0.15s ease-out);
-			max-height: 500px;
-		}
-	}
-
-	:local(.dropdown) {
-		@include box-shadow(0 2px 4px -2px rgba(0,0,0,.2));
-		background-color: $color-dark-blue;
-		z-index: 2;
-		> :local(ul.primaryList) {
-			list-style: none;
-			padding: 20px;
-			margin: 0;
-			li {
-				a,
-				span {
-					color: #fff;
-					text-transform: uppercase;
-					text-decoration: none;
-					font-family: "Open Sans";
-					padding: 10px 0;
-					display: block;
-					border-bottom: 1px solid $color-primary;
-					font-size: 14px;
-					line-height: 1.6;
-				}
-				> :local(ul.primaryList) {
-					list-style: none;
-					padding: 0;
-					li {
-						a,
-						span {
-							color: #fff;
-							text-transform: none;
-							text-decoration: none;
-							font-family: "Open Sans";
-							padding: 10px 0;
-							margin-left: 20px;
-							display: block;
-							border-bottom: 1px solid #1b3a48;
-							font-size: 14px;
-							line-height: 1.6;
-						}
-					}
-				}
-			}
-		}
-		> :local(ul.secondaryList) {
-			list-style: none;
-			padding: 20px;
-			margin: 0;
-
-			li {
-				a,
-				span {
-					color: #fff;
-					text-decoration: underline;
-					font-family: "Arial";
-					font-size: 14px;
-					padding: 10px 0;
-					line-height: 1;
-				}
-			}
-		}
-	}
-
-	@media only screen and (min-width: $screen-sm) {
-		:local(.dropdownContainer) {
-			position: relative;
-			overflow: visible;
-			:local(.dropdown) {
-				@include transition(max-height 0.15s ease-out);
-				width: 300px;
-				position: absolute;
-				right: 0;
-				max-height: 0;
-				overflow: hidden;
-			}
-			&:local(.active) {
-				:local(.dropdown) {
-					max-height: 500px;
-				}
-			}
-		}
-	}
-}
+@import "../style/global.scss";
+
+:local(.isPresent) {
+	@include box-shadow(0 2px 4px -2px rgba(0,0,0,.2));
+	position: relative;
+	z-index: 1;
+	:local(.navigationBar) {
+		background-color: $color-dark-blue;
+		height: 54px;
+		display: flex;
+		justify-content: space-between;
+		align-items: center;
+		@media only screen and (min-width: $screen-sm) {
+			height: 73px;
+		}
+	}
+
+	:local(.logoContainer) {
+		width: 200px;
+		height: 54px;
+		display: inline-block;
+		img {
+			height: 54px;
+			max-width: none;
+		}
+		@media only screen and (min-width: $screen-sm) {
+			width: 270px;
+			height: 73px;
+			img {
+				height: 73px;
+			}
+		}
+	}
+
+	:local(.childElements) {
+		display: block;
+		color: #fff;
+		flex: 1;
+	}
+
+	:local(.dropdownOverlay) {
+		@media only screen and (max-width: $screen-lg) and (min-width: $screen-sm) {
+			@include transition(all 0.1s ease-out);
+			content: "";
+			position: absolute;
+			top: 73px;
+			right: 0;
+			bottom: 0;
+			left: 0;
+			z-index: 1;
+			visibility: hidden;
+			opacity: 0;
+			background: transparent;
+			&:local(.active) {
+				opacity: 1;
+				background: rgba(0, 0, 0, 0.5);
+				visibility: visible;
+			}
+		}
+	}
+
+	:local(.menuToggle) {
+		@include appearance(none);
+		@include transition(background-color 300ms ease-out);
+		border: none;
+		cursor: pointer;
+		position: relative;
+		background-color: transparent;
+		float: right;
+		margin: 0 12px;
+		:local(.hamburgerIcon) {
+			width: 30px;
+			display: block;
+			:local(.line) {
+				background-color: #fff;
+				height: 2px;
+				margin: 6px 0;
+				display: block;
+			}
+		}
+		@media only screen and (min-width: $screen-sm) {
+			margin: 0 21px;
+		}
+	}
+
+	:local(.dropdownContainer) {
+		@include transition(max-height 0.15s ease-out);
+		max-height: 0;
+		overflow: hidden;
+		&:local(.active) {
+			@include transition(max-height 0.15s ease-out);
+			max-height: 500px;
+		}
+	}
+
+	:local(.dropdown) {
+		@include box-shadow(0 2px 4px -2px rgba(0,0,0,.2));
+		background-color: $color-dark-blue;
+		z-index: 2;
+		> :local(ul.primaryList) {
+			list-style: none;
+			padding: 20px;
+			margin: 0;
+			li {
+				a,
+				span {
+					color: #fff;
+					text-transform: uppercase;
+					text-decoration: none;
+					font-family: "Open Sans";
+					padding: 10px 0;
+					display: block;
+					border-bottom: 1px solid $color-primary;
+					font-size: 14px;
+					line-height: 1.6;
+				}
+				> :local(ul.primaryList) {
+					list-style: none;
+					padding: 0;
+					li {
+						a,
+						span {
+							color: #fff;
+							text-transform: none;
+							text-decoration: none;
+							font-family: "Open Sans";
+							padding: 10px 0;
+							margin-left: 20px;
+							display: block;
+							border-bottom: 1px solid #1b3a48;
+							font-size: 14px;
+							line-height: 1.6;
+						}
+					}
+				}
+			}
+		}
+		> :local(ul.secondaryList) {
+			list-style: none;
+			padding: 20px;
+			margin: 0;
+
+			li {
+				a,
+				span {
+					color: #fff;
+					text-decoration: underline;
+					font-family: "Arial";
+					font-size: 14px;
+					padding: 10px 0;
+					line-height: 1;
+				}
+			}
+		}
+	}
+
+	@media only screen and (min-width: $screen-sm) {
+		:local(.dropdownContainer) {
+			position: relative;
+			overflow: visible;
+			:local(.dropdown) {
+				@include transition(max-height 0.15s ease-out);
+				width: 300px;
+				position: absolute;
+				right: 0;
+				max-height: 0;
+				overflow: hidden;
+			}
+			&:local(.active) {
+				:local(.dropdown) {
+					max-height: 500px;
+				}
+			}
+		}
+	}
+}

package/dist/components/NavigationBarListItem.md

@@ -1,16 +1,16 @@
-NavigationBarListItem example:
-```js
-<ul>
-<NavigationBarListItem listItem='Primary item 1' />
-<NavigationBarListItem listItem={{name: 'Primary item 2', href: '#'}} />
-</ul>
-```
-
-Themed NavigationBarListItem example:
-```js
-import customTheme from 'data/customTheme';
-<ul>
-<NavigationBarListItem listItem='Primary item 1' theme={customTheme} />
-<NavigationBarListItem listItem={{name: 'Primary item 2', href: '#'}} theme={customTheme} />
-</ul>
+NavigationBarListItem example:
+```js
+<ul>
+<NavigationBarListItem listItem='Primary item 1' />
+<NavigationBarListItem listItem={{name: 'Primary item 2', href: '#'}} />
+</ul>
+```
+
+Themed NavigationBarListItem example:
+```js
+import customTheme from 'data/customTheme';
+<ul>
+<NavigationBarListItem listItem='Primary item 1' theme={customTheme} />
+<NavigationBarListItem listItem={{name: 'Primary item 2', href: '#'}} theme={customTheme} />
+</ul>
 ```

package/dist/components/Paper.md

@@ -1,9 +1,9 @@
-Paper example:
-
-```js
-<Paper />
-<Paper>Paper with content</Paper>
-<Paper noPadding>Paper with no padding</Paper>
-<Paper noMargin>Paper with no margin</Paper>
-<Paper noMargin noPadding>Paper with no margin or padding</Paper>
-```
+Paper example:
+
+```js
+<Paper />
+<Paper>Paper with content</Paper>
+<Paper noPadding>Paper with no padding</Paper>
+<Paper noMargin>Paper with no margin</Paper>
+<Paper noMargin noPadding>Paper with no margin or padding</Paper>
+```