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

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

@@ -0,0 +1,134 @@
+import { useReducer } from 'react';
+import { action } from '@storybook/addon-actions';
+import { Button, createUID, FieldGroupList, Form, Text } from '@pega/cosmos-react-core';
+import { DemoFieldRenderer, demoGroupMeta, ExpensesFieldRenderer, expensesGroupMeta, fieldGroupReducer, InsuranceFieldRenderer, insuranceGroupMeta } from './FieldGroupList.mocks';
+export default {
+    title: 'Core/FieldGroupList',
+    component: FieldGroupList,
+    args: {
+        allowAdd: true,
+        allowDelete: true,
+        itemLevelDelete: false
+    },
+    argTypes: {
+        allowAdd: { control: { type: 'boolean' } },
+        allowDelete: { control: { type: 'boolean' } },
+        itemLevelDelete: { control: { type: 'boolean' } }
+    }
+};
+export const ExpensesDemo = (args) => {
+    const [state, dispatch] = useReducer(fieldGroupReducer(expensesGroupMeta, ExpensesFieldRenderer), [
+        {
+            name: `${expensesGroupMeta.label} 1`,
+            id: createUID(),
+            headingTag: 'h3',
+            children: expensesGroupMeta.fields.map(ExpensesFieldRenderer)
+        }
+    ]);
+    return (<Form actions={<>
+          <Button name='Cancel' variant='secondary' onClick={(e) => {
+                action('Click')(`${e.currentTarget.name}:${e.type}`);
+            }}>
+            Cancel
+          </Button>
+          <Button name='Submit' type='submit' variant='primary'>
+            Submit
+          </Button>
+        </>} onSubmit={(e) => {
+            e.preventDefault();
+            action('Submit')(`Form:${e.type}`);
+        }} style={{ margin: 'auto', maxWidth: '37.5rem' }}>
+      <Text variant='h2'>Expense report</Text>
+      <FieldGroupList items={args.itemLevelDelete
+            ? state.map((item, i) => ({
+                ...item,
+                onDelete: args.allowDelete && i !== 0
+                    ? id => {
+                        dispatch({ action: 'delete', id });
+                    }
+                    : undefined
+            }))
+            : state} onAdd={args.allowAdd
+            ? () => {
+                dispatch({ action: 'add' });
+            }
+            : undefined} onDelete={args.allowDelete && !args.itemLevelDelete
+            ? id => {
+                dispatch({ action: 'delete', id });
+            }
+            : undefined}/>
+    </Form>);
+};
+export const InsuranceDemo = (args) => {
+    const [state, dispatch] = useReducer(fieldGroupReducer(insuranceGroupMeta, InsuranceFieldRenderer), [
+        {
+            name: `${insuranceGroupMeta.label} 1`,
+            id: createUID(),
+            headingTag: 'h3',
+            children: insuranceGroupMeta.fields.map(InsuranceFieldRenderer)
+        }
+    ]);
+    return (<Form actions={<>
+          <Button name='Cancel' variant='secondary' onClick={(e) => {
+                action('Click')(`${e.currentTarget.name}:${e.type}`);
+            }}>
+            Cancel
+          </Button>
+          <Button name='Submit' type='submit' variant='primary'>
+            Submit
+          </Button>
+        </>} onSubmit={(e) => {
+            e.preventDefault();
+            action('Submit')(`Form:${e.type}`);
+        }} style={{ margin: 'auto', maxWidth: '37.5rem' }}>
+      <Text variant='h1'>Insurance step 1</Text>
+      <Text variant='h2'>Dependants</Text>
+      <FieldGroupList items={args.itemLevelDelete
+            ? state.map((item, i) => ({
+                ...item,
+                onDelete: args.allowDelete && i !== 0
+                    ? id => {
+                        dispatch({ action: 'delete', id });
+                    }
+                    : undefined
+            }))
+            : state} onAdd={args.allowAdd
+            ? () => {
+                dispatch({ action: 'add' });
+            }
+            : undefined} onDelete={args.allowDelete && !args.itemLevelDelete
+            ? id => {
+                dispatch({ action: 'delete', id });
+            }
+            : undefined}/>
+    </Form>);
+};
+export const FieldGroupListDemo = (args) => {
+    const [state, dispatch] = useReducer(fieldGroupReducer(demoGroupMeta, DemoFieldRenderer), [
+        {
+            name: `${demoGroupMeta.label} 1`,
+            id: createUID(),
+            headingTag: 'h3',
+            children: demoGroupMeta.fields.map(DemoFieldRenderer)
+        }
+    ]);
+    return (<FieldGroupList items={args.itemLevelDelete
+            ? state.map((item, i) => ({
+                ...item,
+                onDelete: args.allowDelete && i !== 0
+                    ? id => {
+                        dispatch({ action: 'delete', id });
+                    }
+                    : undefined
+            }))
+            : state} onAdd={args.allowAdd
+            ? () => {
+                dispatch({ action: 'add' });
+            }
+            : undefined} onDelete={args.allowDelete && !args.itemLevelDelete
+            ? id => {
+                dispatch({ action: 'delete', id });
+            }
+            : undefined}/>);
+};
+//# sourceMappingURL=FieldGroupList.stories.jsx.map

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

