@pega/cosmos-react-core 3.0.0-dev.9.0 → 3.0.0-rc.2

package/lib/components/AppShell/AppShell.styles.js

@@ -1,26 +1,22 @@
 import styled, { css } from 'styled-components';
-import { lighten, mix, readableColor, rgba } from 'polished';
+import { lighten, readableColor, rgba } from 'polished';
 import { useContext } from 'react';
 import { StyledAvatar } from '../Avatar';
 import { StyledIcon } from '../Icon';
 import { StyledImage } from '../Image/Image';
-import { StyledSearchInput, StyledSearchIcon, StyledSearchTextInput } from '../SearchInput/SearchInput';
 import { defaultThemeProp } from '../../theme';
 import { tryCatch } from '../../utils/utils';
 import Flex from '../Flex';
-import { StyledSummaryItem } from '../SummaryItem';
-import { readableHue, calculateFontSize, getHoverColors } from '../../styles';
-import { StyledPopover } from '../Popover';
-import { StyledEmptyState } from '../EmptyState';
-import { StyledMenuListContainer } from '../Menu/Menu.styles';
-import Text, { StyledText } from '../Text';
+import { readableHue, calculateFontSize } from '../../styles';
+import { StyledMenuItem } from '../Menu/Menu.styles';
 import { useDirection } from '../../hooks';
 import { StyledBareButton } from '../Button/BareButton';
-import { StyledAlert } from '../Badges/Alert';
+import Button from '../Button';
+import { StyledTooltip } from '../Tooltip';
 import AppShellContext from './AppShellContext';
