@pega/cosmos-react-build 8.8.0 → 9.0.0-build.10.0

package/lib/components/PageTemplates/OverviewPageTemplate/OverviewPageTemplate.js

@@ -0,0 +1,10 @@
+import { jsx as _jsx } from "react/jsx-runtime";
+import { forwardRef } from 'react';
+import { OneColumnPage as CoreOneColumnPage } from '@pega/cosmos-react-core';
+import { StyledOverviewPage } from '../PageTemplate.styles';
+import PageBanner from './PageBanner';
+const OverviewPageTemplate = forwardRef(function OverviewPageTemplate({ testId, header, content, ...restProps }, ref) {
+    return (_jsx(CoreOneColumnPage, { ...restProps, a: content, as: StyledOverviewPage, header: _jsx(PageBanner, { ...header, testId: testId }), scrollContent: true, title: header.title, ref: ref }));
+});
+export default OverviewPageTemplate;
+//# sourceMappingURL=OverviewPageTemplate.js.map

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

@@ -0,0 +1 @@
+{"version":3,"file":"OverviewPageTemplate.js","sourceRoot":"","sources":["../../../../src/components/PageTemplates/OverviewPageTemplate/OverviewPageTemplate.tsx"],"names":[],"mappings":";AAAA,OAAO,EAAE,UAAU,EAAE,MAAM,OAAO,CAAC;AAGnC,OAAO,EAAE,aAAa,IAAI,iBAAiB,EAAE,MAAM,yBAAyB,CAAC;AAI7E,OAAO,EAAE,kBAAkB,EAAE,MAAM,wBAAwB,CAAC;AAE5D,OAAO,UAAU,MAAM,cAAc,CAAC;AAEtC,MAAM,oBAAoB,GAA+D,UAAU,CACjG,SAAS,oBAAoB,CAC3B,EAAE,MAAM,EAAE,MAAM,EAAE,OAAO,EAAE,GAAG,SAAS,EAA8C,EACrF,GAAqC;IAErC,OAAO,CACL,KAAC,iBAAiB,OACZ,SAAS,EACb,CAAC,EAAE,OAAO,EACV,EAAE,EAAE,kBAAkB,EACtB,MAAM,EAAE,KAAC,UAAU,OAAK,MAAM,EAAE,MAAM,EAAE,MAAM,GAAI,EAClD,aAAa,QACb,KAAK,EAAE,MAAM,CAAC,KAAK,EACnB,GAAG,EAAE,GAAG,GACR,CACH,CAAC;AACJ,CAAC,CACF,CAAC;AAEF,eAAe,oBAAoB,CAAC","sourcesContent":["import { forwardRef } from 'react';\nimport type { PropsWithoutRef } from 'react';\n\nimport { OneColumnPage as CoreOneColumnPage } from '@pega/cosmos-react-core';\nimport type { ForwardRefForwardPropsComponent } from '@pega/cosmos-react-core';\n\nimport type { OverviewPageTemplateProps } from '../PageTemplate.types';\nimport { StyledOverviewPage } from '../PageTemplate.styles';\n\nimport PageBanner from './PageBanner';\n\nconst OverviewPageTemplate: ForwardRefForwardPropsComponent<OverviewPageTemplateProps> = forwardRef(\n  function OverviewPageTemplate(\n    { testId, header, content, ...restProps }: PropsWithoutRef<OverviewPageTemplateProps>,\n    ref: OverviewPageTemplateProps['ref']\n  ) {\n    return (\n      <CoreOneColumnPage\n        {...restProps}\n        a={content}\n        as={StyledOverviewPage}\n        header={<PageBanner {...header} testId={testId} />}\n        scrollContent\n        title={header.title}\n        ref={ref}\n      />\n    );\n  }\n);\n\nexport default OverviewPageTemplate;\n"]}

package/lib/components/PageTemplates/OverviewPageTemplate/PageBanner.d.ts

@@ -0,0 +1,21 @@
+import type { FunctionComponent, MouseEventHandler } from 'react';
+import { type ImageProps, type NoChildrenProp, type TestIdProp } from '@pega/cosmos-react-core';
+interface Action {
+    label: string;
+    onClick: MouseEventHandler<HTMLButtonElement>;
+}
+export interface PageBannerProps extends NoChildrenProp, TestIdProp {
+    title: string;
+    description: string;
+    image?: ImageProps;
+    actions?: [Action] | [Action, Action];
+    link?: {
+        label: string;
+        href: string;
+    };
+}
+declare const _default: FunctionComponent<PageBannerProps> & {
+    getTestIds: (testIdProp?: TestIdProp["testId"]) => import("@pega/cosmos-react-core").TestIdsRecord<readonly ["title", "status", "edit-details", "additional-info-icon", "type", "meta-data", "primary-meta-data", "secondary-meta-data", "visual", "primary-action", "secondary-action", "additional-actions", "banner-description", "banner-link", "banner-actions", "banner-image"]>;
+};
+export default _default;
+//# sourceMappingURL=PageBanner.d.ts.map

package/lib/components/PageTemplates/OverviewPageTemplate/PageBanner.d.ts.map

@@ -0,0 +1 @@
+{"version":3,"file":"PageBanner.d.ts","sourceRoot":"","sources":["../../../../src/components/PageTemplates/OverviewPageTemplate/PageBanner.tsx"],"names":[],"mappings":"AACA,OAAO,KAAK,EAAE,iBAAiB,EAAE,iBAAiB,EAAE,MAAM,OAAO,CAAC;AAElE,OAAO,EAML,KAAK,UAAU,EAIf,KAAK,cAAc,EACnB,KAAK,UAAU,EAGhB,MAAM,yBAAyB,CAAC;AAKjC,UAAU,MAAM;IACd,KAAK,EAAE,MAAM,CAAC;IACd,OAAO,EAAE,iBAAiB,CAAC,iBAAiB,CAAC,CAAC;CAC/C;AAED,MAAM,WAAW,eAAgB,SAAQ,cAAc,EAAE,UAAU;IACjE,KAAK,EAAE,MAAM,CAAC;IACd,WAAW,EAAE,MAAM,CAAC;IACpB,KAAK,CAAC,EAAE,UAAU,CAAC;IACnB,OAAO,CAAC,EAAE,CAAC,MAAM,CAAC,GAAG,CAAC,MAAM,EAAE,MAAM,CAAC,CAAC;IACtC,IAAI,CAAC,EAAE;QACL,KAAK,EAAE,MAAM,CAAC;QACd,IAAI,EAAE,MAAM,CAAC;KACd,CAAC;CACH;;;;AA8DD,wBAA6D"}

package/lib/components/PageTemplates/OverviewPageTemplate/PageBanner.js

@@ -0,0 +1,22 @@
+import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
+import { useRef } from 'react';
+import { Flex, Grid, Image, Text, Button, Link, useBreakpoint, ShowMoreLess, useTestIds, withTestIds } from '@pega/cosmos-react-core';
+import { StyledActions, StyledPageBanner } from '../PageTemplate.styles';
+import { getPageHeaderTestIds } from '../PageTemplates.test-ids';
+const PageBanner = ({ testId, title, description, image, actions, link }) => {
+    const testIds = useTestIds(testId, getPageHeaderTestIds);
+    const headerRef = useRef(null);
+    const isMediumOrAbove = useBreakpoint('md', { breakpointRef: headerRef });
+    const isSmallOrAbove = useBreakpoint('sm', { breakpointRef: headerRef });
+    const largePadding = 8;
+    const smallPadding = 2;
+    const largeGap = 8;
+    const mediumGap = 4;
+    return (_jsx("div", { ref: headerRef, children: _jsxs(Grid, { container: {
+                cols: isSmallOrAbove && image ? '1fr 25%' : '1fr',
+                pad: isMediumOrAbove ? [0, largePadding, 0, smallPadding] : [0, smallPadding],
+                gap: isMediumOrAbove ? largeGap : mediumGap
+            }, as: StyledPageBanner, children: [_jsxs(Flex, { container: { direction: 'column', pad: [smallPadding, 0], rowGap: 1 }, children: [_jsx(Text, { "data-testid": testIds.title, variant: 'h1', children: title }), _jsx(ShowMoreLess, { lines: 3, children: _jsx(Text, { "data-testid": testIds.bannerDescription, as: 'p', children: description }) }), (actions || link) && (_jsxs(StyledActions, { "data-testid": testIds.bannerActions, container: { alignItems: 'center', pad: [1, 0, 0, 0], colGap: 2, wrap: 'wrap' }, children: [actions?.map(action => (_jsx(Button, { onClick: action.onClick, children: action.label }, action.label))), link && (_jsx(Link, { "data-testid": testIds.bannerLink, href: link.href, children: link.label }))] }))] }), isSmallOrAbove && image && _jsx(Image, { ...image, "data-testid": testIds.bannerImage })] }) }));
+};
+export default withTestIds(PageBanner, getPageHeaderTestIds);
+//# sourceMappingURL=PageBanner.js.map

