diff --git a/docs/components/column.md b/docs/components/column.md index 53fc4624..19915f3e 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; +``` + +Used to set the background color in HTML email by wrapping the `bgcolor` property of `` elements + +```tsx +bgImage: string; +``` + +Used to set background images in HTML email by wrapping the `background` property of `` 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 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 = ({ children, style, ...props }) => ( - +export const Column: JsxEmailComponent = ({ + children, + bgColor, + bgImage, + style, + ...props +}) => ( + {children} ); 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[` component > passes style and other props correctly 1`] = `" component > renders children correctly 1`] = `"Test message"`; exports[` component > renders correctly 1`] = `"Lorem ipsum"`; + +exports[` component > renders correctly with background color 1`] = `"Lorem ipsum"`; + +exports[` component > renders correctly with background image 1`] = `"Lorem ipsum"`; 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(' component', () => { const actualOutput = await jsxToString(Lorem ipsum); expect(actualOutput).toMatchSnapshot(); }); + + it('renders correctly with background color', async () => { + const actualOutput = await jsxToString(Lorem ipsum); + expect(actualOutput).toMatchSnapshot(); + }); + + it('renders correctly with background image', async () => { + const actualOutput = await jsxToString(Lorem ipsum); + expect(actualOutput).toMatchSnapshot(); + }); });