@learningpool/ui 1.6.3 → 1.6.5

package/src/lib/components/datadisplay/Chip/Chip.test.tsx

@@ -1,82 +0,0 @@
-import React from 'react'
-import { cleanup, render, screen } from '@testing-library/react'
-import userEvent from '@testing-library/user-event'
-import Chip from './Chip'
-import FaceIcon from '@mui/icons-material/Face'
-import Avatar from '@mui/material/Avatar'
-
-// Note: running cleanup afterEach is done automatically for you in @testing-library/react@9.0.0 or higher
-// unmount and cleanup DOM after the test is finished.
-afterEach(cleanup)
-
-describe('Test -- Chip component', () => {
-  it('renders a Chip', () => {
-    render(<Chip data-testid="ChipTest" label="label" />)
-
-    expect(screen.getByTestId('ChipTest')).toMatchInlineSnapshot(`
-      <div
-        class="MuiChip-root MuiChip-filled MuiChip-sizeMedium MuiChip-colorDefault MuiChip-filledDefault css-gac2fo-MuiChip-root"
-        data-testid="ChipTest"
-      >
-        <span
-          class="MuiChip-label MuiChip-labelMedium css-6od3lo-MuiChip-label"
-        >
-          label
-        </span>
-      </div>
-    `)
-  })
-
-  it('responds to a click event', () => {
-    const mockCallBack = jest.fn()
-    render(
-      <Chip onClick={mockCallBack} data-testid="ChipTest" label="label" />
-    )
-
-    userEvent.click(screen.getByTestId('ChipTest'))
-    expect(mockCallBack.mock.calls.length).toEqual(1)
-  })
-
-  it('renders a link element', () => {
-    render(
-      <Chip
-        label="label"
-        data-testid="ChipTest"
-        component="a"
-        href="#"
-        clickable
-      />
-    )
-
-    const chip = screen.getByTestId('ChipTest')
-    expect(chip).toHaveAttribute('href', '#')
-  })
-
-  it('renders a delete icon', () => {
-    const mockCallBack = jest.fn()
-    render(
-      <Chip label="label" data-testid="ChipTest" onDelete={mockCallBack} />
-    )
-
-    expect(screen.getByTestId('CancelIcon')).toBeInTheDocument()
-  })
-
-  it('responds to a delete click event', () => {
-    const mockCallBack = jest.fn()
-    render(<Chip label="label" onDelete={mockCallBack} />)
-    userEvent.click(screen.getByTestId('CancelIcon'))
-    expect(mockCallBack.mock.calls.length).toEqual(1)
-  })
-
-  it('renders with correct adornments', () => {
-    // Check render with icon
-    const { rerender } = render(<Chip icon={<FaceIcon />} label="label" />)
-    const chip = screen.getByTestId('FaceIcon')
-    expect(chip).toBeInTheDocument()
-
-    // Check render with avatar
-    rerender(<Chip avatar={<Avatar>LP</Avatar>} label="Label" />)
-    const chipAvatar = screen.getByText('LP')
-    expect(chipAvatar).toBeInTheDocument()
-  })
-})

package/src/lib/components/datadisplay/Chip/Chip.tsx

@@ -1,11 +0,0 @@
-import React from 'react'
-import MUIChip from '@mui/material/Chip'
-import type { ChipProps } from '@mui/material/Chip'
-
-interface IChipProps extends ChipProps {}
-
-export default function Chip ({ ...rest }: IChipProps): JSX.Element {
-  return (
-    <MUIChip {...rest} />
-  )
-}

package/src/lib/components/datadisplay/List/List.test.tsx

