feat(component): add button component (#47)

* feat(component): add button

add button component

resolves #40

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

* docs(storybook): add stories for button

add new stories for button component

resolves #40

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

* fix(component): fix Button component

fix Button component types to extend from BaseStyles and add classes to the props list
fix BaseStyles to convert Record as Partial to make things optional

resolves #40

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

* docs(stories): add stories for Button

add new stories for Button components with Primary and Secondary variants

resolves #40

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

docs/iframe.html

@@ -361,4 +361,4 @@
 
 
 
-            window['STORIES'] = [{"titlePrefix":"","directory":"./src","files":"**/*.stories.@(js|jsx|ts|tsx|mdx)","importPathMatcher":"^\\.[\\\\/](?:src(?:\\/(?!\\.)(?:(?:(?!(?:^|\\/)\\.).)*?)\\/|\\/|$)(?!\\.)(?=.)[^/]*?\\.stories\\.(js|jsx|ts|tsx|mdx))$"}];</script><script src="runtime~main.9a1c2b7b.iframe.bundle.js"></script><script src="vendors~main.89b8a589.iframe.bundle.js"></script><script src="main.88962c2f.iframe.bundle.js"></script></body></html>
+            window['STORIES'] = [{"titlePrefix":"","directory":"./src","files":"**/*.stories.@(js|jsx|ts|tsx|mdx)","importPathMatcher":"^\\.[\\\\/](?:src(?:[\\\\/](?!\\.)(?:(?:(?!(?:^|[\\\\/])\\.).)*?)[\\\\/]|[\\\\/]|$)(?!\\.)(?=.)[^\\\\/]*?\\.stories\\.(js|jsx|ts|tsx|mdx))$"}];</script><script src="runtime~main.9a1c2b7b.iframe.bundle.js"></script><script src="vendors~main.a2363b09.iframe.bundle.js"></script><script src="main.8f292684.iframe.bundle.js"></script></body></html>

docs/project.json

@@ -1 +1 @@
-{"generatedAt":1656906823841,"builder":{"name":"webpack4"},"hasCustomBabel":false,"hasCustomWebpack":false,"hasStaticDirs":false,"hasStorybookEslint":false,"refCount":0,"packageManager":{"type":"yarn","version":"1.22.19"},"storybookVersion":"6.5.9","language":"typescript","storybookPackages":{"@storybook/addon-actions":{"version":"6.5.9"},"@storybook/addon-docs":{"version":"6.5.9"},"@storybook/builder-webpack4":{"version":"6.5.9"},"@storybook/manager-webpack4":{"version":"6.5.9"},"@storybook/react":{"version":"6.5.9"},"@storybook/testing-library":{"version":"0.0.13"}},"framework":{"name":"react"},"addons":{"@storybook/addon-links":{"version":"6.5.9"},"@storybook/addon-essentials":{"version":"6.5.9"},"@storybook/addon-interactions":{"version":"6.5.9"}}}
+{"generatedAt":1656912542579,"builder":{"name":"webpack4"},"hasCustomBabel":false,"hasCustomWebpack":false,"hasStaticDirs":false,"hasStorybookEslint":false,"refCount":0,"packageManager":{"type":"yarn","version":"1.22.17"},"storybookVersion":"6.5.9","language":"typescript","storybookPackages":{"@storybook/addon-actions":{"version":"6.5.9"},"@storybook/addon-docs":{"version":"6.5.9"},"@storybook/builder-webpack4":{"version":"6.5.9"},"@storybook/manager-webpack4":{"version":"6.5.9"},"@storybook/react":{"version":"6.5.9"},"@storybook/testing-library":{"version":"0.0.13"}},"framework":{"name":"react"},"addons":{"@storybook/addon-links":{"version":"6.5.9"},"@storybook/addon-essentials":{"version":"6.5.9"},"@storybook/addon-interactions":{"version":"6.5.9"}}}

src/components/Button/Button.stories.tsx

@@ -0,0 +1,71 @@
+import { ComponentStory, ComponentMeta } from '@storybook/react';
+import { CSSProperties } from 'react';
+
+import { Email } from '../Email/Email';
+import { Section } from '../Section/Section';
+import { Column } from '../Column/Column';
+import { Button, ButtonProps } from './Button';
+
+export default {
+  component: Button,
+} as ComponentMeta<typeof Button>;
+
+//“template” of how args map to rendering
+const Template: ComponentStory<typeof Button> = (args) => (
+  <Email>
+    <Section>
+      <Column>
+        <Button {...args} />
+      </Column>
+    </Section>
+  </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({});
+Default.args = defaultArgs;
+
+export const Primary = Template.bind({});
+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',
+  classes: {
+    root: rootStyles,
+    secondary: {
+      backgroundColor: 'red',
+      color: 'white',
+    },
+  },
+};

src/components/Button/Button.tsx

@@ -0,0 +1,37 @@
+import { ReactNode, HTMLAttributeAnchorTarget } from 'react';
+import { BaseStyleProp } from '../types';
+import { makeStyles } from '../../utils/makeStyles';
+import { sx } from '../../utils/sx';
+
+type ButtonStyles = 'root' | 'primary' | 'secondary';
+
+export interface ButtonProps extends BaseStyleProp<ButtonStyles> {
+  children?: ReactNode;
+  variant?: 'primary' | 'secondary';
+  href: string;
+  target?: HTMLAttributeAnchorTarget;
+}
+
+const useStyles = makeStyles({
+  root: {},
+  primary: {},
+  secondary: {},
+});
+
+export const Button = ({
+  children,
+  variant = 'primary',
+  href,
+  target = '_blank',
+  classes,
+  className,
+}: ButtonProps): JSX.Element => {
+  const styles = useStyles({ classes });
+  const buttonStyle = sx(styles.root, styles[variant]);
+
+  return (
+    <a href={href} target={target} style={buttonStyle} className={className}>
+      {children}
+    </a>
+  );
+};

src/components/Button/index.ts

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

src/components/index.ts

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

src/components/types/index.ts

@@ -1,6 +1,6 @@
 import { CSSProperties } from 'react';
 
 export interface BaseStyleProp<T extends string> {
-  classes?: Record<T, CSSProperties>;
+  classes?: Partial<Record<T, CSSProperties>>;
   className?: string;
 }