From 60642889033c6dadc13f1bd97c684c787b290b7d Mon Sep 17 00:00:00 2001
From: Niloy Sikdar <niloysikdar30@gmail.com>
Date: Sun, 3 Jul 2022 09:28:55 +0530
Subject: [PATCH 1/4] feat(component): add image component

add new Image component to render images

resolves #42

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

diff --git a/src/components/Image/Image.tsx b/src/components/Image/Image.tsx
new file mode 100644
index 0000000..a11b8d7
--- /dev/null
+++ b/src/components/Image/Image.tsx
@@ -0,0 +1,42 @@
+import { CSSProperties } from 'react';
+
+export interface ImageProps {
+  src: string;
+  alt: string;
+  width: string | number;
+  height?: string | number;
+  style?: CSSProperties;
+  align?: 'left' | 'center' | 'right';
+}
+
+export const Image = ({
+  src,
+  alt,
+  width,
+  height = 'auto',
+  style,
+  align = 'left',
+}: ImageProps): JSX.Element => {
+  return (
+    <td
+      align={align}
+      style={{
+        padding: '10px 20px',
+        wordBreak: 'break-word',
+      }}
+    >
+      <img
+        height={height}
+        width={width}
+        src={src}
+        alt={alt}
+        style={{
+          border: '0',
+          display: 'block',
+          outline: 'none',
+          ...style,
+        }}
+      />
+    </td>
+  );
+};
diff --git a/src/components/Image/index.ts b/src/components/Image/index.ts
new file mode 100644
index 0000000..e463e46
--- /dev/null
+++ b/src/components/Image/index.ts
@@ -0,0 +1 @@
+export { Image } from './Image';

From dc3f6395baa3cb63c682eefcee8c10366fd5ef07 Mon Sep 17 00:00:00 2001
From: Niloy Sikdar <niloysikdar30@gmail.com>
Date: Sun, 3 Jul 2022 09:43:23 +0530
Subject: [PATCH 2/4] docs(storybook): image stories

add stories for image component using storybook

resolves #42

Signed-off-by: Niloy Sikdar <niloysikdar30@gmail.com>
---
 src/components/Image/Image.stories.tsx | 29 ++++++++++++++++++++++++++
 src/components/index.ts                |  1 +
 2 files changed, 30 insertions(+)
 create mode 100644 src/components/Image/Image.stories.tsx

diff --git a/src/components/Image/Image.stories.tsx b/src/components/Image/Image.stories.tsx
new file mode 100644
index 0000000..78390c1
--- /dev/null
+++ b/src/components/Image/Image.stories.tsx
@@ -0,0 +1,29 @@
+import { ComponentStory, ComponentMeta } from '@storybook/react';
+
+import { Image } from './Image';
+
+export default {
+  component: Image,
+} as ComponentMeta<typeof Image>;
+
+//“template” of how args map to rendering
+const Template: ComponentStory<typeof Image> = (args) => (
+  <table>
+    <tbody>
+      <tr>
+        <Image {...args} />
+      </tr>
+    </tbody>
+  </table>
+);
+
+export const Default = Template.bind({});
+
+Default.args = {
+  src: 'https://images.unsplash.com/photo-1453728013993-6d66e9c9123a',
+  alt: 'This is a random image',
+  width: '250px',
+  style: {
+    borderRadius: '10px',
+  },
+};
diff --git a/src/components/index.ts b/src/components/index.ts
index c21a34a..bdd1327 100644
--- a/src/components/index.ts
+++ b/src/components/index.ts
@@ -1 +1,2 @@
 export * from './Email';
+export * from './Image';

From f3bd9b6b62dbe42acf79553c404288ee2c556e3d Mon Sep 17 00:00:00 2001
From: Niloy Sikdar <niloysikdar30@gmail.com>
Date: Fri, 8 Jul 2022 01:33:08 +0530
Subject: [PATCH 3/4] fix(component): fix Image component

