From e90095c4ae679933284bf84074bb99c9217e7ed0 Mon Sep 17 00:00:00 2001
From: lordelogos <paulehiks@gmail.com>
Date: Tue, 16 Apr 2024 09:55:53 +0100
Subject: [PATCH 1/4] feat: add bg color and image props to Column

---
 packages/jsx-email/src/components/column.tsx | 22 +++++++++++++++++---
 1 file changed, 19 insertions(+), 3 deletions(-)

diff --git a/packages/jsx-email/src/components/column.tsx b/packages/jsx-email/src/components/column.tsx
index f04f4f21..d3b494c4 100644
--- a/packages/jsx-email/src/components/column.tsx
+++ b/packages/jsx-email/src/components/column.tsx
@@ -1,12 +1,28 @@
 import { debug } from '../debug';
 import type { BaseProps, JsxEmailComponent } from '../types';
 
-export interface ColumnProps extends BaseProps<'td'> {}
+export interface ColumnProps extends BaseProps<'td'> {
+  bgColor?: string;
+  bgImage?: string;
+}
 
 const debugProps = debug.elements.enabled ? { dataType: 'jsx-email/column' } : {};
 
-export const Column: JsxEmailComponent<ColumnProps> = ({ children, style, ...props }) => (
-  <td {...props} {...debugProps} style={style}>
+export const Column: JsxEmailComponent<ColumnProps> = ({
+  children,
+  bgColor,
+  bgImage,
+  style,
+  ...props
+}) => (
+  <td
+    // @ts-expect-error: `background` and `bgcolor` not documented
+    background={bgImage}
+    bgcolor={bgColor}
+    {...props}
+    {...debugProps}
+    style={style}
+  >
     {children}
   </td>
 );

From a56752ccdb773ec1301024a0231f56a1f614c13b Mon Sep 17 00:00:00 2001
From: lordelogos <paulehiks@gmail.com>
Date: Tue, 16 Apr 2024 09:56:25 +0100
Subject: [PATCH 2/4] feat: update column tests and snapshots

---
 .../jsx-email/test/.snapshots/column.test.tsx.snap     |  4 ++++
 packages/jsx-email/test/column.test.tsx                | 10 ++++++++++
 2 files changed, 14 insertions(+)

diff --git a/packages/jsx-email/test/.snapshots/column.test.tsx.snap b/packages/jsx-email/test/.snapshots/column.test.tsx.snap
index b3f381fe..17660d7e 100644
--- a/packages/jsx-email/test/.snapshots/column.test.tsx.snap
+++ b/packages/jsx-email/test/.snapshots/column.test.tsx.snap
@@ -5,3 +5,7 @@ exports[`<Column> component > passes style and other props correctly 1`] = `"<td
 exports[`<Column> component > renders children correctly 1`] = `"<td>Test message</td>"`;
 
 exports[`<Column> component > renders correctly 1`] = `"<td>Lorem ipsum</td>"`;
+
+exports[`<Column> component > renders correctly with background color 1`] = `"<td bgcolor=\\"#000000\\">Lorem ipsum</td>"`;
+
+exports[`<Column> component > renders correctly with background image 1`] = `"<td background=\\"link-to-image\\">Lorem ipsum</td>"`;
diff --git a/packages/jsx-email/test/column.test.tsx b/packages/jsx-email/test/column.test.tsx
index fe056ba8..ce69e3c8 100644
--- a/packages/jsx-email/test/column.test.tsx
+++ b/packages/jsx-email/test/column.test.tsx
@@ -30,4 +30,14 @@ describe('<Column> component', () => {
     const actualOutput = await jsxToString(<Column>Lorem ipsum</Column>);
     expect(actualOutput).toMatchSnapshot();
   });
+
+  it('renders correctly with background color', async () => {
+    const actualOutput = await jsxToString(<Column bgColor="#000000">Lorem ipsum</Column>);
+    expect(actualOutput).toMatchSnapshot();
+  });
+
+  it('renders correctly with background image', async () => {
+    const actualOutput = await jsxToString(<Column bgImage="link-to-image">Lorem ipsum</Column>);
+    expect(actualOutput).toMatchSnapshot();
+  });
 });

From 719e1df3c54de69f6d4f3c823b8b18cd0604e164 Mon Sep 17 00:00:00 2001
From: lordelogos <paulehiks@gmail.com>
Date: Tue, 16 Apr 2024 09:56:36 +0100
Subject: [PATCH 3/4] feat(docs): update Column Docs

---
 docs/components/column.md | 23 ++++++++++++++++++++++-
 1 file changed, 22 insertions(+), 1 deletion(-)

diff --git a/docs/components/column.md b/docs/components/column.md
index 53fc4624..3f064a47 100644
--- a/docs/components/column.md
+++ b/docs/components/column.md
@@ -29,4 +29,25 @@ const Email = () => {
 
 ## Component Props
 
-This component has no custom props, but expresses all of the [Common Component Props](https://react.dev/reference/react-dom/components/common) for `ComponentProps<'td'>`.
+```tsx
+export interface ColumnProps extends BaseProps<'td'> {
+  bgColor?: string;
+  bgImage?: string;
+}
+```
+
+```tsx
+bgColor: string;
+```
+
+To set background color in html email, it wraps the `bgcolor` prop of `<td>` tags
+
+```tsx
+bgImage: string;
+```
+
+To set background images in html email, it wraps the `background` prop of `<td>` tags
+
+:::tip
+This component expresses all of the [Common Component Props](https://react.dev/reference/react-dom/components/common) for `ComponentProps<'td'>`.
+:::

From 5dd931fea558f718badb9cdfbf303e90de8c64d5 Mon Sep 17 00:00:00 2001
From: Andrew Powell <shellscape@users.noreply.github.com>
Date: Wed, 17 Apr 2024 01:12:32 -0400
Subject: [PATCH 4/4] Apply suggestions from code review

---
 docs/components/column.md | 4 ++--
 1 file changed, 2 insertions(+), 2 deletions(-)

diff --git a/docs/components/column.md b/docs/components/column.md
index 3f064a47..19915f3e 100644
--- a/docs/components/column.md
+++ b/docs/components/column.md
@@ -40,13 +40,13 @@ export interface ColumnProps extends BaseProps<'td'> {
 bgColor: string;
 ```
 
-To set background color in html email, it wraps the `bgcolor` prop of `<td>` tags
+Used to set the background color in HTML email by wrapping the `bgcolor` property of `<td>` elements
 
 ```tsx
 bgImage: string;
 ```
 
-To set background images in html email, it wraps the `background` prop of `<td>` tags
+Used to set background images in HTML email by wrapping the `background` property of `<td>` elements
 
 :::tip
 This component expresses all of the [Common Component Props](https://react.dev/reference/react-dom/components/common) for `ComponentProps<'td'>`.