fragment-headless-sdk 2.1.3 → 2.1.4

This diff represents the content of publicly available package versions that have been released to one of the supported registries. The information contained in this diff is provided for informational purposes only and reflects changes between package versions as they appear in their respective public registries.
Files changed (4) hide show
  1. package/dist/components/Announcement/CountdownTimer.js +8 -8
  2. package/dist/components/Announcement/index.js +6 -4
  3. package/package.json +2 -1
  4. package/readme.md +6 -1
package/dist/components/Announcement/CountdownTimer.js CHANGED
@@ -33,29 +33,29 @@ export default function CountdownTimer({ content, }) {
33
33
  const blockClass = mergeSlotClasses("flex flex-col items-center", styling, "countdownBlock");
34
34
  const blockStyle = mergeSlotStyles(undefined, styling, "countdownBlock");
35
35
  const blockAttributes = mergeSlotAttributes(styling, "countdownBlock");
36
- const digitClass = mergeSlotClasses("w-5 h-6 rounded bg-black text-white text-base font-bold flex items-center justify-center", styling, "countdownDigit");
37
- const digitBgColor = resolveToken(styling, "counterBgColor", "#000000") || "#000000";
36
+ const digitClass = mergeSlotClasses("text-white text-xl font-bold flex items-center justify-center leading-none", styling, "countdownDigit");
38
37
  const digitTextColor = resolveToken(styling, "counterDigitColor", "#FFFFFF") || "#FFFFFF";
39
38
  const digitStyle = mergeSlotStyles({
40
- backgroundColor: digitBgColor,
41
39
  color: digitTextColor,
42
40
  }, styling, "countdownDigit");
43
41
  const digitAttributes = mergeSlotAttributes(styling, "countdownDigit");
44
- const labelClass = mergeSlotClasses("mt-0.5 text-[10px]", styling, "countdownLabel");
45
- const labelStyle = mergeSlotStyles(undefined, styling, "countdownLabel");
42
+ const labelClass = mergeSlotClasses("mt-0.5 text-[10px] leading-tight", styling, "countdownLabel");
43
+ const labelStyle = mergeSlotStyles({
44
+ color: digitTextColor,
45
+ }, styling, "countdownLabel");
46
46
  const labelAttributes = mergeSlotAttributes(styling, "countdownLabel");
47
47
  const separatorClass = mergeSlotClasses("text-xl font-semibold -mt-4", styling, "countdownSeparator");
48
48
  const separatorStyle = mergeSlotStyles(undefined, styling, "countdownSeparator");
49
49
  const separatorAttributes = mergeSlotAttributes(styling, "countdownSeparator");
50
50
  const renderBlock = (value, label) => (React.createElement("div", { className: blockClass, style: blockStyle, ...(blockAttributes ?? {}) },
51
- React.createElement("div", { className: "flex gap-1" }, value.split("").map((digit, i) => (React.createElement("span", { key: i, className: digitClass, style: digitStyle, ...(digitAttributes ?? {}) }, digit)))),
51
+ React.createElement("div", { className: "flex" }, value.split("").map((digit, i) => (React.createElement("span", { key: i, className: digitClass, style: digitStyle, ...(digitAttributes ?? {}) }, digit)))),
52
52
  React.createElement("span", { className: labelClass, style: labelStyle, ...(labelAttributes ?? {}) }, label)));
53
53
  return (React.createElement("div", { className: containerClass, style: containerStyle, ...(containerAttributes ?? {}) },
54
54
  renderBlock(timeLeft.days, "Days"),
55
55
  React.createElement("span", { className: separatorClass, style: separatorStyle, ...(separatorAttributes ?? {}) }, ":"),
56
56
  renderBlock(timeLeft.hours, "Hours"),
57
57
  React.createElement("span", { className: separatorClass, style: separatorStyle, ...(separatorAttributes ?? {}) }, ":"),
58
- renderBlock(timeLeft.minutes, "Minutes"),
58
+ renderBlock(timeLeft.minutes, "Mins"),
59
59
  React.createElement("span", { className: separatorClass, style: separatorStyle, ...(separatorAttributes ?? {}) }, ":"),
60
- renderBlock(timeLeft.seconds, "Seconds")));
60
+ renderBlock(timeLeft.seconds, "Secs")));
61
61
  }
