dibk-design 0.3.24

package/README.md

@@ -0,0 +1,3 @@
+# DIBK design
+
+Shared components for DIBK applications

package/dist/components/Accordion.js

@@ -0,0 +1,120 @@
+"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 _AccordionModule = _interopRequireDefault(require("./Accordion.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 Accordion = /*#__PURE__*/function (_React$Component) {
+  _inherits(Accordion, _React$Component);
+
+  var _super = _createSuper(Accordion);
+
+  function Accordion(props) {
+    var _this;
+
+    _classCallCheck(this, Accordion);
+
+    _this = _super.call(this, props);
+    _this.state = {
+      expanded: _this.props.expanded,
+      initialized: _this.props.expanded
+    };
+    _this.handleToggleExpand = _this.handleToggleExpand.bind(_assertThisInitialized(_this));
+    return _this;
+  }
+
+  _createClass(Accordion, [{
+    key: "handleToggleExpand",
+    value: function handleToggleExpand() {
+      this.setState({
+        expanded: !this.state.expanded,
+        initialized: true
+      });
+    }
+  }, {
+    key: "componentDidUpdate",
+    value: function componentDidUpdate(prevProps) {
+      if (this.props.expanded !== prevProps.expanded) {
+        this.setState({
+          expanded: this.props.expanded
+        });
+      }
+    }
+  }, {
+    key: "renderPanel",
+    value: function renderPanel() {
+      return /*#__PURE__*/_react.default.createElement("div", {
+        className: _AccordionModule.default.panel,
+        onClick: this.handleToggleExpand
+      }, /*#__PURE__*/_react.default.createElement("span", {
+        className: _AccordionModule.default.panelText
+      }, this.props.title), /*#__PURE__*/_react.default.createElement("span", {
+        className: "".concat(_AccordionModule.default.panelChevron, " ").concat(this.state.expanded ? _AccordionModule.default.expanded : '')
+      }));
+    }
+  }, {
+    key: "render",
+    value: function render() {
+      var className = "".concat(_AccordionModule.default.accordion, " ").concat(this.props.color ? _AccordionModule.default[this.props.color] : '');
+      return /*#__PURE__*/_react.default.createElement("div", {
+        className: className
+      }, this.renderPanel(), /*#__PURE__*/_react.default.createElement("div", {
+        className: "".concat(_AccordionModule.default.content, " ").concat(this.state.initialized ? _AccordionModule.default.initialized : '', " ").concat(this.state.expanded ? _AccordionModule.default.expanded : '')
+      }, this.props.children));
+    }
+  }]);
+
+  return Accordion;
+}(_react.default.Component);
+
+Accordion.propTypes = {
+  /** Content title inside box */
+  title: _propTypes.default.string,
+  titleSize: _propTypes.default.oneOf(['regular', 'large']),
+
+  /** Text content inside box */
+  content: _propTypes.default.string,
+  color: _propTypes.default.oneOf(['default', 'primary', 'success', 'warning', 'info', 'lightCyan', 'orange', 'lightOrange', 'lime', 'lightLime']),
+  expanded: _propTypes.default.bool
+};
+Accordion.defaultProps = {
+  title: null,
+  titleSize: 'regular',
+  href: null,
+  content: '',
+  color: 'default',
+  expanded: false
+};
+var _default = Accordion;
+exports.default = _default;

package/dist/components/Accordion.md

@@ -0,0 +1,15 @@
+Accordions example:
+
+
+```js
+<Accordion color="default" title="Accordion title">Accordion with default color</Accordion>
+<Accordion color="primary" title="Accordion title">Accordion with primary color</Accordion>
+<Accordion color="success" title="Accordion title">Accordion with success color</Accordion>
+<Accordion color="warning" title="Accordion title">Accordion with warning color</Accordion>
+<Accordion color="info" title="Accordion title">Accordion with info color</Accordion>
+<Accordion color="lightCyan" title="Accordion title">Accordion with light cyan color</Accordion>
+<Accordion color="orange" title="Accordion title">Accordion with orange color</Accordion>
+<Accordion color="lightOrange" title="Accordion title">Accordion with light orange color</Accordion>
+<Accordion color="lime" title="Accordion title" titleSize="large">Accordion with lime color</Accordion>
+<Accordion color="lightLime" title="Accordion title">Accordion with light lime color</Accordion>
+```

package/dist/components/Accordion.module.scss

