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
-
+
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.
-
+
```
### With the custom ellipsis
```jsx live
-
+
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.
-
+
```
### With the onTruncate
```jsx live
- console.log('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.
-
+
```
### Example usage in Card
@@ -59,22 +61,22 @@ A Truncate component can help you crop multiline text. There will be three dots
/>
+
Using Enhanced Capabilities In Your Course
- }
+ }
/>
-
+
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.
-
+
+
Using Enhanced Capabilities In Your Course
- }
+ }
>
@@ -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
-
+Learners, course teams, researchers, developers: the edX community includes groups with a range of reasons for using the platform and objectives to accomplish.
-
+
```
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('', () => {
render(
-
+
Learners, course teams, researchers, developers.
- ,
+ ,
);
it('render with className', () => {
const element = screen.getByText(/Learners, course teams, researchers, developers./i);
@@ -18,9 +18,9 @@ describe('', () => {
it('render with onTruncate', () => {
const mockFn = jest.fn();
render(
-
+
Learners, course teams, researchers, developers.
- ,
+ ,
);
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;