@learningpool/ui 1.6.0 → 1.6.1

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

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

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

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

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

@@ -0,0 +1,114 @@
+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>
+  )
+}