@pega/cosmos-react-demos 4.0.0-dev.1.2 → 4.0.0-dev.10.0

package/jsx/core/Dialog/Dialog.stories.jsx

@@ -1,79 +1,88 @@
-import { useRef } from 'react';
-import { useState } from '@storybook/addons';
-import { Button, Card, CardContent, CardHeader, Dialog, Flex, Input, Option, Select, Status, SummaryItem, Text, useDialog } from '@pega/cosmos-react-core';
+import { useState } from 'react';
+import { Button, Flex, Text, useElement, InfoDialog, SummaryList } from '@pega/cosmos-react-core';
+import { FieldValueListDemo } from '../FieldValueList/FieldValueList.stories';
+import { ItemDialog, useMockItems } from './Dialog.mocks';
 export default {
-    title: 'Core/Dialog',
-    component: Dialog
+    title: 'Core/Dialog'
 };
-export const DialogDemo = () => {
-    const { target, events } = useDialog();
+export const InfoDialogDemo = () => {
+    const [target, setTarget] = useElement(null);
     return (<>
-      <Button variant='secondary' {...events}>
+      <Button variant='secondary' onClick={(e) => {
+            setTarget(e.currentTarget);
+        }}>
         Open dialog
       </Button>
-      <Dialog heading='My dialog' target={target}>
-        Hello Dialog
-      </Dialog>
+
+      {target && (<InfoDialog heading='General information' target={target} onDismiss={() => setTarget(null)}>
+          <Flex container={{ direction: 'column', gap: 2 }}>
+            <Text as='p'>
+              Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor
+              incididunt 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.
+            </Text>
+            <FieldValueListDemo name='Demo field' value='demo value'/>
+          </Flex>
+        </InfoDialog>)}
     </>);
 };
 export const FormDialogDemo = () => {
-    const editBadgeButton = useRef(null);
-    const editNameButton = useRef(null);
-    const timeoutRef = useRef();
-    const [info, setInfo] = useState({ name: 'James Gregory', badgeType: 'info', badgeText: 'info' });
-    const [name, setName] = useState(() => info.name);
-    const [badgeType, setBadgeType] = useState(() => info.badgeType);
-    const [badgeText, setBadgeText] = useState(() => info.badgeText);
-    const [dialogType, setDialogType] = useState('badge');
-    const { target, events, loading, setLoading } = useDialog();
-    const badgeTypes = ['info', 'pending', 'success', 'urgent', 'warn'];
-    const onOpen = (type) => {
-        setDialogType(type);
-    };
-    const onDialogSubmit = ({ close }) => {
-        setLoading(true);
-        timeoutRef.current = setTimeout(() => {
-            setInfo({ name, badgeText, badgeType });
-            setLoading(false);
-            close();
-            timeoutRef.current = undefined;
-        }, 1000);
-    };
-    const onDialogClose = () => {
-        if (timeoutRef.current) {
-            clearTimeout(timeoutRef.current);
-            setLoading(false);
-        }
-        setName(info.name);
-        setBadgeText(info.badgeText);
-        setBadgeType(info.badgeType);
-    };
-    return (<Card>
-      <CardHeader>
-        <Text variant='h1'>Edit these fields</Text>
-      </CardHeader>
-      <CardContent>
-        <Flex container={{ direction: 'column', gap: 1 }}>
-          <SummaryItem primary={<Text variant='h6'>Badge</Text>} secondary={<Status variant={info.badgeType}>{info.badgeText}</Status>} actions={<Button variant='simple' ref={editBadgeButton} onClick={() => onOpen('badge')} {...events}>
-                Edit
-              </Button>}/>
-          <SummaryItem primary={<Text variant='h6'>Name</Text>} secondary={<Text variant='primary'>{info.name}</Text>} actions={<Button variant='simple' ref={editNameButton} onClick={() => onOpen('name')} {...events}>
-                Edit
-              </Button>}/>
-        </Flex>
-        <Dialog target={target} heading={`Edit ${dialogType}`} placement='bottom-end' onSubmit={onDialogSubmit} onClose={onDialogClose} loading={loading}>
-          <Flex container={{ gap: 1, direction: 'column' }}>
-            {dialogType === 'badge' ? (<>
-                <Select label='Select a badge type' value={badgeType} onChange={e => setBadgeType(e.target.value)}>
-                  {badgeTypes.map(type => (<Option key={type}>{type}</Option>))}
-                </Select>
-                <Input type='text' label='Badge text' value={badgeText} onChange={(e) => setBadgeText(e.target.value)}/>
-              </>) : (<>
-                <Input type='text' label='Text value' value={name} onChange={(e) => setName(e.target.value)}/>
-              </>)}
-          </Flex>
-        </Dialog>
-      </CardContent>
-    </Card>);
+    const [dialogTarget, setDialogTarget] = useState(null);
+    const [editItem, setEditItem] = useState(null);
+    const [items, dispatch] = useMockItems();
+    return (<>
+      <SummaryList name='Editable items' icon='list' count={items.length} actions={[
+            {
+                id: 'Add',
+                text: 'Add',
+                icon: 'plus',
+                onClick: (_, e) => {
+                    setDialogTarget(e.currentTarget);
+                }
+            }
+        ]} items={items.map(({ id, name, category }) => {
+            return {
+                id,
+                primary: name,
+                secondary: <Text variant='secondary'>{category}</Text>,
+                actions: [
+                    {
+                        id: 'Edit',
+                        text: 'Edit',
+                        icon: 'pencil',
+                        onClick: (_, e, menuButton) => {
+                            if (menuButton)
+                                setDialogTarget(menuButton);
+                            setEditItem({
+                                id,
+                                name,
+                                category
+                            });
+                        }
+                    },
+                    {
+                        id: 'Remove',
+                        text: 'Remove',
+                        icon: 'trash',
+                        onClick: () => {
+                            dispatch({ type: 'remove', item: { id } });
+                        }
+                    }
+                ]
+            };
+        })}/>
+
+      {dialogTarget && (<ItemDialog target={dialogTarget} item={editItem} dispatch={fields => {
+                dispatch(editItem
+                    ? { type: 'edit', item: { id: editItem.id, ...fields } }
+                    : { type: 'add', item: { ...fields } });
+            }} onComplete={() => {
+                setDialogTarget(null);
+                setEditItem(null);
+            }}/>)}
+    </>);
 };
 //# sourceMappingURL=Dialog.stories.jsx.map

package/jsx/core/Dialog/Dialog.stories.jsx.map

@@ -1 +1 @@
-{"version":3,"file":"Dialog.stories.jsx","sourceRoot":"","sources":["../../../src/core/Dialog/Dialog.stories.tsx"],"names":[],"mappings":"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","sourcesContent":["import { Meta, Story } from '@storybook/react';\nimport { ChangeEvent, useRef } from 'react';\nimport { useState } from '@storybook/addons';\n\nimport {\n  Button,\n  Card,\n  CardContent,\n  CardHeader,\n  Dialog,\n  Flex,\n  Input,\n  Option,\n  Select,\n  StatusProps,\n  Status,\n  SummaryItem,\n  Text,\n  useDialog,\n  DialogProps\n} from '@pega/cosmos-react-core';\n\nexport default {\n  title: 'Core/Dialog',\n  component: Dialog\n} as Meta;\n\nexport const DialogDemo: Story = () => {\n  const { target, events } = useDialog();\n  return (\n    <>\n      <Button variant='secondary' {...events}>\n        Open dialog\n      </Button>\n      <Dialog heading='My dialog' target={target}>\n        Hello Dialog\n      </Dialog>\n    </>\n  );\n};\n\nexport const FormDialogDemo: Story = () => {\n  const editBadgeButton = useRef(null);\n  const editNameButton = useRef(null);\n  const timeoutRef = useRef<number>();\n  const [info, setInfo] = useState<{\n    name: string;\n    badgeType: StatusProps['variant'];\n    badgeText: string;\n  }>({ name: 'James Gregory', badgeType: 'info', badgeText: 'info' });\n  const [name, setName] = useState(() => info.name);\n  const [badgeType, setBadgeType] = useState<StatusProps['variant']>(() => info.badgeType);\n  const [badgeText, setBadgeText] = useState(() => info.badgeText);\n  const [dialogType, setDialogType] = useState<'badge' | 'name'>('badge');\n  const { target, events, loading, setLoading } = useDialog();\n\n  const badgeTypes: StatusProps['variant'][] = ['info', 'pending', 'success', 'urgent', 'warn'];\n\n  const onOpen = (type: 'badge' | 'name') => {\n    setDialogType(type);\n  };\n\n  const onDialogSubmit: DialogProps['onSubmit'] = ({ close }) => {\n    setLoading(true);\n    timeoutRef.current = setTimeout(() => {\n      setInfo({ name, badgeText, badgeType });\n      setLoading(false);\n      close();\n      timeoutRef.current = undefined;\n    }, 1000) as unknown as number;\n  };\n\n  const onDialogClose: DialogProps['onClose'] = () => {\n    if (timeoutRef.current) {\n      clearTimeout(timeoutRef.current);\n      setLoading(false);\n    }\n    setName(info.name);\n    setBadgeText(info.badgeText);\n    setBadgeType(info.badgeType);\n  };\n\n  return (\n    <Card>\n      <CardHeader>\n        <Text variant='h1'>Edit these fields</Text>\n      </CardHeader>\n      <CardContent>\n        <Flex container={{ direction: 'column', gap: 1 }}>\n          <SummaryItem\n            primary={<Text variant='h6'>Badge</Text>}\n            secondary={<Status variant={info.badgeType}>{info.badgeText}</Status>}\n            actions={\n              <Button\n                variant='simple'\n                ref={editBadgeButton}\n                onClick={() => onOpen('badge')}\n                {...events}\n              >\n                Edit\n              </Button>\n            }\n          />\n          <SummaryItem\n            primary={<Text variant='h6'>Name</Text>}\n            secondary={<Text variant='primary'>{info.name}</Text>}\n            actions={\n              <Button\n                variant='simple'\n                ref={editNameButton}\n                onClick={() => onOpen('name')}\n                {...events}\n              >\n                Edit\n              </Button>\n            }\n          />\n        </Flex>\n        <Dialog\n          target={target}\n          heading={`Edit ${dialogType}`}\n          placement='bottom-end'\n          onSubmit={onDialogSubmit}\n          onClose={onDialogClose}\n          loading={loading}\n        >\n          <Flex container={{ gap: 1, direction: 'column' }}>\n            {dialogType === 'badge' ? (\n              <>\n                <Select\n                  label='Select a badge type'\n                  value={badgeType}\n                  onChange={e => setBadgeType(e.target.value as StatusProps['variant'])}\n                >\n                  {badgeTypes.map(type => (\n                    <Option key={type}>{type}</Option>\n                  ))}\n                </Select>\n                <Input\n                  type='text'\n                  label='Badge text'\n                  value={badgeText}\n                  onChange={(e: ChangeEvent<HTMLInputElement>) => setBadgeText(e.target.value)}\n                />\n              </>\n            ) : (\n              <>\n                <Input\n                  type='text'\n                  label='Text value'\n                  value={name}\n                  onChange={(e: ChangeEvent<HTMLInputElement>) => setName(e.target.value)}\n                />\n              </>\n            )}\n          </Flex>\n        </Dialog>\n      </CardContent>\n    </Card>\n  );\n};\n"]}
+{"version":3,"file":"Dialog.stories.jsx","sourceRoot":"","sources":["../../../src/core/Dialog/Dialog.stories.tsx"],"names":[],"mappings":"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","sourcesContent":["import { Meta, Story } from '@storybook/react';\nimport { MouseEvent, useState } from 'react';\n\nimport {\n  Button,\n  Flex,\n  Text,\n  useElement,\n  InfoDialog,\n  SummaryList,\n  SummaryListItem\n} from '@pega/cosmos-react-core';\n\nimport { FieldValueListDemo } from '../FieldValueList/FieldValueList.stories';\n\nimport { ItemDialog, MockItem, MockItemDialogProps, useMockItems } from './Dialog.mocks';\n\nexport default {\n  title: 'Core/Dialog'\n} as Meta;\n\n// InfoDialogDemo\nexport const InfoDialogDemo: Story = () => {\n  const [target, setTarget] = useElement<HTMLButtonElement>(null);\n\n  return (\n    <>\n      <Button\n        variant='secondary'\n        onClick={(e: MouseEvent<HTMLButtonElement>) => {\n          setTarget(e.currentTarget);\n        }}\n      >\n        Open dialog\n      </Button>\n\n      {target && (\n        <InfoDialog heading='General information' target={target} onDismiss={() => setTarget(null)}>\n          <Flex container={{ direction: 'column', gap: 2 }}>\n            <Text as='p'>\n              Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor\n              incididunt 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            <FieldValueListDemo name='Demo field' value='demo value' />\n          </Flex>\n        </InfoDialog>\n      )}\n    </>\n  );\n};\n\n// FormDialogDemo\nexport const FormDialogDemo: Story = () => {\n  const [dialogTarget, setDialogTarget] = useState<MockItemDialogProps['target'] | null>(null);\n  const [editItem, setEditItem] = useState<MockItem | null>(null);\n  const [items, dispatch] = useMockItems();\n\n  return (\n    <>\n      <SummaryList\n        name='Editable items'\n        icon='list'\n        count={items.length}\n        actions={[\n          {\n            id: 'Add',\n            text: 'Add',\n            icon: 'plus',\n            onClick: (_, e) => {\n              setDialogTarget(e.currentTarget);\n            }\n          }\n        ]}\n        items={items.map<SummaryListItem>(({ id, name, category }) => {\n          return {\n            id,\n            primary: name,\n            secondary: <Text variant='secondary'>{category}</Text>,\n            actions: [\n              {\n                id: 'Edit',\n                text: 'Edit',\n                icon: 'pencil',\n                onClick: (_, e, menuButton) => {\n                  if (menuButton) setDialogTarget(menuButton);\n\n                  setEditItem({\n                    id,\n                    name,\n                    category\n                  });\n                }\n              },\n              {\n                id: 'Remove',\n                text: 'Remove',\n                icon: 'trash',\n                onClick: () => {\n                  dispatch({ type: 'remove', item: { id } });\n                }\n              }\n            ]\n          };\n        })}\n      />\n\n      {dialogTarget && (\n        <ItemDialog\n          target={dialogTarget}\n          item={editItem}\n          // Wrap dispatch so the dialog can only affect the item it creates or updates.\n          dispatch={fields => {\n            dispatch(\n              editItem\n                ? { type: 'edit', item: { id: editItem.id, ...fields } }\n                : { type: 'add', item: { ...fields } }\n            );\n          }}\n          onComplete={() => {\n            setDialogTarget(null);\n            setEditItem(null);\n          }}\n        />\n      )}\n    </>\n  );\n};\n"]}

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

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

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

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

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

@@ -1 +1 @@
-{"version":3,"file":"Form.stories.d.ts","sourceRoot":"","sources":["../../../src/core/Form/Form.stories.tsx"],"names":[],"mappings":"AAAA,OAAO,EAAE,IAAI,EAAE,KAAK,EAAE,MAAM,kBAAkB,CAAC;;AAe/C,wBAeU;AACV,UAAU,cAAc;IACtB,OAAO,CAAC,EAAE,MAAM,CAAC;IACjB,WAAW,CAAC,EAAE,MAAM,CAAC;CACtB;AAED,eAAO,MAAM,qBAAqB,EAAE,KAAK,CAAC,cAAc,CASvD,CAAC;AAEF,eAAO,MAAM,aAAa,EAAE,KAAK,CAAC,cAAc,CAE/C,CAAC;AAEF,eAAO,MAAM,aAAa,EAAE,KAAK,CAAC,cAAc,CAE/C,CAAC;AAEF,eAAO,MAAM,eAAe,EAAE,KAAK,CAAC,cAAc,CAEjD,CAAC;AAEF,eAAO,MAAM,cAAc,EAAE,KAAK,CAAC,cAAc,GAAG;IAAE,WAAW,CAAC,EAAE,OAAO,CAAA;CAAE,CA+D5E,CAAC;AAUF,UAAU,qBAAsB,SAAQ,cAAc;IACpD,eAAe,CAAC,EAAE,MAAM,CAAC;IACzB,eAAe,CAAC,EAAE,MAAM,CAAC;IACzB,WAAW,CAAC,EAAE,MAAM,CAAC;IACrB,WAAW,CAAC,EAAE,MAAM,CAAC;IACrB,YAAY,CAAC,EAAE,MAAM,CAAC;IACtB,gBAAgB,CAAC,EAAE,MAAM,CAAC;IAC1B,gBAAgB,CAAC,EAAE,MAAM,CAAC;CAC3B;AAED,eAAO,MAAM,gBAAgB,EAAE,KAAK,CAAC,qBAAqB,CAwBzD,CAAC"}
+{"version":3,"file":"Form.stories.d.ts","sourceRoot":"","sources":["../../../src/core/Form/Form.stories.tsx"],"names":[],"mappings":"AAAA,OAAO,EAAE,IAAI,EAAE,KAAK,EAAE,MAAM,kBAAkB,CAAC;;AAe/C,wBAeU;AACV,UAAU,cAAc;IACtB,OAAO,CAAC,EAAE,MAAM,CAAC;IACjB,WAAW,CAAC,EAAE,MAAM,CAAC;CACtB;AAED,eAAO,MAAM,qBAAqB,EAAE,KAAK,CAAC,cAAc,CASvD,CAAC;AAEF,eAAO,MAAM,aAAa,EAAE,KAAK,CAAC,cAAc,CAE/C,CAAC;AAEF,eAAO,MAAM,aAAa,EAAE,KAAK,CAAC,cAAc,CAE/C,CAAC;AAEF,eAAO,MAAM,eAAe,EAAE,KAAK,CAAC,cAAc,CAEjD,CAAC;AAEF,eAAO,MAAM,cAAc,EAAE,KAAK,CAAC,cAAc,GAAG;IAAE,WAAW,CAAC,EAAE,OAAO,CAAA;CAAE,CAqD5E,CAAC;AAUF,UAAU,qBAAsB,SAAQ,cAAc;IACpD,eAAe,CAAC,EAAE,MAAM,CAAC;IACzB,eAAe,CAAC,EAAE,MAAM,CAAC;IACzB,WAAW,CAAC,EAAE,MAAM,CAAC;IACrB,WAAW,CAAC,EAAE,MAAM,CAAC;IACrB,YAAY,CAAC,EAAE,MAAM,CAAC;IACtB,gBAAgB,CAAC,EAAE,MAAM,CAAC;IAC1B,gBAAgB,CAAC,EAAE,MAAM,CAAC;CAC3B;AAED,eAAO,MAAM,gBAAgB,EAAE,KAAK,CAAC,qBAAqB,CAwBzD,CAAC"}

package/jsx/core/Form/Form.stories.jsx

@@ -40,8 +40,8 @@ export const SimpleFormDemo = (args) => {
         Submit
       </Button>
     </>);
-    const successBanner = (<Banner id='success' variant='success' heading='Success' messages={['Form submitted', `Input value: ${success}`]}/>);
-    const errorBanner = (<Banner id='error' variant='urgent' heading='Error' messages={['All required fields in the form must be completed.']}/>);
+    const successBanner = (<Banner variant='success' messages={['Form submitted', `Input value: ${success}`]}/>);
+    const errorBanner = (<Banner variant='urgent' messages={['All required fields in the form must be completed.']}/>);
     const banner = success ? successBanner : errorBanner;
     return (<Form banners={args.withBanners ? banner : undefined} actions={actions} heading={args.heading} description={args.description} onSubmit={(e) => {
             e.preventDefault();

package/jsx/core/Form/Form.stories.jsx.map

@@ -1 +1 @@
-{"version":3,"file":"Form.stories.jsx","sourceRoot":"","sources":["../../../src/core/Form/Form.stories.tsx"],"names":[],"mappings":"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","sourcesContent":["import { Meta, Story } from '@storybook/react';\nimport { ChangeEvent, FormEvent, useState } from 'react';\n\nimport {\n  Banner,\n  Button,\n  Configuration,\n  Flex,\n  Form,\n  FormField,\n  Input\n} from '@pega/cosmos-react-core';\n\nimport { FormContent, ReadOnlyFormContent } from './Form.mocks';\n\nexport default {\n  title: 'Core/Form',\n  component: Form,\n  subcomponents: {\n    FormField\n  },\n  excludeStories: ['ConfigurableForm'],\n  args: {\n    heading: 'Form demo',\n    description: ''\n  },\n  argTypes: {\n    heading: { control: { type: 'text' } },\n    description: { control: { type: 'text' } }\n  }\n} as Meta;\ninterface FormStoryProps {\n  heading?: string;\n  description?: string;\n}\n\nexport const ReadOnlyOneColumnForm: Story<FormStoryProps> = (args: FormStoryProps) => {\n  return (\n    <ReadOnlyFormContent\n      cols={1}\n      heading={args.heading}\n      description={args.description}\n      showActions\n    />\n  );\n};\n\nexport const OneColumnForm: Story<FormStoryProps> = (args: FormStoryProps) => {\n  return <FormContent cols={1} heading={args.heading} description={args.description} showActions />;\n};\n\nexport const TwoColumnForm: Story<FormStoryProps> = (args: FormStoryProps) => {\n  return <FormContent cols={2} heading={args.heading} description={args.description} showActions />;\n};\n\nexport const ThreeColumnForm: Story<FormStoryProps> = (args: FormStoryProps) => {\n  return <FormContent cols={3} heading={args.heading} description={args.description} showActions />;\n};\n\nexport const SimpleFormDemo: Story<FormStoryProps & { withBanners?: boolean }> = (\n  args: FormStoryProps & { withBanners?: boolean }\n) => {\n  const [inputValue, setInputValue] = useState('');\n  const [success, setSuccess] = useState('');\n\n  const actions = (\n    <>\n      <Button name='Cancel' variant='secondary' onClick={() => setInputValue('')}>\n        Cancel\n      </Button>\n      <Button name='Submit' type='submit' variant='primary'>\n        Submit\n      </Button>\n    </>\n  );\n\n  const successBanner = (\n    <Banner\n      id='success'\n      variant='success'\n      heading='Success'\n      messages={['Form submitted', `Input value: ${success}`]}\n    />\n  );\n\n  const errorBanner = (\n    <Banner\n      id='error'\n      variant='urgent'\n      heading='Error'\n      messages={['All required fields in the form must be completed.']}\n    />\n  );\n\n  const banner = success ? successBanner : errorBanner;\n\n  return (\n    <Form\n      banners={args.withBanners ? banner : undefined}\n      actions={actions}\n      heading={args.heading}\n      description={args.description}\n      onSubmit={(e: FormEvent) => {\n        e.preventDefault();\n        setSuccess(inputValue);\n        setInputValue('');\n      }}\n    >\n      <Flex container={{ direction: 'column', itemGap: 2 }}>\n        <Input\n          label='Name'\n          info='Enter your first name'\n          required\n          value={inputValue}\n          onChange={(e: ChangeEvent<HTMLInputElement>) => {\n            setSuccess('');\n            setInputValue(e.target.value);\n          }}\n        />\n      </Flex>\n    </Form>\n  );\n};\n\nSimpleFormDemo.args = {\n  withBanners: false\n};\n\nSimpleFormDemo.argTypes = {\n  withBanners: { control: { type: 'boolean' } }\n};\n\ninterface ConfigurableFormProps extends FormStoryProps {\n  foregroundColor?: string;\n  backgroundColor?: string;\n  borderColor?: string;\n  borderWidth?: string;\n  borderRadius?: number;\n  hoverBorderColor?: string;\n  focusBorderColor?: string;\n}\n\nexport const ConfigurableForm: Story<ConfigurableFormProps> = (args: ConfigurableFormProps) => {\n  return (\n    <Configuration\n      theme={{\n        components: {\n          'form-control': {\n            'foreground-color': args.foregroundColor,\n            'background-color': args.backgroundColor,\n            'border-color': args.borderColor,\n            'border-width': args.borderWidth,\n            'border-radius': args.borderRadius,\n            ':hover': {\n              'border-color': args.hoverBorderColor\n            },\n            ':focus': {\n              'border-color': args.focusBorderColor\n            }\n          }\n        }\n      }}\n    >\n      <FormContent cols={2} showActions />\n    </Configuration>\n  );\n};\n\nConfigurableForm.args = {\n  foregroundColor: '#054a8a',\n  backgroundColor: '#e2f1ff',\n  borderColor: '#939393',\n  borderWidth: '0.0625rem',\n  borderRadius: 0.5,\n  hoverBorderColor: '#3f3f3f',\n  focusBorderColor: 'transparent'\n};\n\nConfigurableForm.argTypes = {\n  foregroundColor: { control: { type: 'color' } },\n  backgroundColor: { control: { type: 'color' } },\n  borderColor: { control: { type: 'color' } },\n  borderWidth: { control: { type: 'text' } },\n  borderRadius: { control: { type: 'number' } },\n  hoverBorderColor: { control: { type: 'color' } },\n  focusBorderColor: { control: { type: 'color' } },\n  heading: { table: { disable: true } },\n  description: { table: { disable: true } }\n};\n"]}
+{"version":3,"file":"Form.stories.jsx","sourceRoot":"","sources":["../../../src/core/Form/Form.stories.tsx"],"names":[],"mappings":"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","sourcesContent":["import { Meta, Story } from '@storybook/react';\nimport { ChangeEvent, FormEvent, useState } from 'react';\n\nimport {\n  Banner,\n  Button,\n  Configuration,\n  Flex,\n  Form,\n  FormField,\n  Input\n} from '@pega/cosmos-react-core';\n\nimport { FormContent, ReadOnlyFormContent } from './Form.mocks';\n\nexport default {\n  title: 'Core/Form',\n  component: Form,\n  subcomponents: {\n    FormField\n  },\n  excludeStories: ['ConfigurableForm'],\n  args: {\n    heading: 'Form demo',\n    description: ''\n  },\n  argTypes: {\n    heading: { control: { type: 'text' } },\n    description: { control: { type: 'text' } }\n  }\n} as Meta;\ninterface FormStoryProps {\n  heading?: string;\n  description?: string;\n}\n\nexport const ReadOnlyOneColumnForm: Story<FormStoryProps> = (args: FormStoryProps) => {\n  return (\n    <ReadOnlyFormContent\n      cols={1}\n      heading={args.heading}\n      description={args.description}\n      showActions\n    />\n  );\n};\n\nexport const OneColumnForm: Story<FormStoryProps> = (args: FormStoryProps) => {\n  return <FormContent cols={1} heading={args.heading} description={args.description} showActions />;\n};\n\nexport const TwoColumnForm: Story<FormStoryProps> = (args: FormStoryProps) => {\n  return <FormContent cols={2} heading={args.heading} description={args.description} showActions />;\n};\n\nexport const ThreeColumnForm: Story<FormStoryProps> = (args: FormStoryProps) => {\n  return <FormContent cols={3} heading={args.heading} description={args.description} showActions />;\n};\n\nexport const SimpleFormDemo: Story<FormStoryProps & { withBanners?: boolean }> = (\n  args: FormStoryProps & { withBanners?: boolean }\n) => {\n  const [inputValue, setInputValue] = useState('');\n  const [success, setSuccess] = useState('');\n\n  const actions = (\n    <>\n      <Button name='Cancel' variant='secondary' onClick={() => setInputValue('')}>\n        Cancel\n      </Button>\n      <Button name='Submit' type='submit' variant='primary'>\n        Submit\n      </Button>\n    </>\n  );\n\n  const successBanner = (\n    <Banner variant='success' messages={['Form submitted', `Input value: ${success}`]} />\n  );\n\n  const errorBanner = (\n    <Banner variant='urgent' messages={['All required fields in the form must be completed.']} />\n  );\n\n  const banner = success ? successBanner : errorBanner;\n\n  return (\n    <Form\n      banners={args.withBanners ? banner : undefined}\n      actions={actions}\n      heading={args.heading}\n      description={args.description}\n      onSubmit={(e: FormEvent) => {\n        e.preventDefault();\n        setSuccess(inputValue);\n        setInputValue('');\n      }}\n    >\n      <Flex container={{ direction: 'column', itemGap: 2 }}>\n        <Input\n          label='Name'\n          info='Enter your first name'\n          required\n          value={inputValue}\n          onChange={(e: ChangeEvent<HTMLInputElement>) => {\n            setSuccess('');\n            setInputValue(e.target.value);\n          }}\n        />\n      </Flex>\n    </Form>\n  );\n};\n\nSimpleFormDemo.args = {\n  withBanners: false\n};\n\nSimpleFormDemo.argTypes = {\n  withBanners: { control: { type: 'boolean' } }\n};\n\ninterface ConfigurableFormProps extends FormStoryProps {\n  foregroundColor?: string;\n  backgroundColor?: string;\n  borderColor?: string;\n  borderWidth?: string;\n  borderRadius?: number;\n  hoverBorderColor?: string;\n  focusBorderColor?: string;\n}\n\nexport const ConfigurableForm: Story<ConfigurableFormProps> = (args: ConfigurableFormProps) => {\n  return (\n    <Configuration\n      theme={{\n        components: {\n          'form-control': {\n            'foreground-color': args.foregroundColor,\n            'background-color': args.backgroundColor,\n            'border-color': args.borderColor,\n            'border-width': args.borderWidth,\n            'border-radius': args.borderRadius,\n            ':hover': {\n              'border-color': args.hoverBorderColor\n            },\n            ':focus': {\n              'border-color': args.focusBorderColor\n            }\n          }\n        }\n      }}\n    >\n      <FormContent cols={2} showActions />\n    </Configuration>\n  );\n};\n\nConfigurableForm.args = {\n  foregroundColor: '#054a8a',\n  backgroundColor: '#e2f1ff',\n  borderColor: '#939393',\n  borderWidth: '0.0625rem',\n  borderRadius: 0.5,\n  hoverBorderColor: '#3f3f3f',\n  focusBorderColor: 'transparent'\n};\n\nConfigurableForm.argTypes = {\n  foregroundColor: { control: { type: 'color' } },\n  backgroundColor: { control: { type: 'color' } },\n  borderColor: { control: { type: 'color' } },\n  borderWidth: { control: { type: 'text' } },\n  borderRadius: { control: { type: 'number' } },\n  hoverBorderColor: { control: { type: 'color' } },\n  focusBorderColor: { control: { type: 'color' } },\n  heading: { table: { disable: true } },\n  description: { table: { disable: true } }\n};\n"]}

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

@@ -2,8 +2,12 @@ import { Meta, Story } from '@storybook/react';
 import { LinkProps } from '@pega/cosmos-react-core';
 declare const _default: Meta<import("@storybook/react").Args>;
 export default _default;
-export declare const LinkDemo: Story<LinkProps>;
-export declare const LinkWithIconDemo: Story;
-export declare const PreviewableLink: Story<LinkProps>;
-export declare const MultiplePreviewableLinks: Story<LinkProps>;
+interface LinkStoryArgs extends Pick<LinkProps, 'variant'> {
+}
+interface PreviewableLinkStoryArgs extends LinkStoryArgs, Pick<LinkProps, 'onPreview'> {
+}
+export declare const LinkDemo: Story<LinkStoryArgs>;
+export declare const ExternalLinkDemo: Story<LinkStoryArgs>;
+export declare const PreviewableLink: Story<PreviewableLinkStoryArgs>;
+export declare const MultiplePreviewableLinks: Story<PreviewableLinkStoryArgs>;
 //# sourceMappingURL=Link.stories.d.ts.map

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

@@ -1 +1 @@
-{"version":3,"file":"Link.stories.d.ts","sourceRoot":"","sources":["../../../src/core/Link/Link.stories.tsx"],"names":[],"mappings":"AAAA,OAAO,EAAE,IAAI,EAAE,KAAK,EAAE,MAAM,kBAAkB,CAAC;AAG/C,OAAO,EAAkC,SAAS,EAAE,MAAM,yBAAyB,CAAC;;AAKpF,wBAYU;AAEV,eAAO,MAAM,QAAQ,EAAE,KAAK,CAAC,SAAS,CAMrC,CAAC;AAEF,eAAO,MAAM,gBAAgB,EAAE,KAoB9B,CAAC;AAMF,eAAO,MAAM,eAAe,EAAE,KAAK,CAAC,SAAS,CAY5C,CAAC;AAEF,eAAO,MAAM,wBAAwB,EAAE,KAAK,CAAC,SAAS,CAuBrD,CAAC"}
+{"version":3,"file":"Link.stories.d.ts","sourceRoot":"","sources":["../../../src/core/Link/Link.stories.tsx"],"names":[],"mappings":"AAAA,OAAO,EAAE,IAAI,EAAE,KAAK,EAAE,MAAM,kBAAkB,CAAC;AAG/C,OAAO,EAA4B,SAAS,EAAE,MAAM,yBAAyB,CAAC;;AAK9E,wBAYU;AAEV,UAAU,aAAc,SAAQ,IAAI,CAAC,SAAS,EAAE,SAAS,CAAC;CAAG;AAC7D,UAAU,wBAAyB,SAAQ,aAAa,EAAE,IAAI,CAAC,SAAS,EAAE,WAAW,CAAC;CAAG;AAEzF,eAAO,MAAM,QAAQ,EAAE,KAAK,CAAC,aAAa,CAMzC,CAAC;AAEF,eAAO,MAAM,gBAAgB,EAAE,KAAK,CAAC,aAAa,CAMjD,CAAC;AAEF,eAAO,MAAM,eAAe,EAAE,KAAK,CAAC,wBAAwB,CAa3D,CAAC;AAEF,eAAO,MAAM,wBAAwB,EAAE,KAAK,CAAC,wBAAwB,CAuBpE,CAAC"}

package/jsx/core/Link/Link.stories.jsx

@@ -1,5 +1,5 @@
 import { action } from '@storybook/addon-actions';
-import { Icon, registerIcon, Flex, Link } from '@pega/cosmos-react-core';
+import { registerIcon, Flex, Link } from '@pega/cosmos-react-core';
 import * as plusIcon from '@pega/cosmos-react-core/lib/components/Icon/icons/plus.icon';
 registerIcon(plusIcon);
 export default {
@@ -16,44 +16,27 @@ export default {
     }
 };
 export const LinkDemo = (args) => {
-    return (<Link href='http://www.pega.com' variant={args.variant} target='_blank'>
-      Visit Pega!
+    return (<Link href='/' variant={args.variant}>
+      Link text
     </Link>);
 };
-export const LinkWithIconDemo = () => {
-    return (<Flex container={{ alignItems: 'center' }}>
-      <Link href='http://www.pega.com' variant='primary' icon target='_blank'>
-        <Icon name='plus'/>
-      </Link>
-      <Link href='http://www.pega.com' variant='secondary' icon target='_blank'>
-        <Icon name='plus'/>
-      </Link>
-      <Link href='http://www.pega.com' variant='simple' icon target='_blank'>
-        <Icon name='plus'/>
-      </Link>
-      <Link href='http://www.pega.com' variant='link' icon target='_blank'>
-        <Icon name='plus'/>
-      </Link>
-      <Link href='http://www.pega.com' variant='text' icon target='_blank'>
-        <Icon name='plus'/>
-      </Link>
-    </Flex>);
-};
-LinkWithIconDemo.argTypes = {
-    variant: { table: { disable: true } }
+export const ExternalLinkDemo = (args) => {
+    return (<Link href='http://www.pega.com' variant={args.variant}>
+      Visit Pega!
+    </Link>);
 };
 export const PreviewableLink = (args) => {
-    return (<Link href='http://www.pega.com' variant={args.variant} previewable target='_blank' onPreview={args.onPreview || action('Preview activated')}>
-      Visit Pega!
+    return (<Link href='#ID-123456' variant={args.variant} previewable onPreview={args.onPreview || action('Preview activated')}>
+      ID-123456
     </Link>);
 };
 export const MultiplePreviewableLinks = (args) => {
     return (<Flex container={{ gap: 2 }}>
-      <Link href='http://www.pega.com' variant={args.variant} previewable target='_blank' onPreview={args.onPreview || action('Preview activated')}>
-        Visit Pega!
+      <Link href='#ID-123456' variant={args.variant} previewable onPreview={args.onPreview || action('Preview activated')}>
+        ID-123456
       </Link>
-      <Link href='http://www.google.com' variant={args.variant} previewable target='_blank' onPreview={args.onPreview || action('Preview activated')}>
-        Visit Google!
+      <Link href='#ID-ABCDEF' variant={args.variant} previewable onPreview={args.onPreview || action('Preview activated')}>
+        ID-ABCDEF
       </Link>
     </Flex>);
 };

package/jsx/core/Link/Link.stories.jsx.map

@@ -1 +1 @@
-{"version":3,"file":"Link.stories.jsx","sourceRoot":"","sources":["../../../src/core/Link/Link.stories.tsx"],"names":[],"mappings":"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","sourcesContent":["import { Meta, Story } from '@storybook/react';\nimport { action } from '@storybook/addon-actions';\n\nimport { Icon, registerIcon, Flex, Link, LinkProps } from '@pega/cosmos-react-core';\nimport * as plusIcon from '@pega/cosmos-react-core/lib/components/Icon/icons/plus.icon';\n\nregisterIcon(plusIcon);\n\nexport default {\n  title: 'Core/Link',\n  component: Link,\n  args: {\n    variant: 'link'\n  },\n  argTypes: {\n    variant: {\n      options: ['link', 'primary', 'secondary', 'simple', 'text'],\n      control: { type: 'select' }\n    }\n  }\n} as Meta;\n\nexport const LinkDemo: Story<LinkProps> = (args: LinkProps) => {\n  return (\n    <Link href='http://www.pega.com' variant={args.variant} target='_blank'>\n      Visit Pega!\n    </Link>\n  );\n};\n\nexport const LinkWithIconDemo: Story = () => {\n  return (\n    <Flex container={{ alignItems: 'center' }}>\n      <Link href='http://www.pega.com' variant='primary' icon target='_blank'>\n        <Icon name='plus' />\n      </Link>\n      <Link href='http://www.pega.com' variant='secondary' icon target='_blank'>\n        <Icon name='plus' />\n      </Link>\n      <Link href='http://www.pega.com' variant='simple' icon target='_blank'>\n        <Icon name='plus' />\n      </Link>\n      <Link href='http://www.pega.com' variant='link' icon target='_blank'>\n        <Icon name='plus' />\n      </Link>\n      <Link href='http://www.pega.com' variant='text' icon target='_blank'>\n        <Icon name='plus' />\n      </Link>\n    </Flex>\n  );\n};\n\nLinkWithIconDemo.argTypes = {\n  variant: { table: { disable: true } }\n};\n\nexport const PreviewableLink: Story<LinkProps> = (args: LinkProps) => {\n  return (\n    <Link\n      href='http://www.pega.com'\n      variant={args.variant}\n      previewable\n      target='_blank'\n      onPreview={args.onPreview || action('Preview activated')}\n    >\n      Visit Pega!\n    </Link>\n  );\n};\n\nexport const MultiplePreviewableLinks: Story<LinkProps> = (args: LinkProps) => {\n  return (\n    <Flex container={{ gap: 2 }}>\n      <Link\n        href='http://www.pega.com'\n        variant={args.variant}\n        previewable\n        target='_blank'\n        onPreview={args.onPreview || action('Preview activated')}\n      >\n        Visit Pega!\n      </Link>\n      <Link\n        href='http://www.google.com'\n        variant={args.variant}\n        previewable\n        target='_blank'\n        onPreview={args.onPreview || action('Preview activated')}\n      >\n        Visit Google!\n      </Link>\n    </Flex>\n  );\n};\n"]}
+{"version":3,"file":"Link.stories.jsx","sourceRoot":"","sources":["../../../src/core/Link/Link.stories.tsx"],"names":[],"mappings":"AACA,OAAO,EAAE,MAAM,EAAE,MAAM,0BAA0B,CAAC;AAElD,OAAO,EAAE,YAAY,EAAE,IAAI,EAAE,IAAI,EAAa,MAAM,yBAAyB,CAAC;AAC9E,OAAO,KAAK,QAAQ,MAAM,6DAA6D,CAAC;AAExF,YAAY,CAAC,QAAQ,CAAC,CAAC;AAEvB,eAAe;IACb,KAAK,EAAE,WAAW;IAClB,SAAS,EAAE,IAAI;IACf,IAAI,EAAE;QACJ,OAAO,EAAE,MAAM;KAChB;IACD,QAAQ,EAAE;QACR,OAAO,EAAE;YACP,OAAO,EAAE,CAAC,MAAM,EAAE,SAAS,EAAE,WAAW,EAAE,QAAQ,EAAE,MAAM,CAAC;YAC3D,OAAO,EAAE,EAAE,IAAI,EAAE,QAAQ,EAAE;SAC5B;KACF;CACM,CAAC;AAKV,MAAM,CAAC,MAAM,QAAQ,GAAyB,CAAC,IAAmB,EAAE,EAAE;IACpE,OAAO,CACL,CAAC,IAAI,CAAC,IAAI,CAAC,GAAG,CAAC,OAAO,CAAC,CAAC,IAAI,CAAC,OAAO,CAAC,CACnC;;IACF,EAAE,IAAI,CAAC,CACR,CAAC;AACJ,CAAC,CAAC;AAEF,MAAM,CAAC,MAAM,gBAAgB,GAAyB,CAAC,IAAmB,EAAE,EAAE;IAC5E,OAAO,CACL,CAAC,IAAI,CAAC,IAAI,CAAC,qBAAqB,CAAC,OAAO,CAAC,CAAC,IAAI,CAAC,OAAO,CAAC,CACrD;;IACF,EAAE,IAAI,CAAC,CACR,CAAC;AACJ,CAAC,CAAC;AAEF,MAAM,CAAC,MAAM,eAAe,GAAoC,CAC9D,IAA8B,EAC9B,EAAE;IACF,OAAO,CACL,CAAC,IAAI,CACH,IAAI,CAAC,YAAY,CACjB,OAAO,CAAC,CAAC,IAAI,CAAC,OAAO,CAAC,CACtB,WAAW,CACX,SAAS,CAAC,CAAC,IAAI,CAAC,SAAS,IAAI,MAAM,CAAC,mBAAmB,CAAC,CAAC,CAEzD;;IACF,EAAE,IAAI,CAAC,CACR,CAAC;AACJ,CAAC,CAAC;AAEF,MAAM,CAAC,MAAM,wBAAwB,GAAoC,CACvE,IAA8B,EAC9B,EAAE;IACF,OAAO,CACL,CAAC,IAAI,CAAC,SAAS,CAAC,CAAC,EAAE,GAAG,EAAE,CAAC,EAAE,CAAC,CAC1B;MAAA,CAAC,IAAI,CACH,IAAI,CAAC,YAAY,CACjB,OAAO,CAAC,CAAC,IAAI,CAAC,OAAO,CAAC,CACtB,WAAW,CACX,SAAS,CAAC,CAAC,IAAI,CAAC,SAAS,IAAI,MAAM,CAAC,mBAAmB,CAAC,CAAC,CAEzD;;MACF,EAAE,IAAI,CACN;MAAA,CAAC,IAAI,CACH,IAAI,CAAC,YAAY,CACjB,OAAO,CAAC,CAAC,IAAI,CAAC,OAAO,CAAC,CACtB,WAAW,CACX,SAAS,CAAC,CAAC,IAAI,CAAC,SAAS,IAAI,MAAM,CAAC,mBAAmB,CAAC,CAAC,CAEzD;;MACF,EAAE,IAAI,CACR;IAAA,EAAE,IAAI,CAAC,CACR,CAAC;AACJ,CAAC,CAAC","sourcesContent":["import { Meta, Story } from '@storybook/react';\nimport { action } from '@storybook/addon-actions';\n\nimport { registerIcon, Flex, Link, LinkProps } from '@pega/cosmos-react-core';\nimport * as plusIcon from '@pega/cosmos-react-core/lib/components/Icon/icons/plus.icon';\n\nregisterIcon(plusIcon);\n\nexport default {\n  title: 'Core/Link',\n  component: Link,\n  args: {\n    variant: 'link'\n  },\n  argTypes: {\n    variant: {\n      options: ['link', 'primary', 'secondary', 'simple', 'text'],\n      control: { type: 'select' }\n    }\n  }\n} as Meta;\n\ninterface LinkStoryArgs extends Pick<LinkProps, 'variant'> {}\ninterface PreviewableLinkStoryArgs extends LinkStoryArgs, Pick<LinkProps, 'onPreview'> {}\n\nexport const LinkDemo: Story<LinkStoryArgs> = (args: LinkStoryArgs) => {\n  return (\n    <Link href='/' variant={args.variant}>\n      Link text\n    </Link>\n  );\n};\n\nexport const ExternalLinkDemo: Story<LinkStoryArgs> = (args: LinkStoryArgs) => {\n  return (\n    <Link href='http://www.pega.com' variant={args.variant}>\n      Visit Pega!\n    </Link>\n  );\n};\n\nexport const PreviewableLink: Story<PreviewableLinkStoryArgs> = (\n  args: PreviewableLinkStoryArgs\n) => {\n  return (\n    <Link\n      href='#ID-123456'\n      variant={args.variant}\n      previewable\n      onPreview={args.onPreview || action('Preview activated')}\n    >\n      ID-123456\n    </Link>\n  );\n};\n\nexport const MultiplePreviewableLinks: Story<PreviewableLinkStoryArgs> = (\n  args: PreviewableLinkStoryArgs\n) => {\n  return (\n    <Flex container={{ gap: 2 }}>\n      <Link\n        href='#ID-123456'\n        variant={args.variant}\n        previewable\n        onPreview={args.onPreview || action('Preview activated')}\n      >\n        ID-123456\n      </Link>\n      <Link\n        href='#ID-ABCDEF'\n        variant={args.variant}\n        previewable\n        onPreview={args.onPreview || action('Preview activated')}\n      >\n        ID-ABCDEF\n      </Link>\n    </Flex>\n  );\n};\n"]}

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

@@ -1 +1 @@
-{"version":3,"file":"ListToolbar.mocks.d.ts","sourceRoot":"","sources":["../../../src/core/ListToolbar/ListToolbar.mocks.tsx"],"names":[],"mappings":"AAAA,OAAO,EAA8B,QAAQ,EAAwB,MAAM,OAAO,CAAC;AAEnF,OAAO,EAGL,MAAM,EAQP,MAAM,yBAAyB,CAAC;AACjC,OAAO,EAAE,iBAAiB,EAAE,MAAM,sEAAsE,CAAC;AAEzG,eAAO,MAAM,OAAO,EAAE,MAAM,EAIzB,CAAC;AAEJ,eAAO,MAAM,SAAS,EAAE,iBAAiB,CAAC,OAAO,CAIhD,CAAC;AAEF,eAAO,MAAM,0BAA0B,2CAA4C,CAAC;AA6DpF,eAAO,MAAM,cAAc,mBAoB1B,CAAC;AAEF,eAAO,MAAM,aAAa,mBAEzB,CAAC"}
+{"version":3,"file":"ListToolbar.mocks.d.ts","sourceRoot":"","sources":["../../../src/core/ListToolbar/ListToolbar.mocks.tsx"],"names":[],"mappings":"AAAA,OAAO,EAAiB,QAAQ,EAAE,MAAM,OAAO,CAAC;AAEhD,OAAO,EAAE,MAAM,EAAsC,MAAM,yBAAyB,CAAC;AACrF,OAAO,EAAE,iBAAiB,EAAE,MAAM,sEAAsE,CAAC;AAMzG,eAAO,MAAM,OAAO,EAAE,MAAM,EAIzB,CAAC;AAEJ,eAAO,MAAM,SAAS,EAAE,iBAAiB,CAAC,OAAO,CAIhD,CAAC;AAEF,eAAO,MAAM,0BAA0B,2CAA4C,CAAC;AAwDpF,eAAO,MAAM,cAAc,mBAE1B,CAAC;AAEF,eAAO,MAAM,aAAa,mBAEzB,CAAC"}

package/jsx/core/ListToolbar/ListToolbar.mocks.jsx

@@ -1,5 +1,8 @@
-import { createContext, useContext, useState } from 'react';
-import { useAfterInitialEffect, useUID, Input, Select, Option, Flex, Button, Icon, Grid } from '@pega/cosmos-react-core';
+import { createContext } from 'react';
+import { Select, Option, Flex, Button, Icon } from '@pega/cosmos-react-core';
+import { ConditionBuilder } from '@pega/cosmos-react-condition-builder';
+import FieldSelector from '@pega/cosmos-react-condition-builder/lib/components/ConditionBuilder/RhsControls/FieldSelector';
+import { demoFields } from '../../condition-builder/ConditionBuilder/props.mock';
 export const actions = ['Action 1', 'Action 2', 'Action 3'].map(text => ({
     text,
     id: text,
@@ -11,61 +14,53 @@ export const mockViews = [
     { id: '3', text: 'Data view 3', selected: false }
 ];
 export const StagedStateDispatchContext = createContext(() => { });
-const mockFields = Array.from({ length: 10 }, (_, i) => `Field ${i + 1}`);
-const MockCondition = () => {
-    const setStagedState = useContext(StagedStateDispatchContext);
-    const conditionId = useUID();
-    const [localState, setLocalState] = useState({
-        lhs: 'Field 1',
-        comparator: 'Equals',
-        rhs: ''
-    });
-    useAfterInitialEffect(() => {
-        setStagedState({
-            [conditionId]: localState
-        });
-    }, [conditionId, localState, setStagedState]);
-    return (<Grid container={{ gap: 2, cols: 'repeat(3, minmax(0, 1fr))' }}>
-      <Select label='Field' onChange={(e) => {
-            setLocalState(cur => ({ ...cur, lhs: e.target.value }));
-        }}>
-        {mockFields.map(field => {
-            return (<Option value={field} key={field}>
-              {field}
-            </Option>);
-        })}
-      </Select>
-      <Select label='Comparator' onChange={(e) => {
-            setLocalState(cur => ({ ...cur, comparator: e.target.value }));
-        }}>
-        {['Equals', 'Contains', 'Starts with'].map(comparator => {
-            return (<Option value={comparator} key={comparator}>
-              {comparator}
-            </Option>);
-        })}
-      </Select>
-      <Input label='Value' value={localState.rhs} onChange={(e) => {
-            setLocalState(cur => ({ ...cur, rhs: e.target.value }));
-        }}/>
-    </Grid>);
-};
-export const FilterRenderer = () => {
-    const [conditions, setConditions] = useState(() => [<MockCondition key={1}/>]);
+const GroupByMock = () => {
     return (<Flex container={{ direction: 'column', gap: 2 }}>
-      {conditions}
-      <div>
-        <Button variant='link' onClick={() => {
-            setConditions(cur => [...cur, <MockCondition key={cur.length + 1}/>]);
+      <Flex container={{ direction: 'column', gap: 1 }}>
+        <Flex container={{
+            justify: 'between',
+            alignItems: 'center',
+            direction: 'row',
+            wrap: 'nowrap',
+            itemGap: 0.5
         }}>
-          <Flex container={{ inline: true, alignItems: 'start', gap: 1 }} as='span'>
-            <Icon name='plus'/>
-            <span>Add condition</span>
+          <Flex container={{
+            justify: 'start',
+            alignItems: 'center',
+            direction: 'row',
+            wrap: 'nowrap',
+            itemGap: 0.5
+        }} item={{ grow: 1 }}>
+            <Icon name='drag'/>
+            <Flex item={{ grow: 1, basis: '50%' }}>
+              <FieldSelector fields={[]} value='' onChange={() => { }}/>
+            </Flex>
+            <Flex as={Select} item={{ basis: '50%' }}>
+              <Option> </Option>
+              <Option>Item A</Option>
+            </Flex>
           </Flex>
-        </Button>
-      </div>
+          <Button aria-label='Delete group' icon variant='simple'>
+            <Icon name='trash'/>
+          </Button>
+        </Flex>
+      </Flex>
+      <Button variant='link' aria-label='Add a group'>
+        <Flex container={{
+            inline: true,
+            alignItems: 'start',
+            gap: 1
+        }} as='span'>
+          <Icon name='plus'/>
+          <span>Add</span>
+        </Flex>
+      </Button>
     </Flex>);
 };
+export const FilterRenderer = () => {
+    return <ConditionBuilder fields={demoFields}/>;
+};
 export const GroupRenderer = () => {
-    return <>GroupBy content goes here...</>;
+    return <GroupByMock />;
 };
 //# sourceMappingURL=ListToolbar.mocks.jsx.map