@learningpool/ui 1.6.3 → 1.6.5

package/src/lib/components/pages/ErrorPage/ErrorPage.test.tsx

@@ -1,78 +0,0 @@
-import React from 'react'
-import { cleanup, render, screen } from '@testing-library/react'
-// import userEvent from '@testing-library/user-event'
-import ErrorPage from './ErrorPage'
-
-// 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 -- ErrorPage component', () => {
-  it('renders an ErrorPage', () => {
-    render(
-      <ErrorPage
-        errorCode="404"
-        errorTitle="Uh oh page not found"
-        errorMessage="The page you are looking for does not exist"
-      />
-    )
-
-    expect(screen.getByRole('main')).toMatchInlineSnapshot(`
-      <main
-        class="MuiContainer-root MuiContainer-maxWidthLg css-1gxc64o-MuiContainer-root"
-      >
-        <div
-          class="MuiBox-root css-kvwcap"
-        >
-          <h1
-            class="MuiTypography-root MuiTypography-h4 css-pxw7rc-MuiTypography-root"
-          >
-            <span>
-              404
-               | 
-            </span>
-            <span>
-              Uh oh page not found
-            </span>
-          </h1>
-          <p
-            class="MuiTypography-root MuiTypography-body1 css-1w4gduo-MuiTypography-root"
-          >
-            The page you are looking for does not exist
-          </p>
-        </div>
-        <div
-          class="MuiBox-root css-1xrukd4"
-        >
-          <svg
-            aria-hidden="true"
-            class="MuiSvgIcon-root MuiSvgIcon-fontSizeMedium css-i4bv87-MuiSvgIcon-root"
-            data-testid="LearningPoolIcon"
-            focusable="false"
-            style="width: 200px; height: 45px;"
-          >
-            <svg
-              viewBox="0 0 804 174"
-              xmlns="http://www.w3.org/2000/svg"
-            >
-              <path
-                d="M155.5 0A44 44 0 0 0 121 16.5l-1 1.2-1.2-1a72.5 72.5 0 1 0-46.4 128.1 72.8 72.8 0 0 0 70.7-56.6l.4-1.5 1.5.4a44.2 44.2 0 0 0 44.8-15 44.2 44.2 0 0 0 5.6-47 44.2 44.2 0 0 0-40-25.1zM113 115.2H72.4a42.9 42.9 0 1 1 29.2-11.5l11.4 11.5zm42.5-47.8h-22l6.1-6.2a23.2 23.2 0 1 1 15.9 6.2zm56.2-8.5h14v84h-14zm76 54.3a31.1 31.1 0 0 0-7.5-21.1 29.2 29.2 0 0 0-40.7.2 31.8 31.8 0 0 0-7.8 22 31.2 31.2 0 0 0 7.9 22.2 27.8 27.8 0 0 0 20.9 8.3c2.8 0 5.6-.3 8.4-1a24 24 0 0 0 7.3-3 28.4 28.4 0 0 0 6.3-5.1c1.7-2 3.3-4 4.7-6.2l-12.7-7a28 28 0 0 1-6 6.9 12.3 12.3 0 0 1-7.4 2.1 13 13 0 0 1-9.6-3.7 15.6 15.6 0 0 1-4-9.1v-.4h40.1v-5.1zm-41.7-5.3.3-1.1a16.8 16.8 0 0 1 2-4.6 14 14 0 0 1 3-3.5 13.3 13.3 0 0 1 4.1-2.2 14.5 14.5 0 0 1 4.8-.8c6.8-.4 12.8 4.4 14 11l.3 1.2H246zm90.4-22.4V91a24.2 24.2 0 0 0-16.9-7.2 24.9 24.9 0 0 0-19.2 8.6 30.7 30.7 0 0 0-7.7 21.2 31.7 31.7 0 0 0 7.7 21.6 25.4 25.4 0 0 0 19.6 8.5 25 25 0 0 0 16.5-6.7v5.1h14.2V85.5h-14.2zm-3.6 41a14.3 14.3 0 0 1-11.1 4.7 13.5 13.5 0 0 1-10.6-4.9 18.9 18.9 0 0 1-4.1-12.6 18 18 0 0 1 4.1-12.2 13.8 13.8 0 0 1 10.9-4.8 14 14 0 0 1 10.8 4.8A18.3 18.3 0 0 1 337 114a18.5 18.5 0 0 1-4.3 12.5zm61.7-38.9-6.3 13-.6-.4a11.3 11.3 0 0 0-6.6-2.5c-6.5 0-9.7 5-9.7 15.4v29.7h-13.7V85.5h13.7v4a23.9 23.9 0 0 1 5.3-4.1 14.6 14.6 0 0 1 6.7-1.5 20.7 20.7 0 0 1 10.7 3.4l.5.3zm53 20.2v35H433v-32a19.7 19.7 0 0 0-2.2-11 8.8 8.8 0 0 0-7.8-3 9.4 9.4 0 0 0-8.7 4 28.9 28.9 0 0 0-2.6 14.3v27.7h-14.3V85.5h14.3v4.4a21.8 21.8 0 0 1 14.9-6 20.3 20.3 0 0 1 15.8 6.4c3.3 3.6 5 9.5 5 17.5m22.9-40a8.7 8.7 0 0 1-2.7 6.4 8.5 8.5 0 0 1-6.3 2.7 9 9 0 0 1-6.4-2.6 9 9 0 0 1-2.6-6.4 8.5 8.5 0 0 1 2.7-6.3 8.6 8.6 0 0 1 6.3-2.7 8.7 8.7 0 0 1 6.3 2.7 8.5 8.5 0 0 1 2.7 6.3m-16 18h14v57h-14zm71 22v35H511v-32a19.7 19.7 0 0 0-2.2-11.1 8.8 8.8 0 0 0-7.8-3 9.4 9.4 0 0 0-8.7 4 28.9 28.9 0 0 0-2.5 14.3v27.7h-14.4V85.5h14.4v4.4a21.8 21.8 0 0 1 14.8-6 20.2 20.2 0 0 1 15.8 6.4c3.3 3.6 5 9.5 5 17.5M574 85.4v5.4a23 23 0 0 0-16.9-6.9 24.4 24.4 0 0 0-19.9 9.3 32.9 32.9 0 0 0-7 21 31.2 31.2 0 0 0 7.6 21.3 25.1 25.1 0 0 0 17.8 8.5 25.2 25.2 0 0 0 18.4-7v6.3c0 11.2-4.4 16.7-13.5 16.7a13.4 13.4 0 0 1-11.2-5 14.2 14.2 0 0 1-2.4-6v-.6h-14.2v.7a25.2 25.2 0 0 0 8.8 17.5 28.4 28.4 0 0 0 19 6.2 26.9 26.9 0 0 0 21.3-9 24.1 24.1 0 0 0 5.4-11 51.2 51.2 0 0 0 .7-5.4c.2-2 .3-4.4.3-7v-55H574zm-3.3 40.6a13.6 13.6 0 0 1-11.2 5 13.6 13.6 0 0 1-11.1-5 18.9 18.9 0 0 1-3.7-12 19.1 19.1 0 0 1 3.7-12.3 13.3 13.3 0 0 1 11-5.1 13.9 13.9 0 0 1 11 4.7 18 18 0 0 1 4.1 12.6 18.6 18.6 0 0 1-3.8 12zm73.7-33.4a24.8 24.8 0 0 0-19.5-8.7 24.4 24.4 0 0 0-16.7 6.8v-5.2h-14v87.3h14V137a24.4 24.4 0 0 0 17 7 24.9 24.9 0 0 0 19.2-8.5 30.9 30.9 0 0 0 7.7-21.3 31.3 31.3 0 0 0-7.7-21.6m-32.5 8.8a14.3 14.3 0 0 1 11-4.7 13.5 13.5 0 0 1 10.7 5 18.6 18.6 0 0 1 4.1 12.5 17.8 17.8 0 0 1-4.3 12.3 13.5 13.5 0 0 1-10.6 4.8 14 14 0 0 1-11-4.8 18.4 18.4 0 0 1-4.2-12.5 18.2 18.2 0 0 1 4.2-12.6m97.4-7.9a31.3 31.3 0 0 0-43.2 0 28.3 28.3 0 0 0-9 21 29.4 29.4 0 0 0 9 21.5 29.3 29.3 0 0 0 21.5 8.8 30.4 30.4 0 0 0 21.9-8.6A28.8 28.8 0 0 0 718 115a29 29 0 0 0-8.8-21.4m-10 34a16.9 16.9 0 0 1-23.3 0 18.1 18.1 0 0 1-4.4-12.8 17.2 17.2 0 0 1 4.5-12.3 15.1 15.1 0 0 1 11.5-4.7c4.4-.1 8.7 1.6 11.7 4.7a17.7 17.7 0 0 1 4.4 12.6 17.7 17.7 0 0 1-4.4 12.5m75-35a31.3 31.3 0 0 0-43.3 0 28.2 28.2 0 0 0-8.9 21 29.4 29.4 0 0 0 8.7 21.5 29.3 29.3 0 0 0 21.5 8.8 30.4 30.4 0 0 0 21.9-8.6 28.8 28.8 0 0 0 8.8-21.4 29 29 0 0 0-8.8-21.3m-10 34a16.8 16.8 0 0 1-23.3 0 18.2 18.2 0 0 1-4.3-12.8 17.2 17.2 0 0 1 4.5-12.3 15.1 15.1 0 0 1 11.6-4.7 15.3 15.3 0 0 1 11.6 4.7 17.7 17.7 0 0 1 4.4 12.6 17.7 17.7 0 0 1-4.4 12.5M790 59h14v84h-14z"
-                fill="#0069B4"
-              />
-            </svg>
-          </svg>
-        </div>
-      </main>
-    `)
-  })
-
-  it('renders all props correctly', () => {
-    render(
-      <ErrorPage errorCode="404" errorTitle="Title" errorMessage="Message" />
-    )
-
-    expect(screen.getByText('404 |')).toBeVisible()
-    expect(screen.getByText('Title')).toBeVisible()
-    expect(screen.getByText('Message')).toBeVisible()
-  })
-})