@@ -0,0 +1 @@
+{"version":3,"file":"FieldGroupList.stories.jsx","sourceRoot":"","sources":["../../../src/core/FieldGroup/FieldGroupList.stories.tsx"],"names":[],"mappings":"AAAA,OAAO,EAAE,UAAU,EAAE,MAAM,OAAO,CAAC;AAEnC,OAAO,EAAE,MAAM,EAAE,MAAM,0BAA0B,CAAC;AAGlD,OAAO,EAAE,MAAM,EAAE,SAAS,EAAE,cAAc,EAAE,IAAI,EAAE,IAAI,EAAE,MAAM,yBAAyB,CAAC;AAExF,OAAO,EACL,iBAAiB,EACjB,aAAa,EACb,qBAAqB,EACrB,iBAAiB,EACjB,iBAAiB,EACjB,sBAAsB,EACtB,kBAAkB,EACnB,MAAM,wBAAwB,CAAC;AAEhC,eAAe;IACb,KAAK,EAAE,qBAAqB;IAC5B,SAAS,EAAE,cAAc;IACzB,IAAI,EAAE;QACJ,QAAQ,EAAE,IAAI;QACd,WAAW,EAAE,IAAI;QACjB,eAAe,EAAE,KAAK;KACvB;IACD,QAAQ,EAAE;QACR,QAAQ,EAAE,EAAE,OAAO,EAAE,EAAE,IAAI,EAAE,SAAS,EAAE,EAAE;QAC1C,WAAW,EAAE,EAAE,OAAO,EAAE,EAAE,IAAI,EAAE,SAAS,EAAE,EAAE;QAC7C,eAAe,EAAE,EAAE,OAAO,EAAE,EAAE,IAAI,EAAE,SAAS,EAAE,EAAE;KAClD;CACM,CAAC;AAQV,MAAM,CAAC,MAAM,YAAY,GAAqC,CAAC,IAA6B,EAAE,EAAE;IAC9F,MAAM,CAAC,KAAK,EAAE,QAAQ,CAAC,GAAG,UAAU,CAClC,iBAAiB,CAAC,iBAAiB,EAAE,qBAAqB,CAAC,EAC3D;QACE;YACE,IAAI,EAAE,GAAG,iBAAiB,CAAC,KAAK,IAAI;YACpC,EAAE,EAAE,SAAS,EAAE;YACf,UAAU,EAAE,IAAI;YAChB,QAAQ,EAAE,iBAAiB,CAAC,MAAM,CAAC,GAAG,CAAC,qBAAqB,CAAC;SAC9D;KACF,CACF,CAAC;IAEF,OAAO,CACL,CAAC,IAAI,CACH,OAAO,CAAC,CACN,EACE;UAAA,CAAC,MAAM,CACL,IAAI,CAAC,QAAQ,CACb,OAAO,CAAC,WAAW,CACnB,OAAO,CAAC,CAAC,CAAC,CAAgC,EAAE,EAAE;gBAC5C,MAAM,CAAC,OAAO,CAAC,CAAC,GAAG,CAAC,CAAC,aAAa,CAAC,IAAI,IAAI,CAAC,CAAC,IAAI,EAAE,CAAC,CAAC;YACvD,CAAC,CAAC,CAEF;;UACF,EAAE,MAAM,CACR;UAAA,CAAC,MAAM,CAAC,IAAI,CAAC,QAAQ,CAAC,IAAI,CAAC,QAAQ,CAAC,OAAO,CAAC,SAAS,CACnD;;UACF,EAAE,MAAM,CACV;QAAA,GAAG,CACJ,CACD,QAAQ,CAAC,CAAC,CAAC,CAAY,EAAE,EAAE;YACzB,CAAC,CAAC,cAAc,EAAE,CAAC;YACnB,MAAM,CAAC,QAAQ,CAAC,CAAC,QAAQ,CAAC,CAAC,IAAI,EAAE,CAAC,CAAC;QACrC,CAAC,CAAC,CACF,KAAK,CAAC,CAAC,EAAE,MAAM,EAAE,MAAM,EAAE,QAAQ,EAAE,SAAS,EAAE,CAAC,CAE/C;MAAA,CAAC,IAAI,CAAC,OAAO,CAAC,IAAI,CAAC,cAAc,EAAE,IAAI,CACvC;MAAA,CAAC,cAAc,CACb,KAAK,CAAC,CACJ,IAAI,CAAC,eAAe;YAClB,CAAC,CAAC,KAAK,CAAC,GAAG,CAAC,CAAC,IAAI,EAAE,CAAC,EAAE,EAAE,CAAC,CAAC;gBACtB,GAAG,IAAI;gBACP,QAAQ,EACN,IAAI,CAAC,WAAW,IAAI,CAAC,KAAK,CAAC;oBACzB,CAAC,CAAC,EAAE,CAAC,EAAE;wBACH,QAAQ,CAAC,EAAE,MAAM,EAAE,QAAQ,EAAE,EAAE,EAAE,CAAC,CAAC;oBACrC,CAAC;oBACH,CAAC,CAAC,SAAS;aAChB,CAAC,CAAC;YACL,CAAC,CAAC,KAAK,CACV,CACD,KAAK,CAAC,CACJ,IAAI,CAAC,QAAQ;YACX,CAAC,CAAC,GAAG,EAAE;gBACH,QAAQ,CAAC,EAAE,MAAM,EAAE,KAAK,EAAE,CAAC,CAAC;YAC9B,CAAC;YACH,CAAC,CAAC,SAAS,CACd,CACD,QAAQ,CAAC,CACP,IAAI,CAAC,WAAW,IAAI,CAAC,IAAI,CAAC,eAAe;YACvC,CAAC,CAAC,EAAE,CAAC,EAAE;gBACH,QAAQ,CAAC,EAAE,MAAM,EAAE,QAAQ,EAAE,EAAE,EAAE,CAAC,CAAC;YACrC,CAAC;YACH,CAAC,CAAC,SAAS,CACd,EAEL;IAAA,EAAE,IAAI,CAAC,CACR,CAAC;AACJ,CAAC,CAAC;AAEF,MAAM,CAAC,MAAM,aAAa,GAAqC,CAAC,IAA6B,EAAE,EAAE;IAC/F,MAAM,CAAC,KAAK,EAAE,QAAQ,CAAC,GAAG,UAAU,CAClC,iBAAiB,CAAC,kBAAkB,EAAE,sBAAsB,CAAC,EAC7D;QACE;YACE,IAAI,EAAE,GAAG,kBAAkB,CAAC,KAAK,IAAI;YACrC,EAAE,EAAE,SAAS,EAAE;YACf,UAAU,EAAE,IAAI;YAChB,QAAQ,EAAE,kBAAkB,CAAC,MAAM,CAAC,GAAG,CAAC,sBAAsB,CAAC;SAChE;KACF,CACF,CAAC;IAEF,OAAO,CACL,CAAC,IAAI,CACH,OAAO,CAAC,CACN,EACE;UAAA,CAAC,MAAM,CACL,IAAI,CAAC,QAAQ,CACb,OAAO,CAAC,WAAW,CACnB,OAAO,CAAC,CAAC,CAAC,CAAgC,EAAE,EAAE;gBAC5C,MAAM,CAAC,OAAO,CAAC,CAAC,GAAG,CAAC,CAAC,aAAa,CAAC,IAAI,IAAI,CAAC,CAAC,IAAI,EAAE,CAAC,CAAC;YACvD,CAAC,CAAC,CAEF;;UACF,EAAE,MAAM,CACR;UAAA,CAAC,MAAM,CAAC,IAAI,CAAC,QAAQ,CAAC,IAAI,CAAC,QAAQ,CAAC,OAAO,CAAC,SAAS,CACnD;;UACF,EAAE,MAAM,CACV;QAAA,GAAG,CACJ,CACD,QAAQ,CAAC,CAAC,CAAC,CAAY,EAAE,EAAE;YACzB,CAAC,CAAC,cAAc,EAAE,CAAC;YACnB,MAAM,CAAC,QAAQ,CAAC,CAAC,QAAQ,CAAC,CAAC,IAAI,EAAE,CAAC,CAAC;QACrC,CAAC,CAAC,CACF,KAAK,CAAC,CAAC,EAAE,MAAM,EAAE,MAAM,EAAE,QAAQ,EAAE,SAAS,EAAE,CAAC,CAE/C;MAAA,CAAC,IAAI,CAAC,OAAO,CAAC,IAAI,CAAC,gBAAgB,EAAE,IAAI,CACzC;MAAA,CAAC,IAAI,CAAC,OAAO,CAAC,IAAI,CAAC,UAAU,EAAE,IAAI,CACnC;MAAA,CAAC,cAAc,CACb,KAAK,CAAC,CACJ,IAAI,CAAC,eAAe;YAClB,CAAC,CAAC,KAAK,CAAC,GAAG,CAAC,CAAC,IAAI,EAAE,CAAC,EAAE,EAAE,CAAC,CAAC;gBACtB,GAAG,IAAI;gBACP,QAAQ,EACN,IAAI,CAAC,WAAW,IAAI,CAAC,KAAK,CAAC;oBACzB,CAAC,CAAC,EAAE,CAAC,EAAE;wBACH,QAAQ,CAAC,EAAE,MAAM,EAAE,QAAQ,EAAE,EAAE,EAAE,CAAC,CAAC;oBACrC,CAAC;oBACH,CAAC,CAAC,SAAS;aAChB,CAAC,CAAC;YACL,CAAC,CAAC,KAAK,CACV,CACD,KAAK,CAAC,CACJ,IAAI,CAAC,QAAQ;YACX,CAAC,CAAC,GAAG,EAAE;gBACH,QAAQ,CAAC,EAAE,MAAM,EAAE,KAAK,EAAE,CAAC,CAAC;YAC9B,CAAC;YACH,CAAC,CAAC,SAAS,CACd,CACD,QAAQ,CAAC,CACP,IAAI,CAAC,WAAW,IAAI,CAAC,IAAI,CAAC,eAAe;YACvC,CAAC,CAAC,EAAE,CAAC,EAAE;gBACH,QAAQ,CAAC,EAAE,MAAM,EAAE,QAAQ,EAAE,EAAE,EAAE,CAAC,CAAC;YACrC,CAAC;YACH,CAAC,CAAC,SAAS,CACd,EAEL;IAAA,EAAE,IAAI,CAAC,CACR,CAAC;AACJ,CAAC,CAAC;AAEF,MAAM,CAAC,MAAM,kBAAkB,GAAqC,CAClE,IAA6B,EAC7B,EAAE;IACF,MAAM,CAAC,KAAK,EAAE,QAAQ,CAAC,GAAG,UAAU,CAAC,iBAAiB,CAAC,aAAa,EAAE,iBAAiB,CAAC,EAAE;QACxF;YACE,IAAI,EAAE,GAAG,aAAa,CAAC,KAAK,IAAI;YAChC,EAAE,EAAE,SAAS,EAAE;YACf,UAAU,EAAE,IAAI;YAChB,QAAQ,EAAE,aAAa,CAAC,MAAM,CAAC,GAAG,CAAC,iBAAiB,CAAC;SACtD;KACF,CAAC,CAAC;IAEH,OAAO,CACL,CAAC,cAAc,CACb,KAAK,CAAC,CACJ,IAAI,CAAC,eAAe;YAClB,CAAC,CAAC,KAAK,CAAC,GAAG,CAAC,CAAC,IAAI,EAAE,CAAC,EAAE,EAAE,CAAC,CAAC;gBACtB,GAAG,IAAI;gBACP,QAAQ,EACN,IAAI,CAAC,WAAW,IAAI,CAAC,KAAK,CAAC;oBACzB,CAAC,CAAC,EAAE,CAAC,EAAE;wBACH,QAAQ,CAAC,EAAE,MAAM,EAAE,QAAQ,EAAE,EAAE,EAAE,CAAC,CAAC;oBACrC,CAAC;oBACH,CAAC,CAAC,SAAS;aAChB,CAAC,CAAC;YACL,CAAC,CAAC,KAAK,CACV,CACD,KAAK,CAAC,CACJ,IAAI,CAAC,QAAQ;YACX,CAAC,CAAC,GAAG,EAAE;gBACH,QAAQ,CAAC,EAAE,MAAM,EAAE,KAAK,EAAE,CAAC,CAAC;YAC9B,CAAC;YACH,CAAC,CAAC,SAAS,CACd,CACD,QAAQ,CAAC,CACP,IAAI,CAAC,WAAW,IAAI,CAAC,IAAI,CAAC,eAAe;YACvC,CAAC,CAAC,EAAE,CAAC,EAAE;gBACH,QAAQ,CAAC,EAAE,MAAM,EAAE,QAAQ,EAAE,EAAE,EAAE,CAAC,CAAC;YACrC,CAAC;YACH,CAAC,CAAC,SAAS,CACd,EACD,CACH,CAAC;AACJ,CAAC,CAAC","sourcesContent":["import { useReducer } from 'react';\nimport type { MouseEvent, FormEvent } from 'react';\nimport { action } from '@storybook/addon-actions';\nimport type { Meta, StoryFn } from '@storybook/react';\n\nimport { Button, createUID, FieldGroupList, Form, Text } from '@pega/cosmos-react-core';\n\nimport {\n  DemoFieldRenderer,\n  demoGroupMeta,\n  ExpensesFieldRenderer,\n  expensesGroupMeta,\n  fieldGroupReducer,\n  InsuranceFieldRenderer,\n  insuranceGroupMeta\n} from './FieldGroupList.mocks';\n\nexport default {\n  title: 'Core/FieldGroupList',\n  component: FieldGroupList,\n  args: {\n    allowAdd: true,\n    allowDelete: true,\n    itemLevelDelete: false\n  },\n  argTypes: {\n    allowAdd: { control: { type: 'boolean' } },\n    allowDelete: { control: { type: 'boolean' } },\n    itemLevelDelete: { control: { type: 'boolean' } }\n  }\n} as Meta;\n\ninterface FieldGroupListDemoProps {\n  allowAdd?: boolean;\n  allowDelete?: boolean;\n  itemLevelDelete?: boolean;\n}\n\nexport const ExpensesDemo: StoryFn<FieldGroupListDemoProps> = (args: FieldGroupListDemoProps) => {\n  const [state, dispatch] = useReducer(\n    fieldGroupReducer(expensesGroupMeta, ExpensesFieldRenderer),\n    [\n      {\n        name: `${expensesGroupMeta.label} 1`,\n        id: createUID(),\n        headingTag: 'h3',\n        children: expensesGroupMeta.fields.map(ExpensesFieldRenderer)\n      }\n    ]\n  );\n\n  return (\n    <Form\n      actions={\n        <>\n          <Button\n            name='Cancel'\n            variant='secondary'\n            onClick={(e: MouseEvent<HTMLButtonElement>) => {\n              action('Click')(`${e.currentTarget.name}:${e.type}`);\n            }}\n          >\n            Cancel\n          </Button>\n          <Button name='Submit' type='submit' variant='primary'>\n            Submit\n          </Button>\n        </>\n      }\n      onSubmit={(e: FormEvent) => {\n        e.preventDefault();\n        action('Submit')(`Form:${e.type}`);\n      }}\n      style={{ margin: 'auto', maxWidth: '37.5rem' }}\n    >\n      <Text variant='h2'>Expense report</Text>\n      <FieldGroupList\n        items={\n          args.itemLevelDelete\n            ? state.map((item, i) => ({\n                ...item,\n                onDelete:\n                  args.allowDelete && i !== 0\n                    ? id => {\n                        dispatch({ action: 'delete', id });\n                      }\n                    : undefined\n              }))\n            : state\n        }\n        onAdd={\n          args.allowAdd\n            ? () => {\n                dispatch({ action: 'add' });\n              }\n            : undefined\n        }\n        onDelete={\n          args.allowDelete && !args.itemLevelDelete\n            ? id => {\n                dispatch({ action: 'delete', id });\n              }\n            : undefined\n        }\n      />\n    </Form>\n  );\n};\n\nexport const InsuranceDemo: StoryFn<FieldGroupListDemoProps> = (args: FieldGroupListDemoProps) => {\n  const [state, dispatch] = useReducer(\n    fieldGroupReducer(insuranceGroupMeta, InsuranceFieldRenderer),\n    [\n      {\n        name: `${insuranceGroupMeta.label} 1`,\n        id: createUID(),\n        headingTag: 'h3',\n        children: insuranceGroupMeta.fields.map(InsuranceFieldRenderer)\n      }\n    ]\n  );\n\n  return (\n    <Form\n      actions={\n        <>\n          <Button\n            name='Cancel'\n            variant='secondary'\n            onClick={(e: MouseEvent<HTMLButtonElement>) => {\n              action('Click')(`${e.currentTarget.name}:${e.type}`);\n            }}\n          >\n            Cancel\n          </Button>\n          <Button name='Submit' type='submit' variant='primary'>\n            Submit\n          </Button>\n        </>\n      }\n      onSubmit={(e: FormEvent) => {\n        e.preventDefault();\n        action('Submit')(`Form:${e.type}`);\n      }}\n      style={{ margin: 'auto', maxWidth: '37.5rem' }}\n    >\n      <Text variant='h1'>Insurance step 1</Text>\n      <Text variant='h2'>Dependants</Text>\n      <FieldGroupList\n        items={\n          args.itemLevelDelete\n            ? state.map((item, i) => ({\n                ...item,\n                onDelete:\n                  args.allowDelete && i !== 0\n                    ? id => {\n                        dispatch({ action: 'delete', id });\n                      }\n                    : undefined\n              }))\n            : state\n        }\n        onAdd={\n          args.allowAdd\n            ? () => {\n                dispatch({ action: 'add' });\n              }\n            : undefined\n        }\n        onDelete={\n          args.allowDelete && !args.itemLevelDelete\n            ? id => {\n                dispatch({ action: 'delete', id });\n              }\n            : undefined\n        }\n      />\n    </Form>\n  );\n};\n\nexport const FieldGroupListDemo: StoryFn<FieldGroupListDemoProps> = (\n  args: FieldGroupListDemoProps\n) => {\n  const [state, dispatch] = useReducer(fieldGroupReducer(demoGroupMeta, DemoFieldRenderer), [\n    {\n      name: `${demoGroupMeta.label} 1`,\n      id: createUID(),\n      headingTag: 'h3',\n      children: demoGroupMeta.fields.map(DemoFieldRenderer)\n    }\n  ]);\n\n  return (\n    <FieldGroupList\n      items={\n        args.itemLevelDelete\n          ? state.map((item, i) => ({\n              ...item,\n              onDelete:\n                args.allowDelete && i !== 0\n                  ? id => {\n                      dispatch({ action: 'delete', id });\n                    }\n                  : undefined\n            }))\n          : state\n      }\n      onAdd={\n        args.allowAdd\n          ? () => {\n              dispatch({ action: 'add' });\n            }\n          : undefined\n      }\n      onDelete={\n        args.allowDelete && !args.itemLevelDelete\n          ? id => {\n              dispatch({ action: 'delete', id });\n            }\n          : undefined\n      }\n    />\n  );\n};\n"]}

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

