@pega/cosmos-react-demos 4.0.0-dev.2.0 → 4.0.0-dev.21.0

package/jsx/core/ExpandCollapse/ExpandCollapse.stories.jsx.map

@@ -1 +1 @@
-{"version":3,"file":"ExpandCollapse.stories.jsx","sourceRoot":"","sources":["../../../src/core/ExpandCollapse/ExpandCollapse.stories.tsx"],"names":[],"mappings":"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","sourcesContent":["import { Meta, Story } from '@storybook/react';\nimport { useState } from 'react';\n\nimport { Button, ExpandCollapse, ExpandCollapseProps, Flex, Text } from '@pega/cosmos-react-core';\n\nimport { StyledRegion } from './ExpandCollapse.styles';\n\nexport default {\n  title: 'Core/ExpandCollapse',\n  component: ExpandCollapse,\n  args: {\n    min: '',\n    max: '',\n    transitionSpeed: '0.25s'\n  },\n  argTypes: {\n    min: { control: { type: 'text' } },\n    max: { control: { type: 'text' } },\n    transitionSpeed: { control: { type: 'text' } }\n  }\n} as Meta;\n\nexport const VerticalExpandCollapse: Story<ExpandCollapseProps> = (args: ExpandCollapseProps) => {\n  const [collapsed, setCollapsed] = useState(true);\n\n  return (\n    <Flex container={{ direction: 'column' }}>\n      <StyledRegion>\n        <Button onClick={() => setCollapsed(curState => !curState)}>\n          {collapsed ? 'Expand' : 'Collapse '}\n        </Button>\n      </StyledRegion>\n\n      <ExpandCollapse\n        dimension='height'\n        collapsed={collapsed}\n        min={args.min}\n        max={args.max}\n        transitionSpeed={args.transitionSpeed}\n        nullWhenCollapsed\n      >\n        <StyledRegion innerRegion>\n          <Text>\n            Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor\n            incididunt ut ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud\n            exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat. Duis aute irure\n            dolor in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur.\n            Excepteur sint occaecat cupidatat non proident, sunt in culpa qui officia deserunt\n            mollit anim id est laborum.\n          </Text>\n        </StyledRegion>\n      </ExpandCollapse>\n\n      <StyledRegion>\n        <Text>This content is outside of the ExpandCollapse and so it will always be visible.</Text>\n      </StyledRegion>\n    </Flex>\n  );\n};\n\nexport const HorizontalExpandCollapse: Story<ExpandCollapseProps> = (args: ExpandCollapseProps) => {\n  const [collapsed, setCollapsed] = useState(true);\n  const [showText, setShowText] = useState(false);\n\n  return (\n    <Flex container>\n      <StyledRegion>\n        <Button onClick={() => setCollapsed(curState => !curState)}>\n          {collapsed ? 'Expand' : 'Collapse '}\n        </Button>\n      </StyledRegion>\n\n      <ExpandCollapse\n        dimension='width'\n        collapsed={collapsed}\n        min={args.min}\n        max={args.max}\n        transitionSpeed={args.transitionSpeed}\n        nullWhenCollapsed\n        onAfterExpand={() => setShowText(true)}\n        onBeforeCollapse={() => setShowText(false)}\n      >\n        <StyledRegion innerRegion>\n          {showText && (\n            <Text>\n              Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor\n              incididunt ut ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud\n              exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat. Duis aute irure\n              dolor in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur.\n              Excepteur sint occaecat cupidatat non proident, sunt in culpa qui officia deserunt\n              mollit anim id est laborum.\n            </Text>\n          )}\n        </StyledRegion>\n      </ExpandCollapse>\n\n      <StyledRegion>\n        <Text>This content is outside of the ExpandCollapse and so it will always be visible.</Text>\n      </StyledRegion>\n    </Flex>\n  );\n};\n"]}
+{"version":3,"file":"ExpandCollapse.stories.jsx","sourceRoot":"","sources":["../../../src/core/ExpandCollapse/ExpandCollapse.stories.tsx"],"names":[],"mappings":"AACA,OAAO,EAAE,QAAQ,EAAE,MAAM,OAAO,CAAC;AAEjC,OAAO,EAAE,MAAM,EAAE,cAAc,EAAE,IAAI,EAAE,IAAI,EAAE,MAAM,yBAAyB,CAAC;AAG7E,OAAO,EAAE,YAAY,EAAE,MAAM,yBAAyB,CAAC;AAEvD,eAAe;IACb,KAAK,EAAE,qBAAqB;IAC5B,SAAS,EAAE,cAAc;IACzB,IAAI,EAAE;QACJ,GAAG,EAAE,EAAE;QACP,GAAG,EAAE,EAAE;QACP,eAAe,EAAE,OAAO;KACzB;IACD,QAAQ,EAAE;QACR,GAAG,EAAE,EAAE,OAAO,EAAE,EAAE,IAAI,EAAE,MAAM,EAAE,EAAE;QAClC,GAAG,EAAE,EAAE,OAAO,EAAE,EAAE,IAAI,EAAE,MAAM,EAAE,EAAE;QAClC,eAAe,EAAE,EAAE,OAAO,EAAE,EAAE,IAAI,EAAE,MAAM,EAAE,EAAE;KAC/C;CACM,CAAC;AAEV,MAAM,CAAC,MAAM,sBAAsB,GAAiC,CAAC,IAAyB,EAAE,EAAE;IAChG,MAAM,CAAC,SAAS,EAAE,YAAY,CAAC,GAAG,QAAQ,CAAC,IAAI,CAAC,CAAC;IAEjD,OAAO,CACL,CAAC,IAAI,CAAC,SAAS,CAAC,CAAC,EAAE,SAAS,EAAE,QAAQ,EAAE,CAAC,CACvC;MAAA,CAAC,YAAY,CACX;QAAA,CAAC,MAAM,CAAC,OAAO,CAAC,CAAC,GAAG,EAAE,CAAC,YAAY,CAAC,QAAQ,CAAC,EAAE,CAAC,CAAC,QAAQ,CAAC,CAAC,CACzD;UAAA,CAAC,SAAS,CAAC,CAAC,CAAC,QAAQ,CAAC,CAAC,CAAC,WAAW,CACrC;QAAA,EAAE,MAAM,CACV;MAAA,EAAE,YAAY,CAEd;;MAAA,CAAC,cAAc,CACb,SAAS,CAAC,QAAQ,CAClB,SAAS,CAAC,CAAC,SAAS,CAAC,CACrB,GAAG,CAAC,CAAC,IAAI,CAAC,GAAG,CAAC,CACd,GAAG,CAAC,CAAC,IAAI,CAAC,GAAG,CAAC,CACd,eAAe,CAAC,CAAC,IAAI,CAAC,eAAe,CAAC,CACtC,iBAAiB,CAEjB;QAAA,CAAC,YAAY,CAAC,WAAW,CACvB;UAAA,CAAC,IAAI,CACH;;;;;;;UAMF,EAAE,IAAI,CACR;QAAA,EAAE,YAAY,CAChB;MAAA,EAAE,cAAc,CAEhB;;MAAA,CAAC,YAAY,CACX;QAAA,CAAC,IAAI,CAAC,+EAA+E,EAAE,IAAI,CAC7F;MAAA,EAAE,YAAY,CAChB;IAAA,EAAE,IAAI,CAAC,CACR,CAAC;AACJ,CAAC,CAAC;AAEF,MAAM,CAAC,MAAM,wBAAwB,GAAiC,CACpE,IAAyB,EACzB,EAAE;IACF,MAAM,CAAC,SAAS,EAAE,YAAY,CAAC,GAAG,QAAQ,CAAC,IAAI,CAAC,CAAC;IACjD,MAAM,CAAC,QAAQ,EAAE,WAAW,CAAC,GAAG,QAAQ,CAAC,KAAK,CAAC,CAAC;IAEhD,OAAO,CACL,CAAC,IAAI,CAAC,SAAS,CACb;MAAA,CAAC,YAAY,CACX;QAAA,CAAC,MAAM,CAAC,OAAO,CAAC,CAAC,GAAG,EAAE,CAAC,YAAY,CAAC,QAAQ,CAAC,EAAE,CAAC,CAAC,QAAQ,CAAC,CAAC,CACzD;UAAA,CAAC,SAAS,CAAC,CAAC,CAAC,QAAQ,CAAC,CAAC,CAAC,WAAW,CACrC;QAAA,EAAE,MAAM,CACV;MAAA,EAAE,YAAY,CAEd;;MAAA,CAAC,cAAc,CACb,SAAS,CAAC,OAAO,CACjB,SAAS,CAAC,CAAC,SAAS,CAAC,CACrB,GAAG,CAAC,CAAC,IAAI,CAAC,GAAG,CAAC,CACd,GAAG,CAAC,CAAC,IAAI,CAAC,GAAG,CAAC,CACd,eAAe,CAAC,CAAC,IAAI,CAAC,eAAe,CAAC,CACtC,iBAAiB,CACjB,aAAa,CAAC,CAAC,GAAG,EAAE,CAAC,WAAW,CAAC,IAAI,CAAC,CAAC,CACvC,gBAAgB,CAAC,CAAC,GAAG,EAAE,CAAC,WAAW,CAAC,KAAK,CAAC,CAAC,CAE3C;QAAA,CAAC,YAAY,CAAC,WAAW,CACvB;UAAA,CAAC,QAAQ,IAAI,CACX,CAAC,IAAI,CACH;;;;;;;YAMF,EAAE,IAAI,CAAC,CACR,CACH;QAAA,EAAE,YAAY,CAChB;MAAA,EAAE,cAAc,CAEhB;;MAAA,CAAC,YAAY,CACX;QAAA,CAAC,IAAI,CAAC,+EAA+E,EAAE,IAAI,CAC7F;MAAA,EAAE,YAAY,CAChB;IAAA,EAAE,IAAI,CAAC,CACR,CAAC;AACJ,CAAC,CAAC","sourcesContent":["import type { Meta, StoryFn } from '@storybook/react';\nimport { useState } from 'react';\n\nimport { Button, ExpandCollapse, Flex, Text } from '@pega/cosmos-react-core';\nimport type { ExpandCollapseProps } from '@pega/cosmos-react-core';\n\nimport { StyledRegion } from './ExpandCollapse.styles';\n\nexport default {\n  title: 'Core/ExpandCollapse',\n  component: ExpandCollapse,\n  args: {\n    min: '',\n    max: '',\n    transitionSpeed: '0.25s'\n  },\n  argTypes: {\n    min: { control: { type: 'text' } },\n    max: { control: { type: 'text' } },\n    transitionSpeed: { control: { type: 'text' } }\n  }\n} as Meta;\n\nexport const VerticalExpandCollapse: StoryFn<ExpandCollapseProps> = (args: ExpandCollapseProps) => {\n  const [collapsed, setCollapsed] = useState(true);\n\n  return (\n    <Flex container={{ direction: 'column' }}>\n      <StyledRegion>\n        <Button onClick={() => setCollapsed(curState => !curState)}>\n          {collapsed ? 'Expand' : 'Collapse '}\n        </Button>\n      </StyledRegion>\n\n      <ExpandCollapse\n        dimension='height'\n        collapsed={collapsed}\n        min={args.min}\n        max={args.max}\n        transitionSpeed={args.transitionSpeed}\n        nullWhenCollapsed\n      >\n        <StyledRegion innerRegion>\n          <Text>\n            Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor\n            incididunt ut ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud\n            exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat. Duis aute irure\n            dolor in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur.\n            Excepteur sint occaecat cupidatat non proident, sunt in culpa qui officia deserunt\n            mollit anim id est laborum.\n          </Text>\n        </StyledRegion>\n      </ExpandCollapse>\n\n      <StyledRegion>\n        <Text>This content is outside of the ExpandCollapse and so it will always be visible.</Text>\n      </StyledRegion>\n    </Flex>\n  );\n};\n\nexport const HorizontalExpandCollapse: StoryFn<ExpandCollapseProps> = (\n  args: ExpandCollapseProps\n) => {\n  const [collapsed, setCollapsed] = useState(true);\n  const [showText, setShowText] = useState(false);\n\n  return (\n    <Flex container>\n      <StyledRegion>\n        <Button onClick={() => setCollapsed(curState => !curState)}>\n          {collapsed ? 'Expand' : 'Collapse '}\n        </Button>\n      </StyledRegion>\n\n      <ExpandCollapse\n        dimension='width'\n        collapsed={collapsed}\n        min={args.min}\n        max={args.max}\n        transitionSpeed={args.transitionSpeed}\n        nullWhenCollapsed\n        onAfterExpand={() => setShowText(true)}\n        onBeforeCollapse={() => setShowText(false)}\n      >\n        <StyledRegion innerRegion>\n          {showText && (\n            <Text>\n              Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor\n              incididunt ut ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud\n              exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat. Duis aute irure\n              dolor in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur.\n              Excepteur sint occaecat cupidatat non proident, sunt in culpa qui officia deserunt\n              mollit anim id est laborum.\n            </Text>\n          )}\n        </StyledRegion>\n      </ExpandCollapse>\n\n      <StyledRegion>\n        <Text>This content is outside of the ExpandCollapse and so it will always be visible.</Text>\n      </StyledRegion>\n    </Flex>\n  );\n};\n"]}

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

