@learningpool/ui 1.6.0 → 1.6.1

package/src/lib/components/navigation/MobileNavigation/MobileNavigationDrawer.tsx

@@ -0,0 +1,197 @@
+import * as React from 'react'
+import { useTheme } from '@mui/material/styles'
+import { List, ListItemText } from '../../../index'
+import {
+  StyledSwipeableDrawer, StyledBox, StyledListItem, StyledDivider,
+  StyledListSecondaryItem, StyledDrawerLogo, StyledDrawerLogoText,
+  StyledListSecondaryList, StyledListItemText, StyledListSecondaryButton,
+  StyledChildList, StyledChildListItem, StyledChildListItemText,
+  StyledListItemButton, StyledChildListItemButton
+} from './MobileNavigationDrawerStyles'
+import { StreamSuiteLogo } from '../../../assets/Images'
+import { animated } from '@react-spring/web'
+import { useStaggerAnimation } from '../../../utils/helpers'
+
+export interface IMobileNavigationItemProps {
+  label: string
+  onClick?: any
+  isActive?: boolean
+  children?: IMobileNavigationItemProps[]
+  isDrawerOpen?: boolean
+  index?: number
+  content?: React.ReactElement
+  style?: any
+  open?: boolean
+}
+
+export interface ISwipeableTemporaryDrawerProps {
+  isDrawerOpen: boolean
+  setIsDrawerOpen?: any
+  items?: IMobileNavigationItemProps[]
+  secondaryItems?: IMobileNavigationItemProps[]
+  logo?: string
+  logoText?: string
+  logoOnClick?: any
+  label: string
+  children?: ISwipeableTemporaryDrawerProps[]
+}
+
+export default function SwipeableTemporaryDrawer (props: ISwipeableTemporaryDrawerProps) {
+  const {
+    isDrawerOpen, setIsDrawerOpen, items, secondaryItems,
+    logo, logoText, logoOnClick
+  } = props
+  const theme = useTheme()
+  const [isOpen, setIsOpen] = React.useState(isDrawerOpen ?? false)
+
+  React.useEffect(() => handleOpenState(isDrawerOpen), [isDrawerOpen])
+
+  const handleOpenState = (open: boolean): void => {
+    setIsOpen(open)
+    setIsDrawerOpen(open)
+  }
+
+  const toggleDrawer =
+    (open: boolean) =>
+      (event: React.KeyboardEvent | React.MouseEvent) => {
+        if (event && event.type === 'keydown' &&
+          ((event as React.KeyboardEvent).key === 'Tab' ||
+          (event as React.KeyboardEvent).key === 'Shift')
+        ) {
+          return
+        }
+
+        handleOpenState(open)
+      }
+
+  // First item starts at 70ms
+  // see STAGGER_ITEMS_DELAY in helpers.js
+  let animationCount = 1
+  const incrementAnimationCount = () => animationCount++
+
+  const list = () => (
+    <StyledBox
+      onClick={toggleDrawer(false)}
+      onKeyDown={toggleDrawer(false)}
+    >
+      <StyledDrawerLogo
+        onClick={logoOnClick ?? null}
+        style={useStaggerAnimation(isDrawerOpen, animationCount, incrementAnimationCount)}
+        // whileHover={{ scale: 1.02 }}
+        // whileTap={{ scale: 0.95 }}
+      >
+        {logo
+          ? typeof logo === 'string'
+            ? (
+              <img
+                height={38}
+                width={38}
+                src={logo}
+                alt={logoText ?? 'Site Logo'}
+              />)
+            : logo
+          : (
+            <StreamSuiteLogo style={{
+              fill: theme.palette.mode === 'dark'
+                ? theme.palette.primary.main
+                : theme.palette.primary.main
+            }} />)}
+        <StyledDrawerLogoText variant='body1'>
+          {logoText ?? 'Site Logo'}
+        </StyledDrawerLogoText>
+      </StyledDrawerLogo>
+      <List>
+        {items && items.length > 0 && items.map((item, index) => {
+          const { label, children } = item
+
+          return (
+            <StyledListItem
+              key={label}
+              disablePadding
+              // @ts-expect-error
+              component={animated.li}
+              style={useStaggerAnimation(isDrawerOpen, animationCount, incrementAnimationCount)}
+            >
+              <StyledListItemButton
+                // whileHover={{ scale: 1.02 }}
+                // whileTap={{ scale: 0.95 }}
+                {...item}
+                // component={animated.button}
+                // onMouseEnter={() => set({ y: 0, color: '#000' })}
+                // onMouseLeave={() => set({ y: 100, color: '#fff' })}
+                // style={{
+                //   y,
+                //   color
+                // }}
+              >
+                <StyledListItemText primary={label} />
+              </StyledListItemButton>
+
+              {children && children.length > 0 && (
+                <StyledChildList aria-label={label}>
+                  {children.map(childItem => (
+                    <StyledChildListItem
+                      key={childItem.label}
+                      // whileHover={{ scale: 1.02 }}
+                      // whileTap={{ scale: 0.95 }}
+                    >
+                      <StyledChildListItemButton
+                        // whileHover={{ scale: 1.02 }}
+                        // whileTap={{ scale: 0.95 }}
+                        {...childItem}
+                      >
+                        <StyledChildListItemText key={childItem.label} primary={childItem.label} />
+                      </StyledChildListItemButton>
+                    </StyledChildListItem>
+                  ))}
+                </StyledChildList>
+              )}
+            </StyledListItem>
+          )
+        })}
+      </List>
+      {secondaryItems && secondaryItems.length > 0 && (
+        <>
+          <animated.div style={useStaggerAnimation(isDrawerOpen, animationCount, incrementAnimationCount)}>
+            <StyledDivider/>
+          </animated.div>
+          <StyledListSecondaryList>
+            {secondaryItems && secondaryItems.length > 0 && secondaryItems.map((item, index) => (
+              <StyledListSecondaryItem
+                key={item.label}
+                disablePadding
+                // @ts-expect-error
+                component={animated.li}
+                style={useStaggerAnimation(isDrawerOpen, animationCount, incrementAnimationCount)}
+              >
+                <StyledListSecondaryButton
+                  // whileHover={{ scale: 1.02 }}
+                  // whileTap={{ scale: 0.95, boxShadow: '0 6px 15px rgb(36 37 38 / 0%);' }}
+                  {...item}
+                >
+                  <ListItemText primary={item.label} />
+                </StyledListSecondaryButton>
+              </StyledListSecondaryItem>
+            ))}
+          </StyledListSecondaryList>
+        </>
+      )}
+    </StyledBox>
+  )
+
+  return (
+    <aside>
+      <StyledSwipeableDrawer
+        anchor='bottom'
+        open={isOpen}
+        onClose={toggleDrawer(false)}
+        hideBackdrop
+        ModalProps={{
+          keepMounted: true
+        }}
+      >
+        {list()}
+      </StyledSwipeableDrawer>
+    </aside>
+  )
+}

