@learningpool/ui 1.6.2 → 1.6.5

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

@@ -1,192 +0,0 @@
-import {
-  List, ListItem, ListItemButton as SSListItemButton,
-  Paper, Typography
-} from '../../../../index'
-import { styled } from '@mui/material/styles'
-import { motion } from '../../../../utils/theme'
-import { NotchMiniSVG } from '../../../../assets/Images'
-
-export const DRAWER_WIDTH = {
-  Collapsed: 60,
-  Expanded: 300
-}
-
-export const FlyoutMenuPaper = styled(Paper, {
-  shouldForwardProp: (prop) => prop !== 'isDrawerOpen' && prop !== 'open' && prop !== 'anchorEl'
-})<{
-  anchorEl: HTMLElement | undefined
-  isDrawerOpen?: boolean
-  open?: boolean
-}>`
-  background: transparent none;
-  box-shadow: none;
-  left: ${props => props.isDrawerOpen ? `${DRAWER_WIDTH.Expanded}px` : `${DRAWER_WIDTH.Collapsed - 3}px`};
-  perspective: 800px;
-  pointer-events: ${props => props.open ? 'auto' : 'none'};
-  position: fixed;
-  /* Check against height of browser should be top or bottom positioned */
-  top: ${props => props.anchorEl
-    ? `${props.anchorEl.getBoundingClientRect().top}px`
-    : 'auto'};
-  width: 200px;
-  z-index: 2;
-`
-
-export const FlyoutMenuWrap = styled('div', {
-  shouldForwardProp: (prop) => prop !== 'open'
-})<{ open?: boolean }>`
-  background-color: ${props => props.theme.palette.mode === 'dark'
-    ? props.theme.palette.primary.dark
-    : '#E6EAF0'};
-  color: ${props => props.theme.palette.mode === 'dark'
-    ? props.theme.palette.primary.contrastText
-    : props.theme.palette.getContrastText(props.theme.palette.background.paper)};
-  border-radius: 0 8px 8px 0;
-  box-shadow: 5px 7px 8px -10px rgb(0 0 0 / 20%), 5px 12px 17px -10px rgb(0 0 0 / 14%), 5px 5px 22px -10px rgb(0 0 0 / 12%);
-  opacity: ${props => props.open ? 1 : 0};
-  visibility: ${props => props.open ? 'visible' : 'hidden'};
-  transform: ${props => props.open ? 'rotateY(0deg) scale(1)' : 'rotateY(15deg) scale(.97)'};
-  transform-origin: left center;
-  transition: ${props => props.open
-    ? `all 250ms ${motion.easeInOut}`
-    : `all 150ms ${motion.easeOut}`};
-`
-
-export const FlyoutMenuList = styled(List, {
-  shouldForwardProp: (prop) => prop !== 'open'
-})<{ open?: boolean }>`
-  padding: ${props => props.theme.spacing(1, 2)};
-  pointer-events: ${props => props.open ? 'auto' : 'none'};
-`
-
-export const FlyoutMenuHeader = styled(Typography)`
-  font-weight: bold;
-  padding: 12px ${props => props.theme.spacing(2)} 0 ${props => props.theme.spacing(3)};
-`
-
-export const FlyoutMenuItem = styled(ListItem)`
-  font-size: 14px;
-  padding: 0;
-  white-space: normal;
-  background: transparent !important;
-`
-
-export const FlyoutMenuButton = styled(SSListItemButton, {
-  shouldForwardProp: (prop) => prop !== 'isDrawerOpen' && prop !== 'isExpanded'
-})<{
-  isDrawerOpen?: boolean
-  isExpanded?: boolean
-}>`
-  align-items: flex-start;
-  background-color: transparent;
-  color: ${props =>
-    props.theme.palette.mode === 'dark'
-      ? props.theme.palette.primary.contrastText
-      : props.theme.palette.getContrastText(props.theme.palette.background.paper)};
-  border-radius: 5px;
-  display: flex;
-  flex-wrap: wrap;
-  text-decoration: none;
-  text-transform: none;
-  transition: all 225ms ${motion.easeInOut} 0;
-  padding: ${props => props.theme.spacing(1, 2)};
-  width: 100%;
-
-  /* Indicator */
-  :before {
-    background-color: ${props =>
-    props.theme.palette.mode === 'dark'
-      ? 'rgba(255, 255, 255, 0.5)'
-      : props.theme.palette.primary.main};
-    border-radius: 50px;
-    content: '';
-    height: calc(100% - 10px);
-    opacity: 0;
-    position: absolute;
-    top: 5px;
-    left: 5px;
-    transition: all 180ms ${motion.easeInOut};
-    width: 4px;
-    transform: scale(.95);
-  }
-
-  :hover:before,
-  :focus:before {
-    opacity: 1;
-    transform: scale(1);
-  }
-
-  :hover {
-    background-color: rgba(0, 0, 0, .05);
-  }
-
-  :focus {
-    background-color: ${props =>
-    props.theme.palette.mode === 'dark'
-      ? props.theme.palette.primary.dark
-      : '#E6EAF0'};
-  }
-`
-
-// FullHeight
-export const FullHeightFlyoutMenuPaper = styled(Paper, {
-  shouldForwardProp: (prop) => prop !== 'isDrawerOpen' && prop !== 'open'
-})<{
-  isDrawerOpen?: boolean
-  open?: boolean
-}>`
-  background: transparent none;
-  box-shadow: none;
-  color: ${props => props.theme.palette.mode === 'dark'
-    ? props.theme.palette.primary.contrastText
-    : props.theme.palette.getContrastText(props.theme.palette.background.paper)};
-  height: 100%;
-  left: ${props => props.isDrawerOpen ? `${DRAWER_WIDTH.Expanded}px` : `${DRAWER_WIDTH.Collapsed - 3}px`};
-  perspective: 800px;
-  pointer-events: ${props => props.open ? 'auto' : 'none'};
-  position: fixed;
-  top: 0;
-  z-index: 1;
-`
-
-export const FullHeightFlyoutMenuWrapper = styled('div', {
-  shouldForwardProp: (prop) => prop !== 'open'
-})<{ open?: boolean }>`
-  background-color: ${props => props.theme.palette.mode === 'dark'
-    ? props.theme.palette.primary.main
-    : props.theme.palette.background.paper};
-  box-shadow: 35px 0 15px 0 rgb(0 0 0 / 10%);
-  height: 100%;
-  max-width: 300px;
-  min-width: 300px;
-  opacity: ${props => props.open ? 1 : 0};
-  pointer-events: ${props => props.open ? 'auto' : 'none'};
-  transform: ${props => props.open ? 'rotateY(0deg) scale(1)' : 'rotateY(8deg) scale(.98)'};
-  transform-origin: left center;
-  transition: ${props => props.open ? `all 150ms ${motion.easeInOut}` : `all 100ms ${motion.easeOut}`};
-  visibility: ${props => props.open ? 'visible' : 'hidden'};
-  width: ${props => props.open ? '300' : 0};
-`
-
-export const FlyoutNotchMask = styled('div')`
-  background-color: ${props => props.theme.palette.mode === 'dark'
-    ? props.theme.palette.primary.dark
-    : '#E6EAF0'};
-  content: '';
-  display: block;
-  height: 80px;
-  left: -40px;
-  position: absolute;
-  top: 65px;
-  width: 80px;
-  z-index: -1;
-`
-
-export const NotchMini = styled(NotchMiniSVG)`
-  fill: ${props => props.theme.palette.mode === 'dark'
-    ? props.theme.palette.primary.dark
-    : '#E6EAF0'};
-  left: -12px;
-  pointer-events: none;
-  position: absolute;
-`

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

