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.

5 files changed, 0 insertions, 264 deletions

diff --git a/src/components/molecules/layout/index.ts b/src/components/molecules/layout/index.ts
index 9fa1216..1580baa 100644
--- a/src/components/molecules/layout/index.ts
+++ b/src/components/molecules/layout/index.ts
@@ -5,4 +5,3 @@ export * from './columns';
 export * from './meta';
 export * from './page-footer';
 export * from './page-header';
-export * from './widget';
diff --git a/src/components/molecules/layout/widget.module.scss b/src/components/molecules/layout/widget.module.scss
deleted file mode 100644
index 1a601e5..0000000
--- a/src/components/molecules/layout/widget.module.scss
+++ /dev/null
@@ -1,65 +0,0 @@
-@use "../../../styles/abstracts/functions" as fun;
-@use "../../../styles/abstracts/mixins" as mix;
-
-.widget {
-  display: flex;
-  flex-flow: column;
-
-  &__header {
-    z-index: 2;
-    background: var(--color-bg);
-  }
-
-  &__body {
-    position: relative;
-  }
-
-  &--has-borders & {
-    &__body {
-      border: fun.convert-px(2) solid var(--color-primary-dark);
-    }
-  }
-
-  &--collapsed & {
-    &__body {
-      max-height: 0;
-      margin: 0;
-      visibility: hidden;
-      opacity: 0;
-      overflow: hidden;
-      border: 0 solid transparent;
-      transition: all 0.1s linear 0.3s,
-        max-height 0.5s cubic-bezier(0, 1, 0, 1) 0s, margin 0.3s ease-in-out 0s;
-    }
-  }
-
-  &--expanded#{&}--has-scroll {
-    @include mix.media("screen") {
-      @include mix.dimensions("lg") {
-        max-height: 95vh;
-
-        .widget__body {
-          overflow: hidden;
-        }
-
-        &:hover,
-        &:focus-within {
-          .widget__body {
-            overflow-y: auto;
-          }
-        }
-      }
-    }
-  }
-
-  &--expanded & {
-    &__body {
-      max-height: 10000px; // needs a fixed value for transition.
-      margin: var(--spacing-sm) 0;
-      opacity: 1;
-      visibility: visible;
-      transition: all 0.5s ease-in-out 0s, border 0s linear 0s,
-        max-height 0.6s ease-in-out 0s;
-    }
-  }
-}
diff --git a/src/components/molecules/layout/widget.stories.tsx b/src/components/molecules/layout/widget.stories.tsx
deleted file mode 100644
index 8fb868d..0000000
--- a/src/components/molecules/layout/widget.stories.tsx
+++ /dev/null
@@ -1,117 +0,0 @@
-import { ComponentMeta, ComponentStory } from '@storybook/react';
-import headingButtonStories from '../buttons/heading-button.stories';
-import { Widget } from './widget';
-
-/**
- * Widget - Storybook Meta
- */
-export default {
-  title: 'Molecules/Layout/Widget',
-  component: Widget,
-  args: {
-    withBorders: false,
-    withScroll: false,
-  },
-  argTypes: {
-    children: {
-      control: {
-        type: 'text',
-      },
-      description: 'The widget body',
-      type: {
-        name: 'string',
-        required: true,
-      },
-    },
-    className: {
-      control: {
-        type: 'text',
-      },
-      description: 'Set additional classnames to the widget wrapper.',
-      table: {
-        category: 'Styles',
-      },
-      type: {
-        name: 'string',
-        required: false,
-      },
-    },
-    expanded: {
-      control: {
-        type: 'boolean',
-      },
-      description: 'The widget state (expanded or collapsed)',
-      table: {
-        category: 'Options',
-        defaultValue: { summary: true },
-      },
-      type: {
-        name: 'boolean',
-        required: false,
-      },
-    },
-    level: headingButtonStories.argTypes?.level,
-    title: {
-      control: {
-        type: 'text',
-      },
-      description: 'The widget title.',
-      type: {
-        name: 'string',
-        required: true,
-      },
-    },
-    withBorders: {
-      control: {
-        type: 'boolean',
-      },
-      description: 'Define if the content should have borders.',
-      table: {
-        category: 'Options',
-        defaultValue: { summary: false },
-      },
-      type: {
-        name: 'boolean',
-        required: false,
-      },
-    },
-    withScroll: {
-      control: {
-        type: 'boolean',
-      },
-      description: 'Define if the widget should be scrollable',
-      table: {
-        category: 'Options',
-        defaultValue: { summary: false },
-      },
-      type: {
-        name: 'boolean',
-        required: false,
-      },
-    },
-  },
-} as ComponentMeta<typeof Widget>;
-
-const Template: ComponentStory<typeof Widget> = (args) => <Widget {...args} />;
-
-/**
- * Widget Stories - Expanded
- */
-export const Expanded = Template.bind({});
-Expanded.args = {
-  children: 'Widget body',
-  expanded: true,
-  level: 2,
-  title: 'Widget title',
-};
-
-/**
- * Widget Stories - Collapsed
- */
-export const Collapsed = Template.bind({});
-Collapsed.args = {
-  children: 'Widget body',
-  expanded: false,
-  level: 2,
-  title: 'Widget title',
-};
diff --git a/src/components/molecules/layout/widget.test.tsx b/src/components/molecules/layout/widget.test.tsx
deleted file mode 100644
index 21c7a3c..0000000
--- a/src/components/molecules/layout/widget.test.tsx
+++ /dev/null
@@ -1,20 +0,0 @@
-import { describe, expect, it } from '@jest/globals';
-import { render, screen } from '../../../../tests/utils';
-import { Widget } from './widget';
-
-const children = 'Widget body';
-const title = 'Widget title';
-const titleLevel = 2;
-
-describe('Widget', () => {
-  it('renders the widget title', () => {
-    render(
-      <Widget expanded={true} title={title} level={titleLevel}>
-        {children}
-      </Widget>
-    );
-    expect(
-      screen.getByRole('heading', { level: titleLevel })
-    ).toHaveTextContent(title);
-  });
-});
diff --git a/src/components/molecules/layout/widget.tsx b/src/components/molecules/layout/widget.tsx
deleted file mode 100644
index 0bb04c7..0000000
--- a/src/components/molecules/layout/widget.tsx
+++ /dev/null
@@ -1,61 +0,0 @@
-import { FC, ReactNode, useState } from 'react';
-import { HeadingButton, type HeadingButtonProps } from '../buttons';
-import styles from './widget.module.scss';
-
-export type WidgetProps = Pick<
-  HeadingButtonProps,
-  'expanded' | 'level' | 'title'
-> & {
-  /**
-   * The widget body.
-   */
-  children: ReactNode;
-  /**
-   * Set additional classnames to the widget wrapper.
-   */
-  className?: string;
-  /**
-   * Determine if the widget body should have borders. Default: false.
-   */
-  withBorders?: boolean;
-  /**
-   * Determine if a vertical scrollbar should be displayed. Default: false.
-   */
-  withScroll?: boolean;
-};
-
-/**
- * Widget component
- *
- * Render an expandable widget.
- */
-export const Widget: FC<WidgetProps> = ({
-  children,
-  className = '',
-  expanded = true,
-  level,
-  title,
-  withBorders = false,
-  withScroll = false,
-}) => {
-  const [isExpanded, setIsExpanded] = useState<boolean>(expanded);
-  const stateClass = isExpanded ? 'widget--expanded' : 'widget--collapsed';
-  const bordersClass = withBorders
-    ? 'widget--has-borders'
-    : 'widget--no-borders';
-  const scrollClass = withScroll ? 'widget--has-scroll' : 'widget--no-scroll';
-  const widgetClass = `${styles.widget} ${styles[bordersClass]} ${styles[stateClass]} ${styles[scrollClass]} ${className}`;
-
-  return (
-    <div className={widgetClass}>
-      <HeadingButton
-        level={level}
-        title={title}
-        expanded={isExpanded}
-        setExpanded={setIsExpanded}
-        className={styles.widget__header}
-      />
-      <div className={styles.widget__body}>{children}</div>
-    </div>
-  );
-};