Consent Row - Canvas Design System

When to Use

Use when: Something is about to leave Workshopr, or run without the person watching: posting a recap to Slack, creating Linear issues, emailing participants, scheduled check-ins. Name the destination exactly (#design-team, not "your workspace") and say how often.

Don't use when: The action stays inside Workshopr. Deleting for good is the destructive confirmation (a Modal); an ordinary setting that sends nothing is a Toggle.

Variants

A one-off push

The switch starts off, always. Send stays disabled until it is on; Copy it instead works either way. The line under the row shows each event.

No event yet.

<?= ws_consent_row([
    'id'          => 'slack-recap',
    'title'       => 'Send the recap to Slack',
    'what'        => 'The recap and 6 actions, with owners',
    'where'       => '#design-team in Slack',
    'when'        => 'Once, when you press Send to Slack',
    'consent'     => 'Post it to #design-team',
    'action'      => 'Send to Slack',
    'alternative' => 'Copy it instead',
]) ?>
<script src="/js/ws-agent.js?v=<?= filemtime(WS_ROOT . '/js/ws-agent.js') ?>"></script>
<script>
document.addEventListener('ws:consent-confirm', e => e.detail.id === 'slack-recap' && postToSlack());
document.addEventListener('ws:consent-alternative', e => e.detail.id === 'slack-recap' && copyRecap());
</script>

Something that runs on its own

For automation, the when is a schedule, and the alternative is the person doing it themselves.

States

State	Behavior
Not yet agreed (always on render)	The switch is off and the action is disabled. The template never renders it checked.
Agreed	The switch is on and the action is enabled. Pressing it dispatches `ws:consent-confirm`.
Declined	The alternative dispatches `ws:consent-alternative` whatever the switch says.
Back to the page	The switch goes back off, even if the browser restored it: consent is given on the page, never carried in.
Without ws-agent.js	The action stays disabled, so nothing can be sent without the person's say-so.

Options

Option	Type	Default	Purpose
`id`	string	`'ws-consent'`	Required in practice: unique on the page. The parts take `{id}-title`, `{id}-consent` and `{id}-hint`; events carry it as `detail.id`.
`title`	string	`''`	What is about to happen, in a sentence
`what` / `where` / `when`	string	`''`	What goes, where it goes, and when and how often
`consent`	string	`'Yes, go ahead'`	The switch's label; say the destination again
`name`	string	`'{id}-consent'`	The checkbox's form name
`action`	string \| array	`'Send'`	The action's text, or `ws_button` options with `label`
`alternative`	string \| array	`null`	The other way, as text or `ws_button` options with `label`. Always pass one.
`hint`	string	`'Nothing leaves Workshopr until you switch this on.'`	The line under the actions; it describes the action
`class` / `attrs`	string / array		Additional classes and attributes

Accessibility

Concern	Behavior
Group	`role="group"` named by its title, so everything inside is heard in that context.
What, where, when	A description list, read as term and value.
Consent	A `ws_toggle` checkbox with a visible label, never checked on render. Space turns it on.
The action	A real button, disabled until consent and described by the hint under it. The alternative is always enabled.
Keyboard	Switch, action, alternative: Tab reaches each in reading order; Space and Enter work.

Tokens

Token	Used for
`--bg-surface` / `--card-border` / `--card-radius` / `--card-padding`	The row's surface, matched to the cards around it
`--text-dark` / `--text-muted`	Values and terms, the hint
`--space-*`	Spacing

CSS Classes

Class	Purpose
`.ws-consent`	The row; carries `data-ws-consent="{id}"`
`.ws-consent__text` / `__title`	The words
`.ws-consent__facts` / `__fact`	What, where and when
`.ws-consent__controls` / `__actions` / `__hint`	The switch, the buttons and the line under them

Hooks: the checkbox carries data-ws-consent-check, the action data-ws-consent-action, the alternative data-ws-consent-alternative.

Files

File	Purpose
`includes/components/helpers.php`	`ws_consent_row()` helper
`includes/components/consent-row.php`	Template
`includes/components/components.css`	Styles, in the agent components section
`js/ws-agent.js`	Enables the action and dispatches the events