@@ -1,217 +0,0 @@
-import {
-  ListItem as SSListItem, ListItemButton as SSListItemButton,
-  ListItemText as SSListItemText, ListItemIcon as SSListItemIcon
-} from '../../../../index'
-import { styled } from '@mui/material/styles'
-import { motion } from '../../../../utils/theme'
-import { ArrowRight } from '@mui/icons-material'
-
-export const DRAWER_WIDTH = {
-  Collapsed: 60,
-  Expanded: 300
-}
-
-const ICON = {
-  Height: 40,
-  Width: 57
-}
-
-export const ListItem = styled(SSListItem, {
-  shouldForwardProp: (prop) => prop !== 'isDrawerOpen'
-})<{ isDrawerOpen?: boolean }>`
-  align-items: flex-start;
-  color: ${props => props.theme.palette.mode === 'dark'
-    ? props.theme.palette.primary.contrastText
-    : props.theme.palette.getContrastText(props.theme.palette.background.paper)};
-  min-height: ${ICON.Height + 8}px;
-  padding: 0 !important;
-  transition: width 225ms ${motion.easeInOut} ${props => props.isDrawerOpen ? '0ms' : '250ms'};
-  width: ${DRAWER_WIDTH.Expanded}px;
-
-  .MuiListItemIcon-root: {
-    margin: ${props => props.theme.spacing(0.5)} 0 0;
-  }
-
-  .MuiListItemText-root .MuiTypography-root: {
-    white-space: normal;
-  }
-`
-
-export const ListItemButton = styled(SSListItemButton, {
-  shouldForwardProp: (prop) => prop !== 'isDrawerOpen' && prop !== 'isExpanded'
-})<{
-  isDrawerOpen?: boolean
-  isExpanded?: boolean
-}>`
-  align-items: flex-start !important;
-  background-color: ${props =>
-    props.theme.palette.mode === 'dark'
-      ? props.theme.palette.primary.main
-      : props.theme.palette.background.paper};
-  color: ${props =>
-    props.theme.palette.mode === 'dark'
-      ? props.theme.palette.primary.contrastText
-      : props.theme.palette.getContrastText(props.theme.palette.background.paper)};
-  display: flex;
-  flex-wrap: wrap;
-  min-height: ${ICON.Height + 8}px;
-  max-height: ${props => props.isDrawerOpen
-    ? props.isExpanded
-      ? 'auto'
-      : '200px'
-    : `${ICON.Height + 8}px`};
-  text-decoration: none;
-  text-transform: none;
-  transition: all 225ms ${motion.easeInOut} 0ms !important;
-  padding: 0 ${props => props.theme.spacing(2)} 0 0;
-  width: 100%;
-
-  /* Indicator */
-  :before {
-    background-color: ${props =>
-    props.theme.palette.mode === 'dark'
-      ? 'rgba(255, 255, 255, 0.5)'
-      : props.theme.palette.primary.main};
-    border-radius: 50px;
-    content: '';
-    height: calc(100% - 10px);
-    opacity: 0;
-    position: absolute;
-    top: 5px;
-    left: 3px;
-    transition: all 180ms ${motion.easeInOut};
-    width: 4px;
-    transform: scale(.95);
-  }
-
-  :hover:before,
-  :focus-visible:before {
-    opacity: 1;
-    transform: scale(1);
-  }
-
-  :hover {
-    background-color: ${props =>
-    props.theme.palette.mode === 'dark'
-      ? props.theme.palette.primary.main
-      : props.theme.palette.background.paper};
-  }
-
-  :focus-visible {
-    background-color: ${props =>
-    props.theme.palette.mode === 'dark'
-      ? props.theme.palette.primary.dark
-      : '#E6EAF0'};
-  }
-
-  :active {
-    background-color: transparent
-  }
-`
-
-export const ListItemButtonChild = styled(SSListItemButton, {
-  shouldForwardProp: (prop) => prop !== 'isDrawerOpen' && prop !== 'index'
-})<{
-  isDrawerOpen?: boolean
-  index?: number
-}>`
-  align-items: center;
-  color: ${props => props.theme.palette.mode === 'dark'
-    ? 'rgba(255, 255, 255, 0.75)'
-    : 'rgba(0, 0, 0, 0.75)'};
-  display: flex;
-  min-height: none;
-  max-height: none;
-  text-decoration: none;
-  text-transform: none;
-  transition: max-height 225ms ${motion.easeInOut} 0ms !important;
-  padding: 0;
-  width: 100%;
-
-  .MuiTypography-root: {
-    font-size: .9rem;
-    opacity: ${props => props.isDrawerOpen ? 1 : 0};
-    transition: opacity 225ms ${motion.easeInOut} ${props => props.index !== undefined ? props.index / 50 : 0.02}s !important;
-  }
-
-  .MuiListItemText-root: {
-    padding: .25rem .5rem;
-  }
-`
-
-export const ListItemAvatar = styled(ListItemButton, {
-  shouldForwardProp: (prop) => prop !== 'isDrawerOpen'
-})<{ isDrawerOpen?: boolean }>`
-  align-items: center;
-  min-height: 52px;
-  max-height: ${props => props.isDrawerOpen
-    ? '200px'
-    : `${ICON.Height + 8}px`};
-  transition: max-height 225ms ${motion.easeInOut} 0ms !important;
-
-  .MuiListItemIcon-root {
-    justify-content: center;
-    margin: 0;
-    min-width: 0;
-  }
-
-  .MuiAvatar-root {
-    height: 32px;
-    width: 32px;
-  }
-`
-
-export const ListItemIcon = styled(SSListItemIcon)`
-  align-items: center;
-  color: ${props => props.theme.palette.mode === 'dark'
-    ? props.theme.palette.primary.contrastText
-    : props.theme.palette.getContrastText(props.theme.palette.background.paper)};
-  height: ${ICON.Height + 8}px;
-  justify-content: center;
-  margin-top: 0 !important;
-  min-width: ${ICON.Width};
-  width: ${ICON.Width};
-
-  [theme.breakpoints.up('sm')] {
-    min-width: ${ICON.Width + 8}px;
-    width: ${ICON.Width + 8}px;
-  }
-`
-
-export const ListItemText = styled(SSListItemText, {
-  shouldForwardProp: (prop) => prop !== 'isDrawerOpen' && prop !== 'index'
-})<{
-  isDrawerOpen?: boolean
-  index?: number
-}>`
-  max-width: 210px;
-  opacity: ${props => props.isDrawerOpen ? 1 : 0};
-  padding: 0.5rem;
-  transition: opacity 225ms ${motion.easeInOut} ${props => props.index !== undefined ? props.index / 50 : 0.02}s !important;
-  white-space: normal;
-  width: auto;
-`
-
-export const StyledExpandLess = styled(ArrowRight, {
-  shouldForwardProp: (prop) => prop !== 'isDrawerOpen'
-})<{ isDrawerOpen?: boolean }>`
-  align-self: center;
-  font-size: 1.25rem;
-  left: ${props => props.isDrawerOpen ? '20px' : '-40px'};
-  margin-right: ${props => props.theme.spacing(1)};
-  opacity: 1;
-  position: relative;
-  transition: opacity 225ms ${motion.easeInOut} 200ms !important;
-`
-
-export const StyledExpandMore = styled(ArrowRight, {
-  shouldForwardProp: (prop) => prop !== 'isDrawerOpen'
-})<{ isDrawerOpen?: boolean }>`
-  align-self: center;
-  font-size: 1.25rem;
-  left: ${props => props.isDrawerOpen ? '20px' : '-40px'};
-  margin-right: ${props => props.theme.spacing(1)};
-  opacity: 1;
-  position: relative;
-  transition: opacity 225ms ${motion.easeInOut} 200ms !important;
-`

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

