@windstream/react-shared-components 0.2.44 → 0.2.46

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@windstream/react-shared-components",
-  "version": "0.2.44",
+  "version": "0.2.46",
   "type": "module",
   "description": "Shared React components for Kinetic applications",
   "main": "dist/index.js",
@@ -110,12 +110,14 @@
     "@types/react-modal": "3.16.3",
     "@types/react-transition-group": "4.4.12",
     "clsx": "2.1.1",
+    "formik": "^2.4.6",
     "framer-motion": "10.12.16",
     "js-base64": "^3.7.7",
     "js-cookie": "^3.0.5",
     "react-modal": "3.16.3",
     "react-select": "5.10.2",
-    "react-transition-group": "4.4.5"
+    "react-transition-group": "4.4.5",
+    "yup": "^1.7.0"
   },
   "optionalDependencies": {
     "@types/js-cookie": "^3.0.6"

package/src/components/brand-button/index.tsx

@@ -48,8 +48,8 @@ export const BrandButton = forwardRef<
     const getVariantClasses = () => {
       const baseClasses = cx(
         sizeToClassNames(size),
-        "rounded-button pl-15 pr-15 inline-flex gap-2 items-center justify-center outline-none focus:outline focus:outline-2 focus:outline-offset-2 cursor-pointer transition-colors duration-200 align-top sm:whitespace-nowrap",
-        fullWidth ? "w-full" : "w-auto"
+        "rounded-button overflow-visible flex lg:inline-flex  items-center justify-center text-center outline-none focus:ring-2 focus:ring-offset-2 cursor-pointer transition-colors duration-200 align-top lg:whitespace-nowrap",
+        fullWidth ? "w-full" : "w-full lg:w-auto"
       );
 
       const variantClasses: Record<ButtonVariantsT, string> = {

package/src/components/video-link/index.test.tsx

@@ -263,4 +263,4 @@ describe("VideoLink", () => {
       "false"
     );
   });
-});
+});

package/src/components/video-link/index.tsx

