@mindful-web/marko-web-theme-monorail 1.0.0

package/components/blocks/native-x-card-deck.marko

@@ -0,0 +1,85 @@
+import { defaultValue } from "@mindful-web/marko-web/utils";
+import { getAsArray, getAsObject } from "@mindful-web/object-path";
+import convertAdToNode from "@mindful-web/marko-web-native-x/utils/convert-ad-to-node";
+
+$ const { nativeX: nxConfig, i18n } = out.global;
+$ const { section } = input;
+$ const limit = defaultValue(input.limit, 3);
+$ const placementName = defaultValue(input.placementName, "default");
+$ const aliases = defaultValue(input.aliases, []);
+$ const cols = input.cols != null ? input.cols : limit;
+$ const viewMore = defaultValue(input.viewMore, false);
+$ const nodeImageInput = getAsObject(input, "node.image");
+
+$ const blockName = "content-card-deck";
+$ const uri = nxConfig.getUri();
+$ const placement = nxConfig.getPlacement({ name: placementName, aliases });
+
+<marko-web-native-x-fetch-elements|{ ads }| uri=uri id=placement.id opts={ n: limit }>
+  $ const hasAd = ads && ads.length && ads[0] && ads[0].hasCampaign;
+  <if(hasAd)>
+    $ const nodes = ads.filter((ad) => ad.hasCampaign);
+    $ const title = input.title || section && section.name;
+    $ const description = input.description || section && section.description || input.defaultDescription;
+    <marko-web-block name=blockName>
+      <if(title)>
+        <marko-web-element block-name=blockName name="header">
+          <marko-web-element block-name=blockName name="header-left">
+            <marko-web-element block-name=blockName name="title">
+              ${title}
+            </marko-web-element>
+            <if(description)>
+              <marko-web-element block-name=blockName name="description">
+                $!{description}
+              </marko-web-element>
+            </if>
+          </marko-web-element>
+          <marko-web-element block-name=blockName name="header-right">
+            <if(viewMore && section && section.canonicalPath)>
+              <marko-web-element block-name=blockName name="view-more">
+                <marko-web-link href=section.canonicalPath>
+                  ${i18n("View more")} &raquo;
+                </marko-web-link>
+              </marko-web-element>
+            </if>
+          </marko-web-element>
+        </marko-web-element>
+      </if>
+
+      $ const modifiers = getAsArray(input, "modifiers");
+      $ modifiers.push(blockName, `${cols}-cols`);
+      <marko-web-block
+          name="card-deck-flow"
+          modifiers=modifiers
+          attrs=input.attrs
+        >
+          <for|ad| of=nodes>
+          <marko-web-element name="node" block-name="card-deck-flow">
+            <theme-content-node
+              image-position="top"
+              modifiers=["content-card-deck"]
+              card=true
+              flush=true
+              full-height=true
+              with-teaser=false
+              with-dates=false
+              with-section=true
+              ...input.node
+              ...convertAdToNode(ad, { sectionName: `Presented by ${ad.campaign.advertiserName}` })
+            >
+              <@image ar="3:2" fluid=true ...nodeImageInput />
+            </theme-content-node>
+          </marko-web-element>
+          </for>
+        </marko-web-block>
+
+      <if(viewMore && section && section.canonicalPath)>
+        <marko-web-element block-name=blockName name="view-more-bottom">
+          <marko-web-link href=section.canonicalPath>
+            ${i18n("View more")} &raquo;
+          </marko-web-link>
+        </marko-web-element>
+      </if>
+    </marko-web-block>
+  </if>
+</marko-web-native-x-fetch-elements>

package/components/blocks/native-x-card-deck.marko.js

