fix: deprecate Truncate component

src/course-outline/card-header/TitleButton.jsx

@@ -39,7 +39,7 @@ const TitleButton = ({
         className="item-card-header__title-btn"
         onClick={onTitleClick}
       >
-        <Truncate lines={1} className={`${namePrefix}-card-title mb-0`}>{title}</Truncate>
+        <Truncate.Deprecated lines={1} className={`${namePrefix}-card-title mb-0`}>{title}</Truncate.Deprecated>
       </Button>
     </OverlayTrigger>
   );

src/course-outline/card-header/TitleLink.jsx

@@ -14,7 +14,7 @@ const TitleLink = ({
     className="item-card-header__title-btn"
     to={titleLink}
   >
-    <Truncate lines={1} className={`${namePrefix}-card-title mb-0`}>{title}</Truncate>
+    <Truncate.Deprecated lines={1} className={`${namePrefix}-card-title mb-0`}>{title}</Truncate.Deprecated>
   </Button>
 );
 

src/course-outline/page-alerts/PageAlerts.jsx

@@ -378,7 +378,7 @@ const PageAlerts = ({
             dismissError={() => dispatch(dismissError(msgObj.key))}
           >
             <Alert.Heading>{msgObj.title}</Alert.Heading>
-            {msgObj.desc && <Truncate lines={2}>{msgObj.desc}</Truncate>}
+            {msgObj.desc && <Truncate.Deprecated lines={2}>{msgObj.desc}</Truncate.Deprecated>}
           </ErrorAlert>
         ) : (
           <Alert
@@ -387,7 +387,7 @@ const PageAlerts = ({
             key={msgObj.key}
           >
             <Alert.Heading>{msgObj.title}</Alert.Heading>
-            {msgObj.desc && <Truncate lines={2}>{msgObj.desc}</Truncate>}
+            {msgObj.desc && <Truncate.Deprecated lines={2}>{msgObj.desc}</Truncate.Deprecated>}
           </Alert>
         )
       ))

src/editors/containers/EditorContainer/components/TitleHeader/__snapshots__/index.test.jsx.snap

@@ -14,11 +14,11 @@ exports[`TitleHeader snapshots initialized 1`] = `
 <div
   className="d-flex flex-row align-items-center mt-1"
 >
-  <Truncate>
+  <Truncate.Deprecated>
     {
       "useSelector": [Function],
     }
-  </Truncate>
+  </Truncate.Deprecated>
   <IconButton
     alt="Edit Title"
     className="mx-2"

src/editors/containers/EditorContainer/components/TitleHeader/index.jsx

@@ -49,9 +49,9 @@ const TitleHeader = ({
   }
   return (
     <div className="d-flex flex-row align-items-center mt-1">
-      <Truncate>
+      <Truncate.Deprecated>
         {title}
-      </Truncate>
+      </Truncate.Deprecated>
       <IconButton
         alt={intl.formatMessage(messages.editTitleLabel)}
         iconAs={Icon}

src/editors/sharedComponents/SelectionModal/GalleryCard.jsx

@@ -66,7 +66,7 @@ const GalleryCard = ({
         </div>
         <div className="card-text px-3 py-2" style={{ marginTop: '10px' }}>
           <h3 className="text-primary-500">
-            <Truncate>{asset.displayName}</Truncate>
+            <Truncate.Deprecated>{asset.displayName}</Truncate.Deprecated>
           </h3>
           { asset.transcripts && (
             <div style={{ margin: '0 0 5px 0' }}>

src/editors/sharedComponents/SelectionModal/__snapshots__/GalleryCard.test.jsx.snap

@@ -59,9 +59,9 @@ exports[`GalleryCard component snapshot with duration badge 1`] = `
       <h3
         className="text-primary-500"
       >
-        <Truncate>
+        <Truncate.Deprecated>
           props.img.displayName
-        </Truncate>
+        </Truncate.Deprecated>
       </h3>
       <p
         className="text-gray-500"
@@ -138,9 +138,9 @@ exports[`GalleryCard component snapshot with duration transcripts 1`] = `
       <h3
         className="text-primary-500"
       >
-        <Truncate>
+        <Truncate.Deprecated>
           props.img.displayName
-        </Truncate>
+        </Truncate.Deprecated>
       </h3>
       <div
         style={
@@ -232,9 +232,9 @@ exports[`GalleryCard component snapshot with status badge 1`] = `
       <h3
         className="text-primary-500"
       >
-        <Truncate>
+        <Truncate.Deprecated>
           props.img.displayName
-        </Truncate>
+        </Truncate.Deprecated>
       </h3>
       <p
         className="text-gray-500"
@@ -312,9 +312,9 @@ exports[`GalleryCard component snapshot with thumbnail fallback and load error 1
       <h3
         className="text-primary-500"
       >
-        <Truncate>
+        <Truncate.Deprecated>
           props.img.displayName
-        </Truncate>
+        </Truncate.Deprecated>
       </h3>
       <p
         className="text-gray-500"
@@ -392,9 +392,9 @@ exports[`GalleryCard component snapshot with thumbnail fallback and no error 1`]
       <h3
         className="text-primary-500"
       >
-        <Truncate>
+        <Truncate.Deprecated>
           props.img.displayName
-        </Truncate>
+        </Truncate.Deprecated>
       </h3>
       <p
         className="text-gray-500"
@@ -471,9 +471,9 @@ exports[`GalleryCard component snapshot: dateAdded=12345 1`] = `
       <h3
         className="text-primary-500"
       >
-        <Truncate>
+        <Truncate.Deprecated>
           props.img.displayName
-        </Truncate>
+        </Truncate.Deprecated>
       </h3>
       <p
         className="text-gray-500"

src/files-and-videos/files-page/FileInfoModalSidebar.jsx

@@ -57,9 +57,9 @@ const FileInfoModalSidebar = ({
       </div>
       <ActionRow>
         <div style={{ wordBreak: 'break-word' }}>
-          <Truncate lines={1}>
+          <Truncate.Deprecated lines={1}>
             {asset?.portableUrl}
-          </Truncate>
+          </Truncate.Deprecated>
         </div>
         <ActionRow.Spacer />
         <IconButton
@@ -74,9 +74,9 @@ const FileInfoModalSidebar = ({
       </div>
       <ActionRow>
         <div style={{ wordBreak: 'break-word' }}>
-          <Truncate lines={1}>
+          <Truncate.Deprecated lines={1}>
             {asset?.externalUrl}
-          </Truncate>
+          </Truncate.Deprecated>
         </div>
         <ActionRow.Spacer />
         <IconButton

src/files-and-videos/generic/DeleteConfirmationModal.jsx

@@ -35,9 +35,9 @@ const DeleteConfirmationModal = ({
         styling="basic"
         title={(
           <h3 className="h5 m-n2">
-            <Truncate lines={1}>
+            <Truncate.Deprecated lines={1}>
               {original.displayName}
-            </Truncate>
+            </Truncate.Deprecated>
           </h3>
         )}
         data-testid={`collapsible-${original.id}`}

src/files-and-videos/generic/InfoModal.jsx

@@ -48,9 +48,9 @@ const InfoModal = ({
       <ModalDialog.Header>
         <ModalDialog.Title>
           <div style={{ wordBreak: 'break-word' }}>
-            <Truncate lines={2} className="font-weight-bold small mt-3">
+            <Truncate.Deprecated lines={2} className="font-weight-bold small mt-3">
               {file?.displayName}
-            </Truncate>
+            </Truncate.Deprecated>
           </div>
         </ModalDialog.Title>
       </ModalDialog.Header>

src/files-and-videos/generic/table-components/GalleryCard.jsx

@@ -67,9 +67,9 @@ const GalleryCard = ({
           />
         </div>
         <div style={{ wordBreak: 'break-word' }}>
-          <Truncate lines={1} className="font-weight-bold mt-2 picture-title">
+          <Truncate.Deprecated lines={1} className="font-weight-bold mt-2 picture-title">
             {original.displayName}
-          </Truncate>
+          </Truncate.Deprecated>
         </div>
       </Card.Section>
       <Card.Footer className="p-3 pt-4 row m-0 flex-row-reverse justify-content-between align-items-center">

src/files-and-videos/videos-page/upload-modal/UploadProgressList.jsx

@@ -25,9 +25,9 @@ const UploadProgressList = ({ videosList }) => (
         <Stack role="listitem" gap={2} direction="horizontal" className="mb-3 small" key={id}>
           <span>{bulletNumber}</span>
           <div className="col-5 pl-0">
-            <Truncate>
+            <Truncate.Deprecated>
               {video.name}
-            </Truncate>
+            </Truncate.Deprecated>
           </div>
           <div className="col-6 p-0">
             <span className="row m-0 justify-content-end font-weight-bold">

src/group-configurations/common/TitleButton.jsx

@@ -27,7 +27,7 @@ const TitleButton = ({
     >
       <div className="configuration-card-header__title">
         <h3>
-          <Truncate lines={1}>{name}</Truncate>
+          <Truncate.Deprecated lines={1}>{name}</Truncate.Deprecated>
         </h3>
         <span className="x-small text-gray-500">
           {formatMessage(messages.titleId, { id })}

src/group-configurations/experiment-configurations-section/ExperimentCardGroup.jsx

@@ -14,7 +14,7 @@ const ExperimentCardGroup = ({ groups }) => {
           data-testid="configuration-card-content-experiment-stack"
           key={item.id}
         >
-          <Truncate lines={1}>{item.name}</Truncate>
+          <Truncate.Deprecated lines={1}>{item.name}</Truncate.Deprecated>
           <span>{percentage}</span>
         </div>
       ))}