feat(pagination): add intl messages

vtex · Nov 24, 2023 · f93cb15 · f93cb15
1 parent 5985424
commit f93cb15
Show file tree

Hide file tree

Showing 15 changed files with 154 additions and 10 deletions.
diff --git a/packages/components/src/pagination/messages/bg.json b/packages/components/src/pagination/messages/bg.json
@@ -0,0 +1,7 @@
+{
+  "size-select": "Show {size}",
+  "page-select": "{page} of {pages}",
+  "total-label": "{total} items",
+  "next-page-action": "Next page",
+  "previous-page-action": "Previous page"
+}
diff --git a/packages/components/src/pagination/messages/de.json b/packages/components/src/pagination/messages/de.json
@@ -0,0 +1,7 @@
+{
+  "size-select": "Show {size}",
+  "page-select": "{page} of {pages}",
+  "total-label": "{total} items",
+  "next-page-action": "Next page",
+  "previous-page-action": "Previous page"
+}
diff --git a/packages/components/src/pagination/messages/en.json b/packages/components/src/pagination/messages/en.json
@@ -0,0 +1,7 @@
+{
+  "size-select": "Show {size}",
+  "page-select": "{page} of {pages}",
+  "total-label": "{total} items",
+  "next-page-action": "Next page",
+  "previous-page-action": "Previous page"
+}
diff --git a/packages/components/src/pagination/messages/es.json b/packages/components/src/pagination/messages/es.json
@@ -0,0 +1,7 @@
+{
+  "size-select": "Show {size}",
+  "page-select": "{page} of {pages}",
+  "total-label": "{total} items",
+  "next-page-action": "Next page",
+  "previous-page-action": "Previous page"
+}
diff --git a/packages/components/src/pagination/messages/fr.json b/packages/components/src/pagination/messages/fr.json
@@ -0,0 +1,7 @@
+{
+  "size-select": "Show {size}",
+  "page-select": "{page} of {pages}",
+  "total-label": "{total} items",
+  "next-page-action": "Next page",
+  "previous-page-action": "Previous page"
+}
diff --git a/packages/components/src/pagination/messages/index.ts b/packages/components/src/pagination/messages/index.ts
@@ -0,0 +1,27 @@
+import bg from './bg.json'
+import de from './de.json'
+import en from './en.json'
+import es from './es.json'
+import fr from './fr.json'
+import it from './it.json'
+import ja from './ja.json'
+import ko from './ko.json'
+import nl from './nl.json'
+import pt from './pt.json'
+import ro from './ro.json'
+import th from './th.json'
+
+export const messages = {
+  'en-US': en,
+  'es-AR': es,
+  'fr-FR': fr,
+  'pt-BR': pt,
+  'ja-JP': ja,
+  'ko-KR': ko,
+  'it-IT': it,
+  'nl-NL': nl,
+  'ro-RO': ro,
+  'bg-BG': bg,
+  'th-TH': th,
+  'de-DE': de,
+}
diff --git a/packages/components/src/pagination/messages/it.json b/packages/components/src/pagination/messages/it.json
@@ -0,0 +1,7 @@
+{
+  "size-select": "Show {size}",
+  "page-select": "{page} of {pages}",
+  "total-label": "{total} items",
+  "next-page-action": "Next page",
+  "previous-page-action": "Previous page"
+}
diff --git a/packages/components/src/pagination/messages/ja.json b/packages/components/src/pagination/messages/ja.json
@@ -0,0 +1,7 @@
+{
+  "size-select": "Show {size}",
+  "page-select": "{page} of {pages}",
+  "total-label": "{total} items",
+  "next-page-action": "Next page",
+  "previous-page-action": "Previous page"
+}
diff --git a/packages/components/src/pagination/messages/ko.json b/packages/components/src/pagination/messages/ko.json
@@ -0,0 +1,7 @@
+{
+  "size-select": "Show {size}",
+  "page-select": "{page} of {pages}",
+  "total-label": "{total} items",
+  "next-page-action": "Next page",
+  "previous-page-action": "Previous page"
+}
diff --git a/packages/components/src/pagination/messages/nl.json b/packages/components/src/pagination/messages/nl.json
@@ -0,0 +1,7 @@
+{
+  "size-select": "Show {size}",
+  "page-select": "{page} of {pages}",
+  "total-label": "{total} items",
+  "next-page-action": "Next page",
+  "previous-page-action": "Previous page"
+}
diff --git a/packages/components/src/pagination/messages/pt.json b/packages/components/src/pagination/messages/pt.json
@@ -0,0 +1,7 @@
+{
+  "size-select": "Mostrar {size}",
+  "page-select": "{page} de {pages}",
+  "total-label": "{total} itens",
+  "next-page-action": "Próxima página",
+  "previous-page-action": "Página anterior"
+}
diff --git a/packages/components/src/pagination/messages/ro.json b/packages/components/src/pagination/messages/ro.json
@@ -0,0 +1,7 @@
+{
+  "size-select": "Show {size}",
+  "page-select": "{page} of {pages}",
+  "total-label": "{total} items",
+  "next-page-action": "Next page",
+  "previous-page-action": "Previous page"
+}
diff --git a/packages/components/src/pagination/messages/th.json b/packages/components/src/pagination/messages/th.json
@@ -0,0 +1,7 @@
+{
+  "size-select": "Show {size}",
+  "page-select": "{page} of {pages}",
+  "total-label": "{total} items",
+  "next-page-action": "Next page",
+  "previous-page-action": "Previous page"
+}
diff --git a/packages/components/src/pagination/pagination.tsx b/packages/components/src/pagination/pagination.tsx
@@ -8,6 +8,11 @@ import './pagination.css'
 import { SelectOption } from '../select'
 import { Skeleton } from '../skeleton'
 import { PaginationSelect } from './pagination-select'
