@pega/cosmos-react-wss 5.0.0-dev.6.2 → 5.0.0-dev.7.0
This diff represents the content of publicly available package versions that have been released to one of the supported registries. The information contained in this diff is provided for informational purposes only and reflects changes between package versions as they appear in their respective public registries.
- package/lib/components/PageTemplates/BannerPage.d.ts +3 -2
- package/lib/components/PageTemplates/BannerPage.d.ts.map +1 -1
- package/lib/components/PageTemplates/BannerPage.js +14 -2
- package/lib/components/PageTemplates/BannerPage.js.map +1 -1
- package/lib/components/QuickCreate/QuickCreate.d.ts +2 -2
- package/lib/components/QuickCreate/QuickCreate.d.ts.map +1 -1
- package/lib/components/QuickCreate/QuickCreate.js +21 -22
- package/lib/components/QuickCreate/QuickCreate.js.map +1 -1
- package/package.json +4 -4
|
@@ -22,13 +22,14 @@ export interface BannerOptions {
|
|
|
22
22
|
export interface BannerPageProps {
|
|
23
23
|
banner: BannerOptions;
|
|
24
24
|
/** Content for the first column */
|
|
25
|
-
a: ReactNode;
|
|
25
|
+
a: ReactNode[];
|
|
26
26
|
/** Content for the second column. If not provided the first column will stretch. */
|
|
27
|
-
b?: ReactNode;
|
|
27
|
+
b?: ReactNode[];
|
|
28
28
|
ref?: Ref<HTMLDivElement>;
|
|
29
29
|
/** Variants for the sizing of the content columns. Two column will make the columns equal in size. */
|
|
30
30
|
variant?: 'two-column' | 'narrow-wide' | 'wide-narrow';
|
|
31
31
|
}
|
|
32
|
+
export declare const StyledBannerPage: import("styled-components").StyledComponent<"div", import("styled-components").DefaultTheme, {}, never>;
|
|
32
33
|
export declare const StyledBannerContainer: import("styled-components").StyledComponent<"div", import("styled-components").DefaultTheme, Pick<BannerOptions, "backgroundColor" | "backgroundImage">, never>;
|
|
33
34
|
export declare const StyledBanner: import("styled-components").StyledComponent<"div", import("styled-components").DefaultTheme, Pick<BannerOptions, "backgroundColor" | "backgroundImage" | "variant" | "tintImage">, never>;
|
|
34
35
|
export declare const StyledContentContainer: import("styled-components").StyledComponent<"div", import("styled-components").DefaultTheme, {}, never>;
|
|
@@ -1 +1 @@
|
|
|
1
|
-
{"version":3,"file":"BannerPage.d.ts","sourceRoot":"","sources":["../../../src/components/PageTemplates/BannerPage.tsx"],"names":[],"mappings":"AAEA,OAAO,KAAK,EAAE,EAAE,EAAmB,SAAS,EAAE,GAAG,EAAE,MAAM,OAAO,CAAC;AAIjE,OAAO,KAAK,EAAE,YAAY,EAAE,MAAM,yBAAyB,CAAC;AAE5D,MAAM,WAAW,aAAa;IAC5B,kCAAkC;IAClC,eAAe,CAAC,EAAE,MAAM,CAAC;IACzB,6BAA6B;IAC7B,KAAK,EAAE,MAAM,CAAC;IACd,0EAA0E;IAC1E,eAAe,CAAC,EAAE,MAAM,CAAC;IACzB,4CAA4C;IAC5C,OAAO,CAAC,EAAE,MAAM,CAAC;IACjB;;;OAGG;IACH,OAAO,CAAC,EAAE,OAAO,GAAG,MAAM,CAAC;IAC3B;;OAEG;IACH,SAAS,CAAC,EAAE,OAAO,CAAC;CACrB;AAED,MAAM,WAAW,eAAe;IAC9B,MAAM,EAAE,aAAa,CAAC;IACtB,mCAAmC;IACnC,CAAC,EAAE,SAAS,CAAC;
|
|
1
|
+
{"version":3,"file":"BannerPage.d.ts","sourceRoot":"","sources":["../../../src/components/PageTemplates/BannerPage.tsx"],"names":[],"mappings":"AAEA,OAAO,KAAK,EAAE,EAAE,EAAmB,SAAS,EAAE,GAAG,EAAE,MAAM,OAAO,CAAC;AAIjE,OAAO,KAAK,EAAE,YAAY,EAAE,MAAM,yBAAyB,CAAC;AAE5D,MAAM,WAAW,aAAa;IAC5B,kCAAkC;IAClC,eAAe,CAAC,EAAE,MAAM,CAAC;IACzB,6BAA6B;IAC7B,KAAK,EAAE,MAAM,CAAC;IACd,0EAA0E;IAC1E,eAAe,CAAC,EAAE,MAAM,CAAC;IACzB,4CAA4C;IAC5C,OAAO,CAAC,EAAE,MAAM,CAAC;IACjB;;;OAGG;IACH,OAAO,CAAC,EAAE,OAAO,GAAG,MAAM,CAAC;IAC3B;;OAEG;IACH,SAAS,CAAC,EAAE,OAAO,CAAC;CACrB;AAED,MAAM,WAAW,eAAe;IAC9B,MAAM,EAAE,aAAa,CAAC;IACtB,mCAAmC;IACnC,CAAC,EAAE,SAAS,EAAE,CAAC;IACf,oFAAoF;IACpF,CAAC,CAAC,EAAE,SAAS,EAAE,CAAC;IAChB,GAAG,CAAC,EAAE,GAAG,CAAC,cAAc,CAAC,CAAC;IAC1B,sGAAsG;IACtG,OAAO,CAAC,EAAE,YAAY,GAAG,aAAa,GAAG,aAAa,CAAC;CACxD;AAED,eAAO,MAAM,gBAAgB,yGAK3B,CAAC;AAIH,eAAO,MAAM,qBAAqB,iKAoBhC,CAAC;AAIH,eAAO,MAAM,YAAY,2LA+BxB,CAAC;AAIF,eAAO,MAAM,sBAAsB,yGAoBlC,CAAC;AAUF,eAAO,MAAM,UAAU,EAAE,EAAE,CAAC,eAAe,GAAG,YAAY,CAwDxD,CAAC"}
|
|
@@ -1,8 +1,15 @@
|
|
|
1
1
|
import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
|
|
2
2
|
import { readableColor, transparentize } from 'polished';
|
|
3
|
-
import { forwardRef } from 'react';
|
|
3
|
+
import { forwardRef, Fragment } from 'react';
|
|
4
4
|
import styled, { css } from 'styled-components';
|
|
5
5
|
import { defaultThemeProp, Flex, Grid, Text, tryCatch } from '@pega/cosmos-react-core';
|
|
6
|
+
export const StyledBannerPage = styled.div(({ theme }) => {
|
|
7
|
+
return css `
|
|
8
|
+
min-height: calc(100vh - var(--appshell-offset));
|
|
9
|
+
background-color: ${theme.base.palette['app-background']};
|
|
10
|
+
`;
|
|
11
|
+
});
|
|
12
|
+
StyledBannerPage.defaultProps = defaultThemeProp;
|
|
6
13
|
export const StyledBannerContainer = styled.div(({ backgroundImage, backgroundColor, theme }) => {
|
|
7
14
|
return css `
|
|
8
15
|
width: 100%;
|
|
@@ -48,6 +55,7 @@ export const StyledContentContainer = styled.div(({ theme: { base: { breakpoints
|
|
|
48
55
|
padding: calc(${spacing} * 2);
|
|
49
56
|
width: 100%;
|
|
50
57
|
margin: 0 auto;
|
|
58
|
+
|
|
51
59
|
@media screen and (min-width: ${breakpoints.md}) {
|
|
52
60
|
width: 100%;
|
|
53
61
|
padding: calc(${spacing} * 2.5);
|
|
@@ -65,6 +73,10 @@ const variantMap = {
|
|
|
65
73
|
};
|
|
66
74
|
export const BannerPage = forwardRef(function BannerPage({ banner, a, b, variant = 'two-column', ...restProps }, ref) {
|
|
67
75
|
const gridCols = variantMap[variant];
|
|
68
|
-
return (_jsxs(
|
|
76
|
+
return (_jsxs(StyledBannerPage, { ref: ref, ...restProps, children: [banner && (_jsx(StyledBannerContainer, { backgroundImage: banner.backgroundImage, backgroundColor: banner.backgroundColor, children: _jsx(Flex, { variant: banner.variant, backgroundImage: banner.backgroundImage, backgroundColor: banner.backgroundColor, as: StyledBanner, container: { justify: 'center', alignItems: 'center', direction: 'column', gap: 1 }, tintImage: banner.tintImage, children: _jsxs(StyledContentContainer, { children: [_jsx(Text, { variant: 'h1', children: banner.title }), banner.message && (_jsx(Text, { variant: 'primary', as: 'p', children: banner.message }))] }) }) })), _jsxs(Grid, { container: { gap: 2 }, md: { container: { cols: '1fr' } }, lg: { container: { cols: b ? `${gridCols}` : '1fr' } }, as: StyledContentContainer, children: [!!a.length && (_jsx(Flex, { container: { direction: 'column', gap: 2 }, children: a.map((el, index) => (
|
|
77
|
+
// eslint-disable-next-line react/no-array-index-key
|
|
78
|
+
_jsx(Fragment, { children: el }, index))) })), b && !!b.length && (_jsx(Flex, { container: { direction: 'column', gap: 2 }, children: b.map((el, index) => (
|
|
79
|
+
// eslint-disable-next-line react/no-array-index-key
|
|
80
|
+
_jsx(Fragment, { children: el }, index))) }))] })] }));
|
|
69
81
|
});
|
|
70
82
|
//# sourceMappingURL=BannerPage.js.map
|
|
@@ -1 +1 @@
|
|
|
1
|
-
{"version":3,"file":"BannerPage.js","sourceRoot":"","sources":["../../../src/components/PageTemplates/BannerPage.tsx"],"names":[],"mappings":";AAAA,OAAO,EAAE,aAAa,EAAE,cAAc,EAAE,MAAM,UAAU,CAAC;AACzD,OAAO,EAAE,UAAU,EAAE,MAAM,OAAO,CAAC;
|
|
1
|
+
{"version":3,"file":"BannerPage.js","sourceRoot":"","sources":["../../../src/components/PageTemplates/BannerPage.tsx"],"names":[],"mappings":"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","sourcesContent":["import { readableColor, transparentize } from 'polished';\nimport { forwardRef, Fragment } from 'react';\nimport type { FC, PropsWithoutRef, ReactNode, Ref } from 'react';\nimport styled, { css } from 'styled-components';\n\nimport { defaultThemeProp, Flex, Grid, Text, tryCatch } from '@pega/cosmos-react-core';\nimport type { ForwardProps } from '@pega/cosmos-react-core';\n\nexport interface BannerOptions {\n /** An image url for the banner */\n backgroundImage?: string;\n /** A title for the banner */\n title: string;\n /** A fallback background color if the background image is not provided */\n backgroundColor?: string;\n /** Text that will appear below the title */\n message?: string;\n /** The light variant will provide a white translucent filter over the background image\n * with dark text. The dark variant will provide the opposite.\n * @default 'light'\n */\n variant?: 'light' | 'dark';\n /** Toggles the translucent filter provided by the variant\n * @default true\n */\n tintImage?: boolean;\n}\n\nexport interface BannerPageProps {\n banner: BannerOptions;\n /** Content for the first column */\n a: ReactNode[];\n /** Content for the second column. If not provided the first column will stretch. */\n b?: ReactNode[];\n ref?: Ref<HTMLDivElement>;\n /** Variants for the sizing of the content columns. Two column will make the columns equal in size. */\n variant?: 'two-column' | 'narrow-wide' | 'wide-narrow';\n}\n\nexport const StyledBannerPage = styled.div(({ theme }) => {\n return css`\n min-height: calc(100vh - var(--appshell-offset));\n background-color: ${theme.base.palette['app-background']};\n `;\n});\n\nStyledBannerPage.defaultProps = defaultThemeProp;\n\nexport const StyledBannerContainer = styled.div<\n Pick<BannerOptions, 'backgroundImage' | 'backgroundColor'>\n>(({ backgroundImage, backgroundColor, theme }) => {\n return css`\n width: 100%;\n height: calc(${theme.base.spacing} * 38);\n\n ${backgroundImage &&\n css`\n background-image: url('${backgroundImage}');\n background-size: cover;\n background-position: center;\n background-repeat: no-repeat;\n `}\n\n ${backgroundColor &&\n css`\n background-color: ${backgroundColor};\n `}\n `;\n});\n\nStyledBannerContainer.defaultProps = defaultThemeProp;\n\nexport const StyledBanner = styled.div<\n Pick<BannerOptions, 'variant' | 'backgroundColor' | 'backgroundImage' | 'tintImage'>\n>(\n ({\n variant = 'light',\n backgroundColor,\n backgroundImage,\n tintImage = true,\n theme: {\n base: {\n palette: { light, dark }\n }\n }\n }) => {\n let textColor = variant === 'light' ? dark : light;\n let overlayColor = variant === 'light' ? transparentize(0.3, light) : transparentize(0.3, dark);\n if (backgroundColor && !backgroundImage) {\n textColor = tryCatch(() => readableColor(backgroundColor, light, dark)) ?? dark;\n overlayColor = 'transparent';\n } else if (!backgroundColor && !backgroundImage) {\n overlayColor = 'transparent';\n textColor = dark;\n }\n return css`\n background-color: ${tintImage ? overlayColor : 'transparent'};\n color: ${textColor};\n width: 100%;\n height: 100%;\n text-align: center;\n `;\n }\n);\n\nStyledBanner.defaultProps = defaultThemeProp;\n\nexport const StyledContentContainer = styled.div(\n ({\n theme: {\n base: { breakpoints, spacing }\n }\n }) => {\n return css`\n padding: calc(${spacing} * 2);\n width: 100%;\n margin: 0 auto;\n\n @media screen and (min-width: ${breakpoints.md}) {\n width: 100%;\n padding: calc(${spacing} * 2.5);\n }\n @media screen and (min-width: ${breakpoints.lg}) {\n max-width: 93.75rem;\n }\n `;\n }\n);\n\nStyledContentContainer.defaultProps = defaultThemeProp;\n\nconst variantMap = {\n 'two-column': '1fr 1fr',\n 'narrow-wide': '3fr 7fr',\n 'wide-narrow': '7fr 3fr'\n};\n\nexport const BannerPage: FC<BannerPageProps & ForwardProps> = forwardRef(function BannerPage(\n { banner, a, b, variant = 'two-column', ...restProps }: PropsWithoutRef<BannerPageProps>,\n ref: BannerPageProps['ref']\n) {\n const gridCols = variantMap[variant];\n return (\n <StyledBannerPage ref={ref} {...restProps}>\n {banner && (\n <StyledBannerContainer\n backgroundImage={banner.backgroundImage}\n backgroundColor={banner.backgroundColor}\n >\n <Flex\n variant={banner.variant}\n backgroundImage={banner.backgroundImage}\n backgroundColor={banner.backgroundColor}\n as={StyledBanner}\n container={{ justify: 'center', alignItems: 'center', direction: 'column', gap: 1 }}\n tintImage={banner.tintImage}\n >\n <StyledContentContainer>\n <Text variant='h1'>{banner.title}</Text>\n {banner.message && (\n <Text variant='primary' as='p'>\n {banner.message}\n </Text>\n )}\n </StyledContentContainer>\n </Flex>\n </StyledBannerContainer>\n )}\n <Grid\n container={{ gap: 2 }}\n md={{ container: { cols: '1fr' } }}\n lg={{ container: { cols: b ? `${gridCols}` : '1fr' } }}\n as={StyledContentContainer}\n >\n {!!a.length && (\n <Flex container={{ direction: 'column', gap: 2 }}>\n {a.map((el, index) => (\n // eslint-disable-next-line react/no-array-index-key\n <Fragment key={index}>{el}</Fragment>\n ))}\n </Flex>\n )}\n {b && !!b.length && (\n <Flex container={{ direction: 'column', gap: 2 }}>\n {b.map((el, index) => (\n // eslint-disable-next-line react/no-array-index-key\n <Fragment key={index}>{el}</Fragment>\n ))}\n </Flex>\n )}\n </Grid>\n </StyledBannerPage>\n );\n});\n"]}
|
|
@@ -10,8 +10,8 @@ export interface QuickCreateProps extends BaseProps, NoChildrenProp {
|
|
|
10
10
|
actions: QuickCreateAction[];
|
|
11
11
|
ref?: Ref<HTMLDivElement>;
|
|
12
12
|
}
|
|
13
|
-
export declare const StyledQuickCreate: import("styled-components").StyledComponent<"
|
|
14
|
-
export declare const StyledQuickCreateButton: import("styled-components").StyledComponent<FunctionComponent<import("@pega/cosmos-react-core").ButtonProps & ForwardProps>, import("styled-components").DefaultTheme,
|
|
13
|
+
export declare const StyledQuickCreate: import("styled-components").StyledComponent<FunctionComponent<import("@pega/cosmos-react-core").CardContentProps & ForwardProps>, import("styled-components").DefaultTheme, {}, never>;
|
|
14
|
+
export declare const StyledQuickCreateButton: import("styled-components").StyledComponent<FunctionComponent<import("@pega/cosmos-react-core").ButtonProps & ForwardProps>, import("styled-components").DefaultTheme, Pick<QuickCreateAction, "icon">, never>;
|
|
15
15
|
declare const QuickCreate: FunctionComponent<QuickCreateProps & ForwardProps>;
|
|
16
16
|
export default QuickCreate;
|
|
17
17
|
//# sourceMappingURL=QuickCreate.d.ts.map
|
|
@@ -1 +1 @@
|
|
|
1
|
-
{"version":3,"file":"QuickCreate.d.ts","sourceRoot":"","sources":["../../../src/components/QuickCreate/QuickCreate.tsx"],"names":[],"mappings":"AACA,OAAO,KAAK,EAAE,GAAG,EAAE,iBAAiB,EAAE,iBAAiB,EAAE,MAAM,OAAO,CAAC;
|
|
1
|
+
{"version":3,"file":"QuickCreate.d.ts","sourceRoot":"","sources":["../../../src/components/QuickCreate/QuickCreate.tsx"],"names":[],"mappings":"AACA,OAAO,KAAK,EAAE,GAAG,EAAE,iBAAiB,EAAE,iBAAiB,EAAE,MAAM,OAAO,CAAC;AAgBvE,OAAO,KAAK,EAAE,SAAS,EAAE,YAAY,EAAE,cAAc,EAAE,MAAM,yBAAyB,CAAC;AAEvF,MAAM,WAAW,iBAAiB;IAChC,KAAK,EAAE,MAAM,CAAC;IACd,IAAI,CAAC,EAAE,MAAM,CAAC;IACd,OAAO,EAAE,iBAAiB,CAAC;CAC5B;AAED,MAAM,WAAW,gBAAiB,SAAQ,SAAS,EAAE,cAAc;IACjE,OAAO,EAAE,MAAM,CAAC;IAChB,OAAO,EAAE,iBAAiB,EAAE,CAAC;IAC7B,GAAG,CAAC,EAAE,GAAG,CAAC,cAAc,CAAC,CAAC;CAC3B;AAED,eAAO,MAAM,iBAAiB,wLAI7B,CAAC;AAEF,eAAO,MAAM,uBAAuB,gNAgBnC,CAAC;AAWF,QAAA,MAAM,WAAW,EAAE,iBAAiB,CAAC,gBAAgB,GAAG,YAAY,CAoCnE,CAAC;AAEF,eAAe,WAAW,CAAC"}
|
|
@@ -1,26 +1,26 @@
|
|
|
1
1
|
import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
|
|
2
2
|
import { forwardRef } from 'react';
|
|
3
3
|
import styled, { css } from 'styled-components';
|
|
4
|
-
import { Button, defaultThemeProp, Flex, Grid, Icon, StyledIcon, Text, useTheme } from '@pega/cosmos-react-core';
|
|
5
|
-
export const StyledQuickCreate = styled
|
|
6
|
-
|
|
4
|
+
import { Button, Card, CardContent, CardHeader, defaultThemeProp, Flex, Grid, Icon, StyledIcon, Text, useTheme } from '@pega/cosmos-react-core';
|
|
5
|
+
export const StyledQuickCreate = styled(CardContent) `
|
|
6
|
+
ul {
|
|
7
7
|
list-style: none;
|
|
8
8
|
}
|
|
9
9
|
`;
|
|
10
|
-
export const StyledQuickCreateButton = styled(Button)(({ theme }) => {
|
|
10
|
+
export const StyledQuickCreateButton = styled(Button)(({ icon, theme }) => {
|
|
11
11
|
return css `
|
|
12
|
-
|
|
13
|
-
|
|
14
|
-
|
|
15
|
-
|
|
16
|
-
|
|
17
|
-
|
|
12
|
+
width: 100%;
|
|
13
|
+
height: 4rem;
|
|
14
|
+
padding: calc(${theme.base.spacing} * 2);
|
|
15
|
+
border-radius: ${theme.base['border-radius']};
|
|
16
|
+
justify-content: ${icon ? 'start' : 'center'};
|
|
17
|
+
text-align: start;
|
|
18
18
|
|
|
19
|
-
|
|
20
|
-
|
|
21
|
-
|
|
22
|
-
|
|
23
|
-
|
|
19
|
+
& ${StyledIcon} {
|
|
20
|
+
width: 1em;
|
|
21
|
+
height: 1em;
|
|
22
|
+
}
|
|
23
|
+
`;
|
|
24
24
|
});
|
|
25
25
|
StyledQuickCreateButton.defaultProps = defaultThemeProp;
|
|
26
26
|
const StyledButtonText = styled.span `
|
|
@@ -28,16 +28,15 @@ const StyledButtonText = styled.span `
|
|
|
28
28
|
-webkit-box-orient: vertical;
|
|
29
29
|
-webkit-line-clamp: 2;
|
|
30
30
|
overflow: hidden;
|
|
31
|
-
line-height: 1.5;
|
|
32
31
|
`;
|
|
33
32
|
const QuickCreate = forwardRef(function QuickCreate({ heading, actions, ...restProps }, ref) {
|
|
34
33
|
const theme = useTheme();
|
|
35
|
-
return (_jsxs(
|
|
36
|
-
|
|
37
|
-
|
|
38
|
-
|
|
39
|
-
|
|
40
|
-
|
|
34
|
+
return (_jsxs(Card, { ...restProps, ref: ref, children: [_jsx(CardHeader, { children: _jsx(Text, { variant: 'h2', children: heading }) }), _jsx(StyledQuickCreate, { children: _jsx(Grid, { as: 'ul', container: {
|
|
35
|
+
gap: 1,
|
|
36
|
+
cols: `repeat(auto-fill, minmax(min(${theme.base['content-width'].sm}, 100%), 1fr))`
|
|
37
|
+
}, children: actions.map(({ label, icon, onClick }) => {
|
|
38
|
+
return (_jsx("li", { children: _jsx(StyledQuickCreateButton, { onClick: onClick, variant: 'secondary', icon: icon, children: _jsxs(Flex, { container: { gap: 2, alignItems: 'center' }, as: 'span', children: [icon && _jsx(Icon, { name: icon }), _jsx(StyledButtonText, { children: label })] }) }) }, label));
|
|
39
|
+
}) }) })] }));
|
|
41
40
|
});
|
|
42
41
|
export default QuickCreate;
|
|
43
42
|
//# sourceMappingURL=QuickCreate.js.map
|
|
@@ -1 +1 @@
|
|
|
1
|
-
{"version":3,"file":"QuickCreate.js","sourceRoot":"","sources":["../../../src/components/QuickCreate/QuickCreate.tsx"],"names":[],"mappings":";AAAA,OAAO,EAAE,UAAU,EAAE,MAAM,OAAO,CAAC;AAEnC,OAAO,MAAM,EAAE,EAAE,GAAG,EAAE,MAAM,mBAAmB,CAAC;AAEhD,OAAO,EACL,MAAM,EACN,gBAAgB,EAChB,IAAI,EACJ,IAAI,EACJ,IAAI,EACJ,UAAU,EACV,IAAI,EACJ,QAAQ,EACT,MAAM,yBAAyB,CAAC;AAejC,MAAM,CAAC,MAAM,iBAAiB,GAAG,MAAM,CAAC,
|
|
1
|
+
{"version":3,"file":"QuickCreate.js","sourceRoot":"","sources":["../../../src/components/QuickCreate/QuickCreate.tsx"],"names":[],"mappings":";AAAA,OAAO,EAAE,UAAU,EAAE,MAAM,OAAO,CAAC;AAEnC,OAAO,MAAM,EAAE,EAAE,GAAG,EAAE,MAAM,mBAAmB,CAAC;AAEhD,OAAO,EACL,MAAM,EACN,IAAI,EACJ,WAAW,EACX,UAAU,EACV,gBAAgB,EAChB,IAAI,EACJ,IAAI,EACJ,IAAI,EACJ,UAAU,EACV,IAAI,EACJ,QAAQ,EACT,MAAM,yBAAyB,CAAC;AAejC,MAAM,CAAC,MAAM,iBAAiB,GAAG,MAAM,CAAC,WAAW,CAAC,CAAA;;;;CAInD,CAAC;AAEF,MAAM,CAAC,MAAM,uBAAuB,GAAG,MAAM,CAAC,MAAM,CAAC,CACnD,CAAC,EAAE,IAAI,EAAE,KAAK,EAAE,EAAE,EAAE;IAClB,OAAO,GAAG,CAAA;;;sBAGQ,KAAK,CAAC,IAAI,CAAC,OAAO;uBACjB,KAAK,CAAC,IAAI,CAAC,eAAe,CAAC;yBACzB,IAAI,CAAC,CAAC,CAAC,OAAO,CAAC,CAAC,CAAC,QAAQ;;;UAGxC,UAAU;;;;KAIf,CAAC;AACJ,CAAC,CACF,CAAC;AAEF,uBAAuB,CAAC,YAAY,GAAG,gBAAgB,CAAC;AAExD,MAAM,gBAAgB,GAAG,MAAM,CAAC,IAAI,CAAA;;;;;CAKnC,CAAC;AAEF,MAAM,WAAW,GAAuD,UAAU,CAChF,SAAS,WAAW,CAClB,EAAE,OAAO,EAAE,OAAO,EAAE,GAAG,SAAS,EAAoB,EACpD,GAA4B;IAE5B,MAAM,KAAK,GAAG,QAAQ,EAAE,CAAC;IACzB,OAAO,CACL,MAAC,IAAI,OAAK,SAAS,EAAE,GAAG,EAAE,GAAG,aAC3B,KAAC,UAAU,cACT,KAAC,IAAI,IAAC,OAAO,EAAC,IAAI,YAAE,OAAO,GAAQ,GACxB,EACb,KAAC,iBAAiB,cAChB,KAAC,IAAI,IACH,EAAE,EAAC,IAAI,EACP,SAAS,EAAE;wBACT,GAAG,EAAE,CAAC;wBACN,IAAI,EAAE,gCAAgC,KAAK,CAAC,IAAI,CAAC,eAAe,CAAC,CAAC,EAAE,gBAAgB;qBACrF,YAEA,OAAO,CAAC,GAAG,CAAC,CAAC,EAAE,KAAK,EAAE,IAAI,EAAE,OAAO,EAAE,EAAE,EAAE;wBACxC,OAAO,CACL,uBACE,KAAC,uBAAuB,IAAC,OAAO,EAAE,OAAO,EAAE,OAAO,EAAC,WAAW,EAAC,IAAI,EAAE,IAAI,YACvE,MAAC,IAAI,IAAC,SAAS,EAAE,EAAE,GAAG,EAAE,CAAC,EAAE,UAAU,EAAE,QAAQ,EAAE,EAAE,EAAE,EAAC,MAAM,aACzD,IAAI,IAAI,KAAC,IAAI,IAAC,IAAI,EAAE,IAAI,GAAI,EAC7B,KAAC,gBAAgB,cAAE,KAAK,GAAoB,IACvC,GACiB,IANnB,KAAK,CAOT,CACN,CAAC;oBACJ,CAAC,CAAC,GACG,GACW,IACf,CACR,CAAC;AACJ,CAAC,CACF,CAAC;AAEF,eAAe,WAAW,CAAC","sourcesContent":["import { forwardRef } from 'react';\nimport type { Ref, FunctionComponent, MouseEventHandler } from 'react';\nimport styled, { css } from 'styled-components';\n\nimport {\n Button,\n Card,\n CardContent,\n CardHeader,\n defaultThemeProp,\n Flex,\n Grid,\n Icon,\n StyledIcon,\n Text,\n useTheme\n} from '@pega/cosmos-react-core';\nimport type { BaseProps, ForwardProps, NoChildrenProp } from '@pega/cosmos-react-core';\n\nexport interface QuickCreateAction {\n label: string;\n icon?: string;\n onClick: MouseEventHandler;\n}\n\nexport interface QuickCreateProps extends BaseProps, NoChildrenProp {\n heading: string;\n actions: QuickCreateAction[];\n ref?: Ref<HTMLDivElement>;\n}\n\nexport const StyledQuickCreate = styled(CardContent)`\n ul {\n list-style: none;\n }\n`;\n\nexport const StyledQuickCreateButton = styled(Button)<Pick<QuickCreateAction, 'icon'>>(\n ({ icon, theme }) => {\n return css`\n width: 100%;\n height: 4rem;\n padding: calc(${theme.base.spacing} * 2);\n border-radius: ${theme.base['border-radius']};\n justify-content: ${icon ? 'start' : 'center'};\n text-align: start;\n\n & ${StyledIcon} {\n width: 1em;\n height: 1em;\n }\n `;\n }\n);\n\nStyledQuickCreateButton.defaultProps = defaultThemeProp;\n\nconst StyledButtonText = styled.span`\n display: -webkit-box;\n -webkit-box-orient: vertical;\n -webkit-line-clamp: 2;\n overflow: hidden;\n`;\n\nconst QuickCreate: FunctionComponent<QuickCreateProps & ForwardProps> = forwardRef(\n function QuickCreate(\n { heading, actions, ...restProps }: QuickCreateProps,\n ref: QuickCreateProps['ref']\n ) {\n const theme = useTheme();\n return (\n <Card {...restProps} ref={ref}>\n <CardHeader>\n <Text variant='h2'>{heading}</Text>\n </CardHeader>\n <StyledQuickCreate>\n <Grid\n as='ul'\n container={{\n gap: 1,\n cols: `repeat(auto-fill, minmax(min(${theme.base['content-width'].sm}, 100%), 1fr))`\n }}\n >\n {actions.map(({ label, icon, onClick }) => {\n return (\n <li key={label}>\n <StyledQuickCreateButton onClick={onClick} variant='secondary' icon={icon}>\n <Flex container={{ gap: 2, alignItems: 'center' }} as='span'>\n {icon && <Icon name={icon} />}\n <StyledButtonText>{label}</StyledButtonText>\n </Flex>\n </StyledQuickCreateButton>\n </li>\n );\n })}\n </Grid>\n </StyledQuickCreate>\n </Card>\n );\n }\n);\n\nexport default QuickCreate;\n"]}
|
package/package.json
CHANGED
|
@@ -1,6 +1,6 @@
|
|
|
1
1
|
{
|
|
2
2
|
"name": "@pega/cosmos-react-wss",
|
|
3
|
-
"version": "5.0.0-dev.
|
|
3
|
+
"version": "5.0.0-dev.7.0",
|
|
4
4
|
"repository": {
|
|
5
5
|
"type": "git",
|
|
6
6
|
"url": "https://github.com/pegasystems/cosmos-react.git",
|
|
@@ -20,9 +20,9 @@
|
|
|
20
20
|
"build": "tsc -b"
|
|
21
21
|
},
|
|
22
22
|
"dependencies": {
|
|
23
|
-
"@pega/cosmos-react-core": "5.0.0-dev.
|
|
24
|
-
"@pega/cosmos-react-social": "5.0.0-dev.
|
|
25
|
-
"@pega/cosmos-react-work": "5.0.0-dev.
|
|
23
|
+
"@pega/cosmos-react-core": "5.0.0-dev.7.0",
|
|
24
|
+
"@pega/cosmos-react-social": "5.0.0-dev.7.0",
|
|
25
|
+
"@pega/cosmos-react-work": "5.0.0-dev.7.0",
|
|
26
26
|
"@types/react": "^17.0.62",
|
|
27
27
|
"@types/react-dom": "^17.0.20",
|
|
28
28
|
"@types/styled-components": "^5.1.26",
|