feat: add scroll to the active tab (#311)

Author: aeksandla

src/blocks/Tabs/Tabs.tsx

@@ -102,6 +102,14 @@ export const TabsBlock = ({
         </Col>
     );
 
+    const onSelectTab = (
+        id: string | null,
+        e: React.MouseEvent<HTMLButtonElement | HTMLAnchorElement>,
+    ) => {
+        setActiveTab(id);
+        e.currentTarget.scrollIntoView({inline: 'center', behavior: 'smooth', block: 'nearest'});
+    };
+
     return (
         <AnimateBlock className={b()} onScroll={() => setPlay(true)} animate={animated}>
             <BlockHeader
@@ -113,7 +121,7 @@ export const TabsBlock = ({
                 <Col sizes={tabsColSizes}>
                     <ButtonTabs
                         items={tabs}
-                        onSelectTab={setActiveTab}
+                        onSelectTab={onSelectTab}
                         activeTab={activeTab}
                         className={b('tabs', {centered: centered})}
                     />

src/components/Button/Button.tsx

@@ -15,7 +15,7 @@ import './Button.scss';
 export interface ButtonProps extends Omit<ButtonParams, 'url'> {
     className?: string;
     url?: string;
-    onClick?: () => void;
+    onClick?: React.MouseEventHandler<HTMLButtonElement | HTMLAnchorElement>;
     qa?: string;
 }
 
@@ -39,14 +39,17 @@ const Button = (props: ButtonProps) => {
     } = props;
     const defaultImgPosition = 'left';
     const handleAnalytics = useAnalytics(DefaultEventNames.Button, url);
-    const onClick = useCallback(() => {
-        handleMetrika({metrikaGoals, pixelEvents});
-        handleAnalytics(analyticsEvents);
-
-        if (onClickOrigin) {
-            onClickOrigin();
-        }
-    }, [handleMetrika, metrikaGoals, pixelEvents, handleAnalytics, analyticsEvents, onClickOrigin]);
+    const onClick = useCallback(
+        (e: React.MouseEvent<HTMLButtonElement | HTMLAnchorElement>) => {
+            handleMetrika({metrikaGoals, pixelEvents});
+            handleAnalytics(analyticsEvents);
+
+            if (onClickOrigin) {
+                onClickOrigin(e);
+            }
+        },
+        [handleMetrika, metrikaGoals, pixelEvents, handleAnalytics, analyticsEvents, onClickOrigin],
+    );
 
     const buttonImg =
         img instanceof Object

src/components/ButtonTabs/ButtonTabs.tsx

@@ -20,7 +20,10 @@ export interface ButtonTabsProps {
     className?: string;
     items: ButtonTabsItemProps[];
     activeTab?: string | null;
-    onSelectTab?: (tabId: string | null) => void;
+    onSelectTab?: (
+        tabId: string | null,
+        e: React.MouseEvent<HTMLButtonElement | HTMLAnchorElement>,
+    ) => void;
     tabSize?: ButtonSize;
     qa?: string;
 }
@@ -42,9 +45,9 @@ const ButtonTabs: React.FC<ButtonTabsProps> = ({
     }, [activeTab, items]);
 
     const handleClick = useCallback(
-        (tabId: string | null) => {
+        (tabId: string | null) => (e: React.MouseEvent<HTMLButtonElement | HTMLAnchorElement>) => {
             if (onSelectTab) {
-                onSelectTab(tabId);
+                onSelectTab(tabId, e);
             }
         },
         [onSelectTab],
@@ -58,7 +61,7 @@ const ButtonTabs: React.FC<ButtonTabsProps> = ({
                     className={b('item', {active: id === activeTabId})}
                     key={title}
                     size={tabSize}
-                    onClick={() => handleClick(id)}
+                    onClick={handleClick(id)}
                 />
             ))}
         </div>