@pega/cosmos-react-demos 3.0.0-dev.9.0 → 3.0.0-rc.2

package/lib/core/Dialog/Dialog.stories.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"Dialog.stories.js","sourceRoot":"","sources":["../../../src/core/Dialog/Dialog.stories.tsx"],"names":[],"mappings":"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","sourcesContent":["import { Meta, Story } from '@storybook/react';\nimport { ChangeEvent, useRef } from 'react';\nimport { useState } from '@storybook/addons';\n\nimport {\n  Button,\n  Card,\n  CardContent,\n  CardHeader,\n  Dialog,\n  Flex,\n  Input,\n  Option,\n  Select,\n  StatusProps,\n  Status,\n  SummaryItem,\n  Text,\n  useDialog,\n  DialogProps\n} from '@pega/cosmos-react-core';\n\nexport default {\n  title: 'Core/Dialog',\n  component: Dialog\n} as Meta;\n\nexport const DialogDemo: Story = () => {\n  const { target, events } = useDialog();\n  return (\n    <>\n      <Button variant='secondary' {...events}>\n        Open dialog\n      </Button>\n      <Dialog heading='My dialog' target={target}>\n        Hello Dialog\n      </Dialog>\n    </>\n  );\n};\n\nexport const FormDialogDemo: Story = () => {\n  const editBadgeButton = useRef(null);\n  const editNameButton = useRef(null);\n  const timeoutRef = useRef<number>();\n  const [info, setInfo] = useState<{\n    name: string;\n    badgeType: StatusProps['variant'];\n    badgeText: string;\n  }>({ name: 'James Gregory', badgeType: 'info', badgeText: 'info' });\n  const [name, setName] = useState(() => info.name);\n  const [badgeType, setBadgeType] = useState<StatusProps['variant']>(() => info.badgeType);\n  const [badgeText, setBadgeText] = useState(() => info.badgeText);\n  const [dialogType, setDialogType] = useState<'badge' | 'name'>('badge');\n  const { target, events, loading, setLoading } = useDialog();\n\n  const badgeTypes: StatusProps['variant'][] = ['info', 'pending', 'success', 'urgent', 'warn'];\n\n  const onOpen = (type: 'badge' | 'name') => {\n    setDialogType(type);\n  };\n\n  const onDialogSubmit: DialogProps['onSubmit'] = ({ close }) => {\n    setLoading(true);\n    timeoutRef.current = setTimeout(() => {\n      setInfo({ name, badgeText, badgeType });\n      setLoading(false);\n      close();\n      timeoutRef.current = undefined;\n    }, 1000) as unknown as number;\n  };\n\n  const onDialogClose: DialogProps['onClose'] = () => {\n    if (timeoutRef.current) {\n      clearTimeout(timeoutRef.current);\n      setLoading(false);\n    }\n    setName(info.name);\n    setBadgeText(info.badgeText);\n    setBadgeType(info.badgeType);\n  };\n\n  return (\n    <Card>\n      <CardHeader>\n        <Text variant='h1'>Edit these fields</Text>\n      </CardHeader>\n      <CardContent>\n        <Flex container={{ direction: 'column', gap: 1 }}>\n          <SummaryItem\n            primary={<Text variant='h6'>Badge</Text>}\n            secondary={<Status variant={info.badgeType}>{info.badgeText}</Status>}\n            actions={\n              <Button\n                variant='simple'\n                ref={editBadgeButton}\n                onClick={() => onOpen('badge')}\n                {...events}\n              >\n                Edit\n              </Button>\n            }\n          />\n          <SummaryItem\n            primary={<Text variant='h6'>Name</Text>}\n            secondary={<Text variant='primary'>{info.name}</Text>}\n            actions={\n              <Button\n                variant='simple'\n                ref={editNameButton}\n                onClick={() => onOpen('name')}\n                {...events}\n              >\n                Edit\n              </Button>\n            }\n          />\n        </Flex>\n        <Dialog\n          target={target}\n          heading={`Edit ${dialogType}`}\n          placement='bottom-end'\n          onSubmit={onDialogSubmit}\n          onClose={onDialogClose}\n          loading={loading}\n        >\n          <Flex container={{ gap: 1, direction: 'column' }}>\n            {dialogType === 'badge' ? (\n              <>\n                <Select\n                  label='Select a badge type'\n                  value={badgeType}\n                  onChange={e => setBadgeType(e.target.value as StatusProps['variant'])}\n                >\n                  {badgeTypes.map(type => (\n                    <Option key={type}>{type}</Option>\n                  ))}\n                </Select>\n                <Input\n                  type='text'\n                  label='Badge text'\n                  value={badgeText}\n                  onChange={(e: ChangeEvent<HTMLInputElement>) => setBadgeText(e.target.value)}\n                />\n              </>\n            ) : (\n              <>\n                <Input\n                  type='text'\n                  label='Text value'\n                  value={name}\n                  onChange={(e: ChangeEvent<HTMLInputElement>) => setName(e.target.value)}\n                />\n              </>\n            )}\n          </Flex>\n        </Dialog>\n      </CardContent>\n    </Card>\n  );\n};\n"]}

package/lib/core/FieldGroup/FieldGroup.stories.d.ts

@@ -5,9 +5,11 @@ interface FieldGroupStoryProps {
     firstGroupName?: string;
     firstGroupCollapsible?: boolean;
     firstGroupDescription?: string;
+    showFirstAdditionalInfo?: boolean;
     secondGroupName?: string;
     secondGroupCollapsible?: boolean;
     secondGroupDescription?: string;
+    showSecondAdditionalInfo?: boolean;
 }
 export declare const FieldGroupDemo: Story<FieldGroupStoryProps>;
 //# sourceMappingURL=FieldGroup.stories.d.ts.map

package/lib/core/FieldGroup/FieldGroup.stories.d.ts.map

@@ -1 +1 @@
-{"version":3,"file":"FieldGroup.stories.d.ts","sourceRoot":"","sources":["../../../src/core/FieldGroup/FieldGroup.stories.tsx"],"names":[],"mappings":"AAAA,OAAO,EAAE,IAAI,EAAE,KAAK,EAAE,MAAM,kBAAkB,CAAC;;AAY/C,wBAGU;AAEV,UAAU,oBAAoB;IAC5B,cAAc,CAAC,EAAE,MAAM,CAAC;IACxB,qBAAqB,CAAC,EAAE,OAAO,CAAC;IAChC,qBAAqB,CAAC,EAAE,MAAM,CAAC;IAC/B,eAAe,CAAC,EAAE,MAAM,CAAC;IACzB,sBAAsB,CAAC,EAAE,OAAO,CAAC;IACjC,sBAAsB,CAAC,EAAE,MAAM,CAAC;CACjC;AAED,eAAO,MAAM,cAAc,EAAE,KAAK,CAAC,oBAAoB,CA2CtD,CAAC"}
+{"version":3,"file":"FieldGroup.stories.d.ts","sourceRoot":"","sources":["../../../src/core/FieldGroup/FieldGroup.stories.tsx"],"names":[],"mappings":"AAAA,OAAO,EAAE,IAAI,EAAE,KAAK,EAAE,MAAM,kBAAkB,CAAC;;AAY/C,wBAGU;AAEV,UAAU,oBAAoB;IAC5B,cAAc,CAAC,EAAE,MAAM,CAAC;IACxB,qBAAqB,CAAC,EAAE,OAAO,CAAC;IAChC,qBAAqB,CAAC,EAAE,MAAM,CAAC;IAC/B,uBAAuB,CAAC,EAAE,OAAO,CAAC;IAClC,eAAe,CAAC,EAAE,MAAM,CAAC;IACzB,sBAAsB,CAAC,EAAE,OAAO,CAAC;IACjC,sBAAsB,CAAC,EAAE,MAAM,CAAC;IAChC,wBAAwB,CAAC,EAAE,OAAO,CAAC;CACpC;AAED,eAAO,MAAM,cAAc,EAAE,KAAK,CAAC,oBAAoB,CAqDtD,CAAC"}

package/lib/core/FieldGroup/FieldGroup.stories.js

@@ -5,22 +5,30 @@ export default {
     component: FieldGroup
 };
 export const FieldGroupDemo = (args) => {
-    return (_jsxs(Grid, { container: { rowGap: 1 }, children: [_jsx(FieldGroup, { name: args.firstGroupName, description: args.firstGroupDescription, collapsible: args.firstGroupCollapsible, children: _jsxs(Grid, { container: { gap: 1, cols: 'repeat(auto-fit, minmax(min(40ch, 100%), 1fr))' }, children: [_jsx(Input, { type: 'text', label: 'Text 1' }), _jsxs(Select, { label: 'Select 1', children: [_jsx(Option, { value: 'A', children: "Option 1A" }), _jsx(Option, { value: 'B', children: "Option 1B" })] }), _jsx(DateInput, { label: 'Date 1' }), _jsx(Grid, { item: { colStart: '1', colEnd: '-1' }, children: _jsx(TextArea, { label: 'TextArea 1' }) }), _jsx(Input, { required: true, type: 'text', label: 'Required 1' }), _jsx(Input, { disabled: true, type: 'text', label: 'Disabled 1' })] }) }), _jsx(FieldGroup, { name: args.secondGroupName, description: args.secondGroupDescription, collapsible: args.secondGroupCollapsible, children: _jsxs(Grid, { container: { gap: 1, cols: 'repeat(auto-fill, minmax(min(40ch, 100%), 1fr))' }, children: [_jsx(Input, { type: 'text', label: 'Text 2' }), _jsxs(Select, { label: 'Select 2', children: [_jsx(Option, { value: 'A', children: "Option 2A" }), _jsx(Option, { value: 'B', children: "Option 2B" })] }), _jsx(DateInput, { label: 'Date 2' }), _jsx(Grid, { item: { colStart: '1', colEnd: '-1' }, children: _jsx(TextArea, { label: 'TextArea 2' }) }), _jsx(Input, { required: true, type: 'text', label: 'Required 2' }), _jsx(Input, { disabled: true, type: 'text', label: 'Disabled 2' })] }) })] }));
+    return (_jsxs(Grid, { container: { rowGap: 1 }, children: [_jsx(FieldGroup, { name: args.firstGroupName, description: args.firstGroupDescription, collapsible: args.firstGroupCollapsible, additionalInfo: args.showFirstAdditionalInfo
+                    ? { heading: 'Additional Info', content: 'This is a field group' }
+                    : undefined, children: _jsxs(Grid, { container: { gap: 1, cols: 'repeat(auto-fit, minmax(min(40ch, 100%), 1fr))' }, children: [_jsx(Input, { type: 'text', label: 'Text 1' }), _jsxs(Select, { label: 'Select 1', children: [_jsx(Option, { value: 'A', children: "Option 1A" }), _jsx(Option, { value: 'B', children: "Option 1B" })] }), _jsx(DateInput, { label: 'Date 1' }), _jsx(Grid, { item: { colStart: '1', colEnd: '-1' }, children: _jsx(TextArea, { label: 'TextArea 1' }) }), _jsx(Input, { required: true, type: 'text', label: 'Required 1' }), _jsx(Input, { disabled: true, type: 'text', label: 'Disabled 1' })] }) }), _jsx(FieldGroup, { name: args.secondGroupName, description: args.secondGroupDescription, collapsible: args.secondGroupCollapsible, additionalInfo: args.showSecondAdditionalInfo
+                    ? { heading: 'Additional Info', content: 'This is another field group' }
+                    : undefined, children: _jsxs(Grid, { container: { gap: 1, cols: 'repeat(auto-fill, minmax(min(40ch, 100%), 1fr))' }, children: [_jsx(Input, { type: 'text', label: 'Text 2' }), _jsxs(Select, { label: 'Select 2', children: [_jsx(Option, { value: 'A', children: "Option 2A" }), _jsx(Option, { value: 'B', children: "Option 2B" })] }), _jsx(DateInput, { label: 'Date 2' }), _jsx(Grid, { item: { colStart: '1', colEnd: '-1' }, children: _jsx(TextArea, { label: 'TextArea 2' }) }), _jsx(Input, { required: true, type: 'text', label: 'Required 2' }), _jsx(Input, { disabled: true, type: 'text', label: 'Disabled 2' })] }) })] }));
 };
 FieldGroupDemo.args = {
     firstGroupName: 'Field group 1',
     firstGroupCollapsible: true,
     firstGroupDescription: '',
+    showFirstAdditionalInfo: true,
     secondGroupName: 'Field group 2',
     secondGroupCollapsible: true,
-    secondGroupDescription: ''
+    secondGroupDescription: '',
+    showSecondAdditionalInfo: true
 };
 FieldGroupDemo.argTypes = {
     firstGroupName: { control: { type: 'text' } },
     firstGroupCollapsible: { control: { type: 'boolean' } },
     firstGroupDescription: { control: { type: 'text' } },
+    showFirstAdditionalInfo: { control: { type: 'boolean' } },
     secondGroupName: { control: { type: 'text' } },
     secondGroupCollapsible: { control: { type: 'boolean' } },
-    secondGroupDescription: { control: { type: 'text' } }
+    secondGroupDescription: { control: { type: 'text' } },
+    showSecondAdditionalInfo: { control: { type: 'boolean' } }
 };
 //# sourceMappingURL=FieldGroup.stories.js.map

