feat(Slide): migrate to tailwind

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

@@ -78,7 +78,7 @@ ServiceLogo: false
 Skeleton: true
 SkipLink: false
 SkipNavigation: false
-Slide: false
+Slide: true
 Slider: true
 SocialButton: true
 Stack: true

packages/orbit-components/src/utils/Slide/Slide.ct-story.tsx

@@ -0,0 +1,19 @@
+import * as React from "react";
+
+import type { Props } from "./types";
+
+import Slide from ".";
+
+export function SlideStory(props: Omit<Props, "children">) {
+  return (
+    <div className="p-md">
+      <Slide {...props}>
+        Some
+        <br />
+        elaborate
+        <br />
+        content.
+      </Slide>
+    </div>
+  );
+}

packages/orbit-components/src/utils/Slide/Slide.ct.tsx

@@ -0,0 +1,18 @@
+import * as React from "react";
+import { test, expect } from "@playwright/experimental-ct-react";
+
+import { SlideStory } from "./Slide.ct-story";
+
+test.describe("visual Slide", () => {
+  test("collapsed", async ({ mount }) => {
+    const component = await mount(<SlideStory maxHeight={null} />);
+
+    await expect(component).toHaveScreenshot();
+  });
+
+  test("expanded", async ({ mount }) => {
+    const component = await mount(<SlideStory maxHeight={null} expanded />);
+
+    await expect(component).toHaveScreenshot();
+  });
+});

packages/orbit-components/src/utils/Slide/__tests__/client.test.tsx

@@ -34,7 +34,7 @@ describe(`slide util`, () => {
       jest.runAllTimers();
     });
 
-    expect(screen.getByText("Collapsed content")).toHaveStyle("max-height: 0px");
+    expect(screen.getByText("Collapsed content")).toHaveStyle("max-height: 0");
 
     rerender(
       <Slide maxHeight={20} expanded>

packages/orbit-components/src/utils/Slide/__tests__/server.test.tsx

@@ -3,23 +3,18 @@
  */
 import * as React from "react";
 import { renderToStaticMarkup } from "react-dom/server";
-import { ServerStyleSheet } from "styled-components";
 
 import Slide from "..";
 
 describe("slide util", () => {
   describe("server-side", () => {
     it("should be expanded", () => {
-      const sheet = new ServerStyleSheet();
-      renderToStaticMarkup(
-        sheet.collectStyles(
-          <Slide maxHeight={20} expanded>
-            Expanded content
-          </Slide>,
-        ),
+      const markup = renderToStaticMarkup(
+        <Slide maxHeight={20} expanded>
+          Expanded content
+        </Slide>,
       );
-      const styleTags = sheet.getStyleTags();
-      expect(styleTags).toContain("max-height:20px");
+      expect(markup).toContain("max-height:20px");
     });
   });
 });

packages/orbit-components/src/utils/Slide/index.tsx

@@ -1,35 +1,17 @@
 import * as React from "react";
-import styled from "styled-components";
+import cx from "clsx";
 
 import type { TransitionDuration } from "../transition";
-import transition from "../transition";
-import defaultTheme from "../../defaultTheme";
 import type { Props, State } from "./types";
 
-const getMaxHeight = ({ maxHeight }) => {
-  if (maxHeight === 0) return `0px`;
-  if (!maxHeight) return undefined;
-  return `${maxHeight}px`;
-};
+const getTransitionDurationClass = (duration: TransitionDuration) => {
+  const classes: Record<TransitionDuration, string> = {
+    slow: "duration-slow",
+    normal: "duration-normal",
+    fast: "duration-fast",
+  };
 
-export const StyledSlide = styled.div<{
-  transitionDuration?: TransitionDuration;
-  transitionFinished?: boolean;
-  visible?: boolean;
-  expanded?: boolean;
-  maxHeight: number | null;
-}>`
-  position: relative;
-  width: 100%;
-  transition: ${({ transitionDuration }) =>
-    transitionDuration && transition(["max-height"], transitionDuration, "linear")};
-  max-height: ${getMaxHeight};
-  overflow: ${({ transitionFinished }) => !transitionFinished && "hidden"};
-  visibility: ${({ visible }) => !visible && "hidden"};
-`;
-
-StyledSlide.defaultProps = {
-  theme: defaultTheme,
+  return classes[duration];
 };
 
 class Slide extends React.Component<Props, State> {
@@ -146,22 +128,25 @@ class Slide extends React.Component<Props, State> {
     const { children, expanded = false, id, ariaLabelledBy, transitionDuration } = this.props;
     const { transitionFinished, maxHeight, visible } = this.state;
     return (
-      <StyledSlide
-        className="orbit-slide"
-        maxHeight={maxHeight}
-        expanded={expanded}
-        transitionFinished={transitionFinished}
-        transitionDuration={transitionDuration}
+      // eslint-disable-next-line jsx-a11y/no-static-element-interactions, jsx-a11y/click-events-have-key-events
+      <div
+        className={cx(
+          "orbit-slide relative w-full",
+          transitionDuration && "transition-[max-height] ease-linear",
+          transitionDuration && getTransitionDurationClass(transitionDuration),
+          !transitionFinished && "overflow-hidden",
+          !visible && "invisible",
+        )}
+        style={{ maxHeight: maxHeight ?? undefined }}
         aria-hidden={!expanded}
         id={id}
         aria-labelledby={ariaLabelledBy}
-        visible={visible}
         onClick={ev => {
           ev.stopPropagation();
         }}
       >
         {children}
-      </StyledSlide>
+      </div>
     );
   }
 }