@pega/cosmos-react-work 3.0.0-dev.9.1 → 3.0.0-rc.3
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/AppAnnouncement/AppAnnouncement.d.ts +4 -0
- package/lib/components/AppAnnouncement/AppAnnouncement.d.ts.map +1 -1
- package/lib/components/AppAnnouncement/AppAnnouncement.js +3 -2
- package/lib/components/AppAnnouncement/AppAnnouncement.js.map +1 -1
- 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 +2 -2
- 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 +218 -190
- package/lib/components/CaseView/CaseView.js.map +1 -1
- package/lib/components/CaseView/CaseView.styles.d.ts +14 -17
- package/lib/components/CaseView/CaseView.styles.d.ts.map +1 -1
- package/lib/components/CaseView/CaseView.styles.js +235 -41
- package/lib/components/CaseView/CaseView.styles.js.map +1 -1
- package/lib/components/CaseView/CaseView.types.d.ts +99 -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/ConfigurableLayout/useTrackWrappedRegions.d.ts +1 -1
- package/lib/components/ConfigurableLayout/useTrackWrappedRegions.d.ts.map +1 -1
- package/lib/components/Confirmation/Confirmation.d.ts +2 -2
- package/lib/components/Confirmation/Confirmation.d.ts.map +1 -1
- package/lib/components/Confirmation/Confirmation.js +1 -1
- package/lib/components/Confirmation/Confirmation.js.map +1 -1
- package/lib/components/Details/Details.d.ts +31 -10
- package/lib/components/Details/Details.d.ts.map +1 -1
- package/lib/components/Details/Details.js +77 -35
- package/lib/components/Details/Details.js.map +1 -1
- package/lib/components/Details/Details.styles.d.ts +47 -0
- package/lib/components/Details/Details.styles.d.ts.map +1 -0
- package/lib/components/Details/Details.styles.js +243 -0
- package/lib/components/Details/Details.styles.js.map +1 -0
- package/lib/components/Details/DetailsContext.d.ts +9 -0
- package/lib/components/Details/DetailsContext.d.ts.map +1 -0
- package/lib/components/Details/DetailsContext.js +9 -0
- package/lib/components/Details/DetailsContext.js.map +1 -0
- package/lib/components/Details/index.d.ts +2 -2
- package/lib/components/Details/index.d.ts.map +1 -1
- package/lib/components/Details/index.js +2 -1
- package/lib/components/Details/index.js.map +1 -1
- package/lib/components/SearchResults/SearchResult.d.ts +1 -1
- package/lib/components/SearchResults/SearchResult.d.ts.map +1 -1
- package/lib/components/SearchResults/SearchResult.js +9 -3
- package/lib/components/SearchResults/SearchResult.js.map +1 -1
- package/lib/components/SearchResults/SearchResults.d.ts.map +1 -1
- package/lib/components/SearchResults/SearchResults.js +56 -37
- package/lib/components/SearchResults/SearchResults.js.map +1 -1
- package/lib/components/SearchResults/SearchResults.styles.d.ts +3 -0
- package/lib/components/SearchResults/SearchResults.styles.d.ts.map +1 -1
- package/lib/components/SearchResults/SearchResults.styles.js +38 -17
- package/lib/components/SearchResults/SearchResults.styles.js.map +1 -1
- package/lib/components/SearchResults/SearchResults.types.d.ts +4 -0
- package/lib/components/SearchResults/SearchResults.types.d.ts.map +1 -1
- package/lib/components/SearchResults/SearchResults.types.js.map +1 -1
- package/lib/components/Stages/StageGlimpse.d.ts +10 -0
- package/lib/components/Stages/StageGlimpse.d.ts.map +1 -0
- package/lib/components/Stages/StageGlimpse.js +11 -0
- package/lib/components/Stages/StageGlimpse.js.map +1 -0
- package/lib/components/Stages/Stages.d.ts +1 -1
- package/lib/components/Stages/Stages.d.ts.map +1 -1
- package/lib/components/Stages/Stages.js +105 -112
- package/lib/components/Stages/Stages.js.map +1 -1
- package/lib/components/Stages/Stages.styles.d.ts +5 -7
- package/lib/components/Stages/Stages.styles.d.ts.map +1 -1
- package/lib/components/Stages/Stages.styles.js +180 -189
- package/lib/components/Stages/Stages.styles.js.map +1 -1
- package/lib/components/Stages/Stages.types.d.ts +19 -4
- package/lib/components/Stages/Stages.types.d.ts.map +1 -1
- package/lib/components/Stages/Stages.types.js.map +1 -1
- package/lib/components/Stakeholders/Stakeholders.d.ts.map +1 -1
- package/lib/components/Stakeholders/Stakeholders.js +10 -4
- 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 +23 -9
- package/lib/components/Tags/Tags.js.map +1 -1
- package/lib/components/Tasks/TaskList.d.ts +8 -5
- package/lib/components/Tasks/TaskList.d.ts.map +1 -1
- package/lib/components/Tasks/TaskList.js +12 -4
- package/lib/components/Tasks/TaskList.js.map +1 -1
- package/lib/components/Tasks/Tasks.d.ts.map +1 -1
- package/lib/components/Tasks/Tasks.js +2 -1
- package/lib/components/Tasks/Tasks.js.map +1 -1
- package/lib/components/Timeline/Timeline.styles.d.ts +1 -1
- package/lib/components/Timeline/Timeline.styles.d.ts.map +1 -1
- package/lib/components/Timeline/Timeline.styles.js +1 -0
- package/lib/components/Timeline/Timeline.styles.js.map +1 -1
- package/lib/components/Timeline/TimelineItem.d.ts.map +1 -1
- package/lib/components/Timeline/TimelineItem.js +2 -2
- package/lib/components/Timeline/TimelineItem.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 +6 -3
- package/lib/components/CaseHeader/CaseHeader.d.ts +0 -30
- package/lib/components/CaseHeader/CaseHeader.d.ts.map +0 -1
- package/lib/components/CaseHeader/CaseHeader.js +0 -119
- 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 -130
- 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
- package/lib/components/Stages/Steps.d.ts +0 -8
- package/lib/components/Stages/Steps.d.ts.map +0 -1
- package/lib/components/Stages/Steps.js +0 -12
- package/lib/components/Stages/Steps.js.map +0 -1
- package/lib/components/Stages/StepsContainer.d.ts +0 -8
- package/lib/components/Stages/StepsContainer.d.ts.map +0 -1
- package/lib/components/Stages/StepsContainer.js +0 -11
- package/lib/components/Stages/StepsContainer.js.map +0 -1
|
@@ -1 +1 @@
|
|
|
1
|
-
{"version":3,"file":"TimelineItem.js","sourceRoot":"","sources":["../../../src/components/Timeline/TimelineItem.tsx"],"names":[],"mappings":";AAAA,OAAO,EAAqB,cAAc,EAAE,WAAW,EAAE,QAAQ,EAAE,MAAM,OAAO,CAAC;AAEjF,OAAO,EACL,cAAc,EAGd,IAAI,EACJ,IAAI,EACJ,MAAM,EACN,aAAa,EACb,cAAc,
|
|
1
|
+
{"version":3,"file":"TimelineItem.js","sourceRoot":"","sources":["../../../src/components/Timeline/TimelineItem.tsx"],"names":[],"mappings":"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","sourcesContent":["import { FunctionComponent, isValidElement, useCallback, useState } from 'react';\n\nimport {\n ExpandCollapse,\n FieldValueListProps,\n ForwardProps,\n Grid,\n Icon,\n Status,\n useBreakpoint,\n FieldValueList,\n DateTimeDisplayProps\n} from '@pega/cosmos-react-core';\n\nimport type { ActivityObject } from './Timeline.types';\nimport {\n StyledCard,\n StyledCardHeader,\n StyledTimeWrapper,\n StyledTimelineIcon,\n StyledCardContent,\n StyledBulletWrapper,\n StyledToggleButton,\n StyledTime\n} from './Timeline.styles';\nimport { isFutureDate } from './utils';\n\ninterface TimelineItemProps {\n item: ActivityObject;\n timeFormat: DateTimeDisplayProps['variant'];\n prevItemDate: ActivityObject['date'] | undefined;\n nextItemDate: ActivityObject['date'] | undefined;\n currentTime: Date;\n}\n\nconst TimelineItem: FunctionComponent<TimelineItemProps & ForwardProps> = ({\n item: { date, title, icon, status, content },\n timeFormat,\n prevItemDate,\n nextItemDate,\n currentTime\n}: TimelineItemProps & ForwardProps) => {\n const [collapsed, setCollapsed] = useState(true);\n const isSmallOrAbove = useBreakpoint('sm');\n\n const toggleCollapse = useCallback(() => setCollapsed(prevState => !prevState), []);\n\n return (\n <tr>\n {isSmallOrAbove && (\n <StyledTimeWrapper>\n <StyledTime variant={timeFormat} value={date} />\n </StyledTimeWrapper>\n )}\n <StyledBulletWrapper\n hasIcon={!!icon}\n hasPrev={!!prevItemDate}\n hasNext={!!nextItemDate}\n isPrevFuture={isFutureDate(prevItemDate, currentTime)}\n isNextFuture={isFutureDate(nextItemDate, currentTime)}\n >\n <StyledTimelineIcon container={{ inline: true, alignItems: 'center', justify: 'center' }}>\n {icon && <Icon name={icon} />}\n </StyledTimelineIcon>\n </StyledBulletWrapper>\n <td style={{ width: '100%' }}>\n <div>\n <StyledCard>\n <StyledCardHeader\n container={{\n cols: 'auto 1fr',\n alignContent: 'evenly',\n alignItems: 'center'\n }}\n sm={{ container: { cols: 'auto 1fr auto' } }}\n >\n {content && (\n <StyledToggleButton\n icon\n variant='simple'\n onClick={toggleCollapse}\n collapsed={collapsed}\n aria-expanded={!collapsed}\n >\n <Icon name='caret-down' />\n </StyledToggleButton>\n )}\n <Grid item={{ colStart: '2', colEnd: '2' }} container={{ rowGap: 0.25 }}>\n {title}\n {!isSmallOrAbove && (\n <Grid\n container={{\n cols: '1fr auto',\n alignContent: 'evenly',\n alignItems: 'center'\n }}\n >\n <StyledTime variant='time' value={date} />\n {status && <Status variant={status.variant}>{status.children}</Status>}\n </Grid>\n )}\n </Grid>\n {isSmallOrAbove && status && (\n <Grid sm={{ item: { colStart: '3', colEnd: '3' } }}>\n <Status variant={status.variant}>{status.children}</Status>\n </Grid>\n )}\n </StyledCardHeader>\n </StyledCard>\n </div>\n {content && (\n <ExpandCollapse dimension='height' collapsed={collapsed} nullWhenCollapsed>\n <StyledCardContent>\n {isValidElement(content) ? (\n content\n ) : (\n <FieldValueList\n fields={content as FieldValueListProps['fields']}\n variant={isSmallOrAbove ? 'inline' : 'stacked'}\n />\n )}\n </StyledCardContent>\n </ExpandCollapse>\n )}\n </td>\n </tr>\n );\n};\n\nexport default TimelineItem;\n"]}
|
package/lib/index.d.ts
CHANGED
|
@@ -1,13 +1,7 @@
|
|
|
1
1
|
export { default as AppAnnouncement } from './components/AppAnnouncement';
|
|
2
2
|
export * from './components/AppAnnouncement';
|
|
3
|
-
export { default as CaseHeader } from './components/CaseHeader';
|
|
4
|
-
export * from './components/CaseHeader';
|
|
5
3
|
export { default as CasePreview } from './components/CasePreview';
|
|
6
4
|
export * from './components/CasePreview';
|
|
7
|
-
export { default as CaseSummary } from './components/CaseSummary';
|
|
8
|
-
export * from './components/CaseSummary';
|
|
9
|
-
export { default as CaseSummaryFields } from './components/CaseSummaryFields';
|
|
10
|
-
export * from './components/CaseSummaryFields';
|
|
11
5
|
export { default as CaseView } from './components/CaseView';
|
|
12
6
|
export * from './components/CaseView';
|
|
13
7
|
export { default as ConfigurableLayout } from './components/ConfigurableLayout';
|
package/lib/index.d.ts.map
CHANGED
|
@@ -1 +1 @@
|
|
|
1
|
-
{"version":3,"file":"index.d.ts","sourceRoot":"","sources":["../src/index.ts"],"names":[],"mappings":"AACA,OAAO,EAAE,OAAO,IAAI,eAAe,EAAE,MAAM,8BAA8B,CAAC;AAC1E,cAAc,8BAA8B,CAAC;AAC7C,OAAO,EAAE,OAAO,IAAI,
|
|
1
|
+
{"version":3,"file":"index.d.ts","sourceRoot":"","sources":["../src/index.ts"],"names":[],"mappings":"AACA,OAAO,EAAE,OAAO,IAAI,eAAe,EAAE,MAAM,8BAA8B,CAAC;AAC1E,cAAc,8BAA8B,CAAC;AAC7C,OAAO,EAAE,OAAO,IAAI,WAAW,EAAE,MAAM,0BAA0B,CAAC;AAClE,cAAc,0BAA0B,CAAC;AACzC,OAAO,EAAE,OAAO,IAAI,QAAQ,EAAE,MAAM,uBAAuB,CAAC;AAC5D,cAAc,uBAAuB,CAAC;AACtC,OAAO,EAAE,OAAO,IAAI,kBAAkB,EAAE,MAAM,iCAAiC,CAAC;AAChF,cAAc,iCAAiC,CAAC;AAChD,OAAO,EAAE,OAAO,IAAI,YAAY,EAAE,MAAM,2BAA2B,CAAC;AACpE,cAAc,2BAA2B,CAAC;AAC1C,OAAO,EAAE,OAAO,IAAI,OAAO,EAAE,MAAM,sBAAsB,CAAC;AAC1D,cAAc,sBAAsB,CAAC;AACrC,OAAO,EAAE,OAAO,IAAI,OAAO,EAAE,MAAM,sBAAsB,CAAC;AAC1D,cAAc,sBAAsB,CAAC;AACrC,OAAO,EAAE,OAAO,IAAI,aAAa,EAAE,MAAM,4BAA4B,CAAC;AACtE,cAAc,4BAA4B,CAAC;AAC3C,OAAO,EAAE,OAAO,IAAI,MAAM,EAAE,MAAM,qBAAqB,CAAC;AACxD,cAAc,qBAAqB,CAAC;AACpC,OAAO,EAAE,OAAO,IAAI,YAAY,EAAE,MAAM,2BAA2B,CAAC;AACpE,cAAc,2BAA2B,CAAC;AAC1C,OAAO,EAAE,OAAO,IAAI,IAAI,EAAE,MAAM,mBAAmB,CAAC;AACpD,cAAc,mBAAmB,CAAC;AAClC,OAAO,EAAE,OAAO,IAAI,KAAK,EAAE,MAAM,oBAAoB,CAAC;AACtD,cAAc,oBAAoB,CAAC;AACnC,OAAO,EAAE,OAAO,IAAI,QAAQ,EAAE,MAAM,uBAAuB,CAAC;AAC5D,cAAc,uBAAuB,CAAC"}
|
package/lib/index.js
CHANGED
|
@@ -1,14 +1,8 @@
|
|
|
1
1
|
// This file is autogenerated. Any changes will be overwritten.
|
|
2
2
|
export { default as AppAnnouncement } from './components/AppAnnouncement';
|
|
3
3
|
export * from './components/AppAnnouncement';
|
|
4
|
-
export { default as CaseHeader } from './components/CaseHeader';
|
|
5
|
-
export * from './components/CaseHeader';
|
|
6
4
|
export { default as CasePreview } from './components/CasePreview';
|
|
7
5
|
export * from './components/CasePreview';
|
|
8
|
-
export { default as CaseSummary } from './components/CaseSummary';
|
|
9
|
-
export * from './components/CaseSummary';
|
|
10
|
-
export { default as CaseSummaryFields } from './components/CaseSummaryFields';
|
|
11
|
-
export * from './components/CaseSummaryFields';
|
|
12
6
|
export { default as CaseView } from './components/CaseView';
|
|
13
7
|
export * from './components/CaseView';
|
|
14
8
|
export { default as ConfigurableLayout } from './components/ConfigurableLayout';
|
package/lib/index.js.map
CHANGED
|
@@ -1 +1 @@
|
|
|
1
|
-
{"version":3,"file":"index.js","sourceRoot":"","sources":["../src/index.ts"],"names":[],"mappings":"AAAA,+DAA+D;AAC/D,OAAO,EAAE,OAAO,IAAI,eAAe,EAAE,MAAM,8BAA8B,CAAC;AAC1E,cAAc,8BAA8B,CAAC;AAC7C,OAAO,EAAE,OAAO,IAAI,
|
|
1
|
+
{"version":3,"file":"index.js","sourceRoot":"","sources":["../src/index.ts"],"names":[],"mappings":"AAAA,+DAA+D;AAC/D,OAAO,EAAE,OAAO,IAAI,eAAe,EAAE,MAAM,8BAA8B,CAAC;AAC1E,cAAc,8BAA8B,CAAC;AAC7C,OAAO,EAAE,OAAO,IAAI,WAAW,EAAE,MAAM,0BAA0B,CAAC;AAClE,cAAc,0BAA0B,CAAC;AACzC,OAAO,EAAE,OAAO,IAAI,QAAQ,EAAE,MAAM,uBAAuB,CAAC;AAC5D,cAAc,uBAAuB,CAAC;AACtC,OAAO,EAAE,OAAO,IAAI,kBAAkB,EAAE,MAAM,iCAAiC,CAAC;AAChF,cAAc,iCAAiC,CAAC;AAChD,OAAO,EAAE,OAAO,IAAI,YAAY,EAAE,MAAM,2BAA2B,CAAC;AACpE,cAAc,2BAA2B,CAAC;AAC1C,OAAO,EAAE,OAAO,IAAI,OAAO,EAAE,MAAM,sBAAsB,CAAC;AAC1D,cAAc,sBAAsB,CAAC;AACrC,OAAO,EAAE,OAAO,IAAI,OAAO,EAAE,MAAM,sBAAsB,CAAC;AAC1D,cAAc,sBAAsB,CAAC;AACrC,OAAO,EAAE,OAAO,IAAI,aAAa,EAAE,MAAM,4BAA4B,CAAC;AACtE,cAAc,4BAA4B,CAAC;AAC3C,OAAO,EAAE,OAAO,IAAI,MAAM,EAAE,MAAM,qBAAqB,CAAC;AACxD,cAAc,qBAAqB,CAAC;AACpC,OAAO,EAAE,OAAO,IAAI,YAAY,EAAE,MAAM,2BAA2B,CAAC;AACpE,cAAc,2BAA2B,CAAC;AAC1C,OAAO,EAAE,OAAO,IAAI,IAAI,EAAE,MAAM,mBAAmB,CAAC;AACpD,cAAc,mBAAmB,CAAC;AAClC,OAAO,EAAE,OAAO,IAAI,KAAK,EAAE,MAAM,oBAAoB,CAAC;AACtD,cAAc,oBAAoB,CAAC;AACnC,OAAO,EAAE,OAAO,IAAI,QAAQ,EAAE,MAAM,uBAAuB,CAAC;AAC5D,cAAc,uBAAuB,CAAC","sourcesContent":["// This file is autogenerated. Any changes will be overwritten.\nexport { default as AppAnnouncement } from './components/AppAnnouncement';\nexport * from './components/AppAnnouncement';\nexport { default as CasePreview } from './components/CasePreview';\nexport * from './components/CasePreview';\nexport { default as CaseView } from './components/CaseView';\nexport * from './components/CaseView';\nexport { default as ConfigurableLayout } from './components/ConfigurableLayout';\nexport * from './components/ConfigurableLayout';\nexport { default as Confirmation } from './components/Confirmation';\nexport * from './components/Confirmation';\nexport { default as Details } from './components/Details';\nexport * from './components/Details';\nexport { default as Glimpse } from './components/Glimpse';\nexport * from './components/Glimpse';\nexport { default as SearchResults } from './components/SearchResults';\nexport * from './components/SearchResults';\nexport { default as Stages } from './components/Stages';\nexport * from './components/Stages';\nexport { default as Stakeholders } from './components/Stakeholders';\nexport * from './components/Stakeholders';\nexport { default as Tags } from './components/Tags';\nexport * from './components/Tags';\nexport { default as Tasks } from './components/Tasks';\nexport * from './components/Tasks';\nexport { default as Timeline } from './components/Timeline';\nexport * from './components/Timeline';\n"]}
|
package/package.json
CHANGED
|
@@ -1,6 +1,6 @@
|
|
|
1
1
|
{
|
|
2
2
|
"name": "@pega/cosmos-react-work",
|
|
3
|
-
"version": "3.0.0-
|
|
3
|
+
"version": "3.0.0-rc.3",
|
|
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": "3.0.0-
|
|
23
|
+
"@pega/cosmos-react-core": "3.0.0-rc.3",
|
|
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.7",
|
|
@@ -38,7 +38,10 @@
|
|
|
38
38
|
"@storybook/react": "^6.4.19",
|
|
39
39
|
"@storybook/testing-react": "^1.2.4",
|
|
40
40
|
"@storybook/theming": "^6.4.19",
|
|
41
|
+
"@testing-library/jest-dom": "^5.16.2",
|
|
42
|
+
"@testing-library/react": "^12.1.3",
|
|
43
|
+
"@testing-library/user-event": "^13.5.0",
|
|
41
44
|
"enzyme": "^3.11.0",
|
|
42
|
-
"typescript": "~4.
|
|
45
|
+
"typescript": "~4.7.2"
|
|
43
46
|
}
|
|
44
47
|
}
|
|
@@ -1,30 +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
|
-
/** Any actions that will be used for various actions on the CaseView. */
|
|
5
|
-
actions?: Action[];
|
|
6
|
-
/** A callback for when the edit button is clicked */
|
|
7
|
-
onEdit?: () => void;
|
|
8
|
-
/** A Case ID to display in the heading. */
|
|
9
|
-
caseId: string;
|
|
10
|
-
/** A text region for the title of the CaseView. */
|
|
11
|
-
heading: string;
|
|
12
|
-
/** A set of props including an href that will be forwarded to the case heading and caseId. */
|
|
13
|
-
caseLink?: {
|
|
14
|
-
href: string;
|
|
15
|
-
} & ForwardProps;
|
|
16
|
-
/** A set of Link props representing the case parents, rendered as Breadcrumbs. */
|
|
17
|
-
parentCases?: MenuItemProps[];
|
|
18
|
-
/** An icon to serve as a visual for the CaseView. */
|
|
19
|
-
icon?: ReactElement;
|
|
20
|
-
/** Indicates if the current user is following the case. This should be updated based on onFollowedChange. */
|
|
21
|
-
followed?: boolean;
|
|
22
|
-
/** Called when user chooses to follow or unfollow the case. Use this to update followed. */
|
|
23
|
-
onFollowedChange?: (following: boolean) => void;
|
|
24
|
-
/** Ref for the wrapping element. */
|
|
25
|
-
ref?: Ref<HTMLElement>;
|
|
26
|
-
}
|
|
27
|
-
export declare const StyledCaseHeader: import("styled-components").StyledComponent<"header", import("styled-components").DefaultTheme, {}, never>;
|
|
28
|
-
declare const CaseHeader: FunctionComponent<CaseHeaderProps & ForwardProps>;
|
|
29
|
-
export default CaseHeader;
|
|
30
|
-
//# 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,EAAc,iBAAiB,EAAE,YAAY,EAAE,GAAG,EAAmB,MAAM,OAAO,CAAC;AAI1F,OAAO,EACL,MAAM,EAUN,YAAY,EAMZ,aAAa,EAIb,cAAc,EACf,MAAM,yBAAyB,CAAC;AAOjC,MAAM,WAAW,eAAgB,SAAQ,cAAc;IACrD,yEAAyE;IACzE,OAAO,CAAC,EAAE,MAAM,EAAE,CAAC;IACnB,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,QAAA,MAAM,UAAU,EAAE,iBAAiB,CAAC,eAAe,GAAG,YAAY,CA8FjE,CAAC;AAEF,eAAe,UAAU,CAAC"}
|
|
@@ -1,119 +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 } 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} {
|
|
80
|
-
color: ${theme.base.palette['foreground-color']};
|
|
81
|
-
}
|
|
82
|
-
}
|
|
83
|
-
|
|
84
|
-
> ${StyledText} > ${StyledButton} {
|
|
85
|
-
color: ${color};
|
|
86
|
-
}
|
|
87
|
-
`;
|
|
88
|
-
});
|
|
89
|
-
StyledCaseHeaderText.defaultProps = defaultThemeProp;
|
|
90
|
-
const CaseHeader = forwardRef(({ caseId, heading, caseLink = { href: '' }, parentCases, isMediumOrAbove = true, icon, followed, onFollowedChange, actions = [], onEdit, ...restProps }, ref) => {
|
|
91
|
-
const { href, ...restLinkProps } = caseLink;
|
|
92
|
-
const t = useI18n();
|
|
93
|
-
const menuItems = actions.map(action => {
|
|
94
|
-
return {
|
|
95
|
-
...action,
|
|
96
|
-
primary: action.text,
|
|
97
|
-
visual: action.icon ? _jsx(Icon, { name: action.icon }) : null
|
|
98
|
-
};
|
|
99
|
-
});
|
|
100
|
-
return (_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: [...(parentCases || []), { ...restLinkProps, id: caseId, primary: caseId, href }] })] }), _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: {
|
|
101
|
-
items: followed !== undefined
|
|
102
|
-
? [
|
|
103
|
-
{
|
|
104
|
-
id: 'follow',
|
|
105
|
-
primary: followed ? t('unfollow') : t('follow'),
|
|
106
|
-
onClick: () => onFollowedChange?.(!followed)
|
|
107
|
-
},
|
|
108
|
-
...menuItems
|
|
109
|
-
]
|
|
110
|
-
: menuItems,
|
|
111
|
-
scrollAt: 20
|
|
112
|
-
}, popover: isMediumOrAbove
|
|
113
|
-
? {
|
|
114
|
-
portal: true
|
|
115
|
-
}
|
|
116
|
-
: undefined })] })] }));
|
|
117
|
-
});
|
|
118
|
-
export default CaseHeader;
|
|
119
|
-
//# sourceMappingURL=CaseHeader.js.map
|
|
@@ -1 +0,0 @@
|
|
|
1
|
-
{"version":3,"file":"CaseHeader.js","sourceRoot":"","sources":["../../../src/components/CaseHeader/CaseHeader.tsx"],"names":[],"mappings":";AAAA,OAAO,EAAE,UAAU,EAAyD,MAAM,OAAO,CAAC;AAC1F,OAAO,MAAM,EAAE,EAAE,GAAG,EAAE,MAAM,mBAAmB,CAAC;AAChD,OAAO,EAAE,YAAY,EAAE,UAAU,EAAE,aAAa,EAAE,cAAc,EAAE,MAAM,UAAU,CAAC;AAEnF,OAAO,EAEL,WAAW,EACX,IAAI,EACJ,IAAI,EACJ,YAAY,EACZ,IAAI,EACJ,iBAAiB,EACjB,UAAU,EACV,aAAa,EACb,gBAAgB,EAEhB,QAAQ,EACR,iBAAiB,EACjB,IAAI,EACJ,YAAY,EACZ,UAAU,EAEV,MAAM,EACN,UAAU,EACV,OAAO,EAER,MAAM,yBAAyB,CAAC;AACjC,OAAO,EAAE,UAAU,EAAE,MAAM,yDAAyD,CAAC;AACrF,OAAO,KAAK,UAAU,MAAM,+DAA+D,CAAC;AAC5F,OAAO,KAAK,QAAQ,MAAM,6DAA6D,CAAC;AAExF,YAAY,CAAC,UAAU,EAAE,QAAQ,CAAC,CAAC;AA8BnC,MAAM,CAAC,MAAM,gBAAgB,GAAG,MAAM,CAAC,MAAM,CAAC,CAAC,EAAE,KAAK,EAAE,EAAE,EAAE;IAC1D,MAAM,KAAK,GAAG,QAAQ,CAAC,GAAG,EAAE,CAAC,aAAa,CAAC,KAAK,CAAC,IAAI,CAAC,OAAO,CAAC,eAAe,CAAC,CAAC,CAAC,CAAC;IAEjF,OAAO,GAAG,CAAA;wBACY,KAAK,CAAC,IAAI,CAAC,OAAO,CAAC,eAAe,CAAC;aAC9C,KAAK;wBACM,KAAK,CAAC,IAAI,CAAC,OAAO;;;MAGpC,UAAU;eACD,KAAK,CAAC,IAAI,CAAC,OAAO,CAAC,kBAAkB,CAAC;iBACpC,KAAK,CAAC,IAAI,CAAC,SAAS,CAAC,CAAC,OAAO,GAAG,CAAC;;GAE/C,CAAC;AACJ,CAAC,CAAC,CAAC;AAEH,gBAAgB,CAAC,YAAY,GAAG,gBAAgB,CAAC;AAEjD,MAAM,kBAAkB,GAAG,MAAM,CAAC,GAAG,CAAC,CAAC,EAAE,KAAK,EAAE,EAAE,EAAE;IAClD,MAAM,OAAO,GAAG,KAAK,CAAC,IAAI,CAAC,OAAO,CAAC;IACnC,MAAM,YAAY,GAAG,KAAK,CAAC,IAAI,CAAC,eAAe,CAAC,CAAC;IACjD,MAAM,eAAe,GAAG,QAAQ,CAAC,GAAG,EAAE;QACpC,MAAM,EAAE,SAAS,EAAE,GAAG,UAAU,CAAC,KAAK,CAAC,IAAI,CAAC,OAAO,CAAC,eAAe,CAAC,CAAC,CAAC;QACtE,OAAO,SAAS,GAAG,IAAI,CAAC,CAAC,CAAC,oBAAoB,CAAC,CAAC,CAAC,0BAA0B,CAAC;IAC9E,CAAC,CAAC,CAAC;IAEH,OAAO,GAAG,CAAA;kBACM,eAAe;0BACP,YAAY;sBAChB,OAAO;uBACN,OAAO;MACxB,UAAU;4BACY,OAAO;;;GAGhC,CAAC;AACJ,CAAC,CAAC,CAAC;AAEH,kBAAkB,CAAC,YAAY,GAAG,gBAAgB,CAAC;AAEnD,MAAM,oBAAoB,GAAG,MAAM,CAAC,KAAK,CAAA;;;MAGnC,YAAY;;;;kBAIA,CAAC,EAAE,KAAK,EAAE,EAAE,EAAE,CAAC,KAAK,CAAC,IAAI,CAAC,MAAM,CAAC,gBAAgB,CAAC;;CAEnE,CAAC;AAEF,oBAAoB,CAAC,YAAY,GAAG,gBAAgB,CAAC;AAErD,MAAM,oBAAoB,GAAG,MAAM,CAAC,GAAG,CAAC,CAAC,EAAE,KAAK,EAAE,EAAE,EAAE;IACpD,MAAM,KAAK,GAAG,aAAa,CAAC,KAAK,CAAC,IAAI,CAAC,OAAO,CAAC,eAAe,CAAC,CAAC,CAAC;IACjE,MAAM,gBAAgB,GAAG,QAAQ,CAAC,GAAG,EAAE,CAAC,cAAc,CAAC,GAAG,EAAE,KAAK,CAAC,CAAC,CAAC;IACpE,MAAM,QAAQ,GAAG,iBAAiB,CAAC,KAAK,CAAC,IAAI,CAAC,WAAW,CAAC,EAAE,KAAK,CAAC,IAAI,CAAC,YAAY,CAAC,CAAC,CAAC;IACtF,OAAO,GAAG,CAAA;;;MAGN,iBAAiB;;;;;iBAKN,gBAAgB;qBACZ,QAAQ,CAAC,CAAC;;;;;;;wBAOP,KAAK,CAAC,IAAI,CAAC,MAAM,CAAC,gBAAgB,CAAC;;;;QAInD,aAAa;iBACJ,KAAK,CAAC,IAAI,CAAC,OAAO,CAAC,kBAAkB,CAAC;;;;QAI/C,UAAU,MAAM,YAAY;eACrB,KAAK;;GAEjB,CAAC;AACJ,CAAC,CAAC,CAAC;AAEH,oBAAoB,CAAC,YAAY,GAAG,gBAAgB,CAAC;AAErD,MAAM,UAAU,GAAsD,UAAU,CAC9E,CACE,EACE,MAAM,EACN,OAAO,EACP,QAAQ,GAAG,EAAE,IAAI,EAAE,EAAE,EAAE,EACvB,WAAW,EACX,eAAe,GAAG,IAAI,EACtB,IAAI,EACJ,QAAQ,EACR,gBAAgB,EAChB,OAAO,GAAG,EAAE,EACZ,MAAM,EACN,GAAG,SAAS,EACqB,EACnC,GAA2B,EAC3B,EAAE;IACF,MAAM,EAAE,IAAI,EAAE,GAAG,aAAa,EAAE,GAAG,QAAQ,CAAC;IAC5C,MAAM,CAAC,GAAG,OAAO,EAAE,CAAC;IACpB,MAAM,SAAS,GAAoB,OAAO,CAAC,GAAG,CAAC,MAAM,CAAC,EAAE;QACtD,OAAO;YACL,GAAG,MAAM;YACT,OAAO,EAAE,MAAM,CAAC,IAAI;YACpB,MAAM,EAAE,MAAM,CAAC,IAAI,CAAC,CAAC,CAAC,KAAC,IAAI,IAAC,IAAI,EAAE,MAAM,CAAC,IAAI,GAAI,CAAC,CAAC,CAAC,IAAI;SACzD,CAAC;IACJ,CAAC,CAAC,CAAC;IAEH,OAAO,CACL,MAAC,IAAI,OACC,SAAS,EACb,EAAE,EAAE,gBAAgB,EACpB,SAAS,EAAE,EAAE,GAAG,EAAE,CAAC,EAAE,UAAU,EAAE,OAAO,EAAE,EAC1C,GAAG,EAAE,GAAG,aAEP,IAAI,IAAI,CACP,KAAC,IAAI,IAAC,SAAS,QAAC,IAAI,EAAE,EAAE,MAAM,EAAE,CAAC,EAAE,EAAE,EAAE,EAAE,kBAAkB,YACxD,IAAI,GACA,CACR,EACD,MAAC,IAAI,IACH,EAAE,EAAE,oBAAoB,EACxB,SAAS,EAAE,EAAE,SAAS,EAAE,QAAQ,EAAE,EAClC,IAAI,EAAE,EAAE,IAAI,EAAE,CAAC,EAAE,MAAM,EAAE,CAAC,EAAE,KAAK,EAAE,GAAG,EAAE,aAExC,KAAC,IAAI,IAAC,OAAO,EAAC,IAAI,YACf,IAAI,CAAC,CAAC,CAAC,CACN,KAAC,IAAI,OAAK,aAAa,EAAE,IAAI,EAAE,IAAI,YAChC,OAAO,GACH,CACR,CAAC,CAAC,CAAC,CACF,OAAO,CACR,GACI,EACP,KAAC,WAAW,IACV,IAAI,EAAE,CAAC,GAAG,CAAC,WAAW,IAAI,EAAE,CAAC,EAAE,EAAE,GAAG,aAAa,EAAE,EAAE,EAAE,MAAM,EAAE,OAAO,EAAE,MAAM,EAAE,IAAI,EAAE,CAAC,GACvF,IACG,EACP,0BACG,MAAM,IAAI,CACT,KAAC,MAAM,IAAC,IAAI,QAAC,OAAO,EAAC,QAAQ,EAAC,OAAO,EAAE,MAAM,EAAE,KAAK,EAAE,CAAC,CAAC,MAAM,CAAC,YAC7D,KAAC,IAAI,IAAC,IAAI,EAAC,QAAQ,GAAG,GACf,CACV,EACD,KAAC,UAAU,IACT,IAAI,EAAC,MAAM,EACX,QAAQ,QACR,OAAO,EAAC,QAAQ,EAChB,IAAI,EAAE,CAAC,CAAC,SAAS,CAAC,EAClB,IAAI,EAAE;4BACJ,KAAK,EACH,QAAQ,KAAK,SAAS;gCACpB,CAAC,CAAC;oCACE;wCACE,EAAE,EAAE,QAAQ;wCACZ,OAAO,EAAE,QAAQ,CAAC,CAAC,CAAC,CAAC,CAAC,UAAU,CAAC,CAAC,CAAC,CAAC,CAAC,CAAC,QAAQ,CAAC;wCAC/C,OAAO,EAAE,GAAG,EAAE,CAAC,gBAAgB,EAAE,CAAC,CAAC,QAAQ,CAAC;qCAC7C;oCACD,GAAG,SAAS;iCACb;gCACH,CAAC,CAAC,SAAS;4BACf,QAAQ,EAAE,EAAE;yBACb,EACD,OAAO,EACL,eAAe;4BACb,CAAC,CAAC;gCACE,MAAM,EAAE,IAAI;6BACb;4BACH,CAAC,CAAC,SAAS,GAEf,IACE,IACD,CACR,CAAC;AACJ,CAAC,CACF,CAAC;AAEF,eAAe,UAAU,CAAC","sourcesContent":["import { forwardRef, FunctionComponent, ReactElement, Ref, PropsWithoutRef } 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} 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 /** Any actions that will be used for various actions on the CaseView. */\n actions?: 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} {\n color: ${theme.base.palette['foreground-color']};\n }\n }\n\n > ${StyledText} > ${StyledButton} {\n color: ${color};\n }\n `;\n});\n\nStyledCaseHeaderText.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 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 <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={[...(parentCases || []), { ...restLinkProps, id: caseId, primary: caseId, href }]}\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 );\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,CAqKnE,CAAC;AAEF,eAAe,WAAW,CAAC"}
|
|
@@ -1,130 +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, 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
|
-
onEdit,
|
|
82
|
-
isMediumOrAbove,
|
|
83
|
-
caseId,
|
|
84
|
-
parentCases,
|
|
85
|
-
heading,
|
|
86
|
-
caseLink,
|
|
87
|
-
icon,
|
|
88
|
-
followed,
|
|
89
|
-
onFollowedChange,
|
|
90
|
-
style: {
|
|
91
|
-
maxHeight: ['expanding', 'collapsed', 'collapsing'].includes(animationState)
|
|
92
|
-
? `${collapsedHeight}px`
|
|
93
|
-
: 'auto'
|
|
94
|
-
}
|
|
95
|
-
};
|
|
96
|
-
useEffect(() => {
|
|
97
|
-
if (['expanded'].includes(animationState)) {
|
|
98
|
-
setCollapsedHeight(headerRef.current?.offsetHeight || 0);
|
|
99
|
-
}
|
|
100
|
-
}, [animationState, headerRef.current]);
|
|
101
|
-
const expandOrCollapseLabel = expanded ? t('collapse') : t('expand');
|
|
102
|
-
const expandOrCollapseA11y = expanded ? t('collapse_summary_panel') : t('expand_summary_panel');
|
|
103
|
-
return (_jsxs(Flex, { as: StyledCaseSummary, expanded: expanded, fixedWidth: fixedWidth, container: { direction: 'column' }, item: { shrink: 0 }, ref: caseSummaryRef, style: {
|
|
104
|
-
marginTop: ['collapsing', 'expanding'].includes(animationState)
|
|
105
|
-
? `${collapsedHeight}px`
|
|
106
|
-
: 0
|
|
107
|
-
}, onMouseEnter: () => {
|
|
108
|
-
setShowExpandCollapse(true);
|
|
109
|
-
}, onMouseLeave: () => {
|
|
110
|
-
setShowExpandCollapse(false);
|
|
111
|
-
}, ...restProps, children: [collapsible ? (_jsxs(_Fragment, { children: [_jsx(StyledExpandCollapseButton, { onClick: () => setExpanded(!expanded), expanded: expanded, headerHeight: collapsedHeight, animationState: animationState, label: ['expanded', 'collapsed'].includes(animationState)
|
|
112
|
-
? expandOrCollapseLabel
|
|
113
|
-
: undefined, "aria-label": ['expanding', 'collapsing'].includes(animationState)
|
|
114
|
-
? expandOrCollapseA11y
|
|
115
|
-
: 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: () => {
|
|
116
|
-
setAnimStateAndUpdateParent('collapsing');
|
|
117
|
-
onBeforeCollapse?.();
|
|
118
|
-
}, onAfterExpand: () => {
|
|
119
|
-
setAnimStateAndUpdateParent('collapsed');
|
|
120
|
-
onAfterCollapse?.();
|
|
121
|
-
}, onBeforeCollapse: () => {
|
|
122
|
-
setAnimStateAndUpdateParent('expanding');
|
|
123
|
-
onBeforeExpand?.();
|
|
124
|
-
}, onAfterCollapse: () => {
|
|
125
|
-
setAnimStateAndUpdateParent('expanded');
|
|
126
|
-
onAfterExpand?.();
|
|
127
|
-
}, 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 }))] })] }));
|
|
128
|
-
});
|
|
129
|
-
export default CaseSummary;
|
|
130
|
-
//# 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 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 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
|