feat(StopoverArrow): migrate to tailwind

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

@@ -84,7 +84,7 @@ SocialButton: true
 Stack: true
 Stepper: true
 StepperStateless: true
-StopoverArrow: false
+StopoverArrow: true
 Switch: true
 Tab: true
 TabPanel: true

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

@@ -0,0 +1,15 @@
+import * as React from "react";
+
+import STOPS from "./consts";
+
+import StopoverArrow from ".";
+
+export default function StopoverArrowStory() {
+  return (
+    <div className="p-md">
+      {Object.values(STOPS).map(stops => (
+        <StopoverArrow stops={stops} />
+      ))}
+    </div>
+  );
+}

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

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

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

@@ -13,8 +13,9 @@ export default {
 export const Playground = () => {
   const stops = select("stops", Object.values(STOPS), STOPS.ZERO);
   const dataTest = text("dataTest", "test");
+  const id = text("id", "ID");
 
-  return <StopoverArrow stops={stops} dataTest={dataTest} />;
+  return <StopoverArrow stops={stops} dataTest={dataTest} id={id} />;
 };
 
 Playground.story = {

packages/orbit-components/src/StopoverArrow/__tests__/index.test.tsx

@@ -7,9 +7,12 @@ import STOPS from "../consts";
 describe("StopoverArrow", () => {
   it("should have expected DOM output", () => {
     const dataTest = "test";
+    const id = "ID";
     const stops = STOPS.THREE;
-    render(<StopoverArrow dataTest={dataTest} stops={stops} />);
+    render(<StopoverArrow dataTest={dataTest} stops={stops} id={id} />);
     expect(screen.getByTitle(`Stopover arrow, ${stops} stops`)).toBeInTheDocument();
-    expect(screen.getByTestId(dataTest)).toBeInTheDocument();
+    const el = screen.getByTestId(dataTest);
+    expect(el).toBeInTheDocument();
+    expect(el).toHaveAttribute("id", id);
   });
 });

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

@@ -1,30 +1,11 @@
 "use client";
 
 import * as React from "react";
-import styled, { css } from "styled-components";
 
 import { useRandomIdSeed } from "../hooks/useRandomId";
-import defaultTheme from "../defaultTheme";
 import STOPS from "./consts";
 import type { Props } from "./types";
 
-const StyledArrow = styled.svg`
-  vertical-align: middle;
-  fill: currentColor;
-  color: ${({ theme }) => theme.orbit.colorStopoverArrow};
-  width: ${({ theme }) => theme.orbit.widthStopoverArrow};
-  height: ${({ theme }) => theme.orbit.heightStopoverArrow};
-  ${({ theme }) =>
-    theme.rtl &&
-    css`
-      transform: scale(-1, 1);
-    `};
-`;
-
-StyledArrow.defaultProps = {
-  theme: defaultTheme,
-};
-
 const Stops = ({ stops }: Props) => {
   if (stops === STOPS.ONE) {
     return (
@@ -52,7 +33,8 @@ const StopoverArrow = ({ stops = STOPS.ZERO, dataTest, id }: Props) => {
   const descrId = randomId("descr");
 
   return (
-    <StyledArrow
+    <svg
+      className="orbit-stopover-arrow text-ink-light h-[7px] w-[36px] fill-current align-middle rtl:-scale-x-100"
       preserveAspectRatio="xMidYMid meet"
       viewBox="0 0 28 8"
       aria-labelledby={`${titleId} ${descrId}`}
@@ -63,7 +45,7 @@ const StopoverArrow = ({ stops = STOPS.ZERO, dataTest, id }: Props) => {
       <title id={titleId}>Stopover arrow, {stops} stops</title>
       <desc id={descrId}>Shows how many stopovers there are between two locations</desc>
       <Stops stops={stops} />
-    </StyledArrow>
+    </svg>
   );
 };