dibk-design 6.3.0 → 6.4.1

package/dist/components/DescriptionDetails.js

@@ -0,0 +1,32 @@
+"use strict";
+
+Object.defineProperty(exports, "__esModule", {
+  value: true
+});
+exports.default = void 0;
+var _react = _interopRequireDefault(require("react"));
+var _propTypes = _interopRequireDefault(require("prop-types"));
+var _helpers = require("../functions/helpers");
+var _DescriptionDetailsModule = _interopRequireDefault(require("./DescriptionDetails.module.scss"));
+function _interopRequireDefault(obj) { return obj && obj.__esModule ? obj : { default: obj }; }
+const DescriptionDetails = _ref => {
+  let {
+    compact,
+    titleWidth,
+    children
+  } = _ref;
+  return _react.default.createElement("dd", {
+    className: (0, _helpers.classNameArrayToClassNameString)([_DescriptionDetailsModule.default.descriptionDetails, compact && _DescriptionDetailsModule.default.compact]),
+    style: {
+      "--title-width": titleWidth || null
+    }
+  }, children);
+};
+DescriptionDetails.propTypes = {
+  compact: _propTypes.default.bool,
+  titleWidth: _propTypes.default.string
+};
+DescriptionDetails.defaultProps = {
+  compact: false
+};
+var _default = exports.default = DescriptionDetails;

package/dist/components/DescriptionDetails.module.scss

@@ -0,0 +1,21 @@
+@import "../style/global.scss";
+
+.descriptionDetails {
+    font-size: 16px;
+    list-style: var(--listStyle);
+    color: var(--color-primary, $color-primary);
+    margin: 0;
+    &:not(.compact) {
+        line-height: 1.6;
+    }
+    &.compact {
+        line-height: 1.4;
+    }
+    &:not([style*="--title-width"]) {
+        display: inline;
+    }
+    &[style*="--title-width"] {
+        flex-basis: calc(100% - var(--title-width));
+        flex-grow: 1;
+    }
+}

package/dist/components/DescriptionList.js

@@ -0,0 +1,47 @@
+"use strict";
+
+Object.defineProperty(exports, "__esModule", {
+  value: true
+});
+exports.default = void 0;
+var _react = _interopRequireDefault(require("react"));
+var _propTypes = _interopRequireDefault(require("prop-types"));
+var _DescriptionListModule = _interopRequireDefault(require("./DescriptionList.module.scss"));
+var _helpers = require("../functions/helpers");
+function _interopRequireDefault(obj) { return obj && obj.__esModule ? obj : { default: obj }; }
+const DescriptionList = _ref => {
+  let {
+    compact,
+    titleWidth,
+    children
+  } = _ref;
+  const renderChildElements = childElements => {
+    const childElementsthroughFragments = (0, _helpers.cloneThroughFragments)(childElements);
+    return childElementsthroughFragments.map((childElement, index) => {
+      const childElementCopy = _react.default.cloneElement(childElement, {
+        compact: compact,
+        titleWidth: titleWidth,
+        key: "descriptionListItem-".concat(index)
+      });
+      return childElementCopy;
+    });
+  };
+  const renderList = children => {
+    let listElement = _react.default.createElement("dl", {
+      className: (0, _helpers.classNameArrayToClassNameString)([_DescriptionListModule.default.descriptionList, !!compact && _DescriptionListModule.default.compact]),
+      style: {
+        "--title-width": titleWidth || null
+      }
+    }, renderChildElements(_react.default.Children.toArray(children)));
+    return listElement;
+  };
+  return renderList(children);
+};
+DescriptionList.propTypes = {
+  compact: _propTypes.default.bool,
+  titleWidth: _propTypes.default.string
+};
+DescriptionList.defaultProps = {
+  compact: false
+};
+var _default = exports.default = DescriptionList;

package/dist/components/DescriptionList.module.scss

