@pega/cosmos-react-demos 5.0.0-dev.4.9 → 5.0.0-dev.5.0

package/lib/core/Email/EmailDisplay.stories.js

@@ -0,0 +1,20 @@
+import { jsx as _jsx } from "react/jsx-runtime";
+import { EmailDisplay } from '@pega/cosmos-react-core';
+export default {
+    title: 'Core/Email',
+    component: EmailDisplay
+};
+export const EmailDisplayDemo = (args) => {
+    return _jsx(EmailDisplay, { value: args.value, displayText: args.displayText, variant: args.variant });
+};
+EmailDisplayDemo.args = {
+    value: 'email@example.com',
+    displayText: 'Example Email',
+    variant: 'link'
+};
+EmailDisplayDemo.argTypes = {
+    value: { control: { type: 'text' } },
+    displayText: { control: { type: 'text' } },
+    variant: { options: ['link', 'text'], control: { type: 'select' } }
+};
+//# sourceMappingURL=EmailDisplay.stories.js.map

package/lib/core/Email/EmailDisplay.stories.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"EmailDisplay.stories.js","sourceRoot":"","sources":["../../../src/core/Email/EmailDisplay.stories.tsx"],"names":[],"mappings":";AAEA,OAAO,EAAE,YAAY,EAAE,MAAM,yBAAyB,CAAC;AAGvD,eAAe;IACb,KAAK,EAAE,YAAY;IACnB,SAAS,EAAE,YAAY;CAChB,CAAC;AAEV,MAAM,CAAC,MAAM,gBAAgB,GAA+B,CAAC,IAAuB,EAAE,EAAE;IACtF,OAAO,KAAC,YAAY,IAAC,KAAK,EAAE,IAAI,CAAC,KAAK,EAAE,WAAW,EAAE,IAAI,CAAC,WAAW,EAAE,OAAO,EAAE,IAAI,CAAC,OAAO,GAAI,CAAC;AACnG,CAAC,CAAC;AAEF,gBAAgB,CAAC,IAAI,GAAG;IACtB,KAAK,EAAE,mBAAmB;IAC1B,WAAW,EAAE,eAAe;IAC5B,OAAO,EAAE,MAAM;CAChB,CAAC;AAEF,gBAAgB,CAAC,QAAQ,GAAG;IAC1B,KAAK,EAAE,EAAE,OAAO,EAAE,EAAE,IAAI,EAAE,MAAM,EAAE,EAAE;IACpC,WAAW,EAAE,EAAE,OAAO,EAAE,EAAE,IAAI,EAAE,MAAM,EAAE,EAAE;IAC1C,OAAO,EAAE,EAAE,OAAO,EAAE,CAAC,MAAM,EAAE,MAAM,CAAC,EAAE,OAAO,EAAE,EAAE,IAAI,EAAE,QAAQ,EAAE,EAAE;CACpE,CAAC","sourcesContent":["import type { Meta, StoryFn } from '@storybook/react';\n\nimport { EmailDisplay } from '@pega/cosmos-react-core';\nimport type { EmailDisplayProps } from '@pega/cosmos-react-core';\n\nexport default {\n  title: 'Core/Email',\n  component: EmailDisplay\n} as Meta;\n\nexport const EmailDisplayDemo: StoryFn<EmailDisplayProps> = (args: EmailDisplayProps) => {\n  return <EmailDisplay value={args.value} displayText={args.displayText} variant={args.variant} />;\n};\n\nEmailDisplayDemo.args = {\n  value: 'email@example.com',\n  displayText: 'Example Email',\n  variant: 'link'\n};\n\nEmailDisplayDemo.argTypes = {\n  value: { control: { type: 'text' } },\n  displayText: { control: { type: 'text' } },\n  variant: { options: ['link', 'text'], control: { type: 'select' } }\n};\n"]}

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

@@ -0,0 +1,8 @@
+import type { StoryFn } from '@storybook/react';
+import type { EmojiPickerProps } 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;
+export declare const EmojiPickerDemo: StoryFn<EmojiPickerProps>;
+export declare const EmojiPickerExcludeDemo: StoryFn<EmojiPickerProps>;
+export declare const CustomEmojiSet: StoryFn<EmojiPickerProps>;
+//# sourceMappingURL=EmojiPicker.stories.d.ts.map

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

