@synerise/ds-metric-card 1.1.0

package/CHANGELOG.md

@@ -0,0 +1,10 @@
+# Change Log
+
+All notable changes to this project will be documented in this file.
+See [Conventional Commits](https://conventionalcommits.org) for commit guidelines.
+
+# 1.1.0 (2026-01-07)
+
+### Features
+
+- **metric-card:** new component ([5fe50a7](https://github.com/Synerise/synerise-design/commit/5fe50a7b87592990d6e4be1e04599fce350a91fd))

package/LICENSE.md

@@ -0,0 +1,21 @@
+MIT License
+
+Copyright (c) 2019 Synerise
+
+Permission is hereby granted, free of charge, to any person obtaining a copy
+of this software and associated documentation files (the "Software"), to deal
+in the Software without restriction, including without limitation the rights
+to use, copy, modify, merge, publish, distribute, sublicense, and/or sell
+copies of the Software, and to permit persons to whom the Software is
+furnished to do so, subject to the following conditions:
+
+The above copyright notice and this permission notice shall be included in all
+copies or substantial portions of the Software.
+
+THE SOFTWARE IS PROVIDED "AS IS", WITHOUT WARRANTY OF ANY KIND, EXPRESS OR
+IMPLIED, INCLUDING BUT NOT LIMITED TO THE WARRANTIES OF MERCHANTABILITY,
+FITNESS FOR A PARTICULAR PURPOSE AND NONINFRINGEMENT. IN NO EVENT SHALL THE
+AUTHORS OR COPYRIGHT HOLDERS BE LIABLE FOR ANY CLAIM, DAMAGES OR OTHER
+LIABILITY, WHETHER IN AN ACTION OF CONTRACT, TORT OR OTHERWISE, ARISING FROM,
+OUT OF OR IN CONNECTION WITH THE SOFTWARE OR THE USE OR OTHER DEALINGS IN THE
+SOFTWARE.

package/README.md

@@ -0,0 +1,41 @@
+---
+id: metric-card
+title: MetricCard
+---
+
+MetricCard UI Component
+
+## Installation
+```
+npm i @synerise/ds-metric-card
+or
+yarn add @synerise/ds-metric-card
+```
+
+## Usage
+```
+import MetricCard from '@synerise/ds-metric-card'
+
+<MetricCard />
+
+```
+
+## Demo
+
+<iframe src="/storybook-static/iframe.html?id=components-metric-card--default"></iframe>
+
+## API
+
+ Property          | Description                                            | Type                     | Default |
+| ---------------- | ------------------------------------------------------ | ------------------------ | ------- |
+| title            | title of metric                                        | ReactNode                | -       |
+| headerRightSide  | custom component to render                             | ReactNode                | -       |
+| hoverValue       | Value of the metric on hover                           | ReactNode                | -       |
+| displayValue     | value of metric with display                           | ReactNode                | -       |
+| tooltip          | render text of tooltip                                 | ReactNode                | -       |
+| tooltipConfig    | all props for title tooltip                            | TooltipProps             | -       |
+| greyBackground   | set with grey background                               | boolean                  | -       |
+| isLoading        | render skeleton                                        | boolean                  | -       |
+| errorMessage     | render inlineAlert with error text                     | ReactNode                | -       |
+| copyValue        | Value to copy after click on icon                      | string                   | -       |
+| texts            | Copy icon texts                                        | CopyTooltipTexts         | -       |

package/dist/MetricCard.d.ts

@@ -0,0 +1,4 @@
+import React from 'react';
+import type { MetricCardProps } from './MetricCard.types';
+declare const MetricCard: ({ title, headerRightSide, hoverValue, displayValue, tooltip, tooltipConfig, greyBackground, isLoading, errorMessage, copyValue, texts, ...htmlAttributes }: MetricCardProps) => React.JSX.Element;
+export default MetricCard;

package/dist/MetricCard.js

@@ -0,0 +1,72 @@
+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 Icon, { InfoFillS } from '@synerise/ds-icon';
+import Tooltip from '@synerise/ds-tooltip';
+import { Text } from '@synerise/ds-typography';
+import * as S from './MetricCard.styles';
+var MetricCard = function MetricCard(_ref) {
+  var title = _ref.title,
+    headerRightSide = _ref.headerRightSide,
+    hoverValue = _ref.hoverValue,
+    displayValue = _ref.displayValue,
+    tooltip = _ref.tooltip,
+    tooltipConfig = _ref.tooltipConfig,
+    greyBackground = _ref.greyBackground,
+    isLoading = _ref.isLoading,
+    errorMessage = _ref.errorMessage,
+    copyValue = _ref.copyValue,
+    texts = _ref.texts,
+    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;
+  return /*#__PURE__*/React.createElement(S.MetricContainer, _extends({
+    greyBackground: greyBackground
+  }, htmlAttributes), /*#__PURE__*/React.createElement(S.MetricHeaderBar, null, /*#__PURE__*/React.createElement(S.TitleWrapper, {
+    header: Boolean(headerRightSide)
+  }, /*#__PURE__*/React.createElement(Text, {
+    ellipsis: {
+      tooltip: title
+    }
+  }, title), tooltipVisible && /*#__PURE__*/React.createElement(Tooltip, _extends({
+    title: tooltip,
+    placement: "top",
+    trigger: "hover"
+  }, tooltipConfig), /*#__PURE__*/React.createElement(S.IconWrapper, null, /*#__PURE__*/React.createElement(Icon, {
+    size: 24,
+    component: /*#__PURE__*/React.createElement(InfoFillS, null)
+  })))), headerRightSide && /*#__PURE__*/React.createElement(S.HeaderRightSide, null, headerRightSide)), /*#__PURE__*/React.createElement(S.MetricContent, {
+    "data-testid": "ds-metric-card",
+    className: hover ? 'hovered' : '',
+    onMouseEnter: function onMouseEnter() {
+      return setHover(true);
+    },
+    onMouseLeave: function onMouseLeave() {
+      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, {
+    copyValue: copyValue,
+    texts: texts
+  }))));
+};
+export default MetricCard;

package/dist/MetricCard.styles.d.ts

@@ -0,0 +1,24 @@
+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 CopyIcon: import("styled-components").StyledComponent<({ copyValue, texts, onMouseEnter, onMouseLeave, icon, placement, onCopy, ...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>;
+export declare const MetricContent: import("styled-components").StyledComponent<"div", any, {
+    copyable?: boolean;
+}, never>;
+export declare const MetricValue: import("styled-components").StyledComponent<({ size, className, children, ellipsis, }: {
+    size?: import("@synerise/ds-typography").TextSize;
+    ellipsis?: import("@synerise/ds-typography/dist/Ellipsis").EllipsisProps;
+    children?: import("react").ReactNode;
+    className?: string;
+}) => React.JSX.Element, any, {}, never>;
+export declare const MetricHeaderBar: import("styled-components").StyledComponent<"div", any, {}, never>;
+export declare const TitleWrapper: import("styled-components").StyledComponent<"div", any, {
+    header?: boolean;
+}, never>;
+export declare const IconWrapper: import("styled-components").StyledComponent<"span", any, {}, never>;
+export declare const HeaderRightSide: import("styled-components").StyledComponent<"div", any, {}, never>;
+export declare const WrapperCopyIcon: import("styled-components").StyledComponent<"div", any, {}, never>;

package/dist/MetricCard.styles.js

@@ -0,0 +1,67 @@
+import styled, { css } from 'styled-components';
+import Copy from '@synerise/ds-copy-icon';
+import InlineAlert from '@synerise/ds-inline-alert';
+import Skeleton from '@synerise/ds-skeleton';
+import { Text } from '@synerise/ds-typography';
+export var WrapperFormattedNumber = styled.div.withConfig({
+  displayName: "MetricCardstyles__WrapperFormattedNumber",
+  componentId: "sc-1g748a8-0"
+})(["display:inline;"]);
+export var WrapperNumber = styled.div.withConfig({
+  displayName: "MetricCardstyles__WrapperNumber",
+  componentId: "sc-1g748a8-1"
+})(["display:none;"]);
+export var MetricContainer = styled.div.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'];
+});
+export var CopyIcon = styled(Copy).withConfig({
+  displayName: "MetricCardstyles__CopyIcon",
+  componentId: "sc-1g748a8-3"
+})(["margin-left:8px;visibility:hidden;opacity:0;transition:opacity 0.15s ease;"]);
+export var MetricSkeleton = styled(Skeleton).withConfig({
+  displayName: "MetricCardstyles__MetricSkeleton",
+  componentId: "sc-1g748a8-4"
+})(["padding:0 0 2px;width:50%;"]);
+export var MetricInlineAlert = styled(InlineAlert).withConfig({
+  displayName: "MetricCardstyles__MetricInlineAlert",
+  componentId: "sc-1g748a8-5"
+})(["padding:8px 0 2px;"]);
+export var MetricContent = styled.div.withConfig({
+  displayName: "MetricCardstyles__MetricContent",
+  componentId: "sc-1g748a8-6"
+})(["flex:1;min-width:0;display:flex;align-items:center;overflow:hidden;margin:0 4px 2px 0;", "{", "}&.hovered{", "{visibility:visible;opacity:1;}", "{display:none;}", "{display:inline;}}"], CopyIcon, function (props) {
+  return props.copyable && css(["cursor:pointer;"]);
+}, CopyIcon, WrapperFormattedNumber, WrapperNumber);
+export var MetricValue = styled(Text).withConfig({
+  displayName: "MetricCardstyles__MetricValue",
+  componentId: "sc-1g748a8-7"
+})(["color:", ";font-size:32px;line-height:100%;padding-bottom:2px;align-items:center;cursor:pointer;font-weight:500;justify-content:start;"], function (props) {
+  return props.theme.palette['grey-800'];
+});
+export var MetricHeaderBar = styled.div.withConfig({
+  displayName: "MetricCardstyles__MetricHeaderBar",
+  componentId: "sc-1g748a8-8"
+})(["display:flex;align-items:center;justify-content:space-between;"]);
+export var TitleWrapper = styled.div.withConfig({
+  displayName: "MetricCardstyles__TitleWrapper",
+  componentId: "sc-1g748a8-9"
+})(["flex:1;min-width:0;display:flex;align-items:center;min-height:32px;"]);
+export var IconWrapper = styled.span.withConfig({
+  displayName: "MetricCardstyles__IconWrapper",
+  componentId: "sc-1g748a8-10"
+})(["display:inline-block;color:", ";cursor:pointer;"], function (props) {
+  return props.theme.palette['grey-400'];
+});
+export var HeaderRightSide = styled.div.withConfig({
+  displayName: "MetricCardstyles__HeaderRightSide",
+  componentId: "sc-1g748a8-11"
+})(["flex-shrink:0;display:flex;align-items:center;"]);
+export var WrapperCopyIcon = styled.div.withConfig({
+  displayName: "MetricCardstyles__WrapperCopyIcon",
+  componentId: "sc-1g748a8-12"
+})(["flex-shrink:0;display:flex;align-items:center;"]);

package/dist/MetricCard.types.d.ts

@@ -0,0 +1,20 @@
+import { type ReactNode } from 'react';
+import { type TooltipProps } from '@synerise/ds-tooltip';
+import { type WithHTMLAttributes } from '@synerise/ds-utils';
+export type MetricCardProps = WithHTMLAttributes<HTMLDivElement, {
+    title?: ReactNode;
+    headerRightSide?: ReactNode;
+    hoverValue?: ReactNode;
+    displayValue?: ReactNode;
+    tooltip?: ReactNode;
+    tooltipConfig?: TooltipProps;
+    greyBackground?: boolean;
+    isLoading?: boolean;
+    errorMessage?: ReactNode;
+    copyValue?: string;
+    texts?: CopyTexts;
+}>;
+export type CopyTexts = {
+    copyTooltip?: ReactNode;
+    copiedTooltip?: ReactNode;
+};

package/dist/MetricCard.types.js

@@ -0,0 +1 @@
+export {};

package/dist/index.d.ts

@@ -0,0 +1,2 @@
+export { default } from './MetricCard';
+export type { MetricCardProps } from './MetricCard.types';

package/dist/index.js

@@ -0,0 +1 @@
+export { default } from './MetricCard';

package/dist/modules.d.js

@@ -0,0 +1 @@
+import '@testing-library/jest-dom';

package/package.json

@@ -0,0 +1,55 @@
+{
+  "name": "@synerise/ds-metric-card",
+  "version": "1.1.0",
+  "description": "MetricCard UI Component for the Synerise Design System",
+  "license": "ISC",
+  "repository": "Synerise/synerise-design",
+  "main": "dist/index.js",
+  "files": [
+    "/dist",
+    "CHANGELOG.md",
+    "README.md",
+    "package.json",
+    "LICENSE.md"
+  ],
+  "publishConfig": {
+    "access": "public"
+  },
+  "scripts": {
+    "build": "npm run build:js && npm run build:css && npm run defs",
+    "build:css": "node ../../../scripts/style/less.js",
+    "build:js": "babel --delete-dir-on-start --root-mode upward src --out-dir dist --extensions '.js,.ts,.tsx'",
+    "build:watch": "npm run build:js -- --watch",
+    "defs": "tsc --declaration --outDir dist/ --emitDeclarationOnly",
+    "prepublish": "npm run build",
+    "types": "tsc --noEmit",
+    "pack:ci": "npm pack --pack-destination ../../storybook/storybook-static/static",
+    "test": "jest",
+    "test:watch": "npm run test -- --watchAll",
+    "check:circular-dependencies": "madge --circular --extensions ts,tsx,js,jsx --ts-config tsconfig.json src/ --exclude '/dist/'",
+    "upgrade:ds": "ncu -f \"@synerise/ds-*\" -u"
+  },
+  "sideEffects": [
+    "dist/style/*",
+    "*.less"
+  ],
+  "types": "dist/index.d.ts",
+  "dependencies": {
+    "@synerise/ds-copy-icon": "^1.0.4",
+    "@synerise/ds-icon": "^1.9.2",
+    "@synerise/ds-inline-alert": "^1.1.3",
+    "@synerise/ds-skeleton": "^1.0.28",
+    "@synerise/ds-tooltip": "^1.3.3",
+    "@synerise/ds-typography": "^1.0.26"
+  },
+  "devDependencies": {
+    "@synerise/ds-utils": "^1.5.2"
+  },
+  "peerDependencies": {
+    "@synerise/ds-core": "*",
+    "react": ">=16.9.0 <= 18.3.1",
+    "react-intl": ">=3.12.0 <= 6.8",
+    "styled-components": "^5.3.3"
+  },
+  "gitHead": "f38e4b2dca1d43c39af0b189c93808de62c11e9b"
+}