@@ -1,168 +0,0 @@
-/**
- * @jest-environment jsdom
- */
-
-import React from 'react'
-import { cleanup, render, screen } from '@testing-library/react'
-import userEvent from '@testing-library/user-event'
-import List from './List'
-import {
-  ListItem,
-  ListItemText,
-  ListItemButton,
-  ListItemIcon
-} from '../../../'
-import FaceIcon from '@mui/icons-material/Face'
-
-// Note: running cleanup afterEach is done automatically for you in @testing-library/react@9.0.0 or higher
-// unmount and cleanup DOM after the test is finished.
-afterEach(cleanup)
-
-describe('Test -- List component', () => {
-  it('renders a List', () => {
-    render(
-      <List data-testid="ListTest">
-        <ListItem>
-          <ListItemText primary="One" />
-        </ListItem>
-      </List>
-    )
-
-    expect(screen.getByTestId('ListTest')).toMatchInlineSnapshot(`
-      <ul
-        class="MuiList-root MuiList-padding css-h4y409-MuiList-root"
-        data-testid="ListTest"
-      >
-        <li
-          class="MuiListItem-root MuiListItem-gutters MuiListItem-padding css-1p823my-MuiListItem-root"
-        >
-          <div
-            class="MuiListItemText-root css-tlelie-MuiListItemText-root"
-          >
-            <span
-              class="MuiTypography-root MuiTypography-body1 MuiListItemText-primary css-10hburv-MuiTypography-root"
-            >
-              One
-            </span>
-          </div>
-        </li>
-      </ul>
-    `)
-  })
-
-  it('renders the proper DOM elements', () => {
-    const { rerender } = render(
-      <List data-testid="ListTest" component="ol">
-        <ListItem>
-          <ListItemText primary="One" />
-        </ListItem>
-      </List>
-    )
-    expect(screen.getByTestId('ListTest')).toMatchInlineSnapshot(`
-      <ol
-        class="MuiList-root MuiList-padding css-h4y409-MuiList-root"
-        data-testid="ListTest"
-      >
-        <li
-          class="MuiListItem-root MuiListItem-gutters MuiListItem-padding css-1p823my-MuiListItem-root"
-        >
-          <div
-            class="MuiListItemText-root css-tlelie-MuiListItemText-root"
-          >
-            <span
-              class="MuiTypography-root MuiTypography-body1 MuiListItemText-primary css-10hburv-MuiTypography-root"
-            >
-              One
-            </span>
-          </div>
-        </li>
-      </ol>
-    `)
-
-    rerender(
-      <List data-testid="ListTest" component="nav">
-        <ListItemButton>
-          <ListItemText primary="One" />
-        </ListItemButton>
-      </List>
-    )
-    expect(screen.getByTestId('ListTest')).toMatchInlineSnapshot(`
-      <nav
-        class="MuiList-root MuiList-padding css-h4y409-MuiList-root"
-        data-testid="ListTest"
-      >
-        <div
-          class="MuiButtonBase-root MuiListItemButton-root MuiListItemButton-gutters css-16ac5r2-MuiButtonBase-root-MuiListItemButton-root"
-          role="button"
-          tabindex="0"
-        >
-          <div
-            class="MuiListItemText-root css-tlelie-MuiListItemText-root"
-          >
-            <span
-              class="MuiTypography-root MuiTypography-body1 MuiListItemText-primary css-10hburv-MuiTypography-root"
-            >
-              One
-            </span>
-          </div>
-          <span
-            class="MuiTouchRipple-root css-8je8zh-MuiTouchRipple-root"
-          />
-        </div>
-      </nav>
-    `)
-  })
-
-  it('renders a selected element', () => {
-    render(
-      <List data-testid="ListTest">
-        <ListItemButton selected={true}>
-          <ListItemText primary="One" />
-        </ListItemButton>
-      </List>
-    )
-    expect(screen.getByRole('button')).toHaveClass('Mui-selected')
-  })
-
-  it('responds to a click event', () => {
-    const mockCallBack = jest.fn()
-    render(
-      <List data-testid="ListTest">
-        <ListItemButton onClick={mockCallBack}>
-          <ListItemText primary="One" />
-        </ListItemButton>
-      </List>
-    )
-
-    userEvent.click(screen.getByRole('button'))
-    expect(mockCallBack.mock.calls.length).toEqual(1)
-  })
-
-  it('renders a list item icon', () => {
-    render(
-      <List data-testid="ListTest">
-        <ListItemButton>
-          <ListItemIcon>
-            <FaceIcon />
-          </ListItemIcon>
-        </ListItemButton>
-      </List>
-    )
-
-    expect(screen.getByTestId('FaceIcon')).toBeInTheDocument()
-  })
-
-  it('renders a list item button', () => {
-    render(
-      <List data-testid="ListTest">
-        <ListItemButton>
-          <ListItemIcon>
-            <FaceIcon />
-          </ListItemIcon>
-        </ListItemButton>
-      </List>
-    )
-
-    expect(screen.getByRole('button')).toBeInTheDocument()
-  })
-})

