@cymbal/atoms-email-renderer 0.0.1 → 0.0.2

This diff represents the content of publicly available package versions that have been released to one of the supported registries. The information contained in this diff is provided for informational purposes only and reflects changes between package versions as they appear in their respective public registries.
Files changed (4) hide show
  1. package/dist/index.cjs +58 -1
  2. package/dist/index.d.ts +2 -0
  3. package/dist/index.mjs +59 -2
  4. package/package.json +4 -2
package/dist/index.cjs CHANGED
@@ -772,6 +772,63 @@ const hiddenPreheaderStyle = {
772
772
  opacity: 0,
773
773
  overflow: "hidden"
774
774
  };
775
+ const TopUnsubscribeBar = ({ unsubscribeLink }) => /* @__PURE__ */ React.createElement(
776
+ "table",
777
+ {
778
+ align: "center",
779
+ border: 0,
780
+ cellPadding: "0",
781
+ cellSpacing: "0",
782
+ role: "presentation",
783
+ style: { background: "#FFFFFF", backgroundColor: "#FFFFFF", width: "100%" }
784
+ },
785
+ /* @__PURE__ */ React.createElement("tbody", null, /* @__PURE__ */ React.createElement("tr", null, /* @__PURE__ */ React.createElement("td", null, /* @__PURE__ */ React.createElement("div", null, /* @__PURE__ */ React.createElement(
786
+ "table",
787
+ {
788
+ align: "center",
789
+ border: 0,
790
+ cellPadding: "0",
791
+ cellSpacing: "0",
792
+ role: "presentation",
793
+ style: { width: "100%" }
794
+ },
795
+ /* @__PURE__ */ React.createElement("tbody", null, /* @__PURE__ */ React.createElement("tr", null, /* @__PURE__ */ React.createElement(
796
+ "td",
797
+ {
798
+ className: "top-unsubscribe",
799
+ style: {
800
+ fontSize: 0,
801
+ paddingTop: "16px",
802
+ paddingBottom: "16px",
803
+ textAlign: "left"
804
+ }
805
+ },
806
+ /* @__PURE__ */ React.createElement(
807
+ "div",
808
+ {
809
+ style: {
810
+ fontFamily: "'Google Sans', Roboto, RobotoDraft, Helvetica, Arial, sans-serif",
811
+ fontSize: "14px",
812
+ fontWeight: "500",
813
+ lineHeight: "1",
814
+ textAlign: "left",
815
+ color: "#3771e0"
816
+ }
817
+ },
818
+ /* @__PURE__ */ React.createElement(
819
+ "a",
820
+ {
821
+ style: { color: "#3771e0", textDecoration: "none" },
822
+ href: unsubscribeLink,
823
+ target: "_blank",
824
+ rel: "noopener noreferrer"
825
+ },
826
+ "Unsubscribe"
827
+ )
828
+ )
829
+ )))
830
+ )))))
831
+ );
775
832
  const AtomDocumentContentsEmail = ({
776
833
  document: doc,
777
834
  options
@@ -791,7 +848,7 @@ const AtomDocumentContentsEmail = ({
791
848
  rel: "stylesheet",
792
849
  href: `https://fonts.googleapis.com/css2?family=${encodeURIComponent(fontFamily)}:wght@100;200;300;400;500;600;700;800;900&display=swap`
793
850
  }
794
- ))), /* @__PURE__ */ React.createElement(components.Body, { style: { backgroundColor: bodyBackgroundColor, margin: 0, padding: 0 } }, options?.emailPreviewText ? /* @__PURE__ */ React.createElement("div", { style: hiddenPreheaderStyle }, options.emailPreviewText) : null, options?.automationPreviewHeaderHtml ? /* @__PURE__ */ React.createElement("div", { dangerouslySetInnerHTML: { __html: options.automationPreviewHeaderHtml } }) : null, /* @__PURE__ */ React.createElement(components.Container, { style: { maxWidth: doc.maxWidth, margin: "0 auto" } }, /* @__PURE__ */ React.createElement(EmailRowsAtom, { atom: doc.rootRow, ctx }), options?.cymbalBrandingUrl ? /* @__PURE__ */ React.createElement(components.Section, null, /* @__PURE__ */ React.createElement(components.Text, { style: { color: "#999999", fontSize: 12, textAlign: "center" } }, "Powered by", " ", /* @__PURE__ */ React.createElement(components.Link, { href: options.cymbalBrandingUrl, style: { color: "#999999" } }, "Cymbal"))) : null), options?.trackingPixelUrl ? /* @__PURE__ */ React.createElement(
851
+ ))), /* @__PURE__ */ React.createElement(components.Body, { style: { backgroundColor: bodyBackgroundColor, margin: 0, padding: 0 } }, options?.emailPreviewText ? /* @__PURE__ */ React.createElement("div", { style: hiddenPreheaderStyle }, options.emailPreviewText) : null, options?.topUnsubscribeLink ? /* @__PURE__ */ React.createElement(TopUnsubscribeBar, { unsubscribeLink: options.topUnsubscribeLink }) : null, options?.automationPreviewHeaderHtml ? /* @__PURE__ */ React.createElement("div", { dangerouslySetInnerHTML: { __html: options.automationPreviewHeaderHtml } }) : null, /* @__PURE__ */ React.createElement(components.Container, { style: { maxWidth: doc.maxWidth, margin: "0 auto" } }, /* @__PURE__ */ React.createElement(EmailRowsAtom, { atom: doc.rootRow, ctx }), options?.cymbalBrandingUrl ? /* @__PURE__ */ React.createElement(components.Section, null, /* @__PURE__ */ React.createElement(components.Text, { style: { color: "#999999", fontSize: 12, textAlign: "center" } }, "Powered by", " ", /* @__PURE__ */ React.createElement(components.Link, { href: options.cymbalBrandingUrl, style: { color: "#999999" } }, "Cymbal"))) : null), options?.trackingPixelUrl ? /* @__PURE__ */ React.createElement(
795
852
  components.Img,
796
853
  {
797
854
  src: options.trackingPixelUrl,
package/dist/index.d.ts CHANGED
@@ -526,6 +526,8 @@ interface RenderAtomDocumentToHtmlOptions {
526
526
  cymbalBrandingUrl?: string | null;
527
527
  emailPreviewText?: string | null;
528
528
  trackingPixelUrl?: string | null;
529
+ /** When set, renders the top "Unsubscribe" bar linking to this URL. */
530
+ topUnsubscribeLink?: string | null;
529
531
  }
530
532
  declare function renderAtomDocumentToHtml(doc: AtomDocumentContents, options?: RenderAtomDocumentToHtmlOptions): Promise<string>;
531
533
 
package/dist/index.mjs CHANGED
@@ -1,4 +1,4 @@
1
- import { render, Html, Head, Body, Container, Section, Text, Link, Img, Button, Column, Row, Hr, Heading } from '@react-email/components';
1
+ import { render, Html, Head, Body, Container, Section, Text, Link, Img, Column, Row, Heading, Button, Hr } from '@react-email/components';
2
2
  import React from 'react';
3
3
 
4
4
  const MIN_LAYOUT_BASIS = 1;
@@ -770,6 +770,63 @@ const hiddenPreheaderStyle = {
770
770
  opacity: 0,
771
771
  overflow: "hidden"
772
772
  };
773
+ const TopUnsubscribeBar = ({ unsubscribeLink }) => /* @__PURE__ */ React.createElement(
774
+ "table",
775
+ {
776
+ align: "center",
777
+ border: 0,
778
+ cellPadding: "0",
779
+ cellSpacing: "0",
780
+ role: "presentation",
781
+ style: { background: "#FFFFFF", backgroundColor: "#FFFFFF", width: "100%" }
782
+ },
783
+ /* @__PURE__ */ React.createElement("tbody", null, /* @__PURE__ */ React.createElement("tr", null, /* @__PURE__ */ React.createElement("td", null, /* @__PURE__ */ React.createElement("div", null, /* @__PURE__ */ React.createElement(
784
+ "table",
785
+ {
786
+ align: "center",
787
+ border: 0,
788
+ cellPadding: "0",
789
+ cellSpacing: "0",
790
+ role: "presentation",
791
+ style: { width: "100%" }
792
+ },
793
+ /* @__PURE__ */ React.createElement("tbody", null, /* @__PURE__ */ React.createElement("tr", null, /* @__PURE__ */ React.createElement(
794
+ "td",
795
+ {
796
+ className: "top-unsubscribe",
797
+ style: {
798
+ fontSize: 0,
799
+ paddingTop: "16px",
800
+ paddingBottom: "16px",
801
+ textAlign: "left"
802
+ }
803
+ },
804
+ /* @__PURE__ */ React.createElement(
805
+ "div",
806
+ {
807
+ style: {
808
+ fontFamily: "'Google Sans', Roboto, RobotoDraft, Helvetica, Arial, sans-serif",
809
+ fontSize: "14px",
810
+ fontWeight: "500",
811
+ lineHeight: "1",
812
+ textAlign: "left",
813
+ color: "#3771e0"
814
+ }
815
+ },
816
+ /* @__PURE__ */ React.createElement(
817
+ "a",
818
+ {
819
+ style: { color: "#3771e0", textDecoration: "none" },
820
+ href: unsubscribeLink,
821
+ target: "_blank",
822
+ rel: "noopener noreferrer"
823
+ },
824
+ "Unsubscribe"
825
+ )
826
+ )
827
+ )))
828
+ )))))
829
+ );
773
830
  const AtomDocumentContentsEmail = ({
774
831
  document: doc,
775
832
  options
@@ -789,7 +846,7 @@ const AtomDocumentContentsEmail = ({
789
846
  rel: "stylesheet",
790
847
  href: `https://fonts.googleapis.com/css2?family=${encodeURIComponent(fontFamily)}:wght@100;200;300;400;500;600;700;800;900&display=swap`
791
848
  }
792
- ))), /* @__PURE__ */ React.createElement(Body, { style: { backgroundColor: bodyBackgroundColor, margin: 0, padding: 0 } }, options?.emailPreviewText ? /* @__PURE__ */ React.createElement("div", { style: hiddenPreheaderStyle }, options.emailPreviewText) : null, options?.automationPreviewHeaderHtml ? /* @__PURE__ */ React.createElement("div", { dangerouslySetInnerHTML: { __html: options.automationPreviewHeaderHtml } }) : null, /* @__PURE__ */ React.createElement(Container, { style: { maxWidth: doc.maxWidth, margin: "0 auto" } }, /* @__PURE__ */ React.createElement(EmailRowsAtom, { atom: doc.rootRow, ctx }), options?.cymbalBrandingUrl ? /* @__PURE__ */ React.createElement(Section, null, /* @__PURE__ */ React.createElement(Text, { style: { color: "#999999", fontSize: 12, textAlign: "center" } }, "Powered by", " ", /* @__PURE__ */ React.createElement(Link, { href: options.cymbalBrandingUrl, style: { color: "#999999" } }, "Cymbal"))) : null), options?.trackingPixelUrl ? /* @__PURE__ */ React.createElement(
849
+ ))), /* @__PURE__ */ React.createElement(Body, { style: { backgroundColor: bodyBackgroundColor, margin: 0, padding: 0 } }, options?.emailPreviewText ? /* @__PURE__ */ React.createElement("div", { style: hiddenPreheaderStyle }, options.emailPreviewText) : null, options?.topUnsubscribeLink ? /* @__PURE__ */ React.createElement(TopUnsubscribeBar, { unsubscribeLink: options.topUnsubscribeLink }) : null, options?.automationPreviewHeaderHtml ? /* @__PURE__ */ React.createElement("div", { dangerouslySetInnerHTML: { __html: options.automationPreviewHeaderHtml } }) : null, /* @__PURE__ */ React.createElement(Container, { style: { maxWidth: doc.maxWidth, margin: "0 auto" } }, /* @__PURE__ */ React.createElement(EmailRowsAtom, { atom: doc.rootRow, ctx }), options?.cymbalBrandingUrl ? /* @__PURE__ */ React.createElement(Section, null, /* @__PURE__ */ React.createElement(Text, { style: { color: "#999999", fontSize: 12, textAlign: "center" } }, "Powered by", " ", /* @__PURE__ */ React.createElement(Link, { href: options.cymbalBrandingUrl, style: { color: "#999999" } }, "Cymbal"))) : null), options?.trackingPixelUrl ? /* @__PURE__ */ React.createElement(
793
850
  Img,
794
851
  {
795
852
  src: options.trackingPixelUrl,
package/package.json CHANGED
@@ -1,10 +1,12 @@
1
1
  {
2
2
  "name": "@cymbal/atoms-email-renderer",
3
- "version": "0.0.1",
3
+ "version": "0.0.2",
4
4
  "main": "./dist/index.cjs",
5
5
  "module": "./dist/index.mjs",
6
6
  "types": "./dist/index.d.ts",
7
- "files": ["dist"],
7
+ "files": [
8
+ "dist"
9
+ ],
8
10
  "publishConfig": {
9
11
  "access": "public"
10
12
  },