From 251502cf6a06ccf4a84346f25f36e2d6bf0c3d42 Mon Sep 17 00:00:00 2001
From: 0xTijan <tijan.nartnik@gmail.com>
Date: Tue, 1 Nov 2022 10:34:59 +0100
Subject: [PATCH 1/8] added underline props to LinkTo

---
 packages/core/src/lib/LinkTo/LinkTo.styles.ts | 8 ++++++--
 packages/core/src/lib/LinkTo/LinkTo.tsx       | 8 +++++++-
 packages/core/src/lib/LinkTo/types.ts         | 5 +++++
 3 files changed, 18 insertions(+), 3 deletions(-)

diff --git a/packages/core/src/lib/LinkTo/LinkTo.styles.ts b/packages/core/src/lib/LinkTo/LinkTo.styles.ts
index 03cb0a4a7..103119106 100644
--- a/packages/core/src/lib/LinkTo/LinkTo.styles.ts
+++ b/packages/core/src/lib/LinkTo/LinkTo.styles.ts
@@ -7,8 +7,9 @@ import type { LinkToProps } from './types';
 
 // styles
 type TStyleProps = Pick<LinkToProps, 'iconLayout'>;
+type LinkStyledProps = Pick<LinkToProps, 'underline'>;
 
-const LinkStyled = styled.a`
+const LinkStyled = styled.a<LinkStyledProps>`
     ${resetCSS}
     ${fonts.text}
     align-items: center;
@@ -18,13 +19,14 @@ const LinkStyled = styled.a`
     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;
@@ -33,6 +35,8 @@ const InternalLinkStyled = styled(Link)`
     font-weight: 600;
     max-width: 100%;
     width: fit-content;
+    text-decoration: ${({ underline }) => underline ? 'underline': 'none'};
+
     &:hover {
         filter: brightness(0.7);
     }
