From bea90b092261d2e9d22fd9c5edd723226a85fa6c Mon Sep 17 00:00:00 2001 From: Simon Backx Date: Wed, 31 Aug 2022 15:25:49 +0200 Subject: [PATCH] Renamed CommentsBox to ContentBox and splitted Title component refs https://github.com/TryGhost/Team/issues/1858 --- apps/comments-ui/src/App.js | 4 +- apps/comments-ui/src/App.test.js | 16 +++--- .../{CommentsBox.js => ContentBox.js} | 55 +++---------------- .../src/components/content/ContentTitle.js | 43 +++++++++++++++ 4 files changed, 60 insertions(+), 58 deletions(-) rename apps/comments-ui/src/components/{CommentsBox.js => ContentBox.js} (73%) create mode 100644 apps/comments-ui/src/components/content/ContentTitle.js diff --git a/apps/comments-ui/src/App.js b/apps/comments-ui/src/App.js index 9e1805d0f4..463ed15899 100644 --- a/apps/comments-ui/src/App.js +++ b/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 { - + diff --git a/apps/comments-ui/src/App.test.js b/apps/comments-ui/src/App.test.js index 84e387df2b..77536af136 100644 --- a/apps/comments-ui/src/App.test.js +++ b/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'); - expect(darkModeCommentsBox.classList).toContain('dark'); + const darkModeContentBox = await within(iframeDocument).findByTestId('content-box'); + 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'); - expect(darkModeCommentsBox.classList).not.toContain('dark'); + const darkModeContentBox = await within(iframeDocument).findByTestId('content-box'); + 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'); - expect(darkModeCommentsBox.classList).toContain('dark'); + const darkModeContentBox = await within(iframeDocument).findByTestId('content-box'); + 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'); - expect(darkModeCommentsBox.classList).not.toContain('dark'); + const darkModeContentBox = await within(iframeDocument).findByTestId('content-box'); + expect(darkModeContentBox.classList).not.toContain('dark'); }); }); diff --git a/apps/comments-ui/src/components/CommentsBox.js b/apps/comments-ui/src/components/ContentBox.js similarity index 73% rename from apps/comments-ui/src/components/CommentsBox.js rename to apps/comments-ui/src/components/ContentBox.js index 98759610d6..a4866ef3e0 100644 --- a/apps/comments-ui/src/components/CommentsBox.js +++ b/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}) => { - // 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 ( - <>Member discussion - ); - } - - return title; - }; - - const Count = () => { - if (!showCount) { - return null; - } - - if (count === 1) { - return ( -
1 comment
- ); - } - - return ( -
{count} comments
- ); - }; - - return ( -
-

- - </h2> - <Count /> - </div> - ); -}; - -const CommentsBoxContent = (props) => { +const Content = (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; diff --git a/apps/comments-ui/src/components/content/ContentTitle.js b/apps/comments-ui/src/components/content/ContentTitle.js new file mode 100644 index 0000000000..2ad249af58 --- /dev/null +++ b/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;