package/src/lib/components/navigation/MobileNavigation/MobileNavigationDrawerStyles.tsx

@@ -0,0 +1,143 @@
+import {
+  Box, List, ListItem, ListItemText,
+  ListItemButton, Typography
+} from '../../../index'
+import { Drawer } from '@mui/material'
+import { styled } from '@mui/material/styles'
+import { animated } from '@react-spring/web'
+
+export const StyledSwipeableDrawer = styled(Drawer)`
+  .MuiPaper-root {
+    background-color: ${props => props.theme.palette.mode === 'dark'
+    ? '#003366'
+    : props.theme.palette.background.paper};
+    background-image: ${props => props.theme.palette.mode === 'dark'
+    ? 'none'
+    : 'radial-gradient( circle farthest-corner at 10% 20%, #fdfbfb 0.1%, #ebedee 99.8% )'};
+    height: 100vh;
+    border: none;
+    z-index: 1;
+  }
+`
+
+export const StyledBox = styled(Box)`
+  height: 100%;
+  overflow: auto;
+  padding-bottom: 6rem;
+`
+
+export const StyledDrawerLogo = styled(animated.div)`
+  background-color: transparent;
+  display: flex;
+  align-items: center;
+  margin: 1.5rem 0 2.5rem 1.5rem;
+
+  .MuiSvgIcon-root {
+    width: 2rem;
+    height: 2rem;
+  }
+`
+
+export const StyledDrawerLogoText = styled(Typography)`
+  font-size: 1.2rem;
+  margin-left: .5rem;
+  color: ${props => props.theme.palette.mode === 'dark'
+    ? 'rgba(255,255,255,.9)'
+    : '#555'};
+`
+
+export const StyledListItem = styled(ListItem)`
+  flex-direction: column;
+  align-items: flex-start;
+  margin: 0 1rem;
+  max-width: calc(100% - 2rem);
+
+  > .MuiListItemButton-root {
+    padding: .5rem 1.5rem;
+  }
+`
+
+export const StyledListItemButton = styled(ListItemButton)`
+  border-radius: 50px;
+`
+
+export const StyledListItemText = styled(ListItemText)`
+  > .MuiTypography-root {
+    font-size: 1.5rem;
+    font-weight: bold;
+    color: ${props => props.theme.palette.mode === 'dark'
+    ? 'rgba(255,255,255,.85)'
+    : '#555'};
+    &:hover,
+    &:focus,
+    &:active {
+      color: ${props => props.theme.palette.mode === 'dark'
+    ? 'rgba(255,255,255,.97)'
+    : '#333'};
+    }
+  }
+`
+
+export const StyledChildList = styled(List)`
+  display: flex;
+  flex-wrap: wrap;
+  margin: -.25rem 1rem 0 1.5rem;
+  padding: 0;
+
+`
+
+export const StyledChildListItem = styled(ListItem)`
+  display: flex;
+  align-items: center;
+  padding: 0;
+`
+
+export const StyledChildListItemText = styled(ListItemText)`
+  font-size: .9rem;
+  color: ${props => props.theme.palette.mode === 'dark'
+    ? 'rgba(255,255,255,.75)'
+    : '#666'};
+`
+
+export const StyledChildListItemButton = styled(ListItemButton)`
+  border-radius: 50px;
+  flex-grow: 0;
+`
+
+export const StyledListSecondaryList = styled(List)`
+  display: flex;
+  flex-wrap: wrap;
+  margin: 0 1rem;
+`
+
+export const StyledListSecondaryItem = styled(ListItem)`
+  flex: 1 0 50%;
+  display: flex;
+  align-items: center;
+`
+
+export const StyledListSecondaryButton = styled(ListItemButton)`
+  color: ${props => props.theme.palette.mode === 'dark'
+    ? 'rgba(255,255,255,.8)'
+    : '#555'};
+  margin: 0.25rem 0.25rem 0.5rem;
+  padding: 0.3rem 1rem;
+  background: ${props => props.theme.palette.mode === 'dark'
+    ? 'rgba(255,255,255,.12)'
+    : 'rgba(255,255,255,.6)'};
+  border-radius: 50px;
+  box-shadow: ${props => props.theme.palette.mode === 'dark'
+    ? '0 6px 15px rgb(36 37 38 / 16%)'
+    : '0 6px 15px rgb(36 37 38 / 8%)'};
+`
+
+export const StyledDivider = styled('div')`
+  background-color: ${props => props.theme.palette.mode === 'dark'
+    ? 'rgba(62, 106, 179, .5)'
+    : 'rgba(0,0,0,.075)'};
+  width: 75%;
+  height: 3px;
+  border: none;
+  border-radius: 3px;
+  margin: 2rem auto;
+`

