@pega/cosmos-react-cs 3.0.0-dev.3.0 → 3.0.0-dev.4.2
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.
|
@@ -4,6 +4,7 @@ export interface ArticleListHeaderProps extends BaseProps, AsProp {
|
|
|
4
4
|
/** Header Icon and Text */
|
|
5
5
|
icon?: ReactElement<typeof Icon>;
|
|
6
6
|
headerText: string;
|
|
7
|
+
count?: number;
|
|
7
8
|
/** Primary data: Drop in elements related to search or filtering of articles */
|
|
8
9
|
primary: {
|
|
9
10
|
search: ReactElement<typeof SearchInput>;
|
|
@@ -1 +1 @@
|
|
|
1
|
-
{"version":3,"file":"ArticleListHeader.d.ts","sourceRoot":"","sources":["../../../src/components/ArticleList/ArticleListHeader.tsx"],"names":[],"mappings":"AAAA,OAAO,EAAE,iBAAiB,EAAE,SAAS,EAAE,YAAY,EAAE,UAAU,EAAE,YAAY,EAAE,MAAM,OAAO,CAAC;AAG7F,OAAO,EAKL,WAAW,EAEX,SAAS,EACT,MAAM,EACN,MAAM,EACN,IAAI,
|
|
1
|
+
{"version":3,"file":"ArticleListHeader.d.ts","sourceRoot":"","sources":["../../../src/components/ArticleList/ArticleListHeader.tsx"],"names":[],"mappings":"AAAA,OAAO,EAAE,iBAAiB,EAAE,SAAS,EAAE,YAAY,EAAE,UAAU,EAAE,YAAY,EAAE,MAAM,OAAO,CAAC;AAG7F,OAAO,EAKL,WAAW,EAEX,SAAS,EACT,MAAM,EACN,MAAM,EACN,IAAI,EAIL,MAAM,yBAAyB,CAAC;AAGjC,MAAM,WAAW,sBAAuB,SAAQ,SAAS,EAAE,MAAM;IAC/D,2BAA2B;IAC3B,IAAI,CAAC,EAAE,YAAY,CAAC,OAAO,IAAI,CAAC,CAAC;IACjC,UAAU,EAAE,MAAM,CAAC;IAEnB,KAAK,CAAC,EAAE,MAAM,CAAC;IACf,gFAAgF;IAChF,OAAO,EAAE;QACP,MAAM,EAAE,YAAY,CAAC,OAAO,WAAW,CAAC,CAAC;QACzC,cAAc,CAAC,EAAE,YAAY,CAAC;QAC9B,OAAO,CAAC,EAAE,MAAM,EAAE,CAAC;KACpB,CAAC;IACF,+CAA+C;IAC/C,SAAS,CAAC,EAAE,SAAS,CAAC;IACtB,sCAAsC;IACtC,QAAQ,CAAC,EAAE,YAAY,CAAC,UAAU,CAAC,CAAC;CACrC;AA2DD,QAAA,MAAM,iBAAiB,EAAE,iBAAiB,CAAC,sBAAsB,CAqDhE,CAAC;AAEF,eAAe,iBAAiB,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 { Button, Flex, Form, MenuButton, useI18n, Text, defaultThemeProp } from '@pega/cosmos-react-core';
|
|
3
|
+
import { Button, Flex, Form, MenuButton, useI18n, Text, defaultThemeProp, Count } from '@pega/cosmos-react-core';
|
|
4
4
|
import { StyledFormContent } from '@pega/cosmos-react-core/lib/components/Form/Form';
|
|
5
5
|
const StyledArticleHeader = styled.div(({ theme }) => {
|
|
6
6
|
return css `
|
|
@@ -54,13 +54,13 @@ const Locale = {
|
|
|
54
54
|
moreActions: 'More actions'
|
|
55
55
|
};
|
|
56
56
|
const ArticleListHeader = (props) => {
|
|
57
|
-
const { as = Form, primary, secondary, onSubmit, icon, headerText, ...restProps } = props;
|
|
57
|
+
const { as = Form, primary, secondary, onSubmit, icon, headerText, count, ...restProps } = props;
|
|
58
58
|
const t = useI18n();
|
|
59
59
|
return (_jsxs(StyledArticleHeader, { as: as, actions: _jsx(Button, { type: 'submit', "aria-hidden": 'true', tabIndex: '-1', children: t('article_list_header_submit_label') }, void 0), role: 'search', onSubmit: (ev) => {
|
|
60
60
|
ev.preventDefault();
|
|
61
61
|
if (onSubmit)
|
|
62
62
|
onSubmit(ev);
|
|
63
|
-
}, ...restProps, children: [_jsxs(Flex, { container: { alignItems: 'center', gap: 1 }, children: [icon, _jsx(StyledArticleListHeaderText, { variant: 'h2', children: headerText }, void 0), primary.actions && (_jsx(MenuButton, { variant: 'simple', text: Locale.moreActions, icon: 'more', iconOnly: true, menu: {
|
|
63
|
+
}, ...restProps, children: [_jsxs(Flex, { container: { alignItems: 'center', gap: 1 }, children: [icon, _jsx(StyledArticleListHeaderText, { variant: 'h2', children: _jsxs(Flex, { container: { alignItems: 'center', gap: 1 }, children: [headerText, typeof count === 'number' && _jsx(Count, { children: count }, void 0)] }, void 0) }, void 0), primary.actions && (_jsx(MenuButton, { variant: 'simple', text: Locale.moreActions, icon: 'more', iconOnly: true, menu: {
|
|
64
64
|
items: primary.actions.map(({ text, ...rest }) => ({ ...rest, primary: text }))
|
|
65
65
|
} }, void 0))] }, void 0), _jsxs(Flex, { container: { alignItems: 'center', gap: 1 }, children: [_jsx(Flex, { item: { grow: 1 }, children: primary.search }, void 0), _jsx(Flex, { container: true, as: StyledHeaderActions, children: primary.followedFilter }, void 0)] }, void 0), secondary && (_jsx(StyledSecondaryContainer, { container: { gap: 1 }, children: secondary }, void 0))] }, void 0));
|
|
66
66
|
};
|
|
@@ -1 +1 @@
|
|
|
1
|
-
{"version":3,"file":"ArticleListHeader.js","sourceRoot":"","sources":["../../../src/components/ArticleList/ArticleListHeader.tsx"],"names":[],"mappings":";AACA,OAAO,MAAM,EAAE,EAAE,GAAG,EAAE,MAAM,mBAAmB,CAAC;AAEhD,OAAO,EACL,MAAM,EACN,IAAI,EACJ,IAAI,EACJ,UAAU,EAEV,OAAO,EAKP,IAAI,EACJ,gBAAgB,
|
|
1
|
+
{"version":3,"file":"ArticleListHeader.js","sourceRoot":"","sources":["../../../src/components/ArticleList/ArticleListHeader.tsx"],"names":[],"mappings":";AACA,OAAO,MAAM,EAAE,EAAE,GAAG,EAAE,MAAM,mBAAmB,CAAC;AAEhD,OAAO,EACL,MAAM,EACN,IAAI,EACJ,IAAI,EACJ,UAAU,EAEV,OAAO,EAKP,IAAI,EACJ,gBAAgB,EAChB,KAAK,EACN,MAAM,yBAAyB,CAAC;AACjC,OAAO,EAAE,iBAAiB,EAAE,MAAM,kDAAkD,CAAC;AAoBrF,MAAM,mBAAmB,GAAG,MAAM,CAAC,GAAG,CAAC,CAAC,EAAE,KAAK,EAAE,EAAE,EAAE;IACnD,OAAO,GAAG,CAAA;;;;;;;;;;;;;;;;;;;MAmBN,iBAAiB;aACV,KAAK,CAAC,IAAI,CAAC,OAAO;;GAE5B,CAAC;AACJ,CAAC,CAAC,CAAC;AAEH,mBAAmB,CAAC,YAAY,GAAG,gBAAgB,CAAC;AAEpD,MAAM,wBAAwB,GAAG,MAAM,CAAC,IAAI,CAAC,CAAA;;;;;CAK5C,CAAC;AAEF;YACY;AACZ,MAAM,mBAAmB,GAAG,MAAM,CAAC,GAAG,CAAA;;;;;;CAMrC,CAAC;AAEF,MAAM,2BAA2B,GAAG,MAAM,CAAC,IAAI,CAAC,CAAA;;;;;CAK/C,CAAC;AAEF,MAAM,MAAM,GAAG;IACb,YAAY;IACZ,WAAW,EAAE,cAAc;CAC5B,CAAC;AAEF,MAAM,iBAAiB,GAA8C,CACnE,KAA6B,EAC7B,EAAE;IACF,MAAM,EAAE,EAAE,GAAG,IAAI,EAAE,OAAO,EAAE,SAAS,EAAE,QAAQ,EAAE,IAAI,EAAE,UAAU,EAAE,KAAK,EAAE,GAAG,SAAS,EAAE,GAAG,KAAK,CAAC;IACjG,MAAM,CAAC,GAAG,OAAO,EAAE,CAAC;IAEpB,OAAO,CACL,MAAC,mBAAmB,IAClB,EAAE,EAAE,EAAE,EACN,OAAO,EACL,KAAC,MAAM,IAAC,IAAI,EAAC,QAAQ,iBAAa,MAAM,EAAC,QAAQ,EAAC,IAAI,YACnD,CAAC,CAAC,kCAAkC,CAAC,WAC/B,EAEX,IAAI,EAAC,QAAQ,EACb,QAAQ,EAAE,CAAC,EAAc,EAAE,EAAE;YAC3B,EAAE,CAAC,cAAc,EAAE,CAAC;YACpB,IAAI,QAAQ;gBAAE,QAAQ,CAAC,EAAE,CAAC,CAAC;QAC7B,CAAC,KACG,SAAS,aAEb,MAAC,IAAI,IAAC,SAAS,EAAE,EAAE,UAAU,EAAE,QAAQ,EAAE,GAAG,EAAE,CAAC,EAAE,aAC9C,IAAI,EACL,KAAC,2BAA2B,IAAC,OAAO,EAAC,IAAI,YACvC,MAAC,IAAI,IAAC,SAAS,EAAE,EAAE,UAAU,EAAE,QAAQ,EAAE,GAAG,EAAE,CAAC,EAAE,aAC9C,UAAU,EACV,OAAO,KAAK,KAAK,QAAQ,IAAI,KAAC,KAAK,cAAE,KAAK,WAAS,YAC/C,WACqB,EAE7B,OAAO,CAAC,OAAO,IAAI,CAClB,KAAC,UAAU,IACT,OAAO,EAAC,QAAQ,EAChB,IAAI,EAAE,MAAM,CAAC,WAAW,EACxB,IAAI,EAAC,MAAM,EACX,QAAQ,QACR,IAAI,EAAE;4BACJ,KAAK,EAAE,OAAO,CAAC,OAAO,CAAC,GAAG,CAAC,CAAC,EAAE,IAAI,EAAE,GAAG,IAAI,EAAE,EAAE,EAAE,CAAC,CAAC,EAAE,GAAG,IAAI,EAAE,OAAO,EAAE,IAAI,EAAE,CAAC,CAAC;yBAChF,WACD,CACH,YACI,EACP,MAAC,IAAI,IAAC,SAAS,EAAE,EAAE,UAAU,EAAE,QAAQ,EAAE,GAAG,EAAE,CAAC,EAAE,aAC/C,KAAC,IAAI,IAAC,IAAI,EAAE,EAAE,IAAI,EAAE,CAAC,EAAE,YAAG,OAAO,CAAC,MAAM,WAAQ,EAChD,KAAC,IAAI,IAAC,SAAS,QAAC,EAAE,EAAE,mBAAmB,YACpC,OAAO,CAAC,cAAc,WAClB,YACF,EACN,SAAS,IAAI,CACZ,KAAC,wBAAwB,IAAC,SAAS,EAAE,EAAE,GAAG,EAAE,CAAC,EAAE,YAAG,SAAS,WAA4B,CACxF,YACmB,CACvB,CAAC;AACJ,CAAC,CAAC;AAEF,eAAe,iBAAiB,CAAC","sourcesContent":["import { FunctionComponent, ReactNode, EventHandler, MouseEvent, ReactElement } from 'react';\nimport styled, { css } from 'styled-components';\n\nimport {\n Button,\n Flex,\n Form,\n MenuButton,\n SearchInput,\n useI18n,\n BaseProps,\n AsProp,\n Action,\n Icon,\n Text,\n defaultThemeProp,\n Count\n} from '@pega/cosmos-react-core';\nimport { StyledFormContent } from '@pega/cosmos-react-core/lib/components/Form/Form';\n\nexport interface ArticleListHeaderProps extends BaseProps, AsProp {\n /** Header Icon and Text */\n icon?: ReactElement<typeof Icon>;\n headerText: string;\n /* Integer representing the total count of articles */\n count?: number;\n /** Primary data: Drop in elements related to search or filtering of articles */\n primary: {\n search: ReactElement<typeof SearchInput>;\n followedFilter?: ReactElement;\n actions?: Action[];\n };\n /** Any other filter components to be passed */\n secondary?: ReactNode;\n /** Callback that triggers on enter */\n onSubmit?: EventHandler<MouseEvent>;\n}\n\nconst StyledArticleHeader = styled.div(({ theme }) => {\n return css`\n width: 100%;\n gap: 0;\n\n button[type='submit'] {\n height: 0;\n min-height: 0;\n width: 0.0625rem;\n clip-path: inset(50%);\n clip: rect(0, 0, 0, 0);\n margin: 0;\n overflow: hidden;\n padding: 0;\n border: 0;\n }\n > div:last-child {\n margin: 0;\n }\n\n ${StyledFormContent} {\n gap: ${theme.base.spacing};\n }\n `;\n});\n\nStyledArticleHeader.defaultProps = defaultThemeProp;\n\nconst StyledSecondaryContainer = styled(Flex)`\n margin: 0.5rem 0;\n & > * {\n flex-grow: 1;\n }\n`;\n\n/* This below style will be removed once we have margin auto support from Flex\ncomponent */\nconst StyledHeaderActions = styled.div`\n margin-left: auto;\n\n .radio-check {\n margin: 0;\n }\n`;\n\nconst StyledArticleListHeaderText = styled(Text)`\n text-overflow: ellipsis;\n white-space: nowrap;\n overflow: hidden;\n flex: 1;\n`;\n\nconst Locale = {\n // FIXME: TR\n moreActions: 'More actions'\n};\n\nconst ArticleListHeader: FunctionComponent<ArticleListHeaderProps> = (\n props: ArticleListHeaderProps\n) => {\n const { as = Form, primary, secondary, onSubmit, icon, headerText, count, ...restProps } = props;\n const t = useI18n();\n\n return (\n <StyledArticleHeader\n as={as}\n actions={\n <Button type='submit' aria-hidden='true' tabIndex='-1'>\n {t('article_list_header_submit_label')}\n </Button>\n }\n role='search'\n onSubmit={(ev: MouseEvent) => {\n ev.preventDefault();\n if (onSubmit) onSubmit(ev);\n }}\n {...restProps}\n >\n <Flex container={{ alignItems: 'center', gap: 1 }}>\n {icon}\n <StyledArticleListHeaderText variant='h2'>\n <Flex container={{ alignItems: 'center', gap: 1 }}>\n {headerText}\n {typeof count === 'number' && <Count>{count}</Count>}\n </Flex>\n </StyledArticleListHeaderText>\n\n {primary.actions && (\n <MenuButton\n variant='simple'\n text={Locale.moreActions}\n icon='more'\n iconOnly\n menu={{\n items: primary.actions.map(({ text, ...rest }) => ({ ...rest, primary: text }))\n }}\n />\n )}\n </Flex>\n <Flex container={{ alignItems: 'center', gap: 1 }}>\n <Flex item={{ grow: 1 }}>{primary.search}</Flex>\n <Flex container as={StyledHeaderActions}>\n {primary.followedFilter}\n </Flex>\n </Flex>\n {secondary && (\n <StyledSecondaryContainer container={{ gap: 1 }}>{secondary}</StyledSecondaryContainer>\n )}\n </StyledArticleHeader>\n );\n};\n\nexport default ArticleListHeader;\n"]}
|
package/package.json
CHANGED
|
@@ -1,6 +1,6 @@
|
|
|
1
1
|
{
|
|
2
2
|
"name": "@pega/cosmos-react-cs",
|
|
3
|
-
"version": "3.0.0-dev.
|
|
3
|
+
"version": "3.0.0-dev.4.2",
|
|
4
4
|
"author": "Pegasystems",
|
|
5
5
|
"license": "SEE LICENSE IN LICENSE",
|
|
6
6
|
"repository": {
|
|
@@ -20,22 +20,21 @@
|
|
|
20
20
|
"build": "tsc -b"
|
|
21
21
|
},
|
|
22
22
|
"dependencies": {
|
|
23
|
-
"@pega/cosmos-react-core": "3.0.0-dev.
|
|
24
|
-
"@pega/cosmos-react-dnd": "3.0.0-dev.
|
|
23
|
+
"@pega/cosmos-react-core": "3.0.0-dev.4.2",
|
|
24
|
+
"@pega/cosmos-react-dnd": "3.0.0-dev.4.2",
|
|
25
25
|
"polished": "^4.1.0",
|
|
26
26
|
"react": "^16.14.0 || ^17.0.0",
|
|
27
27
|
"react-dom": "^16.14.0 || ^17.0.0",
|
|
28
28
|
"styled-components": "^5.2.0"
|
|
29
29
|
},
|
|
30
30
|
"devDependencies": {
|
|
31
|
-
"@storybook/addon-a11y": "^6.4.
|
|
32
|
-
"@storybook/addon-actions": "^6.4.
|
|
33
|
-
"@storybook/addon-
|
|
34
|
-
"@storybook/addon-
|
|
35
|
-
"@storybook/
|
|
36
|
-
"@storybook/
|
|
37
|
-
"@storybook/
|
|
38
|
-
"@storybook/theming": "^6.4.12",
|
|
31
|
+
"@storybook/addon-a11y": "^6.4.19",
|
|
32
|
+
"@storybook/addon-actions": "^6.4.19",
|
|
33
|
+
"@storybook/addon-storysource": "^6.4.19",
|
|
34
|
+
"@storybook/addon-toolbars": "^6.4.19",
|
|
35
|
+
"@storybook/addons": "^6.4.19",
|
|
36
|
+
"@storybook/react": "^6.4.19",
|
|
37
|
+
"@storybook/theming": "^6.4.19",
|
|
39
38
|
"enzyme": "^3.11.0",
|
|
40
39
|
"typescript": "~4.5.2"
|
|
41
40
|
}
|