sfc-utils 1.4.5 → 1.4.7

package/components/slideshow/imageslideshow.mjs

@@ -33,8 +33,6 @@ const ImageSlideshow = ({ wcmData, imageList, altList, topperStyle, isLayoutInve
       case "stacked":
       case "full-screen":
         return styles.containerStacked;
-      case "small-visual":
-        return styles.containerSmallVisual;
       default:
         return "";
     }
@@ -50,8 +48,6 @@ const ImageSlideshow = ({ wcmData, imageList, altList, topperStyle, isLayoutInve
         return styles.imageWrapperSideBySide;
       case "side-by-side-portrait":
         return styles.imageWrapperSideBySidePortrait;
-      case "small-visual":
-        return styles.imageWrapperSmallVisual;
       default:
         return "";
     }

package/components/topper2.mjs

@@ -7,7 +7,7 @@ import ImageSlideshow from "./slideshow/imageslideshow.mjs"
 import * as topperStyles from "../styles/modules/topper2.module.less"
 import * as imageStyles from "../styles/modules/topperimage.module.less"
 
-const Topper2 = ({ settings, wcmData }) => {
+const Topper2 = ({ settings, wcmData, mods }) => {
   const {
     Topper_Style, Title, Title_Style, Deck, Image, Image_Alt, Video_Mp4, Image_Caption, Image_Credits,
     HeaderDek_Vertical_Position, HeaderDek_Vertical_Offset, HeaderDek_Horizontal_Offset,
@@ -15,13 +15,18 @@ const Topper2 = ({ settings, wcmData }) => {
     Topper_Background_Color
   } = settings
 
+  // Handle mods here, in case the project modifies the title
+  if (mods){
+    if (mods.Title){
+      Title = mods.Title
+    }
+  }
+
   const headerDekStyleList = () => {
     switch (Topper_Style) {
       case "stacked":
       case "no-visual":
         return [topperStyles.headerDekStacked, " mw-lg mt-lg mb-md"];
-      case "small-visual":
-        return [topperStyles.headerDekStacked, " mw-lg mt-sm mb-md"];
       case "full-screen":
         // Check if css ":root" is accessible
         if (typeof window != "undefined") {
@@ -69,7 +74,6 @@ const Topper2 = ({ settings, wcmData }) => {
     let defaultStyles = [];
     switch (Topper_Style) {
       case "stacked":
-      case "small-visual":
         defaultStyles = [];
         break;
       case "no-visual":
@@ -96,7 +100,6 @@ const Topper2 = ({ settings, wcmData }) => {
   const deckStyleList = () => {
     switch (Topper_Style) {
       case "stacked":
-      case "small-visual":
         return ["deck"];
       case "no-visual":
         return ["deck left"];
@@ -171,13 +174,14 @@ const Topper2 = ({ settings, wcmData }) => {
 
     switch (Topper_Style) {
       case "stacked":
-      case "side-by-side":
-      case "small-visual":
         videoCss = topperStyles.videoStacked;
         break;
       case "full-screen":
         videoCss = topperStyles.videoFullscreen;
         break;
+      case "side-by-side":
+        videoCss = topperStyles.videoStacked;
+        break;
       case "side-by-side-portrait":
         videoCss = `${topperStyles.videoSideBySidePortrait} ${sideBySidePortraitFloatCss()}`;
         break;
@@ -228,16 +232,6 @@ const Topper2 = ({ settings, wcmData }) => {
             imageCssList={[imageStyles.cImgFullscreen]}
           />
         )
-      case "small-visual":
-        return (
-          <TopperImage
-            wcm={Image}
-            alt={Image_Alt}
-            wcmData={wcmData}
-            containerCssList={[imageStyles.cContainerSmallVisual]}
-            imageCssList={[imageStyles.cImgSmallVisual]}
-          />
-        )
       case "side-by-side":
         return (
           <TopperImage
@@ -341,29 +335,6 @@ const Topper2 = ({ settings, wcmData }) => {
           </>
         );
 
-      case "small-visual":
-        return (
-          <>
-            <div>
-              <figure className={`mw-xl ml-auto mr-auto ${topperStyles.imageSmallVisual}`}>
-                {getMediaHTML(isSlideshow(wcmIdList))}
-              </figure>
-              <div className={headerDekStyleList().join('')}>
-                <Heading
-                  level={1}
-                  text={Title}
-                  className={headerStyleList().join(' ')}
-                />
-                <Heading
-                  level={2}
-                  text={Deck}
-                  className={deckStyleList().join(' ')}
-                />
-              </div>
-            </div>
-          </>
-        );
-
       case "no-visual":
         return (
           <>

package/components/topperimage.mjs

@@ -61,7 +61,6 @@ const TopperImage = ({ wcm, alt, ratio, wcmData, containerCssList = [], imageCss
   // This calculation is not used for the topper impl, but keeping it here just in case
   // it is needed for the general WCMImage utils migration
   let photoRatio = "56.25%"; // Default to 16/9
-  let photoFraction = 0.5625;
   let photoViewport = "56.25vw";
   let fullPath = `https://s.hdnux.com/photos/0/0/0/${wcm}/0/`;
   if (!ratio) {
@@ -75,13 +74,11 @@ const TopperImage = ({ wcm, alt, ratio, wcmData, containerCssList = [], imageCss
       // Set ratio of the actual photo like a legit hacker
       photoRatio = (matchedPhoto.photo.ratio * 100) + "%";
       photoViewport = (matchedPhoto.photo.ratio * 50) + "vw";
-      photoFraction = (parseFloat(matchedPhoto.photo.ratio));
 
       // If css :root is available, set the photo ratio
       if (r) {
         r.style.setProperty('--img-bottom-padding-ratio', photoRatio);
         r.style.setProperty('--img-height-viewport', photoViewport);
-        r.style.setProperty('--img-bottom-padding-fraction', photoFraction);
       }
 
       fullPath = matchedPhoto.photo.full_path;
@@ -97,7 +94,6 @@ const TopperImage = ({ wcm, alt, ratio, wcmData, containerCssList = [], imageCss
     if (r) {
       r.style.setProperty('--img-bottom-padding-ratio', photoRatio);
       r.style.setProperty('--img-height-viewport', photoViewport);
-      r.style.setProperty('--img-bottom-padding-fraction', photoFraction);
     }
   }
 
@@ -116,7 +112,7 @@ const TopperImage = ({ wcm, alt, ratio, wcmData, containerCssList = [], imageCss
 TopperImage.propTypes = {
   wcm: PropTypes.oneOfType([PropTypes.string, PropTypes.number]).isRequired,
   alt: PropTypes.string.isRequired,
-  ratio: PropTypes.string, 
+  ratio: PropTypes.string, // This prop is currently not being used, might be ok to delete? 
   wcmData: PropTypes.object,
   containerCssList: PropTypes.array,
   imageCssList: PropTypes.array

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "sfc-utils",
-  "version": "1.4.5",
+  "version": "1.4.7",
   "author": "ewagstaff <evanjwagstaff@gmail.com>",
   "dependencies": {
     "archieml": "^0.4.2",

package/styles/modules/imageslideshow.module.less

@@ -34,11 +34,6 @@
   }
 }
 
-.container-small-visual {
-  width: 150px;
-  height: calc(150px*2/3);
-}
-
 .image-wrapper-stacked {
   position: absolute;
   width: 100%;
@@ -66,12 +61,6 @@
   }
 }
 
-.image-wrapper-small-visual {
-  position: absolute;
-  width: 150px;
-  height: calc(150px*2/3)
-}
-
 .image-wrapper-side-by-side-portrait {
   position: absolute;
   width: calc(90vh*2/3);

package/styles/modules/topper2.module.less

@@ -74,16 +74,6 @@
   }
 }
 
-.imageSmallVisual {
-  position: relative;
-  max-width: 150px;
-  margin: @s24 auto 0 auto;
-
-  @media @mobile {
-    margin-left: @s16;
-  }
-}
-
 .imageSideBySide {
   width: 50%;
   float: left;

package/styles/modules/topperimage.module.less

@@ -4,7 +4,6 @@
 :root {
   --img-bottom-padding-ratio: "56.25%";
   --img-height-viewport: "56.25vw";
-  --img-bottom-padding-fraction: 0.5625;
 }
 
 .c-force-aspect-ratio {
@@ -69,11 +68,6 @@
   padding-bottom: var(--img-bottom-padding-ratio);
 }
 
-.c-container-small-visual {
-  height: calc(var(--img-bottom-padding-fraction)*150px);
-  width: 150px;
-}
-
 .c-img {
   display: block;
   position: relative;
@@ -103,12 +97,6 @@
   }
 }
 
-.c-img-small-visual {
-  display: block;
-  position: absolute;
-  padding: 0;
-}
-
 .c-container-side-by-side {
   height: 100%;
 }