From 84884dc0451670bcb584528893549bcea7f232be Mon Sep 17 00:00:00 2001
From: Niloy Sikdar <niloysikdar30@gmail.com>
Date: Sat, 16 Jul 2022 15:47:48 +0530
Subject: [PATCH] feat(component): add Preheader (#64)

* feat(component): add Preheader

add a Preheader component with text prop to render preheader text on the email clients

resolves #63

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

* fix(component): fix Preheader

Fix Preheader styling props

resolves #63

Signed-off-by: Niloy Sikdar <niloysikdar30@gmail.com>
---
 src/components/Preheader/Preheader.tsx | 31 ++++++++++++++++++++++++++
 src/components/Preheader/index.ts      |  1 +
 src/components/index.ts                |  1 +
 3 files changed, 33 insertions(+)
 create mode 100644 src/components/Preheader/Preheader.tsx
 create mode 100644 src/components/Preheader/index.ts

diff --git a/src/components/Preheader/Preheader.tsx b/src/components/Preheader/Preheader.tsx
new file mode 100644
index 0000000..72100f5
--- /dev/null
+++ b/src/components/Preheader/Preheader.tsx
@@ -0,0 +1,31 @@
+import { makeStyles } from '../../utils/makeStyles';
+import { BaseStyleProp } from '../types';
+
+type PreheaderStyles = 'root';
+
+export interface PreheaderProps extends BaseStyleProp<PreheaderStyles> {
+  text: string;
+}
+
+const useStyles = makeStyles({
+  root: {
+    display: 'none',
+    fontSize: '1px',
+    color: '#fff',
+    lineHeight: '1px',
+    maxHeight: 0,
+    maxWidth: 0,
+    opacity: 0,
+    overflow: 'hidden',
+  },
+});
+
+export const Preheader = ({ text, classes, className }: PreheaderProps) => {
+  const styles = useStyles({ classes });
+
+  return (
+    <div style={styles.root} className={className}>
+      {text}
+    </div>
+  );
+};
diff --git a/src/components/Preheader/index.ts b/src/components/Preheader/index.ts
new file mode 100644
index 0000000..f2700ba
--- /dev/null
+++ b/src/components/Preheader/index.ts
@@ -0,0 +1 @@
+export { Preheader, PreheaderProps } from './Preheader';
diff --git a/src/components/index.ts b/src/components/index.ts
index bfc04c5..814224c 100644
--- a/src/components/index.ts
+++ b/src/components/index.ts
@@ -6,3 +6,4 @@ export * from './Link';
 export * from './Divider';
 export * from './Typography';
 export * from './Image';
+export * from './Preheader';