Integration Log Changelog Block for React

Edit CONNECTORS at the top of the file, newest first. A connector has an id, a two-letter mark, a name, the change sentence, an ISO date and a state (Connected, Updated or Deprecated), plus a scopes list. The count in the header and the "3 scopes" label are worked out from those arrays, so they stay true when you edit. The day on screen is spelled out from the ISO day by a small helper, so it reads the same on the server and in every browser. Dates are fixed, never computed from today.

The plate is a plain tile with two typed letters, marked as decoration, and the service is named in text beside it. If you have the right to use a service's logo, replace the tile's contents with it. The block does not draw or imitate any brand's mark, and uses no brand colours.

Each button is the trigger of its own popover, so Enter or Space opens it, Escape closes it and focus goes back to the button. The popover has a title ("Slack scopes"), a sentence and a list: each scope is an outline badge with an icon and the word Read or Write, then its name. The button's name is "3 scopes for Slack" for assistive technology, so a screen reader user can tell the buttons apart.

Each state is an outline badge with an icon and the word: a plug for Connected, circular arrows for Updated and an archive box for Deprecated. The icons are marked as decoration, so a screen reader hears the word. The three states are constants at the top of the file.

Below sm the day is dropped, and each row becomes a plate and the text on one line with the state and the scopes button underneath. Nothing moves sideways at 320 pixels, and the popover stays inside the screen.

The header and the list fade up once on load, with CSS transitions, and the popover has its own enter animation. With reduced motion all of them are off and the block simply appears.