@pega/cosmos-react-demos 5.0.0-dev.2.1 → 5.0.0-dev.4.0

package/lib/build/PageTemplates/GalleryPage.stories.js

@@ -1,50 +0,0 @@
-import { jsx as _jsx } from "react/jsx-runtime";
-import { action } from '@storybook/addon-actions';
-import { linkTo } from '@storybook/addon-links';
-import { GalleryPage } from '@pega/cosmos-react-build';
-import { AppShellDemo } from '../AppShell/AppShell.stories';
-import { getOverviewCardData } from './GalleryPage.mocks';
-export default {
-    title: 'Build/PageTemplates',
-    component: GalleryPage,
-    parameters: {
-        layout: 'fullscreen'
-    }
-};
-export const GalleryPageDemo = (args) => {
-    return (_jsx(AppShellDemo, { main: _jsx(GalleryPage, { title: args.title || 'Application', description: args.description, image: args.showImage
-                ? {
-                    src: 'https://www.pega.com/sites/default/files/styles/2560/public/media/images/2019-01/pega-logo_0.png',
-                    alt: 'Image for the banner'
-                }
-                : undefined, actions: args.showActions
-                ? [
-                    {
-                        label: 'New application',
-                        onClick: action('Banner action clicked!')
-                    }
-                ]
-                : undefined, link: args.showActions ? { label: 'Learn more', href: '#' } : undefined, items: args.showEmptyState ? [] : getOverviewCardData(), emptyState: {
-                heading: args.emptyStateHeading,
-                description: args.emptyStateDescription
-            }, onItemClick: args.disableCrossLinking ? action('Clicked interactive card') : linkTo('Build/AppShell') }), hideNav: true, appName: 'Compass App', text: 'Launchpad (Main)' }));
-};
-GalleryPageDemo.args = {
-    title: 'Applications',
-    description: 'Edit or create new applications',
-    showImage: true,
-    showActions: true,
-    showEmptyState: false,
-    emptyStateHeading: 'Create your first application',
-    emptyStateDescription: "You're on your way to creating your first professional application."
-};
-GalleryPageDemo.argTypes = {
-    title: { control: { type: 'text' } },
-    description: { control: { type: 'text' } },
-    showImage: { control: { type: 'boolean' } },
-    showActions: { control: { type: 'boolean' } },
-    showEmptyState: { control: { type: 'boolean' } },
-    emptyStateHeading: { control: { type: 'text' } },
-    emptyStateDescription: { control: { type: 'text' } }
-};
-//# sourceMappingURL=GalleryPage.stories.js.map

package/lib/build/PageTemplates/GalleryPage.stories.js.map

@@ -1 +0,0 @@
-{"version":3,"file":"GalleryPage.stories.js","sourceRoot":"","sources":["../../../src/build/PageTemplates/GalleryPage.stories.tsx"],"names":[],"mappings":";AACA,OAAO,EAAE,MAAM,EAAE,MAAM,0BAA0B,CAAC;AAClD,OAAO,EAAE,MAAM,EAAE,MAAM,wBAAwB,CAAC;AAEhD,OAAO,EAAE,WAAW,EAAE,MAAM,0BAA0B,CAAC;AAGvD,OAAO,EAAE,YAAY,EAAE,MAAM,8BAA8B,CAAC;AAE5D,OAAO,EAAE,mBAAmB,EAAE,MAAM,qBAAqB,CAAC;AAE1D,eAAe;IACb,KAAK,EAAE,qBAAqB;IAC5B,SAAS,EAAE,WAAW;IACtB,UAAU,EAAE;QACV,MAAM,EAAE,YAAY;KACrB;CACM,CAAC;AAaV,MAAM,CAAC,MAAM,eAAe,GAA6B,CAAC,IAAqB,EAAE,EAAE;IACjF,OAAO,CACL,KAAC,YAAY,IACX,IAAI,EACF,KAAC,WAAW,IACV,KAAK,EAAE,IAAI,CAAC,KAAK,IAAI,aAAa,EAClC,WAAW,EAAE,IAAI,CAAC,WAAW,EAC7B,KAAK,EACH,IAAI,CAAC,SAAS;gBACZ,CAAC,CAAC;oBACE,GAAG,EAAE,kGAAkG;oBACvG,GAAG,EAAE,sBAAsB;iBAC5B;gBACH,CAAC,CAAC,SAAS,EAEf,OAAO,EACL,IAAI,CAAC,WAAW;gBACd,CAAC,CAAC;oBACE;wBACE,KAAK,EAAE,iBAAiB;wBACxB,OAAO,EAAE,MAAM,CAAC,wBAAwB,CAAC;qBAC1C;iBACF;gBACH,CAAC,CAAC,SAAS,EAEf,IAAI,EAAE,IAAI,CAAC,WAAW,CAAC,CAAC,CAAC,EAAE,KAAK,EAAE,YAAY,EAAE,IAAI,EAAE,GAAG,EAAE,CAAC,CAAC,CAAC,SAAS,EACvE,KAAK,EAAE,IAAI,CAAC,cAAc,CAAC,CAAC,CAAC,EAAE,CAAC,CAAC,CAAC,mBAAmB,EAAE,EACvD,UAAU,EAAE;gBACV,OAAO,EAAE,IAAI,CAAC,iBAAiB;gBAC/B,WAAW,EAAE,IAAI,CAAC,qBAAqB;aACxC,EACD,WAAW,EACT,IAAI,CAAC,mBAAmB,CAAC,CAAC,CAAC,MAAM,CAAC,0BAA0B,CAAC,CAAC,CAAC,CAAC,MAAM,CAAC,gBAAgB,CAAC,GAE1F,EAEJ,OAAO,QACP,OAAO,EAAC,aAAa,EACrB,IAAI,EAAC,kBAAkB,GACvB,CACH,CAAC;AACJ,CAAC,CAAC;AAEF,eAAe,CAAC,IAAI,GAAG;IACrB,KAAK,EAAE,cAAc;IACrB,WAAW,EAAE,iCAAiC;IAC9C,SAAS,EAAE,IAAI;IACf,WAAW,EAAE,IAAI;IACjB,cAAc,EAAE,KAAK;IACrB,iBAAiB,EAAE,+BAA+B;IAClD,qBAAqB,EAAE,qEAAqE;CAC7F,CAAC;AAEF,eAAe,CAAC,QAAQ,GAAG;IACzB,KAAK,EAAE,EAAE,OAAO,EAAE,EAAE,IAAI,EAAE,MAAM,EAAE,EAAE;IACpC,WAAW,EAAE,EAAE,OAAO,EAAE,EAAE,IAAI,EAAE,MAAM,EAAE,EAAE;IAC1C,SAAS,EAAE,EAAE,OAAO,EAAE,EAAE,IAAI,EAAE,SAAS,EAAE,EAAE;IAC3C,WAAW,EAAE,EAAE,OAAO,EAAE,EAAE,IAAI,EAAE,SAAS,EAAE,EAAE;IAC7C,cAAc,EAAE,EAAE,OAAO,EAAE,EAAE,IAAI,EAAE,SAAS,EAAE,EAAE;IAChD,iBAAiB,EAAE,EAAE,OAAO,EAAE,EAAE,IAAI,EAAE,MAAM,EAAE,EAAE;IAChD,qBAAqB,EAAE,EAAE,OAAO,EAAE,EAAE,IAAI,EAAE,MAAM,EAAE,EAAE;CACrD,CAAC","sourcesContent":["import type { Meta, StoryFn } from '@storybook/react';\nimport { action } from '@storybook/addon-actions';\nimport { linkTo } from '@storybook/addon-links';\n\nimport { GalleryPage } from '@pega/cosmos-react-build';\nimport type { PageBannerProps } from '@pega/cosmos-react-build';\n\nimport { AppShellDemo } from '../AppShell/AppShell.stories';\n\nimport { getOverviewCardData } from './GalleryPage.mocks';\n\nexport default {\n  title: 'Build/PageTemplates',\n  component: GalleryPage,\n  parameters: {\n    layout: 'fullscreen'\n  }\n} as Meta;\n\ninterface GalleryPageArgs {\n  title: PageBannerProps['title'];\n  description: PageBannerProps['description'];\n  showImage?: boolean;\n  showActions?: boolean;\n  showEmptyState: boolean;\n  emptyStateHeading: string;\n  emptyStateDescription: string;\n  disableCrossLinking?: boolean;\n}\n\nexport const GalleryPageDemo: StoryFn<GalleryPageArgs> = (args: GalleryPageArgs) => {\n  return (\n    <AppShellDemo\n      main={\n        <GalleryPage\n          title={args.title || 'Application'}\n          description={args.description}\n          image={\n            args.showImage\n              ? {\n                  src: 'https://www.pega.com/sites/default/files/styles/2560/public/media/images/2019-01/pega-logo_0.png',\n                  alt: 'Image for the banner'\n                }\n              : undefined\n          }\n          actions={\n            args.showActions\n              ? [\n                  {\n                    label: 'New application',\n                    onClick: action('Banner action clicked!')\n                  }\n                ]\n              : undefined\n          }\n          link={args.showActions ? { label: 'Learn more', href: '#' } : undefined}\n          items={args.showEmptyState ? [] : getOverviewCardData()}\n          emptyState={{\n            heading: args.emptyStateHeading,\n            description: args.emptyStateDescription\n          }}\n          onItemClick={\n            args.disableCrossLinking ? action('Clicked interactive card') : linkTo('Build/AppShell')\n          }\n        />\n      }\n      hideNav\n      appName='Compass App'\n      text='Launchpad (Main)'\n    />\n  );\n};\n\nGalleryPageDemo.args = {\n  title: 'Applications',\n  description: 'Edit or create new applications',\n  showImage: true,\n  showActions: true,\n  showEmptyState: false,\n  emptyStateHeading: 'Create your first application',\n  emptyStateDescription: \"You're on your way to creating your first professional application.\"\n};\n\nGalleryPageDemo.argTypes = {\n  title: { control: { type: 'text' } },\n  description: { control: { type: 'text' } },\n  showImage: { control: { type: 'boolean' } },\n  showActions: { control: { type: 'boolean' } },\n  showEmptyState: { control: { type: 'boolean' } },\n  emptyStateHeading: { control: { type: 'text' } },\n  emptyStateDescription: { control: { type: 'text' } }\n};\n"]}

