feat(clerk-js): Replace Error & Info component with a single Alert co…

…mponent

packages/clerk-js/src/core/clerk.test.ts

@@ -864,7 +864,7 @@ describe('Clerk singleton', () => {
       sut.handleRedirectCallback();
 
       await waitFor(() => {
-        expect(mockNavigate).toHaveBeenCalledWith('/signUpUrl#/continue');
+        expect(mockNavigate).toHaveBeenCalledWith('/signUpUrl/continue');
       });
     });
   });

packages/clerk-js/src/ui/common/alert/Alert.test.tsx

@@ -0,0 +1,18 @@
+import { renderJSON } from '@clerk/shared/testUtils';
+import * as React from 'react';
+
+import { Alert } from './Alert';
+
+describe('alert for info', () => {
+  it('renders an info alert', () => {
+    const tree = renderJSON(<Alert type='error'>Foo</Alert>);
+    expect(tree).toMatchSnapshot();
+  });
+});
+
+describe('alert for error', () => {
+  it('renders an error alert', () => {
+    const tree = renderJSON(<Alert type='info'>Bar</Alert>);
+    expect(tree).toMatchSnapshot();
+  });
+});

packages/clerk-js/src/ui/common/alert/Alert.tsx

@@ -0,0 +1,25 @@
+import React from 'react';
+
+export type AlertType = 'info' | 'error';
+
+export type AlertProps = {
+  type: AlertType;
+  children: React.ReactNode;
+  style?: {};
+} & React.HTMLAttributes<HTMLDivElement>;
+
+// Renders global alerts across components, will be replaced by notification snackbars.
+export function Alert({ type, children, style }: AlertProps): JSX.Element {
+  if (!children) {
+    return <></>;
+  }
+
+  return (
+    <div
+      className={`cl-${type}`}
+      style={style}
+    >
+      {children}
+    </div>
+  );
+}

packages/clerk-js/src/ui/common/alert/__snapshots__/Alert.test.tsx.snap

@@ -0,0 +1,17 @@
+// Jest Snapshot v1, https://goo.gl/fbAQLP
+
+exports[`alert for error renders an error alert 1`] = `
+<div
+  className="cl-info"
+>
+  Bar
+</div>
+`;
+
+exports[`alert for info renders an info alert 1`] = `
+<div
+  className="cl-error"
+>
+  Foo
+</div>
+`;

packages/clerk-js/src/ui/common/alert/index.ts

@@ -0,0 +1 @@
+export * from './Alert';

packages/clerk-js/src/ui/common/authForms/Header.test.tsx

@@ -1,5 +1,6 @@
 import { renderJSON } from '@clerk/shared/testUtils';
 import * as React from 'react';
+import { Alert } from 'ui/common/alert';
 
 import { Header } from './Header';
 
