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 | 90x 90x 90x 90x 90x 90x 90x 90x 90x 90x 2835x 567x 90x 567x 567x 567x 567x 567x 567x 567x 567x 567x 567x 567x 90x | import classNames from 'classnames';
import React, { ButtonHTMLAttributes, FunctionComponent } from 'react';
export interface ButtonProps extends ButtonHTMLAttributes<HTMLButtonElement> {
isFullWidth?: boolean;
isLoading?: boolean;
size?: ButtonSize;
testId?: string;
variant?: ButtonVariant;
}
export enum ButtonVariant {
Primary = 'primary',
Secondary = 'secondary',
Action = 'action',
}
export enum ButtonSize {
Small = 'small',
Tiny = 'tiny',
Large = 'large',
}
function getClassName(props: Pick<ButtonProps, 'className' | 'isFullWidth' | 'isLoading' | 'size' | 'variant'>) {
const {
className,
isFullWidth,
isLoading,
size,
variant,
} = props;
return classNames(
'button',
className,
{ 'button--primary': variant === ButtonVariant.Primary },
{ 'button--tertiary': variant === ButtonVariant.Secondary },
{ 'button--action': variant === ButtonVariant.Action },
{ 'button--small': size === ButtonSize.Small },
{ 'button--tiny': size === ButtonSize.Tiny },
{ 'button--large': size === ButtonSize.Large },
{ 'button--slab': isFullWidth },
{ 'optimizedCheckout-buttonPrimary': variant === ButtonVariant.Primary || variant === ButtonVariant.Action },
{ 'optimizedCheckout-buttonSecondary': variant === ButtonVariant.Secondary },
{ 'is-loading': isLoading }
);
}
const Button: FunctionComponent<ButtonProps> = ({
children,
className,
disabled,
isFullWidth,
isLoading,
size,
testId,
type,
variant,
...rest
}) => (
<button
{ ...rest }
className={ getClassName({ className, isFullWidth, isLoading, size, variant }) }
data-test={ testId }
disabled={ disabled || isLoading }
type={ type ? type : 'button' }
>
{ children }
</button>
);
export default Button;
|