@synerise/ds-step-card 0.5.9 → 0.6.2

package/CHANGELOG.md

@@ -3,6 +3,33 @@
 All notable changes to this project will be documented in this file.
 See [Conventional Commits](https://conventionalcommits.org) for commit guidelines.
 
+## [0.6.2](https://github.com/Synerise/synerise-design/compare/@synerise/ds-step-card@0.6.1...@synerise/ds-step-card@0.6.2) (2022-04-29)
+
+**Note:** Version bump only for package @synerise/ds-step-card
+
+
+
+
+
+## [0.6.1](https://github.com/Synerise/synerise-design/compare/@synerise/ds-step-card@0.6.0...@synerise/ds-step-card@0.6.1) (2022-04-08)
+
+**Note:** Version bump only for package @synerise/ds-step-card
+
+
+
+
+
+# [0.6.0](https://github.com/Synerise/synerise-design/compare/@synerise/ds-step-card@0.5.9...@synerise/ds-step-card@0.6.0) (2022-04-05)
+
+
+### Features
+
+* **step-card:** removes title, updates styles ([8d0555f](https://github.com/Synerise/synerise-design/commit/8d0555fe60152f00b315479ae4a5a84f475d8a99))
+
+
+
+
+
 ## [0.5.9](https://github.com/Synerise/synerise-design/compare/@synerise/ds-step-card@0.5.8...@synerise/ds-step-card@0.5.9) (2022-03-30)
 
 **Note:** Version bump only for package @synerise/ds-step-card

package/dist/StepCard.js

@@ -6,18 +6,14 @@ function _defineProperty(obj, key, value) { if (key in obj) { Object.definePrope
 
 import * as React from 'react';
 import { useIntl } from 'react-intl';
-import { debounce } from 'lodash';
 import Matching from '@synerise/ds-logic/dist/Matching/Matching';
-import InlineEdit from '@synerise/ds-inline-edit';
 import Cruds from '@synerise/ds-cruds';
 import { DragHandleM } from '@synerise/ds-icon';
-import { NOOP } from '@synerise/ds-utils';
+import { Title } from '@synerise/ds-typography';
 import * as S from './StepCard.styles';
 
 var StepCard = function StepCard(_ref) {
   var children = _ref.children,
-      name = _ref.name,
-      onChangeName = _ref.onChangeName,
       onDelete = _ref.onDelete,
       onDuplicate = _ref.onDuplicate,
       footer = _ref.footer,
@@ -28,18 +24,16 @@ var StepCard = function StepCard(_ref) {
   var _useIntl = useIntl(),
       formatMessage = _useIntl.formatMessage;
 
-  var _React$useState = React.useState(name),
-      nameValue = _React$useState[0],
-      setNameValue = _React$useState[1];
-
-  var onChangeNameDebounce = React.useCallback(debounce(onChangeName, 300), [onChangeName]);
   var text = React.useMemo(function () {
     return _objectSpread({
       matching: formatMessage({
-        id: 'DS.MATCHING.MATCHING'
+        id: 'DS.MATCHING.PERFORMED'
       }),
       notMatching: formatMessage({
-        id: 'DS.MATCHING.NOT-MATCHING'
+        id: 'DS.MATCHING.NOT-PERFORMED'
+      }),
+      conditionType: formatMessage({
+        id: 'DS.STEP-CARD.CONDITION-TYPE'
       }),
       namePlaceholder: formatMessage({
         id: 'DS.STEP-CARD.NAME-PLACEHOLDER'
@@ -55,33 +49,21 @@ var StepCard = function StepCard(_ref) {
       })
     }, texts);
   }, [formatMessage, texts]);
-
-  var handleChangeName = function handleChangeName(event) {
-    setNameValue(event.target.value);
-    onChangeNameDebounce(event.target.value);
-  };
-
-  return /*#__PURE__*/React.createElement(S.Container, null, /*#__PURE__*/React.createElement(S.Header, null, /*#__PURE__*/React.createElement(S.LeftSide, null, /*#__PURE__*/React.createElement(Matching, {
+  return /*#__PURE__*/React.createElement(S.Container, null, /*#__PURE__*/React.createElement(S.Header, {
+    className: "step-card-drag-handler"
+  }, /*#__PURE__*/React.createElement(S.LeftSide, null, /*#__PURE__*/React.createElement(S.DragIcon, {
+    component: /*#__PURE__*/React.createElement(DragHandleM, null)
+  }), /*#__PURE__*/React.createElement(Matching, {
     matching: matching,
     onChange: onChangeMatching,
     texts: {
       matching: text.matching,
       notMatching: text.notMatching
     }
-  }), /*#__PURE__*/React.createElement(InlineEdit, {
-    input: {
-      name: 'name-of-input',
-      value: nameValue,
-      maxLength: 120,
-      placeholder: text.namePlaceholder,
-      onChange: handleChangeName
-    }
-  })), /*#__PURE__*/React.createElement(S.RightSide, null, /*#__PURE__*/React.createElement(S.CrudsWrapper, null, /*#__PURE__*/React.createElement(Cruds.CustomAction, {
-    title: text.moveTooltip,
-    onClick: NOOP,
-    icon: /*#__PURE__*/React.createElement(DragHandleM, null),
-    className: "step-card-drag-handler"
-  }), /*#__PURE__*/React.createElement(Cruds, {
+  }), /*#__PURE__*/React.createElement(Title, {
+    withoutMargin: true,
+    level: 4
+  }, text.conditionType)), /*#__PURE__*/React.createElement(S.RightSide, null, /*#__PURE__*/React.createElement(S.CrudsWrapper, null, /*#__PURE__*/React.createElement(Cruds, {
     deleteTooltip: text.deleteTooltip,
     onDelete: onDelete,
     duplicateTooltip: text.duplicateTooltip,

package/dist/StepCard.styles.d.ts

@@ -1,5 +1,7 @@
+/// <reference types="react" />
 export declare const Container: import("styled-components").StyledComponent<"div", any, {}, never>;
 export declare const CrudsWrapper: import("styled-components").StyledComponent<"div", any, {}, never>;
+export declare const DragIcon: import("styled-components").StyledComponent<import("react").FC<import("@synerise/ds-icon").IconProps>, any, {}, never>;
 export declare const Header: import("styled-components").StyledComponent<"div", any, {}, never>;
 export declare const LeftSide: import("styled-components").StyledComponent<"div", any, {}, never>;
 export declare const RightSide: import("styled-components").StyledComponent<"div", any, {}, never>;

package/dist/StepCard.styles.js

@@ -1,4 +1,5 @@
 import styled from 'styled-components';
+import Icon from '@synerise/ds-icon';
 export var Container = styled.div.withConfig({
   displayName: "StepCardstyles__Container",
   componentId: "sc-45dbps-0"
@@ -9,27 +10,29 @@ export var CrudsWrapper = styled.div.withConfig({
   displayName: "StepCardstyles__CrudsWrapper",
   componentId: "sc-45dbps-1"
 })(["display:flex;flex-direction:row;align-items:center;justify-content:flex-end;opacity:0;visibility:hidden;"]);
+export var DragIcon = styled(Icon).withConfig({
+  displayName: "StepCardstyles__DragIcon",
+  componentId: "sc-45dbps-2"
+})(["visibility:hidden;opacity:0;"]);
 export var Header = styled.div.withConfig({
   displayName: "StepCardstyles__Header",
-  componentId: "sc-45dbps-2"
-})(["display:flex;flex-direction:row;align-items:center;justify-content:space-between;padding:21px 0;margin:0 24px;width:100%;max-width:calc(100% - 48px);position:relative;&:after{content:'';position:absolute;bottom:0;left:0;right:0;height:1px;background-color:transparent;background-image:", ";background-position:top;background-size:5px 1px;background-repeat:repeat-x;}&:hover{", "{opacity:1;visibility:visible;}}"], function (props) {
-  return "linear-gradient(to right, " + props.theme.palette.white + " 66%, " + props.theme.palette['grey-300'] + " 34%)";
-}, CrudsWrapper);
+  componentId: "sc-45dbps-3"
+})(["display:flex;flex-direction:row;align-items:center;justify-content:space-between;padding:22px 0;margin:0 24px 0 0;width:100%;max-width:calc(100% - 24px);position:relative;cursor:grab;&:hover{", "{opacity:1;visibility:visible;}", "{visibility:visible;opacity:1;}}"], CrudsWrapper, DragIcon);
 export var LeftSide = styled.div.withConfig({
   displayName: "StepCardstyles__LeftSide",
-  componentId: "sc-45dbps-3"
+  componentId: "sc-45dbps-4"
 })(["display:flex;flex-direction:row;align-items:center;justify-content:flex-start;> *{margin-right:8px;}"]);
 export var RightSide = styled.div.withConfig({
   displayName: "StepCardstyles__RightSide",
-  componentId: "sc-45dbps-4"
+  componentId: "sc-45dbps-5"
 })(["display:flex;flex-direction:row;align-items:center;justify-content:flex-start;> *{margin-left:8px;}"]);
 export var Body = styled.div.withConfig({
   displayName: "StepCardstyles__Body",
-  componentId: "sc-45dbps-5"
-})(["padding:0 24px 24px;width:100%;display:flex;flex-direction:column;align-items:flex-start;justify-content:flex-start;.ds-conditions{&:first-of-type{padding-top:0;}&:last-of-type{padding-bottom:0;}}"]);
+  componentId: "sc-45dbps-6"
+})(["padding:0 0 24px;width:100%;display:flex;flex-direction:column;align-items:flex-start;justify-content:flex-start;.ds-conditions{&:first-of-type{padding-top:0;}&:last-of-type{padding-bottom:0;}}"]);
 export var Footer = styled.div.withConfig({
   displayName: "StepCardstyles__Footer",
-  componentId: "sc-45dbps-6"
+  componentId: "sc-45dbps-7"
 })(["background-color:rgba(249,250,251,0.6);border-top:1px solid ", ";padding:16px 24px;display:flex;flex-direction:row;align-items:center;justify-content:flex-end;width:100%;> *{margin-left:8px;}"], function (props) {
   return props.theme.palette['grey-100'];
 });

package/dist/StepCard.types.d.ts

@@ -2,6 +2,7 @@ import * as React from 'react';
 export declare type StepCardTexts = {
     matching: string;
     notMatching: string;
+    conditionType: string;
     namePlaceholder: string;
     moveTooltip: string;
     deleteTooltip: string;

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@synerise/ds-step-card",
-  "version": "0.5.9",
+  "version": "0.6.2",
   "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.9",
     "@synerise/ds-icon": "^0.49.0",
-    "@synerise/ds-inline-edit": "^0.6.9",
-    "@synerise/ds-logic": "^0.6.4"
+    "@synerise/ds-inline-edit": "^0.6.12",
+    "@synerise/ds-logic": "^0.7.0"
   },
   "peerDependencies": {
     "@synerise/ds-core": "*",
     "react": ">=16.9.0 < 17.0.0"
   },
-  "gitHead": "93d7c60a7fe73188d715fd52b9701f81fcb4e60a"
+  "gitHead": "4a658911645846d1e329609ba9db06a7bc64962b"
 }