sfc-utils 1.4.56 → 1.4.57

package/components/datawrapper.mjs

@@ -0,0 +1,31 @@
+import React from 'react'
+import { Helmet } from "react-helmet"
+import { getFigureWidth } from './helpers/utilfunctions.mjs'
+
+const Datawrapper = ({ altText, id, height, figureWidth = 'text-width' }) => {
+
+  const url = `https://datawrapper.dwcdn.net/${id}`
+  const nu_id = `datawrapper-chart-${id}`
+
+  // width options: float-left, float-right, text-width, large, wide, full
+  const width = getFigureWidth(figureWidth);
+
+  return (
+    <>
+      {/* responsive DW script */}
+      <Helmet>
+        <script
+          type="text/javascript"
+          src="https://datawrapper.dwcdn.net/lib/embed.min.js"
+        ></script>
+      </Helmet>
+      <div className={`iframe_Container graphic-wrapper inline-figure ${width}`}>
+        <figure>
+          <iframe title={altText} aria-label={altText} id={nu_id} src={url} scrolling="no" frameborder="0" style={{ width: 0, minWidth: "100%", border: "none" }} height={height}></iframe>
+        </figure>
+      </div>
+    </>
+  )
+}
+
+export default Datawrapper

package/components/helpers/utilfunctions.mjs

@@ -50,7 +50,7 @@ function appendLayoutScripts(isEmbedded, isAdRemoved, marketKey) {
       document.body.appendChild(script)
 
       // Init sailthru
-      if (window && window.Sailthru && marketKey){
+      if (window && window.Sailthru && marketKey) {
         window.Sailthru.init({ customerId: getBrands2(marketKey).attributes.sailCustomer })
       }
     }
@@ -81,4 +81,25 @@ function formatHDN(isEmbedded, url_add, meta) {
   return stringHDN;
 }
 
-export { debounce, appendLayoutScripts, formatHDN }
+function getFigureWidth(maxWidth) {
+  switch (maxWidth) {
+    case "text-width":
+      return "text-width";
+    case "large":
+      return "large mw-lg mt-md mb-md ml-auto mr-auto";
+    case "wide":
+      return "wide mw-xl mt-md mb-md ml-auto mr-auto";
+    case "full":
+      return "full mw-100 mt-md mb-md ml-auto mr-auto";
+    case "embed":
+      return "mw-xl ml-auto mr-auto";
+    case "float-right":
+      return "float-right";
+    case "float-left":
+      return "float-left";
+    default:
+      return "text-width";
+  }
+}
+
+export { debounce, appendLayoutScripts, formatHDN, getFigureWidth }

package/components/slideshow/imageslideshow.mjs

@@ -28,6 +28,22 @@ const ImageSlideshow = ({ wcmData, imageList, altList, topperStyle, isLayoutInve
     };
   }, [index]);
 