+import { createMessageHook } from '../locale'
+import { messages } from './messages'
+
+const useMessage = createMessageHook(messages)
+
 /**
  * Pagination triggers allow merchants to view the size of a list and navigate between pages.
  *
@@ -35,14 +40,17 @@ export const Pagination = forwardRef<HTMLDivElement, PaginationProps>(
       ...otherProps
     } = props
 
-    const hasSizes = sizeOptions.length > 0
+    const getMessage = useMessage()
 
-    const totalPages = useMemo(() => Math.ceil(total / size), [total, size])
+    const hasSizes = sizeOptions.length > 0
 
-    const pageOptions = useMemo(() => {
+    const { totalPages, pageOptions } = useMemo(() => {
       const totalPages = Math.ceil(total / size)
+      const pageOptions = Array(totalPages)
+        .fill(1)
+        .map((_, index) => index + 1)
 
-      return [...Array(totalPages).keys()].slice(1)
+      return { totalPages, pageOptions }
     }, [total, size])
 
     return (
@@ -54,19 +62,19 @@ export const Pagination = forwardRef<HTMLDivElement, PaginationProps>(
               value={size}
               options={sizeOptions}
               onValueChange={(value) => onSizeChange?.(value)}
-              label={`Show ${size}`}
+              label={getMessage('size-select', { size })}
               disabled={loading}
             >
               {(option) => (
                 <SelectOption value={String(option)}>
-                  Show {option}
+                  {getMessage('size-select', { size: option })}
                 </SelectOption>
               )}
             </PaginationSelect>
           )}
 
           <div data-sl-pagination-total-label data-loading={loading}>
-            {loading ? <Skeleton /> : `${total} items`}
+            {loading ? <Skeleton /> : getMessage('total-label', { total })}
           </div>
 
           <div data-sl-pagination-actions>
@@ -76,7 +84,7 @@ export const Pagination = forwardRef<HTMLDivElement, PaginationProps>(
                 onPageChange?.(page - 1, 'prev')
               }}
               disabled={page === 1 || loading}
-              aria-label="Previous page"
+              aria-label={getMessage('previous-page-action')}
               data-sl-pagination-action-prev
             >
               <IconCaretLeft />
@@ -88,7 +96,10 @@ export const Pagination = forwardRef<HTMLDivElement, PaginationProps>(
               value={page}
               options={pageOptions}
               loading={loading}
-              label={`${page} of ${pageOptions.length}`}
+              label={getMessage('page-select', {
+                page,
+                pages: totalPages,
+              })}
             >
               {(option) => (
                 <SelectOption value={String(option)}>{option}</SelectOption>
@@ -101,7 +112,7 @@ export const Pagination = forwardRef<HTMLDivElement, PaginationProps>(
                 onPageChange?.(page + 1, 'next')
               }}
               disabled={page === totalPages || loading}
-              aria-label="Next page"
+              aria-label={getMessage('next-page-action')}
               data-sl-pagination-action-next
             >
               <IconCaretRight />

diff --git a/packages/components/src/pagination/stories/pagination.stories.tsx b/packages/components/src/pagination/stories/pagination.stories.tsx
@@ -3,6 +3,7 @@ import './style.css'
 import React, { useState } from 'react'
 
 import { Pagination } from '../index'
+import { LocaleProvider } from '../../locale'
 
 export default {
   title: 'shoreline-components/pagination',
@@ -57,3 +58,24 @@ export function Loading() {
     </div>
   )
 }
+
+export function Intl() {
+  const [pagination, setPagination] = useState({ page: 1, size: 25 })
+
+  return (
+    <LocaleProvider locale="pt-BR">
+      <div className="pagination-container">
+        <Pagination
+          page={pagination.page}
+          onPageChange={(page) => {
+            setPagination((prev) => ({ ...prev, page }))
+          }}
+          total={100}
+          sizeOptions={[25, 50, 100]}
+          size={pagination.size}
+          onSizeChange={(size) => setPagination((prev) => ({ ...prev, size }))}
+        />
+      </div>
+    </LocaleProvider>
+  )
+}