Workspace Ownership Handoff Success Block for React

Nothing was transferred. The two people, the lists of what moved and what stayed, the date and the reference are typed sample data, and the only thing the page does is copy the reference through the browser's clipboard. To wire it, build FROM, TO, MOVED and STAYS from your transfer record, set the moment and the reference from it and point the primary at the workspace.

By glyph, by heading and by words. Each thing that moved has a tick under the heading "Now holds"; each thing that stayed has a hollow dot under "Stays with them". The roles are written in badges ("Admin", "Owner"), and nothing is shown only by color or shade.

A drawn mark, hidden from assistive technology: the order of the two sections (previous owner first, new owner second) and the headings say the same thing. It sits on the line between the cells, pointing from one to the other, and turns downward when the cells stack on a phone. In a right-to-left layout it points the other way, because it follows the reading direction.

Yes. It writes the reference to the clipboard and a screen reader hears "Transfer reference copied" (or that the clipboard refused, which happens on a page not served over HTTPS). The reference itself is left-to-right whatever the page's direction.

The primary is a Shine Button used as a link to your own route. It's a Shine Button with render set to an a element and nativeButton={false}.

The two cells stack, the previous owner above the new owner, with the arrow on the line between them turned downward; the previous owner's list of what stays becomes one sentence. The reference row stays on one line, and the primary is pinned to the bottom of the screen and full width, so it stays in reach; from the small breakpoint up it sits in the flow.