feat(component): Add Typography component (#48)

* feat(component): add Typography component

* docs(storybook): typography stories

resolves #41

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

src/components/Typography/Typography.stories.tsx

@@ -0,0 +1,31 @@
+import { ComponentStory, ComponentMeta } from '@storybook/react';
+
+import { Email } from '../Email/Email';
+import { Section } from '../Section/Section';
+import { Column } from '../Column/Column';
+import { Typography } from './Typography';
+import { Divider } from '../Divider/Divider';
+
+export default {
+  component: Typography,
+} as ComponentMeta<typeof Typography>;
+
+//“template” of how args map to rendering
+const Template: ComponentStory<typeof Typography> = (args) => (
+  <Email>
+    <Section>
+      <Column>
+        <Typography {...args} />
+        <Divider />
+      </Column>
+    </Section>
+  </Email>
+);
+
+export const Default = Template.bind({});
+
+Default.args = {
+  children: 'Hello World',
+  variant: 'h2',
+  align: 'center',
+};

src/components/Typography/Typography.tsx

@@ -0,0 +1,118 @@
+import { CSSProperties, ReactNode } from 'react';
+import { BaseStyleProp } from '../types';
+import { makeStyles } from '../../utils/makeStyles';
+import { sx } from '../../utils/sx';
+
+type ButtonStyles = 'root';
+
+export interface TypographyProps extends BaseStyleProp<ButtonStyles> {
+  children: ReactNode;
+  variant?:
+    | 'h1'
+    | 'h2'
+    | 'h3'
+    | 'h4'
+    | 'h5'
+    | 'h6'
+    | 'subtitle1'
+    | 'subtitle2'
+    | 'body1'
+    | 'body2'
+    | 'caption';
+  align?: CSSProperties['textAlign'];
+}
+
+interface ComponentMappingProps {
+  children: ReactNode;
+  styles?: CSSProperties;
+  className?: string;
+}
+
+const ComponentMapping = {
+  h1: ({ children, styles, className }: ComponentMappingProps) => (
+    <h1 style={styles} className={className}>
+      {children}
+    </h1>
+  ),
+  h2: ({ children, styles, className }: ComponentMappingProps) => (
+    <h2 style={styles} className={className}>
+      {children}
+    </h2>
+  ),
+  h3: ({ children, styles, className }: ComponentMappingProps) => (
+    <h3 style={styles} className={className}>
+      {children}
+    </h3>
+  ),
+  h4: ({ children, styles, className }: ComponentMappingProps) => (
+    <h4 style={styles} className={className}>
+      {children}
+    </h4>
+  ),
+  h5: ({ children, styles, className }: ComponentMappingProps) => (
+    <h5 style={styles} className={className}>
+      {children}
+    </h5>
+  ),
+  h6: ({ children, styles, className }: ComponentMappingProps) => (
+    <h6 style={styles} className={className}>
+      {children}
+    </h6>
+  ),
+  subtitle1: ({ children, styles, className }: ComponentMappingProps) => (
+    <h6 style={styles} className={className}>
+      {children}
+    </h6>
+  ),
+  subtitle2: ({ children, styles, className }: ComponentMappingProps) => (
+    <h6 style={styles} className={className}>
+      {children}
+    </h6>
+  ),
+  body1: ({ children, styles, className }: ComponentMappingProps) => (
+    <p style={styles} className={className}>
+      {children}
+    </p>
+  ),
+  body2: ({ children, styles, className }: ComponentMappingProps) => (
+    <p style={styles} className={className}>
+      {children}
+    </p>
+  ),
+  caption: ({ children, styles, className }: ComponentMappingProps) => (
+    <p style={styles} className={className}>
+      {children}
+    </p>
+  ),
+};
+
+const useStyles = makeStyles({
+  root: { margin: '0', padding: '0' },
+  h1: {},
+  h2: {},
+  h3: {},
+  h4: {},
+  h5: {},
+  h6: {},
+  subtitle1: {},
+  subtitle2: {},
+  body1: {},
+  body2: {},
+  caption: {},
+});
+
+export const Typography = ({
+  children,
+  variant = 'body1',
+  classes,
+  className,
+  align = 'left',
+}: TypographyProps): JSX.Element => {
+  const styles = useStyles({ classes });
+
+  return ComponentMapping[variant]({
+    children,
+    styles: sx(styles.root, styles[variant], { textAlign: align }),
+    className,
+  });
+};

src/components/Typography/index.ts

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

src/components/index.ts

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