Add id to CTA links and buttons

shared.ts

@@ -198,3 +198,11 @@ export interface Vendor {
 export type DeploymentOption = keyof typeof features;
 
 export const activeUsersAmount = '5500+';
+
+export const getSlugifiedText = (text?: string) =>
+    text?.replaceAll(' ', '-').toLowerCase();
+
+const getVendorLinkId = (vendorName?: string) => getSlugifiedText(vendorName);
+
+export const getVendorsLinkId = (vendorName1?: string, vendorName2?: string) =>
+    `${getVendorLinkId(vendorName1)}-vs-${getVendorLinkId(vendorName2)}`;

src/components/ArticleSidebar/index.tsx

@@ -14,12 +14,14 @@ interface ArticleSidebarProps {
     };
     tableOfContents: any;
     shareArticleSectionTitle?: string;
+    ctaButtonid: string;
 }
 
 const ArticleSidebar = ({
     article,
     tableOfContents,
     shareArticleSectionTitle,
+    ctaButtonid,
 }: ArticleSidebarProps) => {
     return (
         <div className={container}>
@@ -34,7 +36,7 @@ const ArticleSidebar = ({
                     <RenderToc items={tableOfContents} />
                 </div>
             ) : null}
-            <SidebarCta />
+            <SidebarCta ctaButtonid={ctaButtonid} />
         </div>
     );
 };

src/components/Bio/index.tsx

@@ -2,7 +2,7 @@ import { getImage } from 'gatsby-plugin-image';
 import { Link } from 'gatsby';
 import { Fragment } from 'react';
 import Avatar from '../Avatar';
