gatsby-core-theme 29.0.9 → 30.0.0

package/CHANGELOG.md

@@ -1,3 +1,44 @@
+# [30.0.0](https://git.ilcd.rocks/team-floyd/themes/gatsby-themes/compare/v29.0.10...v30.0.0) (2023-09-25)
+
+
+### Bug Fixes
+
+* add the possibility of changing the button through props ([de2c231](https://git.ilcd.rocks/team-floyd/themes/gatsby-themes/commit/de2c231650bdfe9192b923ef3dec84f645e6a562))
+* added svg title ([d99b168](https://git.ilcd.rocks/team-floyd/themes/gatsby-themes/commit/d99b168c038e97fa9d825c2e3ac6cc027ee4ca7e))
+* conflict ([3680b70](https://git.ilcd.rocks/team-floyd/themes/gatsby-themes/commit/3680b70fc795ccbc085fa9e5cad3600c415fbc28))
+
+
+### Code Refactoring
+
+* add defaults for pagination ([4810b6d](https://git.ilcd.rocks/team-floyd/themes/gatsby-themes/commit/4810b6d7edf67150a0fe0241d54499f6043bbbbb))
+* add optional border for current page ([966c857](https://git.ilcd.rocks/team-floyd/themes/gatsby-themes/commit/966c85740896594cac81945376a01ae99d85d145))
+* added font sizes ([ba60e5b](https://git.ilcd.rocks/team-floyd/themes/gatsby-themes/commit/ba60e5b6e8753239b99fd1d76a9d45f70693994a))
+* change to default ([f106115](https://git.ilcd.rocks/team-floyd/themes/gatsby-themes/commit/f106115db9e31962eda650bb6c1027c50c9340a8))
+* changes to pagination ([110e114](https://git.ilcd.rocks/team-floyd/themes/gatsby-themes/commit/110e1149faf69266afda1d06dc4b65a24ee1904e))
+* correction to font weight ([39dcf25](https://git.ilcd.rocks/team-floyd/themes/gatsby-themes/commit/39dcf259ea34b4f7498ef5d932040ca52c6faff1))
+* minor change to pagination logic ([7cbcead](https://git.ilcd.rocks/team-floyd/themes/gatsby-themes/commit/7cbceadea332bdbacbfcd6bfc8c9415096845b4e))
+* minor changes ([2cf4ccf](https://git.ilcd.rocks/team-floyd/themes/gatsby-themes/commit/2cf4ccfbf611b750a6e6a17bc8c63d0423b9af02))
+* new paginationation ([468812b](https://git.ilcd.rocks/team-floyd/themes/gatsby-themes/commit/468812b080c067c15fe054016c3c3034c4d6e584))
+* pagination changes ([0240cc1](https://git.ilcd.rocks/team-floyd/themes/gatsby-themes/commit/0240cc174d2a8987bef13201541b3aacf128c961))
+* remove old pagination ([90f33da](https://git.ilcd.rocks/team-floyd/themes/gatsby-themes/commit/90f33da6afcb4d54047c81e3dec951e0321ac1c5))
+* revert temp ([550fb30](https://git.ilcd.rocks/team-floyd/themes/gatsby-themes/commit/550fb3031203ddc95fc23d419d3dc9a8dd3251ad))
+* temp ([ccc3a91](https://git.ilcd.rocks/team-floyd/themes/gatsby-themes/commit/ccc3a9140a9a0e59103e76897599dfa3892f3cc7))
+
+
+* Merge branch 'tm-3676-svg-title' into 'master' ([0ec9bf1](https://git.ilcd.rocks/team-floyd/themes/gatsby-themes/commit/0ec9bf16dc6592e8a1a8f2a62865f30ee0665afe))
+* Merge branch 'tm-3388-pagination' into 'master' ([e251ec0](https://git.ilcd.rocks/team-floyd/themes/gatsby-themes/commit/e251ec010f3a1cd1d6d3ec821cf9292350d723c5))
+* Merge branch 'tm-3630-headers' into 'master' ([220e2dd](https://git.ilcd.rocks/team-floyd/themes/gatsby-themes/commit/220e2ddf5ed8bd6ea4150e63bb03472bad8b84c5))
+* Merge branch 'master' into tm-3388-pagination ([017e1d3](https://git.ilcd.rocks/team-floyd/themes/gatsby-themes/commit/017e1d38e6c96326832193bb43467b5453185924))
+* Merge branch 'master' into tm-3388-pagination ([9d15721](https://git.ilcd.rocks/team-floyd/themes/gatsby-themes/commit/9d15721c2ebced769fc9a162a0ec87afc83633de))
+* Merge branch 'master' into tm-3388-pagination ([fb31785](https://git.ilcd.rocks/team-floyd/themes/gatsby-themes/commit/fb31785bd78384cf7985298d97996bb369d98c19))
+
+## [29.0.10](https://git.ilcd.rocks/team-floyd/themes/gatsby-themes/compare/v29.0.9...v29.0.10) (2023-09-21)
+
+
+### Bug Fixes
+
+* removed minify class names in core theme ([f721d7a](https://git.ilcd.rocks/team-floyd/themes/gatsby-themes/commit/f721d7a43147a056d968ec49df9a6f253938f179))
+
 ## [29.0.9](https://git.ilcd.rocks/team-floyd/themes/gatsby-themes/compare/v29.0.8...v29.0.9) (2023-09-20)
 
 

package/gatsby-config.js

@@ -44,11 +44,5 @@ module.exports = {
       },
     },
     `gatsby-plugin-image`,
-    {
-      resolve: 'gatsby-plugin-minify-classnames',
-      options: {
-        /* gatsby-plugin-minify-classnames options here */
-      },
-    },
   ],
 };

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "gatsby-core-theme",
-  "version": "29.0.9",
+  "version": "30.0.0",
   "description": "Gatsby Theme NPM Package",
   "author": "",
   "license": "ISC",

package/src/components/atoms/author-box/index.js

@@ -30,16 +30,20 @@ export default function AuthorBox({
   verifiedIconWidth = 20,
   verifiedIconHeight = 20,
   showReadMore = true,
-  readTimeIcon = <FaClock />,
-  contReadIcon = <FaArrowRight />,
+  readTimeIcon = <FaClock title="Clock Icon" />,
+  contReadIcon = <FaArrowRight title="Right-pointing Arrow Icon" />,
 }) {
   const { translations } = useContext(Context) || {};
   const socialLinks = [
-    { id: 'fb', link: author?.facebook_profile, icon: <FaFacebookSquare /> },
-    { id: 'ig', link: author?.instagram_profile, icon: <FaInstagram /> },
-    { id: 'li', link: author?.linkedin_profile, icon: <FaLinkedin /> },
-    { id: 'tw', link: author?.twitter_profile, icon: <FaTwitter /> },
-    { id: 'tt', link: author?.tik_tok, icon: <IoLogoTiktok /> },
+    {
+      id: 'fb',
+      link: author?.facebook_profile,
+      icon: <FaFacebookSquare title="Facebook Icon" />,
+    },
+    { id: 'ig', link: author?.instagram_profile, icon: <FaInstagram title="Instagra Icon" /> },
+    { id: 'li', link: author?.linkedin_profile, icon: <FaLinkedin title="Linkedin Icon" /> },
+    { id: 'tw', link: author?.twitter_profile, icon: <FaTwitter title="Twitter Icon" /> },
+    { id: 'tt', link: author?.tik_tok, icon: <IoLogoTiktok title="Tiktok Icon" /> },
   ];
   const biographyRef = useRef(null);
   const [isReadMore, setIsReadMore] = useState(showReadMore);

package/src/components/atoms/module-title/index.js

@@ -7,7 +7,7 @@ import styles from './module-title.module.scss';
 
 const ModuleTitle = ({
   module,
-  viewMoreIcon = <FaAngleRight />,
+  viewMoreIcon = <FaAngleRight title="Right-pointing Arrow Icon" />,
   pageContext = null,
   anchorLabel = null,
 }) => {

package/src/components/atoms/open-graph/index.js

@@ -34,7 +34,7 @@ const OpenGraph = ({ page, text = 'Share: ' }) => {
         onClick={(e) => share(e, 555, 602)}
         aria-label="Facebook Link"
       >
-        <FaFacebookF />
+        <FaFacebookF title="Facebook Icon" />
       </a>
       <a
         target="_blank"
@@ -45,7 +45,7 @@ const OpenGraph = ({ page, text = 'Share: ' }) => {
         onClick={(e) => share(e, 555, 255)}
         aria-label="Twitter Link"
       >
-        <FaTwitter />
+        <FaTwitter title="Twitter Icon" />
       </a>
     </div>
   );

package/src/components/atoms/search/autocomplete/article.js

@@ -7,7 +7,7 @@ import styles from './article.module.scss';
 const Article = ({ item = {} }) => (
   <div className={styles.row || ''}>
     <h3>{item.title}</h3>
-    <IoMdArrowRoundForward />
+    <IoMdArrowRoundForward title="Right-pointing Arrow Icon" />
   </div>
 );
 

package/src/components/atoms/sitemap/index.js

@@ -11,7 +11,11 @@ import { translate } from '~helpers/getters';
 import styles from './sitemap.module.scss';
 import Link from '~hooks/link';
 
-const Sitemap = ({ pageContext, templateIcon = <BiSitemap />, linkIcon = <IoMdLink /> }) => {
+const Sitemap = ({
+  pageContext,
+  templateIcon = <BiSitemap title="Sitemap Icon" />,
+  linkIcon = <IoMdLink title="Link Icon" />,
+}) => {
   const { templates, sitemapData } = pageContext;
   const { translations } = useContext(Context) || {};
 

package/src/components/molecules/bonus/template-one/index.js

@@ -66,7 +66,7 @@ export default function Bonus({
           operator={operator}
           pageTemplate={pageTemplate}
           tracker={module?.tracking_link_name || 'main'}
-          icon={<FaArrowRight fontSize={20} />}
+          icon={<FaArrowRight fontSize={20} title="Right-pointing Arrow Icon" />}
         />
         {showTncFixed && <Tnc hasCollapse={false} operator={operator} />}
       </div>

package/src/components/molecules/bonus/template-two/index.js

@@ -106,7 +106,7 @@ export default function TemplateOne({
             operator={operator}
             pageTemplate={pageTemplate}
             tracker={module?.tracking_link_name || 'main'}
-            icon={<FaArrowRight fontSize={20} />}
+            icon={<FaArrowRight fontSize={20} title="Right-pointing Arrow Icon" />}
             translationsObj={translationsObj}
           />
           {showTncFixed && <Tnc hasCollapse={false} operator={operator} />}
@@ -116,6 +116,7 @@ export default function TemplateOne({
           onClick={clickHandler}
           fontSize={16}
           color="#ffffff"
+          title="Close Icon"
         />
       </div>
     )

package/src/components/molecules/bonus-box/template-three/index.js

@@ -16,6 +16,7 @@ export default function BonusBox({
   showVariablesComponent = true,
   splitBy = '+',
   feSeparator = '+',
+  buttonType = 'primary',
 }) {
   const { translations } = useContext(Context) || {};
   const welcomeBonusTranslation = translate(translations, 'welcome_bonus', 'Welcome Bonus');
@@ -46,12 +47,24 @@ export default function BonusBox({
       {!showVariablesComponent ? (
         <>
           {content()}
-          {ctaBtn && <CtaButton operator={item} icon={<FaArrowRight />} />}
+          {ctaBtn && (
+            <CtaButton
+              operator={item}
+              icon={<FaArrowRight title="Right-pointing Arrow Icon" />}
+              buttonType={buttonType}
+            />
+          )}
         </>
       ) : (
         <div>
           {content()}
-          {ctaBtn && <CtaButton operator={item} icon={<FaArrowRight />} />}
+          {ctaBtn && (
+            <CtaButton
+              operator={item}
+              icon={<FaArrowRight title="Right-pointing Arrow Icon" />}
+              buttonType={buttonType}
+            />
+          )}
         </div>
       )}
 
@@ -69,4 +82,5 @@ BonusBox.propTypes = {
   showVariablesComponent: PropTypes.bool,
   splitBy: PropTypes.string,
   feSeparator: PropTypes.string,
+  buttonType: PropTypes.string,
 };

package/src/components/molecules/bonus-box/template-two/index.js

@@ -11,6 +11,7 @@ export default function BonusBox({
   pageTemplate = null,
   splitBy = '+',
   feSeparator = '+',
+  buttonType = 'primary',
 }) {
   const prettyLink = prettyTracker(item, tracker, false, pageTemplate);
   const data = getBonusData(item, tracker, splitBy);
@@ -28,8 +29,11 @@ export default function BonusBox({
           <span className={styles.secondPart}>{`${feSeparator}${data.secondLine}`}</span>
         )}
       </a>
-
-      <CtaButton operator={item} icon={<FaArrowRight />} />
+      <CtaButton
+        operator={item}
+        icon={<FaArrowRight title="Right-pointing Arrow Icon" />}
+        buttonType={buttonType}
+      />
     </div>
   );
 }
@@ -40,4 +44,5 @@ BonusBox.propTypes = {
   pageTemplate: PropTypes.string,
   splitBy: PropTypes.string,
   feSeparator: PropTypes.string,
+  buttonType: PropTypes.string,
 };

package/src/components/molecules/pagination/index.js

@@ -1,23 +1,35 @@
 import React, { useEffect, useContext } from 'react';
-import PropTypes from 'prop-types';
+import PropTypes, { number } from 'prop-types';
+import { MdLastPage } from '@react-icons/all-files/md/MdLastPage';
+import { MdFirstPage } from '@react-icons/all-files/md/MdFirstPage';
+import { MdChevronRight } from '@react-icons/all-files/md/MdChevronRight';
+import { MdChevronLeft } from '@react-icons/all-files/md/MdChevronLeft';
+
+import keygen from '~helpers/keygen';
 import { translate } from '~helpers/getters';
 import Link from '~hooks/link';
-import styles from './pagination.module.scss';
-import keygen from '~helpers/keygen';
 import { Context } from '~context/MainProvider';
+import styles from './pagination.module.scss';
 
 const Pagination = ({
   currentPage = 1,
   pagePath = '#',
   totalPages = 5,
-  pageList = undefined,
-  previousText = 'Previous',
-  nextText = 'Next',
-  numOfItems = 5,
+  previousComp = <MdChevronLeft />,
+  nextComp = <MdChevronRight />,
+  firstComp = <MdFirstPage />,
+  lastComp = <MdLastPage />,
   anchorLabel,
+  pageNeighbours = 1,
+  showFirstLast = false,
+  showPrevNext = true,
+  showOf = false,
+  hidePrevious = false,
+  hideNext = false,
 }) => {
-  const numOfItemsEachSide = Math.ceil(numOfItems / 2);
   const { translations } = useContext(Context) || {};
+  const current = Number(currentPage);
+  const total = Number(totalPages);
   function getPagePath(index) {
     return (
       (index === 1
@@ -27,80 +39,204 @@ const Pagination = ({
     );
   }
 
-  function generatePaginationList() {
-    const pages = [];
-    // Generate list of page numbers before and after
-    for (
-      let i = currentPage - (numOfItemsEachSide - 2);
-      i < currentPage + (numOfItemsEachSide - 1);
-      i += 1
-    )
-      if (i > 0) {
-        if (i <= totalPages) {
-          pages.push(
-            <li key={keygen()}>
-              <Link
-                className={`${i === currentPage ? styles.active : ''} pagination-gtm`}
-                to={getPagePath(i)}
-              >
-                {i}
-              </Link>
-            </li>
-          );
-        }
-      }
-    return pages;
-  }
+  const midPoints = 'MID';
 
   useEffect(() => {
     const hash = window?.location?.hash?.replace('#', '');
     document?.getElementById(hash)?.scrollIntoView();
   });
 
+  const range = (from, to, step = 1) => {
+    let i = from;
+    const rangeArr = [];
+
+    while (i <= to) {
+      rangeArr.push(i);
+      i += step;
+    }
+
+    return rangeArr;
+  };
+
+  const fetchPageNumbers = () => {
+    const totalNumbers = pageNeighbours * 2 + 2;
+    const totalBlocks = totalNumbers + 2;
+
+    if (total > totalBlocks - 1) {
+      let pages = [];
+
+      const leftBound = current - pageNeighbours;
+      const rightBound = current + pageNeighbours;
+      const beforeLastPage = total - 1;
+
+      const startPage = leftBound > 2 ? leftBound : 2;
+      const endPage = rightBound < beforeLastPage ? rightBound : beforeLastPage;
+
+      pages = range(startPage, endPage);
+
+      const pagesCount = pages.length;
+      const singleSpillOffset = totalNumbers - pagesCount - 1;
+
+      const leftSpill = startPage > 2;
+      const rightSpill = endPage < beforeLastPage;
+
+      if (leftSpill && !rightSpill) {
+        const extraPages = range(startPage - singleSpillOffset, startPage - 1);
+        pages = [midPoints, ...extraPages, ...pages];
+      } else if (!leftSpill && rightSpill) {
+        const extraPages = range(endPage + 1, endPage + singleSpillOffset);
+        pages = [...pages, ...extraPages, midPoints];
+      } else if (leftSpill && rightSpill) {
+        pages = [midPoints, ...pages, midPoints];
+      }
+
+      return [1, ...pages, total];
+    }
+
+    return range(1, total);
+  };
+
   return (
     <ul className={styles.pagination || ''}>
-      {/* previous button */}
-      {currentPage !== 1 && (
-        <li>
-          <Link
-            to={getPagePath(currentPage - 1)}
-            className="pagination-gtm"
-            aria-label={translate(translations, 'archive_previous_button', previousText)}
-          >
-            {translate(translations, 'archive_previous_button', previousText)}
-          </Link>
+      {/* got to first page */}
+      {showFirstLast && (
+        <li className={styles.goToFirst || ''}>
+          {current > 1 ? (
+            <Link
+              to={getPagePath(1)}
+              className={`${styles.button || ''} ${styles.isActive || ''} pagination-gtm`}
+              aria-label={translate(translations, 'archive_go_to_first_page', 'Go to first page')}
+            >
+              {firstComp}
+            </Link>
+          ) : (
+            <span className={styles.button || ''}>{firstComp}</span>
+          )}
         </li>
       )}
-      {/* first page link */}
-      {currentPage >= numOfItemsEachSide && (
-        <li>
-          <Link to={getPagePath(1)} className="pagination-gtm">
-            1
-          </Link>
-          {currentPage !== numOfItemsEachSide && <span>...</span>}
+      {/* go to previous page */}
+      {showPrevNext && (
+        <li className={styles.goToPrevious || ''}>
+          {current > 1 ? (
+            <Link
+              to={getPagePath(current - 1)}
+              className={`${styles.button || ''} ${styles.isActive || ''} pagination-gtm`}
+              aria-label={translate(translations, 'archive_previous_button', 'Previous Button')}
+            >
+              {previousComp}
+            </Link>
+          ) : (
+            <span className={styles.button || ''}>{previousComp}</span>
+          )}
         </li>
       )}
-      {/* pages links */}
-      {pageList === undefined ? generatePaginationList() : pageList}
-      {/* last page link */}
-      {totalPages - currentPage >= numOfItemsEachSide - 1 && (
-        <li>
-          {totalPages - currentPage !== numOfItemsEachSide - 1 && <span>...</span>}
-          <Link to={getPagePath(totalPages)} className="pagination-gtm">
-            {totalPages}
-          </Link>
+
+      {/* start pages */}
+      <li>
+        <ul className={styles.pages || ''}>
+          {/* show [current page] of [total pages] */}
+          {showOf ? (
+            <>
+              <li className={styles.showOfCurrent || ''}>
+                <span>{current}</span>
+                of
+                <span>{total}</span>
+              </li>
+            </>
+          ) : (
+            fetchPageNumbers().map((page) => {
+              /* show mid points */
+              if (page === midPoints) {
+                return (
+                  <li key={keygen()} className={`${styles.page || ''} ${styles.midPoints || ''}`}>
+                    <span>...</span>
+                  </li>
+                );
+              }
+
+              /* previous page */
+              if (page === current - 1) {
+                return (
+                  !hidePrevious && (
+                    <li key={keygen()} className={`${styles.previousPage || ''} `}>
+                      {current === page ? (
+                        <span>{page}</span>
+                      ) : (
+                        <Link to={getPagePath(page)} className="pagination-gtm">
+                          {page}
+                        </Link>
+                      )}
+                    </li>
+                  )
+                );
+              }
+
+              /* next page */
+              if (page === current + 1) {
+                return (
+                  !hideNext && (
+                    <li key={keygen()} className={`${styles.nextPage || ''} `}>
+                      {current === page ? (
+                        <span>{page}</span>
+                      ) : (
+                        <Link to={getPagePath(page)} className="pagination-gtm">
+                          {page}
+                        </Link>
+                      )}
+                    </li>
+                  )
+                );
+              }
+
+              /* first and last pages, current page & extra pages */
+              return (
+                <li
+                  key={keygen()}
+                  className={`${styles.page || ''} ${current === page ? styles.active || '' : ''} ${
+                    page === 1 ? styles.firstPage || '' : ''
+                  } ${page === total ? styles.lastPage || '' : ''} `}
+                >
+                  <Link to={getPagePath(page)} className="pagination-gtm">
+                    {page}
+                  </Link>
+                </li>
+              );
+            })
+          )}
+        </ul>
+      </li>
+      {/* end pages */}
+
+      {/* next button */}
+      {showPrevNext && (
+        <li className={styles.goToNext || ''}>
+          {current < total ? (
+            <Link
+              to={getPagePath(current + 1)}
+              className={`${styles.button || ''} ${styles.isActive || ''} pagination-gtm`}
+              aria-label={translate(translations, 'archive_next_button', 'Next Button')}
+            >
+              {nextComp}
+            </Link>
+          ) : (
+            <span className={styles.button || ''}>{nextComp}</span>
+          )}
         </li>
       )}
-      {/* next button */}
-      {currentPage < totalPages && (
-        <li>
-          <Link
-            to={getPagePath(currentPage + 1)}
-            className="pagination-gtm"
-            aria-label={translate(translations, 'archive_next_button', nextText)}
-          >
-            {translate(translations, 'archive_next_button', nextText)}
-          </Link>
+      {/* got to last page */}
+      {showFirstLast && (
+        <li className={styles.goToLast || ''}>
+          {current !== total ? (
+            <Link
+              to={getPagePath(total)}
+              className={`${styles.button || ''} ${styles.isActive || ''} pagination-gtm`}
+              aria-label={translate(translations, 'archive_go_to_last_page', 'Go to Last')}
+            >
+              {lastComp}
+            </Link>
+          ) : (
+            <span className={styles.button || ''}>{lastComp}</span>
+          )}
         </li>
       )}
     </ul>
@@ -108,14 +244,20 @@ const Pagination = ({
 };
 
 Pagination.propTypes = {
-  currentPage: PropTypes.number,
-  pagePath: PropTypes.string,
-  totalPages: PropTypes.number,
-  // eslint-disable-next-line react/forbid-prop-types
-  pageList: PropTypes.arrayOf(PropTypes.any),
-  nextText: PropTypes.string,
-  previousText: PropTypes.string,
-  numOfItems: PropTypes.number,
+  currentPage: PropTypes.oneOfType([PropTypes.number, PropTypes.string]).isRequired,
+  pagePath: PropTypes.string.isRequired,
+  totalPages: PropTypes.oneOfType([PropTypes.number, PropTypes.string]).isRequired,
+  nextComp: PropTypes.oneOfType([PropTypes.element, PropTypes.any]),
+  previousComp: PropTypes.oneOfType([PropTypes.element, PropTypes.any]),
+  firstComp: PropTypes.oneOfType([PropTypes.element, PropTypes.any]),
+  lastComp: PropTypes.oneOfType([PropTypes.element, PropTypes.any]),
+  anchorLabel: PropTypes.string,
+  pageNeighbours: PropTypes.number,
+  showFirstLast: PropTypes.bool,
+  showPrevNext: PropTypes.bool,
+  showOf: PropTypes.bool,
+  hidePrevious: PropTypes.bool,
+  hideNext: PropTypes.bool,
 };
 
 export default Pagination;

package/src/components/molecules/pagination/pagination.module.scss

@@ -1,19 +1,63 @@
+.padd { 
+  @include flex-align(center, center);
+  border-radius: var(--pagination-border-radius, 100px);
+  border: var(--pagination-border, none);
+  font-size: calc(var(--pagination-font-size, 1.6rem) - 2px);
+  line-height: calc(var(--pagination-line-height, 4.8rem) - 2px);
+  font-weight: var(--pagination-font-weight, 500);
+  width: calc(var(--pagination-width, 4rem) - 1rem);
+  height: calc(var(--pagination-height, 4rem) - 1rem);
+  background-color: var(--pagination-background-color, #eeebe5);
+
+  @include min(mobile-m) {
+    width: var(--pagination-width, 4rem);
+    height: var(--pagination-height, 4rem);
+    font-size: var(--pagination-font-size, 1.6rem);
+    line-height: var(--pagination-line-height, 4.8rem);
+  }
+}
+
 .pagination {
+  padding: 1.6rem 0 !important;
   @include flex-align(center, center);
+  gap: var(--pagination-gap, 0.8rem);
+
+  ul {
+    @include flex-align(center, center);
+    gap: var(--pagination-midpoints-gap, 0);
+    background-color: var(--pagination-midpoints-background-color, #eeebe5);
+    border-radius: var(--pagination-midpoints-border-radius, 100px);
+
+    > li {
+      @include flex-align(center, center)
+    }
+  }
 
   a,
   span {
-    color: var(--color-10);
-    display: inline-block;
-    font-size: 1.8rem;
-    line-height: 4.8rem;
-    height: 4.8rem;
-  }
-  a {
-    padding: 0 0.4rem;
+    color: var(--pagination-active-color, #2e3337);
+    @extend .padd;
   }
 
-  .active {
-    color: var(--secondary-color);
+  .button {
+    cursor: not-allowed;
+    color: var(--pagination-inactive-color, #ffffff);
+    @extend .padd;
+
+    &.isActive {
+      color: var(--pagination-active-color, #2e3337);
+      cursor: pointer;
+    }
   }
 }
+
+.active a {
+  color: var(--pagination-current-page-color, #ffffff);
+  background-color: var(--pagination-current-page-background-color, #2e3337);
+  border: var(--pagination-current-page-border, var(--pagination-border, none));
+  font-weight: var(--pagination-active-font-weight, 700);
+}
+
+.showOfCurrent {
+  gap: var(--pagination-gap, 0.8rem);
+}