package/src/lib/components/navigation/MobileNavigation/MobileNavigationItem/MobileNavigationItem.tsx

@@ -0,0 +1,192 @@
+import React from 'react'
+import { useTheme } from '@mui/material/styles'
+import {
+  Link, List, Tooltip, Collapse
+} from '../../../../index'
+import MailIcon from '@mui/icons-material/Mail'
+import {
+  ListItem, ListItemButton, ListItemButtonChild,
+  ListItemIcon, ListItemText
+} from './MobileNavigationItemStyles'
+import { tooltipDelay } from '../../../../utils/theme'
+import MobileNavigationItemFlyoutMenu from './MobileNavigationItemFlyoutMenu'
+
+export interface IMobileNavigationItemProps {
+  label: string
+  icon: React.ReactElement
+  selectedIcon?: React.ReactElement
+  onClick?: any
+  isActive?: boolean
+  children?: IMobileNavigationItemProps[]
+  isDrawerOpen?: boolean
+  index?: number
+  isSecondary?: boolean
+  hasFlyout?: boolean
+  fullHeightFlyout?: boolean
+  content?: React.ReactElement
+  style?: any
+  open?: boolean
+}
+
+const MobileNavigationItem = (
+  props: IMobileNavigationItemProps
+): React.ReactElement => {
+  const theme = useTheme()
+  const {
+    label, icon, onClick, isActive, children, isDrawerOpen,
+    index, hasFlyout, fullHeightFlyout, isSecondary,
+    content, style, ...rest
+  } = props
+  const [isExpanded, setIsExpanded] = React.useState(false)
+  const [anchorEl, setAnchorEl] = React.useState<null | HTMLElement>(null)
+  const open = Boolean(anchorEl)
+  const handlePopoverOpen = (event: (React.MouseEvent<HTMLElement> | any)): void => {
+    if (open) {
+      handlePopoverClose()
+      return
+    }
+
+    setAnchorEl(event?.currentTarget)
+  }
+
+  const handlePopoverClose = (): void => {
+    setAnchorEl(null)
+  }
+
+  const handleClick = (event: (React.MouseEvent<HTMLElement> | any)): void => {
+    if (fullHeightFlyout) {
+      handlePopoverOpen(event)
+      return
+    }
+
+    if (children && children.length > 0) {
+      setIsExpanded(!isExpanded)
+      return
+    }
+
+    if (onClick) {
+      onClick(event)
+    }
+
+    setAnchorEl(null)
+  }
+
+  return (
+    <ListItem
+      disablePadding
+      style={style}
+      {...rest}
+      isDrawerOpen={isDrawerOpen}
+    >
+      <ListItemButton
+        // @ts-expect-error
+        component={Link}
+        key={label}
+        onClick={handleClick}
+        isActive={isActive}
+        isDrawerOpen={isDrawerOpen}
+        isExpanded={isExpanded}
+        open={open}
+        onMouseEnter={event => fullHeightFlyout
+          ? null
+          : handlePopoverOpen(event)}
+        onMouseLeave={() => fullHeightFlyout
+          ? null
+          : handlePopoverClose()}
+        onFocus={event => fullHeightFlyout
+          ? null
+          : handlePopoverOpen(event)}
+        onBlur={() => fullHeightFlyout
+          ? null
+          : handlePopoverClose()}
+        aria-expanded={(children && children.length > 0) ? open : null}
+        aria-haspopup={(children && children.length > 0) ? 'true' : null}
+        aria-current={isActive ? 'page' : null}
+        role={(children && children.length > 0) ? 'button' : 'link'}
+      >
+        <Tooltip
+          disableHoverListener={(children && children.length > 0) ?? isDrawerOpen}
+          disableFocusListener={(children && children.length > 0) ?? isDrawerOpen}
+          disableTouchListener={(children && children.length > 0) ?? isDrawerOpen}
+          title={label}
+          placement={theme.direction === 'rtl' ? 'left' : 'right'}
+          enterDelay={tooltipDelay.start}
+          leaveDelay={tooltipDelay.end}
+        >
+          <ListItemIcon aria-hidden={true}>
+            {icon ?? <MailIcon />}
+          </ListItemIcon>
+        </Tooltip>
+        <ListItemText
+          primary={label}
+          isDrawerOpen={isDrawerOpen}
+          index={index}
+          sx={{
+            '& .MuiTypography-root': {
+              fontSize: isSecondary ? '14px' : 'inherit'
+            }
+          }}
+        />
+        {children && children.length > 0 && (
+          <Collapse component='div' in={isDrawerOpen ? isExpanded : false} timeout="auto">
+            <List
+              aria-label={label}
+              disablePadding
+            >
+              {children.map((childItem, index) => (
+                <ListItem
+                  disablePadding
+                  isDrawerOpen={isDrawerOpen}
+                >
+                  <ListItemButtonChild
+                    // @ts-expect-error
+                    component={Link}
+                    key={label}
+                    index={index}
+                    isDrawerOpen={isDrawerOpen}
+                  >
+                    <ListItemIcon>{childItem.icon}</ListItemIcon>
+                    <ListItemText
+                      primary={childItem.label}
+                      isDrawerOpen={isDrawerOpen}
+                      sx={{
+                        '& .MuiTypography-root': {
+                          fontSize: '14px !important',
+                          color: theme.palette.mode === 'dark'
+                            ? theme.palette.primary.contrastText
+                            : theme.palette.getContrastText(theme.palette.background.paper)
+                        }
+                      }}
+                    />
+                  </ListItemButtonChild>
+                </ListItem>
+              ))}
+            </List>
+          </Collapse>
+        )}
+      </ListItemButton>
+
+      {!fullHeightFlyout && children && children.length > 0 && (!isExpanded || !isDrawerOpen) && (
+        <MobileNavigationItemFlyoutMenu
+          isDrawerOpen={isDrawerOpen}
+          anchorEl={anchorEl}
+          open={open}
+          children={children}
+          label={label}
+        />
+      )}
+
+      {fullHeightFlyout && content && (
+        <MobileNavigationItemFlyoutMenu
+          isDrawerOpen={isDrawerOpen}
+          fullHeightFlyout
+          anchorEl={anchorEl}
+          open={open}
+          content={content}
+        />
+      )}
+    </ListItem>
+  )
+}
+
+export default MobileNavigationItem

