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 | 4x 4x 4x 4x 4x 4x 4x 4x 811x 811x 811x 811x 811x 811x 811x 811x 1x 4x | import classNames from 'classnames';
import { noop } from 'lodash';
import React, { memo, FunctionComponent, ReactNode } from 'react';
import { preventDefault } from '../common/dom';
import { TranslatedString } from '../locale';
import { Button, ButtonSize, ButtonVariant } from '../ui/button';
import { IconCheck } from '../ui/icon';
import CheckoutStepType from './CheckoutStepType';
export interface CheckoutStepHeaderProps {
heading: ReactNode;
isActive?: boolean;
isComplete?: boolean;
isEditable?: boolean;
summary?: ReactNode;
type: CheckoutStepType;
onEdit?(type: CheckoutStepType): void;
}
const CheckoutStepHeader: FunctionComponent<CheckoutStepHeaderProps> = ({
heading,
isActive,
isComplete,
isEditable,
onEdit,
summary,
type,
}) => {
return (
<a
className={ classNames(
'stepHeader',
{ 'is-readonly': !isEditable }
) }
onClick={ preventDefault(isEditable && onEdit ? () => onEdit(type) : noop) }
>
<div className="stepHeader-figure stepHeader-column">
<IconCheck
additionalClassName={ classNames(
'stepHeader-counter',
'optimizedCheckout-step',
{ 'stepHeader-counter--complete': isComplete }
) }
/>
<h2 className="stepHeader-title optimizedCheckout-headingPrimary">
{ heading }
</h2>
</div>
<div
className="stepHeader-body stepHeader-column optimizedCheckout-contentPrimary"
data-test="step-info"
>
{ !isActive && isComplete && summary }
</div>
{ isEditable && !isActive && <div className="stepHeader-actions stepHeader-column">
<Button
size={ ButtonSize.Tiny }
testId="step-edit-button"
variant={ ButtonVariant.Secondary }
>
<TranslatedString id="common.edit_action" />
</Button>
</div> }
</a>
);
};
export default memo(CheckoutStepHeader);
|