Updated names based on code review

Author: Erik Hanchett

mdx-components.tsx

@@ -1,7 +1,7 @@
 import * as React from 'react';
 import type { MDXComponents } from 'mdx/types';
 import ExportedImage from 'next-image-export-optimizer';
-import { Banner } from './src/components/Banner';
+import { AIBanner } from './src/components/AIBanner';
 import InlineFilter from './src/components/InlineFilter';
 import { YoutubeEmbed } from './src/components/YoutubeEmbed';
 import { Accordion } from './src/components/Accordion';
@@ -65,7 +65,7 @@ export function useMDXComponents(components: MDXComponents): MDXComponents {
     InlineFilter,
     MigrationAlert,
     YoutubeEmbed,
-    Banner,
+    AIBanner,
     Overview,
     ExternalLink,
     ExternalLinkButton,

src/components/Banner/Banner.tsx renamed to src/components/AIBanner/AIBanner.tsx

@@ -2,13 +2,8 @@ import { Flex, Message, IconsProvider, Text } from '@aws-amplify/ui-react';
 import { IconStar, IconChevron } from '../Icons';
 import { Button } from '@aws-amplify/ui-react';
 
-interface BannerProps {
-  url?: string;
-}
-
-export const Banner: React.FC<BannerProps> = ({
-  url = '/react/ai/set-up-ai/'
-}) => {
+export const AIBanner: React.FC = () => {
+  const URL = '/react/ai/set-up-ai/';
   return (
     <IconsProvider
       icons={{
@@ -31,10 +26,9 @@ export const Banner: React.FC<BannerProps> = ({
 
           <Button
             as="a"
-            href={url}
+            href={URL}
             size="small"
             gap="small"
-            target="_blank"
             colorTheme="overlay"
             rel="noopener noreferrer"
             className="message-banner__button"

src/components/Banner/__tests__/Banner.test.tsx renamed to src/components/AIBanner/__tests__/AIBanner.test.tsx

@@ -1,11 +1,11 @@
 import * as React from 'react';
 import { render, screen } from '@testing-library/react';
-import { Banner } from '../index';
+import { AIBanner } from '../index';
 
-describe('Banner', () => {
-  it('should render the Banner component', async () => {
+describe('AIBanner', () => {
+  it('should render the AIBanner component', async () => {
     const bannerText = 'Amplify AI kit is now generally available';
-    render(<Banner />);
+    render(<AIBanner />);
 
     const component = await screen.findByText(bannerText);
     expect(component).toBeInTheDocument();

src/components/AIBanner/index.tsx

@@ -0,0 +1 @@
+export { AIBanner } from './AIBanner';

src/components/Banner/index.tsx

@@ -29,7 +29,7 @@ import type { HeadingInterface } from '@/components/TableOfContents/TableOfConte
 import { Breadcrumbs } from '@/components/Breadcrumbs';
 import { debounce } from '@/utils/debounce';
 import '@docsearch/css';
-import { Banner } from '@/components/Banner';
+import { AIBanner } from '@/components/AIBanner';
 import { usePathWithoutHash } from '@/utils/usePathWithoutHash';
 import {
   NextPrevious,
@@ -72,7 +72,7 @@ export const Layout = ({
   const basePath = 'docs.amplify.aws';
   const metaUrl = url ? url : basePath + asPathWithNoHash;
   const pathname = router.pathname;
-  const shouldShowGen2Banner = asPathWithNoHash === '/';
+  const shouldShowAIBanner = asPathWithNoHash === '/';
   const isGen1 = asPathWithNoHash.split('/')[1] === 'gen1';
   const isContributor = asPathWithNoHash.split('/')[1] === 'contribute';
   const currentGlobalNavMenuItem = isContributor ? 'Contribute' : 'Docs';
@@ -274,7 +274,7 @@ export const Layout = ({
                         platform={currentPlatform}
                       />
                     ) : null}
-                    {shouldShowGen2Banner ? <Banner /> : null}
+                    {shouldShowAIBanner ? <AIBanner /> : null}
                     {useCustomTitle ? null : (
                       <Heading level={1}>{pageTitle}</Heading>
                     )}