package/lib/build/PageTemplates/PageTemplates.mocks.d.ts

@@ -1,17 +0,0 @@
-/// <reference types="react" />
-import { FormControlProps } from '@pega/cosmos-react-core';
-import { AppShellProps } from '@pega/cosmos-react-build';
-interface Field extends FormControlProps {
-    help?: string;
-    error?: string;
-    validator: (this: Field) => boolean;
-}
-export interface AppShellStory {
-    main?: AppShellProps['main'];
-    hideNavigation?: boolean;
-}
-export declare const initFields: () => Field[];
-export declare const OneColumnForm: (props: any) => JSX.Element | null;
-export declare const PreviewMainContent: () => JSX.Element;
-export {};
-//# sourceMappingURL=PageTemplates.mocks.d.ts.map

package/lib/build/PageTemplates/PageTemplates.mocks.d.ts.map

@@ -1 +0,0 @@
-{"version":3,"file":"PageTemplates.mocks.d.ts","sourceRoot":"","sources":["../../../src/build/PageTemplates/PageTemplates.mocks.tsx"],"names":[],"mappings":";AAGA,OAAO,EAaL,gBAAgB,EAGjB,MAAM,yBAAyB,CAAC;AAEjC,OAAO,EAAE,aAAa,EAAE,MAAM,0BAA0B,CAAC;AAKzD,UAAU,KAAM,SAAQ,gBAAgB;IACtC,IAAI,CAAC,EAAE,MAAM,CAAC;IACd,KAAK,CAAC,EAAE,MAAM,CAAC;IACf,SAAS,EAAE,CAAC,IAAI,EAAE,KAAK,KAAK,OAAO,CAAC;CACrC;AAED,MAAM,WAAW,aAAa;IAC5B,IAAI,CAAC,EAAE,aAAa,CAAC,MAAM,CAAC,CAAC;IAC7B,cAAc,CAAC,EAAE,OAAO,CAAC;CAC1B;AAGD,eAAO,MAAM,UAAU,QAAO,KAAK,EAmClC,CAAC;AA6BF,eAAO,MAAM,aAAa,UAAW,GAAG,uBA0IvC,CAAC;AAEF,eAAO,MAAM,kBAAkB,mBAe9B,CAAC"}

package/lib/build/PageTemplates/PageTemplates.mocks.js

@@ -1,107 +0,0 @@
-import { jsx as _jsx, Fragment as _Fragment, jsxs as _jsxs } from "react/jsx-runtime";
-import { useReducer, useRef } from 'react';
-import styled from 'styled-components';
-import { Button, Flex, Form, Input, CheckboxGroup, RadioButtonGroup, RadioButton, Checkbox, Select, Option, TextArea, Text, useTheme, useToaster } from '@pega/cosmos-react-core';
-import { RichTextEditor } from '@pega/cosmos-react-rte';
-import { FileInputDemo } from '../../core/File/FileInput.stories';
-import { dataPages, ObjectSelectComp } from '../ObjectSelect/ObjectSelect.mocks';
-// Get initial field properties
-export const initFields = () => {
-    const common = { value: undefined, status: undefined };
-    return [
-        {
-            ...common,
-            name: 'name',
-            required: true,
-            error: 'Please enter first and last name',
-            validator() {
-                if (!this.value)
-                    return false;
-                return /^[a-z]+\s[a-z]+$/i.test(this.value);
-            }
-        },
-        {
-            ...common,
-            name: 'email',
-            required: true,
-            error: 'Enter a @pega.com address',
-            validator() {
-                if (!this.value)
-                    return false;
-                return /^\S+@pega\.com$/.test(this.value);
-            }
-        },
-        {
-            ...common,
-            name: 'notes',
-            required: true,
-            help: 'See how fast you can type 20 characters go',
-            error: 'You need to tell us more than 20 characters',
-            validator() {
-                if (!this.value)
-                    return false;
-                return this.value.length >= 20;
-            }
-        }
-    ];
-};
-// Handles setting of state for all fields
-const fieldReducer = (fields, { target, type }) => {
-    return fields.map(field => {
-        if (field.name === target.name) {
-            field.value = target.value;
-            if (type === 'blur' || field.status === 'error') {
-                if ((field.required || field.value) && !field.validator()) {
-                    field.status = 'error';
-                    field.info = field.error;
-                }
-                else {
-                    field.status = undefined;
-                    field.info = field.help;
-                }
-            }
-        }
-        return field;
-    });
-};
-export const OneColumnForm = (props) => {
-    const editorRef = useRef(null);
-    const [fields, setField] = useReducer(fieldReducer, undefined, initFields);
-    const { push } = useToaster();
-    const name = fields.find(field => field.name === 'name');
-    const email = fields.find(field => field.name === 'email');
-    const notes = fields.find(field => field.name === 'notes');
-    if (!name || !email || !notes)
-        return null;
-    const canSubmit = fields.every(field => field.value && field.validator());
-    const actions = (_jsxs(_Fragment, { children: [_jsx(Button, { name: 'Cancel', variant: 'secondary', onClick: () => {
-                    push({ content: 'Form cancelled!' });
-                }, children: "Cancel" }), _jsx(Button, { name: 'Submit', type: 'submit', variant: 'primary', disabled: !canSubmit, children: "Submit" })] }));
-    const onImageAdded = (image, id) => {
-        const src = URL.createObjectURL(image);
-        editorRef.current?.appendImage({ src, alt: image.name }, id);
-    };
-    return (_jsxs(Form, { actions: actions, onSubmit: (e) => {
-            e.preventDefault();
-            push({ content: 'Form submitted!' });
-        }, style: { maxWidth: '37.5rem' }, children: [_jsx(Text, { variant: 'h4', as: 'h4', children: "Demo Form" }), _jsxs(Flex, { container: { direction: 'column', gap: 2 }, item: { grow: 1 }, children: [_jsx(Input, { name: 'name', label: 'Name', value: name.value, required: name.required, status: name.status, info: 'some help text here', onChange: (e) => setField({ ...e }), onBlur: (e) => setField({ ...e }) }), _jsx(Input, { name: 'email', value: email.value, type: 'email', label: 'Email', required: email.required, status: email.status, info: 'some help text here', onChange: (e) => setField({ ...e }), onBlur: (e) => setField({ ...e }) }), _jsx(CheckboxGroup, { name: 'visited', label: 'Places you have worked', children: ['Cambridge', 'Krakow', 'Hyderabad', 'Bangalore'].map(office => (_jsx(Checkbox, { label: office, onChange: (e) => setField({ ...e }) }, office))) }), _jsx(RadioButtonGroup, { name: 'meetings', label: 'Do you enjoy early morning meetings?', children: ['Yes', "No...no I don't"].map(option => (_jsx(RadioButton, { label: option, onChange: (e) => setField({ ...e }) }, option))) }), _jsxs(Select, { label: 'What would you like to eat?', info: 'FYI: options are limited', children: [_jsx(Option, { children: "choose meal..." }), _jsx(Option, { children: "Pizza" }), _jsx(Option, { children: "Sandwich" }), _jsx(Option, { children: "Salad" })] }), _jsx(ObjectSelectComp, { onSubmit: ({ close }) => close(), onClose: () => null, label: 'Date page', info: 'Choose a when condition from list', items: dataPages, onChange: () => { }, onPreview: () => props.previewCallback() }), _jsx(TextArea, { name: 'notes', required: notes.required, label: 'Meeting Notes', status: notes.status, info: notes.info || notes.help, onChange: (e) => setField({ ...e }), onBlur: (e) => setField({ ...e }) }), _jsx(RichTextEditor, { label: 'Detailed meeting notes', info: 'The rich text editor can be used in forms, comments, and documents', toolbar: [
-                            'inline-styling',
-                            'headers',
-                            'tables',
-                            'links',
-                            'images',
-                            'lists',
-                            'cut-copy-paste',
-                            'indentation'
-                        ], onImageAdded: onImageAdded, ref: editorRef }), _jsx(FileInputDemo, {})] })] }));
-};
-export const PreviewMainContent = () => {
-    const { base: { palette } } = useTheme();
-    const StyledRegion = styled.div `
-    min-height: 120vh;
-    border: dotted 0.1rem ${palette['border-line']};
-    background: ${palette.skeleton};
-  `;
-    return (_jsx(Flex, { as: StyledRegion, container: { alignItems: 'center', justify: 'center' }, children: _jsx(Text, { children: "This is a react region" }) }));
-};
-//# sourceMappingURL=PageTemplates.mocks.js.map

package/lib/build/PageTemplates/PageTemplates.mocks.js.map

