Dev 1613

app/components/__tests__/__snapshots__/colors.test.ts.snap

@@ -65,6 +65,7 @@ exports[`colors 1`] = `
   "PURPLE_054": "rgba(31, 31, 50, 0.54)",
   "PURPLE_075": "rgba(31, 31, 50, 0.75)",
   "PURPLE_087": "rgba(31, 31, 50, 0.87)",
+  "PURPLE_090": "rgba(31, 31, 50, 0.90)",
   "PURPLE_100": "rgba(31, 31, 50, 1)",
   "PURPLE_DARK": "#2d2d47",
   "PURPLE_DARKER": "#242438",

app/components/base/HeroBanner.tsx

@@ -1,5 +1,6 @@
 import styled from "@emotion/styled";
 import React from "react";
+import Search from "../base/Search";
 import { POPPINS, ROBOTO } from "../typography";
 import { WHITE_070, WHITE_PRIMARY } from "../colors";
 import { breakDown } from "../breakpoints";
@@ -68,6 +69,12 @@ const StyledDescription = styled.div`
   }
 `;
 
+const SearchWrapper = styled.div`
+  display: inline-block;
+  width: 100%;
+  vertical-align: middle;
+`;
+
 type ImageProps = {
   src: string;
   alt: string;
@@ -77,9 +84,10 @@ type Props = {
   heroImage: ImageProps;
   topic: string;
   description: string;
+  searchBar?: boolean;
 };
 
-function HeroBanner({ heroImage, topic, description }: Props) {
+function HeroBanner({ heroImage, topic, description, searchBar }: Props) {
   return (
     <StyledBanner
       style={{
@@ -92,6 +100,14 @@ function HeroBanner({ heroImage, topic, description }: Props) {
       <BannerContentWrap>
         <StyledTopic>{topic}</StyledTopic>
         <StyledDescription>{description}</StyledDescription>
+        {searchBar && (
+          <SearchWrapper
+            // Kapa.ai uses class "search-ai-button" to bind the widget to the corresponding element
+            className="search-ai-button"
+          >
+            <Search />
+          </SearchWrapper>
+        )}
       </BannerContentWrap>
     </StyledBanner>
   );

app/components/base/Search.tsx

@@ -0,0 +1,97 @@
+import React from "react";
+import styled from "@emotion/styled";
+import SearchIcon from "@mui/icons-material/Search";
+import Tooltip, { TooltipProps, tooltipClasses } from "@mui/material/Tooltip";
+import {
+  PURPLE_023,
+  PURPLE_054,
+  PURPLE_090,
+  PURPLE_100,
+  WHITE_PRIMARY,
+} from "../colors";
+import { ReactComponent as AskAiIcon } from "../../../assets/images/component-icons/ask-ai-icon.svg";
+
+const SearchWrapper = styled.div`
+  position: relative;
+  background-color: ${WHITE_PRIMARY};
+  border: 1px solid ${PURPLE_023};
+  border-radius: 4px;
+  margin-left: 0;
+  width: 100%;
+  display: flex;
+  align-items: center;
+  cursor: pointer;
+  :hover {
+    border-color: ${PURPLE_100};
+  }
+`;
+
+const SearchIconWrapper = styled.div`
+  padding: 0 10px;
+  pointer-events: none;
+  display: flex;
+  align-items: center;
+  justify-content: center;
+`;
+
+const AskAiIconWrapper = styled.div`
+  height: 100%;
+  display: flex;
+  align-items: center;
+  justify-content: center;
+  padding: 5px;
+`;
+
+const StyledSearchText = styled.div`
+  color: ${PURPLE_054};
+  margin-right: 3em;
+  flex-grow: 2;
+
+  .MuiInputBase-input {
+    border-radius: 5px;
+    width: 100%;
+  }
+`;
+
+const BootstrapTooltip = styled(
+  ({ className, children, ...props }: TooltipProps) => (
+    <Tooltip
+      {...props}
+      arrow
+      classes={{ popper: className }}
+      children={children}
+    />
+  )
+)`
+  & .${tooltipClasses.arrow} {
+    color: ${PURPLE_090};
+  }
+
+  & .${tooltipClasses.tooltip} {
+    background-color: ${PURPLE_090};
+  }
+`;
+
+function Search() {
+  return (
+    <SearchWrapper
+      //Kapa.ai uses id "search-ai-button" to bind the widget to the corresponding element
+      id="search-ai-button"
+      tabIndex={0}
+      role="button"
+      aria-label="ask ai or search with cmd + k"
+    >
+      <SearchIconWrapper>
+        <SearchIcon sx={{ color: PURPLE_054 }} />
+      </SearchIconWrapper>
+      <StyledSearchText>Ask AI or search...</StyledSearchText>
+      <BootstrapTooltip title="Ask AI">
+        <AskAiIconWrapper>
+          <AskAiIcon width={33} />
+        </AskAiIconWrapper>
+      </BootstrapTooltip>
+    </SearchWrapper>
+  );
+}
+
+export default Search;

app/components/base/__tests__/HeroBanner.test.tsx

@@ -18,3 +18,20 @@ test("Default HeroBanner", () => {
 
   expect(tree).toMatchSnapshot();
 });
+
+test("HeroBanner - with SearchBar", () => {
+  const tree = renderer
+    .create(
+      <HeroBanner
+        heroImage={{
+          src: hero,
+          alt: "Some alt text",
+        }}
+        topic="Build with Dwolla"
+        description="Documentation, tools and resources for developers to integrate Dwolla's account-to-account payments Platform."
+        searchBar
+      />
+    )
+    .toJSON();
+  expect(tree).toMatchSnapshot();
+});

app/components/base/__tests__/Search.test.tsx

@@ -0,0 +1,8 @@
+import renderer from "react-test-renderer";
+import Search from "../Search";
+
+test("Default Search", () => {
+  const tree = renderer.create(<Search />).toJSON();
+
+  expect(tree).toMatchSnapshot();
+});

app/components/base/__tests__/__snapshots__/HeroBanner.test.tsx.snap

@@ -2,7 +2,7 @@
 
 exports[`Default HeroBanner 1`] = `
 <div