@@ -1,15 +1,20 @@
-import { Meta, Story } from '@storybook/react';
-declare const _default: Meta<import("@storybook/react").Args>;
+import type { StoryFn } from '@storybook/react';
+import type { FieldGroupProps } from '@pega/cosmos-react-core';
+declare const _default: import("@storybook/types").ComponentAnnotations<import("@storybook/react/dist/types-0a347bb9").R, import("@storybook/types").Args>;
 export default _default;
 interface FieldGroupStoryProps {
     firstGroupName?: string;
+    firstGroupHeadingTag?: FieldGroupProps['headingTag'];
+    showfirstGroupHeadingTag?: boolean;
     firstGroupCollapsible?: boolean;
     firstGroupDescription?: string;
     showFirstAdditionalInfo?: boolean;
     secondGroupName?: string;
+    secondGroupHeadingTag?: FieldGroupProps['headingTag'];
+    showsecondGroupHeadingTag?: boolean;
     secondGroupCollapsible?: boolean;
     secondGroupDescription?: string;
     showSecondAdditionalInfo?: boolean;
 }
-export declare const FieldGroupDemo: Story<FieldGroupStoryProps>;
+export declare const FieldGroupDemo: StoryFn<FieldGroupStoryProps>;
 //# sourceMappingURL=FieldGroup.stories.d.ts.map

