@pega/cosmos-react-work 3.0.0-dev.21.1 → 3.0.0-dev.23.0
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/CasePreview/CasePreview.d.ts +2 -2
- package/lib/components/CasePreview/CasePreview.d.ts.map +1 -1
- package/lib/components/CasePreview/CasePreview.js +1 -1
- package/lib/components/CasePreview/CasePreview.js.map +1 -1
- package/lib/components/CaseView/CaseHeader.d.ts +4 -0
- package/lib/components/CaseView/CaseHeader.d.ts.map +1 -0
- package/lib/components/CaseView/CaseHeader.js +49 -0
- package/lib/components/CaseView/CaseHeader.js.map +1 -0
- package/lib/components/CaseView/CaseSummary.d.ts +4 -0
- package/lib/components/CaseView/CaseSummary.d.ts.map +1 -0
- package/lib/components/CaseView/CaseSummary.js +13 -0
- package/lib/components/CaseView/CaseSummary.js.map +1 -0
- package/lib/components/CaseView/CaseSummaryFields.d.ts +6 -0
- package/lib/components/CaseView/CaseSummaryFields.d.ts.map +1 -0
- package/lib/components/CaseView/CaseSummaryFields.js +8 -0
- package/lib/components/CaseView/CaseSummaryFields.js.map +1 -0
- package/lib/components/CaseView/CaseView.context.d.ts +5 -0
- package/lib/components/CaseView/CaseView.context.d.ts.map +1 -0
- package/lib/components/CaseView/CaseView.context.js +5 -0
- package/lib/components/CaseView/CaseView.context.js.map +1 -0
- package/lib/components/CaseView/CaseView.d.ts +2 -27
- package/lib/components/CaseView/CaseView.d.ts.map +1 -1
- package/lib/components/CaseView/CaseView.js +210 -190
- package/lib/components/CaseView/CaseView.js.map +1 -1
- package/lib/components/CaseView/CaseView.styles.d.ts +13 -17
- package/lib/components/CaseView/CaseView.styles.d.ts.map +1 -1
- package/lib/components/CaseView/CaseView.styles.js +233 -41
- package/lib/components/CaseView/CaseView.styles.js.map +1 -1
- package/lib/components/CaseView/CaseView.types.d.ts +100 -0
- package/lib/components/CaseView/CaseView.types.d.ts.map +1 -0
- package/lib/components/CaseView/CaseView.types.js +2 -0
- package/lib/components/CaseView/CaseView.types.js.map +1 -0
- package/lib/components/CaseView/UtilitiesSummary.d.ts +4 -6
- package/lib/components/CaseView/UtilitiesSummary.d.ts.map +1 -1
- package/lib/components/CaseView/UtilitiesSummary.js +6 -2
- package/lib/components/CaseView/UtilitiesSummary.js.map +1 -1
- package/lib/components/CaseView/index.d.ts +5 -2
- package/lib/components/CaseView/index.d.ts.map +1 -1
- package/lib/components/CaseView/index.js +4 -1
- package/lib/components/CaseView/index.js.map +1 -1
- package/lib/components/SearchResults/SearchResults.js +2 -2
- package/lib/components/SearchResults/SearchResults.js.map +1 -1
- package/lib/components/Stages/Stages.d.ts.map +1 -1
- package/lib/components/Stages/Stages.js +3 -3
- package/lib/components/Stages/Stages.js.map +1 -1
- package/lib/components/Stakeholders/Stakeholders.d.ts.map +1 -1
- package/lib/components/Stakeholders/Stakeholders.js +3 -3
- package/lib/components/Stakeholders/Stakeholders.js.map +1 -1
- package/lib/components/Tags/Tags.d.ts.map +1 -1
- package/lib/components/Tags/Tags.js +4 -5
- package/lib/components/Tags/Tags.js.map +1 -1
- package/lib/index.d.ts +0 -6
- package/lib/index.d.ts.map +1 -1
- package/lib/index.js +0 -6
- package/lib/index.js.map +1 -1
- package/package.json +2 -2
- package/lib/components/CaseHeader/CaseHeader.d.ts +0 -33
- package/lib/components/CaseHeader/CaseHeader.d.ts.map +0 -1
- package/lib/components/CaseHeader/CaseHeader.js +0 -133
- package/lib/components/CaseHeader/CaseHeader.js.map +0 -1
- package/lib/components/CaseHeader/index.d.ts +0 -4
- package/lib/components/CaseHeader/index.d.ts.map +0 -1
- package/lib/components/CaseHeader/index.js +0 -3
- package/lib/components/CaseHeader/index.js.map +0 -1
- package/lib/components/CaseSummary/CaseSummary.d.ts +0 -36
- package/lib/components/CaseSummary/CaseSummary.d.ts.map +0 -1
- package/lib/components/CaseSummary/CaseSummary.js +0 -131
- package/lib/components/CaseSummary/CaseSummary.js.map +0 -1
- package/lib/components/CaseSummary/index.d.ts +0 -4
- package/lib/components/CaseSummary/index.d.ts.map +0 -1
- package/lib/components/CaseSummary/index.js +0 -3
- package/lib/components/CaseSummary/index.js.map +0 -1
- package/lib/components/CaseSummaryFields/CaseSummaryFields.d.ts +0 -22
- package/lib/components/CaseSummaryFields/CaseSummaryFields.d.ts.map +0 -1
- package/lib/components/CaseSummaryFields/CaseSummaryFields.js +0 -25
- package/lib/components/CaseSummaryFields/CaseSummaryFields.js.map +0 -1
- package/lib/components/CaseSummaryFields/index.d.ts +0 -4
- package/lib/components/CaseSummaryFields/index.d.ts.map +0 -1
- package/lib/components/CaseSummaryFields/index.js +0 -3
- package/lib/components/CaseSummaryFields/index.js.map +0 -1
|
@@ -1,33 +0,0 @@
|
|
|
1
|
-
import { FunctionComponent, ReactElement, Ref } from 'react';
|
|
2
|
-
import { Action, ForwardProps, MenuItemProps, NoChildrenProp } from '@pega/cosmos-react-core';
|
|
3
|
-
export interface CaseHeaderProps extends NoChildrenProp {
|
|
4
|
-
/** Case level actions available in an action menu. */
|
|
5
|
-
actions?: Action[];
|
|
6
|
-
/** Visually promoted case level actions available outside the menu. */
|
|
7
|
-
promotedActions?: Action[];
|
|
8
|
-
/** A callback for when the edit button is clicked */
|
|
9
|
-
onEdit?: () => void;
|
|
10
|
-
/** A Case ID to display in the heading. */
|
|
11
|
-
caseId: string;
|
|
12
|
-
/** A text region for the title of the CaseView. */
|
|
13
|
-
heading: string;
|
|
14
|
-
/** A set of props including an href that will be forwarded to the case heading and caseId. */
|
|
15
|
-
caseLink?: {
|
|
16
|
-
href: string;
|
|
17
|
-
} & ForwardProps;
|
|
18
|
-
/** A set of Link props representing the case parents, rendered as Breadcrumbs. */
|
|
19
|
-
parentCases?: MenuItemProps[];
|
|
20
|
-
/** An icon to serve as a visual for the CaseView. */
|
|
21
|
-
icon?: ReactElement;
|
|
22
|
-
/** Indicates if the current user is following the case. This should be updated based on onFollowedChange. */
|
|
23
|
-
followed?: boolean;
|
|
24
|
-
/** Called when user chooses to follow or unfollow the case. Use this to update followed. */
|
|
25
|
-
onFollowedChange?: (following: boolean) => void;
|
|
26
|
-
/** Ref for the wrapping element. */
|
|
27
|
-
ref?: Ref<HTMLElement>;
|
|
28
|
-
}
|
|
29
|
-
export declare const StyledCaseHeader: import("styled-components").StyledComponent<"header", import("styled-components").DefaultTheme, {}, never>;
|
|
30
|
-
export declare const StyledPromotedActions: import("styled-components").StyledComponent<"div", import("styled-components").DefaultTheme, {}, never>;
|
|
31
|
-
declare const CaseHeader: FunctionComponent<CaseHeaderProps & ForwardProps>;
|
|
32
|
-
export default CaseHeader;
|
|
33
|
-
//# sourceMappingURL=CaseHeader.d.ts.map
|
|
@@ -1 +0,0 @@
|
|
|
1
|
-
{"version":3,"file":"CaseHeader.d.ts","sourceRoot":"","sources":["../../../src/components/CaseHeader/CaseHeader.tsx"],"names":[],"mappings":"AAAA,OAAO,EAEL,iBAAiB,EACjB,YAAY,EACZ,GAAG,EAGJ,MAAM,OAAO,CAAC;AAIf,OAAO,EACL,MAAM,EAUN,YAAY,EAMZ,aAAa,EAIb,cAAc,EAEf,MAAM,yBAAyB,CAAC;AAOjC,MAAM,WAAW,eAAgB,SAAQ,cAAc;IACrD,sDAAsD;IACtD,OAAO,CAAC,EAAE,MAAM,EAAE,CAAC;IACnB,uEAAuE;IACvE,eAAe,CAAC,EAAE,MAAM,EAAE,CAAC;IAC3B,qDAAqD;IACrD,MAAM,CAAC,EAAE,MAAM,IAAI,CAAC;IAMpB,2CAA2C;IAC3C,MAAM,EAAE,MAAM,CAAC;IACf,mDAAmD;IACnD,OAAO,EAAE,MAAM,CAAC;IAChB,8FAA8F;IAC9F,QAAQ,CAAC,EAAE;QAAE,IAAI,EAAE,MAAM,CAAA;KAAE,GAAG,YAAY,CAAC;IAC3C,kFAAkF;IAClF,WAAW,CAAC,EAAE,aAAa,EAAE,CAAC;IAC9B,qDAAqD;IACrD,IAAI,CAAC,EAAE,YAAY,CAAC;IACpB,8GAA8G;IAC9G,QAAQ,CAAC,EAAE,OAAO,CAAC;IACnB,4FAA4F;IAC5F,gBAAgB,CAAC,EAAE,CAAC,SAAS,EAAE,OAAO,KAAK,IAAI,CAAC;IAChD,oCAAoC;IACpC,GAAG,CAAC,EAAE,GAAG,CAAC,WAAW,CAAC,CAAC;CACxB;AAED,eAAO,MAAM,gBAAgB,4GAc3B,CAAC;AA4EH,eAAO,MAAM,qBAAqB,yGAShC,CAAC;AAIH,QAAA,MAAM,UAAU,EAAE,iBAAiB,CAAC,eAAe,GAAG,YAAY,CAkHjE,CAAC;AAEF,eAAe,UAAU,CAAC"}
|
|
@@ -1,133 +0,0 @@
|
|
|
1
|
-
import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
|
|
2
|
-
import { forwardRef } from 'react';
|
|
3
|
-
import styled, { css } from 'styled-components';
|
|
4
|
-
import { hideVisually, parseToHsl, readableColor, transparentize } from 'polished';
|
|
5
|
-
import { Breadcrumbs, Flex, Icon, registerIcon, Text, StyledBreadcrumbs, StyledIcon, StyledPopover, defaultThemeProp, tryCatch, calculateFontSize, Link, StyledButton, StyledText, Button, MenuButton, useI18n, StyledTooltip } from '@pega/cosmos-react-core';
|
|
6
|
-
import { StyledMenu } from '@pega/cosmos-react-core/lib/components/Menu/Menu.styles';
|
|
7
|
-
import * as pencilIcon from '@pega/cosmos-react-core/lib/components/Icon/icons/pencil.icon';
|
|
8
|
-
import * as moreIcon from '@pega/cosmos-react-core/lib/components/Icon/icons/more.icon';
|
|
9
|
-
registerIcon(pencilIcon, moreIcon);
|
|
10
|
-
export const StyledCaseHeader = styled.header(({ theme }) => {
|
|
11
|
-
const color = tryCatch(() => readableColor(theme.base.palette['brand-primary']));
|
|
12
|
-
return css `
|
|
13
|
-
background-color: ${theme.base.palette['brand-primary']};
|
|
14
|
-
color: ${color};
|
|
15
|
-
padding: calc(2 * ${theme.base.spacing});
|
|
16
|
-
position: relative;
|
|
17
|
-
|
|
18
|
-
${StyledMenu} {
|
|
19
|
-
color: ${theme.base.palette['foreground-color']};
|
|
20
|
-
z-index: ${theme.base['z-index'].popover + 1};
|
|
21
|
-
}
|
|
22
|
-
`;
|
|
23
|
-
});
|
|
24
|
-
StyledCaseHeader.defaultProps = defaultThemeProp;
|
|
25
|
-
const StyledCaseIconWrap = styled.div(({ theme }) => {
|
|
26
|
-
const spacing = theme.base.spacing;
|
|
27
|
-
const borderRadius = theme.base['border-radius'];
|
|
28
|
-
const backgroundColor = tryCatch(() => {
|
|
29
|
-
const { lightness } = parseToHsl(theme.base.palette['brand-primary']);
|
|
30
|
-
return lightness > 0.35 ? 'rgba(0, 0, 0, 0.2)' : 'rgba(255, 255, 255, 0.2)';
|
|
31
|
-
});
|
|
32
|
-
return css `
|
|
33
|
-
background: ${backgroundColor};
|
|
34
|
-
border-radius: calc(${borderRadius} / 2);
|
|
35
|
-
width: calc(5 * ${spacing});
|
|
36
|
-
height: calc(5 * ${spacing});
|
|
37
|
-
${StyledIcon} {
|
|
38
|
-
font-size: calc(3 * ${spacing});
|
|
39
|
-
margin: auto;
|
|
40
|
-
}
|
|
41
|
-
`;
|
|
42
|
-
});
|
|
43
|
-
StyledCaseIconWrap.defaultProps = defaultThemeProp;
|
|
44
|
-
const StyledFollowIconWrap = styled.label `
|
|
45
|
-
font-size: 1.25rem;
|
|
46
|
-
input {
|
|
47
|
-
${hideVisually}
|
|
48
|
-
}
|
|
49
|
-
|
|
50
|
-
input:focus + svg {
|
|
51
|
-
box-shadow: ${({ theme }) => theme.base.shadow['focus-inverted']};
|
|
52
|
-
}
|
|
53
|
-
`;
|
|
54
|
-
StyledFollowIconWrap.defaultProps = defaultThemeProp;
|
|
55
|
-
const StyledCaseHeaderText = styled.div(({ theme }) => {
|
|
56
|
-
const color = readableColor(theme.base.palette['brand-primary']);
|
|
57
|
-
const transparentColor = tryCatch(() => transparentize(0.2, color));
|
|
58
|
-
const fontSize = calculateFontSize(theme.base['font-size'], theme.base['font-scale']);
|
|
59
|
-
return css `
|
|
60
|
-
word-break: break-word;
|
|
61
|
-
|
|
62
|
-
${StyledBreadcrumbs} {
|
|
63
|
-
> a,
|
|
64
|
-
> span,
|
|
65
|
-
> button,
|
|
66
|
-
> svg {
|
|
67
|
-
color: ${transparentColor};
|
|
68
|
-
font-size: ${fontSize.s};
|
|
69
|
-
font-weight: normal;
|
|
70
|
-
}
|
|
71
|
-
|
|
72
|
-
> a,
|
|
73
|
-
> button {
|
|
74
|
-
&:focus {
|
|
75
|
-
box-shadow: ${theme.base.shadow['focus-inverted']};
|
|
76
|
-
}
|
|
77
|
-
}
|
|
78
|
-
|
|
79
|
-
${StyledPopover}:not(${StyledTooltip}) {
|
|
80
|
-
color: ${theme.base.palette['foreground-color']};
|
|
81
|
-
}
|
|
82
|
-
}
|
|
83
|
-
|
|
84
|
-
> ${StyledText} > ${StyledButton} {
|
|
85
|
-
color: ${color};
|
|
86
|
-
}
|
|
87
|
-
`;
|
|
88
|
-
});
|
|
89
|
-
StyledCaseHeaderText.defaultProps = defaultThemeProp;
|
|
90
|
-
export const StyledPromotedActions = styled.div(({ theme }) => {
|
|
91
|
-
return css `
|
|
92
|
-
padding: ${theme.base.spacing} calc(2 * ${theme.base.spacing});
|
|
93
|
-
border-bottom: 0.0625rem solid ${theme.base.palette['border-line']};
|
|
94
|
-
|
|
95
|
-
${StyledButton} {
|
|
96
|
-
margin-inline-start: 0;
|
|
97
|
-
}
|
|
98
|
-
`;
|
|
99
|
-
});
|
|
100
|
-
StyledPromotedActions.defaultProps = defaultThemeProp;
|
|
101
|
-
const CaseHeader = forwardRef(({ caseId, heading, caseLink = { href: '' }, parentCases, isMediumOrAbove = true, icon, followed, onFollowedChange, actions = [], promotedActions = [], onEdit, ...restProps }, ref) => {
|
|
102
|
-
const { href, ...restLinkProps } = caseLink;
|
|
103
|
-
const t = useI18n();
|
|
104
|
-
const menuItems = actions.map(action => {
|
|
105
|
-
return {
|
|
106
|
-
...action,
|
|
107
|
-
primary: action.text,
|
|
108
|
-
visual: action.icon ? _jsx(Icon, { name: action.icon }) : null
|
|
109
|
-
};
|
|
110
|
-
});
|
|
111
|
-
return (_jsxs("div", { children: [_jsxs(Flex, { ...restProps, as: StyledCaseHeader, container: { gap: 2, alignItems: 'start' }, ref: ref, children: [icon && (_jsx(Flex, { container: true, item: { shrink: 0 }, as: StyledCaseIconWrap, children: icon })), _jsxs(Flex, { as: StyledCaseHeaderText, container: { direction: 'column' }, item: { grow: 1, shrink: 0, basis: '0' }, children: [_jsx(Text, { variant: 'h1', children: href ? (_jsx(Link, { ...restLinkProps, href: href, children: heading })) : (heading) }), _jsx(Breadcrumbs, { path: [
|
|
112
|
-
...(parentCases || []),
|
|
113
|
-
{ ...restLinkProps, id: caseId, primary: caseId, href }
|
|
114
|
-
] })] }), _jsxs("div", { children: [onEdit && (_jsx(Button, { icon: true, variant: 'simple', onClick: onEdit, label: t('edit'), children: _jsx(Icon, { name: 'pencil' }) })), _jsx(MenuButton, { icon: 'more', iconOnly: true, variant: 'simple', text: t('actions'), menu: {
|
|
115
|
-
items: followed !== undefined
|
|
116
|
-
? [
|
|
117
|
-
{
|
|
118
|
-
id: 'follow',
|
|
119
|
-
primary: followed ? t('unfollow') : t('follow'),
|
|
120
|
-
onClick: () => onFollowedChange?.(!followed)
|
|
121
|
-
},
|
|
122
|
-
...menuItems
|
|
123
|
-
]
|
|
124
|
-
: menuItems,
|
|
125
|
-
scrollAt: 20
|
|
126
|
-
}, popover: isMediumOrAbove
|
|
127
|
-
? {
|
|
128
|
-
portal: true
|
|
129
|
-
}
|
|
130
|
-
: undefined })] })] }), promotedActions.length > 0 ? (_jsx(Flex, { as: StyledPromotedActions, container: { wrap: 'wrap', gap: 1 }, children: promotedActions.map(promotedAction => (_jsx(Button, { variant: 'secondary', onClick: (e) => promotedAction.onClick?.(promotedAction.id, e), children: promotedAction.text }))) })) : null] }));
|
|
131
|
-
});
|
|
132
|
-
export default CaseHeader;
|
|
133
|
-
//# sourceMappingURL=CaseHeader.js.map
|
|
@@ -1 +0,0 @@
|
|
|
1
|
-
{"version":3,"file":"CaseHeader.js","sourceRoot":"","sources":["../../../src/components/CaseHeader/CaseHeader.tsx"],"names":[],"mappings":"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","sourcesContent":["import {\n forwardRef,\n FunctionComponent,\n ReactElement,\n Ref,\n PropsWithoutRef,\n MouseEvent\n} from 'react';\nimport styled, { css } from 'styled-components';\nimport { hideVisually, parseToHsl, readableColor, transparentize } from 'polished';\n\nimport {\n Action,\n Breadcrumbs,\n Flex,\n Icon,\n registerIcon,\n Text,\n StyledBreadcrumbs,\n StyledIcon,\n StyledPopover,\n defaultThemeProp,\n ForwardProps,\n tryCatch,\n calculateFontSize,\n Link,\n StyledButton,\n StyledText,\n MenuItemProps,\n Button,\n MenuButton,\n useI18n,\n NoChildrenProp,\n StyledTooltip\n} from '@pega/cosmos-react-core';\nimport { StyledMenu } from '@pega/cosmos-react-core/lib/components/Menu/Menu.styles';\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\nregisterIcon(pencilIcon, moreIcon);\n\nexport interface CaseHeaderProps extends NoChildrenProp {\n /** Case level actions available in an action menu. */\n actions?: Action[];\n /** Visually promoted case level actions available outside the menu. */\n promotedActions?: Action[];\n /** A callback for when the edit button is clicked */\n onEdit?: () => void;\n /**\n * Indicator for the current size of the users screen.\n * @internal\n */\n isMediumOrAbove?: boolean;\n /** A Case ID to display in the heading. */\n caseId: string;\n /** A text region for the title of the CaseView. */\n heading: string;\n /** A set of props including an href that will be forwarded to the case heading and caseId. */\n caseLink?: { href: string } & ForwardProps;\n /** A set of Link props representing the case parents, rendered as Breadcrumbs. */\n parentCases?: MenuItemProps[];\n /** An icon to serve as a visual for the CaseView. */\n icon?: ReactElement;\n /** Indicates if the current user is following the case. This should be updated based on onFollowedChange. */\n followed?: boolean;\n /** Called when user chooses to follow or unfollow the case. Use this to update followed. */\n onFollowedChange?: (following: boolean) => void;\n /** Ref for the wrapping element. */\n ref?: Ref<HTMLElement>;\n}\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: calc(2 * ${theme.base.spacing});\n position: relative;\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\nconst 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(5 * ${spacing});\n height: calc(5 * ${spacing});\n ${StyledIcon} {\n font-size: calc(3 * ${spacing});\n margin: auto;\n }\n `;\n});\n\nStyledCaseIconWrap.defaultProps = defaultThemeProp;\n\nconst 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-inverted']};\n }\n`;\n\nStyledFollowIconWrap.defaultProps = defaultThemeProp;\n\nconst StyledCaseHeaderText = styled.div(({ theme }) => {\n const color = readableColor(theme.base.palette['brand-primary']);\n const transparentColor = tryCatch(() => transparentize(0.2, color));\n const fontSize = calculateFontSize(theme.base['font-size'], theme.base['font-scale']);\n return css`\n word-break: break-word;\n\n ${StyledBreadcrumbs} {\n > a,\n > span,\n > button,\n > svg {\n color: ${transparentColor};\n font-size: ${fontSize.s};\n font-weight: normal;\n }\n\n > a,\n > button {\n &:focus {\n box-shadow: ${theme.base.shadow['focus-inverted']};\n }\n }\n\n ${StyledPopover}:not(${StyledTooltip}) {\n color: ${theme.base.palette['foreground-color']};\n }\n }\n\n > ${StyledText} > ${StyledButton} {\n color: ${color};\n }\n `;\n});\n\nStyledCaseHeaderText.defaultProps = defaultThemeProp;\n\nexport const StyledPromotedActions = styled.div(({ theme }) => {\n return css`\n padding: ${theme.base.spacing} calc(2 * ${theme.base.spacing});\n border-bottom: 0.0625rem solid ${theme.base.palette['border-line']};\n\n ${StyledButton} {\n margin-inline-start: 0;\n }\n `;\n});\n\nStyledPromotedActions.defaultProps = defaultThemeProp;\n\nconst CaseHeader: FunctionComponent<CaseHeaderProps & ForwardProps> = forwardRef(\n (\n {\n caseId,\n heading,\n caseLink = { href: '' },\n parentCases,\n isMediumOrAbove = true,\n icon,\n followed,\n onFollowedChange,\n actions = [],\n promotedActions = [],\n onEdit,\n ...restProps\n }: PropsWithoutRef<CaseHeaderProps>,\n ref: CaseHeaderProps['ref']\n ) => {\n const { href, ...restLinkProps } = caseLink;\n const t = useI18n();\n const menuItems: MenuItemProps[] = actions.map(action => {\n return {\n ...action,\n primary: action.text,\n visual: action.icon ? <Icon name={action.icon} /> : null\n };\n });\n\n return (\n <div>\n <Flex\n {...restProps}\n as={StyledCaseHeader}\n container={{ gap: 2, alignItems: 'start' }}\n ref={ref}\n >\n {icon && (\n <Flex container item={{ shrink: 0 }} as={StyledCaseIconWrap}>\n {icon}\n </Flex>\n )}\n <Flex\n as={StyledCaseHeaderText}\n container={{ direction: 'column' }}\n item={{ grow: 1, shrink: 0, basis: '0' }}\n >\n <Text variant='h1'>\n {href ? (\n <Link {...restLinkProps} href={href}>\n {heading}\n </Link>\n ) : (\n heading\n )}\n </Text>\n <Breadcrumbs\n path={[\n ...(parentCases || []),\n { ...restLinkProps, id: caseId, primary: caseId, href }\n ]}\n />\n </Flex>\n <div>\n {onEdit && (\n <Button icon variant='simple' onClick={onEdit} label={t('edit')}>\n <Icon name='pencil' />\n </Button>\n )}\n <MenuButton\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 ...menuItems\n ]\n : menuItems,\n scrollAt: 20\n }}\n popover={\n isMediumOrAbove\n ? {\n portal: true\n }\n : undefined\n }\n />\n </div>\n </Flex>\n {promotedActions.length > 0 ? (\n <Flex as={StyledPromotedActions} container={{ wrap: 'wrap', gap: 1 }}>\n {promotedActions.map(promotedAction => (\n <Button\n variant='secondary'\n onClick={(e: MouseEvent<HTMLButtonElement>) =>\n promotedAction.onClick?.(promotedAction.id, e)\n }\n >\n {promotedAction.text}\n </Button>\n ))}\n </Flex>\n ) : null}\n </div>\n );\n }\n);\n\nexport default CaseHeader;\n"]}
|
|
@@ -1 +0,0 @@
|
|
|
1
|
-
{"version":3,"file":"index.d.ts","sourceRoot":"","sources":["../../../src/components/CaseHeader/index.ts"],"names":[],"mappings":"AAAA,OAAO,EAAE,OAAO,EAAE,MAAM,cAAc,CAAC;AACvC,OAAO,EAAE,eAAe,EAAE,MAAM,cAAc,CAAC;AAC/C,OAAO,EAAE,gBAAgB,EAAE,MAAM,cAAc,CAAC"}
|
|
@@ -1 +0,0 @@
|
|
|
1
|
-
{"version":3,"file":"index.js","sourceRoot":"","sources":["../../../src/components/CaseHeader/index.ts"],"names":[],"mappings":"AAAA,OAAO,EAAE,OAAO,EAAE,MAAM,cAAc,CAAC;AAEvC,OAAO,EAAE,gBAAgB,EAAE,MAAM,cAAc,CAAC","sourcesContent":["export { default } from './CaseHeader';\nexport { CaseHeaderProps } from './CaseHeader';\nexport { StyledCaseHeader } from './CaseHeader';\n"]}
|
|
@@ -1,36 +0,0 @@
|
|
|
1
|
-
import { FunctionComponent, ReactNode, Ref, MouseEvent } from 'react';
|
|
2
|
-
import { Tab, ForwardProps } from '@pega/cosmos-react-core';
|
|
3
|
-
import { CaseHeaderProps } from '../CaseHeader';
|
|
4
|
-
export interface CaseSummaryProps extends CaseHeaderProps {
|
|
5
|
-
/** A region to display any summary information about the CaseView. */
|
|
6
|
-
summary: ReactNode;
|
|
7
|
-
/** An object handling the rendering and functionality of the Tabs in CaseSummary. */
|
|
8
|
-
tabs: {
|
|
9
|
-
items: Tab[];
|
|
10
|
-
onClick: (id: string, event?: MouseEvent<HTMLAnchorElement | HTMLButtonElement>) => void;
|
|
11
|
-
currentTabId: string;
|
|
12
|
-
};
|
|
13
|
-
/** The fixed width string is needed for the expandable and collapsible header. */
|
|
14
|
-
fixedWidth?: string;
|
|
15
|
-
/** A boolean that toggles the collapsible feature of the case summary. */
|
|
16
|
-
collapsible?: boolean;
|
|
17
|
-
onBeforeCollapse?: () => void;
|
|
18
|
-
onAfterCollapse?: () => void;
|
|
19
|
-
onBeforeExpand?: () => void;
|
|
20
|
-
onAfterExpand?: () => void;
|
|
21
|
-
/** A callback that will return the animation state of the case summary. */
|
|
22
|
-
onAnimationStateChange?: (state: AnimationState) => void;
|
|
23
|
-
/** Ref for the header element inside the Case Summary */
|
|
24
|
-
headerRef?: Ref<HTMLDivElement>;
|
|
25
|
-
/** Ref for the wrapping element. */
|
|
26
|
-
ref?: Ref<HTMLDivElement>;
|
|
27
|
-
}
|
|
28
|
-
declare type AnimationState = 'expanding' | 'expanded' | 'collapsing' | 'collapsed';
|
|
29
|
-
export declare const StyledCaseSummary: import("styled-components").StyledComponent<"div", import("styled-components").DefaultTheme, {
|
|
30
|
-
expanded?: boolean | undefined;
|
|
31
|
-
fixedWidth?: string | undefined;
|
|
32
|
-
}, never>;
|
|
33
|
-
export declare const StyledCaseSummaryInfo: import("styled-components").StyledComponent<"div", import("styled-components").DefaultTheme, {}, never>;
|
|
34
|
-
declare const CaseSummary: FunctionComponent<CaseSummaryProps & ForwardProps>;
|
|
35
|
-
export default CaseSummary;
|
|
36
|
-
//# sourceMappingURL=CaseSummary.d.ts.map
|
|
@@ -1 +0,0 @@
|
|
|
1
|
-
{"version":3,"file":"CaseSummary.d.ts","sourceRoot":"","sources":["../../../src/components/CaseSummary/CaseSummary.tsx"],"names":[],"mappings":"AAAA,OAAO,EAEL,iBAAiB,EAEjB,SAAS,EACT,GAAG,EACH,UAAU,EAIX,MAAM,OAAO,CAAC;AAGf,OAAO,EAGL,GAAG,EACH,YAAY,EAUb,MAAM,yBAAyB,CAAC;AAGjC,OAAmB,EAAE,eAAe,EAAE,MAAM,eAAe,CAAC;AAI5D,MAAM,WAAW,gBAAiB,SAAQ,eAAe;IACvD,sEAAsE;IACtE,OAAO,EAAE,SAAS,CAAC;IACnB,qFAAqF;IACrF,IAAI,EAAE;QACJ,KAAK,EAAE,GAAG,EAAE,CAAC;QACb,OAAO,EAAE,CAAC,EAAE,EAAE,MAAM,EAAE,KAAK,CAAC,EAAE,UAAU,CAAC,iBAAiB,GAAG,iBAAiB,CAAC,KAAK,IAAI,CAAC;QACzF,YAAY,EAAE,MAAM,CAAC;KACtB,CAAC;IAWF,kFAAkF;IAClF,UAAU,CAAC,EAAE,MAAM,CAAC;IACpB,0EAA0E;IAC1E,WAAW,CAAC,EAAE,OAAO,CAAC;IACtB,gBAAgB,CAAC,EAAE,MAAM,IAAI,CAAC;IAC9B,eAAe,CAAC,EAAE,MAAM,IAAI,CAAC;IAC7B,cAAc,CAAC,EAAE,MAAM,IAAI,CAAC;IAC5B,aAAa,CAAC,EAAE,MAAM,IAAI,CAAC;IAC3B,2EAA2E;IAC3E,sBAAsB,CAAC,EAAE,CAAC,KAAK,EAAE,cAAc,KAAK,IAAI,CAAC;IACzD,yDAAyD;IACzD,SAAS,CAAC,EAAE,GAAG,CAAC,cAAc,CAAC,CAAC;IAChC,oCAAoC;IACpC,GAAG,CAAC,EAAE,GAAG,CAAC,cAAc,CAAC,CAAC;CAC3B;AAED,aAAK,cAAc,GAAG,WAAW,GAAG,UAAU,GAAG,YAAY,GAAG,WAAW,CAAC;AAE5E,eAAO,MAAM,iBAAiB;;;SAyB7B,CAAC;AAEF,eAAO,MAAM,qBAAqB,yGAGjC,CAAC;AAsCF,QAAA,MAAM,WAAW,EAAE,iBAAiB,CAAC,gBAAgB,GAAG,YAAY,CAuKnE,CAAC;AAEF,eAAe,WAAW,CAAC"}
|
|
@@ -1,131 +0,0 @@
|
|
|
1
|
-
import { jsx as _jsx, Fragment as _Fragment, jsxs as _jsxs } from "react/jsx-runtime";
|
|
2
|
-
import { forwardRef, useState, useEffect, useRef } from 'react';
|
|
3
|
-
import styled, { css } from 'styled-components';
|
|
4
|
-
import { Flex, Tabs, ExpandCollapse, defaultThemeProp, useConsolidatedRef, Icon, registerIcon, useI18n, useFocusWithin, Button, StyledIcon } from '@pega/cosmos-react-core';
|
|
5
|
-
import * as arrowMicroLeftIcon from '@pega/cosmos-react-core/lib/components/Icon/icons/arrow-micro-left.icon';
|
|
6
|
-
import CaseHeader from '../CaseHeader';
|
|
7
|
-
registerIcon(arrowMicroLeftIcon);
|
|
8
|
-
export const StyledCaseSummary = styled.div(({ theme, expanded, fixedWidth }) => {
|
|
9
|
-
return css `
|
|
10
|
-
position: relative;
|
|
11
|
-
width: ${fixedWidth || 'auto'};
|
|
12
|
-
max-width: ${fixedWidth ? 'none' : '100%'};
|
|
13
|
-
height: 100%;
|
|
14
|
-
|
|
15
|
-
${expanded &&
|
|
16
|
-
css `
|
|
17
|
-
@media (min-width: ${theme.base.breakpoints.md}) {
|
|
18
|
-
&:hover {
|
|
19
|
-
&::after {
|
|
20
|
-
content: '';
|
|
21
|
-
position: absolute;
|
|
22
|
-
top: 0;
|
|
23
|
-
bottom: 0;
|
|
24
|
-
inset-inline-start: 100%;
|
|
25
|
-
width: 0.75rem;
|
|
26
|
-
}
|
|
27
|
-
}
|
|
28
|
-
}
|
|
29
|
-
`}
|
|
30
|
-
`;
|
|
31
|
-
});
|
|
32
|
-
export const StyledCaseSummaryInfo = styled.div `
|
|
33
|
-
overflow: auto;
|
|
34
|
-
flex: 1;
|
|
35
|
-
`;
|
|
36
|
-
const StyledExpandCollapse = styled.div(({ animationState }) => {
|
|
37
|
-
const expandingOrCollapsing = ['expanding', 'collapsing'].includes(animationState);
|
|
38
|
-
return css `
|
|
39
|
-
position: ${expandingOrCollapsing ? 'fixed' : 'relative'};
|
|
40
|
-
top: ${expandingOrCollapsing ? 'var(--appshell-offset, 0)' : 0};
|
|
41
|
-
`;
|
|
42
|
-
});
|
|
43
|
-
const StyledExpandCollapseButton = styled(Button)(({ theme, expanded, headerHeight, animationState, visible }) => {
|
|
44
|
-
return css `
|
|
45
|
-
border-radius: ${expanded ? '1.5rem' : '0 1.5rem 1.5rem 0'};
|
|
46
|
-
box-shadow: ${theme.base.shadow.low};
|
|
47
|
-
border: none;
|
|
48
|
-
opacity: ${visible ? '1' : '0'};
|
|
49
|
-
position: ${animationState === 'collapsing' ? 'fixed' : 'absolute'};
|
|
50
|
-
inset-inline-start: ${expanded ? 'calc(100% - 0.75rem)' : 0};
|
|
51
|
-
top: calc(calc(${headerHeight}px / 2) - 0.75rem);
|
|
52
|
-
z-index: 1;
|
|
53
|
-
|
|
54
|
-
${StyledIcon} {
|
|
55
|
-
width: 1.5rem;
|
|
56
|
-
height: 1.5rem;
|
|
57
|
-
transform: rotate(${expanded ? '0' : '180deg'});
|
|
58
|
-
}
|
|
59
|
-
`;
|
|
60
|
-
});
|
|
61
|
-
StyledExpandCollapseButton.defaultProps = defaultThemeProp;
|
|
62
|
-
const CaseSummary = forwardRef((props, ref) => {
|
|
63
|
-
const { icon, heading, caseId, caseLink, parentCases, followed, onFollowedChange, actions, promotedActions, onEdit, summary, tabs, forceMobile, collapsible = false, desktop = true, fixedWidth, onBeforeCollapse, onAfterCollapse, onBeforeExpand, onAfterExpand, onAnimationStateChange, headerRef: caseSummaryHeaderRef, ...restProps } = props;
|
|
64
|
-
const [showExpandCollapse, setShowExpandCollapse] = useState(false);
|
|
65
|
-
const expandCollapseBtnRef = useRef(null);
|
|
66
|
-
const [expanded, setExpanded] = useState(true);
|
|
67
|
-
const isMediumOrAbove = !forceMobile && desktop;
|
|
68
|
-
const [animationState, setAnimationState] = useState('expanded');
|
|
69
|
-
const [collapsedHeight, setCollapsedHeight] = useState(0);
|
|
70
|
-
const caseSummaryRef = useConsolidatedRef(ref);
|
|
71
|
-
const focusWithin = useFocusWithin([caseSummaryRef.current]);
|
|
72
|
-
const t = useI18n();
|
|
73
|
-
const setAnimStateAndUpdateParent = (state) => {
|
|
74
|
-
setAnimationState(state);
|
|
75
|
-
onAnimationStateChange?.(state);
|
|
76
|
-
};
|
|
77
|
-
const headerRef = useConsolidatedRef(caseSummaryHeaderRef);
|
|
78
|
-
const showTabs = (isMediumOrAbove && tabs.items.length > 1) || !isMediumOrAbove;
|
|
79
|
-
const caseHeaderProps = {
|
|
80
|
-
actions,
|
|
81
|
-
promotedActions,
|
|
82
|
-
onEdit,
|
|
83
|
-
isMediumOrAbove,
|
|
84
|
-
caseId,
|
|
85
|
-
parentCases,
|
|
86
|
-
heading,
|
|
87
|
-
caseLink,
|
|
88
|
-
icon,
|
|
89
|
-
followed,
|
|
90
|
-
onFollowedChange,
|
|
91
|
-
style: {
|
|
92
|
-
maxHeight: ['expanding', 'collapsed', 'collapsing'].includes(animationState)
|
|
93
|
-
? `${collapsedHeight}px`
|
|
94
|
-
: 'auto'
|
|
95
|
-
}
|
|
96
|
-
};
|
|
97
|
-
useEffect(() => {
|
|
98
|
-
if (['expanded'].includes(animationState)) {
|
|
99
|
-
setCollapsedHeight(headerRef.current?.offsetHeight || 0);
|
|
100
|
-
}
|
|
101
|
-
}, [animationState, headerRef.current]);
|
|
102
|
-
const expandOrCollapseLabel = expanded ? t('collapse') : t('expand');
|
|
103
|
-
const expandOrCollapseA11y = expanded ? t('collapse_summary_panel') : t('expand_summary_panel');
|
|
104
|
-
return (_jsxs(Flex, { as: StyledCaseSummary, expanded: expanded, fixedWidth: fixedWidth, container: { direction: 'column' }, item: { shrink: 0 }, ref: caseSummaryRef, style: {
|
|
105
|
-
marginTop: ['collapsing', 'expanding'].includes(animationState)
|
|
106
|
-
? `${collapsedHeight}px`
|
|
107
|
-
: 0
|
|
108
|
-
}, onMouseEnter: () => {
|
|
109
|
-
setShowExpandCollapse(true);
|
|
110
|
-
}, onMouseLeave: () => {
|
|
111
|
-
setShowExpandCollapse(false);
|
|
112
|
-
}, ...restProps, children: [collapsible ? (_jsxs(_Fragment, { children: [_jsx(StyledExpandCollapseButton, { onClick: () => setExpanded(!expanded), expanded: expanded, headerHeight: collapsedHeight, animationState: animationState, label: ['expanded', 'collapsed'].includes(animationState)
|
|
113
|
-
? expandOrCollapseLabel
|
|
114
|
-
: undefined, "aria-label": ['expanding', 'collapsing'].includes(animationState)
|
|
115
|
-
? expandOrCollapseA11y
|
|
116
|
-
: undefined, visible: showExpandCollapse || !expanded || focusWithin, tabIndex: 0, icon: true, compact: true, ref: expandCollapseBtnRef, children: _jsx(Icon, { name: 'arrow-micro-left' }) }), _jsx(ExpandCollapse, { dimension: 'width', min: isMediumOrAbove || !expanded ? fixedWidth : '100%', max: '100%', collapsed: expanded, onBeforeExpand: () => {
|
|
117
|
-
setAnimStateAndUpdateParent('collapsing');
|
|
118
|
-
onBeforeCollapse?.();
|
|
119
|
-
}, onAfterExpand: () => {
|
|
120
|
-
setAnimStateAndUpdateParent('collapsed');
|
|
121
|
-
onAfterCollapse?.();
|
|
122
|
-
}, onBeforeCollapse: () => {
|
|
123
|
-
setAnimStateAndUpdateParent('expanding');
|
|
124
|
-
onBeforeExpand?.();
|
|
125
|
-
}, onAfterCollapse: () => {
|
|
126
|
-
setAnimStateAndUpdateParent('expanded');
|
|
127
|
-
onAfterExpand?.();
|
|
128
|
-
}, as: StyledExpandCollapse, animationState: animationState, ref: headerRef, children: _jsx(CaseHeader, { ...caseHeaderProps }) })] })) : (_jsx(CaseHeader, { ...caseHeaderProps })), _jsxs(StyledCaseSummaryInfo, { children: [isMediumOrAbove && summary, showTabs && isMediumOrAbove && (_jsx(Tabs, { type: 'vertical', tabs: tabs.items, onTabClick: tabs.onClick, currentTabId: tabs.currentTabId }))] })] }));
|
|
129
|
-
});
|
|
130
|
-
export default CaseSummary;
|
|
131
|
-
//# sourceMappingURL=CaseSummary.js.map
|
|
@@ -1 +0,0 @@
|
|
|
1
|
-
{"version":3,"file":"CaseSummary.js","sourceRoot":"","sources":["../../../src/components/CaseSummary/CaseSummary.tsx"],"names":[],"mappings":"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","sourcesContent":["import {\n forwardRef,\n FunctionComponent,\n PropsWithoutRef,\n ReactNode,\n Ref,\n MouseEvent,\n useState,\n useEffect,\n useRef\n} from 'react';\nimport styled, { css } from 'styled-components';\n\nimport {\n Flex,\n Tabs,\n Tab,\n ForwardProps,\n ExpandCollapse,\n defaultThemeProp,\n useConsolidatedRef,\n Icon,\n registerIcon,\n useI18n,\n useFocusWithin,\n Button,\n StyledIcon\n} from '@pega/cosmos-react-core';\nimport * as arrowMicroLeftIcon from '@pega/cosmos-react-core/lib/components/Icon/icons/arrow-micro-left.icon';\n\nimport CaseHeader, { CaseHeaderProps } from '../CaseHeader';\n\nregisterIcon(arrowMicroLeftIcon);\n\nexport interface CaseSummaryProps extends CaseHeaderProps {\n /** A region to display any summary information about the CaseView. */\n summary: ReactNode;\n /** An object handling the rendering and functionality of the Tabs in CaseSummary. */\n tabs: {\n items: Tab[];\n onClick: (id: string, event?: MouseEvent<HTMLAnchorElement | HTMLButtonElement>) => void;\n currentTabId: string;\n };\n /**\n * Forces rendering in the mobile layout, regardless of screen size.\n * @internal\n */\n forceMobile?: boolean;\n /**\n * Indicator for a desktop size.\n * @internal\n */\n desktop?: boolean;\n /** The fixed width string is needed for the expandable and collapsible header. */\n fixedWidth?: string;\n /** A boolean that toggles the collapsible feature of the case summary. */\n collapsible?: boolean;\n onBeforeCollapse?: () => void;\n onAfterCollapse?: () => void;\n onBeforeExpand?: () => void;\n onAfterExpand?: () => void;\n /** A callback that will return the animation state of the case summary. */\n onAnimationStateChange?: (state: AnimationState) => void;\n /** Ref for the header element inside the Case Summary */\n headerRef?: Ref<HTMLDivElement>;\n /** Ref for the wrapping element. */\n ref?: Ref<HTMLDivElement>;\n}\n\ntype AnimationState = 'expanding' | 'expanded' | 'collapsing' | 'collapsed';\n\nexport const StyledCaseSummary = styled.div<{ expanded?: boolean; fixedWidth?: string }>(\n ({ theme, expanded, fixedWidth }) => {\n return css`\n position: relative;\n width: ${fixedWidth || 'auto'};\n max-width: ${fixedWidth ? 'none' : '100%'};\n height: 100%;\n\n ${expanded &&\n css`\n @media (min-width: ${theme.base.breakpoints.md}) {\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 }\n `}\n `;\n }\n);\n\nexport const StyledCaseSummaryInfo = styled.div`\n overflow: auto;\n flex: 1;\n`;\n\nconst StyledExpandCollapse = styled.div<{ animationState: AnimationState }>(\n ({ animationState }) => {\n const expandingOrCollapsing = ['expanding', 'collapsing'].includes(animationState);\n return css`\n position: ${expandingOrCollapsing ? 'fixed' : 'relative'};\n top: ${expandingOrCollapsing ? 'var(--appshell-offset, 0)' : 0};\n `;\n }\n);\n\nconst StyledExpandCollapseButton = styled(Button)<{\n expanded: boolean;\n headerHeight: number;\n animationState: AnimationState;\n visible: boolean;\n}>(({ theme, expanded, headerHeight, animationState, visible }) => {\n return css`\n border-radius: ${expanded ? '1.5rem' : '0 1.5rem 1.5rem 0'};\n box-shadow: ${theme.base.shadow.low};\n border: none;\n opacity: ${visible ? '1' : '0'};\n position: ${animationState === 'collapsing' ? 'fixed' : 'absolute'};\n inset-inline-start: ${expanded ? 'calc(100% - 0.75rem)' : 0};\n top: calc(calc(${headerHeight}px / 2) - 0.75rem);\n z-index: 1;\n\n ${StyledIcon} {\n width: 1.5rem;\n height: 1.5rem;\n transform: rotate(${expanded ? '0' : '180deg'});\n }\n `;\n});\n\nStyledExpandCollapseButton.defaultProps = defaultThemeProp;\n\nconst CaseSummary: FunctionComponent<CaseSummaryProps & ForwardProps> = forwardRef(\n (props: PropsWithoutRef<CaseSummaryProps>, ref: CaseSummaryProps['ref']) => {\n const {\n icon,\n heading,\n caseId,\n caseLink,\n parentCases,\n followed,\n onFollowedChange,\n actions,\n promotedActions,\n onEdit,\n summary,\n tabs,\n forceMobile,\n collapsible = false,\n desktop = true,\n fixedWidth,\n onBeforeCollapse,\n onAfterCollapse,\n onBeforeExpand,\n onAfterExpand,\n onAnimationStateChange,\n headerRef: caseSummaryHeaderRef,\n ...restProps\n } = props;\n\n const [showExpandCollapse, setShowExpandCollapse] = useState(false);\n const expandCollapseBtnRef = useRef<HTMLButtonElement>(null);\n const [expanded, setExpanded] = useState(true);\n const isMediumOrAbove = !forceMobile && desktop;\n const [animationState, setAnimationState] = useState('expanded');\n const [collapsedHeight, setCollapsedHeight] = useState(0);\n const caseSummaryRef = useConsolidatedRef(ref);\n const focusWithin = useFocusWithin<HTMLDivElement>([caseSummaryRef.current]);\n const t = useI18n();\n\n const setAnimStateAndUpdateParent = (state: AnimationState) => {\n setAnimationState(state);\n onAnimationStateChange?.(state);\n };\n\n const headerRef = useConsolidatedRef<HTMLDivElement>(caseSummaryHeaderRef);\n\n const showTabs = (isMediumOrAbove && tabs.items.length > 1) || !isMediumOrAbove;\n\n const caseHeaderProps = {\n actions,\n promotedActions,\n onEdit,\n isMediumOrAbove,\n caseId,\n parentCases,\n heading,\n caseLink,\n icon,\n followed,\n onFollowedChange,\n style: {\n maxHeight: ['expanding', 'collapsed', 'collapsing'].includes(animationState)\n ? `${collapsedHeight}px`\n : 'auto'\n }\n };\n\n useEffect(() => {\n if (['expanded'].includes(animationState)) {\n setCollapsedHeight(headerRef.current?.offsetHeight || 0);\n }\n }, [animationState, headerRef.current]);\n\n const expandOrCollapseLabel = expanded ? t('collapse') : t('expand');\n const expandOrCollapseA11y = expanded ? t('collapse_summary_panel') : t('expand_summary_panel');\n\n return (\n <Flex\n as={StyledCaseSummary}\n expanded={expanded}\n fixedWidth={fixedWidth}\n container={{ direction: 'column' }}\n item={{ shrink: 0 }}\n ref={caseSummaryRef}\n style={{\n marginTop: ['collapsing', 'expanding'].includes(animationState)\n ? `${collapsedHeight}px`\n : 0\n }}\n onMouseEnter={() => {\n setShowExpandCollapse(true);\n }}\n onMouseLeave={() => {\n setShowExpandCollapse(false);\n }}\n {...restProps}\n >\n {collapsible ? (\n <>\n <StyledExpandCollapseButton\n onClick={() => setExpanded(!expanded)}\n expanded={expanded}\n headerHeight={collapsedHeight}\n animationState={animationState}\n label={\n ['expanded', 'collapsed'].includes(animationState)\n ? expandOrCollapseLabel\n : undefined\n }\n aria-label={\n ['expanding', 'collapsing'].includes(animationState)\n ? expandOrCollapseA11y\n : undefined\n }\n visible={showExpandCollapse || !expanded || focusWithin}\n tabIndex={0}\n icon\n compact\n ref={expandCollapseBtnRef}\n >\n <Icon name='arrow-micro-left' />\n </StyledExpandCollapseButton>\n <ExpandCollapse\n dimension='width'\n min={isMediumOrAbove || !expanded ? fixedWidth : '100%'}\n max='100%'\n collapsed={expanded}\n onBeforeExpand={() => {\n setAnimStateAndUpdateParent('collapsing');\n onBeforeCollapse?.();\n }}\n onAfterExpand={() => {\n setAnimStateAndUpdateParent('collapsed');\n onAfterCollapse?.();\n }}\n onBeforeCollapse={() => {\n setAnimStateAndUpdateParent('expanding');\n onBeforeExpand?.();\n }}\n onAfterCollapse={() => {\n setAnimStateAndUpdateParent('expanded');\n onAfterExpand?.();\n }}\n as={StyledExpandCollapse}\n animationState={animationState}\n ref={headerRef}\n >\n <CaseHeader {...caseHeaderProps} />\n </ExpandCollapse>\n </>\n ) : (\n <CaseHeader {...caseHeaderProps} />\n )}\n <StyledCaseSummaryInfo>\n {isMediumOrAbove && summary}\n\n {showTabs && isMediumOrAbove && (\n <Tabs\n type='vertical'\n tabs={tabs.items}\n onTabClick={tabs.onClick}\n currentTabId={tabs.currentTabId}\n />\n )}\n </StyledCaseSummaryInfo>\n </Flex>\n );\n }\n);\n\nexport default CaseSummary;\n"]}
|
|
@@ -1 +0,0 @@
|
|
|
1
|
-
{"version":3,"file":"index.d.ts","sourceRoot":"","sources":["../../../src/components/CaseSummary/index.ts"],"names":[],"mappings":"AAAA,OAAO,EAAE,OAAO,EAAE,MAAM,eAAe,CAAC;AACxC,OAAO,EAAE,gBAAgB,EAAE,MAAM,eAAe,CAAC;AACjD,OAAO,EAAE,iBAAiB,EAAE,MAAM,eAAe,CAAC"}
|
|
@@ -1 +0,0 @@
|
|
|
1
|
-
{"version":3,"file":"index.js","sourceRoot":"","sources":["../../../src/components/CaseSummary/index.ts"],"names":[],"mappings":"AAAA,OAAO,EAAE,OAAO,EAAE,MAAM,eAAe,CAAC;AAExC,OAAO,EAAE,iBAAiB,EAAE,MAAM,eAAe,CAAC","sourcesContent":["export { default } from './CaseSummary';\nexport { CaseSummaryProps } from './CaseSummary';\nexport { StyledCaseSummary } from './CaseSummary';\n"]}
|
|
@@ -1,22 +0,0 @@
|
|
|
1
|
-
import { ReactNode, FunctionComponent, Ref } from 'react';
|
|
2
|
-
import { ForwardProps } from '@pega/cosmos-react-core';
|
|
3
|
-
export declare const StyledCaseSummaryFields: import("styled-components").StyledComponent<"div", import("styled-components").DefaultTheme, {}, never>;
|
|
4
|
-
export interface CaseSummaryFieldsProps {
|
|
5
|
-
/** The primary summary fields to display above secondary fields. */
|
|
6
|
-
primaryFields: {
|
|
7
|
-
id?: string;
|
|
8
|
-
name: string;
|
|
9
|
-
value: ReactNode;
|
|
10
|
-
}[];
|
|
11
|
-
/** The secondary summary fields to display below primary fields. */
|
|
12
|
-
secondaryFields: {
|
|
13
|
-
id?: string;
|
|
14
|
-
name: string;
|
|
15
|
-
value: ReactNode;
|
|
16
|
-
}[];
|
|
17
|
-
/** Ref for the wrapping element. */
|
|
18
|
-
ref?: Ref<HTMLDivElement>;
|
|
19
|
-
}
|
|
20
|
-
declare const CaseSummaryFields: FunctionComponent<CaseSummaryFieldsProps & ForwardProps>;
|
|
21
|
-
export default CaseSummaryFields;
|
|
22
|
-
//# sourceMappingURL=CaseSummaryFields.d.ts.map
|
|
@@ -1 +0,0 @@
|
|
|
1
|
-
{"version":3,"file":"CaseSummaryFields.d.ts","sourceRoot":"","sources":["../../../src/components/CaseSummaryFields/CaseSummaryFields.tsx"],"names":[],"mappings":"AAAA,OAAO,EAAE,SAAS,EAAc,iBAAiB,EAAmB,GAAG,EAAE,MAAM,OAAO,CAAC;AAGvF,OAAO,EAOL,YAAY,EAEb,MAAM,yBAAyB,CAAC;AAEjC,eAAO,MAAM,uBAAuB,yGAelC,CAAC;AAIH,MAAM,WAAW,sBAAsB;IACrC,oEAAoE;IACpE,aAAa,EAAE;QACb,EAAE,CAAC,EAAE,MAAM,CAAC;QACZ,IAAI,EAAE,MAAM,CAAC;QACb,KAAK,EAAE,SAAS,CAAC;KAClB,EAAE,CAAC;IACJ,oEAAoE;IACpE,eAAe,EAAE;QACf,EAAE,CAAC,EAAE,MAAM,CAAC;QACZ,IAAI,EAAE,MAAM,CAAC;QACb,KAAK,EAAE,SAAS,CAAC;KAClB,EAAE,CAAC;IACJ,oCAAoC;IACpC,GAAG,CAAC,EAAE,GAAG,CAAC,cAAc,CAAC,CAAC;CAC3B;AAED,QAAA,MAAM,iBAAiB,EAAE,iBAAiB,CAAC,sBAAsB,GAAG,YAAY,CAY/E,CAAC;AAEF,eAAe,iBAAiB,CAAC"}
|
|
@@ -1,25 +0,0 @@
|
|
|
1
|
-
import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
|
|
2
|
-
import { forwardRef } from 'react';
|
|
3
|
-
import styled, { css } from 'styled-components';
|
|
4
|
-
import { Grid, FieldValueList, StyledFieldValueList, StyledFieldValue, calculateFontSize, defaultThemeProp } from '@pega/cosmos-react-core';
|
|
5
|
-
export const StyledCaseSummaryFields = styled.div(({ theme }) => {
|
|
6
|
-
const fontSizes = calculateFontSize(theme.base['font-size'], theme.base['font-scale']);
|
|
7
|
-
return css `
|
|
8
|
-
padding: calc(2 * ${theme.base.spacing});
|
|
9
|
-
|
|
10
|
-
> ${StyledFieldValueList}:first-child {
|
|
11
|
-
grid-template-columns: 16ch auto;
|
|
12
|
-
|
|
13
|
-
${StyledFieldValue} {
|
|
14
|
-
font-size: ${fontSizes[theme.components.text.h1['font-size']]};
|
|
15
|
-
font-weight: ${theme.components.text.h1['font-weight']};
|
|
16
|
-
}
|
|
17
|
-
}
|
|
18
|
-
`;
|
|
19
|
-
});
|
|
20
|
-
StyledCaseSummaryFields.defaultProps = defaultThemeProp;
|
|
21
|
-
const CaseSummaryFields = forwardRef(({ primaryFields, secondaryFields, ...restProps }, ref) => {
|
|
22
|
-
return (_jsxs(Grid, { ...restProps, as: StyledCaseSummaryFields, ref: ref, container: { rowGap: 2 }, children: [_jsx(FieldValueList, { variant: 'stacked', fields: primaryFields }), _jsx(FieldValueList, { variant: 'inline', fields: secondaryFields })] }));
|
|
23
|
-
});
|
|
24
|
-
export default CaseSummaryFields;
|
|
25
|
-
//# sourceMappingURL=CaseSummaryFields.js.map
|
|
@@ -1 +0,0 @@
|
|
|
1
|
-
{"version":3,"file":"CaseSummaryFields.js","sourceRoot":"","sources":["../../../src/components/CaseSummaryFields/CaseSummaryFields.tsx"],"names":[],"mappings":";AAAA,OAAO,EAAa,UAAU,EAA2C,MAAM,OAAO,CAAC;AACvF,OAAO,MAAM,EAAE,EAAE,GAAG,EAAE,MAAM,mBAAmB,CAAC;AAEhD,OAAO,EACL,IAAI,EACJ,cAAc,EACd,oBAAoB,EACpB,gBAAgB,EAChB,iBAAiB,EACjB,gBAAgB,EAGjB,MAAM,yBAAyB,CAAC;AAEjC,MAAM,CAAC,MAAM,uBAAuB,GAAG,MAAM,CAAC,GAAG,CAAC,CAAC,EAAE,KAAK,EAAE,EAAE,EAAE;IAC9D,MAAM,SAAS,GAAG,iBAAiB,CAAC,KAAK,CAAC,IAAI,CAAC,WAAW,CAAC,EAAE,KAAK,CAAC,IAAI,CAAC,YAAY,CAAC,CAAC,CAAC;IAEvF,OAAO,GAAG,CAAA;wBACY,KAAK,CAAC,IAAI,CAAC,OAAO;;QAElC,oBAAoB;;;QAGpB,gBAAgB;qBACH,SAAS,CAAC,KAAK,CAAC,UAAU,CAAC,IAAI,CAAC,EAAE,CAAC,WAAW,CAAa,CAAC;uBAC1D,KAAK,CAAC,UAAU,CAAC,IAAI,CAAC,EAAE,CAAC,aAAa,CAAC;;;GAG3D,CAAC;AACJ,CAAC,CAAC,CAAC;AAEH,uBAAuB,CAAC,YAAY,GAAG,gBAAgB,CAAC;AAmBxD,MAAM,iBAAiB,GAA6D,UAAU,CAC5F,CACE,EAAE,aAAa,EAAE,eAAe,EAAE,GAAG,SAAS,EAA2C,EACzF,GAAkC,EAClC,EAAE;IACF,OAAO,CACL,MAAC,IAAI,OAAK,SAAS,EAAE,EAAE,EAAE,uBAAuB,EAAE,GAAG,EAAE,GAAG,EAAE,SAAS,EAAE,EAAE,MAAM,EAAE,CAAC,EAAE,aAClF,KAAC,cAAc,IAAC,OAAO,EAAC,SAAS,EAAC,MAAM,EAAE,aAAa,GAAI,EAC3D,KAAC,cAAc,IAAC,OAAO,EAAC,QAAQ,EAAC,MAAM,EAAE,eAAe,GAAI,IACvD,CACR,CAAC;AACJ,CAAC,CACF,CAAC;AAEF,eAAe,iBAAiB,CAAC","sourcesContent":["import { ReactNode, forwardRef, FunctionComponent, PropsWithoutRef, Ref } from 'react';\nimport styled, { css } from 'styled-components';\n\nimport {\n Grid,\n FieldValueList,\n StyledFieldValueList,\n StyledFieldValue,\n calculateFontSize,\n defaultThemeProp,\n ForwardProps,\n FontSize\n} from '@pega/cosmos-react-core';\n\nexport const StyledCaseSummaryFields = styled.div(({ theme }) => {\n const fontSizes = calculateFontSize(theme.base['font-size'], theme.base['font-scale']);\n\n return css`\n padding: calc(2 * ${theme.base.spacing});\n\n > ${StyledFieldValueList}:first-child {\n grid-template-columns: 16ch auto;\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\nStyledCaseSummaryFields.defaultProps = defaultThemeProp;\n\nexport interface CaseSummaryFieldsProps {\n /** The primary summary fields to display above secondary fields. */\n primaryFields: {\n id?: string;\n name: string;\n value: ReactNode;\n }[];\n /** The secondary summary fields to display below primary fields. */\n secondaryFields: {\n id?: string;\n name: string;\n value: ReactNode;\n }[];\n /** Ref for the wrapping element. */\n ref?: Ref<HTMLDivElement>;\n}\n\nconst CaseSummaryFields: FunctionComponent<CaseSummaryFieldsProps & ForwardProps> = forwardRef(\n (\n { primaryFields, secondaryFields, ...restProps }: PropsWithoutRef<CaseSummaryFieldsProps>,\n ref: CaseSummaryFieldsProps['ref']\n ) => {\n return (\n <Grid {...restProps} as={StyledCaseSummaryFields} ref={ref} container={{ rowGap: 2 }}>\n <FieldValueList variant='stacked' fields={primaryFields} />\n <FieldValueList variant='inline' fields={secondaryFields} />\n </Grid>\n );\n }\n);\n\nexport default CaseSummaryFields;\n"]}
|
|
@@ -1 +0,0 @@
|
|
|
1
|
-
{"version":3,"file":"index.d.ts","sourceRoot":"","sources":["../../../src/components/CaseSummaryFields/index.ts"],"names":[],"mappings":"AAAA,OAAO,EAAE,OAAO,EAAE,MAAM,qBAAqB,CAAC;AAC9C,OAAO,EAAE,sBAAsB,EAAE,MAAM,qBAAqB,CAAC;AAC7D,OAAO,EAAE,uBAAuB,EAAE,MAAM,qBAAqB,CAAC"}
|
|
@@ -1 +0,0 @@
|
|
|
1
|
-
{"version":3,"file":"index.js","sourceRoot":"","sources":["../../../src/components/CaseSummaryFields/index.ts"],"names":[],"mappings":"AAAA,OAAO,EAAE,OAAO,EAAE,MAAM,qBAAqB,CAAC;AAE9C,OAAO,EAAE,uBAAuB,EAAE,MAAM,qBAAqB,CAAC","sourcesContent":["export { default } from './CaseSummaryFields';\nexport { CaseSummaryFieldsProps } from './CaseSummaryFields';\nexport { StyledCaseSummaryFields } from './CaseSummaryFields';\n"]}
|