@@ -0,0 +1,20 @@
+/// <reference types="react" />
+export declare const mockData: ({
+    id: string;
+    name: string;
+    value: import("react").JSX.Element;
+} | {
+    id: string;
+    name: string;
+    value: string;
+} | {
+    id: string;
+    name: string;
+    value?: undefined;
+})[];
+export declare const mockNumericData: {
+    id: string;
+    name: string;
+    value: number;
+}[];
+//# sourceMappingURL=FieldValueList.mocks.d.ts.map

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

@@ -0,0 +1 @@
+{"version":3,"file":"FieldValueList.mocks.d.ts","sourceRoot":"","sources":["../../../src/core/FieldValueList/FieldValueList.mocks.tsx"],"names":[],"mappings":";AAEA,eAAO,MAAM,QAAQ;;;;;;;;;;;;IAiCpB,CAAC;AAEF,eAAO,MAAM,eAAe;;;;GAqB3B,CAAC"}

package/jsx/core/FieldValueList/FieldValueList.mocks.jsx

@@ -0,0 +1,54 @@
+import { Link, Status, Text } from '@pega/cosmos-react-core';
+export const mockData = [
+    {
+        id: 'id',
+        name: 'ID',
+        value: (<Text variant='h1' as='span'>
+        C-1234
+      </Text>)
+    },
+    {
+        id: 'status',
+        name: 'Status',
+        value: <Status variant='pending'>pending</Status>
+    },
+    {
+        id: 'link',
+        name: 'Link',
+        value: (<Link href='https://www.pega.com' target='_blank'>
+        C-ABC
+      </Link>)
+    },
+    {
+        id: 'created',
+        name: 'Created',
+        value: new Date().toLocaleDateString()
+    },
+    {
+        id: 'no value',
+        name: 'No Value'
+    }
+];
+export const mockNumericData = [
+    {
+        id: 'open',
+        name: 'Open',
+        value: 405
+    },
+    {
+        id: 'close',
+        name: 'Close',
+        value: 401
+    },
+    {
+        id: 'year_high',
+        name: '52 week high',
+        value: 445
+    },
+    {
+        id: 'year_low',
+        name: '52 week low',
+        value: 335
+    }
+];
+//# sourceMappingURL=FieldValueList.mocks.jsx.map

