Renamed CommentsBox to ContentBox and splitted Title component

refs https://github.com/TryGhost/Team/issues/1858

apps/comments-ui/src/App.js

@@ -5,7 +5,7 @@ import {createPopupNotification} from './utils/helpers';
 import AppContext from './AppContext';
 import {hasMode} from './utils/check-mode';
 import setupGhostApi from './utils/api';
-import CommentsBox from './components/CommentsBox';
+import ContentBox from './components/ContentBox';
 import PopupModal from './components/PopupModal';
 
 function AuthFrame({adminUrl, onLoad}) {
@@ -302,7 +302,7 @@ export default class App extends React.Component {
             <SentryErrorBoundary dsn={this.props.sentryDsn}>
                 <AppContext.Provider value={this.getContextFromState()}>
                     <CommentsFrame>
-                        <CommentsBox done={done} />
+                        <ContentBox done={done} />
                     </CommentsFrame>
                     <AuthFrame adminUrl={this.props.adminUrl} onLoad={this.initAdminAuth.bind(this)}/>
                     <PopupModal />

apps/comments-ui/src/App.test.js

@@ -115,15 +115,15 @@ describe('Dark mode', () => {
         const {iframeDocument} = renderApp({documentStyles: {
             color: '#FFFFFF'
         }});
-        const darkModeCommentsBox = await within(iframeDocument).findByTestId('comments-box');
+        const darkModeContentBox = await within(iframeDocument).findByTestId('content-box');
-        expect(darkModeCommentsBox.classList).toContain('dark');
+        expect(darkModeContentBox.classList).toContain('dark');
     });
     it('uses dark mode when container has a dark text color', async () => {
         const {iframeDocument} = renderApp({documentStyles: {
             color: '#000000'
         }});
-        const darkModeCommentsBox = await within(iframeDocument).findByTestId('comments-box');
+        const darkModeContentBox = await within(iframeDocument).findByTestId('content-box');
-        expect(darkModeCommentsBox.classList).not.toContain('dark');
+        expect(darkModeContentBox.classList).not.toContain('dark');
     });
     it('uses dark mode when custom mode has been passed as a property', async () => {
         const {iframeDocument} = renderApp({
@@ -131,8 +131,8 @@ describe('Dark mode', () => {
                 colorScheme: 'dark'
             }
         });
-        const darkModeCommentsBox = await within(iframeDocument).findByTestId('comments-box');
+        const darkModeContentBox = await within(iframeDocument).findByTestId('content-box');
-        expect(darkModeCommentsBox.classList).toContain('dark');
+        expect(darkModeContentBox.classList).toContain('dark');
     });
     it('uses light mode when custom mode has been passed as a property', async () => {
         const {iframeDocument} = renderApp({
@@ -141,8 +141,8 @@ describe('Dark mode', () => {
             },
             color: '#FFFFFF'
         });
-        const darkModeCommentsBox = await within(iframeDocument).findByTestId('comments-box');
+        const darkModeContentBox = await within(iframeDocument).findByTestId('content-box');
-        expect(darkModeCommentsBox.classList).not.toContain('dark');
+        expect(darkModeContentBox.classList).not.toContain('dark');
     });
 });
 

apps/comments-ui/src/components/ContentBox.js

@@ -6,50 +6,9 @@ import Comment from './content/Comment';
 import Pagination from './content/Pagination';
 import Loading from './content/Loading';
 import {ROOT_DIV_ID} from '../utils/constants';
+import ContentTitle from './content/ContentTitle';
 
-const CommentsBoxTitle = ({title, showCount, count}) => {
+const Content = (props) => {
-    // We have to check for null for title because null means default, wheras empty string means empty
-    if (!title && !showCount && title !== null) {
-        return null;
-    }
-
-    const Title = () => {
-        if (title === null) {
-            return (
-                <><span className="hidden sm:inline">Member </span><span className="capitalize sm:normal-case">discussion</span></>
-            );
-        }
-
-        return title;
-    };
-
-    const Count = () => {
-        if (!showCount) {
-            return null;
-        }
-
-        if (count === 1) {
-            return (
-                <div className="text-[1.6rem] text-neutral-400">1 comment</div>
-            );
-        }
-
-        return (
-            <div className="text-[1.6rem] text-neutral-400">{count} comments</div>
-        );
-    };
-
-    return (
-        <div className="mb-10 flex w-full items-baseline justify-between font-sans">
-            <h2 className="text-[2.8rem] font-bold tracking-tight dark:text-[rgba(255,255,255,0.85)]">
-                <Title />
-            </h2>
-            <Count />
-        </div>
-    );
-};
-
-const CommentsBoxContent = (props) => {
     const {pagination, member, comments, commentCount, commentsEnabled, title, showCount, secundaryFormCount} = useContext(AppContext);
     const commentsElements = comments.slice().reverse().map(comment => <Comment comment={comment} key={comment.id} />);
 
@@ -78,7 +37,7 @@ const CommentsBoxContent = (props) => {
 
     return (
         <>
-            <CommentsBoxTitle title={title} showCount={showCount} count={commentCount}/>
+            <ContentTitle title={title} showCount={showCount} count={commentCount}/>
             <Pagination />
             <div className={!pagination ? 'mt-4' : ''} data-test="comment-elements">
                 {commentsElements}
@@ -93,7 +52,7 @@ const CommentsBoxContent = (props) => {
     );
 };
 
-const CommentsBox = (props) => {
+const ContentBox = (props) => {
     const luminance = (r, g, b) => {
         var a = [r, g, b].map(function (v) {
             v /= 255;
@@ -136,12 +95,12 @@ const CommentsBox = (props) => {
     };
 
     return (
-        <section className={'ghost-display ' + containerClass} style={style} data-testid="comments-box">
+        <section className={'ghost-display ' + containerClass} style={style} data-testid="content-box">
             {props.done ? <>
-                <CommentsBoxContent />
+                <Content />
             </> : <Loading />}
         </section>
     );
 };
 
-export default CommentsBox;
+export default ContentBox;

apps/comments-ui/src/components/content/ContentTitle.js

@@ -0,0 +1,43 @@
+const Count = ({showCount, count}) => {
+    if (!showCount) {
+        return null;
+    }
+
+    if (count === 1) {
+        return (
+            <div className="text-[1.6rem] text-neutral-400">1 comment</div>
+        );
+    }
+
+    return (
+        <div className="text-[1.6rem] text-neutral-400">{count} comments</div>
+    );
+};
+
+const Title = ({title}) => {
+    if (title === null) {
+        return (
+            <><span className="hidden sm:inline">Member </span><span className="capitalize sm:normal-case">discussion</span></>
+        );
+    }
+
+    return title;
+};
+
+const ContentTitle = ({title, showCount, count}) => {
+    // We have to check for null for title because null means default, wheras empty string means empty
+    if (!title && !showCount && title !== null) {
+        return null;
+    }
+
+    return (
+        <div className="mb-10 flex w-full items-baseline justify-between font-sans">
+            <h2 className="text-[2.8rem] font-bold tracking-tight dark:text-[rgba(255,255,255,0.85)]">
+                <Title title={title}/>
+            </h2>
+            <Count count={count} showCount={showCount} />
+        </div>
+    );
+};
+
+export default ContentTitle;