diff --git a/components/Pagination/Pagination.jsx b/components/Pagination/Pagination.jsx index 48d9f3571..fa8700f75 100644 --- a/components/Pagination/Pagination.jsx +++ b/components/Pagination/Pagination.jsx @@ -8,7 +8,7 @@ import Dots from './sub-components/Dots'; import pagination from './utils/pagination'; -const Wrapper = styled.div` +const Wrapper = styled.nav` align-items: center; display: flex; justify-content: center; @@ -18,15 +18,19 @@ const Wrapper = styled.div` const generateDotsKey = index => `dots-${index}`; const Pagination = ({ + ariaLabel, activePage, + activePageAriaLabel, nextButtonText, + pageAriaLabel, prevButtonText, onClick, totalPages, ...props }) => ( - + onClick(activePage - 1)} > @@ -39,6 +43,10 @@ const Pagination = ({ return ( onClick(page)} @@ -49,6 +57,7 @@ const Pagination = ({ })} onClick(activePage + 1)} > @@ -58,18 +67,32 @@ const Pagination = ({ ); Pagination.propTypes = { + /** Set the aria-label html attribute to the root element of pagination */ + ariaLabel: PropTypes.string, + /** Set the current page */ activePage: PropTypes.number, + /** aria-label attribute to active page button. */ + activePageAriaLabel: PropTypes.string, + /** Set the number of pages to be displayed. */ totalPages: PropTypes.number.isRequired, + /** Next page button text */ nextButtonText: PropTypes.string, + /** Page number button aria-label html attribute */ + pageAriaLabel: PropTypes.string, + /** Previous page button text */ prevButtonText: PropTypes.string, + /** Function to be called when prev, next or page button is clicked, it receives the next page number as an argument. */ onClick: PropTypes.func, }; Pagination.defaultProps = { + ariaLabel: 'pagination', activePage: 1, + activePageAriaLabel: 'Current Page', nextButtonText: 'Next', + pageAriaLabel: 'Page', prevButtonText: 'Previous', - onClick: () => {}, + onClick: nextPage => {}, // eslint-disable-line }; export default Pagination;