From f8cfa5e6e3ae74b84bb94ca3f982554709d2f7d0 Mon Sep 17 00:00:00 2001 From: Armand Philippot Date: Thu, 10 Feb 2022 19:15:21 +0100 Subject: chore: improve widgets * Make all widgets expanded by default. This way, without Javascript, thematics and topics are still available. * Improve collapse/expand transition. * Remove widget scrollbar: the height was sometimes weird because of that. Except for ToC on large devices. --- src/components/WidgetParts/ExpandableWidget/ExpandableWidget.tsx | 5 ++++- 1 file changed, 4 insertions(+), 1 deletion(-) (limited to 'src/components/WidgetParts/ExpandableWidget/ExpandableWidget.tsx') diff --git a/src/components/WidgetParts/ExpandableWidget/ExpandableWidget.tsx b/src/components/WidgetParts/ExpandableWidget/ExpandableWidget.tsx index 6a19d92..1040e7e 100644 --- a/src/components/WidgetParts/ExpandableWidget/ExpandableWidget.tsx +++ b/src/components/WidgetParts/ExpandableWidget/ExpandableWidget.tsx @@ -9,12 +9,14 @@ const ExpandableWidget = ({ 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(expand); @@ -23,9 +25,10 @@ const ExpandableWidget = ({ 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'] : '' -- cgit v1.2.3