@synerise/ds-step-card 1.2.38 → 1.2.39

This diff represents the content of publicly available package versions that have been released to one of the supported registries. The information contained in this diff is provided for informational purposes only and reflects changes between package versions as they appear in their respective public registries.
Files changed (3) hide show
  1. package/CHANGELOG.md +4 -0
  2. package/README.md +58 -37
  3. package/package.json +8 -8
package/CHANGELOG.md CHANGED
@@ -3,6 +3,10 @@
3
3
  All notable changes to this project will be documented in this file.
4
4
  See [Conventional Commits](https://conventionalcommits.org) for commit guidelines.
5
5
 
6
+ ## [1.2.39](https://github.com/Synerise/synerise-design/compare/@synerise/ds-step-card@1.2.38...@synerise/ds-step-card@1.2.39) (2026-03-20)
7
+
8
+ **Note:** Version bump only for package @synerise/ds-step-card
9
+
6
10
  ## [1.2.38](https://github.com/Synerise/synerise-design/compare/@synerise/ds-step-card@1.2.37...@synerise/ds-step-card@1.2.38) (2026-03-09)
7
11
 
8
12
  **Note:** Version bump only for package @synerise/ds-step-card
package/README.md CHANGED
@@ -15,29 +15,30 @@ yarn add @synerise/ds-step-card
15
15
 
16
16
  ## Usage
17
17
 
18
- ```
18
+ ```jsx
19
19
  import StepCard from '@synerise/ds-step-card'
20
20
 
21
21
  <StepCard
22
- matching={true}
23
- onChangeMatching={(matchingValue) => {}}
24
- name={'funnel'}
25
- onChangeName={(name) => {}}
26
- onDuplicate={() => {}}
27
- onDelete={() => {}}
28
- texts={{
29
- matching: 'Matching',
30
- notMatching: 'Not matching',
31
- namePlaceholder: 'Placeholder',
32
- moveTooltip: 'Move',
33
- deleteTooltip: 'Delete',
34
- duplicateTooltip: 'Duplicate',
35
- }}
36
- footer={<span>Footer</span>}
22
+ matching={true}
23
+ onChangeMatching={(matchingValue) => {}}
24
+ name={'funnel'}
25
+ onMove={(index, offset) => reorder(index, offset)}
26
+ expressionIndex={0}
27
+ expressionCount={3}
28
+ onDuplicate={() => {}}
29
+ onDelete={() => {}}
30
+ texts={{
31
+ matching: 'Matching',
32
+ notMatching: 'Not matching',
33
+ namePlaceholder: 'Placeholder',
34
+ moveTooltip: 'Move',
35
+ deleteTooltip: 'Delete',
36
+ duplicateTooltip: 'Duplicate',
37
+ }}
38
+ footer={<span>Footer</span>}
37
39
  >
38
- <span>Content</span>
40
+ <span>Content</span>
39
41
  </StepCard>
40
-
41
42
  ```
42
43
 
43
44
  ## Demo
@@ -46,25 +47,45 @@ footer={<span>Footer</span>}
46
47
 
47
48
  ## API
48
49
 
49
- | Property | Description | Type | Default |
50
- | ---------------- | ----------------------------------------------------------- | --------------------------- | ------- |
51
- | matching | Main matching configuration | : MatchingProps | - |
52
- | onChangeMatching | Function called when user change value of StepCard matching | (matching: boolean) => void | - |
53
- | onChangeName | Function called when user change name of StepCard | (name: string) => void | - |
54
- | onDelete | Function called when user click on delete StepCard icon | () => void | - |
55
- | onDuplicate | Function called when user click on duplicate StepCard icon | () => void | - |
56
- | footer | React node to inject as footer of StepCard React.ReactNode | - |
57
- | headerRightSide | React node to inject into header right side slot | React.ReactNode | - |
58
- | texts | Object with translations | StepCardTexts | - |
59
- | readonly | Toggles editability (cruds, step name, draggability) | boolean | - |
50
+ | Property | Description | Type | Default |
51
+ | ----------------------- | ------------------------------------------------------------------------------------------------------- | --------------------------------------------------------------------- | ------- |
52
+ | matching | Current matching state; shown via Matching toggle | boolean | - |
53
+ | onMove | Called after 1000ms debounce with current index and cumulative offset | (index: number, offset: number) => void | - |
54
+ | expressionIndex | Current position in the list | number | - |
55
+ | expressionCount | Total number of steps; used to disable move up/down at boundaries | number | - |
56
+ | name | Step name | string | - |
57
+ | children | Condition content rendered in the body | React.ReactNode | - |
58
+ | footer | Content rendered in the footer section | React.ReactNode | - |
59
+ | onChangeMatching | Called when the matching toggle is clicked | (matching: boolean) => void | - |
60
+ | onDelete | Called when delete icon is clicked | () => void | - |
61
+ | onDuplicate | Called when duplicate icon is clicked | () => void | - |
62
+ | texts | Object with translations | Partial\<StepCardTexts\> | - |
63
+ | isHeaderVisible | Whether to render the header section | boolean | `true` |
64
+ | isDraggable | Shows drag handle icon and enables drag cursor | boolean | `true` |
65
+ | readOnly | Hides cruds, drag handle, and disables matching toggle | boolean | `false` |
66
+ | singleStepCondition | Removes bottom padding from body | boolean | `false` |
67
+ | headerRightSide | Static content in the header right slot | React.ReactNode | - |
68
+ | renderHeaderRightSide | Dynamic right-side renderer; also called in drag placeholder with `placeholder: true` | (index: number, options?: { placeholder?: boolean }) => React.ReactNode | - |
69
+ | getMoveByLabel | Custom accessible label for the pending move | (moveByOffset: number) => string | - |
70
+ | dropLabel | Content shown in the drag placeholder (blue dashed area) | React.ReactNode | - |
71
+ | additionalFields | Extra content rendered between body and footer, separated by a border | JSX.Element | - |
72
+ | expressionMoved | Set `true` to show a success "Moved" alert for 2000ms | boolean | - |
73
+ | dragHandleProps | dnd-kit drag handle attributes/listeners (from `@synerise/ds-sortable`) | DragHandlePropType | - |
74
+ | isDragged | When `true`, hides body content and shows the blue dashed placeholder | boolean | - |
75
+ | isDragOverlay | When `true`, renders a compact preview (76px, no footer, no right side) | boolean | - |
76
+ | dragIndex | Index passed to `renderHeaderRightSide` during drag overlay rendering | number | - |
60
77
 
61
78
  ### StepCardTexts
62
79
 
63
- | Property | Description | Type | Default |
64
- | ---------------- | --------------------------------------------------------- | ------ | -------------- |
65
- | matching | Label of Toggle component, visible when matching is true | string | 'Matching' |
66
- | notMatching | Label of Toggle component, visible when matching is false | string | 'Not matching' |
67
- | namePlaceholder | Placeholder of step name | string | 'Name' |
68
- | moveTooltip | Tooltip on move icon | string | 'Move' |
69
- | deleteTooltip | Tooltip on delete icon | string | 'Delete' |
70
- | duplicateTooltip | Tooltip on duplicate icon | string | 'Duplicate' |
80
+ | Property | Description | Type | Default |
81
+ | ---------------- | --------------------------------------------------------- | ------ | ---------------- |
82
+ | matching | Label of Toggle component, visible when matching is true | string | `'Performed'` |
83
+ | notMatching | Label of Toggle component, visible when matching is false | string | `'Not performed'`|
84
+ | conditionType | Condition type label when matching | string | `'event'` |
85
+ | notConditionType | Condition type label when not matching | string | `'event'` |
86
+ | namePlaceholder | Placeholder of step name | string | `'Name'` |
87
+ | moveTooltip | Tooltip on move icon | string | `'Move'` |
88
+ | moveUpTooltip | Tooltip on move up icon | string | `'Move Up'` |
89
+ | moveDownTooltip | Tooltip on move down icon | string | `'Move Down'` |
90
+ | deleteTooltip | Tooltip on delete icon | string | `'Delete'` |
91
+ | duplicateTooltip | Tooltip on duplicate icon | string | `'Duplicate'` |
package/package.json CHANGED
@@ -1,6 +1,6 @@
1
1
  {
2
2
  "name": "@synerise/ds-step-card",
3
- "version": "1.2.38",
3
+ "version": "1.2.39",
4
4
  "description": "StepCard UI Component for the Synerise Design System",
5
5
  "license": "ISC",
6
6
  "repository": "Synerise/synerise-design",
@@ -35,14 +35,14 @@
35
35
  ],
36
36
  "types": "dist/index.d.ts",
37
37
  "dependencies": {
38
- "@synerise/ds-alert": "^1.1.43",
39
- "@synerise/ds-cruds": "^1.1.0",
40
- "@synerise/ds-icon": "^1.14.1",
41
- "@synerise/ds-logic": "^1.1.30",
42
- "@synerise/ds-typography": "^1.1.11"
38
+ "@synerise/ds-alert": "^1.1.44",
39
+ "@synerise/ds-cruds": "^1.1.1",
40
+ "@synerise/ds-icon": "^1.15.0",
41
+ "@synerise/ds-logic": "^1.1.31",
42
+ "@synerise/ds-typography": "^1.1.12"
43
43
  },
44
44
  "devDependencies": {
45
- "@synerise/ds-sortable": "^1.3.12"
45
+ "@synerise/ds-sortable": "^1.3.13"
46
46
  },
47
47
  "peerDependencies": {
48
48
  "@synerise/ds-core": "*",
@@ -50,5 +50,5 @@
50
50
  "react-intl": ">=3.12.0 <= 6.8",
51
51
  "styled-components": "^5.3.3"
52
52
  },
53
- "gitHead": "8dfafc5d7278f09d430f1e7499782d05c76b47c0"
53
+ "gitHead": "8efc031fa688c0b87c7b3915bae93546bb63bcac"
54
54
  }