package/src/lib/components/pages/ErrorPage/ErrorPage.tsx

@@ -1,50 +0,0 @@
-import * as React from 'react'
-import { LearningPoolLogo } from '../../../assets/Images'
-import CssBaseline from '@mui/material/CssBaseline'
-import Typography from '@mui/material/Typography'
-import { createTheme, ThemeProvider } from '@mui/material/styles'
-import { StyledContainer, StyledBox, StyledLogoBox } from './ErrorPageStyles'
-
-interface ErrorPageProps {
-  errorCode: string
-  errorTitle: string
-  errorMessage: string
-}
-
-export default function ErrorPage (props: ErrorPageProps): React.ReactElement {
-  const { errorCode, errorTitle, errorMessage } = props
-  const theme = createTheme()
-
-  return (
-    <ThemeProvider theme={theme}>
-      { /* @ts-expect-error */ }
-      <StyledContainer component='main'>
-        <CssBaseline />
-        <StyledBox>
-          <Typography
-            component='h1'
-            variant='h4'
-            sx={{
-              mb: 2
-            }}
-          >
-            {errorCode ? (<span>{errorCode} | </span>) : ''}
-            <span>{errorTitle}</span>
-          </Typography>
-          <Typography
-            variant='body1'
-            sx={{
-              color: 'text.secondary',
-              mb: 3
-            }}
-          >
-            {errorMessage}
-          </Typography>
-        </StyledBox>
-        <StyledLogoBox>
-          <LearningPoolLogo inheritViewBox={true} style={{ width: '200px', height: '45px' }} />
-        </StyledLogoBox>
-      </StyledContainer>
-    </ThemeProvider>
-  )
-}

