@pega/cosmos-react-work 8.0.0-build.4.3 → 8.0.0-build.40.0

package/lib/components/CaseView/CaseView.styles.js

@@ -1,18 +1,22 @@
 import styled, { css } from 'styled-components';
 import { getContrast, hideVisually, meetsContrastGuidelines, rgba, transparentize } from 'polished';
 import { useContext } from 'react';
-import { Button, calculateFontSize, CardContent, defaultThemeProp, StyledBreadcrumbs, StyledButtonLink, StyledFieldValue, StyledStackedFieldValue, StyledIcon, StyledLabel, StyledPopover, StyledText, StyledTooltip, tryCatch, FieldValueList, StyledLink, readableHue, StyledCard, Text, readableColor, AppShellContext, AIButton } from '@pega/cosmos-react-core';
+import { Button, calculateFontSize, CardContent, defaultThemeProp, StyledBreadcrumbs, StyledButtonLink, StyledFieldValue, StyledStackedFieldValue, StyledIcon, StyledLabel, StyledPopover, StyledText, StyledTooltip, tryCatch, FieldValueList, StyledLink, readableHue, StyledCard, Text, readableColor, AppShellContext, AIButton, StyledButton, calculateForegroundColor, calculateBackgroundAndContrastColor, isSolidColor, StyledSummaryListItem } from '@pega/cosmos-react-core';
 import { StyledMenu } from '@pega/cosmos-react-core/lib/components/Menu/Menu.styles';
 import { oneColumnDetailsColumnWidth } from '@pega/cosmos-react-work/lib/components/Details/Details.styles';
 import { headerHeight } from '@pega/cosmos-react-core/lib/components/AppShell/AppShell.styles';
+import { StyledCardHeader } from '@pega/cosmos-react-core/lib/components/Card/CardHeader';
+import { StyledAllTabsWrapper, StyledTabs, StylesAllTabsButtonWrapper } from '@pega/cosmos-react-core/lib/components/Tabs/Tabs.styles';
+import { StyledMenuButton } from '@pega/cosmos-react-core/lib/components/MenuButton/MenuButton';
+import { StyledTab } from '@pega/cosmos-react-core/lib/components/Tabs/Tab';
 import { StyledStage, StyledStageContainer, StyledStages } from '../Stages/Stages.styles';
 import { StyledAssignments } from '../Assignments/Assignments.styles';
+import { StyledAssignments as StyledHierarchicalAssignments } from '../HierarchicalAssignments/Assignments.styles';
 import { StyledGenAICoachContainer } from '../GenAICoach/GenAICoach.styles';
+import { StyledTaskList } from '../Tasks/TaskList';
 import { useCaseViewContext } from './CaseView.context';
 const labelWidth = '16ch';
 const inlineEndButtonOffset = '0.375rem';
-export const StyledCaseSummaryFields = styled.div ``;
-StyledCaseSummaryFields.defaultProps = defaultThemeProp;
 export const StyledSummaryPrimaryList = styled(FieldValueList)(({ theme, wrapped }) => {
     const fontSizes = calculateFontSize(theme.base['font-size'], theme.base['font-scale']);
     return css `
@@ -41,6 +45,20 @@ export const StyledSummarySecondaryList = styled(FieldValueList)(() => {
     }
   `;
 });
