@openmrs/esm-styleguide 8.0.1-pre.3585 → 8.0.1-pre.3600

package/src/pagination/pagination.component.tsx

@@ -0,0 +1,77 @@
+import React from 'react';
+import classNames from 'classnames';
+import { Pagination as CarbonPagination, type PaginationProps as CarbonPaginationProps } from '@carbon/react';
+import { ConfigurableLink, useLayoutType, usePaginationInfo } from '@openmrs/esm-react-utils';
+import { getCoreTranslation } from '@openmrs/esm-translations';
+import styles from './pagination.module.scss';
+
+export interface PaginationProps {
+  /** The count of current items displayed */
+  currentItems: number;
+  /** The count of total items displayed */
+  totalItems: number;
+  /** The current page number */
+  pageNumber: number;
+  /** The size of each page */
+  pageSize: number;
+  /** A callback to be called when the page changes */
+  onPageNumberChange?: CarbonPaginationProps['onChange'];
+  /** An optional URL the user should be directed to if they click on the link to see all results */
+  dashboardLinkUrl?: string;
+  /** Optional text to display instead of the default "See all" */
+  dashboardLinkLabel?: string;
+}
+
+/**
+ * Re-usable pagination bar
+ */
+export const Pagination: React.FC<PaginationProps> = ({
+  totalItems,
+  pageSize,
+  onPageNumberChange,
+  pageNumber,
+  dashboardLinkUrl,
+  currentItems,
+  dashboardLinkLabel: urlLabel,
+}) => {
+  const { pageSizes, pageItemsCount } = usePaginationInfo(pageSize, totalItems, pageNumber, currentItems);
+  const isTablet = useLayoutType() === 'tablet';
+  const itemsDisplayed = getCoreTranslation('paginationItemsCount', '{{pageItemsCount}} / {{totalItems}} items', {
+    totalItems,
+    pageItemsCount,
+  });
+
+  return (
+    <>
+      {totalItems > 0 && (
+        <div
+          className={classNames({
+            [styles.tablet]: isTablet,
+            [styles.desktop]: !isTablet,
+          })}
+        >
+          <div>
+            {itemsDisplayed}
+            {dashboardLinkUrl && (
+              <ConfigurableLink to={dashboardLinkUrl} className={styles.configurableLink}>
+                {urlLabel ?? getCoreTranslation('seeAll', 'See all')}
+              </ConfigurableLink>
+            )}
+          </div>
+          <CarbonPagination
+            className={styles.pagination}
+            page={pageNumber}
+            pageSize={pageSize}
+            pageSizes={pageSizes}
+            totalItems={totalItems}
+            onChange={onPageNumberChange}
+            pageRangeText={(_, total) =>
+              getCoreTranslation('paginationOfPages', 'of {{count}} pages', { count: total })
+            }
+            size={isTablet ? 'lg' : 'sm'}
+          />
+        </div>
+      )}
+    </>
+  );
+};

package/src/pagination/pagination.module.scss

@@ -0,0 +1,66 @@
+@use '@carbon/layout';
+@use '@carbon/type';
+@use '../vars' as *;
+
+.bodyShort01 {
+  @include type.type-style('body-compact-01');
+}
+
+.desktop,
+.tablet {
+  @include type.type-style('body-compact-01');
+  display: flex;
+  justify-content: space-between;
+  color: $text-02;
+  background-color: $ui-02;
+  padding-left: layout.$spacing-05;
+  align-items: center;
+  border-top: 1px solid $ui-03;
+}
+
+.desktop :global(.cds--pagination) {
+  min-height: 0;
+  height: layout.$spacing-07;
+  width: auto;
+  border: none;
+
+  & :global(.cds--select-input),
+  :global(.cds--btn),
+  :global(.cds--pagination__right) {
+    min-height: 0;
+    height: layout.$spacing-07;
+  }
+}
+
+.tablet :global(.cds--pagination) {
+  min-height: 0;
+  height: layout.$spacing-09;
+  width: auto;
+  border: none;
+
+  & :global(.cds--select-input),
+  :global(.cds--btn),
+  :global(.cds--pagination__right) {
+    min-height: 0;
+    height: layout.$spacing-09;
+  }
+}
+
+.configurableLink {
+  text-decoration: none;
+  @extend .bodyShort01;
+  padding: 0 layout.$spacing-03;
+}
+
+.pagination {
+  @include type.type-style('body-compact-01');
+  background-color: $ui-02;
+  color: $text-02;
+  display: flex;
+}
+
+div.pagination {
+  & > :global(.cds--pagination__left) {
+    display: none;
+  }
+}

package/src/pagination/pagination.test.tsx

