@pega/cosmos-react-wss 10.0.0-build.1.7 → 10.0.0-build.1.9

package/lib/components/PageTemplates/BannerPage.d.ts

@@ -33,6 +33,10 @@ export interface BannerOptions {
      * @default 'center'
      */
     verticalAlign?: 'top' | 'center' | 'bottom';
+    /** When true and height is 'fixed' or 'content', page content overlaps the bottom of the banner.
+     * Has no effect when height is 'full'.
+     */
+    enableContentOverlap?: boolean;
 }
 export interface BannerPageProps extends BaseProps {
     banner: BannerOptions;
@@ -48,7 +52,7 @@ export interface BannerPageProps extends BaseProps {
 }
 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;
 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">>> & string;
-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">>> & string;
+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;
 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;
 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"> & {
     ref?: ((instance: HTMLHeadingElement | HTMLSpanElement | null) => void | import("react").DO_NOT_USE_OR_YOU_WILL_BE_FIRED_CALLBACK_REF_RETURN_VALUES[keyof import("react").DO_NOT_USE_OR_YOU_WILL_BE_FIRED_CALLBACK_REF_RETURN_VALUES]) | import("react").RefObject<HTMLHeadingElement | HTMLSpanElement> | null | undefined;
@@ -56,5 +60,8 @@ export declare const StyledBannerHeading: import("styled-components/dist/types")
 export declare const StyledBannerMessage: 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"> & {
     ref?: ((instance: HTMLHeadingElement | HTMLSpanElement | null) => void | import("react").DO_NOT_USE_OR_YOU_WILL_BE_FIRED_CALLBACK_REF_RETURN_VALUES[keyof import("react").DO_NOT_USE_OR_YOU_WILL_BE_FIRED_CALLBACK_REF_RETURN_VALUES]) | import("react").RefObject<HTMLHeadingElement | HTMLSpanElement> | null | undefined;
 }, never>> & string & Omit<ForwardRefForwardPropsComponent<import("@pega/cosmos-react-core").TextProps>, keyof import("react").Component<any, {}, any>>;
+export declare const StyledPageContentWrapper: import("styled-components/dist/types").IStyledComponentBase<"web", import("styled-components/dist/types").Substitute<import("react").DetailedHTMLProps<import("react").HTMLAttributes<HTMLDivElement>, HTMLDivElement>, {
+    enableContentOverlap?: boolean;
+}>> & string;
 export declare const BannerPage: ForwardRefForwardPropsComponent<BannerPageProps>;
 //# sourceMappingURL=BannerPage.d.ts.map

package/lib/components/PageTemplates/BannerPage.d.ts.map