@@ -0,0 +1,17 @@
+@import "../style/global.scss";
+
+.descriptionList {
+    margin: 0;
+    padding: 0;
+    margin-bottom: 20px;
+    font-size: 16px;
+    list-style: var(--listStyle);
+    &[style*="--title-width"] {
+        display: flex;
+        flex-flow: row wrap;
+        align-items: end;
+    }
+    &.compact {
+        margin-left: 0px;
+    }
+}

package/dist/components/DescriptionTerm.js

@@ -0,0 +1,32 @@
+"use strict";
+
+Object.defineProperty(exports, "__esModule", {
+  value: true
+});
+exports.default = void 0;
+var _react = _interopRequireDefault(require("react"));
+var _propTypes = _interopRequireDefault(require("prop-types"));
+var _helpers = require("../functions/helpers");
+var _DescriptionTermModule = _interopRequireDefault(require("./DescriptionTerm.module.scss"));
+function _interopRequireDefault(obj) { return obj && obj.__esModule ? obj : { default: obj }; }
+const DescriptionTerm = _ref => {
+  let {
+    compact,
+    titleWidth,
+    children
+  } = _ref;
+  return _react.default.createElement("dt", {
+    className: (0, _helpers.classNameArrayToClassNameString)([_DescriptionTermModule.default.descriptionTerm, compact && _DescriptionTermModule.default.compact]),
+    style: {
+      "--title-width": titleWidth || null
+    }
+  }, children);
+};
+DescriptionTerm.propTypes = {
+  compact: _propTypes.default.bool,
+  titleWidth: _propTypes.default.string
+};
+DescriptionTerm.defaultProps = {
+  compact: false
+};
+var _default = exports.default = DescriptionTerm;

package/dist/components/DescriptionTerm.module.scss

@@ -0,0 +1,29 @@
+@import "../style/global.scss";
+
+.descriptionTerm {
+    font-size: 16px;
+    list-style: var(--listStyle);
+    color: var(--color-primary, $color-primary);
+    margin: 0;
+    font-weight: bold;
+    &:not(.compact) {
+        line-height: 1.6;
+    }
+    &.compact {
+        line-height: 1.4;
+    }
+    &:not([style*="--title-width"]) {
+        display: inline;
+        &::before {
+            display: block;
+            content: "";
+        }
+        &::after {
+            display: inline;
+            content: " ";
+        }
+    }
+    &[style*="--title-width"] {
+        width: var(--title-width);
+    }
+}

package/dist/components/List.js

