@learningpool/ui 1.6.3 → 1.6.5

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

@@ -1,320 +0,0 @@
-import Drawer from '@mui/material/Drawer'
-import {
-  Box, IconButton, BottomNavigation,
-  BottomNavigationAction, Paper
-} from '../../../index'
-import { styled } from '@mui/material/styles'
-import { motion } from '../../../utils/theme'
-
-export const DRAWER_WIDTH = {
-  Collapsed: 60,
-  Expanded: 300
-}
-
-export const StyledPaper = styled(Paper)`
-  background-color: ${props => props.theme.palette.mode === 'dark'
-    ? props.theme.palette.primary.main
-    : props.theme.palette.background.paper};
-  background-image: none;
-  border-radius: 0;
-  bottom: 0;
-  left: 0;
-  position: fixed;
-  right: 0;
-  z-index: 1000000000;
-`
-
-export const StyledNotchSVG = styled('svg', {
-  shouldForwardProp: (prop) => prop !== 'mobileNotchPosition'
-})<{ mobileNotchPosition?: number }>`
-  display: block;
-  fill: ${props => props.theme.palette.mode === 'dark'
-    ? props.theme.palette.primary.main
-    : props.theme.palette.background.paper};
-  height: 50px;
-  left: 0;
-  padding: 0;
-  position: absolute;
-  stroke: transparent;
-  top: -29px;
-  transform: rotate(270deg);
-  width: 50px;
-  z-index: -1;
-`
-
-export const StyledBottomNavigation = styled(BottomNavigation)`
-  background-color: ${props => props.theme.palette.mode === 'dark'
-    ? props.theme.palette.primary.main
-    : props.theme.palette.background.paper};
-  position: relative;
-`
-
-export const StyledBottomNavigationAction = styled(BottomNavigationAction)`
-  backgroundColor: ${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)};
-  flex: none;
-  height: 56px;
-  max-width: 168px;
-  min-width: 80px;
-  overflow: hidden;
-  padding: 0;
-  stroke: ${props => props.theme.palette.mode === 'dark'
-    ? props.theme.palette.primary.contrastText
-    : props.theme.palette.text.primary};
-
-  .MuiBottomNavigationAction-label {
-    color: inherit;
-    font-size: 0.65rem;
-
-    // Handle long text string overflow
-    overflow: hidden;
-    text-overflow: ellipsis;
-    white-space: nowrap;
-    width: 100%;
-
-    &.Mui-selected {
-      color: ${props =>
-    props.theme.palette.mode === 'dark'
-      ? props.theme.palette.primary.contrastText
-      : props.theme.palette.getContrastText(props.theme.palette.background.paper)};
-      font-size: 0.75rem;
-    }
-  }
-
-  .MuiSvgIcon-root {
-    fill: ${props =>
-    props.theme.palette.mode === 'dark'
-      ? props.theme.palette.primary.contrastText
-      : props.theme.palette.getContrastText(props.theme.palette.background.paper)};
-  }
-`
-
-export const DrawerHeader = styled('div', {
-  shouldForwardProp: (prop) => prop !== 'isDrawerOpen'
-})<{ isDrawerOpen?: any }>`
-`
-
-export const DrawerToggle = styled(IconButton)`
-  background: transparent;
-  height: 44px;
-  padding: 0 ${props => props.theme.spacing(2)} !important;
-  position: absolute;
-  transform: translate(22px, calc(50% - 5.5px));
-  transition: all 225ms ${motion.easeInOut} 0ms !important;
-  width: 44px;
-  z-index: 10;
-
-  @media (min-width: ${props => props.theme.breakpoints.values.sm}) {
-    padding: 0 ${props => props.theme.spacing(2.5)} !important;
-  }
-`
-
-export const DrawerToggleHitboxContent = styled('span')`
-  background-color: ${props => props.theme.palette.mode === 'dark'
-    ? props.theme.palette.primary.main
-    : props.theme.palette.background.paper};
-  border-radius: 50%;
-  box-shadow: 5px 0 15px 0 rgb(0 0 0 / 10%);
-  box-sizing: content-box;
-  height: 1.75rem;
-  padding: ${props => props.theme.spacing(0.5)};
-  width: 1.75rem;
-`
-
-export const StyledAside = styled('aside')``
-
-export const StyledNav = styled('nav')`
-  background-color: ${props => props.theme.palette.mode === 'dark'
-    ? props.theme.palette.primary.main
-    : props.theme.palette.background.paper};
-  display: flex;
-  flex: 1 auto;
-  flex-direction: column;
-  justify-content: flex-start;
-  margin-top: -1px;
-  overflow-x: hidden;
-  overflow-y: auto;
-
-  // Firefox and future scrollbars
-  * & {
-    scrollbar-width: thin;
-    scrollbar-color: ${props =>
-    props.theme.palette.mode === 'dark'
-      ? 'rgba(255, 255, 255, 0.12) transparent'
-      : 'rgba(0, 0, 0, 0.12) transparent'};
-    transition: backgroundColor 225ms ${motion.easeIn};
-  }
-
-  * &:hover {
-    scrollbar-color: ${props =>
-    props.theme.palette.mode === 'dark'
-      ? 'rgba(255, 255, 255, 0.24) transparent'
-      : 'rgba(0, 0, 0, 0.24) transparent'};
-  }
-
-  // Webkit and fall back scrollbars
-  ::-webkit-scrollbar {
-    width: 8px;
-  }
-
-  ::-webkit-scrollbar-track {
-    background-color: transparent;
-  }
-
-  ::-webkit-scrollbar-thumb {
-    background-color: ${props =>
-    props.theme.palette.mode === 'dark'
-      ? 'rgba(255, 255, 255, 0.12)'
-      : 'rgba(0, 0, 0, 0.12)'};
-    border-radius: 55px;
-    transition: background-color 225ms ${motion.easeIn};
-  }
-
-  ::-webkit-scrollbar-thumb:hover {
-    background-color: ${props =>
-    props.theme.palette.mode === 'dark'
-      ? 'rgba(255, 255, 255, 0.24)'
-      : 'rgba(0, 0, 0, 0.24)'};
-  }
-`
-
-export const StyledNavSecondary = styled('nav')`
-  background-color: ${props => props.theme.palette.mode === 'dark'
-    ? props.theme.palette.primary.main
-    : props.theme.palette.background.paper};
-  display: flex;
-  flex: 1 auto;
-  flex-direction: column;
-  justify-content: flex-end;
-  margin-top: auto;
-  overflow: hidden;
-`
-export const DrawerShadow = styled(Box, {
-  shouldForwardProp: (prop) => prop !== 'isDrawerOpen'
-})<{ isDrawerOpen?: boolean }>`
-  background: rgba(0,0,0,0.125);
-  content: '';
-  display: block;
-  filter: blur(13px);
-  height: 100%;
-  left: ${props => props.isDrawerOpen
-    ? `${DRAWER_WIDTH.Expanded - 38}px`
-    : `${DRAWER_WIDTH.Collapsed - 41}px`};
-  position: fixed;
-  top: 0;
-  transition: left 225ms ${motion.easeInOut} 0ms;
-  visibility: visible;
-  width: 40px;
-
-  @media (min-width: ${props => props.theme.breakpoints.values.sm}) {
-    left: ${props =>
-    props.isDrawerOpen
-      ? `${DRAWER_WIDTH.Expanded - 38}px`
-      : `${DRAWER_WIDTH.Collapsed - 33}px`};
-  }
-`
-
-export const NotchContainer = styled(Box)`
-  display: flex;
-  justify-content: flex-end;
-  height: auto;
-  margin-top: -${props => props.theme.spacing(0.5)};
-  position: relative;
-  transition: width 225ms ${motion.easeInOut} 0ms !important;
-  width: 100%;
-  z-index: 9;
-`
-
-export const NotchBackground = styled(Box)`
-  background-color: ${props => props.theme.palette.mode === 'dark'
-    ? props.theme.palette.primary.main
-    : props.theme.palette.background.paper};
-  flex: 1;
-  height: auto;
-  width: auto;
-`
-
-export const NotchBackgroundClip = styled(Box)`
-  background-color: ${props => props.theme.palette.mode === 'dark'
-    ? props.theme.palette.primary.main
-    : props.theme.palette.background.paper};
-  clip-path: url("#notch");
-  display: flex;
-  height: 85px;
-  width: 45px;
-`
-
-export const NotchSeemMask = styled(Box)`
-  background-color: ${props => props.theme.palette.mode === 'dark'
-    ? props.theme.palette.primary.main
-    : props.theme.palette.background.paper};
-  height: 90px;
-  position: absolute;
-  right: 25px;
-  top: -2px;
-  width: calc(100% - 25px);
-`
-
-export const StyledDrawer = styled(Drawer, {
-  shouldForwardProp: (prop) => prop !== 'open'
-})<{ open?: boolean }>`
-  box-shadow: none;
-  box-sizing: border-box;
-  flexshrink: 0;
-  overflow-x: visible;
-  transition: width 225ms ${motion.easeInOut} 0ms !important;
-  white-space: nowrap;
-  width: ${props => !props.open ? `calc(${props.theme.spacing(7)} + 1px)` : `${DRAWER_WIDTH.Expanded}px`};
-
-  @media (min-width: ${props => props.theme.breakpoints.values.sm}) {
-    width: ${props => !props.open ? `calc(${props.theme.spacing(8)} + 1px)` : `${DRAWER_WIDTH.Expanded}px`};
-  }
-
-  .MuiDrawer-paper {
-    background: transparent none;
-    border: 0;
-    box-shadow: none;
-    color: ${props =>
-    props.theme.palette.mode === 'dark'
-      ? props.theme.palette.primary.contrastText
-      : props.theme.palette.getContrastText(props.theme.palette.background.paper)};
-    overflow: visible !important;
-    overflow-x: visible;
-    transform: translateX(0) !important;
-    transition: width 225ms ${motion.easeInOut} 0ms !important;
-    visibility: visible;
-    width: ${props => !props.open ? `calc(${props.theme.spacing(7)} + 1px)` : `${DRAWER_WIDTH.Expanded}px`};
-
-    [theme.breakpoints.up('sm')] {
-      width: ${props => !props.open ? `calc(${props.theme.spacing(8)} + 1px)` : `${DRAWER_WIDTH.Expanded}px`};
-    }
-  }
-`
-
-export const StyledNotchShadow = styled(Box)`
-  border-radius: 50%;
-  box-shadow: 0px -7px 10px -5px rgb(0 0 0 / 20%), 0px 2px 10px 0px rgb(0 0 0 / 14%), 0px 0px 8px 0px rgb(0 0 0 / 12%);
-  height: 13px;
-  left: 13px;
-  position: absolute;
-  top: -7px;
-  width: 25px;
-  z-index: -2;
-`
-
-export const StyledNotchShadowMask = styled(Box)`
-  background-color: ${props => props.theme.palette.mode === 'dark'
-    ? props.theme.palette.primary.main
-    : props.theme.palette.background.paper};
-  border-radius: 50%;
-  height: 13px;
-  left: 13px;
-  position: absolute;
-  top: -1px;
-  width: 25px;
-  z-index: -1;
-`

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

