@synerise/ds-information-card 1.6.20 → 1.7.0

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 (12) hide show
  1. package/CHANGELOG.md +6 -0
  2. package/README.md +11 -2
  3. package/dist/InformationCard.d.ts +3 -2
  4. package/dist/InformationCard.js +7 -1
  5. package/dist/InformationCard.styles.d.ts +4 -0
  6. package/dist/InformationCard.styles.js +22 -2
  7. package/dist/InformationCard.types.d.ts +11 -3
  8. package/dist/InformationCardLoading/InformationCardLoading.d.ts +3 -0
  9. package/dist/InformationCardLoading/InformationCardLoading.js +19 -0
  10. package/dist/InformationCardLoading/InformationCardLoading.types.d.ts +3 -0
  11. package/dist/InformationCardLoading/InformationCardLoading.types.js +1 -0
  12. package/package.json +21 -21
package/CHANGELOG.md CHANGED
@@ -3,6 +3,12 @@
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.7.0](https://github.com/Synerise/synerise-design/compare/@synerise/ds-information-card@1.6.20...@synerise/ds-information-card@1.7.0) (2026-05-26)
7
+
8
+ ### Features
9
+
10
+ - **information-card:** add loading state with skeletons ([0e1fd72](https://github.com/Synerise/synerise-design/commit/0e1fd720ed372df57086b8efac496303daed68b7))
11
+
6
12
  ## [1.6.20](https://github.com/Synerise/synerise-design/compare/@synerise/ds-information-card@1.6.19...@synerise/ds-information-card@1.6.20) (2026-05-22)
7
13
 
8
14
  **Note:** Version bump only for package @synerise/ds-information-card
package/README.md CHANGED
@@ -40,7 +40,15 @@ import { InformationCardTooltip } from '@synerise/ds-information-card';
40
40
  Generally, components require being capable of rendering this and usually an additional effort is required to get them to support rendering.
41
41
  See text's menu item element `packages/components/menu/src/Elements/Item/Text/Text.tsx`.
42
42
 
43
- Note that `title` is a required prop; `subtitle` is optional. For just a single line of text consider using @synerise/ds-tooltip.
43
+ Note that `title` is required unless `isLoading` is `true`; `subtitle` is optional. For just a single line of text consider using @synerise/ds-tooltip.
44
+
45
+ ### Loading state
46
+
47
+ Pass `isLoading` to render a skeleton placeholder while data is being fetched. In this mode `title` is not required.
48
+
49
+ ```js
50
+ <InformationCard isLoading />
51
+ ```
44
52
 
45
53
  ### Usage with dropdown and other components
46
54
 
@@ -67,12 +75,13 @@ By default class is `ignore-click-outside` (so looking for `domElement.closest('
67
75
  | footerText | additional feedback info to the user, when set to null - footer is hidden | `ReactNode` &#124; `null` | - |
68
76
  | icon | icon (note this needs to be pure SVG icon, it relies on `buildBadgeIcon` helper) | `ReactNode` | - |
69
77
  | iconColor | icon color to be applied to `icon` element | `string` | - |
78
+ | isLoading | renders a skeleton placeholder instead of the card contents. When `true`, `title` is not required. | `boolean` | - |
70
79
  | notice | additional information shown between subtitle and description section. Can be used for warnings, errors, destructive actions, notices. See `buildExtraInfo` and alert `level` there. | `ReactNode` | - |
71
80
  | renderAdditionalDescription | Render prop for displaying additional content above footer | `() => ReactNode` | - |
72
81
  | renderBadge | Custom render prop for displaying. If set to `null` - badge won't be shown. | `Function` &#124; `null` | - |
73
82
  | renderFooter | render prop for rendering the bottom part of (by default section with a small text and an optional action button on the right) | `() => JSX.Element` | - |
74
83
  | subtitle | Second line. Optional. String values are copyable on click. | `ReactNode` | - |
75
- | title | Title of the information-card. Required. String values are copyable on click. | `ReactNode` | - |
84
+ | title | Title of the information-card. Required unless `isLoading` is `true`. String values are copyable on click. | `ReactNode` | - |
76
85
  | actionsMenu | Config for displaying "quick actions" - a button in footer that reveals a menu with links | `ActionsMenuProps` | - |
77
86
  | propertyListItems | an array of object properties to list, can also include dividers | `InformationCardPropertyListItem[]` | - |
78
87
  | summaryItems | An array of (label + icon + optional tooltip) summary items to display below properties | `InformationCardSummaryItem[]` | - |
package/dist/InformationCard.d.ts CHANGED
@@ -17,9 +17,10 @@ declare const InformationCard: React.ForwardRefExoticComponent<{
17
17
  notice?: React.ReactNode;
18
18
  renderBadge?: Function | null;
19
19
  subtitle?: React.ReactNode;
20
- title: React.ReactNode;
20
+ title?: React.ReactNode;
21
+ isLoading?: boolean;
21
22
  renderAdditionalDescription?: () => React.ReactNode;
22
23
  propertyListItems?: import('.').InformationCardPropertyListProps["items"];
23
24
  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
+ } & Omit<React.HTMLAttributes<HTMLDivElement>, "title" | "className" | "icon" | "footerText" | "asTooltip" | "actionButton" | "actionButtonCallback" | "actionButtonTooltipText" | "actionsMenu" | "avatarTooltipText" | "copyTooltip" | "copiedTooltip" | "descriptionConfig" | "renderFooter" | "iconColor" | "notice" | "renderBadge" | "subtitle" | "isLoading" | "renderAdditionalDescription" | "propertyListItems" | "summaryItems"> & import('@synerise/ds-utils').DataAttributes & React.RefAttributes<HTMLDivElement>>;
25
26
  export default InformationCard;
package/dist/InformationCard.js CHANGED
@@ -9,6 +9,7 @@ import { buildIconBadge } from "./InformationCard.utils.js";
9
9
  import { InformationCardActions } from "./InformationCardActions/InformationCardActions.js";
10
10
  import { InformationCardDescription } from "./InformationCardDescription/InformationCardDescription.js";
11
11
  import { InformationCardFooter } from "./InformationCardFooter/InformationCardFooter.js";
12
+ import { InformationCardLoading } from "./InformationCardLoading/InformationCardLoading.js";
12
13
  import { InformationCardPropertyList } from "./InformationCardPropertyList/InformationCardPropertyList.js";
13
14
  import { InformationCardSummary } from "./InformationCardSummary/InformationCardSummary.js";
14
15
  const InformationCard = forwardRef(({
@@ -33,6 +34,7 @@ const InformationCard = forwardRef(({
33
34
  renderAdditionalDescription,
34
35
  propertyListItems,
35
36
  summaryItems,
37
+ isLoading,
36
38
  ...props
37
39
  }, ref) => {
38
40
  const [isActionsMenuVisible, setIsActionsMenuVisible] = useState(false);
@@ -58,10 +60,14 @@ const InformationCard = forwardRef(({
58
60
  }
59
61
  });
60
62
  const showBottomDivider = !!(summaryItems && (propertyListItems || descriptionConfig || notice || renderAdditionalDescription));
63
+ const hasAnyFooter = !!(renderFooter || hasFooter);
64
+ if (isLoading) {
65
+ return /* @__PURE__ */ jsx(InfoCardWrapper, { "data-testid": "information-card", "data-popup-container": true, ref, "aria-label": "information card", "aria-busy": true, className: `ds-info-card ${className ?? ""}`, asTooltip, hasFooter: hasAnyFooter, ...props, children: /* @__PURE__ */ jsx(InfoCardSlidesWrapper, { children: /* @__PURE__ */ jsx(InfoCardSlide, { children: /* @__PURE__ */ jsx(InformationCardLoading, { hasFooter: hasAnyFooter }) }) }) });
66
+ }
61
67
  return /* @__PURE__ */ jsx(FloatingDelayGroup, { delay: {
62
68
  open: HOVER_OPEN_DELAY,
63
69
  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: [
70
+ }, 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: hasAnyFooter, ...props, children: /* @__PURE__ */ jsxs(InfoCardSlidesWrapper, { children: [
65
71
  /* @__PURE__ */ jsx(InfoCardSlide, { ref: mainSlideRef, children: /* @__PURE__ */ jsxs(Card, { background: "white", renderBadge: () => {
66
72
  return renderBadge !== null && /* @__PURE__ */ jsx("div", { style: {
67
73
  marginRight: "16px"
package/dist/InformationCard.styles.d.ts CHANGED
@@ -39,5 +39,9 @@ export declare const InformationCardPropertyListWrapper: import('styled-componen
39
39
  export declare const InformationCardPropertyItem: import('styled-components').StyledComponent<"div", any, {}, never>;
40
40
  export declare const InformationCardPropertyItemLabel: import('styled-components').StyledComponent<"span", any, {}, never>;
41
41
  export declare const InformationCardPropertyItemValue: import('styled-components').StyledComponent<"span", any, {}, never>;
42
+ export declare const LoadingBody: import('styled-components').StyledComponent<"div", any, {}, never>;
43
+ export declare const LoadingHeader: import('styled-components').StyledComponent<"div", any, {}, never>;
44
+ export declare const LoadingTitle: import('styled-components').StyledComponent<"div", any, {}, never>;
45
+ export declare const LoadingFooter: import('styled-components').StyledComponent<"div", any, {}, never>;
42
46
  export declare const InformationCardSummaryWrapper: import('styled-components').StyledComponent<"div", any, {}, never>;
43
47
  export declare const InformationCardSummaryItem: import('styled-components').StyledComponent<"div", any, {}, never>;
package/dist/InformationCard.styles.js CHANGED
@@ -98,13 +98,29 @@ const InformationCardPropertyItemValue = /* @__PURE__ */ styled.span.withConfig(
98
98
  displayName: "InformationCardstyles__InformationCardPropertyItemValue",
99
99
  componentId: "sc-zxu5qa-21"
100
100
  })(["", " flex-grow:1;font-weight:500;"], macro.small);
101
+ const LoadingBody = /* @__PURE__ */ styled.div.withConfig({
102
+ displayName: "InformationCardstyles__LoadingBody",
103
+ componentId: "sc-zxu5qa-22"
104
+ })(["display:flex;flex-direction:column;gap:16px;padding:16px;", "{padding:0;}"], Container);
105
+ const LoadingHeader = /* @__PURE__ */ styled.div.withConfig({
106
+ displayName: "InformationCardstyles__LoadingHeader",
107
+ componentId: "sc-zxu5qa-23"
108
+ })(["display:flex;align-items:center;gap:16px;"]);
109
+ const LoadingTitle = /* @__PURE__ */ styled.div.withConfig({
110
+ displayName: "InformationCardstyles__LoadingTitle",
111
+ componentId: "sc-zxu5qa-24"
112
+ })(["flex:1 0 0;min-width:0;"]);
113
+ const LoadingFooter = /* @__PURE__ */ styled(FooterWrapper).withConfig({
114
+ displayName: "InformationCardstyles__LoadingFooter",
115
+ componentId: "sc-zxu5qa-25"
116
+ })(["min-height:48px;"]);
101
117
  const InformationCardSummaryWrapper = /* @__PURE__ */ styled(Flex).withConfig({
102
118
  displayName: "InformationCardstyles__InformationCardSummaryWrapper",
103
- componentId: "sc-zxu5qa-22"
119
+ componentId: "sc-zxu5qa-26"
104
120
  })(["margin:0 16px;padding-bottom:8px;gap:0 4px;flex-wrap:wrap;"]);
105
121
  const InformationCardSummaryItem = /* @__PURE__ */ styled(Flex).withConfig({
106
122
  displayName: "InformationCardstyles__InformationCardSummaryItem",
107
- componentId: "sc-zxu5qa-23"
123
+ componentId: "sc-zxu5qa-27"
108
124
  })(["font-weight:500;align-items:center;gap:4px;"]);
109
125
  export {
110
126
  ActionButtonContainer,
@@ -131,5 +147,9 @@ export {
131
147
  InformationCardPropertyListWrapper,
132
148
  InformationCardSummaryItem,
133
149
  InformationCardSummaryWrapper,
150
+ LoadingBody,
151
+ LoadingFooter,
152
+ LoadingHeader,
153
+ LoadingTitle,
134
154
  NonEditableWrapper
135
155
  };
package/dist/InformationCard.types.d.ts CHANGED
@@ -33,7 +33,7 @@ export type InformationCardProps = WithHTMLAttributes<HTMLDivElement, {
33
33
  */
34
34
  actionsMenu?: Omit<InformationCardActionsProps, 'onHeaderClick' | 'maxHeight'>;
35
35
  /**
36
- * adjusts the styles to be displayed as a tooltip
36
+ * adjusts the styles to be displayed inside a Tooltip component using renderTooltip prop (no outer shadow)
37
37
  */
38
38
  asTooltip?: boolean;
39
39
  /**
@@ -85,12 +85,20 @@ export type InformationCardProps = WithHTMLAttributes<HTMLDivElement, {
85
85
  subtitle?: ReactNode;
86
86
  /**
87
87
  * Title of the information-card. If you pass a string it will be copyable on click, with a copy icon visible on hover.
88
+ * Optional when `isLoading` is true.
88
89
  */
89
- title: ReactNode;
90
+ title?: ReactNode;
90
91
  /**
91
- * list of object parameters to display
92
+ * Renders a loading state with skeleton placeholders instead of the card contents.
92
93
  */
94
+ isLoading?: boolean;
93
95
  renderAdditionalDescription?: () => ReactNode;
96
+ /**
97
+ * list of object parameters to display (multiple rows with label + description)
98
+ */
94
99
  propertyListItems?: InformationCardPropertyListProps['items'];
100
+ /**
101
+ * list of object summary to display (single row with icon + label. for each item above footer)
102
+ */
95
103
  summaryItems?: InformationCardSummaryProps['items'];
96
104
  }>;
package/dist/InformationCardLoading/InformationCardLoading.d.ts ADDED
@@ -0,0 +1,3 @@
1
+ import { default as React } from 'react';
2
+ import { InformationCardLoadingProps } from './InformationCardLoading.types';
3
+ export declare const InformationCardLoading: ({ hasFooter, }: InformationCardLoadingProps) => React.JSX.Element;
package/dist/InformationCardLoading/InformationCardLoading.js ADDED
@@ -0,0 +1,19 @@
1
+ import { jsxs, Fragment, jsx } from "react/jsx-runtime";
2
+ import Skeleton, { SkeletonAvatar } from "@synerise/ds-skeleton";
3
+ import { LoadingBody, LoadingHeader, LoadingTitle, LoadingFooter } from "../InformationCard.styles.js";
4
+ const InformationCardLoading = ({
5
+ hasFooter
6
+ }) => /* @__PURE__ */ jsxs(Fragment, { children: [
7
+ /* @__PURE__ */ jsxs(LoadingBody, { "data-testid": "information-card-loading", children: [
8
+ /* @__PURE__ */ jsxs(LoadingHeader, { children: [
9
+ /* @__PURE__ */ jsx(SkeletonAvatar, { size: "M", shape: "square" }),
10
+ /* @__PURE__ */ jsx(LoadingTitle, { children: /* @__PURE__ */ jsx(Skeleton, { numberOfSkeletons: 1, height: 16 }) })
11
+ ] }),
12
+ /* @__PURE__ */ jsx(Skeleton, { numberOfSkeletons: 1, height: 16 }),
13
+ /* @__PURE__ */ jsx(Skeleton, { numberOfSkeletons: 1, height: 16 })
14
+ ] }),
15
+ hasFooter && /* @__PURE__ */ jsx(LoadingFooter, { "data-testid": "information-card-loading-footer" })
16
+ ] });
17
+ export {
18
+ InformationCardLoading
19
+ };
package/dist/InformationCardLoading/InformationCardLoading.types.d.ts ADDED
@@ -0,0 +1,3 @@
1
+ export type InformationCardLoadingProps = {
2
+ hasFooter?: boolean;
3
+ };
package/package.json CHANGED
@@ -1,6 +1,6 @@
1
1
  {
2
2
  "name": "@synerise/ds-information-card",
3
- "version": "1.6.20",
3
+ "version": "1.7.0",
4
4
  "description": "InformationCard UI Component for the Synerise Design System",
5
5
  "license": "ISC",
6
6
  "repository": "Synerise/synerise-design",
@@ -43,25 +43,25 @@
43
43
  "types": "dist/index.d.ts",
44
44
  "dependencies": {
45
45
  "@floating-ui/react": "^0.27.16",
46
- "@synerise/ds-alert": "^1.1.57",
47
- "@synerise/ds-avatar": "^1.3.15",
48
- "@synerise/ds-badge": "^1.0.54",
49
- "@synerise/ds-button": "^1.5.30",
50
- "@synerise/ds-card": "^1.3.13",
51
- "@synerise/ds-copy-icon": "^1.2.12",
52
- "@synerise/ds-description": "^1.3.12",
53
- "@synerise/ds-divider": "^1.3.12",
54
- "@synerise/ds-dropdown": "^1.3.13",
55
- "@synerise/ds-icon": "^1.18.1",
56
- "@synerise/ds-menu": "^1.4.26",
57
- "@synerise/ds-popover": "^1.6.0",
58
- "@synerise/ds-scrollbar": "^1.4.0",
59
- "@synerise/ds-skeleton": "^1.0.55",
60
- "@synerise/ds-status": "^1.3.28",
61
- "@synerise/ds-subtle-form": "^1.2.1",
62
- "@synerise/ds-tooltip": "^1.5.0",
63
- "@synerise/ds-typography": "^1.1.23",
64
- "@synerise/ds-utils": "^1.9.0",
46
+ "@synerise/ds-alert": "^1.1.58",
47
+ "@synerise/ds-avatar": "^1.3.16",
48
+ "@synerise/ds-badge": "^1.0.55",
49
+ "@synerise/ds-button": "^1.5.31",
50
+ "@synerise/ds-card": "^1.3.14",
51
+ "@synerise/ds-copy-icon": "^1.2.13",
52
+ "@synerise/ds-description": "^1.3.13",
53
+ "@synerise/ds-divider": "^1.3.13",
54
+ "@synerise/ds-dropdown": "^1.3.14",
55
+ "@synerise/ds-icon": "^1.18.2",
56
+ "@synerise/ds-menu": "^1.4.27",
57
+ "@synerise/ds-popover": "^1.6.1",
58
+ "@synerise/ds-scrollbar": "^1.4.1",
59
+ "@synerise/ds-skeleton": "^1.0.56",
60
+ "@synerise/ds-status": "^1.3.29",
61
+ "@synerise/ds-subtle-form": "^1.2.2",
62
+ "@synerise/ds-tooltip": "^1.5.1",
63
+ "@synerise/ds-typography": "^1.1.24",
64
+ "@synerise/ds-utils": "^1.9.1",
65
65
  "uuid": "^8.3.2"
66
66
  },
67
67
  "peerDependencies": {
@@ -71,5 +71,5 @@
71
71
  "styled-components": "^5.3.3",
72
72
  "vitest": "4"
73
73
  },
74
- "gitHead": "f257f56d8991010593efd5ea9915335e813671a6"
74
+ "gitHead": "be94b7e7ec28b566a3279e24248e610d87d8c0a5"
75
75
  }