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 | 356x 146x 146x 146x 1x 1x | import { ReactElement, ReactNode, useState } from "react";
import { FontAwesomeIcon } from "@fortawesome/react-fontawesome";
import styled from "styled-components";
import { useTranslation } from "react-i18next";
import { Button, ButtonStyle } from "client/components/Button";
interface Props {
buttonStyle?: ButtonStyle;
openAccordionText: string;
closeAccordionText: string;
children?: ReactNode;
initialValue?: boolean;
className?: string;
}
export const Accordion = ({
closeAccordionText,
openAccordionText,
buttonStyle = ButtonStyle.SECONDARY,
children,
initialValue = false,
className,
}: Props): ReactElement => {
const { t } = useTranslation();
const [open, setOpen] = useState<boolean>(initialValue);
const onClick = (): void => {
setOpen(!open);
};
return (
<div className={className}>
<AccordionToggle
onClick={() => onClick()}
buttonStyle={buttonStyle}
aria-label={t(
open ? "iconAltText.closeAccordion" : "iconAltText.openAccordion",
)}
>
<AccordionIcon
icon={open ? "angle-up" : "angle-down"}
aria-hidden="true"
/>
{open ? closeAccordionText : openAccordionText}
</AccordionToggle>
{open && <div>{children}</div>}
</div>
);
};
const AccordionToggle = styled(Button)`
padding: 6px 10px;
`;
const AccordionIcon = styled(FontAwesomeIcon)`
margin: 0 10px 0 0;
font-size: 18px;
`;
|