From 7f689f396cb06505f59ac538297e578e655f0a0a Mon Sep 17 00:00:00 2001
From: Marco Vidal Garcia <marco.vidal@kiwi.com>
Date: Fri, 10 Nov 2023 16:54:17 +0100
Subject: [PATCH] feat(Truncate): migrate to Tailwind

Closes FEPLT-1728
---
 docs/src/data/tailwind-migration-status.yaml  |  2 +-
 .../src/Truncate/__tests__/index.test.tsx     | 17 ++-------
 .../orbit-components/src/Truncate/index.tsx   | 35 +++++++------------
 3 files changed, 16 insertions(+), 38 deletions(-)

diff --git a/docs/src/data/tailwind-migration-status.yaml b/docs/src/data/tailwind-migration-status.yaml
index 648039fefc..9dfe561e10 100644
--- a/docs/src/data/tailwind-migration-status.yaml
+++ b/docs/src/data/tailwind-migration-status.yaml
@@ -107,6 +107,6 @@ TimelineStep: false
 Toast: true
 ToastRoot: false
 Tooltip: true
-Truncate: false
+Truncate: true
 Wizard: false
 WizardStep: false
diff --git a/packages/orbit-components/src/Truncate/__tests__/index.test.tsx b/packages/orbit-components/src/Truncate/__tests__/index.test.tsx
index 7c8d455fa2..9d27e69736 100644
--- a/packages/orbit-components/src/Truncate/__tests__/index.test.tsx
+++ b/packages/orbit-components/src/Truncate/__tests__/index.test.tsx
@@ -6,28 +6,15 @@ import Text from "../../Text";
 import Heading from "../../Heading";
 
 describe("Truncate", () => {
-  it("should have expected DOM output", () => {
-    const { container } = render(
-      <Truncate maxWidth="10rem" dataTest="test">
-        children
-      </Truncate>,
-    );
-    expect(screen.getByTestId("test")).toBeInTheDocument();
-    expect(screen.getByText("children")).toBeInTheDocument();
-    expect(container.childNodes[1]).toHaveStyle({
-      minWidth: 0,
-      maxWidth: "10rem",
-    });
-  });
-
   it("should truncate children, as well as Text and Heading", () => {
     render(
-      <Truncate>
+      <Truncate dataTest="test">
         children
         <Text>text</Text>
         <Heading>heading</Heading>
       </Truncate>,
     );
+    expect(screen.getByTestId("test")).toBeInTheDocument();
     expect(screen.getByText("children")).toHaveStyle({ textOverflow: "ellipsis" });
     expect(screen.getByText("text")).toHaveStyle({ textOverflow: "ellipsis" });
     expect(screen.getByText("heading")).toHaveStyle({ textOverflow: "ellipsis" });
diff --git a/packages/orbit-components/src/Truncate/index.tsx b/packages/orbit-components/src/Truncate/index.tsx
index 2f2b4ad4f1..d27feec581 100644
--- a/packages/orbit-components/src/Truncate/index.tsx
+++ b/packages/orbit-components/src/Truncate/index.tsx
@@ -1,32 +1,23 @@
 "use client";
 
 import * as React from "react";
-import styled from "styled-components";
+import cx from "clsx";
 
 import type { Props } from "./types";
 
-const StyledTruncate = styled.div<{ maxWidth?: string }>`
-  ${({ maxWidth }) => `
-    min-width: 0;
-    flex: 0 1 ${maxWidth === "none" ? "100%" : maxWidth};
-    max-width: ${maxWidth};
-  `};
-`;
-
-const StyledTruncateContent = styled.div`
-  &,
-  .orbit-text,
-  .orbit-heading {
-    white-space: nowrap;
-    overflow: hidden;
-    text-overflow: ellipsis;
-  }
-`;
-
 const Truncate = ({ children, maxWidth = "100%", dataTest }: Props) => (
-  <StyledTruncate maxWidth={maxWidth} data-test={dataTest}>
-    <StyledTruncateContent>{children}</StyledTruncateContent>
-  </StyledTruncate>
+  <div
+    data-test={dataTest}
+    className={cx(
+      "min-w-0 max-w-[--truncate-max-width] shrink grow-0",
+      maxWidth === "none" ? "basis-full" : "basis-[--truncate-max-width]",
+    )}
+    style={{ "--truncate-max-width": maxWidth } as React.CSSProperties}
+  >
+    <div className={cx("truncate [&_.orbit-heading]:truncate [&_.orbit-text]:truncate")}>
+      {children}
+    </div>
+  </div>
 );
 
 export default Truncate;