feat(Pagination): migrate to tailwind

docs/src/data/tailwind-migration-status.yaml

@@ -64,7 +64,7 @@ ModalSection: true
 NavigationBar: true
 NotificationBadge: true
 OrbitProvider: true
-Pagination: false
+Pagination: true
 Popover: true
 Portal: true
 Radio: true

packages/orbit-components/src/Pagination/Pagination.ct-story.tsx

@@ -0,0 +1,51 @@
+import * as React from "react";
+
+import Pagination from ".";
+
+export default function PaginationStory() {
+  return (
+    <div className="p-md">
+      <Pagination
+        labelNext="Previous"
+        labelPrev="Next"
+        labelProgress="1 of 6"
+        onPageChange={() => {}}
+        pageCount={6}
+      />
+      <Pagination
+        labelNext="Previous"
+        labelPrev="Next"
+        labelProgress="1 of 6"
+        onPageChange={() => {}}
+        pageCount={6}
+        size="small"
+      />
+      <Pagination
+        hideLabels={false}
+        labelNext="Previous"
+        labelPrev="Next"
+        labelProgress="1 of 6"
+        onPageChange={() => {}}
+        pageCount={6}
+        size="small"
+      />
+      <Pagination
+        labelNext="Next"
+        labelPrev="Previous"
+        labelProgress="44 of 100"
+        onPageChange={() => {}}
+        pageCount={100}
+        selectedPage={44}
+      />
+      <Pagination
+        hideLabels={false}
+        labelNext="Next"
+        labelPrev="Previous"
+        labelProgress="100 of 100"
+        onPageChange={() => {}}
+        pageCount={100}
+        selectedPage={100}
+      />
+    </div>
+  );
+}

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

@@ -0,0 +1,23 @@
+import * as React from "react";
+import { test, expect } from "@playwright/experimental-ct-react";
+
+import PaginationStory from "./Pagination.ct-story";
+import RenderInRtl from "../utils/rtl/RenderInRtl";
+
+test.describe("visual Pagination", () => {
+  test("default", async ({ mount }) => {
+    const component = await mount(<PaginationStory />);
+
+    await expect(component).toHaveScreenshot();
+  });
+
+  test("rtl", async ({ mount }) => {
+    const component = await mount(
+      <RenderInRtl>
+        <PaginationStory />
+      </RenderInRtl>,
+    );
+
+    await expect(component).toHaveScreenshot();
+  });
+});

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

@@ -1,54 +1,25 @@
 import * as React from "react";
-import styled, { css } from "styled-components";
+import cx from "clsx";
 
 import type * as Common from "../../common/types";
 import Button from "../../Button";
-import defaultTheme from "../../defaultTheme";
+import type { Props as ButtonPrimitiveProps } from "../../primitives/ButtonPrimitive/types";
 
 interface Props {
   children: React.ReactNode;
-  transparent?: boolean;
+  className?: string;
   size?: Common.InputSize;
 }
 
-const StyledButton = styled.div<Props>`
-  ${({ theme, transparent }) => css`
-    &:hover,
-    &:active,
-    &:focus {
-      background: ${theme.orbit.backgroundButtonSecondary};
-      color: ${theme.orbit.colorTextButtonSecondary};
-      transform: none;
-      cursor: default;
-    }
-
-    ${transparent &&
-    css`
-      &&& {
-        background-color: transparent;
-        box-shadow: none;
-      }
-    `};
-  `}
-`;
-
-StyledButton.defaultProps = {
-  theme: defaultTheme,
-};
-
-const ActiveButtonAsComponent =
-  ({ transparent }) =>
-  ({ children, ...props }: Props) => {
-    return (
-      <StyledButton {...props} transparent={transparent}>
-        {children}
-      </StyledButton>
-    );
+const Component =
+  ({ className: customClassName }: { className: Props["className"] }) =>
+  ({ children, className }: ButtonPrimitiveProps) => {
+    return <div className={cx("pointer-events-none", customClassName, className)}>{children}</div>;
   };
 
-const ActiveButton = ({ children, transparent, size }: Props) => {
+const ActiveButton = ({ children, className, size }: Props) => {
   return (
-    <Button type="secondary" size={size} asComponent={ActiveButtonAsComponent({ transparent })}>
+    <Button type="secondary" size={size} asComponent={Component({ className })}>
       {children}
     </Button>
   );

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

@@ -39,18 +39,18 @@ const Pagination = ({
         <>
           <ButtonLink
             onClick={() => pageChanged(selectedPage - 1)}
-            iconLeft={<ChevronBackward />}
+            iconLeft={<ChevronBackward reverseOnRtl />}
             type="secondary"
             title={labelPrev}
             size={size}
             disabled={selectedPage <= 1}
           />
-          <ActiveButton transparent size={size}>
+          <ActiveButton className="bg-transparent" size={size}>
             {labelProgress}
           </ActiveButton>
           <ButtonLink
             onClick={() => pageChanged(selectedPage + 1)}
-            iconLeft={<ChevronForward />}
+            iconLeft={<ChevronForward reverseOnRtl />}
             type="secondary"
             title={labelNext}
             size={size}
@@ -61,7 +61,7 @@ const Pagination = ({
         <>
           <ButtonLink
             onClick={() => pageChanged(selectedPage - 1)}
-            iconLeft={<ChevronBackward />}
+            iconLeft={<ChevronBackward reverseOnRtl />}
             type="secondary"
             title={hideLabels ? labelPrev : undefined}
             size={size}
@@ -88,8 +88,8 @@ const Pagination = ({
           </Stack>
           <ButtonLink
             onClick={() => pageChanged(selectedPage + 1)}
-            iconRight={!hideLabels && <ChevronForward />}
-            iconLeft={hideLabels && <ChevronForward />}
+            iconRight={!hideLabels && <ChevronForward reverseOnRtl />}
+            iconLeft={hideLabels && <ChevronForward reverseOnRtl />}
             type="secondary"
             title={hideLabels ? labelNext : undefined}
             size={size}