From 3cd13bed625d8fb304429909a8f731093131e3fc Mon Sep 17 00:00:00 2001
From: Rob Phoenix <9257284+robphoenix@users.noreply.github.com>
Date: Mon, 25 Nov 2024 15:02:36 +0000
Subject: [PATCH] add BackToTop button (#620)

---
 .../src/components/Alert/Alert.docs.mdx       |  2 +-
 .../src/storybook-components/BackToTop.tsx    | 47 +++++++++++++++++++
 .../src/storybook-components/DocsHeader.tsx   |  3 ++
 .../web-ui/src/storybook-components/index.ts  |  1 +
 4 files changed, 52 insertions(+), 1 deletion(-)
 create mode 100644 packages/web-ui/src/storybook-components/BackToTop.tsx

diff --git a/packages/web-ui/src/components/Alert/Alert.docs.mdx b/packages/web-ui/src/components/Alert/Alert.docs.mdx
index 926cf0a61..32c5c91c2 100644
--- a/packages/web-ui/src/components/Alert/Alert.docs.mdx
+++ b/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} />
 
diff --git a/packages/web-ui/src/storybook-components/BackToTop.tsx b/packages/web-ui/src/storybook-components/BackToTop.tsx
new file mode 100644
index 000000000..2e33e2928
--- /dev/null
+++ b/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>
+  );
+};
diff --git a/packages/web-ui/src/storybook-components/DocsHeader.tsx b/packages/web-ui/src/storybook-components/DocsHeader.tsx
index f6b864547..b3ed016c3 100644
--- a/packages/web-ui/src/storybook-components/DocsHeader.tsx
+++ b/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>
 );
diff --git a/packages/web-ui/src/storybook-components/index.ts b/packages/web-ui/src/storybook-components/index.ts
index 4af12f768..257914ca9 100644
--- a/packages/web-ui/src/storybook-components/index.ts
+++ b/packages/web-ui/src/storybook-components/index.ts
@@ -1,3 +1,4 @@
 export * from './Backgrounds';
 export * from './DocsHeader';
 export * from './Placeholder';
+export * from './BackToTop';