Merge pull request #1328 from prezly/feature/dev-20811-brussels-airlines-wants-to-remove-latest-stories-title-from

[DEV-20811] Fix - Hide "Latest stories" H1 on homepage in certain conditions

Author: kudlajz

app/[localeCode]/(story)/[slug]/page.tsx

@@ -37,6 +37,7 @@ export async function generateMetadata({ params }: Props) {
 }
 
 export default async function StoryPage(props: Props) {
+    const { localeCode } = await props.params;
     const searchParams = await props.searchParams;
     const { story, relatedStories } = await resolve(props.params);
     const settings = await app().themeSettings();
@@ -61,6 +62,7 @@ export default async function StoryPage(props: Props) {
                     sharing_actions: themeSettings.sharing_actions,
                 }}
                 withBadges={themeSettings.story_card_variant === 'boxed'}
+                locale={localeCode}
             />
         </>
     );

app/[localeCode]/(story)/preview/[uuid]/page.tsx

@@ -43,6 +43,7 @@ export async function generateMetadata(props: Props) {
 }
 
 export default async function PreviewStoryPage(props: Props) {
+    const { localeCode } = await props.params;
     const searchParams = await props.searchParams;
     const { story, relatedStories } = await resolve(props.params);
     const settings = await app().themeSettings();
@@ -67,6 +68,7 @@ export default async function PreviewStoryPage(props: Props) {
                     sharing_actions: [], // Cannot share unpublished article
                 }}
                 withBadges={themeSettings.story_card_variant === 'boxed'}
+                locale={localeCode}
             />
         </>
     );

app/[localeCode]/(story)/secret/[uuid]/page.tsx

@@ -37,6 +37,7 @@ export async function generateMetadata(props: Props) {
 }
 
 export default async function SecretStoryPage(props: Props) {
+    const { localeCode } = await props.params;
     const searchParams = await props.searchParams;
     const { story, relatedStories } = await resolve(props.params);
     const settings = await app().themeSettings();
@@ -61,6 +62,7 @@ export default async function SecretStoryPage(props: Props) {
                     sharing_actions: themeSettings.sharing_actions,
                 }}
                 withBadges={themeSettings.story_card_variant === 'boxed'}
+                locale={localeCode}
             />
         </>
     );

src/modules/InfiniteHubStories/InfiniteHubStories.module.scss

@@ -2,7 +2,10 @@
     display: grid;
     gap: $spacing-4;
     grid-template-columns: repeat(2, 1fr);
