From f781370efb8c00368b454055f86301bf9c8289d1 Mon Sep 17 00:00:00 2001
From: Brian Smith <bsmith@axim.org>
Date: Tue, 10 Dec 2024 11:10:46 -0500
Subject: [PATCH] feat!: deprecate `Truncate` component

---
 src/Truncate/README.md         | 32 +++++++++++++++++---------------
 src/Truncate/Truncate.test.jsx |  8 ++++----
 src/Truncate/index.jsx         | 17 +++++++++++++----
 3 files changed, 34 insertions(+), 23 deletions(-)

diff --git a/src/Truncate/README.md b/src/Truncate/README.md
index 2e36a562cc..fd847ddd84 100644
--- a/src/Truncate/README.md
+++ b/src/Truncate/README.md
@@ -5,9 +5,11 @@ components:
 - Truncate
 categories:
 - Content
-status: 'New'
+status: 'Deprecate Soon'
 designStatus: 'Done'
 devStatus: 'Done'
+notes: |
+  Plan to replace with native css implementation as per https://github.com/openedx/paragon/issues/3311
 ---
 
 A Truncate component can help you crop multiline text. There will be three dots at the end of the text.
@@ -15,34 +17,34 @@ A Truncate component can help you crop multiline text. There will be three dots
 ## Basic Usage
 
 ```jsx live
-  <Truncate lines={2}>
+  <Truncate.Deprecated lines={2}>
     Learners, course teams, researchers, developers: the edX community includes groups with a range of reasons 
     for using the platform and objectives to accomplish. To help members of each group learn about what edX 
     offers, reach goals, and solve problems, edX provides a variety of information resources.
     Learners, course teams, researchers, developers: the edX community includes groups with a range of reasons
     for using the platform and objectives to accomplish. To help members of each group learn about what edX
     offers, reach goals, and solve problems, edX provides a variety of information resources.
-  </Truncate>
+  </Truncate.Deprecated>
 ```
 
 ### With the custom ellipsis
 
 ```jsx live
-    <Truncate lines={2} ellipsis="🎉🎉🎉" whiteSpace>
+    <Truncate.Deprecated lines={2} ellipsis="🎉🎉🎉" whiteSpace>
         Learners, course teams, researchers, developers: the edX community includes groups with a range of reasons
         for using the platform and objectives to accomplish. To help members of each group learn about what edX
         offers, reach goals, and solve problems, edX provides a variety of information resources.
-    </Truncate>
+    </Truncate.Deprecated>
 ```
 
 ### With the onTruncate
 
 ```jsx live
-    <Truncate lines={2} onTruncate={() => console.log('onTruncate')}>
+    <Truncate.Deprecated lines={2} onTruncate={() => console.log('onTruncate')}>
         Learners, course teams, researchers, developers: the edX community includes groups with a range of reasons
         for using the platform and objectives to accomplish. To help members of each group learn about what edX
         offers, reach goals, and solve problems, edX provides a variety of information resources.
-    </Truncate>
+    </Truncate.Deprecated>
 ```
 
 ### Example usage in Card
@@ -59,22 +61,22 @@ A Truncate component can help you crop multiline text. There will be three dots
       />
       <Card.Header
         title={
-          <Truncate lines={2}>
+          <Truncate.Deprecated lines={2}>
             Using Enhanced Capabilities In Your Course
-          </Truncate>}
+          </Truncate.Deprecated>}
       />
       <Card.Section>
-        <Truncate lines={4}>
+        <Truncate.Deprecated lines={4}>
           Learners, course teams, researchers, developers: the edX community includes groups with a range of reasons
           for using the platform and objectives to accomplish. To help members of each group learn about what edX
           offers, reach goals, and solve problems, edX provides a variety of information resources.
-        </Truncate>
+        </Truncate.Deprecated>
       </Card.Section>
       <Card.Footer
         textElement={
-          <Truncate lines={2}>
+          <Truncate.Deprecated lines={2}>
             Using Enhanced Capabilities In Your Course
-          </Truncate>}
+          </Truncate.Deprecated>}
       >
         <Button style={{ minWidth: 100 }}>Action 1</Button>
       </Card.Footer>
