feat(auth): give the public pages' signup strip the sticky banner's auth stack

packages/shared/src/components/auth/AuthOptionsInner.tsx

@@ -146,6 +146,7 @@ function AuthOptionsInner({
   isOnboardingFunnel,
   compact,
   signupStyle,
+  inlineProviders,
   preferGithub,
   autoTriggerProvider,
   socialProviderScopes,
@@ -871,6 +872,7 @@ function AuthOptionsInner({
             hideSignupDisclaimer={hideSignupDisclaimer}
             compact={compact}
             signupStyle={signupStyle}
+            inlineProviders={inlineProviders}
             preferGithub={preferGithub}
             onAuthOpenLogged={() => setHasLoggedAuthOpen(true)}
           />

packages/shared/src/components/auth/ExploreSignupStrip.spec.tsx

@@ -3,8 +3,11 @@ import { QueryClient } from '@tanstack/react-query';
 import { render, screen } from '@testing-library/react';
 import userEvent from '@testing-library/user-event';
 import { TestBootProvider } from '../../../__tests__/helpers/boot';
-import { ExploreSignupStrip } from './ExploreSignupStrip';
-import { hijackingCoverStripMinHeight } from './HijackingCoverStrip';
+import {
+  ExploreSignupStrip,
+  exploreSignupStripMinHeight,
+} from './ExploreSignupStrip';
+import { AuthDisplay } from './common';
 import { useViewSize } from '../../hooks/useViewSize';
 import { AuthTriggers } from '../../lib/auth';
 import { LogEvent, TargetId, TargetType } from '../../lib/log';
@@ -14,6 +17,45 @@ jest.mock('../../hooks/useViewSize', () => ({
   useViewSize: jest.fn(),
 }));
 
+jest.mock('./AuthOptions', () => ({
+  __esModule: true,
+  default: ({
+    onAuthStateUpdate,
+  }: {
+    onAuthStateUpdate?: (props: Record<string, unknown>) => void;
+  }) => {
+    const { AuthDisplay: Display } = jest.requireActual('./common');
+
+    return (
+      <div>
+        <button
+          type="button"
+          onClick={() =>
+            onAuthStateUpdate?.({
+              isAuthenticating: true,
+              defaultDisplay: Display.Registration,
+            })
+          }
+        >
+          Continue with email
+        </button>
+        <button
+          type="button"
+          onClick={() =>
+            onAuthStateUpdate?.({
+              isAuthenticating: true,
+              isLoginFlow: true,
+              email: '',
+            })
+          }
+        >
+          Log in
+        </button>
+      </div>
+    );
+  },
+}));
+
 const mockUseViewSize = useViewSize as jest.Mock;
 const logEvent = jest.fn();
 const showLogin = jest.fn();
@@ -73,9 +115,9 @@ describe('ExploreSignupStrip', () => {
     const { container } = renderComponent({ isAuthReady: false });
 
     expect(screen.queryByRole('heading')).not.toBeInTheDocument();
-    expect(container.firstElementChild?.firstElementChild).toHaveClass(
-      hijackingCoverStripMinHeight,
-    );
+    expect(
+      container.firstElementChild?.firstElementChild?.firstElementChild,
+    ).toHaveClass(exploreSignupStripMinHeight);
     expect(logEvent).not.toHaveBeenCalled();
   });
 
@@ -108,20 +150,24 @@ describe('ExploreSignupStrip', () => {
     expect(logEvent).toHaveBeenCalledWith(impression);
   });
 
-  it('should open signup inline and log the click', async () => {
+  it('should hand the email signup off to the modal', async () => {
     renderComponent();
 
-    await userEvent.click(screen.getByRole('button', { name: /Sign up/ }));
+    await userEvent.click(
+      screen.getByRole('button', { name: 'Continue with email' }),
+    );
 
-    expect(logEvent).toHaveBeenCalledWith({
-      event_name: LogEvent.Click,
-      target_type: TargetType.SignupButton,
-      target_id: TargetId.ExploreStrip,
-    });
     expect(showLogin).toHaveBeenCalledWith({
       trigger: AuthTriggers.Onboarding,
-      options: { isLogin: false },
+      options: {
+        isLogin: false,
+        defaultDisplay: AuthDisplay.Registration,
+        formValues: undefined,
+      },
     });
+    expect(logEvent).not.toHaveBeenCalledWith(
+      expect.objectContaining({ event_name: LogEvent.Click }),
+    );
   });
 
   it('should open login inline and log the click', async () => {
@@ -136,7 +182,11 @@ describe('ExploreSignupStrip', () => {
     });
     expect(showLogin).toHaveBeenCalledWith({
       trigger: AuthTriggers.Onboarding,
-      options: { isLogin: true },
+      options: {
+        isLogin: true,
+        defaultDisplay: undefined,
+        formValues: undefined,
+      },
     });
   });
 });

packages/shared/src/components/auth/ExploreSignupStrip.tsx

@@ -1,11 +1,15 @@
 import type { ReactElement } from 'react';
 import React from 'react';
 import classNames from 'classnames';
+import AuthOptions from './AuthOptions';
+import { ButtonSize } from '../buttons/Button';
+import type { AuthOptionsProps } from './common';
+import { AuthDisplay } from './common';
 import type { HijackingCoverCopy } from './HijackingCoverStrip';
 import {
-  HijackingCoverAuthActions,
-  HijackingCoverStrip,
-  HijackingCoverStripPlaceholder,
+  HijackingCoverCard,
+  hijackingCoverBodyClassName,
+  hijackingCoverHeadingClassName,
 } from './HijackingCoverStrip';
 import { useAuthContext } from '../../contexts/AuthContext';
 import { useLogContext } from '../../contexts/LogContext';
@@ -20,6 +24,8 @@ const copy: HijackingCoverCopy = {
   body: 'Log in to pick up where you left off.',
 };
 
+export const exploreSignupStripMinHeight = 'min-h-[14.5rem]';
+
 // The new tab's cover strip for anonymous visitors, tablet and up.
 export function ExploreSignupStrip({
   className,
@@ -47,38 +53,79 @@ export function ExploreSignupStrip({
   // Holds the strip's slot in the server HTML until boot answers.
   if (!isAuthReady) {
     return (
-      <HijackingCoverStripPlaceholder
-        className={classNames('hidden tablet:block', className)}
-      />
+      <section
+        aria-hidden
+        className={classNames('hidden w-full tablet:block', className)}
+      >
+        <div className="rounded-16 border border-transparent">
+          <div className={exploreSignupStripMinHeight} />
+        </div>
+      </section>
     );
   }
 
   if (!isTablet) {
     return null;
   }
 
-  const onAuthClick = (isLogin: boolean) => (): void => {
-    logEvent({
-      event_name: LogEvent.Click,
-      target_type: isLogin ? TargetType.LoginButton : TargetType.SignupButton,
-      target_id: TargetId.ExploreStrip,
-    });
+  const onAuthStateUpdate: AuthOptionsProps['onAuthStateUpdate'] = (props) => {
+    if (props.isLoginFlow) {
+      logEvent({
+        event_name: LogEvent.Click,
+        target_type: TargetType.LoginButton,
+        target_id: TargetId.ExploreStrip,
+      });
+    }
 
-    showLogin({ trigger: AuthTriggers.Onboarding, options: { isLogin } });
+    showLogin({
+      trigger: AuthTriggers.Onboarding,
+      options: {
+        isLogin: !!props.isLoginFlow,
+        defaultDisplay: props.defaultDisplay,
+        formValues: props.email ? { email: props.email } : undefined,
+      },
+    });
   };
 
   return (
-    <HijackingCoverStrip
-      copy={copy}
-      className={className}
-      actions={
-        <HijackingCoverAuthActions
-          signup="Sign up"
-          login="Log in"
-          onSignupClick={onAuthClick(false)}
-          onLoginClick={onAuthClick(true)}
-        />
-      }
-    />
+    <HijackingCoverCard className={className}>
+      <div className="cover-strip-blur pointer-events-none absolute bottom-0 left-1/2 h-3/5 w-[24rem] -translate-x-1/2" />
+      <div className="pointer-events-none absolute inset-x-0 bottom-0 h-3/4 bg-gradient-to-t from-raw-pepper-90/[0.9] via-raw-pepper-90/[0.55] to-transparent" />
+      <div
+        className={classNames(
+          'dark relative z-1 flex flex-col items-center justify-center px-6 py-6 text-center',
+          exploreSignupStripMinHeight,
+        )}
+      >
+        <div className="flex w-full max-w-[26.25rem] flex-col items-center gap-1">
+          <h3
+            className={classNames(
+              'text-balance',
+              hijackingCoverHeadingClassName,
+            )}
+          >
+            {copy.heading}
+          </h3>
+          <p className={hijackingCoverBodyClassName}>{copy.body}</p>
+          <AuthOptions
+            ignoreMessages
+            formRef={null as unknown as AuthOptionsProps['formRef']}
+            trigger={AuthTriggers.Onboarding}
+            targetId={TargetId.ExploreStrip}
+            simplified
+            defaultDisplay={AuthDisplay.OnboardingSignup}
+            forceDefaultDisplay
+            signupStyle="singlePrimary"
+            inlineProviders
+            preferGithub={false}
+            onboardingSignupButton={{ size: ButtonSize.Medium }}
+            className={{
+              container: 'mt-4 !min-h-[6.75rem] !overflow-visible',
+            }}
+            onAuthStateUpdate={onAuthStateUpdate}
+          />
+        </div>
+      </div>
+    </HijackingCoverCard>
   );
 }