APPENDIX D

Ledger Row

Number, mono label with arrow, body. Numbered because the rows are a sequence.

HANDLE: ledger-row
LIVES IN: src/components/Editorial.jsx (LedgerRow)
USED ON: Constraints, Process
PROPS: index · label · value (string or array)

EXAMPLE

LIVE

As it renders.

01TWO APPS, ONE TEAM
No additional headcount for the second product. Sharing at the component level was the only way to ship both.
02REUSE THE VOCABULARY
A string renders as one paragraph.
An array renders as several.

CODE

COPY AND PASTE

How it is called.

JSX

import { LedgerRow } from '../components/Editorial.jsx'

<ol className="rule">
  {cs.constraints.map(([k, v], i) => (
    <LedgerRow key={k} index={i} label={k} value={v} />   {/* value: string or string[] */}
  ))}
</ol>

RULES

What must stay true.

Number, mono label with arrow, body. Numbered because the rows are a sequence.

EXAMPLESLEDGER ROW

01TWO APPS, ONE TEAM
No additional headcount for the second product. Sharing at the component level was the only way to ship both.
02REUSE THE VOCABULARY
A string renders as one paragraph.
An array renders as several.

CODE

JSX

import { LedgerRow } from '../components/Editorial.jsx'

<ol className="rule">
  {cs.constraints.map(([k, v], i) => (
    <LedgerRow key={k} index={i} label={k} value={v} />   {/* value: string or string[] */}
  ))}
</ol>