@@ -20,14 +21,22 @@ jest.mock('ui/contexts/EnvironmentContext', () => {
 jest.mock('ui/router/RouteContext');
 
 describe('<Header/>', () => {
-  it('renders the header component', () => {
+  it('renders a header component with everything enabled', () => {
     const tree = renderJSON(
       <Header
-        error='Boom'
+        alert={<Alert type='error'>boom</Alert>}
         showBack
+        showLogo
         welcomeName='Joe'
       />,
     );
+
+    expect(tree).toMatchSnapshot();
+  });
+
+  it('renders a plain header', () => {
+    const tree = renderJSON(<Header />);
+
     expect(tree).toMatchSnapshot();
   });
 });

packages/clerk-js/src/ui/common/authForms/Header.tsx

@@ -3,28 +3,24 @@ import cn from 'classnames';
 import React from 'react';
 import { Logo } from 'ui/common';
 import { BackButton } from 'ui/common/backButton';
-import { Error } from 'ui/common/error';
-import { Info } from 'ui/common/info';
 
 export type HeaderProps = {
   showBack?: boolean;
   showLogo?: boolean;
   handleBack?: () => void;
   welcomeName?: string;
-  error?: string;
-  info?: string;
+  alert?: React.ReactNode;
 } & React.HTMLAttributes<HTMLDivElement>;
 
 export function Header({
   showBack,
   showLogo = true,
   welcomeName,
-  error,
-  info,
+  alert,
   handleBack,
   className,
 }: HeaderProps): JSX.Element {
-  const errorStyle = showBack ? {} : { marginTop: '-4em' };
+  const alertStyle = showBack ? {} : { marginTop: '-4em' };
   const containerStyle = showLogo || welcomeName ? {} : { marginBottom: '0' };
 
   return (
@@ -39,13 +35,15 @@ export function Header({
           handleClick={handleBack}
         />
       )}
-      {error && <Error style={errorStyle}>{error}</Error>}
-      {info && <Info>{info}</Info>}
+
+      {alert && <div style={alertStyle}>{alert}</div>}
+
       {showLogo && (
         <div className='cl-auth-form-header-logo'>
           <Logo />
         </div>
       )}
+
       {welcomeName && (
         <div className='cl-auth-form-header-greeting'>
           <Label>Welcome, {welcomeName}</Label>

packages/clerk-js/src/ui/common/authForms/__snapshots__/Header.test.tsx.snap

@@ -1,6 +1,6 @@
 // Jest Snapshot v1, https://goo.gl/fbAQLP
 
-exports[`<Header/> renders the header component 1`] = `
+exports[`<Header/> renders a header component with everything enabled 1`] = `
 <div
   className="cl-auth-form-header"
   style={Object {}}
@@ -15,10 +15,13 @@ exports[`<Header/> renders the header component 1`] = `
     />
   </a>
   <div
-    className="cl-error"
     style={Object {}}
   >
-    Boom
+    <div
+      className="cl-error"
+    >
+      boom
+    </div>
   </div>
   <div
     className="cl-auth-form-header-logo"
@@ -39,3 +42,18 @@ exports[`<Header/> renders the header component 1`] = `
   </div>
 </div>
 `;
+
+exports[`<Header/> renders a plain header 1`] = `
+<div
+  className="cl-auth-form-header"
+  style={Object {}}
+>
+  <div
+    className="cl-auth-form-header-logo"
+  >
+    <div
+      className="cl-logo"
+    />
+  </div>
+</div>
+`;

packages/clerk-js/src/ui/signIn/SignInFactorTwo.tsx

@@ -15,6 +15,7 @@ import {
 import { useCoreClerk, useCoreSignIn, useSignInContext } from 'ui/contexts';
 
 import { determineSalutation } from './utils';
+import { Alert } from 'ui/common/alert';
 
 type SignInUiProps = Pick<SignInResource, 'userData' | 'identifier' | 'supportedSecondFactors' | 'status'>;
 
@@ -98,7 +99,7 @@ function _SignInFactorTwo(): JSX.Element {
   return (
     <>
       <Header
-        error={error}
+        alert={error && <Alert type='error'>{error}</Alert>}
         showBack
         welcomeName={determineSalutation(cachedSignInRef.current)}
       />

packages/clerk-js/src/ui/signIn/SignInStart.tsx

@@ -25,6 +25,7 @@ import { getClerkQueryParam } from 'utils/getClerkQueryParam';
 
 import { SignUpLink } from './SignUpLink';
 import { OAuth, Web3 } from './strategies';
+import { Alert } from 'ui/common/alert';
 
 export function _SignInStart(): JSX.Element {
   const { userSettings } = useEnvironment();
@@ -169,13 +170,15 @@ export function _SignInStart(): JSX.Element {
 
   return (
     <>
-      <Header error={error} />
+      <Header alert={error && <Alert type='error'>{error}</Alert>} />
+
       <Body>
         <OAuth
           oauthOptions={socialProviderStrategies}
           setError={setError}
           error={error}
         />
+
         <Web3
           web3Options={web3FirstFactors}
           setError={setError}

packages/clerk-js/src/ui/signIn/factorOne/SignInFactorOneInputBased.tsx

@@ -9,6 +9,7 @@ import {
 } from '@clerk/types';
 import React from 'react';
 import { handleError, useFieldState } from 'ui/common';
+import { Alert } from 'ui/common/alert';
 import { Body, Header } from 'ui/common/authForms';
 import { useCoreClerk, useCoreSignIn, useSignInContext } from 'ui/contexts';
 import { useNavigate } from 'ui/hooks';
@@ -141,11 +142,12 @@ export function SignInFactorOneInputBased({
   return (
     <>
       <Header
-        error={error}
+        alert={error && <Alert type='error'>{error}</Alert>}
         showBack
         welcomeName={determineSalutation(signIn)}
         className='cl-auth-form-header-compact'
       />
+
       <Body className='cl-auth-form-body-compact'>
         {currentFactor.strategy === 'password' && (
           <Password

packages/clerk-js/src/ui/signIn/factorOne/SignInFactorOneMagicLink.tsx

@@ -8,6 +8,7 @@ import {
   MagicLinkVerificationStatusModal,
   MagicLinkWaitingScreen,
 } from 'ui/common';
+import { Alert } from 'ui/common/alert';
 import { useCoreClerk, useCoreSignIn, useEnvironment, useSignInContext } from 'ui/contexts';
 import { useMagicLink, useNavigate } from 'ui/hooks';
 import { SignInFactorOneFooter } from 'ui/signIn/factorOne/SignInFactorOneFooter';
@@ -86,7 +87,7 @@ export function SignInFactorOneMagicLink({
   return (
     <>
       <Header
-        error={error}
+        alert={error && <Alert type='error'>{error}</Alert>}
         showLogo={false}
         showBack
       />