-    margin-bottom: $spacing-10;
+
+    &.withMargin {
+        margin-bottom: $spacing-10;
+    }
 
     @include tablet-up {
         &.four {

src/modules/InfiniteHubStories/InfiniteHubStories.tsx

@@ -54,7 +54,12 @@ export function InfiniteHubStories({
     const locale = useLocale();
     const includedNewsrooms = newsrooms.filter(({ uuid }) => uuid !== newsroomUuid);
 
-    const { load, loading, data, done } = useInfiniteLoading(
+    const {
+        load,
+        loading,
+        data: stories,
+        done,
+    } = useInfiniteLoading(
         useCallback(
             (offset) =>
                 fetchStories({
@@ -93,7 +98,11 @@ export function InfiniteHubStories({
 
     return (
         <div>
-            <div className={classNames(styles.newsrooms, getColumnsClassName())}>
+            <div
+                className={classNames(styles.newsrooms, getColumnsClassName(), {
+                    [styles.withMargin]: stories.length > 0,
+                })}
+            >
                 {includedNewsrooms.map((newsroom) => (
                     <NewsroomLogo key={newsroom.uuid} newsroom={newsroom} />
                 ))}
@@ -107,7 +116,7 @@ export function InfiniteHubStories({
                 newsroomUuid={newsroomUuid}
                 showDate={showDate}
                 showSubtitle={showSubtitle}
-                stories={data}
+                stories={stories}
                 storyCardVariant={storyCardVariant}
                 withEmptyState={false}
             />

src/modules/InfiniteStories/StoriesList.module.scss

@@ -1,4 +1,12 @@
-.filtersContainer {
+.pageTitle {
+    margin-bottom: $spacing-5 !important;
+
+    &.aria {
+        @include sr-only;
+    }
+}
+
+.filters {
     margin-bottom: $spacing-7;
 }
 

src/modules/InfiniteStories/StoriesList.tsx

@@ -2,11 +2,12 @@
 
 import type { Newsroom } from '@prezly/sdk';
 import { Category } from '@prezly/sdk';
-import { translations } from '@prezly/theme-kit-nextjs';
+import { translations, useIntl } from '@prezly/theme-kit-nextjs';
 import classNames from 'classnames';
 import { useMemo } from 'react';
 
 import { FormattedMessage, useLocale } from '@/adapters/client';
+import { PageTitle } from '@/components/PageTitle';
 import { StaggeredLayout } from '@/components/StaggeredLayout';
 import { HighlightedStoryCard, StoryCard } from '@/components/StoryCards';
 import type { ThemeSettings } from '@/theme-settings';
@@ -52,7 +53,9 @@ export function StoriesList({
     withEmptyState = true,
 }: Props) {
     const locale = useLocale();
+    const { formatMessage } = useIntl();
     const hasCategories = categories.length > 0;
+    const hasStories = stories.length > 0;
 
     const [highlightedStories, restStories] = useMemo(() => {
         if (isCategoryList) {
@@ -110,13 +113,22 @@ export function StoriesList({
                     })}
                 </div>
             )}
-            <CategoriesFilters
-                activeCategory={category}
-                categories={categories}
-                className={styles.filtersContainer}
-                hasStories={stories.length > 0}
-                locale={locale}
+            <PageTitle
+                className={classNames(styles.pageTitle, {
+                    // We want to hide the page title for regular users, but keep it
+                    // for the screen readers.
+                    [styles.aria]: isCategoryList ? !hasStories : !hasCategories,
+                })}
+                title={formatMessage(translations.homepage.latestStories)}
             />
+            {hasCategories && (
+                <CategoriesFilters
+                    activeCategory={category}
+                    categories={categories}
+                    className={styles.filters}
+                    locale={locale}
+                />
+            )}
             {restStories.length > 0 && layout === 'grid' && (
                 <div
                     className={classNames(styles.storiesContainer, {

src/modules/InfiniteStories/ui/CategoriesFilters/CategoriesFilters.module.scss

@@ -1,11 +1,3 @@
-.title {
-    margin-bottom: $spacing-5;
-
-    &.aria {
-        @include sr-only;
-    }
-}
-
 .filters {
     display: flex;
     align-items: center;

src/modules/InfiniteStories/ui/CategoriesFilters/CategoriesFilters.tsx

@@ -1,40 +1,21 @@
 import type { Category } from '@prezly/sdk/dist/types';
-import { FormattedMessage, type Locale, translations, useIntl } from '@prezly/theme-kit-nextjs';
+import { FormattedMessage, type Locale, translations } from '@prezly/theme-kit-nextjs';
 import classNames from 'classnames';
 import Link from 'next/link';
 import type { ReactNode } from 'react';
 
-import { PageTitle } from '@/components/PageTitle';
-
 import styles from './CategoriesFilters.module.scss';
 
 interface Props {
     activeCategory: Pick<Category, 'id'> | undefined;
     categories: Category[];
     className?: string;
-    hasStories: boolean;
     locale: Locale.Code;
 }
 
-export function CategoriesFilters({
-    activeCategory,
-    categories,
-    className,
-    hasStories,
-    locale,
-}: Props) {
-    const { formatMessage } = useIntl();
-
+export function CategoriesFilters({ activeCategory, categories, className, locale }: Props) {
     return (
         <div className={className}>
-            <PageTitle
-                className={classNames(styles.title, {
-                    // Hide the title for regular visitors if there's no stories,
-                    // but keep it for screen readers
-                    [styles.aria]: !hasStories,
-                })}
-                title={formatMessage(translations.homepage.latestStories)}
-            />
             {categories.length > 0 && (
                 <div className={styles.filters}>
                     <Filter isActive={activeCategory === undefined}>

src/modules/Story/RelatedStories/RelatedStories.tsx

@@ -1,17 +1,22 @@
 import { Elements } from '@prezly/content-renderer-react-js';
 import type { Story } from '@prezly/sdk';
+import { type Locale, translations } from '@prezly/theme-kit-nextjs';
 
+import { FormattedMessage } from '@/adapters/server';
 import { Divider } from '@/components/Divider';
 
 interface Props {
+    locale: Locale.Code;
     stories: Story[];
 }
 
-export function RelatedStories({ stories }: Props) {
+export function RelatedStories({ locale, stories }: Props) {
     return (
         <>
             <Divider />
-            <h2>Latest News</h2>
+            <h2>
+                <FormattedMessage for={translations.homepage.latestStories} locale={locale} />
+            </h2>
 
             <div>
                 {stories.map((story) => (