diff --git a/app/components/__tests__/__snapshots__/colors.test.ts.snap b/app/components/__tests__/__snapshots__/colors.test.ts.snap index cad7d3cd..075a0cd2 100644 --- a/app/components/__tests__/__snapshots__/colors.test.ts.snap +++ b/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", diff --git a/app/components/base/HeroBanner.tsx b/app/components/base/HeroBanner.tsx index f3a62427..3ecec7f5 100644 --- a/app/components/base/HeroBanner.tsx +++ b/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 ( {topic} {description} + {searchBar && ( + + + + )} ); diff --git a/app/components/base/Search.tsx b/app/components/base/Search.tsx new file mode 100644 index 00000000..c74bcca6 --- /dev/null +++ b/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) => ( + + ) +)` + & .${tooltipClasses.arrow} { + color: ${PURPLE_090}; + } + + & .${tooltipClasses.tooltip} { + background-color: ${PURPLE_090}; + } +`; + +function Search() { + return ( + + + + + Ask AI or search... + + + + + + + ); +} + +export default Search; diff --git a/app/components/base/__tests__/HeroBanner.test.tsx b/app/components/base/__tests__/HeroBanner.test.tsx index b1d097ec..8af08586 100644 --- a/app/components/base/__tests__/HeroBanner.test.tsx +++ b/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( + + ) + .toJSON(); + expect(tree).toMatchSnapshot(); +}); diff --git a/app/components/base/__tests__/Search.test.tsx b/app/components/base/__tests__/Search.test.tsx new file mode 100644 index 00000000..d08925e4 --- /dev/null +++ b/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().toJSON(); + + expect(tree).toMatchSnapshot(); +}); diff --git a/app/components/base/__tests__/__snapshots__/HeroBanner.test.tsx.snap b/app/components/base/__tests__/__snapshots__/HeroBanner.test.tsx.snap index c4205e78..2e67fc6b 100644 --- a/app/components/base/__tests__/__snapshots__/HeroBanner.test.tsx.snap +++ b/app/components/base/__tests__/__snapshots__/HeroBanner.test.tsx.snap @@ -2,7 +2,7 @@ exports[`Default HeroBanner 1`] = `
Build with Dwolla
Documentation, tools and resources for developers to integrate Dwolla's account-to-account payments Platform.
`; + +exports[`HeroBanner - with SearchBar 1`] = ` +
+
+
+ Build with Dwolla +
+
+ Documentation, tools and resources for developers to integrate Dwolla's account-to-account payments Platform. +
+
+
+
+ + + +
+
+ Ask AI or search... +
+
+ +
+
+
+
+
+`; diff --git a/app/components/base/__tests__/__snapshots__/Search.test.tsx.snap b/app/components/base/__tests__/__snapshots__/Search.test.tsx.snap new file mode 100644 index 00000000..17473f85 --- /dev/null +++ b/app/components/base/__tests__/__snapshots__/Search.test.tsx.snap @@ -0,0 +1,48 @@ +// Jest Snapshot v1, https://goo.gl/fbAQLP + +exports[`Default Search 1`] = ` +
+
+ + + +
+
+ Ask AI or search... +
+
+ +
+
+`; diff --git a/app/components/colors.ts b/app/components/colors.ts index 3f9e41f5..2b98228d 100644 --- a/app/components/colors.ts +++ b/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 diff --git a/app/components/layout/SecondaryNavBar.tsx b/app/components/layout/SecondaryNavBar.tsx index d1645723..d4b622ad 100644 --- a/app/components/layout/SecondaryNavBar.tsx +++ b/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, }} > @@ -116,7 +117,7 @@ export default function SecondaryNavBar({ sx={{ font: ROBOTO, display: "block", - width: "10rem", + width: "11rem", marginBottom: "unset", borderRadius: "0px", color: diff --git a/app/components/layout/TopBar.tsx b/app/components/layout/TopBar.tsx index 34e412e7..e447b99b 100644 --- a/app/components/layout/TopBar.tsx +++ b/app/components/layout/TopBar.tsx @@ -4,7 +4,9 @@ import styled from "@emotion/styled"; import Link from "next/link"; import { FormControl } from "@mui/material"; import { useRouter } from "next/router"; +import SelectMui from "../base/SelectMui"; import Help from "../base/Help"; +import Search from "../base/Search"; import { LanguageContext } from "../util/Contexts"; import { ROBOTO } from "../typography"; import { breakDown, breakUp } from "../breakpoints"; @@ -12,7 +14,6 @@ import { GREY_4, GREY_5, GREY_9, PURPLE_075, WHITE_PRIMARY } from "../colors"; import dwollaLogo from "../../../assets/images/dwolla-logo-full-color.png"; import { ReactComponent as CloseIcon } from "../../../assets/images/component-icons/close.svg"; import ga from "../../modules/ga"; -import SelectMui from "../base/SelectMui"; export const TOP_BAR_HEIGHT = 66; @@ -68,6 +69,14 @@ const RightAlignWrapper = styled.div` } `; +const LeftAlignWrapper = styled.div` + padding-left: 30px; + margin-right: 20px; + @media (${breakDown("xs")}) { + display: none; + } +`; + export type HelpLinkProps = { text: string; href: string; @@ -186,6 +195,10 @@ export default function TopBar({ + + + + {helpLinks && } diff --git a/app/components/layout/__tests__/Layout.test.tsx b/app/components/layout/__tests__/Layout.test.tsx index e8133bbe..1e93974d 100644 --- a/app/components/layout/__tests__/Layout.test.tsx +++ b/app/components/layout/__tests__/Layout.test.tsx @@ -131,8 +131,8 @@ const PRODUCT_OPTIONS: SelectMuiOption[] = [ const NAV_ITEMS: SelectMuiOption[] = [ { - value: "productOverview", - label: "Product Overview", + value: "guidesAndConcepts", + label: "Guides And Concepts", href: (selectedProduct) => `/docs/${selectedProduct}`, // Dynamic href, changes based on selectedProduct Context }, { diff --git a/app/components/layout/__tests__/SecondaryNavBar.test.tsx b/app/components/layout/__tests__/SecondaryNavBar.test.tsx index 91a9c309..022e521a 100644 --- a/app/components/layout/__tests__/SecondaryNavBar.test.tsx +++ b/app/components/layout/__tests__/SecondaryNavBar.test.tsx @@ -21,8 +21,8 @@ const PRODUCT_OPTIONS: SelectMuiOption[] = [ const NAV_ITEMS: SelectMuiOption[] = [ { - value: "productOverview", - label: "Product Overview", + value: "guidesAndConcepts", + label: "Guides and Concepts", href: (selectedProduct) => `/docs/${selectedProduct}`, // Dynamic href, changes based on selectedProduct Context }, { diff --git a/app/components/layout/__tests__/SideNav.test.tsx b/app/components/layout/__tests__/SideNav.test.tsx index 364eb875..eb5166ad 100644 --- a/app/components/layout/__tests__/SideNav.test.tsx +++ b/app/components/layout/__tests__/SideNav.test.tsx @@ -86,8 +86,8 @@ const PRODUCT_OPTIONS: SelectMuiOption[] = [ const NAV_ITEMS: SelectMuiOption[] = [ { - value: "productOverview", - label: "Product Overview", + value: "guidesAndConcepts", + label: "Guides and Concepts", href: (selectedProduct) => `/docs/${selectedProduct}`, // Dynamic href, changes based on selectedProduct Context }, { diff --git a/app/components/layout/__tests__/__snapshots__/Layout.test.tsx.snap b/app/components/layout/__tests__/__snapshots__/Layout.test.tsx.snap index ad75168a..b2a4fef7 100644 --- a/app/components/layout/__tests__/__snapshots__/Layout.test.tsx.snap +++ b/app/components/layout/__tests__/__snapshots__/Layout.test.tsx.snap @@ -6,7 +6,7 @@ exports[`Layout 1`] = ` className="css-1h0fusp-TopBarWrapper e1ijxxr31" >
Docs
+
+
+ + + +
+
+ Ask AI or search... +
+
+ +
+
+
+
Docs
+
+
+ + + +
+
+ Ask AI or search... +
+
+ +
+
+
+
Get API Keys +
+ + + + + + + + + + + + + + + diff --git a/pages/_app.tsx b/pages/_app.tsx index ca7a9b7f..7bc577e7 100644 --- a/pages/_app.tsx +++ b/pages/_app.tsx @@ -168,8 +168,8 @@ const LANGUAGE_OPTIONS = [ const NAV_ITEMS: SelectMuiOption[] = [ { - value: "productOverview", - label: "Product Overview", + value: "guidesAndConcepts", + label: "Guides and Concepts", href: (selectedProduct) => `/docs/${selectedProduct}`, // Dynamic href, changes based on selectedProduct Context }, { diff --git a/pages/_document.tsx b/pages/_document.tsx index 6f60980d..773c1ba7 100644 --- a/pages/_document.tsx +++ b/pages/_document.tsx @@ -53,7 +53,11 @@ export default class MyDocument extends Document { src="https://widget.kapa.ai/kapa-widget.bundle.js" data-website-id="2e65478c-ab3c-4bf2-b997-db8a398de4a5" data-project-name="Dwolla" - data-search-mode-enabled + data-search-mode-enabled="true" + data-button-hide="true" + data-modal-override-open-id="search-ai-button" + data-modal-override-open-class="search-ai-button" + data-modal-open-on-command-k="true" data-project-color="#2d2d48" data-button-border-radius="10px" data-button-image-width="34" diff --git a/pages/docs/index.mdx b/pages/docs/index.mdx index 4ebf0954..a9e61503 100644 --- a/pages/docs/index.mdx +++ b/pages/docs/index.mdx @@ -151,6 +151,7 @@ export default function HomePage() { }} topic="Build with Dwolla" description="Documentation, tools and resources for developers to integrate with Dwolla's account-to-account payment solutions." + searchBar /> diff --git a/stories/base/HeroBanner.stories.tsx b/stories/base/HeroBanner.stories.tsx index ca8f923f..3bde15b1 100644 --- a/stories/base/HeroBanner.stories.tsx +++ b/stories/base/HeroBanner.stories.tsx @@ -22,6 +22,7 @@ storiesOf("base/HeroBanner", module).add("default", () => ( }} topic="Build with Dwolla" description="Documentation, tools and resources for developers to integrate Dwolla's account-to-account payments Platform." + searchBar /> )); diff --git a/stories/base/Search.stories.tsx b/stories/base/Search.stories.tsx new file mode 100644 index 00000000..373a5215 --- /dev/null +++ b/stories/base/Search.stories.tsx @@ -0,0 +1,19 @@ +import * as React from "react"; +import styled from "@emotion/styled"; +import { storiesOf } from "@storybook/react"; +import { breakDown } from "../../app/components/breakpoints"; +import Search from "../../app/components/base/Search"; + +const DivStyle = styled.div` + width: 1500px; + padding: 100px; + @media (${breakDown("xs")}) { + padding: unset; + } +`; + +storiesOf("base/Search", module).add("default", () => ( + + + +));