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

Co-authored-by: Andrew Powell <shellscape@users.noreply.github.com>
shellscape · Apr 19, 2024 · 2fe4ed3 · 2fe4ed3
1 parent 8be1ca4
commit 2fe4ed3
Show file tree

Hide file tree

Showing 4 changed files with 55 additions and 4 deletions.
diff --git 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;
+```
+
+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'>`.
+:::
diff --git 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>
 );

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