<commit_before>import React from 'react'
import PropTypes from 'prop-types'
import styled from 'styled-components'
import { GREY_1, GREY_3, GREY_4, LINK_COLOUR, TEXT_COLOUR } from 'govuk-colours'
import { FONT_SIZE, MEDIA_QUERIES, SPACING } from '@govuk-react/constants'
import Link from '@govuk-react/link'

import computeVisiblePieces from './computeVisiblePieces'

import {
  PAGINATION_PIECE_ELLIPSIS,
  PAGINATION_PIECE_NEXT,
  PAGINATION_PIECE_PAGE_NUMBER,
  PAGINATION_PIECE_PREVIOUS,
} from './constants'

const StyledNav = styled('nav')`
  text-align: center;
  line-height: 1;
  display: flex;
  justify-content: space-around;
  padding: ${SPACING.SCALE_3};

  ${MEDIA_QUERIES.TABLET} {
    display: block;
  }
`

const StyledPaginationList = styled('ul')`
  margin: 0;
  list-style: none;
`

const StyledPaginationPiece = styled('li')`
  display: inline-block;

  & + & {
    margin-left: ${SPACING.SCALE_1};
  }
`

const StyledPaginationLink = styled(Link)`
  font-weight: bold;
  font-size: ${FONT_SIZE.SIZE_16};
  display: inline-block;
  padding: ${SPACING.SCALE_1} ${SPACING.SCALE_3};
  background-color: ${GREY_4};
  line-height: 1.9em;
  color: ${LINK_COLOUR};
  text-decoration: none;

  :hover {
    background-color: ${GREY_3};
  }
`

const StyledActivePaginationLink = styled(StyledPaginationLink)`
  :link {
    color: ${TEXT_COLOUR};
    background-color: transparent;
  }
`

const StyledPagesTruncation = styled('span')`
  font-weight: bold;
  font-size: ${FONT_SIZE.SIZE_16};
  display: inline-block;
  padding: ${SPACING.SCALE_2};
  background-color: transparent;
  line-height: ${FONT_SIZE.SIZE_24};
  color: ${GREY_1};
`

function Pagination({ totalPages, activePage, getPageUrl, onPageClick }) {
  const visiblePieces = computeVisiblePieces(totalPages, activePage)
  if (totalPages < 2) {
    return null
  }

  return (
    <StyledNav aria-label={`pagination: total ${totalPages} pages`}>
      <StyledPaginationList>
        {visiblePieces.map(
          ({ type, pageNumber, isActive, isDisabled }, index) => {
            const key = `${type}-${index}`
            const onClick = (event) => {
              event.target.blur()
              event.preventDefault()
              onPageClick(pageNumber)
            }
            const PageNumberLink = isActive
              ? StyledActivePaginationLink
              : StyledPaginationLink

            if (isDisabled) {
              return null
            }

            return (
              <StyledPaginationPiece key={key}>
                {type === PAGINATION_PIECE_PREVIOUS && (
                  <StyledPaginationLink
                    data-test="prev"
                    onClick={onClick}
                    href={getPageUrl(pageNumber)}
                  >
                    Previous
                  </StyledPaginationLink>
                )}

                {type === PAGINATION_PIECE_ELLIPSIS && (
                  <StyledPagesTruncation data-test="ellipsis">
                    …
                  </StyledPagesTruncation>
                )}

                {type === PAGINATION_PIECE_PAGE_NUMBER && (
                  <PageNumberLink
                    data-test={isActive ? 'page-number-active' : 'page-number'}
                    data-page-number={pageNumber}
                    onClick={onClick}
                    href={getPageUrl(pageNumber)}
                  >
                    {pageNumber}
                  </PageNumberLink>
                )}

                {type === PAGINATION_PIECE_NEXT && (
                  <StyledPaginationLink
                    data-test="next"
                    onClick={onClick}
                    href={getPageUrl(pageNumber)}
                  >
                    Next
                  </StyledPaginationLink>
                )}
              </StyledPaginationPiece>
            )
          }
        )}
      </StyledPaginationList>
    </StyledNav>
  )
}

Pagination.propTypes = {
  totalPages: PropTypes.number.isRequired,
  activePage: PropTypes.number,
  onPageClick: PropTypes.func,
  getPageUrl: PropTypes.func,
}

Pagination.defaultProps = {
  activePage: 1,
  onPageClick: null,
  getPageUrl: () => '#',
}

export default Pagination
<commit_msg>Remove the left and right padding from the pagination<commit_after>import React from 'react'
import PropTypes from 'prop-types'
import styled from 'styled-components'
import { GREY_1, GREY_3, GREY_4, LINK_COLOUR, TEXT_COLOUR } from 'govuk-colours'
import { FONT_SIZE, MEDIA_QUERIES, SPACING } from '@govuk-react/constants'
import Link from '@govuk-react/link'

