npm - @pega/cosmos-react-demos - Versions diffs - 4.0.0-dev.15.5 → 4.0.0-dev.16.1 - Mend

@pega/cosmos-react-demos 4.0.0-dev.15.5 → 4.0.0-dev.16.1

This diff represents the content of publicly available package versions that have been released to one of the supported registries. The information contained in this diff is provided for informational purposes only and reflects changes between package versions as they appear in their respective public registries.

Files changed (59) hide show

package/jsx/core/AIButton/AIButton.mocks.d.ts ADDED Viewed

@@ -0,0 +1,22 @@
+import { FormControlProps } from '@pega/cosmos-react-core';
+interface Value {
+    name: string;
+    email: string;
+    locations: string;
+    meetings: string;
+    meals: string;
+    notes: string;
+}
+interface Field extends FormControlProps {
+    help?: FormControlProps['info'];
+    validator?: (this: Field) => string;
+}
+export declare const AIValues: Value[];
+export declare const initFields: () => Field[];
+export declare const fieldReducer: (fields: Field[], { type, name, value }: {
+    type: 'blur' | 'change' | 'submit' | 'cancel' | 'ai';
+    name?: string | undefined;
+    value?: string | undefined;
+}) => Field[];
+export {};
+//# sourceMappingURL=AIButton.mocks.d.ts.map

package/jsx/core/AIButton/AIButton.mocks.d.ts.map ADDED Viewed

@@ -0,0 +1 @@

+ {"version":3,"file":"AIButton.mocks.d.ts","sourceRoot":"","sources":["../../../src/core/AIButton/AIButton.mocks.ts"],"names":[],"mappings":"AAAA,OAAO,EAAE,gBAAgB,EAAE,MAAM,yBAAyB,CAAC;AAE3D,UAAU,KAAK;IACb,IAAI,EAAE,MAAM,CAAC;IACb,KAAK,EAAE,MAAM,CAAC;IACd,SAAS,EAAE,MAAM,CAAC;IAClB,QAAQ,EAAE,MAAM,CAAC;IACjB,KAAK,EAAE,MAAM,CAAC;IACd,KAAK,EAAE,MAAM,CAAC;CACf;AAED,UAAU,KAAM,SAAQ,gBAAgB;IACtC,IAAI,CAAC,EAAE,gBAAgB,CAAC,MAAM,CAAC,CAAC;IAChC,SAAS,CAAC,EAAE,CAAC,IAAI,EAAE,KAAK,KAAK,MAAM,CAAC;CACrC;AAGD,eAAO,MAAM,QAAQ,EAAE,KAAK,EAyC3B,CAAC;AAGF,eAAO,MAAM,UAAU,QAAO,KAAK,EAqDlC,CAAC;AAGF,eAAO,MAAM,YAAY,WACf,KAAK,EAAE;UAMP,MAAM,GAAG,QAAQ,GAAG,QAAQ,GAAG,QAAQ,GAAG,IAAI;;;aAoCvD,CAAC"}

package/jsx/core/AIButton/AIButton.mocks.js ADDED Viewed

@@ -0,0 +1,136 @@
+export const AIValues = [
+    {
+        name: 'Cindy Turner',
+        email: 'cindy.turner@pega.com',
+        locations: 'Waltham',
+        meetings: 'No',
+        meals: 'Pizza',
+        notes: 'If I could have a window seat, that would be much appreciated!'
+    },
+    {
+        name: 'Seth DeAngelo',
+        email: 'seth.deangelo@pega.com',
+        locations: 'Waltham,Cambridge',
+        meetings: 'Yes',
+        meals: 'Salad',
+        notes: `I selected salad for my meal, but it that is not available, I'm okay with any sandwich you have.`
+    },
+    {
+        name: 'Janet Moore',
+        email: 'janet.moore@pega.com',
+        locations: 'Krakow',
+        meetings: 'No',
+        meals: 'Sandwich',
+        notes: `I'm allergic to nuts, so please don't add any peanut butter to my sandwich.`
+    },
+    {
+        name: 'Dean Thomas',
+        email: 'dean.thomas@pega.com',
+        locations: 'Hyderabad',
+        meetings: 'Yes',
+        meals: 'Pizza',
+        notes: 'I would like to arrange my hours to avoid rush hour.'
+    },
+    {
+        name: 'Kate Mirin',
+        email: 'kate.mirin@pega.com',
+        locations: 'Waltham,Krakow,Bangalore',
+        meetings: 'Yes',
+        meals: 'Salad',
+        notes: `I'm not too picky!`
+    }
+];
+export const initFields = () => {
+    const common = { value: undefined, status: undefined };
+    return [
+        {
+            ...common,
+            name: 'name',
+            label: 'Name',
+            required: true,
+            validator() {
+                if (!this.value)
+                    return 'Please enter a first and last name';
+                return /^[a-z]+\s[a-z]+$/i.test(this.value)
+                    ? ''
+                    : 'You need to enter a first and last name';
+            }
+        },
+        {
+            ...common,
+            name: 'email',
+            label: 'Email',
+            required: true,
+            validator() {
+                if (!this.value)
+                    return 'Please enter an email address';
+                return /^\S+@pega\.com$/.test(this.value) ? '' : 'Please enter an @pega.com address';
+            }
+        },
+        {
+            ...common,
+            name: 'locations',
+            label: 'Which office(s) have you worked in?',
+            required: true,
+            validator() {
+                if (!this.value)
+                    return 'Select at least one location';
+                return '';
+            }
+        },
+        {
+            ...common,
+            name: 'meetings',
+            label: 'Do you enjoy early morning meetings?'
+        },
+        {
+            ...common,
+            name: 'meals',
+            label: 'What would you like to eat?',
+            help: 'Selections will be made on a first-come basis'
+        },
+        {
+            ...common,
+            name: 'notes',
+            label: 'Special requests',
+            help: 'We will take any of your requests into consideration'
+        }
+    ];
+};
+export const fieldReducer = (fields, { type, name, value }) => {
+    return fields.map(field => {
+        if (field.name === name) {
+            if (name === 'locations' && field.value && value && type === 'change') {
+                const selectedValues = field.value.split(',');
+                const indexOfValue = selectedValues.findIndex(i => i === value);
+                if (indexOfValue !== -1) {
+                    selectedValues.splice(indexOfValue, 1);
+                }
+                else {
+                    selectedValues.push(value);
+                }
+                field.value = selectedValues.join(',');
+            }
+            else {
+                field.value = value;
+            }
+            if (type === 'cancel') {
+                field.status = undefined;
+                field.info = field.help;
+            }
+            else if (type === 'blur' || type === 'submit' || field.status === 'error') {
+                const error = field.validator?.() || '';
+                if ((field.required || field.value) && error) {
+                    field.status = 'error';
+                    field.info = error;
+                }
+                else {
+                    field.status = undefined;
+                    field.info = field.help;
+                }
+            }
+        }
+        return field;
+    });
+};
+//# sourceMappingURL=AIButton.mocks.js.map

