@learningpool/ui 1.6.2 → 1.6.5

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

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

@@ -1,117 +0,0 @@
-import { useState } from 'react'
-import Icon from '@mui/material/Icon'
-import Menu from '@mui/material/Menu'
-import MenuItem from '@mui/material/MenuItem'
-import IconButton from '@mui/material/IconButton'
-import Tooltip from '@mui/material/Tooltip'
-import MoreVertIcon from '@mui/icons-material/MoreVert'
-
-const MAX_ICONS = 0
-
-const HeaderActionButtons = (props: any) => {
-  const { options, styles, forceListView } = props
-  const [anchorEl, setAnchorEl] = useState(null)
-
-  const handleClick = (event: any) => {
-    event?.stopPropagation()
-    setAnchorEl(event.currentTarget)
-  }
-
-  const handleClose = (event: any) => {
-    event?.stopPropagation()
-    setAnchorEl(null)
-  }
-
-  const handleOptionClick = (event: any, option: any) => {
-    event?.stopPropagation()
-    option?.onClick()
-    handleClose(event)
-  }
-
-  if (!options) {
-    console.log('Did you mean to pass items using the `options` parameter?')
-    return null
-  }
-
-  // Show icon buttons if less than MAX_ICONS
-  if (options.length <= MAX_ICONS && !forceListView) {
-    return (
-      <div style={styles}>
-        {options.map((option: any) => {
-          const { label, icon, onClick } = option
-          const handleOptionClick = onClick
-
-          return (
-            <Tooltip
-              key={label}
-              title={label}
-              aria-label={label}
-              placement='bottom'
-              enterDelay={500}
-              enterNextDelay={50}
-              leaveDelay={50}
-              disableInteractive
-            >
-              <IconButton
-                size='small'
-                aria-label={label}
-                onClick={handleOptionClick}
-              >
-                <Icon>{icon}</Icon>
-              </IconButton>
-            </Tooltip>
-          )
-        })}
-      </div>
-    )
-  }
-
-  // Show menu and v-ellipsis if more than MAX_ICONS
-  return (
-    <div style={styles}>
-      <IconButton
-        aria-label='more'
-        aria-haspopup='true'
-        onClick={handleClick}
-      >
-        <MoreVertIcon />
-      </IconButton>
-      <Menu
-        id='actionButtonMenu'
-        anchorEl={anchorEl}
-        open={Boolean(anchorEl)}
-        onClose={handleClose}
-        anchorOrigin={{
-          vertical: 'bottom',
-          horizontal: 'center'
-        }}
-        // getContentAnchorEl={null}
-        transformOrigin={{
-          vertical: 'top',
-          horizontal: 'center'
-        }}
-      >
-        {options.map((option: any) => {
-          const { label, isDisabled, actionKey, hide } = option
-
-          if (hide) {
-            return null
-          }
-
-          return (
-            <MenuItem
-              key={actionKey}
-              onClick={event => handleOptionClick(event, option)}
-              aria-label={label}
-              disabled={isDisabled}
-            >
-              {label}
-            </MenuItem>
-          )
-        })}
-      </Menu>
-    </div>
-  )
-}
-
-export default HeaderActionButtons

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

@@ -1,62 +0,0 @@
-import { Box, Paper } from '../../../index'
-import { Breadcrumbs, styled } from '@mui/material'
-
-export const StyledPaper = styled(Paper)`
-  display: flex;
-  flex-direction: ${props => props.theme.direction === 'ltr' ? 'row' : 'row-reverse'};
-  position: relative;
-  width: 100%;
-
-  &.is-sticky {
-    position: sticky;
-    top: 0;
-    z-index: 1;
-  }
-`
-
-export const StyledBreadcrumbs = styled(Breadcrumbs)`
-  font-size: ${props => props.theme.typography.subtitle2.fontSize};
-  margin-bottom: 0.5rem;
-
-  ol {
-    flex-direction: ${props => props.theme.direction === 'ltr' ? 'row' : 'row-reverse'};
-  }
-`
-
-export const StyledHeaderPrimary = styled(Box)`
-  align-items: ${props => props.theme.direction === 'ltr' ? 'flex-start' : 'flex-end'};
-  display: flex;
-  flex: 1 auto;
-  flex-direction: column;
-  padding: 1rem;
-  padding-inline-start: 2rem;
-
-  h1,
-  h4 {
-    font-size: clamp(1.125rem, 3.25vw, 2.75rem);
-    text-align: ${props => props.theme.direction === 'ltr' ? 'left' : 'right'};
-  }
-`
-
-export const StyledHeaderSecondary = styled(Box)`
-  align-items: center;
-  display: flex;
-  flex-direction: ${props => props.theme.direction === 'ltr' ? 'row' : 'row-reverse'};
-  justify-content: flex-end;
-  padding: 1rem;
-  padding-inline-end: 2rem;
-
-  button,
-  a {
-    white-space: nowrap;
-  }
-`
-
-export const StyledAdditionalButtonsContainer = styled(Box)`
-  margin-inline-start: ${props => props.theme.direction === 'ltr' ? '0.5rem' : '0'};
-  margin-inline-end: ${props => props.theme.direction === 'rtl' ? '0.5rem' : '0'};
-`
-
-export const StyledBox = styled(Box)`
-  background: ${props => props.theme.palette.background.default};
-`

