feat(Pagination): add label props

BREAKING CHANGE:
translations were removed, use label props instead

packages/orbit-components/src/Pagination/Pagination.stories.tsx

@@ -12,16 +12,33 @@ export default {
 
 export const Default = () => {
   const pageCount = number("pageCount", 6);
+  const labelPrev = text("labelPrev", "prev");
+  const labelNext = text("labelNext", "next");
+  const labelProgress = text("labelProgress", "of");
 
-  return <Pagination pageCount={pageCount} onPageChange={action("onPageChange")} />;
+  return (
+    <Pagination
+      labelPrev={labelPrev}
+      labelNext={labelNext}
+      labelProgress={labelProgress}
+      pageCount={pageCount}
+      onPageChange={action("onPageChange")}
+    />
+  );
 };
 
 export const WithALotOfPages = () => {
   const selectedPage = number("selectedPage", 44);
   const pageCount = number("pageCount", 100);
+  const labelPrev = text("labelPrev", "prev");
+  const labelNext = text("labelNext", "next");
+  const labelProgress = text("labelProgress", "of");
 
   return (
     <Pagination
+      labelPrev={labelPrev}
+      labelNext={labelNext}
+      labelProgress={labelProgress}
       pageCount={pageCount}
       selectedPage={selectedPage}
       onPageChange={action("onPageChange")}
@@ -36,8 +53,20 @@ WithALotOfPages.story = {
 export const SmallSize = () => {
   const size = select("size", Object.values(SIZES), SIZES.SMALL);
   const pageCount = number("pageCount", 100);
+  const labelPrev = text("labelPrev", "prev");
+  const labelNext = text("labelNext", "next");
+  const labelProgress = text("labelProgress", "of");
 
-  return <Pagination pageCount={pageCount} size={size} onPageChange={action("onPageChange")} />;
+  return (
+    <Pagination
+      labelPrev={labelPrev}
+      labelNext={labelNext}
+      labelProgress={labelProgress}
+      pageCount={pageCount}
+      size={size}
+      onPageChange={action("onPageChange")}
+    />
+  );
 };
 
 SmallSize.story = {
@@ -50,9 +79,15 @@ export const Playground = () => {
   const selectedPage = number("selectedPage", 2);
   const hideLabels = boolean("hideLabels", false);
   const size = select("size", Object.values(SIZES), SIZES.NORMAL);
+  const labelPrev = text("labelPrev", "prev");
+  const labelNext = text("labelNext", "next");
+  const labelProgress = text("labelProgress", "of");
 
   return (
     <Pagination
+      labelPrev={labelPrev}
+      labelNext={labelNext}
+      labelProgress={labelProgress}
       dataTest={dataTest}
       pageCount={pageCount}
       selectedPage={selectedPage}

packages/orbit-components/src/Pagination/README.md

@@ -20,6 +20,9 @@ Table below contains all types of the props available in the Pagination componen
 | :--------------- | :--------------- | :--------- | :----------------------------------------------------------------------------------------- |
 | dataTest         | `string`         |            | Optional prop for testing purposes.                                                        |
 | hideLabels       | `boolean`        | `true`     | If `false`, the Previous and Next labels will be visible.                                  |
+| labelPrev        | `React.Node`     |            | The text label for the previous page call to action.                                       |
+| labelNext        | `React.Node`     |            | The text label for the next page call to action.                                           |
+| labelProgress    | `React.Node`     |            | The text label for progress indicator.                                                     |
 | **onPageChange** | `number => void` |            | Function for handling onPageChange event. [See Functional specs](#functional-specs)        |
 | **pageCount**    | `number`         |            | The page count to render into separated buttons. [See Functional specs](#functional-specs) |
 | selectedPage     | `number`         | `1`        | The index number of the selected page.                                                     |

packages/orbit-components/src/Pagination/index.js.flow

@@ -17,6 +17,9 @@ export type Props = {|
   ...PageCount,
   ...SelectedPage,
   hideLabels?: boolean,
+  prevLabel: React.Node,
+  nextLabel: React.Node,
+  progressLabel: React.Node,
   size?: Sizes,
 |};
 

packages/orbit-components/src/Pagination/index.tsx

@@ -9,8 +9,6 @@ import { MAXIMUM_PAGES, SIZES } from "./consts";
 import Pages from "./components/Pages";
 import CompactPages from "./components/CompactPages";
 import ActiveButton from "./components/ActiveButton";
-import Translate from "../Translate";
-import useTranslate from "../hooks/useTranslate";
 import type { Props } from "./types";
 
 const handlePageChange = (onPageChange, pageCount) => nextPageIndex => {
@@ -21,6 +19,9 @@ const handlePageChange = (onPageChange, pageCount) => nextPageIndex => {
 
 const Pagination = ({
   pageCount,
+  labelPrev,
+  labelNext,
+  labelProgress,
   selectedPage = 1,
   onPageChange,
   dataTest,
@@ -29,7 +30,6 @@ const Pagination = ({
 }: Props) => {
   const pageChanged = handlePageChange(onPageChange, pageCount);
   const { isTablet } = useMediaQuery();
-  const translate = useTranslate();
 
   return (
     <Stack spacing="XXSmall" align="center" grow={false} shrink dataTest={dataTest} basis="auto">
@@ -39,21 +39,18 @@ const Pagination = ({
             onClick={() => pageChanged(selectedPage - 1)}
             iconLeft={<ChevronBackward />}
             type="secondary"
-            title={translate("pagination_label_prev")}
+            title={labelPrev}
             size={size}
             disabled={selectedPage <= 1}
           />
           <ActiveButton transparent size={size}>
-            {translate("pagination_progress", {
-              number: selectedPage,
-              total: pageCount,
-            })}
+            {labelProgress}
           </ActiveButton>
           <ButtonLink
             onClick={() => pageChanged(selectedPage + 1)}
             iconLeft={<ChevronForward />}
             type="secondary"
-            title={translate("pagination_label_next")}
+            title={labelNext}
             size={size}
             disabled={pageCount <= selectedPage}
           />
@@ -64,11 +61,11 @@ const Pagination = ({
             onClick={() => pageChanged(selectedPage - 1)}
             iconLeft={<ChevronBackward />}
             type="secondary"
-            title={hideLabels ? translate("pagination_label_prev") : undefined}
+            title={hideLabels ? labelPrev : undefined}
             size={size}
             disabled={selectedPage <= 1}
           >
-            {!hideLabels && <Translate tKey="pagination_label_prev" />}
+            {!hideLabels && labelPrev}
           </ButtonLink>
           <Stack inline grow={false} spacing="XXSmall" align="center">
             {pageCount <= MAXIMUM_PAGES ? (
@@ -92,11 +89,11 @@ const Pagination = ({
             iconRight={!hideLabels && <ChevronForward />}
             iconLeft={hideLabels && <ChevronForward />}
             type="secondary"
-            title={hideLabels ? translate("pagination_label_next") : undefined}
+            title={hideLabels ? labelNext : undefined}
             size={size}
             disabled={pageCount <= selectedPage}
           >
-            {!hideLabels && <Translate tKey="pagination_label_next" />}
+            {!hideLabels && labelNext}
           </ButtonLink>
         </>
       )}

packages/orbit-components/src/Pagination/types.d.ts

@@ -1,11 +1,16 @@
 // Type definitions for @kiwicom/orbit-components
 // Project: http://github.com/kiwicom/orbit
 
+import type React from "react";
+
 import type * as Common from "../common/types";
 
 export type OnPageChange = (page: number) => void;
 export interface Props extends Common.Globals {
   readonly onPageChange: OnPageChange;
+  readonly labelPrev: React.ReactNode;
+  readonly labelNext: React.ReactNode;
+  readonly labelProgress: React.ReactNode;
   readonly pageCount: number;
   readonly selectedPage?: number;
   readonly hideLabels?: boolean;