diff options
Diffstat (limited to 'src/components/molecules/buttons/heading-button.tsx')
| -rw-r--r-- | src/components/molecules/buttons/heading-button.tsx | 17 |
1 files changed, 10 insertions, 7 deletions
diff --git a/src/components/molecules/buttons/heading-button.tsx b/src/components/molecules/buttons/heading-button.tsx index 93ccdbe..97e2c84 100644 --- a/src/components/molecules/buttons/heading-button.tsx +++ b/src/components/molecules/buttons/heading-button.tsx @@ -1,4 +1,4 @@ -import { FC, SetStateAction } from 'react'; +import { useCallback, type FC, type SetStateAction } from 'react'; import { useIntl } from 'react-intl'; import { Heading, type HeadingProps, PlusMinus } from '../../atoms'; import styles from './heading-button.module.scss'; @@ -35,6 +35,7 @@ export const HeadingButton: FC<HeadingButtonProps> = ({ title, }) => { const intl = useIntl(); + const btnClass = `${styles.wrapper} ${className}`; const iconState = expanded ? 'minus' : 'plus'; const titlePrefix = expanded ? intl.formatMessage({ @@ -48,13 +49,15 @@ export const HeadingButton: FC<HeadingButtonProps> = ({ id: 'bcyOgC', }); + const toggleExpand = useCallback( + () => setExpanded((prev) => !prev), + [setExpanded] + ); + return ( - <button - className={`${styles.wrapper} ${className}`} - onClick={() => setExpanded(!expanded)} - type="button" - > - <Heading level={level} withMargin={false} className={styles.heading}> + <button className={btnClass} onClick={toggleExpand} type="button"> + <Heading className={styles.heading} level={level}> + {/* eslint-disable-next-line react/jsx-no-literals -- SR class allowed */} <span className="screen-reader-text">{titlePrefix} </span> {title} </Heading> |