@@ -1 +0,0 @@
-{"version":3,"file":"PageTemplates.mocks.js","sourceRoot":"","sources":["../../../src/build/PageTemplates/PageTemplates.mocks.tsx"],"names":[],"mappings":";AAAA,OAAO,EAAsC,UAAU,EAAE,MAAM,EAAE,MAAM,OAAO,CAAC;AAC/E,OAAO,MAAM,MAAM,mBAAmB,CAAC;AAEvC,OAAO,EACL,MAAM,EACN,IAAI,EACJ,IAAI,EACJ,KAAK,EACL,aAAa,EACb,gBAAgB,EAChB,WAAW,EACX,QAAQ,EACR,MAAM,EACN,MAAM,EACN,QAAQ,EACR,IAAI,EAEJ,QAAQ,EACR,UAAU,EACX,MAAM,yBAAyB,CAAC;AACjC,OAAO,EAAE,cAAc,EAAuB,MAAM,wBAAwB,CAAC;AAG7E,OAAO,EAAE,aAAa,EAAE,MAAM,mCAAmC,CAAC;AAClE,OAAO,EAAE,SAAS,EAAE,gBAAgB,EAAE,MAAM,oCAAoC,CAAC;AAajF,+BAA+B;AAC/B,MAAM,CAAC,MAAM,UAAU,GAAG,GAAY,EAAE;IACtC,MAAM,MAAM,GAAG,EAAE,KAAK,EAAE,SAAS,EAAE,MAAM,EAAE,SAAS,EAAE,CAAC;IACvD,OAAO;QACL;YACE,GAAG,MAAM;YACT,IAAI,EAAE,MAAM;YACZ,QAAQ,EAAE,IAAI;YACd,KAAK,EAAE,kCAAkC;YACzC,SAAS;gBACP,IAAI,CAAC,IAAI,CAAC,KAAK;oBAAE,OAAO,KAAK,CAAC;gBAC9B,OAAO,mBAAmB,CAAC,IAAI,CAAC,IAAI,CAAC,KAAK,CAAC,CAAC;YAC9C,CAAC;SACF;QACD;YACE,GAAG,MAAM;YACT,IAAI,EAAE,OAAO;YACb,QAAQ,EAAE,IAAI;YACd,KAAK,EAAE,2BAA2B;YAClC,SAAS;gBACP,IAAI,CAAC,IAAI,CAAC,KAAK;oBAAE,OAAO,KAAK,CAAC;gBAC9B,OAAO,iBAAiB,CAAC,IAAI,CAAC,IAAI,CAAC,KAAK,CAAC,CAAC;YAC5C,CAAC;SACF;QACD;YACE,GAAG,MAAM;YACT,IAAI,EAAE,OAAO;YACb,QAAQ,EAAE,IAAI;YACd,IAAI,EAAE,4CAA4C;YAClD,KAAK,EAAE,6CAA6C;YACpD,SAAS;gBACP,IAAI,CAAC,IAAI,CAAC,KAAK;oBAAE,OAAO,KAAK,CAAC;gBAC9B,OAAO,IAAI,CAAC,KAAK,CAAC,MAAM,IAAI,EAAE,CAAC;YACjC,CAAC;SACF;KACF,CAAC;AACJ,CAAC,CAAC;AAEF,0CAA0C;AAC1C,MAAM,YAAY,GAAG,CACnB,MAAe,EACf,EACE,MAAM,EACN,IAAI,EAGgD,EACtD,EAAE;IACF,OAAO,MAAM,CAAC,GAAG,CAAC,KAAK,CAAC,EAAE;QACxB,IAAI,KAAK,CAAC,IAAI,KAAK,MAAM,CAAC,IAAI,EAAE;YAC9B,KAAK,CAAC,KAAK,GAAG,MAAM,CAAC,KAAK,CAAC;YAC3B,IAAI,IAAI,KAAK,MAAM,IAAI,KAAK,CAAC,MAAM,KAAK,OAAO,EAAE;gBAC/C,IAAI,CAAC,KAAK,CAAC,QAAQ,IAAI,KAAK,CAAC,KAAK,CAAC,IAAI,CAAC,KAAK,CAAC,SAAS,EAAE,EAAE;oBACzD,KAAK,CAAC,MAAM,GAAG,OAAO,CAAC;oBACvB,KAAK,CAAC,IAAI,GAAG,KAAK,CAAC,KAAK,CAAC;iBAC1B;qBAAM;oBACL,KAAK,CAAC,MAAM,GAAG,SAAS,CAAC;oBACzB,KAAK,CAAC,IAAI,GAAG,KAAK,CAAC,IAAI,CAAC;iBACzB;aACF;SACF;QACD,OAAO,KAAK,CAAC;IACf,CAAC,CAAC,CAAC;AACL,CAAC,CAAC;AAEF,MAAM,CAAC,MAAM,aAAa,GAAG,CAAC,KAAU,EAAE,EAAE;IAC1C,MAAM,SAAS,GAAG,MAAM,CAAsB,IAAI,CAAC,CAAC;IACpD,MAAM,CAAC,MAAM,EAAE,QAAQ,CAAC,GAAG,UAAU,CAAC,YAAY,EAAE,SAAS,EAAE,UAAU,CAAC,CAAC;IAC3E,MAAM,EAAE,IAAI,EAAE,GAAG,UAAU,EAAE,CAAC;IAE9B,MAAM,IAAI,GAAG,MAAM,CAAC,IAAI,CAAC,KAAK,CAAC,EAAE,CAAC,KAAK,CAAC,IAAI,KAAK,MAAM,CAAC,CAAC;IACzD,MAAM,KAAK,GAAG,MAAM,CAAC,IAAI,CAAC,KAAK,CAAC,EAAE,CAAC,KAAK,CAAC,IAAI,KAAK,OAAO,CAAC,CAAC;IAC3D,MAAM,KAAK,GAAG,MAAM,CAAC,IAAI,CAAC,KAAK,CAAC,EAAE,CAAC,KAAK,CAAC,IAAI,KAAK,OAAO,CAAC,CAAC;IAE3D,IAAI,CAAC,IAAI,IAAI,CAAC,KAAK,IAAI,CAAC,KAAK;QAAE,OAAO,IAAI,CAAC;IAE3C,MAAM,SAAS,GAAG,MAAM,CAAC,KAAK,CAAC,KAAK,CAAC,EAAE,CAAC,KAAK,CAAC,KAAK,IAAI,KAAK,CAAC,SAAS,EAAE,CAAC,CAAC;IAE1E,MAAM,OAAO,GAAG,CACd,8BACE,KAAC,MAAM,IACL,IAAI,EAAC,QAAQ,EACb,OAAO,EAAC,WAAW,EACnB,OAAO,EAAE,GAAG,EAAE;oBACZ,IAAI,CAAC,EAAE,OAAO,EAAE,iBAAiB,EAAE,CAAC,CAAC;gBACvC,CAAC,uBAGM,EACT,KAAC,MAAM,IAAC,IAAI,EAAC,QAAQ,EAAC,IAAI,EAAC,QAAQ,EAAC,OAAO,EAAC,SAAS,EAAC,QAAQ,EAAE,CAAC,SAAS,uBAEjE,IACR,CACJ,CAAC;IAEF,MAAM,YAAY,GAAG,CAAC,KAAW,EAAE,EAAU,EAAE,EAAE;QAC/C,MAAM,GAAG,GAAG,GAAG,CAAC,eAAe,CAAC,KAAK,CAAC,CAAC;QACvC,SAAS,CAAC,OAAO,EAAE,WAAW,CAAC,EAAE,GAAG,EAAE,GAAG,EAAE,KAAK,CAAC,IAAI,EAAE,EAAE,EAAE,CAAC,CAAC;IAC/D,CAAC,CAAC;IAEF,OAAO,CACL,MAAC,IAAI,IACH,OAAO,EAAE,OAAO,EAChB,QAAQ,EAAE,CAAC,CAAY,EAAE,EAAE;YACzB,CAAC,CAAC,cAAc,EAAE,CAAC;YACnB,IAAI,CAAC,EAAE,OAAO,EAAE,iBAAiB,EAAE,CAAC,CAAC;QACvC,CAAC,EACD,KAAK,EAAE,EAAE,QAAQ,EAAE,SAAS,EAAE,aAE9B,KAAC,IAAI,IAAC,OAAO,EAAC,IAAI,EAAC,EAAE,EAAC,IAAI,0BAEnB,EACP,MAAC,IAAI,IAAC,SAAS,EAAE,EAAE,SAAS,EAAE,QAAQ,EAAE,GAAG,EAAE,CAAC,EAAE,EAAE,IAAI,EAAE,EAAE,IAAI,EAAE,CAAC,EAAE,aACjE,KAAC,KAAK,IACJ,IAAI,EAAC,MAAM,EACX,KAAK,EAAC,MAAM,EACZ,KAAK,EAAE,IAAI,CAAC,KAAK,EACjB,QAAQ,EAAE,IAAI,CAAC,QAAQ,EACvB,MAAM,EAAE,IAAI,CAAC,MAAM,EACnB,IAAI,EAAC,qBAAqB,EAC1B,QAAQ,EAAE,CAAC,CAAgC,EAAE,EAAE,CAAC,QAAQ,CAAC,EAAE,GAAG,CAAC,EAAE,CAAC,EAClE,MAAM,EAAE,CAAC,CAA+B,EAAE,EAAE,CAAC,QAAQ,CAAC,EAAE,GAAG,CAAC,EAAE,CAAC,GAC/D,EAEF,KAAC,KAAK,IACJ,IAAI,EAAC,OAAO,EACZ,KAAK,EAAE,KAAK,CAAC,KAAK,EAClB,IAAI,EAAC,OAAO,EACZ,KAAK,EAAC,OAAO,EACb,QAAQ,EAAE,KAAK,CAAC,QAAQ,EACxB,MAAM,EAAE,KAAK,CAAC,MAAM,EACpB,IAAI,EAAC,qBAAqB,EAC1B,QAAQ,EAAE,CAAC,CAAgC,EAAE,EAAE,CAAC,QAAQ,CAAC,EAAE,GAAG,CAAC,EAAE,CAAC,EAClE,MAAM,EAAE,CAAC,CAA+B,EAAE,EAAE,CAAC,QAAQ,CAAC,EAAE,GAAG,CAAC,EAAE,CAAC,GAC/D,EAEF,KAAC,aAAa,IAAC,IAAI,EAAC,SAAS,EAAC,KAAK,EAAC,wBAAwB,YACzD,CAAC,WAAW,EAAE,QAAQ,EAAE,WAAW,EAAE,WAAW,CAAC,CAAC,GAAG,CAAC,MAAM,CAAC,EAAE,CAAC,CAC/D,KAAC,QAAQ,IAEP,KAAK,EAAE,MAAM,EACb,QAAQ,EAAE,CAAC,CAAgC,EAAE,EAAE,CAAC,QAAQ,CAAC,EAAE,GAAG,CAAC,EAAE,CAAC,IAF7D,MAAM,CAGX,CACH,CAAC,GACY,EAEhB,KAAC,gBAAgB,IAAC,IAAI,EAAC,UAAU,EAAC,KAAK,EAAC,sCAAsC,YAC3E,CAAC,KAAK,EAAE,iBAAiB,CAAC,CAAC,GAAG,CAAC,MAAM,CAAC,EAAE,CAAC,CACxC,KAAC,WAAW,IAEV,KAAK,EAAE,MAAM,EACb,QAAQ,EAAE,CAAC,CAAgC,EAAE,EAAE,CAAC,QAAQ,CAAC,EAAE,GAAG,CAAC,EAAE,CAAC,IAF7D,MAAM,CAGX,CACH,CAAC,GACe,EAEnB,MAAC,MAAM,IAAC,KAAK,EAAC,6BAA6B,EAAC,IAAI,EAAC,0BAA0B,aACzE,KAAC,MAAM,iCAAwB,EAC/B,KAAC,MAAM,wBAAe,EACtB,KAAC,MAAM,2BAAkB,EACzB,KAAC,MAAM,wBAAe,IACf,EAET,KAAC,gBAAgB,IACf,QAAQ,EAAE,CAAC,EAAE,KAAK,EAAE,EAAE,EAAE,CAAC,KAAK,EAAE,EAChC,OAAO,EAAE,GAAG,EAAE,CAAC,IAAI,EACnB,KAAK,EAAC,WAAW,EACjB,IAAI,EAAC,mCAAmC,EACxC,KAAK,EAAE,SAAS,EAChB,QAAQ,EAAE,GAAG,EAAE,GAAE,CAAC,EAClB,SAAS,EAAE,GAAG,EAAE,CAAC,KAAK,CAAC,eAAe,EAAE,GACxC,EAEF,KAAC,QAAQ,IACP,IAAI,EAAC,OAAO,EACZ,QAAQ,EAAE,KAAK,CAAC,QAAQ,EACxB,KAAK,EAAC,eAAe,EACrB,MAAM,EAAE,KAAK,CAAC,MAAM,EACpB,IAAI,EAAE,KAAK,CAAC,IAAI,IAAI,KAAK,CAAC,IAAI,EAC9B,QAAQ,EAAE,CAAC,CAAmC,EAAE,EAAE,CAAC,QAAQ,CAAC,EAAE,GAAG,CAAC,EAAE,CAAC,EACrE,MAAM,EAAE,CAAC,CAA+B,EAAE,EAAE,CAAC,QAAQ,CAAC,EAAE,GAAG,CAAC,EAAE,CAAC,GAC/D,EACF,KAAC,cAAc,IACb,KAAK,EAAC,wBAAwB,EAC9B,IAAI,EAAC,oEAAoE,EACzE,OAAO,EAAE;4BACP,gBAAgB;4BAChB,SAAS;4BACT,QAAQ;4BACR,OAAO;4BACP,QAAQ;4BACR,OAAO;4BACP,gBAAgB;4BAChB,aAAa;yBACd,EACD,YAAY,EAAE,YAAY,EAC1B,GAAG,EAAE,SAAS,GACd,EAEF,KAAC,aAAa,KAAG,IACZ,IACF,CACR,CAAC;AACJ,CAAC,CAAC;AAEF,MAAM,CAAC,MAAM,kBAAkB,GAAG,GAAG,EAAE;IACrC,MAAM,EACJ,IAAI,EAAE,EAAE,OAAO,EAAE,EAClB,GAAG,QAAQ,EAAE,CAAC;IACf,MAAM,YAAY,GAAG,MAAM,CAAC,GAAG,CAAA;;4BAEL,OAAO,CAAC,aAAa,CAAC;kBAChC,OAAO,CAAC,QAAQ;GAC/B,CAAC;IAEF,OAAO,CACL,KAAC,IAAI,IAAC,EAAE,EAAE,YAAY,EAAE,SAAS,EAAE,EAAE,UAAU,EAAE,QAAQ,EAAE,OAAO,EAAE,QAAQ,EAAE,YAC5E,KAAC,IAAI,yCAA8B,GAC9B,CACR,CAAC;AACJ,CAAC,CAAC","sourcesContent":["import { FormEvent, ChangeEvent, FocusEvent, useReducer, useRef } from 'react';\nimport styled from 'styled-components';\n\nimport {\n  Button,\n  Flex,\n  Form,\n  Input,\n  CheckboxGroup,\n  RadioButtonGroup,\n  RadioButton,\n  Checkbox,\n  Select,\n  Option,\n  TextArea,\n  Text,\n  FormControlProps,\n  useTheme,\n  useToaster\n} from '@pega/cosmos-react-core';\nimport { RichTextEditor, RichTextEditorState } from '@pega/cosmos-react-rte';\nimport { AppShellProps } from '@pega/cosmos-react-build';\n\nimport { FileInputDemo } from '../../core/File/FileInput.stories';\nimport { dataPages, ObjectSelectComp } from '../ObjectSelect/ObjectSelect.mocks';\n\ninterface Field extends FormControlProps {\n  help?: string;\n  error?: string;\n  validator: (this: Field) => boolean;\n}\n\nexport interface AppShellStory {\n  main?: AppShellProps['main'];\n  hideNavigation?: boolean;\n}\n\n// Get initial field properties\nexport const initFields = (): Field[] => {\n  const common = { value: undefined, status: undefined };\n  return [\n    {\n      ...common,\n      name: 'name',\n      required: true,\n      error: 'Please enter first and last name',\n      validator() {\n        if (!this.value) return false;\n        return /^[a-z]+\\s[a-z]+$/i.test(this.value);\n      }\n    },\n    {\n      ...common,\n      name: 'email',\n      required: true,\n      error: 'Enter a @pega.com address',\n      validator() {\n        if (!this.value) return false;\n        return /^\\S+@pega\\.com$/.test(this.value);\n      }\n    },\n    {\n      ...common,\n      name: 'notes',\n      required: true,\n      help: 'See how fast you can type 20 characters go',\n      error: 'You need to tell us more than 20 characters',\n      validator() {\n        if (!this.value) return false;\n        return this.value.length >= 20;\n      }\n    }\n  ];\n};\n\n// Handles setting of state for all fields\nconst fieldReducer = (\n  fields: Field[],\n  {\n    target,\n    type\n  }:\n    | ChangeEvent<HTMLInputElement | HTMLTextAreaElement>\n    | FocusEvent<HTMLInputElement | HTMLTextAreaElement>\n) => {\n  return fields.map(field => {\n    if (field.name === target.name) {\n      field.value = target.value;\n      if (type === 'blur' || field.status === 'error') {\n        if ((field.required || field.value) && !field.validator()) {\n          field.status = 'error';\n          field.info = field.error;\n        } else {\n          field.status = undefined;\n          field.info = field.help;\n        }\n      }\n    }\n    return field;\n  });\n};\n\nexport const OneColumnForm = (props: any) => {\n  const editorRef = useRef<RichTextEditorState>(null);\n  const [fields, setField] = useReducer(fieldReducer, undefined, initFields);\n  const { push } = useToaster();\n\n  const name = fields.find(field => field.name === 'name');\n  const email = fields.find(field => field.name === 'email');\n  const notes = fields.find(field => field.name === 'notes');\n\n  if (!name || !email || !notes) return null;\n\n  const canSubmit = fields.every(field => field.value && field.validator());\n\n  const actions = (\n    <>\n      <Button\n        name='Cancel'\n        variant='secondary'\n        onClick={() => {\n          push({ content: 'Form cancelled!' });\n        }}\n      >\n        Cancel\n      </Button>\n      <Button name='Submit' type='submit' variant='primary' disabled={!canSubmit}>\n        Submit\n      </Button>\n    </>\n  );\n\n  const onImageAdded = (image: File, id: string) => {\n    const src = URL.createObjectURL(image);\n    editorRef.current?.appendImage({ src, alt: image.name }, id);\n  };\n\n  return (\n    <Form\n      actions={actions}\n      onSubmit={(e: FormEvent) => {\n        e.preventDefault();\n        push({ content: 'Form submitted!' });\n      }}\n      style={{ maxWidth: '37.5rem' }}\n    >\n      <Text variant='h4' as='h4'>\n        Demo Form\n      </Text>\n      <Flex container={{ direction: 'column', gap: 2 }} item={{ grow: 1 }}>\n        <Input\n          name='name'\n          label='Name'\n          value={name.value}\n          required={name.required}\n          status={name.status}\n          info='some help text here'\n          onChange={(e: ChangeEvent<HTMLInputElement>) => setField({ ...e })}\n          onBlur={(e: FocusEvent<HTMLInputElement>) => setField({ ...e })}\n        />\n\n        <Input\n          name='email'\n          value={email.value}\n          type='email'\n          label='Email'\n          required={email.required}\n          status={email.status}\n          info='some help text here'\n          onChange={(e: ChangeEvent<HTMLInputElement>) => setField({ ...e })}\n          onBlur={(e: FocusEvent<HTMLInputElement>) => setField({ ...e })}\n        />\n\n        <CheckboxGroup name='visited' label='Places you have worked'>\n          {['Cambridge', 'Krakow', 'Hyderabad', 'Bangalore'].map(office => (\n            <Checkbox\n              key={office}\n              label={office}\n              onChange={(e: ChangeEvent<HTMLInputElement>) => setField({ ...e })}\n            />\n          ))}\n        </CheckboxGroup>\n\n        <RadioButtonGroup name='meetings' label='Do you enjoy early morning meetings?'>\n          {['Yes', \"No...no I don't\"].map(option => (\n            <RadioButton\n              key={option}\n              label={option}\n              onChange={(e: ChangeEvent<HTMLInputElement>) => setField({ ...e })}\n            />\n          ))}\n        </RadioButtonGroup>\n\n        <Select label='What would you like to eat?' info='FYI: options are limited'>\n          <Option>choose meal...</Option>\n          <Option>Pizza</Option>\n          <Option>Sandwich</Option>\n          <Option>Salad</Option>\n        </Select>\n\n        <ObjectSelectComp\n          onSubmit={({ close }) => close()}\n          onClose={() => null}\n          label='Date page'\n          info='Choose a when condition from list'\n          items={dataPages}\n          onChange={() => {}}\n          onPreview={() => props.previewCallback()}\n        />\n\n        <TextArea\n          name='notes'\n          required={notes.required}\n          label='Meeting Notes'\n          status={notes.status}\n          info={notes.info || notes.help}\n          onChange={(e: ChangeEvent<HTMLTextAreaElement>) => setField({ ...e })}\n          onBlur={(e: FocusEvent<HTMLInputElement>) => setField({ ...e })}\n        />\n        <RichTextEditor\n          label='Detailed meeting notes'\n          info='The rich text editor can be used in forms, comments, and documents'\n          toolbar={[\n            'inline-styling',\n            'headers',\n            'tables',\n            'links',\n            'images',\n            'lists',\n            'cut-copy-paste',\n            'indentation'\n          ]}\n          onImageAdded={onImageAdded}\n          ref={editorRef}\n        />\n\n        <FileInputDemo />\n      </Flex>\n    </Form>\n  );\n};\n\nexport const PreviewMainContent = () => {\n  const {\n    base: { palette }\n  } = useTheme();\n  const StyledRegion = styled.div`\n    min-height: 120vh;\n    border: dotted 0.1rem ${palette['border-line']};\n    background: ${palette.skeleton};\n  `;\n\n  return (\n    <Flex as={StyledRegion} container={{ alignItems: 'center', justify: 'center' }}>\n      <Text>This is a react region</Text>\n    </Flex>\n  );\n};\n"]}

