feat(scroll): add scroll to top button

CHANGELOG.md

@@ -1,5 +1,9 @@
 # Changelog
 
+## 3.0.18
+
+- Add new Scroll to top button component
+
 ## 3.0.17
 
 - Expose size property in circular progress component

package.json

@@ -1,6 +1,6 @@
 {
   "name": "@catena-x/portal-shared-components",
-  "version": "3.0.17",
+  "version": "3.0.18",
   "description": "Catena-X Portal Shared Components",
   "author": "Catena-X Contributors",
   "license": "Apache-2.0",

src/components/basic/Button/ScrollToTopButton.stories.tsx

@@ -0,0 +1,43 @@
+/********************************************************************************
+ * Copyright (c) 2023 BMW Group AG
+ * Copyright (c) 2023 Contributors to the Eclipse Foundation
+ *
+ * See the NOTICE file(s) distributed with this work for additional
+ * information regarding copyright ownership.
+ *
+ * This program and the accompanying materials are made available under the
+ * terms of the Apache License, Version 2.0 which is available at
+ * https://www.apache.org/licenses/LICENSE-2.0.
+ *
+ * Unless required by applicable law or agreed to in writing, software
+ * distributed under the License is distributed on an "AS IS" BASIS, WITHOUT
+ * WARRANTIES OR CONDITIONS OF ANY KIND, either express or implied. See the
+ * License for the specific language governing permissions and limitations
+ * under the License.
+ *
+ * SPDX-License-Identifier: Apache-2.0
+ ********************************************************************************/
+
+import { ComponentStory } from '@storybook/react'
+
+import { ScrollToTopButton as Component } from './ScrollToTopButton'
+
+export default {
+  title: 'Buttons',
+  component: Component,
+  tags: ['autodocs'],
+  argTypes: {
+    onButtonClick: {
+      action: 'onClick',
+    },
+  },
+}
+
+const Template: ComponentStory<typeof Component> = (args: any) => (
+  <Component {...args} />
+)
+
+export const ScrollToTopButton = Template.bind({})
+ScrollToTopButton.args = {
+  onButtonClick: () => {},
+}

src/components/basic/Button/ScrollToTopButton.tsx

@@ -0,0 +1,39 @@
+/********************************************************************************
+ * Copyright (c) 2024 Contributors to the Eclipse Foundation
+ *
+ * See the NOTICE file(s) distributed with this work for additional
+ * information regarding copyright ownership.
+ *
+ * This program and the accompanying materials are made available under the
+ * terms of the Apache License, Version 2.0 which is available at
+ * https://www.apache.org/licenses/LICENSE-2.0.
+ *
+ * Unless required by applicable law or agreed to in writing, software
+ * distributed under the License is distributed on an "AS IS" BASIS, WITHOUT
+ * WARRANTIES OR CONDITIONS OF ANY KIND, either express or implied. See the
+ * License for the specific language governing permissions and limitations
+ * under the License.
+ *
+ * SPDX-License-Identifier: Apache-2.0
+ ********************************************************************************/
+
+import { IconButton } from '../IconButton'
+import ArrowUpwardIcon from '@mui/icons-material/ArrowUpward'
+
+export interface ScrollToTopButtonProps {
+  onButtonClick: React.MouseEventHandler
+}
+
+export const ScrollToTopButton = ({
+  onButtonClick,
+}: ScrollToTopButtonProps) => {
+  return (
+    <IconButton
+      color="secondary"
+      onClick={onButtonClick}
+      sx={{ position: 'fixed', right: '40px', bottom: '20px' }}
+    >
+      <ArrowUpwardIcon />
+    </IconButton>
+  )
+}

src/components/index.tsx

@@ -66,6 +66,7 @@ export { Breadcrumb } from './basic/Breadcrumb'
 export { PageHeader } from './basic/Headers/PageHeader/PageHeader'
 export { MainHeader } from './basic/Headers/MainHeader/MainHeader'
 export { BackButton } from './basic/Button/BackButton'
+export { ScrollToTopButton } from './basic/Button/ScrollToTopButton'
 export { LoadMoreButton } from './basic/Button/LoadMoreButton'
 export { PageNotifications } from './basic/Notifications/PageNotification'
 export { PageSnackbar } from './basic/Notifications/Snackbar'