[LinkTo]: Add customization

packages/core/src/lib/LinkTo/LinkTo.styles.ts

@@ -7,32 +7,39 @@ import type { LinkToProps } from './types';
 
 // styles
 type TStyleProps = Pick<LinkToProps, 'iconLayout'>;
+interface LinkStyledProps {
+    underline: boolean;
+    textColor: string | undefined;
+}
 
-const LinkStyled = styled.a`
+const LinkStyled = styled.a<LinkStyledProps>`
     ${resetCSS}
     ${fonts.text}
     align-items: center;
-    color: ${color.navy40};
+    color: ${({ textColor }) => textColor || color.navy40};
     display: inline-block;
     font-weight: 600;
     height: fit-content;
     max-width: 100%;
     width: fit-content;
+    text-decoration: ${({ underline }) => underline ? 'underline': 'none'};
 
     &:hover {
         filter: brightness(0.7);
     }
 `;
 
-const InternalLinkStyled = styled(Link)`
+const InternalLinkStyled = styled(Link)<LinkStyledProps>`
     ${resetCSS}
     ${fonts.text}
     align-items: center;
-    color: ${color.navy40};
+    color: ${({ textColor }) => textColor || color.navy40};
     display: inline-block;
     font-weight: 600;
     max-width: 100%;
     width: fit-content;
+    text-decoration: ${({ underline }) => underline ? 'underline': 'none'};
+
     &:hover {
         filter: brightness(0.7);
     }

packages/core/src/lib/LinkTo/LinkTo.tsx

@@ -2,6 +2,7 @@ import { Link, Mail } from '@web3uikit/icons';
 import { color } from '@web3uikit/styles';
 import { LinkToProps } from './types';
 import styles from './LinkTo.styles';
+import { Typography } from '../Typography';
 
 const { InternalLinkStyled, LinkStyled, SpanStyledFlex, SpanStyledText } =
     styles;
@@ -11,6 +12,8 @@ const LinkTo: React.FC<LinkToProps> = ({
     iconLayout = 'leading',
     text,
     type = 'external',
+    underline = true,
+    textColor,
     ...props
 }) => {
     const renderContent = () => (
@@ -21,22 +24,26 @@ const LinkTo: React.FC<LinkToProps> = ({
                     <Mail
                         title="mail icon"
                         titleId="linkto mail icon"
-                        fill={color.navy40}
+                        fill={textColor || color.navy40}
                         fontSize={18}
                         style={{ marginTop: 'auto' }}
                     />
                 ) : (
                     <Link
                         title="link icon"
                         titleId="linkto link icon"
-                        fill={color.navy40}
+                        fill={textColor || color.navy40}
                         fontSize={18}
                         style={{ marginTop: 'auto' }}
                     />
                 ))}
-            <SpanStyledText data-testid="test-link-text">
+            <Typography
+                data-testid="test-link-text"
+                color={textColor || color.navy40}
+                {...props}
+            >
                 {text || address}
-            </SpanStyledText>
+            </Typography>
         </SpanStyledFlex>
     );
 
@@ -45,12 +52,18 @@ const LinkTo: React.FC<LinkToProps> = ({
             data-testid="test-link-to"
             href={`${type === 'email' ? 'mailto:' : ''}${address}`}
             target={`${type === 'email' ? '_self' : '_blank'}`}
-            {...props}
+            underline={underline}
+            textColor={textColor}
         >
             {renderContent()}
         </LinkStyled>
     ) : (
-        <InternalLinkStyled data-testid="test-link-to" to={address}>
+        <InternalLinkStyled
+            data-testid="test-link-to"
+            to={address}
+            underline={underline}
+            textColor={textColor}
+        >
             {renderContent()}
         </InternalLinkStyled>
     );

packages/core/src/lib/LinkTo/types.ts

@@ -1,10 +1,12 @@
+import { TypographyProps } from "../Typography";
+
 export const layoutState = ['leading', 'trailing', 'none'] as const;
 export type TLayoutState = typeof layoutState[number];
 
 export const typeState = ['email', 'external', 'internal'] as const;
 export type TTypeState = typeof typeState[number];
 
-export interface LinkToProps {
+export interface LinkToProps extends TypographyProps {
     /**
      * what is the address you are linking to
      */
@@ -24,4 +26,14 @@ export interface LinkToProps {
      * set the position of the icon, or icon only
      */
     iconLayout?: TLayoutState;
+
+    /**
+     * Is link underlined
+     */
+    underline?: boolean;
+
+    /**
+     * custom color (text, icon and underline)
+     */
+    textColor?: string;
 }