@synerise/ds-information-card 1.3.0 → 1.3.2
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.d.ts +1 -1
- package/dist/InformationCard.js +1 -2
- package/dist/InformationCard.styles.d.ts +4 -1
- package/dist/InformationCard.styles.js +33 -26
- package/package.json +17 -16
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.3.2](https://github.com/Synerise/synerise-design/compare/@synerise/ds-information-card@1.3.1...@synerise/ds-information-card@1.3.2) (2025-11-28)
|
|
7
|
+
|
|
8
|
+
|
|
9
|
+
### Bug Fixes
|
|
10
|
+
|
|
11
|
+
* **information-card:** styles 4 components within property list ([0155693](https://github.com/Synerise/synerise-design/commit/01556934649db5aefdc3525fea6862e26b8853a4))
|
|
12
|
+
|
|
13
|
+
|
|
14
|
+
|
|
15
|
+
|
|
16
|
+
|
|
17
|
+
## [1.3.1](https://github.com/Synerise/synerise-design/compare/@synerise/ds-information-card@1.3.0...@synerise/ds-information-card@1.3.1) (2025-11-13)
|
|
18
|
+
|
|
19
|
+
**Note:** Version bump only for package @synerise/ds-information-card
|
|
20
|
+
|
|
21
|
+
|
|
22
|
+
|
|
23
|
+
|
|
24
|
+
|
|
6
25
|
# [1.3.0](https://github.com/Synerise/synerise-design/compare/@synerise/ds-information-card@1.2.3...@synerise/ds-information-card@1.3.0) (2025-11-06)
|
|
7
26
|
|
|
8
27
|
|
|
@@ -22,5 +22,5 @@ declare const InformationCard: React.ForwardRefExoticComponent<{
|
|
|
22
22
|
renderAdditionalDescription?: () => React.ReactNode;
|
|
23
23
|
propertyListItems?: import(".").InformationCardPropertyListProps["items"];
|
|
24
24
|
summaryItems?: import("./InformationCardSummary/InformationCardSummary.types").InformationCardSummaryProps["items"];
|
|
25
|
-
} & Omit<React.HTMLAttributes<HTMLDivElement>, "title" | "className" | "actionButton" | "actionButtonCallback" | "actionButtonTooltipText" | "actionsMenu" | "asTooltip" | "avatarTooltipText" | "copyTooltip" | "copiedTooltip" | "descriptionConfig" | "renderFooter" | "footerText" | "
|
|
25
|
+
} & Omit<React.HTMLAttributes<HTMLDivElement>, "title" | "className" | "icon" | "actionButton" | "actionButtonCallback" | "actionButtonTooltipText" | "actionsMenu" | "asTooltip" | "avatarTooltipText" | "copyTooltip" | "copiedTooltip" | "descriptionConfig" | "renderFooter" | "footerText" | "iconColor" | "notice" | "renderBadge" | "subtitle" | "renderAdditionalDescription" | "propertyListItems" | "summaryItems"> & import("@synerise/ds-utils").DataAttributes & React.RefAttributes<HTMLDivElement>>;
|
|
26
26
|
export default InformationCard;
|
package/dist/InformationCard.js
CHANGED
|
@@ -4,7 +4,6 @@ function _objectWithoutPropertiesLoose(r, e) { if (null == r) return {}; var t =
|
|
|
4
4
|
import "rc-trigger/assets/index.css";
|
|
5
5
|
import React, { forwardRef, useEffect, useRef, useState } from 'react';
|
|
6
6
|
import Card from '@synerise/ds-card';
|
|
7
|
-
import { RowWrapper } from '@synerise/ds-description/dist/Row/DescriptionRow.styles';
|
|
8
7
|
import { SegmentM } from '@synerise/ds-icon';
|
|
9
8
|
import { useResizeObserver } from '@synerise/ds-utils';
|
|
10
9
|
import * as S from './InformationCard.styles';
|
|
@@ -45,7 +44,7 @@ var InformationCard = /*#__PURE__*/forwardRef(function (_ref, ref) {
|
|
|
45
44
|
var _useResizeObserver = useResizeObserver(mainSlideRef),
|
|
46
45
|
height = _useResizeObserver.height;
|
|
47
46
|
var copyableSlot = function copyableSlot(content) {
|
|
48
|
-
return content && /*#__PURE__*/React.createElement(
|
|
47
|
+
return content && /*#__PURE__*/React.createElement(S.CopyWrapper, {
|
|
49
48
|
copyable: true
|
|
50
49
|
}, /*#__PURE__*/React.createElement(S.Flex, {
|
|
51
50
|
style: {
|
|
@@ -1,5 +1,8 @@
|
|
|
1
1
|
export declare const Flex: import("styled-components").StyledComponent<"div", any, {}, never>;
|
|
2
|
-
export declare const Copyable: import("styled-components").StyledComponent<({ copyValue, texts,
|
|
2
|
+
export declare const Copyable: import("styled-components").StyledComponent<({ copyValue, texts, onMouseEnter, onMouseLeave, icon, placement, onCopy, ...rest }: import("@synerise/ds-copy-icon").CopyIconProps) => React.JSX.Element, any, {}, never>;
|
|
3
|
+
export declare const CopyWrapper: import("styled-components").StyledComponent<"div", any, {
|
|
4
|
+
copyable: boolean;
|
|
5
|
+
}, never>;
|
|
3
6
|
export declare const Divider: import("styled-components").StyledComponent<(props: import("@synerise/ds-divider").DividerProps) => React.JSX.Element, any, {}, never>;
|
|
4
7
|
export declare const BottomDivider: import("styled-components").StyledComponent<(props: import("@synerise/ds-divider").DividerProps) => React.JSX.Element, any, {}, never>;
|
|
5
8
|
export declare const FooterWrapper: import("styled-components").StyledComponent<"div", any, {}, never>;
|
|
@@ -1,28 +1,35 @@
|
|
|
1
1
|
import styled, { createGlobalStyle, css } from 'styled-components';
|
|
2
2
|
import { CardStyles } from '@synerise/ds-card';
|
|
3
|
-
import
|
|
3
|
+
import CopyIcon from '@synerise/ds-copy-icon';
|
|
4
|
+
import { RowWrapper } from '@synerise/ds-description/dist/Row/DescriptionRow.styles';
|
|
4
5
|
import DSDivider from '@synerise/ds-divider';
|
|
6
|
+
import { Container } from '@synerise/ds-skeleton/dist/Skeleton.styles';
|
|
7
|
+
import { StatusTag } from '@synerise/ds-status/dist/Status.styles';
|
|
5
8
|
import { macro } from '@synerise/ds-typography';
|
|
6
9
|
var INFOCARD_WIDTH = 350;
|
|
7
10
|
export var Flex = styled.div.withConfig({
|
|
8
11
|
displayName: "InformationCardstyles__Flex",
|
|
9
12
|
componentId: "sc-zxu5qa-0"
|
|
10
13
|
})(["display:flex;"]);
|
|
11
|
-
export var Copyable = styled(
|
|
14
|
+
export var Copyable = styled(CopyIcon).withConfig({
|
|
12
15
|
displayName: "InformationCardstyles__Copyable",
|
|
13
16
|
componentId: "sc-zxu5qa-1"
|
|
14
|
-
})(["display:flex;align-items:center;height:20px;"]);
|
|
17
|
+
})(["display:flex;align-items:center;height:20px;visibility:hidden;position:relative;margin-left:8px;opacity:0;"]);
|
|
18
|
+
export var CopyWrapper = styled(RowWrapper).withConfig({
|
|
19
|
+
displayName: "InformationCardstyles__CopyWrapper",
|
|
20
|
+
componentId: "sc-zxu5qa-2"
|
|
21
|
+
})(["&:hover{", "{visibility:visible;opacity:1;}}"], Copyable);
|
|
15
22
|
export var Divider = styled(DSDivider).withConfig({
|
|
16
23
|
displayName: "InformationCardstyles__Divider",
|
|
17
|
-
componentId: "sc-zxu5qa-
|
|
24
|
+
componentId: "sc-zxu5qa-3"
|
|
18
25
|
})(["&&{margin:8px 0;width:100%;}"]);
|
|
19
26
|
export var BottomDivider = styled(DSDivider).withConfig({
|
|
20
27
|
displayName: "InformationCardstyles__BottomDivider",
|
|
21
|
-
componentId: "sc-zxu5qa-
|
|
28
|
+
componentId: "sc-zxu5qa-4"
|
|
22
29
|
})(["&&{margin-left:16px;margin-right:16px;}"]);
|
|
23
30
|
export var FooterWrapper = styled(Flex).withConfig({
|
|
24
31
|
displayName: "InformationCardstyles__FooterWrapper",
|
|
25
|
-
componentId: "sc-zxu5qa-
|
|
32
|
+
componentId: "sc-zxu5qa-5"
|
|
26
33
|
})(["background:", ";border-top:solid 1px ", ";padding:8px;"], function (props) {
|
|
27
34
|
return props.theme.palette['grey-050'];
|
|
28
35
|
}, function (props) {
|
|
@@ -30,11 +37,11 @@ export var FooterWrapper = styled(Flex).withConfig({
|
|
|
30
37
|
});
|
|
31
38
|
export var ActionsMenuItems = styled.div.withConfig({
|
|
32
39
|
displayName: "InformationCardstyles__ActionsMenuItems",
|
|
33
|
-
componentId: "sc-zxu5qa-
|
|
40
|
+
componentId: "sc-zxu5qa-6"
|
|
34
41
|
})([""]);
|
|
35
42
|
export var FlexGrow = styled.div.withConfig({
|
|
36
43
|
displayName: "InformationCardstyles__FlexGrow",
|
|
37
|
-
componentId: "sc-zxu5qa-
|
|
44
|
+
componentId: "sc-zxu5qa-7"
|
|
38
45
|
})(["flex-grow:", ";"], function (_ref) {
|
|
39
46
|
var _ref$grow = _ref.grow,
|
|
40
47
|
grow = _ref$grow === void 0 ? 1 : _ref$grow;
|
|
@@ -42,21 +49,21 @@ export var FlexGrow = styled.div.withConfig({
|
|
|
42
49
|
});
|
|
43
50
|
export var ActionButtonContainer = styled.div.withConfig({
|
|
44
51
|
displayName: "InformationCardstyles__ActionButtonContainer",
|
|
45
|
-
componentId: "sc-zxu5qa-
|
|
52
|
+
componentId: "sc-zxu5qa-8"
|
|
46
53
|
})([""]);
|
|
47
54
|
export var InfoCardSlidesWrapper = styled.div.withConfig({
|
|
48
55
|
displayName: "InformationCardstyles__InfoCardSlidesWrapper",
|
|
49
|
-
componentId: "sc-zxu5qa-
|
|
56
|
+
componentId: "sc-zxu5qa-9"
|
|
50
57
|
})([""]);
|
|
51
58
|
export var InfoCardSlide = styled.div.withConfig({
|
|
52
59
|
displayName: "InformationCardstyles__InfoCardSlide",
|
|
53
|
-
componentId: "sc-zxu5qa-
|
|
60
|
+
componentId: "sc-zxu5qa-10"
|
|
54
61
|
})(["", ""], function (props) {
|
|
55
62
|
return props.height && "max-height: " + props.height + "px;";
|
|
56
63
|
});
|
|
57
64
|
export var InfoCardWrapper = styled.div.withConfig({
|
|
58
65
|
displayName: "InformationCardstyles__InfoCardWrapper",
|
|
59
|
-
componentId: "sc-zxu5qa-
|
|
66
|
+
componentId: "sc-zxu5qa-11"
|
|
60
67
|
})(["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) {
|
|
61
68
|
return props.asTooltip ? '0' : '8px';
|
|
62
69
|
}, INFOCARD_WIDTH, function (props) {
|
|
@@ -72,15 +79,15 @@ export var InfoCardWrapper = styled.div.withConfig({
|
|
|
72
79
|
}, 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);
|
|
73
80
|
export var AlertWrapper = styled.div.withConfig({
|
|
74
81
|
displayName: "InformationCardstyles__AlertWrapper",
|
|
75
|
-
componentId: "sc-zxu5qa-
|
|
82
|
+
componentId: "sc-zxu5qa-12"
|
|
76
83
|
})(["padding-bottom:8px;:empty{display:none;}"]);
|
|
77
84
|
export var NonEditableWrapper = styled.div.withConfig({
|
|
78
85
|
displayName: "InformationCardstyles__NonEditableWrapper",
|
|
79
|
-
componentId: "sc-zxu5qa-
|
|
86
|
+
componentId: "sc-zxu5qa-13"
|
|
80
87
|
})(["padding-bottom:8px;:empty{display:none;}"]);
|
|
81
88
|
export var DescriptionWrapper = styled.div.withConfig({
|
|
82
89
|
displayName: "InformationCardstyles__DescriptionWrapper",
|
|
83
|
-
componentId: "sc-zxu5qa-
|
|
90
|
+
componentId: "sc-zxu5qa-14"
|
|
84
91
|
})(["padding:0 16px;"]);
|
|
85
92
|
|
|
86
93
|
/**
|
|
@@ -88,7 +95,7 @@ export var DescriptionWrapper = styled.div.withConfig({
|
|
|
88
95
|
*/
|
|
89
96
|
export var HidePopoverArrowWrapper = styled.div.withConfig({
|
|
90
97
|
displayName: "InformationCardstyles__HidePopoverArrowWrapper",
|
|
91
|
-
componentId: "sc-zxu5qa-
|
|
98
|
+
componentId: "sc-zxu5qa-15"
|
|
92
99
|
})([".ant-popover-arrow-content,.ant-tooltip-arrow-content{display:none;}"]);
|
|
93
100
|
|
|
94
101
|
/**
|
|
@@ -97,33 +104,33 @@ export var HidePopoverArrowWrapper = styled.div.withConfig({
|
|
|
97
104
|
export var GlobalCSSHidePopoverArrow = createGlobalStyle([".ant-popover-arrow-content,.ant-tooltip-arrow-content{display:none;}"]);
|
|
98
105
|
export var ExtraInfo = styled.div.withConfig({
|
|
99
106
|
displayName: "InformationCardstyles__ExtraInfo",
|
|
100
|
-
componentId: "sc-zxu5qa-
|
|
107
|
+
componentId: "sc-zxu5qa-16"
|
|
101
108
|
})(["margin-bottom:1px;"]);
|
|
102
109
|
export var InformationCardActionsWrapper = styled.div.withConfig({
|
|
103
110
|
displayName: "InformationCardstyles__InformationCardActionsWrapper",
|
|
104
|
-
componentId: "sc-zxu5qa-
|
|
111
|
+
componentId: "sc-zxu5qa-17"
|
|
105
112
|
})(["padding:8px;"]);
|
|
106
113
|
export var InformationCardPropertyListWrapper = styled.div.withConfig({
|
|
107
114
|
displayName: "InformationCardstyles__InformationCardPropertyListWrapper",
|
|
108
|
-
componentId: "sc-zxu5qa-
|
|
109
|
-
})(["display:flex;flex-direction:column;padding:0 16px 8px;gap:8px;"]);
|
|
115
|
+
componentId: "sc-zxu5qa-18"
|
|
116
|
+
})(["display:flex;flex-direction:column;padding:0 16px 8px;gap:8px;", "{padding:0;}", "{margin:0;}"], Container, StatusTag);
|
|
110
117
|
export var InformationCardPropertyItem = styled.div.withConfig({
|
|
111
118
|
displayName: "InformationCardstyles__InformationCardPropertyItem",
|
|
112
|
-
componentId: "sc-zxu5qa-
|
|
119
|
+
componentId: "sc-zxu5qa-19"
|
|
113
120
|
})(["display:flex;align-items:center;flex-wrap:wrap;column-gap:8px;row-gap:6px;"]);
|
|
114
121
|
export var InformationCardPropertyItemLabel = styled.span.withConfig({
|
|
115
122
|
displayName: "InformationCardstyles__InformationCardPropertyItemLabel",
|
|
116
|
-
componentId: "sc-zxu5qa-
|
|
123
|
+
componentId: "sc-zxu5qa-20"
|
|
117
124
|
})(["", ""], macro.small);
|
|
118
125
|
export var InformationCardPropertyItemValue = styled.span.withConfig({
|
|
119
126
|
displayName: "InformationCardstyles__InformationCardPropertyItemValue",
|
|
120
|
-
componentId: "sc-zxu5qa-
|
|
121
|
-
})(["", " font-weight:500;"], macro.small);
|
|
127
|
+
componentId: "sc-zxu5qa-21"
|
|
128
|
+
})(["", " flex-grow:1;font-weight:500;"], macro.small);
|
|
122
129
|
export var InformationCardSummaryWrapper = styled(Flex).withConfig({
|
|
123
130
|
displayName: "InformationCardstyles__InformationCardSummaryWrapper",
|
|
124
|
-
componentId: "sc-zxu5qa-
|
|
131
|
+
componentId: "sc-zxu5qa-22"
|
|
125
132
|
})(["margin:0 16px;padding-bottom:8px;gap:0 4px;flex-wrap:wrap;"]);
|
|
126
133
|
export var InformationCardSummaryItem = styled(Flex).withConfig({
|
|
127
134
|
displayName: "InformationCardstyles__InformationCardSummaryItem",
|
|
128
|
-
componentId: "sc-zxu5qa-
|
|
135
|
+
componentId: "sc-zxu5qa-23"
|
|
129
136
|
})(["font-weight:500;align-items:center;gap:4px;"]);
|
package/package.json
CHANGED
|
@@ -1,6 +1,6 @@
|
|
|
1
1
|
{
|
|
2
2
|
"name": "@synerise/ds-information-card",
|
|
3
|
-
"version": "1.3.
|
|
3
|
+
"version": "1.3.2",
|
|
4
4
|
"description": "InformationCard UI Component for the Synerise Design System",
|
|
5
5
|
"license": "ISC",
|
|
6
6
|
"repository": "Synerise/synerise-design",
|
|
@@ -36,20 +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.1.
|
|
41
|
-
"@synerise/ds-badge": "^1.0.
|
|
42
|
-
"@synerise/ds-button": "^1.5.
|
|
43
|
-
"@synerise/ds-card": "^1.2.
|
|
44
|
-
"@synerise/ds-
|
|
45
|
-
"@synerise/ds-
|
|
46
|
-
"@synerise/ds-
|
|
47
|
-
"@synerise/ds-
|
|
48
|
-
"@synerise/ds-
|
|
49
|
-
"@synerise/ds-
|
|
50
|
-
"@synerise/ds-
|
|
51
|
-
"@synerise/ds-
|
|
52
|
-
"@synerise/ds-
|
|
39
|
+
"@synerise/ds-alert": "^1.1.26",
|
|
40
|
+
"@synerise/ds-avatar": "^1.1.1",
|
|
41
|
+
"@synerise/ds-badge": "^1.0.26",
|
|
42
|
+
"@synerise/ds-button": "^1.5.1",
|
|
43
|
+
"@synerise/ds-card": "^1.2.17",
|
|
44
|
+
"@synerise/ds-copy-icon": "^1.0.1",
|
|
45
|
+
"@synerise/ds-description": "^1.1.14",
|
|
46
|
+
"@synerise/ds-divider": "^1.2.2",
|
|
47
|
+
"@synerise/ds-dropdown": "^1.1.2",
|
|
48
|
+
"@synerise/ds-icon": "^1.9.0",
|
|
49
|
+
"@synerise/ds-menu": "^1.2.1",
|
|
50
|
+
"@synerise/ds-scrollbar": "^1.2.1",
|
|
51
|
+
"@synerise/ds-subtle-form": "^1.1.37",
|
|
52
|
+
"@synerise/ds-tooltip": "^1.3.1",
|
|
53
|
+
"@synerise/ds-typography": "^1.0.24",
|
|
53
54
|
"@synerise/ds-utils": "^1.5.0",
|
|
54
55
|
"rc-trigger": "^5.3.4"
|
|
55
56
|
},
|
|
@@ -59,5 +60,5 @@
|
|
|
59
60
|
"react-intl": ">=3.12.0 <= 6.8",
|
|
60
61
|
"styled-components": "^5.3.3"
|
|
61
62
|
},
|
|
62
|
-
"gitHead": "
|
|
63
|
+
"gitHead": "d5bd7fbc9d840ac30e2b79b36c451b486e178445"
|
|
63
64
|
}
|