From eb301f46575ac2fc420074517b90f1146f018872 Mon Sep 17 00:00:00 2001
From: Niloy Sikdar <niloysikdar30@gmail.com>
Date: Tue, 5 Jul 2022 23:25:03 +0530
Subject: [PATCH] feat(component): add Divider component (#52)

* feat(component): add divider component

Add new Divider component

resolves #44
---
 src/components/Divider/Divider.stories.tsx | 33 +++++++++++++++++
 src/components/Divider/Divider.tsx         | 42 ++++++++++++++++++++++
 src/components/Divider/index.ts            |  1 +
 src/components/index.ts                    |  1 +
 4 files changed, 77 insertions(+)
 create mode 100644 src/components/Divider/Divider.stories.tsx
 create mode 100644 src/components/Divider/Divider.tsx
 create mode 100644 src/components/Divider/index.ts

diff --git a/src/components/Divider/Divider.stories.tsx b/src/components/Divider/Divider.stories.tsx
new file mode 100644
index 0000000..b1a6ca4
--- /dev/null
+++ b/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%',
+};
diff --git a/src/components/Divider/Divider.tsx b/src/components/Divider/Divider.tsx
new file mode 100644
index 0000000..0c44fd5
--- /dev/null
+++ b/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} />;
+};
diff --git a/src/components/Divider/index.ts b/src/components/Divider/index.ts
new file mode 100644
index 0000000..8ba836a
--- /dev/null
+++ b/src/components/Divider/index.ts
@@ -0,0 +1 @@
+export { Divider } from './Divider';
diff --git a/src/components/index.ts b/src/components/index.ts
index 4d47c35..ffb1c8e 100644
--- a/src/components/index.ts
+++ b/src/components/index.ts
@@ -3,3 +3,4 @@ export * from './Section';
 export * from './Column';
 export * from './Button';
 export * from './Link';
+export * from './Divider';