@synerise/ds-step-card 0.8.25 → 0.9.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.9.0](https://github.com/Synerise/synerise-design/compare/@synerise/ds-step-card@0.8.25...@synerise/ds-step-card@0.9.0) (2023-07-04)
+
+
+### Features
+
+* **filter:** adds letter tags to step cards and filter header ([ad9a366](https://github.com/Synerise/synerise-design/commit/ad9a366ae6bb8127eaeafa5e7bd89f7e35c1bcde))
+
+
+
+
+
 ## [0.8.25](https://github.com/Synerise/synerise-design/compare/@synerise/ds-step-card@0.8.24...@synerise/ds-step-card@0.8.25) (2023-06-28)
 
 **Note:** Version bump only for package @synerise/ds-step-card

package/README.md

@@ -51,8 +51,10 @@ footer={<span>Footer</span>}
 | onChangeName     | Function called when user change name of StepCard           | (name: string) => void      | -       |
 | onDelete         | Function called when user click on delete StepCard icon     | () => void                  | -       |
 | onDuplicate      | Function called when user click on duplicate StepCard icon  | () => void                  | -       |
-| footer           | Function which renders footer of StepCard                   | React.ReactNode             | -       |
+| footer           | React node to inject as footer of StepCard                    React.ReactNode             | -       |
+| headerRightSide  | React node to inject into header right side slot            | React.ReactNode             | -       |
 | texts            | Object with translations                                    | StepCardTexts               | -       |
+| readonly         | Toggles editability (cruds, step name, draggability)        | boolean               | -       |
  
 ### StepCardTexts
 

package/dist/StepCard.d.ts

@@ -1,4 +1,4 @@
 import * as React from 'react';
 import { StepCardProps } from './StepCard.types';
-declare const StepCard: React.FC<StepCardProps>;
+declare const StepCard: React.ForwardRefExoticComponent<StepCardProps & React.RefAttributes<HTMLDivElement>>;
 export default StepCard;

package/dist/StepCard.js

@@ -11,8 +11,7 @@ import Cruds from '@synerise/ds-cruds';
 import { DragHandleM } from '@synerise/ds-icon';
 import { Title } from '@synerise/ds-typography';
 import * as S from './StepCard.styles';
-
-var StepCard = function StepCard(_ref) {
+var StepCard = React.forwardRef(function (_ref, ref) {
   var children = _ref.children,
       onDelete = _ref.onDelete,
       onDuplicate = _ref.onDuplicate,
@@ -20,6 +19,7 @@ var StepCard = function StepCard(_ref) {
       matching = _ref.matching,
       onChangeMatching = _ref.onChangeMatching,
       texts = _ref.texts,
+      headerRightSide = _ref.headerRightSide,
       _ref$isHeaderVisible = _ref.isHeaderVisible,
       isHeaderVisible = _ref$isHeaderVisible === void 0 ? true : _ref$isHeaderVisible,
       _ref$readOnly = _ref.readOnly,
@@ -56,7 +56,19 @@ var StepCard = function StepCard(_ref) {
       })
     }, texts);
   }, [formatMessage, texts]);
-  return /*#__PURE__*/React.createElement(S.Container, null, isHeaderVisible && /*#__PURE__*/React.createElement(S.Header, {
+
+  var renderRightSide = function renderRightSide() {
+    return /*#__PURE__*/React.createElement(React.Fragment, null, !readOnly && /*#__PURE__*/React.createElement(S.CrudsWrapper, null, /*#__PURE__*/React.createElement(Cruds, {
+      deleteTooltip: text.deleteTooltip,
+      onDelete: onDelete,
+      duplicateTooltip: text.duplicateTooltip,
+      onDuplicate: onDuplicate
+    })), headerRightSide);
+  };
+
+  return /*#__PURE__*/React.createElement(S.Container, {
+    ref: ref
+  }, isHeaderVisible && /*#__PURE__*/React.createElement(S.Header, {
     className: "step-card-drag-handler"
   }, /*#__PURE__*/React.createElement(S.LeftSide, {
     readOnly: readOnly
@@ -73,12 +85,8 @@ var StepCard = function StepCard(_ref) {
   }), /*#__PURE__*/React.createElement(Title, {
     withoutMargin: true,
     level: 4
-  }, matching ? text.conditionType : text.notConditionType)), !readOnly && /*#__PURE__*/React.createElement(S.RightSide, null, /*#__PURE__*/React.createElement(S.CrudsWrapper, null, /*#__PURE__*/React.createElement(Cruds, {
-    deleteTooltip: text.deleteTooltip,
-    onDelete: onDelete,
-    duplicateTooltip: text.duplicateTooltip,
-    onDuplicate: onDuplicate
-  }))), ' '), /*#__PURE__*/React.createElement(S.Body, null, children), footer && /*#__PURE__*/React.createElement(S.Footer, null, footer));
-};
-
+  }, matching ? text.conditionType : text.notConditionType)), (!readOnly || headerRightSide) && /*#__PURE__*/React.createElement(S.RightSide, {
+    className: "step-card-right-side"
+  }, renderRightSide())), /*#__PURE__*/React.createElement(S.Body, null, children), footer && /*#__PURE__*/React.createElement(S.Footer, null, footer));
+});
 export default StepCard;

package/dist/StepCard.types.d.ts

@@ -20,4 +20,5 @@ export declare type StepCardProps = {
     texts?: StepCardTexts;
     isHeaderVisible?: boolean;
     readOnly?: boolean;
+    headerRightSide?: React.ReactNode;
 };

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@synerise/ds-step-card",
-  "version": "0.8.25",
+  "version": "0.9.0",
   "description": "StepCard UI Component for the Synerise Design System",
   "license": "ISC",
   "repository": "Synerise/synerise-design",
@@ -34,12 +34,12 @@
   "dependencies": {
     "@synerise/ds-cruds": "^0.3.29",
     "@synerise/ds-icon": "^0.57.0",
-    "@synerise/ds-inline-edit": "^0.6.66",
+    "@synerise/ds-inline-edit": "^0.6.67",
     "@synerise/ds-logic": "^0.8.5"
   },
   "peerDependencies": {
     "@synerise/ds-core": "*",
     "react": ">=16.9.0 < 17.0.0"
   },
-  "gitHead": "948b33abd56086fc73880204892f90bd6ddc0a72"
+  "gitHead": "e8a06c902ef96e767576df5377b8965e1034d6c0"
 }