@learningpool/ui 1.6.0 → 1.6.1

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

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

@@ -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/VerticalNavigation/VerticalNavigationStyles.tsx

@@ -0,0 +1,303 @@
+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;
+  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
+                ${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`};
+  }
+`