feat(component): add Image component

src/components/Column/Column.stories.tsx

@@ -21,7 +21,6 @@ export const Default = Template.bind({});
 
 Default.args = {
   children: <p style={{ margin: '0', fontSize: '30px' }}>Hello World</p>,
-  align: 'center',
   classes: {
     root: {
       backgroundColor: 'red',

src/components/Column/Column.tsx

@@ -1,12 +1,14 @@
-import { ReactNode } from 'react';
-import { BaseStyleProp } from '../types';
+import { CSSProperties, ReactNode } from 'react';
 import { makeStyles } from '../../utils/makeStyles';
+import { sx } from '../../utils/sx';
+import { BaseStyleProp } from '../types';
 
 type ColumnStyles = 'root';
 
 export interface ColumnProps extends BaseStyleProp<ColumnStyles> {
   children?: ReactNode;
   align?: 'left' | 'center' | 'right';
+  verticalAlign?: CSSProperties['verticalAlign'];
 }
 
 const useStyles = makeStyles({
@@ -17,12 +19,13 @@ export const Column = ({
   children,
   className,
   classes,
-  align = 'left',
+  align = 'center',
+  verticalAlign = 'top',
 }: ColumnProps): JSX.Element => {
   const styles = useStyles({ classes });
 
   return (
-    <td className={className} style={styles.root} align={align}>
+    <td className={className} style={sx(styles.root, { verticalAlign })} align={align}>
       {children}
     </td>
   );

src/components/Image/Image.stories.tsx

@@ -0,0 +1,51 @@
+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/Typography';
+import { Image } from './Image';
+import { Divider } from '../Divider/Divider';
+
+export default {
+  component: Image,
+} as ComponentMeta<typeof Image>;
+
+//“template” of how args map to rendering
+const Template: ComponentStory<typeof Image> = (args) => (
+  <Email>
+    <Section>
+      <Column>
+        <Typography variant="h2" align="center">
+          Hello World
+        </Typography>
+      </Column>
+    </Section>
+
+    <Divider />
+
+    <Section fullWidth={false}>
+      <Column>
+        <Image {...args} />
+      </Column>
+
+      <Column classes={{ root: { paddingLeft: '20px' } }}>
+        <Typography variant="h2">This is a random text</Typography>
+      </Column>
+    </Section>
+  </Email>
+);
+
+export const Default = Template.bind({});
+
+Default.args = {
+  src: 'https://images.unsplash.com/photo-1453728013993-6d66e9c9123a',
+  alt: 'This is a random image',
+  width: '250px',
+  caption: 'This is a caption',
+  classes: {
+    image: {
+      borderRadius: '10px',
+    },
+  },
+};

src/components/Image/Image.tsx

@@ -0,0 +1,78 @@
+import { CSSProperties } from 'react';
+import { makeStyles } from '../../utils/makeStyles';
+import { sx } from '../../utils/sx';
+import { BaseStyleProp } from '../types';
+
+type ImageStyles =
+  | 'root'
+  | 'table'
+  | 'body'
+  | 'image'
+  | 'caption'
+  | 'imageSection'
+  | 'captionSection'
+  | 'imageColumn';
+
+export interface ImageProps extends BaseStyleProp<ImageStyles> {
+  src: string;
+  alt: string;
+  caption?: string;
+  width: CSSProperties['width'];
+  height?: CSSProperties['height'];
+  captionAlign?: 'left' | 'center' | 'right';
+}
+
+const useStyles = makeStyles({
+  root: { border: '0', display: 'block', outline: 'none' },
+  table: { width: 'fit-content', border: '0', verticalAlign: 'top' },
+  body: {},
+  image: {},
+  caption: {},
+  imageSection: {},
+  captionSection: {},
+  imageColumn: {},
+});
+
+export const Image = ({
+  src,
+  alt,
+  caption,
+  width,
+  height = 'auto',
+  classes,
+  className,
+  captionAlign = 'center',
+}: ImageProps): JSX.Element => {
+  const styles = useStyles({ classes });
+
+  return caption ? (
+    <table cellPadding="0" cellSpacing="0" role="presentation" style={styles.table}>
+      <tbody style={styles.body}>
+        <tr style={styles.imageSection}>
+          <td style={styles.imageColumn}>
+            <img
+              className={className}
+              height={height}
+              width={width}
+              src={src}
+              alt={alt}
+              style={sx(styles.root, styles.image)}
+            />
+          </td>
+        </tr>
+        <tr style={styles.captionSection}>
+          <td style={sx(styles.caption, { textAlign: captionAlign })}>{caption}</td>
+        </tr>
+      </tbody>
+    </table>
+  ) : (
+    <img
+      className={className}
+      height={height}
+      width={width}
+      src={src}
+      alt={alt}
+      style={sx(styles.root, styles.image)}
+    />
+  );
+};

src/components/Image/index.ts

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

src/components/Section/Section.tsx

@@ -1,28 +1,35 @@
 import { ReactNode } from 'react';
 import { makeStyles } from '../../utils/makeStyles';
+import { sx } from '../../utils/sx';
 import { BaseStyleProp } from '../types';
 
 type SectionStyles = 'root' | 'body' | 'row';
 
 export interface SectionProps extends BaseStyleProp<SectionStyles> {
   children?: ReactNode;
+  fullWidth?: boolean;
 }
 
 const useStyles = makeStyles({
-  root: { width: '100%', border: '0', verticalAlign: 'top' },
+  root: { border: '0', verticalAlign: 'top' },
   body: {},
   row: {},
 });
 
-export const Section = ({ children, className, classes }: SectionProps): JSX.Element => {
+export const Section = ({
+  children,
+  className,
+  classes,
+  fullWidth = true,
+}: SectionProps): JSX.Element => {
   const styles = useStyles({ classes });
 
   return (
     <table
       cellPadding="0"
       cellSpacing="0"
       role="presentation"
-      style={styles.root}
+      style={sx(styles.root, fullWidth && { width: '100%' })}
       className={className}
     >
       <tbody style={styles.body}>

src/components/index.ts

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