package/jsx/core/AIButton/AIButton.mocks.js.map ADDED Viewed

@@ -0,0 +1 @@

+ {"version":3,"file":"AIButton.mocks.js","sourceRoot":"","sources":["../../../src/core/AIButton/AIButton.mocks.ts"],"names":[],"mappings":"AAiBA,MAAM,CAAC,MAAM,QAAQ,GAAY;IAC/B;QACE,IAAI,EAAE,cAAc;QACpB,KAAK,EAAE,uBAAuB;QAC9B,SAAS,EAAE,SAAS;QACpB,QAAQ,EAAE,IAAI;QACd,KAAK,EAAE,OAAO;QACd,KAAK,EAAE,gEAAgE;KACxE;IACD;QACE,IAAI,EAAE,eAAe;QACrB,KAAK,EAAE,wBAAwB;QAC/B,SAAS,EAAE,mBAAmB;QAC9B,QAAQ,EAAE,KAAK;QACf,KAAK,EAAE,OAAO;QACd,KAAK,EAAE,kGAAkG;KAC1G;IACD;QACE,IAAI,EAAE,aAAa;QACnB,KAAK,EAAE,sBAAsB;QAC7B,SAAS,EAAE,QAAQ;QACnB,QAAQ,EAAE,IAAI;QACd,KAAK,EAAE,UAAU;QACjB,KAAK,EAAE,6EAA6E;KACrF;IACD;QACE,IAAI,EAAE,aAAa;QACnB,KAAK,EAAE,sBAAsB;QAC7B,SAAS,EAAE,WAAW;QACtB,QAAQ,EAAE,KAAK;QACf,KAAK,EAAE,OAAO;QACd,KAAK,EAAE,sDAAsD;KAC9D;IACD;QACE,IAAI,EAAE,YAAY;QAClB,KAAK,EAAE,qBAAqB;QAC5B,SAAS,EAAE,0BAA0B;QACrC,QAAQ,EAAE,KAAK;QACf,KAAK,EAAE,OAAO;QACd,KAAK,EAAE,oBAAoB;KAC5B;CACF,CAAC;AAGF,MAAM,CAAC,MAAM,UAAU,GAAG,GAAY,EAAE;IACtC,MAAM,MAAM,GAAG,EAAE,KAAK,EAAE,SAAS,EAAE,MAAM,EAAE,SAAS,EAAE,CAAC;IACvD,OAAO;QACL;YACE,GAAG,MAAM;YACT,IAAI,EAAE,MAAM;YACZ,KAAK,EAAE,MAAM;YACb,QAAQ,EAAE,IAAI;YACd,SAAS;gBACP,IAAI,CAAC,IAAI,CAAC,KAAK;oBAAE,OAAO,oCAAoC,CAAC;gBAC7D,OAAO,mBAAmB,CAAC,IAAI,CAAC,IAAI,CAAC,KAAK,CAAC;oBACzC,CAAC,CAAC,EAAE;oBACJ,CAAC,CAAC,yCAAyC,CAAC;YAChD,CAAC;SACF;QACD;YACE,GAAG,MAAM;YACT,IAAI,EAAE,OAAO;YACb,KAAK,EAAE,OAAO;YACd,QAAQ,EAAE,IAAI;YACd,SAAS;gBACP,IAAI,CAAC,IAAI,CAAC,KAAK;oBAAE,OAAO,+BAA+B,CAAC;gBACxD,OAAO,iBAAiB,CAAC,IAAI,CAAC,IAAI,CAAC,KAAK,CAAC,CAAC,CAAC,CAAC,EAAE,CAAC,CAAC,CAAC,mCAAmC,CAAC;YACvF,CAAC;SACF;QACD;YACE,GAAG,MAAM;YACT,IAAI,EAAE,WAAW;YACjB,KAAK,EAAE,qCAAqC;YAC5C,QAAQ,EAAE,IAAI;YACd,SAAS;gBACP,IAAI,CAAC,IAAI,CAAC,KAAK;oBAAE,OAAO,8BAA8B,CAAC;gBACvD,OAAO,EAAE,CAAC;YACZ,CAAC;SACF;QACD;YACE,GAAG,MAAM;YACT,IAAI,EAAE,UAAU;YAChB,KAAK,EAAE,sCAAsC;SAC9C;QACD;YACE,GAAG,MAAM;YACT,IAAI,EAAE,OAAO;YACb,KAAK,EAAE,6BAA6B;YACpC,IAAI,EAAE,+CAA+C;SACtD;QACD;YACE,GAAG,MAAM;YACT,IAAI,EAAE,OAAO;YACb,KAAK,EAAE,kBAAkB;YACzB,IAAI,EAAE,sDAAsD;SAC7D;KACF,CAAC;AACJ,CAAC,CAAC;AAGF,MAAM,CAAC,MAAM,YAAY,GAAG,CAC1B,MAAe,EACf,EACE,IAAI,EACJ,IAAI,EACJ,KAAK,EAKN,EACD,EAAE;IACF,OAAO,MAAM,CAAC,GAAG,CAAC,KAAK,CAAC,EAAE;QACxB,IAAI,KAAK,CAAC,IAAI,KAAK,IAAI,EAAE;YACvB,IAAI,IAAI,KAAK,WAAW,IAAI,KAAK,CAAC,KAAK,IAAI,KAAK,IAAI,IAAI,KAAK,QAAQ,EAAE;gBACrE,MAAM,cAAc,GAAG,KAAK,CAAC,KAAK,CAAC,KAAK,CAAC,GAAG,CAAC,CAAC;gBAC9C,MAAM,YAAY,GAAG,cAAc,CAAC,SAAS,CAAC,CAAC,CAAC,EAAE,CAAC,CAAC,KAAK,KAAK,CAAC,CAAC;gBAChE,IAAI,YAAY,KAAK,CAAC,CAAC,EAAE;oBACvB,cAAc,CAAC,MAAM,CAAC,YAAY,EAAE,CAAC,CAAC,CAAC;iBACxC;qBAAM;oBACL,cAAc,CAAC,IAAI,CAAC,KAAK,CAAC,CAAC;iBAC5B;gBACD,KAAK,CAAC,KAAK,GAAG,cAAc,CAAC,IAAI,CAAC,GAAG,CAAC,CAAC;aACxC;iBAAM;gBACL,KAAK,CAAC,KAAK,GAAG,KAAK,CAAC;aACrB;YAED,IAAI,IAAI,KAAK,QAAQ,EAAE;gBACrB,KAAK,CAAC,MAAM,GAAG,SAAS,CAAC;gBACzB,KAAK,CAAC,IAAI,GAAG,KAAK,CAAC,IAAI,CAAC;aACzB;iBAAM,IAAI,IAAI,KAAK,MAAM,IAAI,IAAI,KAAK,QAAQ,IAAI,KAAK,CAAC,MAAM,KAAK,OAAO,EAAE;gBAC3E,MAAM,KAAK,GAAG,KAAK,CAAC,SAAS,EAAE,EAAE,IAAI,EAAE,CAAC;gBACxC,IAAI,CAAC,KAAK,CAAC,QAAQ,IAAI,KAAK,CAAC,KAAK,CAAC,IAAI,KAAK,EAAE;oBAC5C,KAAK,CAAC,MAAM,GAAG,OAAO,CAAC;oBACvB,KAAK,CAAC,IAAI,GAAG,KAAK,CAAC;iBACpB;qBAAM;oBACL,KAAK,CAAC,MAAM,GAAG,SAAS,CAAC;oBACzB,KAAK,CAAC,IAAI,GAAG,KAAK,CAAC,IAAI,CAAC;iBACzB;aACF;SACF;QACD,OAAO,KAAK,CAAC;IACf,CAAC,CAAC,CAAC;AACL,CAAC,CAAC","sourcesContent":["import { FormControlProps } from '@pega/cosmos-react-core';\n\ninterface Value {\n name: string;\n email: string;\n locations: string;\n meetings: string;\n meals: string;\n notes: string;\n}\n\ninterface Field extends FormControlProps {\n help?: FormControlProps['info'];\n validator?: (this: Field) => string;\n}\n\n// Value sets used by the mock AI\nexport const AIValues: Value[] = [\n {\n name: 'Cindy Turner',\n email: 'cindy.turner@pega.com',\n locations: 'Waltham',\n meetings: 'No',\n meals: 'Pizza',\n notes: 'If I could have a window seat, that would be much appreciated!'\n },\n {\n name: 'Seth DeAngelo',\n email: 'seth.deangelo@pega.com',\n locations: 'Waltham,Cambridge',\n meetings: 'Yes',\n meals: 'Salad',\n notes: `I selected salad for my meal, but it that is not available, I'm okay with any sandwich you have.`\n },\n {\n name: 'Janet Moore',\n email: 'janet.moore@pega.com',\n locations: 'Krakow',\n meetings: 'No',\n meals: 'Sandwich',\n notes: `I'm allergic to nuts, so please don't add any peanut butter to my sandwich.`\n },\n {\n name: 'Dean Thomas',\n email: 'dean.thomas@pega.com',\n locations: 'Hyderabad',\n meetings: 'Yes',\n meals: 'Pizza',\n notes: 'I would like to arrange my hours to avoid rush hour.'\n },\n {\n name: 'Kate Mirin',\n email: 'kate.mirin@pega.com',\n locations: 'Waltham,Krakow,Bangalore',\n meetings: 'Yes',\n meals: 'Salad',\n notes: `I'm not too picky!`\n }\n];\n\n// Get initial field properties\nexport const initFields = (): Field[] => {\n const common = { value: undefined, status: undefined };\n return [\n {\n ...common,\n name: 'name',\n label: 'Name',\n required: true,\n validator() {\n if (!this.value) return 'Please enter a first and last name';\n return /^[a-z]+\\s[a-z]+$/i.test(this.value)\n ? ''\n : 'You need to enter a first and last name';\n }\n },\n {\n ...common,\n name: 'email',\n label: 'Email',\n required: true,\n validator() {\n if (!this.value) return 'Please enter an email address';\n return /^\\S+@pega\\.com$/.test(this.value) ? '' : 'Please enter an @pega.com address';\n }\n },\n {\n ...common,\n name: 'locations',\n label: 'Which office(s) have you worked in?',\n required: true,\n validator() {\n if (!this.value) return 'Select at least one location';\n return '';\n }\n },\n {\n ...common,\n name: 'meetings',\n label: 'Do you enjoy early morning meetings?'\n },\n {\n ...common,\n name: 'meals',\n label: 'What would you like to eat?',\n help: 'Selections will be made on a first-come basis'\n },\n {\n ...common,\n name: 'notes',\n label: 'Special requests',\n help: 'We will take any of your requests into consideration'\n }\n ];\n};\n\n// Handles setting of state for all fields\nexport const fieldReducer = (\n fields: Field[],\n {\n type,\n name,\n value\n }: {\n type: 'blur' | 'change' | 'submit' | 'cancel' | 'ai';\n name?: string;\n value?: string;\n }\n) => {\n return fields.map(field => {\n if (field.name === name) {\n if (name === 'locations' && field.value && value && type === 'change') {\n const selectedValues = field.value.split(',');\n const indexOfValue = selectedValues.findIndex(i => i === value);\n if (indexOfValue !== -1) {\n selectedValues.splice(indexOfValue, 1);\n } else {\n selectedValues.push(value);\n }\n field.value = selectedValues.join(',');\n } else {\n field.value = value;\n }\n\n if (type === 'cancel') {\n field.status = undefined;\n field.info = field.help;\n } else if (type === 'blur' || type === 'submit' || field.status === 'error') {\n const error = field.validator?.() || '';\n if ((field.required || field.value) && error) {\n field.status = 'error';\n field.info = error;\n } else {\n field.status = undefined;\n field.info = field.help;\n }\n }\n }\n return field;\n });\n};\n"]}