@@ -20,10 +20,10 @@ export const VideoLink: React.FC<VideoLinkComponentProps> = ({
   const [isHovered, setIsHovered] = useState(false);
 
   const videoSourceType = videoLink?.videoSourceType;
+  const usingContentfulAsset =
+    videoSourceType === "contentful" && !!videoLink?.videoAssetUrl;
   const videoHref =
-    (videoSourceType === "contentful"
-      ? videoLink?.videoAssetUrl
-      : videoLink?.link) ?? "";
+    (usingContentfulAsset ? videoLink?.videoAssetUrl : videoLink?.link) ?? "";
 
   // The video's own poster - never the promo bar's plain image field.
   const posterImage = videoLink?.image;
@@ -69,7 +69,7 @@ export const VideoLink: React.FC<VideoLinkComponentProps> = ({
   };
 
   const embedSelector = () => {
-    if (videoSourceType === "contentful") {
+    if (usingContentfulAsset) {
       return (
         <ContentfulVideoEmbed
           videoAssetUrl={videoLink?.videoAssetUrl}
@@ -92,7 +92,7 @@ export const VideoLink: React.FC<VideoLinkComponentProps> = ({
     <>
       <div
         className={cx(
-          "video-section relative w-full cursor-pointer rounded-image transition-all duration-300 lg:w-[486px]",
+          "video-section relative mx-auto w-full cursor-pointer rounded-image transition-all duration-300 lg:w-[486px]",
           !isPlaying && "hover:ring-2 hover:ring-border-focus"
         )}
         onClick={handlePlayClick}
@@ -167,4 +167,4 @@ export type {
   VideoEmbedProps,
   VideoLinkComponentProps,
   VideoLinkProps,
-} from "./types";
+} from "./types";

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

@@ -99,12 +99,13 @@ export const Callout: React.FC<CalloutProps> = ({
   const gridClass = isStackMode
     ? cx(
         "flex flex-col items-stretch self-stretch",
-        noGutter ? "gap-0" : "gap-6"
+        noGutter ? "gap-0" : "gap-3"
       )
     : cx(
         "flex flex-wrap items-stretch justify-center self-stretch",
-        noGutter ? "gap-0" : "gap-6",
-        noGutter ? "md:gap-0" : "md:gap-6"
+        // Mobile (e.g. 390px) uses 12px gap; md+ also uses 12px.
+        noGutter ? "gap-0" : "gap-3",
+        noGutter ? "md:gap-0" : "md:gap-3"
       );
 
   // Per-card width classes — only used for flex-wrap layout. Mobile is

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

@@ -92,7 +92,7 @@ export const FloatingImageCard: React.FC<FloatingImageCardProps> = ({
       ) : null}
 
       {header ? (
-        <Text as="h6" className="heading6 text-text">
+        <Text as="h4" className="heading6 text-text">
           {header}
         </Text>
       ) : null}

package/src/contentful/blocks/cards/simple-card/index.tsx

@@ -166,6 +166,19 @@ export const SimpleCard: React.FC<SimpleCardProps> = ({
   const hasTable =
     (card.workingHours?.length ?? 0) > 0 || (card.phoneNumber?.length ?? 0) > 0;
 
+  // A card whose only content is the CTA renders as a bare button: card
+  // padding is dropped so the card-holder gap is the whole space between
+  // buttons, and the button gets a fixed width so siblings match.
+  const isCtaOnly =
+    !!card.cta &&
+    !card.title &&
+    !card.titleLocation &&
+    !card.body &&
+    !card.richText &&
+    !card.image &&
+    !hasTable &&
+    !(card.ctaBottom?.title && card.ctaBottom?.href);
+
   return (
     <section
       className={cx(
@@ -204,7 +217,8 @@ export const SimpleCard: React.FC<SimpleCardProps> = ({
 
       <div
         className={cx(
-          "relative flex flex-1 flex-col justify-between px-6 pb-8 pt-7 lg:px-8 lg:py-8",
+          "relative flex flex-1 flex-col justify-between",
+          isCtaOnly ? "p-0" : "px-6 pb-8 pt-7 lg:px-8 lg:py-8",
           contentClassName
         )}
       >
@@ -304,7 +318,7 @@ export const SimpleCard: React.FC<SimpleCardProps> = ({
         </div>
 
         {card.cta ? (
-          <div className={cx("mt-2", ctaAlignmentClass)}>
+          <div className={cx(!isCtaOnly && "mt-2", ctaAlignmentClass)}>
             <Button
               linkVariant="unstyled"
               linkClassName={cx(
@@ -314,6 +328,11 @@ export const SimpleCard: React.FC<SimpleCardProps> = ({
               {...card.cta}
               iconName={card.cta.iconName ?? "expand_circle_right"}
               iconFill={card.cta.iconFill ?? 1}
+              fullWidth={true}
+              buttonClassName={cx(
+                card.cta.buttonClassName,
+                isCtaOnly && "w-[342px] max-w-full lg:w-[342px]"
+              )}
             />
           </div>
         ) : null}

package/src/contentful/blocks/fiber-form/constants.ts

@@ -0,0 +1,81 @@
+import type { FiberFormInputList, FiberFormValues } from "../../blocks/fiber-form/types";
+import * as Yup from "yup";
+
+export const fiberFormInputInitialValues: FiberFormValues = {
+  firstName: "",
+  lastName: "",
+  address: "",
+  phone: "",
+  email: "",
+  unit: "",
+  zip: "",
+  isManualAddress: false,
+  isMarketingCom: false,
+  addressToSend: {},
+  notes: "",
+  referralCode: "",
+  hasUnits: false,
+};
+
+export const fiberFormInputList: FiberFormInputList = {
+  firstName: { placeholder: "John" },
+  lastName: { placeholder: "Doe" },
+  address: { placeholder: "Street address" },
+  phoneNumber: { placeholder: "Phone number" },
+  emailAddress: { placeholder: "Email address" },
+  unit: { placeholder: "Unit (optional)" },
+  zip: { placeholder: "Zip" },
+  notes: { placeholder: "Notes or Comments" },
+  referralCode: { placeholder: "Referral Code" },
+};
+
+export const fiberFormAddressCollectionFormSchema = Yup.object({
+  firstName: Yup.string()
+    .required("First name is required")
+    .min(2, "Enter a valid First name")
+    .matches(/^[a-zA-Z\s]*$/, "Enter a valid First name"),
+  lastName: Yup.string()
+    .required("Last name is required")
+    .min(2, "Enter a valid Last name")
+    .matches(/^[a-zA-Z\s]*$/, "Enter a valid Last name"),
+  isManualAddress: Yup.boolean(),
+  isMarketingCom: Yup.boolean(),
+  hasUnits: Yup.boolean(),
+  unit: Yup.string().when("hasUnits", {
+    is: true,
+    then: schema => schema.required("Unit is required"),
+    otherwise: schema =>
+      schema.matches(/^[a-zA-Z0-9\s#]*$/, "Enter a valid Unit"),
+  }),
+  zip: Yup.string().when("isManualAddress", {
+    is: true,
+    then: schema =>
+      schema
+        .required("Zip is required")
+        .matches(/^\d{5}$/, "Enter a valid Zip"),
+  }),
+  address: Yup.string()
+    .required("Enter your home address (street, city, state, and ZIP below)")
+    .when("isManualAddress", {
+      is: true,
+      then: schema =>
+        schema.matches(
+          /^(\d{1,}) [a-zA-Z0-9\s]+(\,)? [a-zA-Z\s]+(\,)? [A-Z]{2}( [0-9]{5,6})?$/,
+          "Enter your home address (street, city, state, and ZIP below)"
+        ),
+    }),
+  phone: Yup.string()
+    .required("Phone is required")
+    .matches(
+      /^\([0-9]{3}\)\s[0-9]{3}-[0-9]{4}$/,
+      "Please enter a valid phone number"
+    ),
+  email: Yup.string()
+    .email("Invalid email")
+    .matches(/^[^\s@]+@[^\s@]+\.[^\s@]+$/, "Invalid email")
+    .required("Email is required"),
+  notes: Yup.string(),
+  referralCode: Yup.string()
+    .max(50, "Referral code must not exceed 50 characters")
+    .matches(/^\S*$/, "Referral code must not contain spaces"),
+});