@pega/cosmos-react-demos 3.0.0-dev.2.1 → 3.0.0-dev.20.0

package/jsx/core/Number/Number.stories.jsx

@@ -1,25 +1,32 @@
-import { useState } from 'react';
-import { NumberDisplay, NumberInput } from '@pega/cosmos-react-core';
+import { useEffect, useState } from 'react';
+import { NumberDisplay, NumberInput, usePrevious } from '@pega/cosmos-react-core';
 export default {
     title: 'Core/Number',
     component: NumberInput
 };
 export const NumberInputDemo = (args) => {
-    const [value, setValue] = useState();
+    const [value, setValue] = useState(args.value ? args.value.toString() : undefined);
+    const prev = usePrevious(args.value);
+    useEffect(() => {
+        if (prev !== args.value)
+            setValue(args.value ? args.value.toString() : undefined);
+    }, [prev, args.value]);
     return (<NumberInput {...args} value={value} onChange={inputValue => {
             setValue(inputValue);
             args.onChange?.(inputValue);
         }} onBlur={inputValue => {
-            setValue(inputValue);
             args.onBlur?.(inputValue);
-        }} numberOfDecimals={args.numberOfDecimals} showDecimal={args.showDecimal} showGroupSeparators={args.showGroupSeparators} step={args.step} unit={args.unit} unitPlacement={args.unitPlacement} label={args.label} labelHidden={args.labelHidden} info={args.info} status={args.status} required={args.required} disabled={args.disabled} readOnly={args.readOnly}/>);
+        }} onFocus={inputValue => {
+            args.onFocus?.(inputValue);
+        }} numberOfDecimals={args.numberOfDecimals} showDecimal={args.showDecimal} showGroupSeparators={args.showGroupSeparators} step={args.step} unit={args.unit} label={args.label} labelHidden={args.labelHidden} info={args.info} status={args.status} required={args.required} disabled={args.disabled} readOnly={args.readOnly}/>);
 };
 NumberInputDemo.args = {
+    value: undefined,
+    numberOfDecimals: 20,
     showDecimal: true,
     showGroupSeparators: true,
     step: 1,
-    unit: 'ml',
-    unitPlacement: 'after',
+    unit: undefined,
     label: 'Number input',
     labelHidden: false,
     info: 'Enter a numerical value',
@@ -29,12 +36,51 @@ NumberInputDemo.args = {
     readOnly: false
 };
 NumberInputDemo.argTypes = {
+    value: { control: { type: 'number' } },
     numberOfDecimals: { control: { type: 'number' } },
     showDecimal: { control: { type: 'boolean' } },
     showGroupSeparators: { control: { type: 'boolean' } },
     step: { control: { type: 'number' } },
-    unit: { control: { type: 'text' } },
-    unitPlacement: { options: ['before', 'after'], control: { type: 'select' } },
+    unit: {
+        options: [
+            undefined,
+            'acre',
+            'byte',
+            'celsius',
+            'centimeter',
+            'day',
+            'degree',
+            'fahrenheit',
+            'foot',
+            'gigabyte',
+            'gram',
+            'hectare',
+            'hour',
+            'inch',
+            'kilobyte',
+            'kilogram',
+            'kilometer',
+            'kilometer-per-hour',
+            'liter',
+            'liter-per-meter',
+            'megabyte',
+            'meter',
+            'meter-per-second',
+            'mile',
+            'millimeter',
+            'millisecond',
+            'minute',
+            'month',
+            'percent',
+            'pound',
+            'second',
+            'terabyte',
+            'week',
+            'year',
+            'token'
+        ],
+        control: { type: 'select' }
+    },
     label: { control: { type: 'text' } },
     labelHidden: { control: { type: 'boolean' } },
     info: { control: { type: 'text' } },
@@ -44,21 +90,28 @@ NumberInputDemo.argTypes = {
     readOnly: { control: { type: 'boolean' } }
 };
 export const StepperDemo = (args) => {
-    const [value, setValue] = useState();
+    const [value, setValue] = useState(args.value ? args.value.toString() : undefined);
+    const prev = usePrevious(args.value);
+    useEffect(() => {
+        if (prev !== args.value)
+            setValue(args.value ? args.value.toString() : undefined);
+    }, [prev, args.value]);
     return (<NumberInput {...args} variant='stepper' value={value} onChange={inputValue => {
             setValue(inputValue);
             args.onChange?.(inputValue);
         }} onBlur={inputValue => {
-            setValue(inputValue);
             args.onBlur?.(inputValue);
-        }} numberOfDecimals={args.numberOfDecimals} showDecimal={args.showDecimal} showGroupSeparators={args.showGroupSeparators} step={args.step} unit={args.unit} unitPlacement={args.unitPlacement} label={args.label} labelHidden={args.labelHidden} info={args.info} status={args.status} required={args.required} disabled={args.disabled} readOnly={args.readOnly}/>);
+        }} onFocus={inputValue => {
+            args.onFocus?.(inputValue);
+        }} numberOfDecimals={args.numberOfDecimals} showDecimal={args.showDecimal} showGroupSeparators={args.showGroupSeparators} step={args.step} unit={args.unit} label={args.label} labelHidden={args.labelHidden} info={args.info} status={args.status} required={args.required} disabled={args.disabled} readOnly={args.readOnly}/>);
 };
 StepperDemo.args = {
+    value: undefined,
+    numberOfDecimals: 20,
     showDecimal: true,
     showGroupSeparators: true,
     step: 1,
-    unit: 'ml',
-    unitPlacement: 'after',
+    unit: undefined,
     label: 'Stepper input',
     labelHidden: false,
     info: 'Enter a numerical value',
@@ -68,12 +121,12 @@ StepperDemo.args = {
     readOnly: false
 };
 StepperDemo.argTypes = {
+    value: { control: { type: 'number' } },
     numberOfDecimals: { control: { type: 'number' } },
     showDecimal: { control: { type: 'boolean' } },
     showGroupSeparators: { control: { type: 'boolean' } },
     step: { control: { type: 'number' } },
     unit: { control: { type: 'text' } },
-    unitPlacement: { options: ['before', 'after'], control: { type: 'select' } },
     label: { control: { type: 'text' } },
     labelHidden: { control: { type: 'boolean' } },
     info: { control: { type: 'text' } },
@@ -83,25 +136,66 @@ StepperDemo.argTypes = {
     readOnly: { control: { type: 'boolean' } }
 };
 export const NumberDisplayDemo = (args) => {
-    return (<NumberDisplay value={args.value} unit={args.unit} unitPlacement={args.unitPlacement} formattingOptions={{
-            numberOfDecimals: args.numberOfDecimals,
-            showGroupSeparators: args.showGroupSeparators,
-            showDecimal: args.showDecimal
+    return (<NumberDisplay value={args.value} unit={args.unit} formattingOptions={{
+            fractionDigits: args.fractionDigits,
+            groupSeparators: args.groupSeparators,
+            notation: args.notation
         }}/>);
 };
 NumberDisplayDemo.args = {
-    value: '12345.6789',
-    unit: 'ml',
-    unitPlacement: 'after',
-    showGroupSeparators: true,
-    showDecimal: true
+    value: undefined,
+    unit: undefined,
+    fractionDigits: undefined,
+    notation: undefined,
+    groupSeparators: true
 };
 NumberDisplayDemo.argTypes = {
-    value: { control: { type: 'text' } },
-    unit: { control: { type: 'text' } },
-    unitPlacement: { options: ['before', 'after'], control: { type: 'select' } },
-    numberOfDecimals: { control: { type: 'number' } },
-    showGroupSeparators: { control: { type: 'boolean' } },
-    showDecimal: { control: { type: 'boolean' } }
+    value: { control: { type: 'number' } },
+    unit: {
+        options: [
+            undefined,
+            'acre',
+            'byte',
+            'celsius',
+            'centimeter',
+            'day',
+            'degree',
+            'fahrenheit',
+            'foot',
+            'gigabyte',
+            'gram',
+            'hectare',
+            'hour',
+            'inch',
+            'kilobyte',
+            'kilogram',
+            'kilometer',
+            'kilometer-per-hour',
+            'liter',
+            'liter-per-meter',
+            'megabyte',
+            'meter',
+            'meter-per-second',
+            'mile',
+            'millimeter',
+            'millisecond',
+            'minute',
+            'month',
+            'percent',
+            'pound',
+            'second',
+            'terabyte',
+            'week',
+            'year',
+            'token'
+        ],
+        control: { type: 'select' }
+    },
+    fractionDigits: { control: { type: 'number', min: 0, max: 20, step: 1 } },
+    groupSeparators: { control: { type: 'boolean' } },
+    notation: {
+        control: { type: 'inline-radio' },
+        options: ['standard', 'compact']
+    }
 };
 //# sourceMappingURL=Number.stories.jsx.map

package/jsx/core/Number/Number.stories.jsx.map

@@ -1 +1 @@
-{"version":3,"file":"Number.stories.jsx","sourceRoot":"","sources":["../../../src/core/Number/Number.stories.tsx"],"names":[],"mappings":"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","sourcesContent":["import { Meta, Story } from '@storybook/react';\nimport { useState } from 'react';\n\nimport {\n  NumberDisplay,\n  NumberDisplayProps,\n  NumberInput,\n  NumberInputProps\n} from '@pega/cosmos-react-core';\n\nexport default {\n  title: 'Core/Number',\n  component: NumberInput\n} as Meta;\n\nexport const NumberInputDemo: Story<NumberInputProps> = (args: NumberInputProps) => {\n  const [value, setValue] = useState<string>();\n\n  return (\n    <NumberInput\n      {...args}\n      value={value}\n      onChange={inputValue => {\n        setValue(inputValue);\n        args.onChange?.(inputValue);\n      }}\n      onBlur={inputValue => {\n        setValue(inputValue);\n        args.onBlur?.(inputValue);\n      }}\n      numberOfDecimals={args.numberOfDecimals}\n      showDecimal={args.showDecimal}\n      showGroupSeparators={args.showGroupSeparators}\n      step={args.step}\n      unit={args.unit}\n      unitPlacement={args.unitPlacement}\n      label={args.label}\n      labelHidden={args.labelHidden}\n      info={args.info}\n      status={args.status}\n      required={args.required}\n      disabled={args.disabled}\n      readOnly={args.readOnly}\n    />\n  );\n};\n\nNumberInputDemo.args = {\n  showDecimal: true,\n  showGroupSeparators: true,\n  step: 1,\n  unit: 'ml',\n  unitPlacement: 'after',\n  label: 'Number input',\n  labelHidden: false,\n  info: 'Enter a numerical value',\n  status: undefined,\n  required: false,\n  disabled: false,\n  readOnly: false\n};\n\nNumberInputDemo.argTypes = {\n  numberOfDecimals: { control: { type: 'number' } },\n  showDecimal: { control: { type: 'boolean' } },\n  showGroupSeparators: { control: { type: 'boolean' } },\n  step: { control: { type: 'number' } },\n  unit: { control: { type: 'text' } },\n  unitPlacement: { options: ['before', 'after'], control: { type: 'select' } },\n  label: { control: { type: 'text' } },\n  labelHidden: { control: { type: 'boolean' } },\n  info: { control: { type: 'text' } },\n  status: { options: [undefined, 'success', 'warning', 'error'], control: { type: 'select' } },\n  required: { control: { type: 'boolean' } },\n  disabled: { control: { type: 'boolean' } },\n  readOnly: { control: { type: 'boolean' } }\n};\n\nexport const StepperDemo: Story<NumberInputProps> = (args: NumberInputProps) => {\n  const [value, setValue] = useState<string>();\n\n  return (\n    <NumberInput\n      {...args}\n      variant='stepper'\n      value={value}\n      onChange={inputValue => {\n        setValue(inputValue);\n        args.onChange?.(inputValue);\n      }}\n      onBlur={inputValue => {\n        setValue(inputValue);\n        args.onBlur?.(inputValue);\n      }}\n      numberOfDecimals={args.numberOfDecimals}\n      showDecimal={args.showDecimal}\n      showGroupSeparators={args.showGroupSeparators}\n      step={args.step}\n      unit={args.unit}\n      unitPlacement={args.unitPlacement}\n      label={args.label}\n      labelHidden={args.labelHidden}\n      info={args.info}\n      status={args.status}\n      required={args.required}\n      disabled={args.disabled}\n      readOnly={args.readOnly}\n    />\n  );\n};\n\nStepperDemo.args = {\n  showDecimal: true,\n  showGroupSeparators: true,\n  step: 1,\n  unit: 'ml',\n  unitPlacement: 'after',\n  label: 'Stepper input',\n  labelHidden: false,\n  info: 'Enter a numerical value',\n  status: undefined,\n  required: false,\n  disabled: false,\n  readOnly: false\n};\n\nStepperDemo.argTypes = {\n  numberOfDecimals: { control: { type: 'number' } },\n  showDecimal: { control: { type: 'boolean' } },\n  showGroupSeparators: { control: { type: 'boolean' } },\n  step: { control: { type: 'number' } },\n  unit: { control: { type: 'text' } },\n  unitPlacement: { options: ['before', 'after'], control: { type: 'select' } },\n  label: { control: { type: 'text' } },\n  labelHidden: { control: { type: 'boolean' } },\n  info: { control: { type: 'text' } },\n  status: { options: [undefined, 'success', 'warning', 'error'], control: { type: 'select' } },\n  required: { control: { type: 'boolean' } },\n  disabled: { control: { type: 'boolean' } },\n  readOnly: { control: { type: 'boolean' } }\n};\n\ninterface NumberDisplayStoryProps extends NumberDisplayProps {\n  numberOfDecimals: number;\n  showGroupSeparators: boolean;\n  showDecimal: boolean;\n}\n\nexport const NumberDisplayDemo: Story<NumberDisplayStoryProps> = (\n  args: NumberDisplayStoryProps\n) => {\n  return (\n    <NumberDisplay\n      value={args.value}\n      unit={args.unit}\n      unitPlacement={args.unitPlacement}\n      formattingOptions={{\n        numberOfDecimals: args.numberOfDecimals,\n        showGroupSeparators: args.showGroupSeparators,\n        showDecimal: args.showDecimal\n      }}\n    />\n  );\n};\n\nNumberDisplayDemo.args = {\n  value: '12345.6789',\n  unit: 'ml',\n  unitPlacement: 'after',\n  showGroupSeparators: true,\n  showDecimal: true\n};\n\nNumberDisplayDemo.argTypes = {\n  value: { control: { type: 'text' } },\n  unit: { control: { type: 'text' } },\n  unitPlacement: { options: ['before', 'after'], control: { type: 'select' } },\n  numberOfDecimals: { control: { type: 'number' } },\n  showGroupSeparators: { control: { type: 'boolean' } },\n  showDecimal: { control: { type: 'boolean' } }\n};\n"]}
+{"version":3,"file":"Number.stories.jsx","sourceRoot":"","sources":["../../../src/core/Number/Number.stories.tsx"],"names":[],"mappings":"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","sourcesContent":["import { Meta, Story } from '@storybook/react';\nimport { useEffect, useState } from 'react';\n\nimport {\n  NumberDisplay,\n  NumberDisplayProps,\n  NumberInput,\n  NumberInputProps,\n  OmitStrict,\n  usePrevious\n} from '@pega/cosmos-react-core';\n\nexport default {\n  title: 'Core/Number',\n  component: NumberInput\n} as Meta;\n\nexport type NumberInputStory = OmitStrict<NumberInputProps, 'value' | 'onChange'> & {\n  value?: number | string;\n  onChange?: (value: string) => void;\n};\n\nexport const NumberInputDemo: Story<NumberInputStory> = (args: NumberInputStory) => {\n  const [value, setValue] = useState<string | undefined>(\n    args.value ? args.value.toString() : undefined\n  );\n\n  const prev = usePrevious(args.value);\n  useEffect(() => {\n    if (prev !== args.value) setValue(args.value ? args.value.toString() : undefined);\n  }, [prev, args.value]);\n\n  return (\n    <NumberInput\n      {...args}\n      value={value}\n      onChange={inputValue => {\n        setValue(inputValue);\n        args.onChange?.(inputValue);\n      }}\n      onBlur={inputValue => {\n        args.onBlur?.(inputValue);\n      }}\n      onFocus={inputValue => {\n        args.onFocus?.(inputValue);\n      }}\n      numberOfDecimals={args.numberOfDecimals}\n      showDecimal={args.showDecimal}\n      showGroupSeparators={args.showGroupSeparators}\n      step={args.step}\n      unit={args.unit}\n      label={args.label}\n      labelHidden={args.labelHidden}\n      info={args.info}\n      status={args.status}\n      required={args.required}\n      disabled={args.disabled}\n      readOnly={args.readOnly}\n    />\n  );\n};\n\nNumberInputDemo.args = {\n  value: undefined,\n  numberOfDecimals: 20,\n  showDecimal: true,\n  showGroupSeparators: true,\n  step: 1,\n  unit: undefined,\n  label: 'Number input',\n  labelHidden: false,\n  info: 'Enter a numerical value',\n  status: undefined,\n  required: false,\n  disabled: false,\n  readOnly: false\n};\n\nNumberInputDemo.argTypes = {\n  value: { control: { type: 'number' } },\n  numberOfDecimals: { control: { type: 'number' } },\n  showDecimal: { control: { type: 'boolean' } },\n  showGroupSeparators: { control: { type: 'boolean' } },\n  step: { control: { type: 'number' } },\n  unit: {\n    options: [\n      undefined,\n      'acre',\n      'byte',\n      'celsius',\n      'centimeter',\n      'day',\n      'degree',\n      'fahrenheit',\n      'foot',\n      'gigabyte',\n      'gram',\n      'hectare',\n      'hour',\n      'inch',\n      'kilobyte',\n      'kilogram',\n      'kilometer',\n      'kilometer-per-hour',\n      'liter',\n      'liter-per-meter',\n      'megabyte',\n      'meter',\n      'meter-per-second',\n      'mile',\n      'millimeter',\n      'millisecond',\n      'minute',\n      'month',\n      'percent',\n      'pound',\n      'second',\n      'terabyte',\n      'week',\n      'year',\n      'token'\n    ],\n    control: { type: 'select' }\n  },\n  label: { control: { type: 'text' } },\n  labelHidden: { control: { type: 'boolean' } },\n  info: { control: { type: 'text' } },\n  status: { options: [undefined, 'success', 'warning', 'error'], control: { type: 'select' } },\n  required: { control: { type: 'boolean' } },\n  disabled: { control: { type: 'boolean' } },\n  readOnly: { control: { type: 'boolean' } }\n};\n\nexport const StepperDemo: Story<NumberInputStory> = (args: NumberInputStory) => {\n  const [value, setValue] = useState<string | undefined>(\n    args.value ? args.value.toString() : undefined\n  );\n\n  const prev = usePrevious(args.value);\n  useEffect(() => {\n    if (prev !== args.value) setValue(args.value ? args.value.toString() : undefined);\n  }, [prev, args.value]);\n\n  return (\n    <NumberInput\n      {...args}\n      variant='stepper'\n      value={value}\n      onChange={inputValue => {\n        setValue(inputValue);\n        args.onChange?.(inputValue);\n      }}\n      onBlur={inputValue => {\n        args.onBlur?.(inputValue);\n      }}\n      onFocus={inputValue => {\n        args.onFocus?.(inputValue);\n      }}\n      numberOfDecimals={args.numberOfDecimals}\n      showDecimal={args.showDecimal}\n      showGroupSeparators={args.showGroupSeparators}\n      step={args.step}\n      unit={args.unit}\n      label={args.label}\n      labelHidden={args.labelHidden}\n      info={args.info}\n      status={args.status}\n      required={args.required}\n      disabled={args.disabled}\n      readOnly={args.readOnly}\n    />\n  );\n};\n\nStepperDemo.args = {\n  value: undefined,\n  numberOfDecimals: 20,\n  showDecimal: true,\n  showGroupSeparators: true,\n  step: 1,\n  unit: undefined,\n  label: 'Stepper input',\n  labelHidden: false,\n  info: 'Enter a numerical value',\n  status: undefined,\n  required: false,\n  disabled: false,\n  readOnly: false\n};\n\nStepperDemo.argTypes = {\n  value: { control: { type: 'number' } },\n  numberOfDecimals: { control: { type: 'number' } },\n  showDecimal: { control: { type: 'boolean' } },\n  showGroupSeparators: { control: { type: 'boolean' } },\n  step: { control: { type: 'number' } },\n  unit: { control: { type: 'text' } },\n\n  label: { control: { type: 'text' } },\n  labelHidden: { control: { type: 'boolean' } },\n  info: { control: { type: 'text' } },\n  status: { options: [undefined, 'success', 'warning', 'error'], control: { type: 'select' } },\n  required: { control: { type: 'boolean' } },\n  disabled: { control: { type: 'boolean' } },\n  readOnly: { control: { type: 'boolean' } }\n};\n\ninterface NumberDisplayStoryProps extends NumberDisplayProps {\n  fractionDigits: number;\n  groupSeparators: boolean;\n  notation: 'standard' | 'compact';\n}\n\nexport const NumberDisplayDemo: Story<NumberDisplayStoryProps> = (\n  args: NumberDisplayStoryProps\n) => {\n  return (\n    <NumberDisplay\n      value={args.value}\n      unit={args.unit}\n      formattingOptions={{\n        fractionDigits: args.fractionDigits,\n        groupSeparators: args.groupSeparators,\n        notation: args.notation\n      }}\n    />\n  );\n};\n\nNumberDisplayDemo.args = {\n  value: undefined,\n  unit: undefined,\n  fractionDigits: undefined,\n  notation: undefined,\n  groupSeparators: true\n};\n\nNumberDisplayDemo.argTypes = {\n  value: { control: { type: 'number' } },\n  unit: {\n    options: [\n      undefined,\n      'acre',\n      'byte',\n      'celsius',\n      'centimeter',\n      'day',\n      'degree',\n      'fahrenheit',\n      'foot',\n      'gigabyte',\n      'gram',\n      'hectare',\n      'hour',\n      'inch',\n      'kilobyte',\n      'kilogram',\n      'kilometer',\n      'kilometer-per-hour',\n      'liter',\n      'liter-per-meter',\n      'megabyte',\n      'meter',\n      'meter-per-second',\n      'mile',\n      'millimeter',\n      'millisecond',\n      'minute',\n      'month',\n      'percent',\n      'pound',\n      'second',\n      'terabyte',\n      'week',\n      'year',\n      'token'\n    ],\n    control: { type: 'select' }\n  },\n  fractionDigits: { control: { type: 'number', min: 0, max: 20, step: 1 } },\n  groupSeparators: { control: { type: 'boolean' } },\n  notation: {\n    control: { type: 'inline-radio' },\n    options: ['standard', 'compact']\n  }\n};\n"]}

package/jsx/core/PageTemplates/PageTemplates.mocks.d.ts

@@ -1,3 +1,3 @@
 import { PageTemplateProps } from '@pega/cosmos-react-core';
-export declare const getPath: (showBreadcrumbs?: boolean | undefined, pathData?: string | undefined) => PageTemplateProps['path'];
+export declare const getPath: (showBreadcrumbs?: boolean, pathData?: string) => PageTemplateProps['path'];
 //# sourceMappingURL=PageTemplates.mocks.d.ts.map

package/jsx/core/PageTemplates/PageTemplates.mocks.d.ts.map

@@ -1 +1 @@
-{"version":3,"file":"PageTemplates.mocks.d.ts","sourceRoot":"","sources":["../../../src/core/PageTemplates/PageTemplates.mocks.ts"],"names":[],"mappings":"AAAA,OAAO,EAAE,iBAAiB,EAAE,MAAM,yBAAyB,CAAC;AAE5D,eAAO,MAAM,OAAO,4EAGjB,iBAAiB,CAAC,MAAM,CAQ1B,CAAC"}
+{"version":3,"file":"PageTemplates.mocks.d.ts","sourceRoot":"","sources":["../../../src/core/PageTemplates/PageTemplates.mocks.ts"],"names":[],"mappings":"AAAA,OAAO,EAAE,iBAAiB,EAAE,MAAM,yBAAyB,CAAC;AAE5D,eAAO,MAAM,OAAO,qBACA,OAAO,aACd,MAAM,KAChB,iBAAiB,CAAC,MAAM,CAQ1B,CAAC"}

package/jsx/core/PageTemplates/PageTemplates.stories.d.ts

@@ -1,9 +1,9 @@
 import { Meta, Story } from '@storybook/react';
-import { DashboardPageLayoutProps, PageTemplateProps, TemplateProps } from '@pega/cosmos-react-core';
+import { DashboardPageLayoutProps, PageTemplateProps, TemplateProps, OmitStrict } from '@pega/cosmos-react-core';
 declare const _default: Meta<import("@storybook/react").Args>;
 export default _default;
 interface PageTemplatesStoryProps {
-    template?: 'demo page' | 'one column' | 'two column' | 'three column' | 'four column' | 'wide narrow' | 'narrow wide' | 'wide wide narrow' | 'narrow wide wide' | 'narrow wide narrow' | 'tabbed';
+    template?: 'demo page' | 'one column' | 'two column' | 'three column' | 'four column' | 'wide narrow' | 'narrow wide' | 'wide wide narrow' | 'narrow wide wide' | 'narrow wide narrow';
     title?: PageTemplateProps['title'];
     icon?: PageTemplateProps['icon'];
     scrollContent?: PageTemplateProps['scrollContent'];
@@ -13,7 +13,7 @@ interface PageTemplatesStoryProps {
     showActions?: boolean;
     showBanners?: boolean;
 }
-export declare const PageTemplatesDemo: Story<PageTemplatesStoryProps>;
+export declare const ColumnPageDemo: Story<PageTemplatesStoryProps>;
 interface DashboardPageStoryProps {
     title?: DashboardPageLayoutProps['title'];
     filterPosition?: DashboardPageLayoutProps['filterPosition'];
@@ -28,4 +28,6 @@ interface CategorySubPageStoryProps {
     maxActions?: TemplateProps['maxActions'];
 }
 export declare const CategorySubPageDemo: Story<CategorySubPageStoryProps>;
+declare type TabbedPageStoryProps = OmitStrict<PageTemplatesStoryProps, 'template'>;
+export declare const TabbedPageDemo: Story<TabbedPageStoryProps>;
 //# sourceMappingURL=PageTemplates.stories.d.ts.map

package/jsx/core/PageTemplates/PageTemplates.stories.d.ts.map

@@ -1 +1 @@
-{"version":3,"file":"PageTemplates.stories.d.ts","sourceRoot":"","sources":["../../../src/core/PageTemplates/PageTemplates.stories.tsx"],"names":[],"mappings":"AAAA,OAAO,EAAE,IAAI,EAAE,KAAK,EAAE,MAAM,kBAAkB,CAAC;AAG/C,OAAO,EAML,wBAAwB,EAWxB,iBAAiB,EAKjB,aAAa,EAEd,MAAM,yBAAyB,CAAC;;AAUjC,wBAKU;AAEV,UAAU,uBAAuB;IAC/B,QAAQ,CAAC,EACL,WAAW,GACX,YAAY,GACZ,YAAY,GACZ,cAAc,GACd,aAAa,GACb,aAAa,GACb,aAAa,GACb,kBAAkB,GAClB,kBAAkB,GAClB,oBAAoB,GACpB,QAAQ,CAAC;IACb,KAAK,CAAC,EAAE,iBAAiB,CAAC,OAAO,CAAC,CAAC;IACnC,IAAI,CAAC,EAAE,iBAAiB,CAAC,MAAM,CAAC,CAAC;IACjC,aAAa,CAAC,EAAE,iBAAiB,CAAC,eAAe,CAAC,CAAC;IACnD,QAAQ,CAAC,EAAE,OAAO,CAAC;IACnB,eAAe,CAAC,EAAE,OAAO,CAAC;IAC1B,QAAQ,CAAC,EAAE,MAAM,CAAC;IAClB,WAAW,CAAC,EAAE,OAAO,CAAC;IACtB,WAAW,CAAC,EAAE,OAAO,CAAC;CACvB;AAED,eAAO,MAAM,iBAAiB,EAAE,KAAK,CAAC,uBAAuB,CAiG5D,CAAC;AAyCF,UAAU,uBAAuB;IAC/B,KAAK,CAAC,EAAE,wBAAwB,CAAC,OAAO,CAAC,CAAC;IAC1C,cAAc,CAAC,EAAE,wBAAwB,CAAC,gBAAgB,CAAC,CAAC;IAC5D,eAAe,CAAC,EAAE,MAAM,CAAC;CAC1B;AAED,eAAO,MAAM,iBAAiB,EAAE,KAAK,CAAC,uBAAuB,CAoE5D,CAAC;AAiBF,UAAU,yBAAyB;IACjC,QAAQ,CAAC,EAAE,aAAa,CAAC,UAAU,CAAC,CAAC;IACrC,YAAY,CAAC,EAAE,aAAa,CAAC,cAAc,CAAC,CAAC;IAC7C,QAAQ,CAAC,EAAE,OAAO,CAAC;IACnB,WAAW,CAAC,EAAE,aAAa,CAAC,aAAa,CAAC,CAAC;IAC3C,UAAU,CAAC,EAAE,aAAa,CAAC,YAAY,CAAC,CAAC;CAC1C;AAED,eAAO,MAAM,mBAAmB,EAAE,KAAK,CAAC,yBAAyB,CAkFhE,CAAC"}
+{"version":3,"file":"PageTemplates.stories.d.ts","sourceRoot":"","sources":["../../../src/core/PageTemplates/PageTemplates.stories.tsx"],"names":[],"mappings":"AAAA,OAAO,EAAE,IAAI,EAAE,KAAK,EAAE,MAAM,kBAAkB,CAAC;AAG/C,OAAO,EAML,wBAAwB,EAWxB,iBAAiB,EAKjB,aAAa,EAMb,UAAU,EACX,MAAM,yBAAyB,CAAC;;AAWjC,wBAKU;AAEV,UAAU,uBAAuB;IAC/B,QAAQ,CAAC,EACL,WAAW,GACX,YAAY,GACZ,YAAY,GACZ,cAAc,GACd,aAAa,GACb,aAAa,GACb,aAAa,GACb,kBAAkB,GAClB,kBAAkB,GAClB,oBAAoB,CAAC;IACzB,KAAK,CAAC,EAAE,iBAAiB,CAAC,OAAO,CAAC,CAAC;IACnC,IAAI,CAAC,EAAE,iBAAiB,CAAC,MAAM,CAAC,CAAC;IACjC,aAAa,CAAC,EAAE,iBAAiB,CAAC,eAAe,CAAC,CAAC;IACnD,QAAQ,CAAC,EAAE,OAAO,CAAC;IACnB,eAAe,CAAC,EAAE,OAAO,CAAC;IAC1B,QAAQ,CAAC,EAAE,MAAM,CAAC;IAClB,WAAW,CAAC,EAAE,OAAO,CAAC;IACtB,WAAW,CAAC,EAAE,OAAO,CAAC;CACvB;AAED,eAAO,MAAM,cAAc,EAAE,KAAK,CAAC,uBAAuB,CA0EzD,CAAC;AAwCF,UAAU,uBAAuB;IAC/B,KAAK,CAAC,EAAE,wBAAwB,CAAC,OAAO,CAAC,CAAC;IAC1C,cAAc,CAAC,EAAE,wBAAwB,CAAC,gBAAgB,CAAC,CAAC;IAC5D,eAAe,CAAC,EAAE,MAAM,CAAC;CAC1B;AAED,eAAO,MAAM,iBAAiB,EAAE,KAAK,CAAC,uBAAuB,CAoE5D,CAAC;AAiBF,UAAU,yBAAyB;IACjC,QAAQ,CAAC,EAAE,aAAa,CAAC,UAAU,CAAC,CAAC;IACrC,YAAY,CAAC,EAAE,aAAa,CAAC,cAAc,CAAC,CAAC;IAC7C,QAAQ,CAAC,EAAE,OAAO,CAAC;IACnB,WAAW,CAAC,EAAE,aAAa,CAAC,aAAa,CAAC,CAAC;IAC3C,UAAU,CAAC,EAAE,aAAa,CAAC,YAAY,CAAC,CAAC;CAC1C;AAED,eAAO,MAAM,mBAAmB,EAAE,KAAK,CAAC,yBAAyB,CAkFhE,CAAC;AAkBF,aAAK,oBAAoB,GAAG,UAAU,CAAC,uBAAuB,EAAE,UAAU,CAAC,CAAC;AAE5E,eAAO,MAAM,cAAc,EAAE,KAAK,CAAC,oBAAoB,CA+EtD,CAAC"}

package/jsx/core/PageTemplates/PageTemplates.stories.jsx

@@ -1,10 +1,11 @@
 import { useState, useMemo } from 'react';
-import { Banner, Button, CategorySubPage, ComboBox, DashboardPage, TabbedPage, OneColumnPage, TwoColumnPage, ThreeColumnPage, FourColumnPage, WideNarrowPage, NarrowWidePage, WideWideNarrowPage, NarrowWideWidePage, NarrowWideNarrowPage, icons, menuHelpers, createUID } from '@pega/cosmos-react-core';
+import { Banner, Button, CategorySubPage, ComboBox, DashboardPage, TabbedPage, OneColumnPage, TwoColumnPage, ThreeColumnPage, FourColumnPage, WideNarrowPage, NarrowWidePage, WideWideNarrowPage, NarrowWideWidePage, NarrowWideNarrowPage, icons, menuHelpers, createUID, Table, Text, StyledRegion } from '@pega/cosmos-react-core';
 import { FeedDemo } from '../../social/Feed/Feed.stories';
 import { TasksDemo } from '../../work/Tasks/Tasks.stories';
 import { MockSummaryList } from '../../work/CaseView/CaseView.mocks';
+import { commitsData } from '../Table/Table.mocks';
 import { AppShellDemo } from '../AppShell/AppShell.stories';
-import { StyledStoryPage } from './PageTemplates.styles';
+import { StyledDemoTableWrapper, StyledStoryPage } from './PageTemplates.styles';
 import { getPath } from './PageTemplates.mocks';
 export default {
     title: 'Core/PageTemplates',
@@ -12,8 +13,7 @@ export default {
         layout: 'fullscreen'
     }
 };
-export const PageTemplatesDemo = (args) => {
-    const [currentTabId, setCurrentTabId] = useState('1');
+export const ColumnPageDemo = (args) => {
     const actions = args.showActions && (<>
       <Button>Page action 1</Button>
       <Button>Page action 2</Button>
@@ -30,12 +30,6 @@ export const PageTemplatesDemo = (args) => {
     };
     let page;
     switch (args.template) {
-        case 'demo page':
-            page = (<TwoColumnPage a={<FeedDemo />} b={<>
-              <TasksDemo />
-              <MockSummaryList name='My team' limit={10} actions={null}/>
-            </>} {...pageTemplateProps}/>);
-            break;
         case 'one column':
             page = <OneColumnPage a='a' {...pageTemplateProps}/>;
             break;
@@ -63,24 +57,17 @@ export const PageTemplatesDemo = (args) => {
         case 'narrow wide narrow':
             page = <NarrowWideNarrowPage a='a' b='b' c='c' {...pageTemplateProps}/>;
             break;
-        case 'tabbed':
+        case 'demo page':
         default:
-            page = (<TabbedPage a={`Content for: Tab ${currentTabId}`} tabs={{
-                    tabs: Array.from({ length: 5 }, (_, i) => {
-                        return {
-                            id: `${i + 1}`,
-                            name: `Tab ${i + 1}`
-                        };
-                    }),
-                    type: 'horizontal',
-                    currentTabId,
-                    onTabClick: setCurrentTabId
-                }} {...pageTemplateProps}/>);
+            page = (<TwoColumnPage a={<FeedDemo />} b={<>
+              <TasksDemo />
+              <MockSummaryList name='My team' limit={10} actions={null}/>
+            </>} {...pageTemplateProps}/>);
             break;
     }
     return <AppShellDemo main={page} appHeader/>;
 };
-PageTemplatesDemo.args = {
+ColumnPageDemo.args = {
     template: 'demo page',
     scrollContent: false,
     title: 'Demo page',
@@ -91,7 +78,7 @@ PageTemplatesDemo.args = {
     showActions: true,
     showBanners: false
 };
-PageTemplatesDemo.argTypes = {
+ColumnPageDemo.argTypes = {
     template: {
         options: [
             'demo page',
@@ -103,8 +90,7 @@ PageTemplatesDemo.argTypes = {
             'narrow wide',
             'wide wide narrow',
             'narrow wide wide',
-            'narrow wide narrow',
-            'tabbed'
+            'narrow wide narrow'
         ],
         control: { type: 'select' }
     },
@@ -213,7 +199,7 @@ export const CategorySubPageDemo = (args) => {
                     text: 'View in Clipboard'
                 }
             ]} region={<StyledStoryPage secondary>
-              <div style={{ minHeight: '150vh' }}/>
+              <StyledRegion style={{ minHeight: '150vh' }}/>
             </StyledStoryPage>}/>} appHeader/>);
 };
 CategorySubPageDemo.args = {
@@ -230,4 +216,72 @@ CategorySubPageDemo.argTypes = {
     viewLoading: { control: { type: 'boolean' } },
     maxActions: { control: { type: 'number' } }
 };
+export const TabbedPageDemo = (args) => {
+    const actions = args.showActions && (<>
+      <Button>Page action 1</Button>
+      <Button>Page action 2</Button>
+    </>);
+    const banners = args.showBanners && (<Banner id='warning-banner' variant='warning' messages={['This is a warning banner. You have been warned!']}/>);
+    const pageTemplateProps = {
+        scrollContent: args.scrollContent,
+        title: args.title || 'Tabbed page',
+        icon: args.showIcon ? args.icon : undefined,
+        actions,
+        banners,
+        path: getPath(args.showBreadcrumbs, args.pathData)
+    };
+    const tableData = commitsData;
+    const columns = [
+        { renderer: data => <Text>{data.id}</Text>, label: 'ID' },
+        { renderer: data => <Text>{data.author}</Text>, label: 'Author' },
+        { renderer: data => <Text>{data.date}</Text>, label: 'Date' },
+        { renderer: data => <Text>{data.message}</Text>, label: 'Message' }
+    ];
+    return (<AppShellDemo main={<TabbedPage {...pageTemplateProps} tabs={{
+                tabs: [
+                    {
+                        id: 'table',
+                        name: 'Audit',
+                        content: (<StyledDemoTableWrapper>
+                    <Table title='Commit History' hoverHighlight={false} data={tableData} columns={columns}/>
+                  </StyledDemoTableWrapper>)
+                    },
+                    {
+                        id: 'team',
+                        name: 'My Team',
+                        content: (<>
+                    <TasksDemo />
+                    <MockSummaryList name='My team' limit={10} actions={null}/>
+                  </>)
+                    },
+                    {
+                        id: 'chat',
+                        name: 'Chat',
+                        content: <FeedDemo />
+                    }
+                ],
+                type: 'horizontal',
+                defaultTabId: 'chat'
+            }}/>} appHeader/>);
+};
+TabbedPageDemo.args = {
+    scrollContent: false,
+    title: 'Tabbed page',
+    icon: 'home-solid',
+    showIcon: true,
+    showBreadcrumbs: true,
+    pathData: 'Page 1,Page2,Page 3,Page 4,Page 5',
+    showActions: true,
+    showBanners: false
+};
+TabbedPageDemo.argTypes = {
+    scrollContent: { control: { type: 'boolean' } },
+    title: { control: { type: 'text' } },
+    icon: { options: icons, control: { type: 'select', icons: true } },
+    showIcon: { control: { type: 'boolean' } },
+    showBreadcrumbs: { control: { type: 'boolean' } },
+    pathData: { control: { type: 'text' } },
+    showActions: { control: { type: 'boolean' } },
+    showBanners: { control: { type: 'boolean' } }
+};
 //# sourceMappingURL=PageTemplates.stories.jsx.map

package/jsx/core/PageTemplates/PageTemplates.stories.jsx.map

@@ -1 +1 @@
-{"version":3,"file":"PageTemplates.stories.jsx","sourceRoot":"","sources":["../../../src/core/PageTemplates/PageTemplates.stories.tsx"],"names":[],"mappings":"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","sourcesContent":["import { Meta, Story } from '@storybook/react';\nimport { useState, useMemo, MouseEvent } from 'react';\n\nimport {\n  Banner,\n  Button,\n  CategorySubPage,\n  ComboBox,\n  DashboardPage,\n  DashboardPageLayoutProps,\n  TabbedPage,\n  OneColumnPage,\n  TwoColumnPage,\n  ThreeColumnPage,\n  FourColumnPage,\n  WideNarrowPage,\n  NarrowWidePage,\n  WideWideNarrowPage,\n  NarrowWideWidePage,\n  NarrowWideNarrowPage,\n  PageTemplateProps,\n  icons,\n  menuHelpers,\n  MenuItemProps,\n  MenuProps,\n  TemplateProps,\n  createUID\n} from '@pega/cosmos-react-core';\n\nimport { FeedDemo } from '../../social/Feed/Feed.stories';\nimport { TasksDemo } from '../../work/Tasks/Tasks.stories';\nimport { MockSummaryList } from '../../work/CaseView/CaseView.mocks';\nimport { AppShellDemo } from '../AppShell/AppShell.stories';\n\nimport { StyledStoryPage } from './PageTemplates.styles';\nimport { getPath } from './PageTemplates.mocks';\n\nexport default {\n  title: 'Core/PageTemplates',\n  parameters: {\n    layout: 'fullscreen'\n  }\n} as Meta;\n\ninterface PageTemplatesStoryProps {\n  template?:\n    | 'demo page'\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  title?: PageTemplateProps['title'];\n  icon?: PageTemplateProps['icon'];\n  scrollContent?: PageTemplateProps['scrollContent'];\n  showIcon?: boolean;\n  showBreadcrumbs?: boolean;\n  pathData?: string;\n  showActions?: boolean;\n  showBanners?: boolean;\n}\n\nexport const PageTemplatesDemo: Story<PageTemplatesStoryProps> = (\n  args: PageTemplatesStoryProps\n) => {\n  const [currentTabId, setCurrentTabId] = useState('1');\n\n  const actions: PageTemplateProps['actions'] = args.showActions && (\n    <>\n      <Button>Page action 1</Button>\n      <Button>Page action 2</Button>\n    </>\n  );\n\n  const banners: PageTemplateProps['banners'] = args.showBanners && (\n    <Banner\n      id='warning-banner'\n      variant='warning'\n      messages={['This is a warning banner. You have been warned!']}\n    />\n  );\n\n  const pageTemplateProps = {\n    scrollContent: args.scrollContent,\n    title: args.title || 'Demo page',\n    icon: args.showIcon ? args.icon : undefined,\n    actions,\n    banners,\n    path: getPath(args.showBreadcrumbs, args.pathData),\n    as: args.template !== 'demo page' ? StyledStoryPage : undefined\n  };\n\n  let page;\n\n  switch (args.template) {\n    case 'demo page':\n      page = (\n        <TwoColumnPage\n          a={<FeedDemo />}\n          b={\n            <>\n              <TasksDemo />\n              <MockSummaryList name='My team' limit={10} actions={null} />\n            </>\n          }\n          {...pageTemplateProps}\n        />\n      );\n      break;\n    case 'one column':\n      page = <OneColumnPage a='a' {...pageTemplateProps} />;\n      break;\n    case 'two column':\n      page = <TwoColumnPage a='a' b='b' {...pageTemplateProps} />;\n      break;\n    case 'three column':\n      page = <ThreeColumnPage a='a' b='b' c='c' {...pageTemplateProps} />;\n      break;\n    case 'four column':\n      page = <FourColumnPage a='a' b='b' c='c' d='d' {...pageTemplateProps} />;\n      break;\n    case 'wide narrow':\n      page = <WideNarrowPage a='a' b='b' {...pageTemplateProps} />;\n      break;\n    case 'narrow wide':\n      page = <NarrowWidePage a='a' b='b' {...pageTemplateProps} />;\n      break;\n    case 'wide wide narrow':\n      page = <WideWideNarrowPage a='a' b='b' c='c' {...pageTemplateProps} />;\n      break;\n    case 'narrow wide wide':\n      page = <NarrowWideWidePage a='a' b='b' c='c' {...pageTemplateProps} />;\n      break;\n    case 'narrow wide narrow':\n      page = <NarrowWideNarrowPage a='a' b='b' c='c' {...pageTemplateProps} />;\n      break;\n    case 'tabbed':\n    default:\n      page = (\n        <TabbedPage\n          a={`Content for: Tab ${currentTabId}`}\n          tabs={{\n            tabs: Array.from({ length: 5 }, (_, i) => {\n              return {\n                id: `${i + 1}`,\n                name: `Tab ${i + 1}`\n              };\n            }),\n            type: 'horizontal',\n            currentTabId,\n            onTabClick: setCurrentTabId\n          }}\n          {...pageTemplateProps}\n        />\n      );\n      break;\n  }\n\n  return <AppShellDemo main={page} appHeader />;\n};\n\nPageTemplatesDemo.args = {\n  template: 'demo page',\n  scrollContent: false,\n  title: 'Demo page',\n  icon: 'home-solid',\n  showIcon: true,\n  showBreadcrumbs: true,\n  pathData: 'Page 1,Page2,Page 3,Page 4,Page 5',\n  showActions: true,\n  showBanners: false\n};\n\nPageTemplatesDemo.argTypes = {\n  template: {\n    options: [\n      'demo page',\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    ],\n    control: { type: 'select' }\n  },\n  scrollContent: { control: { type: 'boolean' } },\n  title: { control: { type: 'text' } },\n  icon: { options: icons, control: { type: 'select', icons: true } },\n  showIcon: { control: { type: 'boolean' } },\n  showBreadcrumbs: { control: { type: 'boolean' } },\n  pathData: { control: { type: 'text' } },\n  showActions: { control: { type: 'boolean' } },\n  showBanners: { control: { type: 'boolean' } }\n};\n\ninterface DashboardPageStoryProps {\n  title?: DashboardPageLayoutProps['title'];\n  filterPosition?: DashboardPageLayoutProps['filterPosition'];\n  numberOfFilters?: number;\n}\n\nexport const DashboardPageDemo: Story<DashboardPageStoryProps> = (\n  args: DashboardPageStoryProps\n) => {\n  const FilterComboBox = () => {\n    const [filterSearchValue, setFilterSearchValue] = useState('');\n    const [filterOptions, setFilterOptions] = useState<MenuProps['items']>(() =>\n      Array.from({ length: 10 }, (_, i) => ({\n        id: createUID(),\n        primary: `Filter ${i + 1}`,\n        selected: false\n      }))\n    );\n\n    const selected = useMemo(() => {\n      return menuHelpers\n        .getSelected(filterOptions)\n        .map(item => ({ text: item.primary, id: item.id }));\n    }, [filterOptions]);\n\n    const toggleItem = (id: MenuItemProps['id']) => {\n      setFilterOptions(cur => menuHelpers.toggleSelected(cur, id, 'multi-select'));\n    };\n\n    return (\n      <ComboBox\n        mode='multi-select'\n        label='Filters'\n        placeholder='Choose filters'\n        value={filterSearchValue}\n        onChange={e => {\n          setFilterSearchValue(e.target.value);\n        }}\n        selected={{ items: selected, onRemove: toggleItem }}\n        menu={{\n          items: filterSearchValue\n            ? menuHelpers\n                .flatten(filterOptions)\n                .filter(({ primary }) => primary.includes(filterSearchValue))\n            : filterOptions,\n          emptyText: 'No filters',\n          onItemClick: toggleItem\n        }}\n      />\n    );\n  };\n\n  const filterControls = Array.from({ length: args.numberOfFilters || 3 }, (_, i) => (\n    <FilterComboBox key={i} />\n  ));\n\n  return (\n    <AppShellDemo\n      main={\n        <DashboardPage\n          a='a'\n          b='b'\n          c='c'\n          path={getPath()}\n          filters={filterControls}\n          filterPosition={args.filterPosition}\n          fitToViewport\n          title={args.title || 'Dashboard'}\n          as={StyledStoryPage}\n        />\n      }\n      appHeader\n    />\n  );\n};\n\nDashboardPageDemo.args = {\n  title: 'Dashboard',\n  filterPosition: 'block-start',\n  numberOfFilters: 3\n};\n\nDashboardPageDemo.argTypes = {\n  title: { control: { type: 'text' } },\n  filterPosition: {\n    options: ['block-start', 'inline-start', 'inline-end'],\n    control: { type: 'select' }\n  },\n  numberOfFilters: { control: { type: 'number' } }\n};\n\ninterface CategorySubPageStoryProps {\n  category?: TemplateProps['category'];\n  categoryIcon?: TemplateProps['categoryIcon'];\n  showIcon?: boolean;\n  viewLoading?: TemplateProps['viewLoading'];\n  maxActions?: TemplateProps['maxActions'];\n}\n\nexport const CategorySubPageDemo: Story<CategorySubPageStoryProps> = (\n  args: CategorySubPageStoryProps\n) => {\n  const [activeItem, setActiveItem] = useState('Profile');\n\n  const mockNavLinks = (itemTextArray: string[]) => {\n    return itemTextArray.map(itemText => {\n      return {\n        text: itemText,\n        active: itemText === activeItem,\n        href: '#',\n        onClick: (event: MouseEvent) => setActiveItem((event.target as Element).textContent || '')\n      };\n    });\n  };\n\n  return (\n    <AppShellDemo\n      main={\n        <CategorySubPage\n          viewLoading={args.viewLoading}\n          category={args.category || 'Administration'}\n          categoryIcon={args.showIcon ? args.categoryIcon : undefined}\n          navItemGroups={[\n            {\n              title: 'General',\n              items: useMemo(\n                () => mockNavLinks(['Configurations', 'Profile', 'Authentication', 'Connections']),\n                [activeItem]\n              )\n            },\n            {\n              title: 'Second Group',\n              items: useMemo(() => mockNavLinks(['Option 1', 'Option 2']), [activeItem])\n            },\n            {\n              items: useMemo(() => mockNavLinks(['All configurations']), [activeItem])\n            },\n            {\n              items: useMemo(\n                () => mockNavLinks(['Visually Grouped SubPage A', 'Visually Grouped SubPage B']),\n                [activeItem]\n              )\n            },\n            {\n              items: [\n                {\n                  text: 'Button Item'\n                }\n              ]\n            }\n          ]}\n          pageTitle={activeItem}\n          maxActions={args.maxActions}\n          pageActions={[\n            {\n              id: 'saveChanges',\n              text: 'Save'\n            },\n            {\n              id: 'cancelChanges',\n              text: 'Cancel'\n            },\n            {\n              id: 'goToRule',\n              text: 'Go to Rule'\n            },\n            {\n              id: 'viewInClipboard',\n              text: 'View in Clipboard'\n            }\n          ]}\n          region={\n            <StyledStoryPage secondary>\n              <div style={{ minHeight: '150vh' }} />\n            </StyledStoryPage>\n          }\n        />\n      }\n      appHeader\n    />\n  );\n};\n\nCategorySubPageDemo.args = {\n  category: 'Administration',\n  categoryIcon: 'gear-solid',\n  showIcon: true,\n  viewLoading: false,\n  maxActions: 3\n};\n\nCategorySubPageDemo.argTypes = {\n  category: { control: { type: 'text' } },\n  categoryIcon: { options: icons, control: { type: 'select', icons: true } },\n  showIcon: { control: { type: 'boolean' } },\n  viewLoading: { control: { type: 'boolean' } },\n  maxActions: { control: { type: 'number' } }\n};\n"]}
+{"version":3,"file":"PageTemplates.stories.jsx","sourceRoot":"","sources":["../../../src/core/PageTemplates/PageTemplates.stories.tsx"],"names":[],"mappings":"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","sourcesContent":["import { Meta, Story } from '@storybook/react';\nimport { useState, useMemo, MouseEvent } from 'react';\n\nimport {\n  Banner,\n  Button,\n  CategorySubPage,\n  ComboBox,\n  DashboardPage,\n  DashboardPageLayoutProps,\n  TabbedPage,\n  OneColumnPage,\n  TwoColumnPage,\n  ThreeColumnPage,\n  FourColumnPage,\n  WideNarrowPage,\n  NarrowWidePage,\n  WideWideNarrowPage,\n  NarrowWideWidePage,\n  NarrowWideNarrowPage,\n  PageTemplateProps,\n  icons,\n  menuHelpers,\n  MenuItemProps,\n  MenuProps,\n  TemplateProps,\n  createUID,\n  Table,\n  ColumnProps,\n  Text,\n  StyledRegion,\n  OmitStrict\n} from '@pega/cosmos-react-core';\n\nimport { FeedDemo } from '../../social/Feed/Feed.stories';\nimport { TasksDemo } from '../../work/Tasks/Tasks.stories';\nimport { MockSummaryList } from '../../work/CaseView/CaseView.mocks';\nimport { commitsData } from '../Table/Table.mocks';\nimport { AppShellDemo } from '../AppShell/AppShell.stories';\n\nimport { StyledDemoTableWrapper, StyledStoryPage } from './PageTemplates.styles';\nimport { getPath } from './PageTemplates.mocks';\n\nexport default {\n  title: 'Core/PageTemplates',\n  parameters: {\n    layout: 'fullscreen'\n  }\n} as Meta;\n\ninterface PageTemplatesStoryProps {\n  template?:\n    | 'demo page'\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  title?: PageTemplateProps['title'];\n  icon?: PageTemplateProps['icon'];\n  scrollContent?: PageTemplateProps['scrollContent'];\n  showIcon?: boolean;\n  showBreadcrumbs?: boolean;\n  pathData?: string;\n  showActions?: boolean;\n  showBanners?: boolean;\n}\n\nexport const ColumnPageDemo: Story<PageTemplatesStoryProps> = (args: PageTemplatesStoryProps) => {\n  const actions: PageTemplateProps['actions'] = args.showActions && (\n    <>\n      <Button>Page action 1</Button>\n      <Button>Page action 2</Button>\n    </>\n  );\n\n  const banners: PageTemplateProps['banners'] = args.showBanners && (\n    <Banner\n      id='warning-banner'\n      variant='warning'\n      messages={['This is a warning banner. You have been warned!']}\n    />\n  );\n\n  const pageTemplateProps = {\n    scrollContent: args.scrollContent,\n    title: args.title || 'Demo page',\n    icon: args.showIcon ? args.icon : undefined,\n    actions,\n    banners,\n    path: getPath(args.showBreadcrumbs, args.pathData),\n    as: args.template !== 'demo page' ? StyledStoryPage : undefined\n  };\n\n  let page;\n\n  switch (args.template) {\n    case 'one column':\n      page = <OneColumnPage a='a' {...pageTemplateProps} />;\n      break;\n    case 'two column':\n      page = <TwoColumnPage a='a' b='b' {...pageTemplateProps} />;\n      break;\n    case 'three column':\n      page = <ThreeColumnPage a='a' b='b' c='c' {...pageTemplateProps} />;\n      break;\n    case 'four column':\n      page = <FourColumnPage a='a' b='b' c='c' d='d' {...pageTemplateProps} />;\n      break;\n    case 'wide narrow':\n      page = <WideNarrowPage a='a' b='b' {...pageTemplateProps} />;\n      break;\n    case 'narrow wide':\n      page = <NarrowWidePage a='a' b='b' {...pageTemplateProps} />;\n      break;\n    case 'wide wide narrow':\n      page = <WideWideNarrowPage a='a' b='b' c='c' {...pageTemplateProps} />;\n      break;\n    case 'narrow wide wide':\n      page = <NarrowWideWidePage a='a' b='b' c='c' {...pageTemplateProps} />;\n      break;\n    case 'narrow wide narrow':\n      page = <NarrowWideNarrowPage a='a' b='b' c='c' {...pageTemplateProps} />;\n      break;\n    case 'demo page':\n    default:\n      page = (\n        <TwoColumnPage\n          a={<FeedDemo />}\n          b={\n            <>\n              <TasksDemo />\n              <MockSummaryList name='My team' limit={10} actions={null} />\n            </>\n          }\n          {...pageTemplateProps}\n        />\n      );\n      break;\n  }\n\n  return <AppShellDemo main={page} appHeader />;\n};\n\nColumnPageDemo.args = {\n  template: 'demo page',\n  scrollContent: false,\n  title: 'Demo page',\n  icon: 'home-solid',\n  showIcon: true,\n  showBreadcrumbs: true,\n  pathData: 'Page 1,Page2,Page 3,Page 4,Page 5',\n  showActions: true,\n  showBanners: false\n};\n\nColumnPageDemo.argTypes = {\n  template: {\n    options: [\n      'demo page',\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    ],\n    control: { type: 'select' }\n  },\n  scrollContent: { control: { type: 'boolean' } },\n  title: { control: { type: 'text' } },\n  icon: { options: icons, control: { type: 'select', icons: true } },\n  showIcon: { control: { type: 'boolean' } },\n  showBreadcrumbs: { control: { type: 'boolean' } },\n  pathData: { control: { type: 'text' } },\n  showActions: { control: { type: 'boolean' } },\n  showBanners: { control: { type: 'boolean' } }\n};\n\ninterface DashboardPageStoryProps {\n  title?: DashboardPageLayoutProps['title'];\n  filterPosition?: DashboardPageLayoutProps['filterPosition'];\n  numberOfFilters?: number;\n}\n\nexport const DashboardPageDemo: Story<DashboardPageStoryProps> = (\n  args: DashboardPageStoryProps\n) => {\n  const FilterComboBox = () => {\n    const [filterSearchValue, setFilterSearchValue] = useState('');\n    const [filterOptions, setFilterOptions] = useState<MenuProps['items']>(() =>\n      Array.from({ length: 10 }, (_, i) => ({\n        id: createUID(),\n        primary: `Filter ${i + 1}`,\n        selected: false\n      }))\n    );\n\n    const selected = useMemo(() => {\n      return menuHelpers\n        .getSelected(filterOptions)\n        .map(item => ({ text: item.primary, id: item.id }));\n    }, [filterOptions]);\n\n    const toggleItem = (id: MenuItemProps['id']) => {\n      setFilterOptions(cur => menuHelpers.toggleSelected(cur, id, 'multi-select'));\n    };\n\n    return (\n      <ComboBox\n        mode='multi-select'\n        label='Filters'\n        placeholder='Choose filters'\n        value={filterSearchValue}\n        onChange={e => {\n          setFilterSearchValue(e.target.value);\n        }}\n        selected={{ items: selected, onRemove: toggleItem }}\n        menu={{\n          items: filterSearchValue\n            ? menuHelpers\n                .flatten(filterOptions)\n                .filter(({ primary }) => primary.includes(filterSearchValue))\n            : filterOptions,\n          emptyText: 'No filters',\n          onItemClick: toggleItem\n        }}\n      />\n    );\n  };\n\n  const filterControls = Array.from({ length: args.numberOfFilters || 3 }, (_, i) => (\n    <FilterComboBox key={i} />\n  ));\n\n  return (\n    <AppShellDemo\n      main={\n        <DashboardPage\n          a='a'\n          b='b'\n          c='c'\n          path={getPath()}\n          filters={filterControls}\n          filterPosition={args.filterPosition}\n          fitToViewport\n          title={args.title || 'Dashboard'}\n          as={StyledStoryPage}\n        />\n      }\n      appHeader\n    />\n  );\n};\n\nDashboardPageDemo.args = {\n  title: 'Dashboard',\n  filterPosition: 'block-start',\n  numberOfFilters: 3\n};\n\nDashboardPageDemo.argTypes = {\n  title: { control: { type: 'text' } },\n  filterPosition: {\n    options: ['block-start', 'inline-start', 'inline-end'],\n    control: { type: 'select' }\n  },\n  numberOfFilters: { control: { type: 'number' } }\n};\n\ninterface CategorySubPageStoryProps {\n  category?: TemplateProps['category'];\n  categoryIcon?: TemplateProps['categoryIcon'];\n  showIcon?: boolean;\n  viewLoading?: TemplateProps['viewLoading'];\n  maxActions?: TemplateProps['maxActions'];\n}\n\nexport const CategorySubPageDemo: Story<CategorySubPageStoryProps> = (\n  args: CategorySubPageStoryProps\n) => {\n  const [activeItem, setActiveItem] = useState('Profile');\n\n  const mockNavLinks = (itemTextArray: string[]) => {\n    return itemTextArray.map(itemText => {\n      return {\n        text: itemText,\n        active: itemText === activeItem,\n        href: '#',\n        onClick: (event: MouseEvent) => setActiveItem((event.target as Element).textContent || '')\n      };\n    });\n  };\n\n  return (\n    <AppShellDemo\n      main={\n        <CategorySubPage\n          viewLoading={args.viewLoading}\n          category={args.category || 'Administration'}\n          categoryIcon={args.showIcon ? args.categoryIcon : undefined}\n          navItemGroups={[\n            {\n              title: 'General',\n              items: useMemo(\n                () => mockNavLinks(['Configurations', 'Profile', 'Authentication', 'Connections']),\n                [activeItem]\n              )\n            },\n            {\n              title: 'Second Group',\n              items: useMemo(() => mockNavLinks(['Option 1', 'Option 2']), [activeItem])\n            },\n            {\n              items: useMemo(() => mockNavLinks(['All configurations']), [activeItem])\n            },\n            {\n              items: useMemo(\n                () => mockNavLinks(['Visually Grouped SubPage A', 'Visually Grouped SubPage B']),\n                [activeItem]\n              )\n            },\n            {\n              items: [\n                {\n                  text: 'Button Item'\n                }\n              ]\n            }\n          ]}\n          pageTitle={activeItem}\n          maxActions={args.maxActions}\n          pageActions={[\n            {\n              id: 'saveChanges',\n              text: 'Save'\n            },\n            {\n              id: 'cancelChanges',\n              text: 'Cancel'\n            },\n            {\n              id: 'goToRule',\n              text: 'Go to Rule'\n            },\n            {\n              id: 'viewInClipboard',\n              text: 'View in Clipboard'\n            }\n          ]}\n          region={\n            <StyledStoryPage secondary>\n              <StyledRegion style={{ minHeight: '150vh' }} />\n            </StyledStoryPage>\n          }\n        />\n      }\n      appHeader\n    />\n  );\n};\n\nCategorySubPageDemo.args = {\n  category: 'Administration',\n  categoryIcon: 'gear-solid',\n  showIcon: true,\n  viewLoading: false,\n  maxActions: 3\n};\n\nCategorySubPageDemo.argTypes = {\n  category: { control: { type: 'text' } },\n  categoryIcon: { options: icons, control: { type: 'select', icons: true } },\n  showIcon: { control: { type: 'boolean' } },\n  viewLoading: { control: { type: 'boolean' } },\n  maxActions: { control: { type: 'number' } }\n};\n\ntype TabbedPageStoryProps = OmitStrict<PageTemplatesStoryProps, 'template'>;\n\nexport const TabbedPageDemo: Story<TabbedPageStoryProps> = (args: TabbedPageStoryProps) => {\n  const actions: PageTemplateProps['actions'] = args.showActions && (\n    <>\n      <Button>Page action 1</Button>\n      <Button>Page action 2</Button>\n    </>\n  );\n\n  const banners: PageTemplateProps['banners'] = args.showBanners && (\n    <Banner\n      id='warning-banner'\n      variant='warning'\n      messages={['This is a warning banner. You have been warned!']}\n    />\n  );\n\n  const pageTemplateProps = {\n    scrollContent: args.scrollContent,\n    title: args.title || 'Tabbed page',\n    icon: args.showIcon ? args.icon : undefined,\n    actions,\n    banners,\n    path: getPath(args.showBreadcrumbs, args.pathData)\n  };\n\n  const tableData = commitsData;\n\n  const columns: ColumnProps<typeof tableData[number]>[] = [\n    { renderer: data => <Text>{data.id}</Text>, label: 'ID' },\n    { renderer: data => <Text>{data.author}</Text>, label: 'Author' },\n    { renderer: data => <Text>{data.date}</Text>, label: 'Date' },\n    { renderer: data => <Text>{data.message}</Text>, label: 'Message' }\n  ];\n\n  return (\n    <AppShellDemo\n      main={\n        <TabbedPage\n          {...pageTemplateProps}\n          tabs={{\n            tabs: [\n              {\n                id: 'table',\n                name: 'Audit',\n                content: (\n                  <StyledDemoTableWrapper>\n                    <Table\n                      title='Commit History'\n                      hoverHighlight={false}\n                      data={tableData}\n                      columns={columns}\n                    />\n                  </StyledDemoTableWrapper>\n                )\n              },\n              {\n                id: 'team',\n                name: 'My Team',\n                content: (\n                  <>\n                    <TasksDemo />\n                    <MockSummaryList name='My team' limit={10} actions={null} />\n                  </>\n                )\n              },\n              {\n                id: 'chat',\n                name: 'Chat',\n                content: <FeedDemo />\n              }\n            ],\n            type: 'horizontal',\n            defaultTabId: 'chat'\n          }}\n        />\n      }\n      appHeader\n    />\n  );\n};\n\nTabbedPageDemo.args = {\n  scrollContent: false,\n  title: 'Tabbed page',\n  icon: 'home-solid',\n  showIcon: true,\n  showBreadcrumbs: true,\n  pathData: 'Page 1,Page2,Page 3,Page 4,Page 5',\n  showActions: true,\n  showBanners: false\n};\n\nTabbedPageDemo.argTypes = {\n  scrollContent: { control: { type: 'boolean' } },\n  title: { control: { type: 'text' } },\n  icon: { options: icons, control: { type: 'select', icons: true } },\n  showIcon: { control: { type: 'boolean' } },\n  showBreadcrumbs: { control: { type: 'boolean' } },\n  pathData: { control: { type: 'text' } },\n  showActions: { control: { type: 'boolean' } },\n  showBanners: { control: { type: 'boolean' } }\n};\n"]}

package/jsx/core/PageTemplates/PageTemplates.styles.d.ts

@@ -1,4 +1,5 @@
 export declare const StyledStoryPage: import("styled-components").StyledComponent<"div", import("styled-components").DefaultTheme, {
     secondary?: boolean | undefined;
 }, never>;
+export declare const StyledDemoTableWrapper: import("styled-components").StyledComponent<"div", import("styled-components").DefaultTheme, {}, never>;
 //# sourceMappingURL=PageTemplates.styles.d.ts.map

package/jsx/core/PageTemplates/PageTemplates.styles.d.ts.map

@@ -1 +1 @@
-{"version":3,"file":"PageTemplates.styles.d.ts","sourceRoot":"","sources":["../../../src/core/PageTemplates/PageTemplates.styles.ts"],"names":[],"mappings":"AAWA,eAAO,MAAM,eAAe;;SA+B1B,CAAC"}
+{"version":3,"file":"PageTemplates.styles.d.ts","sourceRoot":"","sources":["../../../src/core/PageTemplates/PageTemplates.styles.ts"],"names":[],"mappings":"AAYA,eAAO,MAAM,eAAe;;SA+B1B,CAAC;AAOH,eAAO,MAAM,sBAAsB,yGAKlC,CAAC"}