feat: hero onboardng

Author: AmarTrebinjac

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

@@ -136,6 +136,7 @@ function AuthOptionsInner({
   hideLoginLink,
   compact,
   splitSignupStyle,
+  preferGithub,
   autoTriggerProvider,
   socialProviderScopes,
 }: AuthOptionsProps): ReactElement {
@@ -767,6 +768,7 @@ function AuthOptionsInner({
             hideLoginLink={hideLoginLink}
             compact={compact}
             splitSignupStyle={splitSignupStyle}
+            preferGithub={preferGithub}
           />
         </Tab>
         <Tab label={AuthDisplay.SignBack}>

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

@@ -38,6 +38,7 @@ interface OnboardingRegistrationFormProps extends AuthFormProps {
   hideLoginLink?: boolean;
   compact?: boolean;
   splitSignupStyle?: boolean;
+  preferGithub?: boolean;
 }
 
 export const isWebView = (): boolean => {
@@ -114,9 +115,13 @@ export const OnboardingRegistrationForm = ({
   hideLoginLink,
   compact,
   splitSignupStyle = false,
+  preferGithub,
 }: OnboardingRegistrationFormProps): ReactElement => {
   const { logEvent } = useLogContext();
   const isOnboardingTrigger = trigger === AuthTriggers.Onboarding;
+  const signupProviders = getSignupProviders(
+    preferGithub ?? isOnboardingTrigger,
+  );
 
   const trackOpenSignup = () => {
     logEvent({
@@ -220,7 +225,7 @@ export const OnboardingRegistrationForm = ({
   return (
     <div aria-label="Login/Register options" className="flex flex-col gap-4">
       <ul aria-label="Social login buttons" className="flex flex-col gap-4">
-        {getSignupProviders(isOnboardingTrigger).map((provider) => (
+        {signupProviders.map((provider) => (
           <li key={provider.value}>
             <Button
               aria-label={

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

@@ -128,6 +128,8 @@ export interface AuthOptionsProps {
   compact?: boolean;
   /** X-style split onboarding: "Sign up with", "Create account", Sign in button */
   splitSignupStyle?: boolean;
+  /** Order GitHub before Google in the OAuth provider list (developer-first). */
+  preferGithub?: boolean;
   autoTriggerProvider?: string;
   socialProviderScopes?: string[];
 }

packages/shared/src/features/onboarding/components/OnboardingSignupHero.spec.tsx

@@ -0,0 +1,84 @@
+import React from 'react';
+import { render, screen } from '@testing-library/react';
+import { OnboardingSignupHero } from './OnboardingSignupHero';
+
+jest.mock('../../../contexts/SettingsContext', () => ({
+  ThemeMode: { Dark: 'dark' },
+  useSettingsContext: () => ({ applyThemeMode: jest.fn() }),
+}));
+
+jest.mock('../../../components/Logo', () => ({
+  __esModule: true,
+  default: () => <div data-testid="logo" />,
+  LogoPosition: { Relative: 'relative' },
+}));
+
+jest.mock('../../../components/footer/FooterLinks', () => ({
+  FooterLinks: () => <div data-testid="footer" />,
+}));
+
+jest.mock('../../../components/auth/SignupDisclaimer', () => ({
+  __esModule: true,
+  default: () => <div data-testid="disclaimer" />,
+}));
+
+// Isolate the shell from the (gql/context-heavy) background blocks.
+jest.mock('./signupHero/HeroBackgroundLayer', () => ({
+  HeroBackgroundLayer: ({
+    background,
+    imageMode,
+  }: {
+    background: string;
+    imageMode: string;
+  }) => (
+    <div
+      data-testid="bg-layer"
+      data-background={background}
+      data-image-mode={imageMode}
+    />
+  ),
+}));
+
+const renderHero = (
+  props: Partial<React.ComponentProps<typeof OnboardingSignupHero>> = {},
+) =>
+  render(
+    <OnboardingSignupHero background="desk" {...props}>
+      <div data-testid="auth-form" />
+    </OnboardingSignupHero>,
+  );
+
+describe('OnboardingSignupHero', () => {
+  it('passes background and image mode to the background layer', () => {
+    renderHero({ background: 'desk', imageMode: 'colors' });
+    const layer = screen.getByTestId('bg-layer');
+    expect(layer).toHaveAttribute('data-background', 'desk');
+    expect(layer).toHaveAttribute('data-image-mode', 'colors');
+  });
+
+  it('renders aurora orbs by default', () => {
+    renderHero();
+    expect(screen.getByTestId('hero-orbs')).toBeInTheDocument();
+  });
+
+  it('omits aurora orbs when showOrbs is false', () => {
+    renderHero({ showOrbs: false });
+    expect(screen.queryByTestId('hero-orbs')).not.toBeInTheDocument();
+  });
+
+  it('renders the halo and vignette as part of the desk background', () => {
+    renderHero({ background: 'desk' });
+    expect(screen.getByTestId('hero-halo')).toBeInTheDocument();
+  });
+
+  it('omits the halo for the cards background', () => {
+    renderHero({ background: 'cards' });
+    expect(screen.queryByTestId('hero-halo')).not.toBeInTheDocument();
+  });
+
+  it('renders the form and headline', () => {
+    renderHero({ headline: 'Hello devs' });
+    expect(screen.getByTestId('auth-form')).toBeInTheDocument();
+    expect(screen.getByText('Hello devs')).toBeInTheDocument();
+  });
+});