@@ -1,119 +0,0 @@
-export const motionParent = {
-  open: {
-    transition: { staggerChildren: 0.07, delayChildren: 0 }
-  },
-  closed: {
-    transition: { staggerChildren: 0.05, staggerDirection: -1 }
-  }
-}
-
-export const motionFadeIn = {
-  open: {
-    opacity: 1
-  },
-  closed: {
-    opacity: 0
-  }
-}
-
-export const motionFadeInUp = {
-  open: {
-    y: 0,
-    opacity: 1,
-    transition: {
-      y: { stiffness: 1000, velocity: -20 }
-    }
-  },
-  closed: {
-    y: 10,
-    opacity: 0,
-    transition: {
-      y: { stiffness: 1000 }
-    }
-  }
-}
-
-export const motionWhileHover = {
-  scale: 1.02
-}
-
-export const motionWhileTap = {
-  scale: 0.95
-}
-
-// Old ones...
-export const variantsLogo = {
-  open: {
-    opacity: 1
-  },
-  closed: {
-    opacity: 0
-  }
-}
-
-export const variantsUl = {
-  open: {
-    transition: { staggerChildren: 0.07, delayChildren: 0.2 }
-  },
-  closed: {
-    transition: { staggerChildren: 0.05, staggerDirection: -1 }
-  }
-}
-
-export const variantsLi = {
-  open: {
-    y: 0,
-    opacity: 1,
-    transition: {
-      y: { stiffness: 1000, velocity: -20 }
-    }
-  },
-  closed: {
-    y: 10,
-    opacity: 0,
-    transition: {
-      y: { stiffness: 1000 }
-    }
-  }
-}
-
-export const variantsSecondaryUl = {
-  open: {
-    transition: { staggerChildren: 0.05, delayChildren: 0.5 }
-  },
-  closed: {
-    transition: { staggerChildren: 0.05, staggerDirection: -1 }
-  }
-}
-
-export const variantsSecondaryLi = {
-  open: {
-    y: 0,
-    opacity: 1,
-    transition: {
-      y: { stiffness: 500, velocity: -10 }
-    }
-  },
-  closed: {
-    y: 10,
-    opacity: 0,
-    transition: {
-      y: { stiffness: 500 }
-    }
-  }
-}
-
-export const variantsDivider = {
-  open: {
-    scaleX: 1,
-    opacity: 1,
-    transition: {
-      type: 'spring',
-      delay: 0.5
-    }
-  },
-  closed: {
-    scaleX: 0.25,
-    opacity: 0
-  }
-}

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