-const navWidth = '4rem';
-const navOpenWidth = '18.75rem';
-const headerHeight = '3rem';
+export const navWidth = '4rem';
+export const navOpenWidth = '18.75rem';
+export const headerHeight = '3rem';
 /* AppShell styles */
 export const StyledAppEnvironment = styled(Flex)(({ color, theme: { base: { spacing, 'font-weight': { bold } }, components: { 'app-shell': { nav: { 'background-color': navColor } } } } }) => {
     const foreground = tryCatch(() => readableHue(color, color), () => readableHue(navColor, navColor));
@@ -81,11 +77,10 @@ export const StyledAppInfo = styled.a(({ theme }) => {
 });
 StyledAppInfo.defaultProps = defaultThemeProp;
 export const StyledScrollWrap = styled.div(() => {
-    const { navOpen } = useContext(AppShellContext);
     return css `
     flex-grow: 1;
     overflow-x: hidden;
-    overflow-y: ${navOpen ? 'auto' : 'hidden'};
+    overflow-y: auto;
   `;
 });
 StyledScrollWrap.defaultProps = defaultThemeProp;
@@ -103,12 +98,10 @@ export const StyledUtilIconCount = styled.span `
   flex-shrink: 0;
 `;
 export const StyledAppNav = styled.nav(({ appHeader, showEnv, theme }) => {
-    const { navOpen, navState } = useContext(AppShellContext);
+    const { navOpen } = useContext(AppShellContext);
     return css `
       position: fixed;
-      z-index: ${navState !== 'closed'
-        ? css `calc(${theme.base['z-index'].backdrop} - 1) `
-        : 'auto'};
+      z-index: calc(${theme.base['z-index'].backdrop} - 1);
       background: ${theme.components['app-shell'].nav['background-color']};
       max-width: calc(100vw - ${theme.base['hit-area']['mouse-min']});
       width: ${navOpen ? navOpenWidth : navWidth};
@@ -123,13 +116,6 @@ export const StyledAppNav = styled.nav(({ appHeader, showEnv, theme }) => {
         padding-block-start: ${theme.base.spacing};
       `}
 
-      @media (min-width: ${theme.base.breakpoints.xl}) {
-        z-index: auto;
-
-        /* Setting width here keeps the nav width transition in sync with main's margin transition on resize which is also in a media query. */
-        width: ${navOpenWidth};
-      }
-
       @media (pointer: coarse) {
         max-width: calc(100vw - ${theme.base['hit-area']['finger-min']});
       }
@@ -188,66 +174,6 @@ export const StyledAppNav = styled.nav(({ appHeader, showEnv, theme }) => {
     `;
 });
 StyledAppNav.defaultProps = defaultThemeProp;
-export const StyledSearchForm = styled.form(({ theme }) => {
-    const borderColor = tryCatch(() => lighten(0.1, theme.components['app-shell'].nav['background-color']));
-    return css `
-    flex-shrink: 0;
-    padding: ${theme.base.spacing} 0;
-
-    ${StyledSearchInput} {
-      margin: 0 calc((${navWidth} - ${theme.base['hit-area']['mouse-min']}) / 2);
-
-      &:focus-within {
-        box-shadow: ${theme.base.shadow['focus-inverted']};
-
-        ${StyledSearchIcon} {
-          color: rgba(255, 255, 255, 0.9);
-        }
-      }
-
-      input {
-        border-color: ${borderColor};
-
-        &::placeholder {
-          color: rgba(255, 255, 255, 0.4);
-        }
-
-        &:focus:not([disabled]) {
-          border-color: ${borderColor};
-        }
-      }
-
-      input,
-      ${StyledSearchIcon} {
-        background: ${borderColor};
-        color: rgba(255, 255, 255, 0.7);
-      }
-    }
-  `;
-});
-StyledSearchForm.defaultProps = defaultThemeProp;
-export const StyledNavListMenuButton = styled.button(({ theme }) => {
-    return css `
-    & + ${StyledPopover} {
-      &,
-      ${StyledMenuListContainer} {
-        background-color: ${theme.components['app-shell'].nav['background-color']};
-      }
-
-      ${StyledMenuListContainer} li {
-        color: rgba(255, 255, 255, 0.7);
-        background-color: transparent;
-
-        &:hover,
-        &[data-current='true'] {
-          color: #ffffff;
-          background-color: rgba(255, 255, 255, 0.05);
-        }
-      }
-    }
-  `;
-});
-StyledNavListMenuButton.defaultProps = defaultThemeProp;
 export const StyledCaseClose = styled.button ``;
 export const StyledNavListItem = styled.li(({ theme, nestedListCollapsed }) => {
     const { navOpen } = useContext(AppShellContext);
@@ -297,7 +223,7 @@ export const StyledNavListItem = styled.li(({ theme, nestedListCollapsed }) => {
       font-weight: ${theme.base['font-weight']['semi-bold']};
       text-decoration: none;
 
-      span {
+      span:not(${StyledCountIcon}) {
         overflow: hidden;
         text-overflow: ellipsis;
         color: inherit;
@@ -415,181 +341,6 @@ export const StyledUtils = styled.div(({ theme }) => {
   `;
 });
 StyledUtils.defaultProps = defaultThemeProp;
-/* AppHeader styles */
-export const StyledAppHeaderInfo = styled.div(({ centerLogo, theme }) => {
-    return css `
-    & > :first-child {
-      vertical-align: top;
-    }
-
-    & > a,
-    & > button {
-      cursor: pointer;
-      text-decoration: none;
-      user-select: none;
-      -webkit-user-select: none;
-    }
-
-    ${StyledImage} {
-      height: 1.625rem;
-
-      ${centerLogo &&
-        css `
-        padding-inline-start: ${theme.base.spacing};
-      `}
-    }
-  `;
-});
-StyledAppHeaderInfo.defaultProps = defaultThemeProp;
-export const StyledAppHeaderSearchForm = styled.form(({ isMediumOrAbove, theme }) => {
-    const backgroundColor = theme.base.palette['app-background'];
-    const headerColor = theme.components['app-shell'].header['background-color'];
-    const contrastColor = tryCatch(() => readableColor(headerColor));
-    return css `
-      max-width: 33vw;
-      min-width: 10rem;
-      width: 100%;
-      justify-self: center;
-      margin-inline-start: 0;
-      margin-inline-end: auto;
-      transition: max-width ${theme.base.animation.speed} ${theme.base.animation.timing.ease};
-
-      ${StyledSearchInput} {
-        ${StyledSearchIcon} {
-          background: ${backgroundColor};
-        }
-
-        ${StyledSearchTextInput} {
-          background: ${backgroundColor};
-          border-color: ${backgroundColor};
-        }
-      }
-
-      ${!isMediumOrAbove &&
-        css `
-        max-width: 2rem;
-        min-width: 2rem;
-        margin-inline-start: auto;
-        margin-inline-end: 0;
-
-        &:not([focused]) {
-          ${StyledSearchInput} {
-            ${StyledSearchIcon} {
-              background: ${headerColor};
-              color: ${contrastColor};
-            }
-
-            ${StyledSearchTextInput} {
-              background: ${headerColor};
-              border-color: ${headerColor};
-
-              &:hover:not(:focus) {
-                border-color: ${headerColor};
-              }
-            }
-          }
-        }
-
-        &:focus-within {
-          max-width: 100%;
-          min-width: 10rem;
-
-          ${StyledSearchInput} {
-            ${StyledSearchIcon} {
-              background: ${backgroundColor};
-            }
-
-            ${StyledSearchTextInput} {
-              background: ${backgroundColor};
-              border-color: ${backgroundColor};
-
-              &:hover:not(:focus) {
-                border-color: ${contrastColor};
-              }
-            }
-          }
-        }
-      `}
-    `;
-});
-StyledAppHeaderSearchForm.defaultProps = defaultThemeProp;
-export const StyledAppHeaderSpacer = styled.div `
-  margin: auto;
-`;
-export const StyledAppHeaderText = styled(Text)(({ theme, variant }) => {
-    const contrastColor = tryCatch(() => readableColor(theme.components['app-shell'].header['background-color']));
-    const secondaryColor = tryCatch(() => rgba(contrastColor ?? theme.base.palette['foreground-color'], theme.base.transparency['transparent-2']));
-    const fontSize = calculateFontSize(theme.base['font-size'], theme.base['font-scale']);
-    return css `
-      text-overflow: ellipsis;
-      overflow: hidden;
-      white-space: nowrap;
-      color: ${variant === 'secondary' ? secondaryColor : contrastColor};
-      font-size: ${fontSize.s};
-
-      ${variant !== 'secondary' &&
-        css `
-        font-weight: ${theme.base['font-weight']['semi-bold']};
-      `}
-    `;
-});
-StyledAppHeaderText.defaultProps = defaultThemeProp;
-export const StyledAppHeaderOperator = styled.button(({ theme }) => css `
-    border-radius: 50%;
-
-    :focus {
-      box-shadow: ${theme.base.shadow.focus};
-    }
-  `);
-StyledAppHeaderOperator.defaultProps = defaultThemeProp;
-export const StyledAppHeader = styled.header(({ hideTitle, theme }) => {
-    const headerColor = theme.components['app-shell'].header['background-color'];
-    const contrastColor = tryCatch(() => readableColor(headerColor));
-    const hoverColors = getHoverColors(mix(0.01, theme.base.palette.interactive, headerColor));
-    return css `
-    position: sticky;
-    z-index: ${theme.base['z-index'].drawer};
-    top: 0;
-    gap: ${theme.base.spacing};
-    max-width: 100%;
-    height: ${headerHeight};
-    background-color: ${headerColor};
-    border-bottom: solid 0.0625rem ${theme.base.palette['border-line']};
-
-    > :first-child {
-      justify-self: flex-start;
-      min-width: 33vw;
-
-      ${hideTitle &&
-        css `
-        min-width: fit-content;
-      `}
-    }
-
-    > ${StyledAppHeaderOperator} {
-      justify-self: flex-end;
-
-      + ${StyledPopover} {
-        &,
-        ${StyledMenuListContainer} {
-          background-color: ${headerColor};
-        }
-
-        ${StyledMenuListContainer} li {
-          color: ${contrastColor};
-          background-color: transparent;
-
-          &:hover,
-          &[data-current='true'] {
-            color: ${hoverColors.foreground};
-            background-color: ${hoverColors.background};
-          }
-        }
-      }
-    }
-  `;
-});
-StyledAppHeader.defaultProps = defaultThemeProp;
 /* Mobile AppShell styles */
 export const StyledMobileNav = styled.header(({ theme }) => {
     const mobileNavColor = theme.base.palette['brand-primary'];
@@ -610,159 +361,15 @@ export const StyledMobileNav = styled.header(({ theme }) => {
   `;
 });
 StyledMobileNav.defaultProps = defaultThemeProp;
-/* AppShell Drawer styles */
-export const StyledDrawerWrapper = styled.div(({ theme, open }) => {
-    return css `
-    background: ${theme.components['app-shell'].nav['background-color']};
-    width: 100%;
-    height: 100%;
-    color: rgba(255, 255, 255, 0.7);
-    opacity: ${open ? 1 : 0};
-  `;
-});
-StyledDrawerWrapper.defaultProps = defaultThemeProp;
-export const StyledDrawerHeading = styled.header(({ theme }) => {
-    const fontSize = calculateFontSize(theme.base['font-size'], theme.base['font-scale']);
-    return css `
-    padding: ${theme.base.spacing} calc(2 * ${theme.base.spacing});
-    line-height: 1;
-
-    span {
-      font-size: ${fontSize.s};
-      font-weight: ${theme.base['font-weight']['semi-bold']};
-      margin: 0 auto;
-      position: relative;
-      left: -0.7rem;
-    }
-
-    svg {
-      font-size: ${fontSize.xxl};
-      cursor: pointer;
-      color: rgba(255, 255, 255, 0.7);
-    }
-  `;
-});
-StyledDrawerHeading.defaultProps = defaultThemeProp;
-export const StyledDrawerBackButton = styled.button(({ theme }) => {
-    return css `
-    height: ${theme.base['hit-area']['mouse-min']};
-    width: ${theme.base['hit-area']['mouse-min']};
-    border-radius: calc(
-      ${`${theme.base['border-radius']} * ${theme.components.button['border-radius']}`}
-    );
-
-    &:hover,
-    &:focus {
-      color: ${theme.base.colors.white};
-      background-color: rgba(255, 255, 255, 0.05);
-    }
-
-    &:focus {
-      outline: none;
-      box-shadow: inset ${theme.base.shadow['focus-inverted']};
-    }
-  `;
-});
-StyledDrawerBackButton.defaultProps = defaultThemeProp;
-export const StyledDrawerList = styled.ul(() => {
-    return css ``;
-});
-StyledDrawerList.defaultProps = defaultThemeProp;
-export const StyledDrawerMetaList = styled.ul `
-  li {
-    color: inherit;
-  }
-`;
-export const StyledDrawerPinButton = styled.button(({ theme }) => {
-    const fontSize = calculateFontSize(theme.base['font-size'], theme.base['font-scale']);
-    const { ltr } = useDirection();
-    return css `
-    color: inherit;
-    padding: calc(2 * ${theme.base.spacing});
-    cursor: pointer;
-    font-size: ${fontSize.xxl};
-
-    ${StyledIcon} {
-      display: block;
-      ${ltr &&
-        css `
-        transform: scaleX(-1);
-      `}
-    }
-
-    &:hover,
-    &:focus {
-      color: ${theme.base.colors.white};
-      background-color: rgba(255, 255, 255, 0.05);
-    }
-
-    &:focus {
-      outline: none;
-      box-shadow: inset ${theme.base.shadow['focus-inverted']};
-    }
-  `;
-});
-StyledDrawerPinButton.defaultProps = defaultThemeProp;
-export const EmptyDrawerVisual = styled.div(({ theme }) => {
-    return css `
-    width: calc(4 * ${theme.base.spacing});
-    height: calc(4 * ${theme.base.spacing});
-  `;
-});
-EmptyDrawerVisual.defaultProps = defaultThemeProp;
-export const StyledDrawerListHeading = styled.h3(({ theme }) => {
-    return css `
-    position: sticky;
-    top: 0;
-    padding: ${theme.base.spacing} calc(2 * ${theme.base.spacing});
-    background-color: hsl(207 14% 13% / 1);
-    z-index: 1;
-  `;
-});
-StyledDrawerListHeading.defaultProps = defaultThemeProp;
-export const StyledDrawerViewAll = styled.a(({ theme }) => {
-    return css `
-    position: sticky;
-    bottom: 0;
-    padding: ${theme.base.spacing} 0;
-    color: inherit;
-    background-color: ${theme.components['app-shell'].nav['background-color']};
-    text-align: center;
-    margin-top: 0.0625rem;
-
-    &:hover,
-    &:focus {
-      color: ${theme.base.colors.white};
-      box-shadow: unset;
-    }
-  `;
-});
-StyledDrawerViewAll.defaultProps = defaultThemeProp;
-export const StyledDrawerListSection = styled.div(({ theme }) => {
-    const borderColor = tryCatch(() => lighten(0.1, theme.components['app-shell'].nav['background-color']));
-    return css `
-    border-top: 0.0625rem solid ${borderColor};
-    min-height: max(20%, 8rem);
-    overflow-y: auto;
-  `;
-});
-StyledDrawerListSection.defaultProps = defaultThemeProp;
-export const StyledDrawerListContainer = styled.div(({ theme }) => {
-    const fontSize = calculateFontSize(theme.base['font-size'], theme.base['font-scale']);
-    return css `
-    height: calc(100% - 4 * ${theme.base.spacing} - ${fontSize.xxl});
-    overflow: auto;
-  `;
-});
-StyledDrawerListContainer.defaultProps = defaultThemeProp;
 export const StyledLoading = styled.div `
   font-size: 2rem;
 `;
 /* Main content region styles */
-export const StyledAppMain = styled.main(({ appHeader, mobileNav, headerOffset = 0, theme }) => {
+export const StyledAppMain = styled.main(({ appHeader, mobileNav, navOpen, headerOffset = 0, theme }) => {
     const heightOffset = appHeader || mobileNav ? headerHeight : '0rem';
     return css `
     --appshell-offset: ${headerOffset}px;
+    --appshell-horizontal-offset: ${navOpen ? navOpenWidth : navWidth};
     position: relative;
     margin-inline-start: ${mobileNav ? 0 : navWidth};
     min-height: calc(100vh - ${heightOffset});
@@ -772,9 +379,11 @@ export const StyledAppMain = styled.main(({ appHeader, mobileNav, headerOffset =
       outline: none;
     }
 
-    @media (min-width: ${theme.base.breakpoints.xl}) {
+    ${navOpen &&
+        !mobileNav &&
+        css `
       margin-inline-start: ${navOpenWidth};
-    }
+    `}
 
     ${!mobileNav &&
         css `
@@ -790,136 +399,48 @@ export const StyledBannerRegion = styled.div(({ theme }) => {
   `;
 });
 StyledBannerRegion.defaultProps = defaultThemeProp;
-/* AppShellList styles */
-export const StyledAppShellListWrapper = styled.div(({ theme }) => {
-    return css `
-    max-height: 100%;
-    white-space: nowrap;
-
-    ${StyledSummaryItem} {
-      position: relative;
-      &::after {
-        content: '';
-        position: absolute;
-        top: calc(100% - 0.03125rem);
-        inset-inline-end: 1rem;
-        inset-inline-start: 1rem;
-        height: 0.0625rem;
-        background-color: ${theme.base.colors.gray['extra-dark']};
-      }
-    }
-  `;
-});
-StyledAppShellListWrapper.defaultProps = defaultThemeProp;
-export const StyledAppShellList = styled.ul ``;
-StyledAppShellList.defaultProps = defaultThemeProp;
-export const StyledAppShellSummaryItem = styled.div(({ theme }) => {
+export const StyledAppShellTooltip = styled(StyledTooltip)(({ theme }) => {
     return css `
-    padding: ${theme.base.spacing} calc(2 * ${theme.base.spacing});
-    color: inherit;
-    background-color: transparent;
-    border: none;
-    text-decoration: none;
-    cursor: pointer;
-    text-align: start;
-    white-space: normal;
-
-    &:hover,
-    &:focus {
-      color: ${theme.base.colors.white};
-      background-color: rgba(255, 255, 255, 0.05);
+    background-color: ${theme.components.tooltip['background-color']};
+    padding: 0;
+    header {
+      border-bottom: none;
     }
+    ${StyledMenuItem} {
+      background-color: ${theme.components.tooltip['background-color']};
+      color: ${theme.base.palette.light};
 
-    &:focus {
-      outline: none;
-      box-shadow: inset ${theme.base.shadow['focus-inverted']};
+      &:hover,
+      &:focus {
+        background-color: ${theme.components.tooltip['background-color']};
+        box-shadow: ${theme.base.shadow['focus-inverted']};
+      }
     }
   `;
 });
-StyledAppShellSummaryItem.defaultProps = defaultThemeProp;
-export const StyledAppShellMetaList = styled.ul `
-  li {
-    color: inherit;
-  }
-`;
-export const StyledAppShellPinButton = styled.button(({ theme }) => {
+StyledAppShellTooltip.defaultProps = defaultThemeProp;
+export const StyledAppShellToggleButton = styled(Button)(({ theme, open }) => {
     return css `
-    color: inherit;
+    background-color: ${theme.base.palette.dark};
+    color: ${theme.base.palette.light};
     border: none;
-    background-color: transparent;
+    margin-top: calc(1 * ${theme.base.spacing});
+    ${open &&
+        css `
+      padding-inline: 1rem;
+    `}
 
-    &:hover,
-    &:focus {
-      color: ${theme.base.colors.white};
-      background-color: rgba(255, 255, 255, 0.05);
+    ${StyledIcon} {
+      width: 1.25rem;
+      height: 1.25rem;
+      font-weight: bold;
     }
 
-    &:focus {
-      outline: none;
-      box-shadow: inset ${theme.base.shadow['focus-inverted']};
-    }
-  `;
-});
-StyledAppShellPinButton.defaultProps = defaultThemeProp;
-export const StyledNotificationVisual = styled.span(({ theme, unread, visualIncluded }) => {
-    return css `
-      position: relative;
-      ${StyledAlert} {
-        display: ${unread ? 'auto' : 'none'};
-        position: absolute;
-        inset-inline-start: -0.65625rem;
-        top: ${visualIncluded ? 'calc(50% - 0.15625rem)' : '0.5rem'};
-        background-color: ${theme.base.palette.light};
-        height: 0.3125rem;
-        width: 0.3125rem;
-      } ;
-    `;
-});
-StyledNotificationVisual.defaultProps = defaultThemeProp;
-export const StyledNotificationPrimary = styled.span(({ theme, unread }) => {
-    return css `
-    font-weight: ${unread
-        ? theme.base['font-weight'].bold
-        : theme.base['font-weight']['semi-bold']};
-    color: ${unread ? theme.base.palette.light : 'inherit'};
-  `;
-});
-StyledNotificationPrimary.defaultProps = defaultThemeProp;
-export const StyledNotificationSecondary = styled.span(({ theme, unread }) => {
-    return css `
-      ${StyledText} {
-        opacity: ${unread
-        ? theme.base.transparency['transparent-1']
-        : theme.base.transparency['transparent-3']};
-      }
-    `;
-});
-StyledNotificationSecondary.defaultProps = defaultThemeProp;
-export const EmptyStateColorContrast = styled.div `
-  ${StyledEmptyState} {
-    span,
-    svg {
-      color: rgba(255, 255, 255, 0.7);
+    &:enabled:focus,
+    :not([disabled]):focus {
+      box-shadow: ${theme.base.shadow['focus-inverted']};
     }
-  }
-`;
-export const StyledAppShellListSection = styled.div(({ theme }) => {
-    const borderColor = tryCatch(() => lighten(0.1, theme.components['app-shell'].nav['background-color']));
-    return css `
-    border-top: 0.0625rem solid ${borderColor};
-    min-height: max(20%, 8rem);
-    overflow-y: auto;
-  `;
-});
-StyledAppShellListSection.defaultProps = defaultThemeProp;
-export const StyledAppShellListHeading = styled.h3(({ theme }) => {
-    return css `
-    position: sticky;
-    top: 0;
-    padding: ${theme.base.spacing} calc(2 * ${theme.base.spacing});
-    background-color: hsl(207 14% 13% / 1);
-    z-index: 1;
   `;
 });
-StyledAppShellListHeading.defaultProps = defaultThemeProp;
+StyledAppShellToggleButton.defaultProps = defaultThemeProp;
 //# sourceMappingURL=AppShell.styles.js.map