Skip to content
New issue

Have a question about this project? Sign up for a free GitHub account to open an issue and contact its maintainers and the community.

Sign up for GitHub

By clicking “Sign up for GitHub”, you agree to our terms of service and privacy statement. We’ll occasionally send you account related emails.

Already on GitHub? Sign in to your account

Dev 1613 center search bar #627

Merged
merged 3 commits into from
Sep 26, 2024
Merged

Dev 1613 center search bar #627

Show file tree
Hide file tree
Changes from all commits
Commits
Show all changes
3 commits
Select commit Hold shift + click to select a range
79495a9
Center Searchbar + remove from homepage
ShreyaThapa Sep 26, 2024
fcf0893
Remove unused class, update width of logowrapper
ShreyaThapa Sep 26, 2024
fbf8972
Update snapshots
ShreyaThapa Sep 26, 2024
File filter

Filter by extension

Filter by extension
Conversations
Failed to load comments.
Loading
Jump to
Jump to file
Failed to load files.
Loading
Diff view
Diff view
5 changes: 1 addition & 4 deletions app/components/base/HeroBanner.tsx
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -101,10 +101,7 @@ function HeroBanner({ heroImage, topic, description, searchBar }: Props) {
<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"
>
<SearchWrapper>
<Search />
</SearchWrapper>
)}
Expand Down
2 changes: 1 addition & 1 deletion app/components/base/__tests__/__snapshots__/HeroBanner.test.tsx.snap
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -55,7 +55,7 @@ exports[`HeroBanner - with SearchBar 1`] = `
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"
className="css-1piufyn-SearchWrapper e38sxrk0"
>
<div
aria-label="ask ai or search with cmd + k"
Expand Down
142 changes: 82 additions & 60 deletions app/components/layout/TopBar.tsx
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -20,6 +20,7 @@ export const TOP_BAR_HEIGHT = 66;
const Container = styled.div`
display: flex;
align-items: center;
justify-content: space-between;
height: ${TOP_BAR_HEIGHT}px;
background-color: ${WHITE_PRIMARY};
padding: 0 20px;
Expand All @@ -29,6 +30,16 @@ const Container = styled.div`
}
`;

const LogoWrapper = styled.div`
width: 23%;
@media (${breakDown("md")}) {
width: 30%;
}
@media (${breakDown("sm")}) {
width: unset;
}
`;

const StyledLogo = styled.img`
width: 9rem;

Expand Down Expand Up @@ -56,51 +67,36 @@ const StyledEm = styled.em`
const RightAlignWrapper = styled.div`
display: flex;
align-items: center;

margin-left: auto;
padding-right: 20px;

div {
margin-right: 10px;
}
justify-content: flex-end;
gap: 20px;

@media (${breakDown("md")}) {
display: none;
}
`;