@@ -0,0 +1,180 @@
+@import "../style/global.scss";
+
+@keyframes show {
+    0% {
+        opacity: 0;
+        margin-top: 0px;
+        padding: 0 30px 0;
+        line-height: 0;
+        max-height: 0;
+    }
+    100% {
+        opacity: 1;
+        margin-top: 0px;
+        padding: 8px 30px 15px;
+        line-height: inherit;
+        max-height: 1000px;
+    }
+}
+
+@keyframes hide {
+    100% {
+        opacity: 0;
+        margin-top: 0px;
+        padding: 0 30px 0;
+        line-height: 0;
+        max-height: 0;
+    }
+    0% {
+        opacity: 1;
+        margin-top: 0px;
+        padding: 8px 30px 15px;
+        line-height: inherit;
+        max-height: 1000px;
+    }
+}
+
+:local(.accordion) {
+    font-family: $default-font;
+    text-decoration: none;
+    width: 100%;
+    display: block;
+    &:local(.default) {
+        background-color: $color-default;
+        :local(.panel) span,
+        :local(.content) {
+            color: #000;
+        }
+    }
+    &:local(.primary) {
+        background-color: $color-primary;
+        color: #fff;
+        :local(.panel) span,
+        :local(.content) {
+            color: #fff;
+        }
+    }
+    &:local(.success) {
+        background-color: $color-success;
+        color: #fff;
+        :local(.panel) span,
+        :local(.content) {
+            color: #fff;
+        }
+    }
+    &:local(.warning) {
+        background-color: $color-warning;
+        color: #fff;
+        :local(.panel) span,
+        :local(.content) {
+            color: #fff;
+        }
+    }
+
+    &:local(.info) {
+        background-color: $color-info;
+        :local(.panel) span,
+        :local(.content) {
+            color: #000;
+        }
+    }
+    &:local(.lightCyan) {
+        background-color: $color-light-cyan;
+        :local(.panel) span,
+        :local(.content) {
+            color: #000;
+        }
+    }
+    &:local(.orange) {
+        background-color: $color-orange;
+        color: #fff;
+        :local(.panel) span,
+        :local(.content) {
+            color: #fff;
+        }
+    }
+    &:local(.lightOrange) {
+        background-color: $color-light-orange;
+        :local(.panel) span,
+        :local(.content) {
+            color: #000;
+        }
+    }
+    &:local(.lime) {
+        background-color: $color-lime;
+        color: #fff;
+        :local(.panel) span,
+        :local(.content) {
+            color: #fff;
+        }
+    }
+    &:local(.lightLime) {
+        background-color: $color-light-lime;
+        :local(.panel) span,
+        :local(.content) {
+            color: #000;
+        }
+    }
+
+    :local(.panel) {
+        padding: 15px 30px;
+        display: flex;
+        align-items: center;
+        position: relative;
+        text-decoration: none;
+        overflow-wrap: break-word;
+        font-weight: 500;
+        font-size: 20px;
+        line-height: 1.7;
+        cursor: pointer;
+        :local(.panelText) {
+            flex: 1;
+        }
+        :local(.panelChevron) {
+            box-sizing: border-box;
+            position: relative;
+            display: block;
+            width: 18px;
+            height: 18px;
+            border-radius: 100px;
+
+            &::after {
+                content: "";
+                display: block;
+                box-sizing: border-box;
+                position: absolute;
+                width: 18px;
+                height: 18px;
+                border-bottom: 2px solid;
+                border-right: 2px solid;
+                transform: translateY(-30%) rotate(45deg);
+                transition: transform 0.3s ease-in-out;
+            }
+            &:local(.expanded) {
+                &::after {
+                    transform: translateY(30%) rotate(225deg);
+                }
+            }
+        }
+    }
+    :local(.content) {
+        opacity: 0;
+        margin-top: 0px;
+        line-height: 0;
+        max-height: 0;
+        overflow: hidden;
+        padding: 0 30px 0;
+        &:local(.initialized) {
+            animation: hide 0.3s ease-in-out;
+        }
+
+        &:local(.expanded) {
+            animation: show 0.3s ease-in-out;
+            opacity: 1;
+            margin-top: 0px;
+            padding: 8px 30px 15px;
+            line-height: inherit;
+            max-height: 10000px;
+        }
+    }
+}

package/dist/components/Button.js

@@ -0,0 +1,104 @@
+"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 _theme = require("../functions/theme");
+
+var _ButtonModule = _interopRequireDefault(require("./Button.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 _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 Button = /*#__PURE__*/function (_React$Component) {
+  _inherits(Button, _React$Component);
+
+  var _super = _createSuper(Button);
+
+  function Button() {
+    _classCallCheck(this, Button);
+
+    return _super.apply(this, arguments);
+  }
+
+  _createClass(Button, [{
+    key: "getArrowClass",
+    value: function getArrowClass() {
+      switch (this.props.arrow) {
+        case 'left':
+          return _ButtonModule.default.hasArrowLeft;
+
+        case 'right':
+          return _ButtonModule.default.hasArrowRight;
+
+        default:
+          return '';
+      }
+    }
+  }, {
+    key: "getThemeStyle",
+    value: function getThemeStyle(theme, color) {
+      return {
+        backgroundColor: (0, _theme.getThemePaletteBackgroundColor)(theme, color),
+        color: (0, _theme.getThemePaletteTextColor)(theme, color)
+      };
+    }
+  }, {
+    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());
+      return /*#__PURE__*/_react.default.createElement("button", _extends({}, this.props, {
+        className: className,
+        style: themeStyle
+      }), this.props.content);
+    }
+  }]);
+
+  return Button;
+}(_react.default.Component);
+
+Button.propTypes = {
+  /** Text content inside button */
+  content: _propTypes.default.string,
+  color: _propTypes.default.oneOf(['default', 'primary', 'success', 'warning']),
+  size: _propTypes.default.oneOf(['small', 'regular']),
+  arrow: _propTypes.default.oneOf(['left', 'right']),
+  theme: _propTypes.default.object
+};
+Button.defaultProps = {
+  content: 'button',
+  color: 'default',
+  size: 'regular'
+};
+var _default = Button;
+exports.default = _default;

package/dist/components/Button.md

@@ -0,0 +1,48 @@
+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" />
+```
+
+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"/>
+```
+
+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" />
+```
+
+
+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" />
+```
+
+Themed buttons:
+
+```js
+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} />
+</React.Fragment>
+```