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 104 105 106 107 108 109 110 111 112 113 114 115 116 117 118 119 120 121 122 123 124 125 126 127 128 129 | 633x 1x 1x 5422x 5422x 5422x 5198x 3783x | import { MouseEventHandler, ReactElement, ReactNode } from "react";
import styled, { css } from "styled-components";
import { ButtonStyle } from "client/components/componentStyles";
interface Props {
children?: ReactNode;
disabled?: boolean;
onClick?: MouseEventHandler;
buttonStyle: ButtonStyle;
type?: "submit" | "button";
className?: string;
"data-testid"?: string;
"aria-label"?: string;
}
export const Button = ({
children,
disabled,
onClick,
buttonStyle,
type = "button",
className,
"data-testid": dataTestId,
"aria-label": ariaLabel,
}: Props): ReactElement => {
return (
<StyledButton
className={className}
onClick={onClick}
type={type}
data-testid={dataTestId}
$buttonStyle={buttonStyle}
disabled={disabled}
aria-label={ariaLabel}
>
{children}
</StyledButton>
);
};
const disabledButton = css`
opacity: 0.4;
cursor: not-allowed;
`;
const StyledButton = styled.button<{ $buttonStyle: ButtonStyle }>`
border-radius: 6px;
cursor: pointer;
box-shadow: ${(props) => props.theme.shadowButton};
font-size: ${(props) => props.theme.fontSizeSmall};
white-space: nowrap;
${(props) => {
if (props.disabled && props.$buttonStyle === ButtonStyle.SECONDARY) {
return css`
background: ${props.theme.buttonSecondaryBackground};
border: 2px solid ${props.theme.buttonSecondaryBorder};
color: ${props.theme.textMain};
padding: 6px 20px;
${disabledButton}
`;
}
if (!props.disabled && props.$buttonStyle === ButtonStyle.SECONDARY) {
return css`
background: ${props.theme.buttonSecondaryBackground};
border: 2px solid ${props.theme.buttonSecondaryBorder};
color: ${props.theme.textMain};
padding: 6px 20px;
/* Touch devices emulate :hover on tap and keep it active after the tap,
so only style hover when the device can actually hover */
@media (hover: hover) {
&:hover,
&:focus-visible {
background: ${props.theme.buttonSecondaryHover};
color: ${props.theme.textMain};
}
}
&:focus-visible {
background: ${props.theme.buttonSecondaryHover};
color: ${props.theme.textMain};
}
&:active {
background: ${props.theme.buttonSecondaryClicked};
box-shadow: none;
}
`;
}
if (props.disabled && props.$buttonStyle === ButtonStyle.PRIMARY) {
return css`
background: ${props.theme.buttonPrimaryBackground};
border: none;
color: ${props.theme.buttonPrimaryText};
padding: 8px 20px;
${disabledButton}
`;
}
// Default: primary, not disabled
return css`
background: ${props.theme.buttonPrimaryBackground};
border: none;
color: ${props.theme.buttonPrimaryText};
padding: 8px 20px;
@media (hover: hover) {
&:hover,
&:focus-visible {
background: ${props.theme.buttonPrimaryHover};
color: ${props.theme.buttonPrimaryText};
}
}
&:focus-visible {
background: ${props.theme.buttonPrimaryHover};
color: ${props.theme.buttonPrimaryText};
}
&:active {
background: ${props.theme.buttonPrimaryClicked};
box-shadow: none;
}
`;
}}
`;
|