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

PropertyDescriptionTypeDefault
matchingMain matching configuration: MatchingProps-
onChangeMatchingFunction called when user change value of StepCard matching(matching: boolean) => void-
onChangeNameFunction called when user change name of StepCard(name: string) => void-
onDeleteFunction called when user click on delete StepCard icon() => void-
onDuplicateFunction called when user click on duplicate StepCard icon() => void-
footerFunction which renders footer of StepCardReact.ReactNode-
textsObject with translationsStepCardTexts-

StepCardTexts

PropertyDescriptionTypeDefault
matchingLabel of Toggle component, visible when matching is truestring'Matching'
notMatchingLabel of Toggle component, visible when matching is falsestring'Not matching'
namePlaceholderPlaceholder of step namestring'Name'
moveTooltipTooltip on move iconstring'Move'
deleteTooltipTooltip on delete iconstring'Delete'
duplicateTooltipTooltip on duplicate iconstring'Duplicate'