Zap Recipe Detail Integration Block for React

The block names Zapier in text, the way any integration page says what it works with ("Formsill for Zapier", "Connect Zapier"), and ships no Zapier logo, colour or wordmark. Zapier's tile is a neutral lettermark, Zp 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.

Yes, in Zapier's own words: a Zap starts with a trigger, can pass through a filter that only lets some runs continue, and ends in one or more actions. The three cells are an example of that shape for a form tool. Which triggers and actions Formsill really offers is for your own app to say; edit RECIPE to match.

Both buttons are links (href="#"). Point Connect Zapier at the invitation link of your Zapier app or at your own sign-in page, and View docs at your setup guide. Nothing connects, signs in or sends anything from the block itself. Connect Zapier 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 FLOWS at the top of the file: a term and a sentence each. List only what your app really does, so the page and the permissions Zapier shows agree. The three steps are STEPS, the recipe is RECIPE, and the product and service are PRODUCT and SERVICE, whose two-letter mark is typed, not worked out from the name.

The three recipe cells stack with the chevrons turned down, and the split becomes two stacked parts with a rule between them, in reading order: header, mark pair and buttons, recipe, what it sends and reads, then the steps. The block has no state and no scripts.

The recipe reads from the end, its chevrons mirror, and the step rail and the divider flip. The header and the buttons fade up once on load with CSS transitions; with reduced motion they simply appear. The block is the same on every framework and library apart from how each button renders its link.