small adjustments

Altinn · Jan 19, 2025 · 43b03e3 · 43b03e3
1 parent ff6412f
commit 43b03e3
Show file tree

Hide file tree

Showing 3 changed files with 20 additions and 14 deletions.
diff --git a/...tudio-components/src/components/StudioPaginatedContent/StudioPaginatedContent.stories.tsx b/...tudio-components/src/components/StudioPaginatedContent/StudioPaginatedContent.stories.tsx
@@ -62,7 +62,7 @@ export const Preview: Story = () => {
 
   return (
     <StudioPaginatedContent
-      buttonTexts={{ previous: 'Previous', next: 'Next' }}
+      navigationButtonTexts={{ previous: 'Previous', next: 'Next' }}
       componentToRender={pages[currentPage]}
       navigation={navigation}
       currentPageNumber={currentPage}

diff --git a/...s/studio-components/src/components/StudioPaginatedContent/StudioPaginatedContent.test.tsx b/...s/studio-components/src/components/StudioPaginatedContent/StudioPaginatedContent.test.tsx
@@ -1,6 +1,6 @@
 import React from 'react';
-import { render, screen, fireEvent } from '@testing-library/react';
-import '@testing-library/jest-dom';
+import { render, screen } from '@testing-library/react';
+import userEvent from '@testing-library/user-event';
 import { StudioPaginatedContent, type StudioPaginatedContentProps } from './StudioPaginatedContent';
 
 const navigationMock: StudioPaginatedContentProps['navigation'] = {
@@ -10,7 +10,7 @@ const navigationMock: StudioPaginatedContentProps['navigation'] = {
   onPrevious: jest.fn(),
 };
 
-const buttonTextsMock: StudioPaginatedContentProps['buttonTexts'] = {
+const buttonTextsMock: StudioPaginatedContentProps['navigationButtonTexts'] = {
   previous: 'Previous',
   next: 'Next',
 };
@@ -19,7 +19,7 @@ const defaultProps: StudioPaginatedContentProps = {
   totalPages: 5,
   currentPageNumber: 2,
   componentToRender: <div>Content</div>,
-  buttonTexts: buttonTextsMock,
+  navigationButtonTexts: buttonTextsMock,
   navigation: navigationMock,
 };
 
@@ -68,16 +68,19 @@ describe('StudioPaginatedContent', () => {
     expect(screen.getByText('Next')).toBeDisabled();
   });
 
-  it('calls onPrevious when the previous button is clicked', () => {
+  it('calls onPrevious when the previous button is clicked', async () => {
+    const user = userEvent.setup();
     renderStudioPaginatedContent();
 
-    fireEvent.click(screen.getByText('Previous'));
+    await user.click(screen.getByText('Previous'));
     expect(defaultProps.navigation.onPrevious).toHaveBeenCalled();
   });
 
-  it('calls onNext when the next button is clicked', () => {
+  it('calls onNext when the next button is clicked', async () => {
+    const user = userEvent.setup();
     renderStudioPaginatedContent();
-    fireEvent.click(screen.getByText('Next'));
+
+    await user.click(screen.getByText('Next'));
     expect(defaultProps.navigation.onNext).toHaveBeenCalled();
   });
 

diff --git a/...d/libs/studio-components/src/components/StudioPaginatedContent/StudioPaginatedContent.tsx b/...d/libs/studio-components/src/components/StudioPaginatedContent/StudioPaginatedContent.tsx
@@ -4,7 +4,7 @@ import { StudioButton } from '../StudioButton';
 import { ChevronLeftIcon, ChevronRightIcon } from '@studio/icons';
 import { type StudioPaginatedNavigation } from './types/StudioPaginatedNavigation';
 
-type ButtonTexts = {
+type NavigationButtonTexts = {
   previous: string;
   next: string;
 };
@@ -13,7 +13,7 @@ export type StudioPaginatedContentProps = {
   totalPages: number;
   currentPageNumber: number;
   componentToRender: ReactNode;
-  buttonTexts: ButtonTexts;
+  navigationButtonTexts: NavigationButtonTexts;
   navigation: StudioPaginatedNavigation;
 };
 
@@ -22,7 +22,7 @@ export const StudioPaginatedContent = ({
   totalPages,
   componentToRender,
   currentPageNumber,
-  buttonTexts: { previous: previousButtonText, next: nextButtonText },
+  navigationButtonTexts: { previous: previousButtonText, next: nextButtonText },
 }: StudioPaginatedContentProps): ReactElement => {
   return (
     <div className={classes.wrapper}>
@@ -32,7 +32,7 @@ export const StudioPaginatedContent = ({
           <ChevronLeftIcon className={classes.icon} />
           {previousButtonText}
         </StudioButton>
-        <NavigationCircles totalPages={totalPages} currentPageNumber={currentPageNumber} />
+        <NavigationStepIndicator totalPages={totalPages} currentPageNumber={currentPageNumber} />
         <StudioButton variant='tertiary' size='sm' onClick={onNext} disabled={!canGoNext}>
           {nextButtonText}
           <ChevronRightIcon />
@@ -47,7 +47,10 @@ type NavigationCirclesProps = {
   currentPageNumber: number;
 };
 
-const NavigationCircles = ({ totalPages, currentPageNumber }: NavigationCirclesProps) => {
+const NavigationStepIndicator = ({
+  totalPages,
+  currentPageNumber,
+}: NavigationCirclesProps): React.ReactElement => {
   return (
     <div className={classes.statusBarContainer}>
       {getArrayFromLength(totalPages).map((_, index) => (