diff --git a/src/app/pages/TopicPage/Curation/Subhead/index.stories.tsx b/src/app/pages/TopicPage/Curation/Subhead/index.stories.tsx index b52ec46f790..06353856f78 100644 --- a/src/app/pages/TopicPage/Curation/Subhead/index.stories.tsx +++ b/src/app/pages/TopicPage/Curation/Subhead/index.stories.tsx @@ -26,7 +26,7 @@ const Component = ({ service, variant }: Props) => { const WithLink = ({ service, variant }: Props) => { return ( - + {services[service][variant].translations.relatedContent} diff --git a/src/app/pages/TopicPage/Curation/Subhead/index.test.tsx b/src/app/pages/TopicPage/Curation/Subhead/index.test.tsx index 14329a72d65..a92f26892c8 100644 --- a/src/app/pages/TopicPage/Curation/Subhead/index.test.tsx +++ b/src/app/pages/TopicPage/Curation/Subhead/index.test.tsx @@ -7,17 +7,17 @@ import { Services } from '../../../../models/types/global'; interface Props { service?: Services; - href?: string; + link?: string; } /* eslint-disable react/prop-types */ const SubheadWithContext = ({ children = '', - href = '', + link = '', service = 'mundo', }: PropsWithChildren) => ( - {children} + {children} ); @@ -33,7 +33,7 @@ describe('Curation Subhead Component', () => { it('should render children within an h2', () => { const { container } = render( - My Text, + My Text, ); const anchorElement = container.querySelector('a'); diff --git a/src/app/pages/TopicPage/Curation/Subhead/index.tsx b/src/app/pages/TopicPage/Curation/Subhead/index.tsx index b278e3509f9..fdabe30f54e 100644 --- a/src/app/pages/TopicPage/Curation/Subhead/index.tsx +++ b/src/app/pages/TopicPage/Curation/Subhead/index.tsx @@ -7,16 +7,16 @@ import { LeftChevron, RightChevron } from '../../../../components/icons'; import { ServiceContext } from '../../../../contexts/ServiceContext'; interface Props { - href?: string; + link?: string; a11yID?: string; } -const Subhead = ({ children, href, a11yID }: PropsWithChildren) => { +const Subhead = ({ children, link, a11yID }: PropsWithChildren) => { const { service, script, dir } = useContext(ServiceContext); - const Wrapper = href + const Wrapper = link ? ({ children: innerChildren }: PropsWithChildren) => ( - + {innerChildren} {dir === 'ltr' ? : } @@ -29,6 +29,6 @@ const Subhead = ({ children, href, a11yID }: PropsWithChildren) => { ); }; -Subhead.defaultProps = { href: '', a11yID: '' }; +Subhead.defaultProps = { link: '', a11yID: '' }; export default Subhead; diff --git a/src/app/pages/TopicPage/Curation/index.jsx b/src/app/pages/TopicPage/Curation/index.jsx index 9f5dc22de6d..01f174c617b 100644 --- a/src/app/pages/TopicPage/Curation/index.jsx +++ b/src/app/pages/TopicPage/Curation/index.jsx @@ -1,6 +1,7 @@ import React from 'react'; import { arrayOf, oneOf, shape, string, number } from 'prop-types'; import pathOr from 'ramda/src/pathOr'; +import VisuallyHiddenText from '#psammead/psammead-visually-hidden-text/src'; import CurationGrid from './CurationGrid'; import Subheading from './Subhead'; @@ -40,12 +41,19 @@ const Curation = ({ const createID = titleText => { return titleText.replaceAll(' ', '-'); }; - return curationLength > 1 && (title || position === 0) ? ( -
- - {title} - - + const isFirstCuration = position === 0; + const SubheadingComponent = isFirstCuration ? VisuallyHiddenText : Subheading; + const id = createID(title || topStoriesTitle); + + return curationLength > 1 && (title || isFirstCuration) ? ( +
+ + {title || topStoriesTitle} + +
) : (