Merge pull request #1268 from vtex/feat/pagination-architecture

Pagination: Architecture

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"
+}

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"
+}

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"
+}

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"
+}

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"
+}

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,
+}

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"
+}

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"
+}

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"
+}

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"
+}

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"
+}

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"
+}

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"
+}

packages/components/src/pagination/pagination-select.tsx

@@ -0,0 +1,66 @@
+import type { ReactNode } from 'react'
+import React, { forwardRef } from 'react'
+
+import { Action } from '../action'
+
+import { Select, SelectPopover, SelectProvider } from '../select'
+import { Bleed } from '../bleed'
+import { Skeleton } from '../skeleton'
+
+export const PaginationSelect = forwardRef<
+  HTMLDivElement,
+  PaginationSelectProps
+>(function Pagination(props, ref) {
+  const {
+    loading = false,
+    value,
+    options,
+    label,
+    onValueChange,
+    children,
+    disabled = false,
+    ...otherProps
+  } = props
+
+  if (loading) {
+    return (
+      <div data-sl-pagination-select data-loading={loading}>
+        <Skeleton />
+      </div>
+    )
+  }
+
+  return (
+    <div data-sl-pagination-select ref={ref} {...otherProps}>
+      {options.length === 1 ? (
+        <div data-sl-pagination-label>{label}</div>
+      ) : (
+        <SelectProvider
+          value={String(value)}
+          setValue={(value) => onValueChange?.(Number(value))}
+        >
+          <Select asChild>
+            <Action data-sl-pagination-select-action disabled={disabled}>
+              {label}
+            </Action>
+          </Select>
+          <Bleed>
+            <SelectPopover data-sl-pagination-select-popover>
+              {options.map((option) => children(option))}
+            </SelectPopover>
+          </Bleed>
+        </SelectProvider>
+      )}
+    </div>
+  )
+})
+
+export interface PaginationSelectProps {
+  onValueChange?: (value: number) => void
+  value: number
+  options: number[]
+  children: (option: number) => ReactNode
+  loading?: boolean
+  label: ReactNode
+  disabled?: boolean
+}

packages/components/src/pagination/pagination.css

@@ -5,37 +5,25 @@
     letter-spacing: var(--sl-text-emphasis-letter-spacing);
   }
 
-  [data-sl-pagination-size] {
-    position: relative;
+  [data-sl-pagination-select-action] {
+    font: var(--sl-text-emphasis-font);
+    letter-spacing: var(--sl-text-emphasis-letter-spacing);
   }
 
-  [data-sl-pagination-size-select] {
-    color: var(--sl-fg-muted);
-    border: none;
-    border-radius: var(--sl-border-radius-medium);
-    background: var(--sl-bg);
-    padding: var(--sl-space-1) var(--sl-space-3);
-    padding-right: var(--sl-space-8);
-    appearance: none;
-    cursor: pointer;
-
-    &:focus {
-      outline: none;
-    }
+  [data-sl-pagination-select-popover] {
+    margin-top: var(--sl-space-1);
+    max-height: 12.75rem;
+    overflow-y: auto;
+  }
 
-    &:focus-visible {
-      box-shadow: var(--sl-focus-ring);
-    }
+  [data-sl-pagination-select][data-loading='true'] {
+    width: 2.75rem;
+    height: 1.25rem;
   }
 
-  [data-sl-pagination-size-select-icon] {
-    color: var(--sl-fg-soft);
-    position: absolute;
-    right: var(--sl-space-3);
-    top: var(--sl-space-0);
-    bottom: var(--sl-space-0);
-    margin: auto;
-    pointer-events: none;
+  [data-sl-pagination-total-label][data-loading='true'] {
+    width: 4.125rem;
+    height: 1.25rem;
   }
 
   [data-sl-pagination-actions] {