fragment-headless-sdk 2.1.7 → 2.1.9

package/dist/components/Announcement/AnnouncementButton.js

@@ -1,28 +1,23 @@
 import React from "react";
 import { ButtonType } from "../../constants";
-import { fireClickMetric, mergeSlotAttributes, mergeSlotClasses, mergeSlotStyles, resolveToken, resolveTokenByCategory, } from "../../utils";
+import { fireClickMetric, mergeSlotAttributes, mergeSlotClasses, mergeSlotStyles, resolveAnnouncementColors, } from "../../utils";
 export default function AnnouncementButton({ content, buttonHref, clickHref, }) {
     // Don’t render if no button or explicitly None
     if (!content?.buttonText || content.buttonType === ButtonType.None)
         return null;
-    // If we weren’t given a usable href, don’t render a broken link
+    // If we weren't given a usable href, don't render a broken link
     if (!buttonHref)
         return null;
     const styling = content.styling;
-    const baseTextColor = resolveTokenByCategory(styling, "colors", "text") ||
-        resolveToken(styling, "textColor");
-    const buttonBgColor = resolveTokenByCategory(styling, "colors", "button") ||
-        resolveToken(styling, "buttonColor");
-    const buttonTextColor = resolveTokenByCategory(styling, "colors", "buttonText") ||
-        resolveToken(styling, "buttonTextColor");
+    const colors = resolveAnnouncementColors(content);
     const baseStyle = content.buttonType === ButtonType.Text
         ? {
             textDecoration: "underline",
-            color: baseTextColor,
+            color: colors.text,
         }
         : {
-            backgroundColor: buttonBgColor,
-            color: buttonTextColor,
+            backgroundColor: colors.button,
+            color: colors.buttonText,
         };
     const style = mergeSlotStyles(baseStyle, styling, "announcementButton", "button");
     const className = mergeSlotClasses("whitespace-nowrap rounded-md px-3 py-2 text-sm font-semibold no-underline hover:cursor-pointer hover:opacity-70", styling, "announcementButton", "button");

package/dist/components/Announcement/CountdownTimer.js

@@ -1,5 +1,5 @@
 import React, { useEffect, useState } from "react";
-import { mergeSlotAttributes, mergeSlotClasses, mergeSlotStyles, resolveToken, } from "../../utils";
+import { mergeSlotAttributes, mergeSlotClasses, mergeSlotStyles, resolveCountdownColors, } from "../../utils";
 export default function CountdownTimer({ content, }) {
     const [timeLeft, setTimeLeft] = useState({
         days: "00",
@@ -33,24 +33,25 @@ export default function CountdownTimer({ content, }) {
     const blockClass = mergeSlotClasses("flex flex-col items-center", styling, "countdownBlock");
     const blockStyle = mergeSlotStyles(undefined, styling, "countdownBlock");
     const blockAttributes = mergeSlotAttributes(styling, "countdownBlock");
-    const digitClass = mergeSlotClasses("text-white text-xl font-bold flex items-center justify-center leading-none", styling, "countdownDigit");
-    const digitTextColor = resolveToken(styling, "counterDigitColor", "#FFFFFF") || "#FFFFFF";
+    const digitClass = mergeSlotClasses("text-lg font-bold flex items-center justify-center leading-tight rounded px-1", styling, "countdownDigit");
+    const colors = resolveCountdownColors(content);
     const digitStyle = mergeSlotStyles({
-        color: digitTextColor,
+        color: colors.digitColor,
+        backgroundColor: colors.digitBackgroundColor,
     }, styling, "countdownDigit");
     const digitAttributes = mergeSlotAttributes(styling, "countdownDigit");
     const labelClass = mergeSlotClasses("mt-0.5 text-[10px] leading-tight", styling, "countdownLabel");
     const labelStyle = mergeSlotStyles({
-        color: digitTextColor,
+        color: colors.textColor,
     }, styling, "countdownLabel");
     const labelAttributes = mergeSlotAttributes(styling, "countdownLabel");
     const separatorClass = mergeSlotClasses("text-xl font-semibold -mt-4", styling, "countdownSeparator");
     const separatorStyle = mergeSlotStyles({
-        color: digitTextColor,
+        color: colors.textColor,
     }, styling, "countdownSeparator");
     const separatorAttributes = mergeSlotAttributes(styling, "countdownSeparator");
     const renderBlock = (value, label) => (React.createElement("div", { className: blockClass, style: blockStyle, ...(blockAttributes ?? {}) },
-        React.createElement("div", { className: "flex" }, value.split("").map((digit, i) => (React.createElement("span", { key: i, className: digitClass, style: digitStyle, ...(digitAttributes ?? {}) }, digit)))),
+        React.createElement("div", { className: "flex gap-1" }, value.split("").map((digit, i) => (React.createElement("span", { key: i, className: digitClass, style: digitStyle, ...(digitAttributes ?? {}) }, digit)))),
         React.createElement("span", { className: labelClass, style: labelStyle, ...(labelAttributes ?? {}) }, label)));
     return (React.createElement("div", { className: containerClass, style: containerStyle, ...(containerAttributes ?? {}) },
         renderBlock(timeLeft.days, "Days"),

package/dist/components/Announcement/index.js

@@ -1,7 +1,7 @@
 import { XMarkIcon } from "@heroicons/react/24/outline";
 import React, { useEffect, useRef } from "react";
 import { AnnouncementType, ButtonType } from "../../constants";
-import { buildClickUrl, fireImpressionWhenVisible, getThemeClasses, mergeSlotAttributes, mergeSlotClasses, mergeSlotStyles, resolveToken, resolveTokenByCategory, } from "../../utils";
+import { buildClickUrl, fireImpressionWhenVisible, getThemeClasses, mergeSlotAttributes, mergeSlotClasses, mergeSlotStyles, resolveAnnouncementColors, } from "../../utils";
 import AnnouncementButton from "./AnnouncementButton";
 import { AnnouncementStyles } from "./AnnouncementStyles";
 import CountdownTimer from "./CountdownTimer";
@@ -19,15 +19,12 @@ export default function Announcement({ content, type, handleClose, }) {
     if (!content)
         return null;
     const styling = content.styling;
-    const backgroundColor = resolveTokenByCategory(styling, "colors", "background") ||
-        resolveToken(styling, "bgColor");
-    const textColor = resolveTokenByCategory(styling, "colors", "text") ||
-        resolveToken(styling, "textColor");
+    const colors = resolveAnnouncementColors(content);
     const themeClasses = getThemeClasses(styling);
     const rootClass = mergeSlotClasses(`relative w-full ${themeClasses}`, styling, "root");
     const rootStyle = mergeSlotStyles({
-        backgroundColor,
-        color: textColor,
+        backgroundColor: colors.background,
+        color: colors.text,
     }, styling, "root");
     const rootAttributes = mergeSlotAttributes(styling, "root");
     const innerClass = mergeSlotClasses("relative mx-auto flex max-w-screen-xl flex-col md:flex-row items-center justify-center gap-4 px-10 md:px-4 py-2 md:py-0 text-center md:text-left min-h-[50px]", styling, "inner", "wrapper");
@@ -48,13 +45,11 @@ export default function Announcement({ content, type, handleClose, }) {
     const contentRowClass = mergeSlotClasses("flex flex-col md:flex-row items-center justify-center gap-2 md:gap-4 w-full", styling, "contentRow");
     const contentRowStyle = mergeSlotStyles(undefined, styling, "contentRow");
     const contentRowAttributes = mergeSlotAttributes(styling, "contentRow");
-    const announcementTextClass = mergeSlotClasses("max-w-none text-base font-semibold", styling, "announcementText");
+    const announcementTextClass = mergeSlotClasses("max-w-none text-based", styling, "announcementText");
     const announcementTextStyle = mergeSlotStyles(undefined, styling, "announcementText");
     const announcementTextAttributes = mergeSlotAttributes(styling, "announcementText");
     const closeButtonClass = mergeSlotClasses("absolute right-4 top-1/2 -translate-y-1/2 cursor-pointer", styling, "closeButton");
-    const closeButtonColor = resolveTokenByCategory(styling, "colors", "closeButton") ||
-        (resolveToken(styling, "closeButtonColor", textColor ?? "#000") ?? "#000");
-    const closeButtonStyle = mergeSlotStyles({ color: closeButtonColor }, styling, "closeButton");
+    const closeButtonStyle = mergeSlotStyles({ color: colors.closeButton }, styling, "closeButton");
     const closeButtonAttributes = mergeSlotAttributes(styling, "closeButton");
     return (React.createElement("div", { ref: ref, className: rootClass, style: rootStyle, ...(rootAttributes ?? {}) },
         React.createElement(AnnouncementStyles, null),

package/dist/types/announcement.d.ts

@@ -21,8 +21,11 @@ export interface IAnnouncement {
     name: string;
     status: AnnouncementStatus;
     content: IAnnouncementContent | null;
+    active_duration_seconds: number | null;
     active_start_date: string | null;
     active_end_date: string | null;
+    last_activated_at: string | null;
+    last_deactivated_at: string | null;
     created_at: string | null;
     updated_at: string | null;
     views_count: number;

package/dist/types/hero.d.ts

@@ -25,7 +25,10 @@ export interface IHero {
     page: ShopPage["handle"] | null;
     status: HeroStatus;
     content: IHeroContent | null;
+    active_duration_seconds: number | null;
     active_start_date: string | null;
+    last_activated_at: string | null;
+    last_deactivated_at: string | null;
     active_end_date: string | null;
     created_at: string | null;
     updated_at: string | null;

package/dist/utils/announcement-resolvers.d.ts

@@ -0,0 +1,15 @@
+import { IAnnouncementContent } from "../types";
+export interface AnnouncementResolvedColors {
+    background: string;
+    text: string;
+    button: string;
+    buttonText: string;
+    closeButton: string;
+}
+export interface CountdownResolvedColors {
+    digitColor: string;
+    digitBackgroundColor: string;
+    textColor: string;
+}
+export declare function resolveAnnouncementColors(content: IAnnouncementContent): AnnouncementResolvedColors;
+export declare function resolveCountdownColors(content: IAnnouncementContent): CountdownResolvedColors;

package/dist/utils/announcement-resolvers.js

@@ -0,0 +1,45 @@
+import { resolveToken, resolveTokenByCategory } from "./styling";
+const DEFAULT_ANNOUNCEMENT_COLORS = {
+    background: "#000000",
+    text: "#ffffff",
+    button: "#ffffff",
+    buttonText: "#000000",
+    closeButton: "#ffffff",
+};
+const DEFAULT_COUNTDOWN_COLORS = {
+    digitColor: "#ffffff",
+    digitBackgroundColor: "#000000",
+    textColor: "#ffffff",
+};
+const fallbackColor = (value, fallback) => typeof value === "string" && value.trim().length > 0 ? value : fallback;
+export function resolveAnnouncementColors(content) {
+    const styling = content.styling;
+    const background = resolveTokenByCategory(styling, "colors", "background") ||
+        resolveToken(styling, "bgColor");
+    const text = resolveTokenByCategory(styling, "colors", "text") ||
+        resolveToken(styling, "textColor");
+    const button = resolveTokenByCategory(styling, "colors", "button") ||
+        resolveToken(styling, "buttonColor");
+    const buttonText = resolveTokenByCategory(styling, "colors", "buttonText") ||
+        resolveToken(styling, "buttonTextColor");
+    const closeButton = resolveTokenByCategory(styling, "colors", "closeButton") ||
+        resolveToken(styling, "closeButtonColor");
+    return {
+        background: fallbackColor(background, DEFAULT_ANNOUNCEMENT_COLORS.background),
+        text: fallbackColor(text, DEFAULT_ANNOUNCEMENT_COLORS.text),
+        button: fallbackColor(button, DEFAULT_ANNOUNCEMENT_COLORS.button),
+        buttonText: fallbackColor(buttonText, DEFAULT_ANNOUNCEMENT_COLORS.buttonText),
+        closeButton: fallbackColor(closeButton, fallbackColor(text, DEFAULT_ANNOUNCEMENT_COLORS.closeButton)),
+    };
+}
+export function resolveCountdownColors(content) {
+    const styling = content.styling;
+    const digitColor = resolveToken(styling, "counterDigitColor");
+    const digitBackgroundColor = resolveToken(styling, "counterDigitBackgroundColor");
+    const textColor = resolveToken(styling, "counterTextColor", digitColor);
+    return {
+        digitColor: fallbackColor(digitColor, DEFAULT_COUNTDOWN_COLORS.digitColor),
+        digitBackgroundColor: fallbackColor(digitBackgroundColor, DEFAULT_COUNTDOWN_COLORS.digitBackgroundColor),
+        textColor: fallbackColor(textColor, DEFAULT_COUNTDOWN_COLORS.textColor),
+    };
+}

package/dist/utils/hero-resolvers.js

@@ -39,7 +39,7 @@ export function resolveHeroColors(content) {
     return {
         title: fallbackColor(tokens.title, DEFAULT_COLORS.title),
         text: fallbackColor(tokens.text, DEFAULT_COLORS.text),
-        buttonBackground: fallbackColor(tokens.button ?? tokens.buttonBackground, DEFAULT_COLORS.buttonBackground),
+        buttonBackground: fallbackColor(tokens.buttonBackground, DEFAULT_COLORS.buttonBackground),
         buttonText: fallbackColor(tokens.buttonText, DEFAULT_COLORS.buttonText),
         background: fallbackColor(tokens.background, DEFAULT_COLORS.background),
     };

package/dist/utils/index.d.ts

@@ -1,3 +1,4 @@
+export * from "./announcement-resolvers";
 export * from "./cache";
 export * from "./fetch-resource";
 export * from "./hero-resolvers";

package/dist/utils/index.js

@@ -1,3 +1,4 @@
+export * from "./announcement-resolvers";
 export * from "./cache";
 export * from "./fetch-resource";
 export * from "./hero-resolvers";

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "fragment-headless-sdk",
-  "version": "2.1.7",
+  "version": "2.1.9",
   "license": "MIT",
   "main": "dist/index.js",
   "types": "dist/index.d.ts",

package/readme.md

@@ -4,7 +4,7 @@ The official SDK for integrating with Fragment-Shopify CMS. Provides React compo
 
 ## ✨ What's New
 
-**v2.1.4** - Countdown timer enhancements and improved announcement layouts
+**v2.1.8** - Enhanced countdown timer styling with customizable color tokens
 
 > See [CHANGELOG.md](./docs/CHANGELOG.md) for full release history
 
@@ -433,6 +433,44 @@ interface IAnnouncementContent {
 - `button` - Action button
 - `closeButton` - Close button
 - `countdown` - Countdown container (countdown type)
+- `countdownContainer` - Countdown timer container
+- `countdownBlock` - Individual time block (days, hours, etc.)
+- `countdownDigit` - Countdown digit styling
+- `countdownLabel` - Time unit labels (Days, Hours, Mins, Secs)
+- `countdownSeparator` - Separator between time blocks (`:`)
+
+**Countdown Timer Color Tokens:**
+
+For countdown-type announcements, you can customize the timer appearance using these color tokens in `styling.tokens.colors`:
+
+- `counterDigitColor` - Color of the countdown digits (default: `#FFFFFF`)
+- `counterDigitBackgroundColor` - Background color of the countdown digits (default: `#000000`)
+- `counterTextColor` - Color of labels and separators (default: uses `counterDigitColor`)
+
+**Example:**
+
+```tsx
+const announcementContent = {
+  buttonType: ButtonType.Default,
+  buttonText: "Shop now",
+  buttonLink: "/",
+  counterEndDate: "2026-01-01T17:00:00.000Z",
+  announcementHtml: "🎉 Check out the latest products!",
+  styling: {
+    tokens: {
+      colors: {
+        text: "#1e293b",
+        background: "#e0e7ff",
+        button: "#4f46e5",
+        buttonText: "#ffffff",
+        counterDigitColor: "#ffffff",
+        counterDigitBackgroundColor: "#4f46e5",
+        counterTextColor: "#000000",
+      },
+    },
+  },
+};
+```
 
 ## 🔑 API Key Setup