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

Jump to bottom

SGM-6970 - Add IDs to all buttons in the navbar #6989

Merged
merged 3 commits into from
Jun 13, 2024
Merged

SGM-6970 - Add IDs to all buttons in the navbar #6989

Show file tree
Hide file tree
Changes from 1 commit
Commits
Show all changes
3 commits
Select commit Hold shift + click to select a range
72b34b2
Add IDs to all buttons in the navbar
gitstart-sourcegraph Jun 6, 2024
622828e
Merge branch 'main' into SGM-6970
gitstart-sourcegraph Jun 13, 2024
02ebb9d
refactor: Resolves feedbback
gitstart-sourcegraph Jun 13, 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
Next Next commit
Add IDs to all buttons in the navbar
  • Loading branch information
@gitstart-sourcegraph
gitstart-sourcegraph committed Jun 6, 2024
commit 72b34b271c3633f83580a4d1e81a5e7604e5866b
29 changes: 19 additions & 10 deletions src/components/Layout/Header/Header.tsx
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -54,7 +54,7 @@ export const Header: FunctionComponent<Props> = ({ minimal, colorTheme, navRef }

return (
<Disclosure as="nav" className={classNames('fixed top-0 left-0 right-0 z-[1030]')} ref={navRef}>
{({ open }) => (
{({ open, close }) => (
<>
<Banner />
<HeaderContent
Expand All @@ -63,6 +63,7 @@ export const Header: FunctionComponent<Props> = ({ minimal, colorTheme, navRef }
open={open}
sticky={sticky}
source={source}
close={close}
/>
</>
)}
Expand Down Expand Up @@ -106,13 +107,14 @@ const HEADER_CONTENT_THEME_CLASS: Record<
},
}

const HeaderContent: FunctionComponent<Props & { open: boolean; sticky: boolean; source: string }> = ({
colorTheme,
open,
sticky,
source,
...props
}) => {
const HeaderContent: FunctionComponent<
Props & {
open: boolean
sticky: boolean
source: string
close: () => void
}
> = ({ colorTheme, open, sticky, source, close, ...props }) => {
const { openModal } = useAuthModal()

const handleOpenModal = (): void => openModal(source)
Expand All @@ -122,6 +124,7 @@ const HeaderContent: FunctionComponent<Props & { open: boolean; sticky: boolean;
const callToAction = (
<>
<MeetWithProductExpertButton
id="topnav"
buttonLocation={buttonLocation.nav}
buttonClassName={classNames(
'!font-semibold',
Expand All @@ -131,6 +134,7 @@ const HeaderContent: FunctionComponent<Props & { open: boolean; sticky: boolean;
requestInfo={true}
/>
<Link
id="topnav"
href="https://sourcegraph.com/sign-in?returnTo=/cody/manage"
title="Get started with Cody"
className={classNames(
Expand All @@ -144,6 +148,7 @@ const HeaderContent: FunctionComponent<Props & { open: boolean; sticky: boolean;
Login
</Link>
<button
id="topnav"
type="button"
className={classNames(
'btn min-w-fit px-6 lg:px-4',
Expand Down Expand Up @@ -191,6 +196,7 @@ const HeaderContent: FunctionComponent<Props & { open: boolean; sticky: boolean;
<div className="hidden flex-1 md:ml-4 lg:block">
<div className="flex space-x-3">
<NavItems
close={close}
classes={{
...classes,
item: classNames(
Expand Down Expand Up @@ -239,6 +245,7 @@ const HeaderContent: FunctionComponent<Props & { open: boolean; sticky: boolean;
>
<div className="space-y-1 px-2 pt-2 pb-3">
<NavItems
close={close}
linkElement={DisclosureButton}
classes={{
...classes,
Expand All @@ -253,5 +260,7 @@ const HeaderContent: FunctionComponent<Props & { open: boolean; sticky: boolean;
}

const DisclosureButton: React.FunctionComponent<
Pick<React.ComponentProps<typeof Link>, 'href' | 'className' | 'aria-current' | 'children'>
> = props => <Disclosure.Button as={Link} {...props} />
Pick<React.ComponentProps<typeof Link>, 'href' | 'className' | 'aria-current' | 'children'> & {
close: () => void
}
> = ({ close, ...props }) => <Link id="topnav" {...props} onClick={() => close()} />
52 changes: 35 additions & 17 deletions src/components/Layout/Header/NavItems.tsx
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -13,9 +13,11 @@ interface NavLink {
name: string
href: string
badgeText?: string
id?: string
}

interface NavSection {
id?: string
name: string
links: (NavLink | { divider: true })[]
badgeText?: string
Expand All @@ -25,6 +27,7 @@ type NavItem = NavLink | NavSection

const NAV_ITEMS: NavItem[] = [
{
id: 'topnav',
name: 'Products',
links: [
{
Expand All @@ -38,14 +41,17 @@ const NAV_ITEMS: NavItem[] = [
],
},
{
id: 'topnav',
name: 'Pricing',
href: '/pricing',
},
{
id: 'topnav',
name: 'Enterprise',
href: '/enterprise',
},
{
id: 'topnav',
name: 'Resources',
links: [
{
Expand Down Expand Up @@ -79,30 +85,36 @@ const NAV_ITEMS: NavItem[] = [
],
},
{
id: 'topnav',
name: 'Search public code',
href: 'https://sourcegraph.com/search',
},
]

interface Props {
linkElement?: React.ComponentType<
Pick<React.ComponentProps<typeof Link>, 'href' | 'className' | 'aria-current' | 'children'>
Pick<React.ComponentProps<typeof Link>, 'href' | 'className' | 'aria-current' | 'children'> & {
close: () => void
}
>
classes: Record<'item' | 'menu' | 'menuItem' | 'menuItemActive' | 'divider', string>
close: () => void
}

export const NavItems: React.FunctionComponent<Props> = ({ linkElement: LinkElement = Link, classes }) => {
export const NavItems: React.FunctionComponent<Props> = ({ close, linkElement: LinkElement = Link, classes }) => {
const router = useRouter()
const isCurrentLink = useCallback((href: string): boolean => router.asPath === href, [router.asPath])
return (
<>
{NAV_ITEMS.map(item =>
'href' in item ? (
<LinkElement
id={item.id ?? 'topnav'}
key={item.name}
href={item.href}
className={classNames('flex items-center', classes.item)}
aria-current={isCurrentLink(item.href) ? 'page' : undefined}
close={close}
>
{item.name}
{item.badgeText && (
Expand All @@ -111,6 +123,7 @@ export const NavItems: React.FunctionComponent<Props> = ({ linkElement: LinkElem
</LinkElement>
) : (
<NavItemMenu
id={item.id ?? 'topnav'}
key={item.name}
name={item.name}
links={item.links}
Expand All @@ -126,11 +139,13 @@ export const NavItems: React.FunctionComponent<Props> = ({ linkElement: LinkElem

const NavItemMenu: React.FunctionComponent<
NavSection & {
id: string
isCurrentLink: (href: string) => boolean
className: string
classes: Record<'menu' | 'menuItem' | 'menuItemActive' | 'divider', string>
}
> = ({
id,
name,
links,
isCurrentLink,
Expand All @@ -146,7 +161,7 @@ const NavItemMenu: React.FunctionComponent<
{({ open }) => (
<>
<div>
<Menu.Button className={classNames('flex items-center', className)}>
<Menu.Button id={id} className={classNames('flex items-center', className)}>
{name}
{open ? (
<ChevronUpIcon className="ml-[1px] w-xs" />
Expand Down Expand Up @@ -179,20 +194,23 @@ const NavItemMenu: React.FunctionComponent<
) : (
<Menu.Item key={link.name}>
{({ active }) => (
<Link
href={link.href}
className={classNames(
'block px-4 py-2 text-base',
menuItemClassName,
active && menuItemActiveClassName
)}
aria-current={isCurrentLink(link.href) ? 'page' : undefined}
>
{link.name}
{link.badgeText && (
<Badge className="ml-4" size="small" text={link.badgeText} />
)}
</Link>
<>
<Link
id={id}
href={link.href}
className={classNames(
'block px-4 py-2 text-base',
menuItemClassName,
active && menuItemActiveClassName
)}
aria-current={isCurrentLink(link.href) ? 'page' : undefined}
>
{link.name}
{link.badgeText && (
<Badge className="ml-4" size="small" text={link.badgeText} />
)}
</Link>
</>
)}
</Menu.Item>
)
Expand Down
3 changes: 3 additions & 0 deletions src/components/cta/MeetWithProductExpertButton.tsx
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -14,7 +14,9 @@ export const MeetWithProductExpertButton: React.FunctionComponent<{
requestInfo?: boolean
children?: string
buttonClassName?: string
id?: string
}> = ({
id,
buttonLocation,
dark = false,
chevron = false,
Expand All @@ -24,6 +26,7 @@ export const MeetWithProductExpertButton: React.FunctionComponent<{
children = requestInfo ? 'Contact sales' : 'Talk to an engineer',
}) => (
<Link
id={id}
href={requestInfo ? '/contact/request-info' : '/demo'}
className={classNames(
'btn inline-flex items-center whitespace-nowrap',
Expand Down
Loading
You are viewing a condensed version of this merge commit. You can view the full changes here.