dibk-design 0.4.41 → 0.4.44

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-xs) {
-			height: 73px;
-		}
-	}
-
-	:local(.logoContainer) {
-		width: 200px;
-		height: 54px;
-		display: inline-block;
-		img {
-			height: 54px;
-			max-width: none;
-		}
-		@media only screen and (min-width: $screen-xs) {
-			width: 270px;
-			height: 73px;
-			img {
-				height: 73px;
-			}
-		}
-	}
-
-	:local(.childElements) {
-		display: block;
-		color: #fff;
-		flex: 1;
-	}
-
-	:local(.dropdownOverlay) {
-		@media only screen and (max-width: $screen-md) and (min-width: $screen-xs) {
-			@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-xs) {
-			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-xs) {
-		: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,17 +1,18 @@
-: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;
-  }
-
-  &:local(.noPadding) {
-    padding: 0;
-  }
-}
+@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} />
+```

package/dist/components/RadioButtonIcon.module.scss

@@ -1,44 +1,44 @@
-@import "../style/global.scss";
-
-:local(.radioButtonIcon) {
-  @include border-radius(50%);
-  @include transition(all 0.1s ease-in-out);
-  @include box-sizing(content-box);
-  display: inline-block;
-  vertical-align: middle;
-  min-width: 10px;
-  width: 10px;
-  height: 10px;
-  background: white;
-  margin-right: 0.4em;
-  margin-top: 2px;
-  border: 0.3em solid white;
-  cursor: pointer;
-
-  &:not(:local(.hasErrors)) {
-    @include box-shadow(0 0 0 1px #afaba8);
-  }
-  &:local(.hasErrors) {
-    @include box-shadow(0 0 2px 1px #9d2024);
-  }
-
-  &:local(.checked) {
-    background: $color-primary;
-    &:local(.hasErrors) {
-      background: #9d2024;
-    }
-    &:not(:local(.hasErrors)) {
-      @include box-shadow(0 0 0 1px $color-dark-blue);
-    }
-    &:local(.hasErrors) {
-      @include box-shadow(0 0 2px 1px #9d2024);
-    }
-  }
-  &:local(.disabled) {
-    opacity: 0.5;
-    border-color: #bfbfbf;
-    &:not(&:local(.checked)) {
-      background: #bfbfbf;
-    }
-  }
-}
+@import "../style/global.scss";
+
+:local(.radioButtonIcon) {
+  @include border-radius(50%);
+  @include transition(all 0.1s ease-in-out);
+  @include box-sizing(content-box);
+  display: inline-block;
+  vertical-align: middle;
+  min-width: 10px;
+  width: 10px;
+  height: 10px;
+  background: white;
+  margin-right: 0.4em;
+  margin-top: 2px;
+  border: 0.3em solid white;
+  cursor: pointer;
+
+  &:not(:local(.hasErrors)) {
+    @include box-shadow(0 0 0 1px #afaba8);
+  }
+  &:local(.hasErrors) {
+    @include box-shadow(0 0 2px 1px #9d2024);
+  }
+
+  &:local(.checked) {
+    background: $color-primary;
+    &:local(.hasErrors) {
+      background: #9d2024;
+    }
+    &:not(:local(.hasErrors)) {
+      @include box-shadow(0 0 0 1px $color-dark-blue);
+    }
+    &:local(.hasErrors) {
+      @include box-shadow(0 0 2px 1px #9d2024);
+    }
+  }
+  &:local(.disabled) {
+    opacity: 0.5;
+    border-color: #bfbfbf;
+    &:not(&:local(.checked)) {
+      background: #bfbfbf;
+    }
+  }
+}

package/dist/components/RadioButtonInput.md

@@ -1,30 +1,30 @@
-Radio button input example:
-
-```js
-<div className="flex">
-<RadioButtonInput onChange={()=>{console.log('onchange')}} inputValue="value 1" name="radio-button-input" id="radio-button-input-1" checked={true}><span>Checked radio button</span></RadioButtonInput>
-<RadioButtonInput onChange={()=>{console.log('onchange')}} inputValue="value 2" name="radio-button-input" id="radio-button-input-2"><span>Unchecked radio button</span></RadioButtonInput>
-<RadioButtonInput onChange={()=>{console.log('onchange')}} inputValue="value 1" name="radio-button-input" id="radio-button-input-3" checked={true} disabled={true}><span>Checked disabled radio button</span></RadioButtonInput>
-<RadioButtonInput onChange={()=>{console.log('onchange')}} inputValue="value 2" name="radio-button-input" id="radio-button-input-4" disabled={true}><span>Unchecked disabled radio button</span></RadioButtonInput>
-</div>
-```
-
-Themed Radio button input example:
-
-```js
-import customTheme from 'data/customTheme';
-<div className="flex">
-  <RadioButtonInput onChange={()=>{console.log('onchange')}} inputValue="value 1" name="themed-radio-button-input" id="themed-radio-button-input-1" checked={true} theme={customTheme}>
-    <span>Checked radio button</span>
-  </RadioButtonInput>
-  <RadioButtonInput onChange={()=>{console.log('onchange')}} inputValue="value 2" name="themed-radio-button-input" id="themed-radio-button-input-2" theme={customTheme}>
-    <span>Unchecked radio button</span>
-  </RadioButtonInput>
-  <RadioButtonInput onChange={()=>{console.log('onchange')}} inputValue="value 1" name="themed-radio-button-input" id="themed-radio-button-input-3" checked={true} theme={customTheme} disabled={true}>
-    <span>Checked disabled radio button</span>
-  </RadioButtonInput>
-  <RadioButtonInput onChange={()=>{console.log('onchange')}} inputValue="value 2" name="themed-radio-button-input" id="themed-radio-button-input-4" theme={customTheme} disabled={true}>
-    <span>Unchecked disabled radio button</span>
-  </RadioButtonInput>
-</div>
-```
+Radio button input example:
+
+```js
+<div className="flex">
+<RadioButtonInput onChange={()=>{console.log('onchange')}} inputValue="value 1" name="radio-button-input" id="radio-button-input-1" checked={true}><span>Checked radio button</span></RadioButtonInput>
+<RadioButtonInput onChange={()=>{console.log('onchange')}} inputValue="value 2" name="radio-button-input" id="radio-button-input-2"><span>Unchecked radio button</span></RadioButtonInput>
+<RadioButtonInput onChange={()=>{console.log('onchange')}} inputValue="value 1" name="radio-button-input" id="radio-button-input-3" checked={true} disabled={true}><span>Checked disabled radio button</span></RadioButtonInput>
+<RadioButtonInput onChange={()=>{console.log('onchange')}} inputValue="value 2" name="radio-button-input" id="radio-button-input-4" disabled={true}><span>Unchecked disabled radio button</span></RadioButtonInput>
+</div>
+```
+
+Themed Radio button input example:
+
+```js
+import customTheme from 'data/customTheme';
+<div className="flex">
+  <RadioButtonInput onChange={()=>{console.log('onchange')}} inputValue="value 1" name="themed-radio-button-input" id="themed-radio-button-input-1" checked={true} theme={customTheme}>
+    <span>Checked radio button</span>
+  </RadioButtonInput>
+  <RadioButtonInput onChange={()=>{console.log('onchange')}} inputValue="value 2" name="themed-radio-button-input" id="themed-radio-button-input-2" theme={customTheme}>
+    <span>Unchecked radio button</span>
+  </RadioButtonInput>
+  <RadioButtonInput onChange={()=>{console.log('onchange')}} inputValue="value 1" name="themed-radio-button-input" id="themed-radio-button-input-3" checked={true} theme={customTheme} disabled={true}>
+    <span>Checked disabled radio button</span>
+  </RadioButtonInput>
+  <RadioButtonInput onChange={()=>{console.log('onchange')}} inputValue="value 2" name="themed-radio-button-input" id="themed-radio-button-input-4" theme={customTheme} disabled={true}>
+    <span>Unchecked disabled radio button</span>
+  </RadioButtonInput>
+</div>
+```