package/lib/build/PageTemplates/PageTemplates.stories.d.ts

@@ -1,21 +0,0 @@
-import type { StoryFn } from '@storybook/react';
-import type { MouseEvent } from 'react';
-import type { StatusProps, PageTemplateProps } from '@pega/cosmos-react-core';
-import { AppShellStory } from './PageTemplates.mocks';
-declare const _default: import("@storybook/types").ComponentAnnotations<import("@storybook/react/dist/types-0a347bb9").R, import("@storybook/types").Args>;
-export default _default;
-export interface PageTemplatesStoryProps extends PageTemplateProps {
-    template?: 'one column' | 'two column' | 'three column' | 'four column' | 'wide narrow' | 'narrow wide' | 'wide wide narrow' | 'narrow wide wide' | 'narrow wide narrow' | 'tabbed';
-    showBreadcrumbs?: boolean;
-    pathData?: string;
-    showActions?: boolean;
-    showBanners?: boolean;
-    subTitle?: string;
-    showStatus?: boolean;
-    statusVariant?: StatusProps['variant'];
-    statusLabel?: string;
-    showEditButton?: boolean;
-    onEdit?: (e: MouseEvent<HTMLButtonElement>) => void;
-}
-export declare const PageTemplatesDemo: StoryFn<PageTemplatesStoryProps & AppShellStory>;
-//# sourceMappingURL=PageTemplates.stories.d.ts.map

