feat(CPagination): add align property to set the alignment of component

Author: mrholek

docs/4.0/components/pagination.mdx

@@ -150,7 +150,7 @@ Fancy larger or smaller pagination? Add `size="lg"` or `size="sm"` for additiona
 Change the alignment of pagination components with [flexbox utilities](https://coreui.io/docs/utilities/flex/).
 
 <Example>
-  <CPagination className="justify-content-center" aria-label="Page navigation example">
+  <CPagination align="center" aria-label="Page navigation example">
     <CPaginationItem disabled>Previous</CPaginationItem>
     <CPaginationItem>1</CPaginationItem>
     <CPaginationItem>2</CPaginationItem>
@@ -160,7 +160,7 @@ Change the alignment of pagination components with [flexbox utilities](https://c
 </Example>
 
 ```jsx
-<CPagination className="justify-content-center" aria-label="Page navigation example">
+<CPagination align="center" aria-label="Page navigation example">
   <CPaginationItem disabled>Previous</CPaginationItem>
   <CPaginationItem>1</CPaginationItem>
   <CPaginationItem>2</CPaginationItem>
@@ -170,7 +170,7 @@ Change the alignment of pagination components with [flexbox utilities](https://c
 ```
 
 <Example>
-  <CPagination className="justify-content-end" aria-label="Page navigation example">
+  <CPagination align="end" aria-label="Page navigation example">
     <CPaginationItem disabled>Previous</CPaginationItem>
     <CPaginationItem>1</CPaginationItem>
     <CPaginationItem>2</CPaginationItem>
@@ -180,7 +180,7 @@ Change the alignment of pagination components with [flexbox utilities](https://c
 </Example>
 
 ```jsx
-<CPagination className="justify-content-end" aria-label="Page navigation example">
+<CPagination align="end" aria-label="Page navigation example">
   <CPaginationItem disabled>Previous</CPaginationItem>
   <CPaginationItem>1</CPaginationItem>
   <CPaginationItem>2</CPaginationItem>

src/components/pagination/CPagination.tsx

@@ -3,6 +3,10 @@ import PropTypes from 'prop-types'
 import classNames from 'classnames'
 
 export interface CPaginationProps extends HTMLAttributes<HTMLUListElement> {
+  /**
+   * Set the alignment of pagination components. [docs]
+   */
+  align?: 'start' | 'center' | 'end'
   /**
    * A string of all className you want applied to the base component. [docs]
    */
@@ -14,8 +18,15 @@ export interface CPaginationProps extends HTMLAttributes<HTMLUListElement> {
 }
 
 export const CPagination = forwardRef<HTMLUListElement, CPaginationProps>(
-  ({ children, className, size, ...rest }, ref) => {
-    const _className = classNames('pagination', { [`pagination-${size}`]: size }, className)
+  ({ children, align, className, size, ...rest }, ref) => {
+    const _className = classNames(
+      'pagination',
+      {
+        [`justify-content-${align}`]: align,
+        [`pagination-${size}`]: size,
+      },
+      className,
+    )
     return (
       <nav ref={ref} {...rest}>
         <ul className={_className}>{children}</ul>
@@ -25,6 +36,7 @@ export const CPagination = forwardRef<HTMLUListElement, CPaginationProps>(
 )
 
 CPagination.propTypes = {
+  align: PropTypes.oneOf(['start', 'center', 'end']),
   children: PropTypes.node,
   className: PropTypes.string,
   size: PropTypes.oneOf(['sm', 'lg']),