@synerise/ds-card 0.16.19 → 0.17.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.
 
+# [0.17.0](https://github.com/Synerise/synerise-design/compare/@synerise/ds-card@0.16.20...@synerise/ds-card@0.17.0) (2024-06-21)
+
+
+### Features
+
+* **card:** added a summary subcomponent ([4ca43a2](https://github.com/Synerise/synerise-design/commit/4ca43a2b057776f62d26f350eaa7e66521ff9f3d))
+
+
+
+
+
+## [0.16.20](https://github.com/Synerise/synerise-design/compare/@synerise/ds-card@0.16.19...@synerise/ds-card@0.16.20) (2024-05-31)
+
+**Note:** Version bump only for package @synerise/ds-card
+
+
+
+
+
 ## [0.16.19](https://github.com/Synerise/synerise-design/compare/@synerise/ds-card@0.16.18...@synerise/ds-card@0.16.19) (2024-05-29)
 
 **Note:** Version bump only for package @synerise/ds-card

package/README.md

@@ -103,3 +103,22 @@ yarn add @synerise/ds-card
 | -------- | ----------------------------------- | ------------------------------------------- | --------- |
 | Icon     | Icon rendered in badge              | React.ReactNode                             | -         |
 | Status   | Defines the color of badge and icon | `success` / `error` / `warning` / `default` | `default` |
+
+#### CardSummary
+
+Renders a summary in a bulletted list form. Can be assigned to Card.staticContent prop
+
+| Property | Description                                 | Type                     | Default |
+| -------- | ------------------------------------------- | ------------------------ | ------- |
+| title    | Otional title rendered above bulletted list | `React.ReactNode`        | -       |
+| items    | Defines the color of badge and icon         | `CardSummaryItemProps[]` | -       |
+
+
+#### CardSummaryItemProps
+
+| Property          | Description                                                                    | Type                   | Default |
+| ----------------- | ------------------------------------------------------------------------------ | ---------------------- | ------- |
+| key               | Unique key                                                                     | `React.Key`            | -       |
+| label             | Optional label to display                                                      | `React.ReactNode`      | -       |
+| value             | Mandatory value to display                                                     | `React.ReactNode`      | -       |
+| summaryRowObjects | Optional array of react elements, renders 4 in a row in a toggleable container | `React.ReactElement[]` | -       |

package/dist/Card/Card.js

@@ -9,6 +9,7 @@ import Icon from '@synerise/ds-icon';
 import AnimateHeight from 'react-animate-height';
 import VisibilitySensor from 'react-visibility-sensor';
 import * as S from './Card.styles';
+import { ANIMATION_DURATION } from '../constants';
 
 var Card = function Card(_ref) {
   var children = _ref.children,
@@ -93,7 +94,7 @@ var Card = function Card(_ref) {
     }
   }, headerSideChildren))), staticContent && /*#__PURE__*/React.createElement(AnimateHeight, {
     className: "static-content-card-animation",
-    duration: 300,
+    duration: ANIMATION_DURATION,
     height: hideContent ? 'auto' : 0
   }, /*#__PURE__*/React.createElement(S.ChildrenContainer, {
     "data-testid": "card-static-content"
@@ -102,7 +103,7 @@ var Card = function Card(_ref) {
     withHeader: withHeader
   }, staticContent))), /*#__PURE__*/React.createElement(AnimateHeight, {
     className: "card-animation",
-    duration: 300,
+    duration: ANIMATION_DURATION,
     height: hideContent ? 0 : 'auto'
   }, /*#__PURE__*/React.createElement(S.ChildrenContainer, {
     "data-testid": "card-content"

package/dist/Card/Card.styles.d.ts

@@ -1,9 +1,9 @@
-import * as React from 'react';
+import type { MouseEventHandler, ReactNode } from 'react';
 import { Backgrounds } from './Card.types';
 export declare const HeaderSideChildren: import("styled-components").StyledComponent<"div", any, {}, never>;
 export declare const IconContainer: import("styled-components").StyledComponent<"div", any, {
     compact?: boolean | undefined;
-    description?: React.ReactNode;
+    description?: ReactNode;
 }, never>;
 export declare const Container: import("styled-components").StyledComponent<"div", any, {
     raised?: boolean | undefined;
@@ -12,11 +12,11 @@ export declare const Container: import("styled-components").StyledComponent<"div
     background: Backgrounds;
 }, never>;
 export declare const Header: import("styled-components").StyledComponent<"div", any, {
-    onClick?: React.MouseEventHandler<Element> | undefined;
+    onClick?: MouseEventHandler<Element> | undefined;
     headerBorderBottom?: boolean | undefined;
     defaultHeaderBackgroundColor?: boolean | undefined;
 }, never>;
-export declare const Title: import("styled-components").StyledComponent<({ level, withoutMargin, children, className, ellipsis, ...antdProps }: import("@synerise/ds-typography/dist/Title.types").Props) => React.JSX.Element, any, {
+export declare const Title: import("styled-components").StyledComponent<({ level, withoutMargin, children, className, ellipsis, ...antdProps }: import("@synerise/ds-typography/dist/Title.types").Props) => import("react").JSX.Element, any, {
     fat: boolean;
 }, never>;
 export declare const TitleWrapper: import("styled-components").StyledComponent<"div", any, {

package/dist/Card/Card.styles.js

@@ -1,6 +1,7 @@
 import styled, { css } from 'styled-components';
 import { Title as DSTitle } from '@synerise/ds-typography';
 import { Container as TagsContainer } from '@synerise/ds-tags/dist/Tags.styles';
+import { CardSummaryWrapper } from '../CardSummary/CardSummary.styles';
 var whiteBg = ['white', 'white-shadow'];
 var greyBg = ['grey', 'grey-shadow'];
 var withBoxShadow = ['white-shadow', 'grey-shadow'];
@@ -101,11 +102,11 @@ export var ChildrenContainer = styled.div.withConfig({
 export var PaddingWrapper = styled.div.withConfig({
   displayName: "Cardstyles__PaddingWrapper",
   componentId: "sc-18exblx-10"
-})(["padding:", ";", ""], function (props) {
+})(["padding:", ";", " ", "{margin:0 48px;}"], function (props) {
   return props.withoutPadding ? '0' : "24px";
 }, function (props) {
   return !!props.withHeader && "padding-top: 0;";
-});
+}, CardSummaryWrapper);
 export var FooterContainer = styled.div.withConfig({
   displayName: "Cardstyles__FooterContainer",
   componentId: "sc-18exblx-11"

package/dist/CardGroup/CardGroup.d.ts

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

package/dist/CardGroup/CardGroup.js

@@ -1,4 +1,4 @@
-import * as React from 'react';
+import React from 'react';
 import * as S from './CardGroup.styles';
 
 var CardGroup = function CardGroup(_ref) {

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

@@ -1,6 +1,6 @@
-import * as React from 'react';
+import { ReactNode } from 'react';
 export interface CardGroupProps {
     className?: string;
-    children: React.ReactNode;
+    children: ReactNode;
     columns: number;
 }

package/dist/CardSummary/CardSummary.d.ts

@@ -0,0 +1,3 @@
+import React from 'react';
+import { CardSummaryProps } from './CardSummary.types';
+export declare const CardSummary: ({ title, items, ...props }: CardSummaryProps) => React.JSX.Element;

package/dist/CardSummary/CardSummary.js

@@ -0,0 +1,26 @@
+var _excluded = ["title", "items"],
+    _excluded2 = ["key"];
+
+function _extends() { _extends = Object.assign || function (target) { for (var i = 1; i < arguments.length; i++) { var source = arguments[i]; for (var key in source) { if (Object.prototype.hasOwnProperty.call(source, key)) { target[key] = source[key]; } } } return target; }; return _extends.apply(this, arguments); }
+
+function _objectWithoutPropertiesLoose(source, excluded) { if (source == null) return {}; var target = {}; var sourceKeys = Object.keys(source); var key, i; for (i = 0; i < sourceKeys.length; i++) { key = sourceKeys[i]; if (excluded.indexOf(key) >= 0) continue; target[key] = source[key]; } return target; }
+
+import React from 'react';
+import * as S from './CardSummary.styles';
+import { CardSummaryItem } from './CardSummaryItem';
+export var CardSummary = function CardSummary(_ref) {
+  var title = _ref.title,
+      items = _ref.items,
+      props = _objectWithoutPropertiesLoose(_ref, _excluded);
+
+  return /*#__PURE__*/React.createElement(S.CardSummaryWrapper, props, title && /*#__PURE__*/React.createElement(S.CardSummaryTitle, {
+    level: 5
+  }, title), /*#__PURE__*/React.createElement(S.CardSummaryList, null, items.map(function (_ref2) {
+    var key = _ref2.key,
+        item = _objectWithoutPropertiesLoose(_ref2, _excluded2);
+
+    return /*#__PURE__*/React.createElement(CardSummaryItem, _extends({}, item, {
+      key: key
+    }));
+  })));
+};

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

@@ -0,0 +1,28 @@
+/// <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 CardSummaryItemDetails: import("styled-components").StyledComponent<"div", 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 Icon: import("styled-components").StyledComponent<import("react").FC<import("@synerise/ds-icon").IconProps>, any, {
+    isOpen: boolean;
+}, never>;
+export declare const CardSummaryItemObjects: import("styled-components").StyledComponent<"div", any, {}, never>;
+export declare const CardSummaryItemObject: import("styled-components").StyledComponent<"div", any, {}, never>;

package/dist/CardSummary/CardSummary.styles.js

@@ -0,0 +1,55 @@
+import styled from 'styled-components';
+import BaseAnimateHeight from 'react-animate-height';
+import { Title, Text } from '@synerise/ds-typography';
+import DSIcon from '@synerise/ds-icon';
+import { Tag } from '@synerise/ds-tags/dist/Tag/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"
+})([""]);
+export var CardSummaryTitle = styled(Title).withConfig({
+  displayName: "CardSummarystyles__CardSummaryTitle",
+  componentId: "sc-1yj41os-2"
+})([""]);
+export var CardSummaryList = styled.div.withConfig({
+  displayName: "CardSummarystyles__CardSummaryList",
+  componentId: "sc-1yj41os-3"
+})(["display:flex;flex-direction:column;gap:8px;"]);
+export var CardSummaryItemWrapper = styled.div.withConfig({
+  displayName: "CardSummarystyles__CardSummaryItemWrapper",
+  componentId: "sc-1yj41os-4"
+})(["display:flex;flex-direction:column;gap:8px;"]);
+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;"]);
+export var CardSummaryItemLabel = styled(Text).withConfig({
+  displayName: "CardSummarystyles__CardSummaryItemLabel",
+  componentId: "sc-1yj41os-6"
+})(["line-height:24px;"]);
+export var CardSummaryItemValue = styled(Text).withConfig({
+  displayName: "CardSummarystyles__CardSummaryItemValue",
+  componentId: "sc-1yj41os-7"
+})(["line-height:24px;font-weight:500;"]);
+export var Icon = styled(DSIcon).withConfig({
+  displayName: "CardSummarystyles__Icon",
+  componentId: "sc-1yj41os-8"
+})(["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;"]);
+export var CardSummaryItemObject = styled.div.withConfig({
+  displayName: "CardSummarystyles__CardSummaryItemObject",
+  componentId: "sc-1yj41os-10"
+})(["flex-basis:25%;min-width:0;", "{margin-left:0;}"], Tag);

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

@@ -0,0 +1,11 @@
+import { HTMLAttributes, ReactElement, ReactNode, Key } from 'react';
+export type CardSummaryItemProps = {
+    key: Key;
+    label?: ReactNode;
+    value: ReactNode;
+    summaryRowObjects?: ReactElement[];
+} & HTMLAttributes<HTMLDivElement>;
+export type CardSummaryProps = {
+    title?: ReactNode;
+    items: CardSummaryItemProps[];
+} & HTMLAttributes<HTMLDivElement>;

package/dist/CardSummary/CardSummary.types.js

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

package/dist/CardSummary/CardSummaryItem.d.ts

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

package/dist/CardSummary/CardSummaryItem.js

@@ -0,0 +1,44 @@
+var _excluded = ["label", "value", "summaryRowObjects"];
+
+function _objectWithoutPropertiesLoose(source, excluded) { if (source == null) return {}; var target = {}; var sourceKeys = Object.keys(source); var key, i; for (i = 0; i < sourceKeys.length; i++) { key = sourceKeys[i]; if (excluded.indexOf(key) >= 0) continue; target[key] = source[key]; } return target; }
+
+import React, { useState } from 'react';
+import { v4 as uuid } from 'uuid';
+import { AngleDownS } from '@synerise/ds-icon';
+import * as S from './CardSummary.styles';
+import { ANIMATION_DURATION } from '../constants';
+export var CardSummaryItem = function CardSummaryItem(_ref) {
+  var label = _ref.label,
+      value = _ref.value,
+      summaryRowObjects = _ref.summaryRowObjects,
+      rest = _objectWithoutPropertiesLoose(_ref, _excluded);
+
+  var _useState = useState(false),
+      isOpen = _useState[0],
+      setIsOpen = _useState[1];
+
+  var withObjects = !!(summaryRowObjects != null && summaryRowObjects.length);
+
+  var handleClick = function handleClick() {
+    setIsOpen(!isOpen);
+  };
+
+  var icon = /*#__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, {
+    size: "small"
+  }, label, ":"), /*#__PURE__*/React.createElement(S.CardSummaryItemValue, {
+    size: "small"
+  }, value, " ", withObjects && icon)), withObjects && /*#__PURE__*/React.createElement(S.AnimateHeight, {
+    duration: ANIMATION_DURATION,
+    height: isOpen ? 'auto' : 0,
+    isOpen: isOpen
+  }, /*#__PURE__*/React.createElement(S.CardSummaryItemObjects, null, summaryRowObjects == null ? void 0 : summaryRowObjects.map(function (object) {
+    return /*#__PURE__*/React.createElement(S.CardSummaryItemObject, {
+      key: object.key || uuid()
+    }, object);
+  }))));
+};

package/dist/constants.d.ts

@@ -0,0 +1 @@
+export declare const ANIMATION_DURATION = 300;

package/dist/constants.js

@@ -0,0 +1 @@
+export var ANIMATION_DURATION = 300;

package/dist/index.d.ts

@@ -2,9 +2,12 @@ import * as MainCardStyles from './Card/Card.styles';
 import * as CardGroupStyles from './CardGroup/CardGroup.styles';
 import * as CardBadgeStyles from './CardBadge/CardBadge.styles';
 export { default } from './Card/Card';
+export type { Backgrounds, CardProps } from './Card/Card.types';
 export { default as CardGroup } from './CardGroup/CardGroup';
+export { CardGroupProps } from './CardGroup/CardGroup.types';
 export { default as CardBadge } from './CardBadge/CardBadge';
-export type { Backgrounds, CardProps } from './Card/Card.types';
+export { CardSummary } from './CardSummary/CardSummary';
+export type { CardSummaryProps } from './CardSummary/CardSummary.types';
 export declare const CardStyles: {
     Card: typeof MainCardStyles;
     CardGroup: typeof CardGroupStyles;

package/dist/index.js

@@ -3,7 +3,9 @@ import * as CardGroupStyles from './CardGroup/CardGroup.styles';
 import * as CardBadgeStyles from './CardBadge/CardBadge.styles';
 export { default } from './Card/Card';
 export { default as CardGroup } from './CardGroup/CardGroup';
+export { CardGroupProps } from './CardGroup/CardGroup.types';
 export { default as CardBadge } from './CardBadge/CardBadge';
+export { CardSummary } from './CardSummary/CardSummary';
 export var CardStyles = {
   Card: MainCardStyles,
   CardGroup: CardGroupStyles,

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@synerise/ds-card",
-  "version": "0.16.19",
+  "version": "0.17.0",
   "description": "Card UI Component for the Synerise Design System",
   "license": "ISC",
   "repository": "Synerise/synerise-design",
@@ -33,20 +33,20 @@
   ],
   "types": "dist/index.d.ts",
   "dependencies": {
-    "@synerise/ds-icon": "^0.62.0",
-    "@synerise/ds-tags": "^0.8.46",
+    "@synerise/ds-avatar": "^0.16.4",
+    "@synerise/ds-icon": "^0.62.1",
+    "@synerise/ds-tags": "^0.9.1",
     "@synerise/ds-typography": "^0.15.0",
     "@synerise/ds-utils": "^0.27.0",
     "react-animate-height": "^2.0.23",
-    "react-visibility-sensor": "^5.1.1"
+    "react-visibility-sensor": "^5.1.1",
+    "uuid": "^8.3.2"
   },
   "peerDependencies": {
     "@synerise/ds-core": "*",
     "antd": "4.7.0",
-    "react": ">=16.9.0 < 17.0.0"
+    "react": ">=16.9.0 <= 17.0.2",
+    "styled-components": "5.0.1"
   },
-  "devDependencies": {
-    "@synerise/ds-avatar": "^0.16.2"
-  },
-  "gitHead": "6bd94c78745df68ee3b853120a863ab24fc233ef"
+  "gitHead": "ef835e848d4f02cca258130baa6c9f44dfa15dd0"
 }