import computeVisiblePieces from './computeVisiblePieces'

import {
  PAGINATION_PIECE_ELLIPSIS,
  PAGINATION_PIECE_NEXT,
  PAGINATION_PIECE_PAGE_NUMBER,
  PAGINATION_PIECE_PREVIOUS,
} from './constants'

const StyledNav = styled('nav')`
  text-align: center;
  line-height: 1;
  display: flex;
  justify-content: space-around;
  padding: ${SPACING.SCALE_3} 0;

  ${MEDIA_QUERIES.TABLET} {
    display: block;
  }
`

const StyledPaginationList = styled('ul')`
  margin: 0;
  list-style: none;
`

const StyledPaginationPiece = styled('li')`
  display: inline-block;

  & + & {
    margin-left: ${SPACING.SCALE_1};
  }
`

const StyledPaginationLink = styled(Link)`
  font-weight: bold;
  font-size: ${FONT_SIZE.SIZE_16};
  display: inline-block;
  padding: ${SPACING.SCALE_1} ${SPACING.SCALE_3};
  background-color: ${GREY_4};
  line-height: 1.9em;
  color: ${LINK_COLOUR};
  text-decoration: none;

  :hover {
    background-color: ${GREY_3};
  }
`

const StyledActivePaginationLink = styled(StyledPaginationLink)`
  :link {
    color: ${TEXT_COLOUR};
    background-color: transparent;
  }
`

const StyledPagesTruncation = styled('span')`
  font-weight: bold;
  font-size: ${FONT_SIZE.SIZE_16};
  display: inline-block;
  padding: ${SPACING.SCALE_2};
  background-color: transparent;
  line-height: ${FONT_SIZE.SIZE_24};
  color: ${GREY_1};
`

function Pagination({ totalPages, activePage, getPageUrl, onPageClick }) {
  const visiblePieces = computeVisiblePieces(totalPages, activePage)
  if (totalPages < 2) {
    return null
  }

  return (
    <StyledNav aria-label={`pagination: total ${totalPages} pages`}>
      <StyledPaginationList>
        {visiblePieces.map(
          ({ type, pageNumber, isActive, isDisabled }, index) => {
            const key = `${type}-${index}`
            const onClick = (event) => {
              event.target.blur()
              event.preventDefault()
              onPageClick(pageNumber)
            }
            const PageNumberLink = isActive
              ? StyledActivePaginationLink
              : StyledPaginationLink

            if (isDisabled) {
              return null
            }

            return (
              <StyledPaginationPiece key={key}>
                {type === PAGINATION_PIECE_PREVIOUS && (
                  <StyledPaginationLink
                    data-test="prev"
                    onClick={onClick}
                    href={getPageUrl(pageNumber)}
                  >
                    Previous
                  </StyledPaginationLink>
                )}

                {type === PAGINATION_PIECE_ELLIPSIS && (
                  <StyledPagesTruncation data-test="ellipsis">
                    …
                  </StyledPagesTruncation>
                )}

                {type === PAGINATION_PIECE_PAGE_NUMBER && (
                  <PageNumberLink
                    data-test={isActive ? 'page-number-active' : 'page-number'}
                    data-page-number={pageNumber}
                    onClick={onClick}
                    href={getPageUrl(pageNumber)}
                  >
                    {pageNumber}
                  </PageNumberLink>
                )}

                {type === PAGINATION_PIECE_NEXT && (
                  <StyledPaginationLink
                    data-test="next"
                    onClick={onClick}
                    href={getPageUrl(pageNumber)}
                  >
                    Next
                  </StyledPaginationLink>
                )}
              </StyledPaginationPiece>
            )
          }
        )}
      </StyledPaginationList>
    </StyledNav>
  )
}

Pagination.propTypes = {
  totalPages: PropTypes.number.isRequired,
  activePage: PropTypes.number,
  onPageClick: PropTypes.func,
  getPageUrl: PropTypes.func,
}

Pagination.defaultProps = {
  activePage: 1,
  onPageClick: null,
  getPageUrl: () => '#',
}

export default Pagination

{'fraction_non_alphanumeric': 0.11163447951012719, 'fraction_numerical': 0.005534620819594913, 'mean_word_length': 2.050646551724138, 'pattern_counts': {'":': 0, '<': 33, '<?xml version=': 0, '>': 37, 'https://': 0, 'lorem ipsum': 0, 'www.': 0, 'xml': 0}, 'pii_count': 0, 'substrings_counts': 0, 'word_list_counts': {'cursed_substrings.json': 0, 'profanity_word_list.json': 0, 'sexual_word_list.json': 0, 'zh_pornsignals.json': 0}}
{'dir': 'git-commits-cleaned', 'id': '5703231', 'n_tokens_mistral': 2765, 'n_tokens_neox': 2635, 'n_words': 453}