package/lib/build/PageTemplates/PageTemplates.stories.d.ts.map

@@ -1 +0,0 @@
-{"version":3,"file":"PageTemplates.stories.d.ts","sourceRoot":"","sources":["../../../src/build/PageTemplates/PageTemplates.stories.tsx"],"names":[],"mappings":"AACA,OAAO,KAAK,EAAQ,OAAO,EAAE,MAAM,kBAAkB,CAAC;AAEtD,OAAO,KAAK,EAAE,UAAU,EAAE,MAAM,OAAO,CAAC;AAcxC,OAAO,KAAK,EAAE,WAAW,EAAE,iBAAiB,EAAE,MAAM,yBAAyB,CAAC;AAO9E,OAAO,EAAiB,aAAa,EAAsB,MAAM,uBAAuB,CAAC;;AAEzF,wBAKU;AAEV,MAAM,WAAW,uBAAwB,SAAQ,iBAAiB;IAChE,QAAQ,CAAC,EACL,YAAY,GACZ,YAAY,GACZ,cAAc,GACd,aAAa,GACb,aAAa,GACb,aAAa,GACb,kBAAkB,GAClB,kBAAkB,GAClB,oBAAoB,GACpB,QAAQ,CAAC;IACb,eAAe,CAAC,EAAE,OAAO,CAAC;IAC1B,QAAQ,CAAC,EAAE,MAAM,CAAC;IAClB,WAAW,CAAC,EAAE,OAAO,CAAC;IACtB,WAAW,CAAC,EAAE,OAAO,CAAC;IACtB,QAAQ,CAAC,EAAE,MAAM,CAAC;IAClB,UAAU,CAAC,EAAE,OAAO,CAAC;IACrB,aAAa,CAAC,EAAE,WAAW,CAAC,SAAS,CAAC,CAAC;IACvC,WAAW,CAAC,EAAE,MAAM,CAAC;IACrB,cAAc,CAAC,EAAE,OAAO,CAAC;IACzB,MAAM,CAAC,EAAE,CAAC,CAAC,EAAE,UAAU,CAAC,iBAAiB,CAAC,KAAK,IAAI,CAAC;CACrD;AAED,eAAO,MAAM,iBAAiB,EAAE,OAAO,CAAC,uBAAuB,GAAG,aAAa,CAiQ9E,CAAC"}

package/lib/build/PageTemplates/PageTemplates.stories.js