@@ -6,10 +6,21 @@ Object.defineProperty(exports, "__esModule", {
 exports.default = void 0;
 var _react = _interopRequireDefault(require("react"));
 var _propTypes = _interopRequireDefault(require("prop-types"));
+var _helpers = require("../functions/helpers");
 var _ListModule = _interopRequireDefault(require("./List.module.scss"));
 function _interopRequireDefault(obj) { return obj && obj.__esModule ? obj : { default: obj }; }
 const List = props => {
-  const renderList = () => {
+  const renderChildElements = childElements => {
+    const childElementsthroughFragments = (0, _helpers.cloneThroughFragments)(childElements);
+    return childElementsthroughFragments.map((childElement, index) => {
+      const childElementCopy = _react.default.cloneElement(childElement, {
+        compact: props.compact,
+        key: "listItem-".concat(index)
+      });
+      return childElementCopy;
+    });
+  };
+  const renderList = children => {
     let listType = props.ordered ? "ol" : "ul";
     const defaultListStyle = props.ordered ? "decimal" : "disc";
     const scssValueProperty = "--listStyle";
@@ -18,10 +29,10 @@ const List = props => {
       style: {
         [scssValueProperty]: props.listStyle || defaultListStyle
       }
-    }, props.children);
+    }, renderChildElements(_react.default.Children.toArray(children)));
     return listElement;
   };
-  return renderList();
+  return renderList(props.children);
 };
 List.propTypes = {
   listStyle: _propTypes.default.string,

package/dist/components/List.module.scss

@@ -1,3 +1,5 @@
+@import "../style/global.scss";
+
 .list {
     margin: 0;
     margin-left: 20px;
@@ -6,13 +8,7 @@
     list-style-position: outside;
     font-size: 16px;
     list-style: var(--listStyle);
-    > li {
-        line-height: 1.6;
-    }
     &.compact {
         margin-left: 0px;
-        > li {
-            line-height: 1.4;
-        }
     }
 }

package/dist/components/ListItem.js

@@ -6,14 +6,22 @@ Object.defineProperty(exports, "__esModule", {
 exports.default = void 0;
 var _react = _interopRequireDefault(require("react"));
 var _propTypes = _interopRequireDefault(require("prop-types"));
+var _helpers = require("../functions/helpers");
+var _ListItemModule = _interopRequireDefault(require("./ListItem.module.scss"));
 function _interopRequireDefault(obj) { return obj && obj.__esModule ? obj : { default: obj }; }
-const ListItem = props => {
-  const elementProps = {
-    key: props.elementKey || null
-  };
-  return _react.default.createElement("li", elementProps, props.children, props.elementKey);
+const ListItem = _ref => {
+  let {
+    compact,
+    children
+  } = _ref;
+  return _react.default.createElement("li", {
+    className: (0, _helpers.classNameArrayToClassNameString)([_ListItemModule.default.listItem, compact && _ListItemModule.default.compact])
+  }, children);
 };
 ListItem.propTypes = {
-  elementKey: _propTypes.default.string
+  compact: _propTypes.default.bool
+};
+ListItem.defaultProps = {
+  compact: false
 };
 var _default = exports.default = ListItem;

package/dist/components/ListItem.module.scss

@@ -0,0 +1,9 @@
+@import "../style/global.scss";
+
+.listItem {
+    line-height: 1.6;
+    color: var(--color-primary, $color-primary);
+    &.compact {
+        line-height: 1.4;
+    }
+}

package/dist/components/Theme.js

@@ -6,14 +6,19 @@ Object.defineProperty(exports, "__esModule", {
 exports.default = void 0;
 var _react = _interopRequireWildcard(require("react"));
 var _propTypes = _interopRequireDefault(require("prop-types"));
+var _Accordion = _interopRequireDefault(require("./Accordion"));
 var _Button = _interopRequireDefault(require("./Button"));
+var _CheckBoxList = _interopRequireDefault(require("./CheckBoxList"));
+var _CheckBoxListItem = _interopRequireDefault(require("./CheckBoxListItem"));
 var _Container = _interopRequireDefault(require("./Container"));
+var _DescriptionDetails = _interopRequireDefault(require("./DescriptionDetails"));
+var _DescriptionList = _interopRequireDefault(require("./DescriptionList"));
+var _DescriptionTerm = _interopRequireDefault(require("./DescriptionTerm"));
 var _Header = _interopRequireDefault(require("./Header"));
-var _Accordion = _interopRequireDefault(require("./Accordion"));
-var _Paper = _interopRequireDefault(require("./Paper"));
+var _List = _interopRequireDefault(require("./List"));
+var _ListItem = _interopRequireDefault(require("./ListItem"));
 var _NavigationBar = _interopRequireDefault(require("./NavigationBar"));
-var _CheckBoxList = _interopRequireDefault(require("./CheckBoxList"));
-var _CheckBoxListItem = _interopRequireDefault(require("./CheckBoxListItem"));
+var _Paper = _interopRequireDefault(require("./Paper"));
 var _RadioButtonList = _interopRequireDefault(require("./RadioButtonList"));
 var _RadioButtonListItem = _interopRequireDefault(require("./RadioButtonListItem"));
 var _ThemeModule = _interopRequireDefault(require("./Theme.module.scss"));
@@ -108,7 +113,23 @@ const Theme = _ref => {
     inputValue: "value 2",
     name: "radio-button-list-list-item",
     id: "radioButtonList-listItem-2"
-  }, "Unchecked radio button")))))) : "Select a theme";
+  }, "Unchecked radio button"))), _react.default.createElement("section", null, _react.default.createElement(_Header.default, {
+    size: 2
+  }, "Lists"), _react.default.createElement(_Header.default, {
+    size: 3
+  }, "Unordered list"), _react.default.createElement(_List.default, null, _react.default.createElement(_ListItem.default, null, "First list item"), _react.default.createElement(_ListItem.default, null, "Second list item"), _react.default.createElement(_ListItem.default, null, "Third list item")), _react.default.createElement(_Header.default, {
+    size: 3
+  }, "Ordered list"), _react.default.createElement(_List.default, {
+    ordered: true
+  }, _react.default.createElement(_ListItem.default, null, "First list item"), _react.default.createElement(_ListItem.default, null, "Second list item"), _react.default.createElement(_ListItem.default, null, "Third list item"))), _react.default.createElement("section", null, _react.default.createElement(_Header.default, {
+    size: 2
+  }, "Description lists"), _react.default.createElement(_Header.default, {
+    size: 3
+  }, "Description list variable title width"), _react.default.createElement(_DescriptionList.default, null, _react.default.createElement(_DescriptionTerm.default, null, "First description term:"), _react.default.createElement(_DescriptionDetails.default, null, "First description details"), _react.default.createElement(_DescriptionTerm.default, null, "Second description term:"), _react.default.createElement(_DescriptionDetails.default, null, "Second description details"), _react.default.createElement(_DescriptionTerm.default, null, "Third description term:"), _react.default.createElement(_DescriptionDetails.default, null, "Third description details")), _react.default.createElement(_Header.default, {
+    size: 3
+  }, "Description list with static title width"), _react.default.createElement(_DescriptionList.default, {
+    titleWidth: "240px"
+  }, _react.default.createElement(_DescriptionTerm.default, null, "First description term:"), _react.default.createElement(_DescriptionDetails.default, null, "First description details"), _react.default.createElement(_DescriptionTerm.default, null, "Second description term:"), _react.default.createElement(_DescriptionDetails.default, null, "Second description details"), _react.default.createElement(_DescriptionTerm.default, null, "Third description term:"), _react.default.createElement(_DescriptionDetails.default, null, "Third description details")))))) : "Select a theme";
 };
 Theme.propTypes = {
   theme: _propTypes.default.object.isRequired

package/dist/index.js

@@ -51,6 +51,24 @@ Object.defineProperty(exports, "ContentBox", {
     return _ContentBox.default;
   }
 });
