Merge pull request #1305 from prezly/feature/dev-20578-we-are-showing-a-stories-empty-state-when-there-are-no

[DEV-20578] Fix - Hide "Latest stories" and empty state in hubs

Author: kudlajz

src/modules/InfiniteHubStories/InfiniteHubStories.tsx

@@ -95,10 +95,12 @@ export function InfiniteHubStories({
                     );
                 })}
             </div>
-            <PageTitle
-                className={styles.title}
-                title={formatMessage(translations.homepage.latestStories)}
-            />
+            {data.length > 0 && (
+                <PageTitle
+                    className={styles.title}
+                    title={formatMessage(translations.homepage.latestStories)}
+                />
+            )}
             <StoriesList
                 fullWidthFeaturedStory={false}
                 isCategoryList
@@ -109,6 +111,7 @@ export function InfiniteHubStories({
                 showSubtitle={showSubtitle}
                 stories={data}
                 storyCardVariant={storyCardVariant}
+                withEmptyState={false}
             />
 
             {!done && (

src/modules/InfiniteStories/StoriesList.tsx

@@ -30,6 +30,7 @@ type Props = {
     showSubtitle: boolean;
     stories: ListStory[];
     storyCardVariant: ThemeSettings['story_card_variant'];
+    withEmptyState?: boolean;
 };
 
 export function StoriesList({
@@ -44,6 +45,7 @@ export function StoriesList({
     showSubtitle,
     stories,
     storyCardVariant,
+    withEmptyState = true,
 }: Props) {
     const locale = useLocale();
     const hasCategories = categories.length > 0;
@@ -64,7 +66,7 @@ export function StoriesList({
 
     const getStoryCardSize = useStoryCardLayout(isCategoryList);
 
-    if (!highlightedStories.length && !restStories.length) {
+    if (withEmptyState && !highlightedStories.length && !restStories.length) {
         return (
             <div className={styles.noStories}>
                 <Illustration />