Slack Detail Integration Block for React

The block names Slack in text, the way any integration page says what it works with ("Pursefinch for Slack", "Add to Slack"), and ships no Slack logo, colour or wordmark. Slack's tile is a neutral lettermark, Sl in a muted square, sitting in an icon slot that a code comment marks: drop in the official logo only if you have the rights to use it, under the owner's brand guidelines, and never redraw it. The pair is hidden from assistive technology because the heading already names both products.

Both buttons are links (href="#"). Point Add to Slack at your Slack app's install address, the OAuth page that asks the workspace to approve your scopes, and View docs at your setup guide. Nothing connects, signs in or sends anything from the block itself. Add to Slack is a Shine Button, the block's one primary action; View docs is an outline button. Both buttons render the link they're given with render, with nativeButton={false}.

Edit PERMISSIONS at the top of the file. Each entry is a Slack scope (shown in code, left to right in any layout), its access (READ or WRITE, each an icon and a word, never a colour) and a short purpose. List exactly the scopes your app requests, reads first, so the page and the approval screen agree. The "3 read, 2 write" count beside the heading is worked out from the same list.

The product is PRODUCT and the service is SERVICE, a name and a two-letter mark for its lettermark tile. The letters are typed, not worked out from the name, so services that share a first letter stay apart (Slack Sl, Stripe St, Shopify Sh). MarkTile draws either side: filled for your product, with your logo as its child, and neutral for the service; it comes in a large size for the header and a small one for rows and cards. Then rewrite CAPABILITIES, STEPS and FACTS in that service's own terms.

The last update is a fixed day, UPDATED = "2026-09-30", never computed from today. A small helper spells it out as "Sep 30, 2026" the same way on the server and in every browser, and the time element keeps the machine-readable day. The other facts (built by, category, pricing) are a typed list, FACTS, read as a description list.

Below lg the divider gives way to rules between the parts, which stack in reading order: the header, the mark pair and buttons, what it does, the permissions, then the steps and the facts. In a right-to-left layout the columns and the step rail flip, while scopes, channels and commands keep their left-to-right order. The header and the buttons fade up once on load with CSS transitions; with reduced motion they simply appear. The block has no state.