@pega/cosmos-react-work 4.0.0-dev.15.3 → 4.0.0-dev.15.5
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.js +4 -4
- package/lib/components/CaseView/CaseHeader/CaseHeader.js.map +1 -1
- package/lib/components/CaseView/CaseHeader/Summary.d.ts.map +1 -1
- package/lib/components/CaseView/CaseHeader/Summary.js +1 -1
- package/lib/components/CaseView/CaseHeader/Summary.js.map +1 -1
- package/lib/components/CaseView/CaseView.styles.d.ts +10 -10
- package/lib/components/CaseView/CaseView.styles.d.ts.map +1 -1
- package/lib/components/CaseView/CaseView.styles.js +171 -121
- package/lib/components/CaseView/CaseView.styles.js.map +1 -1
- package/lib/components/IntelligentGuidance/IntelligentGuidance.d.ts.map +1 -1
- package/lib/components/IntelligentGuidance/IntelligentGuidance.js +34 -20
- package/lib/components/IntelligentGuidance/IntelligentGuidance.js.map +1 -1
- package/lib/components/IntelligentGuidance/IntelligentGuidance.styles.d.ts +1 -1
- package/lib/components/IntelligentGuidance/IntelligentGuidance.styles.d.ts.map +1 -1
- package/lib/components/IntelligentGuidance/IntelligentGuidance.styles.js +98 -44
- package/lib/components/IntelligentGuidance/IntelligentGuidance.styles.js.map +1 -1
- package/lib/components/IntelligentGuidance/IntelligentGuidance.types.d.ts +2 -0
- package/lib/components/IntelligentGuidance/IntelligentGuidance.types.d.ts.map +1 -1
- package/lib/components/IntelligentGuidance/IntelligentGuidance.types.js.map +1 -1
- package/package.json +2 -2
|
@@ -97,9 +97,9 @@ const CaseHeader = () => {
|
|
|
97
97
|
useEffect(() => {
|
|
98
98
|
setSummaryResetID(Math.random());
|
|
99
99
|
}, [heading, summaryFields, promotedActions]);
|
|
100
|
-
return (_jsxs(Flex, { "data-testid": testIds.header, as: StyledCaseHeader, container: { direction: 'column', gap:
|
|
100
|
+
return (_jsxs(Flex, { "data-testid": testIds.header, as: StyledCaseHeader, container: { direction: 'column', gap: 1.5 }, children: [_jsxs(Flex, { container: true, ref: contentsEl, children: [showExpandCollapse && onToggleSummary && !persistentUtility && (_jsx(StyledExpandCollapseButton, { ref: toggleButtonRef, onClick: onToggleSummary, label: t(summaryExpanded ? 'collapse_summary' : 'expand_summary'), icon: true, compact: true, "aria-expanded": summaryExpanded ? 'true' : 'false', "aria-controls": summaryId, children: _jsx(Icon, { name: 'arrow-micro-left' }) })), icon && (_jsx(Flex, { container: true, item: { shrink: 0 }, as: StyledCaseIconWrap, children: icon })), _jsxs(Flex, { as: StyledCaseHeaderText, container: {
|
|
101
101
|
direction: 'column',
|
|
102
|
-
pad: [0,
|
|
102
|
+
pad: [0.5, 2, 0.5, 1.5],
|
|
103
103
|
alignItems: 'start'
|
|
104
104
|
}, item: aboveSM ? { shrink: wrapPromotedActions ? 1 : 0 } : { 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 && ((!wrapPromotedActions && breadcrumbMaxWidth) || wrapPromotedActions) && (_jsx(StyledHeaderBreadcrumbBlock, { breadcrumbWidth: breadcrumbMaxWidth, children: _jsx(Breadcrumbs, { forwardedAs: 'p', path: [
|
|
105
105
|
...parentCases,
|
|
@@ -109,7 +109,7 @@ const CaseHeader = () => {
|
|
|
109
109
|
primary: caseId,
|
|
110
110
|
href: caseLink?.href
|
|
111
111
|
}
|
|
112
|
-
] }) }))] }), collapsedMainHeader && !wrapPromotedActions && (_jsx(Summary, { siblingRef: actionsContainerEl }, summaryResetID)), _jsxs(Flex, { as: StyledHeaderActions, item: { shrink: 0
|
|
112
|
+
] }) }))] }), 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 &&
|
|
113
113
|
!wrapPromotedActions &&
|
|
114
114
|
promotedActions &&
|
|
115
115
|
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'), children: _jsx(Icon, { name: 'pencil' }) })), caseActions && (_jsx(MenuButton, { "data-testid": testIds.actions, icon: 'more', iconOnly: true, variant: 'simple', text: t('actions'), menu: {
|
|
@@ -126,7 +126,7 @@ const CaseHeader = () => {
|
|
|
126
126
|
scrollAt: 20
|
|
127
127
|
} }))] })] }), (!collapsedMainHeader || wrapPromotedActions || !aboveSM) &&
|
|
128
128
|
promotedActions &&
|
|
129
|
-
promotedActions.length > 0 ? (_jsx(Flex, { "data-testid": testIds.promotedActions, container: { justify: 'start', wrap: 'wrap', gap: 1 }, children: promotedActions.map(({ id, text, onClick }) => (_jsx("div", { children: _jsx(StyledCaseHeaderPromotedAction, { variant: 'secondary', onClick: (e) => onClick?.(id, e), children: text }) }, text))) })) : null] }));
|
|
129
|
+
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] }));
|
|
130
130
|
};
|
|
131
131
|
export default CaseHeader;
|
|
132
132
|
//# sourceMappingURL=CaseHeader.js.map
|
|
@@ -1 +1 @@
|
|
|
1
|
-
{"version":3,"file":"CaseHeader.js","sourceRoot":"","sources":["../../../../src/components/CaseView/CaseHeader/CaseHeader.tsx"],"names":[],"mappings":"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","sourcesContent":["import { FC, MouseEvent, useEffect, useLayoutEffect, useRef, useState } from 'react';\n\nimport {\n Breadcrumbs,\n Flex,\n getEdge,\n Icon,\n registerIcon,\n Text,\n Link,\n MenuItemProps,\n Button,\n MenuButton,\n throttle,\n useDirection,\n useI18n,\n useAfterInitialEffect\n} 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 StyledCaseIconWrap,\n StyledCaseHeaderText,\n StyledExpandCollapseButton,\n StyledSubheading,\n StyledHeaderActions,\n StyledCaseHeaderPromotedAction,\n StyledHeaderBreadcrumbBlock\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 } = useDirection();\n\n const {\n testIds,\n caseId,\n icon,\n heading,\n subheading,\n actions,\n caseLink,\n parentCases,\n onEdit,\n followed,\n onFollowedChange,\n promotedActions,\n summaryId,\n summaryExpanded,\n summaryFields,\n onToggleSummary,\n isPreview,\n aboveSM,\n aboveMD,\n persistentUtility\n } = useCaseViewContext();\n\n const [wrapPromotedActions, setWrapPromotedActions] = useState(false);\n const [breadcrumbMaxWidth, setBreadcrumbMaxWidth] = useState<number | undefined>();\n const [summaryResetID, setSummaryResetID] = useState<number | undefined>(Math.random());\n\n const wrapActionsBreakpoint = useRef<number | null>(null);\n const contentsEl = useRef<HTMLDivElement>(null);\n const headerGroupEl = useRef<HTMLElement>(null);\n const actionsContainerEl = useRef<HTMLDivElement>(null);\n\n const caseActions: MenuItemProps[] | undefined = actions\n ? actions.map(action => {\n return {\n ...action,\n primary: action.text,\n visual: action.icon ? <Icon name={action.icon} /> : null\n };\n })\n : undefined;\n\n const toggleButtonRef = useRef<HTMLButtonElement>(null);\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 const showExpandCollapse = !isPreview && aboveMD;\n const collapsedMainHeader =\n (!isPreview && !aboveMD && aboveSM) || (showExpandCollapse && !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 // Set Breadcrumbs max-width\n useEffect(() => {\n if (headerGroupEl.current && heading) {\n if (!wrapPromotedActions) {\n const headingWidth = headerGroupEl.current.querySelector('h1')?.offsetWidth;\n setBreadcrumbMaxWidth(headingWidth);\n } else {\n setBreadcrumbMaxWidth(undefined);\n }\n }\n }, [headerGroupEl, heading, wrapPromotedActions]);\n\n // Reset summary\n useEffect(() => {\n setSummaryResetID(Math.random());\n }, [heading, summaryFields, promotedActions]);\n\n return (\n <Flex\n data-testid={testIds.header}\n as={StyledCaseHeader}\n container={{ direction: 'column', gap: 2 }}\n >\n <Flex container ref={contentsEl}>\n {showExpandCollapse && onToggleSummary && !persistentUtility && (\n <StyledExpandCollapseButton\n ref={toggleButtonRef}\n onClick={onToggleSummary}\n label={t(summaryExpanded ? 'collapse_summary' : 'expand_summary')}\n icon\n compact\n aria-expanded={summaryExpanded ? 'true' : 'false'}\n aria-controls={summaryId}\n >\n <Icon name='arrow-micro-left' />\n </StyledExpandCollapseButton>\n )}\n\n {icon && (\n <Flex container item={{ shrink: 0 }} as={StyledCaseIconWrap}>\n {icon}\n </Flex>\n )}\n\n {/* header group */}\n <Flex\n as={StyledCaseHeaderText}\n container={{\n direction: 'column',\n pad: [0, 0, 0, 1],\n alignItems: 'start'\n }}\n item={aboveSM ? { shrink: wrapPromotedActions ? 1 : 0 } : { shrink: 1, grow: 1 }}\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 && ((!wrapPromotedActions && breadcrumbMaxWidth) || wrapPromotedActions) && (\n <StyledHeaderBreadcrumbBlock breadcrumbWidth={breadcrumbMaxWidth}>\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 />\n </StyledHeaderBreadcrumbBlock>\n )}\n </Flex>\n\n {/* summary */}\n {collapsedMainHeader && !wrapPromotedActions && (\n <Summary siblingRef={actionsContainerEl} key={summaryResetID} />\n )}\n\n {/* inline actions */}\n <Flex\n as={StyledHeaderActions}\n item={{ shrink: 0, alignSelf: 'center' }}\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 >\n <Icon name='pencil' />\n </Button>\n )}\n\n {caseActions && (\n <MenuButton\n data-testid={testIds.actions}\n icon='more'\n iconOnly\n variant='simple'\n text={t('actions')}\n menu={{\n items:\n followed !== undefined\n ? [\n {\n id: 'follow',\n primary: followed ? t('unfollow') : t('follow'),\n onClick: () => onFollowedChange?.(!followed)\n },\n ...caseActions\n ]\n : caseActions,\n scrollAt: 20\n }}\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 }}\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 </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 { FC, MouseEvent, useEffect, useLayoutEffect, useRef, useState } from 'react';\n\nimport {\n Breadcrumbs,\n Flex,\n getEdge,\n Icon,\n registerIcon,\n Text,\n Link,\n MenuItemProps,\n Button,\n MenuButton,\n throttle,\n useDirection,\n useI18n,\n useAfterInitialEffect\n} 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 StyledCaseIconWrap,\n StyledCaseHeaderText,\n StyledExpandCollapseButton,\n StyledSubheading,\n StyledHeaderActions,\n StyledCaseHeaderPromotedAction,\n StyledHeaderBreadcrumbBlock\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 } = useDirection();\n\n const {\n testIds,\n caseId,\n icon,\n heading,\n subheading,\n actions,\n caseLink,\n parentCases,\n onEdit,\n followed,\n onFollowedChange,\n promotedActions,\n summaryId,\n summaryExpanded,\n summaryFields,\n onToggleSummary,\n isPreview,\n aboveSM,\n aboveMD,\n persistentUtility\n } = useCaseViewContext();\n\n const [wrapPromotedActions, setWrapPromotedActions] = useState(false);\n const [breadcrumbMaxWidth, setBreadcrumbMaxWidth] = useState<number | undefined>();\n const [summaryResetID, setSummaryResetID] = useState<number | undefined>(Math.random());\n\n const wrapActionsBreakpoint = useRef<number | null>(null);\n const contentsEl = useRef<HTMLDivElement>(null);\n const headerGroupEl = useRef<HTMLElement>(null);\n const actionsContainerEl = useRef<HTMLDivElement>(null);\n\n const caseActions: MenuItemProps[] | undefined = actions\n ? actions.map(action => {\n return {\n ...action,\n primary: action.text,\n visual: action.icon ? <Icon name={action.icon} /> : null\n };\n })\n : undefined;\n\n const toggleButtonRef = useRef<HTMLButtonElement>(null);\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 const showExpandCollapse = !isPreview && aboveMD;\n const collapsedMainHeader =\n (!isPreview && !aboveMD && aboveSM) || (showExpandCollapse && !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 // Set Breadcrumbs max-width\n useEffect(() => {\n if (headerGroupEl.current && heading) {\n if (!wrapPromotedActions) {\n const headingWidth = headerGroupEl.current.querySelector('h1')?.offsetWidth;\n setBreadcrumbMaxWidth(headingWidth);\n } else {\n setBreadcrumbMaxWidth(undefined);\n }\n }\n }, [headerGroupEl, heading, wrapPromotedActions]);\n\n // Reset summary\n useEffect(() => {\n setSummaryResetID(Math.random());\n }, [heading, summaryFields, promotedActions]);\n\n return (\n <Flex\n data-testid={testIds.header}\n as={StyledCaseHeader}\n container={{ direction: 'column', gap: 1.5 }}\n >\n <Flex container ref={contentsEl}>\n {showExpandCollapse && onToggleSummary && !persistentUtility && (\n <StyledExpandCollapseButton\n ref={toggleButtonRef}\n onClick={onToggleSummary}\n label={t(summaryExpanded ? 'collapse_summary' : 'expand_summary')}\n icon\n compact\n aria-expanded={summaryExpanded ? 'true' : 'false'}\n aria-controls={summaryId}\n >\n <Icon name='arrow-micro-left' />\n </StyledExpandCollapseButton>\n )}\n\n {icon && (\n <Flex container item={{ shrink: 0 }} as={StyledCaseIconWrap}>\n {icon}\n </Flex>\n )}\n\n {/* header group */}\n <Flex\n as={StyledCaseHeaderText}\n container={{\n direction: 'column',\n pad: [0.5, 2, 0.5, 1.5],\n alignItems: 'start'\n }}\n item={aboveSM ? { shrink: wrapPromotedActions ? 1 : 0 } : { shrink: 1, grow: 1 }}\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 && ((!wrapPromotedActions && breadcrumbMaxWidth) || wrapPromotedActions) && (\n <StyledHeaderBreadcrumbBlock breadcrumbWidth={breadcrumbMaxWidth}>\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 />\n </StyledHeaderBreadcrumbBlock>\n )}\n </Flex>\n\n {/* summary */}\n {collapsedMainHeader && !wrapPromotedActions && (\n <Summary siblingRef={actionsContainerEl} key={summaryResetID} />\n )}\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 >\n <Icon name='pencil' />\n </Button>\n )}\n\n {caseActions && (\n <MenuButton\n data-testid={testIds.actions}\n icon='more'\n iconOnly\n variant='simple'\n text={t('actions')}\n menu={{\n items:\n followed !== undefined\n ? [\n {\n id: 'follow',\n primary: followed ? t('unfollow') : t('follow'),\n onClick: () => onFollowedChange?.(!followed)\n },\n ...caseActions\n ]\n : caseActions,\n scrollAt: 20\n }}\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 </Flex>\n );\n};\n\nexport default CaseHeader;\n"]}
|
|
@@ -1 +1 @@
|
|
|
1
|
-
{"version":3,"file":"Summary.d.ts","sourceRoot":"","sources":["../../../../src/components/CaseView/CaseHeader/Summary.tsx"],"names":[],"mappings":"AAAA,OAAO,EAAE,SAAS,EAA+B,MAAM,OAAO,CAAC;AA+C/D,QAAA,MAAM,OAAO;gBAAkC,UAAU,cAAc,CAAC;
|
|
1
|
+
{"version":3,"file":"Summary.d.ts","sourceRoot":"","sources":["../../../../src/components/CaseView/CaseHeader/Summary.tsx"],"names":[],"mappings":"AAAA,OAAO,EAAE,SAAS,EAA+B,MAAM,OAAO,CAAC;AA+C/D,QAAA,MAAM,OAAO;gBAAkC,UAAU,cAAc,CAAC;iBAkQvE,CAAC;AAEF,eAAe,OAAO,CAAC"}
|
|
@@ -174,7 +174,7 @@ const Summary = ({ siblingRef }) => {
|
|
|
174
174
|
resizeObserver.disconnect();
|
|
175
175
|
};
|
|
176
176
|
}, [evaluateSummaryDisplay]);
|
|
177
|
-
return (_jsx(Flex, { as: StyledHeaderSummaryBlock, item: { grow: 1, shrink: 1 }, ref: containerRef, hasItems: displayCount > 0, children: _jsx(Flex, { as: StyledHeaderSummary, container: { gap: 4 }, ref: listRef, children: items.slice(0, displayCount).map((item, index) => {
|
|
177
|
+
return (_jsx(Flex, { as: StyledHeaderSummaryBlock, item: { grow: 1, shrink: 1 }, container: { pad: [0.5, 0], alignItems: 'center' }, ref: containerRef, hasItems: displayCount > 0, children: _jsx(Flex, { as: StyledHeaderSummary, container: { gap: 4 }, ref: listRef, children: items.slice(0, displayCount).map((item, index) => {
|
|
178
178
|
return (_jsx(Field, { item: item, primary: !!primaryItems?.length && index < primaryItems.length, truncate: !!truncatedIndices?.includes(index) }, item.name));
|
|
179
179
|
}) }) }));
|
|
180
180
|
};
|
|
@@ -1 +1 @@
|
|
|
1
|
-
{"version":3,"file":"Summary.js","sourceRoot":"","sources":["../../../../src/components/CaseView/CaseHeader/Summary.tsx"],"names":[],"mappings":"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","sourcesContent":["import { RefObject, useEffect, useRef, useState } from 'react';\n\nimport {\n Flex,\n getEdge,\n registerIcon,\n StyledStackedFieldValue,\n StyledLabel,\n StyledFieldName,\n useDirection,\n useChToPxConversionFactor\n} 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 StyledHeaderSummary,\n StyledHeaderSummaryValue,\n StyledHeaderSummaryBlock\n} from '../CaseView.styles';\nimport { useCaseViewContext } from '../CaseView.context';\nimport { SummaryField } from '../CaseView.types';\n\nregisterIcon(pencilIcon, moreIcon);\n\nconst Field = ({\n item,\n primary,\n truncate\n}: {\n item: SummaryField;\n primary: boolean;\n truncate: boolean;\n}) => {\n const { name, value, simpleValue } = item;\n const displayValue = simpleValue ?? value ?? <span>––</span>;\n\n return (\n <StyledStackedFieldValue>\n <StyledLabel as={StyledFieldName}>{name}</StyledLabel>\n <StyledHeaderSummaryValue bold={primary} truncate={truncate}>\n {displayValue}\n </StyledHeaderSummaryValue>\n </StyledStackedFieldValue>\n );\n};\n\nconst Summary = ({ siblingRef }: { siblingRef: RefObject<HTMLDivElement> }) => {\n const { ltr } = useDirection();\n const { summaryFields } = useCaseViewContext();\n const chToPxConversionFactor = useChToPxConversionFactor();\n\n const containerRef = useRef<HTMLDivElement>(null);\n const listRef = useRef<HTMLDListElement>(null);\n\n const primaryItems = summaryFields?.primary ?? [];\n const secondaryItems = summaryFields?.secondary ?? [];\n const items = [...primaryItems, ...secondaryItems];\n\n const [displayCount, setDisplayCount] = useState(items.length);\n const [truncatedIndices, setTruncatedIndices] = useState<number[] | undefined>(\n items.map((_, i) => i)\n );\n\n const priorTrailingEdgeStack = useRef<number[]>([]);\n const priorAvailableSpace = useRef<number | null>(null);\n\n const evalItemAddition = ({\n nextSiblingLeadingEdge\n }: {\n nextSiblingLeadingEdge: number;\n }): {\n indicesToTruncate: number[];\n nextDisplayCount: number;\n } => {\n const indicesToTruncate: number[] = truncatedIndices ? [...truncatedIndices] : [];\n let nextDisplayCount = displayCount;\n\n const reversedTrailingEdgeStack = [...priorTrailingEdgeStack.current].reverse();\n for (let i = 0; i < reversedTrailingEdgeStack.length; i += 1) {\n const priorEdge = reversedTrailingEdgeStack[i];\n\n const shouldRender = ltr\n ? priorEdge < nextSiblingLeadingEdge\n : priorEdge > nextSiblingLeadingEdge;\n\n if (shouldRender) {\n priorTrailingEdgeStack.current.pop();\n\n if (!indicesToTruncate.includes(nextDisplayCount)) {\n indicesToTruncate.push(nextDisplayCount);\n }\n\n nextDisplayCount += 1;\n } else {\n break;\n }\n }\n\n return { indicesToTruncate, nextDisplayCount };\n };\n\n const evalTruncationReduction = ({\n listChildren,\n availableSpace\n }: {\n listChildren: Element[];\n availableSpace: number;\n }): {\n indicesToTruncate: number[];\n } => {\n const indicesToTruncate: number[] = [];\n let hasAvailableSpace = availableSpace;\n\n listChildren.forEach((item, index) => {\n const valueEl = item.lastChild as HTMLElement;\n const truncatedSpace = Math.floor(valueEl.scrollWidth - valueEl.offsetWidth);\n const shouldTruncate = truncatedSpace === 0 ? false : hasAvailableSpace - truncatedSpace <= 0;\n\n if (shouldTruncate) {\n if (!truncatedIndices?.includes(index)) {\n hasAvailableSpace += truncatedSpace;\n }\n\n indicesToTruncate.push(index);\n } else if (truncatedIndices?.includes(index)) {\n hasAvailableSpace -= truncatedSpace;\n }\n });\n\n return { indicesToTruncate };\n };\n\n const evalTruncationIncrease = ({\n listChildren,\n availableSpace\n }: {\n listChildren: Element[];\n availableSpace: number;\n }): {\n indicesToTruncate: number[];\n availableSpace: number;\n } => {\n const indicesToTruncate: number[] = [];\n const lastIndex = listChildren.length - 1;\n let hasAvailableSpace = availableSpace;\n\n [...listChildren].reverse().forEach((item, index) => {\n if (truncatedIndices?.includes(lastIndex - index)) {\n indicesToTruncate.push(lastIndex - index);\n } else if (hasAvailableSpace < 0) {\n const truncatedElMaxWidth = 20 * chToPxConversionFactor;\n const valueEl = item.lastChild as HTMLElement;\n const spaceToTruncate = Math.max(Math.floor(valueEl.offsetWidth - truncatedElMaxWidth), 0);\n\n if (spaceToTruncate) {\n indicesToTruncate.push(lastIndex - index);\n hasAvailableSpace += spaceToTruncate;\n }\n }\n });\n\n return { indicesToTruncate, availableSpace: hasAvailableSpace };\n };\n\n const evalItemRemoval = ({\n listChildren,\n availableSpace,\n nextSiblingLeadingEdge\n }: {\n listChildren: Element[];\n availableSpace: number;\n nextSiblingLeadingEdge: number;\n }): { displayCount: number } => {\n let nextDisplayCount = displayCount;\n let hasAvailableSpace = availableSpace;\n let lastChildIndex = listChildren.length - 1;\n\n do {\n const itemTrailingEdge = getEdge({\n el: listChildren[lastChildIndex],\n side: 'trailing',\n ltr\n });\n hasAvailableSpace = Math.floor(\n ltr ? nextSiblingLeadingEdge - itemTrailingEdge : itemTrailingEdge - nextSiblingLeadingEdge\n );\n\n if (hasAvailableSpace < 0) {\n priorTrailingEdgeStack.current = [...priorTrailingEdgeStack.current, itemTrailingEdge];\n\n nextDisplayCount -= 1;\n lastChildIndex -= 1;\n }\n } while (hasAvailableSpace < 0 && lastChildIndex > -1);\n\n return { displayCount: nextDisplayCount };\n };\n\n const evaluateSummaryDisplay = () => {\n const containerEl = containerRef.current;\n if (!containerEl) return;\n\n const listChildren = Array.from(listRef.current?.children ?? []);\n const lastSummaryItem = listChildren.length ? listChildren[listChildren.length - 1] : undefined;\n const nextSibling = siblingRef?.current ?? document.body;\n const nextSiblingLeadingEdge = getEdge({\n el: nextSibling,\n side: 'leading',\n ltr\n });\n const testEdge = lastSummaryItem\n ? getEdge({ el: lastSummaryItem, side: 'trailing', ltr })\n : getEdge({ el: containerEl, side: 'leading', ltr });\n let availableSpace = Math.floor(\n ltr ? nextSiblingLeadingEdge - testEdge : testEdge - nextSiblingLeadingEdge\n );\n if (availableSpace === priorAvailableSpace.current) return;\n\n priorAvailableSpace.current = availableSpace;\n\n let indicesToTruncate: number[] | undefined;\n let nextDisplayCount = displayCount;\n\n if (availableSpace >= 0) {\n if (displayCount !== items.length) {\n const additionsConfig = evalItemAddition({ nextSiblingLeadingEdge });\n\n indicesToTruncate = additionsConfig.indicesToTruncate;\n nextDisplayCount = additionsConfig.nextDisplayCount;\n } else if (truncatedIndices?.length) {\n const truncationConfig = evalTruncationReduction({\n listChildren,\n availableSpace\n });\n\n indicesToTruncate = truncationConfig.indicesToTruncate;\n }\n } else if (listChildren) {\n const truncationConfig = evalTruncationIncrease({\n listChildren,\n availableSpace\n });\n\n indicesToTruncate = truncationConfig.indicesToTruncate;\n availableSpace = truncationConfig.availableSpace;\n\n if (availableSpace < 0) {\n const removalConfig = evalItemRemoval({\n listChildren,\n availableSpace,\n nextSiblingLeadingEdge\n });\n\n nextDisplayCount = removalConfig.displayCount;\n }\n }\n\n setDisplayCount(nextDisplayCount);\n\n if (indicesToTruncate) {\n setTruncatedIndices(indicesToTruncate);\n }\n };\n\n // Initial display evaluation\n useEffect(() => {\n evaluateSummaryDisplay();\n }, []);\n\n // Overflow resize observer\n useEffect(() => {\n const resizeObserver = new ResizeObserver(evaluateSummaryDisplay);\n\n if (containerRef.current) {\n resizeObserver.observe(containerRef.current, { box: 'border-box' });\n }\n\n return () => {\n resizeObserver.disconnect();\n };\n }, [evaluateSummaryDisplay]);\n\n return (\n <Flex\n as={StyledHeaderSummaryBlock}\n item={{ grow: 1, shrink: 1 }}\n ref={containerRef}\n hasItems={displayCount > 0}\n >\n <Flex as={StyledHeaderSummary} container={{ gap: 4 }} ref={listRef}>\n {items.slice(0, displayCount).map((item, index) => {\n return (\n <Field\n item={item}\n primary={!!primaryItems?.length && index < primaryItems.length}\n truncate={!!truncatedIndices?.includes(index)}\n key={item.name}\n />\n );\n })}\n </Flex>\n </Flex>\n );\n};\n\nexport default Summary;\n"]}
|
|
1
|
+
{"version":3,"file":"Summary.js","sourceRoot":"","sources":["../../../../src/components/CaseView/CaseHeader/Summary.tsx"],"names":[],"mappings":"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","sourcesContent":["import { RefObject, useEffect, useRef, useState } from 'react';\n\nimport {\n Flex,\n getEdge,\n registerIcon,\n StyledStackedFieldValue,\n StyledLabel,\n StyledFieldName,\n useDirection,\n useChToPxConversionFactor\n} 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 StyledHeaderSummary,\n StyledHeaderSummaryValue,\n StyledHeaderSummaryBlock\n} from '../CaseView.styles';\nimport { useCaseViewContext } from '../CaseView.context';\nimport { SummaryField } from '../CaseView.types';\n\nregisterIcon(pencilIcon, moreIcon);\n\nconst Field = ({\n item,\n primary,\n truncate\n}: {\n item: SummaryField;\n primary: boolean;\n truncate: boolean;\n}) => {\n const { name, value, simpleValue } = item;\n const displayValue = simpleValue ?? value ?? <span>––</span>;\n\n return (\n <StyledStackedFieldValue>\n <StyledLabel as={StyledFieldName}>{name}</StyledLabel>\n <StyledHeaderSummaryValue bold={primary} truncate={truncate}>\n {displayValue}\n </StyledHeaderSummaryValue>\n </StyledStackedFieldValue>\n );\n};\n\nconst Summary = ({ siblingRef }: { siblingRef: RefObject<HTMLDivElement> }) => {\n const { ltr } = useDirection();\n const { summaryFields } = useCaseViewContext();\n const chToPxConversionFactor = useChToPxConversionFactor();\n\n const containerRef = useRef<HTMLDivElement>(null);\n const listRef = useRef<HTMLDListElement>(null);\n\n const primaryItems = summaryFields?.primary ?? [];\n const secondaryItems = summaryFields?.secondary ?? [];\n const items = [...primaryItems, ...secondaryItems];\n\n const [displayCount, setDisplayCount] = useState(items.length);\n const [truncatedIndices, setTruncatedIndices] = useState<number[] | undefined>(\n items.map((_, i) => i)\n );\n\n const priorTrailingEdgeStack = useRef<number[]>([]);\n const priorAvailableSpace = useRef<number | null>(null);\n\n const evalItemAddition = ({\n nextSiblingLeadingEdge\n }: {\n nextSiblingLeadingEdge: number;\n }): {\n indicesToTruncate: number[];\n nextDisplayCount: number;\n } => {\n const indicesToTruncate: number[] = truncatedIndices ? [...truncatedIndices] : [];\n let nextDisplayCount = displayCount;\n\n const reversedTrailingEdgeStack = [...priorTrailingEdgeStack.current].reverse();\n for (let i = 0; i < reversedTrailingEdgeStack.length; i += 1) {\n const priorEdge = reversedTrailingEdgeStack[i];\n\n const shouldRender = ltr\n ? priorEdge < nextSiblingLeadingEdge\n : priorEdge > nextSiblingLeadingEdge;\n\n if (shouldRender) {\n priorTrailingEdgeStack.current.pop();\n\n if (!indicesToTruncate.includes(nextDisplayCount)) {\n indicesToTruncate.push(nextDisplayCount);\n }\n\n nextDisplayCount += 1;\n } else {\n break;\n }\n }\n\n return { indicesToTruncate, nextDisplayCount };\n };\n\n const evalTruncationReduction = ({\n listChildren,\n availableSpace\n }: {\n listChildren: Element[];\n availableSpace: number;\n }): {\n indicesToTruncate: number[];\n } => {\n const indicesToTruncate: number[] = [];\n let hasAvailableSpace = availableSpace;\n\n listChildren.forEach((item, index) => {\n const valueEl = item.lastChild as HTMLElement;\n const truncatedSpace = Math.floor(valueEl.scrollWidth - valueEl.offsetWidth);\n const shouldTruncate = truncatedSpace === 0 ? false : hasAvailableSpace - truncatedSpace <= 0;\n\n if (shouldTruncate) {\n if (!truncatedIndices?.includes(index)) {\n hasAvailableSpace += truncatedSpace;\n }\n\n indicesToTruncate.push(index);\n } else if (truncatedIndices?.includes(index)) {\n hasAvailableSpace -= truncatedSpace;\n }\n });\n\n return { indicesToTruncate };\n };\n\n const evalTruncationIncrease = ({\n listChildren,\n availableSpace\n }: {\n listChildren: Element[];\n availableSpace: number;\n }): {\n indicesToTruncate: number[];\n availableSpace: number;\n } => {\n const indicesToTruncate: number[] = [];\n const lastIndex = listChildren.length - 1;\n let hasAvailableSpace = availableSpace;\n\n [...listChildren].reverse().forEach((item, index) => {\n if (truncatedIndices?.includes(lastIndex - index)) {\n indicesToTruncate.push(lastIndex - index);\n } else if (hasAvailableSpace < 0) {\n const truncatedElMaxWidth = 20 * chToPxConversionFactor;\n const valueEl = item.lastChild as HTMLElement;\n const spaceToTruncate = Math.max(Math.floor(valueEl.offsetWidth - truncatedElMaxWidth), 0);\n\n if (spaceToTruncate) {\n indicesToTruncate.push(lastIndex - index);\n hasAvailableSpace += spaceToTruncate;\n }\n }\n });\n\n return { indicesToTruncate, availableSpace: hasAvailableSpace };\n };\n\n const evalItemRemoval = ({\n listChildren,\n availableSpace,\n nextSiblingLeadingEdge\n }: {\n listChildren: Element[];\n availableSpace: number;\n nextSiblingLeadingEdge: number;\n }): { displayCount: number } => {\n let nextDisplayCount = displayCount;\n let hasAvailableSpace = availableSpace;\n let lastChildIndex = listChildren.length - 1;\n\n do {\n const itemTrailingEdge = getEdge({\n el: listChildren[lastChildIndex],\n side: 'trailing',\n ltr\n });\n hasAvailableSpace = Math.floor(\n ltr ? nextSiblingLeadingEdge - itemTrailingEdge : itemTrailingEdge - nextSiblingLeadingEdge\n );\n\n if (hasAvailableSpace < 0) {\n priorTrailingEdgeStack.current = [...priorTrailingEdgeStack.current, itemTrailingEdge];\n\n nextDisplayCount -= 1;\n lastChildIndex -= 1;\n }\n } while (hasAvailableSpace < 0 && lastChildIndex > -1);\n\n return { displayCount: nextDisplayCount };\n };\n\n const evaluateSummaryDisplay = () => {\n const containerEl = containerRef.current;\n if (!containerEl) return;\n\n const listChildren = Array.from(listRef.current?.children ?? []);\n const lastSummaryItem = listChildren.length ? listChildren[listChildren.length - 1] : undefined;\n const nextSibling = siblingRef?.current ?? document.body;\n const nextSiblingLeadingEdge = getEdge({\n el: nextSibling,\n side: 'leading',\n ltr\n });\n const testEdge = lastSummaryItem\n ? getEdge({ el: lastSummaryItem, side: 'trailing', ltr })\n : getEdge({ el: containerEl, side: 'leading', ltr });\n let availableSpace = Math.floor(\n ltr ? nextSiblingLeadingEdge - testEdge : testEdge - nextSiblingLeadingEdge\n );\n if (availableSpace === priorAvailableSpace.current) return;\n\n priorAvailableSpace.current = availableSpace;\n\n let indicesToTruncate: number[] | undefined;\n let nextDisplayCount = displayCount;\n\n if (availableSpace >= 0) {\n if (displayCount !== items.length) {\n const additionsConfig = evalItemAddition({ nextSiblingLeadingEdge });\n\n indicesToTruncate = additionsConfig.indicesToTruncate;\n nextDisplayCount = additionsConfig.nextDisplayCount;\n } else if (truncatedIndices?.length) {\n const truncationConfig = evalTruncationReduction({\n listChildren,\n availableSpace\n });\n\n indicesToTruncate = truncationConfig.indicesToTruncate;\n }\n } else if (listChildren) {\n const truncationConfig = evalTruncationIncrease({\n listChildren,\n availableSpace\n });\n\n indicesToTruncate = truncationConfig.indicesToTruncate;\n availableSpace = truncationConfig.availableSpace;\n\n if (availableSpace < 0) {\n const removalConfig = evalItemRemoval({\n listChildren,\n availableSpace,\n nextSiblingLeadingEdge\n });\n\n nextDisplayCount = removalConfig.displayCount;\n }\n }\n\n setDisplayCount(nextDisplayCount);\n\n if (indicesToTruncate) {\n setTruncatedIndices(indicesToTruncate);\n }\n };\n\n // Initial display evaluation\n useEffect(() => {\n evaluateSummaryDisplay();\n }, []);\n\n // Overflow resize observer\n useEffect(() => {\n const resizeObserver = new ResizeObserver(evaluateSummaryDisplay);\n\n if (containerRef.current) {\n resizeObserver.observe(containerRef.current, { box: 'border-box' });\n }\n\n return () => {\n resizeObserver.disconnect();\n };\n }, [evaluateSummaryDisplay]);\n\n return (\n <Flex\n as={StyledHeaderSummaryBlock}\n item={{ grow: 1, shrink: 1 }}\n container={{ pad: [0.5, 0], alignItems: 'center' }}\n ref={containerRef}\n hasItems={displayCount > 0}\n >\n <Flex as={StyledHeaderSummary} container={{ gap: 4 }} ref={listRef}>\n {items.slice(0, displayCount).map((item, index) => {\n return (\n <Field\n item={item}\n primary={!!primaryItems?.length && index < primaryItems.length}\n truncate={!!truncatedIndices?.includes(index)}\n key={item.name}\n />\n );\n })}\n </Flex>\n </Flex>\n );\n};\n\nexport default Summary;\n"]}
|
|
@@ -9,13 +9,23 @@ export declare const StyledCaseHeader: import("styled-components").StyledCompone
|
|
|
9
9
|
export declare const StyledCaseIconWrap: import("styled-components").StyledComponent<"div", DefaultTheme, {}, never>;
|
|
10
10
|
export declare const StyledFollowIconWrap: import("styled-components").StyledComponent<"label", DefaultTheme, {}, never>;
|
|
11
11
|
export declare const StyledSubheading: import("styled-components").StyledComponent<"p", DefaultTheme, {}, never>;
|
|
12
|
+
export declare const StyledHeaderActions: import("styled-components").StyledComponent<"div", DefaultTheme, {
|
|
13
|
+
offsetEnd: boolean;
|
|
14
|
+
}, never>;
|
|
12
15
|
export declare const StyledCaseHeaderText: import("styled-components").StyledComponent<"hgroup", DefaultTheme, {}, never>;
|
|
13
16
|
export declare const StyledHeaderBreadcrumbBlock: import("styled-components").StyledComponent<"div", DefaultTheme, {
|
|
14
17
|
breadcrumbWidth?: number | undefined;
|
|
15
18
|
}, never>;
|
|
19
|
+
export declare const StyledCaseHeaderPromotedAction: import("styled-components").StyledComponent<import("react").FunctionComponent<import("@pega/cosmos-react-core").ButtonProps & import("@pega/cosmos-react-core").ForwardProps>, DefaultTheme, {}, never>;
|
|
16
20
|
export declare const StyledHeaderSummaryBlock: import("styled-components").StyledComponent<"div", DefaultTheme, {
|
|
17
21
|
hasItems: boolean;
|
|
18
22
|
}, never>;
|
|
23
|
+
export declare const StyledHeaderSummary: import("styled-components").StyledComponent<"dl", DefaultTheme, {}, never>;
|
|
24
|
+
export declare const StyledHeaderSummaryValue: import("styled-components").StyledComponent<"dd", DefaultTheme, {
|
|
25
|
+
bold?: boolean | undefined;
|
|
26
|
+
truncate?: boolean | undefined;
|
|
27
|
+
theme: DefaultTheme;
|
|
28
|
+
}, never>;
|
|
19
29
|
export declare const StyledCaseSummaryInfo: import("styled-components").StyledComponent<"div", DefaultTheme, {}, never>;
|
|
20
30
|
export declare const StyledCaseSummaryContainer: import("styled-components").StyledComponent<"div", DefaultTheme, {}, never>;
|
|
21
31
|
export declare const StyledExpandCollapseButton: import("styled-components").StyledComponent<import("react").FunctionComponent<import("@pega/cosmos-react-core").ButtonProps & import("@pega/cosmos-react-core").ForwardProps>, DefaultTheme, {}, never>;
|
|
@@ -29,15 +39,5 @@ export declare const StyledCaseDrawerContent: import("styled-components").Styled
|
|
|
29
39
|
export declare const StyledPersistentUtility: import("styled-components").StyledComponent<"div", DefaultTheme, {}, never>;
|
|
30
40
|
export declare const ScrollStick: import("styled-components").StyledComponent<"div", DefaultTheme, {}, never>;
|
|
31
41
|
export declare const StyledCaseView: import("styled-components").StyledComponent<"div", DefaultTheme, {}, never>;
|
|
32
|
-
export declare const StyledHeaderSummary: import("styled-components").StyledComponent<"dl", DefaultTheme, {}, never>;
|
|
33
|
-
export declare const StyledHeaderSummaryValue: import("styled-components").StyledComponent<"dd", DefaultTheme, {
|
|
34
|
-
bold?: boolean | undefined;
|
|
35
|
-
truncate?: boolean | undefined;
|
|
36
|
-
theme: DefaultTheme;
|
|
37
|
-
}, never>;
|
|
38
|
-
export declare const StyledHeaderActions: import("styled-components").StyledComponent<"div", DefaultTheme, {
|
|
39
|
-
offsetEnd: boolean;
|
|
40
|
-
}, never>;
|
|
41
|
-
export declare const StyledCaseHeaderPromotedAction: import("styled-components").StyledComponent<import("react").FunctionComponent<import("@pega/cosmos-react-core").ButtonProps & import("@pega/cosmos-react-core").ForwardProps>, DefaultTheme, {}, never>;
|
|
42
42
|
export declare const StyledUtilitiesHeader: import("styled-components").StyledComponent<import("react").FunctionComponent<import("@pega/cosmos-react-core").TextProps & import("@pega/cosmos-react-core").ForwardProps>, DefaultTheme, {}, never>;
|
|
43
43
|
//# sourceMappingURL=CaseView.styles.d.ts.map
|
|
@@ -1 +1 @@
|
|
|
1
|
-
{"version":3,"file":"CaseView.styles.d.ts","sourceRoot":"","sources":["../../../src/components/CaseView/CaseView.styles.ts"],"names":[],"mappings":"AAAA,OAAe,EAAO,YAAY,EAAE,MAAM,mBAAmB,CAAC;AAwC9D,eAAO,MAAM,uBAAuB,6EAAe,CAAC;AAIpD,eAAO,MAAM,wBAAwB;;SAmBpC,CAAC;AAIF,eAAO,MAAM,0BAA0B,iNAMrC,CAAC;AAEH,eAAO,MAAM,uBAAuB,8MAkBlC,CAAC;AAIH,eAAO,MAAM,gBAAgB,gFAmB3B,CAAC;AAIH,eAAO,MAAM,kBAAkB,
|
|
1
|
+
{"version":3,"file":"CaseView.styles.d.ts","sourceRoot":"","sources":["../../../src/components/CaseView/CaseView.styles.ts"],"names":[],"mappings":"AAAA,OAAe,EAAO,YAAY,EAAE,MAAM,mBAAmB,CAAC;AAwC9D,eAAO,MAAM,uBAAuB,6EAAe,CAAC;AAIpD,eAAO,MAAM,wBAAwB;;SAmBpC,CAAC;AAIF,eAAO,MAAM,0BAA0B,iNAMrC,CAAC;AAEH,eAAO,MAAM,uBAAuB,8MAkBlC,CAAC;AAIH,eAAO,MAAM,gBAAgB,gFAmB3B,CAAC;AAIH,eAAO,MAAM,kBAAkB,6EAoB7B,CAAC;AAIH,eAAO,MAAM,oBAAoB,+EAShC,CAAC;AAIF,eAAO,MAAM,gBAAgB,2EAAa,CAAC;AAI3C,eAAO,MAAM,mBAAmB;eAA2B,OAAO;SAWhE,CAAC;AAIH,eAAO,MAAM,oBAAoB,gFA8C/B,CAAC;AAIH,eAAO,MAAM,2BAA2B;;SAOvC,CAAC;AAEF,eAAO,MAAM,8BAA8B,yMA8BzC,CAAC;AAIH,eAAO,MAAM,wBAAwB;cAA0B,OAAO;SAqBpE,CAAC;AAiCH,eAAO,MAAM,mBAAmB,4EA0C9B,CAAC;AAIH,eAAO,MAAM,wBAAwB;;;WACsC,YAAY;SAmCtF,CAAC;AAIF,eAAO,MAAM,qBAAqB,6EAYhC,CAAC;AAIH,eAAO,MAAM,0BAA0B,6EAIrC,CAAC;AAIH,eAAO,MAAM,0BAA0B,yMA6BrC,CAAC;AAIH,eAAO,MAAM,iBAAiB,6EAgD5B,CAAC;AAEH,eAAO,MAAM,cAAc,6EA6BzB,CAAC;AAIH,eAAO,MAAM,gBAAgB,gFAK3B,CAAC;AAIH,eAAO,MAAM,eAAe,6EAa1B,CAAC;AAIH,eAAO,MAAM,aAAa,6EAyBxB,CAAC;AAIH,eAAO,MAAM,gBAAgB,6EAU3B,CAAC;AAIH,eAAO,MAAM,uBAAuB,6EAOlC,CAAC;AAIH,eAAO,MAAM,uBAAuB,6EAUlC,CAAC;AAIH,eAAO,MAAM,WAAW,6EAGvB,CAAC;AAEF,eAAO,MAAM,cAAc,6EAiBzB,CAAC;AAIH,eAAO,MAAM,qBAAqB,uMAMjC,CAAC"}
|
|
@@ -1,9 +1,8 @@
|
|
|
1
1
|
import styled, { css } from 'styled-components';
|
|
2
2
|
import { getContrast, hideVisually, meetsContrastGuidelines, parseToHsl, readableColor, rgba, transparentize } from 'polished';
|
|
3
|
-
import { Button, calculateFontSize, CardContent, defaultThemeProp, StyledBreadcrumbs, StyledFieldValue, StyledStackedFieldValue, StyledIcon, StyledLabel, StyledPopover, StyledText, StyledTooltip, tryCatch, FieldValueList, StyledLink, readableHue, Text } from '@pega/cosmos-react-core';
|
|
3
|
+
import { Button, calculateFontSize, CardContent, defaultThemeProp, StyledBreadcrumbs, StyledButtonLink, StyledFieldValue, StyledStackedFieldValue, StyledIcon, StyledLabel, StyledPopover, StyledText, StyledTooltip, tryCatch, FieldValueList, StyledLink, readableHue, Text } from '@pega/cosmos-react-core';
|
|
4
4
|
import { StyledMenu } from '@pega/cosmos-react-core/lib/components/Menu/Menu.styles';
|
|
5
5
|
import { colCountChWidth } from '@pega/cosmos-react-work/lib/components/Details/Details.styles';
|
|
6
|
-
import { StyledButtonLink } from '@pega/cosmos-react-core/lib/components/Button/Button';
|
|
7
6
|
import { useCaseViewContext } from './CaseView.context';
|
|
8
7
|
const labelChWidth = 16;
|
|
9
8
|
const inlineEndButtonOffset = '0.375rem';
|
|
@@ -80,9 +79,11 @@ export const StyledCaseIconWrap = styled.div(({ theme }) => {
|
|
|
80
79
|
});
|
|
81
80
|
return css `
|
|
82
81
|
background: ${backgroundColor};
|
|
82
|
+
width: calc(4 * ${spacing});
|
|
83
|
+
height: calc(4 * ${spacing});
|
|
83
84
|
border-radius: calc(${borderRadius} / 2);
|
|
84
|
-
|
|
85
|
-
|
|
85
|
+
margin-block-start: ${spacing};
|
|
86
|
+
|
|
86
87
|
${StyledIcon} {
|
|
87
88
|
font-size: calc(2 * ${spacing});
|
|
88
89
|
margin: auto;
|
|
@@ -103,6 +104,19 @@ export const StyledFollowIconWrap = styled.label `
|
|
|
103
104
|
StyledFollowIconWrap.defaultProps = defaultThemeProp;
|
|
104
105
|
export const StyledSubheading = styled.p ``;
|
|
105
106
|
StyledSubheading.defaultProps = defaultThemeProp;
|
|
107
|
+
export const StyledHeaderActions = styled.div(({ offsetEnd, theme }) => {
|
|
108
|
+
return css `
|
|
109
|
+
margin-inline-start: auto;
|
|
110
|
+
padding-block: ${theme.base.spacing};
|
|
111
|
+
padding-inline-start: calc(2 * ${theme.base.spacing});
|
|
112
|
+
|
|
113
|
+
${offsetEnd &&
|
|
114
|
+
css `
|
|
115
|
+
padding-inline-end: ${inlineEndButtonOffset};
|
|
116
|
+
`};
|
|
117
|
+
`;
|
|
118
|
+
});
|
|
119
|
+
StyledHeaderActions.defaultProps = defaultThemeProp;
|
|
106
120
|
export const StyledCaseHeaderText = styled.hgroup(({ theme }) => {
|
|
107
121
|
const color = readableColor(theme.base.palette['brand-primary']);
|
|
108
122
|
const transparentColor = tryCatch(() => transparentize(0.1, color));
|
|
@@ -142,6 +156,10 @@ export const StyledCaseHeaderText = styled.hgroup(({ theme }) => {
|
|
|
142
156
|
> ${StyledText} > ${StyledLink} {
|
|
143
157
|
color: ${color};
|
|
144
158
|
}
|
|
159
|
+
|
|
160
|
+
+ ${StyledHeaderActions} {
|
|
161
|
+
padding-inline-start: 0;
|
|
162
|
+
}
|
|
145
163
|
`;
|
|
146
164
|
});
|
|
147
165
|
StyledCaseHeaderText.defaultProps = defaultThemeProp;
|
|
@@ -151,17 +169,39 @@ export const StyledHeaderBreadcrumbBlock = styled.div(({ breadcrumbWidth }) => {
|
|
|
151
169
|
max-width: 100%;
|
|
152
170
|
`;
|
|
153
171
|
});
|
|
172
|
+
export const StyledCaseHeaderPromotedAction = styled(Button)(({ theme }) => {
|
|
173
|
+
const { base: { palette: { 'brand-primary': primary, interactive } } } = theme;
|
|
174
|
+
const interactiveUsable = getContrast(primary, interactive) >= 4.5;
|
|
175
|
+
const color = interactiveUsable ? interactive : readableColor(primary);
|
|
176
|
+
let hoverBackground = rgba(color, 0.15);
|
|
177
|
+
if (interactiveUsable) {
|
|
178
|
+
hoverBackground = readableHue(hoverBackground, color);
|
|
179
|
+
}
|
|
180
|
+
return css `
|
|
181
|
+
--button-background-color: ${primary};
|
|
182
|
+
color: ${color};
|
|
183
|
+
background-color: ${primary};
|
|
184
|
+
border-color: ${color};
|
|
185
|
+
|
|
186
|
+
@media (hover: hover) {
|
|
187
|
+
&:hover {
|
|
188
|
+
--button-background-color: ${hoverBackground};
|
|
189
|
+
color: ${color};
|
|
190
|
+
background-color: ${hoverBackground};
|
|
191
|
+
border-color: ${color};
|
|
192
|
+
}
|
|
193
|
+
}
|
|
194
|
+
`;
|
|
195
|
+
});
|
|
196
|
+
StyledCaseHeaderPromotedAction.defaultProps = defaultThemeProp;
|
|
154
197
|
export const StyledHeaderSummaryBlock = styled.div(({ hasItems, theme }) => {
|
|
155
198
|
const { base: { spacing, palette: { 'brand-primary': primary } } } = theme;
|
|
156
199
|
const color = readableColor(primary);
|
|
157
200
|
const transparentColor = tryCatch(() => transparentize(0.5, color));
|
|
158
201
|
return css `
|
|
159
|
-
border-inline-start: 0.0625rem solid transparent;
|
|
160
|
-
|
|
161
202
|
${hasItems &&
|
|
162
203
|
css `
|
|
163
|
-
border-
|
|
164
|
-
margin-inline-start: calc(2 * ${spacing});
|
|
204
|
+
border-inline-start: 0.0625rem solid ${transparentColor};
|
|
165
205
|
`}
|
|
166
206
|
|
|
167
207
|
${StyledStackedFieldValue}:first-child {
|
|
@@ -170,6 +210,93 @@ export const StyledHeaderSummaryBlock = styled.div(({ hasItems, theme }) => {
|
|
|
170
210
|
`;
|
|
171
211
|
});
|
|
172
212
|
StyledHeaderSummaryBlock.defaultProps = defaultThemeProp;
|
|
213
|
+
const popoverColorReset = (theme) => {
|
|
214
|
+
const { base: { palette: { interactive, light, 'foreground-color': baseForeground } } } = theme;
|
|
215
|
+
return css `
|
|
216
|
+
${StyledPopover}:not(${StyledTooltip}) {
|
|
217
|
+
color: ${baseForeground};
|
|
218
|
+
|
|
219
|
+
${StyledButtonLink},
|
|
220
|
+
${StyledLink} {
|
|
221
|
+
color: ${interactive};
|
|
222
|
+
text-decoration: none;
|
|
223
|
+
|
|
224
|
+
&:hover,
|
|
225
|
+
&:active {
|
|
226
|
+
text-decoration: underline;
|
|
227
|
+
}
|
|
228
|
+
|
|
229
|
+
&:focus {
|
|
230
|
+
box-shadow: inset 0 0 0 0.0625rem ${light}, 0 0 0.125rem 0.0625rem ${interactive};
|
|
231
|
+
}
|
|
232
|
+
}
|
|
233
|
+
}
|
|
234
|
+
`;
|
|
235
|
+
};
|
|
236
|
+
export const StyledHeaderSummary = styled.dl(({ theme }) => {
|
|
237
|
+
const { base: { palette: { 'brand-primary': primary, interactive } } } = theme;
|
|
238
|
+
const interactiveUsable = meetsContrastGuidelines(primary, interactive).AA;
|
|
239
|
+
const color = readableColor(primary);
|
|
240
|
+
const transparentColor = tryCatch(() => transparentize(0.1, color));
|
|
241
|
+
return css `
|
|
242
|
+
max-width: 100%;
|
|
243
|
+
min-width: 0;
|
|
244
|
+
|
|
245
|
+
> ${StyledStackedFieldValue} {
|
|
246
|
+
> ${StyledLabel} {
|
|
247
|
+
color: ${transparentColor};
|
|
248
|
+
white-space: nowrap;
|
|
249
|
+
}
|
|
250
|
+
|
|
251
|
+
> ${StyledFieldValue} {
|
|
252
|
+
color: ${color};
|
|
253
|
+
white-space: nowrap;
|
|
254
|
+
}
|
|
255
|
+
|
|
256
|
+
${StyledButtonLink},
|
|
257
|
+
${StyledLink} {
|
|
258
|
+
&:focus-visible {
|
|
259
|
+
box-shadow: inset 0 0 0 0.0625rem ${color};
|
|
260
|
+
}
|
|
261
|
+
|
|
262
|
+
${!interactiveUsable &&
|
|
263
|
+
css `
|
|
264
|
+
color: ${color};
|
|
265
|
+
text-decoration: underline;
|
|
266
|
+
`}
|
|
267
|
+
}
|
|
268
|
+
|
|
269
|
+
${popoverColorReset(theme)}
|
|
270
|
+
}
|
|
271
|
+
`;
|
|
272
|
+
});
|
|
273
|
+
StyledHeaderSummary.defaultProps = defaultThemeProp;
|
|
274
|
+
export const StyledHeaderSummaryValue = styled(StyledFieldValue)(({ bold, truncate, theme }) => {
|
|
275
|
+
const { base: { 'content-width': { xs } }, components: { text: { h1: { 'font-weight': h1Weight } } } } = theme;
|
|
276
|
+
return css `
|
|
277
|
+
overflow: hidden;
|
|
278
|
+
text-overflow: ellipsis;
|
|
279
|
+
|
|
280
|
+
${truncate &&
|
|
281
|
+
css `
|
|
282
|
+
max-width: ${xs};
|
|
283
|
+
`}
|
|
284
|
+
|
|
285
|
+
${bold &&
|
|
286
|
+
css `
|
|
287
|
+
font-weight: ${h1Weight};
|
|
288
|
+
`}
|
|
289
|
+
|
|
290
|
+
/*
|
|
291
|
+
* :not([hidden]) necessary to prevent hidden span with preview a11y instructions from
|
|
292
|
+
* factoring into scrollWidth of element when determining truncation.
|
|
293
|
+
*/
|
|
294
|
+
> :not([hidden]) {
|
|
295
|
+
display: inline;
|
|
296
|
+
}
|
|
297
|
+
`;
|
|
298
|
+
});
|
|
299
|
+
StyledHeaderSummaryValue.defaultProps = defaultThemeProp;
|
|
173
300
|
export const StyledCaseSummaryInfo = styled.div(() => {
|
|
174
301
|
const { intelligentGuidance } = useCaseViewContext();
|
|
175
302
|
return css `
|
|
@@ -219,20 +346,49 @@ export const StyledExpandCollapseButton = styled(Button)(({ theme }) => {
|
|
|
219
346
|
`;
|
|
220
347
|
});
|
|
221
348
|
StyledExpandCollapseButton.defaultProps = defaultThemeProp;
|
|
222
|
-
export const StyledCaseSummary = styled.div(() => {
|
|
349
|
+
export const StyledCaseSummary = styled.div(({ theme }) => {
|
|
223
350
|
const { summaryExpanded, aboveMD } = useCaseViewContext();
|
|
351
|
+
const { base: { spacing } } = theme;
|
|
224
352
|
return css `
|
|
225
353
|
position: relative;
|
|
226
354
|
height: 100%;
|
|
227
355
|
|
|
228
356
|
${aboveMD &&
|
|
229
357
|
css `
|
|
230
|
-
|
|
231
|
-
|
|
232
|
-
|
|
233
|
-
|
|
234
|
-
|
|
235
|
-
|
|
358
|
+
${summaryExpanded
|
|
359
|
+
? css `
|
|
360
|
+
width: 25rem;
|
|
361
|
+
|
|
362
|
+
&:focus-within,
|
|
363
|
+
&:hover {
|
|
364
|
+
&::after {
|
|
365
|
+
content: '';
|
|
366
|
+
position: absolute;
|
|
367
|
+
top: 0;
|
|
368
|
+
bottom: 0;
|
|
369
|
+
inset-inline-start: 100%;
|
|
370
|
+
width: 0.75rem;
|
|
371
|
+
}
|
|
372
|
+
|
|
373
|
+
${StyledExpandCollapseButton} {
|
|
374
|
+
opacity: 1;
|
|
375
|
+
}
|
|
376
|
+
}
|
|
377
|
+
`
|
|
378
|
+
: css `
|
|
379
|
+
width: 100%;
|
|
380
|
+
|
|
381
|
+
${StyledExpandCollapseButton} {
|
|
382
|
+
opacity: 1;
|
|
383
|
+
transform: translateY(50%);
|
|
384
|
+
margin-inline-start: calc(2 * ${spacing});
|
|
385
|
+
border-radius: 50%;
|
|
386
|
+
|
|
387
|
+
svg {
|
|
388
|
+
transform: rotate(-90deg);
|
|
389
|
+
}
|
|
390
|
+
}
|
|
391
|
+
`}
|
|
236
392
|
`}
|
|
237
393
|
`;
|
|
238
394
|
});
|
|
@@ -367,112 +523,6 @@ export const StyledCaseView = styled.div(({ theme }) => {
|
|
|
367
523
|
`;
|
|
368
524
|
});
|
|
369
525
|
StyledCaseView.defaultProps = defaultThemeProp;
|
|
370
|
-
export const StyledHeaderSummary = styled.dl(({ theme }) => {
|
|
371
|
-
const { base: { palette: { 'brand-primary': primary, interactive } } } = theme;
|
|
372
|
-
const interactiveUsable = meetsContrastGuidelines(primary, interactive).AA;
|
|
373
|
-
const color = readableColor(primary);
|
|
374
|
-
const transparentColor = tryCatch(() => transparentize(0.1, color));
|
|
375
|
-
return css `
|
|
376
|
-
max-width: 100%;
|
|
377
|
-
min-width: 0;
|
|
378
|
-
|
|
379
|
-
${StyledLabel} {
|
|
380
|
-
color: ${transparentColor};
|
|
381
|
-
}
|
|
382
|
-
|
|
383
|
-
${StyledFieldValue} {
|
|
384
|
-
color: ${color};
|
|
385
|
-
}
|
|
386
|
-
|
|
387
|
-
/* stylelint-disable no-duplicate-selectors */
|
|
388
|
-
${StyledLabel},
|
|
389
|
-
${StyledFieldValue} {
|
|
390
|
-
white-space: nowrap;
|
|
391
|
-
}
|
|
392
|
-
/* stylelint-enable no-duplicate-selectors */
|
|
393
|
-
|
|
394
|
-
${StyledButtonLink},
|
|
395
|
-
${StyledLink} {
|
|
396
|
-
&:focus-visible {
|
|
397
|
-
box-shadow: inset 0 0 0 0.0625rem ${color};
|
|
398
|
-
}
|
|
399
|
-
|
|
400
|
-
${!interactiveUsable &&
|
|
401
|
-
css `
|
|
402
|
-
color: ${color};
|
|
403
|
-
text-decoration: underline;
|
|
404
|
-
`}
|
|
405
|
-
}
|
|
406
|
-
`;
|
|
407
|
-
});
|
|
408
|
-
StyledHeaderSummary.defaultProps = defaultThemeProp;
|
|
409
|
-
export const StyledHeaderSummaryValue = styled(StyledFieldValue)(({ bold, truncate, theme }) => {
|
|
410
|
-
const { base: { 'content-width': { xs } }, components: { text: { h1: { 'font-weight': h1Weight } } } } = theme;
|
|
411
|
-
return css `
|
|
412
|
-
overflow: hidden;
|
|
413
|
-
text-overflow: ellipsis;
|
|
414
|
-
|
|
415
|
-
${truncate &&
|
|
416
|
-
css `
|
|
417
|
-
max-width: ${xs};
|
|
418
|
-
`}
|
|
419
|
-
|
|
420
|
-
${bold &&
|
|
421
|
-
css `
|
|
422
|
-
font-weight: ${h1Weight};
|
|
423
|
-
`}
|
|
424
|
-
|
|
425
|
-
/*
|
|
426
|
-
* :not([hidden]) necessary to prevent hidden span with preview a11y instructions from
|
|
427
|
-
* factoring into scrollWidth of element when determining truncation.
|
|
428
|
-
*/
|
|
429
|
-
> :not([hidden]) {
|
|
430
|
-
display: inline;
|
|
431
|
-
}
|
|
432
|
-
`;
|
|
433
|
-
});
|
|
434
|
-
StyledHeaderSummaryValue.defaultProps = defaultThemeProp;
|
|
435
|
-
export const StyledHeaderActions = styled.div(({ offsetEnd }) => {
|
|
436
|
-
const { summaryExpanded } = useCaseViewContext();
|
|
437
|
-
return css `
|
|
438
|
-
margin-inline-start: auto;
|
|
439
|
-
|
|
440
|
-
${offsetEnd &&
|
|
441
|
-
css `
|
|
442
|
-
padding-inline-end: ${inlineEndButtonOffset};
|
|
443
|
-
`}
|
|
444
|
-
|
|
445
|
-
${summaryExpanded &&
|
|
446
|
-
css `
|
|
447
|
-
align-self: start;
|
|
448
|
-
`}
|
|
449
|
-
`;
|
|
450
|
-
});
|
|
451
|
-
export const StyledCaseHeaderPromotedAction = styled(Button)(({ theme }) => {
|
|
452
|
-
const { base: { palette: { 'brand-primary': primary, interactive } } } = theme;
|
|
453
|
-
const interactiveUsable = getContrast(primary, interactive) >= 4.5;
|
|
454
|
-
const color = interactiveUsable ? interactive : readableColor(primary);
|
|
455
|
-
let hoverBackground = rgba(color, 0.15);
|
|
456
|
-
if (interactiveUsable) {
|
|
457
|
-
hoverBackground = readableHue(hoverBackground, color);
|
|
458
|
-
}
|
|
459
|
-
return css `
|
|
460
|
-
--button-background-color: ${primary};
|
|
461
|
-
color: ${color};
|
|
462
|
-
background-color: ${primary};
|
|
463
|
-
border-color: ${color};
|
|
464
|
-
|
|
465
|
-
@media (hover: hover) {
|
|
466
|
-
&:hover {
|
|
467
|
-
--button-background-color: ${hoverBackground};
|
|
468
|
-
color: ${color};
|
|
469
|
-
background-color: ${hoverBackground};
|
|
470
|
-
border-color: ${color};
|
|
471
|
-
}
|
|
472
|
-
}
|
|
473
|
-
`;
|
|
474
|
-
});
|
|
475
|
-
StyledCaseHeaderPromotedAction.defaultProps = defaultThemeProp;
|
|
476
526
|
export const StyledUtilitiesHeader = styled(Text) `
|
|
477
527
|
align-self: center;
|
|
478
528
|
|
|
@@ -1 +1 @@
|
|
|
1
|
-
{"version":3,"file":"CaseView.styles.js","sourceRoot":"","sources":["../../../src/components/CaseView/CaseView.styles.ts"],"names":[],"mappings":"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","sourcesContent":["import styled, { css, DefaultTheme } from 'styled-components';\nimport {\n getContrast,\n hideVisually,\n meetsContrastGuidelines,\n parseToHsl,\n readableColor,\n rgba,\n transparentize\n} from 'polished';\n\nimport {\n Button,\n calculateFontSize,\n CardContent,\n defaultThemeProp,\n StyledBreadcrumbs,\n StyledFieldValue,\n StyledStackedFieldValue,\n StyledIcon,\n StyledLabel,\n StyledPopover,\n StyledText,\n StyledTooltip,\n tryCatch,\n FontSize,\n FieldValueList,\n StyledLink,\n readableHue,\n Text\n} from '@pega/cosmos-react-core';\nimport { StyledMenu } from '@pega/cosmos-react-core/lib/components/Menu/Menu.styles';\nimport { colCountChWidth } from '@pega/cosmos-react-work/lib/components/Details/Details.styles';\nimport { StyledButtonLink } from '@pega/cosmos-react-core/lib/components/Button/Button';\n\nimport { useCaseViewContext } from './CaseView.context';\n\nconst labelChWidth = 16;\nconst inlineEndButtonOffset = '0.375rem';\n\nexport const StyledCaseSummaryFields = styled.div``;\n\nStyledCaseSummaryFields.defaultProps = defaultThemeProp;\n\nexport const StyledSummaryPrimaryList = styled(FieldValueList)<{ wrapped?: boolean }>(\n ({ theme, wrapped }) => {\n const fontSizes = calculateFontSize(theme.base['font-size'], theme.base['font-scale']);\n\n return css`\n ${wrapped\n ? css`\n grid-template-columns: minmax(0, 1fr);\n `\n : css`\n grid-template-columns: ${labelChWidth}ch auto;\n `}\n\n ${StyledFieldValue} {\n font-size: ${fontSizes[theme.components.text.h1['font-size'] as FontSize]};\n font-weight: ${theme.components.text.h1['font-weight']};\n }\n `;\n }\n);\n\nStyledSummaryPrimaryList.defaultProps = defaultThemeProp;\n\nexport const StyledSummarySecondaryList = styled(FieldValueList)(() => {\n return css`\n ${StyledStackedFieldValue} {\n grid-column: 1 / -1;\n }\n `;\n});\n\nexport const StyledSummaryTabContent = styled(CardContent)(({ theme }) => {\n const {\n base: { spacing }\n } = theme;\n const containerWidthCh = colCountChWidth[1].containerWidth;\n const containerWidthMinusLabel = `${containerWidthCh - labelChWidth}ch`;\n\n return css`\n ${StyledSummarySecondaryList} {\n > ${StyledStackedFieldValue} {\n max-width: ${containerWidthCh}ch;\n }\n\n > ${StyledFieldValue} {\n max-width: calc(${containerWidthMinusLabel} - 2 * ${spacing});\n }\n }\n `;\n});\n\nStyledSummaryTabContent.defaultProps = defaultThemeProp;\n\nexport const StyledCaseHeader = styled.header(({ theme }) => {\n const color = tryCatch(() => readableColor(theme.base.palette['brand-primary']));\n\n return css`\n background-color: ${theme.base.palette['brand-primary']};\n color: ${color};\n padding: ${theme.base.spacing} calc(2 * ${theme.base.spacing});\n position: relative;\n\n h1:focus-visible {\n outline: transparent;\n box-shadow: ${theme.base.shadow.focus};\n }\n\n ${StyledMenu} {\n color: ${theme.base.palette['foreground-color']};\n z-index: ${theme.base['z-index'].popover + 1};\n }\n `;\n});\n\nStyledCaseHeader.defaultProps = defaultThemeProp;\n\nexport const StyledCaseIconWrap = styled.div(({ theme }) => {\n const spacing = theme.base.spacing;\n const borderRadius = theme.base['border-radius'];\n const backgroundColor = tryCatch(() => {\n const { lightness } = parseToHsl(theme.base.palette['brand-primary']);\n return lightness > 0.35 ? 'rgba(0, 0, 0, 0.2)' : 'rgba(255, 255, 255, 0.2)';\n });\n\n return css`\n background: ${backgroundColor};\n border-radius: calc(${borderRadius} / 2);\n width: calc(3 * ${spacing});\n height: calc(3 * ${spacing});\n ${StyledIcon} {\n font-size: calc(2 * ${spacing});\n margin: auto;\n }\n `;\n});\n\nStyledCaseIconWrap.defaultProps = defaultThemeProp;\n\nexport const StyledFollowIconWrap = styled.label`\n font-size: 1.25rem;\n input {\n ${hideVisually}\n }\n\n input:focus + svg {\n box-shadow: ${({ theme }) => theme.base.shadow.focus};\n }\n`;\n\nStyledFollowIconWrap.defaultProps = defaultThemeProp;\n\nexport const StyledSubheading = styled.p``;\n\nStyledSubheading.defaultProps = defaultThemeProp;\n\nexport const StyledCaseHeaderText = styled.hgroup(({ theme }) => {\n const color = readableColor(theme.base.palette['brand-primary']);\n const transparentColor = tryCatch(() => transparentize(0.1, color));\n const fontSize = calculateFontSize(theme.base['font-size'], theme.base['font-scale']);\n\n const idStyle = css`\n color: ${transparentColor};\n font-size: ${fontSize.s};\n font-weight: normal;\n `;\n\n return css`\n word-break: break-word;\n\n ${StyledSubheading} {\n ${idStyle}\n }\n\n ${StyledBreadcrumbs} {\n > a,\n > span,\n > button,\n > svg {\n ${idStyle}\n }\n\n > a,\n > button {\n &:focus {\n box-shadow: ${theme.base.shadow.focus};\n }\n }\n\n ${StyledPopover}:not(${StyledTooltip}) {\n color: ${theme.base.palette['foreground-color']};\n }\n }\n\n > ${StyledText} > ${StyledLink} {\n color: ${color};\n }\n `;\n});\n\nStyledCaseHeaderText.defaultProps = defaultThemeProp;\n\nexport const StyledHeaderBreadcrumbBlock = styled.div<{ breadcrumbWidth?: number }>(\n ({ breadcrumbWidth }) => {\n return css`\n width: ${breadcrumbWidth ? `${breadcrumbWidth}px` : '100%'};\n max-width: 100%;\n `;\n }\n);\n\nexport const StyledHeaderSummaryBlock = styled.div<{ hasItems: boolean }>(({ hasItems, theme }) => {\n const {\n base: {\n spacing,\n palette: { 'brand-primary': primary }\n }\n } = theme;\n\n const color = readableColor(primary);\n const transparentColor = tryCatch(() => transparentize(0.5, color));\n\n return css`\n border-inline-start: 0.0625rem solid transparent;\n\n ${hasItems &&\n css`\n border-color: ${transparentColor};\n margin-inline-start: calc(2 * ${spacing});\n `}\n\n ${StyledStackedFieldValue}:first-child {\n margin-inline-start: calc(2 * ${spacing});\n }\n `;\n});\n\nStyledHeaderSummaryBlock.defaultProps = defaultThemeProp;\n\nexport const StyledCaseSummaryInfo = styled.div(() => {\n const { intelligentGuidance } = useCaseViewContext();\n\n return css`\n overflow: auto;\n flex: 1;\n ${intelligentGuidance &&\n css`\n /* Accounts for collapsed intelligentGuidance list covering summary panel content when fully scrolled. */\n padding-block-end: 4rem;\n `}\n `;\n});\n\nStyledCaseSummaryInfo.defaultProps = defaultThemeProp;\n\nexport const StyledCaseSummaryContainer = styled.div(({ theme }) => {\n return css`\n padding: calc(1.5 * ${theme.base.spacing}) calc(${theme.components.card.padding} * 2);\n `;\n});\n\nStyledCaseSummaryContainer.defaultProps = defaultThemeProp;\n\nexport const StyledExpandCollapseButton = styled(Button)(({ theme }) => {\n const { summaryExpanded } = useCaseViewContext();\n\n return css`\n position: absolute;\n z-index: 1;\n bottom: 0;\n inset-inline-start: ${summaryExpanded ? 'calc(100% - 0.75rem)' : '0'};\n border-radius: ${summaryExpanded ? '1.5rem' : '0 1.5rem 1.5rem 0'};\n box-shadow: ${theme.base.shadow.low};\n border: none;\n opacity: 0;\n\n &:focus {\n opacity: 1;\n }\n\n ${StyledIcon} {\n width: 1.5rem;\n height: 1.5rem;\n ${summaryExpanded\n ? css`\n transform: rotate(0);\n `\n : css`\n transform: rotate(180deg);\n `}\n }\n `;\n});\n\nStyledExpandCollapseButton.defaultProps = defaultThemeProp;\n\nexport const StyledCaseSummary = styled.div(() => {\n const { summaryExpanded, aboveMD } = useCaseViewContext();\n\n return css`\n position: relative;\n height: 100%;\n\n ${aboveMD &&\n css`\n width: 25rem;\n\n ${!summaryExpanded &&\n css`\n width: 100%;\n `}\n `}\n `;\n});\n\nexport const StyledWorkArea = styled.div(({ theme }) => {\n const { summaryExpanded, aboveMD, intelligentGuidance } = useCaseViewContext();\n let pbeRem = 0;\n\n if (intelligentGuidance) {\n pbeRem = aboveMD && !summaryExpanded ? 4 : 6;\n }\n\n return css`\n grid-area: work-area;\n padding: calc(2 * ${theme.base.spacing});\n\n ${aboveMD &&\n css`\n padding: calc(2 * ${theme.base.spacing}) 0;\n\n ${!summaryExpanded &&\n css`\n margin-inline-start: calc(2 * ${theme.base.spacing});\n `}\n `}\n\n /* Order of style here is necessary for overriding styles above. */\n ${pbeRem > 0 &&\n css`\n /* Accounts for collapsed intelligentGuidance bubble covering work area content when fully scrolled. */\n padding-block-end: ${pbeRem}rem;\n `}\n `;\n});\n\nStyledWorkArea.defaultProps = defaultThemeProp;\n\nexport const StyledUtilToggle = styled.button(({ theme }) => {\n return css`\n color: ${theme.base.palette['foreground-color']};\n margin-inline: auto ${inlineEndButtonOffset};\n `;\n});\n\nStyledUtilToggle.defaultProps = defaultThemeProp;\n\nexport const StyledUtilities = styled.div(({ theme }) => {\n const { utilitiesExpanded, aboveLG } = useCaseViewContext();\n\n return css`\n height: max-content;\n margin-block: calc(2 * ${theme.base.spacing});\n\n ${aboveLG &&\n utilitiesExpanded &&\n css`\n width: 25rem;\n `}\n `;\n});\n\nStyledUtilities.defaultProps = defaultThemeProp;\n\nexport const StyledSummary = styled.div(({ theme }) => {\n const { summaryExpanded, aboveMD } = useCaseViewContext();\n\n return css`\n top: ${summaryExpanded ? 'var(--top-offset)' : 'var(--appshell-offset, 0)'};\n width: 100%;\n background-color: ${theme.base.palette['primary-background']};\n z-index: ${theme.base['z-index'].popover};\n\n ${aboveMD &&\n summaryExpanded &&\n css`\n height: var(--case-view-height);\n `}\n\n ${aboveMD\n ? css`\n position: sticky;\n `\n : css`\n @media (min-height: ${theme.base.breakpoints.sm}) {\n position: sticky;\n }\n `}\n `;\n});\n\nStyledSummary.defaultProps = defaultThemeProp;\n\nexport const StyledCaseDrawer = styled.div(({ theme }) => {\n return css`\n min-width: 21.875rem;\n max-width: 31.25rem;\n width: calc((100vw - 31.25rem) / 10 + 21.875rem);\n background-color: ${theme.base.palette['primary-background']};\n height: var(--case-view-height);\n top: var(--top-offset);\n z-index: ${theme.base['z-index'].drawer - 1};\n `;\n});\n\nStyledCaseDrawer.defaultProps = defaultThemeProp;\n\nexport const StyledCaseDrawerContent = styled.div(({ theme }) => {\n return css`\n background-color: ${theme.base.palette['app-background']};\n padding: calc(2 * ${theme.base.spacing});\n height: 100%;\n overflow: auto;\n `;\n});\n\nStyledCaseDrawerContent.defaultProps = defaultThemeProp;\n\nexport const StyledPersistentUtility = styled.div(({ theme }) => {\n return css`\n min-width: ${theme.base['content-width'].sm};\n max-width: ${theme.base['content-width'].md};\n overflow: auto;\n position: sticky;\n z-index: 1;\n height: var(--case-view-height);\n top: var(--top-offset);\n `;\n});\n\nStyledPersistentUtility.defaultProps = defaultThemeProp;\n\nexport const ScrollStick = styled.div`\n position: sticky;\n top: 0;\n`;\n\nexport const StyledCaseView = styled.div(({ theme }) => {\n const { aboveMD } = useCaseViewContext();\n\n return css`\n --top-offset: calc(var(--appshell-offset, 0rem) + var(--summary-height));\n --case-view-height: calc(100vh - var(--top-offset));\n position: relative;\n min-height: var(--case-view-height);\n background-color: ${theme.base.palette['app-background']};\n\n ${aboveMD &&\n css`\n ${StyledUtilities}:last-child {\n margin-inline-end: calc(2 * ${theme.base.spacing});\n }\n `}\n `;\n});\n\nStyledCaseView.defaultProps = defaultThemeProp;\n\nexport const StyledHeaderSummary = styled.dl(({ theme }) => {\n const {\n base: {\n palette: { 'brand-primary': primary, interactive }\n }\n } = theme;\n\n const interactiveUsable = meetsContrastGuidelines(primary, interactive).AA;\n const color = readableColor(primary);\n const transparentColor = tryCatch(() => transparentize(0.1, color));\n\n return css`\n max-width: 100%;\n min-width: 0;\n\n ${StyledLabel} {\n color: ${transparentColor};\n }\n\n ${StyledFieldValue} {\n color: ${color};\n }\n\n /* stylelint-disable no-duplicate-selectors */\n ${StyledLabel},\n ${StyledFieldValue} {\n white-space: nowrap;\n }\n /* stylelint-enable no-duplicate-selectors */\n\n ${StyledButtonLink},\n ${StyledLink} {\n &:focus-visible {\n box-shadow: inset 0 0 0 0.0625rem ${color};\n }\n\n ${!interactiveUsable &&\n css`\n color: ${color};\n text-decoration: underline;\n `}\n }\n `;\n});\n\nStyledHeaderSummary.defaultProps = defaultThemeProp;\n\nexport const StyledHeaderSummaryValue = styled(StyledFieldValue)(\n ({ bold, truncate, theme }: { bold?: boolean; truncate?: boolean; theme: DefaultTheme }) => {\n const {\n base: {\n 'content-width': { xs }\n },\n components: {\n text: {\n h1: { 'font-weight': h1Weight }\n }\n }\n } = theme;\n\n return css`\n overflow: hidden;\n text-overflow: ellipsis;\n\n ${truncate &&\n css`\n max-width: ${xs};\n `}\n\n ${bold &&\n css`\n font-weight: ${h1Weight};\n `}\n\n /*\n * :not([hidden]) necessary to prevent hidden span with preview a11y instructions from\n * factoring into scrollWidth of element when determining truncation.\n */\n > :not([hidden]) {\n display: inline;\n }\n `;\n }\n);\n\nStyledHeaderSummaryValue.defaultProps = defaultThemeProp;\n\nexport const StyledHeaderActions = styled.div<{ offsetEnd: boolean }>(({ offsetEnd }) => {\n const { summaryExpanded } = useCaseViewContext();\n\n return css`\n margin-inline-start: auto;\n\n ${offsetEnd &&\n css`\n padding-inline-end: ${inlineEndButtonOffset};\n `}\n\n ${summaryExpanded &&\n css`\n align-self: start;\n `}\n `;\n});\n\nexport const StyledCaseHeaderPromotedAction = styled(Button)(({ theme }) => {\n const {\n base: {\n palette: { 'brand-primary': primary, interactive }\n }\n } = theme;\n\n const interactiveUsable = getContrast(primary, interactive) >= 4.5;\n const color = interactiveUsable ? interactive : readableColor(primary);\n let hoverBackground = rgba(color, 0.15);\n\n if (interactiveUsable) {\n hoverBackground = readableHue(hoverBackground, color);\n }\n\n return css`\n --button-background-color: ${primary};\n color: ${color};\n background-color: ${primary};\n border-color: ${color};\n\n @media (hover: hover) {\n &:hover {\n --button-background-color: ${hoverBackground};\n color: ${color};\n background-color: ${hoverBackground};\n border-color: ${color};\n }\n }\n `;\n});\n\nStyledCaseHeaderPromotedAction.defaultProps = defaultThemeProp;\n\nexport const StyledUtilitiesHeader = styled(Text)`\n align-self: center;\n\n &:not(:focus) {\n ${hideVisually}\n }\n`;\n\nStyledUtilitiesHeader.defaultProps = defaultThemeProp;\n"]}
|
|
1
|
+
{"version":3,"file":"CaseView.styles.js","sourceRoot":"","sources":["../../../src/components/CaseView/CaseView.styles.ts"],"names":[],"mappings":"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","sourcesContent":["import styled, { css, DefaultTheme } from 'styled-components';\nimport {\n getContrast,\n hideVisually,\n meetsContrastGuidelines,\n parseToHsl,\n readableColor,\n rgba,\n transparentize\n} from 'polished';\n\nimport {\n Button,\n calculateFontSize,\n CardContent,\n defaultThemeProp,\n StyledBreadcrumbs,\n StyledButtonLink,\n StyledFieldValue,\n StyledStackedFieldValue,\n StyledIcon,\n StyledLabel,\n StyledPopover,\n StyledText,\n StyledTooltip,\n tryCatch,\n FontSize,\n FieldValueList,\n StyledLink,\n readableHue,\n Text\n} from '@pega/cosmos-react-core';\nimport { StyledMenu } from '@pega/cosmos-react-core/lib/components/Menu/Menu.styles';\nimport { colCountChWidth } from '@pega/cosmos-react-work/lib/components/Details/Details.styles';\n\nimport { useCaseViewContext } from './CaseView.context';\n\nconst labelChWidth = 16;\nconst inlineEndButtonOffset = '0.375rem';\n\nexport const StyledCaseSummaryFields = styled.div``;\n\nStyledCaseSummaryFields.defaultProps = defaultThemeProp;\n\nexport const StyledSummaryPrimaryList = styled(FieldValueList)<{ wrapped?: boolean }>(\n ({ theme, wrapped }) => {\n const fontSizes = calculateFontSize(theme.base['font-size'], theme.base['font-scale']);\n\n return css`\n ${wrapped\n ? css`\n grid-template-columns: minmax(0, 1fr);\n `\n : css`\n grid-template-columns: ${labelChWidth}ch auto;\n `}\n\n ${StyledFieldValue} {\n font-size: ${fontSizes[theme.components.text.h1['font-size'] as FontSize]};\n font-weight: ${theme.components.text.h1['font-weight']};\n }\n `;\n }\n);\n\nStyledSummaryPrimaryList.defaultProps = defaultThemeProp;\n\nexport const StyledSummarySecondaryList = styled(FieldValueList)(() => {\n return css`\n ${StyledStackedFieldValue} {\n grid-column: 1 / -1;\n }\n `;\n});\n\nexport const StyledSummaryTabContent = styled(CardContent)(({ theme }) => {\n const {\n base: { spacing }\n } = theme;\n const containerWidthCh = colCountChWidth[1].containerWidth;\n const containerWidthMinusLabel = `${containerWidthCh - labelChWidth}ch`;\n\n return css`\n ${StyledSummarySecondaryList} {\n > ${StyledStackedFieldValue} {\n max-width: ${containerWidthCh}ch;\n }\n\n > ${StyledFieldValue} {\n max-width: calc(${containerWidthMinusLabel} - 2 * ${spacing});\n }\n }\n `;\n});\n\nStyledSummaryTabContent.defaultProps = defaultThemeProp;\n\nexport const StyledCaseHeader = styled.header(({ theme }) => {\n const color = tryCatch(() => readableColor(theme.base.palette['brand-primary']));\n\n return css`\n background-color: ${theme.base.palette['brand-primary']};\n color: ${color};\n padding: ${theme.base.spacing} calc(2 * ${theme.base.spacing});\n position: relative;\n\n h1:focus-visible {\n outline: transparent;\n box-shadow: ${theme.base.shadow.focus};\n }\n\n ${StyledMenu} {\n color: ${theme.base.palette['foreground-color']};\n z-index: ${theme.base['z-index'].popover + 1};\n }\n `;\n});\n\nStyledCaseHeader.defaultProps = defaultThemeProp;\n\nexport const StyledCaseIconWrap = styled.div(({ theme }) => {\n const spacing = theme.base.spacing;\n const borderRadius = theme.base['border-radius'];\n const backgroundColor = tryCatch(() => {\n const { lightness } = parseToHsl(theme.base.palette['brand-primary']);\n return lightness > 0.35 ? 'rgba(0, 0, 0, 0.2)' : 'rgba(255, 255, 255, 0.2)';\n });\n\n return css`\n background: ${backgroundColor};\n width: calc(4 * ${spacing});\n height: calc(4 * ${spacing});\n border-radius: calc(${borderRadius} / 2);\n margin-block-start: ${spacing};\n\n ${StyledIcon} {\n font-size: calc(2 * ${spacing});\n margin: auto;\n }\n `;\n});\n\nStyledCaseIconWrap.defaultProps = defaultThemeProp;\n\nexport const StyledFollowIconWrap = styled.label`\n font-size: 1.25rem;\n input {\n ${hideVisually}\n }\n\n input:focus + svg {\n box-shadow: ${({ theme }) => theme.base.shadow.focus};\n }\n`;\n\nStyledFollowIconWrap.defaultProps = defaultThemeProp;\n\nexport const StyledSubheading = styled.p``;\n\nStyledSubheading.defaultProps = defaultThemeProp;\n\nexport const StyledHeaderActions = styled.div<{ offsetEnd: boolean }>(({ offsetEnd, theme }) => {\n return css`\n margin-inline-start: auto;\n padding-block: ${theme.base.spacing};\n padding-inline-start: calc(2 * ${theme.base.spacing});\n\n ${offsetEnd &&\n css`\n padding-inline-end: ${inlineEndButtonOffset};\n `};\n `;\n});\n\nStyledHeaderActions.defaultProps = defaultThemeProp;\n\nexport const StyledCaseHeaderText = styled.hgroup(({ theme }) => {\n const color = readableColor(theme.base.palette['brand-primary']);\n const transparentColor = tryCatch(() => transparentize(0.1, color));\n const fontSize = calculateFontSize(theme.base['font-size'], theme.base['font-scale']);\n\n const idStyle = css`\n color: ${transparentColor};\n font-size: ${fontSize.s};\n font-weight: normal;\n `;\n\n return css`\n word-break: break-word;\n\n ${StyledSubheading} {\n ${idStyle}\n }\n\n ${StyledBreadcrumbs} {\n > a,\n > span,\n > button,\n > svg {\n ${idStyle}\n }\n\n > a,\n > button {\n &:focus {\n box-shadow: ${theme.base.shadow.focus};\n }\n }\n\n ${StyledPopover}:not(${StyledTooltip}) {\n color: ${theme.base.palette['foreground-color']};\n }\n }\n\n > ${StyledText} > ${StyledLink} {\n color: ${color};\n }\n\n + ${StyledHeaderActions} {\n padding-inline-start: 0;\n }\n `;\n});\n\nStyledCaseHeaderText.defaultProps = defaultThemeProp;\n\nexport const StyledHeaderBreadcrumbBlock = styled.div<{ breadcrumbWidth?: number }>(\n ({ breadcrumbWidth }) => {\n return css`\n width: ${breadcrumbWidth ? `${breadcrumbWidth}px` : '100%'};\n max-width: 100%;\n `;\n }\n);\n\nexport const StyledCaseHeaderPromotedAction = styled(Button)(({ theme }) => {\n const {\n base: {\n palette: { 'brand-primary': primary, interactive }\n }\n } = theme;\n\n const interactiveUsable = getContrast(primary, interactive) >= 4.5;\n const color = interactiveUsable ? interactive : readableColor(primary);\n let hoverBackground = rgba(color, 0.15);\n\n if (interactiveUsable) {\n hoverBackground = readableHue(hoverBackground, color);\n }\n\n return css`\n --button-background-color: ${primary};\n color: ${color};\n background-color: ${primary};\n border-color: ${color};\n\n @media (hover: hover) {\n &:hover {\n --button-background-color: ${hoverBackground};\n color: ${color};\n background-color: ${hoverBackground};\n border-color: ${color};\n }\n }\n `;\n});\n\nStyledCaseHeaderPromotedAction.defaultProps = defaultThemeProp;\n\nexport const StyledHeaderSummaryBlock = styled.div<{ hasItems: boolean }>(({ hasItems, theme }) => {\n const {\n base: {\n spacing,\n palette: { 'brand-primary': primary }\n }\n } = theme;\n\n const color = readableColor(primary);\n const transparentColor = tryCatch(() => transparentize(0.5, color));\n\n return css`\n ${hasItems &&\n css`\n border-inline-start: 0.0625rem solid ${transparentColor};\n `}\n\n ${StyledStackedFieldValue}:first-child {\n margin-inline-start: calc(2 * ${spacing});\n }\n `;\n});\n\nStyledHeaderSummaryBlock.defaultProps = defaultThemeProp;\n\nconst popoverColorReset = (theme: DefaultTheme) => {\n const {\n base: {\n palette: { interactive, light, 'foreground-color': baseForeground }\n }\n } = theme;\n\n return css`\n ${StyledPopover}:not(${StyledTooltip}) {\n color: ${baseForeground};\n\n ${StyledButtonLink},\n ${StyledLink} {\n color: ${interactive};\n text-decoration: none;\n\n &:hover,\n &:active {\n text-decoration: underline;\n }\n\n &:focus {\n box-shadow: inset 0 0 0 0.0625rem ${light}, 0 0 0.125rem 0.0625rem ${interactive};\n }\n }\n }\n `;\n};\n\nexport const StyledHeaderSummary = styled.dl(({ theme }) => {\n const {\n base: {\n palette: { 'brand-primary': primary, interactive }\n }\n } = theme;\n\n const interactiveUsable = meetsContrastGuidelines(primary, interactive).AA;\n const color = readableColor(primary);\n const transparentColor = tryCatch(() => transparentize(0.1, color));\n\n return css`\n max-width: 100%;\n min-width: 0;\n\n > ${StyledStackedFieldValue} {\n > ${StyledLabel} {\n color: ${transparentColor};\n white-space: nowrap;\n }\n\n > ${StyledFieldValue} {\n color: ${color};\n white-space: nowrap;\n }\n\n ${StyledButtonLink},\n ${StyledLink} {\n &:focus-visible {\n box-shadow: inset 0 0 0 0.0625rem ${color};\n }\n\n ${!interactiveUsable &&\n css`\n color: ${color};\n text-decoration: underline;\n `}\n }\n\n ${popoverColorReset(theme)}\n }\n `;\n});\n\nStyledHeaderSummary.defaultProps = defaultThemeProp;\n\nexport const StyledHeaderSummaryValue = styled(StyledFieldValue)(\n ({ bold, truncate, theme }: { bold?: boolean; truncate?: boolean; theme: DefaultTheme }) => {\n const {\n base: {\n 'content-width': { xs }\n },\n components: {\n text: {\n h1: { 'font-weight': h1Weight }\n }\n }\n } = theme;\n\n return css`\n overflow: hidden;\n text-overflow: ellipsis;\n\n ${truncate &&\n css`\n max-width: ${xs};\n `}\n\n ${bold &&\n css`\n font-weight: ${h1Weight};\n `}\n\n /*\n * :not([hidden]) necessary to prevent hidden span with preview a11y instructions from\n * factoring into scrollWidth of element when determining truncation.\n */\n > :not([hidden]) {\n display: inline;\n }\n `;\n }\n);\n\nStyledHeaderSummaryValue.defaultProps = defaultThemeProp;\n\nexport const StyledCaseSummaryInfo = styled.div(() => {\n const { intelligentGuidance } = useCaseViewContext();\n\n return css`\n overflow: auto;\n flex: 1;\n ${intelligentGuidance &&\n css`\n /* Accounts for collapsed intelligentGuidance list covering summary panel content when fully scrolled. */\n padding-block-end: 4rem;\n `}\n `;\n});\n\nStyledCaseSummaryInfo.defaultProps = defaultThemeProp;\n\nexport const StyledCaseSummaryContainer = styled.div(({ theme }) => {\n return css`\n padding: calc(1.5 * ${theme.base.spacing}) calc(${theme.components.card.padding} * 2);\n `;\n});\n\nStyledCaseSummaryContainer.defaultProps = defaultThemeProp;\n\nexport const StyledExpandCollapseButton = styled(Button)(({ theme }) => {\n const { summaryExpanded } = useCaseViewContext();\n\n return css`\n position: absolute;\n z-index: 1;\n bottom: 0;\n inset-inline-start: ${summaryExpanded ? 'calc(100% - 0.75rem)' : '0'};\n border-radius: ${summaryExpanded ? '1.5rem' : '0 1.5rem 1.5rem 0'};\n box-shadow: ${theme.base.shadow.low};\n border: none;\n opacity: 0;\n\n &:focus {\n opacity: 1;\n }\n\n ${StyledIcon} {\n width: 1.5rem;\n height: 1.5rem;\n ${summaryExpanded\n ? css`\n transform: rotate(0);\n `\n : css`\n transform: rotate(180deg);\n `}\n }\n `;\n});\n\nStyledExpandCollapseButton.defaultProps = defaultThemeProp;\n\nexport const StyledCaseSummary = styled.div(({ theme }) => {\n const { summaryExpanded, aboveMD } = useCaseViewContext();\n const {\n base: { spacing }\n } = theme;\n\n return css`\n position: relative;\n height: 100%;\n\n ${aboveMD &&\n css`\n ${summaryExpanded\n ? css`\n width: 25rem;\n\n &:focus-within,\n &:hover {\n &::after {\n content: '';\n position: absolute;\n top: 0;\n bottom: 0;\n inset-inline-start: 100%;\n width: 0.75rem;\n }\n\n ${StyledExpandCollapseButton} {\n opacity: 1;\n }\n }\n `\n : css`\n width: 100%;\n\n ${StyledExpandCollapseButton} {\n opacity: 1;\n transform: translateY(50%);\n margin-inline-start: calc(2 * ${spacing});\n border-radius: 50%;\n\n svg {\n transform: rotate(-90deg);\n }\n }\n `}\n `}\n `;\n});\n\nexport const StyledWorkArea = styled.div(({ theme }) => {\n const { summaryExpanded, aboveMD, intelligentGuidance } = useCaseViewContext();\n let pbeRem = 0;\n\n if (intelligentGuidance) {\n pbeRem = aboveMD && !summaryExpanded ? 4 : 6;\n }\n\n return css`\n grid-area: work-area;\n padding: calc(2 * ${theme.base.spacing});\n\n ${aboveMD &&\n css`\n padding: calc(2 * ${theme.base.spacing}) 0;\n\n ${!summaryExpanded &&\n css`\n margin-inline-start: calc(2 * ${theme.base.spacing});\n `}\n `}\n\n /* Order of style here is necessary for overriding styles above. */\n ${pbeRem > 0 &&\n css`\n /* Accounts for collapsed intelligentGuidance bubble covering work area content when fully scrolled. */\n padding-block-end: ${pbeRem}rem;\n `}\n `;\n});\n\nStyledWorkArea.defaultProps = defaultThemeProp;\n\nexport const StyledUtilToggle = styled.button(({ theme }) => {\n return css`\n color: ${theme.base.palette['foreground-color']};\n margin-inline: auto ${inlineEndButtonOffset};\n `;\n});\n\nStyledUtilToggle.defaultProps = defaultThemeProp;\n\nexport const StyledUtilities = styled.div(({ theme }) => {\n const { utilitiesExpanded, aboveLG } = useCaseViewContext();\n\n return css`\n height: max-content;\n margin-block: calc(2 * ${theme.base.spacing});\n\n ${aboveLG &&\n utilitiesExpanded &&\n css`\n width: 25rem;\n `}\n `;\n});\n\nStyledUtilities.defaultProps = defaultThemeProp;\n\nexport const StyledSummary = styled.div(({ theme }) => {\n const { summaryExpanded, aboveMD } = useCaseViewContext();\n\n return css`\n top: ${summaryExpanded ? 'var(--top-offset)' : 'var(--appshell-offset, 0)'};\n width: 100%;\n background-color: ${theme.base.palette['primary-background']};\n z-index: ${theme.base['z-index'].popover};\n\n ${aboveMD &&\n summaryExpanded &&\n css`\n height: var(--case-view-height);\n `}\n\n ${aboveMD\n ? css`\n position: sticky;\n `\n : css`\n @media (min-height: ${theme.base.breakpoints.sm}) {\n position: sticky;\n }\n `}\n `;\n});\n\nStyledSummary.defaultProps = defaultThemeProp;\n\nexport const StyledCaseDrawer = styled.div(({ theme }) => {\n return css`\n min-width: 21.875rem;\n max-width: 31.25rem;\n width: calc((100vw - 31.25rem) / 10 + 21.875rem);\n background-color: ${theme.base.palette['primary-background']};\n height: var(--case-view-height);\n top: var(--top-offset);\n z-index: ${theme.base['z-index'].drawer - 1};\n `;\n});\n\nStyledCaseDrawer.defaultProps = defaultThemeProp;\n\nexport const StyledCaseDrawerContent = styled.div(({ theme }) => {\n return css`\n background-color: ${theme.base.palette['app-background']};\n padding: calc(2 * ${theme.base.spacing});\n height: 100%;\n overflow: auto;\n `;\n});\n\nStyledCaseDrawerContent.defaultProps = defaultThemeProp;\n\nexport const StyledPersistentUtility = styled.div(({ theme }) => {\n return css`\n min-width: ${theme.base['content-width'].sm};\n max-width: ${theme.base['content-width'].md};\n overflow: auto;\n position: sticky;\n z-index: 1;\n height: var(--case-view-height);\n top: var(--top-offset);\n `;\n});\n\nStyledPersistentUtility.defaultProps = defaultThemeProp;\n\nexport const ScrollStick = styled.div`\n position: sticky;\n top: 0;\n`;\n\nexport const StyledCaseView = styled.div(({ theme }) => {\n const { aboveMD } = useCaseViewContext();\n\n return css`\n --top-offset: calc(var(--appshell-offset, 0rem) + var(--summary-height));\n --case-view-height: calc(100vh - var(--top-offset));\n position: relative;\n min-height: var(--case-view-height);\n background-color: ${theme.base.palette['app-background']};\n\n ${aboveMD &&\n css`\n ${StyledUtilities}:last-child {\n margin-inline-end: calc(2 * ${theme.base.spacing});\n }\n `}\n `;\n});\n\nStyledCaseView.defaultProps = defaultThemeProp;\n\nexport const StyledUtilitiesHeader = styled(Text)`\n align-self: center;\n\n &:not(:focus) {\n ${hideVisually}\n }\n`;\n\nStyledUtilitiesHeader.defaultProps = defaultThemeProp;\n"]}
|
|
@@ -1 +1 @@
|
|
|
1
|
-
{"version":3,"file":"IntelligentGuidance.d.ts","sourceRoot":"","sources":["../../../src/components/IntelligentGuidance/IntelligentGuidance.tsx"],"names":[],"mappings":"AAAA,OAAO,
|
|
1
|
+
{"version":3,"file":"IntelligentGuidance.d.ts","sourceRoot":"","sources":["../../../src/components/IntelligentGuidance/IntelligentGuidance.tsx"],"names":[],"mappings":"AAAA,OAAO,EAGL,iBAAiB,EAMlB,MAAM,OAAO,CAAC;AAEf,OAAO,EACL,YAAY,EAYb,MAAM,yBAAyB,CAAC;AAQjC,OAAO,KAAK,wBAAwB,MAAM,6BAA6B,CAAC;AAExE,QAAA,MAAM,mBAAmB,EAAE,iBAAiB,CAAC,wBAAwB,GAAG,YAAY,CA8InF,CAAC;AAEF,eAAe,mBAAmB,CAAC"}
|
|
@@ -1,21 +1,23 @@
|
|
|
1
1
|
import { jsx as _jsx, Fragment as _Fragment, jsxs as _jsxs } from "react/jsx-runtime";
|
|
2
2
|
import { forwardRef, useLayoutEffect, useRef, useState } from 'react';
|
|
3
|
-
import { Icon, useI18n, useAfterInitialEffect, Text } from '@pega/cosmos-react-core';
|
|
3
|
+
import { Icon, useI18n, useAfterInitialEffect, Text, Tabs, CardHeader, TabPanel, Flex, Count, Actions } from '@pega/cosmos-react-core';
|
|
4
4
|
import { StyledIntelligentGuidanceList, StyledIntelligentGuidance, StyledNew, StyledBorderLine } from './IntelligentGuidance.styles';
|
|
5
|
-
const IntelligentGuidance = forwardRef(({ items, heading, isCollapsed, onExpandCollapse, ...restProps }, ref) => {
|
|
5
|
+
const IntelligentGuidance = forwardRef(({ items, previousItems, heading, isCollapsed, onExpandCollapse, ...restProps }, ref) => {
|
|
6
6
|
const t = useI18n();
|
|
7
|
-
const
|
|
7
|
+
const headerRef = useRef(null);
|
|
8
8
|
const toggleButtonRef = useRef(null);
|
|
9
|
-
const
|
|
9
|
+
const [currentTab, setCurrentTab] = useState('current');
|
|
10
|
+
const listItems = (currentTab === 'current' ? items : previousItems ?? []).map(item => {
|
|
10
11
|
return {
|
|
11
12
|
id: item.id,
|
|
12
13
|
visual: _jsx(Icon, { name: item.icon }),
|
|
13
14
|
primary: (_jsxs(_Fragment, { children: [item.label, item.new && (_jsxs(_Fragment, { children: [_jsx(StyledNew, { children: t('new') }), _jsx(StyledBorderLine, {})] }))] })),
|
|
14
15
|
secondary: _jsx(Text, { variant: 'secondary', children: item.type }),
|
|
16
|
+
contextualLabel: item.label,
|
|
15
17
|
actions: item.onDismiss
|
|
16
18
|
? [
|
|
17
19
|
{
|
|
18
|
-
text: t('
|
|
20
|
+
text: t('dismiss'),
|
|
19
21
|
id: item.id,
|
|
20
22
|
icon: 'times',
|
|
21
23
|
onClick: (id, e) => {
|
|
@@ -39,10 +41,10 @@ const IntelligentGuidance = forwardRef(({ items, heading, isCollapsed, onExpandC
|
|
|
39
41
|
});
|
|
40
42
|
const [headerHeight, setHeaderHeight] = useState(0);
|
|
41
43
|
useLayoutEffect(() => {
|
|
42
|
-
if (
|
|
43
|
-
setHeaderHeight(
|
|
44
|
+
if (headerRef.current) {
|
|
45
|
+
setHeaderHeight(headerRef.current?.offsetHeight || 0);
|
|
44
46
|
}
|
|
45
|
-
}, [
|
|
47
|
+
}, [headerRef.current]);
|
|
46
48
|
// FIXME: This is a hack to get the Tooltip to reset its position when the list is toggled.
|
|
47
49
|
useAfterInitialEffect(() => {
|
|
48
50
|
if (toggleButtonRef.current && toggleButtonRef.current === document.activeElement) {
|
|
@@ -52,18 +54,30 @@ const IntelligentGuidance = forwardRef(({ items, heading, isCollapsed, onExpandC
|
|
|
52
54
|
}, 1000);
|
|
53
55
|
}
|
|
54
56
|
}, [isCollapsed]);
|
|
55
|
-
|
|
56
|
-
|
|
57
|
-
|
|
58
|
-
|
|
59
|
-
|
|
60
|
-
|
|
61
|
-
|
|
62
|
-
|
|
63
|
-
|
|
64
|
-
|
|
65
|
-
|
|
66
|
-
|
|
57
|
+
const intelligentGuidanceList = (_jsx(StyledIntelligentGuidanceList, { items: listItems, noItemsText: t('no_recommendations') }));
|
|
58
|
+
return (_jsxs(StyledIntelligentGuidance, { ...restProps, ref: ref, role: 'region', "aria-live": 'polite', "aria-relevant": 'all', isCollapsed: isCollapsed, hasItems: !!items.length, style: { '--headerHeight': `${headerHeight}px` }, children: [_jsxs(CardHeader, { ref: headerRef, children: [_jsxs(Flex, { container: { alignItems: 'center', gap: 1 }, children: [_jsx(Text, { variant: 'h2', children: heading }), _jsx(Count, { children: items.length + (previousItems?.length ?? 0) })] }), _jsx(Actions, { items: [
|
|
59
|
+
{
|
|
60
|
+
text: t(isCollapsed ? 'expand' : 'collapse'),
|
|
61
|
+
id: 'IntelligentGuidanceButton',
|
|
62
|
+
icon: 'caret-down',
|
|
63
|
+
'aria-label': isCollapsed
|
|
64
|
+
? t('expand_noun', [heading])
|
|
65
|
+
: t('collapse_noun', [heading]),
|
|
66
|
+
onClick: onExpandCollapse,
|
|
67
|
+
ref: toggleButtonRef
|
|
68
|
+
}
|
|
69
|
+
] })] }), previousItems ? (_jsxs(_Fragment, { children: [_jsx(Tabs, { tabs: [
|
|
70
|
+
{
|
|
71
|
+
id: 'current',
|
|
72
|
+
name: t('current'),
|
|
73
|
+
count: items.filter(item => item.new).length || undefined
|
|
74
|
+
},
|
|
75
|
+
{
|
|
76
|
+
id: 'previous',
|
|
77
|
+
name: t('previous'),
|
|
78
|
+
count: previousItems.filter(item => item.new).length || undefined
|
|
79
|
+
}
|
|
80
|
+
], currentTabId: currentTab, onTabClick: setCurrentTab }), _jsx(TabPanel, { tabId: currentTab, children: intelligentGuidanceList })] })) : (intelligentGuidanceList)] }));
|
|
67
81
|
});
|
|
68
82
|
export default IntelligentGuidance;
|
|
69
83
|
//# sourceMappingURL=IntelligentGuidance.js.map
|
|
@@ -1 +1 @@
|
|
|
1
|
-
{"version":3,"file":"IntelligentGuidance.js","sourceRoot":"","sources":["../../../src/components/IntelligentGuidance/IntelligentGuidance.tsx"],"names":[],"mappings":";AAAA,OAAO,
|
|
1
|
+
{"version":3,"file":"IntelligentGuidance.js","sourceRoot":"","sources":["../../../src/components/IntelligentGuidance/IntelligentGuidance.tsx"],"names":[],"mappings":"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","sourcesContent":["import {\n CSSProperties,\n forwardRef,\n FunctionComponent,\n KeyboardEvent,\n PropsWithoutRef,\n useLayoutEffect,\n useRef,\n useState\n} from 'react';\n\nimport {\n ForwardProps,\n Icon,\n SummaryListItem,\n useI18n,\n useAfterInitialEffect,\n Text,\n Tabs,\n CardHeader,\n TabPanel,\n Flex,\n Count,\n Actions\n} from '@pega/cosmos-react-core';\n\nimport {\n StyledIntelligentGuidanceList,\n StyledIntelligentGuidance,\n StyledNew,\n StyledBorderLine\n} from './IntelligentGuidance.styles';\nimport type IntelligentGuidanceProps from './IntelligentGuidance.types';\n\nconst IntelligentGuidance: FunctionComponent<IntelligentGuidanceProps & ForwardProps> = forwardRef(\n (\n {\n items,\n previousItems,\n heading,\n isCollapsed,\n onExpandCollapse,\n ...restProps\n }: PropsWithoutRef<IntelligentGuidanceProps>,\n ref: IntelligentGuidanceProps['ref']\n ) => {\n const t = useI18n();\n const headerRef = useRef<HTMLDivElement>(null);\n const toggleButtonRef = useRef<HTMLButtonElement>(null);\n const [currentTab, setCurrentTab] = useState('current');\n\n const listItems: SummaryListItem[] = (\n currentTab === 'current' ? items : previousItems ?? []\n ).map(item => {\n return {\n id: item.id,\n visual: <Icon name={item.icon} />,\n primary: (\n <>\n {item.label}\n {item.new && (\n <>\n <StyledNew>{t('new')}</StyledNew>\n {/* Can remove StyledBorderLine when Firefox supports :has selector. */}\n <StyledBorderLine />\n </>\n )}\n </>\n ),\n secondary: <Text variant='secondary'>{item.type}</Text>,\n contextualLabel: item.label,\n actions: item.onDismiss\n ? [\n {\n text: t('dismiss'),\n id: item.id,\n icon: 'times',\n onClick: (id, e) => {\n e.stopPropagation();\n item.onDismiss?.(id, e);\n }\n }\n ]\n : undefined,\n container: { colGap: 1 },\n role: 'button',\n tabIndex: 0,\n 'aria-label': t('continue_label_a11y', [item.label]),\n onClick: item.onClick,\n onKeyDown: (e: KeyboardEvent) => {\n if (e.key === 'Enter') {\n item.onClick(e);\n }\n }\n };\n });\n\n const [headerHeight, setHeaderHeight] = useState(0);\n\n useLayoutEffect(() => {\n if (headerRef.current) {\n setHeaderHeight(headerRef.current?.offsetHeight || 0);\n }\n }, [headerRef.current]);\n\n // FIXME: This is a hack to get the Tooltip to reset its position when the list is toggled.\n useAfterInitialEffect(() => {\n if (toggleButtonRef.current && toggleButtonRef.current === document.activeElement) {\n toggleButtonRef.current.blur();\n setTimeout(() => {\n toggleButtonRef.current?.focus();\n }, 1000);\n }\n }, [isCollapsed]);\n\n const intelligentGuidanceList = (\n <StyledIntelligentGuidanceList items={listItems} noItemsText={t('no_recommendations')} />\n );\n\n return (\n <StyledIntelligentGuidance\n {...restProps}\n ref={ref}\n role='region'\n aria-live='polite'\n aria-relevant='all'\n isCollapsed={isCollapsed}\n hasItems={!!items.length}\n style={{ '--headerHeight': `${headerHeight}px` } as CSSProperties}\n >\n <CardHeader ref={headerRef}>\n <Flex container={{ alignItems: 'center', gap: 1 }}>\n <Text variant='h2'>{heading}</Text>\n <Count>{items.length + (previousItems?.length ?? 0)}</Count>\n </Flex>\n <Actions\n items={[\n {\n text: t(isCollapsed ? 'expand' : 'collapse'),\n id: 'IntelligentGuidanceButton',\n icon: 'caret-down',\n 'aria-label': isCollapsed\n ? t('expand_noun', [heading])\n : t('collapse_noun', [heading]),\n onClick: onExpandCollapse,\n ref: toggleButtonRef\n }\n ]}\n />\n </CardHeader>\n {previousItems ? (\n <>\n <Tabs\n tabs={[\n {\n id: 'current',\n name: t('current'),\n count: items.filter(item => item.new).length || undefined\n },\n {\n id: 'previous',\n name: t('previous'),\n count: previousItems.filter(item => item.new).length || undefined\n }\n ]}\n currentTabId={currentTab}\n onTabClick={setCurrentTab}\n />\n <TabPanel tabId={currentTab}>{intelligentGuidanceList}</TabPanel>\n </>\n ) : (\n intelligentGuidanceList\n )}\n </StyledIntelligentGuidance>\n );\n }\n);\n\nexport default IntelligentGuidance;\n"]}
|
|
@@ -5,5 +5,5 @@ export interface StyledIntelligentGuidanceProps {
|
|
|
5
5
|
isCollapsed: boolean;
|
|
6
6
|
hasItems: boolean;
|
|
7
7
|
}
|
|
8
|
-
export declare const StyledIntelligentGuidance: import("styled-components").StyledComponent<"
|
|
8
|
+
export declare const StyledIntelligentGuidance: import("styled-components").StyledComponent<"article", import("styled-components").DefaultTheme, Partial<import("@pega/cosmos-react-core").CardProps> & StyledIntelligentGuidanceProps, never>;
|
|
9
9
|
//# sourceMappingURL=IntelligentGuidance.styles.d.ts.map
|
|
@@ -1 +1 @@
|
|
|
1
|
-
{"version":3,"file":"IntelligentGuidance.styles.d.ts","sourceRoot":"","sources":["../../../src/components/IntelligentGuidance/IntelligentGuidance.styles.ts"],"names":[],"mappings":"
|
|
1
|
+
{"version":3,"file":"IntelligentGuidance.styles.d.ts","sourceRoot":"","sources":["../../../src/components/IntelligentGuidance/IntelligentGuidance.styles.ts"],"names":[],"mappings":"AA2BA,eAAO,MAAM,SAAS,mOAmBpB,CAAC;AAIH,eAAO,MAAM,gBAAgB,0GAe3B,CAAC;AAIH,eAAO,MAAM,6BAA6B,2NA6ExC,CAAC;AAIH,MAAM,WAAW,8BAA8B;IAC7C,WAAW,EAAE,OAAO,CAAC;IACrB,QAAQ,EAAE,OAAO,CAAC;CACnB;AAED,eAAO,MAAM,yBAAyB,gMAyFrC,CAAC"}
|
|
@@ -1,8 +1,10 @@
|
|
|
1
1
|
import styled, { css } from 'styled-components';
|
|
2
|
-
import { lighten, readableColor, rgba } from 'polished';
|
|
2
|
+
import { lighten, readableColor, rgba, transparentize } from 'polished';
|
|
3
3
|
import { defaultThemeProp, StyledButton, StyledCard, StyledFlex, StyledIcon, StyledEmptyState, SummaryList, StyledText, tryCatch, StyledSummaryItem, StyledVisual, readableHue, Text, calculateFontSize, StyledSecondary } from '@pega/cosmos-react-core';
|
|
4
4
|
import { StyledCardHeader } from '@pega/cosmos-react-core/lib/components/Card/CardHeader';
|
|
5
|
-
import {
|
|
5
|
+
import { StyledTabs } from '@pega/cosmos-react-core/lib/components/Tabs/Tabs';
|
|
6
|
+
import { StyledTab } from '@pega/cosmos-react-core/lib/components/Tabs/Tab';
|
|
7
|
+
import { StyledCount } from '@pega/cosmos-react-core/lib/components/Badges/Count';
|
|
6
8
|
const itemIconSize = '2rem';
|
|
7
9
|
export const StyledNew = styled(Text)(({ theme }) => {
|
|
8
10
|
const readableBackground = readableHue(theme.base.palette['brand-primary'], theme.base.palette['primary-background']);
|
|
@@ -39,62 +41,53 @@ export const StyledIntelligentGuidanceList = styled(SummaryList)(({ theme }) =>
|
|
|
39
41
|
const borderColor = tryCatch(() => lighten(0.1, theme.components['app-shell'].nav['background-color']));
|
|
40
42
|
const hoverColor = tryCatch(() => lighten(0.05, theme.components['app-shell'].nav['background-color']));
|
|
41
43
|
const secondaryColor = tryCatch(() => rgba(color, theme.base.transparency['transparent-2']));
|
|
44
|
+
const scrollbarColor = tryCatch(() => rgba(color, theme.base.transparency['transparent-3']));
|
|
42
45
|
return css `
|
|
43
|
-
|
|
44
|
-
|
|
45
|
-
|
|
46
|
-
|
|
47
|
-
|
|
48
|
-
@media (min-width: ${theme.base.breakpoints.lg}) {
|
|
49
|
-
min-width: 23rem;
|
|
50
|
-
max-width: 23rem;
|
|
46
|
+
max-height: min(calc(100vh - var(--headerHeight) - 4ch), 21ch);
|
|
47
|
+
overflow: auto;
|
|
48
|
+
|
|
49
|
+
::-webkit-scrollbar-thumb {
|
|
50
|
+
box-shadow: inset 0 0 0.125rem 0.25rem ${scrollbarColor};
|
|
51
51
|
}
|
|
52
|
-
|
|
53
|
-
|
|
54
|
-
|
|
55
|
-
${StyledCardHeader} {
|
|
56
|
-
&:not(${StyledCard} ${StyledCard} > &) {
|
|
57
|
-
padding: ${theme.base.spacing};
|
|
58
|
-
}
|
|
59
|
-
${StyledFlex} > ${StyledIcon} {
|
|
60
|
-
width: ${itemIconSize};
|
|
61
|
-
height: ${itemIconSize};
|
|
62
|
-
padding: calc(0.75 * ${theme.base.spacing});
|
|
63
|
-
border-radius: calc(3 * ${theme.base['border-radius']});
|
|
64
|
-
background-color: ${theme.base.palette.success};
|
|
65
|
-
}
|
|
66
|
-
}
|
|
67
|
-
${StyledSummaryListContent} {
|
|
68
|
-
&:not(${StyledCard} ${StyledCard} > &) {
|
|
69
|
-
padding: 0;
|
|
70
|
-
}
|
|
71
|
-
}
|
|
72
|
-
${StyledButton}:enabled:focus {
|
|
73
|
-
box-shadow: ${theme.base.shadow.focus};
|
|
52
|
+
|
|
53
|
+
::-webkit-scrollbar-thumb:hover {
|
|
54
|
+
box-shadow: inset 0 0 0.125rem 0.25rem ${secondaryColor};
|
|
74
55
|
}
|
|
56
|
+
|
|
57
|
+
${theme.base.animation.timing.ease};
|
|
58
|
+
|
|
75
59
|
${StyledSummaryItem} {
|
|
76
60
|
position: relative;
|
|
77
61
|
padding: ${theme.base.spacing};
|
|
78
|
-
border-top: ${theme.components.button['border-width']} solid ${borderColor};
|
|
79
62
|
outline: none;
|
|
63
|
+
|
|
64
|
+
&:not(:first-of-type) {
|
|
65
|
+
border-top: ${theme.components.button['border-width']} solid ${borderColor};
|
|
66
|
+
}
|
|
67
|
+
|
|
80
68
|
${StyledVisual} ${StyledIcon} {
|
|
81
69
|
width: ${itemIconSize};
|
|
82
70
|
height: ${itemIconSize};
|
|
83
71
|
padding: calc(0.75 * ${theme.base.spacing});
|
|
84
72
|
}
|
|
73
|
+
|
|
85
74
|
${StyledButton} {
|
|
86
75
|
visibility: hidden;
|
|
87
76
|
}
|
|
77
|
+
|
|
88
78
|
${StyledSecondary} ${StyledText} {
|
|
89
79
|
color: ${secondaryColor};
|
|
90
80
|
}
|
|
81
|
+
|
|
91
82
|
&:not(:last-child) {
|
|
92
83
|
border-bottom: none;
|
|
93
84
|
}
|
|
85
|
+
|
|
94
86
|
&:hover {
|
|
95
87
|
background-color: ${hoverColor};
|
|
96
88
|
cursor: pointer;
|
|
97
89
|
}
|
|
90
|
+
|
|
98
91
|
&:hover,
|
|
99
92
|
&:focus,
|
|
100
93
|
&:focus-within {
|
|
@@ -107,8 +100,9 @@ export const StyledIntelligentGuidanceList = styled(SummaryList)(({ theme }) =>
|
|
|
107
100
|
box-shadow: ${theme.base.shadow['focus-inset']};
|
|
108
101
|
}
|
|
109
102
|
}
|
|
103
|
+
|
|
110
104
|
${StyledEmptyState} {
|
|
111
|
-
padding-
|
|
105
|
+
padding-block: ${theme.base.spacing};
|
|
112
106
|
${StyledIcon}, ${StyledText} {
|
|
113
107
|
color: ${color};
|
|
114
108
|
}
|
|
@@ -116,28 +110,88 @@ export const StyledIntelligentGuidanceList = styled(SummaryList)(({ theme }) =>
|
|
|
116
110
|
`;
|
|
117
111
|
});
|
|
118
112
|
StyledIntelligentGuidanceList.defaultProps = defaultThemeProp;
|
|
119
|
-
export const StyledIntelligentGuidance = styled
|
|
113
|
+
export const StyledIntelligentGuidance = styled(StyledCard)(({ theme, isCollapsed }) => {
|
|
114
|
+
const color = theme.base.palette.light;
|
|
115
|
+
const borderColor = tryCatch(() => lighten(0.1, theme.components['app-shell'].nav['background-color']));
|
|
116
|
+
const tabPrimaryColor = theme.base.colors.blue.light;
|
|
117
|
+
const lightenedTabColor = tryCatch(() => transparentize(0.3, tabPrimaryColor)) ?? '';
|
|
120
118
|
return css `
|
|
121
119
|
position: fixed;
|
|
122
120
|
inset-inline-start: calc(2 * ${theme.base.spacing} + var(--appshell-horizontal-offset, 0rem));
|
|
123
121
|
transition: inset-inline-start ${theme.base.animation.speed}
|
|
124
|
-
|
|
122
|
+
${theme.base.animation.timing.ease},
|
|
123
|
+
transform calc(4 * ${theme.base.animation.speed}) ${theme.base.animation.timing.ease};
|
|
125
124
|
bottom: 0;
|
|
126
125
|
z-index: ${theme.base['z-index'].popover};
|
|
127
|
-
|
|
126
|
+
min-width: 20rem;
|
|
127
|
+
max-width: 20rem;
|
|
128
|
+
color: ${color};
|
|
129
|
+
overflow: hidden;
|
|
130
|
+
box-shadow: ${theme.base.shadow.low};
|
|
131
|
+
|
|
132
|
+
@media (min-width: ${theme.base.breakpoints.lg}) {
|
|
133
|
+
min-width: 23rem;
|
|
134
|
+
max-width: 23rem;
|
|
135
|
+
}
|
|
136
|
+
|
|
137
|
+
${isCollapsed &&
|
|
138
|
+
css `
|
|
139
|
+
transform: translateY(calc(100% - var(--headerHeight)));
|
|
140
|
+
`}
|
|
141
|
+
|
|
142
|
+
&:not(& &) {
|
|
143
|
+
background-color: ${theme.components['app-shell'].nav['background-color']};
|
|
128
144
|
border-bottom-left-radius: 0;
|
|
129
145
|
border-bottom-right-radius: 0;
|
|
130
|
-
|
|
131
|
-
|
|
132
|
-
${
|
|
133
|
-
css `
|
|
134
|
-
transform: translateY(calc(100% - var(--headerHeight)));
|
|
135
|
-
`}
|
|
136
|
-
${StyledCardHeader} ${StyledButton} {
|
|
146
|
+
}
|
|
147
|
+
${StyledCardHeader} {
|
|
148
|
+
& ${StyledButton} {
|
|
137
149
|
transition: transform calc(2 * ${theme.base.animation.speed})
|
|
138
150
|
${theme.base.animation.timing.ease};
|
|
139
151
|
transform: ${isCollapsed ? 'rotate(-180deg)' : 'rotate(0)'};
|
|
140
152
|
}
|
|
153
|
+
|
|
154
|
+
&:not(${StyledCard} ${StyledCard} > &) {
|
|
155
|
+
padding: ${theme.base.spacing};
|
|
156
|
+
}
|
|
157
|
+
|
|
158
|
+
${StyledFlex} > ${StyledIcon} {
|
|
159
|
+
width: ${itemIconSize};
|
|
160
|
+
height: ${itemIconSize};
|
|
161
|
+
padding: calc(0.75 * ${theme.base.spacing});
|
|
162
|
+
border-radius: calc(3 * ${theme.base['border-radius']});
|
|
163
|
+
background-color: ${theme.base.palette.success};
|
|
164
|
+
}
|
|
165
|
+
}
|
|
166
|
+
|
|
167
|
+
${StyledTabs} {
|
|
168
|
+
padding-inline: ${theme.base.spacing};
|
|
169
|
+
border-block: 0.0625rem solid ${borderColor};
|
|
170
|
+
${StyledTab} {
|
|
171
|
+
flex: 1;
|
|
172
|
+
justify-content: center;
|
|
173
|
+
${StyledCount} {
|
|
174
|
+
background-color: ${theme.base.palette.urgent};
|
|
175
|
+
}
|
|
176
|
+
span {
|
|
177
|
+
color: ${color};
|
|
178
|
+
}
|
|
179
|
+
::after {
|
|
180
|
+
background-color: ${lightenedTabColor};
|
|
181
|
+
}
|
|
182
|
+
&[aria-selected='true'] {
|
|
183
|
+
span:not(${StyledCount}) {
|
|
184
|
+
color: ${tabPrimaryColor};
|
|
185
|
+
}
|
|
186
|
+
::after {
|
|
187
|
+
background-color: ${tabPrimaryColor};
|
|
188
|
+
}
|
|
189
|
+
}
|
|
190
|
+
}
|
|
191
|
+
}
|
|
192
|
+
|
|
193
|
+
${StyledButton}:enabled:focus {
|
|
194
|
+
box-shadow: ${theme.base.shadow.focus};
|
|
141
195
|
}
|
|
142
196
|
`;
|
|
143
197
|
});
|
|
@@ -1 +1 @@
|
|
|
1
|
-
{"version":3,"file":"IntelligentGuidance.styles.js","sourceRoot":"","sources":["../../../src/components/IntelligentGuidance/IntelligentGuidance.styles.ts"],"names":[],"mappings":"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","sourcesContent":["import styled, { css } from 'styled-components';\nimport { lighten, readableColor, rgba } from 'polished';\n\nimport {\n defaultThemeProp,\n StyledButton,\n StyledCard,\n StyledFlex,\n StyledIcon,\n StyledEmptyState,\n SummaryList,\n StyledText,\n tryCatch,\n StyledSummaryItem,\n StyledVisual,\n readableHue,\n Text,\n calculateFontSize,\n StyledSecondary\n} from '@pega/cosmos-react-core';\nimport { StyledCardHeader } from '@pega/cosmos-react-core/lib/components/Card/CardHeader';\nimport { StyledSummaryListContent } from '@pega/cosmos-react-core/lib/components/SummaryList/SummaryList';\n\nconst itemIconSize = '2rem';\n\nexport const StyledNew = styled(Text)(({ theme }) => {\n const readableBackground = readableHue(\n theme.base.palette['brand-primary'],\n theme.base.palette['primary-background']\n );\n const readableTextColor = readableColor(readableBackground);\n const fontSize = calculateFontSize(theme.base['font-size'], theme.base['font-scale']);\n\n return css`\n position: absolute;\n inset-block-start: 0;\n inset-inline-start: 0;\n text-transform: uppercase;\n background-color: ${readableBackground};\n color: ${readableTextColor};\n padding-inline: calc(0.75 * ${theme.base.spacing});\n font-size: ${fontSize.xxs};\n font-weight: ${theme.base['font-weight']['semi-bold']};\n `;\n});\n\nStyledNew.defaultProps = defaultThemeProp;\n\nexport const StyledBorderLine = styled.span(({ theme }) => {\n const readableBackground = readableHue(\n theme.base.palette['brand-primary'],\n theme.base.palette['primary-background']\n );\n\n return css`\n position: absolute;\n inset-block-start: 0;\n inset-inline-start: 0;\n content: '';\n background-color: ${readableBackground};\n height: 100%;\n width: 0.125rem;\n `;\n});\n\nStyledBorderLine.defaultProps = defaultThemeProp;\n\nexport const StyledIntelligentGuidanceList = styled(SummaryList)(({ theme }) => {\n const color = theme.base.palette.light;\n const borderColor = tryCatch(() =>\n lighten(0.1, theme.components['app-shell'].nav['background-color'])\n );\n const hoverColor = tryCatch(() =>\n lighten(0.05, theme.components['app-shell'].nav['background-color'])\n );\n const secondaryColor = tryCatch(() => rgba(color, theme.base.transparency['transparent-2']));\n\n return css`\n min-width: 20rem;\n max-width: 20rem;\n color: ${color};\n overflow: hidden;\n box-shadow: ${theme.base.shadow.low};\n @media (min-width: ${theme.base.breakpoints.lg}) {\n min-width: 23rem;\n max-width: 23rem;\n }\n &:not(& &) {\n background-color: ${theme.components['app-shell'].nav['background-color']};\n }\n ${StyledCardHeader} {\n &:not(${StyledCard} ${StyledCard} > &) {\n padding: ${theme.base.spacing};\n }\n ${StyledFlex} > ${StyledIcon} {\n width: ${itemIconSize};\n height: ${itemIconSize};\n padding: calc(0.75 * ${theme.base.spacing});\n border-radius: calc(3 * ${theme.base['border-radius']});\n background-color: ${theme.base.palette.success};\n }\n }\n ${StyledSummaryListContent} {\n &:not(${StyledCard} ${StyledCard} > &) {\n padding: 0;\n }\n }\n ${StyledButton}:enabled:focus {\n box-shadow: ${theme.base.shadow.focus};\n }\n ${StyledSummaryItem} {\n position: relative;\n padding: ${theme.base.spacing};\n border-top: ${theme.components.button['border-width']} solid ${borderColor};\n outline: none;\n ${StyledVisual} ${StyledIcon} {\n width: ${itemIconSize};\n height: ${itemIconSize};\n padding: calc(0.75 * ${theme.base.spacing});\n }\n ${StyledButton} {\n visibility: hidden;\n }\n ${StyledSecondary} ${StyledText} {\n color: ${secondaryColor};\n }\n &:not(:last-child) {\n border-bottom: none;\n }\n &:hover {\n background-color: ${hoverColor};\n cursor: pointer;\n }\n &:hover,\n &:focus,\n &:focus-within {\n ${StyledButton} {\n visibility: visible;\n }\n }\n &:enabled:focus,\n &:not([disabled]):focus {\n box-shadow: ${theme.base.shadow['focus-inset']};\n }\n }\n ${StyledEmptyState} {\n padding-bottom: ${theme.base.spacing};\n ${StyledIcon}, ${StyledText} {\n color: ${color};\n }\n }\n `;\n});\n\nStyledIntelligentGuidanceList.defaultProps = defaultThemeProp;\n\nexport interface StyledIntelligentGuidanceProps {\n isCollapsed: boolean;\n hasItems: boolean;\n}\n\nexport const StyledIntelligentGuidance = styled.div<StyledIntelligentGuidanceProps>(\n ({ theme, isCollapsed }) => {\n return css`\n position: fixed;\n inset-inline-start: calc(2 * ${theme.base.spacing} + var(--appshell-horizontal-offset, 0rem));\n transition: inset-inline-start ${theme.base.animation.speed}\n ${theme.base.animation.timing.ease};\n bottom: 0;\n z-index: ${theme.base['z-index'].popover};\n ${StyledIntelligentGuidanceList}:not(${StyledIntelligentGuidanceList} ${StyledIntelligentGuidanceList}) {\n border-bottom-left-radius: 0;\n border-bottom-right-radius: 0;\n transition: transform calc(4 * ${theme.base.animation.speed})\n ${theme.base.animation.timing.ease};\n ${isCollapsed &&\n css`\n transform: translateY(calc(100% - var(--headerHeight)));\n `}\n ${StyledCardHeader} ${StyledButton} {\n transition: transform calc(2 * ${theme.base.animation.speed})\n ${theme.base.animation.timing.ease};\n transform: ${isCollapsed ? 'rotate(-180deg)' : 'rotate(0)'};\n }\n }\n `;\n }\n);\n\nStyledIntelligentGuidance.defaultProps = defaultThemeProp;\n"]}
|
|
1
|
+
{"version":3,"file":"IntelligentGuidance.styles.js","sourceRoot":"","sources":["../../../src/components/IntelligentGuidance/IntelligentGuidance.styles.ts"],"names":[],"mappings":"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","sourcesContent":["import styled, { css } from 'styled-components';\nimport { lighten, readableColor, rgba, transparentize } from 'polished';\n\nimport {\n defaultThemeProp,\n StyledButton,\n StyledCard,\n StyledFlex,\n StyledIcon,\n StyledEmptyState,\n SummaryList,\n StyledText,\n tryCatch,\n StyledSummaryItem,\n StyledVisual,\n readableHue,\n Text,\n calculateFontSize,\n StyledSecondary\n} from '@pega/cosmos-react-core';\nimport { StyledCardHeader } from '@pega/cosmos-react-core/lib/components/Card/CardHeader';\nimport { StyledTabs } from '@pega/cosmos-react-core/lib/components/Tabs/Tabs';\nimport { StyledTab } from '@pega/cosmos-react-core/lib/components/Tabs/Tab';\nimport { StyledCount } from '@pega/cosmos-react-core/lib/components/Badges/Count';\n\nconst itemIconSize = '2rem';\n\nexport const StyledNew = styled(Text)(({ theme }) => {\n const readableBackground = readableHue(\n theme.base.palette['brand-primary'],\n theme.base.palette['primary-background']\n );\n const readableTextColor = readableColor(readableBackground);\n const fontSize = calculateFontSize(theme.base['font-size'], theme.base['font-scale']);\n\n return css`\n position: absolute;\n inset-block-start: 0;\n inset-inline-start: 0;\n text-transform: uppercase;\n background-color: ${readableBackground};\n color: ${readableTextColor};\n padding-inline: calc(0.75 * ${theme.base.spacing});\n font-size: ${fontSize.xxs};\n font-weight: ${theme.base['font-weight']['semi-bold']};\n `;\n});\n\nStyledNew.defaultProps = defaultThemeProp;\n\nexport const StyledBorderLine = styled.span(({ theme }) => {\n const readableBackground = readableHue(\n theme.base.palette['brand-primary'],\n theme.base.palette['primary-background']\n );\n\n return css`\n position: absolute;\n inset-block-start: 0;\n inset-inline-start: 0;\n content: '';\n background-color: ${readableBackground};\n height: 100%;\n width: 0.125rem;\n `;\n});\n\nStyledBorderLine.defaultProps = defaultThemeProp;\n\nexport const StyledIntelligentGuidanceList = styled(SummaryList)(({ theme }) => {\n const color = theme.base.palette.light;\n const borderColor = tryCatch(() =>\n lighten(0.1, theme.components['app-shell'].nav['background-color'])\n );\n const hoverColor = tryCatch(() =>\n lighten(0.05, theme.components['app-shell'].nav['background-color'])\n );\n const secondaryColor = tryCatch(() => rgba(color, theme.base.transparency['transparent-2']));\n const scrollbarColor = tryCatch(() => rgba(color, theme.base.transparency['transparent-3']));\n\n return css`\n max-height: min(calc(100vh - var(--headerHeight) - 4ch), 21ch);\n overflow: auto;\n\n ::-webkit-scrollbar-thumb {\n box-shadow: inset 0 0 0.125rem 0.25rem ${scrollbarColor};\n }\n\n ::-webkit-scrollbar-thumb:hover {\n box-shadow: inset 0 0 0.125rem 0.25rem ${secondaryColor};\n }\n\n ${theme.base.animation.timing.ease};\n\n ${StyledSummaryItem} {\n position: relative;\n padding: ${theme.base.spacing};\n outline: none;\n\n &:not(:first-of-type) {\n border-top: ${theme.components.button['border-width']} solid ${borderColor};\n }\n\n ${StyledVisual} ${StyledIcon} {\n width: ${itemIconSize};\n height: ${itemIconSize};\n padding: calc(0.75 * ${theme.base.spacing});\n }\n\n ${StyledButton} {\n visibility: hidden;\n }\n\n ${StyledSecondary} ${StyledText} {\n color: ${secondaryColor};\n }\n\n &:not(:last-child) {\n border-bottom: none;\n }\n\n &:hover {\n background-color: ${hoverColor};\n cursor: pointer;\n }\n\n &:hover,\n &:focus,\n &:focus-within {\n ${StyledButton} {\n visibility: visible;\n }\n }\n &:enabled:focus,\n &:not([disabled]):focus {\n box-shadow: ${theme.base.shadow['focus-inset']};\n }\n }\n\n ${StyledEmptyState} {\n padding-block: ${theme.base.spacing};\n ${StyledIcon}, ${StyledText} {\n color: ${color};\n }\n }\n `;\n});\n\nStyledIntelligentGuidanceList.defaultProps = defaultThemeProp;\n\nexport interface StyledIntelligentGuidanceProps {\n isCollapsed: boolean;\n hasItems: boolean;\n}\n\nexport const StyledIntelligentGuidance = styled(StyledCard)<StyledIntelligentGuidanceProps>(\n ({ theme, isCollapsed }) => {\n const color = theme.base.palette.light;\n const borderColor = tryCatch(() =>\n lighten(0.1, theme.components['app-shell'].nav['background-color'])\n );\n const tabPrimaryColor = theme.base.colors.blue.light;\n const lightenedTabColor = tryCatch(() => transparentize(0.3, tabPrimaryColor)) ?? '';\n\n return css`\n position: fixed;\n inset-inline-start: calc(2 * ${theme.base.spacing} + var(--appshell-horizontal-offset, 0rem));\n transition: inset-inline-start ${theme.base.animation.speed}\n ${theme.base.animation.timing.ease},\n transform calc(4 * ${theme.base.animation.speed}) ${theme.base.animation.timing.ease};\n bottom: 0;\n z-index: ${theme.base['z-index'].popover};\n min-width: 20rem;\n max-width: 20rem;\n color: ${color};\n overflow: hidden;\n box-shadow: ${theme.base.shadow.low};\n\n @media (min-width: ${theme.base.breakpoints.lg}) {\n min-width: 23rem;\n max-width: 23rem;\n }\n\n ${isCollapsed &&\n css`\n transform: translateY(calc(100% - var(--headerHeight)));\n `}\n\n &:not(& &) {\n background-color: ${theme.components['app-shell'].nav['background-color']};\n border-bottom-left-radius: 0;\n border-bottom-right-radius: 0;\n }\n ${StyledCardHeader} {\n & ${StyledButton} {\n transition: transform calc(2 * ${theme.base.animation.speed})\n ${theme.base.animation.timing.ease};\n transform: ${isCollapsed ? 'rotate(-180deg)' : 'rotate(0)'};\n }\n\n &:not(${StyledCard} ${StyledCard} > &) {\n padding: ${theme.base.spacing};\n }\n\n ${StyledFlex} > ${StyledIcon} {\n width: ${itemIconSize};\n height: ${itemIconSize};\n padding: calc(0.75 * ${theme.base.spacing});\n border-radius: calc(3 * ${theme.base['border-radius']});\n background-color: ${theme.base.palette.success};\n }\n }\n\n ${StyledTabs} {\n padding-inline: ${theme.base.spacing};\n border-block: 0.0625rem solid ${borderColor};\n ${StyledTab} {\n flex: 1;\n justify-content: center;\n ${StyledCount} {\n background-color: ${theme.base.palette.urgent};\n }\n span {\n color: ${color};\n }\n ::after {\n background-color: ${lightenedTabColor};\n }\n &[aria-selected='true'] {\n span:not(${StyledCount}) {\n color: ${tabPrimaryColor};\n }\n ::after {\n background-color: ${tabPrimaryColor};\n }\n }\n }\n }\n\n ${StyledButton}:enabled:focus {\n box-shadow: ${theme.base.shadow.focus};\n }\n `;\n }\n);\n\nStyledIntelligentGuidance.defaultProps = defaultThemeProp;\n"]}
|
|
@@ -21,6 +21,8 @@ export interface IntelligentGuidanceItemProps {
|
|
|
21
21
|
export default interface IntelligentGuidanceProps extends BaseProps, NoChildrenProp {
|
|
22
22
|
/** List of guidance items. */
|
|
23
23
|
items: IntelligentGuidanceItemProps[];
|
|
24
|
+
/** List of guidance previous items. */
|
|
25
|
+
previousItems?: IntelligentGuidanceItemProps[];
|
|
24
26
|
/** Header text. */
|
|
25
27
|
heading: string;
|
|
26
28
|
/** Flag that indicates if intelligent guidance is collapsed */
|
|
@@ -1 +1 @@
|
|
|
1
|
-
{"version":3,"file":"IntelligentGuidance.types.d.ts","sourceRoot":"","sources":["../../../src/components/IntelligentGuidance/IntelligentGuidance.types.ts"],"names":[],"mappings":"AAAA,OAAO,EAAE,UAAU,EAAE,aAAa,EAAE,GAAG,EAAE,MAAM,OAAO,CAAC;AAEvD,OAAO,EAAE,SAAS,EAAE,SAAS,EAAE,cAAc,EAAE,MAAM,yBAAyB,CAAC;AAE/E,MAAM,WAAW,4BAA4B;IAC3C,yBAAyB;IACzB,EAAE,EAAE,MAAM,CAAC;IACX,kCAAkC;IAClC,KAAK,EAAE,MAAM,CAAC;IACd,mEAAmE;IACnE,IAAI,EAAE,SAAS,CAAC,MAAM,CAAC,CAAC;IACxB,kCAAkC;IAClC,IAAI,EAAE,MAAM,CAAC;IACb,2CAA2C;IAC3C,OAAO,EAAE,CAAC,CAAC,EAAE,UAAU,GAAG,aAAa,KAAK,IAAI,CAAC;IACjD,6CAA6C;IAC7C,SAAS,CAAC,EAAE,CACV,EAAE,EAAE,4BAA4B,CAAC,IAAI,CAAC,EACtC,CAAC,EAAE,UAAU,CAAC,iBAAiB,GAAG,iBAAiB,GAAG,gBAAgB,CAAC,KACpE,IAAI,CAAC;IACV;;OAEG;IACH,GAAG,CAAC,EAAE,OAAO,CAAC;CACf;AAED,MAAM,CAAC,OAAO,WAAW,wBAAyB,SAAQ,SAAS,EAAE,cAAc;IACjF,8BAA8B;IAC9B,KAAK,EAAE,4BAA4B,EAAE,CAAC;IACtC,mBAAmB;IACnB,OAAO,EAAE,MAAM,CAAC;IAChB,+DAA+D;IAC/D,WAAW,EAAE,OAAO,CAAC;IACrB,sDAAsD;IACtD,gBAAgB,EAAE,MAAM,IAAI,CAAC;IAC7B,oCAAoC;IACpC,GAAG,CAAC,EAAE,GAAG,CAAC,cAAc,CAAC,CAAC;CAC3B"}
|
|
1
|
+
{"version":3,"file":"IntelligentGuidance.types.d.ts","sourceRoot":"","sources":["../../../src/components/IntelligentGuidance/IntelligentGuidance.types.ts"],"names":[],"mappings":"AAAA,OAAO,EAAE,UAAU,EAAE,aAAa,EAAE,GAAG,EAAE,MAAM,OAAO,CAAC;AAEvD,OAAO,EAAE,SAAS,EAAE,SAAS,EAAE,cAAc,EAAE,MAAM,yBAAyB,CAAC;AAE/E,MAAM,WAAW,4BAA4B;IAC3C,yBAAyB;IACzB,EAAE,EAAE,MAAM,CAAC;IACX,kCAAkC;IAClC,KAAK,EAAE,MAAM,CAAC;IACd,mEAAmE;IACnE,IAAI,EAAE,SAAS,CAAC,MAAM,CAAC,CAAC;IACxB,kCAAkC;IAClC,IAAI,EAAE,MAAM,CAAC;IACb,2CAA2C;IAC3C,OAAO,EAAE,CAAC,CAAC,EAAE,UAAU,GAAG,aAAa,KAAK,IAAI,CAAC;IACjD,6CAA6C;IAC7C,SAAS,CAAC,EAAE,CACV,EAAE,EAAE,4BAA4B,CAAC,IAAI,CAAC,EACtC,CAAC,EAAE,UAAU,CAAC,iBAAiB,GAAG,iBAAiB,GAAG,gBAAgB,CAAC,KACpE,IAAI,CAAC;IACV;;OAEG;IACH,GAAG,CAAC,EAAE,OAAO,CAAC;CACf;AAED,MAAM,CAAC,OAAO,WAAW,wBAAyB,SAAQ,SAAS,EAAE,cAAc;IACjF,8BAA8B;IAC9B,KAAK,EAAE,4BAA4B,EAAE,CAAC;IACtC,uCAAuC;IACvC,aAAa,CAAC,EAAE,4BAA4B,EAAE,CAAC;IAC/C,mBAAmB;IACnB,OAAO,EAAE,MAAM,CAAC;IAChB,+DAA+D;IAC/D,WAAW,EAAE,OAAO,CAAC;IACrB,sDAAsD;IACtD,gBAAgB,EAAE,MAAM,IAAI,CAAC;IAC7B,oCAAoC;IACpC,GAAG,CAAC,EAAE,GAAG,CAAC,cAAc,CAAC,CAAC;CAC3B"}
|
|
@@ -1 +1 @@
|
|
|
1
|
-
{"version":3,"file":"IntelligentGuidance.types.js","sourceRoot":"","sources":["../../../src/components/IntelligentGuidance/IntelligentGuidance.types.ts"],"names":[],"mappings":"","sourcesContent":["import { MouseEvent, KeyboardEvent, Ref } from 'react';\n\nimport { BaseProps, IconProps, NoChildrenProp } from '@pega/cosmos-react-core';\n\nexport interface IntelligentGuidanceItemProps {\n /** Unique id for item */\n id: string;\n /** The label text of the item. */\n label: string;\n /** Name of the icon (to be selected from default Pega icon set) */\n icon: IconProps['name'];\n /** Represents the type of task */\n type: string;\n /** Click handler for the action button. */\n onClick: (e: MouseEvent | KeyboardEvent) => void;\n /** Dismiss handler for the action button. */\n onDismiss?: (\n id: IntelligentGuidanceItemProps['id'],\n e: MouseEvent<HTMLButtonElement | HTMLAnchorElement | HTMLInputElement>\n ) => void;\n /** Flag that indicates if item is new\n * @default false\n */\n new?: boolean;\n}\n\nexport default interface IntelligentGuidanceProps extends BaseProps, NoChildrenProp {\n /** List of guidance items. */\n items: IntelligentGuidanceItemProps[];\n /** Header text. */\n heading: string;\n /** Flag that indicates if intelligent guidance is collapsed */\n isCollapsed: boolean;\n /** Callback when expand/collapse button is clicked */\n onExpandCollapse: () => void;\n /** Ref for the wrapping element. */\n ref?: Ref<HTMLDivElement>;\n}\n"]}
|
|
1
|
+
{"version":3,"file":"IntelligentGuidance.types.js","sourceRoot":"","sources":["../../../src/components/IntelligentGuidance/IntelligentGuidance.types.ts"],"names":[],"mappings":"","sourcesContent":["import { MouseEvent, KeyboardEvent, Ref } from 'react';\n\nimport { BaseProps, IconProps, NoChildrenProp } from '@pega/cosmos-react-core';\n\nexport interface IntelligentGuidanceItemProps {\n /** Unique id for item */\n id: string;\n /** The label text of the item. */\n label: string;\n /** Name of the icon (to be selected from default Pega icon set) */\n icon: IconProps['name'];\n /** Represents the type of task */\n type: string;\n /** Click handler for the action button. */\n onClick: (e: MouseEvent | KeyboardEvent) => void;\n /** Dismiss handler for the action button. */\n onDismiss?: (\n id: IntelligentGuidanceItemProps['id'],\n e: MouseEvent<HTMLButtonElement | HTMLAnchorElement | HTMLInputElement>\n ) => void;\n /** Flag that indicates if item is new\n * @default false\n */\n new?: boolean;\n}\n\nexport default interface IntelligentGuidanceProps extends BaseProps, NoChildrenProp {\n /** List of guidance items. */\n items: IntelligentGuidanceItemProps[];\n /** List of guidance previous items. */\n previousItems?: IntelligentGuidanceItemProps[];\n /** Header text. */\n heading: string;\n /** Flag that indicates if intelligent guidance is collapsed */\n isCollapsed: boolean;\n /** Callback when expand/collapse button is clicked */\n onExpandCollapse: () => void;\n /** Ref for the wrapping element. */\n ref?: Ref<HTMLDivElement>;\n}\n"]}
|
package/package.json
CHANGED
|
@@ -1,6 +1,6 @@
|
|
|
1
1
|
{
|
|
2
2
|
"name": "@pega/cosmos-react-work",
|
|
3
|
-
"version": "4.0.0-dev.15.
|
|
3
|
+
"version": "4.0.0-dev.15.5",
|
|
4
4
|
"author": "Pegasystems",
|
|
5
5
|
"license": "SEE LICENSE IN LICENSE",
|
|
6
6
|
"repository": {
|
|
@@ -20,7 +20,7 @@
|
|
|
20
20
|
"build": "tsc -b"
|
|
21
21
|
},
|
|
22
22
|
"dependencies": {
|
|
23
|
-
"@pega/cosmos-react-core": "4.0.0-dev.15.
|
|
23
|
+
"@pega/cosmos-react-core": "4.0.0-dev.15.5",
|
|
24
24
|
"@types/react": "^16.14.24 || ^17.0.38",
|
|
25
25
|
"@types/react-dom": "^16.9.14 || ^17.0.11",
|
|
26
26
|
"@types/styled-components": "^5.1.26",
|