Update LocateYourProfile (#564)

x-team · Jul 27, 2020 · 2c7d64d · 2c7d64d
1 parent 329628a
commit 2c7d64d
Show file tree

Hide file tree

Showing 6 changed files with 23 additions and 12 deletions.
diff --git a/lib/all.js b/lib/all.js
diff --git a/lib/all.js.map b/lib/all.js.map
diff --git a/lib/registration.js b/lib/registration.js
diff --git a/lib/registration.js.map b/lib/registration.js.map
diff --git a/src/components/ui/LocateYourProfile.js b/src/components/ui/LocateYourProfile.js
@@ -86,6 +86,7 @@ const cx = {
     & {
       color: ${theme.typoAnchor}
       text-decoration: none
+      cursor: pointer
     }
 
     &:hover {
@@ -119,10 +120,11 @@ const cx = {
 type Props = {
   headline?: string,
   isLoading?: boolean,
-  recover?: () => void
+  recover?: () => void,
+  joinClick?: () => void
 }
 
-const LocateYourProfile = ({ headline, isLoading, recover }: Props) => (
+const LocateYourProfile = ({ headline, isLoading, recover, joinClick }: Props) => (
   <div className={cx.wrapper}>
     <div className={cx.content}>
       {isLoading ? (
@@ -144,7 +146,7 @@ const LocateYourProfile = ({ headline, isLoading, recover }: Props) => (
           {headline && (
             <p className={cx.headline}>{headline}</p>
           )}
-          <p className={cx.text}><a className={cx.join} href='https://x-team.com/join-application'>Join X-Team</a> if you don’t have an account yet.</p>
+          <p className={cx.text}><a className={cx.join} onClick={joinClick}>Join X-Team</a> if you don’t have an account yet.</p>
           <p className={cx.title}>Already have an account?</p>
           <p className={cx.alttext}>Please ensure that you have local storage enabled in your browser.</p>
           {recover && (

diff --git a/src/components/ui/LocateYourProfile.stories.js b/src/components/ui/LocateYourProfile.stories.js
@@ -16,12 +16,17 @@ const Body = ({ children }) => (
   </div>
 )
 
+const joinClick = () => (
+  console.log('join x-team clicked')
+)
+
 storiesOf('UI Components|LocateYourProfile', module)
   .add('basic usage', () => (
     <Body>
       <LocateYourProfile
         headline='Locate your profile.'
         recover={action('Recover my secret profile Link')}
+        joinClick={joinClick}
       />
     </Body>
   ))
@@ -33,6 +38,7 @@ storiesOf('UI Components|LocateYourProfile/Use Cases', module)
         <LocateYourProfile
           headline='Locate your profile.'
           recover={action('Recover my secret profile Link')}
+          joinClick={joinClick}
         />
       </ApplicantScreen>
     </Body>
@@ -41,11 +47,14 @@ storiesOf('UI Components|LocateYourProfile/Use Cases', module)
 storiesOf('UI Components|LocateYourProfile/Debug', module)
   .add('loading state', () => (
     <Body>
-      <LocateYourProfile
-        isLoading
-        headline='Locate your profile.'
-        recover={action('Recover my secret profile Link')}
-      />
+      <ApplicantScreen noWrapper>
+        <LocateYourProfile
+          isLoading
+          headline='Locate your profile.'
+          recover={action('Recover my secret profile Link')}
+          joinClick={joinClick}
+        />
+      </ApplicantScreen>
     </Body>
   ))
   .add('missing props', () => (