dibk-design 0.3.24 → 0.4.3

package/dist/components/Button.js

@@ -69,14 +69,16 @@ var Button = /*#__PURE__*/function (_React$Component) {
     value: function getThemeStyle(theme, color) {
       return {
         backgroundColor: (0, _theme.getThemePaletteBackgroundColor)(theme, color),
-        color: (0, _theme.getThemePaletteTextColor)(theme, color)
+        color: (0, _theme.getThemePaletteTextColor)(theme, color),
+        borderColor: (0, _theme.getThemePaletteBorderColor)(theme, color),
+        borderWidth: (0, _theme.getThemePaletteBorderColor)(theme, color) ? '1px' : '0'
       };
     }
   }, {
     key: "render",
     value: function render() {
       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());
+      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 : '');
       return /*#__PURE__*/_react.default.createElement("button", _extends({}, this.props, {
         className: className,
         style: themeStyle
@@ -90,15 +92,19 @@ var Button = /*#__PURE__*/function (_React$Component) {
 Button.propTypes = {
   /** Text content inside button */
   content: _propTypes.default.string,
-  color: _propTypes.default.oneOf(['default', 'primary', 'success', 'warning']),
+  color: _propTypes.default.oneOf(['default', 'primary']),
   size: _propTypes.default.oneOf(['small', 'regular']),
   arrow: _propTypes.default.oneOf(['left', 'right']),
-  theme: _propTypes.default.object
+  theme: _propTypes.default.object,
+  disabled: _propTypes.default.bool,
+  noHover: _propTypes.default.bool
 };
 Button.defaultProps = {
   content: 'button',
   color: 'default',
-  size: 'regular'
+  size: 'regular',
+  disabled: false,
+  noHover: false
 };
 var _default = Button;
 exports.default = _default;

package/dist/components/Button.md

@@ -3,17 +3,26 @@ Regular buttons example:
 ```js
 <Button content="Click me" color="default" />
 <Button content="Click me" color="primary" />
-<Button content="Click me" color="success" />
-<Button content="Click me" color="warning" disabled="disabled" />
+<Button content="Click me" color="default" disabled="disabled" />
+<Button content="Click me" color="primary" disabled="disabled" />
 ```
 
 Regular buttons with arrow example:
 
 ```js
-<Button content="Click me" color="default" arrow="left" disabled="disabled"/>
-<Button content="Click me" color="primary" arrow="left" disabled="disabled"/>
-<Button content="Click me" color="success" arrow="right" disabled="disabled"/>
-<Button content="Click me" color="warning" arrow="right" disabled="disabled"/>
+<Button content="Click me" color="default" arrow="left" />
+<Button content="Click me" color="primary" arrow="right" />
+<Button content="Click me" color="default" arrow="left" disabled="disabled" />
+<Button content="Click me" color="primary" arrow="right" disabled="disabled" />
+```
+
+Regular buttons without hover effect example:
+
+```js
+<Button content="Click me" color="default" noHover />
+<Button content="Click me" color="primary" noHover />
+<Button content="Click me" color="default" noHover disabled="disabled" />
+<Button content="Click me" color="primary" noHover disabled="disabled" />
 ```
 
 Small buttons example:
@@ -21,8 +30,8 @@ Small buttons example:
 ```js
 <Button content="Click me" color="default" size="small" />
 <Button content="Click me" color="primary" size="small" />
-<Button content="Click me" color="success" size="small" />
-<Button content="Click me" color="warning" size="small" />
+<Button content="Click me" color="default" size="small" disabled="disabled" />
+<Button content="Click me" color="primary" size="small" disabled="disabled" />
 ```
 
 
@@ -30,9 +39,9 @@ Small buttons with arrow example:
 
 ```js
 <Button content="Click me" color="default" size="small" arrow="left" />
-<Button content="Click me" color="primary" size="small" arrow="left" />
-<Button content="Click me" color="success" size="small" arrow="right" />
-<Button content="Click me" color="warning" size="small" arrow="right" />
+<Button content="Click me" color="primary" size="small" arrow="right" />
+<Button content="Click me" color="default" size="small" arrow="left" disabled="disabled" />
+<Button content="Click me" color="primary" size="small" arrow="right" disabled="disabled" />
 ```
 
 Themed buttons:
@@ -42,7 +51,7 @@ import customTheme from 'data/customTheme';
 <React.Fragment>
 <Button content="Click me" color="default" size="small" theme={customTheme} />
 <Button content="Click me" color="primary" size="small" theme={customTheme} />
-<Button content="Click me" color="success" size="small" theme={customTheme} />
-<Button content="Click me" color="warning" size="small" theme={customTheme} />
+<Button content="Click me" color="default" size="small" theme={customTheme} disabled="disabled" />
+<Button content="Click me" color="primary" size="small" theme={customTheme} disabled="disabled" />
 </React.Fragment>
 ```

package/dist/components/Button.module.scss

@@ -29,68 +29,116 @@
 :local(.button) {
   @include appearance(none);
   @include border-radius(0);
-  @include transition(filter 300ms ease-out);
-  font-family: $default-font;
+  @include transition(
+    filter 300ms ease-out,
+    background-color 300ms ease-out,
+    color 300ms ease-out,
+    border-color 300ms ease-out
+  );
+  font-family: "Altis", sans-serif;
   border-style: solid;
-  border-width: 0;
+  border-width: 1px;
+  $border-color: $color-primary;
   cursor: pointer;
-  line-height: normal;
+  line-height: 1;
   position: relative;
   text-align: center;
   text-decoration: none;
   display: inline-block;
   margin-right: 5px;
   margin-bottom: 5px;
-  font-size: 18px;
-  font-weight: normal;
+  font-size: 20px;
+  font-weight: 500;
 
-  &:hover, &:focus {
-    filter: brightness(90%);
-  }
+  &:local(.hasTheme) {
+    &:hover,
+    &:focus {
+      filter: brightness(90%);
+    }
 
-  &:active {
-    filter: brightness(85%);
+    &:active {
+      filter: brightness(85%);
+    }
   }
 
   &:local(.regular) {
-    padding: 15px 30px;
+    padding: 17px 32px;
   }
 
   &:local(.small) {
-    padding: 1px 30px;
-    height: 46px;
+    padding: 1px 32px;
+    height: 35px;
     min-width: 80px;
   }
 
   &:local(.default) {
-    background-color: $color-default;
+    background-color: #fff;
     color: $color-primary;
+    &:not(:local(.hasTheme)) {
+      &:hover:not(:local(.noHover)),
+      &:active {
+        background-color: $color-primary;
+        color: #fff;
+        &:after,
+        &:before {
+          border-color: #fff;
+        }
+      }
+    }
   }
 
   &:local(.primary) {
     background-color: $color-primary;
     color: #fff;
-  }
-
-  &:local(.success) {
-    background-color: $color-success;
-    color: #fff;
-  }
-
-  &:local(.warning) {
-    background-color: $color-warning;
-    color: #fff;
+    &:not(:local(.hasTheme)) {
+      &:hover:not(:local(.noHover)),
+      &:active {
+        background-color: #fff;
+        color: $color-primary;
+        &:after,
+        &:before {
+          border-color: $color-primary;
+        }
+      }
+    }
   }
 
   &:disabled {
-    cursor: default;
+    &:local(.hasTheme),
+    &:not(:local(.hasTheme)) {
+      &:local(.default),
+      &:local(.primary) {
+        background-color: #fff;
+        cursor: default;
+        opacity: 0.6;
+        color: #afaba8;
+        border: 1px solid #e5e3e1;
+        &:hover,
+        &:focus,
+        &:active {
+          background-color: #fff;
+          cursor: default;
+          opacity: 0.6;
+          color: #afaba8;
+          border: 1px solid #e5e3e1;
+          &:before,
+          &:after {
+            border-color: #afaba8;
+          }
+        }
+        &:before,
+        &:after {
+          border-color: #afaba8;
+        }
+      }
+    }
   }
 
   &:local(.hasArrowLeft) {
     &:before {
       @include transform(rotate(-135deg));
-      @include calc('top', '50% - 0.3rem');
-      content: ' ';
+      @include calc("top", "50% - 0.3rem");
+      content: " ";
       display: inline-block;
       position: absolute;
       left: 1em;
@@ -109,7 +157,7 @@
       }
     }
     &:local(.default) {
-      &:before{
+      &:before {
         border-color: $color-primary;
       }
     }
@@ -118,8 +166,8 @@
   &:local(.hasArrowRight) {
     &:after {
       @include transform(rotate(45deg));
-      @include calc('top', '50% - 0.3rem');
-      content: ' ';
+      @include calc("top", "50% - 0.3rem");
+      content: " ";
       display: inline-block;
       position: absolute;
       left: auto;

package/dist/components/ContentBox.module.scss

@@ -6,84 +6,95 @@
     padding: 20px;
     width: 100%;
     display: block;
-    &:local(.link){
+    &:local(.link) {
         color: $color-primary;
-        @include transition(filter .3s);
-        &:hover, &:focus {
+        @include transition(filter 0.3s);
+        &:hover,
+        &:focus {
             filter: brightness(90%);
         }
         &:active {
-          filter: brightness(85%);
+            filter: brightness(85%);
         }
     }
     &:local(.default) {
         background-color: $color-default;
-        :local(.content){
+        :local(.content),
+        :local(.title) {
             color: #000;
         }
     }
     &:local(.primary) {
         background-color: $color-primary;
         color: #fff;
-        :local(.content){
+        :local(.content),
+        :local(.title) {
             color: #fff;
         }
     }
     &:local(.success) {
         background-color: $color-success;
         color: #fff;
-        :local(.content){
+        :local(.content),
+        :local(.title) {
             color: #fff;
         }
     }
     &:local(.warning) {
         background-color: $color-warning;
         color: #fff;
-        :local(.content){
+        :local(.content),
+        :local(.title) {
             color: #fff;
         }
     }
 
     &:local(.info) {
         background-color: $color-info;
-        :local(.content){
+        :local(.content),
+        :local(.title) {
             color: #000;
         }
     }
     &:local(.lightCyan) {
         background-color: $color-light-cyan;
-        :local(.content){
+        :local(.content),
+        :local(.title) {
             color: #000;
         }
     }
     &:local(.orange) {
         background-color: $color-orange;
         color: #fff;
-        :local(.content){
+        :local(.content),
+        :local(.title) {
             color: #fff;
         }
     }
     &:local(.lightOrange) {
         background-color: $color-light-orange;
-        :local(.content){
+        :local(.content),
+        :local(.title) {
             color: #000;
         }
     }
     &:local(.lime) {
         background-color: $color-lime;
         color: #fff;
-        :local(.content){
+        :local(.content),
+        :local(.title) {
             color: #fff;
         }
     }
     &:local(.lightLime) {
         background-color: $color-light-lime;
-        :local(.content){
+        :local(.content),
+        :local(.title) {
             color: #000;
         }
     }
 
-    :local(.title){
+    :local(.title) {
         &:local(.regular) {
             font-family: "Open Sans";
             font-weight: bold;
@@ -93,7 +104,7 @@
             padding-bottom: 10px;
             border-bottom: 1px solid #e5e3e1;
         }
-        &:local(.large){
+        &:local(.large) {
             font-family: "Open Sans";
             font-weight: normal;
             font-size: 24px;

package/dist/components/Header.js

@@ -49,8 +49,11 @@ var Header = /*#__PURE__*/function (_React$Component) {
   _createClass(Header, [{
     key: "render",
     value: function render() {
+      var bigClass = this.props.big ? _HeaderModule.default.bigHeader : '';
+      var themeClass = this.props.theme ? _HeaderModule.default.hasTheme : '';
+
       var headerElement = /*#__PURE__*/_react.default.createElement('h' + this.props.size, {
-        className: _HeaderModule.default.header
+        className: "".concat(_HeaderModule.default.header, " ").concat(bigClass, " ").concat(themeClass)
       }, this.props.content);
 
       return /*#__PURE__*/_react.default.createElement("div", {
@@ -65,7 +68,9 @@ var Header = /*#__PURE__*/function (_React$Component) {
 Header.propTypes = {
   /** Text content inside button */
   content: _propTypes.default.string.isRequired,
-  size: _propTypes.default.oneOf([1, 2, 3, 4, 5])
+  size: _propTypes.default.oneOf([1, 2, 3, 4, 5]),
+  big: _propTypes.default.bool,
+  theme: _propTypes.default.object
 };
 Header.defaultProps = {
   content: '',

package/dist/components/Header.md

@@ -1,7 +1,8 @@
 Title examples:
 
 ```js
-<Header content="Title with size 1 (default)"/>
+<Header content="Title with size 1"/>
 <Header content="Title with size 2" size={2}/>
 <Header content="Title with size 3" size={3}/>
+<Header content="Big title with size 1" big/>
 ```

package/dist/components/Header.module.scss

@@ -1,30 +1,44 @@
-:local(.headerContainer){
+@import "../style/global.scss";
+
+:local(.headerContainer) {
 	font-size: 22px;
 	padding: 10px 0;
-	:local(.header){
+	:local(.header) {
 		margin: 0;
 		font-weight: normal;
 		line-height: 1.4;
 		font-style: normal;
 		font-size: 18px;
+		&:not(:local(.hasTheme)) {
+			color: $color-primary;
+		}
 	}
-	:local(h1.header){
-		font-family: "Altis-Light","Open Sans",arial,sans-serif;
-		font-size: 50px;
-		line-height: 1.2;
-		overflow: hidden;
-		text-overflow: ellipsis;
+	:local(h1.header) {
+		font-family: "Altis", sans-serif;
+		font-size: 35px;
+		font-style: normal;
+		font-weight: 500;
+		line-height: 1.43;
+		&:local(.bigHeader) {
+			font-family: "Altis-Light", "Open Sans", arial, sans-serif;
+			font-size: 50px;
+			line-height: 1.2;
+			overflow: hidden;
+			text-overflow: ellipsis;
+		}
 	}
-	:local(h2.header){
-		font-family: "Open Sans",arial,sans-serif;
-		font-size: 24px;
-		font-weight: bold;
-		line-height: 1.3;
+	:local(h2.header) {
+		font-family: "Altis", sans-serif;
+		font-size: 26px;
+		font-style: normal;
+		font-weight: 500;
+		line-height: 1.42;
 	}
-	:local(h3.header){
-		font-family: "Open Sans",arial,sans-serif;
-		font-size: 18px;
-		font-weight: bold;
-		line-height: 1.3;
+	:local(h3.header) {
+		font-family: "Altis", arial, sans-serif;
+		font-size: 22px;
+		font-style: italic;
+		font-weight: 600;
+		line-height: 1.42;
 	}
 }