Storage Quota Metric Banner Block for React

Edit PLAN_GB and TYPES at the top of the file. Each type has a label, a swatch class and its size in tenths of a gigabyte (41 is 4.1 GB), so the maths is whole numbers. The total used, the percentage in the heading, the free space and each segment's width are worked out from them. To add a type, add an entry and a fourth legend cell appears; the bar and the legend use the same swatch.

A set of hues would put four colours next to the page's one primary action. The three types are your theme's foreground at full, 60% and 30% strength, so they read in light and dark and in every preset, and the legend repeats each shade beside its label, with the free space as the muted track. The legend, not the colour, says which is which, so it reads the same in greyscale.

Past a real limit, tint the used part with the warning token and put the fact in the heading ("Your storage is full"); the status colour is for that, not for an ordinary 84%. Keep the legend in the foreground tones so the sizes stay readable, and make the Upgrade button the Shine Button's default variant if it is the page's one call to action.

The bar is a picture, hidden from assistive technology. The heading and the sentence give the totals ("8.4 GB of 10 GB is in use, and 1.6 GB is left") and the legend is a description list, so a listener hears each type with its size. The sizes are in bdi elements so a right-to-left layout keeps the unit in order, and the bar itself is set left to right.

It is a link (href="#"): point it at your plans page. It renders the link it's given with render, with nativeButton={false}.