feat: link to the assistant

twilio-labs · Feb 21, 2024 · 1b937a8 · 1b937a8
1 parent 71a4ca9
commit 1b937a8
Show file tree

Hide file tree

Showing 9 changed files with 80 additions and 12 deletions.
diff --git a/packages/paste-website/src/components/ContactUsMenu.tsx b/packages/paste-website/src/components/ContactUsMenu.tsx
@@ -35,6 +35,13 @@ export const ContactUsMenu: React.FC = () => {
         <ProductSupportIcon decorative={false} title="Contact us" size="sizeIcon40" />
       </MenuButton>
       <Menu {...menu} aria-label="Contact us">
+        <MenuItem
+          {...menu}
+          href="/assistant"
+          onClick={() => handleClick("Ask Paste Assistant", "click-ask-assistant", "Ask Paste Assistant")}
+        >
+          Ask Paste Assistant
+        </MenuItem>
         <MenuItem
           {...menu}
           href="https://github.com/twilio-labs/paste/discussions"

diff --git a/packages/paste-website/src/components/homepage/HomeHero.tsx b/packages/paste-website/src/components/homepage/HomeHero.tsx
@@ -3,7 +3,7 @@ import { Badge } from "@twilio-paste/badge";
 import { Box } from "@twilio-paste/box";
 import { Column, Grid } from "@twilio-paste/grid";
 import { ArrowForwardIcon } from "@twilio-paste/icons/esm/ArrowForwardIcon";
-import { NewIcon } from "@twilio-paste/icons/esm/NewIcon";
+import { ArtificialIntelligenceIcon } from "@twilio-paste/icons/esm/ArtificialIntelligenceIcon";
 import { Text } from "@twilio-paste/text";
 import * as React from "react";
 
@@ -74,21 +74,21 @@ const HomeHero = (): JSX.Element => {
             <Column span={6}>
               <NewComponentBanner>
                 <Badge as="span" variant="new">
-                  <NewIcon decorative />
-                  New
+                  <ArtificialIntelligenceIcon decorative />
+                  Assistant
                 </Badge>
-                <NewComponentBannerText>The Page Header component is here!</NewComponentBannerText>
+                <NewComponentBannerText>New AI powered Paste Assistant!</NewComponentBannerText>
                 <NewComponentBannerLink
-                  href="/components/page-header"
+                  href="/assistant"
                   onClick={() =>
                     event({
                       category: "Hero",
                       action: "click-new-banner",
-                      label: "Page header announcement",
+                      label: "Assistant announcement",
                     })
                   }
                 >
-                  See more
+                  Try now
                 </NewComponentBannerLink>
               </NewComponentBanner>
               <Text

diff --git a/packages/paste-website/src/components/homepage/NewSection.tsx b/packages/paste-website/src/components/homepage/NewSection.tsx
@@ -17,8 +17,8 @@ const NewSection: React.FC = (): React.ReactElement => {
         rowGap="space40"
         element="NEW_SECTION"
       >
-        <WhatsNew showExternal href="#">
-          We&apos;re hiring a Product Designer! <Anchor href="#">Apply here</Anchor>
+        <WhatsNew showExternal href="/assistant">
+          Paste Assistant, AI powered Design System help, <Anchor href="/assistant">Try it now</Anchor>
         </WhatsNew>
         <WhatsNew href="#">
           Read about our <Anchor href="#">latest release</Anchor>

diff --git a/packages/paste-website/src/components/homepage/WhatsNew.tsx b/packages/paste-website/src/components/homepage/WhatsNew.tsx
@@ -34,7 +34,7 @@ const WhatsNew: React.FC<WhatsNewProps> = ({ showExternal, href, children }) =>
       <Heading as="h4" variant="heading40" marginBottom="space0">
         {children}
       </Heading>
-      <Button as="a" href={href} size="circle_small" variant="secondary">
+      <Button as="a" href={href} size="circle_small" variant="secondary" target={showExternal ? "_blank" : ""}>
         {showExternal ? (
           <LinkExternalIcon decorative={false} title="external link" />
         ) : (

diff --git a/packages/paste-website/src/components/site-wrapper-new/site-header/AssistantLink.tsx b/packages/paste-website/src/components/site-wrapper-new/site-header/AssistantLink.tsx
@@ -0,0 +1,28 @@
+import { Box } from "@twilio-paste/box";
+import { ArtificialIntelligenceIcon } from "@twilio-paste/icons/esm/ArtificialIntelligenceIcon";
+import Link from "next/link";
+import * as React from "react";
+
+export const AssistantLink: React.FC<React.PropsWithChildren> = () => {
+  return (
+    <Box
+      // @ts-expect-error rendering box as next link to style it
+      as={Link}
+      href="/assistant"
+      target="_blank"
+      display="flex"
+      flexDirection="row"
+      columnGap="space20"
+      alignItems="center"
+      color="colorText"
+      textDecoration="none"
+      outline="none"
+      borderRadius="borderRadius10"
+      _focus={{ boxShadow: "shadowFocus" }}
+      _hover={{ textDecoration: "underline" }}
+    >
+      <ArtificialIntelligenceIcon color="colorTextIcon" size="sizeIcon40" decorative={false} title="Paste assistant" />{" "}
+      Assistant
+    </Box>
+  );
+};
diff --git a/packages/paste-website/src/components/site-wrapper-new/site-header/index.tsx b/packages/paste-website/src/components/site-wrapper-new/site-header/index.tsx
@@ -13,6 +13,7 @@ import { FigmaButton } from "./FigmaButton";
 import { HamburgerToggle } from "./HamburgerToggle";
 import { SiteHeaderLogo } from "./SiteHeaderLogo";
 import { SiteHeaderSearch } from "./SiteHeaderSearch";
+import { AssistantLink } from "./AssistantLink";
 
 export const SiteHeader: React.FC<{
   sidebarMobileCollapsed: boolean;
@@ -44,6 +45,7 @@ export const SiteHeader: React.FC<{
           <Box data-cy="paste-docsearch-container" id="paste-docs-search-input">
             <SiteHeaderSearch />
           </Box>
+          <AssistantLink />
           <ContactUsMenu />
           <DarkModeToggle />
           <FigmaButton />

diff --git a/packages/paste-website/src/components/site-wrapper/site-header/AssistantLink.tsx b/packages/paste-website/src/components/site-wrapper/site-header/AssistantLink.tsx
@@ -0,0 +1,28 @@
+import { Box } from "@twilio-paste/box";
+import { ArtificialIntelligenceIcon } from "@twilio-paste/icons/esm/ArtificialIntelligenceIcon";
+import Link from "next/link";
+import * as React from "react";
+
+export const AssistantLink: React.FC<React.PropsWithChildren> = () => {
+  return (
+    <Box
+      // @ts-expect-error rendering box as next link to style it
+      as={Link}
+      href="/assistant"
+      target="_blank"
+      display="flex"
+      flexDirection="row"
+      columnGap="space20"
+      alignItems="center"
+      color="colorText"
+      textDecoration="none"
+      outline="none"
+      borderRadius="borderRadius10"
+      _focus={{ boxShadow: "shadowFocus" }}
+      _hover={{ textDecoration: "underline" }}
+    >
+      <ArtificialIntelligenceIcon color="colorTextIcon" size="sizeIcon40" decorative={false} title="Paste assistant" />{" "}
+      Assistant
+    </Box>
+  );
+};
diff --git a/packages/paste-website/src/components/site-wrapper/site-header/DarkModeToggle.tsx b/packages/paste-website/src/components/site-wrapper/site-header/DarkModeToggle.tsx
@@ -37,9 +37,9 @@ export const DarkModeToggle = (): JSX.Element => {
         }
       >
         {theme === "twilio" ? (
-          <LightModeIcon decorative size="sizeIcon40" />
+          <LightModeIcon decorative size="sizeIcon40" title="Switch the site theme" />
         ) : (
-          <DarkModeIcon decorative size="sizeIcon40" />
+          <DarkModeIcon decorative size="sizeIcon40" title="Switch the site theme" />
         )}
         <ScreenReaderOnly>Switch the site theme</ScreenReaderOnly>
       </MenuButton>

diff --git a/packages/paste-website/src/components/site-wrapper/site-header/index.tsx b/packages/paste-website/src/components/site-wrapper/site-header/index.tsx
@@ -1,5 +1,6 @@
 import { Box } from "@twilio-paste/box";
 import { Button } from "@twilio-paste/button";
+import { ArtificialIntelligenceIcon } from "@twilio-paste/icons/esm/ArtificialIntelligenceIcon";
 import { Topbar, TopbarActions } from "@twilio-paste/topbar";
 import { useWindowSize } from "@twilio-paste/utils";
 import * as React from "react";
@@ -8,6 +9,7 @@ import "react-github-button/assets/style.css";
 
 import { PASTE_DOCS_TOPBAR } from "../../../constants";
 import { ContactUsMenu } from "../../ContactUsMenu";
+import { AssistantLink } from "./AssistantLink";
 import { DarkModeToggle } from "./DarkModeToggle";
 import { FigmaButton } from "./FigmaButton";
 import { HamburgerToggle } from "./HamburgerToggle";
@@ -44,6 +46,7 @@ export const SiteHeader: React.FC<{
           <Box data-cy="paste-docsearch-container" id="paste-docs-search-input">
             <SiteHeaderSearch />
           </Box>
+          <AssistantLink />
           <DarkModeToggle />
           <ContactUsMenu />
           <FigmaButton />