@@ -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;AAgB7D,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,EAAE,MAAM,CAAC;IACd,0EAA0E;IAC1E,eAAe,CAAC,EAAE,MAAM,CAAC;IACzB,4CAA4C;IAC5C,OAAO,CAAC,EAAE,MAAM,CAAC;IACjB;;;OAGG;IACH,OAAO,CAAC,EAAE,OAAO,GAAG,MAAM,CAAC;IAC3B;;OAEG;IACH,SAAS,CAAC,EAAE,OAAO,CAAC;IACpB;;;;;OAKG;IACH,MAAM,CAAC,EAAE,SAAS,GAAG,OAAO,GAAG,MAAM,CAAC;IACtC;;OAEG;IACH,KAAK,CAAC,EAAE,MAAM,GAAG,QAAQ,GAAG,OAAO,CAAC;IACpC;;OAEG;IACH,aAAa,CAAC,EAAE,KAAK,GAAG,QAAQ,GAAG,QAAQ,CAAC;CAC7C;AAED,MAAM,WAAW,eAAgB,SAAQ,SAAS;IAChD,MAAM,EAAE,aAAa,CAAC;IACtB,mCAAmC;IACnC,CAAC,EAAE,SAAS,EAAE,CAAC;IACf,oFAAoF;IACpF,CAAC,CAAC,EAAE,SAAS,EAAE,CAAC;IAChB,GAAG,CAAC,EAAE,GAAG,CAAC,cAAc,CAAC,CAAC;IAC1B,sGAAsG;IACtG,OAAO,CAAC,EAAE,YAAY,GAAG,aAAa,GAAG,aAAa,CAAC;IACvD,mCAAmC;IACnC,SAAS,CAAC,EAAE,SAAS,CAAC;CACvB;AAED,eAAO,MAAM,gBAAgB,6NAK3B,CAAC;AAIH,eAAO,MAAM,qBAAqB,0SA8BhC,CAAC;AAIH,eAAO,MAAM,YAAY,mUAgCxB,CAAC;AAIF,eAAO,MAAM,sBAAsB,6NAoBlC,CAAC;AAIF,eAAO,MAAM,mBAAmB;;uJAS/B,CAAC;AAIF,eAAO,MAAM,mBAAmB;;uJAQ/B,CAAC;AAkCF,eAAO,MAAM,UAAU,EAAE,+BAA+B,CAAC,eAAe,CAmIvE,CAAC"}
+{"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;AAgB7D,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,EAAE,MAAM,CAAC;IACd,0EAA0E;IAC1E,eAAe,CAAC,EAAE,MAAM,CAAC;IACzB,4CAA4C;IAC5C,OAAO,CAAC,EAAE,MAAM,CAAC;IACjB;;;OAGG;IACH,OAAO,CAAC,EAAE,OAAO,GAAG,MAAM,CAAC;IAC3B;;OAEG;IACH,SAAS,CAAC,EAAE,OAAO,CAAC;IACpB;;;;;OAKG;IACH,MAAM,CAAC,EAAE,SAAS,GAAG,OAAO,GAAG,MAAM,CAAC;IACtC;;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,mCAAmC;IACnC,CAAC,EAAE,SAAS,EAAE,CAAC;IACf,oFAAoF;IACpF,CAAC,CAAC,EAAE,SAAS,EAAE,CAAC;IAChB,GAAG,CAAC,EAAE,GAAG,CAAC,cAAc,CAAC,CAAC;IAC1B,sGAAsG;IACtG,OAAO,CAAC,EAAE,YAAY,GAAG,aAAa,GAAG,aAAa,CAAC;IACvD,mCAAmC;IACnC,SAAS,CAAC,EAAE,SAAS,CAAC;CACvB;AAID,eAAO,MAAM,gBAAgB,6NAK3B,CAAC;AAIH,eAAO,MAAM,qBAAqB,0SA8BhC,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;AAkCF,eAAO,MAAM,UAAU,EAAE,+BAA+B,CAAC,eAAe,CAuJvE,CAAC"}

package/lib/components/PageTemplates/BannerPage.js

@@ -3,6 +3,7 @@ import { transparentize } from 'polished';
 import { forwardRef, useState, useRef } from 'react';
 import styled, { css } from 'styled-components';
 import { defaultThemeProp, Flex, Grid, Text, tryCatch, readableColor, useBreakpoint, useI18n, Tabs, TabPanel, createClassName } from '@pega/cosmos-react-core';
+const BANNER_OVERLAP_MULTIPLIER = 12;
 export const StyledBannerPage = styled.div(({ theme }) => {
     return css `
     min-height: calc(100vh - var(--appshell-offset));
@@ -39,7 +40,7 @@ export const StyledBannerContainer = styled.div(({ backgroundImage, backgroundCo
   `;
 });
 StyledBannerContainer.defaultProps = defaultThemeProp;
