sfc-utils 1.4.9 → 1.4.10

package/components/slideshow/imageslideshow.mjs

@@ -33,6 +33,8 @@ const ImageSlideshow = ({ wcmData, imageList, altList, topperStyle, isLayoutInve
       case "stacked":
       case "full-screen":
         return styles.containerStacked;
+      case "small-visual":
+        return styles.containerSmallVisual;
       default:
         return "";
     }
@@ -48,6 +50,8 @@ 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

@@ -27,6 +27,8 @@ const Topper2 = ({ settings, wcmData, mods }) => {
       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") {
@@ -74,6 +76,7 @@ const Topper2 = ({ settings, wcmData, mods }) => {
     let defaultStyles = [];
     switch (Topper_Style) {
       case "stacked":
+      case "small-visual":
         defaultStyles = [];
         break;
       case "no-visual":
@@ -100,6 +103,7 @@ const Topper2 = ({ settings, wcmData, mods }) => {
   const deckStyleList = () => {
     switch (Topper_Style) {
       case "stacked":
+      case "small-visual":
         return ["deck"];
       case "no-visual":
         return ["deck left"];
@@ -178,14 +182,13 @@ const Topper2 = ({ settings, wcmData, mods }) => {
 
     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;
@@ -236,6 +239,16 @@ const Topper2 = ({ settings, wcmData, mods }) => {
             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
@@ -339,6 +352,29 @@ const Topper2 = ({ settings, wcmData, mods }) => {
           </>
         );
 
+      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,6 +61,7 @@ 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) {
@@ -74,11 +75,13 @@ 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;
@@ -94,6 +97,7 @@ 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);
     }
   }
 
@@ -112,7 +116,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, // This prop is currently not being used, might be ok to delete? 
+  ratio: PropTypes.string, 
   wcmData: PropTypes.object,
   containerCssList: PropTypes.array,
   imageCssList: PropTypes.array

package/package.json

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

package/styles/modules/imageslideshow.module.less

@@ -34,6 +34,11 @@
   }
 }
 
+.container-small-visual {
+  width: 150px;
+  height: calc(150px*2/3);
+}
+
 .image-wrapper-stacked {
   position: absolute;
   width: 100%;
@@ -61,6 +66,12 @@
   }
 }
 
+.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,6 +74,16 @@
   }
 }
 
+.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,6 +4,7 @@
 :root {
   --img-bottom-padding-ratio: "56.25%";
   --img-height-viewport: "56.25vw";
+  --img-bottom-padding-fraction: 0.5625;
 }
 
 .c-force-aspect-ratio {
@@ -68,6 +69,11 @@
   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;
@@ -97,6 +103,12 @@
   }
 }
 
+.c-img-small-visual {
+  display: block;
+  position: absolute;
+  padding: 0;
+}
+
 .c-container-side-by-side {
   height: 100%;
 }