Use styled components

packages/chakra-components/src/components/Pagination/EllipsisButton.tsx

@@ -0,0 +1,48 @@
+import { useState } from 'react'
+import { useStyleConfig } from '@chakra-ui/system'
+import { Button, ButtonProps, Input, InputProps } from '@chakra-ui/react'
+
+type EllipsisButtonProps = ButtonProps & {
+  gotoPage: (page: number) => void
+  inputProps?: InputProps
+}
+
+export const EllipsisButton = ({ gotoPage, inputProps, ...rest }: EllipsisButtonProps) => {
+  const [ellipsisInput, setEllipsisInput] = useState(false)
+  const styles = useStyleConfig('EllipsisButton', rest)
+
+  if (ellipsisInput) {
+    return (
+      <Input
+        placeholder='Page #'
+        width='50px'
+        sx={styles}
+        {...inputProps}
+        onKeyDown={(e) => {
+          if (e.target instanceof HTMLInputElement && e.key === 'Enter') {
+            const pageNumber = Number(e.target.value)
+            gotoPage(pageNumber)
+            setEllipsisInput(false)
+          }
+        }}
+        onBlur={() => setEllipsisInput(false)}
+        autoFocus
+      />
+    )
+  }
+
+  return (
+    <Button
+      as='a'
+      href='#goto-page'
+      sx={styles}
+      {...rest}
+      onClick={(e) => {
+        e.preventDefault()
+        setEllipsisInput(true)
+      }}
+    >
+      ...
+    </Button>
+  )
+}

packages/chakra-components/src/components/Pagination.tsx → packages/chakra-components/src/components/Pagination/Pagination.tsx

@@ -1,9 +1,11 @@
-import { Button, ButtonGroup, ButtonGroupProps, ButtonProps, Input, InputProps, Text } from '@chakra-ui/react'
-import { ReactElement, useMemo, useState } from 'react'
+import { ButtonGroup, ButtonGroupProps, ButtonProps, InputProps, Text } from '@chakra-ui/react'
+import { ReactElement, useMemo } from 'react'
 import { generatePath, Link as RouterLink, useLocation, useNavigate, useParams } from 'react-router-dom'
-import { usePagination, useRoutedPagination } from '@vocdoni/react-providers'
+import { useLocalize, usePagination, useRoutedPagination } from '@vocdoni/react-providers'
 import { PaginationResponse } from '@vocdoni/sdk'
