refactor(components): merge HeadingButton and Widget components

The HeadingButton component was only used inside Widget component and
it is not very useful on its own so I merge the two components in a
new Collapsible component.

1 files changed, 12 insertions, 8 deletions

diff --git a/src/components/organisms/widgets/image-widget.tsx b/src/components/organisms/widgets/image-widget.tsx
index f3dc92f..07c4b11 100644
--- a/src/components/organisms/widgets/image-widget.tsx
+++ b/src/components/organisms/widgets/image-widget.tsx
@@ -1,9 +1,9 @@
-import { FC } from 'react';
+import type { FC } from 'react';
 import {
   ResponsiveImage,
   type ResponsiveImageProps,
-  Widget,
-  type WidgetProps,
+  Collapsible,
+  type CollapsibleProps,
 } from '../../molecules';
 import styles from './image-widget.module.scss';
 
@@ -14,9 +14,9 @@ export type Image = Pick<
   'alt' | 'height' | 'src' | 'width'
 >;
 
-export type ImageWidgetProps = Pick<
-  WidgetProps,
-  'className' | 'expanded' | 'level' | 'title'
+export type ImageWidgetProps = Omit<
+  CollapsibleProps,
+  'children' | 'onToggle'
 > & {
   /**
    * The content alignment.
@@ -51,19 +51,23 @@ export const ImageWidget: FC<ImageWidgetProps> = ({
   description,
   image,
   imageClassName = '',
+  isCollapsed,
   url,
   ...props
 }) => {
   const alignmentClass = `widget--${alignment}`;
 
   return (
-    <Widget className={`${styles[alignmentClass]} ${className}`} {...props}>
+    <Collapsible
+      {...props}
+      className={`${styles[alignmentClass]} ${className}`}
+    >
       <ResponsiveImage
         {...image}
         caption={description}
         className={`${styles.figure} ${imageClassName}`}
         target={url}
       />
-    </Widget>
+    </Collapsible>
   );
 };