Skip to content

Commit

Permalink
fix(jsx-email): add link href to vml for outlook buttons (#274)
Browse files Browse the repository at this point in the history 
Co-authored-by: Paul Ehikhuemen <[email protected]>
  • Loading branch information
@osdiab @lordelogos
osdiab and lordelogos authored Jan 8, 2025
1 parent cf99078 commit 0062fc0
Show file tree
Hide file tree
Showing 7 changed files with 97 additions and 35 deletions.
2 changes: 1 addition & 1 deletion packages/jsx-email/src/components/button.tsx
View file
Original file line number Diff line number Diff line change
Expand Up @@ -101,7 +101,7 @@ export const Button: JsxEmailComponent<ButtonProps> = ({
<span
dangerouslySetInnerHTML={{
__html: `<!--[if mso]>
<v:roundrect xmlns:v="urn:schemas-microsoft-com:vml" xmlns:w="urn:schemas-microsoft-com:office:word" style="height:${height}px;v-text-anchor:middle;width:${width}px;" arcsize="${arcsize}%" ${
<v:roundrect href="${href}" xmlns:v="urn:schemas-microsoft-com:vml" xmlns:w="urn:schemas-microsoft-com:office:word" style="height:${height}px;v-text-anchor:middle;width:${width}px;" arcsize="${arcsize}%" ${
borderColor ? `strokecolor=${borderColor}` : ''
} ${borderSize ? `strokeweight="${borderSize}px"` : `stroke="false"`} ${
backgroundColor ? `fillcolor=${backgroundColor}` : `fill="false"`
Expand Down
12 changes: 6 additions & 6 deletions packages/jsx-email/test/render/.snapshots/render.test.tsx.snap
View file
Original file line number Diff line number Diff line change
Expand Up @@ -73,7 +73,7 @@ exports[`render > inlining 1`] = `
<tbody>
<tr>
<td align=\\"left\\"><span><!--[if mso]>
<v:roundrect xmlns:v=\\"urn:schemas-microsoft-com:vml\\" xmlns:w=\\"urn:schemas-microsoft-com:office:word\\" style=\\"height:50px;v-text-anchor:middle;width:200px;\\" arcsize=\\"8%\\" strokeweight=\\"1px\\" fillcolor=#000000>
<v:roundrect href=\\"https://example.com\\" xmlns:v=\\"urn:schemas-microsoft-com:vml\\" xmlns:w=\\"urn:schemas-microsoft-com:office:word\\" style=\\"height:50px;v-text-anchor:middle;width:200px;\\" arcsize=\\"8%\\" strokeweight=\\"1px\\" fillcolor=#000000>
<w:anchorlock/>
<center style=\\"font-size:12px;color:#FFFFFF;\\">
Join the team
Expand Down Expand Up @@ -310,7 +310,7 @@ exports[`render > inlining 2`] = `
<tbody>
<tr>
<td align=\\"left\\"><span><!--[if mso]>
<v:roundrect xmlns:v=\\"urn:schemas-microsoft-com:vml\\" xmlns:w=\\"urn:schemas-microsoft-com:office:word\\" style=\\"height:50px;v-text-anchor:middle;width:200px;\\" arcsize=\\"8%\\" strokeweight=\\"1px\\" fillcolor=#000000>
<v:roundrect href=\\"https://example.com\\" xmlns:v=\\"urn:schemas-microsoft-com:vml\\" xmlns:w=\\"urn:schemas-microsoft-com:office:word\\" style=\\"height:50px;v-text-anchor:middle;width:200px;\\" arcsize=\\"8%\\" strokeweight=\\"1px\\" fillcolor=#000000>
<w:anchorlock/>
<center style=\\"font-size:12px;color:#FFFFFF;\\">
Join the team
Expand Down Expand Up @@ -339,7 +339,7 @@ exports[`render > inlining 2`] = `
exports[`render > renders the airbnb demo template 1`] = `
"<!DOCTYPE html PUBLIC \\"-//W3C//DTD XHTML 1.0 Transitional//EN\\" \\"http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd\\"><html lang=\\"en\\" dir=\\"ltr\\" xmlns:o=\\"urn:schemas-microsoft-com:office:office\\" xmlns:v=\\"urn:schemas-microsoft-com:vml\\"><head><meta http-equiv=\\"Content-Type\\" content=\\"text/html; charset=UTF-8\\"><meta name=\\"viewport\\" content=\\"width=device-width, initial-scale=1, user-scalable=yes\\"><meta name=\\"x-apple-disable-message-reformatting\\"><meta name=\\"format-detection\\" content=\\"telephone=no, date=no, address=no, email=no, url=no\\"><meta name=\\"viewport\\" content=\\"width=device-width, initial-scale=1, user-scalable=yes\\"><meta name=\\"x-apple-disable-message-reformatting\\"><meta name=\\"format-detection\\" content=\\"telephone=no, date=no, address=no, email=no, url=no\\"><!--[if mso]><xml><o:OfficeDocumentSettings><o:AllowPNG></o:AllowPNG><o:PixelsPerInch>96</o:PixelsPerInch></o:OfficeDocumentSettings></xml><![endif]--></head><body style=\\"background-color:#ffffff;font-family:-apple-system,BlinkMacSystemFont,&#x22;Segoe UI&#x22;,Roboto,Oxygen-Sans,Ubuntu,Cantarell,&#x22;Helvetica Neue&#x22;,sans-serif\\"><div data-skip=\\"true\\" style=\\"display:none;line-height:1px;max-height:0;max-width:0;opacity:0;overflow:hidden\\">Read undefined's review<div> ‌​‍‎‏ ‌​‍‎‏ ‌​‍‎‏ ‌​‍‎‏ ‌​‍‎‏ ‌​‍‎‏ ‌​‍‎‏ ‌​‍‎‏ ‌​‍‎‏ ‌​‍‎‏ ‌​‍‎‏ ‌​‍‎‏ ‌​‍‎‏ ‌​‍‎‏ ‌​‍‎‏ ‌​‍‎‏ ‌​‍‎‏ ‌​‍‎‏ ‌​‍‎‏ ‌​‍‎‏ ‌​‍‎‏ ‌​‍‎‏ ‌​‍‎‏ ‌​‍‎‏ ‌​‍‎‏ ‌​‍‎‏ ‌​‍‎‏ ‌​‍‎‏ ‌​‍‎‏ ‌​‍‎‏ ‌​‍‎‏ ‌​‍‎‏ ‌​‍‎‏ ‌​‍‎‏ ‌​‍‎‏ ‌​‍‎‏ ‌​‍‎‏ ‌​‍‎‏ ‌​‍‎‏ ‌​‍‎‏ ‌​‍‎‏ ‌​‍‎‏ ‌​‍‎‏ ‌​‍‎‏ ‌​‍‎‏ ‌​‍‎‏ ‌​‍‎‏ ‌​‍‎‏ ‌​‍‎‏ ‌​‍‎‏ ‌​‍‎‏ ‌​‍‎‏ ‌​‍‎‏ ‌​‍‎‏ ‌​‍‎‏ ‌​‍‎‏ ‌​‍‎‏ ‌​‍‎‏ ‌​‍‎‏ ‌​‍‎‏ ‌​‍‎‏ ‌​‍‎‏ ‌​‍‎‏ ‌​‍‎‏ ‌​‍‎‏ ‌​‍‎‏ ‌​‍‎‏ ‌​‍‎‏ ‌​‍‎‏ ‌​‍‎‏ ‌​‍‎‏ ‌​‍‎‏ ‌​‍‎‏ ‌​‍‎‏ ‌​‍‎‏ ‌​‍‎‏ ‌​‍‎‏ ‌​‍‎‏ ‌​‍‎‏ ‌​‍‎‏ ‌​‍‎‏ ‌​‍‎‏ ‌​‍‎‏ ‌​‍‎‏ ‌​‍‎‏ ‌​‍‎‏ ‌​‍‎‏ ‌​‍‎‏ ‌​‍‎‏ ‌​‍‎‏ ‌​‍‎‏ ‌​‍‎‏ ‌​‍‎‏ ‌​‍‎‏ ‌​‍‎‏ ‌​‍‎‏ ‌​‍‎‏ ‌​‍‎‏ ‌​‍‎‏ ‌​‍‎‏ ‌​‍‎‏ ‌​‍‎‏ ‌​‍‎‏ ‌​‍‎‏ ‌​‍‎‏ ‌​‍‎‏ ‌​‍‎‏ ‌​‍‎‏ ‌​‍‎‏ ‌​‍‎‏ ‌​‍‎‏ ‌​‍‎‏ ‌​‍‎‏ ‌​‍‎‏ ‌​‍‎‏ ‌​‍‎‏ ‌​‍‎‏ ‌​‍‎‏ ‌​‍‎‏ ‌​‍‎‏ ‌​‍‎‏ ‌​‍‎‏ ‌​‍‎‏ ‌​‍‎‏ ‌​‍‎‏ ‌​‍‎‏ ‌​‍‎‏</div></div><table align=\\"center\\" width=\\"100%\\" style=\\"background-color:#ffffff;font-family:-apple-system,BlinkMacSystemFont,&#x22;Segoe UI&#x22;,Roboto,Oxygen-Sans,Ubuntu,Cantarell,&#x22;Helvetica Neue&#x22;,sans-serif\\" border=\\"0\\" cellpadding=\\"0\\" cellspacing=\\"0\\" role=\\"presentation\\"><tbody><tr><td><div style=\\"table-layout:fixed;width:100%\\"><div style=\\"margin:0 auto;max-width:600px\\"><span><!--[if mso]><table align=\\"center\\" width=\\"600\\" style=\\"border-spacing: 0; width:600px;\\" role=\\"presentation\\"><tr><td><![endif]--></span><table align=\\"center\\" width=\\"100%\\" role=\\"presentation\\" cellspacing=\\"0\\" cellpadding=\\"0\\" border=\\"0\\" style=\\"max-width:600px;margin:0 auto;padding:20px 0 48px;width:580px\\"><tbody><tr style=\\"width:100%\\"><td align=\\"center\\"><table align=\\"center\\" width=\\"100%\\" border=\\"0\\" cellpadding=\\"0\\" cellspacing=\\"0\\" role=\\"presentation\\"><tbody><tr><td><img alt=\\"Airbnb\\" src=\\"https://jsx.email/assets/demo/airbnb-logo.png\\" width=\\"96\\" height=\\"30\\" style=\\"border:none;display:block;outline:none;text-decoration:none\\"></td></tr></tbody></table><table align=\\"center\\" width=\\"100%\\" border=\\"0\\" cellpadding=\\"0\\" cellspacing=\\"0\\" role=\\"presentation\\"><tbody><tr><td><img width=\\"96\\" height=\\"96\\" style=\\"border:none;display:block;outline:none;text-decoration:none;margin:0 auto;margin-bottom:16px;border-radius:50%\\"></td></tr></tbody></table><table align=\\"center\\" width=\\"100%\\" style=\\"padding-bottom:20px\\" border=\\"0\\" cellpadding=\\"0\\" cellspacing=\\"0\\" role=\\"presentation\\"><tbody><tr><td><p style=\\"font-size:32px;line-height:1.3;margin:16px 0;font-weight:700;color:#484848\\">Here's what wrote</p><p style=\\"font-size:18px;line-height:1.4;margin:16px 0;color:#484848;padding:24px;background-color:#f2f3f3;border-radius:4px\\"></p><p style=\\"font-size:18px;line-height:1.4;margin:16px 0;color:#484848\\">Now that the review period is over, we’ve posted ’s review to your Airbnb profile.</p><p style=\\"font-size:18px;line-height:1.4;margin:16px 0;color:#484848;padding-bottom:16px\\">While it’s too late to write a review of your own, you can send your feedback to using your Airbnb message thread.</p><table align=\\"center\\" width=\\"100%\\" role=\\"presentation\\" cellspacing=\\"0\\" cellpadding=\\"0\\" border=\\"0\\"><tbody style=\\"width:100%\\"><tr style=\\"width:100%\\"></tr></tbody></table><table width=\\"100%\\" border=\\"0\\" cellpadding=\\"0\\" cellspacing=\\"0\\" style=\\"border-collapse:collapse\\" role=\\"presentation\\"><tbody><tr><td align=\\"center\\"><span><!--[if mso]>
<v:roundrect xmlns:v=\\"urn:schemas-microsoft-com:vml\\" xmlns:w=\\"urn:schemas-microsoft-com:office:word\\" style=\\"height:60px;v-text-anchor:middle;width:300px;\\" arcsize=\\"5%\\" strokeweight=\\"1px\\" fillcolor=#ff5a5f>
<v:roundrect href=\\"https://airbnb.com/\\" xmlns:v=\\"urn:schemas-microsoft-com:vml\\" xmlns:w=\\"urn:schemas-microsoft-com:office:word\\" style=\\"height:60px;v-text-anchor:middle;width:300px;\\" arcsize=\\"5%\\" strokeweight=\\"1px\\" fillcolor=#ff5a5f>
<w:anchorlock/>
<center style=\\"font-size:18px;color:#fff;\\">
Send My Feedback
Expand Down Expand Up @@ -405,7 +405,7 @@ exports[`render > renders the airbnb demo template 2`] = `
<tbody>
<tr>
<td align=\\"center\\"><span><!--[if mso]>
<v:roundrect xmlns:v=\\"urn:schemas-microsoft-com:vml\\" xmlns:w=\\"urn:schemas-microsoft-com:office:word\\" style=\\"height:60px;v-text-anchor:middle;width:300px;\\" arcsize=\\"5%\\" strokeweight=\\"1px\\" fillcolor=#ff5a5f>
<v:roundrect href=\\"https://airbnb.com/\\" xmlns:v=\\"urn:schemas-microsoft-com:vml\\" xmlns:w=\\"urn:schemas-microsoft-com:office:word\\" style=\\"height:60px;v-text-anchor:middle;width:300px;\\" arcsize=\\"5%\\" strokeweight=\\"1px\\" fillcolor=#ff5a5f>
<w:anchorlock/>
<center style=\\"font-size:18px;color:#fff;\\">
Send My Feedback
Expand Down Expand Up @@ -542,7 +542,7 @@ exports[`render > renders the vercel demo template 1`] = `
@media (prefers-color-scheme: dark){
.dark\\\\:bg-black{background-color:rgb(0,0,0);}}
}</style></head><body class=\\"mx-auto my-auto bg-white font-sans dark:bg-black\\"><div style=\\"table-layout:fixed;width:100%\\"><div style=\\"margin:0 auto;max-width:600px\\"><span><!--[if mso]><table align=\\"center\\" width=\\"600\\" style=\\"border-spacing: 0; width:600px;\\" role=\\"presentation\\"><tr><td><![endif]--></span><table align=\\"center\\" width=\\"100%\\" role=\\"presentation\\" cellspacing=\\"0\\" cellpadding=\\"0\\" border=\\"0\\" class=\\"mx-auto my-[40px] w-[465px] border-separate rounded border border-solid border-[#eaeaea] p-[20px]\\" style=\\"max-width:600px\\"><tbody><tr style=\\"width:100%\\"><td align=\\"center\\"><table align=\\"center\\" width=\\"100%\\" class=\\"mt-[32px]\\" border=\\"0\\" cellpadding=\\"0\\" cellspacing=\\"0\\" role=\\"presentation\\"><tbody><tr><td><img class=\\"mx-auto my-0\\" alt=\\"Vercel\\" src=\\"vercel-logo.png\\" width=\\"40\\" height=\\"37\\" style=\\"border:none;display:block;outline:none;text-decoration:none\\"></td></tr></tbody></table><h1 class=\\"mx-0 my-[30px] p-0 text-center text-[24px] font-normal text-black\\" style>Join <strong></strong> on <strong>Vercel</strong></h1><p class=\\"text-[14px] leading-[24px] text-black\\" style=\\"font-size:14px;line-height:24px;margin:16px 0\\">Hello,</p><p class=\\"text-[14px] leading-[24px] text-black\\" style=\\"font-size:14px;line-height:24px;margin:16px 0\\"><strong></strong> (<a href=\\"mailto:\\" class=\\"text-blue-600 no-underline\\" style=\\"color:#067df7;text-decoration:none\\"></a>) has invited you to the <strong></strong> team on <strong>Vercel</strong>.</p><table align=\\"center\\" width=\\"100%\\" border=\\"0\\" cellpadding=\\"0\\" cellspacing=\\"0\\" role=\\"presentation\\"><tbody><tr><td><table align=\\"center\\" width=\\"100%\\" role=\\"presentation\\" cellspacing=\\"0\\" cellpadding=\\"0\\" border=\\"0\\"><tbody style=\\"width:100%\\"><tr style=\\"width:100%\\"><td align=\\"right\\"><img class=\\"rounded-full\\" src width=\\"64\\" height=\\"64\\" style=\\"border:none;display:block;outline:none;text-decoration:none\\"></td><td align=\\"center\\"><img alt=\\"invited you to\\" src=\\"vercel-arrow.png\\" width=\\"12\\" height=\\"9\\" style=\\"border:none;display:block;outline:none;text-decoration:none\\"></td><td align=\\"left\\"><img class=\\"rounded-full\\" src width=\\"64\\" height=\\"64\\" style=\\"border:none;display:block;outline:none;text-decoration:none\\"></td></tr></tbody></table></td></tr></tbody></table><table align=\\"center\\" width=\\"100%\\" class=\\"mb-[32px] mt-[32px] text-center\\" border=\\"0\\" cellpadding=\\"0\\" cellspacing=\\"0\\" role=\\"presentation\\"><tbody><tr><td><table width=\\"100%\\" border=\\"0\\" cellpadding=\\"0\\" cellspacing=\\"0\\" style=\\"border-collapse:collapse\\" role=\\"presentation\\"><tbody><tr><td align=\\"left\\"><span><!--[if mso]>
<v:roundrect xmlns:v=\\"urn:schemas-microsoft-com:vml\\" xmlns:w=\\"urn:schemas-microsoft-com:office:word\\" style=\\"height:50px;v-text-anchor:middle;width:200px;\\" arcsize=\\"8%\\" strokeweight=\\"1px\\" fillcolor=#000000>
<v:roundrect href=\\"https://example.com\\" xmlns:v=\\"urn:schemas-microsoft-com:vml\\" xmlns:w=\\"urn:schemas-microsoft-com:office:word\\" style=\\"height:50px;v-text-anchor:middle;width:200px;\\" arcsize=\\"8%\\" strokeweight=\\"1px\\" fillcolor=#000000>
<w:anchorlock/>
<center style=\\"font-size:12px;color:#FFFFFF;\\">
Join the team
Expand Down Expand Up @@ -760,7 +760,7 @@ exports[`render > renders the vercel demo template 2`] = `
<tbody>
<tr>
<td align=\\"left\\"><span><!--[if mso]>
<v:roundrect xmlns:v=\\"urn:schemas-microsoft-com:vml\\" xmlns:w=\\"urn:schemas-microsoft-com:office:word\\" style=\\"height:50px;v-text-anchor:middle;width:200px;\\" arcsize=\\"8%\\" strokeweight=\\"1px\\" fillcolor=#000000>
<v:roundrect href=\\"https://example.com\\" xmlns:v=\\"urn:schemas-microsoft-com:vml\\" xmlns:w=\\"urn:schemas-microsoft-com:office:word\\" style=\\"height:50px;v-text-anchor:middle;width:200px;\\" arcsize=\\"8%\\" strokeweight=\\"1px\\" fillcolor=#000000>
<w:anchorlock/>
<center style=\\"font-size:12px;color:#FFFFFF;\\">
Join the team
Expand Down
Loading

0 comments on commit 0062fc0

Please sign in to comment.