@@ -1,246 +0,0 @@
-import { jsx as _jsx, jsxs as _jsxs, Fragment as _Fragment } from "react/jsx-runtime";
-import { useState, useMemo } from 'react';
-import { action } from '@storybook/addon-actions';
-import { Button, Banner, Configuration, Modal, BuildTheme, Flex, Text, Actions, useModalManager } from '@pega/cosmos-react-core';
-import { TabbedPage, OneColumnPage, ObjectPreview } from '@pega/cosmos-react-build';
-import { TableDemo } from '../../core/Table/Table.stories';
-import { WorkbenchDemo } from '../Workbench/Workbench.stories';
-import { AppShellDemo } from '../AppShell/AppShell.stories';
-import { OneColumnForm, PreviewMainContent } from './PageTemplates.mocks';
-export default {
-    title: 'Build/PageTemplates',
-    parameters: {
-        layout: 'fullscreen'
-    }
-};
-export const PageTemplatesDemo = (args) => {
-    const { create } = useModalManager();
-    const getPath = () => {
-        if (args.showBreadcrumbs) {
-            const path = args.pathData;
-            return path
-                ? path.split(',').map((crumb, i) => {
-                    // FIXME: https://stackoverflow.com/questions/63616486/property-replaceall-does-not-exist-on-type-string
-                    return {
-                        id: crumb,
-                        primary: crumb,
-                        href: i < 3 ? `#${crumb.replace(/\s/g, '-')}` : undefined
-                    };
-                })
-                : [];
-        }
-    };
-    const actions = args.showActions ? (_jsxs(Flex, { container: true, children: [_jsx(Button, { variant: 'primary', children: "Save" }), _jsx(Actions, { menuAt: 2, items: [
-                    {
-                        id: '1',
-                        text: 'Page action 1'
-                    },
-                    {
-                        id: '2',
-                        text: 'Page action 2'
-                    }
-                ] })] })) : undefined;
-    const banners = args.showBanners ? (_jsx(Banner, { variant: 'warning', messages: ['This is a warning banner. You have been warned!'] })) : undefined;
-    const mainContent = _jsx(OneColumnForm, {});
-    const modal = () => (_jsx(Configuration, { theme: BuildTheme, children: _jsx(Modal, { heading: 'This is the Modal heading', autoWidth: false, center: true, stretch: false, children: _jsx(Text, { children: "This is the content of the Modal." }) }) }));
-    const pageTemplateProps = useMemo(() => {
-        const status = args.showStatus
-            ? {
-                type: args.statusVariant || 'pending',
-                label: args.statusLabel || 'private change'
-            }
-            : undefined;
-        return {
-            title: args.title,
-            actions,
-            banners,
-            path: getPath(),
-            status,
-            metadata: [
-                { id: '1', name: 'ID', value: 'InterestRate' },
-                { id: '2', name: 'Rule type', value: 'Field' },
-                {
-                    id: '3',
-                    name: 'Scope',
-                    value: 'O1XPTI-CCompass-Work-MortgageRequest'
-                },
-                { id: '4', name: 'Application', value: 'XCompass' }
-            ],
-            additionalInfo: {
-                title: 'Interest rate',
-                description: 'Interest rate for the savings account',
-                fields: [
-                    {
-                        id: '1',
-                        name: 'Id',
-                        value: 'InterestRate'
-                    },
-                    {
-                        id: '2',
-                        name: 'Rule type',
-                        value: 'Field'
-                    },
-                    {
-                        id: '3',
-                        name: 'Scope',
-                        value: 'O1XPTI-CCompass-Work-MortgageRequest'
-                    },
-                    {
-                        id: '4',
-                        name: 'Branch',
-                        value: 'xCompass (Main)'
-                    },
-                    {
-                        id: '5',
-                        name: 'Application',
-                        value: 'XCompass'
-                    }
-                ],
-                onEdit: args.showEditButton
-                    ? (e) => {
-                        args.onEdit?.(e);
-                        create(modal);
-                    }
-                    : undefined
-            }
-        };
-    }, [args]);
-    const [tabs, setTabs] = useState([
-        { id: 'accounts', name: 'Accounts', content: _jsx(TableDemo, {}) },
-        { id: 'form', name: 'Form', content: null },
-        { id: 'workbench', name: 'Workbench', content: null }
-    ]);
-    let demo;
-    const [openDrawer, setOpenDrawer] = useState(false);
-    switch (args.template) {
-        case 'one column':
-            demo = _jsx(OneColumnPage, { a: mainContent, ...pageTemplateProps });
-            break;
-        case 'tabbed':
-        default:
-            demo = (_jsxs(_Fragment, { children: [_jsx(TabbedPage, { tabs: {
-                            tabs,
-                            type: 'horizontal',
-                            onTabClick: id => {
-                                // eslint-disable-next-line sonarjs/no-nested-switch
-                                switch (id) {
-                                    case 'form':
-                                        if (tabs[1].content === null) {
-                                            const updatedTabs = [...tabs];
-                                            updatedTabs[1].content = (_jsx(OneColumnForm, { previewCallback: () => {
-                                                    setOpenDrawer(true);
-                                                } }));
-                                            setTabs(updatedTabs);
-                                        }
-                                        break;
-                                    case 'workbench':
-                                        if (tabs[2].content === null) {
-                                            const updatedTabs = [...tabs];
-                                            updatedTabs[2].content = _jsx(WorkbenchDemo, {});
-                                            setTabs(updatedTabs);
-                                        }
-                                        break;
-                                    default:
-                                }
-                            }
-                        }, ...pageTemplateProps }), _jsx(ObjectPreview, { open: openDrawer, onDismiss: () => setOpenDrawer(false), header: {
-                            title: 'Interest rate',
-                            metadata: [
-                                { id: '1', name: 'ID', value: 'InterestRate' },
-                                { id: '2', name: 'Rule type', value: 'Field' },
-                                {
-                                    id: '3',
-                                    name: 'Scope',
-                                    value: 'O1XPTI-CCompass-Work-MortgageRequest'
-                                },
-                                { id: '4', name: 'Application', value: 'XCompass' }
-                            ],
-                            additionalInfo: {
-                                title: 'Interest rate',
-                                description: 'Interest rate for the savings account',
-                                fields: [
-                                    {
-                                        id: '1',
-                                        name: 'Id',
-                                        value: 'InterestRate'
-                                    },
-                                    {
-                                        id: '2',
-                                        name: 'Rule type',
-                                        value: 'Field'
-                                    },
-                                    {
-                                        id: '3',
-                                        name: 'Scope',
-                                        value: 'O1XPTI-CCompass-Work-MortgageRequest'
-                                    },
-                                    {
-                                        id: '4',
-                                        name: 'Branch',
-                                        value: 'xCompass (Main)'
-                                    },
-                                    {
-                                        id: '5',
-                                        name: 'Application',
-                                        value: 'XCompass'
-                                    }
-                                ],
-                                onEdit: () => { }
-                            }
-                        }, content: _jsx(PreviewMainContent, {}), primaryAction: {
-                            text: 'Save',
-                            onClick: () => { }
-                        }, secondaryAction: {
-                            text: 'Open rule',
-                            onClick: () => { }
-                        }, additionalActions: {
-                            items: [
-                                {
-                                    id: '1',
-                                    text: 'Page action 1'
-                                },
-                                {
-                                    id: '2',
-                                    text: 'Page action 2'
-                                }
-                            ]
-                        } })] }));
-            break;
-    }
-    return (_jsx(Configuration, { theme: BuildTheme, children: _jsx(AppShellDemo, { main: demo, appName: 'Compass App', text: 'Launchpad (Main)', showAppNameAndVersion: true, showPreview: true, showBranch: true }) }));
-};
-PageTemplatesDemo.args = {
-    template: 'tabbed',
-    title: 'Interest rate',
-    subTitle: 'Uplus-Data-Integrations',
-    showBreadcrumbs: true,
-    pathData: 'Home,xCompass,Fields',
-    showActions: true,
-    showBanners: false,
-    showStatus: true,
-    statusVariant: 'pending',
-    statusLabel: 'private change',
-    showEditButton: true,
-    onEdit: action('Clicked edit button in popover')
-};
-PageTemplatesDemo.argTypes = {
-    template: {
-        options: ['one column', 'tabbed'],
-        control: { type: 'select' }
-    },
-    subTitle: { control: { type: 'text' } },
-    title: { control: { type: 'text' } },
-    showBreadcrumbs: { control: { type: 'boolean' } },
-    pathData: { control: { type: 'text' } },
-    showActions: { control: { type: 'boolean' } },
-    showBanners: { control: { type: 'boolean' } },
-    showStatus: { control: { type: 'boolean' } },
-    statusVariant: {
-        options: ['success', 'urgent', 'warn', 'pending', 'info'],
-        control: { type: 'select' }
-    },
-    statusLabel: { control: { type: 'text' } },
-    showEditButton: { control: { type: 'boolean' } },
-    onEdit: { table: { disable: true } }
-};
-//# sourceMappingURL=PageTemplates.stories.js.map

package/lib/build/PageTemplates/PageTemplates.stories.js.map

