chore(condo): DOMA-12175 add ability to set custom component in ui kit Typography.Link (#6554)

* chore(condo): add ability to set custom component in ui kit Typography.Link

* chore(condo): fix link type

* chore(condo): use unknown type

Author: toplenboren

apps/condo/domains/user/components/auth/SignInForm.tsx

@@ -198,11 +198,9 @@ export const SignInForm = (): React.ReactElement => {
                                                 </Col>
 
                                                 <Col span={24}>
-                                                    <Link href={`/auth/forgot?next=${encodeURIComponent(redirectUrl)}`}>
-                                                        <Typography.Link href={`/auth/forgot?next=${encodeURIComponent(redirectUrl)}`} tabIndex={3}>
-                                                            {ResetPasswordMessage}
-                                                        </Typography.Link>
-                                                    </Link>
+                                                    <Typography.Link component={Link} href={`/auth/forgot?next=${encodeURIComponent(redirectUrl)}`} tabIndex={3}>
+                                                        {ResetPasswordMessage}
+                                                    </Typography.Link>
                                                 </Col>
                                             </Row>
                                         </Col>

packages/ui/src/components/Typography/link.tsx

@@ -14,6 +14,7 @@ export type TypographyLinkProps = Omit<React.AnchorHTMLAttributes<HTMLAnchorElem
     size?: typeof TEXT_SIZES[number]
     id?: string
     children?: React.ReactNode
+    component?: unknown
     ['aria-label']?: string
 }
 
@@ -23,7 +24,7 @@ const Link = React.forwardRef<HTMLElement, TypographyLinkProps>((props, ref) =>
         [`${TYPOGRAPHY_CLASS_PREFIX}-${size}`]: size,
     })
     // NOTE: Used wrapper destructuring to explicitly pass component props, which is marked as internal in antd
-    const componentProps = { component: 'a' }
+    const componentProps = { component: props.component ? props.component : 'a' }
 
     const handleClick = useCallback<React.MouseEventHandler<HTMLAnchorElement>>((event) => {
         const stringContent = extractChildrenContent(children)