package/jsx/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,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"}
+{"version":3,"file":"FieldGroup.stories.d.ts","sourceRoot":"","sources":["../../../src/core/FieldGroup/FieldGroup.stories.tsx"],"names":[],"mappings":"AACA,OAAO,KAAK,EAAQ,OAAO,EAAE,MAAM,kBAAkB,CAAC;AAWtD,OAAO,KAAK,EAAE,eAAe,EAAE,MAAM,yBAAyB,CAAC;;AAE/D,wBAGU;AAEV,UAAU,oBAAoB;IAC5B,cAAc,CAAC,EAAE,MAAM,CAAC;IACxB,oBAAoB,CAAC,EAAE,eAAe,CAAC,YAAY,CAAC,CAAC;IACrD,wBAAwB,CAAC,EAAE,OAAO,CAAC;IACnC,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,qBAAqB,CAAC,EAAE,eAAe,CAAC,YAAY,CAAC,CAAC;IACtD,yBAAyB,CAAC,EAAE,OAAO,CAAC;IACpC,sBAAsB,CAAC,EAAE,OAAO,CAAC;IACjC,sBAAsB,CAAC,EAAE,MAAM,CAAC;IAChC,wBAAwB,CAAC,EAAE,OAAO,CAAC;CACpC;AAED,eAAO,MAAM,cAAc,EAAE,OAAO,CAAC,oBAAoB,CAuExD,CAAC"}

package/jsx/core/FieldGroup/FieldGroup.stories.jsx

