@pega/cosmos-react-wss 9.0.0-build.29.2 → 9.0.0-build.29.21
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.
|
@@ -39,7 +39,7 @@ export const StyledBannerContainer = styled.div(({ backgroundImage, backgroundCo
|
|
|
39
39
|
`;
|
|
40
40
|
});
|
|
41
41
|
StyledBannerContainer.defaultProps = defaultThemeProp;
|
|
42
|
-
export const StyledBanner = styled.div(({ variant = 'light', backgroundColor, backgroundImage, tintImage =
|
|
42
|
+
export const StyledBanner = styled.div(({ variant = 'light', backgroundColor, backgroundImage, tintImage = false, align = 'center', theme: { base: { palette: { light, dark } } } }) => {
|
|
43
43
|
let textColor = variant === 'light' ? dark : light;
|
|
44
44
|
let overlayColor = variant === 'light' ? transparentize(0.3, light) : transparentize(0.3, dark);
|
|
45
45
|
if (backgroundColor && !backgroundImage) {
|
|
@@ -85,9 +85,9 @@ export const StyledBannerMessage = styled(Text)(({ theme: { base: { 'font-size':
|
|
|
85
85
|
`);
|
|
86
86
|
StyledBannerMessage.defaultProps = defaultThemeProp;
|
|
87
87
|
const variantMap = {
|
|
88
|
-
'two-column': '1fr 1fr',
|
|
89
|
-
'narrow-wide': '3fr 7fr',
|
|
90
|
-
'wide-narrow': '7fr 3fr'
|
|
88
|
+
'two-column': 'minmax(0, 1fr) minmax(0, 1fr)',
|
|
89
|
+
'narrow-wide': 'minmax(0, 3fr) minmax(0, 7fr)',
|
|
90
|
+
'wide-narrow': 'minmax(0, 7fr) minmax(0, 3fr)'
|
|
91
91
|
};
|
|
92
92
|
const verticalAlignMap = {
|
|
93
93
|
top: 'start',
|
|
@@ -99,7 +99,7 @@ const horizontalAlignMap = {
|
|
|
99
99
|
center: 'center',
|
|
100
100
|
right: 'end'
|
|
101
101
|
};
|
|
102
|
-
const
|
|
102
|
+
const StyledPageTabContent = styled.div(({ theme }) => {
|
|
103
103
|
return css `
|
|
104
104
|
padding-block: calc(2 * ${theme.base.spacing});
|
|
105
105
|
|
|
@@ -108,11 +108,11 @@ const StylePageTabContent = styled.div(({ theme }) => {
|
|
|
108
108
|
}
|
|
109
109
|
`;
|
|
110
110
|
});
|
|
111
|
-
|
|
111
|
+
StyledPageTabContent.defaultProps = defaultThemeProp;
|
|
112
112
|
export const BannerPage = forwardRef(function BannerPage({ banner, a, b, variant = 'two-column', utilities, className: classNameProp, ...restProps }, ref) {
|
|
113
113
|
const className = createClassName('banner-page', classNameProp, { variant });
|
|
114
114
|
const gridCols = variantMap[variant];
|
|
115
|
-
const pageContent = (_jsxs(Grid, { container: { gap: 2 }, md: { container: { cols: '1fr' } }, lg: { container: { cols: b ? `${gridCols}` : '1fr' } }, as: StyledContentContainer, className: createClassName('banner-page-content'), children: [!!a.length && _jsx(Flex, { container: { direction: 'column', gap: 2 }, children: a.map(el => el) }), b && !!b.length && (_jsx(Flex, { container: { direction: 'column', gap: 2 }, children: b.map(el => el) }))] }));
|
|
115
|
+
const pageContent = (_jsxs(Grid, { container: { gap: 2 }, md: { container: { cols: 'minmax(0, 1fr)' } }, lg: { container: { cols: b ? `${gridCols}` : 'minmax(0, 1fr)' } }, as: StyledContentContainer, className: createClassName('banner-page-content'), children: [!!a.length && _jsx(Flex, { container: { direction: 'column', gap: 2 }, children: a.map(el => el) }), b && !!b.length && (_jsx(Flex, { container: { direction: 'column', gap: 2 }, children: b.map(el => el) }))] }));
|
|
116
116
|
const pageBanner = banner && (_jsx(StyledBannerContainer, { backgroundImage: banner.backgroundImage, backgroundColor: banner.backgroundColor, height: banner.height, className: createClassName('banner-page-banner'), children: _jsx(Flex, { variant: banner.variant, backgroundImage: banner.backgroundImage, backgroundColor: banner.backgroundColor, as: StyledBanner, container: {
|
|
117
117
|
justify: verticalAlignMap[banner.verticalAlign ?? 'center'] ?? 'center',
|
|
118
118
|
alignItems: horizontalAlignMap[banner.align ?? 'center'] ?? 'center',
|
|
@@ -138,7 +138,7 @@ export const BannerPage = forwardRef(function BannerPage({ banner, a, b, variant
|
|
|
138
138
|
if (isMediumOrAbove) {
|
|
139
139
|
return (_jsxs(Flex, { as: StyledBannerPage, container: { gap: 2 }, ref: ref, ...restProps, className: className, children: [_jsxs(Flex, { container: { direction: 'column' }, item: { grow: 1 }, children: [pageBanner, pageContent] }), _jsx("div", { children: utilities })] }));
|
|
140
140
|
}
|
|
141
|
-
return (_jsxs(Flex, { container: { direction: 'column', gap: 2 }, as: StyledBannerPage, className: className, children: [pageBanner, _jsxs(Flex, { container: { direction: 'column', pad: [undefined, 2, undefined] }, children: [_jsx(Tabs, { tabs: pageTabs, onTabClick: handleTabChange, currentTabId: panel, ref: pageTabsRef }), pageTabs.map(tab => (_jsx(TabPanel, { tabId: tab.id, currentTabId: panel, tablistRef: pageTabsRef, children: _jsx(
|
|
141
|
+
return (_jsxs(Flex, { container: { direction: 'column', gap: 2 }, as: StyledBannerPage, className: className, children: [pageBanner, _jsxs(Flex, { container: { direction: 'column', pad: [undefined, 2, undefined] }, children: [_jsx(Tabs, { tabs: pageTabs, onTabClick: handleTabChange, currentTabId: panel, ref: pageTabsRef }), pageTabs.map(tab => (_jsx(TabPanel, { tabId: tab.id, currentTabId: panel, tablistRef: pageTabsRef, children: _jsx(StyledPageTabContent, { children: tab.content }) }, tab.id)))] })] }));
|
|
142
142
|
}
|
|
143
143
|
return (_jsxs(StyledBannerPage, { ref: ref, ...restProps, className: className, children: [pageBanner, pageContent] }));
|
|
144
144
|
});
|
|
@@ -1 +1 @@
|
|
|
1
|
-
{"version":3,"file":"BannerPage.js","sourceRoot":"","sources":["../../../src/components/PageTemplates/BannerPage.tsx"],"names":[],"mappings":"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","sourcesContent":["import { transparentize } from 'polished';\nimport { forwardRef, useState, useRef } from 'react';\nimport type { PropsWithoutRef, ReactNode, Ref } from 'react';\nimport styled, { css } from 'styled-components';\n\nimport {\n defaultThemeProp,\n Flex,\n Grid,\n Text,\n tryCatch,\n readableColor,\n useBreakpoint,\n useI18n,\n Tabs,\n TabPanel,\n createClassName\n} from '@pega/cosmos-react-core';\nimport type { BaseProps, ForwardRefForwardPropsComponent } 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 /** Controls how the banner fills vertical space.\n * - 'fixed': preset height based on the spacing token\n * - 'content': shrinks to fit content\n * - 'full': fills the visible viewport below the app shell\n * @default 'fixed'\n */\n height?: 'content' | 'fixed' | 'full';\n /** Horizontal alignment of the banner text content.\n * @default 'center'\n */\n align?: 'left' | 'center' | 'right';\n /** Vertical alignment of the banner text content.\n * @default 'center'\n */\n verticalAlign?: 'top' | 'center' | 'bottom';\n}\n\nexport interface BannerPageProps extends BaseProps {\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 /** Utilities as the last column */\n utilities?: ReactNode;\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' | 'height'>\n>(({ backgroundImage, backgroundColor, height = 'fixed', theme }) => {\n const heightValue = {\n content: 'auto',\n fixed: `calc(${theme.base.spacing} * 38)`,\n full: 'calc(100dvh - var(--appshell-offset, 0rem))'\n }[height];\n\n return css`\n width: 100%;\n height: ${heightValue};\n ${height !== 'content' &&\n css`\n overflow: hidden;\n `}\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' | 'align'>\n>(\n ({\n variant = 'light',\n backgroundColor,\n backgroundImage,\n tintImage = true,\n align = 'center',\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)) ?? 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: ${align};\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\nexport const StyledBannerHeading = styled(Text)(\n ({\n theme: {\n base: { 'font-size': fontSize }\n }\n }) => css`\n font-size: calc(${fontSize} * 3);\n word-break: break-word;\n `\n);\n\nStyledBannerHeading.defaultProps = defaultThemeProp;\n\nexport const StyledBannerMessage = styled(Text)(\n ({\n theme: {\n base: { 'font-size': fontSize }\n }\n }) => css`\n font-size: calc(${fontSize} * 1.5);\n `\n);\n\nStyledBannerMessage.defaultProps = defaultThemeProp;\n\nconst variantMap = {\n 'two-column': '1fr 1fr',\n 'narrow-wide': '3fr 7fr',\n 'wide-narrow': '7fr 3fr'\n};\n\nconst verticalAlignMap = {\n top: 'start',\n center: 'center',\n bottom: 'end'\n} as const;\n\nconst horizontalAlignMap = {\n left: 'start',\n center: 'center',\n right: 'end'\n} as const;\n\nconst StylePageTabContent = styled.div(({ theme }) => {\n return css`\n padding-block: calc(2 * ${theme.base.spacing});\n\n ${StyledContentContainer} {\n padding: 0;\n }\n `;\n});\n\nStylePageTabContent.defaultProps = defaultThemeProp;\n\nexport const BannerPage: ForwardRefForwardPropsComponent<BannerPageProps> = forwardRef(\n function BannerPage(\n {\n banner,\n a,\n b,\n variant = 'two-column',\n utilities,\n className: classNameProp,\n ...restProps\n }: PropsWithoutRef<BannerPageProps>,\n ref: BannerPageProps['ref']\n ) {\n const className = createClassName('banner-page', classNameProp, { variant });\n const gridCols = variantMap[variant];\n const pageContent = (\n <Grid\n container={{ gap: 2 }}\n md={{ container: { cols: '1fr' } }}\n lg={{ container: { cols: b ? `${gridCols}` : '1fr' } }}\n as={StyledContentContainer}\n className={createClassName('banner-page-content')}\n >\n {!!a.length && <Flex container={{ direction: 'column', gap: 2 }}>{a.map(el => el)}</Flex>}\n {b && !!b.length && (\n <Flex container={{ direction: 'column', gap: 2 }}>{b.map(el => el)}</Flex>\n )}\n </Grid>\n );\n\n const pageBanner = banner && (\n <StyledBannerContainer\n backgroundImage={banner.backgroundImage}\n backgroundColor={banner.backgroundColor}\n height={banner.height}\n className={createClassName('banner-page-banner')}\n >\n <Flex\n variant={banner.variant}\n backgroundImage={banner.backgroundImage}\n backgroundColor={banner.backgroundColor}\n as={StyledBanner}\n container={{\n justify: verticalAlignMap[banner.verticalAlign ?? 'center'] ?? 'center',\n alignItems: horizontalAlignMap[banner.align ?? 'center'] ?? 'center',\n direction: 'column',\n gap: 1\n }}\n tintImage={banner.tintImage}\n align={banner.align}\n >\n <StyledContentContainer>\n <StyledBannerHeading variant='h1'>{banner.title}</StyledBannerHeading>\n {banner.message && (\n <StyledBannerMessage variant='primary' as='p'>\n {banner.message}\n </StyledBannerMessage>\n )}\n </StyledContentContainer>\n </Flex>\n </StyledBannerContainer>\n );\n\n const isMediumOrAbove = useBreakpoint('md');\n const [panel, setPanel] = useState('content');\n const pageTabsRef = useRef<HTMLElement>(null);\n const t = useI18n();\n\n const pageTabs = [\n { name: t('content'), id: 'content', content: pageContent },\n {\n name: t('chat_with_ai'),\n id: 'chat_with_ai',\n content: utilities\n }\n ];\n\n const handleTabChange = (id: string) => {\n setPanel(id);\n };\n\n if (utilities) {\n if (isMediumOrAbove) {\n return (\n <Flex\n as={StyledBannerPage}\n container={{ gap: 2 }}\n ref={ref}\n {...restProps}\n className={className}\n >\n <Flex container={{ direction: 'column' }} item={{ grow: 1 }}>\n {pageBanner}\n {pageContent}\n </Flex>\n <div>{utilities}</div>\n </Flex>\n );\n }\n\n return (\n <Flex\n container={{ direction: 'column', gap: 2 }}\n as={StyledBannerPage}\n className={className}\n >\n {pageBanner}\n <Flex container={{ direction: 'column', pad: [undefined, 2, undefined] }}>\n <Tabs\n tabs={pageTabs}\n onTabClick={handleTabChange}\n currentTabId={panel}\n ref={pageTabsRef}\n />\n {pageTabs.map(tab => (\n <TabPanel tabId={tab.id} currentTabId={panel} tablistRef={pageTabsRef} key={tab.id}>\n <StylePageTabContent>{tab.content}</StylePageTabContent>\n </TabPanel>\n ))}\n </Flex>\n </Flex>\n );\n }\n\n return (\n <StyledBannerPage ref={ref} {...restProps} className={className}>\n {pageBanner}\n {pageContent}\n </StyledBannerPage>\n );\n }\n);\n"]}
|
|
1
|
+
{"version":3,"file":"BannerPage.js","sourceRoot":"","sources":["../../../src/components/PageTemplates/BannerPage.tsx"],"names":[],"mappings":";AAAA,OAAO,EAAE,cAAc,EAAE,MAAM,UAAU,CAAC;AAC1C,OAAO,EAAE,UAAU,EAAE,QAAQ,EAAE,MAAM,EAAE,MAAM,OAAO,CAAC;AAErD,OAAO,MAAM,EAAE,EAAE,GAAG,EAAE,MAAM,mBAAmB,CAAC;AAEhD,OAAO,EACL,gBAAgB,EAChB,IAAI,EACJ,IAAI,EACJ,IAAI,EACJ,QAAQ,EACR,aAAa,EACb,aAAa,EACb,OAAO,EACP,IAAI,EACJ,QAAQ,EACR,eAAe,EAChB,MAAM,yBAAyB,CAAC;AAmDjC,MAAM,CAAC,MAAM,gBAAgB,GAAG,MAAM,CAAC,GAAG,CAAC,CAAC,EAAE,KAAK,EAAE,EAAE,EAAE;IACvD,OAAO,GAAG,CAAA;;wBAEY,KAAK,CAAC,IAAI,CAAC,OAAO,CAAC,gBAAgB,CAAC;GACzD,CAAC;AACJ,CAAC,CAAC,CAAC;AAEH,gBAAgB,CAAC,YAAY,GAAG,gBAAgB,CAAC;AAEjD,MAAM,CAAC,MAAM,qBAAqB,GAAG,MAAM,CAAC,GAAG,CAE7C,CAAC,EAAE,eAAe,EAAE,eAAe,EAAE,MAAM,GAAG,OAAO,EAAE,KAAK,EAAE,EAAE,EAAE;IAClE,MAAM,WAAW,GAAG;QAClB,OAAO,EAAE,MAAM;QACf,KAAK,EAAE,QAAQ,KAAK,CAAC,IAAI,CAAC,OAAO,QAAQ;QACzC,IAAI,EAAE,6CAA6C;KACpD,CAAC,MAAM,CAAC,CAAC;IAEV,OAAO,GAAG,CAAA;;cAEE,WAAW;MACnB,MAAM,KAAK,SAAS;QACtB,GAAG,CAAA;;KAEF;;MAEC,eAAe;QACjB,GAAG,CAAA;+BACwB,eAAe;;;;KAIzC;;MAEC,eAAe;QACjB,GAAG,CAAA;0BACmB,eAAe;KACpC;GACF,CAAC;AACJ,CAAC,CAAC,CAAC;AAEH,qBAAqB,CAAC,YAAY,GAAG,gBAAgB,CAAC;AAEtD,MAAM,CAAC,MAAM,YAAY,GAAG,MAAM,CAAC,GAAG,CAGpC,CAAC,EACC,OAAO,GAAG,OAAO,EACjB,eAAe,EACf,eAAe,EACf,SAAS,GAAG,KAAK,EACjB,KAAK,GAAG,QAAQ,EAChB,KAAK,EAAE,EACL,IAAI,EAAE,EACJ,OAAO,EAAE,EAAE,KAAK,EAAE,IAAI,EAAE,EACzB,EACF,EACF,EAAE,EAAE;IACH,IAAI,SAAS,GAAG,OAAO,KAAK,OAAO,CAAC,CAAC,CAAC,IAAI,CAAC,CAAC,CAAC,KAAK,CAAC;IACnD,IAAI,YAAY,GAAG,OAAO,KAAK,OAAO,CAAC,CAAC,CAAC,cAAc,CAAC,GAAG,EAAE,KAAK,CAAC,CAAC,CAAC,CAAC,cAAc,CAAC,GAAG,EAAE,IAAI,CAAC,CAAC;IAChG,IAAI,eAAe,IAAI,CAAC,eAAe,EAAE,CAAC;QACxC,SAAS,GAAG,QAAQ,CAAC,GAAG,EAAE,CAAC,aAAa,CAAC,eAAe,CAAC,CAAC,IAAI,IAAI,CAAC;QACnE,YAAY,GAAG,aAAa,CAAC;IAC/B,CAAC;SAAM,IAAI,CAAC,eAAe,IAAI,CAAC,eAAe,EAAE,CAAC;QAChD,YAAY,GAAG,aAAa,CAAC;QAC7B,SAAS,GAAG,IAAI,CAAC;IACnB,CAAC;IACD,OAAO,GAAG,CAAA;0BACY,SAAS,CAAC,CAAC,CAAC,YAAY,CAAC,CAAC,CAAC,aAAa;eACnD,SAAS;;;oBAGJ,KAAK;KACpB,CAAC;AACJ,CAAC,CACF,CAAC;AAEF,YAAY,CAAC,YAAY,GAAG,gBAAgB,CAAC;AAE7C,MAAM,CAAC,MAAM,sBAAsB,GAAG,MAAM,CAAC,GAAG,CAC9C,CAAC,EACC,KAAK,EAAE,EACL,IAAI,EAAE,EAAE,WAAW,EAAE,OAAO,EAAE,EAC/B,EACF,EAAE,EAAE;IACH,OAAO,GAAG,CAAA;sBACQ,OAAO;;;;sCAIS,WAAW,CAAC,EAAE;;wBAE5B,OAAO;;sCAEO,WAAW,CAAC,EAAE;;;KAG/C,CAAC;AACJ,CAAC,CACF,CAAC;AAEF,sBAAsB,CAAC,YAAY,GAAG,gBAAgB,CAAC;AAEvD,MAAM,CAAC,MAAM,mBAAmB,GAAG,MAAM,CAAC,IAAI,CAAC,CAC7C,CAAC,EACC,KAAK,EAAE,EACL,IAAI,EAAE,EAAE,WAAW,EAAE,QAAQ,EAAE,EAChC,EACF,EAAE,EAAE,CAAC,GAAG,CAAA;sBACW,QAAQ;;GAE3B,CACF,CAAC;AAEF,mBAAmB,CAAC,YAAY,GAAG,gBAAgB,CAAC;AAEpD,MAAM,CAAC,MAAM,mBAAmB,GAAG,MAAM,CAAC,IAAI,CAAC,CAC7C,CAAC,EACC,KAAK,EAAE,EACL,IAAI,EAAE,EAAE,WAAW,EAAE,QAAQ,EAAE,EAChC,EACF,EAAE,EAAE,CAAC,GAAG,CAAA;sBACW,QAAQ;GAC3B,CACF,CAAC;AAEF,mBAAmB,CAAC,YAAY,GAAG,gBAAgB,CAAC;AAEpD,MAAM,UAAU,GAAG;IACjB,YAAY,EAAE,+BAA+B;IAC7C,aAAa,EAAE,+BAA+B;IAC9C,aAAa,EAAE,+BAA+B;CAC/C,CAAC;AAEF,MAAM,gBAAgB,GAAG;IACvB,GAAG,EAAE,OAAO;IACZ,MAAM,EAAE,QAAQ;IAChB,MAAM,EAAE,KAAK;CACL,CAAC;AAEX,MAAM,kBAAkB,GAAG;IACzB,IAAI,EAAE,OAAO;IACb,MAAM,EAAE,QAAQ;IAChB,KAAK,EAAE,KAAK;CACJ,CAAC;AAEX,MAAM,oBAAoB,GAAG,MAAM,CAAC,GAAG,CAAC,CAAC,EAAE,KAAK,EAAE,EAAE,EAAE;IACpD,OAAO,GAAG,CAAA;8BACkB,KAAK,CAAC,IAAI,CAAC,OAAO;;MAE1C,sBAAsB;;;GAGzB,CAAC;AACJ,CAAC,CAAC,CAAC;AAEH,oBAAoB,CAAC,YAAY,GAAG,gBAAgB,CAAC;AAErD,MAAM,CAAC,MAAM,UAAU,GAAqD,UAAU,CACpF,SAAS,UAAU,CACjB,EACE,MAAM,EACN,CAAC,EACD,CAAC,EACD,OAAO,GAAG,YAAY,EACtB,SAAS,EACT,SAAS,EAAE,aAAa,EACxB,GAAG,SAAS,EACqB,EACnC,GAA2B;IAE3B,MAAM,SAAS,GAAG,eAAe,CAAC,aAAa,EAAE,aAAa,EAAE,EAAE,OAAO,EAAE,CAAC,CAAC;IAC7E,MAAM,QAAQ,GAAG,UAAU,CAAC,OAAO,CAAC,CAAC;IACrC,MAAM,WAAW,GAAG,CAClB,MAAC,IAAI,IACH,SAAS,EAAE,EAAE,GAAG,EAAE,CAAC,EAAE,EACrB,EAAE,EAAE,EAAE,SAAS,EAAE,EAAE,IAAI,EAAE,gBAAgB,EAAE,EAAE,EAC7C,EAAE,EAAE,EAAE,SAAS,EAAE,EAAE,IAAI,EAAE,CAAC,CAAC,CAAC,CAAC,GAAG,QAAQ,EAAE,CAAC,CAAC,CAAC,gBAAgB,EAAE,EAAE,EACjE,EAAE,EAAE,sBAAsB,EAC1B,SAAS,EAAE,eAAe,CAAC,qBAAqB,CAAC,aAEhD,CAAC,CAAC,CAAC,CAAC,MAAM,IAAI,KAAC,IAAI,IAAC,SAAS,EAAE,EAAE,SAAS,EAAE,QAAQ,EAAE,GAAG,EAAE,CAAC,EAAE,YAAG,CAAC,CAAC,GAAG,CAAC,EAAE,CAAC,EAAE,CAAC,EAAE,CAAC,GAAQ,EACxF,CAAC,IAAI,CAAC,CAAC,CAAC,CAAC,MAAM,IAAI,CAClB,KAAC,IAAI,IAAC,SAAS,EAAE,EAAE,SAAS,EAAE,QAAQ,EAAE,GAAG,EAAE,CAAC,EAAE,YAAG,CAAC,CAAC,GAAG,CAAC,EAAE,CAAC,EAAE,CAAC,EAAE,CAAC,GAAQ,CAC3E,IACI,CACR,CAAC;IAEF,MAAM,UAAU,GAAG,MAAM,IAAI,CAC3B,KAAC,qBAAqB,IACpB,eAAe,EAAE,MAAM,CAAC,eAAe,EACvC,eAAe,EAAE,MAAM,CAAC,eAAe,EACvC,MAAM,EAAE,MAAM,CAAC,MAAM,EACrB,SAAS,EAAE,eAAe,CAAC,oBAAoB,CAAC,YAEhD,KAAC,IAAI,IACH,OAAO,EAAE,MAAM,CAAC,OAAO,EACvB,eAAe,EAAE,MAAM,CAAC,eAAe,EACvC,eAAe,EAAE,MAAM,CAAC,eAAe,EACvC,EAAE,EAAE,YAAY,EAChB,SAAS,EAAE;gBACT,OAAO,EAAE,gBAAgB,CAAC,MAAM,CAAC,aAAa,IAAI,QAAQ,CAAC,IAAI,QAAQ;gBACvE,UAAU,EAAE,kBAAkB,CAAC,MAAM,CAAC,KAAK,IAAI,QAAQ,CAAC,IAAI,QAAQ;gBACpE,SAAS,EAAE,QAAQ;gBACnB,GAAG,EAAE,CAAC;aACP,EACD,SAAS,EAAE,MAAM,CAAC,SAAS,EAC3B,KAAK,EAAE,MAAM,CAAC,KAAK,YAEnB,MAAC,sBAAsB,eACrB,KAAC,mBAAmB,IAAC,OAAO,EAAC,IAAI,YAAE,MAAM,CAAC,KAAK,GAAuB,EACrE,MAAM,CAAC,OAAO,IAAI,CACjB,KAAC,mBAAmB,IAAC,OAAO,EAAC,SAAS,EAAC,EAAE,EAAC,GAAG,YAC1C,MAAM,CAAC,OAAO,GACK,CACvB,IACsB,GACpB,GACe,CACzB,CAAC;IAEF,MAAM,eAAe,GAAG,aAAa,CAAC,IAAI,CAAC,CAAC;IAC5C,MAAM,CAAC,KAAK,EAAE,QAAQ,CAAC,GAAG,QAAQ,CAAC,SAAS,CAAC,CAAC;IAC9C,MAAM,WAAW,GAAG,MAAM,CAAc,IAAI,CAAC,CAAC;IAC9C,MAAM,CAAC,GAAG,OAAO,EAAE,CAAC;IAEpB,MAAM,QAAQ,GAAG;QACf,EAAE,IAAI,EAAE,CAAC,CAAC,SAAS,CAAC,EAAE,EAAE,EAAE,SAAS,EAAE,OAAO,EAAE,WAAW,EAAE;QAC3D;YACE,IAAI,EAAE,CAAC,CAAC,cAAc,CAAC;YACvB,EAAE,EAAE,cAAc;YAClB,OAAO,EAAE,SAAS;SACnB;KACF,CAAC;IAEF,MAAM,eAAe,GAAG,CAAC,EAAU,EAAE,EAAE;QACrC,QAAQ,CAAC,EAAE,CAAC,CAAC;IACf,CAAC,CAAC;IAEF,IAAI,SAAS,EAAE,CAAC;QACd,IAAI,eAAe,EAAE,CAAC;YACpB,OAAO,CACL,MAAC,IAAI,IACH,EAAE,EAAE,gBAAgB,EACpB,SAAS,EAAE,EAAE,GAAG,EAAE,CAAC,EAAE,EACrB,GAAG,EAAE,GAAG,KACJ,SAAS,EACb,SAAS,EAAE,SAAS,aAEpB,MAAC,IAAI,IAAC,SAAS,EAAE,EAAE,SAAS,EAAE,QAAQ,EAAE,EAAE,IAAI,EAAE,EAAE,IAAI,EAAE,CAAC,EAAE,aACxD,UAAU,EACV,WAAW,IACP,EACP,wBAAM,SAAS,GAAO,IACjB,CACR,CAAC;QACJ,CAAC;QAED,OAAO,CACL,MAAC,IAAI,IACH,SAAS,EAAE,EAAE,SAAS,EAAE,QAAQ,EAAE,GAAG,EAAE,CAAC,EAAE,EAC1C,EAAE,EAAE,gBAAgB,EACpB,SAAS,EAAE,SAAS,aAEnB,UAAU,EACX,MAAC,IAAI,IAAC,SAAS,EAAE,EAAE,SAAS,EAAE,QAAQ,EAAE,GAAG,EAAE,CAAC,SAAS,EAAE,CAAC,EAAE,SAAS,CAAC,EAAE,aACtE,KAAC,IAAI,IACH,IAAI,EAAE,QAAQ,EACd,UAAU,EAAE,eAAe,EAC3B,YAAY,EAAE,KAAK,EACnB,GAAG,EAAE,WAAW,GAChB,EACD,QAAQ,CAAC,GAAG,CAAC,GAAG,CAAC,EAAE,CAAC,CACnB,KAAC,QAAQ,IAAC,KAAK,EAAE,GAAG,CAAC,EAAE,EAAE,YAAY,EAAE,KAAK,EAAE,UAAU,EAAE,WAAW,YACnE,KAAC,oBAAoB,cAAE,GAAG,CAAC,OAAO,GAAwB,IADgB,GAAG,CAAC,EAAE,CAEvE,CACZ,CAAC,IACG,IACF,CACR,CAAC;IACJ,CAAC;IAED,OAAO,CACL,MAAC,gBAAgB,IAAC,GAAG,EAAE,GAAG,KAAM,SAAS,EAAE,SAAS,EAAE,SAAS,aAC5D,UAAU,EACV,WAAW,IACK,CACpB,CAAC;AACJ,CAAC,CACF,CAAC","sourcesContent":["import { transparentize } from 'polished';\nimport { forwardRef, useState, useRef } from 'react';\nimport type { PropsWithoutRef, ReactNode, Ref } from 'react';\nimport styled, { css } from 'styled-components';\n\nimport {\n defaultThemeProp,\n Flex,\n Grid,\n Text,\n tryCatch,\n readableColor,\n useBreakpoint,\n useI18n,\n Tabs,\n TabPanel,\n createClassName\n} from '@pega/cosmos-react-core';\nimport type { BaseProps, ForwardRefForwardPropsComponent } 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 /** Controls how the banner fills vertical space.\n * - 'fixed': preset height based on the spacing token\n * - 'content': shrinks to fit content\n * - 'full': fills the visible viewport below the app shell\n * @default 'fixed'\n */\n height?: 'content' | 'fixed' | 'full';\n /** Horizontal alignment of the banner text content.\n * @default 'center'\n */\n align?: 'left' | 'center' | 'right';\n /** Vertical alignment of the banner text content.\n * @default 'center'\n */\n verticalAlign?: 'top' | 'center' | 'bottom';\n}\n\nexport interface BannerPageProps extends BaseProps {\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 /** Utilities as the last column */\n utilities?: ReactNode;\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' | 'height'>\n>(({ backgroundImage, backgroundColor, height = 'fixed', theme }) => {\n const heightValue = {\n content: 'auto',\n fixed: `calc(${theme.base.spacing} * 38)`,\n full: 'calc(100dvh - var(--appshell-offset, 0rem))'\n }[height];\n\n return css`\n width: 100%;\n height: ${heightValue};\n ${height !== 'content' &&\n css`\n overflow: hidden;\n `}\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' | 'align'>\n>(\n ({\n variant = 'light',\n backgroundColor,\n backgroundImage,\n tintImage = false,\n align = 'center',\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)) ?? 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: ${align};\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\nexport const StyledBannerHeading = styled(Text)(\n ({\n theme: {\n base: { 'font-size': fontSize }\n }\n }) => css`\n font-size: calc(${fontSize} * 3);\n word-break: break-word;\n `\n);\n\nStyledBannerHeading.defaultProps = defaultThemeProp;\n\nexport const StyledBannerMessage = styled(Text)(\n ({\n theme: {\n base: { 'font-size': fontSize }\n }\n }) => css`\n font-size: calc(${fontSize} * 1.5);\n `\n);\n\nStyledBannerMessage.defaultProps = defaultThemeProp;\n\nconst variantMap = {\n 'two-column': 'minmax(0, 1fr) minmax(0, 1fr)',\n 'narrow-wide': 'minmax(0, 3fr) minmax(0, 7fr)',\n 'wide-narrow': 'minmax(0, 7fr) minmax(0, 3fr)'\n};\n\nconst verticalAlignMap = {\n top: 'start',\n center: 'center',\n bottom: 'end'\n} as const;\n\nconst horizontalAlignMap = {\n left: 'start',\n center: 'center',\n right: 'end'\n} as const;\n\nconst StyledPageTabContent = styled.div(({ theme }) => {\n return css`\n padding-block: calc(2 * ${theme.base.spacing});\n\n ${StyledContentContainer} {\n padding: 0;\n }\n `;\n});\n\nStyledPageTabContent.defaultProps = defaultThemeProp;\n\nexport const BannerPage: ForwardRefForwardPropsComponent<BannerPageProps> = forwardRef(\n function BannerPage(\n {\n banner,\n a,\n b,\n variant = 'two-column',\n utilities,\n className: classNameProp,\n ...restProps\n }: PropsWithoutRef<BannerPageProps>,\n ref: BannerPageProps['ref']\n ) {\n const className = createClassName('banner-page', classNameProp, { variant });\n const gridCols = variantMap[variant];\n const pageContent = (\n <Grid\n container={{ gap: 2 }}\n md={{ container: { cols: 'minmax(0, 1fr)' } }}\n lg={{ container: { cols: b ? `${gridCols}` : 'minmax(0, 1fr)' } }}\n as={StyledContentContainer}\n className={createClassName('banner-page-content')}\n >\n {!!a.length && <Flex container={{ direction: 'column', gap: 2 }}>{a.map(el => el)}</Flex>}\n {b && !!b.length && (\n <Flex container={{ direction: 'column', gap: 2 }}>{b.map(el => el)}</Flex>\n )}\n </Grid>\n );\n\n const pageBanner = banner && (\n <StyledBannerContainer\n backgroundImage={banner.backgroundImage}\n backgroundColor={banner.backgroundColor}\n height={banner.height}\n className={createClassName('banner-page-banner')}\n >\n <Flex\n variant={banner.variant}\n backgroundImage={banner.backgroundImage}\n backgroundColor={banner.backgroundColor}\n as={StyledBanner}\n container={{\n justify: verticalAlignMap[banner.verticalAlign ?? 'center'] ?? 'center',\n alignItems: horizontalAlignMap[banner.align ?? 'center'] ?? 'center',\n direction: 'column',\n gap: 1\n }}\n tintImage={banner.tintImage}\n align={banner.align}\n >\n <StyledContentContainer>\n <StyledBannerHeading variant='h1'>{banner.title}</StyledBannerHeading>\n {banner.message && (\n <StyledBannerMessage variant='primary' as='p'>\n {banner.message}\n </StyledBannerMessage>\n )}\n </StyledContentContainer>\n </Flex>\n </StyledBannerContainer>\n );\n\n const isMediumOrAbove = useBreakpoint('md');\n const [panel, setPanel] = useState('content');\n const pageTabsRef = useRef<HTMLElement>(null);\n const t = useI18n();\n\n const pageTabs = [\n { name: t('content'), id: 'content', content: pageContent },\n {\n name: t('chat_with_ai'),\n id: 'chat_with_ai',\n content: utilities\n }\n ];\n\n const handleTabChange = (id: string) => {\n setPanel(id);\n };\n\n if (utilities) {\n if (isMediumOrAbove) {\n return (\n <Flex\n as={StyledBannerPage}\n container={{ gap: 2 }}\n ref={ref}\n {...restProps}\n className={className}\n >\n <Flex container={{ direction: 'column' }} item={{ grow: 1 }}>\n {pageBanner}\n {pageContent}\n </Flex>\n <div>{utilities}</div>\n </Flex>\n );\n }\n\n return (\n <Flex\n container={{ direction: 'column', gap: 2 }}\n as={StyledBannerPage}\n className={className}\n >\n {pageBanner}\n <Flex container={{ direction: 'column', pad: [undefined, 2, undefined] }}>\n <Tabs\n tabs={pageTabs}\n onTabClick={handleTabChange}\n currentTabId={panel}\n ref={pageTabsRef}\n />\n {pageTabs.map(tab => (\n <TabPanel tabId={tab.id} currentTabId={panel} tablistRef={pageTabsRef} key={tab.id}>\n <StyledPageTabContent>{tab.content}</StyledPageTabContent>\n </TabPanel>\n ))}\n </Flex>\n </Flex>\n );\n }\n\n return (\n <StyledBannerPage ref={ref} {...restProps} className={className}>\n {pageBanner}\n {pageContent}\n </StyledBannerPage>\n );\n }\n);\n"]}
|
package/package.json
CHANGED
|
@@ -1,6 +1,6 @@
|
|
|
1
1
|
{
|
|
2
2
|
"name": "@pega/cosmos-react-wss",
|
|
3
|
-
"version": "9.0.0-build.29.
|
|
3
|
+
"version": "9.0.0-build.29.21",
|
|
4
4
|
"license": "SEE LICENSE IN LICENSE",
|
|
5
5
|
"author": "Pegasystems",
|
|
6
6
|
"sideEffects": false,
|
|
@@ -14,14 +14,14 @@
|
|
|
14
14
|
"build": "tsc -b tsconfig.build.json"
|
|
15
15
|
},
|
|
16
16
|
"dependencies": {
|
|
17
|
-
"@pega/cosmos-react-core": "9.0.0-build.29.
|
|
18
|
-
"@pega/cosmos-react-work": "9.0.0-build.29.
|
|
17
|
+
"@pega/cosmos-react-core": "9.0.0-build.29.21",
|
|
18
|
+
"@pega/cosmos-react-work": "9.0.0-build.29.21",
|
|
19
19
|
"@types/react": "^17.0.62 || ^18.3.3",
|
|
20
20
|
"@types/react-dom": "^17.0.20 || ^18.3.0",
|
|
21
21
|
"polished": "^4.1.0",
|
|
22
22
|
"react": "^17.0.0 || ^18.0.0",
|
|
23
23
|
"react-dom": "^17.0.0 || ^18.0.0",
|
|
24
|
-
"styled-components": "
|
|
24
|
+
"styled-components": "~6.3.11"
|
|
25
25
|
},
|
|
26
26
|
"devDependencies": {
|
|
27
27
|
"@storybook/react": "~8.2.9",
|