dibk-design 1.0.10 → 1.0.11

This diff represents the content of publicly available package versions that have been released to one of the supported registries. The information contained in this diff is provided for informational purposes only and reflects changes between package versions as they appear in their respective public registries.
Files changed (6) hide show
  1. package/dist/components/List.js +7 -16
  2. package/dist/components/List.md +42 -6
  3. package/dist/components/List.module.scss +2 -2
  4. package/dist/components/ListItem.js +17 -0
  5. package/dist/index.js +8 -0
  6. package/package.json +1 -1
package/dist/components/List.js CHANGED
@@ -15,26 +15,16 @@ function _interopRequireDefault(obj) { return obj && obj.__esModule ? obj : { de
15
15
 
16
16
  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; }
17
17
 
18
- var ListItem = function ListItem(props) {
19
- return /*#__PURE__*/_react.default.createElement("li", null, props.listItem);
20
- };
21
-
22
18
  var List = function List(props) {
23
19
  var renderList = function renderList() {
24
- var listItems = props.listItems.map(function (listItem, i) {
25
- return /*#__PURE__*/_react.default.createElement(ListItem, {
26
- listItem: listItem,
27
- key: i
28
- });
29
- });
30
20
  var listType = props.ordered ? "ol" : "ul";
31
- var defaultListStyle = props.ordered ? 'decimal' : 'disc';
21
+ var defaultListStyle = props.ordered ? "decimal" : "disc";
32
22
  var scssValueProperty = "--listStyle";
33
23
 
34
24
  var listElement = /*#__PURE__*/_react.default.createElement(listType, {
35
- className: "".concat(_ListModule.default.list, " ").concat(!!props.compact ? _ListModule.default.compact : ''),
25
+ className: "".concat(_ListModule.default.list, " ").concat(!!props.compact ? _ListModule.default.compact : ""),
36
26
  style: _defineProperty({}, scssValueProperty, props.listStyle || defaultListStyle)
37
- }, listItems);
27
+ }, props.children);
38
28
 
39
29
  return listElement;
40
30
  };
@@ -43,12 +33,13 @@ var List = function List(props) {
43
33
  };
44
34
 
45
35
  List.propTypes = {
46
- listItems: _propTypes.default.arrayOf(_propTypes.default.oneOfType([_propTypes.default.string, _propTypes.default.object])),
36
+ listStyle: _propTypes.default.string,
37
+ compact: _propTypes.default.bool,
47
38
  ordered: _propTypes.default.bool
48
39
  };
49
40
  List.defaultProps = {
50
- listItems: [],
51
- ordered: false
41
+ ordered: false,
42
+ compact: false
52
43
  };
53
44
  var _default = List;
54
45
  exports.default = _default;
package/dist/components/List.md CHANGED
@@ -1,35 +1,71 @@
1
1
  Ordered List example:
2
2
 
3
3
  ```js
4
- <List listItems={["item 1", "item 2", "item 3"]} ordered={true} />
4
+ import ListItem from "lib/components/ListItem";
5
+ <List ordered={true}>
6
+ <ListItem>item 1</ListItem>
7
+ <ListItem>item 2</ListItem>
8
+ <ListItem>item 3</ListItem>
9
+ </List>;
5
10
  ```
6
11
 
7
12
  Unordered List example:
8
13
 
9
14
  ```js
10
- <List listItems={["item 1", "item 2", "item 3", <a href="hoy">test</a>]} />
15
+ import ListItem from "lib/components/ListItem";
16
+ <List>
17
+ <ListItem>item 1</ListItem>
18
+ <ListItem>item 2</ListItem>
19
+ <ListItem>item 3</ListItem>
20
+ </List>;
11
21
  ```
12
22
 
13
23
  Unordered square-styled List example:
14
24
 
15
25
  ```js
16
- <List listItems={["item 1", "item 2", "item 3"]} listStyle="square" />
26
+ import ListItem from "lib/components/ListItem";
27
+ <List listStyle="square">
28
+ <ListItem>item 1</ListItem>
29
+ <ListItem>item 2</ListItem>
30
+ <ListItem>item 3</ListItem>
31
+ </List>;
17
32
  ```
