add BackToTop button (#620)

packages/web-ui/src/components/Alert/Alert.docs.mdx

@@ -2,7 +2,7 @@ import { Meta, Canvas, ArgTypes } from '@storybook/blocks';
 
 import * as Stories from './Alert.stories';
 
-import { DocsHeader } from '../../storybook-components';
+import { DocsHeader, BackToTop } from '../../storybook-components';
 
 <Meta of={Stories} />
 

packages/web-ui/src/storybook-components/BackToTop.tsx

@@ -0,0 +1,47 @@
+import * as React from 'react';
+
+import { Unstyled } from '@storybook/blocks';
+
+import { ChevronUpSmallIcon } from '@utilitywarehouse/react-icons';
+
+import { Button } from '../components';
+
+export const BackToTop = () => {
+  const [visible, setVisible] = React.useState(false);
+
+  const toggleVisible = () => {
+    const scrolled = document.documentElement.scrollTop;
+    if (scrolled > 300) {
+      setVisible(true);
+    } else if (scrolled <= 300) {
+      setVisible(false);
+    }
+  };
+
+  const scrollToTop = () => {
+    window.scrollTo({
+      top: 0,
+      behavior: 'smooth',
+    });
+  };
+
+  window.addEventListener('scroll', toggleVisible);
+
+  return (
+    <Button
+      size="small"
+      onClick={scrollToTop}
+      variant="ghost"
+      sx={{
+        display: visible ? 'flex' : 'none',
+        position: 'fixed',
+        right: 20,
+        bottom: 40,
+        zIndex: 1,
+      }}
+    >
+      <ChevronUpSmallIcon />
+      Back to top
+    </Button>
+  );
+};

packages/web-ui/src/storybook-components/DocsHeader.tsx

@@ -2,6 +2,8 @@ import * as React from 'react';
 
 import { Unstyled, Description } from '@storybook/blocks';
 
+import { BackToTop } from './BackToTop';
+
 import { Alert, Flex, Heading, Link } from '../components';
 
 interface DocsHeaderProps {
@@ -39,5 +41,6 @@ export const DocsHeader = ({
         />
       ) : null}
     </Flex>
+    <BackToTop />
   </Unstyled>
 );

packages/web-ui/src/storybook-components/index.ts

@@ -1,3 +1,4 @@
 export * from './Backgrounds';
 export * from './DocsHeader';
 export * from './Placeholder';
+export * from './BackToTop';