feat(link): default styles for link (#105)

Add default styles inside defaultTheme config and update stories and snapshots of Link component Resolves #99 Signed-off-by: Niloy Sikdar <niloysikdar30@gmail.com> Signed-off-by: Niloy Sikdar <niloysikdar30@gmail.com>
leopardslab · Sep 9, 2022 · d830fec · d830fec
1 parent a35fdbb
commit d830fec
Show file tree

Hide file tree

Showing 3 changed files with 38 additions and 2 deletions.
diff --git a/src/components/DefaultTheme/index.ts b/src/components/DefaultTheme/index.ts
@@ -81,7 +81,7 @@ export const defaultTheme: ThemeOptions = {
       color: '#fff',
     },
   },
-  link: { root: {} },
+  link: { root: { color: '#0000EE', textDecoration: 'none' } },
   divider: { root: {} },
   typography: { root: {} },
   image: {

diff --git a/src/components/Link/Link.stories.tsx b/src/components/Link/Link.stories.tsx
@@ -27,9 +27,16 @@ export const Default = Template.bind({});
 Default.args = {
   children: 'Click here',
   href: 'https://github.com/leopardslab/react-email',
+};
+
+export const CustomStyles = Template.bind({});
+CustomStyles.args = {
+  children: 'Click here',
+  href: 'https://github.com/leopardslab/react-email',
   classes: {
     root: {
       color: 'red',
+      textDecoration: 'underline',
     },
   },
 };
diff --git a/src/components/Link/__snapshots__/Link.stories.tsx.snap b/src/components/Link/__snapshots__/Link.stories.tsx.snap
@@ -1,5 +1,34 @@
 // Jest Snapshot v1, https://goo.gl/fbAQLP
 
+exports[`components/Link CustomStyles smoke-test 1`] = `
+<div style="margin: 0px auto; max-width: 600px;">
+  <table cellpadding="0"
+         cellspacing="0"
+         role="presentation"
+         style="border: 0px; vertical-align: top; width: 100%;"
+  >
+    <tbody>
+      <tr>
+        <td align="center"
+            style="vertical-align: top;"
+        >
+          <h2>
+            Please
+            <a href="https://github.com/leopardslab/react-email"
+               target="_blank"
+               style="color: red; text-decoration: underline;"
+            >
+              Click here
+            </a>
+            to access
+          </h2>
+        </td>
+      </tr>
+    </tbody>
+  </table>
+</div>
+`;
+
 exports[`components/Link Default smoke-test 1`] = `
 <div style="margin: 0px auto; max-width: 600px;">
   <table cellpadding="0"
@@ -16,7 +45,7 @@ exports[`components/Link Default smoke-test 1`] = `
             Please
             <a href="https://github.com/leopardslab/react-email"
                target="_blank"
-               style="color: red;"
+               style="color: rgb(0, 0, 238); text-decoration: none;"
             >
               Click here
             </a>