@@ -0,0 +1 @@
+{"version":3,"file":"EmojiPicker.stories.d.ts","sourceRoot":"","sources":["../../../src/core/EmojiPicker/EmojiPicker.stories.tsx"],"names":[],"mappings":"AAAA,OAAO,KAAK,EAAQ,OAAO,EAAE,MAAM,kBAAkB,CAAC;AAKtD,OAAO,KAAK,EAAE,gBAAgB,EAAE,MAAM,yBAAyB,CAAC;;AAEhE,wBAaU;AAEV,eAAO,MAAM,eAAe,EAAE,OAAO,CAAC,gBAAgB,CAkBrD,CAAC;AAEF,eAAO,MAAM,sBAAsB,EAAE,OAAO,CAAC,gBAAgB,CAmB5D,CAAC;AAEF,eAAO,MAAM,cAAc,EAAE,OAAO,CAAC,gBAAgB,CA8BpD,CAAC"}

package/lib/core/EmojiPicker/EmojiPicker.stories.js

@@ -0,0 +1,43 @@
+import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
+import { useMemo, useState } from 'react';
+import { EmojiPicker, EmojiContext, Flex, Input } from '@pega/cosmos-react-core';
+export default {
+    title: 'Core/EmojiPicker',
+    component: EmojiPicker,
+    args: {
+        showFooter: false,
+        emojiSize: 24,
+        perLine: 9
+    },
+    argTypes: {
+        showFooter: { control: { type: 'boolean' } },
+        emojiSize: { control: { type: 'number' } },
+        perLine: { control: { type: 'number' } }
+    }
+};
+export const EmojiPickerDemo = (args) => {
+    const [value, setValue] = useState('');
+    const onEmojiSelect = (emoji) => {
+        setValue(curr => `${curr}${emoji.native}`);
+    };
+    return (_jsxs(Flex, { container: { direction: 'column' }, children: [_jsx(Input, { value: value }), _jsx(EmojiPicker, { showFooter: args.showFooter, emojiSize: args.emojiSize, perLine: args.perLine, onSelect: onEmojiSelect })] }));
+};
+export const EmojiPickerExcludeDemo = (args) => {
+    const [value, setValue] = useState('');
+    const onEmojiSelect = (emoji) => {
+        setValue(curr => `${curr}${emoji.native}`);
+    };
+    return (_jsxs(Flex, { container: { direction: 'column' }, children: [_jsx(Input, { value: value }), _jsx(EmojiPicker, { exclude: ['recent', 'people', 'foods', 'activity', 'flags'], showFooter: args.showFooter, emojiSize: args.emojiSize, perLine: args.perLine, onSelect: onEmojiSelect })] }));
+};
+export const CustomEmojiSet = (args) => {
+    const [value, setValue] = useState('');
+    const onEmojiSelect = (emoji) => {
+        setValue(curr => `${curr}${emoji.native}`);
+    };
+    const ctx = useMemo(() => ({
+        set: 'google',
+        spriteSrcResolver: () => 'https://unpkg.com/emoji-datasource-google@5.0.1/img/google/sheets-clean/32.png'
+    }), []);
+    return (_jsx(EmojiContext.Provider, { value: ctx, children: _jsxs(Flex, { container: { direction: 'column' }, children: [_jsx(Input, { value: value }), _jsx(EmojiPicker, { showFooter: args.showFooter, emojiSize: args.emojiSize, perLine: args.perLine, onSelect: onEmojiSelect })] }) }));
+};
+//# sourceMappingURL=EmojiPicker.stories.js.map

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

