@learningpool/ui 1.6.0 → 1.6.1

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

@@ -0,0 +1,139 @@
+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

@@ -0,0 +1,10 @@
+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

@@ -0,0 +1,140 @@
+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

@@ -0,0 +1,117 @@
+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

@@ -0,0 +1,62 @@
+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

@@ -0,0 +1,95 @@
+/**
+ * @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

@@ -0,0 +1,21 @@
+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