@windstream/react-shared-components 0.2.52 → 0.2.53

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

@@ -0,0 +1,110 @@
+import React from "react";
+import {
+  AwardMarqueeBackground,
+  AwardMarqueeItem,
+  AwardMarqueeProps,
+  AwardMarqueeSpeed,
+} from "./types";
+
+import { cx } from "@shared/utils";
+
+const DURATION_IN_SECONDS: Record<AwardMarqueeSpeed, number> = {
+  slow: 30,
+  medium: 20,
+  fast: 10,
+};
+
+const BACKGROUND_CLASS: Record<AwardMarqueeBackground, string> = {
+  cream: "bg-[#FFFEEF]",
+  gray90: "bg-[#FBFBFC]",
+  white: "bg-white",
+};
+
+const renderAwardItem = (
+  { iconUrl, iconAlt, title, description }: AwardMarqueeItem,
+  key: React.Key
+) => (
+  <div
+    key={key}
+    className="ml-4 flex w-auto flex-shrink-0 items-center whitespace-nowrap"
+  >
+    <img src={iconUrl} alt={iconAlt ?? ""} width={200} />
+    <div className="w-[250px] text-center">
+      <p className="flex justify-center text-center text-body3 font-bold">
+        {title}
+      </p>
+      <p className="flex flex-wrap whitespace-normal text-center text-footnote">
+        {description}
+      </p>
+    </div>
+  </div>
+);
+
+export const AwardMarquee: React.FC<AwardMarqueeProps> = ({
+  anchorId = "Award-Marquee",
+  items = [],
+  speed = "medium",
+  scroll = false,
+  backgroundColor = "white",
+  className,
+}) => {
+  const scrollAvailable = items.length > 3;
+  const shouldDuplicate = items.length < 8;
+  const duration = DURATION_IN_SECONDS[speed];
+
+  const animatedMarquee = () => {
+    const marqueeItems = shouldDuplicate ? [...items, ...items] : items;
+
+    return (
+      <div
+        className={cx(
+          "flex items-center overflow-x-hidden",
+          BACKGROUND_CLASS[backgroundColor]
+        )}
+      >
+        <div
+          className="flex animate-award-marquee gap-4 px-2"
+          style={
+            {
+              "--award-marquee-duration": `${duration}s`,
+            } as React.CSSProperties
+          }
+        >
+          {marqueeItems.map((item, index) => renderAwardItem(item, index))}
+        </div>
+      </div>
+    );
+  };
+
+  const staticMarquee = (
+    <div className="flex flex-nowrap items-center justify-around overflow-clip">
+      {items.map((item, index) => renderAwardItem(item, index))}
+    </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>
+    );
+
+  // 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>
+    </div>
+  );
+};
+
+export default AwardMarquee;

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

@@ -0,0 +1,19 @@
+export type AwardMarqueeSpeed = "fast" | "medium" | "slow";
+
+export type AwardMarqueeBackground = "cream" | "gray90" | "white";
+
+export type AwardMarqueeItem = {
+  iconUrl: string;
+  iconAlt?: string;
+  title?: string;
+  description?: string;
+};
+
+export type AwardMarqueeProps = {
+  anchorId?: string;
+  items: AwardMarqueeItem[];
+  speed?: AwardMarqueeSpeed;
+  scroll?: boolean;
+  backgroundColor?: AwardMarqueeBackground;
+  className?: string;
+};

package/src/contentful/index.ts

@@ -2,6 +2,14 @@
 export { Accordion } from "./blocks/accordion";
 export type { AccordionProps } from "./blocks/accordion/types";
 
+export { AwardMarquee } from "./blocks/award-marquee";
+export type {
+  AwardMarqueeProps,
+  AwardMarqueeItem,
+  AwardMarqueeSpeed,
+  AwardMarqueeBackground,
+} from "./blocks/award-marquee/types";
+
 export { Callout } from "./blocks/callout";
 export type { CalloutProps } from "./blocks/callout/types";
 

package/tailwind.config.cjs

@@ -378,10 +378,17 @@ module.exports = {
           "70%": { transform: "scale(1.6)", opacity: "0" },
           "100%": { transform: "scale(1.6)", opacity: "0" },
         },
+        awardMarqueeScroll: {
+          from: { transform: "translateX(0)" },
+          to: { transform: "translateX(-100%)" },
+        },
       },
       animation: {
         blink: "blink 1.2s ease-in-out infinite",
         "pulse-dot": "pulseDot 1.6s ease-out infinite",
+        // Duration is supplied per-instance via the --award-marquee-duration var.
+        "award-marquee":
+          "awardMarqueeScroll var(--award-marquee-duration, 20s) linear infinite",
       },
     },
     screens: {