[DEV-3581] Hide empty overview subsections (#1997)

* Add variant background to StartInfo

* Add alternate bg color for overview's subsections

* Add changeset

Author: Sebastiano-Bertolin

.changeset/sixty-shrimps-show.md

@@ -0,0 +1,5 @@
+---
+"nextjs-website": minor
+---
+
+Hide empty overview's subsections and add logic to alternate background colors of overview's subsections

apps/nextjs-website/src/app/[locale]/[productSlug]/overview/page.tsx

@@ -139,6 +139,24 @@ const OverviewPage = async (props: ProductParams) => {
     product,
   } = await getOverview(params.productSlug);
 
+  // Calculate which sections will be shown to determine alternating backgrounds
+  const sectionsToShow = [
+    startInfo ? 'startInfo' : null,
+    product?.hasTutorialListPage && tutorials ? 'tutorials' : null,
+    product?.hasUseCaseListPage && useCases ? 'useCases' : null,
+    whatsNew ? 'whatsNew' : null,
+    product?.hasGuideListPage && postIntegration ? 'postIntegration' : null,
+    relatedLinks ? 'relatedLinks' : null,
+  ].filter(Boolean) as string[];
+
+  // Create a map of section name to background variant, alternating starting with 'lightGrey'
+  const backgroundVariants = Object.fromEntries(
+    sectionsToShow.map((section, index) => [
+      section,
+      index % 2 === 0 ? 'lightGrey' : 'white',
+    ])
+  ) as Record<string, 'white' | 'lightGrey'>;
+
   const tutorialsListToShow = tutorials?.list
     ?.filter((tutorial) => tutorial.showInOverview)
     .slice(0, MAX_NUM_TUTORIALS_IN_OVERVIEW);
@@ -197,27 +215,30 @@ const OverviewPage = async (props: ProductParams) => {
           title={startInfo.title}
           cta={startInfo.cta}
           cards={startInfo.cards}
+          backgroundVariant={backgroundVariants['startInfo']}
         />
       )}
       {product?.hasTutorialListPage &&
-      tutorials &&
-      !tutorials.showCardsLayout ? (
-        <OverviewItemList
-          title={tutorials.title}
-          ctaLabelKey={'overview.tutorial.ctaLabel'}
-          subtitle={tutorials.subtitle}
-          itemPath={{
-            path: `/${params.locale}/${product.slug}/tutorials`,
-            name: 'tutorials',
-          }}
-          items={[...(mappedTutorials || [])]}
-        />
-      ) : (
-        <TutorialsSectionPreviewCardsLayout
-          title={tutorials?.title || ''}
-          tutorials={tutorials?.list || []}
-        />
-      )}
+        tutorials &&
+        (!tutorials.showCardsLayout ? (
+          <OverviewItemList
+            title={tutorials.title}
+            ctaLabelKey={'overview.tutorial.ctaLabel'}
+            subtitle={tutorials.subtitle}
+            itemPath={{
+              path: `/${params.locale}/${product.slug}/tutorials`,
+              name: 'tutorials',
+            }}
+            items={[...(mappedTutorials || [])]}
+            backgroundVariant={backgroundVariants['tutorials']}
+          />
+        ) : (
+          <TutorialsSectionPreviewCardsLayout
+            title={tutorials?.title || ''}
+            tutorials={tutorials?.list || []}
+            backgroundVariant={backgroundVariants['tutorials']}
+          />
+        ))}
       {product?.hasUseCaseListPage && useCases && (
         <OverviewItemList
           title={useCases.title}
@@ -228,16 +249,17 @@ const OverviewPage = async (props: ProductParams) => {
             name: 'useCases',
           }}
           items={[...(mappedUseCases || [])]}
+          backgroundVariant={backgroundVariants['useCases']}
         />
       )}
       {whatsNew && (
         <NewsShowcase
-          marginTop={15}
           title={whatsNew.title}
           subtitle={whatsNew.subtitle}
           link={whatsNew.link}
           items={[...whatsNew.items]}
-          backgroundVariant='lightGrey'
+          paddingTop={14}
+          backgroundVariant={backgroundVariants['whatsNew']}
         />
       )}
       {product?.hasGuideListPage && postIntegration && (
@@ -255,14 +277,14 @@ const OverviewPage = async (props: ProductParams) => {
             postIntegration.serviceModels && [...postIntegration.serviceModels]
           }
           guides={postIntegration.guides}
-          backgroundVariant={whatsNew ? 'white' : 'lightGrey'}
+          backgroundVariant={backgroundVariants['postIntegration']}
         />
       )}
       {relatedLinks && (
         <RelatedLinks
           title={relatedLinks.title}
           links={relatedLinks.links}
-          backgroundVariant={whatsNew ? 'lightGrey' : 'white'}
+          backgroundVariant={backgroundVariants['relatedLinks']}
         />
       )}
     </ProductLayout>

