@standhigher/besttrack-page-extension 0.5.2 → 0.5.3

package/dist/index.js

@@ -913,7 +913,13 @@ function ProductImage({ src, alt, size = 60 }) {
   }
   return /* @__PURE__ */ jsx("img", { src: safeSrc, alt, onError: () => setFailed(true), style: box });
 }
-function TrackingProgress({ steps }) {
+var hexColor = /^#(?:[\da-f]{3}|[\da-f]{4}|[\da-f]{6}|[\da-f]{8})$/i;
+var defaultProgressColor = "#0f172a";
+function progressColor(value) {
+  return value && hexColor.test(value) ? value : defaultProgressColor;
+}
+function TrackingProgress({ steps, color }) {
+  const active = progressColor(color);
   const cells = Math.max(steps.length, 1);
   return /* @__PURE__ */ jsxs("div", { className: "bt-progress", role: "region", "aria-label": "Delivery progress", style: { marginTop: 32, width: "100%", maxWidth: 1200, marginLeft: "auto", marginRight: "auto", overflow: "visible" }, children: [
     /* @__PURE__ */ jsx("style", { children: trackingProgressStyles }),
@@ -921,12 +927,12 @@ function TrackingProgress({ steps }) {
       cells > 1 ? /* @__PURE__ */ jsx("div", { className: "bt-progress__line", "aria-hidden": "true", style: { position: "absolute", left: `calc(50% / ${cells})`, right: `calc(50% / ${cells})`, height: 6, display: "flex", zIndex: 0, pointerEvents: "none" }, children: steps.slice(0, -1).map((step, index) => {
         const done = step.state === "complete" || step.state === "current";
         const nextDone = steps[index + 1]?.state === "complete" || steps[index + 1]?.state === "current";
-        return /* @__PURE__ */ jsx("span", { style: { flex: 1, height: 6, borderRadius: 999, background: done && nextDone ? "#1a1a1a" : "rgba(0, 0, 0, 0.25)" } }, step.id + "-line");
+        return /* @__PURE__ */ jsx("span", { style: { flex: 1, height: 6, borderRadius: 999, background: done && nextDone ? active : `color-mix(in srgb, ${active} 25%, transparent)` } }, step.id + "-line");
       }) }) : null,
       steps.map((step, index) => {
         const done = step.state === "complete" || step.state === "current";
         return /* @__PURE__ */ jsxs("div", { style: { minWidth: 0, display: "flex", flexDirection: "column", alignItems: "center", position: "relative", zIndex: 1 }, children: [
-          /* @__PURE__ */ jsx("span", { className: "bt-progress__icon", "aria-label": step.label + " " + step.state, style: { display: "flex", flexShrink: 0, alignItems: "center", justifyContent: "center", borderRadius: 9999, border: "1px solid #0f172a", background: done ? "#0f172a" : "#fff", color: "#0f172a" }, children: /* @__PURE__ */ jsx(StepIcon, { name: step.icon ?? (index === 0 || index === steps.length - 1 ? "check" : index === 1 ? "bag" : index === 2 ? "truck" : "box"), done }) }),
+          /* @__PURE__ */ jsx("span", { className: "bt-progress__icon", "aria-label": step.label + " " + step.state, style: { display: "flex", flexShrink: 0, alignItems: "center", justifyContent: "center", borderRadius: 9999, border: `1px solid ${active}`, background: done ? active : "#fff", color: active }, children: /* @__PURE__ */ jsx(StepIcon, { name: step.icon ?? (index === 0 || index === steps.length - 1 ? "check" : index === 1 ? "bag" : index === 2 ? "truck" : "box"), done }) }),
           /* @__PURE__ */ jsxs("div", { className: "bt-progress__copy", style: { width: "100%", maxWidth: "100%", boxSizing: "border-box", textAlign: "center", padding: "0 2px" }, children: [
             /* @__PURE__ */ jsx("p", { className: "bt-progress__label", style: { margin: 0, fontWeight: 500, color: "#334155", overflowWrap: "anywhere", wordBreak: "break-word" }, children: step.label }),
             step.date ? /* @__PURE__ */ jsx("p", { style: { margin: "6px 0 0", fontSize: 12, lineHeight: "16px", color: "#94a3b8", overflowWrap: "anywhere" }, children: step.date }) : null
@@ -1254,12 +1260,12 @@ var inputStyle = {
   color: "#334155",
   boxSizing: "border-box"
 };
-var hexColor = /^#(?:[\da-f]{3}|[\da-f]{4}|[\da-f]{6}|[\da-f]{8})$/i;
+var hexColor2 = /^#(?:[\da-f]{3}|[\da-f]{4}|[\da-f]{6}|[\da-f]{8})$/i;
 var defaultSubmitButtonColor = "var(--pb-color-primary, #111)";
 function submitButtonBackground(props, loading = false) {
   if (loading) return "#475569";
   const value = text(props, "submitButtonColor");
-  return hexColor.test(value) ? value : defaultSubmitButtonColor;
+  return hexColor2.test(value) ? value : defaultSubmitButtonColor;
 }
 function submitButtonStyle(props, loading = false) {
   return {
@@ -1316,7 +1322,7 @@ function eventsFrom(result) {
   if (result?.latestEvent) return [{ id: "latest", title: result.latestEvent, at: result.updatedAt, state: "current" }];
   return [];
 }
-function ProgressResult({ result, showEstimatedDelivery = true }) {
+function ProgressResult({ result, showEstimatedDelivery = true, color }) {
   const steps = result.progress?.length ? result.progress : defaultProgress(result.status);
   return /* @__PURE__ */ jsxs3(Fragment2, { children: [
     /* @__PURE__ */ jsxs3("p", { style: { margin: 0, fontSize: 20, lineHeight: 1.4, color: "#000", overflowWrap: "anywhere" }, children: [
@@ -1325,7 +1331,7 @@ function ProgressResult({ result, showEstimatedDelivery = true }) {
     ] }),
     /* @__PURE__ */ jsx3("h2", { style: { margin: "clamp(24px, 8%, 48px) 0 0", fontSize: 32, lineHeight: 1.25, fontWeight: 700, color: "#303030", overflowWrap: "anywhere" }, children: result.status }),
     showEstimatedDelivery && result.estimatedDelivery ? /* @__PURE__ */ jsx3(EstimatedDeliveryCard, { dateText: result.estimatedDelivery }) : null,
-    /* @__PURE__ */ jsx3(TrackingProgress, { steps })
+    /* @__PURE__ */ jsx3(TrackingProgress, { steps, color })
   ] });
 }
 function DeliveryResult({ heading, contentsHeading, carrierHeading, result, editing }) {
@@ -1376,8 +1382,8 @@ function ReadyToGoQueryEditor(block) {
     /* @__PURE__ */ jsx3("p", { style: { marginTop: "auto", paddingTop: 28, textAlign: "center", fontSize: 12, lineHeight: "17px", fontStyle: "italic", color: "#b8b8b8" }, children: "Powered by BestTrack" })
   ] }) });
 }
-function ReadyToGoProgressEditor() {
-  return /* @__PURE__ */ jsx3("section", { "aria-label": "Ready-to-go progress editor", style: { ...pageFont, background: "var(--pb-color-background, #fff)", color: "var(--pb-color-text, #0f172a)", borderBottom: "1px solid #f1f5f9" }, children: /* @__PURE__ */ jsx3("div", { style: { ...contentWidth, textAlign: "center", width: "min(1248px, 100%)" }, children: /* @__PURE__ */ jsx3(ProgressResult, { result: previewReadyToGoTracking(), showEstimatedDelivery: false }) }) });
+function ReadyToGoProgressEditor(block) {
+  return /* @__PURE__ */ jsx3("section", { "aria-label": "Ready-to-go progress editor", style: { ...pageFont, background: "var(--pb-color-background, #fff)", color: "var(--pb-color-text, #0f172a)", borderBottom: "1px solid #f1f5f9" }, children: /* @__PURE__ */ jsx3("div", { style: { ...contentWidth, textAlign: "center", width: "min(1248px, 100%)" }, children: /* @__PURE__ */ jsx3(ProgressResult, { result: previewReadyToGoTracking(), showEstimatedDelivery: false, color: text(block, "progressColor") }) }) });
 }
 function ReadyToGoDeliveryEditor(block) {
   const { adPreview } = useReadyToGoRuntime();
@@ -1473,7 +1479,7 @@ function ReadyToGoQueryBlock(props) {
     /* @__PURE__ */ jsx3(RuntimeWatermark, { watermark: runtime.watermark })
   ] }) });
 }
-function ReadyToGoProgressBlock() {
+function ReadyToGoProgressBlock(props) {
   const runtime = useReadyToGoRuntime();
   const result = runtime.result;
   if (runtime.phase === "idle") return null;
@@ -1484,7 +1490,7 @@ function ReadyToGoProgressBlock() {
       /* @__PURE__ */ jsx3(SkeletonRow, {})
     ] }) : null,
     runtime.phase === "error" ? /* @__PURE__ */ jsx3("p", { style: { margin: 0, color: "#b42318" }, children: "Shipment progress is temporarily unavailable." }) : null,
-    runtime.phase === "success" && result ? /* @__PURE__ */ jsx3(ProgressResult, { result }) : null
+    runtime.phase === "success" && result ? /* @__PURE__ */ jsx3(ProgressResult, { result, color: text(props, "progressColor") }) : null
   ] }) });
 }
 function ReadyToGoDeliveryBlock(props) {
@@ -1566,10 +1572,12 @@ var readyToGoBlocks = withTemplatePolicy([
     label: "Shipment progress",
     category: "BestTrack Ready-to-go",
     targets: ["web"],
-    defaultProps: {},
+    defaultProps: { progressColor: "#0f172a" },
     defaultVariant: "default",
     variants: [{ id: "default", label: "Default" }],
-    fields: {},
+    fields: {
+      progressColor: { field: "besttrack.ready-to-go.text", label: "Progress color", control: "color", group: "Style" }
+    },
     render: { web: ReadyToGoProgressBlock, editor: ReadyToGoProgressEditor }
   },
   {

package/dist/validation.js

@@ -69,7 +69,7 @@ function validateFeaturedProduct(props) {
 }
 var readyToGoContracts = [
   block("besttrack.ready-to-go.query", 1, ["heading", "submitLabel", "submitButtonColor", "defaultTrackingNumber", "defaultOrderNumber", "defaultQueryMode", "trackingTabLabel", "orderTabLabel"], ["default"]),
-  block("besttrack.ready-to-go.progress", 1, [], ["default"]),
+  block("besttrack.ready-to-go.progress", 1, ["progressColor"], ["default"]),
   block("besttrack.ready-to-go.delivery", 1, ["heading", "contentsHeading", "carrierHeading"], ["default", "compact"]),
   block("besttrack.ready-to-go.recommendations", 1, ["heading", "products"], ["default", "grid"], void 0, [], [], ["products"])
 ];

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@standhigher/besttrack-page-extension",
-  "version": "0.5.2",
+  "version": "0.5.3",
   "description": "BestTrack business extension entry point for @standhigher/puck-page-builder.",
   "type": "module",
   "files": [
@@ -22,7 +22,7 @@
   "dependencies": {
     "embla-carousel-autoplay": "^8.6.0",
     "embla-carousel-react": "^8.6.0",
-    "@standhigher/puck-page-builder": "0.12.2"
+    "@standhigher/puck-page-builder": "0.12.3"
   },
   "devDependencies": {
     "tsup": "^8.5.1",