refactor(components): split Comment component into 3 components

* add ApprovedComment, PendingComment and ReplyCommentForm components
* let consumer handle reply form visibility
* move structured data into article page (each article already has the
comments data and already handle json ltd schema so I prefered to move
the schema in the final consumer instead of adding a script element
foreach comment)

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);