aboutsummaryrefslogtreecommitdiffstats
path: root/src/components/molecules/buttons/heading-button.tsx
diff options
context:
space:
mode:
Diffstat (limited to 'src/components/molecules/buttons/heading-button.tsx')
-rw-r--r--src/components/molecules/buttons/heading-button.tsx67
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>
- );
-};