feat: release design system engine, studio and component contracts
This commit is contained in:
Clintchiz committed
1 parent
ff1065fb27
commit
3943b946d6
693 files changed
+175546
-3894
No files matched your search
@@ -5,18 +5,55 @@ import { renderEmail, validateMjml } from "../src/index.ts";
|
||||
test("button alignment maps physical and logical positions consistently in LTR and RTL", async () => {
|
||||
for (const direction of ["ltr", "rtl"] as const) {
|
||||
for (const alignment of [undefined, "left", "center", "right", "start", "end"]) {
|
||||
const expected = !alignment || alignment === "start" ? (direction === "rtl" ? "right" : "left") : alignment === "end" ? (direction === "rtl" ? "left" : "right") : alignment;
|
||||
const expected =
|
||||
!alignment || alignment === "start"
|
||||
? direction === "rtl"
|
||||
? "right"
|
||||
: "left"
|
||||
: alignment === "end"
|
||||
? direction === "rtl"
|
||||
? "left"
|
||||
: "right"
|
||||
: alignment;
|
||||
const document: BlockDocument = {
|
||||
schemaVersion: 1, kind: "email", meta: { subject: "Alignment", lang: "en" }, theme: { tokens: {} },
|
||||
root: { id: "root", type: "layout.email-document", version: 1, props: { width: "600" }, styles: {}, slots: {
|
||||
content: [{ id: "cta", type: "content.button", version: 1, props: { label: "Act", href: "https://example.com" }, styles: alignment ? { textAlign: { base: alignment } } : {}, slots: {} }],
|
||||
} },
|
||||
schemaVersion: 1,
|
||||
kind: "email",
|
||||
meta: { subject: "Alignment", lang: "en" },
|
||||
theme: { tokens: {} },
|
||||
root: {
|
||||
id: "root",
|
||||
type: "layout.email-document",
|
||||
version: 1,
|
||||
props: { width: "600" },
|
||||
styles: {},
|
||||
slots: {
|
||||
content: [
|
||||
{
|
||||
id: "cta",
|
||||
type: "content.button",
|
||||
version: 1,
|
||||
props: { label: "Act", href: "https://example.com" },
|
||||
styles: alignment ? { textAlign: { base: alignment } } : {},
|
||||
slots: {},
|
||||
},
|
||||
],
|
||||
},
|
||||
},
|
||||
};
|
||||
const rendered = await renderEmail(document, { direction, amp: true, mjml: true, ampValidationTimeoutMs: 10000 });
|
||||
const rendered = await renderEmail(document, {
|
||||
direction,
|
||||
amp: true,
|
||||
mjml: true,
|
||||
ampValidationTimeoutMs: 10000,
|
||||
});
|
||||
expect(rendered.ok).toBe(true);
|
||||
if (!rendered.ok) continue;
|
||||
expect(rendered.value.parts.html.content).toContain(`<table role="presentation" align="${expected}" cellpadding="0"`);
|
||||
expect(rendered.value.parts.amp?.content).toContain(`data-block-id="cta" align="${expected}"`);
|
||||
expect(rendered.value.parts.html.content).toContain(
|
||||
`<table role="presentation" align="${expected}" cellpadding="0"`,
|
||||
);
|
||||
expect(rendered.value.parts.amp?.content).toContain(
|
||||
`data-block-id="cta" align="${expected}"`,
|
||||
);
|
||||
expect(rendered.value.parts.amp?.validation.valid).toBe(true);
|
||||
expect(rendered.value.exports?.mjml).toContain(`<mj-button align="${expected}"`);
|
||||
}
|
||||
@@ -25,24 +62,62 @@ test("button alignment maps physical and logical positions consistently in LTR a
|
||||
|
||||
test("button typography and corners reach the clickable element in every target", async () => {
|
||||
const document: BlockDocument = {
|
||||
schemaVersion: 1, kind: "email", meta: { subject: "Styled CTA", lang: "en" }, theme: { tokens: {} },
|
||||
root: { id: "root", type: "layout.email-document", version: 1, props: { width: "600" }, styles: {}, slots: {
|
||||
content: [{ id: "cta", type: "content.button", version: 1, props: { label: "Read more", href: "https://example.com" }, styles: {
|
||||
color: { base: "#123456" }, fontSize: { base: "22px" }, fontWeight: { base: "400" }, borderRadius: { base: "18px" },
|
||||
}, slots: {} }],
|
||||
} },
|
||||
schemaVersion: 1,
|
||||
kind: "email",
|
||||
meta: { subject: "Styled CTA", lang: "en" },
|
||||
theme: { tokens: {} },
|
||||
root: {
|
||||
id: "root",
|
||||
type: "layout.email-document",
|
||||
version: 1,
|
||||
props: { width: "600" },
|
||||
styles: {},
|
||||
slots: {
|
||||
content: [
|
||||
{
|
||||
id: "cta",
|
||||
type: "content.button",
|
||||
version: 1,
|
||||
props: { label: "Read more", href: "https://example.com" },
|
||||
styles: {
|
||||
color: { base: "#123456" },
|
||||
fontSize: { base: "22px" },
|
||||
fontWeight: { base: "400" },
|
||||
borderRadius: { base: "18px" },
|
||||
},
|
||||
slots: {},
|
||||
},
|
||||
],
|
||||
},
|
||||
},
|
||||
};
|
||||
const before = structuredClone(document);
|
||||
const result = await renderEmail(document, { amp: true, mjml: true, ampValidationTimeoutMs: 10000 });
|
||||
const result = await renderEmail(document, {
|
||||
amp: true,
|
||||
mjml: true,
|
||||
ampValidationTimeoutMs: 10000,
|
||||
});
|
||||
expect(result.ok).toBe(true);
|
||||
if (!result.ok) return;
|
||||
const anchor = result.value.parts.html.content.match(/<a href="https:\/\/example.com" style="([^"]+)"/)?.[1];
|
||||
for (const declaration of ["color:#123456", "font-size:22px", "font-weight:400", "border-radius:18px"]) {
|
||||
const anchor = result.value.parts.html.content.match(
|
||||
/<a href="https:\/\/example.com" style="([^"]+)"/,
|
||||
)?.[1];
|
||||
for (const declaration of [
|
||||
"color:#123456",
|
||||
"font-size:22px",
|
||||
"font-weight:400",
|
||||
"border-radius:18px",
|
||||
]) {
|
||||
expect(anchor).toContain(declaration);
|
||||
expect(result.value.parts.amp?.content).toContain(declaration);
|
||||
}
|
||||
expect(result.value.parts.amp?.validation.valid).toBe(true);
|
||||
for (const attribute of ['color="#123456"', 'font-size="22px"', 'font-weight="400"', 'border-radius="18px"']) {
|
||||
for (const attribute of [
|
||||
'color="#123456"',
|
||||
'font-size="22px"',
|
||||
'font-weight="400"',
|
||||
'border-radius="18px"',
|
||||
]) {
|
||||
expect(result.value.exports?.mjml).toContain(attribute);
|
||||
}
|
||||
expect(await validateMjml(result.value.exports!.mjml!)).toEqual([]);
|
||||
@@ -52,14 +127,46 @@ test("button typography and corners reach the clickable element in every target"
|
||||
test("button background inherits brand color with explicit semantic overrides across formats", async () => {
|
||||
for (const override of [undefined, "#aabbcc"]) {
|
||||
const document: BlockDocument = {
|
||||
schemaVersion: 1, kind: "email", meta: { subject: "Brand", lang: "en" }, theme: { tokens: {} },
|
||||
root: { id: "root", type: "layout.email-document", version: 1, props: { linkColor: "#125634" }, styles: {}, slots: {
|
||||
content: [{ id: "button", type: "content.button", version: 1, props: { label: "Act", href: "https://example.com" }, styles: override ? { backgroundColor: { base: override } } : {}, slots: {} }],
|
||||
} },
|
||||
schemaVersion: 1,
|
||||
kind: "email",
|
||||
meta: { subject: "Brand", lang: "en" },
|
||||
theme: { tokens: {} },
|
||||
root: {
|
||||
id: "root",
|
||||
type: "layout.email-document",
|
||||
version: 1,
|
||||
props: { linkColor: "#125634" },
|
||||
styles: {},
|
||||
slots: {
|
||||
content: [
|
||||
{
|
||||
id: "button",
|
||||
type: "content.button",
|
||||
version: 1,
|
||||
props: { label: "Act", href: "https://example.com" },
|
||||
styles: override ? { backgroundColor: { base: override } } : {},
|
||||
slots: {},
|
||||
},
|
||||
],
|
||||
},
|
||||
},
|
||||
};
|
||||
document.root.slots.content = [{ id: "section", type: "layout.section", version: 1, props: {}, styles: {}, slots: { content: document.root.slots.content } }];
|
||||
document.root.slots.content = [
|
||||
{
|
||||
id: "section",
|
||||
type: "layout.section",
|
||||
version: 1,
|
||||
props: {},
|
||||
styles: {},
|
||||
slots: { content: document.root.slots.content },
|
||||
},
|
||||
];
|
||||
const before = structuredClone(document);
|
||||
const rendered = await renderEmail(document, { amp: true, mjml: true, ampValidationTimeoutMs: 10000 });
|
||||
const rendered = await renderEmail(document, {
|
||||
amp: true,
|
||||
mjml: true,
|
||||
ampValidationTimeoutMs: 10000,
|
||||
});
|
||||
expect(rendered.ok).toBe(true);
|
||||
if (!rendered.ok) return;
|
||||
const color = override ?? "#125634";
|
||||
|
||||
Reference in new issue
Block a user