From 5b762b1b669454a89899c4bdf6008027d9615acf Mon Sep 17 00:00:00 2001 From: Armand Philippot Date: Thu, 30 Nov 2023 19:30:43 +0100 Subject: refactor(pages): refine Article pages * use rehype to update code blocks class names * fix widget heading level (after a level 1 it should always be a level 2 and not 3) * replace Spinner with LoadingPage and LoadingPageComments components to keep layout coherent * refactor useArticle and useComments hooks * fix URLs in JSON LD schema * add Cypress tests --- .../links/sharing-link/sharing-link.module.scss | 2 +- .../approved-comment/approved-comment.test.tsx | 4 ++- .../comment/approved-comment/approved-comment.tsx | 5 ++-- src/components/templates/page/index.ts | 2 ++ .../page/loading-page-comments.stories.tsx | 22 ++++++++++++++ .../templates/page/loading-page-comments.test.tsx | 13 +++++++++ .../templates/page/loading-page-comments.tsx | 34 ++++++++++++++++++++++ .../templates/page/loading-page.stories.tsx | 22 ++++++++++++++ .../templates/page/loading-page.test.tsx | 13 +++++++++ src/components/templates/page/loading-page.tsx | 28 ++++++++++++++++++ src/components/templates/page/page.module.scss | 20 +++++++++---- 11 files changed, 156 insertions(+), 9 deletions(-) create mode 100644 src/components/templates/page/loading-page-comments.stories.tsx create mode 100644 src/components/templates/page/loading-page-comments.test.tsx create mode 100644 src/components/templates/page/loading-page-comments.tsx create mode 100644 src/components/templates/page/loading-page.stories.tsx create mode 100644 src/components/templates/page/loading-page.test.tsx create mode 100644 src/components/templates/page/loading-page.tsx (limited to 'src/components') diff --git a/src/components/atoms/links/sharing-link/sharing-link.module.scss b/src/components/atoms/links/sharing-link/sharing-link.module.scss index e1c9c3c..105c37f 100644 --- a/src/components/atoms/links/sharing-link/sharing-link.module.scss +++ b/src/components/atoms/links/sharing-link/sharing-link.module.scss @@ -6,7 +6,7 @@ padding: var(--spacing-2xs) var(--spacing-xs); border-radius: fun.convert-px(3); box-shadow: #{fun.convert-px(3)} #{fun.convert-px(3)} 0 0 var(--shadowColor); - transition: all 0.3s linear 0s; + transition: all 0.2s linear 0s; &:hover, &:focus { diff --git a/src/components/organisms/comment/approved-comment/approved-comment.test.tsx b/src/components/organisms/comment/approved-comment/approved-comment.test.tsx index 2e29b5f..b244a63 100644 --- a/src/components/organisms/comment/approved-comment/approved-comment.test.tsx +++ b/src/components/organisms/comment/approved-comment/approved-comment.test.tsx @@ -52,7 +52,9 @@ describe('ApprovedComment', () => { /> ); - expect(rtlScreen.getByRole('img')).toHaveAccessibleName(author.avatar.alt); + expect(rtlScreen.getByRole('figure')).toHaveAccessibleName( + author.avatar.alt + ); }); it('can render a link to the author website', () => { diff --git a/src/components/organisms/comment/approved-comment/approved-comment.tsx b/src/components/organisms/comment/approved-comment/approved-comment.tsx index 233146d..d834ba3 100644 --- a/src/components/organisms/comment/approved-comment/approved-comment.tsx +++ b/src/components/organisms/comment/approved-comment/approved-comment.tsx @@ -117,9 +117,10 @@ const ApprovedCommentWithRef: ForwardRefRenderFunction< className={commentClass} cover={ author.avatar ? ( - + ; + +const Template: ComponentStory = (args) => ( + +); + +/** + * LoadingPageComments Stories - Example + */ +export const Example = Template.bind({}); diff --git a/src/components/templates/page/loading-page-comments.test.tsx b/src/components/templates/page/loading-page-comments.test.tsx new file mode 100644 index 0000000..b9ccb3e --- /dev/null +++ b/src/components/templates/page/loading-page-comments.test.tsx @@ -0,0 +1,13 @@ +import { describe, expect, it } from '@jest/globals'; +import { render, screen as rtlScreen } from '../../../../tests/utils'; +import { LoadingPageComments } from './loading-page-comments'; + +describe('LoadingPageComments', () => { + it('renders a spinner', () => { + render(); + + expect( + rtlScreen.getByText('The comments are loading...') + ).toBeInTheDocument(); + }); +}); diff --git a/src/components/templates/page/loading-page-comments.tsx b/src/components/templates/page/loading-page-comments.tsx new file mode 100644 index 0000000..9235dcb --- /dev/null +++ b/src/components/templates/page/loading-page-comments.tsx @@ -0,0 +1,34 @@ +import { + forwardRef, + type ForwardRefRenderFunction, + type HTMLAttributes, +} from 'react'; +import { useIntl } from 'react-intl'; +import { Spinner } from '../../atoms'; +import styles from './page.module.scss'; + +export type LoadingPageCommentsProps = Omit< + HTMLAttributes, + 'children' +>; + +const LoadingPageCommentsWithRef: ForwardRefRenderFunction< + HTMLDivElement, + LoadingPageCommentsProps +> = ({ className = '', ...props }, ref) => { + const wrapperClass = `${styles.comments} ${className}`; + const intl = useIntl(); + const loadingMsg = intl.formatMessage({ + defaultMessage: 'The comments are loading...', + description: 'LoadingPageComments: loading message', + id: 'gYbxP4', + }); + + return ( +
+ {loadingMsg} +
+ ); +}; + +export const LoadingPageComments = forwardRef(LoadingPageCommentsWithRef); diff --git a/src/components/templates/page/loading-page.stories.tsx b/src/components/templates/page/loading-page.stories.tsx new file mode 100644 index 0000000..2ea0b33 --- /dev/null +++ b/src/components/templates/page/loading-page.stories.tsx @@ -0,0 +1,22 @@ +import type { ComponentMeta, ComponentStory } from '@storybook/react'; +import { LoadingPage } from './loading-page'; + +/** + * LoadingPage - Storybook Meta + */ +export default { + title: 'Templates/LoadingPage', + component: LoadingPage, + parameters: { + layout: 'fullscreen', + }, +} as ComponentMeta; + +const Template: ComponentStory = (args) => ( + +); + +/** + * LoadingPage Stories - Example + */ +export const Example = Template.bind({}); diff --git a/src/components/templates/page/loading-page.test.tsx b/src/components/templates/page/loading-page.test.tsx new file mode 100644 index 0000000..5163943 --- /dev/null +++ b/src/components/templates/page/loading-page.test.tsx @@ -0,0 +1,13 @@ +import { describe, expect, it } from '@jest/globals'; +import { render, screen as rtlScreen } from '../../../../tests/utils'; +import { LoadingPage } from './loading-page'; + +describe('LoadingPage', () => { + it('renders a spinner', () => { + render(); + + expect( + rtlScreen.getByText('The requested page is loading...') + ).toBeInTheDocument(); + }); +}); diff --git a/src/components/templates/page/loading-page.tsx b/src/components/templates/page/loading-page.tsx new file mode 100644 index 0000000..18ceed0 --- /dev/null +++ b/src/components/templates/page/loading-page.tsx @@ -0,0 +1,28 @@ +import { forwardRef, type ForwardRefRenderFunction } from 'react'; +import { useIntl } from 'react-intl'; +import { Spinner } from '../../atoms'; +import { Page, type PageProps } from './page'; +import { PageBody } from './page-body'; +import styles from './page.module.scss'; + +const LoadingPageWithRef: ForwardRefRenderFunction< + HTMLDivElement, + Omit +> = (props, ref) => { + const intl = useIntl(); + const loadingMsg = intl.formatMessage({ + defaultMessage: 'The requested page is loading...', + description: 'LoadingPage: loading message', + id: '0UzObH', + }); + + return ( + + + {loadingMsg} + + + ); +}; + +export const LoadingPage = forwardRef(LoadingPageWithRef); diff --git a/src/components/templates/page/page.module.scss b/src/components/templates/page/page.module.scss index d2752a1..e7d3587 100644 --- a/src/components/templates/page/page.module.scss +++ b/src/components/templates/page/page.module.scss @@ -18,9 +18,6 @@ .section { --border-size: #{fun.convert-px(3)}; --col-gap: clamp(var(--spacing-md), 4vw, var(--spacing-2xl)); - --left-col: 0; - --right-col: 0; - --main-col: minmax(0, 80ch); @extend %grid; @@ -30,6 +27,10 @@ .breadcrumbs, .page--regular { + --left-col: 0; + --right-col: 0; + --main-col: minmax(0, 1fr); + margin-top: var(--spacing-sm); } @@ -74,7 +75,6 @@ .body { grid-column: 2; - margin-top: var(--spacing-sm); padding-bottom: var(--spacing-md); } @@ -113,8 +113,9 @@ } .section { - --right-col: minmax(0, 1fr); + --main-col: minmax(0, 80ch); --left-col: minmax(0, 1fr); + --right-col: minmax(0, 1fr); @extend %grid; @@ -202,6 +203,10 @@ } } +.spinner { + margin: var(--spacing-lg) auto 0; +} + :where(.comments) { .heading { width: fit-content; @@ -212,11 +217,16 @@ max-width: 40ch; margin-inline: auto; } + + .spinner { + grid-column: 2; + } } @container page (width > #{var.get-breakpoint("md")}) { .breadcrumbs, .page--regular { + --main-col: minmax(0, 80ch); --right-col: minmax(25ch, 1fr); } -- cgit v1.2.3