amp-email-generator
v0.9.0
Published
Generator functions for AMP Email components
Downloads
5
Readme
This is a set of functions that will generate valid AMP email markup
amp-img
getImage({ attributes, fallback })
Ex.
const attributes = {
src: "example.com/my-image.jpg",
layout: "fixed",
height: 400,
width: 400
}
const { html, css, scripts } = getImage({ attributes, fallback: "<span>Fallback Text</span>" });
will result in
<amp-img src="example.com/my-image.jpg" layout="fixed" height="400" width="400">
<span>Fallback Text</span>
</amp-img>
amp-accordion
getAccordion({ sections, accordionAttributes, sectionAttributes })
Ex.
const sections = [
{ header: "<h1>Hello</h1>", content: "<p>World</p>" },
{ header: "<h1>Goodbye</h1>", content: "<p>World</p>", expanded: true }
]
const { html, css, scripts } = getImage({
sections,
accordionAttributes: { animate: true },
sectionAttributes: { class: "my-section" }
});
will result in
<amp-accordion animate>
<section class="my-section">
<h1>Hello</h1>
<p>World</p>
</section>
<section expanded class="my-section">
<h1>Goodbye</h1>
<p>World</p>
</section>
</amp-accordion>
amp-form
getForm({ formAttributes, fields, submitLabel, success, error })
Ex.
const fields = [
{
type: "text",
name: "test-text",
fields: [
{
label: "Test Text Input",
id: "test"
}
]
},
{
type: "radio",
name: "test-radio",
fields: [
{
label: "Test Radio A",
id: "a",
value: "a"
},
{
label: "Test Radio B",
id: "b",
value: "b"
},
{
label: "Test Radio C",
id: "c",
value: "c"
}
]
}
];
const formAttributes = {
target: "_blank",
action: "post",
"action-xhr": "example.com/xhr"
}
const { html, css, scripts } = getForm({
fields,
formAttributes,
success: "Hooray!",
error: "Oh no!",
submitLabel: "This is the submit button!"
});
will result in
<form target="_blank" action="post" action-xhr="example.com/xhr">
<label for="test-text">Test Text Input</label>
<input type="text" id="test" name="test-text">
<input type="radio" id="a" name="test-radio" value="a" >
<label for="test-radio">Test Radio A</label>
<input type="radio" id="b" name="test-radio" value="b" >
<label for="test-radio">Test Radio B</label>
<input type="radio" id="c" name="test-radio" value="c" >
<label for="test-radio">Test Radio C</label>
<input type="submit" value="Submit">
<div submit-success>
Tada!
</div>
<div submit-error>
Oh no!
</div>
</form>