package/jsx/core/FieldValueList/FieldValueList.mocks.jsx.map

@@ -0,0 +1 @@
+{"version":3,"file":"FieldValueList.mocks.jsx","sourceRoot":"","sources":["../../../src/core/FieldValueList/FieldValueList.mocks.tsx"],"names":[],"mappings":"AAAA,OAAO,EAAE,IAAI,EAAE,MAAM,EAAE,IAAI,EAAE,MAAM,yBAAyB,CAAC;AAE7D,MAAM,CAAC,MAAM,QAAQ,GAAG;IACtB;QACE,EAAE,EAAE,IAAI;QACR,IAAI,EAAE,IAAI;QACV,KAAK,EAAE,CACL,CAAC,IAAI,CAAC,OAAO,CAAC,IAAI,CAAC,EAAE,CAAC,MAAM,CAC1B;;MACF,EAAE,IAAI,CAAC,CACR;KACF;IACD;QACE,EAAE,EAAE,QAAQ;QACZ,IAAI,EAAE,QAAQ;QACd,KAAK,EAAE,CAAC,MAAM,CAAC,OAAO,CAAC,SAAS,CAAC,OAAO,EAAE,MAAM,CAAC;KAClD;IACD;QACE,EAAE,EAAE,MAAM;QACV,IAAI,EAAE,MAAM;QACZ,KAAK,EAAE,CACL,CAAC,IAAI,CAAC,IAAI,CAAC,sBAAsB,CAAC,MAAM,CAAC,QAAQ,CAC/C;;MACF,EAAE,IAAI,CAAC,CACR;KACF;IACD;QACE,EAAE,EAAE,SAAS;QACb,IAAI,EAAE,SAAS;QACf,KAAK,EAAE,IAAI,IAAI,EAAE,CAAC,kBAAkB,EAAE;KACvC;IACD;QACE,EAAE,EAAE,UAAU;QACd,IAAI,EAAE,UAAU;KACjB;CACF,CAAC;AAEF,MAAM,CAAC,MAAM,eAAe,GAAG;IAC7B;QACE,EAAE,EAAE,MAAM;QACV,IAAI,EAAE,MAAM;QACZ,KAAK,EAAE,GAAG;KACX;IACD;QACE,EAAE,EAAE,OAAO;QACX,IAAI,EAAE,OAAO;QACb,KAAK,EAAE,GAAG;KACX;IACD;QACE,EAAE,EAAE,WAAW;QACf,IAAI,EAAE,cAAc;QACpB,KAAK,EAAE,GAAG;KACX;IACD;QACE,EAAE,EAAE,UAAU;QACd,IAAI,EAAE,aAAa;QACnB,KAAK,EAAE,GAAG;KACX;CACF,CAAC","sourcesContent":["import { Link, Status, Text } from '@pega/cosmos-react-core';\n\nexport const mockData = [\n  {\n    id: 'id',\n    name: 'ID',\n    value: (\n      <Text variant='h1' as='span'>\n        C-1234\n      </Text>\n    )\n  },\n  {\n    id: 'status',\n    name: 'Status',\n    value: <Status variant='pending'>pending</Status>\n  },\n  {\n    id: 'link',\n    name: 'Link',\n    value: (\n      <Link href='https://www.pega.com' target='_blank'>\n        C-ABC\n      </Link>\n    )\n  },\n  {\n    id: 'created',\n    name: 'Created',\n    value: new Date().toLocaleDateString()\n  },\n  {\n    id: 'no value',\n    name: 'No Value'\n  }\n];\n\nexport const mockNumericData = [\n  {\n    id: 'open',\n    name: 'Open',\n    value: 405\n  },\n  {\n    id: 'close',\n    name: 'Close',\n    value: 401\n  },\n  {\n    id: 'year_high',\n    name: '52 week high',\n    value: 445\n  },\n  {\n    id: 'year_low',\n    name: '52 week low',\n    value: 335\n  }\n];\n"]}

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

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

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

