feat(pagination): add 'xs' range option for page size selector (#3083)

* feat(pagination): add 'xs' range option for page size selector

* fix(validation): update error message to include 'xs' in page range options

* feat(pagination): add 'xs' option to pageRangeSize selector

Author: misama-ct

.changeset/afraid-mangos-count.md

@@ -0,0 +1,5 @@
+---
+'@commercetools-uikit/pagination': minor
+---
+
+added 'xs' option to pageRangeSize selector

packages/components/pagination/src/page-size-selector/page-size-selector.tsx

@@ -7,7 +7,7 @@ import { warning } from '@commercetools-uikit/utils';
 import Label from '@commercetools-uikit/label';
 import messages from './messages';
 
-export type TPageRangeSize = 's' | 'm' | 'l';
+export type TPageRangeSize = 'xs' | 's' | 'm' | 'l';
 
 export type TPageSizeSelectorProps = {
   /**
@@ -18,6 +18,8 @@ export type TPageSizeSelectorProps = {
   /**
    * Range of items per page.
    * <br/>
+   * `XS: 5,10,15,20`
+   * <br/>
    * `SMALL: 20,50`
    * <br/>
    * `MEDIUM: 20,50,100`
@@ -39,6 +41,8 @@ export type TPageSizeSelectorProps = {
 
 const mapRangeToListOfOptions = (perPageRange: TPageRangeSize) => {
   switch (perPageRange) {
+    case 'xs':
+      return [5, 10, 15, 20];
     case 's':
       return [20, 50];
     case 'm':
@@ -47,7 +51,7 @@ const mapRangeToListOfOptions = (perPageRange: TPageRangeSize) => {
       return [200, 500];
     default:
       throw new Error(
-        `Invalid page range "${perPageRange}", expected one of "s,m,l".`
+        `Invalid page range "${perPageRange}", expected one of "xs,s,m,l".`
       );
   }
 };

packages/components/pagination/src/pagination.spec.js

@@ -138,7 +138,7 @@ describe('validation', () => {
         />
       )
     ).toThrowErrorMatchingInlineSnapshot(
-      `"Invalid page range "wrong", expected one of "s,m,l"."`
+      `"Invalid page range "wrong", expected one of "xs,s,m,l"."`
     );
   });
   describe.each`

packages/components/pagination/src/pagination.stories.tsx

@@ -23,7 +23,7 @@ export const BasicExample: Story = {
     totalItems: 200,
     page: 1,
     onPageChange: () => alert('onPageChange Request'),
-    onPerPageChange: () => alert('onPerPageChange Request'),
+    onPerPageChange: (v) => alert(`onPerPageChange Request: ${v}`),
     perPage: 20,
   },
   decorators: [

packages/components/pagination/src/pagination.tsx

@@ -27,6 +27,8 @@ export type TPaginationProps = {
   /**
    * Range of items per page.
    * <br/>
+   * `xs: 5,10,15,20`
+   * <br/>
    * `s: 20,50`
    * <br/>
    * `m: 20,50,100`