package/lib/components/PageTemplates/OverviewPageTemplate/PageBanner.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"PageBanner.js","sourceRoot":"","sources":["../../../../src/components/PageTemplates/OverviewPageTemplate/PageBanner.tsx"],"names":[],"mappings":"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","sourcesContent":["import { useRef } from 'react';\nimport type { FunctionComponent, MouseEventHandler } from 'react';\n\nimport {\n  Flex,\n  Grid,\n  Image,\n  Text,\n  Button,\n  type ImageProps,\n  Link,\n  useBreakpoint,\n  ShowMoreLess,\n  type NoChildrenProp,\n  type TestIdProp,\n  useTestIds,\n  withTestIds\n} from '@pega/cosmos-react-core';\n\nimport { StyledActions, StyledPageBanner } from '../PageTemplate.styles';\nimport { getPageHeaderTestIds } from '../PageTemplates.test-ids';\n\ninterface Action {\n  label: string;\n  onClick: MouseEventHandler<HTMLButtonElement>;\n}\n\nexport interface PageBannerProps extends NoChildrenProp, TestIdProp {\n  title: string;\n  description: string;\n  image?: ImageProps;\n  actions?: [Action] | [Action, Action];\n  link?: {\n    label: string;\n    href: string;\n  };\n}\n\nconst PageBanner: FunctionComponent<PageBannerProps> = ({\n  testId,\n  title,\n  description,\n  image,\n  actions,\n  link\n}) => {\n  const testIds = useTestIds(testId, getPageHeaderTestIds);\n  const headerRef = useRef<HTMLDivElement>(null);\n  const isMediumOrAbove = useBreakpoint('md', { breakpointRef: headerRef });\n  const isSmallOrAbove = useBreakpoint('sm', { breakpointRef: headerRef });\n  const largePadding = 8;\n  const smallPadding = 2;\n  const largeGap = 8;\n  const mediumGap = 4;\n\n  return (\n    <div ref={headerRef}>\n      <Grid\n        container={{\n          cols: isSmallOrAbove && image ? '1fr 25%' : '1fr',\n          pad: isMediumOrAbove ? [0, largePadding, 0, smallPadding] : [0, smallPadding],\n          gap: isMediumOrAbove ? largeGap : mediumGap\n        }}\n        as={StyledPageBanner}\n      >\n        <Flex container={{ direction: 'column', pad: [smallPadding, 0], rowGap: 1 }}>\n          <Text data-testid={testIds.title} variant='h1'>\n            {title}\n          </Text>\n          <ShowMoreLess lines={3}>\n            <Text data-testid={testIds.bannerDescription} as='p'>\n              {description}\n            </Text>\n          </ShowMoreLess>\n          {(actions || link) && (\n            <StyledActions\n              data-testid={testIds.bannerActions}\n              container={{ alignItems: 'center', pad: [1, 0, 0, 0], colGap: 2, wrap: 'wrap' }}\n            >\n              {actions?.map(action => (\n                <Button key={action.label} onClick={action.onClick}>\n                  {action.label}\n                </Button>\n              ))}\n              {link && (\n                <Link data-testid={testIds.bannerLink} href={link.href}>\n                  {link.label}\n                </Link>\n              )}\n            </StyledActions>\n          )}\n        </Flex>\n        {isSmallOrAbove && image && <Image {...image} data-testid={testIds.bannerImage} />}\n      </Grid>\n    </div>\n  );\n};\n\nexport default withTestIds(PageBanner, getPageHeaderTestIds);\n"]}

package/lib/components/PageTemplates/PageTemplate.styles.d.ts

@@ -0,0 +1,16 @@
+import { Text, Button } from '@pega/cosmos-react-core';
+export declare const StyledPageBanner: import("styled-components").StyledComponent<"div", import("styled-components").DefaultTheme, {}, never>;
+export declare const StyledActions: import("styled-components").StyledComponent<import("@pega/cosmos-react-core").ForwardRefForwardPropsComponent<import("@pega/cosmos-react-core").FlexProps>, import("styled-components").DefaultTheme, {}, never>;
+export declare const StyledDescription: import("styled-components").StyledComponent<"div", import("styled-components").DefaultTheme, {}, never>;
+export declare const StyledInventoryPage: import("styled-components").StyledComponent<"div", import("styled-components").DefaultTheme, {}, never>;
+export declare const StyledInventoryPageTitleWrapper: import("styled-components").StyledComponent<import("@pega/cosmos-react-core").ForwardRefForwardPropsComponent<import("@pega/cosmos-react-core").FlexProps>, import("styled-components").DefaultTheme, {}, never>;
+export declare const StyledOverviewPage: import("styled-components").StyledComponent<"div", import("styled-components").DefaultTheme, {}, never>;
+export declare const StyledHeader: import("styled-components").StyledComponent<"div", import("styled-components").DefaultTheme, {}, never>;
+export declare const StyledTitleContainer: import("styled-components").StyledComponent<"div", import("styled-components").DefaultTheme, {}, never>;
+export declare const StyledTextWithEllipsis: typeof Text;
+export declare const StyledText: typeof Text;
+export declare const StyledPrimaryMetaButton: typeof Button;
+export declare const StyledPrimaryActionWrapper: import("styled-components").StyledComponent<"div", import("styled-components").DefaultTheme, {
+    hasAdditionalAction: boolean;
+}, never>;
+//# sourceMappingURL=PageTemplate.styles.d.ts.map

package/lib/components/PageTemplates/PageTemplate.styles.d.ts.map

@@ -0,0 +1 @@
+{"version":3,"file":"PageTemplate.styles.d.ts","sourceRoot":"","sources":["../../../src/components/PageTemplates/PageTemplate.styles.ts"],"names":[],"mappings":"AAGA,OAAO,EACL,IAAI,EAEJ,MAAM,EAOP,MAAM,yBAAyB,CAAC;AAWjC,eAAO,MAAM,gBAAgB,yGAiD3B,CAAC;AAIH,eAAO,MAAM,aAAa,kNAEzB,CAAC;AAGF,eAAO,MAAM,iBAAiB,yGAO5B,CAAC;AAKH,eAAO,MAAM,mBAAmB,yGA+B/B,CAAC;AAIF,eAAO,MAAM,+BAA+B,kNAW1C,CAAC;AAKH,eAAO,MAAM,kBAAkB,yGAa9B,CAAC;AAGF,eAAO,MAAM,YAAY,yGAUvB,CAAC;AAIH,eAAO,MAAM,oBAAoB,yGAEhC,CAAC;AAEF,eAAO,MAAM,sBAAsB,EAAE,OAAO,IAG3C,CAAC;AAEF,eAAO,MAAM,UAAU,EAAE,OAAO,IAQ9B,CAAC;AAEH,eAAO,MAAM,uBAAuB,EAAE,OAAO,MAoB3C,CAAC;AAIH,eAAO,MAAM,0BAA0B;yBAAqC,OAAO;SAUlF,CAAC"}

package/lib/components/PageTemplates/PageTemplate.styles.js

