@synerise/ds-information-card 1.6.4 → 1.6.5
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 +4 -0
- package/dist/InformationCard.d.ts +6 -6
- package/dist/InformationCard.js +82 -135
- package/dist/InformationCard.styles.d.ts +25 -25
- package/dist/InformationCard.styles.js +68 -69
- package/dist/InformationCard.types.d.ts +8 -8
- package/dist/InformationCard.types.js +1 -1
- package/dist/InformationCard.utils.d.ts +3 -3
- package/dist/InformationCard.utils.js +29 -36
- package/dist/InformationCardActions/InformationCardActions.d.ts +2 -2
- package/dist/InformationCardActions/InformationCardActions.js +22 -26
- package/dist/InformationCardActions/InformationCardActions.types.d.ts +2 -2
- package/dist/InformationCardActions/InformationCardActions.types.js +1 -1
- package/dist/InformationCardDescription/InformationCardDescription.d.ts +2 -2
- package/dist/InformationCardDescription/InformationCardDescription.js +23 -29
- package/dist/InformationCardFooter/InformationCardFooter.d.ts +2 -2
- package/dist/InformationCardFooter/InformationCardFooter.js +29 -42
- package/dist/InformationCardFooter/InformationCardFooter.types.d.ts +3 -3
- package/dist/InformationCardFooter/InformationCardFooter.types.js +1 -1
- package/dist/InformationCardPropertyList/InformationCardPropertyList.d.ts +2 -2
- package/dist/InformationCardPropertyList/InformationCardPropertyList.js +32 -30
- package/dist/InformationCardPropertyList/InformationCardPropertyList.types.d.ts +1 -1
- package/dist/InformationCardPropertyList/InformationCardPropertyList.types.js +1 -1
- package/dist/InformationCardSummary/InformationCardSummary.d.ts +2 -2
- package/dist/InformationCardSummary/InformationCardSummary.js +29 -30
- package/dist/InformationCardSummary/InformationCardSummary.types.d.ts +2 -2
- package/dist/InformationCardSummary/InformationCardSummary.types.js +1 -1
- package/dist/InformationCardTooltip/InformationCard.constants.d.ts +1 -1
- package/dist/InformationCardTooltip/InformationCard.constants.js +13 -6
- package/dist/InformationCardTooltip/InformationCardTooltip.d.ts +4 -4
- package/dist/InformationCardTooltip/InformationCardTooltip.js +27 -43
- package/dist/InformationCardTooltip/InformationCardTooltip.styles.d.ts +1 -1
- package/dist/InformationCardTooltip/InformationCardTooltip.styles.js +6 -3
- package/dist/InformationCardTooltip/InformationCardTooltip.types.d.ts +5 -5
- package/dist/InformationCardTooltip/InformationCardTooltip.types.js +1 -1
- package/dist/index.js +12 -7
- package/dist/modules.d.js +1 -1
- package/dist/modules.d.ts +0 -0
- package/package.json +23 -23
package/CHANGELOG.md
CHANGED
|
@@ -3,6 +3,10 @@
|
|
|
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.6.5](https://github.com/Synerise/synerise-design/compare/@synerise/ds-information-card@1.6.4...@synerise/ds-information-card@1.6.5) (2026-03-24)
|
|
7
|
+
|
|
8
|
+
**Note:** Version bump only for package @synerise/ds-information-card
|
|
9
|
+
|
|
6
10
|
## [1.6.4](https://github.com/Synerise/synerise-design/compare/@synerise/ds-information-card@1.6.3...@synerise/ds-information-card@1.6.4) (2026-03-20)
|
|
7
11
|
|
|
8
12
|
**Note:** Version bump only for package @synerise/ds-information-card
|
|
@@ -1,15 +1,15 @@
|
|
|
1
|
-
import React from 'react';
|
|
1
|
+
import { default as React } from 'react';
|
|
2
2
|
declare const InformationCard: React.ForwardRefExoticComponent<{
|
|
3
3
|
actionButton?: boolean | (() => React.ReactNode);
|
|
4
4
|
actionButtonCallback?: () => void;
|
|
5
5
|
actionButtonTooltipText?: string;
|
|
6
|
-
actionsMenu?: Omit<import(
|
|
6
|
+
actionsMenu?: Omit<import('./InformationCardActions/InformationCardActions.types').InformationCardActionsProps, "onHeaderClick" | "maxHeight">;
|
|
7
7
|
asTooltip?: boolean;
|
|
8
8
|
avatarTooltipText?: string;
|
|
9
9
|
className?: string;
|
|
10
10
|
copyTooltip?: string;
|
|
11
11
|
copiedTooltip?: string;
|
|
12
|
-
descriptionConfig?: import(
|
|
12
|
+
descriptionConfig?: import('@synerise/ds-subtle-form/dist/Elements/TextArea/TextArea.types').SubtleTextAreaProps | string | null | undefined;
|
|
13
13
|
renderFooter?: () => JSX.Element;
|
|
14
14
|
footerText?: React.ReactNode | null;
|
|
15
15
|
icon?: React.ReactNode;
|
|
@@ -19,7 +19,7 @@ declare const InformationCard: React.ForwardRefExoticComponent<{
|
|
|
19
19
|
subtitle?: React.ReactNode;
|
|
20
20
|
title: React.ReactNode;
|
|
21
21
|
renderAdditionalDescription?: () => React.ReactNode;
|
|
22
|
-
propertyListItems?: import(
|
|
23
|
-
summaryItems?: import(
|
|
24
|
-
} & Omit<React.HTMLAttributes<HTMLDivElement>, "title" | "className" | "icon" | "
|
|
22
|
+
propertyListItems?: import('.').InformationCardPropertyListProps["items"];
|
|
23
|
+
summaryItems?: import('./InformationCardSummary/InformationCardSummary.types').InformationCardSummaryProps["items"];
|
|
24
|
+
} & Omit<React.HTMLAttributes<HTMLDivElement>, "title" | "className" | "icon" | "footerText" | "asTooltip" | "actionButton" | "actionButtonCallback" | "actionButtonTooltipText" | "actionsMenu" | "avatarTooltipText" | "copyTooltip" | "copiedTooltip" | "descriptionConfig" | "renderFooter" | "iconColor" | "notice" | "renderBadge" | "subtitle" | "renderAdditionalDescription" | "propertyListItems" | "summaryItems"> & import('@synerise/ds-utils').DataAttributes & React.RefAttributes<HTMLDivElement>>;
|
|
25
25
|
export default InformationCard;
|
package/dist/InformationCard.js
CHANGED
|
@@ -1,139 +1,86 @@
|
|
|
1
|
-
|
|
2
|
-
|
|
3
|
-
|
|
4
|
-
import
|
|
5
|
-
import
|
|
6
|
-
import {
|
|
7
|
-
import {
|
|
8
|
-
import {
|
|
9
|
-
import
|
|
10
|
-
import {
|
|
11
|
-
import {
|
|
12
|
-
import {
|
|
13
|
-
import {
|
|
14
|
-
|
|
15
|
-
|
|
16
|
-
|
|
17
|
-
|
|
18
|
-
|
|
19
|
-
|
|
20
|
-
|
|
21
|
-
|
|
22
|
-
|
|
23
|
-
|
|
24
|
-
|
|
25
|
-
|
|
26
|
-
|
|
27
|
-
|
|
28
|
-
|
|
29
|
-
|
|
30
|
-
|
|
31
|
-
|
|
32
|
-
|
|
33
|
-
|
|
34
|
-
|
|
35
|
-
|
|
36
|
-
|
|
37
|
-
|
|
38
|
-
|
|
39
|
-
|
|
40
|
-
|
|
41
|
-
|
|
42
|
-
|
|
43
|
-
|
|
44
|
-
|
|
45
|
-
|
|
46
|
-
|
|
47
|
-
|
|
48
|
-
|
|
49
|
-
|
|
50
|
-
|
|
51
|
-
|
|
52
|
-
|
|
53
|
-
|
|
54
|
-
|
|
55
|
-
|
|
56
|
-
|
|
57
|
-
texts: {
|
|
58
|
-
copyTooltip: copyTooltip != null ? copyTooltip : 'Copy to clipboard',
|
|
59
|
-
copiedTooltip: copiedTooltip != null ? copiedTooltip : 'Copied'
|
|
60
|
-
}
|
|
61
|
-
})));
|
|
62
|
-
};
|
|
63
|
-
var hasFooter = !!(footerText || actionButton || actionsMenu);
|
|
64
|
-
|
|
65
|
-
// eslint-disable-next-line react-hooks/exhaustive-deps
|
|
66
|
-
useEffect(function () {
|
|
67
|
-
var _mainSlideRef$current;
|
|
68
|
-
if (!((_mainSlideRef$current = mainSlideRef.current) != null && _mainSlideRef$current.clientWidth)) {
|
|
1
|
+
import { jsx, jsxs } from "react/jsx-runtime";
|
|
2
|
+
import { forwardRef, useState, useRef, useEffect } from "react";
|
|
3
|
+
import Card from "@synerise/ds-card";
|
|
4
|
+
import { SegmentM } from "@synerise/ds-icon";
|
|
5
|
+
import { FloatingDelayGroup, HOVER_CLOSE_DELAY, HOVER_OPEN_DELAY } from "@synerise/ds-popover";
|
|
6
|
+
import { useResizeObserver } from "@synerise/ds-utils";
|
|
7
|
+
import { InfoCardWrapper, InfoCardSlidesWrapper, InfoCardSlide, BottomDivider, CopyWrapper, Flex, Copyable } from "./InformationCard.styles.js";
|
|
8
|
+
import { buildIconBadge } from "./InformationCard.utils.js";
|
|
9
|
+
import { InformationCardActions } from "./InformationCardActions/InformationCardActions.js";
|
|
10
|
+
import { InformationCardDescription } from "./InformationCardDescription/InformationCardDescription.js";
|
|
11
|
+
import { InformationCardFooter } from "./InformationCardFooter/InformationCardFooter.js";
|
|
12
|
+
import { InformationCardPropertyList } from "./InformationCardPropertyList/InformationCardPropertyList.js";
|
|
13
|
+
import { InformationCardSummary } from "./InformationCardSummary/InformationCardSummary.js";
|
|
14
|
+
const InformationCard = forwardRef(({
|
|
15
|
+
actionButton,
|
|
16
|
+
actionButtonTooltipText,
|
|
17
|
+
actionButtonCallback,
|
|
18
|
+
actionsMenu,
|
|
19
|
+
asTooltip,
|
|
20
|
+
avatarTooltipText,
|
|
21
|
+
copyTooltip,
|
|
22
|
+
copiedTooltip,
|
|
23
|
+
renderFooter,
|
|
24
|
+
renderBadge,
|
|
25
|
+
subtitle,
|
|
26
|
+
title,
|
|
27
|
+
notice,
|
|
28
|
+
footerText,
|
|
29
|
+
icon: iconElement = /* @__PURE__ */ jsx(SegmentM, {}),
|
|
30
|
+
iconColor,
|
|
31
|
+
descriptionConfig,
|
|
32
|
+
className,
|
|
33
|
+
renderAdditionalDescription,
|
|
34
|
+
propertyListItems,
|
|
35
|
+
summaryItems,
|
|
36
|
+
...props
|
|
37
|
+
}, ref) => {
|
|
38
|
+
const [isActionsMenuVisible, setIsActionsMenuVisible] = useState(false);
|
|
39
|
+
const mainSlideRef = useRef(null);
|
|
40
|
+
const {
|
|
41
|
+
height
|
|
42
|
+
} = useResizeObserver(mainSlideRef);
|
|
43
|
+
const copyableSlot = (content) => content && /* @__PURE__ */ jsx(CopyWrapper, { copyable: true, children: /* @__PURE__ */ jsxs(Flex, { style: {
|
|
44
|
+
backgroundColor: "",
|
|
45
|
+
alignItems: "center",
|
|
46
|
+
textAlign: "left"
|
|
47
|
+
}, children: [
|
|
48
|
+
/* @__PURE__ */ jsx("span", { children: content }),
|
|
49
|
+
/* @__PURE__ */ jsx(Copyable, { copyValue: content, texts: {
|
|
50
|
+
copyTooltip: copyTooltip ?? "Copy to clipboard",
|
|
51
|
+
copiedTooltip: copiedTooltip ?? "Copied"
|
|
52
|
+
} })
|
|
53
|
+
] }) });
|
|
54
|
+
const hasFooter = !!(footerText || actionButton || actionsMenu);
|
|
55
|
+
useEffect(() => {
|
|
56
|
+
if (!mainSlideRef.current?.clientWidth) {
|
|
69
57
|
setIsActionsMenuVisible(false);
|
|
70
58
|
}
|
|
71
59
|
});
|
|
72
|
-
|
|
73
|
-
return
|
|
74
|
-
|
|
75
|
-
|
|
76
|
-
|
|
77
|
-
|
|
78
|
-
|
|
79
|
-
|
|
80
|
-
|
|
81
|
-
|
|
82
|
-
|
|
83
|
-
|
|
84
|
-
|
|
85
|
-
|
|
86
|
-
|
|
87
|
-
|
|
88
|
-
|
|
89
|
-
|
|
90
|
-
|
|
91
|
-
|
|
92
|
-
|
|
93
|
-
|
|
94
|
-
|
|
95
|
-
style: {
|
|
96
|
-
marginRight: '16px'
|
|
97
|
-
}
|
|
98
|
-
}, (_renderBadge = _renderBadge2 == null ? void 0 : _renderBadge2()) != null ? _renderBadge : buildIconBadge({
|
|
99
|
-
iconElement: iconElement,
|
|
100
|
-
iconColor: iconColor,
|
|
101
|
-
avatarTooltipText: avatarTooltipText
|
|
102
|
-
}));
|
|
103
|
-
},
|
|
104
|
-
title: typeof title === 'string' ? copyableSlot(title) : title,
|
|
105
|
-
description: typeof subtitle === 'string' ? copyableSlot(subtitle) : subtitle,
|
|
106
|
-
headerSideChildren: undefined,
|
|
107
|
-
compactHeader: false,
|
|
108
|
-
withoutPadding: true,
|
|
109
|
-
lively: false,
|
|
110
|
-
withHeader: true
|
|
111
|
-
}, (!!descriptionConfig || notice) && /*#__PURE__*/React.createElement(InformationCardDescription, {
|
|
112
|
-
extraInformation: notice,
|
|
113
|
-
descriptionConfig: descriptionConfig
|
|
114
|
-
}), renderAdditionalDescription && renderAdditionalDescription(), propertyListItems && /*#__PURE__*/React.createElement(InformationCardPropertyList, {
|
|
115
|
-
items: propertyListItems
|
|
116
|
-
}), showBottomDivider && /*#__PURE__*/React.createElement(S.BottomDivider, {
|
|
117
|
-
dashed: true,
|
|
118
|
-
marginBottom: 8
|
|
119
|
-
}), summaryItems && /*#__PURE__*/React.createElement(InformationCardSummary, {
|
|
120
|
-
items: summaryItems
|
|
121
|
-
}), renderFooter && renderFooter() || hasFooter && /*#__PURE__*/React.createElement(InformationCardFooter, {
|
|
122
|
-
text: footerText,
|
|
123
|
-
actionButton: actionButton,
|
|
124
|
-
actionButtonCallback: actionButtonCallback,
|
|
125
|
-
actionButtonTooltipText: actionButtonTooltipText,
|
|
126
|
-
actionsMenuButtonLabel: actionsMenu == null ? void 0 : actionsMenu.buttonLabel,
|
|
127
|
-
actionsMenuButtonOnClick: actionsMenu ? function () {
|
|
128
|
-
return setIsActionsMenuVisible(true);
|
|
129
|
-
} : undefined
|
|
130
|
-
}))), actionsMenu && /*#__PURE__*/React.createElement(S.InfoCardSlide, {
|
|
131
|
-
height: height
|
|
132
|
-
}, /*#__PURE__*/React.createElement(InformationCardActions, _extends({}, actionsMenu, {
|
|
133
|
-
maxHeight: height,
|
|
134
|
-
onHeaderClick: function onHeaderClick() {
|
|
135
|
-
return setIsActionsMenuVisible(false);
|
|
136
|
-
}
|
|
137
|
-
}))))));
|
|
60
|
+
const showBottomDivider = !!(summaryItems && (propertyListItems || descriptionConfig || notice || renderAdditionalDescription));
|
|
61
|
+
return /* @__PURE__ */ jsx(FloatingDelayGroup, { delay: {
|
|
62
|
+
open: HOVER_OPEN_DELAY,
|
|
63
|
+
close: HOVER_CLOSE_DELAY
|
|
64
|
+
}, children: /* @__PURE__ */ jsx(InfoCardWrapper, { "data-testid": "information-card", "data-popup-container": true, ref, "aria-label": "information card", className: `ds-info-card ${className}`, asTooltip, isActionsMenuVisible, hasActionsMenu: !!actionsMenu, hasFooter: !!(renderFooter || hasFooter), ...props, children: /* @__PURE__ */ jsxs(InfoCardSlidesWrapper, { children: [
|
|
65
|
+
/* @__PURE__ */ jsx(InfoCardSlide, { ref: mainSlideRef, children: /* @__PURE__ */ jsxs(Card, { background: "white", renderBadge: () => {
|
|
66
|
+
return renderBadge !== null && /* @__PURE__ */ jsx("div", { style: {
|
|
67
|
+
marginRight: "16px"
|
|
68
|
+
}, children: renderBadge?.() ?? buildIconBadge({
|
|
69
|
+
iconElement,
|
|
70
|
+
iconColor,
|
|
71
|
+
avatarTooltipText
|
|
72
|
+
}) });
|
|
73
|
+
}, title: typeof title === "string" ? copyableSlot(title) : title, description: typeof subtitle === "string" ? copyableSlot(subtitle) : subtitle, headerSideChildren: void 0, compactHeader: false, withoutPadding: true, lively: false, withHeader: true, children: [
|
|
74
|
+
(!!descriptionConfig || notice) && /* @__PURE__ */ jsx(InformationCardDescription, { extraInformation: notice, descriptionConfig }),
|
|
75
|
+
renderAdditionalDescription && renderAdditionalDescription(),
|
|
76
|
+
propertyListItems && /* @__PURE__ */ jsx(InformationCardPropertyList, { items: propertyListItems }),
|
|
77
|
+
showBottomDivider && /* @__PURE__ */ jsx(BottomDivider, { dashed: true, marginBottom: 8 }),
|
|
78
|
+
summaryItems && /* @__PURE__ */ jsx(InformationCardSummary, { items: summaryItems }),
|
|
79
|
+
renderFooter && renderFooter() || hasFooter && /* @__PURE__ */ jsx(InformationCardFooter, { text: footerText, actionButton, actionButtonCallback, actionButtonTooltipText, actionsMenuButtonLabel: actionsMenu?.buttonLabel, actionsMenuButtonOnClick: actionsMenu ? () => setIsActionsMenuVisible(true) : void 0 })
|
|
80
|
+
] }) }),
|
|
81
|
+
actionsMenu && /* @__PURE__ */ jsx(InfoCardSlide, { height, children: /* @__PURE__ */ jsx(InformationCardActions, { ...actionsMenu, maxHeight: height, onHeaderClick: () => setIsActionsMenuVisible(false) }) })
|
|
82
|
+
] }) }) });
|
|
138
83
|
});
|
|
139
|
-
export
|
|
84
|
+
export {
|
|
85
|
+
InformationCard as default
|
|
86
|
+
};
|
|
@@ -1,43 +1,43 @@
|
|
|
1
|
-
export declare const Flex: import(
|
|
2
|
-
export declare const Copyable: import(
|
|
3
|
-
export declare const CopyWrapper: import(
|
|
1
|
+
export declare const Flex: import('styled-components').StyledComponent<"div", any, {}, never>;
|
|
2
|
+
export declare const Copyable: import('styled-components').StyledComponent<({ copyValue, texts, onMouseEnter, onMouseLeave, icon, placement, onCopy, onClick, ...rest }: import('@synerise/ds-copy-icon').CopyIconProps) => React.JSX.Element, any, {}, never>;
|
|
3
|
+
export declare const CopyWrapper: import('styled-components').StyledComponent<"div", any, {
|
|
4
4
|
copyable: boolean;
|
|
5
5
|
}, never>;
|
|
6
|
-
export declare const Divider: import(
|
|
7
|
-
export declare const BottomDivider: import(
|
|
8
|
-
export declare const FooterWrapper: import(
|
|
9
|
-
export declare const ActionsMenuItems: import(
|
|
10
|
-
export declare const FlexGrow: import(
|
|
6
|
+
export declare const Divider: import('styled-components').StyledComponent<(props: import('@synerise/ds-divider').DividerProps) => React.JSX.Element, any, {}, never>;
|
|
7
|
+
export declare const BottomDivider: import('styled-components').StyledComponent<(props: import('@synerise/ds-divider').DividerProps) => React.JSX.Element, any, {}, never>;
|
|
8
|
+
export declare const FooterWrapper: import('styled-components').StyledComponent<"div", any, {}, never>;
|
|
9
|
+
export declare const ActionsMenuItems: import('styled-components').StyledComponent<"div", any, {}, never>;
|
|
10
|
+
export declare const FlexGrow: import('styled-components').StyledComponent<"div", any, {
|
|
11
11
|
grow?: number;
|
|
12
12
|
}, never>;
|
|
13
|
-
export declare const ActionButtonContainer: import(
|
|
14
|
-
export declare const InfoCardSlidesWrapper: import(
|
|
15
|
-
export declare const InfoCardSlide: import(
|
|
13
|
+
export declare const ActionButtonContainer: import('styled-components').StyledComponent<"div", any, {}, never>;
|
|
14
|
+
export declare const InfoCardSlidesWrapper: import('styled-components').StyledComponent<"div", any, {}, never>;
|
|
15
|
+
export declare const InfoCardSlide: import('styled-components').StyledComponent<"div", any, {
|
|
16
16
|
height?: number;
|
|
17
17
|
}, never>;
|
|
18
|
-
export declare const InfoCardWrapper: import(
|
|
18
|
+
export declare const InfoCardWrapper: import('styled-components').StyledComponent<"div", any, {
|
|
19
19
|
footerText?: string;
|
|
20
20
|
asTooltip?: boolean;
|
|
21
21
|
hasActionsMenu?: boolean;
|
|
22
22
|
isActionsMenuVisible?: boolean;
|
|
23
23
|
hasFooter?: boolean;
|
|
24
24
|
}, never>;
|
|
25
|
-
export declare const AlertWrapper: import(
|
|
26
|
-
export declare const NonEditableWrapper: import(
|
|
27
|
-
export declare const DescriptionWrapper: import(
|
|
25
|
+
export declare const AlertWrapper: import('styled-components').StyledComponent<"div", any, {}, never>;
|
|
26
|
+
export declare const NonEditableWrapper: import('styled-components').StyledComponent<"div", any, {}, never>;
|
|
27
|
+
export declare const DescriptionWrapper: import('styled-components').StyledComponent<"div", any, {}, never>;
|
|
28
28
|
/**
|
|
29
29
|
* This component can be used to style container with popovers/tooltips to disable arrow.
|
|
30
30
|
*/
|
|
31
|
-
export declare const HidePopoverArrowWrapper: import(
|
|
31
|
+
export declare const HidePopoverArrowWrapper: import('styled-components').StyledComponent<"div", any, {}, never>;
|
|
32
32
|
/**
|
|
33
33
|
* Should be mounted in application where.
|
|
34
34
|
*/
|
|
35
|
-
export declare const GlobalCSSHidePopoverArrow: import(
|
|
36
|
-
export declare const ExtraInfo: import(
|
|
37
|
-
export declare const InformationCardActionsWrapper: import(
|
|
38
|
-
export declare const InformationCardPropertyListWrapper: import(
|
|
39
|
-
export declare const InformationCardPropertyItem: import(
|
|
40
|
-
export declare const InformationCardPropertyItemLabel: import(
|
|
41
|
-
export declare const InformationCardPropertyItemValue: import(
|
|
42
|
-
export declare const InformationCardSummaryWrapper: import(
|
|
43
|
-
export declare const InformationCardSummaryItem: import(
|
|
35
|
+
export declare const GlobalCSSHidePopoverArrow: import('styled-components').GlobalStyleComponent<{}, import('styled-components').DefaultTheme>;
|
|
36
|
+
export declare const ExtraInfo: import('styled-components').StyledComponent<"div", any, {}, never>;
|
|
37
|
+
export declare const InformationCardActionsWrapper: import('styled-components').StyledComponent<"div", any, {}, never>;
|
|
38
|
+
export declare const InformationCardPropertyListWrapper: import('styled-components').StyledComponent<"div", any, {}, never>;
|
|
39
|
+
export declare const InformationCardPropertyItem: import('styled-components').StyledComponent<"div", any, {}, never>;
|
|
40
|
+
export declare const InformationCardPropertyItemLabel: import('styled-components').StyledComponent<"span", any, {}, never>;
|
|
41
|
+
export declare const InformationCardPropertyItemValue: import('styled-components').StyledComponent<"span", any, {}, never>;
|
|
42
|
+
export declare const InformationCardSummaryWrapper: import('styled-components').StyledComponent<"div", any, {}, never>;
|
|
43
|
+
export declare const InformationCardSummaryItem: import('styled-components').StyledComponent<"div", any, {}, never>;
|
|
@@ -1,136 +1,135 @@
|
|
|
1
|
-
import styled, {
|
|
2
|
-
import { CardStyles } from
|
|
3
|
-
import CopyIcon from
|
|
4
|
-
import { RowWrapper } from
|
|
5
|
-
import DSDivider from
|
|
6
|
-
import { Container } from
|
|
7
|
-
import { StatusTag } from
|
|
8
|
-
import { macro } from
|
|
9
|
-
|
|
10
|
-
|
|
1
|
+
import styled, { css, createGlobalStyle } from "styled-components";
|
|
2
|
+
import { CardStyles } from "@synerise/ds-card";
|
|
3
|
+
import CopyIcon from "@synerise/ds-copy-icon";
|
|
4
|
+
import { RowWrapper } from "@synerise/ds-description/dist/Row/DescriptionRow.styles";
|
|
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";
|
|
8
|
+
import { macro } from "@synerise/ds-typography";
|
|
9
|
+
const INFOCARD_WIDTH = 350;
|
|
10
|
+
const Flex = /* @__PURE__ */ styled.div.withConfig({
|
|
11
11
|
displayName: "InformationCardstyles__Flex",
|
|
12
12
|
componentId: "sc-zxu5qa-0"
|
|
13
13
|
})(["display:flex;"]);
|
|
14
|
-
|
|
14
|
+
const Copyable = /* @__PURE__ */ styled(CopyIcon).withConfig({
|
|
15
15
|
displayName: "InformationCardstyles__Copyable",
|
|
16
16
|
componentId: "sc-zxu5qa-1"
|
|
17
17
|
})(["display:flex;align-items:center;height:20px;visibility:hidden;position:relative;margin-left:8px;opacity:0;"]);
|
|
18
|
-
|
|
18
|
+
const CopyWrapper = /* @__PURE__ */ styled(RowWrapper).withConfig({
|
|
19
19
|
displayName: "InformationCardstyles__CopyWrapper",
|
|
20
20
|
componentId: "sc-zxu5qa-2"
|
|
21
21
|
})(["&:hover{", "{visibility:visible;opacity:1;}}"], Copyable);
|
|
22
|
-
|
|
22
|
+
const Divider = /* @__PURE__ */ styled(DSDivider).withConfig({
|
|
23
23
|
displayName: "InformationCardstyles__Divider",
|
|
24
24
|
componentId: "sc-zxu5qa-3"
|
|
25
25
|
})(["&&{margin:8px 0;width:100%;}"]);
|
|
26
|
-
|
|
26
|
+
const BottomDivider = /* @__PURE__ */ styled(DSDivider).withConfig({
|
|
27
27
|
displayName: "InformationCardstyles__BottomDivider",
|
|
28
28
|
componentId: "sc-zxu5qa-4"
|
|
29
29
|
})(["&&{margin-left:16px;margin-right:16px;}"]);
|
|
30
|
-
|
|
30
|
+
const FooterWrapper = /* @__PURE__ */ styled(Flex).withConfig({
|
|
31
31
|
displayName: "InformationCardstyles__FooterWrapper",
|
|
32
32
|
componentId: "sc-zxu5qa-5"
|
|
33
|
-
})(["background:", ";border-top:solid 1px ", ";padding:8px;"],
|
|
34
|
-
|
|
35
|
-
}, function (props) {
|
|
36
|
-
return props.theme.palette['grey-100'];
|
|
37
|
-
});
|
|
38
|
-
export var ActionsMenuItems = styled.div.withConfig({
|
|
33
|
+
})(["background:", ";border-top:solid 1px ", ";padding:8px;"], (props) => props.theme.palette["grey-050"], (props) => props.theme.palette["grey-100"]);
|
|
34
|
+
const ActionsMenuItems = /* @__PURE__ */ styled.div.withConfig({
|
|
39
35
|
displayName: "InformationCardstyles__ActionsMenuItems",
|
|
40
36
|
componentId: "sc-zxu5qa-6"
|
|
41
37
|
})([""]);
|
|
42
|
-
|
|
38
|
+
const FlexGrow = /* @__PURE__ */ styled.div.withConfig({
|
|
43
39
|
displayName: "InformationCardstyles__FlexGrow",
|
|
44
40
|
componentId: "sc-zxu5qa-7"
|
|
45
|
-
})(["flex-grow:", ";"],
|
|
46
|
-
|
|
47
|
-
|
|
48
|
-
|
|
49
|
-
});
|
|
50
|
-
export var ActionButtonContainer = styled.div.withConfig({
|
|
41
|
+
})(["flex-grow:", ";"], ({
|
|
42
|
+
grow = 1
|
|
43
|
+
}) => grow);
|
|
44
|
+
const ActionButtonContainer = /* @__PURE__ */ styled.div.withConfig({
|
|
51
45
|
displayName: "InformationCardstyles__ActionButtonContainer",
|
|
52
46
|
componentId: "sc-zxu5qa-8"
|
|
53
47
|
})([""]);
|
|
54
|
-
|
|
48
|
+
const InfoCardSlidesWrapper = /* @__PURE__ */ styled.div.withConfig({
|
|
55
49
|
displayName: "InformationCardstyles__InfoCardSlidesWrapper",
|
|
56
50
|
componentId: "sc-zxu5qa-9"
|
|
57
51
|
})([""]);
|
|
58
|
-
|
|
52
|
+
const InfoCardSlide = /* @__PURE__ */ styled.div.withConfig({
|
|
59
53
|
displayName: "InformationCardstyles__InfoCardSlide",
|
|
60
54
|
componentId: "sc-zxu5qa-10"
|
|
61
|
-
})(["", ""],
|
|
62
|
-
|
|
63
|
-
});
|
|
64
|
-
export var InfoCardWrapper = styled.div.withConfig({
|
|
55
|
+
})(["", ""], (props) => props.height && `max-height: ${props.height}px;`);
|
|
56
|
+
const InfoCardWrapper = /* @__PURE__ */ styled.div.withConfig({
|
|
65
57
|
displayName: "InformationCardstyles__InfoCardWrapper",
|
|
66
58
|
componentId: "sc-zxu5qa-11"
|
|
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;}"],
|
|
68
|
-
|
|
69
|
-
}, INFOCARD_WIDTH, function (props) {
|
|
70
|
-
return props.theme.palette['grey-600'];
|
|
71
|
-
}, InfoCardSlidesWrapper, function (props) {
|
|
72
|
-
return props.hasActionsMenu ? INFOCARD_WIDTH * 2 : INFOCARD_WIDTH;
|
|
73
|
-
}, function (props) {
|
|
74
|
-
return props.isActionsMenuVisible ? "-" + INFOCARD_WIDTH + "px" : '0';
|
|
75
|
-
}, InfoCardSlide, INFOCARD_WIDTH, function (props) {
|
|
76
|
-
return props.asTooltip ? 'unset' : '0 16px 32px 0 rgba(35, 41, 54, 0.1)';
|
|
77
|
-
}, CardStyles.Card.Container, function (props) {
|
|
78
|
-
return !props.hasFooter && css(["padding-bottom:8px;margin-bottom:1px;"]);
|
|
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);
|
|
80
|
-
export var AlertWrapper = styled.div.withConfig({
|
|
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;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;}"], (props) => props.asTooltip ? "0" : "8px", INFOCARD_WIDTH, (props) => props.theme.palette["grey-600"], InfoCardSlidesWrapper, (props) => props.hasActionsMenu ? INFOCARD_WIDTH * 2 : INFOCARD_WIDTH, (props) => props.isActionsMenuVisible ? `-${INFOCARD_WIDTH}px` : "0", InfoCardSlide, INFOCARD_WIDTH, (props) => props.asTooltip ? "unset" : "0 16px 32px 0 rgba(35, 41, 54, 0.1)", CardStyles.Card.Container, (props) => !props.hasFooter && css(["padding-bottom:8px;margin-bottom:1px;"]), 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);
|
|
60
|
+
const AlertWrapper = /* @__PURE__ */ styled.div.withConfig({
|
|
81
61
|
displayName: "InformationCardstyles__AlertWrapper",
|
|
82
62
|
componentId: "sc-zxu5qa-12"
|
|
83
63
|
})(["padding-bottom:8px;:empty{display:none;}"]);
|
|
84
|
-
|
|
64
|
+
const NonEditableWrapper = /* @__PURE__ */ styled.div.withConfig({
|
|
85
65
|
displayName: "InformationCardstyles__NonEditableWrapper",
|
|
86
66
|
componentId: "sc-zxu5qa-13"
|
|
87
67
|
})(["padding-bottom:8px;:empty{display:none;}"]);
|
|
88
|
-
|
|
68
|
+
const DescriptionWrapper = /* @__PURE__ */ styled.div.withConfig({
|
|
89
69
|
displayName: "InformationCardstyles__DescriptionWrapper",
|
|
90
70
|
componentId: "sc-zxu5qa-14"
|
|
91
71
|
})(["padding:0 16px;"]);
|
|
92
|
-
|
|
93
|
-
/**
|
|
94
|
-
* This component can be used to style container with popovers/tooltips to disable arrow.
|
|
95
|
-
*/
|
|
96
|
-
export var HidePopoverArrowWrapper = styled.div.withConfig({
|
|
72
|
+
const HidePopoverArrowWrapper = /* @__PURE__ */ styled.div.withConfig({
|
|
97
73
|
displayName: "InformationCardstyles__HidePopoverArrowWrapper",
|
|
98
74
|
componentId: "sc-zxu5qa-15"
|
|
99
75
|
})([".ant-popover-arrow-content,.ant-tooltip-arrow-content{display:none;}"]);
|
|
100
|
-
|
|
101
|
-
|
|
102
|
-
* Should be mounted in application where.
|
|
103
|
-
*/
|
|
104
|
-
export var GlobalCSSHidePopoverArrow = createGlobalStyle([".ant-popover-arrow-content,.ant-tooltip-arrow-content{display:none;}"]);
|
|
105
|
-
export var ExtraInfo = styled.div.withConfig({
|
|
76
|
+
const GlobalCSSHidePopoverArrow = /* @__PURE__ */ createGlobalStyle([".ant-popover-arrow-content,.ant-tooltip-arrow-content{display:none;}"]);
|
|
77
|
+
const ExtraInfo = /* @__PURE__ */ styled.div.withConfig({
|
|
106
78
|
displayName: "InformationCardstyles__ExtraInfo",
|
|
107
79
|
componentId: "sc-zxu5qa-16"
|
|
108
80
|
})(["margin-bottom:1px;"]);
|
|
109
|
-
|
|
81
|
+
const InformationCardActionsWrapper = /* @__PURE__ */ styled.div.withConfig({
|
|
110
82
|
displayName: "InformationCardstyles__InformationCardActionsWrapper",
|
|
111
83
|
componentId: "sc-zxu5qa-17"
|
|
112
84
|
})(["padding:8px;"]);
|
|
113
|
-
|
|
85
|
+
const InformationCardPropertyListWrapper = /* @__PURE__ */ styled.div.withConfig({
|
|
114
86
|
displayName: "InformationCardstyles__InformationCardPropertyListWrapper",
|
|
115
87
|
componentId: "sc-zxu5qa-18"
|
|
116
88
|
})(["display:flex;flex-direction:column;padding:0 16px 8px;gap:8px;", "{padding:0;}", "{margin:0;}"], Container, StatusTag);
|
|
117
|
-
|
|
89
|
+
const InformationCardPropertyItem = /* @__PURE__ */ styled.div.withConfig({
|
|
118
90
|
displayName: "InformationCardstyles__InformationCardPropertyItem",
|
|
119
91
|
componentId: "sc-zxu5qa-19"
|
|
120
92
|
})(["display:flex;align-items:center;flex-wrap:wrap;column-gap:8px;row-gap:6px;"]);
|
|
121
|
-
|
|
93
|
+
const InformationCardPropertyItemLabel = /* @__PURE__ */ styled.span.withConfig({
|
|
122
94
|
displayName: "InformationCardstyles__InformationCardPropertyItemLabel",
|
|
123
95
|
componentId: "sc-zxu5qa-20"
|
|
124
96
|
})(["", ""], macro.small);
|
|
125
|
-
|
|
97
|
+
const InformationCardPropertyItemValue = /* @__PURE__ */ styled.span.withConfig({
|
|
126
98
|
displayName: "InformationCardstyles__InformationCardPropertyItemValue",
|
|
127
99
|
componentId: "sc-zxu5qa-21"
|
|
128
100
|
})(["", " flex-grow:1;font-weight:500;"], macro.small);
|
|
129
|
-
|
|
101
|
+
const InformationCardSummaryWrapper = /* @__PURE__ */ styled(Flex).withConfig({
|
|
130
102
|
displayName: "InformationCardstyles__InformationCardSummaryWrapper",
|
|
131
103
|
componentId: "sc-zxu5qa-22"
|
|
132
104
|
})(["margin:0 16px;padding-bottom:8px;gap:0 4px;flex-wrap:wrap;"]);
|
|
133
|
-
|
|
105
|
+
const InformationCardSummaryItem = /* @__PURE__ */ styled(Flex).withConfig({
|
|
134
106
|
displayName: "InformationCardstyles__InformationCardSummaryItem",
|
|
135
107
|
componentId: "sc-zxu5qa-23"
|
|
136
|
-
})(["font-weight:500;align-items:center;gap:4px;"]);
|
|
108
|
+
})(["font-weight:500;align-items:center;gap:4px;"]);
|
|
109
|
+
export {
|
|
110
|
+
ActionButtonContainer,
|
|
111
|
+
ActionsMenuItems,
|
|
112
|
+
AlertWrapper,
|
|
113
|
+
BottomDivider,
|
|
114
|
+
CopyWrapper,
|
|
115
|
+
Copyable,
|
|
116
|
+
DescriptionWrapper,
|
|
117
|
+
Divider,
|
|
118
|
+
ExtraInfo,
|
|
119
|
+
Flex,
|
|
120
|
+
FlexGrow,
|
|
121
|
+
FooterWrapper,
|
|
122
|
+
GlobalCSSHidePopoverArrow,
|
|
123
|
+
HidePopoverArrowWrapper,
|
|
124
|
+
InfoCardSlide,
|
|
125
|
+
InfoCardSlidesWrapper,
|
|
126
|
+
InfoCardWrapper,
|
|
127
|
+
InformationCardActionsWrapper,
|
|
128
|
+
InformationCardPropertyItem,
|
|
129
|
+
InformationCardPropertyItemLabel,
|
|
130
|
+
InformationCardPropertyItemValue,
|
|
131
|
+
InformationCardPropertyListWrapper,
|
|
132
|
+
InformationCardSummaryItem,
|
|
133
|
+
InformationCardSummaryWrapper,
|
|
134
|
+
NonEditableWrapper
|
|
135
|
+
};
|
|
@@ -1,11 +1,11 @@
|
|
|
1
|
-
import
|
|
2
|
-
import {
|
|
3
|
-
import {
|
|
4
|
-
import {
|
|
5
|
-
import
|
|
6
|
-
import {
|
|
7
|
-
import {
|
|
8
|
-
import {
|
|
1
|
+
import { ReactNode } from 'react';
|
|
2
|
+
import { Color, Size } from '@synerise/ds-avatar/dist/Avatar.types';
|
|
3
|
+
import { IconProps } from '@synerise/ds-icon';
|
|
4
|
+
import { SubtleTextAreaProps } from '@synerise/ds-subtle-form/dist/Elements/TextArea/TextArea.types';
|
|
5
|
+
import { WithHTMLAttributes } from '@synerise/ds-utils';
|
|
6
|
+
import { InformationCardActionsProps } from './InformationCardActions/InformationCardActions.types';
|
|
7
|
+
import { InformationCardPropertyListProps } from './InformationCardPropertyList/InformationCardPropertyList.types';
|
|
8
|
+
import { InformationCardSummaryProps } from './InformationCardSummary/InformationCardSummary.types';
|
|
9
9
|
export type BadgeData = {
|
|
10
10
|
type?: string;
|
|
11
11
|
title?: string;
|
|
@@ -1 +1 @@
|
|
|
1
|
-
|
|
1
|
+
|
|
@@ -1,6 +1,6 @@
|
|
|
1
|
-
import React,
|
|
2
|
-
import {
|
|
3
|
-
import {
|
|
1
|
+
import { default as React, PropsWithChildren } from 'react';
|
|
2
|
+
import { InlineAlertType } from '@synerise/ds-alert/dist/InlineAlert/InlineAlert.types';
|
|
3
|
+
import { BadgeData } from './InformationCard.types';
|
|
4
4
|
export declare function buildInitialsBadge(name: string): React.JSX.Element;
|
|
5
5
|
export declare function buildExtraInfo(message: string, level?: InlineAlertType): React.JSX.Element;
|
|
6
6
|
export declare function getInitials(name: string): string;
|