Top Bar Shipping Banner Block for React

The check is two small functions at the top of the file. POSTCODE is a pattern for UK postcodes (an outward code and an inward code, with or without the space), and REMOTE lists the areas that take longer (IV, HS, KW and ZE). Edit them for your country and your carrier, or replace check with a call to your shipping API; it only has to return one of the four answers and the postcode as it should be written.

The four possible answers sit in one grid cell, stacked on top of each other; only the current one is visible and the rest are invisible and hidden from screen readers, so the cell is always as tall as the tallest. The bar is therefore 44 pixels whether the answer is the threshold, a delivery time or the error, and nothing below it moves.

A polite status line is on the page from the start and stays empty until a check runs, then holds the answer, so it's announced once. Editing the field clears it again. The visible answer is also tied to the field with aria-describedby, and the field is marked aria-invalid when the postcode can't be read.

It's the strip's one action, so it takes the same button as every other primary in these blocks, in its outline form and extra-small size so it fits inside the field and keeps the bar at 44 pixels. It's a submit button in a form, so Enter in the field does the same thing.

The label, field and button share the first line (the truck icon is dropped) and the answer is on the second, so the strip is two lines at most, about 72 pixels at 320. In a right-to-left page the order mirrors, and the answer's text sits in a bdi so the postcode keeps its order.