blob: 1040e7e594631a25f2870dda21f3569d9731ad3a (
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
|
import { TitleLevel } from '@ts/types/app';
import { ReactNode, useState } from 'react';
import { useIntl } from 'react-intl';
import styles from './ExpandableWidget.module.scss';
const ExpandableWidget = ({
children,
title,
titleLevel = 2,
expand = false,
withBorders = false,
kind = 'regular',
}: {
children: ReactNode;
title: string;
titleLevel?: TitleLevel;
expand?: boolean;
withBorders?: boolean;
kind?: 'regular' | 'toc';
}) => {
const intl = useIntl();
const [isExpanded, setIsExpanded] = useState<boolean>(expand);
const handleExpanse = () => setIsExpanded((prev) => !prev);
const TitleTag = `h${titleLevel}` as keyof JSX.IntrinsicElements;
const wrapperKindClass = styles[`wrapper--${kind}`];
const wrapperClasses = `${styles.wrapper} ${
isExpanded ? styles['wrapper--expanded'] : ''
} ${wrapperKindClass}`;
const bodyClasses = `${styles.body} ${
withBorders ? styles['body--borders'] : ''
}`;
return (
<div className={wrapperClasses}>
<button type="button" className={styles.header} onClick={handleExpanse}>
<span className="screen-reader-text">
{isExpanded
? intl.formatMessage({
defaultMessage: 'Collapse',
description: 'ExpandableWidget: collapse text',
})
: intl.formatMessage({
defaultMessage: 'Expand',
description: 'ExpandableWidget: expand text',
})}
</span>
<TitleTag className={styles.title}>{title}</TitleTag>
<span className={styles.icon} aria-hidden={true}></span>
</button>
<div className={bodyClasses}>{children}</div>
</div>
);
};
export default ExpandableWidget;
|