@@ -1,11 +1,18 @@
+import { useState } from 'react';
 import { DateInput, FieldGroup, Grid, Input, Select, Option, TextArea } from '@pega/cosmos-react-core';
 export default {
     title: 'Core/FieldGroup',
     component: FieldGroup
 };
 export const FieldGroupDemo = (args) => {
-    return (<Grid container={{ rowGap: 1 }}>
-      <FieldGroup name={args.firstGroupName} description={args.firstGroupDescription} collapsible={args.firstGroupCollapsible} additionalInfo={args.showFirstAdditionalInfo
+    const [firstGroupCollapsed, setFirstGroupCollapsed] = useState(false);
+    const [secondGroupCollapsed, setSecondGroupCollapsed] = useState(false);
+    return (<Grid container={{ rowGap: 2 }}>
+      <FieldGroup name={args.firstGroupName} headingTag={args.showfirstGroupHeadingTag ? args.firstGroupHeadingTag : undefined} description={args.firstGroupDescription} collapsed={args.firstGroupCollapsible ? firstGroupCollapsed : undefined} onToggleCollapsed={args.firstGroupCollapsible
+            ? () => {
+                setFirstGroupCollapsed(state => !state);
+            }
+            : undefined} additionalInfo={args.showFirstAdditionalInfo
             ? { heading: 'Additional Info', content: 'This is a field group' }
             : undefined}>
         <Grid container={{ gap: 1, cols: 'repeat(auto-fit, minmax(min(40ch, 100%), 1fr))' }}>
@@ -22,7 +29,11 @@ export const FieldGroupDemo = (args) => {
           <Input disabled type='text' label='Disabled 1'/>
         </Grid>
       </FieldGroup>
-      <FieldGroup name={args.secondGroupName} description={args.secondGroupDescription} collapsible={args.secondGroupCollapsible} additionalInfo={args.showSecondAdditionalInfo
+      <FieldGroup name={args.secondGroupName} headingTag={args.showsecondGroupHeadingTag ? args.secondGroupHeadingTag : undefined} description={args.secondGroupDescription} collapsed={args.secondGroupCollapsible ? secondGroupCollapsed : undefined} onToggleCollapsed={args.secondGroupCollapsible
+            ? () => {
+                setSecondGroupCollapsed(state => !state);
+            }
+            : undefined} additionalInfo={args.showSecondAdditionalInfo
             ? { heading: 'Additional Info', content: 'This is another field group' }
             : undefined}>
         <Grid container={{ gap: 1, cols: 'repeat(auto-fill, minmax(min(40ch, 100%), 1fr))' }}>
@@ -43,20 +54,34 @@ export const FieldGroupDemo = (args) => {
 };
 FieldGroupDemo.args = {
     firstGroupName: 'Field group 1',
+    firstGroupHeadingTag: undefined,
+    showfirstGroupHeadingTag: true,
     firstGroupCollapsible: true,
     firstGroupDescription: '',
     showFirstAdditionalInfo: true,
     secondGroupName: 'Field group 2',
+    secondGroupHeadingTag: undefined,
+    showsecondGroupHeadingTag: true,
     secondGroupCollapsible: true,
     secondGroupDescription: '',
     showSecondAdditionalInfo: true
 };
 FieldGroupDemo.argTypes = {
     firstGroupName: { control: { type: 'text' } },
+    firstGroupHeadingTag: {
+        options: ['h1', 'h2', 'h3', 'h4', 'h5', 'h6'],
+        control: { type: 'select' }
+    },
+    showfirstGroupHeadingTag: { control: { type: 'boolean' } },
     firstGroupCollapsible: { control: { type: 'boolean' } },
     firstGroupDescription: { control: { type: 'text' } },
     showFirstAdditionalInfo: { control: { type: 'boolean' } },
     secondGroupName: { control: { type: 'text' } },
+    secondGroupHeadingTag: {
+        options: ['h1', 'h2', 'h3', 'h4', 'h5', 'h6'],
+        control: { type: 'select' }
+    },
+    showsecondGroupHeadingTag: { control: { type: 'boolean' } },
     secondGroupCollapsible: { control: { type: 'boolean' } },
     secondGroupDescription: { control: { type: 'text' } },
     showSecondAdditionalInfo: { control: { type: 'boolean' } }

package/jsx/core/FieldGroup/FieldGroup.stories.jsx.map

@@ -1 +1 @@
-{"version":3,"file":"FieldGroup.stories.jsx","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"]}
+{"version":3,"file":"FieldGroup.stories.jsx","sourceRoot":"","sources":["../../../src/core/FieldGroup/FieldGroup.stories.tsx"],"names":[],"mappings":"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","sourcesContent":["import { useState } from 'react';\nimport type { Meta, StoryFn } 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';\nimport type { FieldGroupProps } 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  firstGroupHeadingTag?: FieldGroupProps['headingTag'];\n  showfirstGroupHeadingTag?: boolean;\n  firstGroupCollapsible?: boolean;\n  firstGroupDescription?: string;\n  showFirstAdditionalInfo?: boolean;\n  secondGroupName?: string;\n  secondGroupHeadingTag?: FieldGroupProps['headingTag'];\n  showsecondGroupHeadingTag?: boolean;\n  secondGroupCollapsible?: boolean;\n  secondGroupDescription?: string;\n  showSecondAdditionalInfo?: boolean;\n}\n\nexport const FieldGroupDemo: StoryFn<FieldGroupStoryProps> = (args: FieldGroupStoryProps) => {\n  const [firstGroupCollapsed, setFirstGroupCollapsed] = useState(false);\n  const [secondGroupCollapsed, setSecondGroupCollapsed] = useState(false);\n  return (\n    <Grid container={{ rowGap: 2 }}>\n      <FieldGroup\n        name={args.firstGroupName}\n        headingTag={args.showfirstGroupHeadingTag ? args.firstGroupHeadingTag : undefined}\n        description={args.firstGroupDescription}\n        collapsed={args.firstGroupCollapsible ? firstGroupCollapsed : undefined}\n        onToggleCollapsed={\n          args.firstGroupCollapsible\n            ? () => {\n                setFirstGroupCollapsed(state => !state);\n              }\n            : undefined\n        }\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        headingTag={args.showsecondGroupHeadingTag ? args.secondGroupHeadingTag : undefined}\n        description={args.secondGroupDescription}\n        collapsed={args.secondGroupCollapsible ? secondGroupCollapsed : undefined}\n        onToggleCollapsed={\n          args.secondGroupCollapsible\n            ? () => {\n                setSecondGroupCollapsed(state => !state);\n              }\n            : undefined\n        }\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  firstGroupHeadingTag: undefined,\n  showfirstGroupHeadingTag: true,\n  firstGroupCollapsible: true,\n  firstGroupDescription: '',\n  showFirstAdditionalInfo: true,\n  secondGroupName: 'Field group 2',\n  secondGroupHeadingTag: undefined,\n  showsecondGroupHeadingTag: true,\n  secondGroupCollapsible: true,\n  secondGroupDescription: '',\n  showSecondAdditionalInfo: true\n};\n\nFieldGroupDemo.argTypes = {\n  firstGroupName: { control: { type: 'text' } },\n  firstGroupHeadingTag: {\n    options: ['h1', 'h2', 'h3', 'h4', 'h5', 'h6'],\n    control: { type: 'select' }\n  },\n  showfirstGroupHeadingTag: { control: { type: 'boolean' } },\n  firstGroupCollapsible: { control: { type: 'boolean' } },\n  firstGroupDescription: { control: { type: 'text' } },\n  showFirstAdditionalInfo: { control: { type: 'boolean' } },\n  secondGroupName: { control: { type: 'text' } },\n  secondGroupHeadingTag: {\n    options: ['h1', 'h2', 'h3', 'h4', 'h5', 'h6'],\n    control: { type: 'select' }\n  },\n  showsecondGroupHeadingTag: { control: { type: 'boolean' } },\n  secondGroupCollapsible: { control: { type: 'boolean' } },\n  secondGroupDescription: { control: { type: 'text' } },\n  showSecondAdditionalInfo: { control: { type: 'boolean' } }\n};\n"]}

package/jsx/core/FieldGroup/FieldGroupList.mocks.d.ts

@@ -1,6 +1,6 @@
 /// <reference types="react" />
 import { FieldGroupListItemProps } from '@pega/cosmos-react-core';
-declare type FieldGroupReducerPayload = {
+type FieldGroupReducerPayload = {
     action: 'add';
 } | {
     action: 'delete';

package/jsx/core/FieldGroup/FieldGroupList.mocks.d.ts.map

@@ -1 +1 @@
-{"version":3,"file":"FieldGroupList.mocks.d.ts","sourceRoot":"","sources":["../../../src/core/FieldGroup/FieldGroupList.mocks.tsx"],"names":[],"mappings":";AAAA,OAAO,EAGL,uBAAuB,EAMxB,MAAM,yBAAyB,CAAC;AAEjC,aAAK,wBAAwB,GACzB;IACE,MAAM,EAAE,KAAK,CAAC;CACf,GACD;IACE,MAAM,EAAE,QAAQ,CAAC;IACjB,EAAE,EAAE,MAAM,CAAC;CACZ,CAAC;AAEN,MAAM,WAAW,SAAS;IACxB,KAAK,EAAE,MAAM,CAAC;IACd,IAAI,EAAE,MAAM,GAAG,MAAM,GAAG,MAAM,GAAG,QAAQ,GAAG,UAAU,CAAC;CACxD;AAED,MAAM,WAAW,SAAS;IACxB,KAAK,EAAE,MAAM,CAAC;IACd,MAAM,EAAE,SAAS,EAAE,CAAC;CACrB;AAED,eAAO,MAAM,iBAAiB,cAChB,SAAS,yBAAyB,SAAS,KAAK,WAAW,GAAG,IAAI,aAErE,uBAAuB,EAAE,WACvB,wBAAwB,KAChC,uBAAuB,EAoBzB,CAAC;AAEJ,eAAO,MAAM,iBAAiB,oBAAqB,SAAS,uBAM3D,CAAC;AAEF,eAAO,MAAM,aAAa,EAAE,SAQ3B,CAAC;AAEF,eAAO,MAAM,qBAAqB,oBAAqB,SAAS,uBAmC/D,CAAC;AAEF,eAAO,MAAM,iBAAiB,EAAE,SAQ/B,CAAC;AAEF,eAAO,MAAM,sBAAsB,oBAAqB,SAAS,uBAoBhE,CAAC;AAEF,eAAO,MAAM,kBAAkB,EAAE,SAOhC,CAAC"}
+{"version":3,"file":"FieldGroupList.mocks.d.ts","sourceRoot":"","sources":["../../../src/core/FieldGroup/FieldGroupList.mocks.tsx"],"names":[],"mappings":";AAAA,OAAO,EAGL,uBAAuB,EAMxB,MAAM,yBAAyB,CAAC;AAEjC,KAAK,wBAAwB,GACzB;IACE,MAAM,EAAE,KAAK,CAAC;CACf,GACD;IACE,MAAM,EAAE,QAAQ,CAAC;IACjB,EAAE,EAAE,MAAM,CAAC;CACZ,CAAC;AAEN,MAAM,WAAW,SAAS;IACxB,KAAK,EAAE,MAAM,CAAC;IACd,IAAI,EAAE,MAAM,GAAG,MAAM,GAAG,MAAM,GAAG,QAAQ,GAAG,UAAU,CAAC;CACxD;AAED,MAAM,WAAW,SAAS;IACxB,KAAK,EAAE,MAAM,CAAC;IACd,MAAM,EAAE,SAAS,EAAE,CAAC;CACrB;AAED,eAAO,MAAM,iBAAiB,cAChB,SAAS,yBAAyB,SAAS,KAAK,WAAW,GAAG,IAAI,aAErE,uBAAuB,EAAE,WACvB,wBAAwB,KAChC,uBAAuB,EAyBzB,CAAC;AAEJ,eAAO,MAAM,iBAAiB,oBAAqB,SAAS,uBAM3D,CAAC;AAEF,eAAO,MAAM,aAAa,EAAE,SAQ3B,CAAC;AAEF,eAAO,MAAM,qBAAqB,oBAAqB,SAAS,uBAmC/D,CAAC;AAEF,eAAO,MAAM,iBAAiB,EAAE,SAQ/B,CAAC;AAEF,eAAO,MAAM,sBAAsB,oBAAqB,SAAS,uBAoBhE,CAAC;AAEF,eAAO,MAAM,kBAAkB,EAAE,SAOhC,CAAC"}

package/jsx/core/FieldGroup/FieldGroupList.mocks.jsx

@@ -6,6 +6,7 @@ export const fieldGroupReducer = (groupMeta, FieldRenderer) => (items, payload)
                 ...items,
                 {
                     name: `${groupMeta.label} ${items.length + 1}`,
+                    headingTag: 'h3',
                     id: createUID(),
                     children: groupMeta.fields.map(props => <FieldRenderer {...props} key={props.label}/>)
                 }
@@ -13,7 +14,11 @@ export const fieldGroupReducer = (groupMeta, FieldRenderer) => (items, payload)
         case 'delete':
             return items
                 .filter(group => group.id !== payload.id)
-                .map((group, i) => ({ ...group, name: `${groupMeta.label} ${i + 1}` }));
+                .map((group, i) => ({
+                ...group,
+                name: `${groupMeta.label} ${i + 1}`,
+                headingTag: 'h3'
+            }));
         default:
             return items;
     }

package/jsx/core/FieldGroup/FieldGroupList.mocks.jsx.map

@@ -1 +1 @@
-{"version":3,"file":"FieldGroupList.mocks.jsx","sourceRoot":"","sources":["../../../src/core/FieldGroup/FieldGroupList.mocks.tsx"],"names":[],"mappings":"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","sourcesContent":["import {\n  createUID,\n  DateInput,\n  FieldGroupListItemProps,\n  FileInput,\n  Input,\n  Option,\n  Select,\n  TextArea\n} from '@pega/cosmos-react-core';\n\ntype FieldGroupReducerPayload =\n  | {\n      action: 'add';\n    }\n  | {\n      action: 'delete';\n      id: string;\n    };\n\nexport interface FieldMeta {\n  label: string;\n  type: 'text' | 'date' | 'file' | 'select' | 'textarea';\n}\n\nexport interface GroupMeta {\n  label: string;\n  fields: FieldMeta[];\n}\n\nexport const fieldGroupReducer =\n  (groupMeta: GroupMeta, FieldRenderer: (props: FieldMeta) => JSX.Element | null) =>\n  (\n    items: FieldGroupListItemProps[],\n    payload: FieldGroupReducerPayload\n  ): FieldGroupListItemProps[] => {\n    switch (payload.action) {\n      case 'add':\n        return [\n          ...items,\n          {\n            name: `${groupMeta.label} ${items.length + 1}`,\n            id: createUID(),\n            children: groupMeta.fields.map(props => <FieldRenderer {...props} key={props.label} />)\n          }\n        ];\n\n      case 'delete':\n        return items\n          .filter(group => group.id !== payload.id)\n          .map((group, i) => ({ ...group, name: `${groupMeta.label} ${i + 1}` }));\n\n      default:\n        return items;\n    }\n  };\n\nexport const DemoFieldRenderer = ({ label, type }: FieldMeta) => {\n  if (type === 'text') {\n    return <Input label={label} key={label} />;\n  }\n\n  return null;\n};\n\nexport const demoGroupMeta: GroupMeta = {\n  label: 'Applicant',\n  fields: [\n    {\n      type: 'text',\n      label: 'Applicant name'\n    }\n  ]\n};\n\nexport const ExpensesFieldRenderer = ({ label, type }: FieldMeta) => {\n  if (type === 'text') {\n    return <Input label={label} />;\n  }\n  if (type === 'select') {\n    return (\n      <Select label={label}>\n        <Option>Select</Option>\n        <Option>Advertising</Option>\n        <Option>Car and truck expenses</Option>\n        <Option>Commissions and fees</Option>\n        <Option>Contract labor</Option>\n        <Option>Legal and professional services</Option>\n        <Option>Office expense</Option>\n        <Option>Rent or lease</Option>\n        <Option>Vehicles, machinery, and equipment</Option>\n        <Option>Repairs and maintenance</Option>\n        <Option>Travel and meals</Option>\n        <Option>Deductible meals</Option>\n        <Option>Utilities</Option>\n        <Option>Other</Option>\n      </Select>\n    );\n  }\n  if (type === 'file') {\n    return <FileInput label={label} multiple />;\n  }\n  if (type === 'textarea') {\n    return <TextArea label={label} />;\n  }\n  if (type === 'date') {\n    return <DateInput label={label} />;\n  }\n\n  return null;\n};\n\nexport const expensesGroupMeta: GroupMeta = {\n  label: 'Expense',\n  fields: [\n    { type: 'select', label: 'Type of expense' },\n    { type: 'date', label: 'Date of expense' },\n    { type: 'file', label: 'Receipts' },\n    { type: 'textarea', label: 'Notes' }\n  ]\n};\n\nexport const InsuranceFieldRenderer = ({ label, type }: FieldMeta) => {\n  if (type === 'text') {\n    return <Input label={label} />;\n  }\n  if (type === 'select') {\n    return (\n      <Select label={label}>\n        <Option>Select</Option>\n        <Option>Mother</Option>\n        <Option>Father</Option>\n        <Option>Guardian</Option>\n        <Option>Child</Option>\n        <Option>Spouse</Option>\n        <Option>Sibling</Option>\n        <Option>Other</Option>\n      </Select>\n    );\n  }\n\n  return null;\n};\n\nexport const insuranceGroupMeta: GroupMeta = {\n  label: 'Entry',\n  fields: [\n    { type: 'text', label: 'First name' },\n    { type: 'text', label: 'Last name' },\n    { type: 'select', label: 'Relationship' }\n  ]\n};\n"]}
+{"version":3,"file":"FieldGroupList.mocks.jsx","sourceRoot":"","sources":["../../../src/core/FieldGroup/FieldGroupList.mocks.tsx"],"names":[],"mappings":"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","sourcesContent":["import {\n  createUID,\n  DateInput,\n  FieldGroupListItemProps,\n  FileInput,\n  Input,\n  Option,\n  Select,\n  TextArea\n} from '@pega/cosmos-react-core';\n\ntype FieldGroupReducerPayload =\n  | {\n      action: 'add';\n    }\n  | {\n      action: 'delete';\n      id: string;\n    };\n\nexport interface FieldMeta {\n  label: string;\n  type: 'text' | 'date' | 'file' | 'select' | 'textarea';\n}\n\nexport interface GroupMeta {\n  label: string;\n  fields: FieldMeta[];\n}\n\nexport const fieldGroupReducer =\n  (groupMeta: GroupMeta, FieldRenderer: (props: FieldMeta) => JSX.Element | null) =>\n  (\n    items: FieldGroupListItemProps[],\n    payload: FieldGroupReducerPayload\n  ): FieldGroupListItemProps[] => {\n    switch (payload.action) {\n      case 'add':\n        return [\n          ...items,\n          {\n            name: `${groupMeta.label} ${items.length + 1}`,\n            headingTag: 'h3',\n            id: createUID(),\n            children: groupMeta.fields.map(props => <FieldRenderer {...props} key={props.label} />)\n          }\n        ];\n\n      case 'delete':\n        return items\n          .filter(group => group.id !== payload.id)\n          .map((group, i) => ({\n            ...group,\n            name: `${groupMeta.label} ${i + 1}`,\n            headingTag: 'h3'\n          }));\n\n      default:\n        return items;\n    }\n  };\n\nexport const DemoFieldRenderer = ({ label, type }: FieldMeta) => {\n  if (type === 'text') {\n    return <Input label={label} key={label} />;\n  }\n\n  return null;\n};\n\nexport const demoGroupMeta: GroupMeta = {\n  label: 'Applicant',\n  fields: [\n    {\n      type: 'text',\n      label: 'Applicant name'\n    }\n  ]\n};\n\nexport const ExpensesFieldRenderer = ({ label, type }: FieldMeta) => {\n  if (type === 'text') {\n    return <Input label={label} />;\n  }\n  if (type === 'select') {\n    return (\n      <Select label={label}>\n        <Option>Select</Option>\n        <Option>Advertising</Option>\n        <Option>Car and truck expenses</Option>\n        <Option>Commissions and fees</Option>\n        <Option>Contract labor</Option>\n        <Option>Legal and professional services</Option>\n        <Option>Office expense</Option>\n        <Option>Rent or lease</Option>\n        <Option>Vehicles, machinery, and equipment</Option>\n        <Option>Repairs and maintenance</Option>\n        <Option>Travel and meals</Option>\n        <Option>Deductible meals</Option>\n        <Option>Utilities</Option>\n        <Option>Other</Option>\n      </Select>\n    );\n  }\n  if (type === 'file') {\n    return <FileInput label={label} multiple />;\n  }\n  if (type === 'textarea') {\n    return <TextArea label={label} />;\n  }\n  if (type === 'date') {\n    return <DateInput label={label} />;\n  }\n\n  return null;\n};\n\nexport const expensesGroupMeta: GroupMeta = {\n  label: 'Expense',\n  fields: [\n    { type: 'select', label: 'Type of expense' },\n    { type: 'date', label: 'Date of expense' },\n    { type: 'file', label: 'Receipts' },\n    { type: 'textarea', label: 'Notes' }\n  ]\n};\n\nexport const InsuranceFieldRenderer = ({ label, type }: FieldMeta) => {\n  if (type === 'text') {\n    return <Input label={label} />;\n  }\n  if (type === 'select') {\n    return (\n      <Select label={label}>\n        <Option>Select</Option>\n        <Option>Mother</Option>\n        <Option>Father</Option>\n        <Option>Guardian</Option>\n        <Option>Child</Option>\n        <Option>Spouse</Option>\n        <Option>Sibling</Option>\n        <Option>Other</Option>\n      </Select>\n    );\n  }\n\n  return null;\n};\n\nexport const insuranceGroupMeta: GroupMeta = {\n  label: 'Entry',\n  fields: [\n    { type: 'text', label: 'First name' },\n    { type: 'text', label: 'Last name' },\n    { type: 'select', label: 'Relationship' }\n  ]\n};\n"]}

package/jsx/core/FieldGroup/FieldGroupList.stories.d.ts

@@ -1,11 +1,12 @@
-import { Meta, Story } from '@storybook/react';
-declare const _default: Meta<import("@storybook/react").Args>;
+import type { StoryFn } from '@storybook/react';
+declare const _default: import("@storybook/types").ComponentAnnotations<import("@storybook/react/dist/types-0a347bb9").R, import("@storybook/types").Args>;
 export default _default;
 interface FieldGroupListDemoProps {
     allowAdd?: boolean;
     allowDelete?: boolean;
+    itemLevelDelete?: boolean;
 }
-export declare const ExpensesDemo: Story<FieldGroupListDemoProps>;
-export declare const InsuranceDemo: Story<FieldGroupListDemoProps>;
-export declare const FieldGroupListDemo: Story<FieldGroupListDemoProps>;
+export declare const ExpensesDemo: StoryFn<FieldGroupListDemoProps>;
+export declare const InsuranceDemo: StoryFn<FieldGroupListDemoProps>;
+export declare const FieldGroupListDemo: StoryFn<FieldGroupListDemoProps>;
 //# sourceMappingURL=FieldGroupList.stories.d.ts.map

package/jsx/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,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,CAyDvD,CAAC;AAEF,eAAO,MAAM,aAAa,EAAE,KAAK,CAAC,uBAAuB,CA0DxD,CAAC;AAEF,eAAO,MAAM,kBAAkB,EAAE,KAAK,CAAC,uBAAuB,CAkC7D,CAAC"}
+{"version":3,"file":"FieldGroupList.stories.d.ts","sourceRoot":"","sources":["../../../src/core/FieldGroup/FieldGroupList.stories.tsx"],"names":[],"mappings":"AAGA,OAAO,KAAK,EAAQ,OAAO,EAAE,MAAM,kBAAkB,CAAC;;AActD,wBAaU;AAEV,UAAU,uBAAuB;IAC/B,QAAQ,CAAC,EAAE,OAAO,CAAC;IACnB,WAAW,CAAC,EAAE,OAAO,CAAC;IACtB,eAAe,CAAC,EAAE,OAAO,CAAC;CAC3B;AAED,eAAO,MAAM,YAAY,EAAE,OAAO,CAAC,uBAAuB,CAqEzD,CAAC;AAEF,eAAO,MAAM,aAAa,EAAE,OAAO,CAAC,uBAAuB,CAsE1D,CAAC;AAEF,eAAO,MAAM,kBAAkB,EAAE,OAAO,CAAC,uBAAuB,CA2C/D,CAAC"}

package/jsx/core/FieldGroup/FieldGroupList.stories.jsx

@@ -7,18 +7,21 @@ export default {
     component: FieldGroupList,
     args: {
         allowAdd: true,
-        allowDelete: true
+        allowDelete: true,
+        itemLevelDelete: false
     },
     argTypes: {
         allowAdd: { control: { type: 'boolean' } },
-        allowDelete: { control: { type: 'boolean' } }
+        allowDelete: { control: { type: 'boolean' } },
+        itemLevelDelete: { control: { type: 'boolean' } }
     }
 };
 export const ExpensesDemo = (args) => {
-    const [state, dispatch] = useReducer(fieldGroupReducer(expensesGroupMeta, ExpensesFieldRenderer), undefined, () => [
+    const [state, dispatch] = useReducer(fieldGroupReducer(expensesGroupMeta, ExpensesFieldRenderer), [
         {
             name: `${expensesGroupMeta.label} 1`,
             id: createUID(),
+            headingTag: 'h3',
             children: expensesGroupMeta.fields.map(ExpensesFieldRenderer)
         }
     ]);
@@ -36,11 +39,20 @@ export const ExpensesDemo = (args) => {
             action('Submit')(`Form:${e.type}`);
         }} style={{ margin: 'auto', maxWidth: '37.5rem' }}>
       <Text variant='h2'>Expense report</Text>
-      <FieldGroupList items={state} onAdd={args.allowAdd
+      <FieldGroupList items={args.itemLevelDelete
+            ? state.map((item, i) => ({
+                ...item,
+                onDelete: args.allowDelete && i !== 0
+                    ? id => {
+                        dispatch({ action: 'delete', id });
+                    }
+                    : undefined
+            }))
+            : state} onAdd={args.allowAdd
             ? () => {
                 dispatch({ action: 'add' });
             }
-            : undefined} onDelete={args.allowDelete
+            : undefined} onDelete={args.allowDelete && !args.itemLevelDelete
             ? id => {
                 dispatch({ action: 'delete', id });
             }
@@ -48,10 +60,11 @@ export const ExpensesDemo = (args) => {
     </Form>);
 };
 export const InsuranceDemo = (args) => {
-    const [state, dispatch] = useReducer(fieldGroupReducer(insuranceGroupMeta, InsuranceFieldRenderer), undefined, () => [
+    const [state, dispatch] = useReducer(fieldGroupReducer(insuranceGroupMeta, InsuranceFieldRenderer), [
         {
             name: `${insuranceGroupMeta.label} 1`,
             id: createUID(),
+            headingTag: 'h3',
             children: insuranceGroupMeta.fields.map(InsuranceFieldRenderer)
         }
     ]);
@@ -70,11 +83,20 @@ export const InsuranceDemo = (args) => {
         }} style={{ margin: 'auto', maxWidth: '37.5rem' }}>
       <Text variant='h1'>Insurance step 1</Text>
       <Text variant='h2'>Dependants</Text>
-      <FieldGroupList items={state} onAdd={args.allowAdd
+      <FieldGroupList items={args.itemLevelDelete
+            ? state.map((item, i) => ({
+                ...item,
+                onDelete: args.allowDelete && i !== 0
+                    ? id => {
+                        dispatch({ action: 'delete', id });
+                    }
+                    : undefined
+            }))
+            : state} onAdd={args.allowAdd
             ? () => {
                 dispatch({ action: 'add' });
             }
-            : undefined} onDelete={args.allowDelete
+            : undefined} onDelete={args.allowDelete && !args.itemLevelDelete
             ? id => {
                 dispatch({ action: 'delete', id });
             }
@@ -82,18 +104,28 @@ export const InsuranceDemo = (args) => {
     </Form>);
 };
 export const FieldGroupListDemo = (args) => {
-    const [state, dispatch] = useReducer(fieldGroupReducer(demoGroupMeta, DemoFieldRenderer), undefined, () => [
+    const [state, dispatch] = useReducer(fieldGroupReducer(demoGroupMeta, DemoFieldRenderer), [
         {
             name: `${demoGroupMeta.label} 1`,
             id: createUID(),
+            headingTag: 'h3',
             children: demoGroupMeta.fields.map(DemoFieldRenderer)
         }
     ]);
-    return (<FieldGroupList items={state} onAdd={args.allowAdd
+    return (<FieldGroupList items={args.itemLevelDelete
+            ? state.map((item, i) => ({
+                ...item,
+                onDelete: args.allowDelete && i !== 0
+                    ? id => {
+                        dispatch({ action: 'delete', id });
+                    }
+                    : undefined
+            }))
+            : state} onAdd={args.allowAdd
             ? () => {
                 dispatch({ action: 'add' });
             }
-            : undefined} onDelete={args.allowDelete
+            : undefined} onDelete={args.allowDelete && !args.itemLevelDelete
             ? id => {
                 dispatch({ action: 'delete', id });
             }

package/jsx/core/FieldGroup/FieldGroupList.stories.jsx.map

@@ -1 +1 @@
-{"version":3,"file":"FieldGroupList.stories.jsx","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 } 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}\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}\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}\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.jsx","sourceRoot":"","sources":["../../../src/core/FieldGroup/FieldGroupList.stories.tsx"],"names":[],"mappings":"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","sourcesContent":["import { useReducer } from 'react';\nimport type { MouseEvent, FormEvent } from 'react';\nimport { action } from '@storybook/addon-actions';\nimport type { Meta, StoryFn } from '@storybook/react';\n\nimport { Button, createUID, FieldGroupList, Form, Text } 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    itemLevelDelete: false\n  },\n  argTypes: {\n    allowAdd: { control: { type: 'boolean' } },\n    allowDelete: { control: { type: 'boolean' } },\n    itemLevelDelete: { control: { type: 'boolean' } }\n  }\n} as Meta;\n\ninterface FieldGroupListDemoProps {\n  allowAdd?: boolean;\n  allowDelete?: boolean;\n  itemLevelDelete?: boolean;\n}\n\nexport const ExpensesDemo: StoryFn<FieldGroupListDemoProps> = (args: FieldGroupListDemoProps) => {\n  const [state, dispatch] = useReducer(\n    fieldGroupReducer(expensesGroupMeta, ExpensesFieldRenderer),\n    [\n      {\n        name: `${expensesGroupMeta.label} 1`,\n        id: createUID(),\n        headingTag: 'h3',\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={\n          args.itemLevelDelete\n            ? state.map((item, i) => ({\n                ...item,\n                onDelete:\n                  args.allowDelete && i !== 0\n                    ? id => {\n                        dispatch({ action: 'delete', id });\n                      }\n                    : undefined\n              }))\n            : state\n        }\n        onAdd={\n          args.allowAdd\n            ? () => {\n                dispatch({ action: 'add' });\n              }\n            : undefined\n        }\n        onDelete={\n          args.allowDelete && !args.itemLevelDelete\n            ? id => {\n                dispatch({ action: 'delete', id });\n              }\n            : undefined\n        }\n      />\n    </Form>\n  );\n};\n\nexport const InsuranceDemo: StoryFn<FieldGroupListDemoProps> = (args: FieldGroupListDemoProps) => {\n  const [state, dispatch] = useReducer(\n    fieldGroupReducer(insuranceGroupMeta, InsuranceFieldRenderer),\n    [\n      {\n        name: `${insuranceGroupMeta.label} 1`,\n        id: createUID(),\n        headingTag: 'h3',\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={\n          args.itemLevelDelete\n            ? state.map((item, i) => ({\n                ...item,\n                onDelete:\n                  args.allowDelete && i !== 0\n                    ? id => {\n                        dispatch({ action: 'delete', id });\n                      }\n                    : undefined\n              }))\n            : state\n        }\n        onAdd={\n          args.allowAdd\n            ? () => {\n                dispatch({ action: 'add' });\n              }\n            : undefined\n        }\n        onDelete={\n          args.allowDelete && !args.itemLevelDelete\n            ? id => {\n                dispatch({ action: 'delete', id });\n              }\n            : undefined\n        }\n      />\n    </Form>\n  );\n};\n\nexport const FieldGroupListDemo: StoryFn<FieldGroupListDemoProps> = (\n  args: FieldGroupListDemoProps\n) => {\n  const [state, dispatch] = useReducer(fieldGroupReducer(demoGroupMeta, DemoFieldRenderer), [\n    {\n      name: `${demoGroupMeta.label} 1`,\n      id: createUID(),\n      headingTag: 'h3',\n      children: demoGroupMeta.fields.map(DemoFieldRenderer)\n    }\n  ]);\n\n  return (\n    <FieldGroupList\n      items={\n        args.itemLevelDelete\n          ? state.map((item, i) => ({\n              ...item,\n              onDelete:\n                args.allowDelete && i !== 0\n                  ? id => {\n                      dispatch({ action: 'delete', id });\n                    }\n                  : undefined\n            }))\n          : state\n      }\n      onAdd={\n        args.allowAdd\n          ? () => {\n              dispatch({ action: 'add' });\n            }\n          : undefined\n      }\n      onDelete={\n        args.allowDelete && !args.itemLevelDelete\n          ? id => {\n              dispatch({ action: 'delete', id });\n            }\n          : undefined\n      }\n    />\n  );\n};\n"]}

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

@@ -1,11 +1,11 @@
-import { Meta, Story } from '@storybook/react';
-import { FieldValueListProps, OmitStrict } from '@pega/cosmos-react-core';
-declare const _default: Meta<import("@storybook/react").Args>;
+import type { StoryFn } from '@storybook/react';
+import type { FieldValueListProps, OmitStrict } from '@pega/cosmos-react-core';
+declare const _default: import("@storybook/types").ComponentAnnotations<import("@storybook/react/dist/types-0a347bb9").R, import("@storybook/types").Args>;
 export default _default;
 interface FieldValueListStoryProps extends OmitStrict<FieldValueListProps, 'fields'> {
     name: string;
     value: string;
     inContentContainer?: boolean;
 }
-export declare const FieldValueListDemo: Story<FieldValueListStoryProps>;
+export declare const FieldValueListDemo: StoryFn<FieldValueListStoryProps>;
 //# sourceMappingURL=FieldValueList.stories.d.ts.map

package/jsx/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":"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"}
+{"version":3,"file":"FieldValueList.stories.d.ts","sourceRoot":"","sources":["../../../src/core/FieldValueList/FieldValueList.stories.tsx"],"names":[],"mappings":"AACA,OAAO,KAAK,EAAQ,OAAO,EAAE,MAAM,kBAAkB,CAAC;AAGtD,OAAO,KAAK,EAAE,mBAAmB,EAAE,UAAU,EAAE,MAAM,yBAAyB,CAAC;;AAI/E,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,OAAO,CAAC,wBAAwB,CA2EhE,CAAC"}

package/jsx/core/FieldValueList/FieldValueList.stories.jsx.map

@@ -1 +1 @@
-{"version":3,"file":"FieldValueList.stories.jsx","sourceRoot":"","sources":["../../../src/core/FieldValueList/FieldValueList.stories.tsx"],"names":[],"mappings":"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","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"]}
+{"version":3,"file":"FieldValueList.stories.jsx","sourceRoot":"","sources":["../../../src/core/FieldValueList/FieldValueList.stories.tsx"],"names":[],"mappings":"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","sourcesContent":["import { Fragment } from 'react';\nimport type { Meta, StoryFn } from '@storybook/react';\n\nimport { FieldValueList, Link, Status, Text } from '@pega/cosmos-react-core';\nimport type { FieldValueListProps, OmitStrict } 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: StoryFn<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/jsx/core/File/FileDisplay.stories.d.ts

@@ -1,6 +1,6 @@
-import { Meta, Story } from '@storybook/react';
-import { FileDisplayProps, FileUploadItemProps } from '@pega/cosmos-react-core';
-declare const _default: Meta<import("@storybook/react").Args>;
+import type { StoryFn } from '@storybook/react';
+import type { FileDisplayProps, FileUploadItemProps } from '@pega/cosmos-react-core';
+declare const _default: import("@storybook/types").ComponentAnnotations<import("@storybook/react/dist/types-0a347bb9").R, import("@storybook/types").Args>;
 export default _default;
 interface FileDisplayDemoProps {
     withDisplayText?: boolean;
@@ -8,13 +8,13 @@ interface FileDisplayDemoProps {
     withPreview?: boolean;
     withDownload?: boolean;
 }
-export declare const FileDisplayTypes: Story<FileDisplayDemoProps>;
-export declare const FileDisplayDemo: Story<FileDisplayProps & FileDisplayDemoProps>;
+export declare const FileDisplayTypes: StoryFn<FileDisplayDemoProps>;
+export declare const FileDisplayDemo: StoryFn<FileDisplayProps & FileDisplayDemoProps>;
 interface FileUploadItemDemoProps extends FileDisplayDemoProps {
     name: FileUploadItemProps['name'];
     meta?: FileUploadItemProps['meta'];
     error?: FileUploadItemProps['error'];
     progress?: FileUploadItemProps['progress'];
 }
-export declare const FileUploadItemDemo: Story<FileUploadItemDemoProps>;
+export declare const FileUploadItemDemo: StoryFn<FileUploadItemDemoProps>;
 //# sourceMappingURL=FileDisplay.stories.d.ts.map

package/jsx/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;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"}
+{"version":3,"file":"FileDisplay.stories.d.ts","sourceRoot":"","sources":["../../../src/core/File/FileDisplay.stories.tsx"],"names":[],"mappings":"AAAA,OAAO,KAAK,EAAQ,OAAO,EAAE,MAAM,kBAAkB,CAAC;AAGtD,OAAO,KAAK,EAAE,gBAAgB,EAAiB,mBAAmB,EAAE,MAAM,yBAAyB,CAAC;;AAEpG,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,OAAO,CAAC,oBAAoB,CAmH1D,CAAC;AAUF,eAAO,MAAM,eAAe,EAAE,OAAO,CAAC,gBAAgB,GAAG,oBAAoB,CAyB5E,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,OAAO,CAAC,uBAAuB,CA2B/D,CAAC"}