@elliemae/ds-card 3.0.0-next.1 → 3.0.0-next.13

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 (72) hide show
  1. package/dist/cjs/DSCard.js +99 -0
  2. package/dist/cjs/DSCard.js.map +7 -0
  3. package/dist/cjs/DSCardBody.js +49 -0
  4. package/dist/cjs/DSCardBody.js.map +7 -0
  5. package/dist/cjs/DSCardHeader.js +59 -0
  6. package/dist/cjs/DSCardHeader.js.map +7 -0
  7. package/dist/cjs/detail/DetailCard.js +156 -0
  8. package/dist/cjs/detail/DetailCard.js.map +7 -0
  9. package/dist/cjs/detail/styled.js +104 -0
  10. package/dist/cjs/detail/styled.js.map +7 -0
  11. package/dist/cjs/index.js +42 -0
  12. package/dist/cjs/index.js.map +7 -0
  13. package/dist/cjs/v2/ActionAddon.js +73 -0
  14. package/dist/cjs/v2/ActionAddon.js.map +7 -0
  15. package/dist/cjs/v2/Card.js +82 -0
  16. package/dist/cjs/v2/Card.js.map +7 -0
  17. package/dist/cjs/v2/Group.js +81 -0
  18. package/dist/cjs/v2/Group.js.map +7 -0
  19. package/dist/cjs/v2/components.js +104 -0
  20. package/dist/cjs/v2/components.js.map +7 -0
  21. package/dist/esm/DSCard.js +72 -0
  22. package/dist/esm/DSCard.js.map +7 -0
  23. package/dist/esm/DSCardBody.js +20 -0
  24. package/dist/esm/DSCardBody.js.map +7 -0
  25. package/dist/esm/DSCardHeader.js +30 -0
  26. package/dist/esm/DSCardHeader.js.map +7 -0
  27. package/dist/esm/detail/DetailCard.js +127 -0
  28. package/dist/esm/detail/DetailCard.js.map +7 -0
  29. package/dist/esm/detail/styled.js +75 -0
  30. package/dist/esm/detail/styled.js.map +7 -0
  31. package/dist/esm/index.js +13 -0
  32. package/dist/esm/index.js.map +7 -0
  33. package/dist/esm/v2/ActionAddon.js +44 -0
  34. package/dist/esm/v2/ActionAddon.js.map +7 -0
  35. package/dist/esm/v2/Card.js +64 -0
  36. package/dist/esm/v2/Card.js.map +7 -0
  37. package/dist/esm/v2/Group.js +52 -0
  38. package/dist/esm/v2/Group.js.map +7 -0
  39. package/dist/esm/v2/components.js +75 -0
  40. package/dist/esm/v2/components.js.map +7 -0
  41. package/package.json +52 -43
  42. package/cjs/DSCard.js +0 -72
  43. package/cjs/DSCardBody.js +0 -32
  44. package/cjs/DSCardHeader.js +0 -46
  45. package/cjs/detail/DetailCard.js +0 -200
  46. package/cjs/detail/styled.js +0 -61
  47. package/cjs/index.js +0 -29
  48. package/cjs/v2/ActionAddon.js +0 -58
  49. package/cjs/v2/Card.js +0 -88
  50. package/cjs/v2/Group.js +0 -68
  51. package/cjs/v2/components.js +0 -54
  52. package/esm/DSCard.js +0 -61
  53. package/esm/DSCardBody.js +0 -22
  54. package/esm/DSCardHeader.js +0 -36
  55. package/esm/detail/DetailCard.js +0 -188
  56. package/esm/detail/styled.js +0 -46
  57. package/esm/index.js +0 -7
  58. package/esm/v2/ActionAddon.js +0 -46
  59. package/esm/v2/Card.js +0 -77
  60. package/esm/v2/Group.js +0 -57
  61. package/esm/v2/components.js +0 -38
  62. package/types/DSCard.d.ts +0 -49
  63. package/types/DSCardBody.d.ts +0 -25
  64. package/types/DSCardHeader.d.ts +0 -34
  65. package/types/detail/DetailCard.d.ts +0 -176
  66. package/types/detail/styled.d.ts +0 -9
  67. package/types/index.d.ts +0 -8
  68. package/types/tests/DSCard.test.d.ts +0 -1
  69. package/types/v2/ActionAddon.d.ts +0 -49
  70. package/types/v2/Card.d.ts +0 -66
  71. package/types/v2/Group.d.ts +0 -39
  72. package/types/v2/components.d.ts +0 -11
