feat(ui): move ScrollToTopButton to ui

packages/ui/src/components/ScrollToTopButton/index.module.scss

@@ -0,0 +1,37 @@
+.utrecht-scroll-to-top-button__content:hover {
+  text-decoration: var(--utrecht-scroll-to-top-button-content-hover-text-decoration, underline);
+  text-decoration-thickness: var(--utrecht-scroll-to-top-button-content-hover-text-decoration-thickness, 1px);
+  text-underline-offset: var(--utrecht-scroll-to-top-button-content-hover-text-underline-offset, 3px);
+}
+
+.utrecht-scroll-to-top-button {
+  --utrecht-button-padding-block-start: 0;
+  --utrecht-button-padding-block-end: 0;
+  --utrecht-button-padding-inline-start: 0;
+  --utrecht-button-padding-inline-end: 0;
+  --utrecht-button-subtle-background-color: transparent;
+  --utrecht-button-subtle-border-color: transparent;
+  --utrecht-button-subtle-border-width: 0;
+  --utrecht-button-subtle-color: var(--utrecht-scroll-to-top-button-color, var(--utrecht-color-red-40));
+  --utrecht-button-subtle-font-weight: var(--utrecht-scroll-to-top-button-font-weight, 400);
+  --utrecht-button-subtle-active-background-color: transparent;
+  --utrecht-button-subtle-active-border-color: transparent;
+  --utrecht-button-subtle-active-color: var(--utrecht-scroll-to-top-button-active-color, var(--utrecht-color-red-40));
+  --utrecht-button-subtle-hover-background-color: transparent;
+  --utrecht-button-subtle-hover-border-color: transparent;
+  --utrecht-button-subtle-hover-color: var(--utrecht-scroll-to-top-button-hover-color, var(--utrecht-color-red-40));
+  --utrecht-button-subtle-focus-background-color: transparent;
+  --utrecht-button-subtle-focus-border-color: transparent;
+  --utrecht-button-subtle-focus-color: var(--utrecht-scroll-to-top-button-focus-color, var(--utrecht-color-red-40));
+  --utrecht-button-subtle-pressed-background-color: transparent;
+  --utrecht-button-subtle-pressed-border-color: transparent;
+  --utrecht-button-subtle-pressed-color: var(--utrecht-scroll-to-top-button-pressed-color, var(--utrecht-color-red-40));
+  --utrecht-button-hover-scale: 1;
+  --utrecht-button-focus-scale: 1;
+}
+
+.utrecht-scroll-to-top-button__icon {
+  --utrecht-icon-size: var(--utrecht-scroll-to-top-button-icon-size, 14px);
+
+  margin-inline-start: var(--utrecht-scroll-to-top-button-icon-margin-inline-start, var(--utrecht-space-inline-2xs));
+}

packages/ui/src/components/ScrollToTopButton/index.tsx

@@ -0,0 +1,42 @@
+import { Button } from '@utrecht/component-library-react';
+import classnames from 'classnames/bind';
+import React, { ButtonHTMLAttributes, ForwardedRef, forwardRef, HTMLAttributes, PropsWithChildren } from 'react';
+import styles from './index.module.scss';
+
+const css = classnames.bind(styles);
+
+export interface ScrollToTopButtonProps extends ButtonHTMLAttributes<HTMLButtonElement> {
+  Icon?: React.ComponentType<HTMLAttributes<HTMLElement>>;
+}
+
+export const scrollToTop = () => {
+  const reduceMotionQuery = window.matchMedia('(prefers-reduced-motion: reduce)');
+
+  if (reduceMotionQuery.matches) {
+    // If prefers-reduced-motion is set to reduce, instantly jump to the top
+    window.scrollTo(0, 0);
+  } else {
+    // If not, use smooth scrolling animation
+    window.scrollTo({ top: 0, behavior: 'smooth' });
+  }
+};
+
+export const ScrollToTopButton = forwardRef(
+  (
+    { children, Icon, ...restProps }: PropsWithChildren<ScrollToTopButtonProps>,
+    ref: ForwardedRef<HTMLButtonElement>,
+  ) => (
+    <Button
+      className={css('utrecht-scroll-to-top-button')}
+      appearance="subtle-button"
+      onClick={scrollToTop}
+      ref={ref}
+      {...restProps}
+    >
+      <span className={css('utrecht-scroll-to-top-button__content')}>{children}</span>
+      {Icon && <Icon className={css('utrecht-scroll-to-top-button__icon')} />}
+    </Button>
+  ),
+);
+
+ScrollToTopButton.displayName = 'ScrollToTopButton';

packages/ui/src/components/index.tsx

@@ -11,3 +11,4 @@ export * from './Navigation';
 export { PreviewAlert } from './PreviewAlert';
 export type { PreviewAlertProps } from './PreviewAlert';
 export * from './PriceWidget';
+export { ScrollToTopButton } from './ScrollToTopButton';