dibk-design 0.3.24 → 0.4.3

package/dist/components/InputField.js

@@ -13,6 +13,8 @@ var _propTypes = _interopRequireDefault(require("prop-types"));
 
 var _Button = _interopRequireDefault(require("./Button"));
 
+var _Label = _interopRequireDefault(require("./Label"));
+
 var _reactDatepicker = _interopRequireWildcard(require("react-datepicker"));
 
 var _dateFns = require("date-fns");
@@ -139,14 +141,13 @@ var InputField = /*#__PURE__*/function (_React$Component) {
 
       return /*#__PURE__*/_react.default.createElement("div", {
         className: "".concat(_InputFieldModule.default.inputField, " ").concat(_InputFieldModule.default[this.props.type])
-      }, /*#__PURE__*/_react.default.createElement("label", {
+      }, /*#__PURE__*/_react.default.createElement(_Label.default, {
         htmlFor: this.props.id
       }, this.props.label, this.props.type === 'file' ? /*#__PURE__*/_react.default.createElement("div", {
         className: _InputFieldModule.default.fileInputContainer
       }, /*#__PURE__*/_react.default.createElement("span", {
         className: _InputFieldModule.default.input
       }, this.props.selectedFileName), this.props.buttonContent ? /*#__PURE__*/_react.default.createElement(_Button.default, {
-        size: "small",
         color: this.props.buttonColor,
         onClick: function onClick() {
           document.getElementById(_this2.props.id).click();

package/dist/components/InputField.module.scss

@@ -4,24 +4,13 @@
   > div {
     display: block;
   }
-  label {
-    cursor: pointer;
-    font-size: 18px;
-    margin: 0 0 4px;
-    font-family: "Open Sans", arial, sans-serif;
-    line-height: 1.3;
-    font-weight: bold;
-    font-style: normal;
-    display: block;
-  }
-
   input,
   &:local(.file) :local(span.input) {
     @include appearance(none);
     @include transition(border-color 0.15s linear, background 0.15s linear);
     @include border-radius(0);
     @include box-shadow(none);
-    height: 46px;
+    height: 56px;
     width: 100%;
     display: block;
     padding: 10px;
@@ -31,7 +20,7 @@
     box-shadow: none;
     color: rgba(0, 0, 0, 0.75);
     font-family: inherit;
-    font-size: 1.125rem;
+    font-size: 19px;
     box-sizing: border-box;
     min-width: 40%;
     border: 1px solid #afaba8;
@@ -52,10 +41,9 @@
     }
 
     &:local(.hasErrors) {
-      border-color: $color-warning;
-      @include box-shadow(0 0 3px $color-warning);
+      border-color: $color-error;
       &:focus {
-        border-color: $color-warning-hover;
+        border-color: $color-error;
         outline-color: #b8565d;
       }
       &[disabled],
@@ -84,8 +72,11 @@
     }
   }
   :local(.errorMessage) {
-    color: $color-warning;
-    font-weight: 300;
-    font-style: italic;
+    color: $color-error-text;
+    font-size: 19px;
+    font-weight: 400;
+    line-height: 1.6;
+    font-family: "Open Sans", sans-serif;
+    overflow-wrap: break-word;
   }
 }

package/dist/components/Label.js

@@ -0,0 +1,80 @@
+"use strict";
+
+function _typeof(obj) { "@babel/helpers - typeof"; if (typeof Symbol === "function" && typeof Symbol.iterator === "symbol") { _typeof = function _typeof(obj) { return typeof obj; }; } else { _typeof = function _typeof(obj) { return obj && typeof Symbol === "function" && obj.constructor === Symbol && obj !== Symbol.prototype ? "symbol" : typeof obj; }; } return _typeof(obj); }
+
+Object.defineProperty(exports, "__esModule", {
+  value: true
+});
+exports.default = void 0;
+
+var _react = _interopRequireDefault(require("react"));
+
+var _propTypes = _interopRequireDefault(require("prop-types"));
+
+var _LabelModule = _interopRequireDefault(require("./Label.module.scss"));
+
+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 ownKeys(object, enumerableOnly) { var keys = Object.keys(object); if (Object.getOwnPropertySymbols) { var symbols = Object.getOwnPropertySymbols(object); if (enumerableOnly) { symbols = symbols.filter(function (sym) { return Object.getOwnPropertyDescriptor(object, sym).enumerable; }); } keys.push.apply(keys, symbols); } return keys; }
+
+function _objectSpread(target) { for (var i = 1; i < arguments.length; i++) { var source = arguments[i] != null ? arguments[i] : {}; if (i % 2) { ownKeys(Object(source), true).forEach(function (key) { _defineProperty(target, key, source[key]); }); } else if (Object.getOwnPropertyDescriptors) { Object.defineProperties(target, Object.getOwnPropertyDescriptors(source)); } else { ownKeys(Object(source)).forEach(function (key) { Object.defineProperty(target, key, Object.getOwnPropertyDescriptor(source, key)); }); } } return target; }
+
+function _defineProperty(obj, key, value) { if (key in obj) { Object.defineProperty(obj, key, { value: value, enumerable: true, configurable: true, writable: true }); } else { obj[key] = value; } return obj; }
+
+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); } }
+
+function _createClass(Constructor, protoProps, staticProps) { if (protoProps) _defineProperties(Constructor.prototype, protoProps); if (staticProps) _defineProperties(Constructor, staticProps); return Constructor; }
+
+function _inherits(subClass, superClass) { if (typeof superClass !== "function" && superClass !== null) { throw new TypeError("Super expression must either be null or a function"); } subClass.prototype = Object.create(superClass && superClass.prototype, { constructor: { value: subClass, writable: true, configurable: true } }); if (superClass) _setPrototypeOf(subClass, superClass); }
+
+function _setPrototypeOf(o, p) { _setPrototypeOf = Object.setPrototypeOf || function _setPrototypeOf(o, p) { o.__proto__ = p; return o; }; return _setPrototypeOf(o, p); }
+
+function _createSuper(Derived) { var hasNativeReflectConstruct = _isNativeReflectConstruct(); return function _createSuperInternal() { var Super = _getPrototypeOf(Derived), result; if (hasNativeReflectConstruct) { var NewTarget = _getPrototypeOf(this).constructor; result = Reflect.construct(Super, arguments, NewTarget); } else { result = Super.apply(this, arguments); } return _possibleConstructorReturn(this, result); }; }
+
+function _possibleConstructorReturn(self, call) { if (call && (_typeof(call) === "object" || typeof call === "function")) { return call; } else if (call !== void 0) { throw new TypeError("Derived constructors may only return object or undefined"); } return _assertThisInitialized(self); }
+
+function _assertThisInitialized(self) { if (self === void 0) { throw new ReferenceError("this hasn't been initialised - super() hasn't been called"); } return self; }
+
+function _isNativeReflectConstruct() { if (typeof Reflect === "undefined" || !Reflect.construct) return false; if (Reflect.construct.sham) return false; if (typeof Proxy === "function") return true; try { Boolean.prototype.valueOf.call(Reflect.construct(Boolean, [], function () {})); return true; } catch (e) { return false; } }
+
+function _getPrototypeOf(o) { _getPrototypeOf = Object.setPrototypeOf ? Object.getPrototypeOf : function _getPrototypeOf(o) { return o.__proto__ || Object.getPrototypeOf(o); }; return _getPrototypeOf(o); }
+
+var Label = /*#__PURE__*/function (_React$Component) {
+  _inherits(Label, _React$Component);
+
+  var _super = _createSuper(Label);
+
+  function Label() {
+    _classCallCheck(this, Label);
+
+    return _super.apply(this, arguments);
+  }
+
+  _createClass(Label, [{
+    key: "render",
+    value: function render() {
+      var labelProps = _objectSpread({}, this.props);
+
+      delete labelProps.inline;
+      var className = "".concat(_LabelModule.default.label, " ").concat(this.props.inline ? _LabelModule.default.inline : '');
+      return /*#__PURE__*/_react.default.createElement("label", _extends({}, labelProps, {
+        className: className
+      }), this.props.children);
+    }
+  }]);
+
+  return Label;
+}(_react.default.Component);
+
+Label.propTypes = {
+  inline: _propTypes.default.bool
+};
+Label.defaultProps = {
+  inline: false
+};
+var _default = Label;
+exports.default = _default;

package/dist/components/Label.md

@@ -0,0 +1,8 @@
+Labels example:
+
+```js
+<Label>Default label</Label>
+<Label>Default label 2</Label>
+<Label inline>Inline label </Label> 
+<Label inline>Inline label 2</Label>
+```

package/dist/components/Label.module.scss

@@ -0,0 +1,14 @@
+:local(.label) {
+    color: #000;
+    cursor: pointer;
+    display: block;
+    font-size: 1rem;
+    font-weight: 400;
+    line-height: 1.5;
+    margin-bottom: 0;
+    font-family: "Open Sans", sans-serif;
+    overflow-wrap: break-word;
+    &:local(.inline) {
+        display: inline-block;
+    }
+}

package/dist/components/Select.js

@@ -9,6 +9,8 @@ var _react = _interopRequireDefault(require("react"));
 
 var _propTypes = _interopRequireDefault(require("prop-types"));
 
+var _Label = _interopRequireDefault(require("./Label"));
+
 var _theme = require("../functions/theme");
 
 var _SelectModule = _interopRequireDefault(require("./Select.module.scss"));
@@ -127,7 +129,7 @@ var Select = /*#__PURE__*/function (_React$Component) {
       var value = this.props.value ? this.props.value : "";
       return /*#__PURE__*/_react.default.createElement("div", {
         className: _SelectModule.default.select
-      }, /*#__PURE__*/_react.default.createElement("label", {
+      }, /*#__PURE__*/_react.default.createElement(_Label.default, {
         htmlFor: this.props.id
       }, this.props.label), !this.props.contentOnly ? /*#__PURE__*/_react.default.createElement(_react.default.Fragment, null, /*#__PURE__*/_react.default.createElement("div", {
         className: _SelectModule.default.selectContainer

package/dist/components/Select.module.scss

@@ -1,21 +1,10 @@
 @import "../style/global.scss";
 
 :local(.select) {
-	label {
-		cursor: pointer;
-		font-size: 18px;
-		margin: 0 0 4px;
-		font-family: "Open Sans", arial, sans-serif;
-		line-height: 1.3;
-		font-weight: bold;
-		font-style: normal;
-		display: block;
-	}
-
 	:local(.selectContainer) {
 		position: relative;
 
-		:local(.selectListArrow) {
+		:local(.selectListArrow_old) {
 			position: absolute;
 			display: block;
 			content: "";
@@ -29,15 +18,40 @@
 			pointer-events: none;
 		}
 
+		:local(.selectListArrow) {
+			box-sizing: border-box;
+			position: absolute;
+			top: 20px;
+			right: 20px;
+			display: block;
+			width: 12px;
+			height: 12px;
+			border-radius: 100px;
+
+			&::after {
+				content: "";
+				display: block;
+				box-sizing: border-box;
+				position: absolute;
+				width: 12px;
+				height: 12px;
+				border-bottom: 2px solid;
+				border-right: 2px solid;
+				transform: translateY(-30%) rotate(45deg);
+				transition: transform 0.3s ease-in-out;
+			}
+		}
+
 		select {
 			@include border-radius(0);
 			@include transition(border-color 0.15s linear);
 			@include appearance(none);
 			@include box-shadow(none);
+			height: 56px;
 			color: rgba(0, 0, 0, 0.75);
 			width: 100%;
 			font-family: inherit;
-			font-size: 1.125rem;
+			font-size: 19px;
 			padding: 10px 40px 10px 10px;
 			border: 1px solid #afaba8;
 			border-radius: 0;
@@ -61,10 +75,9 @@
 			}
 
 			&:local(.hasErrors) {
-				border-color: $color-warning;
-      			@include box-shadow(0 0 3px $color-warning);
+				border-color: $color-error;
 				&:focus {
-					border-color: $color-warning-hover;
+					border-color: $color-error;
 					outline-color: #b8565d;
 				}
 				&[disabled],
@@ -77,8 +90,11 @@
 		}
 	}
 	:local(.errorMessage) {
-		color: $color-warning;
-		font-weight: 300;
-		font-style: italic;
+		color: $color-error-text;
+		font-size: 19px;
+		font-weight: 400;
+		line-height: 1.6;
+		font-family: "Open Sans", sans-serif;
+		overflow-wrap: break-word;
 	}
 }

package/dist/components/Textarea.js

@@ -0,0 +1,139 @@
+"use strict";
+
+function _typeof(obj) { "@babel/helpers - typeof"; if (typeof Symbol === "function" && typeof Symbol.iterator === "symbol") { _typeof = function _typeof(obj) { return typeof obj; }; } else { _typeof = function _typeof(obj) { return obj && typeof Symbol === "function" && obj.constructor === Symbol && obj !== Symbol.prototype ? "symbol" : typeof obj; }; } return _typeof(obj); }
+
+Object.defineProperty(exports, "__esModule", {
+  value: true
+});
+exports.default = void 0;
+
+var _react = _interopRequireDefault(require("react"));
+
+var _propTypes = _interopRequireDefault(require("prop-types"));
+
+var _Label = _interopRequireDefault(require("./Label"));
+
+var _theme = require("../functions/theme");
+
+var _TextareaModule = _interopRequireDefault(require("./Textarea.module.scss"));
+
+function _interopRequireDefault(obj) { return obj && obj.__esModule ? obj : { default: obj }; }
+
+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); } }
+
+function _createClass(Constructor, protoProps, staticProps) { if (protoProps) _defineProperties(Constructor.prototype, protoProps); if (staticProps) _defineProperties(Constructor, staticProps); return Constructor; }
+
+function _inherits(subClass, superClass) { if (typeof superClass !== "function" && superClass !== null) { throw new TypeError("Super expression must either be null or a function"); } subClass.prototype = Object.create(superClass && superClass.prototype, { constructor: { value: subClass, writable: true, configurable: true } }); if (superClass) _setPrototypeOf(subClass, superClass); }
+
+function _setPrototypeOf(o, p) { _setPrototypeOf = Object.setPrototypeOf || function _setPrototypeOf(o, p) { o.__proto__ = p; return o; }; return _setPrototypeOf(o, p); }
+
+function _createSuper(Derived) { var hasNativeReflectConstruct = _isNativeReflectConstruct(); return function _createSuperInternal() { var Super = _getPrototypeOf(Derived), result; if (hasNativeReflectConstruct) { var NewTarget = _getPrototypeOf(this).constructor; result = Reflect.construct(Super, arguments, NewTarget); } else { result = Super.apply(this, arguments); } return _possibleConstructorReturn(this, result); }; }
+
+function _possibleConstructorReturn(self, call) { if (call && (_typeof(call) === "object" || typeof call === "function")) { return call; } else if (call !== void 0) { throw new TypeError("Derived constructors may only return object or undefined"); } return _assertThisInitialized(self); }
+
+function _assertThisInitialized(self) { if (self === void 0) { throw new ReferenceError("this hasn't been initialised - super() hasn't been called"); } return self; }
+
+function _isNativeReflectConstruct() { if (typeof Reflect === "undefined" || !Reflect.construct) return false; if (Reflect.construct.sham) return false; if (typeof Proxy === "function") return true; try { Boolean.prototype.valueOf.call(Reflect.construct(Boolean, [], function () {})); return true; } catch (e) { return false; } }
+
+function _getPrototypeOf(o) { _getPrototypeOf = Object.setPrototypeOf ? Object.getPrototypeOf : function _getPrototypeOf(o) { return o.__proto__ || Object.getPrototypeOf(o); }; return _getPrototypeOf(o); }
+
+var Textarea = /*#__PURE__*/function (_React$Component) {
+  _inherits(Textarea, _React$Component);
+
+  var _super = _createSuper(Textarea);
+
+  function Textarea() {
+    _classCallCheck(this, Textarea);
+
+    return _super.apply(this, arguments);
+  }
+
+  _createClass(Textarea, [{
+    key: "getThemeErrorInputStyle",
+    value: function getThemeErrorInputStyle(theme) {
+      return {
+        boxShadow: "0 0 3px ".concat((0, _theme.getThemePaletteBackgroundColor)(theme, 'warning')),
+        borderColor: (0, _theme.getThemePaletteBackgroundColor)(theme, 'warning')
+      };
+    }
+  }, {
+    key: "getThemeErrorMessageStyle",
+    value: function getThemeErrorMessageStyle(theme) {
+      return {
+        color: (0, _theme.getThemePaletteBackgroundColor)(theme, 'warning')
+      };
+    }
+  }, {
+    key: "renderValueAsText",
+    value: function renderValueAsText(value, defaultContent) {
+      return value ? value : defaultContent;
+    }
+  }, {
+    key: "renderInputField",
+    value: function renderInputField() {
+      return /*#__PURE__*/_react.default.createElement("textarea", {
+        name: this.props.name,
+        readOnly: this.props.readOnly,
+        disabled: this.props.disabled,
+        type: this.props.type,
+        id: this.props.id,
+        onChange: this.props.onChange,
+        onBlur: this.props.onBlur,
+        value: this.props.value ? this.props.value : '',
+        placeholder: this.props.placeholder,
+        rows: this.props.rows,
+        className: this.props.hasErrors ? _TextareaModule.default.hasErrors : '',
+        "aria-required": this.props.mandatory,
+        style: this.props.hasErrors ? this.getThemeErrorInputStyle(this.props.theme) : null
+      });
+    }
+  }, {
+    key: "render",
+    value: function render() {
+      return /*#__PURE__*/_react.default.createElement("div", {
+        className: _TextareaModule.default.textarea
+      }, /*#__PURE__*/_react.default.createElement(_Label.default, {
+        htmlFor: this.props.id
+      }, this.props.label), !this.props.contentOnly ? this.renderInputField() : /*#__PURE__*/_react.default.createElement("span", null, this.renderValueAsText(this.props.value, this.props.defaultContent)), /*#__PURE__*/_react.default.createElement("span", {
+        className: _TextareaModule.default.errorMessage,
+        style: this.getThemeErrorMessageStyle(this.props.theme)
+      }, this.props.errorMessage ? this.props.errorMessage : ''));
+    }
+  }]);
+
+  return Textarea;
+}(_react.default.Component);
+
+Textarea.propTypes = {
+  /** Text content inside list item */
+  id: _propTypes.default.string.isRequired,
+  onChange: _propTypes.default.func.isRequired,
+  onBlur: _propTypes.default.func,
+  name: _propTypes.default.string,
+  type: _propTypes.default.string,
+  value: _propTypes.default.string,
+  rows: _propTypes.default.string,
+  label: _propTypes.default.oneOfType([_propTypes.default.string, _propTypes.default.arrayOf(_propTypes.default.oneOfType([_propTypes.default.string, _propTypes.default.object]))]),
+  contentOnly: _propTypes.default.bool,
+  placeholder: _propTypes.default.string,
+  defaultContent: _propTypes.default.string,
+  hasErrors: _propTypes.default.bool,
+  errorMessage: _propTypes.default.oneOfType([_propTypes.default.string, _propTypes.default.arrayOf(_propTypes.default.oneOfType([_propTypes.default.string, _propTypes.default.object]))]),
+  mandatory: _propTypes.default.bool,
+  theme: _propTypes.default.object
+};
+Textarea.defaultProps = {
+  name: '',
+  type: 'text',
+  label: '',
+  contentOnly: false,
+  placeholder: '',
+  defaultContent: '',
+  hasErrors: false,
+  errorMessage: '',
+  mandatory: false
+};
+var _default = Textarea;
+exports.default = _default;

package/dist/components/Textarea.md

@@ -0,0 +1,23 @@
+Input field example:
+
+```js
+<Textarea id="textInput1" onChange={()=>{console.log('onchange')}} mandatory={true} />
+<Textarea id="textInput2" onChange={()=>{console.log('onchange')}} value="Textarea with value" />
+<Textarea id="textInput3" onChange={()=>{console.log('onchange')}} value="Textarea with label and value" label="Textarea with label and value" />
+<Textarea id="textInput4" onChange={()=>{console.log('onchange')}} value="Textarea with link in label" label={['Textarea with ', <a key="labelLink" href="#">link</a>, ' in label']} />
+<Textarea id="textInput5" onChange={()=>{console.log('onchange')}} value="Textarea with label, value, errors and error message" label="Textarea with label, value, errors and error message" hasErrors={true} errorMessage="Wrong value" />
+<Textarea id="textInput6" onChange={()=>{console.log('onchange')}} readOnly value="Read only Textarea with label and value" label="Read only Textarea with label and value" />
+<Textarea id="textInput7" onChange={()=>{console.log('onchange')}} disabled value="Disabled Textarea with label and value" label="Disabled Textarea with label and value" />
+<Textarea id="textInput7" onChange={()=>{console.log('onchange')}} value="Value for Textarea" label="Textarea with label, value and contentOnly set to true" contentOnly={true} />
+<Textarea id="textInput8" onChange={() => {console.log('onChange')}} label="Textarea without value, contentOnly set to true and defaultContent" contentOnly={true} defaultContent="Please insert a value" />
+```
+
+Themed Input field example:
+
+```js
+import customTheme from 'data/customTheme';
+<React.Fragment>
+    <Textarea id="themedTextInput4" onChange={()=>{console.log('onchange')}} value="Textarea with link in label" label={['Textarea with ', <a key="labelLink" href="#">link</a>, ' in label']} theme={customTheme} />
+    <Textarea id="themedTextInput5" onChange={()=>{console.log('onchange')}} value="Textarea with label, value, errors and error message" label="Textarea with label, value, errors and error message" hasErrors={true} errorMessage="Wrong value" theme={customTheme} />
+</React.Fragment>
+```