package/src/lib/components/navigation/MobileNavigation/MobileNavigationItem/MobileNavigationItemFlyoutMenu.tsx

@@ -0,0 +1,67 @@
+import React from 'react'
+import { Link, ListItemText } from '../../../../index'
+import { IMobileNavigationItemProps } from './MobileNavigationItem'
+import {
+  FlyoutMenuPaper,
+  FlyoutMenuWrap,
+  FlyoutMenuList,
+  FlyoutMenuButton,
+  FlyoutMenuItem
+} from './MobileNavigationItemFlyoutMenuStyles'
+export interface IMobileNavigationItemFlyoutMenuProps {
+  label?: string
+  children?: IMobileNavigationItemProps[]
+  isDrawerOpen?: boolean
+  hasFlyout?: boolean
+  content?: React.ReactElement
+  style?: any
+
+  fullHeightFlyout?: boolean
+  anchorEl?: null | HTMLElement
+  open?: boolean
+}
+
+const MobileNavigationItemFlyoutMenu = (
+  props: IMobileNavigationItemFlyoutMenuProps
+): React.ReactElement => {
+  const {
+    label, children, isDrawerOpen, anchorEl
+  } = props
+  const [flyoutHovered, setFlyoutHovered] = React.useState(false)
+  const open = flyoutHovered || props?.open
+
+  return (
+    <FlyoutMenuPaper
+      isDrawerOpen={isDrawerOpen}
+      open={open}
+      anchorEl={anchorEl ?? undefined}
+      onMouseEnter={() => setFlyoutHovered(true)}
+      onMouseLeave={() => setFlyoutHovered(false)}
+      onFocus={() => setFlyoutHovered(true)}
+      onBlur={() => setFlyoutHovered(false)}
+    >
+      <FlyoutMenuWrap open={open}>
+        <FlyoutMenuList
+          aria-label={label}
+          open={open}
+        >
+          {children?.map(childItem => (
+            <FlyoutMenuItem>
+              <FlyoutMenuButton
+                // @ts-expect-error
+                component={Link}
+                key={childItem.label}
+                onClick={childItem.onClick}
+                role='link'
+              >
+                <ListItemText primary={childItem.label} />
+              </FlyoutMenuButton>
+            </FlyoutMenuItem>
+          ))}
+        </FlyoutMenuList>
+      </FlyoutMenuWrap>
+    </FlyoutMenuPaper>
+  )
+}
+
+export default MobileNavigationItemFlyoutMenu