Added new badge and message for AI kit (#8110)

Co-authored-by: dindjarinjs <[email protected]>

Author: ErikCH

mdx-components.tsx

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

src/components/AIBanner/AIBanner.tsx

@@ -0,0 +1,43 @@
+import { Flex, Message, IconsProvider, Text } from '@aws-amplify/ui-react';
+import { IconStar, IconChevron } from '../Icons';
+import { Button } from '@aws-amplify/ui-react';
+
+export const AIBanner: React.FC = () => {
+  const URL = '/react/ai/set-up-ai/';
+  return (
+    <IconsProvider
+      icons={{
+        message: {
+          info: <IconStar />
+        }
+      }}
+    >
+      <Message className="message-banner" colorTheme="info">
+        <Flex className="message-banner__inner">
+          <Flex direction="column" gap="xxs">
+            <Text as="span" className="message-banner__heading">
+              Amplify AI kit is now generally available
+            </Text>
+            <Text className="message-banner__content">
+              Create fullstack AI-powered apps with TypeScript, no prior
+              experience in cloud architecture or AI needed.
+            </Text>
+          </Flex>
+
+          <Button
+            as="a"
+            href={URL}
+            size="small"
+            gap="small"
+            colorTheme="overlay"
+            rel="noopener noreferrer"
+            className="message-banner__button"
+          >
+            Get started
+            <IconChevron className="icon-rotate-270" fontSize=".875em" />
+          </Button>
+        </Flex>
+      </Message>
+    </IconsProvider>
+  );
+};

src/components/AIBanner/__tests__/AIBanner.test.tsx

@@ -0,0 +1,13 @@
+import * as React from 'react';
+import { render, screen } from '@testing-library/react';
+import { AIBanner } from '../index';
+
+describe('AIBanner', () => {
+  it('should render the AIBanner component', async () => {
+    const bannerText = 'Amplify AI kit is now generally available';
+    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/Layout/Layout.tsx

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

src/components/Menu/MenuItem.tsx

@@ -1,6 +1,6 @@
 import { usePathWithoutHash } from '@/utils/usePathWithoutHash';
 import { ReactElement, useContext, useEffect, useState, useMemo } from 'react';
-import { Link as AmplifyUILink, Flex } from '@aws-amplify/ui-react';
+import { Link as AmplifyUILink, Flex, Badge } from '@aws-amplify/ui-react';
 import { IconExternalLink, IconChevron } from '@/components/Icons';
 import Link from 'next/link';
 import { JS_PLATFORMS, Platform, JSPlatform } from '@/data/platforms';
@@ -200,6 +200,7 @@ export function MenuItem({
             className={`menu__list-item__link__inner ${listItemLinkInnerStyle}`}
           >
             {pageNode.title}
+            {pageNode.isNew && <Badge backgroundColor="purple.20">New</Badge>}
             {children && hasVisibleChildren && level !== Levels.Category && (
               <IconChevron className={open ? '' : 'icon-rotate-90-reverse'} />
             )}

src/directory/directory.d.ts

@@ -57,4 +57,9 @@ export type PageNode = {
    * This is being used for categories like Cli - Legacy and SDK
    */
   hideChildrenOnBase?: boolean;
+
+  /**
+   * This flag indicates that the item is new and will display a "new" badge
+   */
+  isNew?: boolean;
 };

src/pages/[platform]/ai/index.mdx

@@ -4,6 +4,7 @@ import { getCustomStaticPath } from '@/utils/getCustomStaticPath';
 export const meta = {
   title: 'AI kit',
   description: 'The quickest way for fullstack developers to build web apps with AI capabilities such as chat, conversational search, and summarization',
+  isNew: true,
   route: '/[platform]/ai',
   platforms: [
     'angular',

src/styles/banner.scss

@@ -0,0 +1,22 @@
+.message-banner {
+  align-items: start;
+  /* Specificity to override Amplify UI color theme */
+  &.amplify-message--info {
+    border: 1px solid var(--amplify-colors-purple-20);
+    background-color: var(--amplify-colors-purple-10);
+    @include darkMode {
+      background-color: var(--amplify-colors-purple-20);
+    }
+  }
+  .amplify-message__icon {
+    color: var(--amplify-colors-purple-80);
+  }
+  &__inner {
+    display: flex;
+    flex-direction: column;
+    align-items: flex-start;
+  }
+  &__heading {
+    font-weight: 700;
+  }
+}

src/styles/styles.scss

@@ -9,6 +9,7 @@
 @import './accordion.scss';
 @import './block-switcher.scss';
 @import './breadcrumbs.scss';
+@import './banner.scss';
 @import './callout.scss';
 @import './code.scss';
 @import './color-switcher.scss';