@pega/cosmos-react-work 10.0.0-build.1.9 → 10.0.0-build.2.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/CaseView/CaseView.d.ts.map +1 -1
- package/lib/components/CaseView/CaseView.js +5 -11
- package/lib/components/CaseView/CaseView.js.map +1 -1
- package/lib/components/CaseView/CaseView.styles.d.ts.map +1 -1
- package/lib/components/CaseView/CaseView.styles.js +7 -20
- package/lib/components/CaseView/CaseView.styles.js.map +1 -1
- package/lib/components/Details/Details.styles.js +5 -5
- package/lib/components/Details/Details.styles.js.map +1 -1
- package/lib/components/GenAICoach/GenAICoach.styles.d.ts.map +1 -1
- package/lib/components/GenAICoach/GenAICoach.styles.js +3 -4
- package/lib/components/GenAICoach/GenAICoach.styles.js.map +1 -1
- package/lib/components/InteractionNotification/InteractionNotification.d.ts +2 -2
- package/lib/components/InteractionNotification/InteractionNotification.d.ts.map +1 -1
- package/lib/components/InteractionNotification/InteractionNotification.js +6 -4
- package/lib/components/InteractionNotification/InteractionNotification.js.map +1 -1
- package/lib/components/SearchResults/SearchResults.d.ts.map +1 -1
- package/lib/components/SearchResults/SearchResults.js +4 -2
- package/lib/components/SearchResults/SearchResults.js.map +1 -1
- package/lib/components/SearchResults/SearchResults.styles.js +3 -3
- package/lib/components/SearchResults/SearchResults.styles.js.map +1 -1
- package/lib/components/Shortcuts/Shortcuts.d.ts.map +1 -1
- package/lib/components/Shortcuts/Shortcuts.js +5 -8
- package/lib/components/Shortcuts/Shortcuts.js.map +1 -1
- package/lib/components/Shortcuts/Shortcuts.styles.d.ts +4 -7
- package/lib/components/Shortcuts/Shortcuts.styles.d.ts.map +1 -1
- package/lib/components/Shortcuts/Shortcuts.styles.js +29 -32
- package/lib/components/Shortcuts/Shortcuts.styles.js.map +1 -1
- package/lib/components/Stages/Stages.d.ts +4 -2
- package/lib/components/Stages/Stages.d.ts.map +1 -1
- package/lib/components/Stages/Stages.js +99 -88
- package/lib/components/Stages/Stages.js.map +1 -1
- package/lib/components/Stages/Stages.styles.d.ts +14 -0
- package/lib/components/Stages/Stages.styles.d.ts.map +1 -1
- package/lib/components/Stages/Stages.styles.js +179 -39
- package/lib/components/Stages/Stages.styles.js.map +1 -1
- package/lib/components/Stages/Stages.test-ids.d.ts +2 -0
- package/lib/components/Stages/Stages.test-ids.d.ts.map +1 -0
- package/lib/components/Stages/Stages.test-ids.js +3 -0
- package/lib/components/Stages/Stages.test-ids.js.map +1 -0
- package/lib/components/Stages/Stages.types.d.ts +3 -3
- package/lib/components/Stages/Stages.types.d.ts.map +1 -1
- package/lib/components/Stages/Stages.types.js.map +1 -1
- package/lib/components/Stages/index.d.ts +1 -0
- package/lib/components/Stages/index.d.ts.map +1 -1
- package/lib/components/Stages/index.js +1 -0
- package/lib/components/Stages/index.js.map +1 -1
- package/lib/components/Tasks/TaskCard.d.ts +8 -0
- package/lib/components/Tasks/TaskCard.d.ts.map +1 -0
- package/lib/components/Tasks/TaskCard.js +39 -0
- package/lib/components/Tasks/TaskCard.js.map +1 -0
- package/lib/components/Tasks/TaskCards.d.ts +9 -0
- package/lib/components/Tasks/TaskCards.d.ts.map +1 -0
- package/lib/components/Tasks/TaskCards.js +39 -0
- package/lib/components/Tasks/TaskCards.js.map +1 -0
- package/lib/components/Tasks/TaskList.d.ts +11 -1
- package/lib/components/Tasks/TaskList.d.ts.map +1 -1
- package/lib/components/Tasks/TaskList.js +8 -5
- package/lib/components/Tasks/TaskList.js.map +1 -1
- package/lib/components/Tasks/Tasks.d.ts +40 -5
- package/lib/components/Tasks/Tasks.d.ts.map +1 -1
- package/lib/components/Tasks/Tasks.js +5 -1
- package/lib/components/Tasks/Tasks.js.map +1 -1
- package/lib/components/Tasks/Tasks.test-ids.d.ts +1 -1
- package/lib/components/Tasks/Tasks.test-ids.d.ts.map +1 -1
- package/lib/components/Tasks/Tasks.test-ids.js +1 -1
- package/lib/components/Tasks/Tasks.test-ids.js.map +1 -1
- package/lib/components/Tasks/index.d.ts +1 -1
- package/lib/components/Tasks/index.d.ts.map +1 -1
- package/lib/components/Tasks/index.js.map +1 -1
- package/package.json +3 -3
|
@@ -66,8 +66,8 @@ StyledSearchSummaryItem.defaultProps = defaultThemeProp;
|
|
|
66
66
|
export const StyledFilters = styled.div(({ theme }) => {
|
|
67
67
|
return css `
|
|
68
68
|
position: sticky;
|
|
69
|
-
top: var(--appshell-offset, 0);
|
|
70
|
-
max-height: calc(100vh - var(--appshell-offset, 0rem));
|
|
69
|
+
top: var(--appshell-top-offset, 0);
|
|
70
|
+
max-height: calc(100vh - var(--appshell-top-offset, 0rem));
|
|
71
71
|
overflow: auto;
|
|
72
72
|
> ${StyledFilter}, ${StyledSearchSummaryItem} {
|
|
73
73
|
border-bottom: 0.0125rem solid ${theme.base.palette['border-line']};
|
|
@@ -81,7 +81,7 @@ export const StyledResults = styled.div(({ theme }) => {
|
|
|
81
81
|
background-color: ${theme.base.palette['primary-background']};
|
|
82
82
|
padding: calc(${theme.base.spacing} * 2);
|
|
83
83
|
position: relative;
|
|
84
|
-
min-height: calc(100vh - var(--appshell-offset, 0rem));
|
|
84
|
+
min-height: calc(100vh - var(--appshell-top-offset, 0rem));
|
|
85
85
|
`;
|
|
86
86
|
});
|
|
87
87
|
StyledResults.defaultProps = defaultThemeProp;
|
|
@@ -1 +1 @@
|
|
|
1
|
-
{"version":3,"file":"SearchResults.styles.js","sourceRoot":"","sources":["../../../src/components/SearchResults/SearchResults.styles.ts"],"names":[],"mappings":"AAAA,OAAO,MAAM,EAAE,EAAE,GAAG,EAAE,MAAM,mBAAmB,CAAC;AAEhD,OAAO,EACL,MAAM,EACN,iBAAiB,EACjB,gBAAgB,EAChB,UAAU,EACV,iBAAiB,EACjB,YAAY,EACb,MAAM,yBAAyB,CAAC;AAEjC,MAAM,CAAC,MAAM,mBAAmB,GAAG,MAAM,CAAC,GAAG,CAAA;;CAE5C,CAAC;AAEF,mBAAmB,CAAC,YAAY,GAAG,gBAAgB,CAAC;AAEpD,MAAM,CAAC,MAAM,iBAAiB,GAAG,MAAM,CAAC,IAAI,CAAC,CAAC,EAAE,KAAK,EAAE,EAAE,IAAI,EAAE,EAAE,EAAE,EAAE;IACnE,OAAO,GAAG,CAAA;+BACmB,IAAI,CAAC,OAAO;GACxC,CAAC;AACJ,CAAC,CAAC,CAAC;AAEH,iBAAiB,CAAC,YAAY,GAAG,gBAAgB,CAAC;AAElD,MAAM,CAAC,MAAM,eAAe,GAAG,MAAM,CAAC,IAAI,CAAC,CAAC,EAAE,KAAK,EAAE,EAAE,IAAI,EAAE,EAAE,EAAE,EAAE;IACjE,OAAO,GAAG,CAAA;mBACO,IAAI,CAAC,aAAa,CAAC,CAAC,WAAW,CAAC;GAChD,CAAC;AACJ,CAAC,CAAC,CAAC;AAEH,eAAe,CAAC,YAAY,GAAG,gBAAgB,CAAC;AAEhD,MAAM,CAAC,MAAM,wBAAwB,GAAG,MAAM,CAAC,GAAG,CAChD,CAAC,EACC,KAAK,EAAE,EACL,IAAI,EAAE,EAAE,OAAO,EAAE,EAClB,EACF,EAAE,EAAE;IACH,OAAO,GAAG,CAAA;+BACiB,OAAO;KACjC,CAAC;AACJ,CAAC,CACF,CAAC;AAEF,wBAAwB,CAAC,YAAY,GAAG,gBAAgB,CAAC;AAEzD,MAAM,CAAC,MAAM,qBAAqB,GAAG,MAAM,CAAC,EAAE,CAC5C,CAAC,EACC,KAAK,EAAE,EACL,IAAI,EAAE,EAAE,OAAO,EAAE,EAClB,EACF,EAAE,EAAE;IACH,OAAO,GAAG,CAAA;;;kCAGoB,OAAO;KACpC,CAAC;AACJ,CAAC,CACF,CAAC;AAEF,qBAAqB,CAAC,YAAY,GAAG,gBAAgB,CAAC;AAEtD,MAAM,CAAC,MAAM,YAAY,GAAG,MAAM,CAAC,GAAG,CAAA,EAAE,CAAC;AAEzC,YAAY,CAAC,YAAY,GAAG,gBAAgB,CAAC;AAE7C,MAAM,CAAC,MAAM,kBAAkB,GAAG,MAAM,CAAC,MAAM,CAAC,CAAC,CAAC,EAAE,KAAK,EAAE,EAAE,IAAI,EAAE,EAAE,EAAE,EAAE;IACvE,MAAM,QAAQ,GAAG,iBAAiB,CAAC,IAAI,CAAC,WAAW,CAAC,EAAE,IAAI,CAAC,YAAY,CAAC,CAAC,CAAC;IAE1E,MAAM,EAAE,GAAG,EAAE,GAAG,YAAY,EAAE,CAAC;IAC/B,OAAO,GAAG,CAAA;;iBAEK,QAAQ,CAAC,EAAE;;MAEtB,UAAU;;;8BAGc,IAAI,CAAC,SAAS,CAAC,KAAK,IAAI,IAAI,CAAC,SAAS,CAAC,MAAM,CAAC,IAAI;;;8BAGlD,UAAU;;;;+BAIT,UAAU;+BACV,GAAG,CAAC,CAAC,CAAC,GAAG,CAAC,CAAC,CAAC,IAAI;;GAE5C,CAAC;AACJ,CAAC,CAAC,CAAC;AAEH,kBAAkB,CAAC,YAAY,GAAG,gBAAgB,CAAC;AAEnD,MAAM,CAAC,MAAM,uBAAuB,GAAG,MAAM,CAAC,GAAG,CAC/C,CAAC,EACC,KAAK,EAAE,EACL,IAAI,EAAE,EAAE,OAAO,EAAE,EAClB,EACF,EAAE,EAAE,CAAC,GAAG,CAAA;uBACY,OAAO;;QAEtB,iBAAiB;iCACQ,OAAO;;GAErC,CACF,CAAC;AAEF,uBAAuB,CAAC,YAAY,GAAG,gBAAgB,CAAC;AAExD,MAAM,CAAC,MAAM,aAAa,GAAG,MAAM,CAAC,GAAG,CAAC,CAAC,EAAE,KAAK,EAAE,EAAE,EAAE;IACpD,OAAO,GAAG,CAAA;;;;;QAKJ,YAAY,KAAK,uBAAuB;uCACT,KAAK,CAAC,IAAI,CAAC,OAAO,CAAC,aAAa,CAAC;sBAClD,KAAK,CAAC,IAAI,CAAC,OAAO;;GAErC,CAAC;AACJ,CAAC,CAAC,CAAC;AAEH,aAAa,CAAC,YAAY,GAAG,gBAAgB,CAAC;AAE9C,MAAM,CAAC,MAAM,aAAa,GAAG,MAAM,CAAC,GAAG,CAAC,CAAC,EAAE,KAAK,EAAE,EAAE,EAAE;IACpD,OAAO,GAAG,CAAA;wBACY,KAAK,CAAC,IAAI,CAAC,OAAO,CAAC,oBAAoB,CAAC;oBAC5C,KAAK,CAAC,IAAI,CAAC,OAAO;;;GAGnC,CAAC;AACJ,CAAC,CAAC,CAAC;AAEH,aAAa,CAAC,YAAY,GAAG,gBAAgB,CAAC","sourcesContent":["import styled, { css } from 'styled-components';\n\nimport {\n Button,\n calculateFontSize,\n defaultThemeProp,\n StyledIcon,\n StyledSearchInput,\n useDirection\n} from '@pega/cosmos-react-core';\n\nexport const StyledSearchResults = styled.div`\n min-height: inherit;\n`;\n\nStyledSearchResults.defaultProps = defaultThemeProp;\n\nexport const StyledFilterTitle = styled.span(({ theme: { base } }) => {\n return css`\n padding-bottom: calc(2 * ${base.spacing});\n `;\n});\n\nStyledFilterTitle.defaultProps = defaultThemeProp;\n\nexport const StyledCountText = styled.span(({ theme: { base } }) => {\n return css`\n font-weight: ${base['font-weight']['semi-bold']};\n `;\n});\n\nStyledCountText.defaultProps = defaultThemeProp;\n\nexport const StyledModalFilterContent = styled.div(\n ({\n theme: {\n base: { spacing }\n }\n }) => {\n return css`\n margin-top: calc(0.5 * ${spacing});\n `;\n }\n);\n\nStyledModalFilterContent.defaultProps = defaultThemeProp;\n\nexport const StyledSelectedFilters = styled.ul(\n ({\n theme: {\n base: { spacing }\n }\n }) => {\n return css`\n list-style: none;\n overflow-x: auto;\n padding-block: calc(0.5 * ${spacing});\n `;\n }\n);\n\nStyledSelectedFilters.defaultProps = defaultThemeProp;\n\nexport const StyledFilter = styled.div``;\n\nStyledFilter.defaultProps = defaultThemeProp;\n\nexport const StyledFilterButton = styled(Button)(({ theme: { base } }) => {\n const fontSize = calculateFontSize(base['font-size'], base['font-scale']);\n\n const { rtl } = useDirection();\n return css`\n display: inline-flex;\n font-size: ${fontSize.xl};\n\n ${StyledIcon} {\n height: 1em;\n width: 1em;\n transition: transform ${base.animation.speed} ${base.animation.timing.ease};\n }\n\n &[aria-expanded='true'] ${StyledIcon} {\n transform: rotate(0);\n }\n\n &[aria-expanded='false'] ${StyledIcon} {\n transform: rotate(calc(${rtl ? '1' : '-1'} * 90deg));\n }\n `;\n});\n\nStyledFilterButton.defaultProps = defaultThemeProp;\n\nexport const StyledSearchSummaryItem = styled.div(\n ({\n theme: {\n base: { spacing }\n }\n }) => css`\n column-gap: calc(${spacing} * 1);\n\n + ${StyledSearchInput} {\n margin-block-start: calc(${spacing} * 1);\n }\n `\n);\n\nStyledSearchSummaryItem.defaultProps = defaultThemeProp;\n\nexport const StyledFilters = styled.div(({ theme }) => {\n return css`\n position: sticky;\n top: var(--appshell-offset, 0);\n max-height: calc(100vh - var(--appshell-offset, 0rem));\n overflow: auto;\n > ${StyledFilter}, ${StyledSearchSummaryItem} {\n border-bottom: 0.0125rem solid ${theme.base.palette['border-line']};\n padding: calc(${theme.base.spacing} * 2);\n }\n `;\n});\n\nStyledFilters.defaultProps = defaultThemeProp;\n\nexport const StyledResults = styled.div(({ theme }) => {\n return css`\n background-color: ${theme.base.palette['primary-background']};\n padding: calc(${theme.base.spacing} * 2);\n position: relative;\n min-height: calc(100vh - var(--appshell-offset, 0rem));\n `;\n});\n\nStyledResults.defaultProps = defaultThemeProp;\n"]}
|
|
1
|
+
{"version":3,"file":"SearchResults.styles.js","sourceRoot":"","sources":["../../../src/components/SearchResults/SearchResults.styles.ts"],"names":[],"mappings":"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","sourcesContent":["import styled, { css } from 'styled-components';\n\nimport {\n Button,\n calculateFontSize,\n defaultThemeProp,\n StyledIcon,\n StyledSearchInput,\n useDirection\n} from '@pega/cosmos-react-core';\n\nexport const StyledSearchResults = styled.div`\n min-height: inherit;\n`;\n\nStyledSearchResults.defaultProps = defaultThemeProp;\n\nexport const StyledFilterTitle = styled.span(({ theme: { base } }) => {\n return css`\n padding-bottom: calc(2 * ${base.spacing});\n `;\n});\n\nStyledFilterTitle.defaultProps = defaultThemeProp;\n\nexport const StyledCountText = styled.span(({ theme: { base } }) => {\n return css`\n font-weight: ${base['font-weight']['semi-bold']};\n `;\n});\n\nStyledCountText.defaultProps = defaultThemeProp;\n\nexport const StyledModalFilterContent = styled.div(\n ({\n theme: {\n base: { spacing }\n }\n }) => {\n return css`\n margin-top: calc(0.5 * ${spacing});\n `;\n }\n);\n\nStyledModalFilterContent.defaultProps = defaultThemeProp;\n\nexport const StyledSelectedFilters = styled.ul(\n ({\n theme: {\n base: { spacing }\n }\n }) => {\n return css`\n list-style: none;\n overflow-x: auto;\n padding-block: calc(0.5 * ${spacing});\n `;\n }\n);\n\nStyledSelectedFilters.defaultProps = defaultThemeProp;\n\nexport const StyledFilter = styled.div``;\n\nStyledFilter.defaultProps = defaultThemeProp;\n\nexport const StyledFilterButton = styled(Button)(({ theme: { base } }) => {\n const fontSize = calculateFontSize(base['font-size'], base['font-scale']);\n\n const { rtl } = useDirection();\n return css`\n display: inline-flex;\n font-size: ${fontSize.xl};\n\n ${StyledIcon} {\n height: 1em;\n width: 1em;\n transition: transform ${base.animation.speed} ${base.animation.timing.ease};\n }\n\n &[aria-expanded='true'] ${StyledIcon} {\n transform: rotate(0);\n }\n\n &[aria-expanded='false'] ${StyledIcon} {\n transform: rotate(calc(${rtl ? '1' : '-1'} * 90deg));\n }\n `;\n});\n\nStyledFilterButton.defaultProps = defaultThemeProp;\n\nexport const StyledSearchSummaryItem = styled.div(\n ({\n theme: {\n base: { spacing }\n }\n }) => css`\n column-gap: calc(${spacing} * 1);\n\n + ${StyledSearchInput} {\n margin-block-start: calc(${spacing} * 1);\n }\n `\n);\n\nStyledSearchSummaryItem.defaultProps = defaultThemeProp;\n\nexport const StyledFilters = styled.div(({ theme }) => {\n return css`\n position: sticky;\n top: var(--appshell-top-offset, 0);\n max-height: calc(100vh - var(--appshell-top-offset, 0rem));\n overflow: auto;\n > ${StyledFilter}, ${StyledSearchSummaryItem} {\n border-bottom: 0.0125rem solid ${theme.base.palette['border-line']};\n padding: calc(${theme.base.spacing} * 2);\n }\n `;\n});\n\nStyledFilters.defaultProps = defaultThemeProp;\n\nexport const StyledResults = styled.div(({ theme }) => {\n return css`\n background-color: ${theme.base.palette['primary-background']};\n padding: calc(${theme.base.spacing} * 2);\n position: relative;\n min-height: calc(100vh - var(--appshell-top-offset, 0rem));\n `;\n});\n\nStyledResults.defaultProps = defaultThemeProp;\n"]}
|
|
@@ -1 +1 @@
|
|
|
1
|
-
{"version":3,"file":"Shortcuts.d.ts","sourceRoot":"","sources":["../../../src/components/Shortcuts/Shortcuts.tsx"],"names":[],"mappings":"AACA,OAAO,KAAK,EAAa,eAAe,EAAE,MAAM,OAAO,CAAC;
|
|
1
|
+
{"version":3,"file":"Shortcuts.d.ts","sourceRoot":"","sources":["../../../src/components/Shortcuts/Shortcuts.tsx"],"names":[],"mappings":"AACA,OAAO,KAAK,EAAa,eAAe,EAAE,MAAM,OAAO,CAAC;AAqBxD,OAAO,KAAK,EAAE,cAAc,EAAgB,MAAM,mBAAmB,CAAC;;;;AAyKtE,wBAA2D"}
|
|
@@ -1,9 +1,9 @@
|
|
|
1
1
|
import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
|
|
2
2
|
import { useRef, forwardRef } from 'react';
|
|
3
3
|
import { parseToRgb } from 'polished';
|
|
4
|
-
import { Card, CardContent, CardHeader, EmptyState, Flex, Text, VisuallyHiddenText, registerIcon, tryCatch, useArrows,
|
|
4
|
+
import { Card, CardContent, CardHeader, EmptyState, Flex, Text, VisuallyHiddenText, registerIcon, tryCatch, useArrows, useI18n, useTestIds, useTheme, withTestIds } from '@pega/cosmos-react-core';
|
|
5
5
|
import * as openNewTabIcon from '@pega/cosmos-react-core/lib/components/Icon/icons/open.icon';
|
|
6
|
-
import { StyledExternalIcon, StyledLabelRow, StyledShortcutsCard, StyledShortcutsCardButton, StyledShortcutsCardsContainer, StyledShortcutsCategoriesContainer, StyledShortcutsCategoryHeading, StyledShortcutsCardIcon } from './Shortcuts.styles';
|
|
6
|
+
import { StyledExternalIcon, StyledLabelRow, StyledShortcutsCard, StyledShortcutsCardButton, StyledShortcutsCardsContainer, StyledShortcutsCardsWrapper, StyledShortcutsCategoriesContainer, StyledShortcutsCategoryHeading, StyledShortcutsCardIcon, StyledText } from './Shortcuts.styles';
|
|
7
7
|
import { getShortcutsTestIds } from './Shortcuts.test-ids';
|
|
8
8
|
registerIcon(openNewTabIcon);
|
|
9
9
|
const itemLinkProps = (item) => {
|
|
@@ -12,7 +12,7 @@ const itemLinkProps = (item) => {
|
|
|
12
12
|
}
|
|
13
13
|
return { onClick: item.onClick };
|
|
14
14
|
};
|
|
15
|
-
const CardItem = ({ item, iconBackground, variant }) => (_jsx(StyledShortcutsCard, { children: _jsxs(StyledShortcutsCardButton, { variant: 'link', layoutVariant: variant, ...itemLinkProps(item), children: [_jsx(StyledShortcutsCardIcon, { name: item.icon, background: iconBackground, shape: 'square', layoutVariant: variant }), _jsxs(StyledLabelRow, { children: [_jsx(
|
|
15
|
+
const CardItem = ({ item, iconBackground, variant }) => (_jsx(StyledShortcutsCard, { children: _jsxs(StyledShortcutsCardButton, { variant: 'link', layoutVariant: variant, ...itemLinkProps(item), children: [_jsx(StyledShortcutsCardIcon, { name: item.icon, background: iconBackground, shape: 'square', layoutVariant: variant }), _jsxs(StyledLabelRow, { children: [_jsx(StyledText, { children: item.label }), item.type === 'external' && _jsx(StyledExternalIcon, { name: 'open' })] })] }) }));
|
|
16
16
|
const Shortcuts = forwardRef(function Shortcuts({ heading, items = [], categories, showHeader = true, variant = 'inline', testId, ...restProps }, ref) {
|
|
17
17
|
const t = useI18n();
|
|
18
18
|
const testIds = useTestIds(testId, getShortcutsTestIds);
|
|
@@ -25,17 +25,14 @@ const Shortcuts = forwardRef(function Shortcuts({ heading, items = [], categorie
|
|
|
25
25
|
const categoriesContainerRef = useRef(null);
|
|
26
26
|
useArrows(flatListRef, { dir: 'both', cycle: true });
|
|
27
27
|
useArrows(categoriesContainerRef, { dir: 'both', cycle: true });
|
|
28
|
-
const isWide = useBreakpoint('sm', {
|
|
29
|
-
breakpointRef: categories ? categoriesContainerRef : flatListRef
|
|
30
|
-
});
|
|
31
28
|
const emptyState = _jsx(EmptyState, { message: t('no_items'), "data-testid": testIds.emptyState });
|
|
32
29
|
const withCardShell = (content) => (_jsxs(Card, { ...restProps, "data-testid": testIds.root, ref: ref, children: [_jsx(CardHeader, { children: _jsx(Text, { variant: 'h2', children: heading ?? t('shortcuts') }) }), _jsx(CardContent, { children: content })] }));
|
|
33
30
|
if (categories) {
|
|
34
31
|
const visibleCategories = categories.filter(cat => cat.items.length > 0);
|
|
35
|
-
const categorySections = (_jsx(StyledShortcutsCategoriesContainer, { ref: categoriesContainerRef,
|
|
32
|
+
const categorySections = (_jsx(StyledShortcutsCategoriesContainer, { ref: categoriesContainerRef, children: visibleCategories.map(cat => (_jsxs(Flex, { container: { direction: 'column' }, "aria-labelledby": `cat-${cat.id}`, "data-testid": testIds.categorySection, as: 'section', children: [_jsx(StyledShortcutsCategoryHeading, { id: `cat-${cat.id}`, "data-testid": testIds.categoryHeading, variant: 'h3', children: cat.label }), _jsx(StyledShortcutsCardsContainer, { role: 'list', "aria-label": cat.label, children: cat.items.map(item => (_jsx(CardItem, { item: item, iconBackground: iconBackground, variant: variant }, item.id))) })] }, cat.id))) }));
|
|
36
33
|
return withCardShell(visibleCategories.length === 0 ? emptyState : categorySections);
|
|
37
34
|
}
|
|
38
|
-
const cardGrid = (_jsx(
|
|
35
|
+
const cardGrid = (_jsx(StyledShortcutsCardsWrapper, { children: _jsx(StyledShortcutsCardsContainer, { ref: flatListRef, role: 'list', "data-testid": testIds.list, "aria-label": heading ?? t('shortcuts'), children: items.map(item => (_jsx(CardItem, { item: item, iconBackground: iconBackground, variant: variant }, item.id))) }) }));
|
|
39
36
|
if (!showHeader) {
|
|
40
37
|
if (items.length === 0)
|
|
41
38
|
return null;
|
|
@@ -1 +1 @@
|
|
|
1
|
-
{"version":3,"file":"Shortcuts.js","sourceRoot":"","sources":["../../../src/components/Shortcuts/Shortcuts.tsx"],"names":[],"mappings":";AAAA,OAAO,EAAE,MAAM,EAAE,UAAU,EAAE,MAAM,OAAO,CAAC;AAE3C,OAAO,EAAE,UAAU,EAAE,MAAM,UAAU,CAAC;AAEtC,OAAO,EACL,IAAI,EACJ,WAAW,EACX,UAAU,EACV,UAAU,EACV,IAAI,EACJ,IAAI,EACJ,kBAAkB,EAClB,YAAY,EACZ,QAAQ,EACR,SAAS,EACT,
|
|
1
|
+
{"version":3,"file":"Shortcuts.js","sourceRoot":"","sources":["../../../src/components/Shortcuts/Shortcuts.tsx"],"names":[],"mappings":"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","sourcesContent":["import { useRef, forwardRef } from 'react';\nimport type { ReactNode, PropsWithoutRef } from 'react';\nimport { parseToRgb } from 'polished';\n\nimport {\n Card,\n CardContent,\n CardHeader,\n EmptyState,\n Flex,\n Text,\n VisuallyHiddenText,\n registerIcon,\n tryCatch,\n useArrows,\n useI18n,\n useTestIds,\n useTheme,\n withTestIds\n} from '@pega/cosmos-react-core';\nimport * as openNewTabIcon from '@pega/cosmos-react-core/lib/components/Icon/icons/open.icon';\n\nimport type { ShortcutsProps, ShortcutItem } from './Shortcuts.types';\nimport {\n StyledExternalIcon,\n StyledLabelRow,\n StyledShortcutsCard,\n StyledShortcutsCardButton,\n StyledShortcutsCardsContainer,\n StyledShortcutsCardsWrapper,\n StyledShortcutsCategoriesContainer,\n StyledShortcutsCategoryHeading,\n StyledShortcutsCardIcon,\n StyledText\n} from './Shortcuts.styles';\nimport { getShortcutsTestIds } from './Shortcuts.test-ids';\n\nregisterIcon(openNewTabIcon);\n\nconst itemLinkProps = (\n item: ShortcutItem\n): {\n href?: string;\n target?: string;\n rel?: string;\n onClick?: () => void;\n} => {\n if (item.type === 'external') {\n return { href: item.href, target: '_blank', rel: 'noopener noreferrer' };\n }\n\n return { onClick: item.onClick };\n};\n\nconst CardItem = ({\n item,\n iconBackground,\n variant\n}: {\n item: ShortcutItem;\n iconBackground: string;\n variant: 'stacked' | 'inline';\n}) => (\n <StyledShortcutsCard>\n <StyledShortcutsCardButton variant='link' layoutVariant={variant} {...itemLinkProps(item)}>\n <StyledShortcutsCardIcon\n name={item.icon}\n background={iconBackground}\n shape='square'\n layoutVariant={variant}\n />\n <StyledLabelRow>\n <StyledText>{item.label}</StyledText>\n\n {item.type === 'external' && <StyledExternalIcon name='open' />}\n </StyledLabelRow>\n </StyledShortcutsCardButton>\n </StyledShortcutsCard>\n);\n\nconst Shortcuts = forwardRef(function Shortcuts(\n {\n heading,\n items = [],\n categories,\n showHeader = true,\n variant = 'inline',\n testId,\n ...restProps\n }: PropsWithoutRef<ShortcutsProps>,\n ref: ShortcutsProps['ref']\n) {\n const t = useI18n();\n const testIds = useTestIds(testId, getShortcutsTestIds);\n const {\n base: {\n palette: { 'brand-accent': brandAccent, 'brand-primary': brandPrimary }\n }\n } = useTheme();\n\n const iconBackground =\n tryCatch(() => {\n parseToRgb(brandAccent);\n return brandAccent;\n }) ?? brandPrimary;\n\n const flatListRef = useRef<HTMLUListElement>(null);\n const categoriesContainerRef = useRef<HTMLDivElement>(null);\n\n useArrows(flatListRef, { dir: 'both', cycle: true });\n useArrows(categoriesContainerRef, { dir: 'both', cycle: true });\n\n const emptyState = <EmptyState message={t('no_items')} data-testid={testIds.emptyState} />;\n\n const withCardShell = (content: ReactNode) => (\n <Card {...restProps} data-testid={testIds.root} ref={ref}>\n <CardHeader>\n <Text variant='h2'>{heading ?? t('shortcuts')}</Text>\n </CardHeader>\n <CardContent>{content}</CardContent>\n </Card>\n );\n\n if (categories) {\n const visibleCategories = categories.filter(cat => cat.items.length > 0);\n\n const categorySections = (\n <StyledShortcutsCategoriesContainer ref={categoriesContainerRef}>\n {visibleCategories.map(cat => (\n <Flex\n container={{ direction: 'column' }}\n key={cat.id}\n aria-labelledby={`cat-${cat.id}`}\n data-testid={testIds.categorySection}\n as='section'\n >\n <StyledShortcutsCategoryHeading\n id={`cat-${cat.id}`}\n data-testid={testIds.categoryHeading}\n variant='h3'\n >\n {cat.label}\n </StyledShortcutsCategoryHeading>\n\n <StyledShortcutsCardsContainer role='list' aria-label={cat.label}>\n {cat.items.map(item => (\n <CardItem\n key={item.id}\n item={item}\n iconBackground={iconBackground}\n variant={variant}\n />\n ))}\n </StyledShortcutsCardsContainer>\n </Flex>\n ))}\n </StyledShortcutsCategoriesContainer>\n );\n\n return withCardShell(visibleCategories.length === 0 ? emptyState : categorySections);\n }\n\n const cardGrid = (\n <StyledShortcutsCardsWrapper>\n <StyledShortcutsCardsContainer\n ref={flatListRef}\n role='list'\n data-testid={testIds.list}\n aria-label={heading ?? t('shortcuts')}\n >\n {items.map(item => (\n <CardItem key={item.id} item={item} iconBackground={iconBackground} variant={variant} />\n ))}\n </StyledShortcutsCardsContainer>\n </StyledShortcutsCardsWrapper>\n );\n\n if (!showHeader) {\n if (items.length === 0) return null;\n\n return (\n <div data-testid={testIds.root} {...restProps} ref={ref}>\n <VisuallyHiddenText>{heading ?? t('shortcuts')}</VisuallyHiddenText>\n {cardGrid}\n </div>\n );\n }\n\n return withCardShell(items.length === 0 ? emptyState : cardGrid);\n});\n\nexport default withTestIds(Shortcuts, getShortcutsTestIds);\n"]}
|
|
@@ -1,10 +1,6 @@
|
|
|
1
|
-
export declare const
|
|
2
|
-
|
|
3
|
-
|
|
4
|
-
}>> & string;
|
|
5
|
-
export declare const StyledShortcutsCategoriesContainer: import("styled-components/dist/types").IStyledComponentBase<"web", import("styled-components/dist/types").Substitute<import("react").DetailedHTMLProps<import("react").HTMLAttributes<HTMLDivElement>, HTMLDivElement>, {
|
|
6
|
-
isSmallOrAbove: boolean;
|
|
7
|
-
}>> & string;
|
|
1
|
+
export declare const StyledShortcutsCardsWrapper: import("styled-components/dist/types").IStyledComponentBase<"web", import("styled-components").FastOmit<import("react").DetailedHTMLProps<import("react").HTMLAttributes<HTMLDivElement>, HTMLDivElement>, never>> & string;
|
|
2
|
+
export declare const StyledShortcutsCardsContainer: import("styled-components/dist/types").IStyledComponentBase<"web", import("styled-components").FastOmit<import("react").DetailedHTMLProps<import("react").HTMLAttributes<HTMLUListElement>, HTMLUListElement>, never>> & string;
|
|
3
|
+
export declare const StyledShortcutsCategoriesContainer: import("styled-components/dist/types").IStyledComponentBase<"web", import("styled-components").FastOmit<import("react").DetailedHTMLProps<import("react").HTMLAttributes<HTMLDivElement>, HTMLDivElement>, never>> & string;
|
|
8
4
|
export declare const StyledShortcutsCategoryHeading: import("styled-components/dist/types").IStyledComponentBase<"web", import("styled-components").FastOmit<Omit<Omit<import("@pega/cosmos-react-core").TextProps, "ref"> & import("react").RefAttributes<HTMLHeadingElement | HTMLSpanElement> & import("@pega/cosmos-react-core").ForwardProps, "ref"> & {
|
|
9
5
|
ref?: ((instance: HTMLHeadingElement | HTMLSpanElement | null) => void | import("react").DO_NOT_USE_OR_YOU_WILL_BE_FIRED_CALLBACK_REF_RETURN_VALUES[keyof import("react").DO_NOT_USE_OR_YOU_WILL_BE_FIRED_CALLBACK_REF_RETURN_VALUES]) | import("react").RefObject<HTMLHeadingElement | HTMLSpanElement> | null | undefined;
|
|
10
6
|
}, never>> & string & Omit<import("@pega/cosmos-react-core").ForwardRefForwardPropsComponent<import("@pega/cosmos-react-core").TextProps>, keyof import("react").Component<any, {}, any>>;
|
|
@@ -18,5 +14,6 @@ export declare const StyledShortcutsCardIcon: import("styled-components/dist/typ
|
|
|
18
14
|
layoutVariant: "stacked" | "inline";
|
|
19
15
|
}>> & string & Omit<import("react").ForwardRefExoticComponent<import("@pega/cosmos-react-core").IconProps>, keyof import("react").Component<any, {}, any>>;
|
|
20
16
|
export declare const StyledLabelRow: import("styled-components/dist/types").IStyledComponentBase<"web", import("styled-components").FastOmit<import("react").DetailedHTMLProps<import("react").HTMLAttributes<HTMLSpanElement>, HTMLSpanElement>, never>> & string;
|
|
17
|
+
export declare const StyledText: import("styled-components/dist/types").IStyledComponentBase<"web", import("styled-components").FastOmit<import("react").DetailedHTMLProps<import("react").HTMLAttributes<HTMLSpanElement>, HTMLSpanElement>, never>> & string;
|
|
21
18
|
export declare const StyledExternalIcon: import("styled-components/dist/types").IStyledComponentBase<"web", import("styled-components/dist/types").Substitute<import("@pega/cosmos-react-core").IconProps & import("styled-components/dist/types").BaseObject, import("styled-components/dist/types").BaseObject>> & string & Omit<import("react").ForwardRefExoticComponent<import("@pega/cosmos-react-core").IconProps>, keyof import("react").Component<any, {}, any>>;
|
|
22
19
|
//# sourceMappingURL=Shortcuts.styles.d.ts.map
|
|
@@ -1 +1 @@
|
|
|
1
|
-
{"version":3,"file":"Shortcuts.styles.d.ts","sourceRoot":"","sources":["../../../src/components/Shortcuts/Shortcuts.styles.ts"],"names":[],"mappings":"AAKA,eAAO,MAAM,
|
|
1
|
+
{"version":3,"file":"Shortcuts.styles.d.ts","sourceRoot":"","sources":["../../../src/components/Shortcuts/Shortcuts.styles.ts"],"names":[],"mappings":"AAKA,eAAO,MAAM,2BAA2B,6NAEvC,CAAC;AAEF,eAAO,MAAM,6BAA6B,iOAqBxC,CAAC;AAIH,eAAO,MAAM,kCAAkC,6NAS9C,CAAC;AAIF,eAAO,MAAM,8BAA8B;;yLAIzC,CAAC;AAIH,eAAO,MAAM,mBAAmB,6NAG/B,CAAC;AAEF,eAAO,MAAM,yBAAyB;;;mBAAmC,SAAS,GAAG,QAAQ;oLAwC3F,CAAC;AAIH,eAAO,MAAM,uBAAuB;mBAAiC,SAAS,GAAG,QAAQ;0JAUxF,CAAC;AAIF,eAAO,MAAM,cAAc,+NAM1B,CAAC;AAIF,eAAO,MAAM,UAAU,+NAMtB,CAAC;AAIF,eAAO,MAAM,kBAAkB,kaAE9B,CAAC"}
|
|
@@ -1,48 +1,40 @@
|
|
|
1
1
|
import styled, { css } from 'styled-components';
|
|
2
2
|
import { mix } from 'polished';
|
|
3
3
|
import { Button, defaultThemeProp, Icon, Text, tryCatch } from '@pega/cosmos-react-core';
|
|
4
|
-
export const
|
|
4
|
+
export const StyledShortcutsCardsWrapper = styled.div `
|
|
5
|
+
container-type: inline-size;
|
|
6
|
+
`;
|
|
7
|
+
export const StyledShortcutsCardsContainer = styled.ul(({ theme: { base } }) => {
|
|
5
8
|
return css `
|
|
6
9
|
display: grid;
|
|
7
|
-
grid-template-columns: minmax(
|
|
10
|
+
grid-template-columns: repeat(auto-fill, minmax(min(calc(${base.spacing} * 30), 100%), 1fr));
|
|
8
11
|
gap: ${base.spacing};
|
|
9
12
|
list-style: none;
|
|
10
13
|
padding: ${base.spacing} 0;
|
|
11
14
|
margin: 0;
|
|
12
15
|
|
|
13
|
-
${
|
|
14
|
-
|
|
16
|
+
@container (min-width: ${parseFloat(base.breakpoints.sm)}rem) {
|
|
17
|
+
grid-template-columns: repeat(2, minmax(0, 1fr));
|
|
15
18
|
grid-auto-rows: 1fr;
|
|
16
|
-
|
|
17
|
-
? 'repeat(auto-fill, minmax(14rem, 1fr))'
|
|
18
|
-
: 'repeat(auto-fit, minmax(14rem, 14rem))'};
|
|
19
|
-
justify-content: ${showHeader ? 'start' : 'center'};
|
|
19
|
+
justify-content: start;
|
|
20
20
|
align-items: stretch;
|
|
21
21
|
width: 100%;
|
|
22
|
-
|
|
22
|
+
}
|
|
23
|
+
|
|
24
|
+
@container (min-width: ${parseFloat(base.breakpoints.md)}rem) {
|
|
25
|
+
grid-template-columns: repeat(4, minmax(0, 1fr));
|
|
26
|
+
}
|
|
23
27
|
`;
|
|
24
28
|
});
|
|
25
29
|
StyledShortcutsCardsContainer.defaultProps = defaultThemeProp;
|
|
26
|
-
export const StyledShortcutsCategoriesContainer = styled.div(({ theme: { base }
|
|
27
|
-
|
|
28
|
-
|
|
29
|
-
|
|
30
|
-
|
|
31
|
-
|
|
32
|
-
|
|
33
|
-
|
|
34
|
-
css `
|
|
35
|
-
grid-template-columns: repeat(auto-fill, minmax(14rem, 1fr));
|
|
36
|
-
align-items: start;
|
|
37
|
-
`}
|
|
38
|
-
|
|
39
|
-
${!isSmallOrAbove &&
|
|
40
|
-
css `
|
|
41
|
-
padding-inline: calc(${base.spacing} * 0.5);
|
|
42
|
-
padding-block: ${base.spacing};
|
|
43
|
-
`}
|
|
44
|
-
`;
|
|
45
|
-
});
|
|
30
|
+
export const StyledShortcutsCategoriesContainer = styled.div(({ theme: { base } }) => css `
|
|
31
|
+
display: grid;
|
|
32
|
+
grid-template-columns: minmax(0, 1fr);
|
|
33
|
+
gap: calc(${base.spacing} * 2);
|
|
34
|
+
width: 100%;
|
|
35
|
+
padding-block-start: ${base.spacing};
|
|
36
|
+
container-type: inline-size;
|
|
37
|
+
`);
|
|
46
38
|
StyledShortcutsCategoriesContainer.defaultProps = defaultThemeProp;
|
|
47
39
|
export const StyledShortcutsCategoryHeading = styled(Text)(({ theme: { base } }) => {
|
|
48
40
|
return css `
|
|
@@ -66,6 +58,7 @@ export const StyledShortcutsCardButton = styled(Button)(({ theme: { base, compon
|
|
|
66
58
|
border-radius: ${base['border-radius']};
|
|
67
59
|
background: ${base.palette['primary-background']};
|
|
68
60
|
padding-inline: calc(${base.spacing} * 2);
|
|
61
|
+
padding-block: calc(${base.spacing} * 1.5);
|
|
69
62
|
|
|
70
63
|
&:hover {
|
|
71
64
|
background: ${hoverBackgroundColor};
|
|
@@ -74,9 +67,8 @@ export const StyledShortcutsCardButton = styled(Button)(({ theme: { base, compon
|
|
|
74
67
|
${layoutVariant === 'stacked' &&
|
|
75
68
|
css `
|
|
76
69
|
flex-direction: column;
|
|
70
|
+
justify-content: center;
|
|
77
71
|
gap: calc(${base.spacing} * 2);
|
|
78
|
-
padding-block-start: calc(${base.spacing} * 4);
|
|
79
|
-
padding-block-end: calc(${base.spacing} * 3);
|
|
80
72
|
text-align: center;
|
|
81
73
|
min-height: 8rem;
|
|
82
74
|
`}
|
|
@@ -85,7 +77,6 @@ export const StyledShortcutsCardButton = styled(Button)(({ theme: { base, compon
|
|
|
85
77
|
css `
|
|
86
78
|
flex-direction: row;
|
|
87
79
|
gap: calc(${base.spacing} * 1.5);
|
|
88
|
-
padding-block: calc(${base.spacing} * 1.5);
|
|
89
80
|
text-align: start;
|
|
90
81
|
`}
|
|
91
82
|
`;
|
|
@@ -107,6 +98,12 @@ export const StyledLabelRow = styled.span(({ theme: { base } }) => css `
|
|
|
107
98
|
gap: calc(${base.spacing} * 0.5);
|
|
108
99
|
`);
|
|
109
100
|
StyledLabelRow.defaultProps = defaultThemeProp;
|
|
101
|
+
export const StyledText = styled.span(({ theme: { base } }) => css `
|
|
102
|
+
font-weight: ${base['font-weight']['semi-bold']};
|
|
103
|
+
font-size: 1em;
|
|
104
|
+
color: CanvasText;
|
|
105
|
+
`);
|
|
106
|
+
StyledText.defaultProps = defaultThemeProp;
|
|
110
107
|
export const StyledExternalIcon = styled(Icon) `
|
|
111
108
|
flex-shrink: 0;
|
|
112
109
|
`;
|
|
@@ -1 +1 @@
|
|
|
1
|
-
{"version":3,"file":"Shortcuts.styles.js","sourceRoot":"","sources":["../../../src/components/Shortcuts/Shortcuts.styles.ts"],"names":[],"mappings":"AAAA,OAAO,MAAM,EAAE,EAAE,GAAG,EAAE,MAAM,mBAAmB,CAAC;AAChD,OAAO,EAAE,GAAG,EAAE,MAAM,UAAU,CAAC;AAE/B,OAAO,EAAE,MAAM,EAAE,gBAAgB,EAAE,IAAI,EAAE,IAAI,EAAE,QAAQ,EAAE,MAAM,yBAAyB,CAAC;AAEzF,MAAM,CAAC,MAAM,6BAA6B,GAAG,MAAM,CAAC,EAAE,
|
|
1
|
+
{"version":3,"file":"Shortcuts.styles.js","sourceRoot":"","sources":["../../../src/components/Shortcuts/Shortcuts.styles.ts"],"names":[],"mappings":"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","sourcesContent":["import styled, { css } from 'styled-components';\nimport { mix } from 'polished';\n\nimport { Button, defaultThemeProp, Icon, Text, tryCatch } from '@pega/cosmos-react-core';\n\nexport const StyledShortcutsCardsWrapper = styled.div`\n container-type: inline-size;\n`;\n\nexport const StyledShortcutsCardsContainer = styled.ul(({ theme: { base } }) => {\n return css`\n display: grid;\n grid-template-columns: repeat(auto-fill, minmax(min(calc(${base.spacing} * 30), 100%), 1fr));\n gap: ${base.spacing};\n list-style: none;\n padding: ${base.spacing} 0;\n margin: 0;\n\n @container (min-width: ${parseFloat(base.breakpoints.sm)}rem) {\n grid-template-columns: repeat(2, minmax(0, 1fr));\n grid-auto-rows: 1fr;\n justify-content: start;\n align-items: stretch;\n width: 100%;\n }\n\n @container (min-width: ${parseFloat(base.breakpoints.md)}rem) {\n grid-template-columns: repeat(4, minmax(0, 1fr));\n }\n `;\n});\n\nStyledShortcutsCardsContainer.defaultProps = defaultThemeProp;\n\nexport const StyledShortcutsCategoriesContainer = styled.div(\n ({ theme: { base } }) => css`\n display: grid;\n grid-template-columns: minmax(0, 1fr);\n gap: calc(${base.spacing} * 2);\n width: 100%;\n padding-block-start: ${base.spacing};\n container-type: inline-size;\n `\n);\n\nStyledShortcutsCategoriesContainer.defaultProps = defaultThemeProp;\n\nexport const StyledShortcutsCategoryHeading = styled(Text)(({ theme: { base } }) => {\n return css`\n margin-block-end: ${base.spacing};\n `;\n});\n\nStyledShortcutsCategoryHeading.defaultProps = defaultThemeProp;\n\nexport const StyledShortcutsCard = styled.li`\n display: flex;\n flex-direction: column;\n`;\n\nexport const StyledShortcutsCardButton = styled(Button)<{ layoutVariant: 'stacked' | 'inline' }>(({\n theme: { base, components },\n layoutVariant\n}) => {\n const hoverBackgroundColor = tryCatch(() =>\n mix(0.9, base.palette['primary-background'], components.button['secondary-color'])\n );\n\n return css`\n display: flex;\n align-items: center;\n justify-content: flex-start;\n flex: 1;\n width: 100%;\n border: 0.0625rem solid ${base.palette['border-line']};\n border-radius: ${base['border-radius']};\n background: ${base.palette['primary-background']};\n padding-inline: calc(${base.spacing} * 2);\n padding-block: calc(${base.spacing} * 1.5);\n\n &:hover {\n background: ${hoverBackgroundColor};\n }\n\n ${layoutVariant === 'stacked' &&\n css`\n flex-direction: column;\n justify-content: center;\n gap: calc(${base.spacing} * 2);\n text-align: center;\n min-height: 8rem;\n `}\n\n ${layoutVariant === 'inline' &&\n css`\n flex-direction: row;\n gap: calc(${base.spacing} * 1.5);\n text-align: start;\n `}\n `;\n});\n\nStyledShortcutsCardButton.defaultProps = defaultThemeProp;\n\nexport const StyledShortcutsCardIcon = styled(Icon)<{ layoutVariant: 'stacked' | 'inline' }>(\n ({ layoutVariant }) => css`\n flex-shrink: 0;\n\n ${layoutVariant === 'stacked' &&\n css`\n width: 3rem;\n height: 3rem;\n `}\n `\n);\n\nStyledShortcutsCardIcon.defaultProps = defaultThemeProp;\n\nexport const StyledLabelRow = styled.span(\n ({ theme: { base } }) => css`\n display: flex;\n align-items: center;\n gap: calc(${base.spacing} * 0.5);\n `\n);\n\nStyledLabelRow.defaultProps = defaultThemeProp;\n\nexport const StyledText = styled.span(\n ({ theme: { base } }) => css`\n font-weight: ${base['font-weight']['semi-bold']};\n font-size: 1em;\n color: CanvasText;\n `\n);\n\nStyledText.defaultProps = defaultThemeProp;\n\nexport const StyledExternalIcon = styled(Icon)`\n flex-shrink: 0;\n`;\n\nStyledExternalIcon.defaultProps = defaultThemeProp;\n"]}
|
|
@@ -1,5 +1,7 @@
|
|
|
1
1
|
import type { ForwardRefForwardPropsComponent } from '@pega/cosmos-react-core';
|
|
2
2
|
import type { StagesProps } from './Stages.types';
|
|
3
|
-
declare const
|
|
4
|
-
|
|
3
|
+
declare const _default: ForwardRefForwardPropsComponent<StagesProps> & {
|
|
4
|
+
getTestIds: (testIdProp?: import("@pega/cosmos-react-core").TestIdProp["testId"]) => import("@pega/cosmos-react-core").TestIdsRecord<readonly []>;
|
|
5
|
+
};
|
|
6
|
+
export default _default;
|
|
5
7
|
//# sourceMappingURL=Stages.d.ts.map
|
|
@@ -1 +1 @@
|
|
|
1
|
-
{"version":3,"file":"Stages.d.ts","sourceRoot":"","sources":["../../../src/components/Stages/Stages.tsx"],"names":[],"mappings":"
|
|
1
|
+
{"version":3,"file":"Stages.d.ts","sourceRoot":"","sources":["../../../src/components/Stages/Stages.tsx"],"names":[],"mappings":"AAyBA,OAAO,KAAK,EAAE,+BAA+B,EAAgB,MAAM,yBAAyB,CAAC;AAG7F,OAAO,KAAK,EAAE,WAAW,EAAe,MAAM,gBAAgB,CAAC;;;;AA+Q/D,wBAAqD"}
|
|
@@ -1,60 +1,72 @@
|
|
|
1
1
|
import { jsx as _jsx, jsxs as _jsxs, Fragment as _Fragment } from "react/jsx-runtime";
|
|
2
2
|
import { useState, useRef, useEffect, forwardRef, Fragment } from 'react';
|
|
3
|
-
import {
|
|
4
|
-
import { Icon, registerIcon, Flex, useI18n, Button, Modal, useBreakpoint, debounce, useModalManager, useConsolidatedRef, useUID, InfoDialog, useArrows, useDirection, useAfterInitialEffect, VisuallyHiddenText, tryCatch } from '@pega/cosmos-react-core';
|
|
3
|
+
import { Icon, registerIcon, Flex, useI18n, Button, Modal, useBreakpoint, useModalManager, useConsolidatedRef, useUID, InfoDialog, useArrows, useDirection, useAfterInitialEffect, VisuallyHiddenText, withTestIds, useTestIds, useElement, useFocusWithin, isInstance } from '@pega/cosmos-react-core';
|
|
5
4
|
import * as checkIcon from '@pega/cosmos-react-core/lib/components/Icon/icons/check.icon';
|
|
5
|
+
import { getStagesTestIds } from './Stages.test-ids';
|
|
6
6
|
import StageGlimpse from './StageGlimpse';
|
|
7
|
-
import { StyledInnerStage, StyledStageCompleteIcon, StyledStage, StyledStageContainer, StyledStageGlimpse, StyledStages, StyledStagesDescription, StyledStageText } from './Stages.styles';
|
|
7
|
+
import { StyledInnerStage, StyledStageCompleteIcon, StyledStage, StyledStageContainer, StyledStageGlimpse, StyledStages, StyledStagesWrapper, StyledStagesDescription, StyledStageText, StyledSentinel } from './Stages.styles';
|
|
8
8
|
registerIcon(checkIcon);
|
|
9
|
-
const Stages = forwardRef(function Stages({ current, stages, caseTitle, onLoadStage, readOnly = false, ...restProps }, ref) {
|
|
9
|
+
const Stages = forwardRef(function Stages({ current, stages, caseTitle, onLoadStage, readOnly = false, testId, ...restProps }, ref) {
|
|
10
10
|
const t = useI18n();
|
|
11
|
+
const testIds = useTestIds(testId, getStagesTestIds);
|
|
11
12
|
const stagesRef = useConsolidatedRef(ref);
|
|
13
|
+
const wrapperRef = useRef(null);
|
|
14
|
+
const startSentinelRef = useRef(null);
|
|
15
|
+
const endSentinelRef = useRef(null);
|
|
12
16
|
const stagesRefs = useRef(new Map());
|
|
13
|
-
const [target, setTarget] =
|
|
17
|
+
const [target, setTarget] = useElement(null);
|
|
14
18
|
const [targetStageId, setTargetStageId] = useState(null);
|
|
19
|
+
const [currentStageBtn, setCurrentStageBtn] = useState(null);
|
|
15
20
|
const { create: createModal } = useModalManager();
|
|
16
21
|
const modalMethods = useRef();
|
|
17
22
|
const [showModal, setShowModal] = useState(false);
|
|
18
23
|
const isSmallOrAbove = useBreakpoint('sm');
|
|
19
|
-
const [compressedView, setCompressedView] = useState(false);
|
|
20
|
-
const [minExpandedWidth, setMinExpandedWidth] = useState(0);
|
|
21
24
|
const { rtl } = useDirection();
|
|
22
25
|
useArrows(stagesRef, {
|
|
23
26
|
cycle: false,
|
|
24
27
|
selector: ':scope > li > button:not([aria-expanded])',
|
|
25
28
|
dir: 'left-right',
|
|
26
|
-
initialFocusElement:
|
|
27
|
-
});
|
|
29
|
+
initialFocusElement: currentStageBtn
|
|
30
|
+
}, [currentStageBtn]);
|
|
28
31
|
const dialogId = useUID();
|
|
29
32
|
const descriptionId = useUID();
|
|
30
33
|
useEffect(() => {
|
|
31
|
-
|
|
32
|
-
|
|
33
|
-
|
|
34
|
-
|
|
35
|
-
|
|
36
|
-
|
|
37
|
-
|
|
38
|
-
|
|
39
|
-
|
|
40
|
-
|
|
41
|
-
|
|
42
|
-
|
|
43
|
-
|
|
44
|
-
|
|
45
|
-
|
|
34
|
+
const el = stagesRef.current;
|
|
35
|
+
const wrapper = wrapperRef.current;
|
|
36
|
+
const startSentinel = startSentinelRef.current;
|
|
37
|
+
const endSentinel = endSentinelRef.current;
|
|
38
|
+
if (!el || !wrapper || !startSentinel || !endSentinel)
|
|
39
|
+
return;
|
|
40
|
+
const fadeValue = 'var(--stages-fade-width)';
|
|
41
|
+
const observer = new IntersectionObserver(entries => {
|
|
42
|
+
for (const entry of entries) {
|
|
43
|
+
const visible = entry.isIntersecting;
|
|
44
|
+
if (entry.target === startSentinel) {
|
|
45
|
+
wrapper.style.setProperty('--stages-fade-start', visible ? '0rem' : fadeValue);
|
|
46
|
+
}
|
|
47
|
+
else if (entry.target === endSentinel) {
|
|
48
|
+
wrapper.style.setProperty('--stages-fade-end', visible ? '0rem' : fadeValue);
|
|
46
49
|
}
|
|
47
|
-
}, {
|
|
48
|
-
root: stagesRef.current,
|
|
49
|
-
rootMargin: tryCatch(() => remToPx(0.0625), () => '1px'),
|
|
50
|
-
threshold: 1
|
|
51
|
-
});
|
|
52
|
-
if (stagesRef.current.lastElementChild) {
|
|
53
|
-
intersectionObserver.observe(stagesRef.current.lastElementChild);
|
|
54
|
-
return () => intersectionObserver.disconnect();
|
|
55
50
|
}
|
|
51
|
+
}, { root: el, threshold: 0 });
|
|
52
|
+
observer.observe(startSentinel);
|
|
53
|
+
observer.observe(endSentinel);
|
|
54
|
+
return () => observer.disconnect();
|
|
55
|
+
}, [stages.length]);
|
|
56
|
+
useEffect(() => {
|
|
57
|
+
const el = stagesRef.current;
|
|
58
|
+
const currentBtn = el?.querySelector('[aria-current="step"]');
|
|
59
|
+
currentBtn?.scrollIntoView({ inline: 'center', behavior: 'auto', block: 'nearest' });
|
|
60
|
+
}, [current]); // re-center whenever the active stage changes
|
|
61
|
+
useFocusWithin([stagesRef], focused => {
|
|
62
|
+
if (focused && isInstance(document.activeElement, HTMLButtonElement)) {
|
|
63
|
+
document.activeElement.scrollIntoView({
|
|
64
|
+
inline: 'center',
|
|
65
|
+
behavior: 'smooth',
|
|
66
|
+
block: 'nearest'
|
|
67
|
+
});
|
|
56
68
|
}
|
|
57
|
-
}
|
|
69
|
+
});
|
|
58
70
|
const stagesToLoad = onLoadStage
|
|
59
71
|
? stages.filter(stage => !Array.isArray(stage.steps)).map(stage => stage.id)
|
|
60
72
|
: [];
|
|
@@ -84,60 +96,59 @@ const Stages = forwardRef(function Stages({ current, stages, caseTitle, onLoadSt
|
|
|
84
96
|
children: renderModalStages()
|
|
85
97
|
});
|
|
86
98
|
}, [stagesToLoad.length]);
|
|
87
|
-
return (_jsxs(_Fragment, { children: [_jsx(Flex, { ...restProps, container: true, as: StyledStages, ref: stagesRef, dir: rtl ? 'rtl' : 'ltr', "aria-label": t('stages_label'), "aria-describedby": descriptionId, children: stages.map(
|
|
88
|
-
|
|
89
|
-
|
|
90
|
-
|
|
91
|
-
|
|
92
|
-
|
|
93
|
-
|
|
94
|
-
|
|
95
|
-
|
|
96
|
-
|
|
97
|
-
|
|
98
|
-
|
|
99
|
-
|
|
100
|
-
|
|
101
|
-
|
|
102
|
-
|
|
103
|
-
|
|
104
|
-
|
|
105
|
-
|
|
106
|
-
|
|
107
|
-
|
|
108
|
-
|
|
109
|
-
|
|
110
|
-
|
|
111
|
-
|
|
112
|
-
|
|
113
|
-
|
|
114
|
-
|
|
115
|
-
|
|
116
|
-
|
|
117
|
-
|
|
118
|
-
|
|
119
|
-
|
|
120
|
-
|
|
121
|
-
|
|
122
|
-
|
|
123
|
-
|
|
124
|
-
|
|
125
|
-
|
|
126
|
-
|
|
127
|
-
|
|
128
|
-
|
|
129
|
-
|
|
130
|
-
|
|
131
|
-
|
|
132
|
-
|
|
133
|
-
|
|
134
|
-
|
|
135
|
-
|
|
136
|
-
|
|
137
|
-
|
|
138
|
-
|
|
139
|
-
|
|
140
|
-
}) }), _jsx(StyledStagesDescription, { id: descriptionId, children: t('stages_description') })] }));
|
|
99
|
+
return (_jsxs(_Fragment, { children: [_jsx(StyledStagesWrapper, { ref: wrapperRef, "data-testid": testIds.root, children: _jsxs(Flex, { ...restProps, container: true, as: StyledStages, ref: stagesRef, dir: rtl ? 'rtl' : 'ltr', "aria-label": t('stages_label'), "aria-describedby": descriptionId, children: [_jsx(StyledSentinel, { ref: startSentinelRef, "aria-hidden": 'true' }), stages.map(stage => {
|
|
100
|
+
const isCurrent = stage.id === current;
|
|
101
|
+
let stageStatusText = t(stage.completed ? 'completed' : 'not_started');
|
|
102
|
+
if (isCurrent)
|
|
103
|
+
stageStatusText = t('current');
|
|
104
|
+
const hasToLoad = stagesToLoad.includes(stage.id);
|
|
105
|
+
let stageStatus;
|
|
106
|
+
if (stage.completed) {
|
|
107
|
+
stageStatus = 'completed';
|
|
108
|
+
}
|
|
109
|
+
else if (isCurrent) {
|
|
110
|
+
stageStatus = 'current';
|
|
111
|
+
}
|
|
112
|
+
else {
|
|
113
|
+
stageStatus = 'pending';
|
|
114
|
+
}
|
|
115
|
+
return (_jsxs(Fragment, { children: [_jsx(Flex, { as: StyledStageContainer, item: { grow: 1, shrink: 0 }, readOnly: readOnly, children: _jsx(Flex, { container: { justify: 'center', alignItems: 'center' }, as: StyledStage, item: { grow: 1, shrink: 0 }, status: stageStatus, readOnly: readOnly, "aria-current": isCurrent ? 'step' : undefined, "aria-label": t('stages_stage_label', [stage.name, stageStatusText]), ref: (el) => {
|
|
116
|
+
if (el) {
|
|
117
|
+
stagesRefs.current.set(stage.id, el);
|
|
118
|
+
if (isCurrent)
|
|
119
|
+
setCurrentStageBtn(prev => (prev !== el ? el : prev));
|
|
120
|
+
}
|
|
121
|
+
else {
|
|
122
|
+
stagesRefs.current.delete(stage.id);
|
|
123
|
+
if (isCurrent)
|
|
124
|
+
setCurrentStageBtn(null);
|
|
125
|
+
}
|
|
126
|
+
}, "aria-expanded": targetStageId === stage.id && Boolean(target) && isSmallOrAbove
|
|
127
|
+
? true
|
|
128
|
+
: undefined, "aria-controls": targetStageId === stage.id && target && isSmallOrAbove ? dialogId : undefined, ...(!readOnly && {
|
|
129
|
+
'aria-haspopup': 'dialog',
|
|
130
|
+
onClick: (e) => {
|
|
131
|
+
if (isSmallOrAbove) {
|
|
132
|
+
if (hasToLoad)
|
|
133
|
+
onLoadStage?.([stage.id]);
|
|
134
|
+
const btn = e.currentTarget;
|
|
135
|
+
btn.scrollIntoView({
|
|
136
|
+
inline: 'center',
|
|
137
|
+
behavior: 'smooth',
|
|
138
|
+
block: 'nearest'
|
|
139
|
+
});
|
|
140
|
+
setTarget(btn);
|
|
141
|
+
setTargetStageId(stage.id);
|
|
142
|
+
}
|
|
143
|
+
else {
|
|
144
|
+
openModal();
|
|
145
|
+
}
|
|
146
|
+
}
|
|
147
|
+
}), children: _jsxs(StyledInnerStage, { children: [stage.completed && _jsx(Icon, { name: 'check' }), stage.name] }) }) }), target && targetStageId === stage.id && isSmallOrAbove && !showModal && (_jsx(InfoDialog, { id: dialogId, heading: stage.name, target: target, progress: hasToLoad ? t('loading') : undefined, onDismiss: () => {
|
|
148
|
+
setTarget(null);
|
|
149
|
+
setTargetStageId(null);
|
|
150
|
+
}, placement: 'bottom', children: !hasToLoad && (_jsxs(StyledStageGlimpse, { children: [_jsx(StageGlimpse, { stage: stage }), _jsx(Button, { variant: 'secondary', onClick: openModal, children: t('stages_see_full_lifecycle') })] })) }))] }, stage.id));
|
|
151
|
+
}), _jsx(StyledSentinel, { ref: endSentinelRef, "aria-hidden": 'true' })] }) }), _jsx(StyledStagesDescription, { id: descriptionId, children: t('stages_description') })] }));
|
|
141
152
|
});
|
|
142
|
-
export default Stages;
|
|
153
|
+
export default withTestIds(Stages, getStagesTestIds);
|
|
143
154
|
//# sourceMappingURL=Stages.js.map
|