@synerise/ds-card 1.2.10 → 1.2.12

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.12](https://github.com/Synerise/synerise-design/compare/@synerise/ds-card@1.2.11...@synerise/ds-card@1.2.12) (2025-10-03)
+
+
+### Bug Fixes
+
+* **card:** summary styles refactor ([faa301f](https://github.com/Synerise/synerise-design/commit/faa301f17de5475ae80bac13fac0158fb3d2eb03))
+
+
+
+
+
+## [1.2.11](https://github.com/Synerise/synerise-design/compare/@synerise/ds-card@1.2.10...@synerise/ds-card@1.2.11) (2025-09-25)
+
+**Note:** Version bump only for package @synerise/ds-card
+
+
+
+
+
 ## [1.2.10](https://github.com/Synerise/synerise-design/compare/@synerise/ds-card@1.2.9...@synerise/ds-card@1.2.10) (2025-09-19)
 
 **Note:** Version bump only for package @synerise/ds-card

package/dist/Card/Card.d.ts

@@ -1,4 +1,4 @@
 import React from 'react';
 import { type CardProps } from './Card.types';
-declare const Card: ({ children, raised, disabled, style, className, lively, withHeader, defaultHeaderBackgroundColor, title, description, compactHeader, icon, avatar, renderBadge, iconColor, headerSideChildren, onHeaderClick, withoutPadding, headerBorderBottom, background, hideContent, staticContent, titleTag, showSideChildrenWhenHeaderHidden, ...props }: CardProps) => React.JSX.Element;
+declare const Card: ({ children, raised, disabled, className, lively, withHeader, defaultHeaderBackgroundColor, title, description, compactHeader, icon, avatar, renderBadge, iconColor, headerSideChildren, onHeaderClick, withoutPadding, headerBorderBottom, background, hideContent, staticContent, titleTag, showSideChildrenWhenHeaderHidden, ...htmlAttributes }: CardProps) => React.JSX.Element;
 export default Card;

package/dist/Card/Card.js

@@ -1,4 +1,4 @@
-var _excluded = ["children", "raised", "disabled", "style", "className", "lively", "withHeader", "defaultHeaderBackgroundColor", "title", "description", "compactHeader", "icon", "avatar", "renderBadge", "iconColor", "headerSideChildren", "onHeaderClick", "withoutPadding", "headerBorderBottom", "background", "hideContent", "staticContent", "titleTag", "showSideChildrenWhenHeaderHidden"];
+var _excluded = ["children", "raised", "disabled", "className", "lively", "withHeader", "defaultHeaderBackgroundColor", "title", "description", "compactHeader", "icon", "avatar", "renderBadge", "iconColor", "headerSideChildren", "onHeaderClick", "withoutPadding", "headerBorderBottom", "background", "hideContent", "staticContent", "titleTag", "showSideChildrenWhenHeaderHidden"];
 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, { useState } from 'react';
@@ -11,7 +11,6 @@ var Card = function Card(_ref) {
   var children = _ref.children,
     raised = _ref.raised,
     disabled = _ref.disabled,
-    style = _ref.style,
     className = _ref.className,
     lively = _ref.lively,
     withHeader = _ref.withHeader,
@@ -33,7 +32,7 @@ var Card = function Card(_ref) {
     staticContent = _ref.staticContent,
     titleTag = _ref.titleTag,
     showSideChildrenWhenHeaderHidden = _ref.showSideChildrenWhenHeaderHidden,
-    props = _objectWithoutPropertiesLoose(_ref, _excluded);
+    htmlAttributes = _objectWithoutPropertiesLoose(_ref, _excluded);
   var fatTitle = !description || description && compactHeader;
   var _useState = useState(false),
     headerActionsVisible = _useState[0],
@@ -54,13 +53,12 @@ var Card = function Card(_ref) {
   return /*#__PURE__*/React.createElement(S.Container, _extends({
     raised: raised,
     disabled: disabled,
-    style: style,
     className: "ds-card " + (className || ''),
     lively: lively,
     "data-testid": "card-wrapper",
     background: background
     /** Necessary for passing down data-* attributes */
-  }, props), withHeader && /*#__PURE__*/React.createElement(S.Header, {
+  }, htmlAttributes), withHeader && /*#__PURE__*/React.createElement(S.Header, {
     onClick: onHeaderClick,
     headerBorderBottom: headerBorderBottom,
     defaultHeaderBackgroundColor: defaultHeaderBackgroundColor

package/dist/Card/Card.types.d.ts

@@ -1,6 +1,7 @@
 import { type CSSProperties, type ReactNode, type SyntheticEvent } from 'react';
+import { type WithHTMLAttributes } from '@synerise/ds-utils';
 export type Backgrounds = 'white' | 'white-shadow' | 'grey' | 'grey-shadow' | 'outline';
-export interface CardProps {
+export type CardProps = WithHTMLAttributes<HTMLDivElement, {
     raised?: boolean;
     disabled?: boolean;
     className?: string;
@@ -25,4 +26,4 @@ export interface CardProps {
     hideContent?: boolean;
     showSideChildrenWhenHeaderHidden?: boolean;
     titleTag?: ReactNode;
-}
+}>;

package/dist/CardGroup/CardGroup.d.ts

@@ -1,4 +1,4 @@
 import React from 'react';
 import { type CardGroupProps } from './CardGroup.types';
-declare const CardGroup: ({ className, children, columns }: CardGroupProps) => React.JSX.Element;
+declare const CardGroup: ({ children, columns, ...htmlAttributes }: CardGroupProps) => React.JSX.Element;
 export default CardGroup;

package/dist/CardGroup/CardGroup.js

@@ -1,12 +1,14 @@
+var _excluded = ["children", "columns"];
+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 * as S from './CardGroup.styles';
 var CardGroup = function CardGroup(_ref) {
-  var className = _ref.className,
-    children = _ref.children,
-    columns = _ref.columns;
-  return /*#__PURE__*/React.createElement(S.Container, {
-    className: className,
+  var children = _ref.children,
+    columns = _ref.columns,
+    htmlAttributes = _objectWithoutPropertiesLoose(_ref, _excluded);
+  return /*#__PURE__*/React.createElement(S.Container, _extends({
     items: columns
-  }, children);
+  }, htmlAttributes), children);
 };
 export default CardGroup;

package/dist/CardGroup/CardGroup.types.d.ts

@@ -1,6 +1,6 @@
 import { type ReactNode } from 'react';
-export interface CardGroupProps {
-    className?: string;
+import { type WithHTMLAttributes } from '@synerise/ds-utils';
+export type CardGroupProps = WithHTMLAttributes<HTMLDivElement, {
     children: ReactNode;
     columns: number;
-}
+}>;

package/dist/CardSummary/CardSummary.styles.js

@@ -25,15 +25,15 @@ export var ValueButtonWrapper = styled.div.withConfig({
 export var CardSummaryItemDetailsWrapper = styled.div.withConfig({
   displayName: "CardSummarystyles__CardSummaryItemDetailsWrapper",
   componentId: "sc-1yj41os-5"
-})(["display:flex;align-items:center;gap:12px;"]);
+})(["display:flex;align-items:center;gap:12px;min-height:32px;"]);
 export var CardSummaryItemDetails = styled.div.withConfig({
   displayName: "CardSummarystyles__CardSummaryItemDetails",
   componentId: "sc-1yj41os-6"
-})(["&:before{content:'\u2022';margin-right:8px;}display:flex;gap:4px;line-height:24px;padding:4px 0;"]);
+})(["&:before{content:'\u2022';}display:flex;gap:12px;align-items:center;"]);
 export var CardSummaryItemLabelValueWrapper = styled.span.withConfig({
   displayName: "CardSummarystyles__CardSummaryItemLabelValueWrapper",
   componentId: "sc-1yj41os-7"
-})(["align-self:center;word-break:break-all;"]);
+})(["align-self:center;word-break:break-all;display:flex;align-items:center;"]);
 export var CardSummaryItemLabel = styled(Text).withConfig({
   displayName: "CardSummarystyles__CardSummaryItemLabel",
   componentId: "sc-1yj41os-8"
@@ -41,11 +41,11 @@ export var CardSummaryItemLabel = styled(Text).withConfig({
 export var CardSummaryItemValue = styled.span.withConfig({
   displayName: "CardSummarystyles__CardSummaryItemValue",
   componentId: "sc-1yj41os-9"
-})(["", " line-height:24px;"], macro.h200);
+})(["", " display:flex;align-items:center;gap:4px;"], 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-11"
@@ -55,8 +55,8 @@ export var Icon = styled(DSIcon).withConfig({
 export var CardSummaryItemObjects = styled.div.withConfig({
   displayName: "CardSummarystyles__CardSummaryItemObjects",
   componentId: "sc-1yj41os-12"
-})(["display:flex;gap:8px;margin-left:16px;margin-top:8px;"]);
+})(["--cols:4;--gap:8px;display:flex;flex-wrap:wrap;gap:0 var(--gap);margin:8px 0 8px 16px;"]);
 export var CardSummaryItemObject = styled.div.withConfig({
   displayName: "CardSummarystyles__CardSummaryItemObject",
   componentId: "sc-1yj41os-13"
-})(["flex-basis:25%;min-width:0;", "{margin-left:0;}"], Tag);
+})(["flex-basis:calc( 100% / var(--cols) - var(--gap) / var(--cols) * (var(--cols) - 1) );min-width:0;", "{margin-left:0;}"], Tag);

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@synerise/ds-card",
-  "version": "1.2.10",
+  "version": "1.2.12",
   "description": "Card UI Component for the Synerise Design System",
   "license": "ISC",
   "repository": "Synerise/synerise-design",
@@ -35,9 +35,9 @@
   ],
   "types": "dist/index.d.ts",
   "dependencies": {
-    "@synerise/ds-avatar": "^1.0.22",
+    "@synerise/ds-avatar": "^1.0.23",
     "@synerise/ds-icon": "^1.7.2",
-    "@synerise/ds-tag": "^1.2.0",
+    "@synerise/ds-tag": "^1.3.0",
     "@synerise/ds-typography": "^1.0.21",
     "@synerise/ds-utils": "^1.4.2",
     "react-animate-height": "^2.0.23",
@@ -50,5 +50,5 @@
     "react": ">=16.9.0 <= 18.3.1",
     "styled-components": "^5.3.3"
   },
-  "gitHead": "5029af8713235b315d36bb3c73363f2feca86da0"
+  "gitHead": "1f909e1fc4174f1c05c148338e64652a893ef926"
 }