@@ -0,0 +1,167 @@
+import styled, { css } from 'styled-components';
+import { transparentize } from 'polished';
+import { Text, defaultThemeProp, Button, StyledPageHeader, StyledButton, StyledLink, StyledShowMoreLessButton, Flex, StyledImage } from '@pega/cosmos-react-core';
+import { StyledBanner, StyledBannerMessageList } from '@pega/cosmos-react-core/lib/components/Banner/Banner';
+import { StyledTabs } from '@pega/cosmos-react-core/lib/components/Tabs/Tabs.styles';
+import { calculateFontSize } from '@pega/cosmos-react-core/lib/styles';
+import { ellipsisOverflow } from '@pega/cosmos-react-core/lib/styles/mixins';
+// Page banner styles
+export const StyledPageBanner = styled.div(({ theme }) => {
+    const { base: { 'font-weight': fontWeight, 'content-width': contentWidth, 'border-radius': borderRadius, spacing, palette: { 'foreground-color': color } } } = theme;
+    return css `
+    background: ${transparentize(0.95, color)};
+    border-radius: ${borderRadius};
+    padding-block-start: ${spacing};
+
+    &,
+    h1 {
+      color: ${color};
+    }
+
+    h1:focus-visible {
+      outline: transparent;
+    }
+
+    ${StyledButton} {
+      color: ${color};
+    }
+
+    ${StyledButton} + ${StyledButton} {
+      margin-inline-start: 0;
+    }
+
+    ${StyledLink}, ${StyledShowMoreLessButton} {
+      font-weight: ${fontWeight['semi-bold']};
+      color: ${color};
+    }
+
+    p {
+      max-width: ${contentWidth.xl};
+    }
+
+    ${StyledImage} {
+      object-fit: contain;
+      max-height: 10rem;
+      justify-self: center;
+      align-self: center;
+    }
+  `;
+});
+StyledPageBanner.defaultProps = defaultThemeProp;
+export const StyledActions = styled(Flex) `
+  margin-block-start: auto;
+`;
+// Common styles
+export const StyledDescription = styled.div(({ theme }) => {
+    return css `
+    max-width: ${theme.base['content-width'].lg};
+    * {
+      overflow: hidden;
+    }
+  `;
+});
+StyledDescription.defaultProps = defaultThemeProp;
+// Inventory page styles
+export const StyledInventoryPage = styled.div(({ theme: { base: { spacing, palette: { 'primary-background': primaryBackground } } } }) => {
+    return css `
+      background: ${primaryBackground};
+      height: 100%;
+
+      ${StyledBanner},
+      ${StyledTabs} {
+        margin-block-start: calc(1.5 * ${spacing});
+      }
+
+      ${StyledPageHeader} {
+        padding: calc(2 * ${spacing});
+      }
+
+      ${StyledBannerMessageList} {
+        max-height: 25vh;
+        overflow: auto;
+      }
+      ${StyledDescription} {
+        margin-block-start: calc(${spacing} * 1.5);
+      }
+    `;
+});
+StyledInventoryPage.defaultProps = defaultThemeProp;
+export const StyledInventoryPageTitleWrapper = styled(Flex)(({ theme }) => {
+    const { base: { 'content-width': contentWidth, spacing } } = theme;
+    return css `
+    max-width: ${contentWidth.xl};
+
+    h1 {
+      margin-inline-end: calc(${spacing} * 2);
+    }
+  `;
+});
+StyledInventoryPageTitleWrapper.defaultProps = defaultThemeProp;
+// overview page styles
+export const StyledOverviewPage = styled.div `
+  /* remove the default padding set by header */
+  ${StyledPageHeader} {
+    padding: 0;
+  }
+
+  ${StyledShowMoreLessButton} {
+    max-width: fit-content;
+  }
+
+  ${StyledPageBanner} {
+    background: none;
+  }
+`;
+// Construct page styles
+export const StyledHeader = styled.div(({ theme }) => {
+    return css `
+    background: ${transparentize(0.95, theme.base.palette['foreground-color'])};
+    border-radius: ${theme.base['border-radius']};
+    padding: calc(2 * ${theme.base.spacing});
+
+    h1:focus-visible {
+      box-shadow: ${theme.base.shadow['focus-inset']};
+    }
+  `;
+});
+StyledHeader.defaultProps = defaultThemeProp;
+export const StyledTitleContainer = styled.div `
+  width: calc(100% - 3rem);
+`;
+export const StyledTextWithEllipsis = styled(Text) `
+  display: block;
+  ${ellipsisOverflow}
+`;
+export const StyledText = styled(Text)(({ showEllipsis }) => {
+    return css `
+    width: 100%;
+    white-space: nowrap;
+    ${showEllipsis && ellipsisOverflow}
+  `;
+});
+export const StyledPrimaryMetaButton = styled(Button)(props => {
+    const { theme: { base: { 'font-size': fontSize, 'font-scale': fontScale, shadow }, components: { text } } } = props;
+    const fontSizes = calculateFontSize(fontSize, fontScale);
+    return css `
+    font-size: ${fontSizes[text.h1['font-size']]};
+    font-weight: ${text.h1['font-weight']};
+    width: 100%;
+    ${ellipsisOverflow}
+
+    &:not([disabled]):focus {
+      box-shadow: ${shadow['focus-inset']};
+    }
+  `;
+});
+StyledPrimaryMetaButton.defaultProps = defaultThemeProp;
+export const StyledPrimaryActionWrapper = styled.div(({ theme, hasAdditionalAction }) => {
+    return css `
+      margin-inline-end: ${hasAdditionalAction ? theme.base.spacing : 0};
+
+      ${StyledButton} {
+        font-weight: ${theme.base['font-weight']['semi-bold']};
+      }
+    `;
+});
+StyledPrimaryActionWrapper.defaultProps = defaultThemeProp;
+//# sourceMappingURL=PageTemplate.styles.js.map

package/lib/components/PageTemplates/PageTemplate.styles.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"PageTemplate.styles.js","sourceRoot":"","sources":["../../../src/components/PageTemplates/PageTemplate.styles.ts"],"names":[],"mappings":"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","sourcesContent":["import styled, { css } from 'styled-components';\nimport { transparentize } from 'polished';\n\nimport {\n  Text,\n  defaultThemeProp,\n  Button,\n  StyledPageHeader,\n  StyledButton,\n  StyledLink,\n  StyledShowMoreLessButton,\n  Flex,\n  StyledImage\n} from '@pega/cosmos-react-core';\nimport {\n  StyledBanner,\n  StyledBannerMessageList\n} from '@pega/cosmos-react-core/lib/components/Banner/Banner';\nimport { StyledTabs } from '@pega/cosmos-react-core/lib/components/Tabs/Tabs.styles';\nimport { calculateFontSize } from '@pega/cosmos-react-core/lib/styles';\nimport type { FontSize } from '@pega/cosmos-react-core/lib/styles';\nimport { ellipsisOverflow } from '@pega/cosmos-react-core/lib/styles/mixins';\n\n// Page banner styles\nexport const StyledPageBanner = styled.div(({ theme }) => {\n  const {\n    base: {\n      'font-weight': fontWeight,\n      'content-width': contentWidth,\n      'border-radius': borderRadius,\n      spacing,\n      palette: { 'foreground-color': color }\n    }\n  } = theme;\n\n  return css`\n    background: ${transparentize(0.95, color)};\n    border-radius: ${borderRadius};\n    padding-block-start: ${spacing};\n\n    &,\n    h1 {\n      color: ${color};\n    }\n\n    h1:focus-visible {\n      outline: transparent;\n    }\n\n    ${StyledButton} {\n      color: ${color};\n    }\n\n    ${StyledButton} + ${StyledButton} {\n      margin-inline-start: 0;\n    }\n\n    ${StyledLink}, ${StyledShowMoreLessButton} {\n      font-weight: ${fontWeight['semi-bold']};\n      color: ${color};\n    }\n\n    p {\n      max-width: ${contentWidth.xl};\n    }\n\n    ${StyledImage} {\n      object-fit: contain;\n      max-height: 10rem;\n      justify-self: center;\n      align-self: center;\n    }\n  `;\n});\n\nStyledPageBanner.defaultProps = defaultThemeProp;\n\nexport const StyledActions = styled(Flex)`\n  margin-block-start: auto;\n`;\n\n// Common styles\nexport const StyledDescription = styled.div(({ theme }) => {\n  return css`\n    max-width: ${theme.base['content-width'].lg};\n    * {\n      overflow: hidden;\n    }\n  `;\n});\n\nStyledDescription.defaultProps = defaultThemeProp;\n\n// Inventory page styles\nexport const StyledInventoryPage = styled.div(\n  ({\n    theme: {\n      base: {\n        spacing,\n        palette: { 'primary-background': primaryBackground }\n      }\n    }\n  }) => {\n    return css`\n      background: ${primaryBackground};\n      height: 100%;\n\n      ${StyledBanner},\n      ${StyledTabs} {\n        margin-block-start: calc(1.5 * ${spacing});\n      }\n\n      ${StyledPageHeader} {\n        padding: calc(2 * ${spacing});\n      }\n\n      ${StyledBannerMessageList} {\n        max-height: 25vh;\n        overflow: auto;\n      }\n      ${StyledDescription} {\n        margin-block-start: calc(${spacing} * 1.5);\n      }\n    `;\n  }\n);\n\nStyledInventoryPage.defaultProps = defaultThemeProp;\n\nexport const StyledInventoryPageTitleWrapper = styled(Flex)(({ theme }) => {\n  const {\n    base: { 'content-width': contentWidth, spacing }\n  } = theme;\n  return css`\n    max-width: ${contentWidth.xl};\n\n    h1 {\n      margin-inline-end: calc(${spacing} * 2);\n    }\n  `;\n});\n\nStyledInventoryPageTitleWrapper.defaultProps = defaultThemeProp;\n\n// overview page styles\nexport const StyledOverviewPage = styled.div`\n  /* remove the default padding set by header */\n  ${StyledPageHeader} {\n    padding: 0;\n  }\n\n  ${StyledShowMoreLessButton} {\n    max-width: fit-content;\n  }\n\n  ${StyledPageBanner} {\n    background: none;\n  }\n`;\n\n// Construct page styles\nexport const StyledHeader = styled.div(({ theme }) => {\n  return css`\n    background: ${transparentize(0.95, theme.base.palette['foreground-color'])};\n    border-radius: ${theme.base['border-radius']};\n    padding: calc(2 * ${theme.base.spacing});\n\n    h1:focus-visible {\n      box-shadow: ${theme.base.shadow['focus-inset']};\n    }\n  `;\n});\n\nStyledHeader.defaultProps = defaultThemeProp;\n\nexport const StyledTitleContainer = styled.div`\n  width: calc(100% - 3rem);\n`;\n\nexport const StyledTextWithEllipsis: typeof Text = styled(Text)`\n  display: block;\n  ${ellipsisOverflow}\n`;\n\nexport const StyledText: typeof Text = styled(Text)<{ showEllipsis: boolean }>(({\n  showEllipsis\n}) => {\n  return css`\n    width: 100%;\n    white-space: nowrap;\n    ${showEllipsis && ellipsisOverflow}\n  `;\n});\n\nexport const StyledPrimaryMetaButton: typeof Button = styled(Button)(props => {\n  const {\n    theme: {\n      base: { 'font-size': fontSize, 'font-scale': fontScale, shadow },\n      components: { text }\n    }\n  } = props;\n\n  const fontSizes = calculateFontSize(fontSize, fontScale);\n\n  return css`\n    font-size: ${fontSizes[text.h1['font-size'] as FontSize]};\n    font-weight: ${text.h1['font-weight']};\n    width: 100%;\n    ${ellipsisOverflow}\n\n    &:not([disabled]):focus {\n      box-shadow: ${shadow['focus-inset']};\n    }\n  `;\n});\n\nStyledPrimaryMetaButton.defaultProps = defaultThemeProp;\n\nexport const StyledPrimaryActionWrapper = styled.div<{ hasAdditionalAction: boolean }>(\n  ({ theme, hasAdditionalAction }) => {\n    return css`\n      margin-inline-end: ${hasAdditionalAction ? theme.base.spacing : 0};\n\n      ${StyledButton} {\n        font-weight: ${theme.base['font-weight']['semi-bold']};\n      }\n    `;\n  }\n);\n\nStyledPrimaryActionWrapper.defaultProps = defaultThemeProp;\n"]}

