@windstream/react-shared-components 0.2.75 → 0.2.76

package/package.json

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

package/src/components/animation-wrapper/index.tsx

@@ -78,7 +78,17 @@ export function AnimationWrapper({
   transition,
   ...motionProps
 }: AnimationWrapperProps) {
-  const prefersReducedMotion = useReducedMotion();
+  // useReducedMotion() reads window.matchMedia, which is unavailable during
+  // SSR (always resolves falsy server-side). Gating on it immediately would
+  // make the client's first render diverge from the server-rendered markup
+  // on any machine with OS-level "Reduce motion" enabled, causing a
+  // hydration mismatch (extra framer-motion attributes like tabIndex) that
+  // can force React to remount the whole tree mid-click. Only honor it once
+  // mounted, so the first client render always matches SSR.
+  const [isMounted, setIsMounted] = React.useState(false);
+  React.useEffect(() => setIsMounted(true), []);
+  const reducedMotionPreferred = useReducedMotion();
+  const prefersReducedMotion = isMounted && reducedMotionPreferred;
 
   const child = React.Children.only(children) as React.ReactElement<
     Record<string, unknown>

package/src/contentful/blocks/award-marquee/AwardMarquee.stories.tsx

@@ -13,7 +13,7 @@ const meta: Meta<typeof AwardMarquee> = {
       page: DocsPage,
       description: {
         component:
-          "Server-rendered marquee of award badges. Animates when `scroll` is set; with 3 or fewer items it animates on mobile and falls back to a static row at the `sm` breakpoint (CSS-driven, no client-side JS).",
+          "Server-rendered marquee of award badges. Optional `heading` and `footerText` display gold text above and below the awards, with divider lines around the heading. Animates when `scroll` is set; with 3 or fewer items it animates on mobile and falls back to a static row at the `sm` breakpoint (CSS-driven, no client-side JS).",
       },
     },
   },
@@ -48,3 +48,11 @@ export const CreamBackground: Story = {
     backgroundColor: "cream",
   },
 };
+
+export const WithHeadingAndFooter: Story = {
+  args: {
+    heading: "As seen on",
+    footerText: "And over 450+ news sites",
+    scroll: false,
+  },
+};

package/src/contentful/blocks/award-marquee/index.test.tsx