package/jsx/core/AIButton/AIButton.stories.d.ts ADDED Viewed

@@ -0,0 +1,19 @@
+import { Meta, Story } from '@storybook/react';
+import { AIButtonProps } from '@pega/cosmos-react-core';
+declare const _default: Meta;
+export default _default;
+export declare const AIButtonDemo: Story<AIButtonProps>;
+interface AIButtonFormProps {
+    throwAIError: boolean;
+}
+export declare const AIButtonFormDemo: Story<AIButtonFormProps>;
+export declare const AIButtonFormInModalDemo: Story<AIButtonFormProps>;
+interface ConfigurableButtonProps {
+    borderWidth?: string;
+    borderRadius?: number;
+    color?: string;
+    secondaryColor?: string;
+    padding?: string;
+}
+export declare const ConfigurableAIButton: Story<ConfigurableButtonProps>;
+//# sourceMappingURL=AIButton.stories.d.ts.map

package/jsx/core/AIButton/AIButton.stories.d.ts.map ADDED Viewed

@@ -0,0 +1 @@

+ {"version":3,"file":"AIButton.stories.d.ts","sourceRoot":"","sources":["../../../src/core/AIButton/AIButton.stories.tsx"],"names":[],"mappings":"AACA,OAAO,EAAE,IAAI,EAAE,KAAK,EAAE,MAAM,kBAAkB,CAAC;AAE/C,OAAO,EAEL,aAAa,EAqBd,MAAM,yBAAyB,CAAC;;AAIjC,wBAOU;AAEV,eAAO,MAAM,YAAY,EAAE,KAAK,CAAC,aAAa,CAE7C,CAAC;AAYF,UAAU,iBAAiB;IACzB,YAAY,EAAE,OAAO,CAAC;CACvB;AAED,eAAO,MAAM,gBAAgB,EAAE,KAAK,CAAC,iBAAiB,CA0MrD,CAAC;AAUF,eAAO,MAAM,uBAAuB,EAAE,KAAK,CAAC,iBAAiB,CAiO5D,CAAC;AASF,UAAU,uBAAuB;IAC/B,WAAW,CAAC,EAAE,MAAM,CAAC;IACrB,YAAY,CAAC,EAAE,MAAM,CAAC;IACtB,KAAK,CAAC,EAAE,MAAM,CAAC;IACf,cAAc,CAAC,EAAE,MAAM,CAAC;IACxB,OAAO,CAAC,EAAE,MAAM,CAAC;CAClB;AAED,eAAO,MAAM,oBAAoB,EAAE,KAAK,CAAC,uBAAuB,CAuB/D,CAAC"}

