Remove Copilot banner from footer (#58164)
This commit is contained in:
Kevin Heis
@@ -69,11 +69,6 @@ search:
|
||||
general_title: There was an error loading search results.
|
||||
ai_title: There was an error loading Copilot.
|
||||
description: You can still use this field to search our docs.
|
||||
cta:
|
||||
heading: Get quick answers!
|
||||
description: Ask Copilot your question.
|
||||
dismiss: Dismiss
|
||||
ask_copilot: Ask Copilot
|
||||
old_search:
|
||||
description: Enter a search term to find it in the GitHub Docs.
|
||||
placeholder: Search GitHub Docs
|
||||
|
||||
@@ -17,9 +17,9 @@
|
||||
}
|
||||
}
|
||||
|
||||
// Large is 4 columns
|
||||
// Large is 3 columns
|
||||
@media (min-width: 1280px) {
|
||||
.supportGrid {
|
||||
grid-template-columns: minmax(18rem, 1fr) repeat(3, 1fr);
|
||||
grid-template-columns: repeat(3, 1fr);
|
||||
}
|
||||
}
|
||||
|
||||
@@ -7,8 +7,6 @@ import { useMainContext } from '@/frame/components/context/MainContext'
|
||||
import { useVersion } from '@/versions/components/useVersion'
|
||||
import { useRouter } from 'next/router'
|
||||
import { useTranslation } from '@/languages/components/useTranslation'
|
||||
import { AISearchCTAPopup } from '@/search/components/input/AISearchCTAPopup'
|
||||
import { useSearchOverlayContext } from '@/search/components/context/SearchOverlayContext'
|
||||
|
||||
import styles from './SupportSection.module.scss'
|
||||
|
||||
@@ -17,7 +15,6 @@ export const SupportSection = () => {
|
||||
const { relativePath, enterpriseServerReleases } = useMainContext()
|
||||
const router = useRouter()
|
||||
const { t } = useTranslation('footer')
|
||||
const { setIsSearchOpen } = useSearchOverlayContext()
|
||||
|
||||
const isDeprecated =
|
||||
enterpriseServerReleases.isOldestReleaseDeprecated &&
|
||||
@@ -29,7 +26,6 @@ export const SupportSection = () => {
|
||||
const showSurvey = !isDeprecated && !isSitePolicyDocs
|
||||
const showContribution = !isDeprecated && !isEarlyAccess && isEnglish
|
||||
const showSupport = true
|
||||
const showCopilotCTA = !isDeprecated && !isEarlyAccess && isEnglish
|
||||
|
||||
return (
|
||||
<section className="container-xl mt-lg-8 mt-6 px-3 px-md-6 no-print mx-auto">
|
||||
@@ -42,14 +38,6 @@ export const SupportSection = () => {
|
||||
styles.supportGrid /* ← adds the grid rules */,
|
||||
)}
|
||||
>
|
||||
{showCopilotCTA && (
|
||||
<AISearchCTAPopup
|
||||
isOpen
|
||||
setIsSearchOpen={setIsSearchOpen}
|
||||
isDismissible={false}
|
||||
bannerType="footer"
|
||||
/>
|
||||
)}
|
||||
{showSurvey && <Survey />}
|
||||
{showContribution && <Contribution />}
|
||||
{showSupport && <Support />}
|
||||
|
||||
@@ -1,199 +0,0 @@
|
||||
import { useEffect, useRef } from 'react'
|
||||
import { Text, Button, Heading, Popover, useOnEscapePress, Box } from '@primer/react'
|
||||
import { focusTrap } from '@primer/behaviors'
|
||||
|
||||
import { useTranslation } from '@/languages/components/useTranslation'
|
||||
import { useMaxWidthBreakpoint, useMinWidthBreakpoint } from '../hooks/useBreakpoint'
|
||||
import { useCTAPopoverContext } from '@/frame/components/context/CTAContext'
|
||||
import { sendEvent } from '@/events/components/events'
|
||||
import { EventType } from '@/events/types'
|
||||
|
||||
let previouslyFocused: HTMLElement | null = null
|
||||
|
||||
export function AISearchCTAPopup({
|
||||
isOpen,
|
||||
dismiss,
|
||||
setIsSearchOpen,
|
||||
isDismissible = true,
|
||||
bannerType = 'popover',
|
||||
instanceId = '',
|
||||
}: {
|
||||
isOpen: boolean
|
||||
dismiss?: () => void
|
||||
setIsSearchOpen: (value: boolean) => void
|
||||
isDismissible?: boolean
|
||||
bannerType?: 'popover' | 'footer'
|
||||
instanceId?: string
|
||||
}) {
|
||||
const { t } = useTranslation('search')
|
||||
const { permanentDismiss } = useCTAPopoverContext()
|
||||
const isLargeOrUp = useMinWidthBreakpoint('large')
|
||||
const isTooSmallForCTA = useMaxWidthBreakpoint('293px')
|
||||
let overlayRef = useRef<HTMLDivElement>(null)
|
||||
let dismissButtonRef = useRef<HTMLButtonElement>(null)
|
||||
|
||||
// Analytics helper functions
|
||||
const sendCTAAnalytics = (variation: 'dismiss' | 'ask_copilot') => {
|
||||
const experimentName =
|
||||
bannerType === 'footer' ? 'copilot_footer_banner' : 'copilot_popover_banner'
|
||||
sendEvent({
|
||||
type: EventType.experiment,
|
||||
experiment_name: experimentName,
|
||||
experiment_variation: variation,
|
||||
experiment_success: true,
|
||||
})
|
||||
}
|
||||
|
||||
const openSearch = () => {
|
||||
// Send analytics before taking action
|
||||
sendCTAAnalytics('ask_copilot')
|
||||
setIsSearchOpen(true)
|
||||
// They engaged with the CTA, so let's not show this popup for them anymore
|
||||
permanentDismiss()
|
||||
}
|
||||
|
||||
// For a11y, focus trap the CTA and allow it to be closed with Escape
|
||||
useEffect(() => {
|
||||
if (isTooSmallForCTA) {
|
||||
return
|
||||
}
|
||||
if (isOpen && overlayRef.current && dismissButtonRef.current) {
|
||||
focusTrap(overlayRef.current, dismissButtonRef.current)
|
||||
previouslyFocused = document.activeElement as HTMLElement | null
|
||||
}
|
||||
}, [isOpen, isTooSmallForCTA])
|
||||
|
||||
const onDismiss = () => {
|
||||
if (isTooSmallForCTA) {
|
||||
return
|
||||
}
|
||||
// Send analytics before taking action
|
||||
sendCTAAnalytics('dismiss')
|
||||
if (previouslyFocused) {
|
||||
previouslyFocused.focus()
|
||||
}
|
||||
if (dismiss) {
|
||||
dismiss()
|
||||
}
|
||||
}
|
||||
|
||||
useOnEscapePress(onDismiss)
|
||||
|
||||
if (isTooSmallForCTA) {
|
||||
return null
|
||||
}
|
||||
|
||||
const innerContent = (
|
||||
<>
|
||||
<img
|
||||
src="/assets/images/search/copilot-action.png"
|
||||
width="100%"
|
||||
alt="The Copilot Icon in front of an explosion of color."
|
||||
/>
|
||||
<Heading
|
||||
as="h2"
|
||||
id={`ai-search-cta-heading-${bannerType}${instanceId ? `-${instanceId}` : ''}`}
|
||||
sx={{
|
||||
fontSize: '16px',
|
||||
fontWeight: 'bold',
|
||||
marginTop: '12px',
|
||||
}}
|
||||
>
|
||||
{t('search.cta.heading')}
|
||||
</Heading>
|
||||
<Text
|
||||
id="ai-search-cta-description"
|
||||
sx={{
|
||||
display: 'block',
|
||||
fontSize: '15px',
|
||||
marginTop: '12px',
|
||||
}}
|
||||
>
|
||||
{t('search.cta.description')}
|
||||
</Text>
|
||||
<Box
|
||||
sx={{
|
||||
display: 'flex',
|
||||
flexDirection: 'row',
|
||||
}}
|
||||
>
|
||||
{isDismissible ? (
|
||||
<Button
|
||||
ref={dismissButtonRef}
|
||||
aria-label="Dismiss"
|
||||
sx={{
|
||||
marginTop: '16px',
|
||||
fontWeight: 'bold',
|
||||
}}
|
||||
onClick={onDismiss}
|
||||
>
|
||||
{t('search.cta.dismiss')}
|
||||
</Button>
|
||||
) : null}
|
||||
<Button
|
||||
variant="primary"
|
||||
sx={
|
||||
isDismissible
|
||||
? {
|
||||
marginTop: '16px',
|
||||
marginLeft: '8px',
|
||||
fontWeight: 'bold',
|
||||
}
|
||||
: {
|
||||
marginTop: '16px',
|
||||
width: '100%',
|
||||
}
|
||||
}
|
||||
onClick={openSearch}
|
||||
>
|
||||
{t('search.cta.ask_copilot')}
|
||||
</Button>
|
||||
</Box>
|
||||
</>
|
||||
)
|
||||
|
||||
// If not dismissible, it's not being used as a popover
|
||||
if (!isDismissible) {
|
||||
return (
|
||||
<Box
|
||||
sx={{
|
||||
position: 'relative',
|
||||
width: '270px',
|
||||
border: '1px solid var(--borderColor-default, var(--color-border-default, #d0d7de))',
|
||||
borderRadius: '6px',
|
||||
padding: '16px',
|
||||
}}
|
||||
>
|
||||
{innerContent}
|
||||
</Box>
|
||||
)
|
||||
}
|
||||
|
||||
return (
|
||||
<Popover
|
||||
ref={overlayRef}
|
||||
role="alertdialog"
|
||||
aria-modal="true"
|
||||
aria-labelledby={`ai-search-cta-heading-${bannerType}${instanceId ? `-${instanceId}` : ''}`}
|
||||
aria-describedby="ai-search-cta-description"
|
||||
open={isOpen}
|
||||
caret={isLargeOrUp ? 'top' : 'top-right'}
|
||||
sx={{
|
||||
top: '55px',
|
||||
boxShadow: '0 4px 12px rgba(0, 0, 0, 0.1)',
|
||||
width: '270px',
|
||||
// When in mobile (< large) the search bar collapses to a button on the RHS of the screen
|
||||
// To align the popover with the button we need to move it to the left
|
||||
marginLeft: isLargeOrUp ? 0 : -235,
|
||||
}}
|
||||
>
|
||||
<Popover.Content
|
||||
sx={{
|
||||
width: '270px',
|
||||
}}
|
||||
>
|
||||
{innerContent}
|
||||
</Popover.Content>
|
||||
</Popover>
|
||||
)
|
||||
}
|
||||
Reference in New Issue
Block a user