fix the Image component with new structure and props

resolves #42

Signed-off-by: Niloy Sikdar <niloysikdar30@gmail.com>
---
 src/components/Image/Image.tsx | 75 +++++++++++++++++++++-------------
 src/components/Image/index.ts  |  2 +-
 2 files changed, 48 insertions(+), 29 deletions(-)

diff --git a/src/components/Image/Image.tsx b/src/components/Image/Image.tsx
index a11b8d7..2049d43 100644
--- a/src/components/Image/Image.tsx
+++ b/src/components/Image/Image.tsx
@@ -1,42 +1,61 @@
 import { CSSProperties } from 'react';
+import { BaseStyleProp } from '../types';
+import { makeStyles } from '../../utils/makeStyles';
+import { sx } from '../../utils/sx';
 
-export interface ImageProps {
+type LinkStyles = 'root' | 'image' | 'caption';
+
+export interface ImageProps extends BaseStyleProp<LinkStyles> {
   src: string;
   alt: string;
-  width: string | number;
-  height?: string | number;
-  style?: CSSProperties;
-  align?: 'left' | 'center' | 'right';
+  caption?: string;
+  width: CSSProperties['width'];
+  height?: CSSProperties['height'];
 }
 
+const useStyles = makeStyles({
+  root: { border: '0', display: 'block', outline: 'none' },
+  image: {},
+  caption: {},
+});
+
 export const Image = ({
   src,
   alt,
+  caption,
   width,
   height = 'auto',
-  style,
-  align = 'left',
+  classes,
+  className,
 }: ImageProps): JSX.Element => {
-  return (
-    <td
-      align={align}
-      style={{
-        padding: '10px 20px',
-        wordBreak: 'break-word',
-      }}
-    >
-      <img
-        height={height}
-        width={width}
-        src={src}
-        alt={alt}
-        style={{
-          border: '0',
-          display: 'block',
-          outline: 'none',
-          ...style,
-        }}
-      />
-    </td>
+  const styles = useStyles({ classes });
+
+  return caption ? (
+    <table>
+      <tr>
+        <td>
+          <img
+            className={className}
+            height={height}
+            width={width}
+            src={src}
+            alt={alt}
+            style={sx(styles.root, styles.image)}
+          />
+        </td>
+      </tr>
+      <tr>
+        <td style={styles.caption}>{caption}</td>
+      </tr>
+    </table>
+  ) : (
+    <img
+      className={className}
+      height={height}
+      width={width}
+      src={src}
+      alt={alt}
+      style={sx(styles.root, styles.image)}
+    />
   );
 };
diff --git a/src/components/Image/index.ts b/src/components/Image/index.ts
index e463e46..6ef2d63 100644
--- a/src/components/Image/index.ts
+++ b/src/components/Image/index.ts
@@ -1 +1 @@
-export { Image } from './Image';
+export { Image, ImageProps } from './Image';

From 203f0f9f607e483c176cc963fc6d1e040daa865d Mon Sep 17 00:00:00 2001
From: Niloy Sikdar <niloysikdar30@gmail.com>
Date: Sat, 9 Jul 2022 00:35:07 +0530
Subject: [PATCH 4/4] fix(component): fix Image component

- Fix Image component with updated structure and props
- Fix Section and Column props
- Update stories for Image component

resolves #42

Signed-off-by: Niloy Sikdar <niloysikdar30@gmail.com>
---
 src/components/Column/Column.stories.tsx |  1 -
 src/components/Column/Column.tsx         | 11 +++--
 src/components/Image/Image.stories.tsx   | 38 ++++++++++++----
 src/components/Image/Image.tsx           | 55 ++++++++++++++++--------
 src/components/Section/Section.tsx       | 13 ++++--
 5 files changed, 83 insertions(+), 35 deletions(-)

diff --git a/src/components/Column/Column.stories.tsx b/src/components/Column/Column.stories.tsx
index d0c09af..19af467 100644
--- a/src/components/Column/Column.stories.tsx
+++ b/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',
diff --git a/src/components/Column/Column.tsx b/src/components/Column/Column.tsx
index 077161d..bb0ed0f 100644
--- a/src/components/Column/Column.tsx
+++ b/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>
   );
diff --git a/src/components/Image/Image.stories.tsx b/src/components/Image/Image.stories.tsx
index 78390c1..5e3ae4f 100644
--- a/src/components/Image/Image.stories.tsx
+++ b/src/components/Image/Image.stories.tsx
@@ -1,6 +1,11 @@
 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,
@@ -8,13 +13,27 @@ export default {
 
 //“template” of how args map to rendering
 const Template: ComponentStory<typeof Image> = (args) => (
-  <table>
-    <tbody>
-      <tr>
+  <Email>
+    <Section>
+      <Column>
+        <Typography variant="h2" align="center">
+          Hello World
+        </Typography>
+      </Column>
+    </Section>
+
+    <Divider />
+
+    <Section fullWidth={false}>
+      <Column>
         <Image {...args} />
-      </tr>
-    </tbody>
-  </table>
+      </Column>
+
+      <Column classes={{ root: { paddingLeft: '20px' } }}>
+        <Typography variant="h2">This is a random text</Typography>
+      </Column>
+    </Section>
+  </Email>
 );
 
 export const Default = Template.bind({});
@@ -23,7 +42,10 @@ Default.args = {
   src: 'https://images.unsplash.com/photo-1453728013993-6d66e9c9123a',
   alt: 'This is a random image',
   width: '250px',
-  style: {
-    borderRadius: '10px',
+  caption: 'This is a caption',
+  classes: {
+    image: {
+      borderRadius: '10px',
+    },
   },
 };
diff --git a/src/components/Image/Image.tsx b/src/components/Image/Image.tsx
index 2049d43..430ff89 100644
--- a/src/components/Image/Image.tsx
+++ b/src/components/Image/Image.tsx
@@ -1,22 +1,36 @@
 import { CSSProperties } from 'react';
-import { BaseStyleProp } from '../types';
 import { makeStyles } from '../../utils/makeStyles';
 import { sx } from '../../utils/sx';
+import { BaseStyleProp } from '../types';
 
-type LinkStyles = 'root' | 'image' | 'caption';
+type ImageStyles =
+  | 'root'
+  | 'table'
+  | 'body'
+  | 'image'
+  | 'caption'
+  | 'imageSection'
+  | 'captionSection'
+  | 'imageColumn';
 
-export interface ImageProps extends BaseStyleProp<LinkStyles> {
+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 = ({
@@ -27,26 +41,29 @@ export const Image = ({
   height = 'auto',
   classes,
   className,
+  captionAlign = 'center',
 }: ImageProps): JSX.Element => {
   const styles = useStyles({ classes });
 
   return caption ? (
-    <table>
-      <tr>
-        <td>
-          <img
-            className={className}
-            height={height}
-            width={width}
-            src={src}
-            alt={alt}
-            style={sx(styles.root, styles.image)}
-          />
-        </td>
-      </tr>
-      <tr>
-        <td style={styles.caption}>{caption}</td>
-      </tr>
+    <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
diff --git a/src/components/Section/Section.tsx b/src/components/Section/Section.tsx
index a7092c4..094d29a 100644
--- a/src/components/Section/Section.tsx
+++ b/src/components/Section/Section.tsx
@@ -1,20 +1,27 @@
 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 (
@@ -22,7 +29,7 @@ export const Section = ({ children, className, classes }: SectionProps): JSX.Ele
       cellPadding="0"
       cellSpacing="0"
       role="presentation"
-      style={styles.root}
+      style={sx(styles.root, fullWidth && { width: '100%' })}
       className={className}
     >
       <tbody style={styles.body}>