amp-email-generator

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>