package/src/lib/components/datadisplay/List/List.tsx

@@ -1,8 +0,0 @@
-import React from 'react'
-import MUIList, { ListProps } from '@mui/material/List'
-
-const List = (props: ListProps): React.ReactElement => (
-  <MUIList {...props} />
-)
-
-export default List

package/src/lib/components/datadisplay/Tooltip/Tooltip.test.tsx

@@ -1,98 +0,0 @@
-import React from 'react'
-import { cleanup, render, screen } from '@testing-library/react'
-import userEvent from '@testing-library/user-event'
-import Tooltip from './Tooltip'
-import Button from '../../../../lib/components/atoms/Button/Button'
-
-// Note: running cleanup afterEach is done automatically for you in @testing-library/react@9.0.0 or higher
-// unmount and cleanup DOM after the test is finished.
-afterEach(cleanup)
-
-describe('Test -- Tooltip component', () => {
-  it('properly renders the Tooltip', async () => {
-    render(
-      <Tooltip title="Tooltip title test" data-testid="TooltipTest">
-        <Button>Tooltip</Button>
-      </Tooltip>
-    )
-
-    // Confirm that the tooltip is not visible
-    expect(screen.queryByText('Tooltip title test')).not.toBeInTheDocument()
-
-    // Hover over the button
-    userEvent.hover(screen.getByTestId('TooltipTest'))
-
-    // Wait for the tooltip to appear and confirm that it is visible
-    expect(await screen.findByText('Tooltip title test')).toBeInTheDocument()
-
-    // Unhover over the button
-    userEvent.unhover(screen.getByTestId('TooltipTest'))
-
-    // Then wait 1 second for the tooltip to disappear and confirm that it is not visible
-    // @TODO: Revisit with act(() => {})
-    // await new Promise(function (resolve) { setTimeout(resolve, 1000) })
-    // expect(screen.queryByText('Tooltip title test')).not.toBeInTheDocument()
-  })
-
-  it('renders a Tooltip on a disabled element', async () => {
-    render(
-      <Tooltip title="Tooltip title test" data-testid="TooltipTest">
-        <span>
-          <Button disabled>Disabled Button</Button>
-        </span>
-      </Tooltip>
-    )
-
-    // Hover over the button
-    userEvent.hover(screen.getByTestId('TooltipTest'))
-
-    // Wait for the tooltip to appear
-    expect(await screen.findByText('Tooltip title test')).toBeInTheDocument()
-  })
-
-  it('has the proper role attribute', () => {
-    render(
-      <Tooltip open={true} title="Tooltip title test">
-        <Button>Button</Button>
-      </Tooltip>
-    )
-
-    expect(screen.getByRole('tooltip')).toHaveAttribute('role', 'tooltip')
-  })
-
-  it('renders the arrow element', () => {
-    render(
-      <Tooltip arrow open={true} title="Tooltip title test">
-        <Button>Button</Button>
-      </Tooltip>
-    )
-
-    // Look for the arrow <span> element inside the tooltip
-    expect(screen.getByRole('tooltip')).toContainHTML('<span class="MuiTooltip-arrow')
-  })
-
-  it('properly renders a followCursor Tooltip', async () => {
-    render(
-      <Tooltip followCursor title="Tooltip title test" data-testid="TooltipTest">
-        <Button>Tooltip</Button>
-      </Tooltip>
-    )
-
-    // Confirm that the tooltip is not visible
-    expect(screen.queryByText('Tooltip title test')).not.toBeInTheDocument()
-
-    // Hover over the button
-    userEvent.hover(screen.getByTestId('TooltipTest'))
-
-    // Wait for the tooltip to appear and confirm that it is visible
-    expect(await screen.findByText('Tooltip title test')).toBeInTheDocument()
-
-    // Unhover over the button
-    userEvent.unhover(screen.getByTestId('TooltipTest'))
-
-    // Then wait 1 second for the tooltip to disappear and confirm that it is not visible
-    // @TODO: Revisit with act(() => {})
-    // await new Promise(function (resolve) { setTimeout(resolve, 1000) })
-    // expect(screen.queryByText('Tooltip title test')).not.toBeInTheDocument()
-  })
-})