18
33
 
19
34
  Unordered unstyled List example:
20
35
 
21
36
  ```js
22
- <List listItems={["item 1", "item 2", "item 3"]} listStyle="none" />
37
+ import ListItem from "lib/components/ListItem";
38
+ <List listStyle="none">
39
+ <ListItem>item 1</ListItem>
40
+ <ListItem>item 2</ListItem>
41
+ <ListItem>item 3</ListItem>
42
+ </List>;
23
43
  ```
24
44
 
25
45
  Unordered unstyled compact List example:
26
46
 
27
47
  ```js
28
- <List listItems={["item 1", "item 2", "item 3"]} listStyle="none" compact />
48
+ import ListItem from "lib/components/ListItem";
49
+ <List listStyle="none" compact>
50
+ <ListItem>item 1</ListItem>
51
+ <ListItem>item 2</ListItem>
52
+ <ListItem>item 3</ListItem>
53
+ </List>;
29
54
  ```
30
55
 
31
56
  Unordered List with subitems example:
32
57
 
33
58
  ```js
34
- <List listItems={['item 1', <React.Fragment>item 2 <List listItems={['subitem 1', 'subitem 2', 'subitem 3']} /></React.Fragment>, 'item 2']} />
59
+ import ListItem from "lib/components/ListItem";
60
+ <List>
61
+ <ListItem>item 1</ListItem>
62
+ <ListItem>
63
+ item 2
64
+ <List>
65
+ <ListItem>subitem 1</ListItem>
66
+ <ListItem>subitem 2</ListItem>
67
+ </List>
68
+ </ListItem>
69
+ <ListItem>item 3</ListItem>
70
+ </List>;
35
71
  ```
package/dist/components/List.module.scss CHANGED
@@ -6,12 +6,12 @@
6
6
  list-style-position: outside;
7
7
  font-size: 16px;
8
8
  list-style: var(--listStyle);
9
- li {
9
+ > li {
10
10
  line-height: 1.6;
11
11
  }
12
12
  &:local(.compact) {
13
13
  margin-left: 0px;
14
- li {
14
+ > li {
15
15
  line-height: 1.4;
16
16
  }
17
17
  }
package/dist/components/ListItem.js ADDED
@@ -0,0 +1,17 @@
1
+ "use strict";
2
+
3
+ Object.defineProperty(exports, "__esModule", {
4
+ value: true
5
+ });
6
+ exports.default = void 0;
7
+
8
+ var _react = _interopRequireDefault(require("react"));
9
+
10
+ function _interopRequireDefault(obj) { return obj && obj.__esModule ? obj : { default: obj }; }
11
+
12
+ var ListItem = function ListItem(props) {
13
+ return /*#__PURE__*/_react.default.createElement("li", null, props.children);
14
+ };
15
+
16
+ var _default = ListItem;
17
+ exports.default = _default;
package/dist/index.js CHANGED
@@ -99,6 +99,12 @@ Object.defineProperty(exports, "List", {
99
99
  return _List.default;
100
100
  }
101
101
  });
102
+ Object.defineProperty(exports, "ListItem", {
103
+ enumerable: true,
104
+ get: function get() {
105
+ return _ListItem.default;
106
+ }
107
+ });
102
108
  Object.defineProperty(exports, "LoadingAnimation", {
103
109
  enumerable: true,
104
110
  get: function get() {
@@ -210,6 +216,8 @@ var _Label = _interopRequireDefault(require("./components/Label"));
210
216
 
211
217
  var _List = _interopRequireDefault(require("./components/List"));
212
218
 
219
+ var _ListItem = _interopRequireDefault(require("./components/ListItem"));
220
+
213
221
  var _LoadingAnimation = _interopRequireDefault(require("./components/LoadingAnimation"));
214
222
 
215
223
  var _NavigationBar = _interopRequireDefault(require("./components/NavigationBar"));
package/package.json CHANGED
@@ -1,6 +1,6 @@
1
1
  {
2
2
  "name": "dibk-design",
3
- "version": "1.0.10",
3
+ "version": "1.0.11",
4
4
  "private": false,
5
5
  "main": "dist/index.js",
6
6
  "module": "dist/index.js",