dibk-design 0.4.11 → 0.4.15

package/dist/components/Button.js

@@ -86,6 +86,7 @@ var Button = /*#__PURE__*/function (_React$Component) {
       var buttonProps = _objectSpread({}, this.props);
 
       delete buttonProps.noHover;
+      delete buttonProps.rounded;
       var themeStyle = this.props.theme ? this.getThemeStyle(this.props.theme, this.props.color) : null;
       var className = "".concat(_ButtonModule.default.button, " ").concat(_ButtonModule.default[this.props.color], " ").concat(_ButtonModule.default[this.props.size], " ").concat(this.getArrowClass(), " ").concat(this.props.theme ? _ButtonModule.default.hasTheme : '', " ").concat(this.props.noHover ? _ButtonModule.default.noHover : '', " ").concat(this.props.rounded ? _ButtonModule.default.rounded : '');
       return /*#__PURE__*/_react.default.createElement("button", _extends({}, buttonProps, {

package/dist/components/CheckBoxIcon.module.scss

@@ -17,6 +17,7 @@
   &:local(.showBox) {
     @include box-shadow(0 0 0 1px #afaba8);
     margin-right: 0.4em;
+    margin-top: 2px;
     background: white;
   }
 

package/dist/components/CheckBoxListItem.js

@@ -52,7 +52,7 @@ var CheckBoxListItem = /*#__PURE__*/function (_React$Component) {
     key: "render",
     value: function render() {
       return /*#__PURE__*/_react.default.createElement("div", {
-        className: "".concat(_CheckBoxListItemModule.default.checkBoxListItem, " ").concat(this.props.checked ? _CheckBoxListItemModule.default.checked : '', " ").concat(this.props.contentOnly ? _CheckBoxListItemModule.default.contentOnly : '')
+        className: "".concat(_CheckBoxListItemModule.default.checkBoxListItem, " ").concat(this.props.checked ? _CheckBoxListItemModule.default.checked : '', " ").concat(this.props.contentOnly ? _CheckBoxListItemModule.default.contentOnly : '', " ").concat(this.props.compact ? _CheckBoxListItemModule.default.compact : '')
       }, /*#__PURE__*/_react.default.createElement(_CheckBoxInput.default, {
         onChange: this.props.onChange,
         checked: this.props.checked,
@@ -73,7 +73,8 @@ CheckBoxListItem.propTypes = {
   name: _propTypes.default.string,
   onChange: _propTypes.default.func.isRequired,
   contentOnly: _propTypes.default.bool,
-  theme: _propTypes.default.object
+  theme: _propTypes.default.object,
+  compact: _propTypes.default.bool
 };
 CheckBoxListItem.defaultProps = {
   checked: false,

package/dist/components/CheckBoxListItem.md

@@ -15,6 +15,23 @@ Check box list item example:
 </CheckBoxListItem>
 ```
 
+Compact check box list item example:
+
+```js
+<CheckBoxListItem onChange={()=>{console.log('onchange')}} checked={true} name="checkbox" id="compact-checkboxListItem-1" compact>
+  Label for checked checkbox
+</CheckBoxListItem>
+<CheckBoxListItem onChange={()=>{console.log('onchange')}} name="checkbox" id="compact-checkboxListItem-2" compact>
+  Label for unchecked checkbox
+</CheckBoxListItem>
+<CheckBoxListItem onChange={()=>{console.log('onchange')}} checked={true} name="checkbox" id="compact-checkboxListItem-3" contentOnly={true} compact>
+  Label for checked checkbox with content only
+</CheckBoxListItem>
+<CheckBoxListItem onChange={()=>{console.log('onchange')}} name="checkbox" id="compact-checkboxListItem-4" contentOnly={true} compact>
+  Label for unchecked checkbox with content only
+</CheckBoxListItem>
+```
+
 Themed Check box list item example:
 ```js
 import customTheme from 'data/customTheme';

package/dist/components/CheckBoxListItem.module.scss

@@ -2,7 +2,6 @@
 
 :local(.checkBoxListItem) {
   @include box-sizing(content-box);
-  @include box-shadow(0 0 2px $color-dark-blue);
   @include border-radius(5px);
   @include transition(all 0.1s ease-in-out);
   display: -webkit-box;
@@ -19,13 +18,13 @@
   font-size: 1rem;
   color: #000;
 
-  &:not(:local(.contentOnly)) {
+  &:not(:local(.contentOnly)):not(:local(.compact)) {
+    @include box-shadow(0 0 2px $color-dark-blue);
     background: white;
     margin-bottom: 10px;
   }
 
   &:local(.contentOnly) {
-    @include box-shadow(none);
     cursor: auto;
     label {
       cursor: auto;
@@ -33,11 +32,11 @@
     }
   }
 
-  &:local(.checked):not(:local(.contentOnly)) {
+  &:local(.checked):not(:local(.contentOnly)):not(:local(.compact)) {
     @include box-shadow(0 0 0 1px $color-dark-blue, 0 0 4px 0 $color-dark-blue);
   }
 
-  &:not(:local(.checked)):not(:local(.contentOnly)):hover {
+  &:not(:local(.checked)):not(:local(.contentOnly)):not(:local(.compact)):hover {
     @include box-shadow(0 0 6px $color-dark-blue);
   }
 
@@ -52,6 +51,12 @@
     cursor: pointer;
   }
 
+  &:local(.compact){
+    label {
+      padding: 4px;
+    }
+  }
+
   input[type="checkbox"] {
     opacity: 0;
     position: absolute;

package/dist/components/NavigationBar.js

@@ -21,6 +21,8 @@ var _NavigationBarModule = _interopRequireDefault(require("./NavigationBar.modul
 
 function _interopRequireDefault(obj) { return obj && obj.__esModule ? obj : { default: obj }; }
 
+function _extends() { _extends = Object.assign || function (target) { for (var i = 1; i < arguments.length; i++) { var source = arguments[i]; for (var key in source) { if (Object.prototype.hasOwnProperty.call(source, key)) { target[key] = source[key]; } } } return target; }; return _extends.apply(this, arguments); }
+
 function _classCallCheck(instance, Constructor) { if (!(instance instanceof Constructor)) { throw new TypeError("Cannot call a class as a function"); } }
 
 function _defineProperties(target, props) { for (var i = 0; i < props.length; i++) { var descriptor = props[i]; descriptor.enumerable = descriptor.enumerable || false; descriptor.configurable = true; if ("value" in descriptor) descriptor.writable = true; Object.defineProperty(target, descriptor.key, descriptor); } }
@@ -155,9 +157,13 @@ var NavigationBar = /*#__PURE__*/function (_React$Component) {
         alt: "DIBK logo",
         src: _dibkLogoMobile.default
       });
-      return logoLink && logoLink.length ? /*#__PURE__*/_react.default.createElement("a", {
+      var logoLinkProps = {
+        target: this.props.openLogoLinkInNewTab ? '_blank' : null,
+        rel: this.props.openLogoLinkInNewTab ? 'noopener noreferrer' : null
+      };
+      return logoLink && logoLink.length ? /*#__PURE__*/_react.default.createElement("a", _extends({}, logoLinkProps, {
         href: logoLink
-      }, logoElement) : logoElement;
+      }), logoElement) : logoElement;
     }
   }, {
     key: "render",
@@ -217,6 +223,9 @@ NavigationBar.propTypes = {
   /** Link for logo */
   logoLink: _propTypes.default.string,
 
+  /** Opens logo link in a new tab on click */
+  openLogoLinkInNewTab: _propTypes.default.bool,
+
   /** Theme for navigation bar */
   theme: _propTypes.default.object
 };

package/dist/components/NavigationBar.md

@@ -4,11 +4,22 @@ NavigationBar example:
 <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']} >

package/dist/components/RadioButtonIcon.module.scss

@@ -12,6 +12,7 @@
   height: 10px;
   background: white;
   margin-right: .4em;
+  margin-top: 2px;
   border: 0.3em solid white;
 
   &:local(.checked) {

package/dist/components/RadioButtonListItem.js

@@ -52,7 +52,7 @@ var RadioButtonListItem = /*#__PURE__*/function (_React$Component) {
     key: "render",
     value: function render() {
       return /*#__PURE__*/_react.default.createElement("div", {
-        className: _RadioButtonListItemModule.default.radioButtonListItem
+        className: "".concat(_RadioButtonListItemModule.default.radioButtonListItem, " ").concat(this.props.compact ? _RadioButtonListItemModule.default.compact : '')
       }, /*#__PURE__*/_react.default.createElement(_RadioButtonInput.default, {
         onChange: this.props.onChange,
         inputValue: this.props.inputValue,

package/dist/components/RadioButtonListItem.md

@@ -9,6 +9,17 @@ Radio button list item example:
 </RadioButtonListItem>
 ```
 
+Compact radio button list item example:
+
+```js
+<RadioButtonListItem onChange={()=>{console.log('onchange')}} inputValue="value 1" name="compact-radio-button-list-item" id="compact-radio-button-list-item-1" checked={true} compact>
+  Checked radio button
+</RadioButtonListItem>
+<RadioButtonListItem onChange={()=>{console.log('onchange')}} inputValue="value 2" name="compact-radio-button-list-item" id="compact-radio-button-list-item-2" compact>
+  Checked radio button
+</RadioButtonListItem>
+```
+
 Themed Radio button list item example:
 
 ```js

package/dist/components/RadioButtonListItem.module.scss

@@ -2,7 +2,6 @@
 
 :local(.radioButtonListItem) {
   @include box-sizing(content-box);
-  @include box-shadow(0 0 2px $color-dark-blue);
   @include border-radius(5px);
   @include transition(all 0.1s ease-in-out);
   display: -webkit-box;
@@ -19,13 +18,13 @@
   font-size: 1rem;
   color: #000;
 
-  &:not(:local(.contentOnly)) {
+  &:not(:local(.contentOnly)):not(:local(.compact)) {
+    @include box-shadow(0 0 2px $color-dark-blue);
     background: white;
     margin-bottom: 10px;
   }
 
   &:local(.contentOnly) {
-    @include box-shadow(none);
     cursor: auto;
     label {
       cursor: auto;
@@ -33,11 +32,11 @@
     }
   }
 
-  &:local(.checked):not(:local(.contentOnly)) {
+  &:local(.checked):not(:local(.contentOnly)):not(:local(.compact)) {
     @include box-shadow(0 0 0 1px $color-dark-blue, 0 0 4px 0 $color-dark-blue);
   }
 
-  &:not(:local(.checked)):not(:local(.contentOnly)):hover {
+  &:not(:local(.checked)):not(:local(.contentOnly)):not(:local(.compact)):hover {
     @include box-shadow(0 0 6px $color-dark-blue);
   }
 
@@ -52,6 +51,12 @@
     cursor: pointer;
   }
 
+  &:local(.compact) {
+    label {
+      padding: 4px;
+    }
+  }
+
   input[type="radio"] {
     opacity: 0;
     position: absolute;

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "dibk-design",
-  "version": "0.4.11",
+  "version": "0.4.15",
   "private": false,
   "main": "dist/index.js",
   "module": "dist/index.js",