chore(Elements): Add <Link /> component references (clerk#1674)

Co-authored-by: Alexis Aguilar <[email protected]>
Shanko-26 · Nov 4, 2024 · c89548b · c89548b
1 parent 01acb63
commit c89548b
Show file tree

Hide file tree

Showing 4 changed files with 84 additions and 53 deletions.
diff --git a/docs/customization/elements/examples/shadcn-ui.mdx b/docs/customization/elements/examples/shadcn-ui.mdx
@@ -37,8 +37,7 @@ To use these examples, you must first:
 
 You must also configure the appropriate settings in Clerk:
 
-1. Navigate to the [Clerk Dashboard](https://dashboard.clerk.com/last-active?path=user-authentication/sso-connections).
-1. In the top navigation, select **Configure**. Then in the sidebar, select **SSO Connections**.
+1. In the Clerk Dashboard, navigate to the [**SSO Connections**](https://dashboard.clerk.com/last-active?path=user-authentication/sso-connections) page.
 1. Ensure that **Google** and **GitHub** are enabled. If they are not in the list of connections, select the **Add connection** button, and select **For all users**. Enable **Google** and **GitHub**.
 
 ## Sign up
@@ -174,7 +173,7 @@ You must also configure the appropriate settings in Clerk:
                           </Button>
                         </SignUp.Action>
                         <Button variant="link" size="sm" asChild>
-                          <Link href="/sign-in">Already have an account? Sign in</Link>
+                          <Clerk.Link navigate="sign-in">Already have an account? Sign in</Clerk.Link>
                         </Button>
                       </div>
                     </CardFooter>
@@ -429,7 +428,9 @@ You must also configure the appropriate settings in Clerk:
                         </SignIn.Action>
 
                         <Button variant="link" size="sm" asChild>
-                          <Link href="/sign-up">Don&apos;t have an account? Sign up</Link>
+                          <Clerk.Link navigate="sign-up">
+                            Don&apos;t have an account? Sign up
+                          </Clerk.Link>
                         </Button>
                       </div>
                     </CardFooter>

diff --git a/docs/customization/elements/examples/sign-in.mdx b/docs/customization/elements/examples/sign-in.mdx
@@ -9,8 +9,7 @@ The following example demonstrates a simple username/password sign-in flow.
 
 Before you build your sign-in flow, you need to configure the appropriate settings in Clerk:
 
-1. Navigate to the [Clerk Dashboard](https://dashboard.clerk.com/last-active?path=user-authentication/email-phone-username).
-1. In the navigation sidebar, select **User & Authentication > Email, Phone, Username**.
+1. In the Clerk Dashboard, navigate to the [**Email, Phone, Username**](https://dashboard.clerk.com/last-active?path=user-authentication/email-phone-username) page.
 1. In the **Contact information** section, ensure that _only_ **Password** is enabled.
 1. In the **Username** section, ensure that **Username** is enabled.
 
@@ -90,12 +89,12 @@ Before you build your sign-in flow, you need to configure the appropriate settin
             </SignIn.Action>
             <p className="text-center text-sm text-zinc-500">
               No account?{' '}
-              <a
-                href="#"
+              <Clerk.Link
+                navigate="sign-up"
                 className="font-medium text-zinc-950 decoration-zinc-950/20 underline-offset-4 outline-none hover:text-zinc-700 hover:underline focus-visible:underline"
               >
                 Create an account
-              </a>
+              </Clerk.Link>
             </p>
           </SignIn.Step>
         </SignIn.Root>
@@ -111,10 +110,9 @@ The following example demonstrates a simple Google OAuth sign-in flow.
 
 Before you build your sign-in flow, you need to configure the appropriate settings in Clerk:
 
-1. Navigate to the [Clerk Dashboard](https://dashboard.clerk.com/last-active?path=user-authentication/email-phone-username).
-1. In the navigation sidebar, select **User & Authentication > Email, Phone, Username**.
+1. In the Clerk Dashboard, navigate to the [**Email, Phone, Username**](https://dashboard.clerk.com/last-active?path=user-authentication/email-phone-username) page.
 1. Ensure that all settings are disabled.
-1. In the navigation sidebar, select **Social Connections**.
+1. In the navigation sidebar, select [**SSO Connections**](https://dashboard.clerk.com/last-active?path=user-authentication/sso-connections).
 1. Ensure that _only_ **Google** is enabled.
 
 <CodeBlockDemo
@@ -185,12 +183,12 @@ Before you build your sign-in flow, you need to configure the appropriate settin
             </div>
             <p className="text-center text-sm text-neutral-400">
               No account?{' '}
-              <a
-                href="#"
+              <Clerk.Link
+                navigate="sign-up"
                 className="font-medium text-white decoration-white/20 underline-offset-4 outline-none hover:underline focus-visible:underline"
               >
                 Create an account
-              </a>
+              </Clerk.Link>
             </p>
           </SignIn.Step>
         </SignIn.Root>
@@ -206,11 +204,10 @@ The following example demonstrates a simple multi-factor authentication (MFA) si
 
 Before you build your sign-in flow, you need to configure the appropriate settings in Clerk:
 
-1. Navigate to the [Clerk Dashboard](https://dashboard.clerk.com/last-active?path=user-authentication/email-phone-username).
-1. In the navigation sidebar, select **User & Authentication > Email, Phone, Username**.
+1. In the Clerk Dashboard, navigate to the [**Email, Phone, Username**](https://dashboard.clerk.com/last-active?path=user-authentication/email-phone-username) page.
 1. Ensure that **Email address**, **Phone number**, and **Password** are enabled.
 1. Next to **Phone number**, select the settings icon and enable **Require**.
-1. In the navigation sidebar, select **Multi-factor**.
+1. In the navigation sidebar, select [**Multi-factor**](https://dashboard.clerk.com/last-active?path=user-authentication/multi-factor).
 1. Ensure that _only_ **SMS verification code** is enabled.
 
 <CodeBlockDemo
@@ -289,12 +286,12 @@ Before you build your sign-in flow, you need to configure the appropriate settin
             </SignIn.Action>
             <p className="text-center text-sm text-white/60">
               No account?{' '}
-              <a
-                href="#"
+              <Clerk.Link
+                navigate="sign-up"
                 className="text-white decoration-white/30 underline-offset-4 outline-none hover:underline focus-visible:underline"
               >
                 Create an account
-              </a>
+              </Clerk.Link>
             </p>
           </SignIn.Step>
           <SignIn.Step
@@ -342,12 +339,12 @@ Before you build your sign-in flow, you need to configure the appropriate settin
             </SignIn.Strategy>
             <p className="text-center text-sm text-white/60">
               No account?{' '}
-              <a
-                href="#"
+              <Clerk.Link
+                navigate="sign-up"
                 className="text-white decoration-white/30 underline-offset-4 outline-none hover:underline focus-visible:underline"
               >
                 Create an account
-              </a>
+              </Clerk.Link>
             </p>
           </SignIn.Step>
         </SignIn.Root>
@@ -363,14 +360,13 @@ The following example demonstrates a simple sign-in flow that combines email, Go
 
 Before you build your sign-in flow, you need to configure the appropriate settings in Clerk:
 
-1. Navigate to the [Clerk Dashboard](https://dashboard.clerk.com/last-active?path=user-authentication/email-phone-username).
-1. In the navigation sidebar, select **User & Authentication > Email, Phone, Username**.
+1. In the Clerk Dashboard, navigate to the [**Email, Phone, Username**](https://dashboard.clerk.com/last-active?path=user-authentication/email-phone-username) page.
 1. In the **Contact information** section, ensure that _only_ **Email address** and **Phone number** is enabled.
 1. Next to **Phone number**, select the settings icon and enable **Require**.
 1. In the **Authentication strategies** section, ensure that _only_ **Email verification code** is enabled.
-1. In the navigation sidebar, select **Social Connections**.
+1. In the navigation sidebar, select [**SSO Connections**](https://dashboard.clerk.com/last-active?path=user-authentication/sso-connections).
 1. Ensure that _only_ **Google** is enabled.
-1. In the navigation sidebar, select **Multi-factor**.
+1. In the navigation sidebar, select [**Multi-factor**](https://dashboard.clerk.com/last-active?path=user-authentication/multi-factor).
 1. Ensure that _only_ **SMS verification code** is enabled.
 
 <CodeBlockDemo
@@ -470,12 +466,12 @@ Before you build your sign-in flow, you need to configure the appropriate settin
             </div>
             <p className="text-center text-sm text-neutral-500">
               Don&apos;t have an account?{' '}
-              <a
-                href="#"
+              <Clerk.Link
+                navigate="sign-up"
                 className="rounded px-1 py-0.5 text-neutral-700 outline-none hover:bg-neutral-100 focus-visible:bg-neutral-100"
               >
                 Sign up
-              </a>
+              </Clerk.Link>
             </p>
           </SignIn.Step>
           <SignIn.Step
@@ -560,12 +556,12 @@ Before you build your sign-in flow, you need to configure the appropriate settin
             </SignIn.Strategy>
             <p className="text-center text-sm text-neutral-500">
               Don&apos;t have an account?{' '}
-              <a
-                href="#"
+              <Clerk.Link
+                navigate="sign-up"
                 className="rounded px-1 py-0.5 text-neutral-700 outline-none hover:bg-neutral-100 focus-visible:bg-neutral-100"
               >
                 Sign up
-              </a>
+              </Clerk.Link>
             </p>
           </SignIn.Step>
         </SignIn.Root>

diff --git a/docs/customization/elements/examples/sign-up.mdx b/docs/customization/elements/examples/sign-up.mdx
@@ -9,8 +9,7 @@ The following example demonstrates a sign-up flow with email and password fields
 
 Before you build your sign-up flow, you need to configure the appropriate settings in Clerk:
 
-1. Navigate to the [Clerk Dashboard](https://dashboard.clerk.com/last-active?path=user-authentication/email-phone-username).
-1. In the navigation sidebar, select **User & Authentication > Email, Phone, Username**.
+1. In the Clerk Dashboard, navigate to the [**Email, Phone, Username**](https://dashboard.clerk.com/last-active?path=user-authentication/email-phone-username) page.
 1. In the **Contact information** section, ensure that _only_ **Email address** and **Password** are enabled.
 
 <CodeBlockDemo
@@ -89,12 +88,12 @@ Before you build your sign-up flow, you need to configure the appropriate settin
             </SignUp.Action>
             <p className="text-center text-sm text-zinc-400">
               Have an account?{' '}
-              <a
-                href="#"
+              <Clerk.Link
+                navigate="sign-in"
                 className="font-medium text-white decoration-white/20 underline-offset-4 outline-none hover:underline focus-visible:underline"
               >
                 Sign in
-              </a>
+              </Clerk.Link>
             </p>
           </SignUp.Step>
           <SignUp.Step
@@ -139,12 +138,12 @@ Before you build your sign-up flow, you need to configure the appropriate settin
             </SignUp.Strategy>
             <p className="text-center text-sm text-zinc-400">
               Have an account?{' '}
-              <a
-                href="#"
+              <Clerk.Link
+                navigate="sign-in"
                 className="font-medium text-white decoration-white/20 underline-offset-4 outline-none hover:underline focus-visible:underline"
               >
                 Sign in
-              </a>
+              </Clerk.Link>
             </p>
           </SignUp.Step>
         </SignUp.Root>
@@ -160,8 +159,7 @@ The following example demonstrates a sign-up flow with email, password, and user
 
 Before you build your sign-up flow, you need to configure the appropriate settings in Clerk:
 
-1. Navigate to the [Clerk Dashboard](https://dashboard.clerk.com/last-active?path=user-authentication/email-phone-username).
-1. In the navigation sidebar, select **User & Authentication > Email, Phone, Username**.
+1. In the Clerk Dashboard, navigate to the [**Email, Phone, Username**](https://dashboard.clerk.com/last-active?path=user-authentication/email-phone-username) page.
 1. In the **Contact information** section, ensure that _only_ **Email address** and **Password** are enabled.
 1. In the **Username** section, ensure that **Username** is enabled.
 
@@ -241,12 +239,12 @@ Before you build your sign-up flow, you need to configure the appropriate settin
 
             <p className="text-center text-sm text-zinc-500">
               Already have an account?{' '}
-              <a
-                href="#"
+              <Clerk.Link
+                navigate="sign-in"
                 className="font-medium text-zinc-950 decoration-zinc-950/20 underline-offset-4 outline-none hover:text-zinc-700 hover:underline focus-visible:underline"
               >
                 Sign in
-              </a>
+              </Clerk.Link>
             </p>
           </SignUp.Step>
           <SignUp.Step
@@ -293,12 +291,12 @@ Before you build your sign-up flow, you need to configure the appropriate settin
             </SignUp.Strategy>
             <p className="text-center text-sm text-zinc-500">
               Already have an account?{' '}
-              <a
-                href="#"
+              <Clerk.Link
+                navigate="sign-in"
                 className="font-medium text-zinc-950 decoration-zinc-950/20 underline-offset-4 outline-none hover:text-zinc-700 hover:underline focus-visible:underline"
               >
                 Sign in
-              </a>
+              </Clerk.Link>
             </p>
           </SignUp.Step>
           <SignUp.Step
@@ -343,12 +341,12 @@ Before you build your sign-up flow, you need to configure the appropriate settin
             </SignUp.Action>
             <p className="text-center text-sm text-zinc-500">
               Already have an account?{' '}
-              <a
-                href="#"
+              <Clerk.Link
+                navigate="sign-in"
                 className="font-medium text-zinc-950 decoration-zinc-950/20 underline-offset-4 outline-none hover:text-zinc-700 hover:underline focus-visible:underline"
               >
                 Sign in
-              </a>
+              </Clerk.Link>
             </p>
           </SignUp.Step>
         </SignUp.Root>

diff --git a/docs/customization/elements/reference/common.mdx b/docs/customization/elements/reference/common.mdx
@@ -544,3 +544,39 @@ To target the loading state of a specific `<Connection>`, you need to specify th
   </Clerk.Loading>
 </SignIn.Root>
 ```
+
+## `<Link>`
+
+Render a link tag that can be used to navigate between `<SignIn />` and `<SignUp />` flows.
+
+<Properties>
+  - `navigate`
+  - `sign-in` | `sign-up`
+
+  The destination flow to navigate to.
+
+  ---
+
+  - `children`
+  - `React.ReactNode | ((props: {url: string}) => React.ReactNode)`
+</Properties>
+
+### Usage {{ toc: false }}
+
+```tsx {{ filename: 'page.tsx' }}
+<SignIn.Root>
+  <SignIn.Step name="start">
+    <Clerk.Link navigate="sign-up">Sign up</Clerk.Link>
+  </SignIn.Step>
+</SignIn.Root>
+```
+
+### With render function {{ toc: false }}
+
+```tsx {{ filename: 'page.tsx' }}
+<SignIn.Root>
+  <SignIn.Step name="start">
+    <Clerk.Link navigate="sign-up">{({ url }) => <Link href={url}>Sign up</Link>}</Clerk.Link>
+  </SignIn.Step>
+</SignIn.Root>
+```