@pega/cosmos-react-core 2.0.0-dev.9.2 → 2.0.0-rc.2

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

@@ -1,5 +1,6 @@
 import styled, { css } from 'styled-components';
 import { lighten, mix, readableColor, rgba } from 'polished';
+import { useContext } from 'react';
 import { StyledAvatar } from '../Avatar';
 import { StyledIcon } from '../Icon';
 import { StyledImage } from '../Image/Image';
@@ -7,12 +8,16 @@ import { StyledSearchInput, StyledSearchIcon, StyledSearchTextInput } from '../S
 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 { StyledNoItems } from '../NoItems';
+import { StyledEmptyState } from '../EmptyState';
 import { StyledMenuListContainer } from '../Menu/Menu.styles';
-import Text from '../Text';
+import Text, { StyledText } from '../Text';
 import { useDirection } from '../../hooks';
+import { StyledBareButton } from '../Button/BareButton';
+import { StyledAlert } from '../Badges/Alert';
+import AppShellContext from './AppShellContext';
 const navWidth = '4rem';
 const navOpenWidth = '18.75rem';
 const headerHeight = '3rem';
@@ -60,6 +65,11 @@ export const StyledAppInfo = styled.a(({ theme, href }) => {
       width: calc(${navWidth} / 2);
     }
 
+    span {
+      overflow: hidden;
+      text-overflow: ellipsis;
+    }
+
     span:last-of-type {
       font-size: ${fontSize.xs};
       color: rgba(255, 255, 255, 0.7);
@@ -72,7 +82,8 @@ export const StyledAppInfo = styled.a(({ theme, href }) => {
   `;
 });
 StyledAppInfo.defaultProps = defaultThemeProp;
-export const StyledScrollWrap = styled.div(({ navOpen }) => {
+export const StyledScrollWrap = styled.div(() => {
+    const { navOpen } = useContext(AppShellContext);
     return css `
     flex-grow: 1;
     overflow-x: hidden;
@@ -81,11 +92,10 @@ export const StyledScrollWrap = styled.div(({ navOpen }) => {
 });
 StyledScrollWrap.defaultProps = defaultThemeProp;
 export const StyledCountIcon = styled.span(({ theme: { base: { spacing } } }) => {
-    const { start } = useDirection();
     return css `
       position: absolute;
-      ${start}: calc(4.5 * ${spacing});
-      top: ${spacing};
+      inset-inline-start: calc(4 * ${spacing});
+      top: calc(0.5 * ${spacing});
       padding: 0 calc(0.5 * ${spacing});
     `;
 });
@@ -94,20 +104,36 @@ export const StyledAppShellNavIcon = styled.svg ``;
 export const StyledUtilIconCount = styled.span `
   flex-shrink: 0;
 `;
-export const StyledAppNav = styled.nav(({ appHeader, navOpen, theme }) => {
+export const StyledAppNav = styled.nav(({ appHeader, showEnv, theme }) => {
+    const { navOpen, navState } = useContext(AppShellContext);
     return css `
-      z-index: ${theme.base['z-index'].drawer};
       position: fixed;
+      z-index: ${navState !== 'closed'
+        ? css `calc(${theme.base['z-index'].backdrop} - 1) `
+        : 'auto'};
       background: ${theme.components['app-shell'].nav['background-color']};
-      max-width: calc(100vw - ${theme.base.sizes['touch-mouse']});
+      max-width: calc(100vw - ${theme.base['hit-area']['mouse-min']});
       width: ${navOpen ? navOpenWidth : navWidth};
       height: calc(100vh - ${appHeader ? headerHeight : '0rem'});
       overflow: hidden;
       white-space: nowrap;
       transition: width ${`${theme.base.animation.speed} ${theme.base.animation.timing.ease}`};
+      padding-block-end: ${theme.base.spacing};
+
+      ${!showEnv &&
+        css `
+        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.sizes['touch-finger']});
+        max-width: calc(100vw - ${theme.base['hit-area']['finger-min']});
       }
 
       ${theme.base['custom-scrollbar'] &&
@@ -171,7 +197,7 @@ export const StyledSearchForm = styled.form(({ theme }) => {
     padding: ${theme.base.spacing} 0;
 
     ${StyledSearchInput} {
-      margin: 0 calc((${navWidth} - ${theme.base.sizes['touch-mouse']}) / 2);
+      margin: 0 calc((${navWidth} - ${theme.base['hit-area']['mouse-min']}) / 2);
 
       &:focus-within {
         box-shadow: ${theme.base.shadow['focus-inverted']};
@@ -215,7 +241,7 @@ export const StyledNavListMenuButton = styled.button(({ theme }) => {
         background-color: transparent;
 
         &:hover,
-        &[aria-current='true'] {
+        &[data-current='true'] {
           color: #ffffff;
           background-color: rgba(255, 255, 255, 0.05);
         }
@@ -225,108 +251,109 @@ export const StyledNavListMenuButton = styled.button(({ theme }) => {
 });
 StyledNavListMenuButton.defaultProps = defaultThemeProp;
 export const StyledCaseClose = styled.button ``;
-export const StyledNavListItem = styled.li(({ theme, nestedListCollapsed, navOpen }) => {
+export const StyledNavListItem = styled.li(({ theme, nestedListCollapsed }) => {
+    const { navOpen } = useContext(AppShellContext);
     const activeBackground = tryCatch(() => rgba('#000000', theme.base.transparency['transparent-4']));
     const { rtl } = useDirection();
     return css `
-      display: block;
-      position: relative;
-      ${StyledIcon} {
-        font-size: 1.25rem;
-      }
+    display: block;
+    position: relative;
+    ${StyledIcon} {
+      font-size: 1.25rem;
+    }
 
-      ${StyledCaseClose} {
-        display: flex;
-        position: absolute;
-        left: ${navOpen ? 'auto' : '100%'};
-        opacity: 0;
-        &:hover,
-        &:focus {
-          ${navOpen &&
-        css `
-            opacity: 1;
-          `}
-        }
+    ${StyledCaseClose} {
+      display: flex;
+      position: absolute;
+      left: ${navOpen ? 'auto' : '100%'};
+      opacity: 0;
+      &:hover,
+      &:focus {
         ${navOpen &&
         css `
-          inset-inline-end: 1rem;
+          opacity: 1;
         `}
-        top: 50%;
-        bottom: 50%;
-        margin: auto 0;
-        color: rgba(255, 255, 255, 0.7);
-        transition-property: transform, opacity;
-        transition-duration: ${theme.base.animation.speed};
-        transition-timing-function: ${theme.base.animation.timing.ease};
       }
+      ${navOpen &&
+        css `
+        inset-inline-end: 1rem;
+      `}
+      top: 50%;
+      bottom: 50%;
+      margin: auto 0;
+      color: rgba(255, 255, 255, 0.7);
+      transition-property: transform, opacity;
+      transition-duration: ${theme.base.animation.speed};
+      transition-timing-function: ${theme.base.animation.timing.ease};
+    }
 
-      > :first-child {
-        position: relative;
-        display: flex;
-        align-items: center;
-        width: 100%;
-        padding: ${theme.base.spacing} 0;
-        white-space: nowrap;
-        color: rgba(255, 255, 255, 0.7);
-        cursor: pointer;
-        font-weight: ${theme.base['font-weight']['semi-bold']};
-        text-decoration: none;
+    > :first-child {
+      position: relative;
+      display: flex;
+      align-items: center;
+      width: 100%;
+      padding: calc(1.25 * ${theme.base.spacing}) 0;
+      white-space: nowrap;
+      color: rgba(255, 255, 255, 0.7);
+      cursor: pointer;
+      font-weight: ${theme.base['font-weight']['semi-bold']};
+      text-decoration: none;
 
-        span {
-          overflow: hidden;
-          text-overflow: ellipsis;
-          color: inherit;
-          white-space: nowrap;
-        }
+      span {
+        overflow: hidden;
+        text-overflow: ellipsis;
+        color: inherit;
+        white-space: nowrap;
+      }
 
-        &:hover,
-        &:focus {
-          color: #ffffff;
-          background: rgba(255, 255, 255, 0.05);
-        }
+      &:hover,
+      &:focus {
+        color: #ffffff;
+        background: rgba(255, 255, 255, 0.05);
+      }
 
-        &:hover + ${StyledCaseClose}, &:focus + ${StyledCaseClose} {
-          ${navOpen &&
+      &:hover + ${StyledCaseClose}, &:focus + ${StyledCaseClose} {
+        ${navOpen &&
         css `
-            opacity: 1;
-          `}
-        }
+          opacity: 1;
+        `}
+      }
 
-        &:focus {
-          outline: none;
-          box-shadow: inset ${theme.base.shadow['focus-inverted']};
-        }
+      &:focus {
+        outline: none;
+        box-shadow: inset ${theme.base.shadow['focus-inverted']};
+      }
 
-        ${StyledAppShellNavIcon}:last-child {
-          position: absolute;
-          left: ${navOpen ? 'auto' : '100%'};
-          ${navOpen &&
-        css `
-            inset-inline-end: 1rem;
-          `}
-          margin: 0;
-          opacity: ${navOpen ? '1' : '0'};
-          transition-property: transform, opacity;
-          transition-duration: ${theme.base.animation.speed};
-          transition-timing-function: ${theme.base.animation.timing.ease};
-
-          ${!nestedListCollapsed &&
+      ${StyledAppShellNavIcon}:last-child {
+        position: absolute;
+        left: ${navOpen ? 'auto' : '100%'};
+        ${navOpen &&
         css `
-            transform: rotateZ(${rtl ? '-90deg' : '90deg'});
-          `}
-        }
+          inset-inline-end: 1rem;
+        `}
+        margin: 0;
+        opacity: ${navOpen ? '1' : '0'};
+        transition-property: transform, opacity;
+        transition-duration: ${theme.base.animation.speed};
+        transition-timing-function: ${theme.base.animation.timing.ease};
 
-        ${StyledAppShellNavIcon}:first-child {
-          flex-shrink: 0;
-          margin: 0 calc((${navWidth} - 1.125rem) / 2);
-        }
+        ${!nestedListCollapsed &&
+        css `
+          transform: rotateZ(${rtl ? '-90deg' : '90deg'});
+        `}
       }
 
-      &[aria-current='page'] > :first-child {
-        color: ${theme.base.colors.blue.light};
-        background-color: ${activeBackground};
+      ${StyledAppShellNavIcon}:first-child {
+        flex-shrink: 0;
+        margin: 0 calc((${navWidth} - 1.125rem) / 2);
       }
-    `;
+    }
+
+    &[aria-current='page'] > :first-child {
+      color: ${theme.base.colors.blue.light};
+      background-color: ${activeBackground};
+    }
+  `;
 });
 StyledNavListItem.defaultProps = defaultThemeProp;
 export const StyledNavList = styled.ul ``;
@@ -370,12 +397,13 @@ export const StyledUtils = styled.div(({ theme }) => {
     const borderColor = tryCatch(() => lighten(0.1, theme.components['app-shell'].nav['background-color']));
     return css `
     border-top: 0.0625rem solid ${borderColor};
-    li:last-child ${StyledAvatar} {
+    li ${StyledAvatar} {
       flex-shrink: 0;
-      margin: 0 calc((${navWidth} - ${theme.base.sizes['touch-mouse']}) / 2);
+      margin: 0 calc((${navWidth} - ${theme.base['hit-area']['mouse-min']}) / 2);
       font-weight: ${theme.base['font-weight'].normal};
     }
-    ${StyledIcon}:first-child {
+
+    ${StyledBareButton} > ${StyledIcon}:first-child, ${StyledBareButton} > ${StyledUtilIconCount} {
       flex-shrink: 0;
       margin: 0 calc((${navWidth} - 1.125rem) / 2);
     }
@@ -383,17 +411,20 @@ export const StyledUtils = styled.div(({ theme }) => {
 });
 StyledUtils.defaultProps = defaultThemeProp;
 /* AppHeader styles */
-export const StyledAppHeaderInfo = styled.a(({ centerLogo, theme }) => {
+export const StyledAppHeaderInfo = styled.div(({ centerLogo, theme }) => {
     return css `
-    display: flex;
-
-    &:hover {
+    & > :first-child {
       text-decoration: none;
+      vertical-align: top;
     }
 
-    > ${StyledImage} {
+    ${StyledImage} {
       height: 1.625rem;
-      padding-inline-start: ${centerLogo ? theme.base.spacing : 0};
+
+      ${centerLogo &&
+        css `
+        padding-inline-start: ${theme.base.spacing};
+      `}
     }
   `;
 });
@@ -475,14 +506,22 @@ export const StyledAppHeaderSpacer = styled.div `
 `;
 export const StyledAppHeaderText = styled(Text)(({ theme, variant }) => {
     const contrastColor = tryCatch(() => readableColor(theme.components['app-shell'].header['background-color']));
-    const secondaryColor = tryCatch(() => rgba(contrastColor !== null && contrastColor !== void 0 ? contrastColor : theme.base.palette['foreground-color'], theme.base.transparency['transparent-2']));
+    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%;
 
@@ -496,13 +535,14 @@ export const StyledAppHeader = styled.header(({ hideTitle, theme }) => {
     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%;
-    min-height: ${headerHeight};
+    height: ${headerHeight};
     background-color: ${headerColor};
-    position: sticky;
-    top: 0;
-    z-index: ${theme.base['z-index'].drawer};
+    border-bottom: solid 0.0625rem ${theme.base.palette['border-line']};
 
     > :first-child {
       justify-self: flex-start;
@@ -528,7 +568,7 @@ export const StyledAppHeader = styled.header(({ hideTitle, theme }) => {
           background-color: transparent;
 
           &:hover,
-          &[aria-current='true'] {
+          &[data-current='true'] {
             color: ${hoverColors.foreground};
             background-color: ${hoverColors.background};
           }
@@ -593,8 +633,8 @@ export const StyledDrawerHeading = styled.header(({ theme }) => {
 StyledDrawerHeading.defaultProps = defaultThemeProp;
 export const StyledDrawerBackButton = styled.button(({ theme }) => {
     return css `
-    height: ${theme.base.sizes['touch-mouse']};
-    width: ${theme.base.sizes['touch-mouse']};
+    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']}`}
     );
@@ -616,28 +656,6 @@ export const StyledDrawerList = styled.ul(() => {
     return css ``;
 });
 StyledDrawerList.defaultProps = defaultThemeProp;
-export const StyledDrawerSummaryItem = styled.a(({ theme }) => {
-    return css `
-    padding: ${theme.base.spacing} calc(2 * ${theme.base.spacing});
-    color: inherit;
-    background-color: transparent;
-    border: none;
-    text-decoration: none;
-    cursor: pointer;
-
-    &: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']};
-    }
-  `;
-});
-StyledDrawerSummaryItem.defaultProps = defaultThemeProp;
 export const StyledDrawerMetaList = styled.ul `
   li {
     color: inherit;
@@ -698,6 +716,7 @@ export const StyledDrawerViewAll = styled.a(({ theme }) => {
     color: inherit;
     background-color: ${theme.components['app-shell'].nav['background-color']};
     text-align: center;
+    margin-top: 0.0625rem;
 
     &:hover,
     &:focus {
@@ -728,26 +747,29 @@ export const StyledLoading = styled.div `
   font-size: 2rem;
 `;
 /* Main content region styles */
-export const StyledAppMain = styled.main(({ appHeader, mobileNav, theme }) => {
-    let heightOffset = 0;
-    if (appHeader || mobileNav)
-        heightOffset = 3;
+export const StyledAppMain = styled.main(({ appHeader, mobileNav, headerOffset = 0, theme }) => {
+    const heightOffset = appHeader || mobileNav ? headerHeight : '0rem';
     return css `
-      position: relative;
-      margin-inline-start: ${mobileNav ? 0 : navWidth};
-      min-height: calc(100vh - ${heightOffset}rem);
-      background-color: ${theme.base.palette['app-background']};
+    --appshell-offset: ${headerOffset}px;
+    position: relative;
+    margin-inline-start: ${mobileNav ? 0 : navWidth};
+    min-height: calc(100vh - ${heightOffset});
+    background-color: ${theme.base.palette['app-background']};
 
-      @media (min-width: ${theme.base.breakpoints.xl}) {
-        margin-inline-start: ${navOpenWidth};
-      }
+    :focus {
+      outline: none;
+    }
+
+    @media (min-width: ${theme.base.breakpoints.xl}) {
+      margin-inline-start: ${navOpenWidth};
+    }
 
-      ${!mobileNav &&
+    ${!mobileNav &&
         css `
-        transition: margin-inline-start
-          ${`${theme.base.animation.speed} ${theme.base.animation.timing.ease}`};
-      `}
-    `;
+      transition: margin-inline-start
+        ${`${theme.base.animation.speed} ${theme.base.animation.timing.ease}`};
+    `}
+  `;
 });
 StyledAppMain.defaultProps = defaultThemeProp;
 export const StyledBannerRegion = styled.div(({ theme }) => {
@@ -757,14 +779,29 @@ export const StyledBannerRegion = styled.div(({ theme }) => {
 });
 StyledBannerRegion.defaultProps = defaultThemeProp;
 /* AppShellList styles */
-export const StyledAppShellListWrapper = styled.div `
-  max-height: 100%;
-  white-space: nowrap;
-`;
+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.a(({ theme }) => {
+export const StyledAppShellSummaryItem = styled.div(({ theme }) => {
     return css `
     padding: ${theme.base.spacing} calc(2 * ${theme.base.spacing});
     color: inherit;
@@ -773,6 +810,7 @@ export const StyledAppShellSummaryItem = styled.a(({ theme }) => {
     text-decoration: none;
     cursor: pointer;
     text-align: start;
+    white-space: normal;
 
     &:hover,
     &:focus {
@@ -793,21 +831,10 @@ export const StyledAppShellMetaList = styled.ul `
   }
 `;
 export const StyledAppShellPinButton = 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);
-      `}
-    }
+    border: none;
+    background-color: transparent;
 
     &:hover,
     &:focus {
@@ -822,15 +849,42 @@ export const StyledAppShellPinButton = styled.button(({ theme }) => {
   `;
 });
 StyledAppShellPinButton.defaultProps = defaultThemeProp;
-export const StyledNotificationAlert = styled.div(({ theme }) => {
+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 `
-    border: unset;
-    background-color: ${theme.base.colors.blue.light};
+    font-weight: ${unread
+        ? theme.base['font-weight'].bold
+        : theme.base['font-weight']['semi-bold']};
+    color: ${unread ? theme.base.palette.light : 'inherit'};
   `;
 });
-StyledNotificationAlert.defaultProps = defaultThemeProp;
-export const NoItemsColorContrast = styled.div `
-  ${StyledNoItems} {
+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);