@elliemae/ds-card 2.0.0-alpha.0 → 2.0.0-alpha.12

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 (31) hide show
  1. package/cjs/DSCard.js +8 -3
  2. package/cjs/DSCardBody.js +10 -7
  3. package/cjs/DSCardHeader.js +9 -8
  4. package/cjs/detail/DetailCard.js +42 -45
  5. package/cjs/detail/styled.js +25 -23
  6. package/cjs/index.js +1 -1
  7. package/cjs/v2/ActionAddon.js +17 -15
  8. package/cjs/v2/Card.js +32 -29
  9. package/cjs/v2/Group.js +22 -16
  10. package/cjs/v2/components.js +16 -13
  11. package/esm/DSCard.js +5 -0
  12. package/esm/DSCardBody.js +9 -6
  13. package/esm/DSCardHeader.js +5 -4
  14. package/esm/detail/DetailCard.js +24 -24
  15. package/esm/detail/styled.js +15 -13
  16. package/esm/v2/ActionAddon.js +15 -12
  17. package/esm/v2/Card.js +31 -28
  18. package/esm/v2/Group.js +17 -11
  19. package/esm/v2/components.js +7 -4
  20. package/package.json +14 -12
  21. package/types/DSCard.d.ts +29 -4
  22. package/types/DSCardBody.d.ts +14 -2
  23. package/types/DSCardHeader.d.ts +21 -3
  24. package/types/detail/DetailCard.d.ts +106 -15
  25. package/types/detail/styled.d.ts +7 -7
  26. package/types/v2/ActionAddon.d.ts +28 -4
  27. package/types/v2/Card.d.ts +36 -5
  28. package/types/v2/Group.d.ts +16 -2
  29. package/types/v2/components.d.ts +9 -9
  30. package/cjs/package.json +0 -7
  31. package/esm/package.json +0 -7
package/cjs/DSCard.js CHANGED
@@ -2,6 +2,11 @@
2
2
 
3
3
  Object.defineProperty(exports, '__esModule', { value: true });
4
4
 
5
+ require('core-js/modules/esnext.async-iterator.filter.js');
6
+ require('core-js/modules/esnext.iterator.constructor.js');
7
+ require('core-js/modules/esnext.iterator.filter.js');
8
+ require('core-js/modules/esnext.async-iterator.for-each.js');
9
+ require('core-js/modules/esnext.iterator.for-each.js');
5
10
  var _defineProperty = require('@babel/runtime/helpers/defineProperty');
6
11
  var _objectWithoutProperties = require('@babel/runtime/helpers/objectWithoutProperties');
7
12
  require('react');
@@ -20,7 +25,7 @@ const _excluded = ["innerRef", "children", "containerProps"];
20
25
 
21
26
  function ownKeys(object, enumerableOnly) { var keys = Object.keys(object); if (Object.getOwnPropertySymbols) { var symbols = Object.getOwnPropertySymbols(object); if (enumerableOnly) { symbols = symbols.filter(function (sym) { return Object.getOwnPropertyDescriptor(object, sym).enumerable; }); } keys.push.apply(keys, symbols); } return keys; }
22
27
 
23
- 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; }
28
+ 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; }
24
29
 