package/src/lib/components/pages/ErrorPage/ErrorPageStyles.tsx

@@ -1,30 +0,0 @@
-import Box from '@mui/material/Box'
-import Container from '@mui/material/Container'
-import { styled } from '@mui/material/styles'
-
-export const StyledContainer = styled(Container)(() => ({
-  display: 'flex',
-  flexDirection: 'column',
-  height: '100vh',
-  textAlign: 'center'
-}))
-
-export const StyledBox = styled(Box)(() => ({
-  alignItems: 'center',
-  display: 'flex',
-  flex: '1',
-  flexDirection: 'column',
-  height: '100%',
-  justifyContent: 'center',
-  overflow: 'hidden'
-}))
-
-export const StyledLogoBox = styled(Box)(({ theme }) => ({
-  alignSelf: 'center',
-  marginRight: 0,
-  marginBottom: theme.spacing(5),
-  [theme.breakpoints.up('md')]: {
-    alignSelf: 'flex-end',
-    marginRight: theme.spacing(5)
-  }
-}))

package/src/lib/components/pages/SideInSide/SideInSide.tsx

@@ -1,100 +0,0 @@
-import React from 'react'
-import { Button } from '../../../index'
-import CssBaseline from '@mui/material/CssBaseline'
-import Paper from '@mui/material/Paper'
-import Box from '@mui/material/Box'
-import Grid from '@mui/material/Grid'
-import Typography from '@mui/material/Typography'
-import Divider from '@mui/material/Divider'
-import { createTheme, ThemeProvider } from '@mui/material/styles'
-import { SideInSideStyles } from './SideInSideStyles'
-import { LearningPoolLogo, StreamSuiteLogo } from '../../../assets/Images'
-import { Link } from '@mui/material'
-
-function Copyright (props: any): React.ReactElement {
-  return (
-    <Typography variant="body2" color="text.secondary" align="center" {...props}>
-      {'Copyright © '}
-      <Link color="inherit" href="https://learningpool.com/">
-        Learning Pool
-      </Link>{' '}
-      {new Date().getFullYear()}
-      {'.'}
-    </Typography>
-  )
-}
-
-const theme = createTheme()
-
-export default function SideInSide (props: any): React.ReactElement {
-  const classes = SideInSideStyles(props).classes
-
-  return (
-    <ThemeProvider theme={theme}>
-      <Grid container component="main" className={classes.root} style={props?.style}>
-        <CssBaseline />
-
-        <Grid item xs={false} sm={false} md={6} lg={7} xl={8} className={classes.pageBackgroundContainer}>
-          <Box className={classes.pageBackgroundLogoContainer}>
-            {props?.pageBackgroundLogo
-              ? (
-                <img
-                  src={`${String(props.pageBackgroundLogo)}`}
-                  alt={`${String(props.pageBackgroundLogoAlt)}`}
-                  className={classes.pageBackgroundLogo}
-                />)
-              : <StreamSuiteLogo style={{ fill: '#fff', height: '200px', width: '200px' }} />
-            }
-          </Box>
-        </Grid>
-
-        <Grid item xs={12} sm={12} md={6} lg={5} xl={4} component={Paper} elevation={6} square>
-          <Box className={classes.contentPanel}>
-            <Box className={classes.contentPanelImageContainer}>
-              {props?.formLogo
-                ? (
-                  <img
-                    src={`${String(props.formLogo)}`}
-                    alt={`${String(props.formLogoAlt)}`}
-                    className={classes.contentPanelImage}
-                  />)
-                : <LearningPoolLogo inheritViewBox={true} style={{ width: '250px', height: '60px' }} />
-              }
-            </Box>
-
-            {/* TODO: figure out if this should be an H1?? */}
-            <Typography component="h1" variant="h6">
-              {props.welcomeMessage}
-            </Typography>
-
-            {props?.children ? props.children : null}
-
-            {props?.isStreamHomeEnabled
-              ? (
-                <>
-                  <Divider sx={{ mt: 1 }}>
-                    Or
-                  </Divider>
-                  <Button type="submit" onClick={props?.handleStreamHomeLogin} fullWidth className={classes.streamHomeButton}
-                    startIcon={props?.startIcon
-                      ? props.startIcon
-                      : <StreamSuiteLogo style={{ fill: '#fff', height: '25px', width: '25px' }} />
-                    }
-                  >
-                    Log in with Stream Home
-                  </Button>
-                </>)
-              : null
-            }
-
-            <Box className={classes.footerContent}>
-              {/* <Copyright sx={{ mt: 5 }} /> */}
-              {props?.footerContent ? props.footerContent : <Copyright />}
-            </Box>
-          </Box>
-        </Grid>
-
-      </Grid>
-    </ThemeProvider>
-  )
-}

