@pega/cosmos-react-work 5.0.0-dev.10.1 → 5.0.0-dev.10.3
This diff represents the content of publicly available package versions that have been released to one of the supported registries. The information contained in this diff is provided for informational purposes only and reflects changes between package versions as they appear in their respective public registries.
- package/lib/components/ArticleList/ArticleSummary.d.ts.map +1 -1
- package/lib/components/ArticleList/ArticleSummary.js +13 -8
- package/lib/components/ArticleList/ArticleSummary.js.map +1 -1
- package/lib/components/Assignments/Assignments.d.ts.map +1 -1
- package/lib/components/Assignments/Assignments.js +3 -3
- package/lib/components/Assignments/Assignments.js.map +1 -1
- package/lib/components/Assignments/Assignments.styles.d.ts +0 -3
- package/lib/components/Assignments/Assignments.styles.d.ts.map +1 -1
- package/lib/components/Assignments/Assignments.styles.js +12 -14
- package/lib/components/Assignments/Assignments.styles.js.map +1 -1
- package/lib/components/Tasks/TaskList.d.ts.map +1 -1
- package/lib/components/Tasks/TaskList.js +11 -8
- package/lib/components/Tasks/TaskList.js.map +1 -1
- package/lib/components/Tasks/Tasks.d.ts +0 -1
- package/lib/components/Tasks/Tasks.d.ts.map +1 -1
- package/lib/components/Tasks/Tasks.js +2 -13
- package/lib/components/Tasks/Tasks.js.map +1 -1
- package/package.json +4 -4
|
@@ -1 +1 @@
|
|
|
1
|
-
{"version":3,"file":"ArticleSummary.d.ts","sourceRoot":"","sources":["../../../src/components/ArticleList/ArticleSummary.tsx"],"names":[],"mappings":"AAAA,OAAO,KAAK,EAAE,iBAAiB,
|
|
1
|
+
{"version":3,"file":"ArticleSummary.d.ts","sourceRoot":"","sources":["../../../src/components/ArticleList/ArticleSummary.tsx"],"names":[],"mappings":"AAAA,OAAO,KAAK,EAAE,iBAAiB,EAAc,MAAM,OAAO,CAAC;AAgB3D,OAAO,KAAK,EAAE,YAAY,EAAE,MAAM,yBAAyB,CAAC;AAU5D,OAAO,KAAK,EAAE,mBAAmB,EAAE,MAAM,qBAAqB,CAAC;AAqC/D,eAAO,MAAM,kBAAkB,yGAW7B,CAAC;AAGH,QAAA,MAAM,cAAc,EAAE,iBAAiB,CAAC,mBAAmB,GAAG,YAAY,CAkFzE,CAAC;AAEF,eAAe,cAAc,CAAC"}
|
|
@@ -1,6 +1,6 @@
|
|
|
1
1
|
import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
|
|
2
2
|
import styled, { css } from 'styled-components';
|
|
3
|
-
import { CardHeader, CardContent, CardFooter, Link, Text, StyledText, Actions, Flex, Tag, defaultThemeProp } from '@pega/cosmos-react-core';
|
|
3
|
+
import { CardHeader, CardContent, CardFooter, Link, Text, StyledText, Actions, Flex, Tag, defaultThemeProp, Button } from '@pega/cosmos-react-core';
|
|
4
4
|
import { StyledCard } from '@pega/cosmos-react-core/lib/components/Card/Card';
|
|
5
5
|
import { StyledCardHeader } from '@pega/cosmos-react-core/lib/components/Card/CardHeader';
|
|
6
6
|
import { StyledCardContent } from '@pega/cosmos-react-core/lib/components/Card/CardContent';
|
|
@@ -17,15 +17,15 @@ const ArticleCard = styled(StyledCard)(({ theme: { base: { spacing, palette } }
|
|
|
17
17
|
}
|
|
18
18
|
&&& {
|
|
19
19
|
border-radius: 0;
|
|
20
|
+
padding-block-start: 0;
|
|
21
|
+
|
|
20
22
|
> ${StyledCardHeader} {
|
|
21
|
-
padding-block
|
|
23
|
+
padding-block: 0 calc(0.5 * ${spacing});
|
|
22
24
|
padding-inline: 0;
|
|
23
25
|
}
|
|
24
26
|
> ${StyledCardContent}, > ${StyledCardFooter} {
|
|
25
27
|
padding-inline: 0;
|
|
26
|
-
|
|
27
|
-
> ${StyledCardContent} {
|
|
28
|
-
padding-block-end: ${spacing};
|
|
28
|
+
padding-block: 0;
|
|
29
29
|
}
|
|
30
30
|
> ${StyledCardContent} > ${StyledText} {
|
|
31
31
|
display: -webkit-box;
|
|
@@ -41,20 +41,25 @@ export const StyledQuickFilters = styled.div(({ theme }) => {
|
|
|
41
41
|
return css `
|
|
42
42
|
${StyledBareButton} {
|
|
43
43
|
margin-inline-start: 0;
|
|
44
|
-
margin-block
|
|
44
|
+
margin-block: calc(0.5 * ${spacing});
|
|
45
45
|
}
|
|
46
46
|
`;
|
|
47
47
|
});
|
|
48
48
|
StyledQuickFilters.defaultProps = defaultThemeProp;
|
|
49
49
|
const ArticleSummary = (props) => {
|
|
50
50
|
const { articleId, href, title, abstract, onTitleClick, primaryActions, meta, quickFilters, onQuickFilterClick, feedback, ...restProps } = props;
|
|
51
|
-
return (_jsxs(ArticleCard, { as: 'li', role: 'article', ...restProps, children: [
|
|
51
|
+
return (_jsxs(ArticleCard, { as: 'li', role: 'article', ...restProps, children: [_jsx(CardHeader, { actions: primaryActions?.length ? _jsx(Actions, { items: primaryActions }) : undefined, children: href ? (_jsx(Link, { href: href, target: '_blank', children: title })) : (_jsx(Button, { variant: 'link', onClick: (e) => {
|
|
52
|
+
onTitleClick?.(articleId, e);
|
|
53
|
+
}, children: title })) }), _jsx(CardContent, { children: _jsx(Text, { children: abstract }) }), _jsxs(CardFooter, { children: [feedback && (_jsx(Flex, { container: { pad: [0.5, undefined] }, item: {
|
|
52
54
|
grow: 1,
|
|
53
55
|
basis: '100%'
|
|
54
56
|
}, children: _jsx(ArticleRating, { ...feedback,
|
|
55
57
|
onReaction: reaction => {
|
|
56
58
|
feedback?.onReaction(articleId, reaction);
|
|
57
|
-
} }) })), meta && _jsx(ArticleMeta, { ...meta }), quickFilters && quickFilters.length > 0 && (_jsx(Flex, { container: {
|
|
59
|
+
} }) })), meta && _jsx(ArticleMeta, { ...meta }), quickFilters && quickFilters.length > 0 && (_jsx(Flex, { container: {
|
|
60
|
+
gap: 0.5,
|
|
61
|
+
wrap: 'wrap'
|
|
62
|
+
}, item: {
|
|
58
63
|
grow: 1,
|
|
59
64
|
basis: '100%'
|
|
60
65
|
}, as: StyledQuickFilters, children: quickFilters.map(({ id, name }) => (_jsx(Tag, { onClick: onQuickFilterClick ? e => onQuickFilterClick?.({ id, name }, e) : undefined, children: `#${name}` }, id))) }))] })] }));
|
|
@@ -1 +1 @@
|
|
|
1
|
-
{"version":3,"file":"ArticleSummary.js","sourceRoot":"","sources":["../../../src/components/ArticleList/ArticleSummary.tsx"],"names":[],"mappings":";AACA,OAAO,MAAM,EAAE,EAAE,GAAG,EAAE,MAAM,mBAAmB,CAAC;AAEhD,OAAO,EACL,UAAU,EACV,WAAW,EACX,UAAU,EACV,IAAI,EACJ,IAAI,EACJ,UAAU,EACV,OAAO,EACP,IAAI,EACJ,GAAG,EACH,gBAAgB,
|
|
1
|
+
{"version":3,"file":"ArticleSummary.js","sourceRoot":"","sources":["../../../src/components/ArticleList/ArticleSummary.tsx"],"names":[],"mappings":"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","sourcesContent":["import type { FunctionComponent, MouseEvent } from 'react';\nimport styled, { css } from 'styled-components';\n\nimport {\n CardHeader,\n CardContent,\n CardFooter,\n Link,\n Text,\n StyledText,\n Actions,\n Flex,\n Tag,\n defaultThemeProp,\n Button\n} from '@pega/cosmos-react-core';\nimport type { ForwardProps } from '@pega/cosmos-react-core';\nimport { StyledCard } from '@pega/cosmos-react-core/lib/components/Card/Card';\nimport { StyledCardHeader } from '@pega/cosmos-react-core/lib/components/Card/CardHeader';\nimport { StyledCardContent } from '@pega/cosmos-react-core/lib/components/Card/CardContent';\nimport { StyledCardFooter } from '@pega/cosmos-react-core/lib/components/Card/CardFooter';\nimport { StyledBareButton } from '@pega/cosmos-react-core/lib/components/Button/BareButton';\n\nimport ArticleRating from '../Article/ArticleRating';\nimport ArticleMeta from '../Article/ArticleMeta';\n\nimport type { ArticleSummaryProps } from './ArticleList.types';\n\nconst ArticleCard = styled(StyledCard)(\n ({\n theme: {\n base: { spacing, palette }\n }\n }) => {\n return css`\n &:not(:last-child) {\n border-block-end: 0.0625rem solid ${palette['border-line']};\n border-radius: 0;\n padding-block-end: ${spacing};\n }\n &&& {\n border-radius: 0;\n padding-block-start: 0;\n\n > ${StyledCardHeader} {\n padding-block: 0 calc(0.5 * ${spacing});\n padding-inline: 0;\n }\n > ${StyledCardContent}, > ${StyledCardFooter} {\n padding-inline: 0;\n padding-block: 0;\n }\n > ${StyledCardContent} > ${StyledText} {\n display: -webkit-box;\n -webkit-line-clamp: 3;\n -webkit-box-orient: vertical;\n overflow: hidden;\n }\n }\n `;\n }\n);\n\nexport const StyledQuickFilters = styled.div(({ theme }) => {\n const {\n base: { spacing }\n } = theme;\n\n return css`\n ${StyledBareButton} {\n margin-inline-start: 0;\n margin-block: calc(0.5 * ${spacing});\n }\n `;\n});\nStyledQuickFilters.defaultProps = defaultThemeProp;\n\nconst ArticleSummary: FunctionComponent<ArticleSummaryProps & ForwardProps> = (\n props: ArticleSummaryProps\n) => {\n const {\n articleId,\n href,\n title,\n abstract,\n onTitleClick,\n primaryActions,\n meta,\n quickFilters,\n onQuickFilterClick,\n feedback,\n ...restProps\n } = props;\n return (\n <ArticleCard as='li' role='article' {...restProps}>\n <CardHeader actions={primaryActions?.length ? <Actions items={primaryActions} /> : undefined}>\n {href ? (\n <Link href={href} target='_blank'>\n {title}\n </Link>\n ) : (\n <Button\n variant='link'\n onClick={(e: MouseEvent<HTMLButtonElement>) => {\n onTitleClick?.(articleId, e);\n }}\n >\n {title}\n </Button>\n )}\n </CardHeader>\n <CardContent>\n <Text>{abstract}</Text>\n </CardContent>\n <CardFooter>\n {feedback && (\n <Flex\n container={{ pad: [0.5, undefined] }}\n item={{\n grow: 1,\n basis: '100%'\n }}\n >\n <ArticleRating\n {...{\n ...feedback,\n onReaction: reaction => {\n feedback?.onReaction(articleId, reaction);\n }\n }}\n />\n </Flex>\n )}\n {meta && <ArticleMeta {...meta} />}\n {quickFilters && quickFilters.length > 0 && (\n <Flex\n container={{\n gap: 0.5,\n wrap: 'wrap'\n }}\n item={{\n grow: 1,\n basis: '100%'\n }}\n as={StyledQuickFilters}\n >\n {quickFilters.map(({ id, name }) => (\n <Tag\n key={id}\n onClick={\n onQuickFilterClick ? e => onQuickFilterClick?.({ id, name }, e) : undefined\n }\n >{`#${name}`}</Tag>\n ))}\n </Flex>\n )}\n </CardFooter>\n </ArticleCard>\n );\n};\n\nexport default ArticleSummary;\n"]}
|
|
@@ -1 +1 @@
|
|
|
1
|
-
{"version":3,"file":"Assignments.d.ts","sourceRoot":"","sources":["../../../src/components/Assignments/Assignments.tsx"],"names":[],"mappings":"AACA,OAAO,KAAK,EAAE,EAAE,EAAE,MAAM,OAAO,CAAC;
|
|
1
|
+
{"version":3,"file":"Assignments.d.ts","sourceRoot":"","sources":["../../../src/components/Assignments/Assignments.tsx"],"names":[],"mappings":"AACA,OAAO,KAAK,EAAE,EAAE,EAAE,MAAM,OAAO,CAAC;AAchC,OAAO,KAAK,EAAE,YAAY,EAAE,cAAc,EAAE,MAAM,yBAAyB,CAAC;AAG5E,OAAO,KAAK,EAAE,aAAa,EAAE,MAAM,mBAAmB,CAAC;AAIvD,MAAM,WAAW,gBAAiB,SAAQ,cAAc;IACtD,sDAAsD;IACtD,KAAK,EAAE,aAAa,EAAE,CAAC;IACvB,qDAAqD;IACrD,KAAK,EAAE,MAAM,CAAC;IACd;;;OAGG;IACH,SAAS,CAAC,EAAE,OAAO,CAAC;IACpB;;OAEG;IACH,iBAAiB,CAAC,EAAE,MAAM,IAAI,CAAC;CAChC;AAED,QAAA,MAAM,WAAW,EAAE,EAAE,CAAC,YAAY,GAAG,gBAAgB,CAsDpD,CAAC;AAEF,eAAe,WAAW,CAAC"}
|
|
@@ -1,8 +1,8 @@
|
|
|
1
1
|
import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
|
|
2
2
|
import { useMemo } from 'react';
|
|
3
|
-
import { CardHeader, useI18n, EmptyState, ExpandCollapse, Icon, Text, Count, Flex, useUID } from '@pega/cosmos-react-core';
|
|
3
|
+
import { CardHeader, useI18n, EmptyState, ExpandCollapse, Icon, Text, Count, Flex, useUID, CardContent } from '@pega/cosmos-react-core';
|
|
4
4
|
import TaskList, { TaskItem } from '../Tasks/TaskList';
|
|
5
|
-
import { StyledAssignments,
|
|
5
|
+
import { StyledAssignments, StyledExpandButton } from './Assignments.styles';
|
|
6
6
|
const Assignments = ({ items, count, collapsed, onToggleCollapsed, ...restProps }) => {
|
|
7
7
|
const openItem = items.find(item => item.content);
|
|
8
8
|
const t = useI18n();
|
|
@@ -10,7 +10,7 @@ const Assignments = ({ items, count, collapsed, onToggleCollapsed, ...restProps
|
|
|
10
10
|
const TaskItems = useMemo(() => {
|
|
11
11
|
return openItem ? _jsx(TaskItem, { ...openItem }) : _jsx(TaskList, { items: items });
|
|
12
12
|
}, [items, openItem]);
|
|
13
|
-
const tasks =
|
|
13
|
+
const tasks = _jsx(CardContent, { children: items.length > 0 ? TaskItems : _jsx(EmptyState, {}) });
|
|
14
14
|
const header = (_jsxs(Flex, { container: { alignItems: 'center', gap: 1 }, children: [typeof collapsed === 'boolean' && _jsx(Icon, { name: 'caret-right' }), _jsx(Text, { variant: 'h2', children: t('assignments') }), _jsx(Count, { children: count })] }));
|
|
15
15
|
return (_jsxs(StyledAssignments, { ...restProps, openItem: !!openItem, "data-app-region": true, children: [!openItem && (_jsxs(CardHeader, { container: { justify: 'start', alignItems: 'center', gap: 1 }, children: [typeof collapsed === 'boolean' && onToggleCollapsed && (_jsx(StyledExpandButton, { type: 'button', variant: 'text', onClick: () => {
|
|
16
16
|
onToggleCollapsed();
|
|
@@ -1 +1 @@
|
|
|
1
|
-
{"version":3,"file":"Assignments.js","sourceRoot":"","sources":["../../../src/components/Assignments/Assignments.tsx"],"names":[],"mappings":";AAAA,OAAO,EAAE,OAAO,EAAE,MAAM,OAAO,CAAC;AAGhC,OAAO,EACL,UAAU,EACV,OAAO,EACP,UAAU,EACV,cAAc,EACd,IAAI,EACJ,IAAI,EACJ,KAAK,EACL,IAAI,EACJ,MAAM,
|
|
1
|
+
{"version":3,"file":"Assignments.js","sourceRoot":"","sources":["../../../src/components/Assignments/Assignments.tsx"],"names":[],"mappings":";AAAA,OAAO,EAAE,OAAO,EAAE,MAAM,OAAO,CAAC;AAGhC,OAAO,EACL,UAAU,EACV,OAAO,EACP,UAAU,EACV,cAAc,EACd,IAAI,EACJ,IAAI,EACJ,KAAK,EACL,IAAI,EACJ,MAAM,EACN,WAAW,EACZ,MAAM,yBAAyB,CAAC;AAGjC,OAAO,QAAQ,EAAE,EAAE,QAAQ,EAAE,MAAM,mBAAmB,CAAC;AAGvD,OAAO,EAAE,iBAAiB,EAAE,kBAAkB,EAAE,MAAM,sBAAsB,CAAC;AAkB7E,MAAM,WAAW,GAAwC,CAAC,EACxD,KAAK,EACL,KAAK,EACL,SAAS,EACT,iBAAiB,EACjB,GAAG,SAAS,EACb,EAAE,EAAE;IACH,MAAM,QAAQ,GAAG,KAAK,CAAC,IAAI,CAAC,IAAI,CAAC,EAAE,CAAC,IAAI,CAAC,OAAO,CAAC,CAAC;IAClD,MAAM,CAAC,GAAG,OAAO,EAAE,CAAC;IACpB,MAAM,aAAa,GAAG,MAAM,EAAE,CAAC;IAE/B,MAAM,SAAS,GAAG,OAAO,CAAC,GAAG,EAAE;QAC7B,OAAO,QAAQ,CAAC,CAAC,CAAC,KAAC,QAAQ,OAAK,QAAQ,GAAI,CAAC,CAAC,CAAC,KAAC,QAAQ,IAAC,KAAK,EAAE,KAAK,GAAI,CAAC;IAC5E,CAAC,EAAE,CAAC,KAAK,EAAE,QAAQ,CAAC,CAAC,CAAC;IAEtB,MAAM,KAAK,GAAG,KAAC,WAAW,cAAE,KAAK,CAAC,MAAM,GAAG,CAAC,CAAC,CAAC,CAAC,SAAS,CAAC,CAAC,CAAC,KAAC,UAAU,KAAG,GAAe,CAAC;IAEzF,MAAM,MAAM,GAAG,CACb,MAAC,IAAI,IAAC,SAAS,EAAE,EAAE,UAAU,EAAE,QAAQ,EAAE,GAAG,EAAE,CAAC,EAAE,aAC9C,OAAO,SAAS,KAAK,SAAS,IAAI,KAAC,IAAI,IAAC,IAAI,EAAC,aAAa,GAAG,EAC9D,KAAC,IAAI,IAAC,OAAO,EAAC,IAAI,YAAE,CAAC,CAAC,aAAa,CAAC,GAAQ,EAC5C,KAAC,KAAK,cAAE,KAAK,GAAS,IACjB,CACR,CAAC;IAEF,OAAO,CACL,MAAC,iBAAiB,OAAK,SAAS,EAAE,QAAQ,EAAE,CAAC,CAAC,QAAQ,sCACnD,CAAC,QAAQ,IAAI,CACZ,MAAC,UAAU,IAAC,SAAS,EAAE,EAAE,OAAO,EAAE,OAAO,EAAE,UAAU,EAAE,QAAQ,EAAE,GAAG,EAAE,CAAC,EAAE,aACtE,OAAO,SAAS,KAAK,SAAS,IAAI,iBAAiB,IAAI,CACtD,KAAC,kBAAkB,IACjB,IAAI,EAAC,QAAQ,EACb,OAAO,EAAC,MAAM,EACd,OAAO,EAAE,GAAG,EAAE;4BACZ,iBAAiB,EAAE,CAAC;wBACtB,CAAC,mBACc,aAAa,mBACb,CAAC,SAAS,CAAC,CAAC,CAAC,MAAM,CAAC,CAAC,CAAC,OAAO,gBAChC,CAAC,CAAC,aAAa,CAAC,YAE3B,MAAM,GACY,CACtB,EACA,SAAS,KAAK,SAAS,IAAI,MAAM,IACvB,CACd,EAEA,OAAO,SAAS,KAAK,SAAS,IAAI,iBAAiB,IAAI,CAAC,QAAQ,CAAC,CAAC,CAAC,CAClE,KAAC,cAAc,IAAC,SAAS,EAAE,SAAS,YAAG,KAAK,GAAkB,CAC/D,CAAC,CAAC,CAAC,CACF,KAAK,CACN,IACiB,CACrB,CAAC;AACJ,CAAC,CAAC;AAEF,eAAe,WAAW,CAAC","sourcesContent":["import { useMemo } from 'react';\nimport type { FC } from 'react';\n\nimport {\n CardHeader,\n useI18n,\n EmptyState,\n ExpandCollapse,\n Icon,\n Text,\n Count,\n Flex,\n useUID,\n CardContent\n} from '@pega/cosmos-react-core';\nimport type { ForwardProps, NoChildrenProp } from '@pega/cosmos-react-core';\n\nimport TaskList, { TaskItem } from '../Tasks/TaskList';\nimport type { TaskItemProps } from '../Tasks/TaskList';\n\nimport { StyledAssignments, StyledExpandButton } from './Assignments.styles';\n\nexport interface AssignmentsProps extends NoChildrenProp {\n /** An array of TaskItemProps to generate the list. */\n items: TaskItemProps[];\n /** Integer representing the total count of tasks. */\n count: number;\n /**\n * Controls the collapsed state of the assignments list.\n * @default false\n */\n collapsed?: boolean;\n /**\n * Call when the user clicks the collapsed element.\n */\n onToggleCollapsed?: () => void;\n}\n\nconst Assignments: FC<ForwardProps & AssignmentsProps> = ({\n items,\n count,\n collapsed,\n onToggleCollapsed,\n ...restProps\n}) => {\n const openItem = items.find(item => item.content);\n const t = useI18n();\n const assignmentsId = useUID();\n\n const TaskItems = useMemo(() => {\n return openItem ? <TaskItem {...openItem} /> : <TaskList items={items} />;\n }, [items, openItem]);\n\n const tasks = <CardContent>{items.length > 0 ? TaskItems : <EmptyState />}</CardContent>;\n\n const header = (\n <Flex container={{ alignItems: 'center', gap: 1 }}>\n {typeof collapsed === 'boolean' && <Icon name='caret-right' />}\n <Text variant='h2'>{t('assignments')}</Text>\n <Count>{count}</Count>\n </Flex>\n );\n\n return (\n <StyledAssignments {...restProps} openItem={!!openItem} data-app-region>\n {!openItem && (\n <CardHeader container={{ justify: 'start', alignItems: 'center', gap: 1 }}>\n {typeof collapsed === 'boolean' && onToggleCollapsed && (\n <StyledExpandButton\n type='button'\n variant='text'\n onClick={() => {\n onToggleCollapsed();\n }}\n aria-controls={assignmentsId}\n aria-expanded={!collapsed ? 'true' : 'false'}\n aria-label={t('assignments')}\n >\n {header}\n </StyledExpandButton>\n )}\n {collapsed === undefined && header}\n </CardHeader>\n )}\n\n {typeof collapsed === 'boolean' && onToggleCollapsed && !openItem ? (\n <ExpandCollapse collapsed={collapsed}>{tasks}</ExpandCollapse>\n ) : (\n tasks\n )}\n </StyledAssignments>\n );\n};\n\nexport default Assignments;\n"]}
|
|
@@ -2,7 +2,4 @@ export declare const StyledExpandButton: import("styled-components").StyledCompo
|
|
|
2
2
|
export declare const StyledAssignments: import("styled-components").StyledComponent<import("react").FunctionComponent<import("@pega/cosmos-react-core").CardProps & import("@pega/cosmos-react-core").ForwardProps>, import("styled-components").DefaultTheme, {
|
|
3
3
|
openItem?: boolean | undefined;
|
|
4
4
|
}, never>;
|
|
5
|
-
export declare const StyledCardContent: import("styled-components").StyledComponent<import("react").FunctionComponent<import("@pega/cosmos-react-core").CardContentProps & import("@pega/cosmos-react-core").ForwardProps>, import("styled-components").DefaultTheme, {
|
|
6
|
-
openItem?: boolean | undefined;
|
|
7
|
-
}, never>;
|
|
8
5
|
//# sourceMappingURL=Assignments.styles.d.ts.map
|
|
@@ -1 +1 @@
|
|
|
1
|
-
{"version":3,"file":"Assignments.styles.d.ts","sourceRoot":"","sources":["../../../src/components/Assignments/Assignments.styles.ts"],"names":[],"mappings":"AAYA,eAAO,MAAM,kBAAkB,qOA0B9B,CAAC;AAIF,eAAO,MAAM,iBAAiB;;
|
|
1
|
+
{"version":3,"file":"Assignments.styles.d.ts","sourceRoot":"","sources":["../../../src/components/Assignments/Assignments.styles.ts"],"names":[],"mappings":"AAYA,eAAO,MAAM,kBAAkB,qOA0B9B,CAAC;AAIF,eAAO,MAAM,iBAAiB;;SAW5B,CAAC"}
|
|
@@ -1,5 +1,6 @@
|
|
|
1
1
|
import styled, { css } from 'styled-components';
|
|
2
|
-
import { Button, Card,
|
|
2
|
+
import { Button, Card, defaultThemeProp, StyledCard, StyledIcon, useDirection } from '@pega/cosmos-react-core';
|
|
3
|
+
import { StyledCardContent } from '@pega/cosmos-react-core/lib/components/Card/CardContent';
|
|
3
4
|
export const StyledExpandButton = styled(Button)(({ theme: { base: { animation } } }) => {
|
|
4
5
|
const { rtl } = useDirection();
|
|
5
6
|
return css `
|
|
@@ -23,19 +24,16 @@ export const StyledExpandButton = styled(Button)(({ theme: { base: { animation }
|
|
|
23
24
|
});
|
|
24
25
|
StyledExpandButton.defaultProps = defaultThemeProp;
|
|
25
26
|
export const StyledAssignments = styled(Card)(({ theme, openItem }) => {
|
|
26
|
-
return openItem
|
|
27
|
-
? css `
|
|
28
|
-
box-shadow: ${theme.base.shadow.low};
|
|
29
|
-
`
|
|
30
|
-
: null;
|
|
31
|
-
});
|
|
32
|
-
StyledAssignments.defaultProps = defaultThemeProp;
|
|
33
|
-
export const StyledCardContent = styled(CardContent)(({ theme, openItem }) => {
|
|
34
27
|
return css `
|
|
35
|
-
|
|
36
|
-
|
|
37
|
-
}
|
|
38
|
-
|
|
28
|
+
${openItem &&
|
|
29
|
+
css `
|
|
30
|
+
box-shadow: ${theme.base.shadow.low};
|
|
31
|
+
`}
|
|
32
|
+
|
|
33
|
+
${StyledCardContent}:not(${StyledCard} ${StyledCard} > ${StyledCardContent}) {
|
|
34
|
+
padding-block-start: 0;
|
|
35
|
+
}
|
|
36
|
+
`;
|
|
39
37
|
});
|
|
40
|
-
|
|
38
|
+
StyledAssignments.defaultProps = defaultThemeProp;
|
|
41
39
|
//# sourceMappingURL=Assignments.styles.js.map
|
|
@@ -1 +1 @@
|
|
|
1
|
-
{"version":3,"file":"Assignments.styles.js","sourceRoot":"","sources":["../../../src/components/Assignments/Assignments.styles.ts"],"names":[],"mappings":"AAAA,OAAO,MAAM,EAAE,EAAE,GAAG,EAAE,MAAM,mBAAmB,CAAC;AAEhD,OAAO,EACL,MAAM,EACN,IAAI,EACJ,
|
|
1
|
+
{"version":3,"file":"Assignments.styles.js","sourceRoot":"","sources":["../../../src/components/Assignments/Assignments.styles.ts"],"names":[],"mappings":"AAAA,OAAO,MAAM,EAAE,EAAE,GAAG,EAAE,MAAM,mBAAmB,CAAC;AAEhD,OAAO,EACL,MAAM,EACN,IAAI,EACJ,gBAAgB,EAChB,UAAU,EACV,UAAU,EACV,YAAY,EACb,MAAM,yBAAyB,CAAC;AACjC,OAAO,EAAE,iBAAiB,EAAE,MAAM,yDAAyD,CAAC;AAE5F,MAAM,CAAC,MAAM,kBAAkB,GAAG,MAAM,CAAC,MAAM,CAAC,CAC9C,CAAC,EACC,KAAK,EAAE,EACL,IAAI,EAAE,EAAE,SAAS,EAAE,EACpB,EACF,EAAE,EAAE;IACH,MAAM,EAAE,GAAG,EAAE,GAAG,YAAY,EAAE,CAAC;IAC/B,OAAO,GAAG,CAAA;QACN,UAAU;gCACc,SAAS,CAAC,KAAK,IAAI,SAAS,CAAC,MAAM,CAAC,IAAI;;;gCAGxC,UAAU;;;;iCAIT,UAAU;4BACf,GAAG,CAAC,CAAC,CAAC,GAAG,CAAC,CAAC,CAAC,CAAC;;;;;;;KAOpC,CAAC;AACJ,CAAC,CACF,CAAC;AAEF,kBAAkB,CAAC,YAAY,GAAG,gBAAgB,CAAC;AAEnD,MAAM,CAAC,MAAM,iBAAiB,GAAG,MAAM,CAAC,IAAI,CAAC,CAAyB,CAAC,EAAE,KAAK,EAAE,QAAQ,EAAE,EAAE,EAAE;IAC5F,OAAO,GAAG,CAAA;MACN,QAAQ;QACV,GAAG,CAAA;oBACa,KAAK,CAAC,IAAI,CAAC,MAAM,CAAC,GAAG;KACpC;;MAEC,iBAAiB,QAAQ,UAAU,IAAI,UAAU,MAAM,iBAAiB;;;GAG3E,CAAC;AACJ,CAAC,CAAC,CAAC;AAEH,iBAAiB,CAAC,YAAY,GAAG,gBAAgB,CAAC","sourcesContent":["import styled, { css } from 'styled-components';\n\nimport {\n Button,\n Card,\n defaultThemeProp,\n StyledCard,\n StyledIcon,\n useDirection\n} from '@pega/cosmos-react-core';\nimport { StyledCardContent } from '@pega/cosmos-react-core/lib/components/Card/CardContent';\n\nexport const StyledExpandButton = styled(Button)(\n ({\n theme: {\n base: { animation }\n }\n }) => {\n const { rtl } = useDirection();\n return css`\n ${StyledIcon} {\n transition: transform ${animation.speed} ${animation.timing.ease};\n }\n\n &[aria-expanded='true'] ${StyledIcon} {\n transform: rotate(90deg);\n }\n\n &[aria-expanded='false'] ${StyledIcon} {\n transform: rotate(${rtl ? 180 : 0}deg);\n }\n\n &:hover,\n &:active {\n text-decoration: none;\n }\n `;\n }\n);\n\nStyledExpandButton.defaultProps = defaultThemeProp;\n\nexport const StyledAssignments = styled(Card)<{ openItem?: boolean }>(({ theme, openItem }) => {\n return css`\n ${openItem &&\n css`\n box-shadow: ${theme.base.shadow.low};\n `}\n\n ${StyledCardContent}:not(${StyledCard} ${StyledCard} > ${StyledCardContent}) {\n padding-block-start: 0;\n }\n `;\n});\n\nStyledAssignments.defaultProps = defaultThemeProp;\n"]}
|
|
@@ -1 +1 @@
|
|
|
1
|
-
{"version":3,"file":"TaskList.d.ts","sourceRoot":"","sources":["../../../src/components/Tasks/TaskList.tsx"],"names":[],"mappings":"AACA,OAAO,KAAK,EAAE,iBAAiB,EAAmB,SAAS,EAAE,GAAG,EAAE,UAAU,EAAE,MAAM,OAAO,CAAC;AAoB5F,OAAO,KAAK,EAAE,YAAY,EAAE,UAAU,EAAE,YAAY,EAAE,MAAM,yBAAyB,CAAC;AAItF,MAAM,WAAW,aAAc,SAAQ,UAAU;IAC/C,EAAE,EAAE,MAAM,CAAC;IACX,8CAA8C;IAC9C,IAAI,EAAE,MAAM,CAAC;IACb,wCAAwC;IACxC,WAAW,CAAC,EAAE,MAAM,CAAC;IACrB,uDAAuD;IACvD,MAAM,CAAC,EAAE,SAAS,CAAC;IACnB,sDAAsD;IACtD,IAAI,CAAC,EAAE,SAAS,CAAC;IACjB,wDAAwD;IACxD,MAAM,CAAC,EAAE,CAAC,EAAE,EAAE,aAAa,CAAC,IAAI,CAAC,EAAE,CAAC,EAAE,UAAU,CAAC,iBAAiB,CAAC,KAAK,IAAI,CAAC;IAC7E,sCAAsC;IACtC,OAAO,CAAC,EAAE,SAAS,CAAC;IACpB,+CAA+C;IAC/C,iBAAiB,CAAC,EAAE,YAAY,CAAC,OAAO,CAAC,CAAC;CAC3C;AAED,MAAM,WAAW,aAAc,SAAQ,UAAU;IAC/C,KAAK,EAAE,aAAa,EAAE,CAAC;IACvB,SAAS,CAAC,EAAE,OAAO,CAAC;IACpB,oCAAoC;IACpC,GAAG,CAAC,EAAE,GAAG,CAAC,WAAW,CAAC,CAAC;CACxB;AAED,UAAU,YAAY;IACpB,IAAI,EAAE,MAAM,CAAC;IACb,MAAM,EAAE,SAAS,GAAG,OAAO,CAAC;CAC7B;
|
|
1
|
+
{"version":3,"file":"TaskList.d.ts","sourceRoot":"","sources":["../../../src/components/Tasks/TaskList.tsx"],"names":[],"mappings":"AACA,OAAO,KAAK,EAAE,iBAAiB,EAAmB,SAAS,EAAE,GAAG,EAAE,UAAU,EAAE,MAAM,OAAO,CAAC;AAoB5F,OAAO,KAAK,EAAE,YAAY,EAAE,UAAU,EAAE,YAAY,EAAE,MAAM,yBAAyB,CAAC;AAItF,MAAM,WAAW,aAAc,SAAQ,UAAU;IAC/C,EAAE,EAAE,MAAM,CAAC;IACX,8CAA8C;IAC9C,IAAI,EAAE,MAAM,CAAC;IACb,wCAAwC;IACxC,WAAW,CAAC,EAAE,MAAM,CAAC;IACrB,uDAAuD;IACvD,MAAM,CAAC,EAAE,SAAS,CAAC;IACnB,sDAAsD;IACtD,IAAI,CAAC,EAAE,SAAS,CAAC;IACjB,wDAAwD;IACxD,MAAM,CAAC,EAAE,CAAC,EAAE,EAAE,aAAa,CAAC,IAAI,CAAC,EAAE,CAAC,EAAE,UAAU,CAAC,iBAAiB,CAAC,KAAK,IAAI,CAAC;IAC7E,sCAAsC;IACtC,OAAO,CAAC,EAAE,SAAS,CAAC;IACpB,+CAA+C;IAC/C,iBAAiB,CAAC,EAAE,YAAY,CAAC,OAAO,CAAC,CAAC;CAC3C;AAED,MAAM,WAAW,aAAc,SAAQ,UAAU;IAC/C,KAAK,EAAE,aAAa,EAAE,CAAC;IACvB,SAAS,CAAC,EAAE,OAAO,CAAC;IACpB,oCAAoC;IACpC,GAAG,CAAC,EAAE,GAAG,CAAC,WAAW,CAAC,CAAC;CACxB;AAED,UAAU,YAAY;IACpB,IAAI,EAAE,MAAM,CAAC;IACb,MAAM,EAAE,SAAS,GAAG,OAAO,CAAC;CAC7B;AAsBD,eAAO,MAAM,QAAQ;sCAamC,YAAY,KAAK,IAAI;;;CA4D5E,CAAC;;;;AAgEF,wBAAyD"}
|
|
@@ -6,12 +6,15 @@ import { SummaryItem, StyledSummaryListItem, Flex, defaultThemeProp, Button, use
|
|
|
6
6
|
import { getTaskListTestIds, getTaskItemTestIds } from './Tasks.test-ids';
|
|
7
7
|
const StyledTaskList = styled.ul(({ theme, hasFooter }) => {
|
|
8
8
|
return css `
|
|
9
|
-
|
|
10
|
-
|
|
11
|
-
|
|
12
|
-
|
|
13
|
-
|
|
14
|
-
|
|
9
|
+
> li:last-child {
|
|
10
|
+
${hasFooter
|
|
11
|
+
? css `
|
|
12
|
+
border-bottom: 0.0625rem solid ${theme.base.palette['border-line']};
|
|
13
|
+
`
|
|
14
|
+
: css `
|
|
15
|
+
padding-block-end: 0;
|
|
16
|
+
`}
|
|
17
|
+
}
|
|
15
18
|
|
|
16
19
|
${StyledBreadcrumbs} > ${StyledText} {
|
|
17
20
|
font-weight: ${theme.base['font-weight']['semi-bold']};
|
|
@@ -34,7 +37,7 @@ export const TaskItem = withTestIds(({ testId, id, name, avatar, meta, processNa
|
|
|
34
37
|
] })) : (name), secondary: meta, actions: content
|
|
35
38
|
? additionalActions && _jsx(Actions, { menuAt: 1, items: additionalActions })
|
|
36
39
|
: onOpen && (_jsxs(Button, { "data-testid": testIds.openTask, variant: 'primary', onClick: (e) => onOpen(id, e), children: [_jsx("span", { children: t('go') }), _jsx(VisuallyHiddenText, { children: `-${processName ?? ''} ${name}` })] })) }));
|
|
37
|
-
return (_jsxs(Flex, { "data-testid": testIds.root, ...restProps, container: { direction: 'column', gap:
|
|
40
|
+
return (_jsxs(Flex, { "data-testid": testIds.root, ...restProps, container: { direction: 'column', gap: 2 }, item: { grow: 1 }, as: content ? undefined : StyledSummaryListItem, forwardedAs: content ? 'div' : 'li', children: [summary, content] }));
|
|
38
41
|
}, getTaskItemTestIds);
|
|
39
42
|
const TaskList = forwardRef(function TaskList({ testId, items, hasFooter = false }, ref) {
|
|
40
43
|
const testIds = useTestIds(testId, getTaskListTestIds);
|
|
@@ -74,7 +77,7 @@ const TaskList = forwardRef(function TaskList({ testId, items, hasFooter = false
|
|
|
74
77
|
announcements.current = [...announcements.current, announcement];
|
|
75
78
|
debouncedAnnounce();
|
|
76
79
|
};
|
|
77
|
-
return (_jsx(Flex, { "data-testid": testIds.root, container: { direction: 'column' }, as: StyledTaskList, hasFooter: hasFooter, ref: ref, children: items.map(
|
|
80
|
+
return (_jsx(Flex, { "data-testid": testIds.root, container: { direction: 'column' }, as: StyledTaskList, hasFooter: hasFooter, ref: ref, children: items.map(item => (_createElement(TaskItem, { ...item, addAnnouncement: addAnnouncement, key: item.id }))) }));
|
|
78
81
|
});
|
|
79
82
|
export default withTestIds(TaskList, getTaskListTestIds);
|
|
80
83
|
//# sourceMappingURL=TaskList.js.map
|
|
@@ -1 +1 @@
|
|
|
1
|
-
{"version":3,"file":"TaskList.js","sourceRoot":"","sources":["../../../src/components/Tasks/TaskList.tsx"],"names":[],"mappings":";;AAAA,OAAO,EAAE,UAAU,EAAE,SAAS,EAAE,MAAM,EAAE,MAAM,OAAO,CAAC;AAEtD,OAAO,MAAM,EAAE,EAAE,GAAG,EAAE,MAAM,mBAAmB,CAAC;AAEhD,OAAO,EACL,WAAW,EACX,qBAAqB,EACrB,IAAI,EACJ,gBAAgB,EAChB,MAAM,EACN,OAAO,EACP,kBAAkB,EAClB,WAAW,EACX,iBAAiB,EACjB,UAAU,EACV,UAAU,EACV,UAAU,EACV,QAAQ,EACR,OAAO,EACP,WAAW,EACZ,MAAM,yBAAyB,CAAC;AAGjC,OAAO,EAAE,kBAAkB,EAAE,kBAAkB,EAAE,MAAM,kBAAkB,CAAC;AAgC1E,MAAM,cAAc,GAAG,MAAM,CAAC,EAAE,CAAyB,CAAC,EAAE,KAAK,EAAE,SAAS,EAAE,EAAE,EAAE;IAChF,OAAO,GAAG,CAAA
|
|
1
|
+
{"version":3,"file":"TaskList.js","sourceRoot":"","sources":["../../../src/components/Tasks/TaskList.tsx"],"names":[],"mappings":"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","sourcesContent":["import { forwardRef, useEffect, useRef } from 'react';\nimport type { FunctionComponent, PropsWithoutRef, ReactNode, Ref, MouseEvent } from 'react';\nimport styled, { css } from 'styled-components';\n\nimport {\n SummaryItem,\n StyledSummaryListItem,\n Flex,\n defaultThemeProp,\n Button,\n useI18n,\n VisuallyHiddenText,\n Breadcrumbs,\n StyledBreadcrumbs,\n StyledText,\n useTestIds,\n useLiveLog,\n debounce,\n Actions,\n withTestIds\n} from '@pega/cosmos-react-core';\nimport type { ForwardProps, TestIdProp, ActionsProps } from '@pega/cosmos-react-core';\n\nimport { getTaskListTestIds, getTaskItemTestIds } from './Tasks.test-ids';\n\nexport interface TaskItemProps extends TestIdProp {\n id: string;\n /** Name of the task displayed in the list. */\n name: string;\n /** Name of the process for the task. */\n processName?: string;\n /** Avatar element to represent the task's assignee. */\n avatar?: ReactNode;\n /** MetaList element with info related to the task. */\n meta?: ReactNode;\n /** Provide a callback to render a button for a task. */\n onOpen?: (id: TaskItemProps['id'], e: MouseEvent<HTMLButtonElement>) => void;\n /** Content for the task when open. */\n content?: ReactNode;\n /** An array of actions to add to open task. */\n additionalActions?: ActionsProps['items'];\n}\n\nexport interface TaskListProps extends TestIdProp {\n items: TaskItemProps[];\n hasFooter?: boolean;\n /** Ref for the wrapping element. */\n ref?: Ref<HTMLElement>;\n}\n\ninterface Announcement {\n name: string;\n status: 'removed' | 'added';\n}\n\nconst StyledTaskList = styled.ul<{ hasFooter: boolean }>(({ theme, hasFooter }) => {\n return css`\n > li:last-child {\n ${hasFooter\n ? css`\n border-bottom: 0.0625rem solid ${theme.base.palette['border-line']};\n `\n : css`\n padding-block-end: 0;\n `}\n }\n\n ${StyledBreadcrumbs} > ${StyledText} {\n font-weight: ${theme.base['font-weight']['semi-bold']};\n }\n `;\n});\n\nStyledTaskList.defaultProps = defaultThemeProp;\n\nexport const TaskItem = withTestIds(\n ({\n testId,\n id,\n name,\n avatar,\n meta,\n processName,\n onOpen,\n content,\n addAnnouncement,\n additionalActions,\n ...restProps\n }: TaskItemProps & { addAnnouncement?: (announcement: Announcement) => void }) => {\n const testIds = useTestIds(testId, getTaskItemTestIds);\n const t = useI18n();\n\n useEffect(() => {\n addAnnouncement?.({ name, status: 'added' });\n\n return () => {\n addAnnouncement?.({ name, status: 'removed' });\n };\n }, []);\n\n const summary = (\n <SummaryItem\n visual={avatar}\n primary={\n processName ? (\n <Breadcrumbs\n path={[\n { id: 'processName', primary: processName },\n { id: 'name', primary: name }\n ]}\n />\n ) : (\n name\n )\n }\n secondary={meta}\n actions={\n content\n ? additionalActions && <Actions menuAt={1} items={additionalActions} />\n : onOpen && (\n <Button\n data-testid={testIds.openTask}\n variant='primary'\n onClick={(e: MouseEvent<HTMLButtonElement>) => onOpen(id, e)}\n >\n <span>{t('go')}</span>\n <VisuallyHiddenText>{`-${processName ?? ''} ${name}`}</VisuallyHiddenText>\n </Button>\n )\n }\n />\n );\n\n return (\n <Flex\n data-testid={testIds.root}\n {...restProps}\n container={{ direction: 'column', gap: 2 }}\n item={{ grow: 1 }}\n as={content ? undefined : StyledSummaryListItem}\n forwardedAs={content ? 'div' : 'li'}\n >\n {summary}\n {content}\n </Flex>\n );\n },\n getTaskItemTestIds\n);\n\nconst TaskList: FunctionComponent<TaskListProps & ForwardProps> = forwardRef(function TaskList(\n { testId, items, hasFooter = false }: PropsWithoutRef<TaskListProps>,\n ref\n) {\n const testIds = useTestIds(testId, getTaskListTestIds);\n const t = useI18n();\n const { announcePolite } = useLiveLog();\n const announcements = useRef<Announcement[]>([]);\n const mounted = useRef(false);\n\n useEffect(() => {\n mounted.current = true;\n\n return () => {\n mounted.current = false;\n };\n }, []);\n\n const debouncedAnnounce = debounce(() => {\n if (announcements.current.length > 0) {\n let tasksAdded = 0;\n let tasksRemoved = 0;\n announcements.current.forEach(item => {\n if (item.status === 'removed') {\n tasksRemoved += 1;\n } else {\n tasksAdded += 1;\n }\n });\n let message = tasksAdded ? t('tasks_added', [tasksAdded], { count: tasksAdded }) : '';\n if (tasksRemoved) {\n message += t('tasks_removed', [tasksRemoved], { count: tasksRemoved });\n }\n\n if (mounted.current) {\n announcePolite({ message });\n }\n\n announcements.current = [];\n }\n }, 2000);\n\n const addAnnouncement = (announcement: Announcement) => {\n announcements.current = [...announcements.current, announcement];\n debouncedAnnounce();\n };\n\n return (\n <Flex\n data-testid={testIds.root}\n container={{ direction: 'column' }}\n as={StyledTaskList}\n hasFooter={hasFooter}\n ref={ref}\n >\n {items.map(item => (\n <TaskItem {...item} addAnnouncement={addAnnouncement} key={item.id} />\n ))}\n </Flex>\n );\n});\n\nexport default withTestIds(TaskList, getTaskListTestIds);\n"]}
|
|
@@ -21,7 +21,6 @@ export interface TasksProps extends NoChildrenProp, TestIdProp {
|
|
|
21
21
|
export declare const StyledTasks: import("styled-components").StyledComponent<import("react").FunctionComponent<import("@pega/cosmos-react-core").CardProps & ForwardProps>, import("styled-components").DefaultTheme, {
|
|
22
22
|
openItem?: boolean | undefined;
|
|
23
23
|
}, never>;
|
|
24
|
-
export declare const StyledTaskCardContent: import("styled-components").StyledComponent<import("react").FunctionComponent<import("@pega/cosmos-react-core").CardContentProps & ForwardProps>, import("styled-components").DefaultTheme, {}, never>;
|
|
25
24
|
declare const _default: FC<ForwardProps & TasksProps> & {
|
|
26
25
|
getTestIds: (testIdProp?: string | undefined) => import("@pega/cosmos-react-core").TestIdsRecord<readonly ["show-more-less"]>;
|
|
27
26
|
};
|
|
@@ -1 +1 @@
|
|
|
1
|
-
{"version":3,"file":"Tasks.d.ts","sourceRoot":"","sources":["../../../src/components/Tasks/Tasks.tsx"],"names":[],"mappings":"AACA,OAAO,KAAK,EAAE,EAAE,EAAc,MAAM,OAAO,CAAC;
|
|
1
|
+
{"version":3,"file":"Tasks.d.ts","sourceRoot":"","sources":["../../../src/components/Tasks/Tasks.tsx"],"names":[],"mappings":"AACA,OAAO,KAAK,EAAE,EAAE,EAAc,MAAM,OAAO,CAAC;AAiB5C,OAAO,KAAK,EACV,WAAW,EACX,YAAY,EACZ,gBAAgB,EAChB,cAAc,EACd,gBAAgB,EAChB,UAAU,EACX,MAAM,yBAAyB,CAAC;AAEjC,OAAO,KAAK,EAAE,iBAAiB,EAAE,MAAM,sEAAsE,CAAC;AAG9G,OAAO,KAAK,EAAE,aAAa,EAAE,MAAM,YAAY,CAAC;AAGhD,MAAM,WAAW,UAAW,SAAQ,cAAc,EAAE,UAAU;IAC5D,sDAAsD;IACtD,KAAK,EAAE,aAAa,EAAE,CAAC;IACvB,qDAAqD;IACrD,IAAI,EAAE,gBAAgB,CAAC,MAAM,CAAC,CAAC;IAC/B,6CAA6C;IAC7C,MAAM,CAAC,EAAE,IAAI,CAAC,WAAW,EAAE,MAAM,GAAG,MAAM,GAAG,UAAU,GAAG,QAAQ,CAAC,CAAC;IACpE,oCAAoC;IACpC,YAAY,CAAC,EAAE,IAAI,CAAC,iBAAiB,EAAE,OAAO,GAAG,cAAc,CAAC,CAAC;IACjE,qDAAqD;IACrD,KAAK,CAAC,EAAE,MAAM,CAAC;IACf,mCAAmC;IACnC,MAAM,CAAC,EAAE,IAAI,CAAC,gBAAgB,EAAE,OAAO,GAAG,gBAAgB,CAAC,CAAC;IAC5D,qJAAqJ;IACrJ,cAAc,CAAC,EAAE,MAAM,IAAI,CAAC;CAC7B;AAED,eAAO,MAAM,WAAW;;SAUtB,CAAC;;;;AAwEH,wBAAmD"}
|
|
@@ -1,9 +1,8 @@
|
|
|
1
1
|
import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
|
|
2
2
|
import { useMemo } from 'react';
|
|
3
3
|
import styled, { css } from 'styled-components';
|
|
4
|
-
import { Card, CardHeader, CardContent, CardFooter, Button, useI18n, defaultThemeProp, ListToolbar, EmptyState, useTestIds, Avatar, withTestIds
|
|
4
|
+
import { Card, CardHeader, CardContent, CardFooter, Button, useI18n, defaultThemeProp, ListToolbar, EmptyState, useTestIds, Avatar, withTestIds } from '@pega/cosmos-react-core';
|
|
5
5
|
import { StyledCardHeader } from '@pega/cosmos-react-core/lib/components/Card/CardHeader';
|
|
6
|
-
import { StyledCardFooter } from '@pega/cosmos-react-core/lib/components/Card/CardFooter';
|
|
7
6
|
import TaskList, { TaskItem } from './TaskList';
|
|
8
7
|
import { getTasksTestIds } from './Tasks.test-ids';
|
|
9
8
|
export const StyledTasks = styled(Card)(({ theme, openItem }) => {
|
|
@@ -18,16 +17,6 @@ export const StyledTasks = styled(Card)(({ theme, openItem }) => {
|
|
|
18
17
|
`;
|
|
19
18
|
});
|
|
20
19
|
StyledTasks.defaultProps = defaultThemeProp;
|
|
21
|
-
export const StyledTaskCardContent = styled(CardContent)(({ theme }) => css `
|
|
22
|
-
&:not(${StyledCard} ${StyledCard} > &) {
|
|
23
|
-
padding-block-end: calc(${theme.base.spacing} / 2);
|
|
24
|
-
|
|
25
|
-
& + ${StyledCardFooter} {
|
|
26
|
-
padding-block-start: ${theme.base.spacing};
|
|
27
|
-
}
|
|
28
|
-
}
|
|
29
|
-
`);
|
|
30
|
-
StyledTaskCardContent.defaultProps = defaultThemeProp;
|
|
31
20
|
const Tasks = (props) => {
|
|
32
21
|
const { testId, items = [], name, avatar, viewSelector, count = items.length, search, onExpandToggle, ...restProps } = props;
|
|
33
22
|
const testIds = useTestIds(testId, getTasksTestIds);
|
|
@@ -37,7 +26,7 @@ const Tasks = (props) => {
|
|
|
37
26
|
const TaskItems = useMemo(() => {
|
|
38
27
|
return openItem ? (_jsx(TaskItem, { ...openItem })) : (_jsx(TaskList, { items: items, hasFooter: hasFooter, testId: testIds.root }));
|
|
39
28
|
}, [items, openItem]);
|
|
40
|
-
return (_jsxs(StyledTasks, { "data-testid": testIds.root, ...restProps, openItem: !!openItem, "data-app-region": true, children: [!openItem && (_jsxs(CardHeader, { container: { justify: 'start', alignItems: 'center', gap: 1 }, children: [avatar && _jsx(Avatar, { ...avatar }), _jsx(ListToolbar, { name: name, headingTag: 'h2', viewSelector: viewSelector, count: { total: count }, search: search, item: { grow: 1 } })] })), _jsx(
|
|
29
|
+
return (_jsxs(StyledTasks, { "data-testid": testIds.root, ...restProps, openItem: !!openItem, "data-app-region": true, children: [!openItem && (_jsxs(CardHeader, { container: { justify: 'start', alignItems: 'center', gap: 1 }, children: [avatar && _jsx(Avatar, { ...avatar }), _jsx(ListToolbar, { name: name, headingTag: 'h2', viewSelector: viewSelector, count: { total: count }, search: search, item: { grow: 1 } })] })), _jsx(CardContent, { children: items.length > 0 ? TaskItems : _jsx(EmptyState, {}) }), hasFooter && (_jsx(CardFooter, { justify: 'center', children: _jsx(Button, { "data-testid": testIds.showMoreLess, variant: 'link', "aria-label": t(!!count && count > items.length ? 'show_more' : 'show_less', ['tasks']), onClick: (e) => {
|
|
41
30
|
onExpandToggle?.();
|
|
42
31
|
if (!!count && count <= items.length) {
|
|
43
32
|
const { currentTarget } = e;
|
|
@@ -1 +1 @@
|
|
|
1
|
-
{"version":3,"file":"Tasks.js","sourceRoot":"","sources":["../../../src/components/Tasks/Tasks.tsx"],"names":[],"mappings":";AAAA,OAAO,EAAE,OAAO,EAAE,MAAM,OAAO,CAAC;AAEhC,OAAO,MAAM,EAAE,EAAE,GAAG,EAAE,MAAM,mBAAmB,CAAC;AAEhD,OAAO,EACL,IAAI,EACJ,UAAU,EACV,WAAW,EACX,UAAU,EACV,MAAM,EACN,OAAO,EACP,gBAAgB,EAChB,WAAW,EACX,UAAU,EACV,UAAU,EACV,MAAM,EACN,WAAW,
|
|
1
|
+
{"version":3,"file":"Tasks.js","sourceRoot":"","sources":["../../../src/components/Tasks/Tasks.tsx"],"names":[],"mappings":"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","sourcesContent":["import { useMemo } from 'react';\nimport type { FC, MouseEvent } from 'react';\nimport styled, { css } from 'styled-components';\n\nimport {\n Card,\n CardHeader,\n CardContent,\n CardFooter,\n Button,\n useI18n,\n defaultThemeProp,\n ListToolbar,\n EmptyState,\n useTestIds,\n Avatar,\n withTestIds\n} from '@pega/cosmos-react-core';\nimport type {\n AvatarProps,\n ForwardProps,\n ListToolbarProps,\n NoChildrenProp,\n SearchInputProps,\n TestIdProp\n} from '@pega/cosmos-react-core';\nimport { StyledCardHeader } from '@pega/cosmos-react-core/lib/components/Card/CardHeader';\nimport type { ViewSelectorProps } from '@pega/cosmos-react-core/lib/components/ListToolbar/ListToolbar.types';\n\nimport TaskList, { TaskItem } from './TaskList';\nimport type { TaskItemProps } from './TaskList';\nimport { getTasksTestIds } from './Tasks.test-ids';\n\nexport interface TasksProps extends NoChildrenProp, TestIdProp {\n /** An array of TaskItemProps to generate the list. */\n items: TaskItemProps[];\n /** Heading text to render at the top of the list. */\n name: ListToolbarProps['name'];\n /** A visual to accompany the header text. */\n avatar?: Pick<AvatarProps, 'name' | 'icon' | 'imageSrc' | 'status'>;\n /** Definition of view selection. */\n viewSelector?: Pick<ViewSelectorProps, 'views' | 'onViewSelect'>;\n /** Integer representing the total count of tasks. */\n count?: number;\n /** Opt-in search configuration. */\n search?: Pick<SearchInputProps, 'value' | 'onSearchChange'>;\n /** Callback for when to show more/less button is clicked. Lists greater than 3 items will display the show toggle button in its footer if passed. */\n onExpandToggle?: () => void;\n}\n\nexport const StyledTasks = styled(Card)<{ openItem?: boolean }>(({ theme, openItem }) => {\n return openItem\n ? css`\n box-shadow: ${theme.base.shadow.low};\n `\n : css`\n ${StyledCardHeader}:not(& & > ${StyledCardHeader}) {\n padding-block-end: calc(${theme.base.spacing} / 2);\n }\n `;\n});\n\nStyledTasks.defaultProps = defaultThemeProp;\n\nconst Tasks: FC<ForwardProps & TasksProps> = (props: TasksProps) => {\n const {\n testId,\n items = [],\n name,\n avatar,\n viewSelector,\n count = items.length,\n search,\n onExpandToggle,\n ...restProps\n } = props;\n const testIds = useTestIds(testId, getTasksTestIds);\n const openItem = items.find(item => item.content);\n const t = useI18n();\n\n const hasFooter = !!(!openItem && onExpandToggle && count > 0);\n\n const TaskItems = useMemo(() => {\n return openItem ? (\n <TaskItem {...openItem} />\n ) : (\n <TaskList items={items} hasFooter={hasFooter} testId={testIds.root} />\n );\n }, [items, openItem]);\n\n return (\n <StyledTasks data-testid={testIds.root} {...restProps} openItem={!!openItem} data-app-region>\n {!openItem && (\n <CardHeader container={{ justify: 'start', alignItems: 'center', gap: 1 }}>\n {avatar && <Avatar {...avatar} />}\n <ListToolbar\n name={name}\n headingTag='h2'\n viewSelector={viewSelector}\n count={{ total: count }}\n search={search}\n item={{ grow: 1 }}\n />\n </CardHeader>\n )}\n\n <CardContent>{items.length > 0 ? TaskItems : <EmptyState />}</CardContent>\n\n {hasFooter && (\n <CardFooter justify='center'>\n <Button\n data-testid={testIds.showMoreLess}\n variant='link'\n aria-label={t(!!count && count > items.length ? 'show_more' : 'show_less', ['tasks'])}\n onClick={(e: MouseEvent<HTMLButtonElement>) => {\n onExpandToggle?.();\n if (!!count && count <= items.length) {\n const { currentTarget } = e;\n requestAnimationFrame(() => {\n if (currentTarget.getBoundingClientRect().top < 0) currentTarget.scrollIntoView();\n });\n }\n }}\n >\n {t(!!count && count > items.length ? 'show_more' : 'show_less')}\n </Button>\n </CardFooter>\n )}\n </StyledTasks>\n );\n};\n\nexport default withTestIds(Tasks, getTasksTestIds);\n"]}
|
package/package.json
CHANGED
|
@@ -1,6 +1,6 @@
|
|
|
1
1
|
{
|
|
2
2
|
"name": "@pega/cosmos-react-work",
|
|
3
|
-
"version": "5.0.0-dev.10.
|
|
3
|
+
"version": "5.0.0-dev.10.3",
|
|
4
4
|
"repository": {
|
|
5
5
|
"type": "git",
|
|
6
6
|
"url": "git+https://github.com/pegasystems/cosmos-react.git",
|
|
@@ -18,7 +18,7 @@
|
|
|
18
18
|
"build": "tsc -b tsconfig.build.json"
|
|
19
19
|
},
|
|
20
20
|
"dependencies": {
|
|
21
|
-
"@pega/cosmos-react-core": "5.0.0-dev.10.
|
|
21
|
+
"@pega/cosmos-react-core": "5.0.0-dev.10.3",
|
|
22
22
|
"@types/react": "^17.0.62",
|
|
23
23
|
"@types/react-dom": "^17.0.20",
|
|
24
24
|
"@types/styled-components": "^5.1.26",
|
|
@@ -32,8 +32,8 @@
|
|
|
32
32
|
"@storybook/react": "~7.5.3",
|
|
33
33
|
"@testing-library/react": "^12.1.3",
|
|
34
34
|
"@testing-library/user-event": "^14.5.1",
|
|
35
|
-
"@types/dompurify": "^3.0.
|
|
36
|
-
"dompurify": "^3.0.
|
|
35
|
+
"@types/dompurify": "^3.0.5",
|
|
36
|
+
"dompurify": "^3.0.7",
|
|
37
37
|
"typescript": "~5.2.2"
|
|
38
38
|
}
|
|
39
39
|
}
|