dibk-design 6.0.1 → 6.2.0

package/dist/components/Button.js

@@ -38,7 +38,7 @@ const Button = props => {
   delete buttonProps.content;
   delete buttonProps.arrow;
   delete buttonProps.noMargin;
-  const buttonColor = (props === null || props === void 0 ? void 0 : props.inputType) === "radio" ? props.defaultChecked ? "primary" : "default" : props.color;
+  const buttonColor = (props === null || props === void 0 ? void 0 : props.inputType) === "radio" ? props.defaultChecked ? "primary" : "secondary" : props.color;
   const className = (0, _helpers.classNameArrayToClassNameString)([_ButtonModule.default.button, _ButtonModule.default[buttonColor], _ButtonModule.default[props.size], getArrowClass(props.arrow), props.noHover || (props === null || props === void 0 ? void 0 : props.inputType) === "radio" ? _ButtonModule.default.noHover : null, props.rounded && _ButtonModule.default.rounded, props.hasErrors && _ButtonModule.default.hasErrors, props.disabled && _ButtonModule.default.disabled, props.noMargin && _ButtonModule.default.noMargin]);
   const renderReactLinkElements = childElements => {
     const childElementsthroughFragments = (0, _helpers.cloneThroughFragments)(childElements);

package/dist/components/CheckBoxList.js

@@ -9,9 +9,16 @@ var _propTypes = _interopRequireDefault(require("prop-types"));
 var _helpers = require("../functions/helpers");
 var _asterisk = _interopRequireDefault(require("../assets/svg/asterisk.svg?url"));
 var _CheckBoxListModule = _interopRequireDefault(require("./CheckBoxList.module.scss"));
+var _Header = _interopRequireDefault(require("./Header"));
 function _interopRequireDefault(obj) { return obj && obj.__esModule ? obj : { default: obj }; }
-const CheckBoxList = props => {
-  var _props$legend;
+const CheckBoxList = _ref => {
+  let {
+    required,
+    compact,
+    legend,
+    legendSize,
+    children
+  } = _ref;
   const renderChildElements = childElements => {
     const childElementsthroughFragments = (0, _helpers.cloneThroughFragments)(childElements);
     return childElementsthroughFragments.map((childElement, index) => {
@@ -19,8 +26,8 @@ const CheckBoxList = props => {
       const isCheckBoxListItem = (childElement === null || childElement === void 0 || (_childElement$props = childElement.props) === null || _childElement$props === void 0 ? void 0 : _childElement$props.type) === "CheckBoxListItem";
       if (isCheckBoxListItem) {
         const childElementCopy = _react.default.cloneElement(childElement, {
-          requiredGroup: props.required,
-          compact: props.compact,
+          requiredGroup: required,
+          compact: compact,
           key: "checkboxListItem-".concat(index)
         });
         return childElementCopy;
@@ -31,14 +38,17 @@ const CheckBoxList = props => {
   };
   return _react.default.createElement("fieldset", {
     className: _CheckBoxListModule.default.checkBoxList
-  }, !!((_props$legend = props.legend) !== null && _props$legend !== void 0 && _props$legend.length) ? _react.default.createElement("legend", null, props.legend, props.required && _react.default.createElement("img", {
+  }, !!(legend !== null && legend !== void 0 && legend.length) ? _react.default.createElement("legend", null, legendSize ? _react.default.createElement(_Header.default, {
+    size: legendSize
+  }, legend) : legend, required && _react.default.createElement("img", {
     src: _asterisk.default,
     alt: "",
     className: _CheckBoxListModule.default.requiredSymbol
-  })) : null, renderChildElements(_react.default.Children.toArray(props.children)));
+  })) : null, renderChildElements(_react.default.Children.toArray(children)));
 };
 CheckBoxList.propTypes = {
   legend: _propTypes.default.string,
+  legendSize: _propTypes.default.oneOf([1, 2, 3, 4, 5]),
   required: _propTypes.default.bool,
   compact: _propTypes.default.bool
 };

package/dist/components/Header.js

@@ -10,7 +10,7 @@ var _HeaderModule = _interopRequireDefault(require("./Header.module.scss"));
 var _helpers = require("../functions/helpers");
 function _interopRequireDefault(obj) { return obj && obj.__esModule ? obj : { default: obj }; }
 const Header = props => {
-  var _props$htmlTag, _props$content;
+  var _props$htmlTag, _props$label, _props$content;
   const bigClass = props.big ? _HeaderModule.default.bigHeader : "";
   const htmlTag = (_props$htmlTag = props.htmlTag) !== null && _props$htmlTag !== void 0 && _props$htmlTag.length ? props.htmlTag : "h".concat(props.size);
   const headerClass = _HeaderModule.default.header;
@@ -18,7 +18,10 @@ const Header = props => {
   let headerElement = _react.default.createElement(htmlTag, {
     className: (0, _helpers.classNameArrayToClassNameString)([headerClass, headerSizeClass, bigClass]),
     id: props.id || null,
-    htmlFor: props.htmlFor || null
+    htmlFor: props.htmlFor || null,
+    style: props !== null && props !== void 0 && (_props$label = props.label) !== null && _props$label !== void 0 && _props$label.length ? {
+      "--label": "\"".concat(props.label, "\"")
+    } : null
   }, !!((_props$content = props.content) !== null && _props$content !== void 0 && _props$content.length) ? props.content : props.children);
   return _react.default.createElement("div", {
     className: _HeaderModule.default.headerContainer
@@ -29,6 +32,7 @@ Header.propTypes = {
   content: _propTypes.default.string,
   size: _propTypes.default.oneOf([1, 2, 3, 4, 5]),
   big: _propTypes.default.bool,
+  label: _propTypes.default.string,
   htmlTag: _propTypes.default.string,
   htmlFor: _propTypes.default.string
 };

package/dist/components/Header.module.scss

@@ -57,5 +57,20 @@
 			line-height: 1;
 			letter-spacing: 0px;
 		}
+		&[style*="--label"] {
+			&::before {
+				content: var(--label);
+				display: block;
+				font-family: $default-font;
+				font-size: 12px;
+				font-weight: 600;
+				line-height: 18px;
+				letter-spacing: 0px;
+				text-transform: uppercase;
+				color: var(--color-heading-text, $color-heading-text);
+				opacity: 0.75;
+				margin-bottom: 0.3em;
+			}
+		}
 	}
 }

package/dist/components/InputField.js

@@ -123,7 +123,7 @@ InputField.defaultProps = {
   required: false,
   label: "",
   contentOnly: false,
-  buttonColor: "default",
+  buttonColor: "primary",
   dateFormat: "d. MMMM, yyyy",
   placeholder: "",
   defaultContent: "",

package/dist/components/Lead.js

@@ -0,0 +1,31 @@
+"use strict";
+
+Object.defineProperty(exports, "__esModule", {
+  value: true
+});
+exports.default = void 0;
+var _react = _interopRequireDefault(require("react"));
+var _propTypes = _interopRequireDefault(require("prop-types"));
+var _LeadModule = _interopRequireDefault(require("./Lead.module.scss"));
+function _interopRequireDefault(obj) { return obj && obj.__esModule ? obj : { default: obj }; }
+const Lead = _ref => {
+  let {
+    id,
+    htmlTag,
+    children
+  } = _ref;
+  const leadClass = _LeadModule.default.lead;
+  let leadElement = _react.default.createElement(htmlTag, {
+    className: leadClass,
+    id: id || null
+  }, children);
+  return leadElement;
+};
+Lead.propTypes = {
+  id: _propTypes.default.string,
+  htmlTag: _propTypes.default.string
+};
+Lead.defaultProps = {
+  htmlTag: "p"
+};
+var _default = exports.default = Lead;

package/dist/components/Lead.module.scss

@@ -0,0 +1,11 @@
+@import "../style/global.scss";
+
+.lead {
+	font-family: $default-font;
+	font-size: 18px;
+	font-weight: 400;
+	line-height: 26px;
+	letter-spacing: 0.01em;
+	margin: 0 0 24px;
+	color: var(--color-heading-text, $color-heading-text);
+}

package/dist/components/RadioButtonList.js

@@ -9,9 +9,16 @@ var _propTypes = _interopRequireDefault(require("prop-types"));
 var _helpers = require("../functions/helpers");
 var _asterisk = _interopRequireDefault(require("../assets/svg/asterisk.svg?url"));
 var _RadioButtonListModule = _interopRequireDefault(require("./RadioButtonList.module.scss"));
+var _Header = _interopRequireDefault(require("./Header"));
 function _interopRequireDefault(obj) { return obj && obj.__esModule ? obj : { default: obj }; }
-const RadioButtonList = props => {
-  var _props$legend;
+const RadioButtonList = _ref => {
+  let {
+    required,
+    compact,
+    legend,
+    legendSize,
+    children
+  } = _ref;
   const renderChildElements = childElements => {
     const childElementsthroughFragments = (0, _helpers.cloneThroughFragments)(childElements);
     return childElementsthroughFragments.map((childElement, index) => {
@@ -19,8 +26,8 @@ const RadioButtonList = props => {
       const isRadioButtonListItem = (childElement === null || childElement === void 0 || (_childElement$props = childElement.props) === null || _childElement$props === void 0 ? void 0 : _childElement$props.type) === "RadioButtonListItem";
       if (isRadioButtonListItem) {
         const childElementCopy = _react.default.cloneElement(childElement, {
-          requiredGroup: props.required,
-          compact: props.compact,
+          requiredGroup: required,
+          compact: compact,
           key: "radioButtonListItem-".concat(index)
         });
         return childElementCopy;
@@ -31,14 +38,17 @@ const RadioButtonList = props => {
   };
   return _react.default.createElement("fieldset", {
     className: _RadioButtonListModule.default.radioButtonList
-  }, !!((_props$legend = props.legend) !== null && _props$legend !== void 0 && _props$legend.length) ? _react.default.createElement("legend", null, props.legend, props.required && _react.default.createElement("img", {
+  }, !!(legend !== null && legend !== void 0 && legend.length) ? _react.default.createElement("legend", null, legendSize ? _react.default.createElement(_Header.default, {
+    size: legendSize
+  }, legend) : legend, required && _react.default.createElement("img", {
     src: _asterisk.default,
     alt: "",
     className: _RadioButtonListModule.default.requiredSymbol
-  })) : null, renderChildElements(_react.default.Children.toArray(props.children)));
+  })) : null, renderChildElements(_react.default.Children.toArray(children)));
 };
 RadioButtonList.propTypes = {
   legend: _propTypes.default.string,
+  legendSize: _propTypes.default.oneOf([1, 2, 3, 4, 5]),
   required: _propTypes.default.bool,
   compact: _propTypes.default.bool
 };

package/dist/index.js

@@ -105,6 +105,12 @@ Object.defineProperty(exports, "Label", {
     return _Label.default;
   }
 });
+Object.defineProperty(exports, "Lead", {
+  enumerable: true,
+  get: function () {
+    return _Lead.default;
+  }
+});
 Object.defineProperty(exports, "List", {
   enumerable: true,
   get: function () {
@@ -224,6 +230,7 @@ var _Header = _interopRequireDefault(require("./components/Header"));
 var _InfoBox = _interopRequireDefault(require("./components/InfoBox"));
 var _InputField = _interopRequireDefault(require("./components/InputField"));
 var _Label = _interopRequireDefault(require("./components/Label"));
+var _Lead = _interopRequireDefault(require("./components/Lead"));
 var _List = _interopRequireDefault(require("./components/List"));
 var _ListItem = _interopRequireDefault(require("./components/ListItem"));
 var _LoadingAnimation = _interopRequireDefault(require("./components/LoadingAnimation"));

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "dibk-design",
-  "version": "6.0.1",
+  "version": "6.2.0",
   "main": "dist/index.js",
   "module": "dist/index.js",
   "files": [