-import { getAuthorPathBySlug } from '../../../shared';
+import { getAuthorPathBySlug, getSlugifiedText } from '../../../shared';
 import { container, avatarWrapper, authorName } from './styles.module.less';
 
 export interface BioProps {
@@ -35,6 +35,7 @@ const Bio = ({ authors }: BioProps) => {
 
                 const combined = (
                     <Link
+                        id={`${getSlugifiedText(name)}-blog-post-author-hero-section`}
                         to={getAuthorPathBySlug(slug)}
                         className={avatarWrapper}
                     >

src/components/BlogBanner/index.tsx

@@ -6,6 +6,7 @@ import { background, container, banner } from './styles.module.less';
 interface BlogBanner {
     title: ReactNode;
     button: {
+        id: string;
         title: string;
         href: string;
     };
@@ -17,7 +18,11 @@ const BlogBanner = ({ title, button }: BlogBanner) => {
             <StraightLinesBackground className={container}>
                 <div className={banner}>
                     {title}
-                    <OutboundLinkFilled href={button.href} target="_blank">
+                    <OutboundLinkFilled
+                        id={button.id}
+                        href={button.href}
+                        target="_blank"
+                    >
                         {button.title}
                     </OutboundLinkFilled>
                 </div>

src/components/BlogPopularArticles/index.tsx

@@ -1,6 +1,7 @@
 import { graphql, useStaticQuery } from 'gatsby';
 import Card from '../Grid/Card';
 import Grid from '../Grid';
+import { getSlugifiedText } from '../../../shared';
 
 export const PopularArticles = () => {
     const { popularArticles } = useStaticQuery(graphql`
@@ -68,7 +69,12 @@ export const PopularArticles = () => {
     return (
         <Grid>
             {popularArticles?.nodes?.map((article: any) => (
-                <Card key={article.id} data={article} footerTag="Article" />
+                <Card
+                    key={article.id}
+                    data={article}
+                    footerTag="Article"
+                    linkId={`${getSlugifiedText(article.title)}-popular-article/blog-post-page`}
+                />
             ))}
         </Grid>
     );

src/components/BlogPost/index.tsx

@@ -12,7 +12,11 @@ import ShareArticle from '../ShareArticle';
 import { ProcessedPost } from '../BlogPostProcessor';
 import BlogBanner from '../BlogBanner';
 import ArticleSidebar from '../ArticleSidebar';
-import { dashboardRegisterUrl, getAuthorPathBySlug } from '../../../shared';
+import {
+    dashboardRegisterUrl,
+    getAuthorPathBySlug,
+    getSlugifiedText,
+} from '../../../shared';
 import Avatar from '../../components/Avatar';
 import SocialLinks from '../../components/SocialLinks';
 import OutboundLinkFilled from '../../components/LinksAndButtons/OutboundLinkFilled';
@@ -172,13 +176,15 @@ const BlogPost = ({
                                         </h3>
                                     }
                                     button={{
+                                        id: 'build-a-pipeline-button/banner/blog-post-page',
                                         title: 'Build a Pipeline',
                                         href: dashboardRegisterUrl,
                                     }}
                                 />
                             ) : null}
                         </div>
                         <ArticleSidebar
+                            ctaButtonid="build-a-pipeline-button/sidebar/blog-post-page"
                             article={{
                                 title: post.title,
                                 slug: post.slug,
@@ -226,6 +232,7 @@ const BlogPost = ({
                                 <>
                                     <div key={index} className={authorInfo}>
                                         <Link
+                                            id={`${getSlugifiedText(author.name)}/about-section/blog-post-page`}
                                             to={getAuthorPathBySlug(
                                                 author?.slug
                                             )}
@@ -352,10 +359,14 @@ const BlogPost = ({
                             </div>
                         </div>
                         <div className={buildPipelineAndPricingButtons}>
-                            <OutboundLinkFilled href={dashboardRegisterUrl}>
+                            <OutboundLinkFilled
+                                id="build-a-pipeline-button/streaming-pipelines-section/blog-post-page"
+                                href={dashboardRegisterUrl}
+                            >
                                 Build a Pipeline
                             </OutboundLinkFilled>
                             <OutboundLinkOutlined
+                                id="see-pricing-button/streaming-pipelines-section/blog-post-page"
                                 href="https://estuary.dev/pricing/"
                                 className={pricingLink}
                             >

src/components/BlogPostCard/index.tsx

@@ -38,7 +38,11 @@ export const BlogPostCard = ({
     publishedAt,
     updatedAt,
 }: BlogPostCardProps) => (
-    <Link to={`/${slug}`} className={blogsPostCard}>
+    <Link
+        id={`${slug}/blog-post-card`}
+        to={`/${slug}`}
+        className={blogsPostCard}
+    >
         {hero ? (
             <GatsbyImage
                 alt={title}

src/components/Card/Link.tsx

@@ -3,19 +3,20 @@ import ChevronRightIcon from '../../svgs/chevron-right.svg';
 import OutboundLink from '../LinksAndButtons/OutboundLink';
 
 interface LinkProps {
+    id?: string;
     children: string;
     href: string;
     isExternal?: boolean;
 }
 
-const Link = ({ children, href, isExternal = false }: LinkProps) =>
+const Link = ({ id, children, href, isExternal = false }: LinkProps) =>
     isExternal ? (
-        <OutboundLink target="_blank" href={href}>
+        <OutboundLink id={id} target="_blank" href={href}>
             {children}
             <ChevronRightIcon color="var(--blue)" />
         </OutboundLink>
     ) : (
-        <InternalLink href={href}>
+        <InternalLink id={id} href={href}>
             {children}
             <ChevronRightIcon color="var(--blue)" />
         </InternalLink>

src/components/CompanyUpdatesPage/Hero/index.tsx

@@ -12,7 +12,9 @@ const Hero = () => {
                 <HeroSectionDetails
                     title={<span>STAY CURRENT WITH ESTUARY FLOW</span>}
                     description="Stay informed and make the most of Flow's powerful capabilities."
-                    ctaButtons={<HeroSectionActions />}
+                    ctaButtons={
+                        <HeroSectionActions pageId="company-updates-page" />
+                    }
                 />
                 <FlowDiagram
                     DiagramCardsClassName={diagramCardPositions}

src/components/CompanyUpdatesPage/ListOfUpdates/index.tsx

@@ -58,7 +58,10 @@ const ListOfUpdates = () => {
         <section className={defaultWrapperGrey}>
             <Container isVertical className={container}>
                 <h2>THE LATEST PRODUCT UPDATES</h2>
-                <VerticalList items={companyUpdatePostsWithPrefixedSlugs} />
+                <VerticalList
+                    items={companyUpdatePostsWithPrefixedSlugs}
+                    pageId="company-updates-page"
+                />
             </Container>
         </section>
     );

src/components/CompanyUpdatesPage/StayUpdated/index.tsx

@@ -20,6 +20,7 @@ const StayUpdated = () => {
                     <div className={linkedinCta}>
                         <p>Follow us on LinkedIn for frequent updates.</p>
                         <OutboundLinkOutlined
+                            id="linkedin-follow-button/stay-updated-section/company-updates-page"
                             target="_blank"
                             href={estuaryLinkedinUrl}
                             aria-label="Estuary Linkedin Link"

src/components/Connectors/index.tsx

@@ -4,7 +4,7 @@ import { GatsbyImage, StaticImage } from 'gatsby-plugin-image';
 import { useMemo, useState } from 'react';
 import { useLunr } from 'react-lunr';
 import clsx from 'clsx';
-import { ConnectorType } from '../../../shared';
+import { ConnectorType, getSlugifiedText } from '../../../shared';
 import FlowLogo from '../../svgs/flow-logo.svg';
 import { normalizeConnector } from '../../utils';
 import BigImageBackground from '../BackgroundImages/BigImageBackground';
@@ -66,7 +66,7 @@ const ConnectorCard = ({
     type,
     showType = false,
 }: ReturnType<typeof normalizeConnector> & { showType?: boolean }) => (
-    <Link to={`${slug}`}>
+    <Link id={`${getSlugifiedText(title)}-link/connectors-page`} to={`${slug}`}>
         <div className={connectorCard}>
             <div className={connectorCardTop}>
                 <GatsbyImage

src/components/DeploymentOptions/index.tsx

@@ -21,13 +21,15 @@ interface DeploymentOptionsProps {
         private: string[];
         byoc: string[];
     };
+    pageId: string;
 }
 
 const DeploymentOptions = ({
     title,
     buttonTitle,
     optionsDescription,
     keyFeatures,
+    pageId,
 }: DeploymentOptionsProps) => {
     const [selectedTab, setSelectedTab] = useState<DeploymentOption>('public');
 
@@ -64,7 +66,10 @@ const DeploymentOptions = ({
                         keyFeatures={keyFeatures?.byoc}
                     />
                 </TabContext>
-                <LinkFilled href="/deployment-options/">
+                <LinkFilled
+                    id={`button/deployment-options-section/${pageId}`}
+                    href="/deployment-options/"
+                >
                     {buttonTitle}
                 </LinkFilled>
             </div>

src/components/DeploymentOptionsPage/Hero/index.tsx

@@ -26,7 +26,9 @@ const Hero = () => {
                         requirements. This section provides a high-level
                         overview and comparison of Public Deployment, Private
                         Deployment, and BYOC options."
-                    ctaButtons={<HeroSectionActions />}
+                    ctaButtons={
+                        <HeroSectionActions pageId="deployment-options-page" />
+                    }
                 />
                 <div className={rightColumn}>
                     <StaticImage

src/components/DiagramConnectors/ConnectorLink/index.tsx

@@ -0,0 +1,30 @@
+import { Link } from 'gatsby';
+import { ReactNode } from 'react';
+import { connector, logoWrapper } from '../styles.module.less';
+
+interface ConnectorLinkProps {
+    connectorId: string;
+    to: string;
+    image: ReactNode;
+    connectorName: string;
+}
+
+const ConnectorLink = ({
+    connectorId,
+    to,
+    image,
+    connectorName,
+}: ConnectorLinkProps) => {
+    return (
+        <Link
+            id={`${connectorId}-connector-button/how-it-works-section/product-page`}
+            className={connector}
+            to={to}
+        >
+            <div className={logoWrapper}>{image}</div>
+            <span>{connectorName}</span>
+        </Link>
+    );
+};
+
+export default ConnectorLink;