package/jsx/core/AIButton/AIButton.stories.jsx ADDED Viewed

@@ -0,0 +1,279 @@
+import { useReducer, useState } from 'react';
+import { AIButton, Banner, Button, Checkbox, CheckboxGroup, Configuration, ErrorState, Flex, Form, Grid, Input, Modal, Progress, RadioButton, RadioButtonGroup, Select, Option, TextArea, useModalContext, useModalManager, useToaster } from '@pega/cosmos-react-core';
+import { AIValues, fieldReducer, initFields } from './AIButton.mocks';
+export default {
+    title: 'Core/AIButton',
+    component: AIButton,
+    excludeStories: ['ConfigurableAIButton'],
+    parameters: {
+        layout: 'centered'
+    }
+};
+export const AIButtonDemo = (args) => {
+    return <AIButton label={args.label} disabled={args.disabled}/>;
+};
+AIButtonDemo.args = {
+    label: 'Fill form with AI',
+    disabled: false
+};
+AIButtonDemo.argTypes = {
+    label: { control: { type: 'text' } },
+    disabled: { control: { type: 'boolean' } }
+};
+export const AIButtonFormDemo = (args) => {
+    const [fields, setField] = useReducer(fieldReducer, undefined, initFields);
+    const [bannerMessages, setBannerMessages] = useState([]);
+    const [loadingMessage, setLoadingMessage] = useState('');
+    const [submitting, setSubmitting] = useState(false);
+    const { push } = useToaster();
+    const name = fields.find(field => field.name === 'name');
+    const email = fields.find(field => field.name === 'email');
+    const locations = fields.find(field => field.name === 'locations');
+    const meetings = fields.find(field => field.name === 'meetings');
+    const meals = fields.find(field => field.name === 'meals');
+    const notes = fields.find(field => field.name === 'notes');
+    if (!name || !email || !locations || !meetings || !meals || !notes)
+        return <ErrorState />;
+    const banners = bannerMessages.length > 0 ? <Banner variant='urgent' messages={bannerMessages}/> : undefined;
+    const clearForm = () => {
+        fields.forEach(field => setField({ type: 'cancel', name: field.name, value: undefined }));
+    };
+    const fillWithAI = () => {
+        setLoadingMessage('AI is filling out the form...');
+        setTimeout(() => {
+            if (args.throwAIError) {
+                setBannerMessages(curr => [
+                    'An error occurred while generating responses from the AI.',
+                    ...curr
+                ]);
+            }
+            else {
+                const values = AIValues[Math.floor(Math.random() * AIValues.length)];
+                Object.keys(values).forEach(field => {
+                    setField({ type: 'ai', name: field, value: values[field] });
+                });
+            }
+            setLoadingMessage('');
+        }, 2000);
+    };
+    const trySubmit = () => {
+        const errors = [];
+        fields.forEach(field => {
+            setField({ type: 'submit', name: field.name, value: field.value });
+            const error = field.validator?.() || '';
+            if (error)
+                errors.push(error);
+        });
+        setBannerMessages(errors);
+        if (errors.length === 0) {
+            setSubmitting(true);
+            setLoadingMessage('Submitting form...');
+            setTimeout(() => {
+                setLoadingMessage('');
+                setSubmitting(false);
+                push({ content: 'Form submitted!' });
+                clearForm();
+            }, 1000);
+        }
+    };
+    return (<Form heading='AI Form' description='The AI in this demo is a mock and not a functional AI.' actions={<>
+          <Button onClick={clearForm} disabled={submitting}>
+            Cancel
+          </Button>
+          <Flex container={{ alignItems: 'center', gap: 1 }}>
+            <AIButton label='Fill form with AI' onClick={fillWithAI} disabled={!!loadingMessage}/>
+            <Button variant='primary' disabled={!!loadingMessage} onClick={trySubmit}>
+              Submit
+            </Button>
+          </Flex>
+        </>} banners={banners} style={{ margin: 'auto', maxWidth: '37.5rem' }}>
+      <Progress visible={!!loadingMessage} focusOnVisible message={loadingMessage}/>
+      <Grid container={{ gap: 1, cols: `repeat(2, minmax(0, 1fr))` }}>
+        <Input name={name.name} label={name.label} required={name.required} info={name.info || name.help} value={name.value} status={name.status} onChange={(e) => setField({ type: 'change', name: e.target.name, value: e.target.value })} onBlur={(e) => setField({ type: 'blur', name: e.target.name, value: e.target.value })}/>
+        <Input name={email.name} label={email.label} required={email.required} info={email.info || email.help} value={email.value} status={email.status} type='email' onChange={(e) => setField({ type: 'change', name: e.target.name, value: e.target.value })} onBlur={(e) => setField({ type: 'blur', name: e.target.name, value: e.target.value })}/>
+        <Grid item={{ colStartEnd: '1/-1' }}>
+          <CheckboxGroup name={locations.name} label={locations.label} required={locations.required} info={locations.info || locations.help} status={locations.status}>
+            {['Cambridge', 'Waltham', 'Krakow', 'Hyderabad', 'Bangalore'].map(office => (<Checkbox key={office} label={office} value={office} checked={locations.value?.includes(office)} onChange={(e) => setField({
+                type: 'change',
+                name: e.target.name,
+                value: e.target.value
+            })}/>))}
+          </CheckboxGroup>
+        </Grid>
+        <Grid item={{ colStartEnd: '1/-1' }}>
+          <RadioButtonGroup name={meetings.name} label={meetings.label} required={meetings.required} info={meetings.info || meetings.help} status={meetings.status}>
+            {['Yes', 'No'].map(option => (<RadioButton key={option} label={option} value={option} checked={meetings.value === option} onChange={(e) => setField({ type: 'change', name: e.target.name, value: e.target.value })}/>))}
+          </RadioButtonGroup>
+        </Grid>
+        <Select name={meals.name} label={meals.label} required={meals.required} info={meals.info || meals.help} value={meals.value || 'choose meal...'} status={meals.status} onChange={(e) => setField({ type: 'change', name: e.target.name, value: e.target.value })}>
+          <Option>choose meal...</Option>
+          <Option>Pizza</Option>
+          <Option>Sandwich</Option>
+          <Option>Salad</Option>
+        </Select>
+        <Grid item={{ colStartEnd: '1/-1' }}>
+          <TextArea name={notes.name} label={notes.label} required={notes.required} info={notes.info || notes.help} value={notes.value} status={notes.status} maxLength={200} displayCharCount onChange={(e) => setField({ type: 'change', name: e.target.name, value: e.target.value })} onBlur={(e) => setField({ type: 'blur', name: e.target.name, value: e.target.value })}/>
+        </Grid>
+      </Grid>
+    </Form>);
+};
+AIButtonFormDemo.args = {
+    throwAIError: false
+};
+AIButtonFormDemo.argTypes = {
+    throwAIError: { control: { type: 'boolean' } }
+};
+export const AIButtonFormInModalDemo = (args) => {
+    const AIModal = () => {
+        const [fields, setField] = useReducer(fieldReducer, undefined, initFields);
+        const [bannerMessages, setBannerMessages] = useState([]);
+        const [loadingMessage, setLoadingMessage] = useState('');
+        const [submitting, setSubmitting] = useState(false);
+        const { push } = useToaster();
+        const { dismiss } = useModalContext();
+        const name = fields.find(field => field.name === 'name');
+        const email = fields.find(field => field.name === 'email');
+        const locations = fields.find(field => field.name === 'locations');
+        const meetings = fields.find(field => field.name === 'meetings');
+        const meals = fields.find(field => field.name === 'meals');
+        const notes = fields.find(field => field.name === 'notes');
+        if (!name || !email || !locations || !meetings || !meals || !notes)
+            return <ErrorState />;
+        const banners = bannerMessages.length > 0 ? <Banner variant='urgent' messages={bannerMessages}/> : undefined;
+        const fillWithAI = () => {
+            setLoadingMessage('AI is filling out the form...');
+            setTimeout(() => {
+                if (args.throwAIError) {
+                    setBannerMessages(curr => [
+                        'An error occurred while generating responses from the AI.',
+                        ...curr
+                    ]);
+                }
+                else {
+                    const values = AIValues[Math.floor(Math.random() * AIValues.length)];
+                    Object.keys(values).forEach(field => {
+                        setField({ type: 'ai', name: field, value: values[field] });
+                    });
+                }
+                setLoadingMessage('');
+            }, 2000);
+        };
+        const trySubmit = () => {
+            const errors = [];
+            fields.forEach(field => {
+                setField({ type: 'submit', name: field.name, value: field.value });
+                const error = field.validator?.() || '';
+                if (error)
+                    errors.push(error);
+            });
+            setBannerMessages(errors);
+            if (errors.length === 0) {
+                setSubmitting(true);
+                setLoadingMessage('Submitting form...');
+                setTimeout(() => {
+                    setLoadingMessage('');
+                    setSubmitting(false);
+                    push({ content: 'Form submitted!' });
+                    dismiss();
+                }, 1000);
+            }
+        };
+        return (<Modal heading='AI Form in a Modal' progress={loadingMessage ? { message: loadingMessage } : undefined} onRequestDismiss={() => !submitting} actions={<>
+            <Button onClick={dismiss} disabled={submitting}>
+              Cancel
+            </Button>
+            <Flex container={{ alignItems: 'center', gap: 1 }}>
+              <AIButton label='Fill form with AI' onClick={fillWithAI} disabled={!!loadingMessage}/>
+              <Button variant='primary' disabled={!!loadingMessage} onClick={trySubmit}>
+                Submit
+              </Button>
+            </Flex>
+          </>}>
+        <Form description='The AI in this demo is a mock and not a functional AI.' banners={banners} style={{ margin: 'auto', maxWidth: '37.5rem' }}>
+          <Grid container={{ gap: 1, cols: `repeat(2, minmax(0, 1fr))` }}>
+            <Input name={name.name} label={name.label} required={name.required} info={name.info || name.help} value={name.value} status={name.status} onChange={(e) => setField({ type: 'change', name: e.target.name, value: e.target.value })} onBlur={(e) => setField({ type: 'blur', name: e.target.name, value: e.target.value })}/>
+            <Input name={email.name} label={email.label} required={email.required} info={email.info || email.help} value={email.value} status={email.status} type='email' onChange={(e) => setField({ type: 'change', name: e.target.name, value: e.target.value })} onBlur={(e) => setField({ type: 'blur', name: e.target.name, value: e.target.value })}/>
+            <Grid item={{ colStartEnd: '1/-1' }}>
+              <CheckboxGroup name={locations.name} label={locations.label} required={locations.required} info={locations.info || locations.help} status={locations.status}>
+                {['Cambridge', 'Waltham', 'Krakow', 'Hyderabad', 'Bangalore'].map(office => (<Checkbox key={office} label={office} value={office} checked={locations.value?.includes(office)} onChange={(e) => setField({
+                    type: 'change',
+                    name: e.target.name,
+                    value: e.target.value
+                })}/>))}
+              </CheckboxGroup>
+            </Grid>
+            <Grid item={{ colStartEnd: '1/-1' }}>
+              <RadioButtonGroup name={meetings.name} label={meetings.label} required={meetings.required} info={meetings.info || meetings.help} status={meetings.status}>
+                {['Yes', 'No'].map(option => (<RadioButton key={option} label={option} value={option} checked={meetings.value === option} onChange={(e) => setField({ type: 'change', name: e.target.name, value: e.target.value })}/>))}
+              </RadioButtonGroup>
+            </Grid>
+            <Select name={meals.name} label={meals.label} required={meals.required} info={meals.info || meals.help} value={meals.value || 'choose meal...'} status={meals.status} onChange={(e) => setField({ type: 'change', name: e.target.name, value: e.target.value })}>
+              <Option>choose meal...</Option>
+              <Option>Pizza</Option>
+              <Option>Sandwich</Option>
+              <Option>Salad</Option>
+            </Select>
+            <Grid item={{ colStartEnd: '1/-1' }}>
+              <TextArea name={notes.name} label={notes.label} required={notes.required} info={notes.info || notes.help} value={notes.value} status={notes.status} maxLength={200} displayCharCount onChange={(e) => setField({ type: 'change', name: e.target.name, value: e.target.value })} onBlur={(e) => setField({ type: 'blur', name: e.target.name, value: e.target.value })}/>
+            </Grid>
+          </Grid>
+        </Form>
+      </Modal>);
+    };
+    const ModalButton = () => {
+        const { create } = useModalManager();
+        return (<Button onClick={() => {
+                create(AIModal);
+            }}>
+        Open Modal
+      </Button>);
+    };
+    return <ModalButton />;
+};
+AIButtonFormInModalDemo.args = {
+    throwAIError: false
+};
+AIButtonFormInModalDemo.argTypes = {
+    throwAIError: { control: { type: 'boolean' } }
+};
+export const ConfigurableAIButton = (args) => {
+    return (<Configuration theme={{
+            base: {
+                palette: {
+                    ai: args.color
+                }
+            },
+            components: {
+                button: {
+                    'border-width': args.borderWidth,
+                    'border-radius': args.borderRadius,
+                    padding: args.padding
+                }
+            }
+        }}>
+      <AIButton label='Configurable Button'/>
+    </Configuration>);
+};
+ConfigurableAIButton.args = {
+    borderWidth: '0.0625rem',
+    borderRadius: 9999,
+    color: '#681fc3',
+    padding: '0rem 1rem'
+};
+ConfigurableAIButton.argTypes = {
+    borderWidth: { control: { type: 'text' } },
+    borderRadius: { control: { type: 'number' } },
+    color: { control: { type: 'color' } },
+    padding: { control: { type: 'text' } }
+};
+//# sourceMappingURL=AIButton.stories.jsx.map

