feat(component): add Divider component (#52)

* feat(component): add divider component

Add new Divider component

resolves #44

src/components/Divider/Divider.stories.tsx

@@ -0,0 +1,33 @@
+import { ComponentStory, ComponentMeta } from '@storybook/react';
+
+import { Email } from '../Email/Email';
+import { Section } from '../Section/Section';
+import { Column } from '../Column/Column';
+import { Divider } from './Divider';
+
+export default {
+  component: Divider,
+} as ComponentMeta<typeof Divider>;
+
+//“template” of how args map to rendering
+const Template: ComponentStory<typeof Divider> = (args) => (
+  <Email>
+    <Section>
+      <Column>
+        <h2>Hello World 1</h2>
+        <Divider {...args} />
+        <h2>Hello World 2</h2>
+      </Column>
+    </Section>
+  </Email>
+);
+
+export const Default = Template.bind({});
+
+export const CustomStyles = Template.bind({});
+CustomStyles.args = {
+  align: 'center',
+  color: 'red',
+  size: '4px',
+  width: '50%',
+};

src/components/Divider/Divider.tsx

@@ -0,0 +1,42 @@
+import { CSSProperties } from 'react';
+import { makeStyles } from '../../utils/makeStyles';
+import { sx } from '../../utils/sx';
+import { BaseStyleProp } from '../types';
+
+type DividerStyles = 'root';
+
+export interface DividerProps extends BaseStyleProp<DividerStyles> {
+  align?: 'left' | 'center' | 'right';
+  color?: CSSProperties['borderColor'];
+  type?: CSSProperties['borderStyle'];
+  size?: CSSProperties['borderWidth'];
+  width?: CSSProperties['width'];
+}
+
+const alignStyles: Record<'left' | 'center' | 'right', CSSProperties> = {
+  left: { marginLeft: '0' },
+  center: { margin: 'auto' },
+  right: { marginRight: '0' },
+};
+
+const useStyles = makeStyles({
+  root: {},
+});
+
+export const Divider = ({
+  classes,
+  className,
+  align = 'left',
+  color = '',
+  type = 'solid',
+  size = '1px',
+  width = '100%',
+}: DividerProps): JSX.Element => {
+  const styles = useStyles({ classes });
+  const hrStyles = sx(styles.root, alignStyles[align], {
+    borderTop: `${size} ${type} ${color}`,
+    width: width,
+  });
+
+  return <hr style={hrStyles} className={className} />;
+};

src/components/Divider/index.ts

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

src/components/index.ts

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