fix(project): restrict text length to avoid scrolling issue (jwplayer…

…#538)
conversionxl · Feb 17, 2025 · 91d7a49 · 91d7a49
1 parent 54d6faf
commit 91d7a49
Show file tree

Hide file tree

Showing 10 changed files with 82 additions and 21 deletions.
diff --git a/packages/ui-react/src/components/CollapsibleText/CollapsibleText.tsx b/packages/ui-react/src/components/CollapsibleText/CollapsibleText.tsx
@@ -1,20 +1,19 @@
 import classNames from 'classnames';
 import React, { useEffect, useRef, useState } from 'react';
 import ChevronRight from '@jwp/ott-theme/assets/icons/chevron_right.svg?react';
-import useBreakpoint from '@jwp/ott-ui-react/src/hooks/useBreakpoint';
 
 import IconButton from '../IconButton/IconButton';
 import Icon from '../Icon/Icon';
+import useBreakpoint from '../../hooks/useBreakpoint';
 
 import styles from './CollapsibleText.module.scss';
 
 type Props = {
   text: string;
   className?: string;
-  maxHeight?: 'none' | number;
 };
 
-const CollapsibleText: React.FC<Props> = ({ text, className, maxHeight = 'none' }: Props) => {
+const CollapsibleText: React.FC<Props> = ({ text, className }: Props) => {
   const divRef = useRef<HTMLDivElement>() as React.MutableRefObject<HTMLDivElement>;
   const breakpoint = useBreakpoint();
   const [doesFlowOver, setDoesFlowOver] = useState(false);
@@ -23,12 +22,10 @@ const CollapsibleText: React.FC<Props> = ({ text, className, maxHeight = 'none'
   const ariaLabel = expanded ? 'Collapse' : 'Expand';
 
   const clippablePixels = 4;
+  const maxHeight = 60;
 
   useEffect(() => {
-    divRef.current &&
-      setDoesFlowOver(
-        divRef.current.scrollHeight > divRef.current.offsetHeight + clippablePixels || (maxHeight !== 'none' && maxHeight < divRef.current.offsetHeight),
-      );
+    divRef.current && setDoesFlowOver(divRef.current.scrollHeight > divRef.current.offsetHeight + clippablePixels || maxHeight < divRef.current.offsetHeight);
   }, [maxHeight, text, breakpoint]);
 
   return (

diff --git a/packages/ui-react/src/components/CollapsibleText/__snapshots__/CollapsibleText.test.tsx.snap b/packages/ui-react/src/components/CollapsibleText/__snapshots__/CollapsibleText.test.tsx.snap
@@ -8,7 +8,7 @@ exports[`<CollapsibleText> > renders and matches snapshot 1`] = `
     <p
       class="_textContainer_561522"
       id="collapsible-content"
-      style="max-height: none;"
+      style="max-height: 60px;"
     >
       Test...
     </p>

diff --git a/packages/ui-react/src/components/Hero/Hero.tsx b/packages/ui-react/src/components/Hero/Hero.tsx
@@ -4,6 +4,7 @@ import React from 'react';
 import useBreakpoint, { Breakpoint } from '../../hooks/useBreakpoint';
 import CollapsibleText from '../CollapsibleText/CollapsibleText';
 import Image from '../Image/Image';
+import TruncatedText from '../TruncatedText/TruncatedText';
 
 import styles from './Hero.module.scss';
 
@@ -24,7 +25,11 @@ const Hero = ({ title, description, image }: Props) => {
       <div className={styles.posterFade} />
       <div className={styles.info}>
         <h1 className={styles.title}>{title}</h1>
-        <CollapsibleText text={description} className={styles.description} maxHeight={isMobile ? 60 : 'none'} />
+        {isMobile ? (
+          <CollapsibleText text={description} className={styles.description} />
+        ) : (
+          <TruncatedText text={description} maximumLines={8} className={styles.description} />
+        )}
       </div>
     </div>
   );

diff --git a/packages/ui-react/src/components/TruncatedText/TruncatedText.module.scss b/packages/ui-react/src/components/TruncatedText/TruncatedText.module.scss
@@ -0,0 +1,5 @@
+.truncatedText {
+  display: -webkit-box;
+  -webkit-box-orient: vertical;
+  overflow: hidden;
+}
diff --git a/packages/ui-react/src/components/TruncatedText/TruncatedText.test.tsx b/packages/ui-react/src/components/TruncatedText/TruncatedText.test.tsx
@@ -0,0 +1,12 @@
+import React from 'react';
+import { render } from '@testing-library/react';
+
+import TruncatedText from './TruncatedText';
+
+describe('<TruncatedText>', () => {
+  test('renders and matches snapshot', () => {
+    const { container } = render(<TruncatedText text="Test..." maximumLines={8} />);
+
+    expect(container).toMatchSnapshot();
+  });
+});
diff --git a/packages/ui-react/src/components/TruncatedText/TruncatedText.tsx b/packages/ui-react/src/components/TruncatedText/TruncatedText.tsx
@@ -0,0 +1,26 @@
+import React from 'react';
+import classNames from 'classnames';
+
+import styles from './TruncatedText.module.scss';
+
+type TruncatedTextProps = {
+  text: string;
+  maximumLines: number;
+  className?: string;
+};
+
+const TruncatedText: React.FC<TruncatedTextProps> = ({ text, maximumLines, className }) => {
+  return (
+    <div
+      className={classNames(styles.truncatedText, className)}
+      style={{
+        maxHeight: `calc(1.5em * ${maximumLines})`,
+        WebkitLineClamp: maximumLines,
+      }}
+    >
+      {text}
+    </div>
+  );
+};
+
+export default TruncatedText;
diff --git a/packages/ui-react/src/components/TruncatedText/__snapshots__/TruncatedText.test.tsx.snap b/packages/ui-react/src/components/TruncatedText/__snapshots__/TruncatedText.test.tsx.snap
@@ -0,0 +1,12 @@
+// Vitest Snapshot v1, https://vitest.dev/guide/snapshot.html
+
+exports[`<TruncatedText> > renders and matches snapshot 1`] = `
+<div>
+  <div
+    class="_truncatedText_b1c064"
+    style="max-height: calc(1.5em * 8); -webkit-line-clamp: 8;"
+  >
+    Test...
+  </div>
+</div>
+`;
diff --git a/packages/ui-react/src/components/VideoDetails/VideoDetails.tsx b/packages/ui-react/src/components/VideoDetails/VideoDetails.tsx
@@ -3,8 +3,9 @@ import classNames from 'classnames';
 import { testId } from '@jwp/ott-common/src/utils/common';
 import useBreakpoint, { Breakpoint } from '@jwp/ott-ui-react/src/hooks/useBreakpoint';
 
-import CollapsibleText from '../CollapsibleText/CollapsibleText';
+import TruncatedText from '../TruncatedText/TruncatedText';
 import Image from '../Image/Image';
+import CollapsibleText from '../CollapsibleText/CollapsibleText';
 
 import styles from './VideoDetails.module.scss';
 
@@ -52,8 +53,11 @@ const VideoDetails: React.VFC<Props> = ({
               <div className={styles.primaryMetadata}>{primaryMetadata}</div>
               {secondaryMetadata && <div className={styles.secondaryMetadata}>{secondaryMetadata}</div>}
             </div>
-            <CollapsibleText text={description} className={styles.description} maxHeight={isMobile ? 60 : 'none'} />
-
+            {isMobile ? (
+              <CollapsibleText text={description} className={styles.description} />
+            ) : (
+              <TruncatedText text={description} maximumLines={12} className={styles.description} />
+            )}
             <div className={styles.buttonBar}>
               {startWatchingButton}
               {trailerButton}

diff --git a/packages/ui-react/src/components/VideoDetails/__snapshots__/VideoDetails.test.tsx.snap b/packages/ui-react/src/components/VideoDetails/__snapshots__/VideoDetails.test.tsx.snap
@@ -46,15 +46,10 @@ exports[`<VideoDetails> > renders and matches snapshot 1`] = `
             </div>
           </div>
           <div
-            class="_collapsibleText_561522"
+            class="_truncatedText_b1c064 _description_d0c133"
+            style="max-height: calc(1.5em * 12); -webkit-line-clamp: 12;"
           >
-            <p
-              class="_textContainer_561522 _description_d0c133"
-              id="collapsible-content"
-              style="max-height: none;"
-            >
-              Video description
-            </p>
+            Video description
           </div>
           <div
             class="_buttonBar_d0c133"

diff --git a/packages/ui-react/src/components/VideoDetailsInline/VideoDetailsInline.tsx b/packages/ui-react/src/components/VideoDetailsInline/VideoDetailsInline.tsx
@@ -3,6 +3,7 @@ import { testId } from '@jwp/ott-common/src/utils/common';
 import useBreakpoint, { Breakpoint } from '@jwp/ott-ui-react/src/hooks/useBreakpoint';
 
 import CollapsibleText from '../CollapsibleText/CollapsibleText';
+import TruncatedText from '../TruncatedText/TruncatedText';
 
 import styles from './VideoDetailsInline.module.scss';
 
@@ -35,7 +36,11 @@ const VideoDetailsInline: React.FC<Props> = ({ title, description, primaryMetada
           <React.Fragment key={index}>{button}</React.Fragment>
         ))}
       </div>
-      <CollapsibleText text={description} className={styles.description} maxHeight={isMobile ? 60 : 'none'} />
+      {isMobile ? (
+        <CollapsibleText text={description} className={styles.description} />
+      ) : (
+        <TruncatedText text={description} maximumLines={12} className={styles.description} />
+      )}
     </div>
   );
 };