@@ -0,0 +1,221 @@
+// Compiled using marko@4.20.2 - DO NOT EDIT
+"use strict";
+
+var marko_template = module.exports = require("marko/dist/html").t(__filename),
+    marko_componentType = "/@mindful-web/marko-web-theme-monorail$1.0.0/components/blocks/native-x-card-deck.marko",
+    marko_component = require("./native-x-card-deck.marko"),
+    marko_renderer = require("marko/dist/runtime/components/renderer"),
+    module_utils_module = require("@mindful-web/marko-web/utils"),
+    utils_module = module_utils_module.default || module_utils_module,
+    defaultValue = module_utils_module.defaultValue,
+    module_objectPath_module = require("@mindful-web/object-path"),
+    objectPath_module = module_objectPath_module.default || module_objectPath_module,
+    getAsArray = module_objectPath_module.getAsArray,
+    getAsObject = module_objectPath_module.getAsObject,
+    module_convertAdToNode = require("@mindful-web/marko-web-native-x/utils/convert-ad-to-node"),
+    convertAdToNode = module_convertAdToNode.default || module_convertAdToNode,
+    helpers_escape_xml = require("marko/dist/runtime/html/helpers/escape-xml"),
+    marko_escapeXml = helpers_escape_xml.x,
+    marko_web_element_template = require("@mindful-web/marko-web/components/element/index.marko"),
+    marko_loadTag = require("marko/dist/runtime/helpers/load-tag"),
+    marko_web_element_tag = marko_loadTag(marko_web_element_template),
+    marko_str = require("marko/dist/runtime/helpers/to-string"),
+    marko_web_link_template = require("@mindful-web/marko-web/components/element/link.marko"),
+    marko_web_link_tag = marko_loadTag(marko_web_link_template),
+    marko_forOf = require("marko/dist/runtime/helpers/for-of"),
+    marko_assign = require("marko/dist/runtime/helpers/assign"),
+    theme_content_node_template = require("../nodes/content.marko"),
+    theme_content_node_tag = marko_loadTag(theme_content_node_template),
+    marko_web_block_template = require("@mindful-web/marko-web/components/element/block.marko"),
+    marko_web_block_tag = marko_loadTag(marko_web_block_template),
+    marko_web_native_x_fetch_elements_template = require("@mindful-web/marko-web-native-x/components/fetch-elements.marko"),
+    marko_web_native_x_fetch_elements_tag = marko_loadTag(marko_web_native_x_fetch_elements_template);
+
+function render(input, out, __component, component, state) {
+  var data = input;
+
+  const { nativeX: nxConfig, i18n } = out.global;
+
+  const { section } = input;
+
+  const limit = defaultValue(input.limit, 3);
+
+  const placementName = defaultValue(input.placementName, "default");
+
+  const aliases = defaultValue(input.aliases, []);
+
+  const cols = input.cols != null ? input.cols : limit;
+
+  const viewMore = defaultValue(input.viewMore, false);
+
+  const nodeImageInput = getAsObject(input, "node.image");
+
+  const blockName = "content-card-deck";
+
+  const uri = nxConfig.getUri();
+
+  const placement = nxConfig.getPlacement({ name: placementName, aliases });
+
+  marko_web_native_x_fetch_elements_tag({
+      uri: uri,
+      id: placement.id,
+      opts: {
+          n: limit
+        },
+      renderBody: function(out, { ads }) {
+        const hasAd = ads && ads.length && ads[0] && ads[0].hasCampaign;
+
+        if (hasAd) {
+          const nodes = ads.filter((ad) => ad.hasCampaign);
+
+          const title = input.title || section && section.name;
+
+          const description = input.description || section && section.description || input.defaultDescription;
+
+          marko_web_block_tag({
+              name: blockName,
+              tag: "div",
+              renderBody: function(out) {
+                if (title) {
+                  marko_web_element_tag({
+                      name: "header",
+                      tag: "div",
+                      blockName: blockName,
+                      renderBody: function(out) {
+                        marko_web_element_tag({
+                            name: "header-left",
+                            tag: "div",
+                            blockName: blockName,
+                            renderBody: function(out) {
+                              marko_web_element_tag({
+                                  name: "title",
+                                  tag: "div",
+                                  blockName: blockName,
+                                  renderBody: function(out) {
+                                    out.w(marko_escapeXml(title));
+                                  }
+                                }, out, __component, "4");
+
+                              if (description) {
+                                marko_web_element_tag({
+                                    name: "description",
+                                    tag: "div",
+                                    blockName: blockName,
+                                    renderBody: function(out) {
+                                      out.w(marko_str(description));
+                                    }
+                                  }, out, __component, "5");
+                              }
+                            }
+                          }, out, __component, "3");
+
+                        marko_web_element_tag({
+                            name: "header-right",
+                            tag: "div",
+                            blockName: blockName,
+                            renderBody: function(out) {
+                              if ((viewMore && section) && section.canonicalPath) {
+                                marko_web_element_tag({
+                                    name: "view-more",
+                                    tag: "div",
+                                    blockName: blockName,
+                                    renderBody: function(out) {
+                                      marko_web_link_tag({
+                                          href: section.canonicalPath,
+                                          renderBody: function(out) {
+                                            out.w(marko_escapeXml(i18n("View more")) +
+                                              " »");
+                                          }
+                                        }, out, __component, "8");
+                                    }
+                                  }, out, __component, "7");
+                              }
+                            }
+                          }, out, __component, "6");
+                      }
+                    }, out, __component, "2");
+                }
+
+                const modifiers = getAsArray(input, "modifiers");
+
+                modifiers.push(blockName, `${cols}-cols`);
+
+                marko_web_block_tag({
+                    name: "card-deck-flow",
+                    tag: "div",
+                    modifiers: modifiers,
+                    attrs: input.attrs,
+                    renderBody: function(out) {
+                      var $for$0 = 0;
+
+                      marko_forOf(nodes, function(ad) {
+                        var $keyScope$0 = "[" + (($for$0++) + "]");
+
+                        marko_web_element_tag({
+                            name: "node",
+                            tag: "div",
+                            blockName: "card-deck-flow",
+                            renderBody: function(out) {
+                              theme_content_node_tag(marko_assign({
+                                  imagePosition: "top",
+                                  modifiers: [
+                                      "content-card-deck"
+                                    ],
+                                  card: true,
+                                  flush: true,
+                                  fullHeight: true,
+                                  withTeaser: false,
+                                  withDates: false,
+                                  withSection: true
+                                }, input.node, convertAdToNode(ad, {
+                                  sectionName: "Presented by " + ad.campaign.advertiserName
+                                }), {
+                                  image: marko_assign({
+                                      ar: "3:2",
+                                      fluid: true
+                                    }, nodeImageInput)
+                                }), out, __component, "11" + $keyScope$0);
+                            }
+                          }, out, __component, "10" + $keyScope$0);
+                      });
+                    }
+                  }, out, __component, "9");
+
+                if ((viewMore && section) && section.canonicalPath) {
+                  marko_web_element_tag({
+                      name: "view-more-bottom",
+                      tag: "div",
+                      blockName: blockName,
+                      renderBody: function(out) {
+                        marko_web_link_tag({
+                            href: section.canonicalPath,
+                            renderBody: function(out) {
+                              out.w(marko_escapeXml(i18n("View more")) +
+                                " »");
+                            }
+                          }, out, __component, "14");
+                      }
+                    }, out, __component, "13");
+                }
+              }
+            }, out, __component, "1");
+        }
+      }
+    }, out, __component, "0");
+}
+
+marko_template._ = marko_renderer(render, {
+    e_: marko_componentType
+  }, marko_component);
+
+marko_template.meta = {
+    id: "/@mindful-web/marko-web-theme-monorail$1.0.0/components/blocks/native-x-card-deck.marko",
+    component: "./native-x-card-deck.marko",
+    tags: [
+      "@mindful-web/marko-web/components/element/index.marko",
+      "@mindful-web/marko-web/components/element/link.marko",
+      "../nodes/content.marko",
+      "@mindful-web/marko-web/components/element/block.marko",
+      "@mindful-web/marko-web-native-x/components/fetch-elements.marko"
+    ]
+  };