package/jsx/core/AIButton/AIButton.stories.jsx.map ADDED Viewed

@@ -0,0 +1 @@

+ {"version":3,"file":"AIButton.stories.jsx","sourceRoot":"","sources":["../../../src/core/AIButton/AIButton.stories.tsx"],"names":[],"mappings":"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","sourcesContent":["import { ChangeEvent, FocusEvent, useReducer, useState } from 'react';\nimport { Meta, Story } from '@storybook/react';\n\nimport {\n AIButton,\n AIButtonProps,\n Banner,\n Button,\n Checkbox,\n CheckboxGroup,\n Configuration,\n ErrorState,\n Flex,\n Form,\n Grid,\n Input,\n Modal,\n Progress,\n RadioButton,\n RadioButtonGroup,\n Select,\n Option,\n TextArea,\n useModalContext,\n useModalManager,\n useToaster\n} from '@pega/cosmos-react-core';\n\nimport { AIValues, fieldReducer, initFields } from './AIButton.mocks';\n\nexport default {\n title: 'Core/AIButton',\n component: AIButton,\n excludeStories: ['ConfigurableAIButton'],\n parameters: {\n layout: 'centered'\n }\n} as Meta;\n\nexport const AIButtonDemo: Story<AIButtonProps> = (args: AIButtonProps) => {\n return <AIButton label={args.label} disabled={args.disabled} />;\n};\n\nAIButtonDemo.args = {\n label: 'Fill form with AI',\n disabled: false\n};\n\nAIButtonDemo.argTypes = {\n label: { control: { type: 'text' } },\n disabled: { control: { type: 'boolean' } }\n};\n\ninterface AIButtonFormProps {\n throwAIError: boolean;\n}\n\nexport const AIButtonFormDemo: Story<AIButtonFormProps> = (args: AIButtonFormProps) => {\n const [fields, setField] = useReducer(fieldReducer, undefined, initFields);\n const [bannerMessages, setBannerMessages] = useState<string[]>([]);\n const [loadingMessage, setLoadingMessage] = useState('');\n const [submitting, setSubmitting] = useState(false);\n\n const { push } = useToaster();\n\n const name = fields.find(field => field.name === 'name');\n const email = fields.find(field => field.name === 'email');\n const locations = fields.find(field => field.name === 'locations');\n const meetings = fields.find(field => field.name === 'meetings');\n const meals = fields.find(field => field.name === 'meals');\n const notes = fields.find(field => field.name === 'notes');\n\n if (!name || !email || !locations || !meetings || !meals || !notes) return <ErrorState />;\n\n const banners =\n bannerMessages.length > 0 ? <Banner variant='urgent' messages={bannerMessages} /> : undefined;\n\n const clearForm = () => {\n fields.forEach(field => setField({ type: 'cancel', name: field.name, value: undefined }));\n };\n\n const fillWithAI = () => {\n setLoadingMessage('AI is filling out the form...');\n setTimeout(() => {\n if (args.throwAIError) {\n setBannerMessages(curr => [\n 'An error occurred while generating responses from the AI.',\n ...curr\n ]);\n } else {\n const values = AIValues[Math.floor(Math.random() * AIValues.length)];\n Object.keys(values).forEach(field => {\n setField({ type: 'ai', name: field, value: values[field as keyof typeof values] });\n });\n }\n setLoadingMessage('');\n }, 2000);\n };\n\n const trySubmit = () => {\n const errors: string[] = [];\n fields.forEach(field => {\n setField({ type: 'submit', name: field.name, value: field.value });\n const error = field.validator?.() || '';\n if (error) errors.push(error);\n });\n setBannerMessages(errors);\n\n if (errors.length === 0) {\n setSubmitting(true);\n setLoadingMessage('Submitting form...');\n setTimeout(() => {\n setLoadingMessage('');\n setSubmitting(false);\n push({ content: 'Form submitted!' });\n clearForm();\n }, 1000);\n }\n };\n\n return (\n <Form\n heading='AI Form'\n description='The AI in this demo is a mock and not a functional AI.'\n actions={\n <>\n <Button onClick={clearForm} disabled={submitting}>\n Cancel\n </Button>\n <Flex container={{ alignItems: 'center', gap: 1 }}>\n <AIButton label='Fill form with AI' onClick={fillWithAI} disabled={!!loadingMessage} />\n <Button variant='primary' disabled={!!loadingMessage} onClick={trySubmit}>\n Submit\n </Button>\n </Flex>\n </>\n }\n banners={banners}\n style={{ margin: 'auto', maxWidth: '37.5rem' }}\n >\n <Progress visible={!!loadingMessage} focusOnVisible message={loadingMessage} />\n <Grid container={{ gap: 1, cols: `repeat(2, minmax(0, 1fr))` }}>\n <Input\n name={name.name}\n label={name.label}\n required={name.required}\n info={name.info || name.help}\n value={name.value}\n status={name.status}\n onChange={(e: ChangeEvent<HTMLInputElement>) =>\n setField({ type: 'change', name: e.target.name, value: e.target.value })\n }\n onBlur={(e: FocusEvent<HTMLInputElement>) =>\n setField({ type: 'blur', name: e.target.name, value: e.target.value })\n }\n />\n\n <Input\n name={email.name}\n label={email.label}\n required={email.required}\n info={email.info || email.help}\n value={email.value}\n status={email.status}\n type='email'\n onChange={(e: ChangeEvent<HTMLInputElement>) =>\n setField({ type: 'change', name: e.target.name, value: e.target.value })\n }\n onBlur={(e: FocusEvent<HTMLInputElement>) =>\n setField({ type: 'blur', name: e.target.name, value: e.target.value })\n }\n />\n\n <Grid item={{ colStartEnd: '1/-1' }}>\n <CheckboxGroup\n name={locations.name}\n label={locations.label}\n required={locations.required}\n info={locations.info || locations.help}\n status={locations.status}\n >\n {['Cambridge', 'Waltham', 'Krakow', 'Hyderabad', 'Bangalore'].map(office => (\n <Checkbox\n key={office}\n label={office}\n value={office}\n checked={locations.value?.includes(office)}\n onChange={(e: ChangeEvent<HTMLInputElement>) =>\n setField({\n type: 'change',\n name: e.target.name,\n value: e.target.value\n })\n }\n />\n ))}\n </CheckboxGroup>\n </Grid>\n\n <Grid item={{ colStartEnd: '1/-1' }}>\n <RadioButtonGroup\n name={meetings.name}\n label={meetings.label}\n required={meetings.required}\n info={meetings.info || meetings.help}\n status={meetings.status}\n >\n {['Yes', 'No'].map(option => (\n <RadioButton\n key={option}\n label={option}\n value={option}\n checked={meetings.value === option}\n onChange={(e: ChangeEvent<HTMLInputElement>) =>\n setField({ type: 'change', name: e.target.name, value: e.target.value })\n }\n />\n ))}\n </RadioButtonGroup>\n </Grid>\n\n <Select\n name={meals.name}\n label={meals.label}\n required={meals.required}\n info={meals.info || meals.help}\n value={meals.value || 'choose meal...'}\n status={meals.status}\n onChange={(e: ChangeEvent<HTMLSelectElement>) =>\n setField({ type: 'change', name: e.target.name, value: e.target.value })\n }\n >\n <Option>choose meal...</Option>\n <Option>Pizza</Option>\n <Option>Sandwich</Option>\n <Option>Salad</Option>\n </Select>\n\n <Grid item={{ colStartEnd: '1/-1' }}>\n <TextArea\n name={notes.name}\n label={notes.label}\n required={notes.required}\n info={notes.info || notes.help}\n value={notes.value}\n status={notes.status}\n maxLength={200}\n displayCharCount\n onChange={(e: ChangeEvent<HTMLTextAreaElement>) =>\n setField({ type: 'change', name: e.target.name, value: e.target.value })\n }\n onBlur={(e: FocusEvent<HTMLInputElement>) =>\n setField({ type: 'blur', name: e.target.name, value: e.target.value })\n }\n />\n </Grid>\n </Grid>\n </Form>\n );\n};\n\nAIButtonFormDemo.args = {\n throwAIError: false\n};\n\nAIButtonFormDemo.argTypes = {\n throwAIError: { control: { type: 'boolean' } }\n};\n\nexport const AIButtonFormInModalDemo: Story<AIButtonFormProps> = (args: AIButtonFormProps) => {\n const AIModal = () => {\n const [fields, setField] = useReducer(fieldReducer, undefined, initFields);\n const [bannerMessages, setBannerMessages] = useState<string[]>([]);\n const [loadingMessage, setLoadingMessage] = useState('');\n const [submitting, setSubmitting] = useState(false);\n\n const { push } = useToaster();\n const { dismiss } = useModalContext();\n\n const name = fields.find(field => field.name === 'name');\n const email = fields.find(field => field.name === 'email');\n const locations = fields.find(field => field.name === 'locations');\n const meetings = fields.find(field => field.name === 'meetings');\n const meals = fields.find(field => field.name === 'meals');\n const notes = fields.find(field => field.name === 'notes');\n\n if (!name || !email || !locations || !meetings || !meals || !notes) return <ErrorState />;\n\n const banners =\n bannerMessages.length > 0 ? <Banner variant='urgent' messages={bannerMessages} /> : undefined;\n\n const fillWithAI = () => {\n setLoadingMessage('AI is filling out the form...');\n setTimeout(() => {\n if (args.throwAIError) {\n setBannerMessages(curr => [\n 'An error occurred while generating responses from the AI.',\n ...curr\n ]);\n } else {\n const values = AIValues[Math.floor(Math.random() * AIValues.length)];\n Object.keys(values).forEach(field => {\n setField({ type: 'ai', name: field, value: values[field as keyof typeof values] });\n });\n }\n setLoadingMessage('');\n }, 2000);\n };\n\n const trySubmit = () => {\n const errors: string[] = [];\n fields.forEach(field => {\n setField({ type: 'submit', name: field.name, value: field.value });\n const error = field.validator?.() || '';\n if (error) errors.push(error);\n });\n setBannerMessages(errors);\n\n if (errors.length === 0) {\n setSubmitting(true);\n setLoadingMessage('Submitting form...');\n setTimeout(() => {\n setLoadingMessage('');\n setSubmitting(false);\n push({ content: 'Form submitted!' });\n dismiss();\n }, 1000);\n }\n };\n\n return (\n <Modal\n heading='AI Form in a Modal'\n progress={loadingMessage ? { message: loadingMessage } : undefined}\n onRequestDismiss={() => !submitting}\n actions={\n <>\n <Button onClick={dismiss} disabled={submitting}>\n Cancel\n </Button>\n <Flex container={{ alignItems: 'center', gap: 1 }}>\n <AIButton\n label='Fill form with AI'\n onClick={fillWithAI}\n disabled={!!loadingMessage}\n />\n <Button variant='primary' disabled={!!loadingMessage} onClick={trySubmit}>\n Submit\n </Button>\n </Flex>\n </>\n }\n >\n <Form\n description='The AI in this demo is a mock and not a functional AI.'\n banners={banners}\n style={{ margin: 'auto', maxWidth: '37.5rem' }}\n >\n <Grid container={{ gap: 1, cols: `repeat(2, minmax(0, 1fr))` }}>\n <Input\n name={name.name}\n label={name.label}\n required={name.required}\n info={name.info || name.help}\n value={name.value}\n status={name.status}\n onChange={(e: ChangeEvent<HTMLInputElement>) =>\n setField({ type: 'change', name: e.target.name, value: e.target.value })\n }\n onBlur={(e: FocusEvent<HTMLInputElement>) =>\n setField({ type: 'blur', name: e.target.name, value: e.target.value })\n }\n />\n\n <Input\n name={email.name}\n label={email.label}\n required={email.required}\n info={email.info || email.help}\n value={email.value}\n status={email.status}\n type='email'\n onChange={(e: ChangeEvent<HTMLInputElement>) =>\n setField({ type: 'change', name: e.target.name, value: e.target.value })\n }\n onBlur={(e: FocusEvent<HTMLInputElement>) =>\n setField({ type: 'blur', name: e.target.name, value: e.target.value })\n }\n />\n\n <Grid item={{ colStartEnd: '1/-1' }}>\n <CheckboxGroup\n name={locations.name}\n label={locations.label}\n required={locations.required}\n info={locations.info || locations.help}\n status={locations.status}\n >\n {['Cambridge', 'Waltham', 'Krakow', 'Hyderabad', 'Bangalore'].map(office => (\n <Checkbox\n key={office}\n label={office}\n value={office}\n checked={locations.value?.includes(office)}\n onChange={(e: ChangeEvent<HTMLInputElement>) =>\n setField({\n type: 'change',\n name: e.target.name,\n value: e.target.value\n })\n }\n />\n ))}\n </CheckboxGroup>\n </Grid>\n\n <Grid item={{ colStartEnd: '1/-1' }}>\n <RadioButtonGroup\n name={meetings.name}\n label={meetings.label}\n required={meetings.required}\n info={meetings.info || meetings.help}\n status={meetings.status}\n >\n {['Yes', 'No'].map(option => (\n <RadioButton\n key={option}\n label={option}\n value={option}\n checked={meetings.value === option}\n onChange={(e: ChangeEvent<HTMLInputElement>) =>\n setField({ type: 'change', name: e.target.name, value: e.target.value })\n }\n />\n ))}\n </RadioButtonGroup>\n </Grid>\n\n <Select\n name={meals.name}\n label={meals.label}\n required={meals.required}\n info={meals.info || meals.help}\n value={meals.value || 'choose meal...'}\n status={meals.status}\n onChange={(e: ChangeEvent<HTMLSelectElement>) =>\n setField({ type: 'change', name: e.target.name, value: e.target.value })\n }\n >\n <Option>choose meal...</Option>\n <Option>Pizza</Option>\n <Option>Sandwich</Option>\n <Option>Salad</Option>\n </Select>\n\n <Grid item={{ colStartEnd: '1/-1' }}>\n <TextArea\n name={notes.name}\n label={notes.label}\n required={notes.required}\n info={notes.info || notes.help}\n value={notes.value}\n status={notes.status}\n maxLength={200}\n displayCharCount\n onChange={(e: ChangeEvent<HTMLTextAreaElement>) =>\n setField({ type: 'change', name: e.target.name, value: e.target.value })\n }\n onBlur={(e: FocusEvent<HTMLInputElement>) =>\n setField({ type: 'blur', name: e.target.name, value: e.target.value })\n }\n />\n </Grid>\n </Grid>\n </Form>\n </Modal>\n );\n };\n\n const ModalButton = () => {\n const { create } = useModalManager();\n\n return (\n <Button\n onClick={() => {\n create(AIModal);\n }}\n >\n Open Modal\n </Button>\n );\n };\n\n return <ModalButton />;\n};\n\nAIButtonFormInModalDemo.args = {\n throwAIError: false\n};\n\nAIButtonFormInModalDemo.argTypes = {\n throwAIError: { control: { type: 'boolean' } }\n};\ninterface ConfigurableButtonProps {\n borderWidth?: string;\n borderRadius?: number;\n color?: string;\n secondaryColor?: string;\n padding?: string;\n}\n\nexport const ConfigurableAIButton: Story<ConfigurableButtonProps> = (\n args: ConfigurableButtonProps\n) => {\n return (\n <Configuration\n theme={{\n base: {\n palette: {\n ai: args.color\n }\n },\n components: {\n button: {\n 'border-width': args.borderWidth,\n 'border-radius': args.borderRadius,\n padding: args.padding\n }\n }\n }}\n >\n <AIButton label='Configurable Button' />\n </Configuration>\n );\n};\n\nConfigurableAIButton.args = {\n borderWidth: '0.0625rem',\n borderRadius: 9999,\n color: '#681fc3',\n padding: '0rem 1rem'\n};\n\nConfigurableAIButton.argTypes = {\n borderWidth: { control: { type: 'text' } },\n borderRadius: { control: { type: 'number' } },\n color: { control: { type: 'color' } },\n padding: { control: { type: 'text' } }\n};\n"]}