package/lib/components/PageTemplates/PageTemplate.types.d.ts

@@ -0,0 +1,114 @@
+import type { MouseEvent, ReactNode, Ref } from 'react';
+import type { BannerProps, OmitStrict, TestIdProp, ButtonProps, BaseProps, TabsProps, MenuItemProps, TestIdsRecord } from '@pega/cosmos-react-core';
+import type { OneColumnPageProps, TabbedPageTab } from '@pega/cosmos-react-core/lib/components/PageTemplates/PageTemplates';
+import type { IconTileProps } from '../IconTile';
+import type { PageBannerProps } from './OverviewPageTemplate/PageBanner';
+import { elements as pageHeaderElements } from './PageTemplates.test-ids';
+export interface PageTemplateProps extends BaseProps, TestIdProp {
+    /** PropTypes for error banner inside Page Template. */
+    errorBanner?: Pick<BannerProps, 'variant' | 'onDismiss' | 'messages'>;
+    /** If true, disables all the action buttons on page header. */
+    progress?: boolean;
+    /** Ref to the Page Template. */
+    ref?: Ref<HTMLDivElement>;
+}
+type PageHeaderProps = {
+    /** The primary header text on the page header. */
+    title: string;
+    /** Description text for the page header and additional info dialog. */
+    description?: string;
+};
+export type HeaderActionItemProps = Pick<MenuItemProps, 'id' | 'onClick' | 'disabled' | 'primary'>;
+export interface MetaFieldValueListProps {
+    id?: string;
+    name: string;
+    value?: string;
+    onClick?: (value: string) => void;
+}
+export interface ActionButtonProps {
+    testIds: Partial<TestIdsRecord<typeof pageHeaderElements>>;
+    progress?: PageTemplateProps['progress'];
+    primaryAction?: (HeaderActionItemProps & {
+        variant?: ButtonProps['variant'];
+    }) | ReactNode;
+    secondaryAction?: HeaderActionItemProps;
+    additionalActions?: HeaderActionItemProps[];
+    animatePrimaryButton?: boolean;
+}
+type ConstructPageTemplateContentProps = {
+    tabs: OmitStrict<TabsProps, 'tabs'> & {
+        tabs: TabbedPageTab[];
+    };
+    content?: never;
+} | {
+    tabs?: never;
+    content: ReactNode;
+};
+export type ConstructPageTemplateProps = PageTemplateProps & {
+    header: PageHeaderProps & {
+        /**
+         * Metadata for the Page Header and additional info dialog.
+         * Only First 4 items of metadata are rendered on page header.
+         */
+        metadata?: {
+            /** Primary Metadata
+             * Primary Metadata highlights the important metadata for the user by staying next to the title
+             */
+            primary?: MetaFieldValueListProps[];
+            /** Secondary Metadata
+             * Secondary Metadata highlights the next secondary meta information for the user by staying close to the action button
+             */
+            secondary?: [MetaFieldValueListProps] | [MetaFieldValueListProps, MetaFieldValueListProps];
+            /** Additional Metadata
+             * All meta information for the user shown within the interaction of Info icon.
+             */
+            additional: MetaFieldValueListProps[];
+        };
+        /** A visual associated with the page header. */
+        visual: OmitStrict<IconTileProps, 'size'>;
+        /** The type of the page content. */
+        type: {
+            name: string;
+            onClick?: (e?: MouseEvent<HTMLButtonElement | HTMLAnchorElement>) => void;
+            href?: string;
+        };
+        /**
+         * PrimaryAction button on page header.
+         * If variant is set as primary, live log is triggered announcing the user about dirty changes state on the page. */
+        primaryAction?: ActionButtonProps['primaryAction'];
+        /**
+         * SecondaryAction to the page header.
+         * Secondary Action button shifts inside the additionalActions based on screen width.
+         */
+        secondaryAction?: HeaderActionItemProps;
+        /** A set of Action Buttons to render on the Action Menu button on page header. */
+        additionalActions?: HeaderActionItemProps[];
+    };
+    /** Determines if the template is in preview mode */
+    isPreview?: boolean;
+} & ConstructPageTemplateContentProps;
+export interface InventoryPageTemplateProps extends PageTemplateProps {
+    header: PageHeaderProps & {
+        /**
+         * PrimaryAction button on page header.
+         * If variant is set as primary, live log is triggered announcing the user about dirty changes state on the page. */
+        primaryAction?: HeaderActionItemProps & {
+            variant?: ButtonProps['variant'];
+        };
+        /**
+         * SecondaryAction to the page header.
+         * Secondary Action button shifts inside the additionalActions based on screen width.
+         */
+        secondaryAction?: HeaderActionItemProps;
+        /** A set of Action Buttons to render on the Action Menu button on page header. */
+        additionalActions?: HeaderActionItemProps[];
+    };
+    content: OneColumnPageProps['a'];
+}
+export interface OverviewPageTemplateProps extends TestIdProp, BaseProps {
+    header: PageBannerProps;
+    content: OneColumnPageProps['a'];
+    ref?: Ref<HTMLDivElement>;
+}
+export {};
+//# sourceMappingURL=PageTemplate.types.d.ts.map

package/lib/components/PageTemplates/PageTemplate.types.d.ts.map

@@ -0,0 +1 @@
+{"version":3,"file":"PageTemplate.types.d.ts","sourceRoot":"","sources":["../../../src/components/PageTemplates/PageTemplate.types.ts"],"names":[],"mappings":"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"}

package/lib/components/PageTemplates/PageTemplate.types.js

@@ -0,0 +1,2 @@
+import { elements as pageHeaderElements } from './PageTemplates.test-ids';
+//# sourceMappingURL=PageTemplate.types.js.map

