1 files changed, 66 insertions, 0 deletions
diff --git a/src/components/molecules/buttons/heading-button.tsx b/src/components/molecules/buttons/heading-button.tsx
new file mode 100644
index 0000000..700b3e1
--- /dev/null
+++ b/src/components/molecules/buttons/heading-button.tsx
@@ -0,0 +1,66 @@
+import Heading, { type HeadingProps } from '@components/atoms/headings/heading';
+import PlusMinus from '@components/atoms/icons/plus-minus';
+import { FC, SetStateAction } from 'react';
+import { useIntl } from 'react-intl';
+import styles from './heading-button.module.scss';
+
+export type HeadingButtonProps = Pick<HeadingProps, 'level'> & {
+  /**
+   * 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.
+ */
+const HeadingButton: FC<HeadingButtonProps> = ({
+  expanded,
+  level,
+  setExpanded,
+  title,
+}) => {
+  const intl = useIntl();
+  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',
+      });
+
+  return (
+    <button
+      type="button"
+      className={styles.wrapper}
+      onClick={() => setExpanded(!expanded)}
+    >
+      <Heading
+        level={level}
+        withMargin={false}
+        additionalClasses={styles.heading}
+      >
+        <span className="screen-reader-text">{titlePrefix} </span>
+        {title}
+      </Heading>
+      <PlusMinus state={iconState} additionalClasses={styles.icon} />
+    </button>
+  );
+};
+
+export default HeadingButton;