@pega/cosmos-react-demos 5.0.0-dev.8.1 → 5.0.0-dev.8.3
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/core/ColorPicker/ColorPicker.stories.d.ts.map +1 -1
- package/jsx/core/ColorPicker/ColorPicker.stories.jsx +1 -1
- package/jsx/core/ColorPicker/ColorPicker.stories.jsx.map +1 -1
- package/jsx/core/Modal/Modal.stories.d.ts +1 -0
- package/jsx/core/Modal/Modal.stories.d.ts.map +1 -1
- package/jsx/core/Modal/Modal.stories.jsx +20 -3
- package/jsx/core/Modal/Modal.stories.jsx.map +1 -1
- package/jsx/social/Email/Email.stories.d.ts +1 -0
- package/jsx/social/Email/Email.stories.d.ts.map +1 -1
- package/jsx/social/Email/Email.stories.jsx +24 -12
- package/jsx/social/Email/Email.stories.jsx.map +1 -1
- package/lib/core/ColorPicker/ColorPicker.stories.d.ts.map +1 -1
- package/lib/core/ColorPicker/ColorPicker.stories.js +1 -1
- package/lib/core/ColorPicker/ColorPicker.stories.js.map +1 -1
- package/lib/core/Modal/Modal.stories.d.ts +1 -0
- package/lib/core/Modal/Modal.stories.d.ts.map +1 -1
- package/lib/core/Modal/Modal.stories.js +14 -3
- package/lib/core/Modal/Modal.stories.js.map +1 -1
- package/lib/social/Email/Email.stories.d.ts +1 -0
- package/lib/social/Email/Email.stories.d.ts.map +1 -1
- package/lib/social/Email/Email.stories.js +24 -17
- package/lib/social/Email/Email.stories.js.map +1 -1
- package/package.json +7 -7
|
@@ -1 +1 @@
|
|
|
1
|
-
{"version":3,"file":"ColorPicker.stories.d.ts","sourceRoot":"","sources":["../../../src/core/ColorPicker/ColorPicker.stories.tsx"],"names":[],"mappings":"AAAA,OAAO,KAAK,EAAQ,OAAO,EAAE,MAAM,kBAAkB,CAAC;AAItD,OAAO,KAAK,EAAE,gBAAgB,EAAE,MAAM,yBAAyB,CAAC;;AAIhE,wBAGU;AAEV,UAAU,qBAAsB,SAAQ,gBAAgB;IACtD,kBAAkB,CAAC,EAAE,OAAO,CAAC;CAC9B;AAED,eAAO,MAAM,eAAe,EAAE,OAAO,CAAC,qBAAqB,
|
|
1
|
+
{"version":3,"file":"ColorPicker.stories.d.ts","sourceRoot":"","sources":["../../../src/core/ColorPicker/ColorPicker.stories.tsx"],"names":[],"mappings":"AAAA,OAAO,KAAK,EAAQ,OAAO,EAAE,MAAM,kBAAkB,CAAC;AAItD,OAAO,KAAK,EAAE,gBAAgB,EAAE,MAAM,yBAAyB,CAAC;;AAIhE,wBAGU;AAEV,UAAU,qBAAsB,SAAQ,gBAAgB;IACtD,kBAAkB,CAAC,EAAE,OAAO,CAAC;CAC9B;AAED,eAAO,MAAM,eAAe,EAAE,OAAO,CAAC,qBAAqB,CA6B1D,CAAC;AA4BF,eAAO,MAAM,UAAU,EAAE,OA2ExB,CAAC"}
|
|
@@ -12,7 +12,7 @@ export const ColorPickerDemo = (args) => {
|
|
|
12
12
|
heading: 'Additional Info',
|
|
13
13
|
content: 'Select a color from the dropdown or by entering its hex code.'
|
|
14
14
|
}
|
|
15
|
-
: undefined} label={args.label} labelHidden={args.labelHidden} info={args.info} status={args.status} swatchOnly={args.swatchOnly} inline={args.inline} required={args.required} disabled={args.disabled} readOnly={args.readOnly} value={value} onChange={e => {
|
|
15
|
+
: undefined} label={args.label} labelHidden={args.labelHidden} info={args.info} status={args.status} swatchOnly={args.swatchOnly} inline={args.inline} required={args.required} disabled={args.disabled} readOnly={args.readOnly} value={value} onBeforeClose={args.onBeforeClose} onChange={e => {
|
|
16
16
|
setValue(e.hex);
|
|
17
17
|
}}/>);
|
|
18
18
|
};
|
|
@@ -1 +1 @@
|
|
|
1
|
-
{"version":3,"file":"ColorPicker.stories.jsx","sourceRoot":"","sources":["../../../src/core/ColorPicker/ColorPicker.stories.tsx"],"names":[],"mappings":"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","sourcesContent":["import type { Meta, StoryFn } from '@storybook/react';\nimport { useMemo, useState } from 'react';\n\nimport { ColorPicker, Flex, Grid, Text, useTheme } from '@pega/cosmos-react-core';\nimport type { ColorPickerProps } from '@pega/cosmos-react-core';\n\nimport { StyledColorPane } from './ColorPicker.styles';\n\nexport default {\n title: 'Core/ColorPicker',\n component: ColorPicker\n} as Meta;\n\ninterface ColorPickerStoryProps extends ColorPickerProps {\n showAdditionalInfo?: boolean;\n}\n\nexport const ColorPickerDemo: StoryFn<ColorPickerStoryProps> = (args: ColorPickerStoryProps) => {\n const [value, setValue] = useState('#10a5ac');\n\n return (\n <ColorPicker\n additionalInfo={\n args.showAdditionalInfo\n ? {\n heading: 'Additional Info',\n content: 'Select a color from the dropdown or by entering its hex code.'\n }\n : undefined\n }\n label={args.label}\n labelHidden={args.labelHidden}\n info={args.info}\n status={args.status}\n swatchOnly={args.swatchOnly}\n inline={args.inline}\n required={args.required}\n disabled={args.disabled}\n readOnly={args.readOnly}\n value={value}\n onChange={e => {\n setValue(e.hex);\n }}\n />\n );\n};\n\nColorPickerDemo.args = {\n label: 'ColorPicker label',\n labelHidden: false,\n info: 'Pick a color',\n status: undefined,\n swatchOnly: false,\n inline: false,\n required: false,\n disabled: false,\n readOnly: false,\n showAdditionalInfo: false\n};\n\nColorPickerDemo.argTypes = {\n label: { control: { type: 'text' } },\n labelHidden: { control: { type: 'boolean' } },\n info: { control: { type: 'text', label: 'Helper text' } },\n status: { options: [undefined, 'success', 'warning', 'error'], control: { type: 'select' } },\n swatchOnly: { control: { type: 'boolean' } },\n inline: { control: { type: 'boolean' } },\n required: { control: { type: 'boolean' } },\n disabled: { control: { type: 'boolean' } },\n readOnly: { control: { type: 'boolean' } },\n showAdditionalInfo: { control: { type: 'boolean' } }\n};\n\nexport const MultiColor: StoryFn = () => {\n const {\n base: { palette }\n } = useTheme();\n\n const opaqueColors = useMemo(\n () =>\n Object.entries(palette).filter(([, color]) => {\n return /^#[0-9A-F]{6}$/i.test(color);\n }),\n [palette]\n );\n\n const [values, setValues] = useState(() => opaqueColors.map(([, color]) => color));\n\n return (\n <Grid container={{ rows: '1fr 2fr' }} style={{ height: '100vh' }}>\n <Grid\n container={{\n cols: '1fr 1fr 1fr 1fr',\n alignItems: 'center',\n colGap: 4,\n rowGap: 1\n }}\n style={{ padding: '1rem' }}\n >\n <>\n {values.map((color, i) => {\n const key = `color-${i}`;\n return (\n <div key={key}>\n <ColorPicker\n inline\n label={opaqueColors[i][0]}\n value={color}\n onChange={e => {\n const newColor = e.hex;\n setValues(cur => {\n return cur.map((c, j) => {\n if (i === j) return newColor;\n return c;\n });\n });\n }}\n />\n </div>\n );\n })}\n </>\n </Grid>\n\n <Grid\n container={{\n cols: '1fr 1fr 1fr 1fr',\n gap: 0.125\n }}\n >\n {values.map((color, i) => {\n const key = `color-${i}`;\n return (\n <Flex\n container={{ justify: 'center', alignItems: 'center' }}\n as={StyledColorPane}\n color={color}\n key={key}\n >\n <Text variant='h1' as='span'>\n {color}\n </Text>\n </Flex>\n );\n })}\n </Grid>\n </Grid>\n );\n};\n"]}
|
|
1
|
+
{"version":3,"file":"ColorPicker.stories.jsx","sourceRoot":"","sources":["../../../src/core/ColorPicker/ColorPicker.stories.tsx"],"names":[],"mappings":"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","sourcesContent":["import type { Meta, StoryFn } from '@storybook/react';\nimport { useMemo, useState } from 'react';\n\nimport { ColorPicker, Flex, Grid, Text, useTheme } from '@pega/cosmos-react-core';\nimport type { ColorPickerProps } from '@pega/cosmos-react-core';\n\nimport { StyledColorPane } from './ColorPicker.styles';\n\nexport default {\n title: 'Core/ColorPicker',\n component: ColorPicker\n} as Meta;\n\ninterface ColorPickerStoryProps extends ColorPickerProps {\n showAdditionalInfo?: boolean;\n}\n\nexport const ColorPickerDemo: StoryFn<ColorPickerStoryProps> = (args: ColorPickerStoryProps) => {\n const [value, setValue] = useState('#10a5ac');\n\n return (\n <ColorPicker\n additionalInfo={\n args.showAdditionalInfo\n ? {\n heading: 'Additional Info',\n content: 'Select a color from the dropdown or by entering its hex code.'\n }\n : undefined\n }\n label={args.label}\n labelHidden={args.labelHidden}\n info={args.info}\n status={args.status}\n swatchOnly={args.swatchOnly}\n inline={args.inline}\n required={args.required}\n disabled={args.disabled}\n readOnly={args.readOnly}\n value={value}\n onBeforeClose={args.onBeforeClose}\n onChange={e => {\n setValue(e.hex);\n }}\n />\n );\n};\n\nColorPickerDemo.args = {\n label: 'ColorPicker label',\n labelHidden: false,\n info: 'Pick a color',\n status: undefined,\n swatchOnly: false,\n inline: false,\n required: false,\n disabled: false,\n readOnly: false,\n showAdditionalInfo: false\n};\n\nColorPickerDemo.argTypes = {\n label: { control: { type: 'text' } },\n labelHidden: { control: { type: 'boolean' } },\n info: { control: { type: 'text', label: 'Helper text' } },\n status: { options: [undefined, 'success', 'warning', 'error'], control: { type: 'select' } },\n swatchOnly: { control: { type: 'boolean' } },\n inline: { control: { type: 'boolean' } },\n required: { control: { type: 'boolean' } },\n disabled: { control: { type: 'boolean' } },\n readOnly: { control: { type: 'boolean' } },\n showAdditionalInfo: { control: { type: 'boolean' } }\n};\n\nexport const MultiColor: StoryFn = () => {\n const {\n base: { palette }\n } = useTheme();\n\n const opaqueColors = useMemo(\n () =>\n Object.entries(palette).filter(([, color]) => {\n return /^#[0-9A-F]{6}$/i.test(color);\n }),\n [palette]\n );\n\n const [values, setValues] = useState(() => opaqueColors.map(([, color]) => color));\n\n return (\n <Grid container={{ rows: '1fr 2fr' }} style={{ height: '100vh' }}>\n <Grid\n container={{\n cols: '1fr 1fr 1fr 1fr',\n alignItems: 'center',\n colGap: 4,\n rowGap: 1\n }}\n style={{ padding: '1rem' }}\n >\n <>\n {values.map((color, i) => {\n const key = `color-${i}`;\n return (\n <div key={key}>\n <ColorPicker\n inline\n label={opaqueColors[i][0]}\n value={color}\n onChange={e => {\n const newColor = e.hex;\n setValues(cur => {\n return cur.map((c, j) => {\n if (i === j) return newColor;\n return c;\n });\n });\n }}\n />\n </div>\n );\n })}\n </>\n </Grid>\n\n <Grid\n container={{\n cols: '1fr 1fr 1fr 1fr',\n gap: 0.125\n }}\n >\n {values.map((color, i) => {\n const key = `color-${i}`;\n return (\n <Flex\n container={{ justify: 'center', alignItems: 'center' }}\n as={StyledColorPane}\n color={color}\n key={key}\n >\n <Text variant='h1' as='span'>\n {color}\n </Text>\n </Flex>\n );\n })}\n </Grid>\n </Grid>\n );\n};\n"]}
|
|
@@ -7,6 +7,7 @@ interface ModalDemoProps {
|
|
|
7
7
|
autoWidth: ModalProps['autoWidth'];
|
|
8
8
|
center: ModalProps['center'];
|
|
9
9
|
stretch: ModalProps['stretch'];
|
|
10
|
+
defaultMinimized?: boolean;
|
|
10
11
|
onDismiss?: (id: string) => void;
|
|
11
12
|
onMinimize?: (id: string) => void;
|
|
12
13
|
onActivate?: (id: string) => void;
|
|
@@ -1 +1 @@
|
|
|
1
|
-
{"version":3,"file":"Modal.stories.d.ts","sourceRoot":"","sources":["../../../src/core/Modal/Modal.stories.tsx"],"names":[],"mappings":"AAAA,OAAO,KAAK,EAAQ,OAAO,EAAE,MAAM,kBAAkB,CAAC;AAgBtD,OAAO,KAAK,EAAgB,UAAU,EAAE,MAAM,yBAAyB,CAAC;AAKxE,OAAO,KAAK,EAAE,YAAY,EAAE,MAAM,eAAe,CAAC;;AAElD,wBA8BU;AAEV,UAAU,cAAc;IACtB,SAAS,EAAE,UAAU,CAAC,WAAW,CAAC,CAAC;IACnC,MAAM,EAAE,UAAU,CAAC,QAAQ,CAAC,CAAC;IAC7B,OAAO,EAAE,UAAU,CAAC,SAAS,CAAC,CAAC;IAC/B,SAAS,CAAC,EAAE,CAAC,EAAE,EAAE,MAAM,KAAK,IAAI,CAAC;IACjC,UAAU,CAAC,EAAE,CAAC,EAAE,EAAE,MAAM,KAAK,IAAI,CAAC;IAClC,UAAU,CAAC,EAAE,CAAC,EAAE,EAAE,MAAM,KAAK,IAAI,CAAC;IAClC,gBAAgB,CAAC,EAAE,MAAM,OAAO,CAAC;IACjC,iBAAiB,CAAC,EAAE,MAAM,OAAO,CAAC;IAClC,iBAAiB,CAAC,EAAE,MAAM,OAAO,CAAC;IAClC,aAAa,CAAC,EAAE,MAAM,OAAO,CAAC;CAC/B;AAED,UAAU,mBAAoB,SAAQ,cAAc;IAClD,SAAS,CAAC,EAAE,CAAC,CAAC,EAAE,aAAa,KAAK,IAAI,CAAC;CACxC;AAED,eAAO,MAAM,SAAS,EAAE,OAAO,CAAC,cAAc,CA6B7C,CAAC;AAEF,eAAO,MAAM,YAAY,EAAE,OAAO,CAAC,cAAc,CA6DhD,CAAC;AAEF,eAAO,MAAM,UAAU,EAAE,OAAO,CAAC,mBAAmB,CA0GnD,CAAC;AAUF,eAAO,MAAM,aAAa,EAAE,OA0F3B,CAAC;AAEF,eAAO,MAAM,gBAAgB,EAAE,OAAO,CAAC,cAAc,
|
|
1
|
+
{"version":3,"file":"Modal.stories.d.ts","sourceRoot":"","sources":["../../../src/core/Modal/Modal.stories.tsx"],"names":[],"mappings":"AAAA,OAAO,KAAK,EAAQ,OAAO,EAAE,MAAM,kBAAkB,CAAC;AAgBtD,OAAO,KAAK,EAAgB,UAAU,EAAE,MAAM,yBAAyB,CAAC;AAKxE,OAAO,KAAK,EAAE,YAAY,EAAE,MAAM,eAAe,CAAC;;AAElD,wBA8BU;AAEV,UAAU,cAAc;IACtB,SAAS,EAAE,UAAU,CAAC,WAAW,CAAC,CAAC;IACnC,MAAM,EAAE,UAAU,CAAC,QAAQ,CAAC,CAAC;IAC7B,OAAO,EAAE,UAAU,CAAC,SAAS,CAAC,CAAC;IAC/B,gBAAgB,CAAC,EAAE,OAAO,CAAC;IAC3B,SAAS,CAAC,EAAE,CAAC,EAAE,EAAE,MAAM,KAAK,IAAI,CAAC;IACjC,UAAU,CAAC,EAAE,CAAC,EAAE,EAAE,MAAM,KAAK,IAAI,CAAC;IAClC,UAAU,CAAC,EAAE,CAAC,EAAE,EAAE,MAAM,KAAK,IAAI,CAAC;IAClC,gBAAgB,CAAC,EAAE,MAAM,OAAO,CAAC;IACjC,iBAAiB,CAAC,EAAE,MAAM,OAAO,CAAC;IAClC,iBAAiB,CAAC,EAAE,MAAM,OAAO,CAAC;IAClC,aAAa,CAAC,EAAE,MAAM,OAAO,CAAC;CAC/B;AAED,UAAU,mBAAoB,SAAQ,cAAc;IAClD,SAAS,CAAC,EAAE,CAAC,CAAC,EAAE,aAAa,KAAK,IAAI,CAAC;CACxC;AAED,eAAO,MAAM,SAAS,EAAE,OAAO,CAAC,cAAc,CA6B7C,CAAC;AAEF,eAAO,MAAM,YAAY,EAAE,OAAO,CAAC,cAAc,CA6DhD,CAAC;AAEF,eAAO,MAAM,UAAU,EAAE,OAAO,CAAC,mBAAmB,CA0GnD,CAAC;AAUF,eAAO,MAAM,aAAa,EAAE,OA0F3B,CAAC;AAEF,eAAO,MAAM,gBAAgB,EAAE,OAAO,CAAC,cAAc,CAgEpD,CAAC;AAEF,eAAO,MAAM,WAAW,EAAE,OAAO,CAAC,cAAc,CA+B/C,CAAC;AAEF,UAAU,0BAA0B;IAClC,SAAS,EAAE,OAAO,CAAC;IACnB,OAAO,EAAE,YAAY,CAAC;IACtB,oBAAoB,EAAE,OAAO,CAAC;IAC9B,OAAO,CAAC,EAAE,KAAK,CAAC;IAChB,MAAM,CAAC,EAAE,KAAK,CAAC;CAChB;AAED,eAAO,MAAM,qBAAqB,EAAE,OAAO,CAAC,0BAA0B,CA6DrE,CAAC"}
|
|
@@ -212,13 +212,29 @@ export const ProgressState = () => {
|
|
|
212
212
|
};
|
|
213
213
|
export const MinimizableModal = (args) => {
|
|
214
214
|
const [count, setCount] = useState(1);
|
|
215
|
+
const { create } = useModalManager();
|
|
216
|
+
const NewModal = () => {
|
|
217
|
+
return (<Modal heading={`Another modal from Modal #${count}`} autoWidth={args.autoWidth}>
|
|
218
|
+
<Text>
|
|
219
|
+
This minimizable modal is triggered from an existing open modal - Modal #{count}.
|
|
220
|
+
</Text>
|
|
221
|
+
</Modal>);
|
|
222
|
+
};
|
|
215
223
|
const MyModal = () => {
|
|
216
|
-
return (<Modal heading={`Modal #${count}`} autoWidth={args.autoWidth}
|
|
224
|
+
return (<Modal heading={`Modal #${count}`} autoWidth={args.autoWidth} actions={<Button variant='secondary' onClick={() => {
|
|
225
|
+
create(NewModal, undefined, {
|
|
226
|
+
minimizable: true,
|
|
227
|
+
onDismiss: args.onDismiss,
|
|
228
|
+
onMinimize: args.onMinimize,
|
|
229
|
+
onActivate: args.onActivate
|
|
230
|
+
});
|
|
231
|
+
}}>
|
|
232
|
+
Create modal
|
|
233
|
+
</Button>} center={args.center} stretch={args.stretch} onRequestDismiss={args.onRequestDismiss} onRequestMinimize={args.onRequestMinimize} onRequestActivate={args.onRequestActivate}>
|
|
217
234
|
<Text>This Modal can be minimized by clicking the minimize button above.</Text>
|
|
218
235
|
</Modal>);
|
|
219
236
|
};
|
|
220
237
|
const ModalButton = () => {
|
|
221
|
-
const { create } = useModalManager();
|
|
222
238
|
return (<Button onClick={() => {
|
|
223
239
|
setCount(count + 1);
|
|
224
240
|
create(MyModal, undefined, {
|
|
@@ -226,7 +242,8 @@ export const MinimizableModal = (args) => {
|
|
|
226
242
|
id: `Modal #${count}`,
|
|
227
243
|
onDismiss: args.onDismiss,
|
|
228
244
|
onMinimize: args.onMinimize,
|
|
229
|
-
onActivate: args.onActivate
|
|
245
|
+
onActivate: args.onActivate,
|
|
246
|
+
defaultMinimized: args.defaultMinimized
|
|
230
247
|
});
|
|
231
248
|
}}>
|
|
232
249
|
Open Modal
|
|
@@ -1 +1 @@
|
|
|
1
|
-
{"version":3,"file":"Modal.stories.jsx","sourceRoot":"","sources":["../../../src/core/Modal/Modal.stories.tsx"],"names":[],"mappings":"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","sourcesContent":["import type { Meta, StoryFn } from '@storybook/react';\nimport { useEffect, useMemo, useRef, useState } from 'react';\nimport type { FC, ChangeEvent, ReactNode } from 'react';\nimport { action } from '@storybook/addon-actions';\n\nimport {\n Button,\n Flex,\n Input,\n Modal,\n Text,\n useModalManager,\n useModalContext,\n useToaster,\n cap\n} from '@pega/cosmos-react-core';\nimport type { ModalMethods, ModalProps } from '@pega/cosmos-react-core';\n\nimport { loadingTimeoutMS } from '../Progress/Progress.mocks';\n\nimport { getContent } from './Modal.mocks';\nimport type { ContentTypes } from './Modal.mocks';\n\nexport default {\n title: 'Core/Modal',\n component: Modal,\n parameters: {\n layout: 'centered'\n },\n args: {\n autoWidth: false,\n stretch: false,\n center: false,\n onDismiss: action('Clicked dismiss button'),\n onMinimize: action('Clicked minimize button'),\n onActivate: action('Activates minimized modal'),\n onRequestDismiss: action('onRequestDismiss called'),\n onRequestMinimize: action('onRequestMinimize called'),\n onRequestActivate: action('onRequestActivate called'),\n onRequestDock: action('onRequestActivate called')\n },\n argTypes: {\n autoWidth: { control: { type: 'boolean' } },\n stretch: { control: { type: 'boolean' } },\n center: { control: { type: 'boolean' } },\n onDismiss: { table: { disable: true } },\n onMinimize: { table: { disable: true } },\n onActivate: { table: { disable: true } },\n onRequestDismiss: { table: { disable: true } },\n onRequestMinimize: { table: { disable: true } },\n onRequestActivate: { table: { disable: true } },\n onRequestDock: { table: { disable: true } }\n }\n} as Meta;\n\ninterface ModalDemoProps {\n autoWidth: ModalProps['autoWidth'];\n center: ModalProps['center'];\n stretch: ModalProps['stretch'];\n onDismiss?: (id: string) => void;\n onMinimize?: (id: string) => void;\n onActivate?: (id: string) => void;\n onRequestDismiss?: () => boolean;\n onRequestMinimize?: () => boolean;\n onRequestActivate?: () => boolean;\n onRequestDock?: () => boolean;\n}\n\ninterface AlertModalDemoProps extends ModalDemoProps {\n onKeyDown?: (e: KeyboardEvent) => void;\n}\n\nexport const ModalDemo: StoryFn<ModalDemoProps> = (args: ModalDemoProps) => {\n const MyModal = () => {\n return (\n <Modal\n heading='This is the Modal heading'\n autoWidth={args.autoWidth}\n center={args.center}\n stretch={args.stretch}\n >\n <Text>This is the content of the Modal.</Text>\n </Modal>\n );\n };\n\n const ModalButton = () => {\n const { create } = useModalManager();\n\n return (\n <Button\n onClick={() => {\n create(MyModal);\n }}\n >\n Open Modal\n </Button>\n );\n };\n\n return <ModalButton />;\n};\n\nexport const ModalUpdates: StoryFn<ModalDemoProps> = (args: ModalDemoProps) => {\n interface ModalUpdatesProps {\n content: string;\n disableButton: boolean;\n heading: string;\n }\n\n const MyModal: FC<ModalUpdatesProps> = props => {\n const { update } = useModalContext();\n\n const actions = (\n <Button\n variant='primary'\n disabled={props.disableButton}\n onClick={() => {\n update({\n content: 'This Modal has been updated a second time from within the Modal!'\n });\n }}\n >\n Update Modal\n </Button>\n );\n\n return (\n <Modal\n heading={props.heading}\n actions={actions}\n autoWidth={args.autoWidth}\n center={args.center}\n stretch={args.stretch}\n >\n <Text>{props.content}</Text>\n </Modal>\n );\n };\n\n const ModalButton = () => {\n const { create } = useModalManager();\n const modalMethods = useRef<ModalMethods<ModalUpdatesProps>>();\n\n const openModal = () => {\n modalMethods.current = create(MyModal, {\n heading: 'This is the Modal heading',\n content: 'This Modal will automatically update in a few seconds.',\n disableButton: true\n });\n\n setTimeout(() => {\n modalMethods.current?.update({\n heading: 'This is the updated Modal heading',\n content: 'This Modal has been updated from its parent!',\n disableButton: false\n });\n }, 2000);\n };\n\n return <Button onClick={openModal}>Open Modal</Button>;\n };\n\n return <ModalButton />;\n};\n\nexport const AlertModal: StoryFn<AlertModalDemoProps> = (args: AlertModalDemoProps) => {\n const MyAlert = (props: { closeInitialModal: () => void }) => {\n const { dismiss } = useModalContext();\n\n const actions = useMemo(() => {\n return (\n <>\n <Button onClick={dismiss}>No</Button>\n <Button\n variant='primary'\n onClick={() => {\n dismiss();\n props.closeInitialModal();\n }}\n >\n Yes\n </Button>\n </>\n );\n }, [dismiss]);\n\n return (\n <Modal\n heading='You have unsaved changes!'\n actions={actions}\n center={args.center}\n stretch={args.stretch}\n >\n <Text>Are you sure you want to close without saving?</Text>\n </Modal>\n );\n };\n\n const MyModal = () => {\n const [name, setName] = useState('');\n const { create } = useModalManager();\n const { dismiss } = useModalContext();\n\n const actions = useMemo(() => {\n return (\n <>\n <Button\n onClick={() => {\n if (name !== '') {\n create(MyAlert, { closeInitialModal: dismiss }, { alert: true });\n } else {\n dismiss();\n }\n }}\n >\n Close\n </Button>\n <Button variant='primary' onClick={dismiss} disabled={name === ''}>\n Save\n </Button>\n </>\n );\n }, [dismiss, name]);\n\n const onNameChange = (e: ChangeEvent<HTMLInputElement>) => {\n setName(e.target.value);\n };\n\n return (\n <Modal\n actions={actions}\n heading='Close the Modal without saving any data to invoke the alert'\n autoWidth={args.autoWidth}\n center={args.center}\n stretch={args.stretch}\n onRequestDismiss={() => {\n if (name !== '') {\n create(MyAlert, { closeInitialModal: dismiss }, { alert: true });\n return false;\n }\n }}\n >\n <Input\n label='Name'\n name='name'\n onChange={onNameChange}\n onKeyDown={args.onKeyDown}\n value={name}\n required\n />\n </Modal>\n );\n };\n\n const ModalButton = () => {\n const { create } = useModalManager();\n\n return (\n <Button\n onClick={() => {\n create(MyModal, undefined, {\n onDismiss: args.onDismiss\n });\n }}\n >\n Open Modal\n </Button>\n );\n };\n\n return <ModalButton />;\n};\n\nAlertModal.args = {\n onKeyDown: action(\"Called input's onKeyDown\")\n};\n\nAlertModal.argTypes = {\n onKeyDown: { table: { disable: true } }\n};\n\nexport const ProgressState: StoryFn = () => {\n const LoadingStateModal = () => {\n const { dismiss } = useModalContext();\n\n const [transientState, setTransientState] = useState<'loading' | 'submitting' | null>(\n 'loading'\n );\n\n const actions =\n transientState === 'loading' ? null : (\n <>\n <Button\n disabled={!!transientState}\n onClick={() => {\n if (transientState !== 'submitting') {\n dismiss();\n }\n }}\n >\n Cancel\n </Button>\n <Button\n disabled={!!transientState}\n variant='primary'\n onClick={() => {\n setTransientState('submitting');\n }}\n >\n Submit\n </Button>\n </>\n );\n\n useEffect(() => {\n let timerID: number;\n\n if (transientState === 'loading' || transientState === 'submitting') {\n timerID = window.setTimeout(() => {\n if (transientState === 'loading') {\n setTransientState(null);\n } else {\n dismiss();\n }\n }, loadingTimeoutMS);\n }\n\n return () => {\n window.clearTimeout(timerID);\n };\n }, [transientState]);\n\n return (\n <Modal\n progress={useMemo(() => {\n if (transientState) {\n return {\n message: `${cap(transientState)}…`\n };\n }\n }, [transientState])}\n heading='Modal progress demo'\n actions={actions}\n onRequestDismiss={() => transientState !== 'submitting'}\n >\n {transientState !== 'loading' && (\n <Flex container={{ direction: 'column', gap: 2 }}>\n {Array.from({ length: 5 }, (_, i) => (\n <Input key={i} label={`Field-${i + 1}`} />\n ))}\n </Flex>\n )}\n </Modal>\n );\n };\n\n const ModalButton = () => {\n const { create } = useModalManager();\n\n return (\n <Button\n onClick={() => {\n create(LoadingStateModal);\n }}\n >\n Open Modal\n </Button>\n );\n };\n\n return <ModalButton />;\n};\n\nexport const MinimizableModal: StoryFn<ModalDemoProps> = (args: ModalDemoProps) => {\n const [count, setCount] = useState(1);\n\n const MyModal = () => {\n return (\n <Modal\n heading={`Modal #${count}`}\n autoWidth={args.autoWidth}\n center={args.center}\n stretch={args.stretch}\n onRequestDismiss={args.onRequestDismiss}\n onRequestMinimize={args.onRequestMinimize}\n onRequestActivate={args.onRequestActivate}\n >\n <Text>This Modal can be minimized by clicking the minimize button above.</Text>\n </Modal>\n );\n };\n\n const ModalButton = () => {\n const { create } = useModalManager();\n\n return (\n <Button\n onClick={() => {\n setCount(count + 1);\n create(MyModal, undefined, {\n minimizable: true,\n id: `Modal #${count}`,\n onDismiss: args.onDismiss,\n onMinimize: args.onMinimize,\n onActivate: args.onActivate\n });\n }}\n >\n Open Modal\n </Button>\n );\n };\n\n return <ModalButton />;\n};\n\nexport const DockedModal: StoryFn<ModalDemoProps> = (args: ModalDemoProps) => {\n const [count, setCount] = useState(1);\n\n const MyModal = () => {\n return (\n <Modal heading={`Modal #${count}`} onRequestDock={args.onRequestDock}>\n <Text>This Modal can be minimized by clicking the minimize button above.</Text>\n </Modal>\n );\n };\n\n const ModalButton = () => {\n const { create } = useModalManager();\n\n return (\n <Button\n onClick={() => {\n setCount(count + 1);\n create(MyModal, undefined, {\n minimizable: true,\n maximizable: true,\n dockable: true\n });\n }}\n >\n Open Modal\n </Button>\n );\n };\n\n return <ModalButton />;\n};\n\ninterface AutoWidthModalContentProps {\n autoWidth: boolean;\n content: ContentTypes;\n formColumnWidthFixed: boolean;\n stretch?: never;\n center?: never;\n}\n\nexport const AutoWidthModalContent: StoryFn<AutoWidthModalContentProps> = (\n args: AutoWidthModalContentProps\n) => {\n const { push } = useToaster();\n\n const MyModal = ({ content }: { content: ReactNode }) => {\n const { dismiss } = useModalContext();\n\n return (\n <Modal\n heading={`Modal ${args.autoWidth ? 'with' : 'without'} autoWidth`}\n autoWidth={args.autoWidth}\n actions={\n args.content.includes('form') || args.content === 'random' ? (\n <>\n <Button\n name='Cancel'\n variant='secondary'\n onClick={() => {\n dismiss();\n push({ content: 'Form cancelled!' });\n }}\n >\n Cancel\n </Button>\n <Button\n name='Submit'\n variant='primary'\n onClick={() => {\n dismiss();\n push({ content: 'Form submitted!' });\n }}\n >\n Submit\n </Button>\n </>\n ) : undefined\n }\n >\n {content}\n </Modal>\n );\n };\n\n const ModalButton = () => {\n const { create } = useModalManager();\n\n return (\n <Button\n onClick={() => {\n create(MyModal, {\n content: getContent(args.content, args.formColumnWidthFixed)\n });\n }}\n >\n Open Modal\n </Button>\n );\n };\n\n return <ModalButton />;\n};\n\nAutoWidthModalContent.args = {\n autoWidth: true,\n content: 'short text',\n formColumnWidthFixed: false\n};\n\nAutoWidthModalContent.argTypes = {\n stretch: { table: { disable: true } },\n center: { table: { disable: true } },\n content: {\n options: [\n 'short text',\n 'long text',\n 'image',\n 'table',\n 'form (1 column)',\n 'form (2 column)',\n 'form (3 column)',\n 'random'\n ],\n control: { type: 'select' }\n },\n formColumnWidthFixed: { control: { type: 'boolean' } }\n};\n"]}
|
|
1
|
+
{"version":3,"file":"Modal.stories.jsx","sourceRoot":"","sources":["../../../src/core/Modal/Modal.stories.tsx"],"names":[],"mappings":"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","sourcesContent":["import type { Meta, StoryFn } from '@storybook/react';\nimport { useEffect, useMemo, useRef, useState } from 'react';\nimport type { FC, ChangeEvent, ReactNode } from 'react';\nimport { action } from '@storybook/addon-actions';\n\nimport {\n Button,\n Flex,\n Input,\n Modal,\n Text,\n useModalManager,\n useModalContext,\n useToaster,\n cap\n} from '@pega/cosmos-react-core';\nimport type { ModalMethods, ModalProps } from '@pega/cosmos-react-core';\n\nimport { loadingTimeoutMS } from '../Progress/Progress.mocks';\n\nimport { getContent } from './Modal.mocks';\nimport type { ContentTypes } from './Modal.mocks';\n\nexport default {\n title: 'Core/Modal',\n component: Modal,\n parameters: {\n layout: 'centered'\n },\n args: {\n autoWidth: false,\n stretch: false,\n center: false,\n onDismiss: action('Clicked dismiss button'),\n onMinimize: action('Clicked minimize button'),\n onActivate: action('Activates minimized modal'),\n onRequestDismiss: action('onRequestDismiss called'),\n onRequestMinimize: action('onRequestMinimize called'),\n onRequestActivate: action('onRequestActivate called'),\n onRequestDock: action('onRequestActivate called')\n },\n argTypes: {\n autoWidth: { control: { type: 'boolean' } },\n stretch: { control: { type: 'boolean' } },\n center: { control: { type: 'boolean' } },\n onDismiss: { table: { disable: true } },\n onMinimize: { table: { disable: true } },\n onActivate: { table: { disable: true } },\n onRequestDismiss: { table: { disable: true } },\n onRequestMinimize: { table: { disable: true } },\n onRequestActivate: { table: { disable: true } },\n onRequestDock: { table: { disable: true } }\n }\n} as Meta;\n\ninterface ModalDemoProps {\n autoWidth: ModalProps['autoWidth'];\n center: ModalProps['center'];\n stretch: ModalProps['stretch'];\n defaultMinimized?: boolean;\n onDismiss?: (id: string) => void;\n onMinimize?: (id: string) => void;\n onActivate?: (id: string) => void;\n onRequestDismiss?: () => boolean;\n onRequestMinimize?: () => boolean;\n onRequestActivate?: () => boolean;\n onRequestDock?: () => boolean;\n}\n\ninterface AlertModalDemoProps extends ModalDemoProps {\n onKeyDown?: (e: KeyboardEvent) => void;\n}\n\nexport const ModalDemo: StoryFn<ModalDemoProps> = (args: ModalDemoProps) => {\n const MyModal = () => {\n return (\n <Modal\n heading='This is the Modal heading'\n autoWidth={args.autoWidth}\n center={args.center}\n stretch={args.stretch}\n >\n <Text>This is the content of the Modal.</Text>\n </Modal>\n );\n };\n\n const ModalButton = () => {\n const { create } = useModalManager();\n\n return (\n <Button\n onClick={() => {\n create(MyModal);\n }}\n >\n Open Modal\n </Button>\n );\n };\n\n return <ModalButton />;\n};\n\nexport const ModalUpdates: StoryFn<ModalDemoProps> = (args: ModalDemoProps) => {\n interface ModalUpdatesProps {\n content: string;\n disableButton: boolean;\n heading: string;\n }\n\n const MyModal: FC<ModalUpdatesProps> = props => {\n const { update } = useModalContext();\n\n const actions = (\n <Button\n variant='primary'\n disabled={props.disableButton}\n onClick={() => {\n update({\n content: 'This Modal has been updated a second time from within the Modal!'\n });\n }}\n >\n Update Modal\n </Button>\n );\n\n return (\n <Modal\n heading={props.heading}\n actions={actions}\n autoWidth={args.autoWidth}\n center={args.center}\n stretch={args.stretch}\n >\n <Text>{props.content}</Text>\n </Modal>\n );\n };\n\n const ModalButton = () => {\n const { create } = useModalManager();\n const modalMethods = useRef<ModalMethods<ModalUpdatesProps>>();\n\n const openModal = () => {\n modalMethods.current = create(MyModal, {\n heading: 'This is the Modal heading',\n content: 'This Modal will automatically update in a few seconds.',\n disableButton: true\n });\n\n setTimeout(() => {\n modalMethods.current?.update({\n heading: 'This is the updated Modal heading',\n content: 'This Modal has been updated from its parent!',\n disableButton: false\n });\n }, 2000);\n };\n\n return <Button onClick={openModal}>Open Modal</Button>;\n };\n\n return <ModalButton />;\n};\n\nexport const AlertModal: StoryFn<AlertModalDemoProps> = (args: AlertModalDemoProps) => {\n const MyAlert = (props: { closeInitialModal: () => void }) => {\n const { dismiss } = useModalContext();\n\n const actions = useMemo(() => {\n return (\n <>\n <Button onClick={dismiss}>No</Button>\n <Button\n variant='primary'\n onClick={() => {\n dismiss();\n props.closeInitialModal();\n }}\n >\n Yes\n </Button>\n </>\n );\n }, [dismiss]);\n\n return (\n <Modal\n heading='You have unsaved changes!'\n actions={actions}\n center={args.center}\n stretch={args.stretch}\n >\n <Text>Are you sure you want to close without saving?</Text>\n </Modal>\n );\n };\n\n const MyModal = () => {\n const [name, setName] = useState('');\n const { create } = useModalManager();\n const { dismiss } = useModalContext();\n\n const actions = useMemo(() => {\n return (\n <>\n <Button\n onClick={() => {\n if (name !== '') {\n create(MyAlert, { closeInitialModal: dismiss }, { alert: true });\n } else {\n dismiss();\n }\n }}\n >\n Close\n </Button>\n <Button variant='primary' onClick={dismiss} disabled={name === ''}>\n Save\n </Button>\n </>\n );\n }, [dismiss, name]);\n\n const onNameChange = (e: ChangeEvent<HTMLInputElement>) => {\n setName(e.target.value);\n };\n\n return (\n <Modal\n actions={actions}\n heading='Close the Modal without saving any data to invoke the alert'\n autoWidth={args.autoWidth}\n center={args.center}\n stretch={args.stretch}\n onRequestDismiss={() => {\n if (name !== '') {\n create(MyAlert, { closeInitialModal: dismiss }, { alert: true });\n return false;\n }\n }}\n >\n <Input\n label='Name'\n name='name'\n onChange={onNameChange}\n onKeyDown={args.onKeyDown}\n value={name}\n required\n />\n </Modal>\n );\n };\n\n const ModalButton = () => {\n const { create } = useModalManager();\n\n return (\n <Button\n onClick={() => {\n create(MyModal, undefined, {\n onDismiss: args.onDismiss\n });\n }}\n >\n Open Modal\n </Button>\n );\n };\n\n return <ModalButton />;\n};\n\nAlertModal.args = {\n onKeyDown: action(\"Called input's onKeyDown\")\n};\n\nAlertModal.argTypes = {\n onKeyDown: { table: { disable: true } }\n};\n\nexport const ProgressState: StoryFn = () => {\n const LoadingStateModal = () => {\n const { dismiss } = useModalContext();\n\n const [transientState, setTransientState] = useState<'loading' | 'submitting' | null>(\n 'loading'\n );\n\n const actions =\n transientState === 'loading' ? null : (\n <>\n <Button\n disabled={!!transientState}\n onClick={() => {\n if (transientState !== 'submitting') {\n dismiss();\n }\n }}\n >\n Cancel\n </Button>\n <Button\n disabled={!!transientState}\n variant='primary'\n onClick={() => {\n setTransientState('submitting');\n }}\n >\n Submit\n </Button>\n </>\n );\n\n useEffect(() => {\n let timerID: number;\n\n if (transientState === 'loading' || transientState === 'submitting') {\n timerID = window.setTimeout(() => {\n if (transientState === 'loading') {\n setTransientState(null);\n } else {\n dismiss();\n }\n }, loadingTimeoutMS);\n }\n\n return () => {\n window.clearTimeout(timerID);\n };\n }, [transientState]);\n\n return (\n <Modal\n progress={useMemo(() => {\n if (transientState) {\n return {\n message: `${cap(transientState)}…`\n };\n }\n }, [transientState])}\n heading='Modal progress demo'\n actions={actions}\n onRequestDismiss={() => transientState !== 'submitting'}\n >\n {transientState !== 'loading' && (\n <Flex container={{ direction: 'column', gap: 2 }}>\n {Array.from({ length: 5 }, (_, i) => (\n <Input key={i} label={`Field-${i + 1}`} />\n ))}\n </Flex>\n )}\n </Modal>\n );\n };\n\n const ModalButton = () => {\n const { create } = useModalManager();\n\n return (\n <Button\n onClick={() => {\n create(LoadingStateModal);\n }}\n >\n Open Modal\n </Button>\n );\n };\n\n return <ModalButton />;\n};\n\nexport const MinimizableModal: StoryFn<ModalDemoProps> = (args: ModalDemoProps) => {\n const [count, setCount] = useState(1);\n const { create } = useModalManager();\n const NewModal = () => {\n return (\n <Modal heading={`Another modal from Modal #${count}`} autoWidth={args.autoWidth}>\n <Text>\n This minimizable modal is triggered from an existing open modal - Modal #{count}.\n </Text>\n </Modal>\n );\n };\n const MyModal = () => {\n return (\n <Modal\n heading={`Modal #${count}`}\n autoWidth={args.autoWidth}\n actions={\n <Button\n variant='secondary'\n onClick={() => {\n create(NewModal, undefined, {\n minimizable: true,\n onDismiss: args.onDismiss,\n onMinimize: args.onMinimize,\n onActivate: args.onActivate\n });\n }}\n >\n Create modal\n </Button>\n }\n center={args.center}\n stretch={args.stretch}\n onRequestDismiss={args.onRequestDismiss}\n onRequestMinimize={args.onRequestMinimize}\n onRequestActivate={args.onRequestActivate}\n >\n <Text>This Modal can be minimized by clicking the minimize button above.</Text>\n </Modal>\n );\n };\n\n const ModalButton = () => {\n return (\n <Button\n onClick={() => {\n setCount(count + 1);\n create(MyModal, undefined, {\n minimizable: true,\n id: `Modal #${count}`,\n onDismiss: args.onDismiss,\n onMinimize: args.onMinimize,\n onActivate: args.onActivate,\n defaultMinimized: args.defaultMinimized\n });\n }}\n >\n Open Modal\n </Button>\n );\n };\n\n return <ModalButton />;\n};\n\nexport const DockedModal: StoryFn<ModalDemoProps> = (args: ModalDemoProps) => {\n const [count, setCount] = useState(1);\n\n const MyModal = () => {\n return (\n <Modal heading={`Modal #${count}`} onRequestDock={args.onRequestDock}>\n <Text>This Modal can be minimized by clicking the minimize button above.</Text>\n </Modal>\n );\n };\n\n const ModalButton = () => {\n const { create } = useModalManager();\n\n return (\n <Button\n onClick={() => {\n setCount(count + 1);\n create(MyModal, undefined, {\n minimizable: true,\n maximizable: true,\n dockable: true\n });\n }}\n >\n Open Modal\n </Button>\n );\n };\n\n return <ModalButton />;\n};\n\ninterface AutoWidthModalContentProps {\n autoWidth: boolean;\n content: ContentTypes;\n formColumnWidthFixed: boolean;\n stretch?: never;\n center?: never;\n}\n\nexport const AutoWidthModalContent: StoryFn<AutoWidthModalContentProps> = (\n args: AutoWidthModalContentProps\n) => {\n const { push } = useToaster();\n\n const MyModal = ({ content }: { content: ReactNode }) => {\n const { dismiss } = useModalContext();\n\n return (\n <Modal\n heading={`Modal ${args.autoWidth ? 'with' : 'without'} autoWidth`}\n autoWidth={args.autoWidth}\n actions={\n args.content.includes('form') || args.content === 'random' ? (\n <>\n <Button\n name='Cancel'\n variant='secondary'\n onClick={() => {\n dismiss();\n push({ content: 'Form cancelled!' });\n }}\n >\n Cancel\n </Button>\n <Button\n name='Submit'\n variant='primary'\n onClick={() => {\n dismiss();\n push({ content: 'Form submitted!' });\n }}\n >\n Submit\n </Button>\n </>\n ) : undefined\n }\n >\n {content}\n </Modal>\n );\n };\n\n const ModalButton = () => {\n const { create } = useModalManager();\n\n return (\n <Button\n onClick={() => {\n create(MyModal, {\n content: getContent(args.content, args.formColumnWidthFixed)\n });\n }}\n >\n Open Modal\n </Button>\n );\n };\n\n return <ModalButton />;\n};\n\nAutoWidthModalContent.args = {\n autoWidth: true,\n content: 'short text',\n formColumnWidthFixed: false\n};\n\nAutoWidthModalContent.argTypes = {\n stretch: { table: { disable: true } },\n center: { table: { disable: true } },\n content: {\n options: [\n 'short text',\n 'long text',\n 'image',\n 'table',\n 'form (1 column)',\n 'form (2 column)',\n 'form (3 column)',\n 'random'\n ],\n control: { type: 'select' }\n },\n formColumnWidthFixed: { control: { type: 'boolean' } }\n};\n"]}
|
|
@@ -21,6 +21,7 @@ interface ComposerDemoProps {
|
|
|
21
21
|
onSend?: EmailComposerProps['onSend'];
|
|
22
22
|
onChange?: EmailComposerProps['onChange'];
|
|
23
23
|
data?: EmailComposerProps['data'];
|
|
24
|
+
bodyContentToReplace?: string;
|
|
24
25
|
}
|
|
25
26
|
export declare const Composer: StoryFn<ComposerDemoProps>;
|
|
26
27
|
interface OutboundEmailProps {
|
|
@@ -1 +1 @@
|
|
|
1
|
-
{"version":3,"file":"Email.stories.d.ts","sourceRoot":"","sources":["../../../src/social/Email/Email.stories.tsx"],"names":[],"mappings":"AAEA,OAAO,KAAK,EAAa,UAAU,EAAqB,MAAM,OAAO,CAAC;AAEtE,OAAO,KAAK,EAAQ,OAAO,EAAE,MAAM,kBAAkB,CAAC;AAqCtD,OAAO,KAAK,EACV,UAAU,EACV,sBAAsB,EACtB,kBAAkB,EAClB,eAAe,EACf,qBAAqB,EAErB,kBAAkB,EACnB,MAAM,2BAA2B,CAAC;AACnC,OAAO,KAAK,EAKV,eAAe,EAEhB,MAAM,4DAA4D,CAAC;;AA0CpE,wBAGU;AASV,UAAU,cAAe,SAAQ,UAAU;IACzC,wBAAwB,CAAC,EAAE,OAAO,CAAC;IACnC,iBAAiB,CAAC,EAAE,OAAO,CAAC;IAC5B,gBAAgB,CAAC,EAAE,MAAM,CAAC;IAC1B,eAAe,CAAC,EAAE,OAAO,CAAC;IAC1B,SAAS,CAAC,EAAE,OAAO,CAAC;IACpB,IAAI,CAAC,EAAE,MAAM,CAAC;CACf;AAED,eAAO,MAAM,KAAK,EAAE,OAAO,CAAC,cAAc,CAmHzC,CAAC;AA2BF,UAAU,iBAAiB;IACzB,wBAAwB,CAAC,EAAE,OAAO,CAAC;IACnC,iBAAiB,CAAC,EAAE,OAAO,CAAC;IAC5B,MAAM,CAAC,EAAE,kBAAkB,CAAC,QAAQ,CAAC,CAAC;IACtC,QAAQ,CAAC,EAAE,kBAAkB,CAAC,UAAU,CAAC,CAAC;IAC1C,MAAM,CAAC,EAAE,kBAAkB,CAAC,QAAQ,CAAC,CAAC;IACtC,QAAQ,CAAC,EAAE,kBAAkB,CAAC,UAAU,CAAC,CAAC;IAC1C,IAAI,CAAC,EAAE,kBAAkB,CAAC,MAAM,CAAC,CAAC;
|
|
1
|
+
{"version":3,"file":"Email.stories.d.ts","sourceRoot":"","sources":["../../../src/social/Email/Email.stories.tsx"],"names":[],"mappings":"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"}
|
|
@@ -109,18 +109,21 @@ export const Composer = (args) => {
|
|
|
109
109
|
bcc: { value: [] },
|
|
110
110
|
subject: { value: 'Request: Pause service' },
|
|
111
111
|
bodyContent: {
|
|
112
|
-
defaultValue:
|
|
112
|
+
defaultValue: bodyData
|
|
113
113
|
},
|
|
114
114
|
responseType: 'reply',
|
|
115
115
|
selectedTemplateId: '',
|
|
116
116
|
attachments: emailAttachments,
|
|
117
117
|
bodyContentCurrentValue: ''
|
|
118
118
|
});
|
|
119
|
-
const handleOnChange = (field, value) => {
|
|
119
|
+
const handleOnChange = (field, value, isProgramatic) => {
|
|
120
120
|
if (field === 'bodyContent') {
|
|
121
121
|
setData(prev => ({
|
|
122
122
|
...prev,
|
|
123
|
-
bodyContentCurrentValue: value
|
|
123
|
+
bodyContentCurrentValue: value,
|
|
124
|
+
bodyContent: {
|
|
125
|
+
defaultValue: value
|
|
126
|
+
}
|
|
124
127
|
}));
|
|
125
128
|
}
|
|
126
129
|
if (['responseType', 'attachments', 'selectedTemplateId'].includes(field)) {
|
|
@@ -137,7 +140,7 @@ export const Composer = (args) => {
|
|
|
137
140
|
};
|
|
138
141
|
});
|
|
139
142
|
}
|
|
140
|
-
action('onChange')(field, value);
|
|
143
|
+
action('onChange')(field, value, isProgramatic);
|
|
141
144
|
};
|
|
142
145
|
useEffect(() => {
|
|
143
146
|
if (data.responseType === 'reply') {
|
|
@@ -250,18 +253,25 @@ export const Composer = (args) => {
|
|
|
250
253
|
setComposerProgress(false);
|
|
251
254
|
});
|
|
252
255
|
};
|
|
256
|
+
const pushContentToBody = () => {
|
|
257
|
+
if (args.bodyContentToReplace)
|
|
258
|
+
composerHandle.current?.replaceBodyContent(args.bodyContentToReplace);
|
|
259
|
+
};
|
|
253
260
|
const onEditorInit = () => {
|
|
254
|
-
|
|
255
|
-
composerHandle.current?.setCursorLocationToStart?.();
|
|
261
|
+
action('onEditorInit')();
|
|
256
262
|
};
|
|
257
|
-
return (
|
|
263
|
+
return (<>
|
|
264
|
+
<EmailComposer handle={composerHandle} progress={composerProgress} onSave={args.onSave || (enableSaveAsDraft ? action('On save') : undefined)} onSend={args.onSend || handleOnSend} onCancel={args.onCancel || action('On cancel')} externalValidator={handleExternalEntry} participants={participants} onChange={args.onChange || handleOnChange} data={args.data || {
|
|
258
265
|
...data,
|
|
259
266
|
responseType: enableResponseTypeToggle ? data.responseType : undefined
|
|
260
|
-
}} templates={templates} onImageAdded={onImageAdded} onEditorInit={onEditorInit}/>
|
|
267
|
+
}} templates={templates} onImageAdded={onImageAdded} onEditorInit={onEditorInit}/>
|
|
268
|
+
<Button onClick={pushContentToBody}>Replace body content</Button>
|
|
269
|
+
</>);
|
|
261
270
|
};
|
|
262
271
|
Composer.args = {
|
|
263
272
|
enableResponseTypeToggle: true,
|
|
264
|
-
enableSaveAsDraft: true
|
|
273
|
+
enableSaveAsDraft: true,
|
|
274
|
+
bodyContentToReplace: 'Hello Eula,<br>Welcome to the world of <b>Awesome product</b>.<br><br>We appreciate your interest in this our <i>Awesome product</i>.<br><br>Please carefully read through the <a href="pega.com">user manual</a> carefully before operating this product.<br>For any queries you can always reach out to us through any of the contact details mentioned on <a href="https://www.pega.com/contact-us">our website</a>.<br><br> Regards,<br>Customer Support<br><span style="font-weight:bold">Awesome Product</span>'
|
|
265
275
|
};
|
|
266
276
|
Composer.argTypes = {
|
|
267
277
|
enableResponseTypeToggle: {
|
|
@@ -269,6 +279,9 @@ Composer.argTypes = {
|
|
|
269
279
|
},
|
|
270
280
|
enableSaveAsDraft: {
|
|
271
281
|
control: { type: 'boolean' }
|
|
282
|
+
},
|
|
283
|
+
bodyContentToReplace: {
|
|
284
|
+
control: { type: 'text' }
|
|
272
285
|
}
|
|
273
286
|
};
|
|
274
287
|
export const OutboundEmail = (args) => {
|
|
@@ -282,7 +295,7 @@ export const OutboundEmail = (args) => {
|
|
|
282
295
|
subject: { value: '' },
|
|
283
296
|
selectedTemplateId: '',
|
|
284
297
|
bodyContent: {
|
|
285
|
-
defaultValue:
|
|
298
|
+
defaultValue: bodyData
|
|
286
299
|
},
|
|
287
300
|
bodyContentCurrentValue: ''
|
|
288
301
|
});
|
|
@@ -366,8 +379,7 @@ export const OutboundEmail = (args) => {
|
|
|
366
379
|
});
|
|
367
380
|
};
|
|
368
381
|
const onEditorInit = () => {
|
|
369
|
-
|
|
370
|
-
composerHandle.current?.setCursorLocationToStart?.();
|
|
382
|
+
action('onEditorInit')();
|
|
371
383
|
};
|
|
372
384
|
return (<EmailComposer handle={composerHandle} progress={composerProgress} onSave={args.onSave || (enableSaveAsDraft ? action('On save') : undefined)} onSend={args.onSend || handleOnSend} onCancel={args.onCancel || action('On cancel')} externalValidator={handleExternalEntry} participants={participants} senderAccounts={emailAccounts} onChange={args.onChange || handleOnChange} data={args.data || {
|
|
373
385
|
...data,
|