@pega/cosmos-react-demos 5.0.0-dev.7.1 → 5.0.0-dev.8.0
This diff represents the content of publicly available package versions that have been released to one of the supported registries. The information contained in this diff is provided for informational purposes only and reflects changes between package versions as they appear in their respective public registries.
- package/jsx/work/InteractionNotification/InteractionNotification.stories.d.ts +13 -0
- package/jsx/work/InteractionNotification/InteractionNotification.stories.d.ts.map +1 -0
- package/jsx/work/InteractionNotification/InteractionNotification.stories.jsx +56 -0
- package/jsx/work/InteractionNotification/InteractionNotification.stories.jsx.map +1 -0
- package/lib/work/InteractionNotification/InteractionNotification.stories.d.ts +13 -0
- package/lib/work/InteractionNotification/InteractionNotification.stories.d.ts.map +1 -0
- package/lib/work/InteractionNotification/InteractionNotification.stories.js +57 -0
- package/lib/work/InteractionNotification/InteractionNotification.stories.js.map +1 -0
- package/package.json +7 -7
|
@@ -0,0 +1,13 @@
|
|
|
1
|
+
import type { StoryFn } from '@storybook/react';
|
|
2
|
+
declare const _default: import("@storybook/types").ComponentAnnotations<import("@storybook/react/dist/types-0a347bb9").R, import("@storybook/types").Args>;
|
|
3
|
+
export default _default;
|
|
4
|
+
interface InteractionNotificationDemoProps {
|
|
5
|
+
icon: string;
|
|
6
|
+
secondaryText: string;
|
|
7
|
+
acceptAvailable: boolean;
|
|
8
|
+
declineAvailable: boolean;
|
|
9
|
+
timerAvailable: boolean;
|
|
10
|
+
answerTimeout: number;
|
|
11
|
+
}
|
|
12
|
+
export declare const InteractionNotificationDemo: StoryFn<InteractionNotificationDemoProps>;
|
|
13
|
+
//# sourceMappingURL=InteractionNotification.stories.d.ts.map
|
|
@@ -0,0 +1 @@
|
|
|
1
|
+
{"version":3,"file":"InteractionNotification.stories.d.ts","sourceRoot":"","sources":["../../../src/work/InteractionNotification/InteractionNotification.stories.tsx"],"names":[],"mappings":"AACA,OAAO,KAAK,EAAQ,OAAO,EAAE,MAAM,kBAAkB,CAAC;;AAMtD,wBAGU;AAEV,UAAU,gCAAgC;IACxC,IAAI,EAAE,MAAM,CAAC;IACb,aAAa,EAAE,MAAM,CAAC;IACtB,eAAe,EAAE,OAAO,CAAC;IACzB,gBAAgB,EAAE,OAAO,CAAC;IAC1B,cAAc,EAAE,OAAO,CAAC;IACxB,aAAa,EAAE,MAAM,CAAC;CACvB;AAED,eAAO,MAAM,2BAA2B,EAAE,OAAO,CAAC,gCAAgC,CA+CjF,CAAC"}
|
|
@@ -0,0 +1,56 @@
|
|
|
1
|
+
import { action } from '@storybook/addon-actions';
|
|
2
|
+
import { useRef } from 'react';
|
|
3
|
+
import { icons, useI18n, useToaster } from '@pega/cosmos-react-core';
|
|
4
|
+
import { InteractionNotification } from '@pega/cosmos-react-work';
|
|
5
|
+
export default {
|
|
6
|
+
title: 'Work/InteractionNotification',
|
|
7
|
+
component: InteractionNotification
|
|
8
|
+
};
|
|
9
|
+
export const InteractionNotificationDemo = (args) => {
|
|
10
|
+
const incomingNotificationTimeout = useRef(Date.now());
|
|
11
|
+
const { push } = useToaster();
|
|
12
|
+
const t = useI18n();
|
|
13
|
+
return (<InteractionNotification icon={args.icon} title={args.acceptAvailable ? 'Incoming call' : 'Abandoned call'} primaryText='John Brown' secondaryText={args.secondaryText} status={{
|
|
14
|
+
variant: 'success',
|
|
15
|
+
text: 'VERIFIED PLATINUM CUSTOMER'
|
|
16
|
+
}} fields={[
|
|
17
|
+
{
|
|
18
|
+
id: 'reason',
|
|
19
|
+
name: 'Reason for calling',
|
|
20
|
+
value: 'Billing question'
|
|
21
|
+
},
|
|
22
|
+
{
|
|
23
|
+
id: 'openCases',
|
|
24
|
+
name: 'Open cases',
|
|
25
|
+
value: '1'
|
|
26
|
+
},
|
|
27
|
+
{
|
|
28
|
+
id: 'lastInteraction',
|
|
29
|
+
name: 'Last interaction',
|
|
30
|
+
value: new Date().toLocaleDateString()
|
|
31
|
+
}
|
|
32
|
+
]} incomingNotificationTimeout={args.timerAvailable
|
|
33
|
+
? {
|
|
34
|
+
startTime: incomingNotificationTimeout.current,
|
|
35
|
+
answerTimeout: args.answerTimeout,
|
|
36
|
+
onTimerEnd: () => push({ content: t('interaction_time_expired') })
|
|
37
|
+
}
|
|
38
|
+
: undefined} onAccept={args.acceptAvailable ? action('accept') : undefined} onDismiss={action('dismiss')}/>);
|
|
39
|
+
};
|
|
40
|
+
InteractionNotificationDemo.args = {
|
|
41
|
+
icon: 'phone-in-solid',
|
|
42
|
+
secondaryText: '(123) 456-7890',
|
|
43
|
+
acceptAvailable: true,
|
|
44
|
+
declineAvailable: true,
|
|
45
|
+
timerAvailable: true,
|
|
46
|
+
answerTimeout: 30
|
|
47
|
+
};
|
|
48
|
+
InteractionNotificationDemo.argTypes = {
|
|
49
|
+
icon: { options: icons, control: { type: 'select', icons: true } },
|
|
50
|
+
secondaryText: { options: { type: 'text' } },
|
|
51
|
+
acceptAvailable: { options: { type: 'boolean' } },
|
|
52
|
+
declineAvailable: { options: { type: 'boolean' } },
|
|
53
|
+
timerAvailable: { options: { type: 'boolean' } },
|
|
54
|
+
answerTimeout: { options: { type: 'number' } }
|
|
55
|
+
};
|
|
56
|
+
//# sourceMappingURL=InteractionNotification.stories.jsx.map
|
|
@@ -0,0 +1 @@
|
|
|
1
|
+
{"version":3,"file":"InteractionNotification.stories.jsx","sourceRoot":"","sources":["../../../src/work/InteractionNotification/InteractionNotification.stories.tsx"],"names":[],"mappings":"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","sourcesContent":["import { action } from '@storybook/addon-actions';\nimport type { Meta, StoryFn } from '@storybook/react';\nimport { useRef } from 'react';\n\nimport { icons, useI18n, useToaster } from '@pega/cosmos-react-core';\nimport { InteractionNotification } from '@pega/cosmos-react-work';\n\nexport default {\n title: 'Work/InteractionNotification',\n component: InteractionNotification\n} as Meta;\n\ninterface InteractionNotificationDemoProps {\n icon: string;\n secondaryText: string;\n acceptAvailable: boolean;\n declineAvailable: boolean;\n timerAvailable: boolean;\n answerTimeout: number;\n}\n\nexport const InteractionNotificationDemo: StoryFn<InteractionNotificationDemoProps> = (\n args: InteractionNotificationDemoProps\n) => {\n const incomingNotificationTimeout = useRef(Date.now());\n const { push } = useToaster();\n const t = useI18n();\n\n return (\n <InteractionNotification\n icon={args.icon}\n title={args.acceptAvailable ? 'Incoming call' : 'Abandoned call'}\n primaryText='John Brown'\n secondaryText={args.secondaryText}\n status={{\n variant: 'success',\n text: 'VERIFIED PLATINUM CUSTOMER'\n }}\n fields={[\n {\n id: 'reason',\n name: 'Reason for calling',\n value: 'Billing question'\n },\n {\n id: 'openCases',\n name: 'Open cases',\n value: '1'\n },\n {\n id: 'lastInteraction',\n name: 'Last interaction',\n value: new Date().toLocaleDateString()\n }\n ]}\n incomingNotificationTimeout={\n args.timerAvailable\n ? {\n startTime: incomingNotificationTimeout.current,\n answerTimeout: args.answerTimeout,\n onTimerEnd: () => push({ content: t('interaction_time_expired') })\n }\n : undefined\n }\n onAccept={args.acceptAvailable ? action('accept') : undefined}\n onDismiss={action('dismiss')}\n />\n );\n};\n\nInteractionNotificationDemo.args = {\n icon: 'phone-in-solid',\n secondaryText: '(123) 456-7890',\n acceptAvailable: true,\n declineAvailable: true,\n timerAvailable: true,\n answerTimeout: 30\n};\n\nInteractionNotificationDemo.argTypes = {\n icon: { options: icons, control: { type: 'select', icons: true } },\n secondaryText: { options: { type: 'text' } },\n acceptAvailable: { options: { type: 'boolean' } },\n declineAvailable: { options: { type: 'boolean' } },\n timerAvailable: { options: { type: 'boolean' } },\n answerTimeout: { options: { type: 'number' } }\n};\n"]}
|
|
@@ -0,0 +1,13 @@
|
|
|
1
|
+
import type { StoryFn } from '@storybook/react';
|
|
2
|
+
declare const _default: import("@storybook/types").ComponentAnnotations<import("@storybook/react/dist/types-0a347bb9").R, import("@storybook/types").Args>;
|
|
3
|
+
export default _default;
|
|
4
|
+
interface InteractionNotificationDemoProps {
|
|
5
|
+
icon: string;
|
|
6
|
+
secondaryText: string;
|
|
7
|
+
acceptAvailable: boolean;
|
|
8
|
+
declineAvailable: boolean;
|
|
9
|
+
timerAvailable: boolean;
|
|
10
|
+
answerTimeout: number;
|
|
11
|
+
}
|
|
12
|
+
export declare const InteractionNotificationDemo: StoryFn<InteractionNotificationDemoProps>;
|
|
13
|
+
//# sourceMappingURL=InteractionNotification.stories.d.ts.map
|
|
@@ -0,0 +1 @@
|
|
|
1
|
+
{"version":3,"file":"InteractionNotification.stories.d.ts","sourceRoot":"","sources":["../../../src/work/InteractionNotification/InteractionNotification.stories.tsx"],"names":[],"mappings":"AACA,OAAO,KAAK,EAAQ,OAAO,EAAE,MAAM,kBAAkB,CAAC;;AAMtD,wBAGU;AAEV,UAAU,gCAAgC;IACxC,IAAI,EAAE,MAAM,CAAC;IACb,aAAa,EAAE,MAAM,CAAC;IACtB,eAAe,EAAE,OAAO,CAAC;IACzB,gBAAgB,EAAE,OAAO,CAAC;IAC1B,cAAc,EAAE,OAAO,CAAC;IACxB,aAAa,EAAE,MAAM,CAAC;CACvB;AAED,eAAO,MAAM,2BAA2B,EAAE,OAAO,CAAC,gCAAgC,CA+CjF,CAAC"}
|
|
@@ -0,0 +1,57 @@
|
|
|
1
|
+
import { jsx as _jsx } from "react/jsx-runtime";
|
|
2
|
+
import { action } from '@storybook/addon-actions';
|
|
3
|
+
import { useRef } from 'react';
|
|
4
|
+
import { icons, useI18n, useToaster } from '@pega/cosmos-react-core';
|
|
5
|
+
import { InteractionNotification } from '@pega/cosmos-react-work';
|
|
6
|
+
export default {
|
|
7
|
+
title: 'Work/InteractionNotification',
|
|
8
|
+
component: InteractionNotification
|
|
9
|
+
};
|
|
10
|
+
export const InteractionNotificationDemo = (args) => {
|
|
11
|
+
const incomingNotificationTimeout = useRef(Date.now());
|
|
12
|
+
const { push } = useToaster();
|
|
13
|
+
const t = useI18n();
|
|
14
|
+
return (_jsx(InteractionNotification, { icon: args.icon, title: args.acceptAvailable ? 'Incoming call' : 'Abandoned call', primaryText: 'John Brown', secondaryText: args.secondaryText, status: {
|
|
15
|
+
variant: 'success',
|
|
16
|
+
text: 'VERIFIED PLATINUM CUSTOMER'
|
|
17
|
+
}, fields: [
|
|
18
|
+
{
|
|
19
|
+
id: 'reason',
|
|
20
|
+
name: 'Reason for calling',
|
|
21
|
+
value: 'Billing question'
|
|
22
|
+
},
|
|
23
|
+
{
|
|
24
|
+
id: 'openCases',
|
|
25
|
+
name: 'Open cases',
|
|
26
|
+
value: '1'
|
|
27
|
+
},
|
|
28
|
+
{
|
|
29
|
+
id: 'lastInteraction',
|
|
30
|
+
name: 'Last interaction',
|
|
31
|
+
value: new Date().toLocaleDateString()
|
|
32
|
+
}
|
|
33
|
+
], incomingNotificationTimeout: args.timerAvailable
|
|
34
|
+
? {
|
|
35
|
+
startTime: incomingNotificationTimeout.current,
|
|
36
|
+
answerTimeout: args.answerTimeout,
|
|
37
|
+
onTimerEnd: () => push({ content: t('interaction_time_expired') })
|
|
38
|
+
}
|
|
39
|
+
: undefined, onAccept: args.acceptAvailable ? action('accept') : undefined, onDismiss: action('dismiss') }));
|
|
40
|
+
};
|
|
41
|
+
InteractionNotificationDemo.args = {
|
|
42
|
+
icon: 'phone-in-solid',
|
|
43
|
+
secondaryText: '(123) 456-7890',
|
|
44
|
+
acceptAvailable: true,
|
|
45
|
+
declineAvailable: true,
|
|
46
|
+
timerAvailable: true,
|
|
47
|
+
answerTimeout: 30
|
|
48
|
+
};
|
|
49
|
+
InteractionNotificationDemo.argTypes = {
|
|
50
|
+
icon: { options: icons, control: { type: 'select', icons: true } },
|
|
51
|
+
secondaryText: { options: { type: 'text' } },
|
|
52
|
+
acceptAvailable: { options: { type: 'boolean' } },
|
|
53
|
+
declineAvailable: { options: { type: 'boolean' } },
|
|
54
|
+
timerAvailable: { options: { type: 'boolean' } },
|
|
55
|
+
answerTimeout: { options: { type: 'number' } }
|
|
56
|
+
};
|
|
57
|
+
//# sourceMappingURL=InteractionNotification.stories.js.map
|
|
@@ -0,0 +1 @@
|
|
|
1
|
+
{"version":3,"file":"InteractionNotification.stories.js","sourceRoot":"","sources":["../../../src/work/InteractionNotification/InteractionNotification.stories.tsx"],"names":[],"mappings":";AAAA,OAAO,EAAE,MAAM,EAAE,MAAM,0BAA0B,CAAC;AAElD,OAAO,EAAE,MAAM,EAAE,MAAM,OAAO,CAAC;AAE/B,OAAO,EAAE,KAAK,EAAE,OAAO,EAAE,UAAU,EAAE,MAAM,yBAAyB,CAAC;AACrE,OAAO,EAAE,uBAAuB,EAAE,MAAM,yBAAyB,CAAC;AAElE,eAAe;IACb,KAAK,EAAE,8BAA8B;IACrC,SAAS,EAAE,uBAAuB;CAC3B,CAAC;AAWV,MAAM,CAAC,MAAM,2BAA2B,GAA8C,CACpF,IAAsC,EACtC,EAAE;IACF,MAAM,2BAA2B,GAAG,MAAM,CAAC,IAAI,CAAC,GAAG,EAAE,CAAC,CAAC;IACvD,MAAM,EAAE,IAAI,EAAE,GAAG,UAAU,EAAE,CAAC;IAC9B,MAAM,CAAC,GAAG,OAAO,EAAE,CAAC;IAEpB,OAAO,CACL,KAAC,uBAAuB,IACtB,IAAI,EAAE,IAAI,CAAC,IAAI,EACf,KAAK,EAAE,IAAI,CAAC,eAAe,CAAC,CAAC,CAAC,eAAe,CAAC,CAAC,CAAC,gBAAgB,EAChE,WAAW,EAAC,YAAY,EACxB,aAAa,EAAE,IAAI,CAAC,aAAa,EACjC,MAAM,EAAE;YACN,OAAO,EAAE,SAAS;YAClB,IAAI,EAAE,4BAA4B;SACnC,EACD,MAAM,EAAE;YACN;gBACE,EAAE,EAAE,QAAQ;gBACZ,IAAI,EAAE,oBAAoB;gBAC1B,KAAK,EAAE,kBAAkB;aAC1B;YACD;gBACE,EAAE,EAAE,WAAW;gBACf,IAAI,EAAE,YAAY;gBAClB,KAAK,EAAE,GAAG;aACX;YACD;gBACE,EAAE,EAAE,iBAAiB;gBACrB,IAAI,EAAE,kBAAkB;gBACxB,KAAK,EAAE,IAAI,IAAI,EAAE,CAAC,kBAAkB,EAAE;aACvC;SACF,EACD,2BAA2B,EACzB,IAAI,CAAC,cAAc;YACjB,CAAC,CAAC;gBACE,SAAS,EAAE,2BAA2B,CAAC,OAAO;gBAC9C,aAAa,EAAE,IAAI,CAAC,aAAa;gBACjC,UAAU,EAAE,GAAG,EAAE,CAAC,IAAI,CAAC,EAAE,OAAO,EAAE,CAAC,CAAC,0BAA0B,CAAC,EAAE,CAAC;aACnE;YACH,CAAC,CAAC,SAAS,EAEf,QAAQ,EAAE,IAAI,CAAC,eAAe,CAAC,CAAC,CAAC,MAAM,CAAC,QAAQ,CAAC,CAAC,CAAC,CAAC,SAAS,EAC7D,SAAS,EAAE,MAAM,CAAC,SAAS,CAAC,GAC5B,CACH,CAAC;AACJ,CAAC,CAAC;AAEF,2BAA2B,CAAC,IAAI,GAAG;IACjC,IAAI,EAAE,gBAAgB;IACtB,aAAa,EAAE,gBAAgB;IAC/B,eAAe,EAAE,IAAI;IACrB,gBAAgB,EAAE,IAAI;IACtB,cAAc,EAAE,IAAI;IACpB,aAAa,EAAE,EAAE;CAClB,CAAC;AAEF,2BAA2B,CAAC,QAAQ,GAAG;IACrC,IAAI,EAAE,EAAE,OAAO,EAAE,KAAK,EAAE,OAAO,EAAE,EAAE,IAAI,EAAE,QAAQ,EAAE,KAAK,EAAE,IAAI,EAAE,EAAE;IAClE,aAAa,EAAE,EAAE,OAAO,EAAE,EAAE,IAAI,EAAE,MAAM,EAAE,EAAE;IAC5C,eAAe,EAAE,EAAE,OAAO,EAAE,EAAE,IAAI,EAAE,SAAS,EAAE,EAAE;IACjD,gBAAgB,EAAE,EAAE,OAAO,EAAE,EAAE,IAAI,EAAE,SAAS,EAAE,EAAE;IAClD,cAAc,EAAE,EAAE,OAAO,EAAE,EAAE,IAAI,EAAE,SAAS,EAAE,EAAE;IAChD,aAAa,EAAE,EAAE,OAAO,EAAE,EAAE,IAAI,EAAE,QAAQ,EAAE,EAAE;CAC/C,CAAC","sourcesContent":["import { action } from '@storybook/addon-actions';\nimport type { Meta, StoryFn } from '@storybook/react';\nimport { useRef } from 'react';\n\nimport { icons, useI18n, useToaster } from '@pega/cosmos-react-core';\nimport { InteractionNotification } from '@pega/cosmos-react-work';\n\nexport default {\n title: 'Work/InteractionNotification',\n component: InteractionNotification\n} as Meta;\n\ninterface InteractionNotificationDemoProps {\n icon: string;\n secondaryText: string;\n acceptAvailable: boolean;\n declineAvailable: boolean;\n timerAvailable: boolean;\n answerTimeout: number;\n}\n\nexport const InteractionNotificationDemo: StoryFn<InteractionNotificationDemoProps> = (\n args: InteractionNotificationDemoProps\n) => {\n const incomingNotificationTimeout = useRef(Date.now());\n const { push } = useToaster();\n const t = useI18n();\n\n return (\n <InteractionNotification\n icon={args.icon}\n title={args.acceptAvailable ? 'Incoming call' : 'Abandoned call'}\n primaryText='John Brown'\n secondaryText={args.secondaryText}\n status={{\n variant: 'success',\n text: 'VERIFIED PLATINUM CUSTOMER'\n }}\n fields={[\n {\n id: 'reason',\n name: 'Reason for calling',\n value: 'Billing question'\n },\n {\n id: 'openCases',\n name: 'Open cases',\n value: '1'\n },\n {\n id: 'lastInteraction',\n name: 'Last interaction',\n value: new Date().toLocaleDateString()\n }\n ]}\n incomingNotificationTimeout={\n args.timerAvailable\n ? {\n startTime: incomingNotificationTimeout.current,\n answerTimeout: args.answerTimeout,\n onTimerEnd: () => push({ content: t('interaction_time_expired') })\n }\n : undefined\n }\n onAccept={args.acceptAvailable ? action('accept') : undefined}\n onDismiss={action('dismiss')}\n />\n );\n};\n\nInteractionNotificationDemo.args = {\n icon: 'phone-in-solid',\n secondaryText: '(123) 456-7890',\n acceptAvailable: true,\n declineAvailable: true,\n timerAvailable: true,\n answerTimeout: 30\n};\n\nInteractionNotificationDemo.argTypes = {\n icon: { options: icons, control: { type: 'select', icons: true } },\n secondaryText: { options: { type: 'text' } },\n acceptAvailable: { options: { type: 'boolean' } },\n declineAvailable: { options: { type: 'boolean' } },\n timerAvailable: { options: { type: 'boolean' } },\n answerTimeout: { options: { type: 'number' } }\n};\n"]}
|
package/package.json
CHANGED
|
@@ -1,6 +1,6 @@
|
|
|
1
1
|
{
|
|
2
2
|
"name": "@pega/cosmos-react-demos",
|
|
3
|
-
"version": "5.0.0-dev.
|
|
3
|
+
"version": "5.0.0-dev.8.0",
|
|
4
4
|
"repository": {
|
|
5
5
|
"type": "git",
|
|
6
6
|
"url": "https://github.com/pegasystems/cosmos-react.git",
|
|
@@ -20,12 +20,12 @@
|
|
|
20
20
|
"build": "tsc -b"
|
|
21
21
|
},
|
|
22
22
|
"dependencies": {
|
|
23
|
-
"@pega/cosmos-react-condition-builder": "5.0.0-dev.
|
|
24
|
-
"@pega/cosmos-react-core": "5.0.0-dev.
|
|
25
|
-
"@pega/cosmos-react-dnd": "5.0.0-dev.
|
|
26
|
-
"@pega/cosmos-react-rte": "5.0.0-dev.
|
|
27
|
-
"@pega/cosmos-react-social": "5.0.0-dev.
|
|
28
|
-
"@pega/cosmos-react-work": "5.0.0-dev.
|
|
23
|
+
"@pega/cosmos-react-condition-builder": "5.0.0-dev.8.0",
|
|
24
|
+
"@pega/cosmos-react-core": "5.0.0-dev.8.0",
|
|
25
|
+
"@pega/cosmos-react-dnd": "5.0.0-dev.8.0",
|
|
26
|
+
"@pega/cosmos-react-rte": "5.0.0-dev.8.0",
|
|
27
|
+
"@pega/cosmos-react-social": "5.0.0-dev.8.0",
|
|
28
|
+
"@pega/cosmos-react-work": "5.0.0-dev.8.0",
|
|
29
29
|
"@storybook/addon-a11y": "~7.5.3",
|
|
30
30
|
"@storybook/addon-actions": "~7.5.3",
|
|
31
31
|
"@storybook/addon-links": "~7.5.3",
|