Component Contract

Expected inputs, outputs and behaviour.

html

<div class="contract contract--true">
  <table class="contract__table">
    <tr><th>Avatar contract</th><th>status</th></tr>
    <tr><td>requires <code>src</code></td><td class="contract__status contract__status--ok">satisfied</td></tr>
    <tr><td>requires <code>src</code></td><td class="contract__status contract__status--bad">missing</td></tr>
  </table>
  <div class="contract__instance contract__instance--ok" style="background:#A8E6C1;">renders</div>
  <div class="contract__instance contract__instance--bad">contract broken</div>
</div>
<style>
.contract { font: 13px/1.5 system-ui, sans-serif; color: #241430; background: #FAF7F2; padding: 18px; border-radius: 12px; width: 300px; box-sizing: border-box; }
.contract__table { border-collapse: collapse; width: 100%; font-size: 12px; margin-bottom: 14px; }
.contract__table th, .contract__table td { text-align: left; padding: 5px 6px; border-bottom: 1px solid #24143018; }
.contract__table code { font: 11px ui-monospace, monospace; background: #24143012; padding: 1px 4px; border-radius: 3px; }
.contract__status { display: none; font-weight: 700; }
.contract__status--ok { color: #241430; }
.contract__status--bad { color: #E8A020; }

.contract__instance { display: none; padding: 12px; border-radius: 8px; text-align: center; font-weight: 600; }
.contract__instance--bad { border: 2px dashed #E8A020; color: #E8A020; background: #E8A02012; }
.contract--true .contract__status--ok, .contract--true .contract__instance--ok { display: table-cell; }
.contract--true .contract__instance--ok { display: block; }
.contract--false .contract__status--bad, .contract--false .contract__instance--bad { display: table-cell; }
.contract--false .contract__instance--bad { display: block; }
</style>

tailwind

<div class="contracttw contracttw--true font-sans text-[#241430] bg-[#FAF7F2] p-4.5 rounded-xl w-[300px] box-border">
  <table class="border-collapse w-full text-xs mb-3.5">
    <tr><th class="text-left py-1.5 px-1.5 border-b border-[#24143018]">Avatar contract</th><th class="text-left py-1.5 px-1.5 border-b border-[#24143018]">status</th></tr>
    <tr><td class="py-1.5 px-1.5">requires <code class="font-mono text-[11px] bg-[#24143012] px-1 rounded">src</code></td><td class="contracttw__status contracttw__status--ok hidden py-1.5 px-1.5 font-bold">satisfied</td><td class="contracttw__status contracttw__status--bad hidden py-1.5 px-1.5 font-bold text-[#E8A020]">missing</td></tr>
  </table>
  <div class="contracttw__instance contracttw__instance--ok hidden p-3 rounded-lg text-center font-semibold" style="background:#A8E6C1;">renders</div>
  <div class="contracttw__instance contracttw__instance--bad hidden p-3 rounded-lg text-center font-semibold border-2 border-dashed border-[#E8A020] text-[#E8A020] bg-[#E8A02012]">contract broken</div>
</div>
<style>
.contracttw--true .contracttw__status--ok, .contracttw--true .contracttw__instance--ok { display: block; }
.contracttw--false .contracttw__status--bad, .contracttw--false .contracttw__instance--bad { display: block; }
</style>

react

export function ComponentContract({
  componentName = "Avatar",
  requiredProp = "src",
  satisfied = true,
  accent = "#A8E6C1",
}) {
  return (
    <div style={{ font: "13px/1.5 system-ui, sans-serif", color: "#241430", background: "#FAF7F2", padding: 18, borderRadius: 12, width: 300, boxSizing: "border-box" }}>
      <table style={{ borderCollapse: "collapse", width: "100%", fontSize: 12, marginBottom: 14 }}>
        <tbody>
          <tr><th style={{ textAlign: "left", padding: "5px 6px" }}>{componentName} contract</th><th style={{ textAlign: "left", padding: "5px 6px" }}>status</th></tr>
          <tr>
            <td style={{ padding: "5px 6px" }}>requires <code style={{ fontFamily: "ui-monospace, monospace", fontSize: 11, background: "#24143012", padding: "1px 4px", borderRadius: 3 }}>{requiredProp}</code></td>
            <td style={{ padding: "5px 6px", fontWeight: 700, color: satisfied ? "#241430" : "#E8A020" }}>{satisfied ? "satisfied" : "missing"}</td>
          </tr>
        </tbody>
      </table>
      {satisfied
        ? <div style={{ padding: 12, borderRadius: 8, textAlign: "center", fontWeight: 600, background: accent }}>renders</div>
        : <div style={{ padding: 12, borderRadius: 8, textAlign: "center", fontWeight: 600, border: "2px dashed #E8A020", color: "#E8A020", background: "#E8A02012" }}>contract broken</div>}
    </div>
  );
}