diff options
Diffstat (limited to 'src/components/organisms/comment/reply-comment-form')
5 files changed, 139 insertions, 0 deletions
diff --git a/src/components/organisms/comment/reply-comment-form/index.ts b/src/components/organisms/comment/reply-comment-form/index.ts new file mode 100644 index 0000000..d461a03 --- /dev/null +++ b/src/components/organisms/comment/reply-comment-form/index.ts @@ -0,0 +1 @@ +export * from './reply-comment-form'; diff --git a/src/components/organisms/comment/reply-comment-form/reply-comment-form.module.scss b/src/components/organisms/comment/reply-comment-form/reply-comment-form.module.scss new file mode 100644 index 0000000..cd7c3ca --- /dev/null +++ b/src/components/organisms/comment/reply-comment-form/reply-comment-form.module.scss @@ -0,0 +1,13 @@ +.body { + margin-inline: auto; + width: 100%; +} + +.form { + margin-inline: auto; +} + +:where(.body) > *:first-child { + width: fit-content; + margin: 0 auto var(--spacing-md); +} diff --git a/src/components/organisms/comment/reply-comment-form/reply-comment-form.stories.tsx b/src/components/organisms/comment/reply-comment-form/reply-comment-form.stories.tsx new file mode 100644 index 0000000..57174ea --- /dev/null +++ b/src/components/organisms/comment/reply-comment-form/reply-comment-form.stories.tsx @@ -0,0 +1,25 @@ +import type { ComponentMeta, ComponentStory } from '@storybook/react'; +import { Heading } from '../../../atoms'; +import { ReplyCommentForm } from './reply-comment-form'; + +/** + * ReplyCommentForm - Storybook Meta + */ +export default { + title: 'Organisms/Comment/ReplyCommentForm', + component: ReplyCommentForm, + argTypes: {}, +} as ComponentMeta<typeof ReplyCommentForm>; + +const Template: ComponentStory<typeof ReplyCommentForm> = (args) => ( + <ReplyCommentForm {...args} /> +); + +/** + * ReplyCommentForm Stories - Default + */ +export const Default = Template.bind({}); +Default.args = { + commentId: 5, + heading: <Heading level={2}>Reply to comment 5</Heading>, +}; diff --git a/src/components/organisms/comment/reply-comment-form/reply-comment-form.test.tsx b/src/components/organisms/comment/reply-comment-form/reply-comment-form.test.tsx new file mode 100644 index 0000000..f02dd48 --- /dev/null +++ b/src/components/organisms/comment/reply-comment-form/reply-comment-form.test.tsx @@ -0,0 +1,26 @@ +import { describe, expect, it } from '@jest/globals'; +import { render, screen as rtlScreen } from '../../../../../tests/utils'; +import { Heading } from '../../../atoms'; +import { ReplyCommentForm } from './reply-comment-form'; + +describe('ReplyCommentForm', () => { + it('renders a form with a heading', () => { + const commentId = 5; + const heading = 'odio autem voluptas'; + const headingLvl = 3; + + render( + <ReplyCommentForm + commentId={commentId} + heading={<Heading level={headingLvl}>{heading}</Heading>} + /> + ); + + expect( + rtlScreen.getByRole('heading', { level: headingLvl }) + ).toHaveTextContent(heading); + expect(rtlScreen.getByRole('form')).toHaveAccessibleName( + `Leave a reply to comment ${commentId}` + ); + }); +}); diff --git a/src/components/organisms/comment/reply-comment-form/reply-comment-form.tsx b/src/components/organisms/comment/reply-comment-form/reply-comment-form.tsx new file mode 100644 index 0000000..a027ba2 --- /dev/null +++ b/src/components/organisms/comment/reply-comment-form/reply-comment-form.tsx @@ -0,0 +1,74 @@ +import { + type ForwardRefRenderFunction, + type ReactElement, + type ReactNode, + forwardRef, +} from 'react'; +import { useIntl } from 'react-intl'; +import type { HeadingProps } from '../../../atoms'; +import { Card, CardBody, type CardProps } from '../../../molecules'; +import { CommentForm, type CommentFormProps } from '../../forms'; +import styles from './reply-comment-form.module.scss'; + +export type ReplyCommentFormProps = Omit< + CardProps<undefined>, + | 'children' + | 'content' + | 'cover' + | 'id' + | 'isCentered' + | 'linkTo' + | 'meta' + | 'onSubmit' + | 'variant' +> & + Pick<CommentFormProps, 'onSubmit'> & { + /** + * Add additional contents below the form. + */ + children?: ReactNode; + /** + * The comment id related to the reply. + */ + commentId: number; + /** + * The form heading. + */ + heading: ReactElement<HeadingProps>; + }; + +const ReplyCommentFormWithRef: ForwardRefRenderFunction< + HTMLDivElement, + ReplyCommentFormProps +> = ( + { children, className = '', commentId, heading, onSubmit, ...props }, + ref +) => { + const wrapperClass = `${styles.wrapper} ${className}`; + const intl = useIntl(); + const formLabel = intl.formatMessage( + { + defaultMessage: 'Leave a reply to comment {id}', + description: 'ReplyCommentForm: an accessible name for the reply form', + id: 'ndAawq', + }, + { id: commentId } + ); + + return ( + <Card {...props} className={wrapperClass} ref={ref} variant={2}> + <CardBody className={styles.body}> + {heading} + <CommentForm + aria-label={formLabel} + className={styles.form} + onSubmit={onSubmit} + parentId={commentId} + /> + {children} + </CardBody> + </Card> + ); +}; + +export const ReplyCommentForm = forwardRef(ReplyCommentFormWithRef); |