package/src/lib/components/navigation/Drawer/Drawer.test.tsx

@@ -1,95 +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 { Drawer } from '../../../../lib'
-
-// 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 -- Drawer component', () => {
-  it('renders a Drawer', () => {
-    render(
-      <Drawer open={true} data-testid="DrawerTest">
-        Test
-      </Drawer>
-    )
-
-    expect(screen.getByTestId('DrawerTest')).toMatchInlineSnapshot(`
-      <div
-        class="MuiDrawer-root MuiDrawer-modal MuiModal-root css-11wwa2f-MuiModal-root-MuiDrawer-root"
-        data-testid="DrawerTest"
-        role="presentation"
-      >
-        <div
-          aria-hidden="true"
-          class="MuiBackdrop-root css-i9fmh8-MuiBackdrop-root-MuiModal-backdrop"
-          style="opacity: 1; webkit-transition: opacity 225ms cubic-bezier(0.4, 0, 0.2, 1) 0ms; transition: opacity 225ms cubic-bezier(0.4, 0, 0.2, 1) 0ms;"
-        />
-        <div
-          data-test="sentinelStart"
-          tabindex="0"
-        />
-        <div
-          class="MuiPaper-root MuiPaper-elevation MuiPaper-elevation16 MuiDrawer-paper MuiDrawer-paperAnchorLeft css-4t3x6l-MuiPaper-root-MuiDrawer-paper"
-          tabindex="-1"
-        >
-          Test
-        </div>
-        <div
-          data-test="sentinelEnd"
-          tabindex="0"
-        />
-      </div>
-    `)
-  })
-
-  it('should be closed by default', () => {
-    render(
-      <div data-testid="parent">
-        <Drawer>Test</Drawer>
-      </div>
-    )
-
-    const parent = screen.getByTestId('parent')
-    expect(parent).toBeEmptyDOMElement()
-  })
-
-  it('renders a persistant drawer', () => {
-    render(
-      <Drawer variant="persistent" data-testid="test">
-        Test
-      </Drawer>
-    )
-
-    const drawer = screen.getByTestId('test')
-    expect(drawer).toBeInTheDocument()
-  })
-
-  it('responds to a onClick event', () => {
-    const mockCallBack = jest.fn()
-    render(
-      <Drawer open={true} onClick={mockCallBack} data-testid="DrawerTest">
-        Test
-      </Drawer>
-    )
-
-    userEvent.click(screen.getByTestId('DrawerTest'))
-    expect(mockCallBack.mock.calls.length).toEqual(1)
-  })
-
-  it('has the proper tabindex', () => {
-    render(
-      <Drawer open={true} data-testid="DrawerTest">
-        Test
-      </Drawer>
-    )
-
-    const drawer = screen.getByText('Test')
-    expect(drawer).toHaveAttribute('tabindex', '-1')
-  })
-})

package/src/lib/components/navigation/Drawer/Drawer.tsx

@@ -1,21 +0,0 @@
-import React from 'react'
-import MUIDrawer, { DrawerProps } from '@mui/material/Drawer'
-import { styled } from '@mui/material/styles'
-
-interface IDrawerProps extends DrawerProps {
-  component?: string | JSX.Element
-}
-
-const StyledDrawer = styled(MUIDrawer)(({ theme }) => ({}))
-
-const Drawer = React.forwardRef((
-  { ...rest }: IDrawerProps,
-  ref: React.Ref<HTMLDivElement>
-): JSX.Element => (
-  <StyledDrawer
-    {...rest}
-    ref={ref}
-  />
-))
-
-export default Drawer