mirror of
https://github.com/bitwarden/server
synced 2026-01-08 19:43:34 +00:00
42ff09b84f
Scaffolds MJML and adds some initial templates and components. Of interest are: * src/Core/MailTemplates/Mjml/components/hero.js demonstrates how to create a custom MJML component. In our case it's a hero component with our logo, a title, a call to action button and an image. * src/Core/MailTemplates/Mjml/components/head.mjml defines some common styling. * src/Core/MailTemplates/Mjml/components/footer.mjml social links and footer.
65 lines
1.8 KiB
JavaScript
65 lines
1.8 KiB
JavaScript
const { BodyComponent } = require("mjml-core");
|
|
class MjBwHero extends BodyComponent {
|
|
static dependencies = {
|
|
// Tell the validator which tags are allowed as our component's parent
|
|
"mj-column": ["mj-bw-hero"],
|
|
"mj-wrapper": ["mj-bw-hero"],
|
|
// Tell the validator which tags are allowed as our component's children
|
|
"mj-bw-hero": [],
|
|
};
|
|
|
|
static allowedAttributes = {
|
|
"img-src": "string",
|
|
title: "string",
|
|
"button-text": "string",
|
|
"button-url": "string",
|
|
};
|
|
|
|
static defaultAttributes = {};
|
|
|
|
render() {
|
|
return this.renderMJML(`
|
|
<mj-section
|
|
full-width="full-width"
|
|
background-color="#175ddc"
|
|
border-radius="4px 4px 0 0"
|
|
>
|
|
<mj-column width="70%">
|
|
<mj-image
|
|
align="left"
|
|
src="https://bitwarden.com/images/logo-horizontal-white.png"
|
|
width="150px"
|
|
height="30px"
|
|
></mj-image>
|
|
<mj-text color="#fff" padding-top="0" padding-bottom="0">
|
|
<h1 style="font-weight: normal; font-size: 24px; line-height: 32px">
|
|
${this.getAttribute("title")}
|
|
</h1>
|
|
</mj-text>
|
|
<mj-button
|
|
href="${this.getAttribute("button-url")}"
|
|
background-color="#fff"
|
|
color="#1A41AC"
|
|
border-radius="20px"
|
|
align="left"
|
|
>
|
|
${this.getAttribute("button-text")}
|
|
</mj-button
|
|
>
|
|
</mj-column>
|
|
<mj-column width="30%" vertical-align="bottom">
|
|
<mj-image
|
|
src="${this.getAttribute("img-src")}"
|
|
alt=""
|
|
width="140px"
|
|
height="140px"
|
|
padding="0"
|
|
/>
|
|
</mj-column>
|
|
</mj-section>
|
|
`);
|
|
}
|
|
}
|
|
|
|
module.exports = MjBwHero;
|