fix(component): fix Link component

fix Link component with the updated structure and props

resolves #43

Signed-off-by: Niloy Sikdar <niloysikdar30@gmail.com>

src/components/Button/index.ts

@@ -1 +1 @@
-export { Button } from './Button';
+export { Button, ButtonProps } from './Button';

src/components/Link/Link.stories.tsx

@@ -1,5 +1,8 @@
 import { ComponentStory, ComponentMeta } from '@storybook/react';
 
+import { Email } from '../Email/Email';
+import { Section } from '../Section/Section';
+import { Column } from '../Column/Column';
 import { Link } from './Link';
 
 export default {
@@ -8,18 +11,25 @@ export default {
 
 //“template” of how args map to rendering
 const Template: ComponentStory<typeof Link> = (args) => (
-  <table>
-    <tbody>
-      <tr>
-        <Link {...args} />
-      </tr>
-    </tbody>
-  </table>
+  <Email>
+    <Section>
+      <Column>
+        <h2>
+          Please <Link {...args} /> to access
+        </h2>
+      </Column>
+    </Section>
+  </Email>
 );
 
 export const Default = Template.bind({});
 
 Default.args = {
   children: 'Click here',
   href: 'https://github.com/leopardslab/react-email',
+  classes: {
+    root: {
+      color: 'red',
+    },
+  },
 };

src/components/Link/Link.tsx

@@ -1,31 +1,31 @@
-import { ReactNode, CSSProperties } from 'react';
+import { ReactNode, HTMLAttributeAnchorTarget } from 'react';
+import { BaseStyleProp } from '../types';
+import { makeStyles } from '../../utils/makeStyles';
 
-export interface LinkProps {
+type LinkStyles = 'root';
+
+export interface LinkProps extends BaseStyleProp<LinkStyles> {
   children?: ReactNode;
   href: string;
-  align?: 'left' | 'center' | 'right';
-  style?: CSSProperties;
+  target?: HTMLAttributeAnchorTarget;
 }
 
-export const Link = ({ children, href, align = 'left', style }: LinkProps): JSX.Element => {
+const useStyles = makeStyles({
+  root: {},
+});
+
+export const Link = ({
+  children,
+  href,
+  target = '_blank',
+  classes,
+  className,
+}: LinkProps): JSX.Element => {
+  const styles = useStyles({ classes });
+
   return (
-    <td
-      align={align}
-      style={{
-        padding: '10px 20px',
-        wordBreak: 'break-word',
-      }}
-    >
-      <a
-        href={href}
-        target="_blank"
-        style={{
-          fontSize: '18px',
-          ...style,
-        }}
-      >
-        {children}
-      </a>
-    </td>
+    <a href={href} target={target} style={styles.root} className={className}>
+      {children}
+    </a>
   );
 };

src/components/Link/index.ts

@@ -1 +1 @@
-export { Link } from './Link';
+export { Link, LinkProps } from './Link';