diff --git a/packages/core/src/lib/LinkTo/LinkTo.tsx b/packages/core/src/lib/LinkTo/LinkTo.tsx
index b3ad61980..1ec0484c9 100644
--- a/packages/core/src/lib/LinkTo/LinkTo.tsx
+++ b/packages/core/src/lib/LinkTo/LinkTo.tsx
@@ -11,6 +11,7 @@ const LinkTo: React.FC<LinkToProps> = ({
     iconLayout = 'leading',
     text,
     type = 'external',
+    underline = true,
     ...props
 }) => {
     const renderContent = () => (
@@ -45,12 +46,17 @@ const LinkTo: React.FC<LinkToProps> = ({
             data-testid="test-link-to"
             href={`${type === 'email' ? 'mailto:' : ''}${address}`}
             target={`${type === 'email' ? '_self' : '_blank'}`}
+            underline={underline}
             {...props}
         >
             {renderContent()}
         </LinkStyled>
     ) : (
-        <InternalLinkStyled data-testid="test-link-to" to={address}>
+        <InternalLinkStyled
+            data-testid="test-link-to"
+            to={address}
+            underline={underline}
+        >
             {renderContent()}
         </InternalLinkStyled>
     );
diff --git a/packages/core/src/lib/LinkTo/types.ts b/packages/core/src/lib/LinkTo/types.ts
index 85b208063..41501d891 100644
--- a/packages/core/src/lib/LinkTo/types.ts
+++ b/packages/core/src/lib/LinkTo/types.ts
@@ -24,4 +24,9 @@ export interface LinkToProps {
      * set the position of the icon, or icon only
      */
     iconLayout?: TLayoutState;
+
+    /**
+     * Is link underlined
+     */
+    underline?: boolean
 }

From 7de75437b3aec694b37fa7d47fcde6db6ac838ef Mon Sep 17 00:00:00 2001
From: 0xTijan <tijan.nartnik@gmail.com>
Date: Tue, 1 Nov 2022 10:50:13 +0100
Subject: [PATCH 2/8] added color prop LinkTo

---
 packages/core/src/lib/LinkTo/LinkTo.styles.ts | 9 ++++++---
 packages/core/src/lib/LinkTo/LinkTo.tsx       | 7 +++++--
 packages/core/src/lib/LinkTo/types.ts         | 7 ++++++-
 3 files changed, 17 insertions(+), 6 deletions(-)

diff --git a/packages/core/src/lib/LinkTo/LinkTo.styles.ts b/packages/core/src/lib/LinkTo/LinkTo.styles.ts
index 103119106..7ccaa81a3 100644
--- a/packages/core/src/lib/LinkTo/LinkTo.styles.ts
+++ b/packages/core/src/lib/LinkTo/LinkTo.styles.ts
@@ -7,13 +7,16 @@ import type { LinkToProps } from './types';
 
 // styles
 type TStyleProps = Pick<LinkToProps, 'iconLayout'>;
-type LinkStyledProps = Pick<LinkToProps, 'underline'>;
+interface LinkStyledProps {
+    underline: boolean;
+    textColor: string;
+}
 
 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;
@@ -30,7 +33,7 @@ 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%;
diff --git a/packages/core/src/lib/LinkTo/LinkTo.tsx b/packages/core/src/lib/LinkTo/LinkTo.tsx
index 1ec0484c9..570df968a 100644
--- a/packages/core/src/lib/LinkTo/LinkTo.tsx
+++ b/packages/core/src/lib/LinkTo/LinkTo.tsx
@@ -12,6 +12,7 @@ const LinkTo: React.FC<LinkToProps> = ({
     text,
     type = 'external',
     underline = true,
+    textColor="",
     ...props
 }) => {
     const renderContent = () => (
@@ -22,7 +23,7 @@ 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' }}
                     />
@@ -30,7 +31,7 @@ const LinkTo: React.FC<LinkToProps> = ({
                     <Link
                         title="link icon"
                         titleId="linkto link icon"
-                        fill={color.navy40}
+                        fill={textColor || color.navy40}
                         fontSize={18}
                         style={{ marginTop: 'auto' }}
                     />
@@ -47,6 +48,7 @@ const LinkTo: React.FC<LinkToProps> = ({
             href={`${type === 'email' ? 'mailto:' : ''}${address}`}
             target={`${type === 'email' ? '_self' : '_blank'}`}
             underline={underline}
+            textColor={textColor}
             {...props}
         >
             {renderContent()}
@@ -56,6 +58,7 @@ const LinkTo: React.FC<LinkToProps> = ({
             data-testid="test-link-to"
             to={address}
             underline={underline}
+            textColor={textColor}
         >
             {renderContent()}
         </InternalLinkStyled>
diff --git a/packages/core/src/lib/LinkTo/types.ts b/packages/core/src/lib/LinkTo/types.ts
index 41501d891..970d791b8 100644
--- a/packages/core/src/lib/LinkTo/types.ts
+++ b/packages/core/src/lib/LinkTo/types.ts
@@ -28,5 +28,10 @@ export interface LinkToProps {
     /**
      * Is link underlined
      */
-    underline?: boolean
+    underline?: boolean;
+
+    /**
+     * custom color (text, icon and underline)
+     */
+    textColor?: string;
 }

From be25a2c5b736a47a4d38ae0bbc0790a0277fcf99 Mon Sep 17 00:00:00 2001
From: 0xTijan <tijan.nartnik@gmail.com>
Date: Tue, 1 Nov 2022 12:39:50 +0100
Subject: [PATCH 3/8] added Typography to LinkTo

---
 packages/core/src/lib/LinkTo/LinkTo.tsx | 10 +++++++---
 packages/core/src/lib/LinkTo/types.ts   |  4 +++-
 2 files changed, 10 insertions(+), 4 deletions(-)

diff --git a/packages/core/src/lib/LinkTo/LinkTo.tsx b/packages/core/src/lib/LinkTo/LinkTo.tsx
index 570df968a..2b01b97d5 100644
--- a/packages/core/src/lib/LinkTo/LinkTo.tsx
+++ b/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;
@@ -36,9 +37,13 @@ const LinkTo: React.FC<LinkToProps> = ({
                         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>
     );
 
@@ -49,7 +54,6 @@ const LinkTo: React.FC<LinkToProps> = ({
             target={`${type === 'email' ? '_self' : '_blank'}`}
             underline={underline}
             textColor={textColor}
-            {...props}
         >
             {renderContent()}
         </LinkStyled>
diff --git a/packages/core/src/lib/LinkTo/types.ts b/packages/core/src/lib/LinkTo/types.ts
index 970d791b8..472b2dcac 100644
--- a/packages/core/src/lib/LinkTo/types.ts
+++ b/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
      */

From 48081c1f53a506549389963d39dfd97f069a9d28 Mon Sep 17 00:00:00 2001
From: 0xTijan <tijan.nartnik@gmail.com>
Date: Tue, 1 Nov 2022 20:21:17 +0100
Subject: [PATCH 4/8] fixed textColor props in LinkTo

---
 packages/core/src/lib/LinkTo/LinkTo.styles.ts | 2 +-
 packages/core/src/lib/LinkTo/LinkTo.tsx       | 2 +-
 2 files changed, 2 insertions(+), 2 deletions(-)

diff --git a/packages/core/src/lib/LinkTo/LinkTo.styles.ts b/packages/core/src/lib/LinkTo/LinkTo.styles.ts
index 7ccaa81a3..29d3dc4b8 100644
--- a/packages/core/src/lib/LinkTo/LinkTo.styles.ts
+++ b/packages/core/src/lib/LinkTo/LinkTo.styles.ts
@@ -9,7 +9,7 @@ import type { LinkToProps } from './types';
 type TStyleProps = Pick<LinkToProps, 'iconLayout'>;
 interface LinkStyledProps {
     underline: boolean;
-    textColor: string;
+    textColor: string | undefined;
 }
 
 const LinkStyled = styled.a<LinkStyledProps>`
diff --git a/packages/core/src/lib/LinkTo/LinkTo.tsx b/packages/core/src/lib/LinkTo/LinkTo.tsx
index 2b01b97d5..1e86c8165 100644
--- a/packages/core/src/lib/LinkTo/LinkTo.tsx
+++ b/packages/core/src/lib/LinkTo/LinkTo.tsx
@@ -13,7 +13,7 @@ const LinkTo: React.FC<LinkToProps> = ({
     text,
     type = 'external',
     underline = true,
-    textColor="",
+    textColor,
     ...props
 }) => {
     const renderContent = () => (

From e9485eb47809facb6ee1b3a0df19b97a16fe306a Mon Sep 17 00:00:00 2001
From: Abhinav MV <35369843+AbhinavMV@users.noreply.github.com>
Date: Wed, 2 Nov 2022 10:50:20 +0530
Subject: [PATCH 5/8] Create neat-vans-hammer.md

---
 .changeset/neat-vans-hammer.md | 5 +++++
 1 file changed, 5 insertions(+)
 create mode 100644 .changeset/neat-vans-hammer.md

diff --git a/.changeset/neat-vans-hammer.md b/.changeset/neat-vans-hammer.md
new file mode 100644
index 000000000..495335023
--- /dev/null
+++ b/.changeset/neat-vans-hammer.md
@@ -0,0 +1,5 @@
+---
+"@web3uikit/core": patch
+---
+
+[LinkTo]: Add customization

From 8c6db97b2df469fa21c9cc572dd49c0cabfd40db Mon Sep 17 00:00:00 2001
From: 0xTijan <tijan.nartnik@gmail.com>
Date: Wed, 2 Nov 2022 08:42:32 +0100
Subject: [PATCH 6/8] renamed underline to isUnderlined in LinkTo

---
 packages/core/src/lib/LinkTo/LinkTo.styles.ts | 6 +++---
 packages/core/src/lib/LinkTo/LinkTo.tsx       | 6 +++---
 packages/core/src/lib/LinkTo/types.ts         | 2 +-
 3 files changed, 7 insertions(+), 7 deletions(-)

diff --git a/packages/core/src/lib/LinkTo/LinkTo.styles.ts b/packages/core/src/lib/LinkTo/LinkTo.styles.ts
index 29d3dc4b8..72b7201aa 100644
--- a/packages/core/src/lib/LinkTo/LinkTo.styles.ts
+++ b/packages/core/src/lib/LinkTo/LinkTo.styles.ts
@@ -8,7 +8,7 @@ import type { LinkToProps } from './types';
 // styles
 type TStyleProps = Pick<LinkToProps, 'iconLayout'>;
 interface LinkStyledProps {
-    underline: boolean;
+    isUnderlined: boolean;
     textColor: string | undefined;
 }
 
@@ -22,7 +22,7 @@ const LinkStyled = styled.a<LinkStyledProps>`
     height: fit-content;
     max-width: 100%;
     width: fit-content;
-    text-decoration: ${({ underline }) => underline ? 'underline': 'none'};
+    text-decoration: ${({ isUnderlined }) => isUnderlined ? 'underline': 'none'};
 
     &:hover {
         filter: brightness(0.7);
@@ -38,7 +38,7 @@ const InternalLinkStyled = styled(Link)<LinkStyledProps>`
     font-weight: 600;
     max-width: 100%;
     width: fit-content;
-    text-decoration: ${({ underline }) => underline ? 'underline': 'none'};
+    text-decoration: ${({ isUnderlined }) => isUnderlined ? 'underline': 'none'};
 
     &:hover {
         filter: brightness(0.7);
diff --git a/packages/core/src/lib/LinkTo/LinkTo.tsx b/packages/core/src/lib/LinkTo/LinkTo.tsx
index 1e86c8165..1907af3b6 100644
--- a/packages/core/src/lib/LinkTo/LinkTo.tsx
+++ b/packages/core/src/lib/LinkTo/LinkTo.tsx
@@ -12,7 +12,7 @@ const LinkTo: React.FC<LinkToProps> = ({
     iconLayout = 'leading',
     text,
     type = 'external',
-    underline = true,
+    isUnderlined = true,
     textColor,
     ...props
 }) => {
@@ -52,7 +52,7 @@ const LinkTo: React.FC<LinkToProps> = ({
             data-testid="test-link-to"
             href={`${type === 'email' ? 'mailto:' : ''}${address}`}
             target={`${type === 'email' ? '_self' : '_blank'}`}
-            underline={underline}
+            isUnderlined={isUnderlined}
             textColor={textColor}
         >
             {renderContent()}
@@ -61,7 +61,7 @@ const LinkTo: React.FC<LinkToProps> = ({
         <InternalLinkStyled
             data-testid="test-link-to"
             to={address}
-            underline={underline}
+            isUnderlined={isUnderlined}
             textColor={textColor}
         >
             {renderContent()}
diff --git a/packages/core/src/lib/LinkTo/types.ts b/packages/core/src/lib/LinkTo/types.ts
index 472b2dcac..dc57c7144 100644
--- a/packages/core/src/lib/LinkTo/types.ts
+++ b/packages/core/src/lib/LinkTo/types.ts
@@ -30,7 +30,7 @@ export interface LinkToProps extends TypographyProps {
     /**
      * Is link underlined
      */
-    underline?: boolean;
+    isUnderlined?: boolean;
 
     /**
      * custom color (text, icon and underline)

From d974d142a8a387f5523afd932d80046040c670fd Mon Sep 17 00:00:00 2001
From: Makda Sebahtu <sebhatumakda20gmail.com>
Date: Tue, 8 Nov 2022 13:15:09 +0100
Subject: [PATCH 7/8] add onClick and icon props

---
 .../core/src/lib/LinkTo/LinkTo.stories.tsx    | 20 +++++++++++++-
 packages/core/src/lib/LinkTo/LinkTo.styles.ts |  8 +++---
 packages/core/src/lib/LinkTo/LinkTo.tsx       | 27 ++++++++++++-------
 packages/core/src/lib/LinkTo/types.ts         | 24 ++++++++++++++---
 4 files changed, 62 insertions(+), 17 deletions(-)

diff --git a/packages/core/src/lib/LinkTo/LinkTo.stories.tsx b/packages/core/src/lib/LinkTo/LinkTo.stories.tsx
index 77a5c544e..0f31c8f9e 100644
--- a/packages/core/src/lib/LinkTo/LinkTo.stories.tsx
+++ b/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) => (
diff --git a/packages/core/src/lib/LinkTo/LinkTo.styles.ts b/packages/core/src/lib/LinkTo/LinkTo.styles.ts
index 72b7201aa..de3ee3ed2 100644
--- a/packages/core/src/lib/LinkTo/LinkTo.styles.ts
+++ b/packages/core/src/lib/LinkTo/LinkTo.styles.ts
@@ -9,7 +9,7 @@ import type { LinkToProps } from './types';
 type TStyleProps = Pick<LinkToProps, 'iconLayout'>;
 interface LinkStyledProps {
     isUnderlined: boolean;
-    textColor: string | undefined;
+    textColor?: typeof color | string;
 }
 
 const LinkStyled = styled.a<LinkStyledProps>`
@@ -22,7 +22,8 @@ const LinkStyled = styled.a<LinkStyledProps>`
     height: fit-content;
     max-width: 100%;
     width: fit-content;
-    text-decoration: ${({ isUnderlined }) => isUnderlined ? 'underline': 'none'};
+    text-decoration: ${({ isUnderlined }) =>
+        isUnderlined ? 'underline' : 'none'};
 
     &:hover {
         filter: brightness(0.7);
@@ -38,7 +39,8 @@ const InternalLinkStyled = styled(Link)<LinkStyledProps>`
     font-weight: 600;
     max-width: 100%;
     width: fit-content;
-    text-decoration: ${({ isUnderlined }) => isUnderlined ? 'underline': 'none'};
+    text-decoration: ${({ isUnderlined }) =>
+        isUnderlined ? 'underline' : 'none'};
 
     &:hover {
         filter: brightness(0.7);
diff --git a/packages/core/src/lib/LinkTo/LinkTo.tsx b/packages/core/src/lib/LinkTo/LinkTo.tsx
index 1907af3b6..11221a6c4 100644
--- a/packages/core/src/lib/LinkTo/LinkTo.tsx
+++ b/packages/core/src/lib/LinkTo/LinkTo.tsx
@@ -1,8 +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;
@@ -13,18 +14,23 @@ const LinkTo: React.FC<LinkToProps> = ({
     text,
     type = 'external',
     isUnderlined = true,
-    textColor,
+    iconColor,
+    color,
+    onClick,
+    icon,
     ...props
 }) => {
     const renderContent = () => (
         <SpanStyledFlex iconLayout={iconLayout} data-testid="test-link-flex">
-            {iconLayout !== 'none' &&
+            {iconLayout !== 'none' && icon ? (
+                <React.Fragment>{icon}</React.Fragment>
+            ) : (
                 type !== 'internal' &&
                 (type === 'email' ? (
                     <Mail
                         title="mail icon"
                         titleId="linkto mail icon"
-                        fill={textColor || color.navy40}
+                        fill={iconColor || colorStyle.navy40}
                         fontSize={18}
                         style={{ marginTop: 'auto' }}
                     />
@@ -32,14 +38,15 @@ const LinkTo: React.FC<LinkToProps> = ({
                     <Link
                         title="link icon"
                         titleId="linkto link icon"
-                        fill={textColor || color.navy40}
+                        fill={iconColor || colorStyle.navy40}
                         fontSize={18}
                         style={{ marginTop: 'auto' }}
                     />
-                ))}
+                ))
+            )}
             <Typography
                 data-testid="test-link-text"
-                color={textColor || color.navy40}
+                color={color || colorStyle.navy40}
                 {...props}
             >
                 {text || address}
@@ -53,7 +60,8 @@ const LinkTo: React.FC<LinkToProps> = ({
             href={`${type === 'email' ? 'mailto:' : ''}${address}`}
             target={`${type === 'email' ? '_self' : '_blank'}`}
             isUnderlined={isUnderlined}
-            textColor={textColor}
+            textColor={color}
+            onClick={onClick}
         >
             {renderContent()}
         </LinkStyled>
@@ -62,7 +70,8 @@ const LinkTo: React.FC<LinkToProps> = ({
             data-testid="test-link-to"
             to={address}
             isUnderlined={isUnderlined}
-            textColor={textColor}
+            textColor={color}
+            onClick={onClick}
         >
             {renderContent()}
         </InternalLinkStyled>
diff --git a/packages/core/src/lib/LinkTo/types.ts b/packages/core/src/lib/LinkTo/types.ts
index dc57c7144..f67a5228a 100644
--- a/packages/core/src/lib/LinkTo/types.ts
+++ b/packages/core/src/lib/LinkTo/types.ts
@@ -1,4 +1,4 @@
-import { TypographyProps } from "../Typography";
+import { TypographyProps } from '../Typography';
 
 export const layoutState = ['leading', 'trailing', 'none'] as const;
 export type TLayoutState = typeof layoutState[number];
@@ -6,7 +6,12 @@ export type TLayoutState = typeof layoutState[number];
 export const typeState = ['email', 'external', 'internal'] as const;
 export type TTypeState = typeof typeState[number];
 
-export interface LinkToProps extends TypographyProps {
+type TTextProps = Pick<
+    TypographyProps,
+    'color' | 'variant' | 'italic' | 'monospace' | 'weight'
+>;
+
+export interface LinkToProps extends TTextProps {
     /**
      * what is the address you are linking to
      */
@@ -33,7 +38,18 @@ export interface LinkToProps extends TypographyProps {
     isUnderlined?: boolean;
 
     /**
-     * custom color (text, icon and underline)
+     * 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
      */
-    textColor?: string;
+    icon?: JSX.Element;
 }

From 81bfa475518297cd85e031fa5e21d1f4cbe9d291 Mon Sep 17 00:00:00 2001
From: Makda Sebahtu <sebhatumakda20gmail.com>
Date: Tue, 8 Nov 2022 14:53:37 +0100
Subject: [PATCH 8/8] fix unit test

---
 packages/core/src/lib/LinkTo/LinkTo.tsx | 13 +++++++------
 1 file changed, 7 insertions(+), 6 deletions(-)

diff --git a/packages/core/src/lib/LinkTo/LinkTo.tsx b/packages/core/src/lib/LinkTo/LinkTo.tsx
index 11221a6c4..22cd29e67 100644
--- a/packages/core/src/lib/LinkTo/LinkTo.tsx
+++ b/packages/core/src/lib/LinkTo/LinkTo.tsx
@@ -22,11 +22,8 @@ const LinkTo: React.FC<LinkToProps> = ({
 }) => {
     const renderContent = () => (
         <SpanStyledFlex iconLayout={iconLayout} data-testid="test-link-flex">
-            {iconLayout !== 'none' && icon ? (
-                <React.Fragment>{icon}</React.Fragment>
-            ) : (
-                type !== 'internal' &&
-                (type === 'email' ? (
+            {iconLayout !== 'none' && type !== 'internal' ? (
+                type === 'email' ? (
                     <Mail
                         title="mail icon"
                         titleId="linkto mail icon"
@@ -34,6 +31,8 @@ const LinkTo: React.FC<LinkToProps> = ({
                         fontSize={18}
                         style={{ marginTop: 'auto' }}
                     />
+                ) : icon ? (
+                    <React.Fragment>{icon}</React.Fragment>
                 ) : (
                     <Link
                         title="link icon"
@@ -42,7 +41,9 @@ const LinkTo: React.FC<LinkToProps> = ({
                         fontSize={18}
                         style={{ marginTop: 'auto' }}
                     />
-                ))
+                )
+            ) : (
+                icon && <React.Fragment>{icon}</React.Fragment>
             )}
             <Typography
                 data-testid="test-link-text"