+  useEffect(() => {
+    // Find the max height ratio within an wcm image list, this is only used for the small visual slideshow
+    if (wcmData.nodes) {
+      let ratioList = wcmData.nodes.map((d) => d.photo.ratio)
+      console.log(ratioList)
+      let minRatio = Math.max(...ratioList)
+
+      // During server-side rendering, access to ":root" is unavailable. This is okay; we just need
+      // to make sure that the site does not crash during SSR
+      let r = (typeof window != "undefined") ? document.querySelector(':root') : null;
+      if (r) {
+        r.style.setProperty('--small-visual-height-ratio', minRatio);
+      }
+    }
+  }, [])
+
   const getContainerClass = () => {
     switch (topperStyle) {
       case "stacked":

package/components/topper2.mjs

@@ -6,13 +6,14 @@ import CaptionCreditSlideshow from "./slideshow/captioncreditslideshow.mjs"
 import ImageSlideshow from "./slideshow/imageslideshow.mjs"
 import * as topperStyles from "../styles/modules/topper2.module.less"
 import * as imageStyles from "../styles/modules/topperimage.module.less"
+import Datawrapper from "./datawrapper.mjs"
 
 const Topper2 = ({ settings, wcmData, mods }) => {
   let {
-    Topper_Style, Title, Title_Style, Deck, Image, Image_Alt, Kicker, Video_Mp4, Image_Caption, Image_Credits,
-    HeaderDek_Vertical_Position, HeaderDek_Vertical_Offset, HeaderDek_Horizontal_Offset,
-    HeaderDek_Horizontal_Position, Inverted_Colors, Inverted_Layout, Inverted_Text_Color,
-    Topper_Background_Color, Small_Visual_Max_Width, Small_Visual_Topper_Url
+    Topper_Style, Title, Title_Style, Deck, Image, Image_Alt, Kicker, Video_Mp4, Datawrapper_Id,
+    Image_Caption, Image_Credits, HeaderDek_Vertical_Position, HeaderDek_Vertical_Offset,
+    HeaderDek_Horizontal_Offset, HeaderDek_Horizontal_Position, Inverted_Colors, Inverted_Layout,
+    Inverted_Text_Color, Topper_Background_Color, Small_Visual_Max_Width, Small_Visual_Topper_Url
   } = settings
 
   // During server-side rendering, access to ":root" is unavailable. This is okay; we just need
@@ -216,6 +217,11 @@ const Topper2 = ({ settings, wcmData, mods }) => {
     return (wcmIdList.length > 1);
   }
 
+  /** Checks if the media type is a datawrapper chart */
+  const isDatawrapper = () => {
+    return Datawrapper_Id && Datawrapper_Id !== 0;
+  }
+
   /** Converts string from spreadsheet into a list and pads the list if the length is incorrect */
   const convertStringToList = (str, size) => {
     // If the string is empty (ie caption/credit is not filled out), return early 
@@ -262,8 +268,18 @@ const Topper2 = ({ settings, wcmData, mods }) => {
     )
   }
 
+  const getDatawrapperHtml = () => {
+    let datawrapperCss = ""
+
+    return (
+      <Datawrapper altText={Image_Alt} id={Datawrapper_Id} />
+    )
+  }
+
   /* Returns the corresponding image HTML for each topper style and slideshow status */
   const getMediaHTML = (isSlideshow) => {
+    if (isDatawrapper()) return getDatawrapperHtml();
+
     if (Video_Mp4) return getVideoHtml();
 
     if (isSlideshow) return (
@@ -426,17 +442,18 @@ const Topper2 = ({ settings, wcmData, mods }) => {
                     extraStyles={[topperStyles.smallPaddingLeftWhenTablet]}
                   />
                 }
-                {!isSlideshow(wcmIdList) && <CaptionCredit caption={Image_Caption} credit={Image_Credits} extraStyles={[topperStyles.smallPaddingLeftWhenTablet]} />}
+                {!isSlideshow(wcmIdList) && (!isDatawrapper()) && <CaptionCredit caption={Image_Caption} credit={Image_Credits} extraStyles={[topperStyles.smallPaddingLeftWhenTablet]} />}
               </figure>
             </div>
           </>
         );
 
       case "small-visual":
+        let smallVisualCss = (isDatawrapper()) ? `${topperStyles.imageSmallVisualDatawrapper}` : `${topperStyles.imageSmallVisual}`;
         return (
           <>
             <div>
-              <figure className={`mw-xl ml-auto mr-auto ${topperStyles.imageSmallVisual}`}>
+              <figure className={`mw-xl ml-auto mr-auto ${smallVisualCss}`}>
                 {getMediaHTML(isSlideshow(wcmIdList))}
               </figure>
               {Kicker && <Heading level={6} text={Kicker} className={kickerStyleList().join(' ')} />}
@@ -478,7 +495,15 @@ const Topper2 = ({ settings, wcmData, mods }) => {
         );
 
       case "side-by-side":
-        let figureCss = isSlideshow(wcmIdList) ? `${topperStyles.imageSideBySideSlideshow}` : `${topperStyles.imageSideBySide}`;
+        let figureCss = "";
+        if (isSlideshow(wcmIdList)) {
+          figureCss = `${topperStyles.imageSideBySideSlideshow}`
+        } else if (isDatawrapper()) {
+          figureCss = `${topperStyles.imageSideBySideDatawrapper}`
+        } else {
+          figureCss = `${topperStyles.imageSideBySide}`
+        }
+
         let sideBySideContainerCss = (Inverted_Layout === "headerdek-right-image-left") ? `${topperStyles.topperContainerSideBySide} ${topperStyles.reverseFlexbox}` : `${topperStyles.topperContainerSideBySide}`;
         setBackgroundAndTextColor();
         return (
@@ -508,13 +533,20 @@ const Topper2 = ({ settings, wcmData, mods }) => {
                   creditStyles={[sideBySideCapCredColorCss()]}
                 />
               }
-              {!isSlideshow(wcmIdList) && <CaptionCredit caption={Image_Caption} credit={Image_Credits} extraStyles={[topperStyles.captionSideBySide, sideBySideCapCredColorCss()]} creditStyles={[sideBySideCapCredColorCss()]} />}
+              {!isSlideshow(wcmIdList) && (!isDatawrapper()) && <CaptionCredit caption={Image_Caption} credit={Image_Credits} extraStyles={[topperStyles.captionSideBySide, sideBySideCapCredColorCss()]} creditStyles={[sideBySideCapCredColorCss()]} />}
             </figure>
           </div>
         );
 
       case "side-by-side-portrait":
-        let portraitFigureCss = isSlideshow(wcmIdList) ? `${topperStyles.imageSideBySidePortraitSlideshow}` : `${topperStyles.imageSideBySidePortrait}`;
+        let portraitFigureCss = "";
+        if (isSlideshow(wcmIdList)) {
+          portraitFigureCss = `${topperStyles.imageSideBySidePortraitSlideshow}`
+        } else if (isDatawrapper()) {
+          portraitFigureCss = `${topperStyles.imageSideBySidePortraitDatawrapper}`
+        } else {
+          portraitFigureCss = `${topperStyles.imageSideBySidePortrait}`
+        }
         let sideBySidePortraitContainerCss = (Inverted_Layout === "headerdek-right-image-left") ? `${topperStyles.topperContainerSideBySidePortrait} ${topperStyles.reverseFlexbox}` : `${topperStyles.topperContainerSideBySidePortrait}`;
         setBackgroundAndTextColor();
         return (
@@ -546,7 +578,7 @@ const Topper2 = ({ settings, wcmData, mods }) => {
                     creditStyles={[sideBySideCapCredColorCss()]}
                   />
                 }
-                {!isSlideshow(wcmIdList) && <CaptionCredit caption={Image_Caption} credit={Image_Credits} extraStyles={[topperStyles.captionSideBySidePortrait, sideBySideCapCredColorCss(), sideBySidePortraitFloatCss()]} creditStyles={[sideBySideCapCredColorCss()]} />}
+                {!isSlideshow(wcmIdList) && (!isDatawrapper()) && <CaptionCredit caption={Image_Caption} credit={Image_Credits} extraStyles={[topperStyles.captionSideBySidePortrait, sideBySideCapCredColorCss(), sideBySidePortraitFloatCss()]} creditStyles={[sideBySideCapCredColorCss()]} />}
               </figure>
             </div>
           </div>

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "sfc-utils",
-  "version": "1.4.56",
+  "version": "1.4.57",
   "author": "ewagstaff <evanjwagstaff@gmail.com>",
   "dependencies": {
     "archieml": "^0.4.2",
@@ -14,4 +14,4 @@
     "react-transition-group": "^4.4.5",
     "write": "^2.0.0"
   }
-}
+}

package/styles/modules/imageslideshow.module.less

@@ -1,5 +1,9 @@
 @import (less) '../values';
 
+:root {
+  --small-visual-height-ratio: 2/3;
+}
+
 .container-stacked {
   margin: 0 auto;
   white-space: nowrap;
@@ -36,7 +40,7 @@
 
 .container-small-visual {
   width: 150px;
-  height: calc(150px*2/3);
+  height: calc(150px*var(--small-visual-height-ratio))
 }
 
 .image-wrapper-stacked {
@@ -69,7 +73,10 @@
 .image-wrapper-small-visual {
   position: absolute;
   width: 150px;
-  height: calc(150px*2/3)
+  right: 0;
+  left: 0;
+  bottom: 0;
+  margin: auto;
 }
 
 .image-wrapper-side-by-side-portrait {

package/styles/modules/topper2.module.less

@@ -98,6 +98,20 @@
   }
 }
 
+.imageSmallVisualDatawrapper {
+  position: relative;
+  height: auto;
+  width: 100%;
+  margin: @s24 auto 0 auto;
+
+  @media (max-width: 960px) {
+    margin-left: @s16;
+    margin-right: @s16;
+    width: auto;
+    height: auto;
+  }
+}
+
 .imageSideBySide {
   width: 50%;
   float: left;
@@ -110,6 +124,18 @@
   }
 }
 
+.imageSideBySideDatawrapper {
+  width: 50%;
+  float: left;
+  padding: @s16;
+
+  @media (max-width: @lg) {
+    width: 100%;
+    float: none;
+    padding-bottom: 0;
+  }
+}
+
 .imageSideBySideSlideshow {
   width: 50%;
   height: calc(50vw*2/3 + 10px);
@@ -136,6 +162,22 @@
   }
 }
 
+.imageSideBySidePortraitDatawrapper {
+  width: 50%;
+  height: 90vh;
+  min-height: calc(600px + 32px);
+  float: left;
+  padding: @s16;
+
+  @media (max-width: @lg) {
+    width: 100%;
+    float: none;
+    height: auto;
+    padding-bottom: 0;
+    min-height: unset;
+  }
+}
+
 .imageSideBySidePortraitSlideshow {
   width: 50%;
   height: 90vh;