dibk-design 0.4.43 → 0.4.44

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>
+```

package/dist/components/Paper.module.scss

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

package/dist/components/RadioButtonIcon.md

@@ -1,41 +1,41 @@
-Regular radio button icons example:
-
-```js
-<RadioButtonIcon />
-<RadioButtonIcon checked={true} />
-<RadioButtonIcon disabled={true} />
-<RadioButtonIcon checked={true} disabled={true} />
-<RadioButtonIcon hasErrors={true} />
-<RadioButtonIcon hasErrors={true} disabled={true} />
-<RadioButtonIcon checked={true} hasErrors={true} />
-<RadioButtonIcon checked={true} hasErrors={true} disabled={true} />
-```
-
-Themed Regular radio button icons example:
-
-```js
-import customTheme from 'data/customTheme';
-<React.Fragment>
-  <RadioButtonIcon theme={customTheme}/>
-  <RadioButtonIcon checked={true} theme={customTheme} />
-  <RadioButtonIcon theme={customTheme} disabled={true} />
-  <RadioButtonIcon checked={true} theme={customTheme} disabled={true} />
-  <RadioButtonIcon hasErrors={true} theme={customTheme} />
-  <RadioButtonIcon hasErrors={true} disabled={true} theme={customTheme} />
-  <RadioButtonIcon checked={true} hasErrors={true} theme={customTheme} />
-  <RadioButtonIcon checked={true} hasErrors={true} disabled={true} theme={customTheme} />
-</React.Fragment>
-```
-
-Radio button icons with custom size example:
-
-```js
-<RadioButtonIcon size='36px' />
-<RadioButtonIcon size='36px' checked={true} />
-<RadioButtonIcon size='36px' disabled={true} />
-<RadioButtonIcon size='36px' checked={true} disabled={true} />
-<RadioButtonIcon size='36px' hasErrors={true} />
-<RadioButtonIcon size='36px' hasErrors={true} disabled={true} />
-<RadioButtonIcon size='36px' checked={true} hasErrors={true} />
-<RadioButtonIcon size='36px' checked={true} hasErrors={true} disabled={true} />
-```
+Regular radio button icons example:
+
+```js
+<RadioButtonIcon />
+<RadioButtonIcon checked={true} />
+<RadioButtonIcon disabled={true} />
+<RadioButtonIcon checked={true} disabled={true} />
+<RadioButtonIcon hasErrors={true} />
+<RadioButtonIcon hasErrors={true} disabled={true} />
+<RadioButtonIcon checked={true} hasErrors={true} />
+<RadioButtonIcon checked={true} hasErrors={true} disabled={true} />
+```
+
+Themed Regular radio button icons example:
+
+```js
+import customTheme from 'data/customTheme';
+<React.Fragment>
+  <RadioButtonIcon theme={customTheme}/>
+  <RadioButtonIcon checked={true} theme={customTheme} />
+  <RadioButtonIcon theme={customTheme} disabled={true} />
+  <RadioButtonIcon checked={true} theme={customTheme} disabled={true} />
+  <RadioButtonIcon hasErrors={true} theme={customTheme} />
+  <RadioButtonIcon hasErrors={true} disabled={true} theme={customTheme} />
+  <RadioButtonIcon checked={true} hasErrors={true} theme={customTheme} />
+  <RadioButtonIcon checked={true} hasErrors={true} disabled={true} theme={customTheme} />
+</React.Fragment>
+```
+
+Radio button icons with custom size example:
+
+```js
+<RadioButtonIcon size='36px' />
+<RadioButtonIcon size='36px' checked={true} />
+<RadioButtonIcon size='36px' disabled={true} />
+<RadioButtonIcon size='36px' checked={true} disabled={true} />
+<RadioButtonIcon size='36px' hasErrors={true} />
+<RadioButtonIcon size='36px' hasErrors={true} disabled={true} />
+<RadioButtonIcon size='36px' checked={true} hasErrors={true} />
+<RadioButtonIcon size='36px' checked={true} hasErrors={true} disabled={true} />
+```