diff --git a/showcases/patternhub/components/accessibility-review-info/accessibility-review-info.tsx b/showcases/patternhub/components/accessibility-review-info/accessibility-review-info.tsx new file mode 100644 index 00000000000..355a15795f1 --- /dev/null +++ b/showcases/patternhub/components/accessibility-review-info/accessibility-review-info.tsx @@ -0,0 +1,41 @@ +import { useEffect, useState } from 'react'; +import { DBInfotext, type SemanticType } from '../../../../output/react/src'; + +export type AccessibilityReviewInfoType = { + name: string; + status: 'DONE' | 'REVIEW' | 'PROGRESS' | string; + date: string; +}; + +const AccessibilityReviewInfo = ( + accessibilityReview?: AccessibilityReviewInfoType +) => { + const [semantic, setSemantic] = useState('critical'); + const [text, setText] = useState('Missing'); + + useEffect(() => { + if (accessibilityReview && accessibilityReview.status === 'DONE') { + setSemantic('successful'); + setText('Done'); + } else if ( + accessibilityReview && + accessibilityReview.status === 'REVIEW' + ) { + setSemantic('warning'); + setText('In review'); + } else if ( + accessibilityReview && + accessibilityReview.status === 'PROGRESS' + ) { + setSemantic('warning'); + setText('In progress'); + } else { + setSemantic('critical'); + setText('Missing'); + } + }, [accessibilityReview]); + + return {text}; +}; + +export default AccessibilityReviewInfo; diff --git a/showcases/patternhub/pages/foundations/test-table/index.tsx b/showcases/patternhub/pages/foundations/test-table/index.tsx index febb52cb615..849437286ae 100644 --- a/showcases/patternhub/pages/foundations/test-table/index.tsx +++ b/showcases/patternhub/pages/foundations/test-table/index.tsx @@ -1,6 +1,7 @@ import DefaultPage from '../../../components/default-page'; import { DBInfotext } from '../../../../../output/react/src'; -import { testTableData } from '../../../data/testing-table'; // This file will be generated at runtime +import { testTableData } from '../../../data/testing-table'; +import AccessibilityReviewInfo from '../../../components/accessibility-review-info/accessibility-review-info'; // This file will be generated at runtime const tableHeaders = [ { @@ -29,6 +30,12 @@ const tableHeaders = [ { label: 'Showcase: A11y (Screen-Reader)', href: 'https://github.com/guidepup/guidepup' + }, + { + label: 'Manually accessibility review' + }, + { + label: 'Testing stable' } ]; @@ -63,36 +70,57 @@ const TestTable = () => { showcaseVisuals, showcaseAxe, showcaseAC, - showcaseGP - }) => ( - - {name} - {[ - singleComponentVisuals, - singleComponentAxe, - showcaseVisuals, - showcaseAxe, - showcaseAC, - showcaseGP - ].map((status, index) => ( - + showcaseGP, + accessibilityReview + }) => { + const stable = + singleComponentVisuals && + singleComponentAxe && + showcaseVisuals && + showcaseAxe && + showcaseAC && + showcaseGP && + accessibilityReview?.status === 'DONE'; + return ( + + {name} + {[ + singleComponentVisuals, + singleComponentAxe, + showcaseVisuals, + showcaseAxe, + showcaseAC, + showcaseGP + ].map((status, index) => ( + + + {status ? 'Done' : 'Missing'} + + + ))} + + + + - {status ? 'Done' : 'Missing'} + {stable ? 'Done 🎉' : 'Missing'} - ))} - - ) + + ); + } )} diff --git a/showcases/patternhub/scripts/generate-test-table.js b/showcases/patternhub/scripts/generate-test-table.js index 58a47a572df..58db66a3464 100644 --- a/showcases/patternhub/scripts/generate-test-table.js +++ b/showcases/patternhub/scripts/generate-test-table.js @@ -5,6 +5,12 @@ const generateTestTable = () => { const docs = JSON.parse( FS.readFileSync('./../../output/docs.json', 'utf8').toString() ); + const accessibilityReview = JSON.parse( + FS.readFileSync( + './../shared/_accessibility-review.json', + 'utf8' + ).toString() + ); const data = []; for (const key of Object.keys(docs)) { const componentName = getComponentName(key); @@ -26,6 +32,7 @@ const generateTestTable = () => { const hasScreenReaderTest = FS.existsSync( `./../../showcases/screen-reader/tests/${componentName}.spec.ts` ); + data.push({ name: componentName, singleComponentVisuals: hasComponentTest, @@ -33,7 +40,10 @@ const generateTestTable = () => { showcaseVisuals: hasShowcaseTest, showcaseAxe: hasShowcaseTest, showcaseAC: hasShowcaseTest, - showcaseGP: hasScreenReaderTest + showcaseGP: hasScreenReaderTest, + accessibilityReview: accessibilityReview.find( + (ar) => ar.name === componentName + ) }); } diff --git a/showcases/shared/_accessibility-review.json b/showcases/shared/_accessibility-review.json new file mode 100644 index 00000000000..adea3b50b03 --- /dev/null +++ b/showcases/shared/_accessibility-review.json @@ -0,0 +1,47 @@ +[ + { + "name": "drawer", + "status": "REVIEW", + "date": "2023-11-23" + }, + { + "name": "button", + "status": "REVIEW", + "date": "2023-11-23" + }, + { + "name": "link", + "status": "DONE", + "date": "2023-11-23" + }, + { + "name": "input", + "status": "DONE", + "date": "2023-11-23" + }, + { + "name": "radio", + "status": "REVIEW", + "date": "2023-11-23" + }, + { + "name": "checkbox", + "status": "REVIEW", + "date": "2023-11-23" + }, + { + "name": "select", + "status": "DONE", + "date": "2023-11-23" + }, + { + "name": "infotext", + "status": "DONE", + "date": "2023-11-23" + }, + { + "name": "notification", + "status": "DONE", + "date": "2023-11-23" + } +]