@pega/cosmos-react-work 9.0.0-build.27.7 → 9.0.0-build.27.9
This diff represents the content of publicly available package versions that have been released to one of the supported registries. The information contained in this diff is provided for informational purposes only and reflects changes between package versions as they appear in their respective public registries.
- package/lib/components/CaseView/CaseHeader/CaseHeader.d.ts.map +1 -1
- package/lib/components/CaseView/CaseHeader/CaseHeader.js +21 -13
- package/lib/components/CaseView/CaseHeader/CaseHeader.js.map +1 -1
- package/lib/components/CaseView/CaseView.styles.d.ts +1 -8
- package/lib/components/CaseView/CaseView.styles.d.ts.map +1 -1
- package/lib/components/CaseView/CaseView.styles.js +38 -71
- package/lib/components/CaseView/CaseView.styles.js.map +1 -1
- package/lib/components/Confirmation/Confirmation.d.ts +10 -0
- package/lib/components/Confirmation/Confirmation.d.ts.map +1 -1
- package/lib/components/Confirmation/Confirmation.js +2 -2
- package/lib/components/Confirmation/Confirmation.js.map +1 -1
- package/lib/components/Confirmation/index.d.ts +1 -1
- package/lib/components/Confirmation/index.d.ts.map +1 -1
- package/lib/components/Confirmation/index.js.map +1 -1
- package/lib/components/GenAICoach/GenAICoach.js +1 -1
- package/lib/components/GenAICoach/GenAICoach.js.map +1 -1
- package/lib/components/GenAICoach/GenAICoach.styles.d.ts.map +1 -1
- package/lib/components/GenAICoach/GenAICoach.styles.js +14 -3
- package/lib/components/GenAICoach/GenAICoach.styles.js.map +1 -1
- package/lib/components/GenAICoach/GenAICoach.types.d.ts +1 -0
- package/lib/components/GenAICoach/GenAICoach.types.d.ts.map +1 -1
- package/lib/components/GenAICoach/GenAICoach.types.js.map +1 -1
- package/lib/components/GenAICoach/GenAIMessage.d.ts.map +1 -1
- package/lib/components/GenAICoach/GenAIMessage.js +1 -1
- package/lib/components/GenAICoach/GenAIMessage.js.map +1 -1
- package/lib/components/GenAICoach/ToolDetails.js +2 -2
- package/lib/components/GenAICoach/ToolDetails.js.map +1 -1
- package/package.json +3 -3
|
@@ -1 +1 @@
|
|
|
1
|
-
{"version":3,"file":"CaseHeader.d.ts","sourceRoot":"","sources":["../../../../src/components/CaseView/CaseHeader/CaseHeader.tsx"],"names":[],"mappings":"AACA,OAAO,KAAK,EAAE,EAAE,EAAc,MAAM,OAAO,CAAC;
|
|
1
|
+
{"version":3,"file":"CaseHeader.d.ts","sourceRoot":"","sources":["../../../../src/components/CaseView/CaseHeader/CaseHeader.tsx"],"names":[],"mappings":"AACA,OAAO,KAAK,EAAE,EAAE,EAAc,MAAM,OAAO,CAAC;AA0C5C,QAAA,MAAM,UAAU,EAAE,EAkWjB,CAAC;AAEF,eAAe,UAAU,CAAC"}
|
|
@@ -1,10 +1,10 @@
|
|
|
1
|
-
import { jsx as _jsx,
|
|
1
|
+
import { jsx as _jsx, jsxs as _jsxs, Fragment as _Fragment } from "react/jsx-runtime";
|
|
2
2
|
import { useEffect, useLayoutEffect, useMemo, useRef, useState } from 'react';
|
|
3
3
|
import { parseToHsl } from 'polished';
|
|
4
4
|
import { Breadcrumbs, Flex, getEdge, Icon, registerIcon, Text, Link, Button, throttle, useDirection, useI18n, useAfterInitialEffect, useTheme, tryCatch, Actions, StyledIconShape, useToaster } from '@pega/cosmos-react-core';
|
|
5
5
|
import * as pencilIcon from '@pega/cosmos-react-core/lib/components/Icon/icons/pencil.icon';
|
|
6
6
|
import * as moreIcon from '@pega/cosmos-react-core/lib/components/Icon/icons/more.icon';
|
|
7
|
-
import { StyledCaseHeader,
|
|
7
|
+
import { StyledCaseHeader, StyledCaseHeaderText, StyledExpandCollapseSummaryButton, StyledSubheading, StyledHeaderActions, StyledCaseHeaderPromotedAction, StyledCaseViewImage, StyledCaseViewIcon } from '../CaseView.styles';
|
|
8
8
|
import { useCaseViewContext } from '../CaseView.context';
|
|
9
9
|
import Summary from './Summary';
|
|
10
10
|
registerIcon(pencilIcon, moreIcon);
|
|
@@ -17,6 +17,7 @@ const CaseHeader = () => {
|
|
|
17
17
|
const [wrapPromotedActions, setWrapPromotedActions] = useState(false);
|
|
18
18
|
const [summaryResetID, setSummaryResetID] = useState(Math.random());
|
|
19
19
|
const wrapActionsBreakpoint = useRef(null);
|
|
20
|
+
const hasPromotedActions = (promotedActions?.length ?? 0) > 0;
|
|
20
21
|
const iconForeground = theme.components['case-view'].icon.color !== 'auto'
|
|
21
22
|
? theme.components['case-view'].icon.color
|
|
22
23
|
: theme.components['case-view'].header['foreground-color'];
|
|
@@ -134,7 +135,7 @@ const CaseHeader = () => {
|
|
|
134
135
|
useEffect(() => {
|
|
135
136
|
setHasBrokenImage(undefined);
|
|
136
137
|
}, [typeof icon === 'string' ? icon : icon?.href]);
|
|
137
|
-
return (_jsxs(Flex, { "data-testid": testIds.header, as: StyledCaseHeader, container: { direction: 'column', gap: 1 }, children: [_jsxs(
|
|
138
|
+
return (_jsxs(Flex, { "data-testid": testIds.header, as: StyledCaseHeader, container: { direction: 'column', gap: 1 }, children: [_jsxs(Flex, { container: true, ref: contentsEl, children: [showExpandCollapse && onToggleSummary && !persistentUtility && (_jsx(StyledExpandCollapseSummaryButton, { ref: toggleButtonRef, onClick: onToggleSummary, label: t(summaryExpanded ? 'collapse' : 'expand'), "aria-label": t(summaryExpanded ? 'collapse_summary' : 'expand_summary'), icon: true, compact: true, children: _jsx(Icon, { name: summaryExpanded ? `arrow-micro-${start}` : 'arrow-micro-down' }) })), showIcon && (_jsx(Flex, { container: { pad: [1, 0, 0] }, item: { shrink: 0 }, children: (() => {
|
|
138
139
|
if (typeof icon === 'string') {
|
|
139
140
|
return (_jsx(StyledCaseViewIcon, { "data-testid": testIds.icon, "aria-label": t('case_type_icon', [caseType ?? t('case_type')]), name: icon, foreground: iconForeground, background: iconBackground }));
|
|
140
141
|
}
|
|
@@ -143,18 +144,25 @@ const CaseHeader = () => {
|
|
|
143
144
|
}, onError: () => {
|
|
144
145
|
setHasBrokenImage(true);
|
|
145
146
|
} }) }));
|
|
146
|
-
})() })), _jsxs(Flex, { as:
|
|
147
|
+
})() })), _jsxs(Flex, { as: StyledCaseHeaderText, container: {
|
|
148
|
+
direction: 'column',
|
|
149
|
+
pad: [0.5, 2, 0.5, showIcon ? 1 : undefined],
|
|
150
|
+
alignItems: 'start',
|
|
151
|
+
justify: 'center'
|
|
152
|
+
}, item: aboveSM
|
|
153
|
+
? { shrink: wrapPromotedActions || !hasPromotedActions ? 1 : 0 }
|
|
154
|
+
: { shrink: 1, grow: 1 }, ref: headerGroupEl, children: [_jsx(Text, { "data-testid": testIds.heading, variant: 'h1', children: caseLink ? _jsx(Link, { ...caseLink, children: heading }) : heading }), subheading && (!parentCases || subheading !== caseId) && (_jsx(StyledSubheading, { "data-testid": testIds.subheading, children: subheading })), parentCases && (_jsx(Breadcrumbs, { forwardedAs: 'p', path: [
|
|
155
|
+
...parentCases,
|
|
156
|
+
{
|
|
157
|
+
...caseLink,
|
|
158
|
+
id: caseId,
|
|
159
|
+
primary: caseId,
|
|
160
|
+
href: caseLink?.href
|
|
161
|
+
}
|
|
162
|
+
], leafOnly: true }))] }), collapsedMainHeader && !wrapPromotedActions && (_jsx(Summary, { siblingRef: actionsContainerEl }, summaryResetID)), _jsxs(Flex, { as: StyledHeaderActions, item: { shrink: 0 }, container: { alignItems: 'start', pad: [0, 0, 0, 2] }, offsetEnd: !summaryExpanded, ref: actionsContainerEl, children: [collapsedMainHeader &&
|
|
147
163
|
!wrapPromotedActions &&
|
|
148
164
|
promotedActions &&
|
|
149
|
-
promotedActions.length > 0 ? (_jsx(_Fragment, { children: promotedActions.map(promotedAction => (_jsx(StyledCaseHeaderPromotedAction, { variant: 'secondary', onClick: (e) => promotedAction.onClick?.(promotedAction.id, e), children: promotedAction.text }, promotedAction.id))) })) : null, onEdit && (_jsx(Button, { "data-testid": testIds.edit, icon: true, variant: 'simple', onClick: onEdit, label: t('edit'), "aria-label": `${t('edit')} - ${heading}`, children: _jsx(Icon, { name: 'pencil' }) })), (actionsLoading || caseActions.length > 0) && (_jsx(Actions, { contextualLabel: heading, "data-testid": testIds.actions, iconOnly: true, progress: actionsLoading, items: caseActions, menuAt: actionsLoading ? 0 : 1, filterAt: 5, scrollAt: Infinity }))] })
|
|
150
|
-
...parentCases,
|
|
151
|
-
{
|
|
152
|
-
...caseLink,
|
|
153
|
-
id: caseId,
|
|
154
|
-
primary: caseId,
|
|
155
|
-
href: caseLink?.href
|
|
156
|
-
}
|
|
157
|
-
], leafOnly: true }))] }), collapsedMainHeader && _jsx(Summary, { siblingRef: actionsContainerEl }, summaryResetID)] })] }), (!collapsedMainHeader || wrapPromotedActions || !aboveSM) &&
|
|
165
|
+
promotedActions.length > 0 ? (_jsx(_Fragment, { children: promotedActions.map(promotedAction => (_jsx(StyledCaseHeaderPromotedAction, { variant: 'secondary', onClick: (e) => promotedAction.onClick?.(promotedAction.id, e), children: promotedAction.text }, promotedAction.id))) })) : null, onEdit && (_jsx(Button, { "data-testid": testIds.edit, icon: true, variant: 'simple', onClick: onEdit, label: t('edit'), "aria-label": `${t('edit')} - ${heading}`, children: _jsx(Icon, { name: 'pencil' }) })), (actionsLoading || caseActions.length > 0) && (_jsx(Actions, { contextualLabel: heading, "data-testid": testIds.actions, iconOnly: true, progress: actionsLoading, items: caseActions, menuAt: actionsLoading ? 0 : 1, filterAt: 5, scrollAt: Infinity }))] })] }), (!collapsedMainHeader || wrapPromotedActions || !aboveSM) &&
|
|
158
166
|
promotedActions &&
|
|
159
167
|
promotedActions.length > 0 ? (_jsx(Flex, { "data-testid": testIds.promotedActions, container: { justify: 'start', wrap: 'wrap', gap: 1, pad: [0, 0, 0.5] }, children: promotedActions.map(({ id, text, onClick }) => (_jsx("div", { children: _jsx(StyledCaseHeaderPromotedAction, { variant: 'secondary', onClick: (e) => onClick?.(id, e), children: text }) }, text))) })) : null, collaboration] }));
|
|
160
168
|
};
|
|
@@ -1 +1 @@
|
|
|
1
|
-
{"version":3,"file":"CaseHeader.js","sourceRoot":"","sources":["../../../../src/components/CaseView/CaseHeader/CaseHeader.tsx"],"names":[],"mappings":"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","sourcesContent":["import { useEffect, useLayoutEffect, useMemo, useRef, useState } from 'react';\nimport type { FC, MouseEvent } from 'react';\nimport { parseToHsl } from 'polished';\n\nimport {\n Breadcrumbs,\n Flex,\n getEdge,\n Icon,\n registerIcon,\n Text,\n Link,\n Button,\n throttle,\n useDirection,\n useI18n,\n useAfterInitialEffect,\n useTheme,\n tryCatch,\n Actions,\n StyledIconShape,\n useToaster\n} from '@pega/cosmos-react-core';\nimport type { Action } from '@pega/cosmos-react-core';\nimport * as pencilIcon from '@pega/cosmos-react-core/lib/components/Icon/icons/pencil.icon';\nimport * as moreIcon from '@pega/cosmos-react-core/lib/components/Icon/icons/more.icon';\n\nimport {\n StyledCaseHeader,\n StyledCaseHeaderContents,\n StyledCaseHeaderInner,\n StyledCaseHeaderText,\n StyledExpandCollapseSummaryButton,\n StyledSubheading,\n StyledHeaderActions,\n StyledCaseHeaderPromotedAction,\n StyledCaseViewImage,\n StyledCaseViewIcon,\n StyledCaseViewIconWrapper\n} from '../CaseView.styles';\nimport { useCaseViewContext } from '../CaseView.context';\n\nimport Summary from './Summary';\n\nregisterIcon(pencilIcon, moreIcon);\n\nconst CaseHeader: FC = () => {\n const t = useI18n();\n const { ltr, start } = useDirection();\n const theme = useTheme();\n\n const {\n testIds,\n caseId,\n icon,\n heading,\n subheading,\n caseType,\n actions,\n caseLink,\n parentCases,\n onEdit,\n followed,\n onFollowedChange,\n promotedActions,\n summaryExpanded,\n onToggleSummary,\n isPreview,\n aboveSM,\n aboveMD,\n persistentUtility,\n collaboration\n } = useCaseViewContext();\n const { push } = useToaster();\n\n const [wrapPromotedActions, setWrapPromotedActions] = useState(false);\n const [summaryResetID, setSummaryResetID] = useState<number | undefined>(Math.random());\n\n const wrapActionsBreakpoint = useRef<number | null>(null);\n\n const iconForeground =\n theme.components['case-view'].icon.color !== 'auto'\n ? theme.components['case-view'].icon.color\n : theme.components['case-view'].header['foreground-color'];\n\n const iconBackground = useMemo(() => {\n if (theme.components['case-view'].icon.background !== 'auto') {\n return theme.components['case-view'].icon.background;\n }\n return tryCatch(\n () => {\n const { lightness } = parseToHsl(theme.components['case-view'].header['background-color']);\n return lightness > 0.35 ? 'rgba(0, 0, 0, 0.2)' : 'rgba(255, 255, 255, 0.2)';\n },\n () => 'transparent'\n );\n }, [theme]);\n\n const [hasBrokenImage, setHasBrokenImage] = useState<undefined | boolean>();\n const showIcon = !!icon && !hasBrokenImage;\n\n const contentsEl = useRef<HTMLDivElement>(null);\n const headerGroupEl = useRef<HTMLElement>(null);\n const actionsContainerEl = useRef<HTMLDivElement>(null);\n const toggleButtonRef = useRef<HTMLButtonElement>(null);\n\n let actionsItems: Action[];\n let actionsLoading: boolean;\n\n if (Array.isArray(actions)) {\n actionsItems = actions;\n actionsLoading = false;\n } else if (actions) {\n actionsItems = actions.items ?? [];\n actionsLoading = !!actions.progress;\n } else {\n actionsItems = [];\n actionsLoading = false;\n }\n\n const caseActions: Action[] = actionsLoading\n ? []\n : [\n ...(onFollowedChange\n ? [\n {\n id: 'follow',\n text: followed ? t('unfollow') : t('follow'),\n onClick: () => {\n onFollowedChange(!followed);\n push({\n content: followed\n ? t('case_unfollowed', [caseId])\n : t('case_followed', [caseId])\n });\n }\n }\n ]\n : []),\n ...actionsItems.map(action => ({\n ...action,\n text: action.text,\n visual: action.icon ? <Icon name={action.icon} /> : null\n }))\n ];\n\n const showExpandCollapse = !isPreview && aboveMD;\n const collapsedMainHeader =\n (!isPreview && !aboveMD && aboveSM) || (showExpandCollapse && !summaryExpanded);\n\n // FIXME: This is a hack to get the Tooltip to reset its position when the summary changes layout.\n useAfterInitialEffect(() => {\n if (toggleButtonRef.current && toggleButtonRef.current === document.activeElement) {\n toggleButtonRef.current.blur();\n setTimeout(() => {\n toggleButtonRef.current?.focus();\n }, 0);\n }\n }, [summaryExpanded]);\n\n // Actions wrapping\n useLayoutEffect(() => {\n if (\n !wrapPromotedActions &&\n contentsEl.current &&\n headerGroupEl.current &&\n actionsContainerEl.current\n ) {\n const contentStart = getEdge({\n el: contentsEl.current,\n side: 'leading',\n ltr\n });\n const headerGroupEnd = getEdge({\n el: headerGroupEl.current,\n side: 'trailing',\n ltr\n });\n const actionsContainerWidth = actionsContainerEl.current.getBoundingClientRect().width;\n\n wrapActionsBreakpoint.current =\n Math.ceil(headerGroupEnd) - Math.ceil(contentStart) + Math.ceil(actionsContainerWidth);\n }\n\n const promotedActionsWrapHandler = () => {\n if (wrapActionsBreakpoint.current && contentsEl.current) {\n setWrapPromotedActions(\n Math.ceil(contentsEl.current.offsetWidth) < wrapActionsBreakpoint.current\n );\n }\n };\n\n const resizeObserver = new ResizeObserver(throttle(promotedActionsWrapHandler, 30));\n\n promotedActionsWrapHandler();\n\n if (contentsEl.current) {\n resizeObserver.observe(contentsEl.current, { box: 'border-box' });\n }\n\n return () => {\n resizeObserver.disconnect();\n };\n }, [\n contentsEl,\n headerGroupEl,\n actionsContainerEl,\n promotedActions,\n heading,\n subheading,\n wrapPromotedActions\n ]);\n\n // Reset summary\n useEffect(() => {\n setSummaryResetID(Math.random());\n }, [heading, promotedActions]);\n\n useEffect(() => {\n setHasBrokenImage(undefined);\n }, [typeof icon === 'string' ? icon : icon?.href]);\n\n return (\n <Flex\n data-testid={testIds.header}\n as={StyledCaseHeader}\n container={{ direction: 'column', gap: 1 }}\n >\n <StyledCaseHeaderContents ref={contentsEl}>\n {showExpandCollapse && onToggleSummary && !persistentUtility && (\n <StyledExpandCollapseSummaryButton\n ref={toggleButtonRef}\n onClick={onToggleSummary}\n label={t(summaryExpanded ? 'collapse' : 'expand')}\n aria-label={t(summaryExpanded ? 'collapse_summary' : 'expand_summary')}\n icon\n compact\n >\n <Icon name={summaryExpanded ? `arrow-micro-${start}` : 'arrow-micro-down'} />\n </StyledExpandCollapseSummaryButton>\n )}\n\n {showIcon && (\n <StyledCaseViewIconWrapper>\n {(() => {\n if (typeof icon === 'string') {\n return (\n <StyledCaseViewIcon\n data-testid={testIds.icon}\n aria-label={t('case_type_icon', [caseType ?? t('case_type')])}\n name={icon}\n foreground={iconForeground}\n background={iconBackground}\n />\n );\n }\n\n return (\n <StyledIconShape background={iconBackground} data-testid={testIds.icon}>\n <StyledCaseViewImage\n src={icon.href}\n alt={t('case_image')}\n onLoad={() => {\n setHasBrokenImage(false);\n }}\n onError={() => {\n setHasBrokenImage(true);\n }}\n />\n </StyledIconShape>\n );\n })()}\n </StyledCaseViewIconWrapper>\n )}\n\n {/* inline actions - floated inline-end, before hgroup so text wraps around it */}\n <Flex\n as={StyledHeaderActions}\n item={{ shrink: 0 }}\n container={{ alignItems: 'start', pad: [0, 0, 0, 2] }}\n offsetEnd={!summaryExpanded}\n ref={actionsContainerEl}\n >\n {collapsedMainHeader &&\n !wrapPromotedActions &&\n promotedActions &&\n promotedActions.length > 0 ? (\n <>\n {promotedActions.map(promotedAction => (\n <StyledCaseHeaderPromotedAction\n variant='secondary'\n onClick={(e: MouseEvent<HTMLButtonElement>) =>\n promotedAction.onClick?.(promotedAction.id, e)\n }\n key={promotedAction.id}\n >\n {promotedAction.text}\n </StyledCaseHeaderPromotedAction>\n ))}\n </>\n ) : null}\n\n {onEdit && (\n <Button\n data-testid={testIds.edit}\n icon\n variant='simple'\n onClick={onEdit}\n label={t('edit')}\n aria-label={`${t('edit')} - ${heading}`}\n >\n <Icon name='pencil' />\n </Button>\n )}\n\n {(actionsLoading || caseActions.length > 0) && (\n <Actions\n contextualLabel={heading}\n data-testid={testIds.actions}\n iconOnly\n progress={actionsLoading}\n items={caseActions}\n menuAt={actionsLoading ? 0 : 1}\n filterAt={5}\n scrollAt={Infinity}\n />\n )}\n </Flex>\n\n {/* header group + summary share a flex row so summary fills remaining space inline */}\n <StyledCaseHeaderInner $isCollapsed={collapsedMainHeader}>\n <StyledCaseHeaderText $isCollapsed={collapsedMainHeader} ref={headerGroupEl}>\n <Text data-testid={testIds.heading} variant='h1'>\n {caseLink ? <Link {...caseLink}>{heading}</Link> : heading}\n </Text>\n\n {subheading && (!parentCases || subheading !== caseId) && (\n <StyledSubheading data-testid={testIds.subheading}>{subheading}</StyledSubheading>\n )}\n\n {parentCases && (\n <Breadcrumbs\n forwardedAs='p'\n path={[\n ...parentCases,\n {\n ...caseLink,\n id: caseId,\n primary: caseId,\n href: caseLink?.href\n }\n ]}\n leafOnly\n />\n )}\n </StyledCaseHeaderText>\n {/* summary */}\n {collapsedMainHeader && <Summary siblingRef={actionsContainerEl} key={summaryResetID} />}\n </StyledCaseHeaderInner>\n </StyledCaseHeaderContents>\n\n {/* wrapped promoted actions */}\n {(!collapsedMainHeader || wrapPromotedActions || !aboveSM) &&\n promotedActions &&\n promotedActions.length > 0 ? (\n <Flex\n data-testid={testIds.promotedActions}\n container={{ justify: 'start', wrap: 'wrap', gap: 1, pad: [0, 0, 0.5] }}\n >\n {promotedActions.map(({ id, text, onClick }) => (\n <div key={text}>\n <StyledCaseHeaderPromotedAction\n variant='secondary'\n onClick={(e: MouseEvent<HTMLButtonElement>) => onClick?.(id, e)}\n >\n {text}\n </StyledCaseHeaderPromotedAction>\n </div>\n ))}\n </Flex>\n ) : null}\n\n {collaboration}\n </Flex>\n );\n};\n\nexport default CaseHeader;\n"]}
|
|
1
|
+
{"version":3,"file":"CaseHeader.js","sourceRoot":"","sources":["../../../../src/components/CaseView/CaseHeader/CaseHeader.tsx"],"names":[],"mappings":"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","sourcesContent":["import { useEffect, useLayoutEffect, useMemo, useRef, useState } from 'react';\nimport type { FC, MouseEvent } from 'react';\nimport { parseToHsl } from 'polished';\n\nimport {\n Breadcrumbs,\n Flex,\n getEdge,\n Icon,\n registerIcon,\n Text,\n Link,\n Button,\n throttle,\n useDirection,\n useI18n,\n useAfterInitialEffect,\n useTheme,\n tryCatch,\n Actions,\n StyledIconShape,\n useToaster\n} from '@pega/cosmos-react-core';\nimport type { Action } from '@pega/cosmos-react-core';\nimport * as pencilIcon from '@pega/cosmos-react-core/lib/components/Icon/icons/pencil.icon';\nimport * as moreIcon from '@pega/cosmos-react-core/lib/components/Icon/icons/more.icon';\n\nimport {\n StyledCaseHeader,\n StyledCaseHeaderText,\n StyledExpandCollapseSummaryButton,\n StyledSubheading,\n StyledHeaderActions,\n StyledCaseHeaderPromotedAction,\n StyledCaseViewImage,\n StyledCaseViewIcon\n} from '../CaseView.styles';\nimport { useCaseViewContext } from '../CaseView.context';\n\nimport Summary from './Summary';\n\nregisterIcon(pencilIcon, moreIcon);\n\nconst CaseHeader: FC = () => {\n const t = useI18n();\n const { ltr, start } = useDirection();\n const theme = useTheme();\n\n const {\n testIds,\n caseId,\n icon,\n heading,\n subheading,\n caseType,\n actions,\n caseLink,\n parentCases,\n onEdit,\n followed,\n onFollowedChange,\n promotedActions,\n summaryExpanded,\n onToggleSummary,\n isPreview,\n aboveSM,\n aboveMD,\n persistentUtility,\n collaboration\n } = useCaseViewContext();\n const { push } = useToaster();\n\n const [wrapPromotedActions, setWrapPromotedActions] = useState(false);\n const [summaryResetID, setSummaryResetID] = useState<number | undefined>(Math.random());\n\n const wrapActionsBreakpoint = useRef<number | null>(null);\n\n const hasPromotedActions = (promotedActions?.length ?? 0) > 0;\n\n const iconForeground =\n theme.components['case-view'].icon.color !== 'auto'\n ? theme.components['case-view'].icon.color\n : theme.components['case-view'].header['foreground-color'];\n\n const iconBackground = useMemo(() => {\n if (theme.components['case-view'].icon.background !== 'auto') {\n return theme.components['case-view'].icon.background;\n }\n return tryCatch(\n () => {\n const { lightness } = parseToHsl(theme.components['case-view'].header['background-color']);\n return lightness > 0.35 ? 'rgba(0, 0, 0, 0.2)' : 'rgba(255, 255, 255, 0.2)';\n },\n () => 'transparent'\n );\n }, [theme]);\n\n const [hasBrokenImage, setHasBrokenImage] = useState<undefined | boolean>();\n const showIcon = !!icon && !hasBrokenImage;\n\n const contentsEl = useRef<HTMLDivElement>(null);\n const headerGroupEl = useRef<HTMLElement>(null);\n const actionsContainerEl = useRef<HTMLDivElement>(null);\n const toggleButtonRef = useRef<HTMLButtonElement>(null);\n\n let actionsItems: Action[];\n let actionsLoading: boolean;\n\n if (Array.isArray(actions)) {\n actionsItems = actions;\n actionsLoading = false;\n } else if (actions) {\n actionsItems = actions.items ?? [];\n actionsLoading = !!actions.progress;\n } else {\n actionsItems = [];\n actionsLoading = false;\n }\n\n const caseActions: Action[] = actionsLoading\n ? []\n : [\n ...(onFollowedChange\n ? [\n {\n id: 'follow',\n text: followed ? t('unfollow') : t('follow'),\n onClick: () => {\n onFollowedChange(!followed);\n push({\n content: followed\n ? t('case_unfollowed', [caseId])\n : t('case_followed', [caseId])\n });\n }\n }\n ]\n : []),\n ...actionsItems.map(action => ({\n ...action,\n text: action.text,\n visual: action.icon ? <Icon name={action.icon} /> : null\n }))\n ];\n\n const showExpandCollapse = !isPreview && aboveMD;\n const collapsedMainHeader =\n (!isPreview && !aboveMD && aboveSM) || (showExpandCollapse && !summaryExpanded);\n\n // FIXME: This is a hack to get the Tooltip to reset its position when the summary changes layout.\n useAfterInitialEffect(() => {\n if (toggleButtonRef.current && toggleButtonRef.current === document.activeElement) {\n toggleButtonRef.current.blur();\n setTimeout(() => {\n toggleButtonRef.current?.focus();\n }, 0);\n }\n }, [summaryExpanded]);\n\n // Actions wrapping\n useLayoutEffect(() => {\n if (\n !wrapPromotedActions &&\n contentsEl.current &&\n headerGroupEl.current &&\n actionsContainerEl.current\n ) {\n const contentStart = getEdge({\n el: contentsEl.current,\n side: 'leading',\n ltr\n });\n const headerGroupEnd = getEdge({\n el: headerGroupEl.current,\n side: 'trailing',\n ltr\n });\n const actionsContainerWidth = actionsContainerEl.current.getBoundingClientRect().width;\n\n wrapActionsBreakpoint.current =\n Math.ceil(headerGroupEnd) - Math.ceil(contentStart) + Math.ceil(actionsContainerWidth);\n }\n\n const promotedActionsWrapHandler = () => {\n if (wrapActionsBreakpoint.current && contentsEl.current) {\n setWrapPromotedActions(\n Math.ceil(contentsEl.current.offsetWidth) < wrapActionsBreakpoint.current\n );\n }\n };\n\n const resizeObserver = new ResizeObserver(throttle(promotedActionsWrapHandler, 30));\n\n promotedActionsWrapHandler();\n\n if (contentsEl.current) {\n resizeObserver.observe(contentsEl.current, { box: 'border-box' });\n }\n\n return () => {\n resizeObserver.disconnect();\n };\n }, [\n contentsEl,\n headerGroupEl,\n actionsContainerEl,\n promotedActions,\n heading,\n subheading,\n wrapPromotedActions\n ]);\n\n // Reset summary\n useEffect(() => {\n setSummaryResetID(Math.random());\n }, [heading, promotedActions]);\n\n useEffect(() => {\n setHasBrokenImage(undefined);\n }, [typeof icon === 'string' ? icon : icon?.href]);\n\n return (\n <Flex\n data-testid={testIds.header}\n as={StyledCaseHeader}\n container={{ direction: 'column', gap: 1 }}\n >\n <Flex container ref={contentsEl}>\n {showExpandCollapse && onToggleSummary && !persistentUtility && (\n <StyledExpandCollapseSummaryButton\n ref={toggleButtonRef}\n onClick={onToggleSummary}\n label={t(summaryExpanded ? 'collapse' : 'expand')}\n aria-label={t(summaryExpanded ? 'collapse_summary' : 'expand_summary')}\n icon\n compact\n >\n <Icon name={summaryExpanded ? `arrow-micro-${start}` : 'arrow-micro-down'} />\n </StyledExpandCollapseSummaryButton>\n )}\n\n {showIcon && (\n <Flex container={{ pad: [1, 0, 0] }} item={{ shrink: 0 }}>\n {(() => {\n if (typeof icon === 'string') {\n return (\n <StyledCaseViewIcon\n data-testid={testIds.icon}\n aria-label={t('case_type_icon', [caseType ?? t('case_type')])}\n name={icon}\n foreground={iconForeground}\n background={iconBackground}\n />\n );\n }\n\n return (\n <StyledIconShape background={iconBackground} data-testid={testIds.icon}>\n <StyledCaseViewImage\n src={icon.href}\n alt={t('case_image')}\n onLoad={() => {\n setHasBrokenImage(false);\n }}\n onError={() => {\n setHasBrokenImage(true);\n }}\n />\n </StyledIconShape>\n );\n })()}\n </Flex>\n )}\n\n {/* header group */}\n <Flex\n as={StyledCaseHeaderText}\n container={{\n direction: 'column',\n pad: [0.5, 2, 0.5, showIcon ? 1 : undefined],\n alignItems: 'start',\n justify: 'center'\n }}\n item={\n aboveSM\n ? { shrink: wrapPromotedActions || !hasPromotedActions ? 1 : 0 }\n : { shrink: 1, grow: 1 }\n }\n ref={headerGroupEl}\n >\n <Text data-testid={testIds.heading} variant='h1'>\n {caseLink ? <Link {...caseLink}>{heading}</Link> : heading}\n </Text>\n\n {subheading && (!parentCases || subheading !== caseId) && (\n <StyledSubheading data-testid={testIds.subheading}>{subheading}</StyledSubheading>\n )}\n\n {parentCases && (\n <Breadcrumbs\n forwardedAs='p'\n path={[\n ...parentCases,\n {\n ...caseLink,\n id: caseId,\n primary: caseId,\n href: caseLink?.href\n }\n ]}\n leafOnly\n />\n )}\n </Flex>\n {/* summary */}\n {collapsedMainHeader && !wrapPromotedActions && (\n <Summary siblingRef={actionsContainerEl} key={summaryResetID} />\n )}\n {/* inline actions */}\n <Flex\n as={StyledHeaderActions}\n item={{ shrink: 0 }}\n container={{ alignItems: 'start', pad: [0, 0, 0, 2] }}\n offsetEnd={!summaryExpanded}\n ref={actionsContainerEl}\n >\n {collapsedMainHeader &&\n !wrapPromotedActions &&\n promotedActions &&\n promotedActions.length > 0 ? (\n <>\n {promotedActions.map(promotedAction => (\n <StyledCaseHeaderPromotedAction\n variant='secondary'\n onClick={(e: MouseEvent<HTMLButtonElement>) =>\n promotedAction.onClick?.(promotedAction.id, e)\n }\n key={promotedAction.id}\n >\n {promotedAction.text}\n </StyledCaseHeaderPromotedAction>\n ))}\n </>\n ) : null}\n\n {onEdit && (\n <Button\n data-testid={testIds.edit}\n icon\n variant='simple'\n onClick={onEdit}\n label={t('edit')}\n aria-label={`${t('edit')} - ${heading}`}\n >\n <Icon name='pencil' />\n </Button>\n )}\n\n {(actionsLoading || caseActions.length > 0) && (\n <Actions\n contextualLabel={heading}\n data-testid={testIds.actions}\n iconOnly\n progress={actionsLoading}\n items={caseActions}\n menuAt={actionsLoading ? 0 : 1}\n filterAt={5}\n scrollAt={Infinity}\n />\n )}\n </Flex>\n </Flex>\n\n {/* wrapped promoted actions */}\n {(!collapsedMainHeader || wrapPromotedActions || !aboveSM) &&\n promotedActions &&\n promotedActions.length > 0 ? (\n <Flex\n data-testid={testIds.promotedActions}\n container={{ justify: 'start', wrap: 'wrap', gap: 1, pad: [0, 0, 0.5] }}\n >\n {promotedActions.map(({ id, text, onClick }) => (\n <div key={text}>\n <StyledCaseHeaderPromotedAction\n variant='secondary'\n onClick={(e: MouseEvent<HTMLButtonElement>) => onClick?.(id, e)}\n >\n {text}\n </StyledCaseHeaderPromotedAction>\n </div>\n ))}\n </Flex>\n ) : null}\n\n {collaboration}\n </Flex>\n );\n};\n\nexport default CaseHeader;\n"]}
|
|
@@ -16,12 +16,7 @@ export declare const StyledSummaryHeading: import("styled-components/dist/types"
|
|
|
16
16
|
export declare const StyledCaseViewImage: import("styled-components/dist/types").IStyledComponentBase<"web", import("styled-components").FastOmit<Omit<Omit<import("@pega/cosmos-react-core").ImageProps, "ref"> & import("react").RefAttributes<HTMLImageElement> & import("@pega/cosmos-react-core").ForwardProps, "ref"> & {
|
|
17
17
|
ref?: ((instance: HTMLImageElement | null) => void | import("react").DO_NOT_USE_OR_YOU_WILL_BE_FIRED_CALLBACK_REF_RETURN_VALUES[keyof import("react").DO_NOT_USE_OR_YOU_WILL_BE_FIRED_CALLBACK_REF_RETURN_VALUES]) | import("react").RefObject<HTMLImageElement> | null | undefined;
|
|
18
18
|
}, never>> & string & Omit<import("@pega/cosmos-react-core").ForwardRefForwardPropsComponent<import("@pega/cosmos-react-core").ImageProps>, keyof import("react").Component<any, {}, any>>;
|
|
19
|
-
export declare const StyledCaseViewIconWrapper: import("styled-components/dist/types").IStyledComponentBase<"web", import("styled-components").FastOmit<import("react").DetailedHTMLProps<import("react").HTMLAttributes<HTMLDivElement>, HTMLDivElement>, never>> & string;
|
|
20
19
|
export declare const StyledCaseHeader: import("styled-components/dist/types").IStyledComponentBase<"web", import("styled-components").FastOmit<import("react").DetailedHTMLProps<import("react").HTMLAttributes<HTMLDivElement>, HTMLDivElement>, never>> & string;
|
|
21
|
-
export declare const StyledCaseHeaderContents: import("styled-components/dist/types").IStyledComponentBase<"web", import("styled-components").FastOmit<import("react").DetailedHTMLProps<import("react").HTMLAttributes<HTMLDivElement>, HTMLDivElement>, never>> & string;
|
|
22
|
-
export declare const StyledCaseHeaderInner: import("styled-components/dist/types").IStyledComponentBase<"web", import("styled-components/dist/types").Substitute<import("react").DetailedHTMLProps<import("react").HTMLAttributes<HTMLDivElement>, HTMLDivElement>, {
|
|
23
|
-
$isCollapsed?: boolean;
|
|
24
|
-
}>> & string;
|
|
25
20
|
export declare const StyledFollowIconWrap: import("styled-components/dist/types").IStyledComponentBase<"web", import("styled-components").FastOmit<import("react").DetailedHTMLProps<import("react").LabelHTMLAttributes<HTMLLabelElement>, HTMLLabelElement>, never>> & string;
|
|
26
21
|
export declare const StyledSubheading: import("styled-components/dist/types").IStyledComponentBase<"web", import("styled-components").FastOmit<import("react").DetailedHTMLProps<import("react").HTMLAttributes<HTMLParagraphElement>, HTMLParagraphElement>, never>> & string;
|
|
27
22
|
export declare const StyledCaseHeaderPromotedAction: import("styled-components/dist/types").IStyledComponentBase<"web", import("styled-components").FastOmit<Omit<Omit<import("@pega/cosmos-react-core").ButtonProps, "ref"> & import("react").RefAttributes<HTMLAnchorElement | HTMLButtonElement> & import("@pega/cosmos-react-core").ForwardProps, "ref"> & {
|
|
@@ -30,9 +25,7 @@ export declare const StyledCaseHeaderPromotedAction: import("styled-components/d
|
|
|
30
25
|
export declare const StyledHeaderActions: import("styled-components/dist/types").IStyledComponentBase<"web", import("styled-components/dist/types").Substitute<import("react").DetailedHTMLProps<import("react").HTMLAttributes<HTMLDivElement>, HTMLDivElement>, {
|
|
31
26
|
offsetEnd: boolean;
|
|
32
27
|
}>> & string;
|
|
33
|
-
export declare const StyledCaseHeaderText: import("styled-components/dist/types").IStyledComponentBase<"web", import("styled-components
|
|
34
|
-
$isCollapsed?: boolean;
|
|
35
|
-
}>> & string;
|
|
28
|
+
export declare const StyledCaseHeaderText: import("styled-components/dist/types").IStyledComponentBase<"web", import("styled-components").FastOmit<import("react").DetailedHTMLProps<import("react").HTMLAttributes<HTMLElement>, HTMLElement>, never>> & string;
|
|
36
29
|
export declare const StyledHeaderSummaryBlock: import("styled-components/dist/types").IStyledComponentBase<"web", import("styled-components/dist/types").Substitute<import("react").DetailedHTMLProps<import("react").HTMLAttributes<HTMLDivElement>, HTMLDivElement>, {
|
|
37
30
|
hasItems: boolean;
|
|
38
31
|
}>> & string;
|
|
@@ -1 +1 @@
|
|
|
1
|
-
{"version":3,"file":"CaseView.styles.d.ts","sourceRoot":"","sources":["../../../src/components/CaseView/CaseView.styles.ts"],"names":[],"mappings":"AACA,OAAO,KAAK,EAAE,YAAY,EAAE,MAAM,mBAAmB,CAAC;AAyCtD,OAAO,KAAK,EAAE,oBAAoB,EAAE,MAAM,iEAAiE,CAAC;AAiC5G,eAAO,MAAM,wBAAwB;cACzB,OAAO;;2BAiBG,CAAC;iDASrB,CAAC;AAIH,eAAO,MAAM,0BAA0B;2BAbjB,CAAC;iDAmBrB,CAAC;AAEH,eAAO,MAAM,uBAAuB,6NAsBlC,CAAC;AAIH,eAAO,MAAM,uBAAuB,6ZAelC,CAAC;AAIH,eAAO,MAAM,oBAAoB;;yLAI/B,CAAC;AAIH,eAAO,MAAM,mBAAmB;;0LAE/B,CAAC;AAEF,eAAO,MAAM,
|
|
1
|
+
{"version":3,"file":"CaseView.styles.d.ts","sourceRoot":"","sources":["../../../src/components/CaseView/CaseView.styles.ts"],"names":[],"mappings":"AACA,OAAO,KAAK,EAAE,YAAY,EAAE,MAAM,mBAAmB,CAAC;AAyCtD,OAAO,KAAK,EAAE,oBAAoB,EAAE,MAAM,iEAAiE,CAAC;AAiC5G,eAAO,MAAM,wBAAwB;cACzB,OAAO;;2BAiBG,CAAC;iDASrB,CAAC;AAIH,eAAO,MAAM,0BAA0B;2BAbjB,CAAC;iDAmBrB,CAAC;AAEH,eAAO,MAAM,uBAAuB,6NAsBlC,CAAC;AAIH,eAAO,MAAM,uBAAuB,6ZAelC,CAAC;AAIH,eAAO,MAAM,oBAAoB;;yLAI/B,CAAC;AAIH,eAAO,MAAM,mBAAmB;;0LAE/B,CAAC;AAEF,eAAO,MAAM,gBAAgB,6NA6C3B,CAAC;AAIH,eAAO,MAAM,oBAAoB,sOAUhC,CAAC;AAIF,eAAO,MAAM,gBAAgB,yOAAa,CAAC;AAI3C,eAAO,MAAM,8BAA8B;;2LA6CzC,CAAC;AAIH,eAAO,MAAM,mBAAmB;eAA2B,OAAO;YAmBhE,CAAC;AAIH,eAAO,MAAM,oBAAoB,uNAyD/B,CAAC;AAIH,eAAO,MAAM,wBAAwB;cAA0B,OAAO;YAoBpE,CAAC;AAmCH,eAAO,MAAM,mBAAmB,iOAgD9B,CAAC;AAIH,eAAO,MAAM,wBAAwB;;;WAC5B,OAAO;eACH,OAAO;WACX,YAAY;YAiCnB,CAAC;AAIH,eAAO,MAAM,qBAAqB,6NA6BjC,CAAC;AAIF,eAAO,MAAM,0BAA0B,6NAkBrC,CAAC;AAIH,eAAO,MAAM,0BAA0B;;2LASrC,CAAC;AAIH,eAAO,MAAM,iCAAiC;;2BAgC5C,CAAC;AAIH,eAAO,MAAM,iBAAiB,6NAuD7B,CAAC;AAIF,eAAO,MAAM,WAAW,6NAavB,CAAC;AAGF,eAAO,MAAM,qBAAqB,6NAuEjC,CAAC;AAKF,eAAO,MAAM,iCAAiC,6NAM5C,CAAC;AAEH,eAAO,MAAM,cAAc,6NA4I1B,CAAC;AAIF,eAAO,MAAM,sBAAsB;;yLAAiB,CAAC;AAErD,eAAO,MAAM,mCAAmC;;2BAO9C,CAAC;AAMH,eAAO,MAAM,eAAe,6NAsC1B,CAAC;AAIH,eAAO,MAAM,aAAa,6NAiEzB,CAAC;AAIF,eAAO,MAAM,gBAAgB;oBACX,oBAAoB,CAAC,eAAe,CAAC;wBACjC,OAAO;YA+B3B,CAAC;AAIH,eAAO,MAAM,uBAAuB,6NAwBnC,CAAC;AAIF,eAAO,MAAM,uBAAuB;gCAA4C,OAAO;YAatF,CAAC;AAIF,eAAO,MAAM,yBAAyB,6NAQpC,CAAC;AAIH,eAAO,MAAM,uBAAuB,6NAIlC,CAAC;AAIH,eAAO,MAAM,WAAW,6NAGvB,CAAC;AAEF,eAAO,MAAM,cAAc,6NAgG1B,CAAC;AAIF,eAAO,MAAM,qBAAqB;;yLAMjC,CAAC;AAIF,eAAO,MAAM,iBAAiB;;;;;;;;;;;;;;;;sSAsB5B,CAAC;AAIH,eAAO,MAAM,sBAAsB,6NAAe,CAAC;AAEnD,eAAO,MAAM,kBAAkB,kaAwB7B,CAAC"}
|
|
@@ -92,12 +92,6 @@ StyledSummaryHeading.defaultProps = defaultThemeProp;
|
|
|
92
92
|
export const StyledCaseViewImage = styled(Image) `
|
|
93
93
|
max-height: 100%;
|
|
94
94
|
`;
|
|
95
|
-
export const StyledCaseViewIconWrapper = styled.div(({ theme }) => css `
|
|
96
|
-
float: inline-start;
|
|
97
|
-
padding-block-start: ${theme.base.spacing};
|
|
98
|
-
padding-inline-end: ${theme.base.spacing};
|
|
99
|
-
`);
|
|
100
|
-
StyledCaseViewIconWrapper.defaultProps = defaultThemeProp;
|
|
101
95
|
export const StyledCaseHeader = styled.div(({ theme }) => {
|
|
102
96
|
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;
|
|
103
97
|
const foregroundColor = calculateForegroundColor(background, caseHeaderForegroundColor);
|
|
@@ -134,26 +128,6 @@ export const StyledCaseHeader = styled.div(({ theme }) => {
|
|
|
134
128
|
`;
|
|
135
129
|
});
|
|
136
130
|
StyledCaseHeader.defaultProps = defaultThemeProp;
|
|
137
|
-
export const StyledCaseHeaderContents = styled.div `
|
|
138
|
-
display: flow-root;
|
|
139
|
-
`;
|
|
140
|
-
StyledCaseHeaderContents.defaultProps = defaultThemeProp;
|
|
141
|
-
export const StyledCaseHeaderInner = styled.div(({ $isCollapsed }) => css `
|
|
142
|
-
${$isCollapsed
|
|
143
|
-
? css `
|
|
144
|
-
display: flex;
|
|
145
|
-
overflow: hidden;
|
|
146
|
-
|
|
147
|
-
/* Negative margin to account for overflow clipping of focus indicator */
|
|
148
|
-
padding: 0.3rem;
|
|
149
|
-
margin: -0.3rem;
|
|
150
|
-
min-width: 0;
|
|
151
|
-
`
|
|
152
|
-
: css `
|
|
153
|
-
display: block;
|
|
154
|
-
`}
|
|
155
|
-
`);
|
|
156
|
-
StyledCaseHeaderInner.defaultProps = defaultThemeProp;
|
|
157
131
|
export const StyledFollowIconWrap = styled.label `
|
|
158
132
|
font-size: 1.25rem;
|
|
159
133
|
|
|
@@ -206,9 +180,8 @@ export const StyledCaseHeaderPromotedAction = styled(Button)(({ theme }) => {
|
|
|
206
180
|
StyledCaseHeaderPromotedAction.defaultProps = defaultThemeProp;
|
|
207
181
|
export const StyledHeaderActions = styled.div(({ offsetEnd, theme }) => {
|
|
208
182
|
return css `
|
|
209
|
-
|
|
210
|
-
padding-block
|
|
211
|
-
padding-block-end: 0;
|
|
183
|
+
margin-inline-start: auto;
|
|
184
|
+
padding-block: ${theme.base.spacing};
|
|
212
185
|
padding-inline-start: calc(2 * ${theme.base.spacing});
|
|
213
186
|
|
|
214
187
|
${offsetEnd &&
|
|
@@ -226,61 +199,53 @@ export const StyledHeaderActions = styled.div(({ offsetEnd, theme }) => {
|
|
|
226
199
|
`;
|
|
227
200
|
});
|
|
228
201
|
StyledHeaderActions.defaultProps = defaultThemeProp;
|
|
229
|
-
export const StyledCaseHeaderText = styled.hgroup(({ theme
|
|
230
|
-
const {
|
|
202
|
+
export const StyledCaseHeaderText = styled.hgroup(({ theme }) => {
|
|
203
|
+
const { components: { 'case-view': { header: { 'foreground-color': foregroundColor, background: caseHeaderBackground } } } } = theme;
|
|
231
204
|
/* If the foreground-color is auto, we calculate the text color and transparentColor based on the background color. */
|
|
232
205
|
const color = calculateForegroundColor(caseHeaderBackground, foregroundColor);
|
|
233
206
|
const fontSize = calculateFontSize(theme.base['font-size'], theme.base['font-scale']);
|
|
234
207
|
const idStyle = css `
|
|
235
|
-
|
|
236
|
-
|
|
237
|
-
|
|
238
|
-
|
|
208
|
+
color: ${color};
|
|
209
|
+
font-size: ${fontSize.s};
|
|
210
|
+
font-weight: normal;
|
|
211
|
+
`;
|
|
239
212
|
return css `
|
|
240
|
-
|
|
241
|
-
flex-shrink: 1;
|
|
242
|
-
min-width: 0;
|
|
243
|
-
word-break: break-word;
|
|
244
|
-
padding-block: calc(0.5 * ${spacing});
|
|
245
|
-
${$isCollapsed &&
|
|
246
|
-
css `
|
|
247
|
-
padding-inline-end: calc(2 * ${spacing});
|
|
248
|
-
`}
|
|
213
|
+
word-break: break-word;
|
|
249
214
|
|
|
250
|
-
|
|
251
|
-
|
|
252
|
-
|
|
215
|
+
${StyledSubheading} {
|
|
216
|
+
${idStyle}
|
|
217
|
+
}
|
|
218
|
+
|
|
219
|
+
${StyledBreadcrumbs} {
|
|
220
|
+
max-width: 100%;
|
|
253
221
|
|
|
254
|
-
|
|
222
|
+
> a,
|
|
223
|
+
> span,
|
|
224
|
+
> button,
|
|
225
|
+
> svg {
|
|
255
226
|
${idStyle}
|
|
256
227
|
}
|
|
257
228
|
|
|
258
|
-
|
|
259
|
-
|
|
260
|
-
|
|
261
|
-
|
|
262
|
-
> span,
|
|
263
|
-
> button,
|
|
264
|
-
> svg {
|
|
265
|
-
${idStyle}
|
|
266
|
-
}
|
|
267
|
-
|
|
268
|
-
> a,
|
|
269
|
-
> button {
|
|
270
|
-
&:focus {
|
|
271
|
-
box-shadow: ${theme.base.shadow.focus};
|
|
272
|
-
}
|
|
273
|
-
}
|
|
274
|
-
|
|
275
|
-
${StyledPopover}:not(${StyledTooltip}) {
|
|
276
|
-
color: ${theme.base.palette['foreground-color']};
|
|
229
|
+
> a,
|
|
230
|
+
> button {
|
|
231
|
+
&:focus {
|
|
232
|
+
box-shadow: ${theme.base.shadow.focus};
|
|
277
233
|
}
|
|
278
234
|
}
|
|
279
235
|
|
|
280
|
-
|
|
281
|
-
color: ${color};
|
|
236
|
+
${StyledPopover}:not(${StyledTooltip}) {
|
|
237
|
+
color: ${theme.base.palette['foreground-color']};
|
|
282
238
|
}
|
|
283
|
-
|
|
239
|
+
}
|
|
240
|
+
|
|
241
|
+
> ${StyledText} > ${StyledLink} {
|
|
242
|
+
color: ${color};
|
|
243
|
+
}
|
|
244
|
+
|
|
245
|
+
+ ${StyledHeaderActions} {
|
|
246
|
+
padding-inline-start: 0;
|
|
247
|
+
}
|
|
248
|
+
`;
|
|
284
249
|
});
|
|
285
250
|
StyledCaseHeaderText.defaultProps = defaultThemeProp;
|
|
286
251
|
export const StyledHeaderSummaryBlock = styled.div(({ hasItems, theme }) => {
|
|
@@ -956,7 +921,9 @@ export const StyledCoachButton = styled(AIButton)(({ theme: { base: { spacing, b
|
|
|
956
921
|
position: fixed;
|
|
957
922
|
width: 2.75rem;
|
|
958
923
|
height: 2.75rem;
|
|
959
|
-
inset-block-end: calc(
|
|
924
|
+
inset-block-end: calc(
|
|
925
|
+
var(--footer-height, var(--appshell-bottom-offset, 0rem)) + 2 * ${spacing}
|
|
926
|
+
);
|
|
960
927
|
inset-inline-end: calc(2 * ${spacing});
|
|
961
928
|
${previewActive &&
|
|
962
929
|
css `
|