@bygghammar/cms-platform 0.90.0-m7.9 → 0.91.0

package/src/backoffice/StatusBadge.tsx

@@ -0,0 +1,174 @@
+/**
+ * The backoffice's status badges.
+ *
+ * One vocabulary for every screen that shows whether something is live: pages,
+ * menu items and footer items all read the same. Each badge carries a word as
+ * well as a colour, and an icon shape as well as a hue, so status is never
+ * communicated by colour alone.
+ *
+ * Two different questions get two different badges. {@link PublicationBadge}
+ * answers "can a visitor open this right now", which is what "live" means and
+ * what publication rows decide. {@link PageStatusBadge} shows the editorial
+ * status an editor last set, says so on its face, and never claims a colour it
+ * has not earned — those two answers legitimately disagree while a page is
+ * scheduled or expired.
+ */
+
+import type { ReactNode } from "react";
+import { CalendarClock, CircleDot, CircleSlash, Eye, EyeOff, FileEdit } from "lucide-react";
+import { PAGE_STATUS_DESCRIPTIONS, PAGE_STATUS_LABELS, type PageStatus } from "../cms/page-status";
+import {
+  publicationSummary,
+  type PublicationState,
+  type PublicationTransitionKind,
+} from "../cms/page-publication";
+import {
+  VISIBILITY_STATE_DESCRIPTIONS,
+  VISIBILITY_STATE_LABELS,
+  type VisibilityState,
+} from "../cms/visibility-schedule";
+
+export type StatusTone = "draft" | "live" | "hidden" | "scheduled";
+
+const TONE_CLASS: Record<StatusTone, string> = {
+  draft: "border-ink/25 bg-ink/[0.04] text-ink/70",
+  live: "border-sea/40 bg-ice/60 text-ink",
+  hidden: "border-ink/20 bg-ink/[0.02] text-ink/50",
+  scheduled: "border-brass/50 bg-brass/10 text-ink/80",
+};
+
+const TONE_ICON: Record<StatusTone, (props: { className?: string }) => ReactNode> = {
+  draft: FileEdit,
+  live: CircleDot,
+  hidden: CircleSlash,
+  scheduled: CalendarClock,
+};
+
+const PUBLICATION_TONE: Record<PublicationState, StatusTone> = {
+  draft: "hidden",
+  scheduled: "scheduled",
+  published: "live",
+  ending: "scheduled",
+  expired: "hidden",
+};
+
+const VISIBILITY_TONE: Record<VisibilityState, StatusTone> = {
+  visible: "live",
+  hidden: "hidden",
+  "scheduled-to-publish": "scheduled",
+  "scheduled-to-hide": "scheduled",
+  expired: "hidden",
+  invalid: "draft",
+};
+
+/** A single badge. `title` becomes the tooltip and the accessible name. */
+export function StatusBadge({
+  label,
+  tone,
+  title,
+}: {
+  label: string;
+  tone: StatusTone;
+  title?: string;
+}) {
+  const Icon = TONE_ICON[tone];
+  return (
+    <span
+      title={title}
+      className={[
+        "inline-flex items-center gap-1.5 border px-2 py-0.5 text-[0.65rem] uppercase tracking-[0.14em] whitespace-nowrap",
+        TONE_CLASS[tone],
+      ].join(" ")}
+    >
+      <Icon className="size-3" aria-hidden="true" />
+      {label}
+    </span>
+  );
+}
+
+/**
+ * What a visitor gets, from an already evaluated {@link PublicationState} so
+ * the badge never re-implements the rules.
+ *
+ * `at` is the instant the answer changes next and `transition` is what happens
+ * then. Both are needed: a date on its own said "Scheduled to hide" over the
+ * moment a page swapped to a newer version and stayed exactly where it was.
+ * The wording comes from {@link publicationSummary} so this badge, the pages
+ * list and any host screen say the same thing about the same rows.
+ */
+export function PublicationBadge({
+  state,
+  at,
+  transition,
+  formatAt = defaultFormatAt,
+}: {
+  state: PublicationState;
+  at?: string | null;
+  transition?: PublicationTransitionKind | null;
+  formatAt?: (at: string) => string;
+}) {
+  const when = at ? formatAt(at) : null;
+  const summary = publicationSummary(state, transition);
+  return (
+    <span className="inline-flex flex-wrap items-center gap-x-2 gap-y-1">
+      <StatusBadge
+        label={summary.label}
+        tone={PUBLICATION_TONE[state]}
+        title={summary.description}
+      />
+      {when && summary.showsAt ? (
+        <span className="text-xs text-ink/55 whitespace-nowrap">{when}</span>
+      ) : null}
+    </span>
+  );
+}
+
+function defaultFormatAt(at: string): string {
+  const parsed = new Date(at);
+  if (Number.isNaN(parsed.getTime())) return "";
+  return parsed.toLocaleString(undefined, {
+    dateStyle: "medium",
+    timeStyle: "short",
+  });
+}
+
+/**
+ * The editorial status an editor last set, marked as such.
+ *
+ * It is deliberately quiet and deliberately labelled: `pages.status` is not
+ * public visibility, so this badge gets the same neutral tone either way and
+ * never renders "Published" in the colour that means "visitors can see it".
+ * Show it beside a {@link PublicationBadge}, never instead of one.
+ */
+export function PageStatusBadge({ status }: { status: PageStatus }) {
+  return (
+    <StatusBadge
+      label={`Editorial: ${PAGE_STATUS_LABELS[status]}`}
+      tone="draft"
+      title={PAGE_STATUS_DESCRIPTIONS[status]}
+    />
+  );
+}
+
+/**
+ * Visible / Hidden / Scheduled to publish / Scheduled to hide, from an already
+ * evaluated {@link VisibilityState} so the badge never re-implements the rules.
+ */
+export function VisibilityBadge({ state }: { state: VisibilityState }) {
+  return (
+    <StatusBadge
+      label={VISIBILITY_STATE_LABELS[state]}
+      tone={VISIBILITY_TONE[state]}
+      title={VISIBILITY_STATE_DESCRIPTIONS[state]}
+    />
+  );
+}
+
+/** The eye used next to a visibility toggle, matching the badge vocabulary. */
+export function VisibilityIcon({ visible }: { visible: boolean }) {
+  return visible ? (
+    <Eye className="size-4" aria-hidden="true" />
+  ) : (
+    <EyeOff className="size-4" aria-hidden="true" />
+  );
+}