@bygghammar/cms-platform 0.80.1 → 0.90.0-m7.10

package/src/blocks/components/PriceTableBlock.tsx

@@ -1,4 +1,5 @@
 import { useT } from "../../i18n";
+import { resolveCta, resolvedText } from "../optional-content";
 import { BUTTON_COLOR_CLASS, buttonColorStyle } from "../button-colors";
 import { Reveal } from "../../ui/Reveal";
 import type { PriceTableProps } from "../types";
@@ -15,51 +16,65 @@ const TONE: Record<string, string> = {
  * Replaces the old price image so prices stay editable and readable.
  */
 export function PriceTableBlock({ props }: { props: PriceTableProps }) {
-  const { t } = useT();
+  const { t, locale } = useT();
+  const eyebrow = resolvedText(props.eyebrow, locale);
+  const title = resolvedText(props.title, locale);
+  const lead = resolvedText(props.lead, locale);
+  const note = resolvedText(props.note, locale);
+  const unitLabel = resolvedText(props.unitLabel, locale);
+  // An empty label or link renders nothing rather than a bare button.
+  const cta = resolveCta(
+    { label: props.ctaLabel, href: props.ctaHref },
+    locale,
+  );
   const groups = props.groups ?? [];
   const dark = (props.tone ?? "paper") === "ink";
   const tone = TONE[props.tone ?? "paper"] ?? "bg-paper";
-  const cols = (props.columns ?? 3) === 2 ? "sm:grid-cols-2" : "sm:grid-cols-2 lg:grid-cols-3";
+  const cols =
+    (props.columns ?? 3) === 2
+      ? "sm:grid-cols-2"
+      : "sm:grid-cols-2 lg:grid-cols-3";
   // Centered by default — applies on every breakpoint.
   const centered = (props.align ?? "center") === "center";
   const headBox = centered ? "mx-auto max-w-2xl text-center" : "max-w-2xl";
-  const footBox = centered
-    ? "justify-center text-center"
-    : "";
+  const footBox = centered ? "justify-center text-center" : "";
 
   if (groups.length === 0) return null;
 
   return (
-    <section id={props.anchor || undefined} className={`${tone} py-16 md:py-24`}>
+    <section
+      id={props.anchor || undefined}
+      className={`${tone} py-16 md:py-24`}
+    >
       <div className="container-editorial">
-        {props.eyebrow || props.title || props.lead ? (
+        {eyebrow || title || lead ? (
           <Reveal>
             <div className={headBox}>
-              {props.eyebrow ? (
+              {eyebrow ? (
                 <span
                   className={`text-[0.7rem] uppercase tracking-[0.22em] ${
                     dark ? "text-paper/70" : "text-ink/60"
                   }`}
                 >
-                  {t(props.eyebrow)}
+                  {eyebrow}
                 </span>
               ) : null}
-              {props.title ? (
+              {title ? (
                 <h2
                   className={`mt-3 font-serif text-[clamp(1.8rem,3.6vw,2.9rem)] leading-[1.06] ${
                     dark ? "text-paper" : "text-ink"
                   }`}
                 >
-                  {t(props.title)}
+                  {title}
                 </h2>
               ) : null}
-              {props.lead ? (
+              {lead ? (
                 <p
                   className={`mt-4 text-base leading-relaxed whitespace-pre-line ${
                     dark ? "text-paper/80" : "text-ink/70"
                   }`}
                 >
-                  {t(props.lead)}
+                  {lead}
                 </p>
               ) : null}
             </div>
@@ -68,100 +83,119 @@ export function PriceTableBlock({ props }: { props: PriceTableProps }) {
 
         <Reveal>
           <div className={`mt-10 grid grid-cols-1 ${cols} gap-5`}>
-            {groups.map((g, gi) => (
-              <div
-                key={g.id ?? gi}
-                className={`flex h-full flex-col border ${
-                  g.highlight
-                    ? "border-sea/60 bg-white shadow-[0_18px_40px_-30px_rgb(0_0_0/0.45)]"
-                    : dark
-                      ? "border-paper/15 bg-paper/5"
-                      : "border-ink/10 bg-white"
-                }`}
-              >
+            {groups.map((g, gi) => {
+              const caption = resolvedText(g.caption, locale);
+              return (
                 <div
-                  className={`flex items-baseline justify-between gap-3 px-5 py-4 ${
-                    g.highlight ? "bg-sea text-white" : dark ? "bg-paper/10" : "bg-ink/[0.04]"
+                  key={g.id ?? gi}
+                  className={`flex h-full flex-col border ${
+                    g.highlight
+                      ? "border-sea/60 bg-white shadow-[0_18px_40px_-30px_rgb(0_0_0/0.45)]"
+                      : dark
+                        ? "border-paper/15 bg-paper/5"
+                        : "border-ink/10 bg-white"
                   }`}
                 >
-                  <span
-                    className={`font-serif text-lg md:text-xl ${
-                      g.highlight ? "text-white" : dark ? "text-paper" : "text-ink"
+                  <div
+                    className={`flex items-baseline justify-between gap-3 px-5 py-4 ${
+                      g.highlight
+                        ? "bg-sea text-white"
+                        : dark
+                          ? "bg-paper/10"
+                          : "bg-ink/[0.04]"
                     }`}
                   >
-                    {t(g.label)}
-                  </span>
-                  {props.unitLabel ? (
                     <span
-                      className={`text-[0.6rem] uppercase tracking-[0.2em] ${
-                        g.highlight ? "text-white/80" : dark ? "text-paper/60" : "text-ink/50"
+                      className={`font-serif text-lg md:text-xl ${
+                        g.highlight
+                          ? "text-white"
+                          : dark
+                            ? "text-paper"
+                            : "text-ink"
                       }`}
                     >
-                      {t(props.unitLabel)}
+                      {t(g.label)}
                     </span>
-                  ) : null}
-                </div>
-
-                <ul className={`flex-1 divide-y ${dark ? "divide-paper/12" : "divide-ink/8"}`}>
-                  {(g.rows ?? []).filter((r) => !r.hidden).map((r, ri) => (
-                    <li
-                      key={r.id ?? ri}
-                      className="flex items-baseline justify-between gap-4 px-5 py-3.5"
-                    >
-                      <span
-                        className={`text-[0.7rem] uppercase tracking-[0.18em] ${
-                          dark ? "text-paper/65" : "text-ink/55"
-                        }`}
-                      >
-                        {t(r.label)}
-                      </span>
+                    {unitLabel ? (
                       <span
-                        className={`font-serif text-xl tabular-nums ${
-                          dark ? "text-paper" : "text-ink"
+                        className={`text-[0.6rem] uppercase tracking-[0.2em] ${
+                          g.highlight
+                            ? "text-white/80"
+                            : dark
+                              ? "text-paper/60"
+                              : "text-ink/50"
                         }`}
                       >
-                        {t(r.price)}
+                        {unitLabel}
                       </span>
-                    </li>
-                  ))}
-                </ul>
+                    ) : null}
+                  </div>
 
-                {g.caption ? (
-                  <p
-                    className={`px-5 pb-5 pt-3 text-xs leading-relaxed ${
-                      dark ? "text-paper/60" : "text-ink/55"
-                    }`}
+                  <ul
+                    className={`flex-1 divide-y ${dark ? "divide-paper/12" : "divide-ink/8"}`}
                   >
-                    {t(g.caption)}
-                  </p>
-                ) : null}
-              </div>
-            ))}
+                    {(g.rows ?? [])
+                      .filter((r) => !r.hidden)
+                      .map((r, ri) => (
+                        <li
+                          key={r.id ?? ri}
+                          className="flex items-baseline justify-between gap-4 px-5 py-3.5"
+                        >
+                          <span
+                            className={`text-[0.7rem] uppercase tracking-[0.18em] ${
+                              dark ? "text-paper/65" : "text-ink/55"
+                            }`}
+                          >
+                            {t(r.label)}
+                          </span>
+                          <span
+                            className={`font-serif text-xl tabular-nums ${
+                              dark ? "text-paper" : "text-ink"
+                            }`}
+                          >
+                            {t(r.price)}
+                          </span>
+                        </li>
+                      ))}
+                  </ul>
+
+                  {caption ? (
+                    <p
+                      className={`px-5 pb-5 pt-3 text-xs leading-relaxed ${
+                        dark ? "text-paper/60" : "text-ink/55"
+                      }`}
+                    >
+                      {caption}
+                    </p>
+                  ) : null}
+                </div>
+              );
+            })}
           </div>
         </Reveal>
 
-        <div className={`mt-8 flex flex-wrap items-center gap-5 ${footBox}`}>
-          {props.ctaLabel && props.ctaHref ? (
-            <a
-              href={props.ctaHref}
-              style={buttonColorStyle(props.ctaColors)}
-              className={`inline-flex items-center px-6 py-3 text-[0.7rem] uppercase tracking-[0.22em] ${BUTTON_COLOR_CLASS}`}
-            >
-              {t(props.ctaLabel)}
-            </a>
-          ) : null}
-          {props.note ? (
-            <p
-              className={`max-w-2xl text-sm leading-relaxed whitespace-pre-line ${
-                centered ? "mx-auto" : ""
-              } ${
-                dark ? "text-paper/70" : "text-ink/65"
-              }`}
-            >
-              {t(props.note)}
-            </p>
-          ) : null}
-        </div>
+        {cta || note ? (
+          <div className={`mt-8 flex flex-wrap items-center gap-5 ${footBox}`}>
+            {cta ? (
+              <a
+                href={cta.href}
+                style={buttonColorStyle(props.ctaColors)}
+                className={`inline-flex items-center px-6 py-3 text-[0.7rem] uppercase tracking-[0.22em] ${BUTTON_COLOR_CLASS}`}
+              >
+                {cta.label}
+              </a>
+            ) : null}
+            {note ? (
+              <p
+                className={`max-w-2xl text-sm leading-relaxed whitespace-pre-line ${
+                  centered ? "mx-auto" : ""
+                } ${dark ? "text-paper/70" : "text-ink/65"}`}
+              >
+                {note}
+              </p>
+            ) : null}
+          </div>
+        ) : null}
       </div>
     </section>
   );

package/src/blocks/components/RichTextBlock.tsx

@@ -1,6 +1,6 @@
 import { useT } from "../../i18n";
 import type { LocalizedString } from "../../i18n";
-import { Reveal } from "../../ui/Reveal";
+import { Reveal, normalizeRevealMode } from "../../ui/Reveal";
 import type { RichTextProps } from "../types";
 import { sanitizeHtml } from "../../html/sanitize-html";
 
@@ -25,14 +25,35 @@ const PADDING: Record<string, string> = {
   spacious: "py-28 md:py-40",
 };
 
+/**
+ * Keeps authored markup inside the column, whatever gets pasted in.
+ *
+ * The host site owns `rte-content` and its typography; these are the few rules
+ * that are not a matter of taste. A pasted URL with no spaces in it, a wide
+ * table or an oversized image would otherwise push the whole page sideways —
+ * on a phone, every section of it, not just this one.
+ */
+const CONTAINMENT = [
+  "break-words",
+  "[&_img]:max-w-full [&_img]:h-auto",
+  "[&_pre]:max-w-full [&_pre]:overflow-x-auto",
+  // A wide table scrolls on its own rather than widening the page.
+  "[&_table]:block [&_table]:max-w-full [&_table]:overflow-x-auto",
+].join(" ");
+
 /**
  * Free-form rich text authored in the backoffice WYSIWYG editor.
- * The stored HTML is sanitized on every render (never trusted as-is).
+ *
+ * The stored HTML is sanitized on every render (never trusted as-is), and
+ * there is no limit on how much of it there can be — long documents are
+ * expected. The Page Builder preview renders through this same component, so
+ * what an editor sees is what gets published.
  */
 export function RichTextBlock({ props }: { props: RichTextProps }) {
   const { t } = useT();
   const tone = props.tone ?? "white";
   const html = sanitizeHtml(t(props.html as LocalizedString));
+  const reveal = normalizeRevealMode(props.reveal);
 
   return (
     <section
@@ -47,7 +68,7 @@ export function RichTextBlock({ props }: { props: RichTextProps }) {
           ].join(" ")}
         >
           {props.eyebrow || props.title ? (
-            <Reveal>
+            <Reveal mode={reveal}>
               {props.eyebrow ? (
                 <span className="text-[0.7rem] uppercase tracking-[0.22em] opacity-70">
                   {t(props.eyebrow as LocalizedString)}
@@ -61,10 +82,11 @@ export function RichTextBlock({ props }: { props: RichTextProps }) {
             </Reveal>
           ) : null}
 
-          <Reveal>
+          <Reveal mode={reveal}>
             <div
               className={[
                 "rte-content",
+                CONTAINMENT,
                 tone === "ink" ? "rte-invert" : "",
                 props.columns === 2 ? "md:columns-2 md:gap-12" : "",
                 props.dropCap ? "rte-dropcap" : "",

package/src/blocks/index.ts

@@ -41,3 +41,11 @@ export {
 } from "./countdown-replacement";
 
 export * from "./countdown-typography";
+export {
+  hasAnyText,
+  hasText,
+  resolveCta,
+  resolvedHref,
+  resolvedText,
+  type ResolvedCta,
+} from "./optional-content";

package/src/blocks/optional-content.ts

@@ -0,0 +1,82 @@
+/**
+ * Which optional block content is real enough to render.
+ *
+ * CMS fields are rarely *absent*. They are present and empty: a localized
+ * string nobody filled in is `{ sv: "", en: "" }`, which is a perfectly truthy
+ * object. So `props.title && <h1>{t(props.title)}</h1>` renders an empty
+ * heading, and a call to action guarded with `label || href` renders a button
+ * containing nothing but its arrow — a bordered rectangle the visitor can click
+ * to go nowhere.
+ *
+ * Every optional element therefore has to be decided on the *resolved, trimmed*
+ * value for the locale actually being rendered, not on the shape of the stored
+ * object. These helpers are that decision, in one place, so block components
+ * and the Page Builder preview cannot disagree about it.
+ */
+import { t, type Locale, type LocalizedString } from "../i18n";
+
+/** Resolved, trimmed text for a locale. `""` when there is nothing to show. */
+export function resolvedText(
+  value: Partial<LocalizedString> | string | undefined | null,
+  locale: Locale,
+): string {
+  return t(value as LocalizedString | string | undefined | null, locale).trim();
+}
+
+/**
+ * True when a localized field has visible text in this locale.
+ *
+ * Locale is part of the question: the resolver falls back to the default locale
+ * and the generated translation map, so a field filled in only in the source
+ * language still has text in every locale — while one filled in nowhere has
+ * text in none.
+ */
+export function hasText(
+  value: Partial<LocalizedString> | string | undefined | null,
+  locale: Locale,
+): boolean {
+  return resolvedText(value, locale) !== "";
+}
+
+/**
+ * True when a localized field is filled in for *any* locale.
+ *
+ * This is the editor's question rather than the visitor's: the inspector edits
+ * every locale at once, so it wants to know whether the field has been used at
+ * all, not whether one particular locale resolves.
+ */
+export function hasAnyText(
+  value: Partial<LocalizedString> | string | undefined | null,
+): boolean {
+  if (typeof value === "string") return value.trim() !== "";
+  if (!value || typeof value !== "object") return false;
+  return Object.values(value).some((v) => typeof v === "string" && v.trim() !== "");
+}
+
+/** A link is usable when something survives trimming. `""` when it is not. */
+export function resolvedHref(href: string | undefined | null): string {
+  return typeof href === "string" ? href.trim() : "";
+}
+
+/** A call to action with both halves present, ready to render. */
+export type ResolvedCta = { label: string; href: string };
+
+/**
+ * Resolve a call to action, or `null` when it must not be rendered.
+ *
+ * Both halves are required. A label with no link is not a button, it is text
+ * pretending to be one; a link with no label is an empty target. Either way the
+ * whole element is dropped — not emptied, dropped — so no border, no arrow, no
+ * anchor and no gap is left behind.
+ */
+export function resolveCta(
+  cta: { label?: Partial<LocalizedString>; href?: string } | undefined | null,
+  locale: Locale,
+): ResolvedCta | null {
+  if (!cta) return null;
+  const label = resolvedText(cta.label, locale);
+  if (!label) return null;
+  const href = resolvedHref(cta.href);
+  if (!href) return null;
+  return { label, href };
+}

package/src/blocks/registry.tsx

@@ -134,6 +134,7 @@ export const SHARED_BLOCK_DEFS: Record<string, BlockDef> = {
       padding: "normal",
       columns: 1,
       dropCap: false,
+      reveal: "fade",
     } satisfies RichTextProps as unknown as BlockProps,
     hasInlineContent: true,
   },

package/src/blocks/types.ts

@@ -2,6 +2,7 @@ import type { ButtonColors } from "./button-colors";
 import type { CountdownColors, CountdownRounding } from "./countdown-colors";
 import type { CountdownTextStyle } from "./countdown-typography";
 import type { LocalizedString } from "../i18n";
+import type { RevealMode } from "../ui/Reveal";
 
 /**
  * JSON-compatible value. Declared here so the package never depends on a
@@ -340,6 +341,11 @@ export type RichTextProps = {
   padding?: "none" | "compact" | "normal" | "spacious";
   columns?: 1 | 2;
   dropCap?: boolean;
+  /**
+   * How the block appears on screen. Absent means `fade`, which is what every
+   * block did before the setting existed.
+   */
+  reveal?: RevealMode;
   anchor?: string;
 };