@@ -0,0 +1 @@
+{"version":3,"file":"EmojiPicker.stories.js","sourceRoot":"","sources":["../../../src/core/EmojiPicker/EmojiPicker.stories.tsx"],"names":[],"mappings":"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","sourcesContent":["import type { Meta, StoryFn } from '@storybook/react';\nimport { useMemo, useState } from 'react';\nimport type { BaseEmoji } from 'emoji-mart';\n\nimport { EmojiPicker, EmojiContext, Flex, Input } from '@pega/cosmos-react-core';\nimport type { EmojiPickerProps } from '@pega/cosmos-react-core';\n\nexport default {\n  title: 'Core/EmojiPicker',\n  component: EmojiPicker,\n  args: {\n    showFooter: false,\n    emojiSize: 24,\n    perLine: 9\n  },\n  argTypes: {\n    showFooter: { control: { type: 'boolean' } },\n    emojiSize: { control: { type: 'number' } },\n    perLine: { control: { type: 'number' } }\n  }\n} as Meta;\n\nexport const EmojiPickerDemo: StoryFn<EmojiPickerProps> = (args: EmojiPickerProps) => {\n  const [value, setValue] = useState<string>('');\n\n  const onEmojiSelect = (emoji: BaseEmoji) => {\n    setValue(curr => `${curr}${emoji.native}`);\n  };\n\n  return (\n    <Flex container={{ direction: 'column' }}>\n      <Input value={value} />\n      <EmojiPicker\n        showFooter={args.showFooter}\n        emojiSize={args.emojiSize}\n        perLine={args.perLine}\n        onSelect={onEmojiSelect}\n      />\n    </Flex>\n  );\n};\n\nexport const EmojiPickerExcludeDemo: StoryFn<EmojiPickerProps> = (args: EmojiPickerProps) => {\n  const [value, setValue] = useState<string>('');\n\n  const onEmojiSelect = (emoji: BaseEmoji) => {\n    setValue(curr => `${curr}${emoji.native}`);\n  };\n\n  return (\n    <Flex container={{ direction: 'column' }}>\n      <Input value={value} />\n      <EmojiPicker\n        exclude={['recent', 'people', 'foods', 'activity', 'flags']}\n        showFooter={args.showFooter}\n        emojiSize={args.emojiSize}\n        perLine={args.perLine}\n        onSelect={onEmojiSelect}\n      />\n    </Flex>\n  );\n};\n\nexport const CustomEmojiSet: StoryFn<EmojiPickerProps> = (args: EmojiPickerProps) => {\n  const [value, setValue] = useState<string>('');\n\n  const onEmojiSelect = (emoji: BaseEmoji) => {\n    setValue(curr => `${curr}${emoji.native}`);\n  };\n\n  const ctx = useMemo(\n    () =>\n      ({\n        set: 'google',\n        spriteSrcResolver: () =>\n          'https://unpkg.com/emoji-datasource-google@5.0.1/img/google/sheets-clean/32.png'\n      } as const),\n    []\n  );\n\n  return (\n    <EmojiContext.Provider value={ctx}>\n      <Flex container={{ direction: 'column' }}>\n        <Input value={value} />\n        <EmojiPicker\n          showFooter={args.showFooter}\n          emojiSize={args.emojiSize}\n          perLine={args.perLine}\n          onSelect={onEmojiSelect}\n        />\n      </Flex>\n    </EmojiContext.Provider>\n  );\n};\n"]}

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

@@ -0,0 +1,6 @@
+import type { StoryFn } from '@storybook/react';
+import type { EmptyStateProps } 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;
+export declare const EmptyStateDemo: StoryFn<EmptyStateProps>;
+//# sourceMappingURL=EmptyState.stories.d.ts.map

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

@@ -0,0 +1 @@
+{"version":3,"file":"EmptyState.stories.d.ts","sourceRoot":"","sources":["../../../src/core/EmptyState/EmptyState.stories.tsx"],"names":[],"mappings":"AAAA,OAAO,KAAK,EAAQ,OAAO,EAAE,MAAM,kBAAkB,CAAC;AAGtD,OAAO,KAAK,EAAE,eAAe,EAAE,MAAM,yBAAyB,CAAC;;AAE/D,wBAMU;AAEV,eAAO,MAAM,cAAc,EAAE,OAAO,CAAC,eAAe,CAEnD,CAAC"}

package/lib/core/EmptyState/EmptyState.stories.js

@@ -0,0 +1,19 @@
+import { jsx as _jsx } from "react/jsx-runtime";
+import { EmptyState } from '@pega/cosmos-react-core';
+export default {
+    title: 'Core/EmptyState',
+    component: EmptyState,
+    parameters: {
+        layout: 'centered'
+    }
+};
+export const EmptyStateDemo = (args) => {
+    return _jsx(EmptyState, { message: args.message });
+};
+EmptyStateDemo.args = {
+    message: 'No items'
+};
+EmptyStateDemo.argTypes = {
+    message: { control: { type: 'text' } }
+};
+//# sourceMappingURL=EmptyState.stories.js.map

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

