feat(CallOutBanner): migrate to tailwind

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

@@ -15,7 +15,7 @@ ButtonGroup: true
 ButtonLink: true
 ButtonMobileStore: true
 ButtonPrimitive: true
-CallOutBanner: false
+CallOutBanner: true
 Card: true
 CardSection: true
 CarrierLogo: true

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

@@ -7,19 +7,33 @@ import NewWindow from "../icons/NewWindow";
 
 import CallOutBanner from ".";
 
-export default function CallOutBannerVisualStory() {
+export default function CallOutBannerStory() {
   return (
-    <CallOutBanner
-      title="Call out banner"
-      description="Description worth testing"
-      illustration={<Illustration size="small" name="Money" />}
-      actions={
-        <Button type="secondary" size="small" iconRight={<NewWindow />}>
-          Find a Room
-        </Button>
-      }
-    >
-      <Text>Some children</Text>
-    </CallOutBanner>
+    <div className="gap-md p-md flex flex-col">
+      <CallOutBanner
+        title="Call out banner"
+        description="Description worth testing"
+        illustration={<Illustration size="small" name="Money" />}
+        actions={
+          <Button type="secondary" size="small" iconRight={<NewWindow />}>
+            Find a Room
+          </Button>
+        }
+      >
+        <Text>Some children</Text>
+      </CallOutBanner>
+      <CallOutBanner
+        title="Actionable"
+        description="Description worth testing"
+        actions={
+          <Button type="secondary" size="small" iconRight={<NewWindow />}>
+            Find a Room
+          </Button>
+        }
+        onClick={() => {}}
+      >
+        <Text>Some children</Text>
+      </CallOutBanner>
+    </div>
   );
 }

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

@@ -2,11 +2,22 @@ import * as React from "react";
 import { test, expect } from "@playwright/experimental-ct-react";
 
 import CallOutBannerStory from "./CallOutBanner.ct-story";
+import RenderInRtl from "../utils/rtl/RenderInRtl";
 
 test.describe("visual CallOutBanner", () => {
-  test("CallOutBannerStory", async ({ mount }) => {
+  test("default", async ({ mount }) => {
     const component = await mount(<CallOutBannerStory />);
 
     await expect(component).toHaveScreenshot();
   });
+
+  test("rtl", async ({ mount }) => {
+    const component = await mount(
+      <RenderInRtl>
+        <CallOutBannerStory />
+      </RenderInRtl>,
+    );
+
+    await expect(component).toHaveScreenshot();
+  });
 });

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

@@ -12,6 +12,7 @@ describe("CallOutBanner", () => {
     render(
       <CallOutBanner
         dataTest="test"
+        id="ID"
         title="title"
         description="description"
         tabIndex={0}
@@ -22,6 +23,7 @@ describe("CallOutBanner", () => {
     );
     const banner = screen.getByTestId("test");
     expect(banner).toHaveAttribute("tabindex", "0");
+    expect(banner).toHaveAttribute("id", "ID");
     expect(banner.textContent).toMatch("title");
     expect(banner.textContent).toMatch("description");
     expect(screen.getByTestId("illustration"));

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

@@ -1,62 +1,13 @@
 "use client";
 
 import * as React from "react";
-import styled, { css } from "styled-components";
+import cx from "clsx";
 
-import mq from "../utils/mediaQuery";
-import defaultTheme from "../defaultTheme";
 import Heading from "../Heading";
 import Stack from "../Stack";
 import Text from "../Text";
 import type { Props } from "./types";
 
-const StyledCallOutBanner = styled.div<{ onClick?: Props["onClick"] }>`
-  ${({ theme, onClick }) => css`
-    display: flex;
-    flex-direction: column;
-    align-items: flex-start;
-    justify-content: flex-start;
-    background: ${theme.orbit.paletteWhite};
-    border-radius: ${theme.orbit.borderRadiusSmall};
-    padding: ${theme.orbit.spaceMedium};
-    ${onClick
-      ? css`
-          box-shadow: ${theme.orbit.boxShadowAction};
-          transition: box-shadow ${theme.orbit.durationFast} ease-in-out;
-          cursor: pointer;
-          :active,
-          :hover {
-            box-shadow: ${theme.orbit.boxShadowActionActive};
-            outline: none;
-          }
-          border: 1px solid transparent;
-        `
-      : css`
-          border: 1px solid ${theme.orbit.paletteCloudNormal};
-        `};
-    ${mq.largeMobile(css`
-      flex-direction: row;
-      padding: ${theme.orbit.spaceLarge};
-    `)};
-  `};
-`;
-
-StyledCallOutBanner.defaultProps = {
-  theme: defaultTheme,
-};
-
-const StyledIllustration = styled.div`
-  padding-bottom: ${({ theme }) => theme.orbit.spaceMedium};
-  ${mq.largeMobile(css`
-    padding-right: ${({ theme }) => theme.orbit.spaceLarge};
-    padding-bottom: 0;
-  `)};
-`;
-
-StyledIllustration.defaultProps = {
-  theme: defaultTheme,
-};
-
 const CallOutBanner = ({
   children,
   illustration,
@@ -67,25 +18,36 @@ const CallOutBanner = ({
   description,
   dataTest,
   id,
-}: Props) => (
-  <StyledCallOutBanner
-    onClick={onClick}
-    tabIndex={(onClick || Number(tabIndex)) && (Number(tabIndex) || 0)}
-    data-test={dataTest}
-    id={id}
-  >
-    {illustration && <StyledIllustration>{illustration}</StyledIllustration>}
-    <Stack spacing="medium">
-      <Stack spacing="XSmall">
-        <Stack spacing="XXSmall">
-          {title && <Heading type="title3">{title}</Heading>}
-          {description && <Text>{description}</Text>}
+}: Props) => {
+  const Element = onClick ? "button" : "div";
+
+  return (
+    <Element
+      className={cx(
+        "orbit-call-out-banner bg-white-normal rounded-small p-md lm:flex-row lm:p-lg flex flex-col items-start justify-start border border-solid text-start",
+        onClick
+          ? "shadow-action duration-fast hover:shadow-action-active active:shadow-action-active cursor-pointer border-transparent transition-shadow ease-in-out hover:outline-none active:outline-none"
+          : "border-cloud-normal",
+      )}
+      type={Element === "button" ? "button" : undefined}
+      onClick={onClick}
+      tabIndex={(onClick || Number(tabIndex)) && (Number(tabIndex) || 0)}
+      data-test={dataTest}
+      id={id}
+    >
+      {illustration && <div className="pb-md lm:pe-lg lm:pb-0">{illustration}</div>}
+      <Stack spacing="medium">
+        <Stack spacing="XSmall">
+          <Stack spacing="XXSmall">
+            {title && <Heading type="title3">{title}</Heading>}
+            {description && <Text>{description}</Text>}
+          </Stack>
+          {children}
         </Stack>
-        {children}
+        {actions}
       </Stack>
-      {actions}
-    </Stack>
-  </StyledCallOutBanner>
-);
+    </Element>
+  );
+};
 
 export default CallOutBanner;