@@ -0,0 +1 @@
+{"version":3,"file":"FieldValueList.stories.d.ts","sourceRoot":"","sources":["../../../src/core/FieldValueList/FieldValueList.stories.tsx"],"names":[],"mappings":"AACA,OAAO,KAAK,EAAQ,OAAO,EAAE,MAAM,kBAAkB,CAAC;AAGtD,OAAO,KAAK,EAAE,mBAAmB,EAAE,UAAU,EAAE,MAAM,yBAAyB,CAAC;;AAK/E,wBAGU;AAEV,UAAU,wBAAyB,SAAQ,UAAU,CAAC,mBAAmB,EAAE,QAAQ,CAAC;IAClF,IAAI,EAAE,MAAM,CAAC;IACb,KAAK,EAAE,MAAM,CAAC;IACd,kBAAkB,CAAC,EAAE,OAAO,CAAC;CAC9B;AAED,eAAO,MAAM,kBAAkB,EAAE,OAAO,CAAC,wBAAwB,CAoBhE,CAAC"}

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

@@ -0,0 +1,37 @@
+import { Fragment } from 'react';
+import { FieldValueList } from '@pega/cosmos-react-core';
+import { StyledDemoContainer } from './FieldValueList.styles';
+import { mockData, mockNumericData } from './FieldValueList.mocks';
+export default {
+    title: 'Core/FieldValueList',
+    component: FieldValueList
+};
+export const FieldValueListDemo = (args) => {
+    const Wrapper = args.inContentContainer ? StyledDemoContainer : Fragment;
+    const data = mockData.concat([
+        {
+            id: 'dynamic',
+            name: args.name,
+            value: args.value
+        }
+    ]);
+    return (<Wrapper>
+      <FieldValueList variant={args.variant} fields={args.variant === 'value-comparison' ? mockNumericData : data}/>
+    </Wrapper>);
+};
+FieldValueListDemo.args = {
+    variant: 'inline',
+    inContentContainer: true,
+    name: 'Name',
+    value: 'Value'
+};
+FieldValueListDemo.argTypes = {
+    variant: {
+        options: ['inline', 'stacked', 'value-comparison'],
+        control: { type: 'select' }
+    },
+    inContentContainer: { control: { type: 'boolean' } },
+    name: { control: { type: 'text' } },
+    value: { control: { type: 'text' } }
+};
+//# sourceMappingURL=FieldValueList.stories.jsx.map

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

@@ -0,0 +1 @@
+{"version":3,"file":"FieldValueList.stories.jsx","sourceRoot":"","sources":["../../../src/core/FieldValueList/FieldValueList.stories.tsx"],"names":[],"mappings":"AAAA,OAAO,EAAE,QAAQ,EAAE,MAAM,OAAO,CAAC;AAGjC,OAAO,EAAE,cAAc,EAAE,MAAM,yBAAyB,CAAC;AAGzD,OAAO,EAAE,mBAAmB,EAAE,MAAM,yBAAyB,CAAC;AAC9D,OAAO,EAAE,QAAQ,EAAE,eAAe,EAAE,MAAM,wBAAwB,CAAC;AAEnE,eAAe;IACb,KAAK,EAAE,qBAAqB;IAC5B,SAAS,EAAE,cAAc;CAClB,CAAC;AAQV,MAAM,CAAC,MAAM,kBAAkB,GAAsC,CACnE,IAA8B,EAC9B,EAAE;IACF,MAAM,OAAO,GAAG,IAAI,CAAC,kBAAkB,CAAC,CAAC,CAAC,mBAAmB,CAAC,CAAC,CAAC,QAAQ,CAAC;IACzE,MAAM,IAAI,GAAG,QAAQ,CAAC,MAAM,CAAC;QAC3B;YACE,EAAE,EAAE,SAAS;YACb,IAAI,EAAE,IAAI,CAAC,IAAI;YACf,KAAK,EAAE,IAAI,CAAC,KAAK;SAClB;KACF,CAAC,CAAC;IAEH,OAAO,CACL,CAAC,OAAO,CACN;MAAA,CAAC,cAAc,CACb,OAAO,CAAC,CAAC,IAAI,CAAC,OAAO,CAAC,CACtB,MAAM,CAAC,CAAC,IAAI,CAAC,OAAO,KAAK,kBAAkB,CAAC,CAAC,CAAC,eAAe,CAAC,CAAC,CAAC,IAAI,CAAC,EAEzE;IAAA,EAAE,OAAO,CAAC,CACX,CAAC;AACJ,CAAC,CAAC;AAEF,kBAAkB,CAAC,IAAI,GAAG;IACxB,OAAO,EAAE,QAAQ;IACjB,kBAAkB,EAAE,IAAI;IACxB,IAAI,EAAE,MAAM;IACZ,KAAK,EAAE,OAAO;CACf,CAAC;AAEF,kBAAkB,CAAC,QAAQ,GAAG;IAC5B,OAAO,EAAE;QACP,OAAO,EAAE,CAAC,QAAQ,EAAE,SAAS,EAAE,kBAAkB,CAAC;QAClD,OAAO,EAAE,EAAE,IAAI,EAAE,QAAQ,EAAE;KAC5B;IACD,kBAAkB,EAAE,EAAE,OAAO,EAAE,EAAE,IAAI,EAAE,SAAS,EAAE,EAAE;IACpD,IAAI,EAAE,EAAE,OAAO,EAAE,EAAE,IAAI,EAAE,MAAM,EAAE,EAAE;IACnC,KAAK,EAAE,EAAE,OAAO,EAAE,EAAE,IAAI,EAAE,MAAM,EAAE,EAAE;CACrC,CAAC","sourcesContent":["import { Fragment } from 'react';\nimport type { Meta, StoryFn } from '@storybook/react';\n\nimport { FieldValueList } from '@pega/cosmos-react-core';\nimport type { FieldValueListProps, OmitStrict } from '@pega/cosmos-react-core';\n\nimport { StyledDemoContainer } from './FieldValueList.styles';\nimport { mockData, mockNumericData } from './FieldValueList.mocks';\n\nexport default {\n  title: 'Core/FieldValueList',\n  component: FieldValueList\n} as Meta;\n\ninterface FieldValueListStoryProps extends OmitStrict<FieldValueListProps, 'fields'> {\n  name: string;\n  value: string;\n  inContentContainer?: boolean;\n}\n\nexport const FieldValueListDemo: StoryFn<FieldValueListStoryProps> = (\n  args: FieldValueListStoryProps\n) => {\n  const Wrapper = args.inContentContainer ? StyledDemoContainer : Fragment;\n  const data = mockData.concat([\n    {\n      id: 'dynamic',\n      name: args.name,\n      value: args.value\n    }\n  ]);\n\n  return (\n    <Wrapper>\n      <FieldValueList\n        variant={args.variant}\n        fields={args.variant === 'value-comparison' ? mockNumericData : data}\n      />\n    </Wrapper>\n  );\n};\n\nFieldValueListDemo.args = {\n  variant: 'inline',\n  inContentContainer: true,\n  name: 'Name',\n  value: 'Value'\n};\n\nFieldValueListDemo.argTypes = {\n  variant: {\n    options: ['inline', 'stacked', 'value-comparison'],\n    control: { type: 'select' }\n  },\n  inContentContainer: { control: { type: 'boolean' } },\n  name: { control: { type: 'text' } },\n  value: { control: { type: 'text' } }\n};\n"]}

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

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

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

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

