Infrastructure/ghost
0
Fork 0
mirror of https://github.com/TryGhost/Ghost.git synced 2025-01-20 22:42:53 -05:00
Code Issues Activity

Added Button suffix to all Button components

Browse source 
refs https://github.com/TryGhost/Team/issues/1858
This commit is contained in:
Simon Backx 2022-08-31 15:35:44 +02:00
parent e8eeacac9e
commit 92accd76f0
5 changed files with 15 additions and 15 deletions
Show stats Download patch file Download diff file Expand all files Collapse all files

14
apps/comments-ui/src/components/content/Comment.js
View file

@ -1,9 +1,9 @@
import React, {useContext, useState} from 'react'; import React, {useContext, useState} from 'react';
import {Transition} from '@headlessui/react'; import {Transition} from '@headlessui/react';
import {BlankAvatar, Avatar} from './Avatar'; import {BlankAvatar, Avatar} from './Avatar';
import Like from './buttons/Like'; import LikeButton from './buttons/LikeButton';
import Reply from './buttons/Reply'; import ReplyButton from './buttons/ReplyButton';
import More from './buttons/More'; import MoreButton from './buttons/MoreButton';
import Form from './Form'; import Form from './Form';
import Replies from './Replies'; import Replies from './Replies';
import AppContext from '../../AppContext'; import AppContext from '../../AppContext';
@ -105,7 +105,7 @@ function UnpublishedComment({comment, openEditMode}) {
<div className="flex h-12 flex-row items-center gap-4 pb-[8px] pr-4"> <div className="flex h-12 flex-row items-center gap-4 pb-[8px] pr-4">
<p className="mt-[4px] font-sans text-[16px] italic leading-normal text-neutral-300 dark:text-[rgba(255,255,255,0.5)]">{notPublishedMessage}</p> <p className="mt-[4px] font-sans text-[16px] italic leading-normal text-neutral-300 dark:text-[rgba(255,255,255,0.5)]">{notPublishedMessage}</p>
<div className="mt-[4px]"> <div className="mt-[4px]">
<More comment={comment} toggleEdit={openEditMode} /> <MoreButton comment={comment} toggleEdit={openEditMode} />
</div> </div>
</div> </div>
</div> </div>
@ -223,9 +223,9 @@ function CommentMenu({comment, toggleReplyMode, isInReplyMode, openEditMode, par
return ( return (
<div className="flex items-center gap-5"> <div className="flex items-center gap-5">
{<Like comment={comment} />} {<LikeButton comment={comment} />}
{(canReply && <Reply comment={comment} toggleReply={toggleReplyMode} isReplying={isInReplyMode} />)} {(canReply && <ReplyButton comment={comment} toggleReply={toggleReplyMode} isReplying={isInReplyMode} />)}
{<More comment={comment} toggleEdit={openEditMode} />} {<MoreButton comment={comment} toggleEdit={openEditMode} />}
</div> </div>
); );
} }

2
apps/comments-ui/src/components/content/Form.js
View file

@ -48,7 +48,7 @@ const Form = (props) => {
let config; let config;
if (props.isReply) { if (props.isReply) {
config = { config = {
placeholder: 'Reply to comment', placeholder: 'ReplyButton to comment',
autofocus: true autofocus: true
}; };
} else if (props.isEdit) { } else if (props.isEdit) {

4
apps/comments-ui/src/components/content/buttons/Like.js → apps/comments-ui/src/components/content/buttons/LikeButton.js
View file

@ -2,7 +2,7 @@ import {useContext, useState} from 'react';
import {ReactComponent as LikeIcon} from '../../../images/icons/like.svg'; import {ReactComponent as LikeIcon} from '../../../images/icons/like.svg';
import AppContext from '../../../AppContext'; import AppContext from '../../../AppContext';
function Like(props) { function LikeButton(props) {
const {dispatchAction, member, commentsEnabled} = useContext(AppContext); const {dispatchAction, member, commentsEnabled} = useContext(AppContext);
const [animationClass, setAnimation] = useState(''); const [animationClass, setAnimation] = useState('');
@ -42,4 +42,4 @@ function Like(props) {
); );
} }
export default Like; export default LikeButton;

4
apps/comments-ui/src/components/content/buttons/More.js → apps/comments-ui/src/components/content/buttons/MoreButton.js
View file

@ -3,7 +3,7 @@ import CommentContextMenu from '../context-menus/CommentContextMenu';
import AppContext from '../../../AppContext'; import AppContext from '../../../AppContext';
import {ReactComponent as MoreIcon} from '../../../images/icons/more.svg'; import {ReactComponent as MoreIcon} from '../../../images/icons/more.svg';
const More = (props) => { const MoreButton = (props) => {
const [isContextMenuOpen, setIsContextMenuOpen] = useState(false); const [isContextMenuOpen, setIsContextMenuOpen] = useState(false);
const {member, admin} = useContext(AppContext); const {member, admin} = useContext(AppContext);
@ -35,4 +35,4 @@ const More = (props) => {
); );
}; };
export default More; export default MoreButton;

6
apps/comments-ui/src/components/content/buttons/Reply.js → apps/comments-ui/src/components/content/buttons/ReplyButton.js
View file

@ -2,13 +2,13 @@ import React, {useContext} from 'react';
import AppContext from '../../../AppContext'; import AppContext from '../../../AppContext';
import {ReactComponent as ReplyIcon} from '../../../images/icons/reply.svg'; import {ReactComponent as ReplyIcon} from '../../../images/icons/reply.svg';
function Reply(props) { function ReplyButton(props) {
const {member} = useContext(AppContext); const {member} = useContext(AppContext);
return member ? return member ?
(<button disabled={!!props.disabled} className={`group duration-50 flex items-center font-sans text-sm outline-0 transition-all ease-linear ${props.isReplying ? 'text-neutral-900 dark:text-[rgba(255,255,255,0.9)]' : 'text-neutral-500 hover:text-neutral-600 dark:text-[rgba(255,255,255,0.5)] dark:hover:text-[rgba(255,255,255,0.3)]'}`} onClick={props.toggleReply} data-testid="reply-button"> (<button disabled={!!props.disabled} className={`group duration-50 flex items-center font-sans text-sm outline-0 transition-all ease-linear ${props.isReplying ? 'text-neutral-900 dark:text-[rgba(255,255,255,0.9)]' : 'text-neutral-500 hover:text-neutral-600 dark:text-[rgba(255,255,255,0.5)] dark:hover:text-[rgba(255,255,255,0.3)]'}`} onClick={props.toggleReply} data-testid="reply-button">
<ReplyIcon className={`mr-[6px] ${props.isReplying ? 'fill-neutral-900 stroke-neutral-900 dark:fill-white dark:stroke-white' : 'stroke-neutral-400 group-hover:stroke-neutral-600 dark:stroke-[rgba(255,255,255,0.5)]'} duration-50 transition ease-linear`} />Reply <ReplyIcon className={`mr-[6px] ${props.isReplying ? 'fill-neutral-900 stroke-neutral-900 dark:fill-white dark:stroke-white' : 'stroke-neutral-400 group-hover:stroke-neutral-600 dark:stroke-[rgba(255,255,255,0.5)]'} duration-50 transition ease-linear`} />ReplyButton
</button>) : null; </button>) : null;
} }
export default Reply; export default ReplyButton;