@conduction/docusaurus-preset 3.39.0 → 3.41.0

package/src/components/PaintByTokens/__tests__/engine.test.js

@@ -0,0 +1,150 @@
+/**
+ * engine.test.js — the paint-by-tokens rules.
+ *
+ * The property that matters most is the dullest: every picture must be
+ * exactly ROWS × COLS cells of tokens that exist. A picture with a
+ * short row or a stray digit renders as a hole in the grid and a cell
+ * nobody can ever fill, which ends the run through no fault of the
+ * player.
+ */
+
+'use strict';
+
+const test = require('node:test');
+const assert = require('node:assert/strict');
+
+const {
+  createGame, paint, select, step, timeLeft, remaining, summarise,
+  TOKENS, PICTURES, COLS, ROWS, DEFAULTS,
+} = require('../engine.js');
+
+/** Fill the current picture correctly, selecting each token as needed. */
+function finishPicture(state, now = 0) {
+  let s = state;
+  for (let i = 0; i < s.cells.length; i++) {
+    if (s.cells[i].painted) continue;
+    s = select(s, s.cells[i].token);
+    s = paint(s, i, now);
+    if (s.over) break;
+    /* The picture is replaced the moment it is finished, so stop
+       walking this one as soon as the cell count resets. */
+    if (remaining(s) === COLS * ROWS) break;
+  }
+  return s;
+}
+
+test('every picture is a full grid of tokens that exist', () => {
+  for (const picture of PICTURES) {
+    assert.equal(picture.rows.length, ROWS, `${picture.name}: wrong number of rows`);
+    for (const row of picture.rows) {
+      assert.equal(row.length, COLS, `${picture.name}: a row is not ${COLS} cells`);
+      for (const ch of row) {
+        const token = Number(ch);
+        assert.ok(Number.isInteger(token), `${picture.name}: "${ch}" is not a token`);
+        assert.ok(token >= 0 && token < TOKENS.length, `${picture.name}: token ${token} does not exist`);
+      }
+    }
+  }
+});
+
+test('a game starts with a full picture, a clock and nothing painted', () => {
+  const s = createGame({seed: 1, now: 0});
+  assert.equal(s.cells.length, COLS * ROWS);
+  assert.equal(remaining(s), COLS * ROWS);
+  assert.equal(timeLeft(s, 0), DEFAULTS.startMs);
+  assert.equal(s.over, false);
+});
+
+test('painting a cell with the token it asks for fills it and scores', () => {
+  let s = createGame({seed: 2, now: 0});
+  s = select(s, s.cells[0].token);
+  s = paint(s, 0, 10);
+  assert.equal(s.cells[0].painted, true);
+  assert.equal(s.score, DEFAULTS.pointsPerCell);
+  assert.equal(s.last.result, 'painted');
+});
+
+test('the wrong token costs time, leaves the cell empty, and says what was wanted', () => {
+  let s = createGame({seed: 3, now: 0});
+  const wanted = s.cells[0].token;
+  const wrong = (wanted + 1) % TOKENS.length;
+  const deadline = s.endsAt;
+  s = select(s, wrong);
+  s = paint(s, 0, 20);
+  assert.equal(s.cells[0].painted, false);
+  assert.equal(s.endsAt, deadline - DEFAULTS.penaltyMs);
+  assert.equal(s.wrong, 1);
+  assert.equal(s.last.wanted, wanted);
+  assert.equal(s.last.used, wrong);
+});
+
+test('painting over a finished cell is a slip, not a mistake', () => {
+  let s = createGame({seed: 4, now: 0});
+  s = select(s, s.cells[0].token);
+  s = paint(s, 0, 10);
+  const deadline = s.endsAt;
+  const score = s.score;
+  s = paint(s, 0, 20);
+  assert.equal(s.endsAt, deadline, 'a second click on a filled cell cost time');
+  assert.equal(s.score, score, 'a second click on a filled cell scored again');
+});
+
+test('an unknown token cannot be selected, and an unknown cell cannot be painted', () => {
+  const s = createGame({seed: 5, now: 0});
+  assert.equal(select(s, 99).selected, s.selected);
+  assert.equal(select(s, -1).selected, s.selected);
+  assert.equal(paint(s, 9999, 10), s);
+});
+
+test('finishing a picture scores, buys time and deals the next one', () => {
+  let s = createGame({seed: 6, now: 0});
+  const first = s.picture;
+  const deadline = s.endsAt;
+  s = finishPicture(s, 0);
+  assert.equal(s.finished, 1);
+  assert.ok(s.score >= DEFAULTS.pointsPerPicture);
+  assert.ok(s.endsAt > deadline, 'finishing a picture bought no time');
+  assert.equal(remaining(s), COLS * ROWS, 'the next picture started part-painted');
+  assert.notEqual(s.picture, first, 'the same picture was dealt twice in a row');
+});
+
+test('every picture in the rotation can actually be finished', () => {
+  let s = createGame({seed: 7, now: 0});
+  const seen = new Set();
+  for (let i = 0; i < PICTURES.length + 1; i++) {
+    seen.add(s.picture);
+    s = finishPicture(s, 0);
+    assert.equal(s.over, false, `run ended while finishing picture ${i}`);
+  }
+  assert.equal(seen.size, PICTURES.length, 'the rotation does not reach every picture');
+  assert.equal(s.finished, PICTURES.length + 1);
+});
+
+test('the clock ends the run, and nothing paints afterwards', () => {
+  let s = createGame({seed: 8, now: 0});
+  s = step(s, DEFAULTS.startMs + 1);
+  assert.equal(s.over, true);
+  const frozen = paint(select(s, s.cells[0].token), 0, DEFAULTS.startMs + 5);
+  assert.equal(frozen.score, s.score);
+});
+
+test('a penalty that empties the clock ends the run there and then', () => {
+  let s = createGame({seed: 9, now: 0, config: {startMs: 2000}});
+  const wrong = (s.cells[0].token + 1) % TOKENS.length;
+  s = paint(select(s, wrong), 0, 100);
+  assert.equal(s.over, true);
+  assert.equal(timeLeft(s, 100), 0);
+});
+
+test('the same seed opens on the same picture, a different one need not', () => {
+  const first = (seed) => createGame({seed, now: 0}).picture;
+  assert.equal(first(21), first(21));
+  const spread = new Set([1, 2, 3, 4, 5, 6, 7, 8].map(first));
+  assert.ok(spread.size > 1, 'every seed opens on the same picture');
+});
+
+test('the summary reads as a sentence in both locales', () => {
+  const s = {finished: 3, wrong: 2};
+  assert.match(summarise(s, 'en'), /3 themes finished · 2 wrong fills/);
+  assert.match(summarise(s, 'nl'), /3 thema's af · 2 keer misgetikt/);
+});

package/src/components/PaintByTokens/engine.js

@@ -0,0 +1,194 @@
+/**
+ * Paint by tokens — the rules, with no DOM and no clock of its own.
+ *
+ * Thematiq's game. Paint by numbers, except the numbers are the design
+ * tokens a theme is made of: surface, accent, ink, muted, line. Pick a
+ * token, fill the cells that ask for it, finish the picture before the
+ * clock runs out.
+ *
+ * It is a theming game rather than a colouring game, and the
+ * difference is that the swatch is never the answer: the cell says
+ * which token it wants, and a token's colour is whatever the active
+ * theme says it is. Painting by eye is exactly the habit the app
+ * exists to break.
+ *
+ * Time and randomness are injected. The component owns the clock.
+ */
+
+/* The five token roles, in the order the palette shows them. Their
+   colours belong to the theme, not to this file. */
+export const TOKENS = ['surface', 'accent', 'ink', 'muted', 'line'];
+
+export const COLS = 8;
+export const ROWS = 6;
+
+/* Each picture is a row-per-string map of token indexes. They are
+   deliberately readable as pictures in the source, because a picture
+   nobody can see while editing is a picture nobody notices breaking. */
+export const PICTURES = [
+  {
+    name: 'hex',
+    rows: [
+      '00111100',
+      '01444410',
+      '14222241',
+      '14222241',
+      '01444410',
+      '00111100',
+    ],
+  },
+  {
+    name: 'stack',
+    rows: [
+      '00000000',
+      '11111111',
+      '13333331',
+      '11111111',
+      '12222221',
+      '11111111',
+    ],
+  },
+  {
+    name: 'record',
+    rows: [
+      '01111110',
+      '01333310',
+      '01222210',
+      '01222210',
+      '01333310',
+      '01111110',
+    ],
+  },
+  {
+    name: 'flow',
+    rows: [
+      '40000004',
+      '04000040',
+      '00422400',
+      '00422400',
+      '04000040',
+      '40000004',
+    ],
+  },
+];
+
+export const DEFAULTS = {
+  startMs: 45000,
+  bonusMs: 20000,
+  /* A wrong fill costs time rather than a life: the mistake in theming
+     is picking by eye, and the cost of that is rework, not disaster. */
+  penaltyMs: 3000,
+  pointsPerCell: 2,
+  pointsPerPicture: 30,
+};
+
+function mulberry32(seed) {
+  let a = seed >>> 0;
+  return function random() {
+    a |= 0; a = (a + 0x6D2B79F5) | 0;
+    let t = Math.imul(a ^ (a >>> 15), 1 | a);
+    t = (t + Math.imul(t ^ (t >>> 7), 61 | t)) ^ t;
+    return ((t ^ (t >>> 14)) >>> 0) / 4294967296;
+  };
+}
+
+function loadPicture(state, index) {
+  const picture = PICTURES[index % PICTURES.length];
+  const cells = [];
+  for (let r = 0; r < ROWS; r++) {
+    for (let c = 0; c < COLS; c++) {
+      const token = Number(picture.rows[r][c]);
+      cells.push({token, painted: false});
+    }
+  }
+  return {...state, picture: picture.name, cells, pictureIndex: index};
+}
+
+export function createGame({seed = Date.now(), now = 0, config = {}} = {}) {
+  const cfg = {...DEFAULTS, ...config};
+  const random = mulberry32(seed);
+  const base = {
+    cfg,
+    random,
+    selected: 0,
+    score: 0,
+    finished: 0,
+    wrong: 0,
+    endsAt: now + cfg.startMs,
+    last: null,
+    over: false,
+  };
+  return loadPicture(base, Math.floor(random() * PICTURES.length));
+}
+
+export function timeLeft(state, now) {
+  return Math.max(0, state.endsAt - now);
+}
+
+export function select(state, token) {
+  if (state.over) return state;
+  if (!Number.isInteger(token) || token < 0 || token >= TOKENS.length) return state;
+  return {...state, selected: token};
+}
+
+export function step(state, now) {
+  if (state.over) return state;
+  if (timeLeft(state, now) > 0) return state;
+  return {...state, over: true, last: {result: 'timeout', at: now}};
+}
+
+/** How many cells of the current picture are still empty. */
+export function remaining(state) {
+  return state.cells.filter((c) => !c.painted).length;
+}
+
+/**
+ * Fill one cell with the selected token.
+ *
+ * A cell that already carries paint is left alone and costs nothing:
+ * clicking twice is a slip, not a mistake about the theme.
+ */
+export function paint(state, index, now) {
+  if (state.over) return state;
+  const cell = state.cells[index];
+  if (!cell || cell.painted) return state;
+
+  if (cell.token !== state.selected) {
+    const out = {
+      ...state,
+      endsAt: state.endsAt - state.cfg.penaltyMs,
+      wrong: state.wrong + 1,
+      last: {result: 'wrong', wanted: cell.token, used: state.selected, at: now},
+    };
+    return timeLeft(out, now) > 0 ? out : {...out, over: true};
+  }
+
+  const cells = [...state.cells];
+  cells[index] = {...cell, painted: true};
+  const next = {
+    ...state,
+    cells,
+    score: state.score + state.cfg.pointsPerCell,
+    last: {result: 'painted', at: now},
+  };
+
+  if (cells.some((c) => !c.painted)) return next;
+
+  /* Picture finished: score it, buy time, and deal the next one. */
+  const done = {
+    ...next,
+    score: next.score + next.cfg.pointsPerPicture,
+    finished: next.finished + 1,
+    endsAt: next.endsAt + next.cfg.bonusMs,
+    last: {result: 'finished', at: now},
+  };
+  return loadPicture(done, done.pictureIndex + 1);
+}
+
+/** The line that goes on the game-over card and into the post. */
+export function summarise(state, locale = 'en') {
+  const n = (v) => Number(v || 0).toLocaleString(locale);
+  return locale === 'nl'
+    ? `${n(state.finished)} thema's af · ${n(state.wrong)} keer misgetikt`
+    : `${n(state.finished)} themes finished · ${n(state.wrong)} wrong fills`;
+}

package/src/components/Redaction/Redaction.jsx

@@ -0,0 +1,259 @@
+/**
+ * <Redaction />
+ *
+ * Filinq's mini-game. A document is going out. Black out everything in
+ * it that may not be published, then publish it, before the clock does
+ * that for you.
+ *
+ * Both mistakes cost, and they cost differently: leaving a name or a
+ * citizen number visible is a breach and costs a life, blacking out
+ * half the page costs points. A game that punished both the same would
+ * teach people to redact everything, which is the other way of failing
+ * at this.
+ *
+ * The rules live in ./engine.js with no DOM and no clock.
+ *
+ * Usage on a product page:
+ *
+ *   <Redaction />
+ *
+ * Fires the shared `connext:gameend` event on game over, and listens
+ * for `connext:gamereplay`.
+ *
+ * Accessibility: every word is a toggle button that says whether it is
+ * blacked out, so the document can be read and redacted from the
+ * keyboard, and the countdown is announced rather than only drawn.
+ */
+
+import React, {useCallback, useEffect, useRef, useState} from 'react';
+import {translate} from '@docusaurus/Translate';
+import useDocusaurusContext from '@docusaurus/useDocusaurusContext';
+import {createGame, black, publish, step, remaining, summarise} from './engine';
+import styles from './Redaction.module.css';
+
+const GAME_ID = 'redaction';
+const TICK_MS = 100;
+
+/* The words of every document. Kept here rather than in the engine so
+   the rules stay free of copy, and so each phrase is a translatable
+   string in its own right. */
+function tokenText(key) {
+  switch (key) {
+    case 'permitIntro':
+      return translate({id: 'preset.redaction.token.permitIntro', message: 'Permit granted to', description: 'Redaction document text'});
+    case 'permitMiddle':
+      return translate({id: 'preset.redaction.token.permitMiddle', message: 'for a dormer at', description: 'Redaction document text'});
+    case 'permitTail':
+      return translate({id: 'preset.redaction.token.permitTail', message: 'applicant reference', description: 'Redaction document text'});
+    case 'permitEnd':
+      return translate({id: 'preset.redaction.token.permitEnd', message: 'Objections within six weeks.', description: 'Redaction document text'});
+    case 'invoiceIntro':
+      return translate({id: 'preset.redaction.token.invoiceIntro', message: 'Invoice for', description: 'Redaction document text'});
+    case 'invoiceMiddle':
+      return translate({id: 'preset.redaction.token.invoiceMiddle', message: 'payable to', description: 'Redaction document text'});
+    case 'invoiceTail':
+      return translate({id: 'preset.redaction.token.invoiceTail', message: 'total', description: 'Redaction document text'});
+    case 'invoiceEnd':
+      return translate({id: 'preset.redaction.token.invoiceEnd', message: 'Questions to', description: 'Redaction document text'});
+    case 'objectionIntro':
+      return translate({id: 'preset.redaction.token.objectionIntro', message: 'Objection filed by', description: 'Redaction document text'});
+    case 'objectionMiddle':
+      return translate({id: 'preset.redaction.token.objectionMiddle', message: 'born', description: 'Redaction document text'});
+    case 'objectionTail':
+      return translate({id: 'preset.redaction.token.objectionTail', message: 'against decision', description: 'Redaction document text'});
+    case 'objectionEnd':
+      return translate({id: 'preset.redaction.token.objectionEnd', message: 'Hearing on the fourteenth.', description: 'Redaction document text'});
+    case 'reportIntro':
+      return translate({id: 'preset.redaction.token.reportIntro', message: 'Inspection report from', description: 'Redaction document text'});
+    case 'reportMiddle':
+      return translate({id: 'preset.redaction.token.reportMiddle', message: 'contact on', description: 'Redaction document text'});
+    case 'reportTail':
+      return translate({id: 'preset.redaction.token.reportTail', message: 'inspector', description: 'Redaction document text'});
+    case 'reportEnd':
+      return translate({id: 'preset.redaction.token.reportEnd', message: 'Published under', description: 'Redaction document text'});
+    case 'name':
+      return translate({id: 'preset.redaction.token.name', message: 'J. de Vries', description: 'Redaction document text: a personal name, which must be redacted'});
+    case 'address':
+      return translate({id: 'preset.redaction.token.address', message: 'Keizersgracht 12', description: 'Redaction document text: an address, which must be redacted'});
+    case 'bsn':
+      return translate({id: 'preset.redaction.token.bsn', message: 'BSN 1234 56 789', description: 'Redaction document text: a citizen service number, which must be redacted'});
+    case 'iban':
+      return translate({id: 'preset.redaction.token.iban', message: 'NL91 ABNA 0417 1643 00', description: 'Redaction document text: a bank account, which must be redacted'});
+    case 'email':
+      return translate({id: 'preset.redaction.token.email', message: 'j.devries@example.nl', description: 'Redaction document text: an email address, which must be redacted'});
+    case 'birthdate':
+      return translate({id: 'preset.redaction.token.birthdate', message: '4 March 1971', description: 'Redaction document text: a date of birth, which must be redacted'});
+    case 'phone':
+      return translate({id: 'preset.redaction.token.phone', message: '06 1234 5678', description: 'Redaction document text: a phone number, which must be redacted'});
+    case 'company':
+      return translate({id: 'preset.redaction.token.company', message: 'Bakkerij Janssen BV', description: 'Redaction document text: a company name, which may be published'});
+    case 'amount':
+      return translate({id: 'preset.redaction.token.amount', message: '1,240 euro', description: 'Redaction document text: an amount, which may be published'});
+    case 'caseNumber':
+      return translate({id: 'preset.redaction.token.caseNumber', message: 'case 2026-118', description: 'Redaction document text: a case number, which may be published'});
+    case 'department':
+      return translate({id: 'preset.redaction.token.department', message: 'the building department', description: 'Redaction document text: a department, which may be published'});
+    default:
+      return translate({id: 'preset.redaction.token.policy', message: 'the open government act', description: 'Redaction document text: a law, which may be published'});
+  }
+}
+
+export default function Redaction({className}) {
+  const {i18n} = useDocusaurusContext();
+  const locale = (i18n && i18n.currentLocale) || 'en';
+
+  const [game, setGame] = useState(null);
+  const [left, setLeft] = useState(1);
+  const gameRef = useRef(null);
+  const startedAtRef = useRef(0);
+  const endedRef = useRef(false);
+
+  const running = Boolean(game) && !game.over;
+  const now = () => (typeof performance !== 'undefined' ? performance.now() : Date.now()) - startedAtRef.current;
+
+  const begin = useCallback(() => {
+    endedRef.current = false;
+    startedAtRef.current = (typeof performance !== 'undefined' ? performance.now() : Date.now());
+    const fresh = createGame({seed: Math.floor(Math.random() * 2 ** 31), now: 0});
+    gameRef.current = fresh;
+    setGame(fresh);
+    setLeft(1);
+  }, []);
+
+  useEffect(() => {
+    if (!running) return undefined;
+    const id = setInterval(() => {
+      const t = now();
+      const next = step(gameRef.current, t);
+      gameRef.current = next;
+      setGame(next);
+      setLeft(remaining(next, t));
+    }, TICK_MS);
+    return () => clearInterval(id);
+  }, [running]);
+
+  useEffect(() => {
+    if (!game || !game.over || endedRef.current) return;
+    endedRef.current = true;
+    if (typeof window === 'undefined') return;
+    window.dispatchEvent(new CustomEvent('connext:gameend', {
+      detail: {
+        id: GAME_ID,
+        won: false,
+        score: game.score,
+        summary: summarise(game, locale),
+        title: translate({id: 'preset.redaction.over.title', message: 'Three of those went out with a name still on them.', description: 'Headline on the game-over dialog after a redaction run'}),
+        subtitle: translate({id: 'preset.redaction.over.subtitle', message: 'Which is the part that makes the news, not the paperwork.', description: 'Subtitle on the game-over dialog after a redaction run'}),
+      },
+    }));
+  }, [game, locale]);
+
+  useEffect(() => {
+    if (typeof window === 'undefined') return undefined;
+    const onReplay = (e) => { if (e.detail && e.detail.id === GAME_ID) begin(); };
+    window.addEventListener('connext:gamereplay', onReplay);
+    return () => window.removeEventListener('connext:gamereplay', onReplay);
+  }, [begin]);
+
+  const toggle = useCallback((index) => {
+    if (!gameRef.current || gameRef.current.over) return;
+    const next = black(gameRef.current, index);
+    gameRef.current = next;
+    setGame(next);
+  }, []);
+
+  const send = useCallback(() => {
+    if (!gameRef.current || gameRef.current.over) return;
+    const t = now();
+    const next = publish(gameRef.current, t);
+    gameRef.current = next;
+    setGame(next);
+    setLeft(remaining(next, t));
+  }, []);
+
+  const doc = game ? game.doc : null;
+  const last = game ? game.last : null;
+  const pct = Math.round(left * 100);
+
+  return (
+    <section className={[styles.rd, className].filter(Boolean).join(' ')} aria-labelledby="redaction-title">
+      <header className={styles.head}>
+        <div>
+          <p className={styles.eyebrow}>
+            {translate({id: 'preset.redaction.eyebrow', message: 'Mini-game', description: 'Eyebrow above the redaction game on a product page'})}
+          </p>
+          <h3 className={styles.title} id="redaction-title">
+            {translate({id: 'preset.redaction.title', message: 'Black it out', description: 'Name of the Filinq mini-game'})}
+          </h3>
+          <p className={styles.lede}>
+            {translate({id: 'preset.redaction.lede', message: 'This document is going out. Black out what may not be published, then send it. Leave one thing in and it is a breach; black out the whole page and you have published stripes.', description: 'One-line explanation of the redaction rules'})}
+          </p>
+        </div>
+        <div className={styles.hud} role="status" aria-live="polite">
+          <span className={styles.hudPill}>
+            {translate({id: 'preset.redaction.hud.score', message: 'Score {score}', description: 'Score readout on the redaction HUD'}, {score: Number(game ? game.score : 0).toLocaleString(locale)})}
+          </span>
+          <span className={styles.hudPill}>
+            {translate({id: 'preset.redaction.hud.lives', message: 'Breaches left {lives}', description: 'Remaining-lives readout on the redaction HUD'}, {lives: game ? game.lives : 3})}
+          </span>
+        </div>
+      </header>
+
+      <div className={styles.paper}>
+        {doc ? (
+          <>
+            <p className={styles.doc}>
+              {doc.tokens.map((token, i) => (
+                <button
+                  key={i}
+                  type="button"
+                  className={[styles.word, token.blacked && styles.wordBlacked].filter(Boolean).join(' ')}
+                  onClick={() => toggle(i)}
+                  disabled={!running || token.blacked}
+                  aria-pressed={token.blacked}
+                  aria-label={token.blacked
+                    ? translate({id: 'preset.redaction.word.blacked', message: '{text}, blacked out', description: 'Accessible label for a redacted word'}, {text: tokenText(token.t)})
+                    : tokenText(token.t)}>
+                  <span aria-hidden="true">{tokenText(token.t)}</span>
+                </button>
+              ))}
+            </p>
+            <div
+              className={styles.clock}
+              role="progressbar"
+              aria-valuemin={0}
+              aria-valuemax={100}
+              aria-valuenow={pct}
+              aria-label={translate({id: 'preset.redaction.clock', message: 'Time before this document publishes itself', description: 'Accessible name of the redaction countdown'})}>
+              <div className={[styles.clockFill, left < 0.3 && styles.clockLow].filter(Boolean).join(' ')} style={{width: `${pct}%`}} />
+            </div>
+          </>
+        ) : (
+          <p className={styles.idle}>
+            {translate({id: 'preset.redaction.idle', message: 'A stack of documents, all of them due out today.', description: 'Placeholder before the redaction game starts'})}
+          </p>
+        )}
+      </div>
+
+      <footer className={styles.foot}>
+        <button type="button" className={styles.publish} onClick={send} disabled={!running || !doc}>
+          {translate({id: 'preset.redaction.publish', message: 'Publish it', description: 'Button that publishes the redacted document'})}
+        </button>
+        <button type="button" className={styles.start} onClick={begin}>
+          {game
+            ? translate({id: 'preset.redaction.restart', message: 'Restart', description: 'Button that restarts the redaction game'})
+            : translate({id: 'preset.redaction.start', message: 'Open the stack', description: 'Button that starts the redaction game'})}
+        </button>
+        <p className={styles.hint} role="status" aria-live="polite">
+          {last && last.result === 'breach' && translate({id: 'preset.redaction.feedback.breach', message: 'That went out with something on it that should not have. One breach.', description: 'Feedback after publishing a document with a secret still visible'})}
+          {last && last.result === 'clean' && translate({id: 'preset.redaction.feedback.clean', message: 'Clean. Everything that had to go is gone, and the rest is still readable.', description: 'Feedback after publishing a perfectly redacted document'})}
+          {last && last.result === 'overRedacted' && translate(
+            {id: 'preset.redaction.feedback.over', message: 'Safe, but you blacked out {over} word(s) that could have stayed.', description: 'Feedback after publishing an over-redacted document. {over} is how many ordinary words were blacked out.'},
+            {over: last.over},
+          )}
+          {!last && translate({id: 'preset.redaction.hint', message: 'Click a word to black it out. Names, numbers and addresses go; the sentence around them stays.', description: 'Hint under the redaction document'})}
+        </p>
+      </footer>
+    </section>
+  );
+}