package/jsx/core/FieldValueList/FieldValueList.styles.js

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

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

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

package/jsx/core/File/FileDisplay.stories.d.ts

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

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

@@ -0,0 +1 @@
+{"version":3,"file":"FileDisplay.stories.d.ts","sourceRoot":"","sources":["../../../src/core/File/FileDisplay.stories.tsx"],"names":[],"mappings":"AAAA,OAAO,KAAK,EAAQ,OAAO,EAAE,MAAM,kBAAkB,CAAC;AAGtD,OAAO,KAAK,EAAE,gBAAgB,EAAiB,mBAAmB,EAAE,MAAM,yBAAyB,CAAC;;AAEpG,wBAaU;AAEV,UAAU,oBAAoB;IAC5B,eAAe,CAAC,EAAE,OAAO,CAAC;IAC1B,SAAS,CAAC,EAAE,OAAO,CAAC;IACpB,WAAW,CAAC,EAAE,OAAO,CAAC;IACtB,YAAY,CAAC,EAAE,OAAO,CAAC;CACxB;AAED,eAAO,MAAM,gBAAgB,EAAE,OAAO,CAAC,oBAAoB,CAmK1D,CAAC;AAUF,eAAO,MAAM,eAAe,EAAE,OAAO,CAAC,gBAAgB,GAAG,oBAAoB,CAyB5E,CAAC;AAYF,UAAU,uBAAwB,SAAQ,oBAAoB;IAC5D,IAAI,EAAE,mBAAmB,CAAC,MAAM,CAAC,CAAC;IAClC,IAAI,CAAC,EAAE,mBAAmB,CAAC,MAAM,CAAC,CAAC;IACnC,KAAK,CAAC,EAAE,mBAAmB,CAAC,OAAO,CAAC,CAAC;IACrC,QAAQ,CAAC,EAAE,mBAAmB,CAAC,UAAU,CAAC,CAAC;CAC5C;AAED,eAAO,MAAM,kBAAkB,EAAE,OAAO,CAAC,uBAAuB,CA2B/D,CAAC"}

package/jsx/core/File/FileDisplay.stories.jsx

@@ -0,0 +1,138 @@
+import { FileDisplay, FieldValueList, useToaster, FileUploadItem } from '@pega/cosmos-react-core';
+export default {
+    title: 'Core/File/Display',
+    component: FileDisplay,
+    args: {
+        withValue: true,
+        withPreview: true,
+        withDownload: true
+    },
+    argTypes: {
+        withValue: { control: { type: 'boolean' } },
+        withPreview: { control: { type: 'boolean' } },
+        withDownload: { control: { type: 'boolean' } }
+    }
+};
+export const FileDisplayTypes = (args) => {
+    const { push } = useToaster();
+    const handlePreview = args.withPreview
+        ? (url) => push({ content: `Previewed ${url}` })
+        : undefined;
+    const handleDownload = args.withDownload
+        ? (url) => push({ content: `Downloaded ${url}` })
+        : undefined;
+    const imageSrc = 'https://www.pega.com/sites/default/files/styles/480/public/media/images/2021-02/pwi-2021-prevcard.jpg';
+    const fields = [
+        {
+            id: '1',
+            name: 'Image file',
+            value: (<FileDisplay displayText={args.withDisplayText ? 'image.jpg' : undefined} value={args.withValue ? 'https://pbs.twimg.com/media/ENNN5PAXkAE-hag.jpg' : undefined} onPreview={handlePreview} onDownload={handleDownload}/>)
+        },
+        {
+            id: '1',
+            name: 'Image file with thumbnail',
+            value: (<FileDisplay displayText={args.withDisplayText ? 'image.jpg' : undefined} value={args.withValue ? 'https://pbs.twimg.com/media/ENNN5PAXkAE-hag.jpg' : undefined} thumbnail={imageSrc} onPreview={handlePreview} onDownload={handleDownload}/>)
+        },
+        {
+            id: '2',
+            name: 'Video file',
+            value: (<FileDisplay displayText={args.withDisplayText ? 'video.avi' : undefined} value={args.withValue ? 'https://pega.com/media/some-video.avi' : undefined} onPreview={handlePreview} onDownload={handleDownload}/>)
+        },
+        {
+            id: '3',
+            name: 'Audio file',
+            value: (<FileDisplay displayText={args.withDisplayText ? 'recording.mp3' : undefined} value={args.withValue ? 'https://pega.com/media/sprint-review-recording.mp3' : undefined} onPreview={handlePreview} onDownload={handleDownload}/>)
+        },
+        {
+            id: '4',
+            name: 'Document file',
+            value: (<FileDisplay displayText={args.withDisplayText ? 'document.doc' : undefined} value={args.withValue ? 'https://pega.com/media/document.doc' : undefined} onPreview={handlePreview} onDownload={handleDownload}/>)
+        },
+        {
+            id: '5',
+            name: 'PDF file',
+            value: (<FileDisplay displayText={args.withDisplayText ? 'invoice.pdf' : undefined} value={args.withValue ? 'https://pega.com/media/invoice.pdf' : undefined} onPreview={handlePreview} onDownload={handleDownload}/>)
+        },
+        {
+            id: '6',
+            name: 'Presentation file',
+            value: (<FileDisplay displayText={args.withDisplayText ? 'review.pps' : undefined} value={args.withValue ? 'https://pega.com/media/review.pps' : undefined} onPreview={handlePreview} onDownload={handleDownload}/>)
+        },
+        {
+            id: '7',
+            name: 'Spreadsheet file',
+            value: (<FileDisplay displayText={args.withDisplayText ? 'welfare.xlsx' : undefined} value={args.withValue ? 'https://pega.com/media/welfare.xlsx' : undefined} onPreview={handlePreview} onDownload={handleDownload}/>)
+        },
+        {
+            id: '8',
+            name: 'Email',
+            value: (<FileDisplay displayText={args.withDisplayText ? 'message.eml' : undefined} value={args.withValue ? 'https://pega.com/media/message.eml' : undefined} onPreview={handlePreview} onDownload={handleDownload}/>)
+        },
+        {
+            id: '9',
+            name: 'Database',
+            value: (<FileDisplay displayText={args.withDisplayText ? 'data.odb' : undefined} value={args.withValue ? 'https://pega.com/media/data.odb' : undefined} onPreview={handlePreview} onDownload={handleDownload}/>)
+        },
+        {
+            id: '10',
+            name: 'Zip file',
+            value: (<FileDisplay displayText={args.withDisplayText ? 'compress.zip' : undefined} value={args.withValue ? 'https://pega.com/media/compress.zip' : undefined} onPreview={handlePreview} onDownload={handleDownload}/>)
+        },
+        {
+            id: '11',
+            name: 'Unknown file type',
+            value: (<FileDisplay displayText={args.withDisplayText ? 'foo.xyz' : undefined} value={args.withValue ? 'https://pega.com/media/foo.xyz' : undefined} onPreview={handlePreview} onDownload={handleDownload}/>)
+        }
+    ];
+    return <FieldValueList fields={fields}/>;
+};
+FileDisplayTypes.args = {
+    withDisplayText: true
+};
+FileDisplayTypes.argTypes = {
+    withDisplayText: { control: { type: 'boolean' } }
+};
+export const FileDisplayDemo = (args) => {
+    const { push } = useToaster();
+    const handlePreview = args.withPreview
+        ? (url) => push({ content: `Previewed ${url}` })
+        : undefined;
+    const handleDownload = args.withDownload
+        ? (url) => push({ content: `Downloaded ${url}` })
+        : undefined;
+    const imageSrc = 'https://www.pega.com/sites/default/files/styles/480/public/media/images/2021-02/pwi-2021-prevcard.jpg';
+    return (<FileDisplay variant={args.variant} displayText={args.displayText} value={args.withValue ? imageSrc : undefined} onPreview={handlePreview} onDownload={handleDownload}/>);
+};
+FileDisplayDemo.args = {
+    variant: 'file',
+    displayText: 'Pega World iNspire'
+};
+FileDisplayDemo.argTypes = {
+    variant: { options: ['file', 'text', 'link'], control: { type: 'radio' } },
+    displayText: { control: { type: 'text' } }
+};
+export const FileUploadItemDemo = (args) => {
+    const { push } = useToaster();
+    const handlePreview = args.withPreview
+        ? (url) => push({ content: `Previewed ${url}` })
+        : undefined;
+    const handleDownload = args.withDownload
+        ? (url) => push({ content: `Downloaded ${url}` })
+        : undefined;
+    const imageSrc = 'https://www.pega.com/sites/default/files/styles/480/public/media/images/2021-02/pwi-2021-prevcard.jpg';
+    return (<FileUploadItem name={args.name} meta={args.meta} error={args.error} progress={args.progress} thumbnail={imageSrc} onPreview={handlePreview} onDownload={handleDownload}/>);
+};
+FileUploadItemDemo.args = {
+    name: 'Pega World iNspire',
+    meta: 'Some additional information',
+    error: false,
+    progress: 100
+};
+FileUploadItemDemo.argTypes = {
+    withValue: { table: { disable: true } },
+    name: { control: { type: 'text' } },
+    meta: { control: { type: 'text' } },
+    error: { control: { type: 'boolean' } },
+    progress: { control: { type: 'number' } }
+};
+//# sourceMappingURL=FileDisplay.stories.jsx.map

