feat(jsx-email): add bgImage and bgColor props to <Column>

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;
+```
+
+Used to set the background color in HTML email by wrapping the `bgcolor` property of `<td>` elements
+
+```tsx
+bgImage: string;
+```
+
+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'>`.
+:::

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>
 );

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>"`;

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