@windstream/react-shared-components 0.2.81 → 0.2.82

package/dist/core.d.ts

@@ -423,7 +423,7 @@ type ButtonAsAnchor = ButtonCustomProps & Omit<AnchorHTMLAttributes<HTMLAnchorEl
 };
 type ButtonProps = ButtonAsButton | ButtonAsAnchor;
 
-declare const BrandButton: React__default.ForwardRefExoticComponent<ButtonProps$2 & React__default.RefAttributes<HTMLButtonElement | HTMLAnchorElement>>;
+declare const BrandButton: React__default.ForwardRefExoticComponent<ButtonProps$2 & React__default.RefAttributes<HTMLAnchorElement | HTMLButtonElement>>;
 
 declare const Checklist: React__default.FC<ChecklistProps>;
 

package/dist/index.d.ts

@@ -67,11 +67,11 @@ type InputFieldProps = Omit<InputHTMLAttributes<HTMLInputElement>, "size"> & {
 
 declare const InputField: ForwardRefRenderFunction<HTMLInputElement, InputFieldProps>;
 declare const Input: React$1.ForwardRefExoticComponent<Omit<React$1.InputHTMLAttributes<HTMLInputElement>, "size"> & {
-    state?: "default" | "focus" | "active" | "hover" | "filled" | "error" | undefined;
-    size?: "slim" | "medium" | "large" | undefined;
+    state?: "default" | "error" | "focus" | "active" | "hover" | "filled" | undefined;
+    size?: "medium" | "slim" | "large" | undefined;
     label?: string | undefined;
     errorText?: string | undefined;
-    prefixIconName?: "location_on" | "search" | undefined;
+    prefixIconName?: "search" | "location_on" | undefined;
     prefixIconSize?: 20 | 24 | 40 | 48 | undefined;
     prefixIconFill?: boolean | undefined;
     suffixIconFill?: boolean | undefined;

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@windstream/react-shared-components",
-  "version": "0.2.81",
+  "version": "0.2.82",
   "type": "module",
   "description": "Shared React components for Kinetic applications",
   "main": "dist/index.js",

package/src/contentful/blocks/anchored-bottom-banner/index.test.tsx

@@ -141,6 +141,17 @@ describe("AnchoredBottomBanner", () => {
     expect(container.querySelector(".text-white")).toBeInTheDocument();
   });
 
+  it("falls back to the accent background with dark text for an unmapped color", () => {
+    const { container } = render(
+      <AnchoredBottomBanner backgroundColor="orange" ctaButtonLabel="Test" />
+    );
+    expect(
+      container.querySelector(".bg-bg-fill-brand-accent")
+    ).toBeInTheDocument();
+    expect(container.querySelector(".text-text-primary")).toBeInTheDocument();
+    expect(container.querySelector(".text-white")).not.toBeInTheDocument();
+  });
+
   // Box shadow
   it("uses default shadow when boxShadow is not provided", () => {
     const { container } = render(<AnchoredBottomBanner />);
@@ -568,6 +579,30 @@ describe("AnchoredBottomBanner scheduledMessages", () => {
       container.querySelector(".bg-bg-fill-brand-accent")
     ).toBeInTheDocument();
   });
+
+  it("falls back to the accent background with dark text for an unmapped active-message color", () => {
+    const { container } = render(
+      <AnchoredBottomBanner
+        backgroundColor="navy"
+        scheduledMessages={[
+          {
+            scheduledStart: "2026-05-18",
+            scheduleEnd: "2026-05-20",
+            backgroundColor: "orange",
+            ctaButtonLabel: "Active message",
+          },
+        ]}
+      />
+    );
+    expect(
+      container.querySelector(".bg-bg-fill-brand-accent")
+    ).toBeInTheDocument();
+    expect(
+      container.querySelector(".bg-bg-fill-inverse")
+    ).not.toBeInTheDocument();
+    expect(container.querySelector(".text-text-primary")).toBeInTheDocument();
+    expect(container.querySelector(".text-white")).not.toBeInTheDocument();
+  });
 });
 
 describe("AnchoredBottomBanner scheduling timezone (America/New_York)", () => {

package/src/contentful/blocks/anchored-bottom-banner/index.tsx

@@ -147,9 +147,10 @@ export const AnchoredBottomBanner: React.FC<AnchoredBottomBannerProps> = ({
   countdownStartDateTime,
   countdownEndDateTime,
   scheduledMessages,
+  initialNowMs,
   onResolved,
 }) => {
-  const backGroundColorClasses = {
+  const backGroundColorClasses: Record<string, string> = {
     navy: "bg-bg-fill-inverse",
     green: "bg-bg-fill-success",
     blue: "bg-bg-fill-brand-info",
@@ -158,19 +159,27 @@ export const AnchoredBottomBanner: React.FC<AnchoredBottomBannerProps> = ({
     white: "bg-white",
   };
 
-  const [nowMs, setNowMs] = useState(() => Date.now());
+  // Seed from the server-provided timestamp so SSR and the first client render
+  // agree; the mount effect below reconciles to the live clock.
+  const [nowMs, setNowMs] = useState(() => initialNowMs ?? Date.now());
   const intervalRef = useRef<number | null>(null);
 
   const [hasMounted, setHasMounted] = useState(false);
-  useEffect(() => setHasMounted(true), []);
+  useEffect(() => {
+    setHasMounted(true);
+    // Reconcile the shared initial timestamp to the client's real time; any
+    // resulting boundary change is a normal post-hydration update, not a
+    // hydration mismatch.
+    setNowMs(Date.now());
+  }, []);
 
-  // The message active for "now" (display window + daysToShow) wins.
+  // The message active for "now" (display window + daysToShow) wins. Seeded from
+  // the shared initialNowMs so SSR and the first client render resolve the same
+  // message (background + content paint immediately, no post-hydration flip and
+  // no structural mismatch); the mount effect then reconciles to the live clock.
   const activeMessage = useMemo(
-    () =>
-      hasMounted
-        ? scheduledMessages?.find(message => isMessageActive(message, nowMs))
-        : undefined,
-    [scheduledMessages, nowMs, hasMounted]
+    () => scheduledMessages?.find(message => isMessageActive(message, nowMs)),
+    [scheduledMessages, nowMs]
   );
   const hasActiveMessage = activeMessage !== undefined;
 
@@ -311,13 +320,17 @@ export const AnchoredBottomBanner: React.FC<AnchoredBottomBannerProps> = ({
   const effectiveBackgroundColor = hasActiveMessage
     ? activeMessage?.backgroundColor
     : backgroundColor;
-  const bgClass = effectiveBackgroundColor
+  // Unmapped colors fall back to the light accent background, so the contrast
+  // decision follows the RESOLVED background (fallback = light) rather than the
+  // raw value, keeping CTA/icon text readable.
+  const mappedBgClass = effectiveBackgroundColor
     ? backGroundColorClasses[effectiveBackgroundColor]
-    : "bg-bg-fill-brand-accent";
+    : undefined;
+  const bgClass = mappedBgClass || "bg-bg-fill-brand-accent";
   const isLightBackground =
+    !mappedBgClass ||
     effectiveBackgroundColor === "yellow" ||
-    effectiveBackgroundColor === "white" ||
-    !effectiveBackgroundColor;
+    effectiveBackgroundColor === "white";
   const textColorClass = isLightBackground ? "text-text-primary" : "text-white";
 
   return (
@@ -348,12 +361,15 @@ export const AnchoredBottomBanner: React.FC<AnchoredBottomBannerProps> = ({
                   className={`${textColorClass} align-text-bottom`}
                 />
               )}
-              {hasMounted && countdown.shouldShow && (
-                <span className="inline-block whitespace-nowrap rounded-lg bg-white px-1 tabular-nums text-text">
+              {countdown.shouldShow && (
+                <span
+                  className="inline-block whitespace-nowrap rounded-lg bg-white px-1 tabular-nums text-text"
+                  suppressHydrationWarning={true}
+                >
                   {countdown.text}
                 </span>
               )}
-              {hasMounted && countdown.shouldShow ? " " : null}
+              {countdown.shouldShow ? " " : null}
               {effectiveCtaButtonLabel && effectiveCtaButtonLabel}{" "}
               {effectiveCtaSuffixText && (
                 <span className="ml-0.5">{effectiveCtaSuffixText}</span>

package/src/contentful/blocks/anchored-bottom-banner/types.ts

@@ -17,6 +17,18 @@ export type ScheduledMessageDay =
   | "FRI"
   | "SAT";
 
+// Known banner colors keep editor autocomplete, while `(string & {})` lets any
+// new color added in Contentful flow through without changing this type.
+export type AnchoredBannerBackgroundColor =
+  | "navy"
+  | "yellow"
+  | "green"
+  | "purple"
+  | "blue"
+  | "white"
+  // eslint-disable-next-line @typescript-eslint/ban-types
+  | (string & {});
+
 export interface ScheduledMessage {
   // Stable id for analytics (Contentful entry id or title).
   id?: string;
@@ -41,7 +53,7 @@ export interface ScheduledMessage {
 
 export interface AnchoredBottomBannerProps {
   ctaSuffixText?: string;
-  backgroundColor?: "navy" | "yellow" | "green" | "purple" | "blue" | "white";
+  backgroundColor?: AnchoredBannerBackgroundColor;
   iconName?: string;
   boxShadow?: boolean;
   ctaButtonLabel?: string;
@@ -54,6 +66,11 @@ export interface AnchoredBottomBannerProps {
   // When a message is active for today, it drives the countdown + CTA content;
   // otherwise the banner falls back to its own top-level values above.
   scheduledMessages?: ScheduledMessage[];
+  // Server-generated timestamp (epoch ms) so SSR and the first client render
+  // resolve the same schedule/countdown state (no structural hydration
+  // mismatch). Reconciled to the live clock after mount. Falls back to
+  // Date.now() when omitted.
+  initialNowMs?: number;
   // Fires with the resolved result so consumers (analytics) know what showed.
   onResolved?: (result: {
     hasActiveMessage: boolean;