Press n or j to go to the next uncovered block, b, p or k for the previous block.
| 1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 21 22 23 24 25 26 27 28 29 30 31 32 33 34 35 36 37 38 39 40 41 42 43 44 45 46 47 48 49 50 51 52 53 54 55 56 57 58 59 60 61 62 63 64 65 66 67 68 69 70 71 72 73 74 75 76 77 78 79 80 81 82 83 84 85 86 87 88 89 90 91 92 93 94 95 96 97 98 99 100 101 102 103 | 9x 9x 9x 9x 9x 9x 9x 26x 26x 26x 1x 9x | /*
* Copyright 2022 Harness Inc. All rights reserved.
* Use of this source code is governed by the PolyForm Shield 1.0.0 license
* that can be found in the licenses directory at the root of this repository, also available at
* https://polyformproject.org/wp-content/uploads/2020/06/PolyForm-Shield-1.0.0.txt.
*/
import React, { useState } from 'react'
import { Container, Layout, Color, ButtonSize, Text, Card, FontVariation, FlexExpander, Button } from '@harness/uicore'
import { Collapse } from '@blueprintjs/core'
import cx from 'classnames'
import { useStrings } from 'framework/strings'
import css from './Step.module.scss'
interface StepProps {
stepProps: {
color: Color
background: Color
total: number
current: number
defaultOpen: boolean
isComingSoon?: boolean
}
title: string
children: React.ReactElement
actionButtonProps?: {
showActionButton: boolean
actionButtonText: string
actionOnClick: () => void
}
}
const Step: (props: StepProps) => React.ReactElement = ({ stepProps, title, children, actionButtonProps }) => {
const [isOpen, setIsOpen] = useState<boolean>(stepProps.defaultOpen)
const { getString } = useStrings()
return (
<Card className={css.container}>
<Container className={cx({ [css.comingSoon]: stepProps.isComingSoon })}>
<Layout.Horizontal className={css.headerContainer}>
<Text
className={css.pillRadius}
color={stepProps.color}
background={stepProps.background}
padding={{
top: 'xsmall',
bottom: 'xsmall',
left: 'small',
right: 'small'
}}
font={{ variation: FontVariation.TINY }}
>
{getString('ce.businessMapping.stepText', {
current: stepProps.current,
total: stepProps.total
})}
</Text>
{stepProps.isComingSoon ? <Text padding={{ left: 'medium' }}>{getString('common.comingSoon')}</Text> : null}
<FlexExpander />
<Button
icon={isOpen ? 'chevron-up' : 'chevron-down'}
disabled={stepProps.isComingSoon}
iconProps={{
size: 20
}}
minimal
intent="primary"
onClick={() => {
!stepProps.isComingSoon && setIsOpen(val => !val)
}}
/>
</Layout.Horizontal>
<Layout.Horizontal className={css.headerContainer}>
<Text
padding={{
top: 'small'
}}
font={{ variation: FontVariation.CARD_TITLE }}
>
{title}
</Text>
<FlexExpander />
{actionButtonProps?.showActionButton ? (
<Button
icon="plus"
text={actionButtonProps?.actionButtonText}
minimal
size={ButtonSize.SMALL}
onClick={actionButtonProps?.actionOnClick}
/>
) : null}
</Layout.Horizontal>
<Collapse isOpen={isOpen} keepChildrenMounted>
{children}
</Collapse>
</Container>
</Card>
)
}
export default Step
|