@@ -0,0 +1,72 @@
+import React from 'react';
+import { describe, expect, it, vi } from 'vitest';
+import { render, screen } from '@testing-library/react';
+import userEvent from '@testing-library/user-event';
+import { Pagination } from './pagination.component';
+
+describe('Pagination', () => {
+  const defaultProps = {
+    currentItems: 10,
+    totalItems: 100,
+    pageNumber: 1,
+    pageSize: 10,
+    onPageNumberChange: vi.fn(),
+  };
+
+  it('renders nothing when totalItems is 0', () => {
+    const { container } = render(<Pagination {...defaultProps} totalItems={0} />);
+    expect(container).toBeEmptyDOMElement();
+  });
+
+  it('renders pagination when totalItems is greater than 0', () => {
+    render(<Pagination {...defaultProps} />);
+    expect(screen.getByText(/10 \/ 100 items/i)).toBeInTheDocument();
+  });
+
+  it('displays correct items count for the first page', () => {
+    render(<Pagination {...defaultProps} pageNumber={1} currentItems={10} />);
+    expect(screen.getByText(/10 \/ 100 items/i)).toBeInTheDocument();
+  });
+
+  it('displays correct items count for a middle page', () => {
+    render(<Pagination {...defaultProps} pageNumber={5} currentItems={10} />);
+    expect(screen.getByText(/50 \/ 100 items/i)).toBeInTheDocument();
+  });
+
+  it('displays correct items count for the last page with fewer items', () => {
+    render(<Pagination {...defaultProps} totalItems={95} pageNumber={10} currentItems={5} />);
+    expect(screen.getByText(/95 \/ 95 items/i)).toBeInTheDocument();
+  });
+
+  it('renders ConfigurableLink when dashboardLinkUrl is provided', () => {
+    render(<Pagination {...defaultProps} dashboardLinkUrl="/dashboard" />);
+    expect(screen.getByRole('link', { name: /see all/i })).toBeInTheDocument();
+    expect(screen.getByRole('link', { name: /see all/i })).toHaveAttribute('href', '/dashboard');
+  });
+
+  it('uses custom label when dashboardLinkLabel is provided', () => {
+    render(<Pagination {...defaultProps} dashboardLinkUrl="/dashboard" dashboardLinkLabel="View all items" />);
+    expect(screen.getByRole('link', { name: /view all items/i })).toBeInTheDocument();
+  });
+
+  it('does not render ConfigurableLink when dashboardLinkUrl is not provided', () => {
+    render(<Pagination {...defaultProps} />);
+    expect(screen.queryByRole('link')).not.toBeInTheDocument();
+  });
+
+  it('calls onPageNumberChange when page changes', async () => {
+    const user = userEvent.setup();
+    const onPageNumberChange = vi.fn();
+    render(<Pagination {...defaultProps} onPageNumberChange={onPageNumberChange} />);
+
+    const nextButton = screen.getByRole('button', { name: /next/i });
+    await user.click(nextButton);
+
+    expect(onPageNumberChange).toHaveBeenCalled();
+  });
+
+  it('handles case when pageSize is greater than totalItems', () => {
+    render(<Pagination {...defaultProps} pageSize={50} totalItems={30} currentItems={30} />);
+    expect(screen.getByText(/30 \/ 30 items/i)).toBeInTheDocument();
+  });
+});

package/src/public.ts

@@ -1,29 +1,30 @@
+export { type StyleguideConfigObject } from './config-schema';
+export * from './cards';
+export * from './custom-overflow-menu';
+export * from './dashboard-extension';
+export * from './datepicker';
+export * from './diagnosis-tags';
+export * from './empty-card';
+export * from './error-state';
+export * from './icons/icons';
+export * from './left-nav';
+export * from './location-picker';
+export { showModal } from './modals';
 export { showNotification, showActionableNotification } from './notifications';
-export { type NotificationDescriptor, type InlineNotificationType } from './notifications/notification.component';
 export {
   type ActionableNotificationDescriptor,
   type ActionableNotificationType,
 } from './notifications/actionable-notification.component';
-export { showToast } from './toasts';
-export { showModal } from './modals';
-export * from './workspaces/public';
-export { type ToastDescriptor, type ToastType, type ToastNotificationMeta } from './toasts/toast.component';
-export { showSnackbar } from './snackbars';
-export { type SnackbarDescriptor, type SnackbarType, type SnackbarMeta } from './snackbars/snackbar.component';
-export * from './left-nav';
-export * from './dashboard-extension';
-export * from './error-state';
-export * from './datepicker';
-export * from './responsive-wrapper';
+export { type NotificationDescriptor, type InlineNotificationType } from './notifications/notification.component';
+export * from './page-header';
+export * from './pagination';
 export * from './patient-banner';
 export * from './patient-photo';
-export * from './custom-overflow-menu';
-export * from './icons/icons';
-export * from './page-header';
 export * from './pictograms/pictograms';
-export { type StyleguideConfigObject } from './config-schema';
-export * from './location-picker';
-export * from './diagnosis-tags';
+export * from './responsive-wrapper';
+export { showSnackbar, type SnackbarDescriptor, type SnackbarType, type SnackbarMeta } from './snackbars';
+export { showToast, type ToastDescriptor, type ToastType, type ToastNotificationMeta } from './toasts';
+export * from './workspaces/public';
 export {
   launchWorkspace2,
   launchWorkspaceGroup2,

package/src/snackbars/index.tsx

@@ -6,6 +6,8 @@ import { Subject } from 'rxjs';
 import type { SnackbarDescriptor, SnackbarMeta } from './snackbar.component';
 import ActiveSnackbars from './active-snackbar.component';
 
+export { type SnackbarDescriptor, type SnackbarType, type SnackbarMeta } from './snackbar.component';
+
 const snackbarsSubject = new Subject<SnackbarMeta>();
 let snackbarId = 0;
 

package/src/toasts/index.tsx

@@ -6,6 +6,8 @@ import type { ToastDescriptor, ToastNotificationMeta } from './toast.component';
 import ActiveToasts from './active-toasts.component';
 import isEmpty from 'lodash-es/isEmpty';
 
+export { type ToastDescriptor, type ToastType, type ToastNotificationMeta } from './toast.component';
+
 const toastsSubject = new Subject<ToastNotificationMeta>();
 let toastId = 0;