@learningpool/ui 1.6.2 → 1.6.5

package/src/lib/components/navigation/VerticalNavigation/VerticalNavigationItem/VerticalNavigationItemStyles.tsx

@@ -1,240 +0,0 @@
-import {
-  ListItem as SSListItem, ListItemButton as SSListItemButton,
-  ListItemText as SSListItemText, ListItemIcon as SSListItemIcon
-} from '../../../../index'
-import { styled } from '@mui/material/styles'
-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)};
-  flex-direction: column;
-  min-height: ${ICON.Height + 8}px;
-  padding: 0 !important;
-  transition: width
-              ${props => props.theme.transitions.duration.enteringScreen}ms
-              ${props => props.theme.transitions.easing.easeOut}
-              ${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'
-})<{
-  isDrawerOpen?: 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
-    ? 'auto'
-    : `${ICON.Height + 8}px`};
-  text-decoration: none;
-  text-transform: none;
-  transition: all
-              ${props => props.theme.transitions.duration.enteringScreen}ms
-              ${props => props.theme.transitions.easing.easeOut}
-              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
-                ${props => props.theme.transitions.duration.enteringScreen}ms
-                ${props => props.theme.transitions.easing.easeOut};
-    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
-              ${props => props.theme.transitions.duration.enteringScreen}ms
-              ${props => props.theme.transitions.easing.easeOut}
-              0ms !important;
-  padding: 0;
-  width: 100%;
-
-  .MuiTypography-root: {
-    font-size: .9rem;
-    opacity: ${props => props.isDrawerOpen ? 1 : 0};
-    transition: opacity
-                ${props => props.theme.transitions.duration.enteringScreen}ms
-                ${props => props.theme.transitions.easing.easeOut}
-                ${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
-              ${props => props.theme.transitions.duration.enteringScreen}ms
-              ${props => props.theme.transitions.easing.easeOut}
-              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
-              ${props => props.theme.transitions.duration.enteringScreen}ms
-              ${props => props.theme.transitions.easing.easeOut}
-              ${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
-              ${props => props.theme.transitions.duration.enteringScreen}ms
-              ${props => props.theme.transitions.easing.easeOut}
-              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
-              ${props => props.theme.transitions.duration.enteringScreen}ms
-              ${props => props.theme.transitions.easing.easeOut}
-              200ms !important;
-`

package/src/lib/components/navigation/VerticalNavigation/VerticalNavigationMotion.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/VerticalNavigation/VerticalNavigationStyles.tsx

@@ -1,302 +0,0 @@
-import Drawer from '@mui/material/Drawer'
-import { Box, IconButton } from '../../../index'
-import { styled } from '@mui/material/styles'
-import { animated } from '@react-spring/web'
-
-export const DRAWER_WIDTH = {
-  Collapsed: 60,
-  Expanded: 300
-}
-
-const ICON = {
-  Height: 40,
-  Width: 57
-}
-
-export const DrawerHeader = styled(animated.div, {
-  shouldForwardProp: (prop) => prop !== 'isDrawerOpen'
-})<{ isDrawerOpen?: any }>`
-  align-items: center;
-  background-color: ${props => props.theme.palette.mode === 'dark'
-    ? props.theme.palette.primary.main
-    : props.theme.palette.background.paper};
-  display: flex;
-  flex: 1 auto;
-  justify-content: flex-start;
-  overflow: hidden;
-  min-height: 56px !important;
-  padding: ${props => props.theme.spacing(1)} 10px 0;
-  transition: ${props => props.isDrawerOpen
-    ? `width
-      ${props.theme.transitions.duration.enteringScreen}ms
-      ${props.theme.transitions.easing.easeOut}
-      0`
-    : `width
-      ${props.theme.transitions.duration.leavingScreen}ms
-      ${props.theme.transitions.easing.easeIn}`}
-      250ms;
-
-  /* Testing secondary nav fix ups */
-  width: ${props => props.isDrawerOpen ? DRAWER_WIDTH.Expanded : `calc(${props.theme.spacing(7)} + 1px)`};
-
-  @media (min-width: ${props => props.theme.breakpoints.values.sm}) {
-    min-height: 64px !important;
-    width: ${props => props.isDrawerOpen ? DRAWER_WIDTH.Expanded : `calc(${props.theme.spacing(8)} + 1px)`};
-  };
-
-  .MuiListItemIcon-root {
-    margin: ${props => props.theme.spacing(0.5)} 0 0;
-  }
-
-  .MuiListItemText-root {
-    align-items: center !important;
-    color: ${props =>
-    props.theme.palette.mode === 'dark'
-      ? props.theme.palette.primary.contrastText
-      : props.theme.palette.getContrastText(props.theme.palette.background.paper)};
-    display: flex;
-    min-height: ${ICON.Height + 8}px;
-    max-height: ${props => props.isDrawerOpen ? '200px' : `${ICON.Height + 8}px`};
-    text-decoration: none;
-    text-dransform: none;
-    transition: max-height
-                ${props => props.theme.transitions.duration.enteringScreen}ms
-                ${props => props.theme.transitions.easing.easeOut};
-    padding: 0;
-    width: 100%;
-
-    [theme.breakpoints.up('sm')] {
-      max-height: ${props => props.isDrawerOpen ? '200px' : `${ICON.Height + 8}px`};
-    }
-  }
-
-  .MuiListItemText-root .MuiTypography-root {
-    white-space: normal;
-  }
-`
-
-export const DrawerToggle = styled(IconButton)`
-  background: transparent;
-  height: 44px;
-  padding: 0 ${props => props.theme.spacing(2)} !important;
-  position: absolute;
-  transition: all
-              ${props => props.theme.transitions.duration.enteringScreen}ms
-              ${props => props.theme.transitions.easing.easeOut};
-  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;
-  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
-                ${props => props.theme.transitions.duration.enteringScreen}ms
-                ${props => props.theme.transitions.easing.easeOut};
-  }
-
-  * &: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: backgroundColor
-                ${props => props.theme.transitions.duration.enteringScreen}ms
-                ${props => props.theme.transitions.easing.easeOut};
-  }
-
-  ::-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 StyledDivider = styled('div', {
-  shouldForwardProp: (prop) => prop !== 'isDrawerOpen'
-})<{ isDrawerOpen?: boolean }>`
-  background-color: ${props => props.theme.palette.mode === 'dark'
-    ? props.theme.palette.primary.main
-    : props.theme.palette.background.paper};
-
-  :before {
-    background-color: ${props =>
-    props.theme.palette.mode === 'dark'
-      ? 'rgba(255, 255, 255, 0.075)'
-      : 'rgba(0, 0, 0, 0.075)'};
-    border-radius: 55px;
-    content: '';
-    display: block;
-    height: 2px;
-    margin: auto;
-    transition: all
-                ${props => props.theme.transitions.duration.enteringScreen}ms
-                ${props => props.theme.transitions.easing.easeOut};
-    width: 66%;
-  }
-`
-
-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
-              ${props => props.theme.transitions.duration.enteringScreen}ms
-              ${props => props.theme.transitions.easing.easeOut};
-  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
-              ${props => props.theme.transitions.duration.enteringScreen}ms
-              ${props => props.theme.transitions.easing.easeOut};
-  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
-              ${props => props.theme.transitions.duration.enteringScreen}ms
-              ${props => props.theme.transitions.easing.easeOut};
-  white-space: nowrap;
-  width: ${props => !props.open ? `calc(${props.theme.spacing(7)} + 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
-                ${props => props.theme.transitions.duration.enteringScreen}ms
-                ${props => props.theme.transitions.easing.easeOut};
-    visibility: visible !important;
-    width: ${props => !props.open ? `calc(${props.theme.spacing(7)} + 1px)` : `${DRAWER_WIDTH.Expanded}px`};
-  }
-`