@@ -1,59 +0,0 @@
-// @ts-ignore
-import * as React from 'react'
-import { useSpring, animated, easings } from '@react-spring/web'
-
-const Path = (props: any) => (
-  <animated.path
-    fill='transparent'
-    strokeWidth='3'
-    stroke='inherit'
-    strokeLinecap='round'
-    {...props}
-  />
-)
-
-const ToggleSearchX = (props: any): React.ReactElement => {
-  const animationDefaults = {
-    reverse: props?.isOpen,
-    config: {
-      duration: 150,
-      easing: easings.easeInOutQuad
-    }
-  }
-
-  const handle = useSpring({
-    ...animationDefaults,
-    from: { d: 'M 15 15 L 35 35' },
-    to: { d: 'M 26 26 L 35 35' }
-  })
-
-  const closeBar = useSpring({
-    ...animationDefaults,
-    from: { d: 'M 15 35 L 35 15', opacity: 1, scale: 1 },
-    to: { d: 'M 26 26 L 35 35', opacity: 0, scale: 0 }
-  })
-
-  const circle = useSpring({
-    ...animationDefaults,
-    from: { opacity: 0, scale: 0 },
-    to: { opacity: 1, scale: 1 }
-  })
-
-  return (
-    <svg width='40' height='40' viewBox='0 0 50 50' stroke='inherit'>
-      <Path {...handle} />
-      <Path {...closeBar} />
-      <animated.circle
-        {...circle}
-        cx='20'
-        cy='20'
-        r='8'
-        fill='transparent'
-        strokeWidth='3'
-        stroke='inherit'
-      />
-    </svg>
-  )
-}
-
-export default ToggleSearchX

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

