@synerise/ds-card 0.14.2 → 0.15.0

package/CHANGELOG.md

@@ -3,6 +3,30 @@
 All notable changes to this project will be documented in this file.
 See [Conventional Commits](https://conventionalcommits.org) for commit guidelines.
 
+# [0.15.0](https://github.com/Synerise/synerise-design/compare/@synerise/ds-card@0.14.3...@synerise/ds-card@0.15.0) (2023-06-28)
+
+
+### Bug Fixes
+
+* **card:** swapped header title to ds title ([1d8e2d2](https://github.com/Synerise/synerise-design/commit/1d8e2d2f62dcb4462ddb7834ba0c43647135c914))
+
+
+### Features
+
+* **card:** add support for avatar in header ([7484281](https://github.com/Synerise/synerise-design/commit/74842815f1ba2e575ad17ede1418f0557aba0c8b))
+
+
+
+
+
+## [0.14.3](https://github.com/Synerise/synerise-design/compare/@synerise/ds-card@0.14.2...@synerise/ds-card@0.14.3) (2023-04-26)
+
+**Note:** Version bump only for package @synerise/ds-card
+
+
+
+
+
 ## [0.14.2](https://github.com/Synerise/synerise-design/compare/@synerise/ds-card@0.14.1...@synerise/ds-card@0.14.2) (2023-04-19)
 
 **Note:** Version bump only for package @synerise/ds-card

package/README.md

@@ -83,8 +83,9 @@ yarn add @synerise/ds-card
 | headerSideChildren                | Defines if the container includes a button (in the header)                                                            | React.ReactNode                                                              | -       |
 | staticContent                     | Defines content that's visible even if hideContent is `true`                                                          | React.ReactNode                                                              | -       |
 | hideContent                       | Defines the initial visibility of the content                                                                         | boolean                                                                      | `false` |
-| icon                              | Icon of CardBadge                                                                                                     | React.ReactNode                                                              | -       |
+| icon                              | Icon of CardBadge, if defined then avatar prop gets ignored                                                           | React.ReactNode                                                              | -       |
 | iconColor                         | Defines the color of the icon                                                                                         | string                                                                       | -       |
+| avatar                            | Avatar for CardBadge                                                                                                  | React.ReactNode                                                              | -       |
 | lively                            | Defines if the container casts a shadow when the cursor is hovered over                                               | boolean                                                                      | -       |
 | raised                            | Defines if the container casts a shadow on the background                                                             | boolean                                                                      | -       |
 | style                             | Defines the CSS of the container                                                                                      | React.CSSProperties                                                          | -       |

package/dist/Card/Card.js

@@ -1,4 +1,4 @@
-var _excluded = ["children", "raised", "disabled", "style", "className", "lively", "withHeader", "defaultHeaderBackgroundColor", "title", "description", "compactHeader", "icon", "renderBadge", "iconColor", "headerSideChildren", "onHeaderClick", "withoutPadding", "headerBorderBottom", "background", "hideContent", "staticContent", "showSideChildrenWhenHeaderHidden"];
+var _excluded = ["children", "raised", "disabled", "style", "className", "lively", "withHeader", "defaultHeaderBackgroundColor", "title", "description", "compactHeader", "icon", "avatar", "renderBadge", "iconColor", "headerSideChildren", "onHeaderClick", "withoutPadding", "headerBorderBottom", "background", "hideContent", "staticContent", "showSideChildrenWhenHeaderHidden"];
 
 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); }
 
@@ -23,6 +23,7 @@ var Card = function Card(_ref) {
       description = _ref.description,
       compactHeader = _ref.compactHeader,
       icon = _ref.icon,
+      avatar = _ref.avatar,
       renderBadge = _ref.renderBadge,
       iconColor = _ref.iconColor,
       headerSideChildren = _ref.headerSideChildren,
@@ -61,11 +62,11 @@ var Card = function Card(_ref) {
   }, /*#__PURE__*/React.createElement(Icon, {
     component: icon,
     color: iconColor
-  })) || renderBadge && renderBadge(), /*#__PURE__*/React.createElement(S.HeaderContent, {
+  })) || avatar || renderBadge && renderBadge(), /*#__PURE__*/React.createElement(S.HeaderContent, {
     compact: compactHeader,
-    hasIcon: !!icon
+    hasIconOrAvatar: Boolean(icon || avatar)
   }, title && /*#__PURE__*/React.createElement(S.Title, {
-    description: description,
+    description: Boolean(description),
     level: 4,
     fat: !!fatTitle
   }, title), description && /*#__PURE__*/React.createElement(S.Description, null, description)), headerSideChildren && /*#__PURE__*/React.createElement(VisibilitySensor, {

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

@@ -1,11 +1,10 @@
 import * as React from 'react';
 import { Backgrounds } from './Card.types';
-declare type IconContainerProps = {
-    compact?: boolean;
-    description?: React.ReactNode;
-};
 export declare const HeaderSideChildren: import("styled-components").StyledComponent<"div", any, {}, never>;
-export declare const IconContainer: import("styled-components").StyledComponent<"div", any, IconContainerProps, never>;
+export declare const IconContainer: import("styled-components").StyledComponent<"div", any, {
+    compact?: boolean | undefined;
+    description?: React.ReactNode;
+}, never>;
 export declare const Container: import("styled-components").StyledComponent<"div", any, {
     raised?: boolean | undefined;
     disabled?: boolean | undefined;
@@ -17,16 +16,14 @@ export declare const Header: import("styled-components").StyledComponent<"div",
     headerBorderBottom?: boolean | undefined;
     defaultHeaderBackgroundColor?: boolean | undefined;
 }, never>;
-export declare const Title: import("styled-components").StyledComponent<React.FC<Pick<import("antd/lib/typography/Base").BlockProps & {
-    level?: 1 | 2 | 3 | 4 | 5 | undefined;
-}, "code" | "mark" | "style" | "title" | "type" | "className" | "id" | "aria-label" | "children" | "disabled" | "editable" | "copyable" | "ellipsis" | "underline" | "delete" | "keyboard" | "prefixCls" | "level">>, any, {
+export declare const Title: import("styled-components").StyledComponent<React.FC<import("@synerise/ds-typography/dist/Title.types").Props>, any, {
     fat: boolean;
-    description?: React.ReactNode;
+    description?: boolean | undefined;
 }, never>;
 export declare const Description: import("styled-components").StyledComponent<"div", any, {}, never>;
 export declare const HeaderContent: import("styled-components").StyledComponent<"div", any, {
     compact?: boolean | undefined;
-    hasIcon: boolean;
+    hasIconOrAvatar: boolean;
 }, never>;
 export declare const ChildrenContainer: import("styled-components").StyledComponent<"div", any, {}, never>;
 export declare const PaddingWrapper: import("styled-components").StyledComponent<"div", any, {
@@ -34,4 +31,3 @@ export declare const PaddingWrapper: import("styled-components").StyledComponent
     withoutPadding?: boolean | undefined;
 }, never>;
 export declare const FooterContainer: import("styled-components").StyledComponent<"div", any, {}, never>;
-export {};

package/dist/Card/Card.styles.js

@@ -1,5 +1,5 @@
 import styled, { css } from 'styled-components';
-import Typography from '@synerise/ds-typography';
+import { Title as DSTitle } from '@synerise/ds-typography';
 var whiteBg = ['white', 'white-shadow'];
 var greyBg = ['grey', 'grey-shadow'];
 var withBoxShadow = ['white-shadow', 'grey-shadow'];
@@ -17,22 +17,6 @@ var boxShadow = function boxShadow(props) {
   return 'none';
 };
 
-var getHeight = function getHeight(props) {
-  if (props.compact && props.description) {
-    return ' 32px';
-  }
-
-  if (props.compact) {
-    return ' 32px';
-  }
-
-  if (props.description) {
-    return '24px';
-  }
-
-  return ' 32px';
-};
-
 export var HeaderSideChildren = styled.div.withConfig({
   displayName: "Cardstyles__HeaderSideChildren",
   componentId: "sc-18exblx-0"
@@ -41,7 +25,7 @@ export var IconContainer = styled.div.withConfig({
   displayName: "Cardstyles__IconContainer",
   componentId: "sc-18exblx-1"
 })(["display:flex;width:24px;height:", ";align-items:center;"], function (props) {
-  return getHeight(props);
+  return props.description && !props.compact ? '24px' : '32px';
 });
 export var Container = styled.div.withConfig({
   displayName: "Cardstyles__Container",
@@ -71,10 +55,10 @@ export var Header = styled.div.withConfig({
 }, function (props) {
   return !!props.defaultHeaderBackgroundColor && css(["background-color:", ";"], props.theme.palette.white);
 });
-export var Title = styled(Typography.Title).withConfig({
+export var Title = styled(DSTitle).withConfig({
   displayName: "Cardstyles__Title",
   componentId: "sc-18exblx-4"
-})(["&&{display:flex;align-items:center;min-height:", ";margin:0;margin-bottom:", ";}"], function (props) {
+})(["&&{display:flex;align-items:center;min-height:", ";margin:0;margin-bottom:", ";line-height:1.4;}"], function (props) {
   return props.fat ? '32px' : '20px';
 }, function (props) {
   return props.description ? '6px' : '0';
@@ -88,10 +72,18 @@ export var Description = styled.div.withConfig({
 export var HeaderContent = styled.div.withConfig({
   displayName: "Cardstyles__HeaderContent",
   componentId: "sc-18exblx-6"
-})(["max-width:100%;flex:1;", ";", ""], function (props) {
-  return props.hasIcon && css(["margin:0 0 0 20px;"]);
+})(["max-width:100%;flex:1;display:flex;flex-direction:", ";align-items:", ";margin:0 0 0 ", ";", ""], function (props) {
+  return props.compact ? 'row' : 'column';
+}, function (props) {
+  return props.compact ? 'center' : 'flex-start';
+}, function (props) {
+  if (props.hasIconOrAvatar) {
+    return '24px';
+  }
+
+  return '0';
 }, function (props) {
-  return !!props.compact && css(["display:flex;align-items:flex-start;flex-direction:row;", "{height:32px;line-height:32px;margin:0;}", "{border-left:1px solid ", ";height:32px;line-height:32px;padding:0 0 0 24px;margin:0 0 0 24px;}"], Title, Description, props.theme.palette['grey-200']);
+  return !!props.compact && css(["", "{height:32px;line-height:32px;margin:0;}", "{border-left:1px solid ", ";height:32px;line-height:32px;padding:0 0 0 24px;margin:0 0 0 24px;}"], Title, Description, props.theme.palette['grey-200']);
 });
 export var ChildrenContainer = styled.div.withConfig({
   displayName: "Cardstyles__ChildrenContainer",

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

@@ -15,6 +15,7 @@ export interface CardProps {
     icon?: React.ReactNode;
     renderBadge?: () => React.ReactNode;
     iconColor?: string;
+    avatar?: React.ReactNode;
     staticContent?: React.ReactNode;
     headerSideChildren?: React.ReactNode;
     onHeaderClick?: (e: React.SyntheticEvent) => void;

package/dist/CardBadge/CardBadge.styles.js

@@ -1,6 +1,4 @@
-import styled from 'styled-components'; // eslint-disable-next-line @typescript-eslint/ban-ts-ignore
-// @ts-ignore
-
+import styled from 'styled-components';
 var background = {
   success: 'green-600',
   warning: 'yellow-600',

package/dist/index.d.ts

@@ -1,3 +1,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 { default as CardGroup } from './CardGroup/CardGroup';
 export { default as CardBadge } from './CardBadge/CardBadge';
+export type { Backgrounds, CardProps } from './Card/Card.types';
+export declare const CardStyles: {
+    Card: typeof MainCardStyles;
+    CardGroup: typeof CardGroupStyles;
+    CardBadge: typeof CardBadgeStyles;
+};

package/dist/index.js

@@ -1,3 +1,11 @@
+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 { default as CardGroup } from './CardGroup/CardGroup';
-export { default as CardBadge } from './CardBadge/CardBadge';
+export { default as CardBadge } from './CardBadge/CardBadge';
+export var CardStyles = {
+  Card: MainCardStyles,
+  CardGroup: CardGroupStyles,
+  CardBadge: CardBadgeStyles
+};

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@synerise/ds-card",
-  "version": "0.14.2",
+  "version": "0.15.0",
   "description": "Card UI Component for the Synerise Design System",
   "license": "ISC",
   "repository": "Synerise/synerise-design",
@@ -32,8 +32,8 @@
   ],
   "types": "dist/index.d.ts",
   "dependencies": {
-    "@synerise/ds-icon": "^0.55.0",
-    "@synerise/ds-typography": "^0.12.7",
+    "@synerise/ds-icon": "^0.57.0",
+    "@synerise/ds-typography": "^0.12.8",
     "@synerise/ds-utils": "^0.8.31",
     "react-animate-height": "^2.0.23",
     "react-visibility-sensor": "^5.1.1"
@@ -43,5 +43,5 @@
     "antd": "^4",
     "react": ">=16.9.0 < 17.0.0"
   },
-  "gitHead": "3b8c3b1437ecbdda775a790ac3c27d6b1b6cbf26"
+  "gitHead": "948b33abd56086fc73880204892f90bd6ddc0a72"
 }