Props to pass to the actionbar

<ActionBar title='Cool title' />

<Bar>
  <div> Some Children </div>
</Bar>

Props to pass to the body cell

<BodyCell content='Cool Content' />

Ref is forwarded to the Material-UI button to allow for wrapping this button with a Tooltip

Props to pass to the button

<Button label='button' onClick={() => undefined} variant='contained' color='primary' />

Props to pass to the Checkbox component

 <FieldArray
   name='fieldArrayName'
   render={arrayHelpers =>
     arrayWithStrings((entry, index) => (
       <Grid item xs={4} key={index}>
         <Checkbox
           name={entry}
           value={entry}
           label={t(`form.fieldArrayName.labels.${entry}`)}
           tooltipText={t(`form.fieldArrayName.tooltips.${entry}`)}
           data-qa={`checkbox-${entry.toLowerCase()}`}
           checked={values['fieldArrayName'].includes(entry)}
           onChange={(e: CheckboxChangeEvent) => {
             if (e.target.checked) {
               arrayHelpers.push(entry);
             } else {
               const idx = values['fieldArrayName'].indexOf(entry);
               arrayHelpers.remove(idx);
             }
           }}
         />
       </Grid>
     ))
   }
 />

Props to pass to the confirmation modal

<ConfirmationModal
  modalType='warning'
  open={true}
  topic='SAMPLE TOPIC'
  cancelButtonText='CANCEL'
  okButtonText='OK'
  confirmAction={console.log}
  closeAction={console.log}
  modalqas={{
     modal: 'sample',
     content: 'sample-content',
     title: 'sample-title',
     actions: 'sample-actions',
     actionCancel: 'sample-action-cancel',
     actionConfirm: 'sample-action-confirm',
  }}
  dialogContent={ <ModalContent><div>SAMPLE</div></ModalContent> }
/>

<Dropdownbutton ButtonIcon={<CloudDownload/>} onClick={() => undefined} options={[ 'one', 'two' ]} />

Props to pass to the Floating Action Button. Also supports all properties applicable to Material-UI's Fab API and webcomponents TooltipProps

<FloatingActionButton tooltipContent='Cool Tooltip' children={<SearchIcon/>}/>

Props to pass to the TableHeader cell

Props to pass to the ItalicTrans component

<ItalicTrans titleKey='sample.key.normal' italicKey='sample.key.italic'/>

Props to pass to the loading skeleton

<LoadingSkeleton
  data-qa='loading-skeleton'
  width={500} height={50}
/>

<Logo height={125} width={314}/>

Props to pass to the modal - ModalProps

<Modal
  topic='topic'
  modalqas={{
    modal: 'modal',
    content: 'content',
    title: 'title',
  }}
  dialogContent={<div>SAMPLE</div>}
  open={true}
/>

Props to pass to the modal content

<ModalContent>
  <p>{text}</p>
</ModalContent>

Props to pass to the table pagination

<TablePagination
  labelRowsPerPage='rows per page'
  labelPaginationOf='of'
  rowsPerPageOptions={[1, 5, 10]}
  rowsPerPage={10}
  page={0}
  count={20}
  onPageChange={console.log}
  onRowsPerPageChange={console.log}
  data-qa='table-pagination'
/>

Props to pass to the table pagination

Includes list of paths and components as well as the option to pass data-qa and additional props

 <div>
   <Router
     defaultComponent={{ path: '/', component: () => <div>TEST</div> }}
     data-qa='TestRouter'
     otherComponents={[
       { path: '/app', component: () => <div>APP</div>, 'data-qa': 'AppRoute' },
       { path: '/contact', component: () => <Contact />, 'data-qa': 'ContactRoute' }
     ]}
   />
 </div>

Props to pass to the searchbar

<SearchBar
  data-qa='table-search-bar'
  placeholder='Search...'
  onChange={e => debouncedSearch(e.target.value)}
  onCancelSearch={console.log}
  paperElevation={2}
/>

Props to pass to the table

<Table
  showBottomPagination
  showTopPagination
  paperElevation={1}
  onsearchclear={props.handleSearchClear}
  onsearchinput={props.handleSearchInput}
  onRequestSort={props.handleRequestSort}
  onPageChange={props.handleChangePage}
  onRowsPerPageChange={props.handleChangeRowsPerPage}
  tooltipplacement='bottom-start'
  order={props.tableOrder}
  orderby={props.tableOrderBy}
  rowsPerPage={props.tableRowsPerPage}
  rowsPerPageOptions={tableRowsPerPage}
  page={props.tablePage}
  headers={tableHeaders}
  headermapping={tableHeaderMapping}
  rowcount={props.data.length}
  labels={{
    labelPaginationOf: t('table.generic.pagination.of_label'),
    labelRowsPerPage: t('table.generic.pagination.rows_per_page'),
    searchplaceholderlabel: t('table.generic.searchLabel'),
    tooltiplabel: t('table.generic.sortTooltipLabel'),
  }}
  tableqas={{
    header: 'table-header',
    headerRow: 'table-header-row',
    pagination: 'table-pagination',
    table: 'table',
    toolbar: 'table-toolbar',
    headerCell: 'table-header-cell',
    tableBody: 'table-body',
  }}
  extraIcons={[
    {
      icon: <CloudDownload />,
      clickEvent: () => console.log('Clicked button!'),
      tooltipText: 'Tooltip on button',
    }
  ]}
  tablebodycontent={(
    <Fragment>
      {props.data
        .slice(props.tablePage * props.tableRowsPerPage, props.tablePage * props.tableRowsPerPage + Number(props.tableRowsPerPage))
        .map((item, index) => {
          return (
            <TableRow hover tabIndex={-1} key={index} data-qa='table-body-row'>
              <TableBodyCell content={item.name} />
              <TableBodyCell content={item.email} />
            </TableRow>
          );
        })
      }
    </Fragment>
  )}
/>

Props to pass to the Toolbar

<Toolbar
  searchplaceholderlabel='Search...'
  onsearchinput={console.log}
  onsearchclear={console.log}
  searchdebounce={console.log}
  data-qa={{ ...tableQas }}
  extraIcons={props.extraIcons}
/>

Props to pass to the ToolbarButton

<ToolbarButton
  icon={<CloudDownload/>}
  disabled={false}
  onClick={console.log}
  tooltipText='SAMPLE'
  tooltipPlacement={'top'}
  disableTooltip={false}
/>

Props to pass to the Tooltip

<Tooltip title='Tooltip Content' placement='top'>
  <IconButton>
    <CloudDownload color='primary' />
  </IconButton>
</Tooltip>

Props to pass to the UserInfo tooltip

<UserInfo email='a.cool.email' reloginText='relogin' onReloginClick={() => console.log('void')} />

Props to pass to the Zero-Width Space

<ZeroWidthSpace />