create prevnext component

assets/js/common/Pagination/Pagination.jsx

@@ -56,6 +56,62 @@ function ItemsPerPageSelector({
   );
 }
 
+function PaginationPrevNext({
+  hasPrev = true,
+  hasNext = true,
+  onSelect,
+  currentItemsPerPage = 10,
+  itemsPerPageOptions = [10],
+  onChangeItemsPerPage = noop,
+}) {
+  return (
+    <div
+      className="flex justify-between p-2 bg-gray-50 width-full"
+      data-testid="pagination"
+    >
+      <ItemsPerPageSelector
+        itemsPerPageOptions={itemsPerPageOptions}
+        currentItemsPerPage={currentItemsPerPage}
+        onChange={onChangeItemsPerPage}
+      />
+      <ul className={containerClassNames}>
+        <li>
+          <a
+            role="button"
+            href
+            className={classNames(
+              leftBoxClassNames,
+              hasPrev || disabledLinkClassNames
+            )}
+            onClick={() => {
+              hasPrev && onSelect('prev');
+              return false;
+            }}
+          >
+            {PREV_LABEL}
+          </a>
+        </li>
+        <li>
+          <a
+            role="button"
+            href
+            className={classNames(
+              rightBoxClassNames,
+              hasNext || disabledLinkClassNames
+            )}
+            onClick={() => {
+              hasNext && onSelect('next');
+              return false;
+            }}
+          >
+            {NEXT_LABEL}
+          </a>
+        </li>
+      </ul>
+    </div>
+  );
+}
+
 function Pagination({
   pages,
   currentPage,
@@ -102,3 +158,5 @@ function Pagination({
 }
 
 export default Pagination;
+
+export { PaginationPrevNext };

assets/js/common/Pagination/Pagination.test.jsx

@@ -3,7 +3,7 @@ import { render, screen } from '@testing-library/react';
 import userEvent from '@testing-library/user-event';
 import '@testing-library/jest-dom';
 import { noop } from 'lodash';
-import Pagination from '.';
+import Pagination, { PaginationPrevNext } from '.';
 
 describe('Pagination component', () => {
   it('should render', () => {
@@ -305,3 +305,58 @@ describe('Pagination component', () => {
     }
   );
 });
+
+describe('PaginationPrevNext component', () => {
+  it('should render', () => {
+    render(<PaginationPrevNext hasNext onSelect={noop} />);
+
+    expect(screen.getByText('<')).toBeInTheDocument();
+    expect(screen.getByText('>')).toBeInTheDocument();
+  });
+
+  it('should call onSelect', async () => {
+    const onSelect = jest.fn();
+    const user = userEvent.setup();
+
+    render(<PaginationPrevNext onSelect={onSelect} />);
+
+    await act(() => user.click(screen.getByText('<')));
+    expect(onSelect).toHaveBeenCalledWith('prev');
+    expect(onSelect).toHaveBeenCalledTimes(1);
+    onSelect.mockClear();
+
+    await act(() => user.click(screen.getByText('>')));
+    expect(onSelect).toHaveBeenCalledWith('next');
+    expect(onSelect).toHaveBeenCalledTimes(1);
+  });
+
+  it('should disable prev button', async () => {
+    const onSelect = jest.fn();
+    const user = userEvent.setup();
+
+    render(<PaginationPrevNext hasPrev={false} onSelect={onSelect} />);
+
+    await act(() => user.click(screen.getByText('<')));
+    expect(onSelect).not.toHaveBeenCalled();
+
+    await act(() => user.click(screen.getByText('>')));
+    expect(onSelect).toHaveBeenCalledWith('next');
+    expect(onSelect).toHaveBeenCalledTimes(1);
+    onSelect.mockClear();
+  });
+
+  it('should disable next button', async () => {
+    const onSelect = jest.fn();
+    const user = userEvent.setup();
+
+    render(<PaginationPrevNext hasNext={false} onSelect={onSelect} />);
+
+    await act(() => user.click(screen.getByText('>')));
+    expect(onSelect).not.toHaveBeenCalled();
+    onSelect.mockClear();
+
+    await act(() => user.click(screen.getByText('<')));
+    expect(onSelect).toHaveBeenCalledWith('prev');
+    expect(onSelect).toHaveBeenCalledTimes(1);
+  });
+});

assets/js/common/Pagination/PrevNextPagination.stories.jsx

@@ -0,0 +1,46 @@
+import React from 'react';
+import { action } from '@storybook/addon-actions';
+
+import { PaginationPrevNext } from '.';
+
+export default {
+  title: 'Components/PaginationPrevNext',
+  component: PaginationPrevNext,
+  argTypes: {
+    hasPrev: { control: { type: 'boolean' }, defaultValue: true },
+    hasNext: { control: { type: 'boolean' }, defaultValue: true },
+    currentItemsPerPage: {
+      control: {
+        type: 'number',
+      },
+      defaultValue: 10,
+    },
+    itemsPerPageOptions: {
+      control: {
+        type: 'array',
+      },
+      defaultValue: [10],
+    },
+  },
+  render: (args) => (
+    <PaginationPrevNext
+      hasPrev={args.hasPrev}
+      hasNext={args.hasNext}
+      currentItemsPerPage={args.currentItemsPerPage}
+      itemsPerPageOptions={args.itemsPerPageOptions}
+      onSelect={(value) => {
+        action('onSelect')(value);
+      }}
+      onChangeItemsPerPage={(value) => {
+        action('onChangeItemsPerPage')(value);
+      }}
+    />
+  ),
+};
+
+export const Default = {
+  args: {
+    currentItemsPerPage: 10,
+    itemsPerPageOptions: [10, 20, 50],
+  },
+};

assets/js/common/Pagination/index.js

@@ -1,3 +1,4 @@
-import Pagination from './Pagination';
+import Pagination, { PaginationPrevNext } from './Pagination';
 
 export default Pagination;
+export { PaginationPrevNext };