package/jsx/core/File/FileDisplay.stories.jsx.map

@@ -0,0 +1 @@
+{"version":3,"file":"FileDisplay.stories.jsx","sourceRoot":"","sources":["../../../src/core/File/FileDisplay.stories.tsx"],"names":[],"mappings":"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","sourcesContent":["import type { Meta, StoryFn } from '@storybook/react';\n\nimport { FileDisplay, FieldValueList, useToaster, FileUploadItem } from '@pega/cosmos-react-core';\nimport type { FileDisplayProps, FileItemProps, FileUploadItemProps } from '@pega/cosmos-react-core';\n\nexport default {\n  title: 'Core/File/Display',\n  component: FileDisplay,\n  args: {\n    withValue: true,\n    withPreview: true,\n    withDownload: true\n  },\n  argTypes: {\n    withValue: { control: { type: 'boolean' } },\n    withPreview: { control: { type: 'boolean' } },\n    withDownload: { control: { type: 'boolean' } }\n  }\n} as Meta;\n\ninterface FileDisplayDemoProps {\n  withDisplayText?: boolean;\n  withValue?: boolean;\n  withPreview?: boolean;\n  withDownload?: boolean;\n}\n\nexport const FileDisplayTypes: StoryFn<FileDisplayDemoProps> = (args: FileDisplayDemoProps) => {\n  const { push } = useToaster();\n\n  const handlePreview = args.withPreview\n    ? (url: FileItemProps['url']) => push({ content: `Previewed ${url}` })\n    : undefined;\n\n  const handleDownload = args.withDownload\n    ? (url: FileItemProps['url']) => push({ content: `Downloaded ${url}` })\n    : undefined;\n\n  const imageSrc =\n    'https://www.pega.com/sites/default/files/styles/480/public/media/images/2021-02/pwi-2021-prevcard.jpg';\n\n  const fields = [\n    {\n      id: '1',\n      name: 'Image file',\n      value: (\n        <FileDisplay\n          displayText={args.withDisplayText ? 'image.jpg' : undefined}\n          value={args.withValue ? 'https://pbs.twimg.com/media/ENNN5PAXkAE-hag.jpg' : undefined}\n          onPreview={handlePreview}\n          onDownload={handleDownload}\n        />\n      )\n    },\n    {\n      id: '1',\n      name: 'Image file with thumbnail',\n      value: (\n        <FileDisplay\n          displayText={args.withDisplayText ? 'image.jpg' : undefined}\n          value={args.withValue ? 'https://pbs.twimg.com/media/ENNN5PAXkAE-hag.jpg' : undefined}\n          thumbnail={imageSrc}\n          onPreview={handlePreview}\n          onDownload={handleDownload}\n        />\n      )\n    },\n    {\n      id: '2',\n      name: 'Video file',\n      value: (\n        <FileDisplay\n          displayText={args.withDisplayText ? 'video.avi' : undefined}\n          value={args.withValue ? 'https://pega.com/media/some-video.avi' : undefined}\n          onPreview={handlePreview}\n          onDownload={handleDownload}\n        />\n      )\n    },\n    {\n      id: '3',\n      name: 'Audio file',\n      value: (\n        <FileDisplay\n          displayText={args.withDisplayText ? 'recording.mp3' : undefined}\n          value={args.withValue ? 'https://pega.com/media/sprint-review-recording.mp3' : undefined}\n          onPreview={handlePreview}\n          onDownload={handleDownload}\n        />\n      )\n    },\n    {\n      id: '4',\n      name: 'Document file',\n      value: (\n        <FileDisplay\n          displayText={args.withDisplayText ? 'document.doc' : undefined}\n          value={args.withValue ? 'https://pega.com/media/document.doc' : undefined}\n          onPreview={handlePreview}\n          onDownload={handleDownload}\n        />\n      )\n    },\n    {\n      id: '5',\n      name: 'PDF file',\n      value: (\n        <FileDisplay\n          displayText={args.withDisplayText ? 'invoice.pdf' : undefined}\n          value={args.withValue ? 'https://pega.com/media/invoice.pdf' : undefined}\n          onPreview={handlePreview}\n          onDownload={handleDownload}\n        />\n      )\n    },\n    {\n      id: '6',\n      name: 'Presentation file',\n      value: (\n        <FileDisplay\n          displayText={args.withDisplayText ? 'review.pps' : undefined}\n          value={args.withValue ? 'https://pega.com/media/review.pps' : undefined}\n          onPreview={handlePreview}\n          onDownload={handleDownload}\n        />\n      )\n    },\n    {\n      id: '7',\n      name: 'Spreadsheet file',\n      value: (\n        <FileDisplay\n          displayText={args.withDisplayText ? 'welfare.xlsx' : undefined}\n          value={args.withValue ? 'https://pega.com/media/welfare.xlsx' : undefined}\n          onPreview={handlePreview}\n          onDownload={handleDownload}\n        />\n      )\n    },\n    {\n      id: '8',\n      name: 'Email',\n      value: (\n        <FileDisplay\n          displayText={args.withDisplayText ? 'message.eml' : undefined}\n          value={args.withValue ? 'https://pega.com/media/message.eml' : undefined}\n          onPreview={handlePreview}\n          onDownload={handleDownload}\n        />\n      )\n    },\n    {\n      id: '9',\n      name: 'Database',\n      value: (\n        <FileDisplay\n          displayText={args.withDisplayText ? 'data.odb' : undefined}\n          value={args.withValue ? 'https://pega.com/media/data.odb' : undefined}\n          onPreview={handlePreview}\n          onDownload={handleDownload}\n        />\n      )\n    },\n    {\n      id: '10',\n      name: 'Zip file',\n      value: (\n        <FileDisplay\n          displayText={args.withDisplayText ? 'compress.zip' : undefined}\n          value={args.withValue ? 'https://pega.com/media/compress.zip' : undefined}\n          onPreview={handlePreview}\n          onDownload={handleDownload}\n        />\n      )\n    },\n    {\n      id: '11',\n      name: 'Unknown file type',\n      value: (\n        <FileDisplay\n          displayText={args.withDisplayText ? 'foo.xyz' : undefined}\n          value={args.withValue ? 'https://pega.com/media/foo.xyz' : undefined}\n          onPreview={handlePreview}\n          onDownload={handleDownload}\n        />\n      )\n    }\n  ];\n\n  return <FieldValueList fields={fields} />;\n};\n\nFileDisplayTypes.args = {\n  withDisplayText: true\n};\n\nFileDisplayTypes.argTypes = {\n  withDisplayText: { control: { type: 'boolean' } }\n};\n\nexport const FileDisplayDemo: StoryFn<FileDisplayProps & FileDisplayDemoProps> = (\n  args: FileDisplayProps & FileDisplayDemoProps\n) => {\n  const { push } = useToaster();\n\n  const handlePreview = args.withPreview\n    ? (url: FileItemProps['url']) => push({ content: `Previewed ${url}` })\n    : undefined;\n\n  const handleDownload = args.withDownload\n    ? (url: FileItemProps['url']) => push({ content: `Downloaded ${url}` })\n    : undefined;\n\n  const imageSrc =\n    'https://www.pega.com/sites/default/files/styles/480/public/media/images/2021-02/pwi-2021-prevcard.jpg';\n\n  return (\n    <FileDisplay\n      variant={args.variant}\n      displayText={args.displayText}\n      value={args.withValue ? imageSrc : undefined}\n      onPreview={handlePreview}\n      onDownload={handleDownload}\n    />\n  );\n};\n\nFileDisplayDemo.args = {\n  variant: 'file',\n  displayText: 'Pega World iNspire'\n};\n\nFileDisplayDemo.argTypes = {\n  variant: { options: ['file', 'text', 'link'], control: { type: 'radio' } },\n  displayText: { control: { type: 'text' } }\n};\n\ninterface FileUploadItemDemoProps extends FileDisplayDemoProps {\n  name: FileUploadItemProps['name'];\n  meta?: FileUploadItemProps['meta'];\n  error?: FileUploadItemProps['error'];\n  progress?: FileUploadItemProps['progress'];\n}\n\nexport const FileUploadItemDemo: StoryFn<FileUploadItemDemoProps> = (\n  args: FileUploadItemDemoProps\n) => {\n  const { push } = useToaster();\n\n  const handlePreview = args.withPreview\n    ? (url: FileItemProps['url']) => push({ content: `Previewed ${url}` })\n    : undefined;\n\n  const handleDownload = args.withDownload\n    ? (url: FileItemProps['url']) => push({ content: `Downloaded ${url}` })\n    : undefined;\n\n  const imageSrc =\n    'https://www.pega.com/sites/default/files/styles/480/public/media/images/2021-02/pwi-2021-prevcard.jpg';\n\n  return (\n    <FileUploadItem\n      name={args.name}\n      meta={args.meta}\n      error={args.error}\n      progress={args.progress}\n      thumbnail={imageSrc}\n      onPreview={handlePreview}\n      onDownload={handleDownload}\n    />\n  );\n};\n\nFileUploadItemDemo.args = {\n  name: 'Pega World iNspire',\n  meta: 'Some additional information',\n  error: false,\n  progress: 100\n};\n\nFileUploadItemDemo.argTypes = {\n  withValue: { table: { disable: true } },\n  name: { control: { type: 'text' } },\n  meta: { control: { type: 'text' } },\n  error: { control: { type: 'boolean' } },\n  progress: { control: { type: 'number' } }\n};\n"]}

