@synerise/ds-card 1.1.9 → 1.2.0

package/CHANGELOG.md

@@ -3,6 +3,25 @@
 All notable changes to this project will be documented in this file.
 See [Conventional Commits](https://conventionalcommits.org) for commit guidelines.
 
+# [1.2.0](https://github.com/Synerise/synerise-design/compare/@synerise/ds-card@1.1.10...@synerise/ds-card@1.2.0) (2025-06-26)
+
+
+### Features
+
+* **card:** add summary value button ([68d3d19](https://github.com/Synerise/synerise-design/commit/68d3d195bd6e83e158d1130122f230a97c419a91))
+
+
+
+
+
+## [1.1.10](https://github.com/Synerise/synerise-design/compare/@synerise/ds-card@1.1.9...@synerise/ds-card@1.1.10) (2025-06-24)
+
+**Note:** Version bump only for package @synerise/ds-card
+
+
+
+
+
 ## [1.1.9](https://github.com/Synerise/synerise-design/compare/@synerise/ds-card@1.1.8...@synerise/ds-card@1.1.9) (2025-06-05)
 
 **Note:** Version bump only for package @synerise/ds-card

package/dist/CardSummary/CardSummary.styles.d.ts

@@ -1,26 +1,20 @@
 /// <reference types="react" />
-import BaseAnimateHeight from 'react-animate-height';
-export declare const AnimateHeight: import("styled-components").StyledComponent<typeof BaseAnimateHeight, any, {
-    isOpen: boolean;
-    duration: number;
-}, never>;
 export declare const CardSummaryWrapper: import("styled-components").StyledComponent<"div", any, {}, never>;
 export declare const CardSummaryTitle: import("styled-components").StyledComponent<({ level, withoutMargin, children, className, ellipsis, ...antdProps }: import("@synerise/ds-typography/dist/Title.types").Props) => import("react").JSX.Element, any, {}, never>;
 export declare const CardSummaryList: import("styled-components").StyledComponent<"div", any, {}, never>;
 export declare const CardSummaryItemWrapper: import("styled-components").StyledComponent<"div", any, {}, never>;
+export declare const ValueButtonWrapper: import("styled-components").StyledComponent<"div", any, {}, never>;
+export declare const CardSummaryItemDetailsWrapper: import("styled-components").StyledComponent<"div", any, {}, never>;
 export declare const CardSummaryItemDetails: import("styled-components").StyledComponent<"div", any, {}, never>;
+export declare const CardSummaryItemLabelValueWrapper: import("styled-components").StyledComponent<"span", any, {}, never>;
 export declare const CardSummaryItemLabel: import("styled-components").StyledComponent<({ size, className, children, ellipsis }: {
     size?: import("@synerise/ds-typography").TextSize | undefined;
     ellipsis?: import("@synerise/ds-typography/dist/Ellipsis").EllipsisProps | undefined;
     children?: import("react").ReactNode;
     className?: string | undefined;
 }) => import("react").JSX.Element, any, {}, never>;
-export declare const CardSummaryItemValue: import("styled-components").StyledComponent<({ size, className, children, ellipsis }: {
-    size?: import("@synerise/ds-typography").TextSize | undefined;
-    ellipsis?: import("@synerise/ds-typography/dist/Ellipsis").EllipsisProps | undefined;
-    children?: import("react").ReactNode;
-    className?: string | undefined;
-}) => import("react").JSX.Element, any, {}, never>;
+export declare const CardSummaryItemValue: import("styled-components").StyledComponent<"span", any, {}, never>;
+export declare const IconWrapper: import("styled-components").StyledComponent<"div", any, {}, never>;
 export declare const Icon: import("styled-components").StyledComponent<({ name, component, className, ...rest }: import("@synerise/ds-icon").IconProps) => import("react").JSX.Element, any, {
     isOpen: boolean;
 }, never>;

package/dist/CardSummary/CardSummary.styles.js

@@ -1,55 +1,62 @@
 import styled from 'styled-components';
-import BaseAnimateHeight from 'react-animate-height';
-import { Title, Text } from '@synerise/ds-typography';
+import { Title, Text, macro } from '@synerise/ds-typography';
 import DSIcon from '@synerise/ds-icon';
 import { Tag } from '@synerise/ds-tag/dist/Tag.styles';
-export var AnimateHeight = styled(BaseAnimateHeight).withConfig({
-  displayName: "CardSummarystyles__AnimateHeight",
-  componentId: "sc-1yj41os-0"
-})(["margin-top:", ";transition:margin ", "ms;"], function (props) {
-  return props.isOpen ? '0' : '-8px';
-}, function (props) {
-  return props.duration;
-});
 export var CardSummaryWrapper = styled.div.withConfig({
   displayName: "CardSummarystyles__CardSummaryWrapper",
-  componentId: "sc-1yj41os-1"
+  componentId: "sc-1yj41os-0"
 })([""]);
 export var CardSummaryTitle = styled(Title).withConfig({
   displayName: "CardSummarystyles__CardSummaryTitle",
-  componentId: "sc-1yj41os-2"
+  componentId: "sc-1yj41os-1"
 })([""]);
 export var CardSummaryList = styled.div.withConfig({
   displayName: "CardSummarystyles__CardSummaryList",
-  componentId: "sc-1yj41os-3"
-})(["display:flex;flex-direction:column;gap:8px;"]);
+  componentId: "sc-1yj41os-2"
+})([""]);
 export var CardSummaryItemWrapper = styled.div.withConfig({
   displayName: "CardSummarystyles__CardSummaryItemWrapper",
+  componentId: "sc-1yj41os-3"
+})([""]);
+export var ValueButtonWrapper = styled.div.withConfig({
+  displayName: "CardSummarystyles__ValueButtonWrapper",
   componentId: "sc-1yj41os-4"
-})(["display:flex;flex-direction:column;gap:8px;"]);
+})(["align-self:flex-start;"]);
+export var CardSummaryItemDetailsWrapper = styled.div.withConfig({
+  displayName: "CardSummarystyles__CardSummaryItemDetailsWrapper",
+  componentId: "sc-1yj41os-5"
+})(["display:flex;align-items:center;gap:12px;"]);
 export var CardSummaryItemDetails = styled.div.withConfig({
   displayName: "CardSummarystyles__CardSummaryItemDetails",
-  componentId: "sc-1yj41os-5"
-})(["&:before{content:'\u2022';margin-right:8px;}display:flex;gap:4px;line-height:24px;"]);
+  componentId: "sc-1yj41os-6"
+})(["&:before{content:'\u2022';margin-right:8px;}display:flex;gap:4px;line-height:24px;padding:4px 0;"]);
+export var CardSummaryItemLabelValueWrapper = styled.span.withConfig({
+  displayName: "CardSummarystyles__CardSummaryItemLabelValueWrapper",
+  componentId: "sc-1yj41os-7"
+})(["align-self:center;word-break:break-all;"]);
 export var CardSummaryItemLabel = styled(Text).withConfig({
   displayName: "CardSummarystyles__CardSummaryItemLabel",
-  componentId: "sc-1yj41os-6"
-})(["line-height:24px;"]);
-export var CardSummaryItemValue = styled(Text).withConfig({
+  componentId: "sc-1yj41os-8"
+})(["line-height:24px;margin-right:4px;"]);
+export var CardSummaryItemValue = styled.span.withConfig({
   displayName: "CardSummarystyles__CardSummaryItemValue",
-  componentId: "sc-1yj41os-7"
-})(["line-height:24px;font-weight:500;"]);
+  componentId: "sc-1yj41os-9"
+})(["", " line-height:24px;"], macro.h200);
+export var IconWrapper = styled.div.withConfig({
+  displayName: "CardSummarystyles__IconWrapper",
+  componentId: "sc-1yj41os-10"
+})(["display:inline-block;height:24px;"]);
 export var Icon = styled(DSIcon).withConfig({
   displayName: "CardSummarystyles__Icon",
-  componentId: "sc-1yj41os-8"
+  componentId: "sc-1yj41os-11"
 })(["transform:rotate(", "deg);"], function (props) {
   return props.isOpen ? '180' : '0';
 });
 export var CardSummaryItemObjects = styled.div.withConfig({
   displayName: "CardSummarystyles__CardSummaryItemObjects",
-  componentId: "sc-1yj41os-9"
-})(["display:flex;gap:8px;margin-left:16px;"]);
+  componentId: "sc-1yj41os-12"
+})(["display:flex;gap:8px;margin-left:16px;margin-top:8px;"]);
 export var CardSummaryItemObject = styled.div.withConfig({
   displayName: "CardSummarystyles__CardSummaryItemObject",
-  componentId: "sc-1yj41os-10"
+  componentId: "sc-1yj41os-13"
 })(["flex-basis:25%;min-width:0;", "{margin-left:0;}"], Tag);