@@ -1 +0,0 @@
-{"version":3,"file":"PageTemplates.stories.js","sourceRoot":"","sources":["../../../src/build/PageTemplates/PageTemplates.stories.tsx"],"names":[],"mappings":"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","sourcesContent":["// cspell:words O1XPTI\nimport type { Meta, StoryFn } from '@storybook/react';\nimport { useState, useMemo } from 'react';\nimport type { MouseEvent } from 'react';\nimport { action } from '@storybook/addon-actions';\n\nimport {\n  Button,\n  Banner,\n  Configuration,\n  Modal,\n  BuildTheme,\n  Flex,\n  Text,\n  Actions,\n  useModalManager\n} from '@pega/cosmos-react-core';\nimport type { StatusProps, PageTemplateProps } from '@pega/cosmos-react-core';\nimport { TabbedPage, OneColumnPage, ObjectPreview } from '@pega/cosmos-react-build';\n\nimport { TableDemo } from '../../core/Table/Table.stories';\nimport { WorkbenchDemo } from '../Workbench/Workbench.stories';\nimport { AppShellDemo } from '../AppShell/AppShell.stories';\n\nimport { OneColumnForm, AppShellStory, PreviewMainContent } from './PageTemplates.mocks';\n\nexport default {\n  title: 'Build/PageTemplates',\n  parameters: {\n    layout: 'fullscreen'\n  }\n} as Meta;\n\nexport interface PageTemplatesStoryProps extends PageTemplateProps {\n  template?:\n    | 'one column'\n    | 'two column'\n    | 'three column'\n    | 'four column'\n    | 'wide narrow'\n    | 'narrow wide'\n    | 'wide wide narrow'\n    | 'narrow wide wide'\n    | 'narrow wide narrow'\n    | 'tabbed';\n  showBreadcrumbs?: boolean;\n  pathData?: string;\n  showActions?: boolean;\n  showBanners?: boolean;\n  subTitle?: string;\n  showStatus?: boolean;\n  statusVariant?: StatusProps['variant'];\n  statusLabel?: string;\n  showEditButton?: boolean;\n  onEdit?: (e: MouseEvent<HTMLButtonElement>) => void;\n}\n\nexport const PageTemplatesDemo: StoryFn<PageTemplatesStoryProps & AppShellStory> = (\n  args: PageTemplatesStoryProps & AppShellStory\n) => {\n  const { create } = useModalManager();\n\n  const getPath = () => {\n    if (args.showBreadcrumbs) {\n      const path = args.pathData;\n\n      return path\n        ? path.split(',').map((crumb: string, i) => {\n            // FIXME: https://stackoverflow.com/questions/63616486/property-replaceall-does-not-exist-on-type-string\n            return {\n              id: crumb,\n              primary: crumb,\n              href: i < 3 ? `#${(crumb as any).replace(/\\s/g, '-')}` : undefined\n            };\n          })\n        : [];\n    }\n  };\n\n  const actions: PageTemplateProps['actions'] = args.showActions ? (\n    <Flex container>\n      <Button variant='primary'>Save</Button>\n      <Actions\n        menuAt={2}\n        items={[\n          {\n            id: '1',\n            text: 'Page action 1'\n          },\n          {\n            id: '2',\n            text: 'Page action 2'\n          }\n        ]}\n      />\n    </Flex>\n  ) : undefined;\n\n  const banners: PageTemplateProps['banners'] = args.showBanners ? (\n    <Banner variant='warning' messages={['This is a warning banner. You have been warned!']} />\n  ) : undefined;\n\n  const mainContent = <OneColumnForm />;\n  const modal = () => (\n    <Configuration theme={BuildTheme}>\n      <Modal heading='This is the Modal heading' autoWidth={false} center stretch={false}>\n        <Text>This is the content of the Modal.</Text>\n      </Modal>\n    </Configuration>\n  );\n\n  const pageTemplateProps = useMemo(() => {\n    const status = args.showStatus\n      ? {\n          type: args.statusVariant || 'pending',\n          label: args.statusLabel || 'private change'\n        }\n      : undefined;\n\n    return {\n      title: args.title,\n      actions,\n      banners,\n      path: getPath(),\n      status,\n      metadata: [\n        { id: '1', name: 'ID', value: 'InterestRate' },\n        { id: '2', name: 'Rule type', value: 'Field' },\n        {\n          id: '3',\n          name: 'Scope',\n          value: 'O1XPTI-CCompass-Work-MortgageRequest'\n        },\n        { id: '4', name: 'Application', value: 'XCompass' }\n      ],\n      additionalInfo: {\n        title: 'Interest rate',\n        description: 'Interest rate for the savings account',\n        fields: [\n          {\n            id: '1',\n            name: 'Id',\n            value: 'InterestRate'\n          },\n          {\n            id: '2',\n            name: 'Rule type',\n            value: 'Field'\n          },\n          {\n            id: '3',\n            name: 'Scope',\n            value: 'O1XPTI-CCompass-Work-MortgageRequest'\n          },\n          {\n            id: '4',\n            name: 'Branch',\n            value: 'xCompass (Main)'\n          },\n          {\n            id: '5',\n            name: 'Application',\n            value: 'XCompass'\n          }\n        ],\n        onEdit: args.showEditButton\n          ? (e: MouseEvent<HTMLButtonElement>) => {\n              args.onEdit?.(e);\n              create(modal);\n            }\n          : undefined\n      }\n    };\n  }, [args]);\n\n  const [tabs, setTabs] = useState([\n    { id: 'accounts', name: 'Accounts', content: <TableDemo /> },\n    { id: 'form', name: 'Form', content: null },\n    { id: 'workbench', name: 'Workbench', content: null }\n  ]);\n\n  let demo;\n  const [openDrawer, setOpenDrawer] = useState(false);\n\n  switch (args.template) {\n    case 'one column':\n      demo = <OneColumnPage a={mainContent} {...pageTemplateProps} />;\n      break;\n    case 'tabbed':\n    default:\n      demo = (\n        <>\n          <TabbedPage\n            tabs={{\n              tabs,\n              type: 'horizontal',\n              onTabClick: id => {\n                // eslint-disable-next-line sonarjs/no-nested-switch\n                switch (id) {\n                  case 'form':\n                    if (tabs[1].content === null) {\n                      const updatedTabs = [...tabs];\n                      updatedTabs[1].content = (\n                        <OneColumnForm\n                          previewCallback={() => {\n                            setOpenDrawer(true);\n                          }}\n                        />\n                      );\n\n                      setTabs(updatedTabs);\n                    }\n                    break;\n                  case 'workbench':\n                    if (tabs[2].content === null) {\n                      const updatedTabs = [...tabs];\n                      updatedTabs[2].content = <WorkbenchDemo />;\n\n                      setTabs(updatedTabs);\n                    }\n                    break;\n                  default:\n                }\n              }\n            }}\n            {...pageTemplateProps}\n          />\n          <ObjectPreview\n            open={openDrawer}\n            onDismiss={() => setOpenDrawer(false)}\n            header={{\n              title: 'Interest rate',\n              metadata: [\n                { id: '1', name: 'ID', value: 'InterestRate' },\n                { id: '2', name: 'Rule type', value: 'Field' },\n                {\n                  id: '3',\n                  name: 'Scope',\n                  value: 'O1XPTI-CCompass-Work-MortgageRequest'\n                },\n                { id: '4', name: 'Application', value: 'XCompass' }\n              ],\n              additionalInfo: {\n                title: 'Interest rate',\n                description: 'Interest rate for the savings account',\n                fields: [\n                  {\n                    id: '1',\n                    name: 'Id',\n                    value: 'InterestRate'\n                  },\n                  {\n                    id: '2',\n                    name: 'Rule type',\n                    value: 'Field'\n                  },\n                  {\n                    id: '3',\n                    name: 'Scope',\n                    value: 'O1XPTI-CCompass-Work-MortgageRequest'\n                  },\n                  {\n                    id: '4',\n                    name: 'Branch',\n                    value: 'xCompass (Main)'\n                  },\n                  {\n                    id: '5',\n                    name: 'Application',\n                    value: 'XCompass'\n                  }\n                ],\n                onEdit: () => {}\n              }\n            }}\n            content={<PreviewMainContent />}\n            primaryAction={{\n              text: 'Save',\n              onClick: () => {}\n            }}\n            secondaryAction={{\n              text: 'Open rule',\n              onClick: () => {}\n            }}\n            additionalActions={{\n              items: [\n                {\n                  id: '1',\n                  text: 'Page action 1'\n                },\n                {\n                  id: '2',\n                  text: 'Page action 2'\n                }\n              ]\n            }}\n          />\n        </>\n      );\n      break;\n  }\n\n  return (\n    <Configuration theme={BuildTheme}>\n      <AppShellDemo\n        main={demo}\n        appName='Compass App'\n        text='Launchpad (Main)'\n        showAppNameAndVersion\n        showPreview\n        showBranch\n      />\n    </Configuration>\n  );\n};\n\nPageTemplatesDemo.args = {\n  template: 'tabbed',\n  title: 'Interest rate',\n  subTitle: 'Uplus-Data-Integrations',\n  showBreadcrumbs: true,\n  pathData: 'Home,xCompass,Fields',\n  showActions: true,\n  showBanners: false,\n  showStatus: true,\n  statusVariant: 'pending',\n  statusLabel: 'private change',\n  showEditButton: true,\n  onEdit: action('Clicked edit button in popover')\n};\n\nPageTemplatesDemo.argTypes = {\n  template: {\n    options: ['one column', 'tabbed'],\n    control: { type: 'select' }\n  },\n  subTitle: { control: { type: 'text' } },\n  title: { control: { type: 'text' } },\n  showBreadcrumbs: { control: { type: 'boolean' } },\n  pathData: { control: { type: 'text' } },\n  showActions: { control: { type: 'boolean' } },\n  showBanners: { control: { type: 'boolean' } },\n  showStatus: { control: { type: 'boolean' } },\n  statusVariant: {\n    options: ['success', 'urgent', 'warn', 'pending', 'info'],\n    control: { type: 'select' }\n  },\n  statusLabel: { control: { type: 'text' } },\n  showEditButton: { control: { type: 'boolean' } },\n  onEdit: { table: { disable: true } }\n};\n"]}

package/lib/build/PageTemplates/ShowcasePage.stories.d.ts

@@ -1,17 +0,0 @@
-import type { StoryFn } from '@storybook/react';
-import type { PageBannerProps } from '@pega/cosmos-react-build';
-import type { ImageProps } from '@pega/cosmos-react-core';
-declare const _default: import("@storybook/types").ComponentAnnotations<import("@storybook/react/dist/types-0a347bb9").R, import("@storybook/types").Args>;
-export default _default;
-interface ShowcasePageArgs {
-    title: PageBannerProps['title'];
-    description: PageBannerProps['description'];
-    actionLabel?: string;
-    imageSrc?: ImageProps['src'];
-    imageAlt?: ImageProps['alt'];
-    showImage?: boolean;
-    showActions?: boolean;
-    showBanners?: boolean;
-}
-export declare const ShowcasePageDemo: StoryFn<ShowcasePageArgs>;
-//# sourceMappingURL=ShowcasePage.stories.d.ts.map

package/lib/build/PageTemplates/ShowcasePage.stories.d.ts.map

@@ -1 +0,0 @@
-{"version":3,"file":"ShowcasePage.stories.d.ts","sourceRoot":"","sources":["../../../src/build/PageTemplates/ShowcasePage.stories.tsx"],"names":[],"mappings":"AAAA,OAAO,KAAK,EAAQ,OAAO,EAAE,MAAM,kBAAkB,CAAC;AAItD,OAAO,KAAK,EAAE,eAAe,EAAE,MAAM,0BAA0B,CAAC;AAChE,OAAO,KAAK,EAAE,UAAU,EAAE,MAAM,yBAAyB,CAAC;;AAM1D,wBAMU;AAEV,UAAU,gBAAgB;IACxB,KAAK,EAAE,eAAe,CAAC,OAAO,CAAC,CAAC;IAChC,WAAW,EAAE,eAAe,CAAC,aAAa,CAAC,CAAC;IAC5C,WAAW,CAAC,EAAE,MAAM,CAAC;IACrB,QAAQ,CAAC,EAAE,UAAU,CAAC,KAAK,CAAC,CAAC;IAC7B,QAAQ,CAAC,EAAE,UAAU,CAAC,KAAK,CAAC,CAAC;IAC7B,SAAS,CAAC,EAAE,OAAO,CAAC;IACpB,WAAW,CAAC,EAAE,OAAO,CAAC;IACtB,WAAW,CAAC,EAAE,OAAO,CAAC;CACvB;AAED,eAAO,MAAM,gBAAgB,EAAE,OAAO,CAAC,gBAAgB,CAwCtD,CAAC"}

package/lib/build/PageTemplates/ShowcasePage.stories.js

