@learningpool/ui 1.6.0 → 1.6.1

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

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

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

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

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

@@ -0,0 +1,62 @@
+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%'
+  }
+}))