package/jsx/core/File/FileInput.stories.d.ts

@@ -0,0 +1,10 @@
+import type { StoryFn } from '@storybook/react';
+import type { FileInputProps } from '@pega/cosmos-react-core';
+declare const _default: import("@storybook/types").ComponentAnnotations<import("@storybook/react/dist/types-0a347bb9").R, import("@storybook/types").Args>;
+export default _default;
+interface FileInputStoryProps extends FileInputProps {
+    sizeLimit?: number;
+    showAdditionalInfo?: boolean;
+}
+export declare const FileInputDemo: StoryFn<FileInputStoryProps>;
+//# sourceMappingURL=FileInput.stories.d.ts.map

package/jsx/core/File/FileInput.stories.d.ts.map

@@ -0,0 +1 @@
+{"version":3,"file":"FileInput.stories.d.ts","sourceRoot":"","sources":["../../../src/core/File/FileInput.stories.tsx"],"names":[],"mappings":"AAAA,OAAO,KAAK,EAAQ,OAAO,EAAE,MAAM,kBAAkB,CAAC;AAItD,OAAO,KAAK,EAAE,cAAc,EAAE,MAAM,yBAAyB,CAAC;;AAI9D,wBAGU;AAEV,UAAU,mBAAoB,SAAQ,cAAc;IAClD,SAAS,CAAC,EAAE,MAAM,CAAC;IACnB,kBAAkB,CAAC,EAAE,OAAO,CAAC;CAC9B;AAED,eAAO,MAAM,aAAa,EAAE,OAAO,CAAC,mBAAmB,CAuGtD,CAAC"}