@@ -1,35 +0,0 @@
-import * as React from 'react'
-import { useSpring, animated } from '@react-spring/web'
-import {
-  StyledNotchShadow, StyledNotchShadowMask, StyledNotchSVG
-} from './MobileNavigationStyles'
-
-const NotchIndicator = (props: any): React.ReactElement => {
-  const styles = useSpring({
-    ...props
-  })
-
-  return (
-    <animated.div
-      style={{
-        bottom: '58px',
-        position: 'fixed',
-        zIndex: '-1',
-        ...styles
-      }}
-    >
-      <StyledNotchShadow />
-      <StyledNotchSVG
-        viewBox="0 0 22 85"
-        xmlns="http://www.w3.org/2000/svg"
-      >
-        <animated.path
-          d="M0 0V85V76.0381C0.774 69.7533 4.9101 64.7829 7.5488 63.5975C7.668 63.5518 7.7867 63.5052 7.9049 63.4576C16.1679 60.1279 22 52.035 22 42.5799C22 33.1612 16.2126 25.0941 8 21.7408C7.8723 21.6887 7.7441 21.6377 7.6153 21.5879C4.8325 20.3142 0.4173 14.8748 0 8.13255V0Z"
-        />
-      </StyledNotchSVG>
-      <StyledNotchShadowMask />
-    </animated.div>
-  )
-}
-
-export default NotchIndicator

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

