From 71390e796dfdd5efe2e713819d74fab60095dd03 Mon Sep 17 00:00:00 2001
From: Niloy Sikdar <niloysikdar30@gmail.com>
Date: Tue, 5 Jul 2022 20:13:27 +0530
Subject: [PATCH] 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       |  2 +-
 src/components/Link/Link.stories.tsx | 35 ++++++++++++++++++++++++++++
 src/components/Link/Link.tsx         | 31 ++++++++++++++++++++++++
 src/components/Link/index.ts         |  1 +
 src/components/index.ts              |  1 +
 5 files changed, 69 insertions(+), 1 deletion(-)
 create mode 100644 src/components/Link/Link.stories.tsx
 create mode 100644 src/components/Link/Link.tsx
 create mode 100644 src/components/Link/index.ts

diff --git a/src/components/Button/index.ts b/src/components/Button/index.ts
index fe9c53c..4acfb57 100644
--- a/src/components/Button/index.ts
+++ b/src/components/Button/index.ts
@@ -1 +1 @@
-export { Button } from './Button';
+export { Button, ButtonProps } from './Button';
diff --git a/src/components/Link/Link.stories.tsx b/src/components/Link/Link.stories.tsx
new file mode 100644
index 0000000..bb15c62
--- /dev/null
+++ b/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',
+    },
+  },
+};
diff --git a/src/components/Link/Link.tsx b/src/components/Link/Link.tsx
new file mode 100644
index 0000000..34fe38c
--- /dev/null
+++ b/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>
+  );
+};
diff --git a/src/components/Link/index.ts b/src/components/Link/index.ts
new file mode 100644
index 0000000..cd02a7d
--- /dev/null
+++ b/src/components/Link/index.ts
@@ -0,0 +1 @@
+export { Link, LinkProps } from './Link';
diff --git a/src/components/index.ts b/src/components/index.ts
index 2f6affc..4d47c35 100644
--- a/src/components/index.ts
+++ b/src/components/index.ts
@@ -2,3 +2,4 @@ export * from './Email';
 export * from './Section';
 export * from './Column';
 export * from './Button';
+export * from './Link';