package/components/blocks/native-x-promo-card.marko

@@ -0,0 +1,55 @@
+import { defaultValue } from "@mindful-web/marko-web/utils";
+import { getAsObject } from "@mindful-web/object-path";
+import convertAdToNode from "@mindful-web/marko-web-native-x/utils/convert-ad-to-node";
+
+$ const { nativeX: nxConfig } = out.global;
+$ const placementName = defaultValue(input.placementName, "default");
+$ const aliases = defaultValue(input.aliases, []);
+$ const blockName = "callout-cards";
+$ const uri = nxConfig.getUri();
+$ const placement = nxConfig.getPlacement({ name: placementName, aliases });
+$ const calculateImageSize = ({ width, height }) => {
+  const aspectRatio = (width / height);
+  if (input.imageWidth && input.imageHeight) {
+    return { width: input.imageWidth, height: input.imageHeight };
+  } else if (input.imageWidth && !input.imageHeight ) {
+    return { width: input.imageWidth, height: input.imageWidth / aspectRatio };
+  } else if (!input.imageWidth && input.imageHeight) {
+    return { width: input.imageHeight * aspectRatio, height: input.imageHeight };
+  }
+  // See https://github.com/parameter1/mindful-web/pull/935
+  // For why this is the default
+  return { width: 120, height: (height / (width / 120)) };
+};
+
+<marko-web-native-x-fetch-elements|{ ads }| uri=uri id=placement.id opts={ n: 2 }>
+  $ const hasAd = ads && ads.length && ads[0] && ads[0].hasCampaign;
+  <if(hasAd)>
+    <marko-web-block name=blockName>
+      <marko-web-element block-name=blockName name="row">
+        <marko-web-element block-name=blockName name="col">
+          <if(ads[0] && ads[0].hasCampaign)>
+            $ const { width, height } = getAsObject(ads[0], 'image');
+            $ const { width: calculatedWidth, height: calculatedHeight } = calculateImageSize({ width, height });
+            <theme-standard-promo-node
+              image-width=calculatedWidth
+              image-height=calculatedHeight
+              ...convertAdToNode(ads[0])
+            />
+          </if>
+        </marko-web-element>
+        <marko-web-element block-name=blockName name="col" modifiers=["last"]>
+          <if(ads[1] && ads[1].hasCampaign)>
+            $ const { width, height } = getAsObject(ads[1], 'image');
+            $ const { width: calculatedWidth, height: calculatedHeight } = calculateImageSize({ width, height });
+            <theme-standard-promo-node
+              image-width=calculatedWidth
+              image-height=calculatedHeight
+              ...convertAdToNode(ads[1])
+            />
+          </if>
+        </marko-web-element>
+      </marko-web-element>
+    </marko-web-block>
+  </if>
+</marko-web-native-x-fetch-elements>