@@ -15,6 +15,70 @@ const buildItems = (count: number): AwardMarqueeItem[] =>
   }));
 
 describe("AwardMarquee", () => {
+  it.each([
+    { scroll: false, count: 2 },
+    { scroll: true, count: 5 },
+    { scroll: true, count: 2 },
+  ])(
+    "renders heading and footer once with $count items and scroll=$scroll",
+    ({ scroll, count }) => {
+      const { container } = render(
+        <AwardMarquee
+          items={buildItems(count)}
+          scroll={scroll}
+          heading="As seen on"
+          footerText="And over 450+ news sites"
+        />
+      );
+
+      const heading = screen.getByText("As seen on");
+      const footer = screen.getByText("And over 450+ news sites");
+      expect(screen.getAllByText("As seen on")).toHaveLength(1);
+      expect(screen.getAllByText("And over 450+ news sites")).toHaveLength(1);
+      expect(heading).toHaveClass("heading2");
+      expect(footer).toHaveClass("subheading3");
+      expect(heading).not.toHaveClass("text-xs");
+      expect(footer).not.toHaveClass("text-xs");
+      expect(container.querySelector("#Award-Marquee")?.firstElementChild).toBe(
+        heading
+      );
+      expect(container.querySelector("#Award-Marquee")?.lastElementChild).toBe(
+        footer
+      );
+      expect(screen.getAllByText("Award 0").length).toBeGreaterThan(0);
+      expect(screen.getAllByText("Description 0").length).toBeGreaterThan(0);
+    }
+  );
+
+  it("allows heading and footer to be set independently", () => {
+    const { rerender } = render(
+      <AwardMarquee items={buildItems(1)} heading="As seen on" />
+    );
+    expect(screen.getByText("As seen on")).toBeInTheDocument();
+    expect(
+      screen.queryByText("And over 450+ news sites")
+    ).not.toBeInTheDocument();
+
+    rerender(
+      <AwardMarquee
+        items={buildItems(1)}
+        footerText="And over 450+ news sites"
+      />
+    );
+    expect(screen.queryByText("As seen on")).not.toBeInTheDocument();
+    expect(screen.getByText("And over 450+ news sites")).toBeInTheDocument();
+  });
+
+  it("does not add text or divider lines when fields are empty or omitted", () => {
+    const { container, rerender } = render(
+      <AwardMarquee items={buildItems(1)} />
+    );
+    const originalMarkup = container.innerHTML;
+    rerender(<AwardMarquee items={buildItems(1)} heading="" footerText="" />);
+    expect(container.innerHTML).toBe(originalMarkup);
+    expect(container.querySelector('[aria-hidden="true"]')).toBeNull();
+  });
+
   it("renders award items synchronously (SSR, no hydration gate)", () => {
     render(<AwardMarquee items={buildItems(2)} />);
     expect(screen.getByText("Award 0")).toBeInTheDocument();
@@ -31,9 +95,7 @@ describe("AwardMarquee", () => {
   it("renders intrinsic icon dimensions when provided", () => {
     const [item] = buildItems(1);
     render(
-      <AwardMarquee
-        items={[{ ...item, iconWidth: 320, iconHeight: 180 }]}
-      />
+      <AwardMarquee items={[{ ...item, iconWidth: 320, iconHeight: 180 }]} />
     );
     const icon = screen.getByAltText("Award 0");
     expect(icon).toHaveAttribute("width", "320");
@@ -99,7 +161,11 @@ describe("AwardMarquee", () => {
     ).not.toBeNull();
 
     const splitView = render(
-      <AwardMarquee items={buildItems(2)} scroll={true} anchorId="split-anchor" />
+      <AwardMarquee
+        items={buildItems(2)}
+        scroll={true}
+        anchorId="split-anchor"
+      />
     );
     expect(splitView.container.querySelector("#split-anchor")).not.toBeNull();
   });

package/src/contentful/blocks/award-marquee/index.tsx

@@ -55,6 +55,8 @@ const renderAwardItem = (
 
 export const AwardMarquee: React.FC<AwardMarqueeProps> = ({
   anchorId = "Award-Marquee",
+  heading,
+  footerText,
   items = [],
   speed = "medium",
   scroll = false,
@@ -95,27 +97,24 @@ export const AwardMarquee: React.FC<AwardMarqueeProps> = ({
     </div>
   );
 
-  // No scroll: always static at every breakpoint.
-  if (!scroll)
-    return (
-      <div id={anchorId} className={className}>
-        {staticMarquee}
-      </div>
-    );
-
-  // Scroll with >3 items: animate at every breakpoint.
-  if (scrollAvailable)
-    return (
-      <div id={anchorId} className={className}>
-        {animatedMarquee()}
-      </div>
-    );
+  const marquee = !scroll ? (
+    staticMarquee
+  ) : scrollAvailable ? (
+    animatedMarquee()
+  ) : (
+    <>
+      <div className="sm:hidden">{animatedMarquee()}</div>
+      <div className="hidden sm:block">{staticMarquee}</div>
+    </>
+  );
 
-  // Scroll with <=3 items: animate on mobile, static on >= sm (CSS-driven).
   return (
     <div id={anchorId} className={className}>
-      <div className="sm:hidden">{animatedMarquee()}</div>
-      <div className="hidden sm:block">{staticMarquee}</div>
+      {heading && <p className="heading2 mb-4 px-4 text-center">{heading}</p>}
+      {marquee}
+      {footerText && (
+        <p className="subheading3 mt-4 px-4 text-center">{footerText}</p>
+      )}
     </div>
   );
 };

package/src/contentful/blocks/award-marquee/types.ts

@@ -13,6 +13,8 @@ export type AwardMarqueeItem = {
 
 export type AwardMarqueeProps = {
   anchorId?: string;
+  heading?: string;
+  footerText?: string;
   items: AwardMarqueeItem[];
   speed?: AwardMarqueeSpeed;
   scroll?: boolean;

package/src/contentful/blocks/floating-banner/index.tsx

@@ -75,8 +75,8 @@ export const FloatingBanner: React.FC<FloatingBannerProps> = ({
           {cta && (
             <div className="mt-5 flex flex-shrink-0 justify-center lg:mt-0 lg:items-center">
               <Button
+                 buttonVariant="secondary"
                 {...cta}
-                buttonVariant="secondary"
                 size={{ base: "medium", md: "large" }}
               ></Button>
             </div>