@elliemae/ds-group-box 2.0.0-alpha.10 → 2.0.0-alpha.14
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.
- package/cjs/ActionItem.js +4 -3
- package/cjs/Actions.js +8 -5
- package/cjs/DSGroupBox.js +26 -18
- package/cjs/GroupBoxLabel.js +13 -25
- package/cjs/LabelElement.js +4 -3
- package/cjs/components/GroupHeader.js +13 -12
- package/cjs/components/blocks.js +45 -36
- package/esm/ActionItem.js +4 -3
- package/esm/Actions.js +8 -5
- package/esm/DSGroupBox.js +26 -18
- package/esm/GroupBoxLabel.js +13 -25
- package/esm/LabelElement.js +4 -3
- package/esm/components/GroupHeader.js +13 -12
- package/esm/components/blocks.js +45 -36
- package/package.json +8 -6
- package/types/DSGroupBox.d.ts +76 -10
- package/cjs/package.json +0 -7
- package/esm/package.json +0 -7
package/cjs/ActionItem.js
CHANGED
|
@@ -14,9 +14,10 @@ const ActionItemNode = /*#__PURE__*/styled__default["default"].div.withConfig({
|
|
|
14
14
|
componentId: "sc-1ysc0gb-0"
|
|
15
15
|
})(["padding-right:", ";font-weight:300;overflow:hidden;align-items:center;display:flex;&:last-child{padding-right:0;}"], props => dsSystem.__UNSAFE_SPACE_TO_DIMSUM(props.theme.space.xs));
|
|
16
16
|
|
|
17
|
-
function ActionItem({
|
|
18
|
-
|
|
19
|
-
|
|
17
|
+
function ActionItem(_ref) {
|
|
18
|
+
let {
|
|
19
|
+
children
|
|
20
|
+
} = _ref;
|
|
20
21
|
return /*#__PURE__*/_jsx__default["default"](ActionItemNode, {}, void 0, children);
|
|
21
22
|
}
|
|
22
23
|
|
package/cjs/Actions.js
CHANGED
|
@@ -3,6 +3,8 @@
|
|
|
3
3
|
Object.defineProperty(exports, '__esModule', { value: true });
|
|
4
4
|
|
|
5
5
|
var _jsx = require('@babel/runtime/helpers/jsx');
|
|
6
|
+
require('core-js/modules/esnext.async-iterator.map.js');
|
|
7
|
+
require('core-js/modules/esnext.iterator.map.js');
|
|
6
8
|
require('react');
|
|
7
9
|
var styled = require('styled-components');
|
|
8
10
|
var styledSystem = require('styled-system');
|
|
@@ -18,11 +20,12 @@ const ActionsNode = /*#__PURE__*/styled__default["default"].div.withConfig({
|
|
|
18
20
|
componentId: "sc-1umfb8g-0"
|
|
19
21
|
})(["display:flex;flex-direction:row;padding-left:", ";overflow:hidden;", ""], props => dsSystem.__UNSAFE_SPACE_TO_DIMSUM(props.theme.space.m), styledSystem.margin);
|
|
20
22
|
|
|
21
|
-
function Actions({
|
|
22
|
-
|
|
23
|
-
|
|
24
|
-
|
|
25
|
-
|
|
23
|
+
function Actions(_ref) {
|
|
24
|
+
let {
|
|
25
|
+
actions = [],
|
|
26
|
+
centerActions,
|
|
27
|
+
rightActions
|
|
28
|
+
} = _ref;
|
|
26
29
|
if (actions.length < 1) return null;
|
|
27
30
|
return /*#__PURE__*/_jsx__default["default"](ActionsNode, {
|
|
28
31
|
marginLeft: !!rightActions && 'auto',
|
package/cjs/DSGroupBox.js
CHANGED
|
@@ -4,6 +4,13 @@ Object.defineProperty(exports, '__esModule', { value: true });
|
|
|
4
4
|
|
|
5
5
|
var _defineProperty = require('@babel/runtime/helpers/defineProperty');
|
|
6
6
|
var _jsx = require('@babel/runtime/helpers/jsx');
|
|
7
|
+
require('core-js/modules/esnext.async-iterator.map.js');
|
|
8
|
+
require('core-js/modules/esnext.iterator.map.js');
|
|
9
|
+
require('core-js/modules/esnext.async-iterator.filter.js');
|
|
10
|
+
require('core-js/modules/esnext.iterator.constructor.js');
|
|
11
|
+
require('core-js/modules/esnext.iterator.filter.js');
|
|
12
|
+
require('core-js/modules/esnext.async-iterator.for-each.js');
|
|
13
|
+
require('core-js/modules/esnext.iterator.for-each.js');
|
|
7
14
|
var React = require('react');
|
|
8
15
|
var reactDesc = require('react-desc');
|
|
9
16
|
var blocks = require('./components/blocks.js');
|
|
@@ -21,24 +28,25 @@ function ownKeys(object, enumerableOnly) { var keys = Object.keys(object); if (O
|
|
|
21
28
|
|
|
22
29
|
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__default["default"](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; }
|
|
23
30
|
|
|
24
|
-
const DSGroupBox =
|
|
25
|
-
|
|
26
|
-
|
|
27
|
-
|
|
28
|
-
|
|
29
|
-
|
|
30
|
-
|
|
31
|
-
|
|
32
|
-
|
|
33
|
-
|
|
34
|
-
|
|
35
|
-
|
|
36
|
-
|
|
37
|
-
|
|
38
|
-
|
|
39
|
-
|
|
40
|
-
|
|
41
|
-
|
|
31
|
+
const DSGroupBox = _ref => {
|
|
32
|
+
let {
|
|
33
|
+
containerProps = {},
|
|
34
|
+
labelProps = {
|
|
35
|
+
labelText: '',
|
|
36
|
+
borderBottom: false,
|
|
37
|
+
id: 'ds-group-box__header'
|
|
38
|
+
},
|
|
39
|
+
rightActions = [],
|
|
40
|
+
centerActions = [],
|
|
41
|
+
type = constants.BOX_TYPES.CATEGORY,
|
|
42
|
+
asRow = false,
|
|
43
|
+
onlyHeader = false,
|
|
44
|
+
noBorder = true,
|
|
45
|
+
noPadding = false,
|
|
46
|
+
children: components = [],
|
|
47
|
+
// eslint-disable-next-line react/prop-types
|
|
48
|
+
isMain = true
|
|
49
|
+
} = _ref;
|
|
42
50
|
const {
|
|
43
51
|
labelText
|
|
44
52
|
} = labelProps;
|
package/cjs/GroupBoxLabel.js
CHANGED
|
@@ -10,35 +10,23 @@ function _interopDefaultLegacy (e) { return e && typeof e === 'object' && 'defau
|
|
|
10
10
|
var _jsx__default = /*#__PURE__*/_interopDefaultLegacy(_jsx);
|
|
11
11
|
var styled__default = /*#__PURE__*/_interopDefaultLegacy(styled);
|
|
12
12
|
|
|
13
|
-
const borderBase200 = props =>
|
|
13
|
+
const borderBase200 = props => "1px solid ".concat(props.theme.colors.neutral[200], ";");
|
|
14
14
|
|
|
15
|
-
const categoryBoxStyles =
|
|
16
|
-
|
|
17
|
-
height: 36px;
|
|
18
|
-
padding:0 0;
|
|
19
|
-
color: ${props => props.theme.colors.neutral[800]};
|
|
20
|
-
display: flex;
|
|
21
|
-
flex-direction: row;
|
|
22
|
-
align-items: center;
|
|
23
|
-
border-bottom: ${borderBase200}
|
|
24
|
-
`;
|
|
25
|
-
const groupBoxStyles = `
|
|
26
|
-
border: unset;
|
|
27
|
-
font-size: ${props => dsSystem.toMobile(props.theme.fontSizes.title[500])};
|
|
28
|
-
padding: 12px 0;
|
|
29
|
-
`;
|
|
15
|
+
const categoryBoxStyles = "\n width: 100%;\n height: 36px;\n padding:0 0;\n color: ".concat(props => props.theme.colors.neutral[800], ";\n display: flex;\n flex-direction: row;\n align-items: center;\n border-bottom: ").concat(borderBase200, "\n");
|
|
16
|
+
const groupBoxStyles = "\n border: unset;\n font-size: ".concat(props => dsSystem.toMobile(props.theme.fontSizes.title[500]), ";\n padding: 12px 0;\n");
|
|
30
17
|
const GroupBoxLabelNode = /*#__PURE__*/styled__default["default"].div.withConfig({
|
|
31
18
|
componentId: "sc-141ikkh-0"
|
|
32
|
-
})(["", " ", " ", " ", ""], props => props.nodeType === 'category-box' ? categoryBoxStyles : groupBoxStyles, props => props.noBorder ? 'border: none;' : '', props => props.borderBottom ?
|
|
19
|
+
})(["", " ", " ", " ", ""], props => props.nodeType === 'category-box' ? categoryBoxStyles : groupBoxStyles, props => props.noBorder ? 'border: none;' : '', props => props.borderBottom ? "border-bottom: ".concat(borderBase200(props)) : '', props => props.isMain ? "padding-right: ".concat(dsSystem.__UNSAFE_SPACE_TO_DIMSUM(props.theme.space.xs), ";") : '');
|
|
33
20
|
|
|
34
|
-
function GroupBoxLabel({
|
|
35
|
-
|
|
36
|
-
|
|
37
|
-
|
|
38
|
-
|
|
39
|
-
|
|
40
|
-
|
|
41
|
-
|
|
21
|
+
function GroupBoxLabel(_ref) {
|
|
22
|
+
let {
|
|
23
|
+
borderBottom,
|
|
24
|
+
children,
|
|
25
|
+
noBorder,
|
|
26
|
+
isMain,
|
|
27
|
+
type,
|
|
28
|
+
id
|
|
29
|
+
} = _ref;
|
|
42
30
|
return /*#__PURE__*/_jsx__default["default"](GroupBoxLabelNode, {
|
|
43
31
|
borderBottom: borderBottom,
|
|
44
32
|
"data-testid": "ds-group-box__header",
|
package/cjs/LabelElement.js
CHANGED
|
@@ -14,9 +14,10 @@ const LabelElementNode = /*#__PURE__*/styled__default["default"].div.withConfig(
|
|
|
14
14
|
componentId: "sc-nu03bl-0"
|
|
15
15
|
})(["overflow:hidden;display:flex;align-items:center;font-size:", ";font-weight:400;"], props => dsSystem.toMobile(props.theme.fontSizes.title[700]));
|
|
16
16
|
|
|
17
|
-
function LabelElement({
|
|
18
|
-
|
|
19
|
-
|
|
17
|
+
function LabelElement(_ref) {
|
|
18
|
+
let {
|
|
19
|
+
children
|
|
20
|
+
} = _ref;
|
|
20
21
|
return /*#__PURE__*/_jsx__default["default"](LabelElementNode, {}, void 0, children);
|
|
21
22
|
}
|
|
22
23
|
|
|
@@ -15,18 +15,19 @@ function _interopDefaultLegacy (e) { return e && typeof e === 'object' && 'defau
|
|
|
15
15
|
var _jsx__default = /*#__PURE__*/_interopDefaultLegacy(_jsx);
|
|
16
16
|
var DSTruncatedTooltipText__default = /*#__PURE__*/_interopDefaultLegacy(DSTruncatedTooltipText);
|
|
17
17
|
|
|
18
|
-
const DSGroupBoxHeader =
|
|
19
|
-
|
|
20
|
-
|
|
21
|
-
|
|
22
|
-
|
|
23
|
-
|
|
24
|
-
|
|
25
|
-
|
|
26
|
-
|
|
27
|
-
|
|
28
|
-
|
|
29
|
-
|
|
18
|
+
const DSGroupBoxHeader = _ref => {
|
|
19
|
+
let {
|
|
20
|
+
labelProps = {
|
|
21
|
+
labelText: '',
|
|
22
|
+
borderBottom: false,
|
|
23
|
+
id: 'ds-group-box__header'
|
|
24
|
+
},
|
|
25
|
+
rightActions = [],
|
|
26
|
+
centerActions = [],
|
|
27
|
+
type = constants.BOX_TYPES.CATEGORY,
|
|
28
|
+
noBorder,
|
|
29
|
+
isMain
|
|
30
|
+
} = _ref;
|
|
30
31
|
const {
|
|
31
32
|
labelText,
|
|
32
33
|
borderBottom,
|
package/cjs/components/blocks.js
CHANGED
|
@@ -5,42 +5,51 @@ Object.defineProperty(exports, '__esModule', { value: true });
|
|
|
5
5
|
var dsClassnames = require('@elliemae/ds-classnames');
|
|
6
6
|
|
|
7
7
|
const blockName = 'group-box';
|
|
8
|
-
const GroupBoxWrapper = dsClassnames.aggregatedClasses('div')(blockName, 'wrapper',
|
|
9
|
-
|
|
10
|
-
|
|
11
|
-
|
|
12
|
-
|
|
13
|
-
|
|
14
|
-
|
|
15
|
-
|
|
16
|
-
|
|
17
|
-
|
|
18
|
-
|
|
19
|
-
|
|
20
|
-
|
|
21
|
-
|
|
22
|
-
|
|
23
|
-
|
|
24
|
-
|
|
25
|
-
|
|
26
|
-
|
|
27
|
-
|
|
28
|
-
|
|
29
|
-
|
|
30
|
-
|
|
31
|
-
|
|
32
|
-
|
|
33
|
-
|
|
34
|
-
|
|
35
|
-
|
|
36
|
-
|
|
37
|
-
|
|
38
|
-
|
|
39
|
-
}
|
|
40
|
-
|
|
41
|
-
|
|
42
|
-
|
|
43
|
-
|
|
8
|
+
const GroupBoxWrapper = dsClassnames.aggregatedClasses('div')(blockName, 'wrapper', _ref => {
|
|
9
|
+
let {
|
|
10
|
+
onlyHeader,
|
|
11
|
+
noBorder,
|
|
12
|
+
type,
|
|
13
|
+
isMain
|
|
14
|
+
} = _ref;
|
|
15
|
+
return {
|
|
16
|
+
'only-header': onlyHeader,
|
|
17
|
+
'no-border': noBorder,
|
|
18
|
+
[type]: type,
|
|
19
|
+
'main-box': isMain,
|
|
20
|
+
'nested-box': !isMain
|
|
21
|
+
};
|
|
22
|
+
});
|
|
23
|
+
const GroupBoxContent = dsClassnames.aggregatedClasses('div')(blockName, 'content', _ref2 => {
|
|
24
|
+
let {
|
|
25
|
+
type,
|
|
26
|
+
asRow,
|
|
27
|
+
onlyHeader,
|
|
28
|
+
noPadding,
|
|
29
|
+
noBorder,
|
|
30
|
+
noBorderTop
|
|
31
|
+
} = _ref2;
|
|
32
|
+
return {
|
|
33
|
+
[type]: type,
|
|
34
|
+
'as-row': asRow,
|
|
35
|
+
'only-header': onlyHeader,
|
|
36
|
+
'no-padding': noPadding,
|
|
37
|
+
'no-border': noBorder,
|
|
38
|
+
'no-border-top': noBorderTop
|
|
39
|
+
};
|
|
40
|
+
});
|
|
41
|
+
const Label = dsClassnames.aggregatedClasses('div')(blockName, 'label', _ref3 => {
|
|
42
|
+
let {
|
|
43
|
+
borderBottom,
|
|
44
|
+
type,
|
|
45
|
+
noBorder
|
|
46
|
+
} = _ref3;
|
|
47
|
+
return {
|
|
48
|
+
'border-bottom': borderBottom,
|
|
49
|
+
[type]: type,
|
|
50
|
+
'no-border': noBorder
|
|
51
|
+
};
|
|
52
|
+
});
|
|
44
53
|
|
|
45
54
|
exports.GroupBoxContent = GroupBoxContent;
|
|
46
55
|
exports.GroupBoxWrapper = GroupBoxWrapper;
|
package/esm/ActionItem.js
CHANGED
|
@@ -7,9 +7,10 @@ const ActionItemNode = /*#__PURE__*/styled.div.withConfig({
|
|
|
7
7
|
componentId: "sc-1ysc0gb-0"
|
|
8
8
|
})(["padding-right:", ";font-weight:300;overflow:hidden;align-items:center;display:flex;&:last-child{padding-right:0;}"], props => __UNSAFE_SPACE_TO_DIMSUM(props.theme.space.xs));
|
|
9
9
|
|
|
10
|
-
function ActionItem({
|
|
11
|
-
|
|
12
|
-
|
|
10
|
+
function ActionItem(_ref) {
|
|
11
|
+
let {
|
|
12
|
+
children
|
|
13
|
+
} = _ref;
|
|
13
14
|
return /*#__PURE__*/_jsx(ActionItemNode, {}, void 0, children);
|
|
14
15
|
}
|
|
15
16
|
|
package/esm/Actions.js
CHANGED
|
@@ -1,4 +1,6 @@
|
|
|
1
1
|
import _jsx from '@babel/runtime/helpers/esm/jsx';
|
|
2
|
+
import 'core-js/modules/esnext.async-iterator.map.js';
|
|
3
|
+
import 'core-js/modules/esnext.iterator.map.js';
|
|
2
4
|
import 'react';
|
|
3
5
|
import styled from 'styled-components';
|
|
4
6
|
import { margin } from 'styled-system';
|
|
@@ -9,11 +11,12 @@ const ActionsNode = /*#__PURE__*/styled.div.withConfig({
|
|
|
9
11
|
componentId: "sc-1umfb8g-0"
|
|
10
12
|
})(["display:flex;flex-direction:row;padding-left:", ";overflow:hidden;", ""], props => __UNSAFE_SPACE_TO_DIMSUM(props.theme.space.m), margin);
|
|
11
13
|
|
|
12
|
-
function Actions({
|
|
13
|
-
|
|
14
|
-
|
|
15
|
-
|
|
16
|
-
|
|
14
|
+
function Actions(_ref) {
|
|
15
|
+
let {
|
|
16
|
+
actions = [],
|
|
17
|
+
centerActions,
|
|
18
|
+
rightActions
|
|
19
|
+
} = _ref;
|
|
17
20
|
if (actions.length < 1) return null;
|
|
18
21
|
return /*#__PURE__*/_jsx(ActionsNode, {
|
|
19
22
|
marginLeft: !!rightActions && 'auto',
|
package/esm/DSGroupBox.js
CHANGED
|
@@ -1,5 +1,12 @@
|
|
|
1
1
|
import _defineProperty from '@babel/runtime/helpers/esm/defineProperty';
|
|
2
2
|
import _jsx from '@babel/runtime/helpers/esm/jsx';
|
|
3
|
+
import 'core-js/modules/esnext.async-iterator.map.js';
|
|
4
|
+
import 'core-js/modules/esnext.iterator.map.js';
|
|
5
|
+
import 'core-js/modules/esnext.async-iterator.filter.js';
|
|
6
|
+
import 'core-js/modules/esnext.iterator.constructor.js';
|
|
7
|
+
import 'core-js/modules/esnext.iterator.filter.js';
|
|
8
|
+
import 'core-js/modules/esnext.async-iterator.for-each.js';
|
|
9
|
+
import 'core-js/modules/esnext.iterator.for-each.js';
|
|
3
10
|
import React from 'react';
|
|
4
11
|
import { PropTypes, describe } from 'react-desc';
|
|
5
12
|
import { GroupBoxWrapper, GroupBoxContent } from './components/blocks.js';
|
|
@@ -11,24 +18,25 @@ function ownKeys(object, enumerableOnly) { var keys = Object.keys(object); if (O
|
|
|
11
18
|
|
|
12
19
|
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; }
|
|
13
20
|
|
|
14
|
-
const DSGroupBox =
|
|
15
|
-
|
|
16
|
-
|
|
17
|
-
|
|
18
|
-
|
|
19
|
-
|
|
20
|
-
|
|
21
|
-
|
|
22
|
-
|
|
23
|
-
|
|
24
|
-
|
|
25
|
-
|
|
26
|
-
|
|
27
|
-
|
|
28
|
-
|
|
29
|
-
|
|
30
|
-
|
|
31
|
-
|
|
21
|
+
const DSGroupBox = _ref => {
|
|
22
|
+
let {
|
|
23
|
+
containerProps = {},
|
|
24
|
+
labelProps = {
|
|
25
|
+
labelText: '',
|
|
26
|
+
borderBottom: false,
|
|
27
|
+
id: 'ds-group-box__header'
|
|
28
|
+
},
|
|
29
|
+
rightActions = [],
|
|
30
|
+
centerActions = [],
|
|
31
|
+
type = BOX_TYPES.CATEGORY,
|
|
32
|
+
asRow = false,
|
|
33
|
+
onlyHeader = false,
|
|
34
|
+
noBorder = true,
|
|
35
|
+
noPadding = false,
|
|
36
|
+
children: components = [],
|
|
37
|
+
// eslint-disable-next-line react/prop-types
|
|
38
|
+
isMain = true
|
|
39
|
+
} = _ref;
|
|
32
40
|
const {
|
|
33
41
|
labelText
|
|
34
42
|
} = labelProps;
|
package/esm/GroupBoxLabel.js
CHANGED
|
@@ -3,35 +3,23 @@ import 'react';
|
|
|
3
3
|
import styled from 'styled-components';
|
|
4
4
|
import { __UNSAFE_SPACE_TO_DIMSUM, toMobile } from '@elliemae/ds-system';
|
|
5
5
|
|
|
6
|
-
const borderBase200 = props =>
|
|
6
|
+
const borderBase200 = props => "1px solid ".concat(props.theme.colors.neutral[200], ";");
|
|
7
7
|
|
|
8
|
-
const categoryBoxStyles =
|
|
9
|
-
|
|
10
|
-
height: 36px;
|
|
11
|
-
padding:0 0;
|
|
12
|
-
color: ${props => props.theme.colors.neutral[800]};
|
|
13
|
-
display: flex;
|
|
14
|
-
flex-direction: row;
|
|
15
|
-
align-items: center;
|
|
16
|
-
border-bottom: ${borderBase200}
|
|
17
|
-
`;
|
|
18
|
-
const groupBoxStyles = `
|
|
19
|
-
border: unset;
|
|
20
|
-
font-size: ${props => toMobile(props.theme.fontSizes.title[500])};
|
|
21
|
-
padding: 12px 0;
|
|
22
|
-
`;
|
|
8
|
+
const categoryBoxStyles = "\n width: 100%;\n height: 36px;\n padding:0 0;\n color: ".concat(props => props.theme.colors.neutral[800], ";\n display: flex;\n flex-direction: row;\n align-items: center;\n border-bottom: ").concat(borderBase200, "\n");
|
|
9
|
+
const groupBoxStyles = "\n border: unset;\n font-size: ".concat(props => toMobile(props.theme.fontSizes.title[500]), ";\n padding: 12px 0;\n");
|
|
23
10
|
const GroupBoxLabelNode = /*#__PURE__*/styled.div.withConfig({
|
|
24
11
|
componentId: "sc-141ikkh-0"
|
|
25
|
-
})(["", " ", " ", " ", ""], props => props.nodeType === 'category-box' ? categoryBoxStyles : groupBoxStyles, props => props.noBorder ? 'border: none;' : '', props => props.borderBottom ?
|
|
12
|
+
})(["", " ", " ", " ", ""], props => props.nodeType === 'category-box' ? categoryBoxStyles : groupBoxStyles, props => props.noBorder ? 'border: none;' : '', props => props.borderBottom ? "border-bottom: ".concat(borderBase200(props)) : '', props => props.isMain ? "padding-right: ".concat(__UNSAFE_SPACE_TO_DIMSUM(props.theme.space.xs), ";") : '');
|
|
26
13
|
|
|
27
|
-
function GroupBoxLabel({
|
|
28
|
-
|
|
29
|
-
|
|
30
|
-
|
|
31
|
-
|
|
32
|
-
|
|
33
|
-
|
|
34
|
-
|
|
14
|
+
function GroupBoxLabel(_ref) {
|
|
15
|
+
let {
|
|
16
|
+
borderBottom,
|
|
17
|
+
children,
|
|
18
|
+
noBorder,
|
|
19
|
+
isMain,
|
|
20
|
+
type,
|
|
21
|
+
id
|
|
22
|
+
} = _ref;
|
|
35
23
|
return /*#__PURE__*/_jsx(GroupBoxLabelNode, {
|
|
36
24
|
borderBottom: borderBottom,
|
|
37
25
|
"data-testid": "ds-group-box__header",
|
package/esm/LabelElement.js
CHANGED
|
@@ -7,9 +7,10 @@ const LabelElementNode = /*#__PURE__*/styled.div.withConfig({
|
|
|
7
7
|
componentId: "sc-nu03bl-0"
|
|
8
8
|
})(["overflow:hidden;display:flex;align-items:center;font-size:", ";font-weight:400;"], props => toMobile(props.theme.fontSizes.title[700]));
|
|
9
9
|
|
|
10
|
-
function LabelElement({
|
|
11
|
-
|
|
12
|
-
|
|
10
|
+
function LabelElement(_ref) {
|
|
11
|
+
let {
|
|
12
|
+
children
|
|
13
|
+
} = _ref;
|
|
13
14
|
return /*#__PURE__*/_jsx(LabelElementNode, {}, void 0, children);
|
|
14
15
|
}
|
|
15
16
|
|
|
@@ -6,18 +6,19 @@ import { Actions } from '../Actions.js';
|
|
|
6
6
|
import LabelElement from '../LabelElement.js';
|
|
7
7
|
import GroupBoxLabel from '../GroupBoxLabel.js';
|
|
8
8
|
|
|
9
|
-
const DSGroupBoxHeader =
|
|
10
|
-
|
|
11
|
-
|
|
12
|
-
|
|
13
|
-
|
|
14
|
-
|
|
15
|
-
|
|
16
|
-
|
|
17
|
-
|
|
18
|
-
|
|
19
|
-
|
|
20
|
-
|
|
9
|
+
const DSGroupBoxHeader = _ref => {
|
|
10
|
+
let {
|
|
11
|
+
labelProps = {
|
|
12
|
+
labelText: '',
|
|
13
|
+
borderBottom: false,
|
|
14
|
+
id: 'ds-group-box__header'
|
|
15
|
+
},
|
|
16
|
+
rightActions = [],
|
|
17
|
+
centerActions = [],
|
|
18
|
+
type = BOX_TYPES.CATEGORY,
|
|
19
|
+
noBorder,
|
|
20
|
+
isMain
|
|
21
|
+
} = _ref;
|
|
21
22
|
const {
|
|
22
23
|
labelText,
|
|
23
24
|
borderBottom,
|
package/esm/components/blocks.js
CHANGED
|
@@ -1,41 +1,50 @@
|
|
|
1
1
|
import { aggregatedClasses } from '@elliemae/ds-classnames';
|
|
2
2
|
|
|
3
3
|
const blockName = 'group-box';
|
|
4
|
-
const GroupBoxWrapper = aggregatedClasses('div')(blockName, 'wrapper',
|
|
5
|
-
|
|
6
|
-
|
|
7
|
-
|
|
8
|
-
|
|
9
|
-
|
|
10
|
-
|
|
11
|
-
|
|
12
|
-
|
|
13
|
-
|
|
14
|
-
|
|
15
|
-
|
|
16
|
-
|
|
17
|
-
|
|
18
|
-
|
|
19
|
-
|
|
20
|
-
|
|
21
|
-
|
|
22
|
-
|
|
23
|
-
|
|
24
|
-
|
|
25
|
-
|
|
26
|
-
|
|
27
|
-
|
|
28
|
-
|
|
29
|
-
|
|
30
|
-
|
|
31
|
-
|
|
32
|
-
|
|
33
|
-
|
|
34
|
-
|
|
35
|
-
}
|
|
36
|
-
|
|
37
|
-
|
|
38
|
-
|
|
39
|
-
|
|
4
|
+
const GroupBoxWrapper = aggregatedClasses('div')(blockName, 'wrapper', _ref => {
|
|
5
|
+
let {
|
|
6
|
+
onlyHeader,
|
|
7
|
+
noBorder,
|
|
8
|
+
type,
|
|
9
|
+
isMain
|
|
10
|
+
} = _ref;
|
|
11
|
+
return {
|
|
12
|
+
'only-header': onlyHeader,
|
|
13
|
+
'no-border': noBorder,
|
|
14
|
+
[type]: type,
|
|
15
|
+
'main-box': isMain,
|
|
16
|
+
'nested-box': !isMain
|
|
17
|
+
};
|
|
18
|
+
});
|
|
19
|
+
const GroupBoxContent = aggregatedClasses('div')(blockName, 'content', _ref2 => {
|
|
20
|
+
let {
|
|
21
|
+
type,
|
|
22
|
+
asRow,
|
|
23
|
+
onlyHeader,
|
|
24
|
+
noPadding,
|
|
25
|
+
noBorder,
|
|
26
|
+
noBorderTop
|
|
27
|
+
} = _ref2;
|
|
28
|
+
return {
|
|
29
|
+
[type]: type,
|
|
30
|
+
'as-row': asRow,
|
|
31
|
+
'only-header': onlyHeader,
|
|
32
|
+
'no-padding': noPadding,
|
|
33
|
+
'no-border': noBorder,
|
|
34
|
+
'no-border-top': noBorderTop
|
|
35
|
+
};
|
|
36
|
+
});
|
|
37
|
+
const Label = aggregatedClasses('div')(blockName, 'label', _ref3 => {
|
|
38
|
+
let {
|
|
39
|
+
borderBottom,
|
|
40
|
+
type,
|
|
41
|
+
noBorder
|
|
42
|
+
} = _ref3;
|
|
43
|
+
return {
|
|
44
|
+
'border-bottom': borderBottom,
|
|
45
|
+
[type]: type,
|
|
46
|
+
'no-border': noBorder
|
|
47
|
+
};
|
|
48
|
+
});
|
|
40
49
|
|
|
41
50
|
export { GroupBoxContent, GroupBoxWrapper, Label };
|
package/package.json
CHANGED
|
@@ -1,6 +1,6 @@
|
|
|
1
1
|
{
|
|
2
2
|
"name": "@elliemae/ds-group-box",
|
|
3
|
-
"version": "2.0.0-alpha.
|
|
3
|
+
"version": "2.0.0-alpha.14",
|
|
4
4
|
"license": "MIT",
|
|
5
5
|
"description": "ICE MT - Dimsum - Group Box",
|
|
6
6
|
"module": "./esm/index.js",
|
|
@@ -64,20 +64,22 @@
|
|
|
64
64
|
"build": "node ../../scripts/build/build.js"
|
|
65
65
|
},
|
|
66
66
|
"dependencies": {
|
|
67
|
-
"@elliemae/ds-classnames": "2.0.0-alpha.
|
|
68
|
-
"@elliemae/ds-system": "2.0.0-alpha.
|
|
69
|
-
"@elliemae/ds-truncated-tooltip-text": "2.0.0-alpha.
|
|
67
|
+
"@elliemae/ds-classnames": "2.0.0-alpha.14",
|
|
68
|
+
"@elliemae/ds-system": "2.0.0-alpha.14",
|
|
69
|
+
"@elliemae/ds-truncated-tooltip-text": "2.0.0-alpha.14",
|
|
70
70
|
"prop-types": "~15.7.2",
|
|
71
71
|
"react-desc": "~4.1.3"
|
|
72
72
|
},
|
|
73
73
|
"devDependencies": {
|
|
74
|
-
"
|
|
74
|
+
"@testing-library/jest-dom": "~5.15.0",
|
|
75
|
+
"@testing-library/react": "~12.1.2",
|
|
76
|
+
"styled-components": "~5.3.3",
|
|
75
77
|
"styled-system": "~5.1.5"
|
|
76
78
|
},
|
|
77
79
|
"peerDependencies": {
|
|
78
80
|
"react": "^17.0.2",
|
|
79
81
|
"react-dom": "^17.0.2",
|
|
80
|
-
"styled-components": "^5.3.
|
|
82
|
+
"styled-components": "^5.3.3",
|
|
81
83
|
"styled-system": "^5.1.5"
|
|
82
84
|
},
|
|
83
85
|
"publishConfig": {
|
package/types/DSGroupBox.d.ts
CHANGED
|
@@ -1,3 +1,4 @@
|
|
|
1
|
+
/// <reference path="../../../../shared/typings/react-desc.d.ts" />
|
|
1
2
|
/// <reference types="react" />
|
|
2
3
|
declare const DSGroupBox: {
|
|
3
4
|
({ containerProps, labelProps, rightActions, centerActions, type, asRow, onlyHeader, noBorder, noPadding, children: components, isMain, }: {
|
|
@@ -19,15 +20,30 @@ declare const DSGroupBox: {
|
|
|
19
20
|
}): JSX.Element;
|
|
20
21
|
propTypes: {
|
|
21
22
|
/** props to inject to wrapper */
|
|
22
|
-
containerProps:
|
|
23
|
+
containerProps: {
|
|
24
|
+
defaultValue<T = unknown>(arg: T): {
|
|
25
|
+
deprecated: import("react-desc").PropTypesDescValidator;
|
|
26
|
+
};
|
|
27
|
+
isRequired: import("react-desc").PropTypesDescValidator;
|
|
28
|
+
};
|
|
23
29
|
/**
|
|
24
30
|
* Label attributes to be rendered
|
|
25
31
|
*/
|
|
26
|
-
labelProps:
|
|
32
|
+
labelProps: {
|
|
33
|
+
defaultValue<T = unknown>(arg: T): {
|
|
34
|
+
deprecated: import("react-desc").PropTypesDescValidator;
|
|
35
|
+
};
|
|
36
|
+
isRequired: import("react-desc").PropTypesDescValidator;
|
|
37
|
+
};
|
|
27
38
|
/**
|
|
28
39
|
* ['category-box', 'group-box']
|
|
29
40
|
*/
|
|
30
|
-
type:
|
|
41
|
+
type: {
|
|
42
|
+
defaultValue<T = unknown>(arg: T): {
|
|
43
|
+
deprecated: import("react-desc").PropTypesDescValidator;
|
|
44
|
+
};
|
|
45
|
+
isRequired: import("react-desc").PropTypesDescValidator;
|
|
46
|
+
};
|
|
31
47
|
/**
|
|
32
48
|
* Components to be rendered inside the box
|
|
33
49
|
*/
|
|
@@ -35,29 +51,79 @@ declare const DSGroupBox: {
|
|
|
35
51
|
/**
|
|
36
52
|
* Actions on the right side of the label
|
|
37
53
|
*/
|
|
38
|
-
rightActions:
|
|
54
|
+
rightActions: {
|
|
55
|
+
defaultValue<T = unknown>(arg: T): {
|
|
56
|
+
deprecated: import("react-desc").PropTypesDescValidator;
|
|
57
|
+
};
|
|
58
|
+
isRequired: import("react-desc").PropTypesDescValidator;
|
|
59
|
+
};
|
|
39
60
|
/**
|
|
40
61
|
* Actions on the next to the label
|
|
41
62
|
*/
|
|
42
|
-
centerActions:
|
|
63
|
+
centerActions: {
|
|
64
|
+
defaultValue<T = unknown>(arg: T): {
|
|
65
|
+
deprecated: import("react-desc").PropTypesDescValidator;
|
|
66
|
+
};
|
|
67
|
+
isRequired: import("react-desc").PropTypesDescValidator;
|
|
68
|
+
};
|
|
43
69
|
/**
|
|
44
70
|
* Display the content of the group box with flex direction row
|
|
45
71
|
*/
|
|
46
|
-
asRow:
|
|
72
|
+
asRow: {
|
|
73
|
+
defaultValue<T = unknown>(arg: T): {
|
|
74
|
+
deprecated: import("react-desc").PropTypesDescValidator;
|
|
75
|
+
};
|
|
76
|
+
isRequired: import("react-desc").PropTypesDescValidator;
|
|
77
|
+
};
|
|
47
78
|
/**
|
|
48
79
|
* Show border only on the header
|
|
49
80
|
*/
|
|
50
|
-
onlyHeader:
|
|
81
|
+
onlyHeader: {
|
|
82
|
+
defaultValue<T = unknown>(arg: T): {
|
|
83
|
+
deprecated: import("react-desc").PropTypesDescValidator;
|
|
84
|
+
};
|
|
85
|
+
isRequired: import("react-desc").PropTypesDescValidator;
|
|
86
|
+
};
|
|
51
87
|
/**
|
|
52
88
|
* Remove the wrapper border
|
|
53
89
|
*/
|
|
54
|
-
noBorder:
|
|
90
|
+
noBorder: {
|
|
91
|
+
defaultValue<T = unknown>(arg: T): {
|
|
92
|
+
deprecated: import("react-desc").PropTypesDescValidator;
|
|
93
|
+
};
|
|
94
|
+
isRequired: import("react-desc").PropTypesDescValidator;
|
|
95
|
+
};
|
|
55
96
|
/**
|
|
56
97
|
* Remove the top and bottom padding from the content
|
|
57
98
|
*/
|
|
58
|
-
noPadding:
|
|
99
|
+
noPadding: {
|
|
100
|
+
defaultValue<T = unknown>(arg: T): {
|
|
101
|
+
deprecated: import("react-desc").PropTypesDescValidator;
|
|
102
|
+
};
|
|
103
|
+
isRequired: import("react-desc").PropTypesDescValidator;
|
|
104
|
+
};
|
|
59
105
|
};
|
|
60
106
|
};
|
|
61
|
-
declare const DSGroupBoxWithSchema:
|
|
107
|
+
declare const DSGroupBoxWithSchema: {
|
|
108
|
+
(props?: {
|
|
109
|
+
containerProps?: {} | undefined;
|
|
110
|
+
labelProps?: {
|
|
111
|
+
labelText: string;
|
|
112
|
+
borderBottom: boolean;
|
|
113
|
+
id: string;
|
|
114
|
+
} | undefined;
|
|
115
|
+
rightActions?: never[] | undefined;
|
|
116
|
+
centerActions?: never[] | undefined;
|
|
117
|
+
type?: string | undefined;
|
|
118
|
+
asRow?: boolean | undefined;
|
|
119
|
+
onlyHeader?: boolean | undefined;
|
|
120
|
+
noBorder?: boolean | undefined;
|
|
121
|
+
noPadding?: boolean | undefined;
|
|
122
|
+
children?: never[] | undefined;
|
|
123
|
+
isMain?: boolean | undefined;
|
|
124
|
+
} | undefined): JSX.Element;
|
|
125
|
+
propTypes: unknown;
|
|
126
|
+
toTypescript: () => import("react-desc").TypescriptSchema;
|
|
127
|
+
};
|
|
62
128
|
export { DSGroupBox, DSGroupBoxWithSchema };
|
|
63
129
|
export default DSGroupBox;
|
package/cjs/package.json
DELETED