Audit Scorecard Success Block for React

Nothing was scanned and nothing is certified. The six families, their checks and the findings are typed in FAMILIES and FINDINGS, and no standard is named. To wire it, build those from your review (each family's passed and total checks, and a finding for each check that did not pass), set the report number and the dates, and point the primary at the full report.

From the rows. The ring's 94 and the "94 of 100" are the sums of the six families' passed and total checks, each row's percentage is rounded from its own two numbers, and the critical, low and medium counts come from the findings list, so the heading, the list, the ring and the PDF all say the same figures.

As one cell per check, filled for a pass and hollow for a check that did not pass, and every row also says it in words ("19 of 20, 95%"). The ring is a drawing hidden from assistive technology, and the same score is written beside it in text.

Yes. The page builds a small one-page PDF in the browser from the same figures (the families, the counts and each open finding) and saves it through a Download Trigger. It is plain text in one font, named as a sample, and says in its second line that it certifies nothing. In your app, return the real document from your server instead. There is no print button.

No. The words say a sample review passed its own checklist and give the date of the next review; they name no standard, no auditor and no certificate.

The message comes first, with the primary beside a download button that shows only its icon, then the scorecard, with the ring at the start of its heading and the six rows under it. The report number and the day leave the list to keep the page short.

It is a Shine Button used as a link to your own route. It is a Shine Button with render set to an a element and nativeButton={false}.