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 | 4x 4x 4x 4x 4x 82x 82x 4x | /*
* Copyright 2021 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 from 'react'
import { HarnessDocTooltip, Icon, Layout, Text } from '@wings-software/uicore'
import css from './COGatewayConfig.module.scss'
interface DataTooltip {
titleId?: string
subTitleId?: string
}
interface COGatewayConfigStepProps {
count: number
title: string
subTitle?: string
totalStepsCount?: number
id?: string
onInfoIconClick?: () => void
dataTooltip?: DataTooltip
}
const stepInfoColorMap: { [key: string]: { main: string; secondary: string } } = {
0: { main: '#FCB519', secondary: '#FFFBEE' },
1: { main: '#1e5c1f', secondary: '#e4f7e1' },
2: { main: '#0278D5', secondary: '#EFF8FE' },
3: { main: '#592BAA', secondary: '#E1D0FF' }
}
const COGatewayConfigStep: React.FC<COGatewayConfigStepProps> = props => {
const colorPallete = stepInfoColorMap[props.count % 4]
return (
<Layout.Vertical id={props.id} className={css.configStepContainer} spacing={'small'}>
<Layout.Horizontal className={css.stepInfo}>
<span style={{ color: colorPallete.main, backgroundColor: colorPallete.secondary }}>{`Step ${props.count} of ${
props.totalStepsCount || props.count
}`}</span>
</Layout.Horizontal>
<Text className={css.title} data-tooltip-id={props.dataTooltip?.titleId}>
{props.title}
{props.dataTooltip?.titleId && (
<HarnessDocTooltip tooltipId={props.dataTooltip.titleId} useStandAlone={true}></HarnessDocTooltip>
)}
{props.onInfoIconClick && <Icon name="info" onClick={props.onInfoIconClick}></Icon>}
</Text>
{props.subTitle && (
<Text className={css.subTitle} data-tooltip-id={props.dataTooltip?.subTitleId}>
{props.subTitle}
{props.dataTooltip?.subTitleId && (
<HarnessDocTooltip tooltipId={props.dataTooltip.subTitleId} useStandAlone={true} />
)}
</Text>
)}
{props.children && <div className={css.childrenContainer}>{props.children}</div>}
</Layout.Vertical>
)
}
export default COGatewayConfigStep
|