@synerise/ds-card 0.15.16 → 0.16.0

package/CHANGELOG.md

@@ -3,6 +3,17 @@
 All notable changes to this project will be documented in this file.
 See [Conventional Commits](https://conventionalcommits.org) for commit guidelines.
 
+# [0.16.0](https://github.com/Synerise/synerise-design/compare/@synerise/ds-card@0.15.16...@synerise/ds-card@0.16.0) (2024-01-31)
+
+
+### Features
+
+* **card:** add optional tag next to title ([df51722](https://github.com/Synerise/synerise-design/commit/df51722a57814174da067bfb57943432ca683d07))
+
+
+
+
+
 ## [0.15.16](https://github.com/Synerise/synerise-design/compare/@synerise/ds-card@0.15.15...@synerise/ds-card@0.15.16) (2024-01-24)
 
 **Note:** Version bump only for package @synerise/ds-card

package/README.md

@@ -91,6 +91,7 @@ yarn add @synerise/ds-card
 | style                             | Defines the CSS of the container                                                                                      | React.CSSProperties                                                          | -       |
 | size                              | Defines the width of the container (the container width is set to 100% when this property is not passed).             | `small` (472px) / `medium` (588px) / `large` (966px) / `extraLarge` (1232px) | -       |
 | title                             | Defines the title of the card (in the header)                                                                         | string                                                                       | -       |
+| titleTag                          | an optional status tag next to title                                                                                  | ReactElement                                                                 | -       |
 | withHeader                        | Defines if the header is shown                                                                                        | boolean                                                                      | -       |
 | withoutPadding                    | Reset padding of ContentContainer                                                                                     | boolean                                                                      | `false` |
 | showSideChildrenWhenHeaderHidden  | Show headerSideChildren on the bottom when header is scrolled out of view                                             | boolean                                                                      | `false` |

package/dist/Card/Card.d.ts

@@ -1,4 +1,3 @@
-import * as React from 'react';
 import { CardProps } from './Card.types';
-declare const Card: React.FC<CardProps>;
+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) => JSX.Element;
 export default Card;

package/dist/Card/Card.js

@@ -1,10 +1,10 @@
-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"];
+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"];
 
 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 * as React from 'react';
+import React, { useState } from 'react';
 import Icon from '@synerise/ds-icon';
 import AnimateHeight from 'react-animate-height';
 import VisibilitySensor from 'react-visibility-sensor';
@@ -34,14 +34,29 @@ var Card = function Card(_ref) {
       background = _ref$background === void 0 ? 'white-shadow' : _ref$background,
       hideContent = _ref.hideContent,
       staticContent = _ref.staticContent,
+      titleTag = _ref.titleTag,
       showSideChildrenWhenHeaderHidden = _ref.showSideChildrenWhenHeaderHidden,
       props = _objectWithoutPropertiesLoose(_ref, _excluded);
 
   var fatTitle = !description || description && compactHeader;
 
-  var _React$useState = React.useState(false),
-      headerActionsVisible = _React$useState[0],
-      setHeaderActionsVisible = _React$useState[1];
+  var _useState = useState(false),
+      headerActionsVisible = _useState[0],
+      setHeaderActionsVisible = _useState[1];
+
+  var renderTitle = function renderTitle() {
+    if (!title && !titleTag) {
+      return null;
+    }
+
+    return /*#__PURE__*/React.createElement(S.TitleWrapper, {
+      compact: compactHeader,
+      description: Boolean(description)
+    }, title && /*#__PURE__*/React.createElement(S.Title, {
+      level: 4,
+      fat: !!fatTitle
+    }, title), titleTag && /*#__PURE__*/React.createElement(S.TitleTag, null, titleTag));
+  };
 
   return /*#__PURE__*/React.createElement(S.Container, _extends({
     raised: raised,
@@ -65,11 +80,7 @@ var Card = function Card(_ref) {
   })) || avatar || renderBadge && renderBadge(), /*#__PURE__*/React.createElement(S.HeaderContent, {
     compact: compactHeader,
     hasIconOrAvatar: Boolean(icon || avatar)
-  }, title && /*#__PURE__*/React.createElement(S.Title, {
-    description: Boolean(description),
-    level: 4,
-    fat: !!fatTitle
-  }, title), description && /*#__PURE__*/React.createElement(S.Description, null, description)), headerSideChildren && /*#__PURE__*/React.createElement(VisibilitySensor, {
+  }, renderTitle(), description && /*#__PURE__*/React.createElement(S.Description, null, description)), headerSideChildren && /*#__PURE__*/React.createElement(VisibilitySensor, {
     partialVisibility: true,
     onChange: setHeaderActionsVisible
   }, /*#__PURE__*/React.createElement(S.HeaderSideChildren, {

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

@@ -18,8 +18,12 @@ export declare const Header: import("styled-components").StyledComponent<"div",
 }, never>;
 export declare const Title: import("styled-components").StyledComponent<({ level, withoutMargin, children, className, ellipsis, ...antdProps }: import("@synerise/ds-typography/dist/Title.types").Props) => JSX.Element, any, {
     fat: boolean;
+}, never>;
+export declare const TitleWrapper: import("styled-components").StyledComponent<"div", any, {
+    compact?: boolean | undefined;
     description?: boolean | undefined;
 }, never>;
+export declare const TitleTag: import("styled-components").StyledComponent<"div", any, {}, 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;

package/dist/Card/Card.styles.js

@@ -1,5 +1,6 @@
 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';
 var whiteBg = ['white', 'white-shadow'];
 var greyBg = ['grey', 'grey-shadow'];
 var withBoxShadow = ['white-shadow', 'grey-shadow'];
@@ -58,20 +59,28 @@ export var Header = styled.div.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:", ";line-height:1.4;}"], function (props) {
+})(["&&{display:flex;align-items:center;min-height:", ";margin:0;line-height:1.4;}"], function (props) {
   return props.fat ? '32px' : '20px';
-}, function (props) {
-  return props.description ? '6px' : '0';
 });
+export var TitleWrapper = styled.div.withConfig({
+  displayName: "Cardstyles__TitleWrapper",
+  componentId: "sc-18exblx-5"
+})(["display:flex;flex-direction:row;gap:4px;align-items:center;margin-bottom:", ";", "{margin-bottom:0;}"], function (props) {
+  return props.description && !props.compact ? '6px' : '0';
+}, TagsContainer);
+export var TitleTag = styled.div.withConfig({
+  displayName: "Cardstyles__TitleTag",
+  componentId: "sc-18exblx-6"
+})([""]);
 export var Description = styled.div.withConfig({
   displayName: "Cardstyles__Description",
-  componentId: "sc-18exblx-5"
+  componentId: "sc-18exblx-7"
 })(["&&{color:", ";font-size:13px;line-height:1.38;margin:0;}"], function (props) {
   return props.theme.palette['grey-600'];
 });
 export var HeaderContent = styled.div.withConfig({
   displayName: "Cardstyles__HeaderContent",
-  componentId: "sc-18exblx-6"
+  componentId: "sc-18exblx-8"
 })(["max-width:100%;flex:1;display:flex;flex-direction:", ";align-items:", ";margin:0 0 0 ", ";", ""], function (props) {
   return props.compact ? 'row' : 'column';
 }, function (props) {
@@ -87,11 +96,11 @@ export var HeaderContent = styled.div.withConfig({
 });
 export var ChildrenContainer = styled.div.withConfig({
   displayName: "Cardstyles__ChildrenContainer",
-  componentId: "sc-18exblx-7"
+  componentId: "sc-18exblx-9"
 })([""]);
 export var PaddingWrapper = styled.div.withConfig({
   displayName: "Cardstyles__PaddingWrapper",
-  componentId: "sc-18exblx-8"
+  componentId: "sc-18exblx-10"
 })(["padding:", ";", ""], function (props) {
   return props.withoutPadding ? '0' : "24px";
 }, function (props) {
@@ -99,7 +108,7 @@ export var PaddingWrapper = styled.div.withConfig({
 });
 export var FooterContainer = styled.div.withConfig({
   displayName: "Cardstyles__FooterContainer",
-  componentId: "sc-18exblx-9"
+  componentId: "sc-18exblx-11"
 })(["padding:24px;display:flex;align-items:center;justify-content:flex-end;background:", ";border-top:solid 1px ", ";"], function (props) {
   return props.theme.palette.white;
 }, function (props) {

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

@@ -1,27 +1,28 @@
-import * as React from 'react';
+import { SyntheticEvent, ReactNode, CSSProperties } from 'react';
 export type Backgrounds = 'white' | 'white-shadow' | 'grey' | 'grey-shadow' | 'outline';
 export interface CardProps {
     raised?: boolean;
     disabled?: boolean;
     className?: string;
     lively?: boolean;
-    children?: React.ReactNode;
-    style?: React.CSSProperties;
+    children?: ReactNode;
+    style?: CSSProperties;
     withHeader?: boolean;
     defaultHeaderBackgroundColor?: boolean;
     compactHeader?: boolean;
-    title?: React.ReactNode;
-    description?: React.ReactNode;
-    icon?: React.ReactNode;
-    renderBadge?: () => React.ReactNode;
+    title?: ReactNode;
+    description?: ReactNode;
+    icon?: ReactNode;
+    renderBadge?: () => ReactNode;
     iconColor?: string;
-    avatar?: React.ReactNode;
-    staticContent?: React.ReactNode;
-    headerSideChildren?: React.ReactNode;
-    onHeaderClick?: (e: React.SyntheticEvent) => void;
+    avatar?: ReactNode;
+    staticContent?: ReactNode;
+    headerSideChildren?: ReactNode;
+    onHeaderClick?: (e: SyntheticEvent) => void;
     withoutPadding?: boolean;
     headerBorderBottom?: boolean;
     background?: Backgrounds;
     hideContent?: boolean;
     showSideChildrenWhenHeaderHidden?: boolean;
+    titleTag?: ReactNode;
 }

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@synerise/ds-card",
-  "version": "0.15.16",
+  "version": "0.16.0",
   "description": "Card UI Component for the Synerise Design System",
   "license": "ISC",
   "repository": "Synerise/synerise-design",
@@ -34,8 +34,9 @@
   "types": "dist/index.d.ts",
   "dependencies": {
     "@synerise/ds-icon": "^0.60.0",
+    "@synerise/ds-tags": "^0.8.28",
     "@synerise/ds-typography": "^0.14.2",
-    "@synerise/ds-utils": "^0.8.31",
+    "@synerise/ds-utils": "^0.24.24",
     "react-animate-height": "^2.0.23",
     "react-visibility-sensor": "^5.1.1"
   },
@@ -44,5 +45,8 @@
     "antd": "4.7.0",
     "react": ">=16.9.0 < 17.0.0"
   },
-  "gitHead": "9e7d97fc5f8a9fd938b38e9d1678e050e0478e0e"
+  "devDependencies": {
+    "@synerise/ds-avatar": "^0.15.19"
+  },
+  "gitHead": "e5a143a9e2d157a2cbb9db7a5ef67e2f10acef84"
 }