-export const StyledBanner = styled.div(({ variant = 'light', backgroundColor, backgroundImage, tintImage = false, align = 'center', theme: { base: { palette: { light, dark } } } }) => {
+export const StyledBanner = styled.div(({ variant = 'light', backgroundColor, backgroundImage, tintImage = false, align = 'center', enableContentOverlap, theme: { base: { palette: { light, dark }, spacing } } }) => {
     let textColor = variant === 'light' ? dark : light;
     let overlayColor = variant === 'light' ? transparentize(0.3, light) : transparentize(0.3, dark);
     if (backgroundColor && !backgroundImage) {
@@ -56,6 +57,11 @@ export const StyledBanner = styled.div(({ variant = 'light', backgroundColor, ba
       width: 100%;
       height: 100%;
       text-align: ${align};
+
+      ${enableContentOverlap &&
+        css `
+        padding-block-end: calc(${spacing} * ${BANNER_OVERLAP_MULTIPLIER});
+      `}
     `;
 });
 StyledBanner.defaultProps = defaultThemeProp;
@@ -84,6 +90,14 @@ export const StyledBannerMessage = styled(Text)(({ theme: { base: { 'font-size':
     font-size: calc(${fontSize} * 1.5);
   `);
 StyledBannerMessage.defaultProps = defaultThemeProp;
+export const StyledPageContentWrapper = styled.div(({ theme, enableContentOverlap }) => css `
+    ${enableContentOverlap &&
+    css `
+      margin-block-start: calc(${theme.base.spacing} * -${BANNER_OVERLAP_MULTIPLIER});
+      position: relative;
+    `}
+  `);
+StyledPageContentWrapper.defaultProps = defaultThemeProp;
 const variantMap = {
     'two-column': 'minmax(0, 1fr) minmax(0, 1fr)',
     'narrow-wide': 'minmax(0, 3fr) minmax(0, 7fr)',
@@ -110,19 +124,20 @@ const StyledPageTabContent = styled.div(({ theme }) => {
 });
 StyledPageTabContent.defaultProps = defaultThemeProp;
 export const BannerPage = forwardRef(function BannerPage({ banner, a, b, variant = 'two-column', utilities, className: classNameProp, ...restProps }, ref) {
+    const t = useI18n();
+    const isMediumOrAbove = useBreakpoint('md');
+    const [panel, setPanel] = useState('content');
+    const pageTabsRef = useRef(null);
     const className = createClassName('banner-page', classNameProp, { variant });
     const gridCols = variantMap[variant];
+    const effectiveOverlap = !!banner.enableContentOverlap && banner.height !== 'full';
     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) }))] }));
     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: {
                 justify: verticalAlignMap[banner.verticalAlign ?? 'center'] ?? 'center',
                 alignItems: horizontalAlignMap[banner.align ?? 'center'] ?? 'center',
                 direction: 'column',
                 gap: 1
-            }, tintImage: banner.tintImage, align: banner.align, children: _jsxs(StyledContentContainer, { children: [_jsx(StyledBannerHeading, { variant: 'h1', children: banner.title }), banner.message && (_jsx(StyledBannerMessage, { variant: 'primary', as: 'p', children: banner.message }))] }) }) }));
-    const isMediumOrAbove = useBreakpoint('md');
-    const [panel, setPanel] = useState('content');
-    const pageTabsRef = useRef(null);
-    const t = useI18n();
+            }, 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 }))] }) }) }));
     const pageTabs = [
         { name: t('content'), id: 'content', content: pageContent },
         {
@@ -136,10 +151,10 @@ export const BannerPage = forwardRef(function BannerPage({ banner, a, b, variant
     };
     if (utilities) {
         if (isMediumOrAbove) {
-            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 })] }));
+            return (_jsxs(Flex, { as: StyledBannerPage, container: { gap: 2 }, ref: ref, ...restProps, className: className, children: [_jsxs(Flex, { container: { direction: 'column' }, item: { grow: 1 }, children: [pageBanner, _jsx(StyledPageContentWrapper, { enableContentOverlap: effectiveOverlap, className: createClassName('banner-page-content-wrapper'), children: pageContent })] }), _jsx("div", { children: utilities })] }));
         }
-        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)))] })] }));
+        return (_jsxs(Flex, { container: { direction: 'column', gap: effectiveOverlap ? 0 : 2 }, as: StyledBannerPage, className: className, children: [pageBanner, _jsx(StyledPageContentWrapper, { enableContentOverlap: effectiveOverlap, className: createClassName('banner-page-content-wrapper'), children: _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)))] }) })] }));
     }
-    return (_jsxs(StyledBannerPage, { ref: ref, ...restProps, className: className, children: [pageBanner, pageContent] }));
+    return (_jsxs(StyledBannerPage, { ref: ref, ...restProps, className: className, children: [pageBanner, _jsx(StyledPageContentWrapper, { enableContentOverlap: effectiveOverlap, className: createClassName('banner-page-content-wrapper'), children: pageContent })] }));
 });
 //# sourceMappingURL=BannerPage.js.map

package/lib/components/PageTemplates/BannerPage.js.map

@@ -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 = 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"]}
+{"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-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<\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"]}

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@pega/cosmos-react-wss",
-  "version": "10.0.0-build.1.7",
+  "version": "10.0.0-build.1.9",
   "license": "SEE LICENSE IN LICENSE",
   "author": "Pegasystems",
   "sideEffects": false,
@@ -14,8 +14,8 @@
     "build": "tsc -b tsconfig.build.json"
   },
   "dependencies": {
-    "@pega/cosmos-react-core": "10.0.0-build.1.7",
-    "@pega/cosmos-react-work": "10.0.0-build.1.7",
+    "@pega/cosmos-react-core": "10.0.0-build.1.9",
+    "@pega/cosmos-react-work": "10.0.0-build.1.9",
     "@types/react": "^17.0.62 || ^18.3.3",
     "@types/react-dom": "^17.0.20 || ^18.3.0",
     "polished": "^4.1.0",