package/src/lib/components/datadisplay/Tooltip/Tooltip.tsx

@@ -1,9 +0,0 @@
-import React from 'react'
-import MUITooltip, { TooltipProps } from '@mui/material/Tooltip'
-
-const Tooltip = (props: TooltipProps): JSX.Element => (
-  <MUITooltip {...props} />
-)
-Tooltip.muiName = 'MUITooltip'
-
-export default Tooltip

package/src/lib/components/feedback/Alert/Alert.test.tsx

@@ -1,139 +0,0 @@
-import React from 'react'
-import { cleanup, render, screen } from '@testing-library/react'
-import userEvent from '@testing-library/user-event'
-import Alert from './Alert'
-import AlertTitle from '@mui/material/AlertTitle'
-import CheckIcon from '@mui/icons-material/Check'
-import Button from '../../../../lib/components/atoms/Button/Button'
-
-// Note: running cleanup afterEach is done automatically for you in @testing-library/react@9.0.0 or higher
-// unmount and cleanup DOM after the test is finished.
-afterEach(cleanup)
-
-describe('Test -- Alert component', () => {
-  it('renders a Alert', () => {
-    render(<Alert severity="error">This is an error</Alert>)
-
-    expect(screen.getByRole('alert')).toMatchInlineSnapshot(`
-      <div
-        class="MuiPaper-root MuiPaper-elevation MuiPaper-rounded MuiPaper-elevation0 MuiAlert-root MuiAlert-standardError MuiAlert-standard css-xilmwd-MuiPaper-root-MuiAlert-root"
-        role="alert"
-      >
-        <div
-          class="MuiAlert-icon css-1ytlwq5-MuiAlert-icon"
-        >
-          <svg
-            aria-hidden="true"
-            class="MuiSvgIcon-root MuiSvgIcon-fontSizeInherit css-1vooibu-MuiSvgIcon-root"
-            data-testid="ErrorOutlineIcon"
-            focusable="false"
-            viewBox="0 0 24 24"
-          >
-            <path
-              d="M11 15h2v2h-2zm0-8h2v6h-2zm.99-5C6.47 2 2 6.48 2 12s4.47 10 9.99 10C17.52 22 22 17.52 22 12S17.52 2 11.99 2zM12 20c-4.42 0-8-3.58-8-8s3.58-8 8-8 8 3.58 8 8-3.58 8-8 8z"
-            />
-          </svg>
-        </div>
-        <div
-          class="MuiAlert-message css-1pxa9xg-MuiAlert-message"
-        >
-          This is an error
-        </div>
-      </div>
-    `)
-  })
-
-  it('renders a visible description', () => {
-    render(
-      <Alert>
-        <AlertTitle>AlertTitle Test</AlertTitle>
-        This is an alert
-      </Alert>
-    )
-
-    expect(screen.getByText('AlertTitle Test')).toBeVisible()
-  })
-
-  it('renders the proper icons', () => {
-    // Check error icon
-    const { rerender } = render(
-      <Alert severity="error">This is an alert</Alert>
-    )
-    expect(screen.getByTestId('ErrorOutlineIcon')).toBeVisible()
-
-    // Check warning icon
-    rerender(<Alert severity="warning">This is an alert</Alert>)
-    expect(screen.getByTestId('ReportProblemOutlinedIcon')).toBeVisible()
-
-    // Check info icon
-    rerender(<Alert severity="info">This is an alert</Alert>)
-    expect(screen.getByTestId('InfoOutlinedIcon')).toBeVisible()
-
-    // Check success icon
-    rerender(<Alert severity="success">This is an alert</Alert>)
-    expect(screen.getByTestId('SuccessOutlinedIcon')).toBeVisible()
-
-    // Check custom icon
-    rerender(
-      <Alert icon={<CheckIcon fontSize="inherit" />}>This is an alert</Alert>
-    )
-    expect(screen.getByTestId('CheckIcon')).toBeVisible()
-  })
-
-  it('renders the proper action elements', () => {
-    // Check action renders Button
-    const { rerender } = render(
-      <Alert action={<Button data-testid="AlertTest">UNDO</Button>}>
-        This is an alert
-      </Alert>
-    )
-    expect(screen.getByTestId('AlertTest')).toBeVisible()
-
-    // Check onClose renders icon
-    rerender(<Alert onClose={() => {}}>This is an alert</Alert>)
-    expect(screen.getByTestId('CloseIcon')).toBeVisible()
-  })
-
-  it('responds to a delete click event', () => {
-    const mockCallBack = jest.fn()
-    render(<Alert onClose={mockCallBack}>This is an alert</Alert>)
-    userEvent.click(screen.getByRole('button'))
-    expect(mockCallBack.mock.calls.length).toEqual(1)
-  })
-
-  it('has the proper attributes', () => {
-    // Check the role attribute
-    const { rerender } = render(
-      <Alert data-testid="AlertTest">This is an alert</Alert>
-    )
-    expect(screen.getByTestId('AlertTest')).toHaveAttribute('role', 'alert')
-
-    // Check the action button attributes
-    rerender(
-      <Alert
-        data-testid="AlertTest"
-        action={<Button data-testid="AlertTestButton">UNDO</Button>}
-      >
-        This is an alert
-      </Alert>
-    )
-    expect(screen.getByTestId('AlertTestButton')).toBeVisible()
-    expect(screen.getByTestId('AlertTestButton')).toHaveAttribute(
-      'type',
-      'button'
-    )
-    expect(screen.getByTestId('AlertTestButton')).toHaveAttribute(
-      'tabindex',
-      '0'
-    )
-
-    // Check the onClose attributes
-    rerender(<Alert onClose={() => {}}>This is an alert</Alert>)
-    expect(screen.getByLabelText('Close')).toBeVisible()
-    expect(screen.getByLabelText('Close')).toHaveAttribute(
-      'aria-label',
-      'Close'
-    )
-    expect(screen.getByLabelText('Close')).toHaveAttribute('tabindex', '0')
-  })
-})

