feat: add standard variant of pagination component

freshworks · Mar 31, 2023 · a7a8670 · a7a8670
1 parent 696c191
commit a7a8670
Show file tree

Hide file tree

Showing 8 changed files with 1,538 additions and 142 deletions.
diff --git a/packages/crayons-core/src/components.d.ts b/packages/crayons-core/src/components.d.ts
@@ -1401,10 +1401,18 @@ export namespace Components {
           * Aria Label to be used for the button group.
          */
         "buttonGroupLabel": string;
+        /**
+          * hides page numbers in standard pagination variant. Defaults to false. Works only with `standard` variant.
+         */
+        "hidePageNumbers": boolean;
         /**
           * Indicates if the records in current page are being fetched.
          */
         "isLoading": boolean;
+        /**
+          * represents the number of pages to be shown on both the margins. Defaults to 1. Works only with `standard` variant.
+         */
+        "marginPagesDisplayed": number;
         /**
           * Aria Label to be used for next button.
          */
@@ -1417,10 +1425,18 @@ export namespace Components {
           * The current page number.
          */
         "page": number;
+        /**
+          * represents the range of pages to be shown. Defaults to 4. Works only with `standard` variant.
+         */
+        "pageRangeDisplayed": number;
         /**
           * The number of records to be shown per page. Defaults to 10.
          */
         "perPage": number;
+        /**
+          * Specify the perPage options to be shown. Works only with `standard` variant.
+         */
+        "perPageOptions": number[];
         /**
           * Aria Label to be used for previous button.
          */
@@ -1433,6 +1449,10 @@ export namespace Components {
           * The total number of records. This is a mandatory parameter.
          */
         "total": number;
+        /**
+          * The variant of pagination to be displayed. Mini variant displays only previous and next buttons along with pagination information. Standard variant displays list of page numbers which can be selected along with previous and next buttons Defaults to 'mini'.
+         */
+        "variant": 'mini' | 'standard';
     }
     interface FwPill {
         /**
@@ -4293,26 +4313,46 @@ declare namespace LocalJSX {
           * Aria Label to be used for the button group.
          */
         "buttonGroupLabel"?: string;
+        /**
+          * hides page numbers in standard pagination variant. Defaults to false. Works only with `standard` variant.
+         */
+        "hidePageNumbers"?: boolean;
         /**
           * Indicates if the records in current page are being fetched.
          */
         "isLoading"?: boolean;
+        /**
+          * represents the number of pages to be shown on both the margins. Defaults to 1. Works only with `standard` variant.
+         */
+        "marginPagesDisplayed"?: number;
         /**
           * Aria Label to be used for next button.
          */
         "nextButtonLabel"?: string;
         /**
-          * Triggered when either previous or next button is clicked.
+          * Triggered when previous, next or page button is clicked.
          */
         "onFwChange"?: (event: FwPaginationCustomEvent<any>) => void;
+        /**
+          * Triggered when per page is changed from the dropdown. Works only with `standard` variant.
+         */
+        "onFwPerPageChange"?: (event: FwPaginationCustomEvent<any>) => void;
         /**
           * The current page number.
          */
         "page"?: number;
+        /**
+          * represents the range of pages to be shown. Defaults to 4. Works only with `standard` variant.
+         */
+        "pageRangeDisplayed"?: number;
         /**
           * The number of records to be shown per page. Defaults to 10.
          */
         "perPage"?: number;
+        /**
+          * Specify the perPage options to be shown. Works only with `standard` variant.
+         */
+        "perPageOptions"?: number[];
         /**
           * Aria Label to be used for previous button.
          */
@@ -4321,6 +4361,10 @@ declare namespace LocalJSX {
           * The total number of records. This is a mandatory parameter.
          */
         "total"?: number;
+        /**
+          * The variant of pagination to be displayed. Mini variant displays only previous and next buttons along with pagination information. Standard variant displays list of page numbers which can be selected along with previous and next buttons Defaults to 'mini'.
+         */
+        "variant"?: 'mini' | 'standard';
     }
     interface FwPill {
         /**

diff --git a/packages/crayons-core/src/components/options-list/readme.md b/packages/crayons-core/src/components/options-list/readme.md
@@ -429,6 +429,7 @@ Type: `Promise<any>`
 ### Used by
 
  - [fw-kebab-menu](../kebab-menu)
+ - [fw-pagination](../pagination)
  - [fw-select](../select)
 
 ### Depends on
@@ -447,6 +448,7 @@ graph TD;
   fw-checkbox --> fw-icon
   fw-input --> fw-icon
   fw-kebab-menu --> fw-list-options
+  fw-pagination --> fw-list-options
   fw-select --> fw-list-options
   style fw-list-options fill:#f9f,stroke:#333,stroke-width:4px
 ```