-import { Trans } from 'react-i18next'
+import { useMultiStyleConfig, chakra } from '@chakra-ui/system'
+import { EllipsisButton } from './EllipsisButton'
+import { PaginatorButton } from './PaginatorButton'
 
 export type PaginationProps = ButtonGroupProps & {
   maxButtons?: number | false
@@ -16,57 +18,19 @@ type PaginatorButtonProps = {
   currentPage: number
 } & ButtonProps
 
-const PageButton = ({ page, currentPage, ...rest }: PaginatorButtonProps) => (
-  <Button isActive={currentPage === page} {...rest}>
-    {page + 1}
-  </Button>
-)
-
-const RoutedPageButton = ({ page, currentPage, to, ...rest }: PaginatorButtonProps & { to: string }) => (
-  <Button as={RouterLink} to={to} isActive={currentPage === page} {...rest}>
-    {page + 1}
-  </Button>
-)
-
-type EllipsisButtonProps = ButtonProps & {
-  gotoPage: (page: number) => void
-  inputProps?: InputProps
+const PageButton = ({ page, currentPage, ...rest }: PaginatorButtonProps) => {
+  return (
+    <PaginatorButton isActive={currentPage === page} {...rest}>
+      {page + 1}
+    </PaginatorButton>
+  )
 }
 
-const EllipsisButton = ({ gotoPage, inputProps, ...rest }: EllipsisButtonProps) => {
-  const [ellipsisInput, setEllipsisInput] = useState(false)
-
-  if (ellipsisInput) {
-    return (
-      <Input
-        placeholder='Page #'
-        width='50px'
-        {...inputProps}
-        onKeyDown={(e) => {
-          if (e.target instanceof HTMLInputElement && e.key === 'Enter') {
-            const pageNumber = Number(e.target.value)
-            gotoPage(pageNumber)
-            setEllipsisInput(false)
-          }
-        }}
-        onBlur={() => setEllipsisInput(false)}
-        autoFocus
-      />
-    )
-  }
-
+const RoutedPageButton = ({ page, currentPage, to, ...rest }: PaginatorButtonProps & { to: string }) => {
   return (
-    <Button
-      as='a'
-      href='#goto-page'
-      {...rest}
-      onClick={(e) => {
-        e.preventDefault()
-        setEllipsisInput(true)
-      }}
-    >
-      ...
-    </Button>
+    <PaginatorButton as={RouterLink} to={to} isActive={currentPage === page} {...rest}>
+      {page + 1}
+    </PaginatorButton>
   )
 }
 
@@ -139,6 +103,9 @@ const PaginationButtons = ({
   goToPage: GotoPageType
 } & ButtonGroupProps &
   Pick<PaginationProps, 'maxButtons' | 'buttonProps'>) => {
+  const styles = useMultiStyleConfig('Pagination')
+  const t = useLocalize()
+
   const pages = usePaginationPages(
     currentPage,
     totalPages,
@@ -152,34 +119,34 @@ const PaginationButtons = ({
   )
 
   return (
-    <>
-      <ButtonGroup flexWrap={'wrap'} rowGap={2} {...rest}>
+    <chakra.div __css={styles.wrapper}>
+      <ButtonGroup sx={styles.buttonGroup} {...rest}>
         {totalPages === undefined ? (
           <>
-            <Button
+            <PaginatorButton
               key='previous'
               onClick={() => goToPage(currentPage - 1)}
               isDisabled={currentPage === 0}
               {...buttonProps}
             >
               Previous
-            </Button>
-            <Button key='next' onClick={() => goToPage(currentPage + 1)} {...buttonProps}>
+            </PaginatorButton>
+            <PaginatorButton key='next' onClick={() => goToPage(currentPage + 1)} {...buttonProps}>
               Next
-            </Button>
+            </PaginatorButton>
           </>
         ) : (
           pages
         )}
       </ButtonGroup>
       {totalItems && (
-        <Text color={'lighterText'}>
-          <Trans i18nKey={'filters.total_results'} count={totalItems}>
-            Showing a total of {{ count: totalItems }} results
-          </Trans>
+        <Text sx={styles.totalResults}>
+          {t('pagination.total_results', {
+            count: totalItems,
+          })}
         </Text>
       )}
-    </>
+    </chakra.div>
   )
 }
 

packages/chakra-components/src/components/Pagination/PaginatorButton.tsx

@@ -0,0 +1,7 @@
+import { useStyleConfig } from '@chakra-ui/system'
+import { Button, ButtonProps, forwardRef } from '@chakra-ui/react'
+
+export const PaginatorButton = forwardRef<ButtonProps, 'div'>((props, ref) => {
+  const styles = useStyleConfig('PageButton', props)
+  return <Button sx={styles} {...props} />
+})

packages/chakra-components/src/components/Pagination/index.ts

@@ -0,0 +1 @@
+export * from './Pagination'

packages/chakra-components/src/components/index.ts

@@ -6,3 +6,5 @@ export * from './Election'
 export * from './layout'
 // Organization components
 export * from './Organization'
+// Pagination components
+export * from './Pagination'

packages/chakra-components/src/i18n/locales.ts

@@ -38,6 +38,9 @@ export const locales = {
     not_voted_in_ended_election: "You did not vote in this election and it's already finished",
   },
   loading: 'Loading...',
+  pagination: {
+    total_results: 'Showing a total of {{ count }} results',
+  },
   question_types: {
     approval_tooltip:
       "Approval voting lets you vote for as many options as you like. The one with the most votes wins. It's a simple way to show your support for all the choices you approve of.",

packages/chakra-components/src/theme/index.ts

@@ -9,6 +9,7 @@ import {
   QuestionsTypeBadgeTheme,
 } from './questions'
 import { ResultsTheme as ElectionResults } from './results'
+import { PaginationTheme as Pagination } from './pagination'
 import { VoteWeightTheme } from './vote'
 
 export const theme = {
@@ -19,6 +20,7 @@ export const theme = {
     ElectionSchedule,
     ElectionTitle,
     HorizontalRuler: HorizontalRulerTheme,
+    Pagination,
     ConfirmModal: ConfirmModalTheme,
     QuestionsConfirmation: QuestionsConfirmationTheme,
     QuestionsTip: QuestionsTipTheme,

packages/chakra-components/src/theme/pagination.ts

@@ -0,0 +1,24 @@
+import { createMultiStyleConfigHelpers } from '@chakra-ui/styled-system'
+
+export const PaginationAnatomy = [
+  // Top level wrapper
+  'wrapper',
+  // wrapper for buttons
+  'buttonGroup',
+  // total results text
+  'totalResults',
+]
+
+const { defineMultiStyleConfig: defineVoteWeightTipStyle, definePartsStyle: defineVoteWeightParts } =
+  createMultiStyleConfigHelpers(PaginationAnatomy)
+
+export const PaginationTheme = defineVoteWeightTipStyle({
+  baseStyle: defineVoteWeightParts({
+    wrapper: {},
+    buttonGroup: {
+      flexWrap: 'wrap',
+      rowGap: '2',
+    },
+    totalResults: {},
+  }),
+})