From 46ae0b54986710fd588a852e5c797f006248b5ca Mon Sep 17 00:00:00 2001
From: Alexandra Capatina <46926675+alexandra-c@users.noreply.github.com>
Date: Mon, 19 Feb 2024 16:35:59 +0200
Subject: [PATCH] add align property to Pagination

---
 .../navigation/Pagination/Pagination.tsx      | 44 ++++++++++++-------
 .../surfaces/Card/CardActions/CardActions.tsx |  2 +-
 .../surfaces/Card/BasicCardsPreview.tsx       | 29 ++++++++++--
 3 files changed, 56 insertions(+), 19 deletions(-)

diff --git a/src/components/navigation/Pagination/Pagination.tsx b/src/components/navigation/Pagination/Pagination.tsx
index b55a6a8d..23e4616c 100644
--- a/src/components/navigation/Pagination/Pagination.tsx
+++ b/src/components/navigation/Pagination/Pagination.tsx
@@ -6,6 +6,7 @@ import { RefreshButtonContainer } from './PaginationStyles'
 import RefreshIcon from '@mui/icons-material/Refresh'
 import { PaginationProps, DisplayedRows } from './types'
 import IconButton from '../../buttons/IconButton'
+import { T, always, cond, equals } from 'ramda'
 
 const displayedRows =
   (rowsOfText: string) =>
@@ -13,6 +14,13 @@ const displayedRows =
     return `${from}-${to} ${rowsOfText} ${count}`
   }
 
+const contentAlignment = cond([
+  [equals('left'), always('flex-start')],
+  [equals('right'), always('flex-end')],
+  [equals('center'), always('center')],
+  [T, always('flex-end')]
+])
+
 /**
  * The Pagination component was designed to paginate a list of arbitrary items when infinite loading isn't used. It's preferred in contexts where SEO is important, for instance, a blog.
  *
@@ -29,6 +37,7 @@ const Pagination: React.FC<PaginationProps> = ({
   onRefresh,
   rowsOfText = 'of',
   rowsPerPageOptions = [10, 25, 50, 100],
+  align,
   ...rest
 }) => {
   const handlePageChange = useCallback(
@@ -50,25 +59,25 @@ const Pagination: React.FC<PaginationProps> = ({
   const handleRefresh = useCallback(() => onRefresh && onRefresh(), [onRefresh])
 
   return (
-    <Grid container alignItems="center" justifyContent="flex-end">
+    <Grid container alignItems="center" justifyContent={contentAlignment(align)}>
       {!loading && (
-          <TablePagination
-            component="div"
-            count={count}
-            page={page}
-            onPageChange={handlePageChange}
-            rowsPerPage={pageSize}
-            onRowsPerPageChange={handleRowsPerPageChange}
-            labelRowsPerPage={rowsPerPageText}
-            labelDisplayedRows={displayedRows(rowsOfText)}
-            rowsPerPageOptions={rowsPerPageOptions}
-            {...rest}
-          />
+        <TablePagination
+          component="div"
+          count={count}
+          page={page}
+          onPageChange={handlePageChange}
+          rowsPerPage={pageSize}
+          onRowsPerPageChange={handleRowsPerPageChange}
+          labelRowsPerPage={rowsPerPageText}
+          labelDisplayedRows={displayedRows(rowsOfText)}
+          rowsPerPageOptions={rowsPerPageOptions}
+          {...rest}
+        />
       )}
       {onRefresh && (
         <RefreshButtonContainer>
           <IconButton onClick={handleRefresh} color="default" variant="text" disabled={loading}>
-            <RefreshIcon/>
+            <RefreshIcon />
           </IconButton>
         </RefreshButtonContainer>
       )}
@@ -135,7 +144,12 @@ Pagination.propTypes = {
         value: PropTypes.number.isRequired
       })
     ]).isRequired
-  )
+  ),
+  /**
+   * Align container.
+   * @default 'right'
+   */
+  align: PropTypes.oneOf(['left', 'right', 'center'])
 }
 
 export default Pagination
diff --git a/src/components/surfaces/Card/CardActions/CardActions.tsx b/src/components/surfaces/Card/CardActions/CardActions.tsx
index 2e89e6ca..0abca5b7 100644
--- a/src/components/surfaces/Card/CardActions/CardActions.tsx
+++ b/src/components/surfaces/Card/CardActions/CardActions.tsx
@@ -14,7 +14,7 @@ CardActions.propTypes = {
    */
   filled: PropTypes.bool,
   /**
-   * Align actions to left or right.
+   * Align actions.
    * @default 'left'
    */
   align: PropTypes.oneOf(['left', 'right', 'center'])
diff --git a/src/stories/surfaces/Card/BasicCardsPreview.tsx b/src/stories/surfaces/Card/BasicCardsPreview.tsx
index 3be94f78..62bbb198 100644
--- a/src/stories/surfaces/Card/BasicCardsPreview.tsx
+++ b/src/stories/surfaces/Card/BasicCardsPreview.tsx
@@ -1,6 +1,6 @@
-import React from 'react'
+import React, { useState, useCallback } from 'react'
 import { Grid } from '@mui/material'
-import { Button, Typography, Card } from 'components'
+import { Button, Typography, Card, Pagination } from 'components'
 import robot from '../../assets/img/robot.png'
 import spaceship from '../../assets/img/spaceship.png'
 
@@ -13,6 +13,18 @@ const LearnMoreButton = () => {
 }
 
 const BasicCardsPreview = () => {
+  const [page, setPage] = useState<number>(0)
+  const [pageSize, setPageSize] = useState<number>(10)
+
+  const handleChangePage = useCallback((value: number) => {
+    setPage(value)
+  }, [])
+
+  const handleChangeRowsPerPage = useCallback((value: number) => {
+    setPageSize(value)
+    setPage(0)
+  }, [])
+
   return (
     <Grid container spacing={2} justifyContent="center">
       <Grid item xs={10}>
@@ -52,7 +64,18 @@ const BasicCardsPreview = () => {
         </Card>
       </Grid>
       <Grid item xs={10}>
-        <Card footer={<LearnMoreButton />} footerProps={{ align: 'center' }}>
+        <Card
+          footer={
+            <Pagination
+              count={10}
+              page={page}
+              onPageChange={handleChangePage}
+              pageSize={pageSize}
+              onRowsPerPageChange={handleChangeRowsPerPage}
+              align="center"
+            />
+          }
+        >
           <Grid container spacing={2}>
             <Grid item xs={8}>
               <Typography gutterBottom variant="h5">