added AuthComponent

src/components/AuthComponent/Auth.tsx

@@ -0,0 +1,27 @@
+import React, { useState } from 'react'
+import SignIn from '../../containers/SignInContainer'
+import SignUp from '../../containers/SignUpContainer'
+import ForgotPassword from '../../containers/ForgotPasswordContainer'
+
+export interface IAuthProps {
+  className?: string
+}
+
+const AuthComponent = ({
+  className = 'a6y-react-auth',
+}: IAuthProps): JSX.Element => {
+  const [currentForm] = useState('sign-in')
+  const getAuthForm = (): JSX.Element => {
+    switch (currentForm) {
+      case 'sign-up':
+        return <SignUp />
+      case 'forgot-password':
+        return <ForgotPassword />
+      default:
+        return <SignIn />
+    }
+  }
+  return <div className={className}>{getAuthForm()}</div>
+}
+
+export default AuthComponent

src/components/AuthComponent/index.tsx

@@ -0,0 +1,2 @@
+import Auth from './Auth'
+export default Auth

src/components/SignIn/SignIn.tsx

@@ -41,8 +41,8 @@ const SignIn = ({
       <ErrorBoundary showError={apiError ? true : false}>
         {apiError}
       </ErrorBoundary>
-      <EmailPasswordForm onClick={onClick} />
-      <FormLinks path='sign-up' />
+      <EmailPasswordForm submitLabel='sign in' onClick={onClick} />
+      <FormLinks path='sign-in' />
     </div>
   )
 }

src/components/SignUp/SignUp.tsx

@@ -33,14 +33,15 @@ export interface ISignUpProps {
 
 const SignUp = ({
   className = 'a6y-react-auth__sign-up',
+  onClick,
   apiError,
 }: ISignUpProps): JSX.Element => {
   return (
     <div className={className}>
       <ErrorBoundary showError={apiError ? true : false}>
         {apiError}
       </ErrorBoundary>
-      <EmailPasswordForm />
+      <EmailPasswordForm submitLabel='sign up' onClick={onClick} />
       <FormLinks path='sign-up' />
     </div>
   )

src/containers/SignInContainer/SignInContainer.tsx

@@ -30,7 +30,7 @@ const SignInContainer = ({ className }: ISignInContainerProps): JSX.Element => {
     }
   }
   return (
-    <div className={className ? className : 'a6y-react-auth__sign-in'}>
+    <div className={className ? className : 'a6y-react-auth__sign-in-cnt'}>
       <SignIn onClick={signIn} apiError={apiError} />
     </div>
   )

src/containers/SignUpContainer/SignUpContainer.tsx

@@ -31,7 +31,7 @@ const SignUpContainer = ({ className }: ISignUpContainerProps): JSX.Element => {
     }
   }
   return (
-    <div className={className ? className : 'a6y-react-auth__sign-up'}>
+    <div className={className ? className : 'a6y-react-auth__sign-up-cnt'}>
       <SignUp onClick={signUp} apiError={apiError} />
     </div>
   )

src/index.tsx

@@ -1 +1,2 @@
-export * from './components/EmailPasswordForm'
+import Auth from './components/AuthComponent'
+export default Auth

src/tests/components/AuthComponent.test.tsx

@@ -0,0 +1,10 @@
+import React from 'react'
+import { render } from '@testing-library/react'
+import AuthComponent from '../../components/AuthComponent'
+
+describe(`Component:Auth test`, () => {
+  it('renders without crashing', () => {
+    const rendered = render(<AuthComponent />)
+    expect(rendered).toBeDefined
+  })
+})

stories/components/AuthComponent.stories.tsx

@@ -0,0 +1,10 @@
+import React from 'react'
+import { Meta } from '@storybook/react'
+import Auth from '../../src/components/AuthComponent'
+
+export const AuthComponent: React.VFC<unknown> = args => <Auth {...args} />
+
+export default {
+  title: 'Components/Auth',
+  component: Auth,
+} as Meta