feat(button): default stylings for styled-button

Add default styles inside defaultTheme config and update stories and snapshots of Button component Resolves #98 Signed-off-by: Niloy Sikdar <niloysikdar30@gmail.com>
leopardslab · Sep 5, 2022 · b7326ca · b7326ca
1 parent ce4ebfa
commit b7326ca
Show file tree

Hide file tree

Showing 3 changed files with 54 additions and 30 deletions.
diff --git a/src/components/Button/Button.stories.tsx b/src/components/Button/Button.stories.tsx
@@ -1,5 +1,4 @@
 import { ComponentStory, ComponentMeta } from '@storybook/react';
-import { CSSProperties } from 'react';
 
 import { Email } from '../Email/Email';
 import { Section } from '../Section/Section';
@@ -21,22 +20,9 @@ const Template: ComponentStory<typeof Button> = (args) => (
   </Email>
 );
 
-const rootStyles: CSSProperties = {
-  fontSize: '18px',
-  textDecoration: 'none',
-  padding: '10px 16px',
-  borderRadius: '5px',
-  cursor: 'pointer',
-  backgroundColor: 'blue',
-  color: 'white',
-};
-
 const defaultArgs: ButtonProps = {
   children: 'Default Button',
   href: 'https://github.com/leopardslab/react-email',
-  classes: {
-    root: rootStyles,
-  },
 };
 
 export const Default = Template.bind({});
@@ -47,24 +33,25 @@ Primary.args = {
   ...defaultArgs,
   children: 'Primary Button',
   variant: 'primary',
-  classes: {
-    root: rootStyles,
-    primary: {
-      backgroundColor: 'green',
-      color: 'white',
-    },
-  },
 };
 
 export const Secondary = Template.bind({});
 Secondary.args = {
   ...defaultArgs,
   children: 'Secondary Button',
   variant: 'secondary',
+};
+
+export const CustomStyles = Template.bind({});
+CustomStyles.args = {
+  ...defaultArgs,
+  children: 'Custom Styles',
   classes: {
-    root: rootStyles,
-    secondary: {
-      backgroundColor: 'red',
+    root: {
+      borderRadius: '10px',
+    },
+    primary: {
+      backgroundColor: 'green',
       color: 'white',
     },
   },

diff --git a/src/components/Button/__snapshots__/Button.stories.tsx.snap b/src/components/Button/__snapshots__/Button.stories.tsx.snap
@@ -1,5 +1,30 @@
 // Jest Snapshot v1, https://goo.gl/fbAQLP
 
+exports[`components/Button 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;"
+        >
+          <a href="https://github.com/leopardslab/react-email"
+             target="_blank"
+             style="font-size: 18px; text-decoration: none; padding: 10px 16px; border-radius: 10px; cursor: pointer; background-color: green; color: white;"
+          >
+            Custom Styles
+          </a>
+        </td>
+      </tr>
+    </tbody>
+  </table>
+</div>
+`;
+
 exports[`components/Button Default smoke-test 1`] = `
 <div style="margin: 0px auto; max-width: 600px;">
   <table cellpadding="0"
@@ -14,7 +39,7 @@ exports[`components/Button Default smoke-test 1`] = `
         >
           <a href="https://github.com/leopardslab/react-email"
              target="_blank"
-             style="font-size: 18px; text-decoration: none; padding: 10px 16px; border-radius: 5px; cursor: pointer; background-color: blue; color: white;"
+             style="font-size: 18px; text-decoration: none; padding: 10px 16px; border-radius: 5px; cursor: pointer; background-color: rgb(0, 123, 255); color: rgb(255, 255, 255);"
           >
             Default Button
           </a>
@@ -39,7 +64,7 @@ exports[`components/Button Primary smoke-test 1`] = `
         >
           <a href="https://github.com/leopardslab/react-email"
              target="_blank"
-             style="font-size: 18px; text-decoration: none; padding: 10px 16px; border-radius: 5px; cursor: pointer; background-color: green; color: white;"
+             style="font-size: 18px; text-decoration: none; padding: 10px 16px; border-radius: 5px; cursor: pointer; background-color: rgb(0, 123, 255); color: rgb(255, 255, 255);"
           >
             Primary Button
           </a>
@@ -64,7 +89,7 @@ exports[`components/Button Secondary smoke-test 1`] = `
         >
           <a href="https://github.com/leopardslab/react-email"
              target="_blank"
-             style="font-size: 18px; text-decoration: none; padding: 10px 16px; border-radius: 5px; cursor: pointer; background-color: red; color: white;"
+             style="font-size: 18px; text-decoration: none; padding: 10px 16px; border-radius: 5px; cursor: pointer; background-color: rgb(108, 117, 125); color: rgb(255, 255, 255);"
           >
             Secondary Button
           </a>

diff --git a/src/components/DefaultTheme/index.ts b/src/components/DefaultTheme/index.ts
@@ -65,9 +65,21 @@ export const defaultTheme: ThemeOptions = {
   section: { root: {}, body: {}, row: {} },
   column: { root: {} },
   button: {
-    root: {},
-    primary: {},
-    secondary: {},
+    root: {
+      fontSize: '18px',
+      textDecoration: 'none',
+      padding: '10px 16px',
+      borderRadius: '5px',
+      cursor: 'pointer',
+    },
+    primary: {
+      backgroundColor: '#007bff',
+      color: '#fff',
+    },
+    secondary: {
+      backgroundColor: '#6c757d',
+      color: '#fff',
+    },
   },
   link: { root: {} },
   divider: { root: {} },