aboutsummaryrefslogtreecommitdiffstats
path: root/src/components/molecules/layout/widget.tsx
diff options
context:
space:
mode:
Diffstat (limited to 'src/components/molecules/layout/widget.tsx')
-rw-r--r--src/components/molecules/layout/widget.tsx61
1 files changed, 0 insertions, 61 deletions
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>
- );
-};