diff options
Diffstat (limited to 'src/components/organisms/layout')
7 files changed, 28 insertions, 60 deletions
diff --git a/src/components/organisms/layout/comment.fixture.ts b/src/components/organisms/layout/comment.fixture.ts index bb18d22..84aa20e 100644 --- a/src/components/organisms/layout/comment.fixture.ts +++ b/src/components/organisms/layout/comment.fixture.ts @@ -23,9 +23,7 @@ export const meta = { export const id = 5; -export const saveComment = async () => { - /** Do nothing. */ -}; +export const saveComment = () => undefined; export const data: UserCommentProps = { approved: true, @@ -33,5 +31,5 @@ export const data: UserCommentProps = { id, meta, parentId: 0, - saveComment, + onSubmit: saveComment, }; diff --git a/src/components/organisms/layout/comment.module.scss b/src/components/organisms/layout/comment.module.scss index f26b3fe..096f4c4 100644 --- a/src/components/organisms/layout/comment.module.scss +++ b/src/components/organisms/layout/comment.module.scss @@ -65,9 +65,14 @@ } .form { - margin-top: var(--spacing-sm); + &__wrapper { + margin-top: var(--spacing-sm); + } - form > * { - margin-inline: auto; + &__heading { + width: fit-content; + margin: 0 auto var(--spacing-md) auto; } + + margin-inline: auto; } diff --git a/src/components/organisms/layout/comment.stories.tsx b/src/components/organisms/layout/comment.stories.tsx index 9c33ba3..7426fc3 100644 --- a/src/components/organisms/layout/comment.stories.tsx +++ b/src/components/organisms/layout/comment.stories.tsx @@ -14,7 +14,7 @@ export default { component: UserComment, args: { canReply: true, - saveComment, + onSubmit: saveComment, }, argTypes: { author: { @@ -59,19 +59,6 @@ export default { required: true, }, }, - Notice: { - control: { - type: null, - }, - description: 'A component to display a success or error message.', - table: { - category: 'Options', - }, - type: { - name: 'function', - required: false, - }, - }, parentId: { control: { type: null, @@ -90,7 +77,7 @@ export default { value: {}, }, }, - saveComment: { + onSubmit: { control: { type: null, }, diff --git a/src/components/organisms/layout/comment.tsx b/src/components/organisms/layout/comment.tsx index adbb2cc..b55bb3d 100644 --- a/src/components/organisms/layout/comment.tsx +++ b/src/components/organisms/layout/comment.tsx @@ -1,4 +1,3 @@ -/* eslint-disable max-statements */ import NextImage from 'next/image'; import Script from 'next/script'; import type { FC } from 'react'; @@ -6,7 +5,7 @@ import { useIntl } from 'react-intl'; import type { Comment as CommentSchema, WithContext } from 'schema-dts'; import type { SingleComment } from '../../../types'; import { useSettings, useToggle } from '../../../utils/hooks'; -import { Button, Link, Time } from '../../atoms'; +import { Button, Heading, Link, Time } from '../../atoms'; import { Card, CardActions, @@ -24,7 +23,7 @@ export type UserCommentProps = Pick< SingleComment, 'approved' | 'content' | 'id' | 'meta' | 'parentId' > & - Pick<CommentFormProps, 'Notice' | 'saveComment'> & { + Pick<CommentFormProps, 'onSubmit'> & { /** * Enable or disable the reply button. Default: true. */ @@ -42,9 +41,8 @@ export const UserComment: FC<UserCommentProps> = ({ content, id, meta, - Notice, + onSubmit, parentId, - saveComment, ...props }) => { const intl = useIntl(); @@ -173,13 +171,15 @@ export const UserComment: FC<UserCommentProps> = ({ ) : null} </Card> {isReplying ? ( - <Card className={styles.form} variant={2}> + <Card className={styles.form__wrapper} variant={2}> <CardBody> + <Heading className={styles.form__heading} level={2}> + {formTitle} + </Heading> <CommentForm - Notice={Notice} + className={styles.form} + onSubmit={onSubmit} parentId={id} - saveComment={saveComment} - title={formTitle} /> </CardBody> </Card> diff --git a/src/components/organisms/layout/comments-list.stories.tsx b/src/components/organisms/layout/comments-list.stories.tsx index 4b32d7b..c1a262e 100644 --- a/src/components/organisms/layout/comments-list.stories.tsx +++ b/src/components/organisms/layout/comments-list.stories.tsx @@ -1,4 +1,4 @@ -import { ComponentMeta, ComponentStory } from '@storybook/react'; +import type { ComponentMeta, ComponentStory } from '@storybook/react'; import { CommentsList } from './comments-list'; import { comments } from './comments-list.fixture'; @@ -39,20 +39,7 @@ export default { required: true, }, }, - Notice: { - control: { - type: null, - }, - description: 'A component to display a success or error message.', - table: { - category: 'Options', - }, - type: { - name: 'function', - required: false, - }, - }, - saveComment: { + onSubmit: { control: { type: null, }, diff --git a/src/components/organisms/layout/comments-list.test.tsx b/src/components/organisms/layout/comments-list.test.tsx index f245ebb..d7e170c 100644 --- a/src/components/organisms/layout/comments-list.test.tsx +++ b/src/components/organisms/layout/comments-list.test.tsx @@ -1,4 +1,4 @@ -import { describe, expect, it } from '@jest/globals'; +import { describe, it } from '@jest/globals'; import { render } from '../../../../tests/utils'; import { saveComment } from './comment.fixture'; import { CommentsList } from './comments-list'; @@ -7,7 +7,7 @@ import { comments } from './comments-list.fixture'; describe('CommentsList', () => { it('renders a comments list', () => { render( - <CommentsList comments={comments} depth={1} saveComment={saveComment} /> + <CommentsList comments={comments} depth={1} onSubmit={saveComment} /> ); }); }); diff --git a/src/components/organisms/layout/comments-list.tsx b/src/components/organisms/layout/comments-list.tsx index af0152a..2d43583 100644 --- a/src/components/organisms/layout/comments-list.tsx +++ b/src/components/organisms/layout/comments-list.tsx @@ -6,10 +6,7 @@ import { UserComment, type UserCommentProps } from './comment'; // eslint-disable-next-line @typescript-eslint/no-magic-numbers export type CommentsListDepth = 0 | 1 | 2 | 3 | 4; -export type CommentsListProps = Pick< - UserCommentProps, - 'Notice' | 'saveComment' -> & { +export type CommentsListProps = Pick<UserCommentProps, 'onSubmit'> & { /** * An array of comments. */ @@ -28,8 +25,7 @@ export type CommentsListProps = Pick< export const CommentsList: FC<CommentsListProps> = ({ comments, depth, - Notice, - saveComment, + onSubmit, }) => { /** * Get each comment wrapped in a list item. @@ -45,12 +41,7 @@ export const CommentsList: FC<CommentsListProps> = ({ return commentsList.map(({ replies, ...comment }) => ( <ListItem key={comment.id}> - <UserComment - canReply={!isLastLevel} - Notice={Notice} - saveComment={saveComment} - {...comment} - /> + <UserComment canReply={!isLastLevel} onSubmit={onSubmit} {...comment} /> {replies.length && !isLastLevel ? ( <List hideMarker isOrdered spacing="sm"> {getItems(replies, startLevel + 1)} |