Initial Commit

packages/communication/emails/email-templates/src/components/email-divider/email-divider.ts

@@ -0,0 +1,42 @@
+/**
+ * Horizontal rule rendered as a table-with-border-top so it renders
+ * consistently across Outlook + every webmail client.
+ */
+
+import { defaultTheme } from "../../theme/theme.js";
+import { h } from "../../vnode/vnode.js";
+import type { VNode } from "../../vnode/vnode.types.js";
+import type { EmailDividerProps } from "./email-divider.types.js";
+
+export function EmailDivider(props: EmailDividerProps): VNode {
+    const { theme = defaultTheme, color, style } = props;
+    const lineColor = color ?? theme.colors.border;
+    return h(
+        "table",
+        {
+            role: "presentation",
+            cellpadding: 0,
+            cellspacing: 0,
+            style: {
+                width: "100%",
+                margin: `${theme.spacing.md} 0`,
+            },
+        },
+        h(
+            "tr",
+            {},
+            h(
+                "td",
+                {
+                    style: {
+                        "border-top": `1px solid ${lineColor}`,
+                        "font-size": "1px",
+                        "line-height": "1px",
+                        ...(style ?? {}),
+                    },
+                },
+                " "
+            )
+        )
+    );
+}