const LeftAlignWrapper = styled.div`
padding-left: 30px;
margin-right: 20px;
@media (${breakDown("xs")}) {
const SearchBoxWrapper = styled.div`
width: 30%;
@media (${breakDown("sm")}) {
display: none;
}
`;

export type HelpLinkProps = {
text: string;
href: string;
};

export type TopBarButtonProps = {
text: string;
link: {
href: string;
external: boolean;
};
};

export type TopBarProps = {
helpLinks?: HelpLinkProps[];
button: TopBarButtonProps;
sidebarToggled?: boolean;
setSidebarToggled?: Function;
};
const HamburgerWrapper = styled.div`
width: 25%;
display: flex;
justify-content: flex-end;
@media (${breakUp("lg")}) {
display: none;
}
@media (${breakDown("xs")}) {
width: unset;
}
`;

const Hamburger = styled.div`
width: 15px;
height: 12px;
margin-left: auto;
cursor: pointer;
background-image: linear-gradient(
to bottom,
Expand Down Expand Up @@ -162,6 +158,26 @@ const StyledCloseIcon = styled.div`
}
`;

export type HelpLinkProps = {
text: string;
href: string;
};

export type TopBarButtonProps = {
text: string;
link: {
href: string;
external: boolean;
};
};

export type TopBarProps = {
helpLinks?: HelpLinkProps[];
button: TopBarButtonProps;
sidebarToggled?: boolean;
setSidebarToggled?: Function;
};

export default function TopBar({
helpLinks,
button,
Expand All @@ -188,16 +204,20 @@ export default function TopBar({

return (
<Container>
<Link href="/docs">
<a style={{ textDecoration: "none" }}>
<StyledLogo src={dwollaLogo} alt="" />
<StyledEm> Docs</StyledEm>
</a>
</Link>

<LeftAlignWrapper>
<Search />
</LeftAlignWrapper>
<LogoWrapper>
<Link href="/docs">
<a style={{ textDecoration: "none" }}>
<StyledLogo src={dwollaLogo} alt="" />
<StyledEm> Docs</StyledEm>
</a>
</Link>
</LogoWrapper>

{!isHomepage && (
<SearchBoxWrapper>
<Search />
</SearchBoxWrapper>
)}

<RightAlignWrapper>
{helpLinks && <Help links={helpLinks} />}
Expand All @@ -219,30 +239,32 @@ export default function TopBar({
href={button.link.href}
target={button.link.external ? "_blank" : undefined}
color="secondary"
size="medium"
size="small"
>
{button.text}
</Button>
</RightAlignWrapper>

{!isHomepage &&
(sidebarToggled === false ? (
<Hamburger
tabIndex={0}
aria-labelledby="Open menu"
onClick={showSidebar}
onKeyDown={(keyPress) => onHamburgerKeydown(keyPress)}
/>
) : (
<StyledCloseIcon
tabIndex={0}
aria-labelledby="Close menu"
onClick={hideSidebar}
onKeyDown={(keyPress) => onCloseIconKeydown(keyPress)}
>
<CloseIcon width={14} />
</StyledCloseIcon>
))}
<HamburgerWrapper>
{!isHomepage &&
(sidebarToggled === false ? (
<Hamburger
tabIndex={0}
aria-labelledby="Open menu"
onClick={showSidebar}
onKeyDown={(keyPress) => onHamburgerKeydown(keyPress)}
/>
) : (
<StyledCloseIcon
tabIndex={0}
aria-labelledby="Close menu"
onClick={hideSidebar}
onKeyDown={(keyPress) => onCloseIconKeydown(keyPress)}
>
<CloseIcon width={14} />
</StyledCloseIcon>
))}
</HamburgerWrapper>
</Container>
);
}
68 changes: 38 additions & 30 deletions app/components/layout/__tests__/__snapshots__/Layout.test.tsx.snap
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -6,32 +6,36 @@ exports[`Layout 1`] = `
className="css-1h0fusp-TopBarWrapper e1ijxxr31"
>
<div
className="css-25nmj1-Container e1psldpd6"
className="css-w75zwu-Container e1psldpd8"
>
<a
href="/docs"
onClick={[Function]}
onMouseEnter={[Function]}
onTouchStart={[Function]}
style={
{
"textDecoration": "none",
}
}
<div
className="css-1uajtfj-LogoWrapper e1psldpd7"
>
<img
alt=""
className="css-3jqt57-StyledLogo e1psldpd5"
src="test-image-stub"
/>
<em
className="css-11c4vbk-StyledEm e1psldpd4"
<a
href="/docs"
onClick={[Function]}
onMouseEnter={[Function]}
onTouchStart={[Function]}
style={
{
"textDecoration": "none",
}
}
>
Docs
</em>
</a>
<img
alt=""
className="css-3jqt57-StyledLogo e1psldpd6"
src="test-image-stub"
/>
<em
className="css-11c4vbk-StyledEm e1psldpd5"
>
Docs
</em>
</a>
</div>
<div
className="css-5vssss-LeftAlignWrapper e1psldpd2"
className="css-1e6cy8h-SearchBoxWrapper e1psldpd3"
>
<div
aria-label="ask ai or search with cmd + k"
Expand Down Expand Up @@ -79,7 +83,7 @@ exports[`Layout 1`] = `
</div>
</div>
<div
className="css-j4xy9d-RightAlignWrapper e1psldpd3"
className="css-1yxmvl4-RightAlignWrapper e1psldpd4"
>
<div
className="MuiFormControl-root css-dru9rs-MuiFormControl-root"
Expand Down Expand Up @@ -150,7 +154,7 @@ exports[`Layout 1`] = `
</div>
</div>
<a
className="MuiButtonBase-root MuiButton-root MuiButton-contained MuiButton-containedSecondary MuiButton-sizeMedium MuiButton-containedSizeMedium MuiButton-root MuiButton-contained MuiButton-containedSecondary MuiButton-sizeMedium MuiButton-containedSizeMedium css-zcbmsk-MuiButtonBase-root-MuiButton-root"
className="MuiButtonBase-root MuiButton-root MuiButton-contained MuiButton-containedSecondary MuiButton-sizeSmall MuiButton-containedSizeSmall MuiButton-root MuiButton-contained MuiButton-containedSecondary MuiButton-sizeSmall MuiButton-containedSizeSmall css-9aa3p4-MuiButtonBase-root-MuiButton-root"
href="https://accounts-sandbox.dwolla.com/login"
onBlur={[Function]}
onContextMenu={[Function]}
Expand All @@ -174,12 +178,16 @@ exports[`Layout 1`] = `
</a>
</div>
<div
aria-labelledby="Open menu"
className="css-i37cwj-Hamburger e1psldpd1"
onClick={[Function]}
onKeyDown={[Function]}
tabIndex={0}
/>
className="css-18bs7kq-HamburgerWrapper e1psldpd2"
>
<div
aria-labelledby="Open menu"
className="css-od0h45-Hamburger e1psldpd1"
onClick={[Function]}
onKeyDown={[Function]}
tabIndex={0}
/>
</div>
</div>
<header
className="MuiPaper-root MuiPaper-elevation MuiPaper-elevation4 MuiAppBar-root MuiAppBar-colorPrimary MuiAppBar-positionSticky css-x5finb-MuiPaper-root-MuiAppBar-root"
Expand Down
Loading
Loading