@@ -1,51 +0,0 @@
-// @ts-ignore
-import * as React from 'react'
-import { useSpring, animated, easings } from '@react-spring/web'
-
-const Path = (props: any) => (
-  <animated.path
-    fill='transparent'
-    strokeWidth='3'
-    stroke='inherit'
-    strokeLinecap='round'
-    {...props}
-  />
-)
-
-const ToggleX = (props: any): React.ReactElement => {
-  const animationDefaults = {
-    reverse: props?.isOpen,
-    config: {
-      duration: 150,
-      easing: easings.easeInOutQuad
-    }
-  }
-
-  const topBar = useSpring({
-    ...animationDefaults,
-    from: { d: 'M 15 15 L 35 35' },
-    to: { d: 'M 10 15 L 40 15' }
-  })
-
-  const middleBar = useSpring({
-    ...animationDefaults,
-    from: { opacity: 0, scale: 0 },
-    to: { opacity: 1, scale: 1 }
-  })
-
-  const bottomBar = useSpring({
-    ...animationDefaults,
-    from: { d: 'M 15 35 L 35 15' },
-    to: { d: 'M 10 35 L 40 35' }
-  })
-
-  return (
-    <svg width="40" height="40" viewBox="0 0 50 50">
-      <Path {...topBar} />
-      <Path d='M 10 25 L 40 25' {...middleBar} />
-      <Path {...bottomBar} />
-    </svg>
-  )
-}
-
-export default ToggleX