@pega/cosmos-react-work 10.0.0-build.4.2 → 10.0.0-build.4.20
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/Article/ArticleRating.d.ts.map +1 -1
- package/lib/components/Article/ArticleRating.js +2 -2
- package/lib/components/Article/ArticleRating.js.map +1 -1
- package/lib/components/ArticleList/ArticleFeedback.d.ts.map +1 -1
- package/lib/components/ArticleList/ArticleFeedback.js +2 -2
- package/lib/components/ArticleList/ArticleFeedback.js.map +1 -1
- package/lib/components/CaseView/CaseHeader/CaseHeader.d.ts.map +1 -1
- package/lib/components/CaseView/CaseHeader/CaseHeader.js +1 -1
- package/lib/components/CaseView/CaseHeader/CaseHeader.js.map +1 -1
- package/lib/components/CaseView/CaseView.styles.d.ts.map +1 -1
- package/lib/components/CaseView/CaseView.styles.js +4 -2
- package/lib/components/CaseView/CaseView.styles.js.map +1 -1
- package/lib/components/CaseView/CaseView.types.d.ts +1 -0
- package/lib/components/CaseView/CaseView.types.d.ts.map +1 -1
- package/lib/components/CaseView/CaseView.types.js.map +1 -1
- package/lib/components/Details/DetailsList.d.ts.map +1 -1
- package/lib/components/Details/DetailsList.js +2 -2
- package/lib/components/Details/DetailsList.js.map +1 -1
- package/lib/components/GenAICoach/ActiveCases.d.ts.map +1 -1
- package/lib/components/GenAICoach/ActiveCases.js +2 -1
- package/lib/components/GenAICoach/ActiveCases.js.map +1 -1
- package/lib/components/GenAICoach/GenAICoach.js +2 -2
- package/lib/components/GenAICoach/GenAICoach.js.map +1 -1
- package/lib/components/GenAICoach/GenAICoach.styles.d.ts +2 -0
- package/lib/components/GenAICoach/GenAICoach.styles.d.ts.map +1 -1
- package/lib/components/GenAICoach/GenAICoach.styles.js +11 -2
- package/lib/components/GenAICoach/GenAICoach.styles.js.map +1 -1
- package/lib/components/GenAICoach/GenAIMessage.d.ts.map +1 -1
- package/lib/components/GenAICoach/GenAIMessage.js +15 -2
- package/lib/components/GenAICoach/GenAIMessage.js.map +1 -1
- package/lib/components/GenAICoach/GenAIMessageFeedback.d.ts.map +1 -1
- package/lib/components/GenAICoach/GenAIMessageFeedback.js +2 -2
- package/lib/components/GenAICoach/GenAIMessageFeedback.js.map +1 -1
- package/lib/components/GenAICoach/Questionnaire.js +2 -2
- package/lib/components/GenAICoach/Questionnaire.js.map +1 -1
- package/lib/components/Shortcuts/Shortcuts.d.ts.map +1 -1
- package/lib/components/Shortcuts/Shortcuts.js +20 -11
- package/lib/components/Shortcuts/Shortcuts.js.map +1 -1
- package/lib/components/Shortcuts/Shortcuts.styles.d.ts +16 -3
- package/lib/components/Shortcuts/Shortcuts.styles.d.ts.map +1 -1
- package/lib/components/Shortcuts/Shortcuts.styles.js +91 -47
- package/lib/components/Shortcuts/Shortcuts.styles.js.map +1 -1
- package/lib/components/Shortcuts/Shortcuts.types.d.ts +8 -2
- package/lib/components/Shortcuts/Shortcuts.types.d.ts.map +1 -1
- package/lib/components/Shortcuts/Shortcuts.types.js.map +1 -1
- package/lib/components/Stages/Stages.d.ts.map +1 -1
- package/lib/components/Stages/Stages.js +59 -39
- package/lib/components/Stages/Stages.js.map +1 -1
- package/lib/components/Stages/Stages.styles.d.ts +27 -5
- package/lib/components/Stages/Stages.styles.d.ts.map +1 -1
- package/lib/components/Stages/Stages.styles.js +693 -163
- package/lib/components/Stages/Stages.styles.js.map +1 -1
- package/lib/components/Stages/Stages.types.d.ts +6 -0
- 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 -1
- package/lib/components/Stages/index.d.ts.map +1 -1
- package/lib/components/Stages/index.js.map +1 -1
- package/lib/components/Tags/Tags.d.ts.map +1 -1
- package/lib/components/Tags/Tags.js +1 -12
- package/lib/components/Tags/Tags.js.map +1 -1
- package/lib/components/Tasks/TaskCard.d.ts.map +1 -1
- package/lib/components/Tasks/TaskCard.js +5 -2
- package/lib/components/Tasks/TaskCard.js.map +1 -1
- package/lib/components/Tasks/TaskList.d.ts.map +1 -1
- package/lib/components/Tasks/TaskList.js +24 -16
- package/lib/components/Tasks/TaskList.js.map +1 -1
- package/lib/components/Tasks/Tasks.d.ts +7 -2
- package/lib/components/Tasks/Tasks.d.ts.map +1 -1
- package/lib/components/Tasks/Tasks.js +7 -5
- package/lib/components/Tasks/Tasks.js.map +1 -1
- package/package.json +3 -3
|
@@ -1,30 +1,33 @@
|
|
|
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
|
+
import { lineClamp } from '@pega/cosmos-react-core/lib/styles/mixins';
|
|
4
5
|
export const StyledShortcutsCardsWrapper = styled.div `
|
|
5
6
|
container-type: inline-size;
|
|
6
7
|
`;
|
|
7
|
-
export const StyledShortcutsCardsContainer = styled.ul(({ theme: { base } }) => {
|
|
8
|
+
export const StyledShortcutsCardsContainer = styled.ul(({ theme: { base }, itemCount }) => {
|
|
8
9
|
return css `
|
|
9
|
-
|
|
10
|
-
|
|
11
|
-
|
|
12
|
-
|
|
13
|
-
|
|
14
|
-
|
|
10
|
+
display: grid;
|
|
11
|
+
grid-template-columns: repeat(auto-fill, minmax(min(calc(${base.spacing} * 30), 100%), 1fr));
|
|
12
|
+
gap: ${base.spacing};
|
|
13
|
+
list-style: none;
|
|
14
|
+
padding: ${base.spacing} 0;
|
|
15
|
+
margin: 0;
|
|
15
16
|
|
|
16
|
-
|
|
17
|
-
|
|
18
|
-
|
|
19
|
-
|
|
20
|
-
|
|
21
|
-
|
|
22
|
-
|
|
17
|
+
@container (min-width: ${parseFloat(base.breakpoints.sm)}rem) {
|
|
18
|
+
grid-template-columns: repeat(2, minmax(0, 1fr));
|
|
19
|
+
grid-auto-rows: 1fr;
|
|
20
|
+
justify-content: start;
|
|
21
|
+
align-items: stretch;
|
|
22
|
+
width: 100%;
|
|
23
|
+
}
|
|
23
24
|
|
|
24
|
-
|
|
25
|
-
|
|
26
|
-
|
|
27
|
-
|
|
25
|
+
@container (min-width: ${parseFloat(base.breakpoints.md)}rem) {
|
|
26
|
+
grid-template-columns: ${itemCount === 1
|
|
27
|
+
? 'repeat(2, minmax(0, 1fr))'
|
|
28
|
+
: `repeat(${Math.min(Math.max(itemCount, 1), 4)}, minmax(0, 1fr))`};
|
|
29
|
+
}
|
|
30
|
+
`;
|
|
28
31
|
});
|
|
29
32
|
StyledShortcutsCardsContainer.defaultProps = defaultThemeProp;
|
|
30
33
|
export const StyledShortcutsCategoriesContainer = styled.div(({ theme: { base } }) => css `
|
|
@@ -46,12 +49,40 @@ export const StyledShortcutsCard = styled.li `
|
|
|
46
49
|
display: flex;
|
|
47
50
|
flex-direction: column;
|
|
48
51
|
`;
|
|
52
|
+
export const StyledTextContent = styled.div(({ layoutVariant }) => css `
|
|
53
|
+
${layoutVariant === 'inline' &&
|
|
54
|
+
css `
|
|
55
|
+
flex: 1;
|
|
56
|
+
min-width: 0;
|
|
57
|
+
align-items: flex-start;
|
|
58
|
+
`}
|
|
59
|
+
|
|
60
|
+
${layoutVariant === 'stacked' &&
|
|
61
|
+
css `
|
|
62
|
+
align-items: center;
|
|
63
|
+
width: 100%;
|
|
64
|
+
`}
|
|
65
|
+
`);
|
|
66
|
+
StyledTextContent.defaultProps = defaultThemeProp;
|
|
67
|
+
export const StyledText = styled.span(({ theme: { base } }) => css `
|
|
68
|
+
font-weight: ${base['font-weight']['semi-bold']};
|
|
69
|
+
font-size: 1em;
|
|
70
|
+
color: CanvasText;
|
|
71
|
+
${lineClamp(3)}
|
|
72
|
+
`);
|
|
73
|
+
StyledText.defaultProps = defaultThemeProp;
|
|
74
|
+
export const StyledSubtitleText = styled(Text)(() => css `
|
|
75
|
+
${lineClamp(3)}
|
|
76
|
+
text-align: inherit;
|
|
77
|
+
`);
|
|
78
|
+
StyledSubtitleText.defaultProps = defaultThemeProp;
|
|
49
79
|
export const StyledShortcutsCardButton = styled(Button)(({ theme: { base, components }, layoutVariant }) => {
|
|
50
80
|
const hoverBackgroundColor = tryCatch(() => mix(0.9, base.palette['primary-background'], components.button['secondary-color']));
|
|
51
81
|
return css `
|
|
52
82
|
display: flex;
|
|
53
83
|
align-items: center;
|
|
54
84
|
justify-content: flex-start;
|
|
85
|
+
text-align: ${layoutVariant === 'stacked' ? 'center' : 'start'};
|
|
55
86
|
flex: 1;
|
|
56
87
|
width: 100%;
|
|
57
88
|
border: 0.0625rem solid ${base.palette['border-line']};
|
|
@@ -62,35 +93,18 @@ export const StyledShortcutsCardButton = styled(Button)(({ theme: { base, compon
|
|
|
62
93
|
|
|
63
94
|
&:hover {
|
|
64
95
|
background: ${hoverBackgroundColor};
|
|
65
|
-
|
|
96
|
+
text-decoration: none;
|
|
66
97
|
|
|
67
|
-
|
|
68
|
-
|
|
69
|
-
|
|
70
|
-
|
|
71
|
-
gap: calc(${base.spacing} * 2);
|
|
72
|
-
text-align: center;
|
|
73
|
-
min-height: 8rem;
|
|
74
|
-
`}
|
|
75
|
-
|
|
76
|
-
${layoutVariant === 'inline' &&
|
|
77
|
-
css `
|
|
78
|
-
flex-direction: row;
|
|
79
|
-
gap: calc(${base.spacing} * 1.5);
|
|
80
|
-
text-align: start;
|
|
81
|
-
`}
|
|
98
|
+
${StyledText} {
|
|
99
|
+
text-decoration: underline;
|
|
100
|
+
}
|
|
101
|
+
}
|
|
82
102
|
`;
|
|
83
103
|
});
|
|
84
104
|
StyledShortcutsCardButton.defaultProps = defaultThemeProp;
|
|
85
|
-
export const StyledShortcutsCardIcon = styled(Icon)(({
|
|
105
|
+
export const StyledShortcutsCardIcon = styled(Icon)(({ iconColor }) => css `
|
|
86
106
|
flex-shrink: 0;
|
|
87
107
|
|
|
88
|
-
${layoutVariant === 'stacked' &&
|
|
89
|
-
css `
|
|
90
|
-
width: 3rem;
|
|
91
|
-
height: 3rem;
|
|
92
|
-
`}
|
|
93
|
-
|
|
94
108
|
${iconColor &&
|
|
95
109
|
css `
|
|
96
110
|
color: ${iconColor};
|
|
@@ -103,14 +117,44 @@ export const StyledLabelRow = styled.span(({ theme: { base } }) => css `
|
|
|
103
117
|
gap: calc(${base.spacing} * 0.5);
|
|
104
118
|
`);
|
|
105
119
|
StyledLabelRow.defaultProps = defaultThemeProp;
|
|
106
|
-
export const StyledText = styled.span(({ theme: { base } }) => css `
|
|
107
|
-
font-weight: ${base['font-weight']['semi-bold']};
|
|
108
|
-
font-size: 1em;
|
|
109
|
-
color: CanvasText;
|
|
110
|
-
`);
|
|
111
|
-
StyledText.defaultProps = defaultThemeProp;
|
|
112
120
|
export const StyledExternalIcon = styled(Icon) `
|
|
113
121
|
flex-shrink: 0;
|
|
114
122
|
`;
|
|
115
123
|
StyledExternalIcon.defaultProps = defaultThemeProp;
|
|
124
|
+
export const StyledShortcutImageContainer = styled.span(({ theme: { base, components: { icon } } }) => css `
|
|
125
|
+
flex-shrink: 0;
|
|
126
|
+
overflow: hidden;
|
|
127
|
+
border-radius: calc(${base['border-radius']} / 2);
|
|
128
|
+
width: ${icon.size.m};
|
|
129
|
+
height: ${icon.size.m};
|
|
130
|
+
`);
|
|
131
|
+
StyledShortcutImageContainer.defaultProps = defaultThemeProp;
|
|
132
|
+
export const StyledShortcutImg = styled.img `
|
|
133
|
+
width: 100%;
|
|
134
|
+
height: 100%;
|
|
135
|
+
object-fit: contain;
|
|
136
|
+
display: block;
|
|
137
|
+
`;
|
|
138
|
+
StyledShortcutImg.defaultProps = defaultThemeProp;
|
|
139
|
+
export const StyledCardContentWrapper = styled.div(({ layoutVariant, hasDescription, theme: { base } }) => css `
|
|
140
|
+
display: flex;
|
|
141
|
+
flex: 1;
|
|
142
|
+
min-width: 0;
|
|
143
|
+
|
|
144
|
+
${layoutVariant === 'inline' &&
|
|
145
|
+
css `
|
|
146
|
+
flex-direction: row;
|
|
147
|
+
gap: calc(${base.spacing} * 1.5);
|
|
148
|
+
align-items: ${hasDescription ? 'flex-start' : 'center'};
|
|
149
|
+
`}
|
|
150
|
+
|
|
151
|
+
${layoutVariant === 'stacked' &&
|
|
152
|
+
css `
|
|
153
|
+
flex-direction: column;
|
|
154
|
+
gap: calc(${base.spacing} * 2);
|
|
155
|
+
align-items: center;
|
|
156
|
+
justify-content: center;
|
|
157
|
+
`}
|
|
158
|
+
`);
|
|
159
|
+
StyledCardContentWrapper.defaultProps = defaultThemeProp;
|
|
116
160
|
//# sourceMappingURL=Shortcuts.styles.js.map
|
|
@@ -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;
|
|
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';\nimport { lineClamp } from '@pega/cosmos-react-core/lib/styles/mixins';\n\nexport const StyledShortcutsCardsWrapper = styled.div`\n container-type: inline-size;\n`;\n\nexport const StyledShortcutsCardsContainer = styled.ul<{ itemCount: number }>(\n ({ theme: { base }, itemCount }) => {\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: ${itemCount === 1\n ? 'repeat(2, minmax(0, 1fr))'\n : `repeat(${Math.min(Math.max(itemCount, 1), 4)}, minmax(0, 1fr))`};\n }\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 StyledTextContent = styled.div<{ layoutVariant: 'stacked' | 'inline' }>(\n ({ layoutVariant }) => css`\n ${layoutVariant === 'inline' &&\n css`\n flex: 1;\n min-width: 0;\n align-items: flex-start;\n `}\n\n ${layoutVariant === 'stacked' &&\n css`\n align-items: center;\n width: 100%;\n `}\n `\n);\n\nStyledTextContent.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 ${lineClamp(3)}\n `\n);\n\nStyledText.defaultProps = defaultThemeProp;\n\nexport const StyledSubtitleText = styled(Text)(\n () => css`\n ${lineClamp(3)}\n text-align: inherit;\n `\n);\n\nStyledSubtitleText.defaultProps = defaultThemeProp;\n\nexport const StyledShortcutsCardButton = styled(Button)<{\n layoutVariant: 'stacked' | 'inline';\n}>(({ theme: { base, components }, layoutVariant }) => {\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 text-align: ${layoutVariant === 'stacked' ? 'center' : '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 text-decoration: none;\n\n ${StyledText} {\n text-decoration: underline;\n }\n }\n `;\n});\n\nStyledShortcutsCardButton.defaultProps = defaultThemeProp;\n\nexport const StyledShortcutsCardIcon = styled(Icon)<{\n iconColor?: string;\n}>(\n ({ iconColor }) => css`\n flex-shrink: 0;\n\n ${iconColor &&\n css`\n color: ${iconColor};\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 StyledExternalIcon = styled(Icon)`\n flex-shrink: 0;\n`;\n\nStyledExternalIcon.defaultProps = defaultThemeProp;\n\nexport const StyledShortcutImageContainer = styled.span(\n ({\n theme: {\n base,\n components: { icon }\n }\n }) => css`\n flex-shrink: 0;\n overflow: hidden;\n border-radius: calc(${base['border-radius']} / 2);\n width: ${icon.size.m};\n height: ${icon.size.m};\n `\n);\n\nStyledShortcutImageContainer.defaultProps = defaultThemeProp;\n\nexport const StyledShortcutImg = styled.img`\n width: 100%;\n height: 100%;\n object-fit: contain;\n display: block;\n`;\n\nStyledShortcutImg.defaultProps = defaultThemeProp;\n\nexport const StyledCardContentWrapper = styled.div<{\n layoutVariant: 'stacked' | 'inline';\n hasDescription: boolean;\n}>(\n ({ layoutVariant, hasDescription, theme: { base } }) => css`\n display: flex;\n flex: 1;\n min-width: 0;\n\n ${layoutVariant === 'inline' &&\n css`\n flex-direction: row;\n gap: calc(${base.spacing} * 1.5);\n align-items: ${hasDescription ? 'flex-start' : 'center'};\n `}\n\n ${layoutVariant === 'stacked' &&\n css`\n flex-direction: column;\n gap: calc(${base.spacing} * 2);\n align-items: center;\n justify-content: center;\n `}\n `\n);\n\nStyledCardContentWrapper.defaultProps = defaultThemeProp;\n"]}
|
|
@@ -1,5 +1,5 @@
|
|
|
1
1
|
import type { Ref } from 'react';
|
|
2
|
-
import type { NoChildrenProp, TestIdProp } from '@pega/cosmos-react-core';
|
|
2
|
+
import type { BaseProps, NoChildrenProp, TestIdProp } from '@pega/cosmos-react-core';
|
|
3
3
|
interface ShortcutItemBase {
|
|
4
4
|
/** Unique identifier for this shortcut. */
|
|
5
5
|
id: string;
|
|
@@ -7,12 +7,18 @@ interface ShortcutItemBase {
|
|
|
7
7
|
label: string;
|
|
8
8
|
/** Icon name from the registered icon set. */
|
|
9
9
|
icon: string;
|
|
10
|
+
/** Optional class name applied to the rendered shortcut card. */
|
|
11
|
+
className?: string;
|
|
10
12
|
}
|
|
11
13
|
export interface ShortcutLinkItem extends ShortcutItemBase {
|
|
12
14
|
/** Discriminant — this item navigates to an external URL. */
|
|
13
15
|
type: 'external';
|
|
14
16
|
/** Absolute URL the link navigates to. Opens in a new tab. */
|
|
15
17
|
href: string;
|
|
18
|
+
/** Optional subtitle displayed below the label. */
|
|
19
|
+
description?: string;
|
|
20
|
+
/** Optional image URL. Renders in place of the icon; falls back to icon if the image fails to load. */
|
|
21
|
+
image?: string;
|
|
16
22
|
}
|
|
17
23
|
export interface ShortcutNavItem extends ShortcutItemBase {
|
|
18
24
|
/** Discriminant — this item navigates to a portal landing page. */
|
|
@@ -46,7 +52,7 @@ interface ShortcutsWithCategories {
|
|
|
46
52
|
categories: ShortcutCategory[];
|
|
47
53
|
showHeader?: never;
|
|
48
54
|
}
|
|
49
|
-
interface ShortcutsBaseProps extends NoChildrenProp, TestIdProp {
|
|
55
|
+
interface ShortcutsBaseProps extends NoChildrenProp, TestIdProp, BaseProps {
|
|
50
56
|
/** Heading displayed above the shortcuts. */
|
|
51
57
|
heading?: string;
|
|
52
58
|
/**
|
|
@@ -1 +1 @@
|
|
|
1
|
-
{"version":3,"file":"Shortcuts.types.d.ts","sourceRoot":"","sources":["../../../src/components/Shortcuts/Shortcuts.types.ts"],"names":[],"mappings":"AAAA,OAAO,KAAK,EAAE,GAAG,EAAE,MAAM,OAAO,CAAC;AAEjC,OAAO,KAAK,EAAE,cAAc,EAAE,UAAU,EAAE,MAAM,yBAAyB,CAAC;
|
|
1
|
+
{"version":3,"file":"Shortcuts.types.d.ts","sourceRoot":"","sources":["../../../src/components/Shortcuts/Shortcuts.types.ts"],"names":[],"mappings":"AAAA,OAAO,KAAK,EAAE,GAAG,EAAE,MAAM,OAAO,CAAC;AAEjC,OAAO,KAAK,EAAE,SAAS,EAAE,cAAc,EAAE,UAAU,EAAE,MAAM,yBAAyB,CAAC;AAErF,UAAU,gBAAgB;IACxB,2CAA2C;IAC3C,EAAE,EAAE,MAAM,CAAC;IACX,2CAA2C;IAC3C,KAAK,EAAE,MAAM,CAAC;IACd,8CAA8C;IAC9C,IAAI,EAAE,MAAM,CAAC;IACb,iEAAiE;IACjE,SAAS,CAAC,EAAE,MAAM,CAAC;CACpB;AAED,MAAM,WAAW,gBAAiB,SAAQ,gBAAgB;IACxD,6DAA6D;IAC7D,IAAI,EAAE,UAAU,CAAC;IACjB,8DAA8D;IAC9D,IAAI,EAAE,MAAM,CAAC;IACb,mDAAmD;IACnD,WAAW,CAAC,EAAE,MAAM,CAAC;IACrB,uGAAuG;IACvG,KAAK,CAAC,EAAE,MAAM,CAAC;CAChB;AAED,MAAM,WAAW,eAAgB,SAAQ,gBAAgB;IACvD,mEAAmE;IACnE,IAAI,EAAE,MAAM,CAAC;IACb,8DAA8D;IAC9D,OAAO,EAAE,MAAM,IAAI,CAAC;CACrB;AAED,MAAM,MAAM,YAAY,GAAG,gBAAgB,GAAG,eAAe,CAAC;AAE9D,MAAM,WAAW,gBAAgB;IAC/B,2CAA2C;IAC3C,EAAE,EAAE,MAAM,CAAC;IACX,mDAAmD;IACnD,KAAK,EAAE,MAAM,CAAC;IACd,iDAAiD;IACjD,KAAK,EAAE,YAAY,EAAE,CAAC;CACvB;AAED,UAAU,kBAAkB;IAC1B,yCAAyC;IACzC,KAAK,CAAC,EAAE,YAAY,EAAE,CAAC;IACvB,UAAU,CAAC,EAAE,KAAK,CAAC;IACnB;;;;OAIG;IACH,UAAU,CAAC,EAAE,OAAO,CAAC;CACtB;AAED,UAAU,uBAAuB;IAC/B,KAAK,CAAC,EAAE,KAAK,CAAC;IACd,+EAA+E;IAC/E,UAAU,EAAE,gBAAgB,EAAE,CAAC;IAC/B,UAAU,CAAC,EAAE,KAAK,CAAC;CACpB;AAED,UAAU,kBAAmB,SAAQ,cAAc,EAAE,UAAU,EAAE,SAAS;IACxE,6CAA6C;IAC7C,OAAO,CAAC,EAAE,MAAM,CAAC;IACjB;;;;;OAKG;IACH,OAAO,CAAC,EAAE,SAAS,GAAG,QAAQ,CAAC;IAC/B,qCAAqC;IACrC,GAAG,CAAC,EAAE,GAAG,CAAC,cAAc,CAAC,CAAC;CAC3B;AAED,MAAM,MAAM,cAAc,GAAG,kBAAkB,GAAG,CAAC,kBAAkB,GAAG,uBAAuB,CAAC,CAAC"}
|
|
@@ -1 +1 @@
|
|
|
1
|
-
{"version":3,"file":"Shortcuts.types.js","sourceRoot":"","sources":["../../../src/components/Shortcuts/Shortcuts.types.ts"],"names":[],"mappings":"","sourcesContent":["import type { Ref } from 'react';\n\nimport type { NoChildrenProp, TestIdProp } from '@pega/cosmos-react-core';\n\ninterface ShortcutItemBase {\n /** Unique identifier for this shortcut. */\n id: string;\n /** Display label shown on the shortcut. */\n label: string;\n /** Icon name from the registered icon set. */\n icon: string;\n}\n\nexport interface ShortcutLinkItem extends ShortcutItemBase {\n /** Discriminant — this item navigates to an external URL. */\n type: 'external';\n /** Absolute URL the link navigates to. Opens in a new tab. */\n href: string;\n}\n\nexport interface ShortcutNavItem extends ShortcutItemBase {\n /** Discriminant — this item navigates to a portal landing page. */\n type: 'page';\n /** Callback invoked when the user activates this shortcut. */\n onClick: () => void;\n}\n\nexport type ShortcutItem = ShortcutLinkItem | ShortcutNavItem;\n\nexport interface ShortcutCategory {\n /** Unique identifier for this category. */\n id: string;\n /** Display label shown as the category heading. */\n label: string;\n /** Shortcut items belonging to this category. */\n items: ShortcutItem[];\n}\n\ninterface ShortcutsWithItems {\n /** Shortcut items to render as cards. */\n items?: ShortcutItem[];\n categories?: never;\n /**\n * Whether to render the outer card shell with a heading.\n * When `false`, only the card grid is rendered, centered within its container.\n * @default true\n */\n showHeader?: boolean;\n}\n\ninterface ShortcutsWithCategories {\n items?: never;\n /** Grouped shortcut items, each rendered as cards under a category heading. */\n categories: ShortcutCategory[];\n showHeader?: never;\n}\n\ninterface ShortcutsBaseProps extends NoChildrenProp, TestIdProp {\n /** Heading displayed above the shortcuts. */\n heading?: string;\n /**\n * Controls the layout variant of each shortcut card.\n * - `stacked`: large icon above the label (default card style).\n * - `inline`: small icon inline to the left of the label (list/link style).\n * @default 'inline'\n */\n variant?: 'stacked' | 'inline';\n /** Ref for the root card element. */\n ref?: Ref<HTMLDivElement>;\n}\n\nexport type ShortcutsProps = ShortcutsBaseProps & (ShortcutsWithItems | ShortcutsWithCategories);\n"]}
|
|
1
|
+
{"version":3,"file":"Shortcuts.types.js","sourceRoot":"","sources":["../../../src/components/Shortcuts/Shortcuts.types.ts"],"names":[],"mappings":"","sourcesContent":["import type { Ref } from 'react';\n\nimport type { BaseProps, NoChildrenProp, TestIdProp } from '@pega/cosmos-react-core';\n\ninterface ShortcutItemBase {\n /** Unique identifier for this shortcut. */\n id: string;\n /** Display label shown on the shortcut. */\n label: string;\n /** Icon name from the registered icon set. */\n icon: string;\n /** Optional class name applied to the rendered shortcut card. */\n className?: string;\n}\n\nexport interface ShortcutLinkItem extends ShortcutItemBase {\n /** Discriminant — this item navigates to an external URL. */\n type: 'external';\n /** Absolute URL the link navigates to. Opens in a new tab. */\n href: string;\n /** Optional subtitle displayed below the label. */\n description?: string;\n /** Optional image URL. Renders in place of the icon; falls back to icon if the image fails to load. */\n image?: string;\n}\n\nexport interface ShortcutNavItem extends ShortcutItemBase {\n /** Discriminant — this item navigates to a portal landing page. */\n type: 'page';\n /** Callback invoked when the user activates this shortcut. */\n onClick: () => void;\n}\n\nexport type ShortcutItem = ShortcutLinkItem | ShortcutNavItem;\n\nexport interface ShortcutCategory {\n /** Unique identifier for this category. */\n id: string;\n /** Display label shown as the category heading. */\n label: string;\n /** Shortcut items belonging to this category. */\n items: ShortcutItem[];\n}\n\ninterface ShortcutsWithItems {\n /** Shortcut items to render as cards. */\n items?: ShortcutItem[];\n categories?: never;\n /**\n * Whether to render the outer card shell with a heading.\n * When `false`, only the card grid is rendered, centered within its container.\n * @default true\n */\n showHeader?: boolean;\n}\n\ninterface ShortcutsWithCategories {\n items?: never;\n /** Grouped shortcut items, each rendered as cards under a category heading. */\n categories: ShortcutCategory[];\n showHeader?: never;\n}\n\ninterface ShortcutsBaseProps extends NoChildrenProp, TestIdProp, BaseProps {\n /** Heading displayed above the shortcuts. */\n heading?: string;\n /**\n * Controls the layout variant of each shortcut card.\n * - `stacked`: large icon above the label (default card style).\n * - `inline`: small icon inline to the left of the label (list/link style).\n * @default 'inline'\n */\n variant?: 'stacked' | 'inline';\n /** Ref for the root card element. */\n ref?: Ref<HTMLDivElement>;\n}\n\nexport type ShortcutsProps = ShortcutsBaseProps & (ShortcutsWithItems | ShortcutsWithCategories);\n"]}
|
|
@@ -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":"AA0BA,OAAO,KAAK,EAAE,+BAA+B,EAAgB,MAAM,yBAAyB,CAAC;AAG7F,OAAO,KAAK,EAAE,WAAW,EAAe,MAAM,gBAAgB,CAAC;;;;AAsV/D,wBAAqD"}
|
|
@@ -1,14 +1,15 @@
|
|
|
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 { 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';
|
|
3
|
+
import { Icon, registerIcon, Flex, useI18n, Button, Modal, useBreakpoint, useModalManager, useConsolidatedRef, useUID, InfoDialog, useArrows, useDirection, useAfterInitialEffect, VisuallyHiddenText, withTestIds, useTestIds, useElement, useFocusWithin, isInstance, getActiveElement } from '@pega/cosmos-react-core';
|
|
4
4
|
import * as checkIcon from '@pega/cosmos-react-core/lib/components/Icon/icons/check.icon';
|
|
5
5
|
import { getStagesTestIds } from './Stages.test-ids';
|
|
6
6
|
import StageGlimpse from './StageGlimpse';
|
|
7
|
-
import { StyledInnerStage, StyledStageCompleteIcon, StyledStage, StyledStageContainer, StyledStageGlimpse, StyledStages, StyledStagesWrapper, StyledStagesDescription, StyledStageText, StyledSentinel } from './Stages.styles';
|
|
7
|
+
import { StyledInnerStage, StyledStageCompleteIcon, StyledStage, StyledStageContainer, StyledStageGlimpse, StyledStages, StyledStagesWrapper, StyledStagesDescription, StyledStageText, StyledSentinel, StyledMilestoneStageContainer, StyledMilestoneButton, StyledMilestoneLabel } from './Stages.styles';
|
|
8
8
|
registerIcon(checkIcon);
|
|
9
|
-
const Stages = forwardRef(function Stages({ current, stages, caseTitle, onLoadStage, readOnly = false, testId, ...restProps }, ref) {
|
|
9
|
+
const Stages = forwardRef(function Stages({ current, stages, caseTitle, onLoadStage, readOnly = false, variant = 'chevron', testId, ...restProps }, ref) {
|
|
10
10
|
const t = useI18n();
|
|
11
11
|
const testIds = useTestIds(testId, getStagesTestIds);
|
|
12
|
+
const isMilestoneVariant = variant === 'milestone';
|
|
12
13
|
const stagesRef = useConsolidatedRef(ref);
|
|
13
14
|
const wrapperRef = useRef(null);
|
|
14
15
|
const startSentinelRef = useRef(null);
|
|
@@ -59,8 +60,9 @@ const Stages = forwardRef(function Stages({ current, stages, caseTitle, onLoadSt
|
|
|
59
60
|
currentBtn?.scrollIntoView({ inline: 'center', behavior: 'auto', block: 'nearest' });
|
|
60
61
|
}, [current]); // re-center whenever the active stage changes
|
|
61
62
|
useFocusWithin([stagesRef], focused => {
|
|
62
|
-
|
|
63
|
-
|
|
63
|
+
const activeEl = getActiveElement();
|
|
64
|
+
if (focused && isInstance(activeEl, HTMLButtonElement)) {
|
|
65
|
+
activeEl.scrollIntoView({
|
|
64
66
|
inline: 'center',
|
|
65
67
|
behavior: 'smooth',
|
|
66
68
|
block: 'nearest'
|
|
@@ -96,7 +98,50 @@ const Stages = forwardRef(function Stages({ current, stages, caseTitle, onLoadSt
|
|
|
96
98
|
children: renderModalStages()
|
|
97
99
|
});
|
|
98
100
|
}, [stagesToLoad.length]);
|
|
99
|
-
|
|
101
|
+
const setStageButtonRef = (stageId, isCurrent) => (el) => {
|
|
102
|
+
if (el) {
|
|
103
|
+
stagesRefs.current.set(stageId, el);
|
|
104
|
+
if (isCurrent)
|
|
105
|
+
setCurrentStageBtn(prev => (prev !== el ? el : prev));
|
|
106
|
+
}
|
|
107
|
+
else {
|
|
108
|
+
stagesRefs.current.delete(stageId);
|
|
109
|
+
if (isCurrent)
|
|
110
|
+
setCurrentStageBtn(null);
|
|
111
|
+
}
|
|
112
|
+
};
|
|
113
|
+
const handleStageClick = (stageId, hasToLoad) => (e) => {
|
|
114
|
+
if (isSmallOrAbove) {
|
|
115
|
+
if (hasToLoad)
|
|
116
|
+
onLoadStage?.([stageId]);
|
|
117
|
+
const btn = e.currentTarget;
|
|
118
|
+
btn.scrollIntoView({
|
|
119
|
+
inline: 'center',
|
|
120
|
+
behavior: 'smooth',
|
|
121
|
+
block: 'nearest'
|
|
122
|
+
});
|
|
123
|
+
setTarget(btn);
|
|
124
|
+
setTargetStageId(stageId);
|
|
125
|
+
}
|
|
126
|
+
else {
|
|
127
|
+
openModal();
|
|
128
|
+
}
|
|
129
|
+
};
|
|
130
|
+
const getStageButtonProps = ({ stageId, stageName, stageStatusText, isCurrent, hasToLoad }) => {
|
|
131
|
+
const isExpanded = targetStageId === stageId && Boolean(target) && isSmallOrAbove;
|
|
132
|
+
return {
|
|
133
|
+
ref: setStageButtonRef(stageId, isCurrent),
|
|
134
|
+
'aria-current': isCurrent ? 'step' : undefined,
|
|
135
|
+
'aria-label': t('stages_stage_label', [stageName, stageStatusText]),
|
|
136
|
+
'aria-expanded': isExpanded ? true : undefined,
|
|
137
|
+
'aria-controls': isExpanded ? dialogId : undefined,
|
|
138
|
+
...(!readOnly && {
|
|
139
|
+
'aria-haspopup': 'dialog',
|
|
140
|
+
onClick: handleStageClick(stageId, hasToLoad)
|
|
141
|
+
})
|
|
142
|
+
};
|
|
143
|
+
};
|
|
144
|
+
return (_jsxs(_Fragment, { children: [_jsx(StyledStagesWrapper, { ref: wrapperRef, "data-testid": testIds.root, children: _jsxs(Flex, { ...restProps, container: true, as: StyledStages, ref: stagesRef, variant: variant, dir: rtl ? 'rtl' : 'ltr', "aria-label": t('stages_label'), "aria-describedby": descriptionId, children: [_jsx(StyledSentinel, { ref: startSentinelRef, "aria-hidden": 'true' }), stages.map((stage, stageIndex) => {
|
|
100
145
|
const isCurrent = stage.id === current;
|
|
101
146
|
let stageStatusText = t(stage.completed ? 'completed' : 'not_started');
|
|
102
147
|
if (isCurrent)
|
|
@@ -112,39 +157,14 @@ const Stages = forwardRef(function Stages({ current, stages, caseTitle, onLoadSt
|
|
|
112
157
|
else {
|
|
113
158
|
stageStatus = 'pending';
|
|
114
159
|
}
|
|
115
|
-
|
|
116
|
-
|
|
117
|
-
|
|
118
|
-
|
|
119
|
-
|
|
120
|
-
|
|
121
|
-
|
|
122
|
-
|
|
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: () => {
|
|
160
|
+
const stageButtonProps = getStageButtonProps({
|
|
161
|
+
stageId: stage.id,
|
|
162
|
+
stageName: stage.name,
|
|
163
|
+
stageStatusText,
|
|
164
|
+
isCurrent,
|
|
165
|
+
hasToLoad
|
|
166
|
+
});
|
|
167
|
+
return (_jsxs(Fragment, { children: [isMilestoneVariant ? (_jsxs(StyledMilestoneStageContainer, { status: stageStatus, nextCompleted: stages[stageIndex + 1]?.completed ?? false, readOnly: readOnly, children: [_jsx(StyledMilestoneButton, { status: stageStatus, readOnly: readOnly, ...stageButtonProps, children: stage.completed ? (_jsx(Icon, { name: 'check' })) : (_jsx("span", { "aria-hidden": 'true', children: stageIndex + 1 })) }), _jsx(StyledMilestoneLabel, { children: stage.name })] })) : (_jsx(Flex, { as: StyledStageContainer, item: { grow: 1, shrink: 0 }, readOnly: readOnly, variant: variant, children: _jsx(Flex, { container: { justify: 'center', alignItems: 'center' }, as: StyledStage, item: { grow: 1, shrink: 0 }, status: stageStatus, readOnly: readOnly, variant: variant, ...stageButtonProps, 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
168
|
setTarget(null);
|
|
149
169
|
setTargetStageId(null);
|
|
150
170
|
}, 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));
|
|
@@ -1 +1 @@
|
|
|
1
|
-
{"version":3,"file":"Stages.js","sourceRoot":"","sources":["../../../src/components/Stages/Stages.tsx"],"names":[],"mappings":"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","sourcesContent":["import { useState, useRef, useEffect, forwardRef, Fragment } from 'react';\nimport type { MouseEvent, PropsWithoutRef } from 'react';\n\nimport {\n Icon,\n registerIcon,\n Flex,\n useI18n,\n Button,\n Modal,\n useBreakpoint,\n useModalManager,\n useConsolidatedRef,\n useUID,\n InfoDialog,\n useArrows,\n useDirection,\n useAfterInitialEffect,\n VisuallyHiddenText,\n withTestIds,\n useTestIds,\n useElement,\n useFocusWithin,\n isInstance\n} from '@pega/cosmos-react-core';\nimport type { ForwardRefForwardPropsComponent, ModalMethods } from '@pega/cosmos-react-core';\nimport * as checkIcon from '@pega/cosmos-react-core/lib/components/Icon/icons/check.icon';\n\nimport type { StagesProps, StageStatus } from './Stages.types';\nimport { getStagesTestIds } from './Stages.test-ids';\nimport StageGlimpse from './StageGlimpse';\nimport {\n StyledInnerStage,\n StyledStageCompleteIcon,\n StyledStage,\n StyledStageContainer,\n StyledStageGlimpse,\n StyledStages,\n StyledStagesWrapper,\n StyledStagesDescription,\n StyledStageText,\n StyledSentinel\n} from './Stages.styles';\n\nregisterIcon(checkIcon);\n\nconst Stages: ForwardRefForwardPropsComponent<StagesProps> = forwardRef(function Stages(\n {\n current,\n stages,\n caseTitle,\n onLoadStage,\n readOnly = false,\n testId,\n ...restProps\n }: PropsWithoutRef<StagesProps>,\n ref: StagesProps['ref']\n) {\n const t = useI18n();\n const testIds = useTestIds(testId, getStagesTestIds);\n const stagesRef = useConsolidatedRef(ref);\n const wrapperRef = useRef<HTMLDivElement>(null);\n const startSentinelRef = useRef<HTMLLIElement>(null);\n const endSentinelRef = useRef<HTMLLIElement>(null);\n const stagesRefs = useRef<Map<string, HTMLButtonElement>>(new Map());\n\n const [target, setTarget] = useElement<HTMLButtonElement>(null);\n const [targetStageId, setTargetStageId] = useState<string | null>(null);\n const [currentStageBtn, setCurrentStageBtn] = useState<HTMLButtonElement | null>(null);\n\n const { create: createModal } = useModalManager();\n const modalMethods = useRef<ModalMethods>();\n const [showModal, setShowModal] = useState(false);\n\n const isSmallOrAbove = useBreakpoint('sm');\n\n const { rtl } = useDirection();\n\n useArrows(\n stagesRef,\n {\n cycle: false,\n selector: ':scope > li > button:not([aria-expanded])',\n dir: 'left-right',\n initialFocusElement: currentStageBtn\n },\n [currentStageBtn]\n );\n\n const dialogId = useUID();\n const descriptionId = useUID();\n\n useEffect(() => {\n const el = stagesRef.current;\n const wrapper = wrapperRef.current;\n const startSentinel = startSentinelRef.current;\n const endSentinel = endSentinelRef.current;\n if (!el || !wrapper || !startSentinel || !endSentinel) return;\n\n const fadeValue = 'var(--stages-fade-width)';\n\n const observer = new IntersectionObserver(\n entries => {\n for (const entry of entries) {\n const visible = entry.isIntersecting;\n if (entry.target === startSentinel) {\n wrapper.style.setProperty('--stages-fade-start', visible ? '0rem' : fadeValue);\n } else if (entry.target === endSentinel) {\n wrapper.style.setProperty('--stages-fade-end', visible ? '0rem' : fadeValue);\n }\n }\n },\n { root: el, threshold: 0 }\n );\n\n observer.observe(startSentinel);\n observer.observe(endSentinel);\n\n return () => observer.disconnect();\n }, [stages.length]);\n\n useEffect(() => {\n const el = stagesRef.current;\n const currentBtn = el?.querySelector<HTMLButtonElement>('[aria-current=\"step\"]');\n currentBtn?.scrollIntoView({ inline: 'center', behavior: 'auto', block: 'nearest' });\n }, [current]); // re-center whenever the active stage changes\n\n useFocusWithin([stagesRef], focused => {\n if (focused && isInstance(document.activeElement, HTMLButtonElement)) {\n document.activeElement.scrollIntoView({\n inline: 'center',\n behavior: 'smooth',\n block: 'nearest'\n });\n }\n });\n\n const stagesToLoad = onLoadStage\n ? stages.filter(stage => !Array.isArray(stage.steps)).map(stage => stage.id)\n : [];\n\n const renderModalStages = () =>\n stages.map(stage => (\n <Fragment key={stage.id}>\n <Flex container={{ alignItems: 'start', gap: 0.5 }}>\n {stage.completed && <StyledStageCompleteIcon name='check' />}\n <StyledStageText variant='h3' isCurrent={stage.id === current}>\n {stage.name}\n {stage.completed && <VisuallyHiddenText>{`- ${t('completed')}`}</VisuallyHiddenText>}\n </StyledStageText>\n </Flex>\n <StageGlimpse stage={stage} />\n </Fragment>\n ));\n\n const openModal = () => {\n setShowModal(true);\n if (stagesToLoad.length > 0) onLoadStage?.(stagesToLoad);\n modalMethods.current = createModal(Modal, {\n heading: caseTitle\n ? t('stages_case_lifecycle', [caseTitle])\n : t('stages_default_case_lifecycle'),\n progress: stagesToLoad.length > 0,\n children: renderModalStages(),\n onBeforeClose: () => {\n setShowModal(false);\n target?.focus();\n setTarget(null);\n setTargetStageId(null);\n modalMethods.current = undefined;\n }\n });\n };\n\n useAfterInitialEffect(() => {\n modalMethods.current?.update({\n progress: stagesToLoad.length > 0,\n children: renderModalStages()\n });\n }, [stagesToLoad.length]);\n\n return (\n <>\n <StyledStagesWrapper ref={wrapperRef} data-testid={testIds.root}>\n <Flex\n {...restProps}\n container\n as={StyledStages}\n ref={stagesRef}\n dir={rtl ? 'rtl' : 'ltr'}\n aria-label={t('stages_label')}\n aria-describedby={descriptionId}\n >\n <StyledSentinel ref={startSentinelRef} aria-hidden='true' />\n {stages.map(stage => {\n const isCurrent = stage.id === current;\n let stageStatusText = t(stage.completed ? 'completed' : 'not_started');\n if (isCurrent) stageStatusText = t('current');\n\n const hasToLoad = stagesToLoad.includes(stage.id);\n\n let stageStatus: StageStatus;\n\n if (stage.completed) {\n stageStatus = 'completed';\n } else if (isCurrent) {\n stageStatus = 'current';\n } else {\n stageStatus = 'pending';\n }\n\n return (\n <Fragment key={stage.id}>\n <Flex as={StyledStageContainer} item={{ grow: 1, shrink: 0 }} readOnly={readOnly}>\n <Flex\n container={{ justify: 'center', alignItems: 'center' }}\n as={StyledStage}\n item={{ grow: 1, shrink: 0 }}\n status={stageStatus}\n readOnly={readOnly}\n aria-current={isCurrent ? 'step' : undefined}\n aria-label={t('stages_stage_label', [stage.name, stageStatusText])}\n ref={(el: HTMLButtonElement | null) => {\n if (el) {\n stagesRefs.current.set(stage.id, el);\n if (isCurrent) setCurrentStageBtn(prev => (prev !== el ? el : prev));\n } else {\n stagesRefs.current.delete(stage.id);\n if (isCurrent) setCurrentStageBtn(null);\n }\n }}\n aria-expanded={\n targetStageId === stage.id && Boolean(target) && isSmallOrAbove\n ? true\n : undefined\n }\n aria-controls={\n targetStageId === stage.id && target && isSmallOrAbove ? dialogId : undefined\n }\n {...(!readOnly && {\n 'aria-haspopup': 'dialog' as const,\n onClick: (e: MouseEvent<HTMLButtonElement>) => {\n if (isSmallOrAbove) {\n if (hasToLoad) onLoadStage?.([stage.id]);\n const btn = e.currentTarget;\n btn.scrollIntoView({\n inline: 'center',\n behavior: 'smooth',\n block: 'nearest'\n });\n setTarget(btn);\n setTargetStageId(stage.id);\n } else {\n openModal();\n }\n }\n })}\n >\n <StyledInnerStage>\n {stage.completed && <Icon name='check' />}\n {stage.name}\n </StyledInnerStage>\n </Flex>\n </Flex>\n {target && targetStageId === stage.id && isSmallOrAbove && !showModal && (\n <InfoDialog\n id={dialogId}\n heading={stage.name}\n target={target}\n progress={hasToLoad ? t('loading') : undefined}\n onDismiss={() => {\n setTarget(null);\n setTargetStageId(null);\n }}\n placement='bottom'\n >\n {!hasToLoad && (\n <StyledStageGlimpse>\n <StageGlimpse stage={stage} />\n <Button variant='secondary' onClick={openModal}>\n {t('stages_see_full_lifecycle')}\n </Button>\n </StyledStageGlimpse>\n )}\n </InfoDialog>\n )}\n </Fragment>\n );\n })}\n <StyledSentinel ref={endSentinelRef} aria-hidden='true' />\n </Flex>\n </StyledStagesWrapper>\n <StyledStagesDescription id={descriptionId}>\n {t('stages_description')}\n </StyledStagesDescription>\n </>\n );\n});\n\nexport default withTestIds(Stages, getStagesTestIds);\n"]}
|
|
1
|
+
{"version":3,"file":"Stages.js","sourceRoot":"","sources":["../../../src/components/Stages/Stages.tsx"],"names":[],"mappings":"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","sourcesContent":["import { useState, useRef, useEffect, forwardRef, Fragment } from 'react';\nimport type { MouseEvent, PropsWithoutRef } from 'react';\n\nimport {\n Icon,\n registerIcon,\n Flex,\n useI18n,\n Button,\n Modal,\n useBreakpoint,\n useModalManager,\n useConsolidatedRef,\n useUID,\n InfoDialog,\n useArrows,\n useDirection,\n useAfterInitialEffect,\n VisuallyHiddenText,\n withTestIds,\n useTestIds,\n useElement,\n useFocusWithin,\n isInstance,\n getActiveElement\n} from '@pega/cosmos-react-core';\nimport type { ForwardRefForwardPropsComponent, ModalMethods } from '@pega/cosmos-react-core';\nimport * as checkIcon from '@pega/cosmos-react-core/lib/components/Icon/icons/check.icon';\n\nimport type { StagesProps, StageStatus } from './Stages.types';\nimport { getStagesTestIds } from './Stages.test-ids';\nimport StageGlimpse from './StageGlimpse';\nimport {\n StyledInnerStage,\n StyledStageCompleteIcon,\n StyledStage,\n StyledStageContainer,\n StyledStageGlimpse,\n StyledStages,\n StyledStagesWrapper,\n StyledStagesDescription,\n StyledStageText,\n StyledSentinel,\n StyledMilestoneStageContainer,\n StyledMilestoneButton,\n StyledMilestoneLabel\n} from './Stages.styles';\n\nregisterIcon(checkIcon);\n\nconst Stages: ForwardRefForwardPropsComponent<StagesProps> = forwardRef(function Stages(\n {\n current,\n stages,\n caseTitle,\n onLoadStage,\n readOnly = false,\n variant = 'chevron',\n testId,\n ...restProps\n }: PropsWithoutRef<StagesProps>,\n ref: StagesProps['ref']\n) {\n const t = useI18n();\n\n const testIds = useTestIds(testId, getStagesTestIds);\n\n const isMilestoneVariant = variant === 'milestone';\n\n const stagesRef = useConsolidatedRef(ref);\n const wrapperRef = useRef<HTMLDivElement>(null);\n const startSentinelRef = useRef<HTMLLIElement>(null);\n const endSentinelRef = useRef<HTMLLIElement>(null);\n const stagesRefs = useRef<Map<string, HTMLButtonElement>>(new Map());\n\n const [target, setTarget] = useElement<HTMLButtonElement>(null);\n const [targetStageId, setTargetStageId] = useState<string | null>(null);\n const [currentStageBtn, setCurrentStageBtn] = useState<HTMLButtonElement | null>(null);\n\n const { create: createModal } = useModalManager();\n const modalMethods = useRef<ModalMethods>();\n const [showModal, setShowModal] = useState(false);\n\n const isSmallOrAbove = useBreakpoint('sm');\n\n const { rtl } = useDirection();\n\n useArrows(\n stagesRef,\n {\n cycle: false,\n selector: ':scope > li > button:not([aria-expanded])',\n dir: 'left-right',\n initialFocusElement: currentStageBtn\n },\n [currentStageBtn]\n );\n\n const dialogId = useUID();\n const descriptionId = useUID();\n\n useEffect(() => {\n const el = stagesRef.current;\n const wrapper = wrapperRef.current;\n const startSentinel = startSentinelRef.current;\n const endSentinel = endSentinelRef.current;\n if (!el || !wrapper || !startSentinel || !endSentinel) return;\n\n const fadeValue = 'var(--stages-fade-width)';\n\n const observer = new IntersectionObserver(\n entries => {\n for (const entry of entries) {\n const visible = entry.isIntersecting;\n if (entry.target === startSentinel) {\n wrapper.style.setProperty('--stages-fade-start', visible ? '0rem' : fadeValue);\n } else if (entry.target === endSentinel) {\n wrapper.style.setProperty('--stages-fade-end', visible ? '0rem' : fadeValue);\n }\n }\n },\n { root: el, threshold: 0 }\n );\n\n observer.observe(startSentinel);\n observer.observe(endSentinel);\n\n return () => observer.disconnect();\n }, [stages.length]);\n\n useEffect(() => {\n const el = stagesRef.current;\n const currentBtn = el?.querySelector<HTMLButtonElement>('[aria-current=\"step\"]');\n currentBtn?.scrollIntoView({ inline: 'center', behavior: 'auto', block: 'nearest' });\n }, [current]); // re-center whenever the active stage changes\n\n useFocusWithin([stagesRef], focused => {\n const activeEl = getActiveElement();\n if (focused && isInstance(activeEl, HTMLButtonElement)) {\n activeEl.scrollIntoView({\n inline: 'center',\n behavior: 'smooth',\n block: 'nearest'\n });\n }\n });\n\n const stagesToLoad = onLoadStage\n ? stages.filter(stage => !Array.isArray(stage.steps)).map(stage => stage.id)\n : [];\n\n const renderModalStages = () =>\n stages.map(stage => (\n <Fragment key={stage.id}>\n <Flex container={{ alignItems: 'start', gap: 0.5 }}>\n {stage.completed && <StyledStageCompleteIcon name='check' />}\n <StyledStageText variant='h3' isCurrent={stage.id === current}>\n {stage.name}\n {stage.completed && <VisuallyHiddenText>{`- ${t('completed')}`}</VisuallyHiddenText>}\n </StyledStageText>\n </Flex>\n <StageGlimpse stage={stage} />\n </Fragment>\n ));\n\n const openModal = () => {\n setShowModal(true);\n if (stagesToLoad.length > 0) onLoadStage?.(stagesToLoad);\n modalMethods.current = createModal(Modal, {\n heading: caseTitle\n ? t('stages_case_lifecycle', [caseTitle])\n : t('stages_default_case_lifecycle'),\n progress: stagesToLoad.length > 0,\n children: renderModalStages(),\n onBeforeClose: () => {\n setShowModal(false);\n target?.focus();\n setTarget(null);\n setTargetStageId(null);\n modalMethods.current = undefined;\n }\n });\n };\n\n useAfterInitialEffect(() => {\n modalMethods.current?.update({\n progress: stagesToLoad.length > 0,\n children: renderModalStages()\n });\n }, [stagesToLoad.length]);\n\n const setStageButtonRef =\n (stageId: string, isCurrent: boolean) => (el: HTMLButtonElement | null) => {\n if (el) {\n stagesRefs.current.set(stageId, el);\n if (isCurrent) setCurrentStageBtn(prev => (prev !== el ? el : prev));\n } else {\n stagesRefs.current.delete(stageId);\n if (isCurrent) setCurrentStageBtn(null);\n }\n };\n\n const handleStageClick =\n (stageId: string, hasToLoad: boolean) => (e: MouseEvent<HTMLButtonElement>) => {\n if (isSmallOrAbove) {\n if (hasToLoad) onLoadStage?.([stageId]);\n\n const btn = e.currentTarget;\n btn.scrollIntoView({\n inline: 'center',\n behavior: 'smooth',\n block: 'nearest'\n });\n\n setTarget(btn);\n setTargetStageId(stageId);\n } else {\n openModal();\n }\n };\n\n const getStageButtonProps = ({\n stageId,\n stageName,\n stageStatusText,\n isCurrent,\n hasToLoad\n }: {\n stageId: string;\n stageName: string;\n stageStatusText: string;\n isCurrent: boolean;\n hasToLoad: boolean;\n }) => {\n const isExpanded = targetStageId === stageId && Boolean(target) && isSmallOrAbove;\n\n return {\n ref: setStageButtonRef(stageId, isCurrent),\n 'aria-current': isCurrent ? ('step' as const) : undefined,\n 'aria-label': t('stages_stage_label', [stageName, stageStatusText]),\n 'aria-expanded': isExpanded ? true : undefined,\n 'aria-controls': isExpanded ? dialogId : undefined,\n ...(!readOnly && {\n 'aria-haspopup': 'dialog' as const,\n onClick: handleStageClick(stageId, hasToLoad)\n })\n };\n };\n\n return (\n <>\n <StyledStagesWrapper ref={wrapperRef} data-testid={testIds.root}>\n <Flex\n {...restProps}\n container\n as={StyledStages}\n ref={stagesRef}\n variant={variant}\n dir={rtl ? 'rtl' : 'ltr'}\n aria-label={t('stages_label')}\n aria-describedby={descriptionId}\n >\n <StyledSentinel ref={startSentinelRef} aria-hidden='true' />\n\n {stages.map((stage, stageIndex) => {\n const isCurrent = stage.id === current;\n let stageStatusText = t(stage.completed ? 'completed' : 'not_started');\n if (isCurrent) stageStatusText = t('current');\n\n const hasToLoad = stagesToLoad.includes(stage.id);\n\n let stageStatus: StageStatus;\n\n if (stage.completed) {\n stageStatus = 'completed';\n } else if (isCurrent) {\n stageStatus = 'current';\n } else {\n stageStatus = 'pending';\n }\n\n const stageButtonProps = getStageButtonProps({\n stageId: stage.id,\n stageName: stage.name,\n stageStatusText,\n isCurrent,\n hasToLoad\n });\n\n return (\n <Fragment key={stage.id}>\n {isMilestoneVariant ? (\n <StyledMilestoneStageContainer\n status={stageStatus}\n nextCompleted={stages[stageIndex + 1]?.completed ?? false}\n readOnly={readOnly}\n >\n <StyledMilestoneButton\n status={stageStatus}\n readOnly={readOnly}\n {...stageButtonProps}\n >\n {stage.completed ? (\n <Icon name='check' />\n ) : (\n <span aria-hidden='true'>{stageIndex + 1}</span>\n )}\n </StyledMilestoneButton>\n <StyledMilestoneLabel>{stage.name}</StyledMilestoneLabel>\n </StyledMilestoneStageContainer>\n ) : (\n <Flex\n as={StyledStageContainer}\n item={{ grow: 1, shrink: 0 }}\n readOnly={readOnly}\n variant={variant}\n >\n <Flex\n container={{ justify: 'center', alignItems: 'center' }}\n as={StyledStage}\n item={{ grow: 1, shrink: 0 }}\n status={stageStatus}\n readOnly={readOnly}\n variant={variant}\n {...stageButtonProps}\n >\n <StyledInnerStage>\n {stage.completed && <Icon name='check' />}\n {stage.name}\n </StyledInnerStage>\n </Flex>\n </Flex>\n )}\n\n {target && targetStageId === stage.id && isSmallOrAbove && !showModal && (\n <InfoDialog\n id={dialogId}\n heading={stage.name}\n target={target}\n progress={hasToLoad ? t('loading') : undefined}\n onDismiss={() => {\n setTarget(null);\n setTargetStageId(null);\n }}\n placement='bottom'\n >\n {!hasToLoad && (\n <StyledStageGlimpse>\n <StageGlimpse stage={stage} />\n <Button variant='secondary' onClick={openModal}>\n {t('stages_see_full_lifecycle')}\n </Button>\n </StyledStageGlimpse>\n )}\n </InfoDialog>\n )}\n </Fragment>\n );\n })}\n\n <StyledSentinel ref={endSentinelRef} aria-hidden='true' />\n </Flex>\n </StyledStagesWrapper>\n\n <StyledStagesDescription id={descriptionId}>\n {t('stages_description')}\n </StyledStagesDescription>\n </>\n );\n});\n\nexport default withTestIds(Stages, getStagesTestIds);\n"]}
|
|
@@ -1,13 +1,17 @@
|
|
|
1
|
+
import type { StageVariant } from './Stages.types';
|
|
1
2
|
/**
|
|
2
3
|
* Outer wrapper `<div>` for the stages bar. Applies layered scroll-fade masks and
|
|
3
4
|
* reserves scrollbar space so the fade gradient does not overlap the scrollbar track.
|
|
4
5
|
*/
|
|
5
6
|
export declare const StyledStagesWrapper: import("styled-components/dist/types").IStyledComponentBase<"web", import("styled-components").FastOmit<import("react").DetailedHTMLProps<import("react").HTMLAttributes<HTMLDivElement>, HTMLDivElement>, never>> & string;
|
|
6
7
|
/**
|
|
7
|
-
* Scrollable `<ol>` containing all stage chevron items. Sets the `--chevron-spacing
|
|
8
|
-
* and `--
|
|
8
|
+
* Scrollable `<ol>` containing all stage chevron items. Sets the `--chevron-spacing`,
|
|
9
|
+
* `--chevron-border-thickness`, and `--segmented-border-thickness` custom properties
|
|
10
|
+
* consumed by child elements.
|
|
9
11
|
*/
|
|
10
|
-
export declare const StyledStages: import("styled-components/dist/types").IStyledComponentBase<"web", import("styled-components").
|
|
12
|
+
export declare const StyledStages: import("styled-components/dist/types").IStyledComponentBase<"web", import("styled-components/dist/types").Substitute<import("react").DetailedHTMLProps<import("react").OlHTMLAttributes<HTMLOListElement>, HTMLOListElement>, {
|
|
13
|
+
variant: StageVariant;
|
|
14
|
+
}>> & string;
|
|
11
15
|
/**
|
|
12
16
|
* A sentinel is an invisible 1 px <li> placed at each end of the scrollable stage list.
|
|
13
17
|
* It is observed by an IntersectionObserver; when it scrolls out of view, the component sets
|
|
@@ -35,6 +39,7 @@ export declare const StyledInnerStage: import("styled-components/dist/types").IS
|
|
|
35
39
|
export declare const StyledStage: import("styled-components/dist/types").IStyledComponentBase<"web", import("styled-components/dist/types").Substitute<import("react").DetailedHTMLProps<import("react").ButtonHTMLAttributes<HTMLButtonElement>, HTMLButtonElement>, {
|
|
36
40
|
status: "completed" | "current" | "pending";
|
|
37
41
|
readOnly?: boolean;
|
|
42
|
+
variant: StageVariant;
|
|
38
43
|
}>> & string;
|
|
39
44
|
/**
|
|
40
45
|
* Checkmark icon shown inside completed stages, tinted to match the stage foreground colour.
|
|
@@ -54,6 +59,7 @@ export declare const StyledStageText: import("styled-components/dist/types").ISt
|
|
|
54
59
|
*/
|
|
55
60
|
export declare const StyledStageContainer: import("styled-components/dist/types").IStyledComponentBase<"web", import("styled-components/dist/types").Substitute<import("react").DetailedHTMLProps<import("react").LiHTMLAttributes<HTMLLIElement>, HTMLLIElement>, {
|
|
56
61
|
readOnly?: boolean;
|
|
62
|
+
variant: StageVariant;
|
|
57
63
|
}>> & string;
|
|
58
64
|
/**
|
|
59
65
|
* `<ol>` list of sub-step items displayed below the stages bar when a stage is expanded.
|
|
@@ -69,13 +75,29 @@ export declare const StyledStep: import("styled-components/dist/types").IStyledC
|
|
|
69
75
|
* Small datetime label rendered beneath a step. Displayed at the `xs` font size
|
|
70
76
|
* and reduced opacity.
|
|
71
77
|
*/
|
|
72
|
-
export declare const StyledDateTimeDisplay: import("styled-components/dist/types").IStyledComponentBase<"web", import("styled-components").FastOmit<Omit<Omit<import("@pega/cosmos-react-core").DateTimeDisplayProps, "ref"> & import("react").RefAttributes<
|
|
73
|
-
ref?: ((instance:
|
|
78
|
+
export declare const StyledDateTimeDisplay: import("styled-components/dist/types").IStyledComponentBase<"web", import("styled-components").FastOmit<Omit<Omit<import("@pega/cosmos-react-core").DateTimeDisplayProps, "ref"> & import("react").RefAttributes<HTMLTimeElement> & import("@pega/cosmos-react-core").ForwardProps, "ref"> & {
|
|
79
|
+
ref?: ((instance: HTMLTimeElement | 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<HTMLTimeElement> | null | undefined;
|
|
74
80
|
}, never>> & string & Omit<import("@pega/cosmos-react-core").ForwardRefForwardPropsComponent<import("@pega/cosmos-react-core").DateTimeDisplayProps>, keyof import("react").Component<any, {}, any>>;
|
|
75
81
|
/**
|
|
76
82
|
* Container `<div>` for the stage glimpse preview panel, constrained to a small max-width.
|
|
77
83
|
*/
|
|
78
84
|
export declare const StyledStageGlimpse: import("styled-components/dist/types").IStyledComponentBase<"web", import("styled-components").FastOmit<import("react").DetailedHTMLProps<import("react").HTMLAttributes<HTMLDivElement>, HTMLDivElement>, never>> & string;
|
|
85
|
+
export declare const StyledMilestoneLabel: import("styled-components/dist/types").IStyledComponentBase<"web", import("styled-components").FastOmit<import("react").DetailedHTMLProps<import("react").HTMLAttributes<HTMLSpanElement>, HTMLSpanElement>, never>> & string;
|
|
86
|
+
/**
|
|
87
|
+
* `<li>` container for a single stage item in the 'milestone' shape variant.
|
|
88
|
+
* Renders column-flex layout (milestone above, label below) and draws the
|
|
89
|
+
* horizontal connector as a single line from this milestone's centre to the next
|
|
90
|
+
* milestone's centre (::after), sized so every connector has an identical length.
|
|
91
|
+
*/
|
|
92
|
+
export declare const StyledMilestoneStageContainer: import("styled-components/dist/types").IStyledComponentBase<"web", import("styled-components/dist/types").Substitute<import("react").DetailedHTMLProps<import("react").LiHTMLAttributes<HTMLLIElement>, HTMLLIElement>, {
|
|
93
|
+
status: "completed" | "current" | "pending";
|
|
94
|
+
nextCompleted: boolean;
|
|
95
|
+
readOnly?: boolean;
|
|
96
|
+
}>> & string;
|
|
97
|
+
export declare const StyledMilestoneButton: import("styled-components/dist/types").IStyledComponentBase<"web", import("styled-components/dist/types").Substitute<import("react").DetailedHTMLProps<import("react").ButtonHTMLAttributes<HTMLButtonElement>, HTMLButtonElement>, {
|
|
98
|
+
status: "completed" | "current" | "pending";
|
|
99
|
+
readOnly?: boolean;
|
|
100
|
+
}>> & string;
|
|
79
101
|
/**
|
|
80
102
|
* Visually hidden `<p>` providing an accessible description for the stages list,
|
|
81
103
|
* announced by screen readers but not displayed on screen.
|
|
@@ -1 +1 @@
|
|
|
1
|
-
{"version":3,"file":"Stages.styles.d.ts","sourceRoot":"","sources":["../../../src/components/Stages/Stages.styles.ts"],"names":[],"mappings":"
|
|
1
|
+
{"version":3,"file":"Stages.styles.d.ts","sourceRoot":"","sources":["../../../src/components/Stages/Stages.styles.ts"],"names":[],"mappings":"AAeA,OAAO,KAAK,EAAE,YAAY,EAAE,MAAM,gBAAgB,CAAC;AAiJnD;;;GAGG;AACH,eAAO,MAAM,mBAAmB,6NAiH9B,CAAC;AAIH;;;;GAIG;AACH,eAAO,MAAM,YAAY;aAAwB,YAAY;YAqD3D,CAAC;AAIH;;;;;;;;;;;GAWG;AACH,eAAO,MAAM,cAAc,6NA6B1B,CAAC;AAIF;;;GAGG;AACH,eAAO,MAAM,gBAAgB;eAA4B,OAAO;YAe9D,CAAC;AAsDH;;;GAGG;AACH,eAAO,MAAM,WAAW;YACd,WAAW,GAAG,SAAS,GAAG,SAAS;eAChC,OAAO;aACT,YAAY;YA6EtB,CAAC;AAIF;;GAEG;AACH,eAAO,MAAM,uBAAuB,kaAiBlC,CAAC;AAIH;;GAEG;AACH,eAAO,MAAM,eAAe;;;gBAA8B,OAAO;kLAIhE,CAAC;AAwZF;;;GAGG;AACH,eAAO,MAAM,oBAAoB;eACpB,OAAO;aACT,YAAY;YAyDtB,CAAC;AAIF;;GAEG;AACH,eAAO,MAAM,oBAAoB,mOAS/B,CAAC;AAIH;;GAEG;AACH,eAAO,MAAM,UAAU;eAA0B,OAAO;YAoBtD,CAAC;AAIH;;;GAGG;AACH,eAAO,MAAM,qBAAqB;;oMAMhC,CAAC;AAIH;;GAEG;AACH,eAAO,MAAM,kBAAkB,6NAI7B,CAAC;AAaH,eAAO,MAAM,oBAAoB,+NAS/B,CAAC;AAIH;;;;;GAKG;AACH,eAAO,MAAM,6BAA6B;YAChC,WAAW,GAAG,SAAS,GAAG,SAAS;mBAC5B,OAAO;eACX,OAAO;YA8ElB,CAAC;AAIH,eAAO,MAAM,qBAAqB;YACxB,WAAW,GAAG,SAAS,GAAG,SAAS;eAChC,OAAO;YAoHlB,CAAC;AAIH;;;GAGG;AACH,eAAO,MAAM,uBAAuB,yOAEnC,CAAC"}
|