package/lib/core/FieldGroup/FieldGroup.stories.js.map

@@ -1 +1 @@
-{"version":3,"file":"FieldGroup.stories.js","sourceRoot":"","sources":["../../../src/core/FieldGroup/FieldGroup.stories.tsx"],"names":[],"mappings":"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","sourcesContent":["import { Meta, Story } from '@storybook/react';\n\nimport {\n  DateInput,\n  FieldGroup,\n  Grid,\n  Input,\n  Select,\n  Option,\n  TextArea\n} from '@pega/cosmos-react-core';\n\nexport default {\n  title: 'Core/FieldGroup',\n  component: FieldGroup\n} as Meta;\n\ninterface FieldGroupStoryProps {\n  firstGroupName?: string;\n  firstGroupCollapsible?: boolean;\n  firstGroupDescription?: string;\n  secondGroupName?: string;\n  secondGroupCollapsible?: boolean;\n  secondGroupDescription?: string;\n}\n\nexport const FieldGroupDemo: Story<FieldGroupStoryProps> = (args: FieldGroupStoryProps) => {\n  return (\n    <Grid container={{ rowGap: 1 }}>\n      <FieldGroup\n        name={args.firstGroupName}\n        description={args.firstGroupDescription}\n        collapsible={args.firstGroupCollapsible}\n      >\n        <Grid container={{ gap: 1, cols: 'repeat(auto-fit, minmax(min(40ch, 100%), 1fr))' }}>\n          <Input type='text' label='Text 1' />\n          <Select label='Select 1'>\n            <Option value='A'>Option 1A</Option>\n            <Option value='B'>Option 1B</Option>\n          </Select>\n          <DateInput label='Date 1' />\n          <Grid item={{ colStart: '1', colEnd: '-1' }}>\n            <TextArea label='TextArea 1' />\n          </Grid>\n          <Input required type='text' label='Required 1' />\n          <Input disabled type='text' label='Disabled 1' />\n        </Grid>\n      </FieldGroup>\n      <FieldGroup\n        name={args.secondGroupName}\n        description={args.secondGroupDescription}\n        collapsible={args.secondGroupCollapsible}\n      >\n        <Grid container={{ gap: 1, cols: 'repeat(auto-fill, minmax(min(40ch, 100%), 1fr))' }}>\n          <Input type='text' label='Text 2' />\n          <Select label='Select 2'>\n            <Option value='A'>Option 2A</Option>\n            <Option value='B'>Option 2B</Option>\n          </Select>\n          <DateInput label='Date 2' />\n          <Grid item={{ colStart: '1', colEnd: '-1' }}>\n            <TextArea label='TextArea 2' />\n          </Grid>\n          <Input required type='text' label='Required 2' />\n          <Input disabled type='text' label='Disabled 2' />\n        </Grid>\n      </FieldGroup>\n    </Grid>\n  );\n};\n\nFieldGroupDemo.args = {\n  firstGroupName: 'Field group 1',\n  firstGroupCollapsible: true,\n  firstGroupDescription: '',\n  secondGroupName: 'Field group 2',\n  secondGroupCollapsible: true,\n  secondGroupDescription: ''\n};\n\nFieldGroupDemo.argTypes = {\n  firstGroupName: { control: { type: 'text' } },\n  firstGroupCollapsible: { control: { type: 'boolean' } },\n  firstGroupDescription: { control: { type: 'text' } },\n  secondGroupName: { control: { type: 'text' } },\n  secondGroupCollapsible: { control: { type: 'boolean' } },\n  secondGroupDescription: { control: { type: 'text' } }\n};\n"]}
+{"version":3,"file":"FieldGroup.stories.js","sourceRoot":"","sources":["../../../src/core/FieldGroup/FieldGroup.stories.tsx"],"names":[],"mappings":"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","sourcesContent":["import { Meta, Story } from '@storybook/react';\n\nimport {\n  DateInput,\n  FieldGroup,\n  Grid,\n  Input,\n  Select,\n  Option,\n  TextArea\n} from '@pega/cosmos-react-core';\n\nexport default {\n  title: 'Core/FieldGroup',\n  component: FieldGroup\n} as Meta;\n\ninterface FieldGroupStoryProps {\n  firstGroupName?: string;\n  firstGroupCollapsible?: boolean;\n  firstGroupDescription?: string;\n  showFirstAdditionalInfo?: boolean;\n  secondGroupName?: string;\n  secondGroupCollapsible?: boolean;\n  secondGroupDescription?: string;\n  showSecondAdditionalInfo?: boolean;\n}\n\nexport const FieldGroupDemo: Story<FieldGroupStoryProps> = (args: FieldGroupStoryProps) => {\n  return (\n    <Grid container={{ rowGap: 1 }}>\n      <FieldGroup\n        name={args.firstGroupName}\n        description={args.firstGroupDescription}\n        collapsible={args.firstGroupCollapsible}\n        additionalInfo={\n          args.showFirstAdditionalInfo\n            ? { heading: 'Additional Info', content: 'This is a field group' }\n            : undefined\n        }\n      >\n        <Grid container={{ gap: 1, cols: 'repeat(auto-fit, minmax(min(40ch, 100%), 1fr))' }}>\n          <Input type='text' label='Text 1' />\n          <Select label='Select 1'>\n            <Option value='A'>Option 1A</Option>\n            <Option value='B'>Option 1B</Option>\n          </Select>\n          <DateInput label='Date 1' />\n          <Grid item={{ colStart: '1', colEnd: '-1' }}>\n            <TextArea label='TextArea 1' />\n          </Grid>\n          <Input required type='text' label='Required 1' />\n          <Input disabled type='text' label='Disabled 1' />\n        </Grid>\n      </FieldGroup>\n      <FieldGroup\n        name={args.secondGroupName}\n        description={args.secondGroupDescription}\n        collapsible={args.secondGroupCollapsible}\n        additionalInfo={\n          args.showSecondAdditionalInfo\n            ? { heading: 'Additional Info', content: 'This is another field group' }\n            : undefined\n        }\n      >\n        <Grid container={{ gap: 1, cols: 'repeat(auto-fill, minmax(min(40ch, 100%), 1fr))' }}>\n          <Input type='text' label='Text 2' />\n          <Select label='Select 2'>\n            <Option value='A'>Option 2A</Option>\n            <Option value='B'>Option 2B</Option>\n          </Select>\n          <DateInput label='Date 2' />\n          <Grid item={{ colStart: '1', colEnd: '-1' }}>\n            <TextArea label='TextArea 2' />\n          </Grid>\n          <Input required type='text' label='Required 2' />\n          <Input disabled type='text' label='Disabled 2' />\n        </Grid>\n      </FieldGroup>\n    </Grid>\n  );\n};\n\nFieldGroupDemo.args = {\n  firstGroupName: 'Field group 1',\n  firstGroupCollapsible: true,\n  firstGroupDescription: '',\n  showFirstAdditionalInfo: true,\n  secondGroupName: 'Field group 2',\n  secondGroupCollapsible: true,\n  secondGroupDescription: '',\n  showSecondAdditionalInfo: true\n};\n\nFieldGroupDemo.argTypes = {\n  firstGroupName: { control: { type: 'text' } },\n  firstGroupCollapsible: { control: { type: 'boolean' } },\n  firstGroupDescription: { control: { type: 'text' } },\n  showFirstAdditionalInfo: { control: { type: 'boolean' } },\n  secondGroupName: { control: { type: 'text' } },\n  secondGroupCollapsible: { control: { type: 'boolean' } },\n  secondGroupDescription: { control: { type: 'text' } },\n  showSecondAdditionalInfo: { control: { type: 'boolean' } }\n};\n"]}

package/lib/core/FieldGroup/FieldGroupList.stories.d.ts.map

@@ -1 +1 @@
-{"version":3,"file":"FieldGroupList.stories.d.ts","sourceRoot":"","sources":["../../../src/core/FieldGroup/FieldGroupList.stories.tsx"],"names":[],"mappings":"AAEA,OAAO,EAAE,IAAI,EAAE,KAAK,EAAE,MAAM,kBAAkB,CAAC;;AAc/C,wBAOU;AAEV,UAAU,uBAAuB;IAC/B,QAAQ,CAAC,EAAE,OAAO,CAAC;IACnB,WAAW,CAAC,EAAE,OAAO,CAAC;CACvB;AAED,eAAO,MAAM,YAAY,EAAE,KAAK,CAAC,uBAAuB,CA8DvD,CAAC;AAEF,eAAO,MAAM,aAAa,EAAE,KAAK,CAAC,uBAAuB,CA+DxD,CAAC;AAEF,eAAO,MAAM,kBAAkB,EAAE,KAAK,CAAC,uBAAuB,CAuC7D,CAAC"}
+{"version":3,"file":"FieldGroupList.stories.d.ts","sourceRoot":"","sources":["../../../src/core/FieldGroup/FieldGroupList.stories.tsx"],"names":[],"mappings":"AAEA,OAAO,EAAE,IAAI,EAAE,KAAK,EAAE,MAAM,kBAAkB,CAAC;;AAc/C,wBAWU;AAEV,UAAU,uBAAuB;IAC/B,QAAQ,CAAC,EAAE,OAAO,CAAC;IACnB,WAAW,CAAC,EAAE,OAAO,CAAC;CACvB;AAED,eAAO,MAAM,YAAY,EAAE,KAAK,CAAC,uBAAuB,CA8DvD,CAAC;AAEF,eAAO,MAAM,aAAa,EAAE,KAAK,CAAC,uBAAuB,CA+DxD,CAAC;AAEF,eAAO,MAAM,kBAAkB,EAAE,KAAK,CAAC,uBAAuB,CAuC7D,CAAC"}

package/lib/core/FieldGroup/FieldGroupList.stories.js