package/components/blocks/native-x-promo-card.marko.js

@@ -0,0 +1,135 @@
+// Compiled using marko@4.20.2 - DO NOT EDIT
+"use strict";
+
+var marko_template = module.exports = require("marko/dist/html").t(__filename),
+    marko_componentType = "/@mindful-web/marko-web-theme-monorail$1.0.0/components/blocks/native-x-promo-card.marko",
+    marko_component = require("./native-x-promo-card.marko"),
+    marko_renderer = require("marko/dist/runtime/components/renderer"),
+    module_utils_module = require("@mindful-web/marko-web/utils"),
+    utils_module = module_utils_module.default || module_utils_module,
+    defaultValue = module_utils_module.defaultValue,
+    module_objectPath_module = require("@mindful-web/object-path"),
+    objectPath_module = module_objectPath_module.default || module_objectPath_module,
+    getAsObject = module_objectPath_module.getAsObject,
+    module_convertAdToNode = require("@mindful-web/marko-web-native-x/utils/convert-ad-to-node"),
+    convertAdToNode = module_convertAdToNode.default || module_convertAdToNode,
+    marko_assign = require("marko/dist/runtime/helpers/assign"),
+    theme_standard_promo_node_template = require("../nodes/standard-promo.marko"),
+    marko_loadTag = require("marko/dist/runtime/helpers/load-tag"),
+    theme_standard_promo_node_tag = marko_loadTag(theme_standard_promo_node_template),
+    marko_web_element_template = require("@mindful-web/marko-web/components/element/index.marko"),
+    marko_web_element_tag = marko_loadTag(marko_web_element_template),
+    marko_web_block_template = require("@mindful-web/marko-web/components/element/block.marko"),
+    marko_web_block_tag = marko_loadTag(marko_web_block_template),
+    marko_web_native_x_fetch_elements_template = require("@mindful-web/marko-web-native-x/components/fetch-elements.marko"),
+    marko_web_native_x_fetch_elements_tag = marko_loadTag(marko_web_native_x_fetch_elements_template);
+
+function render(input, out, __component, component, state) {
+  var data = input;
+
+  const { nativeX: nxConfig } = out.global;
+
+  const placementName = defaultValue(input.placementName, "default");
+
+  const aliases = defaultValue(input.aliases, []);
+
+  const blockName = "callout-cards";
+
+  const uri = nxConfig.getUri();
+
+  const placement = nxConfig.getPlacement({ name: placementName, aliases });
+
+  const calculateImageSize = ({ width, height }) => {
+  const aspectRatio = (width / height);
+  if (input.imageWidth && input.imageHeight) {
+    return { width: input.imageWidth, height: input.imageHeight };
+  } else if (input.imageWidth && !input.imageHeight ) {
+    return { width: input.imageWidth, height: input.imageWidth / aspectRatio };
+  } else if (!input.imageWidth && input.imageHeight) {
+    return { width: input.imageHeight * aspectRatio, height: input.imageHeight };
+  }
+  // See https://github.com/parameter1/mindful-web/pull/935
+  // For why this is the default
+  return { width: 120, height: (height / (width / 120)) };
+};
+
+  marko_web_native_x_fetch_elements_tag({
+      uri: uri,
+      id: placement.id,
+      opts: {
+          n: 2
+        },
+      renderBody: function(out, { ads }) {
+        const hasAd = ads && ads.length && ads[0] && ads[0].hasCampaign;
+
+        if (hasAd) {
+          marko_web_block_tag({
+              name: blockName,
+              tag: "div",
+              renderBody: function(out) {
+                marko_web_element_tag({
+                    name: "row",
+                    tag: "div",
+                    blockName: blockName,
+                    renderBody: function(out) {
+                      marko_web_element_tag({
+                          name: "col",
+                          tag: "div",
+                          blockName: blockName,
+                          renderBody: function(out) {
+                            if (ads[0] && ads[0].hasCampaign) {
+                              const { width, height } = getAsObject(ads[0], 'image');
+
+                              const { width: calculatedWidth, height: calculatedHeight } = calculateImageSize({ width, height });
+
+                              theme_standard_promo_node_tag(marko_assign({
+                                  imageWidth: calculatedWidth,
+                                  imageHeight: calculatedHeight
+                                }, convertAdToNode(ads[0])), out, __component, "4");
+                            }
+                          }
+                        }, out, __component, "3");
+
+                      marko_web_element_tag({
+                          name: "col",
+                          tag: "div",
+                          blockName: blockName,
+                          modifiers: [
+                              "last"
+                            ],
+                          renderBody: function(out) {
+                            if (ads[1] && ads[1].hasCampaign) {
+                              const { width, height } = getAsObject(ads[1], 'image');
+
+                              const { width: calculatedWidth, height: calculatedHeight } = calculateImageSize({ width, height });
+
+                              theme_standard_promo_node_tag(marko_assign({
+                                  imageWidth: calculatedWidth,
+                                  imageHeight: calculatedHeight
+                                }, convertAdToNode(ads[1])), out, __component, "6");
+                            }
+                          }
+                        }, out, __component, "5");
+                    }
+                  }, out, __component, "2");
+              }
+            }, out, __component, "1");
+        }
+      }
+    }, out, __component, "0");
+}
+
+marko_template._ = marko_renderer(render, {
+    e_: marko_componentType
+  }, marko_component);
+
+marko_template.meta = {
+    id: "/@mindful-web/marko-web-theme-monorail$1.0.0/components/blocks/native-x-promo-card.marko",
+    component: "./native-x-promo-card.marko",
+    tags: [
+      "../nodes/standard-promo.marko",
+      "@mindful-web/marko-web/components/element/index.marko",
+      "@mindful-web/marko-web/components/element/block.marko",
+      "@mindful-web/marko-web-native-x/components/fetch-elements.marko"
+    ]
+  };

