Edit Workflow

Name

Also known as (comma separated)

Brief definition Defined sequence of states/actions.

Notes

Tier Core Useful Reference Deleted

Controls schema (JSON array) [ { "id": "title", "type": "text", "label": "Title", "default": "Order fulfilment" }, { "id": "current", "type": "select", "label": "Current stage", "default": "packing", "options": [ "received", "packing", "shipped", "delivered" ] }, { "id": "orientation", "type": "select", "label": "Orientation", "default": "horizontal", "options": [ "horizontal", "vertical" ] }, { "id": "accent", "type": "color", "label": "Accent colour", "default": "#A8E6C1", "presets": [ "#A8E6C1", "#F5C2E0", "#BFD9F2", "#D9C8F0", "#E8A020", "#241430" ] }, { "id": "showDescription", "type": "toggle", "label": "Show description", "default": true } ]

Templates (JSON object keyed by format) { "html": "<div class=\"workflow workflow--{{orientation}}\" data-current=\"{{current}}\" style=\"--accent:{{accent}};\">\n <h3 class=\"workflow__title\">{{title}}</h3>\n <ol class=\"workflow__stages\">\n <li class=\"workflow__stage workflow__stage--received\">\n <span class=\"workflow__dot\" aria-hidden=\"true\"></span>\n <div class=\"workflow__stage-body\">\n <p class=\"workflow__stage-name\">Received</p>\n {{#if showDescription}}<p class=\"workflow__stage-desc\">Order confirmed and queued</p>{{/if}}\n <span class=\"workflow__badge workflow__badge--completed\">Completed</span>\n <span class=\"workflow__badge workflow__badge--current\" aria-current=\"step\">Current</span>\n <span class=\"workflow__badge workflow__badge--upcoming\">Upcoming</span>\n </div>\n </li>\n <li class=\"workflow__stage workflow__stage--packing\">\n <span class=\"workflow__dot\" aria-hidden=\"true\"></span>\n <div class=\"workflow__stage-body\">\n <p class=\"workflow__stage-name\">Packing</p>\n {{#if showDescription}}<p class=\"workflow__stage-desc\">Items picked and boxed</p>{{/if}}\n <span class=\"workflow__badge workflow__badge--completed\">Completed</span>\n <span class=\"workflow__badge workflow__badge--current\" aria-current=\"step\">Current</span>\n <span class=\"workflow__badge workflow__badge--upcoming\">Upcoming</span>\n </div>\n </li>\n <li class=\"workflow__stage workflow__stage--shipped\">\n <span class=\"workflow__dot\" aria-hidden=\"true\"></span>\n <div class=\"workflow__stage-body\">\n <p class=\"workflow__stage-name\">Shipped</p>\n {{#if showDescription}}<p class=\"workflow__stage-desc\">Handed to courier</p>{{/if}}\n <span class=\"workflow__badge workflow__badge--completed\">Completed</span>\n <span class=\"workflow__badge workflow__badge--current\" aria-current=\"step\">Current</span>\n <span class=\"workflow__badge workflow__badge--upcoming\">Upcoming</span>\n </div>\n </li>\n <li class=\"workflow__stage workflow__stage--delivered\">\n <span class=\"workflow__dot\" aria-hidden=\"true\"></span>\n <div class=\"workflow__stage-body\">\n <p class=\"workflow__stage-name\">Delivered</p>\n {{#if showDescription}}<p class=\"workflow__stage-desc\">Received by customer</p>{{/if}}\n <span class=\"workflow__badge workflow__badge--completed\">Completed</span>\n <span class=\"workflow__badge workflow__badge--current\" aria-current=\"step\">Current</span>\n <span class=\"workflow__badge workflow__badge--upcoming\">Upcoming</span>\n </div>\n </li>\n </ol>\n</div>\n<style>\n.workflow { width: 640px; max-width: 100%; padding: 20px; background: #FAF7F2; color: #241430; font: 14px/1.4 system-ui, sans-serif; border-radius: 14px; box-shadow: 0 8px 24px rgba(36,20,48,.12); box-sizing: border-box; }\n.workflow__title { margin: 0 0 16px; font-size: 16px; }\n.workflow__stages { list-style: none; margin: 0; padding: 0; display: flex; gap: 18px; }\n.workflow--vertical .workflow__stages { flex-direction: column; gap: 14px; }\n.workflow__stage { display: flex; gap: 10px; flex: 1; position: relative; }\n.workflow--vertical .workflow__stage { flex: none; }\n.workflow__dot { width: 10px; height: 10px; border-radius: 50%; background: #24143022; margin-top: 4px; flex-shrink: 0; }\n.workflow__stage-name { margin: 0; font-weight: 700; font-size: 13.5px; }\n.workflow__stage-desc { margin: 2px 0 6px; font-size: 12px; color: #241430b3; }\n.workflow__badge { display: none; font-size: 11px; font-weight: 700; padding: 1px 8px; border-radius: 999px; text-transform: uppercase; letter-spacing: .03em; }\n.workflow__badge--completed { display: inline-flex; background: #24143014; color: #241430b3; }\n.workflow[data-current=\"received\"] .workflow__stage--received .workflow__dot,\n.workflow[data-current=\"packing\"] .workflow__stage--packing .workflow__dot,\n.workflow[data-current=\"shipped\"] .workflow__stage--shipped .workflow__dot,\n.workflow[data-current=\"delivered\"] .workflow__stage--delivered .workflow__dot { background: var(--accent); }\n.workflow[data-current=\"received\"] .workflow__stage--received .workflow__badge--completed,\n.workflow[data-current=\"packing\"] .workflow__stage--packing .workflow__badge--completed,\n.workflow[data-current=\"shipped\"] .workflow__stage--shipped .workflow__badge--completed,\n.workflow[data-current=\"delivered\"] .workflow__stage--delivered .workflow__badge--completed { display: none; }\n.workflow[data-current=\"received\"] .workflow__stage--received .workflow__badge--current,\n.workflow[data-current=\"packing\"] .workflow__stage--packing .workflow__badge--current,\n.workflow[data-current=\"shipped\"] .workflow__stage--shipped .workflow__badge--current,\n.workflow[data-current=\"delivered\"] .workflow__stage--delivered .workflow__badge--current { display: inline-flex; background: var(--accent); color: #17532F; }\n.workflow[data-current=\"received\"] .workflow__stage--received ~ .workflow__stage .workflow__badge--completed,\n.workflow[data-current=\"packing\"] .workflow__stage--packing ~ .workflow__stage .workflow__badge--completed,\n.workflow[data-current=\"shipped\"] .workflow__stage--shipped ~ .workflow__stage .workflow__badge--completed { display: none; }\n.workflow[data-current=\"received\"] .workflow__stage--received ~ .workflow__stage .workflow__badge--upcoming,\n.workflow[data-current=\"packing\"] .workflow__stage--packing ~ .workflow__stage .workflow__badge--upcoming,\n.workflow[data-current=\"shipped\"] .workflow__stage--shipped ~ .workflow__stage .workflow__badge--upcoming { display: inline-flex; color: #241430b3; }\n.workflow[data-current=\"received\"] .workflow__stage--received ~ .workflow__stage .workflow__dot,\n.workflow[data-current=\"packing\"] .workflow__stage--packing ~ .workflow__stage .workflow__dot,\n.workflow[data-current=\"shipped\"] .workflow__stage--shipped ~ .workflow__stage .workflow__dot { background: #24143022; }\n</style>", "tailwind": "<div class=\"workflow-tw workflow-tw--{{orientation}} w-[640px] max-w-full p-5 bg-[#FAF7F2] text-[#241430] font-sans text-sm rounded-2xl shadow-lg box-border\" data-current=\"{{current}}\" style=\"--accent:{{accent}};\">\n <h3 class=\"m-0 mb-4 text-base\">{{title}}</h3>\n <ol class=\"workflow-tw__stages list-none m-0 p-0 flex gap-4\">\n <li class=\"workflow-tw__stage workflow-tw__stage--received flex gap-2.5 relative flex-1\">\n <span class=\"workflow-tw__dot w-2.5 h-2.5 rounded-full mt-1 flex-shrink-0\" style=\"background:#24143022;\"></span>\n <div>\n <p class=\"m-0 font-bold text-[13.5px]\">Received</p>\n {{#if showDescription}}<p class=\"mt-0.5 mb-1.5 text-xs text-[#241430]/70\">Order confirmed and queued</p>{{/if}}\n <span class=\"workflow-tw__badge workflow-tw__badge--completed inline-flex text-[11px] font-bold px-2 py-px rounded-full uppercase tracking-wide bg-[#24143014] text-[#241430]/70\">Completed</span>\n <span class=\"workflow-tw__badge workflow-tw__badge--current text-[11px] font-bold px-2 py-px rounded-full uppercase tracking-wide\" aria-current=\"step\">Current</span>\n <span class=\"workflow-tw__badge workflow-tw__badge--upcoming text-[11px] font-bold px-2 py-px rounded-full uppercase tracking-wide\">Upcoming</span>\n </div>\n </li>\n <li class=\"workflow-tw__stage workflow-tw__stage--packing flex gap-2.5 relative flex-1\">\n <span class=\"workflow-tw__dot w-2.5 h-2.5 rounded-full mt-1 flex-shrink-0\" style=\"background:#24143022;\"></span>\n <div>\n <p class=\"m-0 font-bold text-[13.5px]\">Packing</p>\n {{#if showDescription}}<p class=\"mt-0.5 mb-1.5 text-xs text-[#241430]/70\">Items picked and boxed</p>{{/if}}\n <span class=\"workflow-tw__badge workflow-tw__badge--completed inline-flex text-[11px] font-bold px-2 py-px rounded-full uppercase tracking-wide bg-[#24143014] text-[#241430]/70\">Completed</span>\n <span class=\"workflow-tw__badge workflow-tw__badge--current text-[11px] font-bold px-2 py-px rounded-full uppercase tracking-wide\" aria-current=\"step\">Current</span>\n <span class=\"workflow-tw__badge workflow-tw__badge--upcoming text-[11px] font-bold px-2 py-px rounded-full uppercase tracking-wide\">Upcoming</span>\n </div>\n </li>\n <li class=\"workflow-tw__stage workflow-tw__stage--shipped flex gap-2.5 relative flex-1\">\n <span class=\"workflow-tw__dot w-2.5 h-2.5 rounded-full mt-1 flex-shrink-0\" style=\"background:#24143022;\"></span>\n <div>\n <p class=\"m-0 font-bold text-[13.5px]\">Shipped</p>\n {{#if showDescription}}<p class=\"mt-0.5 mb-1.5 text-xs text-[#241430]/70\">Handed to courier</p>{{/if}}\n <span class=\"workflow-tw__badge workflow-tw__badge--completed inline-flex text-[11px] font-bold px-2 py-px rounded-full uppercase tracking-wide bg-[#24143014] text-[#241430]/70\">Completed</span>\n <span class=\"workflow-tw__badge workflow-tw__badge--current text-[11px] font-bold px-2 py-px rounded-full uppercase tracking-wide\" aria-current=\"step\">Current</span>\n <span class=\"workflow-tw__badge workflow-tw__badge--upcoming text-[11px] font-bold px-2 py-px rounded-full uppercase tracking-wide\">Upcoming</span>\n </div>\n </li>\n <li class=\"workflow-tw__stage workflow-tw__stage--delivered flex gap-2.5 relative flex-1\">\n <span class=\"workflow-tw__dot w-2.5 h-2.5 rounded-full mt-1 flex-shrink-0\" style=\"background:#24143022;\"></span>\n <div>\n <p class=\"m-0 font-bold text-[13.5px]\">Delivered</p>\n {{#if showDescription}}<p class=\"mt-0.5 mb-1.5 text-xs text-[#241430]/70\">Received by customer</p>{{/if}}\n <span class=\"workflow-tw__badge workflow-tw__badge--completed inline-flex text-[11px] font-bold px-2 py-px rounded-full uppercase tracking-wide bg-[#24143014] text-[#241430]/70\">Completed</span>\n <span class=\"workflow-tw__badge workflow-tw__badge--current text-[11px] font-bold px-2 py-px rounded-full uppercase tracking-wide\" aria-current=\"step\">Current</span>\n <span class=\"workflow-tw__badge workflow-tw__badge--upcoming text-[11px] font-bold px-2 py-px rounded-full uppercase tracking-wide\">Upcoming</span>\n </div>\n </li>\n </ol>\n</div>\n<style>\n.workflow-tw--vertical .workflow-tw__stages { flex-direction: column; }\n.workflow-tw--vertical .workflow-tw__stage { flex: none; }\n.workflow-tw__badge--current, .workflow-tw__badge--upcoming { display: none; }\n.workflow-tw[data-current=\"received\"] .workflow-tw__stage--received .workflow-tw__dot,\n.workflow-tw[data-current=\"packing\"] .workflow-tw__stage--packing .workflow-tw__dot,\n.workflow-tw[data-current=\"shipped\"] .workflow-tw__stage--shipped .workflow-tw__dot,\n.workflow-tw[data-current=\"delivered\"] .workflow-tw__stage--delivered .workflow-tw__dot { background: var(--accent) !important; }\n.workflow-tw[data-current=\"received\"] .workflow-tw__stage--received .workflow-tw__badge--completed,\n.workflow-tw[data-current=\"packing\"] .workflow-tw__stage--packing .workflow-tw__badge--completed,\n.workflow-tw[data-current=\"shipped\"] .workflow-tw__stage--shipped .workflow-tw__badge--completed,\n.workflow-tw[data-current=\"delivered\"] .workflow-tw__stage--delivered .workflow-tw__badge--completed { display: none; }\n.workflow-tw[data-current=\"received\"] .workflow-tw__stage--received .workflow-tw__badge--current,\n.workflow-tw[data-current=\"packing\"] .workflow-tw__stage--packing .workflow-tw__badge--current,\n.workflow-tw[data-current=\"shipped\"] .workflow-tw__stage--shipped .workflow-tw__badge--current,\n.workflow-tw[data-current=\"delivered\"] .workflow-tw__stage--delivered .workflow-tw__badge--current { display: inline-flex; background: var(--accent); color: #17532F; }\n.workflow-tw[data-current=\"received\"] .workflow-tw__stage--received ~ .workflow-tw__stage .workflow-tw__badge--completed,\n.workflow-tw[data-current=\"packing\"] .workflow-tw__stage--packing ~ .workflow-tw__stage .workflow-tw__badge--completed,\n.workflow-tw[data-current=\"shipped\"] .workflow-tw__stage--shipped ~ .workflow-tw__stage .workflow-tw__badge--completed { display: none; }\n.workflow-tw[data-current=\"received\"] .workflow-tw__stage--received ~ .workflow-tw__stage .workflow-tw__badge--upcoming,\n.workflow-tw[data-current=\"packing\"] .workflow-tw__stage--packing ~ .workflow-tw__stage .workflow-tw__badge--upcoming,\n.workflow-tw[data-current=\"shipped\"] .workflow-tw__stage--shipped ~ .workflow-tw__stage .workflow-tw__badge--upcoming { display: inline-flex; color: #241430b3; }\n</style>", "react": "export function Workflow({\n title = \"{{title}}\",\n current = \"{{current}}\",\n orientation = \"{{orientation}}\",\n accent = \"{{accent}}\",\n showDescription = {{showDescription}},\n}) {\n const stages = [\n { key: \"received\", name: \"Received\", desc: \"Order confirmed and queued\" },\n { key: \"packing\", name: \"Packing\", desc: \"Items picked and boxed\" },\n { key: \"shipped\", name: \"Shipped\", desc: \"Handed to courier\" },\n { key: \"delivered\", name: \"Delivered\", desc: \"Received by customer\" },\n ];\n const currentIndex = stages.findIndex((s) => s.key === current);\n return (\n <div style={{ width: 640, maxWidth: \"100%\", padding: 20, background: \"#FAF7F2\", color: \"#241430\",\n fontFamily: \"system-ui, sans-serif\", fontSize: 14, borderRadius: 14, boxShadow: \"0 8px 24px rgba(36,20,48,.12)\",\n boxSizing: \"border-box\" }}>\n <h3 style={{ margin: \"0 0 16px\", fontSize: 16 }}>{title}</h3>\n <ol style={{ listStyle: \"none\", margin: 0, padding: 0, display: \"flex\",\n flexDirection: orientation === \"vertical\" ? \"column\" : \"row\", gap: orientation === \"vertical\" ? 14 : 18 }}>\n {stages.map((stage, i) => {\n const status = i < currentIndex ? \"completed\" : i === currentIndex ? \"current\" : \"upcoming\";\n return (\n <li key={stage.key} style={{ display: \"flex\", gap: 10, flex: orientation === \"vertical\" ? \"none\" : 1 }}>\n <span aria-hidden=\"true\" style={{ width: 10, height: 10, borderRadius: \"50%\", marginTop: 4, flexShrink: 0,\n background: status === \"upcoming\" ? \"#24143022\" : accent }} />\n <div>\n <p style={{ margin: 0, fontWeight: 700, fontSize: 13.5 }}>{stage.name}</p>\n {showDescription && <p style={{ margin: \"2px 0 6px\", fontSize: 12, color: \"#241430b3\" }}>{stage.desc}</p>}\n <span aria-current={status === \"current\" ? \"step\" : undefined} style={{ fontSize: 11, fontWeight: 700,\n padding: \"1px 8px\", borderRadius: 999, textTransform: \"uppercase\", letterSpacing: \"0.03em\",\n background: status === \"current\" ? accent : status === \"completed\" ? \"#24143014\" : \"transparent\",\n color: status === \"current\" ? \"#17532F\" : \"#241430b3\" }}>\n {status}\n </span>\n </div>\n </li>\n );\n })}\n </ol>\n </div>\n );\n}" }