sfc-utils 1.4.56 → 1.4.58

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.58",
   "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/brandStylesCommon.less

@@ -1,9 +1,12 @@
-.hed, .deck{
+.hed,
+.deck {
   text-align: center;
   margin: @s16 0;
+
   &.left {
     text-align: left;
   }
+
   @media (max-width: 960px) {
     text-align: left;
     padding: 0 @s16;
@@ -14,28 +17,41 @@ h1 {
   font-size: 4rem;
   font-family: @hed;
 }
+
 //could the next three classes be moved into byline module?
 .byline-wrapper {
   max-width: @lg;
   border-bottom: 1px solid @grey-75;
   margin: @s16 auto @s24;
   padding-bottom: @s8;
+  display: flex;
+  flex-direction: row;
+  justify-content: space-between;
+  align-items: flex-end;
+
   @media (max-width: 960px) {
     margin: @s16 @s16 @s24;
   }
+
   @media (max-width: @md) {
-    border-bottom: none;  }
+    border-bottom: none;
+    display: block;
+  }
 }
+
 .byline-name {
-    font-weight: 700;
+  font-weight: 700;
 }
 
 .byline {
   text-align: left;
   display: inline-block;
-  a, a:visited {
+
+  a,
+  a:visited {
     text-decoration: none;
     color: @black;
+
     &:hover {
       color: @brand;
     }
@@ -48,23 +64,29 @@ h1 {
 
 // Handle basic embed classes
 .inline-figure {
-  &.float-left, &.float-right {
+
+  &.float-left,
+  &.float-right {
     max-width: @xl;
     margin: 0 auto;
-    @media (max-width: @xl){
+
+    @media (max-width: @xl) {
       max-width: @md;
       padding: 0 @s16;
     }
+
     figure {
       max-width: @xs;
       width: 100%;
-      @media (max-width: @xl){
+
+      @media (max-width: @xl) {
         max-width: @md;
         float: none;
         margin: @s24 auto;
       }
     }
   }
+
   &.float-left {
     figure {
       float: left;
@@ -72,25 +94,31 @@ h1 {
     }
 
   }
+
   &.float-right {
     figure {
       float: right;
       margin-left: @s16;
     }
   }
+
   &.full {
     max-width: 100%;
   }
 }
 
-.inline-figure.wide, .inline-figure.full, .inline-figure.large {
+.inline-figure.wide,
+.inline-figure.full,
+.inline-figure.large {
   &.graphic-wrapper {
     @media @max-desktop {
       padding: 0 @s16;
     }
   }
-   .caption {
+
+  .caption {
     max-width: @w-text-width;
+
     @media @max-text-width {
       padding: 0 @s16;
     }
@@ -100,8 +128,8 @@ h1 {
 //side-by-side photos
 .side-by-side-wrapper {
   @media (max-width: 1200px) {
-      padding-left: @s16;
-      padding-right: @s16;
+    padding-left: @s16;
+    padding-right: @s16;
   }
 }
 
@@ -110,92 +138,109 @@ h1 {
   width: 100%;
   display: inline-block;
   vertical-align: top;
-  @media (max-width: 1200px){
-      width: calc(50% - 4px);
-      // max-width: 640px;
+
+  @media (max-width: 1200px) {
+    width: calc(50% - 4px);
+    // max-width: 640px;
   }
+
   @media @tablet {
-      width: 100%;
-      max-width: 640px;
+    width: 100%;
+    max-width: 640px;
   }
 }
+
 .side-by-side-left {
   margin-right: @s4;
+
   @media @tablet {
-      margin-bottom: @s8;
+    margin-bottom: @s8;
   }
 }
+
 .side-by-side-right {
   margin-left: @s4;
 }
 
-.side-by-side-left, .side-by-side-right{
+.side-by-side-left,
+.side-by-side-right {
   @media @tablet {
-      margin-right: auto;
-      margin-left: auto;
-      display: block;
+    margin-right: auto;
+    margin-left: auto;
+    display: block;
   }
 }
+
 .side-by-side-caption-wrapper {
   margin-bottom: @s24;
   margin-top: @s4;
   line-height: 1.3;
+
   .caption {
-      margin-bottom: 0;
-      margin-top: 0;
-      display: inline;
-      padding: 0 !important;
+    margin-bottom: 0;
+    margin-top: 0;
+    display: inline;
+    padding: 0 !important;
   }
+
   @media @max-text-width {
-      padding: 0;
+    padding: 0;
   }
 }
+
 .side-by-side-caption-left {
-  &::before{
-      content: "LEFT: ";
+  &::before {
+    content: "LEFT: ";
+    font-family: @sans;
+    font-size: @s14;
+    font-weight: 700;
+    color: @grey-75;
+  }
+
+  @media @tablet {
+    &::before {
+      content: "TOP: ";
       font-family: @sans;
       font-size: @s14;
       font-weight: 700;
       color: @grey-75;
-  }
-  @media @tablet{
-      &::before{
-          content: "TOP: ";
-          font-family: @sans;
-          font-size: @s14;
-          font-weight: 700;
-          color: @grey-75;
-      }
+    }
   }
 }
+
 .side-by-side-caption-right {
-  &::before{
-      content: " RIGHT: ";
+  &::before {
+    content: " RIGHT: ";
+    font-family: @sans;
+    font-size: @s14;
+    font-weight: 700;
+    color: @grey-50;
+  }
+
+  @media @tablet {
+    &::before {
+      content: " BOTTOM: ";
       font-family: @sans;
       font-size: @s14;
       font-weight: 700;
       color: @grey-50;
-  }
-  @media @tablet{
-      &::before{
-          content: " BOTTOM: ";
-          font-family: @sans;
-          font-size: @s14;
-          font-weight: 700;
-          color: @grey-50;
-      }
+    }
   }
 }
 
 //custom graphic
 .graphic-wrapper {
-  &.inline-figure.wide, &.inline-figure.full, &.inline-figure.large {
+
+  &.inline-figure.wide,
+  &.inline-figure.full,
+  &.inline-figure.large {
     .caption {
-     max-width: 100%;
-     @media @max-text-width {
-       padding: 0;
-     }
-   }
+      max-width: 100%;
+
+      @media @max-text-width {
+        padding: 0;
+      }
+    }
   }
 }
 
@@ -212,6 +257,7 @@ h1 {
   .caption {
     max-width: @lg;
     margin-bottom: @s8;
+
     @media (max-width: 960px) {
       padding: 0 @s16;
     }
@@ -242,6 +288,7 @@ a {
   a {
     text-decoration-color: @grey-75;
   }
+
   svg {
     height: 0.75rem;
     margin-left: @s4;
@@ -253,6 +300,7 @@ ul {
   padding-left: 2.2rem;
   &:extend(.text-width);
 }
+
 body ul {
   margin-bottom: @s24;
 }

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;