@@ -0,0 +1 @@
+{"version":3,"file":"EmptyState.stories.js","sourceRoot":"","sources":["../../../src/core/EmptyState/EmptyState.stories.tsx"],"names":[],"mappings":";AAEA,OAAO,EAAE,UAAU,EAAE,MAAM,yBAAyB,CAAC;AAGrD,eAAe;IACb,KAAK,EAAE,iBAAiB;IACxB,SAAS,EAAE,UAAU;IACrB,UAAU,EAAE;QACV,MAAM,EAAE,UAAU;KACnB;CACM,CAAC;AAEV,MAAM,CAAC,MAAM,cAAc,GAA6B,CAAC,IAAqB,EAAE,EAAE;IAChF,OAAO,KAAC,UAAU,IAAC,OAAO,EAAE,IAAI,CAAC,OAAO,GAAI,CAAC;AAC/C,CAAC,CAAC;AAEF,cAAc,CAAC,IAAI,GAAG;IACpB,OAAO,EAAE,UAAU;CACpB,CAAC;AAEF,cAAc,CAAC,QAAQ,GAAG;IACxB,OAAO,EAAE,EAAE,OAAO,EAAE,EAAE,IAAI,EAAE,MAAM,EAAE,EAAE;CACvC,CAAC","sourcesContent":["import type { Meta, StoryFn } from '@storybook/react';\n\nimport { EmptyState } from '@pega/cosmos-react-core';\nimport type { EmptyStateProps } from '@pega/cosmos-react-core';\n\nexport default {\n  title: 'Core/EmptyState',\n  component: EmptyState,\n  parameters: {\n    layout: 'centered'\n  }\n} as Meta;\n\nexport const EmptyStateDemo: StoryFn<EmptyStateProps> = (args: EmptyStateProps) => {\n  return <EmptyState message={args.message} />;\n};\n\nEmptyStateDemo.args = {\n  message: 'No items'\n};\n\nEmptyStateDemo.argTypes = {\n  message: { control: { type: 'text' } }\n};\n"]}

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

@@ -0,0 +1,9 @@
+import type { StoryFn } from '@storybook/react';
+import type { ErrorStateProps } 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 ErrorStateStoryProps extends ErrorStateProps {
+    displayRetry?: boolean;
+}
+export declare const ErrorStateDemo: StoryFn<ErrorStateStoryProps>;
+//# sourceMappingURL=ErrorState.stories.d.ts.map

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

@@ -0,0 +1 @@
+{"version":3,"file":"ErrorState.stories.d.ts","sourceRoot":"","sources":["../../../src/core/ErrorState/ErrorState.stories.tsx"],"names":[],"mappings":"AAAA,OAAO,KAAK,EAAQ,OAAO,EAAE,MAAM,kBAAkB,CAAC;AAGtD,OAAO,KAAK,EAAE,eAAe,EAAE,MAAM,yBAAyB,CAAC;;AAE/D,wBAMU;AAEV,UAAU,oBAAqB,SAAQ,eAAe;IACpD,YAAY,CAAC,EAAE,OAAO,CAAC;CACxB;AAED,eAAO,MAAM,cAAc,EAAE,OAAO,CAAC,oBAAoB,CAExD,CAAC"}

package/lib/core/ErrorState/ErrorState.stories.js

@@ -0,0 +1,21 @@
+import { jsx as _jsx } from "react/jsx-runtime";
+import { ErrorState } from '@pega/cosmos-react-core';
+export default {
+    title: 'Core/ErrorState',
+    component: ErrorState,
+    parameters: {
+        layout: 'centered'
+    }
+};
+export const ErrorStateDemo = (args) => {
+    return _jsx(ErrorState, { message: args.message, onRetry: args.displayRetry ? () => { } : undefined });
+};
+ErrorStateDemo.args = {
+    message: 'Unknown error',
+    displayRetry: false
+};
+ErrorStateDemo.argTypes = {
+    message: { control: { type: 'text' } },
+    displayRetry: { control: { type: 'boolean' } }
+};
+//# sourceMappingURL=ErrorState.stories.js.map

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

