DST-603: add optional control labels

marigold-ui · Dec 12, 2024 · 4bf4255 · 4bf4255
1 parent 7946b2e
commit 4bf4255
Show file tree

Hide file tree

Showing 6 changed files with 61 additions and 6 deletions.
diff --git a/packages/components/src/Pagination/Pagination.stories.tsx b/packages/components/src/Pagination/Pagination.stories.tsx
@@ -152,3 +152,15 @@ export const WithTable: Story = {
     );
   },
 };
+
+export const WithControlLabels: Story = {
+  render: args => (
+    <Pagination
+      {...args}
+      totalItems={100}
+      pageSize={10}
+      page={5}
+      controlLabels={['Previous', 'Next']}
+    />
+  ),
+};
diff --git a/packages/components/src/Pagination/Pagination.test.tsx b/packages/components/src/Pagination/Pagination.test.tsx
@@ -346,4 +346,21 @@ describe('Pagination tests', () => {
       expect(screen.getByLabelText(expected)).toHaveFocus();
     }
   );
+
+  test('use control labels', () => {
+    render(
+      <Pagination
+        totalItems={100}
+        pageSize={10}
+        defaultPage={5}
+        controlLabels={['Previous', 'Next']}
+      />
+    );
+
+    const previousButton = screen.getByLabelText('Page previous');
+    const nextPageButton = screen.getByLabelText('Page next');
+
+    expect(previousButton).toHaveTextContent('Previous');
+    expect(nextPageButton).toHaveTextContent('Next');
+  });
 });
diff --git a/packages/components/src/Pagination/Pagination.tsx b/packages/components/src/Pagination/Pagination.tsx
@@ -9,6 +9,11 @@ import {
 } from './useKeyboardNavigation';
 import { usePageRange } from './usePageRange';
 
+/*
+TODO:
+ - label property (controllabels s. Slider?)
+ - results counter?
+*/
 export interface PaginationProps {
   /**
    * The initial page. (uncontrolled)
@@ -30,6 +35,10 @@ export interface PaginationProps {
    * Handler that is called when the pagination active page changes.
    */
   onChange?: (page: number) => void;
+  /**
+   * Labels for the pagination controls.
+   */
+  controlLabels?: [string, string];
 }
 
 const _Pagination = ({
@@ -38,6 +47,7 @@ const _Pagination = ({
   totalItems,
   pageSize,
   onChange = () => {},
+  controlLabels,
 }: PaginationProps) => {
   const [currentPage, setCurrentPage] = useState(page ?? defaultPage);
   const totalPages = Math.ceil(totalItems / pageSize);
@@ -91,6 +101,8 @@ const _Pagination = ({
         registerRef={ref =>
           registerRef(NavigationTypes.Prev, currentPage - 1, ref)
         }
+        controlLabel={controlLabels?.[0]}
+        position="left"
       >
         <ChevronLeft className="h-5 w-5" />
       </PaginationButton>
@@ -124,6 +136,8 @@ const _Pagination = ({
         registerRef={ref =>
           registerRef(NavigationTypes.Next, currentPage + 1, ref)
         }
+        controlLabel={controlLabels?.[1]}
+        position="right"
       >
         <ChevronRight className="h-5 w-5" />
       </PaginationButton>

diff --git a/packages/components/src/Pagination/PaginationButton.tsx b/packages/components/src/Pagination/PaginationButton.tsx
@@ -1,6 +1,6 @@
 import React, { useEffect } from 'react';
 import { useButton } from '@react-aria/button';
-import { useClassNames } from '@marigold/system';
+import { cn, useClassNames } from '@marigold/system';
 
 interface PaginationButtonProps {
   onPress: () => void;
@@ -9,6 +9,8 @@ interface PaginationButtonProps {
   isSelected?: boolean;
   children: React.ReactNode;
   registerRef?: (ref: HTMLButtonElement | null) => void;
+  controlLabel?: string;
+  position?: 'left' | 'right';
 }
 
 export const PaginationButton = (props: PaginationButtonProps) => {
@@ -17,7 +19,15 @@ export const PaginationButton = (props: PaginationButtonProps) => {
     component: 'Pagination',
   });
   let { buttonProps } = useButton(props, ref);
-  let { children, isSelected, isDisabled, registerRef, ...rest } = props;
+  let {
+    children,
+    isSelected,
+    isDisabled,
+    registerRef,
+    controlLabel,
+    position,
+    ...rest
+  } = props;
 
   useEffect(() => {
     if (registerRef) {
@@ -32,10 +42,12 @@ export const PaginationButton = (props: PaginationButtonProps) => {
       {...buttonProps}
       {...rest}
       disabled={isDisabled}
-      className={classNames}
+      className={cn(classNames, controlLabel && 'w-24 px-2')}
       data-selected={isSelected}
     >
-      {children}
+      {position === 'left' && children}
+      {controlLabel}
+      {position === 'right' && children}
     </button>
   );
 };
diff --git a/themes/theme-b2b/src/components/Pagination.styles.ts b/themes/theme-b2b/src/components/Pagination.styles.ts
@@ -5,7 +5,7 @@ export const Pagination: ThemeComponent<'Pagination'> = cva([
   'focus-visible:outline-outline-focus focus-visible:outline focus-visible:outline-1 focus-visible:outline-offset-1',
   'disabled:text-text-base-disabled disabled:bg-bg-inverted-disabled disabled:cursor-not-allowed disabled:border disabled:border-solid',
   'text-text-base hover:bg-bg-brand-hover active:bg-bg-brand-active active:text-text-inverted',
-  'flex !h-8 !w-8 items-center justify-center',
+  'flex !h-8 w-8 items-center justify-center',
   'data-[selected=true]:border-0 data-[selected=true]:border-b-2 data-[selected=true]:border-solid data-[selected=true]:border-b-border-selected data-[selected=true]:bg-none data-[selected=true]:text-black  data-[selected=true]:font-bold',
   'text-gray-700 hover:bg-gray-100',
 ]);
diff --git a/themes/theme-core/src/components/Pagination.styles.ts b/themes/theme-core/src/components/Pagination.styles.ts
@@ -5,7 +5,7 @@ export const Pagination: ThemeComponent<'Pagination'> = cva([
   'disabled:border-border-base-disabled disabled:bg-bg-inverted-disabled disabled:text-text-base-disabled disabled:cursor-not-allowed disabled:border disabled:border-solid',
   'outline-outline-focus outline-2 outline-offset-1 focus-visible:outline',
   'h-auto border-none bg-transparent',
-  'flex !h-8 !w-8 items-center justify-center',
+  'flex !h-8 w-8 items-center justify-center wrap',
   'data-[selected=true]:border-0 data-[selected=true]:border-b-2 data-[selected=true]:border-solid data-[selected=true]:border-b-border-selected data-[selected=true]:bg-none data-[selected=true]:text-black data-[selected=true]:font-bold',
   'text-gray-700 hover:bg-gray-100',
 ]);