Edit Approval Notification · UI Element Compendium

Name

Also known as (comma separated)

Brief definition

Notes

Tier

Controls schema (JSON array)

Templates (JSON object keyed by format)

{
  "html": "<article class='approval approval--{{status}}' data-read='{{read}}' style='border-left-color:{{accent}};'>\n  <span class='approval__icon' aria-hidden='true'></span>\n  <div class='approval__body'>\n    <p class='approval__text'><strong>{{requester}}</strong> requested approval for <strong>{{item}}</strong></p>\n    <p class='approval__status'>Status: <span class='approval__status-label'>{{status}}</span></p>\n    <time class='approval__time' datetime='{{timestamp}}'>{{timestamp}}</time>\n  </div>\n  {{#unless read}}\n  <span class='approval__dot' aria-hidden='true'></span>\n  <span class='sr-only'>Unread</span>\n  {{/unless}}\n</article>\n<style>\n.approval { display: flex; align-items: flex-start; gap: 12px; max-width: 420px; padding: 14px 16px; background: #FAF7F2; color: #241430; border-left: 4px solid; border-radius: 10px; box-shadow: 0 6px 18px rgba(36,20,48,.12); font: 14px/1.5 system-ui, sans-serif; position: relative; box-sizing: border-box; }\n.approval__icon { width: 22px; height: 22px; border-radius: 50%; flex-shrink: 0; position: relative; background: #24143014; }\n.approval__icon::before { position: absolute; inset: 0; display: grid; place-items: center; font: 700 12px/1 system-ui, sans-serif; }\n.approval--pending .approval__icon::before { content: '\\2026'; color: #E8A020; }\n.approval--approved .approval__icon::before { content: '\\2713'; color: #1a7a4c; }\n.approval--denied .approval__icon::before { content: '\\2715'; color: #b0273e; }\n.approval__body { flex: 1; }\n.approval__text { margin: 0 0 4px; }\n.approval__status { margin: 0 0 4px; font-size: 12px; color: #241430b3; }\n.approval__status-label { text-transform: capitalize; font-weight: 600; }\n.approval__time { display: block; font-size: 11px; color: #24143080; }\n.approval__dot { position: absolute; top: 14px; right: 14px; width: 8px; height: 8px; border-radius: 50%; background: #b0273e; }\n.sr-only { position: absolute; width: 1px; height: 1px; padding: 0; margin: -1px; overflow: hidden; clip: rect(0,0,0,0); white-space: nowrap; border: 0; }\n</style>",
  "tailwind": "<div class='approval-tw approval-tw--{{status}} flex items-start gap-3 max-w-[420px] p-3.5 bg-[#FAF7F2] text-[#241430] border-l-4 rounded-lg shadow-md font-sans text-sm relative box-border' data-read='{{read}}' style='border-left-color:{{accent}}'>\n  <span class='approval-tw__icon w-[22px] h-[22px] rounded-full flex-shrink-0 bg-[#24143014] relative' aria-hidden='true'></span>\n  <div class='flex-1'>\n    <p class='m-0 mb-1'><strong>{{requester}}</strong> requested approval for <strong>{{item}}</strong></p>\n    <p class='m-0 mb-1 text-xs text-[#241430]/70'>Status: <span class='capitalize font-semibold'>{{status}}</span></p>\n    <time class='block text-[11px] text-[#241430]/50' datetime='{{timestamp}}'>{{timestamp}}</time>\n  </div>\n  {{#unless read}}\n  <span class='absolute top-3.5 right-3.5 w-2 h-2 rounded-full bg-[#b0273e]' aria-hidden='true'></span>\n  <span class='sr-only'>Unread</span>\n  {{/unless}}\n</div>\n<style>\n.approval-tw__icon::before { position: absolute; inset: 0; display: grid; place-items: center; font: 700 12px/1 system-ui, sans-serif; content: ''; }\n.approval-tw--pending .approval-tw__icon::before { content: '\\2026'; color: #E8A020; }\n.approval-tw--approved .approval-tw__icon::before { content: '\\2713'; color: #1a7a4c; }\n.approval-tw--denied .approval-tw__icon::before { content: '\\2715'; color: #b0273e; }\n.sr-only { position: absolute; width: 1px; height: 1px; padding: 0; margin: -1px; overflow: hidden; clip: rect(0,0,0,0); white-space: nowrap; border: 0; }\n</style>",
  "react": "export function ApprovalNotification({\n  requester = '{{requester}}',\n  item = '{{item}}',\n  status = '{{status}}',\n  accent = '{{accent}}',\n  timestamp = '{{timestamp}}',\n  read = {{read}},\n}) {\n  const icon = { pending: '\\u2026', approved: '\\u2713', denied: '\\u2715' }[status] ?? '\\u2022';\n  const iconColor = { pending: '#E8A020', approved: '#1a7a4c', denied: '#b0273e' }[status] ?? '#241430';\n  const srOnly = { position: 'absolute', width: 1, height: 1, padding: 0, margin: -1, overflow: 'hidden', clip: 'rect(0,0,0,0)', whiteSpace: 'nowrap', border: 0 };\n  return (\n    <article style={{ display: 'flex', alignItems: 'flex-start', gap: 12, maxWidth: 420, padding: '14px 16px', background: '#FAF7F2', color: '#241430', borderLeft: `4px solid ${accent}`, borderRadius: 10, boxShadow: '0 6px 18px rgba(36,20,48,.12)', fontFamily: 'system-ui, sans-serif', fontSize: 14, position: 'relative' }}>\n      <span aria-hidden='true' style={{ width: 22, height: 22, borderRadius: '50%', flexShrink: 0, background: '#24143014', display: 'grid', placeItems: 'center', fontWeight: 700, fontSize: 12, color: iconColor }}>{icon}</span>\n      <div style={{ flex: 1 }}>\n        <p style={{ margin: '0 0 4px' }}><strong>{requester}</strong> requested approval for <strong>{item}</strong></p>\n        <p style={{ margin: '0 0 4px', fontSize: 12, color: '#241430b3' }}>Status: <span style={{ textTransform: 'capitalize', fontWeight: 600 }}>{status}</span></p>\n        <time style={{ display: 'block', fontSize: 11, color: '#24143080' }} dateTime={timestamp}>{timestamp}</time>\n      </div>\n      {!read && (\n        <>\n          <span aria-hidden='true' style={{ position: 'absolute', top: 14, right: 14, width: 8, height: 8, borderRadius: '50%', background: '#b0273e' }} />\n          <span style={srOnly}>Unread</span>\n        </>\n      )}\n    </article>\n  );\n}"
}