feat(TextLink): add component (#496)

src/component-library/TextLink/TextLink.stories.tsx

@@ -0,0 +1,19 @@
+import { Meta, Story } from '@storybook/react';
+
+import { TextLink, TextLinkProps } from '.';
+
+const Template: Story<TextLinkProps> = (args) => <TextLink {...args} />;
+
+const Default = Template.bind({});
+Default.args = {
+  external: true,
+  to: 'https://interlay.io/',
+  children: 'Link'
+};
+
+export { Default };
+
+export default {
+  title: 'Components/TextLink',
+  component: TextLink
+} as Meta;

src/component-library/TextLink/TextLink.style.tsx

@@ -0,0 +1,14 @@
+import styled from 'styled-components';
+
+import { resolveTextColor } from '../Text';
+import { Colors } from '../utils/prop-types';
+
+type BaseTextLinkProps = {
+  $color?: Colors;
+};
+
+const BaseTextLink = styled.a<BaseTextLinkProps>`
+  color: ${({ $color }) => resolveTextColor($color)};
+`;
+
+export { BaseTextLink };

src/component-library/TextLink/TextLink.tsx

@@ -0,0 +1,27 @@
+import { forwardRef } from 'react';
+import { Link, LinkProps } from 'react-router-dom';
+
+import { Colors } from '../utils/prop-types';
+import { BaseTextLink } from './TextLink.style';
+
+type Props = {
+  color?: Colors;
+  external?: boolean;
+};
+
+type NativeAttrs = Omit<LinkProps, keyof Props | 'href'>;
+
+type TextLinkProps = Props & NativeAttrs;
+
+const TextLink = forwardRef<HTMLAnchorElement, TextLinkProps>(
+  ({ color = 'primary', external, to, ...props }, ref): JSX.Element => {
+    const linkProps: TextLinkProps = external ? { to: { pathname: to }, target: '_blank', rel: 'noreferrer' } : { to };
+
+    return <BaseTextLink ref={ref} as={Link} $color={color} {...props} {...linkProps} />;
+  }
+);
+
+TextLink.displayName = 'TextLink';
+
+export { TextLink };
+export type { TextLinkProps };

src/component-library/TextLink/index.tsx

@@ -0,0 +1,2 @@
+export type { TextLinkProps } from './TextLink';
+export { TextLink } from './TextLink';

src/component-library/index.tsx

@@ -26,6 +26,8 @@ export type { TabsItemProps, TabsProps } from './Tabs';
 export { Tabs, TabsItem } from './Tabs';
 export type { DlProps, TextProps } from './Text';
 export { Dl, Em, H1, H2, H3, H4, H5, H6, P, Span, Strong } from './Text';
+export type { TextLinkProps } from './TextLink';
+export { TextLink } from './TextLink';
 export type { ComponentLibraryTheme } from './theme';
 export { theme } from './theme';
 export type { TokenBalanceProps } from './TokenBalance';

src/component-library/utils/prop-types.ts

@@ -6,12 +6,16 @@ const status = tuple('error', 'warning', 'success');
 
 const sizes = tuple('small', 'medium', 'large');
 
+export const colors = tuple('primary', 'secondary', 'tertiary');
+
 export type CTAVariants = typeof ctaVariants[number];
 
 export type Status = typeof status[number];
 
 export type Sizes = typeof sizes[number];
 
+export type Colors = typeof colors[number];
+
 export { ctaVariants, sizes, status };
 
 export { tuple };