package/lib/components/PageTemplates/PageTemplate.types.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"PageTemplate.types.js","sourceRoot":"","sources":["../../../src/components/PageTemplates/PageTemplate.types.ts"],"names":[],"mappings":"AAoBA,OAAO,EAAE,QAAQ,IAAI,kBAAkB,EAAE,MAAM,0BAA0B,CAAC","sourcesContent":["import type { MouseEvent, ReactNode, Ref } from 'react';\n\nimport type {\n  BannerProps,\n  OmitStrict,\n  TestIdProp,\n  ButtonProps,\n  BaseProps,\n  TabsProps,\n  MenuItemProps,\n  TestIdsRecord\n} from '@pega/cosmos-react-core';\nimport type {\n  OneColumnPageProps,\n  TabbedPageTab\n} from '@pega/cosmos-react-core/lib/components/PageTemplates/PageTemplates';\n\nimport type { IconTileProps } from '../IconTile';\n\nimport type { PageBannerProps } from './OverviewPageTemplate/PageBanner';\nimport { elements as pageHeaderElements } from './PageTemplates.test-ids';\n\nexport interface PageTemplateProps extends BaseProps, TestIdProp {\n  /** PropTypes for error banner inside Page Template. */\n  errorBanner?: Pick<BannerProps, 'variant' | 'onDismiss' | 'messages'>;\n  /** If true, disables all the action buttons on page header. */\n  progress?: boolean;\n  /** Ref to the Page Template. */\n  ref?: Ref<HTMLDivElement>;\n}\n\ntype PageHeaderProps = {\n  /** The primary header text on the page header. */\n  title: string;\n  /** Description text for the page header and additional info dialog. */\n  description?: string;\n};\n\nexport type HeaderActionItemProps = Pick<MenuItemProps, 'id' | 'onClick' | 'disabled' | 'primary'>;\n\nexport interface MetaFieldValueListProps {\n  id?: string;\n  name: string;\n  value?: string;\n  onClick?: (value: string) => void;\n}\n\nexport interface ActionButtonProps {\n  testIds: Partial<TestIdsRecord<typeof pageHeaderElements>>;\n  progress?: PageTemplateProps['progress'];\n  primaryAction?:\n    | (HeaderActionItemProps & {\n        variant?: ButtonProps['variant'];\n      })\n    | ReactNode;\n  secondaryAction?: HeaderActionItemProps;\n  additionalActions?: HeaderActionItemProps[];\n  animatePrimaryButton?: boolean;\n}\n\ntype ConstructPageTemplateContentProps =\n  | {\n      tabs: OmitStrict<TabsProps, 'tabs'> & {\n        tabs: TabbedPageTab[];\n      };\n      content?: never;\n    }\n  | {\n      tabs?: never;\n      content: ReactNode;\n    };\n\nexport type ConstructPageTemplateProps = PageTemplateProps & {\n  header: PageHeaderProps & {\n    /**\n     * Metadata for the Page Header and additional info dialog.\n     * Only First 4 items of metadata are rendered on page header.\n     */\n    metadata?: {\n      /** Primary Metadata\n       * Primary Metadata highlights the important metadata for the user by staying next to the title\n       */\n      primary?: MetaFieldValueListProps[];\n      /** Secondary Metadata\n       * Secondary Metadata highlights the next secondary meta information for the user by staying close to the action button\n       */\n      secondary?: [MetaFieldValueListProps] | [MetaFieldValueListProps, MetaFieldValueListProps];\n      /** Additional Metadata\n       * All meta information for the user shown within the interaction of Info icon.\n       */\n      additional: MetaFieldValueListProps[];\n    };\n    /** A visual associated with the page header. */\n    visual: OmitStrict<IconTileProps, 'size'>;\n    /** The type of the page content. */\n    type: {\n      name: string;\n      onClick?: (e?: MouseEvent<HTMLButtonElement | HTMLAnchorElement>) => void;\n      href?: string;\n    };\n    /**\n     * PrimaryAction button on page header.\n     * If variant is set as primary, live log is triggered announcing the user about dirty changes state on the page. */\n    primaryAction?: ActionButtonProps['primaryAction'];\n    /**\n     * SecondaryAction to the page header.\n     * Secondary Action button shifts inside the additionalActions based on screen width.\n     */\n    secondaryAction?: HeaderActionItemProps;\n    /** A set of Action Buttons to render on the Action Menu button on page header. */\n    additionalActions?: HeaderActionItemProps[];\n  };\n  /** Determines if the template is in preview mode */\n  isPreview?: boolean;\n} & ConstructPageTemplateContentProps;\n\nexport interface InventoryPageTemplateProps extends PageTemplateProps {\n  header: PageHeaderProps & {\n    /**\n     * PrimaryAction button on page header.\n     * If variant is set as primary, live log is triggered announcing the user about dirty changes state on the page. */\n    primaryAction?: HeaderActionItemProps & {\n      variant?: ButtonProps['variant'];\n    };\n    /**\n     * SecondaryAction to the page header.\n     * Secondary Action button shifts inside the additionalActions based on screen width.\n     */\n    secondaryAction?: HeaderActionItemProps;\n    /** A set of Action Buttons to render on the Action Menu button on page header. */\n    additionalActions?: HeaderActionItemProps[];\n  };\n  content: OneColumnPageProps['a'];\n}\n\nexport interface OverviewPageTemplateProps extends TestIdProp, BaseProps {\n  header: PageBannerProps;\n  content: OneColumnPageProps['a'];\n  ref?: Ref<HTMLDivElement>;\n}\n"]}

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

@@ -1,27 +1,31 @@
 import type { MouseEvent } from 'react';