+export const StyledCaseSummaryFields = styled.div(({ theme }) => {
+    const { components: { 'field-value-list': { inline: { detached } } } } = theme;
+    return (detached &&
+        css `
+      ${StyledSummaryPrimaryList} {
+        padding: 0 calc(${theme.components.card.padding} * 2);
+      }
+      ${StyledSummarySecondaryList} {
+        padding: calc(${theme.components.card.padding} * 2);
+        border-block: 0.0625rem solid ${theme.base.palette['border-line']};
+      }
+    `);
+});
+StyledCaseSummaryFields.defaultProps = defaultThemeProp;
 export const StyledSummaryTabContent = styled(CardContent)(({ theme }) => {
     const { base: { spacing } } = theme;
     return css `
@@ -57,21 +75,34 @@ export const StyledSummaryTabContent = styled(CardContent)(({ theme }) => {
 });
 StyledSummaryTabContent.defaultProps = defaultThemeProp;
 export const StyledCaseHeader = styled.header(({ theme }) => {
-    const color = tryCatch(() => readableColor(theme.base.palette['brand-primary']));
+    const { components: { 'case-view': { header: { 'foreground-color': caseHeaderForegroundColor, background }, summary: { detached: summaryDetached }, utilities: { detached: utilitiesDetached } } }, base: { 'border-radius': borderRadius, spacing, shadow, 'z-index': zIndex, palette } } = theme;
+    const foregroundColor = calculateForegroundColor(background, caseHeaderForegroundColor);
+    const { aboveSM, aboveMD, persistentUtility, aboveXL, summaryExpanded, isPreview } = useCaseViewContext();
+    const shouldRenderMobileTabs = !aboveMD || (persistentUtility && !aboveXL) || !summaryExpanded;
+    const caseHeaderBorderRadius = shouldRenderMobileTabs
+        ? `0 0 ${utilitiesDetached ? borderRadius : 0} ${borderRadius}`
+        : `${borderRadius} ${borderRadius} 0 0`;
     return css `
-    background-color: ${theme.base.palette['brand-primary']};
-    color: ${color};
-    padding: ${theme.base.spacing} calc(2 * ${theme.base.spacing});
+    background: ${background};
+    color: ${foregroundColor};
+    padding: ${spacing} calc(2 * ${spacing});
     position: relative;
 
+    ${summaryDetached &&
+        !isPreview &&
+        aboveSM &&
+        css `
+      border-radius: ${caseHeaderBorderRadius};
+    `}
+
     h1:focus-visible {
       outline: transparent;
-      box-shadow: ${theme.base.shadow.focus};
+      box-shadow: ${shadow.focus};
     }
 
     ${StyledMenu} {
-      color: ${theme.base.palette['foreground-color']};
-      z-index: ${theme.base['z-index'].popover + 1};
+      color: ${palette['foreground-color']};
+      z-index: ${zIndex.popover + 1};
     }
   `;
 });
@@ -99,15 +130,20 @@ export const StyledHeaderActions = styled.div(({ offsetEnd, theme }) => {
         css `
       padding-inline-end: ${inlineEndButtonOffset};
     `};
+
+    ${StyledButton} {
+      margin-inline-start: 0;
+    }
   `;
 });
 StyledHeaderActions.defaultProps = defaultThemeProp;
 export const StyledCaseHeaderText = styled.hgroup(({ theme }) => {
-    const color = readableColor(theme.base.palette['brand-primary']);
-    const transparentColor = tryCatch(() => transparentize(0.1, color));
+    const { components: { 'case-view': { header: { 'foreground-color': foregroundColor, background: caseHeaderBackground } } } } = theme;
+    /* If the foreground-color is auto, we calculate the text color and transparentColor based on the background color. */
+    const color = calculateForegroundColor(caseHeaderBackground, foregroundColor);
     const fontSize = calculateFontSize(theme.base['font-size'], theme.base['font-scale']);
     const idStyle = css `
-    color: ${transparentColor};
+    color: ${color};
     font-size: ${fontSize.s};
     font-weight: normal;
   `;
@@ -151,17 +187,21 @@ export const StyledCaseHeaderText = styled.hgroup(({ theme }) => {
 });
 StyledCaseHeaderText.defaultProps = defaultThemeProp;
 export const StyledCaseHeaderPromotedAction = styled(Button)(({ theme }) => {
-    const { base: { palette: { 'brand-primary': primary, interactive } } } = theme;
-    const interactiveUsable = getContrast(primary, interactive) >= 4.5;
-    const color = interactiveUsable ? interactive : readableColor(primary);
+    const { base: { palette: { interactive } }, components: { 'case-view': { header: { background, 'foreground-color': foregroundColor } } } } = theme;
+    /* If foreground color is auto, we calculate the text color based on the background color. */
+    const textColor = calculateForegroundColor(background, foregroundColor);
+    const isGradientBackground = !isSolidColor(background);
+    const backgroundColor = isGradientBackground ? readableColor(textColor) : background;
+    const interactiveUsable = getContrast(backgroundColor, interactive) >= 4.5;
+    const color = !isGradientBackground && interactiveUsable ? interactive : textColor;
     let hoverBackground = rgba(color, 0.15);
-    if (interactiveUsable) {
-        hoverBackground = readableHue(hoverBackground, color);
+    if (!isGradientBackground && interactiveUsable) {
+        hoverBackground = readableHue(interactive, color);
     }
     return css `
-    --button-background-color: ${primary};
+    --button-background-color: ${backgroundColor};
     color: ${color};
-    background-color: ${primary};
+    background-color: transparent;
     border-color: ${color};
 
     @media (hover: hover) {
@@ -224,17 +264,18 @@ const popoverColorReset = (theme) => {
   `;
 };
 export const StyledHeaderSummary = styled.dl(({ theme }) => {
-    const { base: { palette: { 'brand-primary': primary, interactive } } } = theme;
-    const interactiveUsable = meetsContrastGuidelines(primary, interactive).AA;
-    const color = readableColor(primary);
-    const transparentColor = tryCatch(() => transparentize(0.1, color));
+    const { base: { palette: { interactive } }, components: { 'case-view': { header: { 'foreground-color': foregroundColor, background } } } } = theme;
+    /* If the foreground-color is auto, we calculate the text color and transparentColor based on the background color. */
+    const color = calculateForegroundColor(background, foregroundColor);
+    const { backgroundColor } = calculateBackgroundAndContrastColor(background, foregroundColor);
+    const interactiveUsable = meetsContrastGuidelines(backgroundColor, interactive).AA;
     return css `
     max-width: 100%;
     min-width: 0;
 
     > ${StyledStackedFieldValue} {
       > ${StyledLabel} {
-        color: ${transparentColor};
+        color: ${color};
         white-space: nowrap;
       }
 
@@ -301,15 +342,20 @@ export const StyledCaseSummaryInfo = styled.div(() => {
 });
 StyledCaseSummaryInfo.defaultProps = defaultThemeProp;
 export const StyledCaseSummaryContainer = styled.div(({ theme }) => {
+    const { components: { 'field-value-list': { inline: { detached } } } } = theme;
     return css `
     padding: calc(1.5 * ${theme.base.spacing}) calc(${theme.components.card.padding} * 2);
+
+    ${detached &&
+        css `
+      padding: calc(1.5 * ${theme.base.spacing}) 0;
+    `}
   `;
 });
 StyledCaseSummaryContainer.defaultProps = defaultThemeProp;
 export const StyledExpandCollapseButton = styled(Button)(() => {
     return css `
     border: none;
-
     ${StyledIcon} {
       width: 1.5rem;
       height: 1.5rem;
@@ -350,72 +396,137 @@ export const StyledExpandCollapseSummaryButton = styled(StyledExpandCollapseButt
   `;
 });
 StyledExpandCollapseSummaryButton.defaultProps = defaultThemeProp;
-export const StyledCaseSummary = styled.div(() => {
+export const StyledCaseSummary = styled.div(({ theme: { base: { palette: { 'primary-background': primaryBackground }, 'border-radius': borderRadius, 'hit-area': { 'mouse-min': mouseMin, 'finger-min': fingerMin } }, components: { 'case-view': { summary: { detached } }, tabs: { detached: tabsDetached } } } }) => {
     const { summaryExpanded, aboveMD } = useCaseViewContext();
     return css `
-    position: relative;
-    height: 100%;
-    ${aboveMD &&
+      background-color: ${primaryBackground};
+      position: relative;
+      height: 100%;
+      ${aboveMD &&
         summaryExpanded &&
         css `
-      width: 25rem;
-    `}
-  `;
+        width: 25rem;
+      `}
+
+      ${detached &&
+        css `
+        border-radius: ${borderRadius};
+        --border-radius: calc(${borderRadius} * 0.5);
+      `}
+
+      ${tabsDetached &&
+        css `
+        & ${StyledTabs} {
+          &[aria-orientation='vertical'] {
+            & ${StyledTab} {
+              height: ${mouseMin};
+
+              @media (pointer: coarse) {
+                height: ${fingerMin};
+              }
+            }
+          }
+        }
+      `}
+    `;
 });
-export const StyledWorkArea = styled.div(({ theme }) => {
+StyledCaseSummary.defaultProps = defaultThemeProp;
+export const StyledWorkArea = styled.div(({ theme: { base: { palette: { 'border-line': borderLine, 'secondary-background': secondaryBackground }, spacing, 'border-radius': borderRadius }, components: { 'case-view': { assignments: { detached: assignmentDetached, background: assignmentBackground, 'foreground-color': assignmentForegroundColor } }, tabs: { detached: tabsDetached }, card: { background, 'foreground-color': foregroundColor, 'border-radius': cardBorderRadius } } } }) => {
+    const { backgroundColor } = calculateBackgroundAndContrastColor(background, foregroundColor);
+    const foregroundColorForAssignment = calculateForegroundColor(assignmentBackground, assignmentForegroundColor);
     const { summaryExpanded, aboveMD, intelligentGuidance } = useCaseViewContext();
     let pbeRem = 0;
     if (intelligentGuidance) {
         pbeRem = aboveMD && !summaryExpanded ? 4 : 6;
     }
     return css `
-    grid-area: work-area;
-    padding: calc(2 * ${theme.base.spacing});
+      grid-area: work-area;
+      padding: calc(2 * ${spacing});
 
-    ${aboveMD &&
+      ${aboveMD &&
         css `
-      padding: calc(2 * ${theme.base.spacing}) 0;
+        padding: calc(2 * ${spacing}) 0;
 
-      /* This is required to make scrollStick work. */
-      height: max-content;
+        /* This is required to make scrollStick work. */
+        height: max-content;
 
-      ${!summaryExpanded &&
+        ${!summaryExpanded &&
             css `
-        margin-inline-start: calc(2 * ${theme.base.spacing});
+          margin-inline-start: calc(2 * ${spacing});
+        `}
       `}
-    `}
 
-    /* Order of style here is necessary for overriding styles above. */
+      /* Order of style here is necessary for overriding styles above. */
     ${pbeRem > 0 &&
         css `
-      /* Accounts for collapsed intelligentGuidance bubble covering work area content when fully scrolled. */
-      padding-block-end: ${pbeRem}rem;
-    `}
+        /* Accounts for collapsed intelligentGuidance bubble covering work area content when fully scrolled. */
+        padding-block-end: ${pbeRem}rem;
+      `}
 
-    &:has(${StyledAssignments}) {
-      ${StyledStages} {
-        border-block-end: 0.0625rem solid ${theme.base.palette['border-line']};
+    &:has(${StyledAssignments}),
+    &:has(${StyledHierarchicalAssignments}) {
+        ${StyledStages} {
+          border-block-end: 0.0625rem solid ${borderLine};
 
-        &,
-        ${StyledStageContainer}:first-of-type > ${StyledStage} {
-          border-end-start-radius: 0;
-        }
+          &,
+          ${StyledStageContainer}:first-of-type > ${StyledStage} {
+            border-end-start-radius: 0;
+          }
 
-        &,
-        ${StyledStageContainer}:last-of-type > ${StyledStage} {
-          border-end-end-radius: 0;
+          &,
+          ${StyledStageContainer}:last-of-type > ${StyledStage} {
+            border-end-end-radius: 0;
+          }
         }
       }
-    }
 
-    &:has(${StyledStages}) {
-      ${StyledCard}${StyledAssignments} {
-        margin-block-start: calc(-2 * ${theme.base.spacing});
-        border-start-start-radius: 0;
-        border-start-end-radius: 0;
+      ${tabsDetached &&
+        css `
+        ${StyledAllTabsWrapper} {
+          background-color: ${secondaryBackground};
+          border-start-start-radius: ${cardBorderRadius};
+          border-start-end-radius: ${cardBorderRadius};
+
+          ${StyledTabs} {
+            border-radius: unset;
+            border-start-end-radius: inherit;
+          }
+
+          ${StylesAllTabsButtonWrapper}, ${StyledMenuButton} {
+            border-start-start-radius: inherit;
+          }
+        }
+      `}
+
+      &:has(${StyledStages}) {
+        ${StyledCard}${StyledAssignments},
+        ${StyledCard}${StyledHierarchicalAssignments} {
+          margin-block-start: calc(-2 * ${spacing});
+          border-start-start-radius: 0;
+          border-start-end-radius: 0;
+        }
+
+        &:has(${StyledCard}${StyledAssignments} > ${StyledCardHeader}),
+        &:has(${StyledCard}${StyledHierarchicalAssignments} > ${StyledCardHeader}) {
+          ${StyledCard}${StyledAssignments},
+          ${StyledCard}${StyledHierarchicalAssignments} {
+            background: ${assignmentBackground};
+            color: ${foregroundColorForAssignment};
+            ${assignmentDetached &&
+        css `
+              ${StyledTaskList} {
+                background-color: ${backgroundColor};
+                border: solid 0.0625rem ${borderLine};
+                border-radius: calc(--border-radius, ${borderRadius});
+                ${StyledSummaryListItem} {
+                  padding: calc(${spacing} / 2) ${spacing};
+                }
+              }
+            `}
+          }
+        }
       }
-    }
-  `;
+    `;
 });
 StyledWorkArea.defaultProps = defaultThemeProp;
 export const StyledUtilitiesHeading = styled(Text) ``;
@@ -458,30 +569,45 @@ export const StyledUtilities = styled.div(({ theme }) => {
   `;
 });
 StyledUtilities.defaultProps = defaultThemeProp;
-export const StyledSummary = styled.div(({ theme }) => {
-    const { summaryExpanded, aboveMD } = useCaseViewContext();
+export const StyledSummary = styled.div(({ theme: { base: { spacing, breakpoints, 'z-index': zIndex }, components: { 'case-view': { summary: { detached: summaryDetached }, utilities: { detached: utilitiesDetached } } } } }) => {
+    const { aboveSM, aboveMD, persistentUtility, aboveXL, summaryExpanded, isPreview } = useCaseViewContext();
+    const shouldRenderMobileTabs = !aboveMD || (persistentUtility && !aboveXL) || !summaryExpanded;
     return css `
-    top: ${summaryExpanded ? 'var(--top-offset)' : 'var(--appshell-offset, 0)'};
-    width: 100%;
-    background-color: ${theme.base.palette['primary-background']};
-    z-index: ${theme.base['z-index'].popover};
+      top: ${summaryExpanded ? 'var(--top-offset)' : 'var(--appshell-offset, 0)'};
+      width: 100%;
+      z-index: ${zIndex.popover};
 
-    ${aboveMD &&
+      ${aboveMD &&
         summaryExpanded &&
         css `
-      height: var(--case-view-height);
-    `}
+        height: var(--case-view-height);
+      `}
+
+      ${summaryDetached &&
+        aboveSM &&
+        css `
+        padding: calc(2 * ${spacing});
+        padding-inline-end: ${utilitiesDetached && shouldRenderMobileTabs
+            ? `calc(2 * ${spacing})`
+            : 0};
+        padding-block: ${shouldRenderMobileTabs ? 0 : `calc(2 * ${spacing})`};
+      `}
 
-    ${aboveMD
+      ${isPreview &&
+        css `
+        padding: 0;
+      `}
+
+      ${aboveMD
         ? css `
-          position: sticky;
-        `
-        : css `
-          @media (min-height: ${theme.base.breakpoints.sm}) {
             position: sticky;
-          }
-        `}
-  `;
+          `
+        : css `
+            @media (min-height: ${breakpoints.sm}) {
+              position: sticky;
+            }
+          `}
+    `;
 });
 StyledSummary.defaultProps = defaultThemeProp;
 export const StyledCaseDrawer = styled.div(({ previewActive, theme }) => {
@@ -509,47 +635,98 @@ export const StyledCaseDrawer = styled.div(({ previewActive, theme }) => {
   `;
 });
 StyledCaseDrawer.defaultProps = defaultThemeProp;
-export const StyledCaseDrawerContent = styled.div(({ theme }) => {
+export const StyledCaseDrawerContent = styled.div(({ theme: { base: { palette: { 'app-background': appBackground }, spacing } } }) => {
     return css `
-    background-color: ${theme.base.palette['app-background']};
-    padding: calc(2 * ${theme.base.spacing});
-    height: 100%;
-    overflow: auto;
-  `;
+      background: ${appBackground};
+      padding: calc(2 * ${spacing});
+      height: 100%;
+      overflow: auto;
+    `;
 });
 StyledCaseDrawerContent.defaultProps = defaultThemeProp;
-export const StyledPersistentUtility = styled.div(({ theme }) => {
+export const StyledPersistentUtility = styled.div(({ theme, persistentUtilityExpanded }) => {
     return css `
-    width: ${theme.base['content-width'].md};
-    overflow: auto;
-    position: sticky;
-    z-index: 1;
-    height: var(--case-view-height);
-    top: var(--top-offset);
-    padding-block: calc(2 * ${theme.base.spacing});
-  `;
+      width: ${persistentUtilityExpanded ? '100%' : theme.base['content-width'].md};
+      overflow: auto;
+      position: sticky;
+      z-index: 1;
+      height: var(--case-view-height);
+      inset-block-start: var(--top-offset);
+      padding-block: calc(2 * ${theme.base.spacing});
+    `;
 });
 StyledPersistentUtility.defaultProps = defaultThemeProp;
+export const StyledPersistentContainer = styled.div `
+  height: 100%;
+`;
+export const StyledPersistentContent = styled.div(({ theme }) => {
+    return css `
+    height: calc (100% - calc(4 * ${theme.base.spacing}));
+  `;
+});
+StyledPersistentContent.defaultProps = defaultThemeProp;
 export const ScrollStick = styled.div `
   position: sticky;
   top: 0;
 `;
-export const StyledCaseView = styled.div(({ theme }) => {
-    const { aboveMD } = useCaseViewContext();
+export const StyledCaseView = styled.div(({ theme: { base: { palette: { 'app-background': appBackground }, spacing, 'border-radius': borderRadius }, components: { 'case-view': { utilities: { detached: utilitiesDetached, background: utilitiesBackground, 'foreground-color': utilitiesForegroundColor }, summary: { detached: summaryDetached } } } } }) => {
+    const utilitiesForegroundComputed = calculateForegroundColor(utilitiesBackground, utilitiesForegroundColor);
+    const { aboveSM, aboveMD, isPreview } = useCaseViewContext();
     return css `
-    --top-offset: calc(var(--appshell-offset, 0rem) + var(--summary-height));
-    --case-view-height: calc(100vh - var(--top-offset));
-    position: relative;
-    min-height: var(--case-view-height);
-    background-color: ${theme.base.palette['app-background']};
+      --top-offset: calc(var(--appshell-offset, 0rem) + var(--summary-height));
+      --case-view-height: calc(100vh - var(--top-offset));
+      position: relative;
+      min-height: var(--case-view-height);
+      background: ${appBackground};
 
-    ${aboveMD &&
+      ${aboveMD &&
         css `
-      ${StyledUtilities}:last-child {
-        margin-inline-end: calc(2 * ${theme.base.spacing});
-      }
-    `}
-  `;
+        ${StyledUtilities}:last-child {
+          margin-inline-end: calc(2 * ${spacing});
+          background: ${utilitiesBackground};
+          color: ${utilitiesForegroundComputed};
+
+          ${!utilitiesDetached &&
+            css `
+            margin-inline-end: 0;
+            padding: calc(2 * ${spacing});
+            padding-inline-end: 0;
+            border-radius: ${borderRadius} 0 0 ${borderRadius};
+
+            ${StyledCard},
+            ${StyledGenAICoachContainer} {
+              border-top-right-radius: 0;
+              border-bottom-right-radius: 0;
+            }
+
+            ${StyledGenAICoachContainer} {
+              inset-inline-end: 0;
+            }
+          `}
+        }
+      `}
+
+      ${aboveSM &&
+        summaryDetached &&
+        !isPreview &&
+        css `
+        &:not(:has(${StyledUtilities})) {
+          ${StyledSummary} {
+            padding-inline-end: calc(2 * ${spacing});
+          }
+          ${StyledCaseHeader} {
+            border-end-end-radius: ${borderRadius};
+          }
+        }
+      `}
+
+      ${!aboveMD &&
+        css `
+        ${StyledGenAICoachContainer} {
+          height: 42.5rem;
+        }
+      `}
+    `;
 });
 StyledCaseView.defaultProps = defaultThemeProp;
 export const StyledUtilitiesHeader = styled(Text) `