diff --git a/docs/src/data/tailwind-migration-status.yaml b/docs/src/data/tailwind-migration-status.yaml index db32e30f54..817f35a0b2 100644 --- a/docs/src/data/tailwind-migration-status.yaml +++ b/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 diff --git a/packages/orbit-components/src/StopoverArrow/StopoverArrow.ct-story.tsx b/packages/orbit-components/src/StopoverArrow/StopoverArrow.ct-story.tsx new file mode 100644 index 0000000000..46820afd27 --- /dev/null +++ b/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 ( +
+ {Object.values(STOPS).map(stops => ( + + ))} +
+ ); +} diff --git a/packages/orbit-components/src/StopoverArrow/StopoverArrow.ct.tsx b/packages/orbit-components/src/StopoverArrow/StopoverArrow.ct.tsx new file mode 100644 index 0000000000..63d0ca7bc7 --- /dev/null +++ b/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(); + + await expect(component).toHaveScreenshot(); + }); + + test("rtl", async ({ mount }) => { + const component = await mount( + + + , + ); + + await expect(component).toHaveScreenshot(); + }); +}); diff --git a/packages/orbit-components/src/StopoverArrow/StopoverArrow.ct.tsx-snapshots/visual-StopoverArrow-default-1-Desktop-darwin.png b/packages/orbit-components/src/StopoverArrow/StopoverArrow.ct.tsx-snapshots/visual-StopoverArrow-default-1-Desktop-darwin.png new file mode 100644 index 0000000000..d7d5c156f1 Binary files /dev/null and b/packages/orbit-components/src/StopoverArrow/StopoverArrow.ct.tsx-snapshots/visual-StopoverArrow-default-1-Desktop-darwin.png differ diff --git a/packages/orbit-components/src/StopoverArrow/StopoverArrow.ct.tsx-snapshots/visual-StopoverArrow-default-1-Desktop-linux.png b/packages/orbit-components/src/StopoverArrow/StopoverArrow.ct.tsx-snapshots/visual-StopoverArrow-default-1-Desktop-linux.png new file mode 100644 index 0000000000..39553b5477 Binary files /dev/null and b/packages/orbit-components/src/StopoverArrow/StopoverArrow.ct.tsx-snapshots/visual-StopoverArrow-default-1-Desktop-linux.png differ diff --git a/packages/orbit-components/src/StopoverArrow/StopoverArrow.ct.tsx-snapshots/visual-StopoverArrow-default-1-Large-Desktop-darwin.png b/packages/orbit-components/src/StopoverArrow/StopoverArrow.ct.tsx-snapshots/visual-StopoverArrow-default-1-Large-Desktop-darwin.png new file mode 100644 index 0000000000..a436259cad Binary files /dev/null and b/packages/orbit-components/src/StopoverArrow/StopoverArrow.ct.tsx-snapshots/visual-StopoverArrow-default-1-Large-Desktop-darwin.png differ diff --git a/packages/orbit-components/src/StopoverArrow/StopoverArrow.ct.tsx-snapshots/visual-StopoverArrow-default-1-Large-Desktop-linux.png b/packages/orbit-components/src/StopoverArrow/StopoverArrow.ct.tsx-snapshots/visual-StopoverArrow-default-1-Large-Desktop-linux.png new file mode 100644 index 0000000000..fddfef8fde Binary files /dev/null and b/packages/orbit-components/src/StopoverArrow/StopoverArrow.ct.tsx-snapshots/visual-StopoverArrow-default-1-Large-Desktop-linux.png differ diff --git a/packages/orbit-components/src/StopoverArrow/StopoverArrow.ct.tsx-snapshots/visual-StopoverArrow-default-1-Large-Mobile-darwin.png b/packages/orbit-components/src/StopoverArrow/StopoverArrow.ct.tsx-snapshots/visual-StopoverArrow-default-1-Large-Mobile-darwin.png new file mode 100644 index 0000000000..b69a24e737 Binary files /dev/null and b/packages/orbit-components/src/StopoverArrow/StopoverArrow.ct.tsx-snapshots/visual-StopoverArrow-default-1-Large-Mobile-darwin.png differ diff --git a/packages/orbit-components/src/StopoverArrow/StopoverArrow.ct.tsx-snapshots/visual-StopoverArrow-default-1-Large-Mobile-linux.png b/packages/orbit-components/src/StopoverArrow/StopoverArrow.ct.tsx-snapshots/visual-StopoverArrow-default-1-Large-Mobile-linux.png new file mode 100644 index 0000000000..c3064d6e58 Binary files /dev/null and b/packages/orbit-components/src/StopoverArrow/StopoverArrow.ct.tsx-snapshots/visual-StopoverArrow-default-1-Large-Mobile-linux.png differ diff --git a/packages/orbit-components/src/StopoverArrow/StopoverArrow.ct.tsx-snapshots/visual-StopoverArrow-default-1-Medium-Mobile-darwin.png b/packages/orbit-components/src/StopoverArrow/StopoverArrow.ct.tsx-snapshots/visual-StopoverArrow-default-1-Medium-Mobile-darwin.png new file mode 100644 index 0000000000..0f3b946da9 Binary files /dev/null and b/packages/orbit-components/src/StopoverArrow/StopoverArrow.ct.tsx-snapshots/visual-StopoverArrow-default-1-Medium-Mobile-darwin.png differ diff --git a/packages/orbit-components/src/StopoverArrow/StopoverArrow.ct.tsx-snapshots/visual-StopoverArrow-default-1-Medium-Mobile-linux.png b/packages/orbit-components/src/StopoverArrow/StopoverArrow.ct.tsx-snapshots/visual-StopoverArrow-default-1-Medium-Mobile-linux.png new file mode 100644 index 0000000000..40ad6b0ec0 Binary files /dev/null and b/packages/orbit-components/src/StopoverArrow/StopoverArrow.ct.tsx-snapshots/visual-StopoverArrow-default-1-Medium-Mobile-linux.png differ diff --git a/packages/orbit-components/src/StopoverArrow/StopoverArrow.ct.tsx-snapshots/visual-StopoverArrow-default-1-Small-Mobile-darwin.png b/packages/orbit-components/src/StopoverArrow/StopoverArrow.ct.tsx-snapshots/visual-StopoverArrow-default-1-Small-Mobile-darwin.png new file mode 100644 index 0000000000..afdfd92172 Binary files /dev/null and b/packages/orbit-components/src/StopoverArrow/StopoverArrow.ct.tsx-snapshots/visual-StopoverArrow-default-1-Small-Mobile-darwin.png differ diff --git a/packages/orbit-components/src/StopoverArrow/StopoverArrow.ct.tsx-snapshots/visual-StopoverArrow-default-1-Small-Mobile-linux.png b/packages/orbit-components/src/StopoverArrow/StopoverArrow.ct.tsx-snapshots/visual-StopoverArrow-default-1-Small-Mobile-linux.png new file mode 100644 index 0000000000..63510476e2 Binary files /dev/null and b/packages/orbit-components/src/StopoverArrow/StopoverArrow.ct.tsx-snapshots/visual-StopoverArrow-default-1-Small-Mobile-linux.png differ diff --git a/packages/orbit-components/src/StopoverArrow/StopoverArrow.ct.tsx-snapshots/visual-StopoverArrow-default-1-Tablet-darwin.png b/packages/orbit-components/src/StopoverArrow/StopoverArrow.ct.tsx-snapshots/visual-StopoverArrow-default-1-Tablet-darwin.png new file mode 100644 index 0000000000..d9a1803417 Binary files /dev/null and b/packages/orbit-components/src/StopoverArrow/StopoverArrow.ct.tsx-snapshots/visual-StopoverArrow-default-1-Tablet-darwin.png differ diff --git a/packages/orbit-components/src/StopoverArrow/StopoverArrow.ct.tsx-snapshots/visual-StopoverArrow-default-1-Tablet-linux.png b/packages/orbit-components/src/StopoverArrow/StopoverArrow.ct.tsx-snapshots/visual-StopoverArrow-default-1-Tablet-linux.png new file mode 100644 index 0000000000..f0e6c3472b Binary files /dev/null and b/packages/orbit-components/src/StopoverArrow/StopoverArrow.ct.tsx-snapshots/visual-StopoverArrow-default-1-Tablet-linux.png differ diff --git a/packages/orbit-components/src/StopoverArrow/StopoverArrow.ct.tsx-snapshots/visual-StopoverArrow-rtl-1-Desktop-darwin.png b/packages/orbit-components/src/StopoverArrow/StopoverArrow.ct.tsx-snapshots/visual-StopoverArrow-rtl-1-Desktop-darwin.png new file mode 100644 index 0000000000..293a3673e4 Binary files /dev/null and b/packages/orbit-components/src/StopoverArrow/StopoverArrow.ct.tsx-snapshots/visual-StopoverArrow-rtl-1-Desktop-darwin.png differ diff --git a/packages/orbit-components/src/StopoverArrow/StopoverArrow.ct.tsx-snapshots/visual-StopoverArrow-rtl-1-Desktop-linux.png b/packages/orbit-components/src/StopoverArrow/StopoverArrow.ct.tsx-snapshots/visual-StopoverArrow-rtl-1-Desktop-linux.png new file mode 100644 index 0000000000..1a238ecb75 Binary files /dev/null and b/packages/orbit-components/src/StopoverArrow/StopoverArrow.ct.tsx-snapshots/visual-StopoverArrow-rtl-1-Desktop-linux.png differ diff --git a/packages/orbit-components/src/StopoverArrow/StopoverArrow.ct.tsx-snapshots/visual-StopoverArrow-rtl-1-Large-Desktop-darwin.png b/packages/orbit-components/src/StopoverArrow/StopoverArrow.ct.tsx-snapshots/visual-StopoverArrow-rtl-1-Large-Desktop-darwin.png new file mode 100644 index 0000000000..e9f5437541 Binary files /dev/null and b/packages/orbit-components/src/StopoverArrow/StopoverArrow.ct.tsx-snapshots/visual-StopoverArrow-rtl-1-Large-Desktop-darwin.png differ diff --git a/packages/orbit-components/src/StopoverArrow/StopoverArrow.ct.tsx-snapshots/visual-StopoverArrow-rtl-1-Large-Desktop-linux.png b/packages/orbit-components/src/StopoverArrow/StopoverArrow.ct.tsx-snapshots/visual-StopoverArrow-rtl-1-Large-Desktop-linux.png new file mode 100644 index 0000000000..4176305ba2 Binary files /dev/null and b/packages/orbit-components/src/StopoverArrow/StopoverArrow.ct.tsx-snapshots/visual-StopoverArrow-rtl-1-Large-Desktop-linux.png differ diff --git a/packages/orbit-components/src/StopoverArrow/StopoverArrow.ct.tsx-snapshots/visual-StopoverArrow-rtl-1-Large-Mobile-darwin.png b/packages/orbit-components/src/StopoverArrow/StopoverArrow.ct.tsx-snapshots/visual-StopoverArrow-rtl-1-Large-Mobile-darwin.png new file mode 100644 index 0000000000..002c88dfe1 Binary files /dev/null and b/packages/orbit-components/src/StopoverArrow/StopoverArrow.ct.tsx-snapshots/visual-StopoverArrow-rtl-1-Large-Mobile-darwin.png differ diff --git a/packages/orbit-components/src/StopoverArrow/StopoverArrow.ct.tsx-snapshots/visual-StopoverArrow-rtl-1-Large-Mobile-linux.png b/packages/orbit-components/src/StopoverArrow/StopoverArrow.ct.tsx-snapshots/visual-StopoverArrow-rtl-1-Large-Mobile-linux.png new file mode 100644 index 0000000000..9cb5c38c6b Binary files /dev/null and b/packages/orbit-components/src/StopoverArrow/StopoverArrow.ct.tsx-snapshots/visual-StopoverArrow-rtl-1-Large-Mobile-linux.png differ diff --git a/packages/orbit-components/src/StopoverArrow/StopoverArrow.ct.tsx-snapshots/visual-StopoverArrow-rtl-1-Medium-Mobile-darwin.png b/packages/orbit-components/src/StopoverArrow/StopoverArrow.ct.tsx-snapshots/visual-StopoverArrow-rtl-1-Medium-Mobile-darwin.png new file mode 100644 index 0000000000..8ea1f2e69b Binary files /dev/null and b/packages/orbit-components/src/StopoverArrow/StopoverArrow.ct.tsx-snapshots/visual-StopoverArrow-rtl-1-Medium-Mobile-darwin.png differ diff --git a/packages/orbit-components/src/StopoverArrow/StopoverArrow.ct.tsx-snapshots/visual-StopoverArrow-rtl-1-Medium-Mobile-linux.png b/packages/orbit-components/src/StopoverArrow/StopoverArrow.ct.tsx-snapshots/visual-StopoverArrow-rtl-1-Medium-Mobile-linux.png new file mode 100644 index 0000000000..d45453c098 Binary files /dev/null and b/packages/orbit-components/src/StopoverArrow/StopoverArrow.ct.tsx-snapshots/visual-StopoverArrow-rtl-1-Medium-Mobile-linux.png differ diff --git a/packages/orbit-components/src/StopoverArrow/StopoverArrow.ct.tsx-snapshots/visual-StopoverArrow-rtl-1-Small-Mobile-darwin.png b/packages/orbit-components/src/StopoverArrow/StopoverArrow.ct.tsx-snapshots/visual-StopoverArrow-rtl-1-Small-Mobile-darwin.png new file mode 100644 index 0000000000..db331a2b42 Binary files /dev/null and b/packages/orbit-components/src/StopoverArrow/StopoverArrow.ct.tsx-snapshots/visual-StopoverArrow-rtl-1-Small-Mobile-darwin.png differ diff --git a/packages/orbit-components/src/StopoverArrow/StopoverArrow.ct.tsx-snapshots/visual-StopoverArrow-rtl-1-Small-Mobile-linux.png b/packages/orbit-components/src/StopoverArrow/StopoverArrow.ct.tsx-snapshots/visual-StopoverArrow-rtl-1-Small-Mobile-linux.png new file mode 100644 index 0000000000..300d9231e4 Binary files /dev/null and b/packages/orbit-components/src/StopoverArrow/StopoverArrow.ct.tsx-snapshots/visual-StopoverArrow-rtl-1-Small-Mobile-linux.png differ diff --git a/packages/orbit-components/src/StopoverArrow/StopoverArrow.ct.tsx-snapshots/visual-StopoverArrow-rtl-1-Tablet-darwin.png b/packages/orbit-components/src/StopoverArrow/StopoverArrow.ct.tsx-snapshots/visual-StopoverArrow-rtl-1-Tablet-darwin.png new file mode 100644 index 0000000000..2e2238bede Binary files /dev/null and b/packages/orbit-components/src/StopoverArrow/StopoverArrow.ct.tsx-snapshots/visual-StopoverArrow-rtl-1-Tablet-darwin.png differ diff --git a/packages/orbit-components/src/StopoverArrow/StopoverArrow.ct.tsx-snapshots/visual-StopoverArrow-rtl-1-Tablet-linux.png b/packages/orbit-components/src/StopoverArrow/StopoverArrow.ct.tsx-snapshots/visual-StopoverArrow-rtl-1-Tablet-linux.png new file mode 100644 index 0000000000..c06a5fb352 Binary files /dev/null and b/packages/orbit-components/src/StopoverArrow/StopoverArrow.ct.tsx-snapshots/visual-StopoverArrow-rtl-1-Tablet-linux.png differ diff --git a/packages/orbit-components/src/StopoverArrow/StopoverArrow.stories.tsx b/packages/orbit-components/src/StopoverArrow/StopoverArrow.stories.tsx index 4287bfc8d6..c688e92262 100644 --- a/packages/orbit-components/src/StopoverArrow/StopoverArrow.stories.tsx +++ b/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 ; + return ; }; Playground.story = { diff --git a/packages/orbit-components/src/StopoverArrow/__tests__/index.test.tsx b/packages/orbit-components/src/StopoverArrow/__tests__/index.test.tsx index e4ba1b2f91..5678e2e237 100644 --- a/packages/orbit-components/src/StopoverArrow/__tests__/index.test.tsx +++ b/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(); + render(); 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); }); }); diff --git a/packages/orbit-components/src/StopoverArrow/index.tsx b/packages/orbit-components/src/StopoverArrow/index.tsx index 84fb54bafb..6f3cd01c1e 100644 --- a/packages/orbit-components/src/StopoverArrow/index.tsx +++ b/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 ( - { Stopover arrow, {stops} stops Shows how many stopovers there are between two locations - + ); };