Merge pull request #77 from jwade1327/new-native-block

Create 25 for 25 Native block AM-LFTE

packages/common/components/blocks/ad/marko.json

@@ -16,5 +16,8 @@
   },
   "<common-ad-promotion-case-native-block>": {
     "template": "./promotion-case-native.marko"
+  },
+  "<common-ad-promotion-25-for-25-block>": {
+    "template": "./promotion-25-for-25.marko"
   }
 }

packages/common/components/blocks/ad/promotion-25-for-25.marko

@@ -0,0 +1,17 @@
+import { get, getAsObject } from "@parameter1/base-cms-object-path";
+
+$ const creativeId = get(input, "creativeId");
+$ const tenant = get(input, "tenant");
+$ const newsletter = getAsObject(input, "newsletter");
+$ const content = getAsObject(input, "content");
+$ const advertiser = getAsObject(input, "advertiser");
+$ content.labels = ["Sponsored"];
+
+<common-content-25-for-25-block
+  newsletter=newsletter
+  content=content
+  with-image=false
+  advertiser=advertiser
+  mindful-creative-id=creativeId
+  mindful-tenant=tenant
+/>

packages/common/components/blocks/ad/wrapper.marko

@@ -5,6 +5,7 @@ import PromotionAdvertisementBlock from "./promotion-advertisement";
 import PromotionNativeBlock from "./promotion-native";
 import PromotionSponsoredBlock from "./promotion-sponsored";
 import PromotionCaseNativeBlock from "./promotion-case-native";
+import Promotion25For25Block from "./promotion-25-for-25";
 
 $ const { config } = out.global;
 $ const nativeX = config.getAsObject("nativeX");
@@ -18,6 +19,7 @@ $ const promotionComponents = {
   "native-block": PromotionNativeBlock,
   "sponsored-block": PromotionSponsoredBlock,
   "case-native-block": PromotionCaseNativeBlock,
+  "25-for-25-block": Promotion25For25Block,
 };
 $ const PromotionComponent = promotionComponents[defaultValue(input.promotionComponent, "advertisement-block")];
 

packages/common/components/blocks/content/25-for-25.marko

@@ -0,0 +1,108 @@
+import { get, getAsArray, getAsObject } from "@parameter1/base-cms-object-path";
+import defaultValue from "@parameter1/base-cms-marko-core/utils/default-value";
+import buildLinkUrl from '@science-medicine-group/package-common/utils/build-link-url';
+
+$ const { content, ctaLinkStyle, advertiser } = input;
+$ const creativeId = get(input, "mindfulCreativeId");
+$ const tenant = get(input, "mindfulTenant");
+$ const url = buildLinkUrl(content.siteContext.url);
+
+$ const imgLinkStyles = {
+  "font-family": "'Roboto', arial, sans-serif",
+  "border": 0,
+  "outline": "none",
+  "text-decoration": "none",
+};
+
+$ const nameLinkStyles = {
+  "font-family": "'Roboto', arial, sans-serif",
+  "font-size": "24px",
+  "line-height": "28px",
+  "color": "#202022",
+  "font-weight": "700",
+  "text-decoration": "none",
+};
+
+$ const ctaLinkStyles = {
+  "font-size": "17px",
+  "line-height": "23px",
+  "color": "#3475b6",
+  "font-weight": "400",
+  "text-decoration": "none",
+  ...input.linkStyle,
+};
+
+$ const tagStyle = {
+  "font-family": "'Roboto', arial, sans-serif",
+  "font-size": "14px",
+  "line-height": "19px",
+  "color": "#257478",
+  "text-transform": "uppercase",
+};
+
+$ const sponsoredTagStyle = {
+  ...tagStyle,
+  "color": "#a91b20",
+};
+
+$ const linkAttrs = {
+  ...(getAsObject(input, "link.attrs")),
+  ...(creativeId && { 'data-mindful-creative-id': creativeId }),
+  ...(tenant && { 'data-mindful-tenant': tenant }),
+};
+
+$ const imgLinkAttrs = { style: imgLinkStyles, ...linkAttrs };
+$ const nameLinkAttrs = { style: nameLinkStyles, ...linkAttrs };
+$ const ctaLinkAttrs = { style: ctaLinkStyles, ...linkAttrs };
+
+<tr>
+  <td align="center" valign="top">
+    <table role="presentation" width="100%" border="0" align="center"  cellpadding="0" cellspacing="0" style="background: #eff1f3;">
+      <tr>
+        <td align="center" valign="middle" height="38">
+          <p style="font-size:15px;color: #000000;text-decoration: none;display: block;font-weight:700;font-family:'Roboto', Arial, sans-serif;text-transform: uppercase;padding: 0 24px;">
+            25 for 25
+          </p>
+        </td>
+      </tr>
+    </table>
+  </td>
+</tr>
+<common-table-spacer-element height="24" />
+<tr>
+  <td align="center" valign="top">
+    <table role="presentation" width="610" border="0" align="center" cellpadding="0" cellspacing="0" class="wrap003">
+      $ const tag = (content.company) ? `Sponsored by ${get(content, "company.name")}` : "Sponsored Content";
+      <tr>
+        <td align="left" valign="top" style=sponsoredTagStyle>${tag}</td>
+        <td align="right" width="200">
+          <marko-newsletter-imgix
+            src=advertiser.image.src
+            alt=advertiser.image.alt
+            options={ auto: "format,compress" }
+            attrs={ border: 0, width: 180, height: 50 }
+          >
+            <@link href=advertiser.website target="_blank" attrs=imgLinkAttrs />
+          </marko-newsletter-imgix>
+        </td>
+      </tr>
+      <common-table-spacer-element height="6" />
+    </table>
+    <table role="presentation" width="610" border="0" align="center" cellpadding="0" cellspacing="0" class="wrap003">
+      <tr>
+        <td align="left" valign="top">
+          <marko-core-obj-text obj=content field="name" tag=false>
+            <@link href=url target="_blank" attrs=nameLinkAttrs class="font1" />
+          </marko-core-obj-text>
+        </td>
+      </tr>
+      <common-table-spacer-element height="5" />
+      <tr>
+        <td align="left" valign="middle" style="font-family: 'Roboto', arial, sans-serif;font-size: 17px;line-height: 23px;color: #202022;font-weight: 400;">
+          $!{content.teaser}
+        </td>
+      </tr>
+      <common-table-spacer-element height="32" />
+    </table>
+  </td>
+</tr>

packages/common/components/blocks/content/marko.json

@@ -10,5 +10,8 @@
   },
   "<common-content-api-list-item-block>": {
     "template": "./api-list-item.marko"
+  },
+  "<common-content-25-for-25-block>": {
+    "template": "./25-for-25.marko"
   }
 }

tenants/all/templates/am-lfte.marko

@@ -181,11 +181,11 @@ $ const resolvedToNodesConverter = ({ resolved }) => (resolved.map((node) => ({
           limit=5
         />
 
-        <!-- Sponsored Native block -->
+        <!-- 25 FOR 25 Native block -->
         <common-ad-wrapper-block
           date=date
           newsletter=newsletter
-          promotion-component="native-block"
+          promotion-component="25-for-25-block"
           placement-id=get(nativeX, `placements.${newsletter.alias}.sponsored`)
         />