+Object.defineProperty(exports, "DescriptionDetails", {
+  enumerable: true,
+  get: function () {
+    return _DescriptionDetails.default;
+  }
+});
+Object.defineProperty(exports, "DescriptionList", {
+  enumerable: true,
+  get: function () {
+    return _DescriptionList.default;
+  }
+});
+Object.defineProperty(exports, "DescriptionTerm", {
+  enumerable: true,
+  get: function () {
+    return _DescriptionTerm.default;
+  }
+});
 Object.defineProperty(exports, "Dialog", {
   enumerable: true,
   get: function () {
@@ -227,6 +245,9 @@ var _CheckBoxList = _interopRequireDefault(require("./components/CheckBoxList"))
 var _CheckBoxListItem = _interopRequireDefault(require("./components/CheckBoxListItem"));
 var _Container = _interopRequireDefault(require("./components/Container"));
 var _ContentBox = _interopRequireDefault(require("./components/ContentBox"));
+var _DescriptionDetails = _interopRequireDefault(require("./components/DescriptionDetails"));
+var _DescriptionList = _interopRequireDefault(require("./components/DescriptionList"));
+var _DescriptionTerm = _interopRequireDefault(require("./components/DescriptionTerm"));
 var _Dialog = _interopRequireDefault(require("./components/Dialog"));
 var _DragAndDropFileInput = _interopRequireDefault(require("./components/DragAndDropFileInput"));
 var _ErrorBox = _interopRequireDefault(require("./components/ErrorBox"));

package/package.json

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