@synerise/ds-metric-card 1.2.7 → 1.2.8

package/CHANGELOG.md

@@ -3,6 +3,12 @@
 All notable changes to this project will be documented in this file.
 See [Conventional Commits](https://conventionalcommits.org) for commit guidelines.
 
+## [1.2.8](https://github.com/Synerise/synerise-design/compare/@synerise/ds-metric-card@1.2.7...@synerise/ds-metric-card@1.2.8) (2026-02-26)
+
+### Bug Fixes
+
+- **metric-card:** updated logic for content display ([546cdf6](https://github.com/Synerise/synerise-design/commit/546cdf6abf4d16d37960171f0ee8b3a85772ba9a))
+
 ## [1.2.7](https://github.com/Synerise/synerise-design/compare/@synerise/ds-metric-card@1.2.6...@synerise/ds-metric-card@1.2.7) (2026-02-23)
 
 **Note:** Version bump only for package @synerise/ds-metric-card

package/dist/MetricCard.js

@@ -1,7 +1,7 @@
 var _excluded = ["title", "headerRightSide", "hoverValue", "displayValue", "tooltip", "tooltipConfig", "greyBackground", "isLoading", "errorMessage", "copyValue", "texts"];
 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); }
 function _objectWithoutPropertiesLoose(r, e) { if (null == r) return {}; var t = {}; for (var n in r) if ({}.hasOwnProperty.call(r, n)) { if (-1 !== e.indexOf(n)) continue; t[n] = r[n]; } return t; }
-import React from 'react';
+import React, { useMemo, useState } from 'react';
 import Icon, { InfoFillS } from '@synerise/ds-icon';
 import Tooltip from '@synerise/ds-tooltip';
 import { Text } from '@synerise/ds-typography';
@@ -21,13 +21,30 @@ var MetricCard = function MetricCard(_ref) {
     htmlAttributes = _objectWithoutPropertiesLoose(_ref, _excluded);
   var hasValue = Boolean(hoverValue) || Boolean(displayValue);
   var tooltipVisible = Boolean(tooltip || tooltipConfig);
-  var _React$useState = React.useState(false),
-    hover = _React$useState[0],
-    setHover = _React$useState[1];
-  var showSkeleton = isLoading && !hasValue && !errorMessage;
-  var showError = errorMessage && !hasValue && !isLoading;
-  var showContent = !showSkeleton && !showError;
+  var _useState = useState(false),
+    hover = _useState[0],
+    setHover = _useState[1];
+  var content = useMemo(function () {
+    if (isLoading) {
+      return /*#__PURE__*/React.createElement(S.MetricSkeleton, {
+        size: "S",
+        width: "M",
+        height: 32,
+        numberOfSkeletons: 1
+      });
+    }
+    return errorMessage ? /*#__PURE__*/React.createElement(S.MetricInlineAlert, {
+      type: "alert",
+      message: errorMessage
+    }) : /*#__PURE__*/React.createElement(S.MetricValue, {
+      ellipsis: {
+        tooltip: hoverValue || displayValue
+      }
+    }, /*#__PURE__*/React.createElement(S.WrapperFormattedNumber, null, displayValue), /*#__PURE__*/React.createElement(S.WrapperNumber, null, hoverValue || displayValue));
+  }, [displayValue, errorMessage, hoverValue, isLoading]);
   return /*#__PURE__*/React.createElement(S.MetricContainer, _extends({
+    p: "8px 8px 14px 24px",
+    radius: 3,
     greyBackground: greyBackground
   }, htmlAttributes), /*#__PURE__*/React.createElement(S.MetricHeaderBar, null, /*#__PURE__*/React.createElement(S.TitleWrapper, {
     header: Boolean(headerRightSide)
@@ -52,19 +69,7 @@ var MetricCard = function MetricCard(_ref) {
       return setHover(false);
     },
     copyable: hasValue
-  }, showSkeleton && /*#__PURE__*/React.createElement(S.MetricSkeleton, {
-    size: "S",
-    width: "M",
-    height: 32,
-    numberOfSkeletons: 1
-  }), showError && /*#__PURE__*/React.createElement(S.MetricInlineAlert, {
-    type: "alert",
-    message: errorMessage
-  }), showContent && /*#__PURE__*/React.createElement(S.MetricValue, {
-    ellipsis: {
-      tooltip: hoverValue || displayValue
-    }
-  }, /*#__PURE__*/React.createElement(S.WrapperFormattedNumber, null, displayValue), /*#__PURE__*/React.createElement(S.WrapperNumber, null, hoverValue || displayValue)), typeof copyValue === 'string' && hover && /*#__PURE__*/React.createElement(S.WrapperCopyIcon, null, /*#__PURE__*/React.createElement(S.CopyIcon, {
+  }, content, typeof copyValue === 'string' && hover && /*#__PURE__*/React.createElement(S.WrapperCopyIcon, null, /*#__PURE__*/React.createElement(S.CopyIcon, {
     copyValue: copyValue,
     texts: texts
   }))));

package/dist/MetricCard.styles.d.ts

@@ -1,8 +1,6 @@
 export declare const WrapperFormattedNumber: import("styled-components").StyledComponent<"div", any, {}, never>;
 export declare const WrapperNumber: import("styled-components").StyledComponent<"div", any, {}, never>;
-export declare const MetricContainer: import("styled-components").StyledComponent<"div", any, {
-    greyBackground?: boolean;
-}, never>;
+export declare const MetricContainer: import("styled-components").StyledComponent<import("react").ForwardRefExoticComponent<Omit<import("@synerise/ds-panel").PanelProps, "ref"> & import("react").RefAttributes<HTMLDivElement>>, any, {}, never>;
 export declare const CopyIcon: import("styled-components").StyledComponent<({ copyValue, texts, onMouseEnter, onMouseLeave, icon, placement, onCopy, onClick, ...rest }: import("@synerise/ds-copy-icon").CopyIconProps) => React.JSX.Element, any, {}, never>;
 export declare const MetricSkeleton: import("styled-components").StyledComponent<({ size, numberOfSkeletons, width, height, className, }: import("@synerise/ds-skeleton").SkeletonProps) => React.JSX.Element, any, {}, never>;
 export declare const MetricInlineAlert: import("styled-components").StyledComponent<({ className, type, message, withLink, withEmphasis, hoverButton, disabled, customIcon, ...rest }: import("@synerise/ds-inline-alert").InlineAlertProps) => React.JSX.Element, any, {}, never>;

package/dist/MetricCard.styles.js

@@ -1,6 +1,7 @@
 import styled, { css } from 'styled-components';
 import Copy from '@synerise/ds-copy-icon';
 import InlineAlert from '@synerise/ds-inline-alert';
+import Panel from '@synerise/ds-panel';
 import Skeleton from '@synerise/ds-skeleton';
 import { Text } from '@synerise/ds-typography';
 export var WrapperFormattedNumber = styled.div.withConfig({
@@ -11,14 +12,10 @@ export var WrapperNumber = styled.div.withConfig({
   displayName: "MetricCardstyles__WrapperNumber",
   componentId: "sc-1g748a8-1"
 })(["display:none;"]);
-export var MetricContainer = styled.div.withConfig({
+export var MetricContainer = styled(Panel).withConfig({
   displayName: "MetricCardstyles__MetricContainer",
   componentId: "sc-1g748a8-2"
-})(["display:flex;flex-direction:column;background-color:", ";padding:8px 8px 14px 24px;gap:2px;width:100%;border-radius:5px;", ";"], function (props) {
-  return props.theme.palette.white;
-}, function (props) {
-  return props.greyBackground ? "\n         box-shadow: 0 4px 12px 0 rgba(35, 41, 54, 0.04);" : "\n         box-shadow: 0 0 0 1px " + props.theme.palette['grey-200'];
-});
+})(["display:flex;flex-direction:column;gap:2px;width:100%;"]);
 export var CopyIcon = styled(Copy).withConfig({
   displayName: "MetricCardstyles__CopyIcon",
   componentId: "sc-1g748a8-3"

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@synerise/ds-metric-card",
-  "version": "1.2.7",
+  "version": "1.2.8",
   "description": "MetricCard UI Component for the Synerise Design System",
   "license": "ISC",
   "repository": "Synerise/synerise-design",
@@ -38,7 +38,8 @@
     "@synerise/ds-copy-icon": "^1.1.7",
     "@synerise/ds-icon": "^1.14.1",
     "@synerise/ds-inline-alert": "^1.1.13",
-    "@synerise/ds-skeleton": "^1.0.41",
+    "@synerise/ds-panel": "^1.2.1",
+    "@synerise/ds-skeleton": "^1.0.42",
     "@synerise/ds-tooltip": "^1.4.7",
     "@synerise/ds-typography": "^1.1.10"
   },
@@ -51,5 +52,5 @@
     "react-intl": ">=3.12.0 <= 6.8",
     "styled-components": "^5.3.3"
   },
-  "gitHead": "2997f77d657c1aed2fc39901d3e0b8f88b05cc53"
+  "gitHead": "4ffbd56e9bf6277c4507efeaf000b66b9bb09781"
 }