diff options
| -rw-r--r-- | src/components/organisms/layout/comment.module.scss | 87 | ||||
| -rw-r--r-- | src/components/organisms/layout/comment.stories.tsx | 117 | ||||
| -rw-r--r-- | src/components/organisms/layout/comment.test.tsx | 64 | ||||
| -rw-r--r-- | src/components/organisms/layout/comment.tsx | 175 |
4 files changed, 443 insertions, 0 deletions
diff --git a/src/components/organisms/layout/comment.module.scss b/src/components/organisms/layout/comment.module.scss new file mode 100644 index 0000000..54201de --- /dev/null +++ b/src/components/organisms/layout/comment.module.scss @@ -0,0 +1,87 @@ +@use "@styles/abstracts/functions" as fun; +@use "@styles/abstracts/mixins" as mix; + +.wrapper { + padding: var(--spacing-md); + background: var(--color-bg); + border: fun.convert-px(1) solid var(--color-border); + box-shadow: fun.convert-px(3) fun.convert-px(3) 0 0 var(--color-shadow-light), + fun.convert-px(4) fun.convert-px(4) fun.convert-px(3) fun.convert-px(-2) + var(--color-shadow); + + &--comment { + @include mix.media("screen") { + @include mix.dimensions("sm") { + display: grid; + grid-template-columns: minmax(0, #{fun.convert-px(150)}) minmax(0, 1fr); + column-gap: var(--spacing-lg); + } + } + } + + &--form { + display: flex; + flex-flow: column wrap; + place-content: center; + margin-top: var(--spacing-sm); + } + + .header { + display: flex; + flex-flow: column wrap; + align-items: center; + row-gap: var(--spacing-sm); + + @include mix.media("screen") { + @include mix.dimensions("sm") { + grid-row: 1 / 4; + } + } + } + + .author { + color: var(--color-primary-darker); + font-weight: 600; + text-align: center; + } + + .avatar { + width: fun.convert-px(85); + height: fun.convert-px(85); + position: relative; + border-radius: fun.convert-px(3); + box-shadow: 0 0 0 fun.convert-px(1) var(--color-shadow-light), + fun.convert-px(2) fun.convert-px(2) 0 fun.convert-px(1) + var(--color-shadow); + + img { + border-radius: fun.convert-px(3); + } + } + + .date { + flex-flow: row wrap; + justify-content: center; + margin: var(--spacing-sm) 0; + font-size: var(--font-size-sm); + text-align: center; + + @include mix.media("screen") { + @include mix.dimensions("sm") { + justify-content: left; + margin: 0 0 var(--spacing-sm); + } + } + } + + .body { + overflow-wrap: break-word; + } + + .footer { + display: flex; + justify-content: flex-end; + align-items: center; + padding: var(--spacing-md) 0 0; + } +} diff --git a/src/components/organisms/layout/comment.stories.tsx b/src/components/organisms/layout/comment.stories.tsx new file mode 100644 index 0000000..01d9ac6 --- /dev/null +++ b/src/components/organisms/layout/comment.stories.tsx @@ -0,0 +1,117 @@ +import { ComponentMeta, ComponentStory } from '@storybook/react'; +import { IntlProvider } from 'react-intl'; +import CommentComponent from './comment'; + +/** + * Comment - Storybook Meta + */ +export default { + title: 'Organisms/Layout', + component: CommentComponent, + argTypes: { + author: { + description: 'The author data.', + type: { + name: 'object', + required: true, + value: {}, + }, + }, + canReply: { + control: { + type: 'boolean', + }, + description: 'Enable or disable the reply button.', + table: { + category: 'Options', + defaultValue: { summary: true }, + }, + type: { + name: 'boolean', + required: false, + }, + }, + content: { + control: { + type: 'text', + }, + description: 'The comment body.', + type: { + name: 'string', + required: true, + }, + }, + id: { + control: { + type: 'number', + }, + description: 'The comment id.', + type: { + name: 'number', + required: true, + }, + }, + postId: { + control: { + type: 'number', + }, + description: 'The post id.', + type: { + name: 'number', + required: true, + }, + }, + publication: { + description: 'The publication date.', + type: { + name: 'object', + required: true, + value: {}, + }, + }, + saveComment: { + control: { + type: null, + }, + description: 'A callback function to save the comment form data.', + table: { + category: 'Events', + }, + type: { + name: 'function', + required: true, + }, + }, + }, + decorators: [ + (Story) => ( + <IntlProvider locale="en"> + <Story /> + </IntlProvider> + ), + ], +} as ComponentMeta<typeof CommentComponent>; + +const Template: ComponentStory<typeof CommentComponent> = (args) => ( + <CommentComponent {...args} /> +); + +/** + * Layout Stories - Comment + */ +export const Comment = Template.bind({}); +Comment.args = { + author: { + avatar: 'http://placeimg.com/640/480', + name: 'Armand', + url: 'https://www.armandphilippot.com/', + }, + content: + 'Harum aut cumque iure fugit neque sequi cupiditate repudiandae laudantium. Ratione aut assumenda qui illum voluptas accusamus quis officiis exercitationem. Consectetur est harum eius perspiciatis officiis nihil. Aut corporis minima debitis adipisci possimus debitis et.', + id: 2, + postId: 21, + publication: '2021-04-03 23:04:24', + saveComment: () => null, + // @ts-ignore - Needed because of the placeholder image. + unoptimized: true, +}; diff --git a/src/components/organisms/layout/comment.test.tsx b/src/components/organisms/layout/comment.test.tsx new file mode 100644 index 0000000..942ed0f --- /dev/null +++ b/src/components/organisms/layout/comment.test.tsx @@ -0,0 +1,64 @@ +import { render, screen } from '@test-utils'; +import { getFormattedDate, getFormattedTime } from '@utils/helpers/format'; +import Comment from './comment'; + +const author = { + avatar: 'http://placeimg.com/640/480', + name: 'Your name', + url: 'https://www.example.test/', +}; +const content = + 'Harum aut cumque iure fugit neque sequi cupiditate repudiandae laudantium. Ratione aut assumenda qui illum voluptas accusamus quis officiis exercitationem. Consectetur est harum eius perspiciatis officiis nihil. Aut corporis minima debitis adipisci possimus debitis et.'; +const publication = '2021-04-03 23:04:24'; +const id = 5; +const postId = 31; + +const data = { + author, + content, + id, + postId, + publication, + saveComment: () => null, +}; + +const formattedDate = getFormattedDate(publication); +const formattedTime = getFormattedTime(publication); + +describe('Comment', () => { + it('renders an avatar', () => { + render(<Comment {...data} />); + expect( + screen.getByRole('img', { name: 'Your name avatar' }) + ).toBeInTheDocument(); + }); + + it('renders the author website url', () => { + render(<Comment {...data} />); + expect(screen.getByRole('link', { name: author.name })).toHaveAttribute( + 'href', + author.url + ); + }); + + it('renders a permalink to the comment', () => { + render(<Comment {...data} />); + expect( + screen.getByRole('link', { + name: `${formattedDate} at ${formattedTime}`, + }) + ).toHaveAttribute('href', `/#comment-${id}`); + }); + + it('renders a reply button', () => { + render(<Comment {...data} canReply={true} />); + expect(screen.getByRole('button', { name: 'Reply' })).toBeInTheDocument(); + }); + + it('does not render a reply button', () => { + render(<Comment {...data} canReply={false} />); + expect( + screen.queryByRole('button', { name: 'Reply' }) + ).not.toBeInTheDocument(); + }); +}); diff --git a/src/components/organisms/layout/comment.tsx b/src/components/organisms/layout/comment.tsx new file mode 100644 index 0000000..f4b822a --- /dev/null +++ b/src/components/organisms/layout/comment.tsx @@ -0,0 +1,175 @@ +import Button from '@components/atoms/buttons/button'; +import Link from '@components/atoms/links/link'; +import DescriptionList from '@components/atoms/lists/description-list'; +import { getFormattedDate, getFormattedTime } from '@utils/helpers/format'; +import Image from 'next/image'; +import { FC, useState } from 'react'; +import { useIntl } from 'react-intl'; +import CommentForm, { type CommentFormProps } from '../forms/comment-form'; +import styles from './comment.module.scss'; + +export type CommentAuthor = { + /** + * The author avatar. + */ + avatar: string; + /** + * The author name. + */ + name: string; + /** + * The author website. + */ + url?: string; +}; + +export type CommentProps = { + /** + * The comment author data. + */ + author: CommentAuthor; + /** + * Enable or disable the reply button. Default: true. + */ + canReply?: boolean; + /** + * The comment body. + */ + content: string; + /** + * The comment id. + */ + id: number | string; + /** + * The post id. + */ + postId: number | string; + /** + * The comment date. + */ + publication: string; + /** + * A callback function to save comment form data. + */ + saveComment: CommentFormProps['saveComment']; +}; + +/** + * Comment component + * + * Render a single comment. + */ +const Comment: FC<CommentProps> = ({ + author, + canReply = true, + content, + id, + publication, + saveComment, + ...props +}) => { + const intl = useIntl(); + const [isReplying, setIsReplying] = useState<boolean>(false); + const commentDate = getFormattedDate(publication); + const commentTime = getFormattedTime(publication); + const commentDateTime = new Date(publication).toISOString(); + + const avatarAltText = intl.formatMessage( + { + defaultMessage: '{author} avatar', + description: 'Comment: avatar alternative text', + id: 'T/hUiO', + }, + { author: author.name } + ); + const buttonLabel = isReplying + ? intl.formatMessage({ + defaultMessage: 'Cancel reply', + description: 'Comment: cancel reply button', + id: 'LCorTC', + }) + : intl.formatMessage({ + defaultMessage: 'Reply', + description: 'Comment: reply button', + id: 'hzHuCc', + }); + const dateLabel = intl.formatMessage({ + defaultMessage: 'Published on:', + description: 'Comment: publication date label', + id: 'soj7do', + }); + const dateValue = intl.formatMessage( + { + defaultMessage: '{date} at {time}', + description: 'Comment: publication date and time', + id: 'Ld6yMP', + }, + { + date: commentDate, + time: commentTime, + } + ); + const formTitle = intl.formatMessage({ + defaultMessage: 'Leave a reply', + description: 'Comment: comment form title', + id: '2fD5CI', + }); + + const dateLink = ( + <Link href={`#comment-${id}`}> + <time dateTime={commentDateTime}></time> + {dateValue} + </Link> + ); + + return ( + <> + <article + id={`comment-${id}`} + className={`${styles.wrapper} ${styles['wrapper--comment']}`} + > + <header className={styles.header}> + <div className={styles.avatar}> + <Image + src={author.avatar} + alt={avatarAltText} + layout="fill" + objectFit="cover" + {...props} + /> + </div> + {author.url ? ( + <Link href={author.url} className={styles.author}> + {author.name} + </Link> + ) : ( + <span className={styles.author}>{author.name}</span> + )} + </header> + <DescriptionList + items={[{ id: 'comment-date', term: dateLabel, value: [dateLink] }]} + layout="inline" + className={styles.date} + groupClassName={styles.meta} + /> + <div className={styles.body}>{content}</div> + <footer className={styles.footer}> + {canReply && ( + <Button kind="tertiary" onClick={() => setIsReplying(!isReplying)}> + {buttonLabel} + </Button> + )} + </footer> + </article> + {isReplying && ( + <CommentForm + saveComment={saveComment} + title={formTitle} + className={`${styles.wrapper} ${styles['wrapper--form']}`} + /> + )} + </> + ); +}; + +export default Comment; |