@learningpool/ui 1.6.0 → 1.6.1

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

@@ -0,0 +1,47 @@
+import {
+  SwipeableDrawer, OutlinedInput, InputLabel
+} from '../../../index'
+import { styled } from '@mui/material/styles'
+import { animated } from '@react-spring/web'
+
+export const StyledSwipeableSearch = styled(SwipeableDrawer)`
+  .MuiPaper-root {
+    box-shadow: 0px 3px 5px -1px rgba(0, 0, 0, 0.2),
+                0px 5px 8px 0px rgba(0, 0, 0, 0.14),
+                0px 1px 14px 0px rgba(0, 0, 0, 0.12);
+    border: none;
+    border-radius: 20px 20px 0 0;
+    z-index: 1;
+  }
+`
+
+export const StyledBox = styled(animated.div)`
+  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% )'};
+  padding: ${props => props.theme.spacing(3, 2.5, '80px', 2.5)};
+  height: 100%;
+`
+
+export const StyledOutlinedInputLabel = styled(InputLabel)`
+  &.Mui-focused {
+    color: ${props => props.theme.palette.mode === 'dark' ? props.theme.palette.primary.contrastText : '#003366'};
+  }
+`
+
+export const StyledOutlinedInput = styled(OutlinedInput)`
+  background-color: ${props => props.theme.palette.mode === 'dark'
+    ? '#003366'
+    : props.theme.palette.background.paper};
+  color: ${props => props.theme.palette.mode === 'dark'
+    ? props.theme.palette.primary.contrastText
+    : props.theme.palette.text.primary};
+
+  &:hover .MuiOutlinedInput-notchedOutline,
+  &.Mui-focused .MuiOutlinedInput-notchedOutline {
+    border-color: ${props => props.theme.palette.mode === 'dark' ? props.theme.palette.primary.contrastText : '#003366'};
+  }
+`

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

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

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

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