package/dist/components/Announcement/index.js CHANGED
@@ -1,3 +1,4 @@
1
+ import { XMarkIcon } from "@heroicons/react/24/outline";
1
2
  import React, { useEffect, useRef } from "react";
2
3
  import { AnnouncementType, ButtonType } from "../../constants";
3
4
  import { buildClickUrl, fireImpressionWhenVisible, getThemeClasses, mergeSlotAttributes, mergeSlotClasses, mergeSlotStyles, resolveToken, resolveTokenByCategory, } from "../../utils";
@@ -50,7 +51,7 @@ export default function Announcement({ content, type, handleClose, }) {
50
51
  const announcementTextClass = mergeSlotClasses("max-w-none text-base font-semibold", styling, "announcementText");
51
52
  const announcementTextStyle = mergeSlotStyles(undefined, styling, "announcementText");
52
53
  const announcementTextAttributes = mergeSlotAttributes(styling, "announcementText");
53
- const closeButtonClass = mergeSlotClasses("absolute right-4 top-1/2 -translate-y-1/2 text-3xl leading-none cursor-pointer", styling, "closeButton");
54
+ const closeButtonClass = mergeSlotClasses("absolute right-4 top-1/2 -translate-y-1/2 cursor-pointer", styling, "closeButton");
54
55
  const closeButtonColor = resolveTokenByCategory(styling, "colors", "closeButton") ||
55
56
  (resolveToken(styling, "closeButtonColor", textColor ?? "#000") ?? "#000");
56
57
  const closeButtonStyle = mergeSlotStyles({ color: closeButtonColor }, styling, "closeButton");
@@ -69,7 +70,8 @@ export default function Announcement({ content, type, handleClose, }) {
69
70
  React.createElement("div", { dangerouslySetInnerHTML: {
70
71
  __html: content.announcementHtml || "",
71
72
  } })),
72
- type === AnnouncementType.Countdown ? (React.createElement(CountdownTimer, { content: content })) : (content.buttonText &&
73
- content.buttonType !== ButtonType.None && (React.createElement(AnnouncementButton, { content: content, buttonHref: buttonHref, clickHref: clickTrackingHref }))))),
74
- React.createElement("div", { onClick: handleClose, className: closeButtonClass, style: closeButtonStyle, ...(closeButtonAttributes ?? {}) }, "\u00D7"))));
73
+ type === AnnouncementType.Countdown && (React.createElement(CountdownTimer, { content: content })),
74
+ content.buttonText && content.buttonType !== ButtonType.None && (React.createElement(AnnouncementButton, { content: content, buttonHref: buttonHref, clickHref: clickTrackingHref })))),
75
+ React.createElement("div", { onClick: handleClose, className: closeButtonClass, style: closeButtonStyle, ...(closeButtonAttributes ?? {}) },
76
+ React.createElement(XMarkIcon, { className: "w-5 h-5" })))));
75
77
  }
package/package.json CHANGED
@@ -1,6 +1,6 @@
1
1
  {
2
2
  "name": "fragment-headless-sdk",
3
- "version": "2.1.3",
3
+ "version": "2.1.4",
4
4
  "license": "MIT",
5
5
  "main": "dist/index.js",
6
6
  "types": "dist/index.d.ts",
@@ -18,6 +18,7 @@
18
18
  "build": "tsc"
19
19
  },
20
20
  "dependencies": {
21
+ "@heroicons/react": "^2.2.0",
21
22
  "react": "^19.1.0"
22
23
  },
23
24
  "devDependencies": {
package/readme.md CHANGED
@@ -2,7 +2,12 @@
2
2
 
3
3
  The official SDK for integrating with Fragment-Shopify CMS. Provides React components, TypeScript types, and utilities for rendering published sections in headless Shopify storefronts.
4
4
 
5
- ## ✨ What's New in v2.1.3
5
+ ## ✨ What's New in v2.1.4
6
+
7
+ 🎨 **Countdown Timer Enhancements** - Improved countdown timer visual design with cleaner appearance
8
+ ⚡ **Enhanced Announcement Layouts** - Countdown timers can now display alongside buttons
9
+
10
+ ### Previous Release (v2.1.3)
6
11
 
7
12
  ⚡ **Request Deduplication** - Intelligent request deduplication prevents identical concurrent API calls
8
13
  🚀 **Enhanced Caching** - Improved caching strategy with 60-second revalidation for better performance