-import type { OneColumnPageProps as CoreOneColumnPageProps, TabbedPageProps as CoreTabbedPageProps, FieldValueListProps, ForwardRefForwardPropsComponent, PageTemplateProps, OmitStrict, StatusProps } from '@pega/cosmos-react-core';
-export interface PageHeaderProps extends Pick<PageTemplateProps, 'title' | 'actions'> {
+import type { OneColumnPageProps as CoreOneColumnPageProps, TabbedPageProps as CoreTabbedPageProps, FieldValueListProps, PageTemplateProps, OmitStrict, StatusProps, TestIdProp, ForwardRefForwardPropsComponent } from '@pega/cosmos-react-core';
+export interface AdditionalInfoProps extends TestIdProp {
+    title: string;
+    description?: string;
+    fields: FieldValueListProps['fields'];
+    onEdit?: (e: MouseEvent<HTMLButtonElement>) => void;
+}
+export interface PageHeaderProps extends Pick<PageTemplateProps, 'title' | 'actions'>, TestIdProp {
     metadata?: FieldValueListProps['fields'];
     status?: {
         type: StatusProps['variant'];
         label: string;
     };
     titleTag?: 'h1' | 'h2';
-    additionalInfo?: {
-        title: string;
-        description?: string;
-        fields: FieldValueListProps['fields'];
-        onEdit?: (e: MouseEvent<HTMLButtonElement>) => void;
-    };
+    additionalInfo?: AdditionalInfoProps;
 }
 type OmittedPageProps = 'header' | 'scrollContent';
-export interface OneColumnPageProps extends OmitStrict<CoreOneColumnPageProps, OmittedPageProps>, PageHeaderProps {
+export interface OneColumnPageProps extends OmitStrict<CoreOneColumnPageProps, OmittedPageProps>, PageHeaderProps, TestIdProp {
 }
-export interface TabbedPageProps extends OmitStrict<CoreTabbedPageProps, OmittedPageProps>, PageHeaderProps {
+export interface TabbedPageProps extends OmitStrict<CoreTabbedPageProps, OmittedPageProps>, PageHeaderProps, TestIdProp {
 }
 export declare const StyledPage: import("styled-components").StyledComponent<"div", import("styled-components").DefaultTheme, {}, never>;
-export declare const PageHeader: ({ title, metadata, additionalInfo, actions, status, titleTag }: PageHeaderProps) => import("react/jsx-runtime").JSX.Element;
+export declare const PageHeader: ({ testId, title, metadata, additionalInfo, actions, status, titleTag }: PageHeaderProps) => import("react/jsx-runtime").JSX.Element;
 export declare const TabbedPage: ForwardRefForwardPropsComponent<TabbedPageProps>;
 export declare const OneColumnPage: ForwardRefForwardPropsComponent<OneColumnPageProps>;
-export {};
+declare const _default: (({ testId, title, metadata, additionalInfo, actions, status, titleTag }: PageHeaderProps) => import("react/jsx-runtime").JSX.Element) & {
+    getTestIds: (testIdProp?: TestIdProp["testId"]) => import("@pega/cosmos-react-core").TestIdsRecord<readonly ["title", "status", "edit-details", "additional-info-icon", "type", "meta-data", "primary-meta-data", "secondary-meta-data", "visual", "primary-action", "secondary-action", "additional-actions", "banner-description", "banner-link", "banner-actions", "banner-image"]>;
+};
+export default _default;
 //# sourceMappingURL=PageTemplates.d.ts.map

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

@@ -1 +1 @@
-{"version":3,"file":"PageTemplates.d.ts","sourceRoot":"","sources":["../../../src/components/PageTemplates/PageTemplates.tsx"],"names":[],"mappings":"AACA,OAAO,KAAK,EAAmB,UAAU,EAAE,MAAM,OAAO,CAAC;AAuBzD,OAAO,KAAK,EACV,kBAAkB,IAAI,sBAAsB,EAC5C,eAAe,IAAI,mBAAmB,EACtC,mBAAmB,EACnB,+BAA+B,EAC/B,iBAAiB,EACjB,UAAU,EACV,WAAW,EAEZ,MAAM,yBAAyB,CAAC;AAWjC,MAAM,WAAW,eAAgB,SAAQ,IAAI,CAAC,iBAAiB,EAAE,OAAO,GAAG,SAAS,CAAC;IACnF,QAAQ,CAAC,EAAE,mBAAmB,CAAC,QAAQ,CAAC,CAAC;IACzC,MAAM,CAAC,EAAE;QAAE,IAAI,EAAE,WAAW,CAAC,SAAS,CAAC,CAAC;QAAC,KAAK,EAAE,MAAM,CAAA;KAAE,CAAC;IACzD,QAAQ,CAAC,EAAE,IAAI,GAAG,IAAI,CAAC;IACvB,cAAc,CAAC,EAAE;QACf,KAAK,EAAE,MAAM,CAAC;QACd,WAAW,CAAC,EAAE,MAAM,CAAC;QACrB,MAAM,EAAE,mBAAmB,CAAC,QAAQ,CAAC,CAAC;QACtC,MAAM,CAAC,EAAE,CAAC,CAAC,EAAE,UAAU,CAAC,iBAAiB,CAAC,KAAK,IAAI,CAAC;KACrD,CAAC;CACH;AAED,KAAK,gBAAgB,GAAG,QAAQ,GAAG,eAAe,CAAC;AAEnD,MAAM,WAAW,kBACf,SAAQ,UAAU,CAAC,sBAAsB,EAAE,gBAAgB,CAAC,EAC1D,eAAe;CAAG;AAEtB,MAAM,WAAW,eACf,SAAQ,UAAU,CAAC,mBAAmB,EAAE,gBAAgB,CAAC,EACvD,eAAe;CAAG;AA6BtB,eAAO,MAAM,UAAU,yGAiCtB,CAAC;AAIF,eAAO,MAAM,UAAU,GAAI,gEAOxB,eAAe,4CAkDjB,CAAC;AAEF,eAAO,MAAM,UAAU,EAAE,+BAA+B,CAAC,eAAe,CAgBvE,CAAC;AAEF,eAAO,MAAM,aAAa,EAAE,+BAA+B,CAAC,kBAAkB,CAoB7E,CAAC"}
+{"version":3,"file":"PageTemplates.d.ts","sourceRoot":"","sources":["../../../src/components/PageTemplates/PageTemplates.tsx"],"names":[],"mappings":"AACA,OAAO,KAAK,EAAmB,UAAU,EAAE,MAAM,OAAO,CAAC;AA0BzD,OAAO,KAAK,EACV,kBAAkB,IAAI,sBAAsB,EAC5C,eAAe,IAAI,mBAAmB,EACtC,mBAAmB,EACnB,iBAAiB,EACjB,UAAU,EACV,WAAW,EAEX,UAAU,EACV,+BAA+B,EAChC,MAAM,yBAAyB,CAAC;AAQjC,MAAM,WAAW,mBAAoB,SAAQ,UAAU;IACrD,KAAK,EAAE,MAAM,CAAC;IACd,WAAW,CAAC,EAAE,MAAM,CAAC;IACrB,MAAM,EAAE,mBAAmB,CAAC,QAAQ,CAAC,CAAC;IACtC,MAAM,CAAC,EAAE,CAAC,CAAC,EAAE,UAAU,CAAC,iBAAiB,CAAC,KAAK,IAAI,CAAC;CACrD;AACD,MAAM,WAAW,eAAgB,SAAQ,IAAI,CAAC,iBAAiB,EAAE,OAAO,GAAG,SAAS,CAAC,EAAE,UAAU;IAC/F,QAAQ,CAAC,EAAE,mBAAmB,CAAC,QAAQ,CAAC,CAAC;IACzC,MAAM,CAAC,EAAE;QAAE,IAAI,EAAE,WAAW,CAAC,SAAS,CAAC,CAAC;QAAC,KAAK,EAAE,MAAM,CAAA;KAAE,CAAC;IACzD,QAAQ,CAAC,EAAE,IAAI,GAAG,IAAI,CAAC;IACvB,cAAc,CAAC,EAAE,mBAAmB,CAAC;CACtC;AAED,KAAK,gBAAgB,GAAG,QAAQ,GAAG,eAAe,CAAC;AAEnD,MAAM,WAAW,kBACf,SAAQ,UAAU,CAAC,sBAAsB,EAAE,gBAAgB,CAAC,EAC1D,eAAe,EACf,UAAU;CAAG;AAEjB,MAAM,WAAW,eACf,SAAQ,UAAU,CAAC,mBAAmB,EAAE,gBAAgB,CAAC,EACvD,eAAe,EACf,UAAU;CAAG;AA6BjB,eAAO,MAAM,UAAU,yGA8BtB,CAAC;AAIF,eAAO,MAAM,UAAU,GAAI,wEAQxB,eAAe,4CAuEjB,CAAC;AAEF,eAAO,MAAM,UAAU,EAAE,+BAA+B,CAAC,eAAe,CAgBvE,CAAC;AAEF,eAAO,MAAM,aAAa,EAAE,+BAA+B,CAAC,kBAAkB,CAoB7E,CAAC;kGA/GC,eAAe;;;AAiHlB,wBAA6D"}

package/lib/components/PageTemplates/PageTemplates.js

@@ -1,14 +1,11 @@
 import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
 import { forwardRef, useMemo, useRef } from 'react';
 import styled, { css } from 'styled-components';
-import { OneColumnPage as CoreOneColumnPage, TabbedPage as CoreTabbedPage, Flex, Status, SummaryItem, Text, Button, Popover, FieldValueList, defaultThemeProp, useI18n, StyledSummaryItemActions, registerIcon, StyledRegion, MetaList, StyledBreadcrumbs, StyledPageHeader, AdditionalInfo } from '@pega/cosmos-react-core';
-import * as nodesDownIcon from '@pega/cosmos-react-core/lib/components/Icon/icons/nodes-down.icon';
-import * as informationIcon from '@pega/cosmos-react-core/lib/components/Icon/icons/information.icon';
-import { StyledForm } from '@pega/cosmos-react-core/lib/components/MultiStepForm/MultiStepForm';
+import { OneColumnPage as CoreOneColumnPage, TabbedPage as CoreTabbedPage, Flex, Status, SummaryItem, Text, Button, Popover, FieldValueList, defaultThemeProp, useI18n, StyledSummaryItemActions, StyledRegion, MetaList, StyledBreadcrumbs, StyledPageHeader, AdditionalInfo, useTestIds, withTestIds, useElement, Tooltip } from '@pega/cosmos-react-core';
 import { StyledBanner } from '@pega/cosmos-react-core/lib/components/Banner/Banner';
 import { StyledTabs } from '@pega/cosmos-react-core/lib/components/Tabs/Tabs.styles';
 import { StyledWorkbench } from '../Workbench/Workbench.styles';
-registerIcon(nodesDownIcon, informationIcon);
+import { getPageHeaderTestIds } from './PageTemplates.test-ids';
 const StyledTextWithEllipsis = styled(Text) `
   overflow: hidden;
   white-space: nowrap;
@@ -28,9 +25,9 @@ const StyledHeaderContent = styled(SummaryItem) `
     align-self: start;
   }
 `;
-export const StyledPage = styled.div(({ theme: { base: { spacing, palette: { 'primary-background': primaryBackground } } } }) => {
+export const StyledPage = styled.div(({ theme: { base: { spacing } } }) => {
     return css `
-      background: ${primaryBackground};
+      background: none;
       height: 100%;
 
       ${StyledBanner},
@@ -44,8 +41,8 @@ export const StyledPage = styled.div(({ theme: { base: { spacing, palette: { 'pr
         margin: 0 calc(-2 * ${spacing});
       }
 
-      ${StyledRegion} ${StyledForm} {
-        max-width: 80ch;
+      ${StyledRegion} ${StyledTabs} {
+        margin-block-start: 0;
       }
 
       ${StyledPageHeader} > ${StyledBreadcrumbs} {
@@ -54,14 +51,16 @@ export const StyledPage = styled.div(({ theme: { base: { spacing, palette: { 'pr
     `;
 });
 StyledPage.defaultProps = defaultThemeProp;
-export const PageHeader = ({ title, metadata, additionalInfo, actions, status, titleTag }) => {
+export const PageHeader = ({ testId, title, metadata, additionalInfo, actions, status, titleTag }) => {
     const t = useI18n();
+    const [el, setEl] = useElement();
+    const testIds = useTestIds(testId, getPageHeaderTestIds);
     const metaListItems = useMemo(() => metadata?.map(({ name, value }) => `${name}: ${value}`), [metadata]);
     const infoDialogHandle = useRef(null);
-    return (_jsx(StyledHeaderContent, { container: true, primary: _jsxs(Flex, { container: { alignItems: 'center', gap: 0.5, wrap: 'wrap' }, children: [_jsxs(Flex, { container: { gap: 0.5, alignItems: 'end' }, item: { shrink: 0 }, children: [_jsx(StyledTextWithEllipsis, { variant: 'h1', forwardedAs: titleTag, children: title }), additionalInfo && (_jsx(AdditionalInfo, { heading: additionalInfo.title, dialogHandle: infoDialogHandle, children: _jsxs(Flex, { container: { direction: 'column', alignItems: 'start', gap: 2 }, children: [_jsxs(Flex, { container: { direction: 'column', gap: 1 }, item: { grow: 1, alignSelf: 'stretch' }, children: [additionalInfo.description && _jsx(Text, { as: 'p', children: additionalInfo.description }), _jsx(FieldValueList, { variant: 'inline', fields: additionalInfo.fields })] }), additionalInfo.onEdit && (_jsx(Button, { onClick: (e) => {
+    return (_jsx(StyledHeaderContent, { testId: testId, container: true, primary: _jsxs(Flex, { container: { alignItems: 'center', gap: 0.5, wrap: 'wrap' }, children: [_jsxs(Flex, { container: { gap: 0.5, alignItems: 'end' }, item: { shrink: 0 }, children: [_jsx(StyledTextWithEllipsis, { "data-testid": testIds.title, variant: 'h1', as: titleTag, ref: setEl, children: title }), el && (_jsx(Tooltip, { target: el, smart: true, showDelay: 'none', hideDelay: 'none', children: title })), additionalInfo && (_jsx(AdditionalInfo, { "data-testid": additionalInfo.testId, heading: additionalInfo.title, dialogHandle: infoDialogHandle, children: _jsxs(Flex, { container: { direction: 'column', alignItems: 'start', gap: 2 }, children: [_jsxs(Flex, { container: { direction: 'column', gap: 1 }, item: { grow: 1, alignSelf: 'stretch' }, children: [additionalInfo.description && _jsx(Text, { as: 'p', children: additionalInfo.description }), _jsx(FieldValueList, { variant: 'inline', fields: additionalInfo.fields })] }), additionalInfo.onEdit && (_jsx(Button, { "data-testid": testIds.editDetails, onClick: (e) => {
                                             infoDialogHandle.current?.close();
                                             additionalInfo.onEdit?.(e);
-                                        }, children: t('edit_details') }))] }) }))] }), status && _jsx(Status, { variant: status.type, children: status.label })] }), secondary: metaListItems && _jsx(MetaList, { items: metaListItems }), actions: actions }));
+                                        }, children: t('edit_details') }))] }) }))] }), status && (_jsx(Status, { "data-testid": testIds.status, variant: status.type, children: status.label }))] }), secondary: metaListItems && _jsx(MetaList, { items: metaListItems }), actions: actions }));
 };
 export const TabbedPage = forwardRef(function TabbedPage({ tabs, ...restProps }, ref) {
     return (_jsx(CoreTabbedPage, { ...restProps, as: StyledPage, header: _jsx(PageHeader, { ...restProps }), tabs: tabs, ref: ref, scrollContent: true }));
@@ -69,4 +68,5 @@ export const TabbedPage = forwardRef(function TabbedPage({ tabs, ...restProps },
 export const OneColumnPage = forwardRef(function OneColumnPage({ a, ...restProps }, ref) {
     return (_jsx(CoreOneColumnPage, { ...restProps, as: StyledPage, header: _jsx(PageHeader, { ...restProps }), scrollContent: true, a: a, ref: ref }));
 });
+export default withTestIds(PageHeader, getPageHeaderTestIds);
 //# sourceMappingURL=PageTemplates.js.map

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

@@ -1 +1 @@
-{"version":3,"file":"PageTemplates.js","sourceRoot":"","sources":["../../../src/components/PageTemplates/PageTemplates.tsx"],"names":[],"mappings":"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","sourcesContent":["import { forwardRef, useMemo, useRef } from 'react';\nimport type { PropsWithoutRef, MouseEvent } from 'react';\nimport styled, { css } from 'styled-components';\n\nimport {\n  OneColumnPage as CoreOneColumnPage,\n  TabbedPage as CoreTabbedPage,\n  Flex,\n  Status,\n  SummaryItem,\n  Text,\n  Button,\n  Popover,\n  FieldValueList,\n  defaultThemeProp,\n  useI18n,\n  StyledSummaryItemActions,\n  registerIcon,\n  StyledRegion,\n  MetaList,\n  StyledBreadcrumbs,\n  StyledPageHeader,\n  AdditionalInfo\n} from '@pega/cosmos-react-core';\nimport type {\n  OneColumnPageProps as CoreOneColumnPageProps,\n  TabbedPageProps as CoreTabbedPageProps,\n  FieldValueListProps,\n  ForwardRefForwardPropsComponent,\n  PageTemplateProps,\n  OmitStrict,\n  StatusProps,\n  DialogHandleValue\n} from '@pega/cosmos-react-core';\nimport * as nodesDownIcon from '@pega/cosmos-react-core/lib/components/Icon/icons/nodes-down.icon';\nimport * as informationIcon from '@pega/cosmos-react-core/lib/components/Icon/icons/information.icon';\nimport { StyledForm } from '@pega/cosmos-react-core/lib/components/MultiStepForm/MultiStepForm';\nimport { StyledBanner } from '@pega/cosmos-react-core/lib/components/Banner/Banner';\nimport { StyledTabs } from '@pega/cosmos-react-core/lib/components/Tabs/Tabs.styles';\n\nimport { StyledWorkbench } from '../Workbench/Workbench.styles';\n\nregisterIcon(nodesDownIcon, informationIcon);\n\nexport interface PageHeaderProps extends Pick<PageTemplateProps, 'title' | 'actions'> {\n  metadata?: FieldValueListProps['fields'];\n  status?: { type: StatusProps['variant']; label: string };\n  titleTag?: 'h1' | 'h2';\n  additionalInfo?: {\n    title: string;\n    description?: string;\n    fields: FieldValueListProps['fields'];\n    onEdit?: (e: MouseEvent<HTMLButtonElement>) => void;\n  };\n}\n\ntype OmittedPageProps = 'header' | 'scrollContent';\n\nexport interface OneColumnPageProps\n  extends OmitStrict<CoreOneColumnPageProps, OmittedPageProps>,\n    PageHeaderProps {}\n\nexport interface TabbedPageProps\n  extends OmitStrict<CoreTabbedPageProps, OmittedPageProps>,\n    PageHeaderProps {}\n\nconst StyledTextWithEllipsis: typeof Text = styled(Text)`\n  overflow: hidden;\n  white-space: nowrap;\n  text-overflow: ellipsis;\n  line-height: 1.15;\n`;\n\nconst StyledInfoPopover = styled(Popover)(({\n  theme: {\n    base: { 'content-width': contentWidth }\n  }\n}) => {\n  return css`\n    min-width: ${contentWidth.sm};\n    max-width: ${contentWidth.md};\n    overflow-wrap: break-word;\n  `;\n});\n\nStyledInfoPopover.defaultProps = defaultThemeProp;\n\nconst StyledHeaderContent = styled(SummaryItem)`\n  ${StyledSummaryItemActions} {\n    align-self: start;\n  }\n`;\n\nexport const StyledPage = styled.div(\n  ({\n    theme: {\n      base: {\n        spacing,\n        palette: { 'primary-background': primaryBackground }\n      }\n    }\n  }) => {\n    return css`\n      background: ${primaryBackground};\n      height: 100%;\n\n      ${StyledBanner},\n      ${StyledTabs} {\n        margin-block-start: calc(1.5 * ${spacing});\n      }\n\n      ${StyledRegion} ${StyledWorkbench} {\n        position: absolute;\n        width: 100%;\n        margin: 0 calc(-2 * ${spacing});\n      }\n\n      ${StyledRegion} ${StyledForm} {\n        max-width: 80ch;\n      }\n\n      ${StyledPageHeader} > ${StyledBreadcrumbs} {\n        margin-block-end: 0;\n      }\n    `;\n  }\n);\n\nStyledPage.defaultProps = defaultThemeProp;\n\nexport const PageHeader = ({\n  title,\n  metadata,\n  additionalInfo,\n  actions,\n  status,\n  titleTag\n}: PageHeaderProps) => {\n  const t = useI18n();\n\n  const metaListItems = useMemo(\n    () => metadata?.map(({ name, value }) => `${name}: ${value}`),\n    [metadata]\n  );\n\n  const infoDialogHandle = useRef<DialogHandleValue>(null);\n\n  return (\n    <StyledHeaderContent\n      container\n      primary={\n        <Flex container={{ alignItems: 'center', gap: 0.5, wrap: 'wrap' }}>\n          <Flex container={{ gap: 0.5, alignItems: 'end' }} item={{ shrink: 0 }}>\n            <StyledTextWithEllipsis variant='h1' forwardedAs={titleTag}>\n              {title}\n            </StyledTextWithEllipsis>\n            {additionalInfo && (\n              <AdditionalInfo heading={additionalInfo.title} dialogHandle={infoDialogHandle}>\n                <Flex container={{ direction: 'column', alignItems: 'start', gap: 2 }}>\n                  <Flex\n                    container={{ direction: 'column', gap: 1 }}\n                    item={{ grow: 1, alignSelf: 'stretch' }}\n                  >\n                    {additionalInfo.description && <Text as='p'>{additionalInfo.description}</Text>}\n                    <FieldValueList variant='inline' fields={additionalInfo.fields} />\n                  </Flex>\n                  {additionalInfo.onEdit && (\n                    <Button\n                      onClick={(e: MouseEvent<HTMLButtonElement>) => {\n                        infoDialogHandle.current?.close();\n                        additionalInfo.onEdit?.(e);\n                      }}\n                    >\n                      {t('edit_details')}\n                    </Button>\n                  )}\n                </Flex>\n              </AdditionalInfo>\n            )}\n          </Flex>\n          {status && <Status variant={status.type}>{status.label}</Status>}\n        </Flex>\n      }\n      secondary={metaListItems && <MetaList items={metaListItems} />}\n      actions={actions}\n    />\n  );\n};\n\nexport const TabbedPage: ForwardRefForwardPropsComponent<TabbedPageProps> = forwardRef(\n  function TabbedPage(\n    { tabs, ...restProps }: PropsWithoutRef<TabbedPageProps>,\n    ref: TabbedPageProps['ref']\n  ) {\n    return (\n      <CoreTabbedPage\n        {...restProps}\n        as={StyledPage}\n        header={<PageHeader {...restProps} />}\n        tabs={tabs}\n        ref={ref}\n        scrollContent\n      />\n    );\n  }\n);\n\nexport const OneColumnPage: ForwardRefForwardPropsComponent<OneColumnPageProps> = forwardRef(\n  function OneColumnPage(\n    {\n      a,\n\n      ...restProps\n    }: PropsWithoutRef<OneColumnPageProps>,\n    ref: OneColumnPageProps['ref']\n  ) {\n    return (\n      <CoreOneColumnPage\n        {...restProps}\n        as={StyledPage}\n        header={<PageHeader {...restProps} />}\n        scrollContent\n        a={a}\n        ref={ref}\n      />\n    );\n  }\n);\n"]}
+{"version":3,"file":"PageTemplates.js","sourceRoot":"","sources":["../../../src/components/PageTemplates/PageTemplates.tsx"],"names":[],"mappings":"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","sourcesContent":["import { forwardRef, useMemo, useRef } from 'react';\nimport type { PropsWithoutRef, MouseEvent } from 'react';\nimport styled, { css } from 'styled-components';\n\nimport {\n  OneColumnPage as CoreOneColumnPage,\n  TabbedPage as CoreTabbedPage,\n  Flex,\n  Status,\n  SummaryItem,\n  Text,\n  Button,\n  Popover,\n  FieldValueList,\n  defaultThemeProp,\n  useI18n,\n  StyledSummaryItemActions,\n  StyledRegion,\n  MetaList,\n  StyledBreadcrumbs,\n  StyledPageHeader,\n  AdditionalInfo,\n  useTestIds,\n  withTestIds,\n  useElement,\n  Tooltip\n} from '@pega/cosmos-react-core';\nimport type {\n  OneColumnPageProps as CoreOneColumnPageProps,\n  TabbedPageProps as CoreTabbedPageProps,\n  FieldValueListProps,\n  PageTemplateProps,\n  OmitStrict,\n  StatusProps,\n  DialogHandleValue,\n  TestIdProp,\n  ForwardRefForwardPropsComponent\n} from '@pega/cosmos-react-core';\nimport { StyledBanner } from '@pega/cosmos-react-core/lib/components/Banner/Banner';\nimport { StyledTabs } from '@pega/cosmos-react-core/lib/components/Tabs/Tabs.styles';\n\nimport { StyledWorkbench } from '../Workbench/Workbench.styles';\n\nimport { getPageHeaderTestIds } from './PageTemplates.test-ids';\n\nexport interface AdditionalInfoProps extends TestIdProp {\n  title: string;\n  description?: string;\n  fields: FieldValueListProps['fields'];\n  onEdit?: (e: MouseEvent<HTMLButtonElement>) => void;\n}\nexport interface PageHeaderProps extends Pick<PageTemplateProps, 'title' | 'actions'>, TestIdProp {\n  metadata?: FieldValueListProps['fields'];\n  status?: { type: StatusProps['variant']; label: string };\n  titleTag?: 'h1' | 'h2';\n  additionalInfo?: AdditionalInfoProps;\n}\n\ntype OmittedPageProps = 'header' | 'scrollContent';\n\nexport interface OneColumnPageProps\n  extends OmitStrict<CoreOneColumnPageProps, OmittedPageProps>,\n    PageHeaderProps,\n    TestIdProp {}\n\nexport interface TabbedPageProps\n  extends OmitStrict<CoreTabbedPageProps, OmittedPageProps>,\n    PageHeaderProps,\n    TestIdProp {}\n\nconst StyledTextWithEllipsis: typeof Text = styled(Text)`\n  overflow: hidden;\n  white-space: nowrap;\n  text-overflow: ellipsis;\n  line-height: 1.15;\n`;\n\nconst StyledInfoPopover = styled(Popover)(({\n  theme: {\n    base: { 'content-width': contentWidth }\n  }\n}) => {\n  return css`\n    min-width: ${contentWidth.sm};\n    max-width: ${contentWidth.md};\n    overflow-wrap: break-word;\n  `;\n});\n\nStyledInfoPopover.defaultProps = defaultThemeProp;\n\nconst StyledHeaderContent = styled(SummaryItem)`\n  ${StyledSummaryItemActions} {\n    align-self: start;\n  }\n`;\n\nexport const StyledPage = styled.div(\n  ({\n    theme: {\n      base: { spacing }\n    }\n  }) => {\n    return css`\n      background: none;\n      height: 100%;\n\n      ${StyledBanner},\n      ${StyledTabs} {\n        margin-block-start: calc(1.5 * ${spacing});\n      }\n\n      ${StyledRegion} ${StyledWorkbench} {\n        position: absolute;\n        width: 100%;\n        margin: 0 calc(-2 * ${spacing});\n      }\n\n      ${StyledRegion} ${StyledTabs} {\n        margin-block-start: 0;\n      }\n\n      ${StyledPageHeader} > ${StyledBreadcrumbs} {\n        margin-block-end: 0;\n      }\n    `;\n  }\n);\n\nStyledPage.defaultProps = defaultThemeProp;\n\nexport const PageHeader = ({\n  testId,\n  title,\n  metadata,\n  additionalInfo,\n  actions,\n  status,\n  titleTag\n}: PageHeaderProps) => {\n  const t = useI18n();\n  const [el, setEl] = useElement();\n  const testIds = useTestIds(testId, getPageHeaderTestIds);\n  const metaListItems = useMemo(\n    () => metadata?.map(({ name, value }) => `${name}: ${value}`),\n    [metadata]\n  );\n\n  const infoDialogHandle = useRef<DialogHandleValue>(null);\n\n  return (\n    <StyledHeaderContent\n      testId={testId}\n      container\n      primary={\n        <Flex container={{ alignItems: 'center', gap: 0.5, wrap: 'wrap' }}>\n          <Flex container={{ gap: 0.5, alignItems: 'end' }} item={{ shrink: 0 }}>\n            <StyledTextWithEllipsis\n              data-testid={testIds.title}\n              variant='h1'\n              as={titleTag}\n              ref={setEl}\n            >\n              {title}\n            </StyledTextWithEllipsis>\n            {el && (\n              <Tooltip target={el} smart showDelay='none' hideDelay='none'>\n                {title}\n              </Tooltip>\n            )}\n            {additionalInfo && (\n              <AdditionalInfo\n                data-testid={additionalInfo.testId}\n                heading={additionalInfo.title}\n                dialogHandle={infoDialogHandle}\n              >\n                <Flex container={{ direction: 'column', alignItems: 'start', gap: 2 }}>\n                  <Flex\n                    container={{ direction: 'column', gap: 1 }}\n                    item={{ grow: 1, alignSelf: 'stretch' }}\n                  >\n                    {additionalInfo.description && <Text as='p'>{additionalInfo.description}</Text>}\n                    <FieldValueList variant='inline' fields={additionalInfo.fields} />\n                  </Flex>\n                  {additionalInfo.onEdit && (\n                    <Button\n                      data-testid={testIds.editDetails}\n                      onClick={(e: MouseEvent<HTMLButtonElement>) => {\n                        infoDialogHandle.current?.close();\n                        additionalInfo.onEdit?.(e);\n                      }}\n                    >\n                      {t('edit_details')}\n                    </Button>\n                  )}\n                </Flex>\n              </AdditionalInfo>\n            )}\n          </Flex>\n          {status && (\n            <Status data-testid={testIds.status} variant={status.type}>\n              {status.label}\n            </Status>\n          )}\n        </Flex>\n      }\n      secondary={metaListItems && <MetaList items={metaListItems} />}\n      actions={actions}\n    />\n  );\n};\n\nexport const TabbedPage: ForwardRefForwardPropsComponent<TabbedPageProps> = forwardRef(\n  function TabbedPage(\n    { tabs, ...restProps }: PropsWithoutRef<TabbedPageProps>,\n    ref: TabbedPageProps['ref']\n  ) {\n    return (\n      <CoreTabbedPage\n        {...restProps}\n        as={StyledPage}\n        header={<PageHeader {...restProps} />}\n        tabs={tabs}\n        ref={ref}\n        scrollContent\n      />\n    );\n  }\n);\n\nexport const OneColumnPage: ForwardRefForwardPropsComponent<OneColumnPageProps> = forwardRef(\n  function OneColumnPage(\n    {\n      a,\n\n      ...restProps\n    }: PropsWithoutRef<OneColumnPageProps>,\n    ref: OneColumnPageProps['ref']\n  ) {\n    return (\n      <CoreOneColumnPage\n        {...restProps}\n        as={StyledPage}\n        header={<PageHeader {...restProps} />}\n        scrollContent\n        a={a}\n        ref={ref}\n      />\n    );\n  }\n);\n\nexport default withTestIds(PageHeader, getPageHeaderTestIds);\n"]}