@synerise/ds-information-card 1.1.8 → 1.2.1
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/CHANGELOG.md +19 -0
- package/dist/InformationCard.js +6 -2
- package/dist/InformationCard.styles.d.ts +1 -3
- package/dist/InformationCard.styles.js +25 -25
- package/dist/InformationCardDescription/InformationCardDescription.js +0 -6
- package/dist/InformationCardSummary/InformationCardSummary.js +3 -7
- package/package.json +17 -17
package/CHANGELOG.md
CHANGED
|
@@ -3,6 +3,25 @@
|
|
|
3
3
|
All notable changes to this project will be documented in this file.
|
|
4
4
|
See [Conventional Commits](https://conventionalcommits.org) for commit guidelines.
|
|
5
5
|
|
|
6
|
+
## [1.2.1](https://github.com/Synerise/synerise-design/compare/@synerise/ds-information-card@1.2.0...@synerise/ds-information-card@1.2.1) (2025-10-16)
|
|
7
|
+
|
|
8
|
+
**Note:** Version bump only for package @synerise/ds-information-card
|
|
9
|
+
|
|
10
|
+
|
|
11
|
+
|
|
12
|
+
|
|
13
|
+
|
|
14
|
+
# [1.2.0](https://github.com/Synerise/synerise-design/compare/@synerise/ds-information-card@1.1.8...@synerise/ds-information-card@1.2.0) (2025-10-10)
|
|
15
|
+
|
|
16
|
+
|
|
17
|
+
### Features
|
|
18
|
+
|
|
19
|
+
* **list-item:** submenu and header ([71fa4bf](https://github.com/Synerise/synerise-design/commit/71fa4bfadd5fdb52d61dfe8fe87a9e47567e5d16))
|
|
20
|
+
|
|
21
|
+
|
|
22
|
+
|
|
23
|
+
|
|
24
|
+
|
|
6
25
|
## [1.1.8](https://github.com/Synerise/synerise-design/compare/@synerise/ds-information-card@1.1.7...@synerise/ds-information-card@1.1.8) (2025-10-08)
|
|
7
26
|
|
|
8
27
|
**Note:** Version bump only for package @synerise/ds-information-card
|
package/dist/InformationCard.js
CHANGED
|
@@ -70,6 +70,7 @@ var InformationCard = /*#__PURE__*/forwardRef(function (_ref, ref) {
|
|
|
70
70
|
setIsActionsMenuVisible(false);
|
|
71
71
|
}
|
|
72
72
|
});
|
|
73
|
+
var showBottomDivider = !!(summaryItems && (propertyListItems || descriptionConfig || notice || renderAdditionalDescription));
|
|
73
74
|
return /*#__PURE__*/React.createElement(S.InfoCardWrapper, _extends({
|
|
74
75
|
"data-testid": "information-card",
|
|
75
76
|
"data-popup-container": true,
|
|
@@ -103,11 +104,14 @@ var InformationCard = /*#__PURE__*/forwardRef(function (_ref, ref) {
|
|
|
103
104
|
withoutPadding: true,
|
|
104
105
|
lively: false,
|
|
105
106
|
withHeader: true
|
|
106
|
-
}, (descriptionConfig
|
|
107
|
-
extraInformation: notice
|
|
107
|
+
}, (!!descriptionConfig || notice) && /*#__PURE__*/React.createElement(InformationCardDescription, {
|
|
108
|
+
extraInformation: notice,
|
|
108
109
|
descriptionConfig: descriptionConfig
|
|
109
110
|
}), renderAdditionalDescription && renderAdditionalDescription(), propertyListItems && /*#__PURE__*/React.createElement(InformationCardPropertyList, {
|
|
110
111
|
items: propertyListItems
|
|
112
|
+
}), showBottomDivider && /*#__PURE__*/React.createElement(S.BottomDivider, {
|
|
113
|
+
dashed: true,
|
|
114
|
+
marginBottom: 8
|
|
111
115
|
}), summaryItems && /*#__PURE__*/React.createElement(InformationCardSummary, {
|
|
112
116
|
items: summaryItems
|
|
113
117
|
}), renderFooter && renderFooter() || hasFooter && /*#__PURE__*/React.createElement(InformationCardFooter, {
|
|
@@ -1,6 +1,7 @@
|
|
|
1
1
|
export declare const Flex: import("styled-components").StyledComponent<"div", any, {}, never>;
|
|
2
2
|
export declare const Copyable: import("styled-components").StyledComponent<({ copyValue, texts, className, onMouseEnter, onMouseLeave, }: import("@synerise/ds-description/dist/Row/Copy.types").CopyProps) => React.JSX.Element, any, {}, never>;
|
|
3
3
|
export declare const Divider: import("styled-components").StyledComponent<(props: import("@synerise/ds-divider").DividerProps) => React.JSX.Element, any, {}, never>;
|
|
4
|
+
export declare const BottomDivider: import("styled-components").StyledComponent<(props: import("@synerise/ds-divider").DividerProps) => React.JSX.Element, any, {}, never>;
|
|
4
5
|
export declare const FooterWrapper: import("styled-components").StyledComponent<"div", any, {}, never>;
|
|
5
6
|
export declare const ActionsMenuItems: import("styled-components").StyledComponent<"div", any, {}, never>;
|
|
6
7
|
export declare const FlexGrow: import("styled-components").StyledComponent<"div", any, {
|
|
@@ -30,9 +31,6 @@ export declare const HidePopoverArrowWrapper: import("styled-components").Styled
|
|
|
30
31
|
*/
|
|
31
32
|
export declare const GlobalCSSHidePopoverArrow: import("styled-components").GlobalStyleComponent<{}, import("styled-components").DefaultTheme>;
|
|
32
33
|
export declare const ExtraInfo: import("styled-components").StyledComponent<"div", any, {}, never>;
|
|
33
|
-
export declare const TooltipComponentClassName: import("styled-components").StyledComponent<"div", any, {
|
|
34
|
-
tooltipType: import("@synerise/ds-tooltip").TooltipTypes;
|
|
35
|
-
}, never>;
|
|
36
34
|
export declare const InformationCardActionsWrapper: import("styled-components").StyledComponent<"div", any, {}, never>;
|
|
37
35
|
export declare const InformationCardPropertyListWrapper: import("styled-components").StyledComponent<"div", any, {}, never>;
|
|
38
36
|
export declare const InformationCardPropertyItem: import("styled-components").StyledComponent<"div", any, {}, never>;
|
|
@@ -2,7 +2,6 @@ import styled, { createGlobalStyle, css } from 'styled-components';
|
|
|
2
2
|
import { CardStyles } from '@synerise/ds-card';
|
|
3
3
|
import { DescriptionCopyable } from '@synerise/ds-description';
|
|
4
4
|
import DSDivider from '@synerise/ds-divider';
|
|
5
|
-
import * as S from '@synerise/ds-tooltip/dist/Tooltip.styles';
|
|
6
5
|
import { macro } from '@synerise/ds-typography';
|
|
7
6
|
var INFOCARD_WIDTH = 350;
|
|
8
7
|
export var Flex = styled.div.withConfig({
|
|
@@ -16,12 +15,14 @@ export var Copyable = styled(DescriptionCopyable).withConfig({
|
|
|
16
15
|
export var Divider = styled(DSDivider).withConfig({
|
|
17
16
|
displayName: "InformationCardstyles__Divider",
|
|
18
17
|
componentId: "sc-zxu5qa-2"
|
|
19
|
-
})(["&&{
|
|
20
|
-
|
|
21
|
-
|
|
18
|
+
})(["&&{margin:8px 0;width:100%;}"]);
|
|
19
|
+
export var BottomDivider = styled(DSDivider).withConfig({
|
|
20
|
+
displayName: "InformationCardstyles__BottomDivider",
|
|
21
|
+
componentId: "sc-zxu5qa-3"
|
|
22
|
+
})(["&&{margin-left:16px;margin-right:16px;}"]);
|
|
22
23
|
export var FooterWrapper = styled(Flex).withConfig({
|
|
23
24
|
displayName: "InformationCardstyles__FooterWrapper",
|
|
24
|
-
componentId: "sc-zxu5qa-
|
|
25
|
+
componentId: "sc-zxu5qa-4"
|
|
25
26
|
})(["background:", ";border-top:solid 1px ", ";padding:8px;"], function (props) {
|
|
26
27
|
return props.theme.palette['grey-050'];
|
|
27
28
|
}, function (props) {
|
|
@@ -29,11 +30,11 @@ export var FooterWrapper = styled(Flex).withConfig({
|
|
|
29
30
|
});
|
|
30
31
|
export var ActionsMenuItems = styled.div.withConfig({
|
|
31
32
|
displayName: "InformationCardstyles__ActionsMenuItems",
|
|
32
|
-
componentId: "sc-zxu5qa-
|
|
33
|
+
componentId: "sc-zxu5qa-5"
|
|
33
34
|
})([""]);
|
|
34
35
|
export var FlexGrow = styled.div.withConfig({
|
|
35
36
|
displayName: "InformationCardstyles__FlexGrow",
|
|
36
|
-
componentId: "sc-zxu5qa-
|
|
37
|
+
componentId: "sc-zxu5qa-6"
|
|
37
38
|
})(["flex-grow:", ";"], function (_ref) {
|
|
38
39
|
var _ref$grow = _ref.grow,
|
|
39
40
|
grow = _ref$grow === void 0 ? 1 : _ref$grow;
|
|
@@ -41,22 +42,22 @@ export var FlexGrow = styled.div.withConfig({
|
|
|
41
42
|
});
|
|
42
43
|
export var ActionButtonContainer = styled.div.withConfig({
|
|
43
44
|
displayName: "InformationCardstyles__ActionButtonContainer",
|
|
44
|
-
componentId: "sc-zxu5qa-
|
|
45
|
+
componentId: "sc-zxu5qa-7"
|
|
45
46
|
})([""]);
|
|
46
47
|
export var InfoCardSlidesWrapper = styled.div.withConfig({
|
|
47
48
|
displayName: "InformationCardstyles__InfoCardSlidesWrapper",
|
|
48
|
-
componentId: "sc-zxu5qa-
|
|
49
|
+
componentId: "sc-zxu5qa-8"
|
|
49
50
|
})([""]);
|
|
50
51
|
export var InfoCardSlide = styled.div.withConfig({
|
|
51
52
|
displayName: "InformationCardstyles__InfoCardSlide",
|
|
52
|
-
componentId: "sc-zxu5qa-
|
|
53
|
+
componentId: "sc-zxu5qa-9"
|
|
53
54
|
})(["", ""], function (props) {
|
|
54
55
|
return props.height && "max-height: " + props.height + "px;";
|
|
55
56
|
});
|
|
56
57
|
export var InfoCardWrapper = styled.div.withConfig({
|
|
57
58
|
displayName: "InformationCardstyles__InfoCardWrapper",
|
|
58
|
-
componentId: "sc-zxu5qa-
|
|
59
|
-
})(["margin-left:", ";width:", "px;overflow:hidden;color:", ";text-align:left;font-size:13px;", "{width:", "px;display:flex;transition:left 0.3s;position:relative;left:", ";}", "{width:", "px;height:min-content;}overflow-wrap:anywhere;background-color:white;border-radius:3px;box-shadow:", ";", "{font-weight:400;", "}", "{padding-top:0;display:flex;flex-direction:column;gap:8px;}", "{padding:16px 16px 1px 16px;margin-bottom:
|
|
59
|
+
componentId: "sc-zxu5qa-10"
|
|
60
|
+
})(["margin-left:", ";width:", "px;overflow:hidden;color:", ";text-align:left;font-size:13px;", "{width:", "px;display:flex;transition:left 0.3s;position:relative;left:", ";}", "{width:", "px;height:min-content;}overflow-wrap:anywhere;background-color:white;border-radius:3px;box-shadow:", ";", "{font-weight:400;gap:16px;", "}", "{padding-top:0;display:flex;flex-direction:column;gap:8px;}", "{padding:16px 16px 1px 16px;margin-bottom:0;}", "{align-self:center;margin-left:10px;margin-right:10px;}", "{margin:0;gap:2px;}", "{margin:0;}", "", "{margin-bottom:0;font-size:14px;}", "", "{font-size:11px;}.ds-button{background:transparent;}.btn-focus,.btn-focus:hover{box-shadow:unset;}"], function (props) {
|
|
60
61
|
return props.asTooltip ? '0' : '8px';
|
|
61
62
|
}, INFOCARD_WIDTH, function (props) {
|
|
62
63
|
return props.theme.palette['grey-600'];
|
|
@@ -71,15 +72,15 @@ export var InfoCardWrapper = styled.div.withConfig({
|
|
|
71
72
|
}, CardStyles.Card.PaddingWrapper, CardStyles.Card.Header, CardStyles.Card.IconContainer, CardStyles.Card.HeaderContent, CardStyles.Card.TitleWrapper, CardStyles.Card.Title, CardStyles.Card.Title, CardStyles.Card.Description, CardStyles.Card.Description);
|
|
72
73
|
export var AlertWrapper = styled.div.withConfig({
|
|
73
74
|
displayName: "InformationCardstyles__AlertWrapper",
|
|
74
|
-
componentId: "sc-zxu5qa-
|
|
75
|
+
componentId: "sc-zxu5qa-11"
|
|
75
76
|
})(["padding-bottom:8px;:empty{display:none;}"]);
|
|
76
77
|
export var NonEditableWrapper = styled.div.withConfig({
|
|
77
78
|
displayName: "InformationCardstyles__NonEditableWrapper",
|
|
78
|
-
componentId: "sc-zxu5qa-
|
|
79
|
+
componentId: "sc-zxu5qa-12"
|
|
79
80
|
})(["padding-bottom:8px;:empty{display:none;}"]);
|
|
80
81
|
export var DescriptionWrapper = styled.div.withConfig({
|
|
81
82
|
displayName: "InformationCardstyles__DescriptionWrapper",
|
|
82
|
-
componentId: "sc-zxu5qa-
|
|
83
|
+
componentId: "sc-zxu5qa-13"
|
|
83
84
|
})(["padding:0 16px;"]);
|
|
84
85
|
|
|
85
86
|
/**
|
|
@@ -87,7 +88,7 @@ export var DescriptionWrapper = styled.div.withConfig({
|
|
|
87
88
|
*/
|
|
88
89
|
export var HidePopoverArrowWrapper = styled.div.withConfig({
|
|
89
90
|
displayName: "InformationCardstyles__HidePopoverArrowWrapper",
|
|
90
|
-
componentId: "sc-zxu5qa-
|
|
91
|
+
componentId: "sc-zxu5qa-14"
|
|
91
92
|
})([".ant-popover-arrow-content,.ant-tooltip-arrow-content{display:none;}"]);
|
|
92
93
|
|
|
93
94
|
/**
|
|
@@ -96,34 +97,33 @@ export var HidePopoverArrowWrapper = styled.div.withConfig({
|
|
|
96
97
|
export var GlobalCSSHidePopoverArrow = createGlobalStyle([".ant-popover-arrow-content,.ant-tooltip-arrow-content{display:none;}"]);
|
|
97
98
|
export var ExtraInfo = styled.div.withConfig({
|
|
98
99
|
displayName: "InformationCardstyles__ExtraInfo",
|
|
99
|
-
componentId: "sc-zxu5qa-
|
|
100
|
+
componentId: "sc-zxu5qa-15"
|
|
100
101
|
})(["margin-bottom:1px;"]);
|
|
101
|
-
export var TooltipComponentClassName = S.TooltipComponent;
|
|
102
102
|
export var InformationCardActionsWrapper = styled.div.withConfig({
|
|
103
103
|
displayName: "InformationCardstyles__InformationCardActionsWrapper",
|
|
104
|
-
componentId: "sc-zxu5qa-
|
|
104
|
+
componentId: "sc-zxu5qa-16"
|
|
105
105
|
})(["padding:8px;"]);
|
|
106
106
|
export var InformationCardPropertyListWrapper = styled.div.withConfig({
|
|
107
107
|
displayName: "InformationCardstyles__InformationCardPropertyListWrapper",
|
|
108
|
-
componentId: "sc-zxu5qa-
|
|
108
|
+
componentId: "sc-zxu5qa-17"
|
|
109
109
|
})(["display:flex;flex-direction:column;padding:0 16px 8px;gap:8px;"]);
|
|
110
110
|
export var InformationCardPropertyItem = styled.div.withConfig({
|
|
111
111
|
displayName: "InformationCardstyles__InformationCardPropertyItem",
|
|
112
|
-
componentId: "sc-zxu5qa-
|
|
112
|
+
componentId: "sc-zxu5qa-18"
|
|
113
113
|
})(["display:flex;align-items:center;flex-wrap:wrap;column-gap:8px;row-gap:6px;"]);
|
|
114
114
|
export var InformationCardPropertyItemLabel = styled.span.withConfig({
|
|
115
115
|
displayName: "InformationCardstyles__InformationCardPropertyItemLabel",
|
|
116
|
-
componentId: "sc-zxu5qa-
|
|
116
|
+
componentId: "sc-zxu5qa-19"
|
|
117
117
|
})(["", ""], macro.small);
|
|
118
118
|
export var InformationCardPropertyItemValue = styled.span.withConfig({
|
|
119
119
|
displayName: "InformationCardstyles__InformationCardPropertyItemValue",
|
|
120
|
-
componentId: "sc-zxu5qa-
|
|
120
|
+
componentId: "sc-zxu5qa-20"
|
|
121
121
|
})(["", " font-weight:500;"], macro.small);
|
|
122
122
|
export var InformationCardSummaryWrapper = styled(Flex).withConfig({
|
|
123
123
|
displayName: "InformationCardstyles__InformationCardSummaryWrapper",
|
|
124
|
-
componentId: "sc-zxu5qa-
|
|
124
|
+
componentId: "sc-zxu5qa-21"
|
|
125
125
|
})(["margin:0 16px;padding-bottom:8px;gap:0 4px;flex-wrap:wrap;"]);
|
|
126
126
|
export var InformationCardSummaryItem = styled(Flex).withConfig({
|
|
127
127
|
displayName: "InformationCardstyles__InformationCardSummaryItem",
|
|
128
|
-
componentId: "sc-zxu5qa-
|
|
128
|
+
componentId: "sc-zxu5qa-22"
|
|
129
129
|
})(["font-weight:500;align-items:center;gap:4px;"]);
|
|
@@ -21,12 +21,6 @@ export var InformationCardDescription = function InformationCardDescription(_ref
|
|
|
21
21
|
placeholder: "placeholder",
|
|
22
22
|
suffixTooltip: "Edit"
|
|
23
23
|
}, descriptionConfig, {
|
|
24
|
-
// {...(descriptionConfig.error
|
|
25
|
-
// ? {
|
|
26
|
-
// error: descriptionConfig.error,
|
|
27
|
-
// errorText: (isError: boolean, text: string) => (isError ? text : ''),
|
|
28
|
-
// }
|
|
29
|
-
// : {})}
|
|
30
24
|
disabled: descriptionConfig.disabled
|
|
31
25
|
}));
|
|
32
26
|
}
|
|
@@ -1,7 +1,6 @@
|
|
|
1
1
|
function _extends() { return _extends = Object.assign ? Object.assign.bind() : function (n) { for (var e = 1; e < arguments.length; e++) { var t = arguments[e]; for (var r in t) ({}).hasOwnProperty.call(t, r) && (n[r] = t[r]); } return n; }, _extends.apply(null, arguments); }
|
|
2
2
|
import React, { useMemo } from 'react';
|
|
3
3
|
import { v4 as uuid } from 'uuid';
|
|
4
|
-
import Divider from '@synerise/ds-divider';
|
|
5
4
|
import Tooltip from '@synerise/ds-tooltip';
|
|
6
5
|
import * as S from '../InformationCard.styles';
|
|
7
6
|
export var InformationCardSummary = function InformationCardSummary(_ref) {
|
|
@@ -13,12 +12,9 @@ export var InformationCardSummary = function InformationCardSummary(_ref) {
|
|
|
13
12
|
}, item);
|
|
14
13
|
});
|
|
15
14
|
}, [items]);
|
|
16
|
-
return /*#__PURE__*/React.createElement(S.InformationCardSummaryWrapper, {
|
|
15
|
+
return /*#__PURE__*/React.createElement(React.Fragment, null, /*#__PURE__*/React.createElement(S.InformationCardSummaryWrapper, {
|
|
17
16
|
"data-testid": "information-card-summary"
|
|
18
|
-
},
|
|
19
|
-
dashed: true,
|
|
20
|
-
marginBottom: 16
|
|
21
|
-
}), itemsWithIDs == null ? void 0 : itemsWithIDs.map(function (_ref2) {
|
|
17
|
+
}, itemsWithIDs == null ? void 0 : itemsWithIDs.map(function (_ref2) {
|
|
22
18
|
var icon = _ref2.icon,
|
|
23
19
|
label = _ref2.label,
|
|
24
20
|
tooltip = _ref2.tooltip,
|
|
@@ -30,5 +26,5 @@ export var InformationCardSummary = function InformationCardSummary(_ref) {
|
|
|
30
26
|
return tooltip ? /*#__PURE__*/React.createElement(Tooltip, _extends({
|
|
31
27
|
title: tooltip
|
|
32
28
|
}, tooltipProps), item) : item;
|
|
33
|
-
}));
|
|
29
|
+
})));
|
|
34
30
|
};
|
package/package.json
CHANGED
|
@@ -1,6 +1,6 @@
|
|
|
1
1
|
{
|
|
2
2
|
"name": "@synerise/ds-information-card",
|
|
3
|
-
"version": "1.1
|
|
3
|
+
"version": "1.2.1",
|
|
4
4
|
"description": "InformationCard UI Component for the Synerise Design System",
|
|
5
5
|
"license": "ISC",
|
|
6
6
|
"repository": "Synerise/synerise-design",
|
|
@@ -36,21 +36,21 @@
|
|
|
36
36
|
],
|
|
37
37
|
"types": "dist/index.d.ts",
|
|
38
38
|
"dependencies": {
|
|
39
|
-
"@synerise/ds-alert": "^1.1.
|
|
40
|
-
"@synerise/ds-avatar": "^1.0.
|
|
41
|
-
"@synerise/ds-badge": "^1.0.
|
|
42
|
-
"@synerise/ds-button": "^1.4.
|
|
43
|
-
"@synerise/ds-card": "^1.2.
|
|
44
|
-
"@synerise/ds-description": "^1.1.
|
|
45
|
-
"@synerise/ds-divider": "^1.
|
|
46
|
-
"@synerise/ds-dropdown": "^1.0.
|
|
47
|
-
"@synerise/ds-icon": "^1.7.
|
|
48
|
-
"@synerise/ds-menu": "^1.
|
|
49
|
-
"@synerise/ds-scrollbar": "^1.1.
|
|
50
|
-
"@synerise/ds-subtle-form": "^1.1.
|
|
51
|
-
"@synerise/ds-tooltip": "^1.2.
|
|
52
|
-
"@synerise/ds-typography": "^1.0.
|
|
53
|
-
"@synerise/ds-utils": "^1.
|
|
39
|
+
"@synerise/ds-alert": "^1.1.23",
|
|
40
|
+
"@synerise/ds-avatar": "^1.0.26",
|
|
41
|
+
"@synerise/ds-badge": "^1.0.24",
|
|
42
|
+
"@synerise/ds-button": "^1.4.15",
|
|
43
|
+
"@synerise/ds-card": "^1.2.15",
|
|
44
|
+
"@synerise/ds-description": "^1.1.12",
|
|
45
|
+
"@synerise/ds-divider": "^1.2.0",
|
|
46
|
+
"@synerise/ds-dropdown": "^1.0.32",
|
|
47
|
+
"@synerise/ds-icon": "^1.7.3",
|
|
48
|
+
"@synerise/ds-menu": "^1.1.1",
|
|
49
|
+
"@synerise/ds-scrollbar": "^1.1.9",
|
|
50
|
+
"@synerise/ds-subtle-form": "^1.1.32",
|
|
51
|
+
"@synerise/ds-tooltip": "^1.2.1",
|
|
52
|
+
"@synerise/ds-typography": "^1.0.22",
|
|
53
|
+
"@synerise/ds-utils": "^1.5.0",
|
|
54
54
|
"rc-trigger": "^5.3.4"
|
|
55
55
|
},
|
|
56
56
|
"peerDependencies": {
|
|
@@ -59,5 +59,5 @@
|
|
|
59
59
|
"react-intl": ">=3.12.0 <= 6.8",
|
|
60
60
|
"styled-components": "^5.3.3"
|
|
61
61
|
},
|
|
62
|
-
"gitHead": "
|
|
62
|
+
"gitHead": "dff7f973bc9fb59e3eb88c658add8b6eb5a1b792"
|
|
63
63
|
}
|