apps/nextjs-website/src/components/organisms/NewsShowcase/NewsShowcase.tsx

@@ -32,6 +32,7 @@ export type NewsShowcaseProps = {
   readonly marginTop?: number;
   readonly newsMarginTop?: number;
   readonly items: readonly NewsShowcaseItemProps[];
+  readonly paddingTop?: number;
   readonly backgroundVariant?: 'white' | 'lightGrey';
 };
 
@@ -43,6 +44,7 @@ const NewsShowcase = ({
   items,
   newsMarginTop = 2,
   backgroundVariant = 'white',
+  paddingTop,
 }: NewsShowcaseProps) => {
   const theme = useTheme();
   const t = useTranslations();
@@ -67,6 +69,7 @@ const NewsShowcase = ({
     <Box
       sx={{
         marginTop: marginTop,
+        paddingTop: paddingTop,
         backgroundColor: backgroundColor[backgroundVariant],
       }}
     >

apps/nextjs-website/src/components/organisms/OverviewItemList/OverviewItemList.tsx

@@ -14,6 +14,7 @@ type OverviewItemListProps = {
   ctaLabelKey: string;
   itemPath: Path;
   items: NewsShowcaseItemProps[];
+  backgroundVariant?: 'white' | 'lightGrey';
 };
 
 const OverviewItemList = ({
@@ -23,6 +24,7 @@ const OverviewItemList = ({
   ctaLabelKey,
   items,
   itemPath,
+  backgroundVariant,
 }: OverviewItemListProps) => {
   const t = useTranslations();
 
@@ -42,6 +44,7 @@ const OverviewItemList = ({
           text: t(item.link.text),
         },
       }))}
+      backgroundVariant={backgroundVariant}
     />
   );
 };

apps/nextjs-website/src/components/organisms/StartInfo/StartInfo.tsx

@@ -25,20 +25,24 @@ type StartInfoProps = {
     href: string;
     iconName?: string;
   };
+  backgroundVariant?: 'white' | 'lightGrey';
 };
 
 const StartInfo = ({
   title,
   cards,
   cta,
   cardVariant = 'contained',
+  backgroundVariant = 'white',
 }: StartInfoProps) => {
   const { palette } = useTheme();
   const t = useTranslations();
+  const backgroundColor =
+    backgroundVariant === 'white' ? palette.background.paper : palette.grey[50];
 
   return (
     <>
-      <Box pt={10} pb={6} sx={{ backgroundColor: palette.grey[50] }}>
+      <Box pt={10} pb={6} sx={{ backgroundColor: backgroundColor }}>
         <Box mb={2}>
           <SectionTitle
             title={title || t('overview.startInfo.title')}
@@ -67,7 +71,7 @@ const StartInfo = ({
         />
       </Box>
       {cta && (
-        <Box py={2} sx={{ backgroundColor: palette.grey[50] }}>
+        <Box py={2} sx={{ backgroundColor: backgroundColor }}>
           <Stack
             spacing={2}
             direction={{ md: 'row', xs: 'column' }}

apps/nextjs-website/src/components/organisms/TutorialsSectionPreviewCardsLayout/TutorialsSectionPreviewCardsLayout.tsx

@@ -9,18 +9,24 @@ import { useTranslations } from 'next-intl';
 type TutorialsSectionPreviewCardsLayoutProps = {
   title: string;
   tutorials: readonly Tutorial[];
+  backgroundVariant?: 'white' | 'lightGrey';
 };
 
 const TutorialsSectionPreviewCardsLayout = ({
   title,
   tutorials,
+  backgroundVariant = 'white',
 }: TutorialsSectionPreviewCardsLayoutProps) => {
   const t = useTranslations();
   const theme = useTheme();
+  const backgroundColor =
+    backgroundVariant === 'white'
+      ? theme.palette.background.paper
+      : theme.palette.grey[50];
   return (
     <Box
       sx={{
-        backgroundColor: theme.palette.grey[50],
+        backgroundColor: backgroundColor,
       }}
     >
       <Box sx={{ paddingTop: '80px', paddingBottom: '48px' }}>