@@ -88,7 +90,7 @@ A Truncate component can help you crop multiline text. There will be three dots
 **Note**: `Truncate` supports only plain `HTML` children and not `jsx`.
 
 ```jsx live
-<Truncate lines={1}>
+<Truncate.Deprecated lines={1}>
   <a href="#">Learners</a>, course teams, researchers, developers: the edX community includes <strong class="strong-class"><i class="i-class">groups with <u>a range</u> of <q>reasons</q></i></strong> for using the platform and objectives to accomplish.
-</Truncate>
+</Truncate.Deprecated>
 ```
diff --git a/src/Truncate/Truncate.test.jsx b/src/Truncate/Truncate.test.jsx
index 178df12ed3..d1cc120c85 100644
--- a/src/Truncate/Truncate.test.jsx
+++ b/src/Truncate/Truncate.test.jsx
@@ -4,9 +4,9 @@ import Truncate from '.';
 
 describe('<Truncate />', () => {
   render(
-    <Truncate className="pgn__truncate">
+    <Truncate.Deprecated className="pgn__truncate">
       Learners, course teams, researchers, developers.
-    </Truncate>,
+    </Truncate.Deprecated>,
   );
   it('render with className', () => {
     const element = screen.getByText(/Learners, course teams, researchers, developers./i);
@@ -18,9 +18,9 @@ describe('<Truncate />', () => {
   it('render with onTruncate', () => {
     const mockFn = jest.fn();
     render(
-      <Truncate className="pgn__truncate" onTruncate={mockFn}>
+      <Truncate.Deprecated className="pgn__truncate" onTruncate={mockFn}>
         Learners, course teams, researchers, developers.
-      </Truncate>,
+      </Truncate.Deprecated>,
     );
     expect(mockFn).toHaveBeenCalledTimes(2);
   });
diff --git a/src/Truncate/index.jsx b/src/Truncate/index.jsx
index 2c212575b1..05ccd57437 100644
--- a/src/Truncate/index.jsx
+++ b/src/Truncate/index.jsx
@@ -1,5 +1,5 @@
 import React, {
-  useLayoutEffect, useRef,
+  useLayoutEffect, useRef, useEffect,
 } from 'react';
 import PropTypes from 'prop-types';
 import { truncateLines } from './utils';
@@ -9,7 +9,7 @@ const DEFAULT_TRUNCATE_LINES = 1;
 const DEFAULT_TRUNCATE_ELLIPSIS = '...';
 const DEFAULT_TRUNCATE_ELEMENT_TYPE = 'div';
 
-function Truncate({
+function TruncateDeprecated({
   children, lines, ellipsis, elementType, className, whiteSpace, onTruncate,
 }) {
   const textContainer = useRef();
@@ -40,7 +40,7 @@ function Truncate({
   });
 }
 
-Truncate.propTypes = {
+TruncateDeprecated.propTypes = {
   /** The expected text to which the ellipsis would be applied. */
   children: PropTypes.string.isRequired,
   /** The number of lines the text to be truncated to. */
@@ -57,7 +57,7 @@ Truncate.propTypes = {
   onTruncate: PropTypes.func,
 };
 
-Truncate.defaultProps = {
+TruncateDeprecated.defaultProps = {
   lines: DEFAULT_TRUNCATE_LINES,
   ellipsis: DEFAULT_TRUNCATE_ELLIPSIS,
   whiteSpace: false,
@@ -66,4 +66,13 @@ Truncate.defaultProps = {
   onTruncate: undefined,
 };
 
+function Truncate() {
+  useEffect(() => {
+    // eslint-disable-next-line no-console
+    console.log('Please use Truncate.Deprecated until a replacement is created');
+  }, []);
+  return null;
+}
+Truncate.Deprecated = TruncateDeprecated;
+
 export default Truncate;