@@ -1,114 +0,0 @@
-import * as React from 'react'
-import {
-  FormControl, InputAdornment, Stack, IconButton
-} from '../../../index'
-import {
-  StyledBox, StyledSwipeableSearch,
-  StyledOutlinedInput, StyledOutlinedInputLabel
-} from './MobileNavigationSearchStyles'
-import Search from '@mui/icons-material/Search'
-import { animated, config, useSpring } from '@react-spring/web'
-
-interface ISwipeableTemporarySearch {
-  isSearchOpen: boolean
-  setIsSearchOpen?: any
-  searchPanelPlaceholder?: string
-  searchPanelDefaultValue?: string
-  searchPanelOnClickSearch?: any
-}
-
-export default function SwipeableTemporarySearch (props: ISwipeableTemporarySearch) {
-  const {
-    isSearchOpen, setIsSearchOpen,
-    searchPanelPlaceholder, searchPanelDefaultValue,
-    searchPanelOnClickSearch
-  } = props
-  const [isOpen, setIsOpen] = React.useState(isSearchOpen ?? false)
-  const [searchValue, setSearchValue] = React.useState(searchPanelDefaultValue ?? '')
-
-  React.useEffect(() => handleOpenState(isSearchOpen), [isSearchOpen])
-
-  const handleOpenState = (open: boolean): void => {
-    setIsOpen(open)
-    setIsSearchOpen(open)
-  }
-
-  const toggleSearch =
-    (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)
-      }
-
-  const handleSearch = (event: React.KeyboardEvent | React.MouseEvent): void => {
-    if (event && event.type === 'keydown' &&
-      ((event as React.KeyboardEvent).key !== 'Enter')
-    ) {
-      return
-    }
-
-    // Pass search value into the onClick function
-    searchPanelOnClickSearch && searchPanelOnClickSearch(searchValue)
-  }
-
-  return (
-    <StyledSwipeableSearch
-      anchor='bottom'
-      open={isOpen}
-      onClose={toggleSearch(false)}
-      onOpen={toggleSearch(true)}
-      swipeAreaWidth={44}
-      variant='persistent'
-      ModalProps={{
-        keepMounted: true
-      }}
-    >
-      <StyledBox>
-        <Stack spacing={2}>
-          <animated.div
-            style={useSpring({
-              from: { opacity: 0, y: 10 },
-              to: { opacity: 1, y: 0 },
-              delay: isSearchOpen ? 100 : 0,
-              reverse: !isSearchOpen,
-              config: {
-                ...config.default,
-                mass: 1
-              }
-            })}
-          >
-            <FormControl fullWidth variant='outlined'>
-              <StyledOutlinedInputLabel htmlFor='mobile-nav-search'>
-                {searchPanelPlaceholder ?? 'Search'}
-              </StyledOutlinedInputLabel>
-              <StyledOutlinedInput
-                label={searchPanelPlaceholder ?? 'Search'}
-                id='mobile-nav-search'
-                endAdornment={
-                  <InputAdornment position='end'>
-                    <IconButton
-                      aria-label='Search'
-                      edge='end'
-                      onClick={handleSearch}
-                    >
-                      <Search />
-                    </IconButton>
-                  </InputAdornment>
-                }
-                onKeyDown={handleSearch}
-                value={searchValue}
-                onChange={event => setSearchValue(event?.target?.value)}
-              />
-            </FormControl>
-          </animated.div>
-        </Stack>
-      </StyledBox>
-    </StyledSwipeableSearch>
-  )
-}