From 36890cfafeba6e30782df1260d7f9e678c7da4bf Mon Sep 17 00:00:00 2001 From: Armand Philippot Date: Mon, 2 Oct 2023 17:01:57 +0200 Subject: refactor(components): rewrite DescriptionList component * add a `spacing` prop * replace `layout` prop with `isInline` prop * remove `items` prop (and classNames props) in favor of new components: Description, Group, Term * remove `withSeparator` prop (CSS content is announced by screen readers and Firefox/Safari have no support for alternative text so the consumer should add itself an element with `aria-hidden` if it need a separator) Be aware, Meta component and its consumers can be visually broken, they should be refactored before using them in production. --- src/components/organisms/layout/comment.fixture.ts | 41 +++++++++++++++++++++ .../organisms/layout/comment.fixture.tsx | 41 --------------------- .../organisms/layout/comment.stories.tsx | 12 +++--- src/components/organisms/layout/comment.test.tsx | 28 +++++++------- src/components/organisms/layout/comment.tsx | 43 +++++++++++----------- src/components/organisms/layout/comments-list.tsx | 11 +++--- .../organisms/layout/overview.module.scss | 4 ++ src/components/organisms/layout/overview.tsx | 6 +-- src/components/organisms/layout/summary.tsx | 11 +----- 9 files changed, 96 insertions(+), 101 deletions(-) create mode 100644 src/components/organisms/layout/comment.fixture.ts delete mode 100644 src/components/organisms/layout/comment.fixture.tsx (limited to 'src/components/organisms/layout') diff --git a/src/components/organisms/layout/comment.fixture.ts b/src/components/organisms/layout/comment.fixture.ts new file mode 100644 index 0000000..f626be9 --- /dev/null +++ b/src/components/organisms/layout/comment.fixture.ts @@ -0,0 +1,41 @@ +import { getFormattedDate, getFormattedTime } from '../../../utils/helpers'; +import type { UserCommentProps } from './comment'; + +export const author = { + avatar: { + alt: 'Author avatar', + height: 480, + src: 'http://placeimg.com/640/480', + width: 640, + }, + name: 'Armand', + website: 'https://www.armandphilippot.com/', +}; + +export 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.'; + +export const date = '2021-04-03 23:04:24'; + +export const meta = { + author, + date, +}; + +export const id = 5; + +export const saveComment = async () => { + /** Do nothing. */ +}; + +export const data: UserCommentProps = { + approved: true, + content, + id, + meta, + parentId: 0, + saveComment, +}; + +export const formattedDate = getFormattedDate(date); +export const formattedTime = getFormattedTime(date); diff --git a/src/components/organisms/layout/comment.fixture.tsx b/src/components/organisms/layout/comment.fixture.tsx deleted file mode 100644 index eee7981..0000000 --- a/src/components/organisms/layout/comment.fixture.tsx +++ /dev/null @@ -1,41 +0,0 @@ -import { getFormattedDate, getFormattedTime } from '../../../utils/helpers'; -import { CommentProps } from './comment'; - -export const author = { - avatar: { - alt: 'Author avatar', - height: 480, - src: 'http://placeimg.com/640/480', - width: 640, - }, - name: 'Armand', - website: 'https://www.armandphilippot.com/', -}; - -export 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.'; - -export const date = '2021-04-03 23:04:24'; - -export const meta = { - author, - date, -}; - -export const id = 5; - -export const saveComment = async () => { - /** Do nothing. */ -}; - -export const data: CommentProps = { - approved: true, - content, - id, - meta, - parentId: 0, - saveComment, -}; - -export const formattedDate = getFormattedDate(date); -export const formattedTime = getFormattedTime(date); diff --git a/src/components/organisms/layout/comment.stories.tsx b/src/components/organisms/layout/comment.stories.tsx index a73ba23..9c33ba3 100644 --- a/src/components/organisms/layout/comment.stories.tsx +++ b/src/components/organisms/layout/comment.stories.tsx @@ -1,5 +1,5 @@ -import { ComponentMeta, ComponentStory } from '@storybook/react'; -import { Comment } from './comment'; +import type { ComponentMeta, ComponentStory } from '@storybook/react'; +import { UserComment } from './comment'; import { data } from './comment.fixture'; const saveComment = async () => { @@ -11,7 +11,7 @@ const saveComment = async () => { */ export default { title: 'Organisms/Layout/Comment', - component: Comment, + component: UserComment, args: { canReply: true, saveComment, @@ -104,10 +104,10 @@ export default { }, }, }, -} as ComponentMeta; +} as ComponentMeta; -const Template: ComponentStory = (args) => ( - +const Template: ComponentStory = (args) => ( + ); /** diff --git a/src/components/organisms/layout/comment.test.tsx b/src/components/organisms/layout/comment.test.tsx index 1aa9e4a..b64f84a 100644 --- a/src/components/organisms/layout/comment.test.tsx +++ b/src/components/organisms/layout/comment.test.tsx @@ -1,6 +1,6 @@ import { describe, expect, it } from '@jest/globals'; -import { render, screen } from '../../../../tests/utils'; -import { Comment } from './comment'; +import { render, screen as rtlScreen } from '../../../../tests/utils'; +import { UserComment } from './comment'; import { author, data, @@ -9,40 +9,42 @@ import { id, } from './comment.fixture'; -describe('Comment', () => { +describe('UserComment', () => { it('renders an avatar', () => { - render(); + render(); expect( - screen.getByRole('img', { name: author.avatar.alt }) + rtlScreen.getByRole('img', { name: author.avatar.alt }) ).toBeInTheDocument(); }); it('renders the author website url', () => { - render(); - expect(screen.getByRole('link', { name: author.name })).toHaveAttribute( + render(); + expect(rtlScreen.getByRole('link', { name: author.name })).toHaveAttribute( 'href', author.website ); }); it('renders a permalink to the comment', () => { - render(); + render(); expect( - screen.getByRole('link', { + rtlScreen.getByRole('link', { name: `${formattedDate} at ${formattedTime}`, }) ).toHaveAttribute('href', `#comment-${id}`); }); it('renders a reply button', () => { - render(); - expect(screen.getByRole('button', { name: 'Reply' })).toBeInTheDocument(); + render(); + expect( + rtlScreen.getByRole('button', { name: 'Reply' }) + ).toBeInTheDocument(); }); it('does not render a reply button', () => { - render(); + render(); expect( - screen.queryByRole('button', { name: 'Reply' }) + rtlScreen.queryByRole('button', { name: 'Reply' }) ).not.toBeInTheDocument(); }); }); diff --git a/src/components/organisms/layout/comment.tsx b/src/components/organisms/layout/comment.tsx index e2a42bf..ca209f5 100644 --- a/src/components/organisms/layout/comment.tsx +++ b/src/components/organisms/layout/comment.tsx @@ -1,16 +1,17 @@ -import Image from 'next/image'; +/* eslint-disable max-statements */ +import NextImage from 'next/image'; import Script from 'next/script'; -import { FC, useCallback, useState } from 'react'; +import { type FC, useCallback, useState } from 'react'; import { useIntl } from 'react-intl'; -import { type Comment as CommentSchema, type WithContext } from 'schema-dts'; -import { type SingleComment } from '../../../types'; +import type { Comment as CommentSchema, WithContext } from 'schema-dts'; +import type { SingleComment } from '../../../types'; import { useSettings } from '../../../utils/hooks'; import { Button, Link } from '../../atoms'; import { Meta } from '../../molecules'; import { CommentForm, type CommentFormProps } from '../forms'; import styles from './comment.module.scss'; -export type CommentProps = Pick< +export type UserCommentProps = Pick< SingleComment, 'approved' | 'content' | 'id' | 'meta' | 'parentId' > & @@ -22,11 +23,11 @@ export type CommentProps = Pick< }; /** - * Comment component + * UserComment component * * Render a single comment. */ -export const Comment: FC = ({ +export const UserComment: FC = ({ approved, canReply = true, content, @@ -103,6 +104,9 @@ export const Comment: FC = ({ text: content, }; + const commentWrapperClass = `${styles.wrapper} ${styles['wrapper--comment']}`; + const formWrapperClass = `${styles.wrapper} ${styles['wrapper--form']}`; + return ( <>