Workspace Starter Channels Success Block for React

Nothing was created. The workspace, its address and the three channels are typed sample data, and the checkboxes only change the drawing and the line under it (a polite status line says "#random removed from the preview"). The copy button writes the address to the clipboard. To wire it, build STARTERS from the channels your product offers, send the ticked ones to your create-workspace call and point Open the workspace at the new workspace.

The rail lists General (always there) and then the ticked channels in their own order, so unticking one removes its row and ticking it back adds it. The window is a fixed height, so nothing around it moves. The drawing is hidden from assistive technology; the line under it says the same in words ("Preview: #general and 2 starter channels, #announcements, #standup"), and the status line reports each change.

Each is a card with a checkbox, the channel's name and a line on what it's for; the whole card toggles it. They sit in a fieldset named Starter channels, and a ticked box is solid in the text color, never the primary color, so Open the workspace stays the one primary. Each checkbox is named by its channel's title and described by its line, and the card is its label, so clicking the text ticks it.

The reading order is the heading, the picture and then the choices, which is the order on a phone and in the page's source. From the large breakpoint up the picture is placed in the first column and the text in the second with a grid, so the order of the source doesn't change.

It's 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 picture sits under the heading, a little shorter, then the facts, the address and the channels (their descriptions are left out to save room). The primary is pinned to the bottom of the screen so it stays in reach while the page scrolls; from the small breakpoint up it sits in the flow after the checkboxes.