@@ -0,0 +1 @@
+{"version":3,"file":"ErrorState.stories.js","sourceRoot":"","sources":["../../../src/core/ErrorState/ErrorState.stories.tsx"],"names":[],"mappings":";AAEA,OAAO,EAAE,UAAU,EAAE,MAAM,yBAAyB,CAAC;AAGrD,eAAe;IACb,KAAK,EAAE,iBAAiB;IACxB,SAAS,EAAE,UAAU;IACrB,UAAU,EAAE;QACV,MAAM,EAAE,UAAU;KACnB;CACM,CAAC;AAMV,MAAM,CAAC,MAAM,cAAc,GAAkC,CAAC,IAA0B,EAAE,EAAE;IAC1F,OAAO,KAAC,UAAU,IAAC,OAAO,EAAE,IAAI,CAAC,OAAO,EAAE,OAAO,EAAE,IAAI,CAAC,YAAY,CAAC,CAAC,CAAC,GAAG,EAAE,GAAE,CAAC,CAAC,CAAC,CAAC,SAAS,GAAI,CAAC;AAClG,CAAC,CAAC;AAEF,cAAc,CAAC,IAAI,GAAG;IACpB,OAAO,EAAE,eAAe;IACxB,YAAY,EAAE,KAAK;CACpB,CAAC;AAEF,cAAc,CAAC,QAAQ,GAAG;IACxB,OAAO,EAAE,EAAE,OAAO,EAAE,EAAE,IAAI,EAAE,MAAM,EAAE,EAAE;IACtC,YAAY,EAAE,EAAE,OAAO,EAAE,EAAE,IAAI,EAAE,SAAS,EAAE,EAAE;CAC/C,CAAC","sourcesContent":["import type { Meta, StoryFn } from '@storybook/react';\n\nimport { ErrorState } from '@pega/cosmos-react-core';\nimport type { ErrorStateProps } from '@pega/cosmos-react-core';\n\nexport default {\n  title: 'Core/ErrorState',\n  component: ErrorState,\n  parameters: {\n    layout: 'centered'\n  }\n} as Meta;\n\ninterface ErrorStateStoryProps extends ErrorStateProps {\n  displayRetry?: boolean;\n}\n\nexport const ErrorStateDemo: StoryFn<ErrorStateStoryProps> = (args: ErrorStateStoryProps) => {\n  return <ErrorState message={args.message} onRetry={args.displayRetry ? () => {} : undefined} />;\n};\n\nErrorStateDemo.args = {\n  message: 'Unknown error',\n  displayRetry: false\n};\n\nErrorStateDemo.argTypes = {\n  message: { control: { type: 'text' } },\n  displayRetry: { control: { type: 'boolean' } }\n};\n"]}

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

@@ -0,0 +1,7 @@
+import type { StoryFn } from '@storybook/react';
+import type { ExpandCollapseProps } 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;
+export declare const VerticalExpandCollapse: StoryFn<ExpandCollapseProps>;
+export declare const HorizontalExpandCollapse: StoryFn<ExpandCollapseProps>;
+//# sourceMappingURL=ExpandCollapse.stories.d.ts.map

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

@@ -0,0 +1 @@
+{"version":3,"file":"ExpandCollapse.stories.d.ts","sourceRoot":"","sources":["../../../src/core/ExpandCollapse/ExpandCollapse.stories.tsx"],"names":[],"mappings":"AAAA,OAAO,KAAK,EAAQ,OAAO,EAAE,MAAM,kBAAkB,CAAC;AAItD,OAAO,KAAK,EAAE,mBAAmB,EAAE,MAAM,yBAAyB,CAAC;;AAInE,wBAaU;AAEV,eAAO,MAAM,sBAAsB,EAAE,OAAO,CAAC,mBAAmB,CAoC/D,CAAC;AAEF,eAAO,MAAM,wBAAwB,EAAE,OAAO,CAAC,mBAAmB,CA2CjE,CAAC"}

package/lib/core/ExpandCollapse/ExpandCollapse.stories.js

@@ -0,0 +1,28 @@
+import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
+import { useState } from 'react';
+import { Button, ExpandCollapse, Flex, Text } from '@pega/cosmos-react-core';
+import { StyledRegion } from './ExpandCollapse.styles';
+export default {
+    title: 'Core/ExpandCollapse',
+    component: ExpandCollapse,
+    args: {
+        min: '',
+        max: '',
+        transitionSpeed: '0.25s'
+    },
+    argTypes: {
+        min: { control: { type: 'text' } },
+        max: { control: { type: 'text' } },
+        transitionSpeed: { control: { type: 'text' } }
+    }
+};
+export const VerticalExpandCollapse = (args) => {
+    const [collapsed, setCollapsed] = useState(true);
+    return (_jsxs(Flex, { container: { direction: 'column' }, children: [_jsx(StyledRegion, { children: _jsx(Button, { onClick: () => setCollapsed(curState => !curState), children: collapsed ? 'Expand' : 'Collapse ' }) }), _jsx(ExpandCollapse, { dimension: 'height', collapsed: collapsed, min: args.min, max: args.max, transitionSpeed: args.transitionSpeed, nullWhenCollapsed: true, children: _jsx(StyledRegion, { innerRegion: true, children: _jsx(Text, { children: "Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat. Duis aute irure dolor in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur. Excepteur sint occaecat cupidatat non proident, sunt in culpa qui officia deserunt mollit anim id est laborum." }) }) }), _jsx(StyledRegion, { children: _jsx(Text, { children: "This content is outside of the ExpandCollapse and so it will always be visible." }) })] }));
+};
+export const HorizontalExpandCollapse = (args) => {
+    const [collapsed, setCollapsed] = useState(true);
+    const [showText, setShowText] = useState(false);
+    return (_jsxs(Flex, { container: true, children: [_jsx(StyledRegion, { children: _jsx(Button, { onClick: () => setCollapsed(curState => !curState), children: collapsed ? 'Expand' : 'Collapse ' }) }), _jsx(ExpandCollapse, { dimension: 'width', collapsed: collapsed, min: args.min, max: args.max, transitionSpeed: args.transitionSpeed, nullWhenCollapsed: true, onAfterExpand: () => setShowText(true), onBeforeCollapse: () => setShowText(false), children: _jsx(StyledRegion, { innerRegion: true, children: showText && (_jsx(Text, { children: "Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat. Duis aute irure dolor in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur. Excepteur sint occaecat cupidatat non proident, sunt in culpa qui officia deserunt mollit anim id est laborum." })) }) }), _jsx(StyledRegion, { children: _jsx(Text, { children: "This content is outside of the ExpandCollapse and so it will always be visible." }) })] }));
+};
+//# sourceMappingURL=ExpandCollapse.stories.js.map

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

