@windstream/react-shared-components 0.1.96 → 0.1.98

package/src/contentful/blocks/image-promo-bar/helper.tsx

@@ -17,7 +17,7 @@ export const PlayButton: React.FC<PlayButtonProps> = ({
         name="play_arrow"
         size={72 as any}
         fill={1}
-        className={`transition-colors duration-300 ${
+        className={`max-w-[72px] transition-colors duration-300 ${
           isOuterHovered
             ? "text-text-brand"
             : "text-slate-500 group-hover:text-text-brand"

package/src/contentful/blocks/image-promo-bar/index.tsx

@@ -31,7 +31,10 @@ export const ImagePromoBar: React.FC<ImagePromoBarProps> = ({
   color = "light",
   imageWidth = 660,
   imageHeight = 660,
+  useOriginalImageAspectRatio = false,
+  isAboveTheFold = false,
   onModalButtonClick,
+  onClick,
   renderCheckPlans,
 }) => {
   const [activeVideo, setActiveVideo] = useState("");
@@ -61,9 +64,9 @@ export const ImagePromoBar: React.FC<ImagePromoBarProps> = ({
   const contentVideo = videoLink && videoImage ? embedSelector() : null;
 
   return (
-    <div className="component-container shared-component-ipb">
+    <div className="component-container shared-component-ipb pb-16 pt-16">
       <div
-        className={`image-promo-bar-content ${maxWidth ? "max-w-120 xl:mx-auto" : ""} mx-5 mb-8 mt-16 md:mx-10`}
+        className={`image-promo-bar-content ${maxWidth ? "max-w-120 xl:mx-auto" : ""} px-5 pb-8 pt-8 md:px-10`}
       >
         <div
           className={`flex shrink-0 flex-col items-center gap-8 xl:items-stretch xl:gap-10 xl:gap-[126px] ${mediaPosition ? "xl:flex-row-reverse" : "xl:flex-row"}`}
@@ -113,6 +116,7 @@ export const ImagePromoBar: React.FC<ImagePromoBarProps> = ({
                 listContainerClassName="mt-0 space-y-0 flex flex-col gap-3"
               />
             )}
+            {ctaDisclaimer && <div>{ctaDisclaimer}</div>}
             {imageLinks.length > 0 && (
               <div className="flex gap-4">
                 {/* Image Links Collection */}
@@ -143,6 +147,7 @@ export const ImagePromoBar: React.FC<ImagePromoBarProps> = ({
                       size={{ base: "large" }}
                       renderCheckPlans={renderCheckPlans}
                       onModalButtonClick={onModalButtonClick}
+                      onClick={(e: React.MouseEvent) => onClick?.(e, "primary")}
                     />
                   </div>
                 )}
@@ -154,23 +159,42 @@ export const ImagePromoBar: React.FC<ImagePromoBarProps> = ({
                       size={{ base: "large" }}
                       renderCheckPlans={renderCheckPlans}
                       onModalButtonClick={onModalButtonClick}
+                      onClick={(e: React.MouseEvent) =>
+                        onClick?.(e, "secondary")
+                      }
                     />
                   </div>
                 )}
               </div>
             )}
-            {ctaDisclaimer && <div>{ctaDisclaimer}</div>}
           </div>
-          <aside className="flex w-full shrink-0 items-center justify-center lg:w-auto">
+          <aside className="flex w-full flex-1 shrink-0 items-center justify-center lg:w-auto">
             {/* Media Section */}
             {image && (
-              <div className="relative h-[334px] w-[334px] overflow-hidden rounded-image md:h-[486px] md:w-[486px]">
+              <div
+                className={cx(
+                  !useOriginalImageAspectRatio
+                    ? "relative aspect-[16/9] w-full overflow-hidden rounded-image lg:h-[486px] xl:aspect-square xl:max-h-[486px] xl:w-[486px]"
+                    : "overflow-hidden rounded-image"
+                )}
+              >
                 <NextImage
                   src={image}
                   alt="section-image"
-                  fill={true}
-                  sizes="(min-width: 768px) 486px, 334px"
-                  className="object-cover"
+                  priority={isAboveTheFold}
+                  fill={!useOriginalImageAspectRatio}
+                  width={
+                    !useOriginalImageAspectRatio ? undefined : imageWidth || 660
+                  }
+                  height={
+                    !useOriginalImageAspectRatio
+                      ? undefined
+                      : imageHeight || 660
+                  }
+                  sizes="(max-width: 430px) 100vw, (max-width: 834px) 100vw, 50vw"
+                  className={cx(
+                    !useOriginalImageAspectRatio ? "object-cover" : "w-full"
+                  )}
                 />
               </div>
             )}
@@ -212,7 +236,9 @@ export const ImagePromoBar: React.FC<ImagePromoBarProps> = ({
                   <div
                     className={cx(
                       "aspect-[16/9] w-full overflow-hidden rounded-image transition-opacity duration-300",
-                      isPlaying ? "opacity-100" : "opacity-0"
+                      isPlaying ? "opacity-100" : "opacity-0",
+                      !useOriginalImageAspectRatio &&
+                        "xl:aspect-square xl:max-h-[486px] xl:w-[486px]"
                     )}
                   >
                     {contentVideo}
@@ -239,7 +265,9 @@ export const ImagePromoBar: React.FC<ImagePromoBarProps> = ({
         </div>
       )}
       {disclaimer && (
-        <div className="mt-10 flex justify-center xl:mt-18">{disclaimer}</div>
+        <div className="mt-10 flex justify-center xl:mt-18">
+          <div>{disclaimer}</div>
+        </div>
       )}
     </div>
   );

package/src/contentful/blocks/image-promo-bar/types.ts

@@ -22,6 +22,8 @@ export type ImagePromoBarProps = {
   image: string;
   imageWidth: number;
   imageHeight: number;
+  useOriginalImageAspectRatio?: boolean;
+  isAboveTheFold?: boolean;
   mediaPosition: boolean;
   description: React.ReactNode;
   openDescriptionLinksOnANewTab: boolean;
@@ -35,6 +37,7 @@ export type ImagePromoBarProps = {
   maxWidth?: boolean;
   color: "light" | "dark";
   onModalButtonClick?: (id?: string) => void;
+  onClick?: (event: React.MouseEvent, source: "primary" | "secondary") => void;
   renderCheckPlans?: (overrides?: CheckPlansProps) => React.ReactNode;
 };
 

package/src/contentful/blocks/image-promo-bar/youtube-embed.tsx

@@ -30,7 +30,7 @@ export const YoutubeEmbed: React.FC<Props> = props => {
   return (
     <div
       className={cx(
-        "relative h-0 w-full overflow-hidden pb-[56.25%]",
+        "relative h-full w-full overflow-hidden pb-[56.25%]",
         containerClassName
       )}
     >

package/src/contentful/blocks/shape-background-wrapper/index.tsx

@@ -46,7 +46,10 @@ export const ShapeBackgroundWrapper: React.FC<ShapeBackgroundWrapperProps> = ({
 
   if (!show) {
     return (
-      <div className={className} style={bgStyle}>
+      <div
+        className={`shared-component-backgound-wrapper ${className ?? ""} ${bgClass ?? ""}`}
+        style={bgStyle}
+      >
         {children}
       </div>
     );
@@ -54,7 +57,7 @@ export const ShapeBackgroundWrapper: React.FC<ShapeBackgroundWrapperProps> = ({
 
   return (
     <div
-      className={`shape-bg relative overflow-hidden ${className ?? ""} ${maxFit ? "max-content" : ""} ${
+      className={`shared-component-backgound-wrapper shape-bg relative overflow-hidden ${className ?? ""} ${maxFit ? "max-content" : ""} ${
         bgClass ?? (!bgStyle ? "bg-white" : "")
       }`}
       style={bgStyle}

package/src/hooks/contentful/use-contentful-rich-text.tsx

@@ -60,8 +60,12 @@ const defaultOptions: Options = {
       </Text>
     ),
     [BLOCKS.QUOTE]: (_node, children) => <blockquote>{children}</blockquote>,
-    [BLOCKS.UL_LIST]: (_node, children) => <ul>{children}</ul>,
-    [BLOCKS.OL_LIST]: (_node, children) => <ol>{children}</ol>,
+    [BLOCKS.UL_LIST]: (_node, children) => (
+      <ul className="list-disc pl-6">{children}</ul>
+    ),
+    [BLOCKS.OL_LIST]: (_node, children) => (
+      <ol className="list-decimal pl-6">{children}</ol>
+    ),
     [BLOCKS.LIST_ITEM]: (_node, children) => <li>{children}</li>,
 
     [INLINES.HYPERLINK]: (node, children) => {