package/dist/CardSummary/CardSummary.types.d.ts

@@ -4,6 +4,7 @@ export type CardSummaryItemProps = WithHTMLAttributes<HTMLDivElement, {
     key: Key;
     label?: ReactNode;
     value: ReactNode;
+    valueButton?: ReactNode;
     summaryRowObjects?: ReactElement[];
 }>;
 export type CardSummaryProps = WithHTMLAttributes<HTMLDivElement, {

package/dist/CardSummary/CardSummaryItem.d.ts

@@ -1,3 +1,3 @@
 import React from 'react';
 import { CardSummaryItemProps } from './CardSummary.types';
-export declare const CardSummaryItem: ({ label, value, summaryRowObjects, ...rest }: CardSummaryItemProps) => React.JSX.Element;
+export declare const CardSummaryItem: ({ label, value, summaryRowObjects, valueButton, ...rest }: CardSummaryItemProps) => React.JSX.Element;

package/dist/CardSummary/CardSummaryItem.js

@@ -1,7 +1,8 @@
-var _excluded = ["label", "value", "summaryRowObjects"];
+var _excluded = ["label", "value", "summaryRowObjects", "valueButton"];
 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, { useState } from 'react';
 import { v4 as uuid } from 'uuid';
+import AnimateHeight from 'react-animate-height';
 import { AngleDownS } from '@synerise/ds-icon';
 import * as S from './CardSummary.styles';
 import { ANIMATION_DURATION } from '../constants';
@@ -9,6 +10,7 @@ export var CardSummaryItem = function CardSummaryItem(_ref) {
   var label = _ref.label,
     value = _ref.value,
     summaryRowObjects = _ref.summaryRowObjects,
+    valueButton = _ref.valueButton,
     rest = _objectWithoutPropertiesLoose(_ref, _excluded);
   var _useState = useState(false),
     isOpen = _useState[0],
@@ -17,19 +19,16 @@ export var CardSummaryItem = function CardSummaryItem(_ref) {
   var handleClick = function handleClick() {
     setIsOpen(!isOpen);
   };
-  var icon = /*#__PURE__*/React.createElement(S.Icon, {
+  var icon = /*#__PURE__*/React.createElement(S.IconWrapper, null, /*#__PURE__*/React.createElement(S.Icon, {
     isOpen: isOpen,
     component: /*#__PURE__*/React.createElement(AngleDownS, null),
     onClick: handleClick
-  });
-  return /*#__PURE__*/React.createElement(S.CardSummaryItemWrapper, rest, /*#__PURE__*/React.createElement(S.CardSummaryItemDetails, null, label && /*#__PURE__*/React.createElement(S.CardSummaryItemLabel, {
+  }));
+  return /*#__PURE__*/React.createElement(S.CardSummaryItemWrapper, rest, /*#__PURE__*/React.createElement(S.CardSummaryItemDetailsWrapper, null, /*#__PURE__*/React.createElement(S.CardSummaryItemDetails, null, /*#__PURE__*/React.createElement(S.CardSummaryItemLabelValueWrapper, null, label && /*#__PURE__*/React.createElement(S.CardSummaryItemLabel, {
     size: "small"
-  }, label, ":"), /*#__PURE__*/React.createElement(S.CardSummaryItemValue, {
-    size: "small"
-  }, value, " ", withObjects && icon)), withObjects && /*#__PURE__*/React.createElement(S.AnimateHeight, {
+  }, label, ":"), /*#__PURE__*/React.createElement(S.CardSummaryItemValue, null, value, " ", withObjects && icon))), valueButton && /*#__PURE__*/React.createElement(S.ValueButtonWrapper, null, valueButton)), withObjects && /*#__PURE__*/React.createElement(AnimateHeight, {
     duration: ANIMATION_DURATION,
-    height: isOpen ? 'auto' : 0,
-    isOpen: isOpen
+    height: isOpen ? 'auto' : 0
   }, /*#__PURE__*/React.createElement(S.CardSummaryItemObjects, null, summaryRowObjects == null ? void 0 : summaryRowObjects.map(function (object) {
     return /*#__PURE__*/React.createElement(S.CardSummaryItemObject, {
       key: object.key || uuid()

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@synerise/ds-card",
-  "version": "1.1.9",
+  "version": "1.2.0",
   "description": "Card UI Component for the Synerise Design System",
   "license": "ISC",
   "repository": "Synerise/synerise-design",
@@ -34,11 +34,11 @@
   ],
   "types": "dist/index.d.ts",
   "dependencies": {
-    "@synerise/ds-avatar": "^1.0.10",
-    "@synerise/ds-icon": "^1.5.2",
-    "@synerise/ds-tag": "^1.1.9",
-    "@synerise/ds-typography": "^1.0.10",
-    "@synerise/ds-utils": "^1.2.0",
+    "@synerise/ds-avatar": "^1.0.12",
+    "@synerise/ds-icon": "^1.5.3",
+    "@synerise/ds-tag": "^1.1.11",
+    "@synerise/ds-typography": "^1.0.12",
+    "@synerise/ds-utils": "^1.3.0",
     "react-animate-height": "^2.0.23",
     "react-visibility-sensor": "^5.1.1",
     "uuid": "^8.3.2"
@@ -49,5 +49,5 @@
     "react": ">=16.9.0 <= 18.3.1",
     "styled-components": "^5.3.3"
   },
-  "gitHead": "93bc81d59d20bc8f3bc80c5d56ae7f7c0838380d"
+  "gitHead": "11fe1d29b2ac23e70c3d5e6ce8ae20201a619a34"
 }