blob: feb2add19dd55afe1f27f8d485ee8cb95636bf17 (
plain)
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
50
51
52
53
54
55
56
57
58
59
60
|
import { FC, ReactNode, useState } from 'react';
import HeadingButton, {
type HeadingButtonProps,
} from '../buttons/heading-button';
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;
};
/**
* Widget component
*
* Render an expandable widget.
*/
const Widget: FC<WidgetProps> = ({
children,
className = '',
expanded = true,
level,
title,
withBorders = false,
}) => {
const [isExpanded, setIsExpanded] = useState<boolean>(expanded);
const stateClass = isExpanded ? 'widget--expanded' : 'widget--collapsed';
const bordersClass = withBorders
? 'widget--has-borders'
: 'widget--no-borders';
return (
<div
className={`${styles.widget} ${styles[bordersClass]} ${styles[stateClass]} ${className}`}
>
<HeadingButton
level={level}
title={title}
expanded={isExpanded}
setExpanded={setIsExpanded}
className={styles.widget__header}
/>
<div className={styles.widget__body}>{children}</div>
</div>
);
};
export default Widget;
|
