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

@@ -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>
+  );
+};

src/components/Preheader/index.ts

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

src/components/index.ts

@@ -6,3 +6,4 @@ export * from './Link';
 export * from './Divider';
 export * from './Typography';
 export * from './Image';
+export * from './Preheader';