@windstream/react-shared-components 0.2.9 → 0.2.10

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

@@ -1,48 +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}
-      aria-hidden={"true"}
-    >
-      {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/find-kinetic/index.tsx

@@ -37,12 +37,12 @@ export const FindKinetic: React.FC<FindKineticProps> = ({
       className={`${bgColorClasses[background]} component-container overflow-hidden ${color == "dark" ? "text-text" : "text-white"}`}
     >
       <div
-        className={`${maxWidth ? "max-w-120 xl:mx-auto" : ""} mx-5 mb-5 ${image ? "mt-12" : "mt-0 xl:mt-0"} xl:my-20`}
+        className={`${maxWidth ? "max-w-120 xl:mx-auto" : ""} mx-5 mb-5 ${image ? "mt-12" : "mt-0 xl:mt-0"} xl:my-20 md:px-5 xl:px-10`}
       >
         {title && (
           <Text
             as={enableHeading ? "h1" : "h2"}
-            className="heading2 md:heading1 md:text-center"
+            className="heading2 md:heading1 text-center"
           >
             {title}
           </Text>
@@ -50,7 +50,7 @@ export const FindKinetic: React.FC<FindKineticProps> = ({
         {subTitle && (
           <Text
             as={enableHeading ? "h2" : "h3"}
-            className="subheading1 mt-4 md:text-center"
+            className="subheading1 mt-4 text-center"
           >
             {subTitle}
           </Text>
@@ -60,10 +60,10 @@ export const FindKinetic: React.FC<FindKineticProps> = ({
           className={`mt-8 flex flex-col items-center xl:flex-row ${image ? "xl:mt-16" : "xl:mt-10"} gap-10`}
         >
           <div
-            className={`flex flex-col ${image ? "xl:items-start" : "items-center"} gap-10 self-stretch xl:flex-[1_0_0]`}
+            className={`flex flex-col gap-10 self-stretch xl:flex-[1_0_0] ${image ? "xl:items-start pl-2 md:px-4 lg:pl-12 xl:pl-16" : "items-center"}`}
           >
             {description && (
-              <Text as="p" className="body1">
+              <Text as="p" className={`body1 text-center${image ? " lg:text-left" : ""}`}>
                 {description}
               </Text>
             )}