-  className="css-s65f2z-StyledBanner e38sxrk3"
+  className="css-s65f2z-StyledBanner e38sxrk4"
   style={
     {
       "backgroundImage": "url(test-image-stub)",
@@ -13,18 +13,95 @@ exports[`Default HeroBanner 1`] = `
   }
 >
   <div
-    className="css-l0a4nd-BannerContentWrap e38sxrk2"
+    className="css-l0a4nd-BannerContentWrap e38sxrk3"
   >
     <div
-      className="css-1ubtxoh-StyledTopic e38sxrk1"
+      className="css-1ubtxoh-StyledTopic e38sxrk2"
     >
       Build with Dwolla
     </div>
     <div
-      className="css-1oef8wh-StyledDescription e38sxrk0"
+      className="css-1oef8wh-StyledDescription e38sxrk1"
     >
       Documentation, tools and resources for developers to integrate Dwolla's account-to-account payments Platform.
     </div>
   </div>
 </div>
 `;
+
+exports[`HeroBanner - with SearchBar 1`] = `
+<div
+  className="css-s65f2z-StyledBanner e38sxrk4"
+  style={
+    {
+      "backgroundImage": "url(test-image-stub)",
+      "backgroundPosition": "center",
+      "backgroundRepeat": "no-repeat",
+      "backgroundSize": "cover",
+    }
+  }
+>
+  <div
+    className="css-l0a4nd-BannerContentWrap e38sxrk3"
+  >
+    <div
+      className="css-1ubtxoh-StyledTopic e38sxrk2"
+    >
+      Build with Dwolla
+    </div>
+    <div
+      className="css-1oef8wh-StyledDescription e38sxrk1"
+    >
+      Documentation, tools and resources for developers to integrate Dwolla's account-to-account payments Platform.
+    </div>
+    <div
+      className="search-ai-button css-1piufyn-SearchWrapper e38sxrk0"
+    >
+      <div
+        aria-label="ask ai or search with cmd + k"
+        className="css-1j6700x-SearchWrapper e1stdte24"
+        id="search-ai-button"
+        role="button"
+        tabIndex={0}
+      >
+        <div
+          className="css-fwa6yu-SearchIconWrapper e1stdte23"
+        >
+          <svg
+            aria-hidden={true}
+            className="MuiSvgIcon-root MuiSvgIcon-fontSizeMedium css-d09jsa-MuiSvgIcon-root"
+            data-testid="SearchIcon"
+            focusable="false"
+            viewBox="0 0 24 24"
+          >
+            <path
+              d="M15.5 14h-.79l-.28-.27C15.41 12.59 16 11.11 16 9.5 16 5.91 13.09 3 9.5 3S3 5.91 3 9.5 5.91 16 9.5 16c1.61 0 3.09-.59 4.23-1.57l.27.28v.79l5 4.99L20.49 19l-4.99-5zm-6 0C7.01 14 5 11.99 5 9.5S7.01 5 9.5 5 14 7.01 14 9.5 11.99 14 9.5 14z"
+            />
+          </svg>
+        </div>
+        <div
+          className="css-1vkr7di-StyledSearchText e1stdte21"
+        >
+          Ask AI or search...
+        </div>
+        <div
+          aria-label="Ask AI"
+          aria-labelledby={null}
+          className=" css-1mvdm01-AskAiIconWrapper e1stdte22"
+          data-mui-internal-clone-element={true}
+          onBlur={[Function]}
+          onFocus={[Function]}
+          onMouseLeave={[Function]}
+          onMouseOver={[Function]}
+          onTouchEnd={[Function]}
+          onTouchStart={[Function]}
+        >
+          <svg
+            width={33}
+          />
+        </div>
+      </div>
+    </div>
+  </div>
+</div>
+`;

app/components/base/__tests__/__snapshots__/Search.test.tsx.snap

@@ -0,0 +1,48 @@
+// Jest Snapshot v1, https://goo.gl/fbAQLP
+
+exports[`Default Search 1`] = `
+<div
+  aria-label="ask ai or search with cmd + k"
+  className="css-1j6700x-SearchWrapper e1stdte24"
+  id="search-ai-button"
+  role="button"
+  tabIndex={0}
+>
+  <div
+    className="css-fwa6yu-SearchIconWrapper e1stdte23"
+  >
+    <svg
+      aria-hidden={true}
+      className="MuiSvgIcon-root MuiSvgIcon-fontSizeMedium css-d09jsa-MuiSvgIcon-root"
+      data-testid="SearchIcon"
+      focusable="false"
+      viewBox="0 0 24 24"
+    >
+      <path
+        d="M15.5 14h-.79l-.28-.27C15.41 12.59 16 11.11 16 9.5 16 5.91 13.09 3 9.5 3S3 5.91 3 9.5 5.91 16 9.5 16c1.61 0 3.09-.59 4.23-1.57l.27.28v.79l5 4.99L20.49 19l-4.99-5zm-6 0C7.01 14 5 11.99 5 9.5S7.01 5 9.5 5 14 7.01 14 9.5 11.99 14 9.5 14z"
+      />
+    </svg>
+  </div>
+  <div
+    className="css-1vkr7di-StyledSearchText e1stdte21"
+  >
+    Ask AI or search...
+  </div>
+  <div
+    aria-label="Ask AI"
+    aria-labelledby={null}
+    className=" css-1mvdm01-AskAiIconWrapper e1stdte22"
+    data-mui-internal-clone-element={true}
+    onBlur={[Function]}
+    onFocus={[Function]}
+    onMouseLeave={[Function]}
+    onMouseOver={[Function]}
+    onTouchEnd={[Function]}
+    onTouchStart={[Function]}
+  >
+    <svg
+      width={33}
+    />
+  </div>
+</div>
+`;

app/components/colors.ts

@@ -84,6 +84,8 @@ export const PURPLE_023 = "rgba(31, 31, 50, 0.23)";
 export const PURPLE_054 = "rgba(31, 31, 50, 0.54)";
 export const PURPLE_075 = "rgba(31, 31, 50, 0.75)";
 export const PURPLE_087 = "rgba(31, 31, 50, 0.87)";
+export const PURPLE_090 = "rgba(31, 31, 50, 0.90)";
+
 export const PURPLE_100 = "rgba(31, 31, 50, 1)";
 
 // White RGBA shades

app/components/layout/SecondaryNavBar.tsx

@@ -16,6 +16,7 @@ import { breakDown } from "../breakpoints";
 export const NAV_BAR_HEIGHT = 70;
 
 const ProductSelectorWrapper = styled.div`
+  align-self: center;
   margin: 0 10px 0 0;
   padding: 0 20px 0 0;
   width: 400px; // Value of LEFT_SIDEBAR_WIDTH - 20px from ../../../app/components/layout/Layout.tsx
@@ -71,7 +72,7 @@ export default function SecondaryNavBar({
         bgcolor: WHITE_PRIMARY,
         boxShadow: "none",
         borderBottom: `1px solid ${PURPLE_023}`,
-        height: NAV_BAR_HEIGHT,
+        minHeight: NAV_BAR_HEIGHT,
         display: { xs: "none", sm: "none", md: "none", lg: "flex" },
       }}
     >
@@ -82,7 +83,7 @@ export default function SecondaryNavBar({
               flexGrow: 1,
               display: { xs: "none", md: "flex" },
               justifyContent: "space-between",
-              height: NAV_BAR_HEIGHT,
+              minHeight: NAV_BAR_HEIGHT,
             }}
           >
             <ProductSelectorWrapper>
@@ -116,7 +117,7 @@ export default function SecondaryNavBar({
                     sx={{
                       font: ROBOTO,
                       display: "block",
-                      width: "10rem",
+                      width: "11rem",
                       marginBottom: "unset",
                       borderRadius: "0px",
                       color: