refactor: rename ScrollToTopButton to ScrollToStartButton

"start" instead of "top" is in line with our logical properties approach

packages/component-library-react/src/ScrollToTopButton.test.tsx → packages/component-library-react/src/ScrollToStartButton.test.tsx

@@ -1,13 +1,13 @@
 import { fireEvent, render, screen } from '@testing-library/react';
 import { createRef } from 'react';
-import { ScrollToTopButton } from './ScrollToTopButton';
+import { ScrollToStartButton } from './ScrollToStartButton';
 import '@testing-library/jest-dom';
 
 window.scrollTo = jest.fn();
 
-describe('Separator', () => {
+describe('Scroll to start button', () => {
   it('renders an button role element', () => {
-    render(<ScrollToTopButton />);
+    render(<ScrollToStartButton />);
 
     const button = screen.getByRole('button');
 
@@ -19,8 +19,8 @@ describe('Separator', () => {
     const scrollToTopMock = jest.fn();
     window.scrollTo = scrollToTopMock;
 
-    render(<ScrollToTopButton>Scroll to Top</ScrollToTopButton>);
-    const button = screen.getByText('Scroll to Top');
+    render(<ScrollToStartButton>Scroll to start</ScrollToStartButton>);
+    const button = screen.getByText('Scroll to start');
 
     fireEvent.click(button);
 
@@ -35,8 +35,8 @@ describe('Separator', () => {
     const scrollToTopMock = jest.fn();
     window.scrollTo = scrollToTopMock;
 
-    render(<ScrollToTopButton>Scroll to Top</ScrollToTopButton>);
-    const button = screen.getByText('Scroll to Top');
+    render(<ScrollToStartButton>Scroll to start</ScrollToStartButton>);
+    const button = screen.getByText('Scroll to start');
 
     fireEvent.click(button);
 
@@ -45,7 +45,7 @@ describe('Separator', () => {
   });
 
   it('renders an button HTML element', () => {
-    const { container } = render(<ScrollToTopButton />);
+    const { container } = render(<ScrollToStartButton />);
 
     const button = container.querySelector('button:only-child');
 
@@ -55,7 +55,7 @@ describe('Separator', () => {
   it('supports ForwardRef in React', () => {
     const ref = createRef<HTMLButtonElement>();
 
-    const { container } = render(<ScrollToTopButton ref={ref} />);
+    const { container } = render(<ScrollToStartButton ref={ref} />);
 
     const button = container.querySelector(':only-child');
 
@@ -64,13 +64,13 @@ describe('Separator', () => {
 
   it('should render the button content with the provided children', () => {
     const { container } = render(
-      <ScrollToTopButton>
-        <span>Scroll to Top</span>
-      </ScrollToTopButton>,
+      <ScrollToStartButton>
+        <span>Scroll to start</span>
+      </ScrollToStartButton>,
     );
 
     const contentElement = container.querySelector('span');
 
-    expect(contentElement).toHaveTextContent('Scroll to Top');
+    expect(contentElement).toHaveTextContent('Scroll to start');
   });
 });

packages/component-library-react/src/ScrollToTopButton.tsx → packages/component-library-react/src/ScrollToStartButton.tsx

@@ -1,7 +1,7 @@
 import React, { ForwardedRef, forwardRef, HTMLAttributes, PropsWithChildren } from 'react';
 import { Button, ButtonProps } from './index';
 
-export interface ScrollToTopButtonProps extends ButtonProps {
+export interface ScrollToStartButtonProps extends ButtonProps {
   Icon?: React.ComponentType<HTMLAttributes<HTMLElement>>;
 }
 
@@ -17,12 +17,12 @@ export const scrollToTop = () => {
   }
 };
 
-export const ScrollToTopButton = forwardRef(
-  ({ children, ...restProps }: PropsWithChildren<ScrollToTopButtonProps>, ref: ForwardedRef<HTMLButtonElement>) => (
+export const ScrollToStartButton = forwardRef(
+  ({ children, ...restProps }: PropsWithChildren<ScrollToStartButtonProps>, ref: ForwardedRef<HTMLButtonElement>) => (
     <Button onClick={scrollToTop} ref={ref} {...restProps}>
       {children}
     </Button>
   ),
 );
 
-ScrollToTopButton.displayName = 'ScrollToTopButton';
+ScrollToStartButton.displayName = 'ScrollToStartButton';

packages/component-library-react/src/index.ts

@@ -149,8 +149,8 @@ export type { PreserveDataProps } from './PreserveData';
 export { PreserveData } from './PreserveData';
 export type { RadioButtonProps } from './RadioButton';
 export { RadioButton } from './RadioButton';
-export type { ScrollToTopButtonProps } from './ScrollToTopButton';
-export { ScrollToTopButton, scrollToTop } from './ScrollToTopButton';
+export type { ScrollToStartButtonProps } from './ScrollToStartButton';
+export { ScrollToStartButton, scrollToTop } from './ScrollToStartButton';
 // export type { SearchBarProps } from './SearchBar';
 // export { SearchBar } from './SearchBar'; // TODO find a way to make the downshift compatible with nextjs 13 app/directory
 export type { SelectProps, SelectOptionProps } from './Select';

packages/storybook-react/src/stories/ScrollToTopButton.stories.tsx → packages/storybook-react/src/stories/ScrollToStartButton.stories.tsx

@@ -1,5 +1,5 @@
 import { Meta, StoryObj } from '@storybook/react';
-import { ScrollToTopButton } from '@utrecht/component-library-react';
+import { ScrollToStartButton } from '@utrecht/component-library-react';
 import { Document, Heading, Page, PageContent, Paragraph } from '@utrecht/component-library-react/src/css-module/index';
 import tokens from '@utrecht/design-tokens/dist/index.json';
 import { UtrechtIconChevronUp } from '@utrecht/web-component-library-react';
@@ -10,7 +10,7 @@ const DemoPage = ({ children }: { children: React.ReactNode }) => (
   <Document style={{ '--utrecht-space-around': 1 } as any}>
     <Page>
       <PageContent>
-        <Heading level={1}>Scroll To The Top Button</Heading>
+        <Heading level={1}>Scroll to start button</Heading>
         <Heading level={2}>What is Lorem Ipsum?</Heading>
         <Paragraph>
           Lorem Ipsum is simply dummy text of the printing and typesetting industry. Lorem Ipsum has been the
@@ -60,12 +60,12 @@ const DemoPage = ({ children }: { children: React.ReactNode }) => (
   </Document>
 );
 
-const meta: Meta<typeof ScrollToTopButton> = {
-  title: 'React Component/Scroll To The Top Button',
-  id: 'react-scroll-to-top-button',
-  component: ScrollToTopButton,
+const meta: Meta<typeof ScrollToStartButton> = {
+  title: 'React Component/Scroll to start button',
+  id: 'react-scroll-to-start-button',
+  component: ScrollToStartButton,
   parameters: {
-    tokensPrefix: 'utrecht-scroll-to-top-button',
+    tokensPrefix: 'utrecht-scroll-to-start-button',
     tokens,
   },
   argTypes: {
@@ -85,10 +85,10 @@ type Story = StoryObj<typeof meta>;
 export const Default: Story = {
   render: (args) => (
     <DemoPage>
-      <ScrollToTopButton appearance="subtle-button" {...args}>
+      <ScrollToStartButton appearance="subtle-button" {...args}>
         Naar Boven
         <UtrechtIconChevronUp />
-      </ScrollToTopButton>
+      </ScrollToStartButton>
     </DemoPage>
   ),
 };