package/src/lib/components/feedback/Alert/Alert.tsx

@@ -1,10 +0,0 @@
-import React from 'react'
-import MUIAlert, { AlertProps } from '@mui/material/Alert'
-
-interface IAlertProps extends AlertProps {}
-
-export default function Alert ({ ...rest }: IAlertProps): JSX.Element {
-  return (
-    <MUIAlert {...rest} />
-  )
-}

package/src/lib/components/landmarks/Header/Header.tsx

@@ -1,140 +0,0 @@
-import React, { useEffect } from 'react'
-import Button from '@mui/material/Button'
-import Link from '@mui/material/Link'
-import Typography from '@mui/material/Typography'
-import useMediaQuery from '@mui/material/useMediaQuery'
-import useTheme from '@mui/material/styles/useTheme'
-import HeaderActionButtons from './HeaderActionButtons'
-import { StyledAdditionalButtonsContainer, StyledBreadcrumbs, StyledHeaderPrimary, StyledHeaderSecondary, StyledPaper } from './HeaderStyles'
-import { DEFAULT_MAX_CHARACTERS_PER_LINE } from '../../../utils/constants'
-
-interface AdditionalButtonItemProps {
-  label: string
-  onClick?: any
-  icon?: React.ReactElement
-  hide?: boolean
-}
-
-interface BreadcrumbItemProps {
-  label: string
-  href: string
-  color?: string
-}
-
-interface HeaderProps {
-  title: string
-  titleComponent?: React.ElementType<any>
-  maxCharactersPerLine?: number
-  subtitle?: string
-  callToAction?: any
-  callToActionComponent?: 'button' | 'link' | string
-  additionalButtons?: AdditionalButtonItemProps[]
-  isSticky?: boolean
-
-  // Breadcrumbs
-  breadcrumbItems?: BreadcrumbItemProps[]
-  maxBreadcumbItems?: number
-}
-
-const Header = (
-  props: HeaderProps
-): React.ReactElement => {
-  const {
-    title, subtitle, breadcrumbItems, maxBreadcumbItems,
-    callToAction, callToActionComponent, isSticky, titleComponent,
-    maxCharactersPerLine, ...rest
-  } = props
-  let { additionalButtons } = props
-  const theme = useTheme()
-  const isMediumAndUp = useMediaQuery(theme.breakpoints.up('md'))
-
-  useEffect(() => {
-    if (!callToAction) {
-      return
-    }
-
-    callToAction.hide = isMediumAndUp
-
-    // No additional buttons exist so CallToAction is the only item in the list
-    if (!additionalButtons || additionalButtons.length === 0) {
-      if (callToAction) {
-        additionalButtons = []
-        additionalButtons.push(callToAction)
-        return
-      }
-    }
-
-    // Additional buttons exist so add the CallToAction as the first item in the list
-    if (additionalButtons && additionalButtons.length > 0) {
-      const callToActionIndex = additionalButtons.indexOf(callToAction)
-      const hasCallToActionInArray = callToActionIndex !== -1
-
-      if (!hasCallToActionInArray) {
-        // Add the CallToAction item to the top of the Menu
-        additionalButtons.splice(0, 0, callToAction)
-      }
-
-      if (hasCallToActionInArray) {
-        // Show or hide the CallToAction item based on 'isMediumAndUp'
-        additionalButtons[callToActionIndex].hide = callToAction.hide
-      }
-    }
-  }, [props.additionalButtons, isMediumAndUp])
-
-  return (
-    <StyledPaper
-      {...rest}
-      elevation={0}
-      className={`${isSticky && 'is-sticky'}`}
-    >
-      <StyledHeaderPrimary>
-        {breadcrumbItems && breadcrumbItems.length > 0 && (
-          <StyledBreadcrumbs
-            maxItems={maxBreadcumbItems ?? 2}
-            aria-label='breadcrumb'
-            separator={theme.direction === 'ltr' ? '/' : '\\'}
-          >
-            {breadcrumbItems.map(breadcrumbItem => (
-              <Link
-                underline='hover'
-                color={breadcrumbItem.color ?? 'inherit'}
-                href={breadcrumbItem.href}
-              >
-                {breadcrumbItem.label}
-              </Link>
-            ))}
-          </StyledBreadcrumbs>
-        )}
-
-        <Typography
-          component={titleComponent ?? 'h1'}
-          // Good support for 'ch' https://caniuse.com/ch-unit
-          style={{ maxWidth: `${maxCharactersPerLine ?? DEFAULT_MAX_CHARACTERS_PER_LINE}ch` }}
-        >{title}</Typography>
-        {subtitle && (
-          <Typography
-            component='h2'
-            variant='subtitle1'
-            color={theme.palette.text.secondary}
-            style={{ maxWidth: `${maxCharactersPerLine ?? DEFAULT_MAX_CHARACTERS_PER_LINE}ch` }}
-          >{subtitle}</Typography>
-        )}
-      </StyledHeaderPrimary>
-
-      <StyledHeaderSecondary>
-        {isMediumAndUp && callToAction && (
-          callToActionComponent && callToActionComponent === 'link'
-            ? <Button href='#' startIcon={callToAction.icon ?? null}>{callToAction.label}</Button>
-            : <Button startIcon={callToAction.icon ?? null} variant='contained'>{callToAction.label}</Button>
-        )}
-        {additionalButtons && additionalButtons.length > 0 && (
-          <StyledAdditionalButtonsContainer>
-            <HeaderActionButtons forceListView options={additionalButtons} />
-          </StyledAdditionalButtonsContainer>
-        )}
-      </StyledHeaderSecondary>
-    </StyledPaper>
-  )
-}
-
-export default Header