@@ -1,43 +0,0 @@
-import { jsx as _jsx } from "react/jsx-runtime";
-import { action } from '@storybook/addon-actions';
-import { ShowcasePage } from '@pega/cosmos-react-build';
-import { BannerDemo } from '../../core/Banner/Banner.stories';
-import { TableDemo } from '../../core/Table/Table.stories';
-import { AppShellDemo } from '../AppShell/AppShell.stories';
-export default {
-    title: 'Build/PageTemplates',
-    component: ShowcasePage,
-    parameters: {
-        layout: 'fullscreen'
-    }
-};
-export const ShowcasePageDemo = (args) => {
-    return (_jsx(AppShellDemo, { main: _jsx(ShowcasePage, { title: args.title || 'Live Data', description: args.description, image: args.showImage
-                ? {
-                    src: args.imageSrc || './build-live-data.svg',
-                    alt: args.imageAlt || 'Image for the banner'
-                }
-                : undefined, actions: args.showActions
-                ? [
-                    {
-                        label: args.actionLabel || 'Add Data Type',
-                        onClick: action('Banner action clicked!')
-                    }
-                ]
-                : undefined, link: args.showActions ? { label: 'Learn more', href: '#' } : undefined, content: _jsx(TableDemo, { title: args.title || 'Live Data' }), banners: args.showBanners ? _jsx(BannerDemo, { variant: 'urgent', disableFocusControl: true }) : undefined }), appName: 'Compass App', text: 'Launchpad (Main)', showAppNameAndVersion: true, showPreview: true, showBranch: true, currentItemId: 'liveData' }));
-};
-ShowcasePageDemo.args = {
-    title: 'Live Data',
-    description: 'Live Data allows users to quickly and easily define the data required to build the apps they need, and then access that data in their running application - all without having to worry about how and where the data is actually stored and accessed.',
-    showImage: true,
-    showActions: true,
-    showBanners: false
-};
-ShowcasePageDemo.argTypes = {
-    title: { control: { type: 'text' } },
-    description: { control: { type: 'text' } },
-    showImage: { control: { type: 'boolean' } },
-    showActions: { control: { type: 'boolean' } },
-    showBanners: { control: { type: 'boolean' } }
-};
-//# sourceMappingURL=ShowcasePage.stories.js.map

package/lib/build/PageTemplates/ShowcasePage.stories.js.map

@@ -1 +0,0 @@
-{"version":3,"file":"ShowcasePage.stories.js","sourceRoot":"","sources":["../../../src/build/PageTemplates/ShowcasePage.stories.tsx"],"names":[],"mappings":";AACA,OAAO,EAAE,MAAM,EAAE,MAAM,0BAA0B,CAAC;AAElD,OAAO,EAAE,YAAY,EAAE,MAAM,0BAA0B,CAAC;AAIxD,OAAO,EAAE,UAAU,EAAE,MAAM,kCAAkC,CAAC;AAC9D,OAAO,EAAE,SAAS,EAAE,MAAM,gCAAgC,CAAC;AAC3D,OAAO,EAAE,YAAY,EAAE,MAAM,8BAA8B,CAAC;AAE5D,eAAe;IACb,KAAK,EAAE,qBAAqB;IAC5B,SAAS,EAAE,YAAY;IACvB,UAAU,EAAE;QACV,MAAM,EAAE,YAAY;KACrB;CACM,CAAC;AAaV,MAAM,CAAC,MAAM,gBAAgB,GAA8B,CAAC,IAAsB,EAAE,EAAE;IACpF,OAAO,CACL,KAAC,YAAY,IACX,IAAI,EACF,KAAC,YAAY,IACX,KAAK,EAAE,IAAI,CAAC,KAAK,IAAI,WAAW,EAChC,WAAW,EAAE,IAAI,CAAC,WAAW,EAC7B,KAAK,EACH,IAAI,CAAC,SAAS;gBACZ,CAAC,CAAC;oBACE,GAAG,EAAE,IAAI,CAAC,QAAQ,IAAI,uBAAuB;oBAC7C,GAAG,EAAE,IAAI,CAAC,QAAQ,IAAI,sBAAsB;iBAC7C;gBACH,CAAC,CAAC,SAAS,EAEf,OAAO,EACL,IAAI,CAAC,WAAW;gBACd,CAAC,CAAC;oBACE;wBACE,KAAK,EAAE,IAAI,CAAC,WAAW,IAAI,eAAe;wBAC1C,OAAO,EAAE,MAAM,CAAC,wBAAwB,CAAC;qBAC1C;iBACF;gBACH,CAAC,CAAC,SAAS,EAEf,IAAI,EAAE,IAAI,CAAC,WAAW,CAAC,CAAC,CAAC,EAAE,KAAK,EAAE,YAAY,EAAE,IAAI,EAAE,GAAG,EAAE,CAAC,CAAC,CAAC,SAAS,EACvE,OAAO,EAAE,KAAC,SAAS,IAAC,KAAK,EAAE,IAAI,CAAC,KAAK,IAAI,WAAW,GAAI,EACxD,OAAO,EACL,IAAI,CAAC,WAAW,CAAC,CAAC,CAAC,KAAC,UAAU,IAAC,OAAO,EAAC,QAAQ,EAAC,mBAAmB,SAAG,CAAC,CAAC,CAAC,SAAS,GAEpF,EAEJ,OAAO,EAAC,aAAa,EACrB,IAAI,EAAC,kBAAkB,EACvB,qBAAqB,QACrB,WAAW,QACX,UAAU,QACV,aAAa,EAAC,UAAU,GACxB,CACH,CAAC;AACJ,CAAC,CAAC;AAEF,gBAAgB,CAAC,IAAI,GAAG;IACtB,KAAK,EAAE,WAAW;IAClB,WAAW,EACT,uPAAuP;IACzP,SAAS,EAAE,IAAI;IACf,WAAW,EAAE,IAAI;IACjB,WAAW,EAAE,KAAK;CACnB,CAAC;AAEF,gBAAgB,CAAC,QAAQ,GAAG;IAC1B,KAAK,EAAE,EAAE,OAAO,EAAE,EAAE,IAAI,EAAE,MAAM,EAAE,EAAE;IACpC,WAAW,EAAE,EAAE,OAAO,EAAE,EAAE,IAAI,EAAE,MAAM,EAAE,EAAE;IAC1C,SAAS,EAAE,EAAE,OAAO,EAAE,EAAE,IAAI,EAAE,SAAS,EAAE,EAAE;IAC3C,WAAW,EAAE,EAAE,OAAO,EAAE,EAAE,IAAI,EAAE,SAAS,EAAE,EAAE;IAC7C,WAAW,EAAE,EAAE,OAAO,EAAE,EAAE,IAAI,EAAE,SAAS,EAAE,EAAE;CAC9C,CAAC","sourcesContent":["import type { Meta, StoryFn } from '@storybook/react';\nimport { action } from '@storybook/addon-actions';\n\nimport { ShowcasePage } from '@pega/cosmos-react-build';\nimport type { PageBannerProps } from '@pega/cosmos-react-build';\nimport type { ImageProps } from '@pega/cosmos-react-core';\n\nimport { BannerDemo } from '../../core/Banner/Banner.stories';\nimport { TableDemo } from '../../core/Table/Table.stories';\nimport { AppShellDemo } from '../AppShell/AppShell.stories';\n\nexport default {\n  title: 'Build/PageTemplates',\n  component: ShowcasePage,\n  parameters: {\n    layout: 'fullscreen'\n  }\n} as Meta;\n\ninterface ShowcasePageArgs {\n  title: PageBannerProps['title'];\n  description: PageBannerProps['description'];\n  actionLabel?: string;\n  imageSrc?: ImageProps['src'];\n  imageAlt?: ImageProps['alt'];\n  showImage?: boolean;\n  showActions?: boolean;\n  showBanners?: boolean;\n}\n\nexport const ShowcasePageDemo: StoryFn<ShowcasePageArgs> = (args: ShowcasePageArgs) => {\n  return (\n    <AppShellDemo\n      main={\n        <ShowcasePage\n          title={args.title || 'Live Data'}\n          description={args.description}\n          image={\n            args.showImage\n              ? {\n                  src: args.imageSrc || './build-live-data.svg',\n                  alt: args.imageAlt || 'Image for the banner'\n                }\n              : undefined\n          }\n          actions={\n            args.showActions\n              ? [\n                  {\n                    label: args.actionLabel || 'Add Data Type',\n                    onClick: action('Banner action clicked!')\n                  }\n                ]\n              : undefined\n          }\n          link={args.showActions ? { label: 'Learn more', href: '#' } : undefined}\n          content={<TableDemo title={args.title || 'Live Data'} />}\n          banners={\n            args.showBanners ? <BannerDemo variant='urgent' disableFocusControl /> : undefined\n          }\n        />\n      }\n      appName='Compass App'\n      text='Launchpad (Main)'\n      showAppNameAndVersion\n      showPreview\n      showBranch\n      currentItemId='liveData'\n    />\n  );\n};\n\nShowcasePageDemo.args = {\n  title: 'Live Data',\n  description:\n    'Live Data allows users to quickly and easily define the data required to build the apps they need, and then access that data in their running application - all without having to worry about how and where the data is actually stored and accessed.',\n  showImage: true,\n  showActions: true,\n  showBanners: false\n};\n\nShowcasePageDemo.argTypes = {\n  title: { control: { type: 'text' } },\n  description: { control: { type: 'text' } },\n  showImage: { control: { type: 'boolean' } },\n  showActions: { control: { type: 'boolean' } },\n  showBanners: { control: { type: 'boolean' } }\n};\n"]}