Please note: this is an archived copy. For the most up to date version see https://docs.google.com/document/d/1PviXkmbkl3Q-2Ygvhgw2nzqeL273cpaCDvlyK-ShEs0/edit?usp=sharing
...
| Table of Contents |
|---|
1 ) Goals / criteria for component review and selection
...
Element | Where’s it used currently? | What are we going to replace it with? | JIRA Ticket |
|---|---|---|---|
Collapsible left-hand menu | SidebarNav.tsx Sidebar.tsx Globals.scss _sidebar.scss | MUI Drawer | |
Breadcrumb.tsx Header.tsx _header.scss | MUI Breadcrumbs | ||
Bootstrap Table Table.tsx @tanstack/react-table Table.tsx useResource.ts agencies/index.tsx hostlms/index.tsx locations/index.tsx requests/index.tsx Table component Details.tsx components/Table/index.ts agencies/index.tsx hostlms/index.tsx locations/index.tsx requests/index.tsx | MUI X Data Grid (see 3.3.1) | ||
Throughout | MUI Typography | ||
HeaderProfileNav.tsx | Replacing dropdown with MUI App Bar | ||
Details.tsx Header.tsx Sidebar.tsx SideBar.nav Groups Hostlms Locations Requests login | MUI Button - one primary button per page (as rule - occasional exceptions may be necessary) | ||
Profile.tsx | React Icons - standard switch from FontAwesome icons currently present (and any others) | ||
Search | Table.tsx | MUI X Data Grid Quick Filter (Will be implemented as part of the Data Grid) | |
Profile.tsx | MUI Card + Paper (to hold cards) | ||
Details.tsx AddAgenciesToGroup.tsx agencies/index.tsx groups/index.tsx NewGroup.tsx requests/index.tsx | MUI Modal, Dialog (for things like confirmation). | ||
Pagination (this refers only to the UI pagination controls) | Table.tsx | With customisation so user can go to Page ‘X’ by clicking on the number / typing it in |
...