From bb93a314d0006eb513f3c3c7d5690520e97fb00b Mon Sep 17 00:00:00 2001
From: Kyle Gach <kyle.gach@gmail.com>
Date: Fri, 22 Mar 2024 11:46:15 -0600
Subject: [PATCH] Add VTA callout to integrations catalog homepage

---
 .../IntegrationsCatalogHomeScreen.js          | 37 +++++++++++++++++--
 .../IntegrationsCatalogHomeScreen.stories.js  | 11 ++++++
 .../create-integrations-home-page.js          | 16 +++++++-
 3 files changed, 59 insertions(+), 5 deletions(-)

diff --git a/src/components/screens/IntegrationsCatalog/IntegrationsCatalogHomeScreen/IntegrationsCatalogHomeScreen.js b/src/components/screens/IntegrationsCatalog/IntegrationsCatalogHomeScreen/IntegrationsCatalogHomeScreen.js
index 2cdbbea1..80e558dc 100644
--- a/src/components/screens/IntegrationsCatalog/IntegrationsCatalogHomeScreen/IntegrationsCatalogHomeScreen.js
+++ b/src/components/screens/IntegrationsCatalog/IntegrationsCatalogHomeScreen/IntegrationsCatalogHomeScreen.js
@@ -1,16 +1,17 @@
 import React, { useState, useMemo } from 'react';
 import PropTypes from 'prop-types';
+import { rgba } from 'polished';
 import { styled } from '@storybook/theming';
 import { ButtonToggle, Icon, Link, styles, TagLink, TagList } from '@storybook/design-system';
 import useSiteMetadata from '../../../lib/useSiteMetadata';
 import { SocialGraph, ListHeadingContainer, ListHeading } from '../../../basics';
-import { AddonsGrid } from '../../../layout/integrations/addons';
+import { AddonItem, AddonsGrid } from '../../../layout/integrations/addons';
 import { RecipesList } from '../../../layout/integrations/recipes';
 import { IntegrationsLayout } from '../../../layout/integrations';
 import buildTagLinks from '../../../../util/build-tag-links';
 import GatsbyLink from '../../../basics/GatsbyLink';
 
-const { breakpoint, spacing, color, pageMargins, typography } = styles;
+const { background, breakpoint, spacing, color, pageMargins, typography } = styles;
 
 const PageHeaderContainer = styled.header`
   ${pageMargins}
@@ -90,6 +91,30 @@ const PopularTagsList = styled(TagList)`
   margin-bottom: calc(70px - 32px - 10px);
 `;
 
+const SectionHeader = styled.div`
+  display: flex;
+  align-items: center;
+  justify-content: space-between;
+  margin-bottom: ${spacing.padding.medium}px;
+`;
+
+const Title = styled.h3`
+  font-weight: ${typography.weight.bold};
+  font-size: ${typography.size.m2}px;
+  line-height: ${typography.size.m3}px;
+  color: ${color.darkest};
+`;
+
+const AddonCallout = styled(AddonItem)`
+  background-color: ${background.positive};
+  border-color: ${rgba(color.positive, 0.1)};
+  margin-bottom: 3rem;
+
+  &:hover {
+    border-color: ${rgba(color.positive, 0.3)};
+  }
+`;
+
 const PopularAddons = styled(AddonsGrid)`
   margin-bottom: 3rem;
 `;
@@ -99,7 +124,7 @@ const PopularRecipes = styled(RecipesList)`
 `;
 
 export const IntegrationsCatalogHomeScreen = ({
-  pageContext: { popularAddons = [], popularRecipes = [], trendingTags = [] },
+  pageContext: { popularAddons = [], popularRecipes = [], trendingTags = [], vta = {} },
 }) => {
   const { title, ogImageAddons, urls = {} } = useSiteMetadata();
   const { home } = urls;
@@ -123,6 +148,12 @@ export const IntegrationsCatalogHomeScreen = ({
             </TagLink>
           ))}
         />
+
+        <SectionHeader>
+          <Title>New to Storybook 8</Title>
+        </SectionHeader>
+        <AddonCallout key={vta.id} orientation="horizontal" {...vta} />
+
         <PopularAddons title="Popular addons" addonItems={popularAddons} />
 
         <section>
diff --git a/src/components/screens/IntegrationsCatalog/IntegrationsCatalogHomeScreen/IntegrationsCatalogHomeScreen.stories.js b/src/components/screens/IntegrationsCatalog/IntegrationsCatalogHomeScreen/IntegrationsCatalogHomeScreen.stories.js
index a509cacb..a2b03b3c 100644
--- a/src/components/screens/IntegrationsCatalog/IntegrationsCatalogHomeScreen/IntegrationsCatalogHomeScreen.stories.js
+++ b/src/components/screens/IntegrationsCatalog/IntegrationsCatalogHomeScreen/IntegrationsCatalogHomeScreen.stories.js
@@ -60,6 +60,17 @@ const Template = () => (
           icon: '☁️',
         },
       ],
+      vta: {
+        type: 'Addon',
+        id: 'addon_0',
+        appearance: 'official',
+        icon: 'https://github.com/chromaui/addon-visual-tests/assets/486540/9acf6f3f-eadb-4b9e-b934-c4b0f87d9430',
+        displayName: 'Visual Tests',
+        name: '@chromatic-com/storybook',
+        description: 'Catch unexpected visual changes & UI bugs in your stories',
+        weeklyDownloads: 65132,
+        authors: addonItemsData[0].authors,
+      },
     }}
   />
 );
diff --git a/src/util/create-integrations-pages/create-integrations-home-page.js b/src/util/create-integrations-pages/create-integrations-home-page.js
index b8d69d73..97ba3c47 100644
--- a/src/util/create-integrations-pages/create-integrations-home-page.js
+++ b/src/util/create-integrations-pages/create-integrations-home-page.js
@@ -36,12 +36,23 @@ function fetchIntegrationsHomePage(createPage, graphql) {
                   }
                 }
               }
+              vta: detail(name: "@chromatic-com/storybook") {
+                ${ADDON_FRAGMENT}
+                tags {
+                  name
+                  displayName
+                  description
+                  icon
+                }
+                repositoryUrl
+                npmUrl
+              }
             }
           }
         `
       )
     )
-    .then(validateResponse((data) => data.integrations.popular))
+    .then(validateResponse((data) => data.integrations.popular && data.integrations.vta))
     .then(({ data }) => data.integrations)
     .then((integrationsData) => {
       generateIntegrationHomePage(createPage, integrationsData);
@@ -71,7 +82,7 @@ function getNRandomTags(tags, numberOfTags) {
     .map(({ occurrence, ...tag }) => tag);
 }
 
-function generateIntegrationHomePage(createPage, { popular }) {
+function generateIntegrationHomePage(createPage, { popular, vta }) {
   const tagOccurrences = createTagOccurrenceHash(...popular.addons);
 
   createPage({
@@ -81,6 +92,7 @@ function generateIntegrationHomePage(createPage, { popular }) {
       popularAddons: popular.addons,
       popularRecipes: popular.recipes,
       trendingTags: getNRandomTags(tagOccurrences, 20),
+      vta,
     },
   });
   // eslint-disable-next-line