[LinkTo]: Add customization

.changeset/neat-vans-hammer.md

@@ -0,0 +1,5 @@
+---
+"@web3uikit/core": patch
+---
+
+[LinkTo]: Add customization

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

@@ -2,6 +2,7 @@ import { ComponentStory, ComponentMeta } from '@storybook/react';
 import LinkTo from './LinkTo';
 import { color } from '@web3uikit/styles';
 import { MemoryRouter, Route, Routes } from 'react-router-dom';
+import { Youtube } from '@web3uikit/icons';
 
 export default {
     title: '4.UI/LinkTo',
@@ -13,6 +14,7 @@ export default {
             },
         },
     },
+    argTypes: { onClick: { action: 'clicked' } },
 } as ComponentMeta<typeof LinkTo>;
 
 const Template: ComponentStory<typeof LinkTo> = (args) => <LinkTo {...args} />;
@@ -112,7 +114,23 @@ NoIconLink.args = {
     type: 'email',
     iconLayout: 'none',
 };
-
+export const LinkWithNoUnderline = TemplateText.bind({});
+LinkWithNoUnderline.args = {
+    address: 'https://www.youtube.com/c/MoralisWeb3/featured',
+    iconLayout: 'trailing',
+    text: 'Moralis Youtube',
+    type: 'external',
+    isUnderlined: false,
+};
+export const LinkWithCustomIcon = TemplateText.bind({});
+LinkWithCustomIcon.args = {
+    icon: <Youtube fontSize={18} fill={color.navy40} />,
+    address: 'https://www.youtube.com/c/MoralisWeb3/featured',
+    iconLayout: 'trailing',
+    text: 'Moralis Youtube',
+    type: 'external',
+    isUnderlined: false,
+};
 export const InternalLink: ComponentStory<typeof LinkTo> = Template.bind({});
 InternalLink.decorators = [
     (Story) => (

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

@@ -7,32 +7,41 @@ import type { LinkToProps } from './types';
 
 // styles
 type TStyleProps = Pick<LinkToProps, 'iconLayout'>;
+interface LinkStyledProps {
+    isUnderlined: boolean;
+    textColor?: typeof color | string;
+}
 
-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: ${({ isUnderlined }) =>
+        isUnderlined ? '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: ${({ isUnderlined }) =>
+        isUnderlined ? 'underline' : 'none'};
+
     &:hover {
         filter: brightness(0.7);
     }

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

@@ -1,7 +1,9 @@
 import { Link, Mail } from '@web3uikit/icons';
-import { color } from '@web3uikit/styles';
+import { color as colorStyle } from '@web3uikit/styles';
 import { LinkToProps } from './types';
 import styles from './LinkTo.styles';
+import { Typography } from '../Typography';
+import React from 'react';
 
 const { InternalLinkStyled, LinkStyled, SpanStyledFlex, SpanStyledText } =
     styles;
@@ -11,32 +13,45 @@ const LinkTo: React.FC<LinkToProps> = ({
     iconLayout = 'leading',
     text,
     type = 'external',
+    isUnderlined = true,
+    iconColor,
+    color,
+    onClick,
+    icon,
     ...props
 }) => {
     const renderContent = () => (
         <SpanStyledFlex iconLayout={iconLayout} data-testid="test-link-flex">
-            {iconLayout !== 'none' &&
-                type !== 'internal' &&
-                (type === 'email' ? (
+            {iconLayout !== 'none' && type !== 'internal' ? (
+                type === 'email' ? (
                     <Mail
                         title="mail icon"
                         titleId="linkto mail icon"
-                        fill={color.navy40}
+                        fill={iconColor || colorStyle.navy40}
                         fontSize={18}
                         style={{ marginTop: 'auto' }}
                     />
+                ) : icon ? (
+                    <React.Fragment>{icon}</React.Fragment>
                 ) : (
                     <Link
                         title="link icon"
                         titleId="linkto link icon"
-                        fill={color.navy40}
+                        fill={iconColor || colorStyle.navy40}
                         fontSize={18}
                         style={{ marginTop: 'auto' }}
                     />
-                ))}
-            <SpanStyledText data-testid="test-link-text">
+                )
+            ) : (
+                icon && <React.Fragment>{icon}</React.Fragment>
+            )}
+            <Typography
+                data-testid="test-link-text"
+                color={color || colorStyle.navy40}
+                {...props}
+            >
                 {text || address}
-            </SpanStyledText>
+            </Typography>
         </SpanStyledFlex>
     );
 
@@ -45,12 +60,20 @@ const LinkTo: React.FC<LinkToProps> = ({
             data-testid="test-link-to"
             href={`${type === 'email' ? 'mailto:' : ''}${address}`}
             target={`${type === 'email' ? '_self' : '_blank'}`}
-            {...props}
+            isUnderlined={isUnderlined}
+            textColor={color}
+            onClick={onClick}
         >
             {renderContent()}
         </LinkStyled>
     ) : (
-        <InternalLinkStyled data-testid="test-link-to" to={address}>
+        <InternalLinkStyled
+            data-testid="test-link-to"
+            to={address}
+            isUnderlined={isUnderlined}
+            textColor={color}
+            onClick={onClick}
+        >
             {renderContent()}
         </InternalLinkStyled>
     );

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

@@ -1,10 +1,17 @@
+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 {
+type TTextProps = Pick<
+    TypographyProps,
+    'color' | 'variant' | 'italic' | 'monospace' | 'weight'
+>;
+
+export interface LinkToProps extends TTextProps {
     /**
      * what is the address you are linking to
      */
@@ -24,4 +31,25 @@ export interface LinkToProps {
      * set the position of the icon, or icon only
      */
     iconLayout?: TLayoutState;
+
+    /**
+     * Is link underlined
+     */
+    isUnderlined?: boolean;
+
+    /**
+     * set the icon color
+     */
+    iconColor?: string;
+
+    /**
+     * A function that will be called if the link is clicked
+     */
+
+    onClick?: (event: React.MouseEvent<HTMLAnchorElement, MouseEvent>) => void;
+
+    /**
+     * set a custom icon
+     */
+    icon?: JSX.Element;
 }