sfc-utils 1.4.43 → 1.4.44

package/components/topper2.mjs

@@ -9,7 +9,7 @@ import * as imageStyles from "../styles/modules/topperimage.module.less"
 
 const Topper2 = ({ settings, wcmData, mods }) => {
   let {
-    Topper_Style, Title, Title_Style, Deck, Image, Image_Alt, Video_Mp4, Image_Caption, Image_Credits,
+    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
@@ -150,6 +150,22 @@ const Topper2 = ({ settings, wcmData, mods }) => {
     }
   }
 
+  const kickerStyleList = () => {
+    switch (Topper_Style) {
+      case "small-visual":
+        return [topperStyles.kicker, topperStyles.textAlignCenterKicker, topperStyles.kickerSmallVisual]
+      case "stacked":
+        return [topperStyles.kicker, topperStyles.textAlignCenterKicker];
+      case "no-visual":
+      case "side-by-side":
+      case "side-by-side-portrait":
+        return [topperStyles.kicker, topperStyles.textAlignLeft];
+      case "full-screen":
+      default:
+        return [""]
+    }
+  }
+
   /** Get text alignment based on header-deck position **/
   const fullScreenTextAlignCss = () => {
     switch (HeaderDek_Horizontal_Position) {
@@ -383,6 +399,7 @@ const Topper2 = ({ settings, wcmData, mods }) => {
           <>
             <div>
               <div className={headerDekStyleList().join('')}>
+                {Kicker && <Heading level={4} text={Kicker} className={kickerStyleList().join(' ')} />}
                 <Heading
                   level={1}
                   text={Title}
@@ -418,6 +435,7 @@ const Topper2 = ({ settings, wcmData, mods }) => {
               <figure className={`mw-xl ml-auto mr-auto ${topperStyles.imageSmallVisual}`}>
                 {getMediaHTML(isSlideshow(wcmIdList))}
               </figure>
+              {Kicker && <Heading level={4} text={Kicker} className={kickerStyleList().join(' ')} />}
               <div className={headerDekStyleList().join('')}>
                 <Heading
                   level={1}
@@ -439,6 +457,7 @@ const Topper2 = ({ settings, wcmData, mods }) => {
           <>
             <div>
               <div className={headerDekStyleList().join('')}>
+                {Kicker && <Heading level={4} text={Kicker} className={kickerStyleList().join(' ')} />}
                 <Heading
                   level={1}
                   text={Title}
@@ -461,6 +480,7 @@ const Topper2 = ({ settings, wcmData, mods }) => {
         return (
           <div className={sideBySideContainerCss}>
             <div className={headerDekStyleList().join(' ')}>
+              {Kicker && <Heading level={4} text={Kicker} className={kickerStyleList().join(' ')} />}
               <Heading
                 level={1}
                 text={Title}
@@ -497,6 +517,8 @@ const Topper2 = ({ settings, wcmData, mods }) => {
           <div className={topperStyles.fullWidthContainer}>
             <div className={sideBySidePortraitContainerCss}>
               <div className={headerDekStyleList().join(' ')}>
+                {Kicker && <Heading level={4} text={Kicker} className={kickerStyleList().join(' ')} />}
+
                 <Heading
                   level={1}
                   text={Title}

package/package.json

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

package/styles/modules/topper2.module.less

@@ -90,7 +90,7 @@
   width: 100%;
   margin: @s24 auto 0 auto;
 
-  @media @mobile {
+  @media (max-width: 960px) {
     margin-left: @s16;
     margin-right: @s16;
     width: auto;
@@ -295,6 +295,14 @@
   }
 }
 
+.textAlignCenterKicker {
+  text-align: center;
+
+  @media (max-width: 960px) {
+    text-align: left;
+  }
+}
+
 .whiteTextBlackBg {
   color: @white;
   background-color: rgba(0, 0, 0, 0.54);
@@ -522,4 +530,19 @@
     min-height: unset;
     min-width: unset;
   }
+}
+
+.kicker {
+  margin: 0;
+  margin-bottom: calc(-1*1rem);
+  padding: 0;
+
+  @media (max-width: 960px) {
+    padding: 0 @s16;
+    margin-top: @s8;
+  }
+}
+
+.kickerSmallVisual {
+  margin-top: 0.5rem;
 }

package/styles/modules/topperimage.module.less

@@ -80,7 +80,7 @@
   height: calc(var(--img-bottom-padding-fraction)*var(--small-visual-max-width));
   max-width: var(--small-visual-max-width);
   width: calc(100vw - 32px);
-  margin: 0 @s16;
+  margin: auto;
 
   @media @mobile {
     max-height: calc(var(--img-bottom-padding-fraction)*var(--small-visual-max-width));