From 4e53a8654441481029746ff4e35a4a19c8d83709 Mon Sep 17 00:00:00 2001
From: Armand Philippot <git@armandphilippot.com>
Date: Tue, 17 May 2022 18:43:24 +0200
Subject: chore: make some widgets scrollable (like ToC)

---
 src/components/molecules/layout/widget.tsx | 8 +++++++-
 1 file changed, 7 insertions(+), 1 deletion(-)

(limited to 'src/components/molecules/layout/widget.tsx')

diff --git a/src/components/molecules/layout/widget.tsx b/src/components/molecules/layout/widget.tsx
index feb2add..f50fe80 100644
--- a/src/components/molecules/layout/widget.tsx
+++ b/src/components/molecules/layout/widget.tsx
@@ -20,6 +20,10 @@ export type WidgetProps = Pick<
    * Determine if the widget body should have borders. Default: false.
    */
   withBorders?: boolean;
+  /**
+   * Determine if a vertical scrollbar should be displayed. Default: false.
+   */
+  withScroll?: boolean;
 };
 
 /**
@@ -34,16 +38,18 @@ const Widget: FC<WidgetProps> = ({
   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';
 
   return (
     <div
-      className={`${styles.widget} ${styles[bordersClass]} ${styles[stateClass]} ${className}`}
+      className={`${styles.widget} ${styles[bordersClass]} ${styles[stateClass]} ${styles[scrollClass]} ${className}`}
     >
       <HeadingButton
         level={level}
-- 
cgit v1.2.3