package/jsx/core/FieldGroup/FieldGroup.stories.d.ts.map CHANGED Viewed

	@@ -1 +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;AAE/C,OAAO,EAQL,eAAe,EAChB,MAAM,yBAAyB,CAAC;;AAEjC,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,KAAK,CAAC,oBAAoB,~~CAuDtD~~,CAAC"}
1	+ {"version":3,"file":"FieldGroup.stories.d.ts","sourceRoot":"","sources":["../../../src/core/FieldGroup/FieldGroup.stories.tsx"],"names":[],"mappings":"AACA,OAAO,EAAE,IAAI,EAAE,KAAK,EAAE,MAAM,kBAAkB,CAAC;AAE/C,OAAO,EAQL,eAAe,EAChB,MAAM,yBAAyB,CAAC;;AAEjC,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,KAAK,CAAC,oBAAoB,CAuEtD,CAAC"}

package/jsx/core/FieldGroup/FieldGroup.stories.jsx CHANGED Viewed

@@ -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} headingTag={args.showfirstGroupHeadingTag ? args.firstGroupHeadingTag : undefined} 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} headingTag={args.showsecondGroupHeadingTag ? args.secondGroupHeadingTag : undefined} 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,13 +54,13 @@ export const FieldGroupDemo = (args) => {
 };
 FieldGroupDemo.args = {
     firstGroupName: 'Field group 1',
-    firstGroupHeadingTag: 'h1',
+    firstGroupHeadingTag: undefined,
     showfirstGroupHeadingTag: true,
     firstGroupCollapsible: true,
     firstGroupDescription: '',
     showFirstAdditionalInfo: true,
     secondGroupName: 'Field group 2',
-    secondGroupHeadingTag: 'h1',
+    secondGroupHeadingTag: undefined,
     showsecondGroupHeadingTag: true,
     secondGroupCollapsible: true,
     secondGroupDescription: '',