Edit Workflow Step

Name

Also known as (comma separated)

Brief definition Individual step in a process.

Notes

Tier Core Useful Reference Deleted

Controls schema (JSON array) [ { "id": "stepNumber", "type": "number", "label": "Step number", "default": 2, "min": 1, "max": 6, "step": 1 }, { "id": "name", "type": "text", "label": "Step name", "default": "Verify identity" }, { "id": "status", "type": "select", "label": "Status", "default": "current", "options": [ "completed", "current", "upcoming" ] }, { "id": "orientation", "type": "select", "label": "Orientation", "default": "horizontal", "options": [ "horizontal", "vertical" ] }, { "id": "accent", "type": "color", "label": "Accent colour", "default": "#F5C2E0", "presets": [ "#F5C2E0", "#A8E6C1", "#BFD9F2", "#D9C8F0", "#E8A020", "#241430" ] } ]

Templates (JSON object keyed by format) { "html": "<div class=\"workflow-step workflow-step--{{orientation}}\" data-status=\"{{status}}\" style=\"--accent:{{accent}};\">\n <span class=\"workflow-step__badge\">\n <span class=\"workflow-step__current-flag\" aria-current=\"step\">Current step</span>\n <span class=\"workflow-step__number\">{{stepNumber}}</span>\n <svg class=\"workflow-step__check\" viewBox=\"0 0 20 20\" aria-hidden=\"true\"><path d=\"M4 10.5l3.5 3.5L16 5.5\" fill=\"none\" stroke=\"currentColor\" stroke-width=\"2\" stroke-linecap=\"round\" stroke-linejoin=\"round\"/></svg>\n </span>\n <div class=\"workflow-step__body\">\n <p class=\"workflow-step__name\">{{name}}</p>\n <span class=\"workflow-step__status\">{{status}}</span>\n </div>\n</div>\n<style>\n.workflow-step { display: flex; align-items: center; gap: 12px; width: 300px; padding: 14px; background: #FAF7F2; color: #241430; font: 14px/1.4 system-ui, sans-serif; border-radius: 12px; box-shadow: 0 6px 18px rgba(36,20,48,.1); box-sizing: border-box; }\n.workflow-step--vertical { flex-direction: column; align-items: flex-start; width: 200px; }\n.workflow-step__badge { position: relative; width: 30px; height: 30px; border-radius: 50%; display: grid; place-items: center; font-weight: 700; font-size: 13px; flex-shrink: 0; background: #24143014; color: #241430b3; }\n.workflow-step__current-flag { display: none; }\n.workflow-step[data-status=\"current\"] .workflow-step__current-flag { display: inline; position: absolute; width: 1px; height: 1px; overflow: hidden; clip: rect(0,0,0,0); white-space: nowrap; }\n.workflow-step__check { width: 14px; height: 14px; display: none; }\n.workflow-step[data-status=\"completed\"] .workflow-step__badge { background: var(--accent); color: #7A1440; }\n.workflow-step[data-status=\"completed\"] .workflow-step__number { display: none; }\n.workflow-step[data-status=\"completed\"] .workflow-step__check { display: block; }\n.workflow-step[data-status=\"current\"] .workflow-step__badge { background: #241430; color: #FAF7F2; box-shadow: 0 0 0 3px var(--accent); }\n.workflow-step[data-status=\"upcoming\"] .workflow-step__badge { background: #24143014; color: #241430b3; }\n.workflow-step__name { margin: 0; font-weight: 700; font-size: 13.5px; }\n.workflow-step__status { display: inline-block; margin-top: 2px; font-size: 11.5px; font-weight: 700; text-transform: capitalize; color: #241430b3; }\n</style>", "tailwind": "<div class=\"workflow-step-tw workflow-step-tw--{{orientation}} flex items-center gap-3 w-[300px] p-3.5 bg-[#FAF7F2] text-[#241430] font-sans text-sm rounded-xl shadow box-border\" data-status=\"{{status}}\" style=\"--accent:{{accent}};\">\n <span class=\"workflow-step-tw__badge relative w-[30px] h-[30px] rounded-full grid place-items-center font-bold text-[13px] flex-shrink-0 bg-[#24143014] text-[#241430]/70\">\n <span class=\"workflow-step-tw__current-flag\" aria-current=\"step\">Current step</span>\n <span class=\"workflow-step-tw__number\">{{stepNumber}}</span>\n <svg class=\"workflow-step-tw__check w-3.5 h-3.5\" viewBox=\"0 0 20 20\" aria-hidden=\"true\"><path d=\"M4 10.5l3.5 3.5L16 5.5\" fill=\"none\" stroke=\"currentColor\" stroke-width=\"2\" stroke-linecap=\"round\" stroke-linejoin=\"round\"/></svg>\n </span>\n <div>\n <p class=\"m-0 font-bold text-[13.5px]\">{{name}}</p>\n <span class=\"inline-block mt-0.5 text-[11.5px] font-bold capitalize text-[#241430]/70\">{{status}}</span>\n </div>\n</div>\n<style>\n.workflow-step-tw--vertical { flex-direction: column; align-items: flex-start; width: 200px; }\n.workflow-step-tw__current-flag { display: none; }\n.workflow-step-tw[data-status=\"current\"] .workflow-step-tw__current-flag { display: inline; position: absolute; width: 1px; height: 1px; overflow: hidden; clip: rect(0,0,0,0); white-space: nowrap; }\n.workflow-step-tw__check { display: none; }\n.workflow-step-tw[data-status=\"completed\"] .workflow-step-tw__badge { background: var(--accent); color: #7A1440; }\n.workflow-step-tw[data-status=\"completed\"] .workflow-step-tw__number { display: none; }\n.workflow-step-tw[data-status=\"completed\"] .workflow-step-tw__check { display: block; }\n.workflow-step-tw[data-status=\"current\"] .workflow-step-tw__badge { background: #241430; color: #FAF7F2; box-shadow: 0 0 0 3px var(--accent); }\n</style>", "react": "export function WorkflowStep({\n stepNumber = {{stepNumber}},\n name = \"{{name}}\",\n status = \"{{status}}\",\n orientation = \"{{orientation}}\",\n accent = \"{{accent}}\",\n}) {\n const badgeStyle = {\n completed: { background: accent, color: \"#7A1440\" },\n current: { background: \"#241430\", color: \"#FAF7F2\", boxShadow: `0 0 0 3px ${accent}` },\n upcoming: { background: \"#24143014\", color: \"#241430b3\" },\n }[status] ?? {};\n const vertical = orientation === \"vertical\";\n return (\n <div style={{ display: \"flex\", flexDirection: vertical ? \"column\" : \"row\", alignItems: vertical ? \"flex-start\" : \"center\",\n gap: 12, width: vertical ? 200 : 300, padding: 14, background: \"#FAF7F2\", color: \"#241430\",\n fontFamily: \"system-ui, sans-serif\", fontSize: 14, borderRadius: 12, boxShadow: \"0 6px 18px rgba(36,20,48,.1)\",\n boxSizing: \"border-box\" }}>\n <span style={{ position: \"relative\", width: 30, height: 30, borderRadius: \"50%\", display: \"grid\",\n placeItems: \"center\", fontWeight: 700, fontSize: 13, flexShrink: 0, ...badgeStyle }}>\n {status === \"current\" && (\n <span aria-current=\"step\" style={{ position: \"absolute\", width: 1, height: 1, overflow: \"hidden\",\n clip: \"rect(0,0,0,0)\", whiteSpace: \"nowrap\" }}>Current step</span>\n )}\n {status === \"completed\" ? (\n <svg width=\"14\" height=\"14\" viewBox=\"0 0 20 20\" aria-hidden=\"true\"><path d=\"M4 10.5l3.5 3.5L16 5.5\" fill=\"none\" stroke=\"currentColor\" strokeWidth=\"2\" strokeLinecap=\"round\" strokeLinejoin=\"round\" /></svg>\n ) : stepNumber}\n </span>\n <div>\n <p style={{ margin: 0, fontWeight: 700, fontSize: 13.5 }}>{name}</p>\n <span style={{ display: \"inline-block\", marginTop: 2, fontSize: 11.5, fontWeight: 700, textTransform: \"capitalize\", color: \"#241430b3\" }}>{status}</span>\n </div>\n </div>\n );\n}" }