package/cjs/v2/Card.js DELETED
@@ -1,88 +0,0 @@
1
- 'use strict';
2
-
3
- Object.defineProperty(exports, '__esModule', { value: true });
4
-
5
- var _jsx = require('@babel/runtime/helpers/jsx');
6
- require('react');
7
- var reactDesc = require('react-desc');
8
- var dsHeader = require('@elliemae/ds-header');
9
- var DSTruncatedTooltipText = require('@elliemae/ds-truncated-tooltip-text');
10
- var components = require('./components.js');
11
- var jsxRuntime = require('react/jsx-runtime');
12
-
13
- function _interopDefaultLegacy (e) { return e && typeof e === 'object' && 'default' in e ? e : { 'default': e }; }
14
-
15
- var _jsx__default = /*#__PURE__*/_interopDefaultLegacy(_jsx);
16
- var DSTruncatedTooltipText__default = /*#__PURE__*/_interopDefaultLegacy(DSTruncatedTooltipText);
17
-
18
- var _Separator;
19
-
20
- const getCol = rightAddon => {
21
- if (!rightAddon) return [1];
22
- return [1, 'auto'];
23
- };
24
-
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
- };
56
-
57
- const cardProps = {
58
- /**
59
- * Title of the card. requiered
60
- */
61
- title: reactDesc.PropTypes.string.isRequired.description('Title of the card. requiered'),
62
-
63
- /**
64
- * Description of the card. not requiered
65
- */
66
- description: reactDesc.PropTypes.string.description('Description of the card. not requiered'),
67
-
68
- /**
69
- * Left Addon
70
- */
71
- leftAddon: reactDesc.PropTypes.element.description('Left Addon'),
72
-
73
- /**
74
- * Right addon array, max elements: 2
75
- */
76
- rightAddon: reactDesc.PropTypes.array.description('Right addon array, max elements: 2'),
77
-
78
- /**
79
- * Wheter if the card has border or not
80
- */
81
- hasBorder: reactDesc.PropTypes.bool.description('Wheter if the card has border or not')
82
- };
83
- const DSCardCustomWithSchema = reactDesc.describe(CustomCard);
84
- DSCardCustomWithSchema.propTypes = cardProps;
85
-
86
- exports.CustomCard = CustomCard;
87
- exports.DSCardCustomWithSchema = DSCardCustomWithSchema;
88
- exports["default"] = CustomCard;
package/cjs/v2/Group.js DELETED
@@ -1,68 +0,0 @@
1
- 'use strict';
2
-
3
- Object.defineProperty(exports, '__esModule', { value: true });
4
-
5
- var _jsx = require('@babel/runtime/helpers/jsx');
6
- require('react');
7
- var reactDesc = require('react-desc');
8
- var styled = require('styled-components');
9
- var dsSystem = require('@elliemae/ds-system');
10
- var Card = require('./Card.js');
11
-
12
- function _interopDefaultLegacy (e) { return e && typeof e === 'object' && 'default' in e ? e : { 'default': e }; }
13
-
14
- var _jsx__default = /*#__PURE__*/_interopDefaultLegacy(_jsx);
15
- var styled__default = /*#__PURE__*/_interopDefaultLegacy(styled);
16
-
17
- const Group = /*#__PURE__*/styled__default["default"].div.withConfig({
18
- componentId: "sc-1y2lfoo-0"
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({
27
- componentId: "sc-1y2lfoo-1"
28
- })(["", ""], dsSystem.truncate());
29
- const TitleWrapper = /*#__PURE__*/styled__default["default"].div.withConfig({
30
- componentId: "sc-1y2lfoo-2"
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']));
32
- const Items = /*#__PURE__*/styled__default["default"].div.withConfig({
33
- componentId: "sc-1y2lfoo-3"
34
- })(["display:flex;flex-direction:column;"]);
35
-
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
- };
46
-
47
- const cardgroupProps = {
48
- /**
49
- * Card items
50
- */
51
- children: reactDesc.PropTypes.element.isRequired.description('Card items'),
52
-
53
- /**
54
- * Title of the group
55
- */
56
- title: reactDesc.PropTypes.string.isRequired.description('Title of the group'),
57
-
58
- /**
59
- * Right addon action
60
- */
61
- action: reactDesc.PropTypes.element.description('Right addon action')
62
- };
63
- const DSCardGroupWithSchema = reactDesc.describe(CardGroup);
64
- DSCardGroupWithSchema.propTypes = cardgroupProps;
65
-
66
- exports.CardGroup = CardGroup;
67
- exports.DSCardGroupWithSchema = DSCardGroupWithSchema;
68
- exports["default"] = CardGroup;
@@ -1,54 +0,0 @@
1
- 'use strict';
2
-
3
- Object.defineProperty(exports, '__esModule', { value: true });
4
-
5
- var styled = require('styled-components');
6
- var dsGrid = require('@elliemae/ds-grid');
7
-
8
- function _interopDefaultLegacy (e) { return e && typeof e === 'object' && 'default' in e ? e : { 'default': e }; }
9
-
10
- var styled__default = /*#__PURE__*/_interopDefaultLegacy(styled);
11
-
12
- const CardContainer = /*#__PURE__*/styled__default["default"](dsGrid.Grid).withConfig({
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;}"], _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({
22
- componentId: "sc-1cjakml-1"
23
- })(["display:flex;align-items:center;"]);
24
- const LeftAddon = /*#__PURE__*/styled__default["default"].div.withConfig({
25
- componentId: "sc-1cjakml-2"
26
- })(["height:fit-content;width:fit-content;margin-right:16px;cursor:pointer;"]);
27
- const RightAddonSection = /*#__PURE__*/styled__default["default"].div.withConfig({
28
- componentId: "sc-1cjakml-3"
29
- })(["display:flex;align-items:center;width:fit-content;"]);
30
- const RightAddon = /*#__PURE__*/styled__default["default"].div.withConfig({
31
- componentId: "sc-1cjakml-4"
32
- })(["height:fit-content;width:fit-content;cursor:pointer;"]);
33
- const Separator = /*#__PURE__*/styled__default["default"].div.withConfig({
34
- componentId: "sc-1cjakml-5"
35
- })(["width:0px;height:24px;border-right:1px solid ", ";margin:0 8px;"], props => props.theme.colors.neutral['300']);
36
- const MainSection = /*#__PURE__*/styled__default["default"].div.withConfig({
37
- componentId: "sc-1cjakml-6"
38
- })(["display:flex;flex-direction:column;"]);
39
- const Title = /*#__PURE__*/styled__default["default"].h3.withConfig({
40
- componentId: "sc-1cjakml-7"
41
- })(["margin:0;font-size:16px;font-weight:", ";color:", ";"], props => props.theme.fontWeights.regular, props => props.theme.colors.neutral['800']);
42
- const Description = /*#__PURE__*/styled__default["default"].p.withConfig({
43
- componentId: "sc-1cjakml-8"
44
- })(["margin:0;color:", ";"], props => props.theme.colors.neutral['600']);
45
-
46
- exports.CardContainer = CardContainer;
47
- exports.Description = Description;
48
- exports.LeftAddon = LeftAddon;
49
- exports.LeftSection = LeftSection;
50
- exports.MainSection = MainSection;
51
- exports.RightAddon = RightAddon;
52
- exports.RightAddonSection = RightAddonSection;
53
- exports.Separator = Separator;
54
- exports.Title = Title;
package/esm/DSCard.js DELETED
@@ -1,61 +0,0 @@
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';
6
- import _defineProperty from '@babel/runtime/helpers/esm/defineProperty';
7
- import _objectWithoutProperties from '@babel/runtime/helpers/esm/objectWithoutProperties';
8
- import 'react';
9
- import { PropTypes, describe } from 'react-desc';
10
- import { convertPropToCssClassName } from '@elliemae/ds-classnames';
11
- import { DSCardBody } from './DSCardBody.js';
12
- import { DSCardHeader } from './DSCardHeader.js';
13
- import { jsx } from 'react/jsx-runtime';
14
-
15
- const _excluded = ["innerRef", "children", "containerProps"];
16
-
17
- function ownKeys(object, enumerableOnly) { var keys = Object.keys(object); if (Object.getOwnPropertySymbols) { var symbols = Object.getOwnPropertySymbols(object); enumerableOnly && (symbols = symbols.filter(function (sym) { return Object.getOwnPropertyDescriptor(object, sym).enumerable; })), keys.push.apply(keys, symbols); } return keys; }
18
-
19
- function _objectSpread(target) { for (var i = 1; i < arguments.length; i++) { var source = null != arguments[i] ? arguments[i] : {}; i % 2 ? ownKeys(Object(source), !0).forEach(function (key) { _defineProperty(target, key, source[key]); }) : Object.getOwnPropertyDescriptors ? Object.defineProperties(target, Object.getOwnPropertyDescriptors(source)) : ownKeys(Object(source)).forEach(function (key) { Object.defineProperty(target, key, Object.getOwnPropertyDescriptor(source, key)); }); } return target; }
20
-
21
- const DSCard = _ref => {
22
- let {
23
- innerRef = undefined,
24
- children = null,
25
- containerProps = {}
26
- } = _ref,
27
- otherProps = _objectWithoutProperties(_ref, _excluded);
28
-
29
- const {
30
- cssClassName
31
- } = convertPropToCssClassName('card');
32
- return /*#__PURE__*/jsx("div", _objectSpread(_objectSpread(_objectSpread({
33
- "data-testid": "card"
34
- }, containerProps), {}, {
35
- ref: innerRef,
36
- className: cssClassName
37
- }, otherProps), {}, {
38
- children: children
39
- }));
40
- };
41
-
42
- const cardProps = {
43
- /** inject props to component wrapper */
44
- containerProps: PropTypes.object.description('inject props to component wrapper'),
45
-
46
- /**
47
- * Get reference for the button
48
- */
49
- innerRef: PropTypes.string.description('Get reference for the button'),
50
-
51
- /**
52
- * DSCardBody and DSCardHeader
53
- */
54
- children: PropTypes.arrayOf(PropTypes.shape({
55
- type: PropTypes.oneOf([DSCardHeader, DSCardBody])
56
- })).description('DSCardBody and DSCardHeader')
57
- };
58
- const DSCardWithSchema = describe(DSCard);
59
- DSCardWithSchema.propTypes = cardProps;
60
-
61
- export { DSCard, DSCardWithSchema, DSCard as default };
package/esm/DSCardBody.js DELETED
@@ -1,22 +0,0 @@
1
- import _jsx from '@babel/runtime/helpers/esm/jsx';
2
- import 'react';
3
- import { PropTypes, describe } from 'react-desc';
4
-
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
- };
14
-
15
- const bodyProps = {
16
- /** children */
17
- children: PropTypes.element.description('children')
18
- };
19
- const DSCardBodyWithSchema = describe(DSCardBody);
20
- DSCardBodyWithSchema.propTypes = bodyProps;
21
-
22
- export { DSCardBody, DSCardBodyWithSchema, DSCardBody as default };
@@ -1,36 +0,0 @@
1
- import _jsx from '@babel/runtime/helpers/esm/jsx';
2
- import 'react';
3
- import { PropTypes, describe } from 'react-desc';
4
- import { convertPropToCssClassName } from '@elliemae/ds-classnames';
5
-
6
- const DSCardHeader = _ref => {
7
- let {
8
- title,
9
- action
10
- } = _ref;
11
- const {
12
- cssClassName,
13
- classNameElement
14
- } = convertPropToCssClassName('card-header');
15
- return /*#__PURE__*/_jsx("div", {
16
- className: cssClassName,
17
- "data-testid": "card-header"
18
- }, void 0, /*#__PURE__*/_jsx("span", {
19
- className: classNameElement('heading')
20
- }, void 0, title), /*#__PURE__*/_jsx("div", {
21
- className: classNameElement('pull-right'),
22
- "data-testid": "ds-card_header-action"
23
- }, void 0, action));
24
- };
25
-
26
- const cardHeader = {
27
- /** card header title */
28
- title: PropTypes.string.description('card header title'),
29
-
30
- /** action */
31
- action: PropTypes.node.description('action')
32
- };
33
- const DSCardHeaderWithSchema = describe(DSCardHeader);
34
- DSCardHeaderWithSchema.propTypes = cardHeader;
35
-
36
- export { DSCardHeader, DSCardHeaderWithSchema, DSCardHeader as default };
@@ -1,188 +0,0 @@
1
- import _jsx from '@babel/runtime/helpers/esm/jsx';
2
- import 'react';
3
- import { compact, noop } from 'lodash';
4
- import { PropTypes, describe } from 'react-desc';
5
- import { ArrowheadDown, ArrowheadRight } from '@elliemae/ds-icons';
6
- import { useTheme } from '@elliemae/ds-system';
7
- import DSButton from '@elliemae/ds-button';
8
- import DSSeparator from '@elliemae/ds-separator';
9
- import { Grid } from '@elliemae/ds-grid';
10
- import { DSCheckbox } from '@elliemae/ds-form';
11
- import { Container, Title, Description, RightDescription, RightValue, RightAddon } from './styled.js';
12
- import { jsx, Fragment } from 'react/jsx-runtime';
13
-
14
- var _Grid, _DSSeparator;
15
-
16
- const DetailCard = _ref => {
17
- let {
18
- title,
19
- description,
20
- descriptionColor = 'neutral',
21
- rightValue,
22
- rightDescription,
23
- rightAddon,
24
- // select props
25
- selectable = false,
26
- isSelected = false,
27
- onSelect = noop,
28
- // expand props
29
- expandable = false,
30
- isExpanded = false,
31
- onExpand = noop,
32
- expandContent,
33
- // state props
34
- readOnly = false,
35
- disabled = false
36
- } = _ref;
37
- const theme = useTheme();
38
- const hasRightLegend = rightValue && rightDescription;
39
- const hasRightPosition = hasRightLegend || rightAddon;
40
- const topWrapperCols = ['1fr'];
41
- if (hasRightPosition) topWrapperCols.push('auto');
42
- if (expandable) topWrapperCols.unshift('20px');
43
- if (selectable) topWrapperCols.unshift(theme.space.s);
44
- return /*#__PURE__*/jsx(Fragment, {
45
- children: /*#__PURE__*/_jsx(Container, {
46
- disabled: disabled || readOnly,
47
- active: selectable && isSelected,
48
- "data-testid": "card-detail-container"
49
- }, void 0, /*#__PURE__*/_jsx(Grid, {
50
- cols: topWrapperCols,
51
- alignItems: !description && 'center'
52
- }, void 0, selectable && /*#__PURE__*/_jsx(Grid, {
53
- pt: description && '9px'
54
- }, void 0, /*#__PURE__*/_jsx(DSCheckbox, {
55
- checked: isSelected,
56
- onChange: onSelect,
57
- readOnly: readOnly,
58
- disabled: disabled,
59
- "data-testid": "card-checkbox"
60
- })), expandable && /*#__PURE__*/_jsx(Grid, {
61
- height: "16px",
62
- pt: description && 'xxs',
63
- mt: !description && '-5px'
64
- }, void 0, /*#__PURE__*/_jsx(DSButton, {
65
- size: "s",
66
- buttonType: "text",
67
- containerProps: {
68
- 'data-testid': 'expand-button'
69
- },
70
- onClick: onExpand,
71
- icon: isExpanded ? /*#__PURE__*/_jsx(ArrowheadDown, {
72
- color: ['neutral', 500],
73
- size: "s"
74
- }) : /*#__PURE__*/_jsx(ArrowheadRight, {
75
- color: ['neutral', 500],
76
- size: "s"
77
- }),
78
- disabled: disabled
79
- })), /*#__PURE__*/_jsx(Grid, {
80
- pr: "24px"
81
- }, void 0, /*#__PURE__*/_jsx(Title, {}, void 0, title), description && /*#__PURE__*/_jsx(Description, {
82
- descriptionColor: descriptionColor
83
- }, void 0, description)), hasRightPosition && /*#__PURE__*/_jsx(Grid, {
84
- cols: compact([hasRightPosition && 'auto', rightAddon && 'auto'])
85
- }, void 0, hasRightLegend && /*#__PURE__*/_jsx(Grid, {
86
- pr: "24px",
87
- rows: ['auto', 'auto', 1]
88
- }, void 0, /*#__PURE__*/_jsx(RightDescription, {
89
- justifyContent: "flex-end"
90
- }, void 0, rightDescription), /*#__PURE__*/_jsx(RightValue, {
91
- justifyContent: "flex-end"
92
- }, void 0, rightValue), _Grid || (_Grid = /*#__PURE__*/_jsx(Grid, {}))), rightAddon && /*#__PURE__*/_jsx(RightAddon, {
93
- cols: ['auto', 'auto'],
94
- gutter: "2px"
95
- }, void 0, rightAddon))), expandContent && isExpanded && /*#__PURE__*/_jsx(Grid, {
96
- ml: selectable && 's',
97
- mr: rightAddon && 'xs'
98
- }, void 0, _DSSeparator || (_DSSeparator = /*#__PURE__*/_jsx(DSSeparator, {
99
- dashed: true,
100
- position: "initial",
101
- margin: "none"
102
- })), /*#__PURE__*/_jsx(Grid, {
103
- pt: "xxs",
104
- "data-testid": "detail-card-expanded-content"
105
- }, void 0, expandContent)))
106
- });
107
- };
108
-
109
- const detailProps = {
110
- /**
111
- * Title of the card.
112
- */
113
- title: PropTypes.string.isRequired.description('Title of the card.'),
114
-
115
- /**
116
- * Description of the card.
117
- */
118
- description: PropTypes.string.description('Description of the card.'),
119
-
120
- /**
121
- * Description color.
122
- */
123
- descriptionColor: PropTypes.oneOf(['primary', 'neutral']).description('Description color.'),
124
-
125
- /**
126
- * Right value (should be used with `rightDescription`)
127
- */
128
- rightValue: PropTypes.string.description('Right value (should be used with `rightDescription`)'),
129
-
130
- /**
131
- * Right description (should be used with `rightValue`)
132
- */
133
- rightDescription: PropTypes.string.description('Right description (should be used with `rightValue`)'),
134
-
135
- /**
136
- * Right addon array, max elements: 2
137
- */
138
- rightAddon: PropTypes.element.description('Right addon array, max elements: 2'),
139
-
140
- /**
141
- * Whether if the card is selectable or not
142
- */
143
- selectable: PropTypes.bool.description('Whether if the card is selectable or not'),
144
-
145
- /**
146
- * Whether if the card is selected or not
147
- */
148
- isSelected: PropTypes.bool.description('Whether if the card is selected or not'),
149
-
150
- /**
151
- * Callback on selection
152
- */
153
- onSelect: PropTypes.func.description('Callback on selection'),
154
-
155
- /**
156
- * Whether if the card is expandable or not
157
- */
158
- expandable: PropTypes.bool.description('Whether if the card is expandable or not'),
159
-
160
- /**
161
- * Whether if the card is expanded or not
162
- */
163
- isExpanded: PropTypes.bool.description('Whether if the card is expanded or not'),
164
-
165
- /**
166
- * Callback on expand
167
- */
168
- onExpand: PropTypes.func.description('Callback on expand'),
169
-
170
- /**
171
- * Content
172
- */
173
- expandContent: PropTypes.element.description('Content'),
174
-
175
- /**
176
- * Read only
177
- */
178
- readOnly: PropTypes.bool.description('Read only'),
179
-
180
- /**
181
- * Disabled
182
- */
183
- disabled: PropTypes.bool.description('Disabled')
184
- };
185
- const DSCardDetailWithSchema = describe(DetailCard);
186
- DSCardDetailWithSchema.propTypes = detailProps;
187
-
188
- export { DSCardDetailWithSchema, DetailCard, DetailCard as default };
@@ -1,46 +0,0 @@
1
- import styled from 'styled-components';
2
- import { Grid } from '@elliemae/ds-grid';
3
-
4
- const Separator = /*#__PURE__*/styled.div.withConfig({
5
- componentId: "sc-nx8lwv-0"
6
- })(["width:100%;height:24px;border-right:1px solid ", ";margin:0 8px;"], props => props.theme.colors.neutral['300']);
7
- const Title = /*#__PURE__*/styled.h3.withConfig({
8
- componentId: "sc-nx8lwv-1"
9
- })(["margin:0;font-size:16px;min-height:20px;font-weight:", ";color:", ";"], props => props.theme.fontWeights.semibold, props => props.theme.colors.neutral['700']);
10
- const Description = /*#__PURE__*/styled.p.withConfig({
11
- componentId: "sc-nx8lwv-2"
12
- })(["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']);
13
- const RightAddon = /*#__PURE__*/styled(Grid).withConfig({
14
- componentId: "sc-nx8lwv-3"
15
- })(["margin:0;white-space:nowrap;"]);
16
- const RightDescription = /*#__PURE__*/styled(Grid).withConfig({
17
- componentId: "sc-nx8lwv-4"
18
- })(["margin:0;white-space:nowrap;font-size:12px;color:", ";"], props => props.theme.colors.neutral['600']);
19
- const RightValue = /*#__PURE__*/styled(Grid).withConfig({
20
- componentId: "sc-nx8lwv-5"
21
- })(["margin:0;white-space:nowrap;font-size:14px;color:", ";"], props => props.theme.colors.neutral['800']);
22
- const ExpandContent = /*#__PURE__*/styled.div.withConfig({
23
- componentId: "sc-nx8lwv-6"
24
- })(["font-size:12px;"]);
25
-
26
- const border = _ref => {
27
- let {
28
- active,
29
- theme
30
- } = _ref;
31
- return active ? theme.colors.brand['600'] : theme.colors.neutral['200'];
32
- };
33
-
34
- const background = _ref2 => {
35
- let {
36
- active,
37
- theme
38
- } = _ref2;
39
- return active ? theme.colors.brand['100'] : theme.colors.neutral['000'];
40
- };
41
-
42
- const Container = /*#__PURE__*/styled(Grid).withConfig({
43
- componentId: "sc-nx8lwv-7"
44
- })(["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 ") : '');
45
-
46
- export { Container, Description, ExpandContent, RightAddon, RightDescription, RightValue, Separator, Title };
package/esm/index.js DELETED
@@ -1,7 +0,0 @@
1
- export { DSCard, DSCardWithSchema, DSCard as default } from './DSCard.js';
2
- export { DSCardHeader, DSCardHeaderWithSchema } from './DSCardHeader.js';
3
- export { DSCardBody, DSCardBodyWithSchema } from './DSCardBody.js';
4
- export { CustomCard, DSCardCustomWithSchema } from './v2/Card.js';
5
- export { CardGroup, DSCardGroupWithSchema } from './v2/Group.js';
6
- export { ActionAddon, DSCardActionAddonWithSchema } from './v2/ActionAddon.js';
7
- export { DSCardDetailWithSchema, DetailCard } from './detail/DetailCard.js';
@@ -1,46 +0,0 @@
1
- import _jsx from '@babel/runtime/helpers/esm/jsx';
2
- import 'react';
3
- import { PropTypes, describe } from 'react-desc';
4
- import styled from 'styled-components';
5
- import { ChevronSmallDown } from '@elliemae/ds-icons';
6
- import DSButton from '@elliemae/ds-button';
7
-
8
- const Addon = /*#__PURE__*/styled(DSButton).withConfig({
9
- componentId: "sc-1pazs35-0"
10
- })(["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']);
11
-
12
- const ActionAddon = _ref => {
13
- let {
14
- label,
15
- onClick,
16
- icon
17
- } = _ref;
18
- return /*#__PURE__*/_jsx(Addon, {
19
- onClick: onClick,
20
- labelText: label,
21
- icon: icon || /*#__PURE__*/_jsx(ChevronSmallDown, {
22
- color: ['brand-primary', 700]
23
- })
24
- });
25
- };
26
-
27
- const actionProps = {
28
- /**
29
- * Addon label
30
- */
31
- label: PropTypes.string.description('Addon label'),
32
-
33
- /**
34
- * On click callback
35
- */
36
- onClick: PropTypes.func.description('On click callback'),
37
-
38
- /**
39
- * Icon to display after the label
40
- */
41
- icon: PropTypes.element.description('Icon to display after the label')
42
- };
43
- const DSCardActionAddonWithSchema = describe(ActionAddon);
44
- DSCardActionAddonWithSchema.propTypes = actionProps;
45
-
46
- export { ActionAddon, DSCardActionAddonWithSchema, ActionAddon as default };