@bygghammar/cms-platform 0.73.0 → 0.75.0

package/CHANGELOG.md

@@ -1,5 +1,17 @@
+## 0.75.0
+
+- Countdown: pick the replacement global block from a dropdown instead of typing its key.
+
 # Changelog
 
+## 0.74.0
+
+- `CountdownBlock`: typography controls for the heading, sub text and fine print
+  — size (small/medium/large/extra large), weight (normal → black), serif/sans,
+  letter spacing, capitals and line height, each resettable. Defaults reproduce
+  the previous appearance, so saved pages are unchanged.
+
+
 ## 0.73.0
 
 - New **Countdown** block: timezone-aware deadline (IANA zone + wall clock),

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@bygghammar/cms-platform",
-  "version": "0.73.0",
+  "version": "0.75.0",
   "description": "Shared CMS platform: blocks, block types, i18n core, UI primitives and design-token contract used by every Bygghammar/Voyara site.",
   "type": "module",
   "sideEffects": [
@@ -30,6 +30,7 @@
     "./host": "./src/host/index.tsx",
     "./blocks": "./src/blocks/index.ts",
     "./blocks/types": "./src/blocks/types.ts",
+    "./blocks/countdown-typography": "./src/blocks/countdown-typography.ts",
     "./blocks/icons": "./src/blocks/icons.ts",
     "./blocks/block-props-context": "./src/blocks/block-props-context.tsx",
     "./blocks/components/*": "./src/blocks/components/*.tsx",

package/src/backoffice/inspectors/blocks.tsx

@@ -7,6 +7,17 @@
 import { useEffect, useMemo, useState } from "react";
 import { BUTTON_COLOR_DEFAULTS, type ButtonColors } from "../../blocks/button-colors";
 import { COUNTDOWN_COLOR_DEFAULTS, type CountdownColors } from "../../blocks/countdown-colors";
+import {
+  COUNTDOWN_TEXT_DEFAULTS,
+  COUNTDOWN_TEXT_FAMILY_OPTIONS,
+  COUNTDOWN_TEXT_LEADING_OPTIONS,
+  COUNTDOWN_TEXT_SIZE_OPTIONS,
+  COUNTDOWN_TEXT_TRACKING_OPTIONS,
+  COUNTDOWN_TEXT_TRANSFORM_OPTIONS,
+  COUNTDOWN_TEXT_WEIGHT_OPTIONS,
+  type CountdownTextSlot,
+  type CountdownTextStyle,
+} from "../../blocks/countdown-typography";
 import {
   COUNTDOWN_DEFAULT_TIMEZONE,
   COUNTDOWN_TIMEZONES,
@@ -2402,7 +2413,11 @@ export {
 };
 
 /* ---------------- Countdown ---------------- */
-export function CountdownInspector({ block, patch }: BlockPatchProps) {
+export function CountdownInspector({
+  block,
+  patch,
+  globalSections = [],
+}: BlockPatchProps & { globalSections?: { key: string; name: string }[] }) {
   const p = (block.props ?? {}) as CountdownProps;
   const update = (next: CountdownProps) => patch(next as unknown as BlockProps);
 
@@ -2467,6 +2482,47 @@ export function CountdownInspector({ block, patch }: BlockPatchProps) {
     </label>
   );
 
+  const textStyle = (
+    title: string,
+    slot: CountdownTextSlot,
+    key: "titleType" | "bodyType" | "noteType",
+  ) => {
+    const current = (p[key] ?? {}) as CountdownTextStyle;
+    const d = COUNTDOWN_TEXT_DEFAULTS[slot];
+    const set = (patchStyle: CountdownTextStyle) =>
+      update({ ...p, [key]: { ...current, ...patchStyle } });
+    return (
+      <div key={key} className="space-y-2 border border-ink/10 bg-paper/60 p-3">
+        <p className="text-[0.7rem] uppercase tracking-[0.22em] text-ink/70">{title}</p>
+        <div className="grid grid-cols-2 gap-2">
+          {select("Size", current.size, d.size, COUNTDOWN_TEXT_SIZE_OPTIONS, (v) => set({ size: v }))}
+          {select("Weight", current.weight, d.weight, COUNTDOWN_TEXT_WEIGHT_OPTIONS, (v) =>
+            set({ weight: v }),
+          )}
+          {select("Style", current.family, d.family, COUNTDOWN_TEXT_FAMILY_OPTIONS, (v) =>
+            set({ family: v }),
+          )}
+          {select("Letter spacing", current.tracking, d.tracking, COUNTDOWN_TEXT_TRACKING_OPTIONS, (v) =>
+            set({ tracking: v }),
+          )}
+          {select("Capitals", current.transform, d.transform, COUNTDOWN_TEXT_TRANSFORM_OPTIONS, (v) =>
+            set({ transform: v }),
+          )}
+          {select("Line height", current.leading, d.leading, COUNTDOWN_TEXT_LEADING_OPTIONS, (v) =>
+            set({ leading: v }),
+          )}
+        </div>
+        <button
+          type="button"
+          onClick={() => update({ ...p, [key]: {} })}
+          className="text-xs uppercase tracking-[0.18em] text-ink/60 underline hover:text-ink"
+        >
+          Reset to default
+        </button>
+      </div>
+    );
+  };
+
   const toggle = (label: string, value: boolean, onPick: (v: boolean) => void) => (
     <label className="flex items-center gap-2 text-sm text-ink">
       <input type="checkbox" checked={value} onChange={(e) => onPick(e.target.checked)} />
@@ -2482,6 +2538,15 @@ export function CountdownInspector({ block, patch }: BlockPatchProps) {
         <LocalizedField label="Fine print (under the timer)" value={p.note} onChange={(v) => update({ ...p, note: v })} />
       </InspectorSection>
 
+      <InspectorSection title="Typography">
+        <p className="text-xs leading-relaxed text-ink/60">
+          Size and weight for the three texts above and under the timer.
+        </p>
+        {textStyle("Heading", "heading", "titleType")}
+        {textStyle("Sub text", "sub", "bodyType")}
+        {textStyle("Fine print", "note", "noteType")}
+      </InspectorSection>
+
       <InspectorSection title="Deadline">
         <label className="block space-y-1.5">
           <span className="block text-[0.7rem] uppercase tracking-[0.22em] text-ink/60">
@@ -2650,11 +2715,37 @@ export function CountdownInspector({ block, patch }: BlockPatchProps) {
           (v) => update({ ...p, onExpire: v as CountdownProps["onExpire"] }),
         )}
         {p.onExpire === "replace" ? (
-          <TextField
-            label="Global block key to show instead"
-            value={p.expiredSectionKey ?? ""}
-            onChange={(v) => update({ ...p, expiredSectionKey: v })}
-          />
+          globalSections.length ? (
+            <label className="block space-y-1.5">
+              <span className="block text-[0.7rem] uppercase tracking-[0.22em] text-ink/60">
+                Global block to show instead
+              </span>
+              <select
+                value={p.expiredSectionKey ?? ""}
+                onChange={(e) => update({ ...p, expiredSectionKey: e.target.value })}
+                className="w-full border border-ink/15 bg-white px-2.5 py-1.5 text-sm text-ink focus:border-sea focus:outline-none"
+              >
+                <option value="">— none —</option>
+                {globalSections.map((g) => (
+                  <option key={g.key} value={g.key}>
+                    {g.name} ({g.key})
+                  </option>
+                ))}
+                {p.expiredSectionKey &&
+                !globalSections.some((g) => g.key === p.expiredSectionKey) ? (
+                  <option value={p.expiredSectionKey}>
+                    {p.expiredSectionKey} (missing)
+                  </option>
+                ) : null}
+              </select>
+            </label>
+          ) : (
+            <TextField
+              label="Global block key to show instead"
+              value={p.expiredSectionKey ?? ""}
+              onChange={(v) => update({ ...p, expiredSectionKey: v })}
+            />
+          )
         ) : null}
         {p.onExpire === "revealPage" ? (
           <>

package/src/backoffice/inspectors/index.tsx

@@ -750,7 +750,7 @@ export function BlockInspector({
     case "courseList":
       return <TripListInspector block={block} patch={patch} />;
     case "countdown":
-      return <CountdownInspector block={block} patch={patch} />;
+      return <CountdownInspector block={block} patch={patch} globalSections={globalSections} />;
     case "ctaBanner":
       return <CtaBannerInspector block={block} patch={patch} />;
     case "mediaSplit":

package/src/blocks/components/CountdownBlock.tsx

@@ -5,6 +5,7 @@ import type { LocalizedString } from "../../i18n";
 import { Reveal } from "../../ui/Reveal";
 import { countdownColorStyle, countdownRadius } from "../countdown-colors";
 import { countdownParts, resolveCountdownTarget } from "../countdown-time";
+import { countdownTextClasses } from "../countdown-typography";
 import { useCountdownReplacement } from "../countdown-replacement";
 import type { CountdownProps } from "../types";
 
@@ -93,12 +94,16 @@ export function CountdownBlock({ props: p }: { props: CountdownProps }) {
   const heading = (title?: Partial<LocalizedString>, body?: Partial<LocalizedString>) => (
     <>
       {t(title) ? (
-        <h2 className="font-serif text-[clamp(1.6rem,3.6vw,2.9rem)] leading-[1.1] tracking-[-0.02em] whitespace-pre-line text-[var(--cd-heading)]">
+        <h2
+          className={`${countdownTextClasses("heading", p.titleType)} whitespace-pre-line text-[var(--cd-heading)]`}
+        >
           {t(title)}
         </h2>
       ) : null}
       {t(body) ? (
-        <p className="mt-4 max-w-2xl text-base md:text-lg leading-relaxed whitespace-pre-line text-[var(--cd-sub)]">
+        <p
+          className={`mt-4 max-w-2xl ${countdownTextClasses("sub", p.bodyType)} whitespace-pre-line text-[var(--cd-sub)]`}
+        >
           {t(body)}
         </p>
       ) : null}
@@ -179,7 +184,7 @@ export function CountdownBlock({ props: p }: { props: CountdownProps }) {
         ))}
       </div>
       {t(p.note) ? (
-        <p className="mt-5 text-xs uppercase tracking-[0.18em] text-[var(--cd-sub)]">
+        <p className={`mt-5 ${countdownTextClasses("note", p.noteType)} text-[var(--cd-sub)]`}>
           {t(p.note)}
         </p>
       ) : null}

package/src/blocks/countdown-typography.ts

@@ -0,0 +1,158 @@
+/**
+ * Typography options for the Countdown block's texts (heading, sub text and
+ * fine print). Every value is optional; leaving a field unset keeps the
+ * original theme-driven look, so saved pages never change appearance.
+ */
+
+export type CountdownTextSize = "sm" | "md" | "lg" | "xl";
+export type CountdownTextWeight = "normal" | "medium" | "semibold" | "bold" | "black";
+export type CountdownTextFamily = "serif" | "sans";
+export type CountdownTextTracking = "tight" | "normal" | "wide" | "wider";
+export type CountdownTextTransform = "none" | "uppercase" | "lowercase";
+export type CountdownTextLeading = "tight" | "normal" | "relaxed";
+
+export type CountdownTextStyle = {
+  size?: CountdownTextSize;
+  weight?: CountdownTextWeight;
+  family?: CountdownTextFamily;
+  tracking?: CountdownTextTracking;
+  transform?: CountdownTextTransform;
+  leading?: CountdownTextLeading;
+};
+
+export type CountdownTextSlot = "heading" | "sub" | "note";
+
+/** Responsive sizes per slot; `md` reproduces the original hardcoded size. */
+const SIZE: Record<CountdownTextSlot, Record<CountdownTextSize, string>> = {
+  heading: {
+    sm: "text-[clamp(1.2rem,2.4vw,1.75rem)]",
+    md: "text-[clamp(1.6rem,3.6vw,2.9rem)]",
+    lg: "text-[clamp(2rem,5vw,4rem)]",
+    xl: "text-[clamp(2.4rem,6.5vw,5.5rem)]",
+  },
+  sub: {
+    sm: "text-sm md:text-base",
+    md: "text-base md:text-lg",
+    lg: "text-lg md:text-2xl",
+    xl: "text-xl md:text-3xl",
+  },
+  note: {
+    sm: "text-[0.7rem]",
+    md: "text-xs",
+    lg: "text-sm md:text-base",
+    xl: "text-base md:text-lg",
+  },
+};
+
+const WEIGHT: Record<CountdownTextWeight, string> = {
+  normal: "font-normal",
+  medium: "font-medium",
+  semibold: "font-semibold",
+  bold: "font-bold",
+  black: "font-black",
+};
+
+const FAMILY: Record<CountdownTextFamily, string> = {
+  serif: "font-serif",
+  sans: "font-sans",
+};
+
+const TRACKING: Record<CountdownTextTracking, string> = {
+  tight: "tracking-[-0.02em]",
+  normal: "tracking-normal",
+  wide: "tracking-[0.08em]",
+  wider: "tracking-[0.22em]",
+};
+
+const TRANSFORM: Record<CountdownTextTransform, string> = {
+  none: "normal-case",
+  uppercase: "uppercase",
+  lowercase: "lowercase",
+};
+
+const LEADING: Record<CountdownTextLeading, string> = {
+  tight: "leading-[1.1]",
+  normal: "leading-snug",
+  relaxed: "leading-relaxed",
+};
+
+/** Defaults matching the block's original appearance per slot. */
+export const COUNTDOWN_TEXT_DEFAULTS: Record<CountdownTextSlot, Required<CountdownTextStyle>> = {
+  heading: {
+    size: "md",
+    weight: "normal",
+    family: "serif",
+    tracking: "tight",
+    transform: "none",
+    leading: "tight",
+  },
+  sub: {
+    size: "md",
+    weight: "normal",
+    family: "sans",
+    tracking: "normal",
+    transform: "none",
+    leading: "relaxed",
+  },
+  note: {
+    size: "md",
+    weight: "normal",
+    family: "sans",
+    tracking: "wider",
+    transform: "uppercase",
+    leading: "normal",
+  },
+};
+
+/** Tailwind classes for one countdown text, falling back to the slot default. */
+export function countdownTextClasses(slot: CountdownTextSlot, style?: CountdownTextStyle): string {
+  const d = COUNTDOWN_TEXT_DEFAULTS[slot];
+  const s = style ?? {};
+  return [
+    FAMILY[s.family ?? d.family],
+    SIZE[slot][s.size ?? d.size],
+    WEIGHT[s.weight ?? d.weight],
+    TRACKING[s.tracking ?? d.tracking],
+    TRANSFORM[s.transform ?? d.transform],
+    LEADING[s.leading ?? d.leading],
+  ].join(" ");
+}
+
+export const COUNTDOWN_TEXT_SIZE_OPTIONS: { value: CountdownTextSize; label: string }[] = [
+  { value: "sm", label: "Small" },
+  { value: "md", label: "Medium" },
+  { value: "lg", label: "Large" },
+  { value: "xl", label: "Extra large" },
+];
+
+export const COUNTDOWN_TEXT_WEIGHT_OPTIONS: { value: CountdownTextWeight; label: string }[] = [
+  { value: "normal", label: "Normal" },
+  { value: "medium", label: "Medium" },
+  { value: "semibold", label: "Semibold" },
+  { value: "bold", label: "Bold" },
+  { value: "black", label: "Black" },
+];
+
+export const COUNTDOWN_TEXT_FAMILY_OPTIONS: { value: CountdownTextFamily; label: string }[] = [
+  { value: "serif", label: "Serif (display)" },
+  { value: "sans", label: "Sans (body)" },
+];
+
+export const COUNTDOWN_TEXT_TRACKING_OPTIONS: { value: CountdownTextTracking; label: string }[] = [
+  { value: "tight", label: "Tight" },
+  { value: "normal", label: "Normal" },
+  { value: "wide", label: "Wide" },
+  { value: "wider", label: "Extra wide" },
+];
+
+export const COUNTDOWN_TEXT_TRANSFORM_OPTIONS: { value: CountdownTextTransform; label: string }[] = [
+  { value: "none", label: "As typed" },
+  { value: "uppercase", label: "UPPERCASE" },
+  { value: "lowercase", label: "lowercase" },
+];
+
+export const COUNTDOWN_TEXT_LEADING_OPTIONS: { value: CountdownTextLeading; label: string }[] = [
+  { value: "tight", label: "Tight" },
+  { value: "normal", label: "Normal" },
+  { value: "relaxed", label: "Relaxed" },
+];

package/src/blocks/index.ts

@@ -39,3 +39,5 @@ export {
   CountdownReplacementProvider,
   useCountdownReplacement,
 } from "./countdown-replacement";
+
+export * from "./countdown-typography";

package/src/blocks/types.ts

@@ -1,5 +1,6 @@
 import type { ButtonColors } from "./button-colors";
 import type { CountdownColors, CountdownRounding } from "./countdown-colors";
+import type { CountdownTextStyle } from "./countdown-typography";
 import type { LocalizedString } from "../i18n";
 
 /**
@@ -463,6 +464,11 @@ export type CountdownProps = {
   /** Fine print under the timer. */
   note?: Partial<LocalizedString>;
 
+  /** Typography for the heading, sub text and fine print. */
+  titleType?: CountdownTextStyle;
+  bodyType?: CountdownTextStyle;
+  noteType?: CountdownTextStyle;
+
   /** Deadline as wall-clock time, `YYYY-MM-DDTHH:mm`. */
   targetLocal?: string;
   /** IANA timezone the deadline is expressed in, e.g. `Europe/Stockholm`. */