@@ -0,0 +1 @@
+{"version":3,"file":"ExpandCollapse.stories.js","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,MAAC,IAAI,IAAC,SAAS,EAAE,EAAE,SAAS,EAAE,QAAQ,EAAE,aACtC,KAAC,YAAY,cACX,KAAC,MAAM,IAAC,OAAO,EAAE,GAAG,EAAE,CAAC,YAAY,CAAC,QAAQ,CAAC,EAAE,CAAC,CAAC,QAAQ,CAAC,YACvD,SAAS,CAAC,CAAC,CAAC,QAAQ,CAAC,CAAC,CAAC,WAAW,GAC5B,GACI,EAEf,KAAC,cAAc,IACb,SAAS,EAAC,QAAQ,EAClB,SAAS,EAAE,SAAS,EACpB,GAAG,EAAE,IAAI,CAAC,GAAG,EACb,GAAG,EAAE,IAAI,CAAC,GAAG,EACb,eAAe,EAAE,IAAI,CAAC,eAAe,EACrC,iBAAiB,kBAEjB,KAAC,YAAY,IAAC,WAAW,kBACvB,KAAC,IAAI,mdAOE,GACM,GACA,EAEjB,KAAC,YAAY,cACX,KAAC,IAAI,kGAAuF,GAC/E,IACV,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,MAAC,IAAI,IAAC,SAAS,mBACb,KAAC,YAAY,cACX,KAAC,MAAM,IAAC,OAAO,EAAE,GAAG,EAAE,CAAC,YAAY,CAAC,QAAQ,CAAC,EAAE,CAAC,CAAC,QAAQ,CAAC,YACvD,SAAS,CAAC,CAAC,CAAC,QAAQ,CAAC,CAAC,CAAC,WAAW,GAC5B,GACI,EAEf,KAAC,cAAc,IACb,SAAS,EAAC,OAAO,EACjB,SAAS,EAAE,SAAS,EACpB,GAAG,EAAE,IAAI,CAAC,GAAG,EACb,GAAG,EAAE,IAAI,CAAC,GAAG,EACb,eAAe,EAAE,IAAI,CAAC,eAAe,EACrC,iBAAiB,QACjB,aAAa,EAAE,GAAG,EAAE,CAAC,WAAW,CAAC,IAAI,CAAC,EACtC,gBAAgB,EAAE,GAAG,EAAE,CAAC,WAAW,CAAC,KAAK,CAAC,YAE1C,KAAC,YAAY,IAAC,WAAW,kBACtB,QAAQ,IAAI,CACX,KAAC,IAAI,mdAOE,CACR,GACY,GACA,EAEjB,KAAC,YAAY,cACX,KAAC,IAAI,kGAAuF,GAC/E,IACV,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/lib/core/ExpandCollapse/ExpandCollapse.styles.d.ts

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

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

@@ -0,0 +1 @@
+{"version":3,"file":"ExpandCollapse.styles.d.ts","sourceRoot":"","sources":["../../../src/core/ExpandCollapse/ExpandCollapse.styles.ts"],"names":[],"mappings":"AAIA,eAAO,MAAM,YAAY;;SAcvB,CAAC"}

package/lib/core/ExpandCollapse/ExpandCollapse.styles.js

@@ -0,0 +1,17 @@
+import styled, { css } from 'styled-components';
+import { defaultThemeProp } from '@pega/cosmos-react-core';
+export const StyledRegion = styled.div(({ innerRegion, theme }) => {
+    return css `
+    background-color: ${theme.base.palette[innerRegion ? 'primary-background' : 'secondary-background']};
+    padding: calc(4 * ${theme.base.spacing});
+    display: flex;
+    justify-content: center;
+
+    button {
+      height: max-content;
+      align-self: center;
+    }
+  `;
+});
+StyledRegion.defaultProps = defaultThemeProp;
+//# sourceMappingURL=ExpandCollapse.styles.js.map

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

@@ -0,0 +1 @@
+{"version":3,"file":"ExpandCollapse.styles.js","sourceRoot":"","sources":["../../../src/core/ExpandCollapse/ExpandCollapse.styles.ts"],"names":[],"mappings":"AAAA,OAAO,MAAM,EAAE,EAAE,GAAG,EAAE,MAAM,mBAAmB,CAAC;AAEhD,OAAO,EAAE,gBAAgB,EAAE,MAAM,yBAAyB,CAAC;AAE3D,MAAM,CAAC,MAAM,YAAY,GAAG,MAAM,CAAC,GAAG,CAA4B,CAAC,EAAE,WAAW,EAAE,KAAK,EAAE,EAAE,EAAE;IAC3F,OAAO,GAAG,CAAA;wBACY,KAAK,CAAC,IAAI,CAAC,OAAO,CACpC,WAAW,CAAC,CAAC,CAAC,oBAAoB,CAAC,CAAC,CAAC,sBAAsB,CAC5D;wBACmB,KAAK,CAAC,IAAI,CAAC,OAAO;;;;;;;;GAQvC,CAAC;AACJ,CAAC,CAAC,CAAC;AAEH,YAAY,CAAC,YAAY,GAAG,gBAAgB,CAAC","sourcesContent":["import styled, { css } from 'styled-components';\n\nimport { defaultThemeProp } from '@pega/cosmos-react-core';\n\nexport const StyledRegion = styled.div<{ innerRegion?: boolean }>(({ innerRegion, theme }) => {\n  return css`\n    background-color: ${theme.base.palette[\n      innerRegion ? 'primary-background' : 'secondary-background'\n    ]};\n    padding: calc(4 * ${theme.base.spacing});\n    display: flex;\n    justify-content: center;\n\n    button {\n      height: max-content;\n      align-self: center;\n    }\n  `;\n});\n\nStyledRegion.defaultProps = defaultThemeProp;\n"]}

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

@@ -0,0 +1,20 @@
+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: StoryFn<FieldGroupStoryProps>;
+//# sourceMappingURL=FieldGroup.stories.d.ts.map

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

@@ -0,0 +1 @@
+{"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/lib/core/FieldGroup/FieldGroup.stories.js

@@ -0,0 +1,59 @@
+import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
+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) => {
+    const [firstGroupCollapsed, setFirstGroupCollapsed] = useState(false);
+    const [secondGroupCollapsed, setSecondGroupCollapsed] = useState(false);
+    return (_jsxs(Grid, { container: { rowGap: 2 }, children: [_jsx(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, 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, 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, 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',
+    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' } }
+};
+//# sourceMappingURL=FieldGroup.stories.js.map

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

@@ -0,0 +1 @@
+{"version":3,"file":"FieldGroup.stories.js","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/lib/core/FieldGroup/FieldGroupList.mocks.d.ts

@@ -0,0 +1,25 @@
+/// <reference types="react" />
+import { FieldGroupListItemProps } from '@pega/cosmos-react-core';
+type FieldGroupReducerPayload = {
+    action: 'add';
+} | {
+    action: 'delete';
+    id: string;
+};
+export interface FieldMeta {
+    label: string;
+    type: 'text' | 'date' | 'file' | 'select' | 'textarea';
+}
+export interface GroupMeta {
+    label: string;
+    fields: FieldMeta[];
+}
+export declare const fieldGroupReducer: (groupMeta: GroupMeta, FieldRenderer: (props: FieldMeta) => JSX.Element | null) => (items: FieldGroupListItemProps[], payload: FieldGroupReducerPayload) => FieldGroupListItemProps[];
+export declare const DemoFieldRenderer: ({ label, type }: FieldMeta) => JSX.Element | null;
+export declare const demoGroupMeta: GroupMeta;
+export declare const ExpensesFieldRenderer: ({ label, type }: FieldMeta) => JSX.Element | null;
+export declare const expensesGroupMeta: GroupMeta;
+export declare const InsuranceFieldRenderer: ({ label, type }: FieldMeta) => JSX.Element | null;
+export declare const insuranceGroupMeta: GroupMeta;
+export {};
+//# sourceMappingURL=FieldGroupList.mocks.d.ts.map

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

@@ -0,0 +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,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/lib/core/FieldGroup/FieldGroupList.mocks.js

@@ -0,0 +1,87 @@
+import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
+import { createElement as _createElement } from "react";
+import { createUID, DateInput, FileInput, Input, Option, Select, TextArea } from '@pega/cosmos-react-core';
+export const fieldGroupReducer = (groupMeta, FieldRenderer) => (items, payload) => {
+    switch (payload.action) {
+        case 'add':
+            return [
+                ...items,
+                {
+                    name: `${groupMeta.label} ${items.length + 1}`,
+                    headingTag: 'h3',
+                    id: createUID(),
+                    children: groupMeta.fields.map(props => _createElement(FieldRenderer, { ...props, key: props.label }))
+                }
+            ];
+        case 'delete':
+            return items
+                .filter(group => group.id !== payload.id)
+                .map((group, i) => ({
+                ...group,
+                name: `${groupMeta.label} ${i + 1}`,
+                headingTag: 'h3'
+            }));
+        default:
+            return items;
+    }
+};
+export const DemoFieldRenderer = ({ label, type }) => {
+    if (type === 'text') {
+        return _jsx(Input, { label: label }, label);
+    }
+    return null;
+};
+export const demoGroupMeta = {
+    label: 'Applicant',
+    fields: [
+        {
+            type: 'text',
+            label: 'Applicant name'
+        }
+    ]
+};
+export const ExpensesFieldRenderer = ({ label, type }) => {
+    if (type === 'text') {
+        return _jsx(Input, { label: label });
+    }
+    if (type === 'select') {
+        return (_jsxs(Select, { label: label, children: [_jsx(Option, { children: "Select" }), _jsx(Option, { children: "Advertising" }), _jsx(Option, { children: "Car and truck expenses" }), _jsx(Option, { children: "Commissions and fees" }), _jsx(Option, { children: "Contract labor" }), _jsx(Option, { children: "Legal and professional services" }), _jsx(Option, { children: "Office expense" }), _jsx(Option, { children: "Rent or lease" }), _jsx(Option, { children: "Vehicles, machinery, and equipment" }), _jsx(Option, { children: "Repairs and maintenance" }), _jsx(Option, { children: "Travel and meals" }), _jsx(Option, { children: "Deductible meals" }), _jsx(Option, { children: "Utilities" }), _jsx(Option, { children: "Other" })] }));
+    }
+    if (type === 'file') {
+        return _jsx(FileInput, { label: label, multiple: true });
+    }
+    if (type === 'textarea') {
+        return _jsx(TextArea, { label: label });
+    }
+    if (type === 'date') {
+        return _jsx(DateInput, { label: label });
+    }
+    return null;
+};
+export const expensesGroupMeta = {
+    label: 'Expense',
+    fields: [
+        { type: 'select', label: 'Type of expense' },
+        { type: 'date', label: 'Date of expense' },
+        { type: 'file', label: 'Receipts' },
+        { type: 'textarea', label: 'Notes' }
+    ]
+};
+export const InsuranceFieldRenderer = ({ label, type }) => {
+    if (type === 'text') {
+        return _jsx(Input, { label: label });
+    }
+    if (type === 'select') {
+        return (_jsxs(Select, { label: label, children: [_jsx(Option, { children: "Select" }), _jsx(Option, { children: "Mother" }), _jsx(Option, { children: "Father" }), _jsx(Option, { children: "Guardian" }), _jsx(Option, { children: "Child" }), _jsx(Option, { children: "Spouse" }), _jsx(Option, { children: "Sibling" }), _jsx(Option, { children: "Other" })] }));
+    }
+    return null;
+};
+export const insuranceGroupMeta = {
+    label: 'Entry',
+    fields: [
+        { type: 'text', label: 'First name' },
+        { type: 'text', label: 'Last name' },
+        { type: 'select', label: 'Relationship' }
+    ]
+};
+//# sourceMappingURL=FieldGroupList.mocks.js.map

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

@@ -0,0 +1 @@
+{"version":3,"file":"FieldGroupList.mocks.js","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/lib/core/FieldGroup/FieldGroupList.stories.d.ts

@@ -0,0 +1,12 @@
+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: StoryFn<FieldGroupListDemoProps>;
+export declare const InsuranceDemo: StoryFn<FieldGroupListDemoProps>;
+export declare const FieldGroupListDemo: StoryFn<FieldGroupListDemoProps>;
+//# sourceMappingURL=FieldGroupList.stories.d.ts.map

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

@@ -0,0 +1 @@
+{"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"}