@synerise/ds-step-card NPM

id: step-card

title: StepCard

StepCard UI Component

Installation

npm i @synerise/ds-step-card
or
yarn add @synerise/ds-step-card

Usage

import StepCard from '@synerise/ds-step-card'

<StepCard
matching={true}
onChangeMatching={(matchingValue) => {}}
name={'funnel'}
onChangeName={(name) => {}}
onDuplicate={() => {}}
onDelete={() => {}}
texts={{
  matching: 'Matching',
  notMatching: 'Not matching',
  namePlaceholder: 'Placeholder',
  moveTooltip: 'Move',
  deleteTooltip: 'Delete',
  duplicateTooltip: 'Duplicate',
}}
footer={<span>Footer</span>}
>
<span>Content</span>
</StepCard>

Demo

API

Property	Description	Type	Default
matching	Main matching configuration	: MatchingProps	-
onChangeMatching	Function called when user change value of StepCard matching	(matching: boolean) => void	-
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	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

Property	Description	Type	Default
matching	Label of Toggle component, visible when matching is true	string	'Matching'
notMatching	Label of Toggle component, visible when matching is false	string	'Not matching'
namePlaceholder	Placeholder of step name	string	'Name'
moveTooltip	Tooltip on move icon	string	'Move'
deleteTooltip	Tooltip on delete icon	string	'Delete'
duplicateTooltip	Tooltip on duplicate icon	string	'Duplicate'

@synerise/ds-alert @synerise/ds-cruds @synerise/ds-icon @synerise/ds-logic @synerise/ds-typography @synerise/ds-utils

@infinitebrahmanuniverse/nolb-_syn @everything-registry/sub-chunk-890 @zalastax/nolb-_syn @synerise/ds-filter @synerise/design-system

2 months ago

4 months ago

5 months ago

5 months ago

2 months ago

2 months ago

3 months ago

3 months ago

4 months ago

4 months ago

4 months ago

5 months ago

2 months ago

5 months ago

5 months ago

5 months ago

5 months ago

6 months ago

5 months ago

6 months ago

6 months ago

6 months ago

6 months ago

6 months ago

7 months ago

8 months ago

8 months ago

9 months ago

9 months ago

8 months ago

8 months ago

8 months ago

8 months ago

8 months ago

9 months ago

9 months ago

9 months ago

10 months ago

10 months ago

10 months ago

12 months ago

11 months ago

11 months ago

11 months ago

11 months ago

11 months ago

11 months ago

12 months ago

1 year ago

1 year ago

1 year ago

1 year ago

1 year ago

1 year ago

1 year ago

1 year ago

1 year ago

1 year ago

1 year ago

1 year ago

1 year ago

1 year ago

1 year ago

1 year ago

1 year ago

1 year ago

1 year ago

1 year ago

1 year ago

1 year ago

1 year ago

1 year ago

2 years ago

2 years ago

2 years ago

2 years ago

2 years ago

2 years ago

2 years ago

2 years ago

2 years ago

2 years ago

2 years ago

2 years ago

2 years ago

2 years ago

2 years ago

2 years ago

2 years ago

2 years ago

2 years ago

2 years ago

2 years ago

2 years ago

2 years ago

2 years ago

2 years ago

2 years ago

2 years ago

2 years ago

2 years ago

2 years ago

2 years ago

2 years ago

2 years ago

2 years ago

2 years ago

2 years ago

2 years ago

2 years ago

2 years ago

2 years ago

2 years ago

2 years ago

2 years ago

2 years ago

2 years ago

2 years ago

2 years ago

3 years ago

3 years ago

3 years ago

3 years ago

3 years ago

3 years ago

3 years ago

3 years ago

3 years ago

3 years ago

3 years ago

3 years ago

3 years ago

3 years ago

3 years ago

3 years ago

3 years ago

3 years ago

3 years ago

3 years ago

3 years ago

3 years ago

3 years ago

3 years ago

3 years ago

3 years ago

3 years ago

3 years ago

3 years ago

3 years ago

3 years ago

3 years ago

3 years ago

3 years ago

3 years ago

3 years ago

3 years ago

3 years ago

4 years ago

3 years ago

3 years ago

4 years ago

3 years ago

4 years ago

4 years ago

4 years ago

4 years ago

4 years ago

4 years ago

4 years ago

4 years ago

4 years ago

4 years ago

4 years ago

4 years ago

4 years ago

4 years ago

4 years ago

4 years ago

4 years ago

4 years ago

4 years ago

4 years ago

4 years ago

4 years ago

4 years ago

4 years ago

4 years ago

4 years ago

4 years ago

4 years ago

4 years ago

4 years ago

4 years ago

4 years ago

4 years ago

4 years ago

4 years ago

4 years ago

4 years ago

4 years ago

4 years ago

4 years ago

4 years ago

4 years ago

4 years ago

4 years ago

4 years ago

4 years ago

4 years ago

4 years ago

4 years ago

4 years ago

4 years ago

4 years ago

4 years ago

4 years ago

4 years ago

4 years ago

4 years ago

4 years ago

4 years ago

4 years ago

4 years ago

4 years ago

4 years ago

4 years ago

4 years ago

4 years ago

4 years ago

4 years ago