@@ -9,6 +9,10 @@ export default {
     args: {
         allowAdd: true,
         allowDelete: true
+    },
+    argTypes: {
+        allowAdd: { control: { type: 'boolean' } },
+        allowDelete: { control: { type: 'boolean' } }
     }
 };
 export const ExpensesDemo = (args) => {

package/lib/core/FieldGroup/FieldGroupList.stories.js.map

@@ -1 +1 @@
-{"version":3,"file":"FieldGroupList.stories.js","sourceRoot":"","sources":["../../../src/core/FieldGroup/FieldGroupList.stories.tsx"],"names":[],"mappings":"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","sourcesContent":["import { useReducer, MouseEvent, FormEvent } from 'react';\nimport { action } from '@storybook/addon-actions';\nimport { Meta, Story } from '@storybook/react';\n\nimport { Button, createUID, FieldGroupList, Form, Text, Flex } from '@pega/cosmos-react-core';\n\nimport {\n  DemoFieldRenderer,\n  demoGroupMeta,\n  ExpensesFieldRenderer,\n  expensesGroupMeta,\n  fieldGroupReducer,\n  InsuranceFieldRenderer,\n  insuranceGroupMeta\n} from './FieldGroupList.mocks';\n\nexport default {\n  title: 'Core/FieldGroupList',\n  component: FieldGroupList,\n  args: {\n    allowAdd: true,\n    allowDelete: true\n  }\n} as Meta;\n\ninterface FieldGroupListDemoProps {\n  allowAdd?: boolean;\n  allowDelete?: boolean;\n}\n\nexport const ExpensesDemo: Story<FieldGroupListDemoProps> = (args: FieldGroupListDemoProps) => {\n  const [state, dispatch] = useReducer(\n    fieldGroupReducer(expensesGroupMeta, ExpensesFieldRenderer),\n    undefined,\n    () => [\n      {\n        name: `${expensesGroupMeta.label} 1`,\n        id: createUID(),\n        children: expensesGroupMeta.fields.map(ExpensesFieldRenderer)\n      }\n    ]\n  );\n\n  return (\n    <Form\n      actions={\n        <>\n          <Button\n            name='Cancel'\n            variant='secondary'\n            onClick={(e: MouseEvent<HTMLButtonElement>) => {\n              action('Click')(`${e.currentTarget.name}:${e.type}`);\n            }}\n          >\n            Cancel\n          </Button>\n          <Button name='Submit' type='submit' variant='primary'>\n            Submit\n          </Button>\n        </>\n      }\n      onSubmit={(e: FormEvent) => {\n        e.preventDefault();\n        action('Submit')(`Form:${e.type}`);\n      }}\n      style={{ margin: 'auto', maxWidth: '37.5rem' }}\n    >\n      <Text variant='h2'>Expense report</Text>\n      <FieldGroupList\n        items={state.map(fields => {\n          return {\n            ...fields,\n            children: <Flex container={{ direction: 'column', gap: 2 }}>{fields.children}</Flex>\n          };\n        })}\n        onAdd={\n          args.allowAdd\n            ? () => {\n                dispatch({ action: 'add' });\n              }\n            : undefined\n        }\n        onDelete={\n          args.allowDelete\n            ? id => {\n                dispatch({ action: 'delete', id });\n              }\n            : undefined\n        }\n      />\n    </Form>\n  );\n};\n\nexport const InsuranceDemo: Story<FieldGroupListDemoProps> = (args: FieldGroupListDemoProps) => {\n  const [state, dispatch] = useReducer(\n    fieldGroupReducer(insuranceGroupMeta, InsuranceFieldRenderer),\n    undefined,\n    () => [\n      {\n        name: `${insuranceGroupMeta.label} 1`,\n        id: createUID(),\n        children: insuranceGroupMeta.fields.map(InsuranceFieldRenderer)\n      }\n    ]\n  );\n\n  return (\n    <Form\n      actions={\n        <>\n          <Button\n            name='Cancel'\n            variant='secondary'\n            onClick={(e: MouseEvent<HTMLButtonElement>) => {\n              action('Click')(`${e.currentTarget.name}:${e.type}`);\n            }}\n          >\n            Cancel\n          </Button>\n          <Button name='Submit' type='submit' variant='primary'>\n            Submit\n          </Button>\n        </>\n      }\n      onSubmit={(e: FormEvent) => {\n        e.preventDefault();\n        action('Submit')(`Form:${e.type}`);\n      }}\n      style={{ margin: 'auto', maxWidth: '37.5rem' }}\n    >\n      <Text variant='h1'>Insurance step 1</Text>\n      <Text variant='h2'>Dependants</Text>\n      <FieldGroupList\n        items={state.map(fields => {\n          return {\n            ...fields,\n            children: <Flex container={{ direction: 'column', gap: 2 }}>{fields.children}</Flex>\n          };\n        })}\n        onAdd={\n          args.allowAdd\n            ? () => {\n                dispatch({ action: 'add' });\n              }\n            : undefined\n        }\n        onDelete={\n          args.allowDelete\n            ? id => {\n                dispatch({ action: 'delete', id });\n              }\n            : undefined\n        }\n      />\n    </Form>\n  );\n};\n\nexport const FieldGroupListDemo: Story<FieldGroupListDemoProps> = (\n  args: FieldGroupListDemoProps\n) => {\n  const [state, dispatch] = useReducer(\n    fieldGroupReducer(demoGroupMeta, DemoFieldRenderer),\n    undefined,\n    () => [\n      {\n        name: `${demoGroupMeta.label} 1`,\n        id: createUID(),\n        children: demoGroupMeta.fields.map(DemoFieldRenderer)\n      }\n    ]\n  );\n\n  return (\n    <FieldGroupList\n      items={state.map(fields => {\n        return {\n          ...fields,\n          children: <Flex container={{ direction: 'column', gap: 2 }}>{fields.children}</Flex>\n        };\n      })}\n      onAdd={\n        args.allowAdd\n          ? () => {\n              dispatch({ action: 'add' });\n            }\n          : undefined\n      }\n      onDelete={\n        args.allowDelete\n          ? id => {\n              dispatch({ action: 'delete', id });\n            }\n          : undefined\n      }\n    />\n  );\n};\n"]}
+{"version":3,"file":"FieldGroupList.stories.js","sourceRoot":"","sources":["../../../src/core/FieldGroup/FieldGroupList.stories.tsx"],"names":[],"mappings":"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","sourcesContent":["import { useReducer, MouseEvent, FormEvent } from 'react';\nimport { action } from '@storybook/addon-actions';\nimport { Meta, Story } from '@storybook/react';\n\nimport { Button, createUID, FieldGroupList, Form, Text, Flex } from '@pega/cosmos-react-core';\n\nimport {\n  DemoFieldRenderer,\n  demoGroupMeta,\n  ExpensesFieldRenderer,\n  expensesGroupMeta,\n  fieldGroupReducer,\n  InsuranceFieldRenderer,\n  insuranceGroupMeta\n} from './FieldGroupList.mocks';\n\nexport default {\n  title: 'Core/FieldGroupList',\n  component: FieldGroupList,\n  args: {\n    allowAdd: true,\n    allowDelete: true\n  },\n  argTypes: {\n    allowAdd: { control: { type: 'boolean' } },\n    allowDelete: { control: { type: 'boolean' } }\n  }\n} as Meta;\n\ninterface FieldGroupListDemoProps {\n  allowAdd?: boolean;\n  allowDelete?: boolean;\n}\n\nexport const ExpensesDemo: Story<FieldGroupListDemoProps> = (args: FieldGroupListDemoProps) => {\n  const [state, dispatch] = useReducer(\n    fieldGroupReducer(expensesGroupMeta, ExpensesFieldRenderer),\n    undefined,\n    () => [\n      {\n        name: `${expensesGroupMeta.label} 1`,\n        id: createUID(),\n        children: expensesGroupMeta.fields.map(ExpensesFieldRenderer)\n      }\n    ]\n  );\n\n  return (\n    <Form\n      actions={\n        <>\n          <Button\n            name='Cancel'\n            variant='secondary'\n            onClick={(e: MouseEvent<HTMLButtonElement>) => {\n              action('Click')(`${e.currentTarget.name}:${e.type}`);\n            }}\n          >\n            Cancel\n          </Button>\n          <Button name='Submit' type='submit' variant='primary'>\n            Submit\n          </Button>\n        </>\n      }\n      onSubmit={(e: FormEvent) => {\n        e.preventDefault();\n        action('Submit')(`Form:${e.type}`);\n      }}\n      style={{ margin: 'auto', maxWidth: '37.5rem' }}\n    >\n      <Text variant='h2'>Expense report</Text>\n      <FieldGroupList\n        items={state.map(fields => {\n          return {\n            ...fields,\n            children: <Flex container={{ direction: 'column', gap: 2 }}>{fields.children}</Flex>\n          };\n        })}\n        onAdd={\n          args.allowAdd\n            ? () => {\n                dispatch({ action: 'add' });\n              }\n            : undefined\n        }\n        onDelete={\n          args.allowDelete\n            ? id => {\n                dispatch({ action: 'delete', id });\n              }\n            : undefined\n        }\n      />\n    </Form>\n  );\n};\n\nexport const InsuranceDemo: Story<FieldGroupListDemoProps> = (args: FieldGroupListDemoProps) => {\n  const [state, dispatch] = useReducer(\n    fieldGroupReducer(insuranceGroupMeta, InsuranceFieldRenderer),\n    undefined,\n    () => [\n      {\n        name: `${insuranceGroupMeta.label} 1`,\n        id: createUID(),\n        children: insuranceGroupMeta.fields.map(InsuranceFieldRenderer)\n      }\n    ]\n  );\n\n  return (\n    <Form\n      actions={\n        <>\n          <Button\n            name='Cancel'\n            variant='secondary'\n            onClick={(e: MouseEvent<HTMLButtonElement>) => {\n              action('Click')(`${e.currentTarget.name}:${e.type}`);\n            }}\n          >\n            Cancel\n          </Button>\n          <Button name='Submit' type='submit' variant='primary'>\n            Submit\n          </Button>\n        </>\n      }\n      onSubmit={(e: FormEvent) => {\n        e.preventDefault();\n        action('Submit')(`Form:${e.type}`);\n      }}\n      style={{ margin: 'auto', maxWidth: '37.5rem' }}\n    >\n      <Text variant='h1'>Insurance step 1</Text>\n      <Text variant='h2'>Dependants</Text>\n      <FieldGroupList\n        items={state.map(fields => {\n          return {\n            ...fields,\n            children: <Flex container={{ direction: 'column', gap: 2 }}>{fields.children}</Flex>\n          };\n        })}\n        onAdd={\n          args.allowAdd\n            ? () => {\n                dispatch({ action: 'add' });\n              }\n            : undefined\n        }\n        onDelete={\n          args.allowDelete\n            ? id => {\n                dispatch({ action: 'delete', id });\n              }\n            : undefined\n        }\n      />\n    </Form>\n  );\n};\n\nexport const FieldGroupListDemo: Story<FieldGroupListDemoProps> = (\n  args: FieldGroupListDemoProps\n) => {\n  const [state, dispatch] = useReducer(\n    fieldGroupReducer(demoGroupMeta, DemoFieldRenderer),\n    undefined,\n    () => [\n      {\n        name: `${demoGroupMeta.label} 1`,\n        id: createUID(),\n        children: demoGroupMeta.fields.map(DemoFieldRenderer)\n      }\n    ]\n  );\n\n  return (\n    <FieldGroupList\n      items={state.map(fields => {\n        return {\n          ...fields,\n          children: <Flex container={{ direction: 'column', gap: 2 }}>{fields.children}</Flex>\n        };\n      })}\n      onAdd={\n        args.allowAdd\n          ? () => {\n              dispatch({ action: 'add' });\n            }\n          : undefined\n      }\n      onDelete={\n        args.allowDelete\n          ? id => {\n              dispatch({ action: 'delete', id });\n            }\n          : undefined\n      }\n    />\n  );\n};\n"]}

package/lib/core/FieldValueList/FieldValueList.stories.d.ts

@@ -5,6 +5,7 @@ export default _default;
 interface FieldValueListStoryProps extends OmitStrict<FieldValueListProps, 'fields'> {
     name: string;
     value: string;
+    inContentContainer?: boolean;
 }
 export declare const FieldValueListDemo: Story<FieldValueListStoryProps>;
 //# sourceMappingURL=FieldValueList.stories.d.ts.map

package/lib/core/FieldValueList/FieldValueList.stories.d.ts.map

@@ -1 +1 @@
-{"version":3,"file":"FieldValueList.stories.d.ts","sourceRoot":"","sources":["../../../src/core/FieldValueList/FieldValueList.stories.tsx"],"names":[],"mappings":"AAAA,OAAO,EAAE,IAAI,EAAE,KAAK,EAAE,MAAM,kBAAkB,CAAC;AAE/C,OAAO,EAEL,mBAAmB,EAInB,UAAU,EACX,MAAM,yBAAyB,CAAC;;AAEjC,wBAGU;AAEV,UAAU,wBAAyB,SAAQ,UAAU,CAAC,mBAAmB,EAAE,QAAQ,CAAC;IAClF,IAAI,EAAE,MAAM,CAAC;IACb,KAAK,EAAE,MAAM,CAAC;CACf;AAED,eAAO,MAAM,kBAAkB,EAAE,KAAK,CAAC,wBAAwB,CA4C9D,CAAC"}
+{"version":3,"file":"FieldValueList.stories.d.ts","sourceRoot":"","sources":["../../../src/core/FieldValueList/FieldValueList.stories.tsx"],"names":[],"mappings":"AACA,OAAO,EAAE,IAAI,EAAE,KAAK,EAAE,MAAM,kBAAkB,CAAC;AAE/C,OAAO,EAEL,mBAAmB,EAInB,UAAU,EACX,MAAM,yBAAyB,CAAC;;AAIjC,wBAGU;AAEV,UAAU,wBAAyB,SAAQ,UAAU,CAAC,mBAAmB,EAAE,QAAQ,CAAC;IAClF,IAAI,EAAE,MAAM,CAAC;IACb,KAAK,EAAE,MAAM,CAAC;IACd,kBAAkB,CAAC,EAAE,OAAO,CAAC;CAC9B;AAED,eAAO,MAAM,kBAAkB,EAAE,KAAK,CAAC,wBAAwB,CA2E9D,CAAC"}

package/lib/core/FieldValueList/FieldValueList.stories.js

@@ -1,10 +1,13 @@
 import { jsx as _jsx } from "react/jsx-runtime";
+import { Fragment } from 'react';
 import { FieldValueList, Link, Status, Text } from '@pega/cosmos-react-core';
+import { StyledDemoContainer } from './FieldValueList.styles';
 export default {
     title: 'Core/FieldValueList',
     component: FieldValueList
 };
 export const FieldValueListDemo = (args) => {
+    const Wrapper = args.inContentContainer ? StyledDemoContainer : Fragment;
     const data = [
         {
             id: 'id',
@@ -36,15 +39,42 @@ export const FieldValueListDemo = (args) => {
             name: 'No Value'
         }
     ];
-    return _jsx(FieldValueList, { variant: args.variant, fields: data });
+    const numericData = [
+        {
+            id: 'open',
+            name: 'Open',
+            value: 405
+        },
+        {
+            id: 'close',
+            name: 'Close',
+            value: 401
+        },
+        {
+            id: 'year_high',
+            name: '52 week high',
+            value: 445
+        },
+        {
+            id: 'year_low',
+            name: '52 week low',
+            value: 335
+        }
+    ];
+    return (_jsx(Wrapper, { children: _jsx(FieldValueList, { variant: args.variant, fields: args.variant === 'value-comparison' ? numericData : data }) }));
 };
 FieldValueListDemo.args = {
     variant: 'inline',
+    inContentContainer: true,
     name: 'Name',
     value: 'Value'
 };
 FieldValueListDemo.argTypes = {
-    variant: { options: ['inline', 'stacked'], control: { type: 'select' } },
+    variant: {
+        options: ['inline', 'stacked', 'value-comparison'],
+        control: { type: 'select' }
+    },
+    inContentContainer: { control: { type: 'boolean' } },
     name: { control: { type: 'text' } },
     value: { control: { type: 'text' } }
 };

package/lib/core/FieldValueList/FieldValueList.stories.js.map

@@ -1 +1 @@
-{"version":3,"file":"FieldValueList.stories.js","sourceRoot":"","sources":["../../../src/core/FieldValueList/FieldValueList.stories.tsx"],"names":[],"mappings":";AAEA,OAAO,EACL,cAAc,EAEd,IAAI,EACJ,MAAM,EACN,IAAI,EAEL,MAAM,yBAAyB,CAAC;AAEjC,eAAe;IACb,KAAK,EAAE,qBAAqB;IAC5B,SAAS,EAAE,cAAc;CAClB,CAAC;AAOV,MAAM,CAAC,MAAM,kBAAkB,GAAoC,CACjE,IAA8B,EAC9B,EAAE;IACF,MAAM,IAAI,GAAG;QACX;YACE,EAAE,EAAE,IAAI;YACR,IAAI,EAAE,IAAI;YACV,KAAK,EAAE,CACL,KAAC,IAAI,IAAC,OAAO,EAAC,IAAI,EAAC,EAAE,EAAC,MAAM,uBAErB,CACR;SACF;QACD;YACE,EAAE,EAAE,QAAQ;YACZ,IAAI,EAAE,QAAQ;YACd,KAAK,EAAE,KAAC,MAAM,IAAC,OAAO,EAAC,SAAS,wBAAiB;SAClD;QACD;YACE,EAAE,EAAE,SAAS;YACb,IAAI,EAAE,IAAI,CAAC,IAAI;YACf,KAAK,EAAE,IAAI,CAAC,KAAK;SAClB;QACD;YACE,EAAE,EAAE,MAAM;YACV,IAAI,EAAE,MAAM;YACZ,KAAK,EAAE,CACL,KAAC,IAAI,IAAC,IAAI,EAAC,sBAAsB,EAAC,MAAM,EAAC,QAAQ,sBAE1C,CACR;SACF;QACD;YACE,EAAE,EAAE,SAAS;YACb,IAAI,EAAE,SAAS;YACf,KAAK,EAAE,IAAI,IAAI,EAAE,CAAC,kBAAkB,EAAE;SACvC;QACD;YACE,EAAE,EAAE,UAAU;YACd,IAAI,EAAE,UAAU;SACjB;KACF,CAAC;IAEF,OAAO,KAAC,cAAc,IAAC,OAAO,EAAE,IAAI,CAAC,OAAO,EAAE,MAAM,EAAE,IAAI,GAAI,CAAC;AACjE,CAAC,CAAC;AAEF,kBAAkB,CAAC,IAAI,GAAG;IACxB,OAAO,EAAE,QAAQ;IACjB,IAAI,EAAE,MAAM;IACZ,KAAK,EAAE,OAAO;CACf,CAAC;AAEF,kBAAkB,CAAC,QAAQ,GAAG;IAC5B,OAAO,EAAE,EAAE,OAAO,EAAE,CAAC,QAAQ,EAAE,SAAS,CAAC,EAAE,OAAO,EAAE,EAAE,IAAI,EAAE,QAAQ,EAAE,EAAE;IACxE,IAAI,EAAE,EAAE,OAAO,EAAE,EAAE,IAAI,EAAE,MAAM,EAAE,EAAE;IACnC,KAAK,EAAE,EAAE,OAAO,EAAE,EAAE,IAAI,EAAE,MAAM,EAAE,EAAE;CACrC,CAAC","sourcesContent":["import { Meta, Story } from '@storybook/react';\n\nimport {\n  FieldValueList,\n  FieldValueListProps,\n  Link,\n  Status,\n  Text,\n  OmitStrict\n} from '@pega/cosmos-react-core';\n\nexport default {\n  title: 'Core/FieldValueList',\n  component: FieldValueList\n} as Meta;\n\ninterface FieldValueListStoryProps extends OmitStrict<FieldValueListProps, 'fields'> {\n  name: string;\n  value: string;\n}\n\nexport const FieldValueListDemo: Story<FieldValueListStoryProps> = (\n  args: FieldValueListStoryProps\n) => {\n  const data = [\n    {\n      id: 'id',\n      name: 'ID',\n      value: (\n        <Text variant='h1' as='span'>\n          C-1234\n        </Text>\n      )\n    },\n    {\n      id: 'status',\n      name: 'Status',\n      value: <Status variant='pending'>pending</Status>\n    },\n    {\n      id: 'dynamic',\n      name: args.name,\n      value: args.value\n    },\n    {\n      id: 'link',\n      name: 'Link',\n      value: (\n        <Link href='https://www.pega.com' target='_blank'>\n          C-ABC\n        </Link>\n      )\n    },\n    {\n      id: 'created',\n      name: 'Created',\n      value: new Date().toLocaleDateString()\n    },\n    {\n      id: 'no value',\n      name: 'No Value'\n    }\n  ];\n\n  return <FieldValueList variant={args.variant} fields={data} />;\n};\n\nFieldValueListDemo.args = {\n  variant: 'inline',\n  name: 'Name',\n  value: 'Value'\n};\n\nFieldValueListDemo.argTypes = {\n  variant: { options: ['inline', 'stacked'], control: { type: 'select' } },\n  name: { control: { type: 'text' } },\n  value: { control: { type: 'text' } }\n};\n"]}
+{"version":3,"file":"FieldValueList.stories.js","sourceRoot":"","sources":["../../../src/core/FieldValueList/FieldValueList.stories.tsx"],"names":[],"mappings":";AAAA,OAAO,EAAE,QAAQ,EAAE,MAAM,OAAO,CAAC;AAGjC,OAAO,EACL,cAAc,EAEd,IAAI,EACJ,MAAM,EACN,IAAI,EAEL,MAAM,yBAAyB,CAAC;AAEjC,OAAO,EAAE,mBAAmB,EAAE,MAAM,yBAAyB,CAAC;AAE9D,eAAe;IACb,KAAK,EAAE,qBAAqB;IAC5B,SAAS,EAAE,cAAc;CAClB,CAAC;AAQV,MAAM,CAAC,MAAM,kBAAkB,GAAoC,CACjE,IAA8B,EAC9B,EAAE;IACF,MAAM,OAAO,GAAG,IAAI,CAAC,kBAAkB,CAAC,CAAC,CAAC,mBAAmB,CAAC,CAAC,CAAC,QAAQ,CAAC;IACzE,MAAM,IAAI,GAAG;QACX;YACE,EAAE,EAAE,IAAI;YACR,IAAI,EAAE,IAAI;YACV,KAAK,EAAE,CACL,KAAC,IAAI,IAAC,OAAO,EAAC,IAAI,EAAC,EAAE,EAAC,MAAM,uBAErB,CACR;SACF;QACD;YACE,EAAE,EAAE,QAAQ;YACZ,IAAI,EAAE,QAAQ;YACd,KAAK,EAAE,KAAC,MAAM,IAAC,OAAO,EAAC,SAAS,wBAAiB;SAClD;QACD;YACE,EAAE,EAAE,SAAS;YACb,IAAI,EAAE,IAAI,CAAC,IAAI;YACf,KAAK,EAAE,IAAI,CAAC,KAAK;SAClB;QACD;YACE,EAAE,EAAE,MAAM;YACV,IAAI,EAAE,MAAM;YACZ,KAAK,EAAE,CACL,KAAC,IAAI,IAAC,IAAI,EAAC,sBAAsB,EAAC,MAAM,EAAC,QAAQ,sBAE1C,CACR;SACF;QACD;YACE,EAAE,EAAE,SAAS;YACb,IAAI,EAAE,SAAS;YACf,KAAK,EAAE,IAAI,IAAI,EAAE,CAAC,kBAAkB,EAAE;SACvC;QACD;YACE,EAAE,EAAE,UAAU;YACd,IAAI,EAAE,UAAU;SACjB;KACF,CAAC;IAEF,MAAM,WAAW,GAAG;QAClB;YACE,EAAE,EAAE,MAAM;YACV,IAAI,EAAE,MAAM;YACZ,KAAK,EAAE,GAAG;SACX;QACD;YACE,EAAE,EAAE,OAAO;YACX,IAAI,EAAE,OAAO;YACb,KAAK,EAAE,GAAG;SACX;QACD;YACE,EAAE,EAAE,WAAW;YACf,IAAI,EAAE,cAAc;YACpB,KAAK,EAAE,GAAG;SACX;QACD;YACE,EAAE,EAAE,UAAU;YACd,IAAI,EAAE,aAAa;YACnB,KAAK,EAAE,GAAG;SACX;KACF,CAAC;IAEF,OAAO,CACL,KAAC,OAAO,cACN,KAAC,cAAc,IACb,OAAO,EAAE,IAAI,CAAC,OAAO,EACrB,MAAM,EAAE,IAAI,CAAC,OAAO,KAAK,kBAAkB,CAAC,CAAC,CAAC,WAAW,CAAC,CAAC,CAAC,IAAI,GAChE,GACM,CACX,CAAC;AACJ,CAAC,CAAC;AAEF,kBAAkB,CAAC,IAAI,GAAG;IACxB,OAAO,EAAE,QAAQ;IACjB,kBAAkB,EAAE,IAAI;IACxB,IAAI,EAAE,MAAM;IACZ,KAAK,EAAE,OAAO;CACf,CAAC;AAEF,kBAAkB,CAAC,QAAQ,GAAG;IAC5B,OAAO,EAAE;QACP,OAAO,EAAE,CAAC,QAAQ,EAAE,SAAS,EAAE,kBAAkB,CAAC;QAClD,OAAO,EAAE,EAAE,IAAI,EAAE,QAAQ,EAAE;KAC5B;IACD,kBAAkB,EAAE,EAAE,OAAO,EAAE,EAAE,IAAI,EAAE,SAAS,EAAE,EAAE;IACpD,IAAI,EAAE,EAAE,OAAO,EAAE,EAAE,IAAI,EAAE,MAAM,EAAE,EAAE;IACnC,KAAK,EAAE,EAAE,OAAO,EAAE,EAAE,IAAI,EAAE,MAAM,EAAE,EAAE;CACrC,CAAC","sourcesContent":["import { Fragment } from 'react';\nimport { Meta, Story } from '@storybook/react';\n\nimport {\n  FieldValueList,\n  FieldValueListProps,\n  Link,\n  Status,\n  Text,\n  OmitStrict\n} from '@pega/cosmos-react-core';\n\nimport { StyledDemoContainer } from './FieldValueList.styles';\n\nexport default {\n  title: 'Core/FieldValueList',\n  component: FieldValueList\n} as Meta;\n\ninterface FieldValueListStoryProps extends OmitStrict<FieldValueListProps, 'fields'> {\n  name: string;\n  value: string;\n  inContentContainer?: boolean;\n}\n\nexport const FieldValueListDemo: Story<FieldValueListStoryProps> = (\n  args: FieldValueListStoryProps\n) => {\n  const Wrapper = args.inContentContainer ? StyledDemoContainer : Fragment;\n  const data = [\n    {\n      id: 'id',\n      name: 'ID',\n      value: (\n        <Text variant='h1' as='span'>\n          C-1234\n        </Text>\n      )\n    },\n    {\n      id: 'status',\n      name: 'Status',\n      value: <Status variant='pending'>pending</Status>\n    },\n    {\n      id: 'dynamic',\n      name: args.name,\n      value: args.value\n    },\n    {\n      id: 'link',\n      name: 'Link',\n      value: (\n        <Link href='https://www.pega.com' target='_blank'>\n          C-ABC\n        </Link>\n      )\n    },\n    {\n      id: 'created',\n      name: 'Created',\n      value: new Date().toLocaleDateString()\n    },\n    {\n      id: 'no value',\n      name: 'No Value'\n    }\n  ];\n\n  const numericData = [\n    {\n      id: 'open',\n      name: 'Open',\n      value: 405\n    },\n    {\n      id: 'close',\n      name: 'Close',\n      value: 401\n    },\n    {\n      id: 'year_high',\n      name: '52 week high',\n      value: 445\n    },\n    {\n      id: 'year_low',\n      name: '52 week low',\n      value: 335\n    }\n  ];\n\n  return (\n    <Wrapper>\n      <FieldValueList\n        variant={args.variant}\n        fields={args.variant === 'value-comparison' ? numericData : data}\n      />\n    </Wrapper>\n  );\n};\n\nFieldValueListDemo.args = {\n  variant: 'inline',\n  inContentContainer: true,\n  name: 'Name',\n  value: 'Value'\n};\n\nFieldValueListDemo.argTypes = {\n  variant: {\n    options: ['inline', 'stacked', 'value-comparison'],\n    control: { type: 'select' }\n  },\n  inContentContainer: { control: { type: 'boolean' } },\n  name: { control: { type: 'text' } },\n  value: { control: { type: 'text' } }\n};\n"]}

package/lib/core/FieldValueList/FieldValueList.styles.d.ts

@@ -0,0 +1,2 @@
+export declare const StyledDemoContainer: import("styled-components").StyledComponent<"div", import("styled-components").DefaultTheme, {}, never>;
+//# sourceMappingURL=FieldValueList.styles.d.ts.map

package/lib/core/FieldValueList/FieldValueList.styles.d.ts.map

@@ -0,0 +1 @@
+{"version":3,"file":"FieldValueList.styles.d.ts","sourceRoot":"","sources":["../../../src/core/FieldValueList/FieldValueList.styles.ts"],"names":[],"mappings":"AAEA,eAAO,MAAM,mBAAmB,yGAU9B,CAAC"}

package/lib/core/FieldValueList/FieldValueList.styles.js

@@ -0,0 +1,8 @@
+import styled, { css } from 'styled-components';
+export const StyledDemoContainer = styled.div(({ theme }) => {
+    const { base: { 'content-width': { md } } } = theme;
+    return css `
+    max-width: ${md};
+  `;
+});
+//# sourceMappingURL=FieldValueList.styles.js.map

package/lib/core/FieldValueList/FieldValueList.styles.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"FieldValueList.styles.js","sourceRoot":"","sources":["../../../src/core/FieldValueList/FieldValueList.styles.ts"],"names":[],"mappings":"AAAA,OAAO,MAAM,EAAE,EAAE,GAAG,EAAE,MAAM,mBAAmB,CAAC;AAEhD,MAAM,CAAC,MAAM,mBAAmB,GAAG,MAAM,CAAC,GAAG,CAAC,CAAC,EAAE,KAAK,EAAE,EAAE,EAAE;IAC1D,MAAM,EACJ,IAAI,EAAE,EACJ,eAAe,EAAE,EAAE,EAAE,EAAE,EACxB,EACF,GAAG,KAAK,CAAC;IAEV,OAAO,GAAG,CAAA;iBACK,EAAE;GAChB,CAAC;AACJ,CAAC,CAAC,CAAC","sourcesContent":["import styled, { css } from 'styled-components';\n\nexport const StyledDemoContainer = styled.div(({ theme }) => {\n  const {\n    base: {\n      'content-width': { md }\n    }\n  } = theme;\n\n  return css`\n    max-width: ${md};\n  `;\n});\n"]}

package/lib/core/File/FileDisplay.stories.d.ts.map

@@ -1 +1 @@
-{"version":3,"file":"FileDisplay.stories.d.ts","sourceRoot":"","sources":["../../../src/core/File/FileDisplay.stories.tsx"],"names":[],"mappings":"AAAA,OAAO,EAAE,IAAI,EAAE,KAAK,EAAE,MAAM,kBAAkB,CAAC;AAG/C,OAAO,EAEL,gBAAgB,EAIhB,mBAAmB,EAEpB,MAAM,yBAAyB,CAAC;;AAEjC,wBAaU;AAEV,UAAU,oBAAoB;IAC5B,eAAe,CAAC,EAAE,OAAO,CAAC;IAC1B,SAAS,CAAC,EAAE,OAAO,CAAC;IACpB,WAAW,CAAC,EAAE,OAAO,CAAC;IACtB,YAAY,CAAC,EAAE,OAAO,CAAC;CACxB;AAED,eAAO,MAAM,gBAAgB,EAAE,KAAK,CAAC,oBAAoB,CAmGxD,CAAC;AAUF,eAAO,MAAM,eAAe,EAAE,KAAK,CAAC,gBAAgB,GAAG,oBAAoB,CAyB1E,CAAC;AAYF,UAAU,uBAAwB,SAAQ,oBAAoB;IAC5D,IAAI,EAAE,mBAAmB,CAAC,MAAM,CAAC,CAAC;IAClC,IAAI,CAAC,EAAE,mBAAmB,CAAC,MAAM,CAAC,CAAC;IACnC,KAAK,CAAC,EAAE,mBAAmB,CAAC,OAAO,CAAC,CAAC;IACrC,QAAQ,CAAC,EAAE,mBAAmB,CAAC,UAAU,CAAC,CAAC;CAC5C;AAED,eAAO,MAAM,kBAAkB,EAAE,KAAK,CAAC,uBAAuB,CA2B7D,CAAC"}
+{"version":3,"file":"FileDisplay.stories.d.ts","sourceRoot":"","sources":["../../../src/core/File/FileDisplay.stories.tsx"],"names":[],"mappings":"AAAA,OAAO,EAAE,IAAI,EAAE,KAAK,EAAE,MAAM,kBAAkB,CAAC;AAE/C,OAAO,EAEL,gBAAgB,EAIhB,mBAAmB,EAEpB,MAAM,yBAAyB,CAAC;;AAEjC,wBAaU;AAEV,UAAU,oBAAoB;IAC5B,eAAe,CAAC,EAAE,OAAO,CAAC;IAC1B,SAAS,CAAC,EAAE,OAAO,CAAC;IACpB,WAAW,CAAC,EAAE,OAAO,CAAC;IACtB,YAAY,CAAC,EAAE,OAAO,CAAC;CACxB;AAED,eAAO,MAAM,gBAAgB,EAAE,KAAK,CAAC,oBAAoB,CAmHxD,CAAC;AAUF,eAAO,MAAM,eAAe,EAAE,KAAK,CAAC,gBAAgB,GAAG,oBAAoB,CAyB1E,CAAC;AAYF,UAAU,uBAAwB,SAAQ,oBAAoB;IAC5D,IAAI,EAAE,mBAAmB,CAAC,MAAM,CAAC,CAAC;IAClC,IAAI,CAAC,EAAE,mBAAmB,CAAC,MAAM,CAAC,CAAC;IACnC,KAAK,CAAC,EAAE,mBAAmB,CAAC,OAAO,CAAC,CAAC;IACrC,QAAQ,CAAC,EAAE,mBAAmB,CAAC,UAAU,CAAC,CAAC;CAC5C;AAED,eAAO,MAAM,kBAAkB,EAAE,KAAK,CAAC,uBAAuB,CA2B7D,CAAC"}

package/lib/core/File/FileDisplay.stories.js

@@ -1,6 +1,5 @@
 import { jsx as _jsx } from "react/jsx-runtime";
-import { useContext } from 'react';
-import { FileDisplay, FieldValueList, ToasterContext, FileUploadItem } from '@pega/cosmos-react-core';
+import { FileDisplay, FieldValueList, useToaster, FileUploadItem } from '@pega/cosmos-react-core';
 export default {
     title: 'Core/File/Display',
     component: FileDisplay,
@@ -16,19 +15,25 @@ export default {
     }
 };
 export const FileDisplayTypes = (args) => {
-    const { push } = useContext(ToasterContext);
+    const { push } = useToaster();
     const handlePreview = args.withPreview
         ? (url) => push({ content: `Previewed ${url}` })
         : undefined;
     const handleDownload = args.withDownload
         ? (url) => push({ content: `Downloaded ${url}` })
         : undefined;
+    const imageSrc = 'https://www.pega.com/sites/default/files/styles/480/public/media/images/2021-02/pwi-2021-prevcard.jpg';
     const fields = [
         {
             id: '1',
             name: 'Image file',
             value: (_jsx(FileDisplay, { displayText: args.withDisplayText ? 'image.jpg' : undefined, value: args.withValue ? 'https://pbs.twimg.com/media/ENNN5PAXkAE-hag.jpg' : undefined, onPreview: handlePreview, onDownload: handleDownload }))
         },
+        {
+            id: '1',
+            name: 'Image file with thumbnail',
+            value: (_jsx(FileDisplay, { displayText: args.withDisplayText ? 'image.jpg' : undefined, value: args.withValue ? 'https://pbs.twimg.com/media/ENNN5PAXkAE-hag.jpg' : undefined, thumbnail: imageSrc, onPreview: handlePreview, onDownload: handleDownload }))
+        },
         {
             id: '2',
             name: 'Video file',
@@ -69,7 +74,7 @@ FileDisplayTypes.argTypes = {
     withDisplayText: { control: { type: 'boolean' } }
 };
 export const FileDisplayDemo = (args) => {
-    const { push } = useContext(ToasterContext);
+    const { push } = useToaster();
     const handlePreview = args.withPreview
         ? (url) => push({ content: `Previewed ${url}` })
         : undefined;
@@ -88,7 +93,7 @@ FileDisplayDemo.argTypes = {
     displayText: { control: { type: 'text' } }
 };
 export const FileUploadItemDemo = (args) => {
-    const { push } = useContext(ToasterContext);
+    const { push } = useToaster();
     const handlePreview = args.withPreview
         ? (url) => push({ content: `Previewed ${url}` })
         : undefined;

package/lib/core/File/FileDisplay.stories.js.map

@@ -1 +1 @@
-{"version":3,"file":"FileDisplay.stories.js","sourceRoot":"","sources":["../../../src/core/File/FileDisplay.stories.tsx"],"names":[],"mappings":"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","sourcesContent":["import { Meta, Story } from '@storybook/react';\nimport { useContext } from 'react';\n\nimport {\n  FileDisplay,\n  FileDisplayProps,\n  FileItemProps,\n  FieldValueList,\n  ToasterContext,\n  FileUploadItemProps,\n  FileUploadItem\n} from '@pega/cosmos-react-core';\n\nexport default {\n  title: 'Core/File/Display',\n  component: FileDisplay,\n  args: {\n    withValue: true,\n    withPreview: true,\n    withDownload: true\n  },\n  argTypes: {\n    withValue: { control: { type: 'boolean' } },\n    withPreview: { control: { type: 'boolean' } },\n    withDownload: { control: { type: 'boolean' } }\n  }\n} as Meta;\n\ninterface FileDisplayDemoProps {\n  withDisplayText?: boolean;\n  withValue?: boolean;\n  withPreview?: boolean;\n  withDownload?: boolean;\n}\n\nexport const FileDisplayTypes: Story<FileDisplayDemoProps> = (args: FileDisplayDemoProps) => {\n  const { push } = useContext(ToasterContext);\n\n  const handlePreview = args.withPreview\n    ? (url: FileItemProps['url']) => push({ content: `Previewed ${url}` })\n    : undefined;\n\n  const handleDownload = args.withDownload\n    ? (url: FileItemProps['url']) => push({ content: `Downloaded ${url}` })\n    : undefined;\n\n  const fields = [\n    {\n      id: '1',\n      name: 'Image file',\n      value: (\n        <FileDisplay\n          displayText={args.withDisplayText ? 'image.jpg' : undefined}\n          value={args.withValue ? 'https://pbs.twimg.com/media/ENNN5PAXkAE-hag.jpg' : undefined}\n          onPreview={handlePreview}\n          onDownload={handleDownload}\n        />\n      )\n    },\n    {\n      id: '2',\n      name: 'Video file',\n      value: (\n        <FileDisplay\n          displayText={args.withDisplayText ? 'video.avi' : undefined}\n          value={args.withValue ? 'https://pega.com/media/some-video.avi' : undefined}\n          onPreview={handlePreview}\n          onDownload={handleDownload}\n        />\n      )\n    },\n    {\n      id: '3',\n      name: 'Audio file',\n      value: (\n        <FileDisplay\n          displayText={args.withDisplayText ? 'recording.mp3' : undefined}\n          value={args.withValue ? 'https://pega.com/media/sprint-review-recording.mp3' : undefined}\n          onPreview={handlePreview}\n          onDownload={handleDownload}\n        />\n      )\n    },\n    {\n      id: '4',\n      name: 'Document file',\n      value: (\n        <FileDisplay\n          displayText={args.withDisplayText ? 'document.doc' : undefined}\n          value={args.withValue ? 'https://pega.com/media/document.doc' : undefined}\n          onPreview={handlePreview}\n          onDownload={handleDownload}\n        />\n      )\n    },\n    {\n      id: '5',\n      name: 'PDF file',\n      value: (\n        <FileDisplay\n          displayText={args.withDisplayText ? 'invoice.pdf' : undefined}\n          value={args.withValue ? 'https://pega.com/media/invoice.pdf' : undefined}\n          onPreview={handlePreview}\n          onDownload={handleDownload}\n        />\n      )\n    },\n    {\n      id: '6',\n      name: 'Presentation file',\n      value: (\n        <FileDisplay\n          displayText={args.withDisplayText ? 'review.pps' : undefined}\n          value={args.withValue ? 'https://pega.com/media/review.pps' : undefined}\n          onPreview={handlePreview}\n          onDownload={handleDownload}\n        />\n      )\n    },\n    {\n      id: '7',\n      name: 'Spreadsheet file',\n      value: (\n        <FileDisplay\n          displayText={args.withDisplayText ? 'welfare.xlsx' : undefined}\n          value={args.withValue ? 'https://pega.com/media/welfare.xlsx' : undefined}\n          onPreview={handlePreview}\n          onDownload={handleDownload}\n        />\n      )\n    }\n  ];\n\n  return <FieldValueList fields={fields} />;\n};\n\nFileDisplayTypes.args = {\n  withDisplayText: true\n};\n\nFileDisplayTypes.argTypes = {\n  withDisplayText: { control: { type: 'boolean' } }\n};\n\nexport const FileDisplayDemo: Story<FileDisplayProps & FileDisplayDemoProps> = (\n  args: FileDisplayProps & FileDisplayDemoProps\n) => {\n  const { push } = useContext(ToasterContext);\n\n  const handlePreview = args.withPreview\n    ? (url: FileItemProps['url']) => push({ content: `Previewed ${url}` })\n    : undefined;\n\n  const handleDownload = args.withDownload\n    ? (url: FileItemProps['url']) => push({ content: `Downloaded ${url}` })\n    : undefined;\n\n  const imageSrc =\n    'https://www.pega.com/sites/default/files/styles/480/public/media/images/2021-02/pwi-2021-prevcard.jpg';\n\n  return (\n    <FileDisplay\n      variant={args.variant}\n      displayText={args.displayText}\n      value={args.withValue ? imageSrc : undefined}\n      onPreview={handlePreview}\n      onDownload={handleDownload}\n    />\n  );\n};\n\nFileDisplayDemo.args = {\n  variant: 'file',\n  displayText: 'Pega World iNspire'\n};\n\nFileDisplayDemo.argTypes = {\n  variant: { options: ['file', 'text', 'link'], control: { type: 'radio' } },\n  displayText: { control: { type: 'text' } }\n};\n\ninterface FileUploadItemDemoProps extends FileDisplayDemoProps {\n  name: FileUploadItemProps['name'];\n  meta?: FileUploadItemProps['meta'];\n  error?: FileUploadItemProps['error'];\n  progress?: FileUploadItemProps['progress'];\n}\n\nexport const FileUploadItemDemo: Story<FileUploadItemDemoProps> = (\n  args: FileUploadItemDemoProps\n) => {\n  const { push } = useContext(ToasterContext);\n\n  const handlePreview = args.withPreview\n    ? (url: FileItemProps['url']) => push({ content: `Previewed ${url}` })\n    : undefined;\n\n  const handleDownload = args.withDownload\n    ? (url: FileItemProps['url']) => push({ content: `Downloaded ${url}` })\n    : undefined;\n\n  const imageSrc =\n    'https://www.pega.com/sites/default/files/styles/480/public/media/images/2021-02/pwi-2021-prevcard.jpg';\n\n  return (\n    <FileUploadItem\n      name={args.name}\n      meta={args.meta}\n      error={args.error}\n      progress={args.progress}\n      thumbnail={imageSrc}\n      onPreview={handlePreview}\n      onDownload={handleDownload}\n    />\n  );\n};\n\nFileUploadItemDemo.args = {\n  name: 'Pega World iNspire',\n  meta: 'Some additional information',\n  error: false,\n  progress: 100\n};\n\nFileUploadItemDemo.argTypes = {\n  withValue: { table: { disable: true } },\n  name: { control: { type: 'text' } },\n  meta: { control: { type: 'text' } },\n  error: { control: { type: 'boolean' } },\n  progress: { control: { type: 'number' } }\n};\n"]}
+{"version":3,"file":"FileDisplay.stories.js","sourceRoot":"","sources":["../../../src/core/File/FileDisplay.stories.tsx"],"names":[],"mappings":";AAEA,OAAO,EACL,WAAW,EAGX,cAAc,EACd,UAAU,EAEV,cAAc,EACf,MAAM,yBAAyB,CAAC;AAEjC,eAAe;IACb,KAAK,EAAE,mBAAmB;IAC1B,SAAS,EAAE,WAAW;IACtB,IAAI,EAAE;QACJ,SAAS,EAAE,IAAI;QACf,WAAW,EAAE,IAAI;QACjB,YAAY,EAAE,IAAI;KACnB;IACD,QAAQ,EAAE;QACR,SAAS,EAAE,EAAE,OAAO,EAAE,EAAE,IAAI,EAAE,SAAS,EAAE,EAAE;QAC3C,WAAW,EAAE,EAAE,OAAO,EAAE,EAAE,IAAI,EAAE,SAAS,EAAE,EAAE;QAC7C,YAAY,EAAE,EAAE,OAAO,EAAE,EAAE,IAAI,EAAE,SAAS,EAAE,EAAE;KAC/C;CACM,CAAC;AASV,MAAM,CAAC,MAAM,gBAAgB,GAAgC,CAAC,IAA0B,EAAE,EAAE;IAC1F,MAAM,EAAE,IAAI,EAAE,GAAG,UAAU,EAAE,CAAC;IAE9B,MAAM,aAAa,GAAG,IAAI,CAAC,WAAW;QACpC,CAAC,CAAC,CAAC,GAAyB,EAAE,EAAE,CAAC,IAAI,CAAC,EAAE,OAAO,EAAE,aAAa,GAAG,EAAE,EAAE,CAAC;QACtE,CAAC,CAAC,SAAS,CAAC;IAEd,MAAM,cAAc,GAAG,IAAI,CAAC,YAAY;QACtC,CAAC,CAAC,CAAC,GAAyB,EAAE,EAAE,CAAC,IAAI,CAAC,EAAE,OAAO,EAAE,cAAc,GAAG,EAAE,EAAE,CAAC;QACvE,CAAC,CAAC,SAAS,CAAC;IAEd,MAAM,QAAQ,GACZ,uGAAuG,CAAC;IAE1G,MAAM,MAAM,GAAG;QACb;YACE,EAAE,EAAE,GAAG;YACP,IAAI,EAAE,YAAY;YAClB,KAAK,EAAE,CACL,KAAC,WAAW,IACV,WAAW,EAAE,IAAI,CAAC,eAAe,CAAC,CAAC,CAAC,WAAW,CAAC,CAAC,CAAC,SAAS,EAC3D,KAAK,EAAE,IAAI,CAAC,SAAS,CAAC,CAAC,CAAC,iDAAiD,CAAC,CAAC,CAAC,SAAS,EACrF,SAAS,EAAE,aAAa,EACxB,UAAU,EAAE,cAAc,GAC1B,CACH;SACF;QACD;YACE,EAAE,EAAE,GAAG;YACP,IAAI,EAAE,2BAA2B;YACjC,KAAK,EAAE,CACL,KAAC,WAAW,IACV,WAAW,EAAE,IAAI,CAAC,eAAe,CAAC,CAAC,CAAC,WAAW,CAAC,CAAC,CAAC,SAAS,EAC3D,KAAK,EAAE,IAAI,CAAC,SAAS,CAAC,CAAC,CAAC,iDAAiD,CAAC,CAAC,CAAC,SAAS,EACrF,SAAS,EAAE,QAAQ,EACnB,SAAS,EAAE,aAAa,EACxB,UAAU,EAAE,cAAc,GAC1B,CACH;SACF;QACD;YACE,EAAE,EAAE,GAAG;YACP,IAAI,EAAE,YAAY;YAClB,KAAK,EAAE,CACL,KAAC,WAAW,IACV,WAAW,EAAE,IAAI,CAAC,eAAe,CAAC,CAAC,CAAC,WAAW,CAAC,CAAC,CAAC,SAAS,EAC3D,KAAK,EAAE,IAAI,CAAC,SAAS,CAAC,CAAC,CAAC,uCAAuC,CAAC,CAAC,CAAC,SAAS,EAC3E,SAAS,EAAE,aAAa,EACxB,UAAU,EAAE,cAAc,GAC1B,CACH;SACF;QACD;YACE,EAAE,EAAE,GAAG;YACP,IAAI,EAAE,YAAY;YAClB,KAAK,EAAE,CACL,KAAC,WAAW,IACV,WAAW,EAAE,IAAI,CAAC,eAAe,CAAC,CAAC,CAAC,eAAe,CAAC,CAAC,CAAC,SAAS,EAC/D,KAAK,EAAE,IAAI,CAAC,SAAS,CAAC,CAAC,CAAC,oDAAoD,CAAC,CAAC,CAAC,SAAS,EACxF,SAAS,EAAE,aAAa,EACxB,UAAU,EAAE,cAAc,GAC1B,CACH;SACF;QACD;YACE,EAAE,EAAE,GAAG;YACP,IAAI,EAAE,eAAe;YACrB,KAAK,EAAE,CACL,KAAC,WAAW,IACV,WAAW,EAAE,IAAI,CAAC,eAAe,CAAC,CAAC,CAAC,cAAc,CAAC,CAAC,CAAC,SAAS,EAC9D,KAAK,EAAE,IAAI,CAAC,SAAS,CAAC,CAAC,CAAC,qCAAqC,CAAC,CAAC,CAAC,SAAS,EACzE,SAAS,EAAE,aAAa,EACxB,UAAU,EAAE,cAAc,GAC1B,CACH;SACF;QACD;YACE,EAAE,EAAE,GAAG;YACP,IAAI,EAAE,UAAU;YAChB,KAAK,EAAE,CACL,KAAC,WAAW,IACV,WAAW,EAAE,IAAI,CAAC,eAAe,CAAC,CAAC,CAAC,aAAa,CAAC,CAAC,CAAC,SAAS,EAC7D,KAAK,EAAE,IAAI,CAAC,SAAS,CAAC,CAAC,CAAC,oCAAoC,CAAC,CAAC,CAAC,SAAS,EACxE,SAAS,EAAE,aAAa,EACxB,UAAU,EAAE,cAAc,GAC1B,CACH;SACF;QACD;YACE,EAAE,EAAE,GAAG;YACP,IAAI,EAAE,mBAAmB;YACzB,KAAK,EAAE,CACL,KAAC,WAAW,IACV,WAAW,EAAE,IAAI,CAAC,eAAe,CAAC,CAAC,CAAC,YAAY,CAAC,CAAC,CAAC,SAAS,EAC5D,KAAK,EAAE,IAAI,CAAC,SAAS,CAAC,CAAC,CAAC,mCAAmC,CAAC,CAAC,CAAC,SAAS,EACvE,SAAS,EAAE,aAAa,EACxB,UAAU,EAAE,cAAc,GAC1B,CACH;SACF;QACD;YACE,EAAE,EAAE,GAAG;YACP,IAAI,EAAE,kBAAkB;YACxB,KAAK,EAAE,CACL,KAAC,WAAW,IACV,WAAW,EAAE,IAAI,CAAC,eAAe,CAAC,CAAC,CAAC,cAAc,CAAC,CAAC,CAAC,SAAS,EAC9D,KAAK,EAAE,IAAI,CAAC,SAAS,CAAC,CAAC,CAAC,qCAAqC,CAAC,CAAC,CAAC,SAAS,EACzE,SAAS,EAAE,aAAa,EACxB,UAAU,EAAE,cAAc,GAC1B,CACH;SACF;KACF,CAAC;IAEF,OAAO,KAAC,cAAc,IAAC,MAAM,EAAE,MAAM,GAAI,CAAC;AAC5C,CAAC,CAAC;AAEF,gBAAgB,CAAC,IAAI,GAAG;IACtB,eAAe,EAAE,IAAI;CACtB,CAAC;AAEF,gBAAgB,CAAC,QAAQ,GAAG;IAC1B,eAAe,EAAE,EAAE,OAAO,EAAE,EAAE,IAAI,EAAE,SAAS,EAAE,EAAE;CAClD,CAAC;AAEF,MAAM,CAAC,MAAM,eAAe,GAAmD,CAC7E,IAA6C,EAC7C,EAAE;IACF,MAAM,EAAE,IAAI,EAAE,GAAG,UAAU,EAAE,CAAC;IAE9B,MAAM,aAAa,GAAG,IAAI,CAAC,WAAW;QACpC,CAAC,CAAC,CAAC,GAAyB,EAAE,EAAE,CAAC,IAAI,CAAC,EAAE,OAAO,EAAE,aAAa,GAAG,EAAE,EAAE,CAAC;QACtE,CAAC,CAAC,SAAS,CAAC;IAEd,MAAM,cAAc,GAAG,IAAI,CAAC,YAAY;QACtC,CAAC,CAAC,CAAC,GAAyB,EAAE,EAAE,CAAC,IAAI,CAAC,EAAE,OAAO,EAAE,cAAc,GAAG,EAAE,EAAE,CAAC;QACvE,CAAC,CAAC,SAAS,CAAC;IAEd,MAAM,QAAQ,GACZ,uGAAuG,CAAC;IAE1G,OAAO,CACL,KAAC,WAAW,IACV,OAAO,EAAE,IAAI,CAAC,OAAO,EACrB,WAAW,EAAE,IAAI,CAAC,WAAW,EAC7B,KAAK,EAAE,IAAI,CAAC,SAAS,CAAC,CAAC,CAAC,QAAQ,CAAC,CAAC,CAAC,SAAS,EAC5C,SAAS,EAAE,aAAa,EACxB,UAAU,EAAE,cAAc,GAC1B,CACH,CAAC;AACJ,CAAC,CAAC;AAEF,eAAe,CAAC,IAAI,GAAG;IACrB,OAAO,EAAE,MAAM;IACf,WAAW,EAAE,oBAAoB;CAClC,CAAC;AAEF,eAAe,CAAC,QAAQ,GAAG;IACzB,OAAO,EAAE,EAAE,OAAO,EAAE,CAAC,MAAM,EAAE,MAAM,EAAE,MAAM,CAAC,EAAE,OAAO,EAAE,EAAE,IAAI,EAAE,OAAO,EAAE,EAAE;IAC1E,WAAW,EAAE,EAAE,OAAO,EAAE,EAAE,IAAI,EAAE,MAAM,EAAE,EAAE;CAC3C,CAAC;AASF,MAAM,CAAC,MAAM,kBAAkB,GAAmC,CAChE,IAA6B,EAC7B,EAAE;IACF,MAAM,EAAE,IAAI,EAAE,GAAG,UAAU,EAAE,CAAC;IAE9B,MAAM,aAAa,GAAG,IAAI,CAAC,WAAW;QACpC,CAAC,CAAC,CAAC,GAAyB,EAAE,EAAE,CAAC,IAAI,CAAC,EAAE,OAAO,EAAE,aAAa,GAAG,EAAE,EAAE,CAAC;QACtE,CAAC,CAAC,SAAS,CAAC;IAEd,MAAM,cAAc,GAAG,IAAI,CAAC,YAAY;QACtC,CAAC,CAAC,CAAC,GAAyB,EAAE,EAAE,CAAC,IAAI,CAAC,EAAE,OAAO,EAAE,cAAc,GAAG,EAAE,EAAE,CAAC;QACvE,CAAC,CAAC,SAAS,CAAC;IAEd,MAAM,QAAQ,GACZ,uGAAuG,CAAC;IAE1G,OAAO,CACL,KAAC,cAAc,IACb,IAAI,EAAE,IAAI,CAAC,IAAI,EACf,IAAI,EAAE,IAAI,CAAC,IAAI,EACf,KAAK,EAAE,IAAI,CAAC,KAAK,EACjB,QAAQ,EAAE,IAAI,CAAC,QAAQ,EACvB,SAAS,EAAE,QAAQ,EACnB,SAAS,EAAE,aAAa,EACxB,UAAU,EAAE,cAAc,GAC1B,CACH,CAAC;AACJ,CAAC,CAAC;AAEF,kBAAkB,CAAC,IAAI,GAAG;IACxB,IAAI,EAAE,oBAAoB;IAC1B,IAAI,EAAE,6BAA6B;IACnC,KAAK,EAAE,KAAK;IACZ,QAAQ,EAAE,GAAG;CACd,CAAC;AAEF,kBAAkB,CAAC,QAAQ,GAAG;IAC5B,SAAS,EAAE,EAAE,KAAK,EAAE,EAAE,OAAO,EAAE,IAAI,EAAE,EAAE;IACvC,IAAI,EAAE,EAAE,OAAO,EAAE,EAAE,IAAI,EAAE,MAAM,EAAE,EAAE;IACnC,IAAI,EAAE,EAAE,OAAO,EAAE,EAAE,IAAI,EAAE,MAAM,EAAE,EAAE;IACnC,KAAK,EAAE,EAAE,OAAO,EAAE,EAAE,IAAI,EAAE,SAAS,EAAE,EAAE;IACvC,QAAQ,EAAE,EAAE,OAAO,EAAE,EAAE,IAAI,EAAE,QAAQ,EAAE,EAAE;CAC1C,CAAC","sourcesContent":["import { Meta, Story } from '@storybook/react';\n\nimport {\n  FileDisplay,\n  FileDisplayProps,\n  FileItemProps,\n  FieldValueList,\n  useToaster,\n  FileUploadItemProps,\n  FileUploadItem\n} from '@pega/cosmos-react-core';\n\nexport default {\n  title: 'Core/File/Display',\n  component: FileDisplay,\n  args: {\n    withValue: true,\n    withPreview: true,\n    withDownload: true\n  },\n  argTypes: {\n    withValue: { control: { type: 'boolean' } },\n    withPreview: { control: { type: 'boolean' } },\n    withDownload: { control: { type: 'boolean' } }\n  }\n} as Meta;\n\ninterface FileDisplayDemoProps {\n  withDisplayText?: boolean;\n  withValue?: boolean;\n  withPreview?: boolean;\n  withDownload?: boolean;\n}\n\nexport const FileDisplayTypes: Story<FileDisplayDemoProps> = (args: FileDisplayDemoProps) => {\n  const { push } = useToaster();\n\n  const handlePreview = args.withPreview\n    ? (url: FileItemProps['url']) => push({ content: `Previewed ${url}` })\n    : undefined;\n\n  const handleDownload = args.withDownload\n    ? (url: FileItemProps['url']) => push({ content: `Downloaded ${url}` })\n    : undefined;\n\n  const imageSrc =\n    'https://www.pega.com/sites/default/files/styles/480/public/media/images/2021-02/pwi-2021-prevcard.jpg';\n\n  const fields = [\n    {\n      id: '1',\n      name: 'Image file',\n      value: (\n        <FileDisplay\n          displayText={args.withDisplayText ? 'image.jpg' : undefined}\n          value={args.withValue ? 'https://pbs.twimg.com/media/ENNN5PAXkAE-hag.jpg' : undefined}\n          onPreview={handlePreview}\n          onDownload={handleDownload}\n        />\n      )\n    },\n    {\n      id: '1',\n      name: 'Image file with thumbnail',\n      value: (\n        <FileDisplay\n          displayText={args.withDisplayText ? 'image.jpg' : undefined}\n          value={args.withValue ? 'https://pbs.twimg.com/media/ENNN5PAXkAE-hag.jpg' : undefined}\n          thumbnail={imageSrc}\n          onPreview={handlePreview}\n          onDownload={handleDownload}\n        />\n      )\n    },\n    {\n      id: '2',\n      name: 'Video file',\n      value: (\n        <FileDisplay\n          displayText={args.withDisplayText ? 'video.avi' : undefined}\n          value={args.withValue ? 'https://pega.com/media/some-video.avi' : undefined}\n          onPreview={handlePreview}\n          onDownload={handleDownload}\n        />\n      )\n    },\n    {\n      id: '3',\n      name: 'Audio file',\n      value: (\n        <FileDisplay\n          displayText={args.withDisplayText ? 'recording.mp3' : undefined}\n          value={args.withValue ? 'https://pega.com/media/sprint-review-recording.mp3' : undefined}\n          onPreview={handlePreview}\n          onDownload={handleDownload}\n        />\n      )\n    },\n    {\n      id: '4',\n      name: 'Document file',\n      value: (\n        <FileDisplay\n          displayText={args.withDisplayText ? 'document.doc' : undefined}\n          value={args.withValue ? 'https://pega.com/media/document.doc' : undefined}\n          onPreview={handlePreview}\n          onDownload={handleDownload}\n        />\n      )\n    },\n    {\n      id: '5',\n      name: 'PDF file',\n      value: (\n        <FileDisplay\n          displayText={args.withDisplayText ? 'invoice.pdf' : undefined}\n          value={args.withValue ? 'https://pega.com/media/invoice.pdf' : undefined}\n          onPreview={handlePreview}\n          onDownload={handleDownload}\n        />\n      )\n    },\n    {\n      id: '6',\n      name: 'Presentation file',\n      value: (\n        <FileDisplay\n          displayText={args.withDisplayText ? 'review.pps' : undefined}\n          value={args.withValue ? 'https://pega.com/media/review.pps' : undefined}\n          onPreview={handlePreview}\n          onDownload={handleDownload}\n        />\n      )\n    },\n    {\n      id: '7',\n      name: 'Spreadsheet file',\n      value: (\n        <FileDisplay\n          displayText={args.withDisplayText ? 'welfare.xlsx' : undefined}\n          value={args.withValue ? 'https://pega.com/media/welfare.xlsx' : undefined}\n          onPreview={handlePreview}\n          onDownload={handleDownload}\n        />\n      )\n    }\n  ];\n\n  return <FieldValueList fields={fields} />;\n};\n\nFileDisplayTypes.args = {\n  withDisplayText: true\n};\n\nFileDisplayTypes.argTypes = {\n  withDisplayText: { control: { type: 'boolean' } }\n};\n\nexport const FileDisplayDemo: Story<FileDisplayProps & FileDisplayDemoProps> = (\n  args: FileDisplayProps & FileDisplayDemoProps\n) => {\n  const { push } = useToaster();\n\n  const handlePreview = args.withPreview\n    ? (url: FileItemProps['url']) => push({ content: `Previewed ${url}` })\n    : undefined;\n\n  const handleDownload = args.withDownload\n    ? (url: FileItemProps['url']) => push({ content: `Downloaded ${url}` })\n    : undefined;\n\n  const imageSrc =\n    'https://www.pega.com/sites/default/files/styles/480/public/media/images/2021-02/pwi-2021-prevcard.jpg';\n\n  return (\n    <FileDisplay\n      variant={args.variant}\n      displayText={args.displayText}\n      value={args.withValue ? imageSrc : undefined}\n      onPreview={handlePreview}\n      onDownload={handleDownload}\n    />\n  );\n};\n\nFileDisplayDemo.args = {\n  variant: 'file',\n  displayText: 'Pega World iNspire'\n};\n\nFileDisplayDemo.argTypes = {\n  variant: { options: ['file', 'text', 'link'], control: { type: 'radio' } },\n  displayText: { control: { type: 'text' } }\n};\n\ninterface FileUploadItemDemoProps extends FileDisplayDemoProps {\n  name: FileUploadItemProps['name'];\n  meta?: FileUploadItemProps['meta'];\n  error?: FileUploadItemProps['error'];\n  progress?: FileUploadItemProps['progress'];\n}\n\nexport const FileUploadItemDemo: Story<FileUploadItemDemoProps> = (\n  args: FileUploadItemDemoProps\n) => {\n  const { push } = useToaster();\n\n  const handlePreview = args.withPreview\n    ? (url: FileItemProps['url']) => push({ content: `Previewed ${url}` })\n    : undefined;\n\n  const handleDownload = args.withDownload\n    ? (url: FileItemProps['url']) => push({ content: `Downloaded ${url}` })\n    : undefined;\n\n  const imageSrc =\n    'https://www.pega.com/sites/default/files/styles/480/public/media/images/2021-02/pwi-2021-prevcard.jpg';\n\n  return (\n    <FileUploadItem\n      name={args.name}\n      meta={args.meta}\n      error={args.error}\n      progress={args.progress}\n      thumbnail={imageSrc}\n      onPreview={handlePreview}\n      onDownload={handleDownload}\n    />\n  );\n};\n\nFileUploadItemDemo.args = {\n  name: 'Pega World iNspire',\n  meta: 'Some additional information',\n  error: false,\n  progress: 100\n};\n\nFileUploadItemDemo.argTypes = {\n  withValue: { table: { disable: true } },\n  name: { control: { type: 'text' } },\n  meta: { control: { type: 'text' } },\n  error: { control: { type: 'boolean' } },\n  progress: { control: { type: 'number' } }\n};\n"]}

package/lib/core/Form/Form.mocks.d.ts

@@ -5,4 +5,10 @@ export declare const FormContent: ({ cols, heading, description, showActions }:
     heading?: string | undefined;
     description?: string | undefined;
 }) => JSX.Element | null;
+export declare const ReadOnlyFormContent: ({ cols, heading, description, showActions }: {
+    cols: number;
+    showActions: boolean;
+    heading?: string | undefined;
+    description?: string | undefined;
+}) => JSX.Element | null;
 //# sourceMappingURL=Form.mocks.d.ts.map

package/lib/core/Form/Form.mocks.d.ts.map

@@ -1 +1 @@
-{"version":3,"file":"Form.mocks.d.ts","sourceRoot":"","sources":["../../../src/core/Form/Form.mocks.tsx"],"names":[],"mappings":";AAgGA,eAAO,MAAM,WAAW;UAMhB,MAAM;iBACC,OAAO;;;wBA8IrB,CAAC"}
+{"version":3,"file":"Form.mocks.d.ts","sourceRoot":"","sources":["../../../src/core/Form/Form.mocks.tsx"],"names":[],"mappings":";AAkGA,eAAO,MAAM,WAAW;UAMhB,MAAM;iBACC,OAAO;;;wBA+IrB,CAAC;AAEF,eAAO,MAAM,mBAAmB;UAMxB,MAAM;iBACC,OAAO;;;wBAoHrB,CAAC"}

package/lib/core/Form/Form.mocks.js

@@ -1,6 +1,6 @@
 import { jsx as _jsx, Fragment as _Fragment, jsxs as _jsxs } from "react/jsx-runtime";
-import { useReducer, useRef, useContext } from 'react';
-import { Button, Checkbox, CheckboxGroup, Form, Grid, Input, RadioButton, RadioButtonGroup, Select, Option, TextArea, ToasterContext } from '@pega/cosmos-react-core';
+import { useReducer, useRef, useState, useEffect } from 'react';
+import { Button, Checkbox, CheckboxGroup, Form, Grid, Input, RadioButton, RadioButtonGroup, Select, Option, TextArea, useToaster, usePrevious } from '@pega/cosmos-react-core';
 import { Editor as RichTextEditor } from '@pega/cosmos-react-rte';
 import { FileInputDemo } from '../File/FileInput.stories';
 import { FilterableSingleSelect as ComboboxFilterableStory } from '../ComboBox/ComboBox.stories';
@@ -66,7 +66,7 @@ const fieldReducer = (fields, { target, type }) => {
 export const FormContent = ({ cols, heading, description, showActions }) => {
     const editorRef = useRef(null);
     const [fields, setField] = useReducer(fieldReducer, undefined, initFields);
-    const { push } = useContext(ToasterContext);
+    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');
@@ -83,7 +83,7 @@ export const FormContent = ({ cols, heading, description, showActions }) => {
     return (_jsx(Form, { actions: showActions ? actions : undefined, description: description, heading: heading, onSubmit: (e) => {
             e.preventDefault();
             push({ content: 'Form submitted!' });
-        }, style: { margin: 'auto', maxWidth: '37.5rem' }, children: _jsxs(Grid, { container: { gap: 1, cols: `repeat(${cols}, minmax(0, 1fr))` }, 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 }), autoComplete: 'off' }), _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 }), autoComplete: 'off' }), _jsx(Grid, { item: { colStartEnd: '1/-1' }, children: _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(Grid, { item: { colStartEnd: '1/-1' }, children: _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\u2026" }), _jsx(Option, { children: "Pizza" }), _jsx(Option, { children: "Sandwich" }), _jsx(Option, { children: "Salad" })] }), _jsx(Grid, { item: { colStartEnd: '1/-1' }, children: _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(Grid, { item: { colStartEnd: '1/-1' }, children: _jsx(RichTextEditor, { label: 'Detailed meeting notes', info: 'The rich text editor can be used in forms, comments, and documents', toolbar: [
+        }, style: { margin: 'auto', maxWidth: '37.5rem' }, children: _jsxs(Grid, { container: { gap: 1, cols: `repeat(${cols}, minmax(0, 1fr))` }, children: [_jsx(Input, { name: 'name', label: 'Name', value: name.value, required: false, status: name.status, info: 'some help text here', onChange: (e) => setField({ ...e }), onBlur: (e) => setField({ ...e }), autoComplete: 'off' }), _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 }), autoComplete: 'off' }), _jsx(Grid, { item: { colStartEnd: '1/-1' }, children: _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(Grid, { item: { colStartEnd: '1/-1' }, children: _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\u2026" }), _jsx(Option, { children: "Pizza" }), _jsx(Option, { children: "Sandwich" }), _jsx(Option, { children: "Salad" })] }), _jsx(Grid, { item: { colStartEnd: '1/-1' }, children: _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(Grid, { item: { colStartEnd: '1/-1' }, children: _jsx(RichTextEditor, { label: 'Detailed meeting notes', info: 'The rich text editor can be used in forms, comments, and documents', toolbar: [
                             'inline-styling',
                             'headers',
                             'tables',
@@ -92,6 +92,29 @@ export const FormContent = ({ cols, heading, description, showActions }) => {
                             'lists',
                             'cut-copy-paste',
                             'indentation'
-                        ], onImageAdded: onImageAdded, ref: editorRef }) }), _jsx(Grid, { item: { colStartEnd: '1/-1' }, children: _jsx(FileInputDemo, {}) }), _jsx(ComboboxFilterableStory, {})] }) }));
+                        ], onImageAdded: onImageAdded, ref: editorRef }) }), _jsx(Grid, { item: { colStartEnd: '1/-1' }, children: _jsx(FileInputDemo, { label: 'Meeting attachments' }) }), _jsx(ComboboxFilterableStory, { label: 'Select a user' })] }) }));
+};
+export const ReadOnlyFormContent = ({ cols, heading, description, showActions }) => {
+    const [value, setValue] = useState({ start: 1, end: '3' });
+    const prev = usePrevious(value);
+    useEffect(() => {
+        if (prev !== value)
+            setValue(value);
+    }, [prev, value]);
+    const [fields] = 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" })] }));
+    return (_jsx(Form, { actions: showActions ? actions : undefined, description: description, heading: heading, onSubmit: (e) => {
+            e.preventDefault();
+            push({ content: 'Form submitted!' });
+        }, style: { margin: 'auto', maxWidth: '37.5rem' }, children: _jsxs(Grid, { container: { gap: 1, cols: `repeat(${cols}, minmax(0, 1fr))` }, children: [_jsx(Input, { readOnly: true, name: 'name', label: 'Name', value: 'Test', required: false, status: name.status, autoComplete: 'off' }), _jsx(Grid, { item: { colStartEnd: '1/-1' }, children: _jsxs(CheckboxGroup, { name: 'places visited', label: 'Places you have worked', readOnly: true, children: [_jsx(Checkbox, { label: 'Cambridge' }, 'Cambridge'), _jsx(Checkbox, { label: 'Krakow' }, 'Krakow'), _jsx(Checkbox, { label: 'Hyderabad' }, 'Hyderabad'), _jsx(Checkbox, { label: 'Bangalore' }, 'Bangalore')] }) }), _jsx(Grid, { item: { colStartEnd: '1/-1' }, children: _jsxs(RadioButtonGroup, { name: 'meetings', label: 'Do you really enjoy early morning meetings?', children: [_jsx(RadioButton, { label: 'Yes' }, 'Yes'), _jsx(RadioButton, { label: "No.. no I don't", readOnly: true }, "No.. no I don't")] }) }), _jsx(Grid, { item: { colStartEnd: '1/-1' }, children: _jsxs(CheckboxGroup, { name: 'more places visited', label: 'More Places you have worked', children: [_jsx(Checkbox, { label: 'Cambridge', readOnly: true }, 'Cambridge'), _jsx(Checkbox, { label: 'Krakow' }, 'Krakow'), _jsx(Checkbox, { label: 'Hyderabad' }, 'Hyderabad'), _jsx(Checkbox, { label: 'Bangalore' }, 'Bangalore')] }) }), _jsx(Grid, { item: { colStartEnd: '1/-1' }, children: _jsxs(RadioButtonGroup, { name: 'meetings', label: 'Do you enjoy early morning meetings?', readOnly: true, allReadOnly: true, children: [_jsx(RadioButton, { label: 'Yes' }, 'Yes'), _jsx(RadioButton, { label: "No.. no I don't" }, "No.. no I don't")] }) }), _jsxs(Select, { label: 'What would you like to eat?', info: '', readOnly: true, children: [_jsx(Option, { children: "choose meal\u2026" }), _jsx(Option, { selected: true, children: "Pizza" }), _jsx(Option, { children: "Sandwich" }), _jsx(Option, { children: "Salad" })] }), _jsx(Grid, { item: { colStartEnd: '1/-1' }, children: _jsx(TextArea, { readOnly: true, name: 'notes', required: false, label: 'Meeting notes', status: notes.status, info: notes.info || notes.help, value: 'Test copy' }) })] }) }));
 };
 //# sourceMappingURL=Form.mocks.js.map