feat(component): add Link component (#51)

* feat(component): add link component

add a new Link component to add links to email

resolves #43

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

* docs(storybook): link stories

add stories for Link component

resolves #43

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

* 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

@@ -0,0 +1,35 @@
+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 {
+  component: Link,
+} as ComponentMeta<typeof Link>;
+
+//“template” of how args map to rendering
+const Template: ComponentStory<typeof Link> = (args) => (
+  <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

@@ -0,0 +1,31 @@
+import { ReactNode, HTMLAttributeAnchorTarget } from 'react';
+import { BaseStyleProp } from '../types';
+import { makeStyles } from '../../utils/makeStyles';
+
+type LinkStyles = 'root';
+
+export interface LinkProps extends BaseStyleProp<LinkStyles> {
+  children?: ReactNode;
+  href: string;
+  target?: HTMLAttributeAnchorTarget;
+}
+
+const useStyles = makeStyles({
+  root: {},
+});
+
+export const Link = ({
+  children,
+  href,
+  target = '_blank',
+  classes,
+  className,
+}: LinkProps): JSX.Element => {
+  const styles = useStyles({ classes });
+
+  return (
+    <a href={href} target={target} style={styles.root} className={className}>
+      {children}
+    </a>
+  );
+};

src/components/Link/index.ts

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

src/components/index.ts

@@ -2,3 +2,4 @@ export * from './Email';
 export * from './Section';
 export * from './Column';
 export * from './Button';
+export * from './Link';