25
30
  const DSCard = _ref => {
26
31
  let {
@@ -28,7 +33,7 @@ const DSCard = _ref => {
28
33
  children = null,
29
34
  containerProps = {}
30
35
  } = _ref,
31
- otherProps = _objectWithoutProperties__default['default'](_ref, _excluded);
36
+ otherProps = _objectWithoutProperties__default["default"](_ref, _excluded);
32
37
 
33
38
  const {
34
39
  cssClassName
@@ -64,4 +69,4 @@ DSCardWithSchema.propTypes = cardProps;
64
69
 
65
70
  exports.DSCard = DSCard;
66
71
  exports.DSCardWithSchema = DSCardWithSchema;
67
- exports['default'] = DSCard;
72
+ exports["default"] = DSCard;
package/cjs/DSCardBody.js CHANGED
@@ -10,12 +10,15 @@ function _interopDefaultLegacy (e) { return e && typeof e === 'object' && 'defau
10
10
 
11
11
  var _jsx__default = /*#__PURE__*/_interopDefaultLegacy(_jsx);
12
12
 
13
- const DSCardBody = ({
14
- children
15
- }) => /*#__PURE__*/_jsx__default['default']("div", {
16
- className: "em-ds-card-body",
17
- "data-testid": "card-body"
18
- }, void 0, children);
13
+ const DSCardBody = _ref => {
14
+ let {
15
+ children
16
+ } = _ref;
17
+ return /*#__PURE__*/_jsx__default["default"]("div", {
18
+ className: "em-ds-card-body",
19
+ "data-testid": "card-body"
20
+ }, void 0, children);
21
+ };
19
22
 
20
23
  const bodyProps = {
21
24
  /** children */
@@ -26,4 +29,4 @@ DSCardBodyWithSchema.propTypes = bodyProps;
26
29
 
27
30
  exports.DSCardBody = DSCardBody;
28
31
  exports.DSCardBodyWithSchema = DSCardBodyWithSchema;
29
- exports['default'] = DSCardBody;
32
+ exports["default"] = DSCardBody;
package/cjs/DSCardHeader.js CHANGED
@@ -11,20 +11,21 @@ function _interopDefaultLegacy (e) { return e && typeof e === 'object' && 'defau
11
11
 
12
12
  var _jsx__default = /*#__PURE__*/_interopDefaultLegacy(_jsx);
13
13
 
14
- const DSCardHeader = ({
15
- title,
16
- action
17
- }) => {
14
+ const DSCardHeader = _ref => {
15
+ let {
16
+ title,
17
+ action
18
+ } = _ref;
18
19
  const {
19
20
  cssClassName,
20
21
  classNameElement
21
22
  } = dsClassnames.convertPropToCssClassName('card-header');
22
- return /*#__PURE__*/_jsx__default['default']("div", {
23
+ return /*#__PURE__*/_jsx__default["default"]("div", {
23
24
  className: cssClassName,
24
25
  "data-testid": "card-header"
25
- }, void 0, /*#__PURE__*/_jsx__default['default']("span", {
26
+ }, void 0, /*#__PURE__*/_jsx__default["default"]("span", {
26
27
  className: classNameElement('heading')
27
- }, void 0, title), /*#__PURE__*/_jsx__default['default']("div", {
28
+ }, void 0, title), /*#__PURE__*/_jsx__default["default"]("div", {
28
29
  className: classNameElement('pull-right'),
29
30
  "data-testid": "ds-card_header-action"
30
31
  }, void 0, action));
@@ -42,4 +43,4 @@ DSCardHeaderWithSchema.propTypes = cardHeader;
42
43
 
43
44
  exports.DSCardHeader = DSCardHeader;
44
45
  exports.DSCardHeaderWithSchema = DSCardHeaderWithSchema;
45
- exports['default'] = DSCardHeader;
46
+ exports["default"] = DSCardHeader;
package/cjs/detail/DetailCard.js CHANGED
@@ -6,47 +6,44 @@ var _jsx = require('@babel/runtime/helpers/jsx');
6
6
  require('react');
7
7
  var lodash = require('lodash');
8
8
  var reactDesc = require('react-desc');
9
- var ArrowheadRight = require('@elliemae/ds-icons/ArrowheadRight');
10
- var ArrowheadDown = require('@elliemae/ds-icons/ArrowheadDown');
9
+ var dsIcons = require('@elliemae/ds-icons');
11
10
  var dsSystem = require('@elliemae/ds-system');
12
11
  var DSButton = require('@elliemae/ds-button');
13
12
  var DSSeparator = require('@elliemae/ds-separator');
14
13
  var dsGrid = require('@elliemae/ds-grid');
15
- var DSCheckbox = require('@elliemae/ds-form/Checkbox');
14
+ var dsForm = require('@elliemae/ds-form');
16
15
  var styled = require('./styled.js');
17
16
  var jsxRuntime = require('react/jsx-runtime');
18
17
 
19
18
  function _interopDefaultLegacy (e) { return e && typeof e === 'object' && 'default' in e ? e : { 'default': e }; }
20
19
 
21
20
  var _jsx__default = /*#__PURE__*/_interopDefaultLegacy(_jsx);
22
- var ArrowheadRight__default = /*#__PURE__*/_interopDefaultLegacy(ArrowheadRight);
23
- var ArrowheadDown__default = /*#__PURE__*/_interopDefaultLegacy(ArrowheadDown);
24
21
  var DSButton__default = /*#__PURE__*/_interopDefaultLegacy(DSButton);
25
22
  var DSSeparator__default = /*#__PURE__*/_interopDefaultLegacy(DSSeparator);
26
- var DSCheckbox__default = /*#__PURE__*/_interopDefaultLegacy(DSCheckbox);
27
23
 
28
24
  var _Grid, _DSSeparator;
29
25
 
30
- const DetailCard = ({
31
- title,
32
- description,
33
- descriptionColor = 'neutral',
34
- rightValue,
35
- rightDescription,
36
- rightAddon,
37
- // select props
38
- selectable = false,
39
- isSelected = false,
40
- onSelect = lodash.noop,
41
- // expand props
42
- expandable = false,
43
- isExpanded = false,
44
- onExpand = lodash.noop,
45
- expandContent,
46
- // state props
47
- readOnly = false,
48
- disabled = false
49
- }) => {
26
+ const DetailCard = _ref => {
27
+ let {
28
+ title,
29
+ description,
30
+ descriptionColor = 'neutral',
31
+ rightValue,
32
+ rightDescription,
33
+ rightAddon,
34
+ // select props
35
+ selectable = false,
36
+ isSelected = false,
37
+ onSelect = lodash.noop,
38
+ // expand props
39
+ expandable = false,
40
+ isExpanded = false,
41
+ onExpand = lodash.noop,
42
+ expandContent,
43
+ // state props
44
+ readOnly = false,
45
+ disabled = false
46
+ } = _ref;
50
47
  const theme = dsSystem.useTheme();
51
48
  const hasRightLegend = rightValue && rightDescription;
52
49
  const hasRightPosition = hasRightLegend || rightAddon;
@@ -55,64 +52,64 @@ const DetailCard = ({
55
52
  if (expandable) topWrapperCols.unshift('20px');
56
53
  if (selectable) topWrapperCols.unshift(theme.space.s);
57
54
  return /*#__PURE__*/jsxRuntime.jsx(jsxRuntime.Fragment, {
58
- children: /*#__PURE__*/_jsx__default['default'](styled.Container, {
55
+ children: /*#__PURE__*/_jsx__default["default"](styled.Container, {
59
56
  disabled: disabled || readOnly,
60
57
  active: selectable && isSelected,
61
58
  "data-testid": "card-detail-container"
62
- }, void 0, /*#__PURE__*/_jsx__default['default'](dsGrid.Grid, {
59
+ }, void 0, /*#__PURE__*/_jsx__default["default"](dsGrid.Grid, {
63
60
  cols: topWrapperCols,
64
61
  alignItems: !description && 'center'
65
- }, void 0, selectable && /*#__PURE__*/_jsx__default['default'](dsGrid.Grid, {
62
+ }, void 0, selectable && /*#__PURE__*/_jsx__default["default"](dsGrid.Grid, {
66
63
  pt: description && '9px'
67
- }, void 0, /*#__PURE__*/_jsx__default['default'](DSCheckbox__default['default'], {
64
+ }, void 0, /*#__PURE__*/_jsx__default["default"](dsForm.DSCheckbox, {
68
65
  checked: isSelected,
69
66
  onChange: onSelect,
70
67
  readOnly: readOnly,
71
68
  disabled: disabled,
72
69
  "data-testid": "card-checkbox"
73
- })), expandable && /*#__PURE__*/_jsx__default['default'](dsGrid.Grid, {
70
+ })), expandable && /*#__PURE__*/_jsx__default["default"](dsGrid.Grid, {
74
71
  height: "16px",
75
72
  pt: description && 'xxs',
76
73
  mt: !description && '-5px'
77
- }, void 0, /*#__PURE__*/_jsx__default['default'](DSButton__default['default'], {
74
+ }, void 0, /*#__PURE__*/_jsx__default["default"](DSButton__default["default"], {
78
75
  size: "s",
79
76
  buttonType: "text",
80
77
  containerProps: {
81
78
  'data-testid': 'expand-button'
82
79
  },
83
80
  onClick: onExpand,
84
- icon: isExpanded ? /*#__PURE__*/_jsx__default['default'](ArrowheadDown__default['default'], {
81
+ icon: isExpanded ? /*#__PURE__*/_jsx__default["default"](dsIcons.ArrowheadDown, {
85
82
  color: ['neutral', 500],
86
83
  size: "s"
87
- }) : /*#__PURE__*/_jsx__default['default'](ArrowheadRight__default['default'], {
84
+ }) : /*#__PURE__*/_jsx__default["default"](dsIcons.ArrowheadRight, {
88
85
  color: ['neutral', 500],
89
86
  size: "s"
90
87
  }),
91
88
  disabled: disabled
92
- })), /*#__PURE__*/_jsx__default['default'](dsGrid.Grid, {
89
+ })), /*#__PURE__*/_jsx__default["default"](dsGrid.Grid, {
93
90
  pr: "24px"
94
- }, void 0, /*#__PURE__*/_jsx__default['default'](styled.Title, {}, void 0, title), description && /*#__PURE__*/_jsx__default['default'](styled.Description, {
91
+ }, void 0, /*#__PURE__*/_jsx__default["default"](styled.Title, {}, void 0, title), description && /*#__PURE__*/_jsx__default["default"](styled.Description, {
95
92
  descriptionColor: descriptionColor
96
- }, void 0, description)), hasRightPosition && /*#__PURE__*/_jsx__default['default'](dsGrid.Grid, {
93
+ }, void 0, description)), hasRightPosition && /*#__PURE__*/_jsx__default["default"](dsGrid.Grid, {
97
94
  cols: lodash.compact([hasRightPosition && 'auto', rightAddon && 'auto'])
98
- }, void 0, hasRightLegend && /*#__PURE__*/_jsx__default['default'](dsGrid.Grid, {
95
+ }, void 0, hasRightLegend && /*#__PURE__*/_jsx__default["default"](dsGrid.Grid, {
99
96
  pr: "24px",
100
97
  rows: ['auto', 'auto', 1]
101
- }, void 0, /*#__PURE__*/_jsx__default['default'](styled.RightDescription, {
98
+ }, void 0, /*#__PURE__*/_jsx__default["default"](styled.RightDescription, {
102
99
  justifyContent: "flex-end"
103
- }, void 0, rightDescription), /*#__PURE__*/_jsx__default['default'](styled.RightValue, {
100
+ }, void 0, rightDescription), /*#__PURE__*/_jsx__default["default"](styled.RightValue, {
104
101
  justifyContent: "flex-end"
105
- }, void 0, rightValue), _Grid || (_Grid = /*#__PURE__*/_jsx__default['default'](dsGrid.Grid, {}))), rightAddon && /*#__PURE__*/_jsx__default['default'](styled.RightAddon, {
102
+ }, void 0, rightValue), _Grid || (_Grid = /*#__PURE__*/_jsx__default["default"](dsGrid.Grid, {}))), rightAddon && /*#__PURE__*/_jsx__default["default"](styled.RightAddon, {
106
103
  cols: ['auto', 'auto'],
107
104
  gutter: "2px"
108
- }, void 0, rightAddon))), expandContent && isExpanded && /*#__PURE__*/_jsx__default['default'](dsGrid.Grid, {
105
+ }, void 0, rightAddon))), expandContent && isExpanded && /*#__PURE__*/_jsx__default["default"](dsGrid.Grid, {
109
106
  ml: selectable && 's',
110
107
  mr: rightAddon && 'xs'
111
- }, void 0, _DSSeparator || (_DSSeparator = /*#__PURE__*/_jsx__default['default'](DSSeparator__default['default'], {
108
+ }, void 0, _DSSeparator || (_DSSeparator = /*#__PURE__*/_jsx__default["default"](DSSeparator__default["default"], {
112
109
  dashed: true,
113
110
  position: "initial",
114
111
  margin: "none"
115
- })), /*#__PURE__*/_jsx__default['default'](dsGrid.Grid, {
112
+ })), /*#__PURE__*/_jsx__default["default"](dsGrid.Grid, {
116
113
  pt: "xxs",
117
114
  "data-testid": "detail-card-expanded-content"
118
115
  }, void 0, expandContent)))
@@ -200,4 +197,4 @@ DSCardDetailWithSchema.propTypes = detailProps;
200
197
 
201
198
  exports.DSCardDetailWithSchema = DSCardDetailWithSchema;
202
199
  exports.DetailCard = DetailCard;
203
- exports['default'] = DetailCard;
200
+ exports["default"] = DetailCard;
package/cjs/detail/styled.js CHANGED
@@ -9,45 +9,47 @@ function _interopDefaultLegacy (e) { return e && typeof e === 'object' && 'defau
9
9
 
10
10
  var styled__default = /*#__PURE__*/_interopDefaultLegacy(styled);
11
11
 
12
- const Separator = /*#__PURE__*/styled__default['default'].div.withConfig({
12
+ const Separator = /*#__PURE__*/styled__default["default"].div.withConfig({
13
13
  componentId: "sc-nx8lwv-0"
14
14
  })(["width:100%;height:24px;border-right:1px solid ", ";margin:0 8px;"], props => props.theme.colors.neutral['300']);
15
- const Title = /*#__PURE__*/styled__default['default'].h3.withConfig({
15
+ const Title = /*#__PURE__*/styled__default["default"].h3.withConfig({
16
16
  componentId: "sc-nx8lwv-1"
17
17
  })(["margin:0;font-size:16px;min-height:20px;font-weight:", ";color:", ";"], props => props.theme.fontWeights.semibold, props => props.theme.colors.neutral['700']);
18
- const Description = /*#__PURE__*/styled__default['default'].p.withConfig({
18
+ const Description = /*#__PURE__*/styled__default["default"].p.withConfig({
19
19
  componentId: "sc-nx8lwv-2"
20
20
  })(["margin:0;font-size:12px;min-height:18px;display:flex;align-items:center;color:", ";"], props => props.descriptionColor === 'neutral' ? props.theme.colors.neutral['600'] : props.theme.colors.brand['600']);
21
- const RightAddon = /*#__PURE__*/styled__default['default'](dsGrid.Grid).withConfig({
21
+ const RightAddon = /*#__PURE__*/styled__default["default"](dsGrid.Grid).withConfig({
22
22
  componentId: "sc-nx8lwv-3"
23
23
  })(["margin:0;white-space:nowrap;"]);
24
- const RightDescription = /*#__PURE__*/styled__default['default'](dsGrid.Grid).withConfig({
24
+ const RightDescription = /*#__PURE__*/styled__default["default"](dsGrid.Grid).withConfig({
25
25
  componentId: "sc-nx8lwv-4"
26
26
  })(["margin:0;white-space:nowrap;font-size:12px;color:", ";"], props => props.theme.colors.neutral['600']);
27
- const RightValue = /*#__PURE__*/styled__default['default'](dsGrid.Grid).withConfig({
27
+ const RightValue = /*#__PURE__*/styled__default["default"](dsGrid.Grid).withConfig({
28
28
  componentId: "sc-nx8lwv-5"
29
29
  })(["margin:0;white-space:nowrap;font-size:14px;color:", ";"], props => props.theme.colors.neutral['800']);
30
- const ExpandContent = /*#__PURE__*/styled__default['default'].div.withConfig({
30
+ const ExpandContent = /*#__PURE__*/styled__default["default"].div.withConfig({
31
31
  componentId: "sc-nx8lwv-6"
32
32
  })(["font-size:12px;"]);
33
33
 
34
- const border = ({
35
- active,
36
- theme
37
- }) => active ? theme.colors.brand['600'] : theme.colors.neutral['200'];
38
-
39
- const background = ({
40
- active,
41
- theme
42
- }) => active ? theme.colors.brand['100'] : theme.colors.neutral['000'];
43
-
44
- const Container = /*#__PURE__*/styled__default['default'](dsGrid.Grid).withConfig({
34
+ const border = _ref => {
35
+ let {
36
+ active,
37
+ theme
38
+ } = _ref;
39
+ return active ? theme.colors.brand['600'] : theme.colors.neutral['200'];
40
+ };
41
+
42
+ const background = _ref2 => {
43
+ let {
44
+ active,
45
+ theme
46
+ } = _ref2;
47
+ return active ? theme.colors.brand['100'] : theme.colors.neutral['000'];
48
+ };
49
+
50
+ const Container = /*#__PURE__*/styled__default["default"](dsGrid.Grid).withConfig({
45
51
  componentId: "sc-nx8lwv-7"
46
- })(["width:100%;min-height:52px;min-width:244px;padding:6px 8px 6px 12px;position:relative;border-top:1px solid ", ";border-bottom:1px solid ", ";background:", ";", " &:hover{box-shadow:0 2px 4px 0 rgba(53,60,70,0.5);z-index:1;}"], border, border, background, props => props.disabled ? `
47
- ${Title}, ${Description}, ${RightDescription}, ${RightValue} {
48
- color: ${props.theme.colors.neutral['500']};
49
- }
50
- ` : '');
52
+ })(["width:100%;min-height:52px;min-width:244px;padding:6px 8px 6px 12px;position:relative;border-top:1px solid ", ";border-bottom:1px solid ", ";background:", ";", " &:hover{box-shadow:0 2px 4px 0 rgba(53,60,70,0.5);z-index:1;}"], border, border, background, props => props.disabled ? "\n ".concat(Title, ", ").concat(Description, ", ").concat(RightDescription, ", ").concat(RightValue, " {\n color: ").concat(props.theme.colors.neutral['500'], ";\n }\n ") : '');
51
53
 
52
54
  exports.Container = Container;
53
55
  exports.Description = Description;
package/cjs/index.js CHANGED
@@ -14,7 +14,7 @@ var DetailCard = require('./detail/DetailCard.js');
14
14
 
15
15
  exports.DSCard = DSCard.DSCard;
16
16
  exports.DSCardWithSchema = DSCard.DSCardWithSchema;
17
- exports.default = DSCard.DSCard;
17
+ exports["default"] = DSCard.DSCard;
18
18
  exports.DSCardHeader = DSCardHeader.DSCardHeader;
19
19
  exports.DSCardHeaderWithSchema = DSCardHeader.DSCardHeaderWithSchema;
20
20
  exports.DSCardBody = DSCardBody.DSCardBody;
package/cjs/v2/ActionAddon.js CHANGED
@@ -6,31 +6,33 @@ var _jsx = require('@babel/runtime/helpers/jsx');
6
6
  require('react');
7
7
  var reactDesc = require('react-desc');
8
8
  var styled = require('styled-components');
9
- var Chevron = require('@elliemae/ds-icons/ChevronSmallDown');
9
+ var dsIcons = require('@elliemae/ds-icons');
10
10
  var DSButton = require('@elliemae/ds-button');
11
11
 
12
12
  function _interopDefaultLegacy (e) { return e && typeof e === 'object' && 'default' in e ? e : { 'default': e }; }
13
13
 
14
14
  var _jsx__default = /*#__PURE__*/_interopDefaultLegacy(_jsx);
15
15
  var styled__default = /*#__PURE__*/_interopDefaultLegacy(styled);
16
- var Chevron__default = /*#__PURE__*/_interopDefaultLegacy(Chevron);
17
16
  var DSButton__default = /*#__PURE__*/_interopDefaultLegacy(DSButton);
18
17
 
19
- const Addon = /*#__PURE__*/styled__default['default'](DSButton__default['default']).withConfig({
18
+ const Addon = /*#__PURE__*/styled__default["default"](DSButton__default["default"]).withConfig({
20
19
  componentId: "sc-1pazs35-0"
21
20
  })(["background-color:transparent;padding-right:4px;height:100%;border:none;font-size:12px;font-weight:", ";color:", ";cursor:pointer;&:focus,&::after{background-color:transparent;box-shadow:none !important;border:none !important;}"], props => props.theme.fontWeights.semibold, props => props.theme.colors.brand['700']);
22
21
 
23
- const ActionAddon = ({
24
- label,
25
- onClick,
26
- icon
27
- }) => /*#__PURE__*/_jsx__default['default'](Addon, {
28
- onClick: onClick,
29
- labelText: label,
30
- icon: icon || /*#__PURE__*/_jsx__default['default'](Chevron__default['default'], {
31
- color: ['brand-primary', 700]
32
- })
33
- });
22
+ const ActionAddon = _ref => {
23
+ let {
24
+ label,
25
+ onClick,
26
+ icon
27
+ } = _ref;
28
+ return /*#__PURE__*/_jsx__default["default"](Addon, {
29
+ onClick: onClick,
30
+ labelText: label,
31
+ icon: icon || /*#__PURE__*/_jsx__default["default"](dsIcons.ChevronSmallDown, {
32
+ color: ['brand-primary', 700]
33
+ })
34
+ });
35
+ };
34
36
 
35
37
  const actionProps = {
36
38
  /**
@@ -53,4 +55,4 @@ DSCardActionAddonWithSchema.propTypes = actionProps;
53
55
 
54
56
  exports.ActionAddon = ActionAddon;
55
57
  exports.DSCardActionAddonWithSchema = DSCardActionAddonWithSchema;
56
- exports['default'] = ActionAddon;
58
+ exports["default"] = ActionAddon;
package/cjs/v2/Card.js CHANGED
@@ -22,34 +22,37 @@ const getCol = rightAddon => {
22
22
  return [1, 'auto'];
23
23
  };
24
24
 
25
- const CustomCard = ({
26
- title,
27
- description,
28
- leftAddon,
29
- rightAddon,
30
- // array. max 2 elements
31
- hasBorder = false
32
- }) => /*#__PURE__*/_jsx__default['default'](DSTruncatedTooltipText.TooltipTextProvider, {}, void 0, /*#__PURE__*/_jsx__default['default'](components.CardContainer, {
33
- hasBorder: hasBorder,
34
- cols: getCol(rightAddon),
35
- "data-testid": "em-ds-card"
36
- }, void 0, /*#__PURE__*/_jsx__default['default'](components.LeftSection, {}, void 0, leftAddon && /*#__PURE__*/_jsx__default['default'](components.LeftAddon, {}, void 0, leftAddon), /*#__PURE__*/_jsx__default['default'](components.MainSection, {
37
- style: {
38
- maxWidth: leftAddon ? 'calc(100% - 40px)' : '100%'
39
- }
40
- }, void 0, /*#__PURE__*/_jsx__default['default'](dsHeader.DSHeader, {
41
- fontSize: "16px",
42
- "data-testid": "em-ds-card-header",
43
- fontWeight: "regular",
44
- color: "neutral.800",
45
- text: /*#__PURE__*/_jsx__default['default'](DSTruncatedTooltipText__default['default'], {
46
- value: title
47
- })
48
- }), description && /*#__PURE__*/_jsx__default['default'](components.Description, {}, void 0, /*#__PURE__*/_jsx__default['default'](DSTruncatedTooltipText__default['default'], {
49
- value: description
50
- })))), rightAddon && /*#__PURE__*/_jsx__default['default'](components.RightAddonSection, {}, void 0, rightAddon[0] && /*#__PURE__*/_jsx__default['default'](components.RightAddon, {}, void 0, rightAddon[0]), rightAddon[1] && /*#__PURE__*/jsxRuntime.jsxs(jsxRuntime.Fragment, {
51
- children: [rightAddon.length > 1 && (_Separator || (_Separator = /*#__PURE__*/_jsx__default['default'](components.Separator, {}))), /*#__PURE__*/_jsx__default['default'](components.RightAddon, {}, void 0, rightAddon[1])]
52
- }))));
25
+ const CustomCard = _ref => {
26
+ let {
27
+ title,
28
+ description,
29
+ leftAddon,
30
+ rightAddon,
31
+ // array. max 2 elements
32
+ hasBorder = false
33
+ } = _ref;
34
+ return /*#__PURE__*/_jsx__default["default"](DSTruncatedTooltipText.TooltipTextProvider, {}, void 0, /*#__PURE__*/_jsx__default["default"](components.CardContainer, {
35
+ hasBorder: hasBorder,
36
+ cols: getCol(rightAddon),
37
+ "data-testid": "em-ds-card"
38
+ }, void 0, /*#__PURE__*/_jsx__default["default"](components.LeftSection, {}, void 0, leftAddon && /*#__PURE__*/_jsx__default["default"](components.LeftAddon, {}, void 0, leftAddon), /*#__PURE__*/_jsx__default["default"](components.MainSection, {
39
+ style: {
40
+ maxWidth: leftAddon ? 'calc(100% - 40px)' : '100%'
41
+ }
42
+ }, void 0, /*#__PURE__*/_jsx__default["default"](dsHeader.DSHeader, {
43
+ fontSize: "16px",
44
+ "data-testid": "em-ds-card-header",
45
+ fontWeight: "regular",
46
+ color: "neutral.800",
47
+ text: /*#__PURE__*/_jsx__default["default"](DSTruncatedTooltipText__default["default"], {
48
+ value: title
49
+ })
50
+ }), description && /*#__PURE__*/_jsx__default["default"](components.Description, {}, void 0, /*#__PURE__*/_jsx__default["default"](DSTruncatedTooltipText__default["default"], {
51
+ value: description
52
+ })))), rightAddon && /*#__PURE__*/_jsx__default["default"](components.RightAddonSection, {}, void 0, rightAddon[0] && /*#__PURE__*/_jsx__default["default"](components.RightAddon, {}, void 0, rightAddon[0]), rightAddon[1] && /*#__PURE__*/jsxRuntime.jsxs(jsxRuntime.Fragment, {
53
+ children: [rightAddon.length > 1 && (_Separator || (_Separator = /*#__PURE__*/_jsx__default["default"](components.Separator, {}))), /*#__PURE__*/_jsx__default["default"](components.RightAddon, {}, void 0, rightAddon[1])]
54
+ }))));
55
+ };
53
56
 
54
57
  const cardProps = {
55
58
  /**
@@ -82,4 +85,4 @@ DSCardCustomWithSchema.propTypes = cardProps;
82
85
 
83
86
  exports.CustomCard = CustomCard;
84
87
  exports.DSCardCustomWithSchema = DSCardCustomWithSchema;
85
- exports['default'] = CustomCard;
88
+ exports["default"] = CustomCard;
package/cjs/v2/Group.js CHANGED
@@ -14,29 +14,35 @@ function _interopDefaultLegacy (e) { return e && typeof e === 'object' && 'defau
14
14
  var _jsx__default = /*#__PURE__*/_interopDefaultLegacy(_jsx);
15
15
  var styled__default = /*#__PURE__*/_interopDefaultLegacy(styled);
16
16
 
17
- const Group = /*#__PURE__*/styled__default['default'].div.withConfig({
17
+ const Group = /*#__PURE__*/styled__default["default"].div.withConfig({
18
18
  componentId: "sc-1y2lfoo-0"
19
- })(["display:flex;flex-direction:column;width:100%;max-width:100%;", "{border-top:none;}", ""], Card.CustomCard, ({
20
- theme,
21
- withTopBorder
22
- }) => withTopBorder ? `border-top: ${theme.colors.neutral['100']}` : '');
23
- const GroupTitle = /*#__PURE__*/styled__default['default'].span.withConfig({
19
+ })(["display:flex;flex-direction:column;width:100%;max-width:100%;", "{border-top:none;}", ""], Card.CustomCard, _ref => {
20
+ let {
21
+ theme,
22
+ withTopBorder
23
+ } = _ref;
24
+ return withTopBorder ? "border-top: ".concat(theme.colors.neutral['100']) : '';
25
+ });
26
+ const GroupTitle = /*#__PURE__*/styled__default["default"].span.withConfig({
24
27
  componentId: "sc-1y2lfoo-1"
25
28
  })(["", ""], dsSystem.truncate());
26
- const TitleWrapper = /*#__PURE__*/styled__default['default'].div.withConfig({
29
+ const TitleWrapper = /*#__PURE__*/styled__default["default"].div.withConfig({
27
30
  componentId: "sc-1y2lfoo-2"
28
31
  })(["display:flex;justify-content:space-between;padding:0 ", ";font-size:12px;", ";font-weight:", ";background-color:", ";border-top:", ";line-height:24px;"], props => props.theme.space.xs, dsSystem.color('neutral', '700'), props => props.theme.fontWeights.semibold, props => props.theme.colors.neutral['080'], props => dsSystem.border(props.theme.colors.neutral['080']));
29
- const Items = /*#__PURE__*/styled__default['default'].div.withConfig({
32
+ const Items = /*#__PURE__*/styled__default["default"].div.withConfig({
30
33
  componentId: "sc-1y2lfoo-3"
31
34
  })(["display:flex;flex-direction:column;"]);
32
35
 
33
- const CardGroup = ({
34
- children,
35
- title,
36
- action
37
- }) => /*#__PURE__*/_jsx__default['default'](Group, {
38
- withTopBorder: !title
39
- }, void 0, !!title && /*#__PURE__*/_jsx__default['default'](TitleWrapper, {}, void 0, /*#__PURE__*/_jsx__default['default'](GroupTitle, {}, void 0, title), action), /*#__PURE__*/_jsx__default['default'](Items, {}, void 0, children));
36
+ const CardGroup = _ref2 => {
37
+ let {
38
+ children,
39
+ title,
40
+ action
41
+ } = _ref2;
42
+ return /*#__PURE__*/_jsx__default["default"](Group, {
43
+ withTopBorder: !title
44
+ }, void 0, !!title && /*#__PURE__*/_jsx__default["default"](TitleWrapper, {}, void 0, /*#__PURE__*/_jsx__default["default"](GroupTitle, {}, void 0, title), action), /*#__PURE__*/_jsx__default["default"](Items, {}, void 0, children));
45
+ };
40
46
 
41
47
  const cardgroupProps = {
42
48
  /**
@@ -59,4 +65,4 @@ DSCardGroupWithSchema.propTypes = cardgroupProps;
59
65
 
60
66
  exports.CardGroup = CardGroup;
61
67
  exports.DSCardGroupWithSchema = DSCardGroupWithSchema;
62
- exports['default'] = CardGroup;
68
+ exports["default"] = CardGroup;
package/cjs/v2/components.js CHANGED
@@ -9,34 +9,37 @@ function _interopDefaultLegacy (e) { return e && typeof e === 'object' && 'defau
9
9
 
10
10
  var styled__default = /*#__PURE__*/_interopDefaultLegacy(styled);
11
11
 
12
- const CardContainer = /*#__PURE__*/styled__default['default'](dsGrid.Grid).withConfig({
12
+ const CardContainer = /*#__PURE__*/styled__default["default"](dsGrid.Grid).withConfig({
13
13
  componentId: "sc-1cjakml-0"
14
- })(["align-items:center;justify-content:space-between;width:100%;height:56px;padding:8px 16px;position:relative;border:", ";&:before{content:'';border-bottom:1px solid ", ";position:absolute;margin:0 auto;width:90%;bottom:0;}&:last-child::before{content:none;}"], ({
15
- theme,
16
- hasBorder
17
- }) => hasBorder ? `1px solid ${theme.colors.neutral['100']}` : '', props => props.theme.colors.neutral['100']);
18
- const LeftSection = /*#__PURE__*/styled__default['default'].div.withConfig({
14
+ })(["align-items:center;justify-content:space-between;width:100%;height:56px;padding:8px 16px;position:relative;border:", ";&:before{content:'';border-bottom:1px solid ", ";position:absolute;margin:0 auto;width:90%;bottom:0;}&:last-child::before{content:none;}"], _ref => {
15
+ let {
16
+ theme,
17
+ hasBorder
18
+ } = _ref;
19
+ return hasBorder ? "1px solid ".concat(theme.colors.neutral['100']) : '';
20
+ }, props => props.theme.colors.neutral['100']);
21
+ const LeftSection = /*#__PURE__*/styled__default["default"].div.withConfig({
19
22
  componentId: "sc-1cjakml-1"
20
23
  })(["display:flex;align-items:center;"]);
21
- const LeftAddon = /*#__PURE__*/styled__default['default'].div.withConfig({
24
+ const LeftAddon = /*#__PURE__*/styled__default["default"].div.withConfig({
22
25
  componentId: "sc-1cjakml-2"
23
26
  })(["height:fit-content;width:fit-content;margin-right:16px;cursor:pointer;"]);
24
- const RightAddonSection = /*#__PURE__*/styled__default['default'].div.withConfig({
27
+ const RightAddonSection = /*#__PURE__*/styled__default["default"].div.withConfig({
25
28
  componentId: "sc-1cjakml-3"
26
29
  })(["display:flex;align-items:center;width:fit-content;"]);
27
- const RightAddon = /*#__PURE__*/styled__default['default'].div.withConfig({
30
+ const RightAddon = /*#__PURE__*/styled__default["default"].div.withConfig({
28
31
  componentId: "sc-1cjakml-4"
29
32
  })(["height:fit-content;width:fit-content;cursor:pointer;"]);
30
- const Separator = /*#__PURE__*/styled__default['default'].div.withConfig({
33
+ const Separator = /*#__PURE__*/styled__default["default"].div.withConfig({
31
34
  componentId: "sc-1cjakml-5"
32
35
  })(["width:0px;height:24px;border-right:1px solid ", ";margin:0 8px;"], props => props.theme.colors.neutral['300']);
33
- const MainSection = /*#__PURE__*/styled__default['default'].div.withConfig({
36
+ const MainSection = /*#__PURE__*/styled__default["default"].div.withConfig({
34
37
  componentId: "sc-1cjakml-6"
35
38
  })(["display:flex;flex-direction:column;"]);
36
- const Title = /*#__PURE__*/styled__default['default'].h3.withConfig({
39
+ const Title = /*#__PURE__*/styled__default["default"].h3.withConfig({
37
40
  componentId: "sc-1cjakml-7"
38
41
  })(["margin:0;font-size:16px;font-weight:", ";color:", ";"], props => props.theme.fontWeights.regular, props => props.theme.colors.neutral['800']);
39
- const Description = /*#__PURE__*/styled__default['default'].p.withConfig({
42
+ const Description = /*#__PURE__*/styled__default["default"].p.withConfig({
40
43
  componentId: "sc-1cjakml-8"
41
44
  })(["margin:0;color:", ";"], props => props.theme.colors.neutral['600']);
42
45
 
package/esm/DSCard.js CHANGED
@@ -1,3 +1,8 @@
1
+ import 'core-js/modules/esnext.async-iterator.filter.js';
2
+ import 'core-js/modules/esnext.iterator.constructor.js';
3
+ import 'core-js/modules/esnext.iterator.filter.js';
4
+ import 'core-js/modules/esnext.async-iterator.for-each.js';
5
+ import 'core-js/modules/esnext.iterator.for-each.js';
1
6
  import _defineProperty from '@babel/runtime/helpers/esm/defineProperty';
2
7
  import _objectWithoutProperties from '@babel/runtime/helpers/esm/objectWithoutProperties';
3
8
  import 'react';
package/esm/DSCardBody.js CHANGED
@@ -2,12 +2,15 @@ import _jsx from '@babel/runtime/helpers/esm/jsx';
2
2
  import 'react';
3
3
  import { PropTypes, describe } from 'react-desc';
4
4
 
5
- const DSCardBody = ({
6
- children
7
- }) => /*#__PURE__*/_jsx("div", {
8
- className: "em-ds-card-body",
9
- "data-testid": "card-body"
10
- }, void 0, children);
5
+ const DSCardBody = _ref => {
6
+ let {
7
+ children
8
+ } = _ref;
9
+ return /*#__PURE__*/_jsx("div", {
10
+ className: "em-ds-card-body",
11
+ "data-testid": "card-body"
12
+ }, void 0, children);
13
+ };
11
14
 
12
15
  const bodyProps = {
13
16
  /** children */