@pega/cosmos-react-wss 10.0.0-build.2.0 → 10.0.0-build.2.10
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/AppShell/AppShell.d.ts.map +1 -1
- package/lib/components/AppShell/AppShell.js +1 -1
- package/lib/components/AppShell/AppShell.js.map +1 -1
- package/lib/components/CaseView/CaseView.styles.d.ts.map +1 -1
- package/lib/components/CaseView/CaseView.styles.js +8 -0
- package/lib/components/CaseView/CaseView.styles.js.map +1 -1
- package/lib/components/PageTemplates/BannerPage.d.ts +15 -3
- package/lib/components/PageTemplates/BannerPage.d.ts.map +1 -1
- package/lib/components/PageTemplates/BannerPage.js +124 -18
- package/lib/components/PageTemplates/BannerPage.js.map +1 -1
- package/package.json +3 -3
|
@@ -1 +1 @@
|
|
|
1
|
-
{"version":3,"file":"AppShell.d.ts","sourceRoot":"","sources":["../../../src/components/AppShell/AppShell.tsx"],"names":[],"mappings":"AA4BA,OAAO,KAAK,EAAE,+BAA+B,EAAkB,MAAM,yBAAyB,CAAC;AAS/F,OAAO,KAAK,EAAE,aAAa,EAAE,MAAM,kBAAkB,CAAC;AAiBtD,QAAA,MAAM,QAAQ,EAAE,+BAA+B,CAAC,aAAa,
|
|
1
|
+
{"version":3,"file":"AppShell.d.ts","sourceRoot":"","sources":["../../../src/components/AppShell/AppShell.tsx"],"names":[],"mappings":"AA4BA,OAAO,KAAK,EAAE,+BAA+B,EAAkB,MAAM,yBAAyB,CAAC;AAS/F,OAAO,KAAK,EAAE,aAAa,EAAE,MAAM,kBAAkB,CAAC;AAiBtD,QAAA,MAAM,QAAQ,EAAE,+BAA+B,CAAC,aAAa,CAka3D,CAAC;AAEH,eAAe,QAAQ,CAAC"}
|
|
@@ -102,7 +102,7 @@ const AppShell = forwardRef(function AppShell(props, ref) {
|
|
|
102
102
|
}
|
|
103
103
|
}, [hasMobileNav, drawerOpen]);
|
|
104
104
|
const hasFooter = !!footer?.length;
|
|
105
|
-
return (_jsxs(_Fragment, { children: [_jsx(WSSAppShellGlobalStyle, { navPosition: navPosition, hasFooter: hasFooter }), _jsx(SkipLinks, { items: skipLinks }), _jsx(ThemeOverride, { theme: headerTheme, children: _jsxs(StyledAppHeader, { ref: headerRef, navPosition: navPosition, "$isDefaultWSS": isDefaultWSS, children: [_jsxs(Flex, { container: { alignItems: 'center', justify: 'between' }, children: [isDefaultWSS ? (_jsxs(_Fragment, { children: [contexts && onContextClick && contexts.length > 1 && (_jsx(ContextSwitcher, { contexts: contexts, onContextClick: onContextClick, label: contextSwitcherLabel, container: { justify: 'center', pad: [0, 0, 0, 1] } })), _jsxs(Flex, { as: appInfoAs, container: { alignItems: 'center', pad: [1, 4, 1, 1], gap: 1 }, href: appInfo.href, onClick: appInfo.onClick, target: appInfo.target, children: [_jsx(Image, { src: appInfo.imageSrc, alt: appInfo.appName }), !hasMobileNav && (_jsxs(Flex, { as: 'span', container: { direction: 'row', gap: 1, alignItems: 'end' }, children: [_jsx(Text, { as: appInfo.appNameHidden ? VisuallyHiddenText : StyledPrimaryName, variant: 'h1', children: appInfo.appName }), appInfo.portalName && (_jsx(Text, { variant: 'h2', as: 'span', children: appInfo.portalName }))] }))] }), !hasMobileNav && navPosition === 'inline' && (_jsx(NavLinks, { ref: setNavSectionEl, navLinks: navLinks, navAlignment: navAlignment, navPosition: navPosition, isDefaultWSS: true }))] })) : (_jsxs(Flex, { container: { alignItems: 'center' }, item: navPosition === 'inline' ? { grow: 1 } : undefined, children: [contexts && onContextClick && contexts.length > 1 && (_jsx(ContextSwitcher, { contexts: contexts, onContextClick: onContextClick, label: contextSwitcherLabel, container: { justify: 'center', pad: [0, 0, 0, 1] } })), navPosition !== 'below' && (_jsxs(Flex, { as: appInfoAs, container: { alignItems: 'center', pad: [1, 4, 1, 1], gap: 1 }, href: appInfo.href, onClick: appInfo.onClick, target: appInfo.target, children: [_jsx(Image, { src: appInfo.imageSrc, alt: appInfo.appName }), !hasMobileNav && (_jsxs(Flex, { as: 'span', container: { direction: 'row', gap: 1, alignItems: 'end' }, children: [_jsx(Text, { as: appInfo.appNameHidden ? VisuallyHiddenText : StyledPrimaryName, variant: 'h1', children: appInfo.appName }), appInfo.portalName && (_jsx(Text, { variant: 'h2', as: 'span', children: appInfo.portalName }))] }))] })), !hasMobileNav && navPosition === 'inline' && (_jsx(NavLinks, { ref: setNavSectionEl, navLinks: navLinks, navAlignment: navAlignment, navPosition: navPosition }))] })), _jsxs(Flex, { as: StyledEndNavBlock, container: { alignItems: 'center' }, mobile: hasMobileNav, children: [onThemeModeChange && (_jsx(ThemeSwitcher, { themeMode: themeMode, onThemeModeChange: onThemeModeChange })), notifications && (_jsxs(_Fragment, { children: [_jsx(Button, { ref: setNotificationsButtonEl, variant: 'simple', label: t('open_app_header_notifications'), icon: true, onClick: () => {
|
|
105
|
+
return (_jsxs(_Fragment, { children: [_jsx(WSSAppShellGlobalStyle, { navPosition: navPosition, hasFooter: hasFooter }), _jsx(SkipLinks, { items: skipLinks }), _jsx(ThemeOverride, { theme: headerTheme, children: _jsxs(StyledAppHeader, { ref: headerRef, navPosition: navPosition, "$isDefaultWSS": isDefaultWSS, children: [_jsxs(Flex, { container: { alignItems: 'center', justify: 'between' }, children: [isDefaultWSS ? (_jsxs(_Fragment, { children: [_jsxs(Flex, { container: { alignItems: 'center' }, children: [contexts && onContextClick && contexts.length > 1 && (_jsx(ContextSwitcher, { contexts: contexts, onContextClick: onContextClick, label: contextSwitcherLabel, container: { justify: 'center', pad: [0, 0, 0, 1] } })), _jsxs(Flex, { as: appInfoAs, container: { alignItems: 'center', pad: [1, 4, 1, 1], gap: 1 }, href: appInfo.href, onClick: appInfo.onClick, target: appInfo.target, children: [_jsx(Image, { src: appInfo.imageSrc, alt: appInfo.appName }), !hasMobileNav && (_jsxs(Flex, { as: 'span', container: { direction: 'row', gap: 1, alignItems: 'end' }, children: [_jsx(Text, { as: appInfo.appNameHidden ? VisuallyHiddenText : StyledPrimaryName, variant: 'h1', children: appInfo.appName }), appInfo.portalName && (_jsx(Text, { variant: 'h2', as: 'span', children: appInfo.portalName }))] }))] })] }), !hasMobileNav && navPosition === 'inline' && (_jsx(NavLinks, { ref: setNavSectionEl, navLinks: navLinks, navAlignment: navAlignment, navPosition: navPosition, isDefaultWSS: true }))] })) : (_jsxs(Flex, { container: { alignItems: 'center' }, item: navPosition === 'inline' ? { grow: 1 } : undefined, children: [contexts && onContextClick && contexts.length > 1 && (_jsx(ContextSwitcher, { contexts: contexts, onContextClick: onContextClick, label: contextSwitcherLabel, container: { justify: 'center', pad: [0, 0, 0, 1] } })), navPosition !== 'below' && (_jsxs(Flex, { as: appInfoAs, container: { alignItems: 'center', pad: [1, 4, 1, 1], gap: 1 }, href: appInfo.href, onClick: appInfo.onClick, target: appInfo.target, children: [_jsx(Image, { src: appInfo.imageSrc, alt: appInfo.appName }), !hasMobileNav && (_jsxs(Flex, { as: 'span', container: { direction: 'row', gap: 1, alignItems: 'end' }, children: [_jsx(Text, { as: appInfo.appNameHidden ? VisuallyHiddenText : StyledPrimaryName, variant: 'h1', children: appInfo.appName }), appInfo.portalName && (_jsx(Text, { variant: 'h2', as: 'span', children: appInfo.portalName }))] }))] })), !hasMobileNav && navPosition === 'inline' && (_jsx(NavLinks, { ref: setNavSectionEl, navLinks: navLinks, navAlignment: navAlignment, navPosition: navPosition }))] })), _jsxs(Flex, { as: StyledEndNavBlock, container: { alignItems: 'center' }, mobile: hasMobileNav, children: [onThemeModeChange && (_jsx(ThemeSwitcher, { themeMode: themeMode, onThemeModeChange: onThemeModeChange })), notifications && (_jsxs(_Fragment, { children: [_jsx(Button, { ref: setNotificationsButtonEl, variant: 'simple', label: t('open_app_header_notifications'), icon: true, onClick: () => {
|
|
106
106
|
if (!hasMobileNav) {
|
|
107
107
|
if (notificationsPopover) {
|
|
108
108
|
setNotificationsPopover(false);
|
|
@@ -1 +1 @@
|
|
|
1
|
-
{"version":3,"file":"AppShell.js","sourceRoot":"","sources":["../../../src/components/AppShell/AppShell.tsx"],"names":[],"mappings":"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","sourcesContent":["import { forwardRef, useEffect, useMemo, useRef, useState } from 'react';\nimport type { ElementType, PropsWithoutRef } from 'react';\n\nimport {\n Avatar,\n Backdrop,\n Button,\n ThemeOverride,\n ContextSwitcher,\n debounce,\n Drawer,\n Flex,\n Icon,\n Image,\n Popover,\n SkipLinks,\n Text,\n useBreakpoint,\n useConsolidatedRef,\n useDirection,\n useElement,\n useI18n,\n useOuterEvent,\n useTheme,\n VisuallyHiddenText,\n MenuButton,\n ThemeSwitcher\n} from '@pega/cosmos-react-core';\nimport type { ForwardRefForwardPropsComponent, SkipLinksProps } from '@pega/cosmos-react-core';\nimport Operator from '@pega/cosmos-react-core/lib/components/AppShell/Operator';\nimport { StyledAppHeaderOperator } from '@pega/cosmos-react-core/lib/components/AppShell/AppHeader.styles';\nimport BareButton from '@pega/cosmos-react-core/lib/components/Button/BareButton';\nimport { getHeaderTheme } from '@pega/cosmos-react-core/lib/components/AppShell/style-utils';\nimport useThemeMode from '@pega/cosmos-react-core/lib/hooks/useThemeMode';\n\nimport Footer from '../Footer';\n\nimport type { AppShellProps } from './AppShell.types';\nimport {\n WSSAppShellGlobalStyle,\n StyledAppHeader,\n StyledCountIcon,\n StyledHamburgerMenu,\n StyledMain,\n StyledModernAppHeaderOperator,\n StyledNotificationCount,\n StyledPrimaryName,\n StyledEndNavBlock,\n StyledBannerRegion\n} from './AppShell.styles';\nimport Notifications from './Notifications';\nimport MobileHeaderContent from './MobileHeaderContent';\nimport NavLinks from './NavLinks';\n\nconst AppShell: ForwardRefForwardPropsComponent<AppShellProps> = forwardRef(function AppShell(\n props: PropsWithoutRef<AppShellProps>,\n ref: AppShellProps['ref']\n) {\n const {\n main,\n banners,\n appInfo,\n navLinks,\n operator,\n notifications,\n contextSwitcher = {},\n navAlignment = 'end',\n navPosition = 'inline',\n isDefaultWSS = true,\n helpMenu,\n footer\n } = props;\n const t = useI18n();\n const {\n contexts,\n onContextClick,\n label: contextSwitcherLabel = t('switch_to')\n } = contextSwitcher;\n const [backdropOpen, setBackdropOpen] = useState(false);\n const [drawerOpen, setDrawerOpen] = useState(false);\n const [drawerContent, setDrawerContent] = useState('');\n const [notificationsPopover, setNotificationsPopover] = useState(false);\n const [linksCollapsed, setLinksCollapsed] = useState(false);\n const [hasMobileNav, setHasMobileNav] = useState(true);\n\n const [headerEl, setHeaderEl] = useElement<HTMLElement>();\n const [navSectionEl, setNavSectionEl] = useElement<HTMLDivElement>();\n const [popoverEl, setPopoverEl] = useElement<HTMLDivElement>();\n const [notificationsButtonEl, setNotificationsButtonEl] = useElement<HTMLButtonElement>();\n const minInlineWidth = useRef(0);\n const theme = useTheme();\n const { themeMode, onThemeModeChange } = useThemeMode();\n const headerTheme = useMemo(() => getHeaderTheme(theme), [theme]);\n\n const headerRef = useConsolidatedRef(setHeaderEl, ref);\n\n const isSmallOrAbove = useBreakpoint('sm');\n const { end } = useDirection();\n\n let appInfoAs: ElementType = 'div';\n if (appInfo.href) appInfoAs = 'a';\n else if (appInfo.onClick) appInfoAs = BareButton;\n\n const skipLinks: SkipLinksProps['items'] = useMemo(\n () => [\n {\n label: t('go_to_main_content'),\n target: { ariaLabel: t('main_content'), selector: 'main' }\n }\n ],\n [t]\n );\n\n const closeDrawer = () => {\n setDrawerContent('');\n setBackdropOpen(false);\n };\n\n const openDrawer = (content: 'notifications' | 'navigationOperator') => {\n setDrawerContent(content);\n setBackdropOpen(true);\n };\n\n useOuterEvent('mousedown', [popoverEl, notificationsButtonEl], () => {\n setNotificationsPopover(false);\n notifications?.onNotificationsClose?.();\n });\n\n const debouncedResize = debounce((entries: ResizeObserverEntry[]) => {\n if (entries[0].contentRect.width > minInlineWidth.current) {\n setLinksCollapsed(false);\n }\n }, 100);\n\n useEffect(() => {\n const resizeObserver = new ResizeObserver(debouncedResize);\n\n const intersectionObserver = new IntersectionObserver(\n entries => {\n if (\n entries[0].intersectionRatio > 0 &&\n entries[0].intersectionRatio < 1 &&\n !linksCollapsed\n ) {\n if (headerEl) minInlineWidth.current = headerEl.clientWidth + 1;\n setLinksCollapsed(true);\n } else if (navSectionEl) navSectionEl.style.visibility = 'visible';\n },\n { root: navPosition === 'below' ? null : navSectionEl, threshold: 1 }\n );\n\n if (headerEl && navSectionEl?.firstChild && navSectionEl?.lastChild) {\n intersectionObserver.observe(\n navAlignment === 'start'\n ? (navSectionEl.lastChild as Element)\n : (navSectionEl.firstChild as Element)\n );\n resizeObserver.observe(headerEl);\n }\n\n return () => {\n if (!headerEl) {\n intersectionObserver.disconnect();\n resizeObserver.disconnect();\n }\n };\n }, [headerEl, navSectionEl, navLinks]);\n\n useEffect(() => {\n setHasMobileNav(!isSmallOrAbove || linksCollapsed);\n }, [isSmallOrAbove, linksCollapsed]);\n\n useEffect(() => {\n if (!hasMobileNav && drawerOpen) {\n if (drawerContent === 'notifications' && notifications) {\n setNotificationsPopover(true);\n }\n setDrawerOpen(false);\n } else if (hasMobileNav && notificationsPopover) {\n setNotificationsPopover(false);\n openDrawer('notifications');\n }\n }, [hasMobileNav, drawerOpen]);\n\n const hasFooter = !!footer?.length;\n\n return (\n <>\n <WSSAppShellGlobalStyle navPosition={navPosition} hasFooter={hasFooter} />\n <SkipLinks items={skipLinks} />\n <ThemeOverride theme={headerTheme}>\n <StyledAppHeader ref={headerRef} navPosition={navPosition} $isDefaultWSS={isDefaultWSS}>\n <Flex container={{ alignItems: 'center', justify: 'between' }}>\n {isDefaultWSS ? (\n <>\n {contexts && onContextClick && contexts.length > 1 && (\n <ContextSwitcher\n contexts={contexts}\n onContextClick={onContextClick}\n label={contextSwitcherLabel}\n container={{ justify: 'center', pad: [0, 0, 0, 1] }}\n />\n )}\n\n <Flex\n as={appInfoAs}\n container={{ alignItems: 'center', pad: [1, 4, 1, 1], gap: 1 }}\n href={appInfo.href}\n onClick={appInfo.onClick}\n target={appInfo.target}\n >\n <Image src={appInfo.imageSrc} alt={appInfo.appName} />\n {!hasMobileNav && (\n <Flex as='span' container={{ direction: 'row', gap: 1, alignItems: 'end' }}>\n <Text\n as={appInfo.appNameHidden ? VisuallyHiddenText : StyledPrimaryName}\n variant='h1'\n >\n {appInfo.appName}\n </Text>\n {appInfo.portalName && (\n <Text variant='h2' as='span'>\n {appInfo.portalName}\n </Text>\n )}\n </Flex>\n )}\n </Flex>\n\n {!hasMobileNav && navPosition === 'inline' && (\n <NavLinks\n ref={setNavSectionEl}\n navLinks={navLinks}\n navAlignment={navAlignment}\n navPosition={navPosition}\n isDefaultWSS\n />\n )}\n </>\n ) : (\n <Flex\n container={{ alignItems: 'center' }}\n item={navPosition === 'inline' ? { grow: 1 } : undefined}\n >\n {contexts && onContextClick && contexts.length > 1 && (\n <ContextSwitcher\n contexts={contexts}\n onContextClick={onContextClick}\n label={contextSwitcherLabel}\n container={{ justify: 'center', pad: [0, 0, 0, 1] }}\n />\n )}\n\n {navPosition !== 'below' && (\n <Flex\n as={appInfoAs}\n container={{ alignItems: 'center', pad: [1, 4, 1, 1], gap: 1 }}\n href={appInfo.href}\n onClick={appInfo.onClick}\n target={appInfo.target}\n >\n <Image src={appInfo.imageSrc} alt={appInfo.appName} />\n {!hasMobileNav && (\n <Flex as='span' container={{ direction: 'row', gap: 1, alignItems: 'end' }}>\n <Text\n as={appInfo.appNameHidden ? VisuallyHiddenText : StyledPrimaryName}\n variant='h1'\n >\n {appInfo.appName}\n </Text>\n {appInfo.portalName && (\n <Text variant='h2' as='span'>\n {appInfo.portalName}\n </Text>\n )}\n </Flex>\n )}\n </Flex>\n )}\n\n {!hasMobileNav && navPosition === 'inline' && (\n <NavLinks\n ref={setNavSectionEl}\n navLinks={navLinks}\n navAlignment={navAlignment}\n navPosition={navPosition}\n />\n )}\n </Flex>\n )}\n\n <Flex as={StyledEndNavBlock} container={{ alignItems: 'center' }} mobile={hasMobileNav}>\n {onThemeModeChange && (\n <ThemeSwitcher themeMode={themeMode} onThemeModeChange={onThemeModeChange} />\n )}\n {notifications && (\n <>\n <Button\n ref={setNotificationsButtonEl}\n variant='simple'\n label={t('open_app_header_notifications')}\n icon\n onClick={() => {\n if (!hasMobileNav) {\n if (notificationsPopover) {\n setNotificationsPopover(false);\n notifications.onNotificationsClose?.();\n } else {\n setNotificationsPopover(true);\n notifications.onNotificationsOpen?.();\n }\n } else {\n openDrawer('notifications');\n }\n }}\n >\n <StyledNotificationCount>\n <Icon name='bell' />\n {!!notifications.count && (\n <StyledCountIcon variant='urgent'>{notifications.count}</StyledCountIcon>\n )}\n </StyledNotificationCount>\n </Button>\n <Popover\n ref={setPopoverEl}\n show={notificationsPopover}\n target={notificationsButtonEl}\n placement='bottom-end'\n >\n <Notifications {...notifications} popover />\n </Popover>\n </>\n )}\n {helpMenu && (\n <MenuButton\n variant='simple'\n icon='help'\n text={t('app_header_help')}\n iconOnly\n menu={{\n items: helpMenu\n }}\n />\n )}\n {!hasMobileNav && (\n <Operator\n as={isDefaultWSS ? StyledAppHeaderOperator : StyledModernAppHeaderOperator}\n actions={operator.actions}\n popover={{ placement: 'bottom-start' }}\n name={operator.avatar.name}\n >\n {isDefaultWSS ? (\n <Avatar {...operator.avatar} />\n ) : (\n <Avatar {...operator.avatar} size='s' />\n )}\n {!isDefaultWSS && operator.avatar.name && (\n <Text variant='secondary'>{t('hello_name', [operator.avatar.name])}</Text>\n )}\n </Operator>\n )}\n\n {hasMobileNav && (\n <Button\n as={StyledHamburgerMenu}\n label={t('open_app_header_drawer')}\n variant='simple'\n icon\n onClick={() => openDrawer('navigationOperator')}\n >\n <Icon name='bars' />\n </Button>\n )}\n </Flex>\n </Flex>\n\n {navPosition === 'below' &&\n !hasMobileNav &&\n (isDefaultWSS ? (\n <NavLinks\n ref={setNavSectionEl}\n navLinks={navLinks}\n navAlignment={navAlignment}\n navPosition={navPosition}\n isDefaultWSS\n />\n ) : (\n <Flex container={{ alignItems: 'center', gap: 1 }}>\n <Flex\n as={appInfoAs}\n container={{ alignItems: 'center', gap: 1 }}\n href={appInfo.href}\n onClick={appInfo.onClick}\n target={appInfo.target}\n >\n <Image src={appInfo.imageSrc} alt={appInfo.appName} />\n <Flex as='span' container={{ direction: 'row', gap: 1, alignItems: 'end' }}>\n <Text\n as={appInfo.appNameHidden ? VisuallyHiddenText : StyledPrimaryName}\n variant='h1'\n >\n {appInfo.appName}\n </Text>\n {appInfo.portalName && (\n <Text variant='h2' as='span'>\n {appInfo.portalName}\n </Text>\n )}\n </Flex>\n </Flex>\n <NavLinks\n ref={setNavSectionEl}\n navLinks={navLinks}\n navAlignment={navAlignment}\n navPosition='below'\n />\n </Flex>\n ))}\n </StyledAppHeader>\n </ThemeOverride>\n\n <StyledMain navPosition={navPosition} $isDefaultWSS={isDefaultWSS} $hasFooter={hasFooter}>\n {banners && <StyledBannerRegion>{banners}</StyledBannerRegion>}\n {main}\n </StyledMain>\n\n {footer && footer.length > 0 && <Footer links={footer} />}\n\n <Backdrop\n open={backdropOpen}\n transitionSpeed='none'\n onAfterTransitionIn={() => setDrawerOpen(true)}\n onBeforeTransitionOut={() => setDrawerOpen(false)}\n onClick={e => {\n if (e.currentTarget === e.target) setDrawerOpen(false);\n }}\n >\n <Drawer\n open={drawerOpen}\n onAfterClose={() => {\n closeDrawer();\n if (drawerContent === 'notifications') {\n notifications?.onNotificationsClose?.();\n }\n }}\n onAfterOpen={() => {\n if (drawerContent === 'notifications') {\n notifications?.onNotificationsOpen?.();\n }\n }}\n position='fixed'\n placement={end}\n size='min(26rem, calc(100vw - 5rem))'\n nullWhenClosed\n >\n {drawerContent === 'notifications' && notifications && (\n <Notifications {...notifications} onClose={() => setDrawerOpen(false)} />\n )}\n {drawerContent === 'navigationOperator' && (\n <MobileHeaderContent\n appInfo={appInfo}\n navLinks={navLinks}\n operator={operator}\n onClose={() => setDrawerOpen(false)}\n />\n )}\n </Drawer>\n </Backdrop>\n </>\n );\n});\n\nexport default AppShell;\n"]}
|
|
1
|
+
{"version":3,"file":"AppShell.js","sourceRoot":"","sources":["../../../src/components/AppShell/AppShell.tsx"],"names":[],"mappings":"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","sourcesContent":["import { forwardRef, useEffect, useMemo, useRef, useState } from 'react';\nimport type { ElementType, PropsWithoutRef } from 'react';\n\nimport {\n Avatar,\n Backdrop,\n Button,\n ThemeOverride,\n ContextSwitcher,\n debounce,\n Drawer,\n Flex,\n Icon,\n Image,\n Popover,\n SkipLinks,\n Text,\n useBreakpoint,\n useConsolidatedRef,\n useDirection,\n useElement,\n useI18n,\n useOuterEvent,\n useTheme,\n VisuallyHiddenText,\n MenuButton,\n ThemeSwitcher\n} from '@pega/cosmos-react-core';\nimport type { ForwardRefForwardPropsComponent, SkipLinksProps } from '@pega/cosmos-react-core';\nimport Operator from '@pega/cosmos-react-core/lib/components/AppShell/Operator';\nimport { StyledAppHeaderOperator } from '@pega/cosmos-react-core/lib/components/AppShell/AppHeader.styles';\nimport BareButton from '@pega/cosmos-react-core/lib/components/Button/BareButton';\nimport { getHeaderTheme } from '@pega/cosmos-react-core/lib/components/AppShell/style-utils';\nimport useThemeMode from '@pega/cosmos-react-core/lib/hooks/useThemeMode';\n\nimport Footer from '../Footer';\n\nimport type { AppShellProps } from './AppShell.types';\nimport {\n WSSAppShellGlobalStyle,\n StyledAppHeader,\n StyledCountIcon,\n StyledHamburgerMenu,\n StyledMain,\n StyledModernAppHeaderOperator,\n StyledNotificationCount,\n StyledPrimaryName,\n StyledEndNavBlock,\n StyledBannerRegion\n} from './AppShell.styles';\nimport Notifications from './Notifications';\nimport MobileHeaderContent from './MobileHeaderContent';\nimport NavLinks from './NavLinks';\n\nconst AppShell: ForwardRefForwardPropsComponent<AppShellProps> = forwardRef(function AppShell(\n props: PropsWithoutRef<AppShellProps>,\n ref: AppShellProps['ref']\n) {\n const {\n main,\n banners,\n appInfo,\n navLinks,\n operator,\n notifications,\n contextSwitcher = {},\n navAlignment = 'end',\n navPosition = 'inline',\n isDefaultWSS = true,\n helpMenu,\n footer\n } = props;\n const t = useI18n();\n const {\n contexts,\n onContextClick,\n label: contextSwitcherLabel = t('switch_to')\n } = contextSwitcher;\n const [backdropOpen, setBackdropOpen] = useState(false);\n const [drawerOpen, setDrawerOpen] = useState(false);\n const [drawerContent, setDrawerContent] = useState('');\n const [notificationsPopover, setNotificationsPopover] = useState(false);\n const [linksCollapsed, setLinksCollapsed] = useState(false);\n const [hasMobileNav, setHasMobileNav] = useState(true);\n\n const [headerEl, setHeaderEl] = useElement<HTMLElement>();\n const [navSectionEl, setNavSectionEl] = useElement<HTMLDivElement>();\n const [popoverEl, setPopoverEl] = useElement<HTMLDivElement>();\n const [notificationsButtonEl, setNotificationsButtonEl] = useElement<HTMLButtonElement>();\n const minInlineWidth = useRef(0);\n const theme = useTheme();\n const { themeMode, onThemeModeChange } = useThemeMode();\n const headerTheme = useMemo(() => getHeaderTheme(theme), [theme]);\n\n const headerRef = useConsolidatedRef(setHeaderEl, ref);\n\n const isSmallOrAbove = useBreakpoint('sm');\n const { end } = useDirection();\n\n let appInfoAs: ElementType = 'div';\n if (appInfo.href) appInfoAs = 'a';\n else if (appInfo.onClick) appInfoAs = BareButton;\n\n const skipLinks: SkipLinksProps['items'] = useMemo(\n () => [\n {\n label: t('go_to_main_content'),\n target: { ariaLabel: t('main_content'), selector: 'main' }\n }\n ],\n [t]\n );\n\n const closeDrawer = () => {\n setDrawerContent('');\n setBackdropOpen(false);\n };\n\n const openDrawer = (content: 'notifications' | 'navigationOperator') => {\n setDrawerContent(content);\n setBackdropOpen(true);\n };\n\n useOuterEvent('mousedown', [popoverEl, notificationsButtonEl], () => {\n setNotificationsPopover(false);\n notifications?.onNotificationsClose?.();\n });\n\n const debouncedResize = debounce((entries: ResizeObserverEntry[]) => {\n if (entries[0].contentRect.width > minInlineWidth.current) {\n setLinksCollapsed(false);\n }\n }, 100);\n\n useEffect(() => {\n const resizeObserver = new ResizeObserver(debouncedResize);\n\n const intersectionObserver = new IntersectionObserver(\n entries => {\n if (\n entries[0].intersectionRatio > 0 &&\n entries[0].intersectionRatio < 1 &&\n !linksCollapsed\n ) {\n if (headerEl) minInlineWidth.current = headerEl.clientWidth + 1;\n setLinksCollapsed(true);\n } else if (navSectionEl) navSectionEl.style.visibility = 'visible';\n },\n { root: navPosition === 'below' ? null : navSectionEl, threshold: 1 }\n );\n\n if (headerEl && navSectionEl?.firstChild && navSectionEl?.lastChild) {\n intersectionObserver.observe(\n navAlignment === 'start'\n ? (navSectionEl.lastChild as Element)\n : (navSectionEl.firstChild as Element)\n );\n resizeObserver.observe(headerEl);\n }\n\n return () => {\n if (!headerEl) {\n intersectionObserver.disconnect();\n resizeObserver.disconnect();\n }\n };\n }, [headerEl, navSectionEl, navLinks]);\n\n useEffect(() => {\n setHasMobileNav(!isSmallOrAbove || linksCollapsed);\n }, [isSmallOrAbove, linksCollapsed]);\n\n useEffect(() => {\n if (!hasMobileNav && drawerOpen) {\n if (drawerContent === 'notifications' && notifications) {\n setNotificationsPopover(true);\n }\n setDrawerOpen(false);\n } else if (hasMobileNav && notificationsPopover) {\n setNotificationsPopover(false);\n openDrawer('notifications');\n }\n }, [hasMobileNav, drawerOpen]);\n\n const hasFooter = !!footer?.length;\n\n return (\n <>\n <WSSAppShellGlobalStyle navPosition={navPosition} hasFooter={hasFooter} />\n <SkipLinks items={skipLinks} />\n <ThemeOverride theme={headerTheme}>\n <StyledAppHeader ref={headerRef} navPosition={navPosition} $isDefaultWSS={isDefaultWSS}>\n <Flex container={{ alignItems: 'center', justify: 'between' }}>\n {isDefaultWSS ? (\n <>\n <Flex container={{ alignItems: 'center' }}>\n {contexts && onContextClick && contexts.length > 1 && (\n <ContextSwitcher\n contexts={contexts}\n onContextClick={onContextClick}\n label={contextSwitcherLabel}\n container={{ justify: 'center', pad: [0, 0, 0, 1] }}\n />\n )}\n\n <Flex\n as={appInfoAs}\n container={{ alignItems: 'center', pad: [1, 4, 1, 1], gap: 1 }}\n href={appInfo.href}\n onClick={appInfo.onClick}\n target={appInfo.target}\n >\n <Image src={appInfo.imageSrc} alt={appInfo.appName} />\n {!hasMobileNav && (\n <Flex as='span' container={{ direction: 'row', gap: 1, alignItems: 'end' }}>\n <Text\n as={appInfo.appNameHidden ? VisuallyHiddenText : StyledPrimaryName}\n variant='h1'\n >\n {appInfo.appName}\n </Text>\n {appInfo.portalName && (\n <Text variant='h2' as='span'>\n {appInfo.portalName}\n </Text>\n )}\n </Flex>\n )}\n </Flex>\n </Flex>\n\n {!hasMobileNav && navPosition === 'inline' && (\n <NavLinks\n ref={setNavSectionEl}\n navLinks={navLinks}\n navAlignment={navAlignment}\n navPosition={navPosition}\n isDefaultWSS\n />\n )}\n </>\n ) : (\n <Flex\n container={{ alignItems: 'center' }}\n item={navPosition === 'inline' ? { grow: 1 } : undefined}\n >\n {contexts && onContextClick && contexts.length > 1 && (\n <ContextSwitcher\n contexts={contexts}\n onContextClick={onContextClick}\n label={contextSwitcherLabel}\n container={{ justify: 'center', pad: [0, 0, 0, 1] }}\n />\n )}\n\n {navPosition !== 'below' && (\n <Flex\n as={appInfoAs}\n container={{ alignItems: 'center', pad: [1, 4, 1, 1], gap: 1 }}\n href={appInfo.href}\n onClick={appInfo.onClick}\n target={appInfo.target}\n >\n <Image src={appInfo.imageSrc} alt={appInfo.appName} />\n {!hasMobileNav && (\n <Flex as='span' container={{ direction: 'row', gap: 1, alignItems: 'end' }}>\n <Text\n as={appInfo.appNameHidden ? VisuallyHiddenText : StyledPrimaryName}\n variant='h1'\n >\n {appInfo.appName}\n </Text>\n {appInfo.portalName && (\n <Text variant='h2' as='span'>\n {appInfo.portalName}\n </Text>\n )}\n </Flex>\n )}\n </Flex>\n )}\n\n {!hasMobileNav && navPosition === 'inline' && (\n <NavLinks\n ref={setNavSectionEl}\n navLinks={navLinks}\n navAlignment={navAlignment}\n navPosition={navPosition}\n />\n )}\n </Flex>\n )}\n\n <Flex as={StyledEndNavBlock} container={{ alignItems: 'center' }} mobile={hasMobileNav}>\n {onThemeModeChange && (\n <ThemeSwitcher themeMode={themeMode} onThemeModeChange={onThemeModeChange} />\n )}\n {notifications && (\n <>\n <Button\n ref={setNotificationsButtonEl}\n variant='simple'\n label={t('open_app_header_notifications')}\n icon\n onClick={() => {\n if (!hasMobileNav) {\n if (notificationsPopover) {\n setNotificationsPopover(false);\n notifications.onNotificationsClose?.();\n } else {\n setNotificationsPopover(true);\n notifications.onNotificationsOpen?.();\n }\n } else {\n openDrawer('notifications');\n }\n }}\n >\n <StyledNotificationCount>\n <Icon name='bell' />\n {!!notifications.count && (\n <StyledCountIcon variant='urgent'>{notifications.count}</StyledCountIcon>\n )}\n </StyledNotificationCount>\n </Button>\n <Popover\n ref={setPopoverEl}\n show={notificationsPopover}\n target={notificationsButtonEl}\n placement='bottom-end'\n >\n <Notifications {...notifications} popover />\n </Popover>\n </>\n )}\n {helpMenu && (\n <MenuButton\n variant='simple'\n icon='help'\n text={t('app_header_help')}\n iconOnly\n menu={{\n items: helpMenu\n }}\n />\n )}\n {!hasMobileNav && (\n <Operator\n as={isDefaultWSS ? StyledAppHeaderOperator : StyledModernAppHeaderOperator}\n actions={operator.actions}\n popover={{ placement: 'bottom-start' }}\n name={operator.avatar.name}\n >\n {isDefaultWSS ? (\n <Avatar {...operator.avatar} />\n ) : (\n <Avatar {...operator.avatar} size='s' />\n )}\n {!isDefaultWSS && operator.avatar.name && (\n <Text variant='secondary'>{t('hello_name', [operator.avatar.name])}</Text>\n )}\n </Operator>\n )}\n\n {hasMobileNav && (\n <Button\n as={StyledHamburgerMenu}\n label={t('open_app_header_drawer')}\n variant='simple'\n icon\n onClick={() => openDrawer('navigationOperator')}\n >\n <Icon name='bars' />\n </Button>\n )}\n </Flex>\n </Flex>\n\n {navPosition === 'below' &&\n !hasMobileNav &&\n (isDefaultWSS ? (\n <NavLinks\n ref={setNavSectionEl}\n navLinks={navLinks}\n navAlignment={navAlignment}\n navPosition={navPosition}\n isDefaultWSS\n />\n ) : (\n <Flex container={{ alignItems: 'center', gap: 1 }}>\n <Flex\n as={appInfoAs}\n container={{ alignItems: 'center', gap: 1 }}\n href={appInfo.href}\n onClick={appInfo.onClick}\n target={appInfo.target}\n >\n <Image src={appInfo.imageSrc} alt={appInfo.appName} />\n <Flex as='span' container={{ direction: 'row', gap: 1, alignItems: 'end' }}>\n <Text\n as={appInfo.appNameHidden ? VisuallyHiddenText : StyledPrimaryName}\n variant='h1'\n >\n {appInfo.appName}\n </Text>\n {appInfo.portalName && (\n <Text variant='h2' as='span'>\n {appInfo.portalName}\n </Text>\n )}\n </Flex>\n </Flex>\n <NavLinks\n ref={setNavSectionEl}\n navLinks={navLinks}\n navAlignment={navAlignment}\n navPosition='below'\n />\n </Flex>\n ))}\n </StyledAppHeader>\n </ThemeOverride>\n\n <StyledMain navPosition={navPosition} $isDefaultWSS={isDefaultWSS} $hasFooter={hasFooter}>\n {banners && <StyledBannerRegion>{banners}</StyledBannerRegion>}\n {main}\n </StyledMain>\n\n {footer && footer.length > 0 && <Footer links={footer} />}\n\n <Backdrop\n open={backdropOpen}\n transitionSpeed='none'\n onAfterTransitionIn={() => setDrawerOpen(true)}\n onBeforeTransitionOut={() => setDrawerOpen(false)}\n onClick={e => {\n if (e.currentTarget === e.target) setDrawerOpen(false);\n }}\n >\n <Drawer\n open={drawerOpen}\n onAfterClose={() => {\n closeDrawer();\n if (drawerContent === 'notifications') {\n notifications?.onNotificationsClose?.();\n }\n }}\n onAfterOpen={() => {\n if (drawerContent === 'notifications') {\n notifications?.onNotificationsOpen?.();\n }\n }}\n position='fixed'\n placement={end}\n size='min(26rem, calc(100vw - 5rem))'\n nullWhenClosed\n >\n {drawerContent === 'notifications' && notifications && (\n <Notifications {...notifications} onClose={() => setDrawerOpen(false)} />\n )}\n {drawerContent === 'navigationOperator' && (\n <MobileHeaderContent\n appInfo={appInfo}\n navLinks={navLinks}\n operator={operator}\n onClose={() => setDrawerOpen(false)}\n />\n )}\n </Drawer>\n </Backdrop>\n </>\n );\n});\n\nexport default AppShell;\n"]}
|
|
@@ -1 +1 @@
|
|
|
1
|
-
{"version":3,"file":"CaseView.styles.d.ts","sourceRoot":"","sources":["../../../src/components/CaseView/CaseView.styles.ts"],"names":[],"mappings":"
|
|
1
|
+
{"version":3,"file":"CaseView.styles.d.ts","sourceRoot":"","sources":["../../../src/components/CaseView/CaseView.styles.ts"],"names":[],"mappings":"AAaA,eAAO,MAAM,cAAc,6NAAe,CAAC;AAE3C,eAAO,MAAM,gBAAgB;0BAAyC,OAAO;YA2B5E,CAAC;AAIF,eAAO,MAAM,WAAW,6NAKtB,CAAC;AAIH,eAAO,MAAM,sBAAsB,6NAwBjC,CAAC;AAIH,eAAO,MAAM,aAAa,6NAaxB,CAAC"}
|
|
@@ -1,7 +1,9 @@
|
|
|
1
1
|
import styled, { css } from 'styled-components';
|
|
2
2
|
import { defaultThemeProp, StyledButton, calculateForegroundColor, StyledCard } from '@pega/cosmos-react-core';
|
|
3
3
|
import { StyledCardHeader } from '@pega/cosmos-react-core/lib/components/Card/CardHeader';
|
|
4
|
+
import { StyledTabs } from '@pega/cosmos-react-core/lib/components/Tabs/Tabs.styles';
|
|
4
5
|
import { StyledSummaryPrimaryList } from '@pega/cosmos-react-work/lib/components/CaseView/CaseView.styles';
|
|
6
|
+
import { StyledStagesWrapper } from '@pega/cosmos-react-work/lib/components/Stages/Stages.styles';
|
|
5
7
|
export const StyledCaseView = styled.div ``;
|
|
6
8
|
export const StyledCaseHeader = styled.header(({ theme, computeButtonFgColor }) => {
|
|
7
9
|
const { components: { 'case-view': { header: { background, 'foreground-color': foregroundColor } } } } = theme;
|
|
@@ -47,6 +49,12 @@ export const StyledContentContainer = styled.div(({ theme }) => {
|
|
|
47
49
|
${StyledButton} {
|
|
48
50
|
margin-inline-start: 0;
|
|
49
51
|
}
|
|
52
|
+
|
|
53
|
+
&:has(${StyledTabs}) {
|
|
54
|
+
${StyledStagesWrapper} {
|
|
55
|
+
--stages-wrapper-bottom-radius: 0;
|
|
56
|
+
}
|
|
57
|
+
}
|
|
50
58
|
`;
|
|
51
59
|
});
|
|
52
60
|
StyledContentContainer.defaultProps = defaultThemeProp;
|
|
@@ -1 +1 @@
|
|
|
1
|
-
{"version":3,"file":"CaseView.styles.js","sourceRoot":"","sources":["../../../src/components/CaseView/CaseView.styles.ts"],"names":[],"mappings":"AAAA,OAAO,MAAM,EAAE,EAAE,GAAG,EAAE,MAAM,mBAAmB,CAAC;AAEhD,OAAO,EACL,gBAAgB,EAChB,YAAY,EACZ,wBAAwB,EACxB,UAAU,EACX,MAAM,yBAAyB,CAAC;AACjC,OAAO,EAAE,gBAAgB,EAAE,MAAM,wDAAwD,CAAC;AAC1F,OAAO,EAAE,wBAAwB,EAAE,MAAM,iEAAiE,CAAC;
|
|
1
|
+
{"version":3,"file":"CaseView.styles.js","sourceRoot":"","sources":["../../../src/components/CaseView/CaseView.styles.ts"],"names":[],"mappings":"AAAA,OAAO,MAAM,EAAE,EAAE,GAAG,EAAE,MAAM,mBAAmB,CAAC;AAEhD,OAAO,EACL,gBAAgB,EAChB,YAAY,EACZ,wBAAwB,EACxB,UAAU,EACX,MAAM,yBAAyB,CAAC;AACjC,OAAO,EAAE,gBAAgB,EAAE,MAAM,wDAAwD,CAAC;AAC1F,OAAO,EAAE,UAAU,EAAE,MAAM,yDAAyD,CAAC;AACrF,OAAO,EAAE,wBAAwB,EAAE,MAAM,iEAAiE,CAAC;AAC3G,OAAO,EAAE,mBAAmB,EAAE,MAAM,6DAA6D,CAAC;AAElG,MAAM,CAAC,MAAM,cAAc,GAAG,MAAM,CAAC,GAAG,CAAA,EAAE,CAAC;AAE3C,MAAM,CAAC,MAAM,gBAAgB,GAAG,MAAM,CAAC,MAAM,CAC3C,CAAC,EAAE,KAAK,EAAE,oBAAoB,EAAE,EAAE,EAAE;IAClC,MAAM,EACJ,UAAU,EAAE,EACV,WAAW,EAAE,EACX,MAAM,EAAE,EAAE,UAAU,EAAE,kBAAkB,EAAE,eAAe,EAAE,EAC5D,EACF,EACF,GAAG,KAAK,CAAC;IACV,MAAM,KAAK,GAAG,wBAAwB,CAAC,UAAU,EAAE,eAAe,CAAC,CAAC;IAEpE,OAAO,GAAG,CAAA;;oBAEM,UAAU;;;iBAGb,KAAK;;;QAGd,oBAAoB;QACtB,GAAG,CAAA;;mBAEU,KAAK;;OAEjB;KACF,CAAC;AACJ,CAAC,CACF,CAAC;AAEF,gBAAgB,CAAC,YAAY,GAAG,gBAAgB,CAAC;AAEjD,MAAM,CAAC,MAAM,WAAW,GAAG,MAAM,CAAC,GAAG,CAAC,CAAC,EAAE,KAAK,EAAE,EAAE,EAAE;IAClD,OAAO,GAAG,CAAA;iBACK,KAAK,CAAC,IAAI,CAAC,eAAe,CAAC,CAAC,EAAE;;GAE5C,CAAC;AACJ,CAAC,CAAC,CAAC;AAEH,WAAW,CAAC,YAAY,GAAG,gBAAgB,CAAC;AAE5C,MAAM,CAAC,MAAM,sBAAsB,GAAG,MAAM,CAAC,GAAG,CAAC,CAAC,EAAE,KAAK,EAAE,EAAE,EAAE;IAC7D,OAAO,GAAG,CAAA;;;;;;mBAMO,KAAK,CAAC,IAAI,CAAC,eAAe,CAAC,CAAC,EAAE;;;;;;;MAO3C,YAAY;;;;YAIN,UAAU;QACd,mBAAmB;;;;GAIxB,CAAC;AACJ,CAAC,CAAC,CAAC;AAEH,sBAAsB,CAAC,YAAY,GAAG,gBAAgB,CAAC;AAEvD,MAAM,CAAC,MAAM,aAAa,GAAG,MAAM,CAAC,GAAG,CAAC,CAAC,EAAE,KAAK,EAAE,EAAE,EAAE;IACpD,OAAO,GAAG,CAAA;MACN,wBAAwB;;6BAED,KAAK,CAAC,IAAI,CAAC,OAAO;;MAEzC,KAAK,CAAC,UAAU,CAAC,IAAI,CAAC,QAAQ;QAChC,GAAG,CAAA;WACI,UAAU,MAAM,gBAAgB;;;KAGtC;GACF,CAAC;AACJ,CAAC,CAAC,CAAC;AAEH,aAAa,CAAC,YAAY,GAAG,gBAAgB,CAAC","sourcesContent":["import styled, { css } from 'styled-components';\n\nimport {\n defaultThemeProp,\n StyledButton,\n calculateForegroundColor,\n StyledCard\n} from '@pega/cosmos-react-core';\nimport { StyledCardHeader } from '@pega/cosmos-react-core/lib/components/Card/CardHeader';\nimport { StyledTabs } from '@pega/cosmos-react-core/lib/components/Tabs/Tabs.styles';\nimport { StyledSummaryPrimaryList } from '@pega/cosmos-react-work/lib/components/CaseView/CaseView.styles';\nimport { StyledStagesWrapper } from '@pega/cosmos-react-work/lib/components/Stages/Stages.styles';\n\nexport const StyledCaseView = styled.div``;\n\nexport const StyledCaseHeader = styled.header<{ computeButtonFgColor: boolean }>(\n ({ theme, computeButtonFgColor }) => {\n const {\n components: {\n 'case-view': {\n header: { background, 'foreground-color': foregroundColor }\n }\n }\n } = theme;\n const color = calculateForegroundColor(background, foregroundColor);\n\n return css`\n position: relative;\n background: ${background};\n\n h1 {\n color: ${color};\n }\n\n ${computeButtonFgColor &&\n css`\n button {\n color: ${color};\n }\n `}\n `;\n }\n);\n\nStyledCaseHeader.defaultProps = defaultThemeProp;\n\nexport const StyledAside = styled.div(({ theme }) => {\n return css`\n min-width: ${theme.base['content-width'].sm};\n max-width: 40%;\n `;\n});\n\nStyledAside.defaultProps = defaultThemeProp;\n\nexport const StyledContentContainer = styled.div(({ theme }) => {\n return css`\n width: 100%;\n max-width: 75rem;\n margin-inline: auto;\n\n h1 {\n min-width: ${theme.base['content-width'].xs};\n }\n\n & > div {\n width: 100%;\n }\n\n ${StyledButton} {\n margin-inline-start: 0;\n }\n\n &:has(${StyledTabs}) {\n ${StyledStagesWrapper} {\n --stages-wrapper-bottom-radius: 0;\n }\n }\n `;\n});\n\nStyledContentContainer.defaultProps = defaultThemeProp;\n\nexport const StyledContent = styled.div(({ theme }) => {\n return css`\n ${StyledSummaryPrimaryList} {\n grid-template-columns: auto 1fr;\n column-gap: calc(2 * ${theme.base.spacing});\n }\n ${theme.components.tabs.detached &&\n css`\n && ${StyledCard} > ${StyledCardHeader} {\n padding-inline: 0;\n }\n `}\n `;\n});\n\nStyledContent.defaultProps = defaultThemeProp;\n"]}
|
|
@@ -4,7 +4,7 @@ export interface BannerOptions {
|
|
|
4
4
|
/** An image url for the banner */
|
|
5
5
|
backgroundImage?: string;
|
|
6
6
|
/** A title for the banner */
|
|
7
|
-
title
|
|
7
|
+
title?: string;
|
|
8
8
|
/** A fallback background color if the background image is not provided */
|
|
9
9
|
backgroundColor?: string;
|
|
10
10
|
/** Text that will appear below the title */
|
|
@@ -19,12 +19,17 @@ export interface BannerOptions {
|
|
|
19
19
|
*/
|
|
20
20
|
tintImage?: boolean;
|
|
21
21
|
/** Controls how the banner fills vertical space.
|
|
22
|
-
* - 'fixed':
|
|
22
|
+
* - 'fixed': percentage-based height configured in authoring
|
|
23
23
|
* - 'content': shrinks to fit content
|
|
24
24
|
* - 'full': fills the visible viewport below the app shell
|
|
25
25
|
* @default 'fixed'
|
|
26
26
|
*/
|
|
27
27
|
height?: 'content' | 'fixed' | 'full';
|
|
28
|
+
/** Banner height as a percentage of the viewport (1-100, in dvh units) when height is 'fixed'.
|
|
29
|
+
* Falls back to 25 if invalid.
|
|
30
|
+
* @default 25
|
|
31
|
+
*/
|
|
32
|
+
heightValue?: number;
|
|
28
33
|
/** Horizontal alignment of the banner text content.
|
|
29
34
|
* @default 'center'
|
|
30
35
|
*/
|
|
@@ -40,10 +45,14 @@ export interface BannerOptions {
|
|
|
40
45
|
}
|
|
41
46
|
export interface BannerPageProps extends BaseProps {
|
|
42
47
|
banner: BannerOptions;
|
|
48
|
+
/** Title for the page, rendered invisibly as h1 if banner title is not provided. */
|
|
49
|
+
title: string;
|
|
43
50
|
/** Content for the first column */
|
|
44
51
|
a: ReactNode[];
|
|
45
52
|
/** Content for the second column. If not provided the first column will stretch. */
|
|
46
53
|
b?: ReactNode[];
|
|
54
|
+
/** Widget content rendered within the banner region, below the heading and message. */
|
|
55
|
+
bannerRegion?: ReactNode[];
|
|
47
56
|
ref?: Ref<HTMLDivElement>;
|
|
48
57
|
/** Variants for the sizing of the content columns. Two column will make the columns equal in size. */
|
|
49
58
|
variant?: 'two-column' | 'narrow-wide' | 'wide-narrow';
|
|
@@ -51,7 +60,10 @@ export interface BannerPageProps extends BaseProps {
|
|
|
51
60
|
utilities?: ReactNode;
|
|
52
61
|
}
|
|
53
62
|
export declare const StyledBannerPage: import("styled-components/dist/types").IStyledComponentBase<"web", import("styled-components").FastOmit<import("react").DetailedHTMLProps<import("react").HTMLAttributes<HTMLDivElement>, HTMLDivElement>, never>> & string;
|
|
54
|
-
export declare const StyledBannerContainer: import("styled-components/dist/types").IStyledComponentBase<"web", import("styled-components/dist/types").Substitute<import("react").DetailedHTMLProps<import("react").HTMLAttributes<HTMLDivElement>, HTMLDivElement>, Pick<BannerOptions, "backgroundColor" | "backgroundImage" | "height"
|
|
63
|
+
export declare const StyledBannerContainer: import("styled-components/dist/types").IStyledComponentBase<"web", import("styled-components/dist/types").Substitute<import("react").DetailedHTMLProps<import("react").HTMLAttributes<HTMLDivElement>, HTMLDivElement>, Pick<BannerOptions, "backgroundColor" | "backgroundImage" | "height"> & {
|
|
64
|
+
$hasContent?: boolean;
|
|
65
|
+
$heightValue?: number;
|
|
66
|
+
}>> & string;
|
|
55
67
|
export declare const StyledBanner: import("styled-components/dist/types").IStyledComponentBase<"web", import("styled-components/dist/types").Substitute<import("react").DetailedHTMLProps<import("react").HTMLAttributes<HTMLDivElement>, HTMLDivElement>, Pick<BannerOptions, "backgroundColor" | "backgroundImage" | "align" | "variant" | "tintImage" | "enableContentOverlap">>> & string;
|
|
56
68
|
export declare const StyledContentContainer: import("styled-components/dist/types").IStyledComponentBase<"web", import("styled-components").FastOmit<import("react").DetailedHTMLProps<import("react").HTMLAttributes<HTMLDivElement>, HTMLDivElement>, never>> & string;
|
|
57
69
|
export declare const StyledBannerHeading: import("styled-components/dist/types").IStyledComponentBase<"web", import("styled-components").FastOmit<Omit<Omit<import("@pega/cosmos-react-core").TextProps, "ref"> & import("react").RefAttributes<HTMLHeadingElement | HTMLSpanElement> & import("@pega/cosmos-react-core").ForwardProps, "ref"> & {
|
|
@@ -1 +1 @@
|
|
|
1
|
-
{"version":3,"file":"BannerPage.d.ts","sourceRoot":"","sources":["../../../src/components/PageTemplates/BannerPage.tsx"],"names":[],"mappings":"AAEA,OAAO,KAAK,EAAmB,SAAS,EAAE,GAAG,EAAE,MAAM,OAAO,CAAC;
|
|
1
|
+
{"version":3,"file":"BannerPage.d.ts","sourceRoot":"","sources":["../../../src/components/PageTemplates/BannerPage.tsx"],"names":[],"mappings":"AAEA,OAAO,KAAK,EAAmB,SAAS,EAAE,GAAG,EAAE,MAAM,OAAO,CAAC;AAoB7D,OAAO,KAAK,EAAE,SAAS,EAAE,+BAA+B,EAAE,MAAM,yBAAyB,CAAC;AAE1F,MAAM,WAAW,aAAa;IAC5B,kCAAkC;IAClC,eAAe,CAAC,EAAE,MAAM,CAAC;IACzB,6BAA6B;IAC7B,KAAK,CAAC,EAAE,MAAM,CAAC;IACf,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;IACpB;;;;;OAKG;IACH,MAAM,CAAC,EAAE,SAAS,GAAG,OAAO,GAAG,MAAM,CAAC;IACtC;;;OAGG;IACH,WAAW,CAAC,EAAE,MAAM,CAAC;IACrB;;OAEG;IACH,KAAK,CAAC,EAAE,MAAM,GAAG,QAAQ,GAAG,OAAO,CAAC;IACpC;;OAEG;IACH,aAAa,CAAC,EAAE,KAAK,GAAG,QAAQ,GAAG,QAAQ,CAAC;IAC5C;;OAEG;IACH,oBAAoB,CAAC,EAAE,OAAO,CAAC;CAChC;AAED,MAAM,WAAW,eAAgB,SAAQ,SAAS;IAChD,MAAM,EAAE,aAAa,CAAC;IACtB,oFAAoF;IACpF,KAAK,EAAE,MAAM,CAAC;IACd,mCAAmC;IACnC,CAAC,EAAE,SAAS,EAAE,CAAC;IACf,oFAAoF;IACpF,CAAC,CAAC,EAAE,SAAS,EAAE,CAAC;IAChB,uFAAuF;IACvF,YAAY,CAAC,EAAE,SAAS,EAAE,CAAC;IAC3B,GAAG,CAAC,EAAE,GAAG,CAAC,cAAc,CAAC,CAAC;IAC1B,sGAAsG;IACtG,OAAO,CAAC,EAAE,YAAY,GAAG,aAAa,GAAG,aAAa,CAAC;IACvD,mCAAmC;IACnC,SAAS,CAAC,EAAE,SAAS,CAAC;CACvB;AAiBD,eAAO,MAAM,gBAAgB,6NAK3B,CAAC;AAIH,eAAO,MAAM,qBAAqB;kBAEhB,OAAO;mBACN,MAAM;YA+EvB,CAAC;AAIH,eAAO,MAAM,YAAY,4VA+CxB,CAAC;AAIF,eAAO,MAAM,sBAAsB,6NAoBlC,CAAC;AAIF,eAAO,MAAM,mBAAmB;;uJAS/B,CAAC;AAIF,eAAO,MAAM,mBAAmB;;uJAQ/B,CAAC;AAIF,eAAO,MAAM,wBAAwB;2BAAuC,OAAO;YAQlF,CAAC;AAsCF,eAAO,MAAM,UAAU,EAAE,+BAA+B,CAAC,eAAe,CAgOvE,CAAC"}
|
|
@@ -2,8 +2,17 @@ import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
|
|
|
2
2
|
import { transparentize } from 'polished';
|
|
3
3
|
import { forwardRef, useState, useRef } from 'react';
|
|
4
4
|
import styled, { css } from 'styled-components';
|
|
5
|
-
import { defaultThemeProp, Flex, Grid, Text, tryCatch, readableColor, useBreakpoint, useI18n, Tabs, TabPanel, createClassName } from '@pega/cosmos-react-core';
|
|
6
|
-
const BANNER_OVERLAP_MULTIPLIER =
|
|
5
|
+
import { defaultThemeProp, Flex, Grid, Text, tryCatch, readableColor, useBreakpoint, useI18n, Tabs, TabPanel, createClassName, VisuallyHiddenText, useTheme, readableHue, ThemeOverride } from '@pega/cosmos-react-core';
|
|
6
|
+
const BANNER_OVERLAP_MULTIPLIER = 8;
|
|
7
|
+
const DEFAULT_FIXED_HEIGHT_DVH = 25;
|
|
8
|
+
const CONTENT_PADDING_MULTIPLIER = 2.5;
|
|
9
|
+
// Clamp a 1-100 banner height (in dvh units) to a valid CSS dvh string, falling back to the default.
|
|
10
|
+
const getFixedHeightDvh = (value) => {
|
|
11
|
+
const clamped = value !== undefined && Number.isFinite(value)
|
|
12
|
+
? Math.min(100, Math.max(1, value))
|
|
13
|
+
: DEFAULT_FIXED_HEIGHT_DVH;
|
|
14
|
+
return `${clamped}dvh`;
|
|
15
|
+
};
|
|
7
16
|
export const StyledBannerPage = styled.div(({ theme }) => {
|
|
8
17
|
return css `
|
|
9
18
|
min-height: calc(100vh - var(--appshell-top-offset, 0rem));
|
|
@@ -11,20 +20,14 @@ export const StyledBannerPage = styled.div(({ theme }) => {
|
|
|
11
20
|
`;
|
|
12
21
|
});
|
|
13
22
|
StyledBannerPage.defaultProps = defaultThemeProp;
|
|
14
|
-
export const StyledBannerContainer = styled.div(({ backgroundImage, backgroundColor, height = 'fixed',
|
|
23
|
+
export const StyledBannerContainer = styled.div(({ theme, backgroundImage, backgroundColor, height = 'fixed', $hasContent, $heightValue }) => {
|
|
24
|
+
const fixedHeight = getFixedHeightDvh($heightValue);
|
|
15
25
|
const heightValue = {
|
|
16
26
|
content: 'auto',
|
|
17
|
-
fixed:
|
|
27
|
+
fixed: fixedHeight,
|
|
18
28
|
full: 'calc(100dvh - var(--appshell-top-offset, 0rem))'
|
|
19
29
|
}[height];
|
|
20
|
-
|
|
21
|
-
width: 100%;
|
|
22
|
-
height: ${heightValue};
|
|
23
|
-
${height !== 'content' &&
|
|
24
|
-
css `
|
|
25
|
-
overflow: hidden;
|
|
26
|
-
`}
|
|
27
|
-
|
|
30
|
+
const backgroundStyles = css `
|
|
28
31
|
${backgroundImage &&
|
|
29
32
|
css `
|
|
30
33
|
background-image: url('${backgroundImage}');
|
|
@@ -38,6 +41,60 @@ export const StyledBannerContainer = styled.div(({ backgroundImage, backgroundCo
|
|
|
38
41
|
background-color: ${backgroundColor};
|
|
39
42
|
`}
|
|
40
43
|
`;
|
|
44
|
+
const fixedHeightBannerWithContent = height === 'fixed' && $hasContent;
|
|
45
|
+
let layoutStyles;
|
|
46
|
+
if (fixedHeightBannerWithContent) {
|
|
47
|
+
layoutStyles = css `
|
|
48
|
+
min-height: ${fixedHeight};
|
|
49
|
+
position: relative;
|
|
50
|
+
display: flex;
|
|
51
|
+
flex-direction: column;
|
|
52
|
+
|
|
53
|
+
&::before {
|
|
54
|
+
content: '';
|
|
55
|
+
position: absolute;
|
|
56
|
+
inset-block-start: 0;
|
|
57
|
+
inset-inline: 0;
|
|
58
|
+
height: ${fixedHeight};
|
|
59
|
+
z-index: 0;
|
|
60
|
+
${backgroundStyles}
|
|
61
|
+
}
|
|
62
|
+
|
|
63
|
+
> * {
|
|
64
|
+
position: relative;
|
|
65
|
+
flex: 1;
|
|
66
|
+
}
|
|
67
|
+
`;
|
|
68
|
+
}
|
|
69
|
+
else if ($hasContent) {
|
|
70
|
+
layoutStyles = css `
|
|
71
|
+
${height === 'full' &&
|
|
72
|
+
css `
|
|
73
|
+
min-height: ${heightValue};
|
|
74
|
+
`}
|
|
75
|
+
display: flex;
|
|
76
|
+
flex-direction: column;
|
|
77
|
+
|
|
78
|
+
> * {
|
|
79
|
+
flex: 1;
|
|
80
|
+
}
|
|
81
|
+
${backgroundStyles}
|
|
82
|
+
`;
|
|
83
|
+
}
|
|
84
|
+
else {
|
|
85
|
+
layoutStyles = css `
|
|
86
|
+
height: ${heightValue};
|
|
87
|
+
${backgroundStyles}
|
|
88
|
+
`;
|
|
89
|
+
}
|
|
90
|
+
return css `
|
|
91
|
+
width: 100%;
|
|
92
|
+
${layoutStyles}
|
|
93
|
+
--content-height-in-agent: calc(
|
|
94
|
+
100dvh - var(--appshell-top-offset, 0rem) - calc(${theme.base
|
|
95
|
+
.spacing} * ${CONTENT_PADDING_MULTIPLIER})
|
|
96
|
+
);
|
|
97
|
+
`;
|
|
41
98
|
});
|
|
42
99
|
StyledBannerContainer.defaultProps = defaultThemeProp;
|
|
43
100
|
export const StyledBanner = styled.div(({ variant = 'light', backgroundColor, backgroundImage, tintImage = false, align = 'center', enableContentOverlap, theme: { base: { palette: { light, dark }, spacing } } }) => {
|
|
@@ -72,11 +129,11 @@ export const StyledContentContainer = styled.div(({ theme: { base: { breakpoints
|
|
|
72
129
|
margin: 0 auto;
|
|
73
130
|
|
|
74
131
|
@media screen and (min-width: ${breakpoints.md}) {
|
|
75
|
-
width:
|
|
76
|
-
padding: calc(${spacing} *
|
|
132
|
+
width: 85%;
|
|
133
|
+
padding: calc(${spacing} * ${CONTENT_PADDING_MULTIPLIER});
|
|
77
134
|
}
|
|
78
135
|
@media screen and (min-width: ${breakpoints.lg}) {
|
|
79
|
-
max-width:
|
|
136
|
+
max-width: 80rem;
|
|
80
137
|
}
|
|
81
138
|
`;
|
|
82
139
|
});
|
|
@@ -113,6 +170,9 @@ const horizontalAlignMap = {
|
|
|
113
170
|
center: 'center',
|
|
114
171
|
right: 'end'
|
|
115
172
|
};
|
|
173
|
+
const StyledBannerContentArea = styled.div `
|
|
174
|
+
text-align: start;
|
|
175
|
+
`;
|
|
116
176
|
const StyledPageTabContent = styled.div(({ theme }) => {
|
|
117
177
|
return css `
|
|
118
178
|
padding-block: calc(2 * ${theme.base.spacing});
|
|
@@ -123,7 +183,7 @@ const StyledPageTabContent = styled.div(({ theme }) => {
|
|
|
123
183
|
`;
|
|
124
184
|
});
|
|
125
185
|
StyledPageTabContent.defaultProps = defaultThemeProp;
|
|
126
|
-
export const BannerPage = forwardRef(function BannerPage({ banner, a, b, variant = 'two-column', utilities, className: classNameProp, ...restProps }, ref) {
|
|
186
|
+
export const BannerPage = forwardRef(function BannerPage({ banner, title, a, b, bannerRegion, variant = 'two-column', utilities, className: classNameProp, ...restProps }, ref) {
|
|
127
187
|
const t = useI18n();
|
|
128
188
|
const isMediumOrAbove = useBreakpoint('md');
|
|
129
189
|
const [panel, setPanel] = useState('content');
|
|
@@ -131,13 +191,59 @@ export const BannerPage = forwardRef(function BannerPage({ banner, a, b, variant
|
|
|
131
191
|
const className = createClassName('banner-page', classNameProp, { variant });
|
|
132
192
|
const gridCols = variantMap[variant];
|
|
133
193
|
const effectiveOverlap = !!banner.enableContentOverlap && banner.height !== 'full';
|
|
194
|
+
const hasBannerRegionContent = !!bannerRegion?.length;
|
|
195
|
+
const theme = useTheme();
|
|
196
|
+
const { light: paletteLight, dark: paletteDark } = theme.base.palette;
|
|
197
|
+
const isDarkBanner = (banner.variant ?? 'light') === 'dark';
|
|
198
|
+
const bgColor = banner.backgroundColor;
|
|
199
|
+
let effectiveBackground;
|
|
200
|
+
if (bgColor && bgColor.trim() !== '') {
|
|
201
|
+
effectiveBackground = bgColor;
|
|
202
|
+
}
|
|
203
|
+
else {
|
|
204
|
+
effectiveBackground = isDarkBanner ? paletteDark : paletteLight;
|
|
205
|
+
}
|
|
206
|
+
const effectiveForeground = tryCatch(() => readableColor(effectiveBackground)) ?? paletteDark;
|
|
207
|
+
const secondaryBackground = tryCatch(() => transparentize(0.7, readableColor(effectiveForeground)));
|
|
134
208
|
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) }))] }));
|
|
135
|
-
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: {
|
|
209
|
+
const pageBanner = banner && (_jsx(StyledBannerContainer, { backgroundImage: banner.backgroundImage, backgroundColor: banner.backgroundColor, height: banner.height, "$hasContent": hasBannerRegionContent, "$heightValue": banner.heightValue, className: createClassName('banner-page-banner'), children: _jsx(Flex, { variant: banner.variant, backgroundImage: banner.backgroundImage, backgroundColor: banner.backgroundColor, as: StyledBanner, container: {
|
|
136
210
|
justify: verticalAlignMap[banner.verticalAlign ?? 'center'] ?? 'center',
|
|
137
211
|
alignItems: horizontalAlignMap[banner.align ?? 'center'] ?? 'center',
|
|
138
212
|
direction: 'column',
|
|
139
213
|
gap: 1
|
|
140
|
-
}, tintImage: banner.tintImage, align: banner.align, enableContentOverlap: effectiveOverlap, children: _jsxs(StyledContentContainer, { children: [_jsx(StyledBannerHeading, { variant: 'h1', children: banner.title }), banner.message && (_jsx(StyledBannerMessage, { variant: 'primary', as: 'p', children: banner.message }))
|
|
214
|
+
}, tintImage: banner.tintImage, align: banner.align, enableContentOverlap: effectiveOverlap, children: _jsxs(StyledContentContainer, { children: [banner.title && _jsx(StyledBannerHeading, { variant: 'h1', children: banner.title }), !banner.title && (_jsx(Text, { variant: 'h1', children: _jsx(VisuallyHiddenText, { children: title }) })), banner.message && (_jsx(StyledBannerMessage, { variant: 'primary', as: 'p', children: banner.message })), _jsx(ThemeOverride, { theme: {
|
|
215
|
+
components: {
|
|
216
|
+
agent: {
|
|
217
|
+
background: 'transparent',
|
|
218
|
+
'foreground-color': effectiveForeground,
|
|
219
|
+
'user-message': {
|
|
220
|
+
background: secondaryBackground,
|
|
221
|
+
'foreground-color': effectiveForeground
|
|
222
|
+
},
|
|
223
|
+
history: {
|
|
224
|
+
background: secondaryBackground,
|
|
225
|
+
'foreground-color': effectiveForeground,
|
|
226
|
+
item: {
|
|
227
|
+
'selected-background': transparentize(0.7, theme.base.palette.interactive)
|
|
228
|
+
}
|
|
229
|
+
},
|
|
230
|
+
'coach-message': {
|
|
231
|
+
avatar: {
|
|
232
|
+
background: `linear-gradient(135deg, ${theme.base.palette.ai} 0%, ${theme.base.palette.interactive} 100%)`,
|
|
233
|
+
'foreground-color': effectiveForeground
|
|
234
|
+
}
|
|
235
|
+
},
|
|
236
|
+
questionnaire: {
|
|
237
|
+
background: theme.base.palette['primary-background'],
|
|
238
|
+
'foreground-color': 'auto'
|
|
239
|
+
},
|
|
240
|
+
ai: readableHue(theme.base.palette.ai, effectiveBackground)
|
|
241
|
+
},
|
|
242
|
+
link: {
|
|
243
|
+
color: readableHue(theme.base.palette.interactive, effectiveBackground)
|
|
244
|
+
}
|
|
245
|
+
}
|
|
246
|
+
}, children: hasBannerRegionContent && (_jsx(Flex, { as: StyledBannerContentArea, container: { direction: 'column', gap: 2, pad: [1, 0, 0, 0] }, className: createClassName('banner-page-banner-content'), children: bannerRegion.map(el => el) })) })] }) }) }));
|
|
141
247
|
const pageTabs = [
|
|
142
248
|
{ name: t('content'), id: 'content', content: pageContent },
|
|
143
249
|
{
|
|
@@ -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 /** When true and height is 'fixed' or 'content', page content overlaps the bottom of the banner.\n * Has no effect when height is 'full'.\n */\n enableContentOverlap?: boolean;\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\nconst BANNER_OVERLAP_MULTIPLIER = 12;\n\nexport const StyledBannerPage = styled.div(({ theme }) => {\n return css`\n min-height: calc(100vh - var(--appshell-top-offset, 0rem));\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-top-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<\n BannerOptions,\n | 'variant'\n | 'backgroundColor'\n | 'backgroundImage'\n | 'tintImage'\n | 'align'\n | 'enableContentOverlap'\n >\n>(\n ({\n variant = 'light',\n backgroundColor,\n backgroundImage,\n tintImage = false,\n align = 'center',\n enableContentOverlap,\n theme: {\n base: {\n palette: { light, dark },\n spacing\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 ${enableContentOverlap &&\n css`\n padding-block-end: calc(${spacing} * ${BANNER_OVERLAP_MULTIPLIER});\n `}\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\nexport const StyledPageContentWrapper = styled.div<{ enableContentOverlap?: boolean }>(\n ({ theme, enableContentOverlap }) => css`\n ${enableContentOverlap &&\n css`\n margin-block-start: calc(${theme.base.spacing} * -${BANNER_OVERLAP_MULTIPLIER});\n position: relative;\n `}\n `\n);\n\nStyledPageContentWrapper.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 t = useI18n();\n const isMediumOrAbove = useBreakpoint('md');\n\n const [panel, setPanel] = useState('content');\n const pageTabsRef = useRef<HTMLElement>(null);\n\n const className = createClassName('banner-page', classNameProp, { variant });\n const gridCols = variantMap[variant];\n\n const effectiveOverlap = !!banner.enableContentOverlap && banner.height !== 'full';\n\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 enableContentOverlap={effectiveOverlap}\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 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 <StyledPageContentWrapper\n enableContentOverlap={effectiveOverlap}\n className={createClassName('banner-page-content-wrapper')}\n >\n {pageContent}\n </StyledPageContentWrapper>\n </Flex>\n <div>{utilities}</div>\n </Flex>\n );\n }\n\n return (\n <Flex\n container={{ direction: 'column', gap: effectiveOverlap ? 0 : 2 }}\n as={StyledBannerPage}\n className={className}\n >\n {pageBanner}\n <StyledPageContentWrapper\n enableContentOverlap={effectiveOverlap}\n className={createClassName('banner-page-content-wrapper')}\n >\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 </StyledPageContentWrapper>\n </Flex>\n );\n }\n\n return (\n <StyledBannerPage ref={ref} {...restProps} className={className}>\n {pageBanner}\n <StyledPageContentWrapper\n enableContentOverlap={effectiveOverlap}\n className={createClassName('banner-page-content-wrapper')}\n >\n {pageContent}\n </StyledPageContentWrapper>\n </StyledBannerPage>\n );\n }\n);\n"]}
|
|
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 VisuallyHiddenText,\n useTheme,\n readableHue,\n ThemeOverride\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': percentage-based height configured in authoring\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 /** Banner height as a percentage of the viewport (1-100, in dvh units) when height is 'fixed'.\n * Falls back to 25 if invalid.\n * @default 25\n */\n heightValue?: number;\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 /** When true and height is 'fixed' or 'content', page content overlaps the bottom of the banner.\n * Has no effect when height is 'full'.\n */\n enableContentOverlap?: boolean;\n}\n\nexport interface BannerPageProps extends BaseProps {\n banner: BannerOptions;\n /** Title for the page, rendered invisibly as h1 if banner title is not provided. */\n title: string;\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 /** Widget content rendered within the banner region, below the heading and message. */\n bannerRegion?: 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\nconst BANNER_OVERLAP_MULTIPLIER = 8;\n\nconst DEFAULT_FIXED_HEIGHT_DVH = 25;\n\nconst CONTENT_PADDING_MULTIPLIER = 2.5;\n\n// Clamp a 1-100 banner height (in dvh units) to a valid CSS dvh string, falling back to the default.\nconst getFixedHeightDvh = (value: number | undefined): string => {\n const clamped =\n value !== undefined && Number.isFinite(value)\n ? Math.min(100, Math.max(1, value))\n : DEFAULT_FIXED_HEIGHT_DVH;\n return `${clamped}dvh`;\n};\n\nexport const StyledBannerPage = styled.div(({ theme }) => {\n return css`\n min-height: calc(100vh - var(--appshell-top-offset, 0rem));\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 $hasContent?: boolean;\n $heightValue?: number;\n }\n>(({ theme, backgroundImage, backgroundColor, height = 'fixed', $hasContent, $heightValue }) => {\n const fixedHeight = getFixedHeightDvh($heightValue);\n const heightValue = {\n content: 'auto',\n fixed: fixedHeight,\n full: 'calc(100dvh - var(--appshell-top-offset, 0rem))'\n }[height];\n\n const backgroundStyles = css`\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 const fixedHeightBannerWithContent = height === 'fixed' && $hasContent;\n\n let layoutStyles;\n if (fixedHeightBannerWithContent) {\n layoutStyles = css`\n min-height: ${fixedHeight};\n position: relative;\n display: flex;\n flex-direction: column;\n\n &::before {\n content: '';\n position: absolute;\n inset-block-start: 0;\n inset-inline: 0;\n height: ${fixedHeight};\n z-index: 0;\n ${backgroundStyles}\n }\n\n > * {\n position: relative;\n flex: 1;\n }\n `;\n } else if ($hasContent) {\n layoutStyles = css`\n ${height === 'full' &&\n css`\n min-height: ${heightValue};\n `}\n display: flex;\n flex-direction: column;\n\n > * {\n flex: 1;\n }\n ${backgroundStyles}\n `;\n } else {\n layoutStyles = css`\n height: ${heightValue};\n ${backgroundStyles}\n `;\n }\n\n return css`\n width: 100%;\n ${layoutStyles}\n --content-height-in-agent: calc(\n 100dvh - var(--appshell-top-offset, 0rem) - calc(${theme.base\n .spacing} * ${CONTENT_PADDING_MULTIPLIER})\n );\n `;\n});\n\nStyledBannerContainer.defaultProps = defaultThemeProp;\n\nexport const StyledBanner = styled.div<\n Pick<\n BannerOptions,\n | 'variant'\n | 'backgroundColor'\n | 'backgroundImage'\n | 'tintImage'\n | 'align'\n | 'enableContentOverlap'\n >\n>(\n ({\n variant = 'light',\n backgroundColor,\n backgroundImage,\n tintImage = false,\n align = 'center',\n enableContentOverlap,\n theme: {\n base: {\n palette: { light, dark },\n spacing\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 ${enableContentOverlap &&\n css`\n padding-block-end: calc(${spacing} * ${BANNER_OVERLAP_MULTIPLIER});\n `}\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: 85%;\n padding: calc(${spacing} * ${CONTENT_PADDING_MULTIPLIER});\n }\n @media screen and (min-width: ${breakpoints.lg}) {\n max-width: 80rem;\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\nexport const StyledPageContentWrapper = styled.div<{ enableContentOverlap?: boolean }>(\n ({ theme, enableContentOverlap }) => css`\n ${enableContentOverlap &&\n css`\n margin-block-start: calc(${theme.base.spacing} * -${BANNER_OVERLAP_MULTIPLIER});\n position: relative;\n `}\n `\n);\n\nStyledPageContentWrapper.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 StyledBannerContentArea = styled.div`\n text-align: start;\n`;\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 title,\n a,\n b,\n bannerRegion,\n variant = 'two-column',\n utilities,\n className: classNameProp,\n ...restProps\n }: PropsWithoutRef<BannerPageProps>,\n ref: BannerPageProps['ref']\n ) {\n const t = useI18n();\n const isMediumOrAbove = useBreakpoint('md');\n\n const [panel, setPanel] = useState('content');\n const pageTabsRef = useRef<HTMLElement>(null);\n\n const className = createClassName('banner-page', classNameProp, { variant });\n const gridCols = variantMap[variant];\n\n const effectiveOverlap = !!banner.enableContentOverlap && banner.height !== 'full';\n const hasBannerRegionContent = !!bannerRegion?.length;\n\n const theme = useTheme();\n const { light: paletteLight, dark: paletteDark } = theme.base.palette;\n const isDarkBanner = (banner.variant ?? 'light') === 'dark';\n\n const bgColor = banner.backgroundColor;\n\n let effectiveBackground: string;\n if (bgColor && bgColor.trim() !== '') {\n effectiveBackground = bgColor;\n } else {\n effectiveBackground = isDarkBanner ? paletteDark : paletteLight;\n }\n\n const effectiveForeground = tryCatch(() => readableColor(effectiveBackground)) ?? paletteDark;\n const secondaryBackground = tryCatch(() =>\n transparentize(0.7, readableColor(effectiveForeground))\n );\n\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 $hasContent={hasBannerRegionContent}\n $heightValue={banner.heightValue}\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 enableContentOverlap={effectiveOverlap}\n >\n <StyledContentContainer>\n {banner.title && <StyledBannerHeading variant='h1'>{banner.title}</StyledBannerHeading>}\n {!banner.title && (\n <Text variant='h1'>\n <VisuallyHiddenText>{title}</VisuallyHiddenText>\n </Text>\n )}\n {banner.message && (\n <StyledBannerMessage variant='primary' as='p'>\n {banner.message}\n </StyledBannerMessage>\n )}\n <ThemeOverride\n theme={{\n components: {\n agent: {\n background: 'transparent',\n 'foreground-color': effectiveForeground,\n 'user-message': {\n background: secondaryBackground,\n 'foreground-color': effectiveForeground\n },\n history: {\n background: secondaryBackground,\n 'foreground-color': effectiveForeground,\n item: {\n 'selected-background': transparentize(0.7, theme.base.palette.interactive)\n }\n },\n 'coach-message': {\n avatar: {\n background: `linear-gradient(135deg, ${theme.base.palette.ai} 0%, ${theme.base.palette.interactive} 100%)`,\n 'foreground-color': effectiveForeground\n }\n },\n questionnaire: {\n background: theme.base.palette['primary-background'],\n 'foreground-color': 'auto'\n },\n ai: readableHue(theme.base.palette.ai, effectiveBackground)\n },\n link: {\n color: readableHue(theme.base.palette.interactive, effectiveBackground)\n }\n }\n }}\n >\n {hasBannerRegionContent && (\n <Flex\n as={StyledBannerContentArea}\n container={{ direction: 'column', gap: 2, pad: [1, 0, 0, 0] }}\n className={createClassName('banner-page-banner-content')}\n >\n {bannerRegion.map(el => el)}\n </Flex>\n )}\n </ThemeOverride>\n </StyledContentContainer>\n </Flex>\n </StyledBannerContainer>\n );\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 <StyledPageContentWrapper\n enableContentOverlap={effectiveOverlap}\n className={createClassName('banner-page-content-wrapper')}\n >\n {pageContent}\n </StyledPageContentWrapper>\n </Flex>\n <div>{utilities}</div>\n </Flex>\n );\n }\n\n return (\n <Flex\n container={{ direction: 'column', gap: effectiveOverlap ? 0 : 2 }}\n as={StyledBannerPage}\n className={className}\n >\n {pageBanner}\n <StyledPageContentWrapper\n enableContentOverlap={effectiveOverlap}\n className={createClassName('banner-page-content-wrapper')}\n >\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 </StyledPageContentWrapper>\n </Flex>\n );\n }\n\n return (\n <StyledBannerPage ref={ref} {...restProps} className={className}>\n {pageBanner}\n <StyledPageContentWrapper\n enableContentOverlap={effectiveOverlap}\n className={createClassName('banner-page-content-wrapper')}\n >\n {pageContent}\n </StyledPageContentWrapper>\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": "10.0.0-build.2.
|
|
3
|
+
"version": "10.0.0-build.2.10",
|
|
4
4
|
"license": "SEE LICENSE IN LICENSE",
|
|
5
5
|
"author": "Pegasystems",
|
|
6
6
|
"sideEffects": false,
|
|
@@ -14,8 +14,8 @@
|
|
|
14
14
|
"build": "tsc -b tsconfig.build.json"
|
|
15
15
|
},
|
|
16
16
|
"dependencies": {
|
|
17
|
-
"@pega/cosmos-react-core": "10.0.0-build.2.
|
|
18
|
-
"@pega/cosmos-react-work": "10.0.0-build.2.
|
|
17
|
+
"@pega/cosmos-react-core": "10.0.0-build.2.10",
|
|
18
|
+
"@pega/cosmos-react-work": "10.0.0-build.2.10",
|
|
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",
|