package/components/blocks/newsletter-signup-banner-external.marko

@@ -0,0 +1,33 @@
+import defaultValue from "@mindful-web/marko-core/utils/default-value";
+
+$ const { site, i18n } = out.global;
+$ const configName = defaultValue(input.configName, "signupBannerExternal");
+$ const newsletterConfig = site.getAsObject(`newsletter.${configName}`);
+$ const blockName = defaultValue(input.blockName, "newsletter-signup-banner-large");
+
+<marko-web-block name=blockName class=input.class modifiers=input.modifires>
+  $ const nameClass = (newsletterConfig.description) ? "" : "mb-3";
+  <marko-web-element block-name=blockName name="name" class=nameClass>
+    $!{newsletterConfig.name}
+  </marko-web-element>
+  <if(newsletterConfig.description)>
+    <marko-web-element block-name=blockName name="description">
+      $!{newsletterConfig.description}
+    </marko-web-element>
+  </if>
+  <form class=`${blockName}__form` action=newsletterConfig.action method="GET" target="_blank">
+    <label for=`${blockName}-email` class="sr-only">${i18n("Email")}</label>
+    <input
+      id=`${blockName}-email`
+      class="form-control"
+      type="email"
+      placeholder="example@gmail.com"
+      name="em"
+      required
+    />
+    <for|item| of=newsletterConfig.hiddenInputs>
+      <input type="hidden" name=item.name value=item.value />
+    </for>
+    <button class="btn btn-primary" type="submit" disabled=(newsletterConfig.disabled && "disabled")>${i18n("Sign Up")}</button>
+  </form>
+</marko-web-block>