package/src/lib/components/pages/SideInSide/SideInSideStyles.tsx

@@ -1,62 +0,0 @@
-import { Theme } from '@mui/material/styles'
-import { makeStyles } from 'tss-react/mui'
-
-export const SideInSideStyles = makeStyles()((theme: Theme, props: any) => ({
-  root: {
-    height: '100vh',
-    width: '100%'
-  },
-  pageBackgroundContainer: {
-    backgroundImage: props?.pageBackgroundImage
-      ? `url(${String(props.pageBackgroundImage)})`
-      : 'url(https://source.unsplash.com/YWIOwHvRBvU)',
-    backgroundRepeat: 'no-repeat',
-    backgroundColor: theme.palette.mode === 'light' ? theme.palette.grey[50] : theme.palette.grey[900],
-    backgroundSize: 'cover',
-    backgroundPosition: 'center',
-    flex: 1
-  },
-  pageBackgroundLogoContainer: {
-    alignItems: 'center',
-    display: 'flex',
-    flexDirection: 'column',
-    height: '100%',
-    justifyContent: 'center'
-  },
-  pageBackgroundLogo: {
-    maxWidth: '250px'
-  },
-  contentPanel: {
-    alignItems: 'center',
-    display: 'flex',
-    flexDirection: 'column',
-    height: '100%',
-    marginLeft: theme.spacing(6),
-    marginRight: theme.spacing(6),
-    paddingBottom: theme.spacing(2),
-    paddingTop: theme.spacing(8)
-  },
-  contentPanelImageContainer: {
-    alignItems: 'center',
-    display: 'flex',
-    flexDirection: 'column',
-    marginBottom: theme.spacing(3),
-    marginTop: theme.spacing(1)
-  },
-  contentPanelImage: {
-    maxWidth: '400px',
-    width: '66%'
-  },
-  submitButton: {
-    marginBottom: theme.spacing(2),
-    marginTop: theme.spacing(3)
-  },
-  streamHomeButton: {
-    marginBottom: `${theme.spacing(5)} !important`,
-    marginTop: `${theme.spacing(3)} !important`
-  },
-  footerContent: {
-    marginTop: 'auto',
-    width: '100%'
-  }
-}))