diff options
Diffstat (limited to 'src/components/molecules/buttons/heading-button.tsx')
| -rw-r--r-- | src/components/molecules/buttons/heading-button.tsx | 67 |
1 files changed, 0 insertions, 67 deletions
diff --git a/src/components/molecules/buttons/heading-button.tsx b/src/components/molecules/buttons/heading-button.tsx deleted file mode 100644 index 3c3eef5..0000000 --- a/src/components/molecules/buttons/heading-button.tsx +++ /dev/null @@ -1,67 +0,0 @@ -import { useCallback, type FC, type SetStateAction } from 'react'; -import { useIntl } from 'react-intl'; -import { Heading, type HeadingProps, Icon } from '../../atoms'; -import styles from './heading-button.module.scss'; - -export type HeadingButtonProps = Pick<HeadingProps, 'level'> & { - /** - * Set additional classnames to the button. - */ - className?: string; - /** - * Accordion state. - */ - expanded: boolean; - /** - * Callback function to set accordion state on click. - */ - setExpanded: (value: SetStateAction<boolean>) => void; - /** - * Accordion title. - */ - title: string; -}; - -/** - * HeadingButton component - * - * Render a button as accordion title to toggle body. - */ -export const HeadingButton: FC<HeadingButtonProps> = ({ - className = '', - expanded, - level, - setExpanded, - title, -}) => { - const intl = useIntl(); - const btnClass = `${styles.wrapper} ${className}`; - const iconState = expanded ? 'minus' : 'plus'; - const titlePrefix = expanded - ? intl.formatMessage({ - defaultMessage: 'Collapse', - description: 'HeadingButton: title prefix (expanded state)', - id: 'UX9Bu8', - }) - : intl.formatMessage({ - defaultMessage: 'Expand', - description: 'HeadingButton: title prefix (collapsed state)', - id: 'bcyOgC', - }); - - const toggleExpand = useCallback( - () => setExpanded((prev) => !prev), - [setExpanded] - ); - - return ( - <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> - <Icon className={styles.icon} shape={iconState} /> - </button> - ); -}; |