package/components/blocks/newsletter-signup-banner-external.marko.js

@@ -0,0 +1,103 @@
+// Compiled using marko@4.20.2 - DO NOT EDIT
+"use strict";
+
+var marko_template = module.exports = require("marko/dist/html").t(__filename),
+    marko_componentType = "/@mindful-web/marko-web-theme-monorail$1.0.0/components/blocks/newsletter-signup-banner-external.marko",
+    marko_renderer = require("marko/dist/runtime/components/renderer"),
+    module_defaultValue = require("@mindful-web/marko-core/utils/default-value"),
+    defaultValue = module_defaultValue.default || module_defaultValue,
+    marko_str = require("marko/dist/runtime/helpers/to-string"),
+    marko_web_element_template = require("@mindful-web/marko-web/components/element/index.marko"),
+    marko_loadTag = require("marko/dist/runtime/helpers/load-tag"),
+    marko_web_element_tag = marko_loadTag(marko_web_element_template),
+    helpers_escape_xml = require("marko/dist/runtime/html/helpers/escape-xml"),
+    marko_escapeXml = helpers_escape_xml.x,
+    marko_attr = require("marko/dist/runtime/html/helpers/attr"),
+    marko_forOf = require("marko/dist/runtime/helpers/for-of"),
+    marko_classAttr = require("marko/dist/runtime/html/helpers/class-attr"),
+    marko_web_block_template = require("@mindful-web/marko-web/components/element/block.marko"),
+    marko_web_block_tag = marko_loadTag(marko_web_block_template);
+
+function render(input, out, __component, component, state) {
+  var data = input;
+
+  const { site, i18n } = out.global;
+
+  const configName = defaultValue(input.configName, "signupBannerExternal");
+
+  const newsletterConfig = site.getAsObject(`newsletter.${configName}`);
+
+  const blockName = defaultValue(input.blockName, "newsletter-signup-banner-large");
+
+  marko_web_block_tag({
+      name: blockName,
+      tag: "div",
+      class: input.class,
+      modifiers: input.modifires,
+      renderBody: function(out) {
+        const nameClass = (newsletterConfig.description) ? "" : "mb-3";
+
+        marko_web_element_tag({
+            name: "name",
+            tag: "div",
+            blockName: blockName,
+            class: nameClass,
+            renderBody: function(out) {
+              out.w(marko_str(newsletterConfig.name));
+            }
+          }, out, __component, "1");
+
+        if (newsletterConfig.description) {
+          marko_web_element_tag({
+              name: "description",
+              tag: "div",
+              blockName: blockName,
+              renderBody: function(out) {
+                out.w(marko_str(newsletterConfig.description));
+              }
+            }, out, __component, "2");
+        }
+
+        out.w("<form" +
+          marko_classAttr(blockName + "__form") +
+          marko_attr("action", newsletterConfig.action) +
+          " method=\"GET\" target=\"_blank\"><label" +
+          marko_attr("for", blockName + "-email") +
+          " class=\"sr-only\">" +
+          marko_escapeXml(i18n("Email")) +
+          "</label><input" +
+          marko_attr("id", blockName + "-email") +
+          " class=\"form-control\" type=\"email\" placeholder=\"example@gmail.com\" name=\"em\" required>");
+
+        var $for$0 = 0;
+
+        marko_forOf(newsletterConfig.hiddenInputs, function(item) {
+          var $keyScope$0 = "[" + (($for$0++) + "]");
+
+          out.w("<input type=\"hidden\"" +
+            marko_attr("name", item.name) +
+            marko_attr("value", item.value) +
+            ">");
+        });
+
+        out.w("<button class=\"btn btn-primary\" type=\"submit\"" +
+          marko_attr("disabled", newsletterConfig.disabled && "disabled") +
+          ">" +
+          marko_escapeXml(i18n("Sign Up")) +
+          "</button></form>");
+      }
+    }, out, __component, "0");
+}
+
+marko_template._ = marko_renderer(render, {
+    d_: true,
+    e_: marko_componentType
+  });
+
+marko_template.meta = {
+    id: "/@mindful-web/marko-web-theme-monorail$1.0.0/components/blocks/newsletter-signup-banner-external.marko",
+    tags: [
+      "@mindful-web/marko-web/components/element/index.marko",
+      "@mindful-web/marko-web/components/element/block.marko"
+    ]
+  };

package/components/blocks/newsletter-signup-banner-large.marko

@@ -0,0 +1,36 @@
+$ const blockName = "newsletter-signup-banner-large";
+
+$ const { site } = out.global;
+$ const {
+  action,
+  hiddenInputs,
+  name,
+  description,
+  disabled
+} = site.getAsObject('newsletter.signupBannerLarge');
+
+<if(action && description && name)>
+  <marko-web-block name=blockName class=input.class>
+    <marko-web-element block-name=blockName name="name">
+      ${name}
+    </marko-web-element>
+    <marko-web-element block-name=blockName name="description">
+      $!{description}
+    </marko-web-element>
+    <form method="GET" action=action class=`${blockName}__form`>
+      <label for="newsletter-signup-banner-large-email" class="sr-only">Email</label>
+      <input
+        id="newsletter-signup-banner-large-email"
+        class="form-control"
+        placeholder="example@gmail.com"
+        type="email"
+        name="em"
+        required
+      />
+      <for|item| of=hiddenInputs>
+        <input type="hidden" name=item.name value=item.value />
+      </for>
+      <button class="btn btn-primary" type="submit" disabled=(disabled && "disabled")>Sign Up</button>
+    </form>
+  </marko-web-block>
+</if>