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 | 356x 1x 1x 1x | import { ReactElement } from "react";
import styled from "styled-components";
import { FontAwesomeIcon } from "@fortawesome/react-fontawesome";
interface Props {
isExpanded: boolean;
showMoreText: string;
showLessText: string;
showMoreAriaLabel: string;
showLessAriaLabel: string;
ariaControls: string;
onClick: () => void;
}
export const ExpandButton = ({
isExpanded,
showMoreText,
showLessText,
showMoreAriaLabel,
showLessAriaLabel,
ariaControls,
onClick,
}: Props): ReactElement => {
return (
<ButtonContainer
role="button"
onClick={onClick}
aria-controls={ariaControls}
aria-expanded={isExpanded}
aria-label={isExpanded ? showLessAriaLabel : showMoreAriaLabel}
>
<ArrowIcon
aria-hidden="true"
icon={isExpanded ? "angle-up" : "angle-down"}
/>
<ButtonText>{isExpanded ? showLessText : showMoreText}</ButtonText>
</ButtonContainer>
);
};
const ArrowIcon = styled(FontAwesomeIcon)`
margin: 0 8px 4px 0;
font-size: 16px;
`;
const ButtonContainer = styled.div`
display: flex;
align-items: center;
cursor: pointer;
`;
const ButtonText = styled.span`
text-decoration: underline;
`;
|