@windstream/react-shared-components 0.2.7 → 0.2.9

package/src/components/material-icon/index.tsx

@@ -1,47 +1,48 @@
-import React from "react";
-import { cx } from "../../utils/cx";
-import type { IconProps } from "./types";
-
-const MaterialIcon: React.FC<IconProps> = ({
-  name,
-  fill = 0,
-  opticalSize = "48dp",
-  weight = "200",
-  emphasis = 145,
-  size = 24,
-  color = "currentColor",
-  style = {},
-  className,
-  onClick,
-  dataTestId,
-}) => {
-  const fontVariationSettings = `'FILL' ${fill}, 'wght' ${weight}, 'GRAD' ${emphasis}, 'opsz' ${opticalSize.substring(0, 2)}`;
-
-  const combinedStyle: React.CSSProperties = {
-    fontVariationSettings,
-    fontSize: `${size}px`,
-    fontFamily: "'Material Symbols Rounded'",
-    color: color || "currentColor",
-    ...style,
-  };
-
-  return (
-    <span
-      style={combinedStyle}
-      className={cx(
-        "material-symbols-rounded inline-block max-w-[52px] overflow-hidden",
-        className
-      )}
-      onClick={onClick}
-      data-testid={dataTestId}
-    >
-      {name}
-    </span>
-  );
-};
-
-export { MaterialIcon };
-
-MaterialIcon.displayName = "MaterialIcon";
-
-export type { IconProps, IconName, Size } from "./types";
+import React from "react";
+import { cx } from "../../utils/cx";
+import type { IconProps } from "./types";
+
+const MaterialIcon: React.FC<IconProps> = ({
+  name,
+  fill = 0,
+  opticalSize = "48dp",
+  weight = "200",
+  emphasis = 145,
+  size = 24,
+  color = "currentColor",
+  style = {},
+  className,
+  onClick,
+  dataTestId,
+}) => {
+  const fontVariationSettings = `'FILL' ${fill}, 'wght' ${weight}, 'GRAD' ${emphasis}, 'opsz' ${opticalSize.substring(0, 2)}`;
+
+  const combinedStyle: React.CSSProperties = {
+    fontVariationSettings,
+    fontSize: `${size}px`,
+    fontFamily: "'Material Symbols Rounded'",
+    color: color || "currentColor",
+    ...style,
+  };
+
+  return (
+    <span
+      style={combinedStyle}
+      className={cx(
+        "material-symbols-rounded inline-block max-w-[52px] overflow-hidden",
+        className
+      )}
+      onClick={onClick}
+      data-testid={dataTestId}
+      aria-hidden={"true"}
+    >
+      {name}
+    </span>
+  );
+};
+
+export { MaterialIcon };
+
+MaterialIcon.displayName = "MaterialIcon";
+
+export type { IconProps, IconName, Size } from "./types";

package/src/contentful/blocks/callout/index.tsx

@@ -195,7 +195,7 @@ export const Callout: React.FC<CalloutProps> = ({
     >
       <div
         className={cx(
-          noGutter ? "p-0" : "mx-5 py-12 md:py-20",
+          noGutter ? "p-0" : "mx-5 mb-5 mt-12 md:mx-0 md:mb-0 md:mt-0 md:px-6 md:pb-8 md:pt-16 lg:px-0 lg:py-20",
           maxWidth && "max-w-120 xl:mx-auto",
           color === "dark" ? "text-text" : "text-white",
           innerClassName
@@ -214,7 +214,7 @@ export const Callout: React.FC<CalloutProps> = ({
             {subtitle && (
               <Text
                 as={enableHeading ? "h2" : "h3"}
-                className="subheading3 mt-3 md:subheading1 md:text-center"
+                className="subheading3 mt-2 md:subheading1 md:text-center lg:mt-3"
               >
                 {subtitle}
               </Text>

package/src/contentful/blocks/cards/floating-image-card/index.tsx

@@ -61,7 +61,7 @@ export const FloatingImageCard: React.FC<FloatingImageCardProps> = ({
     <section
       aria-labelledby="Image Card"
       className={cx(
-        "callout-card relative flex h-full w-full flex-col gap-4 p-0 md:items-start lg:gap-6",
+        "callout-card relative flex h-full w-full flex-col gap-5 px-0 pb-4 pt-0 md:items-start md:gap-6 lg:pb-0",
         shadow && "rounded-3xl shadow-card",
         mdWidth,
         lgWidth,
@@ -71,7 +71,7 @@ export const FloatingImageCard: React.FC<FloatingImageCardProps> = ({
       {image?.href ? (
         <div
           className={cx(
-            "relative aspect-video w-full overflow-hidden sm:mb-1 md:flex-none lg:mb-0",
+            "relative h-[233px] w-full overflow-hidden sm:mb-1 md:h-[274px] md:flex-none lg:h-[330px] lg:mb-0",
             imageClassName
           )}
         >
@@ -82,7 +82,7 @@ export const FloatingImageCard: React.FC<FloatingImageCardProps> = ({
             height={image.height || 330}
             onClick={handleImageClick}
             className={cx(
-              "h-full max-h-[330px] w-full rounded-[40px] object-cover",
+              "h-full w-full rounded-[40px] object-cover",
               imageLinkAvailableClass
             )}
           />
@@ -90,13 +90,13 @@ export const FloatingImageCard: React.FC<FloatingImageCardProps> = ({
       ) : null}
 
       {header ? (
-        <Text as="h6" className="heading6 font-black text-text lg:pb-2">
+        <Text as="h6" className="heading6 text-text">
           {header}
         </Text>
       ) : null}
 
       {body ? (
-        <Text as="div" className="body2 mb-0 flex-1 text-text">
+        